@personizely/ui 0.0.42

package/src/components/ui/checkbox-group/CheckboxGroup.vue

@@ -0,0 +1,65 @@
+<template>
+  <CheckboxGroupRoot v-bind="forwarded" :class="checkboxGroupVariants({ orientation })">
+    <Checkbox
+      v-for="(option, index) in preparedOptions"
+      :key="option[keys.id] || option[keys.value] || index"
+      :value="option[keys.value]"
+      :disabled="disabled || option[keys.disabled]"
+      :help="option[keys.help]"
+      @blur="$emit('blur', option, $event)"
+      @focus="$emit('focus', option, $event)"
+    >
+      <slot v-bind="{ option }">
+        {{ option[keys.label] || option }}
+      </slot>
+      <template v-if="$slots.help" #help>
+        <slot v-bind="{ option }" name="help">
+          {{ option[keys.help] }}
+        </slot>
+      </template>
+    </Checkbox>
+  </CheckboxGroupRoot>
+</template>
+
+<script setup lang="ts">
+import { computed, type Events } from 'vue'
+import { prepareOptions } from '@/utils/options'
+import type { Keys, Option, CustomOption } from '@/utils/options'
+import { checkboxGroupVariants } from './'
+import {
+  CheckboxGroupRoot,
+  type CheckboxGroupRootProps,
+  type CheckboxGroupRootEmits
+} from 'reka-ui'
+import Checkbox from '@/components/ui/checkbox/Checkbox.vue'
+import { useForwardPropsEmits } from '@/composables/forward-props-emits'
+import { useDelegatedProps } from '@/composables/delegated-props'
+import { useEmitAsProps } from '@/composables/emits-as-props'
+
+const props = withDefaults(defineProps<Omit<CheckboxGroupRootProps, 'as' | 'asChild'> & {
+  keys?: Keys
+  options: string[] | Option[] | CustomOption[] | { [key:string]: string }
+}>(), {
+  loop: false,
+  dir: 'ltr',
+  orientation: 'vertical',
+  keys: () => ({
+    id: 'id',
+    label: 'label',
+    help: 'help',
+    value: 'value',
+    disabled: 'disabled'
+  })
+})
+
+const emits = defineEmits<CheckboxGroupRootEmits & {
+  focus: [option: Option | CustomOption, event: Events['onFocus']]
+  blur: [option: Option | CustomOption, event: Events['onBlur']]
+}>()
+
+const delegatedProps = useDelegatedProps(props, ['keys', 'options'])
+const delegatedEmits = useEmitAsProps(emits, ['focus', 'blur'])
+const forwarded = useForwardPropsEmits(delegatedProps, delegatedEmits)
+
+const preparedOptions = computed(() => prepareOptions(props.options, props.keys))
+</script>

package/src/components/ui/checkbox-group/index.ts

@@ -0,0 +1,15 @@
+import { cva } from 'class-variance-authority'
+
+export { default as CheckboxGroup } from './CheckboxGroup.vue'
+
+export const checkboxGroupVariants = cva('flex ', {
+  variants: {
+    orientation: {
+      vertical: 'flex-col gap-2',
+      horizontal: 'gap-4'
+    }
+  },
+  defaultVariants: {
+    orientation: 'vertical'
+  }
+})

package/src/components/ui/color-picker/Alpha.vue

@@ -0,0 +1,63 @@
+<template>
+  <Rail
+    :orientation="orientation"
+    :background="background"
+    @drag="update"
+    @drag-start="update"
+  >
+    <Handle
+      :style="{ [orientation === 'horizontal' ? 'left' : 'top']: modelValue * 100 + '%' }"
+      :class="orientation === 'horizontal' ? 'h-full w-2 -translate-x-1/2' : 'w-full h-2 -translate-y-1/2'"
+      @up="increment"
+      @down="decrement"
+    />
+  </Rail>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import Rail from './Rail.vue'
+import Handle from './Handle.vue'
+import type { Numberify } from '@ctrl/tinycolor'
+
+interface RGB {
+  r: string
+  g: string
+  b: string
+}
+
+const modelValue = defineModel<number>({ required: true })
+const props = withDefaults(defineProps<{
+  rgb: Numberify<RGB>
+  orientation?: 'horizontal' | 'vertical'
+}>(), {
+  orientation: 'horizontal'
+})
+
+const background = computed(() => {
+  const { rgb, orientation } = props
+  const rgbStr = [rgb.r, rgb.g, rgb.b].join(', ')
+  return orientation === 'horizontal'
+    ? `linear-gradient(to right, rgba(${rgbStr}, 0) 0%, rgba(${rgbStr}, 1) 100%)`
+    : `linear-gradient(to bottom, rgba(${rgbStr}, 0) 0%, rgba(${rgbStr}, 1) 100%)`
+})
+
+const update = (left: number) => {
+  const alpha = left / 100
+  if (alpha !== modelValue.value) {
+    modelValue.value = alpha
+  }
+}
+
+const increment = () => {
+  let i = 0.1
+  const value = modelValue.value + i
+  modelValue.value = value <= 1 ? value : 1
+}
+
+const decrement = () => {
+  let i = 0.1
+  const value = modelValue.value - i
+  modelValue.value = value >= 0 ? value : 0
+}
+</script>

package/src/components/ui/color-picker/Angle.vue

@@ -0,0 +1,145 @@
+<template>
+  <div
+    ref="container"
+    class="relative select-none rounded-full w-8 h-8 cursor-pointer border dark:border-gray-700 border-gray-200 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+    tabindex="0"
+    @focus="beginKeyboardInput"
+    @blur="endKeyboardInput"
+    @mousedown="beginTracking"
+    @touchmove.prevent.passive="onMouseMove"
+    @touchstart.prevent.passive="onMouseMove"
+  >
+    <span
+      class="absolute bottom-0 top-0 h-full left-1/2 before:content[''] before:absolute before:top-[6px] before:rounded-full before:bg-primary before:-translate-x-1/2 before:w-[6px] before:h-[6px]"
+      :style="{ transform: `rotate(${modelValue}deg)` }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onUnmounted } from 'vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: number
+  max?: number
+  min?: number
+  step?: number
+}>(), {
+  max: 360,
+  min: 0,
+  step: 1
+})
+
+const emit = defineEmits<{
+  'update:model-value': [value: number]
+  change: [value: number]
+}>()
+
+const container = ref<HTMLElement | null>(null)
+const tracking = ref(false)
+
+const radToDeg = (rad: number): number => {
+  return rad * (180 / Math.PI)
+}
+
+const getCenter = (element: HTMLElement): [number, number] => {
+  const rect = element.getBoundingClientRect()
+  return [rect.left + (rect.width / 2), rect.top + (rect.height / 2)]
+}
+
+const angle = (vector: [number, number], element: HTMLElement): number => {
+  const center = getCenter(element)
+  const x = vector[0] - center[0]
+  const y = vector[1] - center[1]
+  let deg = -radToDeg(Math.atan2(x, y))
+  deg += 180
+  if (deg < 0) deg += 360
+  return deg
+}
+
+const normalize = (degree: number): number => {
+  const n = Math.max(props.min, Math.min(degree, props.max))
+  const high = Math.ceil(n / props.step)
+  const low = Math.round(n / props.step)
+  return high >= n / props.step ? (high * props.step === 360 ? 0 : high * props.step) : low * props.step
+}
+
+// Event handlers
+const onKeyDown = (e: KeyboardEvent) => {
+  const LEFT_ARROW = 37
+  const UP_ARROW = 38
+  const RIGHT_ARROW = 39
+  const DOWN_ARROW = 40
+
+  let dir = 0
+  switch (e.keyCode) {
+    case UP_ARROW:
+    case RIGHT_ARROW:
+      dir = 1
+      break
+    case DOWN_ARROW:
+    case LEFT_ARROW:
+      dir = -1
+      break
+  }
+
+  let val = props.modelValue + (dir * props.step)
+  if (val === props.max + 1) val = props.min
+  if (val === props.min - 1) val = props.max - 1
+  val = normalize(val)
+
+  if (dir) {
+    e.preventDefault()
+    emit('update:model-value', val)
+  }
+}
+
+const updateWithEvent = (e: MouseEvent | TouchEvent) => {
+  if (!container.value) return
+
+  const vector: [number, number] = [
+    'touches' in e ? e.touches[0].clientX : (e as MouseEvent).x,
+    'touches' in e ? e.touches[0].clientY : (e as MouseEvent).y
+  ]
+
+  const deg = angle(vector, container.value)
+  const value = normalize(deg)
+  emit('update:model-value', value)
+}
+
+const onMouseMove = (e: MouseEvent | TouchEvent) => {
+  updateWithEvent(e)
+}
+
+const onMouseUp = (e: MouseEvent | TouchEvent) => {
+  updateWithEvent(e)
+  endTracking()
+}
+
+const beginTracking = () => {
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', onMouseUp)
+  tracking.value = true
+}
+
+const endTracking = () => {
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup', onMouseUp)
+  tracking.value = false
+}
+
+const beginKeyboardInput = () => {
+  document.addEventListener('keydown', onKeyDown)
+}
+
+const endKeyboardInput = () => {
+  document.removeEventListener('keydown', onKeyDown)
+}
+
+onUnmounted(() => {
+  if (tracking.value) {
+    endTracking()
+  }
+  endKeyboardInput()
+})
+</script>

package/src/components/ui/color-picker/Checkboard.vue

@@ -0,0 +1,43 @@
+<template>
+  <div :style="{ backgroundImage: background }" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  size?: number
+  white?: string
+  black?: string
+}>(), {
+  size: 8,
+  white: '#ffffff',
+  black: '#e6e6e6'
+})
+
+const background = computed(() => `url(${getCheckboard(props.white, props.black, props.size)})`)
+
+const renderCheckboard = (c1: string, c2: string, size: number) => {
+  if (typeof document === 'undefined') return ''
+
+  const canvas = document.createElement('canvas')
+  canvas.width = canvas.height = size * 2
+  const ctx = canvas.getContext('2d')
+  if (!ctx) {
+    return null
+  }
+
+  ctx.fillStyle = c1
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+  ctx.fillStyle = c2
+  ctx.fillRect(0, 0, size, size)
+  ctx.translate(size, size)
+  ctx.fillRect(0, 0, size, size)
+
+  return canvas.toDataURL()
+}
+
+const getCheckboard = (c1: string, c2: string, size: number) => {
+  return renderCheckboard(c1, c2, size)
+}
+</script>

package/src/components/ui/color-picker/Color.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <div
+      class="flex gap-4"
+      :class="[
+        orientation === 'horizontal' && 'flex-col',
+        orientation === 'vertical' && 'flex-row'
+      ]"
+    >
+      <Saturation
+        :saturation="s"
+        :value="v"
+        :hue="hue"
+        class="h-40"
+        @update:value="setHsv({ v: $event })"
+        @update:saturation="setHsv({ s: $event })"
+        @update="setHsv($event)"
+      />
+      <Hue v-model="hue" :orientation="orientation" />
+      <Alpha
+        v-model="alpha"
+        :orientation="orientation"
+        :rgb="color.toRgb()"
+      />
+    </div>
+    <div class="flex justify-between gap-1 md:gap-2">
+      <Input
+        v-if="mode === 'hex'"
+        v-model="hex"
+        class="w-28 [&>input]:uppercase"
+        icon="hash"
+        @paste.prevent="onPasteHex"
+      />
+      <div v-else-if="mode === 'rgba'" class="flex gap-1 md:gap-2">
+        <LabelInput v-slot="{ id }" label="R">
+          <Input
+            :id="id"
+            :model-value="Math.round(color.r)"
+            class="w-12 *:text-center"
+            @update:model-value="setRgb(Number($event) || color.r, 'r')"
+          />
+        </LabelInput>
+        <LabelInput v-slot="{ id }" label="G">
+          <Input
+            :id="id"
+            :model-value="Math.round(color.g)"
+            class="w-12 [&>input]:text-center"
+            @update:model-value="setRgb(Number($event) || color.g, 'g')"
+          />
+        </LabelInput>
+        <LabelInput v-slot="{ id }" label="B">
+          <Input
+            :id="id"
+            :model-value="Math.round(color.b)"
+            class="w-12 [&>input]:text-center"
+            @update:model-value="setRgb(Number($event) || color.b, 'b')"
+          />
+        </LabelInput>
+        <LabelInput v-slot="{ id }" label="A">
+          <Input
+            :id="id"
+            v-model.number="alpha"
+            class="w-12 [&>input]:text-center"
+          />
+        </LabelInput>
+      </div>
+      <div v-else-if="mode === 'hsla'" class="flex gap-1 md:gap-2">
+        <LabelInput v-slot="{ id }" label="H">
+          <Input
+            :id="id"
+            :model-value="Math.round(h)"
+            class="w-12 *:text-center"
+            @update:model-value="setHsl(Number($event) || color.toHsl().h, 'h')"
+          />
+        </LabelInput>
+        <LabelInput v-slot="{ id }" label="S">
+          <Input
+            :id="id"
+            :model-value="Math.round(s * 100)"
+            class="w-12 [&>input]:text-center"
+            @update:model-value="setHsl(Number($event) || color.toHsl().s / 100, 's')"
+          />
+        </LabelInput>
+        <LabelInput v-slot="{ id }" label="L">
+          <Input
+            :id="id"
+            :model-value="Math.round(color.toHsl().l * 100)"
+            class="w-12 [&>input]:text-center"
+            @update:model-value="setHsl(Number($event) || color.toHsl().l / 100, 'l')"
+          />
+        </LabelInput>
+        <LabelInput v-slot="{ id }" label="A">
+          <Input
+            :id="id"
+            v-model.number="alpha"
+            class="w-12 [&>input]:text-center"
+          />
+        </LabelInput>
+      </div>
+      <Button
+        variant="ghost"
+        @click="toggleMode"
+      >
+        <template #icon>
+          <ChevronsUpDown class="w-4 h-4" />
+        </template>
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TinyColor } from '@ctrl/tinycolor'
+import { computed, ref, watch } from 'vue'
+import Saturation from './Saturation.vue'
+import Hue from './Hue.vue'
+import Alpha from './Alpha.vue'
+import LabelInput from './LabelInput.vue'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { ChevronsUpDown } from 'lucide-vue-next'
+
+const modelValue = defineModel<string>({
+  default: 'transparent'
+})
+withDefaults(defineProps<{
+  orientation?: 'horizontal' | 'vertical'
+}>(), {
+  orientation: 'horizontal'
+})
+
+type Mode = 'hex' | 'rgba' | 'hsla'
+
+const mode = ref<Mode>('hex')
+const modes: Mode[] = ['hex', 'rgba', 'hsla']
+
+const toggleMode = () => {
+  const idx = modes.indexOf(mode.value)
+  mode.value = modes[idx + 1 > modes.length - 1 ? 0 : idx + 1]
+}
+
+const onPasteHex = (e: ClipboardEvent) => {
+  const value = e.clipboardData!.getData('text')
+  hex.value = value.startsWith('#') ? value.slice(1) : value
+}
+
+const c = new TinyColor(modelValue.value || 'transparent')
+const rgb = c.toRgb()
+
+const r = ref(rgb.r)
+const g = ref(rgb.g)
+const b = ref(rgb.b)
+
+const hsv = c.toHsv()
+const h = ref(hsv.h)
+const s = ref(hsv.s)
+const v = ref(hsv.v)
+
+const a = ref(rgb.a)
+
+const color = computed(() => new TinyColor({ h: h.value, s: s.value, v: v.value, a: 1 }))
+
+const hex = computed({
+  get () {
+    return color.value.toHex()
+  },
+  set (value) {
+    const c = new TinyColor('#' + value)
+    if (c.isValid && value.length === 6) {
+      update(c)
+    }
+  }
+})
+
+const alpha = computed({
+  get () {
+    return a.value
+  },
+  set (value) {
+    a.value = value
+    update(new TinyColor(color.value))
+  }
+})
+
+const hue = computed({
+  get () {
+    return h.value
+  },
+  set (value) {
+    h.value = value
+    const hsl = color.value.toHsl()
+    hsl.h = value
+    update(new TinyColor(hsl))
+  }
+})
+
+
+watch(modelValue, (to) => {
+  const c = new TinyColor(to)
+
+  const rgb = c.clone().toRgb()
+  r.value = rgb.r
+  g.value = rgb.g
+  b.value = rgb.b
+
+  const hsv = c.clone().toHsv()
+  h.value = hsv.h === 0 ? h.value : hsv.h
+  s.value = hsv.s
+  v.value = hsv.v
+
+  a.value = rgb.a
+})
+
+const setRgb = (value: number, key: 'r' | 'g' | 'b') => {
+  const rgb = color.value.toRgb()
+  rgb[key] = value
+  update(new TinyColor(rgb))
+}
+
+const setHsv = (value: { v?: number, s?: number, h?: number }) => {
+  const hsv = color.value.toHsv()
+  Object.assign(hsv, value)
+  update(new TinyColor(hsv))
+}
+
+const setHsl = (value: number, key: 'h' | 's' | 'l') => {
+  const hsl = color.value.toHsl()
+  hsl[key] = value
+  update(new TinyColor(hsl))
+}
+
+const isSafeHex = (color: TinyColor) => {
+  const from = new TinyColor(color.clone().toHexString()).toHsl()
+  const to = color.toHsl()
+  return to.h === from.h && to.s === from.s && to.l === from.l
+}
+
+const isSafeRgba = (color: TinyColor) => {
+  const from = new TinyColor(color.clone().toRgbString()).toHsl()
+  const to = color.toHsl()
+  return to.h === from.h && to.s === from.s && to.l === from.l
+}
+
+const update = (value: TinyColor) => {
+  value.setAlpha(a.value)
+
+  if (isSafeHex(value) && a.value === 1) {
+    modelValue.value = value.toHexString()
+  } else if (isSafeRgba(value)) {
+    modelValue.value = value.toRgbString()
+  } else {
+    modelValue.value = value.toHslString()
+  }
+}
+</script>

package/src/components/ui/color-picker/ColorPicker.vue

@@ -0,0 +1,25 @@
+<template>
+  <Popover>
+    <template #trigger>
+      <Button variant="ghost">
+        <template #icon>
+          <span class="relative size-4">
+            <Checkboard :size="4" class="absolute size-4 rounded-full inset-0" />
+            <span class="size-4 rounded-full absolute inset-0 shadow-[0_0_1px_1px_rgba(0,0,0,0.05)]" :style="{ backgroundColor: modelValue }" />
+          </span>
+        </template>
+      </Button>
+    </template>
+
+    <Color v-model="modelValue" />
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { Button } from '@/components/ui/button'
+import { Popover } from '@/components/ui/popover'
+import Color from './Color.vue'
+import Checkboard from './Checkboard.vue'
+
+const modelValue = defineModel<string>()
+</script>