primevue 4.1.0 → 4.2.0

package/skeleton/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/skeleton/style/SkeletonStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-skeleton {\n    overflow: hidden;\n    background: ${dt('skeleton.background')};\n    border-radius: ${dt('skeleton.border.radius')};\n}\n\n.p-skeleton::after {\n    content: \"\";\n    animation: p-skeleton-animation 1.2s infinite;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translateX(-100%);\n    z-index: 1;\n    background: linear-gradient( 90deg, rgba(255, 255, 255, 0), ${dt('skeleton.animation.background')}, rgba(255, 255, 255, 0) );\n}\n\n.p-skeleton-circle {\n    border-radius: 50%;\n}\n\n.p-skeleton-animation-none::after {\n    animation: none;\n}\n\n@keyframes p-skeleton-animation {\n    from {\n        transform: translateX(-100%);\n    }\n    to {\n        transform: translateX(100%);\n    }\n}\n`;\n\nconst inlineStyles = {\n    root: { position: 'relative' }\n};\n\nconst classes = {\n    root: ({ props }) => [\n        'p-skeleton p-component',\n        {\n            'p-skeleton-circle': props.shape === 'circle',\n            'p-skeleton-animation-none': props.animation === 'none'\n        }\n    ]\n};\n\nexport default BaseStyle.extend({\n    name: 'skeleton',\n    theme,\n    classes,\n    inlineStyles\n});\n"],"names":["theme","_ref","dt","concat","inlineStyles","root","position","classes","_ref2","props","shape","animation","BaseStyle","extend","name"],"mappings":";;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAKA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAMC,EAAE,GAAAD,IAAA,CAAFC,EAAE,CAAA;AAAA,EAAA,OAAA,0DAAA,CAAAC,MAAA,CAGDD,EAAE,CAAC,qBAAqB,CAAC,4BAAAC,MAAA,CACtBD,EAAE,CAAC,wBAAwB,CAAC,EAAAC,kTAAAA,CAAAA,CAAAA,MAAA,CAaiBD,EAAE,CAAC,+BAA+B,CAAC,EAAA,+SAAA,CAAA,CAAA;AAAA,CAmBpG,CAAA;AAED,IAAME,YAAY,GAAG;AACjBC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,QAAQ,EAAE,UAAA;AAAW,GAAA;AACjC,CAAC,CAAA;AAED,IAAMC,OAAO,GAAG;AACZF,EAAAA,IAAI,EAAE,SAANA,IAAIA,CAAAG,KAAA,EAAA;AAAA,IAAA,IAAKC,KAAK,GAAAD,KAAA,CAALC,KAAK,CAAA;IAAA,OAAO,CACjB,wBAAwB,EACxB;AACI,MAAA,mBAAmB,EAAEA,KAAK,CAACC,KAAK,KAAK,QAAQ;AAC7C,MAAA,2BAA2B,EAAED,KAAK,CAACE,SAAS,KAAK,MAAA;AACrD,KAAC,CACJ,CAAA;AAAA,GAAA;AACL,CAAC,CAAA;AAED,oBAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,UAAU;AAChBd,EAAAA,KAAK,EAALA,KAAK;AACLO,EAAAA,OAAO,EAAPA,OAAO;AACPH,EAAAA,YAAY,EAAZA,YAAAA;AACJ,CAAC,CAAC;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/skeleton/style/SkeletonStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-skeleton {\n    overflow: hidden;\n    background: ${dt('skeleton.background')};\n    border-radius: ${dt('skeleton.border.radius')};\n}\n\n.p-skeleton::after {\n    content: \"\";\n    animation: p-skeleton-animation 1.2s infinite;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translateX(-100%);\n    z-index: 1;\n    background: linear-gradient(90deg, rgba(255, 255, 255, 0), ${dt('skeleton.animation.background')}, rgba(255, 255, 255, 0));\n}\n\n[dir='rtl'] .p-skeleton::after {\n    animation-name: p-skeleton-animation-rtl;\n}\n\n.p-skeleton-circle {\n    border-radius: 50%;\n}\n\n.p-skeleton-animation-none::after {\n    animation: none;\n}\n\n@keyframes p-skeleton-animation {\n    from {\n        transform: translateX(-100%);\n    }\n    to {\n        transform: translateX(100%);\n    }\n}\n\n@keyframes p-skeleton-animation-rtl {\n    from {\n        transform: translateX(100%);\n    }\n    to {\n        transform: translateX(-100%);\n    }\n}\n`;\n\nconst inlineStyles = {\n    root: { position: 'relative' }\n};\n\nconst classes = {\n    root: ({ props }) => [\n        'p-skeleton p-component',\n        {\n            'p-skeleton-circle': props.shape === 'circle',\n            'p-skeleton-animation-none': props.animation === 'none'\n        }\n    ]\n};\n\nexport default BaseStyle.extend({\n    name: 'skeleton',\n    theme,\n    classes,\n    inlineStyles\n});\n"],"names":["theme","_ref","dt","concat","inlineStyles","root","position","classes","_ref2","props","shape","animation","BaseStyle","extend","name"],"mappings":";;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAKA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAMC,EAAE,GAAAD,IAAA,CAAFC,EAAE;AAAA,EAAA,OAAA,0DAAA,CAAAC,MAAA,CAGDD,EAAE,CAAC,qBAAqB,CAAC,4BAAAC,MAAA,CACtBD,EAAE,CAAC,wBAAwB,CAAC,EAAAC,iTAAAA,CAAAA,CAAAA,MAAA,CAagBD,EAAE,CAAC,+BAA+B,CAAC,EAAA,iiBAAA,CAAA;AAAA,CAgCnG;AAED,IAAME,YAAY,GAAG;AACjBC,EAAAA,IAAI,EAAE;AAAEC,IAAAA,QAAQ,EAAE;AAAW;AACjC,CAAC;AAED,IAAMC,OAAO,GAAG;AACZF,EAAAA,IAAI,EAAE,SAANA,IAAIA,CAAAG,KAAA,EAAA;AAAA,IAAA,IAAKC,KAAK,GAAAD,KAAA,CAALC,KAAK;IAAA,OAAO,CACjB,wBAAwB,EACxB;AACI,MAAA,mBAAmB,EAAEA,KAAK,CAACC,KAAK,KAAK,QAAQ;AAC7C,MAAA,2BAA2B,EAAED,KAAK,CAACE,SAAS,KAAK;AACrD,KAAC,CACJ;AAAA;AACL,CAAC;AAED,oBAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,UAAU;AAChBd,EAAAA,KAAK,EAALA,KAAK;AACLO,EAAAA,OAAO,EAAPA,OAAO;AACPH,EAAAA,YAAY,EAAZA;AACJ,CAAC,CAAC;;;;"}

package/slider/BaseSlider.vue

@@ -1,12 +1,11 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseEditableHolder from '@primevue/core/baseeditableholder';
 import SliderStyle from 'primevue/slider/style';
 
 export default {
     name: 'BaseSlider',
-    extends: BaseComponent,
+    extends: BaseEditableHolder,
     props: {
-        modelValue: [Number, Array],
         min: {
             type: Number,
             default: 0
@@ -27,10 +26,6 @@ export default {
             type: Boolean,
             default: false
         },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
         tabindex: {
             type: Number,
             default: 0

package/slider/Slider.vue

@@ -1,19 +1,20 @@
 <template>
     <div :class="cx('root')" @click="onBarClick" v-bind="ptmi('root')" :data-p-sliding="false">
-        <span :class="cx('range')" :style="[sx('range'), rangeStyle]" v-bind="ptm('range')"></span>
+        <span :class="cx('range')" :style="[sx('range'), rangeStyle()]" v-bind="ptm('range')"></span>
         <span
             v-if="!range"
             :class="cx('handle')"
-            :style="[sx('handle'), handleStyle]"
+            :style="[sx('handle'), handleStyle()]"
             @touchstart.passive="onDragStart($event)"
             @touchmove.passive="onDrag($event)"
             @touchend="onDragEnd($event)"
             @mousedown="onMouseDown($event)"
             @keydown="onKeyDown($event)"
+            @blur="onBlur($event)"
             :tabindex="tabindex"
             role="slider"
             :aria-valuemin="min"
-            :aria-valuenow="modelValue"
+            :aria-valuenow="d_value"
             :aria-valuemax="max"
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
@@ -23,16 +24,17 @@
         <span
             v-if="range"
             :class="cx('handle')"
-            :style="[sx('handle'), rangeStartHandleStyle]"
+            :style="[sx('handle'), rangeStartHandleStyle()]"
             @touchstart.passive="onDragStart($event, 0)"
             @touchmove.passive="onDrag($event)"
             @touchend="onDragEnd($event)"
             @mousedown="onMouseDown($event, 0)"
             @keydown="onKeyDown($event, 0)"
+            @blur="onBlur($event, 0)"
             :tabindex="tabindex"
             role="slider"
             :aria-valuemin="min"
-            :aria-valuenow="modelValue ? modelValue[0] : null"
+            :aria-valuenow="d_value ? d_value[0] : null"
             :aria-valuemax="max"
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
@@ -42,16 +44,17 @@
         <span
             v-if="range"
             :class="cx('handle')"
-            :style="[sx('handle'), rangeEndHandleStyle]"
+            :style="[sx('handle'), rangeEndHandleStyle()]"
             @touchstart.passive="onDragStart($event, 1)"
             @touchmove.passive="onDrag($event)"
             @touchend="onDragEnd($event)"
             @mousedown="onMouseDown($event, 1)"
             @keydown="onKeyDown($event, 1)"
+            @blur="onBlur($event, 1)"
             :tabindex="tabindex"
             role="slider"
             :aria-valuemin="min"
-            :aria-valuenow="modelValue ? modelValue[1] : null"
+            :aria-valuenow="d_value ? d_value[1] : null"
             :aria-valuemax="max"
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
@@ -62,14 +65,14 @@
 </template>
 
 <script>
-import { getWindowScrollLeft, getWindowScrollTop, getAttribute } from '@primeuix/utils/dom';
+import { getAttribute, getWindowScrollLeft, getWindowScrollTop } from '@primeuix/utils/dom';
 import BaseSlider from './BaseSlider.vue';
 
 export default {
     name: 'Slider',
     extends: BaseSlider,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'change', 'slideend'],
+    emits: ['change', 'slideend'],
     dragging: false,
     handleIndex: null,
     initX: null,
@@ -78,8 +81,22 @@ export default {
     barHeight: null,
     dragListener: null,
     dragEndListener: null,
+    mutationObserver: null,
+    data() {
+        return {
+            isRTL: false
+        };
+    },
     beforeUnmount() {
         this.unbindDragListeners();
+
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    },
+    mounted() {
+        this.updateDirection();
+        this.observeDirectionChanges();
     },
     methods: {
         updateDomData() {
@@ -95,8 +112,16 @@ export default {
             let pageX = event.touches ? event.touches[0].pageX : event.pageX;
             let pageY = event.touches ? event.touches[0].pageY : event.pageY;
 
-            if (this.orientation === 'horizontal') handleValue = ((pageX - this.initX) * 100) / this.barWidth;
-            else handleValue = ((this.initY + this.barHeight - pageY) * 100) / this.barHeight;
+            if (this.orientation === 'horizontal') {
+                if (this.isRTL) {
+                    handleValue = ((this.initX + this.barWidth - pageX) * 100) / this.barWidth;
+                } else {
+                    handleValue = ((pageX - this.initX) * 100) / this.barWidth;
+                }
+            } else {
+                handleValue = ((this.initY + this.barHeight - pageY) * 100) / this.barHeight;
+            }
+
             let newValue = (this.max - this.min) * (handleValue / 100) + this.min;
 
             if (this.step) {
@@ -136,7 +161,7 @@ export default {
                 modelValue = newValue;
             }
 
-            this.$emit('update:modelValue', modelValue);
+            this.writeValue(modelValue, event);
             this.$emit('change', modelValue);
         },
         onDragStart(event, index) {
@@ -224,6 +249,9 @@ export default {
                     break;
             }
         },
+        onBlur(event, index) {
+            this.formField.onBlur?.(event);
+        },
         decrementValue(event, index, pageKey = false) {
             let newValue;
 
@@ -275,15 +303,67 @@ export default {
                 document.removeEventListener('mouseup', this.dragEndListener);
                 this.dragEndListener = null;
             }
+        },
+        rangeStyle() {
+            if (this.range) {
+                const rangeSliderWidth = this.rangeEndPosition > this.rangeStartPosition ? this.rangeEndPosition - this.rangeStartPosition : this.rangeStartPosition - this.rangeEndPosition;
+                const rangeSliderPosition = this.rangeEndPosition > this.rangeStartPosition ? this.rangeStartPosition : this.rangeEndPosition;
+
+                if (this.horizontal) {
+                    return this.isRTL ? { right: rangeSliderPosition + '%', width: rangeSliderWidth + '%' } : { left: rangeSliderPosition + '%', width: rangeSliderWidth + '%' };
+                } else {
+                    return { bottom: rangeSliderPosition + '%', height: rangeSliderWidth + '%' };
+                }
+            } else {
+                if (this.horizontal) {
+                    return { width: this.handlePosition + '%' };
+                } else {
+                    return { height: this.handlePosition + '%' };
+                }
+            }
+        },
+        handleStyle() {
+            if (this.horizontal) {
+                return this.isRTL ? { right: this.handlePosition + '%' } : { left: this.handlePosition + '%' };
+            } else {
+                return { bottom: this.handlePosition + '%' };
+            }
+        },
+        rangeStartHandleStyle() {
+            if (this.horizontal) {
+                return this.isRTL ? { right: this.rangeStartPosition + '%' } : { left: this.rangeStartPosition + '%' };
+            } else {
+                return { bottom: this.rangeStartPosition + '%' };
+            }
+        },
+        rangeEndHandleStyle() {
+            if (this.horizontal) {
+                return this.isRTL ? { right: this.rangeEndPosition + '%' } : { left: this.rangeEndPosition + '%' };
+            } else {
+                return { bottom: this.rangeEndPosition + '%' };
+            }
+        },
+        updateDirection() {
+            this.isRTL = !!this.$el.closest('[dir="rtl"]');
+        },
+        observeDirectionChanges() {
+            const targetNode = document.documentElement;
+            const config = { attributes: true, attributeFilter: ['dir'] };
+
+            this.mutationObserver = new MutationObserver(() => {
+                this.updateDirection();
+            });
+
+            this.mutationObserver.observe(targetNode, config);
         }
     },
     computed: {
         value() {
             if (this.range) {
-                return [this.modelValue?.[0] ?? this.min, this.modelValue?.[1] ?? this.max];
+                return [this.d_value?.[0] ?? this.min, this.d_value?.[1] ?? this.max];
             }
 
-            return this.modelValue ?? this.min;
+            return this.d_value ?? this.min;
         },
         horizontal() {
             return this.orientation === 'horizontal';
@@ -291,22 +371,6 @@ export default {
         vertical() {
             return this.orientation === 'vertical';
         },
-        rangeStyle() {
-            if (this.range) {
-                const rangeSliderWidth = this.rangeEndPosition > this.rangeStartPosition ? this.rangeEndPosition - this.rangeStartPosition : this.rangeStartPosition - this.rangeEndPosition;
-                const rangeSliderPosition = this.rangeEndPosition > this.rangeStartPosition ? this.rangeStartPosition : this.rangeEndPosition;
-
-                if (this.horizontal) return { left: rangeSliderPosition + '%', width: rangeSliderWidth + '%' };
-                else return { bottom: rangeSliderPosition + '%', height: rangeSliderWidth + '%' };
-            } else {
-                if (this.horizontal) return { width: this.handlePosition + '%' };
-                else return { height: this.handlePosition + '%' };
-            }
-        },
-        handleStyle() {
-            if (this.horizontal) return { left: this.handlePosition + '%' };
-            else return { bottom: this.handlePosition + '%' };
-        },
         handlePosition() {
             if (this.value < this.min) return 0;
             else if (this.value > this.max) return 100;
@@ -319,14 +383,6 @@ export default {
         rangeEndPosition() {
             if (this.value && this.value.length === 2) return ((this.value[1] > this.max ? 100 : this.value[1] - this.min) * 100) / (this.max - this.min);
             else return 100;
-        },
-        rangeStartHandleStyle() {
-            if (this.horizontal) return { left: this.rangeStartPosition + '%' };
-            else return { bottom: this.rangeStartPosition + '%' };
-        },
-        rangeEndHandleStyle() {
-            if (this.horizontal) return { left: this.rangeEndPosition + '%' };
-            else return { bottom: this.rangeEndPosition + '%' };
         }
     }
 };

package/slider/index.d.ts

@@ -7,7 +7,7 @@
  * @module slider
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { PassThroughOptions } from 'primevue/passthrough';
 
@@ -101,6 +101,14 @@ export interface SliderProps {
      * Value of the component.
      */
     modelValue?: number | number[] | undefined;
+    /**
+     * The default value for the input when not controlled by `modelValue`.
+     */
+    defaultValue?: number | number[] | undefined;
+    /**
+     * The name attribute for the element, typically used in form submissions.
+     */
+    name?: string | undefined;
     /**
      * Mininum boundary value.
      * @defaultValue 0
@@ -126,6 +134,11 @@ export interface SliderProps {
      * @defaultValue false
      */
     range?: boolean | 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
@@ -143,6 +156,10 @@ export interface SliderProps {
      * Used to define a string that labels the element.
      */
     ariaLabel?: string | undefined;
+    /**
+     * 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.
      */
@@ -178,6 +195,11 @@ export interface SliderEmitsOptions {
      * @param {number | number[]} value - New value.
      */
     'update:modelValue'(value: number | number[]): void;
+    /**
+     * Emitted when the value changes in uncontrolled mode.
+     * @param {number | number[]} value - New value.
+     */
+    'value-change'(value: number | number[]): void;
     /**
      * Callback to invoke on value change.
      * @param {number} value - New value
@@ -208,7 +230,7 @@ declare const Slider: DefineComponent<SliderProps, SliderSlots, SliderEmits>;
 
 declare module 'vue' {
     export interface GlobalComponents {
-        Slider: GlobalComponentConstructor<SliderProps, SliderSlots, SliderEmits>;
+        Slider: DefineComponent<SliderProps, SliderSlots, SliderEmits>;
     }
 }