ninemoon-ui 0.0.27 → 0.1.0

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.
Files changed (135) hide show
  1. package/dist/assets/dialog-a1b585e9.css +9 -0
  2. package/dist/assets/index-6d2c28a9.css +1210 -0
  3. package/dist/{tabs.css → assets/tabs-d2c8965f.css} +3 -3
  4. package/dist/components/alert/alert.d.ts +3 -11
  5. package/dist/components/alert/alertcomponent.vue.d.ts +22 -11
  6. package/dist/components/badge/badge.vue.d.ts +2 -0
  7. package/dist/components/carousel/carousel.vue.d.ts +29 -3
  8. package/dist/components/{tree/tree.vue.d.ts → carousel/clickbutton.vue.d.ts} +6 -19
  9. package/dist/components/check/checkbox.vue.d.ts +24 -16
  10. package/dist/components/check/checkgroup.vue.d.ts +15 -3
  11. package/dist/components/date/datepicker.vue.d.ts +28 -6
  12. package/dist/components/date/datepickerRange.vue.d.ts +15 -4
  13. package/dist/components/form/form.vue.d.ts +7 -20
  14. package/dist/components/form/formlabel.vue.d.ts +3 -3
  15. package/dist/components/form/type.d.ts +11 -0
  16. package/dist/components/icon/add.vue.d.ts +2 -0
  17. package/dist/components/icon/alertTip.vue.d.ts +2 -0
  18. package/dist/components/icon/arrow.vue.d.ts +2 -0
  19. package/dist/components/icon/calendar.vue.d.ts +2 -0
  20. package/dist/components/icon/close.vue.d.ts +2 -0
  21. package/dist/components/icon/dateArrow.vue.d.ts +2 -0
  22. package/dist/components/icon/dateArrowplus.vue.d.ts +2 -0
  23. package/dist/components/icon/delete.vue.d.ts +2 -0
  24. package/dist/components/icon/ellipsis.vue.d.ts +2 -0
  25. package/dist/components/icon/errTip.vue.d.ts +2 -0
  26. package/dist/components/icon/eye.vue.d.ts +2 -0
  27. package/dist/components/icon/infoTip.vue.d.ts +2 -0
  28. package/dist/components/icon/minus.vue.d.ts +2 -0
  29. package/dist/components/icon/successTip.vue.d.ts +2 -0
  30. package/dist/components/icon/turnleft.vue.d.ts +2 -0
  31. package/dist/components/icon/turnright.vue.d.ts +2 -0
  32. package/dist/components/icon/warnTip.vue.d.ts +2 -0
  33. package/dist/components/input/input.vue.d.ts +13 -8
  34. package/dist/components/loadding/loadcomponent.vue.d.ts +24 -4
  35. package/dist/components/loadding/loadding.d.ts +12 -19
  36. package/dist/components/menu/menu.vue.d.ts +13 -3
  37. package/dist/components/message/message.d.ts +68 -14
  38. package/dist/components/message/messagecomponent.vue.d.ts +5 -13
  39. package/dist/components/numberInput/numberinput.vue.d.ts +3 -3
  40. package/dist/components/pagination/pagination.vue.d.ts +24 -0
  41. package/dist/components/popover/poparrow.d.ts +55 -0
  42. package/dist/components/popover/popover.vue.d.ts +10 -4
  43. package/dist/components/radio/radiobox.vue.d.ts +24 -16
  44. package/dist/components/radio/radiogroup.vue.d.ts +15 -3
  45. package/dist/components/scrollBar/movebar.vue.d.ts +2 -2
  46. package/dist/components/scrollBar/scrollBar.vue.d.ts +12 -16
  47. package/dist/components/scrollloading/scrolllead.d.ts +18 -11
  48. package/dist/components/select/select.vue.d.ts +15 -1
  49. package/dist/components/select/selectoption.vue.d.ts +18 -6
  50. package/dist/components/switch/switch.vue.d.ts +14 -14
  51. package/dist/components/table/table.vue.d.ts +20 -9
  52. package/dist/components/table/tableItem.vue.d.ts +10 -4
  53. package/dist/components/tabs/tabs.vue.d.ts +14 -1
  54. package/dist/directives/arrowKeys.d.ts +10 -0
  55. package/dist/directives/drag.d.ts +20 -0
  56. package/dist/directives/escape.d.ts +7 -0
  57. package/dist/directives/outsideclick.d.ts +14 -0
  58. package/dist/directives/watchwindow.d.ts +13 -0
  59. package/dist/directives/wheel.d.ts +12 -0
  60. package/dist/directives/whitespaceclick.d.ts +12 -0
  61. package/dist/index.d.ts +831 -401
  62. package/dist/js/arrow-ebe47bd0.js +17 -0
  63. package/dist/js/{badge/badge.js → badge-496028b6.js} +9 -16
  64. package/dist/js/calendar-5c242731.js +87 -0
  65. package/dist/js/carousel-10621aeb.js +155 -0
  66. package/dist/js/{carousel/carouselitem.js → carouselitem-89116745.js} +1 -7
  67. package/dist/js/checkbox-530025c4.js +50 -0
  68. package/dist/js/checkgroup-e4e6adbc.js +58 -0
  69. package/dist/js/dateArrowplus-8181993f.js +25 -0
  70. package/dist/js/datepicker-ef8b7019.js +362 -0
  71. package/dist/js/datepickerRange-4c400f88.js +500 -0
  72. package/dist/js/delete-e898f83c.js +19 -0
  73. package/dist/js/dialog-0127ca01.js +122 -0
  74. package/dist/js/form-6ae96387.js +79 -0
  75. package/dist/js/formlabel-9339bd1c.js +136 -0
  76. package/dist/js/image-76711716.js +300 -0
  77. package/dist/js/index-283810a0.js +6261 -0
  78. package/dist/js/index-b4e420ce.js +958 -0
  79. package/dist/js/index-e12c8d65.js +36 -0
  80. package/dist/js/input-11fe67a5.js +107 -0
  81. package/dist/js/menu-fb9b4a4f.js +86 -0
  82. package/dist/js/numberinput-00fa4429.js +119 -0
  83. package/dist/js/pagination-3bcaa109.js +203 -0
  84. package/dist/js/popover-45f75f86.js +345 -0
  85. package/dist/js/radiobox-8f11e726.js +49 -0
  86. package/dist/js/radiogroup-727923c7.js +33 -0
  87. package/dist/js/scrollBar-07906042.js +252 -0
  88. package/dist/js/select-b5bbb138.js +203 -0
  89. package/dist/js/selectoption-00c8f06d.js +57 -0
  90. package/dist/js/shapeFlag-8cf4bcf1.js +17 -0
  91. package/dist/js/switch-06ae74cc.js +50 -0
  92. package/dist/js/table-9bb52630.js +270 -0
  93. package/dist/js/{table/tableItem.js → tableItem-7d8bf2db.js} +1 -1
  94. package/dist/js/{tabs/tabs.js → tabs-9d7be734.js} +57 -59
  95. package/dist/js/{upload/upload.js → upload-16dbef22.js} +8 -23
  96. package/dist/types/shapeFlag.d.ts +13 -0
  97. package/dist/{components/utils → utils}/tool.d.ts +11 -4
  98. package/package.json +1 -1
  99. package/dist/badge.css +0 -27
  100. package/dist/carousel.css +0 -13
  101. package/dist/checkgroup.css +0 -41
  102. package/dist/datepickerRange.css +0 -79
  103. package/dist/image.css +0 -8
  104. package/dist/index.css +0 -897
  105. package/dist/index.es.js +0 -37
  106. package/dist/index.umd.js +0 -6006
  107. package/dist/js/carousel/carousel.js +0 -171
  108. package/dist/js/check/checkbox.js +0 -16
  109. package/dist/js/check/checkgroup.js +0 -69
  110. package/dist/js/date/datepicker.js +0 -366
  111. package/dist/js/date/datepickerRange.js +0 -589
  112. package/dist/js/dialog/dialog.js +0 -138
  113. package/dist/js/form/form.js +0 -87
  114. package/dist/js/form/formlabel.js +0 -167
  115. package/dist/js/getcalendar/getcalendar.js +0 -48
  116. package/dist/js/image/image.js +0 -250
  117. package/dist/js/index/index.js +0 -860
  118. package/dist/js/input/input.js +0 -90
  119. package/dist/js/menu/menu.js +0 -59
  120. package/dist/js/numberInput/numberinput.js +0 -127
  121. package/dist/js/pagination/pagination.js +0 -234
  122. package/dist/js/popover/popover.js +0 -241
  123. package/dist/js/radio/radiobox.js +0 -16
  124. package/dist/js/radio/radiogroup.js +0 -69
  125. package/dist/js/scrollBar/scrollBar.js +0 -208
  126. package/dist/js/select/select.js +0 -118
  127. package/dist/js/select/selectoption.js +0 -16
  128. package/dist/js/switch/switch.js +0 -50
  129. package/dist/js/table/table.js +0 -216
  130. package/dist/js/tree/tree.js +0 -72
  131. package/dist/js/tree/treeleaf.js +0 -116
  132. package/dist/radiogroup.css +0 -44
  133. package/dist/scrollBar.css +0 -37
  134. package/dist/select.css +0 -20
  135. /package/dist/js/{tabs/tabsPane.js → tabsPane-f024a6bf.js} +0 -0
@@ -0,0 +1,79 @@
1
+ import { defineComponent, readonly, reactive, ref, provide, toRef, openBlock, createElementBlock, renderSlot } from "vue";
2
+ const _sfc_main = /* @__PURE__ */ defineComponent({
3
+ __name: "form",
4
+ props: {
5
+ rule: {},
6
+ model: {},
7
+ inline: { type: Boolean, default: false }
8
+ },
9
+ setup(__props, { expose: __expose }) {
10
+ const props = __props;
11
+ const staticModel = readonly(Object.assign({}, props.model));
12
+ const ruleCheck = reactive(/* @__PURE__ */ new Map());
13
+ const clearList = ref([]);
14
+ const validate = async (callBack) => {
15
+ try {
16
+ const rulePromises = Array.from(ruleCheck.values()).map((rule) => {
17
+ return new Promise(
18
+ (resolve) => rule((result) => resolve(result === true))
19
+ );
20
+ });
21
+ const results = await Promise.all(rulePromises);
22
+ const passedCount = results.filter(Boolean).length;
23
+ const isValid = passedCount === ruleCheck.size;
24
+ callBack(isValid);
25
+ return isValid;
26
+ } catch (error) {
27
+ console.error("Validation error:", error);
28
+ callBack(false);
29
+ return false;
30
+ }
31
+ };
32
+ const validateField = async (propname, callBack) => {
33
+ if (!propname) {
34
+ throw new Error("prop参数为空");
35
+ } else {
36
+ const checkFc = ruleCheck.get(propname);
37
+ if (!checkFc) {
38
+ throw new Error("没有匹配的检查函数");
39
+ } else {
40
+ await checkFc((msg) => {
41
+ callBack(msg);
42
+ });
43
+ }
44
+ }
45
+ };
46
+ const resetField = () => {
47
+ for (const clearFun of clearList.value) {
48
+ clearFun();
49
+ }
50
+ for (const key in props.model) {
51
+ if (Object.prototype.hasOwnProperty.call(props.model, key)) {
52
+ props.model[key] = staticModel[key];
53
+ }
54
+ }
55
+ };
56
+ __expose({
57
+ validate,
58
+ validateField,
59
+ resetField
60
+ });
61
+ provide("_ParentRules_", props.rule);
62
+ provide("_ParentModels_", readonly(toRef(props, "model")));
63
+ provide("_ParentLineStatus_", toRef(props, "inline"));
64
+ provide("_formRuleCheck_", (item, checkFunction) => {
65
+ ruleCheck.set(item, checkFunction);
66
+ });
67
+ provide("_validateClear_", (i) => {
68
+ clearList.value.push(i);
69
+ });
70
+ return (_ctx, _cache) => {
71
+ return openBlock(), createElementBlock("form", null, [
72
+ renderSlot(_ctx.$slots, "default")
73
+ ]);
74
+ };
75
+ }
76
+ });
77
+ export {
78
+ _sfc_main as default
79
+ };
@@ -0,0 +1,136 @@
1
+ import { defineComponent, inject, ref, computed, provide, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, toDisplayString, renderSlot, createVNode, Transition, withCtx, createCommentVNode } from "vue";
2
+ const _hoisted_1 = { class: "relative flex-1 items-center h-full leading-8 flex" };
3
+ const _hoisted_2 = {
4
+ key: 0,
5
+ class: "absolute -bottom-5 left-0 text-xs text-red-600"
6
+ };
7
+ const _sfc_main = /* @__PURE__ */ defineComponent({
8
+ __name: "formlabel",
9
+ props: {
10
+ label: {},
11
+ prop: {},
12
+ inline: { type: Boolean, default: void 0 },
13
+ width: { default: 70 }
14
+ },
15
+ setup(__props, { expose: __expose }) {
16
+ const props = __props;
17
+ const Rules = inject("_ParentRules_", {});
18
+ const Model = inject("_ParentModels_", ref());
19
+ const sendCheck = inject("_formRuleCheck_", () => null);
20
+ const sendClear = inject("_validateClear_", () => null);
21
+ const parentLineStatus = inject("_ParentLineStatus_", ref());
22
+ const getThisRule = computed(() => {
23
+ if (!props.prop) {
24
+ return [];
25
+ }
26
+ return Rules[props.prop] || [];
27
+ });
28
+ const isInline = computed(() => {
29
+ if (props.inline !== void 0) {
30
+ return props.inline;
31
+ } else {
32
+ return parentLineStatus.value;
33
+ }
34
+ });
35
+ const checkPropHandle = async (callBack, eventName) => {
36
+ if (!props.prop)
37
+ return;
38
+ const setErrHandle = (errword) => {
39
+ if (errword)
40
+ tip.value = errword;
41
+ showTip.value = true;
42
+ callBack && callBack(false);
43
+ };
44
+ const aimdata = Model.value[props.prop];
45
+ const filterRule = getThisRule.value.filter(
46
+ (rule) => !eventName || rule.trigger === eventName
47
+ );
48
+ let i = 0;
49
+ for (; i < filterRule.length; i++) {
50
+ const { type, min, max, message, validator } = filterRule[i];
51
+ tip.value = message || "";
52
+ if (min || max) {
53
+ const toNum = Number(aimdata);
54
+ if (isNaN(toNum)) {
55
+ setErrHandle("请输入数字");
56
+ break;
57
+ }
58
+ if (min && toNum < min || max && toNum > max) {
59
+ setErrHandle();
60
+ break;
61
+ }
62
+ }
63
+ if (type) {
64
+ if (!validateType(aimdata, type)) {
65
+ setErrHandle();
66
+ break;
67
+ }
68
+ }
69
+ if (validator) {
70
+ const result = await FunctionToPromise(validator, aimdata);
71
+ if (result !== null) {
72
+ setErrHandle();
73
+ break;
74
+ }
75
+ }
76
+ if (aimdata === null || aimdata === "" || aimdata === void 0) {
77
+ setErrHandle();
78
+ break;
79
+ }
80
+ }
81
+ if (i === getThisRule.value.length) {
82
+ showTip.value = false;
83
+ tip.value = "";
84
+ callBack && callBack(true);
85
+ }
86
+ };
87
+ const validateType = (value, type) => {
88
+ if (type === "array")
89
+ return Array.isArray(value);
90
+ return typeof value === type;
91
+ };
92
+ const tip = ref("");
93
+ const showTip = ref(false);
94
+ const resetField = () => {
95
+ tip.value = "";
96
+ showTip.value = false;
97
+ };
98
+ const FunctionToPromise = (callBack, receiveData) => {
99
+ return new Promise((resolve) => {
100
+ callBack(receiveData, (result) => {
101
+ resolve(result);
102
+ });
103
+ });
104
+ };
105
+ sendCheck(props.prop, checkPropHandle);
106
+ sendClear(resetField);
107
+ provide("inputHandle", () => checkPropHandle(void 0, "input"));
108
+ provide("blurHandle", () => checkPropHandle(void 0, "blur"));
109
+ provide("changeHandle", () => checkPropHandle(void 0, "change"));
110
+ __expose({
111
+ validateLabel: checkPropHandle
112
+ });
113
+ return (_ctx, _cache) => {
114
+ return openBlock(), createElementBlock("div", {
115
+ class: normalizeClass(["mb-5", { "inline-flex mr-5": isInline.value, "flex flex-col": !isInline.value }])
116
+ }, [
117
+ createElementVNode("div", {
118
+ class: "text-sm flex items-center",
119
+ style: normalizeStyle({ width: `${_ctx.width}px` })
120
+ }, toDisplayString(_ctx.label), 5),
121
+ createElementVNode("div", _hoisted_1, [
122
+ renderSlot(_ctx.$slots, "default"),
123
+ createVNode(Transition, { name: "opecity" }, {
124
+ default: withCtx(() => [
125
+ showTip.value ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(tip.value), 1)) : createCommentVNode("", true)
126
+ ]),
127
+ _: 1
128
+ })
129
+ ])
130
+ ], 2);
131
+ };
132
+ }
133
+ });
134
+ export {
135
+ _sfc_main as default
136
+ };
@@ -0,0 +1,300 @@
1
+ import { openBlock, createElementBlock, createElementVNode, defineComponent, ref, watch, Fragment, createVNode, createCommentVNode, renderSlot, createBlock, Teleport, Transition, withCtx, withDirectives, withModifiers, normalizeStyle, normalizeClass, unref } from "vue";
2
+ import { _ as _export_sfc, t as throttle } from "./index-b4e420ce.js";
3
+ import { d as delIcon } from "./delete-e898f83c.js";
4
+ const _sfc_main$3 = {};
5
+ const _hoisted_1$3 = {
6
+ viewBox: "64 64 896 896",
7
+ focusable: "false",
8
+ "data-icon": "eye",
9
+ width: "1em",
10
+ height: "1em",
11
+ fill: "currentColor",
12
+ "aria-hidden": "true"
13
+ };
14
+ function _sfc_render$2(_ctx, _cache) {
15
+ return openBlock(), createElementBlock("svg", _hoisted_1$3, _cache[0] || (_cache[0] = [
16
+ createElementVNode("path", { d: "M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" }, null, -1)
17
+ ]));
18
+ }
19
+ const EyeIcon = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2]]);
20
+ const _sfc_main$2 = {};
21
+ const _hoisted_1$2 = {
22
+ viewBox: "64 64 896 896",
23
+ focusable: "false",
24
+ width: "1em",
25
+ height: "1em",
26
+ fill: "currentColor",
27
+ "aria-hidden": "true"
28
+ };
29
+ function _sfc_render$1(_ctx, _cache) {
30
+ return openBlock(), createElementBlock("svg", _hoisted_1$2, _cache[0] || (_cache[0] = [
31
+ createElementVNode("path", { d: "M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z" }, null, -1),
32
+ createElementVNode("path", { d: "M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z" }, null, -1)
33
+ ]));
34
+ }
35
+ const turnLeftIcon = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1]]);
36
+ const _sfc_main$1 = {};
37
+ const _hoisted_1$1 = {
38
+ viewBox: "64 64 896 896",
39
+ width: "1em",
40
+ height: "1em",
41
+ fill: "currentColor",
42
+ "aria-hidden": "true"
43
+ };
44
+ function _sfc_render(_ctx, _cache) {
45
+ return openBlock(), createElementBlock("svg", _hoisted_1$1, _cache[0] || (_cache[0] = [
46
+ createElementVNode("path", { d: "M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z" }, null, -1),
47
+ createElementVNode("path", { d: "M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z" }, null, -1)
48
+ ]));
49
+ }
50
+ const turnRightIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render]]);
51
+ const DEFAULT_THROTTLE_WAIT = 60;
52
+ const createDraggableDirective = (options) => {
53
+ const config = {
54
+ throttleWait: DEFAULT_THROTTLE_WAIT,
55
+ resetOnEnd: false,
56
+ onDrag: () => {
57
+ },
58
+ // default implementation
59
+ ...options
60
+ };
61
+ const bindEvents = (el, binding) => {
62
+ if (el.__draggable_handlers__)
63
+ return;
64
+ let startX = 0;
65
+ let startY = 0;
66
+ let initialX = 0;
67
+ let initialY = 0;
68
+ const handleMove = throttle((e) => {
69
+ e.preventDefault();
70
+ const deltaX = e.pageX - startX;
71
+ const deltaY = e.pageY - startY;
72
+ config.onDrag({
73
+ x: deltaX + initialX,
74
+ y: deltaY + initialY
75
+ });
76
+ }, config.throttleWait);
77
+ const handleDown = (e) => {
78
+ var _a;
79
+ e.preventDefault();
80
+ const rect = el.getBoundingClientRect();
81
+ initialX = rect.left + window.scrollX;
82
+ initialY = rect.top + window.scrollY;
83
+ startX = e.pageX;
84
+ startY = e.pageY;
85
+ (_a = config.onDragStart) == null ? void 0 : _a.call(config, { x: initialX, y: initialY });
86
+ window.addEventListener("mousemove", handleMove);
87
+ window.addEventListener("mouseup", handleUp);
88
+ };
89
+ const handleUp = () => {
90
+ var _a;
91
+ window.removeEventListener("mousemove", handleMove);
92
+ window.removeEventListener("mouseup", handleUp);
93
+ if (config.resetOnEnd) {
94
+ config.onDrag({ x: initialX, y: initialY });
95
+ }
96
+ (_a = config.onDragEnd) == null ? void 0 : _a.call(config, { x: initialX, y: initialY });
97
+ };
98
+ el.__draggable_handlers__ = {
99
+ move: handleMove,
100
+ up: handleUp
101
+ };
102
+ el.addEventListener("mousedown", handleDown);
103
+ };
104
+ const unbindEvents = (el) => {
105
+ if (el.__draggable_handlers__) {
106
+ window.removeEventListener("mousemove", el.__draggable_handlers__.move);
107
+ window.removeEventListener("mouseup", el.__draggable_handlers__.up);
108
+ delete el.__draggable_handlers__;
109
+ }
110
+ };
111
+ return {
112
+ mounted(el, binding) {
113
+ bindEvents(el);
114
+ },
115
+ beforeUnmount(el) {
116
+ unbindEvents(el);
117
+ }
118
+ };
119
+ };
120
+ const createWheelDirective = (options) => {
121
+ const config = {
122
+ onWheel: () => {
123
+ },
124
+ ...options
125
+ };
126
+ const bindEvents = (el, binding) => {
127
+ const wheelHandler = (e) => {
128
+ e.preventDefault();
129
+ config.onWheel(e);
130
+ };
131
+ el._wheel_handlers_ = {
132
+ wheel: wheelHandler
133
+ };
134
+ el.addEventListener("wheel", wheelHandler);
135
+ };
136
+ const unbindEvents = (el) => {
137
+ if (el._wheel_handlers_) {
138
+ el.removeEventListener("wheel", el._wheel_handlers_.wheel);
139
+ delete el._wheel_handlers_;
140
+ }
141
+ };
142
+ return {
143
+ mounted(el, binding) {
144
+ bindEvents(el);
145
+ },
146
+ beforeUnmount(el) {
147
+ unbindEvents(el);
148
+ }
149
+ };
150
+ };
151
+ const _hoisted_1 = { class: "relative inline-block h-full w-full" };
152
+ const _hoisted_2 = ["src"];
153
+ const _hoisted_3 = { key: 0 };
154
+ const _hoisted_4 = { class: "pointer-events-none fixed top-0 right-0 left-0 bottom-0 z-1000 text-center" };
155
+ const _hoisted_5 = { class: "pointer-events-auto absolute top-0 left-0 z-10 flex w-full items-center bg-black bg-opacity-10" };
156
+ const _hoisted_6 = ["src"];
157
+ const _sfc_main = /* @__PURE__ */ defineComponent({
158
+ __name: "image",
159
+ props: {
160
+ src: {},
161
+ width: {},
162
+ preview: { type: Boolean, default: true }
163
+ },
164
+ emits: ["openPreview", "closePreview"],
165
+ setup(__props, { emit: __emit }) {
166
+ const draggableConfig = {
167
+ throttleWait: 16,
168
+ onDrag: (pos) => {
169
+ transX.value = pos.x;
170
+ transY.value = pos.y;
171
+ ImgIsMoving.value = true;
172
+ },
173
+ onDragEnd: () => {
174
+ ImgIsMoving.value = false;
175
+ }
176
+ };
177
+ const wheelConfig = {
178
+ onWheel: (e) => {
179
+ if (e.deltaY > 0) {
180
+ scaleNumber.value = scaleNumber.value > 1 ? scaleNumber.value - 1 : 1;
181
+ } else {
182
+ scaleNumber.value += 1;
183
+ }
184
+ }
185
+ };
186
+ const vMove = createDraggableDirective(draggableConfig);
187
+ const vWheel = createWheelDirective(wheelConfig);
188
+ const emit = __emit;
189
+ const ImgIsMoving = ref(false);
190
+ const showBig = ref(false);
191
+ watch(showBig, (val) => {
192
+ if (val === true) {
193
+ document.body.classList.add("overflow-hidden");
194
+ } else {
195
+ document.body.classList.remove("overflow-hidden");
196
+ }
197
+ });
198
+ const showPreview = () => {
199
+ emit("openPreview");
200
+ showBig.value = true;
201
+ };
202
+ const hidenPreview = () => {
203
+ emit("closePreview");
204
+ showBig.value = false;
205
+ scaleNumber.value = 1;
206
+ transX.value = 0;
207
+ transY.value = 0;
208
+ rotateNumber.value = 0;
209
+ };
210
+ const transX = ref(0);
211
+ const transY = ref(0);
212
+ const scaleNumber = ref(1);
213
+ const rotateNumber = ref(0);
214
+ const leftRotate = () => {
215
+ rotateNumber.value -= 90;
216
+ };
217
+ const rightRotate = () => {
218
+ rotateNumber.value += 90;
219
+ };
220
+ return (_ctx, _cache) => {
221
+ return openBlock(), createElementBlock(Fragment, null, [
222
+ createElementVNode("div", _hoisted_1, [
223
+ createElementVNode("img", {
224
+ class: "w-full align-middle",
225
+ src: _ctx.src
226
+ }, null, 8, _hoisted_2),
227
+ _ctx.preview ? (openBlock(), createElementBlock("div", {
228
+ key: 0,
229
+ onClick: showPreview,
230
+ class: "absolute top-0 right-0 left-0 bottom-0 flex cursor-pointer items-center justify-center bg-black bg-opacity-50 text-white opacity-0 transition-opacity hover:opacity-100"
231
+ }, [
232
+ createVNode(EyeIcon)
233
+ ])) : createCommentVNode("", true),
234
+ renderSlot(_ctx.$slots, "default")
235
+ ]),
236
+ (openBlock(), createBlock(Teleport, { to: "body" }, [
237
+ createVNode(Transition, { name: "opacity" }, {
238
+ default: withCtx(() => [
239
+ showBig.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
240
+ createElementVNode("div", {
241
+ class: "pointer-events-auto fixed top-0 right-0 left-0 bottom-0 z-1000 bg-black bg-opacity-30",
242
+ key: "1",
243
+ onClick: hidenPreview
244
+ }),
245
+ withDirectives((openBlock(), createElementBlock("div", _hoisted_4, [
246
+ createElementVNode("div", _hoisted_5, [
247
+ createElementVNode("button", {
248
+ type: "button",
249
+ class: "flex h-10 w-10 items-center justify-center text-white",
250
+ onClick: hidenPreview
251
+ }, [
252
+ createVNode(delIcon)
253
+ ]),
254
+ createElementVNode("button", {
255
+ type: "button",
256
+ class: "flex h-10 w-10 items-center justify-center text-white",
257
+ onClick: withModifiers(leftRotate, ["stop"])
258
+ }, [
259
+ createVNode(turnLeftIcon)
260
+ ]),
261
+ createElementVNode("button", {
262
+ type: "button",
263
+ class: "flex h-10 w-10 items-center justify-center text-white",
264
+ onClick: withModifiers(rightRotate, ["stop"])
265
+ }, [
266
+ createVNode(turnRightIcon)
267
+ ])
268
+ ]),
269
+ withDirectives((openBlock(), createElementBlock("div", {
270
+ class: "absolute top-0 right-0 left-0 bottom-0 transition-transform before:inline-block before:w-[1px] before:h-1/2 before:-mr-px before:content-['']",
271
+ style: normalizeStyle({ transform: `translate3d(${transX.value}px, ${transY.value}px, 0px)` })
272
+ }, [
273
+ createElementVNode("img", {
274
+ src: _ctx.src,
275
+ class: normalizeClass([{
276
+ "cursor-grab": !ImgIsMoving.value,
277
+ "cursor-grabbing": ImgIsMoving.value
278
+ }, "pointer-events-auto inline max-h-full max-w-full select-none transition-transform duration-300"]),
279
+ style: normalizeStyle({
280
+ transform: `scale3d(${scaleNumber.value}, ${scaleNumber.value}, 1) rotate(${rotateNumber.value}deg)`
281
+ })
282
+ }, null, 14, _hoisted_6)
283
+ ], 4)), [
284
+ [unref(vMove)]
285
+ ])
286
+ ])), [
287
+ [unref(vWheel)]
288
+ ])
289
+ ])) : createCommentVNode("", true)
290
+ ]),
291
+ _: 1
292
+ })
293
+ ]))
294
+ ], 64);
295
+ };
296
+ }
297
+ });
298
+ export {
299
+ _sfc_main as default
300
+ };