@tak-ps/vue-tabler 3.78.1 → 3.79.0

package/components/input/Input.vue

@@ -96,130 +96,131 @@
     </div>
 </template>
 
-<script>
-import TablerLabel from '../internal/Label.vue';
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import TablerLabel from '../internal/Label.vue'
 import {
     IconUser,
     IconLock,
     IconSearch
-} from '@tabler/icons-vue';
+} from '@tabler/icons-vue'
 
-export default {
-    name: 'TablerInput',
-    components: {
-        IconUser,
-        IconLock,
-        IconSearch,
-        TablerLabel
+const props = defineProps({
+    modelValue: {
+        type: [String, Number],
+        required: true
     },
-    props: {
-        modelValue: {
-            type: [String, Number],
-            required: true
-        },
-        autocomplete: {
-            type: String,
-            default: 'on'
-        },
-        autofocus: {
-            type: Boolean,
-            default: false
-        },
-        icon: {
-            type: String,
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        },
-        required: {
-            type: Boolean,
-            default: false,
-        },
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
-        description: {
-            type: String,
-            default: '',
-        },
-        rows: {
-            type: Number,
-            default: 1
-        },
-        wrap: {
-            type: String,
-            default: 'soft'
-        },
-        type: {
-            type: String,
-            default: 'text'
-        },
-        label: String,
-        placeholder: String,
-        error: String,
+    autocomplete: {
+        type: String,
+        default: 'on'
     },
-    emits: ['blur', 'focus', 'submit', 'update:modelValue'],
-    data: function() {
-        return {
-            help: false,
-            internal_error: '',
-            current: this.modelValue === undefined ? '' : this.modelValue
-        }
+    autofocus: {
+        type: Boolean,
+        default: false
     },
-    computed: {
-        errorstr: function() {
-            if (this.error) return this.error;
-            return this.internal_error;
-        },
-        computed_type: function() {
-            if (this.type === 'integer') return 'number';
-            return this.type;
-        }
+    icon: {
+        type: String,
+        default: ''
+    },
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    required: {
+        type: Boolean,
+        default: false,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    description: {
+        type: String,
+        default: '',
+    },
+    rows: {
+        type: Number,
+        default: 1
+    },
+    wrap: {
+        type: String,
+        default: 'soft'
+    },
+    type: {
+        type: String,
+        default: 'text'
+    },
+    label: {
+        type: String,
+        default: ''
+    },
+    placeholder: {
+        type: String,
+        default: ''
     },
-    watch: {
-        modelValue: function() {
-            if (this.current !== String(this.modelValue)) {
-                this.current = String(this.modelValue);
-            }
-        },
-        current: function() {
-            if (typeof this.modelValue === 'number' || this.type === 'number') {
-                const current = Number(this.current);
+    error: {
+        type: String,
+        default: ''
+    },
+})
+
+const emit = defineEmits(['blur', 'focus', 'submit', 'update:modelValue'])
+
+const textInput = ref(null)
+const internal_error = ref('')
+const current = ref(props.modelValue === undefined ? '' : props.modelValue)
 
-                if (isNaN(current)) {
-                    this.internal_error = 'Must be a number!';
-                } else if (current === this.modelValue) {
-                    this.internal_error = '';
-                    return;
-                } else {
-                    this.internal_error = '';
-                    this.$emit('update:modelValue', current);
-                }
-            } else if (this.type === 'integer') {
-                const current = parseInt(this.current);
+const errorstr = computed(() => {
+    if (props.error) return props.error
+    return internal_error.value
+})
+
+const computed_type = computed(() => {
+    if (props.type === 'integer') return 'number'
+    return props.type
+})
+
+watch(() => props.modelValue, (newValue) => {
+    if (current.value !== String(newValue)) {
+        current.value = String(newValue)
+    }
+})
 
-                if (isNaN(current)) {
-                    this.internal_error = 'Must be an integer!';
-                } else if (current === this.modelValue) {
-                    this.internal_error = '';
-                    return;
-                } else {
-                    this.internal_error = '';
-                    this.$emit('update:modelValue', current);
-                }
-            } else {
-                this.internal_error = '';
-                if (this.current === this.modelValue) return;
-                this.$emit('update:modelValue', this.current);
-            }
+watch(current, (newValue) => {
+    if (typeof props.modelValue === 'number' || props.type === 'number') {
+        const currentNum = Number(newValue)
+
+        if (isNaN(currentNum)) {
+            internal_error.value = 'Must be a number!'
+        } else if (currentNum === props.modelValue) {
+            internal_error.value = ''
+            return
+        } else {
+            internal_error.value = ''
+            emit('update:modelValue', currentNum)
         }
-    },
-    mounted: function() {
-        if (this.autofocus) {
-            this.$refs['text-input'].focus();
+    } else if (props.type === 'integer') {
+        const currentInt = parseInt(newValue)
+
+        if (isNaN(currentInt)) {
+            internal_error.value = 'Must be an integer!'
+        } else if (currentInt === props.modelValue) {
+            internal_error.value = ''
+            return
+        } else {
+            internal_error.value = ''
+            emit('update:modelValue', currentInt)
         }
+    } else {
+        internal_error.value = ''
+        if (newValue === props.modelValue) return
+        emit('update:modelValue', newValue)
+    }
+})
+
+onMounted(() => {
+    if (props.autofocus) {
+        textInput.value.focus()
     }
-}
+})
 </script>

package/components/input/Range.vue

@@ -25,65 +25,59 @@
     </div>
 </template>
 
-<script>
-import TablerLabel from '../internal/Label.vue';
+<script setup>
+import { ref, watch } from 'vue'
+import TablerLabel from '../internal/Label.vue'
 
-export default {
-    name: 'TablerRange',
-    components: {
-        TablerLabel
+const props = defineProps({
+    modelValue: {
+        type: Number,
+        required: true
     },
-    props: {
-        modelValue: {
-            type: Number,
-            required: true
-        },
-        autofocus: {
-            type: Boolean,
-            default: false
-        },
-        min: {
-            type: Number,
-            default: 0
-        },
-        max: {
-            type: Number,
-            default: 10
-        },
-        step: {
-            type: Number,
-            default: 1
-        },
-        required: {
-            type: Boolean,
-            default: false,
-        },
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
-        description: {
-            type: String,
-            default: '',
-        },
-        label: String,
+    autofocus: {
+        type: Boolean,
+        default: false
     },
-    emits: [
-        'blur',
-        'submit',
-        'update:modelValue'
-    ],
-    data: function() {
-        return {
-            help: false,
-            current: this.modelValue
-        }
+    min: {
+        type: Number,
+        default: 0
     },
-    watch: {
-        current: function() {
-            if (this.current === this.modelValue) return;
-            this.$emit('update:modelValue', Number(this.current));
-        }
-    }
-}
+    max: {
+        type: Number,
+        default: 10
+    },
+    step: {
+        type: Number,
+        default: 1
+    },
+    required: {
+        type: Boolean,
+        default: false,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    description: {
+        type: String,
+        default: '',
+    },
+    label: {
+        type: String,
+        default: ''
+    },
+})
+
+const emit = defineEmits([
+    'blur',
+    'submit',
+    'update:modelValue'
+])
+
+const current = ref(props.modelValue)
+
+watch(current, (newValue) => {
+    if (newValue === props.modelValue) return
+    emit('update:modelValue', Number(newValue))
+})
 </script>

package/components/input/Select.vue

@@ -23,41 +23,41 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'TablerSelect',
-    props: {
-        modelValue: {
-            type: String,
-            required: true,
-        },
-        default: {
-            type: String,
-            required: false
-        },
-        options: {
-            type: Array,
-            required: true
-        },
-    },
-    emits: [
-        'update:modelValue'
-    ],
-    data: function() {
-        return {
-            current: ''
-        }
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        required: true,
     },
-    watch: {
-        current: function() {
-            if (this.modelValue !== this.current) {
-                this.$emit('update:modelValue', this.current);
-            }
-        }
+    default: {
+        type: String,
+        default: ''
     },
-    mounted: function() {
-        if (!this.modelValue && this.default) this.current = this.default
-        else this.current = this.modelValue;
+    options: {
+        type: Array,
+        required: true
     },
-}
+})
+
+const emit = defineEmits([
+    'update:modelValue'
+])
+
+const current = ref('')
+
+watch(current, (newValue) => {
+    if (props.modelValue !== newValue) {
+        emit('update:modelValue', newValue)
+    }
+})
+
+onMounted(() => {
+    if (!props.modelValue && props.default) {
+        current.value = props.default
+    } else {
+        current.value = props.modelValue
+    }
+})
 </script>

package/components/input/TimeZone.vue

@@ -7,13 +7,13 @@
         :disabled='disabled'
         :required='required'
         :default='inverse.has(modelValue) ? inverse.get(modelValue) : "No TimeZone"'
-        @change='$emit("update:modelValue", map.get($event.target.value).tzCode)'
-        @submit='$emit("submit")'
-        @blur='$emit("blur")'
+        @update:model-value='emit("update:modelValue", map.get($event).tzCode)'
+        @submit='emit("submit")'
+        @blur='emit("blur")'
     />
 </template>
 
-<script>
+<script setup>
 import TablerEnum from './Enum.vue'
 
 const tzs = [
@@ -443,57 +443,48 @@ const tzs = [
     { label:"Pacific/Kiritimati (GMT+14:00)", "tzCode":"Pacific/Kiritimati", }
 ]
 
-export default {
-    name: 'TablerTimeZone',
-    components: {
-        TablerEnum
+defineProps({
+    modelValue: {
+        type: String,
+        required: true
     },
-    props: {
-        modelValue: {
-            type: String,
-            required: true
-        },
-        autofocus: {
-            type: Boolean,
-            default: false
-        },
-        description: {
-            type: String,
-            default: ''
-        },
-        required: {
-            type: Boolean
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        label: {
-            type: String,
-            default: 'Default Timezone'
-        },
+    autofocus: {
+        type: Boolean,
+        default: false
     },
-    emits: [
-        'submit',
-        'blur',
-        'update:modelValue'
-    ],
-    data: function() {
-        const map = new Map();
-        const inverse = new Map();
+    description: {
+        type: String,
+        default: ''
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    label: {
+        type: String,
+        default: 'Default Timezone'
+    },
+})
+
+const emit = defineEmits([
+    'submit',
+    'blur',
+    'update:modelValue'
+])
 
-        map.set('No TimeZone', { tzCode: '' });
-        for (const tz of tzs) {
-            map.set(tz.label, tz);
-            inverse.set(tz.tzCode, tz.label);
-        }
+// Create maps for timezone conversion
+const map = new Map()
+const inverse = new Map()
 
-        return {
-            map,
-            inverse,
-            internal: this.modelValue,
-            timezones: ['No TimeZone'].concat(tzs.map((tz) => tz.label))
-        }
-    }
+map.set('No TimeZone', { tzCode: '' })
+for (const tz of tzs) {
+    map.set(tz.label, tz)
+    inverse.set(tz.tzCode, tz.label)
 }
+
+const timezones = ['No TimeZone'].concat(tzs.map((tz) => tz.label))
 </script>

package/components/input/Toggle.vue

@@ -20,61 +20,55 @@
     </div>
 </template>
 
-<script>
-import TablerLabel from '../internal/Label.vue';
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import TablerLabel from '../internal/Label.vue'
 
-export default {
-    name: 'TablerToggle',
-    components: {
-        TablerLabel
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        required: true
     },
-    props: {
-        modelValue: {
-            type: Boolean,
-            required: true
-        },
-        autofocus: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        required: {
-            type: Boolean,
-            default: false
-        },
-        description: {
-            type: String,
-            default: ''
-        },
-        label: {
-            type: String,
-            default: ''
-        }
+    autofocus: {
+        type: Boolean,
+        default: false
     },
-    emits: [
-        'blur',
-        'submit',
-        'update:modelValue'
-    ],
-    data: function() {
-        return {
-            current: this.modelValue
-        }
+    disabled: {
+        type: Boolean,
+        default: false
     },
-    watch: {
-        modelValue: function() {
-            this.current = this.modelValue;
-        },
-        current: function() {
-            if (this.current === this.modelValue) return;
-            this.$emit('update:modelValue', this.current);
-        }
+    required: {
+        type: Boolean,
+        default: false
     },
-    mounted: function() {
-        this.current = this.modelValue;
+    description: {
+        type: String,
+        default: ''
+    },
+    label: {
+        type: String,
+        default: ''
     }
-}
+})
+
+const emit = defineEmits([
+    'blur',
+    'submit',
+    'update:modelValue'
+])
+
+const current = ref(props.modelValue)
+
+watch(() => props.modelValue, (newValue) => {
+    current.value = newValue
+})
+
+watch(current, (newValue) => {
+    if (newValue === props.modelValue) return
+    emit('update:modelValue', newValue)
+})
+
+onMounted(() => {
+    current.value = props.modelValue
+})
 </script>

package/lib.js

@@ -14,6 +14,7 @@ export { default as TablerButton } from './components/Button.vue'
 export { default as TablerRefreshButton } from './components/RefreshButton.vue'
 export { default as TablerIconButton } from './components/IconButton.vue'
 export { default as TablerDropdown } from './components/Dropdown.vue'
+export { default as TablerSlidedown } from './components/Slidedown.vue'
 export { default as TablerPager } from './components/Pager.vue'
 export { default as TablerNone } from './components/None.vue'
 export { default as TablerError } from './components/Err.vue'

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "3.78.1",
+    "version": "3.79.0",
     "lib": "lib.js",
     "module": "lib.js",
     "description": "Tabler UI components for Vue3",