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

package/components/rancherSortableTable/THead.vue

@@ -1,561 +0,0 @@
-<script>
-import { Checkbox } from '@components/Form/Checkbox';
-import { SOME, NONE } from './selection';
-import { AUTO, CENTER, fitOnScreen } from '@shell/utils/position';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
-
-export default {
-  emits: ['update-cols-options', 'on-toggle-all', 'group-value-change', 'on-sort-change', 'col-visibility-change'],
-
-  components: { Checkbox, LabeledSelect },
-  props:      {
-    columns: {
-      type:     Array,
-      required: true
-    },
-    sortBy: {
-      type:     String,
-      required: true
-    },
-    defaultSortBy: {
-      type:    String,
-      default: ''
-    },
-    group: {
-      type:    String,
-      default: ''
-    },
-    groupOptions: {
-      type:    Array,
-      default: () => []
-    },
-    descending: {
-      type:     Boolean,
-      required: true
-    },
-    hasAdvancedFiltering: {
-      type:     Boolean,
-      required: false
-    },
-    tableColsOptions: {
-      type:    Array,
-      default: () => [],
-    },
-    tableActions: {
-      type:     Boolean,
-      required: true,
-    },
-    rowActions: {
-      type:     Boolean,
-      required: true,
-    },
-    howMuchSelected: {
-      type:     String,
-      required: true,
-    },
-    checkWidth: {
-      type:    Number,
-      default: 30,
-    },
-    rowActionsWidth: {
-      type:     Number,
-      required: true
-    },
-    subExpandColumn: {
-      type:    Boolean,
-      default: false,
-    },
-    expandWidth: {
-      type:    Number,
-      default: 30,
-    },
-    labelFor: {
-      type:     Function,
-      required: true,
-    },
-    noRows: {
-      type:    Boolean,
-      default: true,
-    },
-    noResults: {
-      type:    Boolean,
-      default: true,
-    },
-    loading: {
-      type:     Boolean,
-      required: false,
-    },
-  },
-
-  data() {
-    return {
-      tableColsOptionsVisibility: false,
-      tableColsMenuPosition:      null
-    };
-  },
-
-  watch: {
-    advancedFilteringValues() {
-      // passing different dummy args to make sure update is triggered
-      this.watcherUpdateLiveAndDelayed(true, false);
-    },
-    tableColsOptionsVisibility(neu) {
-      if (neu) {
-        // check if user clicked outside the table cols options box
-        window.addEventListener('click', this.onClickOutside);
-
-        // update filtering options and toggable cols every time dropdown is open
-        this.$emit('update-cols-options');
-      } else {
-        // unregister click event
-        window.removeEventListener('click', this.onClickOutside);
-      }
-    }
-  },
-  computed: {
-    isAll: {
-      get() {
-        return this.howMuchSelected !== NONE;
-      },
-
-      set(value) {
-        this.$emit('on-toggle-all', value);
-      }
-    },
-    hasAdvGrouping() {
-      return this.group?.length && this.groupOptions?.length;
-    },
-    advGroup: {
-      get() {
-        return this.group || this.advGroup;
-      },
-
-      set(val) {
-        this.$emit('group-value-change', val);
-      }
-    },
-
-    isIndeterminate() {
-      return this.howMuchSelected === SOME;
-    },
-    hasColumnWithSubLabel() {
-      return this.columns.some((col) => col.subLabel);
-    }
-  },
-
-  methods: {
-    changeSort(e, col) {
-      if ( !col.sort ) {
-        return;
-      }
-
-      let desc = false;
-
-      if ( this.sortBy === col.name ) {
-        desc = !this.descending;
-      }
-
-      this.$emit('on-sort-change', col.name, desc);
-    },
-
-    isCurrent(col) {
-      return col.name === this.sortBy;
-    },
-
-    ariaSort(col) {
-      if (this.isCurrent(col)) {
-        return this.descending ? this.t('generic.descending') : this.t('generic.ascending');
-      }
-
-      return this.t('generic.none');
-    },
-
-    tableColsOptionsClick(ev) {
-      // set menu position
-      const menu = document.querySelector('.table-options-container');
-      const elem = document.querySelector('.table-options-btn');
-
-      this.tableColsMenuPosition = fitOnScreen(menu, ev || elem, {
-        overlapX:  true,
-        fudgeX:    326,
-        fudgeY:    -22,
-        positionX: CENTER,
-        positionY: AUTO,
-      });
-
-      // toggle visibility
-      this.tableColsOptionsVisibility = !this.tableColsOptionsVisibility;
-    },
-
-    onClickOutside(event) {
-      const tableOpts = this.$refs['table-options'];
-
-      if (!tableOpts || tableOpts.contains(event.target)) {
-        return;
-      }
-      this.tableColsOptionsVisibility = false;
-    },
-
-    tableOptionsCheckbox(value, label) {
-      this.$emit('col-visibility-change', {
-        label,
-        value
-      });
-    },
-
-    tooltip(col) {
-      if (!col.tooltip) {
-        return null;
-      }
-
-      const exists = this.$store.getters['i18n/exists'];
-
-      return exists(col.tooltip) ? this.t(col.tooltip) : col.tooltip;
-    },
-  }
-
-};
-</script>
-
-<template>
-  <thead>
-    <tr :class="{'loading': loading, 'top-aligned': hasColumnWithSubLabel}">
-      <th
-        v-if="tableActions"
-        :width="checkWidth"
-      >
-        <Checkbox
-          v-model:value="isAll"
-          class="check"
-          data-testid="sortable-table_check_select_all"
-          :indeterminate="isIndeterminate"
-          :disabled="noRows || noResults"
-          :alternate-label="t('sortableTable.genericGroupCheckbox')"
-        />
-      </th>
-      <th
-        v-if="subExpandColumn"
-        :width="expandWidth"
-      />
-      <!-- <th
-        v-for="(col) in columns"
-        v-show="!hasAdvancedFiltering || (hasAdvancedFiltering && col.isColVisible)"
-        :key="col.name"
-        :align="col.align || 'left'"
-        :width="col.width"
-        :class="{ sortable: col.sort, [col.breakpoint]: !!col.breakpoint}"
-        :tabindex="col.sort ? 0 : -1"
-        class="sortable-table-head-element"
-        :aria-sort="ariaSort(col)"
-        @click.prevent="changeSort($event, col)"
-        @keyup.enter="changeSort($event, col)"
-        @keyup.space="changeSort($event, col)"
-      > -->
-      <th
-        v-for="(col) in columns"
-        v-show="!hasAdvancedFiltering || (hasAdvancedFiltering && col.isColVisible)"
-        :key="col.name"
-        :align="'left'"
-        :width="col.width"
-        :class="{ sortable: col.sort, [col.breakpoint]: !!col.breakpoint}"
-        :tabindex="col.sort ? 0 : -1"
-        class="sortable-table-head-element"
-        :aria-sort="ariaSort(col)"
-        @click.prevent="changeSort($event, col)"
-        @keyup.enter="changeSort($event, col)"
-        @keyup.space="changeSort($event, col)"
-      >
-        <div
-          class="table-header-container"
-          :class="{ 'not-filterable': hasAdvancedFiltering && !col.isFilter }"
-        >
-          <div
-            v-clean-tooltip="tooltip(col)"
-            class="content"
-          >
-            <span
-              v-if="(col.name === 'harvester' || col.name === 'explorer') && col.label === ' '"
-            >
-              管理
-            </span>
-            <span
-              v-if="!((col.name === 'harvester' || col.name === 'explorer') && col.label === ' ')"
-              v-clean-html="labelFor(col)"
-              class="text-no-break"
-            />
-            <span
-              v-if="col.subLabel"
-              class="text-muted text-no-break"
-            >
-              {{ col.subLabel }}
-            </span>
-          </div>
-          <div
-            v-if="col.sort"
-            class="sort"
-            aria-hidden="true"
-          >
-            <i
-              v-show="hasAdvancedFiltering && !col.isFilter"
-              v-clean-tooltip="t('sortableTable.tableHeader.noFilter')"
-              class="icon icon-info not-filter-icon"
-            />
-            <span class="icon-stack">
-              <i class="icon icon-sort icon-stack-1x faded" />
-              <i
-                v-if="isCurrent(col) && !descending"
-                class="icon icon-sort-down icon-stack-1x"
-                :alt="t('sortableTable.alt.sortingIconDesc')"
-              />
-              <i
-                v-if="isCurrent(col) && descending"
-                class="icon icon-sort-up icon-stack-1x"
-                :alt="t('sortableTable.alt.sortingIconAsc')"
-              />
-            </span>
-          </div>
-        </div>
-      </th>
-      <th
-        v-if="rowActions && hasAdvancedFiltering && tableColsOptions.length"
-        :width="rowActionsWidth"
-        :align="'left'"
-      >
-        <div
-          ref="table-options"
-          class="table-options-group"
-        >
-          <button
-            aria-haspopup="true"
-            aria-expanded="false"
-            type="button"
-            class="btn btn-sm role-multi-action table-options-btn"
-            @click="tableColsOptionsClick"
-          >
-            <i class="icon icon-actions" />
-          </button>
-          <div
-            v-show="tableColsOptionsVisibility"
-            class="table-options-container"
-            :style="tableColsMenuPosition"
-          >
-            <div
-              v-if="hasAdvGrouping"
-              class="table-options-grouping"
-            >
-              <span class="table-options-col-subtitle">{{ t('sortableTable.tableHeader.groupBy') }}:</span>
-              <LabeledSelect
-                v-model:value="advGroup"
-                class="table-options-grouping-select"
-                :clearable="true"
-                :options="groupOptions"
-                :disabled="false"
-                :searchable="false"
-                mode="edit"
-                :multiple="false"
-                :taggable="false"
-              />
-            </div>
-            <p class="table-options-col-subtitle mb-20">
-              {{ t('sortableTable.tableHeader.show') }}:
-            </p>
-            <ul>
-              <li
-                v-for="(col, index) in tableColsOptions"
-                v-show="col.isTableOption"
-                :key="index"
-                :class="{ 'visible': !col.preventColToggle }"
-              >
-                <Checkbox
-                  v-show="!col.preventColToggle"
-                  v-model:value="col.isColVisible"
-                  class="table-options-checkbox"
-                  :label="col.label"
-                  @update:value="tableOptionsCheckbox($event, col.label)"
-                />
-              </li>
-            </ul>
-          </div>
-        </div>
-      </th>
-      <!-- <th
-        v-else-if="rowActions"
-        :width="rowActionsWidth"
-      /> -->
-      <th
-        v-else-if="rowActions"
-        :width="rowActionsWidth"
-        :align="'left'"
-      >
-        操作
-      </th>
-    </tr>
-  </thead>
-</template>
-
-  <style lang="scss" scoped>
-    .table-options-group {
-
-      .table-options-btn.role-multi-action {
-        background-color: transparent;
-        border: none;
-        font-size: 18px;
-        &:hover, &:focus {
-          background-color: var(--accent-btn);
-          box-shadow: none;
-        }
-      }
-      .table-options-container {
-        width: 350px;
-        border: 1px solid var(--primary);
-        background-color: var(--body-bg);
-        padding: 20px;
-        z-index: 1;
-
-        .table-options-grouping {
-          display: flex;
-          align-items: center;
-          margin-bottom: 20px;
-
-          span {
-            white-space: nowrap;
-            margin-right: 10px;
-          }
-        }
-
-        ul {
-          list-style: none;
-          margin: 0;
-          padding: 0;
-          max-height: 200px;
-          overflow-y: auto;
-
-          li {
-            margin: 0;
-            padding: 0;
-
-            &.visible {
-              margin: 0 0 10px 0;
-            }
-          }
-        }
-      }
-    }
-
-    .sortable > SPAN {
-      cursor: pointer;
-      user-select: none;
-      white-space: nowrap;
-      &:hover,
-      &:active {
-        text-decoration: underline;
-        color: var(--body-text);
-      }
-    }
-
-    .top-aligned th {
-      vertical-align: top;
-      padding-top: 10px;
-    }
-
-    thead {
-      tr {
-        background-color: var(--sortable-table-header-bg);
-        color: var(--body-text);
-        text-align: left;
-        border-bottom: 1px solid var(--sortable-table-top-divider);
-      }
-    }
-
-    th {
-      padding: 16.5px 5px;
-      font-weight: normal;
-      border: 0;
-      color: var(--body-text);
-
-      &.sortable-table-head-element:focus-visible {
-        @include focus-outline;
-        outline-offset: -4px;
-      }
-
-      .table-header-container {
-        display: inline-flex;
-
-        .content {
-          display: flex;
-          flex-direction: column;
-        }
-
-        &.not-filterable {
-          margin-top: -2px;
-
-          .icon-stack {
-            margin-top: -2px;
-          }
-        }
-
-        .not-filter-icon {
-          font-size: 16px;
-          color: var(--primary);
-          vertical-align: super;
-        }
-      }
-
-      &:first-child {
-        padding-left: 10px;
-      }
-
-      &:last-child {
-        padding-right: 10px;
-        padding-left: 12px;
-        width: 200px;
-      }
-
-      &:not(.sortable) > SPAN {
-        display: block;
-        margin-bottom: 2px;
-      }
-
-      & A {
-        color: var(--body-text);
-      }
-
-      // Aligns with COLUMN_BREAKPOINTS
-      @media only screen and (max-width: map-get($breakpoints, '--viewport-4')) {
-        // HIDE column on sizes below 480px
-        &.tablet, &.laptop, &.desktop {
-          display: none;
-        }
-      }
-      @media only screen and (max-width: map-get($breakpoints, '--viewport-9')) {
-        // HIDE column on sizes below 992px
-        &.laptop, &.desktop {
-          display: none;
-        }
-      }
-      @media only screen and (max-width: map-get($breakpoints, '--viewport-12')) {
-        // HIDE column on sizes below 1281px
-        &.desktop {
-          display: none;
-        }
-      }
-    }
-
-    .icon-stack {
-      width: 12px;
-    }
-
-    .icon-sort {
-      &.faded {
-        opacity: .3;
-      }
-    }
-  </style>
-  <style lang="scss">
-    .table-options-checkbox .checkbox-custom {
-      min-width: 14px;
-    }
-    .table-options-checkbox .checkbox-label {
-      color: var(--body-text);
-    }
-  </style>

package/components/rancherSortableTable/actions.js

@@ -1,153 +0,0 @@
-import debounce from 'lodash/debounce';
-
-// Use a visible display type to reduce flickering
-const displayType = 'inline-flex';
-
-export default {
-
-  data() {
-    return {
-      bulkActionsClass:            'bulk',
-      bulkActionClass:             'bulk-action',
-      bulkActionsDropdownClass:    'bulk-actions-dropdown',
-      bulkActionAvailabilityClass: 'action-availability',
-
-      hiddenActions: [],
-
-      updateHiddenBulkActions: debounce(this.protectedUpdateHiddenBulkActions, 10)
-    };
-  },
-
-  beforeUnmount() {
-    window.removeEventListener('resize', this.onWindowResize);
-  },
-
-  mounted() {
-    window.addEventListener('resize', this.onWindowResize);
-    this.updateHiddenBulkActions();
-  },
-
-  watch: {
-    selectedRows() {
-      this.updateHiddenBulkActions();
-    },
-    keyedAvailableActions() {
-      this.updateHiddenBulkActions();
-    },
-  },
-
-  computed: {
-    availableActions() {
-      return this.bulkActionsForSelection.filter((act) => !act.external);
-    },
-
-    keyedAvailableActions() {
-      return this.availableActions.map((aa) => aa.action);
-    },
-
-    selectedRowsText() {
-      if (!this.selectedRows.length) {
-        return null;
-      }
-
-      return this.t('sortableTable.actionAvailability.selected', { actionable: this.selectedRows.length });
-    },
-
-    // Shows a tooltip if the bulk action that the user is hovering over can not be applied to all selected rows
-    actionTooltip() {
-      if (!this.selectedRows.length || !this.actionOfInterest) {
-        return null;
-      }
-
-      const runnableTotal = this.selectedRows.filter(this.canRunBulkActionOfInterest).length;
-
-      if (runnableTotal === this.selectedRows.length) {
-        return null;
-      }
-
-      return this.t('sortableTable.actionAvailability.some', {
-        actionable: runnableTotal,
-        total:      this.selectedRows.length,
-      });
-    },
-  },
-
-  methods: {
-    onWindowResize() {
-      this.updateHiddenBulkActions();
-      this.onScroll();
-    },
-
-    /**
-     * Determine if any actions wrap over to a new line, if so group them into a dropdown instead
-     */
-    protectedUpdateHiddenBulkActions() {
-      if (!this.$refs.container) {
-        return;
-      }
-
-      const actionsContainer = this.$refs.container.querySelector(`.${ this.bulkActionsClass }`);
-      const actionsDropdown = this.$refs.container.querySelector(`.${ this.bulkActionsDropdownClass }`);
-
-      if (!actionsContainer || !actionsDropdown) {
-        return;
-      }
-
-      const actionsContainerWidth = actionsContainer.offsetWidth;
-      const actionsHTMLCollection = this.$refs.container.querySelectorAll(`.${ this.bulkActionClass }`);
-      const actions = Array.from(actionsHTMLCollection || []);
-
-      // Determine if the 'x selected' label should show and it's size
-      const selectedRowsText = this.$refs.container.querySelector(`.${ this.bulkActionAvailabilityClass }`);
-      let selectedRowsTextWidth = 0;
-
-      if (this.selectedRowsText) {
-        if (selectedRowsText) {
-          selectedRowsText.style.display = displayType;
-          selectedRowsTextWidth = selectedRowsText.offsetWidth;
-        } else {
-          selectedRowsText.style.display = 'none;';
-        }
-      }
-
-      this.hiddenActions = [];
-
-      let cumulativeWidth = 0;
-      let showActionsDropdown = false;
-      let totalAvailableWidth = actionsContainerWidth - selectedRowsTextWidth;
-
-      // Loop through all actions to determine if some exceed the available space in the row, if so hide them and instead show in a dropdown
-      for (let i = 0; i < actions.length; i++) {
-        const ba = actions[i];
-
-        ba.style.display = displayType;
-        const actionWidth = ba.offsetWidth;
-
-        cumulativeWidth += actionWidth + 15;
-        if (cumulativeWidth >= totalAvailableWidth) {
-          // There are too many actions so the drop down will be visible.
-          if (!showActionsDropdown) {
-            // If we haven't previously enabled the drop down...
-            actionsDropdown.style.display = displayType;
-            // By showing the drop down some previously visible actions may now be hidden, so start the process again
-            // ... except taking into account the width of drop down width in the available space
-            i = -1;
-            cumulativeWidth = 0;
-            showActionsDropdown = true;
-            totalAvailableWidth = actionsContainerWidth - actionsDropdown.offsetWidth - selectedRowsTextWidth;
-          } else {
-            // Collate the actions in an array and hide in the normal row
-            const id = ba.attributes.getNamedItem('id').value;
-
-            this.hiddenActions.push(this.availableActions.find((aa) => aa.action === id));
-            ba.style.display = 'none';
-          }
-        }
-      }
-
-      if (!showActionsDropdown) {
-        actionsDropdown.style.display = 'none';
-      }
-    }
-  }
-};