@will-ui/vue 1.0.0

package/dist/components/cornerEars/CornerEars.js

@@ -0,0 +1,108 @@
+import { propSizeToCssVars, toCssVarsStyle } from "../../util/cssVars.js";
+import { buildStrokePath, cornerFillPath, resolveOpenMode } from "./cornerGeometry.js";
+import { computed, createVNode, defineComponent, onBeforeUnmount, onMounted, ref, watch } from "vue";
+//#region components/cornerEars/CornerEars.tsx
+var CornerEars = /* @__PURE__ */ defineComponent({
+	name: "CornerEars",
+	props: {
+		placement: {
+			type: Array,
+			required: true
+		},
+		size: {
+			type: Number,
+			required: true
+		},
+		fill: {
+			type: String,
+			default: "#ddd"
+		},
+		stroke: {
+			type: String,
+			default: void 0
+		},
+		cssVars: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const sizeValue = computed(() => props.size || 20);
+		const hasStroke = computed(() => Boolean(props.stroke && props.stroke !== "transparent"));
+		const mode = computed(() => resolveOpenMode(props.placement));
+		const notchMode = computed(() => [
+			"leftOut",
+			"rightOut",
+			"top",
+			"bottom"
+		].includes(mode.value));
+		const showEars = computed(() => !hasStroke.value || !notchMode.value);
+		const rootRef = ref(null);
+		const box = ref({
+			w: 0,
+			h: 0
+		});
+		let ro = null;
+		function measure() {
+			const el = rootRef.value;
+			if (!el) return;
+			const r = el.getBoundingClientRect();
+			box.value = {
+				w: r.width,
+				h: r.height
+			};
+		}
+		function bindRo() {
+			ro?.disconnect();
+			ro = null;
+			if (!hasStroke.value || !rootRef.value) return;
+			measure();
+			ro = new ResizeObserver(measure);
+			ro.observe(rootRef.value);
+		}
+		onMounted(bindRo);
+		watch(hasStroke, bindRo);
+		onBeforeUnmount(() => {
+			ro?.disconnect();
+			ro = null;
+		});
+		const strokeD = computed(() => hasStroke.value ? buildStrokePath(box.value.w, box.value.h, sizeValue.value, mode.value) : "");
+		const containerStyle = computed(() => toCssVarsStyle({
+			...propSizeToCssVars("corner", sizeValue.value),
+			"--w-corner-fill": props.fill || "#ddd",
+			"--w-corner-stroke": props.stroke || "transparent",
+			...hasStroke.value ? {} : { "--w-prop-corner-stroke-width": "0px" },
+			...hasStroke.value && notchMode.value ? { backgroundColor: "transparent" } : {},
+			...props.cssVars
+		}));
+		return () => createVNode("div", {
+			"ref": rootRef,
+			"class": "w-corner-ears",
+			"style": containerStyle.value
+		}, [
+			showEars.value ? props.placement.map((p) => createVNode("svg", {
+				"key": p,
+				"class": ["w-corner", `w-corner-${p}`],
+				"width": sizeValue.value,
+				"height": sizeValue.value,
+				"viewBox": `0 0 ${sizeValue.value} ${sizeValue.value}`,
+				"aria-hidden": "true"
+			}, [createVNode("path", {
+				"class": "w-corner-fill",
+				"d": cornerFillPath(p, sizeValue.value)
+			}, null)])) : null,
+			hasStroke.value && strokeD.value ? createVNode("svg", {
+				"class": "w-corner-stroke-layer",
+				"aria-hidden": "true"
+			}, [createVNode("path", {
+				"class": ["w-corner-stroke-path", notchMode.value ? "is-notch" : ""],
+				"d": strokeD.value
+			}, null)]) : null,
+			slots.default?.()
+		]);
+	}
+});
+//#endregion
+export { CornerEars as default };
+
+//# sourceMappingURL=CornerEars.js.map

package/dist/components/cornerEars/CornerEars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CornerEars.js","names":["computed","defineComponent","onBeforeUnmount","onMounted","ref","watch","createVNode","_createVNode","buildStrokePath","cornerFillPath","resolveOpenMode","propSizeToCssVars","toCssVarsStyle","CornerEarsImpl","name","props","placement","type","Array","required","size","Number","fill","String","default","stroke","undefined","cssVars","Object","setup","slots","sizeValue","hasStroke","Boolean","mode","notchMode","includes","value","showEars","rootRef","box","w","h","ro","measure","el","r","getBoundingClientRect","width","height","bindRo","disconnect","ResizeObserver","observe","strokeD","containerStyle","backgroundColor","map","p","CornerEars"],"sources":["../../../components/cornerEars/CornerEars.tsx"],"sourcesContent":["import {\r\n  computed,\r\n  defineComponent,\r\n  onBeforeUnmount,\r\n  onMounted,\r\n  ref,\r\n  watch,\r\n  type PropType,\r\n} from 'vue'\r\nimport {\r\n  buildStrokePath,\r\n  cornerFillPath,\r\n  resolveOpenMode,\r\n  type CornerPlacement,\r\n} from './cornerGeometry'\r\nimport { propSizeToCssVars, toCssVarsStyle, type CssVars } from '../../util'\r\n\r\nexport type { CornerPlacement }\r\n\r\nexport type CornerEarsProps = {\r\n  placement: CornerPlacement[]\r\n  size: number\r\n  fill?: string\r\n  stroke?: string\r\n  /** 实例 CSS 变量 */\r\n  cssVars?: CssVars\r\n}\r\n\r\n/**\r\n * 运行时靠 inheritAttrs 透传到根 div；TSX 需在 $props 上并上原生属性，\r\n * 否则 onClick / class 等 fallthrough 会在类型上被判为不存在。\r\n */\r\nexport type CornerEarsJSXProps = CornerEarsProps &\r\n  Omit<JSX.IntrinsicElements['div'], keyof CornerEarsProps | 'ref'>\r\n\r\nexport type CornerEarsComponent = {\r\n  new (): {\r\n    $props: CornerEarsJSXProps\r\n  }\r\n}\r\n\r\nconst CornerEarsImpl = defineComponent({\r\n  name: 'CornerEars',\r\n  props: {\r\n    placement: {\r\n      type: Array as PropType<CornerPlacement[]>,\r\n      required: true,\r\n    },\r\n    size: {\r\n      type: Number,\r\n      required: true,\r\n    },\r\n    fill: {\r\n      type: String,\r\n      default: '#ddd',\r\n    },\r\n    stroke: {\r\n      type: String,\r\n      default: undefined,\r\n    },\r\n    cssVars: {\r\n      type: Object as PropType<CssVars>,\r\n      default: undefined,\r\n    },\r\n  },\r\n  setup(props, { slots }) {\r\n    const sizeValue = computed(() => props.size || 20)\r\n    const hasStroke = computed(() =>\r\n      Boolean(props.stroke && props.stroke !== 'transparent'),\r\n    )\r\n    const mode = computed(() => resolveOpenMode(props.placement))\r\n    const notchMode = computed(() =>\r\n      ['leftOut', 'rightOut', 'top', 'bottom'].includes(mode.value),\r\n    )\r\n    const showEars = computed(() => !hasStroke.value || !notchMode.value)\r\n\r\n    const rootRef = ref<HTMLElement | null>(null)\r\n    const box = ref({ w: 0, h: 0 })\r\n    let ro: ResizeObserver | null = null\r\n\r\n    function measure() {\r\n      const el = rootRef.value\r\n      if (!el) return\r\n      const r = el.getBoundingClientRect()\r\n      box.value = { w: r.width, h: r.height }\r\n    }\r\n\r\n    function bindRo() {\r\n      ro?.disconnect()\r\n      ro = null\r\n      if (!hasStroke.value || !rootRef.value) return\r\n      measure()\r\n      ro = new ResizeObserver(measure)\r\n      ro.observe(rootRef.value)\r\n    }\r\n\r\n    onMounted(bindRo)\r\n    watch(hasStroke, bindRo)\r\n    onBeforeUnmount(() => {\r\n      ro?.disconnect()\r\n      ro = null\r\n    })\r\n\r\n    const strokeD = computed(() =>\r\n      hasStroke.value\r\n        ? buildStrokePath(box.value.w, box.value.h, sizeValue.value, mode.value)\r\n        : '',\r\n    )\r\n\r\n    const containerStyle = computed(() =>\r\n      toCssVarsStyle({\r\n        ...propSizeToCssVars('corner', sizeValue.value),\r\n        '--w-corner-fill': props.fill || '#ddd',\r\n        '--w-corner-stroke': props.stroke || 'transparent',\r\n        ...(hasStroke.value ? {} : { '--w-prop-corner-stroke-width': '0px' }),\r\n        ...(hasStroke.value && notchMode.value\r\n          ? { backgroundColor: 'transparent' }\r\n          : {}),\r\n        ...props.cssVars,\r\n      }),\r\n    )\r\n\r\n    return () => (\r\n      <div\r\n        ref={rootRef}\r\n        class=\"w-corner-ears\"\r\n        style={containerStyle.value}>\r\n        {showEars.value\r\n          ? props.placement.map((p) => (\r\n              <svg\r\n                key={p}\r\n                class={['w-corner', `w-corner-${p}`]}\r\n                width={sizeValue.value}\r\n                height={sizeValue.value}\r\n                viewBox={`0 0 ${sizeValue.value} ${sizeValue.value}`}\r\n                aria-hidden=\"true\">\r\n                <path\r\n                  class=\"w-corner-fill\"\r\n                  d={cornerFillPath(p, sizeValue.value)}\r\n                />\r\n              </svg>\r\n            ))\r\n          : null}\r\n        {hasStroke.value && strokeD.value ? (\r\n          <svg class=\"w-corner-stroke-layer\" aria-hidden=\"true\">\r\n            <path\r\n              class={[\r\n                'w-corner-stroke-path',\r\n                notchMode.value ? 'is-notch' : '',\r\n              ]}\r\n              d={strokeD.value}\r\n            />\r\n          </svg>\r\n        ) : null}\r\n        {slots.default?.()}\r\n      </div>\r\n    )\r\n  },\r\n})\r\n\r\nconst CornerEars =\r\n  CornerEarsImpl as unknown as CornerEarsComponent\r\n\r\nexport type CornerEarsInstance = InstanceType<CornerEarsComponent>\r\n\r\nexport default CornerEars\r\n"],"mappings":"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"}

package/dist/components/cornerEars/cornerGeometry.d.ts

@@ -0,0 +1,8 @@
+/**
+ * CornerEars 几何：角块 fill + 整轮廓 stroke path（容器坐标，原点在盒左上）。
+ */
+export type CornerPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+export type CornerOpenMode = 'right' | 'left' | 'top' | 'bottom' | 'leftOut' | 'rightOut' | 'rect';
+export declare function resolveOpenMode(placement: CornerPlacement[]): CornerOpenMode;
+export declare function cornerFillPath(placement: CornerPlacement, s: number): string;
+export declare function buildStrokePath(w: number, h: number, s: number, mode: CornerOpenMode): string;

package/dist/components/cornerEars/cornerGeometry.js

@@ -0,0 +1,63 @@
+//#region components/cornerEars/cornerGeometry.ts
+function resolveOpenMode(placement) {
+	const set = new Set(placement);
+	if (set.has("top-end") && set.has("bottom-end")) return "right";
+	if (set.has("top-start") && set.has("bottom-start")) return "left";
+	if (set.has("top-start") && set.has("top-end")) return "top";
+	if (set.has("bottom-start") && set.has("bottom-end")) return "bottom";
+	if (set.has("left-start") || set.has("left-end")) return "leftOut";
+	if (set.has("right-start") || set.has("right-end")) return "rightOut";
+	return "rect";
+}
+function cornerFillPath(placement, s) {
+	switch (placement) {
+		case "top-start": return `M0,0 L0,${s} L${s},${s} A${s},${s} 0 0 1 0,0 Z`;
+		case "top-end": return `M${s},0 L${s},${s} L0,${s} A${s},${s} 0 0 0 ${s},0 Z`;
+		case "bottom-start": return `M0,0 L0,${s} A${s},${s} 0 0 1 ${s},0 Z`;
+		case "bottom-end": return `M0,0 L${s},0 L${s},${s} A${s},${s} 0 0 0 0,0 Z`;
+		case "left-start": return `M0,0 L${s},0 L${s},${s} A${s},${s} 0 0 0 0,0 Z`;
+		case "left-end": return `M${s},0 A${s},${s} 0 0 1 0,${s} L${s},${s} Z`;
+		case "right-start": return `M0,0 L${s},0 A${s},${s} 0 0 0 0,${s} Z`;
+		case "right-end": return `M0,0 A${s},${s} 0 0 0 ${s},${s} L0,${s} Z`;
+	}
+}
+function buildStrokePath(w, h, s, mode) {
+	if (w <= 0 || h <= 0) return "";
+	const S = Math.min(s, w * .5, h * .5);
+	switch (mode) {
+		case "right": return [`M0,0 L${w - S},0 A${S},${S} 0 0 0 ${w},${-S}`, `M${w},${h + S} A${S},${S} 0 0 0 ${w - S},${h} L0,${h} L0,0`].join(" ");
+		case "left": return [`M${w},0 L${w},${h} L${S},${h} A${S},${S} 0 0 0 0,${h + S}`, `M0,${-S} A${S},${S} 0 0 0 ${S},0 L${w},0`].join(" ");
+		case "top": return [
+			`M0,${h} L0,0 L0,${-S}`,
+			`A${S},${S} 0 0 0 ${S},0`,
+			`L${w - S},0`,
+			`A${S},${S} 0 0 0 ${w},${-S}`,
+			`L${w},0 L${w},${h} L0,${h}`
+		].join(" ");
+		case "bottom": return [
+			`M0,0 L${w},0 L${w},${h} L${w},${h + S}`,
+			`A${S},${S} 0 0 0 ${w - S},${h}`,
+			`L${S},${h}`,
+			`A${S},${S} 0 0 0 0,${h + S}`,
+			`L0,${h} L0,0`
+		].join(" ");
+		case "leftOut": return [
+			`M0,0 L${w},0 L${w},${h} L0,${h}`,
+			`L${-S},${h} A${S},${S} 0 0 0 0,${h - S}`,
+			`L0,${S}`,
+			`A${S},${S} 0 0 0 ${-S},0 L0,0`
+		].join(" ");
+		case "rightOut": return [
+			`M0,0 L${w},0 L${w + S},0`,
+			`A${S},${S} 0 0 0 ${w},${S}`,
+			`L${w},${h - S}`,
+			`A${S},${S} 0 0 0 ${w + S},${h}`,
+			`L${w},${h} L0,${h} L0,0`
+		].join(" ");
+		default: return `M0,0 L${w},0 L${w},${h} L0,${h} Z`;
+	}
+}
+//#endregion
+export { buildStrokePath, cornerFillPath, resolveOpenMode };
+
+//# sourceMappingURL=cornerGeometry.js.map

package/dist/components/cornerEars/cornerGeometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cornerGeometry.js","names":[],"sources":["../../../components/cornerEars/cornerGeometry.ts"],"sourcesContent":["/**\r\n * CornerEars 几何：角块 fill + 整轮廓 stroke path（容器坐标，原点在盒左上）。\r\n */\r\n\r\nexport type CornerPlacement =\r\n  | 'top-start'\r\n  | 'top-end'\r\n  | 'bottom-start'\r\n  | 'bottom-end'\r\n  | 'left-start'\r\n  | 'left-end'\r\n  | 'right-start'\r\n  | 'right-end'\r\n\r\nexport type CornerOpenMode =\r\n  | 'right'\r\n  | 'left'\r\n  | 'top'\r\n  | 'bottom'\r\n  | 'leftOut'\r\n  | 'rightOut'\r\n  | 'rect'\r\n\r\nexport function resolveOpenMode(placement: CornerPlacement[]): CornerOpenMode {\r\n  const set = new Set(placement)\r\n  if (set.has('top-end') && set.has('bottom-end')) return 'right'\r\n  if (set.has('top-start') && set.has('bottom-start')) return 'left'\r\n  if (set.has('top-start') && set.has('top-end')) return 'top'\r\n  if (set.has('bottom-start') && set.has('bottom-end')) return 'bottom'\r\n  if (set.has('left-start') || set.has('left-end')) return 'leftOut'\r\n  if (set.has('right-start') || set.has('right-end')) return 'rightOut'\r\n  return 'rect'\r\n}\r\n\r\nexport function cornerFillPath(placement: CornerPlacement, s: number): string {\r\n  switch (placement) {\r\n    case 'top-start':\r\n      return `M0,0 L0,${s} L${s},${s} A${s},${s} 0 0 1 0,0 Z`\r\n    case 'top-end':\r\n      return `M${s},0 L${s},${s} L0,${s} A${s},${s} 0 0 0 ${s},0 Z`\r\n    case 'bottom-start':\r\n      return `M0,0 L0,${s} A${s},${s} 0 0 1 ${s},0 Z`\r\n    case 'bottom-end':\r\n      return `M0,0 L${s},0 L${s},${s} A${s},${s} 0 0 0 0,0 Z`\r\n    case 'left-start':\r\n      return `M0,0 L${s},0 L${s},${s} A${s},${s} 0 0 0 0,0 Z`\r\n    case 'left-end':\r\n      return `M${s},0 A${s},${s} 0 0 1 0,${s} L${s},${s} Z`\r\n    case 'right-start':\r\n      return `M0,0 L${s},0 A${s},${s} 0 0 0 0,${s} Z`\r\n    case 'right-end':\r\n      return `M0,0 A${s},${s} 0 0 0 ${s},${s} L0,${s} Z`\r\n  }\r\n}\r\n\r\nexport function buildStrokePath(\r\n  w: number,\r\n  h: number,\r\n  s: number,\r\n  mode: CornerOpenMode,\r\n): string {\r\n  if (w <= 0 || h <= 0) return ''\r\n  const S = Math.min(s, w * 0.5, h * 0.5)\r\n\r\n  switch (mode) {\r\n    case 'right':\r\n      return [\r\n        `M0,0 L${w - S},0 A${S},${S} 0 0 0 ${w},${-S}`,\r\n        `M${w},${h + S} A${S},${S} 0 0 0 ${w - S},${h} L0,${h} L0,0`,\r\n      ].join(' ')\r\n\r\n    case 'left':\r\n      return [\r\n        `M${w},0 L${w},${h} L${S},${h} A${S},${S} 0 0 0 0,${h + S}`,\r\n        `M0,${-S} A${S},${S} 0 0 0 ${S},0 L${w},0`,\r\n      ].join(' ')\r\n\r\n    case 'top':\r\n      // 与 top-start / top-end fill 外弧一致（对齐 leftOut/rightOut）\r\n      return [\r\n        `M0,${h} L0,0 L0,${-S}`,\r\n        `A${S},${S} 0 0 0 ${S},0`,\r\n        `L${w - S},0`,\r\n        `A${S},${S} 0 0 0 ${w},${-S}`,\r\n        `L${w},0 L${w},${h} L0,${h}`,\r\n      ].join(' ')\r\n\r\n    case 'bottom':\r\n      // 与 bottom-start / bottom-end fill 外弧一致\r\n      return [\r\n        `M0,0 L${w},0 L${w},${h} L${w},${h + S}`,\r\n        `A${S},${S} 0 0 0 ${w - S},${h}`,\r\n        `L${S},${h}`,\r\n        `A${S},${S} 0 0 0 0,${h + S}`,\r\n        `L0,${h} L0,0`,\r\n      ].join(' ')\r\n\r\n    case 'leftOut':\r\n      // 与 left-start / left-end fill 外弧一致（曾对过的版本）\r\n      return [\r\n        `M0,0 L${w},0 L${w},${h} L0,${h}`,\r\n        `L${-S},${h} A${S},${S} 0 0 0 0,${h - S}`,\r\n        `L0,${S}`,\r\n        `A${S},${S} 0 0 0 ${-S},0 L0,0`,\r\n      ].join(' ')\r\n\r\n    case 'rightOut':\r\n      // 与 right-start / right-end fill 外弧一致（曾对过的版本）\r\n      return [\r\n        `M0,0 L${w},0 L${w + S},0`,\r\n        `A${S},${S} 0 0 0 ${w},${S}`,\r\n        `L${w},${h - S}`,\r\n        `A${S},${S} 0 0 0 ${w + S},${h}`,\r\n        `L${w},${h} L0,${h} L0,0`,\r\n      ].join(' ')\r\n\r\n    case 'rect':\r\n    default:\r\n      return `M0,0 L${w},0 L${w},${h} L0,${h} Z`\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/components/cornerEars/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './CornerEars';
+export type * from './CornerEars';

package/dist/components/cornerEars/style/index.css

@@ -0,0 +1 @@
+@import '../../../theme/tokens/components/cornerEars.css';

package/dist/components/date/DatePanel.js

@@ -0,0 +1,398 @@
+import Icon_default from "../icon/Icon.js";
+import Btn from "../btn/Btn.js";
+import { useUII18n } from "../../use/useUII18n.js";
+import useDate from "../../use/useDate.js";
+import Days_default from "./Days.js";
+import Months_default from "./Months.js";
+import Years_default from "./Years.js";
+import Toggle_default from "../toggle/Toggle.js";
+import Dial_default from "../time/Dial.js";
+import { useBarText, useDateView, useFormatDate } from "./_use/useDateModules.js";
+import { Fragment, computed, createVNode, defineComponent, inject, reactive, ref, watch } from "vue";
+//#region components/date/DatePanel.tsx
+var renderWeekTitleList = (dayMap) => {
+	const days = [];
+	for (const [k, v] of dayMap) days.push(createVNode("b", { "class": ["w-week-title-item"] }, [v]));
+	return createVNode("div", { "class": "w-week-title" }, [days]);
+};
+var DatePanel_default = /* @__PURE__ */ defineComponent({
+	name: "DatePanel",
+	components: {
+		Btn,
+		Icon: Icon_default,
+		Days: Days_default,
+		Months: Months_default,
+		Years: Years_default,
+		Toggle: Toggle_default,
+		Dial: Dial_default
+	},
+	props: {
+		modelValue: {
+			type: [
+				Number,
+				Date,
+				String
+			],
+			default: void 0
+		},
+		format: {
+			type: String,
+			default: "yyyy-MM-dd"
+		},
+		max: { type: [
+			Number,
+			Date,
+			String
+		] },
+		min: { type: [
+			Number,
+			Date,
+			String
+		] },
+		placeholder: String
+	},
+	emits: ["update:modelValue", "change"],
+	setup(props, { emit }) {
+		const { t } = useUII18n();
+		const renderPrevIcon = (handleClick) => createVNode(Icon_default, {
+			"name": "w-icon-sort-down",
+			"class": "w-date-control-bar-icon",
+			"rotate": true,
+			"onClick": handleClick
+		}, null);
+		const renderNextIcon = (handleClick) => createVNode(Icon_default, {
+			"name": "w-icon-sort-down",
+			"class": "w-date-control-bar-icon",
+			"onClick": handleClick
+		}, null);
+		const formItem = inject("formItem", void 0);
+		const ctrlIcon = ref();
+		const toggleComponent = ref();
+		const { currentView, isYear, isDay, isMonth, isTime, formatIsDay, formatIsMonth, formatIsYear, formatIsTime, getFormatView, setCurrentView } = useDateView(computed(() => props.format));
+		const isUpDown = ref(false);
+		const yearPanel = reactive({
+			from: 0,
+			to: 0
+		});
+		const { selectedDate, getStringDate, formatDate } = useFormatDate(computed(() => props.format), computed(() => props.modelValue));
+		const displayDate = ref(formatDate(props.modelValue) || /* @__PURE__ */ new Date());
+		const { addMonths, addYears, dayMap, format, year: displayYear, yearPanelLength, month: displayMonth } = useDate(displayDate, computed(() => props.format));
+		const timeFormat = computed(() => {
+			let f = "HH:mm:ss";
+			const _f = props.format;
+			if (formatIsTime.value) f = _f.split(/\s+/)[1];
+			return f;
+		});
+		const timeValue = computed(() => {
+			if (isTime.value) {
+				const d = selectedDate.value;
+				if (d) {
+					const h = d.getHours(), m = d.getMinutes(), s = d.getSeconds();
+					return [
+						h.toString().padStart(2, "0"),
+						m.toString().padStart(2, "0"),
+						s.toString().padStart(2, "0")
+					];
+				} else return [
+					"00",
+					"00",
+					"00"
+				];
+			}
+		});
+		const dataList = ref([{
+			datetype: "day",
+			val: Number(displayDate.value)
+		}]);
+		const barText = useBarText(isYear, isMonth, isDay, isTime, displayDate, yearPanel);
+		function renderContent() {
+			const bar = renderControlBar();
+			const transform = isUpDown.value ? "translate" : "scale";
+			let toggleOptions = {
+				ref: toggleComponent,
+				class: isDay.value || isTime.value ? "w-date-days" : isMonth.value || isYear.value ? "w-date-months" : "",
+				dynamic: true,
+				data: dataList.value,
+				direction: "y",
+				transform,
+				scale: {
+					from: .75,
+					to: 1.8
+				},
+				onWheel({ event, delay }) {
+					if (event.deltaY > 0) delay(toNext, 100);
+					else delay(toPrev, 100);
+				}
+			};
+			return createVNode(Fragment, null, [bar, createVNode(Toggle_default, toggleOptions, {
+				default: ({ item, index }) => {
+					if (item.datetype === "day") return createVNode(Days_default, {
+						"date": selectedDate.value,
+						"displayDate": item.val,
+						"format": props.format,
+						"min": props.min,
+						"max": props.max,
+						"onToggle-day": (stringDate) => {
+							if (formatIsDay.value) {
+								emit("update:modelValue", stringDate);
+								emit("change", {
+									v: stringDate,
+									isClose: true
+								});
+								formItem?.validate("change");
+							} else if (formatIsTime.value) {
+								isUpDown.value = false;
+								toggleComponent.value?.next();
+								dataList.value.push({
+									datetype: "time",
+									val: ""
+								});
+								dataList.value.shift();
+								setCurrentView("time");
+								const hms = createTimeByFormat();
+								let sd = stringDate;
+								if (hms) sd = sd + " " + hms;
+								emit("update:modelValue", sd);
+								emit("change", {
+									v: sd,
+									isClose: false
+								});
+								formItem?.validate("change");
+							}
+						}
+					}, null);
+					else if (item.datetype === "time") return createVNode(Dial_default, {
+						"format": timeFormat.value,
+						"value": timeValue.value?.join(":"),
+						"onChange": (hms) => {
+							const sd = selectedDate.value;
+							if (sd) {
+								const d = format(sd, "yyyy-MM-dd");
+								if (hms) {
+									emit("update:modelValue", d + " " + hms);
+									emit("change", {
+										v: d + " " + hms,
+										isClose: false
+									});
+									formItem?.validate("change");
+								}
+							}
+						}
+					}, null);
+					else if (item.datetype === "month") return createVNode(Months_default, {
+						"date": selectedDate.value,
+						"displayDate": displayDate.value,
+						"min": props.min,
+						"max": props.max,
+						"onToggle-month": (toggleDate) => {
+							if (formatIsDay.value || formatIsTime.value) {
+								isUpDown.value = false;
+								toggleComponent.value?.next();
+								dataList.value.push({
+									datetype: "day",
+									val: Number(toggleDate)
+								});
+								setCurrentView("day");
+								displayDate.value = toggleDate;
+								dataList.value.shift();
+							} else if (formatIsMonth.value) {
+								const sDate = getStringDate(toggleDate);
+								emit("update:modelValue", sDate);
+								emit("change", {
+									v: sDate,
+									isClose: true
+								});
+								formItem?.validate("change");
+							}
+						}
+					}, null);
+					else return createVNode(Years_default, {
+						"from": yearPanel.from,
+						"to": yearPanel.to,
+						"date": selectedDate.value,
+						"displayDate": displayDate.value,
+						"min": props.min,
+						"max": props.max,
+						"onGet-from-to": (from, to) => {
+							yearPanel.from = from;
+							yearPanel.to = to;
+						},
+						"onToggle-year": (y) => {
+							if (formatIsYear.value) {
+								emit("update:modelValue", y + "");
+								emit("change", {
+									v: y + "",
+									isClose: true
+								});
+								formItem?.validate("change");
+							} else {
+								isUpDown.value = false;
+								toggleComponent.value?.next();
+								dataList.value.push({
+									datetype: "month",
+									val: ""
+								});
+								displayDate.value = new Date(y, 0);
+								setCurrentView("month");
+								dataList.value.shift();
+							}
+						}
+					}, null);
+				},
+				use: () => isDay.value && renderWeekTitleList(dayMap.value)
+			})]);
+		}
+		function renderControlBar() {
+			return createVNode("div", {
+				"class": "w-date-control-bar",
+				"ref": ctrlIcon
+			}, [createVNode("div", {
+				"class": [isYear.value ? "w-date-control-bar-disabled" : "w-date-control-bar-y-m"],
+				"onClick": () => {
+					if (isDay.value) {
+						isUpDown.value = false;
+						toggleComponent.value?.prev();
+						dataList.value.unshift({
+							datetype: "month",
+							val: displayMonth.value
+						});
+						setCurrentView("month");
+						dataList.value.pop();
+					} else if (isMonth.value) {
+						isUpDown.value = false;
+						toggleComponent.value?.prev();
+						dataList.value.unshift({
+							datetype: "year",
+							val: displayYear.value
+						});
+						setCurrentView("year");
+						dataList.value.pop();
+						yearPanel.from = 0;
+						yearPanel.to = 0;
+					} else if (isTime.value) {
+						isUpDown.value = false;
+						toggleComponent.value?.prev();
+						dataList.value.unshift({
+							datetype: "day",
+							val: Number(displayDate.value)
+						});
+						setCurrentView("day");
+						dataList.value.pop();
+					}
+				}
+			}, [barText.value]), isTime.value ? createVNode(Btn, {
+				"mode": "text",
+				"text": t("date.confirm"),
+				"onClick": () => {
+					emit("change", {
+						v: props.modelValue,
+						isClose: true
+					});
+				}
+			}, null) : [
+				createVNode("span", { "class": "w-date-placeholder" }, [props.placeholder]),
+				renderPrevIcon(toPrev),
+				renderNextIcon(toNext)
+			]]);
+		}
+		function createTimeByFormat() {
+			const f = timeFormat.value;
+			const yms = timeValue.value;
+			if (yms) {
+				if (f === "HH") return yms[0];
+				else if (f === "HH:mm") return yms.slice(0, 2).join(":");
+				else if (f === "HH:mm:ss") return yms.join(":");
+			}
+		}
+		function toPrev() {
+			isUpDown.value = true;
+			const view = currentView.value;
+			toggleComponent.value?.prev();
+			if (view === "day") {
+				const am = addMonths(displayDate.value, -1);
+				dataList.value.unshift({
+					datetype: view,
+					val: Number(am)
+				});
+				dataList.value.pop();
+				displayDate.value = am;
+			} else if (view === "month") {
+				const ay = addYears(displayDate.value, -1);
+				const a = Number(ay);
+				dataList.value.unshift({
+					datetype: view,
+					val: a
+				});
+				dataList.value.pop();
+				displayDate.value = ay;
+			} else {
+				yearPanel.from = yearPanel.from - yearPanelLength;
+				yearPanel.to = yearPanel.to - yearPanelLength;
+				dataList.value.unshift({
+					datetype: view,
+					val: Number(/* @__PURE__ */ new Date())
+				});
+				dataList.value.pop();
+			}
+		}
+		function toNext() {
+			isUpDown.value = true;
+			const view = currentView.value;
+			toggleComponent.value?.next();
+			if (view === "day") {
+				const am = addMonths(displayDate.value);
+				const a = Number(am);
+				dataList.value.push({
+					datetype: view,
+					val: a
+				});
+				dataList.value.shift();
+				displayDate.value = am;
+			} else if (view === "month") {
+				const ay = addYears(displayDate.value, 1);
+				const a = Number(ay);
+				dataList.value.push({
+					datetype: view,
+					val: a
+				});
+				dataList.value.shift();
+				displayDate.value = ay;
+			} else {
+				yearPanel.from = yearPanel.from + yearPanelLength;
+				yearPanel.to = yearPanel.to + yearPanelLength;
+				dataList.value.push({
+					datetype: view,
+					val: Number(/* @__PURE__ */ new Date())
+				});
+				dataList.value.shift();
+			}
+		}
+		function init() {
+			let fv = getFormatView();
+			const _fv = fv === "time" ? "day" : fv;
+			if (selectedDate.value) {
+				displayDate.value = selectedDate.value;
+				dataList.value = [{
+					datetype: _fv,
+					val: format(selectedDate.value, props.format)
+				}];
+			} else {
+				displayDate.value = /* @__PURE__ */ new Date();
+				dataList.value = [{
+					datetype: _fv,
+					val: Number(/* @__PURE__ */ new Date())
+				}];
+			}
+			setCurrentView(_fv);
+		}
+		init();
+		watch(() => props.modelValue, (d) => {
+			if (d !== void 0) displayDate.value = selectedDate.value;
+		});
+		return renderContent;
+	}
+});
+//#endregion
+export { DatePanel_default as default };
+
+//# sourceMappingURL=DatePanel.js.map