Cagatay Civici
GitHub
commit
f455896625
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" blockScroll @after-show="onShow" @after-hide="onHide">
|
||||
<Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" @after-show="onShow" @after-hide="onHide">
|
||||
<template #container="{ closeCallback }">
|
||||
<div class="flex items-center justify-between p-5">
|
||||
<div class="flex items-center gap-2">
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div v-if="!$appState.designer.verified">
|
||||
<span class="block leading-6 mb-4"
|
||||
>Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to code, cloud storage, and migration assistant. <NuxtLink to="/designer" class="doc-link">Discover</NuxtLink> more about the
|
||||
Theme Designer by visiting the detailed <NuxtLink to="/designer/guide" class="doc-link">documentation</NuxtLink></span
|
||||
Theme Designer by visiting the detailed <NuxtLink to="/designer/guide" class="doc-link">documentation</NuxtLink>.</span
|
||||
>
|
||||
<span class="block leading-6 mb-4"
|
||||
>A license can be purchased from <a href="https://primefaces.org/store/designer.xhtml" class="doc-link" rel="noopener noreferrer">PrimeStore</a>, if you do not have a license key, you are still able to experience the Designer in trial
|
||||
|
|
@ -63,7 +63,15 @@
|
|||
</button>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<div class="group flex items-center gap-2 relative">
|
||||
<input v-model="theme.t_name" type="text" class="w-24 text-sm px-2 text-center pr-4" maxlength="100" @blur="renameTheme(theme)" />
|
||||
<input
|
||||
v-model="theme.t_name"
|
||||
type="text"
|
||||
:class="['w-24 text-sm px-2 text-center pr-4', { 'bg-red-50 dark:bg-red-500/30': !theme.t_name }]"
|
||||
maxlength="100"
|
||||
@blur="renameTheme(theme)"
|
||||
@keydown.enter="onThemeNameEnterKey($event)"
|
||||
@keydown.escape="onThemeNameEscape($event)"
|
||||
/>
|
||||
<i class="hidden group-hover:block pi pi-pencil !text-xs absolute top-50 text-muted-color" style="right: 2px"></i>
|
||||
</div>
|
||||
<span class="text-muted-color text-xs">{{ formatTimestamp(theme.t_last_updated) }}</span>
|
||||
|
|
@ -73,7 +81,7 @@
|
|||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<Menu ref="themeMenu" :model="themeOptions" :popup="true" />
|
||||
<Menu ref="themeMenu" :model="themeOptions" :popup="true" @show="onMenuShow" @hide="onMenuHide" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -82,6 +90,7 @@ import { usePreset } from '@primeuix/themes';
|
|||
import Aura from '@primeuix/themes/aura';
|
||||
|
||||
export default {
|
||||
scrollListener: null,
|
||||
setup() {
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
|
||||
|
|
@ -90,6 +99,9 @@ export default {
|
|||
};
|
||||
},
|
||||
inject: ['designerService'],
|
||||
beforeUnmount() {
|
||||
this.unbindScrollListener();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
licenseKey: null,
|
||||
|
|
@ -236,21 +248,30 @@ export default {
|
|||
}
|
||||
},
|
||||
async renameTheme(theme) {
|
||||
const { error } = await $fetch(this.designerApiUrl + '/theme/rename/' + theme.t_key, {
|
||||
method: 'PATCH',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'X-CSRF-Token': this.$appState.designer.csrfToken
|
||||
},
|
||||
body: {
|
||||
name: theme.t_name
|
||||
}
|
||||
});
|
||||
if (theme.t_name && theme.t_name.trim().length) {
|
||||
const { error } = await $fetch(this.designerApiUrl + '/theme/rename/' + theme.t_key, {
|
||||
method: 'PATCH',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'X-CSRF-Token': this.$appState.designer.csrfToken
|
||||
},
|
||||
body: {
|
||||
name: theme.t_name
|
||||
}
|
||||
});
|
||||
|
||||
if (error) {
|
||||
this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
|
||||
if (error) {
|
||||
this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
|
||||
}
|
||||
}
|
||||
},
|
||||
onThemeNameEnterKey(event) {
|
||||
event.target.blur();
|
||||
},
|
||||
onThemeNameEscape(event) {
|
||||
event.target.blur();
|
||||
event.stopPropagation();
|
||||
},
|
||||
async deleteTheme(theme) {
|
||||
const { error } = await $fetch(this.designerApiUrl + '/theme/delete/' + theme.t_key, {
|
||||
method: 'DELETE',
|
||||
|
|
@ -299,6 +320,27 @@ export default {
|
|||
this.currentTheme = theme;
|
||||
this.$refs.themeMenu.toggle(event);
|
||||
},
|
||||
onMenuShow() {
|
||||
this.bindScrollListener();
|
||||
},
|
||||
onMenuHide() {
|
||||
this.unbindScrollListener();
|
||||
},
|
||||
bindScrollListener() {
|
||||
if (!this.scrollListener) {
|
||||
this.scrollListener = () => {
|
||||
this.$refs.themeMenu.hide();
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', this.scrollListener);
|
||||
}
|
||||
},
|
||||
unbindScrollListener() {
|
||||
if (this.scrollListener) {
|
||||
window.removeEventListener('scroll', this.scrollListener);
|
||||
this.scrollListener = null;
|
||||
}
|
||||
},
|
||||
abbrThemeName(theme) {
|
||||
return theme.t_name ? theme.t_name.substring(0, 2) : 'UT';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
unstyled
|
||||
optionLabel="label"
|
||||
:showEmptyMessage="false"
|
||||
appendTo="self"
|
||||
:pt="{
|
||||
pcInputText: {
|
||||
root: [
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="flex flex-col gap-3">
|
||||
<template v-if="hasCommonTokens">
|
||||
<template v-for="(value, name) in tokens" :key="name">
|
||||
<DesignComponentSection v-if="name !== 'colorScheme'" :componentKey="componentKey" :path="name" />
|
||||
<DesignComponentSection v-if="name !== 'colorScheme' && name !== 'css'" :componentKey="componentKey" :path="name" />
|
||||
</template>
|
||||
</template>
|
||||
<span v-else class="block py-3">There are no design tokens</span>
|
||||
|
|
@ -54,7 +54,11 @@ export default {
|
|||
return this.tokens.colorScheme != undefined;
|
||||
},
|
||||
hasCommonTokens() {
|
||||
return Object.keys(this.tokens).filter((name) => name !== 'colorScheme').length > 0;
|
||||
return (
|
||||
Object.keys(this.tokens).filter((name) => {
|
||||
return name !== 'colorScheme' && name !== 'css';
|
||||
}).length > 0
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<div class="leading-6 text-muted-color mb-4">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.</div>
|
||||
<div class="leading-6 text-muted-color mb-4">
|
||||
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, and ensure that the name does not match any built-in tokens.
|
||||
</div>
|
||||
<ul v-if="tokens?.length" class="flex flex-col gap-4 list-none p-0 mx-0 mb-4">
|
||||
<li v-for="(token, index) of tokens" :key="index" class="first:border-t border-b border-surface-200 dark:border-surface-700 py-2">
|
||||
<div class="flex items-center gap-4">
|
||||
|
|
|
|||
Loading…
Reference in New Issue