ab195790921fddb0aaefc2c83266d1917e305dba1ad2a52decc15e1a81785767c01c2e25dc3aa3fb72d4908cbf842b9ee98cd3abd4203a744ea1db200f2a28 2.7 KB

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