windly-ui 1.0.3 → 1.0.5

package/dist/module.json

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

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addComponentsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addComponentsDir, extendPages } from '@nuxt/kit';
 import tailwindColor from '../dist/runtime/tailwind-color.js';
 
 const module$1 = defineNuxtModule({
@@ -9,6 +9,13 @@ const module$1 = defineNuxtModule({
       prefix: "UI",
       pathPrefix: false
     });
+    extendPages((pages) => {
+      pages.push({
+        name: "windly-ui-docs",
+        path: "/_windly-ui",
+        file: resolver.resolve("./runtime/docs/index.vue")
+      });
+    });
     nuxt.hook("tailwindcss:config", (config) => {
       config.content ??= {};
       if (!Array.isArray(config.content.files)) {

package/dist/runtime/components/Accordion.vue

@@ -59,7 +59,9 @@ const headerEvents = computed(() => {
 
             <!-- Toggle (left) -->
             <UIButton v-if="toggleSide === 'left'" icon="chevron_right" flat dense class="transition-transform"
-                :class="isOpen ? 'rotate-90' : ''" />
+                :class="{
+  'rotate-90': isOpen
+}" />
 
             <!-- Header content -->
             <div class="flex-1">
@@ -75,7 +77,9 @@ const headerEvents = computed(() => {
 
             <!-- Toggle (right) -->
             <UIButton v-if="toggleSide === 'right'" icon="chevron_right" flat dense class="transition-transform"
-                :class="isOpen ? 'rotate-90' : ''" />
+                :class="{
+  'rotate-90': isOpen
+}" />
         </div>
 
         <!-- Content -->

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/Button.d.vue.ts

@@ -83,6 +83,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: StringConstructor;
         default: string;
     };
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -170,11 +174,16 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: StringConstructor;
         default: string;
     };
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
 }>, {
     dense: boolean;
     label: string;
+    class: string;
     contentClass: string;
     contentStyle: string;
     textColor: string;

package/dist/runtime/components/Button.vue

@@ -18,6 +18,7 @@ const props = defineProps({
   icon: { type: String, default: null },
   iconColor: { type: String, default: null },
   iconPosition: { type: String, default: "start" },
+  class: { type: String, default: "" },
   ...uiProps
 });
 const {
@@ -57,7 +58,7 @@ const paddingClass = {
   }
 };
 const computedClass = computed(() => {
-  let cls = `transition-all duration-300 text-nowrap ${roundedClass[rounded.value]} ${sizeClass[size.value]}`;
+  let cls = `${props.class} transition-all duration-300 text-nowrap ${roundedClass[rounded.value]} ${sizeClass[size.value]}`;
   if (props.outline)
     cls += ` border bg-white border-${colorClass.value} text-${colorClass.value} hover:bg-${colorClass.value} hover:text-white`;
   if (props.flat)

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

@@ -83,6 +83,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: StringConstructor;
         default: string;
     };
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -170,11 +174,16 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: StringConstructor;
         default: string;
     };
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
 }>, {
     dense: boolean;
     label: string;
+    class: string;
     contentClass: string;
     contentStyle: string;
     textColor: string;

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

@@ -9,30 +9,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         required: true;
     };
-    title: {
+    width: {
         type: StringConstructor;
         default: string;
     };
-    message: {
+    height: {
         type: StringConstructor;
         default: string;
     };
-    confirmBtnText: {
-        type: StringConstructor;
-        default: string;
-    };
-    cancelBtnText: {
-        type: StringConstructor;
-        default: string;
-    };
-    showConfirmBtn: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    showCloseIcon: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     persistent: {
         type: BooleanConstructor;
         default: boolean;
@@ -40,40 +24,23 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     position: {
         type: StringConstructor;
         default: string;
-        validator: (val: unknown) => any;
+        validator: (value: unknown) => any;
     };
 }>, {}, {}, {}, {}, 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: {
+    width: {
         type: StringConstructor;
         default: string;
     };
-    message: {
+    height: {
         type: StringConstructor;
         default: string;
     };
-    confirmBtnText: {
-        type: StringConstructor;
-        default: string;
-    };
-    cancelBtnText: {
-        type: StringConstructor;
-        default: string;
-    };
-    showConfirmBtn: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    showCloseIcon: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     persistent: {
         type: BooleanConstructor;
         default: boolean;
@@ -81,23 +48,16 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     position: {
         type: StringConstructor;
         default: string;
-        validator: (val: unknown) => any;
+        validator: (value: unknown) => any;
     };
 }>> & Readonly<{
     "onUpdate:isOpen"?: ((...args: any[]) => any) | undefined;
-    onConfirm?: ((...args: any[]) => any) | undefined;
 }>, {
-    title: string;
     position: string;
-    message: string;
-    confirmBtnText: string;
-    cancelBtnText: string;
-    showConfirmBtn: boolean;
-    showCloseIcon: boolean;
+    width: string;
+    height: string;
     persistent: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
-    title?: ((props: {}) => any) | undefined;
-} & {
-    message?: ((props: {}) => any) | undefined;
+    default?: ((props: {}) => any) | undefined;
 };

package/dist/runtime/components/Dialog.vue

@@ -1,61 +1,3 @@
-<template>
-  <transition name="fade">
-    <div
-      v-if="isOpen"
-      class="fixed inset-0 z-50 flex bg-black bg-opacity-60"
-      role="dialog"
-      aria-modal="true"
-      @click.self="handleOutsideClick"
-      :class="positionClasses"
-    >
-      <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>
-    </div>
-  </transition>
-</template>
-
 <script setup>
 import { computed, watch, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
@@ -64,29 +6,13 @@ const props = defineProps({
     type: Boolean,
     required: true
   },
-  title: {
-    type: String,
-    default: "Modal Title"
-  },
-  message: {
-    type: String,
-    default: ""
-  },
-  confirmBtnText: {
+  width: {
     type: String,
-    default: "Confirm"
+    default: "400px"
   },
-  cancelBtnText: {
+  height: {
     type: String,
-    default: "Cancel"
-  },
-  showConfirmBtn: {
-    type: Boolean,
-    default: false
-  },
-  showCloseIcon: {
-    type: Boolean,
-    default: false
+    default: "auto"
   },
   persistent: {
     type: Boolean,
@@ -95,16 +21,12 @@ const props = defineProps({
   position: {
     type: String,
     default: "center",
-    validator: (val) => ["center", "top", "bottom", "left", "right"].includes(val)
+    validator: (value) => ["top", "bottom", "left", "right", "center"].includes(value)
   }
 });
-const emit = defineEmits(["update:isOpen", "confirm"]);
+const emit = defineEmits(["update:isOpen"]);
 const router = useRouter();
 const close = () => emit("update:isOpen", false);
-const handleConfirm = () => {
-  emit("confirm");
-  close();
-};
 const handleOutsideClick = () => {
   if (!props.persistent) close();
 };
@@ -147,6 +69,17 @@ onBeforeUnmount(() => {
 });
 </script>
 
+<template>
+  <transition name="fade">
+    <div v-if="isOpen" class="fixed inset-0 z-50 flex bg-black bg-opacity-60" role="dialog" aria-modal="true"
+      @click.self="handleOutsideClick" :class="positionClasses">
+      <div :style="{ width: width, height: height }">
+        <slot />
+      </div>
+    </div>
+  </transition>
+</template>
+
 <style scoped>
-.fade-enter-active{animation:fadeInScale .3s ease forwards}.fade-leave-active{transition:opacity .3s ease,transform .3s ease}@keyframes fadeInScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.fade-leave-to{opacity:0;transform:scale(.9)}
+.fade-enter-active{animation:fadeInScale .3s ease forwards}.fade-leave-active{transition:opacity .3s ease,transform .3s ease}@keyframes fadeInScale{0%{opacity:0}to{opacity:1}}.fade-leave-to{opacity:0}
 </style>