bfg-common 1.5.473 → 1.5.474

package/components/atoms/window/Window.vue

@@ -1,458 +1,458 @@
-<template>
-  <div
-    :class="['window-container', { loading: props.loading }]"
-    :style="{
-      left: leftLocal + 'px',
-      top: topLocal + 'px',
-      width: widthLocal + 'px',
-      height: heightLocal + 'px',
-    }"
-  >
-    <div
-      ref="headerEl"
-      class="window-header"
-      :style="{ height: headerHeight + 'px' }"
-    >
-      <slot name="header">
-        <div class="window-title text-ellipsis">{{ props.title }}</div>
-      </slot>
-
-      <div class="flex-align-center gap-2">
-        <button class="window-btn window-hide" @click="onCollapse">
-          <ui-icon
-            :name="collapseData.isCollapsed ? 'arrow' : 'check-line'"
-            class="hide-icon"
-            width="16"
-            height="16"
-          />
-        </button>
-        <button class="window-btn window-view-full-screen" @click="toggle">
-          <ui-icon
-            name="view-full-screen"
-            class="view-full-screen-icon"
-            width="14"
-            height="14"
-          />
-        </button>
-        <button class="window-btn window-close" @click="onHide">
-          <ui-icon name="close" class="close-icon" width="16" height="16" />
-        </button>
-      </div>
-    </div>
-
-    <div ref="windowContent" class="window-content">
-      <div v-show="props.loading" class="absolute-center">
-        <ui-icon name="spinner" />
-      </div>
-      <slot></slot>
-      <div v-show="isShowContentBlocker" class="content-blocker"></div>
-    </div>
-
-    <!-- Ручки для ресайза -->
-    <div
-      class="resize-handle resize-top"
-      @mousedown="startResize($event, 'top')"
-    ></div>
-    <div
-      class="resize-handle resize-right"
-      @mousedown="startResize($event, 'right')"
-    ></div>
-    <div
-      class="resize-handle resize-bottom"
-      @mousedown="startResize($event, 'bottom')"
-    ></div>
-    <div
-      class="resize-handle resize-left"
-      @mousedown="startResize($event, 'left')"
-    ></div>
-    <div
-      class="resize-handle resize-top-left"
-      @mousedown="startResize($event, 'top-left')"
-    ></div>
-    <div
-      class="resize-handle resize-top-right"
-      @mousedown="startResize($event, 'top-right')"
-    ></div>
-    <div
-      class="resize-handle resize-bottom-left"
-      @mousedown="startResize($event, 'bottom-left')"
-    ></div>
-    <div
-      class="resize-handle resize-bottom-right"
-      @mousedown="startResize($event, 'bottom-right')"
-    ></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useDraggable, useFullscreen } from '@vueuse/core'
-import type { UI_I_WindowCollapsedData } from '~/components/atoms/window/lib/models/interfaces'
-import {
-  minWidth,
-  minHeight,
-  headerHeight,
-  windowPadding,
-} from '~/components/atoms/window/lib/config/config'
-
-const props = withDefaults(
-  defineProps<{
-    top: number
-    left: number
-    width: number
-    height: number
-    title: string
-    loading?: boolean
-  }>(),
-  {
-    loading: false,
-  }
-)
-const emits = defineEmits<{
-  (event: 'hide'): void
-}>()
-
-const windowContent = ref<any>(null)
-const { toggle } = useFullscreen(windowContent)
-
-const headerEl = ref(null)
-const isShowContentBlocker = ref<boolean>(false)
-
-const leftLocal = ref<number>(props.left)
-const topLocal = ref<number>(props.top - headerHeight)
-const widthLocal = ref<number>(Math.max(minWidth, props.width))
-const heightLocal = ref<number>(
-  Math.max(minHeight, props.height + headerHeight)
-)
-
-const collapseData = ref<UI_I_WindowCollapsedData>({
-  isCollapsed: false,
-  cashTop: -1,
-  cashLeft: -1,
-  cashWidth: -1,
-  cashHeight: -1,
-})
-
-// Используем vueuse для перетаскивания
-useDraggable(headerEl, {
-  initialValue: { x: leftLocal.value, y: topLocal.value },
-  onMove({ x: newX, y: newY }) {
-    leftLocal.value = newX
-    topLocal.value = newY
-  },
-  onStart() {
-    isShowContentBlocker.value = true
-    if (!collapseData.value.isCollapsed) {
-      collapseData.value.cashTop = topLocal.value
-      collapseData.value.cashLeft = leftLocal.value
-      collapseData.value.cashWidth = widthLocal.value
-      collapseData.value.cashHeight = heightLocal.value
-    }
-  },
-  onEnd() {
-    isShowContentBlocker.value = false
-    fixPosition()
-  },
-})
-
-const fixSize = (): void => {
-  const globalWindowWidth = window.innerWidth
-  const globalWindowHeight = window.innerHeight
-
-  widthLocal.value = Math.min(
-    globalWindowWidth - windowPadding * 2,
-    widthLocal.value
-  )
-  heightLocal.value = Math.min(
-    globalWindowHeight - windowPadding * 2,
-    heightLocal.value
-  )
-}
-const fixPosition = (): void => {
-  const globalWindowWidth = window.innerWidth
-  const globalWindowHeight = window.innerHeight
-  let newX = leftLocal.value
-  let newY = topLocal.value
-
-  if (leftLocal.value + widthLocal.value > globalWindowWidth - windowPadding) {
-    newX = globalWindowWidth - widthLocal.value - windowPadding
-  } else if (leftLocal.value < windowPadding) {
-    newX = windowPadding
-  }
-
-  if (topLocal.value + heightLocal.value / 2 > globalWindowHeight) {
-    newY = globalWindowHeight - headerHeight
-    collapseData.value.isCollapsed = true
-  } else if (
-    topLocal.value + heightLocal.value >
-    globalWindowHeight - windowPadding
-  ) {
-    newY = globalWindowHeight - heightLocal.value - windowPadding
-    collapseData.value.isCollapsed = false
-  } else if (topLocal.value < windowPadding) {
-    newY = windowPadding
-    collapseData.value.isCollapsed = false
-  } else {
-    collapseData.value.isCollapsed = false
-  }
-
-  smoothMove(newX, newY)
-}
-const smoothMove = (newX: number, newY: number, duration = 100): void => {
-  const startX = leftLocal.value
-  const startY = topLocal.value
-
-  // Время начала анимации
-  const startTime = performance.now()
-
-  // Функция анимации
-  const animate = (currentTime: number): void => {
-    // Прошедшее время с начала анимации
-    const elapsedTime = currentTime - startTime
-
-    // Прогресс анимации (от 0 до 1)
-    const progress = Math.min(elapsedTime / duration, 1)
-
-    // Вычисляем новые координаты с помощью линейной интерполяции
-    leftLocal.value = startX + (newX - startX) * progress
-    topLocal.value = startY + (newY - startY) * progress
-
-    // Если анимация не завершена, продолжаем
-    if (progress < 1) {
-      requestAnimationFrame(animate)
-    }
-  }
-
-  // Запускаем анимацию
-  requestAnimationFrame(animate)
-}
-
-const onCollapse = (): void => {
-  collapseData.value.isCollapsed = !collapseData.value.isCollapsed
-
-  if (collapseData.value.isCollapsed) {
-    collapseData.value.cashTop = topLocal.value
-    collapseData.value.cashLeft = leftLocal.value
-    collapseData.value.cashWidth = widthLocal.value
-    collapseData.value.cashHeight = heightLocal.value
-
-    const globalWindowWidth = window.innerWidth
-    const globalWindowHeight = window.innerHeight
-
-    widthLocal.value = minWidth
-    // heightLocal.value = minHeight
-    leftLocal.value = globalWindowWidth - widthLocal.value - windowPadding
-    topLocal.value = globalWindowHeight - headerHeight
-    fixPosition()
-  } else {
-    leftLocal.value = collapseData.value.cashLeft
-    topLocal.value = collapseData.value.cashTop
-    widthLocal.value = collapseData.value.cashWidth
-    heightLocal.value = collapseData.value.cashHeight
-    fixPosition()
-  }
-}
-
-// Функция для ресайза
-const startResize = (e: any, direction: any): void => {
-  e.preventDefault()
-
-  const startX = e.clientX
-  const startY = e.clientY
-  const startWidth = widthLocal.value
-  const startHeight = heightLocal.value
-  const startLeft = leftLocal.value
-  const startTop = topLocal.value
-
-  const onMouseMove = (e: any): void => {
-    const deltaX = e.clientX - startX
-    const deltaY = e.clientY - startY
-
-    if (direction.includes('right')) {
-      widthLocal.value = Math.max(minWidth, startWidth + deltaX)
-    }
-    if (direction.includes('bottom')) {
-      heightLocal.value = Math.max(minHeight, startHeight + deltaY)
-    }
-    if (direction.includes('left')) {
-      const newWidth = Math.max(minWidth, startWidth - deltaX)
-      if (newWidth !== widthLocal.value) {
-        leftLocal.value = startLeft + deltaX
-        widthLocal.value = newWidth
-      }
-    }
-    if (direction.includes('top')) {
-      const newHeight = Math.max(minHeight, startHeight - deltaY)
-      if (newHeight !== heightLocal.value) {
-        topLocal.value = startTop + deltaY
-        heightLocal.value = newHeight
-      }
-    }
-    fixSize()
-  }
-
-  const onMouseUp = (): void => {
-    document.removeEventListener('mousemove', onMouseMove)
-    document.removeEventListener('mouseup', onMouseUp)
-    isShowContentBlocker.value = false
-    fixPosition()
-  }
-
-  document.addEventListener('mousemove', onMouseMove)
-  document.addEventListener('mouseup', onMouseUp)
-  isShowContentBlocker.value = true
-}
-
-let resizeTimer: any = null
-const globalWindowResize = (): void => {
-  clearTimeout(resizeTimer)
-
-  resizeTimer = setTimeout(() => {
-    fixSize()
-    fixPosition()
-  }, 250)
-}
-onMounted(() => {
-  window.addEventListener('resize', globalWindowResize)
-})
-onUnmounted(() => {
-  window.removeEventListener('resize', globalWindowResize)
-})
-
-const onHide = (): void => {
-  emits('hide')
-}
-</script>
-
-<style lang="scss">
-.window-container {
-  position: absolute;
-  border-radius: 6px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-  overflow: hidden;
-  background-color: #fff;
-  display: flex;
-  flex-direction: column;
-  //min-width: 300px;
-  //min-height: 200px;
-  z-index: var(--z-toast);
-
-  &.loading {
-    opacity: 0.5;
-  }
-
-  .window-header {
-    background-color: #314351;
-    color: white;
-    padding: 6px 12px;
-    cursor: move;
-    user-select: none;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .window-title {
-      font-size: 13px;
-    }
-
-    .window-btn {
-      background: none;
-      border: none;
-      color: #e4e4e4;
-      cursor: pointer;
-      width: 20px;
-      height: 20px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &:hover {
-        color: #ffffff;
-      }
-    }
-  }
-
-  .window-content {
-    position: relative;
-    flex-grow: 1;
-
-    .content-blocker {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 1;
-    }
-  }
-
-  .resize-handle {
-    position: absolute;
-    background: transparent;
-    z-index: 10;
-
-    &.resize-top {
-      top: -3px;
-      left: 0;
-      right: 0;
-      height: 6px;
-      cursor: n-resize;
-    }
-
-    &.resize-right {
-      top: 0;
-      right: -3px;
-      bottom: 0;
-      width: 6px;
-      cursor: e-resize;
-    }
-
-    &.resize-bottom {
-      bottom: -3px;
-      left: 0;
-      right: 0;
-      height: 6px;
-      cursor: s-resize;
-    }
-
-    &.resize-left {
-      top: 0;
-      left: -3px;
-      bottom: 0;
-      width: 6px;
-      cursor: w-resize;
-    }
-
-    &.resize-top-left {
-      top: -6px;
-      left: -6px;
-      width: 12px;
-      height: 12px;
-      cursor: nw-resize;
-    }
-
-    &.resize-top-right {
-      top: -6px;
-      right: -6px;
-      width: 12px;
-      height: 12px;
-      cursor: ne-resize;
-    }
-
-    &.resize-bottom-left {
-      bottom: -6px;
-      left: -6px;
-      width: 12px;
-      height: 12px;
-      cursor: sw-resize;
-    }
-
-    &.resize-bottom-right {
-      bottom: -6px;
-      right: -6px;
-      width: 12px;
-      height: 12px;
-      cursor: se-resize;
-    }
-  }
-}
-</style>
+<template>
+  <div
+    :class="['window-container', { loading: props.loading }]"
+    :style="{
+      left: leftLocal + 'px',
+      top: topLocal + 'px',
+      width: widthLocal + 'px',
+      height: heightLocal + 'px',
+    }"
+  >
+    <div
+      ref="headerEl"
+      class="window-header"
+      :style="{ height: headerHeight + 'px' }"
+    >
+      <slot name="header">
+        <div class="window-title text-ellipsis">{{ props.title }}</div>
+      </slot>
+
+      <div class="flex-align-center gap-2">
+        <button class="window-btn window-hide" @click="onCollapse">
+          <ui-icon
+            :name="collapseData.isCollapsed ? 'arrow' : 'check-line'"
+            class="hide-icon"
+            width="16"
+            height="16"
+          />
+        </button>
+        <button class="window-btn window-view-full-screen" @click="toggle">
+          <ui-icon
+            name="view-full-screen"
+            class="view-full-screen-icon"
+            width="14"
+            height="14"
+          />
+        </button>
+        <button class="window-btn window-close" @click="onHide">
+          <ui-icon name="close" class="close-icon" width="16" height="16" />
+        </button>
+      </div>
+    </div>
+
+    <div ref="windowContent" class="window-content">
+      <div v-show="props.loading" class="absolute-center">
+        <ui-icon name="spinner" />
+      </div>
+      <slot></slot>
+      <div v-show="isShowContentBlocker" class="content-blocker"></div>
+    </div>
+
+    <!-- Ручки для ресайза -->
+    <div
+      class="resize-handle resize-top"
+      @mousedown="startResize($event, 'top')"
+    ></div>
+    <div
+      class="resize-handle resize-right"
+      @mousedown="startResize($event, 'right')"
+    ></div>
+    <div
+      class="resize-handle resize-bottom"
+      @mousedown="startResize($event, 'bottom')"
+    ></div>
+    <div
+      class="resize-handle resize-left"
+      @mousedown="startResize($event, 'left')"
+    ></div>
+    <div
+      class="resize-handle resize-top-left"
+      @mousedown="startResize($event, 'top-left')"
+    ></div>
+    <div
+      class="resize-handle resize-top-right"
+      @mousedown="startResize($event, 'top-right')"
+    ></div>
+    <div
+      class="resize-handle resize-bottom-left"
+      @mousedown="startResize($event, 'bottom-left')"
+    ></div>
+    <div
+      class="resize-handle resize-bottom-right"
+      @mousedown="startResize($event, 'bottom-right')"
+    ></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDraggable, useFullscreen } from '@vueuse/core'
+import type { UI_I_WindowCollapsedData } from '~/components/atoms/window/lib/models/interfaces'
+import {
+  minWidth,
+  minHeight,
+  headerHeight,
+  windowPadding,
+} from '~/components/atoms/window/lib/config/config'
+
+const props = withDefaults(
+  defineProps<{
+    top: number
+    left: number
+    width: number
+    height: number
+    title: string
+    loading?: boolean
+  }>(),
+  {
+    loading: false,
+  }
+)
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+
+const windowContent = ref<any>(null)
+const { toggle } = useFullscreen(windowContent)
+
+const headerEl = ref(null)
+const isShowContentBlocker = ref<boolean>(false)
+
+const leftLocal = ref<number>(props.left)
+const topLocal = ref<number>(props.top - headerHeight)
+const widthLocal = ref<number>(Math.max(minWidth, props.width))
+const heightLocal = ref<number>(
+  Math.max(minHeight, props.height + headerHeight)
+)
+
+const collapseData = ref<UI_I_WindowCollapsedData>({
+  isCollapsed: false,
+  cashTop: -1,
+  cashLeft: -1,
+  cashWidth: -1,
+  cashHeight: -1,
+})
+
+// Используем vueuse для перетаскивания
+useDraggable(headerEl, {
+  initialValue: { x: leftLocal.value, y: topLocal.value },
+  onMove({ x: newX, y: newY }) {
+    leftLocal.value = newX
+    topLocal.value = newY
+  },
+  onStart() {
+    isShowContentBlocker.value = true
+    if (!collapseData.value.isCollapsed) {
+      collapseData.value.cashTop = topLocal.value
+      collapseData.value.cashLeft = leftLocal.value
+      collapseData.value.cashWidth = widthLocal.value
+      collapseData.value.cashHeight = heightLocal.value
+    }
+  },
+  onEnd() {
+    isShowContentBlocker.value = false
+    fixPosition()
+  },
+})
+
+const fixSize = (): void => {
+  const globalWindowWidth = window.innerWidth
+  const globalWindowHeight = window.innerHeight
+
+  widthLocal.value = Math.min(
+    globalWindowWidth - windowPadding * 2,
+    widthLocal.value
+  )
+  heightLocal.value = Math.min(
+    globalWindowHeight - windowPadding * 2,
+    heightLocal.value
+  )
+}
+const fixPosition = (): void => {
+  const globalWindowWidth = window.innerWidth
+  const globalWindowHeight = window.innerHeight
+  let newX = leftLocal.value
+  let newY = topLocal.value
+
+  if (leftLocal.value + widthLocal.value > globalWindowWidth - windowPadding) {
+    newX = globalWindowWidth - widthLocal.value - windowPadding
+  } else if (leftLocal.value < windowPadding) {
+    newX = windowPadding
+  }
+
+  if (topLocal.value + heightLocal.value / 2 > globalWindowHeight) {
+    newY = globalWindowHeight - headerHeight
+    collapseData.value.isCollapsed = true
+  } else if (
+    topLocal.value + heightLocal.value >
+    globalWindowHeight - windowPadding
+  ) {
+    newY = globalWindowHeight - heightLocal.value - windowPadding
+    collapseData.value.isCollapsed = false
+  } else if (topLocal.value < windowPadding) {
+    newY = windowPadding
+    collapseData.value.isCollapsed = false
+  } else {
+    collapseData.value.isCollapsed = false
+  }
+
+  smoothMove(newX, newY)
+}
+const smoothMove = (newX: number, newY: number, duration = 100): void => {
+  const startX = leftLocal.value
+  const startY = topLocal.value
+
+  // Время начала анимации
+  const startTime = performance.now()
+
+  // Функция анимации
+  const animate = (currentTime: number): void => {
+    // Прошедшее время с начала анимации
+    const elapsedTime = currentTime - startTime
+
+    // Прогресс анимации (от 0 до 1)
+    const progress = Math.min(elapsedTime / duration, 1)
+
+    // Вычисляем новые координаты с помощью линейной интерполяции
+    leftLocal.value = startX + (newX - startX) * progress
+    topLocal.value = startY + (newY - startY) * progress
+
+    // Если анимация не завершена, продолжаем
+    if (progress < 1) {
+      requestAnimationFrame(animate)
+    }
+  }
+
+  // Запускаем анимацию
+  requestAnimationFrame(animate)
+}
+
+const onCollapse = (): void => {
+  collapseData.value.isCollapsed = !collapseData.value.isCollapsed
+
+  if (collapseData.value.isCollapsed) {
+    collapseData.value.cashTop = topLocal.value
+    collapseData.value.cashLeft = leftLocal.value
+    collapseData.value.cashWidth = widthLocal.value
+    collapseData.value.cashHeight = heightLocal.value
+
+    const globalWindowWidth = window.innerWidth
+    const globalWindowHeight = window.innerHeight
+
+    widthLocal.value = minWidth
+    // heightLocal.value = minHeight
+    leftLocal.value = globalWindowWidth - widthLocal.value - windowPadding
+    topLocal.value = globalWindowHeight - headerHeight
+    fixPosition()
+  } else {
+    leftLocal.value = collapseData.value.cashLeft
+    topLocal.value = collapseData.value.cashTop
+    widthLocal.value = collapseData.value.cashWidth
+    heightLocal.value = collapseData.value.cashHeight
+    fixPosition()
+  }
+}
+
+// Функция для ресайза
+const startResize = (e: any, direction: any): void => {
+  e.preventDefault()
+
+  const startX = e.clientX
+  const startY = e.clientY
+  const startWidth = widthLocal.value
+  const startHeight = heightLocal.value
+  const startLeft = leftLocal.value
+  const startTop = topLocal.value
+
+  const onMouseMove = (e: any): void => {
+    const deltaX = e.clientX - startX
+    const deltaY = e.clientY - startY
+
+    if (direction.includes('right')) {
+      widthLocal.value = Math.max(minWidth, startWidth + deltaX)
+    }
+    if (direction.includes('bottom')) {
+      heightLocal.value = Math.max(minHeight, startHeight + deltaY)
+    }
+    if (direction.includes('left')) {
+      const newWidth = Math.max(minWidth, startWidth - deltaX)
+      if (newWidth !== widthLocal.value) {
+        leftLocal.value = startLeft + deltaX
+        widthLocal.value = newWidth
+      }
+    }
+    if (direction.includes('top')) {
+      const newHeight = Math.max(minHeight, startHeight - deltaY)
+      if (newHeight !== heightLocal.value) {
+        topLocal.value = startTop + deltaY
+        heightLocal.value = newHeight
+      }
+    }
+    fixSize()
+  }
+
+  const onMouseUp = (): void => {
+    document.removeEventListener('mousemove', onMouseMove)
+    document.removeEventListener('mouseup', onMouseUp)
+    isShowContentBlocker.value = false
+    fixPosition()
+  }
+
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', onMouseUp)
+  isShowContentBlocker.value = true
+}
+
+let resizeTimer: any = null
+const globalWindowResize = (): void => {
+  clearTimeout(resizeTimer)
+
+  resizeTimer = setTimeout(() => {
+    fixSize()
+    fixPosition()
+  }, 250)
+}
+onMounted(() => {
+  window.addEventListener('resize', globalWindowResize)
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', globalWindowResize)
+})
+
+const onHide = (): void => {
+  emits('hide')
+}
+</script>
+
+<style lang="scss">
+.window-container {
+  position: absolute;
+  border-radius: 6px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  //min-width: 300px;
+  //min-height: 200px;
+  z-index: var(--z-toast);
+
+  &.loading {
+    opacity: 0.5;
+  }
+
+  .window-header {
+    background-color: #314351;
+    color: white;
+    padding: 6px 12px;
+    cursor: move;
+    user-select: none;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .window-title {
+      font-size: 13px;
+    }
+
+    .window-btn {
+      background: none;
+      border: none;
+      color: #e4e4e4;
+      cursor: pointer;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &:hover {
+        color: #ffffff;
+      }
+    }
+  }
+
+  .window-content {
+    position: relative;
+    flex-grow: 1;
+
+    .content-blocker {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+  }
+
+  .resize-handle {
+    position: absolute;
+    background: transparent;
+    z-index: 10;
+
+    &.resize-top {
+      top: -3px;
+      left: 0;
+      right: 0;
+      height: 6px;
+      cursor: n-resize;
+    }
+
+    &.resize-right {
+      top: 0;
+      right: -3px;
+      bottom: 0;
+      width: 6px;
+      cursor: e-resize;
+    }
+
+    &.resize-bottom {
+      bottom: -3px;
+      left: 0;
+      right: 0;
+      height: 6px;
+      cursor: s-resize;
+    }
+
+    &.resize-left {
+      top: 0;
+      left: -3px;
+      bottom: 0;
+      width: 6px;
+      cursor: w-resize;
+    }
+
+    &.resize-top-left {
+      top: -6px;
+      left: -6px;
+      width: 12px;
+      height: 12px;
+      cursor: nw-resize;
+    }
+
+    &.resize-top-right {
+      top: -6px;
+      right: -6px;
+      width: 12px;
+      height: 12px;
+      cursor: ne-resize;
+    }
+
+    &.resize-bottom-left {
+      bottom: -6px;
+      left: -6px;
+      width: 12px;
+      height: 12px;
+      cursor: sw-resize;
+    }
+
+    &.resize-bottom-right {
+      bottom: -6px;
+      right: -6px;
+      width: 12px;
+      height: 12px;
+      cursor: se-resize;
+    }
+  }
+}
+</style>