@a2simcode/ui 0.0.163 → 0.0.164

package/docs/examples/layer/full.vue

@@ -1,38 +1,38 @@
-<template>
-  <div>
-    <j-button label="打开全屏" @click="openLayer" />
-    <j-layer ref="layerRef" @ok="handleOk" @cancel="handleCancel">
-      <div style="padding: 16px">
-        <h3>全屏模式示例</h3>
-        <p>全屏模式会占据整个浏览器窗口。</p>
-        <p>适用于需要大量展示内容的场景。</p>
-        <div style="margin-top: 20px">
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-          <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-        </div>
-      </div>
-    </j-layer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const layerRef = ref()
-
-const openLayer = () => {
-  layerRef.value.open('全屏示例', 'full')
-}
-
-const handleOk = (showLoading: any, hideLoading: any) => {
-  showLoading('保存中...')
-  setTimeout(() => {
-    hideLoading()
-    layerRef.value.close()
-  }, 1500)
-}
-
-const handleCancel = () => {
-  layerRef.value.close()
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开全屏" @click="openLayer" />
+    <j-layer ref="layerRef" @ok="handleOk" @cancel="handleCancel">
+      <div style="padding: 16px">
+        <h3>全屏模式示例</h3>
+        <p>全屏模式会占据整个浏览器窗口。</p>
+        <p>适用于需要大量展示内容的场景。</p>
+        <div style="margin-top: 20px">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+          <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </div>
+      </div>
+    </j-layer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const layerRef = ref()
+
+const openLayer = () => {
+  layerRef.value.open('全屏示例', 'full')
+}
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('保存中...')
+  setTimeout(() => {
+    hideLoading()
+    layerRef.value.close()
+  }, 1500)
+}
+
+const handleCancel = () => {
+  layerRef.value.close()
+}
+</script>

package/docs/examples/layer/modal.vue

@@ -1,34 +1,34 @@
-<template>
-  <div>
-    <j-button label="打开弹窗" @click="openLayer" />
-    <j-layer ref="layerRef" :width="800" :height="500" @ok="handleOk" @cancel="handleCancel">
-      <div style="padding: 16px">
-        <p>这是弹窗模式的示例。</p>
-        <p>可以通过 width 和 height 属性设置弹窗大小。</p>
-        <p>弹窗支持拖拽和缩放功能。</p>
-      </div>
-    </j-layer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const layerRef = ref()
-
-const openLayer = () => {
-  layerRef.value.open('弹窗示例', 'modal')
-}
-
-const handleOk = (showLoading: any, hideLoading: any) => {
-  showLoading('处理中...')
-  setTimeout(() => {
-    hideLoading()
-    layerRef.value.close()
-  }, 1000)
-}
-
-const handleCancel = () => {
-  layerRef.value.close()
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开弹窗" @click="openLayer" />
+    <j-layer ref="layerRef" :width="800" :height="500" @ok="handleOk" @cancel="handleCancel">
+      <div style="padding: 16px">
+        <p>这是弹窗模式的示例。</p>
+        <p>可以通过 width 和 height 属性设置弹窗大小。</p>
+        <p>弹窗支持拖拽和缩放功能。</p>
+      </div>
+    </j-layer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const layerRef = ref()
+
+const openLayer = () => {
+  layerRef.value.open('弹窗示例', 'modal')
+}
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('处理中...')
+  setTimeout(() => {
+    hideLoading()
+    layerRef.value.close()
+  }, 1000)
+}
+
+const handleCancel = () => {
+  layerRef.value.close()
+}
+</script>

package/docs/examples/layer/steps.vue

@@ -1,46 +1,46 @@
-<template>
-  <div>
-    <j-button label="打开步骤弹窗" @click="openLayer" />
-    <j-layer
-      ref="layerRef"
-      :is-step="true"
-      :steps="['基本信息', '详细配置', '确认提交']"
-      :validate-steps="validateSteps"
-      @ok="handleOk"
-      @cancel="handleCancel"
-    >
-      <div style="padding: 16px">
-        <p>这是带步骤条的 Layer 组件示例。</p>
-        <p>适用于多步骤表单或向导式流程。</p>
-        <p>可以配置步骤校验函数。</p>
-      </div>
-    </j-layer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const layerRef = ref()
-
-const openLayer = () => {
-  layerRef.value.open('步骤弹窗示例', 'modal')
-}
-
-const validateSteps = (step: number) => {
-  console.log('校验步骤:', step)
-  return true
-}
-
-const handleOk = (showLoading: any, hideLoading: any) => {
-  showLoading('提交中...')
-  setTimeout(() => {
-    hideLoading()
-    layerRef.value.close()
-  }, 1000)
-}
-
-const handleCancel = () => {
-  layerRef.value.close()
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开步骤弹窗" @click="openLayer" />
+    <j-layer
+      ref="layerRef"
+      :is-step="true"
+      :steps="['基本信息', '详细配置', '确认提交']"
+      :validate-steps="validateSteps"
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
+      <div style="padding: 16px">
+        <p>这是带步骤条的 Layer 组件示例。</p>
+        <p>适用于多步骤表单或向导式流程。</p>
+        <p>可以配置步骤校验函数。</p>
+      </div>
+    </j-layer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const layerRef = ref()
+
+const openLayer = () => {
+  layerRef.value.open('步骤弹窗示例', 'modal')
+}
+
+const validateSteps = (step: number) => {
+  console.log('校验步骤:', step)
+  return true
+}
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('提交中...')
+  setTimeout(() => {
+    hideLoading()
+    layerRef.value.close()
+  }, 1000)
+}
+
+const handleCancel = () => {
+  layerRef.value.close()
+}
+</script>

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

@@ -1,76 +1,76 @@
-<template>
-  <div>
-    <!-- j-form 通过 schema 渲染表单字段，j-layer-form 作为 schema 中的一项 -->
-    <j-form ref="formRef" :schema="schema" :config="formConfig" />
-
-    <div v-if="formData" style="margin-top: 16px">
-      <h4>表单数据：</h4>
-      <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { SchemaConfig } from '@simcode/ui'
-
-const formRef = ref()
-const formData = ref<any>(null)
-
-// 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: '用户信息',
-      layerWidth: 600,
-      layerHeight: 400,
-    },
-    // 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,
-          min: 0,
-          max: 150,
-        },
-      },
-      {
-        id: 'email',
-        type: 'j-input',
-        config: {
-          label: '邮箱',
-          field: 'email',
-          placeholder: '请输入邮箱',
-          defaultValue: '',
-        },
-      },
-    ],
-  },
-])
-</script>
+<template>
+  <div>
+    <!-- j-form 通过 schema 渲染表单字段，j-layer-form 作为 schema 中的一项 -->
+    <j-form ref="formRef" :schema="schema" :config="formConfig" />
+
+    <div v-if="formData" style="margin-top: 16px">
+      <h4>表单数据：</h4>
+      <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { SchemaConfig } from '@simcode/ui'
+
+const formRef = ref()
+const formData = ref<any>(null)
+
+// 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: '用户信息',
+      layerWidth: 600,
+      layerHeight: 400,
+    },
+    // 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,
+          min: 0,
+          max: 150,
+        },
+      },
+      {
+        id: 'email',
+        type: 'j-input',
+        config: {
+          label: '邮箱',
+          field: 'email',
+          placeholder: '请输入邮箱',
+          defaultValue: '',
+        },
+      },
+    ],
+  },
+])
+</script>

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>