@a2simcode/ui 0.0.177 → 0.0.179

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>

package/docs/examples/layout/hide-mid-when-narrow.vue

@@ -1,96 +1,96 @@
-<template>
-  <div class="layout-demo">
-    <div class="demo-tip">
-      <p style="margin: 0 0 10px 0; color: #1890ff; font-weight: bold">
-        💡 尝试调整浏览器窗口宽度观察效果
-      </p>
-      <p style="margin: 0; color: #666; font-size: 14px">
-        当容器宽度小于 500px（左200px + 右200px +
-        mid最小宽度100px）时，中间区域会自动隐藏，左右区域平分剩余宽度
-      </p>
-    </div>
-    <j-layout
-      :left="200"
-      :right="200"
-      :mid-min-width="100"
-      :hide-mid-when-narrow="true"
-      :left-move="false"
-      :right-move="false"
-    >
-      <template #left>
-        <div class="demo-block left">
-          <h3>左侧区域</h3>
-          <p>宽度: 200px</p>
-          <p style="color: #1890ff; margin-top: 10px">
-            当中间区域隐藏时，如果有右侧区域，则左右各占 50%
-          </p>
-        </div>
-      </template>
-      <template #default>
-        <div class="demo-block mid">
-          <h3>中间区域</h3>
-          <p>最小宽度: 100px</p>
-          <p style="color: #52c41a; margin-top: 10px">
-            当容器总宽度 &lt; (左侧宽度 + 右侧宽度 + mid最小宽度) 时，此区域会自动隐藏
-          </p>
-        </div>
-      </template>
-      <template #right>
-        <div class="demo-block right">
-          <h3>右侧区域</h3>
-          <p>宽度: 200px</p>
-          <p style="color: #1890ff; margin-top: 10px">
-            当中间区域隐藏时，如果有左侧区域，则左右各占 50%
-          </p>
-        </div>
-      </template>
-    </j-layout>
-  </div>
-</template>
-
-<style scoped>
-.layout-demo {
-  border: 1px solid #e8e8e8;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.demo-tip {
-  padding: 15px;
-  background: #f0f9ff;
-  border-bottom: 1px solid #e8e8e8;
-}
-
-.layout-demo :deep(.j-layout) {
-  height: 500px;
-}
-
-.demo-block {
-  padding: 20px;
-  height: 100%;
-  overflow: auto;
-}
-
-.demo-block.left {
-  background: #e6f7ff;
-}
-
-.demo-block.mid {
-  background: #f6ffed;
-}
-
-.demo-block.right {
-  background: #fff7e6;
-}
-
-.demo-block h3 {
-  margin: 0 0 10px 0;
-  color: #333;
-}
-
-.demo-block p {
-  margin: 5px 0;
-  color: #666;
-  font-size: 14px;
-}
-</style>
+<template>
+  <div class="layout-demo">
+    <div class="demo-tip">
+      <p style="margin: 0 0 10px 0; color: #1890ff; font-weight: bold">
+        💡 尝试调整浏览器窗口宽度观察效果
+      </p>
+      <p style="margin: 0; color: #666; font-size: 14px">
+        当容器宽度小于 500px（左200px + 右200px +
+        mid最小宽度100px）时，中间区域会自动隐藏，左右区域平分剩余宽度
+      </p>
+    </div>
+    <j-layout
+      :left="200"
+      :right="200"
+      :mid-min-width="100"
+      :hide-mid-when-narrow="true"
+      :left-move="false"
+      :right-move="false"
+    >
+      <template #left>
+        <div class="demo-block left">
+          <h3>左侧区域</h3>
+          <p>宽度: 200px</p>
+          <p style="color: #1890ff; margin-top: 10px">
+            当中间区域隐藏时，如果有右侧区域，则左右各占 50%
+          </p>
+        </div>
+      </template>
+      <template #default>
+        <div class="demo-block mid">
+          <h3>中间区域</h3>
+          <p>最小宽度: 100px</p>
+          <p style="color: #52c41a; margin-top: 10px">
+            当容器总宽度 &lt; (左侧宽度 + 右侧宽度 + mid最小宽度) 时，此区域会自动隐藏
+          </p>
+        </div>
+      </template>
+      <template #right>
+        <div class="demo-block right">
+          <h3>右侧区域</h3>
+          <p>宽度: 200px</p>
+          <p style="color: #1890ff; margin-top: 10px">
+            当中间区域隐藏时，如果有左侧区域，则左右各占 50%
+          </p>
+        </div>
+      </template>
+    </j-layout>
+  </div>
+</template>
+
+<style scoped>
+.layout-demo {
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.demo-tip {
+  padding: 15px;
+  background: #f0f9ff;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.layout-demo :deep(.j-layout) {
+  height: 500px;
+}
+
+.demo-block {
+  padding: 20px;
+  height: 100%;
+  overflow: auto;
+}
+
+.demo-block.left {
+  background: #e6f7ff;
+}
+
+.demo-block.mid {
+  background: #f6ffed;
+}
+
+.demo-block.right {
+  background: #fff7e6;
+}
+
+.demo-block h3 {
+  margin: 0 0 10px 0;
+  color: #333;
+}
+
+.demo-block p {
+  margin: 5px 0;
+  color: #666;
+  font-size: 14px;
+}
+</style>