v-uixy 1.0.0

package/templates/components/Radio/index.ts

@@ -0,0 +1,4 @@
+import UixyRadio from "./Radio.component.vue";
+import { type UixyRadioProps } from "./Radio.types";
+
+export { UixyRadio, type UixyRadioProps };

package/templates/components/Scale/Scale.component.vue

@@ -0,0 +1,27 @@
+<template>
+  <motion.div
+    :animate="{ scale }"
+    :transition="{ duration }"
+    class="flex min-h-screen flex-col"
+  >
+    <slot />
+  </motion.div>
+</template>
+
+<script setup lang="ts">
+  import { motion } from "motion-v";
+
+  const scale = ref<number>(1);
+  const duration = ref<number>(0.3);
+
+  const setScale = (val: number) => {
+    scale.value = val;
+  };
+
+  const setDuration = (val: number) => {
+    duration.value = val;
+  };
+
+  provide("setScale", setScale);
+  provide("setDuration", setDuration);
+</script>

package/templates/components/Scale/composables/index.ts

@@ -0,0 +1 @@
+export * from "./useScale.composable";

package/templates/components/Scale/composables/useScale.composable.ts

@@ -0,0 +1,13 @@
+export const useScale = () => {
+  const setScale = inject("setScale") as (val: number) => void;
+
+  const setDuration = inject("setDuration") as (val: number) => void;
+
+  if (!setScale || !setDuration)
+    throw new Error("useScale composable must be used inside Scale provider.");
+
+  return {
+    setScale,
+    setDuration,
+  };
+};

package/templates/components/Scale/index.ts

@@ -0,0 +1,4 @@
+import UixyScale from "./Scale.component.vue";
+
+export * from "./composables";
+export { UixyScale };

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

@@ -0,0 +1,201 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <div class="relative flex flex-col-reverse gap-1" ref="refOptions">
+      <div
+        :class="selectStyles({ status }, $attrs.class as string)"
+        :tabIndex="props.disabled ? -1 : 0"
+        :auto-focus="props.autoFocus"
+        @click="handleOpen"
+        @keydown="handleKeydownSelect"
+        v-bind="filteredAttrs"
+      >
+        <p
+          v-if="props.placeholder && (!model || model.length === 0)"
+          class="pointer-events-none select-none text-gray-500 dark:text-gray-700"
+        >
+          {{ props.placeholder }}
+        </p>
+        <div
+          v-if="props.multiple"
+          :class="badgesWrapperStyles({ disabled: props.disabled })"
+        >
+          <uixy-badge
+            v-for="(item, index) in model"
+            data-badge
+            variant="tertiary"
+            size="xs"
+            shape="pill"
+            :key="`${item}--${index}`"
+            @click.stop="handleClickSelectedOption(item)"
+          >
+            {{ item }}
+          </uixy-badge>
+        </div>
+        <p v-else>{{ model }}</p>
+
+        <uixy-icon name="chevron-down" :class="iconStyles({ open })" />
+      </div>
+      <animate-presence>
+        <motion.div
+          v-if="open && !props.disabled"
+          class="scrollbar absolute top-full z-20 mt-[2px] max-h-[320px] w-full overflow-y-auto rounded-1 border border-gray-300 bg-white p-1 text-sm dark:border-gray-900 dark:bg-gray-1000"
+          :initial="{ opacity: 0, y: -4, scale: 0.8 }"
+          :animate="{ opacity: 1, y: 0, scale: 1 }"
+          :exit="{ opacity: 0, scale: 0.8 }"
+          :transition="{ duration: 0.15, ease: 'easeInOut' }"
+          select-dropdown
+        >
+          <div v-if="props.search" class="mb-2">
+            <uixy-input
+              v-model="search"
+              status="default"
+              icon="search"
+              iconPositon="right"
+              placeholder="Search..."
+              hide-helper
+              auto-focus
+            />
+          </div>
+          <ul class="flex flex-col gap-1 py-1">
+            <li
+              v-for="option in filteredOptions"
+              :tabIndex="option.disabled ? -1 : 0"
+              :key="option.label"
+              :class="
+                itemStyles({
+                  selected: isSelected(option),
+                  disabled: !!option.disabled,
+                })
+              "
+              @keydown="handleKeydownOption($event, option)"
+              @click="handleClick(option.label)"
+            >
+              {{ option.label }}
+              <uixy-icon
+                v-if="isSelected(option)"
+                name="check"
+                class="absolute right-2 top-2 size-4"
+              />
+            </li>
+            <li
+              v-if="filteredOptions.length === 0"
+              class="px-3 text-center dark:text-gray-600"
+            >
+              No results found
+            </li>
+          </ul>
+        </motion.div>
+      </animate-presence>
+      <div v-if="props.label" :class="labelStyles({ status })">
+        {{ 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>
+  </div>
+</template>
+
+<script setup lang="ts" generic="T extends (string | string[])">
+  import {
+    selectStyles,
+    iconStyles,
+    labelStyles,
+    itemStyles,
+    helperStyles,
+    badgesWrapperStyles,
+  } from "./Select.styles";
+  import type {
+    UixySelectEmits,
+    UixySelectOptionType,
+    UixySelectProps,
+  } from "./Select.types";
+  import { UixyBadge } from "../Badge";
+  import { UixyIcon } from "../Icon";
+  import { UixyInput } from "../Input";
+  import { motion, AnimatePresence } from "motion-v";
+  import { useSelect } from "./composables";
+
+  const props = defineProps<UixySelectProps>();
+
+  const emits = defineEmits<UixySelectEmits>();
+
+  const model = defineModel<T>({ required: true });
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const attrs = useAttrs();
+
+  const filteredAttrs = computed(() => {
+    const { class: _, ...rest } = attrs;
+
+    return rest;
+  });
+
+  const handleChange = (v: string) => {
+    if (props.multiple) {
+      let prevArray = model.value as string[];
+
+      if (!Array.isArray(prevArray)) prevArray = [];
+
+      if (prevArray.includes(v)) {
+        (model.value as string[]) = prevArray.filter((item) => item !== v);
+      } else {
+        if (props.max && prevArray.length >= props.max)
+          (model.value as string[]) = [...prevArray.slice(1), v];
+
+        (model.value as string[]) = [...prevArray, v];
+      }
+    } else {
+      (model.value as string) = v;
+    }
+  };
+
+  const {
+    refOptions,
+    open,
+    search,
+    filteredOptions,
+    handleOpen,
+    handleKeydownSelect,
+    handleKeydownOption,
+    handleClickSelectedOption,
+  } = useSelect<T>(props.options, !!props.disabled, handleChange);
+
+  const handleClick = (label: string) => {
+    handleChange(label);
+
+    if (!props.multiple) open.value = false;
+  };
+
+  const isSelected = (option: UixySelectOptionType) =>
+    Array.isArray(model.value)
+      ? model.value.includes(option.label)
+      : model.value === option.label;
+
+  const status = computed(() =>
+    props.disabled ? "disabled" : props.status ?? "default"
+  );
+
+  const text = computed(
+    () =>
+      ({
+        error: props.errorText,
+        default: props.helperText,
+        disabled: "",
+        valid: "",
+      }[props.status ?? "default"])
+  );
+</script>

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

@@ -0,0 +1,74 @@
+import styles from "~/utils/styles";
+
+export const selectStyles = styles(
+  "relative select-none peer transition-colors ease-in-out duration-150 border border-gray-300 dark:border-gray-900 rounded-1 pl-3 pr-6 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-700 dark:outline-gray-800 min-h-[38px] 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 cursor-pointer",
+      error:
+        "bg-white dark:bg-gray-1000 border-error-700 dark:border-error-900 text-error-600 dark:text-error-500 cursor-pointer",
+      disabled:
+        "bg-gray-200 text-gray-400 dark:bg-gray-900 dark:text-gray-700 pointer-events-none",
+      valid:
+        "bg-white dark:bg-gray-1000 focus-visible:border-gray-500 dark:focus-visible:border-gray-600 cursor-pointer",
+    },
+  }
+);
+
+export const iconStyles = styles(
+  "pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 select-none transition-transform duration-200 ease-in-out",
+  {
+    open: {
+      true: "rotate-180",
+      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 pointer-events-none select-none",
+      valid: "",
+    },
+  }
+);
+
+export const itemStyles = styles(
+  "relative py-2 px-3 rounded-1 cursor-pointer focus-visible:bg-gray-200 focus-visible:border-gray-100 hover:bg-gray-200 dark:focus-visible:bg-gray-900 dark:hover:bg-gray-900 dark:focus-visible:border-gray-600",
+  {
+    selected: {
+      true: "bg-gray-200 dark:bg-gray-900",
+      false: "",
+    },
+    disabled: {
+      true: "pointer-events-none text-gray-500 dark:text-gray-700",
+      false: "",
+    },
+  }
+);
+
+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 pointer-events-none select-none",
+      valid: "text-gray-600",
+    },
+  }
+);
+
+export const badgesWrapperStyles = styles("flex flex-wrap gap-1", {
+  disabled: {
+    true: "opacity-30 transition-all duration-150 ease-in-out",
+    false: "",
+  },
+});

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

@@ -0,0 +1,31 @@
+export interface UixySelectOptionType {
+  label: string;
+  disabled?: boolean;
+}
+
+export interface UixyMultipleSelectProps {
+  multiple: true;
+}
+
+export interface UixySingleSelectProps {
+  multiple?: false;
+}
+
+export interface UixySelectEmits {
+  (event: "change", v: string): void;
+}
+
+export type UixySelectProps = {
+  options: UixySelectOptionType[];
+  status: "valid" | "error" | "default";
+  search?: boolean;
+  multiple?: boolean;
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  helperText?: string;
+  errorText?: string;
+  autoFocus?: boolean;
+  hideHelper?: boolean;
+  max?: number;
+} & (UixyMultipleSelectProps | UixySingleSelectProps);

package/templates/components/Select/composables/index.ts

@@ -0,0 +1 @@
+export * from "./useSelect.composable";

package/templates/components/Select/composables/useSelect.composable.ts

@@ -0,0 +1,118 @@
+import { onWatcherCleanup, watch } from "vue";
+import type { UixySelectOptionType } from "../Select.types";
+
+export const useSelect = <T>(
+  options: UixySelectOptionType[],
+  disabled: boolean,
+  onChange: (e: string) => void
+) => {
+  const open = ref(false);
+  const search = ref("");
+  const refOptions = ref<HTMLDivElement>();
+
+  const filteredOptions = computed(() =>
+    options.filter((option) =>
+      option.label.toLowerCase().includes(search.value.toLowerCase())
+    )
+  );
+
+  const handleOpen = (e?: MouseEvent) => {
+    if (disabled || (e && "badge" in (e?.target as HTMLDivElement).dataset))
+      return;
+
+    open.value = !open.value;
+  };
+
+  const handleKeydownSelect = (e: KeyboardEvent) => {
+    const key = e.key;
+
+    if (key === "Tab") return;
+
+    if (key === "ArrowDown" || key === "Enter" || key === " ") {
+      e.preventDefault();
+      open.value = !open.value;
+    }
+  };
+
+  const handleKeydownOption = (
+    e: KeyboardEvent,
+    option: UixySelectOptionType
+  ) => {
+    const key = e.key;
+
+    if ((key === "Enter" || key === " ") && !option.disabled) {
+      e.preventDefault();
+      return onChange(option.label);
+    }
+
+    if (key !== "ArrowDown" && key !== "ArrowUp") return;
+
+    const container = refOptions.value;
+
+    if (!container) return;
+
+    const focusables = Array.from(
+      container.querySelectorAll<HTMLElement>(
+        "[select-dropdown] input, [select-dropdown] li"
+      )
+    ).filter(
+      (el) =>
+        el.tabIndex >= 0 &&
+        el.getAttribute("aria-disabled") !== "true" &&
+        !el.hasAttribute("disabled")
+    );
+
+    if (!focusables.length) return;
+
+    const currentEl = (e.currentTarget as HTMLElement) || null;
+    let index = currentEl ? focusables.indexOf(currentEl) : -1;
+
+    e.preventDefault();
+
+    const val = key === "ArrowDown" ? 1 : -1;
+
+    index = (index + val + focusables.length) % focusables.length;
+
+    const nextEl = focusables[index];
+    nextEl?.focus();
+  };
+
+  const handleClickSelectedOption = (item: string) => {
+    onChange(item);
+  };
+
+  const handleClickOutside = (e: MouseEvent) => {
+    if (refOptions.value && !refOptions.value.contains(e.target as Node))
+      open.value = false;
+  };
+
+  watch(
+    () => open.value,
+    (_, prevVal) => {
+      if (prevVal) return;
+
+      requestAnimationFrame(() => {
+        window.addEventListener("click", handleClickOutside);
+      });
+
+      onWatcherCleanup(() => {
+        window.removeEventListener("click", handleClickOutside);
+      });
+    }
+  );
+
+  onUnmounted(() => {
+    window.removeEventListener("click", handleClickOutside);
+  });
+
+  return {
+    open,
+    search,
+    refOptions,
+    filteredOptions,
+    handleOpen,
+    handleKeydownSelect,
+    handleKeydownOption,
+    handleClickSelectedOption,
+  };
+};

package/templates/components/Select/index.ts

@@ -0,0 +1,15 @@
+import UixySelect from "./Select.component.vue";
+import {
+  type UixySelectProps,
+  type UixySelectOptionType,
+  type UixySingleSelectProps,
+  type UixyMultipleSelectProps,
+} from "./Select.types";
+
+export {
+  UixySelect,
+  type UixySelectProps,
+  type UixySelectOptionType,
+  type UixySingleSelectProps,
+  type UixyMultipleSelectProps,
+};

package/templates/components/Separator/Separator.component.vue

@@ -0,0 +1,22 @@
+<template>
+  <div
+    role="none"
+    :class="separatorStyles({ variant: props.variant }, $attrs.class as string)"
+    v-bind="filteredAttrs"
+  />
+</template>
+
+<script setup lang="ts">
+  import { separatorStyles } from "./Separator.styles";
+  import { type UixySeparatorProps } from "./Separator.types";
+
+  const props = defineProps<UixySeparatorProps>();
+
+  const attrs = useAttrs();
+
+  const filteredAttrs = computed(() => {
+    const { class: _, ...rest } = attrs;
+
+    return rest;
+  });
+</script>

package/templates/components/Separator/Separator.styles.ts

@@ -0,0 +1,11 @@
+import styles from "~/utils/styles";
+
+export const separatorStyles = styles(
+  "bg-gray-300 dark:bg-gray-900 self-stretch justify-stretch shrink-0",
+  {
+    variant: {
+      vertical: "w-[1px] min-h-full",
+      horizontal: "h-[1px] w-full",
+    },
+  }
+);

package/templates/components/Separator/Separator.types.ts

@@ -0,0 +1,3 @@
+export interface UixySeparatorProps {
+  variant: "vertical" | "horizontal";
+}

package/templates/components/Separator/index.ts

@@ -0,0 +1,4 @@
+import UixySeparator from "./Separator.component.vue";
+import { type UixySeparatorProps } from "./Separator.types";
+
+export { UixySeparator, type UixySeparatorProps };

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

@@ -0,0 +1,80 @@
+<template>
+  <teleport to="body">
+    <animate-presence>
+      <template v-if="open">
+        <motion.div
+          :initial="{ opacity: 0 }"
+          :animate="{ opacity: 1 }"
+          :exit="{ opacity: 0 }"
+          :transition="{ ease: 'easeInOut', duration: 0.15 }"
+          @click.self="handleClick"
+          class="fixed left-0 top-0 z-20 size-full bg-white/5 backdrop-blur-[2px] dark:bg-gray-900/5"
+        />
+        <motion.div
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          :variants="ANIMATIONS[props.direction ?? 'right']"
+          :transition="{ ease: 'easeInOut', duration: 0.3 }"
+          :class="
+            sheetStyles({ direction: props.direction ?? 'right' }, $attrs.class as string)
+          "
+          v-bind="filteredAttrs"
+        >
+          <slot />
+        </motion.div>
+      </template>
+    </animate-presence>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+  import { AnimatePresence, motion } from "motion-v";
+  import { useScale } from "../Scale";
+  import type { UixySheetProps } from "./Sheet.types";
+  import { sheetStyles } from "./Sheet.styles";
+
+  const props = defineProps<UixySheetProps>();
+
+  const ANIMATIONS = {
+    right: {
+      initial: { x: "100%" },
+      animate: { x: 0 },
+      exit: { x: "100%" },
+    },
+    left: {
+      initial: { x: "-100%" },
+      animate: { x: 0 },
+      exit: { x: "-100%" },
+    },
+  };
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const attrs = useAttrs();
+
+  const filteredAttrs = computed(() => {
+    const { class: _, ...rest } = attrs;
+
+    return rest;
+  });
+
+  const { setScale } = useScale();
+
+  const open = defineModel<boolean>();
+
+  const handleClick = () => {
+    open.value = false;
+  };
+
+  watch(
+    () => open.value,
+    (v) => {
+      if (v) return setScale(0.98);
+
+      setScale(1);
+    }
+  );
+</script>

package/templates/components/Sheet/Sheet.styles.ts

@@ -0,0 +1,11 @@
+import styles from "~/utils/styles";
+
+export const sheetStyles = styles(
+  "fixed top-0 z-50 h-full w-full max-w-[320px] border-gray-300 bg-gray-100 shadow-xl dark:border-gray-900 dark:bg-black",
+  {
+    direction: {
+      left: "left-0 border-r",
+      right: "right-0 border-l",
+    },
+  }
+);

package/templates/components/Sheet/Sheet.types.ts

@@ -0,0 +1,3 @@
+export interface UixySheetProps {
+  direction?: "left" | "right";
+}

package/templates/components/Sheet/index.ts

@@ -0,0 +1,4 @@
+import UixySheet from "./Sheet.component.vue";
+import { type UixySheetProps } from "./Sheet.types";
+
+export { UixySheet, type UixySheetProps };

package/templates/components/Skeleton/Skeleton.component.vue

@@ -0,0 +1,21 @@
+<template>
+  <div :class="skeletonStyles($attrs.class as string)" v-bind="filteredAttrs" />
+</template>
+
+<script setup lang="ts">
+  import type { UixySkeletonProps } from "./Skeleton.types";
+  import { skeletonStyles } from "./Skeleton.styles";
+
+  defineProps<UixySkeletonProps>();
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const attrs = useAttrs();
+
+  const filteredAttrs = computed(() => ({
+    ...attrs,
+    class: undefined,
+  }));
+</script>

package/templates/components/Skeleton/Skeleton.styles.ts

@@ -0,0 +1,5 @@
+import styles from "~/utils/styles";
+
+export const skeletonStyles = styles(
+  "animate-pulse bg-gray-300 dark:bg-gray-900"
+);

package/templates/components/Skeleton/Skeleton.types.ts

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