@soft-stech/bootsman-ui-shadcn 1.4.36 → 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/useResizeColumns.d.ts

@@ -0,0 +1,127 @@
+export declare function useResizeColumns(): {
+    tableHeaderElement: import('vue').Ref<({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly class?: string | undefined;
+            readonly freezeHeader?: boolean | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{
+            class?: string;
+            freezeHeader?: boolean;
+        }> & Readonly<{}>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<{
+            class?: string;
+            freezeHeader?: boolean;
+        }> & Readonly<{}>, {
+            headRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{}> & Omit<Readonly<{
+        class?: string;
+        freezeHeader?: boolean;
+    }> & Readonly<{}>, "headRef"> & import('vue').ShallowUnwrapRef<{
+        headRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    }> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {}): any;
+        };
+    }) | null, ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly class?: string | undefined;
+            readonly freezeHeader?: boolean | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{
+            class?: string;
+            freezeHeader?: boolean;
+        }> & Readonly<{}>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<{
+            class?: string;
+            freezeHeader?: boolean;
+        }> & Readonly<{}>, {
+            headRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{}> & Omit<Readonly<{
+        class?: string;
+        freezeHeader?: boolean;
+    }> & Readonly<{}>, "headRef"> & import('vue').ShallowUnwrapRef<{
+        headRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    }> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {}): any;
+        };
+    }) | null>;
+    calculatedColumnSizing: import('vue').Ref<Record<string, number> | undefined, Record<string, number> | undefined>;
+    isResizing: import('vue').Ref<boolean, boolean>;
+    resizingCellId: import('vue').Ref<string, string>;
+    handleResizeControlMouseDown: (cellId: string, enableColumnResizing: boolean) => void;
+    handleResizeControlMouseUp: () => void;
+    resetCells: () => void;
+    setInitialColumnWidths: () => void;
+    setProvidedCellWidths: (columnSizing: Record<string, number> | undefined) => void;
+};

package/dist/lib/useResizeColumns.js

@@ -0,0 +1,89 @@
+import { ref as n } from "vue";
+import "vee-validate";
+import { useEventListener as R } from "@vueuse/core";
+function A() {
+  const u = n(!1), o = n(""), r = n(""), i = n(void 0), d = n(90), m = n(void 0), a = n(null), v = n(void 0), w = (e) => {
+    a.value && a.value.headRef && [...a.value.headRef.querySelectorAll("th")].forEach((l) => {
+      const s = l.id.split("_")[0];
+      e && e[s] && (l.style.width = e[s] + "px");
+    });
+  }, W = () => {
+    if (a.value && a.value.headRef)
+      return [...a.value.headRef.querySelectorAll("th")].reduce((l, s) => {
+        const h = s.id.split("_")[0];
+        return {
+          ...l,
+          [h]: {
+            cell: s,
+            initialWidth: s.offsetWidth
+          }
+        };
+      }, {});
+  }, g = (e, t) => {
+    if (t && (u.value = !0, o.value = e, i.value)) {
+      const l = i.value[e].cell;
+      let s = l.nextElementSibling;
+      s || (s = l.previousElementSibling), r.value = s ? s.id.split("_")[0] : "", v.value = R(document, "mousemove", z);
+    }
+  }, x = () => {
+    if (u.value && (u.value = !1, o.value = "", r.value = "", v.value && v.value(), i.value)) {
+      const e = {};
+      for (let t in i.value) {
+        const l = i.value[t], s = l.cell.hasAttribute("can-resize") ? Math.floor(l.cell.offsetWidth) <= d.value ? d.value : l.cell.offsetWidth : l.initialWidth;
+        l.cell.style.width = s + "px", e[t] = s;
+      }
+      m.value = e;
+    }
+  }, y = (e) => {
+    if (!e.nextElementSibling) {
+      const t = e.querySelector(".header-cell_wrapper");
+      if (t)
+        return parseInt(window.getComputedStyle(t).paddingRight);
+    }
+    return 0;
+  }, c = (e, t, l) => {
+    if (!e || !t) {
+      o.value = "", r.value = "";
+      return;
+    }
+    const s = l.movementX, h = s < 0 ? "left" : "right", f = Math.floor(parseInt(e.style.width)) + s, p = Math.floor(parseInt(t.style.width)) - s;
+    if (h === "left")
+      if (f <= d.value || !e.hasAttribute("can-resize")) {
+        const C = e.previousElementSibling;
+        c(C, t, l);
+      } else
+        e.style.width = f + "px", t.style.width = p + "px";
+    else if (p <= d.value + y(t) || !t.hasAttribute("can-resize")) {
+      const C = t.nextElementSibling;
+      c(e, C, l);
+    } else
+      e.style.width = f + "px", t.style.width = p + "px";
+  }, z = (e) => {
+    if (e.preventDefault(), i.value) {
+      const t = i.value[o.value]?.cell, l = i.value[r.value]?.cell;
+      c(t, l, e);
+    }
+  };
+  return {
+    tableHeaderElement: a,
+    calculatedColumnSizing: m,
+    isResizing: u,
+    resizingCellId: o,
+    handleResizeControlMouseDown: g,
+    handleResizeControlMouseUp: x,
+    resetCells: () => {
+      if (i.value)
+        for (let e in i.value)
+          i.value[e].cell.style.width = i.value[e].initialWidth + "px";
+    },
+    setInitialColumnWidths: () => {
+      if (i.value = W(), i.value)
+        for (let e in i.value)
+          i.value[e].cell.style.width || (i.value[e].cell.style.width = i.value[e].initialWidth + "px");
+    },
+    setProvidedCellWidths: w
+  };
+}
+export {
+  A as useResizeColumns
+};

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.36",
+  "version": "1.4.38",
   "type": "module",
   "files": [
     "dist",
@@ -27,6 +27,8 @@
     "@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",
     "sortablejs": "^1",
@@ -40,6 +42,7 @@
     "@rushstack/eslint-patch": "1.10.4",
     "@tsconfig/node18": "18.2.4",
     "@types/jsdom": "21.1.7",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "20.12.14",
     "@vitejs/plugin-vue": "5.1.3",
     "@vitest/coverage-v8": "2.1.1",

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/BuiDataTable.story.vue

@@ -8,7 +8,6 @@ import type {
   PaginationState,
   Row,
   RowSelectionState,
-  ColumnSizingState,
   VisibilityState,
   ColumnOrderState
 } from '@tanstack/vue-table'
@@ -69,7 +68,8 @@ const columns: ColumnDef<Task>[] = [
   },
   {
     accessorKey: 'title',
-    header: 'Title'
+    header: 'Title',
+    enableResizing: false
   },
   {
     accessorKey: 'status',
@@ -108,7 +108,7 @@ function updateSelection(val: RowSelectionState) {
 }
 
 const columnVisibility = ref<VisibilityState>({ hiddenColumn: false })
-const columnSizing = ref<ColumnSizingState>({ title: 300 })
+const columnSizing = ref<Record<string, number>>({ title: 350, status: 200 })
 const columnOrder = ref<ColumnOrderState>()
 
 type GroupBy = 'none' | 'status' | 'priority'
@@ -190,8 +190,8 @@ function groupName(group: string | number) {
         :data="sortedData"
         v-model:sorting="sorting"
         v-model:pagination="pagination"
-        v-model:column-sizing="columnSizing"
         v-model:column-visibility="columnVisibility"
+        v-model:column-sizing="columnSizing"
         v-model:column-order="columnOrder"
         @update:selection="updateSelection"
         :total-items="totalItems"

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>