@iamproperty/components 3.7.8--beta → 3.7.8

package/src/components/FileUpload/FileUpload.vue

@@ -0,0 +1,29 @@
+<template>
+  <iam-fileupload><slot></slot></iam-fileupload>
+</template>
+
+<script>
+import iamFileupload from '../../../assets/js/components/fileupload/fileupload.component.js'
+
+export default {
+  name: 'FileUpload',
+  props: {
+    maxfilesize: {
+      type: Number,
+      required: false
+    },
+    maxfiles: {
+      type: Number,
+      required: false
+    }
+  },
+  mounted(){
+
+    this.$nextTick(function () {
+      
+      if (!window.customElements.get('iam-fileupload'))
+        window.customElements.define('iam-fileupload', iamFileupload);
+    })
+  }
+}
+</script>

package/src/components/FileUpload/README.md

@@ -0,0 +1,13 @@
+```
+<FileUpload data-maxsize="500"><input type="file" name="files[]" multiple="multiple" accept=".pdf, .csv, .jpg, .png" /></FileUpload>
+```
+
+**Properties**
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| data-maxsize | Int | - | Blocks files from being added that is larger than the max size given in kb's |
+
+**Class modifiers**
+
+- Adding a class of **.fileupload--drag-drop** will add a droppable area for the user to drag files into and drop.

package/src/index.js

@@ -3,7 +3,7 @@ export { default as Logo } from './foundations/Logo/Logo.vue'
 // Elements
 export { default as Table } from './components/Table/Table.vue'
 export { default as Input } from './components/Input/Input.vue'
-export { default as FileUploads } from './components/FileUploads/FileUploads.vue'
+export { default as FileUpload } from './components/FileUpload/FileUpload.vue'
 // Components
 export { default as Accordion } from './components/Accordion/Accordion.vue'
 export { default as AccordionItem } from './components/Accordion/AccordionItem.vue'

package/src/components/FileUploads/FileUploads.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="multiple-file-uploads mb-4">
-
-    <div class="row">
-      <div :class="`${inputcolclass ? inputcolclass : 'col-12 col-sm-4'}`">
-        <Input type="file" :id="id" :name="`${id}[]`" label="Add new file" labelclass="d-none" class="form-control-inline col" required :data-filesize="maxfilesize"></Input>
-      </div>
-      <div class="col-12 col-md me-auto">
-        <slot></slot>
-      </div>
-      <div class="col mw-fit-content">
-        <button type="button" class="btn btn-tertiary me-0" data-delete>Delete</button>
-      </div>
-    </div>
-
-    <button type="button" class="btn btn-secondary me-0" data-add :data-maxfiles="maxfiles">+ Add file</button>
-    
-  </div>
-</template>
-
-<script>
-import Input from '../../components/Input/Input.vue'
-
-export default {
-  components: {
-    Input
-  },
-  name: 'FileUploads',
-  props: {
-    id: {
-      type: String,
-      required: true
-    },
-    inputcolclass: {
-      type: String,
-      required: false
-    },
-    maxfilesize: {
-      type: Number,
-      required: false
-    },
-    maxfiles: {
-      type: Number,
-      required: false
-    }
-  }
-}
-</script>

package/src/components/FileUploads/README.md

@@ -1,24 +0,0 @@
-### Usage
-
-```
-<Card :title="value.title" :content="value.content" :link="value.link"></Card>
-```
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| title | String | - | Used for the card heading |
-| titleclass | String | h2 | Update the class of the title from being a h2 |
-| subtitle | String | - | Optional sub heading |
-| content | HTML | - | Card content |
-| link | String | - | Card link |
-| type | String | - | Change the type of card (simple,quick)|
-| btntype | String | secondary | Change the type of button at the bottom of the card (primary,secondary,tertairy, link) |
-| ctatext | String | Find out more | Update the cta text within the button at the bottom of the card |
-| details | Object | - | Build up the card content with pre-defined bits of data |
-| - detail.tags | Array of strings | - | Add tags above the card header |
-| - detail.guideprice | String | - | Property guide price |
-| - detail.auctiontime | String | - | Auction time left |
-| - detail.readtime | String | - | How long it will take to read |
-| - detail.status | String | - | Display a status badge at the top of the card |