@stonecrop/aform 0.3.0 → 0.3.2
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 +16 -2
- package/dist/aform.js +126 -117
- 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/package.json +7 -7
- package/src/components/form/ADate.vue +5 -2
- package/src/components/form/ADatePicker.vue +34 -32
package/dist/assets/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.aform_checkbox[data-v-87d41dfc]{cursor:pointer;width:auto;margin-top:0;display:block}.aform_checkbox[data-v-87d41dfc]:checked{accent-color:var(--sc-primary-color);border:1px solid black}.aform_checkbox-container[data-v-87d41dfc]{width:100%;display:inline-block;text-align:left}.aform_checkbox-container input[data-v-87d41dfc]{width:auto}.aform_checkbox-container:hover+.aform_field-label[data-v-87d41dfc]{color:var(--sc-input-active-label-color)}div[data-v-
|
|
1
|
+
.aform_checkbox[data-v-87d41dfc]{cursor:pointer;width:auto;margin-top:0;display:block}.aform_checkbox[data-v-87d41dfc]:checked{accent-color:var(--sc-primary-color);border:1px solid black}.aform_checkbox-container[data-v-87d41dfc]{width:100%;display:inline-block;text-align:left}.aform_checkbox-container input[data-v-87d41dfc]{width:auto}.aform_checkbox-container:hover+.aform_field-label[data-v-87d41dfc]{color:var(--sc-input-active-label-color)}div[data-v-bf338f75]{min-width:40ch;border:1px solid transparent;padding:0rem;margin:0rem;margin-right:1ch}input[data-v-bf338f75]{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}p[data-v-bf338f75],label[data-v-bf338f75]{color:var(--sc-input-label-color);display:block;min-height:1.15rem;padding:0rem;margin:0rem 0rem .25rem;border:1px solid transparent}p[data-v-bf338f75]{width:100%;color:red;font-size:85%}label[data-v-bf338f75]{z-index:2;font-size:80%;position:absolute;background:#fff;margin:-2.575rem 0 0 1ch;padding:0 .25ch}input[data-v-bf338f75]:focus{border:1px solid var(--sc-input-active-border-color)}input:focus+label[data-v-bf338f75]{color:var(--sc-input-active-label-color)}.autocomplete[data-v-4e77785f]{position:relative}.input-wrapper[data-v-4e77785f]{min-width:40ch;border:1px solid transparent;padding:0rem;margin:0rem;margin-right:1ch}input[data-v-4e77785f]{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-4e77785f]:focus{border:1px solid var(--sc-input-active-border-color);border-radius:.25rem .25rem 0 0;border-bottom:none}label[data-v-4e77785f]{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-4e77785f]{position:absolute;width:calc(100% - 1ch + 1.5px);z-index:1;padding:0;margin:0;color:#000;border:1px solid var(--sc-input-active-border-color);border-radius:0 0 .25rem .25rem;border-top:none}.autocomplete-result[data-v-4e77785f]{list-style:none;text-align:left;padding:4px 6px;cursor:pointer}.autocomplete-result.is-active[data-v-4e77785f],.autocomplete-result[data-v-4e77785f]:hover{background-color:var(--sc-row-color-zebra-light);color:#000}.adatepicker[data-v-72e0307f]{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-72e0307f]{height:1.15rem;text-align:center;vertical-align:middle}.adatepicker td[data-v-72e0307f]{border:2px solid transparent;outline:2px solid transparent;min-width:3ch;max-width:3ch}.adatepicker td[data-v-72e0307f]:focus,.adatepicker td[data-v-72e0307f]:focus-within{outline:1px dashed black;box-shadow:none;min-height:1.15em;max-height:1.15em;overflow:hidden}.adatepicker .selectedDate[data-v-72e0307f]{outline:1px solid black;background:var(--sc-gray-20);font-weight:bolder}.adatepicker .todaysDate[data-v-72e0307f]{font-weight:bolder;text-decoration:underline;color:#000}.days-header>td[data-v-72e0307f]{font-weight:700}.prev-date[data-v-72e0307f]{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-68845234]{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-68845234]{flex-direction:column}}fieldset[data-v-dc9bd613]{max-width:100%;width:100%;margin-right:2ch;border:1px solid transparent;border-bottom:1px solid var(--sc-gray-50)}legend[data-v-dc9bd613]{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-dc9bd613]{float:right}.aform_file-attach[data-v-0b3a11cc]{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-0b3a11cc]{width:100%}}.aform_file-attach-feedback[data-v-0b3a11cc]{color:var(--sc-input-label-color);width:100%;padding:.5rem;text-align:center;align-self:center}.aform_file-attach-feedback>li[data-v-0b3a11cc]{list-style:none;font-style:italic}.aform_file-attach-feedback>p[data-v-0b3a11cc]{margin-top:0}.aform_form-btn[data-v-0b3a11cc]{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-0b3a11cc]:disabled{background-color:var(--sc-gray-5)}.login-container[data-v-6cbd3add]{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-6cbd3add]{width:100%;margin-left:auto;margin-top:.5rem;margin-right:auto;display:flex;flex-direction:column;justify-content:center}.account-header[data-v-6cbd3add]{display:flex;flex-direction:column;text-align:center;margin-top:.5rem}#account-title[data-v-6cbd3add]{font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:-.025em;margin:0}#account-subtitle[data-v-6cbd3add]{font-size:.875rem;line-height:1.25rem;margin:1rem}.login-form-container[data-v-6cbd3add]{display:grid;gap:.5rem}.login-form-element[data-v-6cbd3add]{display:grid;margin:.5rem 0;position:relative}.login-field[data-v-6cbd3add]{padding:.5rem .25rem .25rem .5rem;outline:1px solid transparent;border:1px solid var(--sc-input-border-color);border-radius:.25rem}.login-field[data-v-6cbd3add]:focus{border:1px solid black}.btn[data-v-6cbd3add]{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-6cbd3add]:hover{background-color:var(--sc-btn-hover)}.btn[data-v-6cbd3add]:disabled{background-color:var(--sc-input-field-disabled-background)}.disabled[data-v-6cbd3add]{opacity:.5}.loading-icon[data-v-6cbd3add]{animation:spin-6cbd3add 1s linear infinite forwards;display:inline-block;margin-right:.2rem;line-height:0;font-size:1rem;position:relative;top:.2rem}@keyframes spin-6cbd3add{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stonecrop/aform",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": {
|
|
@@ -31,10 +31,10 @@
|
|
|
31
31
|
"src/*"
|
|
32
32
|
],
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@vueuse/core": "^
|
|
34
|
+
"@vueuse/core": "^12.0.0",
|
|
35
35
|
"vue": "^3.5.11",
|
|
36
|
-
"@stonecrop/
|
|
37
|
-
"@stonecrop/
|
|
36
|
+
"@stonecrop/utilities": "0.3.2",
|
|
37
|
+
"@stonecrop/themes": "0.3.2"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@microsoft/api-documenter": "^7.26.2",
|
|
@@ -55,11 +55,11 @@
|
|
|
55
55
|
"vite": "^5.4.5",
|
|
56
56
|
"vitest": "^2.1.1",
|
|
57
57
|
"vue-router": "^4.4.0",
|
|
58
|
-
"
|
|
59
|
-
"stonecrop
|
|
58
|
+
"stonecrop-rig": "0.2.22",
|
|
59
|
+
"@stonecrop/atable": "0.3.2"
|
|
60
60
|
},
|
|
61
61
|
"peerDependencies": {
|
|
62
|
-
"@stonecrop/atable": "0.3.
|
|
62
|
+
"@stonecrop/atable": "0.3.2"
|
|
63
63
|
},
|
|
64
64
|
"publishConfig": {
|
|
65
65
|
"access": "public"
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
3
|
<input
|
|
4
|
+
v-model="inputDate"
|
|
4
5
|
ref="date"
|
|
5
6
|
type="date"
|
|
6
7
|
:id="uuid"
|
|
7
8
|
:disabled="readonly"
|
|
8
9
|
:required="required"
|
|
9
|
-
:value="inputDate"
|
|
10
10
|
@click="showPicker" />
|
|
11
11
|
<label :for="uuid">{{ label }}</label>
|
|
12
12
|
<p v-show="validation.errorMessage" v-html="validation.errorMessage"></p>
|
|
@@ -26,7 +26,10 @@ const {
|
|
|
26
26
|
validation = { errorMessage: ' ' },
|
|
27
27
|
} = defineProps<ComponentProps>()
|
|
28
28
|
|
|
29
|
-
const inputDate = defineModel<string | number | Date>(
|
|
29
|
+
const inputDate = defineModel<string | number | Date>({
|
|
30
|
+
// format the date to be compatible with the native input datepicker
|
|
31
|
+
set: value => new Date(value).toISOString().split('T')[0],
|
|
32
|
+
})
|
|
30
33
|
const dateRef = useTemplateRef<HTMLInputElement>('date')
|
|
31
34
|
|
|
32
35
|
const showPicker = () => {
|
|
@@ -1,38 +1,40 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="adatepicker" tabindex="0" ref="datepicker">
|
|
3
3
|
<table>
|
|
4
|
-
<
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
4
|
+
<tbody>
|
|
5
|
+
<tr>
|
|
6
|
+
<td id="previous-month-btn" @click="previousMonth" :tabindex="-1"><</td>
|
|
7
|
+
<th colspan="5" :tabindex="-1">{{ monthAndYear }}</th>
|
|
8
|
+
<td id="next-month-btn" @click="nextMonth" :tabindex="-1">></td>
|
|
9
|
+
</tr>
|
|
10
|
+
<tr class="days-header">
|
|
11
|
+
<td>M</td>
|
|
12
|
+
<td>T</td>
|
|
13
|
+
<td>W</td>
|
|
14
|
+
<td>T</td>
|
|
15
|
+
<td>F</td>
|
|
16
|
+
<td>S</td>
|
|
17
|
+
<td>S</td>
|
|
18
|
+
</tr>
|
|
19
|
+
<tr v-for="rowNo in numberOfRows" :key="rowNo">
|
|
20
|
+
<!-- the 'ref' key is currently only used for test references -->
|
|
21
|
+
<td
|
|
22
|
+
v-for="colNo in numberOfColumns"
|
|
23
|
+
ref="celldate"
|
|
24
|
+
:key="getCurrentCell(rowNo, colNo)"
|
|
25
|
+
:contenteditable="false"
|
|
26
|
+
:spellcheck="false"
|
|
27
|
+
:tabindex="0"
|
|
28
|
+
@click.prevent.stop="selectDate(getCurrentCell(rowNo, colNo))"
|
|
29
|
+
@keydown.enter="selectDate(getCurrentCell(rowNo, colNo))"
|
|
30
|
+
:class="{
|
|
31
|
+
todaysDate: isTodaysDate(getCurrentDate(rowNo, colNo)),
|
|
32
|
+
selectedDate: isSelectedDate(getCurrentDate(rowNo, colNo)),
|
|
33
|
+
}">
|
|
34
|
+
{{ new Date(getCurrentDate(rowNo, colNo)).getDate() }}
|
|
35
|
+
</td>
|
|
36
|
+
</tr>
|
|
37
|
+
</tbody>
|
|
36
38
|
</table>
|
|
37
39
|
</div>
|
|
38
40
|
</template>
|