@phila/phila-ui-collapse-panel 0.1.1 → 0.2.0-beta.4

package/dist/CollapsePanel.vue.d.ts

@@ -3,36 +3,39 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         toggle?(_: {
+            "data-toggle"?: undefined;
+            onclick?: undefined;
+            open: boolean;
+            ariaLabel: string;
+            ariaExpanded: boolean;
+            ariaControls: string;
+        } | {
+            "data-toggle": string;
+            onclick: () => void;
             open: boolean;
             ariaLabel: string;
             ariaExpanded: boolean;
             ariaControls: string;
-            onClickToggle: (event?: Event) => void;
-            onClickOpen: (event?: Event) => void;
-            focusChange: (e: FocusEvent) => void;
-            onClick: (event?: Event) => void;
         }): any;
         default?(_: {
             id: string;
             open: boolean;
-            onClickToggle: (event?: Event) => void;
-            focusChange: (e: FocusEvent) => void;
             hidden: boolean;
         }): any;
     };
     refs: {};
-    rootEl: HTMLDivElement;
+    rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<CollapsePanelProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CollapsePanelProps> & Readonly<{}>, {
-    group: string;
-    blurClose: boolean;
-    openSingle: boolean;
-    mouseOverToggle: boolean;
-    outsideClickClose: boolean;
-    escapeKeyClose: boolean;
-    toggleAttrs: Partial<import('vue').ButtonHTMLAttributes>;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component: import('vue').DefineComponent<CollapsePanelProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    escape: () => any;
+}, string, import('vue').PublicProps, Readonly<CollapsePanelProps> & Readonly<{
+    onEscape?: (() => any) | undefined;
+}>, {
+    id: string;
+    blurHide: boolean;
+    trapFocus: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/CollapsePanel.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsePanel.vue.d.ts","sourceRoot":"","sources":["../src/CollapsePanel.vue"],"names":[],"mappings":"AA+DA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA0BlD,iBAAS,cAAc;WA+CT,OAAO,IAA6B;;;;;;;;;;;YAXtB,GAAG;;;;;;;YACF,GAAG;;;;EAe/B;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;wFAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CollapsePanel.vue.d.ts","sourceRoot":"","sources":["../src/CollapsePanel.vue"],"names":[],"mappings":"AA8EA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAoClD,iBAAS,cAAc;WAwET,OAAO,IAA6B;;;;;;;;;;;;;;;;YAXrB,GAAG;;;;;YACF,GAAG;;;;EAehC;AAiBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;6EASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
-import { BaseProps, UseCollapseProps } from '@phila/phila-ui-core';
+import { BaseProps, UseVisibilityProps } from '@phila/phila-ui-core';
 export { default as CollapsePanel } from './CollapsePanel.vue';
-export type CollapsePanelProps = BaseProps & UseCollapseProps;
+export type CollapsePanelProps = BaseProps & UseVisibilityProps & {
+    trapFocus?: boolean;
+};
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE/D,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE/D,MAAM,MAAM,kBAAkB,GAAG,SAAS,GACxC,kBAAkB,GAAG;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),g=require("@phila/phila-ui-core"),C=["data-toggle","aria-label","aria-expanded","aria-controls"],c=e.defineComponent({__name:"CollapsePanel",props:{className:{},id:{},group:{default:void 0},blurClose:{type:Boolean,default:!1},openSingle:{type:Boolean,default:!1},mouseOverToggle:{type:Boolean,default:!1},outsideClickClose:{type:Boolean,default:!1},escapeKeyClose:{type:Boolean,default:!1},toggleAttrs:{default:void 0}},setup(a){const u=a,{isCollapsed:f,onMouseEnter:s,onMouseLeave:i,onClickToggle:t,onClickOpen:p,focusChange:r}=g.useCollapse(u),l=e.computed(()=>f(u.id));return(d,o)=>(e.openBlock(),e.createElementBlock("div",{onMouseenter:o[1]||(o[1]=(...n)=>e.unref(s)&&e.unref(s)(...n)),onMouseleave:o[2]||(o[2]=(...n)=>e.unref(i)&&e.unref(i)(...n)),onFocusout:o[3]||(o[3]=(...n)=>e.unref(r)&&e.unref(r)(...n))},[e.renderSlot(d.$slots,"toggle",e.normalizeProps(e.guardReactiveProps({open:l.value,ariaLabel:l.value?"Close panel":"Open panel",ariaExpanded:l.value,ariaControls:a.id,onClickToggle:e.unref(t),onClickOpen:e.unref(p),focusChange:e.unref(r),onClick:e.unref(t)})),()=>[e.createElementVNode("button",e.mergeProps({"data-toggle":a.id,"aria-label":l.value?"Close panel":"Open panel","aria-expanded":l.value,"aria-controls":a.id},a.toggleAttrs,{onClick:o[0]||(o[0]=e.withModifiers((...n)=>e.unref(t)&&e.unref(t)(...n),["prevent"]))}),null,16,C)]),e.renderSlot(d.$slots,"default",e.normalizeProps(e.guardReactiveProps({id:a.id,open:l.value,onClickToggle:e.unref(t),focusChange:e.unref(r),hidden:!l.value})))],32))}});exports.CollapsePanel=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),n=require("@phila/phila-ui-core"),m=["data-toggle","aria-label","aria-expanded","aria-controls"],y=e.defineComponent({__name:"CollapsePanel",props:{className:{},id:{default:"collapse-panel"},group:{},blurHide:{type:Boolean,default:!1},showSingle:{type:Boolean},mouseOverToggle:{type:Boolean},outsideClickHide:{type:Boolean},escapeKeyHide:{type:Boolean},visibleOnMount:{type:Boolean},trapFocus:{type:Boolean,default:!1}},emits:["escape"],setup(i,{emit:r}){const o=i,u=e.useAttrs(),p=r,{isVisible:d,onMouseEnter:c,onMouseLeave:g,toggleProps:s}=n.useVisibility({id:o.id,group:o.group,outsideClickHide:o.outsideClickHide,escapeKeyHide:o.escapeKeyHide,blurHide:o.blurHide,mouseOverToggle:o.mouseOverToggle,showSingle:o.showSingle}),v=()=>{o.trapFocus||p("escape")},a=e.computed(()=>d(o.id));return(t,l)=>(e.openBlock(),e.createBlock(e.unref(n.FocusTrap),e.mergeProps({"allow-escape":!i.trapFocus},e.unref(u),{onEscape:v,onMouseenter:l[0]||(l[0]=f=>e.unref(c)(o.id)),onMouseleave:l[1]||(l[1]=f=>e.unref(g)(o.id))}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"toggle",e.normalizeProps(e.guardReactiveProps({open:a.value,ariaLabel:a.value?"Close panel":"Open panel",ariaExpanded:a.value,ariaControls:`visibility-${o.id}`,...e.unref(s)})),()=>[e.createElementVNode("button",e.mergeProps({"data-toggle":o.id,"aria-label":a.value?"Close panel":"Open panel","aria-expanded":a.value,"aria-controls":`visibility-${o.id}`},{...e.unref(s),...t.toggleAttrs}),null,16,m)]),e.renderSlot(t.$slots,"default",e.normalizeProps(e.guardReactiveProps({id:`visibility-${o.id}`,open:a.value,hidden:!a.value})))]),_:3},16,["allow-escape"]))}});exports.CollapsePanel=y;

package/dist/index.mjs

@@ -1,55 +1,60 @@
-import { defineComponent as m, computed as c, createElementBlock as k, openBlock as B, unref as e, renderSlot as p, normalizeProps as g, guardReactiveProps as f, createElementVNode as y, mergeProps as b, withModifiers as M } from "vue";
-import { useCollapse as O } from "@phila/phila-ui-core";
-const P = ["data-toggle", "aria-label", "aria-expanded", "aria-controls"], x = /* @__PURE__ */ m({
+import { defineComponent as C, useAttrs as B, computed as H, createBlock as $, openBlock as w, unref as a, mergeProps as n, withCtx as O, renderSlot as r, normalizeProps as p, guardReactiveProps as d, createElementVNode as P } from "vue";
+import { useVisibility as k, FocusTrap as E } from "@phila/phila-ui-core";
+const F = ["data-toggle", "aria-label", "aria-expanded", "aria-controls"], S = /* @__PURE__ */ C({
   __name: "CollapsePanel",
   props: {
     className: {},
-    id: {},
-    group: { default: void 0 },
-    blurClose: { type: Boolean, default: !1 },
-    openSingle: { type: Boolean, default: !1 },
-    mouseOverToggle: { type: Boolean, default: !1 },
-    outsideClickClose: { type: Boolean, default: !1 },
-    escapeKeyClose: { type: Boolean, default: !1 },
-    toggleAttrs: { default: void 0 }
+    id: { default: "collapse-panel" },
+    group: {},
+    blurHide: { type: Boolean, default: !1 },
+    showSingle: { type: Boolean },
+    mouseOverToggle: { type: Boolean },
+    outsideClickHide: { type: Boolean },
+    escapeKeyHide: { type: Boolean },
+    visibleOnMount: { type: Boolean },
+    trapFocus: { type: Boolean, default: !1 }
   },
-  setup(n) {
-    const i = n, { isCollapsed: C, onMouseEnter: r, onMouseLeave: d, onClickToggle: t, onClickOpen: v, focusChange: s } = O(i), l = c(() => C(i.id));
-    return (u, o) => (B(), k("div", {
-      onMouseenter: o[1] || (o[1] = //@ts-ignore
-      (...a) => e(r) && e(r)(...a)),
-      onMouseleave: o[2] || (o[2] = //@ts-ignore
-      (...a) => e(d) && e(d)(...a)),
-      onFocusout: o[3] || (o[3] = //@ts-ignore
-      (...a) => e(s) && e(s)(...a))
-    }, [
-      p(u.$slots, "toggle", g(f({
-        open: l.value,
-        ariaLabel: l.value ? "Close panel" : "Open panel",
-        ariaExpanded: l.value,
-        ariaControls: n.id,
-        onClickToggle: e(t),
-        onClickOpen: e(v),
-        focusChange: e(s),
-        onClick: e(t)
-      })), () => [
-        y("button", b({
-          "data-toggle": n.id,
-          "aria-label": l.value ? "Close panel" : "Open panel",
-          "aria-expanded": l.value,
-          "aria-controls": n.id
-        }, n.toggleAttrs, {
-          onClick: o[0] || (o[0] = M(
-            //@ts-ignore
-            (...a) => e(t) && e(t)(...a),
-            ["prevent"]
-          ))
-        }), null, 16, P)
+  emits: ["escape"],
+  setup(t, { emit: u }) {
+    const e = t, c = B(), g = u, { isVisible: v, onMouseEnter: m, onMouseLeave: y, toggleProps: i } = k({
+      id: e.id,
+      group: e.group,
+      outsideClickHide: e.outsideClickHide,
+      escapeKeyHide: e.escapeKeyHide,
+      blurHide: e.blurHide,
+      mouseOverToggle: e.mouseOverToggle,
+      showSingle: e.showSingle
+    }), b = () => {
+      e.trapFocus || g("escape");
+    }, o = H(() => v(e.id));
+    return (s, l) => (w(), $(a(E), n({
+      "allow-escape": !t.trapFocus
+    }, a(c), {
+      onEscape: b,
+      onMouseenter: l[0] || (l[0] = (f) => a(m)(e.id)),
+      onMouseleave: l[1] || (l[1] = (f) => a(y)(e.id))
+    }), {
+      default: O(() => [
+        r(s.$slots, "toggle", p(d({
+          open: o.value,
+          ariaLabel: o.value ? "Close panel" : "Open panel",
+          ariaExpanded: o.value,
+          ariaControls: `visibility-${e.id}`,
+          ...a(i)
+        })), () => [
+          P("button", n({
+            "data-toggle": e.id,
+            "aria-label": o.value ? "Close panel" : "Open panel",
+            "aria-expanded": o.value,
+            "aria-controls": `visibility-${e.id}`
+          }, { ...a(i), ...s.toggleAttrs }), null, 16, F)
+        ]),
+        r(s.$slots, "default", p(d({ id: `visibility-${e.id}`, open: o.value, hidden: !o.value })))
       ]),
-      p(u.$slots, "default", g(f({ id: n.id, open: l.value, onClickToggle: e(t), focusChange: e(s), hidden: !l.value })))
-    ], 32));
+      _: 3
+    }, 16, ["allow-escape"]));
   }
 });
 export {
-  x as CollapsePanel
+  S as CollapsePanel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phila/phila-ui-collapse-panel",
-  "version": "0.1.1",
+  "version": "0.2.0-beta.4",
   "type": "module",
   "description": "Customizable component for toggling visibility of content. ",
   "main": "./dist/index.js",
@@ -28,7 +28,7 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@phila/phila-ui-core": "2.4.0"
+    "@phila/phila-ui-core": "3.0.0-beta.4"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",