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/6765/head
Stawlie 2024-11-11 15:05:47 +03:00 committed by GitHub
parent 104c1f88b4 af1714482f
commit 055b021c1b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
63 changed files with 2270 additions and 1462 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/showcase/app.vue
View File

@ -5,7 +5,7 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
import EventBus from '@/app/AppEventBus';
export default {
mounted() {

0
apps/showcase/layouts/AppEventBus.js → apps/showcase/app/AppEventBus.js
View File

7
apps/showcase/assets/data/news.json
View File

@ -1,6 +1,7 @@
{
"id": 70,
"content": "v4.2.0 is out with the Forms library",
"id": 71,
"content": "Figma UI Kit v3 is out! 🚀",
"linkText": "Learn More",
"linkHref": "https://primevue.org/forms"
"linkHref": "https://primevue.org/uikit",
"target": "_self"
}

3
apps/showcase/assets/menu/menu.json
View File

@ -530,7 +530,8 @@
{
"name": "Figma UI Kit",
"icon": "pi pi-pencil",
"to": "/uikit"
"to": "/uikit",
"badge": "NEW"
},
{
"name": "Templates",

6
apps/showcase/assets/styles/layout/_core.scss
View File

@ -34,8 +34,8 @@ a {
}
h1, h2, h3, h4, h5, h6 {
margin-block: 1.5rem 1rem; /* Üst ve alt kenarlar */
margin-inline: 0;
margin-block: 1.5rem 1rem;
margin-inline: 0;
font-family: inherit;
font-weight: 600;
line-height: 1.2;
@ -72,7 +72,7 @@ h6 {
p {
line-height: 1.625;
margin-block: 0 1rem; /* Üst ve alt kenarlar */
margin-block: 0 1rem;
margin-inline: 0;
}

2
apps/showcase/assets/styles/layout/_doc.scss
View File

@ -38,7 +38,7 @@
background-color: transparent;
border: 0 none;
display: block;
padding-block: 0 1rem; /* Üst ve alt kenarlar */
padding-block: 0 1rem;
padding-inline: 2rem;
text-align: center;
color: var(--text-color);

2
apps/showcase/assets/styles/layout/_topbar.scss
View File

@ -173,7 +173,7 @@
}
.version-icon {
margin-left: .25rem;
margin-inline-start: .25rem;
color: var(--text-secondary-color);
}
}

9
apps/showcase/assets/styles/layout/landing/_main.scss
View File

@ -9,7 +9,7 @@
background-color: var(--card-background);
position: relative;
z-index: 0;
&::before,
&::after {
content: "";
@ -25,7 +25,7 @@
opacity: 0;
z-index: -1;
}
&::after {
animation: clippath 3s infinite -1.5s linear;
}
@ -48,7 +48,6 @@
border-radius: 10px;
font-weight: 600;
padding: 1rem 1.5rem;
cursor: pointer;
@include focus-visible();
@ -168,7 +167,7 @@
100% {
clip-path: inset(0 0 98% 0);
}
25% {
clip-path: inset(0 98% 0 0);
}
@ -178,4 +177,4 @@
75% {
clip-path: inset(0 0 0 98%);
}
}
}

2
apps/showcase/components/landing/HeroSection.vue
View File

@ -324,7 +324,7 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
import EventBus from '@/app/AppEventBus';
export default {
data() {

2
apps/showcase/components/landing/samples/OverviewApp.vue
View File

@ -150,7 +150,7 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
import EventBus from '@/app/AppEventBus';
export default {
name: 'Overview',
redrawListener: null,

2
apps/showcase/layouts/AppConfigurator.vue → apps/showcase/components/layout/AppConfigurator.vue
View File

@ -52,7 +52,7 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
import EventBus from '@/app/AppEventBus';
import { $t, updatePreset, updateSurfacePalette } from '@primevue/themes';
import Aura from '@primevue/themes/aura';
import Lara from '@primevue/themes/lara';

91
apps/showcase/components/layout/AppDesigner.vue Normal file
View File

@ -0,0 +1,91 @@
<template>
<Drawer v-model:visible="$appState.designerActive" header="Theme Designer" position="right" class="!w-screen md:!w-[60rem]" :modal="false">
<Tabs value="0">
<TabList>
<Tab value="0">Primitive</Tab>
<Tab value="1">Semantic</Tab>
<Tab value="2">Component</Tab>
</TabList>
<TabPanels class="!px-0">
<TabPanel value="0">
<div class="flex flex-col gap-3">
<DesignBorderRadius />
<DesignColors />
</div>
</TabPanel>
<TabPanel value="1">
<Accordion :value="['0', '1']" multiple>
<AccordionPanel value="0">
<AccordionHeader>Common</AccordionHeader>
<AccordionContent>
<div class="flex flex-col gap-3">
<DesignGeneral />
<DesignFormField />
<DesignList />
<DesignNavigation />
<DesignOverlay />
</div>
</AccordionContent>
</AccordionPanel>
<AccordionPanel value="1">
<AccordionHeader>Color Scheme</AccordionHeader>
<AccordionContent>
<Tabs value="cs-0">
<TabList>
<Tab value="cs-0">Light</Tab>
<Tab value="cs-1">Dark</Tab>
</TabList>
<TabPanels class="!px-0">
<TabPanel value="cs-0">
<DesignCS :value="preset.semantic.colorScheme.light" />
</TabPanel>
<TabPanel value="cs-1">
<DesignCS :value="preset.semantic.colorScheme.dark" />
</TabPanel>
</TabPanels>
</Tabs>
</AccordionContent>
</AccordionPanel>
</Accordion>
</TabPanel>
<TabPanel value="2"> Component tokens are not supported by the Visual Editor at the moment. </TabPanel>
</TabPanels>
</Tabs>
<template #footer>
<div class="flex justify-end gap-2">
<Button type="button" label="Download" variant="outlined" />
<Button type="button" @click="apply" label="Apply" />
</div>
</template>
</Drawer>
</template>
<script>
import { updatePreset } from '@primevue/themes';
import AuraBase from '@primevue/themes/nora/base';
export default {
provide() {
return {
$preset: this.preset
};
},
data() {
return {
preset: AuraBase
};
},
mounted() {
this.preset.semantic.primary = this.preset.primitive.emerald;
this.preset.semantic.colorScheme.light.surface = this.preset.primitive.slate;
this.preset.semantic.colorScheme.dark.surface = this.preset.primitive.zinc;
},
methods: {
apply() {
updatePreset(this.preset);
}
}
};
</script>

0
apps/showcase/layouts/AppFooter.vue → apps/showcase/components/layout/AppFooter.vue
View File

0
apps/showcase/layouts/AppMenu.vue → apps/showcase/components/layout/AppMenu.vue
View File

0
apps/showcase/layouts/AppMenuItem.vue → apps/showcase/components/layout/AppMenuItem.vue
View File

2
apps/showcase/layouts/AppNews.vue → apps/showcase/components/layout/AppNews.vue
View File

@ -4,7 +4,7 @@
<i></i>
<div class="layout-news-content">
<span class="layout-news-text" :style="$appState.announcement.textStyle">{{ $appState.announcement.content }}</span>
<a class="layout-news-link" :href="$appState.announcement.linkHref" target="_blank" rel="noopener noreferrer">{{ $appState.announcement.linkText }}</a>
<a class="layout-news-link" :href="$appState.announcement.linkHref" :target="$appState.announcement.target" rel="noopener noreferrer">{{ $appState.announcement.linkText }}</a>
</div>
<a class="layout-news-close" :style="$appState.announcement.textStyle" @click="onClose">
<span class="pi pi-times"></span>

14
apps/showcase/layouts/AppTopBar.vue → apps/showcase/components/layout/AppTopBar.vue
View File

@ -94,6 +94,11 @@
</button>
<AppConfigurator />
</li>
<li>
<button type="button" class="topbar-item" @click="toggleDesigner">
<i class="pi pi-pencil"></i>
</button>
</li>
<li>
<button
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
@ -126,8 +131,7 @@
</template>
<script>
import AppConfigurator from '@/layouts/AppConfigurator';
import EventBus from '@/layouts/AppEventBus';
import EventBus from '@/app/AppEventBus';
import docsearch from '@docsearch/js';
export default {
@ -237,10 +241,10 @@ export default {
},
containerRef(el) {
this.container = el;
},
toggleDesigner() {
this.$appState.designerActive = !this.$appState.designerActive;
}
},
components: {
AppConfigurator
}
};
</script>

16
apps/showcase/components/layout/designer/DesignColorPalette.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<div class="flex border border-surface">
<div v-for="color of value" :key="color" class="w-4 h-4 sm:w-8 sm:h-8" :style="{ backgroundColor: color }" :title="color"></div>
</div>
</template>
<script>
export default {
props: {
value: {
type: Object,
default: null
}
}
};
</script>

36
apps/showcase/components/layout/designer/primitive/DesignBorderRadius.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<Fieldset legend="Rounded" :toggleable="true">
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">none</span>
<input v-model="$preset.primitive.borderRadius.none" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">xs</span>
<input v-model="$preset.primitive.borderRadius.xs" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">sm</span>
<input v-model="$preset.primitive.borderRadius.sm" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">md</span>
<input v-model="$preset.primitive.borderRadius.md" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">lg</span>
<input v-model="$preset.primitive.borderRadius.lg" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">xl</span>
<input v-model="$preset.primitive.borderRadius.xl" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
</section>
</Fieldset>
</template>
<script>
export default {
inject: ['$preset']
};
</script>

26
apps/showcase/components/layout/designer/primitive/DesignColors.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<Fieldset legend="Colors" :toggleable="true">
<template v-for="(value, key) of $preset.primitive" :key="key">
<section v-if="key !== 'borderRadius'" class="flex justify-between items-center mb-4">
<div class="flex gap-2 items-center">
<span class="text-sm capitalize block w-20">{{ key }}</span>
<input :value="$preset.primitive[key]['500']" @input="onColorChange($event, key)" type="color" />
</div>
<DesignColorPalette :value="$preset.primitive[key]" />
</section>
</template>
</Fieldset>
</template>
<script>
import { palette } from '@primevue/themes';
export default {
inject: ['$preset'],
methods: {
onColorChange(event, color) {
this.$preset.primitive[color] = palette(event.target.value);
}
}
};
</script>

83
apps/showcase/components/layout/designer/semantic/DesignFormField.vue Normal file
View File

@ -0,0 +1,83 @@
<template>
<Fieldset legend="Form Field" :toggleable="true">
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Base</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Padding X</span>
<input v-model="$preset.semantic.formField.paddingX" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Padding Y</span>
<input v-model="$preset.semantic.formField.paddingY" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Border Radius</span>
<input v-model="$preset.semantic.formField.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Transition Duration</span>
<input v-model="$preset.semantic.formField.transitionDuration" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Small</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Padding X</span>
<input v-model="$preset.semantic.formField.sm.paddingX" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Padding Y</span>
<input v-model="$preset.semantic.formField.sm.paddingY" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Font Size</span>
<input v-model="$preset.semantic.formField.sm.fontSize" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div></div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Large</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Padding X</span>
<input v-model="$preset.semantic.formField.lg.paddingX" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Padding Y</span>
<input v-model="$preset.semantic.formField.lg.paddingY" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Font Size</span>
<input v-model="$preset.semantic.formField.lg.fontSize" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div></div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Focus Ring</div>
<section class="grid grid-cols-4 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Width</span>
<input v-model="$preset.semantic.formField.focusRing.width" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Style</span>
<input v-model="$preset.semantic.formField.focusRing.style" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$preset.semantic.formField.focusRing.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Offset</span>
<input v-model="$preset.semantic.formField.focusRing.offset" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
</section>
</Fieldset>
</template>
<script>
export default {
inject: ['$preset']
};
</script>

72
apps/showcase/components/layout/designer/semantic/DesignGeneral.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<Fieldset legend="General" :toggleable="true">
<section class="flex justify-between items-center mb-4">
<div class="flex gap-2 items-center">
<span class="text-sm">Primary</span>
<input :value="$preset.semantic.primary['500']" @input="onPrimaryColorChange($event)" type="color" />
</div>
<DesignColorPalette :value="$preset.semantic.primary" />
</section>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Transition Duration</span>
<input v-model="$preset.semantic.transitionDuration" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Disabled Opacity</span>
<input v-model="$preset.semantic.disabledOpacity" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Icon Size</span>
<input v-model="$preset.semantic.iconSize" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Anchor Gutter</span>
<input v-model="$preset.semantic.anchorGutter" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Border Radius</span>
<input v-model="$preset.semantic.content.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Mask Transition Duration</span>
<input v-model="$preset.semantic.mask.transitionDuration" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Focus Ring</div>
<section class="grid grid-cols-4 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Width</span>
<input v-model="$preset.semantic.focusRing.width" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Style</span>
<input v-model="$preset.semantic.focusRing.style" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$preset.semantic.focusRing.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Offset</span>
<input v-model="$preset.semantic.focusRing.offset" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
</section>
</Fieldset>
</template>
<script>
import { palette } from '@primevue/themes';
export default {
inject: ['$preset'],
methods: {
onPrimaryColorChange(event) {
this.$preset.semantic.primary = palette(event.target.value);
}
}
};
</script>

50
apps/showcase/components/layout/designer/semantic/DesignList.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<Fieldset legend="List" :toggleable="true">
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Container</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Padding</span>
<input v-model="$preset.semantic.list.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Gap</span>
<input v-model="$preset.semantic.list.gap" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Header Padding</span>
<input v-model="$preset.semantic.list.header.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Option</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Padding</span>
<input v-model="$preset.semantic.list.option.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Border Radius</span>
<input v-model="$preset.semantic.list.option.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Option Group</div>
<section class="grid grid-cols-4 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Padding</span>
<input v-model="$preset.semantic.list.optionGroup.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Font Weight</span>
<input v-model="$preset.semantic.list.optionGroup.fontWeight" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
</section>
</Fieldset>
</template>
<script>
export default {
inject: ['$preset']
};
</script>

65
apps/showcase/components/layout/designer/semantic/DesignNavigation.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<Fieldset legend="Navigation" :toggleable="true">
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">List</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Padding</span>
<input v-model="$preset.semantic.navigation.list.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Gap</span>
<input v-model="$preset.semantic.navigation.list.gap" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Item</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Padding</span>
<input v-model="$preset.semantic.navigation.item.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Border Radius</span>
<input v-model="$preset.semantic.navigation.item.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Gap</span>
<input v-model="$preset.semantic.navigation.item.gap" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Submenu Label</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Padding</span>
<input v-model="$preset.semantic.navigation.submenuLabel.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Font Weight</span>
<input v-model="$preset.semantic.navigation.submenuLabel.fontWeight" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Submenu Icon</div>
<section class="grid grid-cols-4 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Size</span>
<input v-model="$preset.semantic.navigation.submenuIcon.size" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>
</section>
</Fieldset>
</template>
<script>
export default {
inject: ['$preset']
};
</script>

68
apps/showcase/components/layout/designer/semantic/DesignOverlay.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<Fieldset legend="Overlay" :toggleable="true">
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Select</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Border Radius</span>
<input v-model="$preset.semantic.overlay.select.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Shadow</span>
<input v-model="$preset.semantic.overlay.select.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Popover</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Border Radius</span>
<input v-model="$preset.semantic.overlay.popover.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Padding</span>
<input v-model="$preset.semantic.overlay.popover.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Shadow</span>
<input v-model="$preset.semantic.overlay.popover.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Modal</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Border Radius</span>
<input v-model="$preset.semantic.overlay.modal.borderRadius" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Padding</span>
<input v-model="$preset.semantic.overlay.modal.padding" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Shadow</span>
<input v-model="$preset.semantic.overlay.modal.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Navigation</div>
<section class="grid grid-cols-4 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Shadow</span>
<input v-model="$preset.semantic.overlay.navigation.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>
</section>
</Fieldset>
</template>
<script>
export default {
inject: ['$preset']
};
</script>

23
apps/showcase/components/layout/designer/semantic/colorscheme/DesignCS.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<DesignCSCommon />
<DesignCSFormField />
<DesignCSOverlay />
<DesignCSList />
<DesignCSNavigation />
</template>
<script>
export default {
props: {
value: {
type: Object,
default: null
}
},
provide() {
return {
$colorScheme: this.value
};
}
};
</script>

111
apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSCommon.vue Normal file
View File

@ -0,0 +1,111 @@
<template>
<Fieldset legend="Common" :toggleable="true" class="mb-3">
<section class="flex justify-between items-center mb-4">
<div class="flex gap-2 items-center">
<span class="text-sm">Surface</span>
<input :value="$colorScheme.surface['500']" @input="onSurfaceColorChange($event)" type="color" />
</div>
<DesignColorPalette :value="$colorScheme.surface" />
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Typography</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Text Color</span>
<input v-model="$colorScheme.text.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Text Hover Color</span>
<input v-model="$colorScheme.text.hoverColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Text Muted Color</span>
<input v-model="$colorScheme.text.mutedColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Text Hover Muted Color</span>
<input v-model="$colorScheme.text.hoverMutedColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
</section>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Content Background</span>
<input v-model="$colorScheme.content.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Content Hover Background</span>
<input v-model="$colorScheme.content.hoverBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Content Border Color</span>
<input v-model="$colorScheme.content.borderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Content Color</span>
<input v-model="$colorScheme.content.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Content Hover Color</span>
<input v-model="$colorScheme.content.hoverColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Mask Background</span>
<input v-model="$colorScheme.mask.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Mask Color</span>
<input v-model="$colorScheme.mask.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Accent</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Primary</span>
<input v-model="$colorScheme.primary.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Primary Contrast</span>
<input v-model="$colorScheme.primary.contrastColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Primary Hover</span>
<input v-model="$colorScheme.primary.hoverColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Primary Active</span>
<input v-model="$colorScheme.primary.activeColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
</section>
<section class="grid grid-cols-4 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Highlight Background</span>
<input v-model="$colorScheme.highlight.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Highlight Color</span>
<input v-model="$colorScheme.highlight.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Highlight Focus Background</span>
<input v-model="$colorScheme.highlight.focusBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Highlight Focus Color</span>
<input v-model="$colorScheme.highlight.focusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
</section>
</Fieldset>
</template>
<script>
import { palette } from '@primevue/themes';
export default {
inject: ['$colorScheme'],
methods: {
onSurfaceColorChange(event) {
this.$colorScheme.surface = { ...{ 0: 'ffffff' }, ...palette(event.target.value) };
}
}
};
</script>

93
apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSFormField.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<Fieldset legend="Form Field" :toggleable="true" class="mb-3">
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Background</span>
<input v-model="$colorScheme.formField.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.formField.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Icon Color</span>
<input v-model="$colorScheme.formField.iconColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Shadow</span>
<input v-model="$colorScheme.formField.shadow" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Border Color</span>
<input v-model="$colorScheme.formField.borderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Hover Border Color</span>
<input v-model="$colorScheme.formField.hoverBorderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Focus Border Color</span>
<input v-model="$colorScheme.formField.focusBorderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Invalid Border Color</span>
<input v-model="$colorScheme.formField.invalidBorderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Disabled Background</span>
<input v-model="$colorScheme.formField.disabledBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Disabled Color</span>
<input v-model="$colorScheme.formField.disabledColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Placeholder Color</span>
<input v-model="$colorScheme.formField.placeholderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Invalid Placeholder Color</span>
<input v-model="$colorScheme.formField.invalidPlaceholderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Filled Background</span>
<input v-model="$colorScheme.formField.filledBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Filled Hover Background</span>
<input v-model="$colorScheme.formField.filledHoverBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Filled Focus Background</span>
<input v-model="$colorScheme.formField.filledFocusBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Float Label</div>
<section class="grid grid-cols-4 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.formField.floatLabelColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Focus Color</span>
<input v-model="$colorScheme.formField.floatLabelFocusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Active Color</span>
<input v-model="$colorScheme.formField.floatLabelActiveColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Invalid Color</span>
<input v-model="$colorScheme.formField.floatLabelInvalidColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
</section>
</Fieldset>
</template>
<script>
export default {
inject: ['$colorScheme']
};
</script>

65
apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSList.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<Fieldset legend="List" :toggleable="true" class="mb-3">
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Option</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Focus Background</span>
<input v-model="$colorScheme.list.option.focusBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Selected Background</span>
<input v-model="$colorScheme.list.option.selectedBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Selected Focus Background</span>
<input v-model="$colorScheme.list.option.selectedFocusBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.list.option.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Selected Color</span>
<input v-model="$colorScheme.list.option.selectedColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Selected Focus Color</span>
<input v-model="$colorScheme.list.option.selectedFocusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Option Icon</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.list.option.icon.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Focus Color</span>
<input v-model="$colorScheme.list.option.icon.focusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Option Group</div>
<section class="grid grid-cols-4 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Background</span>
<input v-model="$colorScheme.list.optionGroup.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.list.optionGroup.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>
</section>
</Fieldset>
</template>
<script>
export default {
inject: ['$colorScheme']
};
</script>

85
apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSNavigation.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<Fieldset legend="Navigation" :toggleable="true" class="mb-3">
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Item</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Focus Background</span>
<input v-model="$colorScheme.navigation.item.focusBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Acitve Background</span>
<input v-model="$colorScheme.navigation.item.focusBackground" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.navigation.item.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Focus Color</span>
<input v-model="$colorScheme.navigation.item.focusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Active Color</span>
<input v-model="$colorScheme.navigation.item.activeColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Item Icon</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.navigation.item.icon.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Focus Color</span>
<input v-model="$colorScheme.navigation.item.icon.focusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Active Color</span>
<input v-model="$colorScheme.navigation.item.icon.activeColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Submenu Label</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Background</span>
<input v-model="$colorScheme.navigation.submenuLabel.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.navigation.submenuLabel.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
<div class="flex flex-col gap-1"></div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Submenu Icon</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.navigation.submenuIcon.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Focus Color</span>
<input v-model="$colorScheme.navigation.submenuIcon.focusColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Active Color</span>
<input v-model="$colorScheme.navigation.submenuIcon.activeColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
</Fieldset>
</template>
<script>
export default {
inject: ['$colorScheme']
};
</script>

60
apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSOverlay.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<Fieldset legend="Overlay" :toggleable="true" class="mb-3">
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Select</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Background</span>
<input v-model="$colorScheme.overlay.select.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Border Color</span>
<input v-model="$colorScheme.overlay.select.borderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.overlay.select.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Popover</div>
<section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Background</span>
<input v-model="$colorScheme.overlay.popover.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Border Color</span>
<input v-model="$colorScheme.overlay.popover.borderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.overlay.popover.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Modal</div>
<section class="grid grid-cols-4 gap-2">
<div class="flex flex-col gap-1">
<span class="text-sm">Background</span>
<input v-model="$colorScheme.overlay.modal.background" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Border Color</span>
<input v-model="$colorScheme.overlay.modal.borderColor" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1">
<span class="text-sm">Color</span>
<input v-model="$colorScheme.overlay.modal.color" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg p-2 w-full" />
</div>
<div class="flex flex-col gap-1"></div>
</section>
</Fieldset>
</template>
<script>
export default {
inject: ['$colorScheme']
};
</script>

2
apps/showcase/doc/cascadeselect/pt/PTViewer.vue
View File

@ -1,6 +1,6 @@
<template>
<DocPTViewer :docs="docs">
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" showClear style="min-width: 14rem" placeholder="Select a City" />
</DocPTViewer>
</template>

2
apps/showcase/doc/chart/BasicDoc.vue
View File

@ -12,7 +12,7 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
import EventBus from '@/app/AppEventBus';
export default {
redrawListener: null,

2
apps/showcase/doc/chart/ComboDoc.vue
View File

@ -9,7 +9,7 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
import EventBus from '@/app/AppEventBus';
export default {
redrawListener: null,

2
apps/showcase/doc/chart/DoughnutDoc.vue
View File

@ -9,7 +9,7 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
import EventBus from '@/app/AppEventBus';
export default {
redrawListener: null,

2
apps/showcase/doc/chart/HorizontalBarDoc.vue
View File

@ -9,7 +9,7 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
import EventBus from '@/app/AppEventBus';
export default {
redrawListener: null,

2
apps/showcase/doc/chart/LineDoc.vue
View File

@ -9,7 +9,7 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
import EventBus from '@/app/AppEventBus';
export default {
redrawListener: null,

2
apps/showcase/doc/chart/LineStylesDoc.vue
View File

@ -9,7 +9,7 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
import EventBus from '@/app/AppEventBus';
export default {
redrawListener: null,

2
apps/showcase/doc/chart/MultiAxisDoc.vue
View File

@ -9,7 +9,7 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
import EventBus from '@/app/AppEventBus';
export default {
redrawListener: null,

2
apps/showcase/doc/chart/PieChartDoc.vue
View File

@ -9,7 +9,7 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
import EventBus from '@/app/AppEventBus';
export default {
redrawListener: null,

2
apps/showcase/doc/chart/PolarAreaDoc.vue
View File

@ -9,7 +9,7 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
import EventBus from '@/app/AppEventBus';
export default {
redrawListener: null,

2
apps/showcase/doc/chart/RadarDoc.vue
View File

@ -9,7 +9,7 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
import EventBus from '@/app/AppEventBus';
export default {
redrawListener: null,

2
apps/showcase/doc/chart/StackedBarDoc.vue
View File

@ -9,7 +9,7 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
import EventBus from '@/app/AppEventBus';
export default {
redrawListener: null,

2
apps/showcase/doc/chart/VerticalBarDoc.vue
View File

@ -9,7 +9,7 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
import EventBus from '@/app/AppEventBus';
export default {
redrawListener: null,

2
apps/showcase/doc/chart/pt/PTViewer.vue
View File

@ -5,8 +5,8 @@
</template>
<script>
import EventBus from '@/app/AppEventBus';
import { getPTOptions } from '@/components/doc/helpers';
import EventBus from '@/layouts/AppEventBus';
export default {
data() {

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

@ -16,26 +16,6 @@
"methodDescription": "Defines methods that can be accessed by the component's reference.",
"typeDescription": "Defines the custom types used by the module.",
"values": {
"PassThroughOptions": {
"relatedProp": "",
"props": [
{
"name": "mergeSections",
"optional": true,
"readonly": false,
"type": "boolean",
"default": ""
},
{
"name": "mergeProps",
"optional": true,
"readonly": false,
"type": "PassThroughMergePropsType",
"default": ""
}
],
"methods": []
},
"FormPassThroughMethodOptions": {
"description": "Custom passthrough(pt) option method.",
"relatedProp": "",
@ -386,9 +366,6 @@
"tokens": {
"description": "Define design tokens used by the component.",
"values": {
"PassThroughOptions": {
"props": []
},
"FormPassThroughMethodOptions": {
"description": "Custom passthrough(pt) option method.",
"props": []
@ -430,10 +407,6 @@
"types": {
"description": "Defines the custom types used by the module.",
"values": {
"PassThroughMergePropsType": {
"values": "(args: any) => undefined | boolean | undefined",
"description": "From primevue/passthrough/index.d.ts"
},
"FormPassThroughOptionType": {
"values": "FormPassThroughAttributes | (options: FormPassThroughMethodOptions) => undefined | string | null | undefined"
},
@ -500,26 +473,6 @@
"methodDescription": "Defines methods that can be accessed by the component's reference.",
"typeDescription": "Defines the custom types used by the module.",
"values": {
"PassThroughOptions": {
"relatedProp": "",
"props": [
{
"name": "mergeSections",
"optional": true,
"readonly": false,
"type": "boolean",
"default": ""
},
{
"name": "mergeProps",
"optional": true,
"readonly": false,
"type": "PassThroughMergePropsType",
"default": ""
}
],
"methods": []
},
"FormFieldPassThroughMethodOptions": {
"description": "Custom passthrough(pt) option method.",
"relatedProp": "",
@ -753,9 +706,6 @@
"tokens": {
"description": "Define design tokens used by the component.",
"values": {
"PassThroughOptions": {
"props": []
},
"FormFieldPassThroughMethodOptions": {
"description": "Custom passthrough(pt) option method.",
"props": []
@ -789,10 +739,6 @@
"types": {
"description": "Defines the custom types used by the module.",
"values": {
"PassThroughMergePropsType": {
"values": "(args: any) => undefined | boolean | undefined",
"description": "From primevue/passthrough/index.d.ts"
},
"FormFieldPassThroughOptionType": {
"values": "FormFieldPassThroughAttributes | (options: FormFieldPassThroughMethodOptions) => undefined | string | null | undefined"
},
@ -843,7 +789,58 @@
}
},
"forms/src": {},
"forms/src/resolvers": {},
"forms/src/resolvers/joi": {},
"forms/src/resolvers/superstruct": {},
"forms/src/resolvers/valibot": {},
"forms/src/resolvers/yup": {},
"forms/src/resolvers/zod": {},
"forms/src/types": {
"interfaces": {
"description": "Defines the custom interfaces used by the module.",
"eventDescription": "Defines the custom events used by the component's emit.",
"methodDescription": "Defines methods that can be accessed by the component's reference.",
"typeDescription": "Defines the custom types used by the module.",
"values": {
"PassThroughOptions": {
"relatedProp": "",
"props": [
{
"name": "mergeSections",
"optional": true,
"readonly": false,
"type": "boolean",
"default": ""
},
{
"name": "mergeProps",
"optional": true,
"readonly": false,
"type": "PassThroughMergePropsType",
"default": ""
}
],
"methods": []
}
}
},
"tokens": {
"description": "Define design tokens used by the component.",
"values": {
"PassThroughOptions": {
"props": []
}
}
},
"types": {
"description": "Defines the custom types used by the module.",
"values": {
"PassThroughMergePropsType": {
"values": "(args: any) => undefined | boolean | undefined",
"description": "From primevue/passthrough/index.d.ts"
}
}
}
},
"forms/src/useform": {
"functions": {
"description": "Defines the custom functions used by the module.",
@ -10868,6 +10865,19 @@
"returnType": "void",
"description": "Emitted when the value changes."
},
{
"name": "update:indeterminate",
"parameters": [
{
"name": "value",
"optional": false,
"type": "false",
"description": "New value."
}
],
"returnType": "void",
"description": "Emitted when the \"indeterminate\" changes."
},
{
"name": "value-change",
"parameters": [
@ -26223,6 +26233,12 @@
"parameters": [],
"returnType": "void",
"description": "Callback to invoke when drawer gets hidden."
},
{
"name": "after-hide",
"parameters": [],
"returnType": "void",
"description": "Callback to invoke after drawer is hidden."
}
]
}

6
apps/showcase/doc/forms/ResolversDoc.vue
View File

@ -1,10 +1,10 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
Validations are implemented the with <i>resolver</i> property. A custom resolver is responsible for handling the validation and returning an <i>errors</i> object with key-value pairs where key is the form field name and value is an array
Validations are implemented with the <i>resolver</i> property. A custom resolver is responsible for handling the validation and returning an <i>errors</i> object with key-value pairs where key is the form field name and value is an array
of error object data. For productivity, we recommend using a schema validation library instead of building your own custom validation logic. The forms library provide built-in resolvers for popular options including
<a href="https://zod.dev/">Zod</a>, <a href="https://github.com/jquense/yup">Yup</a>, <a href="https://joi.dev/">Joi</a>, <a href="https://valibot.dev/">Valibot</a>, and <a href="https://docs.superstructjs.org/">Superstruct</a> that can
be be imported from <i>@primevue/forms/resolvers/*</i> path.
be imported from <i>@primevue/forms/resolvers</i> path.
</p>
</DocSectionText>
<div class="card flex flex-col items-center gap-5">
@ -41,7 +41,7 @@
<Button type="submit" severity="secondary" label="Submit" />
</Form>
</div>
<DocSectionCode :code="code" :dependencies="{ zod: '3.23.8' }" />
<DocSectionCode :code="code" :dependencies="{ zod: '3.23.8', yup: '1.4.0', valibot: '0.42.1', superstruct: '2.0.2' }" />
</template>
<script>

2
apps/showcase/doc/multiselect/pt/PTViewer.vue
View File

@ -1,6 +1,6 @@
<template>
<DocPTViewer :docs="docs">
<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" placeholder="Select Cities" class="w-full md:w-80">
<MultiSelect v-model="selectedCities" :options="groupedCities" optionLabel="label" filter optionGroupLabel="label" optionGroupChildren="items" display="chip" showClear placeholder="Select Cities" class="w-full md:w-80">
<template #optiongroup="slotProps">
<div class="flex items-center">
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />

2
apps/showcase/doc/select/pt/PTViewer.vue
View File

@ -1,6 +1,6 @@
<template>
<DocPTViewer :docs="docs">
<Select v-model="selectedCity" filter :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select a City" class="w-full md:w-56">
<Select v-model="selectedCity" filter :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" showClear placeholder="Select a City" class="w-full md:w-56">
<template #optiongroup="slotProps">
<div class="flex items-center">
<img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`mr-2 flag flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />

2
apps/showcase/doc/treeselect/pt/PTViewer.vue
View File

@ -1,6 +1,6 @@
<template>
<DocPTViewer :docs="docs">
<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-80 w-full" />
<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" showClear placeholder="Select Item" class="md:w-80 w-full" />
</DocPTViewer>
</template>

11
apps/showcase/layouts/default.vue
View File

@ -9,6 +9,7 @@
<slot></slot>
</div>
</div>
<AppDesigner />
<AppFooter />
<Toast />
<Toast position="top-left" group="tl" />
@ -19,10 +20,6 @@
<script>
import { blockBodyScroll, unblockBodyScroll } from '@primeuix/utils/dom';
import AppFooter from './AppFooter.vue';
import AppMenu from './AppMenu.vue';
import AppNews from './AppNews.vue';
import AppTopBar from './AppTopBar.vue';
export default {
data() {
@ -77,12 +74,6 @@ export default {
}
];
}
},
components: {
AppTopBar,
AppMenu,
AppFooter,
AppNews
}
};
</script>

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

@ -20,8 +20,6 @@ import HeroSection from '@/components/landing/HeroSection.vue';
import TemplateSection from '@/components/landing/TemplateSection.vue';
import ThemeSection from '@/components/landing/ThemeSection.vue';
import UsersSection from '@/components/landing/UsersSection.vue';
import AppNews from '@/layouts/AppNews';
import AppTopBar from '@/layouts/AppTopBar.vue';
export default {
setup() {
@ -52,8 +50,6 @@ export default {
}
},
components: {
AppNews,
AppTopBar,
HeroSection,
ThemeSection,
BlockSection,

5
apps/showcase/pages/team/index.vue
View File

@ -52,11 +52,6 @@
<span class="mb-2 text-xl font-bold">Ümit Çelik</span>
<span>UI/UX Designer</span>
</div>
<div class="flex flex-col items-center flex-auto">
<img src="https://primefaces.org/cdn/primevue/images/team/toprak.jpg" class="rounded-full mb-6" alt="Toprak Koç" />
<span class="mb-2 text-xl font-bold">Toprak Koç</span>
<span>Front-End Developer</span>
</div>
<div class="flex flex-col items-center flex-auto">
<img src="https://primefaces.org/cdn/primevue/images/team/mehmet.jpg" class="rounded-full mb-6" alt="Mehmet Çetin" />
<span class="mb-2 text-xl font-bold">Mehmet Çetin</span>

26
apps/showcase/pages/uikit/index.vue
View File

@ -18,7 +18,7 @@
<div class="w-full md:w-6/12">
<div class="text-primary font-bold mb-2">UP-TO-DATE</div>
<div class="text-5xl font-bold mb-4">Best Features of Figma</div>
<p class="mb-4 text-lg">PrimeOne for Figma uses the latest powerful features like components, variants, auto layout, styles and interactive components. It'll always follow the best practices.</p>
<p class="mb-4 text-lg">PrimeOne for Figma uses the latest powerful features like components, variants, auto layout, styles, variables and interactive components. It'll always follow the best practices.</p>
<ul class="flex flex-wrap m-0 p-0 text-lg">
<li class="flex items-center w-6/12 p-4">
@ -31,7 +31,7 @@
</li>
<li class="flex items-center w-6/12 p-4">
<i class="pi pi-check-circle text-green-600 mr-2"></i>
<span class="font-bold">Styles</span>
<span class="font-bold">Variables and Styles</span>
</li>
<li class="flex items-center w-6/12 p-4">
<i class="pi pi-check-circle text-green-600 mr-2"></i>
@ -84,16 +84,16 @@
<div class="w-full md:w-6/12">
<div class="text-primary font-bold mb-2">DARK MODE</div>
<div class="text-5xl font-bold mb-4">Two Themes</div>
<p class="mb-4 text-lg">PrimeOne is designed based on Lara Blue Light and Lara Blue Dark themes. Easily change the themes of your designs using Figma's Swap Library feature.</p>
<p class="mb-4 text-lg">PrimeOne is designed based on Aura Light and Aura Dark themes. Easily change the themes of your designs using Figma's Swap Library feature or Tokens Studio Sets.</p>
<ul class="flex flex-wrap m-0 p-0 text-lg">
<li class="flex items-center w-6/12 p-4">
<i class="pi pi-check-circle text-green-600 mr-2"></i>
<span class="font-bold">Lara Light</span>
<span class="font-bold">Aura Light</span>
</li>
<li class="flex items-center w-6/12 p-4">
<i class="pi pi-check-circle text-green-600 mr-2"></i>
<span class="font-bold">Lara Dark</span>
<span class="font-bold">Aura Dark</span>
</li>
</ul>
</div>
@ -113,10 +113,14 @@
<i class="pi pi-check-circle text-green-600 mr-2"></i>
<span class="font-bold">Light and Dark Sets</span>
</li>
<li class="flex items-center w-full p-4">
<li class="flex items-center w-6/12 p-4">
<i class="pi pi-check-circle text-green-600 mr-2"></i>
<span class="font-bold">Well Documented</span>
</li>
<li class="flex items-center w-6/12 p-4">
<i class="pi pi-check-circle text-green-600 mr-2"></i>
<span class="font-bold">Primitive, Semantic and Component Tokens</span>
</li>
</ul>
</div>
<div class="w-full md:w-6/12">
@ -125,18 +129,22 @@
</div>
</div>
<div class="flex flex-col md:flex-row gap-6 md:gap-20 mb-8">
<div class="flex flex-col md:flex-row gap-6 md:gap-6 mb-8">
<a
href="https://www.figma.com/file/96Tql1EywmMtVlSFTkQ2MB/Preview-%7C-PrimeOne-%7C-2.2.0?type=design&node-id=806%3A36648&mode=design&t=CPR8n1g9WLc5D2Hs-1"
href="https://www.figma.com/design/G855HjuSyK8viJr0a5ZjRG/Preview-%7C%C2%A0PrimeOne-%7C-3.0.1?node-id=830-41631&t=m1MbOTTqKsBSRBLS-1"
class="p-8 w-full md:w-6/12 bg-white flex flex-col items-center border-2 border-transparent hover:border-primary transition-colors duration-300"
target="_blank"
rel="noopener noreferrer"
style="border-radius: 50px"
>
<span class="text-gray-900 text-4xl font-bold mb-8">Preview Light</span>
<img alt="Figma Light" src="https://primefaces.org/cdn/primevue/images/uikit/logo-figma-light.svg" class="w-16" />
</a>
<a
href="https://www.figma.com/file/ujRD6FFCWw1bE0h4wIebxl/Preview-%7C-Dark-%7C-PrimeOne-%7C-2.2.0?type=design&node-id=806%3A36648&mode=design&t=bG7aorZhOFIqX1qz-1"
href="https://www.figma.com/design/XBQzDl4vDOO0pyxEGYcICt/Preview-%7C%C2%A0Dark-%7C-PrimeOne-%7C-3.0.1?node-id=806-36648&t=7AME0kw905t3PVVY-1"
class="p-8 w-full md:w-6/12 bg-gray-900 flex flex-col items-center border-2 border-transparent hover:border-primary transition-colors duration-300"
target="_blank"
rel="noopener noreferrer"
style="border-radius: 50px"
>
<span class="text-white text-4xl font-bold mb-8">Preview Dark</span>

3
apps/showcase/plugins/app-state.js
View File

@ -13,7 +13,8 @@ const $appState = {
sourceType: 'options-api',
newsActive: false,
announcement: null,
storageKey: 'primevue'
storageKey: 'primevue',
designerActive: false
});
}
};

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

@ -6,7 +6,7 @@ module.exports = {
preflight: false
},
darkMode: ['selector', '[class="p-dark"]'],
content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/doc/**/*.{js,vue,ts}', './components/landing/**/*.{js,vue,ts}', './components/template/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'],
content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'],
plugins: [primeui],
theme: {
screens: {

4
packages/primevue/src/drawer/Drawer.d.ts vendored
View File

@ -263,6 +263,10 @@ export interface DrawerEmitsOptions {
* Callback to invoke when drawer gets hidden.
*/
hide(): void;
/**
* Callback to invoke after drawer is hidden.
*/
'after-hide'(): void;
}
export declare type DrawerEmits = EmitFn<DrawerEmitsOptions>;

16
packages/primevue/src/multiselect/MultiSelect.spec.js
View File

@ -34,7 +34,7 @@ describe('MultiSelect.vue', () => {
expect(wrapper.find('.p-multiselect-label.p-placeholder').text()).toBe('Select Cities');
expect(wrapper.find('.p-multiselect-panel').exists()).toBe(false);
await wrapper.vm.onContainerClick();
await wrapper.vm.$refs.container.click();
expect(wrapper.findAll('li.p-multiselect-option').length).toBe(5);
expect(wrapper.findAll('li.p-multiselect-option')[0].attributes()['aria-label']).toBe('New York');
@ -47,7 +47,7 @@ describe('MultiSelect.vue', () => {
expect(wrapper.emitted()['update:modelValue'][0]).toEqual([[wrapper.vm.options[0]]]);
await wrapper.setProps({ modelValue: [wrapper.vm.options[0]] });
await wrapper.vm.onContainerClick();
await wrapper.vm.$refs.container.click();
expect(wrapper.findAll('li.p-multiselect-option')[0].attributes()['data-p-selected']).toBe('true');
expect(wrapper.find('.p-multiselect-label').text()).toBe('New York');
@ -61,7 +61,7 @@ describe('MultiSelect.vue', () => {
expect(wrapper.emitted()['update:modelValue'][0]).toEqual([[wrapper.vm.options[0], wrapper.vm.options[1]]]);
await wrapper.setProps({ modelValue: [wrapper.vm.options[0], wrapper.vm.options[1]] });
await wrapper.vm.onContainerClick();
await wrapper.vm.$refs.container.click();
expect(wrapper.findAll('li.p-multiselect-option')[0].attributes()['data-p-selected']).toBe('true');
expect(wrapper.findAll('li.p-multiselect-option')[1].attributes()['data-p-selected']).toBe('true');
@ -106,7 +106,7 @@ describe('MultiSelect.vue', () => {
filterIcon: 'pi pi-discord'
});
await wrapper.vm.onContainerClick();
await wrapper.vm.$refs.container.click();
const icon = wrapper.find('.p-multiselect-filter-container [data-pc-section="filtericon"]');
@ -123,7 +123,7 @@ describe('MultiSelect.vue', () => {
modelValue: wrapper.vm.options
});
await wrapper.vm.onContainerClick();
await wrapper.vm.$refs.container.click();
wrapper.findAll('.p-checkbox-icon').forEach((icon) => {
expect(icon.classes()).toContain('pi-discord');
@ -172,7 +172,7 @@ describe('MultiSelect.vue', () => {
optionGroupChildren: 'items'
});
await wrapper.vm.onContainerClick();
await wrapper.vm.$refs.container.click();
expect(wrapper.find('.p-multiselect-option-group').exists()).toBe(true);
});
@ -185,7 +185,7 @@ describe('MultiSelect.vue', () => {
autoFilterFocus: true
});
await wrapper.vm.onContainerClick();
await wrapper.vm.$refs.container.click();
const input = await wrapper.find('input.p-multiselect-filter');
input.setValue('Ber');
@ -203,7 +203,7 @@ describe('MultiSelect.vue', () => {
autoFilterFocus: true
});
await wrapper.vm.onContainerClick();
await wrapper.vm.$refs.container.click();
const input = await wrapper.find('input.p-multiselect-filter');
input.value = 'Ber';

14
packages/primevue/src/paginator/style/PaginatorStyle.js
View File

@ -91,17 +91,11 @@ const theme = ({ dt }) => `
max-width: ${dt('paginator.jump.to.page.input.max.width')};
}
.p-paginator-first:dir(rtl) {
order: 2;
}
.p-paginator-prev:dir(rtl) {
order: 1;
}
.p-paginator-next:dir(rtl) {
order: -1;
}
.p-paginator-first:dir(rtl),
.p-paginator-prev:dir(rtl),
.p-paginator-next:dir(rtl),
.p-paginator-last:dir(rtl) {
order: -2;
transform: rotate(180deg);
}
`;

2
packages/primevue/src/panelmenu/style/PanelMenuStyle.js
View File

@ -61,7 +61,7 @@ const theme = ({ dt }) => `
color: ${dt('panelmenu.submenu.icon.color')};
}
.p-panelmenu-header:not(.p-panelmenu-header-active) .p-panelmenu-submenu-icon:dir(rtl) {
.p-panelmenu-header.p-panelmenu-header-active .p-panelmenu-submenu-icon:dir(rtl) {
transform: rotate(-180deg);
}

2
packages/primevue/src/slider/Slider.vue
View File

@ -180,12 +180,10 @@ export default {
}
event.currentTarget.focus();
event.preventDefault();
},
onDrag(event) {
if (this.dragging) {
this.setValue(event);
event.preventDefault();
}
},
onDragEnd(event) {

1
packages/primevue/src/timeline/style/TimelineStyle.js
View File

@ -5,6 +5,7 @@ const theme = ({ dt }) => `
display: flex;
flex-grow: 1;
flex-direction: column;
direction: ltr;
}
.p-timeline-left .p-timeline-event-opposite {

2479
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff