winbox-ui-next/lib/color-picker/src/ColorPicker.js

We Design Vue 2.0: A Vue.js 3 UI Library

"use strict";
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
Object.defineProperty(exports, "__esModule", { value: true });
exports[Symbol.toStringTag] = "Module";
var vue = require("vue");
var vdirs = require("vdirs");
var seemly = require("seemly");
var vooks = require("vooks");
var vueuc = require("vueuc");
require("../_styles/common/dark.js");
require("../_styles/common/light.js");
var light = require("../styles/light.js");
var useFormItem = require("../_mixins/use-form-item.js");
var useTheme = require("../_mixins/use-theme.js");
var useConfig = require("../_mixins/use-config.js");
require("@css-render/vue3-ssr");
var call = require("../_utils/vue/call.js");
require("../_utils/vue/wrapper.js");
require("../_utils/cssr/index.js");
var useAdjustedTo = require("../_utils/composable/use-adjusted-to.js");
require("../_utils/composable/use-lock-html-scroll.js");
require("../_utils/composable/use-is-composing.js");
require("../_styles/global/index.cssr.js");
var useCssVarsClass = require("../_mixins/use-css-vars-class.js");
require("css-render");
var HueSlider = require("./HueSlider.js");
var AlphaSlider = require("./AlphaSlider.js");
var Pallete = require("./Pallete.js");
var ColorInput = require("./ColorInput.js");
var ColorPickerTrigger = require("./ColorPickerTrigger.js");
var utils = require("./utils.js");
var ColorPickerSwatches = require("./ColorPickerSwatches.js");
var ColorPreview = require("./ColorPreview.js");
var context = require("./context.js");
var index_cssr = require("./styles/index.cssr.js");
var index = require("../../locale/index.js");
var createKey = require("../_utils/cssr/create-key.js");
const colorPickerProps = __spreadProps(__spreadValues({}, useTheme["default"].props), {
  "value": String,
  "show": {
    type: Boolean,
    default: void 0
  },
  "defaultShow": Boolean,
  "defaultValue": String,
  "modes": {
    type: Array,
    default: () => ["rgb", "hex", "hsl"]
  },
  "placement": {
    type: String,
    default: "bottom-start"
  },
  "to": useAdjustedTo.useAdjustedTo.propTo,
  "showAlpha": {
    type: Boolean,
    default: true
  },
  "showPreview": Boolean,
  "swatches": Array,
  "disabled": {
    type: Boolean,
    default: void 0
  },
  "actions": {
    type: Array,
    default: null
  },
  "internalActions": Array,
  "size": String,
  "renderLabel": Function,
  "onComplete": Function,
  "onConfirm": Function,
  "onUpdate:show": [Function, Array],
  "onUpdateShow": [Function, Array],
  "onUpdate:value": [Function, Array],
  "onUpdateValue": [Function, Array]
});
var _ColorPicker = vue.defineComponent({
  name: "ColorPicker",
  props: colorPickerProps,
  setup(props, {
    slots
  }) {
    const {
      t
    } = index.useI18n();
    const selfRef = vue.ref(null);
    let upcomingValue = null;
    const formItem = useFormItem["default"](props);
    const {
      mergedSizeRef,
      mergedDisabledRef
    } = formItem;
    const {
      mergedClsPrefixRef,
      namespaceRef,
      inlineThemeDisabled
    } = useConfig["default"](props);
    const themeRef = useTheme["default"]("ColorPicker", "-color-picker", index_cssr, light["default"], props, mergedClsPrefixRef);
    vue.provide(context.colorPickerInjectionKey, {
      themeRef,
      renderLabelRef: vue.toRef(props, "renderLabel"),
      colorPickerSlots: slots
    });
    const uncontrolledShowRef = vue.ref(props.defaultShow);
    const mergedShowRef = vooks.useMergedState(vue.toRef(props, "show"), uncontrolledShowRef);
    function doUpdateShow(value) {
      const {
        onUpdateShow,
        "onUpdate:show": _onUpdateShow
      } = props;
      if (onUpdateShow)
        call.call(onUpdateShow, value);
      if (_onUpdateShow)
        call.call(_onUpdateShow, value);
      uncontrolledShowRef.value = value;
    }
    const {
      defaultValue
    } = props;
    const uncontrolledValueRef = vue.ref(defaultValue === void 0 ? utils.deriveDefaultValue(props.modes, props.showAlpha) : defaultValue);
    const mergedValueRef = vooks.useMergedState(vue.toRef(props, "value"), uncontrolledValueRef);
    const undoStackRef = vue.ref([mergedValueRef.value]);
    const valueIndexRef = vue.ref(0);
    const valueModeRef = vue.computed(() => utils.getModeFromValue(mergedValueRef.value));
    const {
      modes
    } = props;
    const displayedModeRef = vue.ref(utils.getModeFromValue(mergedValueRef.value) || modes[0] || "rgb");
    function handleUpdateDisplayedMode() {
      const {
        modes: modes2
      } = props;
      const {
        value: displayedMode
      } = displayedModeRef;
      const currentModeIndex = modes2.findIndex((mode) => mode === displayedMode);
      if (~currentModeIndex) {
        displayedModeRef.value = modes2[(currentModeIndex + 1) % modes2.length];
      } else {
        displayedModeRef.value = "rgb";
      }
    }
    let _h;
    let s;
    let l;
    let v;
    let r;
    let g;
    let b;
    let a;
    const hsvaRef = vue.computed(() => {
      const {
        value: mergedValue
      } = mergedValueRef;
      if (!mergedValue)
        return null;
      switch (valueModeRef.value) {
        case "hsv":
          return seemly.hsva(mergedValue);
        case "hsl":
          [_h, s, l, a] = seemly.hsla(mergedValue);
          return [...seemly.hsl2hsv(_h, s, l), a];
        case "rgb":
        case "hex":
          [r, g, b, a] = seemly.rgba(mergedValue);
          return [...seemly.rgb2hsv(r, g, b), a];
      }
    });
    const rgbaRef = vue.computed(() => {
      const {
        value: mergedValue
      } = mergedValueRef;
      if (!mergedValue)
        return null;
      switch (valueModeRef.value) {
        case "rgb":
        case "hex":
          return seemly.rgba(mergedValue);
        case "hsv":
          [_h, s, v, a] = seemly.hsva(mergedValue);
          return [...seemly.hsv2rgb(_h, s, v), a];
        case "hsl":
          [_h, s, l, a] = seemly.hsla(mergedValue);
          return [...seemly.hsl2rgb(_h, s, l), a];
      }
    });
    const hslaRef = vue.computed(() => {
      const {
        value: mergedValue
      } = mergedValueRef;
      if (!mergedValue)
        return null;
      switch (valueModeRef.value) {
        case "hsl":
          return seemly.hsla(mergedValue);
        case "hsv":
          [_h, s, v, a] = seemly.hsva(mergedValue);
          return [...seemly.hsv2hsl(_h, s, v), a];
        case "rgb":
        case "hex":
          [r, g, b, a] = seemly.rgba(mergedValue);
          return [...seemly.rgb2hsl(r, g, b), a];
      }
    });
    const mergedValueArrRef = vue.computed(() => {
      switch (displayedModeRef.value) {
        case "rgb":
        case "hex":
          return rgbaRef.value;
        case "hsv":
          return hsvaRef.value;
        case "hsl":
          return hslaRef.value;
      }
    });
    const displayedHueRef = vue.ref(0);
    const displayedAlphaRef = vue.ref(1);
    const displayedSvRef = vue.ref([0, 0]);
    function handleUpdateSv(s2, v2) {
      const {
        value: hsvaArr
      } = hsvaRef;
      const hue = displayedHueRef.value;
      const alpha = hsvaArr ? hsvaArr[3] : 1;
      displayedSvRef.value = [s2, v2];
      const {
        showAlpha
      } = props;
      switch (displayedModeRef.value) {
        case "hsv":
          doUpdateValue((showAlpha ? seemly.toHsvaString : seemly.toHsvString)([hue, s2, v2, alpha]), "cursor");
          break;
        case "hsl":
          doUpdateValue((showAlpha ? seemly.toHslaString : seemly.toHslString)([...seemly.hsv2hsl(hue, s2, v2), alpha]), "cursor");
          break;
        case "rgb":
          doUpdateValue((showAlpha ? seemly.toRgbaString : seemly.toRgbString)([...seemly.hsv2rgb(hue, s2, v2), alpha]), "cursor");
          break;
        case "hex":
          doUpdateValue((showAlpha ? seemly.toHexaString : seemly.toHexString)([...seemly.hsv2rgb(hue, s2, v2), alpha]), "cursor");
          break;
      }
    }
    function handleUpdateHue(hue) {
      displayedHueRef.value = hue;
      const {
        value: hsvaArr
      } = hsvaRef;
      if (!hsvaArr) {
        return;
      }
      const [, s2, v2, a2] = hsvaArr;
      const {
        showAlpha
      } = props;
      switch (displayedModeRef.value) {
        case "hsv":
          doUpdateValue((showAlpha ? seemly.toHsvaString : seemly.toHsvString)([hue, s2, v2, a2]), "cursor");
          break;
        case "rgb":
          doUpdateValue((showAlpha ? seemly.toRgbaString : seemly.toRgbString)([...seemly.hsv2rgb(hue, s2, v2), a2]), "cursor");
          break;
        case "hex":
          doUpdateValue((showAlpha ? seemly.toHexaString : seemly.toHexString)([...seemly.hsv2rgb(hue, s2, v2), a2]), "cursor");
          break;
        case "hsl":
          doUpdateValue((showAlpha ? seemly.toHslaString : seemly.toHslString)([...seemly.hsv2hsl(hue, s2, v2), a2]), "cursor");
          break;
      }
    }
    function handleUpdateAlpha(alpha) {
      switch (displayedModeRef.value) {
        case "hsv":
          [_h, s, v] = hsvaRef.value;
          doUpdateValue(seemly.toHsvaString([_h, s, v, alpha]), "cursor");
          break;
        case "rgb":
          [r, g, b] = rgbaRef.value;
          doUpdateValue(seemly.toRgbaString([r, g, b, alpha]), "cursor");
          break;
        case "hex":
          [r, g, b] = rgbaRef.value;
          doUpdateValue(seemly.toHexaString([r, g, b, alpha]), "cursor");
          break;
        case "hsl":
          [_h, s, l] = hslaRef.value;
          doUpdateValue(seemly.toHslaString([_h, s, l, alpha]), "cursor");
          break;
      }
      displayedAlphaRef.value = alpha;
    }
    function doUpdateValue(value, updateSource) {
      if (updateSource === "cursor") {
        upcomingValue = value;
      } else {
        upcomingValue = null;
      }
      const {
        nTriggerFormChange,
        nTriggerFormInput
      } = formItem;
      const {
        onUpdateValue,
        "onUpdate:value": _onUpdateValue
      } = props;
      if (onUpdateValue)
        call.call(onUpdateValue, value);
      if (_onUpdateValue)
        call.call(_onUpdateValue, value);
      nTriggerFormChange();
      nTriggerFormInput();
      uncontrolledValueRef.value = value;
    }
    function handleInputUpdateValue(value) {
      doUpdateValue(value, "input");
      void vue.nextTick(handleComplete);
    }
    function handleComplete(pushStack = true) {
      const {
        value
      } = mergedValueRef;
      if (value) {
        const {
          nTriggerFormChange,
          nTriggerFormInput
        } = formItem;
        const {
          onComplete
        } = props;
        if (onComplete) {
          onComplete(value);
        }
        const {
          value: undoStack
        } = undoStackRef;
        const {
          value: valueIndex
        } = valueIndexRef;
        if (pushStack) {
          undoStack.splice(valueIndex + 1, undoStack.length, value);
          valueIndexRef.value = valueIndex + 1;
        }
        nTriggerFormChange();
        nTriggerFormInput();
      }
    }
    function undo() {
      const {
        value: valueIndex
      } = valueIndexRef;
      if (valueIndex - 1 < 0)
        return;
      doUpdateValue(undoStackRef.value[valueIndex - 1], "input");
      handleComplete(false);
      valueIndexRef.value = valueIndex - 1;
    }
    function redo() {
      const {
        value: valueIndex
      } = valueIndexRef;
      if (valueIndex < 0 || valueIndex + 1 >= undoStackRef.value.length)
        return;
      doUpdateValue(undoStackRef.value[valueIndex + 1], "input");
      handleComplete(false);
      valueIndexRef.value = valueIndex + 1;
    }
    function handleClear() {
      doUpdateValue(null, "input");
      doUpdateShow(false);
    }
    function handleConfirm() {
      const {
        value
      } = mergedValueRef;
      const {
        onConfirm
      } = props;
      if (onConfirm) {
        onConfirm(value);
      }
      doUpdateShow(false);
    }
    const undoableRef = vue.computed(() => valueIndexRef.value >= 1);
    const redoableRef = vue.computed(() => {
      const {
        value: undoStack
      } = undoStackRef;
      return undoStack.length > 1 && valueIndexRef.value < undoStack.length - 1;
    });
    vue.watch(mergedShowRef, (value) => {
      if (!value) {
        undoStackRef.value = [mergedValueRef.value];
        valueIndexRef.value = 0;
      }
    });
    vue.watchEffect(() => {
      if (upcomingValue && upcomingValue === mergedValueRef.value)
        ;
      else {
        const {
          value
        } = hsvaRef;
        if (value) {
          displayedHueRef.value = value[0];
          displayedAlphaRef.value = value[3];
          displayedSvRef.value = [value[1], value[2]];
        }
      }
      upcomingValue = null;
    });
    const cssVarsRef = vue.computed(() => {
      const {
        value: mergedSize
      } = mergedSizeRef;
      const {
        common: {
          cubicBezierEaseInOut
        },
        self: {
          [createKey.createKey("height", mergedSize)]: height
        }
      } = themeRef.value;
      return {
        "--n-height": height
      };
    });
    const themeClassHandle = inlineThemeDisabled ? useCssVarsClass.useThemeClass("color-picker", vue.computed(() => {
      return mergedSizeRef.value[0];
    }), cssVarsRef, props) : void 0;
    function renderPanel() {
      var _a;
      const {
        value: rgba
      } = rgbaRef;
      const {
        value: displayedHue
      } = displayedHueRef;
      const {
        internalActions,
        modes: modes2,
        actions
      } = props;
      const {
        value: mergedClsPrefix
      } = mergedClsPrefixRef;
      return vue.createVNode("div", {
        "class": [`${mergedClsPrefix}-color-picker-panel`, themeClassHandle == null ? void 0 : themeClassHandle.themeClass.value],
        "onDragstart": (e) => {
          e.preventDefault();
        },
        "style": inlineThemeDisabled ? void 0 : cssVarsRef.value
      }, [vue.createVNode("div", {
        "class": `${mergedClsPrefix}-color-picker-control`
      }, [vue.createVNode(Pallete, {
        "clsPrefix": mergedClsPrefix,
        "rgba": rgba,
        "displayedHue": displayedHue,
        "displayedSv": displayedSvRef.value,
        "onUpdateSV": handleUpdateSv,
        "onComplete": handleComplete
      }, null), vue.createVNode("div", {
        "class": `${mergedClsPrefix}-color-picker-preview`
      }, [vue.createVNode("div", {
        "class": `${mergedClsPrefix}-color-picker-preview__sliders`
      }, [vue.createVNode(HueSlider, {
        "clsPrefix": mergedClsPrefix,
        "hue": displayedHue,
        "onUpdateHue": handleUpdateHue,
        "onComplete": handleComplete
      }, null), props.showAlpha ? vue.createVNode(AlphaSlider, {
        "clsPrefix": mergedClsPrefix,
        "rgba": rgba,
        "alpha": displayedAlphaRef.value,
        "onUpdateAlpha": handleUpdateAlpha,
        "onComplete": handleComplete
      }, null) : null]), props.showPreview ? vue.createVNode(ColorPreview, {
        "clsPrefix": mergedClsPrefix,
        "mode": displayedModeRef.value,
        "color": rgbaRef.value && seemly.toHexString(rgbaRef.value),
        "onUpdateColor": (color) => doUpdateValue(color, "input")
      }, null) : null]), vue.createVNode(ColorInput, {
        "clsPrefix": mergedClsPrefix,
        "showAlpha": props.showAlpha,
        "mode": displayedModeRef.value,
        "modes": modes2,
        "onUpdateMode": handleUpdateDisplayedMode,
        "value": mergedValueRef.value,
        "valueArr": mergedValueArrRef.value,
        "onUpdateValue": handleInputUpdateValue
      }, null), ((_a = props.swatches) == null ? void 0 : _a.length) && vue.createVNode(ColorPickerSwatches, {
        "clsPrefix": mergedClsPrefix,
        "mode": displayedModeRef.value,
        "swatches": props.swatches,
        "onUpdateColor": (color) => doUpdateValue(color, "input")
      }, null)]), (actions == null ? void 0 : actions.length) ? vue.createVNode("div", {
        "class": `${mergedClsPrefix}-color-picker-action`
      }, [actions.includes("confirm") && vue.createVNode(vue.resolveComponent("w-button"), {
        "size": "medium",
        "onClick": handleConfirm
      }, {
        default: () => t("colorPicker.confirm")
      }), actions.includes("clear") && vue.createVNode(vue.resolveComponent("w-button"), {
        "size": "medium",
        "onClick": handleClear,
        "disabled": !mergedValueRef.value
      }, {
        default: () => t("colorPicker.clear")
      })]) : null, slots.action ? vue.createVNode("div", {
        "class": `${mergedClsPrefix}-color-picker-action`
      }, {
        default: slots.action
      }) : internalActions ? vue.createVNode("div", {
        "class": `${mergedClsPrefix}-color-picker-action`
      }, [internalActions.includes("undo") && vue.createVNode(vue.resolveComponent("w-button"), {
        "size": "medium",
        "onClick": undo,
        "disabled": !undoableRef.value
      }, {
        default: () => t("colorPicker.undo")
      }), internalActions.includes("redo") && vue.createVNode(vue.resolveComponent("w-button"), {
        "size": "medium",
        "onClick": redo,
        "disabled": !redoableRef.value
      }, {
        default: () => t("colorPicker.redo")
      })]) : null]);
    }
    return {
      mergedSize: mergedSizeRef,
      mergedClsPrefix: mergedClsPrefixRef,
      namespace: namespaceRef,
      selfRef,
      hsla: hslaRef,
      rgba: rgbaRef,
      mergedShow: mergedShowRef,
      mergedDisabled: mergedDisabledRef,
      isMounted: vooks.useIsMounted(),
      adjustedTo: useAdjustedTo.useAdjustedTo(props),
      mergedValue: mergedValueRef,
      handleTriggerClick() {
        doUpdateShow(true);
      },
      handleClickOutside(e) {
        var _a;
        if ((_a = selfRef.value) == null ? void 0 : _a.contains(seemly.getPreciseEventTarget(e))) {
          return;
        }
        doUpdateShow(false);
      },
      renderPanel,
      cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
      themeClass: themeClassHandle == null ? void 0 : themeClassHandle.themeClass,
      onRender: themeClassHandle == null ? void 0 : themeClassHandle.onRender
    };
  },
  render() {
    const {
      $slots,
      mergedClsPrefix,
      onRender,
      mergedSize
    } = this;
    onRender == null ? void 0 : onRender();
    return vue.createVNode("div", {
      "class": [this.themeClass, `${mergedClsPrefix}-color-picker ${mergedClsPrefix}-color-picker-${mergedSize}`],
      "ref": "selfRef",
      "style": this.cssVars
    }, [vue.createVNode(vueuc.VBinder, null, {
      default: () => [vue.createVNode(vueuc.VTarget, null, {
        default: () => vue.createVNode(ColorPickerTrigger, {
          "clsPrefix": mergedClsPrefix,
          "value": this.mergedValue,
          "hsla": this.hsla,
          "disabled": this.mergedDisabled,
          "onClick": this.handleTriggerClick
        }, {
          label: $slots.label
        })
      }), vue.createVNode(vueuc.VFollower, {
        "placement": this.placement,
        "show": this.mergedShow,
        "containerClass": this.namespace,
        "teleportDisabled": this.adjustedTo === useAdjustedTo.useAdjustedTo.tdkey,
        "to": this.adjustedTo
      }, {
        default: () => this.mergedShow ? vue.withDirectives(this.renderPanel(), [[vdirs.clickoutside, this.handleClickOutside, void 0, {
          capture: true
        }]]) : null
      })]
    })]);
  }
});
exports.colorPickerProps = colorPickerProps;
exports["default"] = _ColorPicker;