merge select type

resources/js/components/SMInput.vue

@@ -29,14 +29,14 @@
             @blur="handleBlur"
             @keydown="handleKeydown" />
         <textarea
-            v-if="type == 'textarea'"
+            v-else-if="type == 'textarea'"
             rows="5"
             :value="value"
             @input="handleInput"
             @focus="handleFocus"
             @blur="handleBlur"
             @keydown="handleKeydown"></textarea>
-        <div v-if="type == 'file'" class="input-file-group">
+        <div v-else-if="type == 'file'" class="input-file-group">
             <input
                 id="file"
                 type="file"
@@ -48,10 +48,25 @@
                 {{ modelValue?.name ? modelValue.name : modelValue }}
             </div>
         </div>
-        <a v-if="type == 'link'" :href="href" target="_blank">{{
+        <a v-else-if="type == 'link'" :href="href" target="_blank">{{
             props.modelValue
         }}</a>
-        <span v-if="type == 'static'">{{ props.modelValue }}</span>
+        <span v-else-if="type == 'static'">{{ props.modelValue }}</span>
+        <select
+            v-else-if="type == 'select'"
+            :value="value"
+            @input="handleInput"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            @keydown="handleKeydown">
+            <option
+                v-for="(optionValue, key) in options"
+                :key="key"
+                :value="key"
+                :selected="key == value">
+                {{ optionValue }}
+            </option>
+        </select>
         <div v-if="slots.default || feedbackInvalid" class="sm-input-help">
             <span v-if="feedbackInvalid" class="sm-input-invalid">{{
                 feedbackInvalid
@@ -112,6 +127,12 @@ const props = defineProps({
         type: String,
         default: "",
     },
+    options: {
+        type: Object,
+        default() {
+            return {};
+        },
+    },
     control: {
         type: String,
         default: "",
@@ -179,7 +200,7 @@ watch(
     }
 );
 
-const inputActive = ref(value.value.length > 0);
+const inputActive = ref(value.value.length > 0 || props.type == "select");
 
 const handleChange = (event) => {
     emits("update:modelValue", event.target.files[0]);
@@ -257,6 +278,11 @@ const inline = computed(() => {
             padding: calc(#{map-get($spacer, 2)} * 2) map-get($spacer, 3)
                 calc(#{map-get($spacer, 2)} / 2) map-get($spacer, 3);
         }
+
+        select {
+            padding: calc(#{map-get($spacer, 2)} * 2) map-get($spacer, 3)
+                calc(#{map-get($spacer, 2)} / 2) map-get($spacer, 3);
+        }
     }
 
     &.sm-feedback-invalid {

resources/js/components/SMSelect.vue

@@ -1,147 +0,0 @@
-<template>
-    <div :class="['form-group', { 'has-error': error }]">
-        <label v-if="label" :class="{ required: required }">{{ label }}</label>
-        <select
-            :value="value"
-            @input="input"
-            @blur="handleBlur"
-            @keydown="handleBlur">
-            <option
-                v-for="(value, key) in options"
-                :key="key"
-                :value="key"
-                :selected="value == value">
-                {{ value }}
-            </option>
-        </select>
-        <div class="form-group-error">{{ error }}</div>
-        <div v-if="slots.default" class="form-group-info">
-            <slot></slot>
-        </div>
-        <div v-if="help" class="form-group-help">
-            <ion-icon v-if="helpIcon" name="information-circle-outline" />
-            {{ help }}
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { useSlots, ref, computed, watch, inject } from "vue";
-import { isEmpty } from "../helpers/utils";
-import { toTitleCase } from "../helpers/string";
-
-const props = defineProps({
-    modelValue: {
-        type: String,
-        default: "",
-    },
-    options: {
-        type: Object,
-        default() {
-            return {};
-        },
-    },
-    label: {
-        type: String,
-        default: "",
-    },
-    required: {
-        type: Boolean,
-        default: false,
-    },
-    type: {
-        type: String,
-        default: "text",
-    },
-    error: {
-        type: String,
-        default: "",
-    },
-    help: {
-        type: String,
-        default: "",
-    },
-    helpIcon: {
-        type: String,
-        default: "",
-    },
-    control: {
-        type: String,
-        default: "",
-    },
-    form: {
-        type: Object,
-        default: () => {
-            return {};
-        },
-        required: false,
-    },
-    feedbackInvalid: {
-        type: String,
-        default: "",
-    },
-});
-
-const emits = defineEmits(["update:modelValue", "blur"]);
-const slots = useSlots();
-const objForm = inject("form", props.form);
-const objControl =
-    !isEmpty(objForm) && props.control != "" ? objForm[props.control] : null;
-const label = ref("");
-const value = ref(props.modelValue);
-const feedbackInvalid = ref("");
-
-const input = (event) => {
-    emits("update:modelValue", event.target.value);
-};
-
-const handleBlur = (event) => {
-    if (event.keyCode == undefined || event.keyCode == 9) {
-        emits("blur", event);
-    }
-};
-
-watch(
-    () => props.label,
-    (newValue) => {
-        label.value = newValue;
-    }
-);
-
-const initialOptions = computed(() => {
-    return props.options;
-});
-
-watch(initialOptions, () => {
-    if (
-        value.value.length > 0 &&
-        value.value in Object.keys(props.options) == true
-    ) {
-        emits("update:modelValue", value);
-    } else if (Object.keys(props.options).length > 0) {
-        emits("update:modelValue", Object.keys(props.options)[0]);
-    }
-});
-
-if (objControl) {
-    if (value.value.length > 0) {
-        objControl.value = value.value;
-    } else {
-        value.value = objControl.value;
-    }
-
-    if (label.value.length == 0) {
-        label.value = toTitleCase(props.control);
-    }
-
-    watch(
-        () => objControl.validation.result.valid,
-        (newValue) => {
-            feedbackInvalid.value = newValue
-                ? ""
-                : objControl.validation.result.invalidMessages[0];
-        },
-        { deep: true }
-    );
-}
-</script>