tdesign-mobile-vue
Version:
tdesign-mobile-vue
430 lines (422 loc) • 17 kB
JavaScript
/**
* 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