@a2simcode/ui 0.0.84 → 0.0.86

package/docs/examples/dialog/no-mask.vue

@@ -1,17 +1,17 @@
-<template>
-  <div>
-    <j-button label="无遮罩弹窗" @click="visible = true" />
-    <j-dialog v-model:visible="visible" title="无遮罩弹窗" :width="500" :height="350" :mask="false">
-      <div style="padding: 16px">
-        <p>这个弹窗没有遮罩层。</p>
-        <p>你可以与页面其他内容进行交互。</p>
-      </div>
-    </j-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const visible = ref(false)
-</script>
+<template>
+  <div>
+    <j-button label="无遮罩弹窗" @click="visible = true" />
+    <j-dialog v-model:visible="visible" title="无遮罩弹窗" :width="500" :height="350" :mask="false">
+      <div style="padding: 16px">
+        <p>这个弹窗没有遮罩层。</p>
+        <p>你可以与页面其他内容进行交互。</p>
+      </div>
+    </j-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+</script>

package/docs/examples/dialog/size.vue

@@ -1,44 +1,44 @@
-<template>
-  <div style="display: flex; gap: 8px">
-    <j-button label="小弹窗" @click="showDialog('small')" />
-    <j-button label="中等弹窗" @click="showDialog('medium')" />
-    <j-button label="大弹窗" @click="showDialog('large')" />
-    <j-dialog v-model:visible="visible" :title="title" :width="width" :height="height">
-      <div style="padding: 16px">
-        <p>当前弹窗尺寸：{{ title }}</p>
-        <p>宽度：{{ width }}px</p>
-        <p>高度：{{ height }}px</p>
-      </div>
-    </j-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const visible = ref(false)
-const title = ref('')
-const width = ref(600)
-const height = ref(400)
-
-const showDialog = (size: string) => {
-  switch (size) {
-    case 'small':
-      title.value = '小弹窗'
-      width.value = 400
-      height.value = 300
-      break
-    case 'medium':
-      title.value = '中等弹窗'
-      width.value = 600
-      height.value = 400
-      break
-    case 'large':
-      title.value = '大弹窗'
-      width.value = 900
-      height.value = 600
-      break
-  }
-  visible.value = true
-}
-</script>
+<template>
+  <div style="display: flex; gap: 8px">
+    <j-button label="小弹窗" @click="showDialog('small')" />
+    <j-button label="中等弹窗" @click="showDialog('medium')" />
+    <j-button label="大弹窗" @click="showDialog('large')" />
+    <j-dialog v-model:visible="visible" :title="title" :width="width" :height="height">
+      <div style="padding: 16px">
+        <p>当前弹窗尺寸：{{ title }}</p>
+        <p>宽度：{{ width }}px</p>
+        <p>高度：{{ height }}px</p>
+      </div>
+    </j-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+const title = ref('')
+const width = ref(600)
+const height = ref(400)
+
+const showDialog = (size: string) => {
+  switch (size) {
+    case 'small':
+      title.value = '小弹窗'
+      width.value = 400
+      height.value = 300
+      break
+    case 'medium':
+      title.value = '中等弹窗'
+      width.value = 600
+      height.value = 400
+      break
+    case 'large':
+      title.value = '大弹窗'
+      width.value = 900
+      height.value = 600
+      break
+  }
+  visible.value = true
+}
+</script>

package/docs/examples/dialog/steps.vue

@@ -1,57 +1,57 @@
-<template>
-  <div>
-    <j-button label="步骤弹窗" @click="visible = true" />
-    <j-dialog
-      v-model:visible="visible"
-      v-model:step-active="stepActive"
-      title="分步骤表单"
-      :width="700"
-      :height="450"
-      :is-step="true"
-      :steps="steps"
-      :validate-steps="validateSteps"
-      @ok="handleOk"
-    >
-      <div style="padding: 16px">
-        <div v-if="stepActive === 0">
-          <h3>步骤一：基本信息</h3>
-          <p>请填写基本信息...</p>
-        </div>
-        <div v-if="stepActive === 1">
-          <h3>步骤二：详细配置</h3>
-          <p>请完成详细配置...</p>
-        </div>
-        <div v-if="stepActive === 2">
-          <h3>步骤三：确认提交</h3>
-          <p>请确认信息后提交...</p>
-        </div>
-      </div>
-    </j-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
-
-const visible = ref(false)
-const stepActive = ref(0)
-const steps = ['基本信息', '详细配置', '确认提交']
-
-const validateSteps = async (step: number) => {
-  // 模拟校验
-  await new Promise((resolve) => setTimeout(resolve, 500))
-  ElMessage.success(`步骤 ${step + 1} 校验通过`)
-  return true
-}
-
-const handleOk = (showLoading: any, hideLoading: any) => {
-  showLoading('提交中...')
-  setTimeout(() => {
-    hideLoading()
-    ElMessage.success('提交成功')
-    visible.value = false
-    stepActive.value = 0
-  }, 1000)
-}
-</script>
+<template>
+  <div>
+    <j-button label="步骤弹窗" @click="visible = true" />
+    <j-dialog
+      v-model:visible="visible"
+      v-model:step-active="stepActive"
+      title="分步骤表单"
+      :width="700"
+      :height="450"
+      :is-step="true"
+      :steps="steps"
+      :validate-steps="validateSteps"
+      @ok="handleOk"
+    >
+      <div style="padding: 16px">
+        <div v-if="stepActive === 0">
+          <h3>步骤一：基本信息</h3>
+          <p>请填写基本信息...</p>
+        </div>
+        <div v-if="stepActive === 1">
+          <h3>步骤二：详细配置</h3>
+          <p>请完成详细配置...</p>
+        </div>
+        <div v-if="stepActive === 2">
+          <h3>步骤三：确认提交</h3>
+          <p>请确认信息后提交...</p>
+        </div>
+      </div>
+    </j-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const visible = ref(false)
+const stepActive = ref(0)
+const steps = ['基本信息', '详细配置', '确认提交']
+
+const validateSteps = async (step: number) => {
+  // 模拟校验
+  await new Promise((resolve) => setTimeout(resolve, 500))
+  ElMessage.success(`步骤 ${step + 1} 校验通过`)
+  return true
+}
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('提交中...')
+  setTimeout(() => {
+    hideLoading()
+    ElMessage.success('提交成功')
+    visible.value = false
+    stepActive.value = 0
+  }, 1000)
+}
+</script>

package/docs/examples/dialog-full/basic.vue

@@ -1,29 +1,29 @@
-<template>
-  <div>
-    <j-button label="打开全屏弹窗" @click="visible = true" />
-    <j-dialog-full v-model:visible="visible" title="全屏弹窗" @ok="handleOk" @cancel="handleCancel">
-      <div style="padding: 24px">
-        <p>这是一个全屏弹窗示例。</p>
-        <p>全屏弹窗占据整个屏幕,适用于复杂的表单或大量内容展示。</p>
-      </div>
-    </j-dialog-full>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const visible = ref(false)
-
-const handleOk = (showLoading: any, hideLoading: any) => {
-  showLoading('保存中...')
-  setTimeout(() => {
-    hideLoading()
-    visible.value = false
-  }, 1000)
-}
-
-const handleCancel = () => {
-  visible.value = false
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开全屏弹窗" @click="visible = true" />
+    <j-dialog-full v-model:visible="visible" title="全屏弹窗" @ok="handleOk" @cancel="handleCancel">
+      <div style="padding: 24px">
+        <p>这是一个全屏弹窗示例。</p>
+        <p>全屏弹窗占据整个屏幕,适用于复杂的表单或大量内容展示。</p>
+      </div>
+    </j-dialog-full>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('保存中...')
+  setTimeout(() => {
+    hideLoading()
+    visible.value = false
+  }, 1000)
+}
+
+const handleCancel = () => {
+  visible.value = false
+}
+</script>

package/docs/examples/dialog-full/custom-buttons.vue

@@ -1,45 +1,45 @@
-<template>
-  <div>
-    <j-button label="打开自定义按钮弹窗" @click="visible = true" />
-    <j-dialog-full v-model:visible="visible" title="自定义按钮" :buttons="buttons" @ok="handleOk">
-      <div style="padding: 24px">
-        <p>通过 buttons 属性可以自定义顶部操作按钮。</p>
-        <p>支持设置按钮类型、样式、图标、点击事件等。</p>
-      </div>
-    </j-dialog-full>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
-
-const visible = ref(false)
-
-const buttons = [
-  {
-    prop: 'refresh',
-    label: '刷新',
-    icon: 'material-symbols-light:refresh',
-    click: () => {
-      ElMessage.success('刷新成功')
-    },
-  },
-  {
-    prop: 'export',
-    label: '导出',
-    icon: 'material-symbols-light:download',
-    click: () => {
-      ElMessage.success('导出成功')
-    },
-  },
-]
-
-const handleOk = (showLoading: any, hideLoading: any) => {
-  showLoading('保存中...')
-  setTimeout(() => {
-    hideLoading()
-    visible.value = false
-  }, 1000)
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开自定义按钮弹窗" @click="visible = true" />
+    <j-dialog-full v-model:visible="visible" title="自定义按钮" :buttons="buttons" @ok="handleOk">
+      <div style="padding: 24px">
+        <p>通过 buttons 属性可以自定义顶部操作按钮。</p>
+        <p>支持设置按钮类型、样式、图标、点击事件等。</p>
+      </div>
+    </j-dialog-full>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const visible = ref(false)
+
+const buttons = [
+  {
+    prop: 'refresh',
+    label: '刷新',
+    icon: 'material-symbols-light:refresh',
+    click: () => {
+      ElMessage.success('刷新成功')
+    },
+  },
+  {
+    prop: 'export',
+    label: '导出',
+    icon: 'material-symbols-light:download',
+    click: () => {
+      ElMessage.success('导出成功')
+    },
+  },
+]
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('保存中...')
+  setTimeout(() => {
+    hideLoading()
+    visible.value = false
+  }, 1000)
+}
+</script>

package/docs/examples/dialog-full/no-buttons.vue

@@ -1,18 +1,18 @@
-<template>
-  <div>
-    <j-button label="打开无按钮弹窗" @click="visible = true" />
-    <j-dialog-full v-model:visible="visible" title="无按钮弹窗" :has-btns="false">
-      <div style="padding: 24px">
-        <p>设置 has-btns 为 false 可以隐藏所有按钮。</p>
-        <p>适用于只展示内容不需要操作的场景。</p>
-        <p>可以按 ESC 键关闭弹窗,需要设置 keyboard 为 true。</p>
-      </div>
-    </j-dialog-full>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const visible = ref(false)
-</script>
+<template>
+  <div>
+    <j-button label="打开无按钮弹窗" @click="visible = true" />
+    <j-dialog-full v-model:visible="visible" title="无按钮弹窗" :has-btns="false">
+      <div style="padding: 24px">
+        <p>设置 has-btns 为 false 可以隐藏所有按钮。</p>
+        <p>适用于只展示内容不需要操作的场景。</p>
+        <p>可以按 ESC 键关闭弹窗,需要设置 keyboard 为 true。</p>
+      </div>
+    </j-dialog-full>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+</script>

package/docs/examples/dialog-full/no-header.vue

@@ -1,27 +1,27 @@
-<template>
-  <div>
-    <j-button label="打开无表头弹窗" @click="visible = true" />
-    <j-dialog-full v-model:visible="visible" :has-header="false">
-      <div
-        style="
-          padding: 24px;
-          height: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-direction: column;
-        "
-      >
-        <h2>无表头弹窗</h2>
-        <p>设置 has-header 为 false 可以隐藏表头区域。</p>
-        <j-button label="关闭" style="margin-top: 20px" @click="visible = false" />
-      </div>
-    </j-dialog-full>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const visible = ref(false)
-</script>
+<template>
+  <div>
+    <j-button label="打开无表头弹窗" @click="visible = true" />
+    <j-dialog-full v-model:visible="visible" :has-header="false">
+      <div
+        style="
+          padding: 24px;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+        "
+      >
+        <h2>无表头弹窗</h2>
+        <p>设置 has-header 为 false 可以隐藏表头区域。</p>
+        <j-button label="关闭" style="margin-top: 20px" @click="visible = false" />
+      </div>
+    </j-dialog-full>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+</script>

package/docs/examples/dialog-full/steps.vue

@@ -1,71 +1,71 @@
-<template>
-  <div>
-    <j-button label="打开步骤弹窗" @click="visible = true" />
-    <j-dialog-full
-      v-model:visible="visible"
-      v-model:step-active="stepActive"
-      title="步骤弹窗"
-      :is-step="true"
-      :steps="steps"
-      :validate-steps="validateSteps"
-      @ok="handleOk"
-    >
-      <div style="padding: 24px">
-        <div v-if="stepActive === 0">
-          <h3>第一步:基本信息</h3>
-          <p>请填写基本信息</p>
-          <el-input v-model="form.name" placeholder="请输入姓名" style="margin-top: 16px" />
-        </div>
-        <div v-if="stepActive === 1">
-          <h3>第二步:详细信息</h3>
-          <p>请填写详细信息</p>
-          <el-input v-model="form.email" placeholder="请输入邮箱" style="margin-top: 16px" />
-        </div>
-        <div v-if="stepActive === 2">
-          <h3>第三步:确认信息</h3>
-          <p>姓名: {{ form.name }}</p>
-          <p>邮箱: {{ form.email }}</p>
-        </div>
-      </div>
-    </j-dialog-full>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-import { ElMessage } from 'element-plus'
-
-const visible = ref(false)
-const stepActive = ref(0)
-
-const steps = ['基本信息', '详细信息', '确认信息']
-
-const form = reactive({
-  name: '',
-  email: '',
-})
-
-const validateSteps = async (step: number) => {
-  if (step === 0 && !form.name) {
-    ElMessage.warning('请输入姓名')
-    return false
-  }
-  if (step === 1 && !form.email) {
-    ElMessage.warning('请输入邮箱')
-    return false
-  }
-  return true
-}
-
-const handleOk = (showLoading: any, hideLoading: any) => {
-  showLoading('保存中...')
-  setTimeout(() => {
-    hideLoading()
-    visible.value = false
-    stepActive.value = 0
-    form.name = ''
-    form.email = ''
-    ElMessage.success('保存成功')
-  }, 1000)
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开步骤弹窗" @click="visible = true" />
+    <j-dialog-full
+      v-model:visible="visible"
+      v-model:step-active="stepActive"
+      title="步骤弹窗"
+      :is-step="true"
+      :steps="steps"
+      :validate-steps="validateSteps"
+      @ok="handleOk"
+    >
+      <div style="padding: 24px">
+        <div v-if="stepActive === 0">
+          <h3>第一步:基本信息</h3>
+          <p>请填写基本信息</p>
+          <el-input v-model="form.name" placeholder="请输入姓名" style="margin-top: 16px" />
+        </div>
+        <div v-if="stepActive === 1">
+          <h3>第二步:详细信息</h3>
+          <p>请填写详细信息</p>
+          <el-input v-model="form.email" placeholder="请输入邮箱" style="margin-top: 16px" />
+        </div>
+        <div v-if="stepActive === 2">
+          <h3>第三步:确认信息</h3>
+          <p>姓名: {{ form.name }}</p>
+          <p>邮箱: {{ form.email }}</p>
+        </div>
+      </div>
+    </j-dialog-full>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const visible = ref(false)
+const stepActive = ref(0)
+
+const steps = ['基本信息', '详细信息', '确认信息']
+
+const form = reactive({
+  name: '',
+  email: '',
+})
+
+const validateSteps = async (step: number) => {
+  if (step === 0 && !form.name) {
+    ElMessage.warning('请输入姓名')
+    return false
+  }
+  if (step === 1 && !form.email) {
+    ElMessage.warning('请输入邮箱')
+    return false
+  }
+  return true
+}
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('保存中...')
+  setTimeout(() => {
+    hideLoading()
+    visible.value = false
+    stepActive.value = 0
+    form.name = ''
+    form.email = ''
+    ElMessage.success('保存成功')
+  }, 1000)
+}
+</script>