primevue 3.16.2 → 3.18.0

package/dock/dock.js

@@ -1,5 +1,5 @@
 this.primevue = this.primevue || {};
-this.primevue.dock = (function (Ripple, Tooltip, vue) {
+this.primevue.dock = (function (Ripple, Tooltip, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -9,7 +9,12 @@ this.primevue.dock = (function (Ripple, Tooltip, vue) {
 
     var script$1 = {
         name: 'DockSub',
+        emits: ['focus', 'blur'],
         props: {
+            position: {
+                type: String,
+                default: 'bottom'
+            },
             model: {
                 type: Array,
                 default: null
@@ -22,67 +27,202 @@ this.primevue.dock = (function (Ripple, Tooltip, vue) {
                 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");
@@ -92,81 +232,97 @@ this.primevue.dock = (function (Ripple, Tooltip, vue) {
       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)
       ]))
     }
 
@@ -177,7 +333,7 @@ this.primevue.dock = (function (Ripple, Tooltip, vue) {
         props: {
             position: {
                 type: String,
-                default: "bottom"
+                default: 'bottom'
             },
             model: null,
             class: null,
@@ -186,6 +342,22 @@ this.primevue.dock = (function (Ripple, Tooltip, vue) {
             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: {
@@ -209,8 +381,13 @@ this.primevue.dock = (function (Ripple, Tooltip, vue) {
           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))
     }
 
@@ -241,11 +418,11 @@ this.primevue.dock = (function (Ripple, Tooltip, vue) {
       }
     }
 
-    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;
 
     return script;
 
-})(primevue.ripple, primevue.tooltip, Vue);
+})(primevue.ripple, primevue.tooltip, primevue.utils, Vue);

package/dock/dock.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.dock=function(e,t,n){"use strict";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}};return 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)},d}(primevue.ripple,primevue.tooltip,Vue);
+this.primevue=this.primevue||{},this.primevue.dock=function(e,t,n,i){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e),s=o(t),r={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:s.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"];r.render=function(e,t,n,o,l,s){const r=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:s.id,class:"p-dock-list",role:"menu","aria-orientation":"bottom"===n.position||"top"===n.position?"horizontal":"vertical","aria-activedescendant":l.focused?s.focusedOptionId:void 0,tabindex:n.tabindex,"aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby,onFocus:t[0]||(t[0]=(...e)=>s.onListFocus&&s.onListFocus(...e)),onBlur:t[1]||(t[1]=(...e)=>s.onListBlur&&s.onListBlur(...e)),onKeydown:t[2]||(t[2]=(...e)=>s.onListKeyDown&&s.onListKeyDown(...e)),onMouseleave:t[3]||(t[3]=(...e)=>s.onListMouseLeave&&s.onListMouseLeave(...e))},[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(n.model,((e,t)=>(i.openBlock(),i.createElementBlock("li",{key:t,id:s.getItemId(t),class:i.normalizeClass(s.itemClass(e,t,s.getItemId(t))),role:"menuitem","aria-label":e.label,"aria-disabled":s.disabled(e),onClick:t=>s.onItemClick(t,e),onMouseenter:e=>s.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&&!s.disabled(e)?(i.openBlock(),i.createBlock(r,{key:0,to:e.to,custom:""},{default:i.withCtx((({navigate:t,href:o,isActive:l,isExactActive:r})=>[i.withDirectives((i.openBlock(),i.createElementBlock("a",{href:o,class:i.normalizeClass(s.linkClass({isActive:l,isExactActive:r})),target:e.target,tabindex:"-1","aria-hidden":"true",onClick:n=>s.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(s.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:r}};return 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,s){const r=i.resolveComponent("DockSub");return i.openBlock(),i.createElementBlock("div",{class:i.normalizeClass(s.containerClass),style:i.normalizeStyle(n.style)},[i.createVNode(r,{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)},k}(primevue.ripple,primevue.tooltip,primevue.utils,Vue);