adata-ui 4.0.43 → 4.0.45
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 +84 -84
- package/dist/module.json +1 -1
- package/dist/runtime/components/Alert.vue +26 -26
- package/dist/runtime/components/Chip.vue +24 -0
- package/dist/runtime/components/Chip.vue.d.ts +19 -0
- package/dist/runtime/components/DigitBadge.vue.d.ts +1 -1
- package/dist/runtime/components/Header.vue.d.ts +1 -1
- package/dist/runtime/components/Tag.vue +4 -4
- package/dist/runtime/components/accordion/Accordion.vue.d.ts +1 -1
- package/dist/runtime/components/button/Button.vue +1 -1
- package/dist/runtime/components/button/Button.vue.d.ts +3 -3
- package/dist/runtime/components/checkbox/Checkbox.vue +1 -0
- package/dist/runtime/components/forms/input/textarea/ATextarea.vue.d.ts +1 -1
- package/dist/runtime/components/pill-tabs/PillTabs.vue.d.ts +1 -1
- package/dist/runtime/components/row-card/RowCard.vue +1 -1
- package/dist/runtime/components/select-row/index.vue +117 -0
- package/dist/runtime/components/select-row/index.vue.d.ts +31 -0
- package/dist/runtime/components/tree-select/TreeSelect.vue +132 -0
- package/dist/runtime/components/tree-select/TreeSelect.vue.d.ts +22 -0
- package/dist/runtime/components/tree-select/TreeService.d.ts +54 -0
- package/dist/runtime/components/tree-select/TreeService.js +209 -0
- package/dist/runtime/components/tree-select/components/tree-select-nodes.vue +100 -0
- package/dist/runtime/components/tree-select/components/tree-select-nodes.vue.d.ts +9 -0
- package/dist/runtime/components/tree-select/types.d.ts +29 -0
- package/dist/runtime/components/tree-select/types.js +0 -0
- package/dist/runtime/composables/highlight.d.ts +1 -0
- package/dist/runtime/composables/highlight.js +15 -0
- package/dist/runtime/composables/projectState.d.ts +2 -2
- package/dist/runtime/i18n.d.ts +1 -1
- package/dist/runtime/icons/arrow/arrow-right.vue +24 -24
- package/dist/runtime/icons/calendar.vue +24 -24
- package/dist/runtime/icons/download.vue +26 -26
- package/dist/runtime/icons/file/excel.vue +88 -88
- package/dist/runtime/icons/more.vue +36 -36
- package/dist/runtime/icons/plus-circle.vue +24 -24
- package/dist/runtime/icons/upload.vue +26 -26
- package/dist/runtime/icons/warning-triangle.vue +29 -29
- package/dist/runtime/server/tsconfig.json +3 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,84 +1,84 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
Get your module up and running quickly.
|
|
3
|
-
|
|
4
|
-
Find and replace all on all files (CMD+SHIFT+F):
|
|
5
|
-
- Name: My Module
|
|
6
|
-
- Package name: my-module
|
|
7
|
-
- Description: My new Nuxt module
|
|
8
|
-
-->
|
|
9
|
-
|
|
10
|
-
# My Module
|
|
11
|
-
|
|
12
|
-
[![npm version][npm-version-src]][npm-version-href]
|
|
13
|
-
[![npm downloads][npm-downloads-src]][npm-downloads-href]
|
|
14
|
-
[![License][license-src]][license-href]
|
|
15
|
-
[![Nuxt][nuxt-src]][nuxt-href]
|
|
16
|
-
|
|
17
|
-
My new Nuxt module for doing amazing things.
|
|
18
|
-
|
|
19
|
-
- [✨ Release Notes](/CHANGELOG.md)
|
|
20
|
-
<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
|
|
21
|
-
<!-- - [📖 Documentation](https://example.com) -->
|
|
22
|
-
|
|
23
|
-
## Features
|
|
24
|
-
|
|
25
|
-
<!-- Highlight some of the features your module provide here -->
|
|
26
|
-
- ⛰ Foo
|
|
27
|
-
- 🚠 Bar
|
|
28
|
-
- 🌲 Baz
|
|
29
|
-
|
|
30
|
-
## Quick Setup
|
|
31
|
-
|
|
32
|
-
Install the module to your Nuxt application with one command:
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
npx nuxi module add my-module
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
That's it! You can now use My Module in your Nuxt app ✨
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
## Contribution
|
|
42
|
-
|
|
43
|
-
<details>
|
|
44
|
-
<summary>Local development</summary>
|
|
45
|
-
|
|
46
|
-
```bash
|
|
47
|
-
# Install dependencies
|
|
48
|
-
npm install
|
|
49
|
-
|
|
50
|
-
# Generate type stubs
|
|
51
|
-
npm run dev:prepare
|
|
52
|
-
|
|
53
|
-
# Develop with the playground
|
|
54
|
-
npm run dev
|
|
55
|
-
|
|
56
|
-
# Build the playground
|
|
57
|
-
npm run dev:build
|
|
58
|
-
|
|
59
|
-
# Run ESLint
|
|
60
|
-
npm run lint
|
|
61
|
-
|
|
62
|
-
# Run Vitest
|
|
63
|
-
npm run test
|
|
64
|
-
npm run test:watch
|
|
65
|
-
|
|
66
|
-
# Release new version
|
|
67
|
-
npm run release
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
</details>
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
<!-- Badges -->
|
|
74
|
-
[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
|
|
75
|
-
[npm-version-href]: https://npmjs.com/package/my-module
|
|
76
|
-
|
|
77
|
-
[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
|
|
78
|
-
[npm-downloads-href]: https://npm.chart.dev/my-module
|
|
79
|
-
|
|
80
|
-
[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
|
|
81
|
-
[license-href]: https://npmjs.com/package/my-module
|
|
82
|
-
|
|
83
|
-
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
|
|
84
|
-
[nuxt-href]: https://nuxt.com
|
|
1
|
+
<!--
|
|
2
|
+
Get your module up and running quickly.
|
|
3
|
+
|
|
4
|
+
Find and replace all on all files (CMD+SHIFT+F):
|
|
5
|
+
- Name: My Module
|
|
6
|
+
- Package name: my-module
|
|
7
|
+
- Description: My new Nuxt module
|
|
8
|
+
-->
|
|
9
|
+
|
|
10
|
+
# My Module
|
|
11
|
+
|
|
12
|
+
[![npm version][npm-version-src]][npm-version-href]
|
|
13
|
+
[![npm downloads][npm-downloads-src]][npm-downloads-href]
|
|
14
|
+
[![License][license-src]][license-href]
|
|
15
|
+
[![Nuxt][nuxt-src]][nuxt-href]
|
|
16
|
+
|
|
17
|
+
My new Nuxt module for doing amazing things.
|
|
18
|
+
|
|
19
|
+
- [✨ Release Notes](/CHANGELOG.md)
|
|
20
|
+
<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
|
|
21
|
+
<!-- - [📖 Documentation](https://example.com) -->
|
|
22
|
+
|
|
23
|
+
## Features
|
|
24
|
+
|
|
25
|
+
<!-- Highlight some of the features your module provide here -->
|
|
26
|
+
- ⛰ Foo
|
|
27
|
+
- 🚠 Bar
|
|
28
|
+
- 🌲 Baz
|
|
29
|
+
|
|
30
|
+
## Quick Setup
|
|
31
|
+
|
|
32
|
+
Install the module to your Nuxt application with one command:
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npx nuxi module add my-module
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
That's it! You can now use My Module in your Nuxt app ✨
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
## Contribution
|
|
42
|
+
|
|
43
|
+
<details>
|
|
44
|
+
<summary>Local development</summary>
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
# Install dependencies
|
|
48
|
+
npm install
|
|
49
|
+
|
|
50
|
+
# Generate type stubs
|
|
51
|
+
npm run dev:prepare
|
|
52
|
+
|
|
53
|
+
# Develop with the playground
|
|
54
|
+
npm run dev
|
|
55
|
+
|
|
56
|
+
# Build the playground
|
|
57
|
+
npm run dev:build
|
|
58
|
+
|
|
59
|
+
# Run ESLint
|
|
60
|
+
npm run lint
|
|
61
|
+
|
|
62
|
+
# Run Vitest
|
|
63
|
+
npm run test
|
|
64
|
+
npm run test:watch
|
|
65
|
+
|
|
66
|
+
# Release new version
|
|
67
|
+
npm run release
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
</details>
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
<!-- Badges -->
|
|
74
|
+
[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
|
|
75
|
+
[npm-version-href]: https://npmjs.com/package/my-module
|
|
76
|
+
|
|
77
|
+
[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
|
|
78
|
+
[npm-downloads-href]: https://npm.chart.dev/my-module
|
|
79
|
+
|
|
80
|
+
[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
|
|
81
|
+
[license-href]: https://npmjs.com/package/my-module
|
|
82
|
+
|
|
83
|
+
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
|
|
84
|
+
[nuxt-href]: https://nuxt.com
|
package/dist/module.json
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
class="inline-flex w-full rounded-md"
|
|
4
|
-
:class="twMerge(colorOptions.description[color], textBgClasses)"
|
|
5
|
-
>
|
|
6
|
-
<div
|
|
7
|
-
class="flex items-center justify-center rounded-l-md"
|
|
8
|
-
:class="twMerge([colorOptions.icon[color], sizeOptions[size]], iconBgClasses)"
|
|
9
|
-
>
|
|
10
|
-
<slot name="icon">
|
|
11
|
-
<i-info-circle
|
|
12
|
-
v-if="iconType == 'circle'"
|
|
13
|
-
:class="`w-[${iconSize}] h-[${iconSize}]`"
|
|
14
|
-
/>
|
|
15
|
-
<i-warning-triangle
|
|
16
|
-
v-if="iconType == 'triangle'"
|
|
17
|
-
:class="`w-[${iconSize}] h-[${iconSize}]`"
|
|
18
|
-
/>
|
|
19
|
-
</slot>
|
|
20
|
-
</div>
|
|
21
|
-
<div
|
|
22
|
-
:class="sizeOptions[size]"
|
|
23
|
-
class="rounded-r-md flex items-center"
|
|
24
|
-
>
|
|
25
|
-
<slot name="default" />
|
|
26
|
-
</div>
|
|
27
|
-
</div>
|
|
2
|
+
<div
|
|
3
|
+
class="inline-flex w-full rounded-md"
|
|
4
|
+
:class="twMerge(colorOptions.description[color], textBgClasses)"
|
|
5
|
+
>
|
|
6
|
+
<div
|
|
7
|
+
class="flex items-center justify-center rounded-l-md"
|
|
8
|
+
:class="twMerge([colorOptions.icon[color], sizeOptions[size]], iconBgClasses)"
|
|
9
|
+
>
|
|
10
|
+
<slot name="icon">
|
|
11
|
+
<i-info-circle
|
|
12
|
+
v-if="iconType == 'circle'"
|
|
13
|
+
:class="`w-[${iconSize}] h-[${iconSize}]`"
|
|
14
|
+
/>
|
|
15
|
+
<i-warning-triangle
|
|
16
|
+
v-if="iconType == 'triangle'"
|
|
17
|
+
:class="`w-[${iconSize}] h-[${iconSize}]`"
|
|
18
|
+
/>
|
|
19
|
+
</slot>
|
|
20
|
+
</div>
|
|
21
|
+
<div
|
|
22
|
+
:class="sizeOptions[size]"
|
|
23
|
+
class="rounded-r-md flex items-center"
|
|
24
|
+
>
|
|
25
|
+
<slot name="default" />
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
28
|
</template>
|
|
29
29
|
|
|
30
30
|
<script setup>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { twMerge } from "tailwind-merge";
|
|
3
|
+
defineProps({
|
|
4
|
+
size: { type: String, required: false, default: "sm" },
|
|
5
|
+
view: { type: String, required: false, default: "outline" }
|
|
6
|
+
});
|
|
7
|
+
const chipView = {
|
|
8
|
+
standard: "text-deepblue border-gray focus-visible:outline-gray",
|
|
9
|
+
outline: "text-blue border-blue focus-visible:outline-blue"
|
|
10
|
+
};
|
|
11
|
+
const sizeOptions = {
|
|
12
|
+
sm: "h-4",
|
|
13
|
+
md: "h-5",
|
|
14
|
+
lg: "h-7"
|
|
15
|
+
};
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<template>
|
|
19
|
+
<button
|
|
20
|
+
:class="twMerge(['flex items-center gap-2 rounded-3xl border border-solid px-2.5 text-xs hover:bg-deepblue-100 dark:hover:bg-[#E3E5E80D] focus-visible:shadow-[0_0_0_4px#1B64B3] active:bg-blue active:text-white disabled:border-deepblue-200 disabled:text-deepblue-200', chipView[view], sizeOptions[size]], $attrs.class)"
|
|
21
|
+
>
|
|
22
|
+
<slot />
|
|
23
|
+
</button>
|
|
24
|
+
</template>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
type Props = {
|
|
2
|
+
size?: 'sm' | 'md' | 'lg';
|
|
3
|
+
view?: 'standard' | 'outline';
|
|
4
|
+
};
|
|
5
|
+
declare var __VLS_1: {};
|
|
6
|
+
type __VLS_Slots = {} & {
|
|
7
|
+
default?: (props: typeof __VLS_1) => any;
|
|
8
|
+
};
|
|
9
|
+
declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
|
|
10
|
+
size: "sm" | "md" | "lg";
|
|
11
|
+
view: "standard" | "outline";
|
|
12
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
13
|
+
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
14
|
+
export default _default;
|
|
15
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
16
|
+
new (): {
|
|
17
|
+
$slots: S;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
@@ -13,8 +13,8 @@ export type StateType = {
|
|
|
13
13
|
declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
|
|
14
14
|
size: "sm" | "md" | "lg";
|
|
15
15
|
type: "primary" | "success" | "danger" | "gray" | "orange" | "warning";
|
|
16
|
-
disabled: boolean;
|
|
17
16
|
view: "default" | "inverted";
|
|
17
|
+
disabled: boolean;
|
|
18
18
|
customClasses: string;
|
|
19
19
|
prefix: string;
|
|
20
20
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
@@ -26,10 +26,10 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
|
|
|
26
26
|
daysRemaining: number;
|
|
27
27
|
limitRemaining: number;
|
|
28
28
|
isAuthenticated: boolean;
|
|
29
|
+
mobileHeaderType: "search" | "default";
|
|
29
30
|
module: ProjectKeys;
|
|
30
31
|
rate: string;
|
|
31
32
|
balance: number;
|
|
32
|
-
mobileHeaderType: "search" | "default";
|
|
33
33
|
showLogIn: boolean;
|
|
34
34
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
35
35
|
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
@@ -39,8 +39,8 @@ const typeSwitchValues = {
|
|
|
39
39
|
</script>
|
|
40
40
|
|
|
41
41
|
<template>
|
|
42
|
-
<div :class="[[classes], customClasses]">
|
|
43
|
-
<slot name="point" />
|
|
44
|
-
<slot />
|
|
45
|
-
</div>
|
|
42
|
+
<div :class="[[classes], customClasses]">
|
|
43
|
+
<slot name="point" />
|
|
44
|
+
<slot />
|
|
45
|
+
</div>
|
|
46
46
|
</template>
|
|
@@ -28,8 +28,8 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {
|
|
|
28
28
|
size: import("./types.js").Size;
|
|
29
29
|
color: import("./types.js").Color;
|
|
30
30
|
disabled: boolean;
|
|
31
|
-
slot: string;
|
|
32
31
|
defaultOpen: boolean;
|
|
32
|
+
slot: string;
|
|
33
33
|
divider: boolean;
|
|
34
34
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
35
35
|
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
@@ -8,7 +8,7 @@ const props = defineProps({
|
|
|
8
8
|
view: { type: String, required: false, default: "default" },
|
|
9
9
|
size: { type: String, required: false, default: "lg" },
|
|
10
10
|
form: { type: String, required: false, default: "button" },
|
|
11
|
-
icon: { type:
|
|
11
|
+
icon: { type: [Object, Function], required: false },
|
|
12
12
|
iconClass: { type: String, required: false, default: "" },
|
|
13
13
|
loading: { type: Boolean, required: false, default: false },
|
|
14
14
|
disabled: { type: Boolean, required: false, default: false },
|
|
@@ -18,15 +18,15 @@ type __VLS_Slots = {} & {
|
|
|
18
18
|
};
|
|
19
19
|
declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
|
|
20
20
|
size: "sm" | "md" | "lg" | "xl";
|
|
21
|
+
view: "default" | "outline" | "transparent";
|
|
21
22
|
disabled: boolean;
|
|
22
23
|
active: boolean;
|
|
23
|
-
|
|
24
|
+
to: string;
|
|
25
|
+
loading: boolean;
|
|
24
26
|
variant: "primary" | "success" | "danger" | "gray" | "ghost";
|
|
25
27
|
form: "icon" | "button";
|
|
26
28
|
iconClass: string;
|
|
27
|
-
loading: boolean;
|
|
28
29
|
block: boolean;
|
|
29
|
-
to: string;
|
|
30
30
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
31
31
|
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
32
32
|
export default _default;
|
|
@@ -24,9 +24,9 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
|
|
|
24
24
|
"onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
|
|
25
25
|
}>, {
|
|
26
26
|
size: "sm" | "md";
|
|
27
|
+
error: string | boolean;
|
|
27
28
|
disabled: boolean;
|
|
28
29
|
required: boolean;
|
|
29
|
-
error: string | boolean;
|
|
30
30
|
label: string;
|
|
31
31
|
readonly: boolean;
|
|
32
32
|
clearable: boolean;
|
|
@@ -24,8 +24,8 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
|
|
|
24
24
|
size: "lg" | "sm" | "xs";
|
|
25
25
|
view: "transparent" | "main" | "gray" | "blue" | "mobile";
|
|
26
26
|
block: boolean;
|
|
27
|
-
badgeSize: "sm" | "md" | "lg";
|
|
28
27
|
align: "left" | "center";
|
|
28
|
+
badgeSize: "sm" | "md" | "lg";
|
|
29
29
|
wrapper: "column" | "row";
|
|
30
30
|
countView: "badge" | "brackets";
|
|
31
31
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
@@ -7,7 +7,7 @@ const props = defineProps({
|
|
|
7
7
|
titleClasses: { type: String, required: false },
|
|
8
8
|
cardClasses: { type: String, required: false },
|
|
9
9
|
valueClasses: { type: String, required: false },
|
|
10
|
-
icon: { type:
|
|
10
|
+
icon: { type: [Object, Function], required: false }
|
|
11
11
|
});
|
|
12
12
|
const combinedCardClasses = twMerge("flex justify-between items-center rounded-md py-3 px-4 dark:bg-gray-900 bg-white", props.cardClasses);
|
|
13
13
|
const combinedLeadingClasses = twMerge("rounded-full size-4", props.leadingColor);
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { isEqual } from "lodash-es";
|
|
3
|
+
import { twMerge } from "tailwind-merge";
|
|
4
|
+
import { computed, ref } from "#imports";
|
|
5
|
+
const props = defineProps({
|
|
6
|
+
clearable: { type: Boolean, required: false, default: true },
|
|
7
|
+
disabled: { type: Boolean, required: false, default: false },
|
|
8
|
+
deletable: { type: Boolean, required: false, default: false },
|
|
9
|
+
label: { type: String, required: true, default: "select" },
|
|
10
|
+
selectedItems: { type: Array, required: true },
|
|
11
|
+
btnClass: { type: String, required: false, default: "" }
|
|
12
|
+
});
|
|
13
|
+
const items = computed(() => {
|
|
14
|
+
return props.selectedItems;
|
|
15
|
+
});
|
|
16
|
+
const emits = defineEmits(["delete"]);
|
|
17
|
+
const disabledStyles = "disabled:pointer-events-none disabled:opacity-40 disabled:bg-deepblue-50 disabled:text-deepblue-200 disabled:dark:text-gray-500";
|
|
18
|
+
const isOpen = defineModel("isOpen", { type: Boolean });
|
|
19
|
+
const minWidthOfChip = 100;
|
|
20
|
+
const buttonElement = ref();
|
|
21
|
+
const buttonWidth = computed(() => buttonElement.value?.offsetWidth - 50);
|
|
22
|
+
const itemsCount = computed(() => {
|
|
23
|
+
return items.value.length;
|
|
24
|
+
});
|
|
25
|
+
const maxWidthOfChip = computed(() => {
|
|
26
|
+
if (itemsCount.value) {
|
|
27
|
+
const width = (itemsCount.value <= 5 ? buttonWidth.value - itemsCount.value * 8 : buttonWidth.value) / itemsCount.value;
|
|
28
|
+
if (width < minWidthOfChip) {
|
|
29
|
+
return minWidthOfChip;
|
|
30
|
+
}
|
|
31
|
+
return width;
|
|
32
|
+
}
|
|
33
|
+
return "auto";
|
|
34
|
+
});
|
|
35
|
+
const countOfVisibleItems = computed(() => {
|
|
36
|
+
if (!items.value?.length) return void 0;
|
|
37
|
+
const maxCountOfVisibleItems = Math.floor((buttonElement.value?.offsetWidth - 50) / 120);
|
|
38
|
+
if (maxCountOfVisibleItems > items.value.length) return items.value.length;
|
|
39
|
+
else return maxCountOfVisibleItems;
|
|
40
|
+
});
|
|
41
|
+
const visibleItems = computed(() => {
|
|
42
|
+
if (!items.value.length && !countOfVisibleItems.value) return void 0;
|
|
43
|
+
return items.value.slice(0, countOfVisibleItems.value);
|
|
44
|
+
});
|
|
45
|
+
const countOfUnvisibleItems = computed(() => {
|
|
46
|
+
if (!items.value?.length && !countOfVisibleItems.value) return void 0;
|
|
47
|
+
return items.value.length - countOfVisibleItems.value;
|
|
48
|
+
});
|
|
49
|
+
const deleteItem = (item) => {
|
|
50
|
+
emits("delete", item);
|
|
51
|
+
items.value = items.value?.filter((el) => !isEqual(el, item));
|
|
52
|
+
};
|
|
53
|
+
const onClear = () => {
|
|
54
|
+
items.value.length = 0;
|
|
55
|
+
};
|
|
56
|
+
</script>
|
|
57
|
+
|
|
58
|
+
<template>
|
|
59
|
+
<div>
|
|
60
|
+
<button
|
|
61
|
+
ref="buttonElement"
|
|
62
|
+
class="hover:border-blue focus-visible:outline-blue
|
|
63
|
+
relative flex w-full items-center justify-between gap-2 rounded-md
|
|
64
|
+
border border-solid border-deepblue-50 bg-deepblue-50 min-h-[40px] text-gray-500 body-400 px-4 py-1.5
|
|
65
|
+
focus-visible:shadow-[0_0_0_4px#1B64B3] dark:border-gray-900 dark:bg-gray-200/5
|
|
66
|
+
dark:hover:border-blue-700"
|
|
67
|
+
:class="twMerge(disabledStyles, props.btnClass)"
|
|
68
|
+
:disabled="disabled"
|
|
69
|
+
@click="isOpen = !isOpen"
|
|
70
|
+
>
|
|
71
|
+
<div>
|
|
72
|
+
<div
|
|
73
|
+
v-if="visibleItems && visibleItems.length"
|
|
74
|
+
class="flex gap-2"
|
|
75
|
+
>
|
|
76
|
+
<adt-chip
|
|
77
|
+
v-for="item in visibleItems"
|
|
78
|
+
:key="item.id"
|
|
79
|
+
size="md"
|
|
80
|
+
class="text-deepblue-900 dark:text-gray-200 border-gray-500"
|
|
81
|
+
:style="{ 'max-width': maxWidthOfChip + 'px' }"
|
|
82
|
+
>
|
|
83
|
+
<span class="truncate">{{ item.name }}</span>
|
|
84
|
+
<button
|
|
85
|
+
v-if="deletable"
|
|
86
|
+
class="rounded-full bg-deepblue-100 dark:bg-gray-200/10"
|
|
87
|
+
@click.stop="deleteItem(item)"
|
|
88
|
+
>
|
|
89
|
+
<a-icon-x-mark class="size-3 dark:text-gray-300" />
|
|
90
|
+
</button>
|
|
91
|
+
</adt-chip>
|
|
92
|
+
<adt-chip
|
|
93
|
+
v-if="countOfUnvisibleItems"
|
|
94
|
+
class="text-blue-700 dark:text-blue-500 border-blue-700 dark:border-blue-500 whitespace-nowrap"
|
|
95
|
+
size="md"
|
|
96
|
+
>
|
|
97
|
+
+ {{ countOfUnvisibleItems }}
|
|
98
|
+
</adt-chip>
|
|
99
|
+
</div>
|
|
100
|
+
<div v-else>
|
|
101
|
+
{{ label }}
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
<!-- <button -->
|
|
105
|
+
<!-- v-if="visibleItems && countOfVisibleItems && clearable" -->
|
|
106
|
+
<!-- class="absolute right-10 top-1/2 -translate-y-1/2 rounded-full bg-deepblue-100 dark:bg-gray-200/10" -->
|
|
107
|
+
<!-- @click.stop="onClear" -->
|
|
108
|
+
<!-- > -->
|
|
109
|
+
<!-- <a-icon-chevron-down class="!m-0 text-base dark:text-gray-300"/> -->
|
|
110
|
+
<!-- </button> -->
|
|
111
|
+
<a-icon-chevron-down
|
|
112
|
+
class="!m-0 min-w-4 transition-all text-deepblue-900 dark:text-gray-500"
|
|
113
|
+
:class="{ '-rotate-90': !isOpen }"
|
|
114
|
+
/>
|
|
115
|
+
</button>
|
|
116
|
+
</div>
|
|
117
|
+
</template>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
type Item = {
|
|
2
|
+
id: number | string;
|
|
3
|
+
name: string;
|
|
4
|
+
};
|
|
5
|
+
interface Props {
|
|
6
|
+
clearable?: boolean;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
deletable?: boolean;
|
|
9
|
+
label: string;
|
|
10
|
+
selectedItems: Item[];
|
|
11
|
+
btnClass?: string;
|
|
12
|
+
}
|
|
13
|
+
type __VLS_Props = Props;
|
|
14
|
+
type __VLS_PublicProps = __VLS_Props & {
|
|
15
|
+
'isOpen'?: boolean;
|
|
16
|
+
};
|
|
17
|
+
declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
18
|
+
"update:isOpen": (value: boolean | undefined) => any;
|
|
19
|
+
} & {
|
|
20
|
+
delete: (item: Item) => any;
|
|
21
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
22
|
+
onDelete?: ((item: Item) => any) | undefined;
|
|
23
|
+
"onUpdate:isOpen"?: ((value: boolean | undefined) => any) | undefined;
|
|
24
|
+
}>, {
|
|
25
|
+
disabled: boolean;
|
|
26
|
+
label: string;
|
|
27
|
+
clearable: boolean;
|
|
28
|
+
deletable: boolean;
|
|
29
|
+
btnClass: string;
|
|
30
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
31
|
+
export default _default;
|