v-uixy 1.2.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-uixy",
-  "version": "1.2.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/PieChart/PieChart.component.vue

@@ -0,0 +1,218 @@
+<template>
+  <div ref="wrapperRef" class="relative w-full aspect-square">
+    <svg
+      ref="svgRef"
+      width="100%"
+      height="100%"
+      :viewBox="`0 0 ${size} ${size}`"
+      role="img"
+      aria-label="Pie chart"
+      class="block select-none pointer-events-none"
+    >
+      <motion.g
+        :initial="{ transform: `rotate(0, ${center}, ${center})` }"
+        :animate="{ transform: `rotate(0, ${center}, ${center})` }"
+        :transition="groupTransition"
+      >
+        <circle
+          :cx="center"
+          :cy="center"
+          :r="radius"
+          fill="none"
+          class="stroke-gray-300 dark:stroke-gray-800"
+          :stroke-width="thickness"
+          vector-effect="non-scaling-stroke"
+          shape-rendering="geometricPrecision"
+        />
+        <template v-if="isReady">
+          <motion.circle
+            v-for="seg in segmentsTimed"
+            :key="seg.key"
+            :initial="{
+              strokeDasharray: `0 ${circumference}`,
+              strokeDashoffset: seg.offset,
+              opacity: 0.8,
+            }"
+            :animate="{
+              strokeDasharray: `${seg.length} ${circumference}`,
+              strokeDashoffset: seg.offset,
+              opacity: 1,
+            }"
+            :transition="transitionFor(seg)"
+            :cx="center"
+            :cy="center"
+            :r="radius"
+            fill="none"
+            :stroke="seg.color"
+            :stroke-width="thickness - 2"
+            stroke-linecap="butt"
+            vector-effect="non-scaling-stroke"
+            shape-rendering="geometricPrecision"
+          />
+        </template>
+      </motion.g>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, onMounted, onUnmounted, ref, toRefs, watch } from "vue";
+  import { motion } from "motion-v";
+  import type { UixyPieChartProps } from "./PieChart.types";
+
+  type SegBase = { key: string; length: number; offset: number; color: string };
+  type SegTimed = SegBase & { dur: number; delay: number };
+
+  const INITIAL_TOTAL_DURATION = 1.2;
+  const UPDATE_DURATION = 0.45;
+  const OVERLAP = 0.02;
+  const SIZE_EPSILON = 0.5;
+  const EASING = "linear";
+
+  const props = withDefaults(defineProps<UixyPieChartProps>(), {
+    thickness: 18,
+    animate: true,
+  });
+
+  const wrapperRef = ref<HTMLElement | null>(null);
+  const svgRef = ref<SVGSVGElement | null>(null);
+  const measuredSize = ref<number>(180);
+  const roRef = ref<ResizeObserver | null>(null);
+  const isReady = ref(false);
+  const initialTimer = ref<ReturnType<typeof setTimeout> | null>(null);
+
+  const size = computed(() => measuredSize.value);
+  const center = computed(() => measuredSize.value / 2);
+  const radius = computed(() =>
+    Math.max(1, measuredSize.value / 2 - props.thickness / 2 - 2)
+  );
+
+  const circumference = computed(() => 2 * Math.PI * radius.value);
+
+  const groupTransition = computed(() =>
+    !isReady.value || isInitial.value
+      ? { duration: 0 }
+      : { duration: 0.35, easing: EASING }
+  );
+
+  const total = computed(() =>
+    props.data.reduce((acc, d) => acc + Math.max(0, d.value), 0)
+  );
+
+  const segmentsBase = computed<SegBase[]>(() => {
+    const totalVal = total.value || 1;
+    let acc = 0;
+    const list: SegBase[] = [];
+
+    props.data.forEach((d, i) => {
+      const frac = Math.max(0, d.value) / totalVal;
+      const baseLen = frac * circumference.value;
+      const drawLen = Math.max(0, baseLen);
+
+      if (drawLen > 0) {
+        list.push({
+          key: `seg-${i}-${d.color ?? "c"}`,
+          length: drawLen,
+          offset: -acc,
+          color: d.color || "#999999",
+        });
+      }
+
+      acc += baseLen;
+    });
+
+    return list;
+  });
+
+  const segmentsTimed = computed<SegTimed[]>(() => {
+    const totalDur = Math.max(0.01, INITIAL_TOTAL_DURATION);
+    let running = 0;
+
+    return segmentsBase.value.map((s) => {
+      const dur = (s.length / Math.max(1e-6, circumference.value)) * totalDur;
+      const delay = Math.max(0, running - OVERLAP);
+      const segT: SegTimed = { ...s, dur, delay };
+      running += dur;
+      return segT;
+    });
+  });
+
+  const isInitial = ref(true);
+
+  watch(
+    () => ({ ready: isReady.value }),
+    ({ ready }) => {
+      if (!ready) return;
+
+      if (initialTimer.value) return;
+
+      const totalDur = INITIAL_TOTAL_DURATION;
+
+      initialTimer.value = setTimeout(() => {
+        isInitial.value = false;
+        if (initialTimer.value) {
+          clearTimeout(initialTimer.value);
+          initialTimer.value = null;
+        }
+      }, Math.ceil(totalDur * 1000) + 16);
+    },
+    { immediate: true }
+  );
+
+  onMounted(() => {
+    startResizeObserver();
+  });
+
+  onUnmounted(() => {
+    stopResizeObserver();
+
+    if (initialTimer.value) {
+      clearTimeout(initialTimer.value);
+      initialTimer.value = null;
+    }
+  });
+
+  const transitionFor = (seg: SegTimed) => {
+    if (isInitial.value)
+      return { delay: seg.delay, duration: seg.dur, easing: EASING } as const;
+
+    return { delay: 0, duration: UPDATE_DURATION, easing: EASING };
+  };
+
+  const measure = () => {
+    const el = wrapperRef.value ?? svgRef.value;
+
+    if (!el) return;
+
+    const rect = el.getBoundingClientRect();
+    const next = Math.max(1, Math.min(rect.width || 0, rect.height || 0));
+
+    if (Math.abs(next - measuredSize.value) > SIZE_EPSILON)
+      measuredSize.value = next;
+
+    if (!isReady.value && next > 1) isReady.value = true;
+  };
+
+  const startResizeObserver = () => {
+    if (roRef.value) return;
+
+    roRef.value = new ResizeObserver(measure);
+
+    const el = wrapperRef.value ?? svgRef.value;
+
+    if (el) roRef.value.observe(el);
+
+    requestAnimationFrame(measure);
+  };
+
+  const stopResizeObserver = () => {
+    if (!roRef.value) return;
+
+    const el = wrapperRef.value ?? svgRef.value;
+
+    if (el) roRef.value.unobserve(el);
+
+    roRef.value.disconnect();
+    roRef.value = null;
+  };
+</script>

package/templates/components/PieChart/PieChart.types.ts

@@ -0,0 +1,10 @@
+export type UixyPieChartData = {
+  label: string;
+  value: number;
+  color: string;
+};
+
+export interface UixyPieChartProps {
+  data: UixyPieChartData[];
+  thickness?: number;
+}

package/templates/components/PieChart/index.ts

@@ -0,0 +1,4 @@
+import UixyPieChart from "./PieChart.component.vue";
+import type { UixyPieChartProps, UixyPieChartData } from "./PieChart.types";
+
+export { UixyPieChart, type UixyPieChartData, type UixyPieChartProps };

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",
@@ -96,6 +102,12 @@
       "packages": ["motion-v"],
       "composables": []
     },
+    {
+      "name": "PieChart",
+      "related-components": [],
+      "packages": ["motion-v"],
+      "composables": []
+    },
     {
       "name": "Popover",
       "related-components": [],
@@ -118,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;