@indielayer/ui 1.15.0 → 1.15.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 - Indielayer
+Copyright (c) 2024-present - Indielayer
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -39,4 +39,4 @@ The documentation is located inside [/packages/ui/docs](./packages/ui/docs)
 
 [MIT](./LICENSE)
 
-Copyright (c) 2024, Indielayer
+Copyright (c) 2024-present - Indielayer

package/docs/components/common/CodeSnippet.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { getHighlighter } from 'shiki'
+import { createHighlighter } from 'shiki'
 import indielayerTheme from './Indielayer-theme.json'
 
-const highlighter = getHighlighter({
+const highlighter = createHighlighter({
   langs: ['js', 'ts', 'vue-html', 'bash', 'vue'],
+  themes: [indielayerTheme as any],
 })
 
 const props = defineProps({
@@ -23,7 +24,7 @@ const highlighted = ref('')
 
 onMounted(async () => {
   await (await highlighter).loadTheme(indielayerTheme as any)
-  highlighted.value = (await highlighter).codeToHtml(props.code, { lang: props.lang, theme: 'Indielayer' })
+  highlighted.value = (await highlighter).codeToHtml(props.code || '', { lang: props.lang, theme: 'Indielayer' })
 })
 </script>
 

package/lib/components/index.js

@@ -1,119 +1,120 @@
-import { default as a } from "./accordion/Accordion.vue.js";
-import { default as f } from "./accordion/AccordionItem.vue.js";
-import { default as d } from "./badge/Badge.vue.js";
-import { default as u } from "./breadcrumbs/Breadcrumbs.vue.js";
-import { default as s } from "./card/Card.vue.js";
-import { default as X } from "./carousel/Carousel.vue.js";
-import { default as n } from "./container/Container.vue.js";
-import { default as c } from "./datepicker/Datepicker.vue.js";
+import { default as t } from "./accordion/Accordion.vue.js";
+import { default as l } from "./accordion/AccordionItem.vue.js";
+import { default as p } from "./badge/Badge.vue.js";
+import { default as m } from "./breadcrumbs/Breadcrumbs.vue.js";
+import { default as x } from "./card/Card.vue.js";
+import { default as i } from "./carousel/Carousel.vue.js";
+import { default as T } from "./container/Container.vue.js";
+import { default as b } from "./datepicker/Datepicker.vue.js";
 import "./datepicker/Datepicker.vue2.js";
-import { default as g } from "./divider/Divider.vue.js";
-import { default as S } from "./drawer/Drawer.vue.js";
-import { default as P } from "./form/Form.vue.js";
-import { default as B } from "./formGroup/FormGroup.vue.js";
-import { default as A } from "./image/Image.vue.js";
-import { default as F } from "./menu/Menu.vue.js";
-import { default as L } from "./modal/Modal.vue.js";
-import { default as h } from "./notifications/Notifications.vue.js";
-import { default as H } from "./pagination/Pagination.vue.js";
-import { default as y } from "./progress/Progress.vue.js";
-import { default as Q } from "./qrCode/QrCode.vue.js";
-import { default as j } from "./select/Select.vue.js";
-import { default as z } from "./skeleton/Skeleton.vue.js";
-import { default as J } from "./stepper/Stepper.vue.js";
-import { default as O } from "./tab/Tab.vue.js";
-import { default as W } from "./tab/TabGroup.vue.js";
-import { default as Z } from "./table/Table.vue.js";
-import { default as $ } from "./textarea/Textarea.vue.js";
-import { default as oe } from "./themeProvider/ThemeProvider.vue.js";
-import { default as ae } from "./toggle/Toggle.vue.js";
-import { default as fe } from "./upload/Upload.vue.js";
-import { default as de } from "./alert/Alert.vue.js";
-import { default as ue } from "./avatar/Avatar.vue.js";
-import { default as se } from "./button/Button.vue.js";
-import { default as Xe } from "./button/ButtonGroup.vue.js";
-import { default as ne } from "./carousel/CarouselSlide.vue.js";
-import { default as ce } from "./checkbox/Checkbox.vue.js";
-import { default as ge } from "./icon/Icon.vue.js";
-import { default as Se } from "./input/Input.vue.js";
-import { default as Pe } from "./inputFooter/InputFooter.vue.js";
-import { default as Be } from "./label/Label.vue.js";
-import { default as Ae } from "./link/Link.vue.js";
-import { default as Fe } from "./loader/Loader.vue.js";
-import { default as Le } from "./menu/MenuItem.vue.js";
-import { default as he } from "./pagination/PaginationItem.vue.js";
-import { default as He } from "./popover/Popover.vue.js";
-import { default as ye } from "./popover/PopoverContainer.vue.js";
-import { default as Qe } from "./radio/Radio.vue.js";
-import { default as je } from "./scroll/Scroll.vue.js";
-import { default as ze } from "./slider/Slider.vue.js";
-import { default as Je } from "./spacer/Spacer.js";
-import { default as Oe } from "./spinner/Spinner.vue.js";
-import { default as We } from "./table/TableBody.js";
-import { default as Ze } from "./table/TableCell.vue.js";
-import { default as $e } from "./table/TableHead.vue.js";
-import { default as oo } from "./table/TableHeader.vue.js";
-import { default as ao } from "./table/TableRow.vue.js";
-import { default as fo } from "./tag/Tag.vue.js";
-import { default as po } from "./tooltip/Tooltip.vue.js";
-import { default as mo } from "./tooltip/ToggleTip.vue.js";
+import { default as C } from "./divider/Divider.vue.js";
+import { default as I } from "./drawer/Drawer.vue.js";
+import { default as v } from "./form/Form.vue.js";
+import { default as k } from "./formGroup/FormGroup.vue.js";
+import { default as D } from "./image/Image.vue.js";
+import { default as G } from "./menu/Menu.vue.js";
+import { default as M } from "./modal/Modal.vue.js";
+import { default as w } from "./notifications/Notifications.vue.js";
+import { default as R } from "./pagination/Pagination.vue.js";
+import { default as N } from "./popover/Popover.vue.js";
+import "./popover/Popover.vue2.js";
+import { default as U } from "./popover/PopoverContainer.vue.js";
+import { default as q } from "./progress/Progress.vue.js";
+import { default as E } from "./qrCode/QrCode.vue.js";
+import { default as K } from "./select/Select.vue.js";
+import { default as V } from "./skeleton/Skeleton.vue.js";
+import { default as Y } from "./stepper/Stepper.vue.js";
+import { default as _ } from "./tab/Tab.vue.js";
+import { default as ee } from "./tab/TabGroup.vue.js";
+import { default as re } from "./table/Table.vue.js";
+import { default as te } from "./textarea/Textarea.vue.js";
+import { default as le } from "./themeProvider/ThemeProvider.vue.js";
+import { default as pe } from "./toggle/Toggle.vue.js";
+import { default as me } from "./upload/Upload.vue.js";
+import { default as xe } from "./alert/Alert.vue.js";
+import { default as ie } from "./avatar/Avatar.vue.js";
+import { default as Te } from "./button/Button.vue.js";
+import { default as be } from "./button/ButtonGroup.vue.js";
+import { default as Ce } from "./carousel/CarouselSlide.vue.js";
+import { default as Ie } from "./checkbox/Checkbox.vue.js";
+import { default as ve } from "./icon/Icon.vue.js";
+import { default as ke } from "./input/Input.vue.js";
+import { default as De } from "./inputFooter/InputFooter.vue.js";
+import { default as Ge } from "./label/Label.vue.js";
+import { default as Me } from "./link/Link.vue.js";
+import { default as we } from "./loader/Loader.vue.js";
+import { default as Re } from "./menu/MenuItem.vue.js";
+import { default as Ne } from "./pagination/PaginationItem.vue.js";
+import { default as Ue } from "./radio/Radio.vue.js";
+import { default as qe } from "./scroll/Scroll.vue.js";
+import { default as Ee } from "./slider/Slider.vue.js";
+import { default as Ke } from "./spacer/Spacer.js";
+import { default as Ve } from "./spinner/Spinner.vue.js";
+import { default as Ye } from "./table/TableBody.js";
+import { default as _e } from "./table/TableCell.vue.js";
+import { default as eo } from "./table/TableHead.vue.js";
+import { default as ro } from "./table/TableHeader.vue.js";
+import { default as to } from "./table/TableRow.vue.js";
+import { default as lo } from "./tag/Tag.vue.js";
+import { default as uo } from "./tooltip/Tooltip.vue.js";
+import { default as so } from "./tooltip/ToggleTip.vue.js";
 export {
-  a as XAccordion,
-  f as XAccordionItem,
-  de as XAlert,
-  ue as XAvatar,
-  d as XBadge,
-  u as XBreadcrumbs,
-  se as XButton,
-  Xe as XButtonGroup,
-  s as XCard,
-  X as XCarousel,
-  ne as XCarouselSlide,
-  ce as XCheckbox,
-  n as XContainer,
-  c as XDatepicker,
-  g as XDivider,
-  S as XDrawer,
-  P as XForm,
-  B as XFormGroup,
-  ge as XIcon,
-  A as XImage,
-  Se as XInput,
-  Pe as XInputFooter,
-  Be as XLabel,
-  Ae as XLink,
-  Fe as XLoader,
-  F as XMenu,
-  Le as XMenuItem,
-  L as XModal,
-  h as XNotifications,
-  H as XPagination,
-  he as XPaginationItem,
-  He as XPopover,
-  ye as XPopoverContainer,
-  y as XProgress,
-  Q as XQrCode,
-  Qe as XRadio,
-  je as XScroll,
-  j as XSelect,
-  z as XSkeleton,
-  ze as XSlider,
-  Je as XSpacer,
-  Oe as XSpinner,
-  J as XStepper,
-  O as XTab,
-  W as XTabGroup,
-  Z as XTable,
-  We as XTableBody,
-  Ze as XTableCell,
-  $e as XTableHead,
-  oo as XTableHeader,
-  ao as XTableRow,
-  fo as XTag,
-  $ as XTextarea,
-  oe as XThemeProvider,
-  ae as XToggle,
-  mo as XToggleTip,
-  po as XTooltip,
-  fe as XUpload
+  t as XAccordion,
+  l as XAccordionItem,
+  xe as XAlert,
+  ie as XAvatar,
+  p as XBadge,
+  m as XBreadcrumbs,
+  Te as XButton,
+  be as XButtonGroup,
+  x as XCard,
+  i as XCarousel,
+  Ce as XCarouselSlide,
+  Ie as XCheckbox,
+  T as XContainer,
+  b as XDatepicker,
+  C as XDivider,
+  I as XDrawer,
+  v as XForm,
+  k as XFormGroup,
+  ve as XIcon,
+  D as XImage,
+  ke as XInput,
+  De as XInputFooter,
+  Ge as XLabel,
+  Me as XLink,
+  we as XLoader,
+  G as XMenu,
+  Re as XMenuItem,
+  M as XModal,
+  w as XNotifications,
+  R as XPagination,
+  Ne as XPaginationItem,
+  N as XPopover,
+  U as XPopoverContainer,
+  q as XProgress,
+  E as XQrCode,
+  Ue as XRadio,
+  qe as XScroll,
+  K as XSelect,
+  V as XSkeleton,
+  Ee as XSlider,
+  Ke as XSpacer,
+  Ve as XSpinner,
+  Y as XStepper,
+  _ as XTab,
+  ee as XTabGroup,
+  re as XTable,
+  Ye as XTableBody,
+  _e as XTableCell,
+  eo as XTableHead,
+  ro as XTableHeader,
+  to as XTableRow,
+  lo as XTag,
+  te as XTextarea,
+  le as XThemeProvider,
+  pe as XToggle,
+  so as XToggleTip,
+  uo as XTooltip,
+  me as XUpload
 };

package/lib/components/popover/Popover.vue2.js

@@ -1,5 +1,4 @@
-import o from "./Popover.vue.js";
-import "./Popover.vue3.js";
+const e = "";
 export {
-  o as default
+  e as default
 };

package/lib/components/popover/Popover.vue3.js

@@ -1,4 +1,5 @@
-const e = "";
+import o from "./Popover.vue.js";
+import "./Popover.vue2.js";
 export {
-  e as default
+  o as default
 };

package/lib/components/select/Select.vue.js

@@ -13,7 +13,7 @@ import me from "../icon/Icon.vue.js";
 import ll from "../menu/MenuItem.vue.js";
 import tl from "../spinner/Spinner.vue.js";
 import ye from "../popover/Popover.vue.js";
-import "../popover/Popover.vue3.js";
+import "../popover/Popover.vue2.js";
 import be from "../popover/PopoverContainer.vue.js";
 import al from "../inputFooter/InputFooter.vue.js";
 import il from "../input/Input.vue.js";

package/lib/components/textarea/Textarea.vue.js

@@ -1,16 +1,16 @@
-import { defineComponent as K, useAttrs as O, computed as i, ref as D, watch as W, openBlock as m, createBlock as u, normalizeStyle as X, unref as r, normalizeClass as h, withCtx as G, createElementVNode as b, renderSlot as g, mergeProps as J, toHandlers as M, withKeys as Q, createCommentVNode as v } from "vue";
-import { useResizeObserver as U, useEventListener as Y } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
-import { useCSS as Z } from "../../composables/useCSS.js";
-import { useTheme as _ } from "../../composables/useTheme.js";
+import { defineComponent as O, useAttrs as D, computed as i, ref as W, watch as X, openBlock as u, createBlock as m, normalizeStyle as G, unref as r, normalizeClass as h, withCtx as J, createElementVNode as b, renderSlot as g, mergeProps as M, toHandlers as Q, withKeys as U, createCommentVNode as v } from "vue";
+import { useResizeObserver as Y, useEventListener as Z } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
+import { useCSS as _ } from "../../composables/useCSS.js";
+import { useTheme as ee } from "../../composables/useTheme.js";
 import { useCommon as y } from "../../composables/useCommon.js";
-import { useColors as ee } from "../../composables/useColors.js";
+import { useColors as re } from "../../composables/useColors.js";
 import { useInputtable as d } from "../../composables/useInputtable.js";
 import { useInteractive as w } from "../../composables/useInteractive.js";
-import re from "../label/Label.vue.js";
-import oe from "../inputFooter/InputFooter.vue.js";
-import te from "../icon/Icon.vue.js";
-import { closeIcon as ne } from "../../common/icons.js";
-const se = { class: "relative" }, le = ["id", "disabled", "max", "maxlength", "min", "dir", "rows", "minlength", "name", "placeholder", "readonly", "value"], ae = {
+import oe from "../label/Label.vue.js";
+import te from "../inputFooter/InputFooter.vue.js";
+import ne from "../icon/Icon.vue.js";
+import { closeIcon as se } from "../../common/icons.js";
+const le = { class: "relative" }, ae = ["id", "disabled", "max", "maxlength", "min", "dir", "rows", "minlength", "name", "placeholder", "readonly", "value"], ie = {
   ...y.props(),
   ...w.props(),
   ...d.props(),
@@ -33,25 +33,25 @@ const se = { class: "relative" }, le = ["id", "disabled", "max", "maxlength", "m
   resizable: Boolean,
   showCounter: Boolean,
   clearable: Boolean
-}, ie = {
+}, ue = {
   name: "XTextarea",
   validators: {
     ...y.validators()
   }
-}, ke = /* @__PURE__ */ K({
-  ...ie,
-  props: ae,
+}, ze = /* @__PURE__ */ O({
+  ...ue,
+  props: ie,
   emits: d.emits(),
   setup(S, { expose: C, emit: k }) {
-    const o = S, z = k, p = O(), B = i(() => Object.keys(p).reduce((e, n) => (n.startsWith("data-") && (e[n] = p[n]), e), {})), t = D(null);
-    U(t, s), typeof window < "u" && Y(window, "resize", s), W([() => o.modelValue, () => o.size], () => {
+    const o = S, z = k, p = D(), B = i(() => Object.keys(p).reduce((e, n) => (n.startsWith("data-") && (e[n] = p[n]), e), {})), t = W(null);
+    Y(t, s), typeof window < "u" && Z(window, "resize", s), X([() => o.modelValue, () => o.size], () => {
       setTimeout(s);
     });
-    const I = Z("textarea"), N = ee().getPalette("primary"), T = I.get("border", N[400]);
-    function V() {
+    const I = _("textarea"), N = re().getPalette("primary"), T = I.get("border", N[400]);
+    function E() {
       s();
     }
-    function E(e) {
+    function V(e) {
       o.preventEnter && e.preventDefault(), e.stopPropagation();
     }
     function s() {
@@ -68,24 +68,28 @@ const se = { class: "relative" }, le = ["id", "disabled", "max", "maxlength", "m
     } = d(o, { focus: c, emit: z }), R = i(() => {
       const e = o.modelValue;
       return e ? String(e).length : 0;
-    }), A = i(() => o.clearable && o.modelValue !== ""), { styles: F, classes: a, className: H } = _("Textarea", {}, o, { errorInternal: l });
-    return C({ focus: c, blur: $, reset: f, validate: q, setError: L }), (e, n) => (m(), u(re, {
-      style: X(r(F)),
+    }), A = i(() => o.clearable && o.modelValue !== "");
+    function F(e) {
+      return typeof e > "u" || e === null;
+    }
+    const { styles: H, classes: a, className: K } = ee("Textarea", {}, o, { errorInternal: l });
+    return C({ focus: c, blur: $, reset: f, validate: q, setError: L }), (e, n) => (u(), m(oe, {
+      style: G(r(H)),
       block: e.block,
       disabled: e.disabled,
       required: e.required,
       "is-inside-form": r(P),
       label: e.label,
       class: h([
-        r(H),
+        r(K),
         r(a).wrapper
       ]),
       tooltip: e.tooltip
     }, {
-      default: G(() => [
-        b("div", se, [
+      default: J(() => [
+        b("div", le, [
           g(e.$slots, "prefix"),
-          b("textarea", J({
+          b("textarea", M({
             id: e.id,
             ref_key: "elRef",
             ref: t,
@@ -104,22 +108,22 @@ const se = { class: "relative" }, le = ["id", "disabled", "max", "maxlength", "m
             name: e.name,
             placeholder: e.placeholder,
             readonly: e.readonly,
-            value: typeof e.modelValue < "u" ? String(e.modelValue) : ""
-          }, B.value, M(r(j), !0), {
-            onKeydown: Q(E, ["enter"]),
-            onInput: V
-          }), null, 16, le),
+            value: F(e.modelValue) ? "" : String(e.modelValue)
+          }, B.value, Q(r(j), !0), {
+            onKeydown: U(V, ["enter"]),
+            onInput: E
+          }), null, 16, ae),
           g(e.$slots, "suffix", {}, () => [
-            A.value ? (m(), u(te, {
+            A.value ? (u(), m(ne, {
               key: 0,
               size: e.size,
-              icon: r(ne),
+              icon: r(se),
               class: h(["right-2 cursor-pointer", r(a).icon]),
-              onClick: n[0] || (n[0] = (ue) => r(f)())
+              onClick: n[0] || (n[0] = (de) => r(f)())
             }, null, 8, ["size", "icon", "class"])) : v("", !0)
           ])
         ]),
-        r(x) ? v("", !0) : (m(), u(oe, {
+        r(x) ? v("", !0) : (u(), m(te, {
           key: 0,
           error: r(l),
           helper: e.helper,
@@ -133,5 +137,5 @@ const se = { class: "relative" }, le = ["id", "disabled", "max", "maxlength", "m
   }
 });
 export {
-  ke as default
+  ze as default
 };

package/lib/components/tooltip/ToggleTip.vue.js

@@ -1,22 +1,22 @@
-import { defineComponent as r, computed as i, openBlock as p, createBlock as s, withCtx as o, createElementVNode as a, createVNode as m } from "vue";
+import { defineComponent as r, computed as i, openBlock as s, createBlock as p, withCtx as o, createElementVNode as a, createVNode as m } from "vue";
 import l from "./Tooltip.vue.js";
 import _ from "../icon/Icon.vue.js";
 import { infoIcon as d } from "../../common/icons.js";
-const u = ["innerHTML"], f = {
+const f = ["innerHTML"], u = {
   content: String,
   icon: String
 }, g = { name: "XToggleTip" }, y = /* @__PURE__ */ r({
   ...g,
-  props: f,
+  props: u,
   setup(t) {
-    const e = t, n = i(() => e.icon || d);
-    return (c, T) => (p(), s(l, { placement: "auto" }, {
+    const n = t, e = i(() => n.icon || d);
+    return (c, T) => (s(), p(l, { position: "right" }, {
       tooltip: o(() => [
-        a("div", { innerHTML: c.content }, null, 8, u)
+        a("div", { innerHTML: c.content }, null, 8, f)
       ]),
       default: o(() => [
         m(_, {
-          icon: n.value,
+          icon: e.value,
           class: "text-secondary-500 dark:text-secondary-300 cursor-pointer"
         }, null, 8, ["icon"])
       ]),

package/lib/components/tooltip/Tooltip.vue.d.ts

@@ -1,28 +1,48 @@
 import type { ExtractPublicPropTypes, PropType } from 'vue';
-import { type Placement } from 'floating-vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const tooltipProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
     tooltip: StringConstructor;
-    placement: {
-        type: PropType<Placement>;
+    disabled: BooleanConstructor;
+    position: {
+        type: PropType<TooltipPosition>;
         default: string;
     };
 };
-export type PopoverPlacement = Placement;
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
 export type TooltipProps = ExtractPublicPropTypes<typeof tooltipProps>;
+type InternalClasses = 'tooltip';
+export interface TooltipTheme extends ThemeComponent<TooltipProps, InternalClasses> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
     tooltip: StringConstructor;
-    placement: {
-        type: PropType<Placement>;
+    disabled: BooleanConstructor;
+    position: {
+        type: PropType<TooltipPosition>;
         default: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
     tooltip: StringConstructor;
-    placement: {
-        type: PropType<Placement>;
+    disabled: BooleanConstructor;
+    position: {
+        type: PropType<TooltipPosition>;
         default: string;
     };
 }>> & Readonly<{}>, {
-    placement: Placement;
+    disabled: boolean;
+    tag: string;
+    position: TooltipPosition;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
     tooltip?(_: {}): any;