adata-ui 2.1.36 → 2.1.37
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/.nuxtrc +1 -1
- package/.playground/app.config.ts +5 -5
- package/README.md +75 -75
- package/components/elements/README.md +1 -1
- package/components/elements/select/ASelect.vue +4 -2
- package/components/features/lang-switcher/lang-switcher.vue +11 -3
- package/components/forms/README.md +1 -1
- package/components/forms/input/standard/AInputStandard.vue +4 -1
- package/components/forms/input/textarea/ATextarea.vue +4 -1
- package/components/modals/ReportBugModal.vue +4 -4
- package/components/modals/id/IdLoginModal.vue +2 -2
- package/components/navigation/README.md +1 -1
- package/components/navigation/header/AHeader.vue +1 -0
- package/components/overlays/README.md +1 -1
- package/package.json +1 -1
package/.nuxtrc
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
typescript.includeWorkspace = true
|
|
1
|
+
typescript.includeWorkspace = true
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export default defineAppConfig({
|
|
2
|
-
myLayer: {
|
|
3
|
-
name: 'My amazing Nuxt layer (overwritten)'
|
|
4
|
-
}
|
|
5
|
-
})
|
|
1
|
+
export default defineAppConfig({
|
|
2
|
+
myLayer: {
|
|
3
|
+
name: 'My amazing Nuxt layer (overwritten)'
|
|
4
|
+
}
|
|
5
|
+
})
|
package/README.md
CHANGED
|
@@ -1,75 +1,75 @@
|
|
|
1
|
-
# Adata UI with Nuxt 3 using Layers
|
|
2
|
-
|
|
3
|
-
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
|
4
|
-
|
|
5
|
-
## Setup
|
|
6
|
-
|
|
7
|
-
Make sure to install the dependencies:
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
# npm
|
|
11
|
-
npm install
|
|
12
|
-
|
|
13
|
-
# pnpm
|
|
14
|
-
pnpm install
|
|
15
|
-
|
|
16
|
-
# yarn
|
|
17
|
-
yarn install
|
|
18
|
-
|
|
19
|
-
# bun
|
|
20
|
-
bun install
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
## Development Server
|
|
24
|
-
|
|
25
|
-
Start the development server on `https://localhost:3000`:
|
|
26
|
-
|
|
27
|
-
```bash
|
|
28
|
-
# npm
|
|
29
|
-
npm run dev
|
|
30
|
-
|
|
31
|
-
# pnpm
|
|
32
|
-
pnpm run dev
|
|
33
|
-
|
|
34
|
-
# yarn
|
|
35
|
-
yarn dev
|
|
36
|
-
|
|
37
|
-
# bun
|
|
38
|
-
bun run dev
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
## Production
|
|
42
|
-
|
|
43
|
-
Build the application for production:
|
|
44
|
-
|
|
45
|
-
```bash
|
|
46
|
-
# npm
|
|
47
|
-
npm run build
|
|
48
|
-
|
|
49
|
-
# pnpm
|
|
50
|
-
pnpm run build
|
|
51
|
-
|
|
52
|
-
# yarn
|
|
53
|
-
yarn build
|
|
54
|
-
|
|
55
|
-
# bun
|
|
56
|
-
bun run build
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
Locally preview production build:
|
|
60
|
-
|
|
61
|
-
```bash
|
|
62
|
-
# npm
|
|
63
|
-
npm run preview
|
|
64
|
-
|
|
65
|
-
# pnpm
|
|
66
|
-
pnpm run preview
|
|
67
|
-
|
|
68
|
-
# yarn
|
|
69
|
-
yarn preview
|
|
70
|
-
|
|
71
|
-
# bun
|
|
72
|
-
bun run preview
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
|
1
|
+
# Adata UI with Nuxt 3 using Layers
|
|
2
|
+
|
|
3
|
+
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
|
4
|
+
|
|
5
|
+
## Setup
|
|
6
|
+
|
|
7
|
+
Make sure to install the dependencies:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
# npm
|
|
11
|
+
npm install
|
|
12
|
+
|
|
13
|
+
# pnpm
|
|
14
|
+
pnpm install
|
|
15
|
+
|
|
16
|
+
# yarn
|
|
17
|
+
yarn install
|
|
18
|
+
|
|
19
|
+
# bun
|
|
20
|
+
bun install
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Development Server
|
|
24
|
+
|
|
25
|
+
Start the development server on `https://localhost:3000`:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
# npm
|
|
29
|
+
npm run dev
|
|
30
|
+
|
|
31
|
+
# pnpm
|
|
32
|
+
pnpm run dev
|
|
33
|
+
|
|
34
|
+
# yarn
|
|
35
|
+
yarn dev
|
|
36
|
+
|
|
37
|
+
# bun
|
|
38
|
+
bun run dev
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Production
|
|
42
|
+
|
|
43
|
+
Build the application for production:
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
# npm
|
|
47
|
+
npm run build
|
|
48
|
+
|
|
49
|
+
# pnpm
|
|
50
|
+
pnpm run build
|
|
51
|
+
|
|
52
|
+
# yarn
|
|
53
|
+
yarn build
|
|
54
|
+
|
|
55
|
+
# bun
|
|
56
|
+
bun run build
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Locally preview production build:
|
|
60
|
+
|
|
61
|
+
```bash
|
|
62
|
+
# npm
|
|
63
|
+
npm run preview
|
|
64
|
+
|
|
65
|
+
# pnpm
|
|
66
|
+
pnpm run preview
|
|
67
|
+
|
|
68
|
+
# yarn
|
|
69
|
+
yarn preview
|
|
70
|
+
|
|
71
|
+
# bun
|
|
72
|
+
bun run preview
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
# button, alerts, dropdown
|
|
1
|
+
# button, alerts, dropdown
|
|
@@ -32,6 +32,7 @@ type Props = {
|
|
|
32
32
|
showFirstItem?: boolean
|
|
33
33
|
buttonBg?: string
|
|
34
34
|
changeableModelValue?: boolean
|
|
35
|
+
maxHeight?: number
|
|
35
36
|
}
|
|
36
37
|
|
|
37
38
|
type Emits = {
|
|
@@ -61,6 +62,7 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
61
62
|
canChipRemove: true,
|
|
62
63
|
showFirstItem: false,
|
|
63
64
|
buttonBg: 'border-deepblue-50 bg-deepblue-50 dark:border-gray-900 dark:bg-gray-200/5',
|
|
65
|
+
maxHeight: 320,
|
|
64
66
|
})
|
|
65
67
|
|
|
66
68
|
const emits = defineEmits<Emits>()
|
|
@@ -80,7 +82,7 @@ const { x, y, strategy, update } = useFloating(reference, floating, {
|
|
|
80
82
|
apply({ availableHeight, elements, rects }) {
|
|
81
83
|
const el = elements.floating as HTMLElement
|
|
82
84
|
el.style.width = `${rects.reference.width}px`
|
|
83
|
-
el.style.maxHeight = `${Math.max(140, Math.min(availableHeight,
|
|
85
|
+
el.style.maxHeight = `${Math.max(140, Math.min(availableHeight, props.maxHeight))}px`
|
|
84
86
|
el.style.overflowY = props.hideOverflow ? 'hidden' : 'auto'
|
|
85
87
|
},
|
|
86
88
|
}),
|
|
@@ -362,7 +364,7 @@ onUnmounted(() => cleanup?.())
|
|
|
362
364
|
}"
|
|
363
365
|
>
|
|
364
366
|
<slot :options="options" name="options">
|
|
365
|
-
<ul class="select m-2
|
|
367
|
+
<ul class="select m-2 overflow-y-auto overflow-x-hidden" :style="{ maxHeight: `${maxHeight - 70}px` }">
|
|
366
368
|
<li v-if="searchFromOut" class="p-1">
|
|
367
369
|
<a-input v-model="search" :label="searchLabel" :size="size" clearable color="gray" />
|
|
368
370
|
</li>
|
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import { onClickOutside } from "@vueuse/core";
|
|
3
|
+
|
|
4
|
+
const props = withDefaults(defineProps<{
|
|
5
|
+
isMobile?: boolean
|
|
6
|
+
}>(), {
|
|
7
|
+
isMobile: false
|
|
8
|
+
})
|
|
9
|
+
|
|
3
10
|
const langSwitcher = ref<HTMLDivElement | null>(null)
|
|
4
11
|
|
|
5
12
|
const switchLocalePath = useSwitchLocalePath()
|
|
@@ -16,6 +23,8 @@ onClickOutside(langSwitcher,() => {
|
|
|
16
23
|
|
|
17
24
|
const { t } = useI18n()
|
|
18
25
|
|
|
26
|
+
const testIdSuffix = computed(() => props.isMobile ? '-mobile' : '')
|
|
27
|
+
|
|
19
28
|
function onClick(loc: any) {
|
|
20
29
|
if ((loc?.code || loc) === locale.value) return
|
|
21
30
|
|
|
@@ -28,13 +37,12 @@ function onClick(loc: any) {
|
|
|
28
37
|
<div
|
|
29
38
|
ref="langSwitcher"
|
|
30
39
|
class="relative"
|
|
31
|
-
data-test-id="header-switch-language-button"
|
|
32
40
|
>
|
|
33
|
-
|
|
34
41
|
<button
|
|
35
42
|
class="text-xs font-semibold py-1 px-2 bg-gray-100 dark:bg-gray-200/5 rounded"
|
|
36
43
|
@click="isOpen = true"
|
|
37
44
|
aria-hidden="true"
|
|
45
|
+
:data-test-id="`header-switch-language-button${testIdSuffix}`"
|
|
38
46
|
>
|
|
39
47
|
{{ t(`lang.${locale}.short`) }}
|
|
40
48
|
</button>
|
|
@@ -44,7 +52,7 @@ function onClick(loc: any) {
|
|
|
44
52
|
>
|
|
45
53
|
<nuxt-link
|
|
46
54
|
v-for="loc in locales"
|
|
47
|
-
:data-test-id="`header-switch-${loc?.code}-language-button`"
|
|
55
|
+
:data-test-id="`header-switch-${loc?.code}-language-button${testIdSuffix}`"
|
|
48
56
|
:class="[
|
|
49
57
|
'text-sm cursor-pointer px-4 py-2.5 flex justify-between',
|
|
50
58
|
{'text-primary bg-deepblue-500/5': locale === loc.code}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
# inputs
|
|
1
|
+
# inputs
|
|
@@ -18,6 +18,7 @@ interface Props {
|
|
|
18
18
|
autocompleteKey?: K
|
|
19
19
|
autocompleteFn?: (item: T) => string
|
|
20
20
|
colorClasses?:string
|
|
21
|
+
dataTestId?: string
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
const props = withDefaults(defineProps<Props>(), {
|
|
@@ -34,7 +35,8 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
34
35
|
autocompleteList: () => [],
|
|
35
36
|
autocompleteOption: undefined,
|
|
36
37
|
autocompleteKey: undefined,
|
|
37
|
-
autocompleteFn: undefined
|
|
38
|
+
autocompleteFn: undefined,
|
|
39
|
+
dataTestId: undefined,
|
|
38
40
|
})
|
|
39
41
|
|
|
40
42
|
const {t} = useI18n()
|
|
@@ -285,6 +287,7 @@ defineExpose({
|
|
|
285
287
|
required
|
|
286
288
|
:tabindex="disabled ? -1 : 0"
|
|
287
289
|
v-bind="$attrs"
|
|
290
|
+
:data-test-id="dataTestId"
|
|
288
291
|
@input="emit('updateValue', modelValue)"
|
|
289
292
|
@keydown="handleKeydown"
|
|
290
293
|
@focus="isFocused = true"
|
|
@@ -13,6 +13,7 @@ interface Props {
|
|
|
13
13
|
resizeable?: boolean | 'none' | 'both' | 'x' | 'y'
|
|
14
14
|
startIcon?: string | object
|
|
15
15
|
colorClasses?: string
|
|
16
|
+
dataTestId?: string
|
|
16
17
|
}
|
|
17
18
|
|
|
18
19
|
const props = withDefaults(defineProps<Props>(), {
|
|
@@ -25,7 +26,8 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
25
26
|
clearable: false,
|
|
26
27
|
resizeable: true,
|
|
27
28
|
startIcon: '',
|
|
28
|
-
colorClasses: ''
|
|
29
|
+
colorClasses: '',
|
|
30
|
+
dataTestId: undefined,
|
|
29
31
|
})
|
|
30
32
|
|
|
31
33
|
const uiConfig = {
|
|
@@ -121,6 +123,7 @@ const labelClass = computed(() =>
|
|
|
121
123
|
class="input"
|
|
122
124
|
required
|
|
123
125
|
v-bind="$attrs"
|
|
126
|
+
:data-test-id="dataTestId"
|
|
124
127
|
/>
|
|
125
128
|
<label :class="labelClass" :for="label" class="label cursor-pointer">
|
|
126
129
|
<span class="text">{{ label }}</span>
|
|
@@ -104,14 +104,14 @@ async function send() {
|
|
|
104
104
|
<a-input-standard
|
|
105
105
|
v-model="form.name"
|
|
106
106
|
required
|
|
107
|
-
data-test-id="report-form-name-input"
|
|
107
|
+
:data-test-id="'report-form-name-input'"
|
|
108
108
|
:label="t('modals.report_bug.labels.name')"
|
|
109
109
|
:error="getError('name')"
|
|
110
110
|
/>
|
|
111
111
|
<a-input-standard
|
|
112
112
|
v-model="form.email"
|
|
113
113
|
required
|
|
114
|
-
data-test-id="report-form-email-input"
|
|
114
|
+
:data-test-id="'report-form-email-input'"
|
|
115
115
|
:label="t('modals.report_bug.labels.email')"
|
|
116
116
|
:error="getError('email')"
|
|
117
117
|
/>
|
|
@@ -121,7 +121,7 @@ async function send() {
|
|
|
121
121
|
required
|
|
122
122
|
data-maska="8 (###) ### ## ##"
|
|
123
123
|
clearable
|
|
124
|
-
data-test-id="report-form-phone-input"
|
|
124
|
+
:data-test-id="'report-form-phone-input'"
|
|
125
125
|
:label="t('modals.report_bug.labels.phone')"
|
|
126
126
|
:error="getError('phone_number')"
|
|
127
127
|
/>
|
|
@@ -129,7 +129,7 @@ async function send() {
|
|
|
129
129
|
<a-textarea
|
|
130
130
|
v-model="form.comment"
|
|
131
131
|
required
|
|
132
|
-
data-test-id="report-form-comment-textarea"
|
|
132
|
+
:data-test-id="'report-form-comment-textarea'"
|
|
133
133
|
:label="t('modals.report_bug.labels.comment')"
|
|
134
134
|
size="md"
|
|
135
135
|
:error="getError('comment')"
|
|
@@ -238,13 +238,13 @@ onBeforeUnmount(() => {
|
|
|
238
238
|
<a-input-standard
|
|
239
239
|
v-model="form.username"
|
|
240
240
|
type="email"
|
|
241
|
-
data-test-id="login-form-email-input"
|
|
241
|
+
:data-test-id="'login-form-email-input'"
|
|
242
242
|
:label="t('modals.id.login.labels.email')"
|
|
243
243
|
:error="getError('username')"
|
|
244
244
|
/>
|
|
245
245
|
<a-input-password
|
|
246
246
|
v-model="form.password"
|
|
247
|
-
data-test-id="login-form-password-input"
|
|
247
|
+
:data-test-id="'login-form-password-input'"
|
|
248
248
|
:label="t('modals.id.login.labels.password')"
|
|
249
249
|
:error="getError('password')"
|
|
250
250
|
/>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
# breadcrumb, tabs
|
|
1
|
+
# breadcrumb, tabs
|
|
@@ -1 +1 @@
|
|
|
1
|
-
# tooltip, popover, slide over, modal, context menu
|
|
1
|
+
# tooltip, popover, slide over, modal, context menu
|