@personizely/ui 0.0.42

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

@@ -0,0 +1,172 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <Rail
+      ref="rail"
+      :background="compile({ points, angle: 90, type: 'linear' })"
+      @drag="movePoint"
+      @drag-start="onDragStart"
+    >
+      <Handle
+        v-for="(point, index) in points"
+        :key="index"
+        :style="{ left: point.left + '%', backgroundColor: point.color }"
+        role="presentation"
+        class="h-full w-2 -translate-x-1/2"
+        :class="point === currentPoint && 'border-primary'"
+        @touchstart.passive="selectPoint(point)"
+        @mousedown="selectPoint(point)"
+        @keydown.enter.prevent="selectPoint(point)"
+        @keydown.space.prevent="selectPoint(point)"
+        @up="increase(point)"
+        @down="decrease(point)"
+      />
+    </Rail>
+    <Color v-model="currentPoint.color" />
+    <div class="flex gap-4 justify-between md:justify-normal">
+      <Select
+        v-model="type"
+        :options="typeOptions"
+        class="grow"
+      />
+      <div
+        v-if="type === 'linear'"
+        class="flex gap-4"
+      >
+        <Angle
+          v-model="angle"
+        />
+        <Input
+          v-model.number="angle"
+          :min="1"
+          :max="360"
+          class="w-14 [&>input]:text-center [&>input]:pe-4"
+          trailing
+        >
+          <template #trailing>
+            <span class="text-gray-500 dark:text-gray-400 text-xs">°</span>
+          </template>
+        </Input>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Rail from './Rail.vue'
+import Color from './Color.vue'
+import Handle from './Handle.vue'
+import Angle from './Angle.vue'
+import Input from '../input/Input.vue'
+import Select from '../select/Select.vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { parseGradient, compile } from '@/utils/gradient.js'
+import type { Point } from '@/utils/gradient.js'
+
+const emit = defineEmits(['update:modelValue'])
+const props = withDefaults(defineProps<{
+  modelValue: string
+  min?: number
+  max?: number
+}>(), {
+  min: 2,
+  max: 5
+})
+
+const typeOptions = [
+  { value: 'linear', label: 'Linear' },
+  { value: 'radial', label: 'Radial' }
+]
+
+const initialGradient = parseGradient(props.modelValue)
+const points = ref(initialGradient.points)
+const type = ref(initialGradient.type)
+const angle = ref(initialGradient.angle)
+const shape = ref(initialGradient.shape)
+const xAxis = ref(initialGradient.xAxis)
+const yAxis = ref(initialGradient.yAxis)
+
+const gradient = computed(() => {
+  return compile({
+    points: points.value,
+    angle: angle.value,
+    type: type.value
+  })
+})
+
+const currentPoint = ref(points.value[0])
+
+watch(gradient, () => {
+  emit('update:modelValue', gradient.value)
+})
+
+watch(() => props.modelValue, (to) => {
+  if (to !== gradient.value) {
+    const newGradient = parseGradient(props.modelValue)
+    points.value = newGradient.points
+    type.value = newGradient.type
+    angle.value = newGradient.angle
+    shape.value = newGradient.shape
+    xAxis.value = newGradient.xAxis
+    yAxis.value = newGradient.yAxis
+  }
+})
+
+const findClosestPoint = (left: number) => {
+  const sortedPoints = [...points.value].sort((a, b) => Math.abs(left - a.left) - Math.abs(left - b.left))
+  return sortedPoints[0]
+}
+
+const addPoint = (left: number) => {
+  const point = {
+    color: findClosestPoint(left).color,
+    left
+  }
+  points.value.push(point)
+  points.value.sort((a, b) => a.left - b.left)
+  currentPoint.value = point
+}
+
+const removePoint = () => {
+  const idx = points.value.indexOf(currentPoint.value)
+  points.value.splice(idx, 1)
+  currentPoint.value = findClosestPoint(currentPoint.value.left)
+}
+
+const selectPoint = (point: Point) => {
+  currentPoint.value = point
+}
+
+const movePoint = (left: number) => {
+  currentPoint.value.left = left
+  points.value.sort((a, b) => a.left - b.left)
+}
+
+const increase = (point: Point) => {
+  const value = point.left + 10
+  point.left = value <= 100 ? value : 100
+}
+
+const decrease = (point: Point) => {
+  const value = point.left - 10
+  point.left = value >= 0 ? value : 0
+}
+
+const onKeyDown = (e: KeyboardEvent) => {
+  if ((e.target as HTMLElement).tagName.toLowerCase() !== 'input' && ['delete', 'backspace'].includes(e.key.toLowerCase()) && points.value.length > props.min) {
+    removePoint()
+  }
+}
+
+const onDragStart = (left: number, isRail: boolean) => {
+  if (isRail) {
+    if (points.value.length < props.max) {
+      addPoint(left)
+    } else {
+      movePoint(left)
+    }
+  }
+}
+
+onMounted(() => document.addEventListener('keydown', onKeyDown))
+onUnmounted(() => document.removeEventListener('keydown', onKeyDown))
+</script>

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

@@ -0,0 +1,19 @@
+<template>
+  <div
+    :class="cn('absolute rounded-md cursor-pointer select-none border-2 border-gray-300 shadow-xs scale-[1.2] ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', $attrs.class)"
+    role="presentation"
+    tabindex="0"
+    @keydown.up.prevent="$emit('up', $event)"
+    @keydown.down.prevent="$emit('down', $event)"
+    @keydown.right.prevent="$emit('up', $event)"
+    @keydown.left.prevent="$emit('down', $event)"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/utils/tailwind'
+
+defineEmits(['up', 'down'])
+</script>

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

@@ -0,0 +1,80 @@
+<template>
+  <Rail
+    :orientation="orientation"
+    :background="background"
+    @drag="onDrag"
+    @drag-start="onDragStart"
+    @drag-end="onDragEnd"
+  >
+    <Handle
+      :style="{ [props.orientation === 'horizontal' ? 'left' : 'top']: offset + '%' }"
+      :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, ref, watch } from 'vue'
+import Rail from './Rail.vue'
+import Handle from './Handle.vue'
+
+const calculateHandlePosition = (hue: number) => (100 * hue / 360)
+
+const modelValue = defineModel<number>({ required: true })
+const props = withDefaults(defineProps<{
+  orientation?: 'horizontal' | 'vertical'
+}>(), {
+  orientation: 'horizontal'
+})
+
+const isDragging = ref(false)
+const offset = ref(calculateHandlePosition(modelValue.value))
+
+watch(modelValue, (to) => {
+  if (!isDragging.value) {
+    offset.value = calculateHandlePosition(to)
+  }
+})
+
+const background = computed(() => {
+  return props.orientation === 'horizontal'
+    ? 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)'
+    : 'linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)'
+})
+
+const onDragStart = (value: number) => {
+  offset.value = value
+  update(value)
+  isDragging.value = true
+}
+
+const onDragEnd = () => {
+  isDragging.value = false
+}
+
+const onDrag = (value: number) => {
+  offset.value = value
+  update(value)
+}
+
+const update = (value: number) => {
+  const h = (360 * value / 100)
+  if (h !== modelValue.value) {
+    modelValue.value = Math.round(h)
+  }
+}
+
+const increment = () => {
+  let i = 10
+  const value = modelValue.value + i
+  modelValue.value = value <= 360 ? value : value - 360
+}
+
+const decrement = () => {
+  let i = 10
+  const value = modelValue.value - i
+  modelValue.value = value >= 0 ? value : 360 + value
+}
+</script>

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

@@ -0,0 +1,16 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <slot v-bind="{ id }" />
+    <label :for="id" class="text-center text-xs">{{ label }}</label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useId } from 'reka-ui'
+
+const props = defineProps<{
+  label: string
+}>()
+
+const id = useId(props.label.toLowerCase())
+</script>

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

@@ -0,0 +1,100 @@
+<template>
+  <div
+    class="relative rounded-md select-none"
+    :class="orientation === 'horizontal' ? 'h-8' : 'min-w-8'"
+  >
+    <div class="overflow-hidden">
+      <Checkboard
+        v-if="checkboard"
+        class="absolute inset-0 overflow-hidden rounded-md"
+      />
+      <div
+        class="absolute inset-0 rounded-md"
+        :style="{ background }"
+      />
+    </div>
+    <div
+      ref="container"
+      class="cursor-pointer relative flex items-center justify-center"
+      :class="orientation === 'horizontal' ? 'h-full w-full' : 'w-full h-full'"
+      role="slider"
+      @mousedown="handleMouseDown"
+      @touchmove.passive="handleMove"
+      @touchstart.passive="handleTouchStart"
+      @touchend="$emit('drag-end')"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Checkboard from './Checkboard.vue'
+import { onBeforeUnmount, ref } from 'vue'
+
+const emit = defineEmits(['drag', 'drag-start', 'drag-end'])
+const props = withDefaults(defineProps<{
+  checkboard?: boolean
+  orientation?: 'horizontal' | 'vertical'
+  background: string
+}>(), {
+  checkboard: true,
+  orientation: 'horizontal'
+})
+
+const container = ref<HTMLElement>()
+
+const handleMove = (e: MouseEvent | TouchEvent, skip: boolean = false) => {
+  if (!skip) {
+    e.preventDefault()
+  }
+
+  const offset = calculateOffset(e)
+
+  if (!skip) {
+    emit('drag', offset)
+  }
+}
+
+const handleTouchStart = (e: TouchEvent) => {
+  const offset = calculateOffset(e)
+  emit('drag-start', offset, e.target === e.currentTarget)
+  handleMove(e, true)
+}
+
+const handleMouseDown = (e: MouseEvent) => {
+  if (!container.value!.contains(e.target as HTMLElement)) return
+
+  handleMove(e, true)
+  const offset = calculateOffset(e)
+  emit('drag-start', offset, e.target === e.currentTarget)
+  window.addEventListener('mousemove', handleMove)
+  window.addEventListener('mouseup', handleMouseUp)
+}
+
+const calculateOffset = (e: TouchEvent | MouseEvent) => {
+  const offset = props.orientation === 'horizontal'
+    ? ('touches' in e ? e.touches[0].pageX : e.pageX) - window.scrollX
+    : ('touches' in e ? e.touches[0].pageY : e.pageY) - window.scrollY
+  const rect = container.value!.getBoundingClientRect()
+  const x = props.orientation === 'horizontal'
+    ? offset - rect.left
+    : offset - rect.top
+
+  return Math.min(100, Math.max(0, Math.round(x / (props.orientation === 'horizontal' ? rect.width : rect.height) * 100)))
+}
+
+const handleMouseUp = () => {
+  emit('drag-end')
+  unbindEventListeners()
+}
+
+const unbindEventListeners = () => {
+  window.removeEventListener('mousemove', handleMove)
+  window.removeEventListener('mouseup', handleMouseUp)
+}
+
+onBeforeUnmount(() => {
+  unbindEventListeners()
+})
+</script>

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

@@ -0,0 +1,142 @@
+<template>
+  <div
+    ref="container"
+    class="relative cursor-pointer w-full aspect-[4/2.5] rounded-md select-none"
+    :style="{ background }"
+    @mousedown="handleMouseDown"
+    @touchmove.passive="handleMove"
+    @touchstart.passive="handleTouchStart"
+    @touchend="isDragging = false"
+  >
+    <div class="overflow-hidden">
+      <div class="absolute inset-0 w-full h-full rounded-md bg-linear-to-r from-white to-transparent" />
+      <div class="absolute inset-0 w-full h-full rounded-md bg-linear-to-t from-black to-transparent" />
+    </div>
+    <div
+      class="absolute cursor-pointer"
+      :style="{
+        left: left + '%',
+        top: top + '%'
+      }"
+    >
+      <div
+        class="w-3 h-3 border-2 border-white box-content shadow-md inset-shadow-xs inset-shadow-md rounded-full transform -translate-x-1/2 -translate-y-1/2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        tabindex="0"
+        role="presentation"
+        @keydown.up.prevent="onUp"
+        @keydown.down.prevent="onDown"
+        @keydown.right="onRight"
+        @keydown.left="onLeft"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+
+const calculateHandleLeftPosition = (saturation: number) => saturation * 100
+const calculateHandleTopPosition = (value: number) => -(value * 100) + 100
+
+const emit = defineEmits(['update', 'update:saturation', 'update:value'])
+const props = defineProps<{
+  saturation: number
+  value: number
+  hue: number
+}>()
+
+const container = ref<HTMLElement>()
+const isDragging = ref(false)
+const left = ref(calculateHandleLeftPosition(props.saturation))
+const top = ref(calculateHandleTopPosition(props.value))
+
+const background = computed(() => `hsl(${props.hue}, 100%, 50%)`)
+
+watch(() => props.saturation, () => {
+  if (!isDragging.value) {
+    left.value = calculateHandleLeftPosition(props.saturation)
+  }
+})
+watch(() => props.value, () => {
+  if (!isDragging.value) {
+    top.value = calculateHandleTopPosition(props.value)
+  }
+})
+
+const clamp = (value: number, min: number, max: number) => {
+  return min < max
+    ? (value < min ? min : value > max ? max : value)
+    : (value < max ? max : value > min ? min : value)
+}
+
+const onUp = () => {
+  const value = props.value + 0.1
+  emit('update:value', value <= 1 ? value : 1)
+}
+
+const onDown = () => {
+  const value = props.value - 0.1
+  emit('update:value', value >= 0 ? value : 0)
+}
+
+const onLeft = () => {
+  const saturation = props.saturation - 0.1
+  emit('update:saturation', saturation >= 0 ? saturation : 0)
+}
+
+const onRight = () => {
+  const saturation = props.saturation + 0.1
+  emit('update:saturation', saturation <= 1 ? saturation : 1)
+}
+
+const handleMove = (e: MouseEvent | TouchEvent) => {
+  e.preventDefault()
+  const containerWidth = container.value!.clientWidth
+  const containerHeight = container.value!.clientHeight
+
+  const xOffset = container.value!.getBoundingClientRect().left + window.scrollX
+  const yOffset = container.value!.getBoundingClientRect().top + window.scrollY
+  const pageX = 'touches' in e ? e.touches[0].pageX : e.pageX
+  const pageY = 'touches' in e ? e.touches[0].pageY : e.pageY
+  const l = clamp(pageX - xOffset, 0, containerWidth) / containerWidth * 100
+  const t = clamp(pageY - yOffset, 0, containerHeight) / containerHeight * 100
+
+  left.value = l
+  top.value = t
+
+  const saturation = l
+  const value = -(t / 100) + 1
+
+  emit('update', {
+    s: saturation,
+    v: value,
+    h: props.hue
+  })
+}
+
+const handleMouseDown = () => {
+  isDragging.value = true
+  window.addEventListener('mousemove', handleMove)
+  window.addEventListener('mouseup', handleMouseUp)
+}
+
+const handleMouseUp = (e: MouseEvent) => {
+  handleMove(e)
+  unbindEventListeners()
+  isDragging.value = false
+}
+
+const handleTouchStart = (e: TouchEvent) => {
+  isDragging.value = true
+  handleMove(e)
+}
+
+const unbindEventListeners = () => {
+  window.removeEventListener('mousemove', handleMove)
+  window.removeEventListener('mouseup', handleMouseUp)
+}
+
+onBeforeUnmount(() => {
+  unbindEventListeners()
+})
+</script>

package/src/components/ui/color-picker/index.ts

@@ -0,0 +1,4 @@
+export { default as ColorPicker } from './ColorPicker.vue'
+export { default as Color } from './Color.vue'
+export { default as Gradient } from './Gradient.vue'
+export { default as Checkboard } from './Checkboard.vue'