Update #3965 - For ColorPicker
Tuğçe Küçükoğlu
parent
09de5bdc9a
commit
78b43c6d11
|
|
@ -0,0 +1,91 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.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;
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ props }) => ['p-colorpicker p-component', { 'p-colorpicker-overlay': !props.inline }],
|
||||
input: ({ props }) => ['p-colorpicker-preview p-inputtext', { 'p-disabled': props.disabled }],
|
||||
panel: ({ instance, props }) => [
|
||||
'p-colorpicker-panel',
|
||||
{
|
||||
'p-colorpicker-overlay-panel': !props.inline,
|
||||
'p-disabled': props.disabled,
|
||||
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||
}
|
||||
],
|
||||
content: 'p-colorpicker-content',
|
||||
selector: 'p-colorpicker-color-selector',
|
||||
color: 'p-colorpicker-color',
|
||||
colorHandle: 'p-colorpicker-color-handle',
|
||||
hue: 'p-colorpicker-hue',
|
||||
hueHandle: 'p-colorpicker-hue-handle'
|
||||
};
|
||||
|
||||
const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_colorpicker_style', manual: true });
|
||||
|
||||
export default {
|
||||
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,
|
||||
default: 'body'
|
||||
},
|
||||
panelClass: null
|
||||
},
|
||||
css: {
|
||||
classes
|
||||
},
|
||||
watch: {
|
||||
isUnstyled: {
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
!newValue && loadStyle();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -66,7 +66,7 @@ export interface ColorPickerPassThroughOptions {
|
|||
/**
|
||||
* Uses to pass attributes to the color handler's DOM element.
|
||||
*/
|
||||
colorHandler?: ColorPickerPassThroughOptionType;
|
||||
colorHandle?: ColorPickerPassThroughOptionType;
|
||||
/**
|
||||
* Uses to pass attributes to the hue's DOM element.
|
||||
*/
|
||||
|
|
@ -74,7 +74,7 @@ export interface ColorPickerPassThroughOptions {
|
|||
/**
|
||||
* Uses to pass attributes to the hue handler's DOM element.
|
||||
*/
|
||||
hueHandler?: ColorPickerPassThroughOptionType;
|
||||
hueHandle: ColorPickerPassThroughOptionType;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -151,6 +151,11 @@ export interface ColorPickerProps {
|
|||
* @type {ColorPickerPassThroughOptions}
|
||||
*/
|
||||
pt?: ColorPickerPassThroughOptions;
|
||||
/**
|
||||
* When enabled, it removes component related styles in the core.
|
||||
* @defaultValue false
|
||||
*/
|
||||
unstyled?: boolean;
|
||||
}
|
||||
|
||||
export interface ColorPickerSlots {}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<div ref="container" :class="containerClass" v-bind="ptm('root')">
|
||||
<input v-if="!inline" ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" v-bind="ptm('input')" />
|
||||
<div ref="container" :class="cx('root')" v-bind="ptm('root')">
|
||||
<input v-if="!inline" ref="input" type="text" :class="cx('input')" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" v-bind="ptm('input')" />
|
||||
<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" v-bind="ptm('panel')">
|
||||
<div class="p-colorpicker-content" v-bind="ptm('content')">
|
||||
<div :ref="colorSelectorRef" class="p-colorpicker-color-selector" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()" v-bind="ptm('selector')">
|
||||
<div class="p-colorpicker-color" v-bind="ptm('color')">
|
||||
<div :ref="colorHandleRef" class="p-colorpicker-color-handle" v-bind="ptm('colorHandler')"></div>
|
||||
<div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="[cx('panel'), panelClass]" @click="onOverlayClick" v-bind="ptm('panel')">
|
||||
<div :class="cx('panel')" v-bind="ptm('content')">
|
||||
<div :ref="colorSelectorRef" :class="cx('selector')" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()" v-bind="ptm('selector')">
|
||||
<div :class="cx('color')" v-bind="ptm('color')">
|
||||
<div :ref="colorHandleRef" :class="cx('colorHandle')" v-bind="ptm('colorHandle')"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div :ref="hueViewRef" class="p-colorpicker-hue" @mousedown="onHueMousedown($event)" @touchstart="onHueDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()" v-bind="ptm('hue')">
|
||||
<div :ref="hueHandleRef" class="p-colorpicker-hue-handle" v-bind="ptm('hueHandler')"></div>
|
||||
<div :ref="hueViewRef" :class="cx('hue')" @mousedown="onHueMousedown($event)" @touchstart="onHueDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()" v-bind="ptm('hue')">
|
||||
<div :ref="hueHandleRef" :class="cx('hueHandle')" v-bind="ptm('hueHandle')"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -21,14 +21,14 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import OverlayEventBus from 'primevue/overlayeventbus';
|
||||
import Portal from 'primevue/portal';
|
||||
import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue/utils';
|
||||
import BaseColorPicker from './BaseColorPicker.vue';
|
||||
|
||||
export default {
|
||||
name: 'ColorPicker',
|
||||
extends: BaseComponent,
|
||||
extends: BaseColorPicker,
|
||||
emits: ['update:modelValue', 'change', 'show', 'hide'],
|
||||
props: {
|
||||
modelValue: {
|
||||
|
|
@ -595,26 +595,6 @@ export default {
|
|||
});
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue