@a2simcode/ui 0.0.55 → 0.0.56

package/docs/examples/layer-form/config.vue

@@ -1,82 +1,82 @@
-<template>
-  <div>
-    <!-- j-form 通过 schema 渲染表单字段，j-layer-form 作为 schema 中的一项 -->
-    <j-form :schema="schema" :config="formConfig" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { SchemaConfig } from '@simcode/ui'
-
-// j-form 的表单配置
-const formConfig = {
-  labelWidth: 100,
-  labelPosition: 'right',
-  size: 'default',
-  gutter: 16,
-  span: 24,
-}
-
-// j-form 的 schema，j-layer-form 作为其中的一项
-const schema = ref<SchemaConfig[]>([
-  {
-    type: 'j-layer-form',
-    config: {
-      label: '表单配置示例',
-      layerLabel: '表单配置示例',
-      // j-layer-form 的表单配置（会覆盖 j-form 的配置）
-      formConfig: {
-        labelWidth: 120,
-        labelPosition: 'left',
-        size: 'default',
-        gutter: 20,
-        span: 12,
-      },
-    },
-    // j-layer-form 弹窗内的表单字段通过 children 配置
-    children: [
-      {
-        id: 'name',
-        type: 'j-input',
-        config: {
-          label: '姓名',
-          field: 'name',
-          placeholder: '请输入姓名',
-          defaultValue: '',
-        },
-      },
-      {
-        id: 'age',
-        type: 'j-number',
-        config: {
-          label: '年龄',
-          field: 'age',
-          placeholder: '请输入年龄',
-          defaultValue: 0,
-        },
-      },
-      {
-        id: 'email',
-        type: 'j-input',
-        config: {
-          label: '邮箱',
-          field: 'email',
-          placeholder: '请输入邮箱',
-          defaultValue: '',
-        },
-      },
-      {
-        id: 'phone',
-        type: 'j-input',
-        config: {
-          label: '电话',
-          field: 'phone',
-          placeholder: '请输入电话',
-          defaultValue: '',
-        },
-      },
-    ],
-  },
-])
-</script>
+<template>
+  <div>
+    <!-- j-form 通过 schema 渲染表单字段，j-layer-form 作为 schema 中的一项 -->
+    <j-form :schema="schema" :config="formConfig" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { SchemaConfig } from '@simcode/ui'
+
+// j-form 的表单配置
+const formConfig = {
+  labelWidth: 100,
+  labelPosition: 'right',
+  size: 'default',
+  gutter: 16,
+  span: 24,
+}
+
+// j-form 的 schema，j-layer-form 作为其中的一项
+const schema = ref<SchemaConfig[]>([
+  {
+    type: 'j-layer-form',
+    config: {
+      label: '表单配置示例',
+      layerLabel: '表单配置示例',
+      // j-layer-form 的表单配置（会覆盖 j-form 的配置）
+      formConfig: {
+        labelWidth: 120,
+        labelPosition: 'left',
+        size: 'default',
+        gutter: 20,
+        span: 12,
+      },
+    },
+    // j-layer-form 弹窗内的表单字段通过 children 配置
+    children: [
+      {
+        id: 'name',
+        type: 'j-input',
+        config: {
+          label: '姓名',
+          field: 'name',
+          placeholder: '请输入姓名',
+          defaultValue: '',
+        },
+      },
+      {
+        id: 'age',
+        type: 'j-number',
+        config: {
+          label: '年龄',
+          field: 'age',
+          placeholder: '请输入年龄',
+          defaultValue: 0,
+        },
+      },
+      {
+        id: 'email',
+        type: 'j-input',
+        config: {
+          label: '邮箱',
+          field: 'email',
+          placeholder: '请输入邮箱',
+          defaultValue: '',
+        },
+      },
+      {
+        id: 'phone',
+        type: 'j-input',
+        config: {
+          label: '电话',
+          field: 'phone',
+          placeholder: '请输入电话',
+          defaultValue: '',
+        },
+      },
+    ],
+  },
+])
+</script>

package/docs/examples/layer-form/size.vue

@@ -1,72 +1,72 @@
-<template>
-  <div>
-    <!-- j-form 通过 schema 渲染表单字段，j-layer-form 作为 schema 中的一项 -->
-    <j-form :schema="schema" :config="formConfig" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { SchemaConfig } from '@simcode/ui'
-
-const formConfig = {
-  labelWidth: 100,
-  labelPosition: 'right',
-  size: 'default',
-  gutter: 16,
-  span: 24,
-}
-
-// j-form 的 schema，j-layer-form 作为其中的一项
-const schema = ref<SchemaConfig[]>([
-  {
-    type: 'j-layer-form',
-    config: {
-      label: '大尺寸弹窗',
-      layerLabel: '大尺寸弹窗',
-      layerWidth: 800,
-      layerHeight: 500,
-    },
-    // j-layer-form 弹窗内的表单字段通过 children 配置
-    children: [
-      {
-        id: 'title',
-        type: 'j-input',
-        config: {
-          label: '标题',
-          field: 'title',
-          placeholder: '请输入标题',
-          defaultValue: '',
-        },
-      },
-      {
-        id: 'description',
-        type: 'j-input',
-        config: {
-          label: '描述',
-          field: 'description',
-          placeholder: '请输入描述',
-          defaultValue: '',
-          type: 'textarea',
-          rows: 4,
-        },
-      },
-      {
-        id: 'category',
-        type: 'j-select',
-        config: {
-          label: '分类',
-          field: 'category',
-          placeholder: '请选择分类',
-          defaultValue: '',
-          options: [
-            { label: '技术', value: 'tech' },
-            { label: '产品', value: 'product' },
-            { label: '设计', value: 'design' },
-          ],
-        },
-      },
-    ],
-  },
-])
-</script>
+<template>
+  <div>
+    <!-- j-form 通过 schema 渲染表单字段，j-layer-form 作为 schema 中的一项 -->
+    <j-form :schema="schema" :config="formConfig" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { SchemaConfig } from '@simcode/ui'
+
+const formConfig = {
+  labelWidth: 100,
+  labelPosition: 'right',
+  size: 'default',
+  gutter: 16,
+  span: 24,
+}
+
+// j-form 的 schema，j-layer-form 作为其中的一项
+const schema = ref<SchemaConfig[]>([
+  {
+    type: 'j-layer-form',
+    config: {
+      label: '大尺寸弹窗',
+      layerLabel: '大尺寸弹窗',
+      layerWidth: 800,
+      layerHeight: 500,
+    },
+    // j-layer-form 弹窗内的表单字段通过 children 配置
+    children: [
+      {
+        id: 'title',
+        type: 'j-input',
+        config: {
+          label: '标题',
+          field: 'title',
+          placeholder: '请输入标题',
+          defaultValue: '',
+        },
+      },
+      {
+        id: 'description',
+        type: 'j-input',
+        config: {
+          label: '描述',
+          field: 'description',
+          placeholder: '请输入描述',
+          defaultValue: '',
+          type: 'textarea',
+          rows: 4,
+        },
+      },
+      {
+        id: 'category',
+        type: 'j-select',
+        config: {
+          label: '分类',
+          field: 'category',
+          placeholder: '请选择分类',
+          defaultValue: '',
+          options: [
+            { label: '技术', value: 'tech' },
+            { label: '产品', value: 'product' },
+            { label: '设计', value: 'design' },
+          ],
+        },
+      },
+    ],
+  },
+])
+</script>

package/docs/examples/layout/basic.vue

@@ -1,36 +1,36 @@
-<template>
-  <div style="height: 500px; border: 1px solid #ddd">
-    <j-layout>
-      <template #left>
-        <div style="padding: 20px; background: #f0f2f5; height: 100%">
-          <h3>左侧区域</h3>
-          <p>可拖动调整宽度</p>
-        </div>
-      </template>
-      <template #top>
-        <div style="padding: 10px 20px; background: #e6f4ff; height: 100%">
-          <h4>顶部区域</h4>
-        </div>
-      </template>
-      <template #default>
-        <div style="padding: 20px; height: 100%; overflow: auto">
-          <h3>主体内容区域</h3>
-          <p>这是中间的主体内容区域</p>
-          <p>Layout 组件支持上下左右四个区域的布局</p>
-          <p>每个区域都可以独立配置大小和是否允许拖拽调整</p>
-        </div>
-      </template>
-      <template #right>
-        <div style="padding: 20px; background: #f0f2f5; height: 100%">
-          <h3>右侧区域</h3>
-          <p>可拖动调整宽度</p>
-        </div>
-      </template>
-      <template #bottom>
-        <div style="padding: 10px 20px; background: #fffbe6; height: 100%">
-          <h4>底部区域</h4>
-        </div>
-      </template>
-    </j-layout>
-  </div>
-</template>
+<template>
+  <div style="height: 500px; border: 1px solid #ddd">
+    <j-layout>
+      <template #left>
+        <div style="padding: 20px; background: #f0f2f5; height: 100%">
+          <h3>左侧区域</h3>
+          <p>可拖动调整宽度</p>
+        </div>
+      </template>
+      <template #top>
+        <div style="padding: 10px 20px; background: #e6f4ff; height: 100%">
+          <h4>顶部区域</h4>
+        </div>
+      </template>
+      <template #default>
+        <div style="padding: 20px; height: 100%; overflow: auto">
+          <h3>主体内容区域</h3>
+          <p>这是中间的主体内容区域</p>
+          <p>Layout 组件支持上下左右四个区域的布局</p>
+          <p>每个区域都可以独立配置大小和是否允许拖拽调整</p>
+        </div>
+      </template>
+      <template #right>
+        <div style="padding: 20px; background: #f0f2f5; height: 100%">
+          <h3>右侧区域</h3>
+          <p>可拖动调整宽度</p>
+        </div>
+      </template>
+      <template #bottom>
+        <div style="padding: 10px 20px; background: #fffbe6; height: 100%">
+          <h4>底部区域</h4>
+        </div>
+      </template>
+    </j-layout>
+  </div>
+</template>

package/docs/examples/layout/custom-size.vue

@@ -1,50 +1,50 @@
-<template>
-  <div style="height: 400px; border: 1px solid #ddd">
-    <j-layout :left="300" :top="80" :right="200" :bottom="80">
-      <template #left>
-        <div style="padding: 20px; background: #f0f2f5; height: 100%">
-          <h4>左侧宽度: 300px</h4>
-          <p>通过 :left="300" 设置</p>
-        </div>
-      </template>
-      <template #top>
-        <div
-          style="
-            padding: 15px 20px;
-            background: #e6f4ff;
-            height: 100%;
-            display: flex;
-            align-items: center;
-          "
-        >
-          <h4 style="margin: 0">顶部高度: 80px (通过 :top="80" 设置)</h4>
-        </div>
-      </template>
-      <template #default>
-        <div style="padding: 20px; height: 100%; overflow: auto">
-          <h3>自定义尺寸示例</h3>
-          <p>可以通过 left、right、top、bottom 属性自定义各个区域的初始大小</p>
-        </div>
-      </template>
-      <template #right>
-        <div style="padding: 20px; background: #f0f2f5; height: 100%">
-          <h4>右侧宽度: 200px</h4>
-          <p>通过 :right="200" 设置</p>
-        </div>
-      </template>
-      <template #bottom>
-        <div
-          style="
-            padding: 15px 20px;
-            background: #fffbe6;
-            height: 100%;
-            display: flex;
-            align-items: center;
-          "
-        >
-          <h4 style="margin: 0">底部高度: 80px (通过 :bottom="80" 设置)</h4>
-        </div>
-      </template>
-    </j-layout>
-  </div>
-</template>
+<template>
+  <div style="height: 400px; border: 1px solid #ddd">
+    <j-layout :left="300" :top="80" :right="200" :bottom="80">
+      <template #left>
+        <div style="padding: 20px; background: #f0f2f5; height: 100%">
+          <h4>左侧宽度: 300px</h4>
+          <p>通过 :left="300" 设置</p>
+        </div>
+      </template>
+      <template #top>
+        <div
+          style="
+            padding: 15px 20px;
+            background: #e6f4ff;
+            height: 100%;
+            display: flex;
+            align-items: center;
+          "
+        >
+          <h4 style="margin: 0">顶部高度: 80px (通过 :top="80" 设置)</h4>
+        </div>
+      </template>
+      <template #default>
+        <div style="padding: 20px; height: 100%; overflow: auto">
+          <h3>自定义尺寸示例</h3>
+          <p>可以通过 left、right、top、bottom 属性自定义各个区域的初始大小</p>
+        </div>
+      </template>
+      <template #right>
+        <div style="padding: 20px; background: #f0f2f5; height: 100%">
+          <h4>右侧宽度: 200px</h4>
+          <p>通过 :right="200" 设置</p>
+        </div>
+      </template>
+      <template #bottom>
+        <div
+          style="
+            padding: 15px 20px;
+            background: #fffbe6;
+            height: 100%;
+            display: flex;
+            align-items: center;
+          "
+        >
+          <h4 style="margin: 0">底部高度: 80px (通过 :bottom="80" 设置)</h4>
+        </div>
+      </template>
+    </j-layout>
+  </div>
+</template>

package/docs/examples/layout/disable-move.vue

@@ -1,37 +1,37 @@
-<template>
-  <div style="height: 400px; border: 1px solid #ddd">
-    <j-layout :left-move="false" :right-move="false" :top-move="false" :bottom-move="false">
-      <template #left>
-        <div style="padding: 20px; background: #f0f2f5; height: 100%">
-          <h4>左侧区域</h4>
-          <p>禁用拖拽</p>
-        </div>
-      </template>
-      <template #top>
-        <div style="padding: 10px 20px; background: #e6f4ff; height: 100%">
-          <h4>顶部区域 (禁用拖拽)</h4>
-        </div>
-      </template>
-      <template #default>
-        <div style="padding: 20px; height: 100%; overflow: auto">
-          <h3>禁用拖拽示例</h3>
-          <p>
-            通过设置 leftMove、rightMove、topMove、bottomMove 为 false 可以禁用对应区域的拖拽功能
-          </p>
-          <p>当前示例中，所有区域都禁用了拖拽，尺寸保持固定</p>
-        </div>
-      </template>
-      <template #right>
-        <div style="padding: 20px; background: #f0f2f5; height: 100%">
-          <h4>右侧区域</h4>
-          <p>禁用拖拽</p>
-        </div>
-      </template>
-      <template #bottom>
-        <div style="padding: 10px 20px; background: #fffbe6; height: 100%">
-          <h4>底部区域 (禁用拖拽)</h4>
-        </div>
-      </template>
-    </j-layout>
-  </div>
-</template>
+<template>
+  <div style="height: 400px; border: 1px solid #ddd">
+    <j-layout :left-move="false" :right-move="false" :top-move="false" :bottom-move="false">
+      <template #left>
+        <div style="padding: 20px; background: #f0f2f5; height: 100%">
+          <h4>左侧区域</h4>
+          <p>禁用拖拽</p>
+        </div>
+      </template>
+      <template #top>
+        <div style="padding: 10px 20px; background: #e6f4ff; height: 100%">
+          <h4>顶部区域 (禁用拖拽)</h4>
+        </div>
+      </template>
+      <template #default>
+        <div style="padding: 20px; height: 100%; overflow: auto">
+          <h3>禁用拖拽示例</h3>
+          <p>
+            通过设置 leftMove、rightMove、topMove、bottomMove 为 false 可以禁用对应区域的拖拽功能
+          </p>
+          <p>当前示例中，所有区域都禁用了拖拽，尺寸保持固定</p>
+        </div>
+      </template>
+      <template #right>
+        <div style="padding: 20px; background: #f0f2f5; height: 100%">
+          <h4>右侧区域</h4>
+          <p>禁用拖拽</p>
+        </div>
+      </template>
+      <template #bottom>
+        <div style="padding: 10px 20px; background: #fffbe6; height: 100%">
+          <h4>底部区域 (禁用拖拽)</h4>
+        </div>
+      </template>
+    </j-layout>
+  </div>
+</template>