mirror of https://github.com/nocodb/nocodb
Raju Udava
10 months ago
committed by
GitHub
21 changed files with 381 additions and 114 deletions
@ -0,0 +1,104 @@
|
||||
<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> |
||||
@ -0,0 +1,61 @@
|
||||
<script lang="ts" setup> |
||||
import { Slider } from '@ckpack/vue-color' |
||||
import tinycolor from 'tinycolor2' |
||||
|
||||
interface Props { |
||||
modelValue?: any |
||||
mode?: 'hsl' | 'hsv' |
||||
} |
||||
|
||||
const props = withDefaults(defineProps<Props>(), { |
||||
modelValue: '#3069FE', |
||||
mode: 'hsv', |
||||
}) |
||||
|
||||
const emit = defineEmits(['update:modelValue', 'input']) |
||||
|
||||
const picked = computed({ |
||||
get: () => tinycolor(props.modelValue || '#3069FE').toHsv() as any, |
||||
set: (val) => { |
||||
if (val) { |
||||
emit('update:modelValue', val[props.mode] || null) |
||||
emit('input', val[props.mode] || null) |
||||
} |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<Slider |
||||
v-model="picked" |
||||
class="nc-color-slider-wrapper min-w-[200px]" |
||||
:style="{ |
||||
'--nc-color-slider-pointer': tinycolor(`hsv(${picked.h ?? 199}, 100%, 100%)`).toHexString(), |
||||
}" |
||||
/> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
.nc-color-slider-wrapper { |
||||
&.vc-slider { |
||||
@apply !w-full; |
||||
} |
||||
:deep(.vc-slider-swatches) { |
||||
@apply hidden; |
||||
} |
||||
|
||||
:deep(.vc-slider-hue-warp) { |
||||
@apply h-1.5; |
||||
.vc-hue { |
||||
@apply rounded-lg; |
||||
} |
||||
.vc-hue-pointer { |
||||
top: -3px !important; |
||||
} |
||||
.vc-hue-picker { |
||||
background-color: white; |
||||
box-shadow: 0 0 0 3px var(--nc-color-slider-pointer) !important; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue