windly-ui 1.0.1 → 1.0.3

package/dist/runtime/components/Badge.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<{}>, {
+    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;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Badge.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 badgeClass = 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 badgeStyle = 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="[
+  badgeClass
+]" :style="[badgeStyle]">
+        <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="[
+  badgeClass
+]" :style="[badgeStyle]">
+        <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/Badge.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<{}>, {
+    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;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,83 @@
+type BreadcrumbItem = {
+    label: string;
+    icon?: string;
+    caption?: string;
+    to?: string | object;
+    href?: string;
+    target?: string;
+    tag?: string;
+    exact?: boolean;
+    replace?: boolean;
+    activeClass?: string;
+    exactActiveClass?: string;
+    disable?: boolean;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    separator?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    items: {
+        type: () => BreadcrumbItem[];
+        required: true;
+    };
+    separator: {
+        type: StringConstructor;
+        default: string;
+    };
+    gutter: {
+        type: StringConstructor;
+        default: string;
+    };
+    align: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    separatorColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: () => BreadcrumbItem[];
+        required: true;
+    };
+    separator: {
+        type: StringConstructor;
+        default: string;
+    };
+    gutter: {
+        type: StringConstructor;
+        default: string;
+    };
+    align: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    separatorColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    separator: string;
+    gutter: string;
+    align: string;
+    activeColor: string;
+    separatorColor: 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/{ui-library → dist/runtime}/components/Breadcrumbs.vue

@@ -1,93 +1,71 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { RouterLink, useRoute } from 'vue-router'
-
-type BreadcrumbItem = {
-  label: string
-  icon?: string
-  caption?: string
-  to?: string | object
-  href?: string
-  target?: string
-  tag?: string
-  exact?: boolean
-  replace?: boolean
-  activeClass?: string
-  exactActiveClass?: string
-  disable?: boolean
-}
-
+<script setup>
+import { computed } from "vue";
+import { RouterLink, useRoute } from "vue-router";
 const props = defineProps({
   items: {
-    type: Array as () => BreadcrumbItem[],
-    required: true,
+    type: Array,
+    required: true
   },
   separator: {
     type: String,
-    default: '/',
+    default: "/"
   },
   gutter: {
     type: String,
-    default: '0.5rem',
+    default: "0.5rem"
   },
   align: {
     type: String,
-    default: 'start', // start | center | end
+    default: "start"
+    // start | center | end
   },
   activeColor: {
     type: String,
-    default: 'primary',
+    default: "primary"
   },
   separatorColor: {
     type: String,
-    default: 'grey-6',
-  },
-})
-
-const route = useRoute()
-
+    default: "grey-6"
+  }
+});
+const route = useRoute();
 const alignmentClass = computed(() => {
   switch (props.align) {
-    case 'center':
-      return 'justify-center'
-    case 'end':
-      return 'justify-end'
+    case "center":
+      return "justify-center";
+    case "end":
+      return "justify-end";
     default:
-      return 'justify-start'
+      return "justify-start";
   }
-})
-
-function resolveTag(item: BreadcrumbItem) {
-  if (item.disable) return item.tag || 'span'
-  if (item.href) return 'a'
-  if (item.to) return RouterLink
-  return item.tag || 'span'
+});
+function resolveTag(item) {
+  if (item.disable) return item.tag || "span";
+  if (item.href) return "a";
+  if (item.to) return RouterLink;
+  return item.tag || "span";
 }
-
-function resolveProps(item: BreadcrumbItem) {
+function resolveProps(item) {
   if (item.href) {
     return {
       href: item.href,
-      target: item.target,
-    }
+      target: item.target
+    };
   }
-
   if (item.to) {
     return {
       to: item.to,
       exact: item.exact,
       replace: item.replace,
       activeClass: item.activeClass,
-      exactActiveClass: item.exactActiveClass,
-    }
+      exactActiveClass: item.exactActiveClass
+    };
   }
-
-  return {}
+  return {};
 }
-
-function isActive(item: BreadcrumbItem) {
-  if (!item.to) return false
-  return route.path === item.to
+function isActive(item) {
+  if (!item.to) return false;
+  return route.path === item.to;
 }
 </script>
 
@@ -104,9 +82,9 @@ function isActive(item: BreadcrumbItem) {
         v-bind="resolveProps(item)"
         class="flex items-center gap-1"
         :class="[
-          item.disable && 'opacity-50 pointer-events-none',
-          isActive(item) && `text-${activeColor}`,
-        ]"
+  item.disable && 'opacity-50 pointer-events-none',
+  isActive(item) && `text-${activeColor}`
+]"
       >
         <span v-if="item.icon && item.icon !== 'none'" class="material-icons">
           {{ item.icon }}

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

@@ -0,0 +1,83 @@
+type BreadcrumbItem = {
+    label: string;
+    icon?: string;
+    caption?: string;
+    to?: string | object;
+    href?: string;
+    target?: string;
+    tag?: string;
+    exact?: boolean;
+    replace?: boolean;
+    activeClass?: string;
+    exactActiveClass?: string;
+    disable?: boolean;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    separator?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    items: {
+        type: () => BreadcrumbItem[];
+        required: true;
+    };
+    separator: {
+        type: StringConstructor;
+        default: string;
+    };
+    gutter: {
+        type: StringConstructor;
+        default: string;
+    };
+    align: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    separatorColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: () => BreadcrumbItem[];
+        required: true;
+    };
+    separator: {
+        type: StringConstructor;
+        default: string;
+    };
+    gutter: {
+        type: StringConstructor;
+        default: string;
+    };
+    align: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    separatorColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    separator: string;
+    gutter: string;
+    align: string;
+    activeColor: string;
+    separatorColor: 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;
+    };
+};