windly-ui 1.0.9 → 1.1.0

package/dist/module.json

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

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

@@ -33,6 +33,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
+    confirmColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelColor: {
+        type: StringConstructor;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:isOpen": (...args: any[]) => void;
     confirm: (...args: any[]) => void;
@@ -65,6 +73,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
+    confirmColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelColor: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & Readonly<{
     "onUpdate:isOpen"?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
@@ -75,6 +91,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     cancelBtnText: string;
     showConfirmBtn: boolean;
     showCloseIcon: boolean;
+    confirmColor: string;
+    cancelColor: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
     header?: ((props: {}) => any) | undefined;

package/dist/runtime/components/Alert.vue

@@ -31,9 +31,28 @@ const props = defineProps({
   showCloseIcon: {
     type: Boolean,
     default: false
+  },
+  confirmColor: {
+    type: String,
+    default: "indigo-400"
+  },
+  cancelColor: {
+    type: String,
+    default: "gray-200"
   }
 });
 const attrs = useAttrs();
+const isHex = (val) => val.startsWith("#");
+const cancelBtnClass = computed(() => [
+  "mr-2 px-4 py-2 rounded-lg transition",
+  isHex(props.cancelColor) ? "text-gray-700 hover:opacity-90" : `bg-${props.cancelColor} text-gray-700 hover:bg-gray-300`
+]);
+const cancelBtnStyle = computed(() => isHex(props.cancelColor) ? { backgroundColor: props.cancelColor } : {});
+const confirmBtnClass = computed(() => [
+  "px-4 py-2 rounded-lg transition text-white",
+  isHex(props.confirmColor) ? "hover:opacity-90" : `bg-${props.confirmColor} hover:opacity-90`
+]);
+const confirmBtnStyle = computed(() => isHex(props.confirmColor) ? { backgroundColor: props.confirmColor } : {});
 const wrapperClass = computed(() => attrs.class || "");
 const wrapperStyle = computed(() => attrs.style || {});
 const dialogAttributes = computed(() => {
@@ -80,12 +99,11 @@ const handleConfirm = () => {
         <!-- 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">
+            <button @click="close" :class="cancelBtnClass" :style="cancelBtnStyle">
               {{ 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">
+            <button v-if="showConfirmBtn" @click="handleConfirm" :class="confirmBtnClass" :style="confirmBtnStyle">
               {{ confirmBtnText }}
             </button>
           </div>

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

@@ -33,6 +33,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
+    confirmColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelColor: {
+        type: StringConstructor;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:isOpen": (...args: any[]) => void;
     confirm: (...args: any[]) => void;
@@ -65,6 +73,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: BooleanConstructor;
         default: boolean;
     };
+    confirmColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    cancelColor: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & Readonly<{
     "onUpdate:isOpen"?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
@@ -75,6 +91,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     cancelBtnText: string;
     showConfirmBtn: boolean;
     showCloseIcon: boolean;
+    confirmColor: string;
+    cancelColor: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
     header?: ((props: {}) => any) | undefined;

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

@@ -11,7 +11,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -21,7 +21,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -72,7 +72,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -82,7 +82,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -121,6 +121,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: boolean;
     };
 }>> & Readonly<{}>, {
+    disabled: boolean;
     image: string;
     color: string;
     size: string;
@@ -128,7 +129,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     contentClass: string;
     contentStyle: string;
     textColor: string;
-    disable: boolean;
     loading: boolean;
     rounded: string;
     iconSize: string;

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

@@ -11,7 +11,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -21,7 +21,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -72,7 +72,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -82,7 +82,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -121,6 +121,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: boolean;
     };
 }>> & Readonly<{}>, {
+    disabled: boolean;
     image: string;
     color: string;
     size: string;
@@ -128,7 +129,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     contentClass: string;
     contentStyle: string;
     textColor: string;
-    disable: boolean;
     loading: boolean;
     rounded: string;
     iconSize: string;

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

@@ -15,7 +15,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -25,7 +25,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -68,7 +68,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -78,7 +78,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -109,6 +109,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
 }>> & Readonly<{}>, {
+    disabled: boolean;
     color: string;
     content: string;
     size: string;
@@ -118,7 +119,6 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     contentClass: string;
     contentStyle: string;
     textColor: string;
-    disable: boolean;
     loading: boolean;
     rounded: string;
     iconSize: string;

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

@@ -15,7 +15,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -25,7 +25,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -68,7 +68,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -78,7 +78,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -109,6 +109,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
 }>> & Readonly<{}>, {
+    disabled: boolean;
     color: string;
     content: string;
     size: string;
@@ -118,7 +119,6 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     contentClass: string;
     contentStyle: string;
     textColor: string;
-    disable: boolean;
     loading: boolean;
     rounded: string;
     iconSize: string;

package/dist/runtime/components/Breadcrumbs.vue

@@ -21,11 +21,11 @@ const props = defineProps({
   },
   activeColor: {
     type: String,
-    default: "primary"
+    default: "indigo-400"
   },
   separatorColor: {
     type: String,
-    default: "grey-6"
+    default: "gray-400"
   }
 });
 const route = useRoute();

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

@@ -11,7 +11,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -21,7 +21,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -102,7 +102,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -112,7 +112,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -181,6 +181,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
 }>, {
+    disabled: boolean;
     dense: boolean;
     label: string;
     class: string;
@@ -192,7 +193,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     contentClass: string;
     contentStyle: string;
     textColor: string;
-    disable: boolean;
     loading: boolean;
     rounded: string;
     iconSize: string;

package/dist/runtime/components/Button.vue

@@ -26,7 +26,7 @@ const {
   contentClass,
   contentStyle,
   textColor,
-  disable,
+  disabled,
   loading,
   color,
   rounded,
@@ -66,9 +66,9 @@ const computedClass = computed(() => {
   cls += props.dense ? ` ${paddingClass.dense[size.value]}` : ` ${paddingClass.default[size.value]}`;
   cls += props.unelevated ? " no-shadow" : " shadow-md";
   cls += props.stacked ? " flex flex-col items-center justify-center gap-2" : " flex items-center justify-center gap-2";
-  cls += disable.value ? " opacity-50 cursor-not-allowed" : " cursor-pointer";
+  cls += disabled.value ? " opacity-50 cursor-not-allowed" : " cursor-pointer";
   cls += loading.value ? " opacity-75 cursor-progress" : "";
-  cls += props.gradient ? ` bg-gradient-to-br from-${color.value} to-${computedColor2.value} hover:bg-gradient-to-tl text-${computedTextColor.value}` : !props.flat && !props.outline ? ` bg-${color.value} hover:bg-${computedColor2.value} text-${computedTextColor.value}` : "";
+  cls += props.gradient ? ` bg-gradient-to-br from-${color.value} to-${computedColor2.value} bg-[length:200%_100%] bg-left hover:bg-right text-${computedTextColor.value}` : !props.flat && !props.outline ? ` bg-${color.value} hover:bg-${computedColor2.value} text-${computedTextColor.value}` : "";
   return cls;
 });
 const computedIconClass = computed(() => {
@@ -76,7 +76,7 @@ const computedIconClass = computed(() => {
 });
 const computedProps = computed(() => ({
   class: computedClass.value,
-  disabled: disable.value || loading.value
+  disabled: disabled.value || loading.value
 }));
 const computedTextColor = computed(() => {
   if (textColor.value) {
@@ -99,7 +99,7 @@ const computedColor2 = computed(() => {
   return color.value;
 });
 function onClick() {
-  if (!loading.value && !disable.value && !props.to) {
+  if (!loading.value && !disabled.value && !props.to) {
     emit("click");
   }
 }

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

@@ -11,7 +11,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -21,7 +21,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -102,7 +102,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -112,7 +112,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -181,6 +181,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
 }>, {
+    disabled: boolean;
     dense: boolean;
     label: string;
     class: string;
@@ -192,7 +193,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     contentClass: string;
     contentStyle: string;
     textColor: string;
-    disable: boolean;
     loading: boolean;
     rounded: string;
     iconSize: string;

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

@@ -35,6 +35,18 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: StringConstructor;
         default: string;
     };
+    maxHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    stickyHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stickyFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     flat: {
         type: BooleanConstructor;
@@ -64,14 +76,29 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: StringConstructor;
         default: string;
     };
+    maxHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    stickyHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stickyFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     dense: boolean;
     color: string;
     square: boolean;
     flat: boolean;
+    maxHeight: string;
     width: string;
     borderColor: string;
     bordered: boolean;
+    stickyHeader: boolean;
+    stickyFooter: 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

@@ -10,7 +10,10 @@ const props = defineProps({
   bordered: { type: Boolean, default: true },
   color: { type: String, default: "white" },
   borderColor: { type: String, default: "gray-200" },
-  width: { type: String, default: "100%" }
+  width: { type: String, default: "100%" },
+  maxHeight: { type: String, default: "" },
+  stickyHeader: { type: Boolean, default: false },
+  stickyFooter: { type: Boolean, default: false }
 });
 const isHex = (val) => val.startsWith("#");
 const cardStyle = computed(() => {
@@ -18,6 +21,9 @@ const cardStyle = computed(() => {
     width: props.width,
     maxWidth: "80vw"
   };
+  if (props.maxHeight) {
+    style.maxHeight = props.maxHeight;
+  }
   if (isHex(props.color)) {
     style.backgroundColor = props.color;
   }
@@ -32,7 +38,8 @@ const cardClass = computed(() => [
   props.square ? "rounded-none" : "rounded-md",
   props.bordered ? "border" : "",
   !isHex(props.borderColor) && props.bordered ? `border-${props.borderColor}` : "",
-  !isHex(props.color) ? `bg-${props.color}` : ""
+  !isHex(props.color) ? `bg-${props.color}` : "",
+  props.maxHeight || props.stickyHeader || props.stickyFooter ? "flex flex-col overflow-hidden" : ""
 ]);
 const sectionPadding = computed(
   () => props.dense ? "p-0" : "p-4"
@@ -45,24 +52,21 @@ const sectionPadding = computed(
     :style="cardStyle"
     v-bind="$attrs"
   >
-    <!-- Header -->
     <div
       v-if="$slots.header"
-      :class="sectionPadding"
+      :class="[sectionPadding, 'shrink-0']"
       class="border-b border-gray-200"
     >
       <slot name="header" />
     </div>
 
-    <!-- Content -->
-    <div :class="sectionPadding">
+    <div :class="[sectionPadding, 'flex-1 min-h-0 overflow-y-auto']">
       <slot />
     </div>
 
-    <!-- Footer -->
     <div
       v-if="$slots.footer"
-      :class="sectionPadding"
+      :class="[sectionPadding, 'shrink-0']"
       class="border-t border-gray-200"
     >
       <slot name="footer" />

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

@@ -35,6 +35,18 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: StringConstructor;
         default: string;
     };
+    maxHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    stickyHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stickyFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     flat: {
         type: BooleanConstructor;
@@ -64,14 +76,29 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: StringConstructor;
         default: string;
     };
+    maxHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    stickyHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stickyFooter: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     dense: boolean;
     color: string;
     square: boolean;
     flat: boolean;
+    maxHeight: string;
     width: string;
     borderColor: string;
     bordered: boolean;
+    stickyHeader: boolean;
+    stickyFooter: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;