eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: color swatch input style

Browse Source
This commit is contained in:
Jannat Patel
2025-07-25 18:31:46 +05:30
parent d8ce88ab57
commit ddd9089130
1 changed files with 41 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
frontend/src/components/Controls/ColorSwatches.vue
View File

@@ -6,40 +6,43 @@
<Popover placement="bottom" class="!block"> <Popover placement="bottom" class="!block">
<template #target="{ togglePopover, isOpen }"> <template #target="{ togglePopover, isOpen }">
<div class="space-y-2"> <div class="space-y-2">
<FormControl <FormControl
type="text" type="text"
autocomplete="off" autocomplete="off"
class="w-full" class="w-full"
:placeholder="__('Set Color')" :placeholder="__('Set Color')"
@focus="togglePopover" @focus="togglePopover"
:modelValue="modelValue" :modelValue="modelValue"
@update:modelValue="(val: string) => emit('update:modelValue', val)" @update:modelValue="(val: string) => emit('update:modelValue', val)"
> >
<template #prefix> <template #prefix>
<div <div
class="size-4 rounded-full" class="size-4 rounded-full"
:style=" :style="
modelValue modelValue
? { ? {
backgroundColor: backgroundColor:
theme.backgroundColor[modelValue.toLowerCase()][400], theme.backgroundColor[modelValue.toLowerCase()][400],
} }
: {} : {}
" "
> >
<Palette v-if="!modelValue" class="size-4 stroke-1.5 text-ink-gray-5" /> <Palette
</div> v-if="!modelValue"
</template> class="size-4 stroke-1.5 text-ink-gray-5"
<template #suffix> />
<Button variant="ghost"> </div>
<X </template>
class="size-3 text-ink-gray-5" <template #suffix>
@click="emit('update:modelValue', null)" <Button variant="ghost">
/> <X
</Button> class="size-3 text-ink-gray-5"
</template> @click="emit('update:modelValue', null)"
</FormControl> />
</div> </Button>
</template>
</FormControl>
</div>
</template> </template>
<template #body="{ close }"> <template #body="{ close }">
<div class="rounded-lg bg-surface-white p-3 border w-fit mt-2"> <div class="rounded-lg bg-surface-white p-3 border w-fit mt-2">
@@ -67,9 +70,9 @@
</div> </div>
</template> </template>
</Popover> </Popover>
<div class="text-sm text-ink-gray-5 mt-2"> <div class="text-sm text-ink-gray-5 mt-2">
{{ description }} {{ description }}
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -83,7 +86,7 @@ const emit = defineEmits(['update:modelValue', 'change'])
const props = defineProps<{ const props = defineProps<{
modelValue: string modelValue: string
label: string label: string
description?: string description?: string
}>() }>()
const colors = computed(() => { const colors = computed(() => {