@nmorph/nmorph-ui-kit 2.2.22 → 2.2.23
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/components/basic/nmorph-scroll/NmorphScroll.vue2.js +2 -2
- package/dist/components/data/nmorph-image-preview/NmorphImagePreview.css +1 -1
- package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.css +1 -1
- package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue.js +25 -22
- package/dist/components/form/nmorph-autocomplete/NmorphAutocomplete.vue2.js +70 -62
- package/dist/components/form/nmorph-text-input/NmorphTextInput.vue.js +19 -17
- package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue.js +8 -7
- package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue2.js +13 -12
- package/dist/index.umd.js +14 -14
- package/dist/package.json.js +1 -1
- package/dist/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue.d.ts +2 -0
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -16,8 +16,8 @@ const k = /* @__PURE__ */ C({
|
|
|
16
16
|
updateOnlyOnScrollEnd: { type: Boolean, required: !1, default: !1 },
|
|
17
17
|
yBarWidthInPx: { type: Number, required: !1, default: 6 },
|
|
18
18
|
xBarWidthInPx: { type: Number, required: !1, default: 6 },
|
|
19
|
-
xGapInPx: { type: Number, required: !1, default:
|
|
20
|
-
yGapInPx: { type: Number, required: !1, default:
|
|
19
|
+
xGapInPx: { type: Number, required: !1, default: 0 },
|
|
20
|
+
yGapInPx: { type: Number, required: !1, default: 0 }
|
|
21
21
|
},
|
|
22
22
|
emits: ["on-scroll", "update:model-value", "on-scroll-end"],
|
|
23
23
|
setup(b, { expose: H, emit: q }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-image-preview{--width: 50px;--height: 50px;width:var(--width);height:var(--height);overflow:hidden}.nmorph-image-preview .nmorph-image-preview__trigger{position:relative;width:100%;height:100%;cursor:pointer}.nmorph-image-preview .nmorph-image-preview__trigger:hover{filter:brightness(.8)}.nmorph-image-preview .nmorph-image-preview__trigger .nmorph-image{width:100%;height:100%}.nmorph-image-preview__portal{display:contents}.nmorph-image-preview__portal .nmorph-image-preview__content{position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:
|
|
1
|
+
.nmorph-image-preview{--width: 50px;--height: 50px;width:var(--width);height:var(--height);overflow:hidden}.nmorph-image-preview .nmorph-image-preview__trigger{position:relative;width:100%;height:100%;cursor:pointer}.nmorph-image-preview .nmorph-image-preview__trigger:hover{filter:brightness(.8)}.nmorph-image-preview .nmorph-image-preview__trigger .nmorph-image{width:100%;height:100%}.nmorph-image-preview__portal{display:contents}.nmorph-image-preview__portal .nmorph-image-preview__content{--nmorph-image-preview-content-width: min( calc(100vw - 96px) , 960px);--nmorph-image-preview-content-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-image-preview-content-width);height:var(--nmorph-image-preview-content-height);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image{width:100%;height:100%;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-image-preview__portal .nmorph-image-preview__actions{position:absolute;bottom:-50px;left:50%;z-index:2;display:flex;height:0;transform:translate(-50%);transition:ease-in-out bottom var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__action-element{margin-right:var(--indentation-03)}.nmorph-image-preview__portal .nmorph-button__content{box-shadow:none}.nmorph-image-preview__portal .nmorph-image-preview__left,.nmorph-image-preview__portal .nmorph-image-preview__right{z-index:2}.nmorph-image-preview__portal .nmorph-image-preview__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__actions{bottom:50px}.nmorph-image-preview__portal.nmorph-image-preview--opened{--nmorph-image-preview-btn-margin: 20px}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__left{left:var(--nmorph-image-preview-btn-margin)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__right{right:var(--nmorph-image-preview-btn-margin)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-autocomplete .nmorph-
|
|
1
|
+
.nmorph-autocomplete .nmorph-autocomplete__input-content{position:relative}.nmorph-autocomplete.nmorph-autocomplete--open .nmorph-autocomplete__input-content{z-index:var(--nmorph-autocomplete-input-z-index)}.nmorph-autocomplete__list{padding:var(--indentation-01) 0}.nmorph-autocomplete__list-item{box-sizing:border-box;padding:var(--indentation-00) var(--default-indentation-input);cursor:pointer}.nmorph-autocomplete__loading{display:flex;justify-content:center;align-items:center;height:100px}.nmorph-autocomplete__list-item:hover,.nmorph-autocomplete__list-item--focused{color:var(--nmorph-white-color);background:var(--nmorph-accent-color)}.nmorph-autocomplete__list--virtual{overflow-y:auto}.nmorph-autocomplete__list--virtual .nmorph-autocomplete__list-item{height:var(--autocomplete-virtual-item-height);overflow:hidden}.nmorph-autocomplete__list--dynamic .nmorph-autocomplete__list-item{height:auto}.nmorph-autocomplete__virtual-spacer{position:relative}.nmorph-autocomplete__virtual-content{position:absolute;top:0;right:0;left:0}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './NmorphAutocomplete.css';
|
|
2
2
|
import v from "./NmorphAutocomplete.vue2.js";
|
|
3
|
-
import { openBlock as l, createElementBlock as t, normalizeClass as
|
|
3
|
+
import { openBlock as l, createElementBlock as t, normalizeStyle as n, normalizeClass as a, createElementVNode as i, createVNode as c, createBlock as y, withCtx as p, renderSlot as m, Fragment as _, renderList as h, createTextVNode as f, toDisplayString as u, createCommentVNode as x } from "vue";
|
|
4
4
|
/* empty css */
|
|
5
5
|
import k from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
6
6
|
const b = { class: "nmorph-autocomplete__input-content" }, g = {
|
|
@@ -10,19 +10,20 @@ const b = { class: "nmorph-autocomplete__input-content" }, g = {
|
|
|
10
10
|
key: 0,
|
|
11
11
|
class: "nmorph-autocomplete__loading"
|
|
12
12
|
}, N = ["id"], C = ["id", "aria-selected", "onClick"], I = ["id"], O = ["id", "aria-selected", "onClick"];
|
|
13
|
-
function V(
|
|
13
|
+
function V(d, s, w, e, S, A) {
|
|
14
14
|
return l(), t(
|
|
15
15
|
"div",
|
|
16
16
|
{
|
|
17
|
-
class:
|
|
17
|
+
class: a(e.modifiers),
|
|
18
|
+
style: n(e.styles)
|
|
18
19
|
},
|
|
19
20
|
[
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
i("div", b, [
|
|
22
|
+
i(
|
|
22
23
|
"div",
|
|
23
24
|
g,
|
|
24
25
|
[
|
|
25
|
-
|
|
26
|
+
c(e.NmorphTextInput, {
|
|
26
27
|
id: e.props.id,
|
|
27
28
|
name: e.props.name,
|
|
28
29
|
autocomplete: e.props.autocomplete,
|
|
@@ -46,17 +47,19 @@ function V(a, s, S, e, z, A) {
|
|
|
46
47
|
open: e.open,
|
|
47
48
|
"relative-element": e.nmorphAutocompleteDOMRef,
|
|
48
49
|
"y-offset": 1,
|
|
49
|
-
"z-index": e.
|
|
50
|
+
"z-index": e.dropdownZIndex,
|
|
51
|
+
"restore-focus": !1,
|
|
52
|
+
"content-class": "nmorph-autocomplete__dropdown",
|
|
50
53
|
"aria-label": e.props.name || e.props.id || "autocomplete",
|
|
51
54
|
onOnOutsideClick: e.closeHandler,
|
|
52
55
|
onOnEscapeKeydown: e.closeHandler
|
|
53
56
|
}, {
|
|
54
57
|
default: p(() => [
|
|
55
58
|
e.loader ? (l(), t("div", H, [
|
|
56
|
-
|
|
57
|
-
|
|
59
|
+
m(d.$slots, "loader", {}, () => [
|
|
60
|
+
c(e.NmorphIcon, { size: "large" }, {
|
|
58
61
|
default: p(() => [
|
|
59
|
-
|
|
62
|
+
c(e.NmorphIconLoader)
|
|
60
63
|
]),
|
|
61
64
|
_: 1
|
|
62
65
|
/* STABLE */
|
|
@@ -66,23 +69,23 @@ function V(a, s, S, e, z, A) {
|
|
|
66
69
|
key: 1,
|
|
67
70
|
id: e.listboxId,
|
|
68
71
|
ref: e.virtualList.containerRef,
|
|
69
|
-
class:
|
|
70
|
-
style:
|
|
72
|
+
class: a(["nmorph-autocomplete__list nmorph-autocomplete__list--virtual", { "nmorph-autocomplete__list--dynamic": e.virtualDynamicHeight }]),
|
|
73
|
+
style: n({ "--autocomplete-virtual-item-height": `${e.virtualItemHeight}px`, maxHeight: e.virtualMaxHeight }),
|
|
71
74
|
role: "listbox",
|
|
72
75
|
onScroll: s[0] || (s[0] = (...o) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...o))
|
|
73
76
|
}, [
|
|
74
|
-
|
|
77
|
+
i(
|
|
75
78
|
"div",
|
|
76
79
|
{
|
|
77
80
|
class: "nmorph-autocomplete__virtual-spacer",
|
|
78
|
-
style:
|
|
81
|
+
style: n(e.virtualSpacerStyle)
|
|
79
82
|
},
|
|
80
83
|
[
|
|
81
|
-
|
|
84
|
+
i(
|
|
82
85
|
"div",
|
|
83
86
|
{
|
|
84
87
|
class: "nmorph-autocomplete__virtual-content",
|
|
85
|
-
style:
|
|
88
|
+
style: n(e.virtualContentStyle)
|
|
86
89
|
},
|
|
87
90
|
[
|
|
88
91
|
(l(!0), t(
|
|
@@ -93,12 +96,12 @@ function V(a, s, S, e, z, A) {
|
|
|
93
96
|
ref_for: !0,
|
|
94
97
|
ref: (r) => e.setVirtualItemRef(r, o.index),
|
|
95
98
|
key: o.index,
|
|
96
|
-
class:
|
|
99
|
+
class: a(["nmorph-autocomplete__list-item", { "nmorph-autocomplete__list-item--focused": o.index === e.currentIndex }]),
|
|
97
100
|
role: "option",
|
|
98
101
|
"aria-selected": o.index === e.currentIndex,
|
|
99
102
|
onClick: () => e.clickHandler(o.item)
|
|
100
103
|
}, [
|
|
101
|
-
|
|
104
|
+
m(d.$slots, "default", {
|
|
102
105
|
scope: o.item
|
|
103
106
|
}, () => [
|
|
104
107
|
f(
|
|
@@ -131,12 +134,12 @@ function V(a, s, S, e, z, A) {
|
|
|
131
134
|
h(e.filteredList, (o, r) => (l(), t("div", {
|
|
132
135
|
id: e.getOptionId(r),
|
|
133
136
|
key: r,
|
|
134
|
-
class:
|
|
137
|
+
class: a(["nmorph-autocomplete__list-item", { "nmorph-autocomplete__list-item--focused": r === e.currentIndex }]),
|
|
135
138
|
role: "option",
|
|
136
139
|
"aria-selected": r === e.currentIndex,
|
|
137
140
|
onClick: () => e.clickHandler(o)
|
|
138
141
|
}, [
|
|
139
|
-
|
|
142
|
+
m(d.$slots, "default", { scope: o }, () => [
|
|
140
143
|
f(
|
|
141
144
|
u(o.value),
|
|
142
145
|
1
|
|
@@ -153,8 +156,8 @@ function V(a, s, S, e, z, A) {
|
|
|
153
156
|
/* FORWARDED */
|
|
154
157
|
}, 8, ["open", "relative-element", "z-index", "aria-label"])) : x("v-if", !0)
|
|
155
158
|
],
|
|
156
|
-
|
|
157
|
-
/* CLASS */
|
|
159
|
+
6
|
|
160
|
+
/* CLASS, STYLE */
|
|
158
161
|
);
|
|
159
162
|
}
|
|
160
163
|
const M = /* @__PURE__ */ k(v, [["render", V], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-autocomplete/NmorphAutocomplete.vue"]]);
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import './NmorphAutocomplete.css';
|
|
2
|
-
import { defineComponent as
|
|
3
|
-
import { useModifiers as
|
|
4
|
-
import { useVirtualList as
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
|
|
2
|
+
import { defineComponent as P, ref as s, computed as l, watch as c, nextTick as Y } from "vue";
|
|
3
|
+
import { useModifiers as G } from "../../../utils/create-modifiers.js";
|
|
4
|
+
import { useVirtualList as J } from "../../../hooks/use-virtual-list.js";
|
|
5
|
+
import { useZIndex as K } from "../../../hooks/use-z-index.js";
|
|
6
|
+
import Q from "../nmorph-text-input/NmorphTextInput.vue.js";
|
|
7
|
+
import W from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
|
|
8
|
+
import X from "../../basic/nmorph-icon/NmorphIcon.vue.js";
|
|
9
|
+
import ee from "../../../assets/icons/loader.svg.js";
|
|
10
|
+
const se = /* @__PURE__ */ P({
|
|
10
11
|
__name: "NmorphAutocomplete",
|
|
11
12
|
props: {
|
|
12
13
|
modelValue: { type: String, required: !1, default: "" },
|
|
@@ -28,74 +29,81 @@ const le = /* @__PURE__ */ z({
|
|
|
28
29
|
tabindex: { type: Number, required: !1 }
|
|
29
30
|
},
|
|
30
31
|
emits: ["update:model-value", "select"],
|
|
31
|
-
setup(
|
|
32
|
-
|
|
33
|
-
const
|
|
34
|
-
() =>
|
|
35
|
-
"nmorph-autocomplete": []
|
|
32
|
+
setup(_, { expose: C, emit: $ }) {
|
|
33
|
+
C();
|
|
34
|
+
const t = _, u = s(t.modelValue), d = $, L = l(
|
|
35
|
+
() => G({
|
|
36
|
+
"nmorph-autocomplete": [`${a.value && "open"}`]
|
|
36
37
|
})
|
|
37
|
-
),
|
|
38
|
-
|
|
39
|
-
},
|
|
40
|
-
|
|
41
|
-
},
|
|
42
|
-
enabled:
|
|
43
|
-
itemHeight:
|
|
44
|
-
overscan:
|
|
45
|
-
dynamic:
|
|
46
|
-
}),
|
|
47
|
-
height: `${
|
|
48
|
-
})),
|
|
49
|
-
transform: `translateY(${
|
|
50
|
-
})),
|
|
51
|
-
c(
|
|
52
|
-
|
|
38
|
+
), i = s(!1), O = (e) => {
|
|
39
|
+
i.value = e === "", u.value = e, a.value = !i.value && r.value.length > 0, o.value = 0, d("update:model-value", u.value);
|
|
40
|
+
}, a = s(!1), T = s(null), y = () => {
|
|
41
|
+
i.value = !0, a.value = !1;
|
|
42
|
+
}, r = l(() => t.list.filter((e) => Object.keys(e).some((g) => String(e[g]).toLowerCase().includes(u.value.toLowerCase())))), f = l(() => t.virtual && r.value.length > 0), x = l(() => t.virtualItemHeight), I = l(() => t.virtualOverscan), b = l(() => t.virtualDynamicHeight), n = J(r, {
|
|
43
|
+
enabled: f,
|
|
44
|
+
itemHeight: x,
|
|
45
|
+
overscan: I,
|
|
46
|
+
dynamic: b
|
|
47
|
+
}), A = l(() => n.virtualItems.value), V = l(() => ({
|
|
48
|
+
height: `${n.totalHeight.value}px`
|
|
49
|
+
})), M = l(() => ({
|
|
50
|
+
transform: `translateY(${n.offsetTop.value}px)`
|
|
51
|
+
})), H = (e) => typeof e == "number" ? `${e}px` : e, z = l(() => H(t.virtualMaxHeight)), o = s(0), v = l(() => r.value[o.value]), m = l(() => `${t.id || t.name || "nmorph-autocomplete"}-listbox`), q = (e) => `${m.value}-option-${e}`;
|
|
52
|
+
c(
|
|
53
|
+
() => t.modelValue,
|
|
54
|
+
(e) => {
|
|
55
|
+
e !== u.value && (u.value = e);
|
|
56
|
+
}
|
|
57
|
+
), c(r, async (e) => {
|
|
58
|
+
a.value = !i.value && u.value !== "" && e.length > 0, o.value = 0, await Y(), n.scrollToIndex(0), n.refresh();
|
|
53
59
|
});
|
|
54
|
-
const
|
|
55
|
-
d("select", e),
|
|
56
|
-
|
|
60
|
+
const h = (e) => {
|
|
61
|
+
d("select", e), u.value = e.value, d("update:model-value", u.value), setTimeout(() => {
|
|
62
|
+
i.value = !0, a.value = !1;
|
|
57
63
|
});
|
|
58
|
-
},
|
|
59
|
-
|
|
60
|
-
},
|
|
61
|
-
|
|
62
|
-
},
|
|
63
|
-
c(
|
|
64
|
-
e !== "" &&
|
|
65
|
-
}), c(
|
|
66
|
-
e && (
|
|
64
|
+
}, B = (e) => {
|
|
65
|
+
h(e);
|
|
66
|
+
}, E = () => {
|
|
67
|
+
i.value = !1, a.value = r.value.length > 0;
|
|
68
|
+
}, p = s(!1);
|
|
69
|
+
c(u, async (e) => {
|
|
70
|
+
e !== "" && t.actionCallback && (p.value = !0, await t.actionCallback(), p.value = !1);
|
|
71
|
+
}), c(p, (e) => {
|
|
72
|
+
e && (a.value = !0);
|
|
67
73
|
}), c(o, (e) => {
|
|
68
|
-
|
|
74
|
+
f.value && n.scrollToIndex(e);
|
|
69
75
|
});
|
|
70
|
-
const
|
|
71
|
-
|
|
72
|
-
}, w = () => {
|
|
73
|
-
l.value.length && (r.value = !0, o.value = (o.value - 1 + l.value.length) % l.value.length);
|
|
76
|
+
const w = () => {
|
|
77
|
+
r.value.length && (a.value = !0, o.value = (o.value + 1) % r.value.length);
|
|
74
78
|
}, N = () => {
|
|
75
|
-
|
|
76
|
-
},
|
|
77
|
-
|
|
78
|
-
},
|
|
79
|
+
r.value.length && (a.value = !0, o.value = (o.value - 1 + r.value.length) % r.value.length);
|
|
80
|
+
}, S = () => {
|
|
81
|
+
!a.value || !v.value || h(v.value);
|
|
82
|
+
}, j = (e) => {
|
|
83
|
+
e.key === "ArrowDown" ? (e.preventDefault(), w()) : e.key === "ArrowUp" ? (e.preventDefault(), N()) : e.key === "Enter" ? (e.preventDefault(), S()) : e.key === "Escape" && (e.preventDefault(), y());
|
|
84
|
+
}, R = l(() => ({
|
|
79
85
|
role: "combobox",
|
|
80
86
|
"aria-autocomplete": "list",
|
|
81
|
-
"aria-expanded":
|
|
87
|
+
"aria-expanded": a.value,
|
|
82
88
|
"aria-controls": m.value,
|
|
83
|
-
"aria-activedescendant":
|
|
84
|
-
})),
|
|
85
|
-
const
|
|
86
|
-
|
|
87
|
-
},
|
|
88
|
-
|
|
89
|
+
"aria-activedescendant": a.value ? q(o.value) : void 0
|
|
90
|
+
})), U = (e, g) => {
|
|
91
|
+
const F = e instanceof Element ? e : e?.$el;
|
|
92
|
+
n.measureElement(g, F);
|
|
93
|
+
}, D = K(a, () => t.zIndex), Z = l(() => ({
|
|
94
|
+
"--nmorph-autocomplete-input-z-index": D.value + 1
|
|
95
|
+
})), k = { props: t, initialValue: u, emit: d, modifiers: L, userClosed: i, updateValueHandler: O, open: a, nmorphAutocompleteDOMRef: T, closeHandler: y, filteredList: r, virtualEnabled: f, virtualItemHeight: x, virtualOverscan: I, virtualDynamicHeight: b, virtualList: n, virtualItems: A, virtualSpacerStyle: V, virtualContentStyle: M, getCssSize: H, virtualMaxHeight: z, currentIndex: o, activeItem: v, listboxId: m, getOptionId: q, selectItem: h, clickHandler: B, focusHandler: E, loader: p, arrowDownHandler: w, arrowUpHandler: N, enterHandler: S, keydownHandler: j, inputAttrs: R, setVirtualItemRef: U, dropdownZIndex: D, styles: Z, get NmorphIcon() {
|
|
96
|
+
return X;
|
|
89
97
|
}, get NmorphDropdown() {
|
|
90
|
-
return
|
|
98
|
+
return W;
|
|
91
99
|
}, get NmorphTextInput() {
|
|
92
|
-
return
|
|
100
|
+
return Q;
|
|
93
101
|
}, get NmorphIconLoader() {
|
|
94
|
-
return
|
|
102
|
+
return ee;
|
|
95
103
|
} };
|
|
96
|
-
return Object.defineProperty(
|
|
104
|
+
return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
|
|
97
105
|
}
|
|
98
106
|
});
|
|
99
107
|
export {
|
|
100
|
-
|
|
108
|
+
se as default
|
|
101
109
|
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import s from "./NmorphTextInput.vue2.js";
|
|
2
|
-
import { openBlock as n, createElementBlock as r, normalizeStyle as m, normalizeClass as c, createElementVNode as i, renderSlot as h, createCommentVNode as l, mergeProps as
|
|
3
|
-
import
|
|
4
|
-
const
|
|
2
|
+
import { openBlock as n, createElementBlock as r, normalizeStyle as m, normalizeClass as c, createElementVNode as i, renderSlot as h, createCommentVNode as l, mergeProps as f, withKeys as y, createBlock as d, withModifiers as _, withCtx as a, createVNode as u, resolveDynamicComponent as b } from "vue";
|
|
3
|
+
import x from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
4
|
+
const v = { class: "nmorph-text-input__input-side" }, k = {
|
|
5
5
|
key: 0,
|
|
6
6
|
class: "nmorph-text-input__prepend-icon"
|
|
7
|
-
},
|
|
8
|
-
function
|
|
7
|
+
}, w = ["id", "name", "autocomplete", "tabindex", "type", "placeholder", "disabled", "value"];
|
|
8
|
+
function B(p, o, N, e, C, I) {
|
|
9
9
|
return n(), r(
|
|
10
10
|
"div",
|
|
11
11
|
{
|
|
@@ -13,11 +13,11 @@ function w(p, o, B, e, N, C) {
|
|
|
13
13
|
style: m(e.styles)
|
|
14
14
|
},
|
|
15
15
|
[
|
|
16
|
-
i("div",
|
|
17
|
-
e.slots["prepend-icon"] ? (n(), r("div",
|
|
16
|
+
i("div", v, [
|
|
17
|
+
e.slots["prepend-icon"] ? (n(), r("div", k, [
|
|
18
18
|
h(p.$slots, "prepend-icon")
|
|
19
19
|
])) : l("v-if", !0),
|
|
20
|
-
i("input",
|
|
20
|
+
i("input", f({
|
|
21
21
|
id: e.id,
|
|
22
22
|
ref: "inputDOMRef",
|
|
23
23
|
name: e.name,
|
|
@@ -33,21 +33,23 @@ function w(p, o, B, e, N, C) {
|
|
|
33
33
|
onFocus: e.handleFocus,
|
|
34
34
|
onBlur: e.handleBlur,
|
|
35
35
|
onKeydown: o[0] || (o[0] = (t) => e.emit("keydown", t)),
|
|
36
|
-
onKeyup: o[1] || (o[1] =
|
|
37
|
-
}), null, 16,
|
|
38
|
-
e.props.typePassword || e.props.clearable ? (n(),
|
|
36
|
+
onKeyup: o[1] || (o[1] = y((t) => e.emit("on-enter"), ["enter"]))
|
|
37
|
+
}), null, 16, w),
|
|
38
|
+
e.props.typePassword || e.props.clearable ? (n(), d(e.NmorphButton, {
|
|
39
39
|
key: 1,
|
|
40
40
|
disabled: e.props.disabled,
|
|
41
41
|
class: "nmorph-text-input__password-btn",
|
|
42
42
|
"style-type": "transparent",
|
|
43
43
|
width: "32px",
|
|
44
44
|
height: e.props.height,
|
|
45
|
+
onMousedown: o[2] || (o[2] = _(() => {
|
|
46
|
+
}, ["prevent"])),
|
|
45
47
|
onClick: e.actionButtonClickHandler
|
|
46
48
|
}, {
|
|
47
|
-
default:
|
|
48
|
-
|
|
49
|
-
default:
|
|
50
|
-
(n(),
|
|
49
|
+
default: a(() => [
|
|
50
|
+
u(e.NmorphIcon, null, {
|
|
51
|
+
default: a(() => [
|
|
52
|
+
(n(), d(b(e.actionIcon)))
|
|
51
53
|
]),
|
|
52
54
|
_: 1
|
|
53
55
|
/* STABLE */
|
|
@@ -62,7 +64,7 @@ function w(p, o, B, e, N, C) {
|
|
|
62
64
|
/* CLASS, STYLE */
|
|
63
65
|
);
|
|
64
66
|
}
|
|
65
|
-
const
|
|
67
|
+
const M = /* @__PURE__ */ x(s, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-text-input/NmorphTextInput.vue"]]);
|
|
66
68
|
export {
|
|
67
|
-
|
|
69
|
+
M as default
|
|
68
70
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import './NmorphDropdown.css';
|
|
2
2
|
import n from "./NmorphDropdown.vue2.js";
|
|
3
|
-
import { openBlock as r, createBlock as a, withCtx as
|
|
3
|
+
import { openBlock as r, createBlock as a, withCtx as s, createElementBlock as p, normalizeStyle as l, normalizeClass as c, renderSlot as i, createCommentVNode as t } from "vue";
|
|
4
4
|
/* empty css */
|
|
5
|
-
import
|
|
5
|
+
import d from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
6
6
|
const m = ["role", "aria-label"];
|
|
7
7
|
function f(e, _, h, o, w, k) {
|
|
8
8
|
return r(), a(o.NmorphOverlay, {
|
|
@@ -11,26 +11,27 @@ function f(e, _, h, o, w, k) {
|
|
|
11
11
|
"z-index": o.props.zIndex,
|
|
12
12
|
"close-on-escape": o.props.closeOnEscape,
|
|
13
13
|
"trap-focus": o.props.trapFocus,
|
|
14
|
+
"restore-focus": o.props.restoreFocus,
|
|
14
15
|
onOnOutsideClick: o.outsideClickHandler,
|
|
15
16
|
onOnEscapeKeydown: o.escapeHandler
|
|
16
17
|
}, {
|
|
17
|
-
default:
|
|
18
|
+
default: s(() => [
|
|
18
19
|
o.props.open ? (r(), p("div", {
|
|
19
20
|
key: 0,
|
|
20
21
|
ref: "dropdownDOMRef",
|
|
21
22
|
class: c([o.modifiers, o.props.contentClass]),
|
|
22
|
-
style:
|
|
23
|
+
style: l(o.dropdownStyle),
|
|
23
24
|
role: o.props.role || void 0,
|
|
24
25
|
"aria-label": o.props.ariaLabel || void 0
|
|
25
26
|
}, [
|
|
26
27
|
i(e.$slots, "default")
|
|
27
|
-
], 14, m)) :
|
|
28
|
+
], 14, m)) : t("v-if", !0)
|
|
28
29
|
]),
|
|
29
30
|
_: 3
|
|
30
31
|
/* FORWARDED */
|
|
31
|
-
}, 8, ["show", "z-index", "close-on-escape", "trap-focus"]);
|
|
32
|
+
}, 8, ["show", "z-index", "close-on-escape", "trap-focus", "restore-focus"]);
|
|
32
33
|
}
|
|
33
|
-
const O = /* @__PURE__ */
|
|
34
|
+
const O = /* @__PURE__ */ d(n, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-dropdown/NmorphDropdown.vue"]]);
|
|
34
35
|
export {
|
|
35
36
|
O as default
|
|
36
37
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import './NmorphDropdown.css';
|
|
2
|
-
import { defineComponent as
|
|
2
|
+
import { defineComponent as q, ref as w, toRef as r, computed as i, watch as b } from "vue";
|
|
3
3
|
import { useModifiers as v } from "../../../utils/create-modifiers.js";
|
|
4
4
|
import { usePlacement as x } from "../../../hooks/use-placement.js";
|
|
5
5
|
import O from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
|
|
6
|
-
const k = /* @__PURE__ */
|
|
6
|
+
const k = /* @__PURE__ */ q({
|
|
7
7
|
__name: "NmorphDropdown",
|
|
8
8
|
props: {
|
|
9
9
|
open: { type: Boolean, required: !0 },
|
|
@@ -18,6 +18,7 @@ const k = /* @__PURE__ */ w({
|
|
|
18
18
|
zIndex: { type: Number, required: !1, default: void 0 },
|
|
19
19
|
closeOnEscape: { type: Boolean, required: !1, default: !0 },
|
|
20
20
|
trapFocus: { type: Boolean, required: !1, default: !1 },
|
|
21
|
+
restoreFocus: { type: Boolean, required: !1, default: !0 },
|
|
21
22
|
role: { type: String, required: !1, default: "listbox" },
|
|
22
23
|
ariaLabel: { type: String, required: !1, default: "" },
|
|
23
24
|
contentClass: { type: String, required: !1, default: "" }
|
|
@@ -25,7 +26,7 @@ const k = /* @__PURE__ */ w({
|
|
|
25
26
|
emits: ["on-outside-click", "on-escape-keydown"],
|
|
26
27
|
setup(f, { expose: m, emit: c }) {
|
|
27
28
|
m();
|
|
28
|
-
const e = f,
|
|
29
|
+
const e = f, l = c, d = w(null), { placementCoords: n, placementReady: a, adjustPlacement: s } = x({
|
|
29
30
|
initialPlacement: r(e, "placement"),
|
|
30
31
|
contentDOMElement: d,
|
|
31
32
|
relativeElement: r(e, "relativeElement"),
|
|
@@ -36,31 +37,31 @@ const k = /* @__PURE__ */ w({
|
|
|
36
37
|
() => v({
|
|
37
38
|
"nmorph-dropdown": [`${!e.open && "closed"}`]
|
|
38
39
|
})
|
|
39
|
-
), o = (t) => typeof t == "number" ? `${t}px` : t,
|
|
40
|
+
), o = (t) => typeof t == "number" ? `${t}px` : t, u = i(
|
|
40
41
|
() => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : o(e.width)
|
|
41
42
|
), h = i(() => ({
|
|
42
|
-
"--nmorph-dropdown-width":
|
|
43
|
+
"--nmorph-dropdown-width": u.value,
|
|
43
44
|
"--nmorph-dropdown-min-width": o(e.minWidth) || "auto",
|
|
44
45
|
"--nmorph-dropdown-max-width": o(e.maxWidth) || "none",
|
|
45
|
-
left:
|
|
46
|
-
top:
|
|
46
|
+
left: n.value.x,
|
|
47
|
+
top: n.value.y,
|
|
47
48
|
visibility: e.open && a.value ? "visible" : "hidden"
|
|
48
49
|
}));
|
|
49
|
-
|
|
50
|
+
b(
|
|
50
51
|
() => e.open,
|
|
51
52
|
(t) => {
|
|
52
53
|
t && s();
|
|
53
54
|
},
|
|
54
55
|
{ flush: "post" }
|
|
55
56
|
);
|
|
56
|
-
const
|
|
57
|
-
|
|
57
|
+
const p = { props: e, emit: l, dropdownDOMRef: d, placementCoords: n, placementReady: a, adjustPlacement: s, modifiers: y, getCssSize: o, width: u, dropdownStyle: h, outsideClickHandler: () => {
|
|
58
|
+
l("on-outside-click");
|
|
58
59
|
}, escapeHandler: () => {
|
|
59
|
-
|
|
60
|
+
l("on-escape-keydown");
|
|
60
61
|
}, get NmorphOverlay() {
|
|
61
62
|
return O;
|
|
62
63
|
} };
|
|
63
|
-
return Object.defineProperty(
|
|
64
|
+
return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
|
|
64
65
|
}
|
|
65
66
|
});
|
|
66
67
|
export {
|