@jzt-packages/components 1.0.0

package/src/JztFormGrid/index.vue

@@ -0,0 +1,513 @@
+<template>
+  <div v-if="queryItemList && queryItemList.length" :class="[isShow ? 'show-form-content' : 'form-content-box']">
+    <el-form ref="formRef" :label-width="labelWidth" v-bind="formProps" :model="queryFrom" :disabled="disabled">
+      <el-row class="form_card_content">
+        <template v-for="(item, index) in queryItemList" :key="item.prop + 'group_' + index">
+          <!-- 表单分组 -->
+          <template v-if="item.groupTitle && item.children">
+            <div :class="[isCard ? 'group_card' : 'noTitle_card', border ? 'border_card' : '', 'form_card']">
+              <div class="flx-between-center group-header-box" @click="showCollapsed ? changeCollapse(item) : ''">
+                <JztLabelTitle :title="item.groupTitle" :isLabel="!isCard"   v-bind="groupProps"/>
+                <!-- <div class="collapse-title flx-left-center">
+                  <span class="label"></span>
+                  <span>{{ item.groupTitle }}</span>
+                </div> -->
+                <div v-if="showCollapsed">
+                  <el-icon :size="18">
+                    <ArrowUp v-if="item.collapse" />
+                    <ArrowDown v-else />
+                  </el-icon>
+                </div>
+                <slot v-else name="header_right"></slot>
+              </div>
+
+              <el-row v-if="!item.collapse && item.children && item.children.length" class="form_child_card_content">
+                <slot :name="item.slotName"></slot>
+                <template v-for="(child, childIndex) in item.children" :key="String(child.prop) + index + childIndex">
+                  <div v-if="child?.el === 'JztTable'" class="table-box">
+                    <JztTable
+                      ref="jztTableRef"
+                      :table-data="ruleForm[item.prop as string] || []"
+                      :table-config="child?.props?.tableConfig"
+                      :pagination="false"
+                      :toolButton="false"
+                    />
+                  </div>
+                  <form-item
+                    v-else-if="child.hideFun ? !child.hideFun() : true"
+                    :key="String(child.prop) + index + '_item_' + childIndex"
+                    :item="child"
+                    :ruleForm="queryFrom"
+                    :props="props"
+                    :isShow="isShow"
+                    :border="border"
+                    :is-detail="child.isDetail ?? isDetail"
+                    :infoEmptyText="infoEmptyText"
+                    :showOverflowTooltip="showOverflowTooltip"
+                    @formOperationFn="formOperationFn"
+                    @getCascaderValue="getCascaderValue"
+                  >
+                    <template #[child.slotName] :key="child.prop + index + '_template_' + childIndex">
+                      <slot :name="child.slotName"></slot>
+                    </template>
+                  </form-item>
+                </template>
+              </el-row>
+            </div>
+          </template>
+          <!-- 表单无分组 -->
+          <template v-else-if="item.hideFun ? !item.hideFun() : true">
+            <form-item
+              :item="item"
+              :showOverflowTooltip="showOverflowTooltip"
+              :ruleForm="queryFrom"
+              :isShow="isShow"
+              :border="border"
+              :is-detail="item.isDetail ?? isDetail"
+              :infoEmptyText="infoEmptyText"
+              @formOperationFn="formOperationFn"
+              @getCascaderValue="getCascaderValue"
+            >
+              <template #[item.slotName] :key="item.props + index">
+                <slot :name="item.slotName"></slot>
+              </template>
+            </form-item>
+          </template>
+        </template>
+      </el-row>
+    </el-form>
+    <slot name="footer"></slot>
+  </div>
+  <div v-else></div>
+</template>
+<script setup lang="ts" name="SearchForm">
+import { JztLabelTitle, JztTable } from '@jzt-spd/components'
+import { isEmpty } from '@jzt-spd/utils'
+import { GUIDNoneValue } from '@jzt-spd/utils/consts'
+import type { FormInstance } from 'element-plus'
+import { cloneDeep } from 'lodash-es'
+import { computed, onMounted, provide, ref, watch } from 'vue'
+import formItem from './components/formItem.vue'
+import { FormItemsProps } from './interface/index'
+// import JztTable
+import { useSetCascaderEnumMap, useSetEnumMap } from '../hooks/useFormByUserType'
+
+interface ProTableProps {
+  showOverflowTooltip?: boolean // 是否显示超出部分提示
+  queryItems: FormItemsProps[] // 搜索配置列
+  ruleForm?: { [key: string]: any } // 搜索参数
+  isShow?: boolean // 是否是查看模式
+  disabled?: boolean // 是否表单禁用
+  formProps?: Record<string, any>
+  infoEmptyText?: string
+  showCollapsed?: boolean
+  isCard?: boolean
+  isDetail?: boolean
+  border?: boolean // 是否显示边框
+  labelWidth?: number | string // 整体表单label宽度
+  // formDict?:  Record<string, any>; // 表单枚举字典
+  groupProps?: { [key: string]: any } 
+}
+
+// 默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  queryItems: () => [],
+  ruleForm: () => ({}),
+  isShow: false, // 是否是查看模式
+  disabled: false, // 是否表单禁用
+  infoEmptyText: '-',
+  showCollapsed: true, // 是否需要折叠功能
+  isCard: false, // 是否需要阴影样式
+  border: false,
+  isDetail: false,
+  labelWidth: 'auto', // 整体表单label宽度
+  // formDict: () => ({}),
+  groupProps: () => ({}),
+})
+
+const queryItemList = ref<FormItemsProps[]>([])
+//  cloneDeep 是为了解决打开折叠 互相影响
+onMounted(() => {
+  queryItemList.value = cloneDeep(props.queryItems)
+})
+
+// const emit = defineEmits(['formOperationFn', 'update:ruleForm'])
+
+// 定义 enumMap 存储 enum 值（避免异步请求无法格式化单元格内容 || 无法填充搜索下拉选择）
+const enumMap = ref(new Map<string, { [key: string]: any }[]>())
+// watch(
+//   () => props.formDict,
+//   (val) => {
+//     console.log("val----->", val, isObject(val), !isEmpty(val));
+//     if (isObject(val) && !isEmpty(val)) {
+//       Object.keys(props.formDict).forEach((key) => {
+//         enumMap.value.set(key, props.formDict[key]);
+//       });
+//     }
+//   },
+//   { deep: true, immediate: true }
+// );
+
+// 查询表单实例
+const formRef = ref()
+
+// 获取枚举字典集合
+// const setEnumMap = async ({ prop, isAwait, enum: enumValue, isSetFirstValue, fieldNames }: FormItemsProps) => {
+//   if (!enumValue) return
+//   if (isAwait) return
+
+//   // 如果当前 enumMap 存在相同的值 return
+//   if (enumMap.value.has(prop!) && (typeof enumValue === 'function' || enumMap.value.get(prop!) === enumValue)) return
+
+//   // 当前 enum 为静态数据，则直接存储到 enumMap
+//   if (typeof enumValue !== 'function') return enumMap.value.set(prop!, unref(enumValue!))
+
+//   // 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
+//   enumMap.value.set(prop!, [])
+
+//   // 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
+//   const { data, result } = await enumValue()
+//   let list = data || result || []
+//   enumMap.value.set(prop!, list)
+//   if (useFormSetByUserType(isSetFirstValue, prop)) {
+//     setSelectFirstValue(prop, list[0], fieldNames)
+//   }
+// }
+// change 获取接口数据
+// const setCascaderEnumMap = async (
+//   prop,
+//   { enum: enumValue, isSetFirstValue, fieldNames }: FormItemsProps,
+//   val: string
+// ) => {
+//   if (!enumValue) return
+
+//   // 如果当前 enumMap 存在相同的值  也不return  根据change实时获取
+//   // 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
+//   if (typeof enumValue !== 'function') return enumMap.value.set(prop!, unref(enumValue!))
+//   enumMap.value.set(prop!, [])
+
+//   // 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
+//   const { data, result } = await enumValue(val)
+//   let list = data || result || []
+//   enumMap.value.set(prop!, list)
+//   if (useFormSetByUserType(isSetFirstValue, prop)) {
+//     setSelectFirstValue(prop, list[0], fieldNames)
+//   }
+// }
+// 处理默认选中第一条数据
+const setSelectFirstValue = (prop, firstItem, fieldNames) => {
+  if (prop && firstItem) {
+    const itemValue = fieldNames?.value || 'value'
+    props.ruleForm[prop] = firstItem[itemValue]
+    // emit('update:searchParam', props.ruleForm)
+  }
+}
+const allFlatQuery = ref<FormItemsProps[]>([])
+
+/* 格式化初始化表单数据
+  1、 空值默认值 GUIDNoneValue，不展示
+  2、处理数组字段合并（例如时间范围）
+ */
+const queryFrom = computed(() => {
+  const form = props.ruleForm
+  allFlatQuery.value.forEach(item => {
+    if (item.isSetEmptyData && form[item.prop as keyof typeof form] === GUIDNoneValue) {
+      form[item.prop as keyof typeof form] = item.emptyNullValue ?? ''
+    }
+    if (item && item.startField && item.endField) {
+      const { startField, endField } = item
+      if (form[startField] || form[endField]) {
+        form[item.prop as keyof typeof form] = [form[startField] || '', form[endField] || '']
+      }
+    }
+  })
+  return form
+})
+/* 格式化处理数据
+  1、空值默认值 GUIDNoneValue
+  2、处理数组字段切割（例如时间范围）
+ */
+const getFormatForm = form => {
+  const endForm = cloneDeep(form)
+  allFlatQuery.value.forEach(item => {
+    if (item.isSetEmptyData && isEmpty(endForm[item.prop])) {
+      endForm[item.prop] = item.emptyNullValue || GUIDNoneValue
+    }
+    if (item && item.startField && item.endField) {
+      const { startField, endField } = item
+      const timeList = endForm[item.prop] || []
+      endForm[startField] = timeList[0] ?? ''
+      endForm[endField] = timeList[1] ?? ''
+      delete endForm[item.prop]
+    }
+  })
+  return endForm
+}
+
+// 扁平化 columns 的方法 处理字典数据 、 过滤表格部分渲染数据
+const flatColumnsFunc = (columns: FormItemsProps[], flatArr: FormItemsProps[] = []) => {
+  columns.forEach(async col => {
+    if (col.children?.length) {
+      flatArr.push(...flatColumnsFunc(col.children))
+    }
+    if (col.prop) {
+      flatArr.push(col)
+      // 设置 enumMap
+      // await setEnumMap(col)
+      // 数据回显的时候反向获取下拉数据
+      const index = columns.findIndex(cols => cols.cascader && cols.cascader.includes(col.prop))
+      let parentItem = {}
+      if (index > -1) {
+        parentItem = columns[index]
+      }
+
+      await useSetEnumMap({
+        queryItem: col,
+        enumMap,
+        callBack: setSelectFirstValue,
+        queryFrom: queryFrom.value,
+        parentItem: parentItem
+      })
+    }
+  })
+
+  return flatArr.filter(item => !item.children?.length)
+}
+allFlatQuery.value = flatColumnsFunc(props.queryItems)
+
+// 操作列点击操作
+const formOperationFn = async (item: any) => {
+  // 获取结果数据
+  if (item.id === 'confirm') {
+    await onConfirm(item.fun)
+  } else if (item.id === 'reset') {
+    await onReset(item.fun)
+  } else {
+    const form = getFormatForm(queryFrom.value)
+    item.fun(form)
+  }
+}
+
+// 获取getCascader数据
+const getCascaderValue = (val, isClear: boolean = false) => {
+  if (val.cascader && val.cascader.length) {
+    val.cascader?.forEach(cascader => {
+      if (isClear) {
+        // 递归处理需要清除的数据
+        clearNextItem(cascader)
+      } else if (props.ruleForm[val.prop]) {
+        const index = allFlatQuery.value.findIndex(item => item.prop === cascader)
+        if (index === -1) return
+        const queryItem = allFlatQuery.value[index]
+        // 有值才会去掉接口，处理clearable 不清空问题
+        useSetCascaderEnumMap({
+          prevProp: val.prop,
+          queryItem,
+          enumMap,
+          searchParam: props.ruleForm,
+          callBack: setSelectFirstValue
+        })
+        // setCascaderEnumMap(queryItem.prop, queryItem, props.ruleForm[val.prop])
+      }
+    })
+  }
+}
+// 递归处理需要清除的数据（例如省市区三级的情况，清空/更改省->清空：市与区）
+const clearNextItem = cascader => {
+  if (!cascader || !cascader.length) return
+  const index = allFlatQuery.value.findIndex(item => item.prop === cascader)
+  if (index === -1) return
+  const queryItem = allFlatQuery.value[index]
+  props.ruleForm[queryItem.prop as keyof typeof queryItem] = null // 让下一级的表单数据为空
+  enumMap.value.set(queryItem.prop as keyof typeof queryItem, []) // 让下一级的下拉数据清空
+  if (queryItem.cascader && queryItem.cascader.length) {
+    queryItem.cascader.forEach(item => {
+      clearNextItem(item)
+    })
+  }
+}
+// 注入 enumMap
+provide('fromEnumMap', enumMap)
+// 确定提交
+const onConfirm = async (callback?: (valid, form) => any) => {
+  try {
+    // 获取结果数据
+    const valid = await validateForm()
+    const endForm = getFormatForm(queryFrom.value)
+    return callback && callback(valid, endForm)
+  } catch (error) {
+    return false
+  }
+}
+
+// 重置表单
+const onReset = async (callback?: () => void) => {
+  const formEl = formRef.value as FormInstance | undefined
+  if (!formEl) return
+  formEl.resetFields()
+  callback && callback()
+}
+// 效验表单
+const validateForm = async () => {
+  const formEl = formRef.value as FormInstance | undefined
+  if (!formEl) return true
+  try {
+    await formEl.validate()
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+// 清除校验结果
+const clearValidateForm = async () => {
+  const formEl = formRef.value as FormInstance | undefined
+  if (!formEl) return
+  formEl.clearValidate()
+}
+
+// 效验表单的部分字段
+const validateFields = async (fields: string | string[]) => {
+  if (!fields) return true
+  const formEl = formRef.value as FormInstance | undefined
+  if (!formEl) return true
+  try {
+    const valid = await formEl.validateField(fields)
+    return valid
+  } catch (error) {
+    return false
+  }
+}
+const changeCollapse = item => {
+  item.collapse = !item.collapse
+}
+
+// 监听queryItems变化
+watch(
+  () => props.queryItems,
+  newValue => {
+    queryItemList.value = cloneDeep(newValue)
+  },
+  { deep: true }
+)
+
+defineExpose({
+  onConfirm,
+  onReset,
+  validateForm,
+  validateFields,
+  clearValidateForm,
+  formRef,
+  getFormatForm
+})
+</script>
+
+<style lang="scss" scoped>
+//展示样式
+.show-form-content {
+  :deep(.el-form-item) {
+    margin-bottom: 0px !important;
+    height: 100%;
+    .el-form-item__label,
+    .el-space {
+      height: 100%;
+      height: unset !important;
+    }
+    .el-form-item__content {
+      line-height: 30px;
+    }
+    .el-space__item {
+      line-height: 30px;
+    }
+  }
+  :deep(.group-header) {
+    flex: 1;
+    padding: 0 10px;
+  }
+  .noTitle_card {
+    margin-bottom: 8px;
+  }
+  .form_card_content .form_child_card_content {
+    margin-bottom: 0;
+  }
+  // 边框 展示样式
+  .border_card {
+    margin-bottom: 12px !important;
+    :deep(.group-header) {
+      flex: 1;
+      padding: 0 10px 10px 0;
+    }
+    :deep(.el-space__item) {
+      padding-left: 4px;
+    }
+  }
+}
+.form-content-box {
+  :deep(.group-header) {
+    flex: 1;
+    padding: 4px 10px;
+  }
+  .form_card_content .form_child_card_content {
+    padding-bottom: 0;
+  }
+}
+
+.form_card.border_card {
+  margin-bottom: 0;
+  .form_child_card_content {
+    padding: 0;
+    border-left: 1px solid #ebeef5;
+    border-top: 1px solid #ebeef5;
+    border-radius: 6px;
+    overflow: hidden;
+  }
+  .form_card {
+    margin-bottom: 0;
+  }
+}
+.form_card_content {
+  width: 100%;
+  box-sizing: border-box;
+  // margin-bottom: 8px;
+
+  .form_child_card_content {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 8px;
+    // margin-bottom: 12px;
+
+    .table-box {
+      width: 100%;
+      max-height: 400px;
+    }
+    .spd-card {
+      padding: 0;
+    }
+  }
+}
+.form_card {
+  width: 100%;
+  border-radius: 4px;
+  // margin-bottom: 12px;
+}
+
+.noTitle_card {
+  width: calc(100% - 10px);
+}
+.group-header-box {
+  width: 100%;
+  padding-right: 6px;
+  box-sizing: border-box;
+}
+// 卡片模式
+.group_card {
+  border: 1px solid #e9e9e9;
+  margin-bottom: 12px;
+  .group-header-box {
+    background: var(--el-fill-color-light);
+  }
+  :deep(.group-header) {
+    padding: 8px 10px;
+  }
+}
+</style>

package/src/JztFormGrid/interface/index.ts

@@ -0,0 +1,106 @@
+import { Ref, VNode } from 'vue'
+
+import { EnumProps } from '../../JztQueryTable/interface/index'
+
+import type { FormInstance } from 'element-plus'
+
+export type JztFormInstance = {
+  onConfirm(callback?: () => void): void
+  onReset(callback?: () => void): void
+  validateFields(fields: string | string[]): boolean
+  formRef: FormInstance
+}
+export type FieldNamesProps = {
+  label: string
+  value: string
+  children?: string
+}
+export type ElType =
+  | 'el-input'
+  | 'el-input-number'
+  | 'el-select'
+  | 'el-select-v2'
+  | 'el-tree-select'
+  | 'el-cascader'
+  | 'el-date-picker'
+  | 'el-time-picker'
+  | 'el-time-select'
+  | 'el-switch'
+  | 'el-slider'
+  | 'el-radio-group'
+  | 'el-checkbox-group'
+  | 'JztUploadMultipleImgs'
+  | 'JztUploadImg'
+  | 'JztUploadMultipleFiles'
+  | 'JztUploadSingleFile'
+  | 'JztDictionary'
+  | 'JztTable'
+  | 'JztRegionSelect'
+
+export interface FormItemsProps<T = any> {
+  label?: string
+  key?: string
+  labelRender?: () => VNode | string // 自定义单元格标题渲染（tsx语法）
+  prop: keyof T
+  enumKey?: keyof T // 用于多字段公用同一个enum
+  formItemProps?: Record<string, any>
+  el?: ElType // 组件
+  span?: number // 列宽度
+  className?: string // className
+  // type?: TypeProps; // 列类型
+  // isHide?: boolean; // 是否隐藏
+  enum?: EnumProps[] | Ref<EnumProps[]> | ((params?: any) => Promise<any>) // 枚举字典
+  // enumCallBack?: (params?: any) => Promise<any>; // 处理接口返回的字典的回调
+  fieldNames?: FieldNamesProps // 指定 label && value && children 的 key 值
+  render?: () => VNode | string // 内容渲染（tsx语法）
+  showRender?: () => VNode | string // 内容渲染 isDetail 详情页使用  showRender>render
+  outerRender?: () => VNode | string // 外部在 formItem同层级渲染（tsx语法）
+  rightRender?: () => VNode | string // 内部右侧渲染 tsx语法）
+  rules?: any[]
+  btnLList?: any[]
+  // ! 注意： precision: true|数字值, 1️⃣ true:启用配置中的精度位数，2️⃣number:指定精度位数(数字值)
+  props?: any // 搜索项参数，根据 element plus 官方文档来传递，该属性所有值会透传到组件
+  events?:any; // 搜索项事件，根据 element plus 官方文档来传递，该属性所有值会透传到组件
+  // options?: any[] // 固定的下拉数据（废弃）
+  slotName?: string // 插槽、
+  tooltip?: string
+  groupTitle?: string // 表单分组标题
+  children?: FormItemsProps[]
+  collapse?: boolean // 是否折叠
+  /** 隐藏函数 */
+  hideFun?: Function //是否隐藏
+  disabledFn?: Function /** 禁用函数 */
+  cascader?: string[]
+  isAwait?: boolean // 是否需要等待请求接口
+  options?: Record<string, any>
+  dictType?: string | number // 字典ID
+  isSetEmptyData?: boolean // 是否设置空数据  适用场景例如：供应商 不选择时：页面为空，实际接口需要默认传 GUIDNoneValue：  00000000-0000-0000-0000-000000000000
+  emptyNullValue?: any // 空数据默认值，初始化默认是'', 结果默认值是GUIDNoneValue
+  startField?: string // 数组开始字段
+  endField?: string // 数组结束字段
+  change?: (scope: any) => any // change事件事件
+  isSetFirstValue?: boolean // 是否需要默认选中第一个数据
+  labelWidth?: string | number // labelWidth
+  allowCheckLevel?: number // 允许都选的长度层级，未达到的话，就说明此条数没有固定的子节点，场景： 医疗机构->仓库->科室，只允许选择科室，但是没有科室的医疗机构仓库 会正常返回，此时就不允许选择 第一层，第二层
+  fields?: string[] //  目前JztRegionSelect 专用 - [省 市 区]
+  hasCheckbox?: boolean // 是否显示全选反选
+  // field2?: string; // JztRegionSelect 专用 - 市
+  // field3?: string; // JztRegionSelect 专用 - 区
+  isDetail?: boolean // 是否是详情展示模式
+  detailProps?: DetailFormItemsProp
+  valueLeftRender?: () => VNode | string // 详情模式 value  内部右侧渲染 tsx语法）
+  valueRightRender?: () => VNode | string // 详情模式 value  内部右侧渲染 tsx语法
+  tooltipProps?: TooltipProps
+}
+
+export interface DetailFormItemsProp {
+  showProp?: string // 展示时的字段key 如果没有就会取FormItemsProps.prop  这个是为了防止详情和编辑的时候的字段不一致，编辑是id 展示是name
+  showOverflowTooltip?: boolean // 详情模式 value 显示超出Tooltip
+}
+
+export interface TooltipProps {
+  iconColor?: string
+  placement?: string
+  effect: string
+  content: string
+}

package/src/JztGrid/components/GridItem.vue

@@ -0,0 +1,68 @@
+<template>
+  <div v-show="isShow" :style="style">
+    <slot></slot>
+  </div>
+</template>
+<script setup lang="ts" name="GridItem">
+import { ref, Ref, inject, watch, useAttrs, computed } from 'vue'
+import { BreakPoint, Responsive } from '../interface/index'
+
+type Props = {
+  offset?: number
+  span?: number
+  suffix?: boolean
+  xs?: Responsive
+  sm?: Responsive
+  md?: Responsive
+  lg?: Responsive
+  xl?: Responsive
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  offset: 0,
+  span: 1,
+  suffix: false,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined
+})
+
+const attrs = useAttrs() as { index: string }
+const isShow = ref(true)
+
+// 注入断点
+const breakPoint = inject<Ref<BreakPoint>>('breakPoint', ref('xl'))
+const shouldHiddenIndex = inject<Ref<number>>('shouldHiddenIndex', ref(-1))
+watch(
+  () => [shouldHiddenIndex.value, breakPoint.value],
+  n => {
+    if (!!attrs.index) {
+      isShow.value = !(n[0] !== -1 && parseInt(attrs.index) >= Number(n[0]))
+    }
+  },
+  { immediate: true }
+)
+
+const gap = inject('gap', 0)
+const cols = inject('cols', ref(4))
+const style = computed(() => {
+  let span = props[breakPoint.value]?.span ?? props.span
+  let offset = props[breakPoint.value]?.offset ?? props.offset
+  if (props.suffix) {
+    return {
+      gridColumnStart: cols.value - span - offset + 1,
+      gridColumnEnd: `span ${span + offset}`,
+      marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : 'unset'
+    }
+  } else {
+    return {
+      gridColumn: `span ${span + offset > cols.value ? cols.value : span + offset}/span ${
+        span + offset > cols.value ? cols.value : span + offset
+      }`,
+      marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : 'unset'
+    }
+  }
+})
+</script>