primevuelab 4.0.0-beta.4

package/colorpicker/colorpicker.mjs

@@ -0,0 +1,646 @@
+import { ZIndexUtils, DomHandler, ConnectedOverlayScrollHandler } from '@primevuelab/core/utils';
+import OverlayEventBus from 'primevuelab/overlayeventbus';
+import Portal from 'primevuelab/portal';
+import BaseComponent from '@primevuelab/core/basecomponent';
+import ColorPickerStyle from 'primevuelab/colorpicker/style';
+import { resolveComponent, openBlock, createElementBlock, mergeProps, createCommentVNode, createVNode, withCtx, Transition, createElementVNode } from 'vue';
+
+var script$1 = {
+  name: 'BaseColorPicker',
+  "extends": BaseComponent,
+  props: {
+    modelValue: {
+      type: null,
+      "default": null
+    },
+    defaultColor: {
+      type: null,
+      "default": 'ff0000'
+    },
+    inline: {
+      type: Boolean,
+      "default": false
+    },
+    format: {
+      type: String,
+      "default": 'hex'
+    },
+    disabled: {
+      type: Boolean,
+      "default": false
+    },
+    tabindex: {
+      type: String,
+      "default": null
+    },
+    autoZIndex: {
+      type: Boolean,
+      "default": true
+    },
+    baseZIndex: {
+      type: Number,
+      "default": 0
+    },
+    appendTo: {
+      type: [String, Object],
+      "default": 'body'
+    },
+    panelClass: null
+  },
+  style: ColorPickerStyle,
+  provide: function provide() {
+    return {
+      $pcColorPicker: this,
+      $parentInstance: this
+    };
+  }
+};
+
+var script = {
+  name: 'ColorPicker',
+  "extends": script$1,
+  inheritAttrs: false,
+  emits: ['update:modelValue', 'change', 'show', 'hide'],
+  data: function data() {
+    return {
+      overlayVisible: false
+    };
+  },
+  hsbValue: null,
+  outsideClickListener: null,
+  documentMouseMoveListener: null,
+  documentMouseUpListener: null,
+  scrollHandler: null,
+  resizeListener: null,
+  hueDragging: null,
+  colorDragging: null,
+  selfUpdate: null,
+  picker: null,
+  colorSelector: null,
+  colorHandle: null,
+  hueView: null,
+  hueHandle: null,
+  watch: {
+    modelValue: {
+      immediate: true,
+      handler: function handler(newValue) {
+        this.hsbValue = this.toHSB(newValue);
+        if (this.selfUpdate) this.selfUpdate = false;else this.updateUI();
+      }
+    }
+  },
+  beforeUnmount: function beforeUnmount() {
+    this.unbindOutsideClickListener();
+    this.unbindDragListeners();
+    this.unbindResizeListener();
+    if (this.scrollHandler) {
+      this.scrollHandler.destroy();
+      this.scrollHandler = null;
+    }
+    if (this.picker && this.autoZIndex) {
+      ZIndexUtils.clear(this.picker);
+    }
+    this.clearRefs();
+  },
+  mounted: function mounted() {
+    this.updateUI();
+  },
+  methods: {
+    pickColor: function pickColor(event) {
+      var rect = this.colorSelector.getBoundingClientRect();
+      var top = rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
+      var left = rect.left + document.body.scrollLeft;
+      var saturation = Math.floor(100 * Math.max(0, Math.min(150, (event.pageX || event.changedTouches[0].pageX) - left)) / 150);
+      var brightness = Math.floor(100 * (150 - Math.max(0, Math.min(150, (event.pageY || event.changedTouches[0].pageY) - top))) / 150);
+      this.hsbValue = this.validateHSB({
+        h: this.hsbValue.h,
+        s: saturation,
+        b: brightness
+      });
+      this.selfUpdate = true;
+      this.updateColorHandle();
+      this.updateInput();
+      this.updateModel(event);
+    },
+    pickHue: function pickHue(event) {
+      var top = this.hueView.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
+      this.hsbValue = this.validateHSB({
+        h: Math.floor(360 * (150 - Math.max(0, Math.min(150, (event.pageY || event.changedTouches[0].pageY) - top))) / 150),
+        s: 100,
+        b: 100
+      });
+      this.selfUpdate = true;
+      this.updateColorSelector();
+      this.updateHue();
+      this.updateModel(event);
+      this.updateInput();
+    },
+    updateModel: function updateModel(event) {
+      var value = this.modelValue;
+      switch (this.format) {
+        case 'hex':
+          value = this.HSBtoHEX(this.hsbValue);
+          break;
+        case 'rgb':
+          value = this.HSBtoRGB(this.hsbValue);
+          break;
+        case 'hsb':
+          value = this.hsbValue;
+          break;
+      }
+      this.$emit('update:modelValue', value);
+      this.$emit('change', {
+        event: event,
+        value: value
+      });
+    },
+    updateColorSelector: function updateColorSelector() {
+      if (this.colorSelector) {
+        var hsbValue = this.validateHSB({
+          h: this.hsbValue.h,
+          s: 100,
+          b: 100
+        });
+        this.colorSelector.style.backgroundColor = '#' + this.HSBtoHEX(hsbValue);
+      }
+    },
+    updateColorHandle: function updateColorHandle() {
+      if (this.colorHandle) {
+        this.colorHandle.style.left = Math.floor(150 * this.hsbValue.s / 100) + 'px';
+        this.colorHandle.style.top = Math.floor(150 * (100 - this.hsbValue.b) / 100) + 'px';
+      }
+    },
+    updateHue: function updateHue() {
+      if (this.hueHandle) {
+        this.hueHandle.style.top = Math.floor(150 - 150 * this.hsbValue.h / 360) + 'px';
+      }
+    },
+    updateInput: function updateInput() {
+      if (this.$refs.input) {
+        this.$refs.input.style.backgroundColor = '#' + this.HSBtoHEX(this.hsbValue);
+      }
+    },
+    updateUI: function updateUI() {
+      this.updateHue();
+      this.updateColorHandle();
+      this.updateInput();
+      this.updateColorSelector();
+    },
+    validateHSB: function validateHSB(hsb) {
+      return {
+        h: Math.min(360, Math.max(0, hsb.h)),
+        s: Math.min(100, Math.max(0, hsb.s)),
+        b: Math.min(100, Math.max(0, hsb.b))
+      };
+    },
+    validateRGB: function validateRGB(rgb) {
+      return {
+        r: Math.min(255, Math.max(0, rgb.r)),
+        g: Math.min(255, Math.max(0, rgb.g)),
+        b: Math.min(255, Math.max(0, rgb.b))
+      };
+    },
+    validateHEX: function validateHEX(hex) {
+      var len = 6 - hex.length;
+      if (len > 0) {
+        var o = [];
+        for (var i = 0; i < len; i++) {
+          o.push('0');
+        }
+        o.push(hex);
+        hex = o.join('');
+      }
+      return hex;
+    },
+    HEXtoRGB: function HEXtoRGB(hex) {
+      var hexValue = parseInt(hex.indexOf('#') > -1 ? hex.substring(1) : hex, 16);
+      return {
+        r: hexValue >> 16,
+        g: (hexValue & 0x00ff00) >> 8,
+        b: hexValue & 0x0000ff
+      };
+    },
+    HEXtoHSB: function HEXtoHSB(hex) {
+      return this.RGBtoHSB(this.HEXtoRGB(hex));
+    },
+    RGBtoHSB: function RGBtoHSB(rgb) {
+      var hsb = {
+        h: 0,
+        s: 0,
+        b: 0
+      };
+      var min = Math.min(rgb.r, rgb.g, rgb.b);
+      var max = Math.max(rgb.r, rgb.g, rgb.b);
+      var delta = max - min;
+      hsb.b = max;
+      hsb.s = max !== 0 ? 255 * delta / max : 0;
+      if (hsb.s !== 0) {
+        if (rgb.r === max) {
+          hsb.h = (rgb.g - rgb.b) / delta;
+        } else if (rgb.g === max) {
+          hsb.h = 2 + (rgb.b - rgb.r) / delta;
+        } else {
+          hsb.h = 4 + (rgb.r - rgb.g) / delta;
+        }
+      } else {
+        hsb.h = -1;
+      }
+      hsb.h *= 60;
+      if (hsb.h < 0) {
+        hsb.h += 360;
+      }
+      hsb.s *= 100 / 255;
+      hsb.b *= 100 / 255;
+      return hsb;
+    },
+    HSBtoRGB: function HSBtoRGB(hsb) {
+      var rgb = {
+        r: null,
+        g: null,
+        b: null
+      };
+      var h = Math.round(hsb.h);
+      var s = Math.round(hsb.s * 255 / 100);
+      var v = Math.round(hsb.b * 255 / 100);
+      if (s === 0) {
+        rgb = {
+          r: v,
+          g: v,
+          b: v
+        };
+      } else {
+        var t1 = v;
+        var t2 = (255 - s) * v / 255;
+        var t3 = (t1 - t2) * (h % 60) / 60;
+        if (h === 360) h = 0;
+        if (h < 60) {
+          rgb.r = t1;
+          rgb.b = t2;
+          rgb.g = t2 + t3;
+        } else if (h < 120) {
+          rgb.g = t1;
+          rgb.b = t2;
+          rgb.r = t1 - t3;
+        } else if (h < 180) {
+          rgb.g = t1;
+          rgb.r = t2;
+          rgb.b = t2 + t3;
+        } else if (h < 240) {
+          rgb.b = t1;
+          rgb.r = t2;
+          rgb.g = t1 - t3;
+        } else if (h < 300) {
+          rgb.b = t1;
+          rgb.g = t2;
+          rgb.r = t2 + t3;
+        } else if (h < 360) {
+          rgb.r = t1;
+          rgb.g = t2;
+          rgb.b = t1 - t3;
+        } else {
+          rgb.r = 0;
+          rgb.g = 0;
+          rgb.b = 0;
+        }
+      }
+      return {
+        r: Math.round(rgb.r),
+        g: Math.round(rgb.g),
+        b: Math.round(rgb.b)
+      };
+    },
+    RGBtoHEX: function RGBtoHEX(rgb) {
+      var hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
+      for (var key in hex) {
+        if (hex[key].length === 1) {
+          hex[key] = '0' + hex[key];
+        }
+      }
+      return hex.join('');
+    },
+    HSBtoHEX: function HSBtoHEX(hsb) {
+      return this.RGBtoHEX(this.HSBtoRGB(hsb));
+    },
+    toHSB: function toHSB(value) {
+      var hsb;
+      if (value) {
+        switch (this.format) {
+          case 'hex':
+            hsb = this.HEXtoHSB(value);
+            break;
+          case 'rgb':
+            hsb = this.RGBtoHSB(value);
+            break;
+          case 'hsb':
+            hsb = value;
+            break;
+        }
+      } else {
+        hsb = this.HEXtoHSB(this.defaultColor);
+      }
+      return hsb;
+    },
+    onOverlayEnter: function onOverlayEnter(el) {
+      this.updateUI();
+      this.alignOverlay();
+      this.bindOutsideClickListener();
+      this.bindScrollListener();
+      this.bindResizeListener();
+      if (this.autoZIndex) {
+        ZIndexUtils.set('overlay', el, this.baseZIndex, this.$primevue.config.zIndex.overlay);
+      }
+      this.$emit('show');
+    },
+    onOverlayLeave: function onOverlayLeave() {
+      this.unbindOutsideClickListener();
+      this.unbindScrollListener();
+      this.unbindResizeListener();
+      this.clearRefs();
+      this.$emit('hide');
+    },
+    onOverlayAfterLeave: function onOverlayAfterLeave(el) {
+      if (this.autoZIndex) {
+        ZIndexUtils.clear(el);
+      }
+    },
+    alignOverlay: function alignOverlay() {
+      if (this.appendTo === 'self') DomHandler.relativePosition(this.picker, this.$refs.input);else DomHandler.absolutePosition(this.picker, this.$refs.input);
+    },
+    onInputClick: function onInputClick() {
+      if (this.disabled) {
+        return;
+      }
+      this.overlayVisible = !this.overlayVisible;
+    },
+    onInputKeydown: function onInputKeydown(event) {
+      switch (event.code) {
+        case 'Space':
+          this.overlayVisible = !this.overlayVisible;
+          event.preventDefault();
+          break;
+        case 'Escape':
+        case 'Tab':
+          this.overlayVisible = false;
+          break;
+      }
+    },
+    onColorMousedown: function onColorMousedown(event) {
+      if (this.disabled) {
+        return;
+      }
+      this.bindDragListeners();
+      this.onColorDragStart(event);
+    },
+    onColorDragStart: function onColorDragStart(event) {
+      if (this.disabled) {
+        return;
+      }
+      this.colorDragging = true;
+      this.pickColor(event);
+      this.$el.setAttribute('p-colorpicker-dragging', 'true');
+      !this.isUnstyled && DomHandler.addClass(this.$el, 'p-colorpicker-dragging');
+      event.preventDefault();
+    },
+    onDrag: function onDrag(event) {
+      if (this.colorDragging) {
+        this.pickColor(event);
+        event.preventDefault();
+      }
+      if (this.hueDragging) {
+        this.pickHue(event);
+        event.preventDefault();
+      }
+    },
+    onDragEnd: function onDragEnd() {
+      this.colorDragging = false;
+      this.hueDragging = false;
+      this.$el.setAttribute('p-colorpicker-dragging', 'false');
+      !this.isUnstyled && DomHandler.removeClass(this.$el, 'p-colorpicker-dragging');
+      this.unbindDragListeners();
+    },
+    onHueMousedown: function onHueMousedown(event) {
+      if (this.disabled) {
+        return;
+      }
+      this.bindDragListeners();
+      this.onHueDragStart(event);
+    },
+    onHueDragStart: function onHueDragStart(event) {
+      if (this.disabled) {
+        return;
+      }
+      this.hueDragging = true;
+      this.pickHue(event);
+      !this.isUnstyled && DomHandler.addClass(this.$el, 'p-colorpicker-dragging');
+    },
+    isInputClicked: function isInputClicked(event) {
+      return this.$refs.input && this.$refs.input.isSameNode(event.target);
+    },
+    bindDragListeners: function bindDragListeners() {
+      this.bindDocumentMouseMoveListener();
+      this.bindDocumentMouseUpListener();
+    },
+    unbindDragListeners: function unbindDragListeners() {
+      this.unbindDocumentMouseMoveListener();
+      this.unbindDocumentMouseUpListener();
+    },
+    bindOutsideClickListener: function bindOutsideClickListener() {
+      var _this = this;
+      if (!this.outsideClickListener) {
+        this.outsideClickListener = function (event) {
+          if (_this.overlayVisible && _this.picker && !_this.picker.contains(event.target) && !_this.isInputClicked(event)) {
+            _this.overlayVisible = false;
+          }
+        };
+        document.addEventListener('click', this.outsideClickListener);
+      }
+    },
+    unbindOutsideClickListener: function unbindOutsideClickListener() {
+      if (this.outsideClickListener) {
+        document.removeEventListener('click', this.outsideClickListener);
+        this.outsideClickListener = null;
+      }
+    },
+    bindScrollListener: function bindScrollListener() {
+      var _this2 = this;
+      if (!this.scrollHandler) {
+        this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, function () {
+          if (_this2.overlayVisible) {
+            _this2.overlayVisible = false;
+          }
+        });
+      }
+      this.scrollHandler.bindScrollListener();
+    },
+    unbindScrollListener: function unbindScrollListener() {
+      if (this.scrollHandler) {
+        this.scrollHandler.unbindScrollListener();
+      }
+    },
+    bindResizeListener: function bindResizeListener() {
+      var _this3 = this;
+      if (!this.resizeListener) {
+        this.resizeListener = function () {
+          if (_this3.overlayVisible && !DomHandler.isTouchDevice()) {
+            _this3.overlayVisible = false;
+          }
+        };
+        window.addEventListener('resize', this.resizeListener);
+      }
+    },
+    unbindResizeListener: function unbindResizeListener() {
+      if (this.resizeListener) {
+        window.removeEventListener('resize', this.resizeListener);
+        this.resizeListener = null;
+      }
+    },
+    bindDocumentMouseMoveListener: function bindDocumentMouseMoveListener() {
+      if (!this.documentMouseMoveListener) {
+        this.documentMouseMoveListener = this.onDrag.bind(this);
+        document.addEventListener('mousemove', this.documentMouseMoveListener);
+      }
+    },
+    unbindDocumentMouseMoveListener: function unbindDocumentMouseMoveListener() {
+      if (this.documentMouseMoveListener) {
+        document.removeEventListener('mousemove', this.documentMouseMoveListener);
+        this.documentMouseMoveListener = null;
+      }
+    },
+    bindDocumentMouseUpListener: function bindDocumentMouseUpListener() {
+      if (!this.documentMouseUpListener) {
+        this.documentMouseUpListener = this.onDragEnd.bind(this);
+        document.addEventListener('mouseup', this.documentMouseUpListener);
+      }
+    },
+    unbindDocumentMouseUpListener: function unbindDocumentMouseUpListener() {
+      if (this.documentMouseUpListener) {
+        document.removeEventListener('mouseup', this.documentMouseUpListener);
+        this.documentMouseUpListener = null;
+      }
+    },
+    pickerRef: function pickerRef(el) {
+      this.picker = el;
+    },
+    colorSelectorRef: function colorSelectorRef(el) {
+      this.colorSelector = el;
+    },
+    colorHandleRef: function colorHandleRef(el) {
+      this.colorHandle = el;
+    },
+    hueViewRef: function hueViewRef(el) {
+      this.hueView = el;
+    },
+    hueHandleRef: function hueHandleRef(el) {
+      this.hueHandle = el;
+    },
+    clearRefs: function clearRefs() {
+      this.picker = null;
+      this.colorSelector = null;
+      this.colorHandle = null;
+      this.hueView = null;
+      this.hueHandle = null;
+    },
+    onOverlayClick: function onOverlayClick(event) {
+      OverlayEventBus.emit('overlay-click', {
+        originalEvent: event,
+        target: this.$el
+      });
+    }
+  },
+  components: {
+    Portal: Portal
+  }
+};
+
+var _hoisted_1 = ["tabindex", "disabled"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_Portal = resolveComponent("Portal");
+  return openBlock(), createElementBlock("div", mergeProps({
+    ref: "container",
+    "class": _ctx.cx('root')
+  }, _ctx.ptmi('root')), [!_ctx.inline ? (openBlock(), createElementBlock("input", mergeProps({
+    key: 0,
+    ref: "input",
+    type: "text",
+    "class": _ctx.cx('preview'),
+    readonly: "readonly",
+    tabindex: _ctx.tabindex,
+    disabled: _ctx.disabled,
+    onClick: _cache[0] || (_cache[0] = function () {
+      return $options.onInputClick && $options.onInputClick.apply($options, arguments);
+    }),
+    onKeydown: _cache[1] || (_cache[1] = function () {
+      return $options.onInputKeydown && $options.onInputKeydown.apply($options, arguments);
+    })
+  }, _ctx.ptm('preview')), null, 16, _hoisted_1)) : createCommentVNode("", true), createVNode(_component_Portal, {
+    appendTo: _ctx.appendTo,
+    disabled: _ctx.inline
+  }, {
+    "default": withCtx(function () {
+      return [createVNode(Transition, mergeProps({
+        name: "p-connected-overlay",
+        onEnter: $options.onOverlayEnter,
+        onLeave: $options.onOverlayLeave,
+        onAfterLeave: $options.onOverlayAfterLeave
+      }, _ctx.ptm('transition')), {
+        "default": withCtx(function () {
+          return [(_ctx.inline ? true : $data.overlayVisible) ? (openBlock(), createElementBlock("div", mergeProps({
+            key: 0,
+            ref: $options.pickerRef,
+            "class": [_ctx.cx('panel'), _ctx.panelClass],
+            onClick: _cache[10] || (_cache[10] = function () {
+              return $options.onOverlayClick && $options.onOverlayClick.apply($options, arguments);
+            })
+          }, _ctx.ptm('panel')), [createElementVNode("div", mergeProps({
+            "class": _ctx.cx('content')
+          }, _ctx.ptm('content')), [createElementVNode("div", mergeProps({
+            ref: $options.colorSelectorRef,
+            "class": _ctx.cx('colorSelector'),
+            onMousedown: _cache[2] || (_cache[2] = function ($event) {
+              return $options.onColorMousedown($event);
+            }),
+            onTouchstart: _cache[3] || (_cache[3] = function ($event) {
+              return $options.onColorDragStart($event);
+            }),
+            onTouchmove: _cache[4] || (_cache[4] = function ($event) {
+              return $options.onDrag($event);
+            }),
+            onTouchend: _cache[5] || (_cache[5] = function ($event) {
+              return $options.onDragEnd();
+            })
+          }, _ctx.ptm('colorSelector')), [createElementVNode("div", mergeProps({
+            "class": _ctx.cx('colorBackground')
+          }, _ctx.ptm('colorBackground')), [createElementVNode("div", mergeProps({
+            ref: $options.colorHandleRef,
+            "class": _ctx.cx('colorHandle')
+          }, _ctx.ptm('colorHandle')), null, 16)], 16)], 16), createElementVNode("div", mergeProps({
+            ref: $options.hueViewRef,
+            "class": _ctx.cx('hue'),
+            onMousedown: _cache[6] || (_cache[6] = function ($event) {
+              return $options.onHueMousedown($event);
+            }),
+            onTouchstart: _cache[7] || (_cache[7] = function ($event) {
+              return $options.onHueDragStart($event);
+            }),
+            onTouchmove: _cache[8] || (_cache[8] = function ($event) {
+              return $options.onDrag($event);
+            }),
+            onTouchend: _cache[9] || (_cache[9] = function ($event) {
+              return $options.onDragEnd();
+            })
+          }, _ctx.ptm('hue')), [createElementVNode("div", mergeProps({
+            ref: $options.hueHandleRef,
+            "class": _ctx.cx('hueHandle')
+          }, _ctx.ptm('hueHandle')), null, 16)], 16)], 16)], 16)) : createCommentVNode("", true)];
+        }),
+        _: 1
+      }, 16, ["onEnter", "onLeave", "onAfterLeave"])];
+    }),
+    _: 1
+  }, 8, ["appendTo", "disabled"])], 16);
+}
+
+script.render = render;
+
+export { script as default };
+//# sourceMappingURL=colorpicker.mjs.map