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

Merge branch 'primefaces:master' into master

pull/7365/head
Rasmus 2025-03-04 13:59:14 +02:00 committed by GitHub
parent 2e61789e4d 521d465ad6
commit 364f0b855d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
331 changed files with 38176 additions and 3618 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
.gitignore vendored
View File

@ -1,15 +1,31 @@
node_modules
coverage
*.log*
# Nuxt dev/build outputs
.output
.data
.nuxt
.nitro
.cache
.output
.env
dist
# Node dependencies
node_modules
# Logs
logs
*.log*
# Misc
.DS_Store
.fleet
.idea
.eslintcache
api-generator/typedoc.json
coverage
**/.DS_Store
# Local env files
.env
.env.*
!.env.example
# Custom
api-generator/typedoc.json
apps/showcase/components.d.ts

10
CHANGELOG.md
View File

@ -1,5 +1,15 @@
# Changelog
## [4.3.1](https://github.com/primefaces/primevue/tree/4.3.1) (2025-02-25)
[Full Changelog](https://github.com/primefaces/primevue/compare/4.3.0...4.3.1)
**Fixed bugs:**
- DatePicker: selection start and end bug [\#7318](https://github.com/primefaces/primevue/issues/7318)
- InputNumber: locale warnings [\#7317](https://github.com/primefaces/primevue/issues/7317)
- ConfirmPopup: alignment bug on first click [\#7316](https://github.com/primefaces/primevue/issues/7316)
## [4.3.0](https://github.com/primefaces/primevue/tree/4.3.0) (2025-02-24)
[Full Changelog](https://github.com/primefaces/primevue/compare/4.3.0-rc.1...4.3.0)

1
apps/showcase/README.md Normal file
View File

@ -0,0 +1 @@
# Showcase

6
apps/showcase/components/doc/codeeditor/templates.js
View File

@ -21,7 +21,7 @@ const core_dependencies = {
tailwindcss: app_dependencies['tailwindcss'] || 'latest',
autoprefixer: app_dependencies['autoprefixer'] || 'latest',
postcss: app_dependencies['postcss'] || 'latest',
'tailwindcss-primeui': app_dependencies['tailwindcss-primeui'] || 'latest',
'tailwindcss-primeui': 'latest',
'unplugin-vue-components': 'latest'
};
@ -120,12 +120,12 @@ export default defineConfig({
},
'tailwind.config.js': {
content: `/** @type {import('tailwindcss').Config} */
const primeui = require('tailwindcss-primeui');
import PrimeUI from 'tailwindcss-primeui';
export default {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: ['selector', '[class="p-dark"]'],
plugins: [primeui]
plugins: [PrimeUI]
};
`
},

16
apps/showcase/doc/autocomplete/FormsDoc.vue
View File

@ -5,8 +5,8 @@
<div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
<div class="flex flex-col gap-1">
<AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" fluid />
<Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
<AutoComplete name="country.name" optionLabel="name" :suggestions="filteredCountries" @complete="search" fluid />
<Message v-if="$form.country?.name?.invalid" severity="error" size="small" variant="simple">{{ $form.country.name.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -41,8 +41,8 @@ export default {
basic: `
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
<div class="flex flex-col gap-1">
<AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
<Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
<AutoComplete name="country.name" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
<Message v-if="$form.country?.name?.invalid" severity="error" size="small" variant="simple">{{ $form.country.name.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -52,8 +52,8 @@ export default {
<div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
<div class="flex flex-col gap-1">
<AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
<Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
<AutoComplete name="country.name" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
<Message v-if="$form.country?.name?.invalid" severity="error" size="small" variant="simple">{{ $form.country.name.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>
@ -116,8 +116,8 @@ export default {
<div class="card flex justify-center">
<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
<div class="flex flex-col gap-1">
<AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
<Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
<AutoComplete name="country.name" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
<Message v-if="$form.country?.name?.invalid" severity="error" size="small" variant="simple">{{ $form.country.name.error?.message }}</Message>
</div>
<Button type="submit" severity="secondary" label="Submit" />
</Form>

18
apps/showcase/doc/button/LinkDoc.vue
View File

@ -1,11 +1,13 @@
<template>
<DocSectionText v-bind="$attrs">
<p>The button element can be displayed as a link element visually when the <i>link</i> property is present. If you need to use buttons for actual navigations, use the <i>as</i> property to customize the rendered element.</p>
<p>The button element can be displayed as a link element visually when the <i>link</i> property is present. If you need to customize the rendering, use the <i>as</i> to change the element or <i>asChild</i> for advanced templating.</p>
</DocSectionText>
<div class="card flex justify-center gap-4">
<Button label="Link" variant="link" />
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
<Button as="router-link" label="Router" to="/" />
<Button asChild v-slot="slotProps">
<RouterLink to="/" :class="slotProps.class">Router</RouterLink>
</Button>
</div>
<DocSectionCode :code="code" />
</template>
@ -18,14 +20,18 @@ export default {
basic: `
<Button label="Link" variant="link" />
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
<Button as="router-link" label="Router" to="/" />
<Button asChild v-slot="slotProps">
<RouterLink to="/" :class="slotProps.class">Router</RouterLink>
</Button>
`,
options: `
<template>
<div class="card flex justify-center gap-4">
<Button label="Link" variant="link" />
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
<Button as="router-link" label="Router" to="/" />
<Button asChild v-slot="slotProps">
<RouterLink to="/" :class="slotProps.class">Router</RouterLink>
</Button>
</div>
</template>
@ -37,7 +43,9 @@ export default {
<div class="card flex justify-center gap-4">
<Button label="Link" variant="link" />
<Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
<Button as="router-link" label="Router" to="/" />
<Button asChild v-slot="slotProps">
<RouterLink to="/" :class="slotProps.class">Router</RouterLink>
</Button>
</div>
</template>

20
apps/showcase/doc/chip/IconDoc.vue
View File

@ -7,6 +7,11 @@
<Chip label="Facebook" icon="pi pi-facebook" />
<Chip label="Google" icon="pi pi-google" />
<Chip label="Microsoft" icon="pi pi-microsoft" removable />
<Chip label="GitHub" icon="pi pi-github" removable>
<template #removeicon="{ removeCallback, keydownCallback }">
<i class="pi pi-minus-circle" @click="removeCallback" @keydown="keydownCallback" />
</template>
</Chip>
</div>
<DocSectionCode :code="code" />
</template>
@ -21,6 +26,11 @@ export default {
<Chip label="Facebook" icon="pi pi-facebook" />
<Chip label="Google" icon="pi pi-google" />
<Chip label="Microsoft" icon="pi pi-microsoft" removable />
<Chip label="GitHub" icon="pi pi-github" removable>
<template #removeicon="{ removeCallback, keydownCallback }">
<i class="pi pi-minus-circle" @click="removeCallback" @keydown="keydownCallback" />
</template>
</Chip>
`,
options: `
<template>
@ -29,6 +39,11 @@ export default {
<Chip label="Facebook" icon="pi pi-facebook" />
<Chip label="Google" icon="pi pi-google" />
<Chip label="Microsoft" icon="pi pi-microsoft" removable />
<Chip label="GitHub" icon="pi pi-github" removable>
<template #removeicon="{ removeCallback, keydownCallback }">
<i class="pi pi-minus-circle" @click="removeCallback" @keydown="keydownCallback" />
</template>
</Chip>
</div>
</template>
<script>
@ -42,6 +57,11 @@ export default {
<Chip label="Facebook" icon="pi pi-facebook" />
<Chip label="Google" icon="pi pi-google" />
<Chip label="Microsoft" icon="pi pi-microsoft" removable />
<Chip label="GitHub" icon="pi pi-github" removable>
<template #removeicon="{ removeCallback, keydownCallback }">
<i class="pi pi-minus-circle" @click="removeCallback" @keydown="keydownCallback" />
</template>
</Chip>
</div>
</template>
<script setup>

32
apps/showcase/doc/common/apidoc/index.json
View File

@ -736,7 +736,7 @@
"name": "as",
"optional": true,
"readonly": false,
"type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
"type": "string | Component",
"default": "DIV",
"description": "Use to change the HTML tag of root element."
},
@ -1830,7 +1830,7 @@
"name": "as",
"optional": true,
"readonly": false,
"type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
"type": "string | Component",
"default": "DIV",
"description": "Use to change the HTML tag of root element."
},
@ -2117,7 +2117,7 @@
"name": "as",
"optional": true,
"readonly": false,
"type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
"type": "string | Component",
"default": "BUTTON",
"description": "Use to change the HTML tag of root element."
},
@ -2418,7 +2418,7 @@
"name": "as",
"optional": true,
"readonly": false,
"type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
"type": "string | Component",
"default": "DIV",
"description": "Use to change the HTML tag of root element."
},
@ -8247,7 +8247,7 @@
"name": "iconPos",
"optional": true,
"readonly": false,
"type": "\"left\" | \"right\" | \"top\" | \"bottom\"",
"type": "HintedString<\"left\" | \"right\" | \"top\" | \"bottom\">",
"default": "left",
"description": "Position of the icon."
},
@ -8303,7 +8303,7 @@
"name": "as",
"optional": true,
"readonly": false,
"type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
"type": "string | Component",
"default": "BUTTON",
"description": "Use to change the HTML tag of root element."
},
@ -8367,7 +8367,7 @@
"name": "size",
"optional": true,
"readonly": false,
"type": "\"small\" | \"large\"",
"type": "HintedString<\"small\" | \"large\">",
"default": "",
"description": "Defines the size of the button."
},
@ -8375,7 +8375,7 @@
"name": "variant",
"optional": true,
"readonly": false,
"type": "\"outlined\" | \"text\" | \"link\"",
"type": "HintedString<\"outlined\" | \"text\" | \"link\">",
"default": "undefined",
"description": "Specifies the variant of the component."
},
@ -8427,14 +8427,6 @@
"type": "boolean",
"default": "false",
"description": "When enabled, it removes component related styles in the core."
},
{
"name": "to",
"optional": true,
"readonly": false,
"type": "string",
"default": "",
"description": "Route Location the router-link should navigate to when clicked on."
}
],
"methods": [],
@ -64104,7 +64096,7 @@
"name": "as",
"optional": true,
"readonly": false,
"type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
"type": "string | Component",
"default": "BUTTON",
"description": "Use to change the HTML tag of root element."
},
@ -64877,7 +64869,7 @@
"name": "as",
"optional": true,
"readonly": false,
"type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
"type": "string | Component",
"default": "BUTTON",
"description": "Use to change the HTML tag of root element."
},
@ -66377,7 +66369,7 @@
"name": "as",
"optional": true,
"readonly": false,
"type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
"type": "string | Component",
"default": "BUTTON",
"description": "Use to change the HTML tag of root element."
},
@ -67543,7 +67535,7 @@
"name": "as",
"optional": true,
"readonly": false,
"type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
"type": "string | Component",
"default": "DIV",
"description": "Use to change the HTML tag of root element."
},

6
apps/showcase/doc/inputnumber/ButtonsDoc.vue
View File

@ -5,16 +5,16 @@
<div class="card flex flex-wrap gap-4">
<div class="flex-auto">
<label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid disabled />
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
</div>
<div class="flex-auto">
<label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid disabled />
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
</div>
<div class="flex-auto">
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid disabled>
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid >
<template #incrementbuttonicon>
<span class="pi pi-plus" />
</template>

4
apps/showcase/doc/radiobutton/InvalidDoc.vue
View File

@ -28,7 +28,7 @@ export default {
export default {
data() {
return {
val: null
value: null
}
}
};
@ -44,7 +44,7 @@ export default {
<script setup>
import { ref } from 'vue';
const val = ref(null);
const value = ref(null);
<\/script>
`
}

2
apps/showcase/doc/tailwind/OverrideDoc.vue
View File

@ -1,6 +1,6 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Tailwind utilities may not be able to override the default styling of components due to css specificity, there are two possible solutions; Import and CSS Layer.</p>
<p>Tailwind utilities may not be able to override the default styling of components due to css specificity, there are two possible solutions; Important and CSS Layer.</p>
<h3>Important</h3>
<p>Use the <i>!</i> as a prefix to enforce the styling. This is not the recommend approach, and should be used as last resort to avoid adding unnecessary style classes to your bundle.</p>

2
apps/showcase/doc/toggleswitch/TemplateDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>The <i>handle</i> slot is available to display custom content.</p>
</DocSectionText>
<div class="card flex justify-center gap-4">
<div class="card flex justify-center">
<ToggleSwitch v-model="checked">
<template #handle="{ checked }">
<i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />

35
apps/showcase/nuxt.config.js
View File

@ -18,18 +18,22 @@ try {
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
typescript: false,
compatibilityDate: '2024-11-01',
devtools: { enabled: false },
modules: ['@primevue/nuxt-module'],
components: {
path: '~/components',
pathPrefix: false
},
components: [
{
path: '~/components',
pathPrefix: false
}
],
vite: {
optimizeDeps: {
noDiscovery: true,
include: ['quill', 'yup']
},
resolve: {
dedupe: ['vue', '@primeuix/styles', '@primeuix/themes', '@primeuix/utils'],
optimizeDeps: {
disabled: true
},
alias
}
},
@ -40,17 +44,10 @@ export default defineNuxtConfig({
'/accessibility': { redirect: { to: '/guides/accessibility', statusCode: 301 } },
'/installation': { redirect: { to: '/vite', statusCode: 301 } }
},
primevue:
PROCESS_ENV.DEV_ENV === 'hot'
? {
usePrimeVue: false,
autoImport: true,
loadStyles: false
}
: {
autoImport: true, // When enabled, the module automatically imports PrimeVue components and directives used throughout the application.
importTheme: { from: '@/themes/app-theme.js' }
},
primevue: {
autoImport: true, // When enabled, the module automatically imports PrimeVue components and directives used throughout the application.
importTheme: { from: '@/themes/app-theme.js' }
},
app: {
baseURL: baseUrl,
head: {

72
apps/showcase/package.json
View File

@ -1,9 +1,10 @@
{
"name": "showcase",
"version": "4.3.0",
"version": "4.3.1",
"author": "PrimeTek Informatics",
"description": "",
"homepage": "https://primevue.org/",
"type": "module",
"license": "MIT",
"repository": {
"type": "git",
@ -13,15 +14,6 @@
"bugs": {
"url": "https://github.com/primefaces/primevue/issues"
},
"scripts": {
"build": "pnpm run build:prebuild && nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"build:prebuild": "node ./scripts/prebuild.js",
"build:apidoc": "node ./scripts/build-apidoc.js"
},
"keywords": [
"primevue",
"vue",
@ -37,35 +29,41 @@
"unstyled",
"passthrough"
],
"devDependencies": {
"@stackblitz/sdk": "^1.8.2",
"autoprefixer": "^10.4.16",
"chart.js": "3.3.2",
"jsdom": "^19.0.0",
"nuxt": "3.3.2",
"postcss": "^8.4.31",
"prettier": "2.7.1",
"primeicons": "^7.0.0",
"quill": "2.0.0",
"sass": "1.45.0",
"sass-loader": "8.0.2",
"tailwindcss": "^3.4.1",
"tailwindcss-primeui": "^0.4.0",
"typedoc": "0.23.23",
"primevue": "workspace:*",
"@primevue/core": "workspace:*",
"@primevue/nuxt-module": "workspace:*",
"@primevue/forms": "workspace:*",
"@primeuix/themes": "catalog:",
"yup": "1.4.0",
"zod": "3.23.8",
"valibot": "^0.42.1",
"superstruct": "^2.0.2"
"scripts": {
"build": "pnpm run build:prebuild && nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"build:prebuild": "node ./scripts/prebuild.mjs",
"build:apidoc": "node ./scripts/build-apidoc.cjs"
},
"dependencies": {
"@docsearch/js": "^3.3.3"
"@docsearch/js": "catalog:app",
"@primeuix/themes": "catalog:",
"@primevue/core": "workspace:*",
"@primevue/forms": "workspace:*",
"@primevue/nuxt-module": "workspace:*",
"primeicons": "catalog:",
"primevue": "workspace:*",
"chart.js": "catalog:app",
"quill": "catalog:app",
"superstruct": "^2.0.2",
"valibot": "^0.42.1",
"yup": "1.4.0",
"zod": "3.23.8"
},
"engines": {
"node": ">=12.11.0"
"devDependencies": {
"@stackblitz/sdk": "^1.8.2",
"autoprefixer": "^10",
"jsdom": "^19.0.0",
"nuxt": "catalog:app",
"postcss": "^8.4.31",
"sass": "catalog:app",
"sass-loader": "catalog:app",
"tailwindcss": "^3",
"tailwindcss-primeui": "catalog:",
"typedoc": "0.23.23",
"vite": "catalog:app"
}
}

4
apps/showcase/pages/textarea/index.vue
View File

@ -2,7 +2,7 @@
<DocComponent
title="Vue Textarea Component"
header="Textarea"
description="Textarea adds styling, key filtering and autoResize functionality to standard textarea element."
description="Textarea adds styling and autoResize functionality to standard textarea element."
:componentDocs="docs"
:apiDocs="['Textarea']"
:ptTabComponent="ptComponent"
@ -20,9 +20,9 @@ import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc.vue';
import FormsDoc from '@/doc/textarea/FormsDoc.vue';
import IftaLabelDoc from '@/doc/textarea/IftaLabelDoc.vue';
import ImportDoc from '@/doc/textarea/ImportDoc.vue';
import SizesDoc from '@/doc/textarea/SizesDoc.vue';
import InvalidDoc from '@/doc/textarea/InvalidDoc.vue';
import PTComponent from '@/doc/textarea/pt/index.vue';
import SizesDoc from '@/doc/textarea/SizesDoc.vue';
import ThemingDoc from '@/doc/textarea/theming/index.vue';
export default {

296
apps/showcase/rollup.config.js
View File

@ -1,296 +0,0 @@
import alias from '@rollup/plugin-alias';
import { babel } from '@rollup/plugin-babel';
import terser from '@rollup/plugin-terser';
import postcss from 'rollup-plugin-postcss';
import vue from 'rollup-plugin-vue';
import fs from 'fs-extra';
import path from 'path';
import viteConfig, { THEME_PRESETS } from './nuxt-vite.config.js';
import pkg from './package.json';
// globals
const GLOBALS = {
vue: 'Vue'
};
// externals
const GLOBAL_EXTERNALS = ['vue', 'chart.js/auto', 'quill'];
const INLINE_EXTERNALS = Object.keys(viteConfig.resolve.alias);
const EXTERNALS = [...GLOBAL_EXTERNALS, ...INLINE_EXTERNALS];
// alias
const ALIAS_ENTRIES = Object.entries(viteConfig.resolve.alias).map(([key, value]) => ({ find: key, replacement: value }));
// plugins
const BABEL_PLUGIN_OPTIONS = {
extensions: ['.js', '.vue'],
exclude: 'node_modules/**',
presets: ['@babel/preset-env'],
plugins: [],
skipPreflightCheck: true,
babelHelpers: 'runtime',
babelrc: false
};
const ALIAS_PLUGIN_OPTIONS = {
entries: ALIAS_ENTRIES
};
const POSTCSS_PLUGIN_OPTIONS = {
sourceMap: false
};
const TERSER_PLUGIN_OPTIONS = {
compress: {
keep_infinity: true,
pure_getters: true,
reduce_funcs: true
},
mangle: {
reserved: ['theme', 'css']
}
};
const PLUGINS = [vue(), postcss(POSTCSS_PLUGIN_OPTIONS), babel(BABEL_PLUGIN_OPTIONS)];
const ENTRY = {
entries: [],
onwarn(warning) {
if (warning.code === 'CIRCULAR_DEPENDENCY') {
//console.error(`(!) ${warning.message}`);
return;
}
},
format: {
cjs_es(options) {
return ENTRY.format.cjs(options).es(options);
},
cjs({ input, output, minify }) {
ENTRY.entries.push({
onwarn: ENTRY.onwarn,
input,
plugins: [...PLUGINS, minify && terser(TERSER_PLUGIN_OPTIONS)],
external: EXTERNALS,
inlineDynamicImports: true,
output: [
{
format: 'cjs',
file: `${output}${minify ? '.min' : ''}.cjs`,
sourcemap: true,
exports: 'auto'
}
]
});
return ENTRY.format;
},
es({ input, output, minify }) {
ENTRY.entries.push({
onwarn: ENTRY.onwarn,
input,
plugins: [...PLUGINS, minify && terser(TERSER_PLUGIN_OPTIONS)],
external: EXTERNALS,
inlineDynamicImports: true,
output: [
{
format: 'es',
file: `${output}${minify ? '.min' : ''}.mjs`,
sourcemap: true,
exports: 'auto'
}
]
});
return ENTRY.format;
},
umd({ name, input, output, minify }) {
ENTRY.entries.push({
onwarn: ENTRY.onwarn,
input,
plugins: [alias(ALIAS_PLUGIN_OPTIONS), ...PLUGINS, minify && terser(TERSER_PLUGIN_OPTIONS)],
external: GLOBAL_EXTERNALS,
inlineDynamicImports: true,
output: [
{
format: 'umd',
name: name ?? 'PrimeVue',
file: `${output}${minify ? '.min' : ''}.js`,
globals: GLOBALS,
exports: 'auto'
}
]
});
return ENTRY.format;
}
}
};
function addFile() {
fs.readdirSync(path.resolve(__dirname, process.env.INPUT_DIR), { withFileTypes: true })
.filter((dir) => dir.isDirectory())
.forEach(({ name: folderName }) => {
fs.readdirSync(path.resolve(__dirname, process.env.INPUT_DIR + folderName)).forEach((file) => {
let name = file.split(/(.vue)$|(.js)$/)[0].toLowerCase();
if (name === folderName) {
const input = process.env.INPUT_DIR + folderName + '/' + file;
const output = process.env.OUTPUT_DIR + folderName + '/' + name;
ENTRY.format.es({ input, output });
}
});
});
}
function addIcon() {
const iconDir = path.resolve(__dirname, process.env.INPUT_DIR + 'icons');
fs.readdirSync(path.resolve(__dirname, iconDir), { withFileTypes: true })
.filter((dir) => dir.isDirectory())
.forEach(({ name: folderName }) => {
fs.readdirSync(path.resolve(__dirname, iconDir + '/' + folderName)).forEach((file) => {
if (/\.vue$/.test(file)) {
const name = file.split(/(.vue)$/)[0].toLowerCase();
const input = process.env.INPUT_DIR + 'icons/' + folderName + '/' + file;
const output = process.env.OUTPUT_DIR + 'icons/' + folderName + '/' + name;
ENTRY.format.es({ input, output });
}
});
});
}
function addStyle() {
fs.readdirSync(path.resolve(__dirname, process.env.INPUT_DIR), { withFileTypes: true })
.filter((dir) => dir.isDirectory())
.forEach(({ name: folderName }) => {
try {
fs.readdirSync(path.resolve(__dirname, process.env.INPUT_DIR + folderName + '/style')).forEach((file) => {
if (/\.js$/.test(file)) {
const name = file.split(/(.js)$/)[0].toLowerCase();
const input = process.env.INPUT_DIR + folderName + '/style/' + file;
const output = process.env.OUTPUT_DIR + folderName + '/style/' + name;
ENTRY.format.es({ input, output });
}
});
} catch {}
});
}
function traverseDir(dir, condition, callback) {
try {
const files = fs.readdirSync(dir);
files.forEach((file) => {
const filePath = path.join(dir, file);
const fileStat = fs.statSync(filePath);
if (fileStat.isDirectory()) {
traverseDir(filePath, condition, callback);
} else if (condition?.(file) && fileStat.isFile()) {
callback?.(file, filePath, dir);
}
});
} catch {}
}
function addThemes() {
traverseDir(
path.resolve(__dirname, process.env.INPUT_DIR + 'themes'),
(file) => file === 'index.js',
(file, filePath, folderPath) => {
const searchFolder = '/' + process.env.INPUT_DIR;
const folderName = folderPath.substring(folderPath.indexOf(searchFolder) + searchFolder.length);
const input = process.env.INPUT_DIR + folderName + '/' + file;
const output = process.env.OUTPUT_DIR + folderName + '/' + 'index';
ENTRY.format.es({ input, output });
}
);
}
function addCore() {
ENTRY.format.es({ input: process.env.INPUT_DIR + 'config/PrimeVue.js', output: process.env.OUTPUT_DIR + 'config/config' });
ENTRY.format.es({ input: process.env.INPUT_DIR + 'service/PrimeVueService.js', output: process.env.OUTPUT_DIR + 'service/primevueservice' });
}
function addPassThrough() {
ENTRY.format.es({ input: process.env.INPUT_DIR + 'passthrough/index.js', output: process.env.OUTPUT_DIR + 'passthrough/index' });
}
function addLibrary() {
THEME_PRESETS?.forEach((preset) => {
ENTRY.format.umd({ name: `PrimeVue.Themes.${preset[0].toUpperCase() + preset.slice(1)}`, input: process.env.INPUT_DIR + `themes/${preset}/index.js`, output: process.env.OUTPUT_DIR + `umd/themes/${preset}`, minify: true });
});
ENTRY.format.umd({ name: 'PrimeVue', input: process.env.INPUT_DIR + 'primevue.js', output: process.env.OUTPUT_DIR + 'umd/primevue', minify: true });
}
function addPackageJson() {
const outputDir = path.resolve(__dirname, process.env.OUTPUT_DIR);
const packageJson = `{
"name": "primevue",
"version": "${pkg.version}",
"private": "false",
"author": "PrimeTek Informatics",
"description": "PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.",
"homepage": "https://primevue.org/",
"repository": {
"type": "git",
"url": "https://github.com/primefaces/primevue.git"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/primefaces/primevue/issues"
},
"keywords": [
"primevue",
"vue",
"vue.js",
"vue2",
"vue3",
"ui library",
"component library",
"material",
"bootstrap",
"fluent",
"tailwind",
"unstyled",
"passthrough"
],
"unpkg": "umd/primevue.min.js",
"jsdelivr": "umd/primevue.min.js",
"web-types": "./web-types.json",
"vetur": {
"tags": "./vetur-tags.json",
"attributes": "./vetur-attributes.json"
},
"sideEffects": [
"*.vue"
],
"peerDependencies": {
"vue": "^3.5.0"
},
"engines": {
"node": ">=12.11.0"
}
}`;
!fs.existsSync(outputDir) && fs.mkdirSync(outputDir);
fs.writeFileSync(path.resolve(outputDir, 'package.json'), packageJson);
}
addCore();
addStyle();
addThemes();
addIcon();
addFile();
addPassThrough();
addLibrary();
addPackageJson();
export default ENTRY.entries;

0
apps/showcase/scripts/build-apidoc.js → apps/showcase/scripts/build-apidoc.cjs
View File

20
apps/showcase/scripts/prebuild.js
View File

@ -1,20 +0,0 @@
const fs = require('fs');
const path = require('path');
const rootDir = path.resolve(__dirname, '../');
const workspaceDir = path.resolve(__dirname, '../../../');
const pkg = path.resolve(rootDir, 'package.json');
const pkgJson = require(pkg);
const packageJson = require(path.resolve(workspaceDir, 'package.json'));
pkgJson.version = packageJson.version;
pkgJson.author = packageJson.author;
pkgJson.homepage = packageJson.homepage;
pkgJson.license = packageJson.license;
pkgJson.repository = { ...pkgJson.repository, ...packageJson.repository };
pkgJson.bugs = { ...pkgJson.bugs, ...packageJson.bugs };
pkgJson.engines = { ...pkgJson.engines, ...packageJson.engines };
fs.writeFileSync(pkg, JSON.stringify(pkgJson, null, 4));

25
apps/showcase/scripts/prebuild.mjs Normal file
View File

@ -0,0 +1,25 @@
import fs from 'fs';
import path, { dirname } from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const rootDir = path.resolve(__dirname, '../');
const workspaceDir = path.resolve(__dirname, '../../../');
const pkgPath = path.resolve(rootDir, 'package.json');
const packageJsonPath = path.resolve(workspaceDir, 'package.json');
const pkgJson = JSON.parse(fs.readFileSync(pkgPath, { encoding: 'utf-8' }));
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, { encoding: 'utf-8' }));
pkgJson.version = packageJson.version;
pkgJson.author = packageJson.author;
pkgJson.homepage = packageJson.homepage;
pkgJson.license = packageJson.license;
pkgJson.repository = { ...pkgJson.repository, ...packageJson.repository };
pkgJson.bugs = { ...pkgJson.bugs, ...packageJson.bugs };
pkgJson.engines = { ...pkgJson.engines, ...packageJson.engines };
fs.writeFileSync(pkgPath, JSON.stringify(pkgJson, null, 4));

6
apps/showcase/tailwind.config.js
View File

@ -1,10 +1,10 @@
/** @type {import('tailwindcss').Config} */
const primeui = require('tailwindcss-primeui');
import PrimeUI from 'tailwindcss-primeui';
module.exports = {
export default {
darkMode: ['selector', '[class="p-dark"]'],
content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'],
plugins: [primeui],
plugins: [PrimeUI],
theme: {
screens: {
sm: '576px',

2
apps/showcase/tsconfig.json
View File

@ -1,4 +1,6 @@
{
// https://nuxt.com/docs/guide/concepts/typescript
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],

1
apps/volt/README.md Normal file
View File

@ -0,0 +1 @@
# Volt

35
apps/volt/app.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
export default {
mounted() {
EventBus.on('dark-mode-toggle', this.darkModeToggleListener);
},
beforeUnmount() {
EventBus.off('dark-mode-toggle', this.darkModeToggleListener);
},
methods: {
darkModeToggleListener(event) {
if (!document.startViewTransition) {
this.toggleDarkMode(event);
return;
}
document.startViewTransition(() => this.toggleDarkMode(event));
},
toggleDarkMode() {
document.documentElement.classList.toggle('p-dark');
this.$appState.darkTheme = !this.$appState.darkTheme;
EventBus.emit('dark-mode-toggle-complete');
}
}
};
</script>

173
apps/volt/assets/data/menu.json Normal file
View File

@ -0,0 +1,173 @@
{
"data": [
{
"name": "Getting Started",
"icon": "pi pi-home",
"children": [
{
"name": "Introduction",
"to": "/introduction"
},
{
"name": "Vite",
"to": "/vite"
},
{
"name": "Nuxt",
"to": "/nuxt"
}
]
},
{
"name": "Components",
"icon": "pi pi-compass",
"children": [
{
"name": "Avatar",
"to": "/avatar"
},
{
"name": "Button",
"to": "/button"
},
{
"name": "Card",
"to": "/card"
},
{
"name": "Checkbox",
"to": "/checkbox"
},
{
"name": "Chip",
"to": "/chip"
},
{
"name": "InputMask",
"to": "/inputmask"
},
{
"name": "InputNumber",
"to": "/inputnumber"
},
{
"name": "InputText",
"to": "/inputtext"
},
{
"name": "ProgressBar",
"to": "/progressbar"
},
{
"name": "RadioButton",
"to": "/radiobutton"
},
{
"name": "Rating",
"to": "/rating"
},
{
"name": "SelectButton",
"to": "/selectbutton"
},
{
"name": "Skeleton",
"to": "/skeleton"
},
{
"name": "Slider",
"to": "/slider"
},
{
"name": "Textarea",
"to": "/textarea"
},
{
"name": "Timeline",
"to": "/timeline"
},
{
"name": "ToggleButton",
"to": "/togglebutton"
},
{
"name": "ToggleSwitch",
"to": "/toggleswitch"
}
]
},
{
"name": "Icons",
"icon": "pi pi-eye",
"to": "/icons"
},
{
"name": "Figma UI Kit",
"icon": "pi pi-pencil",
"to": "https://primevue.org/uikit"
},
{
"name": "Templates",
"icon": "pi pi-heart",
"to": "https://primevue.org/templates"
},
{
"name": "PrimeBlocks",
"icon": "pi pi-server",
"href": "https://primeblocks.org"
},
{
"name": "Support",
"icon": "pi pi-question",
"children": [
{
"name": "Discord Server",
"href": "https://discord.gg/gzKFYnpmCY"
},
{
"name": "Forum",
"href": "https://github.com/orgs/primefaces/discussions"
},
{
"name": "PRO Support",
"href": "https://primevue.org/support"
}
]
},
{
"name": "Discover",
"icon": "pi pi-search",
"children": [
{
"name": "About Us",
"href": "https://primevue.org/team"
},
{
"name": "Newsletter",
"href": "https://www.primefaces.org/newsletter"
},
{
"name": "PrimeGear",
"href": "https://gear.primefaces.org"
},
{
"name": "Source Code",
"href": "https://github.com/primefaces/primevue/tree/master/apps/volt/volt"
},
{
"name": "Store",
"href": "https://www.primefaces.org/store/"
},
{
"name": "Twitter",
"href": "https://twitter.com/primevue"
},
{
"name": "PrimeTV",
"icon": "pi pi-youtube",
"href": "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw"
}
]
}
]
}

4
apps/volt/assets/data/news.json Normal file
View File

@ -0,0 +1,4 @@
{
"id": 4,
"content": "Tailwind Presets Now Support with PrimeVue v4.2 🎉"
}

BIN
apps/volt/assets/images/island1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
apps/volt/assets/images/island2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

133
apps/volt/assets/styles/app/_code.scss Normal file
View File

@ -0,0 +1,133 @@
code[class*="language-"],
pre[class*="language-"] {
background: none;
font-family: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,Liberation Mono,monospace;
text-align: start;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
div.code-toolbar > .toolbar {
display: none;
}
pre[class*="language-"] {
position: relative;
background: transparent;
margin: 0;
padding: 0;
max-height: 40rem;
overflow: auto;
color-scheme: dark;
&:before, &:after {
display: none !important;
}
code {
border-inline-start: 1rem solid transparent;
box-shadow: none;
margin: 0;
font-size: 14px;
border-radius: 10px;
color: #ffffff;
max-height: inherit;
height: inherit;
padding: 0 1rem;
display: block;
overflow: auto;
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #bbf7d0;
}
.token.punctuation {
color: #bfdbfe;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.function-name,
.token.constant,
.token.symbol,
.token.deleted {
color: #93c5fd;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.function,
.token.builtin,
.token.inserted {
color: #eff6ff;
}
.token.operator,
.token.entity,
.token.url,
.token.variable {
color: #ffffff;
}
.token.atrule,
.token.attr-value,
.token.keyword,
.token.class-name {
color: #bbf7d0;
}
.token.regex,
.token.important {
color: #fde68a;
}
.language-css .token.string,
.style .token.string {
color: #fde68a;
}
.token.important {
font-weight: normal;
}
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
}
}
.copy-to-clipboard-button {
display: none;
}
pre[class*="language-"] {
code {
background: var(--code-background);
}
}

18
apps/volt/assets/styles/app/_content.scss Normal file
View File

@ -0,0 +1,18 @@
.layout-content {
padding: 6rem 4rem 0 4rem;
display: flex;
.layout-content-slot {
flex: 1 1 auto;
width: 1%;
padding-top: .5rem;
}
}
.card {
background: var(--card-background);
border: var(--card-border);
padding: 2rem;
border-radius: 10px;
margin-bottom: 1rem;
}

83
apps/volt/assets/styles/app/_core.scss Normal file
View File

@ -0,0 +1,83 @@
html {
font-size: 14px;
font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
body {
margin: 0px;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
background-color: var(--ground-background);
font-weight: normal;
color: var(--text-color);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.layout-wrapper {
background-color: var(--ground-background);
}
a {
text-decoration: none;
}
::selection {
background-color: var(--selection-background);
color: var(--selection-text-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-block: 1.5rem 1rem;
margin-inline: 0;
font-family: inherit;
font-weight: 600;
line-height: 1.2;
color: var(--high-contrast-text-color);
&:first-child {
margin-top: 0;
}
}
h1 {
font-size: 1.75rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 1.125rem;
}
h5 {
font-size: 1rem;
}
h6 {
font-size: .875rem;
}
p {
line-height: 1.625;
margin-block: 0 1rem;
margin-inline: 0;
}
.p-toast.p-toast-top-right,
.p-toast.p-toast-top-left {
top: 7rem;
}

440
apps/volt/assets/styles/app/_doc.scss Normal file
View File

@ -0,0 +1,440 @@
@mixin mark() {
border-radius: 6px;
padding: 2px 6px;
font-size: 1rem;
font-weight: 500;
font-style: normal;
background: var(--mark-background);
color: var(--mark-text);
}
.mark {
@include mark();
}
.doc-tabmenu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
margin-bottom: 2rem;
overflow: auto;
position: relative;
&:after {
display: block;
position: absolute;
bottom: 0;
width: 100%;
border-bottom: 1px solid var(--border-color);
content: '';
}
li {
position: relative;
z-index: 1;
button {
background-color: transparent;
border: 0 none;
display: block;
padding-block: 0 1rem;
padding-inline: 2rem;
text-align: center;
color: var(--text-color);
font-size: 1rem;
letter-spacing: 1px;
cursor: pointer;
margin: 0;
transition: outline-color 0.2s, border-color 0.2s;
outline-color: transparent;
border-bottom: 1px solid transparent;
border-start-end-radius: 6px;
border-start-start-radius: 6px;
white-space: nowrap;
--p-focus-ring-offset: -1px;
@include focus-visible();
&:hover {
border-bottom-color: var(--hover-border-color);
}
&:focus {
outline: 0 none;
}
}
&.doc-tabmenu-active {
button {
border-bottom-color: var(--primary-text-color);
color: var(--primary-text-color);
}
}
}
&::-webkit-scrollbar {
display: none;
}
}
.doc-tabpanel,
.doc {
display: flex;
}
.doc-main {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
min-width: 0;
}
.doc-intro {
margin-bottom: 1.5rem;
p {
font-size: 1.25rem;
margin: 0;
a {
@include doc-link();
}
}
}
.doc-link {
@include doc-link();
}
.doc-section-label {
display: flex;
align-items: center;
scroll-margin-top: 6.5rem;
> a {
color: var(--primary-text-color);
opacity: 0.7;
margin-inline-start: 1rem;
display: none;
transition: outline-color 0.2s, border-color 0.2s, opacity 0.2s;
outline-color: transparent;
border-radius: 6px;
@include focus-visible();
}
> .doc-section-label-badge {
margin-inline-start: 0.5rem;
}
&:has(.doc-section-label-badge) {
line-height: 1;
}
&:hover {
> a {
display: block;
&:hover {
opacity: 1;
}
}
}
}
.doc-section-description {
> p {
font-size: 1.125rem;
i {
@include mark();
}
a {
@include doc-link();
}
}
li {
font-size: 1.125rem;
}
}
.doc-notification {
line-height: 1.5;
padding: 1rem;
font-weight: 500;
border-radius: 10px;
background: var(--mark-background);
color: var(--mark-text);
margin-bottom: 1rem;
}
.doc-section-nav {
position: sticky;
top: 6rem;
right: 0;
width: 14rem;
max-height: calc(100vh - 15rem);
list-style: none;
margin: 0;
padding-block: 0.25rem;
padding-inline: 0;
margin-inline-start: 4rem;
overflow-y: auto;
overflow-x: hidden;
align-self: flex-start;
> .navbar-item {
.navbar-item-content {
border-inline-start: 1px solid var(--border-color);
padding-inline-start: .25rem;
transition: all .2s;
&:hover {
border-inline-start-color: var(--hover-border-color);
}
}
}
.navbar-item {
> .navbar-item-content {
display: flex;
button {
font-size: 1rem;
text-align: start;
background: transparent;
margin: 0;
border: 0 none;
padding-block: 0.25rem;
padding-inline: 1rem;
color: var(--text-secondary-color);
white-space: nowrap;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
transition: outline-color 0.2s, border-color .2s;
outline-color: transparent;
cursor: pointer;
user-select: none;
--p-focus-ring-offset: -1px;
@include focus-visible();
}
&:hover {
button {
color: var(--text-color);
}
}
}
&.active-navbar-item {
> .navbar-item-content {
border-color: var(--primary-text-color);
button {
color: var(--primary-text-color);
}
}
}
ul {
list-style: none;
margin: 0;
padding: 0;
.navbar-item {
.navbar-item-content {
padding-inline-start: 1rem;
}
}
}
}
}
.doc-section-code {
position: relative;
div {
&::-webkit-scrollbar {
width: 5px;
}
}
&: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: .5rem;
display: none;
background: rgba(255,255,255,.05);
border-radius: 10px;
padding: 2px;
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, .1);
button {
outline: 0 none;
border-radius: 8px;
outline-offset: 0;
background-color: transparent;
transition: background-color .2s, box-shadow .2s;
border: 0 none;
color: var(--code-button-text-color);
cursor: pointer;
&:hover {
background-color: rgba(255,255,255,.1);
color: var(--code-button-text-color);
}
&.code-active {
color: #bbf7d0;
}
}
}
.doc-section-code-tooltip .p-tooltip-text {
padding: 0.5rem;
font-size: 11px;
}
.doc-tablewrapper {
overflow: auto;
}
.doc-table {
border-collapse: collapse;
width: 100%;
min-width: 960px;
margin-bottom: 1.5rem;
th {
border-bottom: 1px solid var(--border-color);
padding-block: .75rem;
padding-inline: 1rem;
text-align: start;
text-transform: capitalize;
}
tbody {
tr:hover {
background: var(--hover-background);
}
td {
padding-block: .75rem;
padding-inline: 1rem;
border-bottom: 1px solid var(--border-color);
white-space: pre-line;
line-height: 1.5;
scroll-margin-top: 6.5rem;
&:first-child {
color: var(--primary-text-color);
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
font-weight: 600;
}
.doc-option-type {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
color: var(--primary-text-color);
font-weight: 500;
.doc-option-type-options-container {
display: flex;
align-items: center;
}
&.doc-option-link {
&:hover {
text-decoration: underline;
}
}
}
.doc-option-name, i:not(.pi) {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
position: relative;
scroll-margin-top: 6.5rem;
background-color: var(--mark-background);
color: var(--mark-text);
border-radius: 6px;
padding-block: 2px;
padding-inline: 6px;
font-weight: 600;
font-style: normal;
white-space: nowrap;
.doc-option-link {
position: absolute;
top: 0;
right: -1.5rem;
color: var(--primary-text-color);
opacity: 0.7;
display: none;
transition: opacity 0.3s, colors 0.3s;
}
}
&:hover {
.doc-option-name {
.doc-option-link {
display: inline;
&:hover {
opacity: 1;
}
}
}
}
.doc-option-default,
.doc-option-returnType {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
font-weight: 400;
font-style: normal;
display: flex;
border-width: 1px;
border-style: solid;
border-radius: 6px;
padding-block: 2px;
padding-inline: 6px;
max-width: min-content;
border-color: var(--border-color);
background-color: var(--card-background);
color: var(--text-secondary-color);
}
.doc-option-parameter-name {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
}
.doc-option-parameter-type {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
color: var(--primary-text-color);
}
.doc-option-params {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
}
}
}
}

147
apps/volt/assets/styles/app/_docsearch.scss Normal file
View File

@ -0,0 +1,147 @@
.DocSearch-Button {
border-radius: 6px;
border: 1px solid var(--border-color);
height: 2rem;
background-color: var(--card-background);
margin: 0;
transition: outline-color .2s, border-color .2s;
outline-color: transparent;
padding: 0 .5rem;
@include focus-visible();
&:hover {
border-color: var(--primary-color);
box-shadow: none;
}
.DocSearch-Search-Icon {
width: 1rem;
height: 1rem;
}
.DocSearch-Button-Keys {
overflow: hidden;
min-width: auto;
height: auto;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
width: auto;
padding: 0;
gap: 2px;
.DocSearch-Button-Key {
background: transparent;
display: flex;
padding: 0;
margin: 0;
top: 0;
border-radius: 0;
height: auto;
width: auto;
font-family: inherit;
box-shadow: none;
&:first-child {
font-size: 0.75rem;
line-height: normal;
}
&:last-child {
justify-content: start;
align-items: center;
font-size: 0.75rem;
position: relative;
&::before {
content: "\e90d";
display: flex;
color: var(--text-color);
font-family: "primeicons";
font-size: .4rem;
opacity: .7;
margin-right: 2px;
height: 13.5px;
align-items: center;
font-weight: 700;
}
}
}
}
}
.DocSearch-Container {
z-index: 1101;
}
.DocSearch-Modal {
border: 1px solid var(--border-color);
box-shadow: none;
}
.DocSearch-Footer {
box-shadow: none;
border-top: 1px solid var(--border-color);
background-color: var(--overlay-background);
}
.DocSearch-Form {
background: var(--card-background);
box-shadow: none;
border: 1px solid var(--border-color);
border-radius: 6px;
transition: border-color .3s;
&:hover {
border-color: var(--primary-color);
}
.DocSearch-MagnifierLabel, .DocSearch-Reset {
color: var(--text-color);
}
}
.DocSearch-Hit {
border-bottom: 1px solid var(--border-color);
padding-bottom: 0;
margin-bottom: .25rem;
}
.DocSearch-Hit-source {
color: var(--primary-text-color);
}
.DocSearch-Logo .cls-1, .DocSearch-Logo .cls-2 {
fill: var(--primary-text-color);
}
.DocSearch-Prefill {
color: var(--primary-text-color);
}
.DocSearch-Button-Placeholder {
text-align: center;
display: inline-block;
font-size: .875rem;
}
:root {
--docsearch-searchbox-focus-background: var(--card-background);
--docsearch-text-color: var(--text-color);
--docsearch-muted-color: var(--text-color);
--docsearch-searchbox-background: var(--card-background);
--docsearch-text-color: var(--text-color);
--docsearch-modal-background: var(--overlay-background);
--docsearch-key-gradient: var(--ground-background);
--docsearch-key-shadow: none;
--docsearch-container-background: var(--docsearch-mask-background);
--docsearch-hit-background: var(--overlay-background);
--docsearch-hit-shadow: none;
--docsearch-spacing: 1rem;
--docsearch-hit-color: var(--text-color);
--docsearch-highlight-color: var(--primary-color);
--docsearch-hit-active-color: var(--primary-contrast-color);
--docsearch-searchbox-shadow: none;
}

26
apps/volt/assets/styles/app/_footer.scss Normal file
View File

@ -0,0 +1,26 @@
.layout-footer {
padding: 2rem 4rem;
margin-top: 4rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
font-weight: 500;
color: var(--text-color);
border-top: 1px solid var(--border-color);
a {
color: var(--primary-text-color);
font-weight: 700;
transition: outline-color .2s, border-color .2s;
outline-color: transparent;
border-radius: 6px;
@include focus-visible();
&:hover {
text-decoration: underline;
}
}
}

7
apps/volt/assets/styles/app/_glow.scss Normal file
View File

@ -0,0 +1,7 @@
.landing, .layout-wrapper {
background-blend-mode: var(--glow-blend);
background-image: var(--glow-image);
background-position: top;
background-repeat: no-repeat;
background-size: auto 20rem;
}

25
apps/volt/assets/styles/app/_mixins.scss Normal file
View File

@ -0,0 +1,25 @@
@mixin focus-visible() {
&:focus-visible {
outline: 1px solid var(--primary-color);
outline-offset: var(--p-focus-ring-offset);
}
}
@mixin doc-link() {
color: var(--primary-text-color);
font-weight: 500;
transition: outline-color .2s, border-color .2s;
outline-color: transparent;
border-radius: 6px;
@include focus-visible();
&:hover {
text-decoration: underline;
}
}
@mixin mobile {
@media (max-width: 900px) {
@content;
}
}

92
apps/volt/assets/styles/app/_news.scss Normal file
View File

@ -0,0 +1,92 @@
.layout-news {
position: fixed;
top: 0;
left: 0;
z-index: 1100;
width: 100%;
height: 2rem;
padding: 0 2rem;
background-color: var(--primary-color);
.layout-news-container {
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - var(--p-scrollbar-width, 0px));
height: 100%;
}
.layout-news-content {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
min-width: 0%;
}
.layout-news-text {
line-height: 1.5;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
min-width: 0%;
font-weight: 500;
color: var(--primary-contrast-color);
}
.layout-news-link {
margin-left: 0.5rem;
line-height: 1.5;
white-space: nowrap;
}
.layout-news-link,
.layout-news-link:visited,
.layout-news-link:active {
color:var(--primary-contrast-color);
font-weight:700;
}
.layout-news-link:hover {
text-decoration: underline;
}
.layout-news-close {
color:var(--primary-contrast-color);
line-height: 1.5;
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 1.5rem;
height: 1.5rem;
transition: background-color 0.3s;
margin-left: 0.5rem;
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
}
.layout-news-active {
.layout-topbar {
top: 2rem;
}
.layout-sidebar,
.doc-section-nav {
top: 8rem;
}
.layout-content {
padding-top: 8rem;
}
.doc-section-label,
.doc-table tbody td .doc-option-name,
.doc-table tbody td > i {
scroll-margin-top: 8.5rem;
}
}

181
apps/volt/assets/styles/app/_responsive.scss Normal file
View File

@ -0,0 +1,181 @@
@media screen and (min-width: 1920px) {
.layout-content {
max-width: 1728px;
margin: 0 auto;
}
.layout-topbar-inner,
.layout-footer {
max-width: 1728px;
margin: 0 auto;
}
}
@media screen and (max-width: 1199px) {
.layout-topbar-inner {
padding-left: 2rem;
padding-right: 2rem;
.menu-button {
display: block;
}
.layout-topbar-logo-container {
width: auto;
margin-right: 0;
}
.DocSearch-Button {
width: 2rem;
height: 2rem;
overflow: hidden;
padding: 0;
justify-content: center;
align-items: center;
.DocSearch-Search-Icon {
width: 1rem;
height: 1rem;
}
.DocSearch-Button-Placeholder,
.DocSearch-Button-Keys {
display: none;
}
}
}
.layout-sidebar {
top: 0;
inset-inline-start: 0;
position: fixed;
z-index: 1102;
height: 100%;
transform: translateX(-100%);
background-color: var(--mobile-menu-background);
backdrop-filter: blur(20px);
width: 300px;
opacity: 0;
&:dir(rtl) {
transform: translateX(100%);
}
nav {
padding: 1rem 1rem;
}
&.active {
opacity: 1;
transform: translateX(0);
}
}
.layout-news-active {
.layout-sidebar {
top: 0;
}
}
.layout-mask {
background-color: rgba(0, 0, 0, 0.1);
&.layout-mask-active {
z-index: 1101;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
transition: background-color .5s;
}
}
.doc-section-nav {
display: none;
}
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.layout-content {
padding-left: 2rem;
padding-right: 2rem;
}
.layout-footer {
padding-left: 2rem;
padding-right: 2rem;
}
.blocked-scroll {
overflow: hidden;
padding-right: var(--p-scrollbar-width);
}
}
@media (max-width: 768px) {
.DocSearch-Container {
position: fixed !important;
}
}
@media screen and (max-width: 575px) {
.layout-topbar-inner {
padding-left: 1rem;
padding-right: 1rem;
.layout-topbar-logo {
display: none;
}
.layout-topbar-icon {
display: inline-flex;
}
}
.layout-content {
padding-left: 1rem;
padding-right: 1rem;
}
.layout-footer {
padding-left: 1rem;
padding-right: 1rem;
}
.doc-tabmenu {
li {
flex: 1 1 0;
button {
width: 100%;
min-width: auto;
}
}
}
.layout-news {
padding-left: 1rem;
padding-right: 1rem;
font-size: 12px;
> i {
display: none;
}
}
}

181
apps/volt/assets/styles/app/_sidebar.scss Normal file
View File

@ -0,0 +1,181 @@
.layout-sidebar {
position: sticky;
inset-inline-start: 0;
top: 6rem;
height: calc(100vh - 9rem);
user-select: none;
transition: transform .4s cubic-bezier(.05,.74,.2,.99), opacity .3s;
display: flex;
flex-direction: column;
padding: 0;
flex: 0 0 250px;
margin-inline-end: 4rem;
overflow: auto;
.logo {
display: flex;
justify-content: center;
}
nav {
padding-block: 0;
padding-inline: 1rem 0;
margin: 0;
flex-grow: 1;
}
.layout-menu {
list-style: none;
margin: 0;
padding: 0;
> li {
margin-bottom: .25rem;
> button,
> a {
display: flex;
width: 100%;
align-items: center;
padding-block: .5rem;
padding-inline: 1px;
color: var(--text-color);
font-weight: 600;
transition: outline-color 0.2s;
outline-color: transparent;
position: relative;
background: transparent;
font-size: 1rem;
border: 0 none;
margin: 0;
text-align: start;
cursor: pointer;
user-select: none;
--p-focus-ring-offset: -1px;
@include focus-visible();
.menu-icon {
width: 2rem;
height: 2rem;
border-radius: 6px;
margin-inline-end: .5rem;
border: 1px solid var(--border-color);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all .2s;
position: relative;
background-color: transparent;
i {
color: var(--text-color);
transition: all .2s;
}
}
.menu-toggle-icon {
color: var(--text-secondary-color);
margin-inline-start: auto;
}
&:hover {
.menu-icon {
background-color: var(--card-background);
i {
color: var(--primary-text-color);
}
}
.menu-toggle-icon {
color: var(--text-color);
}
}
&.router-link-active {
color: var(--primary-text-color);
> .menu-icon {
i {
color: var(--primary-text-color);
}
}
}
}
> div {
overflow: hidden;
ol {
margin-block: 0;
margin-inline: 0 1rem;
padding: .25rem 0;
list-style: none;
li {
a {
border-inline-start: 1px solid var(--border-color);
transition: all .2s;
font-weight: 450;
display: flex;
align-items: center;
padding: .5rem;
padding-inline-start: 1rem;
color: var(--text-secondary-color);
transition: outline-color 0.2s, border-color .2s;
outline-color: transparent;
position: relative;
--p-focus-ring-offset: -1px;
@include focus-visible();
&:hover {
border-inline-start-color: var(--hover-border-color);
}
&.router-link-active {
color: var(--primary-text-color);
border-inline-start-color: var(--primary-text-color);
}
}
ol {
margin: 0;
padding: 0;
}
&:has(.menu-child-category) {
margin-top: 1rem;
}
&:has(.menu-child-category):first-child {
margin-top: 0rem;
}
}
}
}
}
.p-tag {
position: absolute;
inset-inline-end: 0;
top: 50%;
transform: translateY(-50%);
.p-tag-label {
line-height: 1;
font-size: 0.75rem;
}
}
.menu-child-category {
display: flex;
padding: .5rem;
padding-inline-start: 0;
font-size: .875rem;
font-weight: 600;
letter-spacing: 1px;
color: var(--text-secondary-color);
margin-bottom: .25rem;
}
}
}

221
apps/volt/assets/styles/app/_topbar.scss Normal file
View File

@ -0,0 +1,221 @@
.layout-topbar {
position: fixed;
top: 0;
left: 0;
width: calc(100% - var(--p-scrollbar-width, 0px));
z-index: 1100;
transition: background-color .5s, border-color .5s;
border-bottom: 1px solid transparent;
&.layout-topbar-sticky {
border-bottom: 1px solid var(--border-color);
background-color: var(--topbar-sticky-background);
backdrop-filter: blur(8px);
}
}
.layout-topbar-inner {
height: 4rem;
padding: 0 4rem;
display: flex;
align-items: center;
justify-content: space-between;
.layout-topbar-logo-container {
width: 250px;
margin-inline-end: 4rem;
}
.layout-topbar-logo,
.layout-topbar-icon {
transition: outline-color .2s;
outline-color: transparent;
@include focus-visible();
svg {
width: 120px;
}
}
.layout-topbar-logo {
display: inline-flex;
svg {
width: 120px;
}
}
.layout-topbar-icon {
display: none;
svg {
width: 25px;
}
}
.menu-button {
display: none;
}
.topbar-items {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
gap: 0.5rem;
align-items: center;
li {
position: relative;
}
.topbar-item {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid var(--border-color);
width: 2rem;
height: 2rem;
transition: outline-color .2s, border-color .2s;
border-radius: 6px;
margin: 0;
padding: 0;
outline-color: transparent;
background-color: var(--card-background);
cursor: pointer;
@include focus-visible();
&:hover {
border-color: var(--primary-color);
}
i, span {
color: var(--text-color);
}
}
.config-item {
background-color: var(--primary-color);
i {
color: var(--primary-contrast-color);
}
}
.config-panel {
position: absolute;
top: calc(100% + 2px);
inset-inline-end: 0;
width: 18rem;
padding: .75rem;
background-color: var(--overlay-background);
border-radius: 6px;
border: 1px solid var(--border-color);
transform-origin: top;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
.config-panel-content {
display: flex;
flex-direction: column;
gap: 1rem;
}
.config-panel-label {
font-size: .875rem;
color: var(--text-secondary-color);
font-weight: 600;
line-height: 1;
}
.config-panel-colors {
> div {
padding-top: .5rem;
display: flex;
gap: .5rem;
flex-wrap: wrap;
button {
border: none;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
padding: 0;
cursor: pointer;
outline-color: transparent;
outline-width: 2px;
outline-style: solid;
outline-offset: 1px;
&.active-color {
outline-color: var(--primary-color);
}
}
}
}
.config-panel-settings {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
}
.version-item {
width: auto;
padding: 0.5rem;
.version-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.version-icon {
margin-inline-start: .25rem;
color: var(--text-secondary-color);
}
}
.versions-panel {
padding: .25rem;
background-color: var(--overlay-background);
position: absolute;
right: 0;
top: calc(100% + 2px);
border-radius: 6px;
border: 1px solid var(--border-color);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
transform-origin: top;
ul {
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
flex-direction: column;
gap: 4px;
li {
margin: 2px;
}
a {
display: inline-flex;
padding: 0.5rem .75rem;
border-radius: 6px;
width: 100%;
overflow: hidden;
color: var(--text-color);
white-space: nowrap;
&:hover {
background-color: var(--hover-background);
}
}
}
}
}
}

16
apps/volt/assets/styles/app/app.scss Normal file
View File

@ -0,0 +1,16 @@
@charset 'UTF-8';
@import './variables/_variables';
@import './_mixins';
@import './_core';
@import './_glow';
@import './_topbar';
@import './_sidebar';
@import './_content';
@import './_news';
@import './_footer';
@import './_code';
@import './_doc';
@import './_docsearch';
@import './_responsive';
@import './landing/_landing';

22
apps/volt/assets/styles/app/landing/_hero.scss Normal file
View File

@ -0,0 +1,22 @@
.landing-hero {
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
background: transparent;
}
.box {
box-shadow: var(--home-card-shadow);
}
.p-datepicker, .p-datepicker-header {
background: transparent;
border-color: transparent;
}
}
@media screen and (min-width: 1660px) {
.landing-hero {
width: 1504px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}

7
apps/volt/assets/styles/app/landing/_landing.scss Normal file
View File

@ -0,0 +1,7 @@
$landingBreakpointMD: 767px;
$landingBreakpointLG: 991px;
$landingBreakpointXL: 1199px;
@import '../_mixins';
@import './_main';
@import './_hero';

180
apps/volt/assets/styles/app/landing/_main.scss Normal file
View File

@ -0,0 +1,180 @@
.landing {
scroll-behavior: smooth;
padding-top: 4rem;
background-color: var(--ground-background);
.box {
border: 1px solid var(--border-color);
border-radius: 10px;
background-color: var(--card-background);
position: relative;
z-index: 0;
&::before,
&::after {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border: 2px solid var(--home-box-ring-color);
transition: all .5s;
animation: clippath 3s infinite linear;
border-radius: 10px;
opacity: 0;
z-index: -1;
}
&::after {
animation: clippath 3s infinite -1.5s linear;
}
&:hover {
&::before,
&::after {
opacity: 1;
}
}
}
.linkbox {
transition: background-color .2s, border-color .2s, outline-color .2s;
display: inline-flex;
align-items: center;
color: var(--text-color);
border: 1px solid var(--border-color);
background-color: var(--card-background);
border-radius: 10px;
font-weight: 600;
padding: 1rem 1.5rem;
cursor: pointer;
@include focus-visible();
&:hover {
background: var(--hover-background);
}
&.linkbox-primary {
background: var(--primary-color);
color: var(--primary-contrast-color);
&:hover {
background: var(--primary-hover-color);
}
}
&.linkbox-icon {
width: 3rem;
height: 3rem;
justify-content: center;
}
}
.section-header {
font-size: 2rem;
color: var(--text-color);
font-weight: 700;
text-align: center;
padding: 0 2rem;
}
.section-detail {
text-align: center;
color: var(--text-secondary-color);
font-weight: 500;
font-size: 1.25rem;
margin: 1.5rem 0 0 0;
padding: 0 2rem;
}
.section-divider {
border: 1px solid var(--border-color);
height: 1px;
border-bottom: 0 none;
overflow: hidden;
margin-top: 5rem;
}
&.layout-news-active {
padding-top: 6rem;
}
}
.landing-footer-container {
max-width: 1250px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.animated-text {
position: relative;
padding: 0.25rem 0.5rem;
border-radius: var(--rounded-base);
display: inline-block;
width: 14.45rem;
&::before {
border-radius: var(--rounded-base);
animation: color-animation 2s linear infinite;
background-size: auto auto;
background-clip: border-box;
background-size: 200% auto;
content: "";
width: 14.45rem;
height: 1.5rem;
position: absolute;
z-index: 0;
background-image: linear-gradient(-225deg, var(--p-blue-400) 30%, var(--p-cyan-400) 60%, var(--p-purple-400) 80%);
filter: blur(24px);
opacity: 0.6;
}
> span {
position: relative;
z-index: 3;
background-image: linear-gradient(-225deg, var(--p-blue-400) 30%, var(--p-cyan-400) 60%, var(--p-purple-400) 80%);
animation: color-animation 2s linear infinite;
background-size: auto auto;
background-clip: border-box;
background-size: 200% auto;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
@keyframes color-animation {
40%,
100% {
background-position: -200% center;
}
}
@keyframes scroll {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(calc(-100% - 3rem));
}
}
@keyframes clippath {
0%,
100% {
clip-path: inset(0 0 98% 0);
}
25% {
clip-path: inset(0 98% 0 0);
}
50% {
clip-path: inset(98% 0 0 0);
}
75% {
clip-path: inset(0 0 0 98%);
}
}

5
apps/volt/assets/styles/app/variables/_variables.scss Normal file
View File

@ -0,0 +1,5 @@
@import './app/_light';
@import './app/_dark';
@import './primevue/_common';
@import './primevue/_light';
@import './primevue/_dark';

28
apps/volt/assets/styles/app/variables/app/_dark.scss Normal file
View File

@ -0,0 +1,28 @@
:root.p-dark {
--primary-text-color: var(--p-primary-400);
--primary-color: var(--p-primary-color);
--primary-contrast-color:var(--p-primary-contrast-color);
--primary-hover-color: var(--p-primary-hover-color);
--text-color: var(--p-surface-0);
--text-secondary-color: var(--p-surface-400);
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);
--glow-blend: hard-light, color-dodge;
--topbar-sticky-background:rgba(0,0,0,.3);
--mobile-menu-background: rgba(0,0,0,.3);
--card-border: 1px solid transparent;
--card-background: var(--p-surface-900);
--border-color: var(--p-surface-700);
--ground-background: var(--p-surface-950);
--overlay-background: var(--p-surface-900);
--hover-background: var(--p-surface-800);
--code-background: var(--p-surface-900);
--high-contrast-text-color: var(--p-surface-0);
--hover-border-color: var(--p-surface-500);
--mark-background: var(--p-surface-700);
--mark-text-color: var(--p-surface-200);
--selection-background: var(--p-surface-700);
--selection-text-color: var(--p-surface-0);
--code-button-text-color: var(--p-surface-300);
--docsearch-mask-background: var(--p-mask-background);
--logo-color: var(--p-primary-400);
}

28
apps/volt/assets/styles/app/variables/app/_light.scss Normal file
View File

@ -0,0 +1,28 @@
:root {
--primary-text-color:var(--p-primary-600);
--primary-color: var(--p-primary-color);
--primary-contrast-color:var(--p-primary-contrast-color);
--primary-hover-color: var(--p-primary-hover-color);
--text-color: var(--p-surface-700);
--text-secondary-color: var(--p-surface-500);
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png);
--glow-blend: hard-light, multiply;
--topbar-sticky-background:rgba(255,255,255,.7);
--mobile-menu-background: #ffffff;
--card-border: 1px solid var(--p-surface-200);
--card-background: #ffffff;
--border-color: var(--p-surface-200);
--ground-background: var(--p-surface-50);
--overlay-background: #ffffff;
--hover-background: var(--p-surface-100);
--code-background: var(--p-surface-950);
--high-contrast-text-color: var(--p-surface-900);
--hover-border-color: var(--p-surface-400);
--mark-background: var(--p-surface-200);
--mark-text-color: var(--p-surface-700);
--selection-background: var(--p-surface-200);
--selection-text-color: var(--p-surface-950);
--code-button-text-color: var(--p-surface-300);
--docsearch-mask-background: var(--p-mask-background);
--logo-color: var(--p-primary-500);
}

26
apps/volt/assets/styles/app/variables/primevue/_common.scss Normal file
View File

@ -0,0 +1,26 @@
:root {
--p-primary-50: #ecfdf5;
--p-primary-100: #d1fae5;
--p-primary-200: #a7f3d0;
--p-primary-300: #6ee7b7;
--p-primary-400: #34d399;
--p-primary-500: #10b981;
--p-primary-600: #059669;
--p-primary-700: #047857;
--p-primary-800: #065f46;
--p-primary-900: #064e3b;
--p-primary-950: #022c22;
--p-surface-0: #ffffff;
--p-surface-50: #fafafa;
--p-surface-100: #f4f4f5;
--p-surface-200: #e4e4e7;
--p-surface-300: #d4d4d8;
--p-surface-400: #a1a1aa;
--p-surface-500: #71717a;
--p-surface-600: #52525b;
--p-surface-700: #3f3f46;
--p-surface-800: #27272a;
--p-surface-900: #18181b;
--p-surface-950: #09090b;
--p-content-border-radius: 6px;
}

28
apps/volt/assets/styles/app/variables/primevue/_dark.scss Normal file
View File

@ -0,0 +1,28 @@
:root.p-dark {
--p-primary-color: var(--p-primary-400);
--p-primary-contrast-color: var(--p-surface-900);
--p-primary-hover-color: var(--p-primary-300);
--p-primary-active-color: var(--p-primary-200);
--p-content-border-color: var(--p-surface-700);
--p-content-hover-background: var(--p-surface-800);
--p-content-hover-color: var(--p-surface-0);
--p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
--p-highlight-color: rgba(255,255,255,.87);
--p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
--p-highlight-focus-color: rgba(255,255,255,.87);
--p-text-color: var(--p-surface-0);
--p-text-hover-color: var(--p-surface-0);
--p-text-muted-color: var(--p-surface-400);
--p-text-hover-muted-color: var(--p-surface-300);
}
:root.p-dark.p-noir {
--p-primary-color: var(--p-primary-50);
--p-primary-contrast-color: var(--p-surface-950);
--p-primary-hover-color: var(--p-primary-200);
--p-primary-active-color: var(--p-primary-300);
--p-highlight-background: var(--p-surface-50);
--p-highlight-color: var(--p-surface-950);
--p-highlight-focus-background: var(--p-surface-300);
--p-highlight-focus-color: var(--p-surface-950);
}

28
apps/volt/assets/styles/app/variables/primevue/_light.scss Normal file
View File

@ -0,0 +1,28 @@
:root {
--p-primary-color: var(--p-primary-500);
--p-primary-contrast-color: var(--p-surface-0);
--p-primary-hover-color: var(--p-primary-600);
--p-primary-active-color: var(--p-primary-700);
--p-content-border-color: var(--p-surface-200);
--p-content-hover-background: var(--p-surface-100);
--p-content-hover-color: var(--p-surface-800);
--p-highlight-background: var(--p-primary-50);
--p-highlight-color: var(--p-primary-700);
--p-highlight-focus-background: var(--p-primary-100);
--p-highlight-focus-color: var(--p-primary-800);
--p-text-color: var(--p-surface-700);
--p-text-hover-color: var(--p-surface-800);
--p-text-muted-color: var(--p-surface-500);
--p-text-hover-muted-color: var(--p-surface-600);
}
:root.p-noir {
--p-primary-color: var(--p-primary-950);
--p-primary-contrast-color: #ffffff;
--p-primary-hover-color: var(--p-primary-800);
--p-primary-active-color: var(--p-primary-700);
--p-highlight-background: var(--p-surface-950);
--p-highlight-color: #ffffff;
--p-highlight-focus-background: var(--p-surface-700);
--p-highlight-focus-color: #ffffff;
}

1
apps/volt/assets/styles/demo/flags.css Executable file
View File

File diff suppressed because one or more lines are too long

41
apps/volt/assets/styles/tailwind.css Normal file
View File

@ -0,0 +1,41 @@
@import "tailwindcss";
@import "tailwindcss-primeui";
@custom-variant dark (&:where(.p-dark, .p-dark *));
@theme {
--breakpoint-sm: '576px';
--breakpoint-md: '768px';
--breakpoint-lg: '992px';
--breakpoint-xl: '1200px';
--breakpoint-2xl: '1920px';
}
@custom-variant p-invalid (&[data-p~="invalid"]);
@custom-variant p-small (&[data-p~="small"]);
@custom-variant p-large (&[data-p~="large"]);
@custom-variant p-xlarge (&[data-p~="xlarge"]);
@custom-variant p-fluid (&[data-p~="fluid"]);
@custom-variant p-filled (&[data-p~="filled"]);
@custom-variant p-horizontal (&[data-p~="horizontal"]);
@custom-variant p-vertical (&[data-p~="vertical"]);
@custom-variant p-stacked (&[data-p~="stacked"]);
@custom-variant p-checked (&[data-p~="checked"]);
@custom-variant p-disabled (&[data-p~="disabled"]);
@custom-variant p-enabled (&:not([data-p~="disabled"]));
@custom-variant p-left (&[data-p~="left"]);
@custom-variant p-right (&[data-p~="right"]);
@custom-variant p-top (&[data-p~="top"]);
@custom-variant p-bottom (&[data-p~="bottom"]);
@custom-variant p-alternate (&[data-p~="alternate"]);
@custom-variant p-active (&[data-p~="active"]);
@custom-variant p-focus-visible (&[data-p~="focus-visible"]);
@custom-variant p-readonly (&[data-p~="readonly"]);
@custom-variant p-removable (&[data-p~="removable"]);
@custom-variant p-circle (&[data-p~="circle"]);
@custom-variant p-determinate (&[data-p~="determinate"]);
@custom-variant p-indeterminate (&[data-p~="indeterminate"]);
@custom-variant p-icon-only (&[data-p~="icon-only"]);
@custom-variant p-rounded (&[data-p~="rounded"]);
@custom-variant p-raised (&[data-p~="raised"]);
@custom-variant p-outlined (&[data-p~="outlined"]);
@custom-variant p-text (&[data-p~="text"]);

175
apps/volt/components/app/AppConfigurator.vue Normal file
View File

@ -0,0 +1,175 @@
<template>
<div class="config-panel hidden">
<div class="config-panel-content">
<div class="config-panel-colors">
<span class="config-panel-label">Primary</span>
<div>
<button
v-for="primaryColor of primaryColors"
:key="primaryColor.name"
type="button"
@click="updateColors('primary', primaryColor)"
:class="{ 'active-color': selectedPrimaryColor === primaryColor.name }"
:style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette[500]}` }"
></button>
</div>
</div>
<div class="config-panel-colors">
<span class="config-panel-label">Surface</span>
<div>
<button
v-for="surface of surfaces"
:key="surface.name"
type="button"
@click="updateColors('surface', surface)"
:class="{ 'active-color': selectedSurfaceColor ? selectedSurfaceColor === surface.name : $appState.darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
:style="{ backgroundColor: `${surface.palette[500]}` }"
></button>
</div>
</div>
<div class="flex">
<div class="flex-1">
<div class="config-panel-settings">
<span class="config-panel-label">Ripple</span>
<ToggleSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
</div>
</div>
<div class="flex-1">
<div class="config-panel-settings items-end">
<span class="config-panel-label">RTL</span>
<ToggleSwitch v-model="isRTL" @update:modelValue="onRTLChange" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
export default {
data() {
return {
primaryColors: [
{ name: 'noir', palette: {} },
{ name: 'emerald', palette: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' } },
{ name: 'green', palette: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' } },
{ name: 'lime', palette: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' } },
{ name: 'orange', palette: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407' } },
{ name: 'amber', palette: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03' } },
{ name: 'yellow', palette: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006' } },
{ name: 'teal', palette: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e' } },
{ name: 'cyan', palette: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344' } },
{ name: 'sky', palette: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49' } },
{ name: 'blue', palette: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554' } },
{ name: 'indigo', palette: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b' } },
{ name: 'violet', palette: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065' } },
{ name: 'purple', palette: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764' } },
{ name: 'fuchsia', palette: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e' } },
{ name: 'pink', palette: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724' } },
{ name: 'rose', palette: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519' } }
],
surfaces: [
{
name: 'slate',
palette: { 0: '#ffffff', 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' }
},
{
name: 'gray',
palette: { 0: '#ffffff', 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712' }
},
{
name: 'zinc',
palette: { 0: '#ffffff', 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' }
},
{
name: 'neutral',
palette: { 0: '#ffffff', 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a' }
},
{
name: 'stone',
palette: { 0: '#ffffff', 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' }
},
{
name: 'soho',
palette: { 0: '#ffffff', 50: '#f4f4f4', 100: '#e8e9e9', 200: '#d2d2d4', 300: '#bbbcbe', 400: '#a5a5a9', 500: '#8e8f93', 600: '#77787d', 700: '#616268', 800: '#4a4b52', 900: '#34343d', 950: '#1d1e27' }
},
{
name: 'viva',
palette: { 0: '#ffffff', 50: '#f3f3f3', 100: '#e7e7e8', 200: '#cfd0d0', 300: '#b7b8b9', 400: '#9fa1a1', 500: '#87898a', 600: '#6e7173', 700: '#565a5b', 800: '#3e4244', 900: '#262b2c', 950: '#0e1315' }
},
{
name: 'ocean',
palette: { 0: '#ffffff', 50: '#fbfcfc', 100: '#F7F9F8', 200: '#EFF3F2', 300: '#DADEDD', 400: '#B1B7B6', 500: '#828787', 600: '#5F7274', 700: '#415B61', 800: '#29444E', 900: '#183240', 950: '#0c1920' }
}
],
isRTL: false
};
},
methods: {
updateColors(type, color) {
if (type === 'primary') {
this.$appState.primary = color.name;
if (color.name === 'noir') {
document.documentElement.classList.add('p-noir');
document.documentElement.style.setProperty('--logo-color', 'var(--text-secondary-color)');
this.applyTheme(
type,
this.surfaces.find((s) => s.name === this.$appState.surface)
);
} else {
document.documentElement.classList.remove('p-noir');
document.documentElement.style.setProperty('--logo-color', 'var(--primary-color)');
this.applyTheme(type, color);
}
} else if (type === 'surface') {
this.$appState.surface = color.name;
this.applyTheme(type, color);
}
EventBus.emit('theme-palette-change');
},
applyTheme(type, color) {
Object.keys(color.palette).forEach((key) => {
document.documentElement.style.setProperty(`--p-${type}-${key}`, color.palette[key]);
});
},
onRippleChange(value) {
this.$primevue.config.ripple = value;
},
onRTLChange(value) {
if (!document.startViewTransition) {
this.toggleRTL();
return;
}
document.startViewTransition(() => this.toggleRTL(value));
},
toggleRTL(value) {
const htmlElement = document.documentElement;
if (value) {
htmlElement.setAttribute('dir', 'rtl');
} else {
htmlElement.removeAttribute('dir');
}
}
},
computed: {
rippleActive() {
return this.$primevue.config.ripple;
},
selectedPrimaryColor() {
return this.$appState.primary;
},
selectedSurfaceColor() {
return this.$appState.surface;
}
}
};
</script>

20
apps/volt/components/app/AppFooter.vue Executable file
View File

@ -0,0 +1,20 @@
<template>
<div class="layout-footer">
<div>
<span>PrimeVue {{ version }} by </span>
<a href="https://www.primetek.com.tr" target="_blank" rel="noopener noreferrer">PrimeTek</a>
</div>
</div>
</template>
<script>
import pkg from '@/package.json';
export default {
data() {
return {
version: pkg.version
};
}
};
</script>

27
apps/volt/components/app/AppMenu.vue Executable file
View File

@ -0,0 +1,27 @@
<template>
<aside class="layout-sidebar" :class="{ active: active }">
<nav>
<ol class="layout-menu">
<AppMenuItem :menu="menu"></AppMenuItem>
</ol>
</nav>
</aside>
</template>
<script>
import menudata from '@/assets/data/menu.json';
export default {
props: {
active: {
type: Boolean,
default: true
}
},
data() {
return {
menu: menudata.data
};
}
};
</script>

57
apps/volt/components/app/AppMenuItem.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<li v-for="(menuitem, index) in menu" :key="`_root${index}`">
<button v-if="menuitem.children && root" v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown', leaveToClass: 'hidden', leaveActiveClass: 'animate-slideup' }" type="button">
<span class="menu-icon">
<i :class="menuitem.icon"></i>
</span>
<span>{{ menuitem.name }}</span>
<i class="menu-toggle-icon pi pi-angle-down"></i>
</button>
<a v-if="menuitem.href" :href="menuitem.href" target="_blank" rel="noopener noreferrer">
<span v-if="menuitem.icon && root" class="menu-icon">
<i :class="menuitem.icon"></i>
</span>
<span>{{ menuitem.name }}</span>
<Tag v-if="menuitem.badge" :value="menuitem.badge"></Tag>
</a>
<PrimeVueNuxtLink v-if="menuitem.to" :to="menuitem.to" :class="{ 'router-link-active': menuitem.to === $route.fullPath }">
<span v-if="menuitem.icon && root" class="menu-icon">
<i :class="menuitem.icon"></i>
</span>
<span>{{ menuitem.name }}</span>
<Tag v-if="menuitem.badge" :value="menuitem.badge"></Tag>
</PrimeVueNuxtLink>
<span v-if="!root && menuitem.children" class="menu-child-category">{{ menuitem.name }}</span>
<div v-if="menuitem.children" :class="{ hidden: menuitem.children && root && isActiveRootmenuItem(menuitem) }">
<ol>
<AppMenuItem :root="false" :menu="menuitem.children"></AppMenuItem>
</ol>
</div>
</li>
</template>
<script>
export default {
props: {
root: {
type: Boolean,
default: true
},
menu: {
type: Object,
default: null
}
},
methods: {
isActiveRootmenuItem(menuitem) {
return (
menuitem.children &&
!menuitem.children.some((item) => item.to === `/${this.$router.currentRoute.value?.name?.replaceAll('-', '/')}` || (item.children && item.children.some((it) => it.to === `/${this.$router.currentRoute.value.name}`)))
);
}
}
};
</script>

48
apps/volt/components/app/AppNews.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div v-if="$appState.newsActive" class="layout-news">
<div class="layout-news-container">
<i></i>
<div class="layout-news-content">
<span class="layout-news-text">{{ $appState.announcement.content }}</span>
<a v-if="$appState.announcement.linkHref" class="layout-news-link" :href="$appState.announcement.linkHref">{{ $appState.announcement.linkText }}</a>
</div>
<a class="layout-news-close" @click="onClose">
<span class="pi pi-times"></span>
</a>
</div>
</div>
</template>
<script>
import News from '@/assets/data/news.json';
export default {
mounted() {
const itemString = localStorage.getItem(this.$appState.storageKey);
if (itemString) {
const item = JSON.parse(itemString);
if (!item.hiddenNews || item.hiddenNews !== News.id) {
this.$appState.newsActive = true;
this.$appState.announcement = News;
} else {
this.$appState.newsActive = false;
}
} else {
this.$appState.announcement = News;
this.$appState.newsActive = true;
}
},
methods: {
onClose() {
this.$appState.newsActive = false;
const item = {
hiddenNews: this.$appState.announcement.id
};
localStorage.setItem(this.$appState.storageKey, JSON.stringify(item));
}
}
};
</script>

178
apps/volt/components/app/AppTopBar.vue Executable file
View File

@ -0,0 +1,178 @@
<template>
<div :ref="containerRef" class="layout-topbar">
<div class="layout-topbar-inner">
<div class="layout-topbar-logo-container">
<PrimeVueNuxtLink to="/" class="layout-topbar-logo" aria-label="PrimeVue logo">
<svg width="165" height="40" viewBox="0 0 165 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M128.062 32C128.438 32 128.656 31.8125 128.75 31.4375L134.031 7.6875C134.125 7.25 133.938 7 133.469 7H130.5C130.125 7 129.906 7.1875 129.812 7.5625L126.5 24.3125L123.219 7.5625C123.125 7.1875 122.906 7 122.531 7H119.562C119.094 7 118.906 7.25 119 7.6875L124.25 31.4375C124.344 31.8125 124.562 32 124.938 32H128.062ZM144.562 32C147.5 32 149.062 30.4375 149.062 27.5V7.625C149.062 7.28125 148.781 7 148.438 7H145.562C145.219 7 144.938 7.28125 144.938 7.625V26.625C144.938 27.4688 144.5 27.875 143.688 27.875H142.062C141.25 27.875 140.812 27.4688 140.812 26.625V7.625C140.812 7.28125 140.531 7 140.188 7H137.188C136.844 7 136.562 7.28125 136.562 7.625V27.5C136.562 30.4375 138.125 32 141.062 32H144.562ZM164.656 31.5C164.656 31.8125 164.531 32 164.156 32H152.656C152.375 32 152.188 31.8125 152.188 31.5V7.5C152.188 7.1875 152.375 7 152.656 7H164.156C164.531 7 164.656 7.1875 164.656 7.5V10.625C164.656 10.9375 164.531 11.1562 164.156 11.1562H156.344V17.4062H162.312C162.625 17.4062 162.812 17.5938 162.812 17.9375V21.0312C162.812 21.375 162.625 21.5625 162.312 21.5625H156.344V27.875H164.156C164.531 27.875 164.656 28.0312 164.656 28.375V31.5Z"
fill="var(--logo-color)"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M48.0938 32C48.4375 32 48.5938 31.8125 48.5938 31.5V23.625H52.3438C55.2812 23.625 56.8438 22.0312 56.8438 19.125V11.5C56.8438 8.5625 55.2812 7 52.3438 7H44.8438C44.5312 7 44.3438 7.1875 44.3438 7.5V31.5C44.3438 31.8125 44.5312 32 44.8438 32H48.0938ZM51.3438 19.5H48.5938V11.125H51.3438C52.1875 11.125 52.5938 11.5625 52.5938 12.375V18.25C52.5938 19.0312 52.1875 19.5 51.3438 19.5ZM63.9062 31.5C63.9062 31.8125 63.7188 32 63.4062 32H60.1562C59.8438 32 59.6562 31.8125 59.6562 31.5V7.5C59.6562 7.1875 59.8438 7 60.1562 7H68C70.9375 7 72.5 8.5625 72.5 11.5V19.125C72.5 21.2188 71.7188 22.5938 70.2188 23.25L72.375 31.4375C72.4688 31.8125 72.2812 32 71.9375 32H68.6875C68.375 32 68.2188 31.8438 68.1562 31.5625L66.0625 23.625H63.9062V31.5ZM67 19.5H63.9062V11.125H67C67.8125 11.125 68.25 11.5625 68.25 12.375V18.25C68.25 19.0625 67.8125 19.5 67 19.5ZM79.875 31.5C79.875 31.8125 79.6875 32 79.375 32H76.125C75.7812 32 75.625 31.8125 75.625 31.5V7.5C75.625 7.1875 75.7812 7 76.125 7H79.375C79.6875 7 79.875 7.1875 79.875 7.5V31.5ZM86.5 32C86.9062 32 87.125 31.7812 87.125 31.375V17.3125H87.3438L90.4375 31.4375C90.5312 31.8125 90.75 32 91.125 32H92.6562C93.0312 32 93.25 31.8125 93.3438 31.4375L96.4375 17.3125H96.6562V31.375C96.6562 31.7812 96.875 32 97.2812 32H100.188C100.594 32 100.812 31.7812 100.812 31.375V7.625C100.812 7.21875 100.594 7 100.188 7H96.0625C95.6875 7 95.4688 7.1875 95.375 7.5625L91.9062 23.125L88.4375 7.5625C88.3438 7.1875 88.125 7 87.75 7H83.625C83.2188 7 83 7.21875 83 7.625V31.375C83 31.7812 83.2188 32 83.625 32H86.5ZM116.406 31.5C116.406 31.8125 116.281 32 115.906 32H104.406C104.125 32 103.938 31.8125 103.938 31.5V7.5C103.938 7.1875 104.125 7 104.406 7H115.906C116.281 7 116.406 7.1875 116.406 7.5V10.625C116.406 10.9375 116.281 11.1562 115.906 11.1562H108.094V17.4062H114.062C114.375 17.4062 114.562 17.5938 114.562 17.9375V21.0312C114.562 21.375 114.375 21.5625 114.062 21.5625H108.094V27.875H115.906C116.281 27.875 116.406 28.0312 116.406 28.375V31.5Z"
fill="var(--high-contrast-text-color)"
/>
<path d="M25.5739 18.0458L22.8661 17.4443L24.9722 20.4519V29.7756L32.193 23.7603V13.5344L28.8835 14.7374L25.5739 18.0458Z" fill="var(--logo-color)" />
<path d="M8.72522 18.0458L11.433 17.4443L9.32696 20.4519V29.7756L2.10609 23.7603V13.5344L5.41565 14.7374L8.72522 18.0458Z" fill="var(--logo-color)" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.2296 21.0534L12.6365 17.4443L14.1409 18.3466H20.1582L21.6626 17.4443L24.0696 21.0534V34.5878L22.2643 37.2947L20.1582 39.4H14.1409L12.0348 37.2947L10.2296 34.5878V21.0534Z"
fill="var(--logo-color)"
/>
<path d="M24.9722 35.4901L28.8835 31.5802V27.6702L24.9722 30.9786V35.4901Z" fill="var(--logo-color)" />
<path d="M9.32697 35.4901L5.41566 31.5802V27.6702L9.32697 30.9786V35.4901Z" fill="var(--logo-color)" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M21.0609 0H20.1583V5.7988L21.8141 1.78842L21.0609 0ZM19.5762 7.20849L18.9548 7.51908V0H17.7513V11.6281L19.5762 7.20849ZM17.7513 14.2483L22.3605 3.08549L23.4678 5.7145L19.8574 17.1435H17.7513V14.2483ZM16.5478 11.6718V0H15.3443V7.51908L14.8434 7.26869L16.5478 11.6718ZM14.1409 5.45385V0H13.2383L12.6085 1.49519L14.1409 5.45385ZM12.0497 2.82181L16.5478 14.4419V17.1435H14.7426L10.8313 5.7145L12.0497 2.82181Z"
fill="var(--high-contrast-text-color)"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.80522 12.3313L14.7426 17.1435H15.0435L11.1322 5.71452L0 4.81223L1.80522 12.3313ZM32.7948 12.3313L19.8574 17.1435H19.5565L23.167 5.71452L34.6 4.81223L32.7948 12.3313Z"
fill="var(--logo-color)"
/>
<path d="M24.0696 4.81221L30.3878 4.21069L26.1757 0H21.9635L24.0696 4.81221Z" fill="var(--high-contrast-text-color)" />
<path d="M10.2295 4.81221L3.91129 4.21069L8.12346 0H12.3356L10.2295 4.81221Z" fill="var(--high-contrast-text-color)" />
<path d="M4.70001 5.20001L11.2 5.70001L15.1 17.15H14.7L10.5 15.6L4.70001 5.20001Z" fill="var(--high-contrast-text-color)" />
<path d="M29.8 5.20001L23.1 5.70001L19.4 17.15L19.9 17.14L23.8 15.7L29.8 5.20001Z" fill="var(--high-contrast-text-color)" />
<path d="M12.1 18.2L12.6 17.4L14.3 18.2H20.3L21.6 17.4L22.2 18.2L17.15 26.8L12.1 18.2Z" fill="var(--high-contrast-text-color)" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0297 0L17.1214 13.1536L22.5526 0H12.0297Z" fill="var(--logo-color)" />
</svg>
</PrimeVueNuxtLink>
<PrimeVueNuxtLink to="/" class="layout-topbar-icon" aria-label="PrimeVue logo">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
fill="var(--logo-color)"
/>
<path
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
fill="var(--high-contrast-text-color)"
/>
</svg>
</PrimeVueNuxtLink>
</div>
<ul class="topbar-items">
<li v-if="false">
<div id="docsearch"></div>
</li>
<li>
<a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="topbar-item">
<i class="pi pi-github"></i>
</a>
</li>
<li>
<a href="https://discord.gg/gzKFYnpmCY" target="_blank" rel="noopener noreferrer" class="topbar-item">
<i class="pi pi-discord"></i>
</a>
</li>
<li>
<a href="https://github.com/orgs/primefaces/discussions" target="_blank" rel="noopener noreferrer" class="topbar-item">
<i class="pi pi-comments"></i>
</a>
</li>
<li>
<button type="button" class="topbar-item" @click="toggleDarkMode">
<i :class="['pi', { 'pi-moon': $appState.darkTheme, 'pi-sun': !$appState.darkTheme }]"></i>
</button>
</li>
<li class="relative">
<button
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
type="button"
class="topbar-item config-item"
>
<i class="pi pi-palette"></i>
</button>
<AppConfigurator />
</li>
<li v-if="showMenuButton" class="menu-button">
<button type="button" class="topbar-item menu-button" @click="onMenuButtonClick" aria-haspopup aria-label="Menu">
<i class="pi pi-bars"></i>
</button>
</li>
</ul>
</div>
</div>
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
export default {
emits: ['menubutton-click'],
props: {
showMenuButton: {
type: Boolean,
default: true
}
},
scrollListener: null,
container: null,
mounted() {
this.bindScrollListener();
},
beforeUnmount() {
if (this.scrollListener) {
this.unbindScrollListener();
}
},
methods: {
onMenuButtonClick(event) {
this.$emit('menubutton-click', event);
},
toggleDarkMode() {
EventBus.emit('dark-mode-toggle', { dark: !this.$appState.darkTheme });
},
bindScrollListener() {
if (!this.scrollListener) {
if (this.container) {
this.scrollListener = () => {
if (window.scrollY > 0) this.container.classList.add('layout-topbar-sticky');
else this.container.classList.remove('layout-topbar-sticky');
};
}
}
window.addEventListener('scroll', this.scrollListener);
},
unbindScrollListener() {
if (this.scrollListener) {
window.removeEventListener('scroll', this.scrollListener);
this.scrollListener = null;
}
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
this.outsideClickListener = (event) => {
if (this.isOutsideTopbarMenuClicked(event)) {
this.unbindOutsideClickListener();
}
};
document.addEventListener('click', this.outsideClickListener);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
this.outsideClickListener = null;
}
},
isOutsideTopbarMenuClicked(event) {
return !(this.$refs.topbarMenu.isSameNode(event.target) || this.$refs.topbarMenu.contains(event.target));
},
containerRef(el) {
this.container = el;
}
}
};
</script>

4
apps/volt/components/app/PrimeVueNuxtLink.js Normal file
View File

@ -0,0 +1,4 @@
export default defineNuxtLink({
componentName: 'PrimeVueNuxtLink',
trailingSlash: 'append'
});

78
apps/volt/components/demo/DeferredDemo.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<div v-if="!visible">
<div class="card">
<div class="deferred-demo-loading"></div>
</div>
</div>
<slot v-else></slot>
</template>
<script>
export default {
name: 'DeferredDemo',
emits: ['load'],
props: {
options: {
type: Object,
default: null
}
},
data() {
return {
visible: false
};
},
observer: null,
timeout: null,
mounted() {
this.observer = new IntersectionObserver(([entry]) => {
clearTimeout(this.timeout);
if (entry.isIntersecting) {
this.timeout = setTimeout(() => {
this.visible = true;
this.observer.unobserve(this.$el);
this.$emit('load');
}, 350);
}
}, this.options);
this.observer.observe(this.$el);
},
beforeUnmount() {
!this.visible && this.$el && this.observer?.unobserve(this.$el);
clearTimeout(this.timeout);
}
};
</script>
<style>
.deferred-demo-loading {
border-radius: 10px;
height: 350px;
position: relative;
overflow: hidden;
}
.deferred-demo-loading::after {
content: '';
animation: deferred-demo-loading 1.2s infinite;
left: 0;
position: absolute;
right: 0;
top: 0;
height: 100%;
transform: translateX(-100%);
z-index: 1;
border-radius: 10px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--p-surface-100), rgba(255, 255, 255, 0));
}
@keyframes deferred-demo-loading {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
</style>

77
apps/volt/components/doc/DocComponent.vue Normal file
View File

@ -0,0 +1,77 @@
<template>
<div :class="['doc-component', className]">
<Head>
<Title>Volt | {{ title }}</Title>
<Meta name="description" :content="'Volt | ' + description" />
</Head>
<ul class="doc-tabmenu">
<li :class="{ 'doc-tabmenu-active': tab === 0 }">
<button type="button" @click="tab = 0">FEATURES</button>
</li>
<li :class="{ 'doc-tabmenu-active': tab === 1 }">
<button type="button" @click="tab = 1">CODE</button>
</li>
</ul>
<div class="doc-tabpanels">
<div v-show="tab === 0" class="doc-tabpanel">
<div class="doc-main">
<div class="doc-intro">
<h1>{{ header }}</h1>
<p>
<span>{{ description }}</span>
</p>
<div class="pt-3 flex gap-2">
<a
:href="`https://primevue.org${originPath}/#api`"
target="_blank"
rel="noopener noreferrer"
class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm dark:bg-surface-800 dark:hover:bg-surface-700"
><span class="text-surface-900 dark:text-surface-50 font-medium">API Doc</span><i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i
></a>
<a
:href="`https://primevue.org${originPath}/#pt`"
target="_blank"
rel="noopener noreferrer"
class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm text-surface-900 dark:bg-surface-800 dark:hover:bg-surface-700"
><span class="text-surface-900 dark:text-surface-50 font-medium">PassThrough Doc</span><i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i
></a>
<a
:href="`https://primevue.org${originPath}/#accessibility`"
target="_blank"
rel="noopener noreferrer"
class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm text-surface-900 dark:bg-surface-800 dark:hover:bg-surface-700"
><span class="text-surface-900 dark:text-surface-50 font-medium">Accessibility</span><i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i
></a>
</div>
</div>
<DocSections :docs="componentDocs" />
</div>
<DocSectionNav :docs="componentDocs" />
</div>
<div v-if="tab === 1" class="doc-tabpanel">
<DocPreset :presetKey="header?.toLowerCase()" :introText="`${header} Code`" />
</div>
</div>
</div>
</template>
<script setup>
import { computed, ref } from 'vue';
defineProps({
title: String,
header: String,
description: String,
componentDocs: Object,
className: String,
presetDoc: Object
});
const route = useRoute();
const tab = ref(0);
const originPath = computed(() => route.path);
</script>

37
apps/volt/components/doc/DocPreset.vue Normal file
View File

@ -0,0 +1,37 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>{{ introText }}</h1>
</div>
<div class="xl:pe-72">
<DocSectionCode :code="code" />
</div>
</div>
</template>
<script>
export default {
props: {
presetKey: {
type: String,
default: null
},
introText: {
type: String,
default: null
}
},
data() {
return {
code: ''
};
},
async mounted() {
if (this.presetKey) {
const content = await import(`../../volt/${this.presetKey}/index.vue?raw`);
this.code = '\n' + content.default;
}
}
};
</script>

42
apps/volt/components/doc/DocSectionCode.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<div class="doc-section-code">
<div class="doc-section-code-buttons">
<button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="h-8 w-8 p-0 inline-flex items-center justify-center">
<i class="pi pi-copy"></i>
</button>
</div>
<div dir="ltr">
<template v-if="!lang">
<pre v-code><code>{{ code }}
</code></pre>
</template>
<template v-else-if="lang === 'script'">
<pre v-code.script><code>
{{ code }}
</code></pre>
</template>
</div>
</div>
</template>
<script>
export default {
props: {
code: {
type: null,
default: null
},
lang: {
type: String,
default: null
}
},
methods: {
async copyCode() {
await navigator.clipboard.writeText(this.code[this.codeLang]);
}
}
};
</script>

127
apps/volt/components/doc/DocSectionNav.vue Normal file
View File

@ -0,0 +1,127 @@
<template>
<ul ref="nav" class="doc-section-nav">
<li v-for="doc of docs" :key="doc.label" :class="['navbar-item', { 'active-navbar-item': activeId === doc.id }]">
<div class="navbar-item-content">
<button @click="onButtonClick(doc)">{{ doc.label }}</button>
</div>
<template v-if="doc.children">
<ul>
<li v-for="child of doc.children" :key="child.label" :class="['navbar-item', { 'active-navbar-item': activeId === child.id }]">
<div class="navbar-item-content">
<button @click="onButtonClick(child)">
{{ child.label }}
</button>
</div>
</li>
</ul>
</template>
</li>
</ul>
</template>
<script>
import { findSingle, getHeight, getOffset, getWindowScrollTop, isVisible } from '@primeuix/utils/dom';
import { isNotEmpty } from '@primeuix/utils/object';
export default {
props: ['docs'],
data() {
return {
activeId: null,
isScrollBlocked: false,
scrollEndTimer: null,
topbarHeight: 0
};
},
watch: {
'$route.hash'() {
this.scrollCurrentUrl();
}
},
mounted() {
this.scrollCurrentUrl();
window.addEventListener('scroll', this.onScroll, { passive: true });
},
beforeUnmount() {
window.removeEventListener('scroll', this.onScroll, { passive: true });
},
methods: {
onScroll() {
if (!this.isScrollBlocked) {
const labels = [...document.querySelectorAll(':is(h1,h2,h3).doc-section-label')].filter((el) => isVisible(el));
const windowScrollTop = getWindowScrollTop();
labels.forEach((label) => {
const { top } = getOffset(label);
const threshold = this.getThreshold(label);
if (top - threshold <= windowScrollTop) {
const link = findSingle(label, 'a');
this.activeId = link.id;
}
});
}
clearTimeout(this.scrollEndTimer);
this.scrollEndTimer = setTimeout(() => {
this.isScrollBlocked = false;
const activeItem = findSingle(this.$refs.nav, '.active-navbar-item');
activeItem && activeItem.scrollIntoView({ block: 'nearest', inline: 'start' });
}, 50);
},
scrollToLabelById(id, behavior = 'smooth') {
const label = document.getElementById(id);
label && label.parentElement.scrollIntoView({ block: 'start', behavior });
},
onButtonClick(doc) {
this.$router.push(`${this.checkRouteName}/#${doc.id}`);
setTimeout(() => {
this.activeId = doc.id;
this.scrollToLabelById(doc.id, 'smooth');
this.isScrollBlocked = true;
}, 1);
},
getThreshold(label) {
if (!this.topbarHeight) {
const topbar = findSingle(document.body, '.layout-topbar');
this.topbarHeight = topbar ? getHeight(topbar) : 0;
}
return this.topbarHeight + getHeight(label) * 1.5;
},
getIdOfTheSection(section) {
return section.querySelector('a').getAttribute('id');
},
scrollCurrentUrl() {
const hash = window.location.hash.substring(1);
const hasHash = isNotEmpty(hash);
const id = hasHash ? hash : (this.docs[0] || {}).id;
this.activeId = id;
hasHash &&
setTimeout(() => {
this.scrollToLabelById(id);
}, 1);
}
},
computed: {
checkRouteName() {
const path = this.$router.currentRoute.value.path;
if (path.lastIndexOf('/') === path.length - 1) {
return path.slice(0, -1);
}
return path;
}
}
};
</script>

47
apps/volt/components/doc/DocSectionText.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<component :is="headerTag" class="doc-section-label">
{{ $attrs.label }}
<NuxtLink :id="$attrs.id" :to="`${checkRouteName}/#${$attrs.id}`" target="_self" @click="onClick"> # </NuxtLink>
</component>
<div v-if="$attrs" class="doc-section-description">
<slot></slot>
</div>
</template>
<script>
export default {
inheritAttrs: false,
methods: {
onClick(event) {
const parentElement = event.currentTarget.parentElement;
const hash = window.location.hash.substring(1);
hash === this.$attrs.id && event.preventDefault();
setTimeout(() => {
parentElement.scrollIntoView({ block: 'start' });
}, 0);
}
},
computed: {
checkRouteName() {
const path = this.$router.currentRoute.value.path;
if (path.lastIndexOf('/') === path.length - 1) {
return path.slice(0, -1);
}
return path;
},
headerTag() {
if (this.$attrs.level === 3) {
return 'h4';
} else if (this.$attrs.level === 2) {
return 'h3';
}
return 'h2';
}
}
};
</script>

26
apps/volt/components/doc/DocSections.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<template v-for="(doc, i) of docs" :key="doc.label + '_' + i">
<section class="py-6">
<template v-if="doc.children">
<div :id="doc.id">
<DocSectionText :id="doc.id" :label="doc.label">
<p v-if="doc.description">{{ doc.description }}</p>
</DocSectionText>
</div>
<template v-for="comp of doc.children" :key="comp.label">
<component :is="{ ...comp.component }" :id="comp.id" :label="comp.label" :data="comp.data" :description="comp.description" :level="2" />
</template>
</template>
<template v-else-if="!doc.children && doc.component">
<component :is="{ ...doc.component }" :id="doc.id" :label="doc.label" :data="doc.data" :description="doc.description" />
</template>
</section>
</template>
</template>
<script>
export default {
props: ['docs']
};
</script>

68
apps/volt/components/doc/codeeditor/index.js Normal file
View File

@ -0,0 +1,68 @@
import sdk from '@stackblitz/sdk';
import { getVueApp } from './templates';
const useCodeSandbox = (language, code, service, extPages, dependencies, component, extFiles) => {
const getSandboxParameters = (sourceType) => {
const { files, dependenciesDemo, sourceFileName } = getVueApp({ code, service, extPages, dependencies, component, extFiles }, sourceType);
files['sandbox.config.json'] = {
content: {
infiniteLoopProtection: false
}
};
return { files, dependenciesDemo, sourceFileName };
};
const sandboxParameters = getSandboxParameters({ language });
fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json'
},
body: JSON.stringify(sandboxParameters)
})
.then((response) => response.json())
.then((data) => window.open(`https://codesandbox.io/s/${data.sandbox_id}`, '_blank'));
};
const useStackBlitz = (language, code, service, extPages, dependencies, component, extFiles, embedded = false) => {
const getStackBlitzParameters = (sourceType) => {
const { files, dependenciesDemo, sourceFileName } = getVueApp({ code, service, extPages, dependencies, component, extFiles, embedded }, sourceType);
return { files, dependenciesDemo, sourceFileName };
};
const stackBlitzParameters = getStackBlitzParameters({ language });
let files = {};
Object.entries(stackBlitzParameters.files).forEach(([k, v]) => (files[`${k}`] = typeof v.content === 'object' ? JSON.stringify(v.content, null, 2) : v.content));
const primevueproject = {
title: embedded ? 'PrimeVue Tailwind Demo' : 'PrimeVue Demo',
template: 'node',
description: embedded
? "This example demonstrates how to style components with Tailwind CSS using PrimeVue's unstyled property. As mentioned in the PrimeVue documentation, components can be styled or have HTML attributes added using a global or inline pass through approach. In this example, we utilize the global PT approach with Tailwind CSS."
: '**\n PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.',
dependencies: stackBlitzParameters.dependencies,
files
};
if (embedded) {
sdk.embedProject('embed', primevueproject, {
openFile: 'src/main.js',
view: 'default',
height: '800px'
});
} else {
sdk.openProject(primevueproject, {
newWindow: true,
openFile: [stackBlitzParameters.sourceFileName]
});
}
};
export { useCodeSandbox, useStackBlitz };

11108
apps/volt/components/doc/codeeditor/services.js Normal file
View File

File diff suppressed because it is too large Load Diff

1082
apps/volt/components/doc/codeeditor/templates.js Normal file
View File

File diff suppressed because one or more lines are too long

19
apps/volt/directives/CodeHighlight.js Normal file
View File

@ -0,0 +1,19 @@
import { isClient } from '@primeuix/utils/dom';
const CodeHighlight = {
mounted(el, binding) {
const modifiers = binding.modifiers;
const value = binding.value;
if (modifiers.script || value === 'script') el.className = 'language-javascript';
else if (modifiers.css || value === 'css') el.className = 'language-css';
else el.className = 'language-markup';
if (isClient()) {
window.Prism.highlightElement(el.children[0]);
el.children[0].parentElement.setAttribute('tabindex', '-1');
}
}
};
export default CodeHighlight;

42
apps/volt/doc/avatar/AvatarGroupDoc.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.</p>
</DocSectionText>
<div class="card flex justify-center">
<AvatarGroup>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
<Avatar label="+2" shape="circle" />
</AvatarGroup>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Avatar from '@/volt/avatar';
import AvatarGroup from '@/volt/avatargroup';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex justify-center">
<AvatarGroup>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
<Avatar label="+2" shape="circle" />
</AvatarGroup>
</div>
</template>
<script setup>
import Avatar from '@/volt/avatar';
import AvatarGroup from '@/volt/avatargroup';
<\/script>
`);
</script>

68
apps/volt/doc/avatar/IconDoc.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<DocSectionText v-bind="$attrs">
<p>A font icon is displayed as an Avatar with the <i>icon</i> property.</p>
</DocSectionText>
<div class="card">
<div class="flex flex-wrap gap-8">
<div class="flex-auto">
<h5>Icon</h5>
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
</div>
<div class="flex-auto">
<h5>Circle</h5>
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
</div>
<div class="flex-auto">
<h5>Badge</h5>
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar icon="pi pi-user" size="xlarge" />
</OverlayBadge>
</div>
</div>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Avatar from '@/volt/avatar';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card">
<div class="flex flex-wrap gap-8">
<div class="flex-auto">
<h5>Icon</h5>
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
</div>
<div class="flex-auto">
<h5>Circle</h5>
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
</div>
<div class="flex-auto">
<h5>Badge</h5>
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar icon="pi pi-user" size="xlarge" />
</OverlayBadge>
</div>
</div>
</div>
</template>
<script setup>
import Avatar from '@/volt/avatar';
<\/script>
`);
</script>

64
apps/volt/doc/avatar/ImageDoc.vue Normal file
View File

@ -0,0 +1,64 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Use the <i>image</i> property to display an image as an Avatar.</p>
</DocSectionText>
<div class="card">
<div class="flex flex-wrap gap-8">
<div class="flex-auto">
<h5>Image</h5>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
</div>
<div class="flex-auto">
<h5>Badge</h5>
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
</OverlayBadge>
</div>
<div class="flex-auto">
<h5>Gravatar</h5>
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" size="xlarge" />
</div>
</div>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Avatar from '@/volt/avatar';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card">
<div class="flex flex-wrap gap-8">
<div class="flex-auto">
<h5>Image</h5>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
</div>
<div class="flex-auto">
<h5>Badge</h5>
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
</OverlayBadge>
</div>
<div class="flex-auto">
<h5>Gravatar</h5>
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" size="xlarge" />
</div>
</div>
</div>
</template>
<script setup>
import Avatar from '@/volt/avatar';
<\/script>
`);
</script>

15
apps/volt/doc/avatar/ImportDoc.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" lang="script" />
</template>
<script>
export default {
data() {
return {
code: `import InputText from '@/volt/inputtext';
`
};
}
};
</script>

68
apps/volt/doc/avatar/LabelDoc.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<DocSectionText v-bind="$attrs">
<p>A letter Avatar is defined with the <i>label</i> property.</p>
</DocSectionText>
<div class="card">
<div class="flex flex-wrap gap-8">
<div class="flex-auto">
<h5>Label</h5>
<Avatar label="P" class="mr-2" size="xlarge" />
<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
</div>
<div class="flex-auto">
<h5>Circle</h5>
<Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
</div>
<div class="flex-auto">
<h5>Badge</h5>
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar label="U" size="xlarge" />
</OverlayBadge>
</div>
</div>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Avatar from '@/volt/avatar';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card">
<div class="flex flex-wrap gap-8">
<div class="flex-auto">
<h5>Label</h5>
<Avatar label="P" class="mr-2" size="xlarge" />
<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
</div>
<div class="flex-auto">
<h5>Circle</h5>
<Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
</div>
<div class="flex-auto">
<h5>Badge</h5>
<OverlayBadge value="4" severity="danger" class="inline-flex">
<Avatar label="U" size="xlarge" />
</OverlayBadge>
</div>
</div>
</div>
</template>
<script setup>
import Avatar from '@/volt/avatar';
<\/script>
`);
</script>

28
apps/volt/doc/button/BadgeDoc.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Buttons have built-in badge support with <i>badge</i> and <i>badgeSeverity</i> properties.</p>
</DocSectionText>
<div class="card flex justify-center flex-wrap gap-4">
<Button type="button" label="Emails" badge="2" />
<Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined" />
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Button from '@/volt/button';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex justify-center flex-wrap gap-4">
<Button type="button" label="Emails" badge="2" />
<Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined" />
</div>
</template>
<script setup>
import Button from '@/volt/button';
<\/script>
`);
</script>

26
apps/volt/doc/button/BasicDoc.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Text to display on a button is defined with the <i>label</i> property.</p>
</DocSectionText>
<div class="card flex justify-center">
<Button label="Submit" />
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Button from '@/volt/button';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex justify-center">
<Button label="Submit" />
</div>
</template>
<script setup>
import Button from '@/volt/button';
<\/script>
`);
</script>

36
apps/volt/doc/button/ButtonGroupDoc.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Multiple buttons are grouped when wrapped inside an element with <i>ButtonGroup</i> component.</p>
</DocSectionText>
<div class="card flex justify-center">
<ButtonGroup>
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</ButtonGroup>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Button from '@/volt/button';
import ButtonGroup from '@/volt/buttongroup';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex justify-center">
<ButtonGroup>
<Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" />
</ButtonGroup>
</div>
</template>
<script setup>
import Button from '@/volt/button';
import ButtonGroup from '@/volt/buttongroup';
<\/script>
`);
</script>

26
apps/volt/doc/button/DisabledDoc.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<DocSectionText v-bind="$attrs">
<p>When <i>disabled</i> is present, the element cannot be used.</p>
</DocSectionText>
<div class="card flex justify-center">
<Button label="Submit" disabled />
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Button from '@/volt/button';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex justify-center">
<Button label="Submit" disabled />
</div>
</template>
<script setup>
import Button from '@/volt/button';
<\/script>
`);
</script>

40
apps/volt/doc/button/HeadlessDoc.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Headless mode is enabled by adding the <i>asChild</i> property and defining your own UI element with the available bindings.</p>
</DocSectionText>
<div class="card flex justify-center">
<Button v-slot="slotProps" asChild>
<button
v-bind="slotProps.a11yAttrs"
class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
>
SIGN UP
</button>
</Button>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Button from '@/volt/button';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex justify-center">
<Button v-slot="slotProps" asChild>
<button
v-bind="slotProps.a11yAttrs"
class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
>
SIGN UP
</button>
</Button>
</div>
</template>
<script setup>
import Button from '@/volt/button';
<\/script>
`);
</script>

123
apps/volt/doc/button/IconOnlyDoc.vue Normal file
View File

@ -0,0 +1,123 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Buttons can have icons without labels.</p>
</DocSectionText>
<div class="card">
<div class="flex justify-center mb-8">
<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" optionValue="value" dataKey="label" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" aria-label="Filter" :size="size" />
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" aria-label="Filter" :size="size" rounded />
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" rounded />
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" rounded />
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" rounded />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" aria-label="Filter" :size="size" variant="outlined" rounded />
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="outlined" rounded />
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="outlined" rounded />
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="outlined" rounded />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" rounded />
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" rounded />
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" rounded />
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" rounded />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" raised rounded />
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" raised rounded />
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" raised rounded />
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" raised rounded />
</div>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Button from '@/volt/button';
import ContrastButton from '@/volt/button/contrast';
import DangerButton from '@/volt/button/danger';
import SecondaryButton from '@/volt/button/secondary';
import SelectButton from '@/volt/selectbutton';
import { ref } from 'vue';
const size = ref('normal');
const sizeOptions = ref([
{ label: 'Small', value: 'small' },
{ label: 'Normal', value: 'normal' },
{ label: 'Large', value: 'large' }
]);
const code = ref(`
<template>
<div class="card">
<div class="flex justify-center mb-8">
<SelectButton v-model="size" :options="sizeOptions" optionLabel="label" optionValue="value" dataKey="label" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" aria-label="Filter" :size="size" />
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" aria-label="Filter" :size="size" rounded />
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" rounded />
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" rounded />
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" rounded />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" aria-label="Filter" :size="size" variant="outlined" rounded />
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="outlined" rounded />
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="outlined" rounded />
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="outlined" rounded />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" rounded />
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" rounded />
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" rounded />
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" rounded />
</div>
<div class="flex flex-wrap justify-center gap-4 mb-6">
<Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" raised rounded />
<SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" raised rounded />
<ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" raised rounded />
<DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" raised rounded />
</div>
</div>
</template>
<script setup>
import Button from '@/volt/button';
import ContrastButton from '@/volt/button/contrast';
import DangerButton from '@/volt/button/danger';
import SecondaryButton from '@/volt/button/secondary';
import SelectButton from '@/volt/selectbutton';
import { ref } from 'vue';
const size = ref('normal');
const sizeOptions = ref([
{ label: 'Small', value: 'small' },
{ label: 'Normal', value: 'normal' },
{ label: 'Large', value: 'large' }
]);
<\/script>
`);
</script>

42
apps/volt/doc/button/IconsDoc.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Icon of a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute.</p>
</DocSectionText>
<div class="card flex flex-col items-center gap-4">
<div class="flex flex-wrap gap-4 justify-center">
<Button icon="pi pi-home" aria-label="Save" />
<Button label="Profile" icon="pi pi-user" />
<Button label="Save" icon="pi pi-check" iconPos="right" />
</div>
<div class="flex flex-wrap gap-4 justify-center">
<Button label="Search" icon="pi pi-search" iconPos="top" />
<Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
</div>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Button from '@/volt/button';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex flex-col items-center gap-4">
<div class="flex flex-wrap gap-4 justify-center">
<Button icon="pi pi-home" aria-label="Save" />
<Button label="Profile" icon="pi pi-user" />
<Button label="Save" icon="pi pi-check" iconPos="right" />
</div>
<div class="flex flex-wrap gap-4 justify-center">
<Button label="Search" icon="pi pi-search" iconPos="top" />
<Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
</div>
</div>
</template>
<script setup>
import Button from '@/volt/button';
<\/script>
`);
</script>

18
apps/volt/doc/button/ImportDoc.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" lang="script" />
</template>
<script>
export default {
data() {
return {
code: `import Button from '@/volt/button';
import SecondaryButton from '@/volt/button/secondary';
import ContrastButton from '@/volt/button/contrast';
import DangerButton from '@/volt/button/danger';
`
};
}
};
</script>

45
apps/volt/doc/button/LoadingDoc.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Busy state is controlled with the <i>loading</i> property.</p>
</DocSectionText>
<div class="card flex justify-center">
<Button type="button" label="Search" icon="pi pi-check" :loading="loading" @click="load" />
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Button from '@/volt/button';
import { ref } from 'vue';
const loading = ref(false);
const load = () => {
loading.value = true;
setTimeout(() => {
loading.value = false;
}, 2000);
};
const code = ref(`
<template>
<div class="card flex justify-center">
<Button type="button" label="Search" icon="pi pi-check" :loading="loading" @click="load" />
</div>
</template>
<script setup>
import Button from '@/volt/button';
import { ref } from 'vue';
const loading = ref(false);
const load = () => {
loading.value = true;
setTimeout(() => {
loading.value = false;
}, 2000);
};
<\/script>
`);
</script>

38
apps/volt/doc/button/OutlinedDoc.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Outlined buttons display a border without a transparent background.</p>
</DocSectionText>
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" variant="outlined" />
<SecondaryButton label="Secondary" variant="outlined" />
<ContrastButton label="Contrast" variant="outlined" />
<DangerButton label="Danger" variant="outlined" />
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Button from '@/volt/button';
import ContrastButton from '@/volt/button/contrast';
import DangerButton from '@/volt/button/danger';
import SecondaryButton from '@/volt/button/secondary';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" variant="outlined" />
<SecondaryButton label="Secondary" variant="outlined" />
<ContrastButton label="Contrast" variant="outlined" />
<DangerButton label="Danger" variant="outlined" />
</div>
</template>
<script setup>
import Button from '@/volt/button';
import ContrastButton from '@/volt/button/contrast';
import DangerButton from '@/volt/button/danger';
import SecondaryButton from '@/volt/button/secondary';
<\/script>
`);
</script>

38
apps/volt/doc/button/RaisedDoc.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Raised buttons display a shadow to indicate elevation.</p>
</DocSectionText>
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" raised />
<SecondaryButton label="Secondary" raised />
<ContrastButton label="Contrast" raised />
<DangerButton label="Danger" raised />
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Button from '@/volt/button';
import ContrastButton from '@/volt/button/contrast';
import DangerButton from '@/volt/button/danger';
import SecondaryButton from '@/volt/button/secondary';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" raised />
<SecondaryButton label="Secondary" raised />
<ContrastButton label="Contrast" raised />
<DangerButton label="Danger" raised />
</div>
</template>
<script setup>
import Button from '@/volt/button';
import ContrastButton from '@/volt/button/contrast';
import DangerButton from '@/volt/button/danger';
import SecondaryButton from '@/volt/button/secondary';
<\/script>
`);
</script>

38
apps/volt/doc/button/RaisedTextDoc.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Text buttons can be displayed elevated with the <i>raised</i> option.</p>
</DocSectionText>
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" variant="text" raised />
<SecondaryButton label="Secondary" variant="text" raised />
<ContrastButton label="Contrast" variant="text" raised />
<DangerButton label="Danger" variant="text" raised />
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Button from '@/volt/button';
import ContrastButton from '@/volt/button/contrast';
import DangerButton from '@/volt/button/danger';
import SecondaryButton from '@/volt/button/secondary';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" variant="text" raised />
<SecondaryButton label="Secondary" variant="text" raised />
<ContrastButton label="Contrast" variant="text" raised />
<DangerButton label="Danger" variant="text" raised />
</div>
</template>
<script setup>
import Button from '@/volt/button';
import ContrastButton from '@/volt/button/contrast';
import DangerButton from '@/volt/button/danger';
import SecondaryButton from '@/volt/button/secondary';
<\/script>
`);
</script>

38
apps/volt/doc/button/RoundedDoc.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Rounded buttons have a circular border radius.</p>
</DocSectionText>
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" rounded />
<SecondaryButton label="Secondary" rounded />
<ContrastButton label="Contrast" rounded />
<DangerButton label="Danger" rounded />
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Button from '@/volt/button';
import ContrastButton from '@/volt/button/contrast';
import DangerButton from '@/volt/button/danger';
import SecondaryButton from '@/volt/button/secondary';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" rounded />
<SecondaryButton label="Secondary" rounded />
<ContrastButton label="Contrast" rounded />
<DangerButton label="Danger" rounded />
</div>
</template>
<script setup>
import Button from '@/volt/button';
import ContrastButton from '@/volt/button/contrast';
import DangerButton from '@/volt/button/danger';
import SecondaryButton from '@/volt/button/secondary';
<\/script>
`);
</script>

38
apps/volt/doc/button/SeverityDoc.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Secondary, Contrast and Danger buttons are available as separate components for severity alternatives.</p>
</DocSectionText>
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" />
<SecondaryButton label="Secondary" />
<ContrastButton label="Contrast" />
<DangerButton label="Danger" />
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Button from '@/volt/button';
import ContrastButton from '@/volt/button/contrast';
import DangerButton from '@/volt/button/danger';
import SecondaryButton from '@/volt/button/secondary';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" />
<SecondaryButton label="Secondary" />
<ContrastButton label="Contrast" />
<DangerButton label="Danger" />
</div>
</template>
<script setup>
import Button from '@/volt/button';
import ContrastButton from '@/volt/button/contrast';
import DangerButton from '@/volt/button/danger';
import SecondaryButton from '@/volt/button/secondary';
<\/script>
`);
</script>

30
apps/volt/doc/button/SizesDoc.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Button provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
</DocSectionText>
<div class="card flex flex-wrap items-center justify-center gap-4">
<Button label="Small" icon="pi pi-check" size="small" />
<Button label="Normal" icon="pi pi-check" />
<Button label="Large" icon="pi pi-check" size="large" />
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Button from '@/volt/button';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex flex-wrap items-center justify-center gap-4">
<Button label="Small" icon="pi pi-check" size="small" />
<Button label="Normal" icon="pi pi-check" />
<Button label="Large" icon="pi pi-check" size="large" />
</div>
</template>
<script setup>
import Button from '@/volt/button';
<\/script>
`);
</script>

48
apps/volt/doc/button/TemplateDoc.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Custom content inside a button is defined as children.</p>
</DocSectionText>
<div class="card flex justify-center">
<Button variant="outlined" class="!border-2">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
fill="var(--p-primary-color)"
/>
<path
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
fill="var(--p-text-color)"
/>
</svg>
</Button>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Button from '@/volt/button';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex justify-center">
<Button variant="outlined" class="!border-2">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
fill="var(--p-primary-color)"
/>
<path
d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
fill="var(--p-text-color)"
/>
</svg>
</Button>
</div>
</template>
<script setup>
import Button from '@/volt/button';
<\/script>
`);
</script>

38
apps/volt/doc/button/TextDoc.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Text buttons are displayed as textual elements.</p>
</DocSectionText>
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" variant="text" />
<SecondaryButton label="Secondary" variant="text" />
<ContrastButton label="Contrast" variant="text" />
<DangerButton label="Danger" variant="text" />
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Button from '@/volt/button';
import ContrastButton from '@/volt/button/contrast';
import DangerButton from '@/volt/button/danger';
import SecondaryButton from '@/volt/button/secondary';
import { ref } from 'vue';
const code = ref(`
<template>
<div class="card flex justify-center flex-wrap gap-4">
<Button label="Primary" variant="text" />
<SecondaryButton label="Secondary" variant="text" />
<ContrastButton label="Contrast" variant="text" />
<DangerButton label="Danger" variant="text" />
</div>
</template>
<script setup>
import Button from '@/volt/button';
import ContrastButton from '@/volt/button/contrast';
import DangerButton from '@/volt/button/danger';
import SecondaryButton from '@/volt/button/secondary';
<\/script>
`);
</script>

62
apps/volt/doc/card/AdvancedDoc.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
</DocSectionText>
<div class="mb-4 p-8 flex items-center justify-center">
<Card style="width: 25rem; overflow: hidden">
<template #header>
<img alt="user header" class="w-full" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" />
</template>
<template #title>Advanced Card</template>
<template #subtitle>Card subtitle</template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
quas!
</p>
</template>
<template #footer>
<div class="flex gap-4 mt-1">
<Button label="Cancel" severity="secondary" outlined class="w-full" />
<Button label="Save" class="w-full" />
</div>
</template>
</Card>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Button from '@/volt/button';
import Card from '@/volt/card';
import { ref } from 'vue';
const code = ref(`
<template>
<Card style="width: 25rem; overflow: hidden">
<template #header>
<img alt="user header" class="w-full" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" />
</template>
<template #title>Advanced Card</template>
<template #subtitle>Card subtitle</template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
quas!
</p>
</template>
<template #footer>
<div class="flex gap-4 mt-1">
<Button label="Cancel" severity="secondary" outlined class="w-full" />
<Button label="Save" class="w-full" />
</div>
</template>
</Card>
</template>
<script setup>
import Card from '@/volt/card';
import Button from '@/volt/button';
<\/script>
`);
</script>

40
apps/volt/doc/card/BasicDoc.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<DocSectionText v-bind="$attrs">
<p>A simple Card is created with a <i>title</i> property along with the content as children.</p>
</DocSectionText>
<div class="mb-4 p-8">
<Card>
<template #title>Simple Card</template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
quas!
</p>
</template>
</Card>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Card from '@/volt/card';
import { ref } from 'vue';
const code = ref(`
<template>
<Card>
<template #title>Simple Card</template>
<template #content>
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
quas!
</p>
</template>
</Card>
</template>
<script setup>
import Card from '@/volt/card';
<\/script>
`);
</script>

15
apps/volt/doc/card/ImportDoc.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" lang="script" />
</template>
<script>
export default {
data() {
return {
code: `import Card from '@/volt/card';
`
};
}
};
</script>

31
apps/volt/doc/checkbox/BasicDoc.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Binary checkbox is used with the <i>v-model</i> for two-way value binding and the <i>binary</i> property.</p>
</DocSectionText>
<div class="card flex justify-center">
<Checkbox v-model="checked" binary />
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Checkbox from '@/volt/checkbox';
import { ref } from 'vue';
const checked = ref(false);
const code = ref(`
<template>
<div class="card flex justify-center">
<Checkbox v-model="checked" binary />
</div>
</template>
<script setup>
import Checkbox from '@/volt/checkbox';
import { ref } from 'vue';
const checked = ref(false);
<\/script>
`);
</script>

35
apps/volt/doc/checkbox/DisabledDoc.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<DocSectionText v-bind="$attrs">
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
</DocSectionText>
<div class="card flex justify-center gap-2">
<Checkbox v-model="checked1" binary disabled />
<Checkbox v-model="checked2" binary disabled />
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Checkbox from '@/volt/checkbox';
import { ref } from 'vue';
const checked1 = ref(false);
const checked2 = ref(true);
const code = ref(`
<template>
<div class="card flex justify-center gap-2">
<Checkbox v-model="checked1" binary disabled />
<Checkbox v-model="checked2" binary disabled />
</div>
</template>
<script setup>
import Checkbox from '@/volt/checkbox';
import { ref } from 'vue';
const checked1 = ref(false);
const checked2 = ref(true);
<\/script>
`);
</script>

53
apps/volt/doc/checkbox/DynamicDoc.vue Normal file
View File

@ -0,0 +1,53 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Checkboxes can be generated using a list of values.</p>
</DocSectionText>
<div class="card flex justify-center">
<div class="flex flex-col gap-4">
<div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
<label :for="category.key">{{ category.name }}</label>
</div>
</div>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Checkbox from '@/volt/checkbox';
import { ref } from 'vue';
const selectedCategories = ref(['Marketing']);
const categories = ref([
{ name: 'Accounting', key: 'A' },
{ name: 'Marketing', key: 'M' },
{ name: 'Production', key: 'P' },
{ name: 'Research', key: 'R' }
]);
const code = ref(`
<template>
<div class="card flex justify-center">
<div class="flex flex-col gap-4">
<div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
<Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
<label :for="category.key">{{ category.name }}</label>
</div>
</div>
</div>
</template>
<script setup>
import Checkbox from '@/volt/checkbox';
import { ref } from 'vue';
const selectedCategories = ref(['Marketing']);
const categories = ref([
{ name: 'Accounting', key: 'A' },
{ name: 'Marketing', key: 'M' },
{ name: 'Production', key: 'P' },
{ name: 'Research', key: 'R' }
]);
<\/script>
`);
</script>

31
apps/volt/doc/checkbox/FilledDoc.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
</DocSectionText>
<div class="card flex justify-center">
<Checkbox v-model="checked" binary variant="filled" />
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Checkbox from '@/volt/checkbox';
import { ref } from 'vue';
const checked = ref(false);
const code = ref(`
<template>
<div class="card flex justify-center">
<Checkbox v-model="checked" binary variant="filled" />
</div>
</template>
<script setup>
import Checkbox from '@/volt/checkbox';
import { ref } from 'vue';
const checked = ref(false);
<\/script>
`);
</script>

61
apps/volt/doc/checkbox/GroupDoc.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Multiple checkboxes can be grouped together.</p>
</DocSectionText>
<div class="card flex flex-wrap justify-center gap-4">
<div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1"> Cheese </label>
</div>
<div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2"> Mushroom </label>
</div>
<div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3"> Pepper </label>
</div>
<div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4"> Onion </label>
</div>
</div>
<DocSectionCode :code="code" />
</template>
<script setup>
import Checkbox from '@/volt/checkbox';
import { ref } from 'vue';
const pizza = ref(null);
const code = ref(`
<template>
<div class="card flex flex-wrap justify-center gap-4">
<div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
<label for="ingredient1"> Cheese </label>
</div>
<div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
<label for="ingredient2"> Mushroom </label>
</div>
<div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
<label for="ingredient3"> Pepper </label>
</div>
<div class="flex items-center gap-2">
<Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
<label for="ingredient4"> Onion </label>
</div>
</div>
</template>
<script setup>
import Checkbox from '@/volt/checkbox';
import { ref } from 'vue';
const pizza = ref(null);
<\/script>
`);
</script>

15
apps/volt/doc/checkbox/ImportDoc.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" lang="script" />
</template>
<script>
export default {
data() {
return {
code: `import Checkbox from '@/volt/checkbox';
`
};
}
};
</script>

Some files were not shown because too many files have changed in this diff Show More