Add Icons

dfpc-coe · Jul 16, 2024 · 1db3452 · 1db3452
1 parent c2fa6bd
commit 1db3452
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,10 @@
 
 ## Version History
 
+### v3.51.1
+
+- :rocket: Add `lock` and `user` icons to TablerInput
+
 ### v3.51.0
 
 - :bug: Fix broken required (`*`) on input forms  ow that we don't use `form-label` due to it's margins

diff --git a/components/input/Input.vue b/components/input/Input.vue
@@ -11,6 +11,8 @@
             <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'
@@ -23,8 +25,8 @@
                     class="form-control"
                     :placeholder='placeholder||label||""'
                 />
-                <span v-if='$slots.posticon' class="input-icon-addon">
-                    <slot name='prepost'/>
+                <span v-if='loading' class="input-icon-addon">
+                    <div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
                 </span>
             </div>
         </template>
@@ -51,6 +53,8 @@
 <script>
 import TablerLabel from '../internal/Label.vue';
 import {
+    IconUser,
+    IconLock,
     IconSearch
 } from '@tabler/icons-vue';
 
@@ -65,6 +69,10 @@ export default {
         icon: {
             type: String,
         },
+        loading: {
+            type: Boolean,
+            default: false
+        },
         required: {
             type: Boolean,
             default: false,
@@ -149,6 +157,8 @@ export default {
         }
     },
     components: {
+        IconUser,
+        IconLock,
         IconSearch,
         TablerLabel
     }