Add base tab
Cagatay Civici
parent
0f4ddcc417
commit
94b225ba1f
|
|
@ -13,17 +13,23 @@
|
|||
<div class="flex flex-col gap-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="text-muted-color">Four alternatives to choose from.</span>
|
||||
<SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presetOptions" optionLabel="label" optionValue="value" :allowEmpty="false" />
|
||||
</div>
|
||||
<Divider>OR</Divider>
|
||||
<div class="flex flex-col gap-4 border border-surface-200 dark:border-surface-700 rounded-md p-4">
|
||||
<span class="font-semibold">Import Figma Tokens</span>
|
||||
<input type="file" />
|
||||
<div class="flex flex-col gap-4 border border-surface-200 dark:border-surface-700 rounded-md p-4 items-start">
|
||||
<span class="font-semibold">Load Theme</span>
|
||||
<span class="text-muted-color">Continue editing the theme files stored locally.</span>
|
||||
<Button label="Restore from local storage" class="!px-3 !py-2" severity="secondary" @click="loadFromLocalStorage" />
|
||||
</div>
|
||||
<Divider>OR</Divider>
|
||||
<div class="flex flex-col gap-4 border border-surface-200 dark:border-surface-700 rounded-md p-4 items-start">
|
||||
<span class="font-semibold">Saved Theme</span>
|
||||
<Button icon="pi pi-upload" label="Load" class="!px-3 !py-2" severity="secondary" />
|
||||
<div class="flex flex-col gap-4 border border-surface-200 dark:border-surface-700 rounded-md p-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="font-semibold">Import Figma Tokens </span>
|
||||
<Tag value="PRO" severity="contrast"></Tag>
|
||||
</div>
|
||||
<span class="text-muted-color leading-6">Export the token studio json file and import to the Visual Editor. This feature is currently under development.</span>
|
||||
<FileUpload mode="basic" disabled pt:root:class="!justify-start" />
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
|
@ -120,18 +126,9 @@ export default {
|
|||
};
|
||||
},
|
||||
mounted() {
|
||||
const savedTheme = localStorage.getItem(this.$appState.designerKey);
|
||||
|
||||
if (savedTheme) {
|
||||
this.preset = JSON.parse(savedTheme).defaultTheme;
|
||||
setTimeout(() => {
|
||||
usePreset(this.preset);
|
||||
}, 2000);
|
||||
} else {
|
||||
this.preset.semantic.primary = this.preset.primitive.emerald;
|
||||
this.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.slate };
|
||||
this.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.zinc };
|
||||
}
|
||||
this.preset.semantic.primary = this.preset.primitive.emerald;
|
||||
this.preset.semantic.colorScheme.light.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.slate };
|
||||
this.preset.semantic.colorScheme.dark.surface = { ...{ 0: '#ffffff' }, ...this.preset.primitive.zinc };
|
||||
},
|
||||
methods: {
|
||||
apply() {
|
||||
|
|
@ -194,6 +191,14 @@ app.mount("#app");
|
|||
};
|
||||
|
||||
localStorage.setItem(this.$appState.designerKey, JSON.stringify(themeRecord));
|
||||
},
|
||||
loadFromLocalStorage() {
|
||||
const savedTheme = localStorage.getItem(this.$appState.designerKey);
|
||||
|
||||
if (savedTheme) {
|
||||
this.preset = JSON.parse(savedTheme).defaultTheme;
|
||||
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Theme loaded to Designer', life: 3000 });
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,22 @@
|
|||
<template>
|
||||
<span class="text-sm">{{ label }}</span>
|
||||
<div class="relative">
|
||||
<input :value="modelValue" @input="onInput" type="text" :class="['border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full', { 'pr-8': type === 'color' }]" />
|
||||
<AutoComplete
|
||||
:modelValue="modelValue"
|
||||
@input="onInput"
|
||||
:suggestions="items"
|
||||
@complete="search"
|
||||
unstyled
|
||||
:pt="{
|
||||
pcInputText: {
|
||||
root: ['border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full', { 'pr-8': type === 'color' }]
|
||||
},
|
||||
overlay: 'bg-surface-0 dark:bg-surface-950 shadow-2 rounded-md',
|
||||
listContainer: 'max-h-40 overflow-auto',
|
||||
list: 'm-0 py-2 px-0 list-none',
|
||||
option: 'p-2'
|
||||
}"
|
||||
/>
|
||||
<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>
|
||||
</template>
|
||||
|
|
@ -9,6 +24,32 @@
|
|||
<script>
|
||||
import { $dt } from '@primevue/themes';
|
||||
|
||||
const tokens = [
|
||||
'{primary.50}',
|
||||
'{primary.100}',
|
||||
'{primary.200}',
|
||||
'{primary.300}',
|
||||
'{primary.400}',
|
||||
'{primary.500}',
|
||||
'{primary.600}',
|
||||
'{primary.700}',
|
||||
'{primary.800}',
|
||||
'{primary.900}',
|
||||
'{primary.950}',
|
||||
'{surface.0}',
|
||||
'{surface.50}',
|
||||
'{surface.100}',
|
||||
'{surface.200}',
|
||||
'{surface.300}',
|
||||
'{surface.400}',
|
||||
'{surface.500}',
|
||||
'{surface.600}',
|
||||
'{surface.700}',
|
||||
'{surface.800}',
|
||||
'{surface.900}',
|
||||
'{surface.950}'
|
||||
];
|
||||
|
||||
export default {
|
||||
emits: ['update:modelValue'],
|
||||
props: {
|
||||
|
|
@ -25,9 +66,26 @@ export default {
|
|||
default: undefined
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onInput(event) {
|
||||
console.log(event.target.value);
|
||||
this.$emit('update:modelValue', event.target.value);
|
||||
},
|
||||
search(event) {
|
||||
const query = event.query;
|
||||
|
||||
if (query.startsWith('{')) {
|
||||
const tokenQuery = query.substring(1);
|
||||
|
||||
this.items = tokens.filter((t) => t.startsWith(tokenQuery));
|
||||
} else {
|
||||
this.items = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -2,28 +2,22 @@
|
|||
<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" />
|
||||
<DesignTokenField v-model="$preset.primitive.borderRadius.none" label="None" />
|
||||
</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" />
|
||||
<DesignTokenField v-model="$preset.primitive.borderRadius.xs" label="Extra Small" />
|
||||
</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" />
|
||||
<DesignTokenField v-model="$preset.primitive.borderRadius.sm" label="Small" />
|
||||
</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" />
|
||||
<DesignTokenField v-model="$preset.primitive.borderRadius.md" label="Medium" />
|
||||
</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" />
|
||||
<DesignTokenField v-model="$preset.primitive.borderRadius.lg" label="Large" />
|
||||
</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" />
|
||||
<DesignTokenField v-model="$preset.primitive.borderRadius.xl" label="Extra Large" />
|
||||
</div>
|
||||
</section>
|
||||
</Fieldset>
|
||||
|
|
|
|||
|
|
@ -9,28 +9,22 @@
|
|||
</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" />
|
||||
<DesignTokenField v-model="$preset.semantic.transitionDuration" label="Transition Duration" />
|
||||
</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" />
|
||||
<DesignTokenField v-model="$preset.semantic.disabledOpacity" label="Disabled Opacity" />
|
||||
</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" />
|
||||
<DesignTokenField v-model="$preset.semantic.iconSize" label="Icon Size" />
|
||||
</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" />
|
||||
<DesignTokenField v-model="$preset.semantic.anchorGutter" label="Anchor Gutter" />
|
||||
</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" />
|
||||
<DesignTokenField v-model="$preset.semantic.content.borderRadius" label="Border Radius" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="text-sm">Mask Transition Dur.</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" />
|
||||
<DesignTokenField v-model="$preset.semantic.mask.transitionDuration" label="Mask Transition Dur." />
|
||||
</div>
|
||||
<div class="flex flex-col gap-1"></div>
|
||||
<div class="flex flex-col gap-1"></div>
|
||||
|
|
@ -39,19 +33,16 @@
|
|||
<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" />
|
||||
<DesignTokenField v-model="$preset.semantic.focusRing.width" label="Width" />
|
||||
</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" />
|
||||
<DesignTokenField v-model="$preset.semantic.focusRing.style" label="Style" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<DesignTokenField v-model="$preset.semantic.focusRing.color" label="Color" type="color" />
|
||||
</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" />
|
||||
<DesignTokenField v-model="$preset.semantic.focusRing.offset" label="Offset" />
|
||||
</div>
|
||||
</section>
|
||||
</Fieldset>
|
||||
|
|
|
|||
Loading…
Reference in New Issue