[aform] add AQuantity component

aform/src/components/form/ADropdown.vue

@@ -23,7 +23,7 @@
 					{{ result }}
 				</li>
 			</ul>
-			<label>{{ label }}</label>
+			<label v-if="label">{{ label }}</label>
 		</div>
 	</div>
 </template>
@@ -119,7 +119,7 @@ const onEnter = () => {
 // }
 </script>
 
-<style>
+<style scoped>
 /* variables taken from here: https://github.com/frappe/frappe/blob/version-13/frappe/public/scss/common/awesomeplete.scss */
 .autocomplete {
 	position: relative;

aform/src/components/form/AQuantity.vue

@@ -0,0 +1,102 @@
+<template>
+	<div class="input-group">
+		<label :for="uuid">{{ label }}</label>
+		<input
+			v-model="values.quantity"
+			v-bind="values"
+			type="number"
+			:id="uuid"
+			:disabled="readonly"
+			:required="required" />
+
+		<ADropdown v-if="values.uom" v-model="values.uom" label="" :items="values.uoms" class="input-group-append">
+		</ADropdown>
+
+		<p v-show="validation.errorMessage" v-html="validation.errorMessage"></p>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Quantity } from '@/types/quantity'
+import ADropdown from './ADropdown.vue'
+
+const {
+	label,
+	required,
+	readonly,
+	uuid,
+	validation = { errorMessage: '' },
+} = defineProps<{
+	label: string
+	required?: boolean
+	readonly?: boolean
+	uuid?: string
+	validation?: Record<string, any>
+}>()
+
+const values = defineModel<Quantity>({ default: { quantity: 0 } })
+
+// TODO: use stock quantity in template
+// const stockQty = computed(() => {
+// 	return props.modelValue.quantity * props.modelValue.conversionFactor
+// })
+</script>
+
+<style scoped>
+.input-group {
+	display: flex;
+	flex-direction: row;
+	align-items: baseline;
+}
+
+div {
+	min-width: 40ch;
+	border: 1px solid transparent;
+	padding: 0rem;
+	margin: 0rem;
+	margin-right: 1ch;
+}
+
+input {
+	width: 100%;
+	outline: 1px solid transparent;
+	border: 1px solid var(--input-border-color);
+	padding: 1ch 0.5ch 0.5ch 1ch;
+	margin: calc(1.15rem / 2) 0 0 0;
+	min-height: 1.15rem;
+}
+
+p,
+label {
+	color: var(--input-label-color);
+	display: block;
+	min-height: 1.15rem;
+	padding: 0rem;
+	margin: 0rem;
+	border: 1px solid transparent;
+	margin-bottom: 0.25rem;
+}
+
+p {
+	width: 100%;
+	color: red;
+	font-size: 85%;
+}
+
+label {
+	z-index: 2;
+	font-size: 80%;
+	position: absolute;
+	background: white;
+	margin-left: 1ch;
+	padding: 0 0.25ch 0 0.25ch;
+}
+
+input:focus {
+	border: 1px solid var(--input-active-border-color);
+}
+
+input:focus + label {
+	color: var(--input-active-label-color);
+}
+</style>

aform/src/index.ts

@@ -9,6 +9,7 @@ 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 AQuantity from '@/components/form/AQuantity.vue'
 import ATextInput from '@/components/form/ATextInput.vue'
 import Login from '@/components/utilities/Login.vue'
 export type { BasicSchema, FormSchema, TableSchema, FieldsetSchema, SchemaTypes } from '@/types'
@@ -30,6 +31,7 @@ function install(app: App /* options */) {
 	app.component('AFileAttach', AFileAttach)
 	app.component('AForm', AForm)
 	app.component('ANumericInput', ANumericInput)
+	app.component('AQuantity', AQuantity)
 	app.component('ATextInput', ATextInput)
 	// app.component('ACurrency', ACurrency)
 	// app.component('AQuantity', AQuantity)
@@ -39,12 +41,13 @@ export {
 	ACheckbox,
 	AComboBox,
 	ADate,
-	ADropdown,
 	ADatePicker,
+	ADropdown,
 	AFieldset,
 	AFileAttach,
 	AForm,
 	ANumericInput,
+	AQuantity,
 	ATextInput,
 	Login,
 	install,

aform/src/types/quantity.ts

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from 'vue'
+
+export interface Quantity extends InputHTMLAttributes {
+	quantity: number
+
+	conversionFactor?: number
+	stockUom?: string
+	uom?: string
+	uoms?: string[]
+}

common/autoinstallers/rush-plugins/rush-plugins/rush-sort-package-json/rush-plugin-manifest.json

@@ -1,10 +1,10 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/rush/v5/rush-plugin-manifest.schema.json",
-  "plugins": [
-    {
-      "pluginName": "rush-sort-package-json",
-      "description": "Rush plugin for sort package.json file in the project",
-      "commandLineJsonFilePath": "command-line.json"
-    }
-  ]
-}
+{
+	"$schema": "https://developer.microsoft.com/json-schemas/rush/v5/rush-plugin-manifest.schema.json",
+	"plugins": [
+		{
+			"pluginName": "rush-sort-package-json",
+			"description": "Rush plugin for sort package.json file in the project",
+			"commandLineJsonFilePath": "command-line.json"
+		}
+	]
+}

common/autoinstallers/rush-plugins/rush-plugins/rush-sort-package-json/rush-sort-package-json/command-line.json

@@ -1,12 +1,12 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/rush/v5/command-line.schema.json",
-  "commands": [
-    {
-      "name": "sort-package-json",
-      "commandKind": "global",
-      "summary": "Rush plugin for sort package.json file in the project",
-      "shellCommand": "node <packageFolder>/lib/index.js",
-      "safeForSimultaneousRushProcesses": true
-    }
-  ]
-}
+{
+	"$schema": "https://developer.microsoft.com/json-schemas/rush/v5/command-line.schema.json",
+	"commands": [
+		{
+			"name": "sort-package-json",
+			"commandKind": "global",
+			"summary": "Rush plugin for sort package.json file in the project",
+			"shellCommand": "node <packageFolder>/lib/index.js",
+			"safeForSimultaneousRushProcesses": true
+		}
+	]
+}

common/changes/@stonecrop/aform/feat-aquantity_2024-10-15-10-24.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/aform",
+      "comment": "add AQuantity component",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/aform"
+}

common/reviews/api/aform.api.md

@@ -14,6 +14,7 @@ import AFileAttach from '@/components/form/AFileAttach.vue';
 import AForm from '@/components/AForm.vue';
 import ANumericInput from '@/components/form/ANumericInput.vue';
 import { App } from 'vue';
+import AQuantity from '@/components/form/AQuantity.vue';
 import ATextInput from '@/components/form/ATextInput.vue';
 import { BasicSchema } from '@/types';
 import { FieldsetSchema } from '@/types';
@@ -40,6 +41,8 @@ export { AForm }
 
 export { ANumericInput }
 
+export { AQuantity }
+
 export { ATextInput }
 
 export { BasicSchema }

examples/aform/assets/basic_form_schema.json

@@ -19,6 +19,17 @@
 		"component": "ANumericInput",
 		"label": "Age"
 	},
+	{
+		"fieldname": "height",
+		"component": "AQuantity",
+		"label": "Height",
+		"value": {
+			"quantity": 150,
+			"uom": "cm",
+			"uoms": ["cm", "inch", "feet"],
+			"min": 0
+		}
+	},
 	{
 		"fieldname": "date",
 		"fieldtype": "Date",