windly-ui 1.0.2 → 1.0.3

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/dist/runtime/components/Breadcrumbs.vue

@@ -0,0 +1,116 @@
+<script setup>
+import { computed } from "vue";
+import { RouterLink, useRoute } from "vue-router";
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+  separator: {
+    type: String,
+    default: "/"
+  },
+  gutter: {
+    type: String,
+    default: "0.5rem"
+  },
+  align: {
+    type: String,
+    default: "start"
+    // start | center | end
+  },
+  activeColor: {
+    type: String,
+    default: "primary"
+  },
+  separatorColor: {
+    type: String,
+    default: "grey-6"
+  }
+});
+const route = useRoute();
+const alignmentClass = computed(() => {
+  switch (props.align) {
+    case "center":
+      return "justify-center";
+    case "end":
+      return "justify-end";
+    default:
+      return "justify-start";
+  }
+});
+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) {
+  if (item.href) {
+    return {
+      href: item.href,
+      target: item.target
+    };
+  }
+  if (item.to) {
+    return {
+      to: item.to,
+      exact: item.exact,
+      replace: item.replace,
+      activeClass: item.activeClass,
+      exactActiveClass: item.exactActiveClass
+    };
+  }
+  return {};
+}
+function isActive(item) {
+  if (!item.to) return false;
+  return route.path === item.to;
+}
+</script>
+
+<template>
+  <nav
+    class="flex items-center"
+    :class="alignmentClass"
+    aria-label="Breadcrumbs"
+  >
+    <template v-for="(item, index) in items" :key="index">
+      <!-- Item -->
+      <component
+        :is="resolveTag(item)"
+        v-bind="resolveProps(item)"
+        class="flex items-center gap-1"
+        :class="[
+  item.disable && 'opacity-50 pointer-events-none',
+  isActive(item) && `text-${activeColor}`
+]"
+      >
+        <span v-if="item.icon && item.icon !== 'none'" class="material-icons">
+          {{ item.icon }}
+        </span>
+
+        <span>{{ item.label }}</span>
+
+        <small
+          v-if="item.caption"
+          class="block text-xs opacity-70"
+        >
+          {{ item.caption }}
+        </small>
+      </component>
+
+      <!-- Separator -->
+      <span
+        v-if="index < items.length - 1"
+        class="select-none"
+        :style="{ marginInline: gutter }"
+        :class="`text-${separatorColor}`"
+      >
+        <slot name="separator">
+          {{ separator }}
+        </slot>
+      </span>
+    </template>
+  </nav>
+</template>

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;
+    };
+};

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

@@ -0,0 +1,199 @@
+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";
+    };
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    to: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: null;
+    };
+    outline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    unelevated: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stacked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    gradient: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color2: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    iconColor: {
+        type: StringConstructor;
+        default: null;
+    };
+    iconPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, 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";
+    };
+    label: {
+        type: StringConstructor;
+        default: null;
+    };
+    to: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: null;
+    };
+    outline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    unelevated: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    stacked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    gradient: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color2: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        default: null;
+    };
+    iconColor: {
+        type: StringConstructor;
+        default: null;
+    };
+    iconPosition: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    dense: boolean;
+    label: string;
+    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;
+    color2: string;
+    iconColor: string;
+    iconPosition: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;