mhz-ui 1.0.27 → 1.0.29
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/UiButton/UiButton.css +1 -1
- package/dist/UiButton/UiButton.d.ts +3 -9
- package/dist/UiButton/UiButton.js +13 -15
- package/dist/UiSearch/UiSearch.css +1 -1
- package/dist/UiSearch/UiSearch.js +45 -45
- package/dist/breakpoints.scss +3 -3
- package/dist/colors.scss +2 -1
- package/package.json +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._button_1nlbc_1{position:relative;display:inline-flex;flex-shrink:0;gap:8px;align-items:center;justify-content:center;height:40px;padding:16px 32px;overflow:hidden;font-size:.875rem;line-height:1.5;color:var(--color-white);text-decoration:none;white-space:nowrap;user-select:none;background:var(--color-primary);border:2px solid var(--color-transparent);border-radius:16px;transition:all .2s}._button_1nlbc_1:hover{color:var(--color-white);cursor:pointer;background:var(--color-primary-dark);border-color:var(--color-transparent)}._button_1nlbc_1:disabled{color:var(--color-gray-dark-extra);cursor:default;background:var(--color-gray-light-extra)}._button_1nlbc_1[data-layout=accent]{background:var(--color-accent)}._button_1nlbc_1[data-layout=accent]:hover{background:var(--color-accent-dark)}._button_1nlbc_1[data-layout=gradient]{font-weight:700;background:linear-gradient(340deg,var(--color-accent) 20%,var(--color-accent-light) 96%);border:linear-gradient(340deg,var(--color-accent) 20%,var(--color-accent-light) 96%)}._button_1nlbc_1[data-layout=gradient]:hover{filter:hue-rotate(15deg)}._button_1nlbc_1[data-layout=secondary]{color:var(--color-primary);background-color:var(--color-transparent);border-color:var(--color-primary)}._button_1nlbc_1[data-layout=secondary]:hover{color:var(--color-primary-dark);border-color:var(--color-primary-dark)}._button_1nlbc_1[data-layout=secondary]:disabled{color:var(--color-gray-dark-extra);background:var(--color-white);border-color:var(--color-gray-light-extra)}._button_1nlbc_1[data-layout=plain]{height:auto;padding:0;font-size:1rem;color:var(--color-primary);text-decoration:underline;background:none;border:none;border-radius:0}._button_1nlbc_1[data-layout=plain]:hover{color:var(--color-primary-dark)}._button_1nlbc_1[data-layout=plain]:disabled{color:var(--color-gray-dark-extra)}
|
|
@@ -5,15 +5,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
5
5
|
default: string;
|
|
6
6
|
};
|
|
7
7
|
layout: {
|
|
8
|
-
type: import("vue").PropType<"primary" | "secondary" | "plain">;
|
|
8
|
+
type: import("vue").PropType<"primary" | "secondary" | "plain" | "accent" | "gradient">;
|
|
9
9
|
default: string;
|
|
10
10
|
};
|
|
11
11
|
isDisabled: {
|
|
12
12
|
type: import("vue").PropType<boolean>;
|
|
13
13
|
};
|
|
14
|
-
isAccent: {
|
|
15
|
-
type: import("vue").PropType<boolean>;
|
|
16
|
-
};
|
|
17
14
|
icon: {
|
|
18
15
|
type: import("vue").PropType<FunctionalComponent<{}, {}, any>>;
|
|
19
16
|
default: undefined;
|
|
@@ -24,22 +21,19 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
|
|
|
24
21
|
default: string;
|
|
25
22
|
};
|
|
26
23
|
layout: {
|
|
27
|
-
type: import("vue").PropType<"primary" | "secondary" | "plain">;
|
|
24
|
+
type: import("vue").PropType<"primary" | "secondary" | "plain" | "accent" | "gradient">;
|
|
28
25
|
default: string;
|
|
29
26
|
};
|
|
30
27
|
isDisabled: {
|
|
31
28
|
type: import("vue").PropType<boolean>;
|
|
32
29
|
};
|
|
33
|
-
isAccent: {
|
|
34
|
-
type: import("vue").PropType<boolean>;
|
|
35
|
-
};
|
|
36
30
|
icon: {
|
|
37
31
|
type: import("vue").PropType<FunctionalComponent<{}, {}, any>>;
|
|
38
32
|
default: undefined;
|
|
39
33
|
};
|
|
40
34
|
}>>, {
|
|
41
35
|
type: "button" | "submit";
|
|
42
|
-
layout: "primary" | "secondary" | "plain";
|
|
36
|
+
layout: "primary" | "secondary" | "plain" | "accent" | "gradient";
|
|
43
37
|
icon: FunctionalComponent<{}, {}, any>;
|
|
44
38
|
}, {}>, {
|
|
45
39
|
default?(_: {}): any;
|
|
@@ -1,37 +1,35 @@
|
|
|
1
1
|
import "./UiButton.css";
|
|
2
|
-
import { defineComponent as s, openBlock as
|
|
2
|
+
import { defineComponent as s, openBlock as e, createElementBlock as a, normalizeClass as c, createBlock as l, resolveDynamicComponent as u, createCommentVNode as i, renderSlot as d } from "vue";
|
|
3
3
|
import { _ as r } from "../_plugin-vue_export-helper-dad06003.js";
|
|
4
|
-
const p = "primary",
|
|
4
|
+
const p = "primary", _ = "button", y = void 0, b = ["data-layout", "disabled", "type"], m = /* @__PURE__ */ s({
|
|
5
5
|
__name: "UiButton",
|
|
6
6
|
props: {
|
|
7
7
|
layout: { default: p },
|
|
8
|
-
type: { default:
|
|
8
|
+
type: { default: _ },
|
|
9
9
|
isDisabled: { type: Boolean },
|
|
10
|
-
|
|
11
|
-
icon: { type: [Function, Object], default: _ }
|
|
10
|
+
icon: { type: [Function, Object], default: y }
|
|
12
11
|
},
|
|
13
12
|
setup(n) {
|
|
14
13
|
const t = n;
|
|
15
|
-
return (
|
|
16
|
-
class: c(
|
|
14
|
+
return (o, U) => (e(), a("button", {
|
|
15
|
+
class: c(o.$style.button),
|
|
17
16
|
"data-layout": t.layout,
|
|
18
|
-
"data-accent": t.isAccent,
|
|
19
17
|
disabled: t.isDisabled,
|
|
20
18
|
type: t.type,
|
|
21
19
|
"data-test": "ui-button"
|
|
22
20
|
}, [
|
|
23
|
-
t.icon ? (
|
|
21
|
+
t.icon ? (e(), l(u(t.icon), {
|
|
24
22
|
key: 0,
|
|
25
23
|
"data-test": "ui-button-icon"
|
|
26
24
|
})) : i("", !0),
|
|
27
|
-
d(
|
|
28
|
-
], 10,
|
|
25
|
+
d(o.$slots, "default")
|
|
26
|
+
], 10, b));
|
|
29
27
|
}
|
|
30
|
-
}), f = "
|
|
28
|
+
}), f = "_button_1nlbc_1", B = {
|
|
31
29
|
button: f
|
|
32
|
-
},
|
|
30
|
+
}, D = {
|
|
33
31
|
$style: B
|
|
34
|
-
},
|
|
32
|
+
}, T = /* @__PURE__ */ r(m, [["__cssModules", D]]);
|
|
35
33
|
export {
|
|
36
|
-
|
|
34
|
+
T as default
|
|
37
35
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._container_gyho3_1{position:relative;width:320px}._results_gyho3_6{position:absolute;z-index:2;display:flex;flex-direction:column;gap:8px;width:100%;max-height:320px;padding:16px;margin-top:8px;overflow-y:auto;background-color:var(--color-white);border-radius:16px;box-shadow:0 0 16px -8px var(--color-black-transparent)}._resultsInner_gyho3_22{display:flex;flex-direction:column;gap:4px}._resultsInner_gyho3_22:empty{display:none}._type_gyho3_31{font-weight:700;text-transform:capitalize}._link_gyho3_36{display:flex;gap:4px;text-decoration:none}@media (max-width: 1260px){._container_gyho3_1{width:280px}}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import "./UiSearch.css";
|
|
2
|
-
import { openBlock as
|
|
2
|
+
import { openBlock as s, createElementBlock as n, createElementVNode as O, defineComponent as R, ref as N, computed as I, normalizeClass as k, createVNode as T, withKeys as b, unref as V, Fragment as d, createTextVNode as w, toDisplayString as S, createCommentVNode as p, renderList as E, createBlock as B, resolveDynamicComponent as L, withCtx as U } from "vue";
|
|
3
3
|
import { RouterLink as $ } from "vue-router";
|
|
4
4
|
import { o as M } from "../index-e9b7d99f.js";
|
|
5
5
|
import D from "../UiInput/UiInput.js";
|
|
6
6
|
import { _ as Z } from "../_plugin-vue_export-helper-dad06003.js";
|
|
7
|
-
const
|
|
7
|
+
const F = {
|
|
8
8
|
trailing: !0
|
|
9
9
|
};
|
|
10
|
-
function
|
|
11
|
-
if (e = { ...
|
|
10
|
+
function K(m, r = 25, e = {}) {
|
|
11
|
+
if (e = { ...F, ...e }, !Number.isFinite(r))
|
|
12
12
|
throw new TypeError("Expected `wait` to be a finite number");
|
|
13
13
|
let u, c, y = [], o, a;
|
|
14
|
-
const f = (l, i) => (o =
|
|
14
|
+
const f = (l, i) => (o = P(m, l, i), o.finally(() => {
|
|
15
15
|
if (o = null, e.trailing && a && !c) {
|
|
16
16
|
const _ = f(l, a);
|
|
17
17
|
return a = null, _;
|
|
@@ -23,31 +23,31 @@ function F(m, r = 25, e = {}) {
|
|
|
23
23
|
clearTimeout(c), c = setTimeout(() => {
|
|
24
24
|
c = null;
|
|
25
25
|
const t = e.leading ? u : f(this, l);
|
|
26
|
-
for (const
|
|
27
|
-
|
|
26
|
+
for (const g of y)
|
|
27
|
+
g(t);
|
|
28
28
|
y = [];
|
|
29
29
|
}, r), _ ? (u = f(this, l), i(u)) : y.push(i);
|
|
30
30
|
});
|
|
31
31
|
};
|
|
32
32
|
}
|
|
33
|
-
async function
|
|
33
|
+
async function P(m, r, e) {
|
|
34
34
|
return await m.apply(r, e);
|
|
35
35
|
}
|
|
36
|
-
const
|
|
36
|
+
const A = {
|
|
37
37
|
xmlns: "http://www.w3.org/2000/svg",
|
|
38
38
|
width: "16",
|
|
39
39
|
height: "16",
|
|
40
40
|
fill: "none"
|
|
41
|
-
},
|
|
41
|
+
}, Y = /* @__PURE__ */ O("path", {
|
|
42
42
|
fill: "#dfdfdf",
|
|
43
43
|
d: "M13.5 15.338a.5.5 0 1 0 .737-.676l-.736.676Zm.737-.676-1.398-1.523-.737.676 1.399 1.523.736-.676ZM13.5 7.628c0 3.394-2.695 6.129-6 6.129v1c3.875 0 7-3.201 7-7.129h-1Zm-6 6.129c-3.305 0-6-2.735-6-6.129h-1c0 3.928 3.125 7.129 7 7.129v-1Zm-6-6.129c0-3.393 2.695-6.128 6-6.128v-1C3.625.5.5 3.7.5 7.628h1Zm6-6.128c3.305 0 6 2.735 6 6.128h1C14.5 3.701 11.375.5 7.5.5v1Z"
|
|
44
|
-
}, null, -1),
|
|
45
|
-
|
|
44
|
+
}, null, -1), j = [
|
|
45
|
+
Y
|
|
46
46
|
];
|
|
47
|
-
function
|
|
48
|
-
return
|
|
47
|
+
function x(m, r) {
|
|
48
|
+
return s(), n("svg", A, j);
|
|
49
49
|
}
|
|
50
|
-
const
|
|
50
|
+
const z = { render: x }, G = "Please enter 3 or more symbols", q = "Loading...", H = "No results", J = 300, Q = /* @__PURE__ */ R({
|
|
51
51
|
__name: "UiSearch",
|
|
52
52
|
props: {
|
|
53
53
|
modelValue: {},
|
|
@@ -57,7 +57,7 @@ const x = { render: j }, z = "Please enter 3 or more symbols", G = "Loading...",
|
|
|
57
57
|
},
|
|
58
58
|
emits: ["update:modelValue"],
|
|
59
59
|
setup(m, { emit: r }) {
|
|
60
|
-
const e = m, u = N(!1), c =
|
|
60
|
+
const e = m, u = N(!1), c = K(async (t) => {
|
|
61
61
|
r("update:modelValue", t);
|
|
62
62
|
}, J);
|
|
63
63
|
async function y(t) {
|
|
@@ -72,13 +72,13 @@ const x = { render: j }, z = "Please enter 3 or more symbols", G = "Loading...",
|
|
|
72
72
|
function f() {
|
|
73
73
|
a(), r("update:modelValue", "");
|
|
74
74
|
}
|
|
75
|
-
const l = I(() => e.results ? Object.values(e.results).reduce((t,
|
|
75
|
+
const l = I(() => e.results ? Object.values(e.results).reduce((t, g) => t + (g ? g.length : 0), 0) : !1), i = N();
|
|
76
76
|
M(i, () => {
|
|
77
77
|
a();
|
|
78
78
|
});
|
|
79
79
|
const _ = I(() => window.IS_STORYBOOK ? "a" : $);
|
|
80
|
-
return (t,
|
|
81
|
-
class:
|
|
80
|
+
return (t, g) => (s(), n("div", {
|
|
81
|
+
class: k(t.$style.container),
|
|
82
82
|
ref_key: "containerElement",
|
|
83
83
|
ref: i
|
|
84
84
|
}, [
|
|
@@ -87,62 +87,62 @@ const x = { render: j }, z = "Please enter 3 or more symbols", G = "Loading...",
|
|
|
87
87
|
"onUpdate:modelValue": y,
|
|
88
88
|
onClick: o,
|
|
89
89
|
onKeyup: b(a, ["esc"]),
|
|
90
|
-
appendIcon: V(
|
|
90
|
+
appendIcon: V(z),
|
|
91
91
|
placeholder: "Search",
|
|
92
92
|
"data-test": "ui-search"
|
|
93
93
|
}, null, 8, ["modelValue", "onKeyup", "appendIcon"]),
|
|
94
|
-
u.value && e.modelValue.length ? (
|
|
94
|
+
u.value && e.modelValue.length ? (s(), n("div", {
|
|
95
95
|
key: 0,
|
|
96
|
-
class:
|
|
96
|
+
class: k(t.$style.results),
|
|
97
97
|
"data-test": "ui-search-results"
|
|
98
98
|
}, [
|
|
99
|
-
e.modelValue.length < 3 ? (
|
|
100
|
-
w(S(V(z)), 1)
|
|
101
|
-
], 64)) : h("", !0),
|
|
102
|
-
e.modelValue.length > 2 && !e.isSuccess ? (n(), s(d, { key: 1 }, [
|
|
99
|
+
e.modelValue.length < 3 ? (s(), n(d, { key: 0 }, [
|
|
103
100
|
w(S(V(G)), 1)
|
|
104
|
-
], 64)) :
|
|
105
|
-
e.modelValue.length > 2 && !
|
|
101
|
+
], 64)) : p("", !0),
|
|
102
|
+
e.modelValue.length > 2 && !e.isSuccess ? (s(), n(d, { key: 1 }, [
|
|
103
|
+
w(S(V(q)), 1)
|
|
104
|
+
], 64)) : p("", !0),
|
|
105
|
+
e.modelValue.length > 2 && !l.value && e.isSuccess ? (s(), n(d, { key: 2 }, [
|
|
106
106
|
w(S(V(H)), 1)
|
|
107
|
-
], 64)) :
|
|
108
|
-
e.modelValue.length > 2 && l.value && e.isSuccess ? (
|
|
109
|
-
key:
|
|
110
|
-
class:
|
|
107
|
+
], 64)) : p("", !0),
|
|
108
|
+
e.modelValue.length > 2 && l.value && e.isSuccess ? (s(!0), n(d, { key: 3 }, E(e.searchScheme, (h) => (s(), n("div", {
|
|
109
|
+
key: h.type,
|
|
110
|
+
class: k(t.$style.resultsInner),
|
|
111
111
|
"data-test": "ui-search-result"
|
|
112
112
|
}, [
|
|
113
|
-
t.results?.[
|
|
113
|
+
t.results?.[h.type]?.length ? (s(), n(d, { key: 0 }, [
|
|
114
114
|
O("div", {
|
|
115
|
-
class:
|
|
115
|
+
class: k(t.$style.type),
|
|
116
116
|
"data-test": "ui-search-result-type"
|
|
117
|
-
}, S(
|
|
118
|
-
(
|
|
117
|
+
}, S(h.type) + ":", 3),
|
|
118
|
+
(s(!0), n(d, null, E(t.results[h.type], (v) => (s(), B(L(_.value), {
|
|
119
119
|
key: v._id,
|
|
120
|
-
to: `${
|
|
120
|
+
to: `${h.url}/${v._id}`,
|
|
121
121
|
onClick: f,
|
|
122
|
-
class:
|
|
122
|
+
class: k(t.$style.link),
|
|
123
123
|
"data-test": "ui-search-result-link"
|
|
124
124
|
}, {
|
|
125
125
|
default: U(() => [
|
|
126
|
-
(
|
|
126
|
+
(s(!0), n(d, null, E(h.labels, (C) => (s(), n("span", {
|
|
127
127
|
key: C,
|
|
128
128
|
"data-test": "ui-search-result-label"
|
|
129
129
|
}, S(v[C]), 1))), 128))
|
|
130
130
|
]),
|
|
131
131
|
_: 2
|
|
132
132
|
}, 1032, ["to", "class"]))), 128))
|
|
133
|
-
], 64)) :
|
|
134
|
-
], 2))), 128)) :
|
|
135
|
-
], 2)) :
|
|
133
|
+
], 64)) : p("", !0)
|
|
134
|
+
], 2))), 128)) : p("", !0)
|
|
135
|
+
], 2)) : p("", !0)
|
|
136
136
|
], 2));
|
|
137
137
|
}
|
|
138
|
-
}), W = "
|
|
138
|
+
}), W = "_container_gyho3_1", X = "_results_gyho3_6", ee = "_resultsInner_gyho3_22", te = "_type_gyho3_31", se = "_link_gyho3_36", ne = {
|
|
139
139
|
container: W,
|
|
140
140
|
results: X,
|
|
141
141
|
resultsInner: ee,
|
|
142
142
|
type: te,
|
|
143
|
-
link:
|
|
143
|
+
link: se
|
|
144
144
|
}, le = {
|
|
145
|
-
$style:
|
|
145
|
+
$style: ne
|
|
146
146
|
}, ie = /* @__PURE__ */ Z(Q, [["__cssModules", le]]);
|
|
147
147
|
export {
|
|
148
148
|
ie as default
|
package/dist/breakpoints.scss
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
$mobile:
|
|
2
|
-
$tablet:
|
|
3
|
-
$notebook:
|
|
1
|
+
$mobile: 960px;
|
|
2
|
+
$tablet: 1260px;
|
|
3
|
+
$notebook: 1440px;
|
package/dist/colors.scss
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--color-primary-light-extra: #e3f3ff;
|
|
3
3
|
--color-primary-light: #9fd7ff;
|
|
4
|
-
--color-primary: #
|
|
4
|
+
--color-primary: #006cbb;
|
|
5
5
|
--color-primary-dark: #003a70;
|
|
6
6
|
|
|
7
7
|
--color-accent: #5325e3;
|
|
8
8
|
--color-accent-dark: #200183;
|
|
9
|
+
--color-accent-light: #dd0eff;
|
|
9
10
|
|
|
10
11
|
--color-white-transparent: rgba(255, 255, 255, 50%);
|
|
11
12
|
--color-gray-transparent: rgba(150, 150, 150, 50%);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mhz-ui",
|
|
3
|
-
"description": "
|
|
4
|
-
"version": "1.0.
|
|
3
|
+
"description": "9000 Mhz ui kit",
|
|
4
|
+
"version": "1.0.29",
|
|
5
5
|
"author": "Alexandr Dergunov <dergunovs@mail.ru> (https://github.com/dergunovs)",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"type": "module",
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
"@storybook/preview-api": "7.4.5",
|
|
44
44
|
"@storybook/vue3": "7.4.5",
|
|
45
45
|
"@storybook/vue3-vite": "7.4.5",
|
|
46
|
-
"@types/node": "20.
|
|
46
|
+
"@types/node": "20.8.0",
|
|
47
47
|
"@typescript-eslint/eslint-plugin": "6.7.3",
|
|
48
48
|
"@typescript-eslint/parser": "6.7.3",
|
|
49
49
|
"@vitejs/plugin-vue": "4.3.4",
|
|
50
|
-
"@vitest/coverage-v8": "0.34.
|
|
50
|
+
"@vitest/coverage-v8": "0.34.6",
|
|
51
51
|
"@vue/test-utils": "2.4.1",
|
|
52
52
|
"eslint": "8.50.0",
|
|
53
53
|
"eslint-config-prettier": "9.0.0",
|
|
@@ -55,9 +55,9 @@
|
|
|
55
55
|
"eslint-plugin-import": "2.28.1",
|
|
56
56
|
"eslint-plugin-prettier": "5.0.0",
|
|
57
57
|
"eslint-plugin-vue": "9.17.0",
|
|
58
|
-
"happy-dom": "12.2.
|
|
58
|
+
"happy-dom": "12.2.2",
|
|
59
59
|
"postcss-html": "1.5.0",
|
|
60
|
-
"postcss-scss": "4.0.
|
|
60
|
+
"postcss-scss": "4.0.9",
|
|
61
61
|
"prettier": "3.0.3",
|
|
62
62
|
"react": "18.2.0",
|
|
63
63
|
"react-dom": "18.2.0",
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"vite-plugin-dts": "3.6.0",
|
|
74
74
|
"vite-plugin-static-copy": "0.17.0",
|
|
75
75
|
"vite-svg-loader": "4.0.0",
|
|
76
|
-
"vitest": "0.34.
|
|
76
|
+
"vitest": "0.34.6",
|
|
77
77
|
"vue-linters-config": "0.1.12",
|
|
78
78
|
"vue-tsc": "1.8.15"
|
|
79
79
|
},
|