mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Fixed #3802 - Improve folder structure for nuxt configurations
This commit is contained in:
mertsincan
parent
851950270b
commit
f5fe822afb
563 changed files with 1703 additions and 1095 deletions
7
components/lib/colorpicker/ColorPicker.css
Executable file
7
components/lib/colorpicker/ColorPicker.css
Executable file
|
|
@ -0,0 +1,7 @@
|
|||
.p-colorpicker-panel .p-colorpicker-color {
|
||||
background: transparent url("./images/color.png") no-repeat left top;
|
||||
}
|
||||
|
||||
.p-colorpicker-panel .p-colorpicker-hue {
|
||||
background: transparent url("./images/hue.png") no-repeat left top;
|
||||
}
|
||||
126
components/lib/colorpicker/ColorPicker.d.ts
vendored
Executable file
126
components/lib/colorpicker/ColorPicker.d.ts
vendored
Executable file
|
|
@ -0,0 +1,126 @@
|
|||
/**
|
||||
*
|
||||
* ColorPicker groups a collection of contents in tabs.
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/colorpicker/)
|
||||
*
|
||||
* @module colorpicker
|
||||
*
|
||||
*/
|
||||
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
|
||||
|
||||
/**
|
||||
* Custom change event.
|
||||
* @see {@link ColorPickerEmits.change}
|
||||
*/
|
||||
export interface ColorPickerChangeEvent {
|
||||
/**
|
||||
* Browser event
|
||||
*/
|
||||
originalEvent: Event;
|
||||
/**
|
||||
* Selected color value.
|
||||
*/
|
||||
value: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines valid properties in ColorPicker component.
|
||||
*/
|
||||
export interface ColorPickerProps {
|
||||
/**
|
||||
* Value of the component.
|
||||
*/
|
||||
modelValue?: any;
|
||||
/**
|
||||
* Initial color to display when value is not defined.
|
||||
* @defaultValue ff0000
|
||||
*/
|
||||
defaultColor?: any;
|
||||
/**
|
||||
* Whether to display as an overlay or not.
|
||||
* @defaultValue false
|
||||
*/
|
||||
inline?: boolean | undefined;
|
||||
/**
|
||||
* Format to use in value binding, supported formats are 'hex', 'rgb' and 'hsb'.
|
||||
* @defaultValue hex
|
||||
*/
|
||||
format?: 'hex' | 'rgb' | 'hsb' | undefined;
|
||||
/**
|
||||
* When present, it specifies that the component should be disabled.
|
||||
* @defaultValue false
|
||||
*/
|
||||
disabled?: boolean | undefined;
|
||||
/**
|
||||
* Index of the element in tabbing order.
|
||||
*/
|
||||
tabindex?: string | undefined;
|
||||
/**
|
||||
* Whether to automatically manage layering.
|
||||
* @defaultValue true
|
||||
*/
|
||||
autoZIndex?: boolean | undefined;
|
||||
/**
|
||||
* Base zIndex value to use in layering.
|
||||
* @defaultValue 0
|
||||
*/
|
||||
baseZIndex?: number | undefined;
|
||||
/**
|
||||
* Style class of the overlay panel.
|
||||
*/
|
||||
panelClass?: any;
|
||||
/**
|
||||
* A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
|
||||
* @defaultValue body
|
||||
*/
|
||||
appendTo?: 'body' | 'self' | string | undefined | HTMLElement;
|
||||
}
|
||||
|
||||
export interface ColorPickerSlots {}
|
||||
|
||||
/**
|
||||
* Defines valid emits in ColorPicker component.
|
||||
*/
|
||||
export interface ColorPickerEmits {
|
||||
/**
|
||||
* Emitted when the value changes.
|
||||
* @param {*} value - New value.
|
||||
*/
|
||||
'update:modelValue'(value: any): void;
|
||||
/**
|
||||
* Callback to invoke when a chip is added.
|
||||
* @param {ColorPickerChangeEvent} event - Custom add event.
|
||||
*/
|
||||
change(event: ColorPickerChangeEvent): void;
|
||||
/**
|
||||
* Callback to invoke when input is cleared by the user.
|
||||
*/
|
||||
show(): void;
|
||||
/**
|
||||
* Callback to invoke when input is cleared by the user.
|
||||
*/
|
||||
hide(): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* **PrimeVue - ColorPicker**
|
||||
*
|
||||
* _ColorPicker groups a collection of contents in tabs._
|
||||
*
|
||||
* [Live Demo](https://www.primevue.org/colorpicker/)
|
||||
* --- ---
|
||||
* 
|
||||
*
|
||||
* @group Component
|
||||
*
|
||||
*/
|
||||
declare class ColorPicker extends ClassComponent<ColorPickerProps, ColorPickerSlots, ColorPickerEmits> {}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
interface GlobalComponents {
|
||||
ColorPicker: GlobalComponentConstructor<ColorPicker>;
|
||||
}
|
||||
}
|
||||
|
||||
export default ColorPicker;
|
||||
59
components/lib/colorpicker/ColorPicker.spec.js
Normal file
59
components/lib/colorpicker/ColorPicker.spec.js
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import { mount } from '@vue/test-utils';
|
||||
import PrimeVue from 'primevue/config';
|
||||
import ColorPicker from './ColorPicker.vue';
|
||||
|
||||
describe('ColorPicker.vue', () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = mount(ColorPicker, {
|
||||
global: {
|
||||
plugins: [PrimeVue],
|
||||
stubs: {
|
||||
teleport: true
|
||||
}
|
||||
},
|
||||
props: {
|
||||
modelValue: null
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('should exist', () => {
|
||||
expect(wrapper.find('.p-colorpicker.p-component').exists()).toBe(true);
|
||||
expect(wrapper.find('.p-colorpicker-preview.p-inputtext').exists()).toBe(true);
|
||||
});
|
||||
|
||||
it('should input click triggered', async () => {
|
||||
const input = wrapper.find('.p-colorpicker-preview.p-inputtext');
|
||||
const onInputClick = vi.spyOn(wrapper.vm, 'onInputClick');
|
||||
|
||||
await input.trigger('click');
|
||||
|
||||
expect(onInputClick).toHaveBeenCalled();
|
||||
expect(wrapper.find('.p-colorpicker-panel').exists()).toBe(true);
|
||||
expect(wrapper.find('.p-colorpicker-color-selector').exists()).toBe(true);
|
||||
expect(wrapper.find('.p-colorpicker-hue').exists()).toBe(true);
|
||||
});
|
||||
|
||||
it('should mouse events triggered', async () => {
|
||||
const input = wrapper.find('.p-colorpicker-preview.p-inputtext');
|
||||
|
||||
await input.trigger('click');
|
||||
|
||||
const onColorMousedown = vi.spyOn(wrapper.vm, 'onColorMousedown');
|
||||
const onHueMousedown = vi.spyOn(wrapper.vm, 'onHueMousedown');
|
||||
const event = { pageX: 100, pageY: 120, preventDefault: () => {} };
|
||||
const event2 = { pageX: 70, pageY: 20, preventDefault: () => {} };
|
||||
|
||||
wrapper.vm.onColorMousedown(event);
|
||||
|
||||
expect(onColorMousedown).toHaveBeenCalled();
|
||||
expect(wrapper.find('.p-colorpicker-preview.p-inputtext').element.style.backgroundColor).not.toBe('rgb(255, 0, 0)');
|
||||
|
||||
wrapper.vm.onHueMousedown(event2);
|
||||
|
||||
expect(onHueMousedown).toHaveBeenCalled();
|
||||
expect(wrapper.find('.p-colorpicker-preview.p-inputtext').element.style.backgroundColor).not.toBe('rgb(255, 0, 0)');
|
||||
});
|
||||
});
|
||||
704
components/lib/colorpicker/ColorPicker.vue
Executable file
704
components/lib/colorpicker/ColorPicker.vue
Executable file
|
|
@ -0,0 +1,704 @@
|
|||
<template>
|
||||
<div ref="container" :class="containerClass">
|
||||
<input v-if="!inline" ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" />
|
||||
<Portal :appendTo="appendTo" :disabled="inline">
|
||||
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
|
||||
<div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="pickerClass" @click="onOverlayClick">
|
||||
<div class="p-colorpicker-content">
|
||||
<div :ref="colorSelectorRef" class="p-colorpicker-color-selector" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()">
|
||||
<div class="p-colorpicker-color">
|
||||
<div :ref="colorHandleRef" class="p-colorpicker-color-handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div :ref="hueViewRef" class="p-colorpicker-hue" @mousedown="onHueMousedown($event)" @touchstart="onHueDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()">
|
||||
<div :ref="hueHandleRef" class="p-colorpicker-hue-handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</Portal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OverlayEventBus from 'primevue/overlayeventbus';
|
||||
import Portal from 'primevue/portal';
|
||||
import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue/utils';
|
||||
|
||||
export default {
|
||||
name: 'ColorPicker',
|
||||
emits: ['update:modelValue', 'change', 'show', 'hide'],
|
||||
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,
|
||||
default: 'body'
|
||||
},
|
||||
panelClass: null
|
||||
},
|
||||
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(newValue) {
|
||||
this.hsbValue = this.toHSB(newValue);
|
||||
|
||||
if (this.selfUpdate) this.selfUpdate = false;
|
||||
else this.updateUI();
|
||||
}
|
||||
}
|
||||
},
|
||||
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() {
|
||||
this.updateUI();
|
||||
},
|
||||
methods: {
|
||||
pickColor(event) {
|
||||
let rect = this.colorSelector.getBoundingClientRect();
|
||||
let top = rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
|
||||
let left = rect.left + document.body.scrollLeft;
|
||||
let saturation = Math.floor((100 * Math.max(0, Math.min(150, (event.pageX || event.changedTouches[0].pageX) - left))) / 150);
|
||||
let 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();
|
||||
this.$emit('change', { event: event, value: this.modelValue });
|
||||
},
|
||||
pickHue(event) {
|
||||
let 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();
|
||||
this.updateInput();
|
||||
this.$emit('change', { event: event, value: this.modelValue });
|
||||
},
|
||||
updateModel() {
|
||||
switch (this.format) {
|
||||
case 'hex':
|
||||
this.$emit('update:modelValue', this.HSBtoHEX(this.hsbValue));
|
||||
break;
|
||||
|
||||
case 'rgb':
|
||||
this.$emit('update:modelValue', this.HSBtoRGB(this.hsbValue));
|
||||
break;
|
||||
|
||||
case 'hsb':
|
||||
this.$emit('update:modelValue', this.hsbValue);
|
||||
break;
|
||||
|
||||
default:
|
||||
//NoOp
|
||||
break;
|
||||
}
|
||||
},
|
||||
updateColorSelector() {
|
||||
if (this.colorSelector) {
|
||||
let hsbValue = this.validateHSB({
|
||||
h: this.hsbValue.h,
|
||||
s: 100,
|
||||
b: 100
|
||||
});
|
||||
|
||||
this.colorSelector.style.backgroundColor = '#' + this.HSBtoHEX(hsbValue);
|
||||
}
|
||||
},
|
||||
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() {
|
||||
if (this.hueHandle) {
|
||||
this.hueHandle.style.top = Math.floor(150 - (150 * this.hsbValue.h) / 360) + 'px';
|
||||
}
|
||||
},
|
||||
updateInput() {
|
||||
if (this.$refs.input) {
|
||||
this.$refs.input.style.backgroundColor = '#' + this.HSBtoHEX(this.hsbValue);
|
||||
}
|
||||
},
|
||||
updateUI() {
|
||||
this.updateHue();
|
||||
this.updateColorHandle();
|
||||
this.updateInput();
|
||||
this.updateColorSelector();
|
||||
},
|
||||
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(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(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(hex) {
|
||||
let hexValue = parseInt(hex.indexOf('#') > -1 ? hex.substring(1) : hex, 16);
|
||||
|
||||
return { r: hexValue >> 16, g: (hexValue & 0x00ff00) >> 8, b: hexValue & 0x0000ff };
|
||||
},
|
||||
HEXtoHSB(hex) {
|
||||
return this.RGBtoHSB(this.HEXtoRGB(hex));
|
||||
},
|
||||
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(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(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(hsb) {
|
||||
return this.RGBtoHEX(this.HSBtoRGB(hsb));
|
||||
},
|
||||
toHSB(value) {
|
||||
let 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;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
hsb = this.HEXtoHSB(this.defaultColor);
|
||||
}
|
||||
|
||||
return hsb;
|
||||
},
|
||||
onOverlayEnter(el) {
|
||||
this.updateUI();
|
||||
this.alignOverlay();
|
||||
this.bindOutsideClickListener();
|
||||
this.bindScrollListener();
|
||||
this.bindResizeListener();
|
||||
|
||||
if (this.autoZIndex) {
|
||||
ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
|
||||
}
|
||||
|
||||
this.$emit('show');
|
||||
},
|
||||
onOverlayLeave() {
|
||||
this.unbindOutsideClickListener();
|
||||
this.unbindScrollListener();
|
||||
this.unbindResizeListener();
|
||||
this.clearRefs();
|
||||
this.$emit('hide');
|
||||
},
|
||||
onOverlayAfterLeave(el) {
|
||||
if (this.autoZIndex) {
|
||||
ZIndexUtils.clear(el);
|
||||
}
|
||||
},
|
||||
alignOverlay() {
|
||||
if (this.appendTo === 'self') DomHandler.relativePosition(this.picker, this.$refs.input);
|
||||
else DomHandler.absolutePosition(this.picker, this.$refs.input);
|
||||
},
|
||||
onInputClick() {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.overlayVisible = !this.overlayVisible;
|
||||
},
|
||||
onInputKeydown(event) {
|
||||
switch (event.code) {
|
||||
case 'Space':
|
||||
this.overlayVisible = !this.overlayVisible;
|
||||
event.preventDefault();
|
||||
break;
|
||||
|
||||
case 'Escape':
|
||||
case 'Tab':
|
||||
this.overlayVisible = false;
|
||||
break;
|
||||
|
||||
default:
|
||||
//NoOp
|
||||
break;
|
||||
}
|
||||
},
|
||||
onColorMousedown(event) {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.bindDragListeners();
|
||||
this.onColorDragStart(event);
|
||||
},
|
||||
onColorDragStart(event) {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.colorDragging = true;
|
||||
this.pickColor(event);
|
||||
DomHandler.addClass(this.$el, 'p-colorpicker-dragging');
|
||||
event.preventDefault();
|
||||
},
|
||||
onDrag(event) {
|
||||
if (this.colorDragging) {
|
||||
this.pickColor(event);
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
if (this.hueDragging) {
|
||||
this.pickHue(event);
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
onDragEnd() {
|
||||
this.colorDragging = false;
|
||||
this.hueDragging = false;
|
||||
DomHandler.removeClass(this.$el, 'p-colorpicker-dragging');
|
||||
this.unbindDragListeners();
|
||||
},
|
||||
onHueMousedown(event) {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.bindDragListeners();
|
||||
this.onHueDragStart(event);
|
||||
},
|
||||
onHueDragStart(event) {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.hueDragging = true;
|
||||
this.pickHue(event);
|
||||
DomHandler.addClass(this.$el, 'p-colorpicker-dragging');
|
||||
},
|
||||
isInputClicked(event) {
|
||||
return this.$refs.input && this.$refs.input.isSameNode(event.target);
|
||||
},
|
||||
bindDragListeners() {
|
||||
this.bindDocumentMouseMoveListener();
|
||||
this.bindDocumentMouseUpListener();
|
||||
},
|
||||
unbindDragListeners() {
|
||||
this.unbindDocumentMouseMoveListener();
|
||||
this.unbindDocumentMouseUpListener();
|
||||
},
|
||||
bindOutsideClickListener() {
|
||||
if (!this.outsideClickListener) {
|
||||
this.outsideClickListener = (event) => {
|
||||
if (this.overlayVisible && this.picker && !this.picker.contains(event.target) && !this.isInputClicked(event)) {
|
||||
this.overlayVisible = false;
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('click', this.outsideClickListener);
|
||||
}
|
||||
},
|
||||
unbindOutsideClickListener() {
|
||||
if (this.outsideClickListener) {
|
||||
document.removeEventListener('click', this.outsideClickListener);
|
||||
this.outsideClickListener = null;
|
||||
}
|
||||
},
|
||||
bindScrollListener() {
|
||||
if (!this.scrollHandler) {
|
||||
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
|
||||
if (this.overlayVisible) {
|
||||
this.overlayVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.scrollHandler.bindScrollListener();
|
||||
},
|
||||
unbindScrollListener() {
|
||||
if (this.scrollHandler) {
|
||||
this.scrollHandler.unbindScrollListener();
|
||||
}
|
||||
},
|
||||
bindResizeListener() {
|
||||
if (!this.resizeListener) {
|
||||
this.resizeListener = () => {
|
||||
if (this.overlayVisible && !DomHandler.isTouchDevice()) {
|
||||
this.overlayVisible = false;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', this.resizeListener);
|
||||
}
|
||||
},
|
||||
unbindResizeListener() {
|
||||
if (this.resizeListener) {
|
||||
window.removeEventListener('resize', this.resizeListener);
|
||||
this.resizeListener = null;
|
||||
}
|
||||
},
|
||||
bindDocumentMouseMoveListener() {
|
||||
if (!this.documentMouseMoveListener) {
|
||||
this.documentMouseMoveListener = this.onDrag.bind(this);
|
||||
document.addEventListener('mousemove', this.documentMouseMoveListener);
|
||||
}
|
||||
},
|
||||
unbindDocumentMouseMoveListener() {
|
||||
if (this.documentMouseMoveListener) {
|
||||
document.removeEventListener('mousemove', this.documentMouseMoveListener);
|
||||
this.documentMouseMoveListener = null;
|
||||
}
|
||||
},
|
||||
bindDocumentMouseUpListener() {
|
||||
if (!this.documentMouseUpListener) {
|
||||
this.documentMouseUpListener = this.onDragEnd.bind(this);
|
||||
document.addEventListener('mouseup', this.documentMouseUpListener);
|
||||
}
|
||||
},
|
||||
unbindDocumentMouseUpListener() {
|
||||
if (this.documentMouseUpListener) {
|
||||
document.removeEventListener('mouseup', this.documentMouseUpListener);
|
||||
this.documentMouseUpListener = null;
|
||||
}
|
||||
},
|
||||
pickerRef(el) {
|
||||
this.picker = el;
|
||||
},
|
||||
colorSelectorRef(el) {
|
||||
this.colorSelector = el;
|
||||
},
|
||||
colorHandleRef(el) {
|
||||
this.colorHandle = el;
|
||||
},
|
||||
hueViewRef(el) {
|
||||
this.hueView = el;
|
||||
},
|
||||
hueHandleRef(el) {
|
||||
this.hueHandle = el;
|
||||
},
|
||||
clearRefs() {
|
||||
this.picker = null;
|
||||
this.colorSelector = null;
|
||||
this.colorHandle = null;
|
||||
this.hueView = null;
|
||||
this.hueHandle = null;
|
||||
},
|
||||
onOverlayClick(event) {
|
||||
OverlayEventBus.emit('overlay-click', {
|
||||
originalEvent: event,
|
||||
target: this.$el
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return ['p-colorpicker p-component', { 'p-colorpicker-overlay': !this.inline }];
|
||||
},
|
||||
inputClass() {
|
||||
return ['p-colorpicker-preview p-inputtext', { 'p-disabled': this.disabled }];
|
||||
},
|
||||
pickerClass() {
|
||||
return [
|
||||
'p-colorpicker-panel',
|
||||
this.panelClass,
|
||||
{
|
||||
'p-colorpicker-overlay-panel': !this.inline,
|
||||
'p-disabled': this.disabled,
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Portal: Portal
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-colorpicker {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.p-colorpicker-dragging {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-colorpicker-overlay {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-colorpicker-panel {
|
||||
position: relative;
|
||||
width: 193px;
|
||||
height: 166px;
|
||||
}
|
||||
|
||||
.p-colorpicker-overlay-panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.p-colorpicker-preview {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-colorpicker-panel .p-colorpicker-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-colorpicker-panel .p-colorpicker-color-selector {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.p-colorpicker-panel .p-colorpicker-color {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.p-colorpicker-panel .p-colorpicker-color-handle {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 150px;
|
||||
border-radius: 100%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
margin: -5px 0 0 -5px;
|
||||
cursor: pointer;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.p-colorpicker-panel .p-colorpicker-hue {
|
||||
width: 17px;
|
||||
height: 150px;
|
||||
top: 8px;
|
||||
left: 167px;
|
||||
position: absolute;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.p-colorpicker-panel .p-colorpicker-hue-handle {
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 0px;
|
||||
width: 21px;
|
||||
margin-left: -2px;
|
||||
margin-top: -5px;
|
||||
height: 10px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
opacity: 0.85;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
BIN
components/lib/colorpicker/images/color.png
Executable file
BIN
components/lib/colorpicker/images/color.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
components/lib/colorpicker/images/hue.png
Executable file
BIN
components/lib/colorpicker/images/hue.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 293 B |
9
components/lib/colorpicker/package.json
Normal file
9
components/lib/colorpicker/package.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"main": "./colorpicker.cjs.js",
|
||||
"module": "./colorpicker.esm.js",
|
||||
"unpkg": "./colorpicker.min.js",
|
||||
"types": "./ColorPicker.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./ColorPicker.vue"
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue