@skdx/vue 0.26.0 → 0.27.0

package/dist/navigation-menu/NavigationMenu.vue.d.cts

@@ -19,6 +19,13 @@ type __VLS_Props = {
     delayDuration?: number;
     /** Window after closing during which re-hovering a sibling trigger opens instantly (ms). */
     skipDelayDuration?: number;
+    /**
+     * Axis the menu runs along. Sets `data-orientation` on the root and the
+     * list, switches roving focus between Left/Right and Up/Down, and is what
+     * the skin keys its vertical layout off. Use `'vertical'` for sidebars,
+     * footer link columns and mobile drawers.
+     */
+    orientation?: 'horizontal' | 'vertical';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -33,6 +40,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
 }>, {
     value: string;
     defaultValue: string;
+    orientation: "horizontal" | "vertical";
     delayDuration: number;
     skipDelayDuration: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/navigation-menu/NavigationMenu.vue.d.ts

@@ -19,6 +19,13 @@ type __VLS_Props = {
     delayDuration?: number;
     /** Window after closing during which re-hovering a sibling trigger opens instantly (ms). */
     skipDelayDuration?: number;
+    /**
+     * Axis the menu runs along. Sets `data-orientation` on the root and the
+     * list, switches roving focus between Left/Right and Up/Down, and is what
+     * the skin keys its vertical layout off. Use `'vertical'` for sidebars,
+     * footer link columns and mobile drawers.
+     */
+    orientation?: 'horizontal' | 'vertical';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -33,6 +40,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
 }>, {
     value: string;
     defaultValue: string;
+    orientation: "horizontal" | "vertical";
     delayDuration: number;
     skipDelayDuration: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/navigation-menu/NavigationMenu.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const _=require("./context.cjs");let t=require("vue");var g={class:"skdx-navigation-menu","data-part":"root","data-skdx-component":"navigation-menu","aria-label":"Main"},D=150,C=(0,t.defineComponent)({__name:"NavigationMenu",props:{value:{default:void 0},defaultValue:{default:""},delayDuration:{default:200},skipDelayDuration:{default:300}},emits:["update:value","value-change"],setup(s,{emit:w}){const a=s,r=w,d=(0,t.ref)(a.defaultValue),m=(0,t.computed)(()=>a.value??d.value);let u=!0,n=0,o=0,l=0;function i(e){a.value===void 0&&(d.value=e),window.clearTimeout(l),e?u=!1:l=window.setTimeout(()=>{u=!0},a.skipDelayDuration),r("update:value",e),r("value-change",e)}(0,t.onBeforeUnmount)(()=>{window.clearTimeout(n),window.clearTimeout(o),window.clearTimeout(l)});function v(e){window.clearTimeout(o),window.clearTimeout(n),u?n=window.setTimeout(()=>i(e),a.delayDuration):i(e)}function c(){window.clearTimeout(n),window.clearTimeout(o),o=window.setTimeout(()=>i(""),D)}function T(){window.clearTimeout(o)}function f(e){window.clearTimeout(n),window.clearTimeout(o),i(e)}function p(){window.clearTimeout(n),window.clearTimeout(o),i("")}return(0,t.provide)(_.NAVIGATION_MENU_CONTEXT,{value:m,onTriggerEnter:v,onTriggerLeave:c,onContentEnter:T,onContentLeave:c,onItemSelect:f,onClose:p}),(e,k)=>((0,t.openBlock)(),(0,t.createElementBlock)("nav",g,[(0,t.renderSlot)(e.$slots,"default")]))}});exports.default=C;
+const _=require("./context.cjs");let t=require("vue");var g=["data-orientation"],D=150,C=(0,t.defineComponent)({__name:"NavigationMenu",props:{value:{default:void 0},defaultValue:{default:""},delayDuration:{default:200},skipDelayDuration:{default:300},orientation:{default:"horizontal"}},emits:["update:value","value-change"],setup(r,{emit:w}){const n=r,d=w,c=(0,t.ref)(n.defaultValue),m=(0,t.computed)(()=>n.value??c.value);let u=!0,a=0,o=0,l=0;function i(e){n.value===void 0&&(c.value=e),window.clearTimeout(l),e?u=!1:l=window.setTimeout(()=>{u=!0},n.skipDelayDuration),d("update:value",e),d("value-change",e)}(0,t.onBeforeUnmount)(()=>{window.clearTimeout(a),window.clearTimeout(o),window.clearTimeout(l)});function v(e){window.clearTimeout(o),window.clearTimeout(a),u?a=window.setTimeout(()=>i(e),n.delayDuration):i(e)}function s(){window.clearTimeout(a),window.clearTimeout(o),o=window.setTimeout(()=>i(""),D)}function T(){window.clearTimeout(o)}function f(e){window.clearTimeout(a),window.clearTimeout(o),i(e)}function p(){window.clearTimeout(a),window.clearTimeout(o),i("")}return(0,t.provide)(_.NAVIGATION_MENU_CONTEXT,{value:m,orientation:(0,t.computed)(()=>n.orientation),onTriggerEnter:v,onTriggerLeave:s,onContentEnter:T,onContentLeave:s,onItemSelect:f,onClose:p}),(e,k)=>((0,t.openBlock)(),(0,t.createElementBlock)("nav",{class:"skdx-navigation-menu","data-part":"root","data-skdx-component":"navigation-menu","aria-label":"Main","data-orientation":r.orientation},[(0,t.renderSlot)(e.$slots,"default")],8,g))}});exports.default=C;

package/dist/navigation-menu/NavigationMenu.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{NAVIGATION_MENU_CONTEXT as e}from"./context.js";import{computed as o,createElementBlock as a,defineComponent as t,onBeforeUnmount as n,openBlock as i,provide as u,ref as l,renderSlot as r}from"vue";var d={class:"skdx-navigation-menu","data-part":"root","data-skdx-component":"navigation-menu","aria-label":"Main"},w=/* @__PURE__ */t({__name:"NavigationMenu",props:{value:{default:void 0},defaultValue:{default:""},delayDuration:{default:200},skipDelayDuration:{default:300}},emits:["update:value","value-change"],setup(t,{emit:w}){const m=t,c=w,s=l(m.defaultValue),v=o(()=>m.value??s.value);let T=!0,f=0,p=0,g=0;function k(e){void 0===m.value&&(s.value=e),window.clearTimeout(g),e?T=!1:g=window.setTimeout(()=>{T=!0},m.skipDelayDuration),c("update:value",e),c("value-change",e)}function D(){window.clearTimeout(f),window.clearTimeout(p),p=window.setTimeout(()=>k(""),150)}return n(()=>{window.clearTimeout(f),window.clearTimeout(p),window.clearTimeout(g)}),u(e,{value:v,onTriggerEnter:function(e){window.clearTimeout(p),window.clearTimeout(f),T?f=window.setTimeout(()=>k(e),m.delayDuration):k(e)},onTriggerLeave:D,onContentEnter:function(){window.clearTimeout(p)},onContentLeave:D,onItemSelect:function(e){window.clearTimeout(f),window.clearTimeout(p),k(e)},onClose:function(){window.clearTimeout(f),window.clearTimeout(p),k("")}}),(e,o)=>(i(),a("nav",d,[r(e.$slots,"default")]))}});export{w as default};
+import{NAVIGATION_MENU_CONTEXT as e}from"./context.js";import{computed as o,createElementBlock as a,defineComponent as t,onBeforeUnmount as n,openBlock as i,provide as u,ref as l,renderSlot as r}from"vue";var d=["data-orientation"],w=/* @__PURE__ */t({__name:"NavigationMenu",props:{value:{default:void 0},defaultValue:{default:""},delayDuration:{default:200},skipDelayDuration:{default:300},orientation:{default:"horizontal"}},emits:["update:value","value-change"],setup(t,{emit:w}){const m=t,c=w,s=l(m.defaultValue),v=o(()=>m.value??s.value);let T=!0,f=0,p=0,g=0;function k(e){void 0===m.value&&(s.value=e),window.clearTimeout(g),e?T=!1:g=window.setTimeout(()=>{T=!0},m.skipDelayDuration),c("update:value",e),c("value-change",e)}function D(){window.clearTimeout(f),window.clearTimeout(p),p=window.setTimeout(()=>k(""),150)}return n(()=>{window.clearTimeout(f),window.clearTimeout(p),window.clearTimeout(g)}),u(e,{value:v,orientation:o(()=>m.orientation),onTriggerEnter:function(e){window.clearTimeout(p),window.clearTimeout(f),T?f=window.setTimeout(()=>k(e),m.delayDuration):k(e)},onTriggerLeave:D,onContentEnter:function(){window.clearTimeout(p)},onContentLeave:D,onItemSelect:function(e){window.clearTimeout(f),window.clearTimeout(p),k(e)},onClose:function(){window.clearTimeout(f),window.clearTimeout(p),k("")}}),(e,o)=>(i(),a("nav",{class:"skdx-navigation-menu","data-part":"root","data-skdx-component":"navigation-menu","aria-label":"Main","data-orientation":t.orientation},[r(e.$slots,"default")],8,d))}});export{w as default};

package/dist/navigation-menu/NavigationMenuList.vue.d.cts

@@ -1,8 +1,11 @@
 /**
- * `<ul data-orientation="horizontal">` container for
- * `SkdxNavigationMenuItem`s. Provides roving-focus arrow-key navigation
- * (Left/Right) across items marked `data-skdx-nav-trigger`, wrapping by
- * default.
+ * `<ul data-orientation="…">` container for `SkdxNavigationMenuItem`s.
+ * Provides roving-focus arrow-key navigation across items marked
+ * `data-skdx-nav-trigger`, wrapping by default.
+ *
+ * The axis comes from the root's `orientation` prop: Left/Right when
+ * horizontal, Up/Down when vertical. Arrow keys that do not match the axis are
+ * left alone, so a vertical menu does not swallow Left/Right.
  */
 type __VLS_Props = {
     /** Whether arrow-key navigation wraps from the last trigger back to the first. */

package/dist/navigation-menu/NavigationMenuList.vue.d.ts

@@ -1,8 +1,11 @@
 /**
- * `<ul data-orientation="horizontal">` container for
- * `SkdxNavigationMenuItem`s. Provides roving-focus arrow-key navigation
- * (Left/Right) across items marked `data-skdx-nav-trigger`, wrapping by
- * default.
+ * `<ul data-orientation="…">` container for `SkdxNavigationMenuItem`s.
+ * Provides roving-focus arrow-key navigation across items marked
+ * `data-skdx-nav-trigger`, wrapping by default.
+ *
+ * The axis comes from the root's `orientation` prop: Left/Right when
+ * horizontal, Up/Down when vertical. Arrow keys that do not match the axis are
+ * left alone, so a vertical menu does not swallow Left/Right.
  */
 type __VLS_Props = {
     /** Whether arrow-key navigation wraps from the last trigger back to the first. */

package/dist/navigation-menu/NavigationMenuList.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const s=require("../utils/direction.cjs");let i=require("vue");var _="[data-skdx-nav-trigger]",g=(0,i.defineComponent)({__name:"NavigationMenuList",props:{loop:{type:Boolean,default:!0}},setup(f){const l=(0,i.ref)(null),d=s.useDirection();function c(n,r){const o=s.directionalKey(n.key,n.currentTarget,d()),a=l.value;if(!a)return;const t=Array.from(a.querySelectorAll(_));if(t.length===0)return;const u=t.indexOf(document.activeElement);let e;o==="ArrowRight"?(e=u+1,e>=t.length&&(e=r?0:t.length-1)):o==="ArrowLeft"&&(e=u-1,e<0&&(e=r?t.length-1:0)),e!==void 0&&(n.preventDefault(),t[e]?.focus())}return(n,r)=>((0,i.openBlock)(),(0,i.createElementBlock)("ul",{class:"skdx-navigation-menu__list","data-part":"list",ref_key:"listRef",ref:l,"data-orientation":"horizontal",onKeydown:r[0]||(r[0]=o=>c(o,f.loop))},[(0,i.renderSlot)(n.$slots,"default")],544))}});exports.default=g;
+const d=require("../utils/direction.cjs"),x=require("./context.cjs");let t=require("vue");var m=["data-orientation"],y="[data-skdx-nav-trigger]",k=(0,t.defineComponent)({__name:"NavigationMenuList",props:{loop:{type:Boolean,default:!0}},setup(f){const a=(0,t.ref)(null),v=d.useDirection(),u=(0,t.inject)(x.NAVIGATION_MENU_CONTEXT);if(!u)throw new Error("<SkdxNavigationMenuList> must be used inside <SkdxNavigationMenu>.");const l=(0,t.computed)(()=>u.orientation.value);function _(r,i){const o=d.directionalKey(r.key,r.currentTarget,v()),s=a.value;if(!s)return;const n=Array.from(s.querySelectorAll(y));if(n.length===0)return;const c=n.indexOf(document.activeElement),[p,g]=l.value==="vertical"?["ArrowDown","ArrowUp"]:["ArrowRight","ArrowLeft"];let e;o===p?(e=c+1,e>=n.length&&(e=i?0:n.length-1)):o===g&&(e=c-1,e<0&&(e=i?n.length-1:0)),e!==void 0&&(r.preventDefault(),n[e]?.focus())}return(r,i)=>((0,t.openBlock)(),(0,t.createElementBlock)("ul",{class:"skdx-navigation-menu__list","data-part":"list",ref_key:"listRef",ref:a,"data-orientation":l.value,onKeydown:i[0]||(i[0]=o=>_(o,f.loop))},[(0,t.renderSlot)(r.$slots,"default")],40,m))}});exports.default=k;

package/dist/navigation-menu/NavigationMenuList.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{directionalKey as e,useDirection as t}from"../utils/direction.js";import{createElementBlock as o,defineComponent as n,openBlock as r,ref as a,renderSlot as l}from"vue";var i=/* @__PURE__ */n({__name:"NavigationMenuList",props:{loop:{type:Boolean,default:!0}},setup(n){const i=a(null),s=t();return(t,a)=>(r(),o("ul",{class:"skdx-navigation-menu__list","data-part":"list",ref_key:"listRef",ref:i,"data-orientation":"horizontal",onKeydown:a[0]||(a[0]=t=>function(t,o){const n=e(t.key,t.currentTarget,s()),r=i.value;if(!r)return;const a=Array.from(r.querySelectorAll("[data-skdx-nav-trigger]"));if(0===a.length)return;const l=a.indexOf(document.activeElement);let u;"ArrowRight"===n?(u=l+1,u>=a.length&&(u=o?0:a.length-1)):"ArrowLeft"===n&&(u=l-1,u<0&&(u=o?a.length-1:0)),void 0!==u&&(t.preventDefault(),a[u]?.focus())}(t,n.loop))},[l(t.$slots,"default")],544))}});export{i as default};
+import{directionalKey as e,useDirection as t}from"../utils/direction.js";import{NAVIGATION_MENU_CONTEXT as o}from"./context.js";import{computed as n,createElementBlock as r,defineComponent as a,inject as i,openBlock as s,ref as l,renderSlot as u}from"vue";var c=["data-orientation"],d=/* @__PURE__ */a({__name:"NavigationMenuList",props:{loop:{type:Boolean,default:!0}},setup(a){const d=l(null),f=t(),p=i(o);if(!p)throw new Error("<SkdxNavigationMenuList> must be used inside <SkdxNavigationMenu>.");const m=n(()=>p.orientation.value);return(t,o)=>(s(),r("ul",{class:"skdx-navigation-menu__list","data-part":"list",ref_key:"listRef",ref:d,"data-orientation":m.value,onKeydown:o[0]||(o[0]=t=>function(t,o){const n=e(t.key,t.currentTarget,f()),r=d.value;if(!r)return;const a=Array.from(r.querySelectorAll("[data-skdx-nav-trigger]"));if(0===a.length)return;const i=a.indexOf(document.activeElement),[s,l]="vertical"===m.value?["ArrowDown","ArrowUp"]:["ArrowRight","ArrowLeft"];let u;n===s?(u=i+1,u>=a.length&&(u=o?0:a.length-1)):n===l&&(u=i-1,u<0&&(u=o?a.length-1:0)),void 0!==u&&(t.preventDefault(),a[u]?.focus())}(t,a.loop))},[u(t.$slots,"default")],40,c))}});export{d as default};

package/dist/navigation-menu/context.d.cts

@@ -2,6 +2,8 @@ import type { InjectionKey, Ref } from 'vue';
 /** @internal Injection key a NavigationMenu provides so its parts can read/drive shared hover-intent state. */
 export interface NavigationMenuContext {
     value: Readonly<Ref<string>>;
+    /** Axis the list lays out and arrow-keys travel along. Set on the root. */
+    orientation: Readonly<Ref<'horizontal' | 'vertical'>>;
     onTriggerEnter: (itemValue: string) => void;
     onTriggerLeave: () => void;
     onContentEnter: () => void;

package/dist/navigation-menu/context.d.ts

@@ -2,6 +2,8 @@ import type { InjectionKey, Ref } from 'vue';
 /** @internal Injection key a NavigationMenu provides so its parts can read/drive shared hover-intent state. */
 export interface NavigationMenuContext {
     value: Readonly<Ref<string>>;
+    /** Axis the list lays out and arrow-keys travel along. Set on the root. */
+    orientation: Readonly<Ref<'horizontal' | 'vertical'>>;
     onTriggerEnter: (itemValue: string) => void;
     onTriggerLeave: () => void;
     onContentEnter: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skdx/vue",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "Vue 3 (Composition API) components for the SkandaDX design system",
   "license": "MIT",
   "publishConfig": {
@@ -898,7 +898,7 @@
     "vitest": "^4.1.10",
     "vue": "^3.4.0",
     "vue-tsc": "^2.0.0",
-    "@skdx/shared": "0.26.0"
+    "@skdx/shared": "0.27.0"
   },
   "scripts": {
     "build": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\" && vite build && vue-tsc -p tsconfig.json --emitDeclarationOnly && node ../../scripts/declarations-cjs.mjs && node ../../scripts/minify-js.mjs dist",