@iamproperty/components 5.5.1-beta-2 → 5.5.1-beta-5

package/package.json

@@ -5,7 +5,7 @@
     "name": "iamproperty"
   },
   "private": false,
-  "version": "5.5.1-beta-2",
+  "version": "5.5.1-beta-5",
   "scripts": {
     "bootstrap": "copyfiles -u 2 node_modules/bootstrap/**/* assets/bootstrap",
     "dev": "npm run copy && node local_modules/delete-assets.js && vite --host",

package/src/components/InlineEdit/InlineEdit.vue

@@ -0,0 +1,45 @@
+<script setup >
+import { ref, onMounted, defineEmits} from "vue";
+
+const emit = defineEmits(['save','autosave']);
+const $component = ref(null);
+
+onMounted(() => {
+
+  $component.value.addEventListener('inline-edit-save',function(event){
+
+    emit('save', event)
+  });
+
+  $component.value.addEventListener('inline-edit-autosave',function(event){
+
+    emit('autosave', event)
+  });
+});
+</script>
+
+<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/InlineEdit/README.md

@@ -0,0 +1,7 @@
+```
+<InlineEdit id="inlineEdit" data-autosave>
+  <label >Optional label
+    <input type="text" name="text" value="Placeholder text" />
+  </label>
+</InlineEdit>
+```

package/src/components/Multiselect/Multiselect.vue

@@ -0,0 +1,24 @@
+<template>
+  <iam-multiselect><slot></slot></iam-multiselect>
+</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);
+      });
+    })
+
+  }
+}
+</script>

package/src/components/Multiselect/README.md

@@ -0,0 +1,12 @@
+```
+<Multiselect>
+  <span class="label" slot="label">Users</span>
+  <label class="tag"><input type="checkbox" name="tags" value="IT James Lambert" />James Lambert</label>
+  <label class="tag"><input type="checkbox" name="tags" value="IT Amanda Knight"/>Amanda Knight</label>
+  <label class="tag"><input type="checkbox" name="tags" value="IT Brian Lord"/>Brian Lord</label>
+  <label class="tag"><input type="checkbox" name="tags" value="Claire Lane"/>Claire Lane</label>
+  <label class="tag"><input type="checkbox" name="tags" value="John Smith"/>John Smith</label>
+  <label class="tag"><input type="checkbox" name="tags" value="James Brown"/>James Brown</label>
+  <label class="tag"><input type="checkbox" name="tags" value="Sarah Brown"/>Sarah Brown</label>
+</Multiselect>
+```

package/src/components/Search/README.md

@@ -0,0 +1,11 @@
+```
+<Search>
+<label>Search existing transactions
+  <span>
+    <input type="text" name="client" autocomplete="off" aria-autocomplete="none" required />
+    <span class="suffix fa-regular fa-search"></span>
+  </span>
+</label>
+<datalist id="properties"></datalist>
+</Search>
+```

package/src/components/Search/Search.vue

@@ -11,7 +11,7 @@ export default {
 
     this.$nextTick(function () {
 
-      import(`../../../assets/js/components/search/search.component${import.meta.env.DEV == "development" ? '.min' : ''}.js`).then(module => {
+      import(`../../../assets/js/components/search/search.component.min.js`).then(module => {
         
         if (!window.customElements.get(`iam-search`))
           window.customElements.define(`iam-search`, module.default);

package/src/components/Table/Table.vue

@@ -1,5 +1,6 @@
 <template>
   <iam-table >
+    <slot name="before"></slot>
     <table v-if="fields">
       <thead>
         <tr>
@@ -42,7 +43,7 @@ export default {
 
     this.$nextTick(function () {
        
-      import(`../../../assets/js/components/table/table.component.min.js`).then(module => {
+      import(`../../../assets/js/components/table/table.component.js`).then(module => {
 
         if (!window.customElements.get(`iam-table`))
           window.customElements.define(`iam-table`, module.default);