feat: implement File type

Author: raichev-dima

packages/formkit/src/file.ts

@@ -0,0 +1,61 @@
+import { type FormKitTypeDefinition } from '@formkit/core'
+import { casts, createSection, outer } from '@formkit/inputs'
+import { token } from '@formkit/utils'
+import { VaFileUpload } from 'vuestic-ui'
+import { vuesticInputs } from './features/vuesticInputs';
+import { help, message, messages } from './sections';
+import { createInputWrapper } from './createInputWrapper';
+
+const FormKitInputWrapper = createInputWrapper(VaFileUpload)
+
+const fileInput = createSection('input', () => ({
+  $cmp: 'FormKitInputWrapper',
+  bind: '$attrs',
+  props: {
+    context: '$node.context',
+    prefixIcon: '$prefixIcon',
+    suffixIcon: '$suffixIcon'
+  },
+}))
+
+/**
+ * Input definition for a file.
+ * @public
+ */
+export const file: FormKitTypeDefinition = {
+  /**
+   * The actual schema of the input, or a function that returns the schema.
+   */
+  schema: outer(
+    messages(message()),
+    fileInput(),
+    help(),
+  ),
+  /**
+   * The type of node, can be a list, group, or input.
+   */
+  type: 'input',
+  /**
+   * The family of inputs this one belongs too. For example "text" and "email"
+   * are both part of the "text" family. This is primary used for styling.
+   */
+  family: 'text',
+  /**
+   * An array of extra props to accept for this input.
+   */
+  props: [],
+  /**
+   * A library of components to provide to the internal input schema
+   */
+  library: {
+    FormKitInputWrapper
+  },
+  /**
+   * Additional features that should be added to your input
+   */
+  features: [casts, vuesticInputs],
+  /**
+   * The key used to memoize the schema.
+   */
+  schemaMemoKey: token(),
+}

packages/formkit/src/index.ts

@@ -4,6 +4,7 @@ export { checkbox } from './checkbox'
 export { date } from './date'
 export { datepicker } from './datepicker'
 export { dropdown } from './dropdown'
+export { file } from './file'
 export { email } from './email'
 export { color } from './color'
 export { colorpicker } from './colorpicker'

packages/ui/src/stories/formkit/File.stories.ts

@@ -0,0 +1,24 @@
+import { StoryFn } from '@storybook/vue3'
+import * as types from '@vuestic/formkit'
+
+export default {
+  title: 'Formkit Integration/File',
+}
+
+export const Default: StoryFn = () => ({
+  setup () {
+    return {
+      types,
+    }
+  },
+  template: `
+    <div class="w-1/5 grid gap-6">
+      <FormKit
+        :type="types.file"
+        label="Documents"
+        accept=".pdf,.doc,.docx,.xml,.md,.csv"
+        help="Select as many documents as you would like."
+      />
+    </div>
+  `,
+})