@indielayer/ui 1.8.4 → 1.9.1

package/docs/pages/component/select/usage.vue

@@ -2,15 +2,25 @@
 import { ref } from 'vue'
 
 const selected = ref<undefined | string>()
+const selected2 = ref<undefined | string>()
 const selectedMultiple = ref<string[]>(['A', 'B'])
 const options = ref([
   { value: 'A', label: 'Option A', disabled: true },
   { value: 'B', label: 'Option B' },
 ])
 
-for (let i = 0; i < 20; i++) {
-  options.value.push({ value: i.toString(), label: 'Option ' + i })
+// function to generate
+function genOptions(x: number) {
+  const options = []
+
+  for (let i = 0; i < x; i++) {
+    options.push({ value: i.toString(), label: 'Option ' + i })
+  }
+
+  return options
 }
+
+const options2 = ref(genOptions(1000))
 </script>
 
 <template>
@@ -25,11 +35,13 @@ for (let i = 0; i < 20; i++) {
       native
     />
     <x-select
-      v-model="selected"
-      label="Dropdown select"
+      v-model="selected2"
+      label="Filterable - virtual list"
       placeholder="Placeholder"
       filterable
-      :options="options"
+      virtual-list
+      :virtual-list-item-height="33"
+      :options="options2"
     />
     <x-select
       v-model="selectedMultiple"

package/docs/pages/component/table/index.vue

@@ -2,6 +2,8 @@
 import { XTable, XTableBody, XTableCell, XTableHead, XTableHeader, XTableRow } from '@indielayer/ui'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
+import VirtualDemoCode from './virtual.vue?raw'
+import VirtualDemo from './virtual.vue'
 import StatesDemoCode from './states.vue?raw'
 import StatesDemo from './states.vue'
 
@@ -13,6 +15,11 @@ const demos = [{
   description: '',
   code: UsageDemoCode,
   component: UsageDemo,
+}, {
+  name: 'Virtual List',
+  description: '',
+  code: VirtualDemoCode,
+  component: VirtualDemo,
 }, {
   name: 'States',
   description: '',

package/docs/pages/component/table/usage.vue

@@ -60,6 +60,8 @@ const itemsSorted = computed<Book[]>(() => {
     return 0
   })
 })
+
+const selectedIndex = ref<number>(0)
 </script>
 
 <template>
@@ -87,11 +89,13 @@ const itemsSorted = computed<Book[]>(() => {
     <x-card>
       <x-table
         v-model:sort="sort"
+        v-model:selected="selectedIndex"
         dense
+        pointer
         striped
         :headers="headers"
         :items="itemsSorted"
-        @click-row="notifications?.log('open')"
+        @click-row="(event, index) => { notifications?.log(event); selectedIndex = index }"
       >
         <template #item-published="{ item }">
           {{ formatDate(item.published) }}

package/docs/pages/component/table/virtual.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { type TableHeader } from '@indielayer/ui'
+import { computed, ref } from 'vue'
+
+const headers: TableHeader[] = [
+  { text: '#', value: 'id', sortable: true, align: 'center' },
+  { text: 'Title', value: 'title' },
+  { text: 'Description', value: 'description' },
+  { text: 'Published', value: 'published' },
+  { text: 'Status', value: 'status' },
+]
+
+const sort = ref([])
+const itemsSorted = computed<any[]>(() => {
+  const ite = items.value.slice(0)
+
+  return ite.sort((a: any, b: any) => {
+    for (const s of sort.value) {
+      const [key, asc] = (s as string).split(',')
+
+      if (a[key] > b[key]) return asc === '-1' ? -1 : 1
+      if (a[key] < b[key]) return asc === '-1' ? 1 : -1
+    }
+
+    return 0
+  })
+})
+
+function generateItems(x: number) {
+  return Array.from({ length: x }, (_, i) => ({
+    id: i + 1,
+    title: `Book ${i + 1}`,
+    description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe, velit.',
+    published: Date.now() - x * i,
+    status: 'Tag label',
+  }))
+}
+
+const items = ref(generateItems(1000))
+</script>
+
+<template>
+  <x-card>
+    <x-table
+      v-model:sort="sort"
+      class="!h-80"
+      :headers="headers"
+      :items="itemsSorted"
+      virtual-list
+      :virtual-list-item-height="54"
+    />
+  </x-card>
+</template>

package/docs/pages/typography.vue

@@ -70,18 +70,20 @@ const textClasses = {
 
   <div class="mt-10">
     <table class="text-left w-full">
-      <tr>
-        <th class="py-2">Class</th>
-        <th>Size</th>
-        <th>Line Height</th>
-        <th>Preview</th>
-      </tr>
-      <tr v-for="(c, key) in textClasses" :key="key" class="border-t">
-        <td class="py-2">{{ key }}</td>
-        <td class="text-secondary-500 font-light">{{ c.size }}</td>
-        <td class="text-secondary-500 font-light">{{ c.line }}</td>
-        <td :class="key" class="max-w-lg truncate">Preview text</td>
-      </tr>
+      <tbody>
+        <tr>
+          <th class="py-2">Class</th>
+          <th>Size</th>
+          <th>Line Height</th>
+          <th>Preview</th>
+        </tr>
+        <tr v-for="(c, key) in textClasses" :key="key" class="border-t">
+          <td class="py-2">{{ key }}</td>
+          <td class="text-secondary-500 font-light">{{ c.size }}</td>
+          <td class="text-secondary-500 font-light">{{ c.line }}</td>
+          <td :class="key" class="max-w-lg truncate">Preview text</td>
+        </tr>
+      </tbody>
     </table>
   </div>
 

package/lib/components/accordion/Accordion.vue.d.ts

@@ -21,7 +21,7 @@ export type AccordionInjection = AccordionProps & {
 type InternalClasses = 'wrapper';
 export interface AccordionTheme extends ThemeComponent<AccordionProps, InternalClasses> {
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
@@ -34,7 +34,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     icon: StringConstructor;
     iconAlign: PropType<"left" | "right">;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
@@ -47,12 +47,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     icon: StringConstructor;
     iconAlign: PropType<"left" | "right">;
-}>>, {
+}>> & Readonly<{}>, {
     disabled: boolean;
     tag: string;
     expanded: boolean;
     showIcon: boolean;
-}, {}>, {
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/lib/components/accordion/AccordionItem.vue.d.ts

@@ -27,7 +27,7 @@ type InternalData = {
 };
 export interface AccordionItemTheme extends ThemeComponent<AccordionItemProps, InternalClasses, InternalData> {
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
@@ -43,11 +43,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<"left" | "right">;
         default: string;
     };
-}, {
+}>, {
     toggle: () => void;
     open: (anim?: boolean) => void;
     close: (anim?: boolean) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "expand")[], "change" | "expand", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "expand")[], "change" | "expand", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
@@ -63,16 +63,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<"left" | "right">;
         default: string;
     };
-}>> & {
+}>> & Readonly<{
     onChange?: ((...args: any[]) => any) | undefined;
     onExpand?: ((...args: any[]) => any) | undefined;
-}, {
+}>, {
     disabled: boolean;
     tag: string;
     expanded: boolean;
     showIcon: boolean;
     iconAlign: "left" | "right";
-}, {}>, {
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     default?(_: {
         expand: (anim?: boolean) => void;
         collapsed: boolean;

package/lib/components/accordion/AccordionItem.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as j, inject as z, computed as D, reactive as H, ref as h, watch as g, openBlock as s, createBlock as y, resolveDynamicComponent as F, normalizeStyle as K, unref as a, normalizeClass as l, withCtx as A, createElementVNode as r, renderSlot as u, createElementBlock as x, createCommentVNode as _, createVNode as M, Transition as X, withDirectives as q, vShow as G } from "vue";
+import { defineComponent as j, inject as z, computed as D, reactive as H, ref as h, watch as g, openBlock as s, createBlock as y, resolveDynamicComponent as F, normalizeStyle as K, unref as a, normalizeClass as l, withCtx as A, createElementVNode as r, renderSlot as u, createElementBlock as x, createCommentVNode as k, createVNode as M, Transition as X, withDirectives as q, vShow as G } from "vue";
 import { useTheme as J } from "../../composables/useTheme.js";
 import O from "../icon/Icon.vue.js";
 import { injectAccordionKey as Q } from "../../composables/keys.js";
@@ -9,9 +9,7 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
   fill: "none",
   role: "presentation",
   class: "stroke-2 w-4 h-4"
-}, W = /* @__PURE__ */ r("path", { d: "M19 9l-7 7-7-7" }, null, -1), Y = [
-  W
-], Z = ["left", "right"], ee = {
+}, W = ["left", "right"], Y = {
   tag: {
     type: String,
     default: "div"
@@ -27,69 +25,69 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
     type: String,
     default: "right"
   }
-}, oe = {
+}, Z = {
   name: "XAccordionItem",
   validators: {
-    iconAlign: Z
+    iconAlign: W
   }
-}, se = /* @__PURE__ */ j({
-  ...oe,
-  props: ee,
+}, ie = /* @__PURE__ */ j({
+  ...Z,
+  props: Y,
   emits: ["expand", "change"],
-  setup(k, { expose: w, emit: I }) {
-    const i = k, p = I, f = z(Q, {
+  setup(w, { expose: I, emit: B }) {
+    const i = w, p = B, f = z(Q, {
       isInsideAccordion: !1
-    }), B = D(() => f.iconAlign || i.iconAlign), b = H({
-      iconAlign: B
-    }), o = h(!i.expanded), t = h(!0);
+    }), b = D(() => f.iconAlign || i.iconAlign), C = H({
+      iconAlign: b
+    }), n = h(!i.expanded), o = h(!0);
     g(() => i.expanded, () => {
-      o.value = !i.expanded;
-    }), g(o, (e, n) => {
+      n.value = !i.expanded;
+    }), g(n, (e, t) => {
       p("change", !e);
     });
-    function C(e) {
-      t.value && (e.style.height = "0px");
+    function E(e) {
+      o.value && (e.style.height = "0px");
     }
-    function E(e, n) {
-      t.value ? (e.addEventListener("transitionend", n), setTimeout(() => {
+    function $(e, t) {
+      o.value ? (e.addEventListener("transitionend", t), setTimeout(() => {
         e.style.height = `${e.scrollHeight}px`;
-      }, 1)) : n();
-    }
-    function $(e) {
-      t.value ? e.style.removeProperty("height") : t.value = !0;
+      }, 1)) : t();
     }
     function S(e) {
-      t.value && (e.style.height = `${e.scrollHeight}px`);
+      o.value ? e.style.removeProperty("height") : o.value = !0;
+    }
+    function L(e) {
+      o.value && (e.style.height = `${e.scrollHeight}px`);
     }
-    function L(e, n) {
-      t.value ? (e.addEventListener("transitionend", n), setTimeout(() => {
+    function P(e, t) {
+      o.value ? (e.addEventListener("transitionend", t), setTimeout(() => {
         e.style.height = "0px";
-      }, 1)) : n();
+      }, 1)) : t();
     }
-    function P(e) {
-      t.value ? e.style.removeProperty("height") : t.value = !0;
+    function _(e) {
+      o.value ? e.style.removeProperty("height") : o.value = !0;
     }
     function m(e = !0) {
-      t.value = e, o.value = !1;
+      o.value = e, n.value = !1;
     }
     function N(e = !0) {
-      t.value = e, o.value = !0;
+      o.value = e, n.value = !0;
     }
     function v() {
-      i.disabled || (o.value = !o.value);
+      i.disabled || (n.value = !n.value);
     }
     function c(e = !0) {
       m(e), p("expand");
     }
     const { styles: T, classes: d, className: V } = J("AccordionItem", {}, {
       ...i,
-      ...b
-    }, { collapsed: o, isInsideAccordion: f.isInsideAccordion });
-    return w({ toggle: v, open: m, close: N }), (e, n) => (s(), y(F(e.tag), {
+      ...C
+    }, { collapsed: n, isInsideAccordion: f.isInsideAccordion });
+    return I({ toggle: v, open: m, close: N }), (e, t) => (s(), y(F(e.tag), {
       style: K(a(T)),
       class: l(a(V)),
       "aria-disabled": e.disabled,
-      "aria-expanded": o.value ? "false" : "true"
+      "aria-expanded": n.value ? "false" : "true"
     }, {
       default: A(() => [
         r("button", {
@@ -100,7 +98,7 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
           r("div", R, [
             u(e.$slots, "default", {
               expand: c,
-              collapsed: o.value
+              collapsed: n.value
             })
           ]),
           e.showIcon ? (s(), x("div", {
@@ -110,21 +108,23 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
             e.icon ? (s(), y(O, {
               key: 0,
               icon: e.icon
-            }, null, 8, ["icon"])) : (s(), x("svg", U, Y))
-          ], 2)) : _("", !0)
+            }, null, 8, ["icon"])) : (s(), x("svg", U, t[0] || (t[0] = [
+              r("path", { d: "M19 9l-7 7-7-7" }, null, -1)
+            ])))
+          ], 2)) : k("", !0)
         ], 2),
         e.$slots.summary ? u(e.$slots, "summary", {
           key: 0,
           expand: c,
-          collapsed: o.value
-        }) : _("", !0),
+          collapsed: n.value
+        }) : k("", !0),
         M(X, {
-          onBeforeEnter: C,
-          onEnter: E,
-          onAfterEnter: $,
-          onBeforeLeave: S,
-          onLeave: L,
-          onAfterLeave: P
+          onBeforeEnter: E,
+          onEnter: $,
+          onAfterEnter: S,
+          onBeforeLeave: L,
+          onLeave: P,
+          onAfterLeave: _
         }, {
           default: A(() => [
             q(r("div", {
@@ -132,10 +132,10 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
             }, [
               u(e.$slots, "content", {
                 expand: c,
-                collapsed: o.value
+                collapsed: n.value
               })
             ], 2), [
-              [G, !o.value]
+              [G, !n.value]
             ])
           ]),
           _: 3
@@ -146,5 +146,5 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
   }
 });
 export {
-  se as default
+  ie as default
 };

package/lib/components/alert/Alert.vue.d.ts

@@ -2,7 +2,7 @@ import { type ExtractPublicPropTypes, type PropType } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
 declare const alertType: readonly ["info", "success", "error", "warning"];
 declare const alertProps: {
-    type: PropType<"info" | "success" | "error" | "warning">;
+    type: PropType<"error" | "info" | "success" | "warning">;
     glow: BooleanConstructor;
     light: BooleanConstructor;
     outlined: BooleanConstructor;
@@ -18,8 +18,8 @@ export type AlertProps = ExtractPublicPropTypes<typeof alertProps>;
 type InternalClasses = 'wrapper';
 export interface AlertTheme extends ThemeComponent<AlertProps, InternalClasses> {
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    type: PropType<"info" | "success" | "error" | "warning">;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    type: PropType<"error" | "info" | "success" | "warning">;
     glow: BooleanConstructor;
     light: BooleanConstructor;
     outlined: BooleanConstructor;
@@ -29,8 +29,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "remove"[], "remove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    type: PropType<"info" | "success" | "error" | "warning">;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "remove"[], "remove", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    type: PropType<"error" | "info" | "success" | "warning">;
     glow: BooleanConstructor;
     light: BooleanConstructor;
     outlined: BooleanConstructor;
@@ -40,15 +40,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
-}>> & {
+}>> & Readonly<{
     onRemove?: ((...args: any[]) => any) | undefined;
-}, {
+}>, {
     glow: boolean;
     light: boolean;
     outlined: boolean;
     removable: boolean;
     color: string;
-}, {}>, {
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     icon?(_: {}): any;
     default?(_: {}): any;
     removeIcon?(_: {}): any;

package/lib/components/alert/Alert.vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent as v, computed as g, openBlock as l, createElementBlock as a, normalizeStyle as k, unref as r, normalizeClass as b, renderSlot as t, createBlock as w, createCommentVNode as i, createElementVNode as n, Fragment as B, createVNode as $ } from "vue";
+import { defineComponent as v, computed as g, openBlock as t, createElementBlock as a, normalizeStyle as k, unref as l, normalizeClass as b, renderSlot as n, createBlock as w, createCommentVNode as i, createElementVNode as s, Fragment as B, createVNode as $ } from "vue";
 import { useColors as I } from "../../composables/useColors.js";
 import { useTheme as C } from "../../composables/useTheme.js";
-import { infoIcon as h, successIcon as N, errorIcon as S, warningIcon as V, closeIcon as z } from "../../common/icons.js";
+import { infoIcon as N, successIcon as S, errorIcon as V, warningIcon as z, closeIcon as A } from "../../common/icons.js";
 import c from "../icon/Icon.vue.js";
-const A = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), E = ["aria-label"], L = ["info", "success", "error", "warning"], T = {
+const E = ["aria-label"], L = ["info", "success", "error", "warning"], T = {
   ...I.props(),
   type: String,
   glow: Boolean,
@@ -11,46 +11,46 @@ const A = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), E = ["aria
   outlined: Boolean,
   removable: Boolean,
   closeLabel: String
-}, _ = {
+}, h = {
   name: "XAlert",
   validators: {
     type: L
   }
 }, D = /* @__PURE__ */ v({
-  ..._,
+  ...h,
   props: T,
   emits: ["remove"],
   setup(m) {
-    const o = m, p = g(() => o.type === "info" ? h : o.type === "success" ? N : o.type === "error" ? S : o.type === "warning" ? V : ""), { styles: u, classes: f, className: d } = C("Alert", {}, o);
-    return (e, s) => (l(), a("div", {
-      style: k(r(u)),
+    const o = m, p = g(() => o.type === "info" ? N : o.type === "success" ? S : o.type === "error" ? V : o.type === "warning" ? z : ""), { styles: u, classes: f, className: d } = C("Alert", {}, o);
+    return (e, r) => (t(), a("div", {
+      style: k(l(u)),
       class: b([
-        r(d),
+        l(d),
         e.$style.alert,
         e.glow ? e.$style["alert--glow"] : "",
-        r(f).wrapper
+        l(f).wrapper
       ])
     }, [
-      t(e.$slots, "icon", {}, () => [
-        e.type ? (l(), w(c, {
+      n(e.$slots, "icon", {}, () => [
+        e.type ? (t(), w(c, {
           key: 0,
           icon: p.value,
           class: "text-[color:var(--x-alert-icon)] dark:text-[color:var(--x-alert-dark-icon)]"
         }, null, 8, ["icon"])) : i("", !0)
       ]),
-      n("div", null, [
-        t(e.$slots, "default")
+      s("div", null, [
+        n(e.$slots, "default")
       ]),
-      e.removable ? (l(), a(B, { key: 0 }, [
-        A,
-        n("button", {
+      e.removable ? (t(), a(B, { key: 0 }, [
+        r[1] || (r[1] = s("div", { class: "flex-grow" }, null, -1)),
+        s("button", {
           type: "button",
           class: "shrink-0",
           "aria-label": e.closeLabel,
-          onClick: s[0] || (s[0] = (y) => e.$emit("remove", y))
+          onClick: r[0] || (r[0] = (y) => e.$emit("remove", y))
         }, [
-          t(e.$slots, "removeIcon", {}, () => [
-            $(c, { icon: r(z) }, null, 8, ["icon"])
+          n(e.$slots, "removeIcon", {}, () => [
+            $(c, { icon: l(A) }, null, 8, ["icon"])
           ])
         ], 8, E)
       ], 64)) : i("", !0)

package/lib/components/avatar/Avatar.vue.d.ts

@@ -27,7 +27,7 @@ type InternalExtraData = {
 };
 export interface AvatarTheme extends ThemeComponent<AvatarProps, InternalClasses, InternalExtraData> {
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
@@ -46,7 +46,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
@@ -65,13 +65,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
-}>>, {
+}>> & Readonly<{}>, {
     tag: string;
     outlined: boolean;
     color: string;
     rounded: boolean;
     size: import("../../composables/useCommon").Size;
-}, {}>, {
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     avatarIcon?(_: {}): any;
 }>;
 export default _default;

package/lib/components/badge/Badge.vue.d.ts

@@ -40,7 +40,7 @@ export type BadgeProps = ExtractPublicPropTypes<typeof badgeProps>;
 type InternalClasses = 'wrapper';
 export interface BadgeTheme extends ThemeComponent<BadgeProps, InternalClasses> {
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
@@ -71,7 +71,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
@@ -102,7 +102,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
-}>>, {
+}>> & Readonly<{}>, {
     tag: string;
     outlined: boolean;
     color: string;
@@ -111,7 +111,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     align: "left" | "right";
     animated: boolean;
     show: boolean;
-}, {}>, {
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
     content?(_: {}): any;
 }>;