Merge pull request #137 from libvue/improve/tiny-problems

Improve/tiny problems
libvue · Nov 17, 2023 · 52cd682 · 52cd682
2 parents 1351fa6 + 9275186
commit 52cd682
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@libvue/core",
-    "version": "0.1.26",
+    "version": "0.1.27",
     "private": false,
     "scripts": {
         "dev": "vite",

diff --git a/src/lib/components/LvFileInput/LvFileInput.vue b/src/lib/components/LvFileInput/LvFileInput.vue
@@ -136,6 +136,7 @@ export default {
         flex-wrap: wrap;
         align-items: center;
         gap: 0.5rem;
+        overflow-x: auto;
     }
     &__no-files {
         line-height: var(--line-height-small);

diff --git a/src/lib/components/LvSelect/LvSelect.vue b/src/lib/components/LvSelect/LvSelect.vue
@@ -18,24 +18,45 @@
         >
             <!-- Single value -->
             <div v-if="!multiple" class="lv-select__value">
-                <template v-if="hasValue">
+                <div v-if="hasValue && !hasOptions" class="lv-select__placeholder">
+                    <template v-if="loading">
+                        {{ noOptionsWithValueLoadingPlaceholder }}
+                    </template>
+                    <template v-else>
+                        {{ noOptionsWithValuePlaceholder }}
+                    </template>
+                </div>
+                <template v-else-if="hasValue">
                     <slot name="value" :option="selectedOption">
                         {{ selectedOption[optionLabelKey] }}
                     </slot>
-                    <lv-icon v-if="clearable" class="lv-select__value-remove lv-select__value-remove--single" name="x-circle" @click="onClickClearOption(selectedOption)"/>
+                    <lv-icon
+                        v-if="clearable"
+                        class="lv-select__value-remove lv-select__value-remove--single"
+                        name="x-circle"
+                        @click="onClickClearOption(selectedOption)"
+                    />
                 </template>
                 <div v-else class="lv-select__placeholder">
                     {{ placeholder }}
                 </div>
             </div>
             <!-- Multi value -->
             <div v-else-if="multiple" class="lv-select__value">
-                <template v-if="hasValue">
+                <div v-if="hasValue && !hasOptions" class="lv-select__placeholder">
+                    <template v-if="loading">
+                        {{ noOptionsWithValueLoadingPlaceholder }}
+                    </template>
+                    <template v-else>
+                        {{ noOptionsWithValuePlaceholder }}
+                    </template>
+                </div>
+                <template v-else-if="hasValue">
                     <span v-for="(option, index) in selectedOptions" :key="index" class="lv-select__value-item">
                         <slot name="value" :option="option">
                             {{ option[optionLabelKey] }}
                         </slot>
-                        <lv-icon class="lv-select__value-remove" name="x-circle" @click="onClickClearOption(option)"/>
+                        <lv-icon class="lv-select__value-remove" name="x-circle" @click="onClickClearOption(option)" />
                     </span>
                 </template>
                 <div v-else class="lv-select__placeholder">
@@ -50,13 +71,12 @@
         <!-- Dropdown -->
         <transition name="dropdown">
             <div v-show="dropdownVisible" class="lv-select__dropdown" role="listbox">
-
-                <div class="lv-select__search" v-if="searchable">
+                <div v-if="searchable" class="lv-select__search">
                     <input
+                        ref="search"
                         v-model="search"
                         class="lv-select__search-input"
                         type="text"
-                        ref="search"
                         :placeholder="searchPlaceholder"
                     />
                 </div>
@@ -87,8 +107,8 @@
 import { onClickOutside } from '@vueuse/core';
 import propSizeMixin from '../../mixins/propSizeMixin';
 import LvSelectOption from './LvSelectOption.vue';
-import LvIcon from "../LvIcon/LvIcon.vue";
-import LvSpinner from "../LvSpinner/LvSpinner.vue";
+import LvIcon from '../LvIcon/LvIcon.vue';
+import LvSpinner from '../LvSpinner/LvSpinner.vue';
 
 export default {
     components: {
@@ -122,6 +142,14 @@ export default {
             type: String,
             default: 'No options found',
         },
+        noOptionsWithValuePlaceholder: {
+            type: String,
+            default: 'Error: No options found for current selection',
+        },
+        noOptionsWithValueLoadingPlaceholder: {
+            type: String,
+            default: 'Loading, one moment please',
+        },
         clearable: {
             type: Boolean,
             default: true,
@@ -188,6 +216,9 @@ export default {
                 fallbackFocus: document.body,
             };
         },
+        hasOptions() {
+            return this.options.length > 0;
+        },
         hasValue() {
             if (this.multiple && this.modelValue.length > 0) {
                 return true;
@@ -227,7 +258,7 @@ export default {
                     this.$refs.search.focus();
                 });
             }
-        }
+        },
     },
     mounted() {
         onClickOutside(this.$refs.select, () => {
@@ -236,7 +267,7 @@ export default {
     },
     methods: {
         onClickSelection(e) {
-            if(!e.target.classList.contains('lv-select__value-remove') && e.target.classList.length > 0) {
+            if (!e.target.classList.contains('lv-select__value-remove') && e.target.classList.length > 0) {
                 this.dropdownVisible = !this.dropdownVisible;
             }
         },
@@ -320,45 +351,45 @@ export default {
             white-space: nowrap;
         }
         &-remove {
-            margin-left: .5rem;
+            margin-left: 0.5rem;
 
             &--single {
-                margin-left: auto;
                 margin-right: 1.5rem;
+                margin-left: auto;
             }
         }
     }
 
     &__search {
         display: flex;
-        align-items: center;
         position: sticky;
-        top: -.5rem;
-        margin-top: -.5rem;
+        top: -0.5rem;
         flex-grow: 1;
+        align-items: center;
+        z-index: 1;
         box-sizing: border-box;
+        margin-top: -0.5rem;
         background: var(--background-color);
-        padding: 1rem .75rem 1rem;
+        padding: 1rem 0.75rem 1rem;
+        width: 100%;
         font-size: inherit;
         line-height: inherit;
-        width: 100%;
-        z-index: 1;
 
         &-input {
             outline: 0;
             border: 0;
+            background: var(--background-color);
+            width: 100%;
             color: var(--text-color);
             font-size: inherit;
             line-height: inherit;
-            width: 100%;
-            background: var(--background-color);
             &::placeholder {
                 color: var(--placeholder-color);
             }
         }
 
         &-icon {
-            margin-right: .25rem;
+            margin-right: 0.25rem;
         }
     }
     &__placeholder {
@@ -401,6 +432,9 @@ export default {
                 color: var(--placeholder-color);
             }
         }
+        #{$self}__value {
+            opacity: 0.5;
+        }
     }
 
     &__loading {