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

Add switchable prop to token field

pull/7048/head
Cagatay Civici 2025-01-04 13:31:50 +03:00
parent 81966b9b39
commit 20b4de467c
3 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/showcase/components/layout/designer/editor/DesignTokenField.vue
View File

@ -2,7 +2,9 @@
<div class="group">
<div class="flex justify-between justify-items-center">
<label :for="inputId" class="text-xs text-zinc-700 dark:text-white/70 block capitalize text-ellipsis overflow-hidden w-full whitespace-nowrap mb-px" :title="label">{{ label }}</label>
<button type="button" @click="transfer"><i class="pi pi-sort-alt !text-xs text-zinc-700 dark:text-white/70 hidden group-hover:block animate-fadein" title="Transfer between color scheme and common"></i></button>
<button v-if="switchable" type="button" @click="transfer">
<i class="pi pi-sort-alt !text-xs text-zinc-500 dark:text-white/50 hidden group-hover:block animate-fadein" title="Transfer between color scheme and common"></i>
</button>
</div>
<div :id="id" class="relative">
<AutoComplete
@ -16,7 +18,7 @@
:showEmptyMessage="false"
:pt="{
pcInputText: {
root: ['border border-surface-300 text-zinc-950 dark:text-white dark:border-surface-600 rounded-lg py-2 px-2 w-full text-xs', { 'pr-8': type === 'color' }]
root: ['border border-surface-300 text-zinc-950 dark:text-white dark:border-surface-600 rounded-lg py-2 px-2 w-full text-xs', { 'pr-6': type === 'color' }]
},
overlay: 'border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-950 shadow-2 rounded-md',
listContainer: 'max-h-40 overflow-auto',
@ -36,7 +38,7 @@
</div>
</template>
</AutoComplete>
<div v-if="type === 'color'" class="absolute right-[4px] top-1/2 -mt-3 w-6 h-6 rounded-md border border-surface-300 dark:border-surface-600" :style="{ backgroundColor: previewColor }"></div>
<div v-if="type === 'color'" class="absolute right-[4px] top-1/2 -mt-2 w-4 h-4 rounded-full border border-surface-300 dark:border-surface-600" :style="{ backgroundColor: previewColor }"></div>
</div>
</div>
</template>
@ -69,6 +71,10 @@ export default {
path: {
type: String,
default: undefined
},
switchable: {
type: Boolean,
default: false
}
},
data() {

2
apps/showcase/components/layout/designer/editor/component/DesignComponent.vue
View File

@ -27,7 +27,7 @@
</TabPanel>
</TabPanels>
</Tabs>
<span v-else class="block py-3"> There are no design tokens per color scheme. </span>
<span v-else class="block py-3">There are no design tokens defined per color scheme.</span>
</Fieldset>
</section>
</template>

4
apps/showcase/components/layout/designer/editor/component/DesignComponentSection.vue
View File

@ -3,11 +3,11 @@
<div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0 capitalize">{{ sectionName }}</div>
<div class="grid grid-cols-4 gap-x-2 gap-y-3">
<template v-for="(t_value, t_name) in tokens" :key="t_name">
<DesignTokenField v-if="!isObject(t_value)" v-model="tokens[t_name]" :label="camelCaseToSpaces(t_name)" :type="isColor(t_name) ? 'color' : null" :componentKey="componentKey" :path="path + '.' + t_name" />
<DesignTokenField v-if="!isObject(t_value)" v-model="tokens[t_name]" :label="camelCaseToSpaces(t_name)" :type="isColor(t_name) ? 'color' : null" :componentKey="componentKey" :path="path + '.' + t_name" switchable />
</template>
</div>
<template v-if="hasNestedTokens">
<DesignComponentSection v-for="(n_value, n_name) in nestedTokens" :key="n_name" :componentKey="componentKey" :path="path + '.' + n_name" class="mt-3" />
<DesignComponentSection v-for="(n_value, n_name) in nestedTokens" :key="n_name" :componentKey="componentKey" :path="path + '.' + n_name" class="mt-3" switchable />
</template>
</section>
</template>