@indielayer/ui 1.15.1 → 1.15.3

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/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;

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

@@ -1,43 +1,120 @@
-import { defineComponent as r, openBlock as a, createBlock as l, withCtx as e, createElementVNode as s, createVNode as i, renderSlot as o, createTextVNode as n, toDisplayString as p } from "vue";
-import c from "../popover/Popover.vue.js";
-import "../popover/Popover.vue3.js";
-import m from "../popover/PopoverContainer.vue.js";
-import "../../node_modules/.pnpm/floating-vue@5.2.2_@nuxt_kit@3.10.1_rollup@3.29.4__vue@3.5.10_typescript@5.2.2_/node_modules/floating-vue/dist/floating-vue.js";
-const d = { class: "dark" }, f = {
+import { defineComponent as H, ref as r, useSlots as M, computed as c, openBlock as v, createBlock as w, resolveDynamicComponent as W, normalizeClass as u, unref as y, withCtx as k, renderSlot as C, Teleport as O, createVNode as X, Transition as j, createElementBlock as q, normalizeStyle as A, createTextVNode as F, toDisplayString as G, createElementVNode as T, createCommentVNode as R } from "vue";
+import { useTheme as I } from "../../composables/useTheme.js";
+const J = {
+  tag: {
+    type: String,
+    default: "div"
+  },
   tooltip: String,
-  placement: {
+  disabled: Boolean,
+  position: {
     type: String,
     default: "bottom"
   }
-}, _ = { name: "XTooltip" }, $ = /* @__PURE__ */ r({
-  ..._,
-  props: f,
-  setup(u) {
-    return (t, h) => (a(), l(c, {
-      triggers: ["hover", "click"],
-      class: "inline-block",
-      "hide-arrow": !1,
-      placement: t.placement
+}, K = { name: "XTooltip" }, U = /* @__PURE__ */ H({
+  ...K,
+  props: J,
+  setup(S) {
+    const n = S, f = r(null), h = r(null), g = r(!1), b = r({}), p = r(n.position), _ = M(), B = c(() => n.tooltip || _.tooltip), a = c(() => n.disabled || !B.value), N = c(() => a.value ? "" : {
+      top: "-bottom-2.5 left-1/2 -translate-x-1/2 w-3.5",
+      bottom: "-top-2.5 left-1/2 -translate-x-1/2 w-3.5",
+      left: "-right-2.5 top-1/2 -translate-y-1/2 h-3.5",
+      right: "-left-2.5 top-1/2 -translate-y-1/2 h-3.5"
+    }[p.value]), V = c(() => a.value ? "" : {
+      top: "-rotate-45 origin-top-left",
+      bottom: "rotate-45 origin-bottom-left",
+      left: "rotate-45 origin-top-left",
+      right: "-rotate-45 origin-top-right"
+    }[p.value]), $ = c(() => a.value ? "" : {
+      top: "origin-bottom",
+      bottom: "origin-top",
+      left: "origin-right",
+      right: "origin-left"
+    }[p.value]), x = () => {
+      if (!f.value || !h.value)
+        return;
+      const t = f.value.getBoundingClientRect(), e = h.value.getBoundingClientRect(), l = 8, d = window.innerWidth, m = window.innerHeight;
+      let s = n.position, o = 0, i = 0;
+      switch (s) {
+        case "top":
+          o = t.top - e.height - l, i = t.left + t.width / 2 - e.width / 2, o < 0 && (s = "bottom", o = t.bottom + l);
+          break;
+        case "bottom":
+          o = t.bottom + l, i = t.left + t.width / 2 - e.width / 2, o + e.height > m && (s = "top", o = t.top - e.height - l);
+          break;
+        case "left":
+          o = t.top + t.height / 2 - e.height / 2, i = t.left - e.width - l, i < 0 && (s = "right", i = t.right + l);
+          break;
+        case "right":
+          o = t.top + t.height / 2 - e.height / 2, i = t.right + l, i + e.width > d && (s = "left", i = t.left - e.width - l);
+          break;
+      }
+      (s === "top" || s === "bottom") && (i < 0 && (i = l), i + e.width > d && (i = d - e.width - l)), (s === "left" || s === "right") && (o < 0 && (o = l), o + e.height > m && (o = m - e.height - l)), p.value = s, b.value = {
+        top: `${o}px`,
+        left: `${i}px`
+      };
+    }, z = () => {
+      a.value || (g.value = !0, setTimeout(x, 0));
+    }, P = () => {
+      a.value || (g.value = !1);
+    }, { classes: D, className: E } = I("Tooltip", {}, n);
+    return (t, e) => (v(), w(W(t.tag), {
+      ref_key: "triggerRef",
+      ref: f,
+      class: u([
+        y(E),
+        {
+          "inline-block": !t.$attrs.class
+        }
+      ]),
+      onMouseenter: z,
+      onMouseleave: P
     }, {
-      content: e(() => [
-        s("div", d, [
-          i(m, { class: "p-2 text-white text-xs w-max max-w-xs" }, {
-            default: e(() => [
-              o(t.$slots, "tooltip", {}, () => [
-                n(p(t.tooltip), 1)
-              ])
+      default: k(() => [
+        C(t.$slots, "default"),
+        a.value ? R("", !0) : (v(), w(O, {
+          key: 0,
+          to: "body"
+        }, [
+          X(j, {
+            "enter-active-class": "transition-opacity duration-150 ease-out",
+            "leave-active-class": "transition-opacity duration-150 ease-in",
+            "enter-from-class": "opacity-0",
+            "enter-to-class": "opacity-100",
+            "leave-from-class": "opacity-100",
+            "leave-to-class": "opacity-0"
+          }, {
+            default: k(() => [
+              g.value ? (v(), q("div", {
+                key: 0,
+                ref_key: "tooltipRef",
+                ref: h,
+                style: A(b.value),
+                class: u(["fixed z-[10001] pointer-events-none", [
+                  y(D).tooltip,
+                  $.value
+                ]])
+              }, [
+                C(t.$slots, "tooltip", {}, () => [
+                  F(G(t.tooltip), 1)
+                ]),
+                T("div", {
+                  class: u(["absolute overflow-hidden shadow-lg z-10", N.value])
+                }, [
+                  T("div", {
+                    class: u(["h-2.5 w-2.5 bg-secondary-700 transform border border-secondary-800", V.value])
+                  }, null, 2)
+                ], 2)
+              ], 6)) : R("", !0)
             ]),
             _: 3
           })
-        ])
-      ]),
-      default: e(() => [
-        o(t.$slots, "default")
+        ]))
       ]),
       _: 3
-    }, 8, ["placement"]));
+    }, 40, ["class"]));
   }
 });
 export {
-  $ as default
+  U as default
 };

package/lib/components/tooltip/index.d.ts

@@ -1,4 +1,4 @@
 export { default as XTooltip } from './Tooltip.vue';
-export type { TooltipProps } from './Tooltip.vue';
+export type { TooltipProps, TooltipPosition, TooltipTheme } from './Tooltip.vue';
 export { default as XToggleTip } from './ToggleTip.vue';
 export type { ToggleTipProps } from './ToggleTip.vue';

package/lib/components/tooltip/theme/Tooltip.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { TooltipTheme } from '../Tooltip.vue';
+declare const theme: TooltipTheme;
+export default theme;

package/lib/components/tooltip/theme/Tooltip.base.theme.js

@@ -0,0 +1,8 @@
+const e = {
+  classes: {
+    tooltip: "bg-secondary-700 shadow-lg rounded-md border border-secondary-800 p-2 text-white text-xs w-max max-w-sm"
+  }
+}, s = e;
+export {
+  s as default
+};

package/lib/components/tooltip/theme/Tooltip.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { TooltipTheme } from '../Tooltip.vue';
+declare const theme: TooltipTheme;
+export default theme;

package/lib/components/tooltip/theme/Tooltip.carbon.theme.js

@@ -0,0 +1,5 @@
+import e from "./Tooltip.base.theme.js";
+const t = e, o = t;
+export {
+  o as default
+};