cisse-vue-ui 0.2.7 → 0.3.0

package/dist/{CollapsibleCard.vue_vue_type_script_setup_true_lang-Y1wvT4aS.js → Popover.vue_vue_type_script_setup_true_lang-Q7gRZsT9.js}

@@ -1,6 +1,6 @@
 import { defineComponent, createElementBlock, openBlock, createCommentVNode, renderSlot, createElementVNode, createTextVNode, toDisplayString, useSlots, computed, createVNode, Fragment, renderList, normalizeClass, createBlock, resolveDynamicComponent, withCtx, onMounted, nextTick, getCurrentInstance, getCurrentScope, hasInjectionContext, inject, watch, shallowRef, toValue, watchEffect, unref, createSlots, ref, withDirectives, vModelText, withModifiers, Teleport, Transition, normalizeStyle, resolveComponent, mergeProps, provide, vShow } from "vue";
-import { _ as _sfc_main$c } from "./Checkbox.vue_vue_type_script_setup_true_lang-B-nLCCNY.js";
-import { e as _sfc_main$d, d as _sfc_main$e, c as _sfc_main$f, b as _sfc_main$g, a as _sfc_main$h } from "./BadgeType.vue_vue_type_script_setup_true_lang-CnB5eNEM.js";
+import { _ as _sfc_main$e } from "./Checkbox.vue_vue_type_script_setup_true_lang-B-nLCCNY.js";
+import { e as _sfc_main$f, d as _sfc_main$g, c as _sfc_main$h, b as _sfc_main$i, a as _sfc_main$j } from "./BadgeType.vue_vue_type_script_setup_true_lang-CnB5eNEM.js";
 import { Icon } from "@iconify/vue";
 import { u as useDropdown } from "./useDropdown-iVu14E6s.js";
 const _hoisted_1$8 = { class: "flex flex-col overflow-hidden rounded-lg bg-white shadow-md dark:bg-slate-950" };
@@ -18,7 +18,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__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "CardComponent",
   props: {
     title: {},
@@ -71,7 +71,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__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "TableComponent",
   props: {
     properties: {},
@@ -87,14 +87,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const typeComponents = {
-      text: _sfc_main$h,
-      number: _sfc_main$g,
-      date: _sfc_main$f,
-      boolean: _sfc_main$e,
-      badge: _sfc_main$d
+      text: _sfc_main$j,
+      number: _sfc_main$i,
+      date: _sfc_main$h,
+      boolean: _sfc_main$g,
+      badge: _sfc_main$f
     };
     const getTypeComponent = (type = "text") => {
-      return typeComponents[type] || _sfc_main$h;
+      return typeComponents[type] || _sfc_main$j;
     };
     const visibleProperties = computed(() => props.properties.filter((p) => !p.hidden));
     const getKey = (item) => {
@@ -166,7 +166,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             createElementVNode("thead", _hoisted_4$2, [
               createElementVNode("tr", null, [
                 __props.selectable ? (openBlock(), createElementBlock("th", _hoisted_5$2, [
-                  createVNode(_sfc_main$c, {
+                  createVNode(_sfc_main$e, {
                     "model-value": allSelected.value,
                     indeterminate: someSelected.value,
                     disabled: selectableItems.value.length === 0,
@@ -193,7 +193,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                   class: normalizeClass(["hover:bg-black/5 dark:hover:bg-white/5 transition-colors", { "bg-primary/5 dark:bg-primary/10": isSelected(item) }])
                 }, [
                   __props.selectable ? (openBlock(), createElementBlock("td", _hoisted_8$2, [
-                    isSelectable(item) ? (openBlock(), createBlock(_sfc_main$c, {
+                    isSelectable(item) ? (openBlock(), createBlock(_sfc_main$e, {
                       key: 0,
                       "model-value": isSelected(item),
                       "onUpdate:modelValue": ($event) => handleSelect(item)
@@ -254,7 +254,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__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "MobileList",
   props: {
     items: {},
@@ -302,10 +302,10 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const hasEmptySlot = computed(() => !!slots.empty);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$6, [
-        __props.selectable && selectableItems.value.length > 0 ? (openBlock(), createBlock(_sfc_main$b, { key: 0 }, {
+        __props.selectable && selectableItems.value.length > 0 ? (openBlock(), createBlock(_sfc_main$d, { key: 0 }, {
           default: withCtx(() => [
             createElementVNode("div", _hoisted_2$4, [
-              createVNode(_sfc_main$c, {
+              createVNode(_sfc_main$e, {
                 "model-value": allSelected.value,
                 indeterminate: someSelected.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("selectAll"))
@@ -317,7 +317,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           _: 1
         })) : createCommentVNode("", true),
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
-          return openBlock(), createBlock(_sfc_main$b, {
+          return openBlock(), createBlock(_sfc_main$d, {
             key: getKey(item),
             class: normalizeClass(["hover:shadow-lg transition-all duration-200", {
               "ring-2 ring-primary": isSelected(item)
@@ -326,7 +326,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             default: withCtx(() => [
               createElementVNode("div", _hoisted_5$1, [
                 __props.selectable ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
-                  isSelectable(item) ? (openBlock(), createBlock(_sfc_main$c, {
+                  isSelectable(item) ? (openBlock(), createBlock(_sfc_main$e, {
                     key: 0,
                     "model-value": isSelected(item),
                     "onUpdate:modelValue": ($event) => handleSelect(item)
@@ -552,7 +552,7 @@ function useBreakpoints(breakpoints, options = {}) {
     }
   });
 }
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "ResponsiveList",
   props: {
     items: {},
@@ -607,7 +607,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const isDesktop = computed(() => breakpoints.greaterOrEqual(props.breakpoint).value);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        !isDesktop.value ? (openBlock(), createBlock(_sfc_main$9, {
+        !isDesktop.value ? (openBlock(), createBlock(_sfc_main$b, {
           key: 0,
           items: __props.items,
           "key-field": __props.keyField,
@@ -632,9 +632,9 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "empty")
           ]),
           _: 3
-        }, 8, ["items", "key-field", "selectable", "selected-items", "selectable-filter"])) : (openBlock(), createBlock(_sfc_main$b, { key: 1 }, {
+        }, 8, ["items", "key-field", "selectable", "selected-items", "selectable-filter"])) : (openBlock(), createBlock(_sfc_main$d, { key: 1 }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$a, {
+            createVNode(_sfc_main$c, {
               items: __props.items,
               properties: tableProperties.value,
               "key-field": __props.keyField,
@@ -696,7 +696,7 @@ const _hoisted_9 = {
   key: 1,
   class: "mt-1 text-sm text-red-600"
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "AutocompleteComponent",
   props: {
     modelValue: {},
@@ -905,7 +905,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "TableAction",
   props: {
     link: {},
@@ -974,7 +974,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "Button",
   props: {
     variant: { default: "primary" },
@@ -1070,7 +1070,7 @@ const _sfc_main$5 = /* @__PURE__ */ 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__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "Avatar",
   props: {
     src: {},
@@ -1150,7 +1150,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$3 = ["aria-selected", "disabled", "onClick"];
 const _hoisted_2$1 = { class: "mt-4" };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "Tabs",
   props: {
     tabs: {},
@@ -1226,7 +1226,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$2 = { role: "tabpanel" };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "TabPanel",
   props: {
     value: {}
@@ -1248,7 +1248,7 @@ const _hoisted_1$1 = {
   key: 2,
   class: "text-sm font-semibold"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "Stepper",
   props: {
     steps: {},
@@ -1347,7 +1347,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1 = { class: "overflow-hidden" };
 const _hoisted_2 = { class: "space-y-4 p-6" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "CollapsibleCard",
   props: {
     title: {},
@@ -1361,7 +1361,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       isExpanded.value = !isExpanded.value;
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$b, {
+      return openBlock(), createBlock(_sfc_main$d, {
         title: __props.title,
         description: __props.description
       }, {
@@ -1404,18 +1404,178 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "Tooltip",
+  props: {
+    content: {},
+    position: { default: "top" },
+    delay: { default: 0 },
+    disabled: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const isVisible = 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 = 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 openBlock(), createElementBlock("div", {
+        class: "relative inline-block",
+        onMouseenter: show,
+        onMouseleave: hide,
+        onFocus: show,
+        onBlur: hide
+      }, [
+        renderSlot(_ctx.$slots, "default"),
+        createVNode(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: withCtx(() => [
+            isVisible.value && __props.content ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(positionClasses.value),
+              role: "tooltip"
+            }, toDisplayString(__props.content), 3)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        })
+      ], 32);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ 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 = ref();
+    const popoverRef = ref();
+    const { isOpen, dropdownStyle, toggle, close, open } = 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 openBlock(), createElementBlock("div", {
+        class: "relative inline-block",
+        onMouseenter: handleMouseEnter,
+        onMouseleave: handleMouseLeave
+      }, [
+        createElementVNode("div", {
+          ref_key: "triggerRef",
+          ref: triggerRef,
+          onClick: handleTrigger
+        }, [
+          renderSlot(_ctx.$slots, "trigger")
+        ], 512),
+        (openBlock(), createBlock(Teleport, {
+          to: "body",
+          disabled: !__props.teleport
+        }, [
+          createVNode(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: withCtx(() => [
+              unref(isOpen) ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                ref_key: "popoverRef",
+                ref: popoverRef,
+                style: normalizeStyle(unref(dropdownStyle)),
+                class: 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]
+                ])
+              }, [
+                renderSlot(_ctx.$slots, "default", { close: unref(close) })
+              ], 6)) : createCommentVNode("", true)
+            ]),
+            _: 3
+          })
+        ], 8, ["disabled"]))
+      ], 32);
+    };
+  }
+});
 export {
-  _sfc_main$b as _,
-  _sfc_main$a as a,
-  _sfc_main$9 as b,
-  _sfc_main$8 as c,
-  _sfc_main$7 as d,
-  _sfc_main$6 as e,
-  _sfc_main$5 as f,
-  _sfc_main$4 as g,
-  _sfc_main$3 as h,
-  _sfc_main$2 as i,
-  _sfc_main$1 as j,
-  _sfc_main as k
+  _sfc_main$d as _,
+  _sfc_main$c as a,
+  _sfc_main$b as b,
+  _sfc_main$a as c,
+  _sfc_main$9 as d,
+  _sfc_main$8 as e,
+  _sfc_main$7 as f,
+  _sfc_main$6 as g,
+  _sfc_main$5 as h,
+  _sfc_main$4 as i,
+  _sfc_main$3 as j,
+  _sfc_main$2 as k,
+  _sfc_main$1 as l,
+  _sfc_main as m
 };
-//# sourceMappingURL=CollapsibleCard.vue_vue_type_script_setup_true_lang-Y1wvT4aS.js.map
+//# sourceMappingURL=Popover.vue_vue_type_script_setup_true_lang-Q7gRZsT9.js.map