@tak-ps/vue-tabler 3.47.0 → 3.49.0

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v3.49.0
+
+- :rocket: Add ability to specify a search icon for TablerInput
+
+### v3.48.0
+
+- :rocket: Setup default stroke state
+
 ### v3.47.0
 
 - :rocket: Use data function to setup Enum current state

package/components/Alert.vue

@@ -3,8 +3,8 @@
     <div class='d-flex justify-content-center' :class='{
         "mt-4 mb-2": !compact
     }'>
-        <IconAlertTriangle v-if='compact' size='32' />
-        <IconAlertTriangle v-else size='48'/>
+        <IconAlertTriangle v-if='compact' :size='32' :stroke='1' />
+        <IconAlertTriangle v-else :size='48' :stroke='1'/>
     </div>
 
     <h3 class='pt-3 text-center' v-text='title'></h3>
@@ -17,8 +17,8 @@
     <template v-if='err.body || err.stack'>
         <div class="py-2 px-3">
             <div @click='open = !open' class='subheader d-flex align-items-center cursor-pointer'>
-                <IconChevronRight v-if='!open' size='24' class='cursor-pointer'/>
-                <IconChevronDown v-else size='24' class='cursor-pointer'/>
+                <IconChevronRight v-if='!open' :size='24' :stroke='1' class='cursor-pointer'/>
+                <IconChevronDown v-else :size='24' :stroke='1' class='cursor-pointer'/>
                 <span>Advanced</span>
             </div>
             <pre

package/components/Delete.vue

@@ -6,7 +6,7 @@
         </div>
     </template>
     <template v-else>
-        <IconTrash @click.stop.prevent='modal = true' :size='size' class='cursor-pointer'/>
+        <IconTrash @click.stop.prevent='modal = true' :size='size' :stroke='1' class='cursor-pointer'/>
     </template>
 
     <TablerModal v-if='modal'>
@@ -22,7 +22,7 @@
             <div @click='$emit("delete")' class="btn btn-danger">
                 <TablerLoading v-if='loading' :inline='true'/>
                 <template v-else>
-                    <IconTrash size='32'/><span class='mx-2' v-text='label'/>
+                    <IconTrash :size='32' :stroke='1'/><span class='mx-2' v-text='label'/>
                 </template>
             </div>
         </div>

package/components/Dropdown.vue

@@ -2,7 +2,7 @@
 <div class="dropdown">
     <div type="button" :id='id' data-bs-toggle="dropdown" aria-expanded="false">
         <slot>
-            <IconSettings size='32' class='cursor-pointer'/>
+            <IconSettings :size='32' :stoke='1' class='cursor-pointer'/>
         </slot>
     </div>
     <ul class="dropdown-menu w-100" :aria-labelledby='id'>

package/components/List.vue

@@ -14,7 +14,7 @@
             <span v-else style='padding-top: 6px;'>Select <span v-text='label'/></span>
 
             <div class='ms-auto'>
-                <IconSettings size='32' style='margin-top: 4px;'/>
+                <IconSettings :size='32' :stroke='1' style='margin-top: 4px;'/>
             </div>
         </div>
     </div>

package/components/None.vue

@@ -3,8 +3,8 @@
     <div class='d-flex justify-content-center' :class='{
         "mt-4 mb-2": !compact
     }'>
-        <IconNotesOff v-if='compact' size='32' />
-        <IconNotesOff v-else size='48'/>
+        <IconNotesOff v-if='compact' :size='32' :stroke='1' />
+        <IconNotesOff v-else :size='48' :stroke='1'/>
     </div>
 
     <div class='text-center' :class='{

package/components/Pager.vue

@@ -3,12 +3,12 @@
     <div>
         <template v-if='parseInt(total) <= parseInt(limit)'>
             <button @click='changePage(0)' class='btn mx-1' >
-                <IconHome size='32' class='icon'/>Home
+                <IconHome :size='32' :stroke='1' class='icon'/>Home
             </button>
         </template>
         <template v-else>
             <button @click='changePage(0)' class='btn mx-1' :class='{ "btn-primary": current === 0 }'>
-                <IconHome size='32' class='icon'/>Home
+                <IconHome :size='32' :stroke='1' class='icon'/>Home
             </button>
 
             <template v-if='end > 5 && current > 3'>

package/components/Schema.vue

@@ -46,7 +46,7 @@
                 <div class='d-flex'>
                     <label class='form-label' v-text='key'/>
                     <div class='ms-auto'>
-                        <IconPlus v-if='!disabled' @click='push(key)' size='32' class='cursor-pointer'/>
+                        <IconPlus v-if='!disabled' @click='push(key)' :size='32' :stroke='1' class='cursor-pointer'/>
                     </div>
                 </div>
 
@@ -54,7 +54,7 @@
                     <div class='d-flex'>
                         <div class='mx-2 my-2'>Entry <span v-text='i + 1'/></div>
                         <div class='ms-auto mx-2 my-2'>
-                            <IconTrash v-if='!disabled' @click='data[key].splice(i, 1)' size='32' class='cursor-pointer'/>
+                            <IconTrash v-if='!disabled' @click='data[key].splice(i, 1)' :size='32' :stroke='1' class='cursor-pointer'/>
                         </div>
                     </div>
 

package/components/input/Input.vue

@@ -3,17 +3,25 @@
     <TablerLabel :label='label' :description='description' :required='required'><slot/></TablerLabel>
     <div class='col-12'>
         <template v-if='!rows || rows <= 1'>
-            <input
-                :disabled='disabled'
-                v-model='current'
-                @keyup.enter='$emit("submit")'
-                :type='computed_type'
-                :class='{
-                    "is-invalid": errorstr
-                }'
-                class="form-control"
-                :placeholder='placeholder||label||""'
-            />
+            <div class='input-icon'>
+                <span v-if='icon' class="input-icon-addon">
+                    <IconSearch v-if='icon === "search"' :size='20' :stroke='1'/>
+                </span>
+                <input
+                    :disabled='disabled'
+                    v-model='current'
+                    @keyup.enter='$emit("submit")'
+                    :type='computed_type'
+                    :class='{
+                        "is-invalid": errorstr
+                    }'
+                    class="form-control"
+                    :placeholder='placeholder||label||""'
+                />
+                <span v-if='$slots.posticon' class="input-icon-addon">
+                    <slot name='prepost'/>
+                </span>
+            </div>
         </template>
         <template v-else>
             <textarea
@@ -37,6 +45,9 @@
 
 <script>
 import TablerLabel from '../internal/Label.vue';
+import {
+    IconSearch
+} from '@tabler/icons-vue';
 
 export default {
     name: 'TablerInput',
@@ -46,6 +57,9 @@ export default {
             type: [String, Number],
             required: true
         },
+        icon: {
+            type: String,
+        },
         required: {
             type: Boolean,
             default: false,
@@ -130,6 +144,7 @@ export default {
         }
     },
     components: {
+        IconSearch,
         TablerLabel
     }
 }

package/components/internal/Label.vue

@@ -1,7 +1,7 @@
 <template>
 <div class='col-12 d-flex my-1'>
     <span v-if='description' class='align-self-center'>
-        <IconInfoSquare @click='help = true' size='20' class='cursor-pointer'/>
+        <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'>

package/package.json

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