[aform, atable] added file attach component

aform/package.json

@@ -46,7 +46,8 @@
 		"@stonecrop/themes": "workspace:*",
 		"@stonecrop/utilities": "workspace:*",
 		"uuid": "^9.0.0",
-		"vue": "^3.4.23"
+		"vue": "^3.4.23",
+		"@vueuse/core": "^9.13.0"
 	},
 	"devDependencies": {
 		"@histoire/plugin-vue": "^0.17.17",

aform/src/components/form/AFileAttach.vue

@@ -0,0 +1,31 @@
+<template>
+  <button type="button" @click="open()">
+    {{ props.label }}
+  </button> &nbsp;
+  <button type="button" :disabled="!files" @click="reset()">
+    Reset
+  </button>
+
+  <template v-if="files">
+    <div>
+      <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>
+</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 } = useFileDialog()
+</script>

aform/src/histoire.setup.ts

@@ -5,6 +5,8 @@ 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 AFileAttach from '@/components/form/AFileAttach.vue'
+
 
 import { ATable, ATableHeader, ATableModal } from '@stonecrop/atable'
 import '@stonecrop/atable/styles'
@@ -19,4 +21,5 @@ export const setupVue3 = defineSetupVue3(({ app }) => {
 	app.component('ATableHeader', ATableHeader)
 	app.component('ATableModal', ATableModal)
 	app.component('ATextInput', ATextInput)
+	app.component('AFileAttach', AFileAttach)
 })

aform/src/index.ts

@@ -8,6 +8,7 @@ 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 AFileAttach from '@/components/form/AFileAttach.vue'
 // import { ACurrency } from '@/components/form/ACurrency.vue'
 // import { AQuantity } from '@/components/form/AQuantity.vue'
 
@@ -20,8 +21,9 @@ function install(app: App /* options */) {
 	app.component('AForm', AForm)
 	app.component('ANumericInput', ANumericInput)
 	app.component('ATextInput', ATextInput)
+	app.component('AFileAttach', AFileAttach)
 	// app.component('ACurrency', ACurrency)
 	// app.component('AQuantity', AQuantity)
 }
 
-export { ACheckbox, AComboBox, ADate, ADropdown, AFieldset, AForm, ANumericInput, ATextInput, install }
+export { ACheckbox, AComboBox, ADate, ADropdown, AFieldset, AForm, ANumericInput, ATextInput, AFileAttach, install }

aform/stories/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"
 	}
 ]

atable/src/histoire.setup.ts

@@ -7,7 +7,7 @@ import ATable from '@/components/ATable.vue'
 import ATableHeader from '@/components/ATableHeader.vue'
 import ATableModal from '@/components/ATableModal.vue'
 
-import { ADate, AForm, ANumericInput, ATextInput } from '@stonecrop/aform'
+import { ADate, AForm, ANumericInput, ATextInput, AFileAttach } from '@stonecrop/aform'
 
 export const setupVue3 = defineSetupVue3(({ app }) => {
 	// TODO: (typing) add typing for ADate
@@ -21,4 +21,5 @@ export const setupVue3 = defineSetupVue3(({ app }) => {
 	app.component('ATableHeader', ATableHeader)
 	app.component('ATableModal', ATableModal)
 	app.component('ATextInput', ATextInput)
+	app.component('AFileAttach', AFileAttach)
 })

atable/stories/list.story.vue

@@ -156,6 +156,11 @@ const basic_form_schema = ref([
 		component: 'ATextInput',
 		label: 'Phone',
 	},
+	{
+		fieldname: "attach_file",
+		component: "AFileAttach",
+		label: "Attach Files"
+	}
 ])
 
 const http_logs = ref({