primevue 3.16.2 → 3.18.0

package/dock/dock.cjs.js

@@ -2,6 +2,7 @@
 
 var Ripple = require('primevue/ripple');
 var Tooltip = require('primevue/tooltip');
+var utils = require('primevue/utils');
 var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -11,7 +12,12 @@ var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 
 var script$1 = {
     name: 'DockSub',
+    emits: ['focus', 'blur'],
     props: {
+        position: {
+            type: String,
+            default: 'bottom'
+        },
         model: {
             type: Array,
             default: null
@@ -24,67 +30,202 @@ 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 ? utils.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();
-                return;
-            }
+        onItemActionClick(event, navigate) {
+            navigate && navigate(event);
+        },
+        onItemClick(event, processedItem) {
+            if (this.isSameMenuItem(event)) {
+                const command = this.getItemProp(processedItem, 'command');
 
-            if (item.command) {
-                item.command({
-                    originalEvent: event,
-                    item: item
-                });
+                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.to && navigate) {
-                navigate(event);
+                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;
+                }
+
+                case 'Enter':
+
+                case 'Space': {
+                    this.onSpaceKey(event);
+                    event.preventDefault();
+                    break;
+                }
             }
         },
-        itemClass(index) {
-            return ['p-dock-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,
-                'p-dock-item-next': (this.currentIndex + 1) === index,
-                'p-dock-item-second-next': (this.currentIndex + 2) === index
-            }];
-        },
-        linkClass(item, routerProps) {
-            return ['p-dock-action', {
-                'p-disabled': this.disabled(item),
-                'router-link-active': routerProps && routerProps.isActive,
-                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-            }];
+        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(utils.DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)').length - 1);
+        },
+        onSpaceKey() {
+            const element = utils.DomHandler.findSingle(this.$refs.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
+            const anchorElement = element && utils.DomHandler.findSingle(element, '.p-dock-link');
+
+            anchorElement ? anchorElement.click() : element && element.click();
+        },
+        findNextOptionIndex(index) {
+            const menuitems = utils.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 = utils.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 = utils.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,
+                    'p-dock-item-next': this.currentIndex + 1 === index,
+                    'p-dock-item-second-next': this.currentIndex + 2 === index
+                }
+            ];
+        },
+        linkClass(routerProps) {
+            return [
+                'p-dock-link',
+                {
+                    'router-link-active': routerProps && routerProps.isActive,
+                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                }
+            ];
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
+        }
+    },
+    computed: {
+        id() {
+            return this.menuId || utils.UniqueComponentId();
+        },
+        focusedOptionId() {
+            return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
         }
     },
     directives: {
-        'ripple': Ripple__default["default"],
-        'tooltip': Tooltip__default["default"]
+        ripple: Ripple__default["default"],
+        tooltip: Tooltip__default["default"]
     }
 };
 
 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 = vue.resolveComponent("router-link");
@@ -94,81 +235,97 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
     vue.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)))
     }, [
-      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.model, (item, index) => {
+      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.model, (processedItem, index) => {
         return (vue.openBlock(), vue.createElementBlock("li", {
-          class: vue.normalizeClass($options.itemClass(index)),
           key: index,
-          role: "none",
+          id: $options.getItemId(index),
+          class: vue.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'])
-            ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                (item.to && !$options.disabled(item))
-                  ? (vue.openBlock(), vue.createBlock(_component_router_link, {
-                      key: 0,
-                      to: item.to,
-                      custom: ""
-                    }, {
-                      default: vue.withCtx(({navigate, href, isActive, isExactActive}) => [
-                        vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
-                          href: href,
-                          role: "menuitem",
-                          class: vue.normalizeClass($options.linkClass(item, {isActive, isExactActive})),
-                          target: item.target,
-                          onClick: $event => ($options.onItemClick($event, item, navigate))
-                        }, [
-                          (!$props.templates['icon'])
-                            ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
-                                key: 0,
-                                class: vue.normalizeClass(['p-dock-action-icon', item.icon])
-                              }, null, 2)), [
-                                [_directive_ripple]
-                              ])
-                            : (vue.openBlock(), vue.createBlock(vue.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"]))
-                  : vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
-                      key: 1,
-                      href: item.url,
-                      role: "menuitem",
-                      class: vue.normalizeClass($options.linkClass(item)),
-                      target: item.target,
-                      onClick: $event => ($options.onItemClick($event, item)),
-                      tabindex: $options.disabled(item) ? null : '0'
-                    }, [
-                      (!$props.templates['icon'])
-                        ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
-                            key: 0,
-                            class: vue.normalizeClass(['p-dock-action-icon', item.icon])
-                          }, null, 2)), [
-                            [_directive_ripple]
+          vue.createElementVNode("div", _hoisted_4, [
+            (!$props.templates['item'])
+              ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                  (processedItem.to && !$options.disabled(processedItem))
+                    ? (vue.openBlock(), vue.createBlock(_component_router_link, {
+                        key: 0,
+                        to: processedItem.to,
+                        custom: ""
+                      }, {
+                        default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
+                          vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                            href: href,
+                            class: vue.normalizeClass($options.linkClass({ isActive, isExactActive })),
+                            target: processedItem.target,
+                            tabindex: "-1",
+                            "aria-hidden": "true",
+                            onClick: $event => ($options.onItemActionClick($event, processedItem, navigate))
+                          }, [
+                            (!$props.templates['icon'])
+                              ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
+                                  key: 0,
+                                  class: vue.normalizeClass(['p-dock-icon', processedItem.icon])
+                                }, null, 2)), [
+                                  [_directive_ripple]
+                                ])
+                              : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['icon']), {
+                                  key: 1,
+                                  item: processedItem
+                                }, null, 8, ["item"]))
+                          ], 10, _hoisted_5)), [
+                            [_directive_tooltip, { value: processedItem.label, disabled: !$props.tooltipOptions }, $props.tooltipOptions]
                           ])
-                        : (vue.openBlock(), vue.createBlock(vue.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))
-            : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['item']), {
-                key: 1,
-                item: item
-              }, null, 8, ["item"]))
-        ], 42, _hoisted_2))
+                        ]),
+                        _: 2
+                      }, 1032, ["to"]))
+                    : vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                        key: 1,
+                        href: processedItem.url,
+                        class: vue.normalizeClass($options.linkClass()),
+                        target: processedItem.target,
+                        tabindex: "-1",
+                        "aria-hidden": "true"
+                      }, [
+                        (!$props.templates['icon'])
+                          ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
+                              key: 0,
+                              class: vue.normalizeClass(['p-dock-icon', processedItem.icon])
+                            }, null, 2)), [
+                              [_directive_ripple]
+                            ])
+                          : (vue.openBlock(), vue.createBlock(vue.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))
+              : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['item']), {
+                  key: 1,
+                  item: processedItem,
+                  index: index
+                }, null, 8, ["item", "index"]))
+          ])
+        ], 42, _hoisted_3))
       }), 128))
-    ], 544)
+    ], 40, _hoisted_2)
   ]))
 }
 
@@ -179,7 +336,7 @@ var script = {
     props: {
         position: {
             type: String,
-            default: "bottom"
+            default: 'bottom'
         },
         model: null,
         class: null,
@@ -188,6 +345,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 +384,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 +421,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 .2s cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all .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.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/ripple"),t=require("primevue/tooltip"),n=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e),l=o(t),c={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:i.default,tooltip:l.default}};const r={class:"p-dock-list-container"},s=["onMouseenter"],a=["href","target","onClick"],p=["href","target","onClick","tabindex"];c.render=function(e,t,o,i,l,c){const d=n.resolveComponent("router-link"),m=n.resolveDirective("ripple"),k=n.resolveDirective("tooltip");return n.openBlock(),n.createElementBlock("div",r,[n.createElementVNode("ul",{ref:"list",class:"p-dock-list",role:"menu",onMouseleave:t[0]||(t[0]=(...e)=>c.onListMouseLeave&&c.onListMouseLeave(...e))},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(o.model,((e,t)=>(n.openBlock(),n.createElementBlock("li",{class:n.normalizeClass(c.itemClass(t)),key:t,role:"none",onMouseenter:e=>c.onItemMouseEnter(t)},[o.templates.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(o.templates.item),{key:1,item:e},null,8,["item"])):(n.openBlock(),n.createElementBlock(n.Fragment,{key:0},[e.to&&!c.disabled(e)?(n.openBlock(),n.createBlock(d,{key:0,to:e.to,custom:""},{default:n.withCtx((({navigate:t,href:i,isActive:l,isExactActive:r})=>[n.withDirectives((n.openBlock(),n.createElementBlock("a",{href:i,role:"menuitem",class:n.normalizeClass(c.linkClass(e,{isActive:l,isExactActive:r})),target:e.target,onClick:n=>c.onItemClick(n,e,t)},[o.templates.icon?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(o.templates.icon),{key:1,item:e},null,8,["item"])):n.withDirectives((n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(["p-dock-action-icon",e.icon])},null,2)),[[m]])],10,a)),[[k,{value:e.label,disabled:!o.tooltipOptions},o.tooltipOptions]])])),_:2},1032,["to"])):n.withDirectives((n.openBlock(),n.createElementBlock("a",{key:1,href:e.url,role:"menuitem",class:n.normalizeClass(c.linkClass(e)),target:e.target,onClick:t=>c.onItemClick(t,e),tabindex:c.disabled(e)?null:"0"},[o.templates.icon?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(o.templates.icon),{key:1,item:e},null,8,["item"])):n.withDirectives((n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(["p-dock-action-icon",e.icon])},null,2)),[[m]])],10,p)),[[k,{value:e.label,disabled:!o.tooltipOptions},o.tooltipOptions]])],64))],42,s)))),128))],544)])};var d={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:c}};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.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 .2s cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all .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"),d.render=function(e,t,o,i,l,c){const r=n.resolveComponent("DockSub");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(c.containerClass),style:n.normalizeStyle(o.style)},[n.createVNode(r,{model:o.model,templates:e.$slots,exact:o.exact,tooltipOptions:o.tooltipOptions},null,8,["model","templates","exact","tooltipOptions"])],6)},module.exports=d;
+"use strict";var e=require("primevue/ripple"),t=require("primevue/tooltip"),n=require("primevue/utils"),i=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e),r=o(t),s={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.ObjectUtils.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(n.DomHandler.find(this.$refs.list,"li.p-dock-item:not(.p-disabled)").length-1)},onSpaceKey(){const e=n.DomHandler.findSingle(this.$refs.list,`li[id="${this.focusedOptionIndex}"]`),t=e&&n.DomHandler.findSingle(e,".p-dock-link");t?t.click():e&&e.click()},findNextOptionIndex(e){const t=[...n.DomHandler.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=[...n.DomHandler.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=n.DomHandler.find(this.$refs.list,"li.p-dock-item:not(.p-disabled)");let i=e>=t.length?t.length-1:e<0?0:e;this.focusedOptionIndex=t[i].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||n.UniqueComponentId()},focusedOptionId(){return-1!==this.focusedOptionIndex?this.focusedOptionIndex:null}},directives:{ripple:l.default,tooltip:r.default}};const a={class:"p-dock-list-container"},c=["id","aria-orientation","aria-activedescendant","tabindex","aria-label","aria-labelledby"],d=["id","aria-label","aria-disabled","onClick","onMouseenter"],p={class:"p-menuitem-content"},m=["href","target","onClick"],u=["href","target"];s.render=function(e,t,n,o,l,r){const s=i.resolveComponent("router-link"),k=i.resolveDirective("ripple"),f=i.resolveDirective("tooltip");return i.openBlock(),i.createElementBlock("div",a,[i.createElementVNode("ul",{ref:"list",id:r.id,class:"p-dock-list",role:"menu","aria-orientation":"bottom"===n.position||"top"===n.position?"horizontal":"vertical","aria-activedescendant":l.focused?r.focusedOptionId:void 0,tabindex:n.tabindex,"aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby,onFocus:t[0]||(t[0]=(...e)=>r.onListFocus&&r.onListFocus(...e)),onBlur:t[1]||(t[1]=(...e)=>r.onListBlur&&r.onListBlur(...e)),onKeydown:t[2]||(t[2]=(...e)=>r.onListKeyDown&&r.onListKeyDown(...e)),onMouseleave:t[3]||(t[3]=(...e)=>r.onListMouseLeave&&r.onListMouseLeave(...e))},[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(n.model,((e,t)=>(i.openBlock(),i.createElementBlock("li",{key:t,id:r.getItemId(t),class:i.normalizeClass(r.itemClass(e,t,r.getItemId(t))),role:"menuitem","aria-label":e.label,"aria-disabled":r.disabled(e),onClick:t=>r.onItemClick(t,e),onMouseenter:e=>r.onItemMouseEnter(t)},[i.createElementVNode("div",p,[n.templates.item?(i.openBlock(),i.createBlock(i.resolveDynamicComponent(n.templates.item),{key:1,item:e,index:t},null,8,["item","index"])):(i.openBlock(),i.createElementBlock(i.Fragment,{key:0},[e.to&&!r.disabled(e)?(i.openBlock(),i.createBlock(s,{key:0,to:e.to,custom:""},{default:i.withCtx((({navigate:t,href:o,isActive:l,isExactActive:s})=>[i.withDirectives((i.openBlock(),i.createElementBlock("a",{href:o,class:i.normalizeClass(r.linkClass({isActive:l,isExactActive:s})),target:e.target,tabindex:"-1","aria-hidden":"true",onClick:n=>r.onItemActionClick(n,e,t)},[n.templates.icon?(i.openBlock(),i.createBlock(i.resolveDynamicComponent(n.templates.icon),{key:1,item:e},null,8,["item"])):i.withDirectives((i.openBlock(),i.createElementBlock("span",{key:0,class:i.normalizeClass(["p-dock-icon",e.icon])},null,2)),[[k]])],10,m)),[[f,{value:e.label,disabled:!n.tooltipOptions},n.tooltipOptions]])])),_:2},1032,["to"])):i.withDirectives((i.openBlock(),i.createElementBlock("a",{key:1,href:e.url,class:i.normalizeClass(r.linkClass()),target:e.target,tabindex:"-1","aria-hidden":"true"},[n.templates.icon?(i.openBlock(),i.createBlock(i.resolveDynamicComponent(n.templates.icon),{key:1,item:e},null,8,["item"])):i.withDirectives((i.openBlock(),i.createElementBlock("span",{key:0,class:i.normalizeClass(["p-dock-icon",e.icon])},null,2)),[[k]])],10,u)),[[f,{value:e.label,disabled:!n.tooltipOptions},n.tooltipOptions]])],64))])],42,d)))),128))],40,c)])};var k={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:s}};!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"),k.render=function(e,t,n,o,l,r){const s=i.resolveComponent("DockSub");return i.openBlock(),i.createElementBlock("div",{class:i.normalizeClass(r.containerClass),style:i.normalizeStyle(n.style)},[i.createVNode(s,{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)},module.exports=k;