windly-ui 1.0.2 → 1.0.4

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

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

package/dist/module.mjs

@@ -0,0 +1,33 @@
+import { defineNuxtModule, createResolver, addComponentsDir, extendPages } 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
+    });
+    extendPages((pages) => {
+      pages.push({
+        name: "windly-ui-docs",
+        path: "/_windly-ui",
+        file: resolver.resolve("./docs/index.vue")
+      });
+    });
+    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,96 @@
+<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="{
+  'rotate-90': isOpen
+}" />
+
+            <!-- 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="{
+  'rotate-90': isOpen
+}" />
+        </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/Alert.d.vue.ts

@@ -0,0 +1,83 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    isOpen: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    message: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmBtnText: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelBtnText: {
+        type: StringConstructor;
+        default: string;
+    };
+    showConfirmBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showCloseIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:isOpen": (...args: any[]) => void;
+    confirm: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    isOpen: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    message: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmBtnText: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelBtnText: {
+        type: StringConstructor;
+        default: string;
+    };
+    showConfirmBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showCloseIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:isOpen"?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}>, {
+    title: string;
+    message: string;
+    confirmBtnText: string;
+    cancelBtnText: string;
+    showConfirmBtn: boolean;
+    showCloseIcon: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    title?: ((props: {}) => any) | undefined;
+} & {
+    message?: ((props: {}) => any) | undefined;
+};

package/dist/runtime/components/Alert.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { useAttrs } from "vue";
+const props = defineProps({
+  isOpen: {
+    type: Boolean,
+    required: true
+  },
+  title: {
+    type: String,
+    default: "Modal Title"
+  },
+  message: {
+    type: String,
+    default: ""
+  },
+  confirmBtnText: {
+    type: String,
+    default: "Confirm"
+  },
+  cancelBtnText: {
+    type: String,
+    default: "Cancel"
+  },
+  showConfirmBtn: {
+    type: Boolean,
+    default: false
+  },
+  showCloseIcon: {
+    type: Boolean,
+    default: false
+  }
+});
+const dialogAttributes = useAttrs();
+const emit = defineEmits(["update:isOpen", "confirm"]);
+const close = () => emit("update:isOpen", false);
+const handleConfirm = () => {
+  emit("confirm");
+  close();
+};
+</script>
+
+<template>
+  <UIDialog v-bind="dialogAttributes" :isOpen="isOpen" @update:isOpen="(val) => emit('update:isOpen', val)">
+    <div class="bg-white rounded-lg shadow-lg w-96 p-6">
+      <!-- Header -->
+      <div class="flex justify-between items-center mb-4">
+        <slot name="title">
+          <h3 class="text-lg font-semibold">
+            {{ title }}
+          </h3>
+        </slot>
+
+        <button v-if="showCloseIcon" @click="close" class="text-gray-500 hover:text-gray-700" aria-label="Close modal">
+          <span class="material-icons">close</span>
+        </button>
+      </div>
+
+      <!-- Message -->
+      <slot name="message">
+        <p class="text-gray-600 mb-6">
+          {{ message }}
+        </p>
+      </slot>
+
+      <!-- Actions -->
+      <div class="flex justify-end">
+        <button @click="close" class="mr-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg transition hover:bg-gray-300">
+          {{ cancelBtnText }}
+        </button>
+
+        <button v-if="showConfirmBtn" @click="handleConfirm"
+          class="px-4 py-2 bg-blue-500 text-white rounded-lg transition hover:bg-blue-600">
+          {{ confirmBtnText }}
+        </button>
+      </div>
+    </div>
+  </UIDialog>
+</template>

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

@@ -0,0 +1,83 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    isOpen: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    message: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmBtnText: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelBtnText: {
+        type: StringConstructor;
+        default: string;
+    };
+    showConfirmBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showCloseIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:isOpen": (...args: any[]) => void;
+    confirm: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    isOpen: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    message: {
+        type: StringConstructor;
+        default: string;
+    };
+    confirmBtnText: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelBtnText: {
+        type: StringConstructor;
+        default: string;
+    };
+    showConfirmBtn: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showCloseIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:isOpen"?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}>, {
+    title: string;
+    message: string;
+    confirmBtnText: string;
+    cancelBtnText: string;
+    showConfirmBtn: boolean;
+    showCloseIcon: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    title?: ((props: {}) => any) | undefined;
+} & {
+    message?: ((props: {}) => any) | undefined;
+};

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>