v-uixy 1.0.0

package/templates/components/IconButton/index.ts

@@ -0,0 +1,4 @@
+import UixyIconButton from "./IconButton.component.vue";
+import { type UixyIconButtonProps } from "./IconButton.types";
+
+export { UixyIconButton, type UixyIconButtonProps };

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

@@ -0,0 +1,98 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <div class="relative flex flex-col-reverse gap-1">
+      <input
+        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"
+      />
+      <uixy-icon
+        v-if="props.icon"
+        @click="emits('icon-click')"
+        :name="props.icon"
+        :class="
+          iconStyles({
+            status,
+            icon,
+            targetable: !!hasIconClickEmit,
+          })
+        "
+      />
+      <label v-if="props.label" :for="id" :class="labelStyles({ status })">
+        {{ 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>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { UixyIcon } from "../Icon";
+  import { AnimatePresence, motion } from "motion-v";
+  import type { UixyInputEmits, UixyInputProps } from "./Input.types";
+  import {
+    inputStyles,
+    iconStyles,
+    labelStyles,
+    helperStyles,
+  } from "./Input.styles";
+
+  const props = defineProps<UixyInputProps>();
+
+  const emits = defineEmits<UixyInputEmits>();
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const attrs = useAttrs();
+
+  const filteredAttrs = computed(() => {
+    const { class: _, ...rest } = attrs;
+
+    return rest;
+  });
+
+  const model = defineModel<string>();
+
+  const instance = getCurrentInstance();
+
+  const id = useId();
+
+  const hasIconClickEmit = computed(() => !!instance?.vnode.props?.onIconClick);
+
+  const status = computed(() =>
+    props.disabled ? "disabled" : props.status ?? "default"
+  );
+
+  const text = computed(
+    () =>
+      ({
+        error: props.errorText,
+        default: props.helperText,
+        disabled: "",
+        valid: "",
+      }[props.status ?? "default"])
+  );
+
+  const icon = computed(() =>
+    props.icon ? props.iconPositon ?? "right" : "none"
+  );
+</script>

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

@@ -0,0 +1,69 @@
+import styles from "~/utils/styles";
+
+export const inputStyles = styles(
+  "peer transition-colors ease-in-out duration-150 border border-gray-300 dark:border-gray-900 rounded-1 px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-700 dark:outline-gray-800 outline-offset-1 outline-gray-300",
+  {
+    status: {
+      default:
+        "bg-white dark:bg-gray-1000 focus-visible:border-gray-500 dark:focus-visible:border-gray-600",
+      error:
+        "bg-white dark:bg-gray-1000 border-error-700 dark:border-error-900 text-error-600 dark:text-error-500",
+      disabled: "bg-gray-200 text-gray-400 dark:bg-gray-900 dark:text-gray-700",
+      valid:
+        "bg-white dark:bg-gray-1000 focus-visible:border-gray-500 dark:focus-visible:border-gray-600",
+    },
+    icon: {
+      left: "pl-8",
+      right: "pr-8",
+      none: "",
+    },
+  }
+);
+
+export const iconStyles = styles(
+  "select-none pointer-events-none h-5 w-5 absolute bottom-2 transition-colors duration-150 ease-in-out",
+  {
+    status: {
+      default:
+        "text-gray-400 peer-focus:text-black hover:text-black dark:text-gray-700 dark:peer-focus:text-gray-500 dark:hover:text-gray-500",
+      error:
+        "text-error-700 hover:text-error-600 dark:text-error-600 dark:hover:text-error-500",
+      disabled: "text-gray-400 dark:text-gray-700 pointer-events-none!",
+      valid:
+        "text-gray-400 peer-focus:text-black hover:text-black dark:text-gray-700 dark:peer-focus:text-gray-500 dark:hover:text-gray-500",
+    },
+    icon: {
+      left: "left-2",
+      right: "right-2",
+      none: "",
+    },
+    targetable: {
+      true: "pointer-events-auto cursor-pointer",
+      false: "",
+    },
+  }
+);
+
+export const labelStyles = styles(
+  "transition-colors ease-in-out duration-150 text-sm font-500",
+  {
+    status: {
+      default: "",
+      error: "text-error-600",
+      disabled: "text-gray-500 dark:text-gray-700",
+      valid: "",
+    },
+  }
+);
+
+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",
+      valid: "text-gray-600",
+    },
+  }
+);

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

@@ -0,0 +1,19 @@
+import type { IconName } from "~/types/icons";
+
+export interface UixyInputProps {
+  status?: "valid" | "error" | "default";
+  icon?: IconName;
+  iconPositon?: "left" | "right";
+  type?: "text" | "number" | "password" | "email";
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  helperText?: string;
+  errorText?: string;
+  autoFocus?: boolean;
+  hideHelper?: boolean;
+}
+
+export interface UixyInputEmits {
+  (event: "icon-click"): void;
+}

package/templates/components/Input/index.ts

@@ -0,0 +1,4 @@
+import UixyInput from "./Input.component.vue";
+import { type UixyInputProps, type UixyInputEmits } from "./Input.types";
+
+export { UixyInput, type UixyInputProps, type UixyInputEmits };

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

@@ -0,0 +1,158 @@
+<template>
+  <div class="flex items-center gap-1">
+    <div class="flex">
+      <input
+        v-for="index in [0, 1, 2]"
+        :key="index"
+        :ref="(el) => pushRef(el as HTMLInputElement, index)"
+        :value="value[index]"
+        @input="e => handleUpdate(index, (e.target as HTMLInputElement).value)"
+        @keydown="handleKeyDown(index)"
+        @paste="handlePaste"
+        @focus="handleFocus"
+        :disabled="props.disabled || loading"
+        :class="inputOTPStyles({ status, place: PLACES[index] })"
+        type="text"
+        max-length="1"
+        inputmode="numeric"
+        pattern="\d*"
+      />
+    </div>
+    <div class="h-[2px] w-1 rounded-1 bg-black dark:bg-gray-100" />
+    <div class="flex">
+      <input
+        v-for="index in [3, 4, 5]"
+        :key="index"
+        :ref="(el) => pushRef(el as HTMLInputElement, index)"
+        :value="value[index]"
+        @input="e => handleUpdate(index, (e.target as HTMLInputElement).value)"
+        @keydown="handleKeyDown(index)"
+        @paste="handlePaste"
+        @focus="handleFocus"
+        :disabled="props.disabled || loading"
+        :class="inputOTPStyles({ status, place: PLACES[index] })"
+        type="text"
+        max-length="1"
+        inputmode="numeric"
+        pattern="\d*"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, reactive, onMounted, watch, computed, type Ref } from "vue";
+  import { inputOTPStyles } from "./InputOTP.styles";
+  import type { UixyInputOTPProps } from "./InputOTP.types";
+
+  const props = defineProps<UixyInputOTPProps>();
+
+  const INPUT_LENGTH = 6 as const;
+  const PLACES = [
+    "leftEdge",
+    "center",
+    "right",
+    "left",
+    "center",
+    "rightEdge",
+  ] as const;
+
+  const value = reactive<string[]>(Array(INPUT_LENGTH).fill(""));
+  const shouldFocusFirstInput = ref(false);
+
+  type InputRef = Ref<HTMLInputElement | null>;
+  const inputRefs: InputRef[] = Array.from({ length: INPUT_LENGTH }, () =>
+    ref<HTMLInputElement | null>(null)
+  );
+
+  const loading = ref(false);
+
+  const status = computed(() =>
+    props.disabled || loading.value ? "disabled" : "default"
+  );
+
+  const pushRef = (el: HTMLInputElement | null, index: number) => {
+    inputRefs[index].value = el;
+  };
+
+  const handleUpdate = (index: number, val: string) => {
+    const newVal = val.slice(-1) || "";
+    value[index] = newVal;
+
+    if (newVal && index < INPUT_LENGTH - 1) {
+      inputRefs[index + 1].value?.focus();
+    }
+
+    if (value.every((v) => v !== "")) {
+      const code = value.join("");
+      handleFilledData(code);
+    }
+  };
+
+  const handlePaste = (e: ClipboardEvent) => {
+    e.preventDefault();
+
+    const pastedData = (e.clipboardData?.getData("Text") || "").trim();
+    if (/^\d+$/.test(pastedData)) {
+      const input = e.target as HTMLInputElement;
+      const index = inputRefs.findIndex((r) => r.value === input);
+      const chars = pastedData.slice(0, INPUT_LENGTH - index).split("");
+
+      chars.forEach((char, i) => {
+        value[index + i] = char;
+      });
+
+      const nextIndex = index + chars.length;
+      if (nextIndex < INPUT_LENGTH) {
+        inputRefs[nextIndex].value?.focus();
+      }
+
+      if (value.every((v) => v !== "")) {
+        const code = value.join("");
+        handleFilledData(code);
+      }
+    }
+  };
+
+  const handleKeyDown = (index: number) => {
+    return (e: KeyboardEvent) => {
+      if (e.key === "Backspace" && !value[index] && index > 0) {
+        inputRefs[index - 1].value?.focus();
+      }
+    };
+  };
+
+  const handleFocus = (e: FocusEvent) => {
+    (e.target as HTMLInputElement).select();
+  };
+
+  const handleFilledData = async (code: string) => {
+    if (!props.filled) return;
+
+    loading.value = true;
+    try {
+      const res = await props.filled(code);
+
+      if (res) return;
+
+      for (let i = 0; i < INPUT_LENGTH; i++) value[i] = "";
+
+      shouldFocusFirstInput.value = true;
+    } catch (error) {
+      console.error(error);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  watch(shouldFocusFirstInput, (val) => {
+    if (!val) return;
+
+    inputRefs[0].value?.focus();
+    shouldFocusFirstInput.value = false;
+  });
+
+  onMounted(() => {
+    inputRefs[0].value?.focus();
+  });
+</script>

package/templates/components/InputOTP/InputOTP.styles.ts

@@ -0,0 +1,19 @@
+import styles from "~/utils/styles";
+
+export const inputOTPStyles = styles(
+  "peer w-10 relative shadow-sm focus-visible:z-10 text-center h-12 transition-colors ease-in-out duration-150 border border-gray-300 dark:border-gray-900 p-0 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-700 dark:outline-gray-800 font-500 text-lg outline-offset-1 outline-gray-300",
+  {
+    status: {
+      default:
+        "bg-white dark:bg-gray-1000 focus-visible:border-gray-500 dark:focus-visible:border-gray-600",
+      disabled: "bg-gray-200 text-gray-400 dark:bg-gray-900 dark:text-gray-700",
+    },
+    place: {
+      left: "rounded-l-1",
+      leftEdge: "rounded-l-3",
+      right: "rounded-r-1",
+      rightEdge: "rounded-r-3",
+      center: "",
+    },
+  }
+);

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

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

package/templates/components/InputOTP/index.ts

@@ -0,0 +1,4 @@
+import UixyInputOtp from "./InputOTP.component.vue";
+import { type UixyInputOTPProps } from "./InputOTP.types";
+
+export { UixyInputOtp, type UixyInputOTPProps };

package/templates/components/Link/Link.component.vue

@@ -0,0 +1,23 @@
+<template>
+  <nuxt-link v-bind="cleanedProps">
+    <slot />
+  </nuxt-link>
+</template>
+
+<script setup lang="ts">
+  import { computed } from "vue";
+  import type { UixyLinkProps } from "./Link.types";
+
+  const props = defineProps<UixyLinkProps>();
+
+  const cleanedProps = computed(() => {
+    const result: Record<string, unknown> = {};
+    for (const key in props) {
+      const value = props[key as keyof UixyLinkProps];
+
+      if (value || key === "to") result[key] = value;
+    }
+
+    return result;
+  });
+</script>

package/templates/components/Link/Link.types.ts

@@ -0,0 +1,3 @@
+import { type NuxtLinkProps } from "nuxt/app";
+
+export interface UixyLinkProps extends NuxtLinkProps {}

package/templates/components/Link/index.ts

@@ -0,0 +1,4 @@
+import UixyLink from "./Link.component.vue";
+import { type UixyLinkProps } from "./Link.types";
+
+export { UixyLink, type UixyLinkProps };

package/templates/components/Loader/Loader.component.vue

@@ -0,0 +1,12 @@
+<template>
+  <div
+    :class="loaderStyles({ size: props.size }, $attrs.class as string)"
+  ></div>
+</template>
+
+<script setup lang="ts">
+  import type { UixyLoaderProps } from "./Loader.types";
+  import { loaderStyles } from "./Loader.styles";
+
+  const props = defineProps<UixyLoaderProps>();
+</script>

package/templates/components/Loader/Loader.styles.ts

@@ -0,0 +1,12 @@
+import styles from "~/utils/styles";
+
+export const loaderStyles = styles(
+  "inline-block border-solid border-current border-b-transparent rounded-full animate-spin",
+  {
+    size: {
+      sm: "border-2 h-4 w-4",
+      md: "border-4 h-8 w-8",
+      lg: "border-8 h-12 w-12",
+    },
+  }
+);

package/templates/components/Loader/Loader.types.ts

@@ -0,0 +1,3 @@
+export interface UixyLoaderProps {
+  size: "sm" | "md" | "lg";
+}

package/templates/components/Loader/index.ts

@@ -0,0 +1,4 @@
+import UixyLoader from "./Loader.component.vue";
+import { type UixyLoaderProps } from "./Loader.types";
+
+export { UixyLoader, type UixyLoaderProps };

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

@@ -0,0 +1,68 @@
+<template>
+  <teleport to="body">
+    <animate-presence>
+      <motion.div
+        v-if="open"
+        :initial="{ opacity: 0 }"
+        :animate="{ opacity: 1 }"
+        :exit="{ opacity: 0 }"
+        :transition="{ duration: 0.15, ease: 'easeInOut' }"
+        :class="modalStyles($attrs.class as string)"
+        data-modal
+        @click.self="handleClick"
+        @keydown{esc}="handleClick"
+      >
+        <motion.div
+          :initial="{ scale: 0.8 }"
+          :animate="{ scale: 1 }"
+          :exit="{ scale: 0.8 }"
+          :transition="{ duration: 0.15, ease: 'easeInOut' }"
+        >
+          <slot />
+        </motion.div>
+      </motion.div>
+    </animate-presence>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+  import type { UixyModalProps } from "./Modal.types";
+  import { modalStyles } from "./Modal.styles";
+  import { AnimatePresence, motion } from "motion-v";
+
+  defineProps<UixyModalProps>();
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const open = defineModel<boolean>();
+
+  const handleClick = () => {
+    open.value = false;
+  };
+
+  const toggleSiblingsInert = (enable?: boolean) => {
+    Array.from(document.body.children).forEach((el) => {
+      if (el === document.querySelector("[data-modal]")) return;
+
+      if (el.hasAttribute("data-modal")) return;
+
+      if (enable) {
+        el.setAttribute("inert", "");
+        el.setAttribute("aria-hidden", "true");
+      } else {
+        el.removeAttribute("inert");
+        el.removeAttribute("aria-hidden");
+      }
+    });
+  };
+
+  watch(
+    open,
+    (isOpen) => {
+      toggleSiblingsInert(isOpen);
+    },
+    { immediate: true }
+  );
+</script>

package/templates/components/Modal/Modal.styles.ts

@@ -0,0 +1,7 @@
+import styles from "~/utils/styles";
+
+const modalStyles = styles(
+  "fixed left-0 top-0 z-20 flex size-full items-center justify-center bg-white/5 backdrop-blur-[2px] dark:bg-gray-900/5"
+);
+
+export { modalStyles };

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

@@ -0,0 +1 @@
+export interface UixyModalProps {}

package/templates/components/Modal/index.ts

@@ -0,0 +1,4 @@
+import UixyModal from "./Modal.component.vue";
+import { type UixyModalProps } from "./Modal.types";
+
+export { UixyModal, type UixyModalProps };

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

@@ -0,0 +1,66 @@
+<template>
+  <slot name="trigger" @click="handleOpen" />
+  <teleport to="body">
+    <animate-presence>
+      <motion.div
+        v-if="active"
+        :initial="{ opacity: 0 }"
+        :animate="{ opacity: 1 }"
+        :exit="{ opacity: 0 }"
+        :transition="{ duration: 0.15, ease: 'easeInOut' }"
+        :style="styles"
+      >
+        <div ref="refElement">
+          <motion.div
+            :initial="{ y: 4, scale: 0.8 }"
+            :animate="{ y: 0, scale: 1 }"
+            :exit="{ opacity: 0, scale: 0.8 }"
+            :transition="{ duration: 0.15, ease: 'easeInOut' }"
+          >
+            <slot />
+          </motion.div>
+        </div>
+      </motion.div>
+    </animate-presence>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+  import { AnimatePresence, motion } from "motion-v";
+  import { usePosition } from "~/composables";
+  import { onWatcherCleanup } from "vue";
+  import type { UixyPopoverProps } from "./Popover.types";
+
+  const props = defineProps<UixyPopoverProps>();
+
+  const { active, handleOpen, handleLeave, styles, refElement } = usePosition({
+    direction: props.direction ?? "bottom",
+  });
+
+  const handleClickOutside = (e: MouseEvent) => {
+    if (
+      refElement.value &&
+      (!refElement.value.contains(e.target as Node) || props.closeOnClick)
+    )
+      handleLeave();
+  };
+
+  watch(
+    () => active.value,
+    (_, prevVal) => {
+      if (prevVal) return;
+
+      requestAnimationFrame(() => {
+        window.addEventListener("click", handleClickOutside);
+      });
+
+      onWatcherCleanup(() => {
+        window.removeEventListener("click", handleClickOutside);
+      });
+    }
+  );
+
+  onUnmounted(() => {
+    window.removeEventListener("click", handleClickOutside);
+  });
+</script>

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

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

package/templates/components/Popover/index.ts

@@ -0,0 +1,4 @@
+import UixyPopover from "./Popover.component.vue";
+import { type UixyPopoverProps } from "./Popover.types";
+
+export { UixyPopover, type UixyPopoverProps };

package/templates/components/Radio/Radio.component.vue

@@ -0,0 +1,40 @@
+<template>
+  <div :class="radioStyles($attrs.class as string)">
+    <input
+      type="radio"
+      :id="props.id"
+      :name="props.name"
+      :disabled="props.disabled"
+      v-model="checked"
+      class="peer relative size-4 cursor-pointer appearance-none rounded-full border-2 border-gray-300 after:absolute after:left-[2px] after:top-[2px] after:size-2 after:rounded-full after:bg-black after:content-none checked:border-gray-500 checked:after:content-[''] disabled:cursor-default disabled:border-gray-300 disabled:after:bg-gray-400 dark:border-gray-100 dark:after:bg-gray-100 dark:disabled:border-gray-600 dark:disabled:after:bg-gray-600"
+      v-bind="filteredAttrs"
+    />
+    <label
+      :for="props.id"
+      class="text-sm font-500 peer-disabled:text-gray-500 dark:peer-disabled:text-gray-600"
+    >
+      {{ props.label }}
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { UixyRadioProps } from "./Radio.types";
+  import { radioStyles } from "./Radio.styles";
+
+  const props = defineProps<UixyRadioProps>();
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const attrs = useAttrs();
+
+  const filteredAttrs = computed(() => {
+    const { class: _, ...rest } = attrs;
+
+    return rest;
+  });
+
+  const checked = defineModel<string | number | boolean>("checked");
+</script>

package/templates/components/Radio/Radio.styles.ts

@@ -0,0 +1,3 @@
+import styles from "~/utils/styles";
+
+export const radioStyles = styles("flex items-center gap-2");

package/templates/components/Radio/Radio.types.ts

@@ -0,0 +1,6 @@
+export interface UixyRadioProps {
+  id: string;
+  name: string;
+  label: string;
+  disabled?: boolean;
+}