windly-ui 1.0.7 → 1.0.8

package/dist/module.json

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

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

@@ -77,7 +77,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     showCloseIcon: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
+    header?: ((props: {}) => any) | undefined;
+} & {
     title?: ((props: {}) => any) | undefined;
 } & {
     message?: ((props: {}) => any) | undefined;
+} & {
+    actions?: ((props: {
+        confirm: () => void;
+        cancel: () => void;
+    }) => any) | undefined;
 };

package/dist/runtime/components/Alert.vue

@@ -1,5 +1,8 @@
 <script setup>
-import { useAttrs } from "vue";
+import { useAttrs, computed } from "vue";
+defineOptions({
+  inheritAttrs: false
+});
 const props = defineProps({
   isOpen: {
     type: Boolean,
@@ -30,7 +33,16 @@ const props = defineProps({
     default: false
   }
 });
-const dialogAttributes = useAttrs();
+const attrs = useAttrs();
+const wrapperClass = computed(() => attrs.class || "");
+const wrapperStyle = computed(() => attrs.style || {});
+const dialogAttributes = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs;
+  return rest;
+});
+const hasWrapperStyling = computed(
+  () => Boolean(wrapperClass.value) || Object.keys(wrapperStyle.value || {}).length > 0
+);
 const emit = defineEmits(["update:isOpen", "confirm"]);
 const close = () => emit("update:isOpen", false);
 const handleConfirm = () => {
@@ -41,37 +53,43 @@ const handleConfirm = () => {
 
 <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>
+    <div >
+      <div class="bg-white shadow-lg w-96 p-4" :class="hasWrapperStyling ? [wrapperClass, 'pt-1'] : ''" :style="wrapperStyle">
+        <!-- Header -->
+        <slot name="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>
+            <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>
+        </slot>
 
-      <!-- Message -->
-      <slot name="message">
-        <p class="text-gray-600 mb-6">
-          {{ message }}
-        </p>
-      </slot>
+        <!-- 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>
+        <!-- Actions -->
+        <slot name="actions" :confirm="handleConfirm" :cancel="close">
+          <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>
+            <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>
+        </slot>
       </div>
     </div>
   </UIDialog>

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

@@ -77,7 +77,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     showCloseIcon: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
+    header?: ((props: {}) => any) | undefined;
+} & {
     title?: ((props: {}) => any) | undefined;
 } & {
     message?: ((props: {}) => any) | undefined;
+} & {
+    actions?: ((props: {
+        confirm: () => void;
+        cancel: () => void;
+    }) => any) | undefined;
 };

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

@@ -122,18 +122,18 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
 }>> & Readonly<{}>, {
     image: string;
+    color: string;
+    size: string;
+    borderColor: 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>;

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

@@ -122,18 +122,18 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
 }>> & Readonly<{}>, {
     image: string;
+    color: string;
+    size: string;
+    borderColor: 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>;

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

@@ -109,19 +109,19 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
 }>> & Readonly<{}>, {
+    color: string;
+    content: string;
+    size: string;
+    show: boolean;
+    position: string;
+    icon: string;
     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;

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

@@ -109,19 +109,19 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
 }>> & Readonly<{}>, {
+    color: string;
+    content: string;
+    size: string;
+    show: boolean;
+    position: string;
+    icon: string;
     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;

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

@@ -184,19 +184,19 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     dense: boolean;
     label: string;
     class: string;
+    color: string;
+    size: string;
+    flat: boolean;
+    icon: string;
+    outline: boolean;
     contentClass: string;
     contentStyle: string;
     textColor: string;
     disable: boolean;
     loading: boolean;
-    color: string;
     rounded: string;
-    size: string;
     iconSize: string;
-    icon: string;
     to: string | Record<string, any>;
-    outline: boolean;
-    flat: boolean;
     unelevated: boolean;
     stacked: boolean;
     gradient: boolean;

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

@@ -184,19 +184,19 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     dense: boolean;
     label: string;
     class: string;
+    color: string;
+    size: string;
+    flat: boolean;
+    icon: string;
+    outline: boolean;
     contentClass: string;
     contentStyle: string;
     textColor: string;
     disable: boolean;
     loading: boolean;
-    color: string;
     rounded: string;
-    size: string;
     iconSize: string;
-    icon: string;
     to: string | Record<string, any>;
-    outline: boolean;
-    flat: boolean;
     unelevated: boolean;
     stacked: boolean;
     gradient: boolean;

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

@@ -67,11 +67,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{}>, {
     dense: boolean;
     color: string;
-    borderColor: string;
-    flat: boolean;
     square: boolean;
-    bordered: boolean;
+    flat: boolean;
     width: string;
+    borderColor: string;
+    bordered: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -67,11 +67,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{}>, {
     dense: boolean;
     color: string;
-    borderColor: string;
-    flat: boolean;
     square: boolean;
-    bordered: boolean;
+    flat: boolean;
     width: string;
+    borderColor: string;
+    bordered: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -168,14 +168,14 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     dense: boolean;
     label: string;
     name: string;
+    color: string;
+    size: string;
     contentClass: string;
     contentStyle: string;
     textColor: string;
     disable: boolean;
     loading: boolean;
-    color: string;
     rounded: string;
-    size: string;
     iconSize: string;
     trueValue: boolean;
     falseValue: boolean;

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

@@ -168,14 +168,14 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     dense: boolean;
     label: string;
     name: string;
+    color: string;
+    size: string;
     contentClass: string;
     contentStyle: string;
     textColor: string;
     disable: boolean;
     loading: boolean;
-    color: string;
     rounded: string;
-    size: string;
     iconSize: string;
     trueValue: boolean;
     falseValue: boolean;

package/dist/runtime/components/Chip.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<{}>, {
+    color: string;
+    content: string;
+    size: string;
+    show: boolean;
+    position: string;
+    icon: string;
+    contentClass: string;
+    contentStyle: string;
+    textColor: string;
+    disable: boolean;
+    loading: boolean;
+    rounded: string;
+    iconSize: string;
+}, {}, {}, {}, 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;
+    };
+};

package/dist/runtime/components/Chip.vue

@@ -0,0 +1,99 @@
+<script setup>
+defineOptions({
+  inheritAttrs: false
+});
+import { useSlots, computed } from "vue";
+import { useUiClasses } from "./useUiClasses";
+import { uiProps } from "./uiProps";
+const slots = useSlots();
+const props = defineProps({
+  content: { type: String, default: "" },
+  icon: { type: String, default: "" },
+  position: { type: String, default: "superscript" },
+  show: { type: Boolean, default: true },
+  ...uiProps
+});
+const {
+  // props
+  contentClass,
+  contentStyle,
+  color,
+  size,
+  rounded,
+  // computed
+  colorClass,
+  computedContentClass,
+  isColorDark,
+  isHex,
+  isTailwindColor
+} = useUiClasses(props);
+const hasSlots = computed(() => {
+  return !!slots.default?.();
+});
+const sizeClass = computed(() => {
+  const map = {
+    xs: "w-auto min-w-2 h-2.5 text-[7px]",
+    sm: "w-auto min-w-3 h-3 text-[10px]",
+    md: "w-auto min-w-4 h-4 text-xs",
+    lg: "w-auto min-w-6 h-6 text-sm"
+  };
+  return map[size.value];
+});
+const roundedClass = computed(() => {
+  const map = {
+    xs: "rounded-xs",
+    sm: "rounded-sm",
+    md: "rounded",
+    lg: "rounded-lg",
+    full: "rounded-full"
+  };
+  return map[rounded.value];
+});
+const positionClasses = computed(
+  () => props.position === "superscript" && hasSlots.value ? "absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2" : ""
+);
+const chipClass = computed(() => {
+  return [
+    "inline-flex items-center justify-center font-bold",
+    computedContentClass.value,
+    sizeClass.value,
+    roundedClass.value,
+    positionClasses.value,
+    isColorDark(color.value) ? "text-white" : "text-gray-700",
+    isTailwindColor(color.value) ? `bg-${color.value}` : ""
+  ].filter((c) => !["", "!"].includes(c));
+});
+const chipStyle = computed(() => {
+  const style = contentStyle.value;
+  return {
+    backgroundColor: isHex(color.value) ? color.value : void 0,
+    ...typeof style === "object" && style ? style : {}
+  };
+});
+</script>
+
+<template>
+  <div class="flex">
+    <div v-if="hasSlots" class="relative">
+      <slot />
+      <span v-if="show" :class="[
+  chipClass
+]" :style="[chipStyle]">
+        <span v-if="icon" class="p-1 material-icons">{{ icon }}</span>
+        <span v-if="content" class="p-1">{{ content }}</span>
+      </span>
+    </div>
+    <div v-else>
+      <span v-if="show" :class="[
+  chipClass
+]" :style="[chipStyle]">
+        <span v-if="icon" class="p-1 material-icons">{{ icon }}</span>
+        <span v-if="content" class="p-1">{{ content }}</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.material-icons{font-size:1em}
+</style>

package/dist/runtime/components/Chip.vue.d.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<{}>, {
+    color: string;
+    content: string;
+    size: string;
+    show: boolean;
+    position: string;
+    icon: string;
+    contentClass: string;
+    contentStyle: string;
+    textColor: string;
+    disable: boolean;
+    loading: boolean;
+    rounded: string;
+    iconSize: string;
+}, {}, {}, {}, 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;
+    };
+};

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

@@ -79,13 +79,13 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     modelValue: string;
     disabled: boolean;
-    flat: boolean;
     square: boolean;
+    flat: boolean;
+    borderRadius: string | number;
     bordered: boolean;
     defaultValue: string;
     showOpacity: boolean;
     readonly: boolean;
-    borderRadius: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -79,13 +79,13 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     modelValue: string;
     disabled: boolean;
-    flat: boolean;
     square: boolean;
+    flat: boolean;
+    borderRadius: string | number;
     bordered: boolean;
     defaultValue: string;
     showOpacity: boolean;
     readonly: boolean;
-    borderRadius: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -118,15 +118,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     onChange?: ((...args: any[]) => any) | undefined;
 }>, {
     modelValue: string | unknown[];
+    color: string;
+    flat: boolean;
+    backgroundColor: string;
+    borderRadius: string;
     contentClass: string;
     contentStyle: string;
     textColor: string;
     disable: boolean;
-    color: string;
-    flat: boolean;
     bordered: boolean;
-    backgroundColor: string;
-    borderRadius: string;
     multiDate: boolean;
     rangeDate: boolean;
     disabledDates: string[];

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

@@ -118,15 +118,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     onChange?: ((...args: any[]) => any) | undefined;
 }>, {
     modelValue: string | unknown[];
+    color: string;
+    flat: boolean;
+    backgroundColor: string;
+    borderRadius: string;
     contentClass: string;
     contentStyle: string;
     textColor: string;
     disable: boolean;
-    color: string;
-    flat: boolean;
     bordered: boolean;
-    backgroundColor: string;
-    borderRadius: string;
     multiDate: boolean;
     rangeDate: boolean;
     disabledDates: string[];

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

@@ -54,8 +54,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "onUpdate:isOpen"?: ((...args: any[]) => any) | undefined;
 }>, {
     position: string;
-    width: string;
     height: string;
+    width: string;
     persistent: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {

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

@@ -54,8 +54,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     "onUpdate:isOpen"?: ((...args: any[]) => any) | undefined;
 }>, {
     position: string;
-    width: string;
     height: string;
+    width: string;
     persistent: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {

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

@@ -43,8 +43,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>> & Readonly<{}>, {
     type: string;
     color: string;
-    vertical: boolean;
     inset: boolean;
+    vertical: boolean;
     thickness: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -43,8 +43,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>> & Readonly<{}>, {
     type: string;
     color: string;
-    vertical: boolean;
     inset: boolean;
+    vertical: boolean;
     thickness: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -15,10 +15,10 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onClose?: (() => any) | undefined;
 }>, {
+    padding: string;
+    direction: DrawerDirection;
     width: string;
     background: string;
-    direction: DrawerDirection;
-    padding: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -15,10 +15,10 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onClose?: (() => any) | undefined;
 }>, {
+    padding: string;
+    direction: DrawerDirection;
     width: string;
     background: string;
-    direction: DrawerDirection;
-    padding: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -16,12 +16,12 @@ type __VLS_Slots = {} & {
     menu?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    rounded: Rounded;
+    flat: boolean;
+    width: string;
     borderColor: string;
+    rounded: Rounded;
     align: DropdownAlign;
-    flat: boolean;
     bordered: boolean;
-    width: string;
     menuBgClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -16,12 +16,12 @@ type __VLS_Slots = {} & {
     menu?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    rounded: Rounded;
+    flat: boolean;
+    width: string;
     borderColor: string;
+    rounded: Rounded;
     align: DropdownAlign;
-    flat: boolean;
     bordered: boolean;
-    width: string;
     menuBgClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -41,15 +41,15 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     dense: boolean;
     label: string;
     color: string;
-    rounded: Rounded;
     size: Size;
-    separator: Separator;
     flat: boolean;
+    separator: Separator;
+    multiple: boolean;
     width: string;
+    rounded: Rounded;
     readonly: boolean;
     hint: string;
     fileType: string;
-    multiple: boolean;
     outlined: boolean;
     borderless: boolean;
     fileRemoverIcon: string;

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

@@ -41,15 +41,15 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     dense: boolean;
     label: string;
     color: string;
-    rounded: Rounded;
     size: Size;
-    separator: Separator;
     flat: boolean;
+    separator: Separator;
+    multiple: boolean;
     width: string;
+    rounded: Rounded;
     readonly: boolean;
     hint: string;
     fileType: string;
-    multiple: boolean;
     outlined: boolean;
     borderless: boolean;
     fileRemoverIcon: string;

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

@@ -65,11 +65,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: string;
     };
 }>> & Readonly<{}>, {
+    height: string;
+    width: string;
     borderColor: string;
     alt: string;
     placeholder: string;
-    width: string;
-    height: string;
     fit: string;
     borderType: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -65,11 +65,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: string;
     };
 }>> & Readonly<{}>, {
+    height: string;
+    width: string;
     borderColor: string;
     alt: string;
     placeholder: string;
-    width: string;
-    height: string;
     fit: string;
     borderType: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -44,11 +44,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     type: SupportedInputType;
     required: boolean;
     color: string;
-    rounded: string;
     size: string;
     flat: boolean;
-    placeholder: string;
     width: string;
+    rounded: string;
+    placeholder: string;
     readonly: boolean;
     hint: string;
     outlined: boolean;

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

@@ -44,11 +44,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     type: SupportedInputType;
     required: boolean;
     color: string;
-    rounded: string;
     size: string;
     flat: boolean;
-    placeholder: string;
     width: string;
+    rounded: string;
+    placeholder: string;
     readonly: boolean;
     hint: string;
     outlined: boolean;

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

@@ -25,13 +25,13 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }>, {
     modelValue: string | number | boolean;
     name: string;
-    disable: boolean;
     color: string;
-    rounded: Rounded;
     size: RadioSize;
-    borderColor: string;
-    icon: string;
     flat: boolean;
+    icon: string;
+    borderColor: string;
+    disable: boolean;
+    rounded: Rounded;
     id: string;
     bordered: boolean;
     hint: string;

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

@@ -25,13 +25,13 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }>, {
     modelValue: string | number | boolean;
     name: string;
-    disable: boolean;
     color: string;
-    rounded: Rounded;
     size: RadioSize;
-    borderColor: string;
-    icon: string;
     flat: boolean;
+    icon: string;
+    borderColor: string;
+    disable: boolean;
+    rounded: Rounded;
     id: string;
     bordered: boolean;
     hint: string;

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

@@ -63,10 +63,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{}>, {
     horizontal: boolean;
     vertical: boolean;
-    width: string;
-    maxWidth: string;
     height: string;
     maxHeight: string;
+    maxWidth: string;
+    width: string;
     hideScrollbar: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -63,10 +63,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{}>, {
     horizontal: boolean;
     vertical: boolean;
-    width: string;
-    maxWidth: string;
     height: string;
     maxHeight: string;
+    maxWidth: string;
+    width: string;
     hideScrollbar: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -36,12 +36,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     filter: boolean;
     required: boolean;
     color: string;
-    rounded: Rounded;
     size: Size;
     flat: boolean;
+    width: string;
+    rounded: Rounded;
     id: string;
     placeholder: string;
-    width: string;
     readonly: boolean;
     hint: string;
     outlined: boolean;

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

@@ -36,12 +36,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     filter: boolean;
     required: boolean;
     color: string;
-    rounded: Rounded;
     size: Size;
     flat: boolean;
+    width: string;
+    rounded: Rounded;
     id: string;
     placeholder: string;
-    width: string;
     readonly: boolean;
     hint: string;
     outlined: boolean;

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

@@ -28,8 +28,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     modelValue: number;
-    activeColor: string;
     vertical: boolean;
+    activeColor: string;
     completedColor: string;
     inactiveColor: string;
     connectorCompletedColor: string;

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

@@ -28,8 +28,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     modelValue: number;
-    activeColor: string;
     vertical: boolean;
+    activeColor: string;
     completedColor: string;
     inactiveColor: string;
     connectorCompletedColor: string;

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

@@ -24,11 +24,11 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     hover: boolean;
     dense: boolean;
-    rounded: Rounded;
-    borderColor: string;
+    flat: boolean;
     separator: Separator;
+    borderColor: string;
+    rounded: Rounded;
     align: Align;
-    flat: boolean;
     bordered: boolean;
     striped: boolean;
     bgColor: string;

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

@@ -24,11 +24,11 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     hover: boolean;
     dense: boolean;
-    rounded: Rounded;
-    borderColor: string;
+    flat: boolean;
     separator: Separator;
+    borderColor: string;
+    rounded: Rounded;
     align: Align;
-    flat: boolean;
     bordered: boolean;
     striped: boolean;
     bgColor: string;

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

@@ -183,14 +183,14 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     modelValue: string;
     label: string;
+    color: string;
+    size: string;
     contentClass: string;
     contentStyle: string;
     textColor: string;
     disable: boolean;
     loading: boolean;
-    color: string;
     rounded: string;
-    size: string;
     iconSize: string;
     placeholder: string;
     readonly: boolean;

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

@@ -183,14 +183,14 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     modelValue: string;
     label: string;
+    color: string;
+    size: string;
     contentClass: string;
     contentStyle: string;
     textColor: string;
     disable: boolean;
     loading: boolean;
-    color: string;
     rounded: string;
-    size: string;
     iconSize: string;
     placeholder: string;
     readonly: boolean;

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

@@ -21,8 +21,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }>, {
     modelValue: boolean | string | number;
     label: string;
-    disable: boolean;
     size: ToggleSize;
+    disable: boolean;
     labelPosition: LabelPosition;
     customClasses: string;
     trueColor: string;

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

@@ -21,8 +21,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }>, {
     modelValue: boolean | string | number;
     label: string;
-    disable: boolean;
     size: ToggleSize;
+    disable: boolean;
     labelPosition: LabelPosition;
     customClasses: string;
     trueColor: string;

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

@@ -48,8 +48,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>> & Readonly<{}>, {
-    textColor: string;
     color: string;
+    textColor: string;
     placement: TooltipPlacement;
     arrow: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -48,8 +48,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>> & Readonly<{}>, {
-    textColor: string;
     color: string;
+    textColor: string;
     placement: TooltipPlacement;
     arrow: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/docs/index.vue

@@ -1403,7 +1403,7 @@
           <DocComponent title="Basic Alert Dialog"
             caption="Displays a simple dialog to present information or messages to the user.">
             <UIButton label="Open Alert" @click="dialogToggle1 = true" />
-            <UIAlert v-model:isOpen="dialogToggle1" title="Welcome" message="This is a basic alert example." />
+            <UIAlert v-model:isOpen="dialogToggle1" class="border-t-4 rounded-lg" title="Welcome" message="This is a basic alert example." />
           </DocComponent>
           <DocComponent title="Alert with Custom Content"
             caption="Use slots to fully customize the alert title, content and confirmation button.">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "windly-ui",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "type": "module",
   "main": "./dist/module.mjs",
   "exports": {