cisse-vue-ui 0.2.8 → 0.3.0

package/dist/{CollapsibleCard.vue_vue_type_script_setup_true_lang-ClNZxjzF.cjs → Popover.vue_vue_type_script_setup_true_lang-dvlDTcf1.cjs}

@@ -19,7 +19,7 @@ const _hoisted_5$3 = {
   class: "text-sm font-normal text-gray-600 dark:text-gray-400"
 };
 const _hoisted_6$3 = { class: "flex gap-2" };
-const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   __name: "CardComponent",
   props: {
     title: {},
@@ -72,7 +72,7 @@ const _hoisted_9$2 = {
   class: "flex items-center justify-end gap-2 px-3 py-4"
 };
 const _hoisted_10$1 = { key: 0 };
-const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
   __name: "TableComponent",
   props: {
     properties: {},
@@ -255,7 +255,7 @@ const _hoisted_7$1 = {
 const _hoisted_8$1 = { class: "flex-1 min-w-0" };
 const _hoisted_9$1 = { class: "flex-shrink-0" };
 const _hoisted_10 = { key: 1 };
-const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "MobileList",
   props: {
     items: {},
@@ -303,7 +303,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     const hasEmptySlot = vue.computed(() => !!slots.empty);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
-        __props.selectable && selectableItems.value.length > 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$b, { key: 0 }, {
+        __props.selectable && selectableItems.value.length > 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$d, { key: 0 }, {
           default: vue.withCtx(() => [
             vue.createElementVNode("div", _hoisted_2$4, [
               vue.createVNode(Checkbox_vue_vue_type_script_setup_true_lang._sfc_main, {
@@ -318,7 +318,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
           _: 1
         })) : vue.createCommentVNode("", true),
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
-          return vue.openBlock(), vue.createBlock(_sfc_main$b, {
+          return vue.openBlock(), vue.createBlock(_sfc_main$d, {
             key: getKey(item),
             class: vue.normalizeClass(["hover:shadow-lg transition-all duration-200", {
               "ring-2 ring-primary": isSelected(item)
@@ -553,7 +553,7 @@ function useBreakpoints(breakpoints, options = {}) {
     }
   });
 }
-const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   __name: "ResponsiveList",
   props: {
     items: {},
@@ -608,7 +608,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     const isDesktop = vue.computed(() => breakpoints.greaterOrEqual(props.breakpoint).value);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", null, [
-        !isDesktop.value ? (vue.openBlock(), vue.createBlock(_sfc_main$9, {
+        !isDesktop.value ? (vue.openBlock(), vue.createBlock(_sfc_main$b, {
           key: 0,
           items: __props.items,
           "key-field": __props.keyField,
@@ -633,9 +633,9 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
             vue.renderSlot(_ctx.$slots, "empty")
           ]),
           _: 3
-        }, 8, ["items", "key-field", "selectable", "selected-items", "selectable-filter"])) : (vue.openBlock(), vue.createBlock(_sfc_main$b, { key: 1 }, {
+        }, 8, ["items", "key-field", "selectable", "selected-items", "selectable-filter"])) : (vue.openBlock(), vue.createBlock(_sfc_main$d, { key: 1 }, {
           default: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$a, {
+            vue.createVNode(_sfc_main$c, {
               items: __props.items,
               properties: tableProperties.value,
               "key-field": __props.keyField,
@@ -697,7 +697,7 @@ const _hoisted_9 = {
   key: 1,
   class: "mt-1 text-sm text-red-600"
 };
-const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   __name: "AutocompleteComponent",
   props: {
     modelValue: {},
@@ -906,7 +906,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   __name: "TableAction",
   props: {
     link: {},
@@ -975,7 +975,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   __name: "Button",
   props: {
     variant: { default: "primary" },
@@ -1071,7 +1071,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
 const _hoisted_1$4 = { class: "relative inline-block" };
 const _hoisted_2$2 = ["src", "alt"];
 const _hoisted_3 = { key: 1 };
-const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   __name: "Avatar",
   props: {
     src: {},
@@ -1151,7 +1151,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$3 = ["aria-selected", "disabled", "onClick"];
 const _hoisted_2$1 = { class: "mt-4" };
-const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   __name: "Tabs",
   props: {
     tabs: {},
@@ -1227,7 +1227,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$2 = { role: "tabpanel" };
-const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "TabPanel",
   props: {
     value: {}
@@ -1249,7 +1249,7 @@ const _hoisted_1$1 = {
   key: 2,
   class: "text-sm font-semibold"
 };
-const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   __name: "Stepper",
   props: {
     steps: {},
@@ -1348,7 +1348,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1 = { class: "overflow-hidden" };
 const _hoisted_2 = { class: "space-y-4 p-6" };
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   __name: "CollapsibleCard",
   props: {
     title: {},
@@ -1362,7 +1362,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       isExpanded.value = !isExpanded.value;
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$b, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$d, {
         title: __props.title,
         description: __props.description
       }, {
@@ -1405,16 +1405,176 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-exports._sfc_main = _sfc_main$b;
-exports._sfc_main$1 = _sfc_main$a;
-exports._sfc_main$10 = _sfc_main$1;
-exports._sfc_main$11 = _sfc_main;
-exports._sfc_main$2 = _sfc_main$9;
-exports._sfc_main$3 = _sfc_main$8;
-exports._sfc_main$4 = _sfc_main$7;
-exports._sfc_main$5 = _sfc_main$6;
-exports._sfc_main$6 = _sfc_main$5;
-exports._sfc_main$7 = _sfc_main$4;
-exports._sfc_main$8 = _sfc_main$3;
-exports._sfc_main$9 = _sfc_main$2;
-//# sourceMappingURL=CollapsibleCard.vue_vue_type_script_setup_true_lang-ClNZxjzF.cjs.map
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "Tooltip",
+  props: {
+    content: {},
+    position: { default: "top" },
+    delay: { default: 0 },
+    disabled: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const isVisible = vue.ref(false);
+    let timeoutId = null;
+    const show = () => {
+      if (props.disabled) return;
+      if (props.delay > 0) {
+        timeoutId = setTimeout(() => {
+          isVisible.value = true;
+        }, props.delay);
+      } else {
+        isVisible.value = true;
+      }
+    };
+    const hide = () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+      isVisible.value = false;
+    };
+    const positionClasses = vue.computed(() => {
+      const base = "absolute z-50 px-2 py-1 text-xs font-medium text-white bg-gray-900 rounded shadow-lg whitespace-nowrap dark:bg-gray-700";
+      const arrow = "after:absolute after:border-4 after:border-transparent";
+      switch (props.position) {
+        case "top":
+          return `${base} ${arrow} bottom-full left-1/2 -translate-x-1/2 mb-2 after:top-full after:left-1/2 after:-translate-x-1/2 after:border-t-gray-900 dark:after:border-t-gray-700`;
+        case "bottom":
+          return `${base} ${arrow} top-full left-1/2 -translate-x-1/2 mt-2 after:bottom-full after:left-1/2 after:-translate-x-1/2 after:border-b-gray-900 dark:after:border-b-gray-700`;
+        case "left":
+          return `${base} ${arrow} right-full top-1/2 -translate-y-1/2 mr-2 after:left-full after:top-1/2 after:-translate-y-1/2 after:border-l-gray-900 dark:after:border-l-gray-700`;
+        case "right":
+          return `${base} ${arrow} left-full top-1/2 -translate-y-1/2 ml-2 after:right-full after:top-1/2 after:-translate-y-1/2 after:border-r-gray-900 dark:after:border-r-gray-700`;
+        default:
+          return base;
+      }
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: "relative inline-block",
+        onMouseenter: show,
+        onMouseleave: hide,
+        onFocus: show,
+        onBlur: hide
+      }, [
+        vue.renderSlot(_ctx.$slots, "default"),
+        vue.createVNode(vue.Transition, {
+          "enter-active-class": "transition duration-150 ease-out",
+          "enter-from-class": "opacity-0 scale-95",
+          "enter-to-class": "opacity-100 scale-100",
+          "leave-active-class": "transition duration-100 ease-in",
+          "leave-from-class": "opacity-100 scale-100",
+          "leave-to-class": "opacity-0 scale-95"
+        }, {
+          default: vue.withCtx(() => [
+            isVisible.value && __props.content ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: vue.normalizeClass(positionClasses.value),
+              role: "tooltip"
+            }, vue.toDisplayString(__props.content), 3)) : vue.createCommentVNode("", true)
+          ]),
+          _: 1
+        })
+      ], 32);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "Popover",
+  props: {
+    position: { default: "bottom" },
+    hover: { type: Boolean, default: false },
+    teleport: { type: Boolean, default: true },
+    width: { default: "auto" }
+  },
+  setup(__props) {
+    const props = __props;
+    const triggerRef = vue.ref();
+    const popoverRef = vue.ref();
+    const { isOpen, dropdownStyle, toggle, close, open } = useDropdown.useDropdown(triggerRef, popoverRef, {
+      teleport: props.teleport,
+      gap: 8
+    });
+    const handleTrigger = () => {
+      if (!props.hover) {
+        toggle();
+      }
+    };
+    const handleMouseEnter = () => {
+      if (props.hover) {
+        open();
+      }
+    };
+    const handleMouseLeave = () => {
+      if (props.hover) {
+        close();
+      }
+    };
+    const widthClasses = {
+      auto: "w-auto min-w-[12rem]",
+      sm: "w-48",
+      md: "w-64",
+      lg: "w-80"
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: "relative inline-block",
+        onMouseenter: handleMouseEnter,
+        onMouseleave: handleMouseLeave
+      }, [
+        vue.createElementVNode("div", {
+          ref_key: "triggerRef",
+          ref: triggerRef,
+          onClick: handleTrigger
+        }, [
+          vue.renderSlot(_ctx.$slots, "trigger")
+        ], 512),
+        (vue.openBlock(), vue.createBlock(vue.Teleport, {
+          to: "body",
+          disabled: !__props.teleport
+        }, [
+          vue.createVNode(vue.Transition, {
+            "enter-active-class": "transition duration-150 ease-out",
+            "enter-from-class": "opacity-0 scale-95",
+            "enter-to-class": "opacity-100 scale-100",
+            "leave-active-class": "transition duration-100 ease-in",
+            "leave-from-class": "opacity-100 scale-100",
+            "leave-to-class": "opacity-0 scale-95"
+          }, {
+            default: vue.withCtx(() => [
+              vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                ref_key: "popoverRef",
+                ref: popoverRef,
+                style: vue.normalizeStyle(vue.unref(dropdownStyle)),
+                class: vue.normalizeClass([
+                  "z-[9999] rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-800",
+                  widthClasses[__props.width]
+                ])
+              }, [
+                vue.renderSlot(_ctx.$slots, "default", { close: vue.unref(close) })
+              ], 6)) : vue.createCommentVNode("", true)
+            ]),
+            _: 3
+          })
+        ], 8, ["disabled"]))
+      ], 32);
+    };
+  }
+});
+exports._sfc_main = _sfc_main$d;
+exports._sfc_main$1 = _sfc_main$c;
+exports._sfc_main$10 = _sfc_main$3;
+exports._sfc_main$11 = _sfc_main$2;
+exports._sfc_main$12 = _sfc_main$1;
+exports._sfc_main$13 = _sfc_main;
+exports._sfc_main$2 = _sfc_main$b;
+exports._sfc_main$3 = _sfc_main$a;
+exports._sfc_main$4 = _sfc_main$9;
+exports._sfc_main$5 = _sfc_main$8;
+exports._sfc_main$6 = _sfc_main$7;
+exports._sfc_main$7 = _sfc_main$6;
+exports._sfc_main$8 = _sfc_main$5;
+exports._sfc_main$9 = _sfc_main$4;
+//# sourceMappingURL=Popover.vue_vue_type_script_setup_true_lang-dvlDTcf1.cjs.map