primevue 4.1.0 → 4.2.0

package/chips/index.d.ts

@@ -7,7 +7,7 @@
  * @module chips
  *
  */
-import type { DefineComponent, EmitFn, GlobalComponentConstructor } from '@primevue/core';
+import type { DefineComponent, EmitFn } from '@primevue/core';
 import * as InputChips from 'primevue/inputchips';
 import 'vue';
 
@@ -83,7 +83,7 @@ declare const Chips: DefineComponent<ChipsProps, ChipsSlots, ChipsEmits>;
 
 declare module 'vue' {
     export interface GlobalComponents {
-        Chips: GlobalComponentConstructor<ChipsProps, ChipsSlots, ChipsEmits>;
+        Chips: DefineComponent<ChipsProps, ChipsSlots, ChipsEmits>;
     }
 }
 

package/chips/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/chips/Chips.vue"],"sourcesContent":["<script>\nimport InputChips from 'primevue/inputchips';\n\nexport default {\n    name: 'Chips',\n    extends: InputChips,\n    mounted() {\n        console.warn('Deprecated since v4. Use InputChips component instead.');\n    }\n};\n</script>\n"],"names":["name","InputChips","mounted","console","warn"],"mappings":";;AAGA,aAAe;AACXA,EAAAA,IAAI,EAAE,OAAO;AACb,EAAA,SAAA,EAASC,UAAU;EACnBC,OAAO,EAAA,SAAPA,OAAOA,GAAG;AACNC,IAAAA,OAAO,CAACC,IAAI,CAAC,wDAAwD,CAAC,CAAA;AAC1E,GAAA;AACJ,CAAC;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/chips/Chips.vue"],"sourcesContent":["<script>\nimport InputChips from 'primevue/inputchips';\n\nexport default {\n    name: 'Chips',\n    extends: InputChips,\n    mounted() {\n        console.warn('Deprecated since v4. Use InputChips component instead.');\n    }\n};\n</script>\n"],"names":["name","InputChips","mounted","console","warn"],"mappings":";;AAGA,aAAe;AACXA,EAAAA,IAAI,EAAE,OAAO;AACb,EAAA,SAAA,EAASC,UAAU;EACnBC,OAAO,EAAA,SAAPA,OAAOA,GAAG;AACNC,IAAAA,OAAO,CAACC,IAAI,CAAC,wDAAwD,CAAC;AAC1E;AACJ,CAAC;;;;"}

package/chips/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/chips/style/ChipsStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nexport default BaseStyle.extend({\n    name: 'chips'\n});\n"],"names":["BaseStyle","extend","name"],"mappings":";;AAEA,iBAAeA,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,OAAA;AACV,CAAC,CAAC;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/chips/style/ChipsStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nexport default BaseStyle.extend({\n    name: 'chips'\n});\n"],"names":["BaseStyle","extend","name"],"mappings":";;AAEA,iBAAeA,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE;AACV,CAAC,CAAC;;;;"}

package/colorpicker/BaseColorPicker.vue

@@ -1,15 +1,11 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseEditableHolder from '@primevue/core/baseeditableholder';
 import ColorPickerStyle from 'primevue/colorpicker/style';
 
 export default {
     name: 'BaseColorPicker',
-    extends: BaseComponent,
+    extends: BaseEditableHolder,
     props: {
-        modelValue: {
-            type: null,
-            default: null
-        },
         defaultColor: {
             type: null,
             default: 'ff0000'
@@ -22,10 +18,6 @@ export default {
             type: String,
             default: 'hex'
         },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
         tabindex: {
             type: String,
             default: null

package/colorpicker/ColorPicker.vue

@@ -1,6 +1,6 @@
 <template>
     <div ref="container" :class="cx('root')" v-bind="ptmi('root')">
-        <input v-if="!inline" ref="input" :id="inputId" type="text" :class="cx('preview')" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" v-bind="ptm('preview')" />
+        <input v-if="!inline" ref="input" :id="inputId" type="text" :class="cx('preview')" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" @blur="onInputBlur" v-bind="ptm('preview')" />
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
                 <div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="[cx('panel'), panelClass, overlayClass]" @click="onOverlayClick" v-bind="{ ...ptm('panel'), ...ptm('overlay') }">
@@ -32,7 +32,7 @@ export default {
     name: 'ColorPicker',
     extends: BaseColorPicker,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'change', 'show', 'hide'],
+    emits: ['change', 'show', 'hide'],
     data() {
         return {
             overlayVisible: false
@@ -117,7 +117,7 @@ export default {
             this.updateInput();
         },
         updateModel(event) {
-            let value = this.modelValue;
+            let value = this.d_value;
 
             switch (this.format) {
                 case 'hex':
@@ -137,7 +137,7 @@ export default {
                     break;
             }
 
-            this.$emit('update:modelValue', value);
+            this.writeValue(value, event);
             this.$emit('change', { event, value });
         },
         updateColorSelector() {
@@ -396,6 +396,9 @@ export default {
                     break;
             }
         },
+        onInputBlur(event) {
+            this.formField.onBlur?.();
+        },
         onColorMousedown(event) {
             if (this.disabled) {
                 return;

package/colorpicker/index.d.ts

@@ -7,7 +7,7 @@
  * @module colorpicker
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, HintedString, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, HintedString, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { PassThroughOptions } from 'primevue/passthrough';
 import { TransitionProps } from 'vue';
@@ -144,6 +144,14 @@ export interface ColorPickerProps {
      * @defaultValue ff0000
      */
     defaultColor?: any;
+    /**
+     * The default value for the input when not controlled by `modelValue`.
+     */
+    defaultValue?: any;
+    /**
+     * The name attribute for the element, typically used in form submissions.
+     */
+    name?: string | undefined;
     /**
      * Whether to display as an overlay or not.
      * @defaultValue false
@@ -154,6 +162,11 @@ export interface ColorPickerProps {
      * @defaultValue hex
      */
     format?: 'hex' | 'rgb' | 'hsb' | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false
@@ -191,6 +204,10 @@ export interface ColorPickerProps {
      * @defaultValue body
      */
     appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
+    /**
+     * Form control object, typically used for handling validation and form state.
+     */
+    formControl?: Record<string, any> | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
@@ -223,6 +240,11 @@ export interface ColorPickerEmitsOptions {
      * @param {*} value - New value.
      */
     'update:modelValue'(value: any): void;
+    /**
+     * Emitted when the value changes in uncontrolled mode.
+     * @param {*} value - New value.
+     */
+    'value-change'(value: any): void;
     /**
      * Callback to invoke when a color is selected.
      * @param {ColorPickerChangeEvent} event - Custom add event.
@@ -256,7 +278,7 @@ declare const ColorPicker: DefineComponent<ColorPickerProps, ColorPickerSlots, C
 
 declare module 'vue' {
     export interface GlobalComponents {
-        ColorPicker: GlobalComponentConstructor<ColorPickerProps, ColorPickerSlots, ColorPickerEmits>;
+        ColorPicker: DefineComponent<ColorPickerProps, ColorPickerSlots, ColorPickerEmits>;
     }
 }
 

package/colorpicker/index.mjs

@@ -3,18 +3,14 @@ import { ZIndex } from '@primeuix/utils/zindex';
 import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseEditableHolder from '@primevue/core/baseeditableholder';
 import ColorPickerStyle from 'primevue/colorpicker/style';
 import { resolveComponent, openBlock, createElementBlock, mergeProps, createCommentVNode, createVNode, withCtx, Transition, createElementVNode } from 'vue';
 
 var script$1 = {
   name: 'BaseColorPicker',
-  "extends": BaseComponent,
+  "extends": BaseEditableHolder,
   props: {
-    modelValue: {
-      type: null,
-      "default": null
-    },
     defaultColor: {
       type: null,
       "default": 'ff0000'
@@ -27,10 +23,6 @@ var script$1 = {
       type: String,
       "default": 'hex'
     },
-    disabled: {
-      type: Boolean,
-      "default": false
-    },
     tabindex: {
       type: String,
       "default": null
@@ -67,7 +59,7 @@ var script = {
   name: 'ColorPicker',
   "extends": script$1,
   inheritAttrs: false,
-  emits: ['update:modelValue', 'change', 'show', 'hide'],
+  emits: ['change', 'show', 'hide'],
   data: function data() {
     return {
       overlayVisible: false
@@ -143,7 +135,7 @@ var script = {
       this.updateInput();
     },
     updateModel: function updateModel(event) {
-      var value = this.modelValue;
+      var value = this.d_value;
       switch (this.format) {
         case 'hex':
           value = this.HSBtoHEX(this.hsbValue);
@@ -155,7 +147,7 @@ var script = {
           value = this.hsbValue;
           break;
       }
-      this.$emit('update:modelValue', value);
+      this.writeValue(value, event);
       this.$emit('change', {
         event: event,
         value: value
@@ -391,6 +383,10 @@ var script = {
           break;
       }
     },
+    onInputBlur: function onInputBlur(event) {
+      var _this$formField$onBlu, _this$formField;
+      (_this$formField$onBlu = (_this$formField = this.formField).onBlur) === null || _this$formField$onBlu === void 0 || _this$formField$onBlu.call(_this$formField);
+    },
     onColorMousedown: function onColorMousedown(event) {
       if (this.disabled) {
         return;
@@ -577,7 +573,6 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     id: _ctx.inputId,
     type: "text",
     "class": _ctx.cx('preview'),
-    readonly: "readonly",
     tabindex: _ctx.tabindex,
     disabled: _ctx.disabled,
     onClick: _cache[0] || (_cache[0] = function () {
@@ -585,6 +580,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }),
     onKeydown: _cache[1] || (_cache[1] = function () {
       return $options.onInputKeydown && $options.onInputKeydown.apply($options, arguments);
+    }),
+    onBlur: _cache[2] || (_cache[2] = function () {
+      return $options.onInputBlur && $options.onInputBlur.apply($options, arguments);
     })
   }, _ctx.ptm('preview')), null, 16, _hoisted_1)) : createCommentVNode("", true), createVNode(_component_Portal, {
     appendTo: _ctx.appendTo,
@@ -602,7 +600,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             key: 0,
             ref: $options.pickerRef,
             "class": [_ctx.cx('panel'), _ctx.panelClass, _ctx.overlayClass],
-            onClick: _cache[10] || (_cache[10] = function () {
+            onClick: _cache[11] || (_cache[11] = function () {
               return $options.onOverlayClick && $options.onOverlayClick.apply($options, arguments);
             })
           }, _objectSpread(_objectSpread({}, _ctx.ptm('panel')), _ctx.ptm('overlay'))), [createElementVNode("div", mergeProps({
@@ -610,16 +608,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, _ctx.ptm('content')), [createElementVNode("div", mergeProps({
             ref: $options.colorSelectorRef,
             "class": _ctx.cx('colorSelector'),
-            onMousedown: _cache[2] || (_cache[2] = function ($event) {
+            onMousedown: _cache[3] || (_cache[3] = function ($event) {
               return $options.onColorMousedown($event);
             }),
-            onTouchstart: _cache[3] || (_cache[3] = function ($event) {
+            onTouchstart: _cache[4] || (_cache[4] = function ($event) {
               return $options.onColorDragStart($event);
             }),
-            onTouchmove: _cache[4] || (_cache[4] = function ($event) {
+            onTouchmove: _cache[5] || (_cache[5] = function ($event) {
               return $options.onDrag($event);
             }),
-            onTouchend: _cache[5] || (_cache[5] = function ($event) {
+            onTouchend: _cache[6] || (_cache[6] = function ($event) {
               return $options.onDragEnd();
             })
           }, _ctx.ptm('colorSelector')), [createElementVNode("div", mergeProps({
@@ -630,16 +628,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }, _ctx.ptm('colorHandle')), null, 16)], 16)], 16), createElementVNode("div", mergeProps({
             ref: $options.hueViewRef,
             "class": _ctx.cx('hue'),
-            onMousedown: _cache[6] || (_cache[6] = function ($event) {
+            onMousedown: _cache[7] || (_cache[7] = function ($event) {
               return $options.onHueMousedown($event);
             }),
-            onTouchstart: _cache[7] || (_cache[7] = function ($event) {
+            onTouchstart: _cache[8] || (_cache[8] = function ($event) {
               return $options.onHueDragStart($event);
             }),
-            onTouchmove: _cache[8] || (_cache[8] = function ($event) {
+            onTouchmove: _cache[9] || (_cache[9] = function ($event) {
               return $options.onDrag($event);
             }),
-            onTouchend: _cache[9] || (_cache[9] = function ($event) {
+            onTouchend: _cache[10] || (_cache[10] = function ($event) {
               return $options.onDragEnd();
             })
           }, _ctx.ptm('hue')), [createElementVNode("div", mergeProps({