@will-ui/vue 1.0.0

package/dist/components/date/DatePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePanel.js","names":["defineComponent","ref","computed","watch","reactive","inject","createVNode","_createVNode","Fragment","_Fragment","useDate","Icon","Days","useUII18n","Months","Years","Toggle","Dial","Btn","useDateView","useBarText","useFormatDate","renderWeekTitleList","dayMap","days","k","v","push","name","components","props","modelValue","type","Number","Date","String","default","undefined","format","max","min","placeholder","emits","setup","emit","t","renderPrevIcon","handleClick","renderNextIcon","formItem","ctrlIcon","toggleComponent","currentView","isYear","isDay","isMonth","isTime","formatIsDay","formatIsMonth","formatIsYear","formatIsTime","getFormatView","setCurrentView","isUpDown","yearPanel","from","to","selectedDate","getStringDate","formatDate","displayDate","addMonths","addYears","year","displayYear","yearPanelLength","month","displayMonth","timeFormat","f","_f","value","split","timeValue","d","h","getHours","m","getMinutes","s","getSeconds","hh","toString","padStart","mm","ss","dataList","datetype","val","barText","renderContent","bar","renderControlBar","transform","toggleOptions","class","dynamic","data","direction","scale","onWheel","event","delay","deltaY","toNext","toPrev","item","index","stringDate","isClose","validate","next","shift","hms","createTimeByFormat","sd","join","toggleDate","sDate","onGet-from-to","y","use","onClick","prev","unshift","pop","yms","slice","view","am","ay","a","clear","init","fv","_fv"],"sources":["../../../components/date/DatePanel.tsx"],"sourcesContent":["import { defineComponent, ref, computed, watch, reactive, inject } from \"vue\"\r\nimport type { PropType } from \"vue\"\r\nimport type {\r\n  ToggleTransformType,\r\n  DateFormatType,\r\n  TimeFormatType,\r\n} from \"../../config/types\"\r\nimport useDate from \"../../use/useDate\"\r\nimport Icon from \"../icon/index\"\r\nimport Days from \"./Days\"\r\nimport { useUII18n } from \"../../use/useUII18n\"\r\nimport Months from \"./Months\"\r\nimport Years from \"./Years\"\r\nimport Toggle from \"../toggle/index\"\r\nimport Dial from \"../time/Dial.vue\"\r\nimport Btn from \"../btn/index\"\r\n\r\nimport {\r\n  useDateView,\r\n  useBarText,\r\n  useDateText,\r\n  useFormatDate,\r\n} from \"./_use/useDateModules\"\r\n\r\ntype DirectionType = \"x\" | \"y\"\r\ntype ViewsType = \"year\" | \"month\" | \"day\" | \"time\"\r\ntype DataItemType = { datetype: ViewsType; val: number | string }\r\n\r\nconst renderWeekTitleList = (dayMap: ReadonlyMap<number, string>) => {\r\n  const days: any[] = []\r\n  for (const [k, v] of dayMap) {\r\n    days.push(<b class={[\"w-week-title-item\"]}>{v}</b>)\r\n  }\r\n  return <div class=\"w-week-title\">{days}</div>\r\n}\r\n\r\nexport default defineComponent({\r\n  name: \"DatePanel\",\r\n  components: { Btn, Icon, Days, Months, Years, Toggle, Dial },\r\n  props: {\r\n    modelValue: {\r\n      type: [Number, Date, String],\r\n      default: undefined,\r\n    },\r\n    format: {\r\n      type: String as PropType<DateFormatType>,\r\n      default: \"yyyy-MM-dd\",\r\n      // required: true\r\n    },\r\n    max: { type: [Number, Date, String] },\r\n    min: { type: [Number, Date, String] },\r\n    placeholder: String,\r\n  },\r\n  emits: [\"update:modelValue\", \"change\"],\r\n  setup(props, { emit }) {\r\n    const { t } = useUII18n()\r\n    const renderPrevIcon = (handleClick: () => void) => (\r\n      <Icon\r\n        name=\"w-icon-sort-down\"\r\n        class=\"w-date-control-bar-icon\"\r\n        rotate={true}\r\n        //@ts-ignore\r\n        onClick={handleClick}\r\n      />\r\n    )\r\n\r\n    const renderNextIcon = (handleClick: () => void) => (\r\n      //@ts-ignore\r\n      <Icon\r\n        name=\"w-icon-sort-down\"\r\n        class=\"w-date-control-bar-icon\"\r\n        //@ts-ignore\r\n        onClick={handleClick}\r\n      />\r\n    )\r\n\r\n    const formItem: any = inject(\"formItem\", undefined)\r\n\r\n    const ctrlIcon = ref<HTMLElement>()\r\n    const toggleComponent = ref<typeof Toggle>()\r\n    const {\r\n      currentView,\r\n      isYear,\r\n      isDay,\r\n      isMonth,\r\n      isTime,\r\n      formatIsDay,\r\n      formatIsMonth,\r\n      formatIsYear,\r\n      formatIsTime,\r\n      getFormatView,\r\n      setCurrentView,\r\n    } = useDateView(computed(() => props.format))\r\n\r\n    const isUpDown = ref(false)\r\n    const yearPanel = reactive({ from: 0, to: 0 })\r\n    const { selectedDate, getStringDate, formatDate } = useFormatDate(\r\n      computed(() => props.format),\r\n      computed(() => props.modelValue)\r\n    )\r\n    //当前下拉框展示的日期\r\n    const displayDate = ref(formatDate(props.modelValue) || new Date())\r\n    const {\r\n      addMonths,\r\n      addYears,\r\n      dayMap,\r\n      format,\r\n      year: displayYear,\r\n      yearPanelLength,\r\n      month: displayMonth,\r\n    } = useDate(\r\n      displayDate,\r\n      computed(() => props.format)\r\n    )\r\n    const timeFormat = computed(() => {\r\n      let f: TimeFormatType = \"HH:mm:ss\"\r\n      const _f = props.format\r\n      if (formatIsTime.value) {\r\n        f = _f.split(/\\s+/)[1] as TimeFormatType\r\n      }\r\n      return f\r\n    })\r\n    const timeValue = computed(() => {\r\n      if (isTime.value) {\r\n        const d = selectedDate.value\r\n        if (d) {\r\n          const h = d.getHours(),\r\n            m = d.getMinutes(),\r\n            s = d.getSeconds()\r\n          const hh = h.toString().padStart(2, \"0\")\r\n          const mm = m.toString().padStart(2, \"0\")\r\n          const ss = s.toString().padStart(2, \"0\")\r\n          return [hh, mm, ss]\r\n        } else {\r\n          return [\"00\", \"00\", \"00\"]\r\n        }\r\n      }\r\n    })\r\n\r\n    const dataList = ref<DataItemType[]>([\r\n      { datetype: \"day\", val: Number(displayDate.value) },\r\n    ])\r\n\r\n    const barText = useBarText(\r\n      isYear,\r\n      isMonth,\r\n      isDay,\r\n      isTime,\r\n      displayDate,\r\n      yearPanel\r\n    )\r\n\r\n    function renderContent() {\r\n      const bar = renderControlBar()\r\n      const transform: ToggleTransformType = isUpDown.value\r\n        ? \"translate\"\r\n        : \"scale\"\r\n      let toggleOptions = {\r\n        ref: toggleComponent,\r\n        class:\r\n          isDay.value || isTime.value\r\n            ? \"w-date-days\"\r\n            : isMonth.value || isYear.value\r\n              ? \"w-date-months\"\r\n              : \"\",\r\n        dynamic: true,\r\n        data: dataList.value,\r\n        direction: \"y\" as DirectionType,\r\n        transform,\r\n        scale: {\r\n          from: 0.75,\r\n          to: 1.8,\r\n        },\r\n        onWheel({\r\n          event,\r\n          delay,\r\n        }: {\r\n          event: WheelEvent\r\n          delay: (fn: Function, n: number) => void\r\n        }) {\r\n          if (event.deltaY > 0) {\r\n            delay(toNext, 100)\r\n          } else {\r\n            delay(toPrev, 100)\r\n          }\r\n        },\r\n      }\r\n      return (\r\n        <>\r\n          {bar}\r\n          <Toggle\r\n            {...toggleOptions}\r\n            v-slots={{\r\n              default: ({\r\n                item,\r\n                index,\r\n              }: {\r\n                item: DataItemType\r\n                index: number\r\n              }) => {\r\n                if (item.datetype === \"day\") {\r\n                  return (\r\n                    <Days\r\n                      date={selectedDate.value}\r\n                      displayDate={item.val}\r\n                      format={props.format}\r\n                      min={props.min}\r\n                      max={props.max}\r\n                      onToggle-day={(stringDate) => {\r\n                        if (formatIsDay.value) {\r\n                          emit(\"update:modelValue\", stringDate)\r\n                          emit(\"change\", { v: stringDate, isClose: true })\r\n                          // visible.value = false\r\n                          formItem?.validate(\"change\")\r\n                        } else if (formatIsTime.value) {\r\n                          isUpDown.value = false\r\n                          toggleComponent.value?.next()\r\n                          dataList.value.push({\r\n                            datetype: \"time\",\r\n                            val: \"\",\r\n                          })\r\n                          dataList.value.shift()\r\n                          setCurrentView(\"time\")\r\n                          const hms = createTimeByFormat()\r\n                          let sd = stringDate\r\n                          if (hms) {\r\n                            sd = sd + \" \" + hms\r\n                          }\r\n                          // console.log(sd)\r\n                          emit(\"update:modelValue\", sd)\r\n                          // console.log(\"????\", sd)\r\n                          emit(\"change\", { v: sd, isClose: false })\r\n                          formItem?.validate(\"change\")\r\n                        }\r\n                      }}\r\n                    />\r\n                  )\r\n                } else if (item.datetype === \"time\") {\r\n                  return (\r\n                    <Dial\r\n                      format={timeFormat.value}\r\n                      value={timeValue.value?.join(\":\")}\r\n                      onChange={(hms?: string) => {\r\n                        const sd = selectedDate.value\r\n                        if (sd) {\r\n                          const d = format(sd, \"yyyy-MM-dd\")\r\n                          if (hms) {\r\n                            emit(\"update:modelValue\", d + \" \" + hms)\r\n                            emit(\"change\", { v: d + \" \" + hms, isClose: false })\r\n                            formItem?.validate(\"change\")\r\n                          }\r\n                        }\r\n                      }}\r\n                    />\r\n                  )\r\n                } else if (item.datetype === \"month\") {\r\n                  return (\r\n                    <Months\r\n                      date={selectedDate.value}\r\n                      displayDate={displayDate.value}\r\n                      min={props.min}\r\n                      max={props.max}\r\n                      onToggle-month={(toggleDate) => {\r\n                        if (formatIsDay.value || formatIsTime.value) {\r\n                          isUpDown.value = false\r\n                          toggleComponent.value?.next()\r\n                          dataList.value.push({\r\n                            datetype: \"day\",\r\n                            val: Number(toggleDate),\r\n                          })\r\n                          setCurrentView(\"day\")\r\n                          displayDate.value = toggleDate\r\n                          dataList.value.shift()\r\n                        } else if (formatIsMonth.value) {\r\n                          // console.log(getStringDate(toggleDate))\r\n                          const sDate = getStringDate(toggleDate)\r\n                          emit(\"update:modelValue\", sDate)\r\n                          emit(\"change\", { v: sDate, isClose: true })\r\n                          // visible.value = false\r\n                          formItem?.validate(\"change\")\r\n                        }\r\n                      }}\r\n                    />\r\n                  )\r\n                } else {\r\n                  return (\r\n                    <Years\r\n                      from={yearPanel.from}\r\n                      to={yearPanel.to}\r\n                      date={selectedDate.value}\r\n                      displayDate={displayDate.value}\r\n                      min={props.min}\r\n                      max={props.max}\r\n                      onGet-from-to={(from, to) => {\r\n                        yearPanel.from = from\r\n                        yearPanel.to = to\r\n                      }}\r\n                      onToggle-year={(y) => {\r\n                        if (formatIsYear.value) {\r\n                          emit(\"update:modelValue\", y + \"\")\r\n                          emit(\"change\", { v: y + \"\", isClose: true })\r\n                          // visible.value = false\r\n                          formItem?.validate(\"change\")\r\n                        } else {\r\n                          isUpDown.value = false\r\n                          toggleComponent.value?.next()\r\n                          dataList.value.push({\r\n                            datetype: \"month\",\r\n                            val: \"\",\r\n                          })\r\n                          displayDate.value = new Date(y, 0)\r\n                          setCurrentView(\"month\")\r\n                          dataList.value.shift()\r\n                        }\r\n                      }}\r\n                    />\r\n                  )\r\n                }\r\n              },\r\n              use: () => isDay.value && renderWeekTitleList(dayMap.value),\r\n            }}\r\n          />\r\n        </>\r\n      )\r\n    }\r\n    function renderControlBar() {\r\n      return (\r\n        <div class=\"w-date-control-bar\" ref={ctrlIcon as any}>\r\n          <div\r\n            class={[\r\n              isYear.value\r\n                ? \"w-date-control-bar-disabled\"\r\n                : \"w-date-control-bar-y-m\",\r\n            ]}\r\n            onClick={() => {\r\n              if (isDay.value) {\r\n                isUpDown.value = false\r\n                toggleComponent.value?.prev()\r\n                dataList.value.unshift({\r\n                  datetype: \"month\",\r\n                  val: displayMonth.value,\r\n                })\r\n                setCurrentView(\"month\")\r\n                dataList.value.pop()\r\n              } else if (isMonth.value) {\r\n                isUpDown.value = false\r\n                toggleComponent.value?.prev()\r\n                dataList.value.unshift({\r\n                  datetype: \"year\",\r\n                  val: displayYear.value,\r\n                })\r\n                setCurrentView(\"year\")\r\n                dataList.value.pop()\r\n                yearPanel.from = 0\r\n                yearPanel.to = 0\r\n              } else if (isTime.value) {\r\n                isUpDown.value = false\r\n                toggleComponent.value?.prev()\r\n                dataList.value.unshift({\r\n                  datetype: \"day\",\r\n                  val: Number(displayDate.value),\r\n                })\r\n                setCurrentView(\"day\")\r\n                dataList.value.pop()\r\n              }\r\n            }}>\r\n            {barText.value}\r\n          </div>\r\n          {isTime.value ? (\r\n            <Btn\r\n              mode=\"text\"\r\n              text={t(\"date.confirm\")}\r\n              //@ts-ignore\r\n              onClick={() => {\r\n                // console.log(props.modelValue)\r\n                emit(\"change\", { v: props.modelValue, isClose: true })\r\n              }}\r\n            />\r\n          ) : (\r\n            [\r\n              <span class=\"w-date-placeholder\">{props.placeholder}</span>,\r\n              renderPrevIcon(toPrev),\r\n              renderNextIcon(toNext),\r\n            ]\r\n          )}\r\n        </div>\r\n      )\r\n    }\r\n\r\n    function createTimeByFormat() {\r\n      const f = timeFormat.value\r\n      const yms = timeValue.value\r\n      if (yms) {\r\n        if (f === \"HH\") {\r\n          return yms[0]\r\n        } else if (f === \"HH:mm\") {\r\n          return yms.slice(0, 2).join(\":\")\r\n        } else if (f === \"HH:mm:ss\") {\r\n          return yms.join(\":\")\r\n        }\r\n      }\r\n    }\r\n\r\n    function toPrev() {\r\n      // isPrev.value = true\r\n      isUpDown.value = true\r\n      const view = currentView.value\r\n      toggleComponent.value?.prev()\r\n      if (view === \"day\") {\r\n        const am = addMonths(displayDate.value, -1)\r\n        dataList.value.unshift({ datetype: view, val: Number(am) })\r\n        dataList.value.pop()\r\n        displayDate.value = am\r\n      } else if (view === \"month\") {\r\n        const ay = addYears(displayDate.value, -1)\r\n        const a = Number(ay)\r\n        dataList.value.unshift({ datetype: view, val: a })\r\n        dataList.value.pop()\r\n        displayDate.value = ay\r\n      } else {\r\n        yearPanel.from = yearPanel.from - yearPanelLength\r\n        yearPanel.to = yearPanel.to - yearPanelLength\r\n\r\n        dataList.value.unshift({ datetype: view, val: Number(new Date()) })\r\n        dataList.value.pop()\r\n      }\r\n    }\r\n\r\n    function toNext() {\r\n      // isPrev.value = false\r\n      isUpDown.value = true\r\n      const view = currentView.value\r\n      toggleComponent.value?.next()\r\n      if (view === \"day\") {\r\n        const am = addMonths(displayDate.value)\r\n        const a = Number(am)\r\n        dataList.value.push({ datetype: view, val: a })\r\n        dataList.value.shift()\r\n        displayDate.value = am\r\n      } else if (view === \"month\") {\r\n        const ay = addYears(displayDate.value, 1)\r\n        const a = Number(ay)\r\n        dataList.value.push({ datetype: view, val: a })\r\n        dataList.value.shift()\r\n        displayDate.value = ay\r\n      } else {\r\n        yearPanel.from = yearPanel.from + yearPanelLength\r\n        yearPanel.to = yearPanel.to + yearPanelLength\r\n        //val是时间戳，以保证每次都会变化，这样动画才会生效！\r\n        dataList.value.push({ datetype: view, val: Number(new Date()) })\r\n        dataList.value.shift()\r\n      }\r\n    }\r\n\r\n    function clear() {\r\n      // 清空时，仍然保持在当前的显示状态\r\n      // displayDate.value = new Date()\r\n      // dataList.value = [{ datetype: 'day', val: Number(displayDate.value) }]\r\n      //setCurrentView('day')\r\n      if (isTime.value) {\r\n        toggleComponent.value?.prev()\r\n        dataList.value.unshift({\r\n          datetype: \"day\",\r\n          val: Number(displayDate.value),\r\n        })\r\n        dataList.value.pop()\r\n        setCurrentView(\"day\")\r\n      }\r\n      emit(\"update:modelValue\", undefined)\r\n      emit(\"change\", undefined)\r\n      formItem?.validate(\"change\")\r\n    }\r\n\r\n    function init() {\r\n      let fv = getFormatView()\r\n      const _fv = fv === \"time\" ? \"day\" : fv\r\n      //每次展示下拉框时，根据当前选中的日期进行初始化\r\n      if (selectedDate.value) {\r\n        displayDate.value = selectedDate.value\r\n        dataList.value = [\r\n          { datetype: _fv, val: format(selectedDate.value, props.format) },\r\n        ]\r\n      } else {\r\n        displayDate.value = new Date()\r\n        dataList.value = [{ datetype: _fv, val: Number(new Date()) }]\r\n      }\r\n      //每次显示出下拉框时就会按照format给定的值进行初始化界面\r\n\r\n      setCurrentView(_fv)\r\n    }\r\n\r\n    init()\r\n\r\n    watch(\r\n      () => props.modelValue,\r\n      (d) => {\r\n        if (d !== undefined) {\r\n          // displayDate.value = d\r\n          displayDate.value = selectedDate.value!\r\n        }\r\n      }\r\n    )\r\n\r\n    return renderContent\r\n  },\r\n})\r\n"],"mappings":"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"}

package/dist/components/date/DatePicker.d.ts

@@ -0,0 +1,226 @@
+import { PropType, SlotsType } from 'vue';
+import { AdjustmentPosition, DateFormatType, DateType } from '../../config/types';
+import { TQuickKey } from '../../use/useDate';
+import { CssVars } from '../../util';
+import { DatePickerChangeQuickPayload, DatePickerTriggerSlotProps } from './types';
+export type { DatePickerGlobalConfig } from './config';
+export { DATE_PICKER_FALLBACK } from './config';
+export type { DatePickerTriggerSlotProps, DatePickerChangeQuickPayload, DatePickerExpose, TQuickKey, } from './types';
+type DatePickerSlots = {
+    /** 自定义触发器；不传则使用内置 Trigger */
+    trigger?: (props: DatePickerTriggerSlotProps) => any;
+};
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<DateType>;
+        default: any;
+    };
+    start: {
+        type: PropType<DateType>;
+        default: any;
+    };
+    end: {
+        type: PropType<DateType>;
+        default: any;
+    };
+    quickKey: {
+        type: PropType<TQuickKey>;
+        default: any;
+    };
+    max: {
+        type: PropType<DateType>;
+        default: any;
+    };
+    min: {
+        type: PropType<DateType>;
+        default: any;
+    };
+    range: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    hasQuick: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    block: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    format: {
+        type: PropType<DateFormatType>;
+        default: any;
+    };
+    adjustPosition: {
+        type: PropType<AdjustmentPosition>;
+        default: any;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: any;
+    };
+    startPlaceholder: {
+        type: StringConstructor;
+        default: any;
+    };
+    endPlaceholder: {
+        type: StringConstructor;
+        default: any;
+    };
+    /** 实例尺度（px），写入 `--w-prop-date-picker-size` */
+    size: {
+        type: NumberConstructor;
+        default: any;
+    };
+    /** 品牌主色 → `--w-prop-date-picker-color` */
+    color: {
+        type: StringConstructor;
+        default: any;
+    };
+    cssVars: {
+        type: PropType<CssVars>;
+        default: any;
+    };
+    nearby: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'update:show': (_v: boolean) => true;
+    'update:modelValue': (_v: DateType) => true;
+    'update:start': (_v: DateType) => true;
+    'update:end': (_v: DateType) => true;
+    'update:quickKey': (_v: TQuickKey | undefined) => true;
+    change: (_v?: DateType) => true;
+    changeQuick: (_v: DatePickerChangeQuickPayload) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<DateType>;
+        default: any;
+    };
+    start: {
+        type: PropType<DateType>;
+        default: any;
+    };
+    end: {
+        type: PropType<DateType>;
+        default: any;
+    };
+    quickKey: {
+        type: PropType<TQuickKey>;
+        default: any;
+    };
+    max: {
+        type: PropType<DateType>;
+        default: any;
+    };
+    min: {
+        type: PropType<DateType>;
+        default: any;
+    };
+    range: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    hasQuick: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    block: {
+        type: BooleanConstructor;
+        default: any;
+    };
+    format: {
+        type: PropType<DateFormatType>;
+        default: any;
+    };
+    adjustPosition: {
+        type: PropType<AdjustmentPosition>;
+        default: any;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: any;
+    };
+    startPlaceholder: {
+        type: StringConstructor;
+        default: any;
+    };
+    endPlaceholder: {
+        type: StringConstructor;
+        default: any;
+    };
+    /** 实例尺度（px），写入 `--w-prop-date-picker-size` */
+    size: {
+        type: NumberConstructor;
+        default: any;
+    };
+    /** 品牌主色 → `--w-prop-date-picker-color` */
+    color: {
+        type: StringConstructor;
+        default: any;
+    };
+    cssVars: {
+        type: PropType<CssVars>;
+        default: any;
+    };
+    nearby: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onChange?: (_v?: DateType) => any;
+    "onUpdate:show"?: (_v: boolean) => any;
+    "onUpdate:modelValue"?: (_v: DateType) => any;
+    "onUpdate:start"?: (_v: DateType) => any;
+    "onUpdate:end"?: (_v: DateType) => any;
+    "onUpdate:quickKey"?: (_v: "Today" | "Yesterday" | "Recent3Day" | "Recent7Day" | "ThisWeek" | "PreWeek" | "ThisMonth" | "PreMonth" | "ThisYear") => any;
+    onChangeQuick?: (_v: DatePickerChangeQuickPayload) => any;
+}>, {
+    min: DateType;
+    max: DateType;
+    size: number;
+    block: boolean;
+    start: DateType;
+    end: DateType;
+    adjustPosition: AdjustmentPosition;
+    color: string;
+    show: boolean;
+    cssVars: CssVars;
+    modelValue: DateType;
+    disabled: boolean;
+    range: boolean;
+    clearable: boolean;
+    placeholder: string;
+    format: DateFormatType;
+    hasQuick: boolean;
+    startPlaceholder: string;
+    endPlaceholder: string;
+    nearby: boolean;
+    quickKey: "Today" | "Yesterday" | "Recent3Day" | "Recent7Day" | "ThisWeek" | "PreWeek" | "ThisMonth" | "PreMonth" | "ThisYear";
+}, SlotsType<DatePickerSlots>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/date/DatePicker.js

@@ -0,0 +1,349 @@
+import useComponentConfig from "../../use/useComponentConfig.js";
+import { effectiveBgVar, effectiveSizeVar, effectiveTextVar, mergeStyle, propColorToCssVars, propSizeToCssVars, toCssVarsStyle } from "../../util/cssVars.js";
+import useFormItem from "../../use/useFormItem.js";
+import Layer_default from "../layer/Layer.js";
+import Trigger_default from "../trigger/Trigger.js";
+import { useUII18n } from "../../use/useUII18n.js";
+import { getRangeDate } from "../../use/useDate.js";
+import { useDateText, useDateView } from "./_use/useDateModules.js";
+import DatePanel_default from "./DatePanel.js";
+import { getQuickDateText, isQuickRangeActive } from "./_use/quickDate.js";
+import QuickDate_default from "./QuickDate.js";
+import { DATE_PICKER_FALLBACK } from "./config.js";
+import { Fragment, computed, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, reactive, ref, watch } from "vue";
+//#region components/date/DatePicker.tsx
+var DatePicker_default = /* @__PURE__ */ defineComponent({
+	name: "DatePicker",
+	inheritAttrs: false,
+	props: {
+		show: {
+			type: Boolean,
+			default: false
+		},
+		modelValue: {
+			type: [
+				Number,
+				Date,
+				String
+			],
+			default: void 0
+		},
+		start: {
+			type: [
+				Number,
+				Date,
+				String
+			],
+			default: void 0
+		},
+		end: {
+			type: [
+				Number,
+				Date,
+				String
+			],
+			default: void 0
+		},
+		quickKey: {
+			type: String,
+			default: void 0
+		},
+		max: {
+			type: [
+				Number,
+				Date,
+				String
+			],
+			default: void 0
+		},
+		min: {
+			type: [
+				Number,
+				Date,
+				String
+			],
+			default: void 0
+		},
+		range: {
+			type: Boolean,
+			default: void 0
+		},
+		hasQuick: {
+			type: Boolean,
+			default: void 0
+		},
+		clearable: {
+			type: Boolean,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		block: {
+			type: Boolean,
+			default: void 0
+		},
+		format: {
+			type: String,
+			default: void 0
+		},
+		adjustPosition: {
+			type: String,
+			default: void 0
+		},
+		placeholder: {
+			type: String,
+			default: void 0
+		},
+		startPlaceholder: {
+			type: String,
+			default: void 0
+		},
+		endPlaceholder: {
+			type: String,
+			default: void 0
+		},
+		/** 实例尺度（px），写入 `--w-prop-date-picker-size` */
+		size: {
+			type: Number,
+			default: void 0
+		},
+		/** 品牌主色 → `--w-prop-date-picker-color` */
+		color: {
+			type: String,
+			default: void 0
+		},
+		cssVars: {
+			type: Object,
+			default: void 0
+		},
+		nearby: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: {
+		"update:show": (_v) => true,
+		"update:modelValue": (_v) => true,
+		"update:start": (_v) => true,
+		"update:end": (_v) => true,
+		"update:quickKey": (_v) => true,
+		change: (_v) => true,
+		changeQuick: (_v) => true
+	},
+	slots: Object,
+	setup(props, { attrs, emit, slots, expose }) {
+		const { formItem, useDisabled } = useFormItem();
+		const cfg = useComponentConfig("DatePicker", props, DATE_PICKER_FALLBACK);
+		const { t } = useUII18n();
+		const disabled = useDisabled(computed(() => cfg.value.disabled));
+		const isRange = computed(() => !!cfg.value.range);
+		const visible = ref(props.show);
+		const datePickerPlaceholder = computed(() => cfg.value.placeholder || t("date.placeholder"));
+		const startDatePlaceholder = computed(() => cfg.value.startPlaceholder || t("date.startPlaceholder"));
+		const endDatePlaceholder = computed(() => cfg.value.endPlaceholder || t("date.endPlaceholder"));
+		/** 面板打开时快照区间，两端都变后自动关闭 */
+		const oldDateRange = reactive({
+			start: void 0,
+			end: void 0
+		});
+		const formatRef = computed(() => cfg.value.format);
+		const text = useDateText(formatRef, computed(() => props.modelValue));
+		const textStart = useDateText(formatRef, computed(() => props.start));
+		const textEnd = useDateText(formatRef, computed(() => props.end));
+		const quickActive = computed(() => isRange.value ? isQuickRangeActive(props.quickKey, props.start, props.end) : false);
+		const quickText = computed(() => quickActive.value ? getQuickDateText(props.quickKey, t) : void 0);
+		/** 插槽/展示用：日期区间文案 */
+		const rangeDisplayText = computed(() => {
+			if (isRange.value) {
+				const start = textStart.value;
+				const end = textEnd.value;
+				if (!start && !end) return void 0;
+				return `${start || startDatePlaceholder.value} ~ ${end || endDatePlaceholder.value}`;
+			}
+			return text.value;
+		});
+		/** 触发器展示：快捷选中有效时用快捷描述，否则用日期文案 */
+		const slotDisplayText = computed(() => quickText.value || rangeDisplayText.value);
+		/** 内置 Trigger 用：快捷选中时显示描述；否则范围模式为 [start, ~, end] */
+		const triggerText = computed(() => {
+			if (quickText.value) return quickText.value;
+			if (isRange.value) {
+				const start = textStart.value;
+				const end = textEnd.value;
+				if (start || end) return [
+					start || startDatePlaceholder.value,
+					createVNode("span", null, [createTextVNode("~")]),
+					end || endDatePlaceholder.value
+				];
+				return;
+			}
+			return text.value;
+		});
+		const triggerPlaceholder = computed(() => isRange.value ? `${startDatePlaceholder.value}~${endDatePlaceholder.value}` : datePickerPlaceholder.value);
+		function open() {
+			if (!disabled.value) visible.value = true;
+		}
+		function close() {
+			visible.value = false;
+		}
+		function toggle() {
+			if (disabled.value) return;
+			visible.value = !visible.value;
+		}
+		function clear() {
+			emit("update:start", void 0);
+			emit("update:end", void 0);
+			emit("update:modelValue", void 0);
+			emit("update:quickKey", void 0);
+			emit("change", void 0);
+			formItem?.validate("change");
+		}
+		const triggerSlotProps = computed(() => ({
+			text: slotDisplayText.value,
+			startText: textStart.value,
+			endText: textEnd.value,
+			quickKey: quickActive.value ? props.quickKey : void 0,
+			quickText: quickText.value,
+			placeholder: triggerPlaceholder.value,
+			startPlaceholder: startDatePlaceholder.value,
+			endPlaceholder: endDatePlaceholder.value,
+			visible: visible.value,
+			disabled: disabled.value,
+			clearable: cfg.value.clearable,
+			range: isRange.value,
+			clear,
+			open,
+			close,
+			toggle
+		}));
+		const sizeVars = computed(() => toCssVarsStyle({
+			...propSizeToCssVars("date-picker", props.size),
+			...propColorToCssVars("date-picker", props.color),
+			"--w-prop-trigger-size": effectiveSizeVar("date-picker"),
+			"--w-prop-trigger-bg-color": effectiveBgVar("date-picker"),
+			"--w-prop-trigger-text-color": effectiveTextVar("date-picker"),
+			"--w-prop-layer-bg-color": effectiveBgVar("date-picker"),
+			"--w-prop-layer-text-color": effectiveTextVar("date-picker"),
+			...props.cssVars
+		}));
+		const rootStyle = computed(() => mergeStyle(sizeVars.value, attrs.style));
+		const layerOptions = computed(() => ({
+			adjustPosition: cfg.value.adjustPosition,
+			immediate: true,
+			show: visible.value,
+			nearby: props.nearby,
+			disabled: disabled.value,
+			placement: "bottom-start",
+			gap: 2,
+			hasArrow: false,
+			transitionName: "w-slide-y",
+			layerClass: ["w-date-picker", isRange.value ? "w-date-picker-range" : ""],
+			layerStyle: sizeVars.value,
+			"onUpdate:show": (b) => {
+				visible.value = b;
+			}
+		}));
+		function renderTrigger(layerProps) {
+			if (slots.trigger) return slots.trigger({
+				...triggerSlotProps.value,
+				visible: layerProps?.visible ?? visible.value,
+				open: layerProps?.show ?? open,
+				close: layerProps?.hide ?? close,
+				toggle: layerProps?.toggle ?? toggle
+			});
+			const { style: _style, class: className, ...restAttrs } = attrs;
+			const triggerOptions = mergeProps(restAttrs, {
+				class: className,
+				placeholder: triggerPlaceholder.value,
+				disabled: disabled.value,
+				block: cfg.value.block,
+				clearable: cfg.value.clearable,
+				text: triggerText.value,
+				active: visible.value,
+				style: rootStyle.value,
+				onClear: clear
+			});
+			return createVNode(Trigger_default, triggerOptions, null);
+		}
+		const { formatIsTime } = useDateView(formatRef);
+		async function maybeClose() {
+			emit("change");
+			await nextTick();
+			if (!formatIsTime.value && props.start !== oldDateRange.start && props.end !== oldDateRange.end && props.start && props.end) visible.value = false;
+		}
+		watch(() => props.show, (b) => {
+			visible.value = b;
+		});
+		watch(visible, (b) => {
+			if (b) {
+				oldDateRange.start = props.start;
+				oldDateRange.end = props.end;
+			}
+			emit("update:show", b);
+		});
+		const startOpts = computed(() => ({
+			placeholder: startDatePlaceholder.value,
+			modelValue: props.start,
+			format: formatRef.value,
+			max: props.max,
+			"onUpdate:modelValue": (v) => {
+				emit("update:start", v);
+			},
+			onChange: maybeClose
+		}));
+		const endOpts = computed(() => ({
+			placeholder: endDatePlaceholder.value,
+			modelValue: props.end,
+			format: formatRef.value,
+			min: props.min,
+			"onUpdate:modelValue": (v) => {
+				emit("update:end", v);
+			},
+			onChange: async (opts) => {
+				await nextTick();
+				if (formatIsTime.value && props.start && props.end && opts.isClose) visible.value = false;
+				else maybeClose();
+			}
+		}));
+		const datePanelOpts = computed(() => ({
+			modelValue: props.modelValue,
+			format: formatRef.value,
+			max: props.max,
+			min: props.min,
+			"onUpdate:modelValue": (v) => {
+				emit("update:modelValue", v);
+			},
+			onChange: (res) => {
+				if (res.isClose) visible.value = false;
+			}
+		}));
+		const quickOpts = computed(() => ({
+			quickKey: props.quickKey,
+			start: props.start,
+			end: props.end,
+			onChange: async (v) => {
+				emit("update:start", v.start);
+				emit("update:end", v.end);
+				emit("update:quickKey", v.key);
+				await nextTick();
+				emit("changeQuick", v);
+				visible.value = false;
+			}
+		}));
+		expose({ getRangeDate: (k) => getRangeDate(k) });
+		return () => createVNode(Layer_default, layerOptions.value, {
+			trigger: renderTrigger,
+			default: () => isRange.value ? createVNode(Fragment, null, [cfg.value.hasQuick ? createVNode(QuickDate_default, quickOpts.value, null) : null, createVNode("div", { "class": "w-date-start-end" }, [
+				createVNode("div", null, [createVNode(DatePanel_default, startOpts.value, null)]),
+				createVNode("div", { "class": "w-date-range-gap" }, null),
+				createVNode("div", null, [createVNode(DatePanel_default, endOpts.value, null)])
+			])]) : createVNode(DatePanel_default, datePanelOpts.value, null)
+		});
+	}
+});
+//#endregion
+export { DATE_PICKER_FALLBACK, DatePicker_default as default };
+
+//# sourceMappingURL=DatePicker.js.map