@bobbykim/manguito-theme 0.28.3 → 1.0.1

package/dist/directives.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./index-M2bUcfcK.cjs"),a=require("vue"),g=(t,e)=>{if(t.tagName==="A"){const r=t.getAttribute("href");return r?r.charAt(0)==="#"?r.substring(1):r:null}return e||null},v=t=>t?document.getElementById(t):null,f=t=>t.hasAttribute("visible"),u=t=>{const r=t.getAttribute("visible")==="true"?"false":"true";t.setAttribute("visible",r)},m=t=>{const e=`div[accordion="${t}"]`;return Array.from(document.querySelectorAll(e))},_=(t,e)=>{m(e).forEach(o=>{o.id===t.id?u(o):o.getAttribute("visible")==="true"&&o.setAttribute("visible","false")})},A=t=>{u(t)},C=t=>e=>{e.preventDefault();const r=e.target,o=g(r,t),l=v(o);if(!l){console.warn(`[v-collapse] Target element not found: ${o}`);return}if(!f(l)){console.warn(`[v-collapse] Target element missing 'visible' attribute: ${o}`);return}const n=l.getAttribute("accordion");n?_(l,n):A(l)},h={mounted(t,e){t.__HandleToggler=C(e.arg),t.addEventListener("click",t.__HandleToggler)},unmounted(t){t.__HandleToggler&&(t.removeEventListener("click",t.__HandleToggler),delete t.__HandleToggler)}},H=t=>e=>{e.preventDefault();const r=e.target,o=g(r,t),l=v(o);if(!l){console.warn(`[v-toggle] Target element not found: ${o}`);return}if(!f(l)){console.warn(`[v-toggle] Target element mission visible 'visible' attribute: ${o}`);return}u(l)},b={mounted(t,e){t.__ClickToggleHandler=H(e.arg),t.addEventListener("click",t.__ClickToggleHandler)},unmounted(t){t.__ClickToggleHandler&&(t.removeEventListener("click",t.__ClickToggleHandler),delete t.__ClickToggleHandler)}},s=(t,e,r,o)=>{if(t.hasAttribute(r))return t.getAttribute(r);if(typeof e.value=="object"&&e.value!==null&&o in e.value)return e.value[o]},k=(t,e)=>{if(t.hasAttribute("title"))return t.getAttribute("title")||void 0;if(typeof e.value=="string")return e.value;if(typeof e.value=="object"&&e.value?.title)return e.value.title},E=t=>{const e=Object.keys(t.modifiers);return e.length>0?e[0]:void 0},x=(t,e)=>{t.classList.add("relative","group","overflow-visible");const r=k(t,e),o=s(t,e,"color","color"),l=s(t,e,"text-color","textColor"),n=s(t,e,"tooltip-width","width"),c=typeof e.value=="object"?e.value.className:void 0,i=E(e);console.log(`color: ${o}, txt color: ${l}, width: ${n}`);const T=a.createVNode(d.tooltip,{direction:i,title:r,color:o,textColor:l,width:n,customClass:c});a.render(T,t)},w=t=>{a.render(null,t)},p={mounted(t,e){t.__HandleTooltip=r=>x(t,r),t.__UnmountTooltip=()=>w(t),t.__HandleTooltip(e)},updated(t,e,r,o){const l=e.value!==e.oldValue;let n=!1;const c=o.dirs?.find(i=>i.dir===p);if(c){const i=c.arg;e.arg!==i&&(n=!0)}(l||n)&&t.__HandleTooltip(e)},unmounted(t){t.__UnmountTooltip()}},y="pio!";exports.vClickOutside=d.vClickOutside;exports.testExport=y;exports.vCollapse=h;exports.vToggle=b;exports.vTooltip=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./index-D9hDl4no.cjs"),a=require("vue"),g=(t,e)=>{if(t.tagName==="A"){const o=t.getAttribute("href");return o?o.charAt(0)==="#"?o.substring(1):o:null}return e||null},v=t=>t?document.getElementById(t):null,p=t=>t.hasAttribute("visible"),u=t=>{const o=t.getAttribute("visible")==="true"?"false":"true";t.setAttribute("visible",o)},m=t=>{const e=`div[accordion="${t}"]`;return Array.from(document.querySelectorAll(e))},A=(t,e)=>{m(e).forEach(r=>{r.id===t.id?u(r):r.getAttribute("visible")==="true"&&r.setAttribute("visible","false")})},C=t=>{u(t)},b=t=>e=>{e.preventDefault();const o=e.target,r=g(o,t),l=v(r);if(!l){console.warn(`[v-collapse] Target element not found: ${r}`);return}if(!p(l)){console.warn(`[v-collapse] Target element missing 'visible' attribute: ${r}`);return}const n=l.getAttribute("accordion");n?A(l,n):C(l)},h={mounted(t,e){t.__HandleToggler=b(e.arg),t.addEventListener("click",t.__HandleToggler)},unmounted(t){t.__HandleToggler&&(t.removeEventListener("click",t.__HandleToggler),delete t.__HandleToggler)}},H=t=>e=>{e.preventDefault();const o=e.target,r=g(o,t),l=v(r);if(!l){console.warn(`[v-toggle] Target element not found: ${r}`);return}if(!p(l)){console.warn(`[v-toggle] Target element mission visible 'visible' attribute: ${r}`);return}u(l)},k={mounted(t,e){t.__ClickToggleHandler=H(e.arg),t.addEventListener("click",t.__ClickToggleHandler)},unmounted(t){t.__ClickToggleHandler&&(t.removeEventListener("click",t.__ClickToggleHandler),delete t.__ClickToggleHandler)}};let y=0;const s=(t,e,o,r)=>{if(t.hasAttribute(o))return t.getAttribute(o);if(typeof e.value=="object"&&e.value!==null&&r in e.value)return e.value[r]},E=(t,e)=>{if(t.hasAttribute("title"))return t.getAttribute("title")||void 0;if(typeof e.value=="string")return e.value;if(typeof e.value=="object"&&e.value?.title)return e.value.title},I=t=>{const e=Object.keys(t.modifiers);return e.length>0?e[0]:void 0},w=(t,e)=>{t.classList.add("relative","group","overflow-visible"),t.__TooltipId||(t.__TooltipId=`mcl-tooltip-${++y}`);const o=t.__TooltipId,r=E(t,e),l=s(t,e,"color","color"),n=s(t,e,"text-color","textColor"),c=s(t,e,"tooltip-width","width"),i=typeof e.value=="object"?e.value.customClass:void 0,_=I(e),T=a.createVNode(d.tooltip,{id:o,direction:_,content:r,color:l,textColor:n,width:c,customClass:i});a.render(T,t),t.setAttribute("aria-describedby",o)},x=t=>{a.render(null,t),t.removeAttribute("aria-describedby"),delete t.__TooltipId},f={mounted(t,e){t.__HandleTooltip=o=>w(t,o),t.__UnmountTooltip=()=>x(t),t.__HandleTooltip(e)},updated(t,e,o,r){const l=e.value!==e.oldValue;let n=!1;const c=r.dirs?.find(i=>i.dir===f);if(c){const i=c.arg;e.arg!==i&&(n=!0)}(l||n)&&t.__HandleTooltip(e)},unmounted(t){t.__UnmountTooltip()}};exports.vClickOutside=d.vClickOutside;exports.vCollapse=h;exports.vToggle=k;exports.vTooltip=f;

package/dist/directives.d.ts

@@ -36,8 +36,6 @@ declare interface CollapseElement extends HTMLElement {
 
 declare type ColorPalette = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'light-1' | 'light-2' | 'light-3' | 'light-4' | 'dark-1' | 'dark-2' | 'dark-3' | 'dark-4' | 'black' | 'white' | 'transparent';
 
-export declare const testExport = "pio!";
-
 /**
  * Extends HTMLElement to include the custom handler attached by the directive
  */
@@ -48,6 +46,7 @@ declare interface ToggleElement extends HTMLElement {
 declare interface TooltipElementType extends HTMLElement {
     __HandleTooltip: (binding: DirectiveBinding<TooltipValueType>) => void;
     __UnmountTooltip: () => void;
+    __TooltipId?: string;
 }
 
 export declare interface TooltipValueObjectType {
@@ -55,7 +54,7 @@ export declare interface TooltipValueObjectType {
     color?: ColorPalette;
     textColor?: ColorPalette;
     width?: number | string;
-    className?: string;
+    customClass?: string;
 }
 
 declare type TooltipValueType = TooltipValueObjectType | string;
@@ -76,43 +75,47 @@ declare type TooltipValueType = TooltipValueObjectType | string;
 export declare const vClickOutside: Directive<ClickOutsideElement, ClickOutsideValue>;
 
 /**
- * Vue directive for collapsible elements with accordion support
+ * Vue directive for collapsible elements with accordion support.
  *
- * Handles both simple collapse/expand behavior and accordion groups where
- * only one item can be open at a time.
+ * @deprecated `MclCollapseA` and `MclCollapseB` now manage state internally via the
+ * `useCollapseState` composable. This directive no longer has any effect on those
+ * components and will be removed in a future release.
  *
- * Works with the `observeVisibleAttr` composable for reactive state management.
+ * Migrate accordion groups to the `AccordionGroup` wrapper component:
  *
  * @example
- * // Simple collapsible
- * <button v-collapse:content1>Toggle</button>
- * <div id="content1" visible="false">Collapsible content</div>
+ * // Preferred: AccordionGroup wrapper
+ * import { AccordionGroup } from '@bobbykim/manguito-theme'
+ * import { MclCollapseA } from '@bobbykim/mcl-collapse'
  *
- * @example
- * // Accordion group
- * <button v-collapse:item1>Item 1</button>
- * <div id="item1" visible="false" accordion="myAccordion">Content 1</div>
+ * <AccordionGroup>
+ *   <MclCollapseA collapse-id="item1" title="Item 1">...</MclCollapseA>
+ *   <MclCollapseA collapse-id="item2" title="Item 2">...</MclCollapseA>
+ * </AccordionGroup>
  *
- * <button v-collapse:item2>Item 2</button>
- * <div id="item2" visible="false" accordion="myAccordion">Content 2</div>
+ * @example
+ * // Preferred: standalone collapse (no wrapper needed)
+ * <MclCollapseA collapse-id="item1" title="Item 1">...</MclCollapseA>
  *
  */
 export declare const vCollapse: Directive<CollapseElement>;
 
 /**
- * Vue directive for toggling visibility of elements via the 'visible' attribute
+ * Vue directive for toggling visibility of elements via the 'visible' attribute.
  *
- * Used internally by Modal and Sidebar components to control their visibility state.
+ * @deprecated Use the `defineExpose` API (`modalRef.open()`, `modalRef.toggle()`) or bind
+ * the `:visible` prop directly instead. This directive bypasses Vue's reactivity system
+ * and is not SSR-compatible. It will be removed in a future release.
  *
  * @example
- * // With directive argument
- * <button v-toggle:myModal>Open Modal</button>
- * <div id="myModal" visible="false">Modal content</div>
+ * // Preferred: defineExpose ref
+ * const modalRef = ref()
+ * <button @click="modalRef.open()">Open Modal</button>
+ * <Modal ref="modalRef" />
  *
  * @example
- * // With anchor tag href
- * <a href="#mySidebar" v-toggle>Toggle Sidebar</a>
- * <aside id="mySidebar" visible="false">Sidebar content</aside>
+ * // Preferred: visible prop
+ * <Modal :visible="isOpen" />
  *
  */
 export declare const vToggle: Directive<ToggleElement>;

package/dist/directives.js

@@ -1,117 +1,116 @@
-import { t as p } from "./index-DHpsV8uC.js";
-import { v as N } from "./index-DHpsV8uC.js";
+import { t as _ } from "./index-CYEzkRix.js";
+import { v as N } from "./index-CYEzkRix.js";
 import { createVNode as m, render as u } from "vue";
 const d = (t, e) => {
   if (t.tagName === "A") {
-    const r = t.getAttribute("href");
-    return r ? r.charAt(0) === "#" ? r.substring(1) : r : null;
+    const o = t.getAttribute("href");
+    return o ? o.charAt(0) === "#" ? o.substring(1) : o : null;
   }
   return e || null;
 }, g = (t) => t ? document.getElementById(t) : null, v = (t) => t.hasAttribute("visible"), a = (t) => {
-  const r = t.getAttribute("visible") === "true" ? "false" : "true";
-  t.setAttribute("visible", r);
+  const o = t.getAttribute("visible") === "true" ? "false" : "true";
+  t.setAttribute("visible", o);
 }, T = (t) => {
   const e = `div[accordion="${t}"]`;
   return Array.from(document.querySelectorAll(e));
-}, _ = (t, e) => {
-  T(e).forEach((o) => {
-    o.id === t.id ? a(o) : o.getAttribute("visible") === "true" && o.setAttribute("visible", "false");
+}, A = (t, e) => {
+  T(e).forEach((r) => {
+    r.id === t.id ? a(r) : r.getAttribute("visible") === "true" && r.setAttribute("visible", "false");
   });
-}, A = (t) => {
+}, C = (t) => {
   a(t);
-}, h = (t) => (e) => {
+}, b = (t) => (e) => {
   e.preventDefault();
-  const r = e.target, o = d(r, t), l = g(o);
+  const o = e.target, r = d(o, t), l = g(r);
   if (!l) {
-    console.warn(`[v-collapse] Target element not found: ${o}`);
+    console.warn(`[v-collapse] Target element not found: ${r}`);
     return;
   }
   if (!v(l)) {
     console.warn(
-      `[v-collapse] Target element missing 'visible' attribute: ${o}`
+      `[v-collapse] Target element missing 'visible' attribute: ${r}`
     );
     return;
   }
   const n = l.getAttribute("accordion");
-  n ? _(l, n) : A(l);
-}, V = {
+  n ? A(l, n) : C(l);
+}, $ = {
   mounted(t, e) {
-    t.__HandleToggler = h(e.arg), t.addEventListener("click", t.__HandleToggler);
+    t.__HandleToggler = b(e.arg), t.addEventListener("click", t.__HandleToggler);
   },
   unmounted(t) {
     t.__HandleToggler && (t.removeEventListener("click", t.__HandleToggler), delete t.__HandleToggler);
   }
-}, C = (t) => (e) => {
+}, h = (t) => (e) => {
   e.preventDefault();
-  const r = e.target, o = d(r, t), l = g(o);
+  const o = e.target, r = d(o, t), l = g(r);
   if (!l) {
-    console.warn(`[v-toggle] Target element not found: ${o}`);
+    console.warn(`[v-toggle] Target element not found: ${r}`);
     return;
   }
   if (!v(l)) {
     console.warn(
-      `[v-toggle] Target element mission visible 'visible' attribute: ${o}`
+      `[v-toggle] Target element mission visible 'visible' attribute: ${r}`
     );
     return;
   }
   a(l);
-}, $ = {
+}, D = {
   mounted(t, e) {
-    t.__ClickToggleHandler = C(e.arg), t.addEventListener("click", t.__ClickToggleHandler);
+    t.__ClickToggleHandler = h(e.arg), t.addEventListener("click", t.__ClickToggleHandler);
   },
   unmounted(t) {
     t.__ClickToggleHandler && (t.removeEventListener("click", t.__ClickToggleHandler), delete t.__ClickToggleHandler);
   }
-}, s = (t, e, r, o) => {
-  if (t.hasAttribute(r))
-    return t.getAttribute(r);
-  if (typeof e.value == "object" && e.value !== null && o in e.value)
-    return e.value[o];
-}, H = (t, e) => {
+};
+let H = 0;
+const s = (t, e, o, r) => {
+  if (t.hasAttribute(o))
+    return t.getAttribute(o);
+  if (typeof e.value == "object" && e.value !== null && r in e.value)
+    return e.value[r];
+}, k = (t, e) => {
   if (t.hasAttribute("title"))
     return t.getAttribute("title") || void 0;
   if (typeof e.value == "string")
     return e.value;
   if (typeof e.value == "object" && e.value?.title)
     return e.value.title;
-}, k = (t) => {
+}, E = (t) => {
   const e = Object.keys(t.modifiers);
   return e.length > 0 ? e[0] : void 0;
-}, b = (t, e) => {
-  t.classList.add("relative", "group", "overflow-visible");
-  const r = H(t, e), o = s(t, e, "color", "color"), l = s(
+}, I = (t, e) => {
+  t.classList.add("relative", "group", "overflow-visible"), t.__TooltipId || (t.__TooltipId = `mcl-tooltip-${++H}`);
+  const o = t.__TooltipId, r = k(t, e), l = s(t, e, "color", "color"), n = s(
     t,
     e,
     "text-color",
     "textColor"
-  ), n = s(
+  ), c = s(
     t,
     e,
     "tooltip-width",
     "width"
-  ), c = typeof e.value == "object" ? e.value.className : void 0, i = k(e);
-  console.log(
-    `color: ${o}, txt color: ${l}, width: ${n}`
-  );
-  const f = m(p, {
-    direction: i,
-    title: r,
-    color: o,
-    textColor: l,
-    width: n,
-    customClass: c
+  ), i = typeof e.value == "object" ? e.value.customClass : void 0, p = E(e), f = m(_, {
+    id: o,
+    direction: p,
+    content: r,
+    color: l,
+    textColor: n,
+    width: c,
+    customClass: i
   });
-  u(f, t);
-}, E = (t) => {
-  u(null, t);
-}, x = {
+  u(f, t), t.setAttribute("aria-describedby", o);
+}, y = (t) => {
+  u(null, t), t.removeAttribute("aria-describedby"), delete t.__TooltipId;
+}, w = {
   mounted(t, e) {
-    t.__HandleTooltip = (r) => b(t, r), t.__UnmountTooltip = () => E(t), t.__HandleTooltip(e);
+    t.__HandleTooltip = (o) => I(t, o), t.__UnmountTooltip = () => y(t), t.__HandleTooltip(e);
   },
-  updated(t, e, r, o) {
+  updated(t, e, o, r) {
     const l = e.value !== e.oldValue;
     let n = !1;
-    const c = o.dirs?.find((i) => i.dir === x);
+    const c = r.dirs?.find((i) => i.dir === w);
     if (c) {
       const i = c.arg;
       e.arg !== i && (n = !0);
@@ -121,11 +120,10 @@ const d = (t, e) => {
   unmounted(t) {
     t.__UnmountTooltip();
   }
-}, I = "pio!";
+};
 export {
-  I as testExport,
   N as vClickOutside,
-  V as vCollapse,
-  $ as vToggle,
-  x as vTooltip
+  $ as vCollapse,
+  D as vToggle,
+  w as vTooltip
 };

package/dist/{getGlassmorphismClass-CKSrH9Jg.cjs → getGlassmorphismClass-CVLAjoa8.cjs}

@@ -1 +1 @@
-"use strict";const a=require("vue"),c=require("./index-CU3f0thH.cjs"),t=a.defineComponent({setup(e,{slots:l}){const s=a.ref(!1);return a.onMounted(()=>{s.value=!0}),()=>s.value&&l.default?l.default():null}}),m={xs:"backdrop-blur-xs",sm:"backdrop-blur-sm",md:"backdrop-blur-md",lg:"backdrop-blur-lg",xl:"backdrop-blur-xl"},d={primary:"mcl-glass-primary",secondary:"mcl-glass-secondary",success:"mcl-glass-success",info:"mcl-glass-info",danger:"mcl-glass-danger",warning:"mcl-glass-warning","light-1":"mcl-glass-light-1","light-2":"mcl-glass-light-2","light-3":"mcl-glass-light-3","light-4":"mcl-glass-light-4","dark-1":"mcl-glass-dark-1","dark-2":"mcl-glass-dark-2","dark-3":"mcl-glass-dark-3","dark-4":"mcl-glass-dark-4",black:"mcl-glass-black",white:"mcl-glass-white",transparent:"mcl-glass-transparent"},n={10:"mcl-depth-10",20:"mcl-depth-20",30:"mcl-depth-30",40:"mcl-depth-40",50:"mcl-depth-50",60:"mcl-depth-60",70:"mcl-depth-70",80:"mcl-depth-80",90:"mcl-depth-90",100:"mcl-depth-100"},g=(e,l,s,r=10)=>["mcl-glassmorphism",d[e],m[l],c.generateClass("BGOPACITY",s),n[r]].filter(Boolean).join(" ");exports.ClientSideRender=t;exports.getGlassmorphismClass=g;
+"use strict";const a=require("vue"),c=require("./index-DPCdWvOi.cjs"),t=a.defineComponent({setup(e,{slots:l}){const s=a.ref(!1);return a.onMounted(()=>{s.value=!0}),()=>s.value&&l.default?l.default():null}}),m={xs:"backdrop-blur-xs",sm:"backdrop-blur-sm",md:"backdrop-blur-md",lg:"backdrop-blur-lg",xl:"backdrop-blur-xl"},n={primary:"mcl-glass-primary",secondary:"mcl-glass-secondary",success:"mcl-glass-success",info:"mcl-glass-info",danger:"mcl-glass-danger",warning:"mcl-glass-warning","light-1":"mcl-glass-light-1","light-2":"mcl-glass-light-2","light-3":"mcl-glass-light-3","light-4":"mcl-glass-light-4","dark-1":"mcl-glass-dark-1","dark-2":"mcl-glass-dark-2","dark-3":"mcl-glass-dark-3","dark-4":"mcl-glass-dark-4",black:"mcl-glass-black",white:"mcl-glass-white",transparent:"mcl-glass-transparent"},d={10:"mcl-depth-10",20:"mcl-depth-20",30:"mcl-depth-30",40:"mcl-depth-40",50:"mcl-depth-50",60:"mcl-depth-60",70:"mcl-depth-70",80:"mcl-depth-80",90:"mcl-depth-90",100:"mcl-depth-100"},g=(e,l,s,r=10)=>["mcl-glassmorphism",n[e],m[l],c.generateClass.bgOpacityVariant({opacity:s}),d[r]].filter(Boolean).join(" ");exports.ClientSideRender=t;exports.getGlassmorphismClass=g;

package/dist/{getGlassmorphismClass-C-7frTJB.js → getGlassmorphismClass-MdsD9yII.js}

@@ -1,5 +1,5 @@
 import { defineComponent as c, ref as e, onMounted as t } from "vue";
-import { g as m } from "./index-DoK_iF2I.js";
+import { g as m } from "./index-CaGu958U.js";
 const p = c({
   setup(a, { slots: l }) {
     const s = e(!1);
@@ -46,7 +46,7 @@ const p = c({
   "mcl-glassmorphism",
   d[a],
   g[l],
-  m("BGOPACITY", s),
+  m.bgOpacityVariant({ opacity: s }),
   n[r]
 ].filter(Boolean).join(" ");
 export {