@cmstops/pro-compo
Version:
[物料平台文档中心](https://arco.design/docs/material/guide)
83 lines (82 loc) • 3.06 kB
JavaScript
import { defineComponent, ref, watch, openBlock, createElementBlock, createVNode, unref, withCtx, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode } from "vue";
import { RadioGroup, Radio } from "@arco-design/web-vue";
import _sfc_main$1 from "./colorPicker.js";
const _hoisted_1 = {
key: 0,
class: "color-palette-container"
};
const _sfc_main = defineComponent({
__name: "colorPalette",
props: {
styleData: {},
model: {}
},
emits: ["change"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const color = ref("rgb(101,121,109)");
const colorList = ref([]);
const colorChange = (_color) => {
if (_color) {
color.value = _color.replace(/\s+/g, "");
const styleData = JSON.parse(JSON.stringify(props.styleData));
styleData[`${props.model}_theme_color`] = color.value;
emit("change", styleData);
}
};
const colorRgb = (_color) => {
if (_color.includes("rgb")) {
return _color;
}
const red = parseInt(_color.slice(1, 3), 16);
const green = parseInt(_color.slice(3, 5), 16);
const blue = parseInt(_color.slice(5, 7), 16);
return `rgb(${red},${green},${blue})`;
};
watch(
() => props.styleData,
() => {
if (props.styleData) {
const _color = props.styleData[`${props.model}_theme_color`] || "";
color.value = colorRgb(_color);
const _colorList = props.styleData[`${props.model}_colorList`];
if (_colorList == null ? void 0 : _colorList.length) {
colorList.value = _colorList.map((color2) => `rgb(${color2})`);
} else if (color.value) {
colorList.value = [color.value];
}
}
},
{ immediate: true }
);
return (_ctx, _cache) => {
return colorList.value && colorList.value.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(unref(RadioGroup), {
modelValue: color.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => color.value = $event),
class: "color-radio-group",
type: "button",
onChange: colorChange
}, {
default: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(colorList.value, (colr, index) => {
return openBlock(), createBlock(unref(Radio), {
key: index,
style: normalizeStyle({ background: `${colr} !important` }),
value: colr
}, null, 8, ["style", "value"]);
}), 128)),
createVNode(_sfc_main$1, {
modelValue: color.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => color.value = $event),
onChange: colorChange
}, null, 8, ["modelValue"])
]),
_: 1
}, 8, ["modelValue"])
])) : createCommentVNode("v-if", true);
};
}
});
export { _sfc_main as default };