primevue 3.29.2 → 3.30.0

package/knob/knob.cjs.js

@@ -1,355 +1,345 @@
 'use strict';
 
 var BaseComponent = require('primevue/basecomponent');
+var usestyle = require('primevue/usestyle');
 var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 
-var script = {
-    name: 'Knob',
-    extends: BaseComponent__default["default"],
-    emits: ['update:modelValue', 'change'],
-    props: {
-        modelValue: {
-            type: Number,
-            default: null
-        },
-        size: {
-            type: Number,
-            default: 100
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        readonly: {
-            type: Boolean,
-            default: false
-        },
-        step: {
-            type: Number,
-            default: 1
-        },
-        min: {
-            type: Number,
-            default: 0
-        },
-        max: {
-            type: Number,
-            default: 100
-        },
-        valueColor: {
-            type: String,
-            default: 'var(--primary-color, Black)'
-        },
-        rangeColor: {
-            type: String,
-            default: 'var(--surface-border, LightGray)'
-        },
-        textColor: {
-            type: String,
-            default: 'var(--text-color-secondary, Black)'
-        },
-        strokeWidth: {
-            type: Number,
-            default: 14
-        },
-        showValue: {
-            type: Boolean,
-            default: true
-        },
-        valueTemplate: {
-            type: String,
-            default: '{value}'
-        },
-        tabindex: {
-            type: Number,
-            default: 0
-        },
-        'aria-labelledby': {
-            type: String,
-            default: null
-        },
-        'aria-label': {
-            type: String,
-            default: null
-        }
+var styles = "\n@keyframes dash-frame {\n    100% {\n        stroke-dashoffset: 0;\n    }\n}\n.p-knob-range {\n    fill: none;\n    transition: stroke 0.1s ease-in;\n}\n.p-knob-value {\n    animation-name: dash-frame;\n    animation-fill-mode: forwards;\n    fill: none;\n}\n.p-knob-text {\n    font-size: 1.3rem;\n    text-align: center;\n}\n";
+var classes = {
+  root: function root(_ref) {
+    var props = _ref.props;
+    return ['p-knob p-component', {
+      'p-disabled': props.disabled
+    }];
+  },
+  range: 'p-knob-range',
+  value: 'p-knob-value',
+  label: 'p-knob-text'
+};
+var _useStyle = usestyle.useStyle(styles, {
+    name: 'knob',
+    manual: true
+  }),
+  loadStyle = _useStyle.load;
+var script$1 = {
+  name: 'BaseKnob',
+  "extends": BaseComponent__default["default"],
+  props: {
+    modelValue: {
+      type: Number,
+      "default": null
     },
-    data() {
-        return {
-            radius: 40,
-            midX: 50,
-            midY: 50,
-            minRadians: (4 * Math.PI) / 3,
-            maxRadians: -Math.PI / 3
-        };
-    },
-    methods: {
-        updateValue(offsetX, offsetY) {
-            let dx = offsetX - this.size / 2;
-            let dy = this.size / 2 - offsetY;
-            let angle = Math.atan2(dy, dx);
-            let start = -Math.PI / 2 - Math.PI / 6;
-
-            this.updateModel(angle, start);
-        },
-        updateModel(angle, start) {
-            let mappedValue;
-
-            if (angle > this.maxRadians) mappedValue = this.mapRange(angle, this.minRadians, this.maxRadians, this.min, this.max);
-            else if (angle < start) mappedValue = this.mapRange(angle + 2 * Math.PI, this.minRadians, this.maxRadians, this.min, this.max);
-            else return;
-
-            let newValue = Math.round((mappedValue - this.min) / this.step) * this.step + this.min;
+    size: {
+      type: Number,
+      "default": 100
+    },
+    disabled: {
+      type: Boolean,
+      "default": false
+    },
+    readonly: {
+      type: Boolean,
+      "default": false
+    },
+    step: {
+      type: Number,
+      "default": 1
+    },
+    min: {
+      type: Number,
+      "default": 0
+    },
+    max: {
+      type: Number,
+      "default": 100
+    },
+    valueColor: {
+      type: String,
+      "default": 'var(--primary-color, Black)'
+    },
+    rangeColor: {
+      type: String,
+      "default": 'var(--surface-border, LightGray)'
+    },
+    textColor: {
+      type: String,
+      "default": 'var(--text-color-secondary, Black)'
+    },
+    strokeWidth: {
+      type: Number,
+      "default": 14
+    },
+    showValue: {
+      type: Boolean,
+      "default": true
+    },
+    valueTemplate: {
+      type: String,
+      "default": '{value}'
+    },
+    tabindex: {
+      type: Number,
+      "default": 0
+    },
+    'aria-labelledby': {
+      type: String,
+      "default": null
+    },
+    'aria-label': {
+      type: String,
+      "default": null
+    }
+  },
+  css: {
+    classes: classes,
+    loadStyle: loadStyle
+  },
+  provide: function provide() {
+    return {
+      $parentInstance: this
+    };
+  }
+};
 
-            this.$emit('update:modelValue', newValue);
-            this.$emit('change', newValue);
-        },
-        updateModelValue(newValue) {
-            if (newValue > this.max) this.$emit('update:modelValue', this.max);
-            else if (newValue < this.min) this.$emit('update:modelValue', this.min);
-            else this.$emit('update:modelValue', newValue);
-        },
-        mapRange(x, inMin, inMax, outMin, outMax) {
-            return ((x - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
-        },
-        onClick(event) {
-            if (!this.disabled && !this.readonly) {
-                this.updateValue(event.offsetX, event.offsetY);
-            }
-        },
-        onMouseDown(event) {
-            if (!this.disabled && !this.readonly) {
-                window.addEventListener('mousemove', this.onMouseMove);
-                window.addEventListener('mouseup', this.onMouseUp);
-                event.preventDefault();
-            }
-        },
-        onMouseUp(event) {
-            if (!this.disabled && !this.readonly) {
-                window.removeEventListener('mousemove', this.onMouseMove);
-                window.removeEventListener('mouseup', this.onMouseUp);
-                event.preventDefault();
+var script = {
+  name: 'Knob',
+  "extends": script$1,
+  emits: ['update:modelValue', 'change'],
+  data: function data() {
+    return {
+      radius: 40,
+      midX: 50,
+      midY: 50,
+      minRadians: 4 * Math.PI / 3,
+      maxRadians: -Math.PI / 3
+    };
+  },
+  methods: {
+    updateValue: function updateValue(offsetX, offsetY) {
+      var dx = offsetX - this.size / 2;
+      var dy = this.size / 2 - offsetY;
+      var angle = Math.atan2(dy, dx);
+      var start = -Math.PI / 2 - Math.PI / 6;
+      this.updateModel(angle, start);
+    },
+    updateModel: function updateModel(angle, start) {
+      var mappedValue;
+      if (angle > this.maxRadians) mappedValue = this.mapRange(angle, this.minRadians, this.maxRadians, this.min, this.max);else if (angle < start) mappedValue = this.mapRange(angle + 2 * Math.PI, this.minRadians, this.maxRadians, this.min, this.max);else return;
+      var newValue = Math.round((mappedValue - this.min) / this.step) * this.step + this.min;
+      this.$emit('update:modelValue', newValue);
+      this.$emit('change', newValue);
+    },
+    updateModelValue: function updateModelValue(newValue) {
+      if (newValue > this.max) this.$emit('update:modelValue', this.max);else if (newValue < this.min) this.$emit('update:modelValue', this.min);else this.$emit('update:modelValue', newValue);
+    },
+    mapRange: function mapRange(x, inMin, inMax, outMin, outMax) {
+      return (x - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
+    },
+    onClick: function onClick(event) {
+      if (!this.disabled && !this.readonly) {
+        this.updateValue(event.offsetX, event.offsetY);
+      }
+    },
+    onMouseDown: function onMouseDown(event) {
+      if (!this.disabled && !this.readonly) {
+        window.addEventListener('mousemove', this.onMouseMove);
+        window.addEventListener('mouseup', this.onMouseUp);
+        event.preventDefault();
+      }
+    },
+    onMouseUp: function onMouseUp(event) {
+      if (!this.disabled && !this.readonly) {
+        window.removeEventListener('mousemove', this.onMouseMove);
+        window.removeEventListener('mouseup', this.onMouseUp);
+        event.preventDefault();
+      }
+    },
+    onTouchStart: function onTouchStart(event) {
+      if (!this.disabled && !this.readonly) {
+        window.addEventListener('touchmove', this.onTouchMove);
+        window.addEventListener('touchend', this.onTouchEnd);
+        event.preventDefault();
+      }
+    },
+    onTouchEnd: function onTouchEnd(event) {
+      if (!this.disabled && !this.readonly) {
+        window.removeEventListener('touchmove', this.onTouchMove);
+        window.removeEventListener('touchend', this.onTouchEnd);
+        event.preventDefault();
+      }
+    },
+    onMouseMove: function onMouseMove(event) {
+      if (!this.disabled && !this.readonly) {
+        this.updateValue(event.offsetX, event.offsetY);
+        event.preventDefault();
+      }
+    },
+    onTouchMove: function onTouchMove(event) {
+      if (!this.disabled && !this.readonly && event.touches.length == 1) {
+        var rect = this.$el.getBoundingClientRect();
+        var touch = event.targetTouches.item(0);
+        var offsetX = touch.clientX - rect.left;
+        var offsetY = touch.clientY - rect.top;
+        this.updateValue(offsetX, offsetY);
+      }
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (!this.disabled && !this.readonly) {
+        switch (event.code) {
+          case 'ArrowRight':
+          case 'ArrowUp':
+            {
+              event.preventDefault();
+              this.updateModelValue(this.modelValue + 1);
+              break;
             }
-        },
-        onTouchStart(event) {
-            if (!this.disabled && !this.readonly) {
-                window.addEventListener('touchmove', this.onTouchMove);
-                window.addEventListener('touchend', this.onTouchEnd);
-                event.preventDefault();
+          case 'ArrowLeft':
+          case 'ArrowDown':
+            {
+              event.preventDefault();
+              this.updateModelValue(this.modelValue - 1);
+              break;
             }
-        },
-        onTouchEnd(event) {
-            if (!this.disabled && !this.readonly) {
-                window.removeEventListener('touchmove', this.onTouchMove);
-                window.removeEventListener('touchend', this.onTouchEnd);
-                event.preventDefault();
+          case 'Home':
+            {
+              event.preventDefault();
+              this.$emit('update:modelValue', this.min);
+              break;
             }
-        },
-        onMouseMove(event) {
-            if (!this.disabled && !this.readonly) {
-                this.updateValue(event.offsetX, event.offsetY);
-                event.preventDefault();
+          case 'End':
+            {
+              event.preventDefault();
+              this.$emit('update:modelValue', this.max);
+              break;
             }
-        },
-        onTouchMove(event) {
-            if (!this.disabled && !this.readonly && event.touches.length == 1) {
-                const rect = this.$el.getBoundingClientRect();
-                const touch = event.targetTouches.item(0);
-                const offsetX = touch.clientX - rect.left;
-                const offsetY = touch.clientY - rect.top;
-
-                this.updateValue(offsetX, offsetY);
+          case 'PageUp':
+            {
+              event.preventDefault();
+              this.updateModelValue(this.modelValue + 10);
+              break;
             }
-        },
-        onKeyDown(event) {
-            if (!this.disabled && !this.readonly) {
-                switch (event.code) {
-                    case 'ArrowRight':
-
-                    case 'ArrowUp': {
-                        event.preventDefault();
-                        this.updateModelValue(this.modelValue + 1);
-                        break;
-                    }
-
-                    case 'ArrowLeft':
-
-                    case 'ArrowDown': {
-                        event.preventDefault();
-                        this.updateModelValue(this.modelValue - 1);
-                        break;
-                    }
-
-                    case 'Home': {
-                        event.preventDefault();
-                        this.$emit('update:modelValue', this.min);
-                        break;
-                    }
-
-                    case 'End': {
-                        event.preventDefault();
-                        this.$emit('update:modelValue', this.max);
-                        break;
-                    }
-
-                    case 'PageUp': {
-                        event.preventDefault();
-                        this.updateModelValue(this.modelValue + 10);
-                        break;
-                    }
-
-                    case 'PageDown': {
-                        event.preventDefault();
-                        this.updateModelValue(this.modelValue - 10);
-                        break;
-                    }
-                }
+          case 'PageDown':
+            {
+              event.preventDefault();
+              this.updateModelValue(this.modelValue - 10);
+              break;
             }
         }
+      }
+    }
+  },
+  computed: {
+    rangePath: function rangePath() {
+      return "M ".concat(this.minX, " ").concat(this.minY, " A ").concat(this.radius, " ").concat(this.radius, " 0 1 1 ").concat(this.maxX, " ").concat(this.maxY);
     },
-    computed: {
-        containerClass() {
-            return [
-                'p-knob p-component',
-                {
-                    'p-disabled': this.disabled
-                }
-            ];
-        },
-        rangePath() {
-            return `M ${this.minX} ${this.minY} A ${this.radius} ${this.radius} 0 1 1 ${this.maxX} ${this.maxY}`;
-        },
-        valuePath() {
-            return `M ${this.zeroX} ${this.zeroY} A ${this.radius} ${this.radius} 0 ${this.largeArc} ${this.sweep} ${this.valueX} ${this.valueY}`;
-        },
-        zeroRadians() {
-            if (this.min > 0 && this.max > 0) return this.mapRange(this.min, this.min, this.max, this.minRadians, this.maxRadians);
-            else return this.mapRange(0, this.min, this.max, this.minRadians, this.maxRadians);
-        },
-        valueRadians() {
-            return this.mapRange(this.modelValue, this.min, this.max, this.minRadians, this.maxRadians);
-        },
-        minX() {
-            return this.midX + Math.cos(this.minRadians) * this.radius;
-        },
-        minY() {
-            return this.midY - Math.sin(this.minRadians) * this.radius;
-        },
-        maxX() {
-            return this.midX + Math.cos(this.maxRadians) * this.radius;
-        },
-        maxY() {
-            return this.midY - Math.sin(this.maxRadians) * this.radius;
-        },
-        zeroX() {
-            return this.midX + Math.cos(this.zeroRadians) * this.radius;
-        },
-        zeroY() {
-            return this.midY - Math.sin(this.zeroRadians) * this.radius;
-        },
-        valueX() {
-            return this.midX + Math.cos(this.valueRadians) * this.radius;
-        },
-        valueY() {
-            return this.midY - Math.sin(this.valueRadians) * this.radius;
-        },
-        largeArc() {
-            return Math.abs(this.zeroRadians - this.valueRadians) < Math.PI ? 0 : 1;
-        },
-        sweep() {
-            return this.valueRadians > this.zeroRadians ? 0 : 1;
-        },
-        valueToDisplay() {
-            return this.valueTemplate.replace(/{value}/g, this.modelValue);
-        }
+    valuePath: function valuePath() {
+      return "M ".concat(this.zeroX, " ").concat(this.zeroY, " A ").concat(this.radius, " ").concat(this.radius, " 0 ").concat(this.largeArc, " ").concat(this.sweep, " ").concat(this.valueX, " ").concat(this.valueY);
+    },
+    zeroRadians: function zeroRadians() {
+      if (this.min > 0 && this.max > 0) return this.mapRange(this.min, this.min, this.max, this.minRadians, this.maxRadians);else return this.mapRange(0, this.min, this.max, this.minRadians, this.maxRadians);
+    },
+    valueRadians: function valueRadians() {
+      return this.mapRange(this.modelValue, this.min, this.max, this.minRadians, this.maxRadians);
+    },
+    minX: function minX() {
+      return this.midX + Math.cos(this.minRadians) * this.radius;
+    },
+    minY: function minY() {
+      return this.midY - Math.sin(this.minRadians) * this.radius;
+    },
+    maxX: function maxX() {
+      return this.midX + Math.cos(this.maxRadians) * this.radius;
+    },
+    maxY: function maxY() {
+      return this.midY - Math.sin(this.maxRadians) * this.radius;
+    },
+    zeroX: function zeroX() {
+      return this.midX + Math.cos(this.zeroRadians) * this.radius;
+    },
+    zeroY: function zeroY() {
+      return this.midY - Math.sin(this.zeroRadians) * this.radius;
+    },
+    valueX: function valueX() {
+      return this.midX + Math.cos(this.valueRadians) * this.radius;
+    },
+    valueY: function valueY() {
+      return this.midY - Math.sin(this.valueRadians) * this.radius;
+    },
+    largeArc: function largeArc() {
+      return Math.abs(this.zeroRadians - this.valueRadians) < Math.PI ? 0 : 1;
+    },
+    sweep: function sweep() {
+      return this.valueRadians > this.zeroRadians ? 0 : 1;
+    },
+    valueToDisplay: function valueToDisplay() {
+      return this.valueTemplate.replace(/{value}/g, this.modelValue);
     }
+  }
 };
 //Derived and forked from https://github.com/kramer99/vue-knob-control
 
-const _hoisted_1 = ["width", "height", "tabindex", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-labelledby", "aria-label"];
-const _hoisted_2 = ["d", "stroke-width", "stroke"];
-const _hoisted_3 = ["d", "stroke-width", "stroke"];
-const _hoisted_4 = ["fill"];
-
+var _hoisted_1 = ["width", "height", "tabindex", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-labelledby", "aria-label"];
+var _hoisted_2 = ["d", "stroke-width", "stroke"];
+var _hoisted_3 = ["d", "stroke-width", "stroke"];
+var _hoisted_4 = ["fill"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: $options.containerClass }, _ctx.ptm('root')), [
-    (vue.openBlock(), vue.createElementBlock("svg", vue.mergeProps({
-      viewBox: "0 0 100 100",
-      role: "slider",
-      width: $props.size,
-      height: $props.size,
-      tabindex: $props.readonly || $props.disabled ? -1 : $props.tabindex,
-      "aria-valuemin": $props.min,
-      "aria-valuemax": $props.max,
-      "aria-valuenow": $props.modelValue,
-      "aria-labelledby": _ctx.ariaLabelledby,
-      "aria-label": _ctx.ariaLabel,
-      onClick: _cache[0] || (_cache[0] = (...args) => ($options.onClick && $options.onClick(...args))),
-      onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
-      onMousedown: _cache[2] || (_cache[2] = (...args) => ($options.onMouseDown && $options.onMouseDown(...args))),
-      onMouseup: _cache[3] || (_cache[3] = (...args) => ($options.onMouseUp && $options.onMouseUp(...args))),
-      onTouchstart: _cache[4] || (_cache[4] = (...args) => ($options.onTouchStart && $options.onTouchStart(...args))),
-      onTouchend: _cache[5] || (_cache[5] = (...args) => ($options.onTouchEnd && $options.onTouchEnd(...args)))
-    }, _ctx.ptm('svg')), [
-      vue.createElementVNode("path", vue.mergeProps({
-        d: $options.rangePath,
-        "stroke-width": $props.strokeWidth,
-        stroke: $props.rangeColor,
-        class: "p-knob-range"
-      }, _ctx.ptm('range')), null, 16, _hoisted_2),
-      vue.createElementVNode("path", vue.mergeProps({
-        d: $options.valuePath,
-        "stroke-width": $props.strokeWidth,
-        stroke: $props.valueColor,
-        class: "p-knob-value"
-      }, _ctx.ptm('value')), null, 16, _hoisted_3),
-      ($props.showValue)
-        ? (vue.openBlock(), vue.createElementBlock("text", vue.mergeProps({
-            key: 0,
-            x: 50,
-            y: 57,
-            "text-anchor": "middle",
-            fill: $props.textColor,
-            class: "p-knob-text"
-          }, _ctx.ptm('label')), vue.toDisplayString($options.valueToDisplay), 17, _hoisted_4))
-        : vue.createCommentVNode("", true)
-    ], 16, _hoisted_1))
-  ], 16))
-}
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
+  return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    "class": _ctx.cx('root')
+  }, _ctx.ptm('root'), {
+    "data-pc-name": "knob"
+  }), [(vue.openBlock(), vue.createElementBlock("svg", vue.mergeProps({
+    viewBox: "0 0 100 100",
+    role: "slider",
+    width: _ctx.size,
+    height: _ctx.size,
+    tabindex: _ctx.readonly || _ctx.disabled ? -1 : _ctx.tabindex,
+    "aria-valuemin": _ctx.min,
+    "aria-valuemax": _ctx.max,
+    "aria-valuenow": _ctx.modelValue,
+    "aria-labelledby": _ctx.ariaLabelledby,
+    "aria-label": _ctx.ariaLabel,
+    onClick: _cache[0] || (_cache[0] = function () {
+      return $options.onClick && $options.onClick.apply($options, arguments);
+    }),
+    onKeydown: _cache[1] || (_cache[1] = function () {
+      return $options.onKeyDown && $options.onKeyDown.apply($options, arguments);
+    }),
+    onMousedown: _cache[2] || (_cache[2] = function () {
+      return $options.onMouseDown && $options.onMouseDown.apply($options, arguments);
+    }),
+    onMouseup: _cache[3] || (_cache[3] = function () {
+      return $options.onMouseUp && $options.onMouseUp.apply($options, arguments);
+    }),
+    onTouchstart: _cache[4] || (_cache[4] = function () {
+      return $options.onTouchStart && $options.onTouchStart.apply($options, arguments);
+    }),
+    onTouchend: _cache[5] || (_cache[5] = function () {
+      return $options.onTouchEnd && $options.onTouchEnd.apply($options, arguments);
+    })
+  }, _ctx.ptm('svg')), [vue.createElementVNode("path", vue.mergeProps({
+    d: $options.rangePath,
+    "stroke-width": _ctx.strokeWidth,
+    stroke: _ctx.rangeColor,
+    "class": _ctx.cx('range')
+  }, _ctx.ptm('range')), null, 16, _hoisted_2), vue.createElementVNode("path", vue.mergeProps({
+    d: $options.valuePath,
+    "stroke-width": _ctx.strokeWidth,
+    stroke: _ctx.valueColor,
+    "class": _ctx.cx('value')
+  }, _ctx.ptm('value')), null, 16, _hoisted_3), _ctx.showValue ? (vue.openBlock(), vue.createElementBlock("text", vue.mergeProps({
+    key: 0,
+    x: 50,
+    y: 57,
+    "text-anchor": "middle",
+    fill: _ctx.textColor,
+    "class": _ctx.cx('label')
+  }, _ctx.ptm('label')), vue.toDisplayString($options.valueToDisplay), 17, _hoisted_4)) : vue.createCommentVNode("", true)], 16, _hoisted_1))], 16);
 }
 
-var css_248z = "\n@keyframes dash-frame {\n100% {\n        stroke-dashoffset: 0;\n}\n}\n.p-knob-range {\n    fill: none;\n    transition: stroke 0.1s ease-in;\n}\n.p-knob-value {\n    animation-name: dash-frame;\n    animation-fill-mode: forwards;\n    fill: none;\n}\n.p-knob-text {\n    font-size: 1.3rem;\n    text-align: center;\n}\n";
-styleInject(css_248z);
-
 script.render = render;
 
 module.exports = script;