76 lines
3.2 KiB
Vue
76 lines
3.2 KiB
Vue
<template>
|
|
<Fieldset legend="General" :toggleable="true">
|
|
<section class="flex justify-between items-center mb-4">
|
|
<div class="flex gap-2 items-center">
|
|
<span class="text-sm">Primary</span>
|
|
<input :defaultValue="primaryColor" @input="onPrimaryColorChange($event)" type="color" :title="$preset.semantic.primary['500']" />
|
|
</div>
|
|
<DesignColorPalette :value="$preset.semantic.primary" />
|
|
</section>
|
|
<section class="grid grid-cols-4 mb-3 gap-2">
|
|
<div class="flex flex-col gap-1">
|
|
<DesignTokenField v-model="$preset.semantic.transitionDuration" label="Transition Duration" />
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<DesignTokenField v-model="$preset.semantic.disabledOpacity" label="Disabled Opacity" />
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<DesignTokenField v-model="$preset.semantic.iconSize" label="Icon Size" />
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<DesignTokenField v-model="$preset.semantic.anchorGutter" label="Anchor Gutter" />
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<DesignTokenField v-model="$preset.semantic.content.borderRadius" label="Border Radius" />
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<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>
|
|
</section>
|
|
|
|
<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">
|
|
<DesignTokenField v-model="$preset.semantic.focusRing.width" label="Width" />
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<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">
|
|
<DesignTokenField v-model="$preset.semantic.focusRing.offset" label="Offset" />
|
|
</div>
|
|
</section>
|
|
</Fieldset>
|
|
</template>
|
|
|
|
<script>
|
|
import { isObject } from '@primeuix/utils';
|
|
import { $dt, palette } from '@primevue/themes';
|
|
|
|
export default {
|
|
inject: ['$preset'],
|
|
data() {
|
|
return {
|
|
primaryColor: this.getColor('{primary.500}')
|
|
};
|
|
},
|
|
methods: {
|
|
onPrimaryColorChange(event) {
|
|
this.$preset.semantic.primary = palette(event.target.value);
|
|
},
|
|
getColor(color) {
|
|
const colorScheme = this.$appState.darkTheme ? 'light' : 'dark';
|
|
const token = color?.replace(/{|}/g, '');
|
|
const tokenValue = $dt(token)?.value;
|
|
|
|
return (isObject(tokenValue) ? tokenValue[colorScheme]?.value : tokenValue) ?? color;
|
|
}
|
|
}
|
|
};
|
|
</script>
|