mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-18 05:58:07 +01:00
feat(ColorPicker): implement component (#2670)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Alex
GitHub
@@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
const color = ref('#00C16A')
|
||||
|
||||
const chip = computed(() => ({ backgroundColor: color.value }))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UPopover>
|
||||
<UButton label="Choose color" color="neutral" variant="outline">
|
||||
<template #leading>
|
||||
<span :style="chip" class="size-3 rounded-full" />
|
||||
</template>
|
||||
</UButton>
|
||||
|
||||
<template #content>
|
||||
<UColorPicker v-model="color" class="p-2" />
|
||||
</template>
|
||||
</UPopover>
|
||||
</template>
|
||||
@@ -39,7 +39,7 @@ export const collections = {
|
||||
type: 'page',
|
||||
source: [{
|
||||
include: '**/*'
|
||||
}, pro!],
|
||||
}, pro!].filter(Boolean),
|
||||
schema
|
||||
})
|
||||
}
|
||||
|
||||
150
docs/content/3.components/color-picker.md
Normal file
150
docs/content/3.components/color-picker.md
Normal file
@@ -0,0 +1,150 @@
|
||||
---
|
||||
title: ColorPicker
|
||||
description: A component to select a color.
|
||||
links:
|
||||
- label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/ColorPicker.vue
|
||||
navigation.badge: New
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
Use the `v-model` directive to control the value of the ColorPicker.
|
||||
|
||||
::component-code
|
||||
---
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
modelValue: '#00C16A'
|
||||
---
|
||||
::
|
||||
|
||||
Use the `default-value` prop to set the initial value when you do not need to control its state.
|
||||
|
||||
::component-code
|
||||
---
|
||||
ignore:
|
||||
- defaultValue
|
||||
props:
|
||||
defaultValue: '#00BCD4'
|
||||
---
|
||||
::
|
||||
|
||||
### RGB Format
|
||||
|
||||
Use the `format` prop to set `rgb` value of the ColorPicker.
|
||||
|
||||
::component-code
|
||||
---
|
||||
ignore:
|
||||
- modelValue
|
||||
- format
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
format: rgb
|
||||
modelValue: 'rgb(0, 193, 106)'
|
||||
---
|
||||
::
|
||||
|
||||
### HSL Format
|
||||
|
||||
Use the `format` prop to set `hsl` value of the ColorPicker.
|
||||
|
||||
::component-code
|
||||
---
|
||||
ignore:
|
||||
- modelValue
|
||||
- format
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
format: hsl
|
||||
modelValue: 'hsl(153, 100%, 37.8%)'
|
||||
---
|
||||
::
|
||||
|
||||
### HWB Format
|
||||
|
||||
Use the `format` prop to set `hwb` value of the ColorPicker.
|
||||
|
||||
::component-code
|
||||
---
|
||||
ignore:
|
||||
- modelValue
|
||||
- format
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
format: hwb
|
||||
modelValue: 'hwb(150, 0%, 24%)'
|
||||
---
|
||||
::
|
||||
|
||||
### Throttle
|
||||
|
||||
Use the `throttle` prop to set the throttle value of the ColorPicker.
|
||||
|
||||
::component-code
|
||||
---
|
||||
ignore:
|
||||
- modelValue
|
||||
external:
|
||||
- modelValue
|
||||
props:
|
||||
throttle: 100
|
||||
modelValue: '#00C16A'
|
||||
---
|
||||
::
|
||||
|
||||
### Size
|
||||
|
||||
Use the `size` prop to set the size of the ColorPicker.
|
||||
|
||||
::component-code
|
||||
---
|
||||
props:
|
||||
size: xl
|
||||
---
|
||||
::
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` prop to disable the ColorPicker.
|
||||
|
||||
::component-code
|
||||
---
|
||||
props:
|
||||
disabled: true
|
||||
---
|
||||
::
|
||||
|
||||
## Examples
|
||||
|
||||
### As a Color chooser
|
||||
|
||||
Use a [Button](/components/button) and a [Popover](/components/popover) component to create a color chooser.
|
||||
|
||||
::component-example
|
||||
---
|
||||
name: 'color-picker-chooser-example'
|
||||
---
|
||||
::
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
:component-props
|
||||
|
||||
### Emits
|
||||
|
||||
:component-emits
|
||||
|
||||
## Theme
|
||||
|
||||
:component-theme
|
||||
@@ -85,9 +85,11 @@
|
||||
"@tailwindcss/postcss": "4.0.0-beta.5",
|
||||
"@tailwindcss/vite": "4.0.0-beta.5",
|
||||
"@tanstack/vue-table": "^8.20.5",
|
||||
"@types/color": "^4.2.0",
|
||||
"@unhead/vue": "^1.11.13",
|
||||
"@vueuse/core": "^12.0.0",
|
||||
"@vueuse/integrations": "^12.0.0",
|
||||
"color": "^4.2.3",
|
||||
"consola": "^3.2.3",
|
||||
"defu": "^6.1.4",
|
||||
"embla-carousel-auto-height": "^8.5.1",
|
||||
|
||||
@@ -29,6 +29,7 @@ const components = [
|
||||
'checkbox',
|
||||
'chip',
|
||||
'collapsible',
|
||||
'color-picker',
|
||||
'context-menu',
|
||||
'command-palette',
|
||||
'drawer',
|
||||
|
||||
26
playground/app/pages/components/color-picker.vue
Normal file
26
playground/app/pages/components/color-picker.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
const colorHex = ref('#9C27B0')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span :style="{ backgroundColor: colorHex }" class="inline-flex w-5 h-5 rounded" />
|
||||
<code class="font-mono">{{ colorHex }}</code>
|
||||
</div>
|
||||
<USeparator />
|
||||
<div class="flex justify-between gap-2">
|
||||
<UButton @click="colorHex = '#9C27B0'">
|
||||
Purple
|
||||
</UButton>
|
||||
<UButton @click="colorHex = '#8BC34A'">
|
||||
Lime
|
||||
</UButton>
|
||||
<UButton @click="colorHex = '#FF6347'">
|
||||
Tomato
|
||||
</UButton>
|
||||
</div>
|
||||
<USeparator />
|
||||
<UColorPicker v-model="colorHex" @update:model-value="() => console.log('model update')" />
|
||||
</div>
|
||||
</template>
|
||||
31
pnpm-lock.yaml
generated
31
pnpm-lock.yaml
generated
@@ -51,6 +51,9 @@ importers:
|
||||
'@tanstack/vue-table':
|
||||
specifier: ^8.20.5
|
||||
version: 8.20.5(vue@3.5.13(typescript@5.6.3))
|
||||
'@types/color':
|
||||
specifier: ^4.2.0
|
||||
version: 4.2.0
|
||||
'@unhead/vue':
|
||||
specifier: ^1.11.13
|
||||
version: 1.11.13(vue@3.5.13(typescript@5.6.3))
|
||||
@@ -60,6 +63,9 @@ importers:
|
||||
'@vueuse/integrations':
|
||||
specifier: ^12.0.0
|
||||
version: 12.0.0(change-case@5.4.4)(fuse.js@7.0.0)(typescript@5.6.3)
|
||||
color:
|
||||
specifier: ^4.2.3
|
||||
version: 4.2.3
|
||||
consola:
|
||||
specifier: ^3.2.3
|
||||
version: 3.2.3
|
||||
@@ -2230,6 +2236,15 @@ packages:
|
||||
resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
|
||||
engines: {node: '>=10.13.0'}
|
||||
|
||||
'@types/color-convert@2.0.4':
|
||||
resolution: {integrity: sha512-Ub1MmDdyZ7mX//g25uBAoH/mWGd9swVbt8BseymnaE18SU4po/PjmCrHxqIIRjBo3hV/vh1KGr0eMxUhp+t+dQ==}
|
||||
|
||||
'@types/color-name@1.1.5':
|
||||
resolution: {integrity: sha512-j2K5UJqGTxeesj6oQuGpMgifpT5k9HprgQd8D1Y0lOFqKHl3PJu5GMeS4Y5EgjS55AE6OQxf8mPED9uaGbf4Cg==}
|
||||
|
||||
'@types/color@4.2.0':
|
||||
resolution: {integrity: sha512-6+xrIRImMtGAL2X3qYkd02Mgs+gFGs+WsK0b7VVMaO4mYRISwyTjcqNrO0mNSmYEoq++rSLDB2F5HDNmqfOe+A==}
|
||||
|
||||
'@types/debug@4.1.12':
|
||||
resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
|
||||
|
||||
@@ -9464,6 +9479,16 @@ snapshots:
|
||||
|
||||
'@trysound/sax@0.2.0': {}
|
||||
|
||||
'@types/color-convert@2.0.4':
|
||||
dependencies:
|
||||
'@types/color-name': 1.1.5
|
||||
|
||||
'@types/color-name@1.1.5': {}
|
||||
|
||||
'@types/color@4.2.0':
|
||||
dependencies:
|
||||
'@types/color-convert': 2.0.4
|
||||
|
||||
'@types/debug@4.1.12':
|
||||
dependencies:
|
||||
'@types/ms': 0.7.34
|
||||
@@ -10498,7 +10523,6 @@ snapshots:
|
||||
dependencies:
|
||||
color-name: 1.1.4
|
||||
simple-swizzle: 0.2.2
|
||||
optional: true
|
||||
|
||||
color-support@1.1.3: {}
|
||||
|
||||
@@ -10506,7 +10530,6 @@ snapshots:
|
||||
dependencies:
|
||||
color-convert: 2.0.1
|
||||
color-string: 1.9.1
|
||||
optional: true
|
||||
|
||||
colord@2.9.3: {}
|
||||
|
||||
@@ -12129,8 +12152,7 @@ snapshots:
|
||||
|
||||
is-arrayish@0.2.1: {}
|
||||
|
||||
is-arrayish@0.3.2:
|
||||
optional: true
|
||||
is-arrayish@0.3.2: {}
|
||||
|
||||
is-binary-path@2.1.0:
|
||||
dependencies:
|
||||
@@ -14736,7 +14758,6 @@ snapshots:
|
||||
simple-swizzle@0.2.2:
|
||||
dependencies:
|
||||
is-arrayish: 0.3.2
|
||||
optional: true
|
||||
|
||||
sirv@2.0.4:
|
||||
dependencies:
|
||||
|
||||
271
src/runtime/components/ColorPicker.vue
Normal file
271
src/runtime/components/ColorPicker.vue
Normal file
@@ -0,0 +1,271 @@
|
||||
<script lang="ts">
|
||||
import { tv, type VariantProps } from 'tailwind-variants'
|
||||
import type { MaybeRefOrGetter } from '@vueuse/shared'
|
||||
import type { AppConfig } from '@nuxt/schema'
|
||||
import _appConfig from '#build/app.config'
|
||||
import theme from '#build/ui/color-picker'
|
||||
|
||||
const appConfig = _appConfig as AppConfig & { ui: { colorPicker: Partial<typeof theme> } }
|
||||
|
||||
const colorPicker = tv({ extend: tv(theme), ...(appConfig.ui?.colorPicker || {}) })
|
||||
|
||||
type ColorPickerVariants = VariantProps<typeof colorPicker>
|
||||
|
||||
type HSVColor = {
|
||||
h: number
|
||||
s: number
|
||||
v: number
|
||||
}
|
||||
|
||||
export type ColorPickerProps = {
|
||||
/**
|
||||
* The element or component this component should render as.
|
||||
* @defaultValue 'div'
|
||||
*/
|
||||
as?: any
|
||||
/**
|
||||
* Throttle time in ms for the color picker
|
||||
*/
|
||||
throttle?: number
|
||||
/**
|
||||
* Disable the color picker
|
||||
*/
|
||||
disabled?: boolean
|
||||
/**
|
||||
* The default value of the color picker
|
||||
*/
|
||||
defaultValue?: string
|
||||
/**
|
||||
* Format of the color
|
||||
* @defaultValue 'hex'
|
||||
*/
|
||||
format?: 'hex' | 'rgb' | 'hsl' | 'hwb'
|
||||
size?: ColorPickerVariants['size']
|
||||
class?: any
|
||||
ui?: Partial<typeof colorPicker.slots>
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, computed, toValue } from 'vue'
|
||||
import { Primitive } from 'radix-vue'
|
||||
import { useEventListener, useElementBounding, watchThrottled, watchPausable } from '@vueuse/core'
|
||||
import { isClient } from '@vueuse/shared'
|
||||
import Color from 'color'
|
||||
|
||||
const props = withDefaults(defineProps<ColorPickerProps>(), {
|
||||
format: 'hex',
|
||||
throttle: 50,
|
||||
defaultValue: '#FFFFFF'
|
||||
})
|
||||
const modelValue = defineModel<string>(undefined)
|
||||
|
||||
const pickedColor = computed<HSVColor>({
|
||||
get() {
|
||||
try {
|
||||
const color = Color(modelValue.value || props.defaultValue)
|
||||
return color.hsv().object() as HSVColor
|
||||
} catch (_) {
|
||||
return { h: 0, s: 0, v: 100 }
|
||||
}
|
||||
},
|
||||
set(value) {
|
||||
const color = Color.hsv(value.h, value.s, value.v)
|
||||
|
||||
switch (props.format) {
|
||||
case 'rgb':
|
||||
modelValue.value = color.rgb().string()
|
||||
break
|
||||
case 'hsl':
|
||||
modelValue.value = color.hsl().string()
|
||||
break
|
||||
case 'hwb':
|
||||
modelValue.value = color.hwb().string()
|
||||
break
|
||||
case 'hex':
|
||||
default:
|
||||
modelValue.value = color.hex()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function useColorDraggable(targetElement: MaybeRefOrGetter<HTMLElement | null>,
|
||||
containerElement: MaybeRefOrGetter<HTMLElement | null>,
|
||||
axis: 'x' | 'y' | 'both' = 'both',
|
||||
initialPosition = { x: 0, y: 0 },
|
||||
disabled?: MaybeRefOrGetter<boolean | undefined>
|
||||
) {
|
||||
const position = ref<{ x: number, y: number }>(initialPosition)
|
||||
const pressedDelta = ref<{ x: number, y: number }>()
|
||||
const targetRect = useElementBounding(targetElement)
|
||||
const containerRect = useElementBounding(containerElement)
|
||||
|
||||
function start(event: PointerEvent) {
|
||||
if (toValue(disabled)) return event.preventDefault()
|
||||
|
||||
const container = toValue(containerElement)
|
||||
|
||||
pressedDelta.value = {
|
||||
x: event.clientX - (container ? event.clientX - containerRect.left.value + container.scrollLeft : targetRect.left.value),
|
||||
y: event.clientY - (container ? event.clientY - containerRect.top.value + container.scrollTop : targetRect.top.value)
|
||||
}
|
||||
|
||||
move(event)
|
||||
}
|
||||
|
||||
function move(event: PointerEvent) {
|
||||
if (!pressedDelta.value) return
|
||||
|
||||
const container = toValue(containerElement)
|
||||
let { x, y } = position.value
|
||||
|
||||
if (container && (axis === 'x' || axis === 'both')) {
|
||||
x = Math.min(Math.max(0, (event.clientX - pressedDelta.value.x) / container.scrollWidth * 100), 100)
|
||||
}
|
||||
|
||||
if (container && (axis === 'y' || axis === 'both')) {
|
||||
y = Math.min(Math.max(0, (event.clientY - pressedDelta.value.y) / container.scrollHeight * 100), 100)
|
||||
}
|
||||
|
||||
position.value = { x, y }
|
||||
}
|
||||
|
||||
function end() {
|
||||
if (!pressedDelta.value) {
|
||||
return
|
||||
}
|
||||
|
||||
pressedDelta.value = undefined
|
||||
}
|
||||
|
||||
if (isClient) {
|
||||
useEventListener(containerElement, 'pointerdown', start)
|
||||
useEventListener(window, 'pointermove', move)
|
||||
useEventListener(window, 'pointerup', end)
|
||||
}
|
||||
|
||||
return {
|
||||
position
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeHue(hue: number, dir: 'left' | 'right' = 'left'): number {
|
||||
if (dir === 'right') {
|
||||
return (hue * 100) / 360
|
||||
}
|
||||
|
||||
return (hue / 100) * 360
|
||||
}
|
||||
|
||||
function normalizeBrightness(brightness: number): number {
|
||||
return 100 - brightness
|
||||
}
|
||||
|
||||
const selectorRef = ref<HTMLDivElement | null>(null)
|
||||
const selectorThumbRef = ref<HTMLDivElement | null>(null)
|
||||
const trackRef = ref<HTMLDivElement | null>(null)
|
||||
const trackThumbRef = ref<HTMLDivElement | null>(null)
|
||||
|
||||
const disabled = computed(() => props.disabled)
|
||||
|
||||
const { position: selectorThumbPosition } = useColorDraggable(selectorThumbRef, selectorRef, 'both', {
|
||||
x: pickedColor.value.s,
|
||||
y: normalizeBrightness(pickedColor.value.v)
|
||||
}, disabled)
|
||||
|
||||
const { position: trackThumbPosition } = useColorDraggable(trackThumbRef, trackRef, 'y', {
|
||||
x: 0,
|
||||
y: normalizeHue(pickedColor.value.h, 'right')
|
||||
}, disabled)
|
||||
|
||||
const { pause: pauseWatchColor, resume: resumeWatchColor } = watchPausable(pickedColor, (hsb) => {
|
||||
selectorThumbPosition.value = {
|
||||
x: hsb.s,
|
||||
y: normalizeBrightness(hsb.v)
|
||||
}
|
||||
trackThumbPosition.value = {
|
||||
x: 0,
|
||||
y: normalizeHue(hsb.h, 'right')
|
||||
}
|
||||
})
|
||||
|
||||
watchThrottled([selectorThumbPosition, trackThumbPosition], () => {
|
||||
pauseWatchColor()
|
||||
|
||||
pickedColor.value = {
|
||||
h: normalizeHue(trackThumbPosition.value.y),
|
||||
s: selectorThumbPosition.value.x,
|
||||
v: normalizeBrightness(selectorThumbPosition.value.y)
|
||||
}
|
||||
|
||||
nextTick(resumeWatchColor)
|
||||
}, { throttle: () => props.throttle })
|
||||
|
||||
const trackThumbColor = computed(() => Color({
|
||||
h: normalizeHue(trackThumbPosition.value.y),
|
||||
s: 100,
|
||||
v: 100
|
||||
}).hex())
|
||||
|
||||
const selectorStyle = computed(() => ({
|
||||
backgroundColor: trackThumbColor.value
|
||||
}))
|
||||
|
||||
const selectorThumbStyle = computed(() => ({
|
||||
backgroundColor: Color(modelValue.value || props.defaultValue).hex(),
|
||||
left: `${selectorThumbPosition.value.x}%`,
|
||||
top: `${selectorThumbPosition.value.y}%`
|
||||
}))
|
||||
|
||||
const trackThumbStyle = computed(() => ({
|
||||
backgroundColor: trackThumbColor.value,
|
||||
top: `${trackThumbPosition.value.y}%`
|
||||
}))
|
||||
|
||||
const ui = computed(() => colorPicker({
|
||||
size: props.size
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })" :data-disabled="disabled ? true : undefined">
|
||||
<div :class="ui.picker({ class: props.ui?.picker })">
|
||||
<div
|
||||
ref="selectorRef"
|
||||
:class="ui.selector({ class: props.ui?.selector })"
|
||||
:style="selectorStyle"
|
||||
>
|
||||
<div :class="ui.selectorBackground({ class: props.ui?.selectorBackground })" data-color-picker-background>
|
||||
<div
|
||||
ref="selectorThumbRef"
|
||||
:class="ui.selectorThumb({ class: props.ui?.selectorThumb })"
|
||||
:style="selectorThumbStyle"
|
||||
:data-disabled="disabled ? true : undefined"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ref="trackRef"
|
||||
:class="ui.track({ class: props.ui?.track })"
|
||||
data-color-picker-track
|
||||
>
|
||||
<div
|
||||
ref="trackThumbRef"
|
||||
:class="ui.trackThumb({ class: props.ui?.trackThumb })"
|
||||
:style="trackThumbStyle"
|
||||
:data-disabled="disabled ? true : undefined"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Primitive>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
[data-color-picker-background] {
|
||||
background-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
|
||||
[data-color-picker-track] {
|
||||
background-image: linear-gradient(0deg, red 0, #f0f 17%, #00f 33%, #0ff 50%, #0f0 67%, #ff0 83%, red);
|
||||
}
|
||||
</style>
|
||||
@@ -12,6 +12,7 @@ export * from '../components/Carousel.vue'
|
||||
export * from '../components/Checkbox.vue'
|
||||
export * from '../components/Chip.vue'
|
||||
export * from '../components/Collapsible.vue'
|
||||
export * from '../components/ColorPicker.vue'
|
||||
export * from '../components/CommandPalette.vue'
|
||||
export * from '../components/Container.vue'
|
||||
export * from '../components/ContextMenu.vue'
|
||||
|
||||
39
src/theme/color-picker.ts
Normal file
39
src/theme/color-picker.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
export default {
|
||||
slots: {
|
||||
root: 'data-[disabled]:opacity-75',
|
||||
picker: 'flex gap-4',
|
||||
selector: 'rounded-[calc(var(--ui-radius)*1.5)]',
|
||||
selectorBackground: 'w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]',
|
||||
selectorThumb: '-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed',
|
||||
track: 'w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)]',
|
||||
trackThumb: 'absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed'
|
||||
},
|
||||
variants: {
|
||||
size: {
|
||||
xs: {
|
||||
selector: 'w-38 h-38',
|
||||
track: 'h-38'
|
||||
},
|
||||
sm: {
|
||||
selector: 'w-40 h-40',
|
||||
track: 'h-40'
|
||||
},
|
||||
md: {
|
||||
selector: 'w-42 h-42',
|
||||
track: 'h-42'
|
||||
},
|
||||
lg: {
|
||||
selector: 'w-44 h-44',
|
||||
track: 'h-44'
|
||||
},
|
||||
xl: {
|
||||
selector: 'w-46 h-46',
|
||||
track: 'h-46'
|
||||
}
|
||||
}
|
||||
},
|
||||
compoundVariants: [],
|
||||
defaultVariants: {
|
||||
size: 'md'
|
||||
}
|
||||
}
|
||||
@@ -12,6 +12,7 @@ export { default as carousel } from './carousel'
|
||||
export { default as checkbox } from './checkbox'
|
||||
export { default as chip } from './chip'
|
||||
export { default as collapsible } from './collapsible'
|
||||
export { default as colorPicker } from './color-picker'
|
||||
export { default as commandPalette } from './command-palette'
|
||||
export { default as container } from './container'
|
||||
export { default as contextMenu } from './context-menu'
|
||||
|
||||
37
test/components/ColorPicker.spec.ts
Normal file
37
test/components/ColorPicker.spec.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { describe, it, expect, test } from 'vitest'
|
||||
import { mountSuspended } from '@nuxt/test-utils/runtime'
|
||||
import ColorPicker, { type ColorPickerProps } from '../../src/runtime/components/ColorPicker.vue'
|
||||
import ComponentRender from '../component-render'
|
||||
import theme from '#build/ui/color-picker'
|
||||
|
||||
describe('ColorPicker', () => {
|
||||
const sizes = Object.keys(theme.variants.size) as any
|
||||
const formats = [
|
||||
['hex', '#00C16A'],
|
||||
['rgb', 'rgb(0, 193, 106)'],
|
||||
['hsl', 'hsl(153, 100%, 37.8%)'],
|
||||
['hwb', 'hwb(150, 0%, 24%)']
|
||||
]
|
||||
|
||||
it.each([
|
||||
// Props
|
||||
['with disabled', { props: { disabled: true } }],
|
||||
...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
|
||||
...formats.map(format => [`with format ${format[0]}`, { props: { format: format[0], defaultValue: format[1] } }]),
|
||||
['with as', { props: { as: 'section' } }],
|
||||
['with class', { props: { class: 'w-96' } }],
|
||||
['with ui', { props: { ui: { picker: 'gap-8' } } }]
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: ColorPickerProps }) => {
|
||||
const html = await ComponentRender(nameOrHtml, options, ColorPicker)
|
||||
expect(html).toMatchSnapshot()
|
||||
})
|
||||
|
||||
describe('emits', () => {
|
||||
test('update:modelValue event', async () => {
|
||||
const wrapper = await mountSuspended(ColorPicker)
|
||||
await wrapper.setValue('#00C16A')
|
||||
|
||||
expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['#00C16A']] })
|
||||
})
|
||||
})
|
||||
})
|
||||
196
test/components/__snapshots__/ColorPicker-vue.spec.ts.snap
Normal file
196
test/components/__snapshots__/ColorPicker-vue.spec.ts.snap
Normal file
@@ -0,0 +1,196 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`ColorPicker > renders with as correctly 1`] = `
|
||||
"<section data-v-c9a043d6="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-c9a043d6="" class="flex gap-4">
|
||||
<div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
|
||||
<div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
|
||||
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with class correctly 1`] = `
|
||||
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75 w-96">
|
||||
<div data-v-c9a043d6="" class="flex gap-4">
|
||||
<div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
|
||||
<div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
|
||||
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with disabled correctly 1`] = `
|
||||
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75" data-disabled="true">
|
||||
<div data-v-c9a043d6="" class="flex gap-4">
|
||||
<div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
|
||||
<div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
|
||||
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with format hex correctly 1`] = `
|
||||
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-c9a043d6="" class="flex gap-4">
|
||||
<div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
|
||||
<div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
|
||||
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704663212436%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with format hsl correctly 1`] = `
|
||||
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-c9a043d6="" class="flex gap-4">
|
||||
<div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
|
||||
<div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
|
||||
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with format hwb correctly 1`] = `
|
||||
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-c9a043d6="" class="flex gap-4">
|
||||
<div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF80;">
|
||||
<div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C261; left: 100%; top: 24%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
|
||||
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF80; top: 41.666666666666664%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with format rgb correctly 1`] = `
|
||||
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-c9a043d6="" class="flex gap-4">
|
||||
<div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
|
||||
<div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
|
||||
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704663212436%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with size lg correctly 1`] = `
|
||||
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-c9a043d6="" class="flex gap-4">
|
||||
<div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-44 h-44" style="background-color: #FF0000;">
|
||||
<div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-44" data-color-picker-track="">
|
||||
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with size md correctly 1`] = `
|
||||
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-c9a043d6="" class="flex gap-4">
|
||||
<div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
|
||||
<div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
|
||||
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with size sm correctly 1`] = `
|
||||
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-c9a043d6="" class="flex gap-4">
|
||||
<div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-40 h-40" style="background-color: #FF0000;">
|
||||
<div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-40" data-color-picker-track="">
|
||||
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with size xl correctly 1`] = `
|
||||
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-c9a043d6="" class="flex gap-4">
|
||||
<div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-46 h-46" style="background-color: #FF0000;">
|
||||
<div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-46" data-color-picker-track="">
|
||||
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with size xs correctly 1`] = `
|
||||
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-c9a043d6="" class="flex gap-4">
|
||||
<div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-38 h-38" style="background-color: #FF0000;">
|
||||
<div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-38" data-color-picker-track="">
|
||||
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with ui correctly 1`] = `
|
||||
"<div data-v-c9a043d6="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-c9a043d6="" class="flex gap-8">
|
||||
<div data-v-c9a043d6="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
|
||||
<div data-v-c9a043d6="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-c9a043d6="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-c9a043d6="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
|
||||
<div data-v-c9a043d6="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
196
test/components/__snapshots__/ColorPicker.spec.ts.snap
Normal file
196
test/components/__snapshots__/ColorPicker.spec.ts.snap
Normal file
@@ -0,0 +1,196 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`ColorPicker > renders with as correctly 1`] = `
|
||||
"<section data-v-d6f23756="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-d6f23756="" class="flex gap-4">
|
||||
<div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
|
||||
<div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
|
||||
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with class correctly 1`] = `
|
||||
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75 w-96">
|
||||
<div data-v-d6f23756="" class="flex gap-4">
|
||||
<div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
|
||||
<div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
|
||||
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with disabled correctly 1`] = `
|
||||
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75" data-disabled="true">
|
||||
<div data-v-d6f23756="" class="flex gap-4">
|
||||
<div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
|
||||
<div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;" data-disabled="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
|
||||
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;" data-disabled="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with format hex correctly 1`] = `
|
||||
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-d6f23756="" class="flex gap-4">
|
||||
<div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
|
||||
<div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
|
||||
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704663212436%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with format hsl correctly 1`] = `
|
||||
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-d6f23756="" class="flex gap-4">
|
||||
<div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
|
||||
<div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.400000000000006%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
|
||||
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.5%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with format hwb correctly 1`] = `
|
||||
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-d6f23756="" class="flex gap-4">
|
||||
<div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF80;">
|
||||
<div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C261; left: 100%; top: 24%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
|
||||
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF80; top: 41.666666666666664%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with format rgb correctly 1`] = `
|
||||
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-d6f23756="" class="flex gap-4">
|
||||
<div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #00FF8C;">
|
||||
<div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00C16A; left: 100%; top: 24.313725490196077%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
|
||||
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #00FF8C; top: 42.48704663212436%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with size lg correctly 1`] = `
|
||||
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-d6f23756="" class="flex gap-4">
|
||||
<div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-44 h-44" style="background-color: #FF0000;">
|
||||
<div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-44" data-color-picker-track="">
|
||||
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with size md correctly 1`] = `
|
||||
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-d6f23756="" class="flex gap-4">
|
||||
<div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
|
||||
<div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
|
||||
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with size sm correctly 1`] = `
|
||||
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-d6f23756="" class="flex gap-4">
|
||||
<div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-40 h-40" style="background-color: #FF0000;">
|
||||
<div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-40" data-color-picker-track="">
|
||||
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with size xl correctly 1`] = `
|
||||
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-d6f23756="" class="flex gap-4">
|
||||
<div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-46 h-46" style="background-color: #FF0000;">
|
||||
<div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-46" data-color-picker-track="">
|
||||
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with size xs correctly 1`] = `
|
||||
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-d6f23756="" class="flex gap-4">
|
||||
<div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-38 h-38" style="background-color: #FF0000;">
|
||||
<div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-38" data-color-picker-track="">
|
||||
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorPicker > renders with ui correctly 1`] = `
|
||||
"<div data-v-d6f23756="" class="data-[disabled]:opacity-75">
|
||||
<div data-v-d6f23756="" class="flex gap-8">
|
||||
<div data-v-d6f23756="" class="rounded-[calc(var(--ui-radius)*1.5)] w-42 h-42" style="background-color: #FF0000;">
|
||||
<div data-v-d6f23756="" class="w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]" data-color-picker-background="">
|
||||
<div data-v-d6f23756="" class="-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FFFFFF; left: 0%; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-d6f23756="" class="w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)] h-42" data-color-picker-track="">
|
||||
<div data-v-d6f23756="" class="absolute transform -translate-y-1/2 -translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed" style="background-color: #FF0000; top: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
Reference in New Issue
Block a user