vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

ColorPicker: overlay pt naming updates

pull/6275/head^2
tugcekucukoglu 2024-10-01 13:05:21 +03:00
parent 86457f21f9
commit 5432887c99
3 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/primevue/src/colorpicker/BaseColorPicker.vue
View File

@ -46,7 +46,8 @@ export default {
type: String, type: String,
default: null default: null
}, },
panelClass: null panelClass: null,
overlayClass: null
}, },
style: ColorPickerStyle, style: ColorPickerStyle,
provide() { provide() {

7
packages/primevue/src/colorpicker/ColorPicker.d.ts vendored
View File

@ -77,7 +77,7 @@ export interface ColorPickerPassThroughOptions {
/** /**
* Used to pass attributes to the panel's DOM element. * Used to pass attributes to the panel's DOM element.
*/ */
panel?: ColorPickerPassThroughOptionType; overlay?: ColorPickerPassThroughOptionType;
/** /**
* Used to pass attributes to the content's DOM element. * Used to pass attributes to the content's DOM element.
*/ */
@ -179,8 +179,13 @@ export interface ColorPickerProps {
inputId?: string | undefined; inputId?: string | undefined;
/** /**
* Style class of the overlay panel. * Style class of the overlay panel.
* @deprecated since v4.0. Use 'overlayClass' prop instead.
*/ */
panelClass?: any; panelClass?: any;
/**
* Style class of the overlay panel.
*/
overlayClass?: 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. * 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 * @defaultValue body

6
packages/primevue/src/colorpicker/ColorPicker.vue
View File

@ -3,7 +3,7 @@
<input v-if="!inline" ref="input" :id="inputId" type="text" :class="cx('preview')" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" v-bind="ptm('preview')" /> <input v-if="!inline" ref="input" :id="inputId" type="text" :class="cx('preview')" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" v-bind="ptm('preview')" />
<Portal :appendTo="appendTo" :disabled="inline"> <Portal :appendTo="appendTo" :disabled="inline">
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')"> <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
<div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="[cx('panel'), panelClass]" @click="onOverlayClick" v-bind="ptm('panel')"> <div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="[cx('panel'), panelClass, overlayClass]" @click="onOverlayClick" v-bind="{ ...ptm('panel'), ...ptm('overlay') }">
<div :class="cx('content')" v-bind="ptm('content')"> <div :class="cx('content')" v-bind="ptm('content')">
<div :ref="colorSelectorRef" :class="cx('colorSelector')" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()" v-bind="ptm('colorSelector')"> <div :ref="colorSelectorRef" :class="cx('colorSelector')" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()" v-bind="ptm('colorSelector')">
<div :class="cx('colorBackground')" v-bind="ptm('colorBackground')"> <div :class="cx('colorBackground')" v-bind="ptm('colorBackground')">
@ -21,9 +21,9 @@
</template> </template>
<script> <script>
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils'; import { absolutePosition, addClass, isTouchDevice, relativePosition, removeClass } from '@primeuix/utils/dom';
import { relativePosition, absolutePosition, addClass, removeClass, isTouchDevice } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex'; import { ZIndex } from '@primeuix/utils/zindex';
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
import OverlayEventBus from 'primevue/overlayeventbus'; import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal'; import Portal from 'primevue/portal';
import BaseColorPicker from './BaseColorPicker.vue'; import BaseColorPicker from './BaseColorPicker.vue';