@tak-ps/vue-tabler 3.52.0 → 3.53.0

package/components/input/Enum.vue

@@ -1,17 +1,28 @@
 <template>
-<div class='row'>
-    <TablerLabel
-        v-if='label'
-        :label='label'
-        :description='description'
-        :required='required'
-    ><slot/></TablerLabel>
-    <div class='col-12'>
-        <select v-model='current' :disabled='disabled' class='form-select'>
-            <option :key='option' v-for='option in options' :value="option" v-text='option'></option>
-        </select>
+    <div class='row'>
+        <TablerLabel
+            v-if='label'
+            :label='label'
+            :description='description'
+            :required='required'
+        >
+            <slot />
+        </TablerLabel>
+        <div class='col-12'>
+            <select
+                v-model='current'
+                :disabled='disabled'
+                class='form-select'
+            >
+                <option
+                    v-for='option in options'
+                    :key='option'
+                    :value='option'
+                    v-text='option'
+                />
+            </select>
+        </div>
     </div>
-</div>
 </template>
 
 <script>
@@ -19,6 +30,9 @@ import TablerLabel from '../internal/Label.vue';
 
 export default {
     name: 'TablerEnum',
+    components: {
+        TablerLabel
+    },
     props: {
         modelValue: {
             type: String,
@@ -46,6 +60,9 @@ export default {
         },
         label: String,
     },
+    emits: [
+        'update:modelValue'
+    ],
     data: function() {
         const data = {
             current: ''
@@ -67,9 +84,6 @@ export default {
             if (this.current === this.modelValue) return;
             this.$emit('update:modelValue', this.current);
         }
-    },
-    components: {
-        TablerLabel
     }
 }
 </script>

package/components/input/Input.vue

@@ -1,53 +1,82 @@
 <template>
-<div class='row'>
-    <TablerLabel
-        v-if='label'
-        :label='label'
-        :description='description'
-        :required='required'
-    ><slot/></TablerLabel>
-    <div class='col-12'>
-        <template v-if='!rows || rows <= 1'>
-            <div class='input-icon'>
-                <span v-if='icon' class="input-icon-addon">
-                    <IconSearch v-if='icon === "search"' :size='20' :stroke='1'/>
-                    <IconLock v-if='icon === "lock"' :size='20' :stroke='1'/>
-                    <IconUser v-if='icon === "user"' :size='20' :stroke='1'/>
-                </span>
-                <input
-                    :disabled='disabled'
+    <div class='row'>
+        <TablerLabel
+            v-if='label'
+            :label='label'
+            :description='description'
+            :required='required'
+        >
+            <slot />
+        </TablerLabel>
+        <div class='col-12'>
+            <template v-if='!rows || rows <= 1'>
+                <div class='input-icon'>
+                    <span
+                        v-if='icon'
+                        class='input-icon-addon'
+                    >
+                        <IconSearch
+                            v-if='icon === "search"'
+                            :size='20'
+                            :stroke='1'
+                        />
+                        <IconLock
+                            v-if='icon === "lock"'
+                            :size='20'
+                            :stroke='1'
+                        />
+                        <IconUser
+                            v-if='icon === "user"'
+                            :size='20'
+                            :stroke='1'
+                        />
+                    </span>
+                    <input
+                        v-model='current'
+                        :disabled='disabled'
+                        :autocomplete='autocomplete'
+                        :type='computed_type'
+                        :class='{
+                            "is-invalid": errorstr
+                        }'
+                        class='form-control'
+                        :placeholder='placeholder||label||""'
+                        @keyup.enter='$emit("submit")'
+                    >
+                    <span
+                        v-if='loading'
+                        class='input-icon-addon'
+                    >
+                        <div
+                            class='spinner-border spinner-border-sm text-secondary'
+                            role='status'
+                        />
+                    </span>
+                </div>
+            </template>
+            <template v-else>
+                <textarea
                     v-model='current'
-                    @keyup.enter='$emit("submit")'
+                    :disabled='disabled'
+                    :autocomplete='autocomplete'
+                    :wrap='wrap'
+                    :rows='rows'
                     :type='computed_type'
                     :class='{
                         "is-invalid": errorstr
                     }'
-                    class="form-control"
+                    class='form-control'
                     :placeholder='placeholder||label||""'
+                    @keyup.enter='$emit("submit")'
                 />
-                <span v-if='loading' class="input-icon-addon">
-                    <div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
-                </span>
-            </div>
-        </template>
-        <template v-else>
-            <textarea
-                :disabled='disabled'
-                :wrap='wrap'
-                :rows='rows'
-                v-model='current'
-                @keyup.enter='$emit("submit")'
-                :type='computed_type'
-                :class='{
-                    "is-invalid": errorstr
-                }'
-                class="form-control"
-                :placeholder='placeholder||label||""'
+            </template>
+            <div
+                v-if='errorstr'
+                class='invalid-feedback'
+                v-text='errorstr'
             />
-        </template>
-        <div v-if='errorstr' v-text='errorstr' class="invalid-feedback"></div>
+        </div>
     </div>
-</div>
 </template>
 
 <script>
@@ -60,12 +89,21 @@ import {
 
 export default {
     name: 'TablerInput',
-    emits: ['submit', 'update:modelValue'],
+    components: {
+        IconUser,
+        IconLock,
+        IconSearch,
+        TablerLabel
+    },
     props: {
         modelValue: {
             type: [String, Number],
             required: true
         },
+        autocomplete: {
+            type: String,
+            default: 'on'
+        },
         icon: {
             type: String,
         },
@@ -101,6 +139,7 @@ export default {
         placeholder: String,
         error: String,
     },
+    emits: ['submit', 'update:modelValue'],
     data: function() {
         return {
             help: false,
@@ -155,12 +194,6 @@ export default {
                 this.$emit('update:modelValue', this.current);
             }
         }
-    },
-    components: {
-        IconUser,
-        IconLock,
-        IconSearch,
-        TablerLabel
     }
 }
 </script>

package/components/input/Range.vue

@@ -1,19 +1,25 @@
 <template>
-<div class='row'>
-    <TablerLabel :label='label' :description='description' :required='required'><slot/></TablerLabel>
-    <div class='col-12'>
-        <input
-            :disabled='disabled'
-            :value='modelValue'
-            @input='event => current = event.target.value'
-            type='range'
-            class='form-range'
-            :min='min'
-            :max='max'
-            :step='step'
+    <div class='row'>
+        <TablerLabel
+            :label='label'
+            :description='description'
+            :required='required'
         >
+            <slot />
+        </TablerLabel>
+        <div class='col-12'>
+            <input
+                :disabled='disabled'
+                :value='modelValue'
+                type='range'
+                class='form-range'
+                :min='min'
+                :max='max'
+                :step='step'
+                @input='event => current = event.target.value'
+            >
+        </div>
     </div>
-</div>
 </template>
 
 <script>
@@ -21,6 +27,9 @@ import TablerLabel from '../internal/Label.vue';
 
 export default {
     name: 'TablerRange',
+    components: {
+        TablerLabel
+    },
     props: {
         modelValue: {
             type: Number,
@@ -52,6 +61,9 @@ export default {
         },
         label: String,
     },
+    emits: [
+        'update:modelValue'
+    ],
     data: function() {
         return {
             help: false,
@@ -63,9 +75,6 @@ export default {
             if (this.current === this.modelValue) return;
             this.$emit('update:modelValue', Number(this.current));
         }
-    },
-    components: {
-        TablerLabel
     }
 }
 </script>

package/components/input/Select.vue

@@ -1,19 +1,26 @@
 <template>
-<div class="dropdown">
-    <a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-text='current'></a>
-    <div class="dropdown-menu dropdown-menu-end">
+    <div class='dropdown'>
         <a
-            :key='option'
-            v-for='option in options'
-            @click='current = option'
-            class="dropdown-item"
-            :class='{
-                active: option === current
-            }'
-            v-text='option'
-        ></a>
+            class='dropdown-toggle text-muted'
+            href='#'
+            data-bs-toggle='dropdown'
+            aria-haspopup='true'
+            aria-expanded='false'
+            v-text='current'
+        />
+        <div class='dropdown-menu dropdown-menu-end'>
+            <a
+                v-for='option in options'
+                :key='option'
+                class='dropdown-item'
+                :class='{
+                    active: option === current
+                }'
+                @click='current = option'
+                v-text='option'
+            />
+        </div>
     </div>
-</div>
 </template>
 
 <script>
@@ -33,6 +40,9 @@ export default {
             required: true
         },
     },
+    emits: [
+        'update:modelValue'
+    ],
     data: function() {
         return {
             current: ''

package/components/input/TimeZone.vue

@@ -1,13 +1,13 @@
 <template>
-<TablerEnum
-    :label='label'
-    :options='Array.from(timezones)'
-    :description='description'
-    :disabled='disabled'
-    :required='required'
-    :default='inverse.has(modelValue) ? inverse.get(modelValue) : "No TimeZone"'
-    v-on:change='$emit("update:modelValue", map.get($event.target.value).tzCode)'
-/>
+    <TablerEnum
+        :label='label'
+        :options='Array.from(timezones)'
+        :description='description'
+        :disabled='disabled'
+        :required='required'
+        :default='inverse.has(modelValue) ? inverse.get(modelValue) : "No TimeZone"'
+        @change='$emit("update:modelValue", map.get($event.target.value).tzCode)'
+    />
 </template>
 
 <script>
@@ -442,13 +442,17 @@ const tzs = [
 
 export default {
     name: 'TablerTimeZone',
+    components: {
+        TablerEnum
+    },
     props: {
         modelValue: {
             type: String,
             required: true
         },
         description: {
-            type: String
+            type: String,
+            default: ''
         },
         required: {
             type: Boolean
@@ -462,6 +466,9 @@ export default {
             default: 'Default Timezone'
         },
     },
+    emits: [
+        'update:modelValue'
+    ],
     data: function() {
         const map = new Map();
         const inverse = new Map();
@@ -478,9 +485,6 @@ export default {
             internal: this.modelValue,
             timezones: ['No TimeZone'].concat(tzs.map((tz) => tz.label))
         }
-    },
-    components: {
-        TablerEnum
     }
 }
 </script>

package/components/input/Toggle.vue

@@ -1,11 +1,20 @@
 <template>
-<div>
-    <TablerLabel :label='label' :required='required' :description='description'>
-        <label class='form-switch'>
-            <input v-model='current' :disabled='disabled' class="form-check-input" type="checkbox">
-        </label>
-    </TablerLabel>
-</div>
+    <div>
+        <TablerLabel
+            :label='label'
+            :required='required'
+            :description='description'
+        >
+            <label class='form-switch'>
+                <input
+                    v-model='current'
+                    :disabled='disabled'
+                    class='form-check-input'
+                    type='checkbox'
+                >
+            </label>
+        </TablerLabel>
+    </div>
 </template>
 
 <script>
@@ -13,6 +22,9 @@ import TablerLabel from '../internal/Label.vue';
 
 export default {
     name: 'TablerToggle',
+    components: {
+        TablerLabel
+    },
     props: {
         modelValue: {
             type: Boolean,
@@ -35,14 +47,14 @@ export default {
             default: ''
         }
     },
+    emits: [
+        'update:modelValue'
+    ],
     data: function() {
         return {
             current: this.modelValue
         }
     },
-    mounted: function() {
-        this.current = this.modelValue;
-    },
     watch: {
         modelValue: function() {
             this.current = this.modelValue;
@@ -52,8 +64,8 @@ export default {
             this.$emit('update:modelValue', this.current);
         }
     },
-    components: {
-        TablerLabel
+    mounted: function() {
+        this.current = this.modelValue;
     }
 }
 </script>

package/components/internal/Label.vue

@@ -1,22 +1,38 @@
 <template>
-<div class='col-12 d-flex my-1'>
-    <span v-if='description' class='align-self-center'>
-        <IconInfoSquare @click='help = true' :size='20' :stroke='1' class='cursor-pointer'/>
-        <Help v-if='help' @click='help = false' :label='label || placeholder' :description='description'/>
-    </span>
-    <div class='align-self-center'>
-        <div
-            v-if='label'
-            class="px-2"
+    <div class='col-12 d-flex my-1'>
+        <span
+            v-if='description'
+            class='align-self-center'
         >
-            <span v-text='label'/>
-            <span v-if='required' class='text-red mx-1'>*</span>
+            <IconInfoSquare
+                :size='20'
+                :stroke='1'
+                class='cursor-pointer'
+                @click='help = true'
+            />
+            <Help
+                v-if='help'
+                :label='label || placeholder'
+                :description='description'
+                @click='help = false'
+            />
+        </span>
+        <div class='align-self-center'>
+            <div
+                v-if='label'
+                class='px-2'
+            >
+                <span v-text='label' />
+                <span
+                    v-if='required'
+                    class='text-red mx-1'
+                >*</span>
+            </div>
+        </div>
+        <div class='ms-auto align-self-center'>
+            <slot />
         </div>
     </div>
-    <div class='ms-auto align-self-center'>
-        <slot/>
-    </div>
-</div>
 </template>
 
 <script>
@@ -27,6 +43,10 @@ import Help from '../Help.vue';
 
 export default {
     name: 'TablerInternalLabel',
+    components: {
+        Help,
+        IconInfoSquare
+    },
     props: {
         required: {
             type: Boolean,
@@ -36,16 +56,15 @@ export default {
             type: String,
             default: '',
         },
-        label: String,
+        label: {
+            type: String,
+            required: true
+        }
     },
     data: function() {
         return {
             help: false,
         }
-    },
-    components: {
-        Help,
-        IconInfoSquare
     }
 }
 </script>

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "3.52.0",
+    "version": "3.53.0",
     "lib": "lib.js",
     "module": "lib.js",
     "description": "Tabler UI components for Vue3",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
-        "lint": "eslint lib.js components/*.vue components/**/*.vue"
+        "lint": "eslint lib.js components/"
     },
     "repository": {
         "type": "git",
@@ -25,8 +25,9 @@
     },
     "devDependencies": {
         "@babel/eslint-parser": "^7.22.15",
+        "@typescript-eslint/parser": "^8.8.1",
         "@vue/cli-plugin-babel": "^5.0.8",
-        "eslint": "^8.50.0",
+        "eslint": "^9.12.0",
         "eslint-plugin-vue": "^9.17.0"
     }
 }