windly-ui 1.0.6 → 1.0.8

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "windly-ui",
-  "version": "1.0.6",
+  "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>