mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.6 KiB
104 lines
2.6 KiB
<script lang="ts" setup> |
|
import tinycolor from 'tinycolor2' |
|
|
|
import { NcProjectType, baseIconColors } from '#imports' |
|
|
|
const props = withDefaults( |
|
defineProps<{ |
|
type?: NcProjectType | string |
|
modelValue?: string |
|
size?: 'small' | 'medium' | 'large' | 'xlarge' |
|
readonly?: boolean |
|
iconClass?: string |
|
}>(), |
|
{ |
|
type: NcProjectType.DB, |
|
size: 'small', |
|
}, |
|
) |
|
|
|
const emit = defineEmits(['update:modelValue']) |
|
|
|
const { modelValue } = toRefs(props) |
|
const { size, readonly } = props |
|
|
|
const isOpen = ref(false) |
|
|
|
const colorRef = ref(tinycolor(modelValue.value).isValid() ? modelValue.value : baseIconColors[0]) |
|
|
|
const updateIconColor = (color: string) => { |
|
const tcolor = tinycolor(color) |
|
if (tcolor.isValid()) { |
|
colorRef.value = color |
|
} |
|
} |
|
|
|
const onClick = (e: Event) => { |
|
if (readonly) return |
|
|
|
e.stopPropagation() |
|
|
|
isOpen.value = !isOpen.value |
|
} |
|
|
|
watch( |
|
isOpen, |
|
(value) => { |
|
if (!value && colorRef.value !== modelValue.value) { |
|
emit('update:modelValue', colorRef.value) |
|
} |
|
}, |
|
{ |
|
immediate: true, |
|
}, |
|
) |
|
</script> |
|
|
|
<template> |
|
<div> |
|
<a-dropdown v-model:visible="isOpen" :trigger="['click']" :disabled="readonly"> |
|
<div |
|
class="flex flex-row justify-center items-center select-none rounded-md nc-base-icon-picker-trigger" |
|
:class="{ |
|
'hover:bg-gray-500 hover:bg-opacity-15 cursor-pointer': !readonly, |
|
'bg-gray-500 bg-opacity-15': isOpen, |
|
'h-6 w-6 text-lg': size === 'small', |
|
'h-8 w-8 text-xl': size === 'medium', |
|
'h-10 w-10 text-2xl': size === 'large', |
|
'h-14 w-16 text-5xl': size === 'xlarge', |
|
}" |
|
@click="onClick" |
|
> |
|
<NcTooltip placement="topLeft" :disabled="readonly"> |
|
<template #title> {{ $t('tooltip.changeIconColour') }} </template> |
|
|
|
<div> |
|
<GeneralProjectIcon :color="colorRef" :type="type" /> |
|
</div> |
|
</NcTooltip> |
|
</div> |
|
|
|
<template #overlay> |
|
<div |
|
class="nc-base-icon-color-picker-dropdown relative bg-white rounded-lg border-1 border-gray-200 overflow-hidden max-w-[342px]" |
|
> |
|
<div class="flex justify-start"> |
|
<GeneralColorPicker |
|
:model-value="colorRef" |
|
:colors="baseIconColors" |
|
:is-new-design="true" |
|
class="nc-base-icon-color-picker" |
|
@input="updateIconColor" |
|
/> |
|
</div> |
|
</div> |
|
</template> |
|
</a-dropdown> |
|
</div> |
|
</template> |
|
|
|
<style lang="scss" scoped> |
|
.nc-base-icon-color-picker-dropdown { |
|
box-shadow: 0px 8px 8px -4px #0000000a, 0px 20px 24px -4px #0000001a; |
|
} |
|
</style>
|
|
|