@studio-west/component-sw 0.11.9 → 0.11.11

package/src/components/SwDropdownItem.vue

@@ -0,0 +1,26 @@
+<template>
+  <li :class="style">
+    <sw-icon :icon-class="iconBefore" v-if="iconBefore.length > 0"/>
+    <slot></slot>
+  </li>
+</template>
+
+<script setup>
+import { computed } from "vue"
+import SwIcon from "@/components/SwIcon.vue"
+
+const props = defineProps({
+  class: {type: String, default: ''},
+  size: {type: String, default: ''},
+  type: {type: String, default: ''},
+  iconBefore: {type: String, default: ''},
+})
+const style = computed(() =>{
+      let s = ['sw-dropdown-item']
+      if(props.size.length > 0) s.push('sw-' + props.size)
+      if(props.type.length > 0) s.push('sw-' + props.type)
+      if(props.class.length > 0) s.push(props.class)
+      return s
+    }
+)
+</script>

package/src/components/SwDropdownNew.vue

@@ -0,0 +1,175 @@
+<template>
+  <div
+      :class="style"
+      @click="toggleClick()"
+      @mouseover.stop="toggleHover()"
+      @mouseleave.stop="toggleHover()"
+      @contextmenu.stop="toggleContext()"
+      ref="dropdownRef"
+  >
+    <slot></slot>
+    <Teleport to="body">
+      <ul
+          popover
+          ref="popupRef"
+          :id ="id"
+          class="sw-dropdown-popup"
+          :class="props.class"
+          v-if="manual || false"
+          :style="popupStyle"
+          tabindex="-1"
+      >
+        <slot name="dropdown"></slot>
+      </ul>
+    </Teleport>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, onMounted, onUnmounted, watchEffect } from "vue"
+
+const props = defineProps({
+  class: {type: String, default: ''},
+  type: {type: String, default: ''},
+  trigger: {type: String, default: "click"},
+  placement: {type: String, default: 'bottom-left'},
+  maxWidth: {type: Number, default: 0}
+})
+const manual = defineModel()
+
+const dropdownRef = ref(null)
+const popupRef = ref(null)
+const popupStyle = ref({})
+const id = Math.ceil(Math.random() * 1000)
+const repositionTrigger = ref(0)
+const style = computed(() =>{
+      let s = ['sw-dropdown']
+      if(props.type.length > 0) s.push('sw-' + props.type)
+      return s
+    }
+)
+const resizeObserver = new ResizeObserver(() => {
+  if (manual.value) repositionTrigger.value++
+  if(repositionTrigger.value > 99 ) repositionTrigger.value = 1
+})
+
+watchEffect( () => {
+ // console.log('watchEffect', repositionTrigger.value)
+  // Если popup не активен — ничего не делаем
+  if (!manual.value || !popupRef.value || !dropdownRef.value) {
+    return
+  }
+  if(repositionTrigger.value < 2) resizeObserver.observe(popupRef.value)
+  let scrollTop = window.pageYOffset || document.documentElement.scrollTop
+  let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
+  document.body.style.position = 'fixed'
+  document.body.style.top = `-${scrollTop}px`
+  document.body.style.left = `-${scrollLeft}px`
+  document.body.style.position = ''
+  document.body.style.top = ''
+  document.body.style.left = ''
+  document.documentElement.scrollTop = scrollTop
+  document.documentElement.scrollLeft = scrollLeft
+  const buttonRect = dropdownRef.value.getBoundingClientRect()
+  let viewportWidth = window.innerWidth
+  let viewportHeight = window.innerHeight
+  // Получаем высоту и ширину popup
+  let popupHeight = popupRef.value.offsetHeight;
+  let popupWidth = popupRef.value.offsetWidth;
+  // Расчет позиции popup (например, снизу кнопки)
+  // Центр по горизонтали
+  let left = buttonRect.left + (buttonRect.width / 2)  + scrollLeft
+  // Центр по вертикали
+  let top = buttonRect.top + (buttonRect.height / 2) + scrollTop
+  let deltaTop = (buttonRect.height / 2) + 8
+  const [mainPlacement, subPlacement] = props.placement.split('-', 2)
+
+  // Основное позиционирование
+  switch (mainPlacement) {
+    case "bottom":
+      top = (scrollTop + viewportHeight - popupHeight - deltaTop - 8 < top)? top - deltaTop - popupHeight : top + deltaTop
+      if(subPlacement === undefined ) left -= popupWidth / 2
+      break
+    case "top":
+      top = (scrollTop + popupHeight + deltaTop + 8 > top)? top + deltaTop : top - deltaTop - popupHeight
+      if(subPlacement === undefined ) left -= popupWidth / 2
+      break
+    case "left":
+      if(left - popupWidth - (buttonRect.width / 2) - 8 < 0) {
+        if(left + (buttonRect.width / 2) + 8 + popupWidth < viewportWidth) { // справа
+          left = left + (buttonRect.width / 2) + 8
+          top = top - (popupHeight / 2)
+        } else {
+          top = (scrollTop + popupHeight + deltaTop + 8 > top)? top + deltaTop : top - deltaTop - popupHeight
+          left = (left + (buttonRect.width / 2)  < viewportWidth )? left + (buttonRect.width / 2) - popupWidth: left - (popupWidth / 2)
+        }
+      } else { // слева
+        left = left - popupWidth - (buttonRect.width / 2) - 8
+        top = top - (popupHeight / 2)
+      }
+      break
+    case "right":
+      if(left + (buttonRect.width / 2) + 8 + popupWidth > viewportWidth ) {
+        if(left - popupWidth - (buttonRect.width / 2) - 8 > 0){
+          left = left - popupWidth - (buttonRect.width / 2) - 8 // слева
+          top = top - (popupHeight / 2)
+        } else {
+          top = (scrollTop + popupHeight + deltaTop + 8 > top)? top + deltaTop : top - deltaTop - popupHeight
+          left = left - (buttonRect.width / 2) // влево
+        }
+      } else { // справа
+        left = left + (buttonRect.width / 2) + 8
+        top = top - (popupHeight / 2)
+      }
+      break
+  }
+  switch (subPlacement) {
+    case 'left':
+      left = (scrollLeft + viewportWidth - 8 > left - (buttonRect.width / 2) + popupWidth) ? left - (buttonRect.width / 2) : left - popupWidth + (buttonRect.width / 2)
+      break
+    case 'right':
+      left = (8< left + (buttonRect.width / 2) - popupWidth) ? left - popupWidth + (buttonRect.width / 2) : left - (buttonRect.width / 2)
+      break
+  }
+  // Убедимся, что попап не выходит за экран
+  if (left < 0) left = 0
+  if (top < 0) top = 0
+
+  popupStyle.value = {
+    position: 'absolute',
+    top: `${top}px`,
+    left: `${left}px`,
+    maxWidth: props.maxWidth > 0 ? `${props.maxWidth}px` : ''
+  }
+}, {flush: 'post'}
+)
+
+const toggleClick = () => {
+  if(props.trigger === 'click') manual.value = !manual.value
+}
+const toggleHover = () => {
+  if(props.trigger === 'hover') manual.value = !manual.value
+}
+const toggleContext = () => {
+  if (props.trigger === 'context') manual.value = !manual.value
+}
+const handleResize = () => {
+  if (manual.value) repositionTrigger.value++
+  if(repositionTrigger.value > 99 ) repositionTrigger.value = 1
+}
+defineExpose({ handleResize })
+
+onMounted(() => {
+  window.addEventListener("resize", handleResize)
+  if (window.onscrollend !== undefined) window.addEventListener("scrollend", handleResize)
+  else window.addEventListener("scroll", handleResize)
+})
+
+onUnmounted(() => {
+  resizeObserver.disconnect()
+  window.removeEventListener("resize", handleResize)
+  if (window.onscrollend !== undefined) window.removeEventListener("scrollend", handleResize)
+  else window.removeEventListener("scroll", handleResize)
+})
+
+</script>

package/src/components/SwFormItem.vue

@@ -0,0 +1,21 @@
+<template>
+  <div :class="style">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import {computed} from "vue"
+
+const props = defineProps({
+  class: {type:String, default: ''},
+  type: {type:String, default: ''},
+})
+const style = computed(() =>{
+      let s = ['sw-form-item']
+      if(props.type.length > 0) s.push('sw-' + props.type)
+      if(props.class.length > 0) s.push(props.class)
+      return s
+    }
+)
+</script>

package/src/components/SwGide.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="sw-gide" ref="swGide">
+    <div class="overlay0"/>
+    <div class="overlay1"/>
+    <sw-dropdown
+        class="gide"
+        trigger="none"
+        :placement="props.steps[step].placement"
+        v-model="visual"
+        :maxWidth='props.maxWidth'
+    >
+      <div class="hole"/>
+      <template #dropdown>
+        <header><slot name="header">{{ props.steps[step].header }} <sw-button type="primary" link @click="exitModule"><sw-icon :icon-class="props.iconClose" /></sw-button></slot></header>
+        <slot>
+          <div>{{ props.steps[step].text }}</div>
+          <img :class="(/left/.test(props.steps[step]?.placement))? 'reflect': null" :src="props.steps[step].img" />
+        </slot>
+        <footer>
+          <slot name="footer">
+            <sw-button :type="(step === 0)? 'info': 'warning'" text link @click="walk(-1)"><slot name="arrow">‹</slot></sw-button>
+            <sw-button type="success" @click="walk(1)" text link class="sw-revers"><slot name="arrow">‹</slot></sw-button>
+          </slot>
+        </footer>
+      </template>
+    </sw-dropdown>
+    <div class="overlay2"/>
+    <div class="overlay3"/>
+  </div>
+</template>
+
+<script setup>
+import SwDropdown from "@/components/SwDropdown.vue"
+import SwButton from "@/components/SwButton.vue"
+import {watchEffect, ref, onMounted} from "vue"
+import SwIcon from "@/components/SwIcon.vue"
+const swGide = ref(null)
+const visual = ref(true)
+const block = ref(null)
+const step = defineModel({ type: Number, default: 0 })
+const emit = defineEmits(['close'])
+const props = defineProps({
+  steps: { type: Array, default: () => [] },
+  iconClose: { type: String, default: '' },
+  maxWidth: { type: Number, default: 250 }
+})
+
+const exitModule = () => emit('close')
+
+const walk = (e) => {
+  const nextStep = step.value + e
+  if (nextStep < 0) step.value = 0
+  else if (nextStep >= props.steps.length) exitModule()
+  else step.value = nextStep
+}
+
+// Флаг: игнорировать следующее событие скролла (после автопрокрутки)
+let ignoreNextScroll = false
+
+// Функция прокрутки к элементу
+const scrollToElement = (el) => {
+  const rect = el.getBoundingClientRect()
+  const viewportHeight = window.innerHeight
+
+  if (rect.top < 5) {
+    ignoreNextScroll = true
+    document.documentElement.scrollTop += rect.top - 5
+  } else if (rect.bottom > viewportHeight - 5) {
+    ignoreNextScroll = true
+    document.documentElement.scrollTop += rect.bottom - viewportHeight + 5
+  }
+}
+
+// Обновление позиции оверлея (без прокрутки!)
+const update = () => {
+  if (!block.value || !swGide.value) return
+  const r = block.value.getBoundingClientRect()
+  const sT = window.pageYOffset || document.documentElement.scrollTop
+  const sL = window.pageXOffset || document.documentElement.scrollLeft
+
+  swGide.value.style.gridTemplateRows = `${r.top + sT - 5}px ${r.height + 10}px 1fr`
+  swGide.value.style.gridTemplateColumns = `${r.left + sL - 5}px ${r.width + 10}px 1fr`
+  swGide.value.style.height = document.documentElement.scrollHeight + 'px'
+}
+watchEffect((onInvalidate) => {
+  if (!swGide.value) return
+  const selector = props.steps[step.value]?.tag
+  if (!selector || !selector.trim()) {
+    // Сброс стилей, если нет селектора
+    swGide.value.style.gridTemplateRows = `40% 0 1fr`
+    swGide.value.style.gridTemplateColumns = `1fr 0 1fr`
+    swGide.value.style.height = document.documentElement.scrollHeight + 'px'
+    return
+  }
+  block.value = document.querySelector(selector)
+  if (!block.value) {
+    console.warn(`[SwGuide] Элемент не найден: ${selector}`)
+    return
+  }
+  // === Автопрокрутка при смене шага ===
+  // Выполняем один раз после установки нового блока
+  scrollToElement(block.value)
+  // === Обновление оверлея при ресайзе/скролле ===
+  const onResizeOrScroll = () => {
+    if (ignoreNextScroll) {
+      ignoreNextScroll = false // сброс флага
+      return // игнорируем "нашу" прокрутку
+    }
+    update()
+  }
+  // Инициализация
+  update()
+  // Наблюдатели
+  const observer = new ResizeObserver(update)
+  observer.observe(block.value)
+
+  window.addEventListener('resize', onResizeOrScroll)
+  window.addEventListener('scroll', onResizeOrScroll, { passive: true })
+
+  // Очистка
+  onInvalidate(() => {
+    observer.disconnect()
+    window.removeEventListener('resize', onResizeOrScroll)
+    window.removeEventListener('scroll', onResizeOrScroll)
+  })
+})
+onMounted(()=> window.onload = () => block.value = document.querySelector(props.steps[step.value]?.tag))
+</script>

package/src/components/SwIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <div v-if="isExt" :style="'mask: url(' + props.iconClass + ') no-repeat 50% 50%;'" class="sw-external-icon svg-icon" v-bind="$attrs" />
+  <svg v-else :class="'sw-icon icon-' + (props.className || props.iconClass)" aria-hidden="true" v-bind="$attrs">
+    <use :href="'#' + props.prefix +'-' + props.iconClass" />
+  </svg>
+</template>
+<script setup>
+import { isExternal } from '@/utils/index.js'
+
+const props = defineProps({
+  prefix: {type: String, default: 'icon'},
+  iconClass: {type: String, required: true},
+  className: {type: String, default: ''}
+})
+const isExt = isExternal(props.iconClass)
+</script>

package/src/components/SwInput.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue"
+import SwIcon from "@/components/SwIcon.vue"
+import { formatPhoneNumber } from "@/utils/index"
+
+// Define prop types - separate model from props
+interface InputProps {
+  before?: string
+  after?: string
+  placeholder?: string
+  label?: string
+  name: string
+  class?: string
+  size?: string
+  type?: string
+  inputMode?: string
+  required?: boolean
+  maxlength?: number
+  minlength?: number
+  inputSize?: number
+  autofocus?: boolean
+}
+
+// Use defineModel for the input value
+const modelValue = defineModel<string>()
+
+// Define props separately
+const props = withDefaults(defineProps<InputProps>(), {
+  before: '',
+  after: '',
+  placeholder: '',
+  label: '',
+  class: '',
+  size: '',
+  type: 'text',
+  inputMode: 'text',
+  required: false,
+  maxlength: 128,
+  minlength: 1,
+  inputSize: 60,
+  autofocus: false
+})
+
+const lab = ref<HTMLLabelElement | null>(null)
+const emit = defineEmits(['suffix','prefix','focusInput'])
+const onfocus = (e: FocusEvent) => {
+  // console.log(e)
+  emit('focusInput')
+  const target = e.target as HTMLInputElement
+  target.setSelectionRange(modelValue.value?.length || 0, modelValue.value?.length || 0)
+  if(lab.value !== null) lab.value.style.top = '-.6em'
+}
+
+const onblur = (e: FocusEvent) => {
+  if((modelValue.value?.length || 0) === 0 && lab.value !== null) lab.value.removeAttribute("style")
+}
+
+// Set initial label position if there's a value
+if((modelValue.value?.length || 0) > 0 && lab.value !== null) lab.value.style.top = '-.6em'
+
+const suffix = ()=>{ emit('suffix') }
+const prefix = ()=>{ emit('prefix') }
+const style = computed(() =>{
+      let s = ['sw-input']
+      if(props.size.length > 0) s.push('sw-' + props.size)
+      if(props.class.length > 0) s.push(props.class)
+      return s
+    }
+)
+watch(modelValue, (newValue, oldValue) => {
+  if(props.type === 'phone' && newValue) {
+    modelValue.value = formatPhoneNumber(newValue, oldValue)
+  }
+})
+</script>
+
+<template>
+  <div :class="style">
+    <sw-icon v-if="props.before.length > 0" :icon-class="props.before" @click="prefix"/>
+    <slot v-else name="prefix"></slot>
+    <label v-if="(props.label.length > 0)" :for="props.name" ref="lab">{{ props.label }}<span title="Это поле обязательно для заполнения." v-if="props.required">*</span></label>
+    <input
+        v-model="model"
+        :required="props.required"
+        :placeholder="(props.required && props.label.length === 0)? props.placeholder + `*`: props.placeholder"
+        :type="props.type"
+        :id="props.name"
+        :name="props.name"
+        :size="props.inputSize"
+        @focus="onfocus"
+        @blur="onblur"
+        :maxlength="props.maxlength"
+        :minlength="props.minlength"
+        :autofocus="props.autofocus"
+        v-bind="$attrs"
+    >
+    <sw-icon v-if="props.after.length > 0" :icon-class="props.after" @click="suffix"/>
+    <slot v-else name="suffix"></slot>
+  </div>
+</template>

package/src/components/SwMessage.vue

@@ -0,0 +1,53 @@
+<template>
+  <dialog :class="'sw-message ' + props.class" ref="messageRef" >
+    <header  v-if="props.name.length > 0 || !!slots?.header" ><slot name="header">{{ props.name }} <sw-button link type="primary" @click="model = false"><sw-icon :icon-class="props.iconAfter" /></sw-button></slot></header>
+    <slot></slot>
+    <footer><slot name="footer"></slot></footer>
+  </dialog>
+</template>
+
+<script setup>
+import {nextTick, onUnmounted, ref, watch, useSlots} from "vue"
+import SwButton from "@/components/SwButton.vue"
+import SwIcon from "@/components/SwIcon.vue"
+
+const model = defineModel()
+const props = defineProps({
+  name: {type: String, default: ''},
+  class: {type:String, default: ''},
+  iconAfter: {type:String, default: ''}
+})
+const messageRef = ref(null)
+const slots = useSlots();
+const handleClickOutside = (e) => {
+  if (messageRef.value && model.value) {
+    const dialogRect = messageRef.value.getBoundingClientRect()
+    const isClickInsideDialog = (
+      e.clientX >= dialogRect.left &&
+      e.clientX <= dialogRect.right &&
+      e.clientY >= dialogRect.top &&
+      e.clientY <= dialogRect.bottom
+    )
+
+    // Если клик вне диалога, закрываем его
+    if (!isClickInsideDialog) {
+      model.value = false
+    }
+  }
+}
+// Когда модель становится true — добавляем обработчик
+watch(() => model.value,  (newVal) => {
+  if (newVal) {
+    messageRef.value.showModal()
+
+    nextTick() // ждём, пока DOM обновится
+    window.addEventListener('click', handleClickOutside, true)
+  } else {
+    messageRef.value.close()
+    window.removeEventListener('click', handleClickOutside)
+  }
+})
+onUnmounted(() => {
+  window.removeEventListener('click', handleClickOutside)
+})
+</script>

package/src/components/SwSection.vue

@@ -0,0 +1,17 @@
+<script setup>
+const props = defineProps({
+  name: {type: String, default: ''},
+  class: {type:String, default: ''},
+  iconAfter: {type:String, default: ''}
+})
+const emit = defineEmits(['header'])
+const header = () => {emit('header')}
+</script>
+
+<template>
+<section :class="'sw-section ' + props.class">
+  <header @click="header"><slot name="header">{{ props.name }} <svg-icon :icon-class="props.iconAfter" /></slot></header>
+  <slot></slot>
+  <footer><slot name="footer"></slot></footer>
+</section>
+</template>

package/src/components/SwSelect.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { ref, watch } from "vue"
+import axios from 'axios'
+
+// Define types
+interface AddressData {
+  fullText: string
+}
+
+interface Suggestion {
+  value: string
+  data: {
+    geo_lat: string
+    geo_lon: string
+  }
+}
+
+interface GeoData {
+  text: string
+  coords: [number, number]
+  suggestion: any
+}
+
+const address = ref<AddressData>({ fullText: '' })
+const visible = ref<boolean>(false)
+const options = ref<Suggestion[]>([])
+
+const model = defineModel<GeoData>()
+
+interface Props {
+  class?: string
+  size?: 'large' | 'small'
+  placeholder?: string
+  token?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  class: '',
+  size: 'large',
+  placeholder: '',
+  token: ''
+})
+watch(() => model.value?.text, (newValue) => {
+  if (newValue && newValue.length > 3) address.value.fullText = newValue
+})
+watch(address.value.fullText,(newValue, oldValue) => {
+  visible.value = (newValue.length > 3 && newValue.length > oldValue.length)
+  if (newValue.length >3) getDadata()
+})
+const getDadata = () => {
+  let url='https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/address'
+  console.log(address.value.fullText)
+  axios.post(url, {
+        query: address.value.fullText },
+      {
+        headers: {
+          "Content-Type": "application/json",
+          "Accept": "application/json",
+          "Authorization": 'Token ' + props.token
+        }
+      })
+      .then(response => {
+        console.log(response.data.suggestions)
+        options.value = response.data.suggestions
+        // this.visible = (this.options.length > 1)
+        if (options.value.length === 1) clickLi(options.value[0])
+        // this.geo.coords = [Number(response.data.result[0]), Number(response.data.result[1])]
+      })
+      .catch(error => {
+        // handle error
+        console.log(error);
+      })
+}
+const clickLi = (item) => {
+  address.value.fullText = item.value
+  visible.value = false
+  const geo = {}
+  geo.text = item.value
+  geo.coords = [Number(item.data.geo_lat), Number(item.data.geo_lon)]
+  geo.suggestion = item.data
+  model.value = geo
+}
+</script>
+
+<template>
+  <div class="popup">
+    <sw-input
+        :size="props.size"
+        v-model="address.fullText"
+        :placeholder="props.placeholder"
+    />
+    <div class="wrapper" v-show="visible">
+      <ul class="scrollbar">
+        <li tabindex="1" v-for="(item, key) in options" :key="key" @click="clickLi(item)">{{ item.value }}</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.popup{
+  position: relative;
+  .wrapper{
+    position: absolute;
+    z-index: 1;
+    list-style: none;
+    font-size: .8rem;
+    line-height: 1.2;
+    word-break: break-word;
+    padding: 0;
+    margin: 10px 0 0;
+    :before{
+      content: '';
+      border-bottom-color: transparent !important;
+      border-left-color: transparent !important;
+      border: 1px solid var(--el-border-color-light);
+      background: var(--el-bg-color-overlay);
+      right: 50%;
+      top: -6px;
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      z-index: 1;
+      transform: rotate(-45deg);
+    }
+  }
+  .scrollbar {
+    box-shadow: 0 0 0 1px var(--el-border-color);
+    border-radius: var(--el-border-radius-base);
+    background: #ffffff;
+    padding: .5rem 0;
+    margin: 0;
+    li{display: flex;
+      align-items: start;
+      white-space: nowrap;
+      list-style: none;
+      line-height: 22px;
+      padding: 5px 16px;
+      margin:0;
+      font-size: var(--sw-font-size);
+      color: var(--sw-text-color-secondary);
+      cursor:pointer;
+      outline: none;
+      &:not(.is-disabled):focus{
+        background: var(--el-dropdown-menuItem-hover-fill);
+        color:var(--el-dropdown-menuItem-hover-color);
+      }
+    }
+  }
+}
+</style>