@iamproperty/components 7.4.0 → 7.5.0

package/package.json

@@ -5,7 +5,7 @@
     "name": "iamproperty"
   },
   "private": false,
-  "version": "7.4.0",
+  "version": "7.5.0",
   "scripts": {
     "temp": "rollup --environment COMPONENT:carousel --config rollup-component.config.cjs --sourcemap",
     "reload": "vite --host",
@@ -46,13 +46,13 @@
     "prettier": "prettier assets/ts assets/sass src docs --write"
   },
   "dependencies": {
-    "eslint": "^9.21.0",
+    "eslint": "^9.33.0",
     "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-vue": "^10.0.0",
+    "eslint-plugin-vue": "^10.4.0",
     "globals": "^15.14.0",
     "js-cookie": "^3.0.5",
-    "prettier": "^3.4.2",
-    "typescript-eslint": "^8.26.1",
+    "prettier": "^3.6.2",
+    "typescript-eslint": "^8.39.1",
     "unplugin-vue-markdown": "^28.3.1"
   },
   "devDependencies": {
@@ -98,7 +98,7 @@
     "tslib": "^2.8.1",
     "typescript": "^5.8.2",
     "url": "^0.11.0",
-    "vite": "^6.2.0",
+    "vite": "^7.1.5",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "vue-tsc": "^2.2.8"

package/src/components/Accordion/Accordion.vue

@@ -1,28 +1,19 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  onMounted(() => {
+    import(`../../../assets/js/components/accordion/accordion.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-accordion`)) window.customElements.define(`iam-accordion`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  });
+</script>
+
 <template>
   <iam-accordion ref="wrapper">
     <slot></slot>
   </iam-accordion>
 </template>
-
-<style lang="scss">
-  //@import "../../../assets/sass/components/accordion.scss";
-</style>
-
-<script>
-  export default {
-    name: 'Accordion',
-    props: {},
-    mounted() {
-      this.$nextTick(function () {
-        import(`../../../assets/js/components/accordion/accordion.component.min.js`)
-          .then((module) => {
-            if (!window.customElements.get(`iam-accordion`))
-              window.customElements.define(`iam-accordion`, module.default);
-          })
-          .catch((err) => {
-            console.log(err.message);
-          });
-      });
-    },
-  };
-</script>

package/src/components/Accordion/AccordionItem.vue

@@ -1,3 +1,30 @@
+<script setup>
+  import { safeID } from '../../helpers/strings.js';
+
+  const props = defineProps({
+    title: {
+      type: String,
+      required: true,
+    },
+    badge: {
+      type: [Number, String],
+      required: false,
+    },
+    badgecolour: {
+      type: String,
+      required: false,
+      default: 'light',
+    },
+    lazy: {
+      type: Boolean,
+      required: false,
+    },
+  });
+
+  const createID = function (title) {
+    return `${safeID(title)}`;
+  };
+</script>
 <template>
   <details :id="createID(title)">
     <summary>
@@ -6,46 +33,3 @@
     <slot></slot>
   </details>
 </template>
-
-<script>
-  import { safeID } from '../../helpers/strings.js';
-
-  export default {
-    name: 'AccordionItem',
-    props: {
-      title: {
-        type: String,
-        required: true,
-      },
-      titlecolour: {
-        type: String,
-        required: false,
-      },
-      badge: {
-        type: [Number, String],
-        required: false,
-      },
-      badgecolour: {
-        type: String,
-        required: false,
-        default: 'light',
-      },
-      lazy: {
-        type: Boolean,
-        required: false,
-      },
-    },
-    computed: {
-      createID() {
-        return (summary) => {
-          return `${safeID(summary)}`;
-        };
-      },
-    },
-    data() {
-      return {
-        show: this.lazy ? false : true,
-      };
-    },
-  };
-</script>

package/src/components/Actionbar/Actionbar.vue

@@ -1,24 +1,22 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'actionbar';
+
+  onMounted(() => {
+    import(`../../../assets/js/components/${component}/${component}.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-${component}`))
+          window.customElements.define(`iam-${component}`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  });
+</script>
+
 <template>
   <iam-actionbar>
     <slot></slot>
   </iam-actionbar>
 </template>
-
-<script>
-  export default {
-    name: 'Actionbar',
-    props: {},
-    mounted() {
-      this.$nextTick(function () {
-        import(`../../../assets/js/components/actionbar/actionbar.component.min.js`)
-          .then((module) => {
-            if (!window.customElements.get(`iam-actionbar`))
-              window.customElements.define(`iam-actionbar`, module.default);
-          })
-          .catch((err) => {
-            console.log(err.message);
-          });
-      });
-    },
-  };
-</script>

package/src/components/AddressLookup/AddressLookup.vue

@@ -1,23 +1,22 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'address-lookup';
+
+  onMounted(() => {
+    import(`../../../assets/js/components/${component}/${component}.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-${component}`))
+          window.customElements.define(`iam-${component}`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  });
+</script>
+
 <template>
   <iam-address-lookup>
     <slot></slot>
   </iam-address-lookup>
 </template>
-
-<script>
-  export default {
-    name: 'Address Lookup',
-    mounted() {
-      this.$nextTick(function () {
-        import(`../../../assets/js/components/address-lookup/address-lookup.component.min.js`)
-          .then((module) => {
-            if (!window.customElements.get(`iam-address-lookup`))
-              window.customElements.define(`iam-address-lookup`, module.default);
-          })
-          .catch((err) => {
-            console.log(err.message);
-          });
-      });
-    },
-  };
-</script>

package/src/components/AdvancedSelect/AdvancedSelect.vue

@@ -1,23 +1,22 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'advanced-select';
+
+  onMounted(() => {
+    import(`../../../assets/js/components/${component}/${component}.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-${component}`))
+          window.customElements.define(`iam-${component}`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  });
+</script>
+
 <template>
   <iam-advanced-select>
     <slot></slot>
   </iam-advanced-select>
 </template>
-
-<script>
-  export default {
-    name: 'AdvancedSelect',
-    mounted() {
-      this.$nextTick(function () {
-        import(/* @vite-ignore */ `../../../assets/js/components/advanced-select/advanced-select.component.min.js`)
-          .then((module) => {
-            if (!window.customElements.get(`iam-advanced-select`))
-              window.customElements.define(`iam-advanced-select`, module.default);
-          })
-          .catch((err) => {
-            console.log(err.message);
-          });
-      });
-    },
-  };
-</script>

package/src/components/AppliedFilters/AppliedFilters.vue

@@ -1,24 +1,22 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'applied-filters';
+
+  onMounted(() => {
+    import(`../../../assets/js/components/${component}/${component}.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-${component}`))
+          window.customElements.define(`iam-${component}`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  });
+</script>
 <template>
   <!-- Custom element -->
   <iam-applied-filters>
     <slot></slot>
   </iam-applied-filters>
 </template>
-
-<script>
-  export default {
-    name: 'Applied Filter',
-    mounted() {
-      this.$nextTick(function () {
-        import(`../../../assets/js/components/applied-filters/applied-filters.component.js`)
-          .then((module) => {
-            if (!window.customElements.get(`iam-applied-filters`))
-              window.customElements.define(`iam-applied-filters`, module.default);
-          })
-          .catch((err) => {
-            console.log(err.message);
-          });
-      });
-    },
-  };
-</script>

package/src/components/Banner/Banner.vue

@@ -1,3 +1,21 @@
+<script setup>
+  const props = defineProps({
+    title: {
+      type: String,
+      required: true,
+    },
+    image: {
+      type: String,
+      required: false,
+    },
+    background: {
+      type: String,
+      default: 'light',
+      required: false,
+    },
+  });
+</script>
+
 <template>
   <div class="container">
     <div :class="'bg-' + background + ' mb-4'">
@@ -15,24 +33,3 @@
     </div>
   </div>
 </template>
-
-<script>
-  export default {
-    name: 'Header',
-    props: {
-      title: {
-        type: String,
-        required: true,
-      },
-      image: {
-        type: String,
-        required: false,
-      },
-      background: {
-        type: String,
-        default: 'light',
-        required: false,
-      },
-    },
-  };
-</script>

package/src/components/BarChart/BarChart.vue

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

package/src/components/Calendar/Calendar.vue

@@ -1,26 +1,20 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  onMounted(() => {
+    import(`../../../assets/js/components/calendar/calendar.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-calendar`)) window.customElements.define(`iam-calendar`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  });
+</script>
+
 <template>
   <!-- Custom element -->
   <iam-calendar>
     <slot></slot>
   </iam-calendar>
 </template>
-
-<script>
-  // Load web components
-
-  export default {
-    name: 'Calendar',
-    mounted() {
-      this.$nextTick(function () {
-        import(`../../../assets/js/components/calendar/calendar.component.min.js`)
-          .then((module) => {
-            if (!window.customElements.get(`iam-calendar`))
-              window.customElements.define(`iam-calendar`, module.default);
-          })
-          .catch((err) => {
-            console.log(err.message);
-          });
-      });
-    },
-  };
-</script>

package/src/components/Card/Card.vue

@@ -1,22 +1,22 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'card';
+
+  onMounted(() => {
+    import(`../../../assets/js/components/${component}/${component}.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-${component}`))
+          window.customElements.define(`iam-${component}`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  });
+</script>
+
 <template>
   <iam-card>
     <slot></slot>
   </iam-card>
 </template>
-
-<script>
-  export default {
-    name: 'Card',
-    created() {
-      this.$nextTick(function () {
-        import(`../../../assets/js/components/card/card.component.js`)
-          .then((module) => {
-            if (!window.customElements.get(`iam-card`)) window.customElements.define(`iam-card`, module.default);
-          })
-          .catch((err) => {
-            console.log(err.message);
-          });
-      });
-    },
-  };
-</script>

package/src/components/Carousel/Carousel.vue

@@ -1,26 +1,23 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'carousel';
+
+  onMounted(() => {
+    import(`../../../assets/js/components/${component}/${component}.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-${component}`))
+          window.customElements.define(`iam-${component}`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  });
+</script>
+
 <template>
   <!-- Custom element -->
   <iam-carousel>
     <slot></slot>
   </iam-carousel>
 </template>
-
-<script>
-  // Load web components
-
-  export default {
-    name: 'Header',
-    mounted() {
-      this.$nextTick(function () {
-        import(`../../../assets/js/components/carousel/carousel.component.min.js`)
-          .then((module) => {
-            if (!window.customElements.get(`iam-carousel`))
-              window.customElements.define(`iam-carousel`, module.default);
-          })
-          .catch((err) => {
-            console.log(err.message);
-          });
-      });
-    },
-  };
-</script>

package/src/components/Content/Content.vue

@@ -1,23 +1,22 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'content';
+
+  onMounted(() => {
+    import(`../../../assets/js/components/${component}/${component}.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-${component}`))
+          window.customElements.define(`iam-${component}`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  });
+</script>
+
 <template>
   <iam-content>
     <slot></slot>
   </iam-content>
 </template>
-
-<script>
-  export default {
-    name: 'Content',
-    props: {},
-    mounted() {
-      this.$nextTick(function () {
-        import(`../../../assets/js/components/content/content.component.js`)
-          .then((module) => {
-            if (!window.customElements.get(`iam-content`)) window.customElements.define(`iam-content`, module.default);
-          })
-          .catch((err) => {
-            console.log(err.message);
-          });
-      });
-    },
-  };
-</script>

package/src/components/DarkMode/DarkMode.vue

@@ -0,0 +1,19 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  onMounted(() => {
+    import(`../../../assets/js/components/darkmode/darkmode.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-dark-mode`)) window.customElements.define(`iam-dark-mode`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  });
+</script>
+
+<template>
+  <iam-dark-mode>
+    <slot></slot>
+  </iam-dark-mode>
+</template>

package/src/components/DoughnutChart/DoughnutChart.vue

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

package/src/components/FileUpload/FileUpload.vue

@@ -4,7 +4,29 @@
   const emit = defineEmits(['elementChange', 'empty', 'fileRemoved']);
   const $component = ref(null);
 
+  const component = 'fileupload';
+
+  const props = defineProps({
+    maxfilesize: {
+      type: Number,
+      required: false,
+    },
+    maxfiles: {
+      type: Number,
+      required: false,
+    },
+  });
+
   onMounted(() => {
+    import(`../../../assets/js/components/${component}/${component}.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-${component}`))
+          window.customElements.define(`iam-${component}`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+
     $component.value.addEventListener('elementChange', function (event) {
       emit('elementChange', event);
     });
@@ -20,31 +42,3 @@
 <template>
   <iam-fileupload ref="$component"><slot></slot></iam-fileupload>
 </template>
-
-<script>
-  export default {
-    name: 'FileUpload',
-    props: {
-      maxfilesize: {
-        type: Number,
-        required: false,
-      },
-      maxfiles: {
-        type: Number,
-        required: false,
-      },
-    },
-    created() {
-      this.$nextTick(function () {
-        import(`../../../assets/js/components/fileupload/fileupload.component.min.js`)
-          .then((module) => {
-            if (!window.customElements.get(`iam-fileupload`))
-              window.customElements.define(`iam-fileupload`, module.default);
-          })
-          .catch((err) => {
-            console.log(err.message);
-          });
-      });
-    },
-  };
-</script>