bfg-common 1.0.0

package/components/common/spiceConsole/keyboard/models/interfaces.ts

@@ -0,0 +1,17 @@
+export interface I_KeyboardRowItem {
+  name: string
+  key: string | number
+  value: string
+  width: string
+  secondaryValue: string
+  shiftValue: string
+  capsLockValue: string
+  keyCode?: number
+  rusValue?: string
+  rusSecondaryValue?: string
+  rusShiftValue?: string
+  rusCapsLockValue?: string
+  keyUI?: string
+  rusKeyUI?: string
+  active?: boolean
+}

package/components/common/spiceConsole/models/types.ts

@@ -0,0 +1 @@
+export type UI_T_CODEC = 1 | 2 | 3 | 4 | 5

package/components/common/split/horizontal/Horizontal.vue

@@ -0,0 +1,306 @@
+<template>
+  <div
+    :id="elementId"
+    :class="['fill-parent horizontal', { dragging: isDrag }]"
+  >
+    <div class="firstPanel" :style="leftPanelStyle">
+      <div class="left-panel">
+        <div
+          v-if="showToggleButton"
+          :class="['panel-toggle', { collapsed: leftPanelCollapsed }]"
+        >
+          <button
+            id="collapse-left-panel-button"
+            class="btn-trigger"
+            @click="collapseLeftPanel"
+          >
+            <atoms-the-icon class="trigger-icon" name="angle" />
+          </button>
+        </div>
+
+        <div v-show="!leftPanelCollapsed" class="navigator">
+          <slot name="firstPanel" />
+        </div>
+      </div>
+    </div>
+    <div
+      v-show="!leftPanelCollapsed"
+      :id="`gutter-${elementId}`"
+      class="gutter gutter-horizontal"
+      tabindex="0"
+      @mousedown="isGrab = true"
+      @focus="isFocus = true"
+      @blur="isFocus = false"
+    >
+      <div class="gutter-horizontal-handler"></div>
+    </div>
+
+    <div class="secondPanel right" :style="rightPanelStyle">
+      <slot name="secondPanel" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    parentElementSelector: string
+    leftPanelW?: number
+    leftPanelMinWidth?: number
+    rightPanelMinWidth?: number
+    showToggleButton?: boolean
+    hideLeftPanel?: boolean
+  }>(),
+  {
+    leftPanelMinWidth: 200, // 200px
+    rightPanelMinWidth: 200, // 200px
+    leftPanelW: undefined,
+    showToggleButton: true,
+    hideLeftPanel: false,
+  }
+)
+const emits = defineEmits<{
+  (event: 'dragend', value: number): void
+}>()
+
+const leftPanelStyle = computed(() => {
+  let width = `calc(${leftPanelW.value}% - 1.5px)`
+  if (props.showToggleButton && leftPanelCollapsed.value) {
+    width = '20px'
+  }
+  if (props.hideLeftPanel && leftPanelCollapsed.value) width = '0px'
+
+  return { width }
+})
+const rightPanelStyle = computed(() => {
+  let width = `calc(${100 - leftPanelW.value}% - 1.5px)`
+  if (props.showToggleButton && leftPanelCollapsed.value) {
+    width = 'calc(100% - 20px)'
+  }
+
+  if (props.hideLeftPanel && leftPanelCollapsed.value)
+    width = 'calc(100% - 0px)'
+
+  return { width }
+})
+const leftPanelCollapsed = ref<boolean>(false)
+const collapseLeftPanel = () => {
+  leftPanelCollapsed.value = !leftPanelCollapsed.value
+}
+
+const isGrab = ref(false)
+const isFocus = ref(false)
+const isDrag = ref(false)
+const leftPanelW = ref(20) // 0%
+watch(
+  () => props.leftPanelW,
+  (width) => {
+    if (width === undefined) return
+    leftPanelW.value = width
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.hideLeftPanel,
+  () => {
+    collapseLeftPanel()
+  }
+)
+
+let parentElem: HTMLElement | null
+const mouseup = () => {
+  if (!isGrab.value) {
+    return
+  }
+
+  isGrab.value = false
+  isDrag.value = false
+
+  emits('dragend', leftPanelW.value)
+}
+
+let mousemove = (e: MouseEvent) => {
+  if (!isGrab.value) return
+
+  e.preventDefault()
+  isDrag.value = true
+  doDrag(e.clientX)
+}
+mousemove = useThrottle(mousemove)
+
+const doDrag = (clientX: number) => {
+  const parentElemRect = parentElem?.getBoundingClientRect()
+  const parentElemWidth = parentElemRect?.width || 0
+  const parentElemLeft = parentElemRect?.left || 0
+  const onePercent = parentElemWidth / 100
+  const layerX = clientX - parentElemLeft
+
+  const leftLimit = layerX <= props.leftPanelMinWidth
+  const rightLimit = parentElemWidth - layerX <= props.rightPanelMinWidth
+  if (leftLimit || rightLimit) return
+
+  leftPanelW.value = layerX / onePercent
+}
+
+const elementId = `horizontal${useUniqueId()}`
+
+const keydown = (e: KeyboardEvent) => {
+  if (!isFocus.value) return
+
+  const gutter = document.getElementById(`gutter-${elementId}`)
+
+  if (!gutter) return
+
+  const gutterLeft = ~~(gutter.getBoundingClientRect().left + 1.5)
+
+  if (e.keyCode === 39) {
+    doDrag(gutterLeft + 10)
+  }
+  if (e.keyCode === 37) {
+    doDrag(gutterLeft - 10)
+  }
+}
+onMounted(() => {
+  parentElem = document.querySelector(props.parentElementSelector)
+
+  window.addEventListener('mousemove', mousemove)
+  window.addEventListener('mouseup', mouseup)
+  window.addEventListener('keydown', keydown)
+})
+onUnmounted(() => {
+  window.removeEventListener('mouseup', mouseup)
+  window.removeEventListener('mousemove', mousemove)
+  window.removeEventListener('keydown', keydown)
+})
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/scss/common/mixins';
+.horizontal {
+  &.dragging {
+    .gutter-horizontal.gutter {
+      background-color: var(--gutter-active-bg-color);
+    }
+  }
+  .firstPanel {
+    width: calc(50% - 1.5px);
+
+    .left-panel {
+      @include flex($dir: column);
+      width: 100%;
+      height: 100%;
+
+      .panel-toggle {
+        border-bottom: 1px solid var(--global-border-color);
+
+        &.collapsed {
+          border-right: 1px solid var(--global-border-color);
+
+          .btn-trigger {
+            .trigger-icon {
+              transform: rotate(90deg);
+            }
+          }
+        }
+
+        .btn-trigger {
+          @include flex($align: center);
+          width: 100%;
+          height: 36px;
+          flex: 0 0 36px;
+          border: 0;
+          padding: 0;
+          background-color: transparent;
+          outline: none;
+          cursor: pointer;
+
+          .trigger-icon {
+            width: 16px;
+            height: 16px;
+            transform: rotate(-90deg);
+            margin-left: auto;
+            fill: var(--triger-icon-color);
+          }
+        }
+      }
+      .navigator {
+        overflow: hidden;
+        height: 100%;
+
+        .panel-inner {
+          position: relative;
+          height: 100%;
+          background: var(--horizontal-panel-bg-color);
+          border-radius: 0;
+          border: 0;
+
+          &.inventory-tree {
+            padding-left: 4px;
+            padding-top: 6px;
+          }
+        }
+      }
+    }
+  }
+  .gutter-horizontal {
+    position: relative;
+    width: 3px;
+    background-color: var(--gutter-bg-color);
+    transition-delay: 0.25s;
+    transition-duration: 0.25s;
+
+    &-handler {
+      position: absolute;
+      height: 100%;
+      width: 10px;
+      background: transparent;
+      top: 0;
+      left: -3.5px;
+      z-index: 2;
+    }
+
+    &:focus {
+      background-color: var(--gutter-active-bg-color);
+      outline: none;
+    }
+
+    &:hover {
+      background-color: var(--gutter-hover-bg-color);
+      cursor: col-resize;
+      &:before {
+        background-color: hsla(0, 0%, 100%, 0.5);
+        box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
+      }
+    }
+
+    &:before {
+      content: '';
+      position: relative;
+      display: block;
+      background: rgba(0, 0, 0, 0.1);
+      transition-delay: 0.25s;
+      transition-duration: 0.25s;
+      width: 100%;
+      height: 25px;
+      top: calc(50% - 12.5px);
+    }
+  }
+  .secondPanel {
+    width: calc(50% - 1.5px);
+    &.right {
+      overflow: hidden;
+      height: 100%;
+    }
+  }
+}
+</style>
+
+<style>
+:root {
+  --horizontal-panel-bg-color: #fff;
+}
+:root.dark-theme {
+  --horizontal-panel-bg-color: #1b2a32;
+}
+</style>

package/components/common/split/horizontal/models/interfaces.ts

@@ -0,0 +1,5 @@
+export interface UI_I_PanelOptions {
+  leftPanelWidth: number
+  topPanelHeight: number
+  isBottomPanelCollapsed: boolean
+}

package/components/common/split/vertical/Vertical.vue

@@ -0,0 +1,213 @@
+<template>
+  <div :id="elementId" :class="['fill-parent vertical', { dragging: isDrag }]">
+    <div class="vui-horizontal-panel firstPanel" :style="topPanelStyle">
+      <div class="vui-horizontal-panel sec-nav-container">
+        <slot name="firstPanel" />
+      </div>
+    </div>
+
+    <div
+      :id="`gutter-${elementId}`"
+      class="gutter gutter-vertical"
+      tabindex="0"
+      @mousedown="isGrab = true"
+      @focus="isFocus = true"
+      @blur="isFocus = false"
+    >
+      <div class="gutter-vertical-handler"></div>
+    </div>
+
+    <div class="secondPanel bottom" :style="bottomPanelStyle">
+      <slot name="secondPanel" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_SplitVerticalStyle } from '~/components/common/split/vertical/models/interfaces'
+
+interface UI_I_SplitVerticalProps {
+  parentElementSelector: string
+  topPanelHForce?: string
+  topPanelH?: number
+  topPanelMinHeight?: number
+  bottomPanelMinHeight?: number
+}
+const props = withDefaults(defineProps<UI_I_SplitVerticalProps>(), {
+  topPanelMinHeight: 200, // 200px
+  bottomPanelMinHeight: 200, // 200px
+  topPanelHForce: '',
+  topPanelH: undefined,
+})
+const emits = defineEmits<{
+  (event: 'dragend', num: number): void
+}>()
+
+const topPanelStyle = computed<UI_I_SplitVerticalStyle>(() => {
+  let height = `calc(${topPanelH.value}% - 1.5px)`
+  if (props.topPanelHForce) {
+    height = props.topPanelHForce
+  }
+  return { height }
+})
+
+const bottomPanelStyle = computed<UI_I_SplitVerticalStyle>(() => {
+  let height = `calc(${100 - topPanelH.value}% - 1.5px)`
+
+  return { height }
+})
+
+const isGrab = ref<boolean>(false)
+const isFocus = ref<boolean>(false)
+const isDrag = ref<boolean>(false)
+const topPanelH = ref<number>(80) // 80%
+watch(
+  () => props.topPanelH,
+  (val) => {
+    if (val === undefined) return
+    topPanelH.value = val
+  },
+  { immediate: true }
+)
+
+let parentElem: HTMLDivElement | null
+const mouseup = () => {
+  if (!isGrab.value) {
+    return
+  }
+
+  isGrab.value = false
+  isDrag.value = false
+
+  emits('dragend', topPanelH.value)
+}
+let mousemove = (e: MouseEvent) => {
+  if (!isGrab.value) {
+    return
+  }
+
+  e.preventDefault()
+  isDrag.value = true
+
+  doDrag(e.clientY)
+}
+mousemove = useThrottle(mousemove)
+
+const doDrag = (clientY: number) => {
+  const parentElemTop = parentElem?.getBoundingClientRect().top || 0
+  const parentHeight = parentElem?.clientHeight || 0
+  const onePercent = parentHeight / 100
+
+  const topLimit = clientY <= props.topPanelMinHeight + parentElemTop + 1.5
+  const bottomLimit =
+    clientY >= parentHeight + parentElemTop - props.bottomPanelMinHeight - 1.5
+
+  if (topLimit || bottomLimit) {
+    return
+  }
+
+  topPanelH.value = (clientY - parentElemTop) / onePercent
+}
+
+const elementId = `vertical${useUniqueId()}`
+const keydown = (e: KeyboardEvent) => {
+  if (!isFocus.value) return
+
+  const gutter = document.getElementById(`gutter-${elementId}`)
+
+  if (!gutter) return
+
+  const gutterTop = ~~(gutter.getBoundingClientRect().top + 1.5)
+
+  if (e.keyCode === 40) {
+    doDrag(gutterTop + 10)
+  }
+  if (e.keyCode === 38) {
+    doDrag(gutterTop - 10)
+  }
+}
+
+onMounted(() => {
+  parentElem = document.querySelector(props.parentElementSelector)
+
+  window.addEventListener('mousemove', mousemove)
+  window.addEventListener('mouseup', mouseup)
+  window.addEventListener('keydown', keydown)
+})
+onUnmounted(() => {
+  window.removeEventListener('mouseup', mouseup)
+  window.removeEventListener('mousemove', mousemove)
+  window.removeEventListener('keydown', keydown)
+})
+</script>
+
+<style scoped lang="scss">
+.fill-parent {
+  &.dragging {
+    .gutter-vertical.gutter {
+      background-color: var(--gutter-active-bg-color);
+    }
+  }
+
+  .vui-horizontal-panel.firstPanel {
+    max-height: calc(100% - 36px);
+    height: calc(100vh - 36px);
+
+    .sec-nav-container {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+
+  .gutter-vertical {
+    position: relative;
+    min-height: 3px;
+    background-color: var(--gutter-bg-color);
+    transition-delay: 0.25s;
+    transition-duration: 0.25s;
+
+    &-handler {
+      position: absolute;
+      width: 100%;
+      height: 10px;
+      background: transparent;
+      left: 0;
+      top: -3.5px;
+      z-index: 2;
+    }
+
+    &:focus {
+      background-color: var(--gutter-active-bg-color);
+      outline: none;
+    }
+
+    &:hover {
+      background-color: var(--gutter-hover-bg-color);
+      cursor: row-resize;
+
+      &:before {
+        background-color: hsla(0, 0%, 100%, 0.5);
+        box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
+      }
+    }
+
+    &:before {
+      content: '';
+      position: relative;
+      display: block;
+      background: rgba(0, 0, 0, 0.1);
+      transition-delay: 0.25s;
+      transition-duration: 0.25s;
+      width: 25px;
+      height: 100%;
+      left: calc(50% - 12.5px);
+    }
+  }
+  .secondPanel {
+    height: auto;
+    overflow: hidden;
+    flex: 1;
+  }
+}
+</style>

package/components/common/split/vertical/models/interfaces.ts

@@ -0,0 +1,3 @@
+export interface UI_I_SplitVerticalStyle {
+  height: string
+}

package/components/common/tools/Actions.vue

@@ -0,0 +1,141 @@
+<template>
+  <div :id="id" class="btn-group">
+    <div v-for="(button, key) in props.actions" :key="button.type">
+      <label v-if="button.uploaded">
+        <span :class="[`btn btn-link ${props.size}`]">
+          {{ button.text }}
+        </span>
+        <input
+          :id="`select-file-button-${key}`"
+          type="file"
+          :disabled="button.disabled"
+          :multiple="false"
+          class="btn-group__file"
+          @change="(event) => onSelectFiles(event, button.type)"
+        />
+      </label>
+
+      <button
+        v-else
+        :id="`actions-button-${key}`"
+        :class="[`btn btn-link ${props.size}`]"
+        :disabled="button.disabled"
+        @click="onClickButton(button.type)"
+      >
+        {{ button.text }}
+      </button>
+    </div>
+    <atoms-collapse-nav
+      v-show="collapsedItems.length"
+      :test-id="`${props.testId}-item`"
+      :items="collapsedItems"
+      @change="onClickButton"
+      @select-file="onSelectFiles"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UI_I_Button } from '~/components/common/tools/models/interfaces'
+import { UI_I_CollapseNavItem } from '~/components/atoms/collapse/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    actions: UI_I_Button[]
+    testId: string
+    size?: 'btn-sm' | ''
+  }>(),
+  {
+    size: 'btn-sm',
+  }
+)
+const emits = defineEmits<{
+  (event: 'click', value1: string, value2?: Event | null): void
+}>()
+
+const onClickButton = (type: string): void => {
+  emits('click', type)
+}
+
+const onSelectFiles = (event: Event, type: string): void => {
+  emits('click', type, event)
+}
+
+const visibleCount = ref(props.actions.length)
+const collapsedItems = computed<UI_I_CollapseNavItem[]>(() => {
+  return props.actions
+    .filter((_, index) => {
+      return index >= visibleCount.value
+    })
+    .map((item) => {
+      return {
+        text: item.text,
+        value: item.type,
+        disabled: item.disabled,
+        uploaded: item.uploaded,
+      }
+    })
+})
+
+const outputSize = (): void => {
+  const el = document.getElementById(id.value)
+  if (!el) return
+
+  const elWidth = el.clientWidth
+  const elItems = el.children
+  const elItemsMarginLeft = parseInt(getComputedStyle(elItems[0]).marginLeft)
+  const elItemsMarginRight = parseInt(getComputedStyle(elItems[0]).marginRight)
+  const childrenMarginY = elItemsMarginLeft + elItemsMarginRight
+
+  let childrenWidth = 0
+  let count = 0
+  for (let i = 0; i < elItems.length; i++) {
+    childrenWidth += elItems[i].clientWidth + childrenMarginY
+    const isWrap = elWidth < childrenWidth
+
+    if (isWrap) break
+    count++
+  }
+
+  visibleCount.value = count
+}
+
+const setResizeObserve = (): void => {
+  const el = document.getElementById(id.value)
+
+  if (!el) {
+    setTimeout(setResizeObserve, 0)
+    return
+  }
+
+  new ResizeObserver(outputSize).observe(el)
+}
+const id = ref<string>('')
+onMounted(() => {
+  id.value = `tool-actions-${useUniqueId()}`
+  setResizeObserve()
+})
+</script>
+
+<style lang="scss" scoped>
+.btn {
+  &:disabled {
+    color: var(--btn-link-disabled);
+  }
+  &-group {
+    margin-top: 10px;
+    box-shadow: none;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+    min-height: 25px;
+    height: 25px;
+    box-sizing: content-box;
+
+    &__file {
+      display: none;
+    }
+  }
+}
+</style>

package/components/common/tools/models/interfaces.ts

@@ -0,0 +1,6 @@
+export interface UI_I_Button {
+  text: string
+  type: string
+  disabled: boolean
+  uploaded?: boolean
+}