v-uixy 1.0.0

package/templates/components/Calendar/Calendar.component.vue

@@ -0,0 +1,197 @@
+<template>
+  <div :class="calendarStyles($attrs.class as string)">
+    <div class="flex w-full items-center justify-between">
+      <uixy-icon-button
+        @click="decrementMonth"
+        icon="chevron-left"
+        size="sm"
+        variant="tertiary"
+      />
+      <p class="w-[160px] text-center text-sm font-500">
+        {{ MONTHS[selectedMonth] }} {{ selectedYear }}
+      </p>
+      <uixy-icon-button
+        @click="incrementMonth"
+        icon="chevron-right"
+        size="sm"
+        variant="tertiary"
+      />
+    </div>
+
+    <div
+      class="grid w-full grid-cols-7 text-xs text-gray-400 dark:text-gray-700"
+    >
+      <div v-for="day in adjustedDays" :key="day" class="py-2 text-center">
+        {{ day.slice(0, 2) }}
+      </div>
+    </div>
+
+    <div class="grid w-full grid-cols-7 gap-1 text-sm">
+      <button
+        v-for="day in daysToShow"
+        :key="day.date.toString() + day.fromCurrentMonth"
+        :class="
+          calendarDayStyles({
+            currentMonth: !!day.fromCurrentMonth,
+            selected: model?.toDateString?.() === day.date.toDateString(),
+            disabled:
+              !!props.disabled || day.fromPreviousMonth || day.fromNextMonth,
+          })
+        "
+        :disabled="day.fromPreviousMonth || day.fromNextMonth"
+        @click="handleDayClick(day.date)"
+      >
+        {{ day.day }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from "vue";
+  import { UixyIconButton } from "../IconButton";
+  import { calendarDayStyles, calendarStyles } from "./Calendar.styles";
+  import type { UixyCalendarProps } from "./Calendar.types";
+
+  const props = defineProps<UixyCalendarProps>();
+
+  const model = defineModel<Date | null>();
+
+  const MONTHS = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+
+  const DAYS = [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
+
+  const selectedYear = ref(props.year ?? new Date().getFullYear());
+  const selectedMonth = ref(props.month ?? new Date().getMonth());
+
+  const adjustedDays = computed(() =>
+    props.startOfWeek === "Monday" ? [...DAYS.slice(1), DAYS[0]] : DAYS
+  );
+
+  const getDaysInMonth = (year: number, month: number) =>
+    new Date(year, month + 1, 0).getDate();
+
+  const firstDayOfMonth = computed(() => {
+    let day = new Date(selectedYear.value, selectedMonth.value, 1).getDay();
+    if (props.startOfWeek === "Monday") {
+      day = day === 0 ? 6 : day - 1;
+    }
+    return day;
+  });
+
+  const daysInCurrentMonth = computed(() =>
+    getDaysInMonth(selectedYear.value, selectedMonth.value)
+  );
+
+  const daysInPreviousMonth = computed(() =>
+    getDaysInMonth(selectedYear.value, selectedMonth.value - 1)
+  );
+
+  const prevMonthDaysToShow = computed(() =>
+    Array.from({ length: firstDayOfMonth.value }, (_, i) => ({
+      day: daysInPreviousMonth.value - i,
+      date: new Date(
+        selectedYear.value,
+        selectedMonth.value - 1,
+        daysInPreviousMonth.value - i
+      ),
+      dayOfWeek: (firstDayOfMonth.value - 1 - i + 7) % 7,
+      fromPreviousMonth: true,
+    })).reverse()
+  );
+
+  const currentMonthDaysToShow = computed(() =>
+    Array.from({ length: daysInCurrentMonth.value }, (_, i) => ({
+      day: i + 1,
+      date: new Date(selectedYear.value, selectedMonth.value, i + 1),
+      dayOfWeek: new Date(
+        selectedYear.value,
+        selectedMonth.value,
+        i + 1
+      ).getDay(),
+      fromCurrentMonth: true,
+    }))
+  );
+
+  const lastDayOfMonth = computed(() =>
+    new Date(
+      selectedYear.value,
+      selectedMonth.value,
+      daysInCurrentMonth.value
+    ).getDay()
+  );
+
+  const nextMonthDaysToShow = computed(() => {
+    const length =
+      props.startOfWeek === "Monday"
+        ? (7 - lastDayOfMonth.value) % 7
+        : 6 - lastDayOfMonth.value;
+
+    return Array.from({ length }, (_, i) => ({
+      day: i + 1,
+      date: new Date(selectedYear.value, selectedMonth.value + 1, i + 1),
+      dayOfWeek: i,
+      fromNextMonth: true,
+    }));
+  });
+
+  const daysToShow = computed<
+    {
+      day: number;
+      date: Date;
+      dayOfWeek: number;
+      fromPreviousMonth?: boolean;
+      fromCurrentMonth?: boolean;
+      fromNextMonth?: boolean;
+    }[]
+  >(() => [
+    ...prevMonthDaysToShow.value,
+    ...currentMonthDaysToShow.value,
+    ...nextMonthDaysToShow.value,
+  ]);
+
+  function incrementMonth() {
+    if (selectedMonth.value === 11) {
+      selectedMonth.value = 0;
+      selectedYear.value++;
+    } else {
+      selectedMonth.value++;
+    }
+  }
+
+  function decrementMonth() {
+    if (selectedMonth.value === 0) {
+      selectedMonth.value = 11;
+      selectedYear.value--;
+    } else {
+      selectedMonth.value--;
+    }
+  }
+
+  function handleDayClick(date: Date) {
+    if (!props.disabled) {
+      model.value = date;
+    }
+  }
+</script>

package/templates/components/Calendar/Calendar.styles.ts

@@ -0,0 +1,23 @@
+import styles from "~/utils/styles";
+
+export const calendarStyles = styles(
+  "flex w-fit flex-col items-center rounded-2 border border-gray-300 bg-gray-100 p-3 shadow-xs dark:border-gray-900 dark:bg-black"
+);
+
+export const calendarDayStyles = styles(
+  "flex cursor-pointer size-[28px] items-center justify-center rounded-1 p-1 transition",
+  {
+    currentMonth: {
+      true: "dark:text-gray-300",
+      false: "text-gray-500 dark:text-gray-600",
+    },
+    selected: {
+      true: "bg-black text-white hover:bg-black dark:bg-white dark:!text-black dark:hover:bg-white",
+      false: "hover:bg-gray-300 dark:hover:bg-gray-700",
+    },
+    disabled: {
+      true: "cursor-default pointer-events-none",
+      false: "cursor-pointer",
+    },
+  }
+);

package/templates/components/Calendar/Calendar.types.ts

@@ -0,0 +1,6 @@
+export interface UixyCalendarProps {
+  year?: number;
+  month?: number;
+  startOfWeek?: "Sunday" | "Monday";
+  disabled?: boolean;
+}

package/templates/components/Calendar/index.ts

@@ -0,0 +1,4 @@
+import UixyCalendar from "./Calendar.component.vue";
+import type { UixyCalendarProps } from "./Calendar.types";
+
+export { UixyCalendar, type UixyCalendarProps };

package/templates/components/Card/Card.component.vue

@@ -0,0 +1,34 @@
+<template>
+  <uixy-link v-if="props.link" v-bind="props.link">
+    <div :class="cardStyles($attrs.class as string)" v-bind="filteredAttrs">
+      <slot />
+    </div>
+  </uixy-link>
+  <div
+    v-else
+    :class="cardStyles($attrs.class as string)"
+    v-bind="filteredAttrs"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { UixyLink } from "../Link";
+  import { type UixyCardProps } from "./Card.types";
+  import { cardStyles } from "./Card.styles";
+
+  const props = defineProps<UixyCardProps>();
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const attrs = useAttrs();
+
+  const filteredAttrs = computed(() => {
+    const { class: _, ...rest } = attrs;
+
+    return rest;
+  });
+</script>

package/templates/components/Card/Card.styles.ts

@@ -0,0 +1,7 @@
+import styles from "~/utils/styles";
+
+const cardStyles = styles(
+  "rounded-2 border border-solid border-gray-300 bg-white px-4 py-2 dark:border-gray-900 dark:bg-gray-1000"
+);
+
+export { cardStyles };

package/templates/components/Card/Card.types.ts

@@ -0,0 +1,5 @@
+import type { UixyLinkProps } from "../Link";
+
+export interface UixyCardProps {
+  link?: UixyLinkProps;
+}

package/templates/components/Card/index.ts

@@ -0,0 +1,4 @@
+import UixyCard from "./Card.component.vue";
+import type { UixyCardProps } from "./Card.types";
+
+export { UixyCard, type UixyCardProps };

package/templates/components/Checkbox/Checkbox.component.vue

@@ -0,0 +1,49 @@
+<template>
+  <label :class="checkboxStyles($attrs.class as string)">
+    <div class="relative flex items-center justify-center">
+      <input
+        type="checkbox"
+        :disabled="props.disabled"
+        v-model="checked"
+        class="size-4 cursor-pointer appearance-none rounded-1 border border-black transition-all duration-150 ease-in-out checked:bg-black hover:bg-gray-300 checked:hover:bg-gray-800 disabled:pointer-events-none disabled:border-gray-500 disabled:bg-gray-300 checked:disabled:bg-gray-500 dark:border-gray-100 dark:checked:bg-gray-100 dark:hover:bg-gray-800 dark:checked:hover:bg-gray-200 dark:disabled:border-gray-600 dark:disabled:bg-gray-900 dark:checked:disabled:bg-gray-600"
+      />
+      <animate-presence>
+        <motion.div
+          v-if="checked"
+          :initial="{ opacity: 0 }"
+          :animate="{ opacity: 1 }"
+          :exit="{ opacity: 0 }"
+          :transition="{ duration: 0.08, ease: 'easeInOut' }"
+          class="pointer-events-none absolute"
+        >
+          <uixy-icon
+            name="check"
+            :class="
+              iconStyles({
+                disabled: !!props.disabled,
+                checked: checked,
+              })
+            "
+          />
+        </motion.div>
+      </animate-presence>
+    </div>
+    <p
+      v-if="$slots.default"
+      :class="labelStyles({ disabled: !!props.disabled })"
+    >
+      <slot />
+    </p>
+  </label>
+</template>
+
+<script setup lang="ts">
+  import { motion, AnimatePresence } from "motion-v";
+  import { UixyIcon } from "../Icon";
+  import type { UixyCheckboxProps } from "./Checkbox.types";
+  import { checkboxStyles, iconStyles, labelStyles } from "./Checkbox.styles";
+
+  const props = defineProps<UixyCheckboxProps>();
+
+  const checked = defineModel<boolean>("checked");
+</script>

package/templates/components/Checkbox/Checkbox.styles.ts

@@ -0,0 +1,21 @@
+import styles from "~/utils/styles";
+
+export const checkboxStyles = styles("flex items-center gap-2");
+
+export const iconStyles = styles("h-3 w-3", {
+  disabled: {
+    true: "text-gray-500",
+    false: "",
+  },
+  checked: {
+    true: "dark:text-black text-white",
+    false: "text-transparent",
+  },
+});
+
+export const labelStyles = styles("text-sm", {
+  disabled: {
+    true: "text-gray-500 dark:text-gray-600",
+    false: "",
+  },
+});

package/templates/components/Checkbox/Checkbox.types.ts

@@ -0,0 +1,3 @@
+export interface UixyCheckboxProps {
+  disabled?: boolean;
+}

package/templates/components/Checkbox/index.ts

@@ -0,0 +1,4 @@
+import UixyCheckbox from "./Checkbox.component.vue";
+import type { UixyCheckboxProps } from "./Checkbox.types";
+
+export { UixyCheckbox, type UixyCheckboxProps };

package/templates/components/Command/Command.component.vue

@@ -0,0 +1,100 @@
+<template>
+  <uixy-modal v-model="open">
+    <uixy-card :class="commandStyles($attrs.class as string)">
+      <div class="flex items-center gap-2 p-3">
+        <label :for="id">
+          <uixy-icon
+            name="search"
+            class="size-5 cursor-pointer text-gray-400 transition-all duration-150 ease-in-out hover:text-black dark:text-gray-700 dark:hover:text-gray-500"
+          />
+        </label>
+        <input
+          :id
+          :placeholder
+          class="w-full bg-transparent text-sm placeholder:text-gray-400 focus-visible:outline-none dark:placeholder:text-gray-700"
+          type="text"
+          v-model="input"
+        />
+        <uixy-icon
+          name="close"
+          class="size-4 cursor-pointer text-gray-400 transition-all duration-150 ease-in-out hover:text-black dark:text-gray-700 dark:hover:text-gray-500"
+          @click="handleClose"
+        />
+      </div>
+      <uixy-separator variant="horizontal" />
+      <div class="scrollbar max-h-[320px] overflow-y-auto">
+        <template v-for="option in filteredOptions" :key="option.label">
+          <template v-if="option.items.length > 0">
+            <ul class="flex flex-col gap-2 p-2">
+              <div class="font-500 text-xs text-gray-500 dark:text-gray-600">
+                {{ option.label }}
+              </div>
+              <li
+                v-for="item in option.items"
+                :key="item.label"
+                @click="handleClose"
+                class="rounded-1 text-sm transition-all duration-100 ease-in-out hover:bg-gray-200 dark:hover:bg-gray-900"
+              >
+                <uixy-link
+                  v-bind="item.link"
+                  class="rounded-1 flex items-center gap-2 p-1"
+                >
+                  <uixy-icon :name="item.icon" class="size-4" />
+                  <span>{{ item.label }}</span>
+                </uixy-link>
+              </li>
+            </ul>
+            <uixy-separator variant="horizontal" class="last-of-type:hidden" />
+          </template>
+        </template>
+        <p
+          v-if="isEmpty"
+          class="py-4 text-center text-gray-400 dark:text-gray-700"
+        >
+          {{ emptyText }}
+        </p>
+      </div>
+    </uixy-card>
+  </uixy-modal>
+</template>
+
+<script setup lang="ts">
+  import { UixyModal } from "../Modal";
+  import { UixyCard } from "../Card";
+  import { UixyLink } from "../Link";
+  import { UixyIcon } from "../Icon";
+  import { UixySeparator } from "../Separator";
+  import { commandStyles } from "./Command.styles";
+  import type { UixyCommandProps } from "./Command.types";
+
+  const props = defineProps<UixyCommandProps>();
+
+  const open = defineModel<boolean>("open");
+
+  const input = defineModel<string>("input");
+
+  const id = useId();
+
+  const filteredOptions = computed(() =>
+    props.options.map((option) => ({
+      label: option.label,
+      items: option.items.filter((item) =>
+        item.label.toLowerCase().includes(input.value?.toLowerCase() ?? "")
+      ),
+    }))
+  );
+
+  const isEmpty = computed(() =>
+    filteredOptions.value.every((option) => option.items.length === 0)
+  );
+
+  const handleClose = () => {
+    open.value = false;
+  };
+
+  const placeholder = computed(
+    () => props.placeholder || "Search or type a command..."
+  );
+
+  const emptyText = computed(() => props.emptyText || "No results found.");
+</script>

package/templates/components/Command/Command.styles.ts

@@ -0,0 +1,3 @@
+import styles from "~/utils/styles";
+
+export const commandStyles = styles("w-[520px] max-w-[90vw] shadow-md !p-0");

package/templates/components/Command/Command.types.ts

@@ -0,0 +1,19 @@
+import type { IconName } from "~/types/icons";
+import type { UixyLinkProps } from "../Link";
+
+export interface UixyCommandItem {
+  label: string;
+  icon: IconName;
+  link: UixyLinkProps;
+}
+
+export interface UixyCommandItems {
+  label: string;
+  items: UixyCommandItem[];
+}
+
+export interface UixyCommandProps {
+  options: UixyCommandItems[];
+  placeholder?: string;
+  emptyText?: string;
+}

package/templates/components/Command/index.ts

@@ -0,0 +1,4 @@
+import UixyCommand from "./Command.component.vue";
+import { type UixyCommandProps } from "./Command.types";
+
+export { UixyCommand, type UixyCommandProps };

package/templates/components/Icon/Icon.component.vue

@@ -0,0 +1,20 @@
+<template>
+  <component v-if="iconComponent" :is="iconComponent" />
+</template>
+
+<script lang="ts" setup>
+  import { computed } from "vue";
+  import { ICONS } from "~/types/icons";
+  import type { UixyIconProps } from "./Icon.types";
+
+  const props = defineProps<UixyIconProps>();
+
+  const icons = import.meta.glob("~/assets/icons/**/*.svg", { eager: true });
+
+  const iconKey = computed(() => `/assets/icons/${ICONS[props.name]}.svg`);
+
+  const iconComponent = computed(() => {
+    const mod = icons[iconKey.value] as { default: any } | undefined;
+    return mod?.default || null;
+  });
+</script>

package/templates/components/Icon/Icon.types.ts

@@ -0,0 +1,5 @@
+import { type IconName } from "~/types/icons";
+
+export interface UixyIconProps {
+  name: IconName;
+}

package/templates/components/Icon/index.ts

@@ -0,0 +1,4 @@
+import UixyIcon from "./Icon.component.vue";
+import { type UixyIconProps } from "./Icon.types";
+
+export { UixyIcon, type UixyIconProps };

package/templates/components/IconButton/IconButton.component.vue

@@ -0,0 +1,95 @@
+<template>
+  <uixy-link
+    v-if="props.link"
+    :class="linkStyles({ disabled: !!props.disabled })"
+    :tabindex="props.disabled ? -1 : 0"
+    v-bind="{
+      ...props.link,
+      ...filteredAttrs,
+    }"
+  >
+    <div :class="iconButtonStyles({ variant, size }, $attrs.class as string)">
+      <animate-presence :initial="false">
+        <motion.div
+          v-if="props.loading"
+          class="absolute top-1/2 flex size-6 -translate-y-1/2 items-center justify-center"
+          :initial="{ opacity: 0 }"
+          :animate="{ opacity: 1 }"
+          :exit="{ opacity: 0 }"
+          :transition="{ ease: 'easeInOut', duration: 0.15 }"
+        >
+          <uixy-loader size="sm" />
+        </motion.div>
+      </animate-presence>
+      <animate-presence :initial="false">
+        <motion.div
+          :initial="{ opacity: 0 }"
+          :animate="{
+            opacity: props.loading ? 0 : 1,
+          }"
+          :transition="{ ease: 'easeInOut', duration: 0.15 }"
+        >
+          <uixy-icon :name="props.icon" class="size-5 shrink-0" />
+        </motion.div>
+      </animate-presence>
+    </div>
+  </uixy-link>
+  <button
+    v-else
+    :class="iconButtonStyles({ variant, size }, $attrs.class as string)"
+    :disabled="props.disabled || props.loading"
+    :type="props.type ?? 'button'"
+    :tabindex="props.disabled ? -1 : 0"
+    v-bind="filteredAttrs"
+  >
+    <animate-presence :initial="false">
+      <motion.div
+        v-if="props.loading"
+        class="absolute top-1/2 flex size-6 -translate-y-1/2 items-center justify-center"
+        :initial="{ opacity: 0 }"
+        :animate="{ opacity: 1 }"
+        :exit="{ opacity: 0 }"
+        :transition="{ ease: 'easeInOut', duration: 0.15 }"
+      >
+        <uixy-loader size="sm" />
+      </motion.div>
+    </animate-presence>
+    <animate-presence :initial="false">
+      <motion.div
+        :initial="{ opacity: 0 }"
+        :animate="{
+          opacity: props.loading ? 0 : 1,
+        }"
+        :transition="{ ease: 'easeInOut', duration: 0.15 }"
+      >
+        <uixy-icon :name="props.icon" class="size-5 shrink-0" />
+      </motion.div>
+    </animate-presence>
+  </button>
+</template>
+
+<script setup lang="ts">
+  import { UixyLink } from "../Link";
+  import { UixyLoader } from "../Loader";
+  import { UixyIcon } from "../Icon";
+  import { AnimatePresence, motion } from "motion-v";
+  import type { UixyIconButtonProps } from "./IconButton.types";
+  import { iconButtonStyles, linkStyles } from "./IconButton.styles";
+
+  const props = defineProps<UixyIconButtonProps>();
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const attrs = useAttrs();
+
+  const filteredAttrs = computed(() => {
+    const { class: _, ...rest } = attrs;
+
+    return rest;
+  });
+
+  const variant = computed(() => props.variant || "primary");
+  const size = computed(() => props.size || "md");
+</script>

package/templates/components/IconButton/IconButton.styles.ts

@@ -0,0 +1,29 @@
+import styles from "~/utils/styles";
+
+export const iconButtonStyles = styles(
+  "relative cursor-pointer font-500 aspect-square rounded-1 transition-all duration-200 ease-in-out hover:shadow-xs flex items-center justify-center disabled:pointer-events-none",
+  {
+    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",
+      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",
+      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",
+      quaternary:
+        "dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800 disabled:text-gray-700",
+    },
+    size: {
+      sm: "p-1",
+      md: "p-2",
+      lg: "p-3",
+    },
+  }
+);
+
+export const linkStyles = styles("rounded-1", {
+  disabled: {
+    true: "pointer-events-none",
+    false: "",
+  },
+});

package/templates/components/IconButton/IconButton.types.ts

@@ -0,0 +1,12 @@
+import type { IconName } from "~/types/icons";
+import { type UixyLinkProps } from "../Link";
+
+export interface UixyIconButtonProps {
+  icon: IconName;
+  variant?: "primary" | "secondary" | "tertiary" | "quaternary";
+  size?: "sm" | "md" | "lg";
+  type?: "button" | "submit" | "reset";
+  disabled?: boolean;
+  loading?: boolean;
+  link?: UixyLinkProps;
+}