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

Visual cosmetics

pull/6798/head
Cagatay Civici 2024-11-13 14:35:07 +03:00
parent 0572139f0f
commit 71f2e0b229
8 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
apps/showcase/components/layout/AppDesigner.vue
View File

@ -10,11 +10,12 @@
</TabList> </TabList>
<TabPanels class="!px-0"> <TabPanels class="!px-0">
<TabPanel value="0"> <TabPanel value="0">
<div class="text-lg font-semibold mb-4">Choose a Theme to Get Started</div> <div class="text-lg font-semibold mb-2">Choose a Theme to Get Started</div>
<div class="flex flex-col gap-4"> <span class="block text-muted-color leading-6 mb-4">Begin by selecting a built-in theme as a foundation, continue editing your current theme, or import a Figma tokens file.</span>
<div class="flex flex-col">
<div class="flex flex-col gap-4 border border-surface-200 dark:border-surface-700 rounded-md p-4"> <div class="flex flex-col gap-4 border border-surface-200 dark:border-surface-700 rounded-md p-4">
<span class="font-semibold">Built-in Themes</span> <span class="font-semibold">Base Theme</span>
<span class="text-muted-color">Four alternatives to choose from.</span> <span class="text-muted-color">Variety of built-in themes with distinct characteristics.</span>
<SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presetOptions" optionLabel="label" optionValue="value" :allowEmpty="false" /> <SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presetOptions" optionLabel="label" optionValue="value" :allowEmpty="false" />
</div> </div>
<Divider>OR</Divider> <Divider>OR</Divider>
@ -36,7 +37,7 @@
</TabPanel> </TabPanel>
<TabPanel value="1"> <TabPanel value="1">
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<form @keydown="onKeyDown"> <form @keydown="onKeyDown" class="flex flex-col gap-3">
<DesignBorderRadius /> <DesignBorderRadius />
<DesignColors /> <DesignColors />
</form> </form>
@ -48,7 +49,7 @@
<AccordionHeader>Common</AccordionHeader> <AccordionHeader>Common</AccordionHeader>
<AccordionContent> <AccordionContent>
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<form @keydown="onKeyDown"> <form @keydown="onKeyDown" class="flex flex-col gap-3">
<DesignGeneral /> <DesignGeneral />
<DesignFormField /> <DesignFormField />
<DesignList /> <DesignList />
@ -84,7 +85,9 @@
</AccordionPanel> </AccordionPanel>
</Accordion> </Accordion>
</TabPanel> </TabPanel>
<TabPanel value="3">Component tokens are not supported by the Visual Editor at the moment.</TabPanel> <TabPanel value="3">
<span class="leading-6">Component tokens are not supported by the Visual Editor at the moment.</span>
</TabPanel>
<TabPanel value="4"> <TabPanel value="4">
<span class="leading-6">Extend the theming system with your own design tokens e.g. <span class="font-medium">accent.color</span>. Do not use curly braces in the name field.</span> <span class="leading-6">Extend the theming system with your own design tokens e.g. <span class="font-medium">accent.color</span>. Do not use curly braces in the name field.</span>
<ul class="flex flex-col gap-4 list-none p-0 mx-0 my-4"> <ul class="flex flex-col gap-4 list-none p-0 mx-0 my-4">
@ -101,7 +104,7 @@
<button <button
type="button" type="button"
@click="removeToken(index)" @click="removeToken(index)"
class="cursor-pointer inline-flex items-center justify-center ms-auto w-8 h-8 rounded-full bg-red-50 hover:bg-red-100 text-red-600 dark:bg-red-400/10 dark:hover:bg-red-400/20 dark:text-red-400 transition-colors duration-200 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-red-600 focus-visible:dark:outline-red-400" class="cursor-pointer inline-flex items-center justify-center ms-auto w-8 h-8 rounded-full bg-red-50 hover:bg-red-100 text-red-600 dark:bg-red-400/10 dark:hover:bg-red-400/20 dark:text-red-400 transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-red-600 focus:dark:outline-red-400"
> >
<i class="pi pi-times" /> <i class="pi pi-times" />
</button> </button>
@ -112,14 +115,15 @@
<button <button
type="button" type="button"
@click="addToken" @click="addToken"
class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-950 focus-visible:dark:outline-white" class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
> >
Add New Add New
</button> </button>
<button <button
v-if="customTokens.length"
type="button" type="button"
@click="saveTokens" @click="saveTokens"
class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-950 focus-visible:dark:outline-white" class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
> >
Save Save
</button> </button>
@ -134,14 +138,14 @@
type="button" type="button"
@click="download" @click="download"
icon="pi pi-download" icon="pi pi-download"
class="px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-700 hover:border-gray-800 dark:hover:border-gray-500 text-black dark:text-white rounded-md font-medium cursor-pointer transition-colors duration-200 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-950 focus-visible:dark:outline-white" class="px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-700 hover:border-gray-800 dark:hover:border-gray-500 text-black dark:text-white rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
> >
Download Download
</button> </button>
<button <button
type="button" type="button"
@click="apply" @click="apply"
class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-950 focus-visible:dark:outline-white" class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
> >
Apply Apply
</button> </button>
@ -274,6 +278,7 @@ app.mount("#app");
if (defaultTheme.preset) { if (defaultTheme.preset) {
this.preset = defaultTheme.preset; this.preset = defaultTheme.preset;
usePreset(this.preset);
} }
if (defaultTheme.customTokens) { if (defaultTheme.customTokens) {

2
apps/showcase/components/layout/designer/primitive/DesignBorderRadius.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<Fieldset legend="Rounded" :toggleable="true"> <Fieldset legend="Rounded" :toggleable="true">
<section class="grid grid-cols-4 mb-3 gap-2"> <section class="grid grid-cols-4 gap-2">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$preset.primitive.borderRadius.none" label="None" /> <DesignTokenField v-model="$preset.primitive.borderRadius.none" label="None" />
</div> </div>

2
apps/showcase/components/layout/designer/semantic/colorscheme/DesignCS.vue
View File

@ -1,9 +1,11 @@
<template> <template>
<div class="flex flex-col gap-3">
<DesignCSCommon /> <DesignCSCommon />
<DesignCSFormField /> <DesignCSFormField />
<DesignCSOverlay /> <DesignCSOverlay />
<DesignCSList /> <DesignCSList />
<DesignCSNavigation /> <DesignCSNavigation />
</div>
</template> </template>
<script> <script>

2
apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSCommon.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Fieldset legend="Common" :toggleable="true" class="mb-3"> <Fieldset legend="Common" :toggleable="true">
<section class="flex justify-between items-center mb-4"> <section class="flex justify-between items-center mb-4">
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
<span class="text-sm">Surface</span> <span class="text-sm">Surface</span>

2
apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSFormField.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Fieldset legend="Form Field" :toggleable="true" class="mb-3"> <Fieldset legend="Form Field" :toggleable="true">
<section class="grid grid-cols-4 mb-3 gap-2"> <section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<DesignTokenField v-model="$colorScheme.formField.background" label="BG" type="color" /> <DesignTokenField v-model="$colorScheme.formField.background" label="BG" type="color" />

2
apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSList.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Fieldset legend="List" :toggleable="true" class="mb-3"> <Fieldset legend="List" :toggleable="true">
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Option</div> <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"> <section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">

2
apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSNavigation.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Fieldset legend="Navigation" :toggleable="true" class="mb-3"> <Fieldset legend="Navigation" :toggleable="true">
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Item</div> <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"> <section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">

2
apps/showcase/components/layout/designer/semantic/colorscheme/DesignCSOverlay.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Fieldset legend="Overlay" :toggleable="true" class="mb-3"> <Fieldset legend="Overlay" :toggleable="true">
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0">Select</div> <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"> <section class="grid grid-cols-4 mb-3 gap-2">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">