@veltra/desktop 1.0.0

package/dist/components/date-panel/panels/month.js

@@ -0,0 +1,65 @@
+import { getYearMonths } from "../../calendar/utils.js";
+import { DatePanelDIKey } from "../di.js";
+import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, inject, normalizeClass, openBlock, renderList, toDisplayString, unref } from "vue";
+import { bem } from "@veltra/utils";
+//#region src/components/date-panel/panels/month.vue
+const _hoisted_1 = ["onClick", "onMouseenter"];
+const fmtStr = "yyyyMM";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "DatePanelMonth",
+	__name: "month",
+	setup(__props) {
+		const { cls, panelDate, rangeDate, panelProps, handleDateSelect, handleDateRangeHover } = inject(DatePanelDIKey);
+		const months = computed(() => {
+			return getYearMonths(panelDate.value.timestamp, panelProps.disabledDate);
+		});
+		function getRangeCls(month) {
+			return [
+				bem.is("in-range", didInRange(month.date)),
+				bem.is("range-start", isRangeStart(month.date)),
+				bem.is("range-end", isRangeEnd(month.date))
+			];
+		}
+		function getSingleCls(month) {
+			return [bem.is("selected", didSelected(month.date))];
+		}
+		function getMonthCls(month) {
+			const ret = [cls.e("cell"), bem.is("disabled", month.disabled === true)];
+			if (panelProps.range) return [...ret, ...getRangeCls(month)];
+			return [...ret, ...getSingleCls(month)];
+		}
+		function didSelected(date) {
+			if (!panelProps.date) return false;
+			return date.format(fmtStr) === panelProps.date.format(fmtStr);
+		}
+		function didInRange(date) {
+			if (!rangeDate.value) return false;
+			const [start, end] = rangeDate.value;
+			return date.timestamp >= start.timestamp && date.timestamp <= end.timestamp;
+		}
+		function isRangeStart(date) {
+			if (!rangeDate.value) return false;
+			const [start] = rangeDate.value;
+			return date.format(fmtStr) === start.format(fmtStr);
+		}
+		function isRangeEnd(date) {
+			if (!rangeDate.value) return false;
+			const [, end] = rangeDate.value;
+			return date.format(fmtStr) === end.format(fmtStr);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("ul", { class: normalizeClass(unref(cls).e("months")) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(months.value, (month) => {
+				return openBlock(), createElementBlock("li", {
+					key: month.key,
+					class: normalizeClass(getMonthCls(month)),
+					onClick: ($event) => !month.disabled && unref(handleDateSelect)(month.date),
+					onMouseenter: ($event) => !month.disabled && unref(handleDateRangeHover)(month.date)
+				}, [createElementVNode("span", { class: normalizeClass(unref(cls).e("cell-value")) }, toDisplayString(month.month) + "月", 3)], 42, _hoisted_1);
+			}), 128))], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=month.js.map

package/dist/components/date-panel/panels/month.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"month.js","names":[],"sources":["../../../../src/components/date-panel/panels/month.vue"],"sourcesContent":["<template>\n  <ul :class=\"cls.e('months')\">\n    <li\n      v-for=\"month of months\"\n      :key=\"month.key\"\n      :class=\"getMonthCls(month)\"\n      @click=\"!month.disabled && handleDateSelect(month.date)\"\n      @mouseenter=\"!month.disabled && handleDateRangeHover(month.date)\"\n    >\n      <span :class=\"cls.e('cell-value')\">{{ month.month }}月</span>\n    </li>\n  </ul>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { Dater } from '@cat-kit/core'\nimport { bem } from '@veltra/utils'\nimport { computed } from 'vue'\nimport { inject } from 'vue'\n\nimport type { CalendarMonth } from '../../../types'\nimport { getYearMonths } from '../../calendar/utils'\nimport { DatePanelDIKey } from '../di'\n\ndefineOptions({\n  name: 'DatePanelMonth'\n})\n\nconst { cls, panelDate, rangeDate, panelProps, handleDateSelect, handleDateRangeHover } =\n  inject(DatePanelDIKey)!\n\nconst months = computed(() => {\n  return getYearMonths(panelDate.value.timestamp, panelProps.disabledDate)\n})\n\nfunction getRangeCls(month: CalendarMonth) {\n  return [\n    bem.is('in-range', didInRange(month.date)),\n    bem.is('range-start', isRangeStart(month.date)),\n    bem.is('range-end', isRangeEnd(month.date))\n  ]\n}\n\nfunction getSingleCls(month: CalendarMonth) {\n  return [bem.is('selected', didSelected(month.date))]\n}\n\nfunction getMonthCls(month: CalendarMonth) {\n  const ret = [cls.e('cell'), bem.is('disabled', month.disabled === true)]\n  if (panelProps.range) {\n    return [...ret, ...getRangeCls(month)]\n  }\n  return [...ret, ...getSingleCls(month)]\n}\n\nconst fmtStr = 'yyyyMM'\n\nfunction didSelected(date: Dater) {\n  if (!panelProps.date) return false\n  return date.format(fmtStr) === panelProps.date.format(fmtStr)\n}\n\nfunction didInRange(date: Dater) {\n  if (!rangeDate.value) return false\n  const [start, end] = rangeDate.value\n  return date.timestamp >= start.timestamp && date.timestamp <= end.timestamp\n}\n\nfunction isRangeStart(date: Dater) {\n  if (!rangeDate.value) return false\n  const [start] = rangeDate.value\n  return date.format(fmtStr) === start.format(fmtStr)\n}\n\nfunction isRangeEnd(date: Dater) {\n  if (!rangeDate.value) return false\n  const [, end] = rangeDate.value\n  return date.format(fmtStr) === end.format(fmtStr)\n}\n</script>\n"],"mappings":";;;;;;AAuDA,MAAM,SAAS;;;;;EA3Bf,MAAM,EAAE,KAAK,WAAW,WAAW,YAAY,kBAAkB,yBAC/D,OAAO,eAAe;EAExB,MAAM,SAAS,eAAe;AAC5B,UAAO,cAAc,UAAU,MAAM,WAAW,WAAW,aAAY;IACxE;EAED,SAAS,YAAY,OAAsB;AACzC,UAAO;IACL,IAAI,GAAG,YAAY,WAAW,MAAM,KAAK,CAAC;IAC1C,IAAI,GAAG,eAAe,aAAa,MAAM,KAAK,CAAC;IAC/C,IAAI,GAAG,aAAa,WAAW,MAAM,KAAK,CAAA;IAC5C;;EAGF,SAAS,aAAa,OAAsB;AAC1C,UAAO,CAAC,IAAI,GAAG,YAAY,YAAY,MAAM,KAAK,CAAC,CAAA;;EAGrD,SAAS,YAAY,OAAsB;GACzC,MAAM,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,GAAG,YAAY,MAAM,aAAa,KAAK,CAAA;AACvE,OAAI,WAAW,MACb,QAAO,CAAC,GAAG,KAAK,GAAG,YAAY,MAAM,CAAA;AAEvC,UAAO,CAAC,GAAG,KAAK,GAAG,aAAa,MAAM,CAAA;;EAKxC,SAAS,YAAY,MAAa;AAChC,OAAI,CAAC,WAAW,KAAM,QAAO;AAC7B,UAAO,KAAK,OAAO,OAAO,KAAK,WAAW,KAAK,OAAO,OAAM;;EAG9D,SAAS,WAAW,MAAa;AAC/B,OAAI,CAAC,UAAU,MAAO,QAAO;GAC7B,MAAM,CAAC,OAAO,OAAO,UAAU;AAC/B,UAAO,KAAK,aAAa,MAAM,aAAa,KAAK,aAAa,IAAI;;EAGpE,SAAS,aAAa,MAAa;AACjC,OAAI,CAAC,UAAU,MAAO,QAAO;GAC7B,MAAM,CAAC,SAAS,UAAU;AAC1B,UAAO,KAAK,OAAO,OAAO,KAAK,MAAM,OAAO,OAAM;;EAGpD,SAAS,WAAW,MAAa;AAC/B,OAAI,CAAC,UAAU,MAAO,QAAO;GAC7B,MAAM,GAAG,OAAO,UAAU;AAC1B,UAAO,KAAK,OAAO,OAAO,KAAK,IAAI,OAAO,OAAM;;;uBA5EhD,mBAUK,MAAA,EAVA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,SAAA,CAAA,EAAA,EAAA,EAAA,UAAA,KAAA,EACf,mBAQK,UAAA,MAAA,WAPa,OAAA,QAAT,UAAK;wBADd,mBAQK,MAAA;KANF,KAAK,MAAM;KACX,OAAK,eAAE,YAAY,MAAK,CAAA;KACxB,UAAK,WAAA,CAAG,MAAM,YAAY,MAAA,iBAAgB,CAAC,MAAM,KAAI;KACrD,eAAU,WAAA,CAAG,MAAM,YAAY,MAAA,qBAAoB,CAAC,MAAM,KAAI;QAE/D,mBAA4D,QAAA,EAArD,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,aAAA,CAAA,EAAA,EAAA,gBAAmB,MAAM,MAAK,GAAG,KAAC,EAAA,CAAA,EAAA,IAAA,WAAA"}

package/dist/components/date-panel/panels/year.js

@@ -0,0 +1,64 @@
+import { getTenYears } from "../../calendar/utils.js";
+import { DatePanelDIKey } from "../di.js";
+import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, inject, normalizeClass, openBlock, renderList, toDisplayString, unref } from "vue";
+import { bem } from "@veltra/utils";
+//#region src/components/date-panel/panels/year.vue
+const _hoisted_1 = ["onClick", "onMouseenter"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "DatePanelYear",
+	__name: "year",
+	setup(__props) {
+		const { panelDate, rangeDate, panelProps, cls, handleDateSelect, handleDateRangeHover } = inject(DatePanelDIKey);
+		const years = computed(() => {
+			return getTenYears(panelDate.value.timestamp, panelProps.disabledDate);
+		});
+		function getRangeCls(year) {
+			return [
+				bem.is("range", didInRange(year.date)),
+				bem.is("range-start", isRangeStart(year.date)),
+				bem.is("range-end", isRangeEnd(year.date))
+			];
+		}
+		function getSingleCls(year) {
+			return [bem.is("selected", didSelected(year.date))];
+		}
+		function getYearCls(year) {
+			const ret = [cls.e("cell"), bem.is("disabled", year.disabled === true)];
+			if (panelProps.range) return [...ret, ...getRangeCls(year)];
+			return [...ret, ...getSingleCls(year)];
+		}
+		function didSelected(date) {
+			if (!panelProps.date) return false;
+			return date.year === panelProps.date.year;
+		}
+		function didInRange(date) {
+			if (!rangeDate.value) return false;
+			const [start, end] = rangeDate.value;
+			return date.timestamp >= start.timestamp && date.timestamp <= end.timestamp;
+		}
+		function isRangeStart(date) {
+			if (!rangeDate.value) return false;
+			const [start] = rangeDate.value;
+			return date.year === start.year;
+		}
+		function isRangeEnd(date) {
+			if (!rangeDate.value) return false;
+			const [, end] = rangeDate.value;
+			return date.year === end.year;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("ul", { class: normalizeClass(unref(cls).e("years")) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(years.value, (year) => {
+				return openBlock(), createElementBlock("li", {
+					key: year.year,
+					class: normalizeClass(getYearCls(year)),
+					onClick: ($event) => !year.disabled && unref(handleDateSelect)(year.date),
+					onMouseenter: ($event) => !year.disabled && unref(handleDateRangeHover)(year.date)
+				}, [createElementVNode("span", { class: normalizeClass(unref(cls).e("cell-value")) }, toDisplayString(year.year), 3)], 42, _hoisted_1);
+			}), 128))], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=year.js.map

package/dist/components/date-panel/panels/year.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"year.js","names":[],"sources":["../../../../src/components/date-panel/panels/year.vue"],"sourcesContent":["<template>\n  <ul :class=\"cls.e('years')\">\n    <li\n      v-for=\"year of years\"\n      :key=\"year.year\"\n      :class=\"getYearCls(year)\"\n      @click=\"!year.disabled && handleDateSelect(year.date)\"\n      @mouseenter=\"!year.disabled && handleDateRangeHover(year.date)\"\n    >\n      <span :class=\"cls.e('cell-value')\">{{ year.year }}</span>\n    </li>\n  </ul>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { Dater } from '@cat-kit/core'\nimport { bem } from '@veltra/utils'\nimport { computed } from 'vue'\nimport { inject } from 'vue'\n\nimport type { CalendarYear } from '../../../types'\nimport { getTenYears } from '../../calendar/utils'\nimport { DatePanelDIKey } from '../di'\n\ndefineOptions({\n  name: 'DatePanelYear'\n})\n\nconst { panelDate, rangeDate, panelProps, cls, handleDateSelect, handleDateRangeHover } =\n  inject(DatePanelDIKey)!\n\nconst years = computed(() => {\n  return getTenYears(panelDate.value.timestamp, panelProps.disabledDate)\n})\n\nfunction getRangeCls(year: CalendarYear) {\n  return [\n    bem.is('range', didInRange(year.date)),\n    bem.is('range-start', isRangeStart(year.date)),\n    bem.is('range-end', isRangeEnd(year.date))\n  ]\n}\n\nfunction getSingleCls(year: CalendarYear) {\n  return [bem.is('selected', didSelected(year.date))]\n}\n\nfunction getYearCls(year: CalendarYear) {\n  const ret = [cls.e('cell'), bem.is('disabled', year.disabled === true)]\n  if (panelProps.range) {\n    return [...ret, ...getRangeCls(year)]\n  }\n  return [...ret, ...getSingleCls(year)]\n}\n\nfunction didSelected(date: Dater) {\n  if (!panelProps.date) return false\n  return date.year === panelProps.date.year\n}\n\nfunction didInRange(date: Dater) {\n  if (!rangeDate.value) return false\n  const [start, end] = rangeDate.value\n  return date.timestamp >= start.timestamp && date.timestamp <= end.timestamp\n}\n\nfunction isRangeStart(date: Dater) {\n  if (!rangeDate.value) return false\n  const [start] = rangeDate.value\n  return date.year === start.year\n}\n\nfunction isRangeEnd(date: Dater) {\n  if (!rangeDate.value) return false\n  const [, end] = rangeDate.value\n  return date.year === end.year\n}\n</script>\n"],"mappings":";;;;;;;;;;EA4BA,MAAM,EAAE,WAAW,WAAW,YAAY,KAAK,kBAAkB,yBAC/D,OAAO,eAAe;EAExB,MAAM,QAAQ,eAAe;AAC3B,UAAO,YAAY,UAAU,MAAM,WAAW,WAAW,aAAY;IACtE;EAED,SAAS,YAAY,MAAoB;AACvC,UAAO;IACL,IAAI,GAAG,SAAS,WAAW,KAAK,KAAK,CAAC;IACtC,IAAI,GAAG,eAAe,aAAa,KAAK,KAAK,CAAC;IAC9C,IAAI,GAAG,aAAa,WAAW,KAAK,KAAK,CAAA;IAC3C;;EAGF,SAAS,aAAa,MAAoB;AACxC,UAAO,CAAC,IAAI,GAAG,YAAY,YAAY,KAAK,KAAK,CAAC,CAAA;;EAGpD,SAAS,WAAW,MAAoB;GACtC,MAAM,MAAM,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,GAAG,YAAY,KAAK,aAAa,KAAK,CAAA;AACtE,OAAI,WAAW,MACb,QAAO,CAAC,GAAG,KAAK,GAAG,YAAY,KAAK,CAAA;AAEtC,UAAO,CAAC,GAAG,KAAK,GAAG,aAAa,KAAK,CAAA;;EAGvC,SAAS,YAAY,MAAa;AAChC,OAAI,CAAC,WAAW,KAAM,QAAO;AAC7B,UAAO,KAAK,SAAS,WAAW,KAAK;;EAGvC,SAAS,WAAW,MAAa;AAC/B,OAAI,CAAC,UAAU,MAAO,QAAO;GAC7B,MAAM,CAAC,OAAO,OAAO,UAAU;AAC/B,UAAO,KAAK,aAAa,MAAM,aAAa,KAAK,aAAa,IAAI;;EAGpE,SAAS,aAAa,MAAa;AACjC,OAAI,CAAC,UAAU,MAAO,QAAO;GAC7B,MAAM,CAAC,SAAS,UAAU;AAC1B,UAAO,KAAK,SAAS,MAAM;;EAG7B,SAAS,WAAW,MAAa;AAC/B,OAAI,CAAC,UAAU,MAAO,QAAO;GAC7B,MAAM,GAAG,OAAO,UAAU;AAC1B,UAAO,KAAK,SAAS,IAAI;;;uBA1EzB,mBAUK,MAAA,EAVA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA,EAAA,EAAA,EAAA,UAAA,KAAA,EACf,mBAQK,UAAA,MAAA,WAPY,MAAA,QAAR,SAAI;wBADb,mBAQK,MAAA;KANF,KAAK,KAAK;KACV,OAAK,eAAE,WAAW,KAAI,CAAA;KACtB,UAAK,WAAA,CAAG,KAAK,YAAY,MAAA,iBAAgB,CAAC,KAAK,KAAI;KACnD,eAAU,WAAA,CAAG,KAAK,YAAY,MAAA,qBAAoB,CAAC,KAAK,KAAI;QAE7D,mBAAyD,QAAA,EAAlD,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,aAAA,CAAA,EAAA,EAAA,gBAAmB,KAAK,KAAI,EAAA,EAAA,CAAA,EAAA,IAAA,WAAA"}

package/dist/components/date-panel/style.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/components/date-panel/style.js

@@ -0,0 +1 @@
+import "./style2.css";

package/dist/components/date-panel/style2.css

@@ -0,0 +1,179 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-date-panel--small {
+  padding: var(--u-gap-default);
+  font-size: var(--u-font-size-main-small);
+}
+.u-date-panel--small .u-date-panel__cell-value {
+  width: var(--u-form-component-height-small);
+  height: var(--u-form-component-height-small);
+  line-height: var(--u-form-component-height-small);
+}
+.u-date-panel--small .u-date-panel__years .u-date-panel__cell-value {
+  width: calc(var(--u-form-component-height-small) * 2);
+}
+.u-date-panel--small .u-date-panel__months .u-date-panel__cell-value {
+  width: calc(var(--u-form-component-height-small) * 2);
+}
+.u-date-panel--small__date-panel, .u-date-panel--small__header {
+  font-size: var(--u-font-size-title-small);
+}
+.u-date-panel--small .u-date-panel__cell.is-range-start {
+  border-radius: var(--u-form-component-height-small) 0 0 var(--u-form-component-height-small);
+}
+.u-date-panel--small .u-date-panel__cell.is-range-end {
+  border-radius: 0 var(--u-form-component-height-small) var(--u-form-component-height-small) 0;
+}
+.u-date-panel--default {
+  padding: var(--u-gap-default);
+  font-size: var(--u-font-size-main-default);
+}
+.u-date-panel--default .u-date-panel__cell-value {
+  width: var(--u-form-component-height-default);
+  height: var(--u-form-component-height-default);
+  line-height: var(--u-form-component-height-default);
+}
+.u-date-panel--default .u-date-panel__years .u-date-panel__cell-value {
+  width: calc(var(--u-form-component-height-default) * 2);
+}
+.u-date-panel--default .u-date-panel__months .u-date-panel__cell-value {
+  width: calc(var(--u-form-component-height-default) * 2);
+}
+.u-date-panel--default__date-panel, .u-date-panel--default__header {
+  font-size: var(--u-font-size-title-default);
+}
+.u-date-panel--default .u-date-panel__cell.is-range-start {
+  border-radius: var(--u-form-component-height-default) 0 0 var(--u-form-component-height-default);
+}
+.u-date-panel--default .u-date-panel__cell.is-range-end {
+  border-radius: 0 var(--u-form-component-height-default) var(--u-form-component-height-default) 0;
+}
+.u-date-panel--large {
+  padding: var(--u-gap-default);
+  font-size: var(--u-font-size-main-large);
+}
+.u-date-panel--large .u-date-panel__cell-value {
+  width: var(--u-form-component-height-large);
+  height: var(--u-form-component-height-large);
+  line-height: var(--u-form-component-height-large);
+}
+.u-date-panel--large .u-date-panel__years .u-date-panel__cell-value {
+  width: calc(var(--u-form-component-height-large) * 2);
+}
+.u-date-panel--large .u-date-panel__months .u-date-panel__cell-value {
+  width: calc(var(--u-form-component-height-large) * 2);
+}
+.u-date-panel--large__date-panel, .u-date-panel--large__header {
+  font-size: var(--u-font-size-title-large);
+}
+.u-date-panel--large .u-date-panel__cell.is-range-start {
+  border-radius: var(--u-form-component-height-large) 0 0 var(--u-form-component-height-large);
+}
+.u-date-panel--large .u-date-panel__cell.is-range-end {
+  border-radius: 0 var(--u-form-component-height-large) var(--u-form-component-height-large) 0;
+}
+.u-date-panel__days, .u-date-panel__months, .u-date-panel__years {
+  row-gap: 4px;
+}
+.u-date-panel__months, .u-date-panel__years {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+}
+.u-date-panel__months .u-date-panel__cell, .u-date-panel__years .u-date-panel__cell {
+  width: 70px;
+  text-align: center;
+}
+.u-date-panel__week, .u-date-panel__days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+.u-date-panel__cell {
+  padding: 2px;
+  cursor: pointer;
+}
+.u-date-panel__cell:hover .u-date-panel__cell-value {
+  background-color: var(--u-bg-color-hover);
+}
+.u-date-panel__cell.is-in-range {
+  background-color: var(--u-color-primary-light-9);
+}
+.u-date-panel__cell.is-disabled {
+  cursor: not-allowed;
+  background-color: var(--u-color-disabled);
+}
+.u-date-panel__cell.is-disabled .u-date-panel__cell-value {
+  background-color: var(--u-color-disabled);
+  color: var(--u-text-color-disabled);
+}
+.u-date-panel__cell.is-pre {
+  color: var(--u-text-color-disabled);
+}
+.u-date-panel__cell.is-next {
+  color: var(--u-text-color-disabled);
+}
+.u-date-panel__cell.is-selected .u-date-panel__cell-value {
+  background-color: var(--u-color-primary);
+  color: var(--u-text-color-white);
+}
+.u-date-panel__cell.is-range-start .u-date-panel__cell-value {
+  background-color: var(--u-color-primary);
+  color: var(--u-text-color-white);
+}
+.u-date-panel__cell.is-range-end .u-date-panel__cell-value {
+  background-color: var(--u-color-primary);
+  color: var(--u-text-color-white);
+}
+.u-date-panel__cell.is-today .u-date-panel__cell-value {
+  border: 1px solid var(--u-color-primary-light-3);
+}
+.u-date-panel__cell-value {
+  display: inline-block;
+  text-align: center;
+  transition: background-color 0.15s;
+  border-radius: 99px;
+}
+.u-date-panel__week {
+  padding: 3px 0;
+}
+.u-date-panel__week-day {
+  line-height: 1em;
+  text-align: center;
+}
+.u-date-panel__header {
+  line-height: 1em;
+  padding: 0 8px;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-date-panel__header .u-icon {
+  cursor: pointer;
+  font-size: 18px;
+}
+.u-date-panel__header .u-icon:hover {
+  color: var(--u-color-primary);
+}
+.u-date-panel__header-year, .u-date-panel__header-month {
+  cursor: pointer;
+}
+.u-date-panel__header-year {
+  margin-right: 6px;
+}

package/dist/components/date-panel/use-date-select.js

@@ -0,0 +1,84 @@
+import { computed, shallowRef } from "vue";
+//#region src/components/date-panel/use-date-select.ts
+function useDateSelect(options) {
+	const { props, panelType, emit, updatePanelDate } = options;
+	/** 面板顺序 */
+	const panelSequence = [
+		"year",
+		"month",
+		"day"
+	];
+	const typeMapToPanelType = {
+		year: "year",
+		month: "month",
+		date: "day"
+	};
+	/**
+	* 临时日期范围, 在点击第一次范围日期时使用
+	*/
+	const rangeDateTemp = shallowRef();
+	let firstSelectedRangeDate = void 0;
+	const rangeDate = computed(() => {
+		return rangeDateTemp.value || props.rangeDate;
+	});
+	function resetRangeDateTemp() {
+		rangeDateTemp.value = void 0;
+		firstSelectedRangeDate = void 0;
+	}
+	/** 面板类型是否匹配日期类型 */
+	const panelTypeMatchDateType = computed(() => {
+		const { type } = props;
+		return typeMapToPanelType[type] === panelType.value;
+	});
+	/** 切换到下一个面板 */
+	function switchNextPanel() {
+		const index = panelSequence.indexOf(panelType.value);
+		if (index === -1) return;
+		panelType.value = panelSequence[index + 1];
+	}
+	/** 选择日期范围 */
+	function handleDateRangeSelect(date) {
+		if (panelTypeMatchDateType.value) if (!firstSelectedRangeDate) {
+			firstSelectedRangeDate = date;
+			rangeDateTemp.value = [date, date];
+		} else {
+			if (date.timestamp < firstSelectedRangeDate.timestamp) rangeDateTemp.value = [date, firstSelectedRangeDate];
+			else rangeDateTemp.value = [firstSelectedRangeDate, date];
+			emit("select:range-date", rangeDateTemp.value);
+			resetRangeDateTemp();
+		}
+		else {
+			updatePanelDate(date);
+			switchNextPanel();
+		}
+	}
+	/** 范围日期悬停 */
+	function handleDateRangeHover(date) {
+		if (!panelTypeMatchDateType.value || !firstSelectedRangeDate) return;
+		if (date.timestamp < firstSelectedRangeDate.timestamp) rangeDateTemp.value = [date, firstSelectedRangeDate];
+		else rangeDateTemp.value = [firstSelectedRangeDate, date];
+	}
+	function handleDateSingleSelect(date) {
+		if (panelTypeMatchDateType.value) emit("select:date", date);
+		else {
+			updatePanelDate(date);
+			switchNextPanel();
+		}
+	}
+	/** 选择日期 */
+	function handleDateSelect(date) {
+		const { range } = props;
+		if (range) handleDateRangeSelect(date);
+		else handleDateSingleSelect(date);
+	}
+	return {
+		handleDateSelect,
+		handleDateRangeHover,
+		resetRangeDateTemp,
+		rangeDate
+	};
+}
+//#endregion
+export { useDateSelect };
+
+//# sourceMappingURL=use-date-select.js.map

package/dist/components/date-panel/use-date-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-date-select.js","names":[],"sources":["../../../src/components/date-panel/use-date-select.ts"],"sourcesContent":["import type { Dater } from '@cat-kit/core'\nimport { type Ref, computed, type ComputedRef, shallowRef } from 'vue'\n\nimport type { DatePanelProps, PanelType, DatePanelEmits } from '../../types'\n\ninterface DateSelectOptions {\n  props: DatePanelProps\n  emit: DatePanelEmits\n  panelType: Ref<PanelType>\n  updatePanelDate: (date: Dater) => void\n}\n\ninterface UseDateSelectReturned {\n  handleDateSelect: (date: Dater) => void\n  handleDateRangeHover: (date: Dater) => void\n  resetRangeDateTemp: () => void\n  rangeDate: ComputedRef<[Dater, Dater] | undefined>\n}\n\nexport function useDateSelect(options: DateSelectOptions): UseDateSelectReturned {\n  const { props, panelType, emit, updatePanelDate } = options\n\n  /** 面板顺序 */\n  const panelSequence: PanelType[] = ['year', 'month', 'day']\n\n  const typeMapToPanelType = { year: 'year', month: 'month', date: 'day' }\n\n  /**\n   * 临时日期范围, 在点击第一次范围日期时使用\n   */\n  const rangeDateTemp = shallowRef<[Dater, Dater]>()\n  let firstSelectedRangeDate: Dater | undefined = undefined\n\n  const rangeDate = computed(() => {\n    return rangeDateTemp.value || props.rangeDate\n  })\n\n  function resetRangeDateTemp() {\n    rangeDateTemp.value = undefined\n    firstSelectedRangeDate = undefined\n  }\n\n  /** 面板类型是否匹配日期类型 */\n  const panelTypeMatchDateType = computed(() => {\n    const { type } = props\n    return typeMapToPanelType[type!] === panelType.value\n  })\n\n  /** 切换到下一个面板 */\n  function switchNextPanel() {\n    const index = panelSequence.indexOf(panelType.value)\n    if (index === -1) return\n    panelType.value = panelSequence[index + 1]!\n  }\n\n  /** 选择日期范围 */\n  function handleDateRangeSelect(date: Dater) {\n    if (panelTypeMatchDateType.value) {\n      // 第一次选择\n      if (!firstSelectedRangeDate) {\n        firstSelectedRangeDate = date\n        rangeDateTemp.value = [date, date]\n      }\n      // 第二次选择范围日期\n      else {\n        if (date.timestamp < firstSelectedRangeDate.timestamp) {\n          rangeDateTemp.value = [date, firstSelectedRangeDate]\n        } else {\n          rangeDateTemp.value = [firstSelectedRangeDate, date]\n        }\n        emit('select:range-date', rangeDateTemp.value)\n\n        // 选择完成, 清空临时日期范围\n        resetRangeDateTemp()\n      }\n    } else {\n      updatePanelDate(date)\n      switchNextPanel()\n    }\n  }\n\n  /** 范围日期悬停 */\n  function handleDateRangeHover(date: Dater) {\n    if (!panelTypeMatchDateType.value || !firstSelectedRangeDate) {\n      return\n    }\n    if (date.timestamp < firstSelectedRangeDate.timestamp) {\n      rangeDateTemp.value = [date, firstSelectedRangeDate]\n    } else {\n      rangeDateTemp.value = [firstSelectedRangeDate, date]\n    }\n  }\n\n  function handleDateSingleSelect(date: Dater) {\n    // 类型匹配则触发数据更新\n\n    if (panelTypeMatchDateType.value) {\n      emit('select:date', date)\n    } else {\n      updatePanelDate(date)\n      switchNextPanel()\n    }\n  }\n\n  /** 选择日期 */\n  function handleDateSelect(date: Dater) {\n    const { range } = props\n    if (range) {\n      handleDateRangeSelect(date)\n    } else {\n      handleDateSingleSelect(date)\n    }\n  }\n\n  return { handleDateSelect, handleDateRangeHover, resetRangeDateTemp, rangeDate }\n}\n"],"mappings":";;AAmBA,SAAgB,cAAc,SAAmD;CAC/E,MAAM,EAAE,OAAO,WAAW,MAAM,oBAAoB;;CAGpD,MAAM,gBAA6B;EAAC;EAAQ;EAAS;EAAM;CAE3D,MAAM,qBAAqB;EAAE,MAAM;EAAQ,OAAO;EAAS,MAAM;EAAO;;;;CAKxE,MAAM,gBAAgB,YAA4B;CAClD,IAAI,yBAA4C,KAAA;CAEhD,MAAM,YAAY,eAAe;AAC/B,SAAO,cAAc,SAAS,MAAM;GACpC;CAEF,SAAS,qBAAqB;AAC5B,gBAAc,QAAQ,KAAA;AACtB,2BAAyB,KAAA;;;CAI3B,MAAM,yBAAyB,eAAe;EAC5C,MAAM,EAAE,SAAS;AACjB,SAAO,mBAAmB,UAAW,UAAU;GAC/C;;CAGF,SAAS,kBAAkB;EACzB,MAAM,QAAQ,cAAc,QAAQ,UAAU,MAAM;AACpD,MAAI,UAAU,GAAI;AAClB,YAAU,QAAQ,cAAc,QAAQ;;;CAI1C,SAAS,sBAAsB,MAAa;AAC1C,MAAI,uBAAuB,MAEzB,KAAI,CAAC,wBAAwB;AAC3B,4BAAyB;AACzB,iBAAc,QAAQ,CAAC,MAAM,KAAK;SAG/B;AACH,OAAI,KAAK,YAAY,uBAAuB,UAC1C,eAAc,QAAQ,CAAC,MAAM,uBAAuB;OAEpD,eAAc,QAAQ,CAAC,wBAAwB,KAAK;AAEtD,QAAK,qBAAqB,cAAc,MAAM;AAG9C,uBAAoB;;OAEjB;AACL,mBAAgB,KAAK;AACrB,oBAAiB;;;;CAKrB,SAAS,qBAAqB,MAAa;AACzC,MAAI,CAAC,uBAAuB,SAAS,CAAC,uBACpC;AAEF,MAAI,KAAK,YAAY,uBAAuB,UAC1C,eAAc,QAAQ,CAAC,MAAM,uBAAuB;MAEpD,eAAc,QAAQ,CAAC,wBAAwB,KAAK;;CAIxD,SAAS,uBAAuB,MAAa;AAG3C,MAAI,uBAAuB,MACzB,MAAK,eAAe,KAAK;OACpB;AACL,mBAAgB,KAAK;AACrB,oBAAiB;;;;CAKrB,SAAS,iBAAiB,MAAa;EACrC,MAAM,EAAE,UAAU;AAClB,MAAI,MACF,uBAAsB,KAAK;MAE3B,wBAAuB,KAAK;;AAIhC,QAAO;EAAE;EAAkB;EAAsB;EAAoB;EAAW"}

package/dist/components/date-panel/use-panel-date.js

@@ -0,0 +1,43 @@
+import { computed, shallowRef } from "vue";
+import { date } from "@cat-kit/core";
+//#region src/components/date-panel/use-panel-date.ts
+function usePanelDate(options) {
+	const { props } = options;
+	/** 当前面板日期 */
+	const panelDate = shallowRef(date((props.date || props.rangeDate?.[0])?.timestamp ?? /* @__PURE__ */ new Date()));
+	function updatePanelDate(date) {
+		panelDate.value = date;
+	}
+	function toPrevYear() {
+		updatePanelDate(panelDate.value.calc(-1, "years"));
+	}
+	function toNextYear() {
+		updatePanelDate(panelDate.value.calc(1, "years"));
+	}
+	function toPrevMonth() {
+		updatePanelDate(panelDate.value.calc(-1, "months"));
+	}
+	function toNextMonth() {
+		updatePanelDate(panelDate.value.calc(1, "months"));
+	}
+	function toPrevTenYears() {
+		updatePanelDate(panelDate.value.calc(-10, "years"));
+	}
+	function toNextTenYears() {
+		updatePanelDate(panelDate.value.calc(10, "years"));
+	}
+	return {
+		panelDate: computed(() => panelDate.value),
+		updatePanelDate,
+		toPrevYear,
+		toNextYear,
+		toPrevMonth,
+		toNextMonth,
+		toPrevTenYears,
+		toNextTenYears
+	};
+}
+//#endregion
+export { usePanelDate };
+
+//# sourceMappingURL=use-panel-date.js.map

package/dist/components/date-panel/use-panel-date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-panel-date.js","names":[],"sources":["../../../src/components/date-panel/use-panel-date.ts"],"sourcesContent":["import { date, type Dater } from '@cat-kit/core'\nimport { computed, type ComputedRef, shallowRef } from 'vue'\n\nimport type { DatePanelProps } from '../../types'\n\ninterface PanelDateOptions {\n  props: DatePanelProps\n}\n\ninterface UsePanelDateReturned {\n  panelDate: ComputedRef<Dater>\n  updatePanelDate: (date: Dater) => void\n  toPrevYear: () => void\n  toNextYear: () => void\n  toPrevMonth: () => void\n  toNextMonth: () => void\n  toPrevTenYears: () => void\n  toNextTenYears: () => void\n}\n\nexport function usePanelDate(options: PanelDateOptions): UsePanelDateReturned {\n  const { props } = options\n\n  /** 当前面板日期 */\n  const panelDate = shallowRef<Dater>(\n    date((props.date || props.rangeDate?.[0])?.timestamp ?? new Date())\n  )\n\n  function updatePanelDate(date: Dater) {\n    panelDate.value = date\n  }\n\n  function toPrevYear() {\n    updatePanelDate(panelDate.value.calc(-1, 'years'))\n  }\n\n  function toNextYear() {\n    updatePanelDate(panelDate.value.calc(1, 'years'))\n  }\n\n  function toPrevMonth() {\n    updatePanelDate(panelDate.value.calc(-1, 'months'))\n  }\n\n  function toNextMonth() {\n    updatePanelDate(panelDate.value.calc(1, 'months'))\n  }\n\n  function toPrevTenYears() {\n    updatePanelDate(panelDate.value.calc(-10, 'years'))\n  }\n\n  function toNextTenYears() {\n    updatePanelDate(panelDate.value.calc(10, 'years'))\n  }\n\n  return {\n    panelDate: computed(() => panelDate.value),\n    updatePanelDate,\n\n    toPrevYear,\n    toNextYear,\n    toPrevMonth,\n    toNextMonth,\n    toPrevTenYears,\n    toNextTenYears\n  }\n}\n"],"mappings":";;;AAoBA,SAAgB,aAAa,SAAiD;CAC5E,MAAM,EAAE,UAAU;;CAGlB,MAAM,YAAY,WAChB,MAAM,MAAM,QAAQ,MAAM,YAAY,KAAK,6BAAa,IAAI,MAAM,CAAC,CACpE;CAED,SAAS,gBAAgB,MAAa;AACpC,YAAU,QAAQ;;CAGpB,SAAS,aAAa;AACpB,kBAAgB,UAAU,MAAM,KAAK,IAAI,QAAQ,CAAC;;CAGpD,SAAS,aAAa;AACpB,kBAAgB,UAAU,MAAM,KAAK,GAAG,QAAQ,CAAC;;CAGnD,SAAS,cAAc;AACrB,kBAAgB,UAAU,MAAM,KAAK,IAAI,SAAS,CAAC;;CAGrD,SAAS,cAAc;AACrB,kBAAgB,UAAU,MAAM,KAAK,GAAG,SAAS,CAAC;;CAGpD,SAAS,iBAAiB;AACxB,kBAAgB,UAAU,MAAM,KAAK,KAAK,QAAQ,CAAC;;CAGrD,SAAS,iBAAiB;AACxB,kBAAgB,UAAU,MAAM,KAAK,IAAI,QAAQ,CAAC;;AAGpD,QAAO;EACL,WAAW,eAAe,UAAU,MAAM;EAC1C;EAEA;EACA;EACA;EACA;EACA;EACA;EACD"}

package/dist/components/date-panel/use-panel.js

@@ -0,0 +1,45 @@
+import { DatePanelDIKey } from "./di.js";
+import { useDateSelect } from "./use-date-select.js";
+import { usePanelDate } from "./use-panel-date.js";
+import { provide, shallowRef, watch } from "vue";
+import { bem } from "@veltra/utils";
+//#region src/components/date-panel/use-panel.ts
+function usePanel(options) {
+	const { props, emit } = options;
+	/** 组件类 */
+	const cls = bem("date-panel");
+	/** 当前面板类型 */
+	const panelType = shallowRef("day");
+	watch(() => props.type, (type) => {
+		if (type === "date") panelType.value = "day";
+		else if (type === "month") panelType.value = "month";
+		else if (type === "year") panelType.value = "year";
+	}, { immediate: true });
+	const { panelDate, updatePanelDate, ...panelDateRest } = usePanelDate({ props });
+	const { handleDateSelect, handleDateRangeHover, rangeDate } = useDateSelect({
+		props,
+		emit,
+		panelType,
+		updatePanelDate
+	});
+	provide(DatePanelDIKey, {
+		cls,
+		panelProps: props,
+		panelEmit: emit,
+		panelType,
+		panelDate,
+		rangeDate,
+		...panelDateRest,
+		handleDateSelect,
+		handleDateRangeHover
+	});
+	return {
+		cls,
+		panelType,
+		panelDate
+	};
+}
+//#endregion
+export { usePanel };
+
+//# sourceMappingURL=use-panel.js.map

package/dist/components/date-panel/use-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-panel.js","names":[],"sources":["../../../src/components/date-panel/use-panel.ts"],"sourcesContent":["import type { Dater } from '@cat-kit/core'\nimport { bem, type BEM } from '@veltra/utils'\nimport { provide, shallowRef, watch, type ShallowRef, type ComputedRef } from 'vue'\n\nimport type { DatePanelEmits, DatePanelProps, PanelType } from '../../types'\nimport { DatePanelDIKey } from './di'\nimport { useDateSelect } from './use-date-select'\nimport { usePanelDate } from './use-panel-date'\n\ninterface PanelOptions {\n  props: DatePanelProps\n  emit: DatePanelEmits\n}\n\ninterface UsePanelReturned {\n  cls: BEM<'date-panel', 'u-'>\n  panelType: ShallowRef<PanelType>\n  panelDate: ComputedRef<Dater>\n}\n\nexport function usePanel(options: PanelOptions): UsePanelReturned {\n  const { props, emit } = options\n\n  /** 组件类 */\n  const cls = bem('date-panel')\n\n  /** 当前面板类型 */\n  const panelType = shallowRef<PanelType>('day')\n\n  watch(\n    () => props.type,\n    (type) => {\n      if (type === 'date') {\n        panelType.value = 'day'\n      } else if (type === 'month') {\n        panelType.value = 'month'\n      } else if (type === 'year') {\n        panelType.value = 'year'\n      }\n    },\n    { immediate: true }\n  )\n\n  const { panelDate, updatePanelDate, ...panelDateRest } = usePanelDate({ props })\n\n  const { handleDateSelect, handleDateRangeHover, rangeDate } = useDateSelect({\n    props,\n    emit,\n    panelType,\n    updatePanelDate\n  })\n\n  provide(DatePanelDIKey, {\n    cls,\n\n    panelProps: props,\n    panelEmit: emit,\n\n    panelType,\n    panelDate,\n\n    rangeDate,\n\n    ...panelDateRest,\n\n    handleDateSelect,\n    handleDateRangeHover\n  })\n\n  return { cls, panelType, panelDate }\n}\n"],"mappings":";;;;;;AAoBA,SAAgB,SAAS,SAAyC;CAChE,MAAM,EAAE,OAAO,SAAS;;CAGxB,MAAM,MAAM,IAAI,aAAa;;CAG7B,MAAM,YAAY,WAAsB,MAAM;AAE9C,aACQ,MAAM,OACX,SAAS;AACR,MAAI,SAAS,OACX,WAAU,QAAQ;WACT,SAAS,QAClB,WAAU,QAAQ;WACT,SAAS,OAClB,WAAU,QAAQ;IAGtB,EAAE,WAAW,MAAM,CACpB;CAED,MAAM,EAAE,WAAW,iBAAiB,GAAG,kBAAkB,aAAa,EAAE,OAAO,CAAC;CAEhF,MAAM,EAAE,kBAAkB,sBAAsB,cAAc,cAAc;EAC1E;EACA;EACA;EACA;EACD,CAAC;AAEF,SAAQ,gBAAgB;EACtB;EAEA,YAAY;EACZ,WAAW;EAEX;EACA;EAEA;EAEA,GAAG;EAEH;EACA;EACD,CAAC;AAEF,QAAO;EAAE;EAAK;EAAW;EAAW"}

package/dist/components/date-picker/date-picker.js

@@ -0,0 +1,135 @@
+import _sfc_main$1 from "../icon/icon.js";
+import _sfc_main$2 from "../dropdown/dropdown.js";
+import input_default from "../input/input.js";
+import _sfc_main$3 from "../date-panel/date-panel.js";
+import { Fragment, computed, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, shallowRef, toDisplayString, unref, watch, withCtx } from "vue";
+import { date } from "@cat-kit/core";
+import { FORM_EMPTY_CONTENT, bem } from "@veltra/utils";
+import { useFormComponent, useFormFallbackProps, useUpdateLock } from "@veltra/compositions";
+import { Calendar } from "@veltra/icons/normal";
+//#region src/components/date-picker/date-picker.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "DatePicker",
+	__name: "date-picker",
+	props: {
+		modelValue: {},
+		placeholder: { default: "选择日期" },
+		type: { default: "date" },
+		format: {},
+		valueFormat: {},
+		disabledDate: {},
+		clearable: {
+			type: Boolean,
+			default: true
+		},
+		tips: {},
+		span: {},
+		label: {},
+		field: {},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: void 0
+		},
+		size: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const cls = bem("date-picker");
+		const { formProps } = useFormComponent();
+		const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+			size: "default",
+			disabled: false,
+			readonly: false
+		});
+		const className = computed(() => {
+			return [cls.b, cls.m(size.value)];
+		});
+		const dropdownRef = shallowRef();
+		const formatStr = computed(() => {
+			const { format, type } = props;
+			if (format) return format;
+			if (type === "date") return "yyyy-MM-dd";
+			if (type === "month") return "yyyy-MM";
+			if (type === "year") return "yyyy";
+			return "yyyy-MM-dd";
+		});
+		const currentDate = shallowRef();
+		const { update, updateAndLock } = useUpdateLock();
+		watch(() => props.modelValue, (modelValue) => {
+			update(() => {
+				currentDate.value = modelValue ? date(modelValue) : void 0;
+			});
+		}, { immediate: true });
+		const displayedValue = computed(() => {
+			return currentDate.value?.format(formatStr.value) ?? "";
+		});
+		async function handleSelectDate(date) {
+			await updateAndLock(() => {
+				currentDate.value = date;
+				emit("update:modelValue", date.format(formatStr.value));
+			});
+			dropdownRef.value?.close();
+		}
+		function handleClear() {
+			currentDate.value = void 0;
+			emit("update:modelValue", void 0);
+		}
+		return (_ctx, _cache) => {
+			return !unref(readonly) ? (openBlock(), createBlock(unref(_sfc_main$2), {
+				key: 0,
+				class: normalizeClass(className.value),
+				trigger: "click",
+				width: "auto",
+				ref_key: "dropdownRef",
+				ref: dropdownRef,
+				"onUpdate:visible": _cache[0] || (_cache[0] = () => {}),
+				disabled: unref(disabled)
+			}, {
+				trigger: withCtx(() => [createVNode(unref(input_default), {
+					size: unref(size),
+					"native-readonly": "",
+					clearable: __props.clearable,
+					placeholder: __props.placeholder,
+					"model-value": displayedValue.value,
+					disabled: unref(disabled),
+					onClear: handleClear
+				}, {
+					suffix: withCtx(() => [createVNode(unref(_sfc_main$1), { class: normalizeClass(unref(cls).e("icon")) }, {
+						default: withCtx(() => [createVNode(unref(Calendar))]),
+						_: 1
+					}, 8, ["class"])]),
+					_: 1
+				}, 8, [
+					"size",
+					"clearable",
+					"placeholder",
+					"model-value",
+					"disabled"
+				])]),
+				content: withCtx(() => [createVNode(unref(_sfc_main$3), {
+					size: unref(size),
+					type: __props.type,
+					"disabled-date": __props.disabledDate,
+					date: currentDate.value,
+					"onSelect:date": handleSelectDate
+				}, null, 8, [
+					"size",
+					"type",
+					"disabled-date",
+					"date"
+				])]),
+				_: 1
+			}, 8, ["class", "disabled"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(displayedValue.value || unref(FORM_EMPTY_CONTENT)), 1)], 64));
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=date-picker.js.map