v-uixy 1.3.1 → 1.5.0

package/templates/components/FileUpload/FileUpload.styles.ts

@@ -0,0 +1,74 @@
+import styles from "~/utils/styles";
+
+export const dropzoneStyles = styles(
+  "relative flex w-full flex-col items-center justify-center gap-2 rounded-2 border border-dashed px-6 py-8 text-center transition-colors duration-150 ease-in-out outline-offset-2 outline-gray-300",
+  {
+    state: {
+      default:
+        "cursor-pointer border-gray-300 bg-white hover:border-gray-400 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-1000 dark:hover:border-gray-700 dark:hover:bg-gray-900",
+      dragging:
+        "cursor-copy border-gray-500 bg-gray-100 dark:border-gray-500 dark:bg-gray-900",
+      error:
+        "cursor-pointer border-error-700 bg-white hover:bg-gray-100 dark:border-error-900 dark:bg-gray-1000 dark:hover:bg-gray-900",
+      disabled:
+        "pointer-events-none cursor-not-allowed border-gray-300 bg-gray-200 dark:border-gray-900 dark:bg-gray-900",
+    },
+  }
+);
+
+export const dropzoneIconStyles = styles(
+  "h-6 w-6 transition-colors duration-150 ease-in-out",
+  {
+    state: {
+      default: "text-gray-400 dark:text-gray-600",
+      dragging: "text-gray-700 dark:text-gray-300",
+      error: "text-error-600 dark:text-error-500",
+      disabled: "text-gray-400 dark:text-gray-700",
+    },
+  }
+);
+
+export const dropzoneLabelStyles = styles(
+  "text-sm font-500 text-gray-800 dark:text-gray-200",
+  {
+    state: {
+      default: "",
+      dragging: "",
+      error: "",
+      disabled: "text-gray-500 dark:text-gray-700",
+    },
+  }
+);
+
+export const dropzoneHintStyles = styles(
+  "text-xs text-gray-500 dark:text-gray-600"
+);
+
+export const fileListStyles = styles("flex flex-col gap-2");
+
+export const fileRowStyles = styles(
+  "flex items-center gap-3 rounded-1 border border-gray-300 bg-white px-3 py-2 dark:border-gray-900 dark:bg-gray-1000"
+);
+
+export const fileIconStyles = styles(
+  "h-5 w-5 shrink-0 text-gray-500 dark:text-gray-500"
+);
+
+export const fileNameStyles = styles(
+  "flex-1 min-w-0 truncate text-sm text-gray-800 dark:text-gray-200"
+);
+
+export const fileSizeStyles = styles(
+  "shrink-0 text-xs text-gray-500 dark:text-gray-600"
+);
+
+export const helperStyles = styles(
+  "transition-colors ease-in-out duration-150 text-xs",
+  {
+    status: {
+      default: "text-gray-600",
+      error: "text-error-600",
+      disabled: "text-gray-400 dark:text-gray-800",
+    },
+  }
+);

package/templates/components/FileUpload/FileUpload.types.ts

@@ -0,0 +1,31 @@
+import type { IconName } from "~/types/icons";
+
+export type UixyFileRejectionReason = "type" | "size" | "count";
+
+export interface UixyFileRejection {
+  file: File;
+  reason: UixyFileRejectionReason;
+}
+
+export interface UixyFileUploadProps {
+  variant?: "dropzone" | "button";
+  buttonVariant?: "primary" | "secondary" | "tertiary" | "quaternary";
+  buttonSize?: "sm" | "md" | "lg";
+  accept?: string;
+  multiple?: boolean;
+  maxSize?: number;
+  maxFiles?: number;
+  disabled?: boolean;
+  icon?: IconName;
+  label?: string;
+  hint?: string;
+  status?: "default" | "error";
+  helperText?: string;
+  errorText?: string;
+  hideList?: boolean;
+}
+
+export interface UixyFileUploadEmits {
+  (event: "change", files: File[]): void;
+  (event: "reject", rejections: UixyFileRejection[]): void;
+}

package/templates/components/FileUpload/index.ts

@@ -0,0 +1,15 @@
+import UixyFileUpload from "./FileUpload.component.vue";
+import {
+  type UixyFileUploadProps,
+  type UixyFileUploadEmits,
+  type UixyFileRejection,
+  type UixyFileRejectionReason,
+} from "./FileUpload.types";
+
+export {
+  UixyFileUpload,
+  type UixyFileUploadProps,
+  type UixyFileUploadEmits,
+  type UixyFileRejection,
+  type UixyFileRejectionReason,
+};

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

@@ -2,12 +2,12 @@
   <div class="flex flex-col gap-1">
     <div class="relative flex flex-col-reverse gap-1">
       <input
+        ref="inputRef"
         v-model="model"
         :type="props.type ?? 'text'"
         :id
         :disabled="props.disabled"
         :placeholder="props.placeholder"
-        :auto-focus="props.autoFocus"
         :class="inputStyles({ status, icon }, $attrs.class as string)"
         v-bind="filteredAttrs"
       />
@@ -27,29 +27,19 @@
         {{ props.label }}
       </label>
     </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 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>
   </div>
 </template>
 
@@ -80,6 +70,8 @@
     return rest;
   });
 
+  const inputRef = ref<HTMLInputElement>();
+
   const model = defineModel<string>();
 
   const instance = getCurrentInstance();
@@ -89,7 +81,7 @@
   const hasIconClickEmit = computed(() => !!instance?.vnode.props?.onIconClick);
 
   const status = computed(() =>
-    props.disabled ? "disabled" : props.status ?? "default"
+    props.disabled ? "disabled" : (props.status ?? "default"),
   );
 
   const text = computed(
@@ -99,10 +91,18 @@
         default: props.helperText,
         disabled: "",
         valid: "",
-      }[props.status ?? "default"])
+      })[props.status ?? "default"],
   );
 
   const icon = computed(() =>
-    props.icon ? props.iconPositon ?? "right" : "none"
+    props.icon ? (props.iconPositon ?? "right") : "none",
   );
+
+  onMounted(() => {
+    if (props.autoFocus) {
+      nextTick(() => inputRef.value?.focus({ preventScroll: true }));
+    }
+  });
+
+  defineExpose({ focus: () => inputRef.value?.focus({ preventScroll: true }) });
 </script>

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

@@ -17,7 +17,7 @@ export const inputStyles = styles(
       right: "pr-8",
       none: "",
     },
-  }
+  },
 );
 
 export const iconStyles = styles(
@@ -41,11 +41,11 @@ export const iconStyles = styles(
       true: "pointer-events-auto cursor-pointer",
       false: "",
     },
-  }
+  },
 );
 
 export const labelStyles = styles(
-  "transition-colors ease-in-out duration-150 text-xs font-500",
+  "transition-colors ease-in-out duration-150 text-sm font-500",
   {
     status: {
       default: "",
@@ -53,7 +53,7 @@ export const labelStyles = styles(
       disabled: "text-gray-500 dark:text-gray-700",
       valid: "",
     },
-  }
+  },
 );
 
 export const helperStyles = styles(
@@ -65,5 +65,5 @@ export const helperStyles = styles(
       disabled: "text-gray-400 dark:text-gray-800",
       valid: "text-gray-600",
     },
-  }
+  },
 );

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

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

package/templates/components/InputOTP/InputOTP.component.vue

@@ -45,7 +45,9 @@
   import { inputOTPStyles } from "./InputOTP.styles";
   import type { UixyInputOTPProps } from "./InputOTP.types";
 
-  const props = defineProps<UixyInputOTPProps>();
+  const props = withDefaults(defineProps<UixyInputOTPProps>(), {
+    autoFocus: true,
+  });
 
   const INPUT_LENGTH = 6 as const;
   const PLACES = [
@@ -153,6 +155,6 @@
   });
 
   onMounted(() => {
-    inputRefs[0].value?.focus();
+    if (props.autoFocus) inputRefs[0].value?.focus();
   });
 </script>

package/templates/components/InputOTP/InputOTP.types.ts

@@ -1,4 +1,5 @@
 export interface UixyInputOTPProps {
   disabled?: boolean;
+  autoFocus?: boolean;
   filled?: (code: string) => Promise<boolean>;
 }

package/templates/components/Modal/Modal.component.vue

@@ -11,7 +11,6 @@
           :class="modalStyles($attrs.class as string)"
           data-modal
           @click.self="handleClick"
-          @keydown{esc}="handleClick"
         >
           <motion.div
             :initial="{ scale: 0.8 }"
@@ -32,7 +31,7 @@
   import { modalStyles } from "./Modal.styles";
   import { AnimatePresence, motion } from "motion-v";
 
-  defineProps<UixyModalProps>();
+  const props = defineProps<UixyModalProps>();
 
   defineOptions({
     inheritAttrs: false,
@@ -41,14 +40,30 @@
   const open = defineModel<boolean>();
 
   const handleClick = () => {
+    if (props.persistent) return;
+
     open.value = false;
   };
 
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      handleClick();
+      return;
+    }
+    if (e.key === "Enter") {
+      const target = e.target as HTMLElement;
+      if (target.tagName === "TEXTAREA" || target.tagName === "BUTTON") return;
+      const modalEl = document.querySelector("[data-modal]");
+      const form = modalEl?.querySelector("form");
+      form?.requestSubmit();
+    }
+  };
+
   const toggleSiblingsInert = (enable?: boolean) => {
     if (typeof document === "undefined") return;
 
     const modalEl = document.querySelector(
-      "[data-modal]"
+      "[data-modal]",
     ) as HTMLElement | null;
 
     Array.from(document.body.children).forEach((el) => {
@@ -68,7 +83,16 @@
     open,
     (isOpen) => {
       toggleSiblingsInert(isOpen);
+      if (isOpen) {
+        window.addEventListener("keydown", handleKeyDown);
+      } else {
+        window.removeEventListener("keydown", handleKeyDown);
+      }
     },
-    { immediate: true }
+    { immediate: true },
   );
+
+  onUnmounted(() => {
+    window.removeEventListener("keydown", handleKeyDown);
+  });
 </script>

package/templates/components/Modal/Modal.types.ts

@@ -1 +1,3 @@
-export interface UixyModalProps {}
+export interface UixyModalProps {
+  persistent?: boolean;
+}

package/templates/components/Popover/Popover.component.vue

@@ -27,12 +27,16 @@
 
 <script setup lang="ts">
   import { AnimatePresence, motion } from "motion-v";
+  import { v4 as uuidv4 } from "uuid";
   import { usePosition } from "~/composables";
   import { onWatcherCleanup } from "vue";
   import type { UixyPopoverProps } from "./Popover.types";
 
   const props = defineProps<UixyPopoverProps>();
 
+  const POPOVER_GROUP_EVENT = "uixy:popover-group-open";
+  const instanceId = uuidv4();
+
   const { active, handleOpen, handleLeave, styles, refElement } = usePosition({
     direction: props.direction ?? "bottom",
   });
@@ -45,22 +49,49 @@
       handleLeave();
   };
 
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape") handleLeave();
+  };
+
   watch(
     () => active.value,
-    (_, prevVal) => {
+    (isActive, prevVal) => {
       if (prevVal) return;
 
+      if (isActive && props.group) {
+        window.dispatchEvent(
+          new CustomEvent(POPOVER_GROUP_EVENT, { detail: { id: instanceId } }),
+        );
+      }
+
       requestAnimationFrame(() => {
         window.addEventListener("click", handleClickOutside);
+        window.addEventListener("keydown", handleKeyDown);
       });
 
       onWatcherCleanup(() => {
         window.removeEventListener("click", handleClickOutside);
+        window.removeEventListener("keydown", handleKeyDown);
       });
-    }
+    },
   );
 
+  const handleGroupOpen = (e: Event) => {
+    const event = e as CustomEvent<{ id: string }>;
+    if (event.detail.id !== instanceId) handleLeave();
+  };
+
+  onMounted(() => {
+    if (props.group) {
+      window.addEventListener(POPOVER_GROUP_EVENT, handleGroupOpen);
+    }
+  });
+
   onUnmounted(() => {
     window.removeEventListener("click", handleClickOutside);
+    window.removeEventListener("keydown", handleKeyDown);
+    if (props.group) {
+      window.removeEventListener(POPOVER_GROUP_EVENT, handleGroupOpen);
+    }
   });
 </script>

package/templates/components/Popover/Popover.types.ts

@@ -1,4 +1,5 @@
 export interface UixyPopoverProps {
   direction?: "top" | "bottom";
   closeOnClick?: boolean;
+  group?: string;
 }

package/templates/components/SegmentedControl/SegmentedControl.component.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+    role="tablist"
+    :class="
+      segmentedTrackStyles({
+        fullWidth: props.fullWidth,
+        disabled: props.disabled,
+      })
+    "
+  >
+    <button
+      v-for="option in props.options"
+      :key="option.value"
+      type="button"
+      role="tab"
+      :aria-selected="model === option.value"
+      :disabled="props.disabled || option.disabled"
+      :class="
+        segmentStyles({
+          size: props.size ?? 'md',
+          selected: model === option.value,
+          disabled: !!option.disabled,
+          fullWidth: props.fullWidth,
+        })
+      "
+      @click="select(option)"
+    >
+      <animate-presence mode="wait" :initial="false">
+        <motion.div
+          v-if="model === option.value"
+          :layout-id="pillLayoutId"
+          :initial="{ opacity: 0 }"
+          :animate="{ opacity: 1 }"
+          :exit="{ opacity: 0 }"
+          :transition="{ duration: 0.2, ease: 'easeInOut' }"
+          :class="segmentPillStyles()"
+        />
+      </animate-presence>
+
+      <span :class="segmentContentStyles()">
+        <uixy-icon
+          v-if="option.icon"
+          :name="option.icon"
+          :class="segmentIconStyles({ size: props.size ?? 'md' })"
+        />
+        <span v-if="option.label">{{ option.label }}</span>
+      </span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { motion, AnimatePresence } from "motion-v";
+  import { v4 as uuidv4 } from "uuid";
+  import { UixyIcon } from "../Icon";
+  import type {
+    UixySegmentedControlProps,
+    UixySegmentedOption,
+  } from "./SegmentedControl.types";
+  import {
+    segmentedTrackStyles,
+    segmentStyles,
+    segmentPillStyles,
+    segmentContentStyles,
+    segmentIconStyles,
+  } from "./SegmentedControl.styles";
+
+  const props = defineProps<UixySegmentedControlProps>();
+
+  const model = defineModel<string | number>();
+
+  const pillLayoutId = computed(() => `uixy-segmented-${uuidv4()}`);
+
+  const select = (option: UixySegmentedOption) => {
+    if (props.disabled || option.disabled) return;
+
+    model.value = option.value;
+  };
+
+  onBeforeMount(() => {
+    if (model.value === undefined && props.options.length > 0) {
+      model.value = props.options[0]?.value;
+    }
+  });
+</script>

package/templates/components/SegmentedControl/SegmentedControl.styles.ts

@@ -0,0 +1,55 @@
+import styles from "~/utils/styles";
+
+export const segmentedTrackStyles = styles(
+  "relative inline-flex items-center gap-1 rounded-1 bg-gray-200 p-0.5 dark:bg-gray-900",
+  {
+    fullWidth: {
+      true: "flex w-full",
+      false: "",
+    },
+    disabled: {
+      true: "pointer-events-none opacity-50",
+      false: "",
+    },
+  },
+);
+
+export const segmentStyles = styles(
+  "relative flex items-center justify-center rounded-1 font-500 cursor-pointer select-none transition-colors duration-150 ease-in-out outline-offset-2 outline-gray-300",
+  {
+    size: {
+      sm: "px-2.5 py-1 text-xs",
+      md: "px-3 py-1 text-sm",
+      lg: "px-4 py-1.5 text-sm",
+    },
+    selected: {
+      true: "text-black dark:text-white",
+      false:
+        "text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-gray-100",
+    },
+    disabled: {
+      true: "cursor-not-allowed text-gray-400 hover:text-gray-400 dark:text-gray-700 dark:hover:text-gray-700",
+      false: "",
+    },
+    fullWidth: {
+      true: "flex-1",
+      false: "",
+    },
+  },
+);
+
+export const segmentPillStyles = styles(
+  "absolute inset-0 rounded-1 bg-white shadow-xs dark:bg-gray-700",
+);
+
+export const segmentContentStyles = styles(
+  "relative z-10 flex items-center gap-1.5",
+);
+
+export const segmentIconStyles = styles("shrink-0", {
+  size: {
+    sm: "h-3.5 w-3.5",
+    md: "h-4 w-4",
+    lg: "h-4 w-4",
+  },
+});

package/templates/components/SegmentedControl/SegmentedControl.types.ts

@@ -0,0 +1,15 @@
+import type { IconName } from "~/types/icons";
+
+export interface UixySegmentedOption {
+  label?: string;
+  value: string | number;
+  icon?: IconName;
+  disabled?: boolean;
+}
+
+export interface UixySegmentedControlProps {
+  options: UixySegmentedOption[];
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  fullWidth?: boolean;
+}

package/templates/components/SegmentedControl/index.ts

@@ -0,0 +1,11 @@
+import UixySegmentedControl from "./SegmentedControl.component.vue";
+import {
+  type UixySegmentedControlProps,
+  type UixySegmentedOption,
+} from "./SegmentedControl.types";
+
+export {
+  UixySegmentedControl,
+  type UixySegmentedControlProps,
+  type UixySegmentedOption,
+};