tdesign-mobile-vue
Version:
tdesign-mobile-vue
393 lines (389 loc) • 14.9 kB
JavaScript
/**
* tdesign v1.9.3
* (c) 2025 TDesign Group
* @license MIT
*/
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { defineComponent, ref, toRefs, computed, onMounted, createVNode } from 'vue';
import props from './props.js';
import config from '../config.js';
import { Popup } from '../popup/index.js';
import { useTNodeJSX } from '../hooks/tnode.js';
import { usePrefixClass } from '../hooks/useClass.js';
import useVModel from '../hooks/useVModel.js';
import { getFormatList, genSwatchList, getCoordinate } from './helper.js';
import { Color, getColorObject } from '../_common/js/color-picker/color.js';
import { DEFAULT_COLOR } from '../_common/js/color-picker/constants.js';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '@babel/runtime/helpers/defineProperty';
import '@babel/runtime/helpers/toConsumableArray';
import '../_common/js/color-picker/gradient.js';
import { HUE_MAX, ALPHA_MAX } from './constants.js';
import '../popup/popup.js';
import 'tdesign-icons-vue-next';
import '../popup/props.js';
import '../overlay/index.js';
import '../overlay/overlay.js';
import '../shared/dom.js';
import 'lodash-es';
import '../overlay/props.js';
import '../shared/component.js';
import '../config-provider/useConfig.js';
import '../config-provider/context.js';
import '../_common/js/global-config/mobile/default-config.js';
import '../_common/js/global-config/mobile/locale/zh_CN.js';
import '../_chunks/dep-f785f3d3.js';
import '@babel/runtime/helpers/typeof';
import '../_chunks/dep-0d44b254.js';
import 'dayjs';
import '../hooks/render-tnode.js';
import '../_common/js/utils/general.js';
import '../hooks/useLockScroll.js';
import '../_util/useTouch.js';
import '../_util/getScrollParent.js';
import '../hooks/useTeleport.js';
import '../shared/render-tnode.js';
import 'tinycolor2';
import '../_common/js/color-picker/cmyk.js';
var prefix = config.prefix;
var _ColorPicker = defineComponent({
name: "".concat(prefix, "-color-picker"),
components: {
TPopup: Popup
},
props: props,
setup: function setup(props2) {
var colorPickerClass = usePrefixClass("color-picker");
var panelRect = ref();
var hueSliderRect = ref();
var alphaSliderRect = ref();
var _toRefs = toRefs(props2),
value = _toRefs.value,
modelValue = _toRefs.modelValue;
var _useVModel = useVModel(value, modelValue, props2.defaultValue, props2.onChange),
_useVModel2 = _slicedToArray(_useVModel, 2),
_useVModel2$ = _useVModel2[0],
innerValue = _useVModel2$ === void 0 ? ref(DEFAULT_COLOR) : _useVModel2$,
setPickerValue = _useVModel2[1];
var saturationThumbStyle = ref({
left: "0",
top: "0"
});
var hueSliderStyle = ref({
left: "0",
color: ""
});
var alphaSliderStyle = ref({
left: "0",
color: ""
});
var sliderInfo = ref({
value: 0
});
var color = new Color(props2.defaultValue || props2.value || DEFAULT_COLOR);
var formatList = ref(getFormatList(props2.format, color));
var innerSwatchList = computed(function () {
return genSwatchList(props2.swatchColors);
});
var renderTNodeJSX = 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 = getFormatList(props2.format, color);
if (isMultiple.value) {
var hue = getSliderThumbStyle({
value: color.hue,
maxValue: HUE_MAX,
isAlpha: false
});
if (hue) {
hueSliderStyle.value = hue;
}
var alpha = getSliderThumbStyle({
value: color.alpha * 100,
maxValue: 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: getColorObject(color)
});
};
var clickSwatch = function clickSwatch(swatch) {
color.update(swatch);
emitColorChange("preset");
setCoreStyle();
};
var isMultiple = 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: getColorObject(color)
});
setCoreStyle();
};
var handleSaturationDrag = function handleSaturationDrag(e) {
var coordinate = 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 = getCoordinate(e, rect);
var x = coordinate.x;
var maxValue = isAlpha ? ALPHA_MAX : 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 || DEFAULT_COLOR;
color.update(result);
};
var init = function init() {
updateColor();
setCoreStyle();
};
onMounted(function () {
init();
});
return function () {
var _alphaSliderStyle$val;
var type = props2.type,
format = props2.format,
enableAlpha = props2.enableAlpha;
renderTNodeJSX("header");
renderTNodeJSX("footer");
var inner = createVNode("div", {
"class": "".concat(colorPickerClass.value, "__panel")
}, [createVNode("div", {
"class": "".concat(colorPickerClass.value, "__body ").concat(colorPickerClass.value, "__body--").concat(type)
}, [isMultiple.value && 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");
}
}, [createVNode("div", {
"class": "".concat(colorPickerClass.value, "__thumb"),
"style": saturationThumbStyle.value
}, null)]), isMultiple.value && createVNode("div", {
"class": "".concat(colorPickerClass.value, "__sliders-wrapper")
}, [createVNode("div", {
"class": "".concat(colorPickerClass.value, "__sliders")
}, [createVNode("div", {
"class": "".concat(colorPickerClass.value, "__slider-wrapper ").concat(colorPickerClass.value, "__slider-wrapper--hue-type")
}, [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");
}
}, [createVNode("div", {
"class": "".concat(colorPickerClass.value, "__rail")
}, null), createVNode("div", {
"class": "".concat(colorPickerClass.value, "__thumb"),
"style": hueSliderStyle.value
}, null)])]), enableAlpha && createVNode("div", {
"class": "".concat(colorPickerClass.value, "__slider-wrapper ").concat(colorPickerClass.value, "__slider-wrapper--alpha-type")
}, [createVNode("div", {
"class": "".concat(colorPickerClass.value, "__slider-padding ")
}, null), 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");
}
}, [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), createVNode("div", {
"class": "".concat(colorPickerClass.value, "__thumb"),
"style": alphaSliderStyle.value
}, null)])])])]), isMultiple.value && createVNode("div", {
"class": "".concat(colorPickerClass.value, "__format")
}, [createVNode("div", {
"class": "".concat(colorPickerClass.value, "__format-item ").concat(colorPickerClass.value, "__format-item--first")
}, [format]), createVNode("div", {
"class": "".concat(colorPickerClass.value, "__format-item ").concat(colorPickerClass.value, "__format-item--second")
}, [createVNode("div", {
"class": "".concat(colorPickerClass.value, "__format-inputs")
}, [formatList.value.map(function (formatItem, formatIndex) {
return 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 && createVNode("div", {
"class": "".concat(colorPickerClass.value, "__swatches-wrap")
}, [createVNode("div", {
"class": "".concat(colorPickerClass.value, "__swatches")
}, [isMultiple.value && createVNode("div", {
"class": "".concat(colorPickerClass.value, "__swatches-title")
}, ["\u7CFB\u7EDF\u9884\u8BBE\u8272\u5F69"]), createVNode("div", {
"class": "".concat(colorPickerClass.value, "__swatches-items")
}, [innerSwatchList.value.map(function (swatch) {
return createVNode("div", {
"class": "".concat(colorPickerClass.value, "__swatches-item"),
"key": swatch,
"onClick": function onClick() {
return clickSwatch(swatch);
}
}, [createVNode("div", {
"class": "".concat(colorPickerClass.value, "__swatches-inner"),
"style": {
backgroundColor: swatch
}
}, null)]);
})])])])])]);
return inner;
};
}
});
export { _ColorPicker as default };
//# sourceMappingURL=color-picker.js.map