118 lines
3.3 KiB
TypeScript
118 lines
3.3 KiB
TypeScript
import clsx from 'clsx'
|
|
import { computed } from 'vue'
|
|
import { defineComponent } from 'vue'
|
|
import { MdCheck } from 'oh-vue-icons/icons'
|
|
import { addIcons, OhVueIcon } from 'oh-vue-icons'
|
|
addIcons(MdCheck)
|
|
export default defineComponent({
|
|
name: 'NativeColorPicker',
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
colorList: {
|
|
type: Array<string>
|
|
},
|
|
class: {
|
|
type: String
|
|
},
|
|
transparent: {
|
|
type: Boolean
|
|
},
|
|
firstColor: {
|
|
type: String
|
|
},
|
|
size: {
|
|
type: Number,
|
|
default: 20
|
|
}
|
|
},
|
|
emits: {
|
|
'update:value': (_value: string) => true
|
|
},
|
|
setup(props, context) {
|
|
const firstColor = props.value
|
|
const colorList = computed(() => {
|
|
let list = [
|
|
'#ffffff',
|
|
'#000000',
|
|
'#FA9B3F',
|
|
'#333333',
|
|
'#6D7278',
|
|
'#D8D8D8',
|
|
'#0091FF',
|
|
'#B620E0',
|
|
'#F31260'
|
|
]
|
|
if (props.colorList) {
|
|
list = props.colorList
|
|
}
|
|
if (props.transparent) {
|
|
list.push('transparent')
|
|
}
|
|
if (!list.includes(firstColor)) {
|
|
list.unshift(firstColor)
|
|
}
|
|
return list
|
|
})
|
|
return () => (
|
|
<div class={clsx('flex items-center gap-x-2 ', props.class)}>
|
|
{colorList.value.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
onClick={() => context.emit('update:value', item)}
|
|
class="text-[12px] cursor-pointer w-[20px] h-[20px] flex items-center justify-center shadow-[0_0_2px_#999] rounded-full"
|
|
style={{
|
|
width: props.size + 'px',
|
|
height: props.size + 'px',
|
|
backgroundColor: item === 'transparent' ? '' : item,
|
|
backgroundImage:
|
|
item === 'transparent'
|
|
? `linear-gradient(45deg, rgba(0, 0, 0, 0.4) 25%, white 25%, transparent 75%,rgba(0, 0, 0, 0.4) 75%),
|
|
linear-gradient(45deg,rgba(0, 0, 0, 0.4) 25%, white 25%, transparent 75%, rgba(0, 0, 0, 0.4) 75%)`
|
|
: '',
|
|
backgroundPosition: item === 'transparent' ? '0 0, 2px 2px' : '',
|
|
backgroundSize: item === 'transparent' ? '4px 4px' : ''
|
|
}}
|
|
>
|
|
{/* <Checkmark16Filled
|
|
class="text-[#888]"
|
|
: class="props.modelValue === item ? '' : 'hidden'"
|
|
: style="{
|
|
color: selectColor
|
|
}"
|
|
>
|
|
</Checkmark16Filled> */}
|
|
{props.value === item && (
|
|
<OhVueIcon class="text-[#888]" name={MdCheck.name}></OhVueIcon>
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
<div
|
|
class="text-[12px] cursor-pointer shadow-[0_0_2px_#999] rounded-full relative"
|
|
style={{
|
|
width: props.size + 'px',
|
|
height: props.size + 'px'
|
|
}}
|
|
>
|
|
<div
|
|
class="w-full h-full rounded-full cursor-pointer"
|
|
style="background: conic-gradient(#dd0010, yellow, green, #0091ff, red)"
|
|
>
|
|
<input
|
|
onInput={(e: any) => {
|
|
context.emit('update:value', e?.target.value)
|
|
}}
|
|
ref="inputRef"
|
|
type="color"
|
|
style="opacity: 0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
})
|