@stonecrop/aform 0.3.4 → 0.3.6

package/dist/assets/index.css

@@ -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-b9699520]{min-width:40ch;width:100%;box-sizing:border-box;border:1px solid transparent;padding:0rem;margin:0rem;margin-right:1ch}input[data-v-b9699520]{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-b9699520],label[data-v-b9699520]{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-b9699520]{width:100%;color:red;font-size:85%;box-sizing:border-box}label[data-v-b9699520]{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-b9699520]:focus{border:1px solid var(--sc-input-active-border-color)}input:focus+label[data-v-b9699520]{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)}}
+.aform_checkbox[data-v-9f382ad4]{cursor:pointer;width:auto;margin-top:0;display:block}.aform_checkbox[data-v-9f382ad4]:checked{accent-color:var(--sc-primary-color);border:1px solid black}.aform_checkbox-container[data-v-9f382ad4]{width:100%;display:inline-block;text-align:left}.aform_checkbox-container input[data-v-9f382ad4]{width:auto}.aform_checkbox-container:hover+.aform_field-label[data-v-9f382ad4]{color:var(--sc-input-active-label-color)}div[data-v-280b3d1a]{min-width:40ch;width:100%;box-sizing:border-box;border:1px solid transparent;padding:0rem;margin:0rem;margin-right:1ch}input[data-v-280b3d1a]{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-280b3d1a],label[data-v-280b3d1a]{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-280b3d1a]{width:100%;color:red;font-size:85%;box-sizing:border-box}label[data-v-280b3d1a]{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-280b3d1a]:focus{border:1px solid var(--sc-input-active-border-color)}input:focus+label[data-v-280b3d1a]{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-f49cfd40]{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-f49cfd40]{height:1.15rem;text-align:center;vertical-align:middle}.adatepicker td[data-v-f49cfd40]{border:2px solid transparent;outline:2px solid transparent;min-width:3ch;max-width:3ch}.adatepicker td[data-v-f49cfd40]:focus,.adatepicker td[data-v-f49cfd40]:focus-within{outline:1px dashed black;box-shadow:none;min-height:1.15em;max-height:1.15em;overflow:hidden}.adatepicker .selectedDate[data-v-f49cfd40]{outline:1px solid black;background:var(--sc-gray-20);font-weight:bolder}.adatepicker .todaysDate[data-v-f49cfd40]{font-weight:bolder;text-decoration:underline;color:#000}.days-header>td[data-v-f49cfd40]{font-weight:700}.prev-date[data-v-f49cfd40]{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-e7ea7e12]{max-width:100%;width:100%;margin-right:2ch;border:1px solid transparent;border-bottom:1px solid var(--sc-gray-50)}legend[data-v-e7ea7e12]{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-e7ea7e12]{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/dist/directives/mask.js

@@ -1,3 +1,6 @@
+/**
+ * Named masks for common input types
+ */
 const NAMED_MASKS = {
     date: '##/##/####',
     datetime: '####/##/## ##:##',
@@ -6,6 +9,11 @@ const NAMED_MASKS = {
     phone: '(###) ### - ####',
     card: '#### #### #### ####',
 };
+/**
+ * Extracts a mask function from a stringified function
+ * @param mask - Mask string
+ * @returns Mask function
+ */
 function extractMaskFn(mask) {
     try {
         // eslint-disable-next-line @typescript-eslint/no-implied-eval
@@ -17,6 +25,11 @@ function extractMaskFn(mask) {
         }
     }
 }
+/**
+ * Gets the mask for a given directive binding
+ * @param binding - Binding object from directive hook
+ * @returns Mask string
+ */
 function getMask(binding) {
     let mask = binding.value;
     if (mask) {
@@ -38,6 +51,12 @@ function getMask(binding) {
     }
     return mask;
 }
+/**
+ * Unmasks the input string
+ * @param input - Input string
+ * @param maskToken - Mask token character
+ * @returns Unmasked input string
+ */
 function unmaskInput(input, maskToken) {
     if (!maskToken) {
         maskToken = '#';
@@ -49,6 +68,13 @@ function unmaskInput(input, maskToken) {
     }
     return unmaskedInput;
 }
+/**
+ * Fills the mask with the input string
+ * @param input - Input string
+ * @param mask - Mask string
+ * @param maskToken - Mask token character
+ * @returns Masked input string
+ */
 function fillMask(input, mask, maskToken) {
     if (!maskToken) {
         maskToken = '#';
@@ -64,6 +90,13 @@ function fillMask(input, mask, maskToken) {
     }
     return replacement.slice(0, mask.length);
 }
+/**
+ * Applies a mask to an input element
+ * @param el - Input element
+ * @param binding - Binding object from directive hook
+ * @returns void
+ * @public
+ */
 export function useStringMask(el, binding) {
     const mask = getMask(binding);
     if (!mask)

package/dist/index.js

@@ -9,8 +9,6 @@ import AForm from './components/AForm.vue';
 import ANumericInput from './components/form/ANumericInput.vue';
 import ATextInput from './components/form/ATextInput.vue';
 import Login from './components/utilities/Login.vue';
-// import { ACurrency } from './components/form/ACurrency.vue'
-// import { AQuantity } from './components/form/AQuantity.vue'
 /**
  * Install all AForm components
  * @param app - Vue app instance
@@ -27,7 +25,5 @@ function install(app /* options */) {
     app.component('AForm', AForm);
     app.component('ANumericInput', ANumericInput);
     app.component('ATextInput', ATextInput);
-    // app.component('ACurrency', ACurrency)
-    // app.component('AQuantity', AQuantity)
 }
 export { ACheckbox, AComboBox, ADate, ADropdown, ADatePicker, AFieldset, AFileAttach, AForm, ANumericInput, ATextInput, Login, install, };

package/dist/src/directives/mask.d.ts

@@ -1,3 +1,10 @@
 import type { DirectiveBinding } from 'vue';
+/**
+ * Applies a mask to an input element
+ * @param el - Input element
+ * @param binding - Binding object from directive hook
+ * @returns void
+ * @public
+ */
 export declare function useStringMask(el: HTMLInputElement, binding: DirectiveBinding<string>): void;
 //# sourceMappingURL=mask.d.ts.map

package/dist/src/directives/mask.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mask.d.ts","sourceRoot":"","sources":["../../../src/directives/mask.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAgF3C,wBAAgB,aAAa,CAAC,EAAE,EAAE,gBAAgB,EAAE,OAAO,EAAE,gBAAgB,CAAC,MAAM,CAAC,QAwBpF"}
+{"version":3,"file":"mask.d.ts","sourceRoot":"","sources":["../../../src/directives/mask.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAA;AA0G3C;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAAE,EAAE,gBAAgB,EAAE,OAAO,EAAE,gBAAgB,CAAC,MAAM,CAAC,QAwBpF"}

package/dist/src/index.d.ts

@@ -1,5 +1,5 @@
 export type { CellContext, TableConfig, TableColumn, TableRow } from '@stonecrop/atable';
-import { App } from 'vue';
+import type { App } from 'vue';
 import ACheckbox from './components/form/ACheckbox.vue';
 import AComboBox from './components/form/AComboBox.vue';
 import ADate from './components/form/ADate.vue';
@@ -11,7 +11,7 @@ import AForm from './components/AForm.vue';
 import ANumericInput from './components/form/ANumericInput.vue';
 import ATextInput from './components/form/ATextInput.vue';
 import Login from './components/utilities/Login.vue';
-export type { BasicSchema, FormSchema, TableSchema, FieldsetSchema, SchemaTypes } from './types';
+export type { BaseSchema, FieldsetSchema, FormSchema, SchemaTypes, TableSchema } from './types';
 /**
  * Install all AForm components
  * @param app - Vue app instance

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACxF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,KAAK,MAAM,6BAA6B,CAAA;AAC/C,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,WAAW,MAAM,mCAAmC,CAAA;AAC3D,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,WAAW,MAAM,mCAAmC,CAAA;AAC3D,OAAO,KAAK,MAAM,wBAAwB,CAAA;AAC1C,OAAO,aAAa,MAAM,qCAAqC,CAAA;AAC/D,OAAO,UAAU,MAAM,kCAAkC,CAAA;AACzD,OAAO,KAAK,MAAM,kCAAkC,CAAA;AACpD,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAIhG;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAaxB;AAED,OAAO,EACN,SAAS,EACT,SAAS,EACT,KAAK,EACL,SAAS,EACT,WAAW,EACX,SAAS,EACT,WAAW,EACX,KAAK,EACL,aAAa,EACb,UAAU,EACV,KAAK,EACL,OAAO,GACP,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACxF,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAE9B,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,KAAK,MAAM,6BAA6B,CAAA;AAC/C,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,WAAW,MAAM,mCAAmC,CAAA;AAC3D,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,WAAW,MAAM,mCAAmC,CAAA;AAC3D,OAAO,KAAK,MAAM,wBAAwB,CAAA;AAC1C,OAAO,aAAa,MAAM,qCAAqC,CAAA;AAC/D,OAAO,UAAU,MAAM,kCAAkC,CAAA;AACzD,OAAO,KAAK,MAAM,kCAAkC,CAAA;AACpD,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE/F;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAWxB;AAED,OAAO,EACN,SAAS,EACT,SAAS,EACT,KAAK,EACL,SAAS,EACT,WAAW,EACX,SAAS,EACT,WAAW,EACX,KAAK,EACL,aAAa,EACb,UAAU,EACV,KAAK,EACL,OAAO,GACP,CAAA"}

package/dist/src/types/index.d.ts

@@ -4,56 +4,172 @@ import type { TableColumn, TableConfig, TableRow } from '@stonecrop/atable';
  * @public
  */
 export type ComponentProps = {
+    /**
+     * The schema object to pass to the component
+     * @public
+     */
+    schema?: SchemaTypes;
+    /**
+     * The label to display in the component
+     * @public
+     */
     label?: string;
+    /**
+     * The masking string to apply to inputs inside the component
+     * @public
+     */
     mask?: string;
+    /**
+     * Indicate whether input is required for text and/or select elements inside the component
+     * @public
+     */
     required?: boolean;
+    /**
+     * Indicate whether elements inside the component are read-only
+     * @public
+     */
     readonly?: boolean;
+    /**
+     * Set a unique identifier for elements inside the component
+     * @public
+     */
     uuid?: string;
-    validation?: Record<string, any>;
+    /**
+     * Validation options for elements inside the component
+     * @public
+     */
+    validation?: {
+        /**
+         * The error message to display when validation fails
+         * @public
+         */
+        errorMessage: string;
+        [key: string]: any;
+    };
 };
 /**
- * Base schemda for AForm components
- * @beta
+ * Basic field structure for AForm schemas
+ * @public
  */
-export type BasicSchema = {
-    component: string;
+export type BaseSchema = {
+    /**
+     * The fieldname for the schema field
+     * @public
+     */
     fieldname: string;
-    value: any;
+    /**
+     * The component to render
+     *
+     * @remarks
+     * This must be a string that represents the component to render. The registration of the component
+     * should be done in the main application.
+     *
+     * @public
+     */
+    component?: string;
+    /**
+     * A placeholder value for the field
+     * @beta
+     */
+    value?: any;
 };
 /**
- * Form schema
- * @beta
+ * Schema structure for defining forms inside AForm
+ * @public
  */
-export type FormSchema = BasicSchema & {
-    align: string;
-    edit: boolean;
-    fieldtype: string;
-    label: string;
-    name: string;
-    width: string;
+export type FormSchema = BaseSchema & {
+    /**
+     * Align the field in the form
+     * @beta
+     */
+    align?: string;
+    /**
+     * Indicate whether the field is editable
+     * @beta
+     */
+    edit?: boolean;
+    /**
+     * The field type for the schema field
+     *
+     * @remarks
+     * This must be a string that represents the field type. A mask string will be automatically
+     * applied for the following field types:
+     * - Date ('##/##/####')
+     * - Datetime ('####/##/## ##:##')
+     * - Time ('##:##')
+     * - Fulltime ('##:##:##')
+     * - Phone ('(###) ### - ####')
+     * - Card ('#### #### #### ####')
+     *
+     * @public
+     */
+    fieldtype?: string;
+    /**
+     * The label to display in the form
+     * @public
+     */
+    label?: string;
+    /**
+     * The unique identifier for the field
+     * @beta
+     */
+    name?: string;
+    /**
+     * The width of the field element.
+     * @beta
+     */
+    width?: string;
+    /**
+     * The mask string for the field
+     * @beta
+     */
     mask?: string;
 };
 /**
- * Table schema
- * @beta
+ * Schema structure for defining tables inside AForm
+ * @public
  */
-export type TableSchema = BasicSchema & {
-    columns: TableColumn[];
-    config: TableConfig;
-    rows: TableRow[];
+export type TableSchema = BaseSchema & {
+    /**
+     * The columns to display in the table
+     * @public
+     */
+    columns?: TableColumn[];
+    /**
+     * The configuration for the table
+     * @public
+     */
+    config?: TableConfig;
+    /**
+     * The rows to display in the table
+     * @public
+     */
+    rows?: TableRow[];
 };
 /**
- * Fieldset schema
- * @beta
+ * Schema structure for defining fieldsets inside AForm
+ * @public
  */
-export type FieldsetSchema = BasicSchema & {
-    label: string;
-    schema: (FormSchema | TableSchema)[];
+export type FieldsetSchema = BaseSchema & {
+    /**
+     * The label to display in the fieldset
+     * @public
+     */
+    label?: string;
+    /**
+     * The schemas to be rendered inside the fieldset
+     * @public
+     */
+    schema?: (FormSchema | TableSchema)[];
+    /**
+     * Indicate whether the fieldset is collapsible
+     * @public
+     */
     collapsible?: boolean;
 };
 /**
- * Superset of schema types
- * @beta
+ * Superset of all schema types for AForm
+ * @public
  */
 export type SchemaTypes = FormSchema | TableSchema | FieldsetSchema;
 //# sourceMappingURL=index.d.ts.map

package/dist/src/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3E;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAChC,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACzB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,GAAG,CAAA;CACV,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,OAAO,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACvC,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,MAAM,EAAE,WAAW,CAAA;IACnB,IAAI,EAAE,QAAQ,EAAE,CAAA;CAChB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,CAAC,UAAU,GAAG,WAAW,CAAC,EAAE,CAAA;IACpC,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3E;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IAEpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;;OAGG;IACH,UAAU,CAAC,EAAE;QACZ;;;WAGG;QACH,YAAY,EAAE,MAAM,CAAA;QAEpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAClB,CAAA;CACD,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG;IACxB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAA;IAEjB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,GAAG,CAAA;CACX,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG;IACrC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,EAAE,CAAA;IAEvB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IAEpB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAA;CACjB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG;IACzC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,UAAU,GAAG,WAAW,CAAC,EAAE,CAAA;IAErC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/aform",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -33,8 +33,8 @@
   "dependencies": {
     "@vueuse/core": "^12.0.0",
     "vue": "^3.5.11",
-    "@stonecrop/themes": "0.3.4",
-    "@stonecrop/utilities": "0.3.4"
+    "@stonecrop/themes": "0.3.6",
+    "@stonecrop/utilities": "0.3.6"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.26.2",
@@ -55,11 +55,11 @@
     "vite": "^5.4.5",
     "vitest": "^2.1.1",
     "vue-router": "^4.4.0",
-    "@stonecrop/atable": "0.3.4",
+    "@stonecrop/atable": "0.3.6",
     "stonecrop-rig": "0.2.22"
   },
   "peerDependencies": {
-    "@stonecrop/atable": "0.3.4"
+    "@stonecrop/atable": "0.3.6"
   },
   "publishConfig": {
     "access": "public"

package/src/components/form/ACheckbox.vue

@@ -19,7 +19,14 @@ import { InputHTMLAttributes } from 'vue'
 
 import { ComponentProps } from '../../types'
 
-const { label, required, readonly, uuid, validation = { errorMessage: '&nbsp;' } } = defineProps<ComponentProps>()
+const {
+	schema, // don't remove to allow masking to work
+	label,
+	required,
+	readonly,
+	uuid,
+	validation = { errorMessage: '&nbsp;' },
+} = defineProps<ComponentProps>()
 const checkbox = defineModel<InputHTMLAttributes['checked']>()
 </script>
 

package/src/components/form/ADate.vue

@@ -19,6 +19,7 @@ import { useTemplateRef } from 'vue'
 import { ComponentProps } from '../../types'
 
 const {
+	schema, // don't remove to allow masking to work
 	label = 'Date',
 	required,
 	readonly,

package/src/components/form/ADatePicker.vue

@@ -155,6 +155,8 @@ useKeyboardNav([
 		},
 	},
 ])
+
+defineExpose({ currentMonth, currentYear, selectedDate })
 </script>
 
 <style scoped>

package/src/components/form/AFieldset.vue

@@ -34,6 +34,8 @@ const toggleCollapse = (event: Event) => {
 		collapsed.value = !collapsed.value
 	}
 }
+
+defineExpose({ collapsed })
 </script>
 
 <style scoped>

package/src/components/form/ANumericInput.vue

@@ -15,6 +15,13 @@
 <script setup lang="ts">
 import { ComponentProps } from '../../types'
 
-const { label, required, readonly, uuid, validation = { errorMessage: '&nbsp;' } } = defineProps<ComponentProps>()
+const {
+	schema, // don't remove to allow masking to work
+	label,
+	required,
+	readonly,
+	uuid,
+	validation = { errorMessage: '&nbsp;' },
+} = defineProps<ComponentProps>()
 const inputNumber = defineModel<number>()
 </script>

package/src/components/form/ATextInput.vue

@@ -19,7 +19,15 @@ import { /* inject, */ ref } from 'vue'
 import { useStringMask as vMask } from '../../directives/mask'
 import { ComponentProps } from '../../types'
 
-const { label, mask, required, readonly, uuid, validation = { errorMessage: '&nbsp;' } } = defineProps<ComponentProps>()
+const {
+	schema, // don't remove to allow masking to work
+	label,
+	mask,
+	required,
+	readonly,
+	uuid,
+	validation = { errorMessage: '&nbsp;' },
+} = defineProps<ComponentProps>()
 
 // TODO: setup maskFilled as a computed property
 const maskFilled = ref(true)

package/src/directives/mask.ts

@@ -2,6 +2,9 @@ import type { DirectiveBinding } from 'vue'
 
 import type { FormSchema } from '../types'
 
+/**
+ * Named masks for common input types
+ */
 const NAMED_MASKS = {
 	date: '##/##/####',
 	datetime: '####/##/## ##:##',
@@ -11,6 +14,11 @@ const NAMED_MASKS = {
 	card: '#### #### #### ####',
 }
 
+/**
+ * Extracts a mask function from a stringified function
+ * @param mask - Mask string
+ * @returns Mask function
+ */
 function extractMaskFn(mask: string): ((args: any) => string) | void {
 	try {
 		// eslint-disable-next-line @typescript-eslint/no-implied-eval
@@ -22,6 +30,11 @@ function extractMaskFn(mask: string): ((args: any) => string) | void {
 	}
 }
 
+/**
+ * Gets the mask for a given directive binding
+ * @param binding - Binding object from directive hook
+ * @returns Mask string
+ */
 function getMask(binding: DirectiveBinding<string>) {
 	let mask = binding.value
 
@@ -35,7 +48,7 @@ function getMask(binding: DirectiveBinding<string>) {
 		}
 	} else {
 		// TODO: (state) handle using state management
-		const schema: FormSchema = binding.instance['schema']
+		const schema = binding.instance['schema'] as FormSchema
 		const fieldType: string | undefined = schema?.fieldtype?.toLowerCase()
 		if (fieldType && NAMED_MASKS[fieldType]) {
 			mask = NAMED_MASKS[fieldType]
@@ -45,6 +58,12 @@ function getMask(binding: DirectiveBinding<string>) {
 	return mask
 }
 
+/**
+ * Unmasks the input string
+ * @param input - Input string
+ * @param maskToken - Mask token character
+ * @returns Unmasked input string
+ */
 function unmaskInput(input: string, maskToken?: string) {
 	if (!maskToken) {
 		maskToken = '#'
@@ -60,6 +79,13 @@ function unmaskInput(input: string, maskToken?: string) {
 	return unmaskedInput
 }
 
+/**
+ * Fills the mask with the input string
+ * @param input - Input string
+ * @param mask - Mask string
+ * @param maskToken - Mask token character
+ * @returns Masked input string
+ */
 function fillMask(input: string, mask: string, maskToken?: string) {
 	if (!maskToken) {
 		maskToken = '#'
@@ -78,6 +104,13 @@ function fillMask(input: string, mask: string, maskToken?: string) {
 	return replacement.slice(0, mask.length)
 }
 
+/**
+ * Applies a mask to an input element
+ * @param el - Input element
+ * @param binding - Binding object from directive hook
+ * @returns void
+ * @public
+ */
 export function useStringMask(el: HTMLInputElement, binding: DirectiveBinding<string>) {
 	const mask = getMask(binding)
 	if (!mask) return

package/src/index.ts

@@ -1,5 +1,5 @@
 export type { CellContext, TableConfig, TableColumn, TableRow } from '@stonecrop/atable'
-import { App } from 'vue'
+import type { App } from 'vue'
 
 import ACheckbox from './components/form/ACheckbox.vue'
 import AComboBox from './components/form/AComboBox.vue'
@@ -12,9 +12,7 @@ import AForm from './components/AForm.vue'
 import ANumericInput from './components/form/ANumericInput.vue'
 import ATextInput from './components/form/ATextInput.vue'
 import Login from './components/utilities/Login.vue'
-export type { BasicSchema, FormSchema, TableSchema, FieldsetSchema, SchemaTypes } from './types'
-// import { ACurrency } from './components/form/ACurrency.vue'
-// import { AQuantity } from './components/form/AQuantity.vue'
+export type { BaseSchema, FieldsetSchema, FormSchema, SchemaTypes, TableSchema } from './types'
 
 /**
  * Install all AForm components
@@ -32,8 +30,6 @@ function install(app: App /* options */) {
 	app.component('AForm', AForm)
 	app.component('ANumericInput', ANumericInput)
 	app.component('ATextInput', ATextInput)
-	// app.component('ACurrency', ACurrency)
-	// app.component('AQuantity', AQuantity)
 }
 
 export {