@stonecrop/aform 0.4.35 → 0.4.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/dist/aform.js +555 -660
- package/dist/aform.js.map +1 -1
- package/dist/aform.tsbuildinfo +1 -1
- package/dist/aform.umd.cjs +2 -2
- package/dist/aform.umd.cjs.map +1 -1
- package/dist/assets/index.css +1 -1
- package/dist/directives/mask.js +1 -1
- package/package.json +25 -25
- package/src/components/AForm.vue +2 -2
- package/src/components/form/ACheckbox.vue +3 -3
- package/src/components/form/AComboBox.vue +2 -1
- package/src/components/form/ADate.vue +3 -3
- package/src/components/form/ADatePicker.vue +7 -7
- package/src/components/form/ADropdown.vue +19 -9
- package/src/components/form/AFieldset.vue +7 -2
- package/src/components/form/AFileAttach.vue +2 -2
- package/src/components/form/ANumericInput.vue +4 -4
- package/src/components/form/ATextInput.vue +7 -7
- package/src/components/utilities/Login.vue +3 -3
- package/src/directives/mask.ts +1 -1
package/dist/assets/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.aform_checkbox[data-v-
|
|
1
|
+
.aform_checkbox[data-v-aaa1a4c4]{cursor:pointer;width:auto;margin-top:0;display:block}.aform_checkbox[data-v-aaa1a4c4]:checked{accent-color:var(--sc-primary-color);border:1px solid black}.aform_checkbox-container[data-v-aaa1a4c4]{width:100%;display:inline-block;text-align:left}.aform_checkbox-container input[data-v-aaa1a4c4]{width:auto}.aform_checkbox-container:hover+.aform_field-label[data-v-aaa1a4c4]{color:var(--sc-input-active-label-color)}div[data-v-455d9e30]{min-width:40ch;width:100%;box-sizing:border-box;border:1px solid transparent;padding:0rem;margin:0rem;margin-right:1ch}input[data-v-455d9e30]{width:calc(100% - 1ch);box-sizing:border-box;outline:1px solid transparent;border:1px solid var(--sc-input-border-color);padding:1ch .5ch .5ch 1ch;margin:.575rem 0 0;min-height:1.15rem;border-radius:.25rem}p[data-v-455d9e30],label[data-v-455d9e30]{color:var(--sc-input-label-color);display:block;min-height:1.15rem;padding:0rem;margin:0rem 0rem .25rem;border:1px solid transparent;box-sizing:border-box}p[data-v-455d9e30]{width:100%;color:red;font-size:85%;box-sizing:border-box}label[data-v-455d9e30]{z-index:2;font-size:80%;position:absolute;background:#fff;margin:-2.575rem 0 0 1ch;padding:0 .25ch;box-sizing:border-box}input[data-v-455d9e30]:focus{border:1px solid var(--sc-input-active-border-color)}input:focus+label[data-v-455d9e30]{color:var(--sc-input-active-label-color)}.autocomplete[data-v-31a6db8c]{position:relative}.input-wrapper[data-v-31a6db8c]{border:1px solid transparent;padding:0rem;margin:0rem;margin-right:1ch}input[data-v-31a6db8c]{width:calc(100% - 1ch);outline:1px solid transparent;border:1px solid var(--sc-input-border-color);padding:1ch .5ch .5ch 1ch;margin:.575rem 0 0;min-height:1.15rem;border-radius:.25rem}input[data-v-31a6db8c]:focus{border:1px solid var(--sc-input-active-border-color);border-radius:.25rem .25rem 0 0;border-bottom:none}label[data-v-31a6db8c]{display:block;min-height:1.15rem;padding:0rem;margin:0rem 0rem .25rem;border:1px solid transparent;z-index:2;font-size:80%;position:absolute;background:#fff;margin:-2.575rem 0 0 1ch;padding:0 .25ch}.autocomplete-results[data-v-31a6db8c]{position:absolute;width:calc(100% - 1ch + 1.5px);z-index:999;padding:0;margin:0;color:var(--sc-input-active-border-color);border:1px solid var(--sc-input-active-border-color);border-radius:0 0 .25rem .25rem;border-top:none;background-color:#fff}.autocomplete-result[data-v-31a6db8c]{list-style:none;text-align:left;padding:4px 6px;cursor:pointer;border-bottom:.5px solid lightgray}.autocomplete-result.is-active[data-v-31a6db8c],.autocomplete-result[data-v-31a6db8c]:hover{background-color:var(--sc-row-color-zebra-light);color:var(--sc-input-active-border-color)}.adatepicker[data-v-056d2b5e]{font-size:var(--sc-table-font-size);display:inline-table;color:var(--sc-cell-text-color);outline:none;border-collapse:collapse}.adatepicker tr[data-v-056d2b5e]{height:1.15rem;text-align:center;vertical-align:middle}.adatepicker td[data-v-056d2b5e]{border:2px solid transparent;outline:2px solid transparent;min-width:3ch;max-width:3ch}.adatepicker td[data-v-056d2b5e]:focus,.adatepicker td[data-v-056d2b5e]:focus-within{outline:1px dashed black;box-shadow:none;min-height:1.15em;max-height:1.15em;overflow:hidden}.adatepicker .selectedDate[data-v-056d2b5e]{outline:1px solid black;background:var(--sc-gray-20);font-weight:bolder}.adatepicker .todaysDate[data-v-056d2b5e]{font-weight:bolder;text-decoration:underline;color:#000}.days-header>td[data-v-056d2b5e]{font-weight:700}.prev-date[data-v-056d2b5e]{color:var(--sc-gray-20)}.collapse-button[data-v-6f1c1b45]{width:2ch;min-width:calc(66px - 4ch);background-color:transparent;font-size:150%;text-align:center;border:none;margin-top:-.5rem}.rotated[data-v-6f1c1b45]{transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transition:transform .25s;transform-origin:center center}.unrotated[data-v-6f1c1b45]{transform:rotate(0);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transition:transform .25s}.aform_form-element{padding:0;margin:0;position:relative;box-sizing:border-box;flex-grow:1;min-width:20ch;margin-bottom:1rem}.aform_input-field{outline:1px solid var(--sc-input-border-color);outline-offset:-1px;font-size:1rem;padding:.5rem;margin:0;border-radius:0;box-sizing:border-box;width:100%;min-height:auto;position:relative;color:var(--sc-cell-text-color);background:var(--sc-input-field-background)}.aform_input-field:focus{outline:1px solid var(--sc-input-active-border-color)}.aform_input-field:focus+.aform_field-label{color:var(--sc-input-active-label-color)}.aform_field-label{color:var(--sc-input-label-color);display:inline-block;position:absolute;padding:0 .25rem;margin:0rem;z-index:2;font-size:.7rem;font-weight:300;letter-spacing:.05rem;background:linear-gradient(var(--sc-form-background) 50%,var(--sc-input-field-background) 50%);width:auto;box-sizing:border-box;background:#fff;margin:0;grid-row:1;top:0;left:10px;border:none;line-height:0;transform:translateY(-50%)}.aform_input-field:disabled{background:var(--sc-input-field-disabled-background)}.aform_input-field:disabled+.aform_field-label{background:linear-gradient(var(--sc-form-background) 50%,var(--sc-input-field-disabled-background) 50%)}.aform_input-field:disabled~p.aform_error{background:linear-gradient(var(--sc-form-background) 50%,var(--sc-input-field-disabled-background) 50%)}.aform_field-label:after{margin:0;padding:0;box-sizing:border-box;content:"";line-height:normal}p.aform_error{display:block;display:inline-block;display:none;background:linear-gradient(var(--sc-form-background) 50%,var(--sc-input-field-background) 50%);padding:0 .25rem;margin:0rem;width:auto;color:var(--sc-brand-danger);font-size:.7rem;position:absolute;right:0;top:0;line-height:0;background:#fff;padding:.25rem;transform:translate(-1rem,-50%);margin:0}.aform[data-v-da354cb0]{display:flex;flex-wrap:wrap;gap:1rem;padding:1rem;border:1px solid var(--sc-form-border);border-left:4px solid var(--sc-form-border);margin-bottom:1rem;max-width:100%}@media screen and (max-width: 400px){.aform[data-v-da354cb0]{flex-direction:column}}fieldset[data-v-40b2a95d]{max-width:100%;width:100%;margin-right:2ch;border:1px solid transparent;border-bottom:1px solid var(--sc-gray-50)}legend[data-v-40b2a95d]{width:100%;height:1.15rem;border:1px solid transparent;padding-bottom:.5rem;font-size:110%;font-weight:600;-webkit-user-select:none;user-select:none}.collapse-button[data-v-40b2a95d]{float:right}.aform_file-attach[data-v-b700734f]{padding:1rem;display:flex;flex-wrap:wrap;gap:1rem;flex-direction:row;justify-content:center;align-items:center;border:1px dashed var(--sc-input-border-color);width:100%}@media screen and (max-width: 400px){.aform_file-attach>.aform_form-btn[data-v-b700734f]{width:100%}}.aform_file-attach-feedback[data-v-b700734f]{color:var(--sc-input-label-color);width:100%;padding:.5rem;text-align:center;align-self:center}.aform_file-attach-feedback>li[data-v-b700734f]{list-style:none;font-style:italic}.aform_file-attach-feedback>p[data-v-b700734f]{margin-top:0}.aform_form-btn[data-v-b700734f]{padding:.5rem 2rem;width:auto;border:1px solid var(--sc-input-border-color);color:var(--sc-input-label-color);cursor:pointer;background-color:#fff}.aform_form-btn[data-v-b700734f]:disabled{background-color:var(--sc-gray-5)}.login-container[data-v-d9ffd0a7]{width:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--sc-font-family)}.account-container[data-v-d9ffd0a7]{width:100%;margin-left:auto;margin-top:.5rem;margin-right:auto;display:flex;flex-direction:column;justify-content:center}.account-header[data-v-d9ffd0a7]{display:flex;flex-direction:column;text-align:center;margin-top:.5rem}#account-title[data-v-d9ffd0a7]{font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:-.025em;margin:0}#account-subtitle[data-v-d9ffd0a7]{font-size:.875rem;line-height:1.25rem;margin:1rem}.login-form-container[data-v-d9ffd0a7]{display:grid;gap:.5rem}.login-form-element[data-v-d9ffd0a7]{display:grid;margin:.5rem 0;position:relative}.login-field[data-v-d9ffd0a7]{padding:.5rem .25rem .25rem .5rem;outline:1px solid transparent;border:1px solid var(--sc-input-border-color);border-radius:.25rem}.login-field[data-v-d9ffd0a7]:focus{border:1px solid black}.btn[data-v-d9ffd0a7]{background-color:var(--sc-btn-color);color:var(--sc-btn-label-color);border:1px solid var(--sc-btn-border);margin:.5rem 0;padding:.25rem;position:relative;cursor:pointer}.btn[data-v-d9ffd0a7]:hover{background-color:var(--sc-btn-hover)}.btn[data-v-d9ffd0a7]:disabled{background-color:var(--sc-input-field-disabled-background)}.disabled[data-v-d9ffd0a7]{opacity:.5}.loading-icon[data-v-d9ffd0a7]{animation:spin-d9ffd0a7 1s linear infinite forwards;display:inline-block;margin-right:.2rem;line-height:0;font-size:1rem;position:relative;top:.2rem}@keyframes spin-d9ffd0a7{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
|
package/dist/directives/mask.js
CHANGED
|
@@ -16,7 +16,7 @@ const NAMED_MASKS = {
|
|
|
16
16
|
*/
|
|
17
17
|
function extractMaskFn(mask) {
|
|
18
18
|
try {
|
|
19
|
-
// eslint-disable-next-line @typescript-eslint/no-implied-eval
|
|
19
|
+
// eslint-disable-next-line @typescript-eslint/no-implied-eval, @typescript-eslint/no-unsafe-call
|
|
20
20
|
return Function(`"use strict";return (${mask})`)();
|
|
21
21
|
}
|
|
22
22
|
catch (error) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stonecrop/aform",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.37",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": {
|
|
@@ -35,42 +35,42 @@
|
|
|
35
35
|
"src/*"
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@vueuse/core": "^
|
|
39
|
-
"@vueuse/components": "^
|
|
40
|
-
"vue": "^3.5.
|
|
41
|
-
"@stonecrop/themes": "0.4.
|
|
42
|
-
"@stonecrop/utilities": "0.4.
|
|
38
|
+
"@vueuse/core": "^14.0.0",
|
|
39
|
+
"@vueuse/components": "^14.0.0",
|
|
40
|
+
"vue": "^3.5.22",
|
|
41
|
+
"@stonecrop/themes": "0.4.37",
|
|
42
|
+
"@stonecrop/utilities": "0.4.37"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@
|
|
46
|
-
"@
|
|
47
|
-
"@
|
|
48
|
-
"@typescript-eslint/parser": "^7.18.0",
|
|
45
|
+
"@eslint/js": "^9.38.0",
|
|
46
|
+
"@microsoft/api-documenter": "^7.27.3",
|
|
47
|
+
"@rushstack/heft": "^1.1.3",
|
|
49
48
|
"@vitejs/plugin-vue": "^6.0.1",
|
|
50
|
-
"@vitest/coverage-istanbul": "^
|
|
51
|
-
"@vitest/ui": "^
|
|
49
|
+
"@vitest/coverage-istanbul": "^4.0.5",
|
|
50
|
+
"@vitest/ui": "^4.0.5",
|
|
52
51
|
"@vue/test-utils": "^2.4.6",
|
|
53
|
-
"
|
|
54
|
-
"eslint-
|
|
55
|
-
"eslint
|
|
56
|
-
"
|
|
57
|
-
"jsdom": "^
|
|
58
|
-
"typescript": "^
|
|
52
|
+
"eslint-config-prettier": "^10.1.8",
|
|
53
|
+
"eslint-plugin-vue": "^10.5.1",
|
|
54
|
+
"eslint": "^9.38.0",
|
|
55
|
+
"globals": "^16.4.0",
|
|
56
|
+
"jsdom": "^27.1.0",
|
|
57
|
+
"typescript-eslint": "^8.46.2",
|
|
58
|
+
"typescript": "^5.9.3",
|
|
59
59
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
60
|
-
"vite": "^7.
|
|
61
|
-
"vitest": "^
|
|
62
|
-
"vue-router": "^4.
|
|
63
|
-
"@stonecrop/atable": "0.4.
|
|
60
|
+
"vite": "^7.1.1",
|
|
61
|
+
"vitest": "^4.0.5",
|
|
62
|
+
"vue-router": "^4.6.3",
|
|
63
|
+
"@stonecrop/atable": "0.4.37",
|
|
64
64
|
"stonecrop-rig": "0.2.22"
|
|
65
65
|
},
|
|
66
66
|
"peerDependencies": {
|
|
67
|
-
"@stonecrop/atable": "0.4.
|
|
67
|
+
"@stonecrop/atable": "0.4.37"
|
|
68
68
|
},
|
|
69
69
|
"publishConfig": {
|
|
70
70
|
"access": "public"
|
|
71
71
|
},
|
|
72
72
|
"engines": {
|
|
73
|
-
"node": ">=
|
|
73
|
+
"node": ">=22.5.0"
|
|
74
74
|
},
|
|
75
75
|
"scripts": {
|
|
76
76
|
"_phase:build": "heft build && vite build && rushx docs",
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"build": "heft build && vite build && rushx docs",
|
|
79
79
|
"dev": "vite",
|
|
80
80
|
"docs": "cd ../common/autoinstallers/doc-tools && node generate-docs.mjs aform",
|
|
81
|
-
"lint": "eslint .
|
|
81
|
+
"lint": "eslint .",
|
|
82
82
|
"preview": "vite preview",
|
|
83
83
|
"test": "vitest run --coverage.enabled false",
|
|
84
84
|
"test:watch": "vitest watch",
|
package/src/components/AForm.vue
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<form class="aform">
|
|
3
3
|
<component
|
|
4
|
-
v-for="(componentObj, key) in modelValue"
|
|
5
4
|
:is="componentObj.component"
|
|
5
|
+
v-for="(componentObj, key) in modelValue"
|
|
6
6
|
:key="key"
|
|
7
|
-
:schema="componentObj"
|
|
8
7
|
v-model="childModels[key].value"
|
|
8
|
+
:schema="componentObj"
|
|
9
9
|
:data="formData[componentObj.fieldname]"
|
|
10
10
|
:readonly="readonly"
|
|
11
11
|
v-bind="componentProps(componentObj)">
|
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
<label class="aform_field-label" :for="uuid">{{ label }}</label>
|
|
4
4
|
<span class="aform_checkbox-container aform_input-field">
|
|
5
5
|
<input
|
|
6
|
+
:id="uuid"
|
|
6
7
|
v-model="checkbox"
|
|
7
8
|
type="checkbox"
|
|
8
|
-
:id="uuid"
|
|
9
9
|
class="aform_checkbox"
|
|
10
10
|
:readonly="readonly"
|
|
11
11
|
:required="required" />
|
|
12
12
|
</span>
|
|
13
|
-
<p
|
|
13
|
+
<p v-show="validation.errorMessage" class="aform_error" v-html="validation.errorMessage"></p>
|
|
14
14
|
</div>
|
|
15
15
|
</template>
|
|
16
16
|
|
|
@@ -20,7 +20,7 @@ import { InputHTMLAttributes } from 'vue'
|
|
|
20
20
|
import { ComponentProps } from '../../types'
|
|
21
21
|
|
|
22
22
|
const {
|
|
23
|
-
|
|
23
|
+
_schema, // don't remove to allow masking to work
|
|
24
24
|
label,
|
|
25
25
|
required,
|
|
26
26
|
readonly,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<ATableModal :event="event" :
|
|
2
|
+
<ATableModal :event="event" :cell-data="cellData" class="amodal">
|
|
3
3
|
<div>
|
|
4
4
|
<input type="text" />
|
|
5
5
|
<input type="text" />
|
|
@@ -9,5 +9,6 @@
|
|
|
9
9
|
</template>
|
|
10
10
|
|
|
11
11
|
<script setup lang="ts">
|
|
12
|
+
// TODO: change props from individual elements to the store object
|
|
12
13
|
defineProps(['event', 'cellData', 'tableID'])
|
|
13
14
|
</script>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
3
|
<input
|
|
4
|
-
|
|
4
|
+
:id="uuid"
|
|
5
5
|
ref="date"
|
|
6
|
+
v-model="inputDate"
|
|
6
7
|
type="date"
|
|
7
|
-
:id="uuid"
|
|
8
8
|
:disabled="readonly"
|
|
9
9
|
:required="required"
|
|
10
10
|
@click="showPicker" />
|
|
@@ -19,7 +19,7 @@ import { useTemplateRef } from 'vue'
|
|
|
19
19
|
import { ComponentProps } from '../../types'
|
|
20
20
|
|
|
21
21
|
const {
|
|
22
|
-
|
|
22
|
+
_schema, // don't remove to allow masking to work
|
|
23
23
|
label = 'Date',
|
|
24
24
|
required,
|
|
25
25
|
readonly,
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="adatepicker" tabindex="0"
|
|
2
|
+
<div ref="datepicker" class="adatepicker" tabindex="0">
|
|
3
3
|
<table>
|
|
4
4
|
<tbody>
|
|
5
5
|
<tr>
|
|
6
|
-
<td id="previous-month-btn"
|
|
6
|
+
<td id="previous-month-btn" :tabindex="-1" @click="previousMonth"><</td>
|
|
7
7
|
<th colspan="5" :tabindex="-1">{{ monthAndYear }}</th>
|
|
8
|
-
<td id="next-month-btn"
|
|
8
|
+
<td id="next-month-btn" :tabindex="-1" @click="nextMonth">></td>
|
|
9
9
|
</tr>
|
|
10
10
|
<tr class="days-header">
|
|
11
11
|
<td>M</td>
|
|
@@ -25,12 +25,12 @@
|
|
|
25
25
|
:contenteditable="false"
|
|
26
26
|
:spellcheck="false"
|
|
27
27
|
:tabindex="0"
|
|
28
|
-
@click.prevent.stop="selectDate(getCurrentCell(rowNo, colNo))"
|
|
29
|
-
@keydown.enter="selectDate(getCurrentCell(rowNo, colNo))"
|
|
30
28
|
:class="{
|
|
31
29
|
todaysDate: isTodaysDate(getCurrentDate(rowNo, colNo)),
|
|
32
30
|
selectedDate: isSelectedDate(getCurrentDate(rowNo, colNo)),
|
|
33
|
-
}"
|
|
31
|
+
}"
|
|
32
|
+
@click.prevent.stop="selectDate(getCurrentCell(rowNo, colNo))"
|
|
33
|
+
@keydown.enter="selectDate(getCurrentCell(rowNo, colNo))">
|
|
34
34
|
{{ new Date(getCurrentDate(rowNo, colNo)).getDate() }}
|
|
35
35
|
</td>
|
|
36
36
|
</tr>
|
|
@@ -149,7 +149,7 @@ useKeyboardNav([
|
|
|
149
149
|
'keydown.shift.pagedown': nextYear,
|
|
150
150
|
// TODO: this is a hack to override the stonecrop enter handler;
|
|
151
151
|
// store context inside the component so that handlers can be setup consistently
|
|
152
|
-
|
|
152
|
+
|
|
153
153
|
'keydown.enter': () => {}, // select this date
|
|
154
154
|
},
|
|
155
155
|
},
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="autocomplete" :class="{ isOpen: dropdown.open }"
|
|
2
|
+
<div v-on-click-outside="onClickOutside" class="autocomplete" :class="{ isOpen: dropdown.open }">
|
|
3
3
|
<div class="input-wrapper">
|
|
4
4
|
<input
|
|
5
5
|
v-model="search"
|
|
@@ -12,15 +12,15 @@
|
|
|
12
12
|
@keydown.esc="onClickOutside"
|
|
13
13
|
@keydown.tab="onClickOutside" />
|
|
14
14
|
|
|
15
|
-
<ul
|
|
16
|
-
<li class="loading autocomplete-result"
|
|
15
|
+
<ul v-show="dropdown.open" id="autocomplete-results" class="autocomplete-results">
|
|
16
|
+
<li v-if="dropdown.loading" class="loading autocomplete-result">Loading results...</li>
|
|
17
17
|
<li
|
|
18
|
-
v-else
|
|
19
18
|
v-for="(result, i) in dropdown.results"
|
|
19
|
+
v-else
|
|
20
20
|
:key="result"
|
|
21
|
-
@click.stop="setResult(result)"
|
|
22
21
|
class="autocomplete-result"
|
|
23
|
-
:class="{ 'is-active': i === dropdown.activeItemIndex }"
|
|
22
|
+
:class="{ 'is-active': i === dropdown.activeItemIndex }"
|
|
23
|
+
@click.stop="setResult(result)">
|
|
24
24
|
{{ result }}
|
|
25
25
|
</li>
|
|
26
26
|
</ul>
|
|
@@ -33,7 +33,12 @@
|
|
|
33
33
|
import { vOnClickOutside } from '@vueuse/components'
|
|
34
34
|
import { reactive } from 'vue'
|
|
35
35
|
|
|
36
|
-
const {
|
|
36
|
+
const {
|
|
37
|
+
label,
|
|
38
|
+
items = [],
|
|
39
|
+
isAsync = false,
|
|
40
|
+
filterFunction = undefined,
|
|
41
|
+
} = defineProps<{
|
|
37
42
|
label: string
|
|
38
43
|
items?: string[]
|
|
39
44
|
isAsync?: boolean
|
|
@@ -52,11 +57,12 @@ const onClickOutside = () => closeDropdown()
|
|
|
52
57
|
|
|
53
58
|
const filter = async () => {
|
|
54
59
|
dropdown.open = true
|
|
60
|
+
dropdown.activeItemIndex = null
|
|
55
61
|
if (filterFunction) {
|
|
56
62
|
if (isAsync) dropdown.loading = true
|
|
57
63
|
try {
|
|
58
64
|
const filteredResults = await filterFunction(search.value || '')
|
|
59
|
-
dropdown.results = filteredResults
|
|
65
|
+
dropdown.results = filteredResults || []
|
|
60
66
|
} catch {
|
|
61
67
|
dropdown.results = []
|
|
62
68
|
} finally {
|
|
@@ -109,7 +115,11 @@ const selectPrevResult = () => {
|
|
|
109
115
|
const resultsLength = dropdown.results?.length || 0
|
|
110
116
|
if (dropdown.activeItemIndex != null) {
|
|
111
117
|
const currentIndex = isNaN(dropdown.activeItemIndex) ? 0 : dropdown.activeItemIndex
|
|
112
|
-
|
|
118
|
+
if (currentIndex === 0) {
|
|
119
|
+
dropdown.activeItemIndex = null
|
|
120
|
+
} else {
|
|
121
|
+
dropdown.activeItemIndex = currentIndex - 1
|
|
122
|
+
}
|
|
113
123
|
} else {
|
|
114
124
|
dropdown.activeItemIndex = resultsLength - 1
|
|
115
125
|
}
|
|
@@ -17,11 +17,16 @@ import CollapseButton from '../base/CollapseButton.vue'
|
|
|
17
17
|
import AForm from '../AForm.vue'
|
|
18
18
|
import { SchemaTypes } from '../../types'
|
|
19
19
|
|
|
20
|
-
const {
|
|
20
|
+
const {
|
|
21
|
+
schema,
|
|
22
|
+
label,
|
|
23
|
+
collapsible,
|
|
24
|
+
data = {},
|
|
25
|
+
} = defineProps<{
|
|
21
26
|
schema: SchemaTypes[]
|
|
22
27
|
label: string
|
|
23
28
|
collapsible?: boolean
|
|
24
|
-
data?: any
|
|
29
|
+
data?: Record<string, any>
|
|
25
30
|
}>()
|
|
26
31
|
|
|
27
32
|
const collapsed = ref(false)
|
|
@@ -11,10 +11,10 @@
|
|
|
11
11
|
</div>
|
|
12
12
|
</template>
|
|
13
13
|
|
|
14
|
-
<button type="button" @click="open()"
|
|
14
|
+
<button type="button" class="aform_form-btn" @click="open()">
|
|
15
15
|
{{ label }}
|
|
16
16
|
</button>
|
|
17
|
-
<button type="button" :disabled="!files" @click="reset()"
|
|
17
|
+
<button type="button" :disabled="!files" class="aform_form-btn" @click="reset()">Reset</button>
|
|
18
18
|
</div>
|
|
19
19
|
</template>
|
|
20
20
|
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="aform_form-element">
|
|
3
3
|
<input
|
|
4
|
-
|
|
4
|
+
:id="uuid"
|
|
5
5
|
v-model="inputNumber"
|
|
6
|
+
class="aform_input-field"
|
|
6
7
|
type="number"
|
|
7
|
-
:id="uuid"
|
|
8
8
|
:disabled="readonly"
|
|
9
9
|
:required="required" />
|
|
10
10
|
<label class="aform_field-label" :for="uuid">{{ label }}</label>
|
|
11
|
-
<p
|
|
11
|
+
<p v-show="validation.errorMessage" class="aform_error" v-html="validation.errorMessage"></p>
|
|
12
12
|
</div>
|
|
13
13
|
</template>
|
|
14
14
|
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
import { ComponentProps } from '../../types'
|
|
17
17
|
|
|
18
18
|
const {
|
|
19
|
-
|
|
19
|
+
_schema, // don't remove to allow masking to work
|
|
20
20
|
label,
|
|
21
21
|
required,
|
|
22
22
|
readonly,
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="aform_form-element">
|
|
3
3
|
<input
|
|
4
|
-
class="aform_input-field"
|
|
5
|
-
v-model="inputText"
|
|
6
4
|
:id="uuid"
|
|
5
|
+
v-model="inputText"
|
|
6
|
+
v-mask="mask"
|
|
7
|
+
class="aform_input-field"
|
|
7
8
|
:disabled="readonly"
|
|
8
|
-
:maxlength="mask ? maskFilled
|
|
9
|
-
:required="required"
|
|
10
|
-
v-mask="mask" />
|
|
9
|
+
:maxlength="mask ? (maskFilled ? mask.length : undefined) : undefined"
|
|
10
|
+
:required="required" />
|
|
11
11
|
<label class="aform_field-label" :for="uuid">{{ label }} </label>
|
|
12
|
-
<p
|
|
12
|
+
<p v-show="validation.errorMessage" class="aform_error" v-html="validation.errorMessage"></p>
|
|
13
13
|
</div>
|
|
14
14
|
</template>
|
|
15
15
|
|
|
@@ -20,7 +20,7 @@ import { useStringMask as vMask } from '../../directives/mask'
|
|
|
20
20
|
import { ComponentProps } from '../../types'
|
|
21
21
|
|
|
22
22
|
const {
|
|
23
|
-
|
|
23
|
+
_schema, // don't remove to allow masking to work
|
|
24
24
|
label,
|
|
25
25
|
mask,
|
|
26
26
|
required,
|
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
<label id="login-email" for="email" class="aform_field-label">Email</label>
|
|
14
14
|
<input
|
|
15
15
|
id="email"
|
|
16
|
+
v-model="email"
|
|
16
17
|
class="aform_input-field"
|
|
17
18
|
name="email"
|
|
18
19
|
placeholder="name@example.com"
|
|
19
20
|
type="email"
|
|
20
|
-
v-model="email"
|
|
21
21
|
auto-capitalize="none"
|
|
22
22
|
auto-complete="email"
|
|
23
23
|
auto-correct="off"
|
|
@@ -28,14 +28,14 @@
|
|
|
28
28
|
<label id="login-password" for="password" class="aform_field-label">Password</label>
|
|
29
29
|
<input
|
|
30
30
|
id="password"
|
|
31
|
+
v-model="password"
|
|
31
32
|
class="aform_input-field"
|
|
32
33
|
name="password"
|
|
33
34
|
type="password"
|
|
34
|
-
v-model="password"
|
|
35
35
|
:disabled="isLoading" />
|
|
36
36
|
</div>
|
|
37
37
|
|
|
38
|
-
<button class="btn"
|
|
38
|
+
<button class="btn" :disabled="isLoading || !email || !password" @click="onSubmit">
|
|
39
39
|
<span v-if="isLoading" class="material-symbols-outlined loading-icon">progress_activity</span>
|
|
40
40
|
<span id="login-form-button">Login</span>
|
|
41
41
|
</button>
|
package/src/directives/mask.ts
CHANGED
|
@@ -21,7 +21,7 @@ const NAMED_MASKS = {
|
|
|
21
21
|
*/
|
|
22
22
|
function extractMaskFn(mask: string): ((args: any) => string) | void {
|
|
23
23
|
try {
|
|
24
|
-
// eslint-disable-next-line @typescript-eslint/no-implied-eval
|
|
24
|
+
// eslint-disable-next-line @typescript-eslint/no-implied-eval, @typescript-eslint/no-unsafe-call
|
|
25
25
|
return Function(`"use strict";return (${mask})`)()
|
|
26
26
|
} catch (error) {
|
|
27
27
|
if (error instanceof ReferenceError) {
|