@phila/phila-ui-collapse-panel 0.0.1-beta.1

package/README.md

@@ -0,0 +1,75 @@
+# CollapsePanel Component
+
+A simple, customizable Vue 3. CollapsePanel component built with TypeScript and Vite.
+Customizable component for toggling visibility of content.
+
+## Features
+
+- 🎯 TypeScript support with full type definitions
+
+## Installation
+
+```bash
+npm install @phila/phila-ui-collapse-panel
+# or
+yarn add @phila/phila-ui-collapse-panel
+# or
+pnpm add @phila/phila-ui-collapse-panel
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { CollapsePanel } from "@phila/phila-ui-collapse-panel";
+</script>
+<template>...Add basic component template here...</template>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+
+| ...Add props here...
+
+## Events
+
+| Event | Payload | Description |
+| ----- | ------- | ----------- |
+
+| ...Add events here...
+
+## Examples
+
+...Add examples here...
+
+## Development
+
+### Install Dependencies
+
+```bash
+pnpm install
+```
+
+### Run Demo
+
+```bash
+pnpm dev
+```
+
+### Build Library
+
+```bash
+pnpm build
+```
+
+### Type Check
+
+```bash
+pnpm type-check
+```
+
+## License
+
+MIT

package/dist/CollapsePanel.vue.d.ts

@@ -0,0 +1,43 @@
+import { CollapsePanelProps } from './index';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        toggle?(_: {
+            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;
+};
+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 _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=CollapsePanel.vue.d.ts.map

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

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { BaseProps } from '@phila/phila-ui-core';
+import { UseCollapseProps } from '@phila/phila-ui-core/utils';
+export { default as CollapsePanel } from './CollapsePanel.vue';
+export type CollapsePanelProps = BaseProps & UseCollapseProps;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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,4BAA4B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE/D,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,gBAAgB,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue");o.ref("");o.reactive({validateOnBlur:!1,validateOnInput:!1,validateOnChange:!1,validateOnMount:!1,required:!1,isValid:!0,errors:[]});const d=o.ref({}),c=o.ref(),y=400,T=o.ref(null);function A(e){const n=e?.group??"global",t=(l,r)=>{d.value[n][l]=r},f=(l,r)=>{d.value[n]={[l]:r}},p=l=>d.value[n][l]??!1,s=l=>{t(l,!p(l))},k=l=>{f(l,!p(l))},v=()=>{d.value[n]={}},a=l=>{l.key==="Escape"&&(t(e.id,!1),m())},g=l=>{if(!e)return;const r=l.target,[C]=Object.keys(d.value[n]).filter(w=>d.value[n][w]===!0),b=document.getElementById(C),P=document.querySelector(`[aria-controls="${C}"]`),h=r.getAttribute("aria-controls")===C||P?.contains(l.target);b&&!b.contains(r)&&!h&&(t(e.id,!1),m())},u=()=>{e&&(c.value=setTimeout(()=>{t(e.id,!1),m()},y))},i=()=>{e&&e.mouseOverToggle===!0&&(T.value=e.id,c.value=setTimeout(()=>{O()},y))},B=()=>{e&&e.mouseOverToggle===!0&&(T.value=null,clearTimeout(c.value),c.value=setTimeout(()=>{T.value!==e.id&&(t(e.id,!1),m())},y))},S=l=>{if(!e)return;const{relatedTarget:r}=l;if(!r||r.getAttribute("aria-controls")===e.id)return;const C=document.getElementById(e.id);C&&C.contains(r)||(clearTimeout(c.value),c.value=setTimeout(()=>{e.openSingle?f(e.id,!1):t(e.id,!1),m()},y))},L=()=>{e&&(e.outsideClickClose&&(document.addEventListener("click",g),document.addEventListener("touchend",g)),e.escapeKeyClose&&document.addEventListener("keydown",a))},m=()=>{document.removeEventListener("click",g),document.removeEventListener("touchend",g),document.removeEventListener("keydown",a),document.removeEventListener("scroll",u)},E=l=>{e&&(l?.preventDefault(),clearTimeout(c.value),L())},M=l=>{e&&(E(l),e.openSingle?k(e.id):s(e.id))},O=l=>{e&&(E(l),e.openSingle?f(e.id,!0):t(e.id,!0))};return o.onBeforeMount(()=>{d.value[n]||v()}),o.onUnmounted(()=>{m()}),{state:d,timeout:c,toggle:s,toggleSingle:k,setCollapsed:t,setSingleCollapsed:f,isCollapsed:p,reset:v,onMouseEnter:i,onMouseLeave:B,focusChange:S,onClickToggle:M,onClickOpen:O}}const I=["data-toggle","aria-label","aria-expanded","aria-controls"],q=o.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(e){const n=e,{isCollapsed:t,onMouseEnter:f,onMouseLeave:p,onClickToggle:s,onClickOpen:k,focusChange:v}=A(n),a=o.computed(()=>t(n.id));return(g,u)=>(o.openBlock(),o.createElementBlock("div",{onMouseenter:u[1]||(u[1]=(...i)=>o.unref(f)&&o.unref(f)(...i)),onMouseleave:u[2]||(u[2]=(...i)=>o.unref(p)&&o.unref(p)(...i)),onFocusout:u[3]||(u[3]=(...i)=>o.unref(v)&&o.unref(v)(...i))},[o.renderSlot(g.$slots,"toggle",o.normalizeProps(o.guardReactiveProps({open:a.value,ariaLabel:a.value?"Close panel":"Open panel",ariaExpanded:a.value,ariaControls:e.id,onClickToggle:o.unref(s),onClickOpen:o.unref(k),focusChange:o.unref(v),onClick:o.unref(s)})),()=>[o.createElementVNode("button",o.mergeProps({"data-toggle":e.id,"aria-label":a.value?"Close panel":"Open panel","aria-expanded":a.value,"aria-controls":e.id},e.toggleAttrs,{onClick:u[0]||(u[0]=o.withModifiers((...i)=>o.unref(s)&&o.unref(s)(...i),["prevent"]))}),null,16,I)]),o.renderSlot(g.$slots,"default",o.normalizeProps(o.guardReactiveProps({id:e.id,open:a.value,onClickToggle:o.unref(s),focusChange:o.unref(v),hidden:!a.value})))],32))}});exports.CollapsePanel=q;

package/dist/index.mjs

@@ -0,0 +1,134 @@
+import { ref as T, reactive as q, onBeforeMount as D, onUnmounted as K, defineComponent as N, computed as V, createElementBlock as j, openBlock as z, unref as l, renderSlot as b, normalizeProps as M, guardReactiveProps as S, createElementVNode as F, mergeProps as R, withModifiers as U } from "vue";
+T("");
+q({
+  validateOnBlur: !1,
+  validateOnInput: !1,
+  validateOnChange: !1,
+  validateOnMount: !1,
+  required: !1,
+  isValid: !0,
+  errors: []
+});
+const d = T({}), c = T(), E = 400, y = T(null);
+function G(e) {
+  const t = e?.group ?? "global", n = (o, i) => {
+    d.value[t][o] = i;
+  }, v = (o, i) => {
+    d.value[t] = { [o]: i };
+  }, p = (o) => d.value[t][o] ?? !1, r = (o) => {
+    n(o, !p(o));
+  }, k = (o) => {
+    v(o, !p(o));
+  }, g = () => {
+    d.value[t] = {};
+  }, a = (o) => {
+    o.key === "Escape" && (n(e.id, !1), m());
+  }, f = (o) => {
+    if (!e) return;
+    const i = o.target, [C] = Object.keys(d.value[t]).filter(($) => d.value[t][$] === !0), L = document.getElementById(C), I = document.querySelector(`[aria-controls="${C}"]`), x = i.getAttribute("aria-controls") === C || I?.contains(o.target);
+    L && !L.contains(i) && !x && (n(e.id, !1), m());
+  }, u = () => {
+    e && (c.value = setTimeout(() => {
+      n(e.id, !1), m();
+    }, E));
+  }, s = () => {
+    e && e.mouseOverToggle === !0 && (y.value = e.id, c.value = setTimeout(() => {
+      B();
+    }, E));
+  }, P = () => {
+    e && e.mouseOverToggle === !0 && (y.value = null, clearTimeout(c.value), c.value = setTimeout(() => {
+      y.value !== e.id && (n(e.id, !1), m());
+    }, E));
+  }, h = (o) => {
+    if (!e) return;
+    const { relatedTarget: i } = o;
+    if (!i || i.getAttribute("aria-controls") === e.id)
+      return;
+    const C = document.getElementById(e.id);
+    C && C.contains(i) || (clearTimeout(c.value), c.value = setTimeout(() => {
+      e.openSingle ? v(e.id, !1) : n(e.id, !1), m();
+    }, E));
+  }, w = () => {
+    e && (e.outsideClickClose && (document.addEventListener("click", f), document.addEventListener("touchend", f)), e.escapeKeyClose && document.addEventListener("keydown", a));
+  }, m = () => {
+    document.removeEventListener("click", f), document.removeEventListener("touchend", f), document.removeEventListener("keydown", a), document.removeEventListener("scroll", u);
+  }, O = (o) => {
+    e && (o?.preventDefault(), clearTimeout(c.value), w());
+  }, A = (o) => {
+    e && (O(o), e.openSingle ? k(e.id) : r(e.id));
+  }, B = (o) => {
+    e && (O(o), e.openSingle ? v(e.id, !0) : n(e.id, !0));
+  };
+  return D(() => {
+    d.value[t] || g();
+  }), K(() => {
+    m();
+  }), {
+    state: d,
+    timeout: c,
+    toggle: r,
+    toggleSingle: k,
+    setCollapsed: n,
+    setSingleCollapsed: v,
+    isCollapsed: p,
+    reset: g,
+    onMouseEnter: s,
+    onMouseLeave: P,
+    focusChange: h,
+    onClickToggle: A,
+    onClickOpen: B
+  };
+}
+const H = ["data-toggle", "aria-label", "aria-expanded", "aria-controls"], Q = /* @__PURE__ */ N({
+  __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(e) {
+    const t = e, { isCollapsed: n, onMouseEnter: v, onMouseLeave: p, onClickToggle: r, onClickOpen: k, focusChange: g } = G(t), a = V(() => n(t.id));
+    return (f, u) => (z(), j("div", {
+      onMouseenter: u[1] || (u[1] = //@ts-ignore
+      (...s) => l(v) && l(v)(...s)),
+      onMouseleave: u[2] || (u[2] = //@ts-ignore
+      (...s) => l(p) && l(p)(...s)),
+      onFocusout: u[3] || (u[3] = //@ts-ignore
+      (...s) => l(g) && l(g)(...s))
+    }, [
+      b(f.$slots, "toggle", M(S({
+        open: a.value,
+        ariaLabel: a.value ? "Close panel" : "Open panel",
+        ariaExpanded: a.value,
+        ariaControls: e.id,
+        onClickToggle: l(r),
+        onClickOpen: l(k),
+        focusChange: l(g),
+        onClick: l(r)
+      })), () => [
+        F("button", R({
+          "data-toggle": e.id,
+          "aria-label": a.value ? "Close panel" : "Open panel",
+          "aria-expanded": a.value,
+          "aria-controls": e.id
+        }, e.toggleAttrs, {
+          onClick: u[0] || (u[0] = U(
+            //@ts-ignore
+            (...s) => l(r) && l(r)(...s),
+            ["prevent"]
+          ))
+        }), null, 16, H)
+      ]),
+      b(f.$slots, "default", M(S({ id: e.id, open: a.value, onClickToggle: l(r), focusChange: l(g), hidden: !a.value })))
+    ], 32));
+  }
+});
+export {
+  Q as CollapsePanel
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@phila/phila-ui-collapse-panel",
+  "version": "0.0.1-beta.1",
+  "type": "module",
+  "description": "Customizable component for toggling visibility of content. ",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "ui",
+    "collapse-panel",
+    "vue",
+    "component"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@phila/phila-ui-core": "2.2.0-beta.2"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "eslint": "^9.0.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.6",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build-win": "vite build",
+    "dev": "vite build --watch",
+    "lint": "eslint src --ext .ts,.tsx,.vue",
+    "lint:fix": "eslint src --ext .ts,.tsx,.vue --fix",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  }
+}