Skip to content

Commit

Permalink
releases 4.3.42
Browse files Browse the repository at this point in the history
  • Loading branch information
@xuliangzhan
xuliangzhan committed Dec 23, 2024
1 parent fe4c0be commit 817c305
Show file tree
Hide file tree
Showing 7 changed files with 118 additions and 42 deletions.
2 changes: 1 addition & 1 deletion examples/views/color-picker/ColorPickerTest.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div>
<vxe-color-picker v-model="val1" clearable></vxe-color-picker>
<vxe-color-picker v-model="val1" clearable readonly></vxe-color-picker>
<vxe-color-picker v-model="val2" show-alpha clearable></vxe-color-picker>
<vxe-color-picker v-model="val3" type="rgb" show-alpha clearable></vxe-color-picker>
<vxe-color-picker v-model="val4" clearable :colors="list1"></vxe-color-picker>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vxe-pc-ui",
"version": "4.3.41",
"version": "4.3.42",
"description": "A vue based PC component library",
"scripts": {
"update": "npm install --legacy-peer-deps",
Expand Down
70 changes: 48 additions & 22 deletions packages/color-picker/src/color-picker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,10 @@ export default defineComponent({
props: {
modelValue: String as PropType<VxeColorPickerPropTypes.ModelValue>,
placeholder: String as PropType<VxeColorPickerPropTypes.Placeholder>,
clearable: Boolean as PropType<VxeColorPickerPropTypes.Clearable>,
clearable: {
type: Boolean as PropType<VxeColorPickerPropTypes.Clearable>,
default: () => getConfig().colorPicker.clearable
},
type: {
type: String as PropType<VxeColorPickerPropTypes.Type>,
default: () => getConfig().colorPicker.type
Expand Down Expand Up @@ -79,6 +82,7 @@ export default defineComponent({
const { computeSize } = useSize(props)

const refElem = ref<HTMLDivElement>()
const refInput = ref<HTMLInputElement>()
const refOptionPanel = ref<HTMLDivElement>()
const refHueSliderElem = ref<HTMLDivElement>()
const refHueSliderBtnElem = ref<HTMLDivElement>()
Expand Down Expand Up @@ -133,7 +137,7 @@ export default defineComponent({
const computeBtnTransfer = computed(() => {
const { transfer } = props
if (transfer === null) {
const globalTransfer = getConfig().iconPicker.transfer
const globalTransfer = getConfig().colorPicker.transfer
if (XEUtils.isBoolean(globalTransfer)) {
return globalTransfer
}
Expand Down Expand Up @@ -373,6 +377,19 @@ export default defineComponent({
dispatchEvent('clear', { value: selectValue }, evnt)
}

const focusEvent = () => {
const isDisabled = computeIsDisabled.value
if (!isDisabled) {
if (!reactData.visiblePanel) {
showOptionPanel()
}
}
}

const blurEvent = () => {
reactData.isActivated = false
}

const clearEvent = (evnt: Event) => {
clearValueEvent(evnt, null)
hideOptionPanel()
Expand Down Expand Up @@ -867,7 +884,14 @@ export default defineComponent({
return h('div', {
ref: refElem,
class: ['vxe-color-picker--readonly', className]
}, 'x')
}, [
h('div', {
class: 'vxe-color-picker--readonly-color',
style: {
backgroundColor: modelValue
}
})
])
}
return h('div', {
ref: refElem,
Expand All @@ -879,6 +903,12 @@ export default defineComponent({
'is--active': isActivated
}]
}, [
h('input', {
ref: refInput,
class: 'vxe-color-picker--input',
onFocus: focusEvent,
onBlur: blurEvent
}),
h('div', {
class: 'vxe-color-picker--inner',
onClick: clickEvent
Expand Down Expand Up @@ -909,29 +939,25 @@ export default defineComponent({
? h('div', {
class: 'vxe-color-picker--panel-wrapper'
}, [
renderColorWrapper(),
renderColorBar(),
renderQuickWrapper(),
h('div', {
class: ''
class: 'vxe-color-picker--footer-wrapper'
}, [
renderColorWrapper(),
renderColorBar(),
renderQuickWrapper(),
h('div', {
class: 'vxe-color-picker--footer-wrapper'
}, [
clearable
? h(VxeButtonComponent, {
content: getI18n('vxe.colorPicker.clear'),
size: 'mini',
onClick: clearEvent
})
: renderEmptyElement($xeColorPicker),
h(VxeButtonComponent, {
content: getI18n('vxe.colorPicker.confirm'),
clearable
? h(VxeButtonComponent, {
content: getI18n('vxe.colorPicker.clear'),
size: 'mini',
status: 'primary',
onClick: confirmEvent
onClick: clearEvent
})
])
: renderEmptyElement($xeColorPicker),
h(VxeButtonComponent, {
content: getI18n('vxe.colorPicker.confirm'),
size: 'mini',
status: 'primary',
onClick: confirmEvent
})
])
])
: renderEmptyElement($xeColorPicker)
Expand Down
27 changes: 26 additions & 1 deletion packages/form/render/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -417,8 +417,33 @@ renderer.mixin({
]
}
},
VxeColorPicker: {
formItemAutoFocus: 'input',
renderFormItemContent (renderOpts: any, params: any) {
const { data, field } = params
const { options } = renderOpts
const itemValue = XEUtils.get(data, field)
return [
h(getDefaultComponent(renderOpts), {
...getComponentFormItemProps(renderOpts, params, itemValue, { colors: options }),
...getItemOns(renderOpts, params)
})
]
}
},
VxeIconPicker: {
renderFormItemContent: defaultFormItemRender
formItemAutoFocus: 'input',
renderFormItemContent (renderOpts: any, params: any) {
const { data, field } = params
const { options } = renderOpts
const itemValue = XEUtils.get(data, field)
return [
h(getDefaultComponent(renderOpts), {
...getComponentFormItemProps(renderOpts, params, itemValue, { icons: options }),
...getItemOns(renderOpts, params)
})
]
}
},
VxeRadio: {
renderFormItemContent: defaultFormItemRender
Expand Down
16 changes: 10 additions & 6 deletions packages/icon-picker/src/icon-picker.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { defineComponent, h, Teleport, PropType, ref, Ref, inject, watch, computed, provide, onUnmounted, reactive, nextTick, onMounted, createCommentVNode } from 'vue'
import { defineComponent, h, Teleport, PropType, ref, inject, watch, computed, provide, onUnmounted, reactive, nextTick, onMounted, createCommentVNode } from 'vue'
import XEUtils from 'xe-utils'
import { getConfig, getIcon, getI18n, globalEvents, createEvent, useSize, GLOBAL_EVENT_KEYS } from '../../ui'
import { getEventTargetNode, getAbsolutePos } from '../../ui/src/dom'
Expand Down Expand Up @@ -71,9 +71,9 @@ export default defineComponent({
// hpTimeout: undefined
}

const refElem = ref() as Ref<HTMLDivElement>
const refInput = ref() as Ref<HTMLInputElement>
const refOptionPanel = ref() as Ref<HTMLDivElement>
const refElem = ref<HTMLDivElement>()
const refInput = ref<HTMLInputElement>()
const refOptionPanel = ref<HTMLDivElement>()

const refMaps: IconPickerPrivateRef = {
refElem
Expand Down Expand Up @@ -418,12 +418,16 @@ export default defineComponent({
focus () {
const $input = refInput.value
reactData.isActivated = true
$input.blur()
if ($input) {
$input.blur()
}
return nextTick()
},
blur () {
const $input = refInput.value
$input.blur()
if ($input) {
$input.blur()
}
reactData.isActivated = false
return nextTick()
}
Expand Down
1 change: 1 addition & 0 deletions packages/ui/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ setConfig({
countdown: {},
colorPicker: {
type: 'hex',
clearable: true,
showAlpha: true,
clickToCopy: true,
showColorExtractor: true,
Expand Down
42 changes: 31 additions & 11 deletions styles/components/color-picker.scss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,6 @@
@use '../helpers/baseMixin.scss';

.vxe-color-picker {
position: relative;
display: inline-block;
color: var(--vxe-ui-font-color);
width: 2.4em;
border: 1px solid var(--vxe-ui-input-border-color);
border-radius: var(--vxe-ui-base-border-radius);
background-color: var(--vxe-ui-layout-background-color);
padding: 0.25em;
&.is--selected {
.vxe-color-picker--inner-color {
color: #fff;
Expand All @@ -18,20 +10,46 @@
border-color: var(--vxe-ui-font-primary-color);
}
}
.vxe-color-picker,
.vxe-color-picker--readonly {
position: relative;
display: inline-block;
width: 2.4em;
padding: 0.25em;
border: 1px solid var(--vxe-ui-input-border-color);
border-radius: var(--vxe-ui-base-border-radius);
background-color: var(--vxe-ui-layout-background-color);
}

.vxe-color-picker--inner,
.vxe-color-picker--preview-btn,
.vxe-color-picker--bar-alpha-slider {
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==);
}

.vxe-color-picker--inner {
.vxe-color-picker--inner,
.vxe-color-picker--readonly-color {
width: 100%;
height: 100%;
background-size: 1em 1em;
border-radius: var(--vxe-ui-base-border-radius);
}

.vxe-color-picker--readonly-color {
border: 1px solid var(--vxe-ui-input-border-color);
}

.vxe-color-picker--inner {
cursor: pointer;
}
.vxe-color-picker--input {
position: absolute;
z-index: -1;
width: 1px;
height: 1px;
outline: 0;
border: 0;
}
.vxe-color-picker--inner-color {
width: 100%;
height: 100%;
Expand All @@ -45,6 +63,7 @@

.vxe-color-picker--panel-wrapper {
position: relative;
width: 23.4em;
border-radius: var(--vxe-ui-base-border-radius);
border: 1px solid var(--vxe-ui-base-popup-border-color);
box-shadow: var(--vxe-ui-base-popup-box-shadow);
Expand Down Expand Up @@ -84,7 +103,6 @@
.vxe-color-picker--color-wrapper {
position: relative;
height: 130px;
width: 23.2em;
overflow: hidden;
}
.vxe-color-picker--white-bg,
Expand Down Expand Up @@ -313,7 +331,8 @@
padding: 0 0.4em 0.4em 0.4em;
}

.vxe-color-picker {
.vxe-color-picker,
.vxe-color-picker--readonly {
height: var(--vxe-ui-input-height-default);
line-height: var(--vxe-ui-input-height-default);
&.size--medium {
Expand All @@ -331,6 +350,7 @@
}

.vxe-color-picker,
.vxe-color-picker--readonly,
.vxe-color-picker--panel {
font-size: var(--vxe-ui-font-size-default);
&.size--medium {
Expand Down

0 comments on commit 817c305

Please sign in to comment.