@a2simcode/ui 0.0.70 → 0.0.72

package/docs/examples/drawer/mask.vue

@@ -1,36 +1,36 @@
-<template>
-  <div>
-    <el-space>
-      <j-button label="无遮罩层" @click="openDrawer(false)" />
-      <j-button label="可点击遮罩关闭" @click="openDrawer(true, true)" />
-    </el-space>
-    <j-drawer
-      v-model:visible="visible"
-      :title="drawerTitle"
-      :width="600"
-      :modal="modal"
-      :close-on-click-modal="closeOnClickModal"
-    >
-      <div style="padding: 16px">
-        <p v-if="!modal">设置 modal 为 false 可以取消遮罩层。</p>
-        <p v-else>设置 close-on-click-modal 为 true,点击遮罩层可以关闭抽屉。</p>
-      </div>
-    </j-drawer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const visible = ref(false)
-const modal = ref(true)
-const closeOnClickModal = ref(false)
-const drawerTitle = ref('')
-
-const openDrawer = (hasModal: boolean, clickModal: boolean = false) => {
-  modal.value = hasModal
-  closeOnClickModal.value = clickModal
-  drawerTitle.value = hasModal ? '可点击遮罩关闭' : '无遮罩层抽屉'
-  visible.value = true
-}
-</script>
+<template>
+  <div>
+    <el-space>
+      <j-button label="无遮罩层" @click="openDrawer(false)" />
+      <j-button label="可点击遮罩关闭" @click="openDrawer(true, true)" />
+    </el-space>
+    <j-drawer
+      v-model:visible="visible"
+      :title="drawerTitle"
+      :width="600"
+      :modal="modal"
+      :close-on-click-modal="closeOnClickModal"
+    >
+      <div style="padding: 16px">
+        <p v-if="!modal">设置 modal 为 false 可以取消遮罩层。</p>
+        <p v-else>设置 close-on-click-modal 为 true,点击遮罩层可以关闭抽屉。</p>
+      </div>
+    </j-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+const modal = ref(true)
+const closeOnClickModal = ref(false)
+const drawerTitle = ref('')
+
+const openDrawer = (hasModal: boolean, clickModal: boolean = false) => {
+  modal.value = hasModal
+  closeOnClickModal.value = clickModal
+  drawerTitle.value = hasModal ? '可点击遮罩关闭' : '无遮罩层抽屉'
+  visible.value = true
+}
+</script>

package/docs/examples/drawer/no-buttons.vue

@@ -1,20 +1,20 @@
-<template>
-  <div>
-    <j-button label="打开抽屉" @click="visible = true" />
-    <j-drawer v-model:visible="visible" title="无底部按钮" :width="600" :has-btns="false">
-      <div style="padding: 16px">
-        <p>设置 has-btns 为 false 可以隐藏底部按钮。</p>
-        <p style="margin-top: 8px">这种方式适合只展示信息,不需要操作的场景。</p>
-        <div style="margin-top: 16px">
-          <el-button @click="visible = false">关闭抽屉</el-button>
-        </div>
-      </div>
-    </j-drawer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const visible = ref(false)
-</script>
+<template>
+  <div>
+    <j-button label="打开抽屉" @click="visible = true" />
+    <j-drawer v-model:visible="visible" title="无底部按钮" :width="600" :has-btns="false">
+      <div style="padding: 16px">
+        <p>设置 has-btns 为 false 可以隐藏底部按钮。</p>
+        <p style="margin-top: 8px">这种方式适合只展示信息,不需要操作的场景。</p>
+        <div style="margin-top: 16px">
+          <el-button @click="visible = false">关闭抽屉</el-button>
+        </div>
+      </div>
+    </j-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+</script>

package/docs/examples/drawer/size.vue

@@ -1,28 +1,28 @@
-<template>
-  <div>
-    <el-space>
-      <j-button label="小尺寸(400px)" @click="openDrawer(400)" />
-      <j-button label="中尺寸(600px)" @click="openDrawer(600)" />
-      <j-button label="大尺寸(800px)" @click="openDrawer(800)" />
-      <j-button label="百分比(50%)" @click="openDrawer('50%')" />
-    </el-space>
-    <j-drawer v-model:visible="visible" :title="`宽度: ${currentSize}`" :size="currentSize">
-      <div style="padding: 16px">
-        <p>抽屉的尺寸可以通过 size 或 width 属性自定义。</p>
-        <p style="margin-top: 8px">当前尺寸: {{ currentSize }}</p>
-      </div>
-    </j-drawer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const visible = ref(false)
-const currentSize = ref<string | number>('600px')
-
-const openDrawer = (size: string | number) => {
-  currentSize.value = typeof size === 'number' ? `${size}px` : size
-  visible.value = true
-}
-</script>
+<template>
+  <div>
+    <el-space>
+      <j-button label="小尺寸(400px)" @click="openDrawer(400)" />
+      <j-button label="中尺寸(600px)" @click="openDrawer(600)" />
+      <j-button label="大尺寸(800px)" @click="openDrawer(800)" />
+      <j-button label="百分比(50%)" @click="openDrawer('50%')" />
+    </el-space>
+    <j-drawer v-model:visible="visible" :title="`宽度: ${currentSize}`" :size="currentSize">
+      <div style="padding: 16px">
+        <p>抽屉的尺寸可以通过 size 或 width 属性自定义。</p>
+        <p style="margin-top: 8px">当前尺寸: {{ currentSize }}</p>
+      </div>
+    </j-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+const currentSize = ref<string | number>('600px')
+
+const openDrawer = (size: string | number) => {
+  currentSize.value = typeof size === 'number' ? `${size}px` : size
+  visible.value = true
+}
+</script>

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

@@ -1,33 +1,33 @@
-<template>
-  <div>
-    <j-button label="打开动态组件" @click="openLayer" />
-    <j-dynamic-layer ref="layerRef" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, h } from 'vue'
-
-const layerRef = ref()
-
-// 动态组件示例
-const DemoComponent = {
-  setup() {
-    return () =>
-      h('div', { style: 'padding: 16px' }, [
-        h('p', '这是一个动态加载的组件'),
-        h('p', '可以是任何 Vue 组件'),
-      ])
-  },
-}
-
-const openLayer = () => {
-  layerRef.value.open({
-    title: '动态组件示例',
-    name: DemoComponent,
-    type: 'modal',
-    width: 600,
-    height: 400,
-  })
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开动态组件" @click="openLayer" />
+    <j-dynamic-layer ref="layerRef" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, h } from 'vue'
+
+const layerRef = ref()
+
+// 动态组件示例
+const DemoComponent = {
+  setup() {
+    return () =>
+      h('div', { style: 'padding: 16px' }, [
+        h('p', '这是一个动态加载的组件'),
+        h('p', '可以是任何 Vue 组件'),
+      ])
+  },
+}
+
+const openLayer = () => {
+  layerRef.value.open({
+    title: '动态组件示例',
+    name: DemoComponent,
+    type: 'modal',
+    width: 600,
+    height: 400,
+  })
+}
+</script>

package/docs/examples/dynamic-layer/custom-buttons.vue

@@ -1,43 +1,43 @@
-<template>
-  <div>
-    <j-button label="自定义按钮" @click="openLayer" />
-    <j-dynamic-layer ref="layerRef" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, h } from 'vue'
-
-const layerRef = ref()
-
-const CustomComponent = {
-  setup(props: any, { expose }: any) {
-    const getConfig = () => {
-      return {
-        buttons: [
-          {
-            label: '自定义操作',
-            type: 'primary',
-            onClick: () => {
-              alert('执行自定义操作')
-            },
-          },
-        ],
-      }
-    }
-
-    expose({ getConfig })
-
-    return () => h('div', { style: 'padding: 16px' }, [h('p', '这个弹层有自定义按钮')])
-  },
-}
-
-const openLayer = () => {
-  layerRef.value.open({
-    title: '自定义按钮示例',
-    name: CustomComponent,
-    type: 'modal',
-    hasSaveBtn: false,
-  })
-}
-</script>
+<template>
+  <div>
+    <j-button label="自定义按钮" @click="openLayer" />
+    <j-dynamic-layer ref="layerRef" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, h } from 'vue'
+
+const layerRef = ref()
+
+const CustomComponent = {
+  setup(props: any, { expose }: any) {
+    const getConfig = () => {
+      return {
+        buttons: [
+          {
+            label: '自定义操作',
+            type: 'primary',
+            onClick: () => {
+              alert('执行自定义操作')
+            },
+          },
+        ],
+      }
+    }
+
+    expose({ getConfig })
+
+    return () => h('div', { style: 'padding: 16px' }, [h('p', '这个弹层有自定义按钮')])
+  },
+}
+
+const openLayer = () => {
+  layerRef.value.open({
+    title: '自定义按钮示例',
+    name: CustomComponent,
+    type: 'modal',
+    hasSaveBtn: false,
+  })
+}
+</script>

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

@@ -1,73 +1,73 @@
-<template>
-  <div>
-    <j-button label="打开表单组件" @click="openFormLayer" />
-    <j-dynamic-layer ref="layerRef" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, h } from 'vue'
-
-const layerRef = ref()
-
-// 表单组件示例
-const FormComponent = {
-  setup(props: any, { expose }: any) {
-    const formData = ref({
-      name: '',
-      email: '',
-    })
-
-    // 提供给外层调用的方法
-    const open = (param: any) => {
-      console.log('接收参数:', param)
-      return Promise.resolve()
-    }
-
-    const ok = () => {
-      if (!formData.value.name) {
-        alert('请输入姓名')
-        return Promise.resolve(false)
-      }
-      console.log('提交数据:', formData.value)
-      return Promise.resolve(true)
-    }
-
-    expose({ open, ok })
-
-    return () =>
-      h('div', { style: 'padding: 16px' }, [
-        h('div', { style: 'margin-bottom: 16px' }, [
-          h('label', '姓名: '),
-          h('input', {
-            value: formData.value.name,
-            onInput: (e: any) => (formData.value.name = e.target.value),
-            style: 'margin-left: 8px; padding: 4px 8px',
-          }),
-        ]),
-        h('div', [
-          h('label', '邮箱: '),
-          h('input', {
-            value: formData.value.email,
-            onInput: (e: any) => (formData.value.email = e.target.value),
-            style: 'margin-left: 8px; padding: 4px 8px',
-          }),
-        ]),
-      ])
-  },
-}
-
-const openFormLayer = () => {
-  layerRef.value.open({
-    title: '表单示例',
-    name: FormComponent,
-    type: 'modal',
-    width: 500,
-    height: 300,
-    param: { id: 123 },
-    afterOk: (data: any) => {
-      console.log('保存成功回调:', data)
-    },
-  })
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开表单组件" @click="openFormLayer" />
+    <j-dynamic-layer ref="layerRef" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, h } from 'vue'
+
+const layerRef = ref()
+
+// 表单组件示例
+const FormComponent = {
+  setup(props: any, { expose }: any) {
+    const formData = ref({
+      name: '',
+      email: '',
+    })
+
+    // 提供给外层调用的方法
+    const open = (param: any) => {
+      console.log('接收参数:', param)
+      return Promise.resolve()
+    }
+
+    const ok = () => {
+      if (!formData.value.name) {
+        alert('请输入姓名')
+        return Promise.resolve(false)
+      }
+      console.log('提交数据:', formData.value)
+      return Promise.resolve(true)
+    }
+
+    expose({ open, ok })
+
+    return () =>
+      h('div', { style: 'padding: 16px' }, [
+        h('div', { style: 'margin-bottom: 16px' }, [
+          h('label', '姓名: '),
+          h('input', {
+            value: formData.value.name,
+            onInput: (e: any) => (formData.value.name = e.target.value),
+            style: 'margin-left: 8px; padding: 4px 8px',
+          }),
+        ]),
+        h('div', [
+          h('label', '邮箱: '),
+          h('input', {
+            value: formData.value.email,
+            onInput: (e: any) => (formData.value.email = e.target.value),
+            style: 'margin-left: 8px; padding: 4px 8px',
+          }),
+        ]),
+      ])
+  },
+}
+
+const openFormLayer = () => {
+  layerRef.value.open({
+    title: '表单示例',
+    name: FormComponent,
+    type: 'modal',
+    width: 500,
+    height: 300,
+    param: { id: 123 },
+    afterOk: (data: any) => {
+      console.log('保存成功回调:', data)
+    },
+  })
+}
+</script>

package/docs/examples/dynamic-layer/steps.vue

@@ -1,52 +1,52 @@
-<template>
-  <div>
-    <j-button label="打开步骤弹窗" @click="openStepLayer" />
-    <j-dynamic-layer ref="layerRef" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, h } from 'vue'
-
-const layerRef = ref()
-const currentStep = ref(0)
-
-const StepComponent = {
-  setup(props: any, { expose }: any) {
-    const getConfig = () => {
-      return {
-        isStep: true,
-        steps: ['基本信息', '详细信息', '确认提交'],
-      }
-    }
-
-    const validateSteps = (stepActive: number) => {
-      console.log('校验步骤:', stepActive)
-      if (stepActive === 0 && !confirm('是否继续下一步？')) {
-        return Promise.resolve(false)
-      }
-      currentStep.value = stepActive
-      return Promise.resolve(true)
-    }
-
-    expose({ getConfig, validateSteps })
-
-    return () =>
-      h('div', { style: 'padding: 16px' }, [
-        h('h3', `当前步骤: ${currentStep.value + 1}`),
-        h('p', '步骤条示例'),
-      ])
-  },
-}
-
-const openStepLayer = () => {
-  currentStep.value = 0
-  layerRef.value.open({
-    title: '步骤弹窗',
-    name: StepComponent,
-    type: 'modal',
-    width: 700,
-    height: 400,
-  })
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开步骤弹窗" @click="openStepLayer" />
+    <j-dynamic-layer ref="layerRef" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, h } from 'vue'
+
+const layerRef = ref()
+const currentStep = ref(0)
+
+const StepComponent = {
+  setup(props: any, { expose }: any) {
+    const getConfig = () => {
+      return {
+        isStep: true,
+        steps: ['基本信息', '详细信息', '确认提交'],
+      }
+    }
+
+    const validateSteps = (stepActive: number) => {
+      console.log('校验步骤:', stepActive)
+      if (stepActive === 0 && !confirm('是否继续下一步？')) {
+        return Promise.resolve(false)
+      }
+      currentStep.value = stepActive
+      return Promise.resolve(true)
+    }
+
+    expose({ getConfig, validateSteps })
+
+    return () =>
+      h('div', { style: 'padding: 16px' }, [
+        h('h3', `当前步骤: ${currentStep.value + 1}`),
+        h('p', '步骤条示例'),
+      ])
+  },
+}
+
+const openStepLayer = () => {
+  currentStep.value = 0
+  layerRef.value.open({
+    title: '步骤弹窗',
+    name: StepComponent,
+    type: 'modal',
+    width: 700,
+    height: 400,
+  })
+}
+</script>

package/docs/examples/dynamic-layer/types.vue

@@ -1,40 +1,40 @@
-<template>
-  <div>
-    <j-button label="打开抽屉" style="margin-right: 8px" @click="openDrawer" />
-    <j-button label="打开全屏" @click="openFull" />
-    <j-dynamic-layer ref="layerRef" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, h } from 'vue'
-
-const layerRef = ref()
-
-const ContentComponent = {
-  setup() {
-    return () =>
-      h('div', { style: 'padding: 16px' }, [
-        h('h3', '不同类型的弹层'),
-        h('p', '支持 modal、drawer、full 三种类型'),
-      ])
-  },
-}
-
-const openDrawer = () => {
-  layerRef.value.open({
-    title: '抽屉模式',
-    name: ContentComponent,
-    type: 'drawer',
-    width: 600,
-  })
-}
-
-const openFull = () => {
-  layerRef.value.open({
-    title: '全屏模式',
-    name: ContentComponent,
-    type: 'full',
-  })
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开抽屉" style="margin-right: 8px" @click="openDrawer" />
+    <j-button label="打开全屏" @click="openFull" />
+    <j-dynamic-layer ref="layerRef" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, h } from 'vue'
+
+const layerRef = ref()
+
+const ContentComponent = {
+  setup() {
+    return () =>
+      h('div', { style: 'padding: 16px' }, [
+        h('h3', '不同类型的弹层'),
+        h('p', '支持 modal、drawer、full 三种类型'),
+      ])
+  },
+}
+
+const openDrawer = () => {
+  layerRef.value.open({
+    title: '抽屉模式',
+    name: ContentComponent,
+    type: 'drawer',
+    width: 600,
+  })
+}
+
+const openFull = () => {
+  layerRef.value.open({
+    title: '全屏模式',
+    name: ContentComponent,
+    type: 'full',
+  })
+}
+</script>