v-uixy 1.3.0 → 1.4.0

package/templates/components/TimePicker/TimePicker.component.vue

@@ -62,29 +62,34 @@
 
   const validateAndFormatTime = (
     value: string,
-    type: "hour" | "minute" | "second"
-  ) => {
+    type: "hour" | "minute" | "second",
+  ): string => {
     const num = parseInt(value, 10);
     if (isNaN(num)) return "00";
-
-    let validatedNum = num;
-
-    if (type === "hour") validatedNum = Math.min(23, Math.max(0, num));
-    else if (type === "minute") validatedNum = Math.min(59, Math.max(0, num));
-    else validatedNum = Math.min(59, Math.max(0, num));
-
-    return validatedNum < 10 ? `0${validatedNum}` : `${validatedNum}`;
+    const max = type === "hour" ? 23 : 59;
+    const clamped = Math.max(0, Math.min(max, num));
+    return clamped < 10 ? `0${clamped}` : `${clamped}`;
   };
 
   const handleChange = (event: Event, type: "hour" | "minute" | "second") => {
     const target = event.target as HTMLInputElement;
-    const valueStr = validateAndFormatTime(target.value, type);
-    const valueNum = Number.parseInt(valueStr, 10);
+    const value = target.value.replace(/\D/g, "");
+
+    if (value === "") return;
+
+    let num = parseInt(value, 10);
 
-    model.value = {
-      ...model.value,
-      [type]: Number.isFinite(valueNum) ? valueNum : 0,
-    };
+    if (type === "hour") {
+      if (props.allowMidnight && num >= 24) {
+        num = 0;
+      } else if (num > 23) {
+        num = 23;
+      }
+    } else {
+      if (num > 59) num = 59;
+    }
+
+    model.value = { ...model.value, [type]: num };
   };
 
   const displaySeparator = (order: "first" | "second") => {
@@ -92,7 +97,6 @@
 
     if (order === "first") {
       if (!model.value?.hasOwnProperty("hour")) return false;
-
       if (
         model.value?.hasOwnProperty("minute") ||
         model.value?.hasOwnProperty("second")
@@ -102,7 +106,6 @@
 
     if (order === "second") {
       if (!model.value?.hasOwnProperty("second")) return false;
-
       if (
         model.value?.hasOwnProperty("hour") ||
         model.value?.hasOwnProperty("minute")

package/templates/components/TimePicker/TimePicker.styles.ts

@@ -1,5 +1,5 @@
 import styles from "~/utils/styles";
 
 export const timePickerStyles = styles(
-  "flex items-center justify-between gap-3 rounded-2 border border-gray-300 bg-gray-100 p-2 shadow-xs dark:border-gray-900 dark:bg-black"
+  "flex items-center justify-start gap-2 rounded-1 border border-gray-300 bg-white dark:bg-gray-1000 px-2 py-0.5 min-h-[38px] text-sm transition-colors ease-in-out duration-150 shadow-xs dark:border-gray-900",
 );

package/templates/components/TimePicker/TimePicker.types.ts

@@ -1,3 +1,4 @@
 export interface UixyTimePickerProps {
   disabled?: boolean;
+  allowMidnight?: 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",
@@ -105,7 +111,7 @@
     {
       "name": "Popover",
       "related-components": [],
-      "packages": ["motion-v"],
+      "packages": ["motion-v", "uuid"],
       "composables": ["usePosition"]
     },
     {
@@ -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;

package/templates/composables/usePosition.ts

@@ -39,12 +39,27 @@ export function usePosition({ direction = "bottom" }: UsePositionOptions) {
     const tooltipRect = refElement.value.getBoundingClientRect();
     const targetRect = target.value.getBoundingClientRect();
     const winW = window.innerWidth;
+    const winH = window.innerHeight;
 
     let top: number;
     const scrollY = hasFixedParent(target.value) ? 0 : window.scrollY;
 
-    top =
+    const spaceBelow = winH - targetRect.bottom;
+    const spaceAbove = targetRect.top;
+    const fitsBelow = spaceBelow >= tooltipRect.height + 6;
+    const fitsAbove = spaceAbove >= tooltipRect.height + 6;
+
+    const effectiveDirection =
       direction === "top"
+        ? fitsAbove || !fitsBelow
+          ? "top"
+          : "bottom"
+        : fitsBelow || !fitsAbove
+          ? "bottom"
+          : "top";
+
+    top =
+      effectiveDirection === "top"
         ? targetRect.top - tooltipRect.height - 6 + scrollY
         : targetRect.bottom + 6 + scrollY;
 
@@ -80,7 +95,7 @@ export function usePosition({ direction = "bottom" }: UsePositionOptions) {
         window.removeEventListener("resize", updatePosition);
       }
     },
-    { flush: "post" }
+    { flush: "post" },
   );
 
   onBeforeUnmount(() => {