@robot-admin/naive-ui-components 0.3.1 → 0.3.3
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_ActionBar-nnfbZCea.css.map +1 -0
- package/dist/C_ActionBar2.js +2 -2
- package/dist/C_ActionBar2.js.map +1 -1
- package/dist/C_AntV-DGjscTWa.css.map +1 -0
- package/dist/C_AntV2.js +6 -6
- package/dist/C_AntV2.js.map +1 -1
- package/dist/C_Barcode-DjTmDkbQ.css.map +1 -0
- package/dist/C_Barcode2.js +1 -1
- package/dist/C_Barcode2.js.map +1 -1
- package/dist/C_Captcha-Ccq3DMrR.css.map +1 -0
- package/dist/C_Captcha2.js +1 -1
- package/dist/C_Captcha2.js.map +1 -1
- package/dist/C_Cascade-IUUHIh7r.css.map +1 -0
- package/dist/C_Cascade2.js +2 -2
- package/dist/C_Cascade2.js.map +1 -1
- package/dist/C_City-Cv5BESaN.css.map +1 -0
- package/dist/C_City2.js +2 -2
- package/dist/C_City2.js.map +1 -1
- package/dist/C_Code-DPZlNSxL.css.map +1 -0
- package/dist/C_Code2.js +8 -7
- package/dist/C_Code2.js.map +1 -1
- package/dist/C_CollapsePanel-Fap-lv_5.css.map +1 -0
- package/dist/C_CollapsePanel2.js +1 -1
- package/dist/C_CollapsePanel2.js.map +1 -1
- package/dist/C_Cron-C0-8b5af.css.map +1 -0
- package/dist/C_Cron2.js +15 -14
- package/dist/C_Cron2.js.map +1 -1
- package/dist/C_Date2.js +1 -1
- package/dist/C_Date2.js.map +1 -1
- package/dist/C_Draggable-Bq6o0qXn.css.map +1 -0
- package/dist/C_Draggable2.js +1 -1
- package/dist/C_Draggable2.js.map +1 -1
- package/dist/C_Editor-OlxIF9-5.css.map +1 -0
- package/dist/C_Editor2.js +1 -1
- package/dist/C_Editor2.js.map +1 -1
- package/dist/C_FilePreview-B4XgTv-h.css.map +1 -0
- package/dist/C_FilePreview.cjs +1 -0
- package/dist/C_FilePreview.js +1 -0
- package/dist/C_FilePreview2.js +10 -9
- package/dist/C_FilePreview2.js.map +1 -1
- package/dist/C_Form-Cr9oX037.css.map +1 -0
- package/dist/C_Form.cjs +1 -0
- package/dist/C_Form.js +1 -0
- package/dist/C_Form2.js +69 -72
- package/dist/C_Form2.js.map +1 -1
- package/dist/C_FormSearch-DlIEoh7X.css.map +1 -0
- package/dist/C_FormSearch2.js +2 -2
- package/dist/C_FormSearch2.js.map +1 -1
- package/dist/C_FormulaEditor-Cm0CokN5.css.map +1 -0
- package/dist/C_FormulaEditor2.js +6 -6
- package/dist/C_FormulaEditor2.js.map +1 -1
- package/dist/C_FullCalendar-BULCIlVK.css.map +1 -0
- package/dist/C_FullCalendar2.js +2 -2
- package/dist/C_FullCalendar2.js.map +1 -1
- package/dist/C_Guide2.js +1 -1
- package/dist/C_Guide2.js.map +1 -1
- package/dist/C_Icon2.js.map +1 -1
- package/dist/C_ImageCropper-DrmUlaLi.css.map +1 -0
- package/dist/C_ImageCropper2.js +4 -4
- package/dist/C_ImageCropper2.js.map +1 -1
- package/dist/C_Language2.js +1 -1
- package/dist/C_Language2.js.map +1 -1
- package/dist/C_Map-WUMXSAfy.css.map +1 -0
- package/dist/C_Map2.js +2 -2
- package/dist/C_Map2.js.map +1 -1
- package/dist/C_Markdown-Dmv8yaM4.css.map +1 -0
- package/dist/C_Markdown2.js +4 -4
- package/dist/C_Markdown2.js.map +1 -1
- package/dist/C_NotificationCenter-DbgBiyqB.css.map +1 -0
- package/dist/C_NotificationCenter2.js +21 -20
- package/dist/C_NotificationCenter2.js.map +1 -1
- package/dist/C_Progress2.js +1 -1
- package/dist/C_Progress2.js.map +1 -1
- package/dist/C_QRCode-G7fiAkm4.css.map +1 -0
- package/dist/C_QRCode2.js +1 -1
- package/dist/C_QRCode2.js.map +1 -1
- package/dist/C_Signature-es-ZNPzr.css.map +1 -0
- package/dist/C_Signature2.js +2 -2
- package/dist/C_Signature2.js.map +1 -1
- package/dist/C_SplitPane-Br2eK8IG.css.map +1 -0
- package/dist/C_SplitPane2.js +1 -1
- package/dist/C_SplitPane2.js.map +1 -1
- package/dist/C_Steps-P9Qj9iDd.css.map +1 -0
- package/dist/C_Steps2.js +1 -1
- package/dist/C_Steps2.js.map +1 -1
- package/dist/C_Table-DAwAxr72.css.map +1 -0
- package/dist/C_Table.cjs +1 -0
- package/dist/C_Table.js +1 -0
- package/dist/C_Table2.js +3 -3
- package/dist/C_Table2.js.map +1 -1
- package/dist/C_Theme2.js +1 -1
- package/dist/C_Theme2.js.map +1 -1
- package/dist/C_Time-Bd_e1YDN.css.map +1 -0
- package/dist/C_Time2.js +2 -2
- package/dist/C_Time2.js.map +1 -1
- package/dist/C_Tree-DnGc_MPb.css.map +1 -0
- package/dist/C_Tree2.js +2 -2
- package/dist/C_Tree2.js.map +1 -1
- package/dist/C_Upload-i8LB_29U.css.map +1 -0
- package/dist/C_Upload2.js +5 -5
- package/dist/C_Upload2.js.map +1 -1
- package/dist/C_VideoPlayer-rm0MODUv.css.map +1 -0
- package/dist/C_VideoPlayer2.js +21 -20
- package/dist/C_VideoPlayer2.js.map +1 -1
- package/dist/C_VtableGantt-BpY-Rng3.css.map +1 -0
- package/dist/C_VtableGantt2.js +2 -2
- package/dist/C_VtableGantt2.js.map +1 -1
- package/dist/C_WaterFall-HWB-gPON.css.map +1 -0
- package/dist/C_WaterFall2.js +2 -2
- package/dist/C_WaterFall2.js.map +1 -1
- package/dist/C_WorkFlow-CSO86Cuc.css.map +1 -0
- package/dist/C_WorkFlow2.js +6 -6
- package/dist/C_WorkFlow2.js.map +1 -1
- package/dist/constants.d.ts +4 -4
- package/dist/constants2.d.ts +4 -4
- package/dist/constants3.d.ts +4 -4
- package/dist/constants4.d.ts +5 -5
- package/dist/constants5.d.ts +2 -2
- package/dist/data.d.ts +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.vue.d.ts +1 -1
- package/dist/index10.vue.d.ts +7 -7
- package/dist/index11.vue.d.ts +2 -2
- package/dist/index12.vue.d.ts +5 -5
- package/dist/index12.vue.d.ts.map +1 -1
- package/dist/index13.vue.d.ts +1 -1
- package/dist/index14.vue.d.ts +1 -1
- package/dist/index16.vue.d.ts +1 -1
- package/dist/index2.vue.d.ts +6 -6
- package/dist/index3.vue.d.ts +2 -2
- package/dist/index4.vue.d.ts +2 -2
- package/dist/index5.vue.d.ts +2 -2
- package/dist/index6.vue.d.ts +1 -1
- package/dist/index8.vue.d.ts +3 -3
- package/dist/resolver.js.map +1 -1
- package/dist/style.css +1555 -1555
- package/dist/useCalendarEvents.d.ts +2 -2
- package/dist/useCollapsePanel.d.ts +2 -2
- package/dist/useCropperCore.d.ts +3 -3
- package/dist/useDraggableLayout.d.ts +8 -8
- package/dist/useDynamicFormState.d.ts +111 -111
- package/dist/useDynamicFormState.d.ts.map +1 -1
- package/dist/useEdgeInteraction.d.ts +2 -2
- package/dist/useInfiniteScroll.d.ts +1 -1
- package/dist/useModalEdit.d.ts +4 -4
- package/dist/useModalEdit.d.ts.map +1 -1
- package/dist/useQRCode.d.ts +4 -4
- package/dist/useQRCode.d.ts.map +1 -1
- package/dist/useSearchState.d.ts +2 -2
- package/dist/useSignatureHistory.d.ts +4 -4
- package/dist/useSplitResize.d.ts +6 -6
- package/dist/useSplitResize.d.ts.map +1 -1
- package/dist/useTimeSelection.d.ts +2 -2
- package/dist/useTreeOperations.d.ts +6 -6
- package/dist/useWorkflowValidation.d.ts +5 -5
- package/package.json +2 -1
- package/dist/C_ActionBar-DWN-woTc.css.map +0 -1
- package/dist/C_AntV-AFKyK6hH.css.map +0 -1
- package/dist/C_Barcode-P_EFj8dC.css.map +0 -1
- package/dist/C_Captcha-C-ef41xw.css.map +0 -1
- package/dist/C_Cascade-D9kNsjsV.css.map +0 -1
- package/dist/C_City-BCQ4ipiK.css.map +0 -1
- package/dist/C_Code-C9kvvEmO.css.map +0 -1
- package/dist/C_CollapsePanel-BUJHuYcU.css.map +0 -1
- package/dist/C_Cron-yx2Ob4Jl.css.map +0 -1
- package/dist/C_Draggable-C483syRC.css.map +0 -1
- package/dist/C_Editor-Bp0SyIEw.css.map +0 -1
- package/dist/C_FilePreview-CPqvhoCy.css.map +0 -1
- package/dist/C_Form-Jx7PY3sT.css.map +0 -1
- package/dist/C_FormSearch-DvRgxlRn.css.map +0 -1
- package/dist/C_FormulaEditor-DtGkt4T_.css.map +0 -1
- package/dist/C_FullCalendar-BF7H0YIx.css.map +0 -1
- package/dist/C_ImageCropper-BVJfUufl.css.map +0 -1
- package/dist/C_Map-DpzeuWdX.css.map +0 -1
- package/dist/C_Markdown-BEjxknqd.css.map +0 -1
- package/dist/C_NotificationCenter-0l3TY2Gn.css.map +0 -1
- package/dist/C_QRCode-DbdiAIPg.css.map +0 -1
- package/dist/C_Signature-zhHCbra9.css.map +0 -1
- package/dist/C_SplitPane-C6sBsfKY.css.map +0 -1
- package/dist/C_Steps-CODHN5Hs.css.map +0 -1
- package/dist/C_Table-DSNsntmT.css.map +0 -1
- package/dist/C_Time-BvZLYraL.css.map +0 -1
- package/dist/C_Tree-0GDv--jX.css.map +0 -1
- package/dist/C_Upload-BXd3YYLx.css.map +0 -1
- package/dist/C_VideoPlayer-DYG3RL0Q.css.map +0 -1
- package/dist/C_VtableGantt-fhItIiHE.css.map +0 -1
- package/dist/C_WaterFall-8sQDFXKg.css.map +0 -1
- package/dist/C_WorkFlow-J-dyIuh9.css.map +0 -1
package/dist/C_Date2.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, ref, unref, watch } from "vue";
|
|
2
1
|
import { NDatePicker } from "naive-ui";
|
|
2
|
+
import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, ref, unref, watch } from "vue";
|
|
3
3
|
|
|
4
4
|
//#region src/components/C_Date/index.vue?vue&type=script&setup=true&lang.ts
|
|
5
5
|
const _hoisted_1 = { class: "inline-block" };
|
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":["<!--\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","<!--\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 */<!--\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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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"C_Draggable-Bq6o0qXn.css","names":[],"sources":["../src/components/C_Draggable/index.vue?vue&type=style&index=0&scoped=2c965573&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* ===== 容器布局样式 ===== */\n.c-draggable-wrapper[data-v-2c965573] {\n position: relative;\n width: 100%;\n}\n.c-draggable-list[data-v-2c965573] {\n min-height: 50px;\n width: 100%;\n display: flex;\n gap: var(--gap, 8px);\n /* 默认垂直布局 */\n /* 水平布局 */\n /* 弹性换行布局 */\n /* 网格布局 */\n}\n.c-draggable-list.layout-vertical[data-v-2c965573] {\n flex-direction: column;\n}\n.c-draggable-list.layout-horizontal[data-v-2c965573] {\n flex-direction: row;\n align-items: var(--align-items, stretch);\n justify-content: var(--justify-content, flex-start);\n}\n.c-draggable-list.layout-horizontal.flex-wrap[data-v-2c965573] {\n flex-wrap: wrap;\n}\n.c-draggable-list.layout-flex-wrap[data-v-2c965573] {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: var(--align-items, stretch);\n justify-content: var(--justify-content, flex-start);\n}\n.c-draggable-list.layout-grid[data-v-2c965573] {\n display: grid;\n grid-template-columns: repeat(var(--grid-columns, 4), 1fr);\n grid-template-rows: var(--grid-rows, auto);\n align-items: var(--align-items, stretch);\n justify-content: var(--justify-content, stretch);\n}\n.c-draggable-list.layout-grid > .c-draggable-item[data-v-2c965573] {\n width: 100%;\n box-sizing: border-box;\n}\n\n/* ===== 拖拽项目基础样式 ===== */\n.c-draggable-item[data-v-2c965573] {\n position: relative;\n}\n.c-draggable-item.is-disabled[data-v-2c965573] {\n opacity: 0.6;\n cursor: not-allowed;\n}\n.c-draggable-item.is-disabled[data-v-2c965573] * {\n cursor: not-allowed !important;\n}\n\n/* ===== 默认项目样式 ===== */\n.default-item[data-v-2c965573] {\n display: flex;\n align-items: center;\n padding: 16px;\n background: var(--n-card-color);\n border: 1px solid var(--n-border-color);\n border-radius: 8px;\n cursor: grab;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n position: relative;\n}\n.default-item[data-v-2c965573]:hover {\n border-color: var(--n-primary-color);\n box-shadow: 0 2px 8px var(--n-box-shadow-color);\n transform: translateY(-1px);\n}\n.default-item[data-v-2c965573]:active {\n cursor: grabbing;\n}\n.default-item .drag-handle[data-v-2c965573] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n margin-right: 12px;\n color: var(--n-text-color-disabled);\n cursor: grab;\n border-radius: 4px;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n flex-shrink: 0;\n}\n.default-item .drag-handle[data-v-2c965573]:hover {\n background: var(--n-action-color);\n color: var(--n-primary-color);\n}\n.default-item .drag-handle[data-v-2c965573]:active {\n cursor: grabbing;\n}\n.default-item .drag-handle div[data-v-2c965573] {\n font-size: 18px;\n}\n.default-item .item-content[data-v-2c965573] {\n flex: 1;\n min-width: 0;\n}\n.default-item .item-content .item-title[data-v-2c965573] {\n font-size: 16px;\n font-weight: 600;\n color: var(--n-text-color);\n line-height: 1.5;\n margin-bottom: 4px;\n word-break: break-word;\n}\n.default-item .item-content .item-description[data-v-2c965573] {\n font-size: 14px;\n color: var(--n-text-color-disabled);\n line-height: 1.4;\n word-break: break-word;\n}\n\n/* ===== 空状态样式 ===== */\n.empty-state[data-v-2c965573] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n text-align: center;\n border: 2px dashed var(--n-border-color);\n border-radius: 8px;\n}\n.empty-state .default-empty .empty-icon[data-v-2c965573] {\n font-size: 48px;\n color: var(--n-text-color-disabled);\n margin-bottom: 16px;\n}\n.empty-state .default-empty .empty-text[data-v-2c965573] {\n color: var(--n-text-color-disabled);\n font-size: 16px;\n margin: 0;\n}\n\n/* ===== 拖拽状态样式 ===== */\n.sortable-ghost {\n opacity: 0.5 !important;\n background: var(--n-primary-color-suppl) !important;\n border: 2px dashed var(--n-primary-color) !important;\n transform: scale(0.98) !important;\n}\n.sortable-chosen {\n outline: 2px solid var(--n-primary-color) !important;\n outline-offset: 2px !important;\n transform: scale(1.02) !important;\n z-index: 999 !important;\n}\n.sortable-drag {\n opacity: 0.9 !important;\n transform: rotate(2deg) scale(1.05) !important;\n z-index: 1000 !important;\n box-shadow: 0 8px 25px var(--n-box-shadow-color) !important;\n}\n\n/* ===== 网格布局特殊优化 ===== */\n.c-draggable-list.layout-grid .c-draggable-item[data-v-2c965573] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.c-draggable-list.layout-grid .c-draggable-item .default-item[data-v-2c965573] {\n flex: 1;\n height: 100%;\n min-height: 80px;\n}\n.c-draggable-list.layout-grid + .empty-state[data-v-2c965573] {\n grid-column: 1/-1;\n padding: 40px 20px;\n}\n.c-draggable-list.layout-grid + .empty-state .default-empty .empty-icon[data-v-2c965573] {\n font-size: 36px;\n}\n\n/* ===== 弹性布局特殊优化 ===== */\n.c-draggable-list.layout-horizontal .c-draggable-item[data-v-2c965573],\n.c-draggable-list.layout-flex-wrap .c-draggable-item[data-v-2c965573] {\n flex-shrink: 0;\n}\n.c-draggable-list.layout-horizontal .c-draggable-item[data-v-2c965573]:not(:last-child),\n.c-draggable-list.layout-flex-wrap .c-draggable-item[data-v-2c965573]:not(:last-child) {\n margin-right: 0;\n}\n.c-draggable-list.layout-horizontal .default-item[data-v-2c965573],\n.c-draggable-list.layout-flex-wrap .default-item[data-v-2c965573] {\n min-width: 200px;\n width: 100%;\n}\n\n/* ===== 响应式设计 ===== */\n@media (max-width: 768px) {\n.c-draggable-list.layout-grid[data-v-2c965573] {\n grid-template-columns: repeat(2, 1fr) !important;\n}\n.c-draggable-list.layout-horizontal[data-v-2c965573] {\n flex-wrap: wrap;\n}\n.default-item[data-v-2c965573] {\n padding: 12px;\n min-width: 150px !important;\n}\n.default-item .drag-handle[data-v-2c965573] {\n width: 20px;\n height: 20px;\n margin-right: 8px;\n}\n.default-item .drag-handle div[data-v-2c965573] {\n font-size: 16px;\n}\n.default-item .item-content .item-title[data-v-2c965573] {\n font-size: 15px;\n}\n.default-item .item-content .item-description[data-v-2c965573] {\n font-size: 13px;\n}\n.empty-state[data-v-2c965573] {\n padding: 40px 16px;\n}\n.empty-state .default-empty .empty-icon[data-v-2c965573] {\n font-size: 36px;\n}\n}\n@media (max-width: 480px) {\n.c-draggable-list.layout-grid[data-v-2c965573] {\n grid-template-columns: 1fr !important;\n}\n.default-item[data-v-2c965573] {\n min-width: 100% !important;\n padding: 10px;\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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_Draggable2.js
CHANGED
|
@@ -288,7 +288,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
|
|
|
288
288
|
|
|
289
289
|
//#endregion
|
|
290
290
|
//#region src/components/C_Draggable/index.vue
|
|
291
|
-
var C_Draggable_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-
|
|
291
|
+
var C_Draggable_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-2c965573"]]);
|
|
292
292
|
|
|
293
293
|
//#endregion
|
|
294
294
|
export { useDraggableLayout as n, C_Draggable_default as t };
|
package/dist/C_Draggable2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Draggable2.js","names":["wrapperClass","disabled","showHandle","showEmptyState","emptyText"],"sources":["../src/components/C_Draggable/composables/useDraggableLayout.ts","../src/components/C_Draggable/index.vue","../src/components/C_Draggable/index.vue","../src/components/C_Draggable/index.vue"],"sourcesContent":["import { ref, computed, nextTick } from \"vue\";\r\nimport type { DraggableItem, DragEvent, DraggableProps } from \"../types\";\r\n\r\ntype EmitFn = {\r\n (event: \"update:modelValue\", value: DraggableItem[]): void;\r\n (event: \"drag-start\", dragEvent: DragEvent): void;\r\n (event: \"drag-end\", dragEvent: DragEvent): void;\r\n (event: \"item-add\", item: DraggableItem, index: number): void;\r\n (event: \"item-remove\", item: DraggableItem, index: number): void;\r\n (event: \"list-change\", list: DraggableItem[]): void;\r\n};\r\n\r\nexport function useDraggableLayout(props: DraggableProps, emit: EmitFn) {\r\n const isDragging = ref(false);\r\n\r\n const internalList = computed({\r\n get: () => props.modelValue ?? [],\r\n set: (value: DraggableItem[]) => {\r\n emit(\"update:modelValue\", value);\r\n emit(\"list-change\", value);\r\n },\r\n });\r\n\r\n const isEmpty = computed(() => (props.modelValue ?? []).length === 0);\r\n\r\n const listClasses = computed(() => [\r\n \"c-draggable-list\",\r\n props.listClass,\r\n `layout-${props.layout}`,\r\n {\r\n \"flex-wrap\":\r\n props.flexWrap &&\r\n (props.layout === \"horizontal\" || props.layout === \"flex-wrap\"),\r\n },\r\n ]);\r\n\r\n const listStyles = computed(() => {\r\n const styles: Record<string, string | number> = {\r\n \"--gap\":\r\n typeof props.gap === \"number\" ? `${props.gap}px` : (props.gap ?? \"8px\"),\r\n \"--grid-columns\": props.gridColumns ?? 4,\r\n \"--justify-content\": props.justifyContent ?? \"flex-start\",\r\n \"--align-items\": props.alignItems ?? \"stretch\",\r\n ...props.customStyles,\r\n };\r\n if (props.gridRows) {\r\n styles[\"--grid-rows\"] = props.gridRows;\r\n }\r\n return styles;\r\n });\r\n\r\n const draggableOptions = computed(() => {\r\n const options: Record<string, any> = {\r\n disabled: props.disabled,\r\n group: props.group,\r\n sort: props.sort,\r\n animation: props.animation,\r\n delay: props.delay,\r\n ghostClass: props.ghostClass,\r\n chosenClass: props.chosenClass,\r\n dragClass: props.dragClass,\r\n swapThreshold: props.swapThreshold,\r\n invertSwap: props.invertSwap,\r\n direction: props.direction,\r\n forceFallback: false,\r\n };\r\n if (props.handle) {\r\n options.handle = props.handle;\r\n } else if (props.showHandle) {\r\n options.handle = \".drag-handle\";\r\n }\r\n return options;\r\n });\r\n\r\n const getItemKey = (item: DraggableItem, index: number): string | number =>\r\n props.itemKey ? props.itemKey(item, index) : (item.id ?? index);\r\n\r\n const getItemTitle = (item: DraggableItem): string => {\r\n if (props.itemTitle) return props.itemTitle(item);\r\n return (\r\n item.title || item.name || item.label || String(item.id) || \"未命名项目\"\r\n );\r\n };\r\n\r\n const getItemDescription = (item: DraggableItem): string => {\r\n if (props.itemDescription) return props.itemDescription(item);\r\n return item.description || \"\";\r\n };\r\n\r\n const getItemClass = (_index: number) => [\r\n \"c-draggable-item\",\r\n props.itemClass,\r\n { \"is-disabled\": props.disabled },\r\n ];\r\n\r\n const handleStart = (event: any) => {\r\n isDragging.value = true;\r\n const item = internalList.value[event.oldIndex];\r\n if (item) {\r\n emit(\"drag-start\", {\r\n oldIndex: event.oldIndex,\r\n newIndex: event.oldIndex,\r\n item,\r\n } as DragEvent);\r\n }\r\n };\r\n\r\n const handleEnd = (event: any) => {\r\n const item = internalList.value[event.newIndex];\r\n if (item) {\r\n emit(\"drag-end\", {\r\n oldIndex: event.oldIndex,\r\n newIndex: event.newIndex,\r\n item,\r\n } as DragEvent);\r\n }\r\n nextTick(() => {\r\n isDragging.value = false;\r\n });\r\n };\r\n\r\n const handleAdd = (event: any) => {\r\n const item = internalList.value[event.newIndex];\r\n if (item) emit(\"item-add\", item, event.newIndex);\r\n };\r\n\r\n const handleRemove = (event: any) => {\r\n if (event.item) emit(\"item-remove\", event.item, event.oldIndex);\r\n };\r\n\r\n const handleUpdate = (_event: any) => {};\r\n\r\n const addItem = (item: DraggableItem, index?: number): void => {\r\n const list = [...internalList.value];\r\n if (typeof index === \"number\" && index >= 0 && index <= list.length) {\r\n list.splice(index, 0, item);\r\n } else {\r\n list.push(item);\r\n }\r\n internalList.value = list;\r\n };\r\n\r\n const removeItem = (index: number): DraggableItem | null => {\r\n if (index >= 0 && index < internalList.value.length) {\r\n const list = [...internalList.value];\r\n const [removed] = list.splice(index, 1);\r\n internalList.value = list;\r\n return removed;\r\n }\r\n return null;\r\n };\r\n\r\n const moveItem = (fromIndex: number, toIndex: number): boolean => {\r\n const list = internalList.value;\r\n if (\r\n fromIndex >= 0 &&\r\n fromIndex < list.length &&\r\n toIndex >= 0 &&\r\n toIndex < list.length &&\r\n fromIndex !== toIndex\r\n ) {\r\n const newList = [...list];\r\n const [item] = newList.splice(fromIndex, 1);\r\n newList.splice(toIndex, 0, item);\r\n internalList.value = newList;\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n const updateList = (newList: DraggableItem[]): void => {\r\n internalList.value = [...newList];\r\n };\r\n\r\n const clear = (): void => {\r\n internalList.value = [];\r\n };\r\n\r\n const getItem = (index: number): DraggableItem | undefined =>\r\n internalList.value[index];\r\n\r\n const findIndex = (predicate: (item: DraggableItem) => boolean): number =>\r\n internalList.value.findIndex(predicate);\r\n\r\n return {\r\n isDragging,\r\n internalList,\r\n isEmpty,\r\n listClasses,\r\n listStyles,\r\n draggableOptions,\r\n getItemKey,\r\n getItemTitle,\r\n getItemDescription,\r\n getItemClass,\r\n handleStart,\r\n handleEnd,\r\n handleAdd,\r\n handleRemove,\r\n handleUpdate,\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n };\r\n}\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-25\r\n * @Description: 拖拽组件 - 基于 vue-draggable-plus 封装(薄 UI 壳 + useDraggableLayout 引擎)\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-draggable-wrapper\" :class=\"wrapperClass\">\r\n <VueDraggable\r\n v-model=\"internalList\"\r\n v-bind=\"draggableOptions\"\r\n :class=\"listClasses\"\r\n :style=\"listStyles\"\r\n @start=\"handleStart\"\r\n @end=\"handleEnd\"\r\n @add=\"handleAdd\"\r\n @remove=\"handleRemove\"\r\n @update=\"handleUpdate\"\r\n >\r\n <div\r\n v-for=\"(item, index) in internalList\"\r\n :key=\"getItemKey(item, index)\"\r\n :class=\"getItemClass(index)\"\r\n :data-index=\"index\"\r\n >\r\n <slot\r\n :item=\"item\"\r\n :index=\"index\"\r\n :is-dragging=\"isDragging\"\r\n :is-disabled=\"disabled\"\r\n >\r\n <div class=\"default-item\">\r\n <div v-if=\"showHandle\" class=\"drag-handle\">\r\n <div class=\"i-mdi:drag-vertical\"></div>\r\n </div>\r\n <div class=\"item-content\">\r\n <div class=\"item-title\">{{ getItemTitle(item) }}</div>\r\n <div v-if=\"getItemDescription(item)\" class=\"item-description\">\r\n {{ getItemDescription(item) }}\r\n </div>\r\n </div>\r\n </div>\r\n </slot>\r\n </div>\r\n </VueDraggable>\r\n\r\n <div v-if=\"isEmpty && showEmptyState\" class=\"empty-state\">\r\n <slot name=\"empty\">\r\n <div class=\"default-empty\">\r\n <div class=\"empty-icon i-mdi:inbox-outline\"></div>\r\n <p class=\"empty-text\">{{ emptyText }}</p>\r\n </div>\r\n </slot>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { readonly } from \"vue\";\r\nimport { VueDraggable } from \"vue-draggable-plus\";\r\nimport { useDraggableLayout } from \"./composables/useDraggableLayout\";\r\nimport type { DraggableProps, DraggableEmits } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Draggable\" });\r\n\r\nconst props = withDefaults(defineProps<DraggableProps>(), {\r\n modelValue: () => [],\r\n disabled: false,\r\n group: \"default\",\r\n sort: true,\r\n animation: 200,\r\n delay: 0,\r\n handle: \"\",\r\n showHandle: false,\r\n ghostClass: \"sortable-ghost\",\r\n chosenClass: \"sortable-chosen\",\r\n dragClass: \"sortable-drag\",\r\n wrapperClass: \"\",\r\n listClass: \"\",\r\n itemClass: \"\",\r\n showEmptyState: true,\r\n emptyText: \"暂无数据\",\r\n swapThreshold: 1,\r\n invertSwap: false,\r\n direction: \"vertical\",\r\n layout: \"vertical\",\r\n gridColumns: 4,\r\n gridRows: undefined,\r\n gap: \"8px\",\r\n flexWrap: false,\r\n justifyContent: \"flex-start\",\r\n alignItems: \"stretch\",\r\n customStyles: () => ({}),\r\n});\r\n\r\nconst emit = defineEmits<DraggableEmits>();\r\n\r\nconst {\r\n isDragging,\r\n internalList,\r\n isEmpty,\r\n listClasses,\r\n listStyles,\r\n draggableOptions,\r\n getItemKey,\r\n getItemTitle,\r\n getItemDescription,\r\n getItemClass,\r\n handleStart,\r\n handleEnd,\r\n handleAdd,\r\n handleRemove,\r\n handleUpdate,\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n} = useDraggableLayout(props, emit);\r\n\r\ndefineExpose({\r\n isDragging: readonly(isDragging),\r\n list: readonly(internalList),\r\n isEmpty: readonly(isEmpty),\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-25\r\n * @Description: 拖拽组件 - 基于 vue-draggable-plus 封装(薄 UI 壳 + useDraggableLayout 引擎)\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-draggable-wrapper\" :class=\"wrapperClass\">\r\n <VueDraggable\r\n v-model=\"internalList\"\r\n v-bind=\"draggableOptions\"\r\n :class=\"listClasses\"\r\n :style=\"listStyles\"\r\n @start=\"handleStart\"\r\n @end=\"handleEnd\"\r\n @add=\"handleAdd\"\r\n @remove=\"handleRemove\"\r\n @update=\"handleUpdate\"\r\n >\r\n <div\r\n v-for=\"(item, index) in internalList\"\r\n :key=\"getItemKey(item, index)\"\r\n :class=\"getItemClass(index)\"\r\n :data-index=\"index\"\r\n >\r\n <slot\r\n :item=\"item\"\r\n :index=\"index\"\r\n :is-dragging=\"isDragging\"\r\n :is-disabled=\"disabled\"\r\n >\r\n <div class=\"default-item\">\r\n <div v-if=\"showHandle\" class=\"drag-handle\">\r\n <div class=\"i-mdi:drag-vertical\"></div>\r\n </div>\r\n <div class=\"item-content\">\r\n <div class=\"item-title\">{{ getItemTitle(item) }}</div>\r\n <div v-if=\"getItemDescription(item)\" class=\"item-description\">\r\n {{ getItemDescription(item) }}\r\n </div>\r\n </div>\r\n </div>\r\n </slot>\r\n </div>\r\n </VueDraggable>\r\n\r\n <div v-if=\"isEmpty && showEmptyState\" class=\"empty-state\">\r\n <slot name=\"empty\">\r\n <div class=\"default-empty\">\r\n <div class=\"empty-icon i-mdi:inbox-outline\"></div>\r\n <p class=\"empty-text\">{{ emptyText }}</p>\r\n </div>\r\n </slot>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { readonly } from \"vue\";\r\nimport { VueDraggable } from \"vue-draggable-plus\";\r\nimport { useDraggableLayout } from \"./composables/useDraggableLayout\";\r\nimport type { DraggableProps, DraggableEmits } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Draggable\" });\r\n\r\nconst props = withDefaults(defineProps<DraggableProps>(), {\r\n modelValue: () => [],\r\n disabled: false,\r\n group: \"default\",\r\n sort: true,\r\n animation: 200,\r\n delay: 0,\r\n handle: \"\",\r\n showHandle: false,\r\n ghostClass: \"sortable-ghost\",\r\n chosenClass: \"sortable-chosen\",\r\n dragClass: \"sortable-drag\",\r\n wrapperClass: \"\",\r\n listClass: \"\",\r\n itemClass: \"\",\r\n showEmptyState: true,\r\n emptyText: \"暂无数据\",\r\n swapThreshold: 1,\r\n invertSwap: false,\r\n direction: \"vertical\",\r\n layout: \"vertical\",\r\n gridColumns: 4,\r\n gridRows: undefined,\r\n gap: \"8px\",\r\n flexWrap: false,\r\n justifyContent: \"flex-start\",\r\n alignItems: \"stretch\",\r\n customStyles: () => ({}),\r\n});\r\n\r\nconst emit = defineEmits<DraggableEmits>();\r\n\r\nconst {\r\n isDragging,\r\n internalList,\r\n isEmpty,\r\n listClasses,\r\n listStyles,\r\n draggableOptions,\r\n getItemKey,\r\n getItemTitle,\r\n getItemDescription,\r\n getItemClass,\r\n handleStart,\r\n handleEnd,\r\n handleAdd,\r\n handleRemove,\r\n handleUpdate,\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n} = useDraggableLayout(props, emit);\r\n\r\ndefineExpose({\r\n isDragging: readonly(isDragging),\r\n list: readonly(internalList),\r\n isEmpty: readonly(isEmpty),\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-25\r\n * @Description: 拖拽组件 - 基于 vue-draggable-plus 封装(薄 UI 壳 + useDraggableLayout 引擎)\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-draggable-wrapper\" :class=\"wrapperClass\">\r\n <VueDraggable\r\n v-model=\"internalList\"\r\n v-bind=\"draggableOptions\"\r\n :class=\"listClasses\"\r\n :style=\"listStyles\"\r\n @start=\"handleStart\"\r\n @end=\"handleEnd\"\r\n @add=\"handleAdd\"\r\n @remove=\"handleRemove\"\r\n @update=\"handleUpdate\"\r\n >\r\n <div\r\n v-for=\"(item, index) in internalList\"\r\n :key=\"getItemKey(item, index)\"\r\n :class=\"getItemClass(index)\"\r\n :data-index=\"index\"\r\n >\r\n <slot\r\n :item=\"item\"\r\n :index=\"index\"\r\n :is-dragging=\"isDragging\"\r\n :is-disabled=\"disabled\"\r\n >\r\n <div class=\"default-item\">\r\n <div v-if=\"showHandle\" class=\"drag-handle\">\r\n <div class=\"i-mdi:drag-vertical\"></div>\r\n </div>\r\n <div class=\"item-content\">\r\n <div class=\"item-title\">{{ getItemTitle(item) }}</div>\r\n <div v-if=\"getItemDescription(item)\" class=\"item-description\">\r\n {{ getItemDescription(item) }}\r\n </div>\r\n </div>\r\n </div>\r\n </slot>\r\n </div>\r\n </VueDraggable>\r\n\r\n <div v-if=\"isEmpty && showEmptyState\" class=\"empty-state\">\r\n <slot name=\"empty\">\r\n <div class=\"default-empty\">\r\n <div class=\"empty-icon i-mdi:inbox-outline\"></div>\r\n <p class=\"empty-text\">{{ emptyText }}</p>\r\n </div>\r\n </slot>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { readonly } from \"vue\";\r\nimport { VueDraggable } from \"vue-draggable-plus\";\r\nimport { useDraggableLayout } from \"./composables/useDraggableLayout\";\r\nimport type { DraggableProps, DraggableEmits } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Draggable\" });\r\n\r\nconst props = withDefaults(defineProps<DraggableProps>(), {\r\n modelValue: () => [],\r\n disabled: false,\r\n group: \"default\",\r\n sort: true,\r\n animation: 200,\r\n delay: 0,\r\n handle: \"\",\r\n showHandle: false,\r\n ghostClass: \"sortable-ghost\",\r\n chosenClass: \"sortable-chosen\",\r\n dragClass: \"sortable-drag\",\r\n wrapperClass: \"\",\r\n listClass: \"\",\r\n itemClass: \"\",\r\n showEmptyState: true,\r\n emptyText: \"暂无数据\",\r\n swapThreshold: 1,\r\n invertSwap: false,\r\n direction: \"vertical\",\r\n layout: \"vertical\",\r\n gridColumns: 4,\r\n gridRows: undefined,\r\n gap: \"8px\",\r\n flexWrap: false,\r\n justifyContent: \"flex-start\",\r\n alignItems: \"stretch\",\r\n customStyles: () => ({}),\r\n});\r\n\r\nconst emit = defineEmits<DraggableEmits>();\r\n\r\nconst {\r\n isDragging,\r\n internalList,\r\n isEmpty,\r\n listClasses,\r\n listStyles,\r\n draggableOptions,\r\n getItemKey,\r\n getItemTitle,\r\n getItemDescription,\r\n getItemClass,\r\n handleStart,\r\n handleEnd,\r\n handleAdd,\r\n handleRemove,\r\n handleUpdate,\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n} = useDraggableLayout(props, emit);\r\n\r\ndefineExpose({\r\n isDragging: readonly(isDragging),\r\n list: readonly(internalList),\r\n isEmpty: readonly(isEmpty),\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"C_Draggable2.js","names":["wrapperClass","disabled","showHandle","showEmptyState","emptyText"],"sources":["../src/components/C_Draggable/composables/useDraggableLayout.ts","../src/components/C_Draggable/index.vue","../src/components/C_Draggable/index.vue","../src/components/C_Draggable/index.vue"],"sourcesContent":["import { ref, computed, nextTick } from \"vue\";\r\nimport type { DraggableItem, DragEvent, DraggableProps } from \"../types\";\r\n\r\ntype EmitFn = {\r\n (event: \"update:modelValue\", value: DraggableItem[]): void;\r\n (event: \"drag-start\", dragEvent: DragEvent): void;\r\n (event: \"drag-end\", dragEvent: DragEvent): void;\r\n (event: \"item-add\", item: DraggableItem, index: number): void;\r\n (event: \"item-remove\", item: DraggableItem, index: number): void;\r\n (event: \"list-change\", list: DraggableItem[]): void;\r\n};\r\n\r\nexport function useDraggableLayout(props: DraggableProps, emit: EmitFn) {\r\n const isDragging = ref(false);\r\n\r\n const internalList = computed({\r\n get: () => props.modelValue ?? [],\r\n set: (value: DraggableItem[]) => {\r\n emit(\"update:modelValue\", value);\r\n emit(\"list-change\", value);\r\n },\r\n });\r\n\r\n const isEmpty = computed(() => (props.modelValue ?? []).length === 0);\r\n\r\n const listClasses = computed(() => [\r\n \"c-draggable-list\",\r\n props.listClass,\r\n `layout-${props.layout}`,\r\n {\r\n \"flex-wrap\":\r\n props.flexWrap &&\r\n (props.layout === \"horizontal\" || props.layout === \"flex-wrap\"),\r\n },\r\n ]);\r\n\r\n const listStyles = computed(() => {\r\n const styles: Record<string, string | number> = {\r\n \"--gap\":\r\n typeof props.gap === \"number\" ? `${props.gap}px` : (props.gap ?? \"8px\"),\r\n \"--grid-columns\": props.gridColumns ?? 4,\r\n \"--justify-content\": props.justifyContent ?? \"flex-start\",\r\n \"--align-items\": props.alignItems ?? \"stretch\",\r\n ...props.customStyles,\r\n };\r\n if (props.gridRows) {\r\n styles[\"--grid-rows\"] = props.gridRows;\r\n }\r\n return styles;\r\n });\r\n\r\n const draggableOptions = computed(() => {\r\n const options: Record<string, any> = {\r\n disabled: props.disabled,\r\n group: props.group,\r\n sort: props.sort,\r\n animation: props.animation,\r\n delay: props.delay,\r\n ghostClass: props.ghostClass,\r\n chosenClass: props.chosenClass,\r\n dragClass: props.dragClass,\r\n swapThreshold: props.swapThreshold,\r\n invertSwap: props.invertSwap,\r\n direction: props.direction,\r\n forceFallback: false,\r\n };\r\n if (props.handle) {\r\n options.handle = props.handle;\r\n } else if (props.showHandle) {\r\n options.handle = \".drag-handle\";\r\n }\r\n return options;\r\n });\r\n\r\n const getItemKey = (item: DraggableItem, index: number): string | number =>\r\n props.itemKey ? props.itemKey(item, index) : (item.id ?? index);\r\n\r\n const getItemTitle = (item: DraggableItem): string => {\r\n if (props.itemTitle) return props.itemTitle(item);\r\n return (\r\n item.title || item.name || item.label || String(item.id) || \"未命名项目\"\r\n );\r\n };\r\n\r\n const getItemDescription = (item: DraggableItem): string => {\r\n if (props.itemDescription) return props.itemDescription(item);\r\n return item.description || \"\";\r\n };\r\n\r\n const getItemClass = (_index: number) => [\r\n \"c-draggable-item\",\r\n props.itemClass,\r\n { \"is-disabled\": props.disabled },\r\n ];\r\n\r\n const handleStart = (event: any) => {\r\n isDragging.value = true;\r\n const item = internalList.value[event.oldIndex];\r\n if (item) {\r\n emit(\"drag-start\", {\r\n oldIndex: event.oldIndex,\r\n newIndex: event.oldIndex,\r\n item,\r\n } as DragEvent);\r\n }\r\n };\r\n\r\n const handleEnd = (event: any) => {\r\n const item = internalList.value[event.newIndex];\r\n if (item) {\r\n emit(\"drag-end\", {\r\n oldIndex: event.oldIndex,\r\n newIndex: event.newIndex,\r\n item,\r\n } as DragEvent);\r\n }\r\n nextTick(() => {\r\n isDragging.value = false;\r\n });\r\n };\r\n\r\n const handleAdd = (event: any) => {\r\n const item = internalList.value[event.newIndex];\r\n if (item) emit(\"item-add\", item, event.newIndex);\r\n };\r\n\r\n const handleRemove = (event: any) => {\r\n if (event.item) emit(\"item-remove\", event.item, event.oldIndex);\r\n };\r\n\r\n const handleUpdate = (_event: any) => {};\r\n\r\n const addItem = (item: DraggableItem, index?: number): void => {\r\n const list = [...internalList.value];\r\n if (typeof index === \"number\" && index >= 0 && index <= list.length) {\r\n list.splice(index, 0, item);\r\n } else {\r\n list.push(item);\r\n }\r\n internalList.value = list;\r\n };\r\n\r\n const removeItem = (index: number): DraggableItem | null => {\r\n if (index >= 0 && index < internalList.value.length) {\r\n const list = [...internalList.value];\r\n const [removed] = list.splice(index, 1);\r\n internalList.value = list;\r\n return removed;\r\n }\r\n return null;\r\n };\r\n\r\n const moveItem = (fromIndex: number, toIndex: number): boolean => {\r\n const list = internalList.value;\r\n if (\r\n fromIndex >= 0 &&\r\n fromIndex < list.length &&\r\n toIndex >= 0 &&\r\n toIndex < list.length &&\r\n fromIndex !== toIndex\r\n ) {\r\n const newList = [...list];\r\n const [item] = newList.splice(fromIndex, 1);\r\n newList.splice(toIndex, 0, item);\r\n internalList.value = newList;\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n const updateList = (newList: DraggableItem[]): void => {\r\n internalList.value = [...newList];\r\n };\r\n\r\n const clear = (): void => {\r\n internalList.value = [];\r\n };\r\n\r\n const getItem = (index: number): DraggableItem | undefined =>\r\n internalList.value[index];\r\n\r\n const findIndex = (predicate: (item: DraggableItem) => boolean): number =>\r\n internalList.value.findIndex(predicate);\r\n\r\n return {\r\n isDragging,\r\n internalList,\r\n isEmpty,\r\n listClasses,\r\n listStyles,\r\n draggableOptions,\r\n getItemKey,\r\n getItemTitle,\r\n getItemDescription,\r\n getItemClass,\r\n handleStart,\r\n handleEnd,\r\n handleAdd,\r\n handleRemove,\r\n handleUpdate,\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n };\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-25\r\n * @Description: 拖拽组件 - 基于 vue-draggable-plus 封装(薄 UI 壳 + useDraggableLayout 引擎)\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-draggable-wrapper\" :class=\"wrapperClass\">\r\n <VueDraggable\r\n v-model=\"internalList\"\r\n v-bind=\"draggableOptions\"\r\n :class=\"listClasses\"\r\n :style=\"listStyles\"\r\n @start=\"handleStart\"\r\n @end=\"handleEnd\"\r\n @add=\"handleAdd\"\r\n @remove=\"handleRemove\"\r\n @update=\"handleUpdate\"\r\n >\r\n <div\r\n v-for=\"(item, index) in internalList\"\r\n :key=\"getItemKey(item, index)\"\r\n :class=\"getItemClass(index)\"\r\n :data-index=\"index\"\r\n >\r\n <slot\r\n :item=\"item\"\r\n :index=\"index\"\r\n :is-dragging=\"isDragging\"\r\n :is-disabled=\"disabled\"\r\n >\r\n <div class=\"default-item\">\r\n <div v-if=\"showHandle\" class=\"drag-handle\">\r\n <div class=\"i-mdi:drag-vertical\"></div>\r\n </div>\r\n <div class=\"item-content\">\r\n <div class=\"item-title\">{{ getItemTitle(item) }}</div>\r\n <div v-if=\"getItemDescription(item)\" class=\"item-description\">\r\n {{ getItemDescription(item) }}\r\n </div>\r\n </div>\r\n </div>\r\n </slot>\r\n </div>\r\n </VueDraggable>\r\n\r\n <div v-if=\"isEmpty && showEmptyState\" class=\"empty-state\">\r\n <slot name=\"empty\">\r\n <div class=\"default-empty\">\r\n <div class=\"empty-icon i-mdi:inbox-outline\"></div>\r\n <p class=\"empty-text\">{{ emptyText }}</p>\r\n </div>\r\n </slot>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { readonly } from \"vue\";\r\nimport { VueDraggable } from \"vue-draggable-plus\";\r\nimport { useDraggableLayout } from \"./composables/useDraggableLayout\";\r\nimport type { DraggableProps, DraggableEmits } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Draggable\" });\r\n\r\nconst props = withDefaults(defineProps<DraggableProps>(), {\r\n modelValue: () => [],\r\n disabled: false,\r\n group: \"default\",\r\n sort: true,\r\n animation: 200,\r\n delay: 0,\r\n handle: \"\",\r\n showHandle: false,\r\n ghostClass: \"sortable-ghost\",\r\n chosenClass: \"sortable-chosen\",\r\n dragClass: \"sortable-drag\",\r\n wrapperClass: \"\",\r\n listClass: \"\",\r\n itemClass: \"\",\r\n showEmptyState: true,\r\n emptyText: \"暂无数据\",\r\n swapThreshold: 1,\r\n invertSwap: false,\r\n direction: \"vertical\",\r\n layout: \"vertical\",\r\n gridColumns: 4,\r\n gridRows: undefined,\r\n gap: \"8px\",\r\n flexWrap: false,\r\n justifyContent: \"flex-start\",\r\n alignItems: \"stretch\",\r\n customStyles: () => ({}),\r\n});\r\n\r\nconst emit = defineEmits<DraggableEmits>();\r\n\r\nconst {\r\n isDragging,\r\n internalList,\r\n isEmpty,\r\n listClasses,\r\n listStyles,\r\n draggableOptions,\r\n getItemKey,\r\n getItemTitle,\r\n getItemDescription,\r\n getItemClass,\r\n handleStart,\r\n handleEnd,\r\n handleAdd,\r\n handleRemove,\r\n handleUpdate,\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n} = useDraggableLayout(props, emit);\r\n\r\ndefineExpose({\r\n isDragging: readonly(isDragging),\r\n list: readonly(internalList),\r\n isEmpty: readonly(isEmpty),\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\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-25\r\n * @Description: 拖拽组件 - 基于 vue-draggable-plus 封装(薄 UI 壳 + useDraggableLayout 引擎)\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-draggable-wrapper\" :class=\"wrapperClass\">\r\n <VueDraggable\r\n v-model=\"internalList\"\r\n v-bind=\"draggableOptions\"\r\n :class=\"listClasses\"\r\n :style=\"listStyles\"\r\n @start=\"handleStart\"\r\n @end=\"handleEnd\"\r\n @add=\"handleAdd\"\r\n @remove=\"handleRemove\"\r\n @update=\"handleUpdate\"\r\n >\r\n <div\r\n v-for=\"(item, index) in internalList\"\r\n :key=\"getItemKey(item, index)\"\r\n :class=\"getItemClass(index)\"\r\n :data-index=\"index\"\r\n >\r\n <slot\r\n :item=\"item\"\r\n :index=\"index\"\r\n :is-dragging=\"isDragging\"\r\n :is-disabled=\"disabled\"\r\n >\r\n <div class=\"default-item\">\r\n <div v-if=\"showHandle\" class=\"drag-handle\">\r\n <div class=\"i-mdi:drag-vertical\"></div>\r\n </div>\r\n <div class=\"item-content\">\r\n <div class=\"item-title\">{{ getItemTitle(item) }}</div>\r\n <div v-if=\"getItemDescription(item)\" class=\"item-description\">\r\n {{ getItemDescription(item) }}\r\n </div>\r\n </div>\r\n </div>\r\n </slot>\r\n </div>\r\n </VueDraggable>\r\n\r\n <div v-if=\"isEmpty && showEmptyState\" class=\"empty-state\">\r\n <slot name=\"empty\">\r\n <div class=\"default-empty\">\r\n <div class=\"empty-icon i-mdi:inbox-outline\"></div>\r\n <p class=\"empty-text\">{{ emptyText }}</p>\r\n </div>\r\n </slot>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { readonly } from \"vue\";\r\nimport { VueDraggable } from \"vue-draggable-plus\";\r\nimport { useDraggableLayout } from \"./composables/useDraggableLayout\";\r\nimport type { DraggableProps, DraggableEmits } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Draggable\" });\r\n\r\nconst props = withDefaults(defineProps<DraggableProps>(), {\r\n modelValue: () => [],\r\n disabled: false,\r\n group: \"default\",\r\n sort: true,\r\n animation: 200,\r\n delay: 0,\r\n handle: \"\",\r\n showHandle: false,\r\n ghostClass: \"sortable-ghost\",\r\n chosenClass: \"sortable-chosen\",\r\n dragClass: \"sortable-drag\",\r\n wrapperClass: \"\",\r\n listClass: \"\",\r\n itemClass: \"\",\r\n showEmptyState: true,\r\n emptyText: \"暂无数据\",\r\n swapThreshold: 1,\r\n invertSwap: false,\r\n direction: \"vertical\",\r\n layout: \"vertical\",\r\n gridColumns: 4,\r\n gridRows: undefined,\r\n gap: \"8px\",\r\n flexWrap: false,\r\n justifyContent: \"flex-start\",\r\n alignItems: \"stretch\",\r\n customStyles: () => ({}),\r\n});\r\n\r\nconst emit = defineEmits<DraggableEmits>();\r\n\r\nconst {\r\n isDragging,\r\n internalList,\r\n isEmpty,\r\n listClasses,\r\n listStyles,\r\n draggableOptions,\r\n getItemKey,\r\n getItemTitle,\r\n getItemDescription,\r\n getItemClass,\r\n handleStart,\r\n handleEnd,\r\n handleAdd,\r\n handleRemove,\r\n handleUpdate,\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n} = useDraggableLayout(props, emit);\r\n\r\ndefineExpose({\r\n isDragging: readonly(isDragging),\r\n list: readonly(internalList),\r\n isEmpty: readonly(isEmpty),\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-25\r\n * @Description: 拖拽组件 - 基于 vue-draggable-plus 封装(薄 UI 壳 + useDraggableLayout 引擎)\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-draggable-wrapper\" :class=\"wrapperClass\">\r\n <VueDraggable\r\n v-model=\"internalList\"\r\n v-bind=\"draggableOptions\"\r\n :class=\"listClasses\"\r\n :style=\"listStyles\"\r\n @start=\"handleStart\"\r\n @end=\"handleEnd\"\r\n @add=\"handleAdd\"\r\n @remove=\"handleRemove\"\r\n @update=\"handleUpdate\"\r\n >\r\n <div\r\n v-for=\"(item, index) in internalList\"\r\n :key=\"getItemKey(item, index)\"\r\n :class=\"getItemClass(index)\"\r\n :data-index=\"index\"\r\n >\r\n <slot\r\n :item=\"item\"\r\n :index=\"index\"\r\n :is-dragging=\"isDragging\"\r\n :is-disabled=\"disabled\"\r\n >\r\n <div class=\"default-item\">\r\n <div v-if=\"showHandle\" class=\"drag-handle\">\r\n <div class=\"i-mdi:drag-vertical\"></div>\r\n </div>\r\n <div class=\"item-content\">\r\n <div class=\"item-title\">{{ getItemTitle(item) }}</div>\r\n <div v-if=\"getItemDescription(item)\" class=\"item-description\">\r\n {{ getItemDescription(item) }}\r\n </div>\r\n </div>\r\n </div>\r\n </slot>\r\n </div>\r\n </VueDraggable>\r\n\r\n <div v-if=\"isEmpty && showEmptyState\" class=\"empty-state\">\r\n <slot name=\"empty\">\r\n <div class=\"default-empty\">\r\n <div class=\"empty-icon i-mdi:inbox-outline\"></div>\r\n <p class=\"empty-text\">{{ emptyText }}</p>\r\n </div>\r\n </slot>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { readonly } from \"vue\";\r\nimport { VueDraggable } from \"vue-draggable-plus\";\r\nimport { useDraggableLayout } from \"./composables/useDraggableLayout\";\r\nimport type { DraggableProps, DraggableEmits } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Draggable\" });\r\n\r\nconst props = withDefaults(defineProps<DraggableProps>(), {\r\n modelValue: () => [],\r\n disabled: false,\r\n group: \"default\",\r\n sort: true,\r\n animation: 200,\r\n delay: 0,\r\n handle: \"\",\r\n showHandle: false,\r\n ghostClass: \"sortable-ghost\",\r\n chosenClass: \"sortable-chosen\",\r\n dragClass: \"sortable-drag\",\r\n wrapperClass: \"\",\r\n listClass: \"\",\r\n itemClass: \"\",\r\n showEmptyState: true,\r\n emptyText: \"暂无数据\",\r\n swapThreshold: 1,\r\n invertSwap: false,\r\n direction: \"vertical\",\r\n layout: \"vertical\",\r\n gridColumns: 4,\r\n gridRows: undefined,\r\n gap: \"8px\",\r\n flexWrap: false,\r\n justifyContent: \"flex-start\",\r\n alignItems: \"stretch\",\r\n customStyles: () => ({}),\r\n});\r\n\r\nconst emit = defineEmits<DraggableEmits>();\r\n\r\nconst {\r\n isDragging,\r\n internalList,\r\n isEmpty,\r\n listClasses,\r\n listStyles,\r\n draggableOptions,\r\n getItemKey,\r\n getItemTitle,\r\n getItemDescription,\r\n getItemClass,\r\n handleStart,\r\n handleEnd,\r\n handleAdd,\r\n handleRemove,\r\n handleUpdate,\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n} = useDraggableLayout(props, emit);\r\n\r\ndefineExpose({\r\n isDragging: readonly(isDragging),\r\n list: readonly(internalList),\r\n isEmpty: readonly(isEmpty),\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"C_Editor-OlxIF9-5.css","names":[],"sources":["../src/components/C_Editor/index.vue?vue&type=style&index=0&scoped=e2dec5c9&lang.css"],"sourcesContent":["/* unplugin-vue-components disabled */\r\n/* 暗色主题样式 */\n.editor-dark[data-v-e2dec5c9] .w-e-toolbar {\r\n background-color: #1f2937 !important;\r\n border-color: #374151 !important;\n}\n.editor-dark[data-v-e2dec5c9] .w-e-toolbar .w-e-menu .w-e-menu-item {\r\n color: #e5e7eb !important;\n}\n.editor-dark[data-v-e2dec5c9] .w-e-toolbar .w-e-menu .w-e-menu-item:hover {\r\n background-color: #374151 !important;\r\n color: #ffffff !important;\n}\n.editor-dark[data-v-e2dec5c9] .w-e-toolbar .w-e-menu .w-e-menu-item.w-e-active {\r\n background-color: #2080f0 !important;\r\n color: #ffffff !important;\n}\n.editor-dark[data-v-e2dec5c9] .w-e-text-container {\r\n background-color: #111827 !important;\r\n border-color: #374151 !important;\n}\n.editor-dark[data-v-e2dec5c9] .w-e-text-container .w-e-text {\r\n background-color: #303033 !important;\r\n color: #e5e7eb !important;\n}\n.editor-dark[data-v-e2dec5c9] .w-e-text-container .w-e-text:focus {\r\n background-color: #111827 !important;\r\n color: #e5e7eb !important;\n}\n[data-v-e2dec5c9] .w-e-toolbar,[data-v-e2dec5c9] .w-e-text-container {\r\n max-width: 100% !important;\r\n overflow-x: auto !important;\r\n box-sizing: border-box !important;\n}\n[data-v-e2dec5c9] .w-e-text {\r\n max-width: 100% !important;\r\n word-wrap: break-word !important;\r\n overflow-wrap: break-word !important;\n}\n[data-v-e2dec5c9] .w-e-toolbar,[data-v-e2dec5c9] .w-e-text-container,[data-v-e2dec5c9] .w-e-text {\r\n transition:\r\n background-color 0.3s ease,\r\n border-color 0.3s ease,\r\n color 0.3s ease !important;\n}\n.editor-focused[data-v-e2dec5c9] {\r\n overflow: hidden !important;\r\n max-width: 100% !important;\n}\r\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"}
|
package/dist/C_Editor2.js
CHANGED
|
@@ -153,7 +153,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
|
|
|
153
153
|
|
|
154
154
|
//#endregion
|
|
155
155
|
//#region src/components/C_Editor/index.vue
|
|
156
|
-
var C_Editor_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-
|
|
156
|
+
var C_Editor_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-e2dec5c9"]]);
|
|
157
157
|
|
|
158
158
|
//#endregion
|
|
159
159
|
export { C_Editor_default as t };
|
package/dist/C_Editor2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Editor2.js","names":["editorId"],"sources":["../src/components/C_Editor/index.vue","../src/components/C_Editor/index.vue","../src/components/C_Editor/index.vue"],"sourcesContent":["<!--\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 ref=\"editorContainer\"\r\n :id=\"editorId\"\r\n v-show=\"isInitialized\"\r\n class=\"w-full\"\r\n :class=\"{ 'editor-dark': isDark }\"\r\n @focusin=\"handleEditorFocus\"\r\n @focusout=\"handleEditorBlur\"\r\n ></div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport {\r\n ref,\r\n computed,\r\n watch,\r\n nextTick,\r\n onMounted,\r\n onBeforeUnmount,\r\n readonly,\r\n} from \"vue\";\r\nimport E from \"wangeditor\";\r\n\r\ndefineOptions({ name: \"C_Editor\" });\r\n\r\ninterface Props {\r\n editorId: string;\r\n modelValue?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n height?: number;\r\n theme?: \"light\" | \"dark\";\r\n}\r\n\r\ninterface Emits {\r\n (e: \"update:modelValue\", value: string): void;\r\n (e: \"editor-mounted\", editor: any): void;\r\n (e: \"editor-change\", html: string): void;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n modelValue: \"\",\r\n placeholder: \"\",\r\n disabled: false,\r\n readonly: false,\r\n height: 240,\r\n theme: \"light\",\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst editorContainer = ref<HTMLElement | null>(null);\r\nconst editorInstance = ref<any>(null);\r\nconst isInitialized = ref<boolean>(false);\r\n\r\nconst isDark = computed(() => props.theme === \"dark\");\r\n\r\nconst initializeEditor = (): void => {\r\n if (!editorContainer.value || isInitialized.value) return;\r\n\r\n try {\r\n const editor = new E(editorContainer.value);\r\n const editorConfig = editor.config as any;\r\n editorConfig.placeholder = props.placeholder;\r\n editorConfig.height = props.height - 50;\r\n\r\n editorConfig.onchange = (html: string) => {\r\n emit(\"update:modelValue\", html);\r\n emit(\"editor-change\", html);\r\n };\r\n\r\n editor.create();\r\n\r\n nextTick(() => {\r\n if (props.modelValue) {\r\n editor.txt.html(props.modelValue);\r\n }\r\n if (props.readonly) {\r\n editor.disable();\r\n }\r\n editorInstance.value = editor;\r\n isInitialized.value = true;\r\n emit(\"editor-mounted\", editor);\r\n });\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器初始化失败: ${props.editorId}`, error);\r\n }\r\n};\r\n\r\nconst destroyEditor = (): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.destroy();\r\n editorInstance.value = null;\r\n isInitialized.value = false;\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器销毁失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst setContent = (html: string): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.txt.html(html);\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器内容失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst getContent = (): string => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n return editorInstance.value.txt.html();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 获取编辑器内容失败: ${props.editorId}`, error);\r\n return \"\";\r\n }\r\n }\r\n return \"\";\r\n};\r\n\r\nwatch(\r\n () => props.modelValue,\r\n (newValue) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n const currentContent = editorInstance.value.txt.html();\r\n if (currentContent !== newValue) {\r\n editorInstance.value.txt.html(newValue || \"\");\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.disabled,\r\n (disabled) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (disabled) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.readonly,\r\n (readonlyVal) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (readonlyVal) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器只读状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nconst handleEditorFocus = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.add(\"editor-focused\");\r\n const containerWidth = container.scrollWidth;\r\n container.style.maxWidth = `${containerWidth}px`;\r\n }\r\n};\r\n\r\nconst handleEditorBlur = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.remove(\"editor-focused\");\r\n container.style.maxWidth = \"\";\r\n }\r\n};\r\n\r\nonMounted(() => {\r\n nextTick(() => {\r\n initializeEditor();\r\n });\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n destroyEditor();\r\n});\r\n\r\ndefineExpose({\r\n initializeEditor,\r\n destroyEditor,\r\n setContent,\r\n getContent,\r\n handleEditorFocus,\r\n handleEditorBlur,\r\n editorInstance: readonly(editorInstance),\r\n isInitialized: readonly(isInitialized),\r\n});\r\n</script>\r\n\r\n<style scoped>\r\n/* 暗色主题样式 */\r\n.editor-dark :deep(.w-e-toolbar) {\r\n background-color: #1f2937 !important;\r\n border-color: #374151 !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item) {\r\n color: #e5e7eb !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item:hover) {\r\n background-color: #374151 !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item.w-e-active) {\r\n background-color: #2080f0 !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container) {\r\n background-color: #111827 !important;\r\n border-color: #374151 !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text) {\r\n background-color: #303033 !important;\r\n color: #e5e7eb !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text:focus) {\r\n background-color: #111827 !important;\r\n color: #e5e7eb !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container) {\r\n max-width: 100% !important;\r\n overflow-x: auto !important;\r\n box-sizing: border-box !important;\r\n}\r\n\r\n:deep(.w-e-text) {\r\n max-width: 100% !important;\r\n word-wrap: break-word !important;\r\n overflow-wrap: break-word !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container),\r\n:deep(.w-e-text) {\r\n transition:\r\n background-color 0.3s ease,\r\n border-color 0.3s ease,\r\n color 0.3s ease !important;\r\n}\r\n\r\n.editor-focused {\r\n overflow: hidden !important;\r\n max-width: 100% !important;\r\n}\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 ref=\"editorContainer\"\r\n :id=\"editorId\"\r\n v-show=\"isInitialized\"\r\n class=\"w-full\"\r\n :class=\"{ 'editor-dark': isDark }\"\r\n @focusin=\"handleEditorFocus\"\r\n @focusout=\"handleEditorBlur\"\r\n ></div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport {\r\n ref,\r\n computed,\r\n watch,\r\n nextTick,\r\n onMounted,\r\n onBeforeUnmount,\r\n readonly,\r\n} from \"vue\";\r\nimport E from \"wangeditor\";\r\n\r\ndefineOptions({ name: \"C_Editor\" });\r\n\r\ninterface Props {\r\n editorId: string;\r\n modelValue?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n height?: number;\r\n theme?: \"light\" | \"dark\";\r\n}\r\n\r\ninterface Emits {\r\n (e: \"update:modelValue\", value: string): void;\r\n (e: \"editor-mounted\", editor: any): void;\r\n (e: \"editor-change\", html: string): void;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n modelValue: \"\",\r\n placeholder: \"\",\r\n disabled: false,\r\n readonly: false,\r\n height: 240,\r\n theme: \"light\",\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst editorContainer = ref<HTMLElement | null>(null);\r\nconst editorInstance = ref<any>(null);\r\nconst isInitialized = ref<boolean>(false);\r\n\r\nconst isDark = computed(() => props.theme === \"dark\");\r\n\r\nconst initializeEditor = (): void => {\r\n if (!editorContainer.value || isInitialized.value) return;\r\n\r\n try {\r\n const editor = new E(editorContainer.value);\r\n const editorConfig = editor.config as any;\r\n editorConfig.placeholder = props.placeholder;\r\n editorConfig.height = props.height - 50;\r\n\r\n editorConfig.onchange = (html: string) => {\r\n emit(\"update:modelValue\", html);\r\n emit(\"editor-change\", html);\r\n };\r\n\r\n editor.create();\r\n\r\n nextTick(() => {\r\n if (props.modelValue) {\r\n editor.txt.html(props.modelValue);\r\n }\r\n if (props.readonly) {\r\n editor.disable();\r\n }\r\n editorInstance.value = editor;\r\n isInitialized.value = true;\r\n emit(\"editor-mounted\", editor);\r\n });\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器初始化失败: ${props.editorId}`, error);\r\n }\r\n};\r\n\r\nconst destroyEditor = (): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.destroy();\r\n editorInstance.value = null;\r\n isInitialized.value = false;\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器销毁失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst setContent = (html: string): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.txt.html(html);\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器内容失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst getContent = (): string => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n return editorInstance.value.txt.html();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 获取编辑器内容失败: ${props.editorId}`, error);\r\n return \"\";\r\n }\r\n }\r\n return \"\";\r\n};\r\n\r\nwatch(\r\n () => props.modelValue,\r\n (newValue) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n const currentContent = editorInstance.value.txt.html();\r\n if (currentContent !== newValue) {\r\n editorInstance.value.txt.html(newValue || \"\");\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.disabled,\r\n (disabled) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (disabled) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.readonly,\r\n (readonlyVal) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (readonlyVal) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器只读状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nconst handleEditorFocus = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.add(\"editor-focused\");\r\n const containerWidth = container.scrollWidth;\r\n container.style.maxWidth = `${containerWidth}px`;\r\n }\r\n};\r\n\r\nconst handleEditorBlur = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.remove(\"editor-focused\");\r\n container.style.maxWidth = \"\";\r\n }\r\n};\r\n\r\nonMounted(() => {\r\n nextTick(() => {\r\n initializeEditor();\r\n });\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n destroyEditor();\r\n});\r\n\r\ndefineExpose({\r\n initializeEditor,\r\n destroyEditor,\r\n setContent,\r\n getContent,\r\n handleEditorFocus,\r\n handleEditorBlur,\r\n editorInstance: readonly(editorInstance),\r\n isInitialized: readonly(isInitialized),\r\n});\r\n</script>\r\n\r\n<style scoped>\r\n/* 暗色主题样式 */\r\n.editor-dark :deep(.w-e-toolbar) {\r\n background-color: #1f2937 !important;\r\n border-color: #374151 !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item) {\r\n color: #e5e7eb !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item:hover) {\r\n background-color: #374151 !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item.w-e-active) {\r\n background-color: #2080f0 !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container) {\r\n background-color: #111827 !important;\r\n border-color: #374151 !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text) {\r\n background-color: #303033 !important;\r\n color: #e5e7eb !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text:focus) {\r\n background-color: #111827 !important;\r\n color: #e5e7eb !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container) {\r\n max-width: 100% !important;\r\n overflow-x: auto !important;\r\n box-sizing: border-box !important;\r\n}\r\n\r\n:deep(.w-e-text) {\r\n max-width: 100% !important;\r\n word-wrap: break-word !important;\r\n overflow-wrap: break-word !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container),\r\n:deep(.w-e-text) {\r\n transition:\r\n background-color 0.3s ease,\r\n border-color 0.3s ease,\r\n color 0.3s ease !important;\r\n}\r\n\r\n.editor-focused {\r\n overflow: hidden !important;\r\n max-width: 100% !important;\r\n}\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 ref=\"editorContainer\"\r\n :id=\"editorId\"\r\n v-show=\"isInitialized\"\r\n class=\"w-full\"\r\n :class=\"{ 'editor-dark': isDark }\"\r\n @focusin=\"handleEditorFocus\"\r\n @focusout=\"handleEditorBlur\"\r\n ></div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport {\r\n ref,\r\n computed,\r\n watch,\r\n nextTick,\r\n onMounted,\r\n onBeforeUnmount,\r\n readonly,\r\n} from \"vue\";\r\nimport E from \"wangeditor\";\r\n\r\ndefineOptions({ name: \"C_Editor\" });\r\n\r\ninterface Props {\r\n editorId: string;\r\n modelValue?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n height?: number;\r\n theme?: \"light\" | \"dark\";\r\n}\r\n\r\ninterface Emits {\r\n (e: \"update:modelValue\", value: string): void;\r\n (e: \"editor-mounted\", editor: any): void;\r\n (e: \"editor-change\", html: string): void;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n modelValue: \"\",\r\n placeholder: \"\",\r\n disabled: false,\r\n readonly: false,\r\n height: 240,\r\n theme: \"light\",\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst editorContainer = ref<HTMLElement | null>(null);\r\nconst editorInstance = ref<any>(null);\r\nconst isInitialized = ref<boolean>(false);\r\n\r\nconst isDark = computed(() => props.theme === \"dark\");\r\n\r\nconst initializeEditor = (): void => {\r\n if (!editorContainer.value || isInitialized.value) return;\r\n\r\n try {\r\n const editor = new E(editorContainer.value);\r\n const editorConfig = editor.config as any;\r\n editorConfig.placeholder = props.placeholder;\r\n editorConfig.height = props.height - 50;\r\n\r\n editorConfig.onchange = (html: string) => {\r\n emit(\"update:modelValue\", html);\r\n emit(\"editor-change\", html);\r\n };\r\n\r\n editor.create();\r\n\r\n nextTick(() => {\r\n if (props.modelValue) {\r\n editor.txt.html(props.modelValue);\r\n }\r\n if (props.readonly) {\r\n editor.disable();\r\n }\r\n editorInstance.value = editor;\r\n isInitialized.value = true;\r\n emit(\"editor-mounted\", editor);\r\n });\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器初始化失败: ${props.editorId}`, error);\r\n }\r\n};\r\n\r\nconst destroyEditor = (): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.destroy();\r\n editorInstance.value = null;\r\n isInitialized.value = false;\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器销毁失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst setContent = (html: string): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.txt.html(html);\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器内容失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst getContent = (): string => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n return editorInstance.value.txt.html();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 获取编辑器内容失败: ${props.editorId}`, error);\r\n return \"\";\r\n }\r\n }\r\n return \"\";\r\n};\r\n\r\nwatch(\r\n () => props.modelValue,\r\n (newValue) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n const currentContent = editorInstance.value.txt.html();\r\n if (currentContent !== newValue) {\r\n editorInstance.value.txt.html(newValue || \"\");\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.disabled,\r\n (disabled) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (disabled) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.readonly,\r\n (readonlyVal) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (readonlyVal) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器只读状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nconst handleEditorFocus = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.add(\"editor-focused\");\r\n const containerWidth = container.scrollWidth;\r\n container.style.maxWidth = `${containerWidth}px`;\r\n }\r\n};\r\n\r\nconst handleEditorBlur = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.remove(\"editor-focused\");\r\n container.style.maxWidth = \"\";\r\n }\r\n};\r\n\r\nonMounted(() => {\r\n nextTick(() => {\r\n initializeEditor();\r\n });\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n destroyEditor();\r\n});\r\n\r\ndefineExpose({\r\n initializeEditor,\r\n destroyEditor,\r\n setContent,\r\n getContent,\r\n handleEditorFocus,\r\n handleEditorBlur,\r\n editorInstance: readonly(editorInstance),\r\n isInitialized: readonly(isInitialized),\r\n});\r\n</script>\r\n\r\n<style scoped>\r\n/* 暗色主题样式 */\r\n.editor-dark :deep(.w-e-toolbar) {\r\n background-color: #1f2937 !important;\r\n border-color: #374151 !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item) {\r\n color: #e5e7eb !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item:hover) {\r\n background-color: #374151 !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item.w-e-active) {\r\n background-color: #2080f0 !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container) {\r\n background-color: #111827 !important;\r\n border-color: #374151 !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text) {\r\n background-color: #303033 !important;\r\n color: #e5e7eb !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text:focus) {\r\n background-color: #111827 !important;\r\n color: #e5e7eb !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container) {\r\n max-width: 100% !important;\r\n overflow-x: auto !important;\r\n box-sizing: border-box !important;\r\n}\r\n\r\n:deep(.w-e-text) {\r\n max-width: 100% !important;\r\n word-wrap: break-word !important;\r\n overflow-wrap: break-word !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container),\r\n:deep(.w-e-text) {\r\n transition:\r\n background-color 0.3s ease,\r\n border-color 0.3s ease,\r\n color 0.3s ease !important;\r\n}\r\n\r\n.editor-focused {\r\n overflow: hidden !important;\r\n max-width: 100% !important;\r\n}\r\n</style>\r\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"C_Editor2.js","names":["editorId"],"sources":["../src/components/C_Editor/index.vue","../src/components/C_Editor/index.vue","../src/components/C_Editor/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 ref=\"editorContainer\"\r\n :id=\"editorId\"\r\n v-show=\"isInitialized\"\r\n class=\"w-full\"\r\n :class=\"{ 'editor-dark': isDark }\"\r\n @focusin=\"handleEditorFocus\"\r\n @focusout=\"handleEditorBlur\"\r\n ></div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport {\r\n ref,\r\n computed,\r\n watch,\r\n nextTick,\r\n onMounted,\r\n onBeforeUnmount,\r\n readonly,\r\n} from \"vue\";\r\nimport E from \"wangeditor\";\r\n\r\ndefineOptions({ name: \"C_Editor\" });\r\n\r\ninterface Props {\r\n editorId: string;\r\n modelValue?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n height?: number;\r\n theme?: \"light\" | \"dark\";\r\n}\r\n\r\ninterface Emits {\r\n (e: \"update:modelValue\", value: string): void;\r\n (e: \"editor-mounted\", editor: any): void;\r\n (e: \"editor-change\", html: string): void;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n modelValue: \"\",\r\n placeholder: \"\",\r\n disabled: false,\r\n readonly: false,\r\n height: 240,\r\n theme: \"light\",\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst editorContainer = ref<HTMLElement | null>(null);\r\nconst editorInstance = ref<any>(null);\r\nconst isInitialized = ref<boolean>(false);\r\n\r\nconst isDark = computed(() => props.theme === \"dark\");\r\n\r\nconst initializeEditor = (): void => {\r\n if (!editorContainer.value || isInitialized.value) return;\r\n\r\n try {\r\n const editor = new E(editorContainer.value);\r\n const editorConfig = editor.config as any;\r\n editorConfig.placeholder = props.placeholder;\r\n editorConfig.height = props.height - 50;\r\n\r\n editorConfig.onchange = (html: string) => {\r\n emit(\"update:modelValue\", html);\r\n emit(\"editor-change\", html);\r\n };\r\n\r\n editor.create();\r\n\r\n nextTick(() => {\r\n if (props.modelValue) {\r\n editor.txt.html(props.modelValue);\r\n }\r\n if (props.readonly) {\r\n editor.disable();\r\n }\r\n editorInstance.value = editor;\r\n isInitialized.value = true;\r\n emit(\"editor-mounted\", editor);\r\n });\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器初始化失败: ${props.editorId}`, error);\r\n }\r\n};\r\n\r\nconst destroyEditor = (): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.destroy();\r\n editorInstance.value = null;\r\n isInitialized.value = false;\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器销毁失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst setContent = (html: string): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.txt.html(html);\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器内容失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst getContent = (): string => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n return editorInstance.value.txt.html();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 获取编辑器内容失败: ${props.editorId}`, error);\r\n return \"\";\r\n }\r\n }\r\n return \"\";\r\n};\r\n\r\nwatch(\r\n () => props.modelValue,\r\n (newValue) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n const currentContent = editorInstance.value.txt.html();\r\n if (currentContent !== newValue) {\r\n editorInstance.value.txt.html(newValue || \"\");\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.disabled,\r\n (disabled) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (disabled) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.readonly,\r\n (readonlyVal) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (readonlyVal) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器只读状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nconst handleEditorFocus = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.add(\"editor-focused\");\r\n const containerWidth = container.scrollWidth;\r\n container.style.maxWidth = `${containerWidth}px`;\r\n }\r\n};\r\n\r\nconst handleEditorBlur = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.remove(\"editor-focused\");\r\n container.style.maxWidth = \"\";\r\n }\r\n};\r\n\r\nonMounted(() => {\r\n nextTick(() => {\r\n initializeEditor();\r\n });\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n destroyEditor();\r\n});\r\n\r\ndefineExpose({\r\n initializeEditor,\r\n destroyEditor,\r\n setContent,\r\n getContent,\r\n handleEditorFocus,\r\n handleEditorBlur,\r\n editorInstance: readonly(editorInstance),\r\n isInitialized: readonly(isInitialized),\r\n});\r\n</script>\r\n\r\n<style scoped>\r\n/* 暗色主题样式 */\r\n.editor-dark :deep(.w-e-toolbar) {\r\n background-color: #1f2937 !important;\r\n border-color: #374151 !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item) {\r\n color: #e5e7eb !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item:hover) {\r\n background-color: #374151 !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item.w-e-active) {\r\n background-color: #2080f0 !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container) {\r\n background-color: #111827 !important;\r\n border-color: #374151 !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text) {\r\n background-color: #303033 !important;\r\n color: #e5e7eb !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text:focus) {\r\n background-color: #111827 !important;\r\n color: #e5e7eb !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container) {\r\n max-width: 100% !important;\r\n overflow-x: auto !important;\r\n box-sizing: border-box !important;\r\n}\r\n\r\n:deep(.w-e-text) {\r\n max-width: 100% !important;\r\n word-wrap: break-word !important;\r\n overflow-wrap: break-word !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container),\r\n:deep(.w-e-text) {\r\n transition:\r\n background-color 0.3s ease,\r\n border-color 0.3s ease,\r\n color 0.3s ease !important;\r\n}\r\n\r\n.editor-focused {\r\n overflow: hidden !important;\r\n max-width: 100% !important;\r\n}\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 ref=\"editorContainer\"\r\n :id=\"editorId\"\r\n v-show=\"isInitialized\"\r\n class=\"w-full\"\r\n :class=\"{ 'editor-dark': isDark }\"\r\n @focusin=\"handleEditorFocus\"\r\n @focusout=\"handleEditorBlur\"\r\n ></div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport {\r\n ref,\r\n computed,\r\n watch,\r\n nextTick,\r\n onMounted,\r\n onBeforeUnmount,\r\n readonly,\r\n} from \"vue\";\r\nimport E from \"wangeditor\";\r\n\r\ndefineOptions({ name: \"C_Editor\" });\r\n\r\ninterface Props {\r\n editorId: string;\r\n modelValue?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n height?: number;\r\n theme?: \"light\" | \"dark\";\r\n}\r\n\r\ninterface Emits {\r\n (e: \"update:modelValue\", value: string): void;\r\n (e: \"editor-mounted\", editor: any): void;\r\n (e: \"editor-change\", html: string): void;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n modelValue: \"\",\r\n placeholder: \"\",\r\n disabled: false,\r\n readonly: false,\r\n height: 240,\r\n theme: \"light\",\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst editorContainer = ref<HTMLElement | null>(null);\r\nconst editorInstance = ref<any>(null);\r\nconst isInitialized = ref<boolean>(false);\r\n\r\nconst isDark = computed(() => props.theme === \"dark\");\r\n\r\nconst initializeEditor = (): void => {\r\n if (!editorContainer.value || isInitialized.value) return;\r\n\r\n try {\r\n const editor = new E(editorContainer.value);\r\n const editorConfig = editor.config as any;\r\n editorConfig.placeholder = props.placeholder;\r\n editorConfig.height = props.height - 50;\r\n\r\n editorConfig.onchange = (html: string) => {\r\n emit(\"update:modelValue\", html);\r\n emit(\"editor-change\", html);\r\n };\r\n\r\n editor.create();\r\n\r\n nextTick(() => {\r\n if (props.modelValue) {\r\n editor.txt.html(props.modelValue);\r\n }\r\n if (props.readonly) {\r\n editor.disable();\r\n }\r\n editorInstance.value = editor;\r\n isInitialized.value = true;\r\n emit(\"editor-mounted\", editor);\r\n });\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器初始化失败: ${props.editorId}`, error);\r\n }\r\n};\r\n\r\nconst destroyEditor = (): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.destroy();\r\n editorInstance.value = null;\r\n isInitialized.value = false;\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器销毁失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst setContent = (html: string): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.txt.html(html);\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器内容失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst getContent = (): string => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n return editorInstance.value.txt.html();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 获取编辑器内容失败: ${props.editorId}`, error);\r\n return \"\";\r\n }\r\n }\r\n return \"\";\r\n};\r\n\r\nwatch(\r\n () => props.modelValue,\r\n (newValue) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n const currentContent = editorInstance.value.txt.html();\r\n if (currentContent !== newValue) {\r\n editorInstance.value.txt.html(newValue || \"\");\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.disabled,\r\n (disabled) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (disabled) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.readonly,\r\n (readonlyVal) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (readonlyVal) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器只读状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nconst handleEditorFocus = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.add(\"editor-focused\");\r\n const containerWidth = container.scrollWidth;\r\n container.style.maxWidth = `${containerWidth}px`;\r\n }\r\n};\r\n\r\nconst handleEditorBlur = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.remove(\"editor-focused\");\r\n container.style.maxWidth = \"\";\r\n }\r\n};\r\n\r\nonMounted(() => {\r\n nextTick(() => {\r\n initializeEditor();\r\n });\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n destroyEditor();\r\n});\r\n\r\ndefineExpose({\r\n initializeEditor,\r\n destroyEditor,\r\n setContent,\r\n getContent,\r\n handleEditorFocus,\r\n handleEditorBlur,\r\n editorInstance: readonly(editorInstance),\r\n isInitialized: readonly(isInitialized),\r\n});\r\n</script>\r\n\r\n<style scoped>\r\n/* 暗色主题样式 */\r\n.editor-dark :deep(.w-e-toolbar) {\r\n background-color: #1f2937 !important;\r\n border-color: #374151 !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item) {\r\n color: #e5e7eb !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item:hover) {\r\n background-color: #374151 !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item.w-e-active) {\r\n background-color: #2080f0 !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container) {\r\n background-color: #111827 !important;\r\n border-color: #374151 !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text) {\r\n background-color: #303033 !important;\r\n color: #e5e7eb !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text:focus) {\r\n background-color: #111827 !important;\r\n color: #e5e7eb !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container) {\r\n max-width: 100% !important;\r\n overflow-x: auto !important;\r\n box-sizing: border-box !important;\r\n}\r\n\r\n:deep(.w-e-text) {\r\n max-width: 100% !important;\r\n word-wrap: break-word !important;\r\n overflow-wrap: break-word !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container),\r\n:deep(.w-e-text) {\r\n transition:\r\n background-color 0.3s ease,\r\n border-color 0.3s ease,\r\n color 0.3s ease !important;\r\n}\r\n\r\n.editor-focused {\r\n overflow: hidden !important;\r\n max-width: 100% !important;\r\n}\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 ref=\"editorContainer\"\r\n :id=\"editorId\"\r\n v-show=\"isInitialized\"\r\n class=\"w-full\"\r\n :class=\"{ 'editor-dark': isDark }\"\r\n @focusin=\"handleEditorFocus\"\r\n @focusout=\"handleEditorBlur\"\r\n ></div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport {\r\n ref,\r\n computed,\r\n watch,\r\n nextTick,\r\n onMounted,\r\n onBeforeUnmount,\r\n readonly,\r\n} from \"vue\";\r\nimport E from \"wangeditor\";\r\n\r\ndefineOptions({ name: \"C_Editor\" });\r\n\r\ninterface Props {\r\n editorId: string;\r\n modelValue?: string;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n readonly?: boolean;\r\n height?: number;\r\n theme?: \"light\" | \"dark\";\r\n}\r\n\r\ninterface Emits {\r\n (e: \"update:modelValue\", value: string): void;\r\n (e: \"editor-mounted\", editor: any): void;\r\n (e: \"editor-change\", html: string): void;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n modelValue: \"\",\r\n placeholder: \"\",\r\n disabled: false,\r\n readonly: false,\r\n height: 240,\r\n theme: \"light\",\r\n});\r\n\r\nconst emit = defineEmits<Emits>();\r\n\r\nconst editorContainer = ref<HTMLElement | null>(null);\r\nconst editorInstance = ref<any>(null);\r\nconst isInitialized = ref<boolean>(false);\r\n\r\nconst isDark = computed(() => props.theme === \"dark\");\r\n\r\nconst initializeEditor = (): void => {\r\n if (!editorContainer.value || isInitialized.value) return;\r\n\r\n try {\r\n const editor = new E(editorContainer.value);\r\n const editorConfig = editor.config as any;\r\n editorConfig.placeholder = props.placeholder;\r\n editorConfig.height = props.height - 50;\r\n\r\n editorConfig.onchange = (html: string) => {\r\n emit(\"update:modelValue\", html);\r\n emit(\"editor-change\", html);\r\n };\r\n\r\n editor.create();\r\n\r\n nextTick(() => {\r\n if (props.modelValue) {\r\n editor.txt.html(props.modelValue);\r\n }\r\n if (props.readonly) {\r\n editor.disable();\r\n }\r\n editorInstance.value = editor;\r\n isInitialized.value = true;\r\n emit(\"editor-mounted\", editor);\r\n });\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器初始化失败: ${props.editorId}`, error);\r\n }\r\n};\r\n\r\nconst destroyEditor = (): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.destroy();\r\n editorInstance.value = null;\r\n isInitialized.value = false;\r\n } catch (error) {\r\n console.error(`[C_Editor] 编辑器销毁失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst setContent = (html: string): void => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n editorInstance.value.txt.html(html);\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器内容失败: ${props.editorId}`, error);\r\n }\r\n }\r\n};\r\n\r\nconst getContent = (): string => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n return editorInstance.value.txt.html();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 获取编辑器内容失败: ${props.editorId}`, error);\r\n return \"\";\r\n }\r\n }\r\n return \"\";\r\n};\r\n\r\nwatch(\r\n () => props.modelValue,\r\n (newValue) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n const currentContent = editorInstance.value.txt.html();\r\n if (currentContent !== newValue) {\r\n editorInstance.value.txt.html(newValue || \"\");\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.disabled,\r\n (disabled) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (disabled) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nwatch(\r\n () => props.readonly,\r\n (readonlyVal) => {\r\n if (editorInstance.value && isInitialized.value) {\r\n try {\r\n if (readonlyVal) editorInstance.value.disable();\r\n else editorInstance.value.enable();\r\n } catch (error) {\r\n console.warn(`[C_Editor] 设置编辑器只读状态失败`, error);\r\n }\r\n }\r\n },\r\n);\r\n\r\nconst handleEditorFocus = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.add(\"editor-focused\");\r\n const containerWidth = container.scrollWidth;\r\n container.style.maxWidth = `${containerWidth}px`;\r\n }\r\n};\r\n\r\nconst handleEditorBlur = (): void => {\r\n if (!editorContainer.value) return;\r\n const container = editorContainer.value.closest(\r\n \".form-demo\",\r\n ) as HTMLElement | null;\r\n if (container) {\r\n container.classList.remove(\"editor-focused\");\r\n container.style.maxWidth = \"\";\r\n }\r\n};\r\n\r\nonMounted(() => {\r\n nextTick(() => {\r\n initializeEditor();\r\n });\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n destroyEditor();\r\n});\r\n\r\ndefineExpose({\r\n initializeEditor,\r\n destroyEditor,\r\n setContent,\r\n getContent,\r\n handleEditorFocus,\r\n handleEditorBlur,\r\n editorInstance: readonly(editorInstance),\r\n isInitialized: readonly(isInitialized),\r\n});\r\n</script>\r\n\r\n<style scoped>\r\n/* 暗色主题样式 */\r\n.editor-dark :deep(.w-e-toolbar) {\r\n background-color: #1f2937 !important;\r\n border-color: #374151 !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item) {\r\n color: #e5e7eb !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item:hover) {\r\n background-color: #374151 !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-toolbar .w-e-menu .w-e-menu-item.w-e-active) {\r\n background-color: #2080f0 !important;\r\n color: #ffffff !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container) {\r\n background-color: #111827 !important;\r\n border-color: #374151 !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text) {\r\n background-color: #303033 !important;\r\n color: #e5e7eb !important;\r\n}\r\n\r\n.editor-dark :deep(.w-e-text-container .w-e-text:focus) {\r\n background-color: #111827 !important;\r\n color: #e5e7eb !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container) {\r\n max-width: 100% !important;\r\n overflow-x: auto !important;\r\n box-sizing: border-box !important;\r\n}\r\n\r\n:deep(.w-e-text) {\r\n max-width: 100% !important;\r\n word-wrap: break-word !important;\r\n overflow-wrap: break-word !important;\r\n}\r\n\r\n:deep(.w-e-toolbar),\r\n:deep(.w-e-text-container),\r\n:deep(.w-e-text) {\r\n transition:\r\n background-color 0.3s ease,\r\n border-color 0.3s ease,\r\n color 0.3s ease !important;\r\n}\r\n\r\n.editor-focused {\r\n overflow: hidden !important;\r\n max-width: 100% !important;\r\n}\r\n</style>\r\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"C_FilePreview-B4XgTv-h.css","names":[],"sources":["../src/components/C_FilePreview/components/PdfViewer/index.vue?vue&type=style&index=0&scoped=5a57e241&lang.scss","../src/components/C_FilePreview/components/WordViewer/index.vue?vue&type=style&index=0&scoped=42ca58ad&lang.scss","../src/components/C_FilePreview/components/ExcelViewer/index.vue?vue&type=style&index=0&scoped=b6c3e1b9&lang.scss","../src/components/C_FilePreview/index.vue?vue&type=style&index=0&scoped=8042014e&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.file-container[data-v-5a57e241] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.file-container .file-toolbar[data-v-5a57e241] {\n padding: 12px 16px;\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n background-color: var(--c-bg-card, #f9f9f9);\n flex-shrink: 0;\n z-index: 8;\n position: relative;\n}\n.file-container .file-viewer[data-v-5a57e241] {\n flex: 1;\n min-height: 300px;\n}","/* unplugin-vue-components disabled */.file-container[data-v-42ca58ad] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.file-container .file-toolbar[data-v-42ca58ad] {\n padding: 12px 16px;\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n background-color: var(--c-bg-card, #f9f9f9);\n flex-shrink: 0;\n z-index: 8;\n position: relative;\n}\n.word-layout[data-v-42ca58ad] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.word-layout .word-main[data-v-42ca58ad] {\n flex: 1;\n display: flex;\n overflow: hidden;\n}\n.word-layout .word-main .word-outline[data-v-42ca58ad] {\n width: 280px;\n border-right: 1px solid var(--c-border, #e0e0e0);\n background-color: var(--c-bg-card, #f9f9f9);\n}\n.word-layout .word-main .word-outline .outline-header[data-v-42ca58ad] {\n padding: 16px;\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n}\n.word-layout .word-main .word-outline .outline-content[data-v-42ca58ad] {\n padding: 8px;\n overflow-y: auto;\n}\n.word-layout .word-main .word-outline .outline-content .outline-item[data-v-42ca58ad] {\n padding: 8px 12px;\n cursor: pointer;\n border-radius: 4px;\n font-size: 14px;\n color: var(--c-text-1, #333);\n}\n.word-layout .word-main .word-outline .outline-content .outline-item[data-v-42ca58ad]:hover {\n background-color: #e6f3ff;\n}\n.word-layout .word-main .word-outline .outline-content .outline-item.level-1[data-v-42ca58ad] {\n padding-left: 12px;\n font-weight: 600;\n}\n.word-layout .word-main .word-outline .outline-content .outline-item.level-2[data-v-42ca58ad] {\n padding-left: 24px;\n}\n.word-layout .word-main .word-outline .outline-content .outline-item.level-3[data-v-42ca58ad], .word-layout .word-main .word-outline .outline-content .outline-item.level-4[data-v-42ca58ad] {\n padding-left: 36px;\n font-size: 13px;\n}\n.word-layout .word-main .word-outline .outline-content .outline-item.level-4[data-v-42ca58ad] {\n padding-left: 48px;\n}\n.word-layout .word-main .word-content[data-v-42ca58ad] {\n flex: 1;\n padding: 24px;\n overflow: auto;\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] {\n max-width: 800px;\n margin: 0 auto;\n background: var(--c-bg-card, white);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n padding: 40px;\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] h1 {\n margin: 24px 0 16px 0;\n font-weight: bold;\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] h1 {\n font-size: 1.8rem;\n color: var(--c-text-1, #333);\n border-bottom: 2px solid var(--c-border, #e0e0e0);\n padding-bottom: 8px;\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] h2 {\n font-size: 1.5rem;\n color: var(--c-text-1, #444);\n margin: 20px 0 12px 0;\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] h3 {\n font-size: 1.25rem;\n color: var(--c-text-2, #555);\n margin: 16px 0 8px 0;\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] p {\n margin-bottom: 12px;\n line-height: 1.8;\n color: var(--c-text-1, #333);\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] ul {\n margin: 12px 0;\n padding-left: 24px;\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] li {\n margin-bottom: 6px;\n line-height: 1.6;\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] table {\n width: 100%;\n border-collapse: collapse;\n margin: 16px 0;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] th {\n border: 1px solid #d0d0d0;\n padding: 12px;\n text-align: left;\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] th {\n background-color: var(--c-bg-card, #f5f5f5);\n font-weight: bold;\n}","/* unplugin-vue-components disabled */.file-container[data-v-b6c3e1b9] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.file-container .file-toolbar[data-v-b6c3e1b9] {\n padding: 12px 16px;\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n background-color: var(--c-bg-card, #f9f9f9);\n flex-shrink: 0;\n z-index: 8;\n position: relative;\n}\n.excel-container[data-v-b6c3e1b9] {\n overflow: visible;\n}\n.excel-container .excel-viewer[data-v-b6c3e1b9] {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: visible;\n}\n.excel-container .excel-viewer .excel-info[data-v-b6c3e1b9] {\n padding: 8px 16px;\n background-color: var(--c-bg-card, #f9f9f9);\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n flex-shrink: 0;\n z-index: 7;\n position: relative;\n}\n.excel-container .excel-viewer .excel-table-container[data-v-b6c3e1b9] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: visible;\n min-height: 0;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper[data-v-b6c3e1b9] {\n flex: 1;\n overflow: auto;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table[data-v-b6c3e1b9] {\n font-size: 12px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-header[data-v-b6c3e1b9] {\n padding: 6px 8px;\n background: #f8f9fa;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-header .header-content .column-letter[data-v-b6c3e1b9] {\n display: none;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-header .header-content .column-title[data-v-b6c3e1b9] {\n font-size: 11px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-row[data-v-b6c3e1b9]:nth-child(even) {\n background-color: #fefefe;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-cell[data-v-b6c3e1b9] {\n padding: 4px 8px;\n font-size: 12px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-cell.merged-cell[data-v-b6c3e1b9] {\n border: 1px solid #1976d2 !important;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-cell.merged-cell[data-v-b6c3e1b9]::after {\n display: none;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table[data-v-b6c3e1b9] {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n font-size: 13px;\n min-width: 100%;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .row-number[data-v-b6c3e1b9] {\n background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);\n text-align: center;\n min-width: 30px;\n width: 30px;\n padding: 2px 4px;\n font-size: 11px;\n font-weight: bold;\n border: 1px solid #d0d0d0;\n color: #666;\n position: sticky;\n left: 0;\n z-index: 10;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-header[data-v-b6c3e1b9] {\n background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);\n padding: 8px 12px;\n border: 1px solid #c0c0c0;\n font-weight: bold;\n position: sticky;\n top: 0;\n z-index: 5;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-header .header-content[data-v-b6c3e1b9] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-header .header-content .column-letter[data-v-b6c3e1b9] {\n background-color: var(--c-primary, #1976d2);\n color: white;\n padding: 2px 6px;\n border-radius: 3px;\n font-size: 10px;\n font-weight: normal;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-header .header-content .column-title[data-v-b6c3e1b9] {\n font-size: 12px;\n font-weight: bold;\n text-align: center;\n word-break: break-all;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-row[data-v-b6c3e1b9]:nth-child(even) {\n background-color: #fafafa;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-row[data-v-b6c3e1b9]:hover {\n background-color: #e6f3ff;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell[data-v-b6c3e1b9] {\n padding: 8px 12px;\n border: 1px solid #d0d0d0;\n vertical-align: middle;\n word-wrap: break-word;\n word-break: break-all;\n min-height: 24px;\n line-height: 1.4;\n position: relative;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.cell-number[data-v-b6c3e1b9] {\n text-align: right;\n font-family: \"Courier New\", monospace;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.cell-gantt[data-v-b6c3e1b9] {\n text-align: center;\n font-family: monospace;\n font-size: 14px;\n font-weight: bold;\n background-color: #f0f0f0;\n color: var(--c-text-1, #333);\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.cell-date[data-v-b6c3e1b9] {\n color: var(--c-primary, #1976d2);\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.cell-boolean[data-v-b6c3e1b9] {\n text-align: center;\n font-weight: bold;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.cell-long[data-v-b6c3e1b9] {\n max-width: 200px;\n white-space: pre-wrap;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.cell-empty[data-v-b6c3e1b9] {\n background-color: #fafafa;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.merged-cell[data-v-b6c3e1b9] {\n background: linear-gradient(135deg, #f0f8ff 0%, #e3f2fd 100%) !important;\n border: 2px solid var(--c-primary, #1976d2) !important;\n font-weight: bold;\n text-align: center;\n color: var(--c-primary, #1976d2);\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.merged-cell[data-v-b6c3e1b9]::before {\n content: \"\";\n position: absolute;\n top: 3px;\n left: 3px;\n right: 3px;\n bottom: 3px;\n background: rgba(25, 118, 210, 0.08);\n border-radius: 2px;\n pointer-events: none;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.merged-cell[data-v-b6c3e1b9]::after {\n content: \"📎\";\n position: absolute;\n top: 2px;\n right: 4px;\n font-size: 10px;\n opacity: 0.6;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.compact-cell[data-v-b6c3e1b9] {\n padding: 4px 8px;\n font-size: 12px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.compact-cell.merged-cell[data-v-b6c3e1b9] {\n background: linear-gradient(135deg, #f0f8ff 0%, #e3f2fd 100%) !important;\n border: 1px solid var(--c-primary, #1976d2) !important;\n font-weight: bold;\n text-align: center;\n color: var(--c-primary, #1976d2);\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.compact-cell.merged-cell[data-v-b6c3e1b9]::before {\n top: 2px;\n left: 2px;\n right: 2px;\n bottom: 2px;\n background: rgba(25, 118, 210, 0.05);\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.compact-cell.merged-cell[data-v-b6c3e1b9]::after {\n display: none;\n}\n.excel-container .excel-viewer .excel-table-container .excel-empty[data-v-b6c3e1b9] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 200px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-pagination[data-v-b6c3e1b9] {\n padding: 20px 16px;\n border-top: 1px solid var(--c-border, #e0e0e0);\n background-color: var(--c-bg-card, #f9f9f9);\n display: flex;\n justify-content: center;\n flex-shrink: 0;\n z-index: 1000;\n position: relative;\n overflow: visible;\n}\n.excel-container .excel-viewer .excel-table-container .excel-pagination[data-v-b6c3e1b9] .n-pagination {\n z-index: 1001;\n position: relative;\n}\n.excel-container .excel-viewer .excel-table-container .excel-pagination[data-v-b6c3e1b9] .n-pagination-size-picker {\n z-index: 1002;\n position: relative;\n}\n.excel-container .excel-viewer .excel-table-container .excel-pagination[data-v-b6c3e1b9] .n-pagination-size-picker .n-base-selection {\n z-index: 1003;\n}\n.excel-container .excel-viewer .excel-table-container .excel-pagination[data-v-b6c3e1b9] .n-pagination-size-picker .n-base-selection-popover {\n z-index: 1004 !important;\n}\n.excel-container .excel-viewer .excel-table-container .excel-pagination[data-v-b6c3e1b9] .n-popover {\n z-index: 1005 !important;\n}","/* unplugin-vue-components disabled */.c-file-preview-wrapper[data-v-8042014e] {\n width: 100%;\n}\n.c-file-preview-wrapper .file-info-card .file-info[data-v-8042014e] {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 16px;\n border: 1px solid var(--c-border, #e0e0e0);\n border-radius: 12px;\n background: var(--c-bg-card, white);\n transition: var(--c-transition, 0.2s ease);\n cursor: pointer;\n}\n.c-file-preview-wrapper .file-info-card .file-info[data-v-8042014e]:hover {\n border-color: var(--c-primary, #40a9ff);\n box-shadow: 0 4px 12px rgba(64, 169, 255, 0.15);\n transform: translateY(-1px);\n}\n.c-file-preview-wrapper .file-info-card .file-info .file-icon[data-v-8042014e] {\n flex-shrink: 0;\n width: 56px;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n border-radius: 12px;\n border: 1px solid #dee2e6;\n}\n.c-file-preview-wrapper .file-info-card .file-info .file-details[data-v-8042014e] {\n flex: 1;\n min-width: 0;\n}\n.c-file-preview-wrapper .file-info-card .file-info .file-details .file-name[data-v-8042014e] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 6px;\n font-weight: 600;\n font-size: 16px;\n color: var(--c-text-1, #1f2937);\n}\n.c-file-preview-wrapper .file-info-card .file-info .file-details .file-meta[data-v-8042014e] {\n display: flex;\n gap: 16px;\n font-size: 13px;\n color: var(--c-text-2, #6b7280);\n}\n.c-file-preview-wrapper .file-info-card .file-info .file-details .file-meta .file-size[data-v-8042014e] {\n font-weight: 500;\n color: var(--c-text-1, #374151);\n}\n.c-file-preview-wrapper .file-info-card .file-info .file-actions[data-v-8042014e] {\n flex-shrink: 0;\n display: flex;\n gap: 8px;\n}\n.modal-container[data-v-8042014e] {\n background: var(--c-bg-card, white);\n border-radius: 8px;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n.modal-container .modal-header[data-v-8042014e] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 20px;\n background: var(--c-bg, #fafafa);\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n flex-shrink: 0;\n z-index: 10;\n position: relative;\n}\n.modal-container .modal-header .modal-title[data-v-8042014e] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n font-size: 16px;\n color: var(--c-text-1, #333);\n}\n.modal-container .modal-header .modal-title span[data-v-8042014e] {\n max-width: 400px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.modal-container .modal-header .modal-actions[data-v-8042014e] {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.modal-container .modal-content[data-v-8042014e] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: visible;\n min-height: 0;\n}\n.modal-container .preview-header[data-v-8042014e] {\n padding: 16px;\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n background-color: var(--c-bg-card, #f9f9f9);\n flex-shrink: 0;\n z-index: 9;\n position: relative;\n}\n.modal-container .preview-content[data-v-8042014e] {\n flex: 1;\n overflow: auto;\n min-height: 0;\n position: relative;\n}\n.modal-container .preview-content .status-container[data-v-8042014e] {\n height: 300px;\n display: flex;\n align-items: center;\n justify-content: center;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AChBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACvHA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AClPA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_FilePreview.cjs
CHANGED
package/dist/C_FilePreview.js
CHANGED
package/dist/C_FilePreview2.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import { t as C_Icon_default } from "./C_Icon2.js";
|
|
1
2
|
import { t as export_helper_default } from "./export-helper.js";
|
|
2
|
-
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, resolveComponent, toDisplayString, toRefs, unref, vShow, watch, withCtx, withDirectives } from "vue";
|
|
3
3
|
import { NButton, NDivider, NEllipsis, NEmpty, NInputNumber, NModal, NPagination, NResult, NSpin, NTabPane, NTabs, NTag, NText } from "naive-ui";
|
|
4
|
+
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, toDisplayString, toRefs, unref, vShow, watch, withCtx, withDirectives } from "vue";
|
|
4
5
|
import * as XLSX from "xlsx";
|
|
5
6
|
import mammoth from "mammoth";
|
|
6
7
|
|
|
@@ -268,7 +269,7 @@ var index_vue_vue_type_script_setup_true_lang_default$3 = /* @__PURE__ */ define
|
|
|
268
269
|
}
|
|
269
270
|
};
|
|
270
271
|
return (_ctx, _cache) => {
|
|
271
|
-
const _component_C_Icon =
|
|
272
|
+
const _component_C_Icon = C_Icon_default;
|
|
272
273
|
return openBlock(), createElementBlock("div", _hoisted_1$3, [createElementVNode("div", _hoisted_2$3, [createElementVNode("div", _hoisted_3$3, [
|
|
273
274
|
createCommentVNode(" 翻页控制 "),
|
|
274
275
|
createElementVNode("div", _hoisted_4$3, [
|
|
@@ -341,7 +342,7 @@ var index_vue_vue_type_script_setup_true_lang_default$3 = /* @__PURE__ */ define
|
|
|
341
342
|
|
|
342
343
|
//#endregion
|
|
343
344
|
//#region src/components/C_FilePreview/components/PdfViewer/index.vue
|
|
344
|
-
var PdfViewer_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default$3, [["__scopeId", "data-v-
|
|
345
|
+
var PdfViewer_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default$3, [["__scopeId", "data-v-5a57e241"]]);
|
|
345
346
|
|
|
346
347
|
//#endregion
|
|
347
348
|
//#region src/components/C_FilePreview/components/WordViewer/index.vue?vue&type=script&setup=true&lang.ts
|
|
@@ -376,7 +377,7 @@ var index_vue_vue_type_script_setup_true_lang_default$2 = /* @__PURE__ */ define
|
|
|
376
377
|
});
|
|
377
378
|
};
|
|
378
379
|
return (_ctx, _cache) => {
|
|
379
|
-
const _component_C_Icon =
|
|
380
|
+
const _component_C_Icon = C_Icon_default;
|
|
380
381
|
return openBlock(), createElementBlock("div", _hoisted_1$2, [createElementVNode("div", _hoisted_2$2, [createElementVNode("div", _hoisted_3$2, [
|
|
381
382
|
createVNode(unref(NButton), {
|
|
382
383
|
size: "small",
|
|
@@ -438,7 +439,7 @@ var index_vue_vue_type_script_setup_true_lang_default$2 = /* @__PURE__ */ define
|
|
|
438
439
|
|
|
439
440
|
//#endregion
|
|
440
441
|
//#region src/components/C_FilePreview/components/WordViewer/index.vue
|
|
441
|
-
var WordViewer_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default$2, [["__scopeId", "data-v-
|
|
442
|
+
var WordViewer_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default$2, [["__scopeId", "data-v-42ca58ad"]]);
|
|
442
443
|
|
|
443
444
|
//#endregion
|
|
444
445
|
//#region src/components/C_FilePreview/components/ExcelViewer/index.vue?vue&type=script&setup=true&lang.ts
|
|
@@ -520,7 +521,7 @@ var index_vue_vue_type_script_setup_true_lang_default$1 = /* @__PURE__ */ define
|
|
|
520
521
|
}
|
|
521
522
|
}, { immediate: true });
|
|
522
523
|
return (_ctx, _cache) => {
|
|
523
|
-
const _component_C_Icon =
|
|
524
|
+
const _component_C_Icon = C_Icon_default;
|
|
524
525
|
return openBlock(), createElementBlock("div", _hoisted_1$1, [
|
|
525
526
|
createCommentVNode(" 工具栏 "),
|
|
526
527
|
createElementVNode("div", _hoisted_2$1, [createElementVNode("div", _hoisted_3$1, [createElementVNode("div", _hoisted_4$1, [_ctx.sheets.length > 1 ? (openBlock(), createBlock(unref(NTabs), {
|
|
@@ -615,7 +616,7 @@ var index_vue_vue_type_script_setup_true_lang_default$1 = /* @__PURE__ */ define
|
|
|
615
616
|
|
|
616
617
|
//#endregion
|
|
617
618
|
//#region src/components/C_FilePreview/components/ExcelViewer/index.vue
|
|
618
|
-
var ExcelViewer_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default$1, [["__scopeId", "data-v-
|
|
619
|
+
var ExcelViewer_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default$1, [["__scopeId", "data-v-b6c3e1b9"]]);
|
|
619
620
|
|
|
620
621
|
//#endregion
|
|
621
622
|
//#region src/components/C_FilePreview/composables/useFilePreview.ts
|
|
@@ -860,7 +861,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
|
|
|
860
861
|
if (!isShow) exitFullscreen();
|
|
861
862
|
});
|
|
862
863
|
return (_ctx, _cache) => {
|
|
863
|
-
const _component_C_Icon =
|
|
864
|
+
const _component_C_Icon = C_Icon_default;
|
|
864
865
|
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
865
866
|
createCommentVNode(" 文件信息卡片模式 "),
|
|
866
867
|
!unref(autoPreview) ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [
|
|
@@ -1024,7 +1025,7 @@ var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
|
|
|
1024
1025
|
|
|
1025
1026
|
//#endregion
|
|
1026
1027
|
//#region src/components/C_FilePreview/index.vue
|
|
1027
|
-
var C_FilePreview_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-
|
|
1028
|
+
var C_FilePreview_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8042014e"]]);
|
|
1028
1029
|
|
|
1029
1030
|
//#endregion
|
|
1030
1031
|
export { useFullscreen as n, useFilePreview as r, C_FilePreview_default as t };
|