@iamproperty/components 7.4.0 → 7.5.1--beta1

package/src/components/FilterCard/FilterCard.vue

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

package/src/components/Filterlist/Filterlist.vue

@@ -1,3 +1,20 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'filterlist';
+
+  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-filterlist>

package/src/components/Header/Header.vue

@@ -1,3 +1,31 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  const props = defineProps({
+    title: {
+      type: String,
+      required: true,
+    },
+    image: {
+      type: String,
+      required: false,
+    },
+  });
+
+  const component = 'header';
+
+  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-header :image="image">
@@ -6,32 +34,3 @@
     <slot></slot>
   </iam-header>
 </template>
-
-<script>
-  // Load web components
-
-  export default {
-    name: 'Header',
-    props: {
-      title: {
-        type: String,
-        required: true,
-      },
-      image: {
-        type: String,
-        required: false,
-      },
-    },
-    mounted() {
-      this.$nextTick(function () {
-        import(`../../../assets/js/components/header/header.component.min.js`)
-          .then((module) => {
-            if (!window.customElements.get(`iam-header`)) window.customElements.define(`iam-header`, module.default);
-          })
-          .catch((err) => {
-            console.log(err.message);
-          });
-      });
-    },
-  };
-</script>

package/src/components/InlineEdit/InlineEdit.vue

@@ -4,7 +4,18 @@
   const emit = defineEmits(['save', 'autosave']);
   const $component = ref(null);
 
+  const component = 'inline-edit';
+
   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('inline-edit-save', function (event) {
       emit('save', event);
     });
@@ -18,22 +29,3 @@
 <template>
   <iam-inline-edit ref="$component"><slot></slot></iam-inline-edit>
 </template>
-
-<script>
-  export default {
-    components: {},
-    name: 'Inline Edit',
-    mounted() {
-      this.$nextTick(function () {
-        import(`../../../assets/js/components/inline-edit/inline-edit.component.js`)
-          .then((module) => {
-            if (!window.customElements.get(`iam-inline-edit`))
-              window.customElements.define(`iam-inline-edit`, module.default);
-          })
-          .catch((err) => {
-            console.log(err.message);
-          });
-      });
-    },
-  };
-</script>

package/src/components/Menu/Menu.vue

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

package/src/components/Milestones/Milestone.vue

@@ -1,27 +1,22 @@
-<template>
-  <iam-milestone class="milestone">
-    <slot></slot>
-  </iam-milestone>
-</template>
-
-<style lang="scss">
-</style>
-
-<script>
-  export default {
-    name: 'Milestone',
-    props: {},
-    mounted() {
-      this.$nextTick(function () {
-        import(`../../../assets/js/components/milestone/milestone.component.min.js`)
-          .then((module) => {
-            if (!window.customElements.get(`iam-milestone`))
-              window.customElements.define(`iam-milestone`, module.default);
-          })
-          .catch((err) => {
-            console.log(err.message);
-          });
-      });
-    },
-  };
-</script>
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'milestone';
+
+  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-milestone class="milestone">
+    <slot></slot>
+  </iam-milestone>
+</template>

package/src/components/Milestones/MilestoneGroup.vue

@@ -1,27 +1,24 @@
-<template>
-  <iam-milestone-group>
-    <slot></slot>
-  </iam-milestone-group>
-</template>
-
-<style lang="scss">
-</style>
-
-<script>
-  export default {
-    name: 'MilestoneGroup',
-    props: {},
-    mounted() {
-      this.$nextTick(function () {
-        import(`../../../assets/js/components/milestone-group/milestone-group.component.min.js`)
-          .then((module) => {
-            if (!window.customElements.get(`iam-milestone-group`))
-              window.customElements.define(`iam-milestone-group`, module.default);
-          })
-          .catch((err) => {
-            console.log(err.message);
-          });
-      });
-    },
-  };
-</script>
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'milestone-group';
+
+  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-milestone-group>
+    <slot></slot>
+  </iam-milestone-group>
+</template>
+
+<style lang="scss"></style>

package/src/components/Multiselect/Multiselect.vue

@@ -1,21 +1,20 @@
-<template>
-  <iam-multiselect><slot></slot></iam-multiselect>
-</template>
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'multiselect';
 
-<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);
-          });
+  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-multiselect><slot></slot></iam-multiselect>
+</template>

package/src/components/Nav/Nav.vue

@@ -1,24 +1,22 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'nav';
+
+  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-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);
-          });
-      });
-    },
-    methods: {},
-  };
-</script>

package/src/components/Notification/Notification.vue

@@ -1,20 +1,22 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'notification';
+
+  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-notification>
     <slot></slot>
   </iam-notification>
 </template>
-
-<script>
-  import iamNotification from '../../../assets/js/components/notification/notification.component.js';
-
-  export default {
-    name: 'Notification',
-    props: {},
-    created() {
-      this.$nextTick(function () {
-        if (!window.customElements.get('iam-notification'))
-          window.customElements.define('iam-notification', iamNotification);
-      });
-    },
-  };
-</script>

package/src/components/Pagination/Pagination.vue

@@ -1,20 +1,20 @@
-<template>
-  <iam-pagination> </iam-pagination>
-</template>
+<script setup>
+  import { onMounted } from 'vue';
 
-<script>
-  import iamPagination from '../../../assets/js/components/pagination/pagination.component.min.js';
-  import { ucfirst, unsnake } from '../../helpers/strings';
+  const component = 'pagination';
 
-  export default {
-    name: 'Pagination',
-    props: {},
-    computed: {},
-    created() {
-      this.$nextTick(function () {
-        if (!window.customElements.get('iam-pagination')) window.customElements.define('iam-pagination', iamPagination);
+  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);
       });
-    },
-    updated() {},
-  };
+  });
 </script>
+
+<template>
+  <iam-pagination> </iam-pagination>
+</template>

package/src/components/PasswordIndicator/PasswordIndicator.vue

@@ -0,0 +1,23 @@
+<script setup>
+  import { onMounted } from 'vue';
+
+  const component = 'password-indicator';
+
+  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-password-indicator>
+    <slot></slot>
+  </iam-password-indicator>
+</template>

package/src/components/Rank/Rank.vue

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

package/src/components/Rankings/Rankings.vue

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

package/src/components/RecordCard/RecordCard.vue

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

package/src/components/Search/Search.vue

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