vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Introduced new code display

pull/4615/head
Cagatay Civici 2023-10-15 09:00:52 +03:00
parent cd004e9c53
commit 0a416e0545
12 changed files with 109 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/styles/layout/_code.scss
View File

@ -27,7 +27,7 @@ pre[class*="language-"] {
background: transparent;
margin: 0;
padding: 0;
max-height: 40rem;
max-height: 60rem;
overflow: auto;
&:before, &:after {
@ -131,7 +131,7 @@ pre[class*="language-"] {
pre[class*="language-"] {
code {
background: var(--demo-code-bg) !important;
background: var(--demo-code-bg);
transition: background-color .5s, border-color .5s;
}
}
@ -140,7 +140,7 @@ pre[class*="language-"] {
&[data-p-theme^="md-"] {
pre[class*="language-"] {
code {
background: var(--surface-900) !important;
background: var(--surface-900);
}
}
}

80
assets/styles/layout/_doc.scss
View File

@ -194,38 +194,6 @@
}
}
.doc-section-code-buttons {
position: absolute;
display: flex;
align-items: center;
justify-content: end;
z-index: 1;
top: .75rem;
right: .75rem;
gap: .75rem;
button {
outline: 0 none;
outline-offset: 0;
background-color: transparent;
transition: background-color .2s, box-shadow .2s;
border: 0 none;
color: var(--demo-code-button-color);
cursor: pointer;
&:hover {
background-color: var(--demo-code-button-hover-bg);
color: var(--demo-code-button-hover-color);
}
}
}
.doc-section-code-tooltip .p-tooltip-text {
padding: 0.5rem;
font-size: 11px;
}
.doc-section-code {
position: relative;
@ -238,8 +206,56 @@
&:not(:last-child) {
margin-bottom: 1rem;
}
&:hover {
.doc-section-code-buttons {
display: flex;
}
}
}
.doc-section-code-buttons {
position: absolute;
align-items: center;
justify-content: end;
z-index: 1;
top: .75rem;
right: .75rem;
gap: .75rem;
display: none;
background: rgba(255,255,255,.05);
border-radius: 10px;
padding: 4px;
backdrop-filter: blur(20px);
button {
outline: 0 none;
border-radius: 10px;
outline-offset: 0;
background-color: transparent;
transition: background-color .2s, box-shadow .2s;
border: 0 none;
color: var(--demo-code-button-color);
cursor: pointer;
&:hover {
background-color: var(--demo-code-button-hover-bg);
color: var(--demo-code-button-hover-color);
}
&.code-active {
color: #bbf7d0;
}
}
}
.doc-section-code-tooltip .p-tooltip-text {
padding: 0.5rem;
font-size: 11px;
}
.doc-tablewrapper {
overflow: auto;
}

37
components/doc/DocSectionCode.vue
View File

@ -1,30 +1,25 @@
<template>
<div v-if="!embedded" class="doc-section-code">
<div class="doc-section-code-buttons">
<div class="doc-section-code-buttons fadein animation-duration-300">
<template v-if="codeMode !== 'basic' && !hideToggleCode">
<button :class="['py-0 px-2 border-round h-2rem', { 'text-primary': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
<button :class="['py-0 px-2 border-round h-2rem', { 'text-primary': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button>
<button :class="['py-0 px-2 border-round h-2rem', { 'code-active': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
<button :class="['py-0 px-2 border-round h-2rem', { 'code-active': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button>
</template>
<template v-if="!hideToggleCode">
<button
v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }"
type="button"
@click="toggleCodeMode('composition')"
class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
>
<button v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }" type="button" @click="toggleCodeMode('composition')" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
<i class="pi pi-code"></i>
</button>
</template>
<template v-if="!hideToggleCode && code.data">
<button v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }" type="button" @click="onToggleData" class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
<button v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }" type="button" @click="onToggleData" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
<i class="pi pi-database"></i>
</button>
</template>
<template v-if="!hideCodeSandbox">
<button v-tooltip.bottom="{ value: 'Edit in CodeSandbox', class: 'doc-section-code-tooltip' }" type="button" class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showCodesandbox">
<button v-tooltip.bottom="{ value: 'Edit in CodeSandbox', class: 'doc-section-code-tooltip' }" type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showCodesandbox">
<svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display: 'block'">
<path
d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"
@ -34,14 +29,14 @@
</template>
<template v-if="!hideStackBlitz">
<button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showStackblitz">
<button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showStackblitz">
<svg role="img" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display: 'block'">
<path d="M0 15.98H8.15844L3.40299 27.26L19 11.1945H10.7979L15.5098 0L0 15.98Z" />
</svg>
</button>
</template>
<button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="border-circle h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
<button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
<i class="pi pi-copy"></i>
</button>
</div>
@ -53,30 +48,22 @@
</template>
<template v-if="codeMode === 'basic' && !importCode">
<pre v-code><code>
{{ code.basic }}
<pre v-code><code>{{ code.basic }}
</code></pre>
</template>
<template v-if="codeMode !== 'basic' && codeLang === 'options'">
<pre v-code><code>
{{ code.options }}
<pre v-code><code>{{ code.options }}
</code></pre>
</template>
<template v-if="codeMode !== 'basic' && codeLang === 'composition'">
<pre v-code><code>
{{ code.composition }}
<pre v-code><code>{{ code.composition }}
</code></pre>
</template>
<template v-if="codeMode !== 'basic' && codeLang === 'data'">
<pre v-code.json><code>
{{ code.data }}
<pre v-code.json><code>{{ code.data }}
</code></pre>
</template>
</div>

3
doc/checkbox/AccessibilityDoc.vue
View File

@ -44,7 +44,8 @@ export default {
<span id="chkbox2">Remember Me</span>
<Checkbox aria-labelledby="chkbox2" />
<Checkbox aria-label="Remember Me" />`
<Checkbox aria-label="Remember Me" />
`
}
};
}

9
doc/checkbox/BasicDoc.vue
View File

@ -15,7 +15,8 @@ export default {
checked: false,
code: {
basic: `
<Checkbox v-model="checked" :binary="true" />`,
<Checkbox v-model="checked" :binary="true" />
`,
options: `
<template>
<div class="card flex justify-content-center">
@ -31,7 +32,8 @@ export default {
};
}
};
<\/script>`,
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
@ -43,7 +45,8 @@ export default {
import { ref } from "vue";
const checked = ref(false);
<\/script>`
<\/script>
`
}
};
}

9
doc/checkbox/DisabledDoc.vue
View File

@ -15,7 +15,8 @@ export default {
checked: false,
code: {
basic: `
<Checkbox v-model="checked" disabled />`,
<Checkbox v-model="checked" disabled />
`,
options: `
<template>
<div class="card flex justify-content-center">
@ -31,7 +32,8 @@ export default {
};
}
};
<\/script>`,
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
@ -43,7 +45,8 @@ export default {
import { ref } from "vue";
const checked = ref(false);
<\/script>`
<\/script>
`
}
};
}

9
doc/checkbox/DynamicDoc.vue
View File

@ -29,7 +29,8 @@ export default {
<div v-for="category of categories" :key="category.key" class="flex align-items-center">
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
<label :for="category.key">{{ category.name }}</label>
</div>`,
</div>
`,
options: `
<template>
<div class="card flex justify-content-center">
@ -56,7 +57,8 @@ export default {
};
}
};
<\/script>`,
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
@ -79,7 +81,8 @@ const categories = ref([
{name: "Research", key: "R"}
]);
const selectedCategories = ref(['Marketing']);
<\/script>`
<\/script>
`
}
};
}

9
doc/checkbox/GroupDoc.vue
View File

@ -47,7 +47,8 @@ export default {
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4" class="ml-2"> Onion </label>
</div>
</div>`,
</div>
`,
options: `
<template>
<div class="card flex flex-wrap justify-content-center gap-3">
@ -78,7 +79,8 @@ export default {
};
}
};
<\/script>`,
<\/script>
`,
composition: `
<template>
<div class="card flex flex-wrap justify-content-center gap-3">
@ -105,7 +107,8 @@ export default {
import { ref } from "vue";
const pizza = ref();
<\/script>`
<\/script>
`
}
};
}

9
doc/checkbox/InvalidDoc.vue
View File

@ -15,7 +15,8 @@ export default {
checked: false,
code: {
basic: `
<Checkbox v-model="checked" class="p-invalid" />`,
<Checkbox v-model="checked" class="p-invalid" />
`,
options: `
<template>
<div class="card flex justify-content-center">
@ -31,7 +32,8 @@ export default {
};
}
};
<\/script>`,
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
@ -43,7 +45,8 @@ export default {
import { ref } from "vue";
const checked = ref(false);
<\/script>`
<\/script>
`
}
};
}

6
doc/checkbox/form/VeeValidateDoc.vue
View File

@ -53,7 +53,8 @@ export default {
</form>
<Toast />
</div>
</template>`,
</template>
`,
options: `
<template>
<div class="card flex justify-content-center">
@ -94,7 +95,8 @@ export default {
return { value, handleSubmit, onSubmit, errorMessage };
}
};
<\/script>`,
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">

9
doc/checkbox/pt/PTDoc.vue
View File

@ -29,7 +29,8 @@ export default {
class: state.focused ? 'border-orange-400' : undefined
})
}"
/>`,
/>
`,
options: `
<template>
<div class="card flex justify-content-center">
@ -53,7 +54,8 @@ export default {
};
}
};
<\/script>`,
<\/script>
`,
composition: `
<template>
<div class="card flex justify-content-center">
@ -73,7 +75,8 @@ export default {
import { ref } from "vue";
const checked = ref(false);
<\/script>`
<\/script>
`
}
};
}

6
doc/checkbox/theming/TailwindDoc.vue
View File

@ -15,7 +15,8 @@ export default {
data() {
return {
code1: {
basic: `export default {
basic: `
export default {
checkbox: {
root: {
class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
@ -51,7 +52,8 @@ export default {
import { ref } from "vue";
const checked = ref(false);
<\/script>`
<\/script>
`
}
};
}