@stonecrop/aform 0.6.2 → 0.7.0
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.d.ts +11 -14
- package/dist/aform.js +457 -461
- package/dist/aform.js.map +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/src/tsdoc-metadata.json +1 -1
- package/dist/src/types/index.d.ts +1 -1
- package/dist/theme/custom_themes.css +6 -0
- package/dist/theme/fields.css +84 -0
- package/dist/theme/login.css +2 -0
- package/dist/theme/purple_theme.css +9 -0
- package/package.json +23 -23
- package/src/components/AForm.vue +3 -3
- package/src/components/form/ACheckbox.vue +2 -9
- package/src/components/form/ADate.vue +2 -3
- package/src/components/form/ANumericInput.vue +2 -9
- package/src/components/form/ATextInput.vue +2 -10
- package/src/types/index.ts +1 -1
package/dist/assets/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.aform_checkbox[data-v-
|
|
1
|
+
.aform_checkbox[data-v-f13fd4d6]{cursor:pointer;width:auto;margin-top:0;display:block}.aform_checkbox[data-v-f13fd4d6]:checked{accent-color:var(--sc-primary-color);border:1px solid black}.aform_checkbox-container[data-v-f13fd4d6]{width:100%;display:inline-block;text-align:left}.aform_checkbox-container input[data-v-f13fd4d6]{width:auto}.aform_checkbox-container:hover+.aform_field-label[data-v-f13fd4d6]{color:var(--sc-input-active-label-color)}div[data-v-a15ed922]{min-width:40ch;width:100%;box-sizing:border-box;border:1px solid transparent;padding:0rem;margin:0rem;margin-right:1ch}input[data-v-a15ed922]{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-a15ed922],label[data-v-a15ed922]{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-a15ed922]{width:100%;color:red;font-size:85%;box-sizing:border-box}label[data-v-a15ed922]{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-a15ed922]:focus{border:1px solid var(--sc-input-active-border-color)}input:focus+label[data-v-a15ed922]{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-5336a410]{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-5336a410]{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)}}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
/* Styles for all types of fields: Text and Number Inputs, Radios, Checkboxes, etc. */
|
|
2
|
+
/* .form-element {
|
|
3
|
+
min-width: 40ch;
|
|
4
|
+
border: 1px solid transparent;
|
|
5
|
+
padding: 0;
|
|
6
|
+
margin: 0;
|
|
7
|
+
margin-right: 0.5rem;
|
|
8
|
+
margin-bottom: 0.5rem;
|
|
9
|
+
} */
|
|
10
|
+
/* .input-field {
|
|
11
|
+
outline: 1px solid transparent;
|
|
12
|
+
border: 1px solid var(--sc-input-border-color);
|
|
13
|
+
padding: 0.25rem;
|
|
14
|
+
margin: 0 0 0 0;
|
|
15
|
+
border-radius: 0 0 0.25rem 0.25rem;
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
width: 100%;
|
|
18
|
+
}
|
|
19
|
+
.field-label {
|
|
20
|
+
color: var(--sc-input-label-color);
|
|
21
|
+
display: block;
|
|
22
|
+
min-height: 1.15rem;
|
|
23
|
+
padding: 0.25rem;
|
|
24
|
+
margin: 0rem;
|
|
25
|
+
z-index: 2;
|
|
26
|
+
font-size: 1rem;
|
|
27
|
+
font-weight: bold;
|
|
28
|
+
background: white;
|
|
29
|
+
width: 100%;
|
|
30
|
+
box-sizing: border-box;
|
|
31
|
+
background: var(--sc-gray-5);
|
|
32
|
+
border: 1px solid var(--sc-input-border-color);
|
|
33
|
+
border-bottom: none;
|
|
34
|
+
}
|
|
35
|
+
p.error {
|
|
36
|
+
display: block;
|
|
37
|
+
min-height: 1.15rem;
|
|
38
|
+
padding: 0rem;
|
|
39
|
+
padding-left: 0.5rem;
|
|
40
|
+
margin: 0.5rem 0 0.25rem 0rem;
|
|
41
|
+
border: 1px solid transparent;
|
|
42
|
+
width: 100%;
|
|
43
|
+
color: var(--sc-brand-danger);
|
|
44
|
+
font-size: 0.8rem;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.input-field:focus {
|
|
48
|
+
border: 1px solid var(--sc-input-active-border-color);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.input-field:focus + .field-label {
|
|
52
|
+
color: var(--sc-input-active-label-color);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/** CHECKBOX **/
|
|
56
|
+
/* .checkbox {
|
|
57
|
+
visibility: hidden;
|
|
58
|
+
display: none;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.checkbox + .custom-checkbox:before {
|
|
62
|
+
content: '⬡';
|
|
63
|
+
font-size: 1.2rem;
|
|
64
|
+
cursor: pointer;
|
|
65
|
+
margin-right: 0.25rem;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.checkbox:checked + .custom-checkbox:before {
|
|
69
|
+
content: '⬣';
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.custom-checkbox {
|
|
73
|
+
display: inline-block;
|
|
74
|
+
line-height: 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.checkbox-container {
|
|
78
|
+
width: 100%;
|
|
79
|
+
display: inline-block;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.checkbox-container:hover + .field-label {
|
|
83
|
+
color: var(--sc-input-active-label-color);
|
|
84
|
+
} */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stonecrop/aform",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": {
|
|
@@ -35,36 +35,36 @@
|
|
|
35
35
|
"src/*"
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@vueuse/core": "^14.
|
|
39
|
-
"@vueuse/components": "^14.
|
|
40
|
-
"vue": "^3.5.
|
|
41
|
-
"@stonecrop/themes": "0.
|
|
42
|
-
"@stonecrop/utilities": "0.
|
|
38
|
+
"@vueuse/core": "^14.1.0",
|
|
39
|
+
"@vueuse/components": "^14.1.0",
|
|
40
|
+
"vue": "^3.5.26",
|
|
41
|
+
"@stonecrop/themes": "0.7.0",
|
|
42
|
+
"@stonecrop/utilities": "0.7.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@eslint/js": "^9.
|
|
46
|
-
"@microsoft/api-documenter": "^7.
|
|
47
|
-
"@rushstack/heft": "^1.1.
|
|
48
|
-
"@vitejs/plugin-vue": "^6.0.
|
|
49
|
-
"@vitest/coverage-istanbul": "^4.0.
|
|
50
|
-
"@vitest/ui": "^4.0.
|
|
45
|
+
"@eslint/js": "^9.39.2",
|
|
46
|
+
"@microsoft/api-documenter": "^7.28.2",
|
|
47
|
+
"@rushstack/heft": "^1.1.7",
|
|
48
|
+
"@vitejs/plugin-vue": "^6.0.3",
|
|
49
|
+
"@vitest/coverage-istanbul": "^4.0.17",
|
|
50
|
+
"@vitest/ui": "^4.0.17",
|
|
51
51
|
"@vue/test-utils": "^2.4.6",
|
|
52
52
|
"eslint-config-prettier": "^10.1.8",
|
|
53
|
-
"eslint-plugin-vue": "^10.
|
|
54
|
-
"eslint": "^9.
|
|
55
|
-
"globals": "^
|
|
56
|
-
"jsdom": "^27.
|
|
57
|
-
"typescript-eslint": "^8.
|
|
53
|
+
"eslint-plugin-vue": "^10.6.2",
|
|
54
|
+
"eslint": "^9.39.2",
|
|
55
|
+
"globals": "^17.0.0",
|
|
56
|
+
"jsdom": "^27.4.0",
|
|
57
|
+
"typescript-eslint": "^8.53.0",
|
|
58
58
|
"typescript": "^5.9.3",
|
|
59
59
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
60
|
-
"vite": "^7.
|
|
61
|
-
"vitest": "^4.0.
|
|
62
|
-
"vue-router": "^4.6.
|
|
63
|
-
"
|
|
64
|
-
"stonecrop
|
|
60
|
+
"vite": "^7.3.1",
|
|
61
|
+
"vitest": "^4.0.17",
|
|
62
|
+
"vue-router": "^4.6.4",
|
|
63
|
+
"stonecrop-rig": "0.2.22",
|
|
64
|
+
"@stonecrop/atable": "0.7.0"
|
|
65
65
|
},
|
|
66
66
|
"peerDependencies": {
|
|
67
|
-
"@stonecrop/atable": "0.
|
|
67
|
+
"@stonecrop/atable": "0.7.0"
|
|
68
68
|
},
|
|
69
69
|
"publishConfig": {
|
|
70
70
|
"access": "public"
|
package/src/components/AForm.vue
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
v-model="childModels[key].value"
|
|
8
8
|
:schema="componentObj"
|
|
9
9
|
:data="formData[componentObj.fieldname]"
|
|
10
|
-
:
|
|
10
|
+
:readOnly="readOnly"
|
|
11
11
|
v-bind="componentProps(componentObj)">
|
|
12
12
|
</component>
|
|
13
13
|
</form>
|
|
@@ -19,10 +19,10 @@ import { ref, computed, watchEffect } from 'vue'
|
|
|
19
19
|
import type { SchemaTypes } from '../types'
|
|
20
20
|
|
|
21
21
|
const emit = defineEmits(['update:modelValue'])
|
|
22
|
-
const { modelValue, data,
|
|
22
|
+
const { modelValue, data, readOnly } = defineProps<{
|
|
23
23
|
modelValue: SchemaTypes[]
|
|
24
24
|
data: Record<string, any>
|
|
25
|
-
|
|
25
|
+
readOnly?: boolean
|
|
26
26
|
}>()
|
|
27
27
|
|
|
28
28
|
const formData = ref(data || {})
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
v-model="checkbox"
|
|
8
8
|
type="checkbox"
|
|
9
9
|
class="aform_checkbox"
|
|
10
|
-
:readonly="
|
|
10
|
+
:readonly="readOnly"
|
|
11
11
|
:required="required" />
|
|
12
12
|
</span>
|
|
13
13
|
<p v-show="validation.errorMessage" class="aform_error" v-html="validation.errorMessage"></p>
|
|
@@ -19,14 +19,7 @@ import { InputHTMLAttributes } from 'vue'
|
|
|
19
19
|
|
|
20
20
|
import { ComponentProps } from '../../types'
|
|
21
21
|
|
|
22
|
-
const {
|
|
23
|
-
_schema, // don't remove to allow masking to work
|
|
24
|
-
label,
|
|
25
|
-
required,
|
|
26
|
-
readonly,
|
|
27
|
-
uuid,
|
|
28
|
-
validation = { errorMessage: ' ' },
|
|
29
|
-
} = defineProps<ComponentProps>()
|
|
22
|
+
const { label, required, readOnly, uuid, validation = { errorMessage: ' ' } } = defineProps<ComponentProps>()
|
|
30
23
|
const checkbox = defineModel<InputHTMLAttributes['checked']>()
|
|
31
24
|
</script>
|
|
32
25
|
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
ref="date"
|
|
6
6
|
v-model="inputDate"
|
|
7
7
|
type="date"
|
|
8
|
-
:disabled="
|
|
8
|
+
:disabled="readOnly"
|
|
9
9
|
:required="required"
|
|
10
10
|
@click="showPicker" />
|
|
11
11
|
<label :for="uuid">{{ label }}</label>
|
|
@@ -19,10 +19,9 @@ import { useTemplateRef } from 'vue'
|
|
|
19
19
|
import { ComponentProps } from '../../types'
|
|
20
20
|
|
|
21
21
|
const {
|
|
22
|
-
_schema, // don't remove to allow masking to work
|
|
23
22
|
label = 'Date',
|
|
24
23
|
required,
|
|
25
|
-
|
|
24
|
+
readOnly,
|
|
26
25
|
uuid,
|
|
27
26
|
validation = { errorMessage: ' ' },
|
|
28
27
|
} = defineProps<ComponentProps>()
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
v-model="inputNumber"
|
|
6
6
|
class="aform_input-field"
|
|
7
7
|
type="number"
|
|
8
|
-
:disabled="
|
|
8
|
+
:disabled="readOnly"
|
|
9
9
|
:required="required" />
|
|
10
10
|
<label class="aform_field-label" :for="uuid">{{ label }}</label>
|
|
11
11
|
<p v-show="validation.errorMessage" class="aform_error" v-html="validation.errorMessage"></p>
|
|
@@ -15,13 +15,6 @@
|
|
|
15
15
|
<script setup lang="ts">
|
|
16
16
|
import { ComponentProps } from '../../types'
|
|
17
17
|
|
|
18
|
-
const {
|
|
19
|
-
_schema, // don't remove to allow masking to work
|
|
20
|
-
label,
|
|
21
|
-
required,
|
|
22
|
-
readonly,
|
|
23
|
-
uuid,
|
|
24
|
-
validation = { errorMessage: ' ' },
|
|
25
|
-
} = defineProps<ComponentProps>()
|
|
18
|
+
const { label, required, readOnly, uuid, validation = { errorMessage: ' ' } } = defineProps<ComponentProps>()
|
|
26
19
|
const inputNumber = defineModel<number>()
|
|
27
20
|
</script>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
v-model="inputText"
|
|
6
6
|
v-mask="mask"
|
|
7
7
|
class="aform_input-field"
|
|
8
|
-
:disabled="
|
|
8
|
+
:disabled="readOnly"
|
|
9
9
|
:maxlength="mask ? (maskFilled ? mask.length : undefined) : undefined"
|
|
10
10
|
:required="required" />
|
|
11
11
|
<label class="aform_field-label" :for="uuid">{{ label }} </label>
|
|
@@ -19,15 +19,7 @@ import { /* inject, */ ref } from 'vue'
|
|
|
19
19
|
import { useStringMask as vMask } from '../../directives/mask'
|
|
20
20
|
import { ComponentProps } from '../../types'
|
|
21
21
|
|
|
22
|
-
const {
|
|
23
|
-
_schema, // don't remove to allow masking to work
|
|
24
|
-
label,
|
|
25
|
-
mask,
|
|
26
|
-
required,
|
|
27
|
-
readonly,
|
|
28
|
-
uuid,
|
|
29
|
-
validation = { errorMessage: ' ' },
|
|
30
|
-
} = defineProps<ComponentProps>()
|
|
22
|
+
const { label, mask, required, readOnly, uuid, validation = { errorMessage: ' ' } } = defineProps<ComponentProps>()
|
|
31
23
|
|
|
32
24
|
// TODO: setup maskFilled as a computed property
|
|
33
25
|
const maskFilled = ref(true)
|
package/src/types/index.ts
CHANGED