dashboard-shell-shell 1.0.112 → 1.0.113

package/components/form/HookOption.vue

@@ -28,23 +28,18 @@ export default {
   },
 
   data() {
-    const selectHook = null;
-
-    const defaultExec = { exec: { command: [] } };
-    const defaultHttpGet = {
-      httpGet: {
-        host:        '',
-        path:        '',
-        port:        null,
-        scheme:      '',
-        httpHeaders: null
-      }
-    };
-
     return {
-      selectHook,
-      defaultExec,
-      defaultHttpGet,
+      selectHook:     null,
+      defaultExec:    { exec: { command: [] } },
+      defaultHttpGet: {
+        httpGet: {
+          host:        '',
+          path:        '',
+          port:        null,
+          scheme:      '',
+          httpHeaders: null
+        }
+      },
       schemeOptions: ['HTTP', 'HTTPS']
     };
   },

package/components/form/KeyValue.vue

@@ -277,7 +277,7 @@ export default {
       const gap = this.canRemove ? ' 50px' : '';
       const size = 2 + this.extraColumns.length;
 
-      return `grid-template-columns: repeat(${ size }, 1fr)${ gap };`;
+      return `grid-template-columns: repeat(${ size }, 400px)${ gap };`;
     },
     usedKeyOptions() {
       return this.rows.map((row) => row[this.keyName]);
@@ -760,7 +760,7 @@ export default {
                     :disabled="disabled || isProtected(row.key)"
                     :mode="mode"
                     :placeholder="_valuePlaceholder"
-                    :min-height="40"
+                    :min-height="32"
                     :spellcheck="false"
                     :aria-label="t('generic.ariaLabel.value', {index: i})"
                     @update:value="queueUpdate"
@@ -823,7 +823,7 @@ export default {
                   type="button"
                   role="button"
                   :disabled="isView || isProtected(row.key) || disabled"
-                  :aria-label="removeLabel || t('generic.remove')"
+                  :aria-label="`${removeLabel || t('generic.remove')} ${ i+1 }`"
                   class="btn role-link"
                   @click="remove(i)"
                 >
@@ -837,7 +837,7 @@ export default {
     </div>
     <div
       v-if="(addAllowed || readAllowed) && !isView"
-      class="footer mt-20"
+      class="footer mt-10"
     >
       <slot
         name="add"
@@ -880,8 +880,8 @@ export default {
   }
   .kv-container {
     display: grid;
-    align-items: center;
-    column-gap: 20px;
+    /* align-items: center; */
+    column-gap: 10px;
     label {
       margin-bottom: 0;
     }
@@ -905,6 +905,9 @@ export default {
       }
       &.value textarea {
         padding: 10px 10px 10px 10px;
+        min-height:32px;
+        line-height: 12px; 
+        border: solid var(--border-width) var(--input-border);       
       }
 
       .text-monospace:not(.conceal) {
@@ -943,8 +946,14 @@ export default {
     }
   }
   input {
-    height: 40px;
+    height: 32px;
     line-height: 1;
+    border: solid var(--border-width) var(--input-border);
+    padding: 4px 11px;
+    &:hover{
+      border: solid var(--border-width) var(--input-border);
+      box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
+    }
   }
   .footer {
     .protip {

package/components/form/LabeledSelect.vue

@@ -50,6 +50,10 @@ export default {
       default: false,
       type:    Boolean
     },
+    isLabel: {
+      default: false,
+      type:    Boolean
+    },
     localizedLabel: {
       default: false,
       type:    Boolean
@@ -227,7 +231,7 @@ export default {
     },
 
     positionDropdown(dropdownList, component, { width }) {
-      calculatePosition(dropdownList, component, width, this.placement);
+      calculatePosition(dropdownList, component, width, this.placement, 'label', this.isLabel);
     },
 
     get,
@@ -278,6 +282,25 @@ export default {
 </script>
 
 <template>
+   <div style="display: flex;">
+    <div
+      :class="{ 'labeled-container': true, raised, empty, [mode]: true, 'is-lable': isLabel }"
+      :style="{ border: 'none', width: '160px',lineHeight: '32px' }"
+    >
+      <label v-if="hasLabel" :id="`labeled-select-uid-${uid}`">
+        <t
+          v-if="labelKey"
+          :k="labelKey"
+        />
+        <template v-else-if="label">{{ label }}</template>
+
+        <span
+          v-if="requiredField"
+          class="required"
+        >*</span>
+      </label>
+    </div>
+    <!-- label -->
   <div
     ref="select"
     class="labeled-select"
@@ -296,12 +319,13 @@ export default {
       }
     ]"
     :tabindex="isView || disabled ? -1 : 0"
+    role="listbox"
     @click="focusSearch"
     @keydown.enter="focusSearch"
     @keydown.down.prevent="focusSearch"
     @keydown.space.prevent="focusSearch"
   >
-    <div
+    <!-- <div
       :class="{ 'labeled-container': true, raised, empty, [mode]: true }"
       :style="{ border: 'none' }"
     >
@@ -320,7 +344,7 @@ export default {
           class="required"
         >*</span>
       </label>
-    </div>
+    </div> -->
     <v-select
       ref="select-input"
       :aria-labelledby="hasLabel ? `labeled-select-uid-${uid}` : ''"
@@ -344,7 +368,7 @@ export default {
       :modelValue="value != null && !loading ? value : ''"
       :dropdown-should-open="dropdownShouldOpen"
       :tabindex="-1"
-      role="listbox"
+      role="listitem"
       @update:modelValue="$emit('selecting', $event); $emit('update:value', $event)"
       @search:blur="onBlur"
       @search:focus="onFocus"
@@ -354,6 +378,7 @@ export default {
       @option:selecting="$emit('selecting', $event)"
       @option:deselecting="$emit('deselecting', $event)"
     >
+    
       <template #option="option">
         <template v-if="showTagPrompts">
           <div class="only-user-opts">
@@ -373,9 +398,9 @@ export default {
             </div>
           </div>
         </template>
-        <template v-else-if="option.kind === 'divider'">
-          <hr>
-        </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 }}
@@ -466,6 +491,7 @@ export default {
       :value="validationMessage"
     />
   </div>
+  </div>
 </template>
 
 <style lang='scss' scoped>
@@ -475,7 +501,11 @@ export default {
   // Prevent namespace field from wiggling or changing
   // height when it is toggled from a LabeledInput to a
   // LabeledSelect.
+  &:deep() .vs__actions:after {
+      padding-top: 10px;
+    }
   padding-bottom: 1px;
+  /* flex: 1; */
 
   &.no-label.compact-input {
     :deep() .vs__actions:after {
@@ -489,7 +519,7 @@ export default {
 
   &.no-label:not(.compact-input) {
     height: $input-height;
-    padding-top: 4px;
+    padding-top: 0px;
 
     :deep() .vs__actions:after {
       top: 0;
@@ -551,6 +581,7 @@ export default {
 
   &.taggable {
     :deep() .vs__selected-options {
+
       padding: 3px 0;
       .vs__selected {
         border-color: var(--accent-btn);
@@ -576,7 +607,7 @@ export default {
   }
 
   :deep() .vs__selected-options {
-    margin-top: -5px;
+    margin-top: 0px;
   }
 
   :deep() .v-select:not(.vs--single) {
@@ -588,7 +619,7 @@ export default {
   :deep() .vs__actions {
     &:after {
       position: relative;
-      top: -10px;
+      top: 0px;
     }
   }
 
@@ -626,73 +657,21 @@ export default {
   }
 }
 
-$icon-size: 18px;
-
-// This represents the drop down area. Note - it might be attached to body and NOT the parent label select div
-.vs__dropdown-menu {
-
-  // Styling for individual options
-  .vs__dropdown-option .vs__option-kind {
-    &-group {
-      display: flex;
-      align-items: center;
-
-      i { // icon
-        width: $icon-size;
-      }
-
-      > b { // group label
-        flex: 1;
-      }
-
-      > div { // badge
-        background-color: var(--primary);
-        border-radius: 4px;
-        color: var(--primary-text);
-        font-size: 12px;
-        height: 18px;
-        line-height: 18px;
-        margin-top: 1px;
-        padding: 0 10px;
-      }
-    }
-
-    &.has-icon {
-      padding-left: $icon-size;
-    }
+// Styling for option group badge
+.vs__dropdown-menu .vs__dropdown-option .vs__option-kind-group {
+  display: flex;
+  > b {
+    flex: 1;
   }
-
-    &.has-icon .vs__option-kind div{
-    padding-left: $icon-size;
-  }
-
-  .pagination-slot {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    margin-top: 5px;
-
-    .load-more {
-      display: flex;
-      align-items: center;
-      height: 19px;
-
-      a {
-        cursor: pointer;
-      }
-    }
-
-    .count {
-      position: absolute;
-      right: 10px;
-    }
-  }
-
-  .no-options-slot .paginating {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  > div {
+    background-color: var(--primary);
+    border-radius: 4px;
+    color: var(--primary-text);
+    font-size: 12px;
+    height: 18px;
+    line-height: 18px;
+    margin-top: 1px;
+    padding: 0 10px;
   }
 }
 
@@ -720,4 +699,8 @@ $icon-size: 18px;
     margin: 0px calc(-#{$input-padding-sm}/2);
     padding: 3px 20px;
 }
+
+.is-lable{
+  width: 0px !important;
+}
 </style>

package/components/form/LifecycleHooks.vue

@@ -24,10 +24,10 @@ export default {
   },
 
   data() {
-    const { postStart, preStop } = this.value;
-
     return {
-      postStart, preStop, hookOptions: ['postStart', 'preStop']
+      postStart:   this.value.postStart,
+      preStop:     this.value.preStop,
+      hookOptions: ['postStart', 'preStop']
     };
   },
 

package/components/form/MatchExpressions.vue

@@ -70,6 +70,14 @@ export default {
   },
 
   data() {
+    return {
+      ops:    [],
+      rules:  [],
+      custom: []
+    };
+  },
+
+  created() {
     const t = this.$store.getters['i18n/t'];
 
     const podOptions = [
@@ -88,8 +96,6 @@ export default {
       { label: t('workload.scheduling.affinity.matchExpressions.greaterThan'), value: 'Gt' },
     ];
 
-    const ops = this.type === NODE ? nodeOptions : podOptions;
-
     let rules;
 
     // special case for matchFields and matchExpressions
@@ -127,11 +133,8 @@ export default {
       rules.push(newRule);
     }
 
-    return {
-      ops,
-      rules,
-      custom: []
-    };
+    this.rules = rules;
+    this.ops = this.type === NODE ? nodeOptions : podOptions;
   },
 
   computed: {
@@ -242,6 +245,10 @@ export default {
 
 <template>
   <div>
+    <slot
+      v-if="rules.length"
+      name="header"
+    />
     <button
       v-if="showRemove && !isView"
       type="button"
@@ -418,14 +425,20 @@ export default {
     justify-content: center;
   }
 
+  .match-expression-header{
+    margin-top: 24px;
+  }
   .match-expression-row, .match-expression-header {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    /* display: grid; */
+    display: flex;
+    /* grid-template-columns: 1fr 1fr 1fr; */
     margin: 5px 0;
-    grid-gap: $column-gutter;
+    /* grid-gap: $column-gutter; */
+    grid-gap: 10px;
 
     & > LABEL {
       margin: 0;
+      width: 400px;
     }
 
     &:not(.view){
@@ -434,7 +447,13 @@ export default {
   }
 
   .match-expression-row > div > input {
-    min-height: 40px !important;
+    min-height: 32px !important;
+    border: solid var(--border-width) var(--input-border);
+    padding: 4px 11px;
+    width: 400px;
+    &:hover{
+      box-shadow: 0 4px 6px 0 var(--input-border-box-shadow);
+    }
   }
   .match-expression-row-matching, .match-expression-header-matching {
     grid-template-columns: 1fr 1fr 1fr 1fr;
@@ -443,4 +462,8 @@ export default {
       grid-template-columns: 1fr 1fr 1fr 1fr 100px;
     }
   }
-</style>
+
+  .view-item-value{
+    width: 400px;
+  }
+</style>