windly-ui 1.0.1 → 1.0.3

package/dist/module.d.mts

@@ -0,0 +1,3 @@
+declare const _default: any;
+
+export { _default as default };

package/dist/module.json

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

package/dist/module.mjs

@@ -0,0 +1,26 @@
+import { defineNuxtModule, createResolver, addComponentsDir } from '@nuxt/kit';
+import tailwindColor from '../dist/runtime/tailwind-color.js';
+
+const module$1 = defineNuxtModule({
+  setup(_, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      prefix: "UI",
+      pathPrefix: false
+    });
+    nuxt.hook("tailwindcss:config", (config) => {
+      config.content ??= {};
+      if (!Array.isArray(config.content.files)) {
+        config.content.files = [];
+      }
+      config.content.files.push(
+        resolver.resolve("./runtime/components/**/*.{vue,js,ts}")
+      );
+      config.safelist ??= [];
+      config.safelist.push(...tailwindColor);
+    });
+  }
+});
+
+export { module$1 as default };

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

@@ -0,0 +1,39 @@
+type TriggerType = 'click' | 'hover';
+type ToggleSide = 'left' | 'right';
+type __VLS_Props = {
+    title?: string;
+    caption?: string;
+    modelValue?: boolean;
+    defaultOpen?: boolean;
+    trigger?: TriggerType;
+    disabled?: boolean;
+    dense?: boolean;
+    toggleSide?: ToggleSide;
+    margin?: boolean;
+};
+declare var __VLS_6: {}, __VLS_19: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_6) => any;
+} & {
+    default?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    defaultOpen: boolean;
+    trigger: TriggerType;
+    disabled: boolean;
+    dense: boolean;
+    toggleSide: ToggleSide;
+    margin: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/{ui-library → dist/runtime}/components/Accordion.vue

@@ -1,87 +1,61 @@
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-
-type TriggerType = 'click' | 'hover'
-type ToggleSide = 'left' | 'right'
-
-const props = withDefaults(
-  defineProps<{
-    title?: string
-    caption?: string
-    modelValue?: boolean
-    defaultOpen?: boolean
-    trigger?: TriggerType
-    disabled?: boolean
-    dense?: boolean
-    toggleSide?: ToggleSide
-    margin?: boolean
-  }>(),
-  {
-    defaultOpen: false,
-    trigger: 'click',
-    disabled: false,
-    dense: false,
-    toggleSide: 'right',
-    margin: true
-  }
-)
-
-const emit = defineEmits < {
-  (e: 'update:modelValue', value: boolean): void
-}> ()
-
-const isControlled = computed(() => props.modelValue !== undefined)
-const isOpen = ref < boolean > (props.defaultOpen ?? false)
-
+<script setup>
+import { ref, computed, watch } from "vue";
+const props = defineProps({
+  title: { type: String, required: false },
+  caption: { type: String, required: false },
+  modelValue: { type: Boolean, required: false },
+  defaultOpen: { type: Boolean, required: false, default: false },
+  trigger: { type: String, required: false, default: "click" },
+  disabled: { type: Boolean, required: false, default: false },
+  dense: { type: Boolean, required: false, default: false },
+  toggleSide: { type: String, required: false, default: "right" },
+  margin: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+const isControlled = computed(() => props.modelValue !== void 0);
+const isOpen = ref(props.defaultOpen ?? false);
 watch(
-    () => props.modelValue,
-    val => {
-        if (isControlled.value && typeof val === 'boolean') {
-            isOpen.value = val
-        }
-    },
-    { immediate: true }
-)
-
-const setOpen = (val: boolean) => {
-    if (props.disabled) return
-    isOpen.value = val
-    emit('update:modelValue', val)
-}
-
-const toggle = () => setOpen(!isOpen.value)
-
-const headerEvents = computed<Record<string, (() => void) | undefined>>(() => {
-  if (props.trigger === 'hover') {
+  () => props.modelValue,
+  (val) => {
+    if (isControlled.value && typeof val === "boolean") {
+      isOpen.value = val;
+    }
+  },
+  { immediate: true }
+);
+const setOpen = (val) => {
+  if (props.disabled) return;
+  isOpen.value = val;
+  emit("update:modelValue", val);
+};
+const toggle = () => setOpen(!isOpen.value);
+const headerEvents = computed(() => {
+  if (props.trigger === "hover") {
     return {
       mouseenter: () => setOpen(true),
       mouseleave: () => setOpen(false),
-      click: undefined
-    }
+      click: void 0
+    };
   }
-
   return {
-    mouseenter: undefined,
-    mouseleave: undefined,
+    mouseenter: void 0,
+    mouseleave: void 0,
     click: toggle
-  }
-})
-
+  };
+});
 </script>
 
 <template>
     <div class="flex flex-col rounded-md border transition-opacity" :class="[
-        dense ? 'text-sm' : '',
-        disabled ? 'opacity-50 pointer-events-none' : ''
-    ]">
+  dense ? 'text-sm' : '',
+  disabled ? 'opacity-50 pointer-events-none' : ''
+]">
 
         <!-- Header -->
         <div v-on="headerEvents" class="flex items-center cursor-pointer select-none gap-3" :class="[
-            margin
-                ? (dense ? 'p-2' : 'p-3')
-                : (dense ? 'py-2' : 'py-3'),
-            isOpen ? 'border-b' : ''
-        ]">
+  margin ? dense ? 'p-2' : 'p-3' : dense ? 'py-2' : 'py-3',
+  isOpen ? 'border-b' : ''
+]">
 
             <!-- Toggle (left) -->
             <UIButton v-if="toggleSide === 'left'" icon="chevron_right" flat dense class="transition-transform"

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

@@ -0,0 +1,39 @@
+type TriggerType = 'click' | 'hover';
+type ToggleSide = 'left' | 'right';
+type __VLS_Props = {
+    title?: string;
+    caption?: string;
+    modelValue?: boolean;
+    defaultOpen?: boolean;
+    trigger?: TriggerType;
+    disabled?: boolean;
+    dense?: boolean;
+    toggleSide?: ToggleSide;
+    margin?: boolean;
+};
+declare var __VLS_6: {}, __VLS_19: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_6) => any;
+} & {
+    default?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    defaultOpen: boolean;
+    trigger: TriggerType;
+    disabled: boolean;
+    dense: boolean;
+    toggleSide: ToggleSide;
+    margin: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,141 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: "blue-900";
+    };
+    rounded: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    size: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    iconSize: {
+        readonly type: StringConstructor;
+        readonly default: "lg";
+    };
+    image: {
+        type: StringConstructor;
+        default: string;
+    };
+    altText: {
+        type: StringConstructor;
+        default: string;
+    };
+    initials: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderThickness: {
+        type: NumberConstructor;
+        default: number;
+    };
+    shadow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: "blue-900";
+    };
+    rounded: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    size: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    iconSize: {
+        readonly type: StringConstructor;
+        readonly default: "lg";
+    };
+    image: {
+        type: StringConstructor;
+        default: string;
+    };
+    altText: {
+        type: StringConstructor;
+        default: string;
+    };
+    initials: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderThickness: {
+        type: NumberConstructor;
+        default: number;
+    };
+    shadow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    image: string;
+    contentClass: string;
+    contentStyle: string;
+    textColor: string;
+    disable: boolean;
+    loading: boolean;
+    color: string;
+    rounded: string;
+    size: string;
+    iconSize: string;
+    altText: string;
+    initials: string;
+    borderColor: string;
+    borderThickness: number;
+    shadow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Avatar.vue

@@ -0,0 +1,72 @@
+<script setup>
+defineOptions({
+  inheritAttrs: false
+});
+import { computed } from "vue";
+import { useUiClasses } from "./useUiClasses";
+import { uiProps } from "./uiProps";
+const props = defineProps({
+  image: { type: String, default: "" },
+  altText: { type: String, default: "Avatar" },
+  initials: { type: String, default: "" },
+  borderColor: { type: String, default: "#fff" },
+  borderThickness: { type: Number, default: 2 },
+  shadow: { type: Boolean, default: false },
+  ...uiProps
+});
+const {
+  // props
+  contentClass,
+  contentStyle,
+  textColor,
+  color,
+  size,
+  // computed
+  colorClass,
+  computedContentClass,
+  isColorDark,
+  isHex,
+  isTailwindColor
+} = useUiClasses(props);
+const sizeClass = computed(() => {
+  const map = {
+    sm: "avatar-sm",
+    md: "avatar-md",
+    lg: "avatar-lg"
+  };
+  return map[size.value];
+});
+const shadowClass = computed(
+  () => props.shadow ? "shadow-lg" : ""
+);
+const avatarClass = computed(() => {
+  return [
+    computedContentClass.value,
+    sizeClass.value,
+    shadowClass.value,
+    isTailwindColor(textColor.value) ? `text-${textColor.value}` : `text-${isColorDark(color.value) ? "white" : "gray-700"}`,
+    isTailwindColor(color.value) ? `bg-${color.value}` : ""
+  ].filter((c) => !["", "!"].includes(c));
+});
+const avatarStyle = computed(() => ({
+  backgroundColor: isHex(color.value) && color.value,
+  color: isHex(textColor.value) && textColor.value,
+  borderColor: props.borderColor,
+  borderWidth: `${props.borderThickness}px`,
+  borderStyle: "solid",
+  ...contentStyle.value
+}));
+</script>
+
+<template>
+  <div class="avatar" :class="avatarClass" :style="avatarStyle">
+    <img v-if="image" :src="image" :alt="altText" class="avatar-image" />
+    <span v-else class="avatar-initials">
+      {{ initials || ".." }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.avatar{align-items:center;border-radius:50%;display:flex;justify-content:center;overflow:hidden;position:relative;text-align:center}.avatar-sm{font-size:.875rem;height:40px;width:40px}.avatar-md{font-size:1rem;height:60px;width:60px}.avatar-lg{font-size:1.25rem;height:80px;width:80px}.avatar-image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.avatar-initials{font-weight:700}.shadow-lg{box-shadow:0 4px 15px rgba(0,0,0,.2)}
+</style>

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

@@ -0,0 +1,141 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: "blue-900";
+    };
+    rounded: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    size: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    iconSize: {
+        readonly type: StringConstructor;
+        readonly default: "lg";
+    };
+    image: {
+        type: StringConstructor;
+        default: string;
+    };
+    altText: {
+        type: StringConstructor;
+        default: string;
+    };
+    initials: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderThickness: {
+        type: NumberConstructor;
+        default: number;
+    };
+    shadow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: "blue-900";
+    };
+    rounded: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    size: {
+        readonly type: StringConstructor;
+        readonly default: "md";
+    };
+    iconSize: {
+        readonly type: StringConstructor;
+        readonly default: "lg";
+    };
+    image: {
+        type: StringConstructor;
+        default: string;
+    };
+    altText: {
+        type: StringConstructor;
+        default: string;
+    };
+    initials: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderThickness: {
+        type: NumberConstructor;
+        default: number;
+    };
+    shadow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    image: string;
+    contentClass: string;
+    contentStyle: string;
+    textColor: string;
+    disable: boolean;
+    loading: boolean;
+    color: string;
+    rounded: string;
+    size: string;
+    iconSize: string;
+    altText: string;
+    initials: string;
+    borderColor: string;
+    borderThickness: number;
+    shadow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;