@studio-west/component-sw 0.11.9 → 0.11.11

package/src/components/SwSkeleton.vue

@@ -0,0 +1,13 @@
+<template>
+ <slot v-if="props.visual"></slot>
+ <div v-else class="sw-skeleton" :class="props.class"><slot name="skeleton" ><sw-skeleton-item animate size="small"/></slot></div>
+
+</template>
+
+<script setup>
+  import SwSkeletonItem from "@/components/SwSkeletonItem.vue"
+  const props = defineProps({
+    class: {type:String, default: ''},
+    visual: {type:Boolean, default: false}
+  })
+</script>

package/src/components/SwSkeletonItem.vue

@@ -0,0 +1,27 @@
+<template>
+  <div :class="c" :style="s"><template v-if="props.animate"><div /></template></div>
+</template>
+
+<script setup>
+import {computed} from "vue";
+
+const props = defineProps({
+  width: {type: String, default: '100'},
+  class: {type:String, default: ''},
+  animate: {type:Boolean, default: false},
+  size: {type:String, default: ''}
+})
+const c = computed(() =>{
+      let s = ['sw-skeleton-item']
+      if(props.size.length > 0) s.push('sw-' + props.size)
+      if(props.animate) s.push('sw-animate')
+      if(props.class.length > 0) s.push(props.class)
+      return s
+    }
+)
+const s = computed(() =>{
+  return {
+    width: props.width + '%'
+  }
+})
+</script>

package/src/components/SwSlider.vue

@@ -0,0 +1,281 @@
+<template>
+    <div :class="style">
+        <div class="track"
+             @click="onTrackClick"
+             @mousedown.prevent="(e) => onStartDrag(e, 0)"
+             @touchstart.prevent="(e) => onStartDrag(e.touches[0], 0)">
+            <div class="fill" :style="fillStyle"></div>
+        </div>
+<!-- Multiple thumbs -->
+        <div v-for="(value, index) in values"
+            class="thumb"
+            :key="index"
+            :style="thumbStyles[index]"
+            @mouseenter="showTooltip(index)"
+            @mouseleave="hideTooltip(index)"
+            @focus="showTooltip(index)"
+            @blur="hideTooltip(index)"
+            @mousedown.prevent="(e) => onStartDrag(e, index)"
+            @touchstart.prevent="(e) => onStartDrag(e.touches[0], index)"
+        >
+            <slot :index="index" :value="value"></slot>
+            <div
+              v-if="tooltipVisible[index] && showValue"
+              class="tooltip"
+              :class="{ 'tooltip-vertical': props.vertical }"
+              :style="tooltipStyle(index)"
+            >
+              {{ value }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+  import { ref, computed, onMounted, onUnmounted } from 'vue'
+  import { calculateTooltipPosition } from '@/utils/index.js'
+
+  const model = defineModel({type: [Number, Array], required: true})
+  const props = defineProps({
+    class: { type: String, default: ''},
+    size: {type:String, default: ''},
+    min: {type: Number, default: 0},
+    max: {type: Number, default: 100},
+    step: {type: Number, default: 1},
+    vertical: {type: Boolean, default: false},
+    showValue: {type: Boolean, default: false}
+  })
+
+  const tooltipVisible = ref([])
+  const tooltipPositions = ref([])
+
+  const style = computed(() =>{
+        let s = ['sw-slider']
+        if(props.size.length > 0) s.push('sw-' + props.size)
+        if(props.class.length > 0) s.push(props.class)
+        if(props.vertical) s.push('vertical')
+        return s
+      }
+  )
+
+  const showTooltip = (index) => {
+    const newVisibility = [...tooltipVisible.value]
+    newVisibility[index] = true
+    tooltipVisible.value = newVisibility
+  }
+
+  const hideTooltip = (index) => {
+    const newVisibility = [...tooltipVisible.value]
+    newVisibility[index] = false
+    tooltipVisible.value = newVisibility
+  }
+
+  const tooltipStyle = (index) => {
+    const sliderElement = document.querySelector('.sw-slider')
+    if (sliderElement) {
+      return calculateTooltipPosition(sliderElement, props.vertical)
+    }
+    // Fallback positions
+    if (props.vertical) {
+      return { right: '100%', marginRight: '10px' }
+    } else {
+      return { bottom: '100%', marginBottom: '10px' }
+    }
+  }
+
+  // Determine ifwe're dealing with an array (multiple thumbs)
+  const isArray = computed(() => Array.isArray(model.value))
+
+  // Get values as array for uniform treatment
+  const values = computed({
+    get() {
+      return isArray.value ? [...model.value] : [model.value]
+    },
+    set(newValues) {
+      if (isArray.value) {
+        // Sort values for display purposes
+        model.value = [...newValues].sort((a, b) => a - b)
+      } else {
+        model.value = newValues[0]
+      }
+    }
+  })
+
+  // Calculate percentages for each thumb
+  const percentages = computed(() => {
+    const range= props.max - props.min
+    return values.value.map(value => {
+      return range === 0 ? 0 : ((value - props.min) / range) * 100
+    })
+  })
+
+  // Style for the fill between first and last thumbs
+  const fillStyle = computed(() => {
+    if (props.vertical) {
+      if(isArray.value) {
+        const firstPercent = percentages.value[0] || 0
+        const lastPercent = percentages.value[percentages.value.length - 1] || 0
+        const minPercent = Math.min(firstPercent, lastPercent)
+        const maxPercent = Math.max(firstPercent, lastPercent)
+        return {
+          height: `${maxPercent - minPercent}%`,
+          top: `${minPercent}%`,
+          left: '0',
+          width: '100%'
+        }
+      } else {
+        // For single value, start from 0
+        const percent = percentages.value[0] || 0
+        return {
+          height: `${percent}%`,
+          top: '0',
+          left: '0',
+          width: '100%'
+        }
+      }
+    } else {
+      if (isArray.value) {
+        const firstPercent = percentages.value[0] || 0
+        const lastPercent= percentages.value[percentages.value.length - 1] || 0
+        const minPercent = Math.min(firstPercent, lastPercent)
+        const maxPercent = Math.max(firstPercent, lastPercent)
+
+        return {
+          width: `${maxPercent - minPercent}%`,
+          left: `${minPercent}%`,
+          top: '0',
+          height: '100%'
+        }
+      } else {
+        // For single value, start from 0
+        const percent = percentages.value[0] || 0
+        return {
+          width: `${percent}%`,
+          left: '0',
+          top: '0',
+          height: '100%'
+        }
+      }
+    }
+  })
+
+  // Stylesfor each thumb
+  const thumbStyles = computed(() => {
+    return percentages.value.map((percent, index) => {
+      return props.vertical
+          ? { top: `${percent}%`, zIndex: values.value.length - index }
+          : { left: `${percent}%`, zIndex: values.value.length - index }
+    })
+  })
+
+  // === Track click handler ===
+  function onTrackClick(e) {
+    // Only for single thumb sliders
+    if (isArray.value) return
+
+    const slider = e.currentTarget.closest('.sw-slider')
+    if (!slider) return
+
+    const rect = slider.getBoundingClientRect()
+    const ratio = props.vertical
+        ? (e.clientY - rect.top) / rect.height
+        : (e.clientX - rect.left) / rect.width
+
+    const clampedRatio = Math.max(0, Math.min(1, ratio))
+    const range = props.max - props.min
+    let value = props.min + clampedRatio * range
+
+    // Apply step
+    const steps = Math.round((value - props.min) / props.step)
+    value = props.min + steps * props.step
+    value = Math.max(props.min, Math.min(props.max, value))
+
+    // Update the value
+    values.value = [value]
+
+    // Update tooltip position
+    setTimeout(() => {
+      const newPositions = [...tooltipPositions.value]
+      newPositions[0] = tooltipStyle(0)
+      tooltipPositions.value = newPositions
+    }, 0)
+  }
+
+  // === Dragging ===
+  const isDragging = ref(false)
+  const draggingIndex = ref(null)
+  const sliderRect = ref(null)
+
+  function onStartDrag(e, index) {
+    // For single thumb sliders, also handle track clicks
+    // if (!isArray.value && index !== 0) return
+
+    const slider = e.target.closest('.sw-slider')
+    if (!slider) return
+    sliderRect.value = slider.getBoundingClientRect()
+    draggingIndex.value = index
+    isDragging.value = true
+    updateValueFromClient(e.clientX || e.touches?.[0]?.clientX, e.clientY|| e.touches?.[0]?.clientY)
+  }
+
+  function onDrag(e) {
+    if (!isDragging.value) return
+    e.preventDefault?.()
+    const clientX = e.clientX || e.touches?.[0]?.clientX
+    const clientY = e.clientY ||e.touches?.[0]?.clientY
+    updateValueFromClient(clientX, clientY)
+  }
+
+  function stopDragging() {
+    isDragging.value = false
+    draggingIndex.value = null
+  }
+
+  function updateValueFromClient(clientX, clientY) {
+    if (!sliderRect.value || draggingIndex.value === null) return
+
+    const rect = sliderRect.value
+    const ratio = props.vertical
+        ? (clientY - rect.top) / rect.height
+        : (clientX - rect.left) / rect.width
+
+    const clampedRatio = Math.max(0, Math.min(1, ratio))
+    const range= props.max - props.min
+    let value = props.min + clampedRatio * range
+
+    // Apply step
+    const steps = Math.round((value - props.min) / props.step)
+    value = props.min + steps * props.step
+    value = Math.max(props.min, Math.min(props.max,value))
+
+    // Update the specific thumb value
+    const newValues = [...values.value]
+    newValues[draggingIndex.value] = value
+    values.value = newValues
+
+    // Update tooltip position
+    setTimeout(() => {
+      const newPositions = [...tooltipPositions.value]
+      newPositions[draggingIndex.value] = tooltipStyle(draggingIndex.value)
+      tooltipPositions.value = newPositions
+    }, 0)
+  }
+
+  // Global listeners
+  onMounted(() => {
+    window.addEventListener('mousemove', onDrag)
+    window.addEventListener('mouseup', stopDragging)
+    window.addEventListener('touchmove', onDrag, { passive: false })
+    window.addEventListener('touchend', stopDragging)
+
+    // Initialize tooltip visibility array
+    tooltipVisible.value = new Array(values.value.length).fill(false)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('mousemove', onDrag)
+    window.removeEventListener('mouseup', stopDragging)
+    window.removeEventListener('touchmove', onDrag)
+    window.removeEventListener('touchend', stopDragging)
+  })
+</script>

package/src/components/SwSwitch.vue

@@ -0,0 +1,51 @@
+<template>
+  <div :class="style">
+    <!--input type="checkbox" :name="props.name" class="sw-control" :id="props.id" v-model="model"-->
+    <input
+        type="checkbox"
+        :name="props.name"
+        class="sw-control"
+        :id="props.id"
+        :checked="model"
+        @change="handleChange"
+    >
+    <label :for="props.id" class="sw-label" :data-onlabel="props.on" :data-offlabel="props.off" />
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+
+// Define prop types
+interface Props {
+  id?: string
+  class?: string
+  name?: string
+  on?: string
+  off?: string
+  size?: string
+  checkbox?: boolean
+}
+
+const model = defineModel<boolean>()
+const props = withDefaults(defineProps<Props>(), {
+  id: 'checkbox',
+  class: '',
+  name: '',
+  on: '',
+  off: '',
+  size: '',
+  checkbox: false
+})
+const style = computed(() =>{
+  let s = ['sw-switch']
+  if(props.size.length > 0) s.push('sw-' + props.size)
+  if(props.checkbox) s.push('sw-checkbox')
+  if(props.class.length > 0) s.push(props.class)
+  return s
+})
+const handleChange = (event) => {
+  model.value = event.target.checked
+}
+</script>

package/src/components/SwTable.vue

@@ -0,0 +1,239 @@
+<template>
+  <table class="sw-table">
+    <thead>
+    <tr v-for="(row, rowIndex) in headerRows" :key="rowIndex">
+      <th
+          v-for="cell in row"
+          :key="cell.key"
+          :colspan="cell.colspan"
+          :rowspan="cell.rowspan"
+          :style="{ minWidth: cell.width, minHeight: cell.height }"
+      >
+        {{ cell.label }}
+      </th>
+    </tr>
+    </thead>
+    <!--tbody>
+    <tr v-for="(row, index) in data" :key="index">
+      <td v-for="column in flatColumns" :key="column.prop">
+        <slot
+            :name="column.prop"
+            :row="row"
+            :$index="index"
+        >
+          {{ row[column.prop] }}
+        </slot>
+      </td>
+    </tr>
+    </tbody-->
+    <tbody>
+    <tr v-for="(row, rowIndex) in processedTableData" :key="rowIndex">
+      <td
+          v-for="cell in row"
+          :key="cell.key"
+          :colspan="cell.colspan"
+          :rowspan="cell.rowspan"
+          :style="cell.style"
+      >
+        <slot
+            :name="cell.prop"
+            :row="cell.originalRow"
+            :$index="cell.rowIndex"
+        >
+          {{ cell.label }}
+        </slot>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup>
+import { ref, useSlots, onMounted, computed } from 'vue'
+import SwTableColumn from './SwTableColumn.vue'
+
+const props = defineProps({
+  data: {
+    type: Array,
+    required: true
+  }
+})
+
+const slots = useSlots()
+const columnTree = ref([])
+// Функция для построения дерева колонок
+function buildColumnTree(vnodes) {
+  const result = []
+
+  for (const vnode of vnodes) {
+    if (vnode.type === SwTableColumn) {
+      const column = {
+        ...vnode.props,
+        children: []
+      }
+      const children = vnode.children?.default?.()
+      if (children && children.length > 0) {
+        column.children = buildColumnTree(children)
+      }
+      result.push(column)
+    }
+  }
+  return result
+}
+
+// Получение максимальной глубины дерева
+function getMaxDepth(columns) {
+  if (!columns || columns.length === 0) return 1
+  let maxDepth = 1
+  for (const column of columns) {
+    if (column.children && column.children.length > 0) {
+      const childDepth = getMaxDepth(column.children)
+      maxDepth = Math.max(maxDepth, 1 + childDepth)
+    }
+  }
+  return maxDepth
+}
+
+// Преобразование дерева в строки для thead
+function buildHeaderRows(columns, depth) {
+  const rows = Array.from({ length: depth }, () => [])
+
+  function processColumns(cols, rowIndex, parentKey = '') {
+    for (let i = 0; i < cols.length; i++) {
+      const col = cols[i]
+      const key = parentKey ? `${parentKey}-${col.prop || i}` : (col.prop || i)
+
+      if (col.children && col.children.length > 0) {
+        // Это родительская колонка
+        const leafCount = countLeafColumns(col.children)
+        rows[rowIndex].push({
+          key,
+          label: col.label,
+          colspan: leafCount,
+          rowspan: 1,
+          width: col.width,
+          height: col.height
+        })
+        processColumns(col.children, rowIndex + 1, key)
+      } else {
+        // Это конечная колонка
+        rows[rowIndex].push({
+          key: col.prop,
+          label: col.label,
+          colspan: 1,
+          rowspan: depth - rowIndex,
+          width: col.width,
+          height: col.height,
+          prop: col.prop
+        })
+      }
+    }
+  }
+  processColumns(columns, 0)
+  return rows
+}
+
+// Подсчет количества листовых колонок
+function countLeafColumns(columns) {
+  let count = 0
+
+  function traverse(cols) {
+    for (const col of cols) {
+      if (col.children && col.children.length > 0) traverse(col.children)
+      else count++
+    }
+  }
+  traverse(columns)
+  return count
+}
+
+// Извлечение плоского списка конечных колонок
+function extractLeafColumns(columns) {
+  const result = []
+
+  function traverse(cols) {
+    for (const col of cols) {
+      if (col.children && col.children.length > 0) traverse(col.children)
+      else result.push(col)
+    }
+  }
+  traverse(columns)
+  return result
+}
+
+// Обработка данных для tbody с поддержкой colspan
+function processBodyData(data, columns) {
+  const processedRows = []
+  const cellMap = new Map() // Для отслеживания объединенных ячеек
+  data.forEach((row, rowIndex) => {
+    const processedRow = []
+
+    columns.forEach((column, colIndex) => {
+      const key = `${rowIndex}-${column.prop}`
+
+      // Проверяем, не занята ли эта ячейка из-за rowspan/colspan
+      if (cellMap.has(key)) {
+        return
+      }
+
+      const cellData = row[column.prop]
+      let cellValue = cellData
+      let colspan = 1
+      let rowspan = 1
+      let style = {}
+
+      // Проверяем, есть ли у значения свойства rowspan/colspan
+      if (cellData && typeof cellData === 'object' && cellData !== null) {
+        cellValue = cellData.label || cellData.value || ''
+        colspan = cellData.colspan || 1
+        rowspan = cellData.rowspan || 1
+        style = cellData.style || {}
+      }
+
+      const cell = {
+        key,
+        label: cellValue,
+        prop: column.prop,
+        colspan,
+        rowspan,
+        style,
+        originalRow: row,
+        rowIndex
+      }
+
+      processedRow.push(cell)
+
+
+      // Помечаем объединенные ячейки
+      for (let r = 0; r < rowspan; r++) {
+        for (let c = 0; c < colspan; c++) {
+          if (r === 0 && c === 0) continue // Основная ячейка
+          const cellKey = `${rowIndex + r}-${columns[colIndex + c]?.prop}`
+          if (cellKey) {
+            cellMap.set(cellKey, true)
+          }
+        }
+      }
+    })
+
+    // Добавляем строку только если в ней есть ячейки
+    if (processedRow.length > 0) {
+      processedRows.push(processedRow)
+    }
+  })
+
+  return processedRows
+}
+
+// Сбор колонок из слотов
+onMounted(() => {
+  const columnVNodes = slots.default?.() || []
+  // columns.value = extractLeafColumns(columnVNodes)
+  columnTree.value = buildColumnTree(columnVNodes)
+})
+// Вычисляемые свойства
+const maxDepth = computed(() => getMaxDepth(columnTree.value))
+const headerRows = computed(() => buildHeaderRows(columnTree.value, maxDepth.value))
+const flatColumns = computed(() => extractLeafColumns(columnTree.value))
+const processedTableData = computed(() => processBodyData(props.data, flatColumns.value))
+</script>

package/src/components/SwTableColumn.vue

@@ -0,0 +1,25 @@
+<template>
+  <div style="display: none;"></div>
+</template>
+
+<script setup>
+
+defineProps({
+  prop: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: String,
+    default: 'auto'
+  },
+  height: {
+    type: String,
+    default: 'auto'
+  }
+})
+</script>

package/src/components/SwTabs.vue

@@ -0,0 +1,41 @@
+<script setup>
+import {ref, provide} from 'vue'
+const activeTab = ref(0);
+const tabs = ref([]);
+
+const props = defineProps({
+  class: {type:String, default: ''}
+})
+const model = defineModel()
+const emit = defineEmits(['tab-click'])
+
+function registerTab(tab) {
+  tabs.value.push(tab)
+}
+
+function unregisterTab(tab) {
+  tabs.value = tabs.value.filter(t => t !== tab)
+}
+
+provide('registerTab', registerTab)
+provide('unregisterTab', unregisterTab)
+provide('activeTab', model)
+provide('tabs', tabs)
+</script>
+
+<template>
+<div :class="'sw-tabs ' + props.class">
+  <header v-if="tabs.length !== 0">
+    <span
+        v-for="(tab, index) in tabs"
+        :key="index"
+        :class="[{ active: model === index }]"
+        @click="model = index; emit('tab-click', index)"
+    >
+      {{ tab.label || tab.title }}
+    </span>
+  </header>
+  <slot />
+</div>
+</template>
+