vue2-client 1.15.86 → 1.15.88

package/src/base-client/components/common/XForm/demo.vue

@@ -1,105 +1,105 @@
-<template>
-  <div class="demo-container">
-    <h2>XFormItem Demo</h2>
-
-    <!-- 查询模式演示 -->
-    <div class="demo-section">
-      <h3>查询模式</h3>
-      <x-form-item
-        :attr="queryAttr"
-        :form="queryForm"
-        mode="查询"
-        :showLabel="true"
-      />
-      <div class="value-display">
-        当前值: {{ queryForm.rate || '未选择' }}
-      </div>
-    </div>
-
-    <!-- 新增模式演示 -->
-    <div class="demo-section">
-      <h3>新增模式</h3>
-      <x-form-item
-        :attr="addAttr"
-        :form="addForm"
-        mode="新增/修改"
-        :showLabel="true"
-      />
-      <div class="value-display">
-        当前值: {{ addForm.rate || '未评分' }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import XFormItem from './XFormItem.vue'
-
-export default {
-  name: 'XFormItemDemo',
-  components: {
-    XFormItem
-  },
-  data () {
-    return {
-      // 查询表单配置
-      queryAttr: {
-        type: 'rate',
-        name: '评分查询',
-        queryType: 'IN',
-        model: 'rate',
-        placeholder: '请选择评分',
-        allowHalf: true,
-        maxCount: 5
-      },
-      queryForm: {
-      },
-
-      // 新增表单配置
-      addAttr: {
-        type: 'rate',
-        name: '评分',
-        model: 'rate',
-        allowHalf: true,
-        maxCount: 10
-      },
-      addForm: {
-        rate: 3
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.demo-container {
-  padding: 20px;
-  max-width: 800px;
-  margin: 0 auto;
-  background-color: #f5f5f5;
-
-  h2 {
-    margin-bottom: 20px;
-    color: #1890ff;
-  }
-
-  .demo-section {
-    margin-bottom: 30px;
-    padding: 20px;
-    border: 1px solid #e8e8e8;
-    border-radius: 4px;
-
-    h3 {
-      margin-bottom: 16px;
-      color: #333;
-    }
-
-    .value-display {
-      margin-top: 16px;
-      padding: 8px;
-      background-color: #f5f5f5;
-      border-radius: 4px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="demo-container">
+    <h2>XFormItem Demo</h2>
+
+    <!-- 查询模式演示 -->
+    <div class="demo-section">
+      <h3>查询模式</h3>
+      <x-form-item
+        :attr="queryAttr"
+        :form="queryForm"
+        mode="查询"
+        :showLabel="true"
+      />
+      <div class="value-display">
+        当前值: {{ queryForm.rate || '未选择' }}
+      </div>
+    </div>
+
+    <!-- 新增模式演示 -->
+    <div class="demo-section">
+      <h3>新增模式</h3>
+      <x-form-item
+        :attr="addAttr"
+        :form="addForm"
+        mode="新增/修改"
+        :showLabel="true"
+      />
+      <div class="value-display">
+        当前值: {{ addForm.rate || '未评分' }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import XFormItem from './XFormItem.vue'
+
+export default {
+  name: 'XFormItemDemo',
+  components: {
+    XFormItem
+  },
+  data () {
+    return {
+      // 查询表单配置
+      queryAttr: {
+        type: 'rate',
+        name: '评分查询',
+        queryType: 'IN',
+        model: 'rate',
+        placeholder: '请选择评分',
+        allowHalf: true,
+        maxCount: 5
+      },
+      queryForm: {
+      },
+
+      // 新增表单配置
+      addAttr: {
+        type: 'rate',
+        name: '评分',
+        model: 'rate',
+        allowHalf: true,
+        maxCount: 10
+      },
+      addForm: {
+        rate: 3
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.demo-container {
+  padding: 20px;
+  max-width: 800px;
+  margin: 0 auto;
+  background-color: #f5f5f5;
+
+  h2 {
+    margin-bottom: 20px;
+    color: #1890ff;
+  }
+
+  .demo-section {
+    margin-bottom: 30px;
+    padding: 20px;
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+
+    h3 {
+      margin-bottom: 16px;
+      color: #333;
+    }
+
+    .value-display {
+      margin-top: 16px;
+      padding: 8px;
+      background-color: #f5f5f5;
+      border-radius: 4px;
+    }
+  }
+}
+</style>

package/src/base-client/components/common/XForm/index.js

@@ -1,3 +1,3 @@
-import XForm from './XForm'
-
-export default XForm
+import XForm from './XForm'
+
+export default XForm

package/src/base-client/components/common/XFormCol/XFormCol.vue

@@ -1,157 +1,157 @@
-<template>
-  <a-col :style="computedStyles">
-    <div
-      class="x-form-col-wrapper"
-      :style="computedWrapperStyles"
-    >
-      <slot></slot>
-    </div>
-  </a-col>
-</template>
-
-<script>
-const BREAKPOINTS = {
-  xs: 576,
-  sm: 768,
-  md: 992,
-  lg: 1200,
-  xl: 1600,
-}
-
-const defaultFlex = {
-  xs: 24,
-  sm: 24,
-  md: 8,
-  lg: 8,
-  xl: 6,
-  xxl: 6,
-}
-
-function debounce (fn, delay) {
-  let timeout = null
-  return function (...args) {
-    if (timeout) clearTimeout(timeout)
-    timeout = setTimeout(() => {
-      fn.apply(this, args)
-    }, delay)
-  }
-}
-
-export default {
-  name: 'XFormCol',
-  props: {
-    flex: {
-      type: Object,
-      default: () => ({
-        xs: 24,
-        sm: 24,
-        md: 8,
-        lg: 6,
-        xl: 6,
-        xxl: 6,
-      }),
-    },
-    occupyCol: {
-      type: Number,
-      default: 1,
-    },
-    layout: {
-      type: String,
-      default: 'horizontal',
-    },
-    labelCol: {
-      type: Object,
-      default: () => { return { span: 8 } }
-    }
-  },
-  computed: {
-    computedFlex () {
-      const parentWidth = this.parentWidth
-      return this.getFlex(parentWidth, this.flex)
-    },
-    computedWrapperStyles () {
-      const realFlex = this.flex.fullWidth ? this.getFlex(this.parentWidth) : this.computedFlex
-      // 1. 计算列数
-      const columnsCount = 24 / realFlex
-      // 2. 计算基准列宽
-      const baseColumnWidth = (this.parentWidth / columnsCount) - ((columnsCount - 1) * 16)
-      // 3. 计算label宽度
-      const labelWidth = Math.max(baseColumnWidth / (24 / this.labelCol.span), 80)
-      // 计算左右偏移量
-      const offset = this.labelCol.offset ? (this.labelCol.offset / 24) * 100 : 0
-      if (this.layout === 'vertical') {
-        return {
-          '--form-label-width': '',
-          '--form-offset': '',
-        }
-      }
-      return {
-        '--form-label-width': `${labelWidth}px`,
-        '--form-offset': `${offset}%`,
-      }
-    },
-    computedStyles () {
-      const realFlex = Math.min(this.computedFlex * this.occupyCol, 24)
-      const flexValue = (realFlex / 24) * 100
-
-      return {
-        flex: `0 0 ${flexValue}%`,
-        maxWidth: `${flexValue}%`,
-      }
-    },
-  },
-  data () {
-    return {
-      parentWidth: 0,
-    }
-  },
-  methods: {
-    getFlex (parentWidth, flex = defaultFlex) {
-      if (parentWidth === 0) {
-        return flex.md
-      }
-      if (parentWidth < BREAKPOINTS.xs) return flex.xs
-      if (parentWidth < BREAKPOINTS.sm) return flex.sm
-      if (parentWidth < BREAKPOINTS.md) return flex.md
-      if (parentWidth < BREAKPOINTS.lg) return flex.lg
-      if (parentWidth < BREAKPOINTS.xl) return flex.xl
-      return flex.xxl
-    },
-  },
-  mounted () {
-    // 根据父容器宽度响应式
-    this.$nextTick(() => {
-      const container = this.$el.parentNode
-      this.parentWidth = container.offsetWidth
-      const updateWidth = debounce((width) => {
-        this.parentWidth = width
-      }, 100)
-
-      this.resizeObserver = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          updateWidth(entry.contentRect.width)
-        }
-      })
-      this.resizeObserver.observe(container)
-    })
-  },
-  beforeUnmount () {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect()
-    }
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.x-form-col-wrapper {
-  :deep(.ant-form-item) {
-    .ant-form-item-label {
-      max-width: var(--form-label-width);
-    }
-    .ant-form-item-control-wrapper {
-      width: calc(100% - var(--form-label-width) - var(--form-offset) - var(--form-offset));
-    }
-  }
-}
-</style>
+<template>
+  <a-col :style="computedStyles">
+    <div
+      class="x-form-col-wrapper"
+      :style="computedWrapperStyles"
+    >
+      <slot></slot>
+    </div>
+  </a-col>
+</template>
+
+<script>
+const BREAKPOINTS = {
+  xs: 576,
+  sm: 768,
+  md: 992,
+  lg: 1200,
+  xl: 1600,
+}
+
+const defaultFlex = {
+  xs: 24,
+  sm: 24,
+  md: 8,
+  lg: 8,
+  xl: 6,
+  xxl: 6,
+}
+
+function debounce (fn, delay) {
+  let timeout = null
+  return function (...args) {
+    if (timeout) clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      fn.apply(this, args)
+    }, delay)
+  }
+}
+
+export default {
+  name: 'XFormCol',
+  props: {
+    flex: {
+      type: Object,
+      default: () => ({
+        xs: 24,
+        sm: 24,
+        md: 8,
+        lg: 6,
+        xl: 6,
+        xxl: 6,
+      }),
+    },
+    occupyCol: {
+      type: Number,
+      default: 1,
+    },
+    layout: {
+      type: String,
+      default: 'horizontal',
+    },
+    labelCol: {
+      type: Object,
+      default: () => { return { span: 8 } }
+    }
+  },
+  computed: {
+    computedFlex () {
+      const parentWidth = this.parentWidth
+      return this.getFlex(parentWidth, this.flex)
+    },
+    computedWrapperStyles () {
+      const realFlex = this.flex.fullWidth ? this.getFlex(this.parentWidth) : this.computedFlex
+      // 1. 计算列数
+      const columnsCount = 24 / realFlex
+      // 2. 计算基准列宽
+      const baseColumnWidth = (this.parentWidth / columnsCount) - ((columnsCount - 1) * 16)
+      // 3. 计算label宽度
+      const labelWidth = Math.max(baseColumnWidth / (24 / this.labelCol.span), 80)
+      // 计算左右偏移量
+      const offset = this.labelCol.offset ? (this.labelCol.offset / 24) * 100 : 0
+      if (this.layout === 'vertical') {
+        return {
+          '--form-label-width': '',
+          '--form-offset': '',
+        }
+      }
+      return {
+        '--form-label-width': `${labelWidth}px`,
+        '--form-offset': `${offset}%`,
+      }
+    },
+    computedStyles () {
+      const realFlex = Math.min(this.computedFlex * this.occupyCol, 24)
+      const flexValue = (realFlex / 24) * 100
+
+      return {
+        flex: `0 0 ${flexValue}%`,
+        maxWidth: `${flexValue}%`,
+      }
+    },
+  },
+  data () {
+    return {
+      parentWidth: 0,
+    }
+  },
+  methods: {
+    getFlex (parentWidth, flex = defaultFlex) {
+      if (parentWidth === 0) {
+        return flex.md
+      }
+      if (parentWidth < BREAKPOINTS.xs) return flex.xs
+      if (parentWidth < BREAKPOINTS.sm) return flex.sm
+      if (parentWidth < BREAKPOINTS.md) return flex.md
+      if (parentWidth < BREAKPOINTS.lg) return flex.lg
+      if (parentWidth < BREAKPOINTS.xl) return flex.xl
+      return flex.xxl
+    },
+  },
+  mounted () {
+    // 根据父容器宽度响应式
+    this.$nextTick(() => {
+      const container = this.$el.parentNode
+      this.parentWidth = container.offsetWidth
+      const updateWidth = debounce((width) => {
+        this.parentWidth = width
+      }, 100)
+
+      this.resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          updateWidth(entry.contentRect.width)
+        }
+      })
+      this.resizeObserver.observe(container)
+    })
+  },
+  beforeUnmount () {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.x-form-col-wrapper {
+  :deep(.ant-form-item) {
+    .ant-form-item-label {
+      max-width: var(--form-label-width);
+    }
+    .ant-form-item-control-wrapper {
+      width: calc(100% - var(--form-label-width) - var(--form-offset) - var(--form-offset));
+    }
+  }
+}
+</style>

package/src/base-client/components/common/XFormCol/index.js

@@ -1,3 +1,3 @@
-import XFormCol from './XFormCol'
-
-export default XFormCol
+import XFormCol from './XFormCol'
+
+export default XFormCol

package/src/base-client/components/common/XFormCol/index.md

@@ -1,35 +1,35 @@
-# XFormCol 适用于表单的通用响应式栅格a-col封装
-
-提供一个可以自适应各种分辨率设备的表单栅格a-col封装
-
-
-
-## 何时使用
-
-当需要一个可以自适应各类分辨率设备，响应式布局的表单时
-
-
-引用方式：
-
-```javascript
-import XFormCol from '@vue2-client/base-client/components/XFormCol'
-
-export default {
-    components: {
-      XFormCol
-    }
-}
-```
-
-
-
-## 代码演示
-
-```html
-<x-form-col />
-```
-
-## API
-
-| 参数  | 说明  | 类型  | 默认值 |
-|-----|-----|-----|-----|
+# XFormCol 适用于表单的通用响应式栅格a-col封装
+
+提供一个可以自适应各种分辨率设备的表单栅格a-col封装
+
+
+
+## 何时使用
+
+当需要一个可以自适应各类分辨率设备，响应式布局的表单时
+
+
+引用方式：
+
+```javascript
+import XFormCol from '@vue2-client/base-client/components/XFormCol'
+
+export default {
+    components: {
+      XFormCol
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<x-form-col />
+```
+
+## API
+
+| 参数  | 说明  | 类型  | 默认值 |
+|-----|-----|-----|-----|