@a2simcode/ui 0.0.83 → 0.0.84

package/docs/examples/tabs/basic.vue

@@ -1,98 +1,98 @@
-<template>
-  <div class="tabs-demo">
-    <div class="demo-item">
-      <p>基础用法</p>
-      <j-tabs v-model="activeName1">
-        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
-        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
-        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
-        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
-      </j-tabs>
-    </div>
-
-    <div class="demo-item">
-      <p>卡片风格</p>
-      <j-tabs v-model="activeName2" type="card">
-        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
-        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
-        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
-        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
-      </j-tabs>
-    </div>
-
-    <div class="demo-item">
-      <p>边框卡片风格</p>
-      <j-tabs v-model="activeName3" type="border-card">
-        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
-        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
-        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
-        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
-      </j-tabs>
-    </div>
-
-    <div class="demo-item" style="height: 300px">
-      <p>标签位置</p>
-      <div class="j-block" style="height: 0; flex: 1">
-        <j-tabs v-model="activeName4" tab-position="left">
-          <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
-          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
-          <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
-          <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
-        </j-tabs>
-      </div>
-    </div>
-
-    <div class="demo-item">
-      <p>可关闭标签</p>
-      <j-tabs v-model="activeName5" type="card" closable>
-        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
-        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
-        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
-        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
-      </j-tabs>
-    </div>
-
-    <div class="demo-item">
-      <p>可增加标签</p>
-      <j-tabs v-model="activeName6" type="card" addable>
-        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
-        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
-        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
-        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
-      </j-tabs>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const activeName1 = ref('first')
-const activeName2 = ref('first')
-const activeName3 = ref('first')
-const activeName4 = ref('first')
-const activeName5 = ref('first')
-const activeName6 = ref('first')
-</script>
-
-<style scoped>
-.tabs-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;
-}
-
-.demo-item {
-  position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-</style>
+<template>
+  <div class="tabs-demo">
+    <div class="demo-item">
+      <p>基础用法</p>
+      <j-tabs v-model="activeName1">
+        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+      </j-tabs>
+    </div>
+
+    <div class="demo-item">
+      <p>卡片风格</p>
+      <j-tabs v-model="activeName2" type="card">
+        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+      </j-tabs>
+    </div>
+
+    <div class="demo-item">
+      <p>边框卡片风格</p>
+      <j-tabs v-model="activeName3" type="border-card">
+        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+      </j-tabs>
+    </div>
+
+    <div class="demo-item" style="height: 300px">
+      <p>标签位置</p>
+      <div class="j-block" style="height: 0; flex: 1">
+        <j-tabs v-model="activeName4" tab-position="left">
+          <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+          <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+          <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+        </j-tabs>
+      </div>
+    </div>
+
+    <div class="demo-item">
+      <p>可关闭标签</p>
+      <j-tabs v-model="activeName5" type="card" closable>
+        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+      </j-tabs>
+    </div>
+
+    <div class="demo-item">
+      <p>可增加标签</p>
+      <j-tabs v-model="activeName6" type="card" addable>
+        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+      </j-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeName1 = ref('first')
+const activeName2 = ref('first')
+const activeName3 = ref('first')
+const activeName4 = ref('first')
+const activeName5 = ref('first')
+const activeName6 = ref('first')
+</script>
+
+<style scoped>
+.tabs-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;
+}
+
+.demo-item {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/docs/examples/title/basic.vue

@@ -1,80 +1,80 @@
-<template>
-  <div class="title-demo">
-    <div class="demo-item">
-      <p>基础用法</p>
-      <j-title title="这是一个标题" />
-    </div>
-
-    <div class="demo-item">
-      <p>设置颜色</p>
-      <j-title title="蓝色标题" color="#1890ff" />
-    </div>
-
-    <div class="demo-item">
-      <p>设置大小</p>
-      <j-title title="小标题" :size="14" />
-      <j-title title="默认标题" :size="16" />
-      <j-title title="大标题" :size="24" />
-    </div>
-
-    <div class="demo-item">
-      <p>设置粗细</p>
-      <j-title title="正常粗细" weight="normal" />
-      <j-title title="加粗标题" weight="bold" />
-      <j-title title="特粗标题" weight="900" />
-    </div>
-
-    <div class="demo-item">
-      <p>组合使用</p>
-      <j-title
-        title="自定义样式标题"
-        color="#f53f3f"
-        :size="20"
-        weight="bold"
-        class="custom-title"
-      />
-    </div>
-
-    <div class="demo-item">
-      <p>使用 style 对象</p>
-      <j-title
-        title="复杂样式标题"
-        :style="{
-          color: '#00b42a',
-          fontSize: '18px',
-          fontWeight: 'bold',
-          textDecoration: 'underline',
-        }"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 示例代码无需额外逻辑
-</script>
-
-<style scoped>
-.title-demo {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.demo-item {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.demo-item p {
-  margin: 0;
-  font-size: 14px;
-  color: var(--j-color-text-2);
-  font-weight: 500;
-}
-
-.custom-title {
-  letter-spacing: 1px;
-}
-</style>
+<template>
+  <div class="title-demo">
+    <div class="demo-item">
+      <p>基础用法</p>
+      <j-title title="这是一个标题" />
+    </div>
+
+    <div class="demo-item">
+      <p>设置颜色</p>
+      <j-title title="蓝色标题" color="#1890ff" />
+    </div>
+
+    <div class="demo-item">
+      <p>设置大小</p>
+      <j-title title="小标题" :size="14" />
+      <j-title title="默认标题" :size="16" />
+      <j-title title="大标题" :size="24" />
+    </div>
+
+    <div class="demo-item">
+      <p>设置粗细</p>
+      <j-title title="正常粗细" weight="normal" />
+      <j-title title="加粗标题" weight="bold" />
+      <j-title title="特粗标题" weight="900" />
+    </div>
+
+    <div class="demo-item">
+      <p>组合使用</p>
+      <j-title
+        title="自定义样式标题"
+        color="#f53f3f"
+        :size="20"
+        weight="bold"
+        class="custom-title"
+      />
+    </div>
+
+    <div class="demo-item">
+      <p>使用 style 对象</p>
+      <j-title
+        title="复杂样式标题"
+        :style="{
+          color: '#00b42a',
+          fontSize: '18px',
+          fontWeight: 'bold',
+          textDecoration: 'underline',
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 示例代码无需额外逻辑
+</script>
+
+<style scoped>
+.title-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.demo-item {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.demo-item p {
+  margin: 0;
+  font-size: 14px;
+  color: var(--j-color-text-2);
+  font-weight: 500;
+}
+
+.custom-title {
+  letter-spacing: 1px;
+}
+</style>

package/docs/examples/tree/accordion.vue

@@ -1,46 +1,46 @@
-<template>
-  <div style="height: 400px">
-    <j-tree :list="treeList" accordion />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const treeList = ref([
-  {
-    label: '一级 1',
-    value: '1',
-    children: [
-      {
-        label: '二级 1-1',
-        value: '1-1',
-        children: [
-          {
-            label: '三级 1-1-1',
-            value: '1-1-1',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: '一级 2',
-    value: '2',
-    children: [
-      {
-        label: '二级 2-1',
-        value: '2-1',
-      },
-      {
-        label: '二级 2-2',
-        value: '2-2',
-      },
-    ],
-  },
-  {
-    label: '一级 3',
-    value: '3',
-  },
-])
-</script>
+<template>
+  <div style="height: 400px">
+    <j-tree :list="treeList" accordion />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const treeList = ref([
+  {
+    label: '一级 1',
+    value: '1',
+    children: [
+      {
+        label: '二级 1-1',
+        value: '1-1',
+        children: [
+          {
+            label: '三级 1-1-1',
+            value: '1-1-1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: '一级 2',
+    value: '2',
+    children: [
+      {
+        label: '二级 2-1',
+        value: '2-1',
+      },
+      {
+        label: '二级 2-2',
+        value: '2-2',
+      },
+    ],
+  },
+  {
+    label: '一级 3',
+    value: '3',
+  },
+])
+</script>

package/docs/examples/tree/basic.vue

@@ -1,50 +1,50 @@
-<template>
-  <div style="height: 400px">
-    <j-tree :list="treeList" @click="handleClick" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const treeList = ref([
-  {
-    label: '一级 1',
-    value: '1',
-    children: [
-      {
-        label: '二级 1-1',
-        value: '1-1',
-        children: [
-          {
-            label: '三级 1-1-1',
-            value: '1-1-1',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: '一级 2',
-    value: '2',
-    children: [
-      {
-        label: '二级 2-1',
-        value: '2-1',
-      },
-      {
-        label: '二级 2-2',
-        value: '2-2',
-      },
-    ],
-  },
-  {
-    label: '一级 3',
-    value: '3',
-  },
-])
-
-const handleClick = (value: any, node: any, event: any) => {
-  console.log('点击节点：', value, node)
-}
-</script>
+<template>
+  <div style="height: 400px">
+    <j-tree :list="treeList" @click="handleClick" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const treeList = ref([
+  {
+    label: '一级 1',
+    value: '1',
+    children: [
+      {
+        label: '二级 1-1',
+        value: '1-1',
+        children: [
+          {
+            label: '三级 1-1-1',
+            value: '1-1-1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: '一级 2',
+    value: '2',
+    children: [
+      {
+        label: '二级 2-1',
+        value: '2-1',
+      },
+      {
+        label: '二级 2-2',
+        value: '2-2',
+      },
+    ],
+  },
+  {
+    label: '一级 3',
+    value: '3',
+  },
+])
+
+const handleClick = (value: any, node: any, event: any) => {
+  console.log('点击节点：', value, node)
+}
+</script>

package/docs/examples/tree/buttons.vue

@@ -1,53 +1,53 @@
-<template>
-  <div style="height: 400px">
-    <j-tree :list="treeList" :tree-buttons="treeButtons" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const treeList = ref([
-  {
-    label: '一级 1',
-    value: '1',
-    children: [
-      {
-        label: '二级 1-1',
-        value: '1-1',
-      },
-    ],
-  },
-  {
-    label: '一级 2',
-    value: '2',
-  },
-])
-
-const treeButtons = ref([
-  {
-    prop: 'edit',
-    label: '编辑',
-    icon: 'material-symbols-light:edit',
-    children: [
-      {
-        prop: 'edit-item',
-        label: '编辑项',
-        icon: 'material-symbols-light:edit',
-        click: (row: any) => {
-          console.log('编辑：', row)
-        },
-      },
-      {
-        prop: 'delete-item',
-        label: '删除项',
-        icon: 'material-symbols-light:delete',
-        danger: true,
-        click: (row: any) => {
-          console.log('删除：', row)
-        },
-      },
-    ],
-  },
-])
-</script>
+<template>
+  <div style="height: 400px">
+    <j-tree :list="treeList" :tree-buttons="treeButtons" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const treeList = ref([
+  {
+    label: '一级 1',
+    value: '1',
+    children: [
+      {
+        label: '二级 1-1',
+        value: '1-1',
+      },
+    ],
+  },
+  {
+    label: '一级 2',
+    value: '2',
+  },
+])
+
+const treeButtons = ref([
+  {
+    prop: 'edit',
+    label: '编辑',
+    icon: 'material-symbols-light:edit',
+    children: [
+      {
+        prop: 'edit-item',
+        label: '编辑项',
+        icon: 'material-symbols-light:edit',
+        click: (row: any) => {
+          console.log('编辑：', row)
+        },
+      },
+      {
+        prop: 'delete-item',
+        label: '删除项',
+        icon: 'material-symbols-light:delete',
+        danger: true,
+        click: (row: any) => {
+          console.log('删除：', row)
+        },
+      },
+    ],
+  },
+])
+</script>