primevue 3.17.0 → 3.18.0

package/dock/dock.esm.js

@@ -1,10 +1,16 @@
 import Ripple from 'primevue/ripple';
 import Tooltip from 'primevue/tooltip';
+import { ObjectUtils, DomHandler, UniqueComponentId } from 'primevue/utils';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, createElementVNode, Fragment, renderList, normalizeClass, createBlock, withCtx, withDirectives, resolveDynamicComponent, normalizeStyle, createVNode } from 'vue';
 
 var script$1 = {
     name: 'DockSub',
+    emits: ['focus', 'blur'],
     props: {
+        position: {
+            type: String,
+            default: 'bottom'
+        },
         model: {
             type: Array,
             default: null
@@ -17,42 +23,161 @@ var script$1 = {
             type: Boolean,
             default: true
         },
-        tooltipOptions: null
+        tooltipOptions: null,
+        menuId: {
+            type: String,
+            default: null
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        }
     },
     data() {
         return {
-            currentIndex: -3
+            currentIndex: -3,
+            focused: false,
+            focusedOptionIndex: -1
         };
     },
     methods: {
+        getItemId(index) {
+            return `${this.id}_${index}`;
+        },
+        getItemProp(processedItem, name) {
+            return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
+        },
+        isSameMenuItem(event) {
+            return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('.p-menuitem')));
+        },
         onListMouseLeave() {
             this.currentIndex = -3;
         },
         onItemMouseEnter(index) {
             this.currentIndex = index;
         },
-        onItemClick(event, item, navigate) {
-            if (this.disabled(item)) {
-                event.preventDefault();
+        onItemActionClick(event, navigate) {
+            navigate && navigate(event);
+        },
+        onItemClick(event, processedItem) {
+            if (this.isSameMenuItem(event)) {
+                const command = this.getItemProp(processedItem, 'command');
 
-                return;
+                command && command({ originalEvent: event, item: processedItem.item });
             }
+        },
+        onListFocus(event) {
+            this.focused = true;
+            this.changeFocusedOptionIndex(0);
+            this.$emit('focus', event);
+        },
+        onListBlur(event) {
+            this.focused = false;
+            this.focusedOptionIndex = -1;
+            this.$emit('blur', event);
+        },
+        onListKeyDown(event) {
+            switch (event.code) {
+                case 'ArrowDown': {
+                    if (this.position === 'left' || this.position === 'right') this.onArrowDownKey();
+                    event.preventDefault();
+                    break;
+                }
 
-            if (item.command) {
-                item.command({
-                    originalEvent: event,
-                    item: item
-                });
-            }
+                case 'ArrowUp': {
+                    if (this.position === 'left' || this.position === 'right') this.onArrowUpKey();
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowRight': {
+                    if (this.position === 'top' || this.position === 'bottom') this.onArrowDownKey();
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowLeft': {
+                    if (this.position === 'top' || this.position === 'bottom') this.onArrowUpKey();
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Home': {
+                    this.onHomeKey();
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'End': {
+                    this.onEndKey();
+                    event.preventDefault();
+                    break;
+                }
 
-            if (item.to && navigate) {
-                navigate(event);
+                case 'Enter':
+
+                case 'Space': {
+                    this.onSpaceKey(event);
+                    event.preventDefault();
+                    break;
+                }
             }
         },
-        itemClass(index) {
+        onArrowDownKey() {
+            const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex);
+
+            this.changeFocusedOptionIndex(optionIndex);
+        },
+        onArrowUpKey() {
+            const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex);
+
+            this.changeFocusedOptionIndex(optionIndex);
+        },
+        onHomeKey() {
+            this.changeFocusedOptionIndex(0);
+        },
+        onEndKey() {
+            this.changeFocusedOptionIndex(DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)').length - 1);
+        },
+        onSpaceKey() {
+            const element = DomHandler.findSingle(this.$refs.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
+            const anchorElement = element && DomHandler.findSingle(element, '.p-dock-link');
+
+            anchorElement ? anchorElement.click() : element && element.click();
+        },
+        findNextOptionIndex(index) {
+            const menuitems = DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)');
+            const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index);
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
+        },
+        findPrevOptionIndex(index) {
+            const menuitems = DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)');
+            const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index);
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
+        },
+        changeFocusedOptionIndex(index) {
+            const menuitems = DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)');
+
+            let order = index >= menuitems.length ? menuitems.length - 1 : index < 0 ? 0 : index;
+
+            this.focusedOptionIndex = menuitems[order].getAttribute('id');
+        },
+        itemClass(item, index, id) {
             return [
                 'p-dock-item',
                 {
+                    'p-focus': id === this.focusedOptionIndex,
+                    'p-disabled': this.disabled(item),
                     'p-dock-item-second-prev': this.currentIndex - 2 === index,
                     'p-dock-item-prev': this.currentIndex - 1 === index,
                     'p-dock-item-current': this.currentIndex === index,
@@ -61,11 +186,10 @@ var script$1 = {
                 }
             ];
         },
-        linkClass(item, routerProps) {
+        linkClass(routerProps) {
             return [
-                'p-dock-action',
+                'p-dock-link',
                 {
-                    'p-disabled': this.disabled(item),
                     'router-link-active': routerProps && routerProps.isActive,
                     'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
                 }
@@ -75,6 +199,14 @@ var script$1 = {
             return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         }
     },
+    computed: {
+        id() {
+            return this.menuId || UniqueComponentId();
+        },
+        focusedOptionId() {
+            return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
+        }
+    },
     directives: {
         ripple: Ripple,
         tooltip: Tooltip
@@ -82,9 +214,11 @@ var script$1 = {
 };
 
 const _hoisted_1 = { class: "p-dock-list-container" };
-const _hoisted_2 = ["onMouseenter"];
-const _hoisted_3 = ["href", "target", "onClick"];
-const _hoisted_4 = ["href", "target", "onClick", "tabindex"];
+const _hoisted_2 = ["id", "aria-orientation", "aria-activedescendant", "tabindex", "aria-label", "aria-labelledby"];
+const _hoisted_3 = ["id", "aria-label", "aria-disabled", "onClick", "onMouseenter"];
+const _hoisted_4 = { class: "p-menuitem-content" };
+const _hoisted_5 = ["href", "target", "onClick"];
+const _hoisted_6 = ["href", "target"];
 
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_router_link = resolveComponent("router-link");
@@ -94,81 +228,97 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", _hoisted_1, [
     createElementVNode("ul", {
       ref: "list",
+      id: $options.id,
       class: "p-dock-list",
       role: "menu",
-      onMouseleave: _cache[0] || (_cache[0] = (...args) => ($options.onListMouseLeave && $options.onListMouseLeave(...args)))
+      "aria-orientation": $props.position === 'bottom' || $props.position === 'top' ? 'horizontal' : 'vertical',
+      "aria-activedescendant": $data.focused ? $options.focusedOptionId : undefined,
+      tabindex: $props.tabindex,
+      "aria-label": _ctx.ariaLabel,
+      "aria-labelledby": _ctx.ariaLabelledby,
+      onFocus: _cache[0] || (_cache[0] = (...args) => ($options.onListFocus && $options.onListFocus(...args))),
+      onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onListBlur && $options.onListBlur(...args))),
+      onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onListKeyDown && $options.onListKeyDown(...args))),
+      onMouseleave: _cache[3] || (_cache[3] = (...args) => ($options.onListMouseLeave && $options.onListMouseLeave(...args)))
     }, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList($props.model, (item, index) => {
+      (openBlock(true), createElementBlock(Fragment, null, renderList($props.model, (processedItem, index) => {
         return (openBlock(), createElementBlock("li", {
           key: index,
-          class: normalizeClass($options.itemClass(index)),
-          role: "none",
+          id: $options.getItemId(index),
+          class: normalizeClass($options.itemClass(processedItem, index, $options.getItemId(index))),
+          role: "menuitem",
+          "aria-label": processedItem.label,
+          "aria-disabled": $options.disabled(processedItem),
+          onClick: $event => ($options.onItemClick($event, processedItem)),
           onMouseenter: $event => ($options.onItemMouseEnter(index))
         }, [
-          (!$props.templates['item'])
-            ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                (item.to && !$options.disabled(item))
-                  ? (openBlock(), createBlock(_component_router_link, {
-                      key: 0,
-                      to: item.to,
-                      custom: ""
-                    }, {
-                      default: withCtx(({ navigate, href, isActive, isExactActive }) => [
-                        withDirectives((openBlock(), createElementBlock("a", {
-                          href: href,
-                          role: "menuitem",
-                          class: normalizeClass($options.linkClass(item, { isActive, isExactActive })),
-                          target: item.target,
-                          onClick: $event => ($options.onItemClick($event, item, navigate))
-                        }, [
-                          (!$props.templates['icon'])
-                            ? withDirectives((openBlock(), createElementBlock("span", {
-                                key: 0,
-                                class: normalizeClass(['p-dock-action-icon', item.icon])
-                              }, null, 2)), [
-                                [_directive_ripple]
-                              ])
-                            : (openBlock(), createBlock(resolveDynamicComponent($props.templates['icon']), {
-                                key: 1,
-                                item: item
-                              }, null, 8, ["item"]))
-                        ], 10, _hoisted_3)), [
-                          [_directive_tooltip, { value: item.label, disabled: !$props.tooltipOptions }, $props.tooltipOptions]
-                        ])
-                      ]),
-                      _: 2
-                    }, 1032, ["to"]))
-                  : withDirectives((openBlock(), createElementBlock("a", {
-                      key: 1,
-                      href: item.url,
-                      role: "menuitem",
-                      class: normalizeClass($options.linkClass(item)),
-                      target: item.target,
-                      onClick: $event => ($options.onItemClick($event, item)),
-                      tabindex: $options.disabled(item) ? null : '0'
-                    }, [
-                      (!$props.templates['icon'])
-                        ? withDirectives((openBlock(), createElementBlock("span", {
-                            key: 0,
-                            class: normalizeClass(['p-dock-action-icon', item.icon])
-                          }, null, 2)), [
-                            [_directive_ripple]
+          createElementVNode("div", _hoisted_4, [
+            (!$props.templates['item'])
+              ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                  (processedItem.to && !$options.disabled(processedItem))
+                    ? (openBlock(), createBlock(_component_router_link, {
+                        key: 0,
+                        to: processedItem.to,
+                        custom: ""
+                      }, {
+                        default: withCtx(({ navigate, href, isActive, isExactActive }) => [
+                          withDirectives((openBlock(), createElementBlock("a", {
+                            href: href,
+                            class: normalizeClass($options.linkClass({ isActive, isExactActive })),
+                            target: processedItem.target,
+                            tabindex: "-1",
+                            "aria-hidden": "true",
+                            onClick: $event => ($options.onItemActionClick($event, processedItem, navigate))
+                          }, [
+                            (!$props.templates['icon'])
+                              ? withDirectives((openBlock(), createElementBlock("span", {
+                                  key: 0,
+                                  class: normalizeClass(['p-dock-icon', processedItem.icon])
+                                }, null, 2)), [
+                                  [_directive_ripple]
+                                ])
+                              : (openBlock(), createBlock(resolveDynamicComponent($props.templates['icon']), {
+                                  key: 1,
+                                  item: processedItem
+                                }, null, 8, ["item"]))
+                          ], 10, _hoisted_5)), [
+                            [_directive_tooltip, { value: processedItem.label, disabled: !$props.tooltipOptions }, $props.tooltipOptions]
                           ])
-                        : (openBlock(), createBlock(resolveDynamicComponent($props.templates['icon']), {
-                            key: 1,
-                            item: item
-                          }, null, 8, ["item"]))
-                    ], 10, _hoisted_4)), [
-                      [_directive_tooltip, { value: item.label, disabled: !$props.tooltipOptions }, $props.tooltipOptions]
-                    ])
-              ], 64))
-            : (openBlock(), createBlock(resolveDynamicComponent($props.templates['item']), {
-                key: 1,
-                item: item
-              }, null, 8, ["item"]))
-        ], 42, _hoisted_2))
+                        ]),
+                        _: 2
+                      }, 1032, ["to"]))
+                    : withDirectives((openBlock(), createElementBlock("a", {
+                        key: 1,
+                        href: processedItem.url,
+                        class: normalizeClass($options.linkClass()),
+                        target: processedItem.target,
+                        tabindex: "-1",
+                        "aria-hidden": "true"
+                      }, [
+                        (!$props.templates['icon'])
+                          ? withDirectives((openBlock(), createElementBlock("span", {
+                              key: 0,
+                              class: normalizeClass(['p-dock-icon', processedItem.icon])
+                            }, null, 2)), [
+                              [_directive_ripple]
+                            ])
+                          : (openBlock(), createBlock(resolveDynamicComponent($props.templates['icon']), {
+                              key: 1,
+                              item: processedItem
+                            }, null, 8, ["item"]))
+                      ], 10, _hoisted_6)), [
+                        [_directive_tooltip, { value: processedItem.label, disabled: !$props.tooltipOptions }, $props.tooltipOptions]
+                      ])
+                ], 64))
+              : (openBlock(), createBlock(resolveDynamicComponent($props.templates['item']), {
+                  key: 1,
+                  item: processedItem,
+                  index: index
+                }, null, 8, ["item", "index"]))
+          ])
+        ], 42, _hoisted_3))
       }), 128))
-    ], 544)
+    ], 40, _hoisted_2)
   ]))
 }
 
@@ -188,6 +338,22 @@ var script = {
         exact: {
             type: Boolean,
             default: true
+        },
+        menuId: {
+            type: String,
+            default: null
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
         }
     },
     computed: {
@@ -211,8 +377,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       model: $props.model,
       templates: _ctx.$slots,
       exact: $props.exact,
-      tooltipOptions: $props.tooltipOptions
-    }, null, 8, ["model", "templates", "exact", "tooltipOptions"])
+      tooltipOptions: $props.tooltipOptions,
+      position: $props.position,
+      menuId: $props.menuId,
+      "aria-label": _ctx.ariaLabel,
+      "aria-labelledby": _ctx.ariaLabelledby,
+      tabindex: $props.tabindex
+    }, null, 8, ["model", "templates", "exact", "tooltipOptions", "position", "menuId", "aria-label", "aria-labelledby", "tabindex"])
   ], 6))
 }
 
@@ -243,7 +414,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-dock {\n    position: absolute;\n    z-index: 1;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    pointer-events: none;\n}\n.p-dock-list-container {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    pointer-events: auto;\n}\n.p-dock-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-dock-item {\n    -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: transform;\n}\n.p-dock-action {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n    cursor: default;\n}\n.p-dock-item-second-prev,\n.p-dock-item-second-next {\n    -webkit-transform: scale(1.2);\n            transform: scale(1.2);\n}\n.p-dock-item-prev,\n.p-dock-item-next {\n    -webkit-transform: scale(1.4);\n            transform: scale(1.4);\n}\n.p-dock-item-current {\n    -webkit-transform: scale(1.6);\n            transform: scale(1.6);\n    z-index: 1;\n}\n\n/* Position */\n/* top */\n.p-dock-top {\n    left: 0;\n    top: 0;\n    width: 100%;\n}\n.p-dock-top .p-dock-item {\n    -webkit-transform-origin: center top;\n            transform-origin: center top;\n}\n\n/* bottom */\n.p-dock-bottom {\n    left: 0;\n    bottom: 0;\n    width: 100%;\n}\n.p-dock-bottom .p-dock-item {\n    -webkit-transform-origin: center bottom;\n            transform-origin: center bottom;\n}\n\n/* right */\n.p-dock-right {\n    right: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-right .p-dock-item {\n    -webkit-transform-origin: center right;\n            transform-origin: center right;\n}\n.p-dock-right .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n\n/* left */\n.p-dock-left {\n    left: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-left .p-dock-item {\n    -webkit-transform-origin: center left;\n            transform-origin: center left;\n}\n.p-dock-left .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n";
+var css_248z = "\n.p-dock {\n    position: absolute;\n    z-index: 1;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    pointer-events: none;\n}\n.p-dock-list-container {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    pointer-events: auto;\n}\n.p-dock-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-dock-item {\n    -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: transform;\n}\n.p-dock-link {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n    cursor: default;\n}\n.p-dock-item-second-prev,\n.p-dock-item-second-next {\n    -webkit-transform: scale(1.2);\n            transform: scale(1.2);\n}\n.p-dock-item-prev,\n.p-dock-item-next {\n    -webkit-transform: scale(1.4);\n            transform: scale(1.4);\n}\n.p-dock-item-current {\n    -webkit-transform: scale(1.6);\n            transform: scale(1.6);\n    z-index: 1;\n}\n\n/* Position */\n/* top */\n.p-dock-top {\n    left: 0;\n    top: 0;\n    width: 100%;\n}\n.p-dock-top .p-dock-item {\n    -webkit-transform-origin: center top;\n            transform-origin: center top;\n}\n\n/* bottom */\n.p-dock-bottom {\n    left: 0;\n    bottom: 0;\n    width: 100%;\n}\n.p-dock-bottom .p-dock-item {\n    -webkit-transform-origin: center bottom;\n            transform-origin: center bottom;\n}\n\n/* right */\n.p-dock-right {\n    right: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-right .p-dock-item {\n    -webkit-transform-origin: center right;\n            transform-origin: center right;\n}\n.p-dock-right .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n\n/* left */\n.p-dock-left {\n    left: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-left .p-dock-item {\n    -webkit-transform-origin: center left;\n            transform-origin: center left;\n}\n.p-dock-left .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n";
 styleInject(css_248z);
 
 script.render = render;

package/dock/dock.esm.min.js

@@ -1 +1 @@
-import e from"primevue/ripple";import t from"primevue/tooltip";import{resolveComponent as n,resolveDirective as i,openBlock as o,createElementBlock as l,createElementVNode as r,Fragment as s,renderList as c,normalizeClass as a,createBlock as d,withCtx as p,withDirectives as m,resolveDynamicComponent as k,normalizeStyle as u,createVNode as f}from"vue";var b={name:"DockSub",props:{model:{type:Array,default:null},templates:{type:null,default:null},exact:{type:Boolean,default:!0},tooltipOptions:null},data:()=>({currentIndex:-3}),methods:{onListMouseLeave(){this.currentIndex=-3},onItemMouseEnter(e){this.currentIndex=e},onItemClick(e,t,n){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&n&&n(e))},itemClass(e){return["p-dock-item",{"p-dock-item-second-prev":this.currentIndex-2===e,"p-dock-item-prev":this.currentIndex-1===e,"p-dock-item-current":this.currentIndex===e,"p-dock-item-next":this.currentIndex+1===e,"p-dock-item-second-next":this.currentIndex+2===e}]},linkClass(e,t){return["p-dock-action",{"p-disabled":this.disabled(e),"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled},directives:{ripple:e,tooltip:t}};const x={class:"p-dock-list-container"},h=["onMouseenter"],y=["href","target","onClick"],g=["href","target","onClick","tabindex"];b.render=function(e,t,u,f,b,v){const w=n("router-link"),C=i("ripple"),I=i("tooltip");return o(),l("div",x,[r("ul",{ref:"list",class:"p-dock-list",role:"menu",onMouseleave:t[0]||(t[0]=(...e)=>v.onListMouseLeave&&v.onListMouseLeave(...e))},[(o(!0),l(s,null,c(u.model,((e,t)=>(o(),l("li",{key:t,class:a(v.itemClass(t)),role:"none",onMouseenter:e=>v.onItemMouseEnter(t)},[u.templates.item?(o(),d(k(u.templates.item),{key:1,item:e},null,8,["item"])):(o(),l(s,{key:0},[e.to&&!v.disabled(e)?(o(),d(w,{key:0,to:e.to,custom:""},{default:p((({navigate:t,href:n,isActive:i,isExactActive:r})=>[m((o(),l("a",{href:n,role:"menuitem",class:a(v.linkClass(e,{isActive:i,isExactActive:r})),target:e.target,onClick:n=>v.onItemClick(n,e,t)},[u.templates.icon?(o(),d(k(u.templates.icon),{key:1,item:e},null,8,["item"])):m((o(),l("span",{key:0,class:a(["p-dock-action-icon",e.icon])},null,2)),[[C]])],10,y)),[[I,{value:e.label,disabled:!u.tooltipOptions},u.tooltipOptions]])])),_:2},1032,["to"])):m((o(),l("a",{key:1,href:e.url,role:"menuitem",class:a(v.linkClass(e)),target:e.target,onClick:t=>v.onItemClick(t,e),tabindex:v.disabled(e)?null:"0"},[u.templates.icon?(o(),d(k(u.templates.icon),{key:1,item:e},null,8,["item"])):m((o(),l("span",{key:0,class:a(["p-dock-action-icon",e.icon])},null,2)),[[C]])],10,g)),[[I,{value:e.label,disabled:!u.tooltipOptions},u.tooltipOptions]])],64))],42,h)))),128))],544)])};var v={name:"Dock",props:{position:{type:String,default:"bottom"},model:null,class:null,style:null,tooltipOptions:null,exact:{type:Boolean,default:!0}},computed:{containerClass(){return["p-dock p-component",`p-dock-${this.position}`,this.class]}},components:{DockSub:b}};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-dock {\n    position: absolute;\n    z-index: 1;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    pointer-events: none;\n}\n.p-dock-list-container {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    pointer-events: auto;\n}\n.p-dock-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-dock-item {\n    -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: transform;\n}\n.p-dock-action {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n    cursor: default;\n}\n.p-dock-item-second-prev,\n.p-dock-item-second-next {\n    -webkit-transform: scale(1.2);\n            transform: scale(1.2);\n}\n.p-dock-item-prev,\n.p-dock-item-next {\n    -webkit-transform: scale(1.4);\n            transform: scale(1.4);\n}\n.p-dock-item-current {\n    -webkit-transform: scale(1.6);\n            transform: scale(1.6);\n    z-index: 1;\n}\n\n/* Position */\n/* top */\n.p-dock-top {\n    left: 0;\n    top: 0;\n    width: 100%;\n}\n.p-dock-top .p-dock-item {\n    -webkit-transform-origin: center top;\n            transform-origin: center top;\n}\n\n/* bottom */\n.p-dock-bottom {\n    left: 0;\n    bottom: 0;\n    width: 100%;\n}\n.p-dock-bottom .p-dock-item {\n    -webkit-transform-origin: center bottom;\n            transform-origin: center bottom;\n}\n\n/* right */\n.p-dock-right {\n    right: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-right .p-dock-item {\n    -webkit-transform-origin: center right;\n            transform-origin: center right;\n}\n.p-dock-right .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n\n/* left */\n.p-dock-left {\n    left: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-left .p-dock-item {\n    -webkit-transform-origin: center left;\n            transform-origin: center left;\n}\n.p-dock-left .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n"),v.render=function(e,t,i,r,s,c){const d=n("DockSub");return o(),l("div",{class:a(c.containerClass),style:u(i.style)},[f(d,{model:i.model,templates:e.$slots,exact:i.exact,tooltipOptions:i.tooltipOptions},null,8,["model","templates","exact","tooltipOptions"])],6)};export{v as default};
+import e from"primevue/ripple";import t from"primevue/tooltip";import{ObjectUtils as n,DomHandler as i,UniqueComponentId as o}from"primevue/utils";import{resolveComponent as l,resolveDirective as s,openBlock as r,createElementBlock as a,createElementVNode as d,Fragment as c,renderList as p,normalizeClass as u,createBlock as m,withCtx as f,withDirectives as b,resolveDynamicComponent as k,normalizeStyle as x,createVNode as h}from"vue";var y={name:"DockSub",emits:["focus","blur"],props:{position:{type:String,default:"bottom"},model:{type:Array,default:null},templates:{type:null,default:null},exact:{type:Boolean,default:!0},tooltipOptions:null,menuId:{type:String,default:null},tabindex:{type:Number,default:0},"aria-label":{type:String,default:null},"aria-labelledby":{type:String,default:null}},data:()=>({currentIndex:-3,focused:!1,focusedOptionIndex:-1}),methods:{getItemId(e){return`${this.id}_${e}`},getItemProp:(e,t)=>e&&e.item?n.getItemValue(e.item[t]):void 0,isSameMenuItem:e=>e.currentTarget&&(e.currentTarget.isSameNode(e.target)||e.currentTarget.isSameNode(e.target.closest(".p-menuitem"))),onListMouseLeave(){this.currentIndex=-3},onItemMouseEnter(e){this.currentIndex=e},onItemActionClick(e,t){t&&t(e)},onItemClick(e,t){if(this.isSameMenuItem(e)){const n=this.getItemProp(t,"command");n&&n({originalEvent:e,item:t.item})}},onListFocus(e){this.focused=!0,this.changeFocusedOptionIndex(0),this.$emit("focus",e)},onListBlur(e){this.focused=!1,this.focusedOptionIndex=-1,this.$emit("blur",e)},onListKeyDown(e){switch(e.code){case"ArrowDown":"left"!==this.position&&"right"!==this.position||this.onArrowDownKey(),e.preventDefault();break;case"ArrowUp":"left"!==this.position&&"right"!==this.position||this.onArrowUpKey(),e.preventDefault();break;case"ArrowRight":"top"!==this.position&&"bottom"!==this.position||this.onArrowDownKey(),e.preventDefault();break;case"ArrowLeft":"top"!==this.position&&"bottom"!==this.position||this.onArrowUpKey(),e.preventDefault();break;case"Home":this.onHomeKey(),e.preventDefault();break;case"End":this.onEndKey(),e.preventDefault();break;case"Enter":case"Space":this.onSpaceKey(e),e.preventDefault()}},onArrowDownKey(){const e=this.findNextOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(e)},onArrowUpKey(){const e=this.findPrevOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(e)},onHomeKey(){this.changeFocusedOptionIndex(0)},onEndKey(){this.changeFocusedOptionIndex(i.find(this.$refs.list,"li.p-dock-item:not(.p-disabled)").length-1)},onSpaceKey(){const e=i.findSingle(this.$refs.list,`li[id="${this.focusedOptionIndex}"]`),t=e&&i.findSingle(e,".p-dock-link");t?t.click():e&&e.click()},findNextOptionIndex(e){const t=[...i.find(this.$refs.list,"li.p-dock-item:not(.p-disabled)")].findIndex((t=>t.id===e));return t>-1?t+1:0},findPrevOptionIndex(e){const t=[...i.find(this.$refs.list,"li.p-dock-item:not(.p-disabled)")].findIndex((t=>t.id===e));return t>-1?t-1:0},changeFocusedOptionIndex(e){const t=i.find(this.$refs.list,"li.p-dock-item:not(.p-disabled)");let n=e>=t.length?t.length-1:e<0?0:e;this.focusedOptionIndex=t[n].getAttribute("id")},itemClass(e,t,n){return["p-dock-item",{"p-focus":n===this.focusedOptionIndex,"p-disabled":this.disabled(e),"p-dock-item-second-prev":this.currentIndex-2===t,"p-dock-item-prev":this.currentIndex-1===t,"p-dock-item-current":this.currentIndex===t,"p-dock-item-next":this.currentIndex+1===t,"p-dock-item-second-next":this.currentIndex+2===t}]},linkClass(e){return["p-dock-link",{"router-link-active":e&&e.isActive,"router-link-active-exact":this.exact&&e&&e.isExactActive}]},disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled},computed:{id(){return this.menuId||o()},focusedOptionId(){return-1!==this.focusedOptionIndex?this.focusedOptionIndex:null}},directives:{ripple:e,tooltip:t}};const g={class:"p-dock-list-container"},v=["id","aria-orientation","aria-activedescendant","tabindex","aria-label","aria-labelledby"],I=["id","aria-label","aria-disabled","onClick","onMouseenter"],w={class:"p-menuitem-content"},O=["href","target","onClick"],S=["href","target"];y.render=function(e,t,n,i,o,x){const h=l("router-link"),y=s("ripple"),A=s("tooltip");return r(),a("div",g,[d("ul",{ref:"list",id:x.id,class:"p-dock-list",role:"menu","aria-orientation":"bottom"===n.position||"top"===n.position?"horizontal":"vertical","aria-activedescendant":o.focused?x.focusedOptionId:void 0,tabindex:n.tabindex,"aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby,onFocus:t[0]||(t[0]=(...e)=>x.onListFocus&&x.onListFocus(...e)),onBlur:t[1]||(t[1]=(...e)=>x.onListBlur&&x.onListBlur(...e)),onKeydown:t[2]||(t[2]=(...e)=>x.onListKeyDown&&x.onListKeyDown(...e)),onMouseleave:t[3]||(t[3]=(...e)=>x.onListMouseLeave&&x.onListMouseLeave(...e))},[(r(!0),a(c,null,p(n.model,((e,t)=>(r(),a("li",{key:t,id:x.getItemId(t),class:u(x.itemClass(e,t,x.getItemId(t))),role:"menuitem","aria-label":e.label,"aria-disabled":x.disabled(e),onClick:t=>x.onItemClick(t,e),onMouseenter:e=>x.onItemMouseEnter(t)},[d("div",w,[n.templates.item?(r(),m(k(n.templates.item),{key:1,item:e,index:t},null,8,["item","index"])):(r(),a(c,{key:0},[e.to&&!x.disabled(e)?(r(),m(h,{key:0,to:e.to,custom:""},{default:f((({navigate:t,href:i,isActive:o,isExactActive:l})=>[b((r(),a("a",{href:i,class:u(x.linkClass({isActive:o,isExactActive:l})),target:e.target,tabindex:"-1","aria-hidden":"true",onClick:n=>x.onItemActionClick(n,e,t)},[n.templates.icon?(r(),m(k(n.templates.icon),{key:1,item:e},null,8,["item"])):b((r(),a("span",{key:0,class:u(["p-dock-icon",e.icon])},null,2)),[[y]])],10,O)),[[A,{value:e.label,disabled:!n.tooltipOptions},n.tooltipOptions]])])),_:2},1032,["to"])):b((r(),a("a",{key:1,href:e.url,class:u(x.linkClass()),target:e.target,tabindex:"-1","aria-hidden":"true"},[n.templates.icon?(r(),m(k(n.templates.icon),{key:1,item:e},null,8,["item"])):b((r(),a("span",{key:0,class:u(["p-dock-icon",e.icon])},null,2)),[[y]])],10,S)),[[A,{value:e.label,disabled:!n.tooltipOptions},n.tooltipOptions]])],64))])],42,I)))),128))],40,v)])};var A={name:"Dock",props:{position:{type:String,default:"bottom"},model:null,class:null,style:null,tooltipOptions:null,exact:{type:Boolean,default:!0},menuId:{type:String,default:null},tabindex:{type:Number,default:0},"aria-label":{type:String,default:null},"aria-labelledby":{type:String,default:null}},computed:{containerClass(){return["p-dock p-component",`p-dock-${this.position}`,this.class]}},components:{DockSub:y}};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-dock {\n    position: absolute;\n    z-index: 1;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    pointer-events: none;\n}\n.p-dock-list-container {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    pointer-events: auto;\n}\n.p-dock-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-dock-item {\n    -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: transform;\n}\n.p-dock-link {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n    cursor: default;\n}\n.p-dock-item-second-prev,\n.p-dock-item-second-next {\n    -webkit-transform: scale(1.2);\n            transform: scale(1.2);\n}\n.p-dock-item-prev,\n.p-dock-item-next {\n    -webkit-transform: scale(1.4);\n            transform: scale(1.4);\n}\n.p-dock-item-current {\n    -webkit-transform: scale(1.6);\n            transform: scale(1.6);\n    z-index: 1;\n}\n\n/* Position */\n/* top */\n.p-dock-top {\n    left: 0;\n    top: 0;\n    width: 100%;\n}\n.p-dock-top .p-dock-item {\n    -webkit-transform-origin: center top;\n            transform-origin: center top;\n}\n\n/* bottom */\n.p-dock-bottom {\n    left: 0;\n    bottom: 0;\n    width: 100%;\n}\n.p-dock-bottom .p-dock-item {\n    -webkit-transform-origin: center bottom;\n            transform-origin: center bottom;\n}\n\n/* right */\n.p-dock-right {\n    right: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-right .p-dock-item {\n    -webkit-transform-origin: center right;\n            transform-origin: center right;\n}\n.p-dock-right .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n\n/* left */\n.p-dock-left {\n    left: 0;\n    top: 0;\n    height: 100%;\n}\n.p-dock-left .p-dock-item {\n    -webkit-transform-origin: center left;\n            transform-origin: center left;\n}\n.p-dock-left .p-dock-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n"),A.render=function(e,t,n,i,o,s){const d=l("DockSub");return r(),a("div",{class:u(s.containerClass),style:x(n.style)},[h(d,{model:n.model,templates:e.$slots,exact:n.exact,tooltipOptions:n.tooltipOptions,position:n.position,menuId:n.menuId,"aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby,tabindex:n.tabindex},null,8,["model","templates","exact","tooltipOptions","position","menuId","aria-label","aria-labelledby","tabindex"])],6)};export{A as default};