@stonecrop/aform 0.2.24 → 0.2.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/aform",
-  "version": "0.2.24",
+  "version": "0.2.26",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -17,48 +17,47 @@
   },
   "exports": {
     ".": {
-      "import": "./dist/aform.js",
+      "import": {
+        "types": "./dist/aform/src/index.d.ts",
+        "default": "./dist/aform.js"
+      },
       "require": "./dist/aform.umd.cjs"
     },
     "./styles": "./dist/style.css"
   },
-  "main": "dist/aform.js",
-  "module": "dist/aform.js",
-  "umd": "dist/aform.umd.cjs",
-  "types": "src/index",
+  "typings": "./dist/aform/src/index.d.ts",
   "files": [
     "dist/*",
     "src/*"
   ],
   "dependencies": {
-    "uuid": "^9.0.0",
-    "vue": "^3.4.23",
-    "@stonecrop/themes": "0.2.24",
-    "@stonecrop/utilities": "0.2.24"
+    "vue": "^3.4.31",
+    "@stonecrop/utilities": "0.2.26",
+    "@stonecrop/themes": "0.2.26"
   },
   "devDependencies": {
-    "@histoire/plugin-vue": "^0.17.17",
-    "@types/uuid": "^9.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@microsoft/api-documenter": "^7.25.3",
+    "@rushstack/heft": "^0.66.18",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
+    "@vitejs/plugin-vue": "^5.0.5",
     "@vitest/coverage-istanbul": "^1.6.0",
     "@vitest/ui": "^1.6.0",
     "@vue/test-utils": "^2.4.6",
-    "cypress": "^12.11.0",
+    "cypress": "^13.11.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-vue": "^9.11.1",
     "eslint": "^8.40.0",
-    "histoire": "^0.17.17",
     "jsdom": "^24.0.0",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.9",
+    "typescript": "^5.5.2",
+    "vite": "^5.3.2",
     "vitest": "^1.6.0",
-    "vue-router": "^4",
-    "@stonecrop/atable": "0.2.24"
+    "vue-router": "^4.4.0",
+    "@stonecrop/atable": "0.2.26",
+    "stonecrop-rig": "0.2.22"
   },
   "peerDependencies": {
-    "@stonecrop/atable": "0.2.24"
+    "@stonecrop/atable": "0.2.26"
   },
   "publishConfig": {
     "access": "public"
@@ -67,14 +66,12 @@
     "node": ">=20.11.0"
   },
   "scripts": {
-    "prepublish": "tsc -b && vite build",
-    "build": "tsc -b && vite build",
+    "prepublish": "heft build && vite build && rushx docs",
+    "build": "heft build && vite build && rushx docs",
     "dev": "vite",
+    "docs": "api-documenter markdown -i temp -o ../docs/aform",
     "lint": "eslint . --ext .ts,.vue",
     "preview": "vite preview",
-    "story:build": "histoire build",
-    "story:dev": "histoire dev",
-    "story:preview": "histoire preview",
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
     "test:ui": "vitest --ui"

package/src/components/AForm.vue

@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 
-import { SchemaTypes } from 'types'
+import type { SchemaTypes } from '@/types'
 
 const props = defineProps<{
 	modelValue: SchemaTypes[]
@@ -55,6 +55,7 @@ const childModels = computed({
 				},
 				set: newValue => {
 					// Find the component in modelValue and update it
+					// eslint-disable-next-line vue/no-mutating-props
 					props.modelValue[i].value = newValue
 					emit('update:modelValue', props.modelValue)
 				},

package/src/components/form/ACheckbox.vue

@@ -2,7 +2,13 @@
 	<div class="aform__form-element">
 		<label class="aform__field-label" :for="uuid">{{ label }}</label>
 		<span class="aform__checkbox-container aform__input-field">
-			<input v-model="checkbox" type="checkbox" :id="uuid" class="aform__checkbox" :readonly="readOnly" :required="required" />
+			<input
+				v-model="checkbox"
+				type="checkbox"
+				:id="uuid"
+				class="aform__checkbox"
+				:readonly="readOnly"
+				:required="required" />
 		</span>
 		<p class="error" v-show="validation.errorMessage" v-html="validation.errorMessage"></p>
 	</div>

package/src/components/form/ADropdown.vue

@@ -80,7 +80,7 @@ const onChange = () => {
 	}
 }
 
-const handleClickOutside = (event: MouseEvent) => {
+const handleClickOutside = () => {
 	closeResults()
 	arrowCounter.value = 0
 }

package/src/components/form/AFieldset.vue

@@ -15,7 +15,7 @@ import { ref } from 'vue'
 
 import CollapseButton from '@/components/base/CollapseButton.vue'
 import AForm from '@/components/AForm.vue'
-import { SchemaTypes } from 'types/index'
+import { SchemaTypes } from '@/types'
 
 const props = defineProps<{
 	schema: SchemaTypes[]

package/src/components/form/ANumericInput.vue

@@ -1,7 +1,13 @@
 <template>
 	<div class="aform__form-element">
 		<label class="aform__field-label" :for="uuid">{{ label }}</label>
-		<input class="aform__input-field" v-model="inputNumber" type="number" :id="uuid" :disabled="readonly" :required="required" />
+		<input
+			class="aform__input-field"
+			v-model="inputNumber"
+			type="number"
+			:id="uuid"
+			:disabled="readonly"
+			:required="required" />
 		<p class="error" v-show="validation.errorMessage" v-html="validation.errorMessage"></p>
 	</div>
 </template>

package/src/components/form/ATextInput.vue

@@ -14,10 +14,10 @@
 </template>
 
 <script setup lang="ts">
-import { inject, ref } from 'vue'
+import { /* inject, */ ref } from 'vue'
 
-import { FormSchema } from 'types'
 import { useStringMask as vMask } from '@/directives/mask'
+import type { FormSchema } from '@/types'
 
 withDefaults(
 	defineProps<{

package/src/directives/mask.ts

@@ -1,6 +1,7 @@
-import type { FormSchema } from 'types'
 import type { DirectiveBinding } from 'vue'
 
+import type { FormSchema } from '@/types'
+
 const NAMED_MASKS = {
 	date: '##/##/####',
 	datetime: '####/##/## ##:##',

package/src/index.ts

@@ -9,9 +9,16 @@ import AFieldset from '@/components/form/AFieldset.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'
+export type { BasicSchema, FormSchema, TableSchema, FieldsetSchema, SchemaTypes } from '@/types'
 // import { ACurrency } from '@/components/form/ACurrency.vue'
 // import { AQuantity } from '@/components/form/AQuantity.vue'
 
+/**
+ * Install all AForm components
+ * @param app - Vue app instance
+ * @public
+ */
 function install(app: App /* options */) {
 	app.component('ACheckbox', ACheckbox)
 	app.component('ACombobox', AComboBox)
@@ -26,4 +33,16 @@ function install(app: App /* options */) {
 	// app.component('AQuantity', AQuantity)
 }
 
-export { ACheckbox, AComboBox, ADate, ADropdown, ADatePicker, AFieldset, AForm, ANumericInput, ATextInput, install }
+export {
+	ACheckbox,
+	AComboBox,
+	ADate,
+	ADropdown,
+	ADatePicker,
+	AFieldset,
+	AForm,
+	ANumericInput,
+	ATextInput,
+	Login,
+	install,
+}

package/src/theme/aform.css

@@ -1 +1 @@
-@import url('@stonecrop/themes/default/default.css');
+@import url('@stonecrop/themes/default/default.css');

package/src/theme/fields.css

@@ -1,48 +1,47 @@
 /* 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:.5rem;
-  margin-bottom:.5rem;
+.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;
+.input-field {
+	outline: 1px solid transparent;
 	border: 1px solid var(--input-border-color);
-	padding:.25rem;
+	padding: 0.25rem;
 	margin: 0 0 0 0;
-	border-radius: 0 0 0.25rem .25rem;
-	box-sizing:border-box;
-	width:100%;
+	border-radius: 0 0 0.25rem 0.25rem;
+	box-sizing: border-box;
+	width: 100%;
 }
-.field-label{
-  color: var(--input-label-color);
+.field-label {
+	color: var(--input-label-color);
 	display: block;
 	min-height: 1.15rem;
-	padding: .25rem;
+	padding: 0.25rem;
 	margin: 0rem;
-  z-index: 2;
+	z-index: 2;
 	font-size: 1rem;
-	font-weight:bold;
+	font-weight: bold;
 	background: white;
-	width:100%;
-	box-sizing:border-box;
-	background:var(--gray-5);
-	border:1px solid var(--input-border-color);
-	border-bottom:none;
-  
+	width: 100%;
+	box-sizing: border-box;
+	background: var(--gray-5);
+	border: 1px solid var(--input-border-color);
+	border-bottom: none;
 }
-p.error{
+p.error {
 	display: block;
 	min-height: 1.15rem;
 	padding: 0rem;
-	padding-left:.5rem;
-	margin: .5rem 0 .25rem 0rem;
+	padding-left: 0.5rem;
+	margin: 0.5rem 0 0.25rem 0rem;
 	border: 1px solid transparent;
-  width: 100%;
+	width: 100%;
 	color: var(--brand-danger);
-	font-size: .8rem;
+	font-size: 0.8rem;
 }
 
 .input-field:focus {
@@ -56,14 +55,14 @@ p.error{
 /**  CHECKBOX **/
 .checkbox {
 	visibility: hidden;
-	display:none;
+	display: none;
 }
 
 .checkbox + .custom-checkbox:before {
 	content: '⬡';
 	font-size: 1.2rem;
 	cursor: pointer;
-	margin-right:.25rem;
+	margin-right: 0.25rem;
 }
 
 .checkbox:checked + .custom-checkbox:before {
@@ -72,14 +71,14 @@ p.error{
 
 .custom-checkbox {
 	display: inline-block;
-	line-height:0;
+	line-height: 0;
 }
 
 .checkbox-container {
-	width:100%;
-	display:inline-block;
+	width: 100%;
+	display: inline-block;
 }
 
 .checkbox-container:hover + .field-label {
 	color: var(--input-active-label-color);
-}
+}

package/src/theme/login.css

@@ -1,4 +1,2 @@
 @import url('@stonecrop/themes/default/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/src/types/index.ts

@@ -0,0 +1,31 @@
+import ATable from '@stonecrop/atable'
+
+export type BasicSchema = {
+	component: string
+	fieldname: string
+	value: any
+}
+
+export type FormSchema = BasicSchema & {
+	align: string
+	edit: boolean
+	fieldtype: string
+	label: string
+	name: string
+	width: string
+	mask?: string
+}
+
+export type TableSchema = BasicSchema & {
+	columns: ATable.TableColumn[]
+	config: ATable.TableConfig
+	rows: ATable.TableRow[]
+}
+
+export type FieldsetSchema = BasicSchema & {
+	label: string
+	schema: (FormSchema | TableSchema)[]
+	collapsible?: boolean
+}
+
+export type SchemaTypes = FormSchema | TableSchema | FieldsetSchema

package/src/histoire.setup.ts

@@ -1,26 +0,0 @@
-import { defineSetupVue3 } from '@histoire/plugin-vue'
-
-import ACheckbox from '@/components/form/ACheckbox.vue'
-import ADate from '@/components/form/ADate.vue'
-import ADatePicker from '@/components/form/ADatePicker.vue'
-import AFieldset from '@/components/form/AFieldset.vue'
-import AForm from '@/components/AForm.vue'
-import ANumericInput from '@/components/form/ANumericInput.vue'
-import ATextInput from '@/components/form/ATextInput.vue'
-
-import { ATable, ATableHeader, ATableModal } from '@stonecrop/atable'
-import '@stonecrop/atable/styles'
-
-export const setupVue3 = defineSetupVue3(({ app }) => {
-	// TODO: (typing) add typing for ATable components
-	app.component('ACheckbox', ACheckbox)
-	app.component('ADate', ADate)
-	app.component('ADatePicker', ADatePicker)
-	app.component('AFieldset', AFieldset)
-	app.component('AForm', AForm)
-	app.component('ANumericInput', ANumericInput)
-	app.component('ATable', ATable)
-	app.component('ATableHeader', ATableHeader)
-	app.component('ATableModal', ATableModal)
-	app.component('ATextInput', ATextInput)
-})