v-uixy 1.3.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-uixy",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": false,
   "author": {
     "name": "Alan Haber",

package/templates/assets/css/main.css

@@ -164,6 +164,10 @@
     @apply cursor-default border-gray-500 dark:border-gray-500;
   }
 
+  .slider-color-picker::-webkit-slider-thumb {
+    @apply relative z-10 size-4.5 cursor-pointer appearance-none rounded-full border-2 border-solid border-gray-900 bg-gray-100;
+  }
+
   .disable-transitions * {
     transition: none !important;
   }

package/templates/components/Badge/Badge.styles.ts

@@ -5,9 +5,9 @@ export const badgeStyles = styles(
   {
     variant: {
       primary:
-        "bg-gray-800 hover:bg-gray-700 dark:hover:bg-gray-200 dark:bg-gray-300 text-gray-100 dark:text-black dark:disabled:bg-gray-400 dark:disabled:text-gray-500 disabled:text-gray-600",
+        "bg-gray-800 hover:bg-gray-700 border border-transparent dark:hover:bg-gray-200 dark:bg-gray-300 text-gray-100 dark:text-black dark:disabled:bg-gray-400 dark:disabled:text-gray-500 disabled:text-gray-600",
       secondary:
-        "bg-gray-300 hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-700 dark:text-gray-100 text-black dark:disabled:bg-gray-600 dark:disabled:text-gray-700 disabled:text-gray-500",
+        "bg-gray-300 hover:bg-gray-200 border border-transparent dark:bg-gray-900 dark:hover:bg-gray-700 dark:text-gray-100 text-black dark:disabled:bg-gray-600 dark:disabled:text-gray-700 disabled:text-gray-500",
       tertiary:
         "bg-transparent border border-solid border-gray-300 dark:border-gray-800 hover:bg-gray-200 dark:hover:bg-gray-800 text-black dark:text-gray-100 dark:disabled:border-gray-900 dark:disabled:text-gray-500 dark:disabled:bg-gray-800 disabled:bg-gray-300 disabled:text-gray-500 disabled:border-gray-400",
     },

package/templates/components/Checkbox/Checkbox.styles.ts

@@ -13,7 +13,7 @@ export const iconStyles = styles("h-3 w-3", {
   },
 });
 
-export const labelStyles = styles("text-sm", {
+export const labelStyles = styles("text-xs", {
   disabled: {
     true: "text-gray-500 dark:text-gray-600",
     false: "",

package/templates/components/ColorPicker/ColorPicker.component.vue

@@ -0,0 +1,287 @@
+<template>
+  <uixy-card class="p-2 flex flex-col gap-4">
+    <div
+      ref="svRef"
+      class="relative cursor-crosshair overflow-hidden rounded-1 w-64 h-48"
+      :style="svBackgroundStyle"
+      @mousedown="onSvMouseDown"
+      @touchstart.prevent="onSvTouchStart"
+    >
+      <div
+        class="pointer-events-none absolute -mt-2 -ml-2 size-4 rounded-full border-2 shadow-sm transition-colors border-white"
+        :style="svHandleStyle"
+      />
+    </div>
+    <div class="flex flex-col gap-4">
+      <input
+        type="range"
+        min="0"
+        max="360"
+        step="1"
+        v-model.number="hue"
+        :disabled="props.disabled"
+        class="h-2.5 w-full appearance-none rounded-full outline-none slider-color-picker border border-gray-300 dark:border-gray-900"
+        :style="hueSliderStyle"
+      />
+      <input
+        type="range"
+        min="0"
+        max="100"
+        step="1"
+        v-model.number="alpha"
+        :disabled="props.disabled"
+        class="h-2.5 w-full appearance-none rounded-full outline-none slider-color-picker border border-gray-300 dark:border-gray-900"
+        :style="alphaSliderStyle"
+      />
+    </div>
+    <div class="flex gap-2 items-center mt-2 justify-between">
+      <uixy-card class="p-1">
+        <div
+          class="w-12 h-4 rounded-1 shadow-sm"
+          :style="{ backgroundColor: model }"
+        ></div>
+      </uixy-card>
+      <p class="text-xs font-500">{{ model }}</p>
+    </div>
+  </uixy-card>
+</template>
+
+<script setup lang="ts">
+  import type { UixyColorPickerProps } from "./ColorPicker.types";
+  import { UixyCard } from "../Card";
+
+  const props = defineProps<UixyColorPickerProps>();
+
+  const model = defineModel<string>({ default: "#ff0000" });
+
+  const hue = ref(0);
+  const sat = ref(100);
+  const val = ref(100);
+  const alpha = ref(100);
+
+  const clamp = (n: number, min: number, max: number) =>
+    Math.min(max, Math.max(min, n));
+
+  const componentToHex = (c: number) => c.toString(16).padStart(2, "0");
+
+  const rgbToHex = (r: number, g: number, b: number) =>
+    `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
+
+  const rgbToHex8 = (r: number, g: number, b: number, a: number) =>
+    `#${componentToHex(r)}${componentToHex(g)}${componentToHex(
+      b
+    )}${componentToHex(clamp(a, 0, 255))}`;
+
+  const hexToRgbA = (
+    hex?: string
+  ): {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+    hasAlpha: boolean;
+  } | null => {
+    if (!hex) return null;
+    const cleaned = hex.trim().replace(/^#/, "");
+    if (cleaned.length === 6) {
+      const r = parseInt(cleaned.slice(0, 2), 16);
+      const g = parseInt(cleaned.slice(2, 4), 16);
+      const b = parseInt(cleaned.slice(4, 6), 16);
+      return { r, g, b, a: 255, hasAlpha: false } as const;
+    }
+    if (cleaned.length === 8) {
+      const r = parseInt(cleaned.slice(0, 2), 16);
+      const g = parseInt(cleaned.slice(2, 4), 16);
+      const b = parseInt(cleaned.slice(4, 6), 16);
+      const a = parseInt(cleaned.slice(6, 8), 16);
+      return { r, g, b, a, hasAlpha: true } as const;
+    }
+    return null;
+  };
+
+  const hsvToRgb = (h: number, s: number, v: number) => {
+    const c = v * s;
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = v - c;
+
+    let r1 = 0,
+      g1 = 0,
+      b1 = 0;
+
+    if (h >= 0 && h < 60) {
+      r1 = c;
+      g1 = x;
+      b1 = 0;
+    } else if (h < 120) {
+      r1 = x;
+      g1 = c;
+      b1 = 0;
+    } else if (h < 180) {
+      r1 = 0;
+      g1 = c;
+      b1 = x;
+    } else if (h < 240) {
+      r1 = 0;
+      g1 = x;
+      b1 = c;
+    } else if (h < 300) {
+      r1 = x;
+      g1 = 0;
+      b1 = c;
+    } else {
+      r1 = c;
+      g1 = 0;
+      b1 = x;
+    }
+    return {
+      r: Math.round((r1 + m) * 255),
+      g: Math.round((g1 + m) * 255),
+      b: Math.round((b1 + m) * 255),
+    };
+  };
+
+  const rgbToHsv = (r: number, g: number, b: number) => {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b),
+      min = Math.min(r, g, b);
+    const d = max - min;
+    let h = 0;
+    if (d === 0) h = 0;
+    else if (max === r) h = ((g - b) / d) % 6;
+    else if (max === g) h = (b - r) / d + 2;
+    else h = (r - g) / d + 4;
+    h = Math.round(h * 60);
+    if (h < 0) h += 360;
+    const s = max === 0 ? 0 : d / max;
+    const v = max;
+    return { h, s, v };
+  };
+
+  const svRef = ref<HTMLElement | null>(null);
+
+  const rgb = computed(() =>
+    hsvToRgb(hue.value, sat.value / 100, val.value / 100)
+  );
+
+  const updatingFromModel = ref(false);
+
+  watch([hue, sat, val, alpha], () => {
+    if (updatingFromModel.value) return;
+    const a = Math.round((alpha.value / 100) * 255);
+    if (a === 255) {
+      model.value = rgbToHex(rgb.value.r, rgb.value.g, rgb.value.b);
+    } else {
+      model.value = rgbToHex8(rgb.value.r, rgb.value.g, rgb.value.b, a);
+    }
+  });
+
+  const applyModel = (value?: string) => {
+    const parsed = hexToRgbA(value ?? model.value ?? "#ff0000");
+    if (!parsed) return;
+    const hsv = rgbToHsv(parsed.r, parsed.g, parsed.b);
+    updatingFromModel.value = true;
+    hue.value = hsv.h;
+    sat.value = Math.round(hsv.s * 100);
+    val.value = Math.round(hsv.v * 100);
+    alpha.value = clamp(Math.round((parsed.a / 255) * 100), 0, 100);
+
+    let normalized: string;
+    if (!parsed.hasAlpha || parsed.a === 255) {
+      normalized = rgbToHex(parsed.r, parsed.g, parsed.b);
+    } else {
+      normalized = rgbToHex8(parsed.r, parsed.g, parsed.b, parsed.a);
+    }
+    if (model.value !== normalized) model.value = normalized;
+    updatingFromModel.value = false;
+  };
+
+  onMounted(() => applyModel());
+  watch(model, (v) => applyModel(v));
+
+  const svBackgroundStyle = computed(() => ({
+    background: `linear-gradient(to top, black, transparent), linear-gradient(to right, white, hsl(${hue.value}, 100%, 50%))`,
+  }));
+
+  const svHandleStyle = computed(() => ({
+    left: `${sat.value}%`,
+    top: `${100 - val.value}%`,
+  }));
+
+  const hueSliderStyle = computed(() => ({
+    background:
+      "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
+  }));
+
+  const alphaSliderStyle = computed(() => {
+    const { r, g, b } = rgb.value;
+    return {
+      background: `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0), rgba(${r}, ${g}, ${b}, 1))`,
+    } as Record<string, string>;
+  });
+
+  const updateSvFromEvent = (e: MouseEvent) => {
+    if (!svRef.value) return;
+    const rect = svRef.value.getBoundingClientRect();
+    const x = clamp(((e.clientX - rect.left) / rect.width) * 100, 0, 100);
+    const y = clamp(((e.clientY - rect.top) / rect.height) * 100, 0, 100);
+    sat.value = Math.round(x);
+    val.value = Math.round(100 - y);
+  };
+
+  const updateSvFromTouch = (e: TouchEvent) => {
+    if (!svRef.value) return;
+    const t = e.touches?.[0] ?? e.changedTouches?.[0];
+    if (!t) return;
+    const rect = svRef.value.getBoundingClientRect();
+    const x = clamp(((t.clientX - rect.left) / rect.width) * 100, 0, 100);
+    const y = clamp(((t.clientY - rect.top) / rect.height) * 100, 0, 100);
+    sat.value = Math.round(x);
+    val.value = Math.round(100 - y);
+  };
+
+  let dragging = false;
+
+  const onSvMouseDown = (e: MouseEvent) => {
+    if (props.disabled) return;
+
+    dragging = true;
+
+    updateSvFromEvent(e);
+
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+  };
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (!dragging) return;
+
+    updateSvFromEvent(e);
+  };
+
+  const onMouseUp = () => {
+    dragging = false;
+
+    window.removeEventListener("mousemove", onMouseMove);
+    window.removeEventListener("mouseup", onMouseUp);
+  };
+
+  const onSvTouchStart = (e: TouchEvent) => {
+    if (props.disabled) return;
+
+    updateSvFromTouch(e);
+
+    window.addEventListener("touchmove", onTouchMove, { passive: false });
+    window.addEventListener("touchend", onTouchEnd);
+  };
+
+  const onTouchMove = (e: TouchEvent) => {
+    updateSvFromTouch(e);
+  };
+
+  const onTouchEnd = () => {
+    window.removeEventListener("touchmove", onTouchMove);
+    window.removeEventListener("touchend", onTouchEnd);
+  };
+</script>

package/templates/components/ColorPicker/ColorPicker.types.ts

@@ -0,0 +1,3 @@
+export interface UixyColorPickerProps {
+  disabled?: boolean;
+}

package/templates/components/ColorPicker/index.ts

@@ -0,0 +1,4 @@
+import UixyColorPicker from "./ColorPicker.component.vue";
+import type { UixyColorPickerProps } from "./ColorPicker.types";
+
+export { UixyColorPicker, type UixyColorPickerProps };

package/templates/components/Input/Input.component.vue

@@ -27,19 +27,29 @@
         {{ props.label }}
       </label>
     </div>
-    <div v-if="!props.hideHelper" class="h-4">
-      <animate-presence mode="wait" :initial="false">
-        <motion.div
-          :initial="{ opacity: 0, y: '-4px' }"
-          :animate="{ opacity: 1, y: 0 }"
-          :exit="{ opacity: 0, y: '-4px' }"
-          :transition="{ duration: 0.125 }"
-          :key="status"
-        >
-          <p :class="helperStyles({ status })">{{ text }}</p>
-        </motion.div>
-      </animate-presence>
-    </div>
+    <animate-presence mode="wait" :initial="false">
+      <motion.div
+        v-if="!!text"
+        class="overflow-hidden"
+        :initial="{ height: 0 }"
+        :animate="{ height: 'auto' }"
+        :exit="{ height: 0 }"
+        :transition="{ duration: 0.1, ease: 'easeInOut' }"
+      >
+        <animate-presence mode="wait" :initial="false">
+          <motion.p
+            :key="status + text"
+            :class="helperStyles({ status })"
+            :initial="{ opacity: 0, y: -4 }"
+            :animate="{ opacity: 1, y: 0 }"
+            :exit="{ opacity: 0, y: 4 }"
+            :transition="{ duration: 0.12, ease: 'easeInOut', delay: 0.1 }"
+          >
+            {{ text }}
+          </motion.p>
+        </animate-presence>
+      </motion.div>
+    </animate-presence>
   </div>
 </template>
 

package/templates/components/Input/Input.styles.ts

@@ -45,7 +45,7 @@ export const iconStyles = styles(
 );
 
 export const labelStyles = styles(
-  "transition-colors ease-in-out duration-150 text-sm font-500",
+  "transition-colors ease-in-out duration-150 text-xs font-500",
   {
     status: {
       default: "",

package/templates/components/Input/Input.types.ts

@@ -11,7 +11,6 @@ export interface UixyInputProps {
   helperText?: string;
   errorText?: string;
   autoFocus?: boolean;
-  hideHelper?: boolean;
 }
 
 export interface UixyInputEmits {

package/templates/components/Select/Select.component.vue

@@ -52,7 +52,6 @@
               icon="search"
               iconPositon="right"
               placeholder="Search..."
-              hide-helper
               auto-focus
             />
           </div>
@@ -90,19 +89,29 @@
         {{ props.label }}
       </div>
     </div>
-    <div v-if="!props.hideHelper" class="h-4">
-      <animate-presence mode="wait" :initial="false">
-        <motion.div
-          :initial="{ opacity: 0, y: '-4px' }"
-          :animate="{ opacity: 1, y: 0 }"
-          :exit="{ opacity: 0, y: '-4px' }"
-          :transition="{ duration: 0.125 }"
-          :key="status"
-        >
-          <p :class="helperStyles({ status })">{{ text }}</p>
-        </motion.div>
-      </animate-presence>
-    </div>
+    <animate-presence mode="wait" :initial="false">
+      <motion.div
+        v-if="!!text"
+        class="overflow-hidden"
+        :initial="{ height: 0 }"
+        :animate="{ height: 'auto' }"
+        :exit="{ height: 0 }"
+        :transition="{ duration: 0.1, ease: 'easeInOut' }"
+      >
+        <animate-presence mode="wait" :initial="false">
+          <motion.p
+            :key="status + text"
+            :class="helperStyles({ status })"
+            :initial="{ opacity: 0, y: -4 }"
+            :animate="{ opacity: 1, y: 0 }"
+            :exit="{ opacity: 0, y: 4 }"
+            :transition="{ duration: 0.12, ease: 'easeInOut', delay: 0.1 }"
+          >
+            {{ text }}
+          </motion.p>
+        </animate-presence>
+      </motion.div>
+    </animate-presence>
   </div>
 </template>
 

package/templates/components/Select/Select.styles.ts

@@ -27,7 +27,7 @@ export const iconStyles = styles(
 );
 
 export const labelStyles = styles(
-  "transition-colors ease-in-out duration-150 text-sm font-500",
+  "transition-colors ease-in-out duration-150 text-xs font-500",
   {
     status: {
       default: "",

package/templates/components/Select/Select.types.ts

@@ -26,6 +26,5 @@ export type UixySelectProps = {
   helperText?: string;
   errorText?: string;
   autoFocus?: boolean;
-  hideHelper?: boolean;
   max?: number;
 } & (UixyMultipleSelectProps | UixySingleSelectProps);

package/templates/components/Sheet/Sheet.component.vue

@@ -79,4 +79,10 @@
       setScale(1);
     }
   );
+
+  onUnmounted(async () => {
+    await nextTick();
+
+    setScale(1);
+  });
 </script>

package/templates/components/Textarea/Textarea.component.vue

@@ -19,28 +19,34 @@
         {{ props.label }}
       </label>
     </div>
-    <div class="h-4" v-if="!props.hideHelper">
-      <animate-presence mode="wait" :initial="false">
-        <motion.div
-          :initial="{ opacity: 0, y: '-4px' }"
-          :animate="{ opacity: 1, y: 0 }"
-          :exit="{ opacity: 0, y: '-4px' }"
-          :transition="{ duration: 0.125 }"
-          :key="status"
-        >
-          <p
+    <animate-presence mode="wait" :initial="false">
+      <motion.div
+        v-if="!!text"
+        class="overflow-hidden"
+        :initial="{ height: 0 }"
+        :animate="{ height: 'auto' }"
+        :exit="{ height: 0 }"
+        :transition="{ duration: 0.1, ease: 'easeInOut' }"
+      >
+        <animate-presence mode="wait" :initial="false">
+          <motion.p
+            :key="status + text"
             :class="
               helperStyles({
                 status,
                 align: props.alignText ?? 'left',
               })
             "
+            :initial="{ opacity: 0, y: -4 }"
+            :animate="{ opacity: 1, y: 0 }"
+            :exit="{ opacity: 0, y: 4 }"
+            :transition="{ duration: 0.12, ease: 'easeInOut', delay: 0.1 }"
           >
             {{ text }}
-          </p>
-        </motion.div>
-      </animate-presence>
-    </div>
+          </motion.p>
+        </animate-presence>
+      </motion.div>
+    </animate-presence>
   </div>
 </template>
 

package/templates/components/Textarea/Textarea.styles.ts

@@ -21,7 +21,7 @@ export const textareaStyles = styles(
 );
 
 export const labelStyles = styles(
-  "transition-colors ease-in-out duration-150 text-sm font-500",
+  "transition-colors ease-in-out duration-150 text-xs font-500",
   {
     status: {
       default: "",

package/templates/components/Textarea/Textarea.types.ts

@@ -10,5 +10,4 @@ export interface UixyTextareaProps {
   noResize?: boolean;
   rows?: number;
   maxLength?: number;
-  hideHelper?: boolean;
 }

package/templates/components/index.ts

@@ -0,0 +1,35 @@
+export * from "./Accordion";
+export * from "./Alert";
+export * from "./Avatar";
+export * from "./Badge";
+export * from "./Button";
+export * from "./Calendar";
+export * from "./Card";
+export * from "./Checkbox";
+export * from "./Command";
+export * from "./Icon";
+export * from "./IconButton";
+export * from "./Input";
+export * from "./InputOTP";
+export * from "./Link";
+export * from "./Loader";
+export * from "./Modal";
+export * from "./PieChart";
+export * from "./Popover";
+export * from "./Radio";
+export * from "./Scale";
+export * from "./Select";
+export * from "./Separator";
+export * from "./Sheet";
+export * from "./Skeleton";
+export * from "./Slider";
+export * from "./Switch";
+export * from "./TableOfContents";
+export * from "./Tabs";
+export * from "./Textarea";
+export * from "./Theme";
+export * from "./TimePicker";
+export * from "./Toast";
+export * from "./Toggle";
+export * from "./Tooltip";
+export * from "./ColorPicker";

package/templates/components.json

@@ -48,6 +48,12 @@
       "packages": ["motion-v"],
       "composables": []
     },
+    {
+      "name": "ColorPicker",
+      "related-components": ["Card"],
+      "packages": [],
+      "composables": []
+    },
     {
       "name": "Command",
       "related-components": ["Modal", "Card", "Link", "Icon", "Separator"],
@@ -70,7 +76,7 @@
       "name": "Input",
       "related-components": ["Icon"],
       "packages": ["motion-v"],
-      "composables": []
+      "composables": ["useInputValidation"]
     },
     {
       "name": "InputOTP",
@@ -124,7 +130,7 @@
       "name": "Select",
       "related-components": ["Badge", "Icon", "Input"],
       "packages": ["motion-v"],
-      "composables": []
+      "composables": ["useInputValidation"]
     },
     {
       "name": "Separator",

package/templates/composables/useInputValidation.ts

@@ -0,0 +1,89 @@
+import { ref, computed, type Ref } from "vue";
+
+export type UseValidationProps = {
+  validation: ((value: string) => true | string)[];
+  base?: string;
+};
+
+export function useInputValidation<
+  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement
+>({ validation, base }: UseValidationProps) {
+  const value = ref(base ?? "");
+  const touched = ref(false);
+  const error = ref<string | undefined>(undefined);
+  const elRef: Ref<T | null> = ref(null);
+
+  const onInput = (e: Event) => {
+    const target = e.target as T | null;
+    if (error.value) error.value = undefined;
+    if (target) value.value = target.value;
+  };
+
+  const onBlur = () => {
+    touched.value = true;
+  };
+
+  const valid = computed(
+    () => !error.value && validation.every((v) => v(value.value) === true)
+  );
+
+  const status = computed<"valid" | "error" | "default">(() => {
+    if (!touched.value) return "default";
+    if (error.value || !valid.value) return "error";
+    if (valid.value) return "valid";
+
+    return "default";
+  });
+
+  const parsedValidation = computed(() => {
+    const found = validation.find((v) => v(value.value) !== true);
+    return found as ((v: string) => string) | undefined;
+  });
+
+  const errorText = computed(() =>
+    touched.value
+      ? error.value || parsedValidation.value?.(value.value)
+      : undefined
+  );
+
+  const reset = (hard = false) => {
+    touched.value = !hard;
+    error.value = undefined;
+    value.value = "";
+  };
+
+  const setError = async (message: string) => {
+    error.value = message;
+    touched.value = true;
+  };
+
+  const bindings = computed<Record<string, any>>(() => ({
+    ref: elRef,
+    modelValue: value.value,
+    ["onUpdate:modelValue"]: (v: string) => {
+      value.value = v;
+    },
+    status: status.value,
+    errorText: errorText.value,
+    onInput,
+    onBlur,
+    "aria-invalid": status.value === "error",
+  }));
+
+  return {
+    ref: elRef,
+    value,
+    touched,
+    errorText,
+    status,
+    valid,
+    error,
+    reset,
+    setError,
+    onInput,
+    onBlur,
+    bindings,
+  };
+}
+
+export default useInputValidation;