@nmorph/nmorph-ui-kit 2.2.36 → 2.2.38

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 (114) hide show
  1. package/dist/components/basic/nmorph-button/NmorphButton.vue2.js +8 -8
  2. package/dist/components/basic/nmorph-icon/NmorphIcon.vue2.js +3 -3
  3. package/dist/components/basic/nmorph-layout/NmorphLayout.vue2.js +14 -13
  4. package/dist/components/basic/nmorph-link/NmorphLink.vue2.js +1 -1
  5. package/dist/components/basic/nmorph-scroll/NmorphScroll.css +1 -0
  6. package/dist/components/basic/nmorph-scroll/NmorphScroll.vue.js +6 -4
  7. package/dist/components/basic/nmorph-scroll/NmorphScroll.vue2.js +1 -0
  8. package/dist/components/basic/nmorph-space/NmorphSpace.vue2.js +15 -19
  9. package/dist/components/data/nmorph-avatar/NmorphAvatar.css +1 -1
  10. package/dist/components/data/nmorph-avatar/NmorphAvatar.vue2.js +5 -5
  11. package/dist/components/data/nmorph-badge/NmorphBadge.vue2.js +37 -36
  12. package/dist/components/data/nmorph-calendar/NmorphCalendar.vue2.js +41 -40
  13. package/dist/components/data/nmorph-card/NmorphCard.vue2.js +19 -15
  14. package/dist/components/data/nmorph-collapse/components/nmorph-collapse-item/NmorphCollapseItem.vue2.js +5 -9
  15. package/dist/components/data/nmorph-empty/NmorphEmpty.vue.js +3 -3
  16. package/dist/components/data/nmorph-empty/NmorphEmpty.vue2.js +17 -14
  17. package/dist/components/data/nmorph-image/NmorphImage.css +1 -0
  18. package/dist/components/data/nmorph-image/NmorphImage.vue.js +14 -12
  19. package/dist/components/data/nmorph-image/NmorphImage.vue2.js +3 -2
  20. package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue2.js +36 -35
  21. package/dist/components/data/nmorph-pagination/NmorphPagination.vue2.js +1 -1
  22. package/dist/components/data/nmorph-progress/NmorphProgress.vue2.js +19 -18
  23. package/dist/components/data/nmorph-qr-code/NmorphQRCode.vue2.js +20 -19
  24. package/dist/components/data/nmorph-skeleton/NmorphSkeleton.vue2.js +1 -1
  25. package/dist/components/data/nmorph-table/NmorphTable.vue2.js +39 -43
  26. package/dist/components/data/nmorph-virtual-list/NmorphVirtualList.vue2.js +34 -33
  27. package/dist/components/feedback/nmorph-alert/NmorphAlert.vue2.js +1 -1
  28. package/dist/components/feedback/nmorph-callout/NmorphCallout.vue2.js +7 -6
  29. package/dist/components/feedback/nmorph-dialog/NmorphDialog.css +1 -1
  30. package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue.js +25 -20
  31. package/dist/components/feedback/nmorph-dialog/NmorphDialog.vue2.js +37 -37
  32. package/dist/components/feedback/nmorph-drawer/NmorphDrawer.vue2.js +22 -21
  33. package/dist/components/feedback/nmorph-tooltip/NmorphTooltip.vue2.js +26 -25
  34. package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue2.js +65 -71
  35. package/dist/components/form/nmorph-checkbox/NmorphCheckbox.css +1 -1
  36. package/dist/components/form/nmorph-checkbox/NmorphCheckbox.vue2.js +30 -28
  37. package/dist/components/form/nmorph-checkbox-group/NmorphCheckboxGroup.vue2.js +25 -20
  38. package/dist/components/form/nmorph-color-picker/NmorphColorPicker.vue2.js +43 -42
  39. package/dist/components/form/nmorph-date-picker/NmorphDatePicker.vue2.js +53 -40
  40. package/dist/components/form/nmorph-file-upload/NmorphFileUpload.vue.js +20 -16
  41. package/dist/components/form/nmorph-file-upload/NmorphFileUpload.vue2.js +113 -86
  42. package/dist/components/form/nmorph-form/NmorphForm.vue2.js +9 -9
  43. package/dist/components/form/nmorph-form/components/nmorph-form-item/NmorphFormItem.vue2.js +33 -24
  44. package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-error-box/NmorphErrorBox.vue2.js +1 -1
  45. package/dist/components/form/nmorph-form/use-form-item-input.js +29 -8
  46. package/dist/components/form/nmorph-number-input/NmorphNumberInput.vue2.js +42 -39
  47. package/dist/components/form/nmorph-otp-input/NmorphOTPInput.vue2.js +66 -62
  48. package/dist/components/form/nmorph-radio/NmorphRadio.css +1 -1
  49. package/dist/components/form/nmorph-radio/NmorphRadio.vue2.js +1 -1
  50. package/dist/components/form/nmorph-radio-group/NmorphRadioGroup.vue2.js +24 -22
  51. package/dist/components/form/nmorph-select/NmorphSelect.css +1 -1
  52. package/dist/components/form/nmorph-select/NmorphSelect.vue2.js +83 -81
  53. package/dist/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue2.js +4 -4
  54. package/dist/components/form/nmorph-select-button/NmorphSelectButton.vue2.js +28 -25
  55. package/dist/components/form/nmorph-select-button/components/nmorph-select-button-item/NmorphSelectButtonItem.vue2.js +1 -1
  56. package/dist/components/form/nmorph-slider/NmorphSlider.vue2.js +51 -49
  57. package/dist/components/form/nmorph-switch/NmorphSwitch.vue2.js +35 -33
  58. package/dist/components/form/nmorph-text-input/NmorphTextInput.css +1 -0
  59. package/dist/components/form/nmorph-text-input/NmorphTextInput.vue.js +5 -3
  60. package/dist/components/form/nmorph-text-input/NmorphTextInput.vue2.js +37 -35
  61. package/dist/components/form/nmorph-textarea/NmorphTextarea.vue.js +1 -1
  62. package/dist/components/form/nmorph-textarea/NmorphTextarea.vue2.js +30 -26
  63. package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue.js +1 -1
  64. package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue2.js +68 -66
  65. package/dist/components/navigation/nmorph-backtop/NmorphBacktop.vue2.js +1 -1
  66. package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue2.js +32 -31
  67. package/dist/components/navigation/nmorph-tabs/NmorphTabs.vue2.js +1 -1
  68. package/dist/components/others/nmorph-overlay/NmorphOverlay.vue2.js +1 -1
  69. package/dist/hooks/use-common-styles.js +18 -278
  70. package/dist/hooks/use-field-validation.js +71 -42
  71. package/dist/hooks/use-form-validation.js +62 -24
  72. package/dist/hooks/use-virtual-list.js +38 -32
  73. package/dist/index.umd.js +26 -286
  74. package/dist/package.json.js +1 -1
  75. package/dist/src/components/basic/nmorph-button/NmorphButton.vue.d.ts +2 -2
  76. package/dist/src/components/basic/nmorph-link/NmorphLink.vue.d.ts +1 -1
  77. package/dist/src/components/data/nmorph-avatar/NmorphAvatar.vue.d.ts +1 -1
  78. package/dist/src/components/data/nmorph-badge/NmorphBadge.vue.d.ts +1 -1
  79. package/dist/src/components/data/nmorph-collapse/components/nmorph-collapse-item/NmorphCollapseItem.vue.d.ts +1 -1
  80. package/dist/src/components/data/nmorph-empty/NmorphEmpty.vue.d.ts +1 -1
  81. package/dist/src/components/data/nmorph-pagination/NmorphPagination.vue.d.ts +1 -1
  82. package/dist/src/components/data/nmorph-progress/NmorphProgress.vue.d.ts +1 -1
  83. package/dist/src/components/data/nmorph-table/NmorphTable.vue.d.ts +1 -1
  84. package/dist/src/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.d.ts +1 -1
  85. package/dist/src/components/feedback/nmorph-callout/NmorphCallout.vue.d.ts +1 -1
  86. package/dist/src/components/feedback/nmorph-dialog/NmorphDialog.vue.d.ts +4 -4
  87. package/dist/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue.d.ts +1 -1
  88. package/dist/src/components/form/nmorph-checkbox-group/NmorphCheckboxGroup.vue.d.ts +3 -3
  89. package/dist/src/components/form/nmorph-color-picker/NmorphColorPicker.vue.d.ts +1 -1
  90. package/dist/src/components/form/nmorph-date-picker/NmorphDatePicker.vue.d.ts +3 -3
  91. package/dist/src/components/form/nmorph-file-upload/NmorphFileUpload.vue.d.ts +6 -3
  92. package/dist/src/components/form/nmorph-file-upload/types.d.ts +4 -0
  93. package/dist/src/components/form/nmorph-form/components/nmorph-form-item/NmorphFormItem.vue.d.ts +1 -1
  94. package/dist/src/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-error-box/NmorphErrorBox.vue.d.ts +1 -1
  95. package/dist/src/components/form/nmorph-form/types.d.ts +15 -5
  96. package/dist/src/components/form/nmorph-form/use-form-item-input.d.ts +10 -0
  97. package/dist/src/components/form/nmorph-number-input/NmorphNumberInput.vue.d.ts +1 -1
  98. package/dist/src/components/form/nmorph-otp-input/NmorphOTPInput.vue.d.ts +1 -1
  99. package/dist/src/components/form/nmorph-radio-group/NmorphRadioGroup.vue.d.ts +3 -3
  100. package/dist/src/components/form/nmorph-select/NmorphSelect.vue.d.ts +1 -1
  101. package/dist/src/components/form/nmorph-select-button/NmorphSelectButton.vue.d.ts +1 -1
  102. package/dist/src/components/form/nmorph-text-input/NmorphTextInput.vue.d.ts +1 -1
  103. package/dist/src/components/form/nmorph-textarea/NmorphTextarea.vue.d.ts +1 -1
  104. package/dist/src/components/form/nmorph-time-picker/NmorphTimePicker.vue.d.ts +1 -1
  105. package/dist/src/hooks/use-field-validation.d.ts +15 -0
  106. package/dist/src/hooks/use-form-validation.d.ts +5 -0
  107. package/dist/src/hooks/use-virtual-list.d.ts +6 -0
  108. package/dist/src/types/index.d.ts +2 -1
  109. package/dist/src/utils/common.d.ts +5 -0
  110. package/dist/src/utils/create-modifiers.d.ts +4 -2
  111. package/dist/style.css +1 -1
  112. package/dist/utils/common.js +9 -3
  113. package/dist/utils/create-modifiers.js +6 -6
  114. package/package.json +1 -1
@@ -1,8 +1,9 @@
1
1
  import './NmorphCheckbox.css';
2
- import { defineComponent as y, inject as u, watch as k, ref as i, computed as r } from "vue";
3
- import { useModifiers as x } from "../../../utils/create-modifiers.js";
4
- import { NmorphSelectionControlHeight as S } from "../../../types/index.js";
5
- const $ = /* @__PURE__ */ y({
2
+ import { defineComponent as x, inject as i, watch as S, ref as n, computed as d } from "vue";
3
+ import { useModifiers as q } from "../../../utils/create-modifiers.js";
4
+ import { NmorphSelectionControlHeight as V } from "../../../types/index.js";
5
+ import { useFormItemModel as C } from "../nmorph-form/use-form-item-input.js";
6
+ const H = /* @__PURE__ */ x({
6
7
  __name: "NmorphCheckbox",
7
8
  props: {
8
9
  id: { type: String, required: !1, default: "" },
@@ -13,43 +14,44 @@ const $ = /* @__PURE__ */ y({
13
14
  height: { type: null, required: !1 }
14
15
  },
15
16
  emits: ["update:model-value"],
16
- setup(f, { expose: m, emit: v }) {
17
- const l = u(
17
+ setup(g, { expose: b, emit: _ }) {
18
+ const o = i(
18
19
  "checkbox-group-selected-value",
19
20
  void 0
20
- ), a = u(
21
+ ), u = i(
21
22
  "change-checkbox-value-handler",
22
23
  void 0
23
- ), n = u("checkbox-group-height", void 0), e = f;
24
- k(
25
- () => e.modelValue,
26
- (_) => {
27
- t.value = _;
28
- }
24
+ ), s = i("checkbox-group-height", void 0), e = g, c = _, { modelValue: l, updateModelValue: p } = C(
25
+ e,
26
+ (r) => c("update:model-value", r),
27
+ !1
29
28
  );
30
- const d = i(null);
31
- m({ inputDOMRef: d });
32
- const o = l !== void 0, t = o ? i(l.value) : i(e.modelValue), s = r(() => o ? l.value.includes(e.id) : e.modelValue), c = r(() => e.height || n?.value || "thin"), p = v, g = () => {
29
+ S(l, (r) => {
30
+ t.value = r;
31
+ });
32
+ const f = n(null);
33
+ b({ inputDOMRef: f });
34
+ const a = o !== void 0, t = a ? n(o.value) : n(l.value), h = d(() => a ? o.value.includes(e.id) : l.value), m = d(() => e.height || s?.value || "thin"), y = () => {
33
35
  if (!e.disabled) {
34
- if (!o) {
35
- t.value = !t.value, p("update:model-value", t.value);
36
+ if (!a) {
37
+ t.value = !t.value, p(t.value);
36
38
  return;
37
39
  }
38
- a && Array.isArray(t.value) && a(e.id, t.value);
40
+ u && Array.isArray(t.value) && u(e.id, t.value);
39
41
  }
40
- }, b = r(
41
- () => x({
42
- nmorph: [S[c.value]],
42
+ }, k = d(
43
+ () => q({
44
+ nmorph: [V[m.value]],
43
45
  "nmorph-checkbox": [
44
- `${s.value && "checked"}`,
45
- `${e.disabled && "disabled"}`,
46
- `${e.design === "button" && "button"}`
46
+ h.value && "checked",
47
+ e.disabled && "disabled",
48
+ e.design === "button" && "button"
47
49
  ]
48
50
  })
49
- ), h = { groupSelectedValue: l, changeValue: a, groupHeight: n, props: e, inputDOMRef: d, hasGroup: o, initialValue: t, checked: s, height: c, emit: p, handleChange: g, modifiers: b };
50
- return Object.defineProperty(h, "__isScriptSetup", { enumerable: !1, value: !0 }), h;
51
+ ), v = { groupSelectedValue: o, changeValue: u, groupHeight: s, props: e, emit: c, modelValue: l, updateModelValue: p, inputDOMRef: f, hasGroup: a, initialValue: t, checked: h, height: m, handleChange: y, modifiers: k };
52
+ return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
51
53
  }
52
54
  });
53
55
  export {
54
- $ as default
56
+ H as default
55
57
  };
@@ -1,11 +1,12 @@
1
1
  import './NmorphCheckboxGroup.css';
2
- import { defineComponent as m, ref as h, watch as g, computed as d, provide as o } from "vue";
3
- import { useModifiers as b } from "../../../utils/create-modifiers.js";
4
- import y from "../nmorph-checkbox/NmorphCheckbox.vue.js";
5
- const _ = /* @__PURE__ */ m({
2
+ import { defineComponent as g, ref as b, watch as v, computed as p, provide as u } from "vue";
3
+ import { useModifiers as y } from "../../../utils/create-modifiers.js";
4
+ import { useFormItemModel as q } from "../nmorph-form/use-form-item-input.js";
5
+ import x from "../nmorph-checkbox/NmorphCheckbox.vue.js";
6
+ const N = /* @__PURE__ */ g({
6
7
  __name: "NmorphCheckboxGroup",
7
8
  props: {
8
- modelValue: { type: Array, required: !0, default: () => [] },
9
+ modelValue: { type: Array, required: !1, default: () => [] },
9
10
  options: { type: Array, required: !1, default: () => [] },
10
11
  design: { type: String, required: !1, default: "button" },
11
12
  direction: { type: null, required: !1, default: "row" },
@@ -17,30 +18,34 @@ const _ = /* @__PURE__ */ m({
17
18
  tabindex: { type: Number, required: !1 }
18
19
  },
19
20
  emits: ["update:model-value"],
20
- setup(n, { expose: p, emit: s }) {
21
- p();
22
- const r = n, e = h([...r.modelValue]);
23
- g(
24
- () => r.modelValue,
21
+ setup(s, { expose: c, emit: f }) {
22
+ c();
23
+ const r = s, a = f, { modelValue: o, updateModelValue: l } = q(
24
+ r,
25
+ (t) => a("update:model-value", t),
26
+ []
27
+ ), e = b([...o.value]);
28
+ v(
29
+ o,
25
30
  (t) => {
26
31
  e.value = [...t];
27
32
  },
28
33
  { deep: !0 }
29
34
  );
30
- const u = s, a = (t) => {
31
- e.value = e.value.includes(t) ? e.value.filter((f) => f !== t) : [...e.value, t], u("update:model-value", e.value);
32
- }, c = d(
33
- () => b({
35
+ const i = (t) => {
36
+ e.value = e.value.includes(t) ? e.value.filter((h) => h !== t) : [...e.value, t], l(e.value);
37
+ }, m = p(
38
+ () => y({
34
39
  "nmorph-checkbox-group": [r.design, r.direction]
35
40
  })
36
- ), l = d(() => r.height);
37
- o("checkbox-group-selected-value", e), o("change-checkbox-value-handler", a), o("checkbox-group-height", l);
38
- const i = { props: r, initialValue: e, emit: u, changeHandler: a, modifiers: c, height: l, get NmorphCheckbox() {
39
- return y;
41
+ ), d = p(() => r.height);
42
+ u("checkbox-group-selected-value", e), u("change-checkbox-value-handler", i), u("checkbox-group-height", d);
43
+ const n = { props: r, emit: a, modelValue: o, updateModelValue: l, initialValue: e, changeHandler: i, modifiers: m, height: d, get NmorphCheckbox() {
44
+ return x;
40
45
  } };
41
- return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
46
+ return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
42
47
  }
43
48
  });
44
49
  export {
45
- _ as default
50
+ N as default
46
51
  };
@@ -1,9 +1,9 @@
1
1
  import './NmorphColorPicker.css';
2
- import { defineComponent as R, ref as h, watch as j, onMounted as k, computed as C } from "vue";
3
- import { NmorphComponentHeight as B } from "../../../types/index.js";
4
- import { useModifiers as H } from "../../../utils/create-modifiers.js";
5
- import { useFormItemInput as L } from "../nmorph-form/use-form-item-input.js";
6
- const E = /* @__PURE__ */ R({
2
+ import { defineComponent as k, ref as g, watch as B, onMounted as H, computed as _ } from "vue";
3
+ import { NmorphComponentHeight as L } from "../../../types/index.js";
4
+ import { useModifiers as O } from "../../../utils/create-modifiers.js";
5
+ import { useFormItemInput as z, useFormItemModel as A } from "../nmorph-form/use-form-item-input.js";
6
+ const G = /* @__PURE__ */ k({
7
7
  __name: "NmorphColorPicker",
8
8
  props: {
9
9
  modelValue: { type: String, required: !1, default: "" },
@@ -17,51 +17,52 @@ const E = /* @__PURE__ */ R({
17
17
  tabindex: { type: Number, required: !1 }
18
18
  },
19
19
  emits: ["update:model-value", "focus", "blur"],
20
- setup(_, { expose: q, emit: M }) {
21
- const o = _, g = M, { id: V, name: S, tabindex: x } = L(o), s = (e, r = "#000000") => {
20
+ setup(q, { expose: S, emit: V }) {
21
+ const n = q, b = V, { id: x, name: I, tabindex: F } = z(n), { modelValue: d, updateModelValue: y } = A(
22
+ n,
23
+ (e) => b("update:model-value", e),
24
+ ""
25
+ ), l = (e, r = "#000000") => {
22
26
  const t = e?.trim() || "";
23
- return /^#[\da-f]{6}$/i.test(t) ? t.toLowerCase() : /^#[\da-f]{3}$/i.test(t) ? `#${t.slice(1).split("").map((n) => `${n}${n}`).join("").toLowerCase()}` : r;
24
- }, c = h(null), m = () => {
27
+ return /^#[\da-f]{6}$/i.test(t) ? t.toLowerCase() : /^#[\da-f]{3}$/i.test(t) ? `#${t.slice(1).split("").map((o) => `${o}${o}`).join("").toLowerCase()}` : r;
28
+ }, p = g(null), m = () => {
25
29
  if (typeof document > "u") return "#006cb6";
26
- const e = c.value || document.documentElement, r = getComputedStyle(e).getPropertyValue("--nmorph-accent-color").trim();
27
- return s(r, "#006cb6");
28
- }, a = h(s(o.modelValue)), b = h(!1);
29
- j(
30
- () => o.modelValue,
31
- (e) => {
32
- a.value = e ? s(e) : m();
33
- }
34
- );
35
- const I = (e) => {
36
- const r = e.target, t = s(r.value);
37
- a.value = t, g("update:model-value", t);
38
- }, p = (e) => [
30
+ const e = p.value || document.documentElement, r = getComputedStyle(e).getPropertyValue("--nmorph-accent-color").trim();
31
+ return l(r, "#006cb6");
32
+ }, a = g(l(d.value)), v = g(!1);
33
+ B(d, (e) => {
34
+ a.value = e ? l(e) : m();
35
+ });
36
+ const w = (e) => {
37
+ const r = e.target, t = l(r.value);
38
+ a.value = t, y(t);
39
+ }, f = (e) => [
39
40
  parseInt(e.slice(1, 3), 16),
40
41
  parseInt(e.slice(3, 5), 16),
41
42
  parseInt(e.slice(5, 7), 16)
42
- ], y = (e) => {
43
- const [r, t, n] = p(e);
44
- return `rgb(${r}, ${t}, ${n})`;
45
- }, $ = (e) => {
46
- const [r, t, n] = p(e).map((P) => P / 255), l = Math.max(r, t, n), u = Math.min(r, t, n), f = (l + u) / 2;
47
- if (l === u)
48
- return `hsl(0, 0%, ${Math.round(f * 100)}%)`;
49
- const i = l - u, N = f > 0.5 ? i / (2 - l - u) : i / (l + u);
50
- let d = 0;
51
- return l === r ? d = (t - n) / i + (t < n ? 6 : 0) : l === t ? d = (n - r) / i + 2 : d = (r - t) / i + 4, `hsl(${Math.round(d * 60)}, ${Math.round(N * 100)}%, ${Math.round(f * 100)}%)`;
43
+ ], $ = (e) => {
44
+ const [r, t, o] = f(e);
45
+ return `rgb(${r}, ${t}, ${o})`;
46
+ }, M = (e) => {
47
+ const [r, t, o] = f(e).map((j) => j / 255), s = Math.max(r, t, o), u = Math.min(r, t, o), h = (s + u) / 2;
48
+ if (s === u)
49
+ return `hsl(0, 0%, ${Math.round(h * 100)}%)`;
50
+ const i = s - u, R = h > 0.5 ? i / (2 - s - u) : i / (s + u);
51
+ let c = 0;
52
+ return s === r ? c = (t - o) / i + (t < o ? 6 : 0) : s === t ? c = (o - r) / i + 2 : c = (r - t) / i + 4, `hsl(${Math.round(c * 60)}, ${Math.round(R * 100)}%, ${Math.round(h * 100)}%)`;
52
53
  };
53
- k(() => {
54
- o.modelValue || (a.value = m());
55
- }), q({ inputDOMRef: c });
56
- const F = C(
57
- () => H({
58
- nmorph: [B[o.height], `${b.value && "focused"}`],
59
- "nmorph-color-picker": [`${o.disabled && "disabled"}`, o.displayFormat]
54
+ H(() => {
55
+ d.value || (a.value = m());
56
+ }), S({ inputDOMRef: p });
57
+ const N = _(
58
+ () => O({
59
+ nmorph: [L[n.height], v.value && "focused"],
60
+ "nmorph-color-picker": [n.disabled && "disabled", n.displayFormat]
60
61
  })
61
- ), w = C(() => o.displayFormat === "rgb" ? y(a.value) : o.displayFormat === "hsl" ? $(a.value) : a.value.toUpperCase()), v = { props: o, emit: g, id: V, name: S, tabindex: x, normalizeColor: s, inputDOMRef: c, resolveAccentColor: m, currentValue: a, focused: b, handleInput: I, hexToRgb: p, formatRgb: y, formatHsl: $, modifiers: F, displayValue: w };
62
- return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
62
+ ), P = _(() => n.displayFormat === "rgb" ? $(a.value) : n.displayFormat === "hsl" ? M(a.value) : a.value.toUpperCase()), C = { props: n, emit: b, id: x, name: I, tabindex: F, modelValue: d, updateModelValue: y, normalizeColor: l, inputDOMRef: p, resolveAccentColor: m, currentValue: a, focused: v, handleInput: w, hexToRgb: f, formatRgb: $, formatHsl: M, modifiers: N, displayValue: P };
63
+ return Object.defineProperty(C, "__isScriptSetup", { enumerable: !1, value: !0 }), C;
63
64
  }
64
65
  });
65
66
  export {
66
- E as default
67
+ G as default
67
68
  };
@@ -1,20 +1,21 @@
1
1
  import './NmorphDatePicker.css';
2
- import { defineComponent as O, computed as a, ref as u } from "vue";
3
- import { useModifiers as k } from "../../../utils/create-modifiers.js";
4
- import { NmorphComponentHeight as B } from "../../../types/index.js";
5
- import P from "./inner-components/nmorph-clear-button/NmorphClearButton.vue.js";
6
- import V from "./inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js";
7
- import { useI18n as $ } from "vue-i18n";
8
- import { useFormItemInput as j } from "../nmorph-form/use-form-item-input.js";
9
- import { formatDate as f } from "../../data/nmorph-calendar/utils.js";
10
- import z from "../../../assets/icons/calendar.svg.js";
11
- import L from "../../basic/nmorph-icon/NmorphIcon.vue.js";
12
- import M from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
13
- const Z = /* @__PURE__ */ O({
2
+ import { defineComponent as B, computed as a, ref as u, watch as M } from "vue";
3
+ import { useModifiers as V } from "../../../utils/create-modifiers.js";
4
+ import { toCssSize as m } from "../../../utils/common.js";
5
+ import { NmorphComponentHeight as P } from "../../../types/index.js";
6
+ import j from "./inner-components/nmorph-clear-button/NmorphClearButton.vue.js";
7
+ import z from "./inner-components/nmorph-date-picker-content/NmorphDatePickerContent.vue.js";
8
+ import { useI18n as L } from "vue-i18n";
9
+ import { useFormItemInput as R, useFormItemModel as T } from "../nmorph-form/use-form-item-input.js";
10
+ import { formatDate as c } from "../../data/nmorph-calendar/utils.js";
11
+ import E from "../../../assets/icons/calendar.svg.js";
12
+ import G from "../../basic/nmorph-icon/NmorphIcon.vue.js";
13
+ import J from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
14
+ const le = /* @__PURE__ */ B({
14
15
  __name: "NmorphDatePicker",
15
16
  props: {
16
17
  placeholder: { type: String, required: !1, default: "" },
17
- modelValue: { type: [Date, Array, null], required: !0, default: null },
18
+ modelValue: { type: [Date, Array, null], required: !1, default: null },
18
19
  type: { type: null, required: !1, default: "date" },
19
20
  textSeparator: { type: String, required: !1, default: "-" },
20
21
  initialDate: { type: Date, required: !1, default: () => /* @__PURE__ */ new Date() },
@@ -35,25 +36,29 @@ const Z = /* @__PURE__ */ O({
35
36
  tabindex: { type: Number, required: !1 }
36
37
  },
37
38
  emits: ["update:model-value"],
38
- setup(m, { expose: c, emit: y }) {
39
- c();
40
- const { t: p } = $(), e = m, { id: h, name: v, autocomplete: g } = j(e), n = a(() => e.placeholder ? e.placeholder : p("pickADate")), t = u(e.modelValue), d = y, l = u(!1), q = () => {
39
+ setup(v, { expose: h, emit: y }) {
40
+ h();
41
+ const { t: p } = L(), e = v, { id: g, name: q, autocomplete: S } = R(e), n = a(() => e.placeholder ? e.placeholder : p("pickADate")), s = y, { modelValue: d, updateModelValue: i } = T(
42
+ e,
43
+ (r) => s("update:model-value", r),
44
+ null
45
+ ), t = u(d.value), l = u(!1), N = () => {
41
46
  l.value = !0;
42
- }, S = () => {
47
+ }, D = () => {
43
48
  l.value = !1;
44
- }, N = a(
45
- () => k({
46
- nmorph: [B[e.height]],
47
- "nmorph-date-picker": [`${e.disabled && "disabled"}`, e.type, `${l.value && "focus"}`]
49
+ }, b = a(
50
+ () => V({
51
+ nmorph: [P[e.height]],
52
+ "nmorph-date-picker": [e.disabled && "disabled", e.type, l.value && "focus"]
48
53
  })
49
- ), i = (r) => typeof r == "number" ? `${r}px` : r, b = a(() => ({
50
- ...e.width !== void 0 && { "--width": i(e.width) },
54
+ ), C = a(() => ({
55
+ ...e.width !== void 0 && { "--width": m(e.width) },
51
56
  ...e.calendarCellHeight !== void 0 && {
52
- "--date-picker-calendar-cell-height": i(e.calendarCellHeight)
57
+ "--date-picker-calendar-cell-height": m(e.calendarCellHeight)
53
58
  }
54
- })), o = u(!1), D = u(null), C = () => {
59
+ })), o = u(!1), I = u(null), _ = () => {
55
60
  o.value = !1;
56
- }, _ = () => {
61
+ }, w = () => {
57
62
  o.value = !o.value;
58
63
  }, A = a(() => {
59
64
  if (!t.value) return n.value;
@@ -65,25 +70,33 @@ const Z = /* @__PURE__ */ O({
65
70
  };
66
71
  if (Array.isArray(t.value)) {
67
72
  if (t.value.length === 0) return n.value;
68
- const F = f(t.value, r), x = e.type === "daterange" ? e.rangeSeparator : e.valueSeparator;
69
- return F.join(x);
73
+ const O = c(t.value, r), k = e.type === "daterange" ? e.rangeSeparator : e.valueSeparator;
74
+ return O.join(k);
70
75
  } else
71
- return f(t.value, r);
72
- }), H = () => {
76
+ return c(t.value, r);
77
+ }), F = () => {
73
78
  const r = Array.isArray(t.value) ? [] : null;
74
- t.value = r, d("update:model-value", t.value);
75
- }, I = (r) => {
76
- t.value = r, d("update:model-value", t.value);
77
- }, w = a(() => Array.isArray(t.value) ? t.value.length > 0 : !!t.value), s = { t: p, props: e, id: h, name: v, autocomplete: g, placeholderText: n, selectedDate: t, emit: d, focus: l, focusHandler: q, blurHandler: S, modifiers: N, getCssSize: i, styles: b, open: o, nmorphInputDOMRef: D, closeHandler: C, toggleOpen: _, displayValue: A, clearHandler: H, updateSelectedDateHandler: I, showClearButton: w, get NmorphDropdown() {
78
- return M;
79
+ t.value = r, i(t.value);
80
+ }, H = (r) => {
81
+ t.value = r, i(t.value);
82
+ };
83
+ M(
84
+ d,
85
+ (r) => {
86
+ t.value = r;
87
+ },
88
+ { deep: !0 }
89
+ );
90
+ const x = a(() => Array.isArray(t.value) ? t.value.length > 0 : !!t.value), f = { t: p, props: e, id: g, name: q, autocomplete: S, placeholderText: n, emit: s, modelValue: d, updateModelValue: i, selectedDate: t, focus: l, focusHandler: N, blurHandler: D, modifiers: b, styles: C, open: o, nmorphInputDOMRef: I, closeHandler: _, toggleOpen: w, displayValue: A, clearHandler: F, updateSelectedDateHandler: H, showClearButton: x, get NmorphDropdown() {
91
+ return J;
79
92
  }, get NmorphIcon() {
80
- return L;
93
+ return G;
81
94
  }, get NmorphIconCalendar() {
82
- return z;
83
- }, NmorphClearButton: P, NmorphDatePickerContent: V };
84
- return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
95
+ return E;
96
+ }, NmorphClearButton: j, NmorphDatePickerContent: z };
97
+ return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
85
98
  }
86
99
  });
87
100
  export {
88
- Z as default
101
+ le as default
89
102
  };
@@ -1,30 +1,34 @@
1
1
  import './NmorphFileUpload.css';
2
- import m from "./NmorphFileUpload.vue2.js";
3
- import { openBlock as o, createElementBlock as r, normalizeClass as d, createElementVNode as l, renderSlot as _, createVNode as n, TransitionGroup as h, withCtx as t, Fragment as f, renderList as v, createBlock as a, createCommentVNode as p, resolveDynamicComponent as u, toDisplayString as g } from "vue";
2
+ import p from "./NmorphFileUpload.vue2.js";
3
+ import { openBlock as o, createElementBlock as r, normalizeClass as s, createElementVNode as l, renderSlot as _, createVNode as n, TransitionGroup as h, withCtx as t, Fragment as f, renderList as v, createBlock as a, createCommentVNode as m, resolveDynamicComponent as u, toDisplayString as g } from "vue";
4
4
  /* empty css */
5
- import y from "../../../_virtual/_plugin-vue_export-helper.js";
6
- const k = { class: "nmorph-file-upload__trigger" }, N = ["multiple", "disabled", "accept"], C = {
5
+ import b from "../../../_virtual/_plugin-vue_export-helper.js";
6
+ const x = { class: "nmorph-file-upload__trigger" }, y = ["id", "name", "autocomplete", "tabindex", "multiple", "disabled", "accept"], k = {
7
7
  key: 0,
8
8
  class: "nmorph-file-upload__list"
9
- }, b = { class: "nmorph-file-upload__file-info" }, x = { class: "nmorph-file-upload__file-name" }, F = { class: "nmorph-file-upload__remove-file" };
10
- function B(s, I, w, e, D, S) {
9
+ }, N = { class: "nmorph-file-upload__file-info" }, C = { class: "nmorph-file-upload__file-name" }, F = { class: "nmorph-file-upload__remove-file" };
10
+ function B(d, I, w, e, D, S) {
11
11
  return o(), r(
12
12
  "div",
13
13
  {
14
- class: d(e.modifiers)
14
+ class: s(e.modifiers)
15
15
  },
16
16
  [
17
- l("div", k, [
17
+ l("div", x, [
18
18
  l("input", {
19
+ id: e.id,
19
20
  ref: "inputDOMRef",
21
+ name: e.name,
22
+ autocomplete: e.autocomplete,
23
+ tabindex: e.tabindex,
20
24
  type: "file",
21
25
  multiple: e.props.multiple,
22
26
  disabled: e.props.disabled,
23
27
  accept: e.inputAccept,
24
28
  class: "nmorph-native-input",
25
29
  onChange: e.handleFileUpload
26
- }, null, 40, N),
27
- _(s.$slots, "trigger", {}, () => [
30
+ }, null, 40, y),
31
+ _(d.$slots, "trigger", {}, () => [
28
32
  n(e.NmorphButton, {
29
33
  text: e.computedButtonText,
30
34
  fill: "",
@@ -33,7 +37,7 @@ function B(s, I, w, e, D, S) {
33
37
  }, null, 8, ["text", "disabled"])
34
38
  ])
35
39
  ]),
36
- e.files.length > 0 ? (o(), r("div", C, [
40
+ e.files.length > 0 ? (o(), r("div", k, [
37
41
  n(h, {
38
42
  name: "list",
39
43
  tag: "div"
@@ -49,8 +53,8 @@ function B(s, I, w, e, D, S) {
49
53
  e.props.photoWithPreview && e.isImageFile(i) ? (o(), a(e.NmorphImagePreview, {
50
54
  key: 0,
51
55
  src: c
52
- }, null, 8, ["src"])) : p("v-if", !0),
53
- l("div", b, [
56
+ }, null, 8, ["src"])) : m("v-if", !0),
57
+ l("div", N, [
54
58
  n(
55
59
  e.NmorphIcon,
56
60
  {
@@ -69,7 +73,7 @@ function B(s, I, w, e, D, S) {
69
73
  ),
70
74
  l(
71
75
  "span",
72
- x,
76
+ C,
73
77
  g(i.name),
74
78
  1
75
79
  /* TEXT */
@@ -96,13 +100,13 @@ function B(s, I, w, e, D, S) {
96
100
  _: 1
97
101
  /* STABLE */
98
102
  })
99
- ])) : p("v-if", !0)
103
+ ])) : m("v-if", !0)
100
104
  ],
101
105
  2
102
106
  /* CLASS */
103
107
  );
104
108
  }
105
- const T = /* @__PURE__ */ y(m, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-file-upload/NmorphFileUpload.vue"]]);
109
+ const T = /* @__PURE__ */ b(p, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-file-upload/NmorphFileUpload.vue"]]);
106
110
  export {
107
111
  T as default
108
112
  };