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

Merge branch 'master' of https://github.com/primefaces/primevue

pull/6798/head
tugcekucukoglu 2024-11-14 12:21:50 +03:00
parent 1d5309afc1 5a03589ef4
commit bd113c752b
2 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -156,8 +156,9 @@
</template> </template>
<script> <script>
import EventBus from '@/app/AppEventBus';
import { NoirPreset } from '@/themes/app-theme.js'; import { NoirPreset } from '@/themes/app-theme.js';
import { $t, updatePreset, usePreset } from '@primevue/themes'; import { $dt, $t, updatePreset, usePreset } from '@primevue/themes';
import Aura from '@primevue/themes/aura'; import Aura from '@primevue/themes/aura';
import Lara from '@primevue/themes/lara'; import Lara from '@primevue/themes/lara';
import Material from '@primevue/themes/material'; import Material from '@primevue/themes/material';
@ -371,6 +372,7 @@ export default {
apply() { apply() {
this.saveTheme(); this.saveTheme();
updatePreset(this.preset); updatePreset(this.preset);
EventBus.emit('theme-palette-change');
}, },
download() { download() {
const basePreset = this.$appState.preset; const basePreset = this.$appState.preset;
@ -510,7 +512,7 @@ app.mount("#app");
} }
}, },
camelCaseToDotCase(name) { camelCaseToDotCase(name) {
return '{' + name.replace(/([a-z])([A-Z])/g, '$1.$2').toLowerCase() + '}'; return name.replace(/([a-z])([A-Z])/g, '$1.$2').toLowerCase();
}, },
generateACTokens(parentPath, obj) { generateACTokens(parentPath, obj) {
for (let key in obj) { for (let key in obj) {
@ -524,7 +526,12 @@ app.mount("#app");
if (typeof obj[key] === 'object') { if (typeof obj[key] === 'object') {
this.generateACTokens(parentPath ? parentPath + '.' + key : key, obj[key]); this.generateACTokens(parentPath ? parentPath + '.' + key : key, obj[key]);
} else { } else {
this.acTokens.push(this.camelCaseToDotCase(parentPath ? parentPath + '.' + key : key)); const regex = /\.\d+$/;
const tokenName = this.camelCaseToDotCase(parentPath ? parentPath + '.' + key : key);
const tokenValue = $dt(tokenName).value;
const isColor = tokenName.includes('color') || tokenName.includes('background') || regex.test(tokenName);
this.acTokens.push({ token: tokenName, label: '{' + tokenName + '}', variable: $dt(tokenName).variable, value: tokenValue, isColor: isColor });
} }
} }
} }

22
apps/showcase/components/layout/designer/DesignTokenField.vue
View File

@ -9,6 +9,7 @@
:suggestions="items" :suggestions="items"
@complete="search" @complete="search"
unstyled unstyled
optionLabel="label"
:showEmptyMessage="false" :showEmptyMessage="false"
:pt="{ :pt="{
pcInputText: { pcInputText: {
@ -16,11 +17,22 @@
}, },
overlay: 'border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-950 shadow-2 rounded-md', 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', listContainer: 'max-h-40 overflow-auto',
list: 'm-0 py-2 px-0 list-none', list: 'm-0 py-2 px-2 list-none',
option: 'cursor-pointer py-1 px-2 text-sm text-surface-700 dark:text-white/80 data-[p-focus=true]:bg-surface-100 data-[p-focus=true]:dark:bg-surface-800' loader: 'hidden',
option: 'cursor-pointer py-1 text-sm text-surface-700 dark:text-white/80 data-[p-focus=true]:bg-surface-100 data-[p-focus=true]:dark:bg-surface-800 rounded-md'
}" }"
@option-select="onOptionSelect" @option-select="onOptionSelect"
/> >
<template #option="slotProps">
<div v-tooltip.left="slotProps.option.value" class="flex items-center justify-between gap-4 px-2">
<span>{{ slotProps.option.token }}</span>
<div v-if="slotProps.option.isColor" class="border border-surface-200 dark:border-surface-700 w-4 h-4 rounded-full" :style="{ backgroundColor: slotProps.option.variable }"></div>
<div v-else class="text-xs max-w-16 text-ellipsis whitespace-nowrap overflow-hidden">
{{ slotProps.option.value }}
</div>
</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-3 w-6 h-6 rounded-md border border-surface-300 dark:border-surface-600" :style="{ backgroundColor: previewColor }"></div>
</div> </div>
</div> </div>
@ -68,9 +80,9 @@ export default {
const query = event.query; const query = event.query;
if (query.startsWith('{')) { if (query.startsWith('{')) {
this.items = this.$acTokens.filter((t) => t.startsWith(query)); this.items = this.$acTokens.filter((t) => t.label.startsWith(query));
} else { } else {
this.items = null; this.items = [];
} }
} }
}, },