From 1c6bc56e08b72473d288c83b2566e087f67a1686 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Mon, 17 Apr 2023 15:58:21 +1000
Subject: [PATCH] added prepend and append slots

---
 resources/js/components/SMInput.vue | 163 +++++++++++++++++++++-------
 1 file changed, 121 insertions(+), 42 deletions(-)

diff --git a/resources/js/components/SMInput.vue b/resources/js/components/SMInput.vue
index 9311caa..b4f3af3 100644
--- a/resources/js/components/SMInput.vue
+++ b/resources/js/components/SMInput.vue
@@ -1,20 +1,34 @@
 <template>
     <div
         :class="[
-            'input-control-item',
+            'input-control-group',
             { 'input-active': active, 'input-invalid': feedbackInvalid },
         ]">
-        <label class="input-label" v-bind="{ for: id }">{{ label }}</label>
-        <ion-icon class="invalid-icon" name="alert-circle-outline"></ion-icon>
-        <input
-            :type="props.type"
-            class="input-control"
-            :disabled="disabled"
-            v-bind="{ id: id }"
-            v-model="value"
-            @focus="handleFocus"
-            @blur="handleBlur"
-            @input="handleInput" />
+        <div class="input-control-row">
+            <div v-if="slots.prepend" class="input-control-prepend">
+                <slot name="prepend"></slot>
+            </div>
+            <div class="input-control-item">
+                <label class="input-label" v-bind="{ for: id }">{{
+                    label
+                }}</label>
+                <ion-icon
+                    class="invalid-icon"
+                    name="alert-circle-outline"></ion-icon>
+                <input
+                    :type="props.type"
+                    class="input-control"
+                    :disabled="disabled"
+                    v-bind="{ id: id }"
+                    v-model="value"
+                    @focus="handleFocus"
+                    @blur="handleBlur"
+                    @input="handleInput" />
+            </div>
+            <div v-if="slots.append" class="input-control-append">
+                <slot name="append"></slot>
+            </div>
+        </div>
         <div v-if="slots.default || feedbackInvalid" class="input-help">
             <span v-if="feedbackInvalid" class="input-invalid">
                 {{ feedbackInvalid }}
@@ -65,6 +79,11 @@ const props = defineProps({
         default: false,
         required: false,
     },
+    button: {
+        type: String,
+        default: "",
+        required: false,
+    },
 });
 
 const slots = useSlots();
@@ -165,38 +184,98 @@ const handleInput = (event: Event) => {
 </script>
 
 <style lang="scss">
-.input-control-item {
+.input-control-group {
     margin-bottom: 16px;
-    position: relative;
 
-    .input-label {
-        position: absolute;
-        display: block;
-        transform-origin: top left;
-        transform: translate(16px, 16px) scale(1);
-        transition: all 0.1s ease-in-out;
-        color: var(--base-color-darker);
-        pointer-events: none;
-    }
-
-    .invalid-icon {
-        position: absolute;
-        display: none;
-        right: 10px;
-        top: 14px;
-        color: var(--danger-color);
-        font-size: 28px;
-    }
-
-    .input-control {
-        display: block;
-        width: 100%;
+    .input-control-row {
+        display: flex;
+        align-items: center;
         margin-bottom: 8px;
-        padding: 20px 16px 8px 16px;
-        border: 1px solid var(--base-color-darker);
-        border-radius: 8px;
-        background-color: var(--base-color-light);
-        color: var(--base-color-text);
+
+        .input-control-prepend {
+            p {
+                display: block;
+                color: var(--base-color-text);
+                background-color: var(--base-color-dark);
+                border-width: 1px 0 1px 1px;
+                border-style: solid;
+                border-color: var(--base-color-darker);
+                border-radius: 8px 0 0 8px;
+                padding: 16px 16px 16px 16px;
+            }
+
+            .button {
+                border-width: 1px 0 1px 1px;
+                border-style: solid;
+                border-color: var(--base-color-darker);
+                border-radius: 8px 0 0 8px;
+            }
+
+            & + .input-control-item .input-control {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+        }
+
+        .input-control-append {
+            p {
+                display: block;
+                color: var(--base-color-text);
+                background-color: var(--base-color-dark);
+                border-width: 1px 1px 1px 0;
+                border-style: solid;
+                border-color: var(--base-color-darker);
+                border-radius: 0 8px 8px 0;
+                padding: 16px 16px 16px 16px;
+            }
+
+            .button {
+                border-width: 1px 1px 1px 0;
+                border-style: solid;
+                border-color: var(--base-color-darker);
+                border-radius: 0 8px 8px 0;
+            }
+        }
+
+        &:has(.input-control-item + .input-control-append)
+            > .input-control-item
+            .input-control {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        .input-control-item {
+            flex: 1;
+
+            .input-label {
+                position: absolute;
+                display: block;
+                transform-origin: top left;
+                transform: translate(16px, 16px) scale(1);
+                transition: all 0.1s ease-in-out;
+                color: var(--base-color-darker);
+                pointer-events: none;
+            }
+
+            .invalid-icon {
+                position: absolute;
+                display: none;
+                right: 10px;
+                top: 14px;
+                color: var(--danger-color);
+                font-size: 28px;
+            }
+
+            .input-control {
+                display: block;
+                width: 100%;
+                padding: 20px 16px 8px 16px;
+                border: 1px solid var(--base-color-darker);
+                border-radius: 8px;
+                background-color: var(--base-color-light);
+                color: var(--base-color-text);
+            }
+        }
     }
 
     .input-help {
@@ -215,7 +294,7 @@ const handleInput = (event: Event) => {
     }
 
     &.input-active {
-        .input-label {
+        .input-control-item .input-label {
             transform: translate(16px, 6px) scale(0.8);
         }
     }