[aform, atable] added file attach component (#138)

* [aform, atable] added file attach component * [aform, atable] added changelog * [aForm, atable] upgrade vueuse for file attach * [graphql] parse graphQL responses and convert numbers to Decimals (#135) * feat: parse graphQL responses and convert numbers to Decimals * fix: add changelog --------- Co-authored-by: Rohan Bansal <[email protected]> * [project] avoid recursive rendering issues (#137) * fix: avoid recursive rendering issues * ci: add changelog for recursion render fix * fix: pnpm lockfile --------- Co-authored-by: Rohan Bansal <[email protected]> * fix: remove unnecessary changelogs * styled file attach componet and updated form fields to use CSS grid instead of flexbox * fixed some styling conflicts with the login component * added changelog * reverted form to flexbox --------- Co-authored-by: Devarsh Bhatt <[email protected]> Co-authored-by: Rohan Bansal <[email protected]> Co-authored-by: Curt Rabinak <[email protected]>
agritheory · Sep 13, 2024 · 7ffeadf · 7ffeadf
1 parent 4ce9430
commit 7ffeadf
Show file tree

Hide file tree

Showing 14 changed files with 140 additions and 75 deletions.
diff --git a/aform/package.json b/aform/package.json
@@ -44,6 +44,7 @@
 	"dependencies": {
 		"@stonecrop/themes": "workspace:*",
 		"@stonecrop/utilities": "workspace:*",
+		"@vueuse/core": "^10.11.0",
 		"vue": "^3.4.31"
 	},
 	"devDependencies": {

diff --git a/aform/src/components/form/AFileAttach.vue b/aform/src/components/form/AFileAttach.vue
@@ -0,0 +1,38 @@
+<template>
+	<div class="aform__form-element aform__file-attach aform__grid--full">
+
+
+		<template v-if="files">
+			<div class="aform__file-attach-feedback">
+				<p>
+					You have selected: <b>{{ `${files.length} ${files.length === 1 ? 'file' : 'files'}` }}</b>
+				</p>
+				<li v-for="file of files" :key="file.name">
+					{{ file.name }}
+				</li>
+			</div>
+		</template>
+		<button type="button" @click="open()" class="aform__form-btn">
+			{{ props.label }}
+		</button>
+		<button type="button" :disabled="!files" @click="reset()" class="aform__form-btn">Reset</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useFileDialog } from '@vueuse/core'
+import { SchemaTypes } from 'types/index'
+
+const props = defineProps<{
+	schema: SchemaTypes[]
+	label: string
+	collapsible?: boolean
+	data?: any
+}>()
+
+const { files, open, reset, onChange } = useFileDialog()
+
+onChange(files => {
+	return files
+})
+</script>
diff --git a/aform/src/components/utilities/Login.vue b/aform/src/components/utilities/Login.vue
@@ -25,10 +25,10 @@
 						</div>
 
 						<div class="login-form-password login-form-element">
-							<label id="login-password" for="password" class="login-label">Password</label>
+							<label id="login-password" for="password" class="aform__field-label">Password</label>
 							<input
 								id="password"
-								class="login-field"
+								class="aform__input-field"
 								name="password"
 								type="password"
 								v-model="password"

diff --git a/aform/src/index.ts b/aform/src/index.ts
@@ -6,6 +6,7 @@ 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'
@@ -26,6 +27,7 @@ function install(app: App /* options */) {
 	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)
@@ -40,6 +42,7 @@ export {
 	ADropdown,
 	ADatePicker,
 	AFieldset,
+	AFileAttach,
 	AForm,
 	ANumericInput,
 	ATextInput,

diff --git a/common/changes/@stonecrop/aform/file-attach_2024-04-25-18-48.json b/common/changes/@stonecrop/aform/file-attach_2024-04-25-18-48.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/aform",
+      "comment": "added attach file component",
+      "type": "none"
+    }
+  ],
+  "packageName": "@stonecrop/aform"
+}
diff --git a/common/changes/@stonecrop/themes/file-attach_2024-07-29-18-01.json b/common/changes/@stonecrop/themes/file-attach_2024-07-29-18-01.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/themes",
+      "comment": "Styled file attach component",
+      "type": "none"
+    }
+  ],
+  "packageName": "@stonecrop/themes"
+}
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/common/reviews/api/aform.api.md b/common/reviews/api/aform.api.md
@@ -10,6 +10,7 @@ import ADate from '@/components/form/ADate.vue';
 import ADatePicker from '@/components/form/ADatePicker.vue';
 import ADropdown from '@/components/form/ADropdown.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 { App } from 'vue';
@@ -33,6 +34,8 @@ export { ADropdown }
 
 export { AFieldset }
 
+export { AFileAttach }
+
 export { AForm }
 
 export { ANumericInput }

diff --git a/examples/aform/assets/basic_form_schema.json b/examples/aform/assets/basic_form_schema.json
@@ -37,5 +37,10 @@
 		"component": "ATextInput",
 		"label": "Phone",
 		"mask": "(locale) => { if (locale === 'en-US') { return '(###) ###-####' } else if (locale === 'en-IN') { return '####-######'} }"
+	},
+	{
+		"fieldname": "attach_file",
+		"component": "AFileAttach",
+		"label": "Attach Files"
 	}
 ]
diff --git a/examples/aform/histoire.setup.ts b/examples/aform/histoire.setup.ts
@@ -6,6 +6,7 @@ import {
 	ADatePicker,
 	ADropdown,
 	AFieldset,
+	AFileAttach,
 	AForm,
 	ANumericInput,
 	ATextInput,
@@ -19,6 +20,7 @@ export const setupVue3 = defineSetupVue3(({ app }) => {
 	app.component('ADatePicker', ADatePicker)
 	app.component('ADropdown', ADropdown)
 	app.component('AFieldset', AFieldset)
+	app.component('AFileAttach', AFileAttach)
 	app.component('AForm', AForm)
 	app.component('ANumericInput', ANumericInput)
 	app.component('ATable', ATable)

diff --git a/examples/atable/histoire.setup.ts b/examples/atable/histoire.setup.ts
@@ -1,6 +1,6 @@
 import { defineSetupVue3 } from '@histoire/plugin-vue'
 
-import { ADate, AForm, ANumericInput, ATextInput } from '@stonecrop/aform'
+import { ADate, AFileAttach, AForm, ANumericInput, ATextInput } from '@stonecrop/aform'
 import { ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableModal } from '@stonecrop/atable'
 
 export const setupVue3 = defineSetupVue3(({ app }) => {
@@ -14,4 +14,5 @@ export const setupVue3 = defineSetupVue3(({ app }) => {
 	app.component('ATableHeader', ATableHeader)
 	app.component('ATableModal', ATableModal)
 	app.component('ATextInput', ATextInput)
+	app.component('AFileAttach', AFileAttach)
 })
diff --git a/examples/atable/list.story.vue b/examples/atable/list.story.vue
@@ -153,6 +153,11 @@ const basic_form_schema = ref([
 		component: 'ATextInput',
 		label: 'Phone',
 	},
+	{
+		fieldname: "attach_file",
+		component: "AFileAttach",
+		label: "Attach Files"
+	}
 ])
 
 const http_logs = ref({

diff --git a/themes/default/_form.css b/themes/default/_form.css
@@ -6,42 +6,28 @@ Holds styles for all form fields
 } */
 .aform {
 	display: flex;
-	/* display: grid;
-	grid-auto-flow: column;
-	gap: 1rem; */
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	align-items: baseline;
+	flex-wrap:wrap;
+	gap: 1rem;
 	padding: 1rem;
 	border: 1px solid var(--gray-5);
 	border-left: 4px solid var(--gray-5);
 	margin-bottom: 1rem;
+	max-width:100%;
+}
+@media screen and (max-width:400px){
+	.aform{
+		flex-direction: column;
+	}
 }
-
 .aform__form-element {
-	min-width: 30%;
-	flex-basis: 32%;
-	/* flex-grow:1; */
 	border: 1px solid transparent;
 	padding: 0;
 	margin: 0;
-	margin-right: 0.5rem;
-	margin-bottom: 0.5rem;
-	display: grid;
 	position: relative;
-	margin: 0.5rem 0;
+	box-sizing:border-box;
+	flex-grow:1;
+	min-width:100px;
 }
-/* @media (max-width:600px){
-		.aform__form-element{
-			flex-basis:48%;
-		}
-}
-@media (max-width:400px){
-	.aform__form-element{
-		flex-basis:100%;
-	}
-} */
 .aform__input-field {
 	outline: 1px solid transparent;
 	border: 1px solid var(--input-border-color);
@@ -50,7 +36,6 @@ Holds styles for all form fields
 	padding-top: 0.5rem;
 	padding-left: 0.5rem;
 	margin: 0 0 0 0;
-	/* border-radius: 0 0 0.25rem 0.25rem; */
 	border-radius: 0;
 	box-sizing: border-box;
 	width: 100%;
@@ -117,6 +102,8 @@ p.error {
 .aform__checkbox {
 	cursor: pointer;
 	width: auto;
+	margin-top:0;
+	display:block;
 }
 .aform__checkbox:checked {
 	accent-color: var(--primary-color);
@@ -161,53 +148,49 @@ tr:focus {
 	background-color: lightblue;
 	outline: auto;
 }
-
-/* .aform > form {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: flex-start;
-	align-items: baseline;
-} */
-
-/* .aform div {
-	min-width: 40ch;
-	border: 1px solid transparent;
-	padding: 0rem;
-	margin: 0rem;
-	margin-right: 1ch;
-} */
-
-/* .aform input {
-	width: calc(100% - 1ch);
-	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;
-	border-radius: 0.25rem;
-} */
-
-/* .aform label {
+.aform__form-btn{
+	padding:.5rem 2rem;
+	width:auto;
+	border:1px solid var(--input-border-color);
 	color: var(--input-label-color);
-	display: block;
-	min-height: 1.15rem;
-	padding: 0rem;
-	margin: 0rem;
-	border: 1px solid transparent;
-	margin-bottom: 0.25rem;
-	z-index: 2;
-	font-size: 80%;
-	position: absolute;
-	background: white;
-	margin: calc(-1.5rem - calc(2.15rem / 2)) 0 0 1ch;
-	padding: 0 0.25ch 0 0.25ch;
+	cursor:pointer;
+	background-color: white;
+}
+.aform__form-btn:disabled{
+	background-color: var(--gray-5);
+}
+.aform__file-attach{
+	padding:1rem;
+	display:flex;
+	flex-wrap:wrap;
+	gap:1rem;
+	flex-direction:row;
+	justify-content: center;
+	align-items: center;
+	border: 1px dashed var(--input-border-color);
+	width:100%;
+}
+@media screen and (max-width:400px){
+	.aform__file-attach > .aform__form-btn{
+		width:100%;
+	}
+}
+/* .aform__file-attach-buttons{
+	grid-column: span 1;
 } */
 
-/* .aform input:focus {
-	border: 1px solid var(--input-active-border-color);
-} */
+.aform__file-attach-feedback{
+	color: var(--input-label-color);
+	width:100%;
+	padding:.5rem;
+	text-align: center;
+	align-self: center;
 
-/* .aform input:focus + label {
-	color: var(--input-active-label-color);
-} */
+	& > li{
+		list-style: none;
+		font-style: italic;
+	}
+	& > p{
+		margin-top :0;
+	}
+}
diff --git a/themes/default/_login.css b/themes/default/_login.css
@@ -47,6 +47,7 @@
 .login-form-element {
 	display: grid;
 	margin: 0.5rem 0;
+	position:relative;
 }
 .login-field {
 	padding: 0.5rem 0.25rem 0.25rem 0.5rem;