v-uixy 1.0.0

package/templates/components/Skeleton/index.ts

@@ -0,0 +1,4 @@
+import UixySkeleton from "./Skeleton.component.vue";
+import { type UixySkeletonProps } from "./Skeleton.types";
+
+export { UixySkeleton, type UixySkeletonProps };

package/templates/components/Slider/Slider.component.vue

@@ -0,0 +1,51 @@
+<template>
+  <div :class="sliderWrapperStyles($attrs.class as string)">
+    <input
+      type="range"
+      v-model="sliderValue"
+      :disabled="props.disabled"
+      :min="props.min"
+      :max="props.max"
+      :step="props.step"
+      class="slider group h-2 w-full appearance-none rounded-full bg-gray-300 dark:bg-gray-800"
+    />
+    <div
+      :class="sliderStyles({ disabled: !!props.disabled }, calcRounded())"
+      :style="{ width: calcWidth() }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { UixySliderProps } from "./Slider.types";
+  import { sliderStyles, sliderWrapperStyles } from "./Slider.styles";
+
+  const props = defineProps<UixySliderProps>();
+
+  const sliderValue = defineModel<number>("sliderValue", {
+    default: 0,
+  });
+
+  const calcWidth = () => {
+    if (sliderValue?.value > (props.max ?? 100) / 2)
+      return `calc(${
+        ((sliderValue?.value - (props.min ?? 0)) /
+          ((props.max ?? 100) - (props.min ?? 0))) *
+        100
+      }%)`;
+
+    if (sliderValue.value === 0) return "0%";
+
+    return `calc(${
+      ((sliderValue.value - (props.min ?? 0)) /
+        ((props.max ?? 100) - (props.min ?? 0))) *
+      100
+    }% + 3px)`;
+  };
+
+  const calcRounded = () => {
+    if (sliderValue.value > (props.max ?? 100) / 1.4) return "rounded-full";
+
+    return "rounded-l-full";
+  };
+</script>

package/templates/components/Slider/Slider.styles.ts

@@ -0,0 +1,13 @@
+import styles from "~/utils/styles";
+
+export const sliderWrapperStyles = styles("relative flex w-full");
+
+export const sliderStyles = styles(
+  "pointer-events-none absolute top-0 h-2 bg-black dark:bg-gray-100",
+  {
+    disabled: {
+      true: "bg-gray-500 dark:bg-gray-500",
+      false: "",
+    },
+  }
+);

package/templates/components/Slider/Slider.types.ts

@@ -0,0 +1,6 @@
+export interface UixySliderProps {
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+}

package/templates/components/Slider/index.ts

@@ -0,0 +1,4 @@
+import UixySlider from "./Slider.component.vue";
+import { type UixySliderProps } from "./Slider.types";
+
+export { UixySlider, type UixySliderProps };

package/templates/components/Switch/Switch.component.vue

@@ -0,0 +1,44 @@
+<template>
+  <label class="flex items-center gap-2">
+    <div class="relative flex items-center justify-center">
+      <input
+        type="checkbox"
+        :disabled="props.disabled"
+        v-model="model"
+        class="box-content h-4 w-8 cursor-pointer appearance-none rounded-full border-2 border-gray-300 bg-gray-300 transition-all duration-200 ease-in-out checked:border-black checked:bg-black disabled:cursor-default disabled:border-gray-500 disabled:bg-gray-500 dark:border-gray-900 dark:bg-gray-900 dark:checked:border-gray-100 dark:checked:bg-gray-100 dark:disabled:border-gray-700 dark:disabled:bg-gray-700"
+      />
+      <animate-presence :initial="false">
+        <motion.div
+          :animate="{
+            left: model ? 'auto' : 0,
+            right: model ? 0 : 'auto',
+          }"
+          :transition="{ duration: 0.1, ease: 'easeInOut' }"
+          :class="switchStyles(
+              {
+                disabled: !!props.disabled,
+                checked: !!model,
+              },
+              $attrs.class as string,
+            )"
+        ></motion.div>
+      </animate-presence>
+    </div>
+    <p
+      v-if="$slots.default"
+      :class="labelStyles({ disabled: !!props.disabled })"
+    >
+      <slot />
+    </p>
+  </label>
+</template>
+
+<script setup lang="ts">
+  import { AnimatePresence, motion } from "motion-v";
+  import type { UixySwitchProps } from "./Switch.types";
+  import { switchStyles, labelStyles } from "./Switch.styles";
+
+  const props = defineProps<UixySwitchProps>();
+
+  const model = defineModel<boolean>();
+</script>

package/templates/components/Switch/Switch.styles.ts

@@ -0,0 +1,22 @@
+import styles from "~/utils/styles";
+
+export const switchStyles = styles(
+  "pointer-events-none absolute mx-[2px] h-4 w-4 rounded-full bg-gray-100 shadow-xs transition-colors duration-200 ease-in-out",
+  {
+    disabled: {
+      true: "bg-gray-400 dark:bg-gray-600",
+      false: "",
+    },
+    checked: {
+      true: "dark:bg-black",
+      false: "",
+    },
+  }
+);
+
+export const labelStyles = styles("text-sm", {
+  disabled: {
+    true: "text-gray-500 dark:text-gray-600",
+    false: "",
+  },
+});

package/templates/components/Switch/Switch.types.ts

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

package/templates/components/Switch/index.ts

@@ -0,0 +1,4 @@
+import UixySwitch from "./Switch.component.vue";
+import { type UixySwitchProps } from "./Switch.types";
+
+export { UixySwitch, type UixySwitchProps };

package/templates/components/TableOfContents/TableOfContents.component.vue

@@ -0,0 +1,118 @@
+<template>
+  <nav
+    :class="tableOfContentsStyles($attrs.class as string)"
+    v-bind="filteredAttrs"
+  >
+    <p class="text-sm font-500">{{ props.heading ?? "On This Page" }}</p>
+    <ul class="flex list-none flex-col gap-2">
+      <li
+        v-for="(heading, i) in headings"
+        :key="heading.innerText"
+        @click="handleClick(heading)"
+        :class="
+          itemStyles({
+            node: node(heading),
+            active: i === index,
+          })
+        "
+      >
+        {{ heading.dataset.toc ?? heading.innerText }}
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+  import { tableOfContentsStyles, itemStyles } from "./TableOfContents.styles";
+
+  import type { UixyTableOfContentsProps } from "./TableOfContents.types";
+
+  const props = defineProps<UixyTableOfContentsProps>();
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const attrs = useAttrs();
+
+  const filteredAttrs = computed(() => {
+    const { class: _, ...rest } = attrs;
+
+    return rest;
+  });
+
+  const node = (heading: HTMLElement) => {
+    return heading.nodeName as "H2" | "H3" | "H4" | "H5" | "H6";
+  };
+
+  const headings = ref<HTMLElement[]>([]);
+  const active = ref<HTMLElement | null>(null);
+  const headingElementsRef = ref(
+    new Map<HTMLElement, IntersectionObserverEntry>()
+  );
+
+  const index = computed(() =>
+    headings.value.indexOf(active.value as HTMLElement)
+  );
+
+  const container = computed(() => props.container ?? "[data-content]");
+
+  onMounted(() => {
+    const headingElements = Array.from(
+      document.querySelectorAll(
+        `${container.value} h2, ${container.value} h3, ${container.value} h4, ${container.value} h5, ${container.value} h6`
+      )
+    );
+
+    headings.value = headingElements as HTMLElement[];
+  });
+
+  const handleClick = (heading: HTMLElement) => {
+    const rect = heading.getBoundingClientRect();
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const targetPosition = rect.top + scrollTop - 96;
+
+    window.scrollTo({
+      top: targetPosition,
+      behavior: "smooth",
+    });
+  };
+
+  watch(
+    () => headings.value,
+    (newHeadings) => {
+      if (newHeadings.length) {
+        const observer = new IntersectionObserver(
+          (entries: IntersectionObserverEntry[]) => {
+            entries.forEach((entry) => {
+              const targetEl = entry.target as HTMLElement;
+              if (entry.isIntersecting) {
+                headingElementsRef.value.set(targetEl, entry);
+              } else {
+                headingElementsRef.value.delete(targetEl);
+              }
+            });
+
+            const visibleHeadings = Array.from(
+              headingElementsRef.value.values()
+            )
+              .map((entry) => entry.target as HTMLElement)
+              .sort(
+                (a, b) => headings.value.indexOf(a) - headings.value.indexOf(b)
+              );
+
+            if (visibleHeadings.length) {
+              active.value = visibleHeadings[0];
+            }
+          },
+          { rootMargin: "0px 0px -40% 0px" }
+        );
+
+        newHeadings.forEach((element) => observer.observe(element));
+
+        return () => observer.disconnect();
+      }
+    },
+    { immediate: true }
+  );
+</script>

package/templates/components/TableOfContents/TableOfContents.styles.ts

@@ -0,0 +1,23 @@
+import styles from "~/utils/styles";
+
+export const tableOfContentsStyles = styles(
+  "flex w-full max-w-[200px] flex-col gap-4"
+);
+
+export const itemStyles = styles(
+  "text-xs line-clamp-1 transition-all duration-150 ease-in-out cursor-pointer",
+  {
+    node: {
+      H2: "ml-0",
+      H3: "ml-1",
+      H4: "ml-2",
+      H5: "ml-3",
+      H6: "ml-4",
+    },
+    active: {
+      true: "pl-1 font-600",
+      false:
+        "text-gray-700 pl-0 dark:text-gray-600 hover:pl-1 hover:text-gray-600 dark:hover:text-gray-100",
+    },
+  }
+);

package/templates/components/TableOfContents/TableOfContents.types.ts

@@ -0,0 +1,4 @@
+export interface UixyTableOfContentsProps {
+  heading?: string;
+  container?: string;
+}

package/templates/components/TableOfContents/index.ts

@@ -0,0 +1,4 @@
+import UixyTableOfContents from "./TableOfContents.component.vue";
+import { type UixyTableOfContentsProps } from "./TableOfContents.types";
+
+export { UixyTableOfContents, type UixyTableOfContentsProps };

package/templates/components/Tabs/Tabs.component.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="flex flex-col">
+    <div :class="tabsNavWrapperStyles()">
+      <motion.div
+        v-for="tab in props.tabs"
+        :key="tab.value"
+        @click="active = tab.value"
+        :class="tabsNavInnerWrapperStyles()"
+      >
+        {{ tab.label }}
+        <animate-presence mode="wait" :initial="false">
+          <motion.div
+            v-if="active === tab.value"
+            :layoutId
+            :initial="{ opacity: 0 }"
+            :animate="{ opacity: 1 }"
+            :exit="{ opacity: 0 }"
+            :transition="{ duration: 0.2, ease: 'easeInOut' }"
+            :class="tabsNavStyles({ variant: props.variant })"
+          />
+        </animate-presence>
+      </motion.div>
+    </div>
+    <slot name="nav-extra" />
+    <div>
+      <animate-presence mode="wait" :initial="false">
+        <motion.div
+          :key="active"
+          :initial="{ opacity: 0, y: 4 }"
+          :animate="{ opacity: 1, y: 0 }"
+          :exit="{ opacity: 0, y: 4 }"
+          :transition="{ duration: 0.2, ease: 'easeInOut' }"
+        >
+          <slot :name="active" />
+        </motion.div>
+      </animate-presence>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import {
+    tabsNavStyles,
+    tabsNavInnerWrapperStyles,
+    tabsNavWrapperStyles,
+  } from "./Tabs.styles";
+  import type { UixyTabsProps } from "./Tabs.types";
+  import { motion, AnimatePresence } from "motion-v";
+  import { v4 as uuidv4 } from "uuid";
+
+  const props = defineProps<UixyTabsProps>();
+
+  const active = defineModel<UixyTabsProps["tabs"][0]["value"]>();
+
+  const layoutId = computed(() => `uixy-tabs-${uuidv4()}`);
+
+  onBeforeMount(() => {
+    if (props.tabs.length > 0) active.value = props.tabs[0].value;
+  });
+</script>

package/templates/components/Tabs/Tabs.styles.ts

@@ -0,0 +1,17 @@
+import styles from "~/utils/styles";
+
+export const tabsNavWrapperStyles = styles("flex");
+
+export const tabsNavInnerWrapperStyles = styles(
+  "relative cursor-pointer px-4 py-2 text-sm font-500"
+);
+
+export const tabsNavStyles = styles(
+  "absolute bottom-0 left-0 right-0 w-full rounded-1",
+  {
+    variant: {
+      primary: "h-[1px] bg-black dark:bg-gray-100",
+      secondary: "h-full bg-black/10 dark:bg-gray-100/10",
+    },
+  }
+);

package/templates/components/Tabs/Tabs.types.ts

@@ -0,0 +1,7 @@
+export interface UixyTabsProps {
+  tabs: {
+    label: string;
+    value: string | number;
+  }[];
+  variant: "primary" | "secondary";
+}

package/templates/components/Tabs/index.ts

@@ -0,0 +1,4 @@
+import UixyTabs from "./Tabs.component.vue";
+import { type UixyTabsProps } from "./Tabs.types";
+
+export { UixyTabs, type UixyTabsProps };

package/templates/components/Textarea/Textarea.component.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="flex flex-col gap-1">
+    <div class="flex flex-col-reverse gap-1">
+      <textarea
+        :id
+        v-model="model"
+        :disabled="props.disabled"
+        :placeholder="props.placeholder"
+        :auto-focus="props.autoFocus"
+        :rows="props.rows ?? 3"
+        :max-length="props.maxLength"
+        :class="textareaStyles(
+              { status, noResize: !!props.noResize },
+              $attrs.class as string,
+            )"
+        v-bind="filteredAttrs"
+      />
+      <label v-if="props.label" :for="id" :class="labelStyles({ status })">
+        {{ props.label }}
+      </label>
+    </div>
+    <div class="h-4" v-if="!props.hideHelper">
+      <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,
+                align: props.alignText ?? 'left',
+              })
+            "
+          >
+            {{ text }}
+          </p>
+        </motion.div>
+      </animate-presence>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { motion, AnimatePresence } from "motion-v";
+  import type { UixyTextareaProps } from "./Textarea.types";
+  import { textareaStyles, labelStyles, helperStyles } from "./Textarea.styles";
+
+  const props = defineProps<UixyTextareaProps>();
+
+  defineOptions({
+    inheritAttrs: false,
+  });
+
+  const attrs = useAttrs();
+
+  const filteredAttrs = computed(() => {
+    const { class: _, ...rest } = attrs;
+
+    return rest;
+  });
+
+  const model = defineModel<string>();
+
+  const id = useId();
+
+  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/Textarea/Textarea.styles.ts

@@ -0,0 +1,50 @@
+import styles from "~/utils/styles";
+
+export const textareaStyles = 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 scrollbar",
+  {
+    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 resize-none",
+      valid:
+        "bg-white dark:bg-gray-1000 focus-visible:border-gray-500 dark:focus-visible:border-gray-600",
+    },
+    noResize: {
+      true: "resize-none",
+      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",
+    },
+    align: {
+      left: "text-left",
+      right: "text-right",
+      center: "text-center",
+    },
+  }
+);

package/templates/components/Textarea/Textarea.types.ts

@@ -0,0 +1,14 @@
+export interface UixyTextareaProps {
+  status?: "valid" | "error" | "default";
+  label?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  helperText?: string;
+  errorText?: string;
+  alignText?: "left" | "center" | "right";
+  autoFocus?: boolean;
+  noResize?: boolean;
+  rows?: number;
+  maxLength?: number;
+  hideHelper?: boolean;
+}

package/templates/components/Textarea/index.ts

@@ -0,0 +1,4 @@
+import UixyTextarea from "./Textarea.component.vue";
+import { type UixyTextareaProps } from "./Textarea.types";
+
+export { UixyTextarea, type UixyTextareaProps };

package/templates/components/Theme/Theme.component.vue

@@ -0,0 +1,82 @@
+<template>
+  <client-only>
+    <slot />
+  </client-only>
+</template>
+
+<script setup lang="ts">
+  const getTheme = () => {
+    if (typeof window !== "undefined") {
+      const darkModeMediaQuery = window.matchMedia(
+        "(prefers-color-scheme: dark)"
+      );
+
+      const t = window.localStorage.getItem("theme");
+
+      if (t) return t as "light" | "dark";
+
+      return darkModeMediaQuery.matches ? "dark" : "light";
+    }
+
+    return "dark";
+  };
+
+  const theme = ref<"light" | "dark">(getTheme());
+
+  const changeTheme = (val: "light" | "dark") => {
+    window.localStorage.setItem("theme", val);
+
+    theme.value = val;
+  };
+
+  const listener = (event: StorageEvent) => {
+    if (event.key === "theme") {
+      theme.value = event.newValue as "light" | "dark";
+    }
+  };
+
+  const updateClasses = (val: "light" | "dark") => {
+    const body = document.querySelector("body");
+
+    if (!body) return;
+
+    const root = document.documentElement;
+
+    root.classList.add("disable-transitions");
+
+    body.classList.remove("light", "dark");
+    body.classList.add(val as unknown as string);
+
+    requestAnimationFrame(() => {
+      root.classList.remove("disable-transitions");
+    });
+  };
+
+  watch(
+    () => theme.value,
+    (newVal) => {
+      updateClasses(newVal);
+    }
+  );
+
+  onMounted(() => {
+    window.addEventListener("storage", listener);
+
+    updateClasses(getTheme());
+
+    setTimeout(() => {
+      const body = document.querySelector("body");
+
+      if (!body) return;
+
+      body.classList.add("loaded");
+    }, 300);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener("storage", listener);
+  });
+
+  provide("theme", theme);
+  provide("changeTheme", changeTheme);
+</script>

package/templates/components/Theme/Theme.types.ts

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

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

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

package/templates/components/Theme/composables/useTheme.composable.ts

@@ -0,0 +1,15 @@
+export const useTheme = () => {
+  const theme = inject("theme") as Ref<"light" | "dark">;
+
+  const changeTheme = inject("changeTheme") as (
+    theme: "light" | "dark"
+  ) => void;
+
+  if (!theme || !changeTheme)
+    throw new Error("useTheme composable must be used inside theme provider.");
+
+  return {
+    theme,
+    changeTheme,
+  };
+};

package/templates/components/Theme/index.ts

@@ -0,0 +1,5 @@
+import UixyTheme from "./Theme.component.vue";
+import { type UixyThemeProps } from "./Theme.types";
+
+export * from "./composables";
+export { UixyTheme, type UixyThemeProps };