dashboard-shell-shell 1.0.10000011122 → 1.6.0-alpha.2

package/components/form/LabeledSelect.vue

@@ -9,6 +9,9 @@ import { generateRandomAlphaString } from '@shell/utils/string';
 import LabeledSelectPagination from '@shell/components/form/labeled-select-utils/labeled-select-pagination';
 import { LABEL_SELECT_NOT_OPTION_KINDS } from '@shell/types/components/labeledSelect';
 import { mapGetters } from 'vuex';
+import { _VIEW } from '@shell/config/query-params';
+import { useClickOutside } from '@shell/composables/useClickOutside';
+import { ref } from 'vue';
 
 export default {
   name: 'LabeledSelect',
@@ -126,11 +129,23 @@ export default {
     },
   },
 
+  setup() {
+    const select = ref(null);
+    const isOpen = ref(false);
+
+    useClickOutside(select, () => {
+      isOpen.value = false;
+    });
+
+    return { isOpen, select };
+  },
+
   data() {
     return {
-      selectedVisibility: 'visible',
-      shouldOpen:         true,
-      uid:                generateRandomAlphaString(10)
+      selectedVisibility:   'visible',
+      shouldOpen:           true,
+      labeledSelectLabelId: `ls-label-id-${ generateRandomAlphaString(12) }`,
+      generatedUid:         `ls-uid-${ generateRandomAlphaString(12) }`
     };
   },
 
@@ -166,28 +181,24 @@ export default {
   },
 
   methods: {
-    // resizeHandler = in mixin
-    focusSearch() {
-      if (this.isView || this.disabled || this.loading) {
+    // Ensure we only focus on open, otherwise we re-open on close
+    clickSelect() {
+      if (this.mode === _VIEW || this.loading === true || this.disabled === true) {
         return;
       }
 
-      // we need this override as in a "closeOnSelect" type of component
-      // if we don't have this override, it would open again
-      if (this.overridesMixinPreventDoubleTriggerKeysOpen) {
-        this.$nextTick(() => {
-          const el = this.$refs['select'];
+      this.isOpen = !this.isOpen;
 
-          if ( el ) {
-            el.focus();
-          }
-
-          this.overridesMixinPreventDoubleTriggerKeysOpen = false;
-        });
+      if (this.isOpen) {
+        this.focusSearch();
+      }
+    },
 
+    // resizeHandler = in mixin
+    focusSearch() {
+      if (this.isView || this.disabled || this.loading) {
         return;
       }
-      this.$refs['select-input'].open = true;
 
       this.$nextTick(() => {
         const el = this.$refs['select-input']?.searchEl;
@@ -198,6 +209,10 @@ export default {
       });
     },
 
+    focusWrapper() {
+      this.$refs.select.focus();
+    },
+
     onFocus() {
       this.selectedVisibility = 'hidden';
       this.onFocusLabeled();
@@ -209,12 +224,27 @@ export default {
     },
 
     onOpen() {
+      this.focusSearch();
       this.$emit('on-open');
       this.resizeHandler();
     },
 
+    closeOnSelecting(e) {
+      if (e.value === this.value) {
+        this.close();
+      }
+
+      this.$emit('selecting', e);
+    },
+
+    close() {
+      this.isOpen = false;
+      this.onClose();
+    },
+
     onClose() {
       this.$emit('on-close');
+      this.focusWrapper();
     },
 
     getOptionLabel(option) {
@@ -249,6 +279,10 @@ export default {
     },
 
     dropdownShouldOpen(instance, forceOpen = false) {
+      if (!this.isOpen) {
+        return false;
+      }
+
       const { noDrop, mutableLoading } = instance;
       const { open } = instance;
       const shouldOpen = this.shouldOpen;
@@ -290,8 +324,9 @@ export default {
 </script>
 
 <template>
-   <div style="display: flex;">
+  <div style="display: flex;">
     <div
+      v-if="hasLabel"
       :class="{ 'labeled-container': true, raised, empty, [mode]: true, 'is-lable': isLabel }"
       :style="{ border: 'none', width: selectWidth===''?'160px':selectWidth,lineHeight: '32px' }"
     >
@@ -309,196 +344,182 @@ export default {
       </label>
     </div>
     <!-- label -->
-  <div
-    ref="select"
-    class="labeled-select"
-    :class="[
-      $attrs.class,
-      {
-        disabled: isView || disabled,
-        focused,
-        [mode]: true,
-        [status]: status,
-        taggable: $attrs.taggable,
-        taggable: $attrs.multiple,
-        hoverable: hoverTooltip,
-        'compact-input': isCompact,
-        'no-label': !hasLabel
-      }
-    ]"
-    :tabindex="isView || disabled ? -1 : 0"
-    role="listbox"
-    @click="focusSearch"
-    @keydown.enter="focusSearch"
-    @keydown.down.prevent="focusSearch"
-    @keydown.space.prevent="focusSearch"
-  >
-    <!-- <div
-      :class="{ 'labeled-container': true, raised, empty, [mode]: true }"
-      :style="{ border: 'none' }"
+    <div
+      :id="hasLabel ? labeledSelectLabelId : undefined"
+      ref="select"
+      class="labeled-select"
+      :class="[
+        $attrs.class && $attrs.class.replace('mb-20', ''),
+        {
+          disabled: isView || disabled,
+          focused,
+          [mode]: true,
+          [status]: status,
+          taggable: $attrs.taggable,
+          taggable: $attrs.multiple,
+          hoverable: hoverTooltip,
+          'compact-input': isCompact,
+          'no-label': !hasLabel
+        }
+      ]"
+      :tabindex="isView || disabled ? -1 : 0"
+      role="combobox"
+      :aria-expanded="isOpen"
+      :aria-describedby="$attrs['aria-describedby'] || undefined"
+      :aria-required="requiredField"
+      @click="clickSelect"
+      @keydown.self.enter="clickSelect"
+      @keydown.self.down.prevent="clickSelect"
+      @keydown.self.space.prevent="clickSelect"
     >
-      <label
-        v-if="hasLabel"
-        :id="`labeled-select-uid-${uid}`"
+      <v-select
+        ref="select-input"
+        v-bind="filteredAttrs"
+        class="inline"
+        :close-on-select="false"
+        :append-to-body="appendToBody"
+        :calculate-position="positionDropdown"
+        :class="{ 'no-label': !(label || '').length}"
+        :clearable="clearable"
+        :disabled="isView || disabled || loading"
+        :get-option-key="getOptionKey"
+        :get-option-label="(opt) => getOptionLabel(opt)"
+        :label="optionLabel"
+        :options="_options"
+        :map-keydown="mappedKeys"
+        :placeholder="placeholder"
+        :reduce="(x) => reduce(x)"
+        :filterable="isFilterable"
+        :searchable="isSearchable"
+        :selectable="selectable"
+        :modelValue="value != null && !loading ? value : ''"
+        :dropdown-should-open="dropdownShouldOpen"
+        :tabindex="-1"
+        :uid="generatedUid"
+        :aria-label="'-'"
+        @update:modelValue="$emit('selecting', $event); $emit('update:value', $event)"
+        @search:blur="onBlur"
+        @search:focus="onFocus"
+        @search="onSearch"
+        @open="onOpen"
+        @close="onClose"
+        @option:selecting="closeOnSelecting"
+        @option:selected="close"
+        @option:deselecting="$emit('deselecting', $event)"
+        @keydown.enter.stop
       >
-        <t
-          v-if="labelKey"
-          :k="labelKey"
-        />
-        <template v-else-if="label">{{ label }}</template>
-
-        <span
-          v-if="requiredField"
-          class="required"
-        >*</span>
-      </label>
-    </div> -->
-    <v-select
-      ref="select-input"
-      :aria-labelledby="hasLabel ? `labeled-select-uid-${uid}` : ''"
-      v-bind="filteredAttrs"
-      class="inline"
-      :append-to-body="appendToBody"
-      :calculate-position="positionDropdown"
-      :class="{ 'no-label': !(label || '').length}"
-      :clearable="clearable"
-      :disabled="isView || disabled || loading"
-      :get-option-key="getOptionKey"
-      :get-option-label="(opt) => getOptionLabel(opt)"
-      :label="optionLabel"
-      :options="_options"
-      :map-keydown="mappedKeys"
-      :placeholder="placeholder"
-      :reduce="(x) => reduce(x)"
-      :filterable="isFilterable"
-      :searchable="isSearchable"
-      :selectable="selectable"
-      :modelValue="value != null && !loading ? value : ''"
-      :dropdown-should-open="dropdownShouldOpen"
-      :tabindex="-1"
-      role="listitem"
-      @update:modelValue="$emit('selecting', $event); $emit('update:value', $event)"
-      @search:blur="onBlur"
-      @search:focus="onFocus"
-      @search="onSearch"
-      @open="onOpen"
-      @close="onClose"
-      @option:selecting="$emit('selecting', $event)"
-      @option:deselecting="$emit('deselecting', $event)"
-    >
-    
-      <template #option="option">
-        <template v-if="showTagPrompts">
-          <div class="only-user-opts">
-            {{ t('labeledSelect.pressEnter', {input:getOptionLabel(option.label)}) }}
-          </div>
-        </template>
-        <template v-else-if="option.kind === 'group'">
-          <div class="vs__option-kind-group">
+        <template #option="option">
+          <template v-if="showTagPrompts">
+            <div class="only-user-opts">
+              {{ t('labeledSelect.pressEnter', {input:getOptionLabel(option.label)}) }}
+            </div>
+          </template>
+          <template v-else-if="option.kind === 'group'">
+            <div class="vs__option-kind-group">
+              <i
+                v-if="option.icon"
+                class="icon"
+                :class="{ [option.icon]: true}"
+              />
+              <b>{{ getOptionLabel(option) }}</b>
+              <div v-if="option.badge">
+                {{ option.badge }}
+              </div>
+            </div>
+          </template>
+          <template v-else-if="option.kind === 'divider'">
+            <hr role="none">
+          </template>
+          <template v-else-if="option.kind === 'highlighted'">
+            <div class="option-kind-highlighted">
+              {{ option.label }}
+            </div>
+          </template>
+          <div
+            v-else
+            class="vs__option-kind"
+            :class="{ 'has-icon' : hasGroupIcon}"
+            @mousedown="(e) => onClickOption(option, e)"
+          >
+            {{ getOptionLabel(option) }}
             <i
-              v-if="option.icon"
-              class="icon"
-              :class="{ [option.icon]: true}"
+              v-if="option.error"
+              class="icon icon-warning pull-right"
+              style="font-size: 20px;"
             />
-            <b>{{ getOptionLabel(option) }}</b>
-            <div v-if="option.badge">
-              {{ option.badge }}
-            </div>
-          </div>
-        </template>
-        <!-- <template v-else-if="option.kind === 'divider'">
-          <hr role="none">
-        </template> -->
-        <template v-else-if="option.kind === 'highlighted'">
-          <div class="option-kind-highlighted">
-            {{ option.label }}
           </div>
         </template>
-        <div
-          v-else
-          class="vs__option-kind"
-          :class="{ 'has-icon' : hasGroupIcon}"
-          @mousedown="(e) => onClickOption(option, e)"
+        <!-- Pass down templates provided by the caller -->
+        <template
+          v-for="(_, slot) of $slots"
+          :key="slot"
+          #[slot]="scope"
         >
-          {{ getOptionLabel(option) }}
-          <i
-            v-if="option.error"
-            class="icon icon-warning pull-right"
-            style="font-size: 20px;"
+          <slot
+            :name="slot"
+            v-bind="scope"
           />
-        </div>
-      </template>
-      <!-- Pass down templates provided by the caller -->
-      <template
-        v-for="(_, slot) of $slots"
-        :key="slot"
-        #[slot]="scope"
-      >
-        <slot
-          :name="slot"
-          v-bind="scope"
-        />
-      </template>
+        </template>
 
-      <template #list-footer>
-        <div
-          v-if="canPaginate && totalResults && pages > 1"
-          class="pagination-slot"
-        >
-          <div class="load-more">
-            <i
-              v-if="paginating"
-              class="icon icon-spinner icon-spin"
-            />
-            <div v-else>
-              <a
-                v-if="canLoadMore"
-                @click="loadMore"
-              > {{ t('labelSelect.pagination.more') }}</a>
+        <template #list-footer>
+          <div
+            v-if="canPaginate && totalResults && pages > 1"
+            class="pagination-slot"
+          >
+            <div class="load-more">
+              <i
+                v-if="paginating"
+                class="icon icon-spinner icon-spin"
+              />
+              <div v-else>
+                <a
+                  v-if="canLoadMore"
+                  @click="loadMore"
+                > {{ t('labelSelect.pagination.more') }}</a>
+              </div>
             </div>
-          </div>
 
-          <div class="count">
-            {{ optionCounts }}
+            <div class="count">
+              {{ optionCounts }}
+            </div>
           </div>
-        </div>
-      </template>
-      <template #no-options="{ search }">
-        <div class="no-options-slot">
-          <template v-if="showTagPrompts">
-            <span v-if="!searching">{{ t('labeledSelect.startTyping') }}</span>
-          </template>
-          <div
-            v-else-if="paginating"
-            class="paginating"
-          >
-            <i class="icon icon-spinner icon-spin" />
+        </template>
+        <template #no-options="{ search }">
+          <div class="no-options-slot">
+            <template v-if="showTagPrompts">
+              <span v-if="!searching">{{ t('labeledSelect.startTyping') }}</span>
+            </template>
+            <div
+              v-else-if="paginating"
+              class="paginating"
+            >
+              <i class="icon icon-spinner icon-spin" />
+            </div>
+            <template v-else-if="search">
+              {{ t('labelSelect.noOptions.noMatch') }}
+            </template>
+            <template v-else>
+              {{ t(noOptionsLabelKey) }}
+            </template>
           </div>
-          <template v-else-if="search">
-            {{ t('labelSelect.noOptions.noMatch') }}
-          </template>
-          <template v-else>
-            {{ t(noOptionsLabelKey) }}
-          </template>
-        </div>
-      </template>
-    </v-select>
-    <i
-      v-if="loading"
-      class="icon icon-spinner icon-spin icon-lg"
-    />
-    <LabeledTooltip
-      v-if="tooltip && !focused"
-      :hover="hoverTooltip"
-      :value="tooltip"
-      :status="status"
-    />
-    <LabeledTooltip
-      v-if="!!validationMessage"
-      :hover="hoverTooltip"
-      :value="validationMessage"
-    />
-  </div>
+        </template>
+      </v-select>
+      <i
+        v-if="loading"
+        class="icon icon-spinner icon-spin icon-lg"
+      />
+      <LabeledTooltip
+        v-if="tooltip && !focused"
+        :hover="hoverTooltip"
+        :value="tooltip"
+        :status="status"
+      />
+      <LabeledTooltip
+        v-if="!!validationMessage"
+        :hover="hoverTooltip"
+        :value="validationMessage"
+      />
+    </div>
   </div>
 </template>
 
@@ -509,11 +530,12 @@ export default {
   // Prevent namespace field from wiggling or changing
   // height when it is toggled from a LabeledInput to a
   // LabeledSelect.
+  // padding-bottom: 1px;
   &:deep() .vs__actions:after {
-      padding-top: 10px;
-    }
-  padding-bottom: 1px;
-  /* flex: 1; */
+    // padding-top: 10px;
+    display: flex;
+    align-items: center;
+  }
 
   &.no-label.compact-input {
     :deep() .vs__actions:after {
@@ -589,7 +611,6 @@ export default {
 
   &.taggable {
     :deep() .vs__selected-options {
-
       padding: 3px 0;
       .vs__selected {
         border-color: var(--accent-btn);