@stonecrop/aform 0.12.8 → 0.13.0

package/dist/directives/mask.js

@@ -0,0 +1,102 @@
+/**
+ * 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, @typescript-eslint/no-unsafe-call
+        return Function(`"use strict";return (${mask})`)();
+    }
+    catch (error) {
+        if (error instanceof ReferenceError) {
+            // assume mask is a string
+        }
+    }
+}
+/**
+ * Gets the mask for a given directive binding
+ * @param binding - Binding object from directive hook
+ * @returns Mask string
+ */
+function getMask(binding) {
+    const mask = binding.value;
+    if (!mask)
+        return undefined;
+    const maskFn = extractMaskFn(mask);
+    if (maskFn) {
+        // TODO: (state) replace with state management;
+        // pass the entire form/table data to the function
+        const locale = binding.instance?.['locale'];
+        return maskFn(locale);
+    }
+    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 = '#';
+    }
+    let unmaskedInput = input;
+    const maskChars = [maskToken, '/', '-', '(', ')', ' '];
+    for (const char of maskChars) {
+        unmaskedInput = unmaskedInput.replaceAll(char, '');
+    }
+    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 = '#';
+    }
+    let replacement = mask;
+    for (const inputChar of input) {
+        const replaceIndex = replacement.indexOf(maskToken);
+        if (replaceIndex !== -1) {
+            const prefix = replacement.substring(0, replaceIndex);
+            const suffix = replacement.substring(replaceIndex + 1);
+            replacement = prefix + inputChar + suffix;
+        }
+    }
+    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)
+        return;
+    const maskToken = '#';
+    const inputText = el.value;
+    // process input value with mask
+    const unmaskedInput = unmaskInput(inputText, maskToken);
+    if (unmaskedInput) {
+        const replacement = fillMask(unmaskedInput, mask, maskToken);
+        // TODO: (state) this is very opinionated;
+        // most likely fixed with state management;
+        // a better way could be to emit back to instance;
+        if (binding.instance?.['maskFilled']) {
+            binding.instance['maskFilled'] = !replacement.includes(maskToken);
+        }
+        el.value = replacement;
+    }
+    else {
+        el.value = mask;
+    }
+}

package/dist/index.js

@@ -0,0 +1,31 @@
+import { install as installATable } from '@stonecrop/atable';
+import ACheckbox from './components/form/ACheckbox.vue';
+import AComboBox from './components/form/AComboBox.vue';
+import ADate from './components/form/ADate.vue';
+import ADropdown from './components/form/ADropdown.vue';
+import ADatePicker from './components/form/ADatePicker.vue';
+import AFieldset from './components/form/AFieldset.vue';
+import AFileAttach from './components/form/AFileAttach.vue';
+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';
+/**
+ * Install all AForm components
+ * @param app - Vue app instance
+ * @public
+ */
+function install(app /* options */) {
+    app.use(installATable); // Install ATable components for use within AForm
+    app.component('ACheckbox', ACheckbox);
+    app.component('AComboBox', AComboBox);
+    app.component('ADate', ADate);
+    app.component('ADropdown', ADropdown);
+    app.component('ADatePicker', ADatePicker);
+    app.component('AFieldset', AFieldset);
+    app.component('AFileAttach', AFileAttach);
+    app.component('AForm', AForm);
+    app.component('ANumericInput', ANumericInput);
+    app.component('ATextInput', ATextInput);
+}
+export { ACheckbox, AComboBox, ADate, ADropdown, ADatePicker, AFieldset, AFileAttach, AForm, ANumericInput, ATextInput, Login, install, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/aform",
-  "version": "0.12.8",
+  "version": "0.13.0",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -35,10 +35,10 @@
   "dependencies": {
     "@vueuse/core": "^14.2.1",
     "@vueuse/components": "^14.2.1",
-    "@stonecrop/atable": "0.12.8",
-    "@stonecrop/schema": "0.12.8",
-    "@stonecrop/themes": "0.12.8",
-    "@stonecrop/utilities": "0.12.8"
+    "@stonecrop/atable": "0.13.0",
+    "@stonecrop/schema": "0.13.0",
+    "@stonecrop/themes": "0.13.0",
+    "@stonecrop/utilities": "0.13.0"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",

package/dist/theme/custom_themes.css

@@ -1,6 +0,0 @@
-/*
-
-Import custom themes here, e.g.
-@import url('purple_theme.css');
-
-*/

package/dist/theme/fields.css

@@ -1,84 +0,0 @@
-/* Styles for all types of fields: Text and Number Inputs, Radios, Checkboxes, etc. */
-/* .form-element {
-	min-width: 40ch;
-	border: 1px solid transparent;
-	padding: 0;
-	margin: 0;
-	margin-right: 0.5rem;
-	margin-bottom: 0.5rem;
-} */
-/* .input-field {
-	outline: 1px solid transparent;
-	border: 1px solid var(--sc-input-border-color);
-	padding: 0.25rem;
-	margin: 0 0 0 0;
-	border-radius: 0 0 0.25rem 0.25rem;
-	box-sizing: border-box;
-	width: 100%;
-}
-.field-label {
-	color: var(--sc-input-label-color);
-	display: block;
-	min-height: 1.15rem;
-	padding: 0.25rem;
-	margin: 0rem;
-	z-index: 2;
-	font-size: 1rem;
-	font-weight: bold;
-	background: white;
-	width: 100%;
-	box-sizing: border-box;
-	background: var(--sc-gray-5);
-	border: 1px solid var(--sc-input-border-color);
-	border-bottom: none;
-}
-p.error {
-	display: block;
-	min-height: 1.15rem;
-	padding: 0rem;
-	padding-left: 0.5rem;
-	margin: 0.5rem 0 0.25rem 0rem;
-	border: 1px solid transparent;
-	width: 100%;
-	color: var(--sc-brand-danger);
-	font-size: 0.8rem;
-}
-
-.input-field:focus {
-	border: 1px solid var(--sc-input-active-border-color);
-}
-
-.input-field:focus + .field-label {
-	color: var(--sc-input-active-label-color);
-}
-
-/**  CHECKBOX **/
-/* .checkbox {
-	visibility: hidden;
-	display: none;
-}
-
-.checkbox + .custom-checkbox:before {
-	content: '⬡';
-	font-size: 1.2rem;
-	cursor: pointer;
-	margin-right: 0.25rem;
-}
-
-.checkbox:checked + .custom-checkbox:before {
-	content: '⬣';
-}
-
-.custom-checkbox {
-	display: inline-block;
-	line-height: 0;
-}
-
-.checkbox-container {
-	width: 100%;
-	display: inline-block;
-}
-
-.checkbox-container:hover + .field-label {
-	color: var(--sc-input-active-label-color);
-} */

package/dist/theme/login.css

@@ -1,2 +0,0 @@
-@import url('@stonecrop/themes/default.css');
-@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

package/dist/theme/purple_theme.css

@@ -1,9 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
-
-:root {
-	--sc-primary-color: #645caa;
-}
-
-:root [data-theme='purple'] {
-	--sc-row-color-zebra-light: #ebc7e8;
-}