@phila/phila-ui-core 2.4.0 → 3.0.0-beta.3

package/README.md

@@ -148,6 +148,111 @@ Essential spacing scale: `2`, `4`, `6` (0.5rem, 1rem, 1.5rem)
 
 - **Sizes**: base, md
 
+### Core Components
+
+#### FocusTrap
+
+A component that traps focus within its children, ensuring accessibility for modals and dropdowns. It handles keyboard navigation. Optionally, allows escaping to fire custom events when focus leaves.
+
+##### Basic Usage
+
+```html
+<script lang="ts" setup>
+  import { FocusTrap } from "@phila/phila-ui-core";
+</script>
+<template>
+  <FocusTrap>
+    <div>
+      <p>This content is focus-trapped. Press Tab to navigate within this area.</p>
+      <button>Button 1</button>
+      <button>Button 2</button>
+    </div>
+  </FocusTrap>
+</template>
+```
+
+- When the `FocusTrap` component is mounted, it automatically focuses the first focusable element within its children. If no focusable elements are found, it focuses itself.
+- The component listens for `keydown` events to manage focus. Pressing the Tab key will cycle through the focusable elements within the trap. If the user tries to tab out of the trap, it will loop back to the beginning or end of the focusable elements, depending on the direction of the tabbing.
+  - `Shift + Tab` will move focus backward, while `Tab` alone will move focus forward.
+  - `PageUp` moves focus to the first focusable element, and `PageDown` moves focus to the last focusable element.
+
+| Prop                  | Type      | Description                                                                                                                                                                                                                                        |
+| --------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `initialFocusElement` | `string`  | An ID of the element to focus initially when the trap is activated. If the element is not focusable (like a div, heading, span, etc.), the element will be given a temporary `tabindex` of 0 to make initially focusable.                          |
+| `arrowNavigation`     | `boolean` | If true, the component will also listen for ArrowUp and ArrowDown keys to navigate through focusable elements.                                                                                                                                     |
+| `allowEscape`         | `boolean` | If true, tabbing outside of the focus trap and focusing on an external element will be allowed. An `escape` event will be emitted that can be listened to by the parent component. Useful for closing navbar menus when using keyboard navigation. |
+| `as`                  | `string`  | The HTML element to render as the wrapper for the focus trap. Defaults to `span`.                                                                                                                                                                  |
+
+### Composables
+
+#### useVisibility
+
+A composable for managing visibility state of components, such as dropdowns and modals. It provides methods to toggle visibility and handles hover interactions.
+
+##### Basic Usage
+
+```html
+<script lang="ts" setup>
+  // Manage visibility state of a single element
+  import { useVisibility } from "@phila/phila-ui-core";
+  const { isVisible, toggleProps } = useVisibility({
+    id: "my-component",
+    group: "my-group", //optional, defaults to "global"
+    outsideClickHide: true, //optional, defaults to false.
+  });
+</script>
+<template>
+  <button v-bind="toggleProps">Toggle Visibility</button>
+  <div v-if="isVisible">This content is visible when the button is toggled.</div>
+</template>
+```
+
+- Including an Id prop when calling useVisibility will initilize the visibility state using that ID.
+- Whenever useVisibility is called with the same ID/group, any settings that are defined will be applied to its visibility state.
+- Toggle props includes the required `data-toggle` attribute with the appropriate ID (`visbility-${id}`) and an optional click handler, though you can import `setVisiblity` from the composable and create your own.
+
+```html
+// Accessing visility state across components
+<script lang="ts" setup>
+  import { useVisibility } from "@phila/phila-ui-core";
+  const { isVisible, setVisibility } = useVisibility({
+    group: "my-group",
+  });
+  const visible = computed(() => isVisible("my-component"));
+  const toggleVisibilityExternally = () => {
+    setVisibility(!visible.value, "my-component");
+  };
+</script>
+<template>
+  <button @click="toggleVisibilityExternally">{{ visible ? "Close" : "Open" }} Component</button>
+</template>
+```
+
+##### useVisibility options
+
+| Option             | Type    | Default     | Description                                                                                                                                                                                                                               |
+| ------------------ | ------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`               | string  | `undefined` | Unique identifier for the visibility state of a component.                                                                                                                                                                                |
+| `group`            | string  | `global`    | Grouping mechanism for visibility states. Components with the same group will share visibility state.                                                                                                                                     |
+| `blurHide`         | boolean | `false`     | If true, visbility will be set to false when the component (including focusable children) and its toggle loses focus.                                                                                                                     |
+| `showSingle`       | boolean | `false`     | If true, only one component in the same group can be visible at a time. When a component's visibility is set to true, all other components in the same group will have their visibility set to false.                                     |
+| `mouseOverToggle`  | boolean | `false`     | If true, the exported onMouseEnter and onMouseLeave event handlers will set visibility to true and false, respectively. These event handlers can be applied to a wrapper element to listen for `@onmouseenter` or `@onmouseleave` events. |
+| `outsideClickHide` | boolean | `false`     | If true, clicking outside of the component will set its visibility to false.                                                                                                                                                              |
+| `escapeKeyHide`    | boolean | `false`     | If true, pressing the Escape key will set visibility to false.                                                                                                                                                                            |
+| `visibleOnMount`   | boolean | `false`     | If true, the component will be visible when it mounts.                                                                                                                                                                                    |
+
+##### useVisiblity methods
+
+| Method            | Type                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| ----------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `isVisible`       | `(id?: string) => boolean`                | A function that takes an optional ID and returns the visibility state (boolean) of the component. If an ID is provided, it returns the visibility state of the component with that ID. If no ID is provided, it returns the visibility state of the component that called the `useVisibility` hook. If no ID was provided when useVisiblity was called, and no ID is provided to isVisiblle, the default ID and group will be used: id: `default-item`, group: `global`.                                                        |
+| `setVisibility`   | `(visible: boolean, id?: string) => void` | A function that takes a boolean value and an optional ID to set the initial visibility state and sets up click and mouse event listeners for that component. If an ID is provided, it sets the visibility state of the component with that ID. If no ID is provided, it sets the visibility state of the component that called the `useVisibility` hook. If no ID was provided when useVisiblity was called, and no ID is provided to setVisiblity, the default ID and group will be used: id: `default-item`, group: `global`. |
+| `create`          | `(id: string) => void`                    | A function that takes an ID and initializes a new visibility state for the component with that ID. This is called automatically when ID is provided to useVisibility.                                                                                                                                                                                                                                                                                                                                                           |
+| `setState`        | `(id: string, visible: boolean) => void`  | A function that takes an ID and a visible value to manually set the visibility state for a component. `showSingle` rules are preserved, but no event handlers are added/removed.                                                                                                                                                                                                                                                                                                                                                |
+| `onMouseEnter`    | `() => void`                              | An event handler that sets visibility to true when the mouse enters the component. This is only added if the `mouseOverToggle` option is set to true.                                                                                                                                                                                                                                                                                                                                                                           |
+| `onMouseLeave`    | `() => void`                              | An event handler that sets visibility to false when the mouse leaves the component. This is only added if the `mouseOverToggle` option is set to true.                                                                                                                                                                                                                                                                                                                                                                          |
+| `visibilityState` | `VisibilityState`                         | An object that contains the visibility state for all components, organized by group and ID. This is useful for debugging or advanced use cases where you need to access the visibility state of multiple components.                                                                                                                                                                                                                                                                                                            |
+
 ## TypeScript Support
 
 The package includes TypeScript definitions for all utilities and design tokens.

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import { ButtonHTMLAttributes } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { ComputedRef } from 'vue';
@@ -57,6 +56,12 @@ iconSize: ComponentSize;
 
 declare const __VLS_component_4: DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, PublicProps>;
 
+declare const __VLS_component_5: DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_5<FocusTrapProps>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+escape: () => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps_5<FocusTrapProps>>> & Readonly<{
+onEscape?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_2<T> = T extends undefined ? never : T;
@@ -65,6 +70,8 @@ declare type __VLS_NonUndefinedable_3<T> = T extends undefined ? never : T;
 
 declare type __VLS_NonUndefinedable_4<T> = T extends undefined ? never : T;
 
+declare type __VLS_NonUndefinedable_5<T> = T extends undefined ? never : T;
+
 declare type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
@@ -94,6 +101,10 @@ declare function __VLS_template_4(): {
     default?(_: {}): any;
 };
 
+declare function __VLS_template_5(): {
+    default?(_: {}): any;
+};
+
 declare type __VLS_TypePropsToRuntimeProps<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: PropType<__VLS_NonUndefinedable<T[K]>>;
@@ -130,6 +141,15 @@ declare type __VLS_TypePropsToRuntimeProps_4<T> = {
     };
 };
 
+declare type __VLS_TypePropsToRuntimeProps_5<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable_5<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
 declare type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
@@ -160,6 +180,12 @@ declare type __VLS_WithTemplateSlots_4<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_5<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 /** Accessible icon with required label for screen readers */
 declare type AccessibleIconProps = {
     /** Icon is not decorative */
@@ -213,14 +239,6 @@ export declare interface BaseProps {
  */
 export declare function cn(...inputs: (string | undefined | null | false)[]): string;
 
-export declare interface CollapseItems {
-    [id: string]: boolean;
-}
-
-export declare interface CollapseState {
-    [group: string]: CollapseItems;
-}
-
 export declare type ComponentSize = "extra-large" | "large" | "medium" | "small" | "extra-small" | "xxsmall";
 
 export declare function debounce<T extends (...args: unknown[]) => void>(callback: T, wait: number): (...args: Parameters<T>) => void;
@@ -235,6 +253,19 @@ declare type DecorativeIconProps = {
 
 export declare const ErrorList: DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ValidationProps>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<ValidationProps>>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
+export declare const FocusTrap: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, ReturnType<typeof __VLS_template_5>>;
+
+export declare interface FocusTrapEmits {
+    (e: "escape"): void;
+}
+
+export declare interface FocusTrapProps {
+    initialFocusElement?: string;
+    arrowNavigation?: boolean;
+    allowEscape?: boolean;
+    as?: string;
+}
+
 export declare function generateRandomId(prefix?: string): string;
 
 export declare interface HtmlLinkProps extends BaseLinkBaseProps {
@@ -298,74 +329,75 @@ export declare interface RouterLinkProps extends BaseLinkBaseProps {
     rel?: never;
 }
 
-export declare function useCollapse(props?: UseCollapseProps): {
-    state: Ref<CollapseState, CollapseState>;
-    timeout: Ref<NodeJS.Timeout | undefined, NodeJS.Timeout | undefined>;
-    toggle: (id: string) => void;
-    toggleSingle: (id: string) => void;
-    setCollapsed: (id: string, value: boolean) => void;
-    setSingleCollapsed: (id: string, value: boolean) => void;
-    isCollapsed: (id: string) => boolean;
-    reset: () => void;
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-    focusChange: (e: FocusEvent) => void;
-    onClickToggle: (event?: Event) => void;
-    onClickOpen: (event?: Event) => void;
+export declare function useInput(): {
+    inputValue: Ref<string, string>;
+    setInputValue: (value: string) => void;
+};
+
+export declare function useRouter(): {
+    router: unknown;
+    hasRouter: ComputedRef<boolean>;
+};
+
+export declare function useValidation(props?: ValidationProps_2, emit?: ReturnType<typeof defineEmits_2>): {
+    init: () => void;
+    validation: () => void;
+    isValid: ComputedRef<boolean>;
+    errors: ComputedRef<string[]>;
 };
 
-export declare interface UseCollapseProps {
+export declare function useVisibility(props: UseVisibilityProps): {
+    visibilityState: VisibilityState;
+    create: (id: string) => void;
+    setState: (id: string, visible: boolean) => void;
+    isVisible: (id?: string) => boolean;
+    onMouseEnter: (id?: string) => void;
+    onMouseLeave: (id?: string) => void;
+    setVisibility: (visible?: boolean, id?: string) => void;
+    toggleProps: ComputedRef<    {
+    "data-toggle"?: undefined;
+    onclick?: undefined;
+    } | {
+    "data-toggle": string;
+    onclick: () => void;
+    }>;
+};
+
+export declare interface UseVisibilityProps {
     /**
      * Unique identifier for the panel
      */
-    id: string;
+    id?: string;
     /**
-     * Group identifier to group multiple panels together
+     * Group identifier to group multiple elements together
      */
     group?: string;
     /**
-     * Close panel when focus is lost on toggle and panel
+     * Hide element  when focus is lost on toggle and itself
      */
-    blurClose?: boolean;
+    blurHide?: boolean;
     /**
-     * Close all others in group when opened
+     * Hide all others in group when opened
      */
-    openSingle?: boolean;
+    showSingle?: boolean;
     /**
-     * Toggle panel open/close on mouse over
+     * Toggle visibility  on mouse over
      */
     mouseOverToggle?: boolean;
     /**
-     * Close panel when clicking outside of it and the toggle
+     * Hide element when clicking outside of it and the toggle
      */
-    outsideClickClose?: boolean;
+    outsideClickHide?: boolean;
     /**
-     * Close panel when escape key is pressed
+     * Hide element when escape key is pressed
      */
-    escapeKeyClose?: boolean;
+    escapeKeyHide?: boolean;
     /**
-     * Additional attributes to bind to the toggle button
+     * sets the item (id) as visibile when the modal is mounted
      */
-    toggleAttrs?: Partial<ButtonHTMLAttributes>;
+    visibleOnMount?: boolean;
 }
 
-export declare function useInput(): {
-    inputValue: Ref<string, string>;
-    setInputValue: (value: string) => void;
-};
-
-export declare function useRouter(): {
-    router: unknown;
-    hasRouter: ComputedRef<boolean>;
-};
-
-export declare function useValidation(props?: ValidationProps_2, emit?: ReturnType<typeof defineEmits_2>): {
-    init: () => void;
-    validation: () => void;
-    isValid: ComputedRef<boolean>;
-    errors: ComputedRef<string[]>;
-};
-
 export declare interface ValidationProps {
     errors?: string[];
     validateOnBlur?: boolean;
@@ -386,4 +418,16 @@ declare interface ValidationProps_2 {
     required?: boolean;
 }
 
+export declare type VisibilityItem = UseVisibilityProps & {
+    visible: boolean;
+};
+
+export declare interface VisibilityItems {
+    [id: string]: VisibilityItem;
+}
+
+export declare interface VisibilityState {
+    [group: string]: VisibilityItems;
+}
+
 export { }

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),F=require("@fortawesome/vue-fontawesome");function x(...n){return n.filter(Boolean).join(" ")}function W(n,t){let o;return(...l)=>{o!==void 0&&clearTimeout(o),o=setTimeout(()=>{n(...l)},t)}}function H(n="phila-ui-"){const t=new Uint8Array(16);crypto.getRandomValues(t);const o=Array.from(t,l=>l.toString(36)).join("").substring(0,12);return`${n}-${o}`}const S=e.ref("");function E(){return{inputValue:S,setInputValue:t=>{S.value=t}}}const s=e.reactive({validateOnBlur:!1,validateOnInput:!1,validateOnChange:!1,validateOnMount:!1,required:!1,isValid:!0,errors:[]}),{inputValue:q}=E();function w(n,t){return{init:()=>{n&&(s.validateOnBlur=n.validateOnBlur??!1,s.validateOnInput=n.validateOnInput??!1,s.validateOnChange=n.validateOnChange??!1,s.validateOnMount=n.validateOnMount??!1,s.validate=n.validate,s.required=n.required??!1,s.errors=n.errors||[])},validation:()=>{const a=Object.assign([],n?.errors||[]);if(s.required&&!q.value&&(s.isValid=!1,a.push("This field is required")),s.validate){const i=s.validate(q.value);typeof i=="string"?(s.isValid=!1,a.push(i)):Array.isArray(i)?(s.isValid=!1,a.push(...i)):s.isValid=!0}s.errors=a,a.length>0?(s.isValid=!1,t?.("error",a)):s.isValid=!0},isValid:e.computed(()=>s.isValid),errors:e.computed(()=>s.errors)}}const U={key:0,class:"input-errors"},K=e.defineComponent({__name:"ErrorList",props:{errors:{},validateOnBlur:{type:Boolean},validateOnInput:{type:Boolean},validateOnChange:{type:Boolean},validateOnMount:{type:Boolean},validate:{type:Function},required:{type:Boolean}},setup(n){const{errors:t,isValid:o}=w(),l=n,a=e.computed(()=>Object.assign([],t.value,l.errors||[]));return(i,m)=>!e.unref(o)&&a.value?.length?(e.openBlock(),e.createElementBlock("div",U,[e.createElementVNode("ul",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(c,d)=>(e.openBlock(),e.createElementBlock("li",{key:d},e.toDisplayString(c),1))),128))])])):e.createCommentVNode("",!0)}}),_=(n,t)=>{const o=n.__vccOpts||n;for(const[l,a]of t)o[l]=a;return o},z=_(K,[["__scopeId","data-v-caba8dd2"]]),G=["for"],J={key:0,class:"required"},Q=e.defineComponent({__name:"InputLabel",props:{id:{},required:{type:Boolean}},setup(n){return(t,o)=>(e.openBlock(),e.createElementBlock("label",{class:"input-label",for:n.id},[e.renderSlot(t.$slots,"default",{},void 0,!0),n.required?(e.openBlock(),e.createElementBlock("span",J,"*")):e.createCommentVNode("",!0)],8,G))}}),M=_(Q,[["__scopeId","data-v-00c91174"]]),X=e.defineComponent({inheritAttrs:!1,__name:"InputWrap",props:{id:{},name:{},placeholder:{},label:{},icon:{},required:{type:Boolean},errors:{},validateOnBlur:{type:Boolean},validateOnInput:{type:Boolean},validateOnChange:{type:Boolean},validateOnMount:{type:Boolean},validate:{type:Function},className:{}},emits:["update:modelValue","input","change","focus","blur","keydown","keyup","keypress","error"],setup(n,{emit:t}){const{setInputValue:o}=E(),l=e.ref(""),a=n,i=t,{init:m,isValid:c,validation:d}=w({validateOnMount:a.validateOnMount??!0,validateOnInput:a.validateOnInput??!0,validateOnBlur:a.validateOnBlur??!0,validateOnChange:a.validateOnChange??!0,required:a.required??!1,errors:a.errors||[],validate:a.validate},i),p=e.computed(()=>({invalid:!c.value})),C=B=>(l.value=B.target.value,i("update:modelValue",l.value),i("input",l.value),o(l.value),a.validateOnInput&&d(),l.value),b=()=>{a.validateOnBlur&&d(),i("blur")},O=()=>{i("focus")};return e.onBeforeMount(()=>{m()}),e.onMounted(()=>{a.validateOnMount&&d()}),(B,T)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["input-wrap",{hasError:!e.unref(c)}])},[a.label?(e.openBlock(),e.createBlock(M,{key:0,id:a.id,required:a.required},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.label),1)]),_:1},8,["id","required"])):e.createCommentVNode("",!0),e.renderSlot(B.$slots,"default",e.normalizeProps(e.guardReactiveProps({inputValue:l.value,onBlur:b,onFocus:O,onInput:C,isValid:e.unref(c),inputClasses:p.value})),void 0,!0),e.createVNode(z)],2))}}),Y=_(X,[["__scopeId","data-v-751bf20e"]]),Z=["innerHTML"],ee=["src","alt"],te=e.defineComponent({__name:"Icon",props:{className:{},iconDefinition:{},iconClass:{},src:{},svgRaw:{},variant:{default:"default"},size:{default:"small"},inline:{type:Boolean},shadow:{type:Boolean},decorative:{type:Boolean},ariaLabel:{default:void 0}},setup(n){const t=n,o=e.computed(()=>x("phila-icon",t.size&&`phila-icon--${t.size}`,t.inline&&"phila-icon--inline",t.variant&&t.variant!=="default"&&`phila-icon--${t.variant}`,t.shadow&&"phila-icon--shadow",t.className)),l=e.computed(()=>t.decorative?{"aria-hidden":!0}:{"aria-label":t.ariaLabel,role:"img"});return(a,i)=>(e.openBlock(),e.createElementBlock("span",e.mergeProps({class:o.value},l.value),[t.iconDefinition?(e.openBlock(),e.createBlock(e.unref(F.FontAwesomeIcon),{key:0,icon:t.iconDefinition},null,8,["icon"])):t.iconClass?(e.openBlock(),e.createElementBlock("i",{key:1,class:e.normalizeClass(`fa fa-${t.iconClass}`)},null,2)):t.svgRaw?(e.openBlock(),e.createElementBlock("span",{key:2,class:"phila-icon__svg",innerHTML:t.svgRaw},null,8,Z)):t.src?(e.openBlock(),e.createElementBlock("img",{key:3,src:t.src,alt:t.decorative?"":t.ariaLabel||"Icon"},null,8,ee)):e.createCommentVNode("",!0)],16))}}),V=_(te,[["__scopeId","data-v-1fe4be50"]]),ne={key:1},ae=e.defineComponent({__name:"ActionContent",props:{iconRight:{type:Boolean,default:!1},iconOnly:{type:Boolean,default:!1},inline:{type:Boolean},text:{default:void 0},size:{default:void 0},shadow:{type:Boolean},iconSize:{default:void 0},iconDefinition:{},iconClass:{},src:{},svgRaw:{},variant:{}},setup(n){const t=n,o=e.computed(()=>t.iconDefinition||t.iconClass||t.src||t.svgRaw),l=i=>{if(i.iconOnly)switch(i.size){case"small":return"extra-small";case"extra-small":return"xxsmall";default:return i.size||"medium"}else switch(i.size){case"small":case"extra-small":return"xxsmall";default:return"extra-small"}},a=e.computed(()=>({iconDefinition:t.iconDefinition,iconClass:t.iconClass,src:t.src,svgRaw:t.svgRaw,size:t.iconSize??l(t),decorative:!0,class:"icon",inline:t.inline??!t.iconOnly,shadow:t.shadow}));return(i,m)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[o.value&&!t.iconRight?(e.openBlock(),e.createBlock(V,e.normalizeProps(e.mergeProps({key:0},a.value)),null,16)):e.createCommentVNode("",!0),t.iconOnly?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",ne,[e.renderSlot(i.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])])),o.value&&t.iconRight?(e.openBlock(),e.createBlock(V,e.normalizeProps(e.mergeProps({key:2},a.value)),null,16)):e.createCommentVNode("",!0)],64))}}),L=n=>"to"in n&&n.to!==void 0;function N(){const n=e.inject("router",null),t=e.computed(()=>n!==null);return{router:n,hasRouter:t}}const oe=e.defineComponent({__name:"BaseLink",props:{to:{},href:{},target:{},rel:{},disabled:{type:Boolean},ariaLabel:{},className:{}},setup(n){const t=n,{hasRouter:o}=N(),l=e.computed(()=>L(t)&&o.value?e.resolveComponent("RouterLink"):"a"),a=e.computed(()=>L(t)?{to:t.disabled?void 0:t.to,...t.disabled&&{"aria-disabled":"true"},...t.ariaLabel&&{"aria-label":t.ariaLabel}}:{href:t.disabled?void 0:t.href,...t.target&&{target:t.target},...t.rel&&{rel:t.rel},...t.disabled&&{"aria-disabled":"true"},...t.ariaLabel&&{"aria-label":t.ariaLabel}});return(i,m)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.value),e.mergeProps({class:n.className},a.value),{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default")]),_:3},16,["class"]))}}),v=e.ref({}),f=e.ref(),h=400,I=e.ref(null);function le(n){const t=n?.group??"global",o=(r,u)=>{v.value[t][r]=u},l=(r,u)=>{v.value[t]={[r]:u}},a=r=>v.value[t]?.[r]??!1,i=r=>{o(r,!a(r))},m=r=>{l(r,!a(r))},c=()=>{v.value[t]={}},d=r=>{r.key==="Escape"&&(o(n.id,!1),g())},p=r=>{if(!n)return;const u=r.target,[y]=Object.keys(v.value[t]).filter(j=>v.value[t][j]===!0),k=document.getElementById(y),D=document.querySelector(`[aria-controls="${y}"]`),P=u.getAttribute("aria-controls")===y||D?.contains(r.target);k&&!k.contains(u)&&!P&&(o(n.id,!1),g())},C=()=>{n&&(f.value=setTimeout(()=>{o(n.id,!1),g()},h))},b=()=>{n&&n.mouseOverToggle===!0&&(I.value=n.id,f.value=setTimeout(()=>{$()},h))},O=()=>{n&&n.mouseOverToggle===!0&&(I.value=null,clearTimeout(f.value),f.value=setTimeout(()=>{I.value!==n.id&&(o(n.id,!1),g())},h))},B=r=>{if(!n)return;const{relatedTarget:u}=r;if(!u||u.getAttribute("aria-controls")===n.id)return;const k=document.getElementById(n.id);k&&k.contains(u)||(clearTimeout(f.value),f.value=setTimeout(()=>{n.openSingle?l(n.id,!1):o(n.id,!1),g()},h))},T=()=>{n&&(n.outsideClickClose&&(document.addEventListener("click",p),document.addEventListener("touchend",p)),n.escapeKeyClose&&document.addEventListener("keydown",d))},g=()=>{document.removeEventListener("click",p),document.removeEventListener("touchend",p),document.removeEventListener("keydown",d),document.removeEventListener("scroll",C)},R=r=>{n&&(r?.preventDefault(),clearTimeout(f.value),T())},A=r=>{n&&(R(r),n.openSingle?m(n.id):i(n.id))},$=r=>{n&&(R(r),n.openSingle?l(n.id,!0):o(n.id,!0))};return e.onBeforeMount(()=>{v.value[t]||c()}),e.onUnmounted(()=>{g()}),{state:v,timeout:f,toggle:i,toggleSingle:m,setCollapsed:o,setSingleCollapsed:l,isCollapsed:a,reset:c,onMouseEnter:b,onMouseLeave:O,focusChange:B,onClickToggle:A,onClickOpen:$}}exports.ActionContent=ae;exports.BaseLink=oe;exports.ErrorList=z;exports.Icon=V;exports.InputLabel=M;exports.InputWrap=Y;exports.cn=x;exports.debounce=W;exports.generateRandomId=H;exports.isRouterLink=L;exports.useCollapse=le;exports.useInput=E;exports.useRouter=N;exports.useValidation=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),N=require("@fortawesome/vue-fontawesome");function S(...n){return n.filter(Boolean).join(" ")}function z(n,t){let i;return(...r)=>{i!==void 0&&clearTimeout(i),i=setTimeout(()=>{n(...r)},t)}}function P(n="phila-ui-"){const t=new Uint8Array(16);crypto.getRandomValues(t);const i=Array.from(t,r=>r.toString(36)).join("").substring(0,12);return`${n}-${i}`}const L=e.ref("");function I(){return{inputValue:L,setInputValue:t=>{L.value=t}}}const d=e.reactive({validateOnBlur:!1,validateOnInput:!1,validateOnChange:!1,validateOnMount:!1,required:!1,isValid:!0,errors:[]}),{inputValue:x}=I();function w(n,t){return{init:()=>{n&&(d.validateOnBlur=n.validateOnBlur??!1,d.validateOnInput=n.validateOnInput??!1,d.validateOnChange=n.validateOnChange??!1,d.validateOnMount=n.validateOnMount??!1,d.validate=n.validate,d.required=n.required??!1,d.errors=n.errors||[])},validation:()=>{const o=Object.assign([],n?.errors||[]);if(d.required&&!x.value&&(d.isValid=!1,o.push("This field is required")),d.validate){const s=d.validate(x.value);typeof s=="string"?(d.isValid=!1,o.push(s)):Array.isArray(s)?(d.isValid=!1,o.push(...s)):d.isValid=!0}d.errors=o,o.length>0?(d.isValid=!1,t?.("error",o)):d.isValid=!0},isValid:e.computed(()=>d.isValid),errors:e.computed(()=>d.errors)}}const F={key:0,class:"input-errors"},H=e.defineComponent({__name:"ErrorList",props:{errors:{},validateOnBlur:{type:Boolean},validateOnInput:{type:Boolean},validateOnChange:{type:Boolean},validateOnMount:{type:Boolean},validate:{type:Function},required:{type:Boolean}},setup(n){const{errors:t,isValid:i}=w(),r=n,o=e.computed(()=>Object.assign([],t.value,r.errors||[]));return(s,y)=>!e.unref(i)&&o.value?.length?(e.openBlock(),e.createElementBlock("div",F,[e.createElementVNode("ul",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,(p,m)=>(e.openBlock(),e.createElementBlock("li",{key:m},e.toDisplayString(p),1))),128))])])):e.createCommentVNode("",!0)}}),_=(n,t)=>{const i=n.__vccOpts||n;for(const[r,o]of t)i[r]=o;return i},$=_(H,[["__scopeId","data-v-caba8dd2"]]),j=["for"],K={key:0,class:"required"},U=e.defineComponent({__name:"InputLabel",props:{id:{},required:{type:Boolean}},setup(n){return(t,i)=>(e.openBlock(),e.createElementBlock("label",{class:"input-label",for:n.id},[e.renderSlot(t.$slots,"default",{},void 0,!0),n.required?(e.openBlock(),e.createElementBlock("span",K,"*")):e.createCommentVNode("",!0)],8,j))}}),q=_(U,[["__scopeId","data-v-00c91174"]]),W=e.defineComponent({inheritAttrs:!1,__name:"InputWrap",props:{id:{},name:{},placeholder:{},label:{},icon:{},required:{type:Boolean},errors:{},validateOnBlur:{type:Boolean},validateOnInput:{type:Boolean},validateOnChange:{type:Boolean},validateOnMount:{type:Boolean},validate:{type:Function},className:{}},emits:["update:modelValue","input","change","focus","blur","keydown","keyup","keypress","error"],setup(n,{emit:t}){const{setInputValue:i}=I(),r=e.ref(""),o=n,s=t,{init:y,isValid:p,validation:m}=w({validateOnMount:o.validateOnMount??!0,validateOnInput:o.validateOnInput??!0,validateOnBlur:o.validateOnBlur??!0,validateOnChange:o.validateOnChange??!0,required:o.required??!1,errors:o.errors||[],validate:o.validate},s),l=e.computed(()=>({invalid:!p.value})),c=k=>(r.value=k.target.value,s("update:modelValue",r.value),s("input",r.value),i(r.value),o.validateOnInput&&m(),r.value),v=()=>{o.validateOnBlur&&m(),s("blur")},g=()=>{s("focus")};return e.onBeforeMount(()=>{y()}),e.onMounted(()=>{o.validateOnMount&&m()}),(k,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["input-wrap",{hasError:!e.unref(p)}])},[o.label?(e.openBlock(),e.createBlock(q,{key:0,id:o.id,required:o.required},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.label),1)]),_:1},8,["id","required"])):e.createCommentVNode("",!0),e.renderSlot(k.$slots,"default",e.normalizeProps(e.guardReactiveProps({inputValue:r.value,onBlur:v,onFocus:g,onInput:c,isValid:e.unref(p),inputClasses:l.value})),void 0,!0),e.createVNode($)],2))}}),G=_(W,[["__scopeId","data-v-751bf20e"]]),J=["innerHTML"],Q=["src","alt"],X=e.defineComponent({__name:"Icon",props:{className:{},iconDefinition:{},iconClass:{},src:{},svgRaw:{},variant:{default:"default"},size:{default:"small"},inline:{type:Boolean},shadow:{type:Boolean},decorative:{type:Boolean},ariaLabel:{default:void 0}},setup(n){const t=n,i=e.computed(()=>S("phila-icon",t.size&&`phila-icon--${t.size}`,t.inline&&"phila-icon--inline",t.variant&&t.variant!=="default"&&`phila-icon--${t.variant}`,t.shadow&&"phila-icon--shadow",t.className)),r=e.computed(()=>t.decorative?{"aria-hidden":!0}:{"aria-label":t.ariaLabel,role:"img"});return(o,s)=>(e.openBlock(),e.createElementBlock("span",e.mergeProps({class:i.value},r.value),[t.iconDefinition?(e.openBlock(),e.createBlock(e.unref(N.FontAwesomeIcon),{key:0,icon:t.iconDefinition},null,8,["icon"])):t.iconClass?(e.openBlock(),e.createElementBlock("i",{key:1,class:e.normalizeClass(`fa fa-${t.iconClass}`)},null,2)):t.svgRaw?(e.openBlock(),e.createElementBlock("span",{key:2,class:"phila-icon__svg",innerHTML:t.svgRaw},null,8,J)):t.src?(e.openBlock(),e.createElementBlock("img",{key:3,src:t.src,alt:t.decorative?"":t.ariaLabel||"Icon"},null,8,Q)):e.createCommentVNode("",!0)],16))}}),O=_(X,[["__scopeId","data-v-1fe4be50"]]),Y={key:1},Z=e.defineComponent({__name:"ActionContent",props:{iconRight:{type:Boolean,default:!1},iconOnly:{type:Boolean,default:!1},inline:{type:Boolean},text:{default:void 0},size:{default:void 0},shadow:{type:Boolean},iconSize:{default:void 0},iconDefinition:{},iconClass:{},src:{},svgRaw:{},variant:{}},setup(n){const t=n,i=e.computed(()=>t.iconDefinition||t.iconClass||t.src||t.svgRaw),r=s=>{if(s.iconOnly)switch(s.size){case"small":return"extra-small";case"extra-small":return"xxsmall";default:return s.size||"medium"}else switch(s.size){case"small":case"extra-small":return"xxsmall";default:return"extra-small"}},o=e.computed(()=>({iconDefinition:t.iconDefinition,iconClass:t.iconClass,src:t.src,svgRaw:t.svgRaw,size:t.iconSize??r(t),decorative:!0,class:"icon",inline:t.inline??!t.iconOnly,shadow:t.shadow}));return(s,y)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[i.value&&!t.iconRight?(e.openBlock(),e.createBlock(O,e.normalizeProps(e.mergeProps({key:0},o.value)),null,16)):e.createCommentVNode("",!0),t.iconOnly?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",Y,[e.renderSlot(s.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])])),i.value&&t.iconRight?(e.openBlock(),e.createBlock(O,e.normalizeProps(e.mergeProps({key:2},o.value)),null,16)):e.createCommentVNode("",!0)],64))}}),C=n=>"to"in n&&n.to!==void 0;function D(){const n=e.inject("router",null),t=e.computed(()=>n!==null);return{router:n,hasRouter:t}}const ee=e.defineComponent({__name:"BaseLink",props:{to:{},href:{},target:{},rel:{},disabled:{type:Boolean},ariaLabel:{},className:{}},setup(n){const t=n,{hasRouter:i}=D(),r=e.computed(()=>C(t)&&i.value?e.resolveComponent("RouterLink"):"a"),o=e.computed(()=>C(t)?{to:t.disabled?void 0:t.to,...t.disabled&&{"aria-disabled":"true"},...t.ariaLabel&&{"aria-label":t.ariaLabel}}:{href:t.disabled?void 0:t.href,...t.target&&{target:t.target},...t.rel&&{rel:t.rel},...t.disabled&&{"aria-disabled":"true"},...t.ariaLabel&&{"aria-label":t.ariaLabel}});return(s,y)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.value),e.mergeProps({class:n.className},o.value),{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},16,["class"]))}}),te='a,area,button,iframe,input,object,textarea,select,details,[tabindex]:not([tabindex="-1"])',ne=e.defineComponent({__name:"FocusTrap",props:{initialFocusElement:{},arrowNavigation:{type:Boolean},allowEscape:{type:Boolean},as:{}},emits:["escape"],setup(n,{emit:t}){const i=e.useTemplateRef("focusTrap"),r=e.ref([]),o=n,s=t,y=e.useAttrs(),p=l=>{const c=r.value;if(c.length===0)return;const v=c[0],g=c[c.length-1];if(l.key==="Tab"&&(l.shiftKey?document.activeElement===v&&(o.allowEscape?s("escape"):(l.preventDefault(),g.focus())):document.activeElement===g&&(o.allowEscape?s("escape"):(l.preventDefault(),v.focus()))),l.key==="PageUp"&&(l.preventDefault(),v.focus()),l.key==="PageDown"&&(l.preventDefault(),g.focus()),o.arrowNavigation){const k=c.indexOf(document.activeElement);if(l.key==="ArrowDown"||l.key==="ArrowRight"){l.preventDefault();const a=(k+1)%c.length;c[a].focus()}if(l.key==="ArrowUp"||l.key==="ArrowLeft"){l.preventDefault();const a=(k-1+c.length)%c.length;c[a].focus()}}},m=l=>{l.target.removeAttribute("tabindex")};return e.onMounted(()=>{const l=i.value?.querySelectorAll(te);if(l){l.forEach(v=>{v.addEventListener("keydown",p)}),r.value=Array.from(l);let c=r.value[0];if(o.initialFocusElement){const v=i.value?.querySelector(`${o.initialFocusElement}`);v&&(v.tabIndex===-1&&(v.tabIndex=0,v.addEventListener("blur",m,{once:!0})),c=v)}else c||(c=i.value,c.tabIndex=0,c.addEventListener("blur",m,{once:!0}));c.focus()}}),e.onBeforeUnmount(()=>{r.value.forEach(l=>{l.removeEventListener("keydown",p),l.removeEventListener("blur",m)})}),(l,c)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.as||"span"),e.mergeProps({ref_key:"focusTrap",ref:i},e.unref(y)),{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},16))}}),u=e.reactive({}),B=e.ref(),T=400,E=e.ref(null),R={id:"default-item",group:"global"};function oe(n){const t=n.group||R.group,i=n.id||R.id,r=(a,f)=>{const b=u[t]?.[a];b&&(b.showSingle?Object.keys(u[t]).forEach(h=>{u[t][h].visible=h===a?f:!1}):u[t][a].visible=f)},o=(a=!0,f)=>{clearTimeout(B.value),r(f??i,a),a&&v(f??i)},s=a=>u[t]?.[a??i]?.visible??!1,y=a=>{u[t]||(u[t]={}),u[t][a]||(u[t][a]={group:t,visible:!1}),n.blurHide!==void 0&&(u[t][a].blurHide=n.blurHide),n.showSingle!==void 0&&(u[t][a].showSingle=n.showSingle),n.mouseOverToggle!==void 0&&(u[t][a].mouseOverToggle=n.mouseOverToggle),n.outsideClickHide!==void 0&&(u[t][a].outsideClickHide=n.outsideClickHide),n.escapeKeyHide!==void 0&&(u[t][a].escapeKeyHide=n.escapeKeyHide)},p=a=>f=>{f.key==="Escape"&&(r(a,!1),g())},m=a=>f=>{if(!u[t])return;const b=f.target,[h]=Object.keys(u[t]).filter(M=>u[t][M].visible===!0),V=document.getElementById(h),A=document.querySelector(`[data-toggle="visibility-${h}"]`)?.contains(f.target);V&&!V.contains(b)&&!A&&(r(a??i,!1),g())},l=a=>{(u[t]?.[a??i]).mouseOverToggle===!0&&(E.value=a??i,B.value=setTimeout(()=>{o(!0,a)},T))},c=a=>{(u[t]?.[a??i]).mouseOverToggle===!0&&(E.value=null,clearTimeout(B.value),B.value=setTimeout(()=>{E.value!==(a??i)&&(r(a??i,!1),g())},T))},v=a=>{const f=u[t]?.[a];f?.outsideClickHide&&(document.addEventListener("click",m(a)),document.addEventListener("touchend",m(a))),f?.escapeKeyHide&&document.addEventListener("keydown",p(a))},g=()=>{u[t]&&Object.keys(u[t]).forEach(a=>{document.removeEventListener("click",m(a)),document.removeEventListener("touchend",m(a)),document.removeEventListener("keydown",p(a))})};e.onBeforeMount(()=>{n.id!==void 0&&(y(n.id),e.nextTick(()=>{n.visibleOnMount&&o(!0)}))}),e.onUnmounted(()=>{g()});const k=e.computed(()=>n.id?{"data-toggle":`visibility-${i}`,onclick:()=>o(!s(i))}:{});return{visibilityState:u,create:y,setState:r,isVisible:s,onMouseEnter:l,onMouseLeave:c,setVisibility:o,toggleProps:k}}exports.ActionContent=Z;exports.BaseLink=ee;exports.ErrorList=$;exports.FocusTrap=ne;exports.Icon=O;exports.InputLabel=q;exports.InputWrap=G;exports.cn=S;exports.debounce=z;exports.generateRandomId=P;exports.isRouterLink=C;exports.useInput=I;exports.useRouter=D;exports.useValidation=w;exports.useVisibility=oe;

package/dist/index.mjs

@@ -1,32 +1,32 @@
-import { ref as k, reactive as te, computed as c, defineComponent as O, createElementBlock as u, createCommentVNode as y, unref as V, openBlock as s, createElementVNode as ne, Fragment as H, renderList as ae, toDisplayString as z, renderSlot as T, onBeforeMount as U, onMounted as ie, normalizeClass as W, createBlock as C, createVNode as le, withCtx as K, createTextVNode as G, normalizeProps as M, guardReactiveProps as re, mergeProps as w, inject as oe, resolveComponent as se, resolveDynamicComponent as ue, onUnmounted as ce } from "vue";
+import { ref as L, reactive as j, computed as g, defineComponent as k, createElementBlock as p, createCommentVNode as O, unref as B, openBlock as d, createElementVNode as ee, Fragment as P, renderList as te, toDisplayString as A, renderSlot as V, onBeforeMount as K, onMounted as U, normalizeClass as G, createBlock as E, createVNode as ne, withCtx as q, createTextVNode as W, normalizeProps as R, guardReactiveProps as ae, mergeProps as I, inject as ie, resolveComponent as oe, resolveDynamicComponent as J, useTemplateRef as se, useAttrs as re, onBeforeUnmount as le, nextTick as ue, onUnmounted as ce } from "vue";
 import { FontAwesomeIcon as de } from "@fortawesome/vue-fontawesome";
-import './index.css';function ve(...t) {
+import './index.css';function fe(...t) {
   return t.filter(Boolean).join(" ");
 }
-function we(t, e) {
-  let a;
-  return (...i) => {
-    a !== void 0 && clearTimeout(a), a = setTimeout(() => {
-      t(...i);
+function Ce(t, e) {
+  let i;
+  return (...o) => {
+    i !== void 0 && clearTimeout(i), i = setTimeout(() => {
+      t(...o);
     }, e);
   };
 }
 function Te(t = "phila-ui-") {
   const e = new Uint8Array(16);
   crypto.getRandomValues(e);
-  const a = Array.from(e, (i) => i.toString(36)).join("").substring(0, 12);
-  return `${t}-${a}`;
+  const i = Array.from(e, (o) => o.toString(36)).join("").substring(0, 12);
+  return `${t}-${i}`;
 }
-const N = k("");
-function J() {
+const S = L("");
+function Q() {
   return {
-    inputValue: N,
+    inputValue: S,
     setInputValue: (e) => {
-      N.value = e;
+      S.value = e;
     }
   };
 }
-const o = te({
+const c = j({
   validateOnBlur: !1,
   validateOnInput: !1,
   validateOnChange: !1,
@@ -34,28 +34,28 @@ const o = te({
   required: !1,
   isValid: !0,
   errors: []
-}), { inputValue: j } = J();
-function Q(t, e) {
+}), { inputValue: M } = Q();
+function X(t, e) {
   return {
     init: () => {
-      t && (o.validateOnBlur = t.validateOnBlur ?? !1, o.validateOnInput = t.validateOnInput ?? !1, o.validateOnChange = t.validateOnChange ?? !1, o.validateOnMount = t.validateOnMount ?? !1, o.validate = t.validate, o.required = t.required ?? !1, o.errors = t.errors || []);
+      t && (c.validateOnBlur = t.validateOnBlur ?? !1, c.validateOnInput = t.validateOnInput ?? !1, c.validateOnChange = t.validateOnChange ?? !1, c.validateOnMount = t.validateOnMount ?? !1, c.validate = t.validate, c.required = t.required ?? !1, c.errors = t.errors || []);
     },
     validation: () => {
       const n = Object.assign([], t?.errors || []);
-      if (o.required && !j.value && (o.isValid = !1, n.push("This field is required")), o.validate) {
-        const l = o.validate(j.value);
-        typeof l == "string" ? (o.isValid = !1, n.push(l)) : Array.isArray(l) ? (o.isValid = !1, n.push(...l)) : o.isValid = !0;
+      if (c.required && !M.value && (c.isValid = !1, n.push("This field is required")), c.validate) {
+        const r = c.validate(M.value);
+        typeof r == "string" ? (c.isValid = !1, n.push(r)) : Array.isArray(r) ? (c.isValid = !1, n.push(...r)) : c.isValid = !0;
       }
-      o.errors = n, n.length > 0 ? (o.isValid = !1, e?.("error", n)) : o.isValid = !0;
+      c.errors = n, n.length > 0 ? (c.isValid = !1, e?.("error", n)) : c.isValid = !0;
     },
-    isValid: c(() => o.isValid),
-    errors: c(() => o.errors)
+    isValid: g(() => c.isValid),
+    errors: g(() => c.errors)
   };
 }
-const fe = {
+const ve = {
   key: 0,
   class: "input-errors"
-}, me = /* @__PURE__ */ O({
+}, me = /* @__PURE__ */ k({
   __name: "ErrorList",
   props: {
     errors: {},
@@ -67,37 +67,37 @@ const fe = {
     required: { type: Boolean }
   },
   setup(t) {
-    const { errors: e, isValid: a } = Q(), i = t, n = c(() => Object.assign([], e.value, i.errors || []));
-    return (l, h) => !V(a) && n.value?.length ? (s(), u("div", fe, [
-      ne("ul", null, [
-        (s(!0), u(H, null, ae(n.value, (v, f) => (s(), u("li", { key: f }, z(v), 1))), 128))
+    const { errors: e, isValid: i } = X(), o = t, n = g(() => Object.assign([], e.value, o.errors || []));
+    return (r, b) => !B(i) && n.value?.length ? (d(), p("div", ve, [
+      ee("ul", null, [
+        (d(!0), p(P, null, te(n.value, (y, m) => (d(), p("li", { key: m }, A(y), 1))), 128))
       ])
-    ])) : y("", !0);
+    ])) : O("", !0);
   }
-}), $ = (t, e) => {
-  const a = t.__vccOpts || t;
-  for (const [i, n] of e)
-    a[i] = n;
-  return a;
-}, ge = /* @__PURE__ */ $(me, [["__scopeId", "data-v-caba8dd2"]]), he = ["for"], ye = {
+}), T = (t, e) => {
+  const i = t.__vccOpts || t;
+  for (const [o, n] of e)
+    i[o] = n;
+  return i;
+}, pe = /* @__PURE__ */ T(me, [["__scopeId", "data-v-caba8dd2"]]), ge = ["for"], ye = {
   key: 0,
   class: "required"
-}, _e = /* @__PURE__ */ O({
+}, he = /* @__PURE__ */ k({
   __name: "InputLabel",
   props: {
     id: {},
     required: { type: Boolean }
   },
   setup(t) {
-    return (e, a) => (s(), u("label", {
+    return (e, i) => (d(), p("label", {
       class: "input-label",
       for: t.id
     }, [
-      T(e.$slots, "default", {}, void 0, !0),
-      t.required ? (s(), u("span", ye, "*")) : y("", !0)
-    ], 8, he));
+      V(e.$slots, "default", {}, void 0, !0),
+      t.required ? (d(), p("span", ye, "*")) : O("", !0)
+    ], 8, ge));
   }
-}), pe = /* @__PURE__ */ $(_e, [["__scopeId", "data-v-00c91174"]]), Oe = /* @__PURE__ */ O({
+}), be = /* @__PURE__ */ T(he, [["__scopeId", "data-v-00c91174"]]), _e = /* @__PURE__ */ k({
   inheritAttrs: !1,
   __name: "InputWrap",
   props: {
@@ -117,7 +117,7 @@ const fe = {
   },
   emits: ["update:modelValue", "input", "change", "focus", "blur", "keydown", "keyup", "keypress", "error"],
   setup(t, { emit: e }) {
-    const { setInputValue: a } = J(), i = k(""), n = t, l = e, { init: h, isValid: v, validation: f } = Q(
+    const { setInputValue: i } = Q(), o = L(""), n = t, r = e, { init: b, isValid: y, validation: m } = X(
       {
         validateOnMount: n.validateOnMount ?? !0,
         validateOnInput: n.validateOnInput ?? !0,
@@ -127,36 +127,36 @@ const fe = {
         errors: n.errors || [],
         validate: n.validate
       },
-      l
-    ), _ = c(() => ({
-      invalid: !v.value
-    })), R = (b) => (i.value = b.target.value, l("update:modelValue", i.value), l("input", i.value), a(i.value), n.validateOnInput && f(), i.value), E = () => {
-      n.validateOnBlur && f(), l("blur");
-    }, q = () => {
-      l("focus");
+      r
+    ), s = g(() => ({
+      invalid: !y.value
+    })), l = (_) => (o.value = _.target.value, r("update:modelValue", o.value), r("input", o.value), i(o.value), n.validateOnInput && m(), o.value), v = () => {
+      n.validateOnBlur && m(), r("blur");
+    }, h = () => {
+      r("focus");
     };
-    return U(() => {
-      h();
-    }), ie(() => {
-      n.validateOnMount && f();
-    }), (b, S) => (s(), u("div", {
-      class: W(["input-wrap", { hasError: !V(v) }])
+    return K(() => {
+      b();
+    }), U(() => {
+      n.validateOnMount && m();
+    }), (_, a) => (d(), p("div", {
+      class: G(["input-wrap", { hasError: !B(y) }])
     }, [
-      n.label ? (s(), C(pe, {
+      n.label ? (d(), E(be, {
         key: 0,
         id: n.id,
         required: n.required
       }, {
-        default: K(() => [
-          G(z(n.label), 1)
+        default: q(() => [
+          W(A(n.label), 1)
         ]),
         _: 1
-      }, 8, ["id", "required"])) : y("", !0),
-      T(b.$slots, "default", M(re({ inputValue: i.value, onBlur: E, onFocus: q, onInput: R, isValid: V(v), inputClasses: _.value })), void 0, !0),
-      le(ge)
+      }, 8, ["id", "required"])) : O("", !0),
+      V(_.$slots, "default", R(ae({ inputValue: o.value, onBlur: v, onFocus: h, onInput: l, isValid: B(y), inputClasses: s.value })), void 0, !0),
+      ne(pe)
     ], 2));
   }
-}), $e = /* @__PURE__ */ $(Oe, [["__scopeId", "data-v-751bf20e"]]), be = ["innerHTML"], Be = ["src", "alt"], Ce = /* @__PURE__ */ O({
+}), $e = /* @__PURE__ */ T(_e, [["__scopeId", "data-v-751bf20e"]]), Oe = ["innerHTML"], ke = ["src", "alt"], Ee = /* @__PURE__ */ k({
   __name: "Icon",
   props: {
     className: {},
@@ -172,38 +172,38 @@ const fe = {
     ariaLabel: { default: void 0 }
   },
   setup(t) {
-    const e = t, a = c(() => ve(
+    const e = t, i = g(() => fe(
       "phila-icon",
       e.size && `phila-icon--${e.size}`,
       e.inline && "phila-icon--inline",
       e.variant && e.variant !== "default" && `phila-icon--${e.variant}`,
       e.shadow && "phila-icon--shadow",
       e.className
-    )), i = c(() => e.decorative ? {
+    )), o = g(() => e.decorative ? {
       "aria-hidden": !0
     } : {
       "aria-label": e.ariaLabel,
       role: "img"
     });
-    return (n, l) => (s(), u("span", w({ class: a.value }, i.value), [
-      e.iconDefinition ? (s(), C(V(de), {
+    return (n, r) => (d(), p("span", I({ class: i.value }, o.value), [
+      e.iconDefinition ? (d(), E(B(de), {
         key: 0,
         icon: e.iconDefinition
-      }, null, 8, ["icon"])) : e.iconClass ? (s(), u("i", {
+      }, null, 8, ["icon"])) : e.iconClass ? (d(), p("i", {
         key: 1,
-        class: W(`fa fa-${e.iconClass}`)
-      }, null, 2)) : e.svgRaw ? (s(), u("span", {
+        class: G(`fa fa-${e.iconClass}`)
+      }, null, 2)) : e.svgRaw ? (d(), p("span", {
         key: 2,
         class: "phila-icon__svg",
         innerHTML: e.svgRaw
-      }, null, 8, be)) : e.src ? (s(), u("img", {
+      }, null, 8, Oe)) : e.src ? (d(), p("img", {
         key: 3,
         src: e.src,
         alt: e.decorative ? "" : e.ariaLabel || "Icon"
-      }, null, 8, Be)) : y("", !0)
+      }, null, 8, ke)) : O("", !0)
     ], 16));
   }
-}), F = /* @__PURE__ */ $(Ce, [["__scopeId", "data-v-1fe4be50"]]), ke = { key: 1 }, Re = /* @__PURE__ */ O({
+}), z = /* @__PURE__ */ T(Ee, [["__scopeId", "data-v-1fe4be50"]]), we = { key: 1 }, Re = /* @__PURE__ */ k({
   __name: "ActionContent",
   props: {
     iconRight: { type: Boolean, default: !1 },
@@ -220,56 +220,56 @@ const fe = {
     variant: {}
   },
   setup(t) {
-    const e = t, a = c(() => e.iconDefinition || e.iconClass || e.src || e.svgRaw), i = (l) => {
-      if (l.iconOnly)
-        switch (l.size) {
+    const e = t, i = g(() => e.iconDefinition || e.iconClass || e.src || e.svgRaw), o = (r) => {
+      if (r.iconOnly)
+        switch (r.size) {
           case "small":
             return "extra-small";
           case "extra-small":
             return "xxsmall";
           default:
-            return l.size || "medium";
+            return r.size || "medium";
         }
       else
-        switch (l.size) {
+        switch (r.size) {
           case "small":
           case "extra-small":
             return "xxsmall";
           default:
             return "extra-small";
         }
-    }, n = c(
+    }, n = g(
       () => ({
         iconDefinition: e.iconDefinition,
         iconClass: e.iconClass,
         src: e.src,
         svgRaw: e.svgRaw,
-        size: e.iconSize ?? i(e),
+        size: e.iconSize ?? o(e),
         decorative: !0,
         class: "icon",
         inline: e.inline ?? !e.iconOnly,
         shadow: e.shadow
       })
     );
-    return (l, h) => (s(), u(H, null, [
-      a.value && !e.iconRight ? (s(), C(F, M(w({ key: 0 }, n.value)), null, 16)) : y("", !0),
-      e.iconOnly ? y("", !0) : (s(), u("span", ke, [
-        T(l.$slots, "default", {}, () => [
-          G(z(e.text), 1)
+    return (r, b) => (d(), p(P, null, [
+      i.value && !e.iconRight ? (d(), E(z, R(I({ key: 0 }, n.value)), null, 16)) : O("", !0),
+      e.iconOnly ? O("", !0) : (d(), p("span", we, [
+        V(r.$slots, "default", {}, () => [
+          W(A(e.text), 1)
         ])
       ])),
-      a.value && e.iconRight ? (s(), C(F, M(w({ key: 2 }, n.value)), null, 16)) : y("", !0)
+      i.value && e.iconRight ? (d(), E(z, R(I({ key: 2 }, n.value)), null, 16)) : O("", !0)
     ], 64));
   }
-}), P = (t) => "to" in t && t.to !== void 0;
-function Ie() {
-  const t = oe("router", null), e = c(() => t !== null);
+}), H = (t) => "to" in t && t.to !== void 0;
+function Be() {
+  const t = ie("router", null), e = g(() => t !== null);
   return {
     router: t,
     hasRouter: e
   };
 }
-const Ee = /* @__PURE__ */ O({
+const Ae = /* @__PURE__ */ k({
   __name: "BaseLink",
   props: {
     to: {},
@@ -281,7 +281,7 @@ const Ee = /* @__PURE__ */ O({
     className: {}
   },
   setup(t) {
-    const e = t, { hasRouter: a } = Ie(), i = c(() => P(e) && a.value ? se("RouterLink") : "a"), n = c(() => P(e) ? {
+    const e = t, { hasRouter: i } = Be(), o = g(() => H(e) && i.value ? oe("RouterLink") : "a"), n = g(() => H(e) ? {
       to: e.disabled ? void 0 : e.to,
       ...e.disabled && { "aria-disabled": "true" },
       ...e.ariaLabel && { "aria-label": e.ariaLabel }
@@ -292,96 +292,145 @@ const Ee = /* @__PURE__ */ O({
       ...e.disabled && { "aria-disabled": "true" },
       ...e.ariaLabel && { "aria-label": e.ariaLabel }
     });
-    return (l, h) => (s(), C(ue(i.value), w({ class: t.className }, n.value), {
-      default: K(() => [
-        T(l.$slots, "default")
+    return (r, b) => (d(), E(J(o.value), I({ class: t.className }, n.value), {
+      default: q(() => [
+        V(r.$slots, "default")
       ]),
       _: 3
     }, 16, ["class"]));
   }
-}), m = k({}), g = k(), L = 400, x = k(null);
-function qe(t) {
-  const e = t?.group ?? "global", a = (r, d) => {
-    m.value[e][r] = d;
-  }, i = (r, d) => {
-    m.value[e] = { [r]: d };
-  }, n = (r) => m.value[e]?.[r] ?? !1, l = (r) => {
-    a(r, !n(r));
-  }, h = (r) => {
-    i(r, !n(r));
-  }, v = () => {
-    m.value[e] = {};
-  }, f = (r) => {
-    r.key === "Escape" && (a(t.id, !1), p());
-  }, _ = (r) => {
-    if (!t) return;
-    const d = r.target, [I] = Object.keys(m.value[e]).filter((ee) => m.value[e][ee] === !0), B = document.getElementById(I), Y = document.querySelector(`[aria-controls="${I}"]`), Z = d.getAttribute("aria-controls") === I || Y?.contains(r.target);
-    B && !B.contains(d) && !Z && (a(t.id, !1), p());
-  }, R = () => {
-    t && (g.value = setTimeout(() => {
-      a(t.id, !1), p();
-    }, L));
-  }, E = () => {
-    t && t.mouseOverToggle === !0 && (x.value = t.id, g.value = setTimeout(() => {
-      D();
-    }, L));
-  }, q = () => {
-    t && t.mouseOverToggle === !0 && (x.value = null, clearTimeout(g.value), g.value = setTimeout(() => {
-      x.value !== t.id && (a(t.id, !1), p());
-    }, L));
-  }, b = (r) => {
-    if (!t) return;
-    const { relatedTarget: d } = r;
-    if (!d || d.getAttribute("aria-controls") === t.id)
-      return;
-    const B = document.getElementById(t.id);
-    B && B.contains(d) || (clearTimeout(g.value), g.value = setTimeout(() => {
-      t.openSingle ? i(t.id, !1) : a(t.id, !1), p();
-    }, L));
-  }, S = () => {
-    t && (t.outsideClickClose && (document.addEventListener("click", _), document.addEventListener("touchend", _)), t.escapeKeyClose && document.addEventListener("keydown", f));
-  }, p = () => {
-    document.removeEventListener("click", _), document.removeEventListener("touchend", _), document.removeEventListener("keydown", f), document.removeEventListener("scroll", R);
-  }, A = (r) => {
-    t && (r?.preventDefault(), clearTimeout(g.value), S());
-  }, X = (r) => {
-    t && (A(r), t.openSingle ? h(t.id) : l(t.id));
-  }, D = (r) => {
-    t && (A(r), t.openSingle ? i(t.id, !0) : a(t.id, !0));
+}), Ie = 'a,area,button,iframe,input,object,textarea,select,details,[tabindex]:not([tabindex="-1"])', qe = /* @__PURE__ */ k({
+  __name: "FocusTrap",
+  props: {
+    initialFocusElement: {},
+    arrowNavigation: { type: Boolean },
+    allowEscape: { type: Boolean },
+    as: {}
+  },
+  emits: ["escape"],
+  setup(t, { emit: e }) {
+    const i = se("focusTrap"), o = L([]), n = t, r = e, b = re(), y = (s) => {
+      const l = o.value;
+      if (l.length === 0) return;
+      const v = l[0], h = l[l.length - 1];
+      if (s.key === "Tab" && (s.shiftKey ? document.activeElement === v && (n.allowEscape ? r("escape") : (s.preventDefault(), h.focus())) : document.activeElement === h && (n.allowEscape ? r("escape") : (s.preventDefault(), v.focus()))), s.key === "PageUp" && (s.preventDefault(), v.focus()), s.key === "PageDown" && (s.preventDefault(), h.focus()), n.arrowNavigation) {
+        const _ = l.indexOf(document.activeElement);
+        if (s.key === "ArrowDown" || s.key === "ArrowRight") {
+          s.preventDefault();
+          const a = (_ + 1) % l.length;
+          l[a].focus();
+        }
+        if (s.key === "ArrowUp" || s.key === "ArrowLeft") {
+          s.preventDefault();
+          const a = (_ - 1 + l.length) % l.length;
+          l[a].focus();
+        }
+      }
+    }, m = (s) => {
+      s.target.removeAttribute("tabindex");
+    };
+    return U(() => {
+      const s = i.value?.querySelectorAll(Ie);
+      if (s) {
+        s.forEach((v) => {
+          v.addEventListener("keydown", y);
+        }), o.value = Array.from(s);
+        let l = o.value[0];
+        if (n.initialFocusElement) {
+          const v = i.value?.querySelector(`${n.initialFocusElement}`);
+          v && (v.tabIndex === -1 && (v.tabIndex = 0, v.addEventListener("blur", m, { once: !0 })), l = v);
+        } else l || (l = i.value, l.tabIndex = 0, l.addEventListener("blur", m, { once: !0 }));
+        l.focus();
+      }
+    }), le(() => {
+      o.value.forEach((s) => {
+        s.removeEventListener("keydown", y), s.removeEventListener("blur", m);
+      });
+    }), (s, l) => (d(), E(J(n.as || "span"), I({
+      ref_key: "focusTrap",
+      ref: i
+    }, B(b)), {
+      default: q(() => [
+        V(s.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+}), u = j({}), C = L(), F = 400, $ = L(null), N = {
+  id: "default-item",
+  group: "global"
+};
+function De(t) {
+  const e = t.group || N.group, i = t.id || N.id, o = (a, f) => {
+    const x = u[e]?.[a];
+    x && (x.showSingle ? Object.keys(u[e]).forEach((w) => {
+      u[e][w].visible = w === a ? f : !1;
+    }) : u[e][a].visible = f);
+  }, n = (a = !0, f) => {
+    clearTimeout(C.value), o(f ?? i, a), a && v(f ?? i);
+  }, r = (a) => u[e]?.[a ?? i]?.visible ?? !1, b = (a) => {
+    u[e] || (u[e] = {}), u[e][a] || (u[e][a] = {
+      group: e,
+      visible: !1
+    }), t.blurHide !== void 0 && (u[e][a].blurHide = t.blurHide), t.showSingle !== void 0 && (u[e][a].showSingle = t.showSingle), t.mouseOverToggle !== void 0 && (u[e][a].mouseOverToggle = t.mouseOverToggle), t.outsideClickHide !== void 0 && (u[e][a].outsideClickHide = t.outsideClickHide), t.escapeKeyHide !== void 0 && (u[e][a].escapeKeyHide = t.escapeKeyHide);
+  }, y = (a) => (f) => {
+    f.key === "Escape" && (o(a, !1), h());
+  }, m = (a) => (f) => {
+    if (!u[e]) return;
+    const x = f.target, [w] = Object.keys(u[e]).filter((Z) => u[e][Z].visible === !0), D = document.getElementById(w), Y = document.querySelector(`[data-toggle="visibility-${w}"]`)?.contains(f.target);
+    D && !D.contains(x) && !Y && (o(a ?? i, !1), h());
+  }, s = (a) => {
+    (u[e]?.[a ?? i]).mouseOverToggle === !0 && ($.value = a ?? i, C.value = setTimeout(() => {
+      n(!0, a);
+    }, F));
+  }, l = (a) => {
+    (u[e]?.[a ?? i]).mouseOverToggle === !0 && ($.value = null, clearTimeout(C.value), C.value = setTimeout(() => {
+      $.value !== (a ?? i) && (o(a ?? i, !1), h());
+    }, F));
+  }, v = (a) => {
+    const f = u[e]?.[a];
+    f?.outsideClickHide && (document.addEventListener("click", m(a)), document.addEventListener("touchend", m(a))), f?.escapeKeyHide && document.addEventListener("keydown", y(a));
+  }, h = () => {
+    u[e] && Object.keys(u[e]).forEach((a) => {
+      document.removeEventListener("click", m(a)), document.removeEventListener("touchend", m(a)), document.removeEventListener("keydown", y(a));
+    });
   };
-  return U(() => {
-    m.value[e] || v();
+  K(() => {
+    t.id !== void 0 && (b(t.id), ue(() => {
+      t.visibleOnMount && n(!0);
+    }));
   }), ce(() => {
-    p();
-  }), {
-    state: m,
-    timeout: g,
-    toggle: l,
-    toggleSingle: h,
-    setCollapsed: a,
-    setSingleCollapsed: i,
-    isCollapsed: n,
-    reset: v,
-    onMouseEnter: E,
-    onMouseLeave: q,
-    focusChange: b,
-    onClickToggle: X,
-    onClickOpen: D
+    h();
+  });
+  const _ = g(() => t.id ? {
+    "data-toggle": `visibility-${i}`,
+    onclick: () => n(!r(i))
+  } : {});
+  return {
+    visibilityState: u,
+    create: b,
+    setState: o,
+    isVisible: r,
+    onMouseEnter: s,
+    onMouseLeave: l,
+    setVisibility: n,
+    toggleProps: _
   };
 }
 export {
   Re as ActionContent,
-  Ee as BaseLink,
-  ge as ErrorList,
-  F as Icon,
-  pe as InputLabel,
+  Ae as BaseLink,
+  pe as ErrorList,
+  qe as FocusTrap,
+  z as Icon,
+  be as InputLabel,
   $e as InputWrap,
-  ve as cn,
-  we as debounce,
+  fe as cn,
+  Ce as debounce,
   Te as generateRandomId,
-  P as isRouterLink,
-  qe as useCollapse,
-  J as useInput,
-  Ie as useRouter,
-  Q as useValidation
+  H as isRouterLink,
+  Q as useInput,
+  Be as useRouter,
+  X as useValidation,
+  De as useVisibility
 };

package/dist/styles/utilities/containers.css

@@ -43,6 +43,9 @@
 .is-flex-row {
   flex-direction: row;
 }
+.is-overflow-hidden {
+  overflow: hidden;
+}
 .is-12 {
   flex: 0 0 100%;
   max-width: 100%;

package/dist/styles/utilities/text.css

@@ -25,6 +25,13 @@
 .has-text-center {
   text-align: center !important;
 }
+.has-text-label-3xl {
+  font-family: var(--Label-3XL-font-label-3xl-family) !important;
+  font-size: var(--Label-3XL-font-label-3xl-size) !important;
+  font-style: normal;
+  font-weight: 600;
+  line-height: var(--Label-3XL-font-label-3xl-lineheight) !important;
+}
 .has-text-label-small {
   font-family: var(--Label-ExtraSmall-font-label-xs-family) !important;
   font-size: var(--Label-ExtraSmall-font-label-xs-size) !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phila/phila-ui-core",
-  "version": "2.4.0",
+  "version": "3.0.0-beta.3",
   "type": "module",
   "description": "Core utilities and styles for Phila UI library",
   "main": "./dist/index.js",