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

Refactor #5681 - For ColorPicker, Knob, Rating

pull/5701/head
tugcekucukoglu 2024-05-03 15:23:10 +03:00
parent d9d2be9cca
commit e05532c79d
9 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/lib/colorpicker/ColorPicker.d.ts vendored
View File

@ -71,9 +71,9 @@ export interface ColorPickerPassThroughOptions {
*/
root?: ColorPickerPassThroughOptionType;
/**
* Used to pass attributes to the input's DOM element.
* Used to pass attributes to the preview's DOM element.
*/
input?: ColorPickerPassThroughOptionType;
preview?: ColorPickerPassThroughOptionType;
/**
* Used to pass attributes to the panel's DOM element.
*/
@ -83,13 +83,13 @@ export interface ColorPickerPassThroughOptions {
*/
content?: ColorPickerPassThroughOptionType;
/**
* Used to pass attributes to the selector's DOM element.
* Used to pass attributes to the color selector's DOM element.
*/
selector?: ColorPickerPassThroughOptionType;
colorSelector?: ColorPickerPassThroughOptionType;
/**
* Used to pass attributes to the color's DOM element.
* Used to pass attributes to the color background's DOM element.
*/
color?: ColorPickerPassThroughOptionType;
colorBackground?: ColorPickerPassThroughOptionType;
/**
* Used to pass attributes to the color handler's DOM element.
*/

6
components/lib/colorpicker/ColorPicker.vue
View File

@ -1,12 +1,12 @@
<template>
<div ref="container" :class="cx('root')" v-bind="ptmi('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')" />
<input v-if="!inline" ref="input" type="text" :class="cx('preview')" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" v-bind="ptm('preview')" />
<Portal :appendTo="appendTo" :disabled="inline">
<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 :class="cx('content')" 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="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 :ref="colorHandleRef" :class="cx('colorHandle')" v-bind="ptm('colorHandle')"></div>
</div>
</div>

6
components/lib/colorpicker/style/ColorPickerStyle.js
View File

@ -111,7 +111,7 @@ const theme = ({ dt }) => `
const classes = {
root: 'p-colorpicker p-component',
input: ({ props }) => ['p-colorpicker-preview', { 'p-disabled': props.disabled }],
preview: ({ props }) => ['p-colorpicker-preview', { 'p-disabled': props.disabled }],
panel: ({ instance, props }) => [
'p-colorpicker-panel',
{
@ -120,8 +120,8 @@ const classes = {
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
selector: 'p-colorpicker-color-selector',
color: 'p-colorpicker-color-background',
colorSelector: 'p-colorpicker-color-selector',
colorBackground: 'p-colorpicker-color-background',
colorHandle: 'p-colorpicker-color-handle',
hue: 'p-colorpicker-hue',
hueHandle: 'p-colorpicker-hue-handle'

4
components/lib/knob/Knob.d.ts vendored
View File

@ -65,9 +65,9 @@ export interface KnobPassThroughOptions {
*/
value?: KnobPassThroughOptionType;
/**
* Used to pass attributes to the label's DOM element.
* Used to pass attributes to the text's DOM element.
*/
label?: KnobPassThroughOptionType;
text?: KnobPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}

2
components/lib/knob/Knob.vue
View File

@ -21,7 +21,7 @@
>
<path :d="rangePath" :stroke-width="strokeWidth" :stroke="rangeColor" :class="cx('range')" v-bind="ptm('range')"></path>
<path :d="valuePath" :stroke-width="strokeWidth" :stroke="valueColor" :class="cx('value')" v-bind="ptm('value')"></path>
<text v-if="showValue" :x="50" :y="57" text-anchor="middle" :fill="textColor" :class="cx('label')" v-bind="ptm('label')">{{ valueToDisplay }}</text>
<text v-if="showValue" :x="50" :y="57" text-anchor="middle" :fill="textColor" :class="cx('text')" v-bind="ptm('text')">{{ valueToDisplay }}</text>
</svg>
</div>
</template>

2
components/lib/knob/style/KnobStyle.js
View File

@ -38,7 +38,7 @@ const classes = {
root: ({ props }) => ['p-knob p-component', { 'p-disabled': props.disabled }],
range: 'p-knob-range',
value: 'p-knob-value',
label: 'p-knob-text'
text: 'p-knob-text'
};
export default BaseStyle.extend({

20
components/lib/rating/Rating.d.ts vendored
View File

@ -58,9 +58,9 @@ export interface RatingPassThroughOptions {
*/
root?: RatingPassThroughOptionType;
/**
* Used to pass attributes to the item's DOM element.
* Used to pass attributes to the option's DOM element.
*/
item?: RatingPassThroughOptionType;
option?: RatingPassThroughOptionType;
/**
* Used to pass attributes to the on icon's DOM element.
*/
@ -70,13 +70,13 @@ export interface RatingPassThroughOptions {
*/
offIcon?: RatingPassThroughOptionType;
/**
* Used to pass attributes to the hidden item input wrapper's DOM element.
* Used to pass attributes to the hidden option input wrapper's DOM element.
*/
hiddenItemInputWrapper?: RatingPassThroughOptionType;
hiddenOptionInputWrapper?: RatingPassThroughOptionType;
/**
* Used to pass attributes to the hidden item input's DOM element.
* Used to pass attributes to the hidden option input's DOM element.
*/
hiddenItemInput?: RatingPassThroughOptionType;
hiddenOptionInput?: RatingPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
@ -110,12 +110,12 @@ export interface RatingState {
*/
export interface RatingContext {
/**
* Current active state of the item as a boolean.
* Current active state of the option as a boolean.
* @defaultValue false
*/
active: boolean;
/**
* Current focused state of item as a boolean.
* Current focused state of option as a boolean.
* @defaultValue false
*/
focused: boolean;
@ -204,7 +204,7 @@ export interface RatingSlots {
*/
onicon(scope: {
/**
* Item value
* Option value
*/
value: number;
/**
@ -218,7 +218,7 @@ export interface RatingSlots {
*/
officon(scope: {
/**
* Item value
* Option value
*/
value: number;
/**

6
components/lib/rating/Rating.vue
View File

@ -1,8 +1,8 @@
<template>
<div :class="cx('root')" v-bind="ptmi('root')">
<template v-for="value in stars" :key="value">
<div :class="cx('item', { value })" @click="onOptionClick($event, value)" v-bind="getPTOptions('item', value)" :data-p-active="value <= modelValue" :data-p-focused="value === focusedOptionIndex">
<span class="p-hidden-accessible" v-bind="ptm('hiddenItemInputWrapper')" :data-p-hidden-accessible="true">
<div :class="cx('option', { value })" @click="onOptionClick($event, value)" v-bind="getPTOptions('option', value)" :data-p-active="value <= modelValue" :data-p-focused="value === focusedOptionIndex">
<span class="p-hidden-accessible" v-bind="ptm('hiddenOptionInputWrapper')" :data-p-hidden-accessible="true">
<input
type="radio"
:value="value"
@ -14,7 +14,7 @@
@focus="onFocus($event, value)"
@blur="onBlur"
@change="onChange($event, value)"
v-bind="ptm('hiddenItemInput')"
v-bind="ptm('hiddenOptionInput')"
/>
</span>
<slot v-if="value <= modelValue" name="onicon" :value="value" :class="cx('onIcon')">

2
components/lib/rating/style/RatingStyle.js
View File

@ -47,7 +47,7 @@ const classes = {
'p-disabled': props.disabled
}
],
item: ({ instance, props, value }) => [
option: ({ instance, props, value }) => [
'p-rating-option',
{
'p-rating-option-active': value <= props.modelValue,