windly-ui 1.0.2 → 1.0.3

package/{ui-library/dist → dist}/module.json

@@ -1,6 +1,6 @@
 {
-  "name": "ui-library",
-  "configKey": "uiLibrary",
+  "name": "windly-ui",
+  "version": "1.0.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -0,0 +1,26 @@
+import { defineNuxtModule, createResolver, addComponentsDir } from '@nuxt/kit';
+import tailwindColor from '../dist/runtime/tailwind-color.js';
+
+const module$1 = defineNuxtModule({
+  setup(_, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      prefix: "UI",
+      pathPrefix: false
+    });
+    nuxt.hook("tailwindcss:config", (config) => {
+      config.content ??= {};
+      if (!Array.isArray(config.content.files)) {
+        config.content.files = [];
+      }
+      config.content.files.push(
+        resolver.resolve("./runtime/components/**/*.{vue,js,ts}")
+      );
+      config.safelist ??= [];
+      config.safelist.push(...tailwindColor);
+    });
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/components/Accordion.d.vue.ts

@@ -0,0 +1,39 @@
+type TriggerType = 'click' | 'hover';
+type ToggleSide = 'left' | 'right';
+type __VLS_Props = {
+    title?: string;
+    caption?: string;
+    modelValue?: boolean;
+    defaultOpen?: boolean;
+    trigger?: TriggerType;
+    disabled?: boolean;
+    dense?: boolean;
+    toggleSide?: ToggleSide;
+    margin?: boolean;
+};
+declare var __VLS_6: {}, __VLS_19: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_6) => any;
+} & {
+    default?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    defaultOpen: boolean;
+    trigger: TriggerType;
+    disabled: boolean;
+    dense: boolean;
+    toggleSide: ToggleSide;
+    margin: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Accordion.vue

@@ -0,0 +1,92 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+const props = defineProps({
+  title: { type: String, required: false },
+  caption: { type: String, required: false },
+  modelValue: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false, default: false },
+  trigger: { type: String, required: false, default: "click" },
+  disabled: { type: Boolean, required: false, default: false },
+  dense: { type: Boolean, required: false, default: false },
+  toggleSide: { type: String, required: false, default: "right" },
+  margin: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+const isControlled = computed(() => props.modelValue !== void 0);
+const isOpen = ref(props.defaultOpen ?? false);
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (isControlled.value && typeof val === "boolean") {
+      isOpen.value = val;
+    }
+  },
+  { immediate: true }
+);
+const setOpen = (val) => {
+  if (props.disabled) return;
+  isOpen.value = val;
+  emit("update:modelValue", val);
+};
+const toggle = () => setOpen(!isOpen.value);
+const headerEvents = computed(() => {
+  if (props.trigger === "hover") {
+    return {
+      mouseenter: () => setOpen(true),
+      mouseleave: () => setOpen(false),
+      click: void 0
+    };
+  }
+  return {
+    mouseenter: void 0,
+    mouseleave: void 0,
+    click: toggle
+  };
+});
+</script>
+
+<template>
+    <div class="flex flex-col rounded-md border transition-opacity" :class="[
+  dense ? 'text-sm' : '',
+  disabled ? 'opacity-50 pointer-events-none' : ''
+]">
+
+        <!-- Header -->
+        <div v-on="headerEvents" class="flex items-center cursor-pointer select-none gap-3" :class="[
+  margin ? dense ? 'p-2' : 'p-3' : dense ? 'py-2' : 'py-3',
+  isOpen ? 'border-b' : ''
+]">
+
+            <!-- Toggle (left) -->
+            <UIButton v-if="toggleSide === 'left'" icon="chevron_right" flat dense class="transition-transform"
+                :class="isOpen ? 'rotate-90' : ''" />
+
+            <!-- Header content -->
+            <div class="flex-1">
+                <slot name="header">
+                    <h3 class="font-semibold">
+                        {{ title }}
+                    </h3>
+                    <p v-if="caption" class="text-gray-500 text-xs">
+                        {{ caption }}
+                    </p>
+                </slot>
+            </div>
+
+            <!-- Toggle (right) -->
+            <UIButton v-if="toggleSide === 'right'" icon="chevron_right" flat dense class="transition-transform"
+                :class="isOpen ? 'rotate-90' : ''" />
+        </div>
+
+        <!-- Content -->
+        <transition enter-active-class="transition-all duration-300 ease-out"
+            leave-active-class="transition-all duration-200 ease-in" enter-from-class="opacity-0 max-h-0"
+            enter-to-class="opacity-100 max-h-[1000px]" leave-from-class="opacity-100 max-h-[1000px]"
+            leave-to-class="opacity-0 max-h-0">
+            <div v-show="isOpen" class="overflow-hidden pb-3" :class="margin ? 'px-3' : 'px-none'">
+                <slot />
+            </div>
+        </transition>
+
+    </div>
+</template>

package/dist/runtime/components/Accordion.vue.d.ts

@@ -0,0 +1,39 @@
+type TriggerType = 'click' | 'hover';
+type ToggleSide = 'left' | 'right';
+type __VLS_Props = {
+    title?: string;
+    caption?: string;
+    modelValue?: boolean;
+    defaultOpen?: boolean;
+    trigger?: TriggerType;
+    disabled?: boolean;
+    dense?: boolean;
+    toggleSide?: ToggleSide;
+    margin?: boolean;
+};
+declare var __VLS_6: {}, __VLS_19: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_6) => any;
+} & {
+    default?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    defaultOpen: boolean;
+    trigger: TriggerType;
+    disabled: boolean;
+    dense: boolean;
+    toggleSide: ToggleSide;
+    margin: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Avatar.d.vue.ts

@@ -0,0 +1,141 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: "blue-900";
+    };
+    rounded: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    size: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    iconSize: {
+        readonly type: StringConstructor;
+        readonly default: "lg";
+    };
+    image: {
+        type: StringConstructor;
+        default: string;
+    };
+    altText: {
+        type: StringConstructor;
+        default: string;
+    };
+    initials: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderThickness: {
+        type: NumberConstructor;
+        default: number;
+    };
+    shadow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: "blue-900";
+    };
+    rounded: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    size: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    iconSize: {
+        readonly type: StringConstructor;
+        readonly default: "lg";
+    };
+    image: {
+        type: StringConstructor;
+        default: string;
+    };
+    altText: {
+        type: StringConstructor;
+        default: string;
+    };
+    initials: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderThickness: {
+        type: NumberConstructor;
+        default: number;
+    };
+    shadow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    image: string;
+    contentClass: string;
+    contentStyle: string;
+    textColor: string;
+    disable: boolean;
+    loading: boolean;
+    color: string;
+    rounded: string;
+    size: string;
+    iconSize: string;
+    altText: string;
+    initials: string;
+    borderColor: string;
+    borderThickness: number;
+    shadow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Avatar.vue

@@ -0,0 +1,72 @@
+<script setup>
+defineOptions({
+  inheritAttrs: false
+});
+import { computed } from "vue";
+import { useUiClasses } from "./useUiClasses";
+import { uiProps } from "./uiProps";
+const props = defineProps({
+  image: { type: String, default: "" },
+  altText: { type: String, default: "Avatar" },
+  initials: { type: String, default: "" },
+  borderColor: { type: String, default: "#fff" },
+  borderThickness: { type: Number, default: 2 },
+  shadow: { type: Boolean, default: false },
+  ...uiProps
+});
+const {
+  // props
+  contentClass,
+  contentStyle,
+  textColor,
+  color,
+  size,
+  // computed
+  colorClass,
+  computedContentClass,
+  isColorDark,
+  isHex,
+  isTailwindColor
+} = useUiClasses(props);
+const sizeClass = computed(() => {
+  const map = {
+    sm: "avatar-sm",
+    md: "avatar-md",
+    lg: "avatar-lg"
+  };
+  return map[size.value];
+});
+const shadowClass = computed(
+  () => props.shadow ? "shadow-lg" : ""
+);
+const avatarClass = computed(() => {
+  return [
+    computedContentClass.value,
+    sizeClass.value,
+    shadowClass.value,
+    isTailwindColor(textColor.value) ? `text-${textColor.value}` : `text-${isColorDark(color.value) ? "white" : "gray-700"}`,
+    isTailwindColor(color.value) ? `bg-${color.value}` : ""
+  ].filter((c) => !["", "!"].includes(c));
+});
+const avatarStyle = computed(() => ({
+  backgroundColor: isHex(color.value) && color.value,
+  color: isHex(textColor.value) && textColor.value,
+  borderColor: props.borderColor,
+  borderWidth: `${props.borderThickness}px`,
+  borderStyle: "solid",
+  ...contentStyle.value
+}));
+</script>
+
+<template>
+  <div class="avatar" :class="avatarClass" :style="avatarStyle">
+    <img v-if="image" :src="image" :alt="altText" class="avatar-image" />
+    <span v-else class="avatar-initials">
+      {{ initials || ".." }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.avatar{align-items:center;border-radius:50%;display:flex;justify-content:center;overflow:hidden;position:relative;text-align:center}.avatar-sm{font-size:.875rem;height:40px;width:40px}.avatar-md{font-size:1rem;height:60px;width:60px}.avatar-lg{font-size:1.25rem;height:80px;width:80px}.avatar-image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.avatar-initials{font-weight:700}.shadow-lg{box-shadow:0 4px 15px rgba(0,0,0,.2)}
+</style>

package/dist/runtime/components/Avatar.vue.d.ts

@@ -0,0 +1,141 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: "blue-900";
+    };
+    rounded: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    size: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    iconSize: {
+        readonly type: StringConstructor;
+        readonly default: "lg";
+    };
+    image: {
+        type: StringConstructor;
+        default: string;
+    };
+    altText: {
+        type: StringConstructor;
+        default: string;
+    };
+    initials: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderThickness: {
+        type: NumberConstructor;
+        default: number;
+    };
+    shadow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: "blue-900";
+    };
+    rounded: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    size: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    iconSize: {
+        readonly type: StringConstructor;
+        readonly default: "lg";
+    };
+    image: {
+        type: StringConstructor;
+        default: string;
+    };
+    altText: {
+        type: StringConstructor;
+        default: string;
+    };
+    initials: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderThickness: {
+        type: NumberConstructor;
+        default: number;
+    };
+    shadow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    image: string;
+    contentClass: string;
+    contentStyle: string;
+    textColor: string;
+    disable: boolean;
+    loading: boolean;
+    color: string;
+    rounded: string;
+    size: string;
+    iconSize: string;
+    altText: string;
+    initials: string;
+    borderColor: string;
+    borderThickness: number;
+    shadow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Badge.d.vue.ts

@@ -0,0 +1,133 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: "blue-900";
+    };
+    rounded: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    size: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    iconSize: {
+        readonly type: StringConstructor;
+        readonly default: "lg";
+    };
+    content: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    position: {
+        type: StringConstructor;
+        default: string;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: "blue-900";
+    };
+    rounded: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    size: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    iconSize: {
+        readonly type: StringConstructor;
+        readonly default: "lg";
+    };
+    content: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    position: {
+        type: StringConstructor;
+        default: string;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    contentClass: string;
+    contentStyle: string;
+    textColor: string;
+    disable: boolean;
+    loading: boolean;
+    color: string;
+    rounded: string;
+    size: string;
+    iconSize: string;
+    content: string;
+    icon: string;
+    position: string;
+    show: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};