primevue
Version:
PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc
646 lines (640 loc) • 20.5 kB
JavaScript
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
import { ZIndexUtils, DomHandler, ConnectedOverlayScrollHandler } from 'primevue/utils';
import BaseComponent from 'primevue/basecomponent';
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,
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 };