@a2simcode/ui 0.0.163 → 0.0.164

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>

package/docs/examples/divider/basic.vue

@@ -1,52 +1,52 @@
-<template>
-  <div class="divider-demo">
-    <div class="demo-item">
-      <p>默认分隔符</p>
-      <j-divider />
-    </div>
-
-    <div class="demo-item">
-      <p>带文本的分隔符</p>
-      <j-divider content="or" />
-    </div>
-
-    <div class="demo-item">
-      <p>左对齐</p>
-      <j-divider content="左对齐" content-position="left" />
-    </div>
-
-    <div class="demo-item">
-      <p>右对齐</p>
-      <j-divider content="右对齐" content-position="right" />
-    </div>
-
-    <div class="demo-item">
-      <p>自定义颜色和大小</p>
-      <j-divider content="自定义样式" color="#1890ff" :size="16" />
-    </div>
-
-    <div class="demo-item">
-      <p>虚线样式</p>
-      <j-divider content="虚线" border-style="dashed" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 示例代码无需额外逻辑
-</script>
-
-<style scoped>
-.divider-demo {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.demo-item p {
-  margin: 0 0 12px;
-  font-size: 14px;
-  color: var(--j-color-text-2);
-  font-weight: 500;
-}
-</style>
+<template>
+  <div class="divider-demo">
+    <div class="demo-item">
+      <p>默认分隔符</p>
+      <j-divider />
+    </div>
+
+    <div class="demo-item">
+      <p>带文本的分隔符</p>
+      <j-divider content="or" />
+    </div>
+
+    <div class="demo-item">
+      <p>左对齐</p>
+      <j-divider content="左对齐" content-position="left" />
+    </div>
+
+    <div class="demo-item">
+      <p>右对齐</p>
+      <j-divider content="右对齐" content-position="right" />
+    </div>
+
+    <div class="demo-item">
+      <p>自定义颜色和大小</p>
+      <j-divider content="自定义样式" color="#1890ff" :size="16" />
+    </div>
+
+    <div class="demo-item">
+      <p>虚线样式</p>
+      <j-divider content="虚线" border-style="dashed" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 示例代码无需额外逻辑
+</script>
+
+<style scoped>
+.divider-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.demo-item p {
+  margin: 0 0 12px;
+  font-size: 14px;
+  color: var(--j-color-text-2);
+  font-weight: 500;
+}
+</style>

package/docs/examples/drawer/basic.vue

@@ -1,35 +1,35 @@
-<template>
-  <div>
-    <j-button label="打开抽屉" @click="visible = true" />
-    <j-drawer
-      v-model:visible="visible"
-      title="基础抽屉"
-      :width="600"
-      @ok="handleOk"
-      @close="handleClose"
-    >
-      <div style="padding: 16px">
-        <p>这是一个基础的抽屉示例。</p>
-        <p>抽屉从右侧滑出,支持自定义宽度。</p>
-      </div>
-    </j-drawer>
-  </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 handleClose = () => {
-  visible.value = false
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开抽屉" @click="visible = true" />
+    <j-drawer
+      v-model:visible="visible"
+      title="基础抽屉"
+      :width="600"
+      @ok="handleOk"
+      @close="handleClose"
+    >
+      <div style="padding: 16px">
+        <p>这是一个基础的抽屉示例。</p>
+        <p>抽屉从右侧滑出,支持自定义宽度。</p>
+      </div>
+    </j-drawer>
+  </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 handleClose = () => {
+  visible.value = false
+}
+</script>

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

@@ -1,34 +1,34 @@
-<template>
-  <div>
-    <j-button label="打开抽屉" @click="visible = true" />
-    <j-drawer v-model:visible="visible" title="自定义按钮" :width="600">
-      <template #btns>
-        <el-space :size="8">
-          <el-button size="small" @click="visible = false">取消</el-button>
-          <el-button size="small" type="warning" @click="handleReset">重置</el-button>
-          <el-button size="small" type="primary" @click="handleSave">保存</el-button>
-        </el-space>
-      </template>
-      <div style="padding: 16px">
-        <p>通过 btns 插槽可以自定义底部按钮。</p>
-        <p style="margin-top: 8px">这里展示了三个按钮:取消、重置和保存。</p>
-      </div>
-    </j-drawer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
-
-const visible = ref(false)
-
-const handleReset = () => {
-  ElMessage.info('重置成功')
-}
-
-const handleSave = () => {
-  ElMessage.success('保存成功')
-  visible.value = false
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开抽屉" @click="visible = true" />
+    <j-drawer v-model:visible="visible" title="自定义按钮" :width="600">
+      <template #btns>
+        <el-space :size="8">
+          <el-button size="small" @click="visible = false">取消</el-button>
+          <el-button size="small" type="warning" @click="handleReset">重置</el-button>
+          <el-button size="small" type="primary" @click="handleSave">保存</el-button>
+        </el-space>
+      </template>
+      <div style="padding: 16px">
+        <p>通过 btns 插槽可以自定义底部按钮。</p>
+        <p style="margin-top: 8px">这里展示了三个按钮:取消、重置和保存。</p>
+      </div>
+    </j-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const visible = ref(false)
+
+const handleReset = () => {
+  ElMessage.info('重置成功')
+}
+
+const handleSave = () => {
+  ElMessage.success('保存成功')
+  visible.value = false
+}
+</script>

package/docs/examples/drawer/direction.vue

@@ -1,47 +1,47 @@
-<template>
-  <div>
-    <el-space>
-      <j-button label="从右侧打开(默认)" @click="openDrawer('rtl')" />
-      <j-button label="从左侧打开" @click="openDrawer('ltr')" />
-      <j-button label="从顶部打开" @click="openDrawer('ttb')" />
-      <j-button label="从底部打开" @click="openDrawer('btt')" />
-    </el-space>
-    <j-drawer
-      v-model:visible="visible"
-      :title="`${directionText}抽屉`"
-      :direction="direction"
-      :width="600"
-    >
-      <div style="padding: 16px">
-        <p>抽屉可以从四个方向打开:</p>
-        <ul style="margin-top: 8px; padding-left: 20px">
-          <li>rtl: 从右往左(默认)</li>
-          <li>ltr: 从左往右</li>
-          <li>ttb: 从上往下</li>
-          <li>btt: 从下往上</li>
-        </ul>
-      </div>
-    </j-drawer>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const visible = ref(false)
-const direction = ref<'rtl' | 'ltr' | 'ttb' | 'btt'>('rtl')
-const directionText = ref('从右侧打开的')
-
-const directionMap = {
-  rtl: '从右侧打开的',
-  ltr: '从左侧打开的',
-  ttb: '从顶部打开的',
-  btt: '从底部打开的',
-}
-
-const openDrawer = (dir: 'rtl' | 'ltr' | 'ttb' | 'btt') => {
-  direction.value = dir
-  directionText.value = directionMap[dir]
-  visible.value = true
-}
-</script>
+<template>
+  <div>
+    <el-space>
+      <j-button label="从右侧打开(默认)" @click="openDrawer('rtl')" />
+      <j-button label="从左侧打开" @click="openDrawer('ltr')" />
+      <j-button label="从顶部打开" @click="openDrawer('ttb')" />
+      <j-button label="从底部打开" @click="openDrawer('btt')" />
+    </el-space>
+    <j-drawer
+      v-model:visible="visible"
+      :title="`${directionText}抽屉`"
+      :direction="direction"
+      :width="600"
+    >
+      <div style="padding: 16px">
+        <p>抽屉可以从四个方向打开:</p>
+        <ul style="margin-top: 8px; padding-left: 20px">
+          <li>rtl: 从右往左(默认)</li>
+          <li>ltr: 从左往右</li>
+          <li>ttb: 从上往下</li>
+          <li>btt: 从下往上</li>
+        </ul>
+      </div>
+    </j-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+const direction = ref<'rtl' | 'ltr' | 'ttb' | 'btt'>('rtl')
+const directionText = ref('从右侧打开的')
+
+const directionMap = {
+  rtl: '从右侧打开的',
+  ltr: '从左侧打开的',
+  ttb: '从顶部打开的',
+  btt: '从底部打开的',
+}
+
+const openDrawer = (dir: 'rtl' | 'ltr' | 'ttb' | 'btt') => {
+  direction.value = dir
+  directionText.value = directionMap[dir]
+  visible.value = true
+}
+</script>

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>