bfg-common 1.2.112 → 1.2.113

package/components/atoms/stack/StackBlock.vue

@@ -1,178 +1,178 @@
-<template>
-  <div
-    :class="[
-      'stack-block',
-      open ? 'stack-block-expanded' : 'stack-block-expandable',
-      { 'not-children': !props.hasChildren },
-    ]"
-  >
-    <div
-      :id="`${props.testId}-toggle`"
-      class="stack-block-label"
-      @click="toggle"
-    >
-      <atoms-the-icon name="angle" class="angle-icon" fill="#565656" />
-
-      <div class="stack-view-key">
-        <slot name="stackBlockKey" />
-      </div>
-      <div class="stack-block-content">
-        <slot name="stackBlockContent" />
-      </div>
-
-      <span
-        v-if="props.removable && props.isRollBack"
-        class="icon-roll-back"
-        @mousedown="onRollBack"
-        @click.stop
-      />
-      <atoms-the-icon
-        v-else-if="props.removable"
-        class="remove-icon"
-        name="close-circle"
-        @mousedown="onRemove"
-        @click.stop
-      />
-      <span v-else class="empty-icon"></span>
-    </div>
-
-    <div v-show="open" class="stack-children">
-      <div style="height: auto">
-        <slot name="stackChildren" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    hasChildren: boolean
-    removable?: boolean
-    testId?: string
-    openByDefault?: boolean
-    isRollBack?: boolean
-  }>(),
-  { testId: 'ui-stack-block', openByDefault: false }
-)
-const emits = defineEmits<{
-  (event: 'toggle', value: boolean): void
-  (event: 'remove'): void
-  (event: 'roll-back'): void
-}>()
-
-const open = ref<boolean>(props.openByDefault || false)
-const toggle = (): void => {
-  open.value = !open.value
-  emits('toggle', open.value)
-}
-
-const onRemove = (): void => {
-  emits('remove')
-}
-const onRollBack = (): void => {
-  emits('roll-back')
-}
-</script>
-
-<style scoped lang="scss">
-.stack-block {
-  cursor: pointer;
-  background-color: var(--block-view-bg-color);
-  border-color: var(--global-border-color);
-
-  &.stack-block-expandable:hover {
-    border-bottom: 1px solid #666;
-
-    .stack-block-label {
-      background-color: var(--block-view-bg-color);
-      border-color: var(--global-border-color);
-    }
-  }
-
-  .stack-block-label {
-    padding: 6px 12px;
-    flex: 1 1 auto;
-    max-width: unset;
-    display: flex;
-    background-color: var(--block-view-bg-color);
-    border-color: var(--global-border-color);
-
-    &:hover {
-      .remove-icon {
-        opacity: 1;
-      }
-    }
-
-    &::before {
-      display: none;
-    }
-
-    .angle-icon {
-      width: 14px;
-      height: 14px;
-      margin-right: 4px;
-      transform: rotate(90deg);
-      align-self: center;
-    }
-
-    .remove-icon {
-      width: 18px;
-      height: 18px;
-      opacity: 0;
-      cursor: pointer;
-    }
-
-    .stack-view-key {
-      flex: 0 0 40%;
-      max-width: 40%;
-    }
-
-    .stack-block-content {
-      padding: 0;
-      flex: 1 1 auto;
-      width: 60%;
-      background-color: transparent;
-    }
-
-    .empty-icon {
-      width: 18px;
-      height: 18px;
-    }
-  }
-
-  &.stack-block-expanded {
-    .stack-block-label {
-      color: #ffffff;
-      background-color: #29414e;
-
-      .angle-icon {
-        fill: #ffffff;
-        transform: rotate(180deg);
-      }
-
-      .remove-icon {
-        fill: #ffffff;
-      }
-    }
-  }
-
-  &.not-children {
-    cursor: default;
-    .stack-block-label {
-      background-color: transparent;
-      color: #333333;
-
-      &:hover {
-        cursor: default;
-        background-color: transparent;
-        border-bottom: none;
-      }
-
-      .angle-icon {
-        opacity: 0;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div
+    :class="[
+      'stack-block',
+      open ? 'stack-block-expanded' : 'stack-block-expandable',
+      { 'not-children': !props.hasChildren },
+    ]"
+  >
+    <div
+      :id="`${props.testId}-toggle`"
+      class="stack-block-label"
+      @click="toggle"
+    >
+      <atoms-the-icon name="angle" class="angle-icon" fill="#565656" />
+
+      <div class="stack-view-key">
+        <slot name="stackBlockKey" />
+      </div>
+      <div class="stack-block-content">
+        <slot name="stackBlockContent" />
+      </div>
+
+      <span
+        v-if="props.removable && props.isRollBack"
+        class="icon-roll-back"
+        @mousedown="onRollBack"
+        @click.stop
+      />
+      <atoms-the-icon
+        v-else-if="props.removable"
+        class="remove-icon"
+        name="close-circle"
+        @mousedown="onRemove"
+        @click.stop
+      />
+      <span v-else class="empty-icon"></span>
+    </div>
+
+    <div v-show="open" class="stack-children">
+      <div style="height: auto">
+        <slot name="stackChildren" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    hasChildren: boolean
+    removable?: boolean
+    testId?: string
+    openByDefault?: boolean
+    isRollBack?: boolean
+  }>(),
+  { testId: 'ui-stack-block', openByDefault: false }
+)
+const emits = defineEmits<{
+  (event: 'toggle', value: boolean): void
+  (event: 'remove'): void
+  (event: 'roll-back'): void
+}>()
+
+const open = ref<boolean>(props.openByDefault || false)
+const toggle = (): void => {
+  open.value = !open.value
+  emits('toggle', open.value)
+}
+
+const onRemove = (): void => {
+  emits('remove')
+}
+const onRollBack = (): void => {
+  emits('roll-back')
+}
+</script>
+
+<style scoped lang="scss">
+.stack-block {
+  cursor: pointer;
+  background-color: var(--block-view-bg-color);
+  border-color: var(--global-border-color);
+
+  &.stack-block-expandable:hover {
+    border-bottom: 1px solid #666;
+
+    .stack-block-label {
+      background-color: var(--block-view-bg-color);
+      border-color: var(--global-border-color);
+    }
+  }
+
+  .stack-block-label {
+    padding: 6px 12px;
+    flex: 1 1 auto;
+    max-width: unset;
+    display: flex;
+    background-color: var(--block-view-bg-color);
+    border-color: var(--global-border-color);
+
+    &:hover {
+      .remove-icon {
+        opacity: 1;
+      }
+    }
+
+    &::before {
+      display: none;
+    }
+
+    .angle-icon {
+      width: 14px;
+      height: 14px;
+      margin-right: 4px;
+      transform: rotate(90deg);
+      align-self: center;
+    }
+
+    .remove-icon {
+      width: 18px;
+      height: 18px;
+      opacity: 0;
+      cursor: pointer;
+    }
+
+    .stack-view-key {
+      flex: 0 0 40%;
+      max-width: 40%;
+    }
+
+    .stack-block-content {
+      padding: 0;
+      flex: 1 1 auto;
+      width: 60%;
+      background-color: transparent;
+    }
+
+    .empty-icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  &.stack-block-expanded {
+    .stack-block-label {
+      color: #ffffff;
+      background-color: #29414e;
+
+      .angle-icon {
+        fill: #ffffff;
+        transform: rotate(180deg);
+      }
+
+      .remove-icon {
+        fill: #ffffff;
+      }
+    }
+  }
+
+  &.not-children {
+    cursor: default;
+    .stack-block-label {
+      background-color: transparent;
+      color: #333333;
+
+      &:hover {
+        cursor: default;
+        background-color: transparent;
+        border-bottom: none;
+      }
+
+      .angle-icon {
+        opacity: 0;
+      }
+    }
+  }
+}
+</style>

package/components/atoms/stack/StackContent.vue

@@ -1,63 +1,63 @@
-<template>
-  <div class="vertical-resource-meter" :title="`${props.value}%`">
-    <div class="meter-gauge">
-      <span
-        :style="{ width: `${props.value}%` }"
-        :class="['meter-gauge-value', `resource-meter-usage-${props.state}`]"
-      ></span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    value: number | string
-    state: 'normal' | 'warning' | 'danger'
-  }>(),
-  {
-    value: 0,
-  }
-)
-</script>
-
-<style scoped lang="scss">
-.vertical-resource-meter {
-  appearance: none;
-  width: 20px;
-  height: 12px;
-  margin-bottom: 0;
-  margin-left: -5px;
-  margin-right: 0;
-  transform: rotate(-90deg);
-  border: 1px solid;
-  display: inline-block;
-
-  .meter-gauge {
-    width: 100%;
-    height: 10px;
-    display: block;
-    background: #dfdfdf;
-    overflow: hidden;
-
-    &,
-    .meter-gauge-value {
-      box-shadow: inset 0 5px 5px -5px #999;
-    }
-    .meter-gauge-value {
-      height: inherit;
-      display: block;
-
-      &.resource-meter-usage-normal {
-        background: #73ff27;
-      }
-      &.resource-meter-usage-warning {
-        background: #f9ff27;
-      }
-      &.resource-meter-usage-danger {
-        background: #fc6f6f;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="vertical-resource-meter" :title="`${props.value}%`">
+    <div class="meter-gauge">
+      <span
+        :style="{ width: `${props.value}%` }"
+        :class="['meter-gauge-value', `resource-meter-usage-${props.state}`]"
+      ></span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    value: number | string
+    state: 'normal' | 'warning' | 'danger'
+  }>(),
+  {
+    value: 0,
+  }
+)
+</script>
+
+<style scoped lang="scss">
+.vertical-resource-meter {
+  appearance: none;
+  width: 20px;
+  height: 12px;
+  margin-bottom: 0;
+  margin-left: -5px;
+  margin-right: 0;
+  transform: rotate(-90deg);
+  border: 1px solid;
+  display: inline-block;
+
+  .meter-gauge {
+    width: 100%;
+    height: 10px;
+    display: block;
+    background: #dfdfdf;
+    overflow: hidden;
+
+    &,
+    .meter-gauge-value {
+      box-shadow: inset 0 5px 5px -5px #999;
+    }
+    .meter-gauge-value {
+      height: inherit;
+      display: block;
+
+      &.resource-meter-usage-normal {
+        background: #73ff27;
+      }
+      &.resource-meter-usage-warning {
+        background: #f9ff27;
+      }
+      &.resource-meter-usage-danger {
+        background: #fc6f6f;
+      }
+    }
+  }
+}
+</style>

package/components/atoms/step/VerticalStep.spec.ts

@@ -1,68 +1,68 @@
-// import { describe, test, expect, vi } from 'vitest'
-// import { mount } from '@vue/test-utils'
-// import VerticalStep from './VerticalStep.vue'
-// import VerticalStepItems from '~/types/common/step/verticalStepItems'
-//
-// vi.stubGlobal('useLocal', () => {
-//   return {
-//     loading: 'Loading'
-//   }
-// })
-//
-// const items: VerticalStepItems[] = [
-//   { text: 'step 1', disabled: false, complete: false },
-//   { text: 'step 2', disabled: true, complete: false }
-// ]
-//
-// const factory = (props = {}) => {
-//   return mount(VerticalStep, {
-//     props: {
-//       stepPosition: 0,
-//       items,
-//       ...props
-//     }
-//   })
-// }
-//
-// describe('VerticalStep.vue', () => {
-//   test('test render', async () => {
-//     const wrapper = await factory()
-//
-//     // @ts-ignore
-//     expect(wrapper.findAll('.clr-wizard-stepnav-item').at(0).text()).toBe(
-//       'step 1'
-//     )
-//     // @ts-ignore
-//     expect(wrapper.findAll('.clr-wizard-stepnav-item').at(1).text()).toBe(
-//       'step 2'
-//     )
-//   })
-//   test('test change emit', async () => {
-//     const wrapper = await factory({
-//       items: [
-//         { text: 'step 1', disabled: false, complete: true },
-//         { text: 'step 2', disabled: false, complete: false }
-//       ]
-//     })
-//
-//     await wrapper.find('.btn-link').trigger('click')
-//     // @ts-ignore
-//     expect(wrapper.emitted().change[0][0]).toBe(0)
-//   })
-//   test('test complete', async () => {
-//     const wrapper = await factory({
-//       items: [
-//         { text: 'step 1', disabled: false, complete: true },
-//         { text: 'step 2', disabled: false, complete: false }
-//       ]
-//     })
-//
-//     expect(wrapper.find('.nav-item').classes()).toContain('complete')
-//   })
-//   test('test disabled', async () => {
-//     const wrapper = await factory()
-//
-//     // @ts-ignore
-//     expect(wrapper.findAll('.nav-item').at(1).classes()).toContain('disabled')
-//   })
-// })
+// import { describe, test, expect, vi } from 'vitest'
+// import { mount } from '@vue/test-utils'
+// import VerticalStep from './VerticalStep.vue'
+// import VerticalStepItems from '~/types/common/step/verticalStepItems'
+//
+// vi.stubGlobal('useLocal', () => {
+//   return {
+//     loading: 'Loading'
+//   }
+// })
+//
+// const items: VerticalStepItems[] = [
+//   { text: 'step 1', disabled: false, complete: false },
+//   { text: 'step 2', disabled: true, complete: false }
+// ]
+//
+// const factory = (props = {}) => {
+//   return mount(VerticalStep, {
+//     props: {
+//       stepPosition: 0,
+//       items,
+//       ...props
+//     }
+//   })
+// }
+//
+// describe('VerticalStep.vue', () => {
+//   test('test render', async () => {
+//     const wrapper = await factory()
+//
+//     // @ts-ignore
+//     expect(wrapper.findAll('.clr-wizard-stepnav-item').at(0).text()).toBe(
+//       'step 1'
+//     )
+//     // @ts-ignore
+//     expect(wrapper.findAll('.clr-wizard-stepnav-item').at(1).text()).toBe(
+//       'step 2'
+//     )
+//   })
+//   test('test change emit', async () => {
+//     const wrapper = await factory({
+//       items: [
+//         { text: 'step 1', disabled: false, complete: true },
+//         { text: 'step 2', disabled: false, complete: false }
+//       ]
+//     })
+//
+//     await wrapper.find('.btn-link').trigger('click')
+//     // @ts-ignore
+//     expect(wrapper.emitted().change[0][0]).toBe(0)
+//   })
+//   test('test complete', async () => {
+//     const wrapper = await factory({
+//       items: [
+//         { text: 'step 1', disabled: false, complete: true },
+//         { text: 'step 2', disabled: false, complete: false }
+//       ]
+//     })
+//
+//     expect(wrapper.find('.nav-item').classes()).toContain('complete')
+//   })
+//   test('test disabled', async () => {
+//     const wrapper = await factory()
+//
+//     // @ts-ignore
+//     expect(wrapper.findAll('.nav-item').at(1).classes()).toContain('disabled')
+//   })
+// })