@dv.net/ui-kit 7.2.13 → 7.2.17
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/README.md +44 -33
- package/dist/chunks/{UiDrawer.vue_vue_type_script_setup_true_lang-Vs6J1MR6.js → UiDrawer.vue_vue_type_script_setup_true_lang-Bwq8CKYb.js} +15 -13
- package/dist/chunks/UiGallery.vue_vue_type_script_setup_true_lang-DTWRKr-9.js +96 -0
- package/dist/chunks/{UiLanguages.vue_vue_type_script_setup_true_lang-D4tQH7Wf.js → UiLanguages.vue_vue_type_script_setup_true_lang-DU6Q9NU9.js} +93 -74
- package/dist/chunks/{UiMobileMenu.vue_vue_type_script_setup_true_lang-DETw3v3h.js → UiMobileMenu.vue_vue_type_script_setup_true_lang-DDLdZbFX.js} +1 -1
- package/dist/chunks/{UiProfileMenu.vue_vue_type_script_setup_true_lang-DWXfwX_U.js → UiProfileMenu.vue_vue_type_script_setup_true_lang-jgk7OW61.js} +1 -1
- package/dist/chunks/{UiProfileMenuItem.vue_vue_type_script_setup_true_lang-DxSXBYTh.js → UiProfileMenuItem.vue_vue_type_script_setup_true_lang-0pOQZ4Oj.js} +31 -21
- package/dist/components/UiDrawer/UiDrawer.js +1 -1
- package/dist/components/UiGallery/UiGallery.js +5 -0
- package/dist/components/UiGallery/UiGallery.vue.d.ts +11 -0
- package/dist/components/UiGallery/types.d.ts +6 -0
- package/dist/components/UiGallery/types.js +1 -0
- package/dist/components/UiLanguages/UiLanguages.js +1 -1
- package/dist/components/UiMobileMenu/UiMobileMenu.js +1 -1
- package/dist/components/UiProfileMenu/UiProfileMenu.js +1 -1
- package/dist/components/UiProfileMenu/components/UiProfileMenuItem.js +1 -1
- package/dist/composables/useNotification/UiNotification.js +38 -24
- package/dist/composables/useNotification/UiNotification.vue.d.ts +4 -2
- package/dist/composables/useNotification/types.d.ts +1 -0
- package/dist/composables/useNotification/types.js +1 -0
- package/dist/composables/useNotification/useNotification.d.ts +2 -1
- package/dist/composables/useNotification/useNotification.js +15 -14
- package/dist/config/index.d.ts +2 -0
- package/dist/config/index.js +2 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +69 -67
- package/dist/style.css +1 -1
- package/package.json +5 -1
package/README.md
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 🎨 UI KIT
|
|
2
2
|
|
|
3
3
|
A Vue 3 UI component library for internal and external web applications. Includes ready‑to‑use UI elements (buttons, inputs, selects, tables, modals, etc.), utilities, and styles.
|
|
4
4
|
|
|
5
|
-
## Quick start
|
|
5
|
+
## ⚡️ Quick start
|
|
6
6
|
|
|
7
|
-
- **Install with yarn**
|
|
7
|
+
- 📦 **Install with yarn**
|
|
8
8
|
```bash
|
|
9
9
|
yarn add @dv.net/ui-kit
|
|
10
10
|
```
|
|
11
11
|
|
|
12
|
-
- **Use in a Vue 3 (Vite) app**
|
|
12
|
+
- 💻 **Use in a Vue 3 (Vite) app**
|
|
13
13
|
```vue
|
|
14
14
|
<script setup lang="ts">
|
|
15
15
|
import { UiButton, UiInput } from "@dv.net/ui-kit";
|
|
@@ -25,7 +25,7 @@ import { UiButton, UiInput } from "@dv.net/ui-kit";
|
|
|
25
25
|
</style>
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
-
## Demo / component catalog
|
|
28
|
+
## 📘 Demo / component catalog
|
|
29
29
|
|
|
30
30
|
You can run a local demo app with examples of all components.
|
|
31
31
|
```bash
|
|
@@ -36,26 +36,26 @@ yarn run dev
|
|
|
36
36
|
yarn run build-demo
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
-
## Scripts
|
|
39
|
+
## 🧰 Scripts
|
|
40
40
|
|
|
41
|
-
- `dev` — run the demo app with Vite
|
|
42
|
-
- `build` — type check (tsc) + build the component library
|
|
43
|
-
- `build-only` — build the library without tsc
|
|
44
|
-
- `build-demo` — build the demo app (`--mode demo`)
|
|
45
|
-
- `lint` — ESLint + Stylelint with auto‑fix
|
|
46
|
-
- `generate-svg-list` — generate an SVG icon list based on `src/lib/assets/icons`
|
|
41
|
+
- 🚀 `dev` — run the demo app with Vite
|
|
42
|
+
- 🏗️ `build` — type check (tsc) + build the component library
|
|
43
|
+
- 🧱 `build-only` — build the library without tsc
|
|
44
|
+
- 🧪 `build-demo` — build the demo app (`--mode demo`)
|
|
45
|
+
- ✨ `lint` — ESLint + Stylelint with auto‑fix
|
|
46
|
+
- 🖼️ `generate-svg-list` — generate an SVG icon list based on `src/lib/assets/icons`
|
|
47
47
|
|
|
48
|
-
## Tech stack
|
|
48
|
+
## 🛠️ Tech stack
|
|
49
49
|
|
|
50
|
-
- **Vue 3** (`^3.5`) with `<script setup>`
|
|
51
|
-
- **Vite** (`^7`) + `@vitejs/plugin-vue`
|
|
52
|
-
- **TypeScript** (`^5.8`), d.ts generation via `vite-plugin-dts`
|
|
53
|
-
- **SCSS**: shared styles and variables in `src/lib/assets/scss`
|
|
54
|
-
- **ESLint** + **Stylelint** + **Prettier**
|
|
55
|
-
- **@floating-ui/vue**, **@vueuse/core**, **dayjs**, **maska**, **vue3-lottie**, **vue-virtual-scroller**
|
|
56
|
-
- SVG loading via `vite-svg-loader` (SVGO with `removeViewBox: false`, `prefixIds`)
|
|
50
|
+
- ⚙️ **Vue 3** (`^3.5`) with `<script setup>`
|
|
51
|
+
- ⚡️ **Vite** (`^7`) + `@vitejs/plugin-vue`
|
|
52
|
+
- 🧩 **TypeScript** (`^5.8`), d.ts generation via `vite-plugin-dts`
|
|
53
|
+
- 🎨 **SCSS**: shared styles and variables in `src/lib/assets/scss`
|
|
54
|
+
- 🧹 **ESLint** + **Stylelint** + **Prettier**
|
|
55
|
+
- 📦 **@floating-ui/vue**, **@vueuse/core**, **dayjs**, **maska**, **vue3-lottie**, **vue-virtual-scroller**
|
|
56
|
+
- 🖼️ SVG loading via `vite-svg-loader` (SVGO with `removeViewBox: false`, `prefixIds`)
|
|
57
57
|
|
|
58
|
-
## Project structure (main)
|
|
58
|
+
## 🗂️ Project structure (main)
|
|
59
59
|
|
|
60
60
|
```
|
|
61
61
|
src/
|
|
@@ -70,29 +70,29 @@ src/
|
|
|
70
70
|
vite.config.ts # library and demo build config
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
-
## Development
|
|
73
|
+
## 🧑💻 Development
|
|
74
74
|
|
|
75
|
-
1) Install dependencies
|
|
75
|
+
1) 📦 Install dependencies
|
|
76
76
|
```bash
|
|
77
77
|
yarn install
|
|
78
78
|
```
|
|
79
|
-
2) Start the demo
|
|
79
|
+
2) ▶️ Start the demo
|
|
80
80
|
```bash
|
|
81
81
|
yarn dev
|
|
82
82
|
```
|
|
83
|
-
3) Make changes in `src/lib/**` — the demo will hot‑reload.
|
|
83
|
+
3) ✏️ Make changes in `src/lib/**` — the demo will hot‑reload.
|
|
84
84
|
|
|
85
|
-
Code quality checks:
|
|
85
|
+
🔍 Code quality checks:
|
|
86
86
|
```bash
|
|
87
87
|
yarn lint
|
|
88
88
|
```
|
|
89
89
|
|
|
90
|
-
Generate icon list (when SVG set changes):
|
|
90
|
+
🖼️ Generate icon list (when SVG set changes):
|
|
91
91
|
```bash
|
|
92
92
|
yarn generate-svg-list
|
|
93
93
|
```
|
|
94
94
|
|
|
95
|
-
## Library build
|
|
95
|
+
## 📦 Library build
|
|
96
96
|
|
|
97
97
|
```bash
|
|
98
98
|
yarn build
|
|
@@ -102,11 +102,22 @@ The output will be in `dist/`:
|
|
|
102
102
|
- `dist/index.d.ts` — TypeScript types
|
|
103
103
|
- `dist/style.css` — shared library styles
|
|
104
104
|
|
|
105
|
-
## Environment requirements
|
|
105
|
+
## ⚙️ Environment requirements
|
|
106
106
|
|
|
107
|
-
- Node.js `^20.19.0` or `>=22.12.0`
|
|
108
|
-
- Consumer project: `vue >= 3.5.0`, `vue-router >= 4.4.0`
|
|
107
|
+
- 🖥️ Node.js `^20.19.0` or `>=22.12.0`
|
|
108
|
+
- 🧩 Consumer project: `vue >= 3.5.0`, `vue-router >= 4.4.0`
|
|
109
109
|
|
|
110
|
-
## License
|
|
110
|
+
## 📄 License
|
|
111
111
|
|
|
112
|
-
|
|
112
|
+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
113
|
+
|
|
114
|
+
<br>
|
|
115
|
+
|
|
116
|
+
<div align="center">
|
|
117
|
+
|
|
118
|
+
**Made with ❤️ for the developer community**
|
|
119
|
+
|
|
120
|
+
[](https://github.com/dv-net/ui-kit)
|
|
121
|
+
[](https://www.npmjs.com/package/@dv.net/ui-kit)
|
|
122
|
+
|
|
123
|
+
</div>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineComponent as f, mergeModels as v, useModel as
|
|
1
|
+
import { defineComponent as f, mergeModels as v, useModel as C, computed as k, watch as h, onBeforeUnmount as w, createElementBlock as n, openBlock as r, createBlock as V, Teleport as y, createVNode as d, mergeProps as z, withCtx as u, Transition as S, createCommentVNode as B, withModifiers as E, normalizeClass as L, normalizeStyle as M, renderSlot as $ } from "vue";
|
|
2
2
|
import { _ as g } from "./UiOverlay.vue_vue_type_script_setup_true_lang-DkZL3VLh.js";
|
|
3
3
|
/* empty css */
|
|
4
|
-
const m = "ui-drawer__lock-scroll",
|
|
4
|
+
const m = "ui-drawer__lock-scroll", T = /* @__PURE__ */ f({
|
|
5
5
|
__name: "UiDrawer",
|
|
6
6
|
props: /* @__PURE__ */ v({
|
|
7
7
|
direction: { default: "rtl" },
|
|
@@ -13,34 +13,36 @@ const m = "ui-drawer__lock-scroll", N = /* @__PURE__ */ f({
|
|
|
13
13
|
}),
|
|
14
14
|
emits: ["update:modelValue"],
|
|
15
15
|
setup(a) {
|
|
16
|
-
const l =
|
|
16
|
+
const l = C(a, "modelValue"), c = a, t = k(() => ["rtl", "ltr"].includes(c.direction) ? "horizontal" : "vertical");
|
|
17
17
|
function p() {
|
|
18
18
|
document.querySelector("html")?.classList.add(m);
|
|
19
19
|
}
|
|
20
20
|
function s() {
|
|
21
21
|
document.querySelector("html")?.classList.remove(m);
|
|
22
22
|
}
|
|
23
|
-
return
|
|
23
|
+
return h(l, () => {
|
|
24
24
|
l.value ? p() : s();
|
|
25
|
-
}),
|
|
25
|
+
}), w(() => {
|
|
26
26
|
s();
|
|
27
|
-
}), (e, o) => (r(),
|
|
28
|
-
(r(),
|
|
27
|
+
}), (e, o) => (r(), n("div", null, [
|
|
28
|
+
(r(), V(y, { to: "body" }, [
|
|
29
29
|
d(g, z({ ...e.$attrs }, {
|
|
30
30
|
modelValue: l.value,
|
|
31
|
-
"onUpdate:modelValue": o[
|
|
32
|
-
onClick: o[
|
|
31
|
+
"onUpdate:modelValue": o[1] || (o[1] = (i) => l.value = i),
|
|
32
|
+
onClick: o[2] || (o[2] = (i) => l.value = !1)
|
|
33
33
|
}), {
|
|
34
34
|
default: u(() => [
|
|
35
35
|
d(S, { appear: "" }, {
|
|
36
36
|
default: u(() => [
|
|
37
|
-
l.value ? (r(),
|
|
37
|
+
l.value ? (r(), n("div", {
|
|
38
38
|
key: 0,
|
|
39
|
-
style:
|
|
39
|
+
style: M({
|
|
40
40
|
width: t.value === "horizontal" ? e.size : "100%",
|
|
41
41
|
height: t.value === "vertical" ? e.size : "100%"
|
|
42
42
|
}),
|
|
43
|
-
class:
|
|
43
|
+
class: L(["ui-drawer", [e.direction, t.value, e.drawerClass]]),
|
|
44
|
+
onClick: o[0] || (o[0] = E(() => {
|
|
45
|
+
}, ["stop"]))
|
|
44
46
|
}, [
|
|
45
47
|
$(e.$slots, "default")
|
|
46
48
|
], 6)) : B("", !0)
|
|
@@ -55,5 +57,5 @@ const m = "ui-drawer__lock-scroll", N = /* @__PURE__ */ f({
|
|
|
55
57
|
}
|
|
56
58
|
});
|
|
57
59
|
export {
|
|
58
|
-
|
|
60
|
+
T as _
|
|
59
61
|
};
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { defineComponent as f, mergeModels as y, useModel as k, ref as w, computed as V, onMounted as h, onUnmounted as C, createBlock as L, createCommentVNode as p, openBlock as a, unref as n, withCtx as g, createElementVNode as U, createElementBlock as c, createVNode as u, Transition as b, Fragment as E } from "vue";
|
|
2
|
+
import "./vue3-lottie.es-C_Z24a9S.js";
|
|
3
|
+
import "./style-CD0jFgS4.js";
|
|
4
|
+
/* empty css */
|
|
5
|
+
/* empty css */
|
|
6
|
+
/* empty css */
|
|
7
|
+
import "./useDatePicker-Chd_Lf-L.js";
|
|
8
|
+
import "../config/index.js";
|
|
9
|
+
/* empty css */
|
|
10
|
+
import { _ as v } from "./UiIconButton.vue_vue_type_script_setup_true_lang-yQR_GeIn.js";
|
|
11
|
+
/* empty css */
|
|
12
|
+
/* empty css */
|
|
13
|
+
/* empty css */
|
|
14
|
+
/* empty css */
|
|
15
|
+
/* empty css */
|
|
16
|
+
/* empty css */
|
|
17
|
+
/* empty css */
|
|
18
|
+
/* empty css */
|
|
19
|
+
import "vue-router";
|
|
20
|
+
/* empty css */
|
|
21
|
+
import { _ as B } from "./UiModal.vue_vue_type_script_setup_true_lang-AAHxYlxe.js";
|
|
22
|
+
/* empty css */
|
|
23
|
+
/* empty css */
|
|
24
|
+
/* empty css */
|
|
25
|
+
/* empty css */
|
|
26
|
+
/* empty css */
|
|
27
|
+
/* empty css */
|
|
28
|
+
/* empty css */
|
|
29
|
+
/* empty css */
|
|
30
|
+
const I = { class: "image-container" }, M = ["src"], le = /* @__PURE__ */ f({
|
|
31
|
+
__name: "UiGallery",
|
|
32
|
+
props: /* @__PURE__ */ y({
|
|
33
|
+
images: {}
|
|
34
|
+
}, {
|
|
35
|
+
modelValue: { type: Boolean, required: !0 },
|
|
36
|
+
modelModifiers: {}
|
|
37
|
+
}),
|
|
38
|
+
emits: ["update:modelValue"],
|
|
39
|
+
setup(t) {
|
|
40
|
+
const r = k(t, "modelValue"), e = w(0), s = V(
|
|
41
|
+
() => t.images[e.value]?.url || t.images[e.value]?.file && URL.createObjectURL(t.images[e.value].file)
|
|
42
|
+
), l = (i) => {
|
|
43
|
+
i === "-" ? e.value === 0 ? e.value = t.images.length - 1 : e.value-- : e.value === t.images.length - 1 ? e.value = 0 : e.value++;
|
|
44
|
+
}, d = (i) => {
|
|
45
|
+
r.value && (i.key === "ArrowLeft" && l("-"), i.key === "ArrowRight" && l("+"), i.key === "Escape" && (r.value = !1));
|
|
46
|
+
};
|
|
47
|
+
return h(() => {
|
|
48
|
+
t.images.length > 1 && document.addEventListener("keydown", d);
|
|
49
|
+
}), C(() => {
|
|
50
|
+
t.images.length > 1 && document.removeEventListener("keydown", d);
|
|
51
|
+
}), (i, o) => i.images.length && s.value ? (a(), L(n(B), {
|
|
52
|
+
key: 0,
|
|
53
|
+
modelValue: r.value,
|
|
54
|
+
"onUpdate:modelValue": o[2] || (o[2] = (m) => r.value = m),
|
|
55
|
+
popperClass: "ui-gallery"
|
|
56
|
+
}, {
|
|
57
|
+
default: g(() => [
|
|
58
|
+
U("div", I, [
|
|
59
|
+
u(b, {
|
|
60
|
+
name: "image-slide",
|
|
61
|
+
mode: "out-in"
|
|
62
|
+
}, {
|
|
63
|
+
default: g(() => [
|
|
64
|
+
(a(), c("img", {
|
|
65
|
+
key: e.value,
|
|
66
|
+
src: s.value,
|
|
67
|
+
alt: "Preview Image"
|
|
68
|
+
}, null, 8, M))
|
|
69
|
+
]),
|
|
70
|
+
_: 1
|
|
71
|
+
})
|
|
72
|
+
]),
|
|
73
|
+
i.images.length > 1 ? (a(), c(E, { key: 0 }, [
|
|
74
|
+
u(n(v), {
|
|
75
|
+
"icon-name": "keyboard-arrow-up",
|
|
76
|
+
"icon-type": "400",
|
|
77
|
+
class: "ui-gallery__img-preview-btn left",
|
|
78
|
+
type: "contrast",
|
|
79
|
+
onClick: o[0] || (o[0] = (m) => l("-"))
|
|
80
|
+
}),
|
|
81
|
+
u(n(v), {
|
|
82
|
+
"icon-name": "keyboard-arrow-up",
|
|
83
|
+
"icon-type": "400",
|
|
84
|
+
class: "ui-gallery__img-preview-btn right",
|
|
85
|
+
type: "contrast",
|
|
86
|
+
onClick: o[1] || (o[1] = (m) => l("+"))
|
|
87
|
+
})
|
|
88
|
+
], 64)) : p("", !0)
|
|
89
|
+
]),
|
|
90
|
+
_: 1
|
|
91
|
+
}, 8, ["modelValue"])) : p("", !0);
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
export {
|
|
95
|
+
le as _
|
|
96
|
+
};
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import { createElementBlock as s, openBlock as
|
|
2
|
-
import { _ as
|
|
1
|
+
import { createElementBlock as s, openBlock as l, createElementVNode as n, defineComponent as j, mergeModels as S, useModel as F, ref as b, computed as N, onMounted as A, createCommentVNode as y, createBlock as c, normalizeClass as z, renderSlot as q, Fragment as d, createVNode as m, createTextVNode as B, toDisplayString as g, capitalize as G, unref as r, withCtx as C, renderList as k, nextTick as J } from "vue";
|
|
2
|
+
import { _ as U } from "./UiFlagIcon.vue_vue_type_script_setup_true_lang-BEuyocgZ.js";
|
|
3
3
|
/* empty css */
|
|
4
|
-
import { _ as
|
|
4
|
+
import { _ as w } from "./UiLanguageButton.vue_vue_type_script_setup_true_lang-DiW2yYu5.js";
|
|
5
5
|
import "./vue3-lottie.es-C_Z24a9S.js";
|
|
6
6
|
import "./style-CD0jFgS4.js";
|
|
7
|
-
import { _ as
|
|
7
|
+
import { _ as K } from "./UiIcon.vue_vue_type_script_setup_true_lang-CP1bPN5o.js";
|
|
8
8
|
/* empty css */
|
|
9
9
|
/* empty css */
|
|
10
10
|
/* empty css */
|
|
11
11
|
import "./useDatePicker-Chd_Lf-L.js";
|
|
12
|
-
import { config as
|
|
12
|
+
import { config as L } from "../config/index.js";
|
|
13
13
|
/* empty css */
|
|
14
14
|
/* empty css */
|
|
15
|
-
import { _ as
|
|
15
|
+
import { _ as O } from "./UiDrawer.vue_vue_type_script_setup_true_lang-Bwq8CKYb.js";
|
|
16
16
|
/* empty css */
|
|
17
17
|
/* empty css */
|
|
18
18
|
/* empty css */
|
|
19
|
-
import { _ as
|
|
20
|
-
import { useBreakpoints as
|
|
19
|
+
import { _ as D } from "./UiInput.vue_vue_type_script_setup_true_lang-DHWi8SLq.js";
|
|
20
|
+
import { useBreakpoints as Q } from "../composables/useBreakpoints.js";
|
|
21
21
|
/* empty css */
|
|
22
22
|
/* empty css */
|
|
23
23
|
import "vue-router";
|
|
24
24
|
/* empty css */
|
|
25
|
-
import { _ as
|
|
25
|
+
import { _ as W } from "./UiModal.vue_vue_type_script_setup_true_lang-AAHxYlxe.js";
|
|
26
26
|
/* empty css */
|
|
27
27
|
/* empty css */
|
|
28
28
|
/* empty css */
|
|
@@ -32,16 +32,16 @@ import { _ as Q } from "./UiModal.vue_vue_type_script_setup_true_lang-AAHxYlxe.j
|
|
|
32
32
|
/* empty css */
|
|
33
33
|
/* empty css */
|
|
34
34
|
/* empty css */
|
|
35
|
-
const
|
|
35
|
+
const X = {
|
|
36
36
|
xmlns: "http://www.w3.org/2000/svg",
|
|
37
37
|
width: "20",
|
|
38
38
|
height: "20",
|
|
39
39
|
fill: "none",
|
|
40
40
|
viewBox: "0 0 20 20"
|
|
41
41
|
};
|
|
42
|
-
function
|
|
43
|
-
return
|
|
44
|
-
|
|
42
|
+
function Y(v, f) {
|
|
43
|
+
return l(), s("svg", X, [...f[0] || (f[0] = [
|
|
44
|
+
n("path", {
|
|
45
45
|
stroke: "#717173",
|
|
46
46
|
"stroke-linecap": "round",
|
|
47
47
|
"stroke-linejoin": "round",
|
|
@@ -50,16 +50,16 @@ function X(v, f) {
|
|
|
50
50
|
}, null, -1)
|
|
51
51
|
])]);
|
|
52
52
|
}
|
|
53
|
-
const
|
|
53
|
+
const E = { render: Y }, Z = { class: "ui-languages" }, x = ["disabled"], ee = { class: "ui-languages--modal" }, ae = { class: "ui-languages--modal__search" }, oe = {
|
|
54
54
|
key: 0,
|
|
55
55
|
class: "ui-languages__favourites"
|
|
56
56
|
}, le = { key: 1 }, se = {
|
|
57
57
|
key: 2,
|
|
58
58
|
class: "ui-languages--modal__empty"
|
|
59
|
-
}, te = { class: "ui-languages--drawer__wrapper" }, re = { class: "ui-languages--drawer__header" }, ie = { class: "ui-languages--
|
|
59
|
+
}, te = { class: "ui-languages--drawer__wrapper" }, re = { class: "ui-languages--drawer__header" }, ie = { class: "ui-languages--drawer__search" }, ne = { class: "ui-languages--drawer__items" }, ue = {
|
|
60
60
|
key: 0,
|
|
61
61
|
class: "ui-languages__favourites"
|
|
62
|
-
},
|
|
62
|
+
}, Ge = /* @__PURE__ */ j({
|
|
63
63
|
__name: "UiLanguages",
|
|
64
64
|
props: /* @__PURE__ */ S({
|
|
65
65
|
locales: {},
|
|
@@ -75,69 +75,88 @@ const Y = { render: X }, Z = { class: "ui-languages" }, x = ["disabled"], ee = {
|
|
|
75
75
|
}),
|
|
76
76
|
emits: /* @__PURE__ */ S(["change"], ["update:modelValue", "update:is-show"]),
|
|
77
77
|
setup(v, { emit: f }) {
|
|
78
|
-
const
|
|
78
|
+
const I = f, $ = v, t = F(v, "modelValue"), u = F(v, "is-show"), { isMobile: R } = Q(), i = b(""), V = b(), H = b([]), h = N(() => [
|
|
79
79
|
{ id: 2, name: "English", isoCode: "en", nativeName: "English" },
|
|
80
|
-
|
|
80
|
+
...H.value,
|
|
81
81
|
t.value
|
|
82
|
-
].filter((e,
|
|
83
|
-
(e) => e.name.toLocaleLowerCase().includes(
|
|
82
|
+
].filter((e, o, a) => o === a.findIndex((T) => T.isoCode === e.isoCode))), M = N(() => $.locales.toSorted((e, o) => e.name.localeCompare(o.name))), p = N(() => i.value ? M.value.filter(
|
|
83
|
+
(e) => e.name.toLocaleLowerCase().includes(i.value.toLocaleLowerCase()) || e.nativeName?.toLocaleLowerCase().includes(i.value.toLocaleLowerCase())
|
|
84
84
|
) : M.value);
|
|
85
85
|
function _(e) {
|
|
86
|
-
t.value = e,
|
|
86
|
+
t.value = e, u.value = !1, i.value = "", I("change", e);
|
|
87
87
|
}
|
|
88
|
-
function
|
|
89
|
-
|
|
90
|
-
|
|
88
|
+
function P() {
|
|
89
|
+
u.value = !0, J(() => {
|
|
90
|
+
V.value?.focus();
|
|
91
91
|
});
|
|
92
92
|
}
|
|
93
|
-
return
|
|
94
|
-
const e = navigator.languages.slice(0, 2).map((
|
|
95
|
-
|
|
96
|
-
}), (e,
|
|
97
|
-
e.isHidden ? y("", !0) : (
|
|
93
|
+
return A(() => {
|
|
94
|
+
const e = navigator.languages.slice(0, 2).map((o) => o.split("-")[0]);
|
|
95
|
+
H.value = $.locales.filter(({ isoCode: o }) => e.includes(o));
|
|
96
|
+
}), (e, o) => (l(), s("div", Z, [
|
|
97
|
+
e.isHidden ? y("", !0) : (l(), s("button", {
|
|
98
98
|
key: 0,
|
|
99
99
|
disabled: e.disabled,
|
|
100
100
|
class: z([{ "for-header": e.forHeader }, "ui-languages--trigger"]),
|
|
101
|
-
onClick:
|
|
101
|
+
onClick: P
|
|
102
102
|
}, [
|
|
103
|
-
|
|
104
|
-
e.forHeader ? (
|
|
105
|
-
|
|
103
|
+
q(e.$slots, "trigger", { locale: t.value }, () => [
|
|
104
|
+
e.forHeader ? (l(), s(d, { key: 0 }, [
|
|
105
|
+
m(U, {
|
|
106
106
|
isoCode: t.value?.isoCode ?? "",
|
|
107
107
|
"is-small": ""
|
|
108
108
|
}, null, 8, ["isoCode"]),
|
|
109
|
-
|
|
110
|
-
], 64)) : (
|
|
111
|
-
|
|
109
|
+
B(" " + g(G(t.value?.isoCode ?? "")), 1)
|
|
110
|
+
], 64)) : (l(), s(d, { key: 1 }, [
|
|
111
|
+
m(U, {
|
|
112
112
|
isoCode: t.value?.isoCode ?? ""
|
|
113
113
|
}, null, 8, ["isoCode"]),
|
|
114
|
-
|
|
115
|
-
t.value?.nativeName ? (
|
|
116
|
-
|
|
114
|
+
B(" " + g(t.value?.name) + " ", 1),
|
|
115
|
+
t.value?.nativeName ? (l(), s(d, { key: 0 }, [
|
|
116
|
+
B("(" + g(t.value?.nativeName) + ")", 1)
|
|
117
117
|
], 64)) : y("", !0)
|
|
118
118
|
], 64))
|
|
119
119
|
])
|
|
120
120
|
], 10, x)),
|
|
121
|
-
r(
|
|
121
|
+
r(R) ? (l(), c(r(O), {
|
|
122
122
|
key: 2,
|
|
123
123
|
class: "ui-languages--drawer",
|
|
124
124
|
direction: "btt",
|
|
125
|
-
modelValue:
|
|
126
|
-
"onUpdate:modelValue":
|
|
125
|
+
modelValue: u.value,
|
|
126
|
+
"onUpdate:modelValue": o[5] || (o[5] = (a) => u.value = a)
|
|
127
127
|
}, {
|
|
128
|
-
default:
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
128
|
+
default: C(() => [
|
|
129
|
+
n("div", te, [
|
|
130
|
+
n("div", re, [
|
|
131
|
+
n("p", null, g(r(L).uiLanguages.translations.changeLanguage), 1),
|
|
132
|
+
m(r(K), {
|
|
133
|
+
style: { cursor: "pointer" },
|
|
133
134
|
name: "close",
|
|
134
135
|
type: "400",
|
|
135
|
-
size: "lg"
|
|
136
|
+
size: "lg",
|
|
137
|
+
onClick: o[3] || (o[3] = (a) => u.value = !1)
|
|
136
138
|
})
|
|
137
139
|
]),
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
140
|
+
n("div", ie, [
|
|
141
|
+
m(r(D), {
|
|
142
|
+
ref_key: "inputRef",
|
|
143
|
+
ref: V,
|
|
144
|
+
autofocus: "",
|
|
145
|
+
size: "sm",
|
|
146
|
+
modelValue: i.value,
|
|
147
|
+
"onUpdate:modelValue": o[4] || (o[4] = (a) => i.value = a),
|
|
148
|
+
clearable: "",
|
|
149
|
+
placeholder: r(L).uiLanguages.translations.searchInputPlaceholder
|
|
150
|
+
}, {
|
|
151
|
+
prepend: C(() => [
|
|
152
|
+
m(r(E))
|
|
153
|
+
]),
|
|
154
|
+
_: 1
|
|
155
|
+
}, 8, ["modelValue", "placeholder"])
|
|
156
|
+
]),
|
|
157
|
+
n("div", ne, [
|
|
158
|
+
h.value?.length && p.value.length >= e.minNumbersLocalesDisplayFavorites ? (l(), s("div", ue, [
|
|
159
|
+
(l(!0), s(d, null, k(h.value, (a) => (l(), c(w, {
|
|
141
160
|
key: a.id,
|
|
142
161
|
locale: a,
|
|
143
162
|
onChange: _,
|
|
@@ -145,7 +164,7 @@ const Y = { render: X }, Z = { class: "ui-languages" }, x = ["disabled"], ee = {
|
|
|
145
164
|
"for-header": e.forHeader
|
|
146
165
|
}, null, 8, ["locale", "selected", "for-header"]))), 128))
|
|
147
166
|
])) : y("", !0),
|
|
148
|
-
(
|
|
167
|
+
(l(!0), s(d, null, k(p.value, (a) => (l(), c(w, {
|
|
149
168
|
key: a.id,
|
|
150
169
|
locale: a,
|
|
151
170
|
onChange: _,
|
|
@@ -156,37 +175,37 @@ const Y = { render: X }, Z = { class: "ui-languages" }, x = ["disabled"], ee = {
|
|
|
156
175
|
])
|
|
157
176
|
]),
|
|
158
177
|
_: 1
|
|
159
|
-
}, 8, ["modelValue"])) : (
|
|
178
|
+
}, 8, ["modelValue"])) : (l(), c(r(W), {
|
|
160
179
|
key: 1,
|
|
161
|
-
onClose:
|
|
162
|
-
modelValue:
|
|
163
|
-
"onUpdate:modelValue":
|
|
180
|
+
onClose: o[1] || (o[1] = (a) => i.value = ""),
|
|
181
|
+
modelValue: u.value,
|
|
182
|
+
"onUpdate:modelValue": o[2] || (o[2] = (a) => u.value = a),
|
|
164
183
|
isShowBtnClose: !1,
|
|
165
184
|
popperClass: "transparent-bg"
|
|
166
185
|
}, {
|
|
167
|
-
default:
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
186
|
+
default: C(() => [
|
|
187
|
+
n("div", ee, [
|
|
188
|
+
n("div", ae, [
|
|
189
|
+
m(r(D), {
|
|
171
190
|
ref_key: "inputRef",
|
|
172
|
-
ref:
|
|
191
|
+
ref: V,
|
|
173
192
|
autofocus: "",
|
|
174
193
|
size: "sm",
|
|
175
|
-
modelValue:
|
|
176
|
-
"onUpdate:modelValue":
|
|
177
|
-
placeholder: r(
|
|
194
|
+
modelValue: i.value,
|
|
195
|
+
"onUpdate:modelValue": o[0] || (o[0] = (a) => i.value = a),
|
|
196
|
+
placeholder: r(L).uiLanguages.translations.searchInputPlaceholder
|
|
178
197
|
}, {
|
|
179
|
-
prepend:
|
|
180
|
-
|
|
198
|
+
prepend: C(() => [
|
|
199
|
+
m(r(E))
|
|
181
200
|
]),
|
|
182
201
|
_: 1
|
|
183
202
|
}, 8, ["modelValue", "placeholder"])
|
|
184
203
|
]),
|
|
185
|
-
|
|
186
|
-
class: z(["ui-languages--modal__items", { "is-empty": !
|
|
204
|
+
n("div", {
|
|
205
|
+
class: z(["ui-languages--modal__items", { "is-empty": !p.value.length }])
|
|
187
206
|
}, [
|
|
188
|
-
h.value?.length &&
|
|
189
|
-
(
|
|
207
|
+
h.value?.length && p.value.length >= e.minNumbersLocalesDisplayFavorites ? (l(), s("div", oe, [
|
|
208
|
+
(l(!0), s(d, null, k(h.value, (a) => (l(), c(w, {
|
|
190
209
|
key: a.id,
|
|
191
210
|
locale: a,
|
|
192
211
|
onChange: _,
|
|
@@ -194,15 +213,15 @@ const Y = { render: X }, Z = { class: "ui-languages" }, x = ["disabled"], ee = {
|
|
|
194
213
|
"for-header": e.forHeader
|
|
195
214
|
}, null, 8, ["locale", "selected", "for-header"]))), 128))
|
|
196
215
|
])) : y("", !0),
|
|
197
|
-
|
|
198
|
-
(
|
|
216
|
+
p.value.length ? (l(), s("div", le, [
|
|
217
|
+
(l(!0), s(d, null, k(p.value, (a) => (l(), c(w, {
|
|
199
218
|
key: a.id,
|
|
200
219
|
locale: a,
|
|
201
220
|
onChange: _,
|
|
202
221
|
selected: t.value,
|
|
203
222
|
"for-header": e.forHeader
|
|
204
223
|
}, null, 8, ["locale", "selected", "for-header"]))), 128))
|
|
205
|
-
])) : (
|
|
224
|
+
])) : (l(), s("div", se, g(r(L).uiLanguages.translations.modalSearchNotFound), 1))
|
|
206
225
|
], 2)
|
|
207
226
|
])
|
|
208
227
|
]),
|
|
@@ -212,5 +231,5 @@ const Y = { render: X }, Z = { class: "ui-languages" }, x = ["disabled"], ee = {
|
|
|
212
231
|
}
|
|
213
232
|
});
|
|
214
233
|
export {
|
|
215
|
-
|
|
234
|
+
Ge as _
|
|
216
235
|
};
|
|
@@ -9,7 +9,7 @@ import "./useDatePicker-Chd_Lf-L.js";
|
|
|
9
9
|
import "../config/index.js";
|
|
10
10
|
/* empty css */
|
|
11
11
|
/* empty css */
|
|
12
|
-
import { _ as b } from "./UiDrawer.vue_vue_type_script_setup_true_lang-
|
|
12
|
+
import { _ as b } from "./UiDrawer.vue_vue_type_script_setup_true_lang-Bwq8CKYb.js";
|
|
13
13
|
/* empty css */
|
|
14
14
|
/* empty css */
|
|
15
15
|
/* empty css */
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineComponent as y, mergeModels as k, useModel as V, createElementBlock as a, openBlock as t, normalizeClass as d, createVNode as l, unref as m, withCtx as f, createElementVNode as r, toDisplayString as $, Fragment as n, renderList as c, renderSlot as g, createBlock as w } from "vue";
|
|
2
|
-
import { _ as E } from "./UiProfileMenuItem.vue_vue_type_script_setup_true_lang-
|
|
2
|
+
import { _ as E } from "./UiProfileMenuItem.vue_vue_type_script_setup_true_lang-0pOQZ4Oj.js";
|
|
3
3
|
import "./style-CD0jFgS4.js";
|
|
4
4
|
import "./vue3-lottie.es-C_Z24a9S.js";
|
|
5
5
|
import { _ as v } from "./UiAvatar.vue_vue_type_script_setup_true_lang-CPaKahh-.js";
|