@soft-stech/bootsman-ui-shadcn 1.4.37 → 1.4.38

package/dist/lib/colorUtils.d.ts

@@ -0,0 +1,12 @@
+import { HSLObject } from 'colortranslator';
+export declare const HEX_REGEXP: RegExp;
+export declare const HEX_REGEXP_NO_POUND: RegExp;
+export type HSVColor = {
+    h: number;
+    s: number;
+    v: number;
+};
+export declare function HSLtoHSV(hsl: HSLObject): HSVColor;
+export declare function HSVtoHSL(hsv: HSVColor): HSLObject;
+export declare function normalizeHue(hue: number, dir?: 'left' | 'right'): number;
+export declare function normalizeBrightness(brightness: number): number;

package/dist/lib/colorUtils.js

@@ -0,0 +1,9 @@
+import { d as H, c as o, H as E, a as e, n as r, b as n } from "../colorUtils-DLz-Bcdu.js";
+export {
+  H as HEX_REGEXP,
+  o as HEX_REGEXP_NO_POUND,
+  E as HSLtoHSV,
+  e as HSVtoHSL,
+  r as normalizeBrightness,
+  n as normalizeHue
+};

package/dist/lib/useColorDraggable.d.ts

@@ -0,0 +1,16 @@
+import { MaybeRefOrGetter } from 'vue';
+export declare function useColorDraggable(targetElement: MaybeRefOrGetter<HTMLElement | null>, containerElement: MaybeRefOrGetter<HTMLElement | null>, axis?: 'x' | 'y' | 'both', initialPosition?: {
+    x: number;
+    y: number;
+}, disabled?: MaybeRefOrGetter<boolean | undefined>): {
+    position: import('vue').Ref<{
+        x: number;
+        y: number;
+    }, {
+        x: number;
+        y: number;
+    } | {
+        x: number;
+        y: number;
+    }>;
+};

package/dist/lib/useColorDraggable.js

@@ -0,0 +1,31 @@
+import { ref as f } from "vue";
+import { isClient as g, useEventListener as u, toValue as c, useElementBounding as p } from "@vueuse/core";
+function M(h, i, r = "both", v = { x: 0, y: 0 }, d) {
+  const a = f(v), e = f(), m = (t) => {
+    if (c(d)) return t.preventDefault();
+    const o = c(i), l = p(h), n = p(i);
+    e.value = {
+      x: t.clientX - (o ? t.clientX - n.left.value + o.scrollLeft : l.left.value),
+      y: t.clientY - (o ? t.clientY - n.top.value + o.scrollTop : l.top.value)
+    }, s(t);
+  }, s = (t) => {
+    if (!e.value) return;
+    const o = c(i);
+    let { x: l, y: n } = a.value;
+    o && (r === "x" || r === "both") && (l = Math.min(
+      Math.max(0, (t.clientX - e.value.x) / o.scrollWidth * 100),
+      100
+    )), o && (r === "y" || r === "both") && (n = Math.min(
+      Math.max(0, (t.clientY - e.value.y) / o.scrollHeight * 100),
+      100
+    )), a.value = { x: l, y: n };
+  }, w = () => {
+    e.value && (e.value = void 0);
+  };
+  return g && (u(i, "pointerdown", m), u(window, "pointermove", s), u(window, "pointerup", w)), {
+    position: a
+  };
+}
+export {
+  M as useColorDraggable
+};

package/dist/lib/utils.js

@@ -1,4 +1,4 @@
-import { g as m, t as r, v as e } from "../utils-C11OfLQK.js";
+import { g as m, t as r, v as e } from "../utils-Dn2Y7TRK.js";
 import "vue";
 export {
   m as cn,

package/dist/{utils-C11OfLQK.js → utils-Dn2Y7TRK.js}

@@ -1,6 +1,6 @@
 import { defineComponent as N, provide as Ce, useAttrs as H, openBlock as $, createElementBlock as fe, mergeProps as Q, unref as f, renderSlot as F, inject as X, createBlock as O, withCtx as ee, toValue as _e, toRef as Ie, normalizeClass as ze, h as S } from "vue";
 import { FieldContextKey as Ae, useIsFieldValid as Se, useIsFieldDirty as Me, useIsFieldTouched as Ne, useFieldError as $e, ErrorMessage as Re } from "vee-validate";
-import { bs as je, bt as Ee, av as Ge, bu as Pe } from "./index-DKlaqzM0.js";
+import { bt as je, bu as Ee, av as Ge, bs as Pe } from "./index-0I6LZbPQ.js";
 function ge(e) {
   var t, r, o = "";
   if (typeof e == "string" || typeof e == "number") o += e;

package/dist/{x-BCuyj3Zc.js → x-Cujd6KIO.js}

@@ -1,4 +1,4 @@
-import { h as e } from "./utils-C11OfLQK.js";
+import { h as e } from "./utils-Dn2Y7TRK.js";
 /**
  * @license lucide-vue-next v0.441.0 - ISC
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "1.4.37",
+  "version": "1.4.38",
   "type": "module",
   "files": [
     "dist",
@@ -27,6 +27,7 @@
     "@vueuse/integrations": "^13.0.0",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
+    "colortranslator": "^5.0.0",
     "lodash-es": "^4.17.21",
     "lucide-vue-next": "0.441.0",
     "radix-vue": "1.9.8",

package/src/components/stories/BuiColorPicker.story.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import BuiColorPicker from '@/components/ui/color-picker/BuiColorPicker.vue'
+import {
+  BuiButton,
+  BuiPopover,
+  BuiPopoverTrigger,
+  BuiPopoverContent,
+  BuiSelect,
+  BuiSelectContent,
+  BuiSelectGroup,
+  BuiSelectItem,
+  BuiSelectTrigger,
+  BuiSelectValue
+} from '@/index'
+import { ref } from 'vue'
+
+const sizes: {
+  name: string
+  value: 'lg' | 'sm' | 'xs' | 'md' | 'xl'
+}[] = [
+  {
+    name: 'Extra Small',
+    value: 'xs'
+  },
+  {
+    name: 'Small',
+    value: 'sm'
+  },
+  {
+    name: 'Medium',
+    value: 'md'
+  },
+  {
+    name: 'Large',
+    value: 'lg'
+  },
+  {
+    name: 'Extra Large',
+    value: 'xl'
+  }
+]
+
+const pickedColor = ref<string>('#29CCFF')
+const currentSize = ref<'lg' | 'sm' | 'xs' | 'md' | 'xl' | undefined>(undefined)
+</script>
+
+<template>
+  <Story title="BuiColorPicker" autoPropsDisabled :layout="{ type: 'grid', width: '33%' }">
+    <Variant key="basic" title="Basic">
+      <div class="flex flex-col gap-4 p-4">
+        <BuiColorPicker />
+      </div>
+    </Variant>
+
+    <Variant key="defaultColor" title="Default color">
+      <div class="flex flex-col gap-4 p-4">
+        <BuiColorPicker :defaultValue="'#29CCFF'" />
+      </div>
+    </Variant>
+
+    <Variant key="disabled" title="Disabled">
+      <div class="flex flex-col gap-4 p-4">
+        <BuiColorPicker disabled />
+      </div>
+    </Variant>
+
+    <Variant key="sizes" title="Available sizes">
+      <div class="flex flex-col gap-4 p-4">
+        <BuiSelect v-model="currentSize">
+          <BuiSelectTrigger class="w-[180px]">
+            <BuiSelectValue placeholder="Select size" />
+          </BuiSelectTrigger>
+          <BuiSelectContent>
+            <BuiSelectGroup>
+              <BuiSelectItem v-for="size in sizes" :key="size.value" :value="size.value">
+                {{ size.name }}
+              </BuiSelectItem>
+            </BuiSelectGroup>
+          </BuiSelectContent>
+        </BuiSelect>
+
+        <BuiColorPicker :size="currentSize" :defaultValue="'#008422'" />
+      </div>
+    </Variant>
+    <Variant key="withPopover" title="With Popover">
+      <div class="flex w-full flex-row justify-center pt-4">
+        <BuiPopover>
+          <BuiPopoverTrigger>
+            <BuiButton
+              variant="outline"
+              class="flex flex-row gap-2 text-sm"
+              :style="{ color: pickedColor, borderColor: pickedColor }"
+            >
+              <span :style="{ backgroundColor: pickedColor }" class="size-3 rounded-full" />
+              <span>Pick a color</span>
+            </BuiButton>
+          </BuiPopoverTrigger>
+          <BuiPopoverContent class="w-80">
+            <div class="flex flex-col gap-4 p-4">
+              <BuiColorPicker v-model="pickedColor" />
+            </div>
+          </BuiPopoverContent>
+        </BuiPopover>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/stories/BuiInput.story.vue

@@ -3,6 +3,7 @@ import BuiInput from '@/components/ui/input/BuiInput.vue'
 import BuiLabel from '@/components/ui/label/BuiLabel.vue'
 import { BuiPasswordInput } from '@/components/ui/input'
 import { BuiBadgedInput } from '@/components/ui/input'
+import { BuiColorInput } from '@/components/ui/input'
 </script>
 
 <template>
@@ -81,5 +82,14 @@ import { BuiBadgedInput } from '@/components/ui/input'
         </div>
       </div>
     </Variant>
+
+    <Variant title="Color picker">
+      <div class="flex items-center space-x-2 p-1">
+        <div class="grid w-full max-w-sm items-center gap-1.5">
+          <BuiLabel for="colorPicker">Color</BuiLabel>
+          <BuiColorInput id="colorPicker" :defaultValue="'#E05FA3'" />
+        </div>
+      </div>
+    </Variant>
   </Story>
 </template>

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

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { ref, computed, nextTick } from 'vue'
+import { watchThrottled, watchPausable } from '@vueuse/core'
+import { Primitive } from 'radix-vue'
+import { ColorTranslator } from 'colortranslator'
+import { colorPickerSelectorVariants, colorPickerTrackVariants } from '.'
+import {
+  type HSVColor,
+  HSLtoHSV,
+  HSVtoHSL,
+  normalizeBrightness,
+  normalizeHue
+} from '@/lib/colorUtils'
+import { useColorDraggable } from '@/lib/useColorDraggable'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<{
+    as?: string
+    disabled?: boolean
+    size?: NonNullable<Parameters<typeof colorPickerSelectorVariants>[0]>['size']
+    defaultValue?: string
+    format?: 'hex' | 'rgb' | 'hsl' | 'cmyk' | 'lab'
+    throttle?: number
+    ui?: {
+      selectorClass?: string
+      trackClass?: string
+    }
+  }>(),
+  {
+    as: 'div',
+    format: 'hex',
+    defaultValue: '#FFFFFF',
+    throttle: 50
+  }
+)
+
+const modelValue = defineModel<string>(undefined)
+
+const pickedColor = computed<HSVColor>({
+  get() {
+    try {
+      const color = new ColorTranslator(modelValue.value || props.defaultValue)
+
+      return HSLtoHSV(color.HSLObject)
+    } catch (_) {
+      return { h: 0, s: 0, v: 100 }
+    }
+  },
+
+  set(value) {
+    const color = new ColorTranslator(HSVtoHSL(value), {
+      labUnit: 'percent',
+      cmykUnit: 'percent',
+      cmykFunction: 'cmyk'
+    })
+
+    switch (props.format) {
+      case 'rgb':
+        modelValue.value = color.RGB
+        break
+      case 'hsl':
+        modelValue.value = color.HSL
+        break
+      case 'cmyk':
+        modelValue.value = color.CMYK
+        break
+      case 'lab':
+        modelValue.value = color.CIELab
+        break
+      case 'hex':
+      default:
+        modelValue.value = color.HEX
+    }
+  }
+})
+
+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 { position: selectorThumbPosition } = useColorDraggable(
+  selectorThumbRef,
+  selectorRef,
+  'both',
+  {
+    x: pickedColor.value.s,
+    y: normalizeBrightness(pickedColor.value.v)
+  },
+  props.disabled
+)
+
+const { position: trackThumbPosition } = useColorDraggable(
+  trackThumbRef,
+  trackRef,
+  'y',
+  {
+    x: 0,
+    y: normalizeHue(pickedColor.value.h, 'right')
+  },
+  props.disabled
+)
+
+const trackThumbColor = computed(
+  () =>
+    new ColorTranslator(
+      HSVtoHSL({
+        h: normalizeHue(trackThumbPosition.value.y),
+        s: 100,
+        v: 100
+      })
+    ).HEX
+)
+
+const selectorStyle = computed(() => ({
+  backgroundColor: trackThumbColor.value
+}))
+
+const selectorThumbStyle = computed(() => ({
+  backgroundColor: new ColorTranslator(modelValue.value || props.defaultValue).HEX,
+  left: `${selectorThumbPosition.value.x}%`,
+  top: `${selectorThumbPosition.value.y}%`
+}))
+
+const trackThumbStyle = computed(() => ({
+  backgroundColor: trackThumbColor.value,
+  top: `${trackThumbPosition.value.y}%`
+}))
+
+const { pause: pauseWatchColor, resume: resumeWatchColor } = watchPausable(pickedColor, (hsv) => {
+  selectorThumbPosition.value = {
+    x: hsv.s,
+    y: normalizeBrightness(hsv.v)
+  }
+  trackThumbPosition.value = {
+    x: 0,
+    y: normalizeHue(hsv.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 }
+)
+</script>
+<template>
+  <Primitive
+    :as="as"
+    class="data-[disabled]:opacity-75"
+    :data-disabled="disabled ? true : undefined"
+  >
+    <div class="flex gap-4">
+      <div ref="selectorRef" :class="colorPickerSelectorVariants({ size })" :style="selectorStyle">
+        <div class="relative h-full w-full rounded-md" data-color-picker-background>
+          <div
+            ref="selectorThumbRef"
+            :class="
+              cn(
+                'absolute size-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full ring-2 ring-background data-[disabled]:cursor-not-allowed',
+                ui?.selectorClass
+              )
+            "
+            :style="selectorThumbStyle"
+            :data-disabled="disabled ? true : undefined"
+          ></div>
+        </div>
+      </div>
+      <div ref="trackRef" :class="colorPickerTrackVariants({ size })" data-color-picker-track>
+        <div
+          ref="trackThumbRef"
+          :class="
+            cn(
+              'absolute size-4 -translate-x-[4px] -translate-y-1/2 transform cursor-pointer rounded-full ring-2 ring-background data-[disabled]:cursor-not-allowed rtl:translate-x-[4px]',
+              ui?.trackClass
+            )
+          "
+          :style="trackThumbStyle"
+          :data-disabled="disabled ? true : undefined"
+        ></div>
+      </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>

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

@@ -0,0 +1,33 @@
+import { cva } from 'class-variance-authority'
+
+export { default as BuiColorPicker } from './BuiColorPicker.vue'
+
+export const colorPickerSelectorVariants = cva('touch-none rounded-md', {
+  variants: {
+    size: {
+      xs: 'w-32 h-32',
+      sm: 'w-36 h-36',
+      md: 'w-40 h-40',
+      lg: 'w-44 h-44',
+      xl: 'w-48 h-48'
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+})
+
+export const colorPickerTrackVariants = cva('relative w-[8px] touch-none rounded-md', {
+  variants: {
+    size: {
+      xs: 'h-32',
+      sm: 'h-36',
+      md: 'h-40',
+      lg: 'h-44',
+      xl: 'h-48'
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+})

package/src/components/ui/input/BuiColorInput.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { BuiInput, BuiPopover, BuiPopoverTrigger, BuiPopoverContent } from '@/index'
+import { useElementBounding } from '@vueuse/core'
+import { ref, watch } from 'vue'
+import { Palette as PaletteIcon } from 'lucide-vue-next'
+import BuiColorPicker from '../color-picker/BuiColorPicker.vue'
+import { HEX_REGEXP, HEX_REGEXP_NO_POUND } from '@/lib/colorUtils'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    defaultValue?: string
+    disabled?: boolean
+    ui?: {
+      badgeClass?: string
+      inputClass?: string
+    }
+  }>(),
+  {
+    defaultValue: '#FFFFFF',
+    disabled: false
+  }
+)
+
+const modelValue = defineModel<string>(undefined)
+
+const paletteBadge = ref<HTMLDivElement | null>(null)
+const { width } = useElementBounding(paletteBadge)
+const MAGIC_NUMBER = 12 // 8 (right-2) + 4 (just some offset)
+
+const validatedDefaultValue = () => {
+  if (modelValue.value && HEX_REGEXP.test(modelValue.value)) return modelValue.value
+
+  if (props.defaultValue && HEX_REGEXP.test(props.defaultValue)) return props.defaultValue
+
+  return '#FFFFFF'
+}
+
+const writtenColor = ref<string>(validatedDefaultValue().substring(1))
+const pickedColor = ref<string>(validatedDefaultValue())
+
+watch(writtenColor, () => {
+  if (HEX_REGEXP_NO_POUND.test(writtenColor.value)) {
+    modelValue.value = `#${writtenColor.value}`
+    pickedColor.value = `#${writtenColor.value}`
+  }
+})
+
+watch(pickedColor, () => {
+  modelValue.value = pickedColor.value
+  writtenColor.value = pickedColor.value.substring(1)
+})
+</script>
+
+<template>
+  <BuiPopover>
+    <BuiPopoverTrigger>
+      <div class="nowrap relative flex w-32 flex-row font-medium uppercase text-foreground">
+        <div
+          ref="paletteBadge"
+          :class="cn('absolute left-2 top-1.5 flex flex-row items-center gap-1', ui?.badgeClass)"
+        >
+          <PaletteIcon class="h-4 w-4 shrink-0" />
+          <div class="h-4 w-4 rounded" :style="{ backgroundColor: pickedColor }"></div>
+          <div class="font-bold text-foreground/[.56]">#</div>
+        </div>
+        <BuiInput
+          v-model="writtenColor"
+          :id="id"
+          :style="{ paddingLeft: width + MAGIC_NUMBER + 'px' }"
+          :disabled="disabled"
+          :class="ui?.inputClass"
+        />
+      </div>
+    </BuiPopoverTrigger>
+    <BuiPopoverContent class="w-fit" align="start">
+      <BuiColorPicker
+        v-model="pickedColor"
+        format="hex"
+        :disabled="disabled"
+        :ui="{ selectorClass: 'ring-popover', trackClass: 'ring-popover' }"
+      />
+    </BuiPopoverContent>
+  </BuiPopover>
+</template>

package/src/components/ui/input/index.ts

@@ -3,6 +3,7 @@ import { cva } from 'class-variance-authority'
 export { default as BuiInput } from './BuiInput.vue'
 export { default as BuiPasswordInput } from './BuiPasswordInput.vue'
 export { default as BuiBadgedInput } from './BuiBadgedInput.vue'
+export { default as BuiColorInput } from './BuiColorInput.vue'
 
 export const inputVariants = cva(
   'flex h-8 w-full rounded bg-background border px-2 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-30 dark:disabled:opacity-55 read-only:opacity-30 dark:read-only:opacity-55 aria-[invalid=true]:border-destructive-foreground',

package/src/index.ts

@@ -40,6 +40,7 @@ export * from './components/ui/scroll-area/index'
 export * from './components/ui/collapsible/index'
 export * from './components/ui/auto-form/index'
 export * from './components/ui/sheet/index'
+export * from './components/ui/color-picker/index'
 
 export * from './lib/utils'
 export { default as tailwind } from './tailwind-preset'

package/src/lib/colorUtils.ts

@@ -0,0 +1,43 @@
+import { type HSLObject } from 'colortranslator'
+
+export const HEX_REGEXP = /^#(?:(?:[\da-f]{3}){1,2}|(?:[\da-f]{4}){1,2})$/i
+export const HEX_REGEXP_NO_POUND = /^(?:(?:[\da-f]{3}){1,2}|(?:[\da-f]{4}){1,2})$/i
+
+export type HSVColor = {
+  h: number
+  s: number
+  v: number
+}
+
+export function HSLtoHSV(hsl: HSLObject): HSVColor {
+  const x = hsl.S * (hsl.L < 50 ? hsl.L : 100 - hsl.L)
+  const v = hsl.L + x / 100
+
+  return {
+    h: hsl.H,
+    s: hsl.L === 0 ? hsl.S : (2 * x) / v,
+    v
+  }
+}
+
+export function HSVtoHSL(hsv: HSVColor): HSLObject {
+  const x = ((200 - hsv.s) * hsv.v) / 100
+
+  return {
+    H: hsv.h,
+    S: x === 0 || x === 200 ? 0 : Math.round((hsv.s * hsv.v) / (x <= 100 ? x : 200 - x)),
+    L: x / 2
+  }
+}
+
+export function normalizeHue(hue: number, dir: 'left' | 'right' = 'left'): number {
+  if (dir === 'right') {
+    return (hue * 100) / 360
+  }
+
+  return (hue / 100) * 360
+}
+
+export function normalizeBrightness(brightness: number): number {
+  return 100 - brightness
+}