| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- import { defineComponent, inject, ref, watch, watchEffect, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, normalizeStyle } from 'vue';
- import { colorPickerPanelContextKey } from '../color-picker-panel.mjs';
- import Color from '../utils/color.mjs';
- import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
- import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
- const _sfc_main = defineComponent({
- props: {
- colors: {
- type: Array,
- required: true
- },
- color: {
- type: Object,
- required: true
- },
- enableAlpha: {
- type: Boolean,
- required: true
- },
- disabled: Boolean
- },
- setup(props) {
- const ns = useNamespace("color-predefine");
- const { currentColor } = inject(colorPickerPanelContextKey);
- const rgbaColors = ref(parseColors(props.colors, props.color));
- watch(() => currentColor.value, (val) => {
- const color = new Color({
- value: val
- });
- rgbaColors.value.forEach((item) => {
- item.selected = color.compare(item);
- });
- });
- watchEffect(() => {
- rgbaColors.value = parseColors(props.colors, props.color);
- });
- function handleSelect(index) {
- if (props.disabled)
- return;
- props.color.fromString(props.colors[index]);
- }
- function parseColors(colors, color) {
- return colors.map((value) => {
- const c = new Color({
- value
- });
- c.selected = c.compare(color);
- return c;
- });
- }
- return {
- rgbaColors,
- handleSelect,
- ns
- };
- }
- });
- function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
- return openBlock(), createElementBlock("div", {
- class: normalizeClass(_ctx.ns.b())
- }, [
- createElementVNode("div", {
- class: normalizeClass(_ctx.ns.e("colors"))
- }, [
- (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rgbaColors, (item, index) => {
- return openBlock(), createElementBlock("div", {
- key: _ctx.colors[index],
- class: normalizeClass([
- _ctx.ns.e("color-selector"),
- _ctx.ns.is("alpha", item.get("alpha") < 100),
- { selected: item.selected }
- ]),
- onClick: ($event) => _ctx.handleSelect(index)
- }, [
- createElementVNode("div", {
- style: normalizeStyle({ backgroundColor: item.value })
- }, null, 4)
- ], 10, ["onClick"]);
- }), 128))
- ], 2)
- ], 2);
- }
- var Predefine = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "predefine.vue"]]);
- export { Predefine as default };
- //# sourceMappingURL=predefine.mjs.map
|