primevue 4.2.5 → 4.3.0

package/textarea/style/index.mjs

@@ -1,13 +1,10 @@
+import { style } from '@primeuix/styles/textarea';
 import BaseStyle from '@primevue/core/base/style';
 
-var theme = function theme(_ref) {
-  var dt = _ref.dt;
-  return "\n.p-textarea {\n    font-family: inherit;\n    font-feature-settings: inherit;\n    font-size: 1rem;\n    color: ".concat(dt('textarea.color'), ";\n    background: ").concat(dt('textarea.background'), ";\n    padding-block: ").concat(dt('textarea.padding.y'), ";\n    padding-inline: ").concat(dt('textarea.padding.x'), ";\n    border: 1px solid ").concat(dt('textarea.border.color'), ";\n    transition: background ").concat(dt('textarea.transition.duration'), ", color ").concat(dt('textarea.transition.duration'), ", border-color ").concat(dt('textarea.transition.duration'), ", outline-color ").concat(dt('textarea.transition.duration'), ", box-shadow ").concat(dt('textarea.transition.duration'), ";\n    appearance: none;\n    border-radius: ").concat(dt('textarea.border.radius'), ";\n    outline-color: transparent;\n    box-shadow: ").concat(dt('textarea.shadow'), ";\n}\n\n.p-textarea:enabled:hover {\n    border-color: ").concat(dt('textarea.hover.border.color'), ";\n}\n\n.p-textarea:enabled:focus {\n    border-color: ").concat(dt('textarea.focus.border.color'), ";\n    box-shadow: ").concat(dt('textarea.focus.ring.shadow'), ";\n    outline: ").concat(dt('textarea.focus.ring.width'), " ").concat(dt('textarea.focus.ring.style'), " ").concat(dt('textarea.focus.ring.color'), ";\n    outline-offset: ").concat(dt('textarea.focus.ring.offset'), ";\n}\n\n.p-textarea.p-invalid {\n    border-color: ").concat(dt('textarea.invalid.border.color'), ";\n}\n\n.p-textarea.p-variant-filled {\n    background: ").concat(dt('textarea.filled.background'), ";\n}\n\n.p-textarea.p-variant-filled:enabled:focus {\n    background: ").concat(dt('textarea.filled.focus.background'), ";\n}\n\n.p-textarea:disabled {\n    opacity: 1;\n    background: ").concat(dt('textarea.disabled.background'), ";\n    color: ").concat(dt('textarea.disabled.color'), ";\n}\n\n.p-textarea::placeholder {\n    color: ").concat(dt('textarea.placeholder.color'), ";\n}\n\n.p-textarea.p-invalid::placeholder {\n    color: ").concat(dt('textarea.invalid.placeholder.color'), ";\n}\n\n.p-textarea-fluid {\n    width: 100%;\n}\n\n.p-textarea-resizable {\n    overflow: hidden;\n    resize: none;\n}\n\n.p-textarea-sm {\n    font-size: ").concat(dt('textarea.sm.font.size'), ";\n    padding-block: ").concat(dt('textarea.sm.padding.y'), ";\n    padding-inline: ").concat(dt('textarea.sm.padding.x'), ";\n}\n\n.p-textarea-lg {\n    font-size: ").concat(dt('textarea.lg.font.size'), ";\n    padding-block: ").concat(dt('textarea.lg.padding.y'), ";\n    padding-inline: ").concat(dt('textarea.lg.padding.x'), ";\n}\n");
-};
 var classes = {
-  root: function root(_ref2) {
-    var instance = _ref2.instance,
-      props = _ref2.props;
+  root: function root(_ref) {
+    var instance = _ref.instance,
+      props = _ref.props;
     return ['p-textarea p-component', {
       'p-filled': instance.$filled,
       'p-textarea-resizable ': props.autoResize,
@@ -21,7 +18,7 @@ var classes = {
 };
 var TextareaStyle = BaseStyle.extend({
   name: 'textarea',
-  theme: theme,
+  style: style,
   classes: classes
 });
 

package/textarea/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/textarea/style/TextareaStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-textarea {\n    font-family: inherit;\n    font-feature-settings: inherit;\n    font-size: 1rem;\n    color: ${dt('textarea.color')};\n    background: ${dt('textarea.background')};\n    padding-block: ${dt('textarea.padding.y')};\n    padding-inline: ${dt('textarea.padding.x')};\n    border: 1px solid ${dt('textarea.border.color')};\n    transition: background ${dt('textarea.transition.duration')}, color ${dt('textarea.transition.duration')}, border-color ${dt('textarea.transition.duration')}, outline-color ${dt('textarea.transition.duration')}, box-shadow ${dt(\n    'textarea.transition.duration'\n)};\n    appearance: none;\n    border-radius: ${dt('textarea.border.radius')};\n    outline-color: transparent;\n    box-shadow: ${dt('textarea.shadow')};\n}\n\n.p-textarea:enabled:hover {\n    border-color: ${dt('textarea.hover.border.color')};\n}\n\n.p-textarea:enabled:focus {\n    border-color: ${dt('textarea.focus.border.color')};\n    box-shadow: ${dt('textarea.focus.ring.shadow')};\n    outline: ${dt('textarea.focus.ring.width')} ${dt('textarea.focus.ring.style')} ${dt('textarea.focus.ring.color')};\n    outline-offset: ${dt('textarea.focus.ring.offset')};\n}\n\n.p-textarea.p-invalid {\n    border-color: ${dt('textarea.invalid.border.color')};\n}\n\n.p-textarea.p-variant-filled {\n    background: ${dt('textarea.filled.background')};\n}\n\n.p-textarea.p-variant-filled:enabled:focus {\n    background: ${dt('textarea.filled.focus.background')};\n}\n\n.p-textarea:disabled {\n    opacity: 1;\n    background: ${dt('textarea.disabled.background')};\n    color: ${dt('textarea.disabled.color')};\n}\n\n.p-textarea::placeholder {\n    color: ${dt('textarea.placeholder.color')};\n}\n\n.p-textarea.p-invalid::placeholder {\n    color: ${dt('textarea.invalid.placeholder.color')};\n}\n\n.p-textarea-fluid {\n    width: 100%;\n}\n\n.p-textarea-resizable {\n    overflow: hidden;\n    resize: none;\n}\n\n.p-textarea-sm {\n    font-size: ${dt('textarea.sm.font.size')};\n    padding-block: ${dt('textarea.sm.padding.y')};\n    padding-inline: ${dt('textarea.sm.padding.x')};\n}\n\n.p-textarea-lg {\n    font-size: ${dt('textarea.lg.font.size')};\n    padding-block: ${dt('textarea.lg.padding.y')};\n    padding-inline: ${dt('textarea.lg.padding.x')};\n}\n`;\n\nconst classes = {\n    root: ({ instance, props }) => [\n        'p-textarea p-component',\n        {\n            'p-filled': instance.$filled,\n            'p-textarea-resizable ': props.autoResize,\n            'p-textarea-sm p-inputfield-sm': props.size === 'small',\n            'p-textarea-lg p-inputfield-lg': props.size === 'large',\n            'p-invalid': instance.$invalid,\n            'p-variant-filled': instance.$variant === 'filled',\n            'p-textarea-fluid': instance.$fluid\n        }\n    ]\n};\n\nexport default BaseStyle.extend({\n    name: 'textarea',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","_ref2","instance","props","$filled","autoResize","size","$invalid","$variant","$fluid","BaseStyle","extend","name"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/textarea/style/TextareaStyle.js"],"sourcesContent":["import { style } from '@primeuix/styles/textarea';\nimport BaseStyle from '@primevue/core/base/style';\n\nconst classes = {\n    root: ({ instance, props }) => [\n        'p-textarea p-component',\n        {\n            'p-filled': instance.$filled,\n            'p-textarea-resizable ': props.autoResize,\n            'p-textarea-sm p-inputfield-sm': props.size === 'small',\n            'p-textarea-lg p-inputfield-lg': props.size === 'large',\n            'p-invalid': instance.$invalid,\n            'p-variant-filled': instance.$variant === 'filled',\n            'p-textarea-fluid': instance.$fluid\n        }\n    ]\n};\n\nexport default BaseStyle.extend({\n    name: 'textarea',\n    style,\n    classes\n});\n"],"names":["classes","root","_ref","instance","props","$filled","autoResize","size","$invalid","$variant","$fluid","BaseStyle","extend","name","style"],"mappings":";;;AAGA,IAAMA,OAAO,GAAG;AACZC,EAAAA,IAAI,EAAE,SAANA,IAAIA,CAAAC,IAAA,EAAA;AAAA,IAAA,IAAKC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;MAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAA,OAAO,CAC3B,wBAAwB,EACxB;MACI,UAAU,EAAED,QAAQ,CAACE,OAAO;MAC5B,uBAAuB,EAAED,KAAK,CAACE,UAAU;AACzC,MAAA,+BAA+B,EAAEF,KAAK,CAACG,IAAI,KAAK,OAAO;AACvD,MAAA,+BAA+B,EAAEH,KAAK,CAACG,IAAI,KAAK,OAAO;MACvD,WAAW,EAAEJ,QAAQ,CAACK,QAAQ;AAC9B,MAAA,kBAAkB,EAAEL,QAAQ,CAACM,QAAQ,KAAK,QAAQ;MAClD,kBAAkB,EAAEN,QAAQ,CAACO;AACjC,KAAC,CACJ;AAAA;AACL,CAAC;AAED,oBAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,UAAU;AAChBC,EAAAA,KAAK,EAALA,KAAK;AACLd,EAAAA,OAAO,EAAPA;AACJ,CAAC,CAAC;;;;"}

package/tieredmenu/TieredMenu.vue

@@ -1,13 +1,13 @@
 <template>
     <Portal :appendTo="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
-            <div v-if="visible" :ref="containerRef" :id="id" :class="cx('root')" @click="onOverlayClick" v-bind="ptmi('root')">
+            <div v-if="visible" :ref="containerRef" :id="$id" :class="cx('root')" @click="onOverlayClick" v-bind="ptmi('root')">
                 <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
                     <slot name="start"></slot>
                 </div>
                 <TieredMenuSub
                     :ref="menubarRef"
-                    :id="id + '_list'"
+                    :id="$id + '_list'"
                     :class="cx('rootList')"
                     :tabindex="!disabled ? tabindex : -1"
                     role="menubar"
@@ -16,7 +16,7 @@
                     :aria-disabled="disabled || undefined"
                     aria-orientation="vertical"
                     :aria-activedescendant="focused ? focusedItemId : undefined"
-                    :menuId="id"
+                    :menuId="$id"
                     :focusedItemId="focused ? focusedItemId : undefined"
                     :items="processedItems"
                     :templates="$slots"
@@ -45,7 +45,7 @@
 import { absolutePosition, addStyle, findSingle, focus, getOuterWidth, isTouchDevice } from '@primeuix/utils/dom';
 import { findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolve } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
-import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
+import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import BaseTieredMenu from './BaseTieredMenu.vue';
@@ -67,7 +67,6 @@ export default {
     searchValue: null,
     data() {
         return {
-            id: this.$attrs.id,
             focused: false,
             focusedItemInfo: { index: -1, level: 0, parentKey: '' },
             activeItemPath: [],
@@ -79,9 +78,6 @@ export default {
         };
     },
     watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        },
         activeItemPath(newPath) {
             if (!this.popup) {
                 if (isNotEmpty(newPath)) {
@@ -95,7 +91,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.id || UniqueComponentId();
         this.bindMatchMediaListener();
     },
     beforeUnmount() {
@@ -468,12 +463,12 @@ export default {
                     }
                 };
 
-                document.addEventListener('click', this.outsideClickListener);
+                document.addEventListener('click', this.outsideClickListener, true);
             }
         },
         unbindOutsideClickListener() {
             if (this.outsideClickListener) {
-                document.removeEventListener('click', this.outsideClickListener);
+                document.removeEventListener('click', this.outsideClickListener, true);
                 this.outsideClickListener = null;
             }
         },
@@ -612,7 +607,7 @@ export default {
             }
         },
         scrollInView(index = -1) {
-            const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId;
+            const id = index !== -1 ? `${this.$id}_${index}` : this.focusedItemId;
             const element = findSingle(this.menubar, `li[id="${id}"]`);
 
             if (element) {
@@ -657,7 +652,7 @@ export default {
             return processedItem ? processedItem.items : this.processedItems;
         },
         focusedItemId() {
-            return this.focusedItemInfo.index !== -1 ? `${this.id}${isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null;
+            return this.focusedItemInfo.index !== -1 ? `${this.$id}${isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null;
         }
     },
     components: {

package/tieredmenu/index.mjs

@@ -1,14 +1,14 @@
-import { nestedPosition, focus, findSingle, addStyle, absolutePosition, getOuterWidth, isTouchDevice } from '@primeuix/utils/dom';
-import { resolve, isNotEmpty, isPrintableCharacter, isEmpty, findLastIndex } from '@primeuix/utils/object';
+import { nestedPosition, findSingle, isTouchDevice, absolutePosition, getOuterWidth, addStyle, focus } from '@primeuix/utils/dom';
+import { isNotEmpty, resolve, findLastIndex, isEmpty, isPrintableCharacter } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
-import { UniqueComponentId, ConnectedOverlayScrollHandler } from '@primevue/core/utils';
+import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import BaseComponent from '@primevue/core/basecomponent';
 import TieredMenuStyle from 'primevue/tieredmenu/style';
 import AngleRightIcon from '@primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
-import { mergeProps, resolveComponent, resolveDirective, openBlock, createBlock, Transition, withCtx, createElementBlock, Fragment, renderList, createElementVNode, withDirectives, resolveDynamicComponent, normalizeClass, createCommentVNode, toDisplayString, createVNode, renderSlot } from 'vue';
+import { mergeProps, resolveComponent, resolveDirective, createBlock, openBlock, Transition, withCtx, createElementBlock, createCommentVNode, Fragment, renderList, createElementVNode, withDirectives, resolveDynamicComponent, normalizeClass, toDisplayString, createVNode, renderSlot } from 'vue';
 
 var script$2 = {
   name: 'BaseTieredMenu',
@@ -365,7 +365,6 @@ var script = {
   searchValue: null,
   data: function data() {
     return {
-      id: this.$attrs.id,
       focused: false,
       focusedItemInfo: {
         index: -1,
@@ -381,9 +380,6 @@ var script = {
     };
   },
   watch: {
-    '$attrs.id': function $attrsId(newValue) {
-      this.id = newValue || UniqueComponentId();
-    },
     activeItemPath: function activeItemPath(newPath) {
       if (!this.popup) {
         if (isNotEmpty(newPath)) {
@@ -397,7 +393,6 @@ var script = {
     }
   },
   mounted: function mounted() {
-    this.id = this.id || UniqueComponentId();
     this.bindMatchMediaListener();
   },
   beforeUnmount: function beforeUnmount() {
@@ -775,12 +770,12 @@ var script = {
             _this2.hide();
           }
         };
-        document.addEventListener('click', this.outsideClickListener);
+        document.addEventListener('click', this.outsideClickListener, true);
       }
     },
     unbindOutsideClickListener: function unbindOutsideClickListener() {
       if (this.outsideClickListener) {
-        document.removeEventListener('click', this.outsideClickListener);
+        document.removeEventListener('click', this.outsideClickListener, true);
         this.outsideClickListener = null;
       }
     },
@@ -931,7 +926,7 @@ var script = {
     },
     scrollInView: function scrollInView() {
       var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
-      var id = index !== -1 ? "".concat(this.id, "_").concat(index) : this.focusedItemId;
+      var id = index !== -1 ? "".concat(this.$id, "_").concat(index) : this.focusedItemId;
       var element = findSingle(this.menubar, "li[id=\"".concat(id, "\"]"));
       if (element) {
         element.scrollIntoView && element.scrollIntoView({
@@ -980,7 +975,7 @@ var script = {
       return processedItem ? processedItem.items : this.processedItems;
     },
     focusedItemId: function focusedItemId() {
-      return this.focusedItemInfo.index !== -1 ? "".concat(this.id).concat(isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : '', "_").concat(this.focusedItemInfo.index) : null;
+      return this.focusedItemInfo.index !== -1 ? "".concat(this.$id).concat(isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : '', "_").concat(this.focusedItemInfo.index) : null;
     }
   },
   components: {
@@ -1009,7 +1004,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           return [$data.visible ? (openBlock(), createElementBlock("div", mergeProps({
             key: 0,
             ref: $options.containerRef,
-            id: $data.id,
+            id: _ctx.$id,
             "class": _ctx.cx('root'),
             onClick: _cache[0] || (_cache[0] = function () {
               return $options.onOverlayClick && $options.onOverlayClick.apply($options, arguments);
@@ -1019,7 +1014,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "class": _ctx.cx('start')
           }, _ctx.ptm('start')), [renderSlot(_ctx.$slots, "start")], 16)) : createCommentVNode("", true), createVNode(_component_TieredMenuSub, mergeProps({
             ref: $options.menubarRef,
-            id: $data.id + '_list',
+            id: _ctx.$id + '_list',
             "class": _ctx.cx('rootList'),
             tabindex: !_ctx.disabled ? _ctx.tabindex : -1,
             role: "menubar",
@@ -1028,7 +1023,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             "aria-disabled": _ctx.disabled || undefined,
             "aria-orientation": "vertical",
             "aria-activedescendant": $data.focused ? $options.focusedItemId : undefined,
-            menuId: $data.id,
+            menuId: _ctx.$id,
             focusedItemId: $data.focused ? $options.focusedItemId : undefined,
             items: $options.processedItems,
             templates: _ctx.$slots,