@zboson/ui 0.0.0-stage → 0.0.2

package/dist/date-picker/style/variants.js

@@ -0,0 +1,31 @@
+import { genBorderlessStyle, genFilledStyle, genOutlinedStyle, genUnderlinedStyle } from "../../input/style/variants.js";
+import { unit } from "@zboson/cssinjs";
+//#region src/date-picker/style/variants.ts
+const genVariantsStyle = (token) => {
+	const { componentCls } = token;
+	return { [componentCls]: [{
+		...genOutlinedStyle(token),
+		...genUnderlinedStyle(token),
+		...genFilledStyle(token),
+		...genBorderlessStyle(token)
+	}, {
+		"&-outlined": { [`&${componentCls}-multiple ${componentCls}-selection-item`]: {
+			background: token.multipleItemBg,
+			border: `${unit(token.lineWidth)} ${token.lineType} ${token.multipleItemBorderColor}`
+		} },
+		"&-filled": { [`&${componentCls}-multiple ${componentCls}-selection-item`]: {
+			background: token.colorBgContainer,
+			border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`
+		} },
+		"&-borderless": { [`&${componentCls}-multiple ${componentCls}-selection-item`]: {
+			background: token.multipleItemBg,
+			border: `${unit(token.lineWidth)} ${token.lineType} ${token.multipleItemBorderColor}`
+		} },
+		"&-underlined": { [`&${componentCls}-multiple ${componentCls}-selection-item`]: {
+			background: token.multipleItemBg,
+			border: `${unit(token.lineWidth)} ${token.lineType} ${token.multipleItemBorderColor}`
+		} }
+	}] };
+};
+//#endregion
+export { genVariantsStyle as default };

package/dist/date-picker/util.d.ts

@@ -0,0 +1,19 @@
+import { RenderNodeFn, VueNode } from "../_util/type.js";
+import "./generatePicker/index.js";
+import { PickerLocale, PickerProps as PickerProps$1 } from "./generatePicker/interface.js";
+import { AllowClear } from "../_util/hooks/useAllowClear.js";
+import { PickerMode } from "@v-c/picker";
+//#region src/date-picker/util.d.ts
+declare function getPlaceholder(locale: PickerLocale, picker?: PickerMode, customizePlaceholder?: string): string;
+declare function getRangePlaceholder(locale: PickerLocale, picker?: PickerMode, customizePlaceholder?: [string, string]): [string, string] | undefined;
+declare function useIcons(props: Pick<PickerProps$1, 'allowClear' | 'clearIcon' | 'removeIcon'>, prefixCls: string, context?: {
+  allowClear?: AllowClear;
+  clearIcon?: VueNode;
+}): readonly [false, string | number | boolean | import("vue/jsx-runtime").JSX.Element | RenderNodeFn<any[]> | null] | readonly [{
+  readonly disabled?: boolean;
+  readonly tabIndex?: number;
+  readonly label?: string;
+  readonly clearIcon: any;
+}, string | number | boolean | import("vue/jsx-runtime").JSX.Element | RenderNodeFn<any[]> | null];
+//#endregion
+export { getPlaceholder, getRangePlaceholder, useIcons };

package/dist/date-picker/util.js

@@ -0,0 +1,44 @@
+import useIcons$1 from "../select/useIcons.js";
+import useAllowClear from "../_util/hooks/useAllowClear.js";
+import { cloneVNode, isVNode } from "vue";
+//#region src/date-picker/util.ts
+function getPlaceholder(locale, picker, customizePlaceholder) {
+	if (customizePlaceholder !== void 0) return customizePlaceholder;
+	if (picker === "year" && locale.lang.yearPlaceholder) return locale.lang.yearPlaceholder;
+	if (picker === "quarter" && locale.lang.quarterPlaceholder) return locale.lang.quarterPlaceholder;
+	if (picker === "month" && locale.lang.monthPlaceholder) return locale.lang.monthPlaceholder;
+	if (picker === "week" && locale.lang.weekPlaceholder) return locale.lang.weekPlaceholder;
+	if (picker === "time" && locale.timePickerLocale.placeholder) return locale.timePickerLocale.placeholder;
+	return locale.lang.placeholder;
+}
+function getRangePlaceholder(locale, picker, customizePlaceholder) {
+	if (customizePlaceholder !== void 0) return customizePlaceholder;
+	if (picker === "year" && locale.lang.rangeYearPlaceholder) return locale.lang.rangeYearPlaceholder;
+	if (picker === "quarter" && locale.lang.rangeQuarterPlaceholder) return locale.lang.rangeQuarterPlaceholder;
+	if (picker === "month" && locale.lang.rangeMonthPlaceholder) return locale.lang.rangeMonthPlaceholder;
+	if (picker === "week" && locale.lang.rangeWeekPlaceholder) return locale.lang.rangeWeekPlaceholder;
+	if (picker === "time" && locale.timePickerLocale.rangePlaceholder) return locale.timePickerLocale.rangePlaceholder;
+	return locale.lang.rangePlaceholder;
+}
+function useIcons(props, prefixCls, context) {
+	const { removeIcon } = useIcons$1({
+		...props,
+		prefixCls,
+		componentName: "DatePicker"
+	});
+	const mergedAllowClear = useAllowClear({
+		allowClear: props.allowClear,
+		clearIcon: props.clearIcon,
+		contextAllowClear: context?.allowClear,
+		contextClearIcon: context?.clearIcon,
+		defaultAllowClear: true
+	});
+	if (!mergedAllowClear) return [false, removeIcon];
+	const { clearIcon: mergedClearIcon, ...rest } = mergedAllowClear;
+	return [{
+		clearIcon: isVNode(mergedClearIcon) ? cloneVNode(mergedClearIcon) : mergedClearIcon,
+		...rest
+	}, removeIcon];
+}
+//#endregion
+export { getPlaceholder, getRangePlaceholder, useIcons };

package/dist/date-range/DateRange.d.ts

@@ -0,0 +1,63 @@
+import { VueNode } from "../_util/type.js";
+import { SizeType } from "../config-provider/SizeContext.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import { SlotsType } from "vue";
+import { Dayjs } from "dayjs";
+//#region src/date-range/DateRange.d.ts
+type DateRangeSize = SizeType | 'default';
+interface DateRangeOption {
+  text?: VueNode;
+  value: string | number;
+}
+interface DateRangeProps extends ComponentBaseProps, DateRangeEmitsProps {
+  /** Selected range (`v-model:value`). */
+  value?: Dayjs[] | null;
+  size?: DateRangeSize;
+  /** Disabled leading label rendered as an addon button. */
+  addon?: string;
+  /** Options for the selector rendered before the range picker. */
+  selectOptions?: DateRangeOption[] | null;
+  /** Selected option value (`v-model:selectValue`). */
+  selectValue?: string | number;
+  /** Selected option text (`v-model:selectText`). */
+  selectText?: string;
+  /** Reserved prop from the original component; not consumed. */
+  preset?: string | null;
+  /** Range format, also used for `begin` / `end`. */
+  format?: string;
+  /** When `>= 0`, initialize the range to the last `rewind` days. */
+  rewind?: number;
+  /** When `>= 0`, initialize the range to the next `future` days. */
+  future?: number;
+  /** Custom preset ranges, replacing the built-in ones. */
+  ranges?: Record<string, [Dayjs, Dayjs]>;
+  /** Show picked ranges in a dropdown for quick reuse. */
+  showHistory?: boolean;
+  /** Start with an empty range. */
+  blank?: boolean;
+  /** Emit `begin` / `end` as full-day timestamps. */
+  withTime?: boolean;
+  /** Range start (`v-model:begin`). */
+  begin?: string;
+  /** Range end (`v-model:end`). */
+  end?: string;
+}
+interface DateRangeEmits {
+  'update:value': (value: Dayjs[] | null) => void;
+  'update:begin': (value: string | null) => void;
+  'update:end': (value: string | null) => void;
+  'update:selectValue': (value: string | number) => void;
+  'update:selectText': (text: string) => void;
+  'change': (value: Dayjs[] | null, dateStrings?: [string, string]) => void;
+}
+interface DateRangeEmitsProps {
+  'onUpdate:value'?: DateRangeEmits['update:value'];
+  'onUpdate:begin'?: DateRangeEmits['update:begin'];
+  'onUpdate:end'?: DateRangeEmits['update:end'];
+  'onUpdate:selectValue'?: DateRangeEmits['update:selectValue'];
+  'onUpdate:selectText'?: DateRangeEmits['update:selectText'];
+  onChange?: DateRangeEmits['change'];
+}
+declare const DateRange: import("vue").DefineSetupFnComponent<DateRangeProps, DateRangeEmits, SlotsType<Record<string, never>>, DateRangeProps, import("vue").PublicProps>;
+//#endregion
+export { DateRangeEmits, DateRangeEmitsProps, DateRangeOption, DateRangeProps, DateRangeSize, DateRange as default };

package/dist/date-range/DateRange.js

@@ -0,0 +1,306 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass } from "../_util/hooks/useMergeSemantic.js";
+import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
+import button_default from "../button/index.js";
+import Select from "../select/index.js";
+import Dropdown from "../dropdown/index.js";
+import { SpaceCompact } from "../space/index.js";
+import DatePicker from "../date-picker/index.js";
+import style_default from "./style/index.js";
+import { computed, createVNode, defineComponent, mergeProps, ref, watch } from "vue";
+import { clsx } from "@v-c/util";
+import { DeleteTwoTone, HistoryOutlined, ThunderboltTwoTone } from "@zboson/icons";
+import dayjs from "dayjs";
+//#region src/date-range/DateRange.tsx
+const DEFAULT_FORMAT = "YYYY-MM-DD";
+const DateRange = /* @__PURE__ */ defineComponent((props, { attrs, emit }) => {
+	const { direction, class: contextClassName, style: contextStyle, prefixCls } = useComponentBaseConfig("dateRange", props, [], "date-range");
+	const [hashId, cssVarCls] = style_default(prefixCls, useCSSVarCls(prefixCls));
+	const current = ref({
+		begin: props.begin ?? "",
+		end: props.end ?? ""
+	});
+	const history = ref([]);
+	const mergedSize = computed(() => props.size === "default" ? void 0 : props.size);
+	const mergedFormat = computed(() => props.format ?? DEFAULT_FORMAT);
+	const defaultValue = computed(() => {
+		const rewind = props.rewind ?? -1;
+		const future = props.future ?? -1;
+		if (rewind > 0) return [dayjs().subtract(rewind, "day"), dayjs()];
+		if (future > 0) return [dayjs(), dayjs().add(future, "day")];
+		if (props.blank) return [];
+		return [dayjs(), dayjs()];
+	});
+	const instantRanges = computed(() => {
+		if ((props.future ?? -1) > 0) return {
+			今日: [dayjs(), dayjs()],
+			月末: [dayjs(), dayjs().endOf("month")],
+			年末: [dayjs(), dayjs().endOf("year")],
+			未来7天: [dayjs(), dayjs().add(7, "day")],
+			未来1月: [dayjs(), dayjs().add(1, "month")],
+			未来3月: [dayjs(), dayjs().add(3, "month")]
+		};
+		return {
+			今日: [dayjs(), dayjs()],
+			本月: [dayjs().startOf("month"), dayjs()],
+			本年: [dayjs().startOf("year"), dayjs()],
+			最近7天: [dayjs().subtract(7, "day"), dayjs()],
+			最近1月: [dayjs().subtract(1, "month"), dayjs()],
+			最近3月: [dayjs().subtract(3, "month"), dayjs()]
+		};
+	});
+	const mergedRanges = computed(() => props.ranges ?? instantRanges.value);
+	const mergedPresets = computed(() => Object.entries(mergedRanges.value).map(([label, value]) => ({
+		label,
+		value
+	})));
+	const mergedSelectValue = computed(() => {
+		const value = props.selectValue;
+		if (value === void 0 || value === null || value === "") return;
+		const option = props.selectOptions?.find((item) => item.value === value);
+		return {
+			value,
+			label: props.selectText || option?.text || String(value)
+		};
+	});
+	function beginOutput(begin) {
+		if (!props.withTime) return begin;
+		return begin ? `${begin} 00:00:00` : null;
+	}
+	function endOutput(end) {
+		if (!props.withTime) return end;
+		return end ? `${end} 23:59:59` : null;
+	}
+	function syncCurrent(value) {
+		const begin = value?.[0]?.format(mergedFormat.value) ?? "";
+		const end = value?.[1]?.format(mergedFormat.value) ?? "";
+		if (begin !== current.value.begin) {
+			current.value.begin = begin;
+			emit("update:begin", beginOutput(begin));
+		}
+		if (end !== current.value.end) {
+			current.value.end = end;
+			emit("update:end", endOutput(end));
+		}
+	}
+	function handleChange(dates, dateStrings) {
+		const begin = dateStrings?.[0] ?? dates?.[0]?.format(mergedFormat.value) ?? "";
+		const end = dateStrings?.[1] ?? dates?.[1]?.format(mergedFormat.value) ?? "";
+		current.value = {
+			begin,
+			end
+		};
+		if (props.showHistory !== false && begin && dates?.[0] && dates?.[1]) history.value = [...history.value, {
+			begin,
+			end,
+			value: [dates[0], dates[1]]
+		}];
+		emit("update:value", dates);
+		emit("update:begin", beginOutput(begin));
+		emit("update:end", endOutput(end));
+		emit("change", dates, dateStrings);
+	}
+	function handleSelectChange(value) {
+		emit("update:selectValue", value?.value ?? "");
+		emit("update:selectText", value?.label == null ? "" : String(value.label));
+	}
+	function removeHistory(index) {
+		history.value = history.value.filter((_item, i) => i !== index);
+	}
+	function handleHistoryClick(info) {
+		const item = history.value[Number(info.key)];
+		if (!item) return;
+		current.value = {
+			begin: item.begin,
+			end: item.end
+		};
+		emit("update:value", item.value);
+		emit("update:begin", beginOutput(item.begin));
+		emit("update:end", endOutput(item.end));
+		emit("change", item.value, [item.begin, item.end]);
+	}
+	const historyItems = computed(() => history.value.map((item, index) => ({
+		key: String(index),
+		label: createVNode("span", { "class": `${prefixCls.value}-history-item` }, [
+			createVNode(ThunderboltTwoTone, {
+				"class": `${prefixCls.value}-history-icon`,
+				"twoToneColor": "#ebdc10"
+			}, null),
+			createVNode("span", null, [
+				item.begin,
+				" ~ ",
+				item.end
+			]),
+			createVNode(DeleteTwoTone, {
+				"class": `${prefixCls.value}-history-icon`,
+				"onClick": (event) => {
+					event.stopPropagation();
+					removeHistory(index);
+				}
+			}, null)
+		])
+	})));
+	watch(() => props.value, (value) => syncCurrent(value), { deep: true });
+	watch(() => props.begin, (value) => {
+		current.value.begin = value ?? "";
+		emit("update:begin", value ?? "");
+	});
+	watch(() => props.end, (value) => {
+		current.value.end = value ?? "";
+		emit("update:end", value ?? "");
+	});
+	if ((props.rewind ?? -1) >= 0 || (props.future ?? -1) >= 0) {
+		const dates = defaultValue.value;
+		const begin = dates[0]?.format(mergedFormat.value) ?? "";
+		const end = dates[1]?.format(mergedFormat.value) ?? "";
+		current.value = {
+			begin,
+			end
+		};
+		emit("update:value", dates.length ? dates : []);
+		emit("update:begin", beginOutput(begin));
+		emit("update:end", endOutput(end));
+		emit("change", dates.length ? dates : []);
+	}
+	return () => {
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		return createVNode(SpaceCompact, mergeProps(restAttrs, {
+			"size": mergedSize.value,
+			"class": clsx(prefixCls.value, contextClassName.value, props.rootClass, className, hashId.value, cssVarCls.value, { [`${prefixCls.value}-rtl`]: direction.value === "rtl" }),
+			"style": {
+				...contextStyle.value,
+				...style
+			}
+		}), { default: () => [
+			props.addon ? createVNode(button_default, {
+				"class": `${prefixCls.value}-addon`,
+				"disabled": true,
+				"size": mergedSize.value,
+				"style": {
+					backgroundColor: "#fafafa",
+					color: "rgba(0, 0, 0, 0.65)"
+				}
+			}, { default: () => [props.addon] }) : null,
+			props.selectOptions?.length ? createVNode(Select, {
+				"class": `${prefixCls.value}-select`,
+				"size": mergedSize.value,
+				"labelInValue": true,
+				"value": mergedSelectValue.value,
+				"options": props.selectOptions.map((item) => ({
+					label: item.text ?? item.value,
+					value: item.value
+				})),
+				"onChange": handleSelectChange
+			}, null) : null,
+			createVNode(DatePicker.RangePicker, {
+				"class": props.selectOptions?.length ? `${prefixCls.value}-picker` : void 0,
+				"value": props.value ?? [],
+				"defaultValue": defaultValue.value,
+				"presets": mergedPresets.value,
+				"size": mergedSize.value,
+				"format": mergedFormat.value,
+				"onChange": handleChange
+			}, null),
+			props.showHistory !== false && history.value.length > 0 ? createVNode(Dropdown, {
+				"placement": "bottomLeft",
+				"classes": { menu: `${prefixCls.value}-history-menu` },
+				"menu": { items: historyItems.value },
+				"onMenuClick": handleHistoryClick
+			}, { default: () => [createVNode(button_default, {
+				"class": `${prefixCls.value}-history-btn`,
+				"size": mergedSize.value,
+				"style": { padding: "0 5px" }
+			}, { default: () => [createVNode(HistoryOutlined, null, null)] })] }) : null
+		] });
+	};
+}, {
+	props: {
+		value: {
+			type: [Array, null],
+			required: false
+		},
+		size: {
+			type: [String, null],
+			required: false
+		},
+		addon: {
+			type: String,
+			required: false
+		},
+		selectOptions: {
+			type: [Array, null],
+			required: false
+		},
+		selectValue: {
+			type: [String, Number],
+			required: false
+		},
+		selectText: {
+			type: String,
+			required: false
+		},
+		preset: {
+			type: [String, null],
+			required: false
+		},
+		format: {
+			type: String,
+			required: false
+		},
+		rewind: {
+			type: Number,
+			required: false
+		},
+		future: {
+			type: Number,
+			required: false
+		},
+		ranges: {
+			type: Object,
+			required: false
+		},
+		showHistory: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		blank: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		withTime: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		begin: {
+			type: String,
+			required: false
+		},
+		end: {
+			type: String,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	},
+	emits: [
+		"update:value",
+		"update:begin",
+		"update:end",
+		"update:selectValue",
+		"update:selectText",
+		"change"
+	],
+	name: "ADateRange",
+	inheritAttrs: false
+});
+//#endregion
+export { DateRange as default };

package/dist/date-range/index.d.ts

@@ -0,0 +1,2 @@
+import DateRange, { DateRangeEmits, DateRangeEmitsProps, DateRangeOption, DateRangeProps, DateRangeSize } from "./DateRange.js";
+export { type DateRangeEmits, type DateRangeEmitsProps, type DateRangeOption, type DateRangeProps, type DateRangeSize, DateRange as default };

package/dist/date-range/index.js

@@ -0,0 +1,8 @@
+import DateRange from "./DateRange.js";
+//#region src/date-range/index.tsx
+DateRange.install = (app) => {
+	app.component(DateRange.name, DateRange);
+};
+var date_range_default = DateRange;
+//#endregion
+export { date_range_default as default };

package/dist/date-range/style/index.d.ts

@@ -0,0 +1,12 @@
+import { SeedToken } from "../../theme/interface/seeds.js";
+import { AliasToken } from "../../theme/interface/alias.js";
+import { ComponentTokenMap } from "../../theme/interface/components.js";
+import { FullToken } from "../../theme/interface/cssinjs-utils.js";
+import "../../theme/interface/index.js";
+import "../../theme/internal.js";
+//#region src/date-range/style/index.d.ts
+interface ComponentToken {}
+interface DateRangeToken extends FullToken<'DateRange'> {}
+declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>, tokenResult?: import("@zboson/cssinjs").UseTokenReturn<ComponentTokenMap, AliasToken, SeedToken> | undefined) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
+//#endregion
+export { ComponentToken, DateRangeToken, _default as default };

package/dist/date-range/style/index.js

@@ -0,0 +1,30 @@
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+//#region src/date-range/style/index.ts
+const genDateRangeStyle = (token) => {
+	const { componentCls, antCls, marginXS } = token;
+	const historyIconCls = `${componentCls}-history-icon`;
+	return {
+		[componentCls]: {
+			[`${componentCls}-picker`]: {
+				flex: "1 1 auto",
+				minWidth: 0
+			},
+			[`${componentCls}-history-item`]: {
+				display: "inline-flex",
+				alignItems: "center",
+				gap: marginXS
+			}
+		},
+		[`${componentCls}-history-menu`]: { [`${antCls}-dropdown-menu-item`]: {
+			[historyIconCls]: {
+				visibility: "hidden",
+				margin: 0,
+				color: "rgba(100, 49, 49, 0.5)"
+			},
+			"&:hover": { [historyIconCls]: { visibility: "visible" } }
+		} }
+	};
+};
+var style_default = genStyleHooks("DateRange", genDateRangeStyle);
+//#endregion
+export { style_default as default };

package/dist/descriptions/Cell.d.ts

@@ -0,0 +1,18 @@
+import { VueNode } from "../_util/type.js";
+import { CellSemanticClassNames, CellSemanticStyles } from "./DescriptionsContext.js";
+//#region src/descriptions/Cell.d.ts
+interface CellProps {
+  itemPrefixCls: string;
+  span: number;
+  component: string;
+  classes?: CellSemanticClassNames;
+  styles?: CellSemanticStyles;
+  bordered?: boolean;
+  label?: VueNode;
+  content?: VueNode;
+  type?: 'label' | 'content' | 'item';
+  colon?: boolean;
+}
+declare const Cell: import("vue").DefineSetupFnComponent<CellProps, {}, {}, CellProps & {}, import("vue").PublicProps>;
+//#endregion
+export { CellProps, Cell as default };

package/dist/descriptions/Cell.js

@@ -0,0 +1,104 @@
+import { normalizeStyle as normalizeStyle$1 } from "../_util/styleUtils.js";
+import { getSlotPropsFnRun } from "../_util/tools.js";
+import { isRenderable } from "../_util/is.js";
+import { useDescriptionsCtx } from "./DescriptionsContext.js";
+import { createVNode, defineComponent, mergeProps } from "vue";
+import { classNames } from "@v-c/util";
+//#region src/descriptions/Cell.tsx
+const Cell = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
+	const descContext = useDescriptionsCtx();
+	return () => {
+		const { component, bordered, type, itemPrefixCls, span, styles, classes, colon } = props;
+		const { classes: descriptionsClassNames } = descContext.value;
+		const Component = component;
+		const label = getSlotPropsFnRun(slots, props, "label");
+		const content = getSlotPropsFnRun(slots, props, "content");
+		if (bordered) {
+			let typeStyle;
+			if (type === "label") typeStyle = styles?.label;
+			if (type === "content") typeStyle = styles?.content;
+			const mergedCellStyle = {
+				...normalizeStyle$1(attrs.style),
+				...typeStyle
+			};
+			return createVNode(Component, mergeProps({
+				"class": classNames({
+					[`${itemPrefixCls}-item-label`]: type === "label",
+					[`${itemPrefixCls}-item-content`]: type === "content"
+				}, type === "label" ? descriptionsClassNames?.label : void 0, type === "content" ? descriptionsClassNames?.content : void 0),
+				"colSpan": span
+			}, attrs, { "style": mergedCellStyle }), { default: () => [isRenderable(label) && createVNode("span", null, [label]), isRenderable(content) && createVNode("span", null, [content])] });
+		}
+		return createVNode(Component, mergeProps({ "class": classNames(`${itemPrefixCls}-item`) }, attrs, { "colSpan": span }), { default: () => [createVNode("div", { "class": `${itemPrefixCls}-item-container` }, [(label || label === 0) && createVNode("span", {
+			"class": classNames(`${itemPrefixCls}-item-label`, descriptionsClassNames?.label, { [`${itemPrefixCls}-item-no-colon`]: !colon }, classes?.label),
+			"style": styles?.label
+		}, [label]), (content || content === 0) && createVNode("span", {
+			"class": classNames(`${itemPrefixCls}-item-content`, descriptionsClassNames?.content, classes?.content),
+			"style": styles?.content
+		}, [content])])] });
+	};
+}, {
+	props: {
+		itemPrefixCls: {
+			type: String,
+			required: true
+		},
+		span: {
+			type: Number,
+			required: true
+		},
+		component: {
+			type: String,
+			required: true
+		},
+		classes: {
+			type: Object,
+			required: false
+		},
+		styles: {
+			type: Object,
+			required: false
+		},
+		bordered: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		label: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		content: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		colon: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	},
+	inheritAttrs: false
+});
+//#endregion
+export { Cell as default };