@indielayer/ui 0.0.0-dev-20240205230210 → 0.0.0-dev-20240212133527

package/README.md

@@ -16,7 +16,7 @@ Read the <a href="https://indielayer.com/ui/docs">Online Documentation</a>.
 
 ## Quickstart
 ```bash
-npm init @indielayer/ui
+npm init @indielayer/ui@latest
 ```
 
 ---

package/docs/components/common/DocumentPage.vue

@@ -104,36 +104,6 @@ const componentsProperties = computed(() => {
 
 const anchors = ref([])
 const currentAnchor = ref(null)
-const anchorObserver = ref(null)
-
-onMounted(() => {
-  // setAnchorObserver()
-  // setAnchors()
-})
-
-onUnmounted(() => {
-  // anchorObserver.value.disconnect()
-})
-
-// function setAnchors() {
-//   document.querySelectorAll('h2').forEach((element) => {
-//     anchors.value.push({
-//       id: element.id,
-//       name: element?.textContent?.trim().replace('#', '') || '',
-//     })
-//     anchorObserver.value.observe(element)
-//   })
-// }
-// function setAnchorObserver() {
-//   anchorObserver = new IntersectionObserver((entries) => {
-//     entries.forEach((entry) => {
-//       if (entry.isIntersecting) currentAnchor.value = entry.target.id
-//     })
-//   }, {
-//     root: null,
-//     threshold: 1,
-//   })
-// }
 </script>
 
 <template>

package/docs/components/menu/DocsMenu.vue

@@ -15,6 +15,7 @@ const components = [
     items: [
       { to: '/component/button', label: 'Button' },
       { to: '/component/checkbox', label: 'Checkbox' },
+      { to: '/component/datepicker', label: 'Datepicker' },
       { to: '/component/form', label: 'Form' },
       { to: '/component/formGroup', label: 'Form Group' },
       { to: '/component/input', label: 'Input' },
@@ -51,6 +52,7 @@ const components = [
       { to: '/component/pagination', label: 'Pagination' },
       { to: '/component/popover', label: 'Popover' },
       { to: '/component/progress', label: 'Progress' },
+      { to: '/component/qrCode', label: 'QR Code' },
       { to: '/component/skeleton', label: 'Skeleton' },
       { to: '/component/spinner', label: 'Spinner' },
       { to: '/component/stepper', label: 'Stepper' },

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { XDatepicker } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'Datepicker'
+const description = 'The datepicker component is used to select a date or time.'
+const components = [XDatepicker]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/datepicker"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+  >
+    <x-alert type="info" color="warning" outlined>
+      This component is just a wrapper for the @vuepic/vue-datepicker package to fit the look and feel. For more documentation please see <x-link
+        href="https://vue3datepicker.com/"
+        external
+        target="blank"
+        shadow
+        rel="noopener noreferrer"
+      >@vuepic/vue-datepicker</x-link> documentation.
+    </x-alert>
+  </document-page>
+</template>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const date = ref()
+const startDate = new Date()
+const endDate = new Date(new Date().setDate(startDate.getDate() + 7))
+
+date.value = [startDate, endDate]
+</script>
+
+<template>
+  <x-datepicker
+    v-model="date"
+    label="Select a date"
+    helper="Pick a date"
+    tooltip="Use it to pick a date"
+    range
+    multi-calendars
+    disable-year-select
+    :enable-time-picker="false"
+  />
+</template>

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

@@ -24,6 +24,7 @@ const rules = {
     return !!v  || 'Field is required'
   },
 }
+const range = ref([])
 
 function onSubmit(isValid: string) {
   if (isValid) notifications?.success('Valid! Sumitted.')
@@ -75,6 +76,18 @@ function onSubmit(isValid: string) {
       label="Country"
     />
 
+    <x-datepicker
+      v-model="range"
+      :rules="[rules.isRequired]"
+      label="Select a date"
+      helper="Pick a date"
+      tooltip="Use it to pick a date"
+      range
+      multi-calendars
+      disable-year-select
+      :enable-time-picker="false"
+    />
+
     <x-checkbox
       v-model="agree"
       :rules="[rules.isRequired]"

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

@@ -1,4 +1,6 @@
-<script setup>
+<script setup lang="ts">
+import type { MenuArrayItem } from '@indielayer/ui'
+
 const menu1 = [{
   label: 'Open',
   active: false,
@@ -15,10 +17,11 @@ const menu1 = [{
   active: false,
   value: 'c',
 }]
-const menu2 = [{
+const menu2: MenuArrayItem[] = [{
   label: 'Menu item 1',
   value: '',
   target: '_blank',
+  icon: 'smile',
   href: 'https://indielayer.com',
 }, {
   to: 'menu',
@@ -30,6 +33,7 @@ const menu2 = [{
   label: 'Menu item 3',
   value: '',
   exact: true,
+  icon: 'smile',
   items: [{
     label: 'derp',
   }],
@@ -56,7 +60,7 @@ const menu2 = [{
   label: 'Last menu item',
   value: '',
   icon: 'heart',
-  exact: '',
+  exact: true,
   onClick: () => {},
   disabled: false,
 }]

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { XQrCode } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'QR Code'
+const description = 'The QR Code component is used to generate a QR code.'
+const components = [XQrCode]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/qrCode"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+  />
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('https://indielayer.com')
+const selected = ref('M')
+const options = [
+  { value: 'L', label: 'Low' },
+  { value: 'M', label: 'Medium' },
+  { value: 'Q', label: 'Quartile' },
+  { value: 'H', label: 'High' },
+]
+</script>
+
+<template>
+  <div class="grid grid-cols-2 gap-4 mb-2">
+    <x-input v-model="value" label="QR Code Value"/>
+    <x-select v-model="selected" native :options="options" label="Error correction"/>
+  </div>
+  <x-qr-code :value="value" size="140" :error-correction-level="selected"/>
+</template>

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

@@ -1,15 +1,13 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
-const value = ref(0)
+const value = ref(30)
 </script>
 
 <template>
-  <div class="grid gap-2 grid-cols-3">
-    <x-slider v-model="value" label="Slider 1" class="w-full">
-      <template #prefix="ctx">
-        <div class="w-12 text-sm">{{ ctx.value }}%</div>
-      </template>
-    </x-slider>
-    <x-slider v-model="value" label="Slider 2 (gradient)" gradient/>
-  </div>
+  <x-slider v-model="value" label="Slider 1">
+    <template #prefix="ctx">
+      <div class="w-12">{{ ctx.value }}%</div>
+    </template>
+  </x-slider>
+  <x-slider v-model="value" label="Slider 2" helper="Slide me" class="mt-10"/>
 </template>

package/docs/pages/index.vue

@@ -77,12 +77,12 @@ module.exports = {
   <code-snippet
     lang="js"
     :code="`import { createApp } from 'vue'
-import UI from '@indielayer/ui'
+import UI, { BaseTheme } from '@indielayer/ui'
 
 const app = createApp(App)
 
 app.use(UI, {
-  prefix: 'X',
+  theme: BaseTheme,
 })`"
   />
   <h4 class="text-xl mt-8 mb-4">Load on a Nuxt 3 project</h4>
@@ -91,35 +91,24 @@ app.use(UI, {
     :snippets="[{
       label: 'npm',
       lang: 'bash',
-      code: 'npm install @indielayer/ui @vueuse/core floating-vue -D'
+      code: 'npm install @indielayer/ui @vueuse/core floating-vue @vuepic/vue-datepicker -D'
     }, {
       label: 'yarn',
       lang: 'bash',
-      code: 'yarn add @indielayer/ui @vueuse/core floating-vue -D'
+      code: 'yarn add @indielayer/ui @vueuse/core floating-vue @vuepic/vue-datepicker -D'
     }, {
       label: 'pnpm',
       lang: 'bash',
-      code: 'pnpm add @indielayer/ui @vueuse/core floating-vue -D'
+      code: 'pnpm add @indielayer/ui @vueuse/core floating-vue @vuepic/vue-datepicker -D'
     }]"
   />
   <code-snippet
     lang="js"
-    :code="`import { colors } from '@indielayer/ui'
-
+    :code="`
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   modules: [
-    ['@indielayer/ui/nuxt', {
-      theme: {
-        colors: {
-          primary: colors.emerald,
-          secondary: colors.slate,
-          success: colors.green,
-          warning: colors.yellow,
-          error: colors.red,
-        },
-      },
-    }],
+    ['@indielayer/ui/nuxt'],
   ],
   css: ['~/assets/tailwind.css'],
   /**
@@ -140,12 +129,13 @@ export default defineNuxtConfig({
   <code-snippet
     lang="js"
     :code="`import { createApp } from 'vue'
-import { createUI, XButton, XAlert } from '@indielayer/ui'
+import { createUI, BaseTheme, XButton, XAlert } from '@indielayer/ui'
 
 const app = createApp(App)
 
 const UI = createUI({
   components: [XButton, XAlert],
+  theme: BaseTheme,
 })
 
 app.use(UI)`"

package/exports/nuxt.plugin.js

@@ -1,8 +1,15 @@
 import { defineNuxtPlugin } from '#app'
-import create from '../src/create'
+import { BaseTheme, injectIconsKey, injectOptionsKey, injectThemeKey, createUI } from '../src'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  const UI = create(nuxtApp.$config.public?.indielayerOptions)
+  const UI = createUI({
+    ...nuxtApp.$config.public?.indielayerOptions,
+    theme: BaseTheme,
+    injectIconsKey,
+    injectOptionsKey,
+    injectThemeKey,
+
+  })
 
   nuxtApp.vueApp.use(UI)
 })

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

@@ -27,13 +27,13 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
     type: String,
     default: "right"
   }
-}, oe = {
+}, te = {
   name: "XAccordionItem",
   validators: {
     iconAlign: Z
   }
 }, ae = /* @__PURE__ */ V({
-  ...oe,
+  ...te,
   props: ee,
   emits: ["expand"],
   setup(A, { expose: x, emit: _ }) {
@@ -41,40 +41,40 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
       isInsideAccordion: !1
     }), w = z(() => u.iconAlign || n.iconAlign), I = D({
       iconAlign: w
-    }), o = m(!n.expanded), t = m(!0);
+    }), t = m(!n.expanded), o = m(!0);
     H(() => n.expanded, () => {
-      o.value = !n.expanded;
+      t.value = !n.expanded;
     });
     function B(e) {
-      t.value && (e.style.height = "0px");
+      o.value && (e.style.height = "0px");
     }
     function E(e, i) {
-      t.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
+      o.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
         e.style.height = `${e.scrollHeight}px`;
       }, 1)) : i();
     }
-    function C(e) {
-      t.value ? e.style.removeProperty("height") : t.value = !0;
+    function b(e) {
+      o.value ? e.style.removeProperty("height") : o.value = !0;
     }
-    function $(e) {
-      t.value && (e.style.height = `${e.scrollHeight}px`);
+    function C(e) {
+      o.value && (e.style.height = `${e.scrollHeight}px`);
     }
-    function b(e, i) {
-      t.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
+    function $(e, i) {
+      o.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
         e.style.height = "0px";
       }, 1)) : i();
     }
     function S(e) {
-      t.value ? e.style.removeProperty("height") : t.value = !0;
+      o.value ? e.style.removeProperty("height") : o.value = !0;
     }
     function p(e = !0) {
-      t.value = e, o.value = !1;
+      o.value = e, t.value = !1;
     }
     function L(e = !0) {
-      t.value = e, o.value = !0;
+      o.value = e, t.value = !0;
     }
     function f() {
-      n.disabled || (o.value = !o.value);
+      n.disabled || (t.value = !t.value);
     }
     function P(e = !0) {
       p(e), k("expand");
@@ -82,20 +82,21 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
     const { styles: N, classes: c, className: T } = J("AccordionItem", {}, {
       ...n,
       ...I
-    }, { collapsed: o, isInsideAccordion: u.isInsideAccordion });
+    }, { collapsed: t, isInsideAccordion: u.isInsideAccordion });
     return x({ toggle: f, open: p, close: L }), (e, i) => (a(), v(K(e.tag), {
       style: M(s(N)),
       class: l(s(T)),
       "aria-disabled": e.disabled,
-      "aria-expanded": o.value ? "false" : "true"
+      "aria-expanded": t.value ? "false" : "true"
     }, {
       default: h(() => [
         r("button", {
+          type: "button",
           class: l(s(c).wrapper),
           onClick: f
         }, [
           r("div", R, [
-            d(e.$slots, "default", { collapsed: o.value })
+            d(e.$slots, "default", { collapsed: t.value })
           ]),
           e.showIcon ? (a(), g("div", {
             key: 0,
@@ -111,9 +112,9 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
         X(q, {
           onBeforeEnter: B,
           onEnter: E,
-          onAfterEnter: C,
-          onBeforeLeave: $,
-          onLeave: b,
+          onAfterEnter: b,
+          onBeforeLeave: C,
+          onLeave: $,
           onAfterLeave: S
         }, {
           default: h(() => [
@@ -122,10 +123,10 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
             }, [
               d(e.$slots, "content", {
                 expand: P,
-                collapsed: o.value
+                collapsed: t.value
               })
             ], 2), [
-              [G, !o.value]
+              [G, !t.value]
             ])
           ]),
           _: 3

package/lib/components/accordion/theme/AccordionItem.base.theme.js

@@ -1,16 +1,16 @@
-const r = {
+const i = {
   classes: {
-    wrapper: ({ props: t, slots: i, data: e }) => {
-      const s = ["relative flex items-center w-full text-left"];
-      return e.isInsideAccordion && (i.default && (t.iconAlign === "left" ? s.push("pl-8 pr-4") : s.push("pr-8 pl-4"), s.push("py-2"), t.disabled || s.push("hover:bg-secondary-50 dark:hover:bg-secondary-600")), t.disabled || s.push("cursor-pointer")), s;
+    wrapper: ({ props: t, slots: r, data: e }) => {
+      const s = ["relative flex items-center w-full text-left rounded"];
+      return e.isInsideAccordion && (r.default && (t.iconAlign === "left" ? s.push("pl-8 pr-4") : s.push("pr-8 pl-4"), s.push("py-2"), t.disabled || s.push("hover:bg-secondary-100 dark:hover:bg-secondary-600")), t.disabled || s.push("cursor-pointer")), s;
     },
-    icon: ({ props: t, data: i }) => {
+    icon: ({ props: t, data: r }) => {
       const e = ["absolute flex transform transition-transform duration-150"];
-      return i.collapsed || e.push("rotate-180"), t.disabled && e.push("text-secondary-300"), t.iconAlign === "left" ? e.push("left-2") : e.push("right-2"), e;
+      return r.collapsed || e.push("rotate-180"), t.disabled && e.push("text-secondary-300"), t.iconAlign === "left" ? e.push("left-2") : e.push("right-2"), e;
     },
     content: "transition-[height] duration-150 overflow-y-hidden"
   }
-}, n = r;
+}, n = i;
 export {
   n as default
 };

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

@@ -1,4 +1,4 @@
-import { defineComponent as v, computed as g, openBlock as l, createElementBlock as a, normalizeStyle as k, unref as r, normalizeClass as w, renderSlot as t, createBlock as b, createCommentVNode as i, createElementVNode as n, Fragment as B, createVNode as $ } from "vue";
+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 { 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";
@@ -24,7 +24,7 @@ const A = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), E = ["aria
     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)),
-      class: w([
+      class: b([
         r(d),
         e.$style.alert,
         e.glow ? e.$style["alert--glow"] : "",
@@ -32,7 +32,7 @@ const A = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), E = ["aria
       ])
     }, [
       t(e.$slots, "icon", {}, () => [
-        e.type ? (l(), b(c, {
+        e.type ? (l(), w(c, {
           key: 0,
           icon: p.value,
           class: "text-[color:var(--x-alert-icon)] dark:text-[color:var(--x-alert-dark-icon)]"
@@ -44,6 +44,7 @@ const A = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), E = ["aria
       e.removable ? (l(), a(B, { key: 0 }, [
         A,
         n("button", {
+          type: "button",
           class: "shrink-0",
           "aria-label": e.closeLabel,
           onClick: s[0] || (s[0] = (y) => e.$emit("remove", y))

package/lib/components/button/Button.vue.d.ts

@@ -12,7 +12,7 @@ declare const buttonProps: {
     icon: StringConstructor;
     iconLeft: StringConstructor;
     iconRight: StringConstructor;
-    to: StringConstructor;
+    to: (ObjectConstructor | StringConstructor)[];
     outlined: BooleanConstructor;
     rounded: BooleanConstructor;
     glow: BooleanConstructor;
@@ -56,7 +56,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     icon: StringConstructor;
     iconLeft: StringConstructor;
     iconRight: StringConstructor;
-    to: StringConstructor;
+    to: (ObjectConstructor | StringConstructor)[];
     outlined: BooleanConstructor;
     rounded: BooleanConstructor;
     glow: BooleanConstructor;
@@ -95,7 +95,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     icon: StringConstructor;
     iconLeft: StringConstructor;
     iconRight: StringConstructor;
-    to: StringConstructor;
+    to: (ObjectConstructor | StringConstructor)[];
     outlined: BooleanConstructor;
     rounded: BooleanConstructor;
     glow: BooleanConstructor;

package/lib/components/button/Button.vue.js

@@ -3,7 +3,7 @@ import s from "./Button.vue3.js";
 import t from "../../_virtual/_plugin-vue_export-helper.js";
 const e = {
   $style: s
-}, m = /* @__PURE__ */ t(o, [["__cssModules", e], ["__scopeId", "data-v-b25d6b6e"]]);
+}, c = /* @__PURE__ */ t(o, [["__cssModules", e], ["__scopeId", "data-v-ee892a0a"]]);
 export {
-  m as default
+  c as default
 };

package/lib/components/button/Button.vue2.js

@@ -1,5 +1,5 @@
-import { defineComponent as D, ref as I, inject as T, computed as l, useAttrs as V, unref as t, openBlock as a, createBlock as r, resolveDynamicComponent as A, normalizeClass as u, normalizeStyle as E, withCtx as F, createCommentVNode as d, createElementVNode as m, renderSlot as K } from "vue";
-import { useTheme as O } from "../../composables/useTheme.js";
+import { defineComponent as D, ref as I, inject as O, computed as l, useAttrs as T, unref as t, openBlock as a, createBlock as r, resolveDynamicComponent as V, normalizeClass as u, normalizeStyle as A, withCtx as E, createCommentVNode as d, createElementVNode as m, renderSlot as F } from "vue";
+import { useTheme as K } from "../../composables/useTheme.js";
 import { useColors as X } from "../../composables/useColors.js";
 import { useCommon as b } from "../../composables/useCommon.js";
 import { useInteractive as h } from "../../composables/useInteractive.js";
@@ -21,7 +21,7 @@ const J = {
   icon: String,
   iconLeft: String,
   iconRight: String,
-  to: String,
+  to: [String, Object],
   outlined: Boolean,
   rounded: Boolean,
   glow: Boolean,
@@ -38,10 +38,10 @@ const J = {
   ...M,
   props: J,
   setup(y, { expose: v }) {
-    const e = y, g = I(null), s = T(q, {
+    const e = y, g = I(null), s = O(q, {
       isButtonGroup: !1,
       groupProps: {}
-    }), { isButtonGroup: B } = s, n = l(() => s.groupProps.size || e.size), z = l(() => s.groupProps.flat || e.flat), k = l(() => e.color || s.groupProps.color), P = l(() => e.ghost || s.groupProps.ghost), S = l(() => e.light || s.groupProps.light), w = l(() => e.outlined || s.groupProps.outlined), i = l(() => e.disabled || s.groupProps.disabled), p = l(() => e.icon || e.iconLeft), C = V(), R = l(() => C.href ? "a" : e.to ? "router-link" : e.tag), L = l(() => ({
+    }), { isButtonGroup: B } = s, n = l(() => s.groupProps.size || e.size), z = l(() => s.groupProps.flat || e.flat), k = l(() => e.color || s.groupProps.color), P = l(() => e.ghost || s.groupProps.ghost), S = l(() => e.light || s.groupProps.light), w = l(() => e.outlined || s.groupProps.outlined), i = l(() => e.disabled || s.groupProps.disabled), p = l(() => e.icon || e.iconLeft), C = T(), R = l(() => C.href ? "a" : e.to ? "router-link" : e.tag), L = l(() => ({
       size: t(n),
       flat: t(z),
       color: t(k),
@@ -55,10 +55,10 @@ const J = {
       iconLeft: t(p),
       iconRight: e.iconRight,
       rounded: e.rounded
-    })), { className: G, classes: c, styles: $ } = O("Button", {}, L, {
+    })), { className: G, classes: c, styles: $ } = K("Button", {}, L, {
       isButtonGroup: B
     }), { focus: j, blur: N } = h(g);
-    return v({ focus: j, blur: N }), (o, Q) => (a(), r(A(R.value), {
+    return v({ focus: j, blur: N }), (o, Q) => (a(), r(V(R.value), {
       ref_key: "elRef",
       ref: g,
       to: o.to,
@@ -69,13 +69,13 @@ const J = {
         t(c).wrapper,
         { "w-full": o.block }
       ]),
-      style: E(t($)),
+      style: A(t($)),
       "aria-busy": o.loading ? "true" : null,
       "aria-disabled": o.tag !== "button" && i.value ? "true" : null,
       disabled: i.value || o.loading,
       type: o.tag === "button" ? o.type : null
     }, {
-      default: F(() => [
+      default: E(() => [
         o.loading ? (a(), r(H, {
           key: 0,
           class: "absolute",
@@ -95,7 +95,7 @@ const J = {
             ])
           }, null, 8, ["size", "icon", "class"])) : d("", !0),
           m("span", null, [
-            K(o.$slots, "default", {}, void 0, !0)
+            F(o.$slots, "default", {}, void 0, !0)
           ])
         ], 2),
         o.iconRight ? (a(), r(f, {