@robot-admin/naive-ui-components 0.6.13 → 0.6.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/C_Date.js.map +1 -1
- package/dist/C_Date2.js +1 -1
- package/dist/C_Date2.js.map +1 -1
- package/dist/C_Steps-BHYNJI1l.css.map +1 -0
- package/dist/C_Steps-DY7vl-4I.css.map +1 -0
- package/dist/C_Steps.css +38 -38
- package/dist/C_Steps.js.map +1 -1
- package/dist/C_Steps2.js +1 -1
- package/dist/C_Steps2.js.map +1 -1
- package/dist/constants.d.ts +4 -4
- package/dist/constants2.d.ts +4 -4
- package/dist/constants3.d.ts +1 -1
- package/dist/constants4.d.ts +2 -2
- package/dist/data.d.ts +1 -1
- package/dist/index10.vue.d.ts +3 -3
- package/dist/index11.vue.d.ts +2 -2
- package/dist/index12.vue.d.ts +17 -13
- package/dist/index13.vue.d.ts +2 -2
- package/dist/index15.vue.d.ts +3 -3
- package/dist/index16.vue.d.ts +2 -2
- package/dist/index17.vue.d.ts +1 -1
- package/dist/index18.vue.d.ts +7 -7
- package/dist/index2.vue.d.ts +1 -1
- package/dist/index20.vue.d.ts +2 -2
- package/dist/index21.vue.d.ts +3 -3
- package/dist/index25.vue.d.ts +2 -2
- package/dist/index26.vue.d.ts +2 -2
- package/dist/index6.vue.d.ts +1 -1
- package/dist/index7.vue.d.ts +2 -2
- package/dist/index8.vue.d.ts +3 -3
- package/dist/index9.vue.d.ts +2 -2
- package/dist/style.css +39 -39
- package/dist/useCalendarEvents.d.ts +1 -1
- package/dist/useCropperCore.d.ts +5 -5
- package/dist/useDraggableLayout.d.ts +8 -8
- package/dist/useDynamicFormState.d.ts +2 -2
- package/dist/useInfiniteScroll.d.ts +3 -3
- package/dist/useModalEdit.d.ts +2 -2
- package/dist/useSplitResize.d.ts +2 -2
- package/dist/useTimeSelection.d.ts +2 -2
- package/dist/useTreeOperations.d.ts +3 -3
- package/dist/useWorkflowValidation.d.ts +4 -4
- package/package.json +1 -1
- package/dist/C_Steps-HZ438_4G.css.map +0 -1
- package/dist/C_Steps-uMxhEbg-.css.map +0 -1
package/dist/C_Date.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Date.js","names":["mode","placeholder","disabled","valueFormat","$attrs","startPlaceholder","endPlaceholder","startDateProps","endDateProps"],"sources":["../src/components/C_Date/index.vue","../src/components/C_Date/index.vue","../src/components/C_Date/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-28\r\n * @Description: 日期选择器组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"inline-block\">\r\n <NDatePicker\r\n v-if=\"mode === 'date'\"\r\n v-model:value=\"singleDate\"\r\n type=\"date\"\r\n :placeholder=\"placeholder || '请选择日期'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleSingleDateChange\"\r\n />\r\n\r\n <NDatePicker\r\n v-else-if=\"mode === 'datetime'\"\r\n v-model:value=\"singleDateTime\"\r\n type=\"datetime\"\r\n :placeholder=\"placeholder || '请选择日期时间'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleSingleDateTimeChange\"\r\n />\r\n\r\n <NDatePicker\r\n v-else-if=\"mode === 'daterange'\"\r\n v-model:value=\"dateRange\"\r\n type=\"daterange\"\r\n :start-placeholder=\"startPlaceholder || '开始日期'\"\r\n :end-placeholder=\"endPlaceholder || '结束日期'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleDateRangeChange\"\r\n />\r\n\r\n <NDatePicker\r\n v-else-if=\"mode === 'datetimerange'\"\r\n v-model:value=\"dateTimeRange\"\r\n type=\"datetimerange\"\r\n :start-placeholder=\"startPlaceholder || '开始日期时间'\"\r\n :end-placeholder=\"endPlaceholder || '结束日期时间'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleDateTimeRangeChange\"\r\n />\r\n\r\n <div v-else-if=\"mode === 'smart-range'\" class=\"inline-block\">\r\n <div class=\"flex gap-2.5 items-center\">\r\n <NDatePicker\r\n class=\"flex-1\"\r\n v-model:value=\"startDate\"\r\n type=\"date\"\r\n :placeholder=\"startPlaceholder || '请选择开始日期'\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"startDateProps\"\r\n />\r\n <NDatePicker\r\n class=\"flex-1\"\r\n v-model:value=\"endDate\"\r\n type=\"date\"\r\n :placeholder=\"endPlaceholder || '请选择结束日期'\"\r\n :disabled=\"endDateDisabled\"\r\n :is-date-disabled=\"endDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"endDateProps\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, watch } from \"vue\";\r\nimport { NDatePicker } from \"naive-ui\";\r\n\r\ndefineOptions({ name: \"C_Date\" });\r\n\r\ntype DatePickerMode =\r\n | \"date\"\r\n | \"datetime\"\r\n | \"daterange\"\r\n | \"datetimerange\"\r\n | \"smart-range\";\r\n\r\ntype DateValue = number | null;\r\ntype DateRangeValue = [number, number] | null;\r\n\r\ninterface Props {\r\n mode?: DatePickerMode;\r\n placeholder?: string;\r\n startPlaceholder?: string;\r\n endPlaceholder?: string;\r\n disabled?: boolean;\r\n disabledBeforeToday?: boolean;\r\n disabledAfterToday?: boolean;\r\n valueFormat?: string;\r\n startDateProps?: Record<string, any>;\r\n endDateProps?: Record<string, any>;\r\n}\r\n\r\ninterface Emits {\r\n (e: \"update:singleDate\", value: DateValue): void;\r\n (e: \"update:singleDateTime\", value: DateValue): void;\r\n (e: \"update:dateRange\", value: DateRangeValue): void;\r\n (e: \"update:dateTimeRange\", value: DateRangeValue): void;\r\n (e: \"update:smartRange\", value: DateRangeValue): void;\r\n (e: \"change\", value: DateValue | DateRangeValue): void;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n mode: \"date\",\r\n placeholder: \"\",\r\n startPlaceholder: \"\",\r\n endPlaceholder: \"\",\r\n disabled: false,\r\n disabledBeforeToday: false,\r\n disabledAfterToday: false,\r\n valueFormat: \"yyyy-MM-dd\",\r\n startDateProps: () => ({}),\r\n endDateProps: () => ({}),\r\n});\r\n\r\nconst emits = defineEmits<Emits>();\r\n\r\nconst singleDate = ref<DateValue>(null);\r\nconst singleDateTime = ref<DateValue>(null);\r\nconst dateRange = ref<DateRangeValue>(null);\r\nconst dateTimeRange = ref<DateRangeValue>(null);\r\nconst startDate = ref<DateValue>(null);\r\nconst endDate = ref<DateValue>(null);\r\nconst endDateDisabled = ref(true);\r\n\r\nconst getTodayTimestamp = (): number => {\r\n const today = new Date();\r\n today.setHours(0, 0, 0, 0);\r\n return today.getTime();\r\n};\r\n\r\nconst singleDisabledDate = (timestamp: number): boolean => {\r\n const todayTimestamp = getTodayTimestamp();\r\n if (props.disabledBeforeToday && timestamp < todayTimestamp) return true;\r\n if (props.disabledAfterToday && timestamp > todayTimestamp) return true;\r\n return false;\r\n};\r\n\r\nconst endDisabledDate = (timestamp: number): boolean => {\r\n if (!startDate.value) return true;\r\n if (timestamp < startDate.value) return true;\r\n return singleDisabledDate(timestamp);\r\n};\r\n\r\nconst handleSingleDateChange = (value: DateValue): void => {\r\n emits(\"update:singleDate\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nconst handleSingleDateTimeChange = (value: DateValue): void => {\r\n emits(\"update:singleDateTime\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nconst handleDateRangeChange = (value: DateRangeValue): void => {\r\n emits(\"update:dateRange\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nconst handleDateTimeRangeChange = (value: DateRangeValue): void => {\r\n emits(\"update:dateTimeRange\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nwatch(\r\n () => [startDate.value, endDate.value],\r\n ([startVal, endVal]) => {\r\n if (!startVal) {\r\n endDate.value = null;\r\n endDateDisabled.value = true;\r\n return;\r\n }\r\n if (startVal) {\r\n endDateDisabled.value = false;\r\n }\r\n if (startVal && endVal) {\r\n const rangeValue: DateRangeValue = [startVal, endVal];\r\n emits(\"update:smartRange\", rangeValue);\r\n emits(\"change\", rangeValue);\r\n }\r\n },\r\n { deep: true },\r\n);\r\n\r\ndefineExpose({\r\n singleDate,\r\n singleDateTime,\r\n dateRange,\r\n dateTimeRange,\r\n startDate,\r\n endDate,\r\n clearAll: () => {\r\n singleDate.value = null;\r\n singleDateTime.value = null;\r\n dateRange.value = null;\r\n dateTimeRange.value = null;\r\n startDate.value = null;\r\n endDate.value = null;\r\n endDateDisabled.value = true;\r\n },\r\n});\r\n</script>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-28\r\n * @Description: 日期选择器组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"inline-block\">\r\n <NDatePicker\r\n v-if=\"mode === 'date'\"\r\n v-model:value=\"singleDate\"\r\n type=\"date\"\r\n :placeholder=\"placeholder || '请选择日期'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleSingleDateChange\"\r\n />\r\n\r\n <NDatePicker\r\n v-else-if=\"mode === 'datetime'\"\r\n v-model:value=\"singleDateTime\"\r\n type=\"datetime\"\r\n :placeholder=\"placeholder || '请选择日期时间'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleSingleDateTimeChange\"\r\n />\r\n\r\n <NDatePicker\r\n v-else-if=\"mode === 'daterange'\"\r\n v-model:value=\"dateRange\"\r\n type=\"daterange\"\r\n :start-placeholder=\"startPlaceholder || '开始日期'\"\r\n :end-placeholder=\"endPlaceholder || '结束日期'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleDateRangeChange\"\r\n />\r\n\r\n <NDatePicker\r\n v-else-if=\"mode === 'datetimerange'\"\r\n v-model:value=\"dateTimeRange\"\r\n type=\"datetimerange\"\r\n :start-placeholder=\"startPlaceholder || '开始日期时间'\"\r\n :end-placeholder=\"endPlaceholder || '结束日期时间'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleDateTimeRangeChange\"\r\n />\r\n\r\n <div v-else-if=\"mode === 'smart-range'\" class=\"inline-block\">\r\n <div class=\"flex gap-2.5 items-center\">\r\n <NDatePicker\r\n class=\"flex-1\"\r\n v-model:value=\"startDate\"\r\n type=\"date\"\r\n :placeholder=\"startPlaceholder || '请选择开始日期'\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"startDateProps\"\r\n />\r\n <NDatePicker\r\n class=\"flex-1\"\r\n v-model:value=\"endDate\"\r\n type=\"date\"\r\n :placeholder=\"endPlaceholder || '请选择结束日期'\"\r\n :disabled=\"endDateDisabled\"\r\n :is-date-disabled=\"endDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"endDateProps\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, watch } from \"vue\";\r\nimport { NDatePicker } from \"naive-ui\";\r\n\r\ndefineOptions({ name: \"C_Date\" });\r\n\r\ntype DatePickerMode =\r\n | \"date\"\r\n | \"datetime\"\r\n | \"daterange\"\r\n | \"datetimerange\"\r\n | \"smart-range\";\r\n\r\ntype DateValue = number | null;\r\ntype DateRangeValue = [number, number] | null;\r\n\r\ninterface Props {\r\n mode?: DatePickerMode;\r\n placeholder?: string;\r\n startPlaceholder?: string;\r\n endPlaceholder?: string;\r\n disabled?: boolean;\r\n disabledBeforeToday?: boolean;\r\n disabledAfterToday?: boolean;\r\n valueFormat?: string;\r\n startDateProps?: Record<string, any>;\r\n endDateProps?: Record<string, any>;\r\n}\r\n\r\ninterface Emits {\r\n (e: \"update:singleDate\", value: DateValue): void;\r\n (e: \"update:singleDateTime\", value: DateValue): void;\r\n (e: \"update:dateRange\", value: DateRangeValue): void;\r\n (e: \"update:dateTimeRange\", value: DateRangeValue): void;\r\n (e: \"update:smartRange\", value: DateRangeValue): void;\r\n (e: \"change\", value: DateValue | DateRangeValue): void;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n mode: \"date\",\r\n placeholder: \"\",\r\n startPlaceholder: \"\",\r\n endPlaceholder: \"\",\r\n disabled: false,\r\n disabledBeforeToday: false,\r\n disabledAfterToday: false,\r\n valueFormat: \"yyyy-MM-dd\",\r\n startDateProps: () => ({}),\r\n endDateProps: () => ({}),\r\n});\r\n\r\nconst emits = defineEmits<Emits>();\r\n\r\nconst singleDate = ref<DateValue>(null);\r\nconst singleDateTime = ref<DateValue>(null);\r\nconst dateRange = ref<DateRangeValue>(null);\r\nconst dateTimeRange = ref<DateRangeValue>(null);\r\nconst startDate = ref<DateValue>(null);\r\nconst endDate = ref<DateValue>(null);\r\nconst endDateDisabled = ref(true);\r\n\r\nconst getTodayTimestamp = (): number => {\r\n const today = new Date();\r\n today.setHours(0, 0, 0, 0);\r\n return today.getTime();\r\n};\r\n\r\nconst singleDisabledDate = (timestamp: number): boolean => {\r\n const todayTimestamp = getTodayTimestamp();\r\n if (props.disabledBeforeToday && timestamp < todayTimestamp) return true;\r\n if (props.disabledAfterToday && timestamp > todayTimestamp) return true;\r\n return false;\r\n};\r\n\r\nconst endDisabledDate = (timestamp: number): boolean => {\r\n if (!startDate.value) return true;\r\n if (timestamp < startDate.value) return true;\r\n return singleDisabledDate(timestamp);\r\n};\r\n\r\nconst handleSingleDateChange = (value: DateValue): void => {\r\n emits(\"update:singleDate\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nconst handleSingleDateTimeChange = (value: DateValue): void => {\r\n emits(\"update:singleDateTime\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nconst handleDateRangeChange = (value: DateRangeValue): void => {\r\n emits(\"update:dateRange\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nconst handleDateTimeRangeChange = (value: DateRangeValue): void => {\r\n emits(\"update:dateTimeRange\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nwatch(\r\n () => [startDate.value, endDate.value],\r\n ([startVal, endVal]) => {\r\n if (!startVal) {\r\n endDate.value = null;\r\n endDateDisabled.value = true;\r\n return;\r\n }\r\n if (startVal) {\r\n endDateDisabled.value = false;\r\n }\r\n if (startVal && endVal) {\r\n const rangeValue: DateRangeValue = [startVal, endVal];\r\n emits(\"update:smartRange\", rangeValue);\r\n emits(\"change\", rangeValue);\r\n }\r\n },\r\n { deep: true },\r\n);\r\n\r\ndefineExpose({\r\n singleDate,\r\n singleDateTime,\r\n dateRange,\r\n dateTimeRange,\r\n startDate,\r\n endDate,\r\n clearAll: () => {\r\n singleDate.value = null;\r\n singleDateTime.value = null;\r\n dateRange.value = null;\r\n dateTimeRange.value = null;\r\n startDate.value = null;\r\n endDate.value = null;\r\n endDateDisabled.value = true;\r\n },\r\n});\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-28\r\n * @Description: 日期选择器组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"inline-block\">\r\n <NDatePicker\r\n v-if=\"mode === 'date'\"\r\n v-model:value=\"singleDate\"\r\n type=\"date\"\r\n :placeholder=\"placeholder || '请选择日期'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleSingleDateChange\"\r\n />\r\n\r\n <NDatePicker\r\n v-else-if=\"mode === 'datetime'\"\r\n v-model:value=\"singleDateTime\"\r\n type=\"datetime\"\r\n :placeholder=\"placeholder || '请选择日期时间'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleSingleDateTimeChange\"\r\n />\r\n\r\n <NDatePicker\r\n v-else-if=\"mode === 'daterange'\"\r\n v-model:value=\"dateRange\"\r\n type=\"daterange\"\r\n :start-placeholder=\"startPlaceholder || '开始日期'\"\r\n :end-placeholder=\"endPlaceholder || '结束日期'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleDateRangeChange\"\r\n />\r\n\r\n <NDatePicker\r\n v-else-if=\"mode === 'datetimerange'\"\r\n v-model:value=\"dateTimeRange\"\r\n type=\"datetimerange\"\r\n :start-placeholder=\"startPlaceholder || '开始日期时间'\"\r\n :end-placeholder=\"endPlaceholder || '结束日期时间'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleDateTimeRangeChange\"\r\n />\r\n\r\n <div v-else-if=\"mode === 'smart-range'\" class=\"inline-block\">\r\n <div class=\"flex gap-2.5 items-center\">\r\n <NDatePicker\r\n class=\"flex-1\"\r\n v-model:value=\"startDate\"\r\n type=\"date\"\r\n :placeholder=\"startPlaceholder || '请选择开始日期'\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"startDateProps\"\r\n />\r\n <NDatePicker\r\n class=\"flex-1\"\r\n v-model:value=\"endDate\"\r\n type=\"date\"\r\n :placeholder=\"endPlaceholder || '请选择结束日期'\"\r\n :disabled=\"endDateDisabled\"\r\n :is-date-disabled=\"endDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"endDateProps\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, watch } from \"vue\";\r\nimport { NDatePicker } from \"naive-ui\";\r\n\r\ndefineOptions({ name: \"C_Date\" });\r\n\r\ntype DatePickerMode =\r\n | \"date\"\r\n | \"datetime\"\r\n | \"daterange\"\r\n | \"datetimerange\"\r\n | \"smart-range\";\r\n\r\ntype DateValue = number | null;\r\ntype DateRangeValue = [number, number] | null;\r\n\r\ninterface Props {\r\n mode?: DatePickerMode;\r\n placeholder?: string;\r\n startPlaceholder?: string;\r\n endPlaceholder?: string;\r\n disabled?: boolean;\r\n disabledBeforeToday?: boolean;\r\n disabledAfterToday?: boolean;\r\n valueFormat?: string;\r\n startDateProps?: Record<string, any>;\r\n endDateProps?: Record<string, any>;\r\n}\r\n\r\ninterface Emits {\r\n (e: \"update:singleDate\", value: DateValue): void;\r\n (e: \"update:singleDateTime\", value: DateValue): void;\r\n (e: \"update:dateRange\", value: DateRangeValue): void;\r\n (e: \"update:dateTimeRange\", value: DateRangeValue): void;\r\n (e: \"update:smartRange\", value: DateRangeValue): void;\r\n (e: \"change\", value: DateValue | DateRangeValue): void;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n mode: \"date\",\r\n placeholder: \"\",\r\n startPlaceholder: \"\",\r\n endPlaceholder: \"\",\r\n disabled: false,\r\n disabledBeforeToday: false,\r\n disabledAfterToday: false,\r\n valueFormat: \"yyyy-MM-dd\",\r\n startDateProps: () => ({}),\r\n endDateProps: () => ({}),\r\n});\r\n\r\nconst emits = defineEmits<Emits>();\r\n\r\nconst singleDate = ref<DateValue>(null);\r\nconst singleDateTime = ref<DateValue>(null);\r\nconst dateRange = ref<DateRangeValue>(null);\r\nconst dateTimeRange = ref<DateRangeValue>(null);\r\nconst startDate = ref<DateValue>(null);\r\nconst endDate = ref<DateValue>(null);\r\nconst endDateDisabled = ref(true);\r\n\r\nconst getTodayTimestamp = (): number => {\r\n const today = new Date();\r\n today.setHours(0, 0, 0, 0);\r\n return today.getTime();\r\n};\r\n\r\nconst singleDisabledDate = (timestamp: number): boolean => {\r\n const todayTimestamp = getTodayTimestamp();\r\n if (props.disabledBeforeToday && timestamp < todayTimestamp) return true;\r\n if (props.disabledAfterToday && timestamp > todayTimestamp) return true;\r\n return false;\r\n};\r\n\r\nconst endDisabledDate = (timestamp: number): boolean => {\r\n if (!startDate.value) return true;\r\n if (timestamp < startDate.value) return true;\r\n return singleDisabledDate(timestamp);\r\n};\r\n\r\nconst handleSingleDateChange = (value: DateValue): void => {\r\n emits(\"update:singleDate\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nconst handleSingleDateTimeChange = (value: DateValue): void => {\r\n emits(\"update:singleDateTime\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nconst handleDateRangeChange = (value: DateRangeValue): void => {\r\n emits(\"update:dateRange\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nconst handleDateTimeRangeChange = (value: DateRangeValue): void => {\r\n emits(\"update:dateTimeRange\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nwatch(\r\n () => [startDate.value, endDate.value],\r\n ([startVal, endVal]) => {\r\n if (!startVal) {\r\n endDate.value = null;\r\n endDateDisabled.value = true;\r\n return;\r\n }\r\n if (startVal) {\r\n endDateDisabled.value = false;\r\n }\r\n if (startVal && endVal) {\r\n const rangeValue: DateRangeValue = [startVal, endVal];\r\n emits(\"update:smartRange\", rangeValue);\r\n emits(\"change\", rangeValue);\r\n }\r\n },\r\n { deep: true },\r\n);\r\n\r\ndefineExpose({\r\n singleDate,\r\n singleDateTime,\r\n dateRange,\r\n dateTimeRange,\r\n startDate,\r\n endDate,\r\n clearAll: () => {\r\n singleDate.value = null;\r\n singleDateTime.value = null;\r\n dateRange.value = null;\r\n dateTimeRange.value = null;\r\n startDate.value = null;\r\n endDate.value = null;\r\n endDateDisabled.value = true;\r\n },\r\n});\r\n</script>\r\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"C_Date.js","names":["mode","placeholder","disabled","valueFormat","$attrs","startPlaceholder","endPlaceholder","startDateProps","endDateProps"],"sources":["../src/components/C_Date/index.vue","../src/components/C_Date/index.vue","../src/components/C_Date/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-05-28\n * @Description: 日期选择器组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"inline-block\">\n <NDatePicker\n v-if=\"mode === 'date'\"\n v-model:formatted-value=\"singleDateModel\"\n type=\"date\"\n :placeholder=\"placeholder || '请选择日期'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <NDatePicker\n v-else-if=\"mode === 'datetime'\"\n v-model:formatted-value=\"singleDateTimeModel\"\n type=\"datetime\"\n :placeholder=\"placeholder || '请选择日期时间'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <NDatePicker\n v-else-if=\"mode === 'daterange'\"\n v-model:formatted-value=\"dateRangeModel\"\n type=\"daterange\"\n :start-placeholder=\"startPlaceholder || '开始日期'\"\n :end-placeholder=\"endPlaceholder || '结束日期'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <NDatePicker\n v-else-if=\"mode === 'datetimerange'\"\n v-model:formatted-value=\"dateTimeRangeModel\"\n type=\"datetimerange\"\n :start-placeholder=\"startPlaceholder || '开始日期时间'\"\n :end-placeholder=\"endPlaceholder || '结束日期时间'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <div\n v-else-if=\"mode === 'smart-range'\"\n class=\"inline-block\"\n >\n <div class=\"flex gap-2.5 items-center\">\n <NDatePicker\n class=\"flex-1\"\n v-model:formatted-value=\"startDate\"\n type=\"date\"\n :placeholder=\"startPlaceholder || '请选择开始日期'\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"startDateProps\"\n />\n <NDatePicker\n class=\"flex-1\"\n v-model:formatted-value=\"endDate\"\n type=\"date\"\n :placeholder=\"endPlaceholder || '请选择结束日期'\"\n :disabled=\"endDateDisabled\"\n :is-date-disabled=\"endDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"endDateProps\"\n />\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\n import { ref, watch, computed } from 'vue'\n import { NDatePicker } from 'naive-ui'\n\n defineOptions({ name: 'C_Date' })\n\n type DatePickerMode =\n | 'date'\n | 'datetime'\n | 'daterange'\n | 'datetimerange'\n | 'smart-range'\n\n // 使用 formatted-value 绑定,值始终为格式化字符串\n type DateValue = string | null\n type DateRangeValue = [string, string] | null\n\n interface Props {\n mode?: DatePickerMode\n placeholder?: string\n startPlaceholder?: string\n endPlaceholder?: string\n disabled?: boolean\n disabledBeforeToday?: boolean\n disabledAfterToday?: boolean\n valueFormat?: string\n startDateProps?: Record<string, any>\n endDateProps?: Record<string, any>\n // v-model 值 props,支持受控模式(外部设置初始值 / 双向绑定)\n singleDate?: DateValue\n singleDateTime?: DateValue\n dateRange?: DateRangeValue\n dateTimeRange?: DateRangeValue\n smartRange?: DateRangeValue\n }\n\n interface Emits {\n (e: 'update:singleDate', value: DateValue): void\n (e: 'update:singleDateTime', value: DateValue): void\n (e: 'update:dateRange', value: DateRangeValue): void\n (e: 'update:dateTimeRange', value: DateRangeValue): void\n (e: 'update:smartRange', value: DateRangeValue): void\n (e: 'change', value: DateValue | DateRangeValue): void\n }\n\n const props = withDefaults(defineProps<Props>(), {\n mode: 'date',\n placeholder: '',\n startPlaceholder: '',\n endPlaceholder: '',\n disabled: false,\n disabledBeforeToday: false,\n disabledAfterToday: false,\n valueFormat: 'yyyy-MM-dd',\n startDateProps: () => ({}),\n endDateProps: () => ({}),\n singleDate: null,\n singleDateTime: null,\n dateRange: null,\n dateTimeRange: null,\n smartRange: null,\n })\n\n const emits = defineEmits<Emits>()\n\n // 今日零点时间戳 —— 模块级缓存,isDateDisabled 为高频回调,避免重复 new Date()\n const _todayStart = (() => {\n const d = new Date()\n d.setHours(0, 0, 0, 0)\n return d.getTime()\n })()\n\n // —— 四种基础模式:computed getter/setter 实现受控绑定 ——\n // 后缀 Model 避免与同名 prop 产生 vue/no-dupe-keys 冲突\n const singleDateModel = computed<DateValue>({\n get: () => props.singleDate ?? null,\n set: val => {\n emits('update:singleDate', val)\n emits('change', val)\n },\n })\n\n const singleDateTimeModel = computed<DateValue>({\n get: () => props.singleDateTime ?? null,\n set: val => {\n emits('update:singleDateTime', val)\n emits('change', val)\n },\n })\n\n const dateRangeModel = computed<DateRangeValue>({\n get: () => props.dateRange ?? null,\n set: val => {\n emits('update:dateRange', val)\n emits('change', val)\n },\n })\n\n const dateTimeRangeModel = computed<DateRangeValue>({\n get: () => props.dateTimeRange ?? null,\n set: val => {\n emits('update:dateTimeRange', val)\n emits('change', val)\n },\n })\n\n // —— smart-range:两个独立 ref(prop 名为 smartRange,start/endDate 无命名冲突)——\n const startDate = ref<DateValue>(null)\n const endDate = ref<DateValue>(null)\n const endDateDisabled = computed(() => !startDate.value)\n\n // 将外部 smartRange prop 同步到内部 startDate/endDate\n watch(\n () => props.smartRange,\n val => {\n const newStart = val?.[0] ?? null\n const newEnd = val?.[1] ?? null\n if (newStart === startDate.value && newEnd === endDate.value) return\n startDate.value = newStart\n endDate.value = newEnd\n },\n { immediate: true, deep: true }\n )\n\n // 用户选择后:两者均有值时 emit;清空开始日期时级联清空结束日期\n watch(\n () => [startDate.value, endDate.value] as const,\n ([startVal, endVal]) => {\n if (!startVal) {\n endDate.value = null\n return\n }\n if (endVal) {\n emits('update:smartRange', [startVal, endVal])\n emits('change', [startVal, endVal])\n }\n },\n { deep: true }\n )\n\n // —— 日期禁用逻辑 ——\n const singleDisabledDate = (timestamp: number): boolean => {\n if (props.disabledBeforeToday && timestamp < _todayStart) return true\n if (props.disabledAfterToday && timestamp > _todayStart) return true\n return false\n }\n\n const endDisabledDate = (timestamp: number): boolean => {\n if (!startDate.value) return true\n if (timestamp < new Date(startDate.value).getTime()) return true\n return singleDisabledDate(timestamp)\n }\n\n // clearAll:emit 驱动父组件清空同名绑定,同时重置 smart-range 内部 ref\n defineExpose({\n clearAll: () => {\n emits('update:singleDate', null)\n emits('update:singleDateTime', null)\n emits('update:dateRange', null)\n emits('update:dateTimeRange', null)\n emits('update:smartRange', null)\n startDate.value = null\n endDate.value = null\n },\n })\n</script>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-05-28\n * @Description: 日期选择器组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"inline-block\">\n <NDatePicker\n v-if=\"mode === 'date'\"\n v-model:formatted-value=\"singleDateModel\"\n type=\"date\"\n :placeholder=\"placeholder || '请选择日期'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <NDatePicker\n v-else-if=\"mode === 'datetime'\"\n v-model:formatted-value=\"singleDateTimeModel\"\n type=\"datetime\"\n :placeholder=\"placeholder || '请选择日期时间'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <NDatePicker\n v-else-if=\"mode === 'daterange'\"\n v-model:formatted-value=\"dateRangeModel\"\n type=\"daterange\"\n :start-placeholder=\"startPlaceholder || '开始日期'\"\n :end-placeholder=\"endPlaceholder || '结束日期'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <NDatePicker\n v-else-if=\"mode === 'datetimerange'\"\n v-model:formatted-value=\"dateTimeRangeModel\"\n type=\"datetimerange\"\n :start-placeholder=\"startPlaceholder || '开始日期时间'\"\n :end-placeholder=\"endPlaceholder || '结束日期时间'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <div\n v-else-if=\"mode === 'smart-range'\"\n class=\"inline-block\"\n >\n <div class=\"flex gap-2.5 items-center\">\n <NDatePicker\n class=\"flex-1\"\n v-model:formatted-value=\"startDate\"\n type=\"date\"\n :placeholder=\"startPlaceholder || '请选择开始日期'\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"startDateProps\"\n />\n <NDatePicker\n class=\"flex-1\"\n v-model:formatted-value=\"endDate\"\n type=\"date\"\n :placeholder=\"endPlaceholder || '请选择结束日期'\"\n :disabled=\"endDateDisabled\"\n :is-date-disabled=\"endDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"endDateProps\"\n />\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\n import { ref, watch, computed } from 'vue'\n import { NDatePicker } from 'naive-ui'\n\n defineOptions({ name: 'C_Date' })\n\n type DatePickerMode =\n | 'date'\n | 'datetime'\n | 'daterange'\n | 'datetimerange'\n | 'smart-range'\n\n // 使用 formatted-value 绑定,值始终为格式化字符串\n type DateValue = string | null\n type DateRangeValue = [string, string] | null\n\n interface Props {\n mode?: DatePickerMode\n placeholder?: string\n startPlaceholder?: string\n endPlaceholder?: string\n disabled?: boolean\n disabledBeforeToday?: boolean\n disabledAfterToday?: boolean\n valueFormat?: string\n startDateProps?: Record<string, any>\n endDateProps?: Record<string, any>\n // v-model 值 props,支持受控模式(外部设置初始值 / 双向绑定)\n singleDate?: DateValue\n singleDateTime?: DateValue\n dateRange?: DateRangeValue\n dateTimeRange?: DateRangeValue\n smartRange?: DateRangeValue\n }\n\n interface Emits {\n (e: 'update:singleDate', value: DateValue): void\n (e: 'update:singleDateTime', value: DateValue): void\n (e: 'update:dateRange', value: DateRangeValue): void\n (e: 'update:dateTimeRange', value: DateRangeValue): void\n (e: 'update:smartRange', value: DateRangeValue): void\n (e: 'change', value: DateValue | DateRangeValue): void\n }\n\n const props = withDefaults(defineProps<Props>(), {\n mode: 'date',\n placeholder: '',\n startPlaceholder: '',\n endPlaceholder: '',\n disabled: false,\n disabledBeforeToday: false,\n disabledAfterToday: false,\n valueFormat: 'yyyy-MM-dd',\n startDateProps: () => ({}),\n endDateProps: () => ({}),\n singleDate: null,\n singleDateTime: null,\n dateRange: null,\n dateTimeRange: null,\n smartRange: null,\n })\n\n const emits = defineEmits<Emits>()\n\n // 今日零点时间戳 —— 模块级缓存,isDateDisabled 为高频回调,避免重复 new Date()\n const _todayStart = (() => {\n const d = new Date()\n d.setHours(0, 0, 0, 0)\n return d.getTime()\n })()\n\n // —— 四种基础模式:computed getter/setter 实现受控绑定 ——\n // 后缀 Model 避免与同名 prop 产生 vue/no-dupe-keys 冲突\n const singleDateModel = computed<DateValue>({\n get: () => props.singleDate ?? null,\n set: val => {\n emits('update:singleDate', val)\n emits('change', val)\n },\n })\n\n const singleDateTimeModel = computed<DateValue>({\n get: () => props.singleDateTime ?? null,\n set: val => {\n emits('update:singleDateTime', val)\n emits('change', val)\n },\n })\n\n const dateRangeModel = computed<DateRangeValue>({\n get: () => props.dateRange ?? null,\n set: val => {\n emits('update:dateRange', val)\n emits('change', val)\n },\n })\n\n const dateTimeRangeModel = computed<DateRangeValue>({\n get: () => props.dateTimeRange ?? null,\n set: val => {\n emits('update:dateTimeRange', val)\n emits('change', val)\n },\n })\n\n // —— smart-range:两个独立 ref(prop 名为 smartRange,start/endDate 无命名冲突)——\n const startDate = ref<DateValue>(null)\n const endDate = ref<DateValue>(null)\n const endDateDisabled = computed(() => !startDate.value)\n\n // 将外部 smartRange prop 同步到内部 startDate/endDate\n watch(\n () => props.smartRange,\n val => {\n const newStart = val?.[0] ?? null\n const newEnd = val?.[1] ?? null\n if (newStart === startDate.value && newEnd === endDate.value) return\n startDate.value = newStart\n endDate.value = newEnd\n },\n { immediate: true, deep: true }\n )\n\n // 用户选择后:两者均有值时 emit;清空开始日期时级联清空结束日期\n watch(\n () => [startDate.value, endDate.value] as const,\n ([startVal, endVal]) => {\n if (!startVal) {\n endDate.value = null\n return\n }\n if (endVal) {\n emits('update:smartRange', [startVal, endVal])\n emits('change', [startVal, endVal])\n }\n },\n { deep: true }\n )\n\n // —— 日期禁用逻辑 ——\n const singleDisabledDate = (timestamp: number): boolean => {\n if (props.disabledBeforeToday && timestamp < _todayStart) return true\n if (props.disabledAfterToday && timestamp > _todayStart) return true\n return false\n }\n\n const endDisabledDate = (timestamp: number): boolean => {\n if (!startDate.value) return true\n if (timestamp < new Date(startDate.value).getTime()) return true\n return singleDisabledDate(timestamp)\n }\n\n // clearAll:emit 驱动父组件清空同名绑定,同时重置 smart-range 内部 ref\n defineExpose({\n clearAll: () => {\n emits('update:singleDate', null)\n emits('update:singleDateTime', null)\n emits('update:dateRange', null)\n emits('update:dateTimeRange', null)\n emits('update:smartRange', null)\n startDate.value = null\n endDate.value = null\n },\n })\n</script>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-05-28\n * @Description: 日期选择器组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"inline-block\">\n <NDatePicker\n v-if=\"mode === 'date'\"\n v-model:formatted-value=\"singleDateModel\"\n type=\"date\"\n :placeholder=\"placeholder || '请选择日期'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <NDatePicker\n v-else-if=\"mode === 'datetime'\"\n v-model:formatted-value=\"singleDateTimeModel\"\n type=\"datetime\"\n :placeholder=\"placeholder || '请选择日期时间'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <NDatePicker\n v-else-if=\"mode === 'daterange'\"\n v-model:formatted-value=\"dateRangeModel\"\n type=\"daterange\"\n :start-placeholder=\"startPlaceholder || '开始日期'\"\n :end-placeholder=\"endPlaceholder || '结束日期'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <NDatePicker\n v-else-if=\"mode === 'datetimerange'\"\n v-model:formatted-value=\"dateTimeRangeModel\"\n type=\"datetimerange\"\n :start-placeholder=\"startPlaceholder || '开始日期时间'\"\n :end-placeholder=\"endPlaceholder || '结束日期时间'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <div\n v-else-if=\"mode === 'smart-range'\"\n class=\"inline-block\"\n >\n <div class=\"flex gap-2.5 items-center\">\n <NDatePicker\n class=\"flex-1\"\n v-model:formatted-value=\"startDate\"\n type=\"date\"\n :placeholder=\"startPlaceholder || '请选择开始日期'\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"startDateProps\"\n />\n <NDatePicker\n class=\"flex-1\"\n v-model:formatted-value=\"endDate\"\n type=\"date\"\n :placeholder=\"endPlaceholder || '请选择结束日期'\"\n :disabled=\"endDateDisabled\"\n :is-date-disabled=\"endDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"endDateProps\"\n />\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\n import { ref, watch, computed } from 'vue'\n import { NDatePicker } from 'naive-ui'\n\n defineOptions({ name: 'C_Date' })\n\n type DatePickerMode =\n | 'date'\n | 'datetime'\n | 'daterange'\n | 'datetimerange'\n | 'smart-range'\n\n // 使用 formatted-value 绑定,值始终为格式化字符串\n type DateValue = string | null\n type DateRangeValue = [string, string] | null\n\n interface Props {\n mode?: DatePickerMode\n placeholder?: string\n startPlaceholder?: string\n endPlaceholder?: string\n disabled?: boolean\n disabledBeforeToday?: boolean\n disabledAfterToday?: boolean\n valueFormat?: string\n startDateProps?: Record<string, any>\n endDateProps?: Record<string, any>\n // v-model 值 props,支持受控模式(外部设置初始值 / 双向绑定)\n singleDate?: DateValue\n singleDateTime?: DateValue\n dateRange?: DateRangeValue\n dateTimeRange?: DateRangeValue\n smartRange?: DateRangeValue\n }\n\n interface Emits {\n (e: 'update:singleDate', value: DateValue): void\n (e: 'update:singleDateTime', value: DateValue): void\n (e: 'update:dateRange', value: DateRangeValue): void\n (e: 'update:dateTimeRange', value: DateRangeValue): void\n (e: 'update:smartRange', value: DateRangeValue): void\n (e: 'change', value: DateValue | DateRangeValue): void\n }\n\n const props = withDefaults(defineProps<Props>(), {\n mode: 'date',\n placeholder: '',\n startPlaceholder: '',\n endPlaceholder: '',\n disabled: false,\n disabledBeforeToday: false,\n disabledAfterToday: false,\n valueFormat: 'yyyy-MM-dd',\n startDateProps: () => ({}),\n endDateProps: () => ({}),\n singleDate: null,\n singleDateTime: null,\n dateRange: null,\n dateTimeRange: null,\n smartRange: null,\n })\n\n const emits = defineEmits<Emits>()\n\n // 今日零点时间戳 —— 模块级缓存,isDateDisabled 为高频回调,避免重复 new Date()\n const _todayStart = (() => {\n const d = new Date()\n d.setHours(0, 0, 0, 0)\n return d.getTime()\n })()\n\n // —— 四种基础模式:computed getter/setter 实现受控绑定 ——\n // 后缀 Model 避免与同名 prop 产生 vue/no-dupe-keys 冲突\n const singleDateModel = computed<DateValue>({\n get: () => props.singleDate ?? null,\n set: val => {\n emits('update:singleDate', val)\n emits('change', val)\n },\n })\n\n const singleDateTimeModel = computed<DateValue>({\n get: () => props.singleDateTime ?? null,\n set: val => {\n emits('update:singleDateTime', val)\n emits('change', val)\n },\n })\n\n const dateRangeModel = computed<DateRangeValue>({\n get: () => props.dateRange ?? null,\n set: val => {\n emits('update:dateRange', val)\n emits('change', val)\n },\n })\n\n const dateTimeRangeModel = computed<DateRangeValue>({\n get: () => props.dateTimeRange ?? null,\n set: val => {\n emits('update:dateTimeRange', val)\n emits('change', val)\n },\n })\n\n // —— smart-range:两个独立 ref(prop 名为 smartRange,start/endDate 无命名冲突)——\n const startDate = ref<DateValue>(null)\n const endDate = ref<DateValue>(null)\n const endDateDisabled = computed(() => !startDate.value)\n\n // 将外部 smartRange prop 同步到内部 startDate/endDate\n watch(\n () => props.smartRange,\n val => {\n const newStart = val?.[0] ?? null\n const newEnd = val?.[1] ?? null\n if (newStart === startDate.value && newEnd === endDate.value) return\n startDate.value = newStart\n endDate.value = newEnd\n },\n { immediate: true, deep: true }\n )\n\n // 用户选择后:两者均有值时 emit;清空开始日期时级联清空结束日期\n watch(\n () => [startDate.value, endDate.value] as const,\n ([startVal, endVal]) => {\n if (!startVal) {\n endDate.value = null\n return\n }\n if (endVal) {\n emits('update:smartRange', [startVal, endVal])\n emits('change', [startVal, endVal])\n }\n },\n { deep: true }\n )\n\n // —— 日期禁用逻辑 ——\n const singleDisabledDate = (timestamp: number): boolean => {\n if (props.disabledBeforeToday && timestamp < _todayStart) return true\n if (props.disabledAfterToday && timestamp > _todayStart) return true\n return false\n }\n\n const endDisabledDate = (timestamp: number): boolean => {\n if (!startDate.value) return true\n if (timestamp < new Date(startDate.value).getTime()) return true\n return singleDisabledDate(timestamp)\n }\n\n // clearAll:emit 驱动父组件清空同名绑定,同时重置 smart-range 内部 ref\n defineExpose({\n clearAll: () => {\n emits('update:singleDate', null)\n emits('update:singleDateTime', null)\n emits('update:dateRange', null)\n emits('update:dateTimeRange', null)\n emits('update:smartRange', null)\n startDate.value = null\n endDate.value = null\n },\n })\n</script>\n"],"mappings":"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"}
|
package/dist/C_Date2.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{NDatePicker as e}from"naive-ui";import{
|
|
1
|
+
import{NDatePicker as e}from"naive-ui";import{computed as t,createBlock as n,createCommentVNode as r,createElementBlock as i,createElementVNode as a,createVNode as o,defineComponent as s,mergeProps as c,openBlock as l,ref as u,unref as d,watch as f}from"vue";const p={class:`inline-block`},m={key:4,class:`inline-block`},h={class:`flex gap-2.5 items-center`};var g=s({name:`C_Date`,__name:`index`,props:{mode:{default:`date`},placeholder:{default:``},startPlaceholder:{default:``},endPlaceholder:{default:``},disabled:{type:Boolean,default:!1},disabledBeforeToday:{type:Boolean,default:!1},disabledAfterToday:{type:Boolean,default:!1},valueFormat:{default:`yyyy-MM-dd`},startDateProps:{default:()=>({})},endDateProps:{default:()=>({})},singleDate:{default:null},singleDateTime:{default:null},dateRange:{default:null},dateTimeRange:{default:null},smartRange:{default:null}},emits:[`update:singleDate`,`update:singleDateTime`,`update:dateRange`,`update:dateTimeRange`,`update:smartRange`,`change`],setup(s,{expose:g,emit:_}){let v=s,y=_,b=(()=>{let e=new Date;return e.setHours(0,0,0,0),e.getTime()})(),x=t({get:()=>v.singleDate??null,set:e=>{y(`update:singleDate`,e),y(`change`,e)}}),S=t({get:()=>v.singleDateTime??null,set:e=>{y(`update:singleDateTime`,e),y(`change`,e)}}),C=t({get:()=>v.dateRange??null,set:e=>{y(`update:dateRange`,e),y(`change`,e)}}),w=t({get:()=>v.dateTimeRange??null,set:e=>{y(`update:dateTimeRange`,e),y(`change`,e)}}),T=u(null),E=u(null),D=t(()=>!T.value);f(()=>v.smartRange,e=>{let t=e?.[0]??null,n=e?.[1]??null;t===T.value&&n===E.value||(T.value=t,E.value=n)},{immediate:!0,deep:!0}),f(()=>[T.value,E.value],([e,t])=>{if(!e){E.value=null;return}t&&(y(`update:smartRange`,[e,t]),y(`change`,[e,t]))},{deep:!0});let O=e=>!!(v.disabledBeforeToday&&e<b||v.disabledAfterToday&&e>b),k=e=>!T.value||e<new Date(T.value).getTime()?!0:O(e);return g({clearAll:()=>{y(`update:singleDate`,null),y(`update:singleDateTime`,null),y(`update:dateRange`,null),y(`update:dateTimeRange`,null),y(`update:smartRange`,null),T.value=null,E.value=null}}),(t,s)=>(l(),i(`div`,p,[t.mode===`date`?(l(),n(d(e),c({key:0,"formatted-value":x.value,"onUpdate:formattedValue":s[0]||=e=>x.value=e,type:`date`,placeholder:t.placeholder||`请选择日期`,disabled:t.disabled,"is-date-disabled":O,"value-format":t.valueFormat,clearable:``},t.$attrs),null,16,[`formatted-value`,`placeholder`,`disabled`,`value-format`])):t.mode===`datetime`?(l(),n(d(e),c({key:1,"formatted-value":S.value,"onUpdate:formattedValue":s[1]||=e=>S.value=e,type:`datetime`,placeholder:t.placeholder||`请选择日期时间`,disabled:t.disabled,"is-date-disabled":O,"value-format":t.valueFormat,clearable:``},t.$attrs),null,16,[`formatted-value`,`placeholder`,`disabled`,`value-format`])):t.mode===`daterange`?(l(),n(d(e),c({key:2,"formatted-value":C.value,"onUpdate:formattedValue":s[2]||=e=>C.value=e,type:`daterange`,"start-placeholder":t.startPlaceholder||`开始日期`,"end-placeholder":t.endPlaceholder||`结束日期`,disabled:t.disabled,"is-date-disabled":O,"value-format":t.valueFormat,clearable:``},t.$attrs),null,16,[`formatted-value`,`start-placeholder`,`end-placeholder`,`disabled`,`value-format`])):t.mode===`datetimerange`?(l(),n(d(e),c({key:3,"formatted-value":w.value,"onUpdate:formattedValue":s[3]||=e=>w.value=e,type:`datetimerange`,"start-placeholder":t.startPlaceholder||`开始日期时间`,"end-placeholder":t.endPlaceholder||`结束日期时间`,disabled:t.disabled,"is-date-disabled":O,"value-format":t.valueFormat,clearable:``},t.$attrs),null,16,[`formatted-value`,`start-placeholder`,`end-placeholder`,`disabled`,`value-format`])):t.mode===`smart-range`?(l(),i(`div`,m,[a(`div`,h,[o(d(e),c({class:`flex-1`,"formatted-value":T.value,"onUpdate:formattedValue":s[4]||=e=>T.value=e,type:`date`,placeholder:t.startPlaceholder||`请选择开始日期`,"is-date-disabled":O,"value-format":t.valueFormat,clearable:``},t.startDateProps),null,16,[`formatted-value`,`placeholder`,`value-format`]),o(d(e),c({class:`flex-1`,"formatted-value":E.value,"onUpdate:formattedValue":s[5]||=e=>E.value=e,type:`date`,placeholder:t.endPlaceholder||`请选择结束日期`,disabled:D.value,"is-date-disabled":k,"value-format":t.valueFormat,clearable:``},t.endDateProps),null,16,[`formatted-value`,`placeholder`,`disabled`,`value-format`])])])):r(`v-if`,!0)]))}});export{g as t};
|
|
2
2
|
//# sourceMappingURL=C_Date2.js.map
|
package/dist/C_Date2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Date2.js","names":["mode","placeholder","disabled","valueFormat","$attrs","startPlaceholder","endPlaceholder","startDateProps","endDateProps"],"sources":["../src/components/C_Date/index.vue","../src/components/C_Date/index.vue","../src/components/C_Date/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-28\r\n * @Description: 日期选择器组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"inline-block\">\r\n <NDatePicker\r\n v-if=\"mode === 'date'\"\r\n v-model:value=\"singleDate\"\r\n type=\"date\"\r\n :placeholder=\"placeholder || '请选择日期'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleSingleDateChange\"\r\n />\r\n\r\n <NDatePicker\r\n v-else-if=\"mode === 'datetime'\"\r\n v-model:value=\"singleDateTime\"\r\n type=\"datetime\"\r\n :placeholder=\"placeholder || '请选择日期时间'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleSingleDateTimeChange\"\r\n />\r\n\r\n <NDatePicker\r\n v-else-if=\"mode === 'daterange'\"\r\n v-model:value=\"dateRange\"\r\n type=\"daterange\"\r\n :start-placeholder=\"startPlaceholder || '开始日期'\"\r\n :end-placeholder=\"endPlaceholder || '结束日期'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleDateRangeChange\"\r\n />\r\n\r\n <NDatePicker\r\n v-else-if=\"mode === 'datetimerange'\"\r\n v-model:value=\"dateTimeRange\"\r\n type=\"datetimerange\"\r\n :start-placeholder=\"startPlaceholder || '开始日期时间'\"\r\n :end-placeholder=\"endPlaceholder || '结束日期时间'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleDateTimeRangeChange\"\r\n />\r\n\r\n <div v-else-if=\"mode === 'smart-range'\" class=\"inline-block\">\r\n <div class=\"flex gap-2.5 items-center\">\r\n <NDatePicker\r\n class=\"flex-1\"\r\n v-model:value=\"startDate\"\r\n type=\"date\"\r\n :placeholder=\"startPlaceholder || '请选择开始日期'\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"startDateProps\"\r\n />\r\n <NDatePicker\r\n class=\"flex-1\"\r\n v-model:value=\"endDate\"\r\n type=\"date\"\r\n :placeholder=\"endPlaceholder || '请选择结束日期'\"\r\n :disabled=\"endDateDisabled\"\r\n :is-date-disabled=\"endDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"endDateProps\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, watch } from \"vue\";\r\nimport { NDatePicker } from \"naive-ui\";\r\n\r\ndefineOptions({ name: \"C_Date\" });\r\n\r\ntype DatePickerMode =\r\n | \"date\"\r\n | \"datetime\"\r\n | \"daterange\"\r\n | \"datetimerange\"\r\n | \"smart-range\";\r\n\r\ntype DateValue = number | null;\r\ntype DateRangeValue = [number, number] | null;\r\n\r\ninterface Props {\r\n mode?: DatePickerMode;\r\n placeholder?: string;\r\n startPlaceholder?: string;\r\n endPlaceholder?: string;\r\n disabled?: boolean;\r\n disabledBeforeToday?: boolean;\r\n disabledAfterToday?: boolean;\r\n valueFormat?: string;\r\n startDateProps?: Record<string, any>;\r\n endDateProps?: Record<string, any>;\r\n}\r\n\r\ninterface Emits {\r\n (e: \"update:singleDate\", value: DateValue): void;\r\n (e: \"update:singleDateTime\", value: DateValue): void;\r\n (e: \"update:dateRange\", value: DateRangeValue): void;\r\n (e: \"update:dateTimeRange\", value: DateRangeValue): void;\r\n (e: \"update:smartRange\", value: DateRangeValue): void;\r\n (e: \"change\", value: DateValue | DateRangeValue): void;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n mode: \"date\",\r\n placeholder: \"\",\r\n startPlaceholder: \"\",\r\n endPlaceholder: \"\",\r\n disabled: false,\r\n disabledBeforeToday: false,\r\n disabledAfterToday: false,\r\n valueFormat: \"yyyy-MM-dd\",\r\n startDateProps: () => ({}),\r\n endDateProps: () => ({}),\r\n});\r\n\r\nconst emits = defineEmits<Emits>();\r\n\r\nconst singleDate = ref<DateValue>(null);\r\nconst singleDateTime = ref<DateValue>(null);\r\nconst dateRange = ref<DateRangeValue>(null);\r\nconst dateTimeRange = ref<DateRangeValue>(null);\r\nconst startDate = ref<DateValue>(null);\r\nconst endDate = ref<DateValue>(null);\r\nconst endDateDisabled = ref(true);\r\n\r\nconst getTodayTimestamp = (): number => {\r\n const today = new Date();\r\n today.setHours(0, 0, 0, 0);\r\n return today.getTime();\r\n};\r\n\r\nconst singleDisabledDate = (timestamp: number): boolean => {\r\n const todayTimestamp = getTodayTimestamp();\r\n if (props.disabledBeforeToday && timestamp < todayTimestamp) return true;\r\n if (props.disabledAfterToday && timestamp > todayTimestamp) return true;\r\n return false;\r\n};\r\n\r\nconst endDisabledDate = (timestamp: number): boolean => {\r\n if (!startDate.value) return true;\r\n if (timestamp < startDate.value) return true;\r\n return singleDisabledDate(timestamp);\r\n};\r\n\r\nconst handleSingleDateChange = (value: DateValue): void => {\r\n emits(\"update:singleDate\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nconst handleSingleDateTimeChange = (value: DateValue): void => {\r\n emits(\"update:singleDateTime\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nconst handleDateRangeChange = (value: DateRangeValue): void => {\r\n emits(\"update:dateRange\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nconst handleDateTimeRangeChange = (value: DateRangeValue): void => {\r\n emits(\"update:dateTimeRange\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nwatch(\r\n () => [startDate.value, endDate.value],\r\n ([startVal, endVal]) => {\r\n if (!startVal) {\r\n endDate.value = null;\r\n endDateDisabled.value = true;\r\n return;\r\n }\r\n if (startVal) {\r\n endDateDisabled.value = false;\r\n }\r\n if (startVal && endVal) {\r\n const rangeValue: DateRangeValue = [startVal, endVal];\r\n emits(\"update:smartRange\", rangeValue);\r\n emits(\"change\", rangeValue);\r\n }\r\n },\r\n { deep: true },\r\n);\r\n\r\ndefineExpose({\r\n singleDate,\r\n singleDateTime,\r\n dateRange,\r\n dateTimeRange,\r\n startDate,\r\n endDate,\r\n clearAll: () => {\r\n singleDate.value = null;\r\n singleDateTime.value = null;\r\n dateRange.value = null;\r\n dateTimeRange.value = null;\r\n startDate.value = null;\r\n endDate.value = null;\r\n endDateDisabled.value = true;\r\n },\r\n});\r\n</script>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-28\r\n * @Description: 日期选择器组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"inline-block\">\r\n <NDatePicker\r\n v-if=\"mode === 'date'\"\r\n v-model:value=\"singleDate\"\r\n type=\"date\"\r\n :placeholder=\"placeholder || '请选择日期'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleSingleDateChange\"\r\n />\r\n\r\n <NDatePicker\r\n v-else-if=\"mode === 'datetime'\"\r\n v-model:value=\"singleDateTime\"\r\n type=\"datetime\"\r\n :placeholder=\"placeholder || '请选择日期时间'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleSingleDateTimeChange\"\r\n />\r\n\r\n <NDatePicker\r\n v-else-if=\"mode === 'daterange'\"\r\n v-model:value=\"dateRange\"\r\n type=\"daterange\"\r\n :start-placeholder=\"startPlaceholder || '开始日期'\"\r\n :end-placeholder=\"endPlaceholder || '结束日期'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleDateRangeChange\"\r\n />\r\n\r\n <NDatePicker\r\n v-else-if=\"mode === 'datetimerange'\"\r\n v-model:value=\"dateTimeRange\"\r\n type=\"datetimerange\"\r\n :start-placeholder=\"startPlaceholder || '开始日期时间'\"\r\n :end-placeholder=\"endPlaceholder || '结束日期时间'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleDateTimeRangeChange\"\r\n />\r\n\r\n <div v-else-if=\"mode === 'smart-range'\" class=\"inline-block\">\r\n <div class=\"flex gap-2.5 items-center\">\r\n <NDatePicker\r\n class=\"flex-1\"\r\n v-model:value=\"startDate\"\r\n type=\"date\"\r\n :placeholder=\"startPlaceholder || '请选择开始日期'\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"startDateProps\"\r\n />\r\n <NDatePicker\r\n class=\"flex-1\"\r\n v-model:value=\"endDate\"\r\n type=\"date\"\r\n :placeholder=\"endPlaceholder || '请选择结束日期'\"\r\n :disabled=\"endDateDisabled\"\r\n :is-date-disabled=\"endDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"endDateProps\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, watch } from \"vue\";\r\nimport { NDatePicker } from \"naive-ui\";\r\n\r\ndefineOptions({ name: \"C_Date\" });\r\n\r\ntype DatePickerMode =\r\n | \"date\"\r\n | \"datetime\"\r\n | \"daterange\"\r\n | \"datetimerange\"\r\n | \"smart-range\";\r\n\r\ntype DateValue = number | null;\r\ntype DateRangeValue = [number, number] | null;\r\n\r\ninterface Props {\r\n mode?: DatePickerMode;\r\n placeholder?: string;\r\n startPlaceholder?: string;\r\n endPlaceholder?: string;\r\n disabled?: boolean;\r\n disabledBeforeToday?: boolean;\r\n disabledAfterToday?: boolean;\r\n valueFormat?: string;\r\n startDateProps?: Record<string, any>;\r\n endDateProps?: Record<string, any>;\r\n}\r\n\r\ninterface Emits {\r\n (e: \"update:singleDate\", value: DateValue): void;\r\n (e: \"update:singleDateTime\", value: DateValue): void;\r\n (e: \"update:dateRange\", value: DateRangeValue): void;\r\n (e: \"update:dateTimeRange\", value: DateRangeValue): void;\r\n (e: \"update:smartRange\", value: DateRangeValue): void;\r\n (e: \"change\", value: DateValue | DateRangeValue): void;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n mode: \"date\",\r\n placeholder: \"\",\r\n startPlaceholder: \"\",\r\n endPlaceholder: \"\",\r\n disabled: false,\r\n disabledBeforeToday: false,\r\n disabledAfterToday: false,\r\n valueFormat: \"yyyy-MM-dd\",\r\n startDateProps: () => ({}),\r\n endDateProps: () => ({}),\r\n});\r\n\r\nconst emits = defineEmits<Emits>();\r\n\r\nconst singleDate = ref<DateValue>(null);\r\nconst singleDateTime = ref<DateValue>(null);\r\nconst dateRange = ref<DateRangeValue>(null);\r\nconst dateTimeRange = ref<DateRangeValue>(null);\r\nconst startDate = ref<DateValue>(null);\r\nconst endDate = ref<DateValue>(null);\r\nconst endDateDisabled = ref(true);\r\n\r\nconst getTodayTimestamp = (): number => {\r\n const today = new Date();\r\n today.setHours(0, 0, 0, 0);\r\n return today.getTime();\r\n};\r\n\r\nconst singleDisabledDate = (timestamp: number): boolean => {\r\n const todayTimestamp = getTodayTimestamp();\r\n if (props.disabledBeforeToday && timestamp < todayTimestamp) return true;\r\n if (props.disabledAfterToday && timestamp > todayTimestamp) return true;\r\n return false;\r\n};\r\n\r\nconst endDisabledDate = (timestamp: number): boolean => {\r\n if (!startDate.value) return true;\r\n if (timestamp < startDate.value) return true;\r\n return singleDisabledDate(timestamp);\r\n};\r\n\r\nconst handleSingleDateChange = (value: DateValue): void => {\r\n emits(\"update:singleDate\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nconst handleSingleDateTimeChange = (value: DateValue): void => {\r\n emits(\"update:singleDateTime\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nconst handleDateRangeChange = (value: DateRangeValue): void => {\r\n emits(\"update:dateRange\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nconst handleDateTimeRangeChange = (value: DateRangeValue): void => {\r\n emits(\"update:dateTimeRange\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nwatch(\r\n () => [startDate.value, endDate.value],\r\n ([startVal, endVal]) => {\r\n if (!startVal) {\r\n endDate.value = null;\r\n endDateDisabled.value = true;\r\n return;\r\n }\r\n if (startVal) {\r\n endDateDisabled.value = false;\r\n }\r\n if (startVal && endVal) {\r\n const rangeValue: DateRangeValue = [startVal, endVal];\r\n emits(\"update:smartRange\", rangeValue);\r\n emits(\"change\", rangeValue);\r\n }\r\n },\r\n { deep: true },\r\n);\r\n\r\ndefineExpose({\r\n singleDate,\r\n singleDateTime,\r\n dateRange,\r\n dateTimeRange,\r\n startDate,\r\n endDate,\r\n clearAll: () => {\r\n singleDate.value = null;\r\n singleDateTime.value = null;\r\n dateRange.value = null;\r\n dateTimeRange.value = null;\r\n startDate.value = null;\r\n endDate.value = null;\r\n endDateDisabled.value = true;\r\n },\r\n});\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-28\r\n * @Description: 日期选择器组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"inline-block\">\r\n <NDatePicker\r\n v-if=\"mode === 'date'\"\r\n v-model:value=\"singleDate\"\r\n type=\"date\"\r\n :placeholder=\"placeholder || '请选择日期'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleSingleDateChange\"\r\n />\r\n\r\n <NDatePicker\r\n v-else-if=\"mode === 'datetime'\"\r\n v-model:value=\"singleDateTime\"\r\n type=\"datetime\"\r\n :placeholder=\"placeholder || '请选择日期时间'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleSingleDateTimeChange\"\r\n />\r\n\r\n <NDatePicker\r\n v-else-if=\"mode === 'daterange'\"\r\n v-model:value=\"dateRange\"\r\n type=\"daterange\"\r\n :start-placeholder=\"startPlaceholder || '开始日期'\"\r\n :end-placeholder=\"endPlaceholder || '结束日期'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleDateRangeChange\"\r\n />\r\n\r\n <NDatePicker\r\n v-else-if=\"mode === 'datetimerange'\"\r\n v-model:value=\"dateTimeRange\"\r\n type=\"datetimerange\"\r\n :start-placeholder=\"startPlaceholder || '开始日期时间'\"\r\n :end-placeholder=\"endPlaceholder || '结束日期时间'\"\r\n :disabled=\"disabled\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"$attrs\"\r\n @update:value=\"handleDateTimeRangeChange\"\r\n />\r\n\r\n <div v-else-if=\"mode === 'smart-range'\" class=\"inline-block\">\r\n <div class=\"flex gap-2.5 items-center\">\r\n <NDatePicker\r\n class=\"flex-1\"\r\n v-model:value=\"startDate\"\r\n type=\"date\"\r\n :placeholder=\"startPlaceholder || '请选择开始日期'\"\r\n :is-date-disabled=\"singleDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"startDateProps\"\r\n />\r\n <NDatePicker\r\n class=\"flex-1\"\r\n v-model:value=\"endDate\"\r\n type=\"date\"\r\n :placeholder=\"endPlaceholder || '请选择结束日期'\"\r\n :disabled=\"endDateDisabled\"\r\n :is-date-disabled=\"endDisabledDate\"\r\n :value-format=\"valueFormat\"\r\n clearable\r\n v-bind=\"endDateProps\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, watch } from \"vue\";\r\nimport { NDatePicker } from \"naive-ui\";\r\n\r\ndefineOptions({ name: \"C_Date\" });\r\n\r\ntype DatePickerMode =\r\n | \"date\"\r\n | \"datetime\"\r\n | \"daterange\"\r\n | \"datetimerange\"\r\n | \"smart-range\";\r\n\r\ntype DateValue = number | null;\r\ntype DateRangeValue = [number, number] | null;\r\n\r\ninterface Props {\r\n mode?: DatePickerMode;\r\n placeholder?: string;\r\n startPlaceholder?: string;\r\n endPlaceholder?: string;\r\n disabled?: boolean;\r\n disabledBeforeToday?: boolean;\r\n disabledAfterToday?: boolean;\r\n valueFormat?: string;\r\n startDateProps?: Record<string, any>;\r\n endDateProps?: Record<string, any>;\r\n}\r\n\r\ninterface Emits {\r\n (e: \"update:singleDate\", value: DateValue): void;\r\n (e: \"update:singleDateTime\", value: DateValue): void;\r\n (e: \"update:dateRange\", value: DateRangeValue): void;\r\n (e: \"update:dateTimeRange\", value: DateRangeValue): void;\r\n (e: \"update:smartRange\", value: DateRangeValue): void;\r\n (e: \"change\", value: DateValue | DateRangeValue): void;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n mode: \"date\",\r\n placeholder: \"\",\r\n startPlaceholder: \"\",\r\n endPlaceholder: \"\",\r\n disabled: false,\r\n disabledBeforeToday: false,\r\n disabledAfterToday: false,\r\n valueFormat: \"yyyy-MM-dd\",\r\n startDateProps: () => ({}),\r\n endDateProps: () => ({}),\r\n});\r\n\r\nconst emits = defineEmits<Emits>();\r\n\r\nconst singleDate = ref<DateValue>(null);\r\nconst singleDateTime = ref<DateValue>(null);\r\nconst dateRange = ref<DateRangeValue>(null);\r\nconst dateTimeRange = ref<DateRangeValue>(null);\r\nconst startDate = ref<DateValue>(null);\r\nconst endDate = ref<DateValue>(null);\r\nconst endDateDisabled = ref(true);\r\n\r\nconst getTodayTimestamp = (): number => {\r\n const today = new Date();\r\n today.setHours(0, 0, 0, 0);\r\n return today.getTime();\r\n};\r\n\r\nconst singleDisabledDate = (timestamp: number): boolean => {\r\n const todayTimestamp = getTodayTimestamp();\r\n if (props.disabledBeforeToday && timestamp < todayTimestamp) return true;\r\n if (props.disabledAfterToday && timestamp > todayTimestamp) return true;\r\n return false;\r\n};\r\n\r\nconst endDisabledDate = (timestamp: number): boolean => {\r\n if (!startDate.value) return true;\r\n if (timestamp < startDate.value) return true;\r\n return singleDisabledDate(timestamp);\r\n};\r\n\r\nconst handleSingleDateChange = (value: DateValue): void => {\r\n emits(\"update:singleDate\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nconst handleSingleDateTimeChange = (value: DateValue): void => {\r\n emits(\"update:singleDateTime\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nconst handleDateRangeChange = (value: DateRangeValue): void => {\r\n emits(\"update:dateRange\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nconst handleDateTimeRangeChange = (value: DateRangeValue): void => {\r\n emits(\"update:dateTimeRange\", value);\r\n emits(\"change\", value);\r\n};\r\n\r\nwatch(\r\n () => [startDate.value, endDate.value],\r\n ([startVal, endVal]) => {\r\n if (!startVal) {\r\n endDate.value = null;\r\n endDateDisabled.value = true;\r\n return;\r\n }\r\n if (startVal) {\r\n endDateDisabled.value = false;\r\n }\r\n if (startVal && endVal) {\r\n const rangeValue: DateRangeValue = [startVal, endVal];\r\n emits(\"update:smartRange\", rangeValue);\r\n emits(\"change\", rangeValue);\r\n }\r\n },\r\n { deep: true },\r\n);\r\n\r\ndefineExpose({\r\n singleDate,\r\n singleDateTime,\r\n dateRange,\r\n dateTimeRange,\r\n startDate,\r\n endDate,\r\n clearAll: () => {\r\n singleDate.value = null;\r\n singleDateTime.value = null;\r\n dateRange.value = null;\r\n dateTimeRange.value = null;\r\n startDate.value = null;\r\n endDate.value = null;\r\n endDateDisabled.value = true;\r\n },\r\n});\r\n</script>\r\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"C_Date2.js","names":["mode","placeholder","disabled","valueFormat","$attrs","startPlaceholder","endPlaceholder","startDateProps","endDateProps"],"sources":["../src/components/C_Date/index.vue","../src/components/C_Date/index.vue","../src/components/C_Date/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-05-28\n * @Description: 日期选择器组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"inline-block\">\n <NDatePicker\n v-if=\"mode === 'date'\"\n v-model:formatted-value=\"singleDateModel\"\n type=\"date\"\n :placeholder=\"placeholder || '请选择日期'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <NDatePicker\n v-else-if=\"mode === 'datetime'\"\n v-model:formatted-value=\"singleDateTimeModel\"\n type=\"datetime\"\n :placeholder=\"placeholder || '请选择日期时间'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <NDatePicker\n v-else-if=\"mode === 'daterange'\"\n v-model:formatted-value=\"dateRangeModel\"\n type=\"daterange\"\n :start-placeholder=\"startPlaceholder || '开始日期'\"\n :end-placeholder=\"endPlaceholder || '结束日期'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <NDatePicker\n v-else-if=\"mode === 'datetimerange'\"\n v-model:formatted-value=\"dateTimeRangeModel\"\n type=\"datetimerange\"\n :start-placeholder=\"startPlaceholder || '开始日期时间'\"\n :end-placeholder=\"endPlaceholder || '结束日期时间'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <div\n v-else-if=\"mode === 'smart-range'\"\n class=\"inline-block\"\n >\n <div class=\"flex gap-2.5 items-center\">\n <NDatePicker\n class=\"flex-1\"\n v-model:formatted-value=\"startDate\"\n type=\"date\"\n :placeholder=\"startPlaceholder || '请选择开始日期'\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"startDateProps\"\n />\n <NDatePicker\n class=\"flex-1\"\n v-model:formatted-value=\"endDate\"\n type=\"date\"\n :placeholder=\"endPlaceholder || '请选择结束日期'\"\n :disabled=\"endDateDisabled\"\n :is-date-disabled=\"endDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"endDateProps\"\n />\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\n import { ref, watch, computed } from 'vue'\n import { NDatePicker } from 'naive-ui'\n\n defineOptions({ name: 'C_Date' })\n\n type DatePickerMode =\n | 'date'\n | 'datetime'\n | 'daterange'\n | 'datetimerange'\n | 'smart-range'\n\n // 使用 formatted-value 绑定,值始终为格式化字符串\n type DateValue = string | null\n type DateRangeValue = [string, string] | null\n\n interface Props {\n mode?: DatePickerMode\n placeholder?: string\n startPlaceholder?: string\n endPlaceholder?: string\n disabled?: boolean\n disabledBeforeToday?: boolean\n disabledAfterToday?: boolean\n valueFormat?: string\n startDateProps?: Record<string, any>\n endDateProps?: Record<string, any>\n // v-model 值 props,支持受控模式(外部设置初始值 / 双向绑定)\n singleDate?: DateValue\n singleDateTime?: DateValue\n dateRange?: DateRangeValue\n dateTimeRange?: DateRangeValue\n smartRange?: DateRangeValue\n }\n\n interface Emits {\n (e: 'update:singleDate', value: DateValue): void\n (e: 'update:singleDateTime', value: DateValue): void\n (e: 'update:dateRange', value: DateRangeValue): void\n (e: 'update:dateTimeRange', value: DateRangeValue): void\n (e: 'update:smartRange', value: DateRangeValue): void\n (e: 'change', value: DateValue | DateRangeValue): void\n }\n\n const props = withDefaults(defineProps<Props>(), {\n mode: 'date',\n placeholder: '',\n startPlaceholder: '',\n endPlaceholder: '',\n disabled: false,\n disabledBeforeToday: false,\n disabledAfterToday: false,\n valueFormat: 'yyyy-MM-dd',\n startDateProps: () => ({}),\n endDateProps: () => ({}),\n singleDate: null,\n singleDateTime: null,\n dateRange: null,\n dateTimeRange: null,\n smartRange: null,\n })\n\n const emits = defineEmits<Emits>()\n\n // 今日零点时间戳 —— 模块级缓存,isDateDisabled 为高频回调,避免重复 new Date()\n const _todayStart = (() => {\n const d = new Date()\n d.setHours(0, 0, 0, 0)\n return d.getTime()\n })()\n\n // —— 四种基础模式:computed getter/setter 实现受控绑定 ——\n // 后缀 Model 避免与同名 prop 产生 vue/no-dupe-keys 冲突\n const singleDateModel = computed<DateValue>({\n get: () => props.singleDate ?? null,\n set: val => {\n emits('update:singleDate', val)\n emits('change', val)\n },\n })\n\n const singleDateTimeModel = computed<DateValue>({\n get: () => props.singleDateTime ?? null,\n set: val => {\n emits('update:singleDateTime', val)\n emits('change', val)\n },\n })\n\n const dateRangeModel = computed<DateRangeValue>({\n get: () => props.dateRange ?? null,\n set: val => {\n emits('update:dateRange', val)\n emits('change', val)\n },\n })\n\n const dateTimeRangeModel = computed<DateRangeValue>({\n get: () => props.dateTimeRange ?? null,\n set: val => {\n emits('update:dateTimeRange', val)\n emits('change', val)\n },\n })\n\n // —— smart-range:两个独立 ref(prop 名为 smartRange,start/endDate 无命名冲突)——\n const startDate = ref<DateValue>(null)\n const endDate = ref<DateValue>(null)\n const endDateDisabled = computed(() => !startDate.value)\n\n // 将外部 smartRange prop 同步到内部 startDate/endDate\n watch(\n () => props.smartRange,\n val => {\n const newStart = val?.[0] ?? null\n const newEnd = val?.[1] ?? null\n if (newStart === startDate.value && newEnd === endDate.value) return\n startDate.value = newStart\n endDate.value = newEnd\n },\n { immediate: true, deep: true }\n )\n\n // 用户选择后:两者均有值时 emit;清空开始日期时级联清空结束日期\n watch(\n () => [startDate.value, endDate.value] as const,\n ([startVal, endVal]) => {\n if (!startVal) {\n endDate.value = null\n return\n }\n if (endVal) {\n emits('update:smartRange', [startVal, endVal])\n emits('change', [startVal, endVal])\n }\n },\n { deep: true }\n )\n\n // —— 日期禁用逻辑 ——\n const singleDisabledDate = (timestamp: number): boolean => {\n if (props.disabledBeforeToday && timestamp < _todayStart) return true\n if (props.disabledAfterToday && timestamp > _todayStart) return true\n return false\n }\n\n const endDisabledDate = (timestamp: number): boolean => {\n if (!startDate.value) return true\n if (timestamp < new Date(startDate.value).getTime()) return true\n return singleDisabledDate(timestamp)\n }\n\n // clearAll:emit 驱动父组件清空同名绑定,同时重置 smart-range 内部 ref\n defineExpose({\n clearAll: () => {\n emits('update:singleDate', null)\n emits('update:singleDateTime', null)\n emits('update:dateRange', null)\n emits('update:dateTimeRange', null)\n emits('update:smartRange', null)\n startDate.value = null\n endDate.value = null\n },\n })\n</script>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-05-28\n * @Description: 日期选择器组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"inline-block\">\n <NDatePicker\n v-if=\"mode === 'date'\"\n v-model:formatted-value=\"singleDateModel\"\n type=\"date\"\n :placeholder=\"placeholder || '请选择日期'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <NDatePicker\n v-else-if=\"mode === 'datetime'\"\n v-model:formatted-value=\"singleDateTimeModel\"\n type=\"datetime\"\n :placeholder=\"placeholder || '请选择日期时间'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <NDatePicker\n v-else-if=\"mode === 'daterange'\"\n v-model:formatted-value=\"dateRangeModel\"\n type=\"daterange\"\n :start-placeholder=\"startPlaceholder || '开始日期'\"\n :end-placeholder=\"endPlaceholder || '结束日期'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <NDatePicker\n v-else-if=\"mode === 'datetimerange'\"\n v-model:formatted-value=\"dateTimeRangeModel\"\n type=\"datetimerange\"\n :start-placeholder=\"startPlaceholder || '开始日期时间'\"\n :end-placeholder=\"endPlaceholder || '结束日期时间'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <div\n v-else-if=\"mode === 'smart-range'\"\n class=\"inline-block\"\n >\n <div class=\"flex gap-2.5 items-center\">\n <NDatePicker\n class=\"flex-1\"\n v-model:formatted-value=\"startDate\"\n type=\"date\"\n :placeholder=\"startPlaceholder || '请选择开始日期'\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"startDateProps\"\n />\n <NDatePicker\n class=\"flex-1\"\n v-model:formatted-value=\"endDate\"\n type=\"date\"\n :placeholder=\"endPlaceholder || '请选择结束日期'\"\n :disabled=\"endDateDisabled\"\n :is-date-disabled=\"endDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"endDateProps\"\n />\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\n import { ref, watch, computed } from 'vue'\n import { NDatePicker } from 'naive-ui'\n\n defineOptions({ name: 'C_Date' })\n\n type DatePickerMode =\n | 'date'\n | 'datetime'\n | 'daterange'\n | 'datetimerange'\n | 'smart-range'\n\n // 使用 formatted-value 绑定,值始终为格式化字符串\n type DateValue = string | null\n type DateRangeValue = [string, string] | null\n\n interface Props {\n mode?: DatePickerMode\n placeholder?: string\n startPlaceholder?: string\n endPlaceholder?: string\n disabled?: boolean\n disabledBeforeToday?: boolean\n disabledAfterToday?: boolean\n valueFormat?: string\n startDateProps?: Record<string, any>\n endDateProps?: Record<string, any>\n // v-model 值 props,支持受控模式(外部设置初始值 / 双向绑定)\n singleDate?: DateValue\n singleDateTime?: DateValue\n dateRange?: DateRangeValue\n dateTimeRange?: DateRangeValue\n smartRange?: DateRangeValue\n }\n\n interface Emits {\n (e: 'update:singleDate', value: DateValue): void\n (e: 'update:singleDateTime', value: DateValue): void\n (e: 'update:dateRange', value: DateRangeValue): void\n (e: 'update:dateTimeRange', value: DateRangeValue): void\n (e: 'update:smartRange', value: DateRangeValue): void\n (e: 'change', value: DateValue | DateRangeValue): void\n }\n\n const props = withDefaults(defineProps<Props>(), {\n mode: 'date',\n placeholder: '',\n startPlaceholder: '',\n endPlaceholder: '',\n disabled: false,\n disabledBeforeToday: false,\n disabledAfterToday: false,\n valueFormat: 'yyyy-MM-dd',\n startDateProps: () => ({}),\n endDateProps: () => ({}),\n singleDate: null,\n singleDateTime: null,\n dateRange: null,\n dateTimeRange: null,\n smartRange: null,\n })\n\n const emits = defineEmits<Emits>()\n\n // 今日零点时间戳 —— 模块级缓存,isDateDisabled 为高频回调,避免重复 new Date()\n const _todayStart = (() => {\n const d = new Date()\n d.setHours(0, 0, 0, 0)\n return d.getTime()\n })()\n\n // —— 四种基础模式:computed getter/setter 实现受控绑定 ——\n // 后缀 Model 避免与同名 prop 产生 vue/no-dupe-keys 冲突\n const singleDateModel = computed<DateValue>({\n get: () => props.singleDate ?? null,\n set: val => {\n emits('update:singleDate', val)\n emits('change', val)\n },\n })\n\n const singleDateTimeModel = computed<DateValue>({\n get: () => props.singleDateTime ?? null,\n set: val => {\n emits('update:singleDateTime', val)\n emits('change', val)\n },\n })\n\n const dateRangeModel = computed<DateRangeValue>({\n get: () => props.dateRange ?? null,\n set: val => {\n emits('update:dateRange', val)\n emits('change', val)\n },\n })\n\n const dateTimeRangeModel = computed<DateRangeValue>({\n get: () => props.dateTimeRange ?? null,\n set: val => {\n emits('update:dateTimeRange', val)\n emits('change', val)\n },\n })\n\n // —— smart-range:两个独立 ref(prop 名为 smartRange,start/endDate 无命名冲突)——\n const startDate = ref<DateValue>(null)\n const endDate = ref<DateValue>(null)\n const endDateDisabled = computed(() => !startDate.value)\n\n // 将外部 smartRange prop 同步到内部 startDate/endDate\n watch(\n () => props.smartRange,\n val => {\n const newStart = val?.[0] ?? null\n const newEnd = val?.[1] ?? null\n if (newStart === startDate.value && newEnd === endDate.value) return\n startDate.value = newStart\n endDate.value = newEnd\n },\n { immediate: true, deep: true }\n )\n\n // 用户选择后:两者均有值时 emit;清空开始日期时级联清空结束日期\n watch(\n () => [startDate.value, endDate.value] as const,\n ([startVal, endVal]) => {\n if (!startVal) {\n endDate.value = null\n return\n }\n if (endVal) {\n emits('update:smartRange', [startVal, endVal])\n emits('change', [startVal, endVal])\n }\n },\n { deep: true }\n )\n\n // —— 日期禁用逻辑 ——\n const singleDisabledDate = (timestamp: number): boolean => {\n if (props.disabledBeforeToday && timestamp < _todayStart) return true\n if (props.disabledAfterToday && timestamp > _todayStart) return true\n return false\n }\n\n const endDisabledDate = (timestamp: number): boolean => {\n if (!startDate.value) return true\n if (timestamp < new Date(startDate.value).getTime()) return true\n return singleDisabledDate(timestamp)\n }\n\n // clearAll:emit 驱动父组件清空同名绑定,同时重置 smart-range 内部 ref\n defineExpose({\n clearAll: () => {\n emits('update:singleDate', null)\n emits('update:singleDateTime', null)\n emits('update:dateRange', null)\n emits('update:dateTimeRange', null)\n emits('update:smartRange', null)\n startDate.value = null\n endDate.value = null\n },\n })\n</script>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-05-28\n * @Description: 日期选择器组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"inline-block\">\n <NDatePicker\n v-if=\"mode === 'date'\"\n v-model:formatted-value=\"singleDateModel\"\n type=\"date\"\n :placeholder=\"placeholder || '请选择日期'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <NDatePicker\n v-else-if=\"mode === 'datetime'\"\n v-model:formatted-value=\"singleDateTimeModel\"\n type=\"datetime\"\n :placeholder=\"placeholder || '请选择日期时间'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <NDatePicker\n v-else-if=\"mode === 'daterange'\"\n v-model:formatted-value=\"dateRangeModel\"\n type=\"daterange\"\n :start-placeholder=\"startPlaceholder || '开始日期'\"\n :end-placeholder=\"endPlaceholder || '结束日期'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <NDatePicker\n v-else-if=\"mode === 'datetimerange'\"\n v-model:formatted-value=\"dateTimeRangeModel\"\n type=\"datetimerange\"\n :start-placeholder=\"startPlaceholder || '开始日期时间'\"\n :end-placeholder=\"endPlaceholder || '结束日期时间'\"\n :disabled=\"disabled\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"$attrs\"\n />\n\n <div\n v-else-if=\"mode === 'smart-range'\"\n class=\"inline-block\"\n >\n <div class=\"flex gap-2.5 items-center\">\n <NDatePicker\n class=\"flex-1\"\n v-model:formatted-value=\"startDate\"\n type=\"date\"\n :placeholder=\"startPlaceholder || '请选择开始日期'\"\n :is-date-disabled=\"singleDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"startDateProps\"\n />\n <NDatePicker\n class=\"flex-1\"\n v-model:formatted-value=\"endDate\"\n type=\"date\"\n :placeholder=\"endPlaceholder || '请选择结束日期'\"\n :disabled=\"endDateDisabled\"\n :is-date-disabled=\"endDisabledDate\"\n :value-format=\"valueFormat\"\n clearable\n v-bind=\"endDateProps\"\n />\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\n import { ref, watch, computed } from 'vue'\n import { NDatePicker } from 'naive-ui'\n\n defineOptions({ name: 'C_Date' })\n\n type DatePickerMode =\n | 'date'\n | 'datetime'\n | 'daterange'\n | 'datetimerange'\n | 'smart-range'\n\n // 使用 formatted-value 绑定,值始终为格式化字符串\n type DateValue = string | null\n type DateRangeValue = [string, string] | null\n\n interface Props {\n mode?: DatePickerMode\n placeholder?: string\n startPlaceholder?: string\n endPlaceholder?: string\n disabled?: boolean\n disabledBeforeToday?: boolean\n disabledAfterToday?: boolean\n valueFormat?: string\n startDateProps?: Record<string, any>\n endDateProps?: Record<string, any>\n // v-model 值 props,支持受控模式(外部设置初始值 / 双向绑定)\n singleDate?: DateValue\n singleDateTime?: DateValue\n dateRange?: DateRangeValue\n dateTimeRange?: DateRangeValue\n smartRange?: DateRangeValue\n }\n\n interface Emits {\n (e: 'update:singleDate', value: DateValue): void\n (e: 'update:singleDateTime', value: DateValue): void\n (e: 'update:dateRange', value: DateRangeValue): void\n (e: 'update:dateTimeRange', value: DateRangeValue): void\n (e: 'update:smartRange', value: DateRangeValue): void\n (e: 'change', value: DateValue | DateRangeValue): void\n }\n\n const props = withDefaults(defineProps<Props>(), {\n mode: 'date',\n placeholder: '',\n startPlaceholder: '',\n endPlaceholder: '',\n disabled: false,\n disabledBeforeToday: false,\n disabledAfterToday: false,\n valueFormat: 'yyyy-MM-dd',\n startDateProps: () => ({}),\n endDateProps: () => ({}),\n singleDate: null,\n singleDateTime: null,\n dateRange: null,\n dateTimeRange: null,\n smartRange: null,\n })\n\n const emits = defineEmits<Emits>()\n\n // 今日零点时间戳 —— 模块级缓存,isDateDisabled 为高频回调,避免重复 new Date()\n const _todayStart = (() => {\n const d = new Date()\n d.setHours(0, 0, 0, 0)\n return d.getTime()\n })()\n\n // —— 四种基础模式:computed getter/setter 实现受控绑定 ——\n // 后缀 Model 避免与同名 prop 产生 vue/no-dupe-keys 冲突\n const singleDateModel = computed<DateValue>({\n get: () => props.singleDate ?? null,\n set: val => {\n emits('update:singleDate', val)\n emits('change', val)\n },\n })\n\n const singleDateTimeModel = computed<DateValue>({\n get: () => props.singleDateTime ?? null,\n set: val => {\n emits('update:singleDateTime', val)\n emits('change', val)\n },\n })\n\n const dateRangeModel = computed<DateRangeValue>({\n get: () => props.dateRange ?? null,\n set: val => {\n emits('update:dateRange', val)\n emits('change', val)\n },\n })\n\n const dateTimeRangeModel = computed<DateRangeValue>({\n get: () => props.dateTimeRange ?? null,\n set: val => {\n emits('update:dateTimeRange', val)\n emits('change', val)\n },\n })\n\n // —— smart-range:两个独立 ref(prop 名为 smartRange,start/endDate 无命名冲突)——\n const startDate = ref<DateValue>(null)\n const endDate = ref<DateValue>(null)\n const endDateDisabled = computed(() => !startDate.value)\n\n // 将外部 smartRange prop 同步到内部 startDate/endDate\n watch(\n () => props.smartRange,\n val => {\n const newStart = val?.[0] ?? null\n const newEnd = val?.[1] ?? null\n if (newStart === startDate.value && newEnd === endDate.value) return\n startDate.value = newStart\n endDate.value = newEnd\n },\n { immediate: true, deep: true }\n )\n\n // 用户选择后:两者均有值时 emit;清空开始日期时级联清空结束日期\n watch(\n () => [startDate.value, endDate.value] as const,\n ([startVal, endVal]) => {\n if (!startVal) {\n endDate.value = null\n return\n }\n if (endVal) {\n emits('update:smartRange', [startVal, endVal])\n emits('change', [startVal, endVal])\n }\n },\n { deep: true }\n )\n\n // —— 日期禁用逻辑 ——\n const singleDisabledDate = (timestamp: number): boolean => {\n if (props.disabledBeforeToday && timestamp < _todayStart) return true\n if (props.disabledAfterToday && timestamp > _todayStart) return true\n return false\n }\n\n const endDisabledDate = (timestamp: number): boolean => {\n if (!startDate.value) return true\n if (timestamp < new Date(startDate.value).getTime()) return true\n return singleDisabledDate(timestamp)\n }\n\n // clearAll:emit 驱动父组件清空同名绑定,同时重置 smart-range 内部 ref\n defineExpose({\n clearAll: () => {\n emits('update:singleDate', null)\n emits('update:singleDateTime', null)\n emits('update:dateRange', null)\n emits('update:dateTimeRange', null)\n emits('update:smartRange', null)\n startDate.value = null\n endDate.value = null\n },\n })\n</script>\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"C_Steps-BHYNJI1l.css","names":[],"sources":["../src/components/C_Steps/index.vue?vue&type=style&index=0&scoped=96b53094&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-steps[data-v-96b53094] {\n --step-gap: 24px;\n --icon-size: 32px;\n --line-width: 2px;\n --line-gap: 4px;\n --primary: var(--c-primary, #18a058);\n --success: var(--c-success, #18a058);\n --warning: var(--c-warning, #f0a020);\n --error: var(--c-error, #d03050);\n --border: var(--c-border, rgba(0, 0, 0, 0.09));\n --bg-hover: rgba(0, 0, 0, 0.04);\n display: flex;\n}\n.steps-connected[data-v-96b53094] {\n --line-gap: 0px;\n}\n.steps-horizontal[data-v-96b53094] {\n flex-direction: row;\n align-items: flex-start;\n}\n.steps-vertical[data-v-96b53094] {\n flex-direction: column;\n}\n.step-item[data-v-96b53094] {\n display: flex;\n position: relative;\n flex: 1;\n gap: 12px;\n}\n.steps-horizontal .step-item[data-v-96b53094] {\n flex-direction: column;\n align-items: center;\n text-align: center;\n min-width: 0;\n}\n.steps-vertical .step-item[data-v-96b53094] {\n flex-direction: row;\n min-height: 72px;\n flex: none;\n width: 100%;\n}\n.step-indicator[data-v-96b53094] {\n position: relative;\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n.steps-horizontal .step-indicator[data-v-96b53094] {\n width: 100%;\n justify-content: center;\n}\n.steps-vertical .step-indicator[data-v-96b53094] {\n flex-direction: column;\n}\n.step-icon[data-v-96b53094] {\n width: var(--icon-size);\n height: var(--icon-size);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: var(--line-width) solid var(--border);\n background: var(--c-bg-card, #fff);\n position: relative;\n z-index: 2;\n transition: all 0.2s ease;\n font-size: 16px;\n}\n.step-finish .step-icon[data-v-96b53094] {\n border-color: var(--success);\n color: var(--success);\n}\n.step-process .step-icon[data-v-96b53094] {\n border-color: var(--primary);\n background: var(--primary);\n color: white;\n}\n.step-error .step-icon[data-v-96b53094] {\n border-color: var(--error);\n color: var(--error);\n}\n.step-index[data-v-96b53094] {\n font-size: 14px;\n font-weight: 500;\n}\n.step-line[data-v-96b53094] {\n background: var(--border);\n position: absolute;\n transition: background 0.2s ease;\n}\n.steps-horizontal .step-line[data-v-96b53094] {\n height: var(--line-width);\n left: calc(50% + var(--icon-size) / 2 + var(--line-gap));\n right: calc(-50% + var(--icon-size) / 2 + var(--line-gap));\n top: calc(var(--icon-size) / 2);\n}\n.steps-vertical .step-line[data-v-96b53094] {\n width: var(--line-width);\n top: var(--icon-size);\n bottom: 0;\n left: calc(var(--icon-size) / 2 - 1px);\n}\n.step-finish .step-line[data-v-96b53094] {\n background: var(--success);\n}\n.step-content[data-v-96b53094] {\n flex: 1;\n min-width: 0;\n}\n.steps-vertical .step-content[data-v-96b53094] {\n padding-top: 4px;\n}\n.step-title[data-v-96b53094] {\n font-size: 14px;\n font-weight: 500;\n line-height: 22px;\n margin-bottom: 2px;\n word-break: break-word;\n}\n.step-time[data-v-96b53094] {\n font-size: 12px;\n line-height: 20px;\n margin-bottom: 2px;\n opacity: 0.65;\n}\n.step-finish .step-time[data-v-96b53094] {\n color: var(--success);\n}\n.step-description[data-v-96b53094] {\n font-size: 12px;\n line-height: 20px;\n opacity: 0.65;\n}\n.step-wait .step-title[data-v-96b53094] {\n opacity: 0.65;\n}\n.step-process .step-title[data-v-96b53094] {\n color: var(--primary);\n font-weight: 600;\n}\n.step-error .step-title[data-v-96b53094] {\n color: var(--error);\n}\n.step-clickable[data-v-96b53094] {\n cursor: pointer;\n}\n.step-clickable:hover .step-icon[data-v-96b53094] {\n transform: scale(1.05);\n}\n.step-clickable:not(.step-process):hover .step-icon[data-v-96b53094] {\n background: var(--bg-hover);\n}\n.step-clickable:hover .step-title[data-v-96b53094] {\n color: var(--primary);\n}\n@media (max-width: 768px) {\n.steps-horizontal[data-v-96b53094] {\n flex-wrap: wrap;\n}\n.steps-horizontal .step-item[data-v-96b53094] {\n flex: 0 0 50%;\n margin-bottom: 24px;\n}\n.steps-horizontal .step-line[data-v-96b53094] {\n display: none;\n}\n}\n@media (prefers-reduced-motion: reduce) {\n.step-icon[data-v-96b53094],\n .step-line[data-v-96b53094] {\n transition: none;\n}\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"C_Steps-DY7vl-4I.css","names":[],"sources":["../src/components/C_Steps/index.vue?vue&type=style&index=0&scoped=96b53094&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-steps[data-v-96b53094] {\n --step-gap: 24px;\n --icon-size: 32px;\n --line-width: 2px;\n --line-gap: 4px;\n --primary: var(--c-primary, #18a058);\n --success: var(--c-success, #18a058);\n --warning: var(--c-warning, #f0a020);\n --error: var(--c-error, #d03050);\n --border: var(--c-border, rgba(0, 0, 0, 0.09));\n --bg-hover: rgba(0, 0, 0, 0.04);\n display: flex;\n}\n.steps-connected[data-v-96b53094] {\n --line-gap: 0px;\n}\n.steps-horizontal[data-v-96b53094] {\n flex-direction: row;\n align-items: flex-start;\n}\n.steps-vertical[data-v-96b53094] {\n flex-direction: column;\n}\n.step-item[data-v-96b53094] {\n display: flex;\n position: relative;\n flex: 1;\n gap: 12px;\n}\n.steps-horizontal .step-item[data-v-96b53094] {\n flex-direction: column;\n align-items: center;\n text-align: center;\n min-width: 0;\n}\n.steps-vertical .step-item[data-v-96b53094] {\n flex-direction: row;\n min-height: 72px;\n flex: none;\n width: 100%;\n}\n.step-indicator[data-v-96b53094] {\n position: relative;\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n.steps-horizontal .step-indicator[data-v-96b53094] {\n width: 100%;\n justify-content: center;\n}\n.steps-vertical .step-indicator[data-v-96b53094] {\n flex-direction: column;\n}\n.step-icon[data-v-96b53094] {\n width: var(--icon-size);\n height: var(--icon-size);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: var(--line-width) solid var(--border);\n background: var(--c-bg-card, #fff);\n position: relative;\n z-index: 2;\n transition: all 0.2s ease;\n font-size: 16px;\n}\n.step-finish .step-icon[data-v-96b53094] {\n border-color: var(--success);\n color: var(--success);\n}\n.step-process .step-icon[data-v-96b53094] {\n border-color: var(--primary);\n background: var(--primary);\n color: white;\n}\n.step-error .step-icon[data-v-96b53094] {\n border-color: var(--error);\n color: var(--error);\n}\n.step-index[data-v-96b53094] {\n font-size: 14px;\n font-weight: 500;\n}\n.step-line[data-v-96b53094] {\n background: var(--border);\n position: absolute;\n transition: background 0.2s ease;\n}\n.steps-horizontal .step-line[data-v-96b53094] {\n height: var(--line-width);\n left: calc(50% + var(--icon-size) / 2 + var(--line-gap));\n right: calc(-50% + var(--icon-size) / 2 + var(--line-gap));\n top: calc(var(--icon-size) / 2);\n}\n.steps-vertical .step-line[data-v-96b53094] {\n width: var(--line-width);\n top: var(--icon-size);\n bottom: 0;\n left: calc(var(--icon-size) / 2 - 1px);\n}\n.step-finish .step-line[data-v-96b53094] {\n background: var(--success);\n}\n.step-content[data-v-96b53094] {\n flex: 1;\n min-width: 0;\n}\n.steps-vertical .step-content[data-v-96b53094] {\n padding-top: 4px;\n}\n.step-title[data-v-96b53094] {\n font-size: 14px;\n font-weight: 500;\n line-height: 22px;\n margin-bottom: 2px;\n word-break: break-word;\n}\n.step-time[data-v-96b53094] {\n font-size: 12px;\n line-height: 20px;\n margin-bottom: 2px;\n opacity: 0.65;\n}\n.step-finish .step-time[data-v-96b53094] {\n color: var(--success);\n}\n.step-description[data-v-96b53094] {\n font-size: 12px;\n line-height: 20px;\n opacity: 0.65;\n}\n.step-wait .step-title[data-v-96b53094] {\n opacity: 0.65;\n}\n.step-process .step-title[data-v-96b53094] {\n color: var(--primary);\n font-weight: 600;\n}\n.step-error .step-title[data-v-96b53094] {\n color: var(--error);\n}\n.step-clickable[data-v-96b53094] {\n cursor: pointer;\n}\n.step-clickable:hover .step-icon[data-v-96b53094] {\n transform: scale(1.05);\n}\n.step-clickable:not(.step-process):hover .step-icon[data-v-96b53094] {\n background: var(--bg-hover);\n}\n.step-clickable:hover .step-title[data-v-96b53094] {\n color: var(--primary);\n}\n@media (max-width: 768px) {\n.steps-horizontal[data-v-96b53094] {\n flex-wrap: wrap;\n}\n.steps-horizontal .step-item[data-v-96b53094] {\n flex: 0 0 50%;\n margin-bottom: 24px;\n}\n.steps-horizontal .step-line[data-v-96b53094] {\n display: none;\n}\n}\n@media (prefers-reduced-motion: reduce) {\n.step-icon[data-v-96b53094],\n .step-line[data-v-96b53094] {\n transition: none;\n}\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
package/dist/C_Steps.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* unplugin-vue-components disabled */.c-steps[data-v-
|
|
1
|
+
/* unplugin-vue-components disabled */.c-steps[data-v-96b53094] {
|
|
2
2
|
--step-gap: 24px;
|
|
3
3
|
--icon-size: 32px;
|
|
4
4
|
--line-width: 2px;
|
|
@@ -11,48 +11,48 @@
|
|
|
11
11
|
--bg-hover: rgba(0, 0, 0, 0.04);
|
|
12
12
|
display: flex;
|
|
13
13
|
}
|
|
14
|
-
.steps-connected[data-v-
|
|
14
|
+
.steps-connected[data-v-96b53094] {
|
|
15
15
|
--line-gap: 0px;
|
|
16
16
|
}
|
|
17
|
-
.steps-horizontal[data-v-
|
|
17
|
+
.steps-horizontal[data-v-96b53094] {
|
|
18
18
|
flex-direction: row;
|
|
19
19
|
align-items: flex-start;
|
|
20
20
|
}
|
|
21
|
-
.steps-vertical[data-v-
|
|
21
|
+
.steps-vertical[data-v-96b53094] {
|
|
22
22
|
flex-direction: column;
|
|
23
23
|
}
|
|
24
|
-
.step-item[data-v-
|
|
24
|
+
.step-item[data-v-96b53094] {
|
|
25
25
|
display: flex;
|
|
26
26
|
position: relative;
|
|
27
27
|
flex: 1;
|
|
28
28
|
gap: 12px;
|
|
29
29
|
}
|
|
30
|
-
.steps-horizontal .step-item[data-v-
|
|
30
|
+
.steps-horizontal .step-item[data-v-96b53094] {
|
|
31
31
|
flex-direction: column;
|
|
32
32
|
align-items: center;
|
|
33
33
|
text-align: center;
|
|
34
34
|
min-width: 0;
|
|
35
35
|
}
|
|
36
|
-
.steps-vertical .step-item[data-v-
|
|
36
|
+
.steps-vertical .step-item[data-v-96b53094] {
|
|
37
37
|
flex-direction: row;
|
|
38
38
|
min-height: 72px;
|
|
39
39
|
flex: none;
|
|
40
40
|
width: 100%;
|
|
41
41
|
}
|
|
42
|
-
.step-indicator[data-v-
|
|
42
|
+
.step-indicator[data-v-96b53094] {
|
|
43
43
|
position: relative;
|
|
44
44
|
display: flex;
|
|
45
45
|
align-items: center;
|
|
46
46
|
flex-shrink: 0;
|
|
47
47
|
}
|
|
48
|
-
.steps-horizontal .step-indicator[data-v-
|
|
48
|
+
.steps-horizontal .step-indicator[data-v-96b53094] {
|
|
49
49
|
width: 100%;
|
|
50
50
|
justify-content: center;
|
|
51
51
|
}
|
|
52
|
-
.steps-vertical .step-indicator[data-v-
|
|
52
|
+
.steps-vertical .step-indicator[data-v-96b53094] {
|
|
53
53
|
flex-direction: column;
|
|
54
54
|
}
|
|
55
|
-
.step-icon[data-v-
|
|
55
|
+
.step-icon[data-v-96b53094] {
|
|
56
56
|
width: var(--icon-size);
|
|
57
57
|
height: var(--icon-size);
|
|
58
58
|
border-radius: 50%;
|
|
@@ -66,110 +66,110 @@
|
|
|
66
66
|
transition: all 0.2s ease;
|
|
67
67
|
font-size: 16px;
|
|
68
68
|
}
|
|
69
|
-
.step-finish .step-icon[data-v-
|
|
69
|
+
.step-finish .step-icon[data-v-96b53094] {
|
|
70
70
|
border-color: var(--success);
|
|
71
71
|
color: var(--success);
|
|
72
72
|
}
|
|
73
|
-
.step-process .step-icon[data-v-
|
|
73
|
+
.step-process .step-icon[data-v-96b53094] {
|
|
74
74
|
border-color: var(--primary);
|
|
75
75
|
background: var(--primary);
|
|
76
76
|
color: white;
|
|
77
77
|
}
|
|
78
|
-
.step-error .step-icon[data-v-
|
|
78
|
+
.step-error .step-icon[data-v-96b53094] {
|
|
79
79
|
border-color: var(--error);
|
|
80
80
|
color: var(--error);
|
|
81
81
|
}
|
|
82
|
-
.step-index[data-v-
|
|
82
|
+
.step-index[data-v-96b53094] {
|
|
83
83
|
font-size: 14px;
|
|
84
84
|
font-weight: 500;
|
|
85
85
|
}
|
|
86
|
-
.step-line[data-v-
|
|
86
|
+
.step-line[data-v-96b53094] {
|
|
87
87
|
background: var(--border);
|
|
88
88
|
position: absolute;
|
|
89
89
|
transition: background 0.2s ease;
|
|
90
90
|
}
|
|
91
|
-
.steps-horizontal .step-line[data-v-
|
|
91
|
+
.steps-horizontal .step-line[data-v-96b53094] {
|
|
92
92
|
height: var(--line-width);
|
|
93
93
|
left: calc(50% + var(--icon-size) / 2 + var(--line-gap));
|
|
94
94
|
right: calc(-50% + var(--icon-size) / 2 + var(--line-gap));
|
|
95
95
|
top: calc(var(--icon-size) / 2);
|
|
96
96
|
}
|
|
97
|
-
.steps-vertical .step-line[data-v-
|
|
97
|
+
.steps-vertical .step-line[data-v-96b53094] {
|
|
98
98
|
width: var(--line-width);
|
|
99
99
|
top: var(--icon-size);
|
|
100
100
|
bottom: 0;
|
|
101
101
|
left: calc(var(--icon-size) / 2 - 1px);
|
|
102
102
|
}
|
|
103
|
-
.step-finish .step-line[data-v-
|
|
103
|
+
.step-finish .step-line[data-v-96b53094] {
|
|
104
104
|
background: var(--success);
|
|
105
105
|
}
|
|
106
|
-
.step-content[data-v-
|
|
106
|
+
.step-content[data-v-96b53094] {
|
|
107
107
|
flex: 1;
|
|
108
108
|
min-width: 0;
|
|
109
109
|
}
|
|
110
|
-
.steps-vertical .step-content[data-v-
|
|
110
|
+
.steps-vertical .step-content[data-v-96b53094] {
|
|
111
111
|
padding-top: 4px;
|
|
112
112
|
}
|
|
113
|
-
.step-title[data-v-
|
|
113
|
+
.step-title[data-v-96b53094] {
|
|
114
114
|
font-size: 14px;
|
|
115
115
|
font-weight: 500;
|
|
116
116
|
line-height: 22px;
|
|
117
117
|
margin-bottom: 2px;
|
|
118
118
|
word-break: break-word;
|
|
119
119
|
}
|
|
120
|
-
.step-time[data-v-
|
|
120
|
+
.step-time[data-v-96b53094] {
|
|
121
121
|
font-size: 12px;
|
|
122
122
|
line-height: 20px;
|
|
123
123
|
margin-bottom: 2px;
|
|
124
124
|
opacity: 0.65;
|
|
125
125
|
}
|
|
126
|
-
.step-finish .step-time[data-v-
|
|
126
|
+
.step-finish .step-time[data-v-96b53094] {
|
|
127
127
|
color: var(--success);
|
|
128
128
|
}
|
|
129
|
-
.step-description[data-v-
|
|
129
|
+
.step-description[data-v-96b53094] {
|
|
130
130
|
font-size: 12px;
|
|
131
131
|
line-height: 20px;
|
|
132
132
|
opacity: 0.65;
|
|
133
133
|
}
|
|
134
|
-
.step-wait .step-title[data-v-
|
|
134
|
+
.step-wait .step-title[data-v-96b53094] {
|
|
135
135
|
opacity: 0.65;
|
|
136
136
|
}
|
|
137
|
-
.step-process .step-title[data-v-
|
|
137
|
+
.step-process .step-title[data-v-96b53094] {
|
|
138
138
|
color: var(--primary);
|
|
139
139
|
font-weight: 600;
|
|
140
140
|
}
|
|
141
|
-
.step-error .step-title[data-v-
|
|
141
|
+
.step-error .step-title[data-v-96b53094] {
|
|
142
142
|
color: var(--error);
|
|
143
143
|
}
|
|
144
|
-
.step-clickable[data-v-
|
|
144
|
+
.step-clickable[data-v-96b53094] {
|
|
145
145
|
cursor: pointer;
|
|
146
146
|
}
|
|
147
|
-
.step-clickable:hover .step-icon[data-v-
|
|
147
|
+
.step-clickable:hover .step-icon[data-v-96b53094] {
|
|
148
148
|
transform: scale(1.05);
|
|
149
149
|
}
|
|
150
|
-
.step-clickable:not(.step-process):hover .step-icon[data-v-
|
|
150
|
+
.step-clickable:not(.step-process):hover .step-icon[data-v-96b53094] {
|
|
151
151
|
background: var(--bg-hover);
|
|
152
152
|
}
|
|
153
|
-
.step-clickable:hover .step-title[data-v-
|
|
153
|
+
.step-clickable:hover .step-title[data-v-96b53094] {
|
|
154
154
|
color: var(--primary);
|
|
155
155
|
}
|
|
156
156
|
@media (max-width: 768px) {
|
|
157
|
-
.steps-horizontal[data-v-
|
|
157
|
+
.steps-horizontal[data-v-96b53094] {
|
|
158
158
|
flex-wrap: wrap;
|
|
159
159
|
}
|
|
160
|
-
.steps-horizontal .step-item[data-v-
|
|
160
|
+
.steps-horizontal .step-item[data-v-96b53094] {
|
|
161
161
|
flex: 0 0 50%;
|
|
162
162
|
margin-bottom: 24px;
|
|
163
163
|
}
|
|
164
|
-
.steps-horizontal .step-line[data-v-
|
|
164
|
+
.steps-horizontal .step-line[data-v-96b53094] {
|
|
165
165
|
display: none;
|
|
166
166
|
}
|
|
167
167
|
}
|
|
168
168
|
@media (prefers-reduced-motion: reduce) {
|
|
169
|
-
.step-icon[data-v-
|
|
170
|
-
.step-line[data-v-
|
|
169
|
+
.step-icon[data-v-96b53094],
|
|
170
|
+
.step-line[data-v-96b53094] {
|
|
171
171
|
transition: none;
|
|
172
172
|
}
|
|
173
173
|
}
|
|
174
174
|
|
|
175
|
-
/*# sourceMappingURL=C_Steps-
|
|
175
|
+
/*# sourceMappingURL=C_Steps-BHYNJI1l.css.map*/
|
package/dist/C_Steps.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Steps.js","names":["direction","connected","steps","clickable"],"sources":["../src/components/C_Steps/index.vue","../src/components/C_Steps/index.vue","../src/components/C_Steps/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 步骤条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-steps\" :class=\"[`steps-${direction}`, { 'steps-connected': connected }]\">\r\n <div\r\n v-for=\"(step, index) in steps\"\r\n :key=\"index\"\r\n class=\"step-item\"\r\n :class=\"[\r\n `step-${getStatus(index)}`,\r\n { 'step-clickable': clickable && !step.disabled },\r\n ]\"\r\n @click=\"handleClick(index)\"\r\n >\r\n <div class=\"step-indicator\">\r\n <div class=\"step-icon\">\r\n <i v-if=\"step.icon\" :class=\"step.icon\"></i>\r\n <i v-else-if=\"getStatus(index) === 'finish'\" class=\"i-mdi:check\"></i>\r\n <span v-else class=\"step-index\">{{ index + 1 }}</span>\r\n </div>\r\n <div v-if=\"index < steps.length - 1\" class=\"step-line\" />\r\n </div>\r\n <div class=\"step-content\">\r\n <div class=\"step-title\">{{ step.title }}</div>\r\n <div v-if=\"step.time\" class=\"step-time\">{{ step.time }}</div>\r\n <div v-if=\"step.description\" class=\"step-description\">\r\n {{ step.description }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\ndefineOptions({ name: \"C_Steps\" });\r\n\r\nexport interface StepItem {\r\n title: string;\r\n description?: string;\r\n time?: string;\r\n icon?: string;\r\n status?: \"wait\" | \"process\" | \"finish\" | \"error\";\r\n disabled?: boolean;\r\n detail?: string;\r\n}\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n steps: StepItem[];\r\n current?: number;\r\n direction?: \"horizontal\" | \"vertical\";\r\n clickable?: boolean;\r\n /** 水平模式下线条是否与图标紧密相连,默认 false(两端留有对称间距)*/\r\n connected?: boolean;\r\n }>(),\r\n {\r\n current: 0,\r\n direction: \"horizontal\",\r\n clickable: false,\r\n connected: false,\r\n },\r\n);\r\n\r\nconst emit = defineEmits<{\r\n \"update:current\": [number];\r\n change: [number];\r\n}>();\r\n\r\nconst getStatus = (index: number) => {\r\n if (props.steps[index].status) {\r\n return props.steps[index].status;\r\n }\r\n if (index < props.current) return \"finish\";\r\n if (index === props.current) return \"process\";\r\n return \"wait\";\r\n};\r\n\r\nconst handleClick = (index: number) => {\r\n if (!props.clickable || props.steps[index].disabled) return;\r\n emit(\"update:current\", index);\r\n emit(\"change\", index);\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n@use \"./index.scss\";\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 步骤条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-steps\" :class=\"[`steps-${direction}`, { 'steps-connected': connected }]\">\r\n <div\r\n v-for=\"(step, index) in steps\"\r\n :key=\"index\"\r\n class=\"step-item\"\r\n :class=\"[\r\n `step-${getStatus(index)}`,\r\n { 'step-clickable': clickable && !step.disabled },\r\n ]\"\r\n @click=\"handleClick(index)\"\r\n >\r\n <div class=\"step-indicator\">\r\n <div class=\"step-icon\">\r\n <i v-if=\"step.icon\" :class=\"step.icon\"></i>\r\n <i v-else-if=\"getStatus(index) === 'finish'\" class=\"i-mdi:check\"></i>\r\n <span v-else class=\"step-index\">{{ index + 1 }}</span>\r\n </div>\r\n <div v-if=\"index < steps.length - 1\" class=\"step-line\" />\r\n </div>\r\n <div class=\"step-content\">\r\n <div class=\"step-title\">{{ step.title }}</div>\r\n <div v-if=\"step.time\" class=\"step-time\">{{ step.time }}</div>\r\n <div v-if=\"step.description\" class=\"step-description\">\r\n {{ step.description }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\ndefineOptions({ name: \"C_Steps\" });\r\n\r\nexport interface StepItem {\r\n title: string;\r\n description?: string;\r\n time?: string;\r\n icon?: string;\r\n status?: \"wait\" | \"process\" | \"finish\" | \"error\";\r\n disabled?: boolean;\r\n detail?: string;\r\n}\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n steps: StepItem[];\r\n current?: number;\r\n direction?: \"horizontal\" | \"vertical\";\r\n clickable?: boolean;\r\n /** 水平模式下线条是否与图标紧密相连,默认 false(两端留有对称间距)*/\r\n connected?: boolean;\r\n }>(),\r\n {\r\n current: 0,\r\n direction: \"horizontal\",\r\n clickable: false,\r\n connected: false,\r\n },\r\n);\r\n\r\nconst emit = defineEmits<{\r\n \"update:current\": [number];\r\n change: [number];\r\n}>();\r\n\r\nconst getStatus = (index: number) => {\r\n if (props.steps[index].status) {\r\n return props.steps[index].status;\r\n }\r\n if (index < props.current) return \"finish\";\r\n if (index === props.current) return \"process\";\r\n return \"wait\";\r\n};\r\n\r\nconst handleClick = (index: number) => {\r\n if (!props.clickable || props.steps[index].disabled) return;\r\n emit(\"update:current\", index);\r\n emit(\"change\", index);\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 步骤条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-steps\" :class=\"[`steps-${direction}`, { 'steps-connected': connected }]\">\r\n <div\r\n v-for=\"(step, index) in steps\"\r\n :key=\"index\"\r\n class=\"step-item\"\r\n :class=\"[\r\n `step-${getStatus(index)}`,\r\n { 'step-clickable': clickable && !step.disabled },\r\n ]\"\r\n @click=\"handleClick(index)\"\r\n >\r\n <div class=\"step-indicator\">\r\n <div class=\"step-icon\">\r\n <i v-if=\"step.icon\" :class=\"step.icon\"></i>\r\n <i v-else-if=\"getStatus(index) === 'finish'\" class=\"i-mdi:check\"></i>\r\n <span v-else class=\"step-index\">{{ index + 1 }}</span>\r\n </div>\r\n <div v-if=\"index < steps.length - 1\" class=\"step-line\" />\r\n </div>\r\n <div class=\"step-content\">\r\n <div class=\"step-title\">{{ step.title }}</div>\r\n <div v-if=\"step.time\" class=\"step-time\">{{ step.time }}</div>\r\n <div v-if=\"step.description\" class=\"step-description\">\r\n {{ step.description }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\ndefineOptions({ name: \"C_Steps\" });\r\n\r\nexport interface StepItem {\r\n title: string;\r\n description?: string;\r\n time?: string;\r\n icon?: string;\r\n status?: \"wait\" | \"process\" | \"finish\" | \"error\";\r\n disabled?: boolean;\r\n detail?: string;\r\n}\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n steps: StepItem[];\r\n current?: number;\r\n direction?: \"horizontal\" | \"vertical\";\r\n clickable?: boolean;\r\n /** 水平模式下线条是否与图标紧密相连,默认 false(两端留有对称间距)*/\r\n connected?: boolean;\r\n }>(),\r\n {\r\n current: 0,\r\n direction: \"horizontal\",\r\n clickable: false,\r\n connected: false,\r\n },\r\n);\r\n\r\nconst emit = defineEmits<{\r\n \"update:current\": [number];\r\n change: [number];\r\n}>();\r\n\r\nconst getStatus = (index: number) => {\r\n if (props.steps[index].status) {\r\n return props.steps[index].status;\r\n }\r\n if (index < props.current) return \"finish\";\r\n if (index === props.current) return \"process\";\r\n return \"wait\";\r\n};\r\n\r\nconst handleClick = (index: number) => {\r\n if (!props.clickable || props.steps[index].disabled) return;\r\n emit(\"update:current\", index);\r\n emit(\"change\", index);\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"ylBEmDA,IAAM,EAAQ,EAiBR,EAAO,EAKP,EAAa,GACb,EAAM,MAAM,GAAO,OACd,EAAM,MAAM,GAAO,OAExB,EAAQ,EAAM,QAAgB,SAC9B,IAAU,EAAM,QAAgB,UAC7B,OAGH,EAAe,GAAkB,CACjC,CAAC,EAAM,WAAa,EAAM,MAAM,GAAO,WAC3C,EAAK,iBAAkB,EAAM,CAC7B,EAAK,SAAU,EAAM,4DAlDf,MAAA,CA3BD,OAAA,EAAA,EAAA,gBAAK,CAAC,UAAS,CAAA,SAAmBA,EAAAA,YAAS,CAAA,kBAAyBC,EAAAA,UAAS,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBA0B1E,EAAA,SAAA,MAAA,EAAA,EAAA,YAxBoBC,EAAAA,OAAhB,EAAM,gDAwBV,MAAA,CAvBH,IAAK,EACN,OAAA,EAAA,EAAA,gBAAK,CAAC,YAAW,CAAA,QACU,EAAU,EAAK,GAAA,CAAA,iBAAkCC,EAAAA,WAAS,CAAK,EAAK,SAAQ,CAAA,CAAA,CAAA,CAItG,QAAK,GAAE,EAAY,EAAK,4BASnB,MAPN,EAOM,EAAA,EAAA,EAAA,oBAFE,MAJN,EAIM,CAHK,EAAK,OAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAA6B,IAAA,OAAtB,OAAA,EAAA,EAAA,gBAAO,EAAK,KAAI,WACvB,EAAU,EAAK,GAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAAwC,IAArE,EAAqE,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBACf,OAAtD,GAAA,EAAA,EAAA,iBAAmC,EAAK,EAAA,CAAA,EAAA,EAAA,CAAA,CAE/B,EAAQD,EAAAA,MAAM,OAAM,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAA0B,MAAzD,EAAyD,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAAA,CAAA,EAAA,EAAA,EAAA,oBAQrD,MANN,EAMM,0BAL0C,MAA9C,GAAA,EAAA,EAAA,iBAA2B,EAAK,MAAK,CAAA,EAAA,CAC1B,EAAK,OAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAA6C,MAA7D,GAAA,EAAA,EAAA,iBAA2C,EAAK,KAAI,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CACzC,EAAK,cAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEV,MAFN,GAAA,EAAA,EAAA,iBACK,EAAK,YAAW,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA"}
|
|
1
|
+
{"version":3,"file":"C_Steps.js","names":["direction","connected","steps","clickable"],"sources":["../src/components/C_Steps/index.vue","../src/components/C_Steps/index.vue","../src/components/C_Steps/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 步骤条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n class=\"c-steps\"\r\n :class=\"[`steps-${direction}`, { 'steps-connected': connected }]\"\r\n >\r\n <div\r\n v-for=\"(step, index) in steps\"\r\n :key=\"index\"\r\n class=\"step-item\"\r\n :class=\"[\r\n `step-${getStatus(index)}`,\r\n { 'step-clickable': clickable && !step.disabled },\r\n ]\"\r\n @click=\"handleClick(index)\"\r\n >\r\n <div class=\"step-indicator\">\r\n <div class=\"step-icon\">\r\n <i\r\n v-if=\"step.icon\"\r\n :class=\"step.icon\"\r\n ></i>\r\n <i\r\n v-else-if=\"getStatus(index) === 'finish'\"\r\n class=\"i-mdi:check\"\r\n ></i>\r\n <span\r\n v-else\r\n class=\"step-index\"\r\n >{{ index + 1 }}</span\r\n >\r\n </div>\r\n <div\r\n v-if=\"index < steps.length - 1\"\r\n class=\"step-line\"\r\n />\r\n </div>\r\n <div class=\"step-content\">\r\n <div class=\"step-title\">{{ step.title }}</div>\r\n <div\r\n v-if=\"step.time\"\r\n class=\"step-time\"\r\n >{{ step.time }}</div\r\n >\r\n <div\r\n v-if=\"step.description\"\r\n class=\"step-description\"\r\n >\r\n {{ step.description }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n defineOptions({ name: 'C_Steps' })\r\n\r\n export interface StepItem {\r\n title: string\r\n description?: string\r\n time?: string\r\n icon?: string\r\n status?: 'wait' | 'process' | 'finish' | 'error'\r\n disabled?: boolean\r\n detail?: string\r\n }\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n steps: StepItem[]\r\n current?: number\r\n direction?: 'horizontal' | 'vertical'\r\n clickable?: boolean\r\n /** 水平模式下线条是否与图标紧密相连,默认 false(两端留有对称间距)*/\r\n connected?: boolean\r\n }>(),\r\n {\r\n current: 0,\r\n direction: 'horizontal',\r\n clickable: false,\r\n connected: false,\r\n }\r\n )\r\n\r\n const emit = defineEmits<{\r\n 'update:current': [number]\r\n change: [number]\r\n }>()\r\n\r\n const getStatus = (index: number) => {\r\n if (props.steps[index].status) {\r\n return props.steps[index].status\r\n }\r\n if (index < props.current) return 'finish'\r\n if (index === props.current) return 'process'\r\n return 'wait'\r\n }\r\n\r\n const handleClick = (index: number) => {\r\n if (!props.clickable || props.steps[index].disabled) return\r\n emit('update:current', index)\r\n emit('change', index)\r\n }\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n @use './index.scss';\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 步骤条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n class=\"c-steps\"\r\n :class=\"[`steps-${direction}`, { 'steps-connected': connected }]\"\r\n >\r\n <div\r\n v-for=\"(step, index) in steps\"\r\n :key=\"index\"\r\n class=\"step-item\"\r\n :class=\"[\r\n `step-${getStatus(index)}`,\r\n { 'step-clickable': clickable && !step.disabled },\r\n ]\"\r\n @click=\"handleClick(index)\"\r\n >\r\n <div class=\"step-indicator\">\r\n <div class=\"step-icon\">\r\n <i\r\n v-if=\"step.icon\"\r\n :class=\"step.icon\"\r\n ></i>\r\n <i\r\n v-else-if=\"getStatus(index) === 'finish'\"\r\n class=\"i-mdi:check\"\r\n ></i>\r\n <span\r\n v-else\r\n class=\"step-index\"\r\n >{{ index + 1 }}</span\r\n >\r\n </div>\r\n <div\r\n v-if=\"index < steps.length - 1\"\r\n class=\"step-line\"\r\n />\r\n </div>\r\n <div class=\"step-content\">\r\n <div class=\"step-title\">{{ step.title }}</div>\r\n <div\r\n v-if=\"step.time\"\r\n class=\"step-time\"\r\n >{{ step.time }}</div\r\n >\r\n <div\r\n v-if=\"step.description\"\r\n class=\"step-description\"\r\n >\r\n {{ step.description }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n defineOptions({ name: 'C_Steps' })\r\n\r\n export interface StepItem {\r\n title: string\r\n description?: string\r\n time?: string\r\n icon?: string\r\n status?: 'wait' | 'process' | 'finish' | 'error'\r\n disabled?: boolean\r\n detail?: string\r\n }\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n steps: StepItem[]\r\n current?: number\r\n direction?: 'horizontal' | 'vertical'\r\n clickable?: boolean\r\n /** 水平模式下线条是否与图标紧密相连,默认 false(两端留有对称间距)*/\r\n connected?: boolean\r\n }>(),\r\n {\r\n current: 0,\r\n direction: 'horizontal',\r\n clickable: false,\r\n connected: false,\r\n }\r\n )\r\n\r\n const emit = defineEmits<{\r\n 'update:current': [number]\r\n change: [number]\r\n }>()\r\n\r\n const getStatus = (index: number) => {\r\n if (props.steps[index].status) {\r\n return props.steps[index].status\r\n }\r\n if (index < props.current) return 'finish'\r\n if (index === props.current) return 'process'\r\n return 'wait'\r\n }\r\n\r\n const handleClick = (index: number) => {\r\n if (!props.clickable || props.steps[index].disabled) return\r\n emit('update:current', index)\r\n emit('change', index)\r\n }\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n @use './index.scss';\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 步骤条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n class=\"c-steps\"\r\n :class=\"[`steps-${direction}`, { 'steps-connected': connected }]\"\r\n >\r\n <div\r\n v-for=\"(step, index) in steps\"\r\n :key=\"index\"\r\n class=\"step-item\"\r\n :class=\"[\r\n `step-${getStatus(index)}`,\r\n { 'step-clickable': clickable && !step.disabled },\r\n ]\"\r\n @click=\"handleClick(index)\"\r\n >\r\n <div class=\"step-indicator\">\r\n <div class=\"step-icon\">\r\n <i\r\n v-if=\"step.icon\"\r\n :class=\"step.icon\"\r\n ></i>\r\n <i\r\n v-else-if=\"getStatus(index) === 'finish'\"\r\n class=\"i-mdi:check\"\r\n ></i>\r\n <span\r\n v-else\r\n class=\"step-index\"\r\n >{{ index + 1 }}</span\r\n >\r\n </div>\r\n <div\r\n v-if=\"index < steps.length - 1\"\r\n class=\"step-line\"\r\n />\r\n </div>\r\n <div class=\"step-content\">\r\n <div class=\"step-title\">{{ step.title }}</div>\r\n <div\r\n v-if=\"step.time\"\r\n class=\"step-time\"\r\n >{{ step.time }}</div\r\n >\r\n <div\r\n v-if=\"step.description\"\r\n class=\"step-description\"\r\n >\r\n {{ step.description }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n defineOptions({ name: 'C_Steps' })\r\n\r\n export interface StepItem {\r\n title: string\r\n description?: string\r\n time?: string\r\n icon?: string\r\n status?: 'wait' | 'process' | 'finish' | 'error'\r\n disabled?: boolean\r\n detail?: string\r\n }\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n steps: StepItem[]\r\n current?: number\r\n direction?: 'horizontal' | 'vertical'\r\n clickable?: boolean\r\n /** 水平模式下线条是否与图标紧密相连,默认 false(两端留有对称间距)*/\r\n connected?: boolean\r\n }>(),\r\n {\r\n current: 0,\r\n direction: 'horizontal',\r\n clickable: false,\r\n connected: false,\r\n }\r\n )\r\n\r\n const emit = defineEmits<{\r\n 'update:current': [number]\r\n change: [number]\r\n }>()\r\n\r\n const getStatus = (index: number) => {\r\n if (props.steps[index].status) {\r\n return props.steps[index].status\r\n }\r\n if (index < props.current) return 'finish'\r\n if (index === props.current) return 'process'\r\n return 'wait'\r\n }\r\n\r\n const handleClick = (index: number) => {\r\n if (!props.clickable || props.steps[index].disabled) return\r\n emit('update:current', index)\r\n emit('change', index)\r\n }\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n @use './index.scss';\r\n</style>\r\n"],"mappings":"ylBE0EE,IAAM,EAAQ,EAiBR,EAAO,EAKP,EAAa,GACb,EAAM,MAAM,GAAO,OACd,EAAM,MAAM,GAAO,OAExB,EAAQ,EAAM,QAAgB,SAC9B,IAAU,EAAM,QAAgB,UAC7B,OAGH,EAAe,GAAkB,CACjC,CAAC,EAAM,WAAa,EAAM,MAAM,GAAO,WAC3C,EAAK,iBAAkB,EAAM,CAC7B,EAAK,SAAU,EAAM,4DAlDjB,MAAA,CAjDJ,OAAA,EAAA,EAAA,gBAAK,CAAC,UAAS,CAAA,SACGA,EAAAA,YAAS,CAAA,kBAAyBC,EAAAA,UAAS,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBA+CvD,EAAA,SAAA,MAAA,EAAA,EAAA,YA5CoBC,EAAAA,OAAhB,EAAM,gDA4CV,MAAA,CA3CH,IAAK,EACN,OAAA,EAAA,EAAA,gBAAK,CAAC,YAAW,CAAA,QACU,EAAU,EAAK,GAAA,CAAA,iBAAkCC,EAAAA,WAAS,CAAK,EAAK,SAAQ,CAAA,CAAA,CAAA,CAItG,QAAK,GAAE,EAAY,EAAK,4BAsBnB,MApBN,EAoBM,EAAA,EAAA,EAAA,oBALE,MAdN,EAcM,CAZI,EAAK,OAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAER,IAAA,OADF,OAAA,EAAA,EAAA,gBAAO,EAAK,KAAI,WAGN,EAAU,EAAK,GAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEvB,IAHL,EAGK,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAIgC,OAHrC,GAAA,EAAA,EAAA,iBAGM,EAAK,EAAA,CAAA,EAAA,EAAA,CAAA,CAIL,EAAQD,EAAAA,MAAM,OAAM,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAE1B,MAHF,EAGE,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAAA,CAAA,EAAA,EAAA,EAAA,oBAeE,MAbN,EAaM,0BAZ0C,MAA9C,GAAA,EAAA,EAAA,iBAA2B,EAAK,MAAK,CAAA,EAAA,CAE7B,EAAK,OAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEqB,MAHlC,GAAA,EAAA,EAAA,iBAGM,EAAK,KAAI,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAGP,EAAK,cAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAIP,MALN,GAAA,EAAA,EAAA,iBAIK,EAAK,YAAW,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA"}
|