@tak-ps/vue-tabler 3.87.4 → 4.1.0

package/components/input/Enum.vue

@@ -27,52 +27,37 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, watch } from 'vue'
 import TablerLabel from '../internal/Label.vue'
 
-const props = defineProps({
-    modelValue: {
-        type: String,
-        required: true
-    },
-    autofocus: {
-        type: Boolean,
-        default: false
-    },
-    default: {
-        type: String,
-        default: ''
-    },
-    required: {
-        type: Boolean,
-        default: false
-    },
-    description: {
-        type: String,
-        default: ''
-    },
-    options: {
-        type: Array,
-        required: true
-    },
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-    label: {
-        type: String,
-        default: ''
-    },
-})
+export interface EnumProps {
+    modelValue: string;
+    autofocus?: boolean;
+    default?: string;
+    required?: boolean;
+    description?: string;
+    options: string[];
+    disabled?: boolean;
+    label?: string;
+}
+
+const props = withDefaults(defineProps<EnumProps>(), {
+    autofocus: false,
+    default: '',
+    required: false,
+    description: '',
+    disabled: false,
+    label: ''
+});
 
-const emit = defineEmits([
-    'blur',
-    'update:modelValue'
-])
+const emit = defineEmits<{
+    (e: 'blur'): void;
+    (e: 'update:modelValue', value: string): void;
+}>();
 
 // Initialize current value
-const current = ref('')
+const current = ref<string>('')
 if (!props.modelValue && props.default) {
     current.value = props.default
 } else {

package/components/input/FileInput.vue

@@ -41,56 +41,41 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import TablerLabel from '../internal/Label.vue'
 
-const props = defineProps({
-    modelValue: {
-        type: [String, Number],
-        required: true
-    },
-    autofocus: {
-        type: Boolean,
-        default: false
-    },
-    loading: {
-        type: Boolean,
-        default: false
-    },
-    required: {
-        type: Boolean,
-        default: false,
-    },
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-    accept: {
-        type: String,
-        default: ''
-    },
-    description: {
-        type: String,
-        default: '',
-    },
-    label: {
-        type: String,
-        default: ''
-    },
-    placeholder: {
-        type: String,
-        default: ''
-    },
-    error: {
-        type: String,
-        default: ''
-    },
-})
+export interface FileInputProps {
+    modelValue: string | number;
+    autofocus?: boolean;
+    loading?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    accept?: string;
+    description?: string;
+    label?: string;
+    placeholder?: string;
+    error?: string;
+}
+
+const props = withDefaults(defineProps<FileInputProps>(), {
+    autofocus: false,
+    loading: false,
+    required: false,
+    disabled: false,
+    accept: '',
+    description: '',
+    label: '',
+    placeholder: '',
+    error: ''
+});
 
-defineEmits(['blur', 'change'])
+defineEmits<{
+    (e: 'blur'): void;
+    (e: 'change', event: Event): void;
+}>();
 
-const textInput = ref(null)
+const textInput = ref<HTMLInputElement | null>(null)
 const internal_error = ref('')
 
 const errorstr = computed(() => {
@@ -99,7 +84,7 @@ const errorstr = computed(() => {
 })
 
 onMounted(() => {
-    if (props.autofocus) {
+    if (props.autofocus && textInput.value) {
         textInput.value.focus()
     }
 })

package/components/input/Input.vue

@@ -18,17 +18,17 @@
                         <IconSearch
                             v-if='icon === "search"'
                             :size='20'
-                            :stroke='1'
+                            stroke='1'
                         />
                         <IconLock
                             v-else-if='icon === "lock"'
                             :size='20'
-                            :stroke='1'
+                            stroke='1'
                         />
                         <IconUser
                             v-else-if='icon === "user"'
                             :size='20'
-                            :stroke='1'
+                            stroke='1'
                         />
                         <slot
                             v-else-if='$slots.icon'
@@ -75,7 +75,7 @@
                         >
                             <IconEye
                                 :size='20'
-                                :stroke='1'
+                                stroke='1'
                             />
                         </a>
                         <a
@@ -88,7 +88,7 @@
                         >
                             <IconEyeOff
                                 :size='20'
-                                :stroke='1'
+                                stroke='1'
                             />
                         </a>
                     </span>
@@ -147,82 +147,60 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue'
 import TablerLabel from '../internal/Label.vue'
 import {
-    IconUser,
-    IconCircleXFilled,
-    IconLock,
-    IconSearch,
     IconEye,
-    IconEyeOff
-} from '@tabler/icons-vue'
+    IconEyeOff,
+    IconSearch,
+    IconLock,
+    IconUser
+} from '@tabler/icons-vue';
 
-const props = defineProps({
-    modelValue: {
-        type: [String, Number],
-        required: true
-    },
-    autocomplete: {
-        type: String,
-        default: 'on'
-    },
-    autofocus: {
-        type: Boolean,
-        default: false
-    },
-    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: ''
-    },
-    error: {
-        type: String,
-        default: ''
-    },
-})
+export interface InputProps {
+    modelValue?: string | number;
+    autofocus?: boolean;
+    loading?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    autocomplete?: string;
+    description?: string;
+    icon?: string;
+    rows?: number;
+    wrap?: string;
+    type?: string;
+    label?: string;
+    placeholder?: string;
+    error?: string;
+}
+
+const props = withDefaults(defineProps<InputProps>(), {
+    autofocus: false,
+    loading: false,
+    required: false,
+    disabled: false,
+    autocomplete: 'off',
+    description: '',
+    icon: '',
+    rows: 1,
+    wrap: 'soft',
+    type: 'text',
+    label: '',
+    placeholder: '',
+    error: ''
+});
 
-const emit = defineEmits(['blur', 'focus', 'submit', 'update:modelValue'])
+const emit = defineEmits<{
+    (e: 'blur'): void;
+    (e: 'focus'): void;
+    (e: 'submit'): void;
+    (e: 'update:modelValue', value: string | number): void;
+}>();
 
-const textInput = ref(null)
+const textInput = ref<HTMLInputElement | HTMLTextAreaElement | null>(null)
 const internal_error = ref('')
-const current = ref(props.modelValue === undefined ? '' : props.modelValue)
+const current = ref<string>(props.modelValue === undefined ? '' : String(props.modelValue))
 
 const passwordVisible = ref(false);
 
@@ -261,7 +239,7 @@ watch(current, (newValue) => {
 
         if (isNaN(currentInt)) {
             internal_error.value = 'Must be an integer!'
-        } else if (currentInt === props.modelValue) {
+        } else if (currentInt === Number(props.modelValue)) {
             internal_error.value = ''
             return
         } else {

package/components/input/Range.vue

@@ -17,7 +17,7 @@
                 :min='min'
                 :max='max'
                 :step='step'
-                @input='event => current = event.target.value'
+                @input='event => current = Number((event.target as HTMLInputElement).value)'
                 @keyup.enter='$emit("submit")'
                 @blur='$emit("blur")'
             >
@@ -25,54 +25,38 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, watch } from 'vue'
 import TablerLabel from '../internal/Label.vue'
 
-const props = defineProps({
-    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: {
-        type: String,
-        default: ''
-    },
-})
+export interface RangeProps {
+    modelValue: number;
+    autofocus?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    required?: boolean;
+    disabled?: boolean;
+    description?: string;
+    label?: string;
+}
+
+const props = withDefaults(defineProps<RangeProps>(), {
+    autofocus: false,
+    min: 0,
+    max: 10,
+    step: 1,
+    required: false,
+    disabled: false,
+    description: '',
+    label: ''
+});
 
-const emit = defineEmits([
-    'blur',
-    'submit',
-    'update:modelValue'
-])
+const emit = defineEmits<{
+    (e: 'blur'): void;
+    (e: 'submit'): void;
+    (e: 'update:modelValue', value: number): void;
+}>();
 
 const current = ref(props.modelValue)
 

package/components/input/Select.vue

@@ -23,27 +23,22 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
 
-const props = defineProps({
-    modelValue: {
-        type: String,
-        required: true,
-    },
-    default: {
-        type: String,
-        default: ''
-    },
-    options: {
-        type: Array,
-        required: true
-    },
-})
+export interface SelectProps {
+    modelValue: string;
+    default?: string;
+    options: string[];
+}
+
+const props = withDefaults(defineProps<SelectProps>(), {
+    default: ''
+});
 
-const emit = defineEmits([
-    'update:modelValue'
-])
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: string): void;
+}>();
 
 const current = ref('')
 

package/components/input/TimeZone.vue

@@ -6,16 +6,25 @@
         :autofocus='autofocus'
         :disabled='disabled'
         :required='required'
-        :default='inverse.has(modelValue) ? inverse.get(modelValue) : "No TimeZone"'
+        :model-value='inverse.has(modelValue) ? inverse.get(modelValue) : "No TimeZone"'
         @update:model-value='emit("update:modelValue", map.get($event).tzCode)'
         @submit='emit("submit")'
         @blur='emit("blur")'
     />
 </template>
 
-<script setup>
+<script setup lang="ts">
 import TablerEnum from './Enum.vue'
 
+export interface TimeZoneProps {
+    modelValue: string;
+    autofocus?: boolean;
+    description?: string;
+    required?: boolean;
+    disabled?: boolean;
+    label?: string;
+}
+
 const tzs = [
     { label:"Pacific/Midway (GMT-11:00)", "tzCode":"Pacific/Midway", },
     { label:"Pacific/Niue (GMT-11:00)", "tzCode":"Pacific/Niue", },
@@ -443,38 +452,19 @@ const tzs = [
     { label:"Pacific/Kiritimati (GMT+14:00)", "tzCode":"Pacific/Kiritimati", }
 ]
 
-defineProps({
-    modelValue: {
-        type: String,
-        required: true
-    },
-    autofocus: {
-        type: Boolean,
-        default: false
-    },
-    description: {
-        type: String,
-        default: ''
-    },
-    required: {
-        type: Boolean,
-        default: false
-    },
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    label: {
-        type: String,
-        default: 'Default Timezone'
-    },
-})
+withDefaults(defineProps<TimeZoneProps>(), {
+    autofocus: false,
+    description: '',
+    required: false,
+    disabled: false,
+    label: 'Default Timezone'
+});
 
-const emit = defineEmits([
-    'submit',
-    'blur',
-    'update:modelValue'
-])
+const emit = defineEmits<{
+    (e: 'submit'): void;
+    (e: 'blur'): void;
+    (e: 'update:modelValue', value: string): void;
+}>();
 
 // Create maps for timezone conversion
 const map = new Map()

package/components/input/Toggle.vue

@@ -20,42 +20,32 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
 import TablerLabel from '../internal/Label.vue'
 
-const props = defineProps({
-    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: ''
-    }
-})
+export interface ToggleProps {
+    modelValue: boolean;
+    autofocus?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    description?: string;
+    label?: string;
+}
+
+const props = withDefaults(defineProps<ToggleProps>(), {
+    autofocus: false,
+    disabled: false,
+    required: false,
+    description: '',
+    label: ''
+});
 
-const emit = defineEmits([
-    'blur',
-    'submit',
-    'update:modelValue'
-])
+const emit = defineEmits<{
+    (e: 'blur'): void;
+    (e: 'submit'): void;
+    (e: 'update:modelValue', value: boolean): void;
+}>();
 
 const current = ref(props.modelValue)
 

package/components/internal/Label.vue

@@ -8,9 +8,8 @@
                 <template #default>
                     <IconInfoSquare
                         :size='20'
-                        :stroke='1'
+                        stroke='1'
                         class='cursor-pointer'
-                        @click='help = true'
                     />
                 </template>
                 <template #dropdown>
@@ -50,25 +49,21 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {
     IconInfoSquare
 } from '@tabler/icons-vue';
 
 import Dropdown from '../Dropdown.vue';
 
-const props = defineProps({
-    required: {
-        type: Boolean,
-        default: false,
-    },
-    description: {
-        type: String,
-        default: '',
-    },
-    label: {
-        type: String,
-        required: true
-    }
+export interface LabelProps {
+    required?: boolean;
+    description?: string;
+    label: string;
+}
+
+const props = withDefaults(defineProps<LabelProps>(), {
+    required: false,
+    description: '',
 });
 </script>