@orchidui/core 0.4.0 → 0.6.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 (155) hide show
  1. package/dist/DataDisplay/CustomerCard/OcCustomerCard.js +1 -1
  2. package/dist/DataDisplay/FloatContent/OcFloatContent.js +1 -1
  3. package/dist/DataDisplay/InfoCard/OcInfoCard.js +1 -1
  4. package/dist/DataDisplay/ListDetail/OcListDetail.js +1 -1
  5. package/dist/DataDisplay/ListItem/OcListItem.js +3 -3
  6. package/dist/DataDisplay/OnboardingListItem/OcOnboardingListItem.js +1 -1
  7. package/dist/DataDisplay/Overview/OcOverview.js +4 -5
  8. package/dist/DataDisplay/Pagination/OcPagination.js +1 -1
  9. package/dist/DataDisplay/Table/OcTable.js +4 -4
  10. package/dist/DataDisplay/TransferSummary/OcTransferSummary.js +1 -1
  11. package/dist/DataTable/utils/editColumnsUtils.js +29 -0
  12. package/dist/Disclosure/Accordion/OcAccordion.js +1 -1
  13. package/dist/Disclosure/OnboardingAccordion/OnboardingAccordion.js +1 -1
  14. package/dist/Disclosure/Steps/OcSteps.js +3 -3
  15. package/dist/Disclosure/Tabs/Tabs.js +1 -1
  16. package/dist/Disclosure/Variants/OcVariants.js +1 -1
  17. package/dist/Elements/AdditionalContent/OcAdditionalContent.js +2 -2
  18. package/dist/Elements/AuthenticationOption/AuthenticationOption.js +2 -2
  19. package/dist/Elements/Box/OcBox.js +2 -2
  20. package/dist/Elements/EmptyPage/OcEmptyPage.js +1 -1
  21. package/dist/Elements/FeatureOverviewCard/OcFeatureOverviewCard.js +1 -1
  22. package/dist/Elements/Header/OcHeader.js +3 -3
  23. package/dist/Elements/PageTitle/OcPageTitle.js +3 -4
  24. package/dist/Elements/SandboxBanner/OcSandboxBanner.js +1 -1
  25. package/dist/Elements/Sidebar/OcSidebar.js +1 -1
  26. package/dist/Elements/Skeleton/OcSkeleton.js +1 -1
  27. package/dist/Elements/SubSidebar/OcSubSidebar.js +1 -1
  28. package/dist/Elements/VerificationOption/OcVerificationOption.js +2 -2
  29. package/dist/Feedback/Banner/OcBanner.js +1 -1
  30. package/dist/Feedback/Chip/OcChip.js +2 -2
  31. package/dist/Feedback/ShareIcon/OcShareIcon.js +2 -2
  32. package/dist/Feedback/Snackbar/OcSnackbar.js +1 -1
  33. package/dist/Form/BaseInput/OcBaseInput.js +1 -1
  34. package/dist/Form/Button/OcButton.js +1 -1
  35. package/dist/Form/Calendar/OcCalendar.js +2 -2
  36. package/dist/Form/CardInput/OcCardInput.js +1 -1
  37. package/dist/Form/Checkbox/OcCheckbox.js +1 -1
  38. package/dist/Form/CheckboxesGroup/OcCheckboxesGroup.js +1 -1
  39. package/dist/Form/Criteria/OcCriteria.js +1 -1
  40. package/dist/Form/Cropper/OcCropper.js +1 -1
  41. package/dist/Form/DatePicker/OcDatePicker.js +1 -1
  42. package/dist/Form/EmojiPicker/OcEmojiPicker.js +2 -2
  43. package/dist/Form/Input/OcInput.js +3 -4
  44. package/dist/Form/LinkInput/OcLinkInput.js +1 -1
  45. package/dist/Form/MultipleUploadFile/OcMultipleUploadFile.js +1 -1
  46. package/dist/Form/NumberInput/OcNumberInput.js +1 -1
  47. package/dist/Form/PhoneInput/OcPhoneInput.js +1 -1
  48. package/dist/Form/Radio/OcRadio.js +1 -1
  49. package/dist/Form/RadioGroup/OcRadioGroup.js +1 -1
  50. package/dist/Form/RangeInput/OcRangeInput.js +1 -1
  51. package/dist/Form/SectionItem/OcSectionItem.js +2 -2
  52. package/dist/Form/Select/OcSelect.js +4 -5
  53. package/dist/Form/SelectOptions/OcSelectOptions.js +2 -2
  54. package/dist/Form/SingleFileUpload/OcSingleFileUpload.js +1 -1
  55. package/dist/Form/Slider/OcSlider.js +1 -1
  56. package/dist/Form/TextArea/OcTextArea.js +2 -2
  57. package/dist/Form/Toggle/OcToggle.js +1 -1
  58. package/dist/Form/index.js +24 -47
  59. package/dist/FormBuilder/OcFormBuilder.js +1 -1
  60. package/dist/{OcComplexCalendar-x-_kg9Yk.js → OcComplexCalendar-Boa7mNFU.js} +18 -25
  61. package/dist/OcComplexDatePicker-BydI4VSR.js +93 -0
  62. package/dist/{OcCropper-31Y_S1Ne.js → OcCropper-7E2i6ayU.js} +38 -49
  63. package/dist/OcDataTable-CsCGrRx7.js +561 -0
  64. package/dist/{OcDraggable-BjhGJmpM.js → OcDraggable-CA_BCbpl.js} +7 -8
  65. package/dist/{Draggable.js → OcDraggableList-BUu5SgoA.js} +40 -50
  66. package/dist/{OcEmojiPicker-BXm-_OGK.js → OcEmojiPicker-DYYK7OB3.js} +28 -38
  67. package/dist/OcFilterForm-7ehuJUMp.js +83 -0
  68. package/dist/OcFilterSearch-B4AZsLBn.js +69 -0
  69. package/dist/OcFilterSearchFor-DfwJG-5N.js +67 -0
  70. package/dist/OcModalCropper-Z4jlnFc5.js +46 -0
  71. package/dist/{OcSkeleton-BdPTmGh0.js → OcSkeleton-CvdpGSQR.js} +2 -3
  72. package/dist/{OcSlider-Bsi-ckbP.js → OcSlider-DW9x8eas.js} +10 -11
  73. package/dist/{OcTimePicker-B61MCi0D.js → OcTimePicker-D9fPU8_m.js} +22 -33
  74. package/dist/{OcTimePopup-zQFKCZLk.js → OcTimePopup-CXGhaOev.js} +2 -3
  75. package/dist/{OcToggle-C0wTjM_Y.js → OcToggle-bIJaLDMZ.js} +5 -6
  76. package/dist/Overlay/ConfirmationModal/OcConfirmationModal.js +1 -1
  77. package/dist/Overlay/CopyTooltip/OcCopyTooltip.js +1 -1
  78. package/dist/Overlay/Dropdown/OcDropdown.js +3 -4
  79. package/dist/Overlay/Modal/OcModal.js +3 -4
  80. package/dist/Overlay/SupportMenu/OcSupportMenu.js +1 -1
  81. package/dist/Overlay/Tooltip/OcTooltip.js +2 -2
  82. package/dist/Overlay/Whitelist/OcWhiteList.js +2 -2
  83. package/dist/SubPlanCard-DHj4RHJZ.js +81 -0
  84. package/dist/ThumbnailSection-CJBS0QXp.js +41 -0
  85. package/dist/ThumbnailTheme-hey6se0g.js +119 -0
  86. package/dist/index-DyVteXE3.js +10028 -0
  87. package/dist/index.js +129 -175
  88. package/dist/style.css +1 -1
  89. package/package.json +1 -16
  90. package/dist/Calendar.js +0 -103
  91. package/dist/Cropper.js +0 -6
  92. package/dist/DatePicker-D3w435Ml.js +0 -263
  93. package/dist/EmojiPicker.js +0 -4
  94. package/dist/Form/TimePicker/OcTimePicker.js +0 -6
  95. package/dist/OcAccordion-DdkNsXvN.js +0 -101
  96. package/dist/OcAccountSetup-BXDjf48o.js +0 -324
  97. package/dist/OcAdditionalContent-BMSysCXu.js +0 -612
  98. package/dist/OcAuthenticationOption.vue_vue_type_script_setup_true_lang-w5Y0ymGN.js +0 -43
  99. package/dist/OcBanner-Cg2WJV6e.js +0 -108
  100. package/dist/OcBox.vue_vue_type_script_setup_true_lang-aB397QRg.js +0 -43
  101. package/dist/OcCardInput-BFE4Xu-S.js +0 -75
  102. package/dist/OcCheckboxesGroup-CLbquUO2.js +0 -94
  103. package/dist/OcChip-B1hm2Qni.js +0 -144
  104. package/dist/OcComplexCalendar.vue_vue_type_style_index_0_lang-CIQPD-6N.js +0 -1006
  105. package/dist/OcConfirmationModal-BfCrRV9r.js +0 -179
  106. package/dist/OcCopyTooltip.vue_vue_type_script_setup_true_lang-S2RAfV_g.js +0 -65
  107. package/dist/OcCriteria-CpIohheZ.js +0 -42
  108. package/dist/OcCustomerCard-DbDOBO03.js +0 -160
  109. package/dist/OcDropdownItem-DAElmzEu.js +0 -57
  110. package/dist/OcEmptyPage-CTwgMzRp.js +0 -155
  111. package/dist/OcExpadingTable.vue_vue_type_script_setup_true_lang-B4HOMDBK.js +0 -815
  112. package/dist/OcFeatureOverviewCard-RVyrWLVW.js +0 -71
  113. package/dist/OcFloatContent-BIKQOxSw.js +0 -142
  114. package/dist/OcFormBuilder-CRXWtt8I.js +0 -177
  115. package/dist/OcGroupOptions-ChGJvTXl.js +0 -16
  116. package/dist/OcInfoCard-DpYUZOMZ.js +0 -81
  117. package/dist/OcInput-tcRxG3Y2.js +0 -227
  118. package/dist/OcInputOption-CncASfNt.js +0 -160
  119. package/dist/OcLinkInput-C2ixk-gk.js +0 -143
  120. package/dist/OcListDetail-6XeME6ko.js +0 -76
  121. package/dist/OcListUrl.vue_vue_type_script_setup_true_lang-7zZdFM8K.js +0 -750
  122. package/dist/OcModal-DdD5VFEN.js +0 -187
  123. package/dist/OcModalCropper-D2OI2iun.js +0 -56
  124. package/dist/OcModalPage-BLVa-kcB.js +0 -86
  125. package/dist/OcMultipleUploadFile-B8Wl9Fuq.js +0 -446
  126. package/dist/OcNumberInput.vue_vue_type_script_setup_true_lang-C4EXUIUe.js +0 -90
  127. package/dist/OcOnboardingListItem.vue_vue_type_script_setup_true_lang-Cr80xmnz.js +0 -81
  128. package/dist/OcOption-DK2FBGq7.js +0 -485
  129. package/dist/OcOverviewIcon-D702Ujka.js +0 -55
  130. package/dist/OcOverviewItem-DNr5tWnt.js +0 -186
  131. package/dist/OcPageTitleRight-DMtJ1qmZ.js +0 -243
  132. package/dist/OcPaginationNumber-IKPorX26.js +0 -172
  133. package/dist/OcPaymentTab-Cna1IAhO.js +0 -170
  134. package/dist/OcPhoneInput-AC6BgQhN.js +0 -432
  135. package/dist/OcPrimaryActions-D5IprKsQ.js +0 -222
  136. package/dist/OcRadio-CRYfNwV9.js +0 -107
  137. package/dist/OcRadioGroup-DgfdWJos.js +0 -76
  138. package/dist/OcRangeInput-C-hoHFhr.js +0 -103
  139. package/dist/OcSandboxBanner.vue_vue_type_script_setup_true_lang-BD0k_8xa.js +0 -37
  140. package/dist/OcSectionItem-BFgxO3se.js +0 -84
  141. package/dist/OcSelectOptions-BQlG_EUA.js +0 -148
  142. package/dist/OcShareIcon-BB-NPq0r.js +0 -53
  143. package/dist/OcSingleFileUpload-B8-e1H5t.js +0 -464
  144. package/dist/OcSnackbar-CKxY1-ej.js +0 -196
  145. package/dist/OcSteps.vue_vue_type_script_setup_true_lang-CXGy8ma_.js +0 -87
  146. package/dist/OcSubSidebar.vue_vue_type_script_setup_true_lang-CNxgU07N.js +0 -60
  147. package/dist/OcSupportMenu.vue_vue_type_script_setup_true_lang-DrjZsWti.js +0 -114
  148. package/dist/OcTabToSelect-BHAz1Niv.js +0 -183
  149. package/dist/OcTextArea-BpV1Bnj_.js +0 -78
  150. package/dist/OcTransferSummary-Bk2GXhrT.js +0 -67
  151. package/dist/OcVariant.vue_vue_type_script_setup_true_lang-CY_82DLc.js +0 -99
  152. package/dist/OcVerificationOption.vue_vue_type_script_setup_true_lang-ChqvNoDe.js +0 -59
  153. package/dist/OcWhiteList.vue_vue_type_script_setup_true_lang-DI9pYU3w.js +0 -64
  154. package/dist/OnboardingAccordion.vue_vue_type_script_setup_true_lang-B0Z7ETmj.js +0 -113
  155. package/dist/StoreDesign.js +0 -240
@@ -1,148 +0,0 @@
1
- import { computed as h, openBlock as r, createBlock as m, unref as n, withCtx as k, createElementVNode as c, normalizeClass as l, createElementBlock as i, Fragment as g, renderList as v, createVNode as p, renderSlot as V, createCommentVNode as u, toDisplayString as x } from "vue";
2
- import "dayjs";
3
- import { _ as w } from "./OcComplexCalendar.vue_vue_type_style_index_0_lang-CIQPD-6N.js";
4
- import { _ as b } from "./OcIcon-CJgBICxh.js";
5
- /* empty css */
6
- import "libphonenumber-js";
7
- /* empty css */
8
- import "v-calendar";
9
- /* empty css */
10
- import "./Cropper.js";
11
- import "vue-draggable-next";
12
- import "@popperjs/core";
13
- const C = {
14
- key: 0,
15
- class: "flex gap-3 border border-oc-gray-200 p-3 rounded cursor-pointer"
16
- }, B = ["onClick"], T = ["src"], O = {
17
- key: 0,
18
- class: "flex text-sm text-oc-text-400 mt-2"
19
- }, L = {
20
- __name: "OcSelectOptions",
21
- props: {
22
- variant: {
23
- type: String,
24
- default: "grid"
25
- },
26
- optionType: {
27
- type: String,
28
- default: "text"
29
- // text, icon, image
30
- },
31
- label: String,
32
- hint: String,
33
- errorMessage: String,
34
- placeholder: String,
35
- isDisabled: Boolean,
36
- borderless: Boolean,
37
- options: Array,
38
- modelValue: [Array, String, Number],
39
- isRequired: {
40
- type: Boolean,
41
- default: !1
42
- },
43
- labelIcon: {
44
- type: String,
45
- default: ""
46
- },
47
- tooltipText: {
48
- type: String,
49
- default: ""
50
- },
51
- tooltipOptions: {
52
- type: Object,
53
- default: () => ({})
54
- },
55
- class: String
56
- },
57
- emits: {
58
- "update:modelValue": []
59
- },
60
- setup(e, { emit: y }) {
61
- const d = e, S = y, s = (a) => {
62
- S("update:modelValue", a);
63
- }, o = h(() => d.variant === "grid");
64
- return (a, $) => (r(), m(n(w), {
65
- label: e.label,
66
- hint: e.hint,
67
- "error-message": e.errorMessage,
68
- "is-required": e.isRequired,
69
- "label-icon": e.labelIcon,
70
- "tooltip-text": e.tooltipText,
71
- "tooltip-options": e.tooltipOptions
72
- }, {
73
- default: k(() => [
74
- c("div", {
75
- class: l(["gap-3", [
76
- d.class,
77
- o.value ? "grid-cols-3" : e.variant === "list2" ? "grid-cols-2" : "",
78
- {
79
- "w-full grid": e.optionType !== "icon",
80
- "flex flex-row ": e.optionType === "icon"
81
- }
82
- ]])
83
- }, [
84
- e.optionType === "icon" ? (r(), i("div", C, [
85
- (r(!0), i(g, null, v(e.options, (t) => (r(), i("div", {
86
- key: t.value,
87
- class: l(["p-1", {
88
- "bg-oc-gray-200 rounded-sm": t.value.toString() === e.modelValue.toString()
89
- }])
90
- }, [
91
- p(n(b), {
92
- name: t.icon_name,
93
- onClick: (f) => s(t.value)
94
- }, null, 8, ["name", "onClick"])
95
- ], 2))), 128))
96
- ])) : (r(!0), i(g, { key: 1 }, v(e.options, (t) => (r(), i("div", {
97
- key: t.value,
98
- class: l(["cursor-pointer group items-start", {
99
- "flex border border-oc-gray-200 p-3 rounded hover:shadow": !o.value,
100
- "border-2 border-oc-primary": !o.value && t.value.toString() === e.modelValue.toString(),
101
- "!border-0 hover:bg-oc-accent-1-50 flex": e.borderless
102
- }]),
103
- onClick: (f) => s(t.value)
104
- }, [
105
- V(a.$slots, "option", {
106
- option: t,
107
- selected: t.value.toString() === e.modelValue.toString()
108
- }, () => [
109
- t.preview ? (r(), i("img", {
110
- key: 0,
111
- class: l(["group-hover:shadow rounded", {
112
- "border-2 border-oc-primary": o.value && t.value.toString() === e.modelValue.toString(),
113
- "border border-oc-gray-200": o.value && t.value.toString() !== e.modelValue.toString() || !o.value,
114
- "w-full": o.value,
115
- "w-[50px]": !o.value
116
- }]),
117
- src: t.preview
118
- }, null, 10, T)) : u("", !0),
119
- c("div", {
120
- class: l(["mt-2", [o.value ? "text-center" : "px-3", e.borderless ? "flex-1" : ""]])
121
- }, [
122
- c("span", {
123
- class: l(["font-medium text-oc-text-400 group-hover:text-oc-text-500", {
124
- "text-sm ": o.value,
125
- "text-oc-text-400 group-hover:text-oc-text-500": o.value && t.value.toString() !== e.modelValue.toString(),
126
- "text-oc-text-500": o.value && t.value.toString() === e.modelValue.toString()
127
- }])
128
- }, x(t.label), 3),
129
- t.description ? (r(), i("div", O, x(t.description), 1)) : u("", !0)
130
- ], 2),
131
- e.borderless ? (r(), m(n(b), {
132
- key: 1,
133
- width: "16",
134
- height: "16",
135
- name: "check-2",
136
- class: l(["text-oc-primary", t.value.toString() === e.modelValue.toString() ? "opacity-100" : "opacity-0"])
137
- }, null, 8, ["class"])) : u("", !0)
138
- ])
139
- ], 10, B))), 128))
140
- ], 2)
141
- ]),
142
- _: 3
143
- }, 8, ["label", "hint", "error-message", "is-required", "label-icon", "tooltip-text", "tooltip-options"]));
144
- }
145
- };
146
- export {
147
- L as _
148
- };
@@ -1,53 +0,0 @@
1
- import { openBlock as i, createBlock as m, unref as e, normalizeProps as a, mergeProps as p, withCtx as r, createElementVNode as o, toDisplayString as n, createVNode as c, createElementBlock as l } from "vue";
2
- import "dayjs";
3
- import { T as d } from "./OcComplexCalendar.vue_vue_type_style_index_0_lang-CIQPD-6N.js";
4
- import { _ as s } from "./OcIcon-CJgBICxh.js";
5
- /* empty css */
6
- import "libphonenumber-js";
7
- /* empty css */
8
- import "v-calendar";
9
- /* empty css */
10
- import "./Cropper.js";
11
- import "vue-draggable-next";
12
- import "@popperjs/core";
13
- const x = { class: "rounded-full share-icon w-fit cursor-pointer text-oc-text-400 p-3 border border-gray-200" }, h = { class: "px-3 py-2 text-oc-text-400 text-sm font-medium" }, f = {
14
- key: 1,
15
- class: "px-3 share-icon border border-oc-gray-200 rounded-full w-fit py-[6px] flex items-center gap-x-2"
16
- }, u = { class: "text-sm" }, T = {
17
- __name: "OcShareIcon",
18
- props: {
19
- text: String,
20
- icon: String,
21
- isOnlyIcon: Boolean,
22
- tooltipOptions: {
23
- type: Object
24
- }
25
- },
26
- setup(t) {
27
- return (y, g) => t.isOnlyIcon ? (i(), m(e(d), a(p({ key: 0 }, t.tooltipOptions)), {
28
- popper: r(() => [
29
- o("div", h, n(t.text), 1)
30
- ]),
31
- default: r(() => [
32
- o("div", x, [
33
- c(e(s), {
34
- name: t.icon,
35
- width: "20",
36
- height: "20"
37
- }, null, 8, ["name"])
38
- ])
39
- ]),
40
- _: 1
41
- }, 16)) : (i(), l("div", f, [
42
- c(e(s), {
43
- name: t.icon,
44
- width: "20",
45
- height: "20"
46
- }, null, 8, ["name"]),
47
- o("span", u, n(t.text), 1)
48
- ]));
49
- }
50
- };
51
- export {
52
- T as _
53
- };
@@ -1,464 +0,0 @@
1
- import { defineComponent as ie, ref as f, openBlock as i, createElementBlock as m, normalizeClass as y, createElementVNode as o, createVNode as d, unref as a, createCommentVNode as V, withCtx as C, createBlock as $, Teleport as se, computed as W, onMounted as re, renderSlot as ue, Fragment as B, mergeProps as de, withModifiers as me, toDisplayString as O, normalizeStyle as ce } from "vue";
2
- import "dayjs";
3
- import { D as Y, _ as pe, B as j } from "./OcComplexCalendar.vue_vue_type_style_index_0_lang-CIQPD-6N.js";
4
- import { _ as g } from "./OcIcon-CJgBICxh.js";
5
- /* empty css */
6
- import { _ as X } from "./OcInput-tcRxG3Y2.js";
7
- import "libphonenumber-js";
8
- /* empty css */
9
- import "v-calendar";
10
- /* empty css */
11
- import { useUploadFileProgress as fe } from "./composables/uploadFileProgress.js";
12
- import { ModalCropper as Z } from "./Cropper.js";
13
- import "vue-draggable-next";
14
- import "@popperjs/core";
15
- const ge = { class: "flex gap-x-3" }, ve = {
16
- key: 0,
17
- class: "border rounded p-3 min-h-[140px] h-full"
18
- }, xe = ["accept"], be = { class: "py-2 flex flex-col" }, ye = ["src"], he = /* @__PURE__ */ ie({
19
- __name: "OcSingleOnlyImageUpload",
20
- props: {
21
- accept: {
22
- type: String,
23
- default: ""
24
- },
25
- uploadedImage: {
26
- type: Object,
27
- default: () => ({})
28
- },
29
- imageClasses: {
30
- type: String,
31
- default: ""
32
- },
33
- showUploadImageArea: Boolean
34
- },
35
- emits: ["change", "update:uploadedImage", "delete"],
36
- setup(l, { emit: F }) {
37
- const r = l, U = F, v = f(!1), c = f(!1), x = f(""), h = f(!1), D = (b) => {
38
- const t = r.uploadedImage;
39
- t.fileUrl = b, t.fileName = Date.now(), c.value = !1, x.value = "", U("update:uploadedImage", t);
40
- };
41
- return (b, t) => {
42
- var w, k;
43
- return i(), m("div", ge, [
44
- (w = l.uploadedImage) != null && w.fileUrl ? V("", !0) : (i(), m("label", {
45
- key: 0,
46
- class: y([{ "flex-1": l.showUploadImageArea }, "relative group overflow-hidden"])
47
- }, [
48
- l.showUploadImageArea ? (i(), m("div", ve, [
49
- o("div", {
50
- class: y(["w-full text-oc-text-300 text-sm h-full flex flex-col justify-center items-center transition-all border border-transparent border-dashed group-hover:border-oc-primary rounded-sm cursor-pointer", { "!border-oc-primary": h.value }])
51
- }, [
52
- d(a(g), {
53
- name: "upload",
54
- class: "text-oc-accent-1"
55
- }),
56
- t[9] || (t[9] = o("div", null, "Upload Image", -1))
57
- ], 2)
58
- ])) : (i(), m("div", {
59
- key: 1,
60
- class: y(["w-[100px] group-hover:bg-oc-primary-50 cursor-pointer bg-oc-accent-1-50 text-oc-accent-1 rounded aspect-square flex items-center justify-center", l.imageClasses])
61
- }, [
62
- d(a(g), { name: "plus" })
63
- ], 2)),
64
- o("input", {
65
- class: "w-full h-full absolute opacity-0 cursor-pointer top-0",
66
- type: "file",
67
- accept: l.accept || "image/png, image/jpeg",
68
- onChange: t[0] || (t[0] = (p) => b.$emit("change", p)),
69
- onDragover: t[1] || (t[1] = (p) => h.value = !0),
70
- onDragleave: t[2] || (t[2] = (p) => h.value = !1),
71
- onDrop: t[3] || (t[3] = (p) => h.value = !1)
72
- }, null, 40, xe)
73
- ], 2)),
74
- (k = l.uploadedImage) != null && k.fileUrl ? (i(), m("div", {
75
- key: 1,
76
- class: y(["w-[100px] group relative cursor-pointer aspect-square border rounded border-oc-accent-1-100", l.imageClasses])
77
- }, [
78
- d(a(Y), {
79
- modelValue: v.value,
80
- "onUpdate:modelValue": t[6] || (t[6] = (p) => v.value = p),
81
- placement: "bottom-end",
82
- class: "absolute top-2 right-2 z-[1010]"
83
- }, {
84
- menu: C(() => [
85
- o("div", be, [
86
- o("div", {
87
- class: "flex p-3 cursor-pointer items-center gap-x-3",
88
- onClick: t[4] || (t[4] = () => {
89
- x.value = l.uploadedImage.fileUrl, v.value = !1, c.value = !0;
90
- })
91
- }, [
92
- d(a(g), {
93
- width: "16",
94
- height: "16",
95
- name: "pencil"
96
- }),
97
- t[10] || (t[10] = o("span", null, "Edit Image", -1))
98
- ]),
99
- o("div", {
100
- class: "flex p-3 cursor-pointer items-center text-oc-error gap-x-3",
101
- onClick: t[5] || (t[5] = () => {
102
- b.$emit("delete"), v.value = !1;
103
- })
104
- }, [
105
- d(a(g), {
106
- width: "16",
107
- height: "16",
108
- name: "bin"
109
- }),
110
- t[11] || (t[11] = o("span", null, "Delete", -1))
111
- ])
112
- ])
113
- ]),
114
- default: C(() => [
115
- d(a(g), {
116
- name: "dots-vertical",
117
- class: "hidden group-hover:flex absolute right-0 cursor-pointer bg-black/[.45] rounded-full w-[32px] h-[32px] items-center justify-center text-oc-bg-light"
118
- })
119
- ]),
120
- _: 1
121
- }, 8, ["modelValue"]),
122
- o("img", {
123
- src: l.uploadedImage.fileUrl,
124
- alt: "uploaded-image",
125
- class: "object-contain h-full w-full"
126
- }, null, 8, ye)
127
- ], 2)) : V("", !0),
128
- (i(), $(se, { to: "body" }, [
129
- c.value ? (i(), $(a(Z), {
130
- key: 0,
131
- modelValue: c.value,
132
- "onUpdate:modelValue": t[7] || (t[7] = (p) => c.value = p),
133
- img: x.value,
134
- onClose: t[8] || (t[8] = () => {
135
- c.value = !1, x.value = "";
136
- }),
137
- onChangeImage: D
138
- }, null, 8, ["modelValue", "img"])) : V("", !0)
139
- ]))
140
- ]);
141
- };
142
- }
143
- }), we = ["accept"], ke = {
144
- key: 0,
145
- class: "py-2 flex flex-col items-center gap-y-4"
146
- }, Ve = { class: "flex items-baseline gap-x-3 w-full" }, Ue = { class: "text-sm flex-1 text-oc-text-400 pointer-events-none" }, Ce = ["accept"], De = {
147
- key: 0,
148
- class: "relative group w-fit rounded overflow-hidden"
149
- }, Ie = ["src"], $e = ["src"], Be = { class: "py-2 flex flex-col" }, Oe = { class: "flex flex-1 items-center gap-x-3 text-sm text-oc-text-400" }, Fe = { class: "flex flex-col w-7 h-7 items-center justify-center text-oc-text-300" }, Se = { class: "uppercase text-[8px] font-bold leading-none block" }, je = { class: "flex" }, Ee = { class: "text-sm text-oc-primary" }, Ne = { class: "rounded-full bg-oc-gray-100 w-[48px] h-2 overflow-hidden" }, Xe = {
150
- __name: "OcSingleFileUpload",
151
- props: {
152
- format: {
153
- type: String,
154
- default: "array"
155
- },
156
- modelValue: Object,
157
- isPreview: Boolean,
158
- isImageOnly: Boolean,
159
- showUploadImageArea: Boolean,
160
- /**
161
- * Maximum file size in MB
162
- */
163
- maxSize: Number,
164
- accept: String,
165
- validateAcceptFileType: Boolean,
166
- errorMessage: String,
167
- imageClasses: String,
168
- allowToEdit: {
169
- type: Boolean,
170
- default: !0
171
- },
172
- label: String,
173
- labelClass: String,
174
- hint: String,
175
- uploadButtonOptions: Object,
176
- /**
177
- * Variant of input (upload or url)
178
- */
179
- variant: {
180
- type: String,
181
- default: "upload",
182
- validator: (l) => ["upload", "url"].includes(l)
183
- },
184
- shouldTruncateFileName: Boolean,
185
- isButtonOnly: Boolean,
186
- isDisabled: Boolean,
187
- buttonUploadProps: {
188
- type: Object,
189
- default: () => ({
190
- label: "Upload"
191
- })
192
- }
193
- },
194
- emits: [
195
- "update:modelValue",
196
- "onRemoveFile",
197
- "onExceedMaxFileSize",
198
- "fileExist",
199
- "invalidFileType"
200
- ],
201
- setup(l, { emit: F }) {
202
- const r = l, U = F, v = f(), c = f(""), x = f(""), h = f(!0), D = f(!1), b = f(!1), t = f(!1), w = f(""), { currentFiles: k, onChangeFile: p, onDeleteFile: S } = fe(
203
- r.maxSize,
204
- U,
205
- r.accept,
206
- r.validateAcceptFileType
207
- ), _ = W(() => {
208
- var s;
209
- return URL.createObjectURL((s = k.value) == null ? void 0 : s[0].file);
210
- }), u = W(() => {
211
- var s;
212
- return (s = k.value) == null ? void 0 : s[0];
213
- });
214
- re(() => {
215
- if (r.modelValue && r.modelValue.current) {
216
- const s = [
217
- {
218
- current: r.modelValue.current,
219
- file: null,
220
- fileName: r.modelValue.current.caption ?? "",
221
- progress: 100,
222
- fileUrl: r.modelValue.current.path,
223
- totalSize: r.modelValue.current.file_size ?? 0,
224
- isLoaded: !0,
225
- extension: r.modelValue.current.extension ?? "png"
226
- }
227
- ];
228
- k.value = s;
229
- }
230
- });
231
- const ee = (s) => {
232
- s.preventDefault();
233
- const e = s.dataTransfer.files;
234
- p({ target: { files: e } }, r.format === "object");
235
- }, le = () => {
236
- !c.value || !x.value || U("update:modelValue", { fileName: x, fileLink: c });
237
- }, te = (s) => {
238
- u.value.fileUrl = s, u.value.fileName = Date.now(), t.value = !1, w.value = "", U("update:modelValue", r.format === "object" ? u.value : [u.value]);
239
- }, ae = async (s) => {
240
- if (s)
241
- try {
242
- const e = await fetch(s, { method: "HEAD" });
243
- h.value = e.ok;
244
- } catch (e) {
245
- console.log("Error checking file link:", e);
246
- }
247
- }, oe = () => {
248
- w.value = u.value.fileUrl, b.value = !1, t.value = !0;
249
- }, ne = (s) => {
250
- U("update:modelValue", s);
251
- };
252
- return (s, e) => (i(), $(a(pe), {
253
- label: l.label,
254
- "label-class": l.labelClass,
255
- hint: l.hint,
256
- "error-message": l.errorMessage
257
- }, {
258
- hint: C(() => [
259
- ue(s.$slots, "hint")
260
- ]),
261
- default: C(() => {
262
- var E, N, z, T, A, L, M, P, R, q, H, K, G, J, Q;
263
- return [
264
- l.isImageOnly ? (i(), $(he, {
265
- key: 0,
266
- accept: l.accept,
267
- "uploaded-image": u.value,
268
- "image-classes": l.imageClasses,
269
- "show-upload-image-area": l.showUploadImageArea,
270
- "onUpdate:uploadedImage": ne,
271
- onChange: e[0] || (e[0] = (n) => a(p)(n, r.format === "object")),
272
- onDelete: e[1] || (e[1] = (n) => a(S)(0))
273
- }, null, 8, ["accept", "uploaded-image", "image-classes", "show-upload-image-area"])) : l.isButtonOnly ? (i(), m(B, { key: 1 }, [
274
- d(a(j), de(l.buttonUploadProps, {
275
- onClick: e[2] || (e[2] = (n) => {
276
- var I;
277
- return (I = v.value) == null ? void 0 : I.click();
278
- })
279
- }), null, 16),
280
- o("input", {
281
- ref_key: "inputRef",
282
- ref: v,
283
- class: "hidden",
284
- type: "file",
285
- accept: l.accept,
286
- onChange: e[3] || (e[3] = (n) => a(p)(n, r.format === "object"))
287
- }, null, 40, we)
288
- ], 64)) : (i(), m(B, { key: 2 }, [
289
- a(k).length ? (i(), m("div", {
290
- key: 1,
291
- class: y(["p-3 rounded border flex gap-x-5 border-oc-gray-200 bg-white items-center", {
292
- "w-fit": l.isPreview,
293
- "!bg-oc-bg-dark": l.isDisabled
294
- }])
295
- }, [
296
- l.isPreview && ((T = u.value) == null ? void 0 : T.progress) === 100 ? (i(), m("div", De, [
297
- (L = (A = u.value) == null ? void 0 : A.file) != null && L.type.includes("video") ? (i(), m("video", {
298
- key: 0,
299
- autoplay: "",
300
- loop: "",
301
- src: _.value
302
- }, null, 8, Ie)) : (i(), m("img", {
303
- key: 1,
304
- src: (M = u.value) == null ? void 0 : M.fileUrl
305
- }, null, 8, $e)),
306
- d(a(Y), {
307
- modelValue: b.value,
308
- "onUpdate:modelValue": e[13] || (e[13] = (n) => b.value = n),
309
- class: "absolute top-3 right-3"
310
- }, {
311
- menu: C(() => {
312
- var n, I;
313
- return [
314
- o("div", Be, [
315
- !((I = (n = u.value) == null ? void 0 : n.file) != null && I.type.includes("video")) && l.allowToEdit ? (i(), m("div", {
316
- key: 0,
317
- class: "flex p-3 cursor-pointer items-center gap-x-3",
318
- onClick: oe
319
- }, [
320
- d(a(g), {
321
- width: "16",
322
- height: "16",
323
- name: "pencil"
324
- }),
325
- e[17] || (e[17] = o("span", null, "Edit", -1))
326
- ])) : V("", !0),
327
- o("div", {
328
- class: "flex p-3 cursor-pointer items-center text-oc-error gap-x-3",
329
- onClick: e[12] || (e[12] = () => {
330
- a(S)(0), b.value = !1;
331
- })
332
- }, [
333
- d(a(g), {
334
- width: "16",
335
- height: "16",
336
- name: "bin"
337
- }),
338
- e[18] || (e[18] = o("span", null, "Delete", -1))
339
- ])
340
- ])
341
- ];
342
- }),
343
- default: C(() => [
344
- d(a(g), {
345
- name: "dots-vertical",
346
- class: "cursor-pointer w-[28px] aspect-square hidden items-center justify-center text-oc-text-400 group-hover:flex"
347
- })
348
- ]),
349
- _: 1
350
- }, 8, ["modelValue"]),
351
- !((R = (P = u.value) == null ? void 0 : P.file) != null && R.type.includes("video")) && t.value ? (i(), $(a(Z), {
352
- key: 2,
353
- modelValue: t.value,
354
- "onUpdate:modelValue": e[14] || (e[14] = (n) => t.value = n),
355
- img: w.value,
356
- onClose: e[15] || (e[15] = () => {
357
- t.value = !1, w.value = "";
358
- }),
359
- onChangeImage: te
360
- }, null, 8, ["modelValue", "img"])) : V("", !0)
361
- ])) : (i(), m(B, { key: 1 }, [
362
- o("div", Oe, [
363
- o("div", Fe, [
364
- d(a(g), {
365
- name: "file-extension",
366
- width: "14",
367
- height: "10"
368
- }),
369
- o("span", Se, O((q = u.value) == null ? void 0 : q.extension), 1)
370
- ]),
371
- o("div", {
372
- class: y([l.shouldTruncateFileName ? "truncate max-w-[250px]" : ""])
373
- }, O((H = u.value) == null ? void 0 : H.fileName), 3)
374
- ]),
375
- o("div", je, [
376
- o("div", {
377
- class: y([((K = u.value) == null ? void 0 : K.progress) === 100 ? "opacity-0" : "", "transition-all duration-500 flex flex-col gap-y-1 items-center"])
378
- }, [
379
- o("span", Ee, O(((G = u.value) == null ? void 0 : G.progress) || 0) + "% ", 1),
380
- o("div", Ne, [
381
- o("div", {
382
- class: "h-2 bg-oc-primary transition-all duration-100",
383
- style: ce({ width: `${((J = u.value) == null ? void 0 : J.progress) || 0}%` })
384
- }, null, 4)
385
- ])
386
- ], 2),
387
- l.isDisabled ? V("", !0) : (i(), m("div", {
388
- key: 0,
389
- class: "w-[36px] cursor-pointer flex text-oc-error items-center justify-center",
390
- onClick: e[16] || (e[16] = (n) => a(S)(0))
391
- }, [
392
- d(a(g), {
393
- width: "16",
394
- height: "16",
395
- name: ((Q = u.value) == null ? void 0 : Q.progress) === 100 ? "bin" : "x-circle"
396
- }, null, 8, ["name"])
397
- ]))
398
- ])
399
- ], 64))
400
- ], 2)) : (i(), m("div", ke, [
401
- o("div", Ve, [
402
- l.variant === "url" ? (i(), m(B, { key: 0 }, [
403
- d(a(X), {
404
- modelValue: c.value,
405
- "onUpdate:modelValue": e[4] || (e[4] = (n) => c.value = n),
406
- "error-message": c.value && !h.value ? "Invalid link" : "",
407
- placeholder: "https://website.com",
408
- onBlur: e[5] || (e[5] = (n) => ae(c.value))
409
- }, null, 8, ["modelValue", "error-message"]),
410
- d(a(X), {
411
- modelValue: x.value,
412
- "onUpdate:modelValue": e[6] || (e[6] = (n) => x.value = n),
413
- placeholder: "Enter file name"
414
- }, null, 8, ["modelValue"]),
415
- d(a(j), {
416
- class: "flex-shrink-0",
417
- label: "OK",
418
- disabled: "",
419
- onClick: le
420
- })
421
- ], 64)) : V("", !0),
422
- o("div", {
423
- class: y(["p-3 flex bg-white items-center gap-x-5 rounded border w-full", [
424
- D.value ? "border-oc-primary border-dashed" : "border-oc-gray-200",
425
- {
426
- "!bg-oc-bg-dark": l.isDisabled
427
- }
428
- ]]),
429
- onDragenter: e[8] || (e[8] = (n) => D.value = !0),
430
- onDragleave: e[9] || (e[9] = (n) => D.value = !1),
431
- onDrop: ee,
432
- onDragover: e[10] || (e[10] = me(() => {
433
- }, ["prevent"]))
434
- }, [
435
- o("span", Ue, O(l.isDisabled ? "Upload disabled" : "Choose file from your computer or drag here"), 1),
436
- d(a(j), {
437
- size: "small",
438
- "is-disabled": l.isDisabled,
439
- variant: ((E = l.uploadButtonOptions) == null ? void 0 : E.variant) ?? "secondary",
440
- "left-icon": ((N = l.uploadButtonOptions) == null ? void 0 : N.leftIcon) ?? "upload",
441
- label: ((z = l.uploadButtonOptions) == null ? void 0 : z.label) ?? "Upload",
442
- onClick: e[7] || (e[7] = (n) => v.value.click())
443
- }, null, 8, ["is-disabled", "variant", "left-icon", "label"])
444
- ], 34),
445
- o("input", {
446
- ref_key: "inputRef",
447
- ref: v,
448
- class: "hidden",
449
- type: "file",
450
- accept: l.accept,
451
- onChange: e[11] || (e[11] = (n) => a(p)(n, r.format === "object"))
452
- }, null, 40, Ce)
453
- ])
454
- ]))
455
- ], 64))
456
- ];
457
- }),
458
- _: 3
459
- }, 8, ["label", "label-class", "hint", "error-message"]));
460
- }
461
- };
462
- export {
463
- Xe as _
464
- };