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

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/components/ui/table/BuiDataTable.vue

@@ -11,7 +11,6 @@ import type {
   Column,
   ColumnDef,
   ColumnOrderState,
-  ColumnSizingState,
   PaginationState,
   Row,
   RowSelectionState,
@@ -25,7 +24,7 @@ import {
   getSortedRowModel,
   useVueTable
 } from '@tanstack/vue-table'
-import { computed, watchEffect, ref, watch } from 'vue'
+import { computed, watchEffect, ref, watch, onMounted, onBeforeMount, onUnmounted } from 'vue'
 import {
   BuiTable,
   BuiTableBody,
@@ -48,7 +47,9 @@ import { BuiPopover, BuiPopoverContent, BuiPopoverTrigger } from '@/components/u
 import { BuiScrollArea } from '@/components/ui/scroll-area'
 import { BuiButton } from '@/components/ui/button'
 import { Settings2Icon } from 'lucide-vue-next'
-import { useElementSize } from '@vueuse/core'
+import { useElementSize, useEventListener } from '@vueuse/core'
+import { useResizeColumns } from '@/lib/useResizeColumns'
+import { isEqual } from 'lodash-es'
 
 const NO_GROUP_KEY = '#UNDEFINED#'
 
@@ -67,6 +68,7 @@ const props = withDefaults(
     renderSubComponent?: (row: Row<TData>) => (() => any) | undefined
     freezeHeader?: boolean
     enableColumnListControl?: boolean
+    enableColumnResizing?: boolean
     columnSearchPlaceholder?: string
     columnSearchNotFound?: string
     columnResetVisibility?: string
@@ -84,7 +86,8 @@ const props = withDefaults(
     totalItems: 0,
     columnSearchPlaceholder: 'Column name',
     columnSearchNotFound: 'Not found',
-    columnResetVisibility: 'Reset column visibility'
+    columnResetVisibility: 'Reset column visibility',
+    enableColumnResizing: true
   }
 )
 
@@ -92,8 +95,8 @@ const sorting = defineModel<SortingState>('sorting')
 const pagination = defineModel<PaginationState>('pagination')
 const rowSelection = defineModel<RowSelectionState>('selection')
 const columnVisibility = defineModel<VisibilityState>('columnVisibility')
-const columnSizing = defineModel<ColumnSizingState>('columnSizing')
 const columnOrder = defineModel<ColumnOrderState>('columnOrder')
+const columnSizing = defineModel<Record<string, number>>('columnSizing')
 const computedItems = computed(() =>
   props.manualPagination ? props.totalItems : props.data.length
 )
@@ -128,18 +131,12 @@ const table = useVueTable({
   onColumnVisibilityChange: (updaterOrValue) => {
     valueUpdater(updaterOrValue, columnVisibility)
   },
-  onColumnSizingChange: (updaterOrValue) => {
-    valueUpdater(updaterOrValue, columnSizing)
-  },
   onColumnOrderChange: (updaterOrValue) => {
     valueUpdater(updaterOrValue, columnOrder)
   },
   autoResetPageIndex: false,
   manualPagination: props.manualPagination, // set to false to enable client-side pagination
   manualSorting: props.manualSorting,
-  enableColumnResizing: true,
-  columnResizeMode: 'onChange',
-  columnResizeDirection: 'ltr',
   state: {
     get sorting() {
       return sorting.value
@@ -153,9 +150,6 @@ const table = useVueTable({
     get columnVisibility() {
       return columnVisibility.value
     },
-    get columnSizing() {
-      return columnSizing.value
-    },
     get columnOrder() {
       return columnOrder.value
     }
@@ -241,6 +235,39 @@ watch(columnsListIds, () => {
 
 const tableHeaderRef = ref<InstanceType<typeof BuiTableHeader> | null>(null)
 const { height } = useElementSize(tableHeaderRef)
+
+const {
+  tableHeaderElement,
+  calculatedColumnSizing,
+  isResizing,
+  resizingCellId,
+  resetCells,
+  handleResizeControlMouseDown,
+  handleResizeControlMouseUp,
+  setInitialColumnWidths,
+  setProvidedCellWidths
+} = useResizeColumns()
+
+onBeforeMount(() => {
+  calculatedColumnSizing.value = columnSizing.value
+})
+
+onMounted(() => {
+  if (tableHeaderRef.value) {
+    tableHeaderElement.value = tableHeaderRef.value
+
+    setProvidedCellWidths(columnSizing.value)
+    setInitialColumnWidths()
+  }
+})
+
+watchEffect(() => {
+  if (!isEqual(calculatedColumnSizing.value, columnSizing.value)) {
+    columnSizing.value = calculatedColumnSizing.value
+  }
+})
+
+useEventListener(document, 'mouseup', handleResizeControlMouseUp)
 </script>
 
 <template>
@@ -272,7 +299,9 @@ const { height } = useElementSize(tableHeaderRef)
             <BuiCommandInput
               :placeholder="columnSearchPlaceholder"
               v-model="searchColumn"
-              @input="(event) => (searchColumn = event.target.value)"
+              @input="
+                (event: InputEvent) => (searchColumn = (event.target as HTMLInputElement)?.value)
+              "
             />
             <BuiCommandList>
               <BuiScrollArea class="h-[300px]">
@@ -295,10 +324,14 @@ const { height } = useElementSize(tableHeaderRef)
     </template>
     <BuiTableHeader v-if="tableHeaders" :freeze-header="props.freezeHeader" ref="tableHeaderRef">
       <BuiTableHead
-        v-for="header in tableHeaders"
+        v-for="(header, index) in tableHeaders"
         :key="header.id"
-        :style="{ ...getPinningStyle(header.column), width: header.getSize() + 'px' }"
+        :id="`${header.id}_cell`"
+        :style="{
+          ...getPinningStyle(header.column)
+        }"
         :freeze-header="props.freezeHeader"
+        :can-resize="header.column.getCanResize() ? true : undefined"
       >
         <FlexRender
           v-if="!header.isPlaceholder"
@@ -306,12 +339,15 @@ const { height } = useElementSize(tableHeaderRef)
           :props="header.getContext()"
         />
         <div
-          @dblclick="() => header.column.resetSize()"
-          @mousedown="header.getResizeHandler()?.($event)"
+          v-if="
+            enableColumnResizing && index < tableHeaders.length - 1 && header.column.getCanResize()
+          "
+          @dblclick="resetCells"
+          @mousedown="() => handleResizeControlMouseDown(header.id, props.enableColumnResizing)"
           :className="
             cn(
               'absolute top-0 right-0 h-full w-1 bg-muted-foreground opacity-0 cursor-col-resize select-none touch-none hover:opacity-50',
-              header.column.getIsResizing() ? 'bg-primary opacity-50' : ''
+              isResizing && resizingCellId === header.id ? 'bg-primary opacity-50' : ''
             )
           "
         />

package/src/components/ui/table/BuiTableHead.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
   <th
     :class="
       cn(
-        'h-10 text-left align-middle text-foreground [&:has([role=checkbox])]:pr-0 ',
+        'relative h-10 text-left align-middle text-foreground [&:has([role=checkbox])]:pr-0 ',
         props.class,
         props.freezeHeader ? 'bg-background p-0' : 'bg-foreground/[0.04] p-0'
       )
@@ -19,10 +19,14 @@ const props = defineProps<{
   >
     <div
       class="flex h-full items-center !border-b !border-border/[0.16]"
-      :class="{ 'bg-foreground/[0.04]': props.freezeHeader }"
+      :class="{
+        'bg-foreground/[0.04]': props.freezeHeader,
+        'header-cell_wrapper': !props.freezeHeader
+      }"
     >
       <div
         class="flex h-full w-full items-center whitespace-nowrap border-r border-border/[0.16] px-2 text-sm font-semibold"
+        :class="{ 'header-cell_wrapper': props.freezeHeader }"
       >
         <slot />
       </div>

package/src/components/ui/table/BuiTableHeader.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
+import { ref } from 'vue'
+
+const headRef = ref<HTMLElement | null>(null)
+
+defineExpose({ headRef })
 
 const props = defineProps<{
   class?: string
@@ -9,6 +14,7 @@ const props = defineProps<{
 
 <template>
   <thead
+    ref="headRef"
     :class="
       cn(
         '[&_tr]:border-border/[0.16]',

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
+}

package/src/lib/useColorDraggable.ts

@@ -0,0 +1,75 @@
+import { type MaybeRefOrGetter, ref } from 'vue'
+import { useElementBounding, useEventListener, isClient, toValue } from '@vueuse/core'
+
+export 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 handlePointerDown = (event: PointerEvent) => {
+    if (toValue(disabled)) return event.preventDefault()
+
+    const container = toValue(containerElement)
+    const targetRect = useElementBounding(targetElement)
+    const containerRect = useElementBounding(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)
+    }
+
+    handlePointerMove(event)
+  }
+  const handlePointerMove = (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 }
+  }
+  const handlePointerUp = () => {
+    if (!pressedDelta.value) {
+      return
+    }
+
+    pressedDelta.value = undefined
+  }
+
+  if (isClient) {
+    useEventListener(containerElement, 'pointerdown', handlePointerDown)
+    useEventListener(window, 'pointermove', handlePointerMove)
+    useEventListener(window, 'pointerup', handlePointerUp)
+  }
+
+  return {
+    position
+  }
+}