feat(select): refator

oruga-ui · Jun 17, 2024 · edf00d3 · edf00d3
1 parent 12c35b5
commit edf00d3
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 27 deletions.
diff --git a/packages/docs/components/Select.md b/packages/docs/components/Select.md
@@ -58,7 +58,7 @@ title: Select
 | size               | Vertical size of input                                         | string                             | `small`, `medium`, `large`                                                      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>select: {<br>&nbsp;&nbsp;size: undefined<br>}</code>      |
 | statusIcon         | Show status icon using field and variant prop                  | boolean                            | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;statusIcon: true<br>}</code>             |
 | useHtml5Validation | Enable html 5 native validation                                | boolean                            | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>{<br>&nbsp;&nbsp;useHtml5Validation: true<br>}</code>     |
-| v-model            |                                                                | T \| T[]                           | -                                                                               | <code style='white-space: nowrap; padding: 0;'>null</code>                                                                                            |
+| v-model            |                                                                | T \| T[]                           | -                                                                               |                                                                                                                                                       |
 | validationMessage  | The message which is shown when a validation error occurs      | string                             | -                                                                               |                                                                                                                                                       |
 | variant            | Color of the control                                           | string                             | `primary`, `info`, `success`, `warning`, `danger`, `and any other custom color` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>select: {<br>&nbsp;&nbsp;variant: undefined<br>}</code>   |
 

diff --git a/packages/oruga/src/components/input/Input.vue b/packages/oruga/src/components/input/Input.vue
@@ -283,9 +283,7 @@ const {
 // inject parent field component if used inside one
 const { parentField, statusVariant, statusVariantIcon } = injectField();
 
-const vmodel = defineModel<ModelValue>({
-    default: undefined,
-});
+const vmodel = defineModel<ModelValue>({ default: undefined });
 
 // if id is given set as `for` property on o-field wrapper
 if (props.id) parentField?.value?.setInputId(props.id);
@@ -311,9 +309,9 @@ onMounted(() => {
         (value) => {
             if (parentField?.value) parentField.value.setFilled(!!value);
             if (props.autosize) resize();
-            if (!isValid.value) nextTick(() => checkHtml5Validity());
+            if (!isValid.value) checkHtml5Validity();
         },
-        { immediate: true },
+        { immediate: true, flush: "post" },
     );
 });
 

diff --git a/packages/oruga/src/components/select/Select.vue b/packages/oruga/src/components/select/Select.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T">
-import { computed, watch, ref, nextTick, type PropType } from "vue";
+import { computed, watch, onMounted, ref, nextTick, type PropType } from "vue";
 
 import OIcon from "../icon/Icon.vue";
 
@@ -222,30 +222,31 @@ const emits = defineEmits<{
 const selectRef = ref<HTMLInputElement>();
 
 // use form input functionality
-const { checkHtml5Validity, onBlur, onFocus, onInvalid, setFocus } =
+const { checkHtml5Validity, onBlur, onFocus, onInvalid, setFocus, isValid } =
     useInputHandler(selectRef, emits, props);
 
 // inject parent field component if used inside one
 const { parentField, statusVariant, statusVariantIcon } = injectField();
 
 const vmodel = defineModel<T | T[]>({ default: undefined });
 
-const placeholderVisible = computed(() => !vmodel.value);
+const placeholderVisible = computed(() => !props.multiple && !vmodel.value);
 
-/**
- * When v-model is changed:
- *  1. Set parent field filled state.
- *  2. Resize textarea input
- *  3. Check html5 valdiation
- */
-watch(
-    vmodel,
-    (value) => {
-        if (parentField?.value) parentField.value.setFilled(!!value);
-        checkHtml5Validity();
-    },
-    { flush: "post" },
-);
+onMounted(() => {
+    /**
+     * When v-model is changed:
+     *  1. Set parent field filled state.
+     *  2. Check html5 valdiation
+     */
+    watch(
+        vmodel,
+        (value) => {
+            if (parentField?.value) parentField.value.setFilled(!!value);
+            if (!isValid.value) checkHtml5Validity();
+        },
+        { immediate: true, flush: "post" },
+    );
+});
 
 const selectOptions = computed<OptionsItem<T>[]>(() => {
     if (!props.options || !Array.isArray(props.options)) return [];
@@ -340,9 +341,7 @@ const selectClasses = defineClasses(
         "arrowClass",
         "o-sel-arrow",
         null,
-        computed(
-            () => !props.iconRight && !props.multiple && !statusVariant.value,
-        ),
+        computed(() => !hasIconRight.value && !props.multiple),
     ],
 );
 

diff --git a/packages/oruga/src/components/select/examples/base.vue b/packages/oruga/src/components/select/examples/base.vue
@@ -14,7 +14,7 @@ const options: OptionsItem[] = [
 <template>
     <section>
         <o-field label="Simple">
-            <o-select placeholder="Select a name">
+            <o-select placeholder="Select a name" required>
                 <option value="flint">Flint</option>
                 <option value="silver">Silver</option>
             </o-select>