adata-ui 2.1.40-beta.1 → 2.1.40-beta.10

package/components/overlays/modal/AModalV2.vue

@@ -0,0 +1,388 @@
+<script setup lang="ts">
+import { onKeyStroke, useScrollLock, useWindowSize } from '@vueuse/core'
+
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'container' | 'fullscreen'
+
+const props = withDefaults(defineProps<{
+  title?: string
+  size?: ModalSize
+  width?: string
+  closeOnOverlay?: boolean
+  closeOnEsc?: boolean
+  lockScroll?: boolean
+  persistent?: boolean
+  transition?: boolean
+  contentClass?: string
+  hideHeader?: boolean
+  blur?: boolean | 'sm' | 'md' | 'lg' | 'xl'
+  mobileSheet?: boolean
+  swipeToClose?: boolean
+  swipeThreshold?: number
+  showDragHandle?: boolean
+}>(), {
+  size: 'md',
+  closeOnOverlay: true,
+  closeOnEsc: true,
+  lockScroll: true,
+  persistent: false,
+  transition: true,
+  hideHeader: false,
+  blur: false,
+  mobileSheet: true,
+  swipeToClose: true,
+  swipeThreshold: 65,
+  showDragHandle: true,
+})
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'open'): void
+}>()
+
+const open = defineModel<boolean>({ required: true })
+
+const contentRef = ref<HTMLElement | null>(null)
+const overlayRef = ref<HTMLElement | null>(null)
+const swipeClosing = ref(false)
+const bodyScrollLocked = useScrollLock(import.meta.client ? document.body : null)
+const { width: windowWidth } = useWindowSize()
+
+const isMobile = computed(() => windowWidth.value < 1025)
+const isSheet = computed(() => isMobile.value && props.mobileSheet)
+
+const sizeStyle = computed(() => {
+  if (isSheet.value) return { width: '100%' }
+  if (props.width) return { width: props.width }
+
+  switch (props.size) {
+    case 'sm': return { width: '380px' }
+    case 'md': return { width: '520px' }
+    case 'lg': return { width: '720px' }
+    case 'xl': return { width: '1100px' }
+    case 'container': return {}
+    case 'fullscreen': return { width: '100vw', height: '100vh' }
+    default: return { width: '520px' }
+  }
+})
+
+const blurClass = computed(() => {
+  if (!props.blur) return ''
+
+  switch (props.blur) {
+    case 'sm': return 'backdrop-blur-sm'
+    case 'md': return 'backdrop-blur-md'
+    case 'lg': return 'backdrop-blur-lg'
+    case 'xl': return 'backdrop-blur-xl'
+    default: return 'backdrop-blur'
+  }
+})
+
+const overlayClass = computed(() => {
+  const base = ['modal-v2-overlay fixed inset-0 z-[10000] flex bg-black/40 dark:bg-black/60']
+
+  if (isSheet.value) {
+    base.push('items-end justify-stretch')
+  }
+  else {
+    base.push(props.size === 'container' ? 'items-center justify-center' : 'items-center justify-center p-4')
+  }
+
+  if (blurClass.value) base.push(blurClass.value)
+
+  return base.join(' ')
+})
+
+const contentBaseClass = computed(() => {
+  const base = ['modal-v2-content flex flex-col overflow-hidden border bg-white shadow-2xl dark:bg-gray-900']
+
+  if (isSheet.value) {
+    base.push('w-full max-w-none max-h-[100dvh] rounded-t-2xl rounded-b-none border-x-0 border-b-0 border-t border-gray-200 dark:border-gray-800')
+  }
+  else {
+    const radius = props.size === 'fullscreen' ? 'rounded-none' : 'rounded-2xl'
+    const widthCls = props.size === 'container'
+      ? ' w-full max-w-screen-sm md:max-w-screen-md lg:max-w-screen-lg xl:max-w-screen-xl 2xl:max-w-screen-2xl'
+      : ''
+    base.push(`max-h-[calc(100vh-2rem)] border-gray-200 dark:border-gray-800 ${radius}${widthCls}`)
+  }
+
+  return base.join(' ')
+})
+
+const overlayTransitionName = computed(() => {
+  if (swipeClosing.value) return ''
+  return props.transition ? 'modal-v2-overlay' : ''
+})
+const contentTransitionName = computed(() => {
+  if (swipeClosing.value || !props.transition) return ''
+  return isSheet.value ? 'modal-v2-sheet' : 'modal-v2-content'
+})
+
+function closeIfAllowed() {
+  if (props.persistent) return
+  open.value = false
+}
+
+function onOverlayClick(event: MouseEvent) {
+  if (!props.closeOnOverlay || props.persistent) return
+  if (event.target === event.currentTarget) {
+    open.value = false
+  }
+}
+
+onKeyStroke('Escape', () => {
+  if (!open.value) return
+  if (!props.closeOnEsc || props.persistent) return
+  open.value = false
+})
+
+function setScrollbarCompensation(active: boolean) {
+  if (!import.meta.client) return
+
+  if (active) {
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
+    document.body.style.paddingRight = scrollbarWidth > 0 ? `${scrollbarWidth}px` : ''
+  }
+  else {
+    document.body.style.paddingRight = ''
+  }
+}
+
+watch(open, (value) => {
+  if (props.lockScroll) {
+    if (value) setScrollbarCompensation(true)
+    bodyScrollLocked.value = value
+    if (!value) setScrollbarCompensation(false)
+  }
+
+  if (value) emit('open')
+  else emit('close')
+})
+
+onBeforeUnmount(() => {
+  if (bodyScrollLocked.value) {
+    bodyScrollLocked.value = false
+  }
+  setScrollbarCompensation(false)
+})
+
+const dragging = ref(false)
+const dragStartY = ref(0)
+const dragDelta = ref(0)
+
+function canSwipe() {
+  return isSheet.value && props.swipeToClose && !props.persistent
+}
+
+function setTransform(value: string) {
+  if (contentRef.value) {
+    contentRef.value.style.transform = value
+  }
+}
+
+function onTouchStart(event: TouchEvent) {
+  if (!canSwipe()) return
+  dragging.value = true
+  dragStartY.value = event.touches[0].clientY
+  dragDelta.value = 0
+
+  if (contentRef.value) {
+    contentRef.value.style.transition = 'none'
+  }
+}
+
+function onTouchMove(event: TouchEvent) {
+  if (!dragging.value || !canSwipe()) return
+
+  const delta = event.touches[0].clientY - dragStartY.value
+  if (delta < 0) {
+    dragDelta.value = 0
+    setTransform('')
+    return
+  }
+
+  dragDelta.value = delta
+  setTransform(`translateY(${delta}px)`)
+}
+
+function prefersReducedMotion() {
+  return import.meta.client && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
+function animateClose() {
+  const content = contentRef.value
+
+  if (!content || prefersReducedMotion()) {
+    open.value = false
+    return
+  }
+
+  swipeClosing.value = true
+
+  let done = false
+  const finish = () => {
+    if (done) return
+    done = true
+    content.removeEventListener('transitionend', onTransitionEnd)
+    open.value = false
+    swipeClosing.value = false
+  }
+
+  function onTransitionEnd(event: TransitionEvent) {
+    if (event.target === content && event.propertyName === 'transform') {
+      finish()
+    }
+  }
+
+  content.addEventListener('transitionend', onTransitionEnd)
+  setTimeout(finish, 320)
+
+  requestAnimationFrame(() => {
+    content.style.transition = 'transform 260ms cubic-bezier(0.22, 1, 0.36, 1)'
+    content.style.transform = 'translateY(100%)'
+
+    if (overlayRef.value) {
+      overlayRef.value.style.transition = 'opacity 260ms ease'
+      overlayRef.value.style.opacity = '0'
+    }
+  })
+}
+
+function onTouchEnd() {
+  if (!dragging.value) return
+  dragging.value = false
+
+  const shouldClose = dragDelta.value > props.swipeThreshold && canSwipe()
+
+  if (shouldClose) {
+    animateClose()
+  }
+  else {
+    if (contentRef.value) {
+      contentRef.value.style.transition = 'transform 220ms cubic-bezier(0.22, 1, 0.36, 1)'
+      contentRef.value.style.transform = ''
+    }
+  }
+
+  dragDelta.value = 0
+}
+</script>
+
+<template>
+  <client-only>
+    <teleport to="body">
+      <transition :name="overlayTransitionName">
+        <div
+          v-if="open"
+          ref="overlayRef"
+          :class="overlayClass"
+          @mousedown="onOverlayClick"
+        >
+          <transition :name="contentTransitionName" appear>
+            <div
+              v-if="open"
+              ref="contentRef"
+              :class="contentBaseClass"
+              :style="sizeStyle"
+              @mousedown.stop
+            >
+              <div
+                v-if="isSheet && showDragHandle"
+                class="flex shrink-0 cursor-grab touch-none justify-center py-2"
+                @touchstart.passive="onTouchStart"
+                @touchmove="onTouchMove"
+                @touchend="onTouchEnd"
+                @touchcancel="onTouchEnd"
+              >
+                <div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600" />
+              </div>
+
+              <header
+                v-if="!hideHeader"
+                class="flex shrink-0 items-center justify-between gap-3 border-b border-gray-200 px-5 py-4 dark:border-gray-800"
+                @touchstart.passive="onTouchStart"
+                @touchmove="onTouchMove"
+                @touchend="onTouchEnd"
+                @touchcancel="onTouchEnd"
+              >
+                <slot name="header">
+                  <h2 v-if="title" class="text-base font-semibold text-gray-900 dark:text-gray-100">
+                    {{ title }}
+                  </h2>
+                </slot>
+                <button
+                  type="button"
+                  class="ml-auto rounded-md p-1 transition hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                  @click="closeIfAllowed"
+                >
+                  <a-icon-x-mark class="size-4" />
+                </button>
+              </header>
+
+              <div class="min-h-0 flex-1 overflow-auto" :class="contentClass">
+                <slot :close="closeIfAllowed" />
+              </div>
+
+              <footer
+                v-if="$slots.footer"
+                class="shrink-0 border-t border-gray-200 px-5 py-4 dark:border-gray-800"
+              >
+                <slot name="footer" :close="closeIfAllowed" />
+              </footer>
+            </div>
+          </transition>
+        </div>
+      </transition>
+    </teleport>
+  </client-only>
+</template>
+
+<style scoped lang="scss">
+.modal-v2-overlay-enter-active {
+  transition: opacity 200ms ease-out;
+}
+
+.modal-v2-overlay-leave-active {
+  transition: opacity 150ms ease-in;
+}
+
+.modal-v2-overlay-enter-from,
+.modal-v2-overlay-leave-to {
+  opacity: 0;
+}
+
+.modal-v2-content-enter-active {
+  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease-out;
+}
+
+.modal-v2-content-leave-active {
+  transition: transform 150ms ease-in, opacity 150ms ease-in;
+}
+
+.modal-v2-content-enter-from,
+.modal-v2-content-leave-to {
+  opacity: 0;
+  transform: translateY(8px) scale(0.98);
+}
+
+.modal-v2-sheet-enter-active,
+.modal-v2-sheet-leave-active {
+  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.modal-v2-sheet-enter-from,
+.modal-v2-sheet-leave-to {
+  transform: translateY(100%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal-v2-overlay-enter-active,
+  .modal-v2-overlay-leave-active,
+  .modal-v2-content-enter-active,
+  .modal-v2-content-leave-active,
+  .modal-v2-sheet-enter-active,
+  .modal-v2-sheet-leave-active {
+    transition: none;
+  }
+}
+</style>

package/composables/useAccessTokenCookie.ts

@@ -0,0 +1,25 @@
+import { useUrls } from '#adata-ui/composables/useUrls'
+
+/**
+ * Единая точка записи куки accessToken (логин, 2FA, OTP, обмен по auth-сессии).
+ * Домен должен совпадать с доменом удаления в resetTokens (adata-common-auth),
+ * иначе кука не находится на следующей загрузке и логин-флоу зацикливается на reload.
+ */
+export async function writeAccessTokenCookie(accessToken: string, expireIn?: number): Promise<boolean> {
+  const { mode } = useUrls()
+  const sharedDomain = `${mode}.kz`
+  const onSharedDomain = location.hostname === sharedDomain || location.hostname.endsWith(`.${sharedDomain}`)
+  const maxAge = Number(expireIn) > 0 ? Number(expireIn) : undefined
+
+  useCookie('accessToken', {
+    maxAge,
+    // на localhost/превью-хостах атрибут domain невалиден — пишем host-only куку
+    domain: onSharedDomain ? `.${sharedDomain}` : undefined,
+    path: '/',
+    secure: location.protocol === 'https:',
+  }).value = accessToken
+
+  // useCookie пишет document.cookie на следующем flush, не синхронно
+  await nextTick()
+  return document.cookie.split('; ').some(part => part.startsWith('accessToken='))
+}

package/composables/useChipOverflow.ts

@@ -0,0 +1,92 @@
+import type { ComputedRef, Ref } from 'vue'
+
+interface UseChipOverflowOptions {
+  container: Ref<HTMLElement | null>
+  measure: Ref<HTMLElement | null>
+  count: Ref<number>
+  contentKey?: Ref<unknown>
+  gap?: number
+}
+
+interface UseChipOverflow {
+  visibleCount: Ref<number>
+  hiddenCount: ComputedRef<number>
+}
+
+export function useChipOverflow(options: UseChipOverflowOptions): UseChipOverflow {
+  const { container, measure, count, contentKey, gap = 6 } = options
+
+  const availableWidth = ref(0)
+  const visibleCount = ref(0)
+
+  // Ceil so a chip is only counted as fitting when it fully fits;
+  // sub-pixel underestimates would let flexbox squeeze visible chips into truncation.
+  function chipWidth(el: HTMLElement): number {
+    return Math.ceil(el.getBoundingClientRect().width)
+  }
+
+  function recompute() {
+    const total = count.value
+    if (total <= 0) {
+      visibleCount.value = 0
+      return
+    }
+
+    const avail = availableWidth.value
+    const root = measure.value
+
+    if (!avail || !root) {
+      visibleCount.value = total
+      return
+    }
+
+    const chips = (Array.from(root.children) as HTMLElement[]).slice(0, total)
+
+    let used = 0
+    let fit = 0
+    for (let i = 0; i < chips.length; i++) {
+      const width = chipWidth(chips[i]) + (i > 0 ? gap : 0)
+      if (used + width > avail) break
+      used += width
+      fit++
+    }
+
+    if (fit >= total) {
+      visibleCount.value = total
+      return
+    }
+
+    const badge = root.children[total] as HTMLElement | undefined
+    const badgeWidth = (badge ? chipWidth(badge) : 0) + gap
+    while (fit > 1 && used + badgeWidth > avail) {
+      used -= chipWidth(chips[fit - 1]) + gap
+      fit--
+    }
+
+    visibleCount.value = Math.max(1, fit)
+  }
+
+  let resizeObserver: ResizeObserver | null = null
+
+  onMounted(() => {
+    if (container.value) {
+      availableWidth.value = Math.floor(container.value.clientWidth)
+      resizeObserver = new ResizeObserver((entries) => {
+        availableWidth.value = Math.floor(entries[0]?.contentRect.width ?? 0)
+      })
+      resizeObserver.observe(container.value)
+    }
+    recompute()
+  })
+
+  onUnmounted(() => resizeObserver?.disconnect())
+
+  watch(
+    contentKey ? [availableWidth, count, contentKey] : [availableWidth, count],
+    () => nextTick(recompute),
+  )
+
+  const hiddenCount = computed(() => Math.max(0, count.value - visibleCount.value))
+
+  return { visibleCount, hiddenCount }
+}

package/composables/useHeaderNavigationLinks.ts

@@ -9,12 +9,9 @@ import IconBlock from '#adata-ui/icons/block.vue'
 import IconDollar from '#adata-ui/icons/currency/currency-dollar.vue'
 import IconWork from '#adata-ui/icons/work-bag.vue'
 import IconDocument from '#adata-ui/icons/hdocument.vue'
-import IconCheck from '#adata-ui/icons/hcheck.vue'
-import IconFile from '#adata-ui/icons/file/file.vue'
 import IconCheckCircle from '#adata-ui/icons/check/check-circle.vue'
 import IconCar from '#adata-ui/icons/car.vue'
 import IconTruck from '#adata-ui/icons/truck.vue'
-import IconClipboardText from '#adata-ui/icons/clipboard-text.vue'
 import IconArrowGraph from '#adata-ui/icons/arrow/arrow-graph-up.vue'
 import IconMedal from '#adata-ui/icons/medal.vue'
 import IconCompany from '#adata-ui/icons/company.vue'
@@ -26,24 +23,27 @@ import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
 import IconLock from '#adata-ui/icons/lock.vue'
 import IconReceipt from '#adata-ui/icons/receipt.vue'
 import IconFavorite from '#adata-ui/icons/bookmark/bookmark.vue'
-// import IconReport from '#adata-ui/icons/file/file.vue'
 import IconHistory from '#adata-ui/icons/history.vue'
 import IconMessage from '#adata-ui/icons/message/message.vue'
+import AIconBriefcase from '#adata-ui/icons/briefcase.vue'
+import AIconCarSide from '#adata-ui/icons/car-side.vue'
+import AIconShieldVerified from '#adata-ui/icons/shield-verified.vue'
+import AIconCart from '#adata-ui/icons/cart.vue'
 import {
-  AIconWorkBag,
   AIconUsersThree,
-  AIconReceipt,
-  AIconCar,
   AIconArrowGraphUp,
   AIconGlobe,
-  AIconId,
-  AIconFiles,
-  AIconArrowSquareDown, AIconExpandWindow, AIconUsers, AIconWarningTriangle, AIconSearch, AIconAkimat, AIconCurrencyTenge, AIconExcelIcon
+  AIconArrowSquareDown,
+  AIconExpandWindow,
+  AIconUsers,
+  AIconWarningTriangle,
+  AIconSearch,
+  AIconAkimat,
+  AIconCurrencyTenge,
+  AIconExcelIcon, AIconFile,
 } from '#components'
 import MapPinRect from '#adata-ui/icons/map/map-pin-rect.vue'
 import MapPaper from '#adata-ui/icons/map-paper.vue'
-import ChartBar from '#adata-ui/icons/chart-bar.vue'
-import Bank from '#adata-ui/icons/bank.vue'
 import { useUrls } from '#adata-ui/composables/useUrls'
 import AiAssistant from '#adata-ui/icons/ai-assistant.vue'
 import Tasks from '#adata-ui/icons/tasks.vue'
@@ -61,7 +61,7 @@ export const useHeaderNavigationLinks = () => {
         key: 'pk',
         name: t('header.products.counterparties.label'),
         link: buildLocalizedUrl(locale, urls.pk, PAGES.pk.main),
-        icon: AIconUsersThree,
+        icon: AIconUsers,
         to: urls.pk,
         data_attribute: 'navigation-menu-counterparty-block',
         items: [
@@ -115,7 +115,7 @@ export const useHeaderNavigationLinks = () => {
         key: 'fines',
         name: t('header.products.fines.label'),
         link: buildLocalizedUrl(locale, urls.avto, PAGES.fines.main),
-        icon: AIconCar,
+        icon: AIconCarSide,
         data_attribute: 'navigation-menu-fines-block',
         items: [
           {
@@ -142,7 +142,7 @@ export const useHeaderNavigationLinks = () => {
         key: 'work',
         name: t('header.products.jobs.label'),
         link: urls.work,
-        icon: AIconWorkBag,
+        icon: AIconBriefcase,
         data_attribute: 'navigation-menu-work-block',
         items: [
           {
@@ -216,7 +216,7 @@ export const useHeaderNavigationLinks = () => {
         key: 'tenders',
         name: t('header.products.tenders.label'),
         link: urls.zakupki,
-        icon: AIconReceipt,
+        icon: AIconCart,
         is_new: true,
         to: urls.tender,
         data_attribute: 'navigation-menu-zakupki-block',
@@ -264,15 +264,39 @@ export const useHeaderNavigationLinks = () => {
         is_new: true,
         name: t('header.products.edo.label'),
         link: buildLocalizedUrl(locale, urls.edo_docs , ''),
-        icon: AIconFiles,
+        icon: AIconFile,
         data_attribute: 'navigation-menu-edo-block',
         items: [
           {
-            title: t('header.products.edo.items.l.t'),
-            subtitle: t('header.products.edo.items.l.t'),
-            icon: AIconFiles,
-            to: buildLocalizedUrl(locale, urls.edo_docs , '')
-          }
+            title: t('header.products.edo.items.docSign.t'),
+            subtitle: t('header.products.edo.items.docSign.st'),
+            icon: AIconUsers,
+            to: buildLocalizedUrl(locale, urls.edo_docs , PAGES.edo.docSign)
+          },
+          {
+            title: t('header.products.edo.items.docTemplate.t'),
+            subtitle: t('header.products.edo.items.docTemplate.st'),
+            icon: AIconUsers,
+            to: buildLocalizedUrl(locale, urls.edo_docs , PAGES.edo.docTemplate)
+          },
+          {
+            title: t('header.products.edo.items.docRisk.t'),
+            subtitle: t('header.products.edo.items.docRisk.st'),
+            icon: AIconUsers,
+            to: buildLocalizedUrl(locale, urls.edo_docs , PAGES.edo.docRisk)
+          },
+          {
+            title: t('header.products.edo.items.docCompare.t'),
+            subtitle: t('header.products.edo.items.docCompare.st'),
+            icon: AIconUsers,
+            to: buildLocalizedUrl(locale, urls.edo_docs , PAGES.edo.docCompare)
+          },
+          {
+            title: t('header.products.edo.items.docAi.t'),
+            subtitle: t('header.products.edo.items.docAi.st'),
+            icon: AIconUsers,
+            to: buildLocalizedUrl(locale, urls.edo_docs , PAGES.edo.docAi)
+          },
         ]
       },
       {
@@ -280,7 +304,7 @@ export const useHeaderNavigationLinks = () => {
         is_new: true,
         name: t('header.products.compliance.label'),
         link: buildLocalizedUrl(locale, urls.compliance, PAGES.compliance.l),
-        icon: AIconId,
+        icon: AIconShieldVerified,
         data_attribute: 'navigation-menu-compliance-block',
         items: [
           {
@@ -352,6 +376,12 @@ export const useHeaderNavigationLinks = () => {
             subtitle: t('header.products.analytics.items.subjects.subtitle'),
             icon: IconCompany,
             to: buildLocalizedUrl(locale, urls.analytics, PAGES.analytics.business)
+          },
+          {
+            title: t('header.products.analytics.items.demography.title'),
+            subtitle: t('header.products.analytics.items.demography.subtitle'),
+            icon: IconCompany,
+            to: buildLocalizedUrl(locale, urls.analytics, PAGES.analytics.demography)
           }
         ]
       },

package/icons/arrow/arrow-right.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.125 7.5H11.875" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M7.5 3.125L11.875 7.5L7.5 11.875" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+</template>
+
+<style scoped>
+
+</style>

package/icons/briefcase.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15 5.25H3C2.17157 5.25 1.5 5.92157 1.5 6.75V14.25C1.5 15.0784 2.17157 15.75 3 15.75H15C15.8284 15.75 16.5 15.0784 16.5 14.25V6.75C16.5 5.92157 15.8284 5.25 15 5.25Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M12 15.75V3.75C12 3.35218 11.842 2.97064 11.5607 2.68934C11.2794 2.40804 10.8978 2.25 10.5 2.25H7.5C7.10218 2.25 6.72064 2.40804 6.43934 2.68934C6.15804 2.97064 6 3.35218 6 3.75V15.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+</template>
+
+<style scoped>
+
+</style>