dashboard-shell-shell 1.0.113 → 1.0.114

package/components/ActionDropdownShell.vue

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { RcDropdown, RcDropdownTrigger, RcDropdownItem } from '@components/RcDropdown';
-type HiddenAction = {
-  action: string;
-  enabled: boolean;
-  icon: string;
-  label: string;
-  bulkable: boolean;
-  bulkAction: string;
-  allEnabled: boolean;
-  anyEnabled: boolean;
-}
-
-defineProps<{
-  disabled: boolean,
-  hiddenActions: HiddenAction[],
-  actionTooltip: unknown,
-}>();
-
-const emit = defineEmits(['click', 'mouseover', 'mouseleave']);
-
-const applyTableAction = (act: HiddenAction, args: unknown, event: Event) => {
-  emit('click', act, args, event);
-};
-
-const setBulkActionOfInterest = (act: HiddenAction | null, event: 'mouseover' | 'mouseleave' = 'mouseover') => {
-  emit(event, act);
-};
-</script>
-
-<template>
-  <rc-dropdown
-    :distance="14"
-    placement="bottom"
-  >
-    <rc-dropdown-trigger
-      class="bulk-actions-dropdown"
-      :disabled="disabled"
-    >
-      <template #before>
-        <i class="icon icon-gear" />
-      </template>
-      <span>{{ t('sortableTable.bulkActions.collapsed.label') }}</span>
-      <template #after>
-        <i class="ml-10 icon icon-chevron-down" />
-      </template>
-    </rc-dropdown-trigger>
-    <template #dropdownCollection>
-      <rc-dropdown-item
-        v-for="(act, i) in hiddenActions"
-        :key="i"
-        v-clean-tooltip="{
-          content: actionTooltip,
-          placement: 'right'
-        }"
-        :disabled="!act.enabled"
-        @click="applyTableAction(act, null, $event)"
-        @mouseover="setBulkActionOfInterest(act)"
-        @mouseleave="setBulkActionOfInterest(null, 'mouseleave')"
-      >
-        <template #before>
-          <i
-            v-if="act.icon"
-            :class="act.icon"
-          />
-        </template>
-        <span v-clean-html="act.label" />
-      </rc-dropdown-item>
-    </template>
-  </rc-dropdown>
-</template>

package/components/DotState.vue

@@ -1,84 +0,0 @@
-<script lang="ts">
-import Vue, { PropType, defineComponent } from 'vue';
-import { mapGetters } from 'vuex';
-
-interface Dot {
-  stateBackground: string;
-  stateDisplay: string;
-}
-
-export default defineComponent({
-
-  name: 'DotState',
-
-  props:      {
-    value: {
-      type:    Object as PropType<Dot>,
-      default: null
-    },
-    color: {
-      type:    String,
-      default: null
-    },
-    label: {
-      type:    String,
-      default: null
-    }
-  },
-  
-  computed: {
-    ...mapGetters({ t: 'i18n/t' }),
-    bg(): string | null {
-      return this.value?.stateBackground || this.color;
-    },
-
-    msg(): string | null {
-      let text = this.value?.stateDisplay || this.label;
-      let zhText = this.t(`stateLabel.${ text }`)
-      return zhText ? zhText : text
-    }
-    
-  }
-});
-</script>
-
-<template>
-  <div style="display: flex;flex-direction: row;align-items: center;">
-    <div :class="{ [bg]: true }"></div>
-    <span style="margin-left: 5px;">{{ msg }}</span>
-    
-  </div>
-  
-</template>
-<style lang="scss" scoped>
-  .bg-error {
-    width: 10px; /* 圆点的宽度 */
-    height: 10px; /* 圆点的高度 */
-    background-color: #DD0C17; /* 圆点的颜色 */
-    border-radius: 50%; /* 设置为圆形 */
-  }
-  .bg-darker {
-    width: 10px; /* 圆点的宽度 */
-    height: 10px; /* 圆点的高度 */
-    background-color: #DD0C17; /* 圆点的颜色 */
-    border-radius: 50%; /* 设置为圆形 */
-  }
-  .bg-success {
-    width: 10px; /* 圆点的宽度 */
-    height: 10px; /* 圆点的高度 */
-    background-color: #95F204 !important; /* 圆点的颜色 */
-    border-radius: 50%; /* 设置为圆形 */
-  }
-  .bg-warning {
-    width: 10px; /* 圆点的宽度 */
-    height: 10px; /* 圆点的高度 */
-    background-color: #DAC342; /* 圆点的颜色 */
-    border-radius: 50%; /* 设置为圆形 */
-  }
-  .bg-info {
-    width: 10px; /* 圆点的宽度 */
-    height: 10px; /* 圆点的高度 */
-    background-color: #1890FF; /* 圆点的颜色 */
-    border-radius: 50%; /* 设置为圆形 */
-  }
-</style>

package/components/ModalManager.vue

@@ -1,55 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-import { useStore } from 'vuex';
-
-import AppModal from '@shell/components/AppModal.vue';
-
-const store = useStore();
-
-const isOpen = computed(() => store.getters['modal/isOpen']);
-const component = computed(() => store.getters['modal/component']);
-const componentProps = computed(() => store.getters['modal/componentProps']);
-const resources = computed(() => store.getters['modal/resources']);
-const closeOnClickOutside = computed(() => store.getters['modal/closeOnClickOutside']);
-const modalWidth = computed(() => store.getters['modal/modalWidth']);
-// const modalSticky = computed(() => store.getters['modal/modalSticky']); // TODO: Implement sticky modals
-
-const backgroundClosing = ref<Function | null>(null);
-
-function close() {
-  if (!isOpen.value) return;
-
-  if (backgroundClosing.value) {
-    backgroundClosing.value();
-  }
-
-  store.commit('modal/closeModal');
-}
-
-function registerBackgroundClosing(fn: Function) {
-  backgroundClosing.value = fn;
-}
-</script>
-
-<template>
-  <Teleport to="#modals">
-    <app-modal
-      v-if="isOpen && component"
-      :click-to-close="closeOnClickOutside"
-      :width="modalWidth"
-      :style="{ '--prompt-modal-width': modalWidth }"
-      :trigger-focus-trap="true"
-      tabindex="0"
-      @close="close"
-    >
-      <component
-        :is="component"
-        v-bind="componentProps || {}"
-        data-testid="modal-manager-component"
-        :resources="resources"
-        :register-background-closing="registerBackgroundClosing"
-        @close="close"
-      />
-    </app-modal>
-  </Teleport>
-</template>

package/components/SlideInPanelManager.vue

@@ -1,126 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { useStore } from 'vuex';
-
-const HEADER_HEIGHT = 55;
-
-const store = useStore();
-const isOpen = computed(() => store.getters['slideInPanel/isOpen']);
-const currentComponent = computed(() => store.getters['slideInPanel/component']);
-const currentProps = computed(() => store.getters['slideInPanel/componentProps']);
-
-const panelTop = computed(() => {
-  const banner = document.getElementById('banner-header');
-  let height = HEADER_HEIGHT;
-
-  if (banner) {
-    height += banner.clientHeight;
-  }
-
-  return `${ height }px`;
-});
-
-const panelHeight = computed(() => `calc(100vh - ${ panelTop?.value })`);
-const panelWidth = computed(() => currentProps?.value?.width || '33%');
-const panelRight = computed(() => (isOpen?.value ? '0' : `-${ panelWidth?.value }`));
-
-const panelTitle = computed(() => currentProps?.value?.title || 'Details');
-
-function closePanel() {
-  store.commit('slideInPanel/close');
-}
-</script>
-
-<template>
-  <Teleport to="#slides">
-    <div id="slide-in-panel-manager">
-      <div
-        v-show="isOpen"
-        data-testid="slide-in-glass"
-        class="slide-in-glass"
-        :class="{ 'slide-in-glass-open': isOpen }"
-        @click="closePanel"
-      />
-      <div
-        class="slide-in"
-        :class="{ 'slide-in-open': isOpen }"
-        :style="{ width: panelWidth, right: panelRight, top: panelTop, height: panelHeight }"
-      >
-        <div class="header">
-          <div class="title">
-            {{ panelTitle }}
-          </div>
-          <i
-            class="icon icon-close"
-            data-testid="slide-in-close"
-            :trigger-focus-trap="true"
-            tabindex="0"
-            @click="closePanel"
-          />
-        </div>
-        <div class="main-panel">
-          <component
-            :is="currentComponent"
-            v-if="isOpen || currentComponent"
-            v-bind="currentProps"
-            data-testid="slide-in-panel-component"
-            class="dynamic-panel-content"
-          />
-        </div>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<style lang="scss" scoped>
-.slide-in-glass {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: 100vw;
-}
-.slide-in-glass-open {
-  background-color: var(--body-bg);
-  display: block;
-  opacity: 0.5;
-  z-index: 1000;
-}
-
-.slide-in {
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  top: 0;
-  z-index: 2000;
-  transition: right 0.5s ease;
-  border-left: 1px solid var(--border);
-  background-color: var(--body-bg);
-}
-
-.slide-in-open {
-  right: 0;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  padding: 4px;
-  border-bottom: 1px solid var(--border);
-
-  .title {
-    flex: 1;
-    font-weight: bold;
-  }
-
-  .icon-close {
-    cursor: pointer;
-  }
-}
-
-.main-panel {
-  padding: 10px;
-  overflow: auto;
-}
-</style>

package/components/StatusBadge.vue

@@ -1,77 +0,0 @@
-<script setup lang="ts">
-
-const STATUS = {
-  success: {
-    color: 'text-success',
-    icon:  'icon-checkmark'
-  },
-  warning: {
-    color: 'text-warning',
-    icon:  'icon-warning'
-  },
-  info: {
-    color: 'text-info',
-    icon:  'icon-info'
-  },
-  error: {
-    color: 'text-error',
-    icon:  'icon-error'
-  }
-};
-
-withDefaults(
-  defineProps<{
-    status?: 'success' | 'warning' | 'info' | 'error',
-    label?: string
-  }>(),
-  {
-    status: 'success',
-    label:  '',
-  }
-);
-
-</script>
-<template>
-  <div
-    class="status-badge"
-  >
-    <i
-      class="status-badge__icon icon"
-      :class="{
-        [STATUS[status].icon]: true,
-        [STATUS[status].color]: true
-      }"
-    />
-    <div
-      v-if="label"
-      class="status-badge__label"
-    >
-      {{ label }}
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.status-badge {
-  align-items: center;
-  display: inline-flex;
-  border: 1px solid;
-  border-color: var(--border);
-  margin-top: 20px;
-
-  & + & {
-    margin-left: 20px;
-  }
-
-  &__label {
-    border-left: 1px solid var(--border);
-    padding: 5px 20px;
-    color: var(--body-text);
-  }
-
-  &__icon {
-    text-align: center;
-    padding: 5px 10px;
-  }
-}
-</style>

package/components/__tests__/ModalManager.spec.ts

@@ -1,176 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { createStore, Store } from 'vuex';
-import { nextTick } from 'vue';
-
-import ModalManager from '@shell/components/ModalManager.vue';
-
-interface ModalManagerMethods {
-  registerBackgroundClosing(fn: Function): void;
-  close(): void;
-}
-
-const MockComponent = {
-  template: '<div data-testid="modal-manager-component">Mock Content</div>',
-  props:    ['someProp', 'resources', 'registerBackgroundClosing']
-};
-
-describe('modalManager.vue with Teleport', () => {
-  let store: Store<any>;
-  let getters: Record<string, () => any>;
-  let modalsDiv: HTMLDivElement;
-
-  beforeEach(() => {
-    // Create the teleport target container
-    modalsDiv = document.createElement('div');
-    modalsDiv.setAttribute('id', 'modals');
-    document.body.appendChild(modalsDiv);
-
-    getters = {
-      'modal/isOpen':              () => true,
-      'modal/component':           () => MockComponent,
-      'modal/componentProps':      () => ({ someProp: 'testValue' }),
-      'modal/resources':           () => ({ data: 'mockData' }),
-      'modal/closeOnClickOutside': () => true,
-      'modal/modalWidth':          () => '500px'
-    };
-
-    store = createStore({
-      getters,
-      mutations: { 'modal/closeModal': jest.fn() }
-    });
-  });
-
-  afterEach(() => {
-    // Clean up the teleport container after each test
-    document.body.removeChild(modalsDiv);
-  });
-
-  const factory = () => {
-    return mount(ModalManager, {
-      attachTo: document.body, // attach so Teleport can work properly
-      global:   {
-        plugins: [store],
-        stubs:   {
-          AppModal: {
-            name:     'AppModal',
-            template: `<div data-testid="app-modal" @close="$emit('close')" :style="{ '--prompt-modal-width': width }"><slot /></div>`,
-            props:    ['clickToClose', 'width']
-          }
-        }
-      }
-    });
-  };
-
-  it('renders the AppModal and dynamic component when modal is open', async() => {
-    factory();
-
-    await nextTick();
-
-    // Because Teleport moves content out of the normal wrapper,
-    // we query the document for the teleported elements.
-    const appModal = document.querySelector('[data-testid="app-modal"]');
-    const dynamicComponent = document.querySelector('[data-testid="modal-manager-component"]');
-
-    expect(appModal).toBeTruthy();
-    expect(dynamicComponent).toBeTruthy();
-    expect(appModal?.getAttribute('style')).toContain('--prompt-modal-width: 500px');
-
-    // We assume the mock component is rendered correctly if its markup is found.
-  });
-
-  it('does not render the AppModal when modal is closed', async() => {
-    getters['modal/isOpen'] = () => false;
-    store = createStore({
-      getters,
-      mutations: { 'modal/closeModal': jest.fn() }
-    });
-    factory();
-    await nextTick();
-
-    const appModal = document.querySelector('[data-testid="app-modal"]');
-
-    expect(appModal).toBeNull();
-  });
-
-  it('does not render the AppModal when dynamic component is null', async() => {
-    getters['modal/component'] = () => null;
-    store = createStore({
-      getters,
-      mutations: { 'modal/closeModal': jest.fn() }
-    });
-    factory();
-    await nextTick();
-
-    const appModal = document.querySelector('[data-testid="app-modal"]');
-
-    expect(appModal).toBeNull();
-  });
-
-  it('calls store commit when close is triggered', async() => {
-    const closeModalMutation = jest.fn();
-
-    getters['modal/isOpen'] = () => true;
-    store = createStore({
-      getters,
-      mutations: { 'modal/closeModal': closeModalMutation }
-    });
-    const wrapper = factory();
-
-    await nextTick();
-
-    const appModalWrapper = wrapper.findComponent({ name: 'AppModal' });
-
-    appModalWrapper.vm.$emit('close');
-    await nextTick();
-
-    expect(closeModalMutation).toHaveBeenCalledWith({}, undefined);
-  });
-
-  it('calls registered background closing function on close', async() => {
-    const closeModalMutation = jest.fn();
-
-    getters['modal/isOpen'] = () => true;
-    store = createStore({
-      getters,
-      mutations: { 'modal/closeModal': closeModalMutation }
-    });
-    const wrapper = factory();
-
-    await nextTick();
-
-    const backgroundFn = jest.fn();
-
-    (wrapper.vm as unknown as ModalManagerMethods).registerBackgroundClosing(backgroundFn);
-    await nextTick();
-
-    const appModalWrapper = wrapper.findComponent({ name: 'AppModal' });
-
-    appModalWrapper.vm.$emit('close');
-    await nextTick();
-
-    expect(backgroundFn).toHaveBeenCalledWith();
-    expect(closeModalMutation).toHaveBeenCalledWith({}, undefined);
-  });
-
-  it('does nothing if modal is already closed when close is triggered', async() => {
-    const closeModalMutation = jest.fn();
-
-    getters['modal/isOpen'] = () => false;
-    store = createStore({
-      getters,
-      mutations: { 'modal/closeModal': closeModalMutation }
-    });
-    const wrapper = factory();
-
-    await nextTick();
-
-    const modalManager = wrapper.vm as unknown as ModalManagerMethods;
-    const spy = jest.spyOn(modalManager, 'close');
-
-    modalManager.close();
-    await nextTick();
-
-    expect(spy).toHaveBeenCalledWith();
-    expect(closeModalMutation).not.toHaveBeenCalled();
-  });
-});