@tak-ps/vue-tabler 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -10,6 +10,18 @@
 
 ## Version History
 
+### v2.2.0
+
+- :tada: Add toggle & list components
+
+### v2.1.2
+
+- :bug: Remove href in TablerSelect
+
+### v2.1.1
+
+- :bug: Fix directive name
+
 ### v2.1.0
 
 - :rocket: Add `inline` prop to loading mode

package/components/Input.vue

@@ -22,7 +22,6 @@ export default {
     props: {
         modelValue: {
             type: String,
-            default: '',
             required: true
         },
         disabled: {

package/components/List.vue

@@ -0,0 +1,69 @@
+<template>
+<div class="dropdown">
+    <label class='form-label' v-text='label'></label>
+    <div type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
+        <TablerInput :disabled='disabled' placeholder='Name' v-model='filter'/>
+    </div>
+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+        <div class='m-1'>
+            <div @click='select(ele)' :key='ele.id' v-for='ele in list[listkey]'>
+                <div class="d-flex align-items-center my-1 cursor-pointer" v-text='ele[namekey]'></div>
+            </div>
+        </div>
+    </ul>
+</div>
+</template>
+
+<script>
+import TablerInput from './Input.vue';
+
+export default {
+    name: 'UserDropdown',
+    props: {
+        url: String,
+        listkey: String,
+        namekey: String,
+        label: {
+            type: String,
+            default: ''
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        limit: {
+            type: Number,
+            default: 10
+        },
+    },
+    data: function() {
+        return {
+            filter: '',
+            list: {}
+        }
+    },
+    watch: {
+        filter: async function() {
+            await this.fetchList();
+        }
+    },
+    mounted: async function() {
+        await this.fetchList();
+    },
+    methods: {
+        select: function(ele) {
+            this.filter = ele[this.namekey];
+            this.$emit("selected", ele)
+        },
+        fetchList: async function() {
+            const url = window.stdurl(this.url);
+            url.searchParams.append('filter', this.filter);
+            url.searchParams.append('limit', this.limit);
+            this.list = await window.std(url);
+        }
+    },
+    components: {
+        TablerInput
+    }
+}
+</script>

package/components/Loading.vue

@@ -6,7 +6,7 @@
     <template v-if='inline'>
         <div class='d-flex'>
             <div class="spinner-border" role="status"></div>
-            <div v-id='desc && desc.length' class='mx-3 align-self-center' v-text='desc'></div>
+            <div v-if='desc && desc.length' class='mx-3 align-self-center' v-text='desc'></div>
         </div>
     </template>
     <template v-else='inline'>

package/components/Select.vue

@@ -10,7 +10,6 @@
             :class='{
                 active: value === current
             }'
-            href="#"
             v-text='value'
         ></a>
     </div>

package/components/Toggle.vue

@@ -0,0 +1,38 @@
+<template>
+<div>
+    <div class='d-flex align-items-center'>
+        <label class='form-label' v-text='label'/>
+        <label class="ms-auto form-check form-switch pt-2">
+            <input v-model='current' :disabled='disabled' class="form-check-input" type="checkbox">
+        </label>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    name: 'TablerToggle',
+    props: {
+        modelValue: {
+            type: String,
+            required: ''
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        label: String
+    },
+    data: function() {
+        return {
+            current: this.modelValue
+        }
+    },
+    watch: {
+        current: function() {
+            if (this.current === this.modelValue) return;
+            this.$emit('update:modelValue', this.current);
+        }
+    },
+}
+</script>

package/lib.js

@@ -1,9 +1,10 @@
 import TablerError from './components/Err.vue'
 import TablerSelect from './components/Select.vue'
+import TablerList from './components/List.vue'
 import TablerModal from './components/Modal.vue'
 import TablerProgress from './components/Progress.vue'
 import TablerLoading from './components/Loading.vue'
-
+import TablerToggle from './components/Toggle.vue'
 import TablerInput from './components/Input.vue'
 
 export {
@@ -12,5 +13,7 @@ export {
     TablerLoading,
     TablerModal,
     TablerProgress,
-    TablerInput
+    TablerToggle,
+    TablerInput,
+    TablerList
 }