738fdf88a417c5d15baf39e58af80daa2ad7aa0436f729d2d8093b859ab1e2af62df2b473bcf5c9173f6e27cf6036ace67eaaf061294cd23151d84c851f56b 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. import { defineComponent, inject, ref, watch, watchEffect, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, normalizeStyle } from 'vue';
  2. import { colorPickerPanelContextKey } from '../color-picker-panel.mjs';
  3. import Color from '../utils/color.mjs';
  4. import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
  5. import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
  6. const _sfc_main = defineComponent({
  7. props: {
  8. colors: {
  9. type: Array,
  10. required: true
  11. },
  12. color: {
  13. type: Object,
  14. required: true
  15. },
  16. enableAlpha: {
  17. type: Boolean,
  18. required: true
  19. },
  20. disabled: Boolean
  21. },
  22. setup(props) {
  23. const ns = useNamespace("color-predefine");
  24. const { currentColor } = inject(colorPickerPanelContextKey);
  25. const rgbaColors = ref(parseColors(props.colors, props.color));
  26. watch(() => currentColor.value, (val) => {
  27. const color = new Color({
  28. value: val
  29. });
  30. rgbaColors.value.forEach((item) => {
  31. item.selected = color.compare(item);
  32. });
  33. });
  34. watchEffect(() => {
  35. rgbaColors.value = parseColors(props.colors, props.color);
  36. });
  37. function handleSelect(index) {
  38. if (props.disabled)
  39. return;
  40. props.color.fromString(props.colors[index]);
  41. }
  42. function parseColors(colors, color) {
  43. return colors.map((value) => {
  44. const c = new Color({
  45. value
  46. });
  47. c.selected = c.compare(color);
  48. return c;
  49. });
  50. }
  51. return {
  52. rgbaColors,
  53. handleSelect,
  54. ns
  55. };
  56. }
  57. });
  58. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  59. return openBlock(), createElementBlock("div", {
  60. class: normalizeClass(_ctx.ns.b())
  61. }, [
  62. createElementVNode("div", {
  63. class: normalizeClass(_ctx.ns.e("colors"))
  64. }, [
  65. (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rgbaColors, (item, index) => {
  66. return openBlock(), createElementBlock("div", {
  67. key: _ctx.colors[index],
  68. class: normalizeClass([
  69. _ctx.ns.e("color-selector"),
  70. _ctx.ns.is("alpha", item.get("alpha") < 100),
  71. { selected: item.selected }
  72. ]),
  73. onClick: ($event) => _ctx.handleSelect(index)
  74. }, [
  75. createElementVNode("div", {
  76. style: normalizeStyle({ backgroundColor: item.value })
  77. }, null, 4)
  78. ], 10, ["onClick"]);
  79. }), 128))
  80. ], 2)
  81. ], 2);
  82. }
  83. var Predefine = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "predefine.vue"]]);
  84. export { Predefine as default };
  85. //# sourceMappingURL=predefine.mjs.map