|
|
@ -1,60 +1,108 @@ |
|
|
<template> |
|
|
<template> |
|
|
<q-input v-model="colorValueRef" @update:model-value="colorSelected"> |
|
|
<div v-show="showIfComputed"> |
|
|
<template #append> |
|
|
<q-input |
|
|
<!-- 选择颜色按钮 --> |
|
|
ref="colorRef" |
|
|
<q-btn |
|
|
v-model="colorValueRef" |
|
|
icon="bi-palette" |
|
|
:hide-bottom-space="true" |
|
|
size="10px" |
|
|
:hide-hint="true" |
|
|
padding="2px" |
|
|
:outlined="true" |
|
|
flat |
|
|
:dense="true" |
|
|
square |
|
|
v-bind="attrs" |
|
|
unelevated |
|
|
:rules="rulesComputed" |
|
|
:title="$t('select')" |
|
|
:readonly="readonlyIfComputed" |
|
|
:class="`text-${computedColorValue}`" |
|
|
:disable="disableIfComputed" |
|
|
:style="{ border: '1px solid #e5e7eb', 'background-color': computedBackgroundColorValue }" |
|
|
@update:model-value="colorSelected" |
|
|
> |
|
|
> |
|
|
<q-popup-proxy v-model:model-value="isShow" anchor="bottom right" self="top right" :offset="[0, 10]"> |
|
|
<template #label> <span v-if="requiredIfComputed" style="color: red">*</span> {{ attrs.label }} </template> |
|
|
<div v-for="(colors, index) in quasarColors" :key="index" class="row"> |
|
|
<template #append> |
|
|
<div |
|
|
<!-- 选择颜色按钮 --> |
|
|
v-for="color in colors" |
|
|
<q-btn |
|
|
:key="`${color}`" |
|
|
icon="bi-palette" |
|
|
:class="`bg-${color}`" |
|
|
size="10px" |
|
|
style="min-width: 20px; max-width: 20px; min-height: 20px; max-height: 20px" |
|
|
padding="2px" |
|
|
@click="colorSelected(`${color}`)" |
|
|
flat |
|
|
> |
|
|
square |
|
|
<q-tooltip> {{ color }}</q-tooltip> |
|
|
unelevated |
|
|
|
|
|
:title="$t('select')" |
|
|
|
|
|
:class="`text-${computedColorValue}`" |
|
|
|
|
|
:style="{ border: '1px solid #e5e7eb', 'background-color': computedBackgroundColorValue }" |
|
|
|
|
|
> |
|
|
|
|
|
<q-popup-proxy v-model:model-value="isShow" anchor="bottom right" self="top right" :offset="[0, 10]"> |
|
|
|
|
|
<div v-for="(colors, index) in quasarColors" :key="index" class="row"> |
|
|
|
|
|
<div |
|
|
|
|
|
v-for="color in colors" |
|
|
|
|
|
:key="`${color}`" |
|
|
|
|
|
:class="`bg-${color}`" |
|
|
|
|
|
style="min-width: 20px; max-width: 20px; min-height: 20px; max-height: 20px" |
|
|
|
|
|
@click="colorSelected(`${color}`)" |
|
|
|
|
|
> |
|
|
|
|
|
<q-tooltip> {{ color }}</q-tooltip> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</q-popup-proxy> |
|
|
</q-popup-proxy> |
|
|
</q-btn> |
|
|
</q-btn> |
|
|
<!-- 恢复默认值按钮 --> |
|
|
<!-- 恢复默认值按钮 --> |
|
|
<q-btn |
|
|
<q-btn |
|
|
v-if="restore" |
|
|
v-if="restore" |
|
|
icon="bi-arrow-counterclockwise" |
|
|
icon="bi-arrow-counterclockwise" |
|
|
size="10px" |
|
|
size="10px" |
|
|
padding="2px" |
|
|
padding="2px" |
|
|
flat |
|
|
flat |
|
|
square |
|
|
square |
|
|
unelevated |
|
|
unelevated |
|
|
:title="$t('restore')" |
|
|
:title="$t('restore')" |
|
|
:class="`text-${restoreValue}`" |
|
|
:class="`text-${restoreValue}`" |
|
|
:style="{ 'margin-left': '5px', border: '1px solid #e5e7eb', 'background-color': computedStoreBackgroundColorValue }" |
|
|
:style="{ 'margin-left': '5px', border: '1px solid #e5e7eb', 'background-color': computedStoreBackgroundColorValue }" |
|
|
@click="restoreDefaultValue" |
|
|
@click="restoreDefaultValue" |
|
|
></q-btn> |
|
|
></q-btn> |
|
|
</template> |
|
|
</template> |
|
|
</q-input> |
|
|
</q-input> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<script setup lang="ts"> |
|
|
<script setup lang="ts"> |
|
|
import { mdiConsoleLine } from '@quasar/extras/mdi-v4'; |
|
|
import { ref, toRaw, computed, useAttrs, watch } from 'vue'; |
|
|
import { ref, toRaw, computed } from 'vue'; |
|
|
import { Tools } from '@/platform'; |
|
|
|
|
|
import { FormValidators } from '@/platform/components'; |
|
|
|
|
|
|
|
|
|
|
|
const attrs = useAttrs(); |
|
|
|
|
|
const rules = attrs.rules; |
|
|
|
|
|
const colorRef = ref(); |
|
|
const props = defineProps({ |
|
|
const props = defineProps({ |
|
|
modelValue: { type: String, default: '#000000' }, |
|
|
modelValue: { type: String, default: '' }, |
|
|
restore: { type: Boolean, default: false }, |
|
|
restore: { type: Boolean, default: false }, |
|
|
|
|
|
showIf: { |
|
|
|
|
|
type: Function, |
|
|
|
|
|
default: () => { |
|
|
|
|
|
return true; |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
required: { |
|
|
|
|
|
type: Boolean, |
|
|
|
|
|
default: false, |
|
|
|
|
|
}, |
|
|
|
|
|
requiredIf: { |
|
|
|
|
|
type: Function, |
|
|
|
|
|
default: undefined, |
|
|
|
|
|
}, |
|
|
|
|
|
readonlyIf: { |
|
|
|
|
|
type: Function, |
|
|
|
|
|
default: () => { |
|
|
|
|
|
return false; |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
disableIf: { |
|
|
|
|
|
type: Function, |
|
|
|
|
|
default: () => { |
|
|
|
|
|
return false; |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
form: { |
|
|
|
|
|
type: Object, |
|
|
|
|
|
default: undefined, |
|
|
|
|
|
}, |
|
|
}); |
|
|
}); |
|
|
const emit = defineEmits(['update:modelValue']); |
|
|
const emit = defineEmits(['update:modelValue']); |
|
|
|
|
|
|
|
|
const htmlColors = ['white', 'black']; |
|
|
|
|
|
const quasarColors = [ |
|
|
const quasarColors = [ |
|
|
['red', 'red-1', 'red-2', 'red-3', 'red-4', 'red-5', 'red-6', 'red-7', 'red-8', 'red-9', 'red-10', 'red-11', 'red-12', 'red-13', 'red-14'], |
|
|
['red', 'red-1', 'red-2', 'red-3', 'red-4', 'red-5', 'red-6', 'red-7', 'red-8', 'red-9', 'red-10', 'red-11', 'red-12', 'red-13', 'red-14'], |
|
|
['pink', 'pink-1', 'pink-2', 'pink-3', 'pink-4', 'pink-5', 'pink-6', 'pink-7', 'pink-8', 'pink-9', 'pink-10', 'pink-11', 'pink-12', 'pink-13', 'pink-14'], |
|
|
['pink', 'pink-1', 'pink-2', 'pink-3', 'pink-4', 'pink-5', 'pink-6', 'pink-7', 'pink-8', 'pink-9', 'pink-10', 'pink-11', 'pink-12', 'pink-13', 'pink-14'], |
|
|
@ -271,8 +319,19 @@ const quasarColors = [ |
|
|
]; |
|
|
]; |
|
|
|
|
|
|
|
|
const isShow = ref(false); |
|
|
const isShow = ref(false); |
|
|
const colorValueRef = ref(props.modelValue || 'black'); |
|
|
const defaultValue = 'black'; |
|
|
const restoreValue = toRaw(props.modelValue || 'black'); |
|
|
const colorValueRef = ref(props.modelValue || defaultValue); |
|
|
|
|
|
if (Tools.isEmpty(props.modelValue)) { |
|
|
|
|
|
emit('update:modelValue', colorValueRef.value); |
|
|
|
|
|
} |
|
|
|
|
|
const restoreValue = toRaw(props.modelValue || defaultValue); |
|
|
|
|
|
|
|
|
|
|
|
watch( |
|
|
|
|
|
() => props.modelValue, |
|
|
|
|
|
(newVal, oldVal) => { |
|
|
|
|
|
colorValueRef.value = newVal; |
|
|
|
|
|
}, |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
const computedColorValue = computed(() => { |
|
|
const computedColorValue = computed(() => { |
|
|
return colorValueRef.value; |
|
|
return colorValueRef.value; |
|
|
@ -294,6 +353,37 @@ const computedStoreBackgroundColorValue = computed(() => { |
|
|
return undefined; |
|
|
return undefined; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const rulesComputed = computed(() => { |
|
|
|
|
|
let result = rules || <any>[]; |
|
|
|
|
|
if (showIfComputed.value && requiredIfComputed.value) { |
|
|
|
|
|
result.push(FormValidators.required()); |
|
|
|
|
|
} else if (!showIfComputed.value) { |
|
|
|
|
|
result = []; |
|
|
|
|
|
} |
|
|
|
|
|
if (colorRef?.value) { |
|
|
|
|
|
colorRef.value.resetValidation(); |
|
|
|
|
|
} |
|
|
|
|
|
return result; |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const showIfComputed = computed(() => { |
|
|
|
|
|
return props.showIf(props.form); |
|
|
|
|
|
}); |
|
|
|
|
|
const requiredIfComputed = computed(() => { |
|
|
|
|
|
if (props.requiredIf) { |
|
|
|
|
|
return props.requiredIf(props.form) || false; |
|
|
|
|
|
} else if (props.required) { |
|
|
|
|
|
return true; |
|
|
|
|
|
} |
|
|
|
|
|
return false; |
|
|
|
|
|
}); |
|
|
|
|
|
const readonlyIfComputed = computed(() => { |
|
|
|
|
|
return props.readonlyIf(props.form); |
|
|
|
|
|
}); |
|
|
|
|
|
const disableIfComputed = computed(() => { |
|
|
|
|
|
return props.disableIf(props.form); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
const colorSelected = (value) => { |
|
|
const colorSelected = (value) => { |
|
|
colorValueRef.value = value; |
|
|
colorValueRef.value = value; |
|
|
emit('update:modelValue', value); |
|
|
emit('update:modelValue', value); |
|
|
|
