@iamproperty/components 7.0.0 → 7.1.0--beta2

package/src/components/Marketing/Marketing.vue

@@ -1,39 +1,36 @@
 <template>
   <!-- Custom element -->
   <iam-marketing>
-    
     <slot></slot>
   </iam-marketing>
 </template>
 
 <script>
-// Load web components
+  // Load web components
 
-export default {
-  name: 'Marketing',
-  props: {
-    title: {
-      type: String,
-      required: true
+  export default {
+    name: 'Marketing',
+    props: {
+      title: {
+        type: String,
+        required: true,
+      },
+      image: {
+        type: String,
+        required: false,
+      },
     },
-    image: {
-      type: String,
-      required: false
-    }
-  },
-  mounted(){
-
-    this.$nextTick(function () {
-      
-      import(`../../../assets/js/components/marketing/marketing.component.min.js`).then(module => {
-
-        if (!window.customElements.get(`iam-marketing`))
-          window.customElements.define(`iam-marketing`, module.default);
-
-      }).catch((err) => {
-        console.log(err.message);
+    mounted() {
+      this.$nextTick(function () {
+        import(`../../../assets/js/components/marketing/marketing.component.min.js`)
+          .then((module) => {
+            if (!window.customElements.get(`iam-marketing`))
+              window.customElements.define(`iam-marketing`, module.default);
+          })
+          .catch((err) => {
+            console.log(err.message);
+          });
       });
-    })
-  }
-}
+    },
+  };
 </script>

package/src/components/Marketing/README.md

@@ -8,13 +8,13 @@
 
 **The carousel props inherit the card deck props** - this is so that when we use cards in the carousel we can still pass the same options.
 
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| type  | String | - | Can be used to indicate that cards should be displayed in the carousel by giving the value 'card'  |
-| colclass  | String | - | Pass utility classes to the columns in the carousel. For example 'd-flex align-items-center' will align the items n the middle. |
+| Option   | Type   | Default Value | Description                                                                                                                     |
+| -------- | ------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| type     | String | -             | Can be used to indicate that cards should be displayed in the carousel by giving the value 'card'                               |
+| colclass | String | -             | Pass utility classes to the columns in the carousel. For example 'd-flex align-items-center' will align the items n the middle. |
 
 ### Slots
 
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
-| default | - | Will display before the carousel |
+| Option  | Default Value | Description                      |
+| ------- | ------------- | -------------------------------- |
+| default | -             | Will display before the carousel |

package/src/components/MultiStep/MultiStep.vue

@@ -1,23 +1,21 @@
 <script setup>
-import { onMounted } from 'vue'
+  import { onMounted } from 'vue';
 
-onMounted(() => {
-  
-  //this.$nextTick(function () {
-    
-    import(`../../../assets/js/components/multi-step/multi-step.component.js`).then(module => {
+  onMounted(() => {
+    //this.$nextTick(function () {
 
-      if (!window.customElements.get(`iam-multi-step`))
-        window.customElements.define(`iam-multi-step`, module.default);
-
-    }).catch((err) => {
-      console.log(err.message);
-    });
-  //})
-})
+    import(`../../../assets/js/components/multi-step/multi-step.component.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-multi-step`))
+          window.customElements.define(`iam-multi-step`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    //})
+  });
 </script>
 
-
 <template>
   <iam-multi-step>
     <slot></slot>

package/src/components/Multiselect/Multiselect.vue

@@ -3,22 +3,19 @@
 </template>
 
 <script>
-export default {
-  name: 'Multiselect',
-  mounted(){
-
-    this.$nextTick(function () {
-      
-      import(`../../../assets/js/components/multiselect/multiselect.component.min.js`).then(module => {
-
-        if (!window.customElements.get(`iam-multiselect`))
-          window.customElements.define(`iam-multiselect`, module.default);
-
-      }).catch((err) => {
-        console.log(err.message);
+  export default {
+    name: 'Multiselect',
+    mounted() {
+      this.$nextTick(function () {
+        import(`../../../assets/js/components/multiselect/multiselect.component.min.js`)
+          .then((module) => {
+            if (!window.customElements.get(`iam-multiselect`))
+              window.customElements.define(`iam-multiselect`, module.default);
+          })
+          .catch((err) => {
+            console.log(err.message);
+          });
       });
-    })
-
-  }
-}
+    },
+  };
 </script>

package/src/components/Nav/Nav.vue

@@ -1,38 +1,24 @@
 <template>
   <iam-nav ref="wrapper">
-
     <slot></slot>
-
   </iam-nav>
 </template>
 
 <script>
-export default {
-  components: {
-  },
-  name: 'Nav',
-  mounted(){
-
-    this.$nextTick(function () {
-      
-      import(`../../../assets/js/components/nav/nav.component.min.js`).then(module => {
-
-        if (!window.customElements.get(`iam-nav`))
-          window.customElements.define(`iam-nav`, module.default);
-
-      }).catch((err) => {
-        console.log(err.message);
+  export default {
+    components: {},
+    name: 'Nav',
+    mounted() {
+      this.$nextTick(function () {
+        import(`../../../assets/js/components/nav/nav.component.min.js`)
+          .then((module) => {
+            if (!window.customElements.get(`iam-nav`)) window.customElements.define(`iam-nav`, module.default);
+          })
+          .catch((err) => {
+            console.log(err.message);
+          });
       });
-
-
-
-    })
-
-
-  },
-  methods: {
-
-  }
-}
-
+    },
+    methods: {},
+  };
 </script>

package/src/components/Nav/README.md

@@ -20,23 +20,23 @@
 
 **Properties**
 
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| data-searcd-open  | String | - | Flag that opens the search bar on desktop on page load. |
+| Option           | Type   | Default Value | Description                                             |
+| ---------------- | ------ | ------------- | ------------------------------------------------------- |
+| data-searcd-open | String | -             | Flag that opens the search bar on desktop on page load. |
 
 **Slots**
 
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
-| default | - | Populates the main nav area |
-| logo | - | A place to add the logo to the site |
-| secondary | - | Moves the link upto the top of the navbar on desktop |
-| actions | - | A place to add buttons |
-| dual | - | Plave the link or list to the right of the nav, forcing the default slot to the left. |
-| search | - | A place to include a form with search functionality |
+| Option    | Default Value | Description                                                                           |
+| --------- | ------------- | ------------------------------------------------------------------------------------- |
+| default   | -             | Populates the main nav area                                                           |
+| logo      | -             | A place to add the logo to the site                                                   |
+| secondary | -             | Moves the link upto the top of the navbar on desktop                                  |
+| actions   | -             | A place to add buttons                                                                |
+| dual      | -             | Plave the link or list to the right of the nav, forcing the default slot to the left. |
+| search    | -             | A place to include a form with search functionality                                   |
 
 **Class modifiers**
 
-- Adding a class of **.bg-primary** will change the background of the navbar without chaning the menu background. 
+- Adding a class of **.bg-primary** will change the background of the navbar without chaning the menu background.
 - Adding a class of **.nav--sticky** will add etxra styling to make the navbar stick to the top of the page
 - Adding a class of **.nav--xs-sticky** will add etxra styling to make the navbar stick to the top of the page BUT only on the mobile view.

package/src/components/Nav-old/Nav.vue

@@ -1,6 +1,5 @@
 <template>
-  <nav :class="`nav${hasSecondarySlot?` has-secondary`:''}`" ref="wrapper">
-
+  <nav :class="`nav${hasSecondarySlot ? ` has-secondary` : ''}`" ref="wrapper">
     <input type="checkbox" name="showMenu" id="showMenu" class="d-none" />
     <input type="checkbox" name="showSearch" id="showSearch" class="d-none" />
     <input type="checkbox" name="showAccount" id="showAccount" class="d-none" />
@@ -58,11 +57,15 @@
 
           <div class="col nav__account-btn flex-row align-items-center" v-if="hasAccountSlot">
             <label for="showAccount">
-
               <svg class="icon" viewBox="0 0 28 28">
-                <path d="M14,28a13.861,13.861,0,0,1-9.268-3.533l-.023.047-.721-.738L3.62,23.4l.012-.023a14,14,0,1,1,20.735,0l.012.023-.367.377-.722.738-.024-.045A13.855,13.855,0,0,1,14,28Zm0-9.58a10.5,10.5,0,0,0-1.368.092c-.085.012-.17.03-.252.047-.061.013-.124.026-.187.037l-.077.013c-.266.047-.54.095-.8.165-.108.029-.215.065-.318.1-.063.022-.125.043-.188.063l-.08.026c-.223.071-.454.144-.671.234-.125.05-.245.11-.362.168l-.146.072-.045.021c-.208.1-.423.2-.623.312-.131.074-.257.158-.379.239l-.106.07-.068.044c-.176.114-.359.232-.528.359-.137.1-.267.218-.393.327l-.054.047c-.174.15-.355.306-.519.47-.132.134-.258.277-.38.416l-.018.021c-.16.184-.3.35-.437.527-.12.161-.23.33-.337.494-.076.117-.146.238-.214.356a12.495,12.495,0,0,0,17.109,0l-.022-.037c-.061-.1-.125-.212-.192-.315-.1-.156-.214-.333-.338-.5-.141-.188-.293-.363-.436-.526-.113-.13-.253-.292-.4-.438-.161-.162-.337-.314-.517-.468l-.08-.069c-.118-.1-.24-.209-.368-.307-.183-.137-.379-.264-.568-.387l-.026-.017-.106-.07c-.125-.083-.251-.166-.381-.24-.207-.118-.429-.222-.643-.322l-.024-.011-.152-.074c-.116-.057-.235-.116-.356-.165-.214-.087-.438-.159-.656-.229l-.1-.031c-.066-.021-.132-.043-.2-.066-.1-.035-.2-.07-.309-.1-.264-.07-.538-.118-.8-.165l-.078-.014c-.063-.011-.126-.024-.187-.037-.082-.017-.167-.035-.252-.047A10.483,10.483,0,0,0,14,18.421Zm0-1.473a11.871,11.871,0,0,1,1.54.1c.1.013.192.033.284.052.069.014.139.028.209.04.34.058.672.118,1,.2.14.036.278.082.412.127l.151.05c.309.1.587.188.859.3.148.059.293.127.433.194l.13.061c.306.142.553.266.775.389.188.107.368.22.535.328.26.166.489.322.7.478.156.117.316.244.49.389.209.176.412.361.622.567.156.154.3.293.43.443.209.23.4.472.542.657l.051.066c.1.134.21.272.308.416.021.031.045.061.068.09a1.267,1.267,0,0,1,.085.117,12.525,12.525,0,1,0-19.24,0c.026-.04.056-.078.084-.114s.05-.064.073-.1c.1-.141.2-.278.3-.409l.046-.059c.2-.264.378-.478.555-.672.137-.152.281-.3.417-.43.215-.21.422-.4.635-.578.18-.15.332-.271.479-.381.208-.155.433-.31.709-.486.174-.111.346-.219.526-.319.274-.153.55-.285.783-.393l.112-.053c.144-.069.293-.14.445-.2.282-.113.578-.208.864-.3l.159-.052c.132-.044.265-.088.4-.124.331-.087.675-.148,1-.2.068-.012.137-.026.2-.039.094-.019.191-.039.288-.052A11.827,11.827,0,0,1,14,16.948Z" transform="translate(0 -0.001)" />
-  	<path d="M5.2,10.4a5.2,5.2,0,1,1,5.2-5.2A5.206,5.206,0,0,1,5.2,10.4Zm0-8.915A3.714,3.714,0,1,0,8.915,5.2,3.719,3.719,0,0,0,5.2,1.486Z" transform="translate(8.8 4.8)" />
-
+                <path
+                  d="M14,28a13.861,13.861,0,0,1-9.268-3.533l-.023.047-.721-.738L3.62,23.4l.012-.023a14,14,0,1,1,20.735,0l.012.023-.367.377-.722.738-.024-.045A13.855,13.855,0,0,1,14,28Zm0-9.58a10.5,10.5,0,0,0-1.368.092c-.085.012-.17.03-.252.047-.061.013-.124.026-.187.037l-.077.013c-.266.047-.54.095-.8.165-.108.029-.215.065-.318.1-.063.022-.125.043-.188.063l-.08.026c-.223.071-.454.144-.671.234-.125.05-.245.11-.362.168l-.146.072-.045.021c-.208.1-.423.2-.623.312-.131.074-.257.158-.379.239l-.106.07-.068.044c-.176.114-.359.232-.528.359-.137.1-.267.218-.393.327l-.054.047c-.174.15-.355.306-.519.47-.132.134-.258.277-.38.416l-.018.021c-.16.184-.3.35-.437.527-.12.161-.23.33-.337.494-.076.117-.146.238-.214.356a12.495,12.495,0,0,0,17.109,0l-.022-.037c-.061-.1-.125-.212-.192-.315-.1-.156-.214-.333-.338-.5-.141-.188-.293-.363-.436-.526-.113-.13-.253-.292-.4-.438-.161-.162-.337-.314-.517-.468l-.08-.069c-.118-.1-.24-.209-.368-.307-.183-.137-.379-.264-.568-.387l-.026-.017-.106-.07c-.125-.083-.251-.166-.381-.24-.207-.118-.429-.222-.643-.322l-.024-.011-.152-.074c-.116-.057-.235-.116-.356-.165-.214-.087-.438-.159-.656-.229l-.1-.031c-.066-.021-.132-.043-.2-.066-.1-.035-.2-.07-.309-.1-.264-.07-.538-.118-.8-.165l-.078-.014c-.063-.011-.126-.024-.187-.037-.082-.017-.167-.035-.252-.047A10.483,10.483,0,0,0,14,18.421Zm0-1.473a11.871,11.871,0,0,1,1.54.1c.1.013.192.033.284.052.069.014.139.028.209.04.34.058.672.118,1,.2.14.036.278.082.412.127l.151.05c.309.1.587.188.859.3.148.059.293.127.433.194l.13.061c.306.142.553.266.775.389.188.107.368.22.535.328.26.166.489.322.7.478.156.117.316.244.49.389.209.176.412.361.622.567.156.154.3.293.43.443.209.23.4.472.542.657l.051.066c.1.134.21.272.308.416.021.031.045.061.068.09a1.267,1.267,0,0,1,.085.117,12.525,12.525,0,1,0-19.24,0c.026-.04.056-.078.084-.114s.05-.064.073-.1c.1-.141.2-.278.3-.409l.046-.059c.2-.264.378-.478.555-.672.137-.152.281-.3.417-.43.215-.21.422-.4.635-.578.18-.15.332-.271.479-.381.208-.155.433-.31.709-.486.174-.111.346-.219.526-.319.274-.153.55-.285.783-.393l.112-.053c.144-.069.293-.14.445-.2.282-.113.578-.208.864-.3l.159-.052c.132-.044.265-.088.4-.124.331-.087.675-.148,1-.2.068-.012.137-.026.2-.039.094-.019.191-.039.288-.052A11.827,11.827,0,0,1,14,16.948Z"
+                  transform="translate(0 -0.001)"
+                />
+                <path
+                  d="M5.2,10.4a5.2,5.2,0,1,1,5.2-5.2A5.206,5.206,0,0,1,5.2,10.4Zm0-8.915A3.714,3.714,0,1,0,8.915,5.2,3.719,3.719,0,0,0,5.2,1.486Z"
+                  transform="translate(8.8 4.8)"
+                />
               </svg>
               <span>My account</span>
             </label>
@@ -71,9 +74,6 @@
           <div class="col-12 col-md nav__btn mw-md-fit-content flex-row align-items-center" v-if="btnlink">
             <a :href="btnlink" class="btn me-0" v-html="btntext"></a>
           </div>
-
-
-
         </div>
       </div>
       <div class="nav__menu--secondary" v-if="hasSecondarySlot">
@@ -105,13 +105,11 @@
           <div class="col mw-fit-content d-md-none flex-row align-items-center nav__menu-btn">
             <label for="showAccount">Account</label>
           </div>
-
         </div>
       </div>
       <div class="container">
         <slot name="account"></slot>
       </div>
-
     </div>
 
     <span class="nav__bg"></span>
@@ -119,95 +117,92 @@
 </template>
 
 <style lang="scss">
-@import "../../../assets/sass/components/nav.scss";
+  @import '../../../assets/sass/components/nav.scss';
 </style>
 
 <script>
-import nav from '../../../assets/ts/modules/nav'
-import Logo from '../../foundations/Logo/Logo.vue'
-import Input from '../../components/Input/Input.vue'
-
-
-export default {
-  components: {
-    Input,
-    Logo
-  },
-  name: 'Nav',
-  props: {
-    logo: {
-      type: String,
-      required: false
-    },
-    logotext: {
-      type: String,
-      required: false
-    },
-    logopath: {
-      type: String,
-      required: false
-    },
-    search: {
-      type: String,
-      required: false
-    },
-    btnlink: {
-      type: String,
-      required: false
+  import nav from '../../../assets/ts/modules/nav';
+  import Logo from '../../foundations/Logo/Logo.vue';
+  import Input from '../../components/Input/Input.vue';
+
+  export default {
+    components: {
+      Input,
+      Logo,
     },
-    btntext: {
-      type: String,
-      required: false
+    name: 'Nav',
+    props: {
+      logo: {
+        type: String,
+        required: false,
+      },
+      logotext: {
+        type: String,
+        required: false,
+      },
+      logopath: {
+        type: String,
+        required: false,
+      },
+      search: {
+        type: String,
+        required: false,
+      },
+      btnlink: {
+        type: String,
+        required: false,
+      },
+      btntext: {
+        type: String,
+        required: false,
+      },
+      propertylink: {
+        type: String,
+        required: false,
+      },
+      movebutlerlink: {
+        type: String,
+        required: false,
+      },
+      iamsoldlink: {
+        type: String,
+        required: false,
+      },
     },
-    propertylink: {
-      type: String,
-      required: false
+    data() {
+      return {
+        locationSave: '',
+      };
     },
-    movebutlerlink: {
-      type: String,
-      required: false
+    methods: {
+      subIsActive(input) {
+        const paths = Array.isArray(input) ? input : [input];
+        return paths.some((path) => {
+          return this.$route.path.indexOf(path) === 0; // current path starts with this path string
+        });
+      },
     },
-    iamsoldlink: {
-      type: String,
-      required: false
-    }
-  },
-  data () {
-    return {
-      locationSave: ''
-    }
-  },
-  methods: {
-    subIsActive (input) {
-      const paths = Array.isArray(input) ? input : [input]
-      return paths.some(path => {
-        return this.$route.path.indexOf(path) === 0 // current path starts with this path string
-      })
-    }
-  },
-  computed: {
-    hasLogoSlot() {
-      return !!this.$slots.logo
+    computed: {
+      hasLogoSlot() {
+        return !!this.$slots.logo;
+      },
+      hasSecondarySlot() {
+        return !!this.$slots.secondary;
+      },
+      hasSearchSlot() {
+        return !!this.$slots.search;
+      },
+      hasAccountSlot() {
+        return !!this.$slots.account;
+      },
+      isMarketplace() {
+        return false;
+      },
     },
-    hasSecondarySlot() {
-      return !!this.$slots.secondary
+    mounted() {
+      this.$nextTick(function () {
+        nav(this.$refs.wrapper);
+      });
     },
-    hasSearchSlot() {
-      return !!this.$slots.search
-    },
-    hasAccountSlot() {
-      return !!this.$slots.account
-    },
-    isMarketplace() {
-      return false;
-    }
-  },
-  mounted(){
-
-    this.$nextTick(function () {
-
-      nav(this.$refs.wrapper);
-    })
-  }
-}
+  };
 </script>

package/src/components/Nav-old/README.md

@@ -6,18 +6,17 @@
 
 ### Properties
 
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| logo | String | property | Update which logo is shown |
-| logotext | String | - | Optional logo text |
-| btnlink | String | - | Optional button can be added, used mainly for links relating to user accounts. |
-| btntext | String | - | Text used within the above button |
-
+| Option   | Type   | Default Value | Description                                                                    |
+| -------- | ------ | ------------- | ------------------------------------------------------------------------------ |
+| logo     | String | property      | Update which logo is shown                                                     |
+| logotext | String | -             | Optional logo text                                                             |
+| btnlink  | String | -             | Optional button can be added, used mainly for links relating to user accounts. |
+| btntext  | String | -             | Text used within the above button                                              |
 
 ### Slots
 
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
-| default | - | Populates the main nav area, use a ul.list-unstyled element  |
-| secondary | - |Populates the secondary nav area (top bar when on desktop), use a ul.list-unstyled element |
-| search | - | Populates the search featured area area |
+| Option    | Default Value | Description                                                                                |
+| --------- | ------------- | ------------------------------------------------------------------------------------------ |
+| default   | -             | Populates the main nav area, use a ul.list-unstyled element                                |
+| secondary | -             | Populates the secondary nav area (top bar when on desktop), use a ul.list-unstyled element |
+| search    | -             | Populates the search featured area area                                                    |

package/src/components/NoteFeed/NoteFeed.vue

@@ -2,7 +2,12 @@
   <div class="container note-feed mb-2">
     <span class="h3" v-html="title" v-if="title"></span>
 
-    <Table :fields="[{ key: 'date_added' },{ key: 'user' },{ key: 'note' }]" :items="itemsData" v-bind="$props" class="mb-0"></Table>
+    <Table
+      :fields="[{ key: 'date_added' }, { key: 'user' }, { key: 'note' }]"
+      :items="itemsData"
+      v-bind="$props"
+      class="mb-0"
+    ></Table>
     <form :action="action" :method="method" @submit.prevent="submitForm(...arguments)">
       <input type="hidden" :value="user" name="user" />
       <Input id="addNote" type="textarea" label="Add note" required class="mw-100"></Input>
@@ -12,68 +17,66 @@
 </template>
 
 <script>
-import Input from '../../components/Input/Input.vue'
-import Table from '../../components/Table/Table.vue'
-let tableProps = Table.props;
-tableProps.fields.required = false;
+  import Input from '../../components/Input/Input.vue';
+  import Table from '../../components/Table/Table.vue';
+  let tableProps = Table.props;
+  tableProps.fields.required = false;
 
+  export default {
+    components: {
+      Table,
+      Input,
+    },
+    data() {
+      return {
+        itemsData: [...this.items], // Redefine data to avoid bleeding of data to other components
+      };
+    },
+    methods: {
+      submitForm: function (event) {
+        console.log(this);
 
-export default {
-  components: {
-    Table,
-    Input
-  },
-  data () {
-    return {
-      itemsData: [...this.items] // Redefine data to avoid bleeding of data to other components
-    }
-  },
-  methods: {
-    submitForm: function(event){
-
-      console.log(this)
-
-      const data = new FormData(event.target);
+        const data = new FormData(event.target);
 
-      let today = new Date();
-      const yyyy = today.getFullYear();
-      let mm = today.getMonth() + 1; // Months start at 0!
-      let dd = today.getDate();
+        let today = new Date();
+        const yyyy = today.getFullYear();
+        let mm = today.getMonth() + 1; // Months start at 0!
+        let dd = today.getDate();
 
-      if (dd < 10) dd = '0' + dd;
-      if (mm < 10) mm = '0' + mm;
+        if (dd < 10) dd = '0' + dd;
+        if (mm < 10) mm = '0' + mm;
 
-      today = dd + '/' + mm + '/' + yyyy;
+        today = dd + '/' + mm + '/' + yyyy;
 
-      this.itemsData.unshift({
-        date_added: today,
-        user: data.get('user'),
-        note: data.get('addNote')
-      });
+        this.itemsData.unshift({
+          date_added: today,
+          user: data.get('user'),
+          note: data.get('addNote'),
+        });
 
-      this.$emit('formSubmitted',event);
-    }
-  },
-  name: 'NoteFeed',
-  props: {
-    user: {
-      type: String,
-      required: true
-    },
-    ...tableProps,
-    title: {
-      type: String,
-      required: false
+        this.$emit('formSubmitted', event);
+      },
     },
-    method: {
-      type: String,
-      required: false,
-      default: 'post'
+    name: 'NoteFeed',
+    props: {
+      user: {
+        type: String,
+        required: true,
+      },
+      ...tableProps,
+      title: {
+        type: String,
+        required: false,
+      },
+      method: {
+        type: String,
+        required: false,
+        default: 'post',
+      },
+      action: {
+        type: String,
+        required: false,
+      },
     },
-    action: {
-      type: String,
-      required: false
-    }
-  }
-}
+  };
 </script>