npm - @funcho/ui - Versions diffs - 1.0.0 → 1.1.1 - Mend

@funcho/ui 1.0.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3505) hide show

package/dist/cjs/node_modules/.pnpm/element-plus@2.13.5_patch_hash_415fe9eaeb4c26121ef1304c7dfbfaa75441fcd0d7ca1a8beb1acd12_87ac520f28bb40f5a8b03aa48269c150/node_modules/element-plus/es/components/color-picker-panel/src/components/hue-slider.vue_vue_type_script_setup_true_lang.js ADDED Viewed

@@ -0,0 +1,80 @@
+'use strict';
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const index = require('../../../../hooks/use-locale/index.js');
+const slider = require('../props/slider.js');
+const useSlider = require('../composables/use-slider.js');
+const vue = require('vue');
+//#region ../../packages/components/color-picker-panel/src/components/hue-slider.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"aria-label",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-orientation",
+	"tabindex",
+	"aria-disabled"
+];
+const minValue = 0;
+const maxValue = 360;
+var hue_slider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+	name: "ElColorHueSlider",
+	__name: "hue-slider",
+	props: slider.hueSliderProps,
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const { currentValue, bar, thumb, handleDrag, handleClick, handleKeydown } = useSlider.useSlider(props, {
+			key: "hue",
+			minValue,
+			maxValue
+		});
+		const { rootKls, barKls, thumbKls, thumbStyle, thumbTop, update } = useSlider.useSliderDOM(props, {
+			namespace: "color-hue-slider",
+			maxValue,
+			currentValue,
+			bar,
+			thumb,
+			handleDrag
+		});
+		const { t } = index.useLocale();
+		const ariaLabel = vue.computed(() => t("el.colorpicker.hueLabel"));
+		const ariaValuetext = vue.computed(() => {
+			return t("el.colorpicker.hueDescription", {
+				hue: currentValue.value,
+				color: props.color.value
+			});
+		});
+		__expose({
+			bar,
+			thumb,
+			thumbTop,
+			update
+		});
+		return (_ctx, _cache) => {
+			return vue.openBlock(), vue.createElementBlock("div", { class: vue.normalizeClass(vue.unref(rootKls)) }, [vue.createElementVNode("div", {
+				ref_key: "bar",
+				ref: bar,
+				class: vue.normalizeClass(vue.unref(barKls)),
+				onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(handleClick) && vue.unref(handleClick)(...args))
+			}, null, 2), vue.createElementVNode("div", {
+				ref_key: "thumb",
+				ref: thumb,
+				class: vue.normalizeClass(vue.unref(thumbKls)),
+				style: vue.normalizeStyle(vue.unref(thumbStyle)),
+				"aria-label": ariaLabel.value,
+				"aria-valuenow": vue.unref(currentValue),
+				"aria-valuetext": ariaValuetext.value,
+				"aria-orientation": __props.vertical ? "vertical" : "horizontal",
+				"aria-valuemin": minValue,
+				"aria-valuemax": maxValue,
+				role: "slider",
+				tabindex: __props.disabled ? void 0 : 0,
+				"aria-disabled": __props.disabled,
+				onKeydown: _cache[1] || (_cache[1] = (...args) => vue.unref(handleKeydown) && vue.unref(handleKeydown)(...args))
+			}, null, 46, _hoisted_1)], 2);
+		};
+	}
+});
+exports.default = hue_slider_vue_vue_type_script_setup_true_lang_default;

@@ -0,0 +1,10 @@
+'use strict';
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const predefine_vue_vue_type_script_setup_true_lang = require('./predefine.vue_vue_type_script_setup_true_lang.js');
+//#region ../../packages/components/color-picker-panel/src/components/predefine.vue
+var predefine_default = predefine_vue_vue_type_script_setup_true_lang.default;
+exports.default = predefine_default;

package/dist/cjs/node_modules/.pnpm/element-plus@2.13.5_patch_hash_415fe9eaeb4c26121ef1304c7dfbfaa75441fcd0d7ca1a8beb1acd12_87ac520f28bb40f5a8b03aa48269c150/node_modules/element-plus/es/components/color-picker-panel/src/components/predefine.vue_vue_type_script_setup_true_lang.js ADDED Viewed

@@ -0,0 +1,43 @@
+'use strict';
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const index = require('../../../../hooks/use-locale/index.js');
+const predefine = require('../props/predefine.js');
+const usePredefine = require('../composables/use-predefine.js');
+const vue = require('vue');
+//#region ../../packages/components/color-picker-panel/src/components/predefine.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"disabled",
+	"aria-label",
+	"onClick"
+];
+var predefine_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+	name: "ElColorPredefine",
+	__name: "predefine",
+	props: predefine.predefineProps,
+	setup(__props) {
+		const props = __props;
+		const { rgbaColors, handleSelect } = usePredefine.usePredefine(props);
+		const { rootKls, colorsKls, colorSelectorKls } = usePredefine.usePredefineDOM(props);
+		const { t } = index.useLocale();
+		const ariaLabel = (value) => {
+			return t("el.colorpicker.predefineDescription", { value });
+		};
+		return (_ctx, _cache) => {
+			return vue.openBlock(), vue.createElementBlock("div", { class: vue.normalizeClass(vue.unref(rootKls)) }, [vue.createElementVNode("div", { class: vue.normalizeClass(vue.unref(colorsKls)) }, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(rgbaColors), (item, index) => {
+				return vue.openBlock(), vue.createElementBlock("button", {
+					key: __props.colors[index],
+					type: "button",
+					disabled: __props.disabled,
+					"aria-label": ariaLabel(item.value),
+					class: vue.normalizeClass(vue.unref(colorSelectorKls)(item)),
+					onClick: ($event) => vue.unref(handleSelect)(index)
+				}, [vue.createElementVNode("div", { style: vue.normalizeStyle({ backgroundColor: item.value }) }, null, 4)], 10, _hoisted_1);
+			}), 128))], 2)], 2);
+		};
+	}
+});
+exports.default = predefine_vue_vue_type_script_setup_true_lang_default;

@@ -0,0 +1,10 @@
+'use strict';
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const svPanel_vue_vue_type_script_setup_true_lang = require('./sv-panel.vue_vue_type_script_setup_true_lang.js');
+//#region ../../packages/components/color-picker-panel/src/components/sv-panel.vue
+var sv_panel_default = svPanel_vue_vue_type_script_setup_true_lang.default;
+exports.default = sv_panel_default;

package/dist/cjs/node_modules/.pnpm/element-plus@2.13.5_patch_hash_415fe9eaeb4c26121ef1304c7dfbfaa75441fcd0d7ca1a8beb1acd12_87ac520f28bb40f5a8b03aa48269c150/node_modules/element-plus/es/components/color-picker-panel/src/components/sv-panel.vue_vue_type_script_setup_true_lang.js ADDED Viewed

@@ -0,0 +1,65 @@
+'use strict';
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+const index = require('../../../../hooks/use-locale/index.js');
+const svPanel = require('../props/sv-panel.js');
+const useSvPanel = require('../composables/use-sv-panel.js');
+const vue = require('vue');
+//#region ../../packages/components/color-picker-panel/src/components/sv-panel.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"tabindex",
+	"aria-disabled",
+	"aria-label",
+	"aria-valuenow",
+	"aria-valuetext"
+];
+var sv_panel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+	name: "ElSvPanel",
+	__name: "sv-panel",
+	props: svPanel.svPanelProps,
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const { cursorRef, cursorTop, cursorLeft, background, saturation, brightness, handleClick, handleDrag, handleKeydown } = useSvPanel.useSvPanel(props);
+		const { rootKls, cursorKls, rootStyle, cursorStyle, update } = useSvPanel.useSvPanelDOM(props, {
+			cursorTop,
+			cursorLeft,
+			background,
+			handleDrag
+		});
+		const { t } = index.useLocale();
+		const ariaLabel = vue.computed(() => t("el.colorpicker.svLabel"));
+		const ariaValuetext = vue.computed(() => {
+			return t("el.colorpicker.svDescription", {
+				saturation: saturation.value,
+				brightness: brightness.value,
+				color: props.color.value
+			});
+		});
+		__expose({ update });
+		return (_ctx, _cache) => {
+			return vue.openBlock(), vue.createElementBlock("div", {
+				class: vue.normalizeClass(vue.unref(rootKls)),
+				style: vue.normalizeStyle(vue.unref(rootStyle)),
+				onClick: _cache[1] || (_cache[1] = (...args) => vue.unref(handleClick) && vue.unref(handleClick)(...args))
+			}, [vue.createElementVNode("div", {
+				ref_key: "cursorRef",
+				ref: cursorRef,
+				class: vue.normalizeClass(vue.unref(cursorKls)),
+				style: vue.normalizeStyle(vue.unref(cursorStyle)),
+				tabindex: __props.disabled ? void 0 : 0,
+				"aria-disabled": __props.disabled,
+				role: "slider",
+				"aria-valuemin": "0,0",
+				"aria-valuemax": "100,100",
+				"aria-label": ariaLabel.value,
+				"aria-valuenow": `${vue.unref(saturation)},${vue.unref(brightness)}`,
+				"aria-valuetext": ariaValuetext.value,
+				onKeydown: _cache[0] || (_cache[0] = (...args) => vue.unref(handleKeydown) && vue.unref(handleKeydown)(...args))
+			}, null, 46, _hoisted_1)], 6);
+		};
+	}
+});
+exports.default = sv_panel_vue_vue_type_script_setup_true_lang_default;

@@ -0,0 +1,25 @@
+'use strict';
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const event = require('../../../../constants/event.js');
+const color = require('../utils/color.js');
+const vue = require('vue');
+//#region ../../packages/components/color-picker-panel/src/composables/use-common-color.ts
+const useCommonColor = (props, emit) => {
+	const color$1 = vue.reactive(new color.default({
+		enableAlpha: props.showAlpha,
+		format: props.colorFormat || "",
+		value: props.modelValue
+	}));
+	vue.watch(() => [props.colorFormat, props.showAlpha], () => {
+		color$1.enableAlpha = props.showAlpha;
+		color$1.format = props.colorFormat || color$1.format;
+		color$1.doOnChange();
+		emit(event.UPDATE_MODEL_EVENT, color$1.value);
+	});
+	return { color: color$1 };
+};
+exports.useCommonColor = useCommonColor;

@@ -0,0 +1,63 @@
+'use strict';
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const index = require('../../../../hooks/use-namespace/index.js');
+const colorPickerPanel = require('../color-picker-panel.js');
+const color = require('../utils/color.js');
+const vue = require('vue');
+//#region ../../packages/components/color-picker-panel/src/composables/use-predefine.ts
+const usePredefine = (props) => {
+	const { currentColor } = vue.inject(colorPickerPanel.colorPickerPanelContextKey);
+	const rgbaColors = vue.ref(parseColors(props.colors, props.color));
+	vue.watch(() => currentColor.value, (val) => {
+		const color$1 = new color.default({
+			value: val,
+			enableAlpha: props.enableAlpha
+		});
+		rgbaColors.value.forEach((item) => {
+			item.selected = color$1.compare(item);
+		});
+	});
+	vue.watchEffect(() => {
+		rgbaColors.value = parseColors(props.colors, props.color);
+	});
+	function handleSelect(index) {
+		props.color.fromString(props.colors[index]);
+	}
+	function parseColors(colors, color$1) {
+		return colors.map((value) => {
+			const c = new color.default({
+				value,
+				enableAlpha: props.enableAlpha
+			});
+			c.selected = c.compare(color$1);
+			return c;
+		});
+	}
+	return {
+		rgbaColors,
+		handleSelect
+	};
+};
+const usePredefineDOM = (props) => {
+	const ns = index.useNamespace("color-predefine");
+	const rootKls = vue.computed(() => [ns.b(), ns.is("disabled", props.disabled)]);
+	const colorsKls = vue.computed(() => ns.e("colors"));
+	function colorSelectorKls(item) {
+		return [
+			ns.e("color-selector"),
+			ns.is("alpha", item.get("alpha") < 100),
+			{ selected: item.selected }
+		];
+	}
+	return {
+		rootKls,
+		colorsKls,
+		colorSelectorKls
+	};
+};
+exports.usePredefine = usePredefine;
+exports.usePredefineDOM = usePredefineDOM;

@@ -0,0 +1,156 @@
+'use strict';
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const aria = require('../../../../constants/aria.js');
+const event = require('../../../../utils/dom/event.js');
+const position = require('../../../../utils/dom/position.js');
+const style = require('../../../../utils/dom/style.js');
+const index = require('../../../../hooks/use-namespace/index.js');
+const draggable = require('../utils/draggable.js');
+const vue = require('vue');
+//#region ../../packages/components/color-picker-panel/src/composables/use-slider.ts
+const useSlider = (props, { key, minValue, maxValue }) => {
+	const instance = vue.getCurrentInstance();
+	const thumb = vue.shallowRef();
+	const bar = vue.shallowRef();
+	const currentValue = vue.computed(() => props.color.get(key));
+	function handleClick(event) {
+		if (props.disabled) return;
+		if (event.target !== thumb.value) handleDrag(event);
+		thumb.value?.focus();
+	}
+	function handleDrag(event) {
+		if (!bar.value || !thumb.value || props.disabled) return;
+		const rect = instance.vnode.el.getBoundingClientRect();
+		const { clientX, clientY } = position.getClientXY(event);
+		let value;
+		if (!props.vertical) {
+			let left = clientX - rect.left;
+			left = Math.max(thumb.value.offsetWidth / 2, left);
+			left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
+			value = Math.round((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * maxValue);
+		} else {
+			let top = clientY - rect.top;
+			top = Math.max(thumb.value.offsetHeight / 2, top);
+			top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
+			value = Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * maxValue);
+		}
+		props.color.set(key, value);
+	}
+	function handleKeydown(event$1) {
+		if (props.disabled) return;
+		const { shiftKey } = event$1;
+		const code = event.getEventCode(event$1);
+		const step = shiftKey ? 10 : 1;
+		const reverse = key === "hue" ? -1 : 1;
+		let isPreventDefault = true;
+		switch (code) {
+			case aria.EVENT_CODE.left:
+			case aria.EVENT_CODE.down:
+				incrementPosition(-step * reverse);
+				break;
+			case aria.EVENT_CODE.right:
+			case aria.EVENT_CODE.up:
+				incrementPosition(step * reverse);
+				break;
+			case aria.EVENT_CODE.home:
+				props.color.set(key, key === "hue" ? maxValue : minValue);
+				break;
+			case aria.EVENT_CODE.end:
+				props.color.set(key, key === "hue" ? minValue : maxValue);
+				break;
+			case aria.EVENT_CODE.pageDown:
+				incrementPosition(-4 * reverse);
+				break;
+			case aria.EVENT_CODE.pageUp:
+				incrementPosition(4 * reverse);
+				break;
+			default:
+				isPreventDefault = false;
+				break;
+		}
+		isPreventDefault && event$1.preventDefault();
+	}
+	function incrementPosition(step) {
+		let next = currentValue.value + step;
+		next = next < minValue ? minValue : next > maxValue ? maxValue : next;
+		props.color.set(key, next);
+	}
+	return {
+		thumb,
+		bar,
+		currentValue,
+		handleDrag,
+		handleClick,
+		handleKeydown
+	};
+};
+const useSliderDOM = (props, { namespace, maxValue, bar, thumb, currentValue, handleDrag, getBackground }) => {
+	const instance = vue.getCurrentInstance();
+	const ns = index.useNamespace(namespace);
+	const thumbLeft = vue.ref(0);
+	const thumbTop = vue.ref(0);
+	const background = vue.ref();
+	function getThumbLeft() {
+		if (!thumb.value) return 0;
+		if (props.vertical) return 0;
+		const el = instance.vnode.el;
+		const value = currentValue.value;
+		if (!el) return 0;
+		return Math.round(value * (el.offsetWidth - thumb.value.offsetWidth / 2) / maxValue);
+	}
+	function getThumbTop() {
+		if (!thumb.value) return 0;
+		const el = instance.vnode.el;
+		if (!props.vertical) return 0;
+		const value = currentValue.value;
+		if (!el) return 0;
+		return Math.round(value * (el.offsetHeight - thumb.value.offsetHeight / 2) / maxValue);
+	}
+	function update() {
+		thumbLeft.value = getThumbLeft();
+		thumbTop.value = getThumbTop();
+		background.value = getBackground?.();
+	}
+	vue.onMounted(() => {
+		if (!bar.value || !thumb.value) return;
+		const dragConfig = {
+			drag: (event) => {
+				handleDrag(event);
+			},
+			end: (event) => {
+				handleDrag(event);
+			}
+		};
+		draggable.draggable(bar.value, dragConfig);
+		draggable.draggable(thumb.value, dragConfig);
+		update();
+	});
+	vue.watch(currentValue, () => update());
+	vue.watch(() => props.color.value, () => update());
+	const rootKls = vue.computed(() => [
+		ns.b(),
+		ns.is("vertical", props.vertical),
+		ns.is("disabled", props.disabled)
+	]);
+	const barKls = vue.computed(() => ns.e("bar"));
+	const thumbKls = vue.computed(() => ns.e("thumb"));
+	return {
+		rootKls,
+		barKls,
+		barStyle: vue.computed(() => ({ background: background.value })),
+		thumbKls,
+		thumbStyle: vue.computed(() => ({
+			left: style.addUnit(thumbLeft.value),
+			top: style.addUnit(thumbTop.value)
+		})),
+		thumbLeft,
+		thumbTop,
+		update
+	};
+};
+exports.useSlider = useSlider;
+exports.useSliderDOM = useSliderDOM;

@@ -0,0 +1,133 @@
+'use strict';
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const aria = require('../../../../constants/aria.js');
+const event = require('../../../../utils/dom/event.js');
+const position = require('../../../../utils/dom/position.js');
+const style = require('../../../../utils/dom/style.js');
+const index = require('../../../../hooks/use-namespace/index.js');
+const draggable = require('../utils/draggable.js');
+const vue = require('vue');
+//#region ../../packages/components/color-picker-panel/src/composables/use-sv-panel.ts
+const useSvPanel = (props) => {
+	const instance = vue.getCurrentInstance();
+	const cursorRef = vue.ref();
+	const cursorTop = vue.ref(0);
+	const cursorLeft = vue.ref(0);
+	const background = vue.ref("hsl(0, 100%, 50%)");
+	const saturation = vue.computed(() => props.color.get("saturation"));
+	const brightness = vue.computed(() => props.color.get("value"));
+	const hue = vue.computed(() => props.color.get("hue"));
+	function handleClick(event) {
+		if (props.disabled) return;
+		if (event.target !== cursorRef.value) handleDrag(event);
+		cursorRef.value?.focus({ preventScroll: true });
+	}
+	function handleDrag(event) {
+		if (props.disabled) return;
+		const rect = instance.vnode.el.getBoundingClientRect();
+		const { clientX, clientY } = position.getClientXY(event);
+		let left = clientX - rect.left;
+		let top = clientY - rect.top;
+		left = Math.max(0, left);
+		left = Math.min(left, rect.width);
+		top = Math.max(0, top);
+		top = Math.min(top, rect.height);
+		cursorLeft.value = left;
+		cursorTop.value = top;
+		props.color.set({
+			saturation: left / rect.width * 100,
+			value: 100 - top / rect.height * 100
+		});
+	}
+	function handleKeydown(event$1) {
+		if (props.disabled) return;
+		const { shiftKey } = event$1;
+		const code = event.getEventCode(event$1);
+		const step = shiftKey ? 10 : 1;
+		let isPreventDefault = true;
+		switch (code) {
+			case aria.EVENT_CODE.left:
+				incrementSaturation(-step);
+				break;
+			case aria.EVENT_CODE.right:
+				incrementSaturation(step);
+				break;
+			case aria.EVENT_CODE.up:
+				incrementBrightness(step);
+				break;
+			case aria.EVENT_CODE.down:
+				incrementBrightness(-step);
+				break;
+			default:
+				isPreventDefault = false;
+				break;
+		}
+		isPreventDefault && event$1.preventDefault();
+	}
+	function incrementSaturation(step) {
+		let next = saturation.value + step;
+		next = next < 0 ? 0 : next > 100 ? 100 : next;
+		props.color.set("saturation", next);
+	}
+	function incrementBrightness(step) {
+		let next = brightness.value + step;
+		next = next < 0 ? 0 : next > 100 ? 100 : next;
+		props.color.set("value", next);
+	}
+	return {
+		cursorRef,
+		cursorTop,
+		cursorLeft,
+		background,
+		saturation,
+		brightness,
+		hue,
+		handleClick,
+		handleDrag,
+		handleKeydown
+	};
+};
+const useSvPanelDOM = (props, { cursorTop, cursorLeft, background, handleDrag }) => {
+	const instance = vue.getCurrentInstance();
+	const ns = index.useNamespace("color-svpanel");
+	function update() {
+		const saturation = props.color.get("saturation");
+		const brightness = props.color.get("value");
+		const { clientWidth: width, clientHeight: height } = instance.vnode.el;
+		cursorLeft.value = saturation * width / 100;
+		cursorTop.value = (100 - brightness) * height / 100;
+		background.value = `hsl(${props.color.get("hue")}, 100%, 50%)`;
+	}
+	vue.onMounted(() => {
+		draggable.draggable(instance.vnode.el, {
+			drag: (event) => {
+				handleDrag(event);
+			},
+			end: (event) => {
+				handleDrag(event);
+			}
+		});
+		update();
+	});
+	vue.watch([
+		() => props.color.get("hue"),
+		() => props.color.get("value"),
+		() => props.color.value
+	], () => update());
+	return {
+		rootKls: vue.computed(() => ns.b()),
+		cursorKls: vue.computed(() => ns.e("cursor")),
+		rootStyle: vue.computed(() => ({ backgroundColor: background.value })),
+		cursorStyle: vue.computed(() => ({
+			top: style.addUnit(cursorTop.value),
+			left: style.addUnit(cursorLeft.value)
+		})),
+		update
+	};
+};
+exports.useSvPanel = useSvPanel;
+exports.useSvPanelDOM = useSvPanelDOM;

@@ -0,0 +1,27 @@
+'use strict';
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const runtime = require('../../../../utils/vue/props/runtime.js');
+//#region ../../packages/components/color-picker-panel/src/props/predefine.ts
+/**
+* @deprecated Removed after 3.0.0, Use `PredefineProps` instead.
+*/
+const predefineProps = runtime.buildProps({
+	colors: {
+		type: runtime.definePropType(Array),
+		required: true
+	},
+	color: {
+		type: runtime.definePropType(Object),
+		required: true
+	},
+	enableAlpha: {
+		type: Boolean,
+		required: true
+	},
+	disabled: Boolean
+});
+exports.predefineProps = predefineProps;

@@ -0,0 +1,25 @@
+'use strict';
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const runtime = require('../../../../utils/vue/props/runtime.js');
+//#region ../../packages/components/color-picker-panel/src/props/slider.ts
+/**
+* @deprecated Removed after 3.0.0, Use `AlphaSliderProps` instead.
+*/
+const alphaSliderProps = runtime.buildProps({
+	color: {
+		type: runtime.definePropType(Object),
+		required: true
+	},
+	vertical: Boolean,
+	disabled: Boolean
+});
+/**
+* @deprecated Removed after 3.0.0, Use `HueSliderProps` instead.
+*/
+const hueSliderProps = alphaSliderProps;
+exports.alphaSliderProps = alphaSliderProps;
+exports.hueSliderProps = hueSliderProps;

@@ -0,0 +1,19 @@
+'use strict';
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const runtime = require('../../../../utils/vue/props/runtime.js');
+//#region ../../packages/components/color-picker-panel/src/props/sv-panel.ts
+/**
+* @deprecated Removed after 3.0.0, Use `SvPanelProps` instead.
+*/
+const svPanelProps = runtime.buildProps({
+	color: {
+		type: runtime.definePropType(Object),
+		required: true
+	},
+	disabled: Boolean
+});
+exports.svPanelProps = svPanelProps;