UNPKG

tdesign-mobile-vue

Version:
430 lines (422 loc) 17 kB
/** * tdesign v1.9.3 * (c) 2025 TDesign Group * @license MIT */ 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var _slicedToArray = require('@babel/runtime/helpers/slicedToArray'); var vue = require('vue'); var colorPicker_props = require('./props.js'); var config = require('../config.js'); var popup_index = require('../popup/index.js'); var hooks_tnode = require('../hooks/tnode.js'); var hooks_useClass = require('../hooks/useClass.js'); var hooks_useVModel = require('../hooks/useVModel.js'); var colorPicker_helper = require('./helper.js'); var _common_js_colorPicker_color = require('../_common/js/color-picker/color.js'); var _common_js_colorPicker_constants = require('../_common/js/color-picker/constants.js'); require('@babel/runtime/helpers/classCallCheck'); require('@babel/runtime/helpers/createClass'); require('@babel/runtime/helpers/defineProperty'); require('@babel/runtime/helpers/toConsumableArray'); require('../_common/js/color-picker/gradient.js'); var colorPicker_constants = require('./constants.js'); require('../popup/popup.js'); require('tdesign-icons-vue-next'); require('../popup/props.js'); require('../overlay/index.js'); require('../overlay/overlay.js'); require('../shared/dom.js'); require('../_chunks/dep-88fe047a.js'); require('../_chunks/dep-2f809ed9.js'); require('@babel/runtime/helpers/typeof'); require('../_chunks/dep-ef223206.js'); require('../_chunks/dep-c3cb976c.js'); require('../_chunks/dep-757b152c.js'); require('../_chunks/dep-5be9198d.js'); require('../overlay/props.js'); require('../shared/component.js'); require('../_chunks/dep-21f18d3b.js'); require('../_chunks/dep-b9642a56.js'); require('../_common/js/global-config/mobile/default-config.js'); require('../_common/js/global-config/mobile/locale/zh_CN.js'); require('../_chunks/dep-28b1e09d.js'); require('../_chunks/dep-57aa1aa0.js'); require('dayjs'); require('../_chunks/dep-85204fa0.js'); require('../_chunks/dep-f6b14f80.js'); require('../_chunks/dep-a8d60643.js'); require('../_chunks/dep-7c911ba3.js'); require('../_chunks/dep-49f0a63e.js'); require('../_chunks/dep-d950aa21.js'); require('../_chunks/dep-a697b1b9.js'); require('../_chunks/dep-4dfb9b9c.js'); require('../_chunks/dep-c65deed7.js'); require('../_chunks/dep-94eeec5a.js'); require('../_chunks/dep-060bf1cf.js'); require('../_chunks/dep-0e05e959.js'); require('../_chunks/dep-324da301.js'); require('../_chunks/dep-da6dc2cf.js'); require('../_chunks/dep-ccc9ad3d.js'); require('../hooks/render-tnode.js'); require('../_chunks/dep-a7319409.js'); require('../_chunks/dep-afa9f3f2.js'); require('../_chunks/dep-ae809b86.js'); require('../_chunks/dep-2b08c0a6.js'); require('../_chunks/dep-288156c7.js'); require('../_chunks/dep-3d4c38f1.js'); require('../_chunks/dep-6df33aaf.js'); require('../_chunks/dep-675798b4.js'); require('../_common/js/utils/general.js'); require('../hooks/useLockScroll.js'); require('../_util/useTouch.js'); require('../_util/getScrollParent.js'); require('../hooks/useTeleport.js'); require('../shared/render-tnode.js'); require('tinycolor2'); require('../_common/js/color-picker/cmyk.js'); require('../_chunks/dep-f11711eb.js'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray); var prefix = config["default"].prefix; var _ColorPicker = vue.defineComponent({ name: "".concat(prefix, "-color-picker"), components: { TPopup: popup_index.Popup }, props: colorPicker_props["default"], setup: function setup(props2) { var colorPickerClass = hooks_useClass.usePrefixClass("color-picker"); var panelRect = vue.ref(); var hueSliderRect = vue.ref(); var alphaSliderRect = vue.ref(); var _toRefs = vue.toRefs(props2), value = _toRefs.value, modelValue = _toRefs.modelValue; var _useVModel = hooks_useVModel["default"](value, modelValue, props2.defaultValue, props2.onChange), _useVModel2 = _slicedToArray__default["default"](_useVModel, 2), _useVModel2$ = _useVModel2[0], innerValue = _useVModel2$ === void 0 ? vue.ref(_common_js_colorPicker_constants.DEFAULT_COLOR) : _useVModel2$, setPickerValue = _useVModel2[1]; var saturationThumbStyle = vue.ref({ left: "0", top: "0" }); var hueSliderStyle = vue.ref({ left: "0", color: "" }); var alphaSliderStyle = vue.ref({ left: "0", color: "" }); var sliderInfo = vue.ref({ value: 0 }); var color = new _common_js_colorPicker_color.Color(props2.defaultValue || props2.value || _common_js_colorPicker_constants.DEFAULT_COLOR); var formatList = vue.ref(colorPicker_helper.getFormatList(props2.format, color)); var innerSwatchList = vue.computed(function () { return colorPicker_helper.genSwatchList(props2.swatchColors); }); var renderTNodeJSX = hooks_tnode.useTNodeJSX(); var getSliderThumbStyle = function getSliderThumbStyle(_ref) { var value2 = _ref.value, maxValue = _ref.maxValue, isAlpha = _ref.isAlpha; var dom = isAlpha ? alphaSliderRect.value : hueSliderRect.value; var _dom$getBoundingClien = dom.getBoundingClientRect(), width = _dom$getBoundingClien.width; if (!width) { return; } var left = Math.round(value2 / maxValue * 100); return { left: "".concat(left, "%"), color: color.rgb }; }; var getSaturationThumbStyle = function getSaturationThumbStyle(_ref2) { var saturation = _ref2.saturation, value2 = _ref2.value; var _panelRect$value$getB = panelRect.value.getBoundingClientRect(), width = _panelRect$value$getB.width, height = _panelRect$value$getB.height; var top = Math.round((1 - value2) * height); var left = Math.round(saturation * width); return { color: color.rgb, left: "".concat(left, "px"), top: "".concat(top, "px") }; }; var setCoreStyle = function setCoreStyle() { sliderInfo.value = { value: color.hue }; formatList.value = colorPicker_helper.getFormatList(props2.format, color); if (isMultiple.value) { var hue = getSliderThumbStyle({ value: color.hue, maxValue: colorPicker_constants.HUE_MAX, isAlpha: false }); if (hue) { hueSliderStyle.value = hue; } var alpha = getSliderThumbStyle({ value: color.alpha * 100, maxValue: colorPicker_constants.ALPHA_MAX, isAlpha: false }); if (alpha) { alphaSliderStyle.value = alpha; } saturationThumbStyle.value = getSaturationThumbStyle({ saturation: color.saturation, value: color.value }); } }; var formatValue = function formatValue() { return color.getFormatsColorMap()[props2.format] || color.css; }; var emitColorChange = function emitColorChange(trigger) { setPickerValue === null || setPickerValue === void 0 || setPickerValue(formatValue(), { trigger: trigger, color: _common_js_colorPicker_color.getColorObject(color) }); }; var clickSwatch = function clickSwatch(swatch) { color.update(swatch); emitColorChange("preset"); setCoreStyle(); }; var isMultiple = vue.computed(function () { return props2.type === "multiple"; }); var getSaturationAndValueByCoordinate = function getSaturationAndValueByCoordinate(coordinate) { var _panelRect$value$getB2 = panelRect.value.getBoundingClientRect(), width = _panelRect$value$getB2.width, height = _panelRect$value$getB2.height; var x = coordinate.x, y = coordinate.y; var saturation = x / width; var value2 = 1 - y / height; saturation = Math.min(1, Math.max(0, saturation)); value2 = Math.min(1, Math.max(0, value2)); return { saturation: saturation, value: value2 }; }; var onChangeSaturation = function onChangeSaturation(_ref3) { var _props2$onPaletteBarC; var saturation = _ref3.saturation, value2 = _ref3.value; var sat = color.saturation, val = color.value; if (value2 !== val && saturation !== sat) { color.saturation = saturation; color.value = value2; } else if (saturation !== sat) { color.saturation = saturation; } else if (value2 !== val) { color.value = value2; } else { return; } (_props2$onPaletteBarC = props2.onPaletteBarChange) === null || _props2$onPaletteBarC === void 0 || _props2$onPaletteBarC.call(props2, { color: _common_js_colorPicker_color.getColorObject(color) }); setCoreStyle(); }; var handleSaturationDrag = function handleSaturationDrag(e) { var coordinate = colorPicker_helper.getCoordinate(e, panelRect.value.getBoundingClientRect(), props2.fixed); var _getSaturationAndValu = getSaturationAndValueByCoordinate(coordinate), saturation = _getSaturationAndValu.saturation, value2 = _getSaturationAndValu.value; onChangeSaturation({ saturation: saturation, value: value2 }); }; var onChangeSlider = function onChangeSlider(_ref4) { var value2 = _ref4.value, isAlpha = _ref4.isAlpha; if (isAlpha) { color.alpha = value2 / 100; } else { color.hue = value2; } emitColorChange(isAlpha ? "palette-alpha-bar" : "palette-hue-bar"); setCoreStyle(); }; var handleSliderDrag = function handleSliderDrag(e) { var isAlpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; var dom = isAlpha ? alphaSliderRect.value : hueSliderRect.value; var rect = dom.getBoundingClientRect(); var width = rect.width; var coordinate = colorPicker_helper.getCoordinate(e, rect); var x = coordinate.x; var maxValue = isAlpha ? colorPicker_constants.ALPHA_MAX : colorPicker_constants.HUE_MAX; var value2 = Math.round(x / width * maxValue * 100) / 100; if (value2 < 0) value2 = 0; if (value2 > maxValue) value2 = maxValue; onChangeSlider({ value: value2, isAlpha: isAlpha }); }; var handleDiffDrag = function handleDiffDrag(e, dragType) { e.preventDefault(); e.stopPropagation(); switch (dragType) { case "saturation": handleSaturationDrag(e); break; case "hue-slider": handleSliderDrag(e); break; case "alpha-slider": handleSliderDrag(e, true); break; } }; var onTouchStart = function onTouchStart(e, dragType) { handleDiffDrag(e, dragType); }; var onTouchMove = function onTouchMove(e, dragType) { handleDiffDrag(e, dragType); }; var onTouchEnd = function onTouchEnd(e, dragType) { handleDiffDrag(e, dragType); }; var updateColor = function updateColor() { var result = innerValue.value || _common_js_colorPicker_constants.DEFAULT_COLOR; color.update(result); }; var init = function init() { updateColor(); setCoreStyle(); }; vue.onMounted(function () { init(); }); return function () { var _alphaSliderStyle$val; var type = props2.type, format = props2.format, enableAlpha = props2.enableAlpha; renderTNodeJSX("header"); renderTNodeJSX("footer"); var inner = vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__panel") }, [vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__body ").concat(colorPickerClass.value, "__body--").concat(type) }, [isMultiple.value && vue.createVNode("div", { "ref": panelRect, "class": "".concat(colorPickerClass.value, "__saturation"), "style": { background: "hsl(".concat(sliderInfo.value.value, ", 100%, 50%)") }, "onTouchstart": function onTouchstart(e) { return onTouchStart(e, "saturation"); }, "onTouchmove": function onTouchmove(e) { return onTouchMove(e, "saturation"); }, "onTouchend": function onTouchend(e) { return onTouchEnd(e, "saturation"); } }, [vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__thumb"), "style": saturationThumbStyle.value }, null)]), isMultiple.value && vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__sliders-wrapper") }, [vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__sliders") }, [vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__slider-wrapper ").concat(colorPickerClass.value, "__slider-wrapper--hue-type") }, [vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__slider"), "ref": hueSliderRect, "onTouchstart": function onTouchstart(e) { return onTouchStart(e, "hue-slider"); }, "onTouchmove": function onTouchmove(e) { return onTouchMove(e, "hue-slider"); }, "onTouchend": function onTouchend(e) { return onTouchEnd(e, "hue-slider"); } }, [vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__rail") }, null), vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__thumb"), "style": hueSliderStyle.value }, null)])]), enableAlpha && vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__slider-wrapper ").concat(colorPickerClass.value, "__slider-wrapper--alpha-type") }, [vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__slider-padding ") }, null), vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__slider"), "ref": alphaSliderRect, "onTouchstart": function onTouchstart(e) { return onTouchStart(e, "alpha-slider"); }, "onTouchmove": function onTouchmove(e) { return onTouchMove(e, "alpha-slider"); }, "onTouchend": function onTouchend(e) { return onTouchEnd(e, "alpha-slider"); } }, [vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__rail"), "style": { background: "linear-gradient(to right, rgba(0, 0, 0, 0), ".concat((_alphaSliderStyle$val = alphaSliderStyle.value) === null || _alphaSliderStyle$val === void 0 ? void 0 : _alphaSliderStyle$val.color, ")") } }, null), vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__thumb"), "style": alphaSliderStyle.value }, null)])])])]), isMultiple.value && vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__format") }, [vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__format-item ").concat(colorPickerClass.value, "__format-item--first") }, [format]), vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__format-item ").concat(colorPickerClass.value, "__format-item--second") }, [vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__format-inputs") }, [formatList.value.map(function (formatItem, formatIndex) { return vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__format-input ").concat(colorPickerClass.value, "__format-input--").concat(formatIndex === formatList.value.length - 1 && formatList.value.length === 2 ? "fixed" : "base"), "key": formatIndex }, [formatItem]); })])])]), innerSwatchList.value.length && vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__swatches-wrap") }, [vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__swatches") }, [isMultiple.value && vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__swatches-title") }, ["\u7CFB\u7EDF\u9884\u8BBE\u8272\u5F69"]), vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__swatches-items") }, [innerSwatchList.value.map(function (swatch) { return vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__swatches-item"), "key": swatch, "onClick": function onClick() { return clickSwatch(swatch); } }, [vue.createVNode("div", { "class": "".concat(colorPickerClass.value, "__swatches-inner"), "style": { backgroundColor: swatch } }, null)]); })])])])])]); return inner; }; } }); exports["default"] = _ColorPicker; //# sourceMappingURL=color-picker.js.map