@a2simcode/ui 0.0.318 → 0.0.320

package/docs/examples/table-panel/tree-parent-key.vue

@@ -1,67 +1,67 @@
-<template>
-  <div style="position: relative; width: 100%; height: 500px">
-    <j-table-panel
-      row-key="id"
-      :columns="columns"
-      :load-data="loadData"
-      :is-tree="true"
-      is-multiple
-      parent-key="pid"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const columns = ref([
-  {
-    id: 'name',
-    type: '',
-    config: {
-      label: '名称',
-      width: 240,
-    },
-  },
-  {
-    id: 'id',
-    type: '',
-    config: {
-      label: 'ID',
-      width: 160,
-    },
-  },
-  {
-    id: 'pid',
-    type: '',
-    config: {
-      label: '父ID',
-      width: 160,
-    },
-  },
-  {
-    id: 'value',
-    type: '',
-    config: {
-      label: '值',
-      width: 120,
-      align: 'right',
-    },
-  },
-])
-
-const flatData = [
-  { id: '1', pid: '', name: '父节点 1', value: 10 },
-  { id: '1-1', pid: '1', name: '子节点 1-1', value: 11 },
-  { id: '1-2', pid: '1', name: '子节点 1-2', value: 12 },
-  { id: '1-2-1', pid: '1-2', name: '子节点 1-2-1', value: 121 },
-  { id: '2', pid: '', name: '父节点 2', value: 20 },
-  { id: '2-1', pid: '2', name: '子节点 2-1', value: 21 },
-]
-
-const loadData = async (_params: Record<string, any>) => {
-  return new Promise((resolve) => {
-    setTimeout(() => resolve(flatData), 200)
-  })
-}
-</script>
+<template>
+  <div style="position: relative; width: 100%; height: 500px">
+    <j-table-panel
+      row-key="id"
+      :columns="columns"
+      :load-data="loadData"
+      :is-tree="true"
+      is-multiple
+      parent-key="pid"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref([
+  {
+    id: 'name',
+    type: '',
+    config: {
+      label: '名称',
+      width: 240,
+    },
+  },
+  {
+    id: 'id',
+    type: '',
+    config: {
+      label: 'ID',
+      width: 160,
+    },
+  },
+  {
+    id: 'pid',
+    type: '',
+    config: {
+      label: '父ID',
+      width: 160,
+    },
+  },
+  {
+    id: 'value',
+    type: '',
+    config: {
+      label: '值',
+      width: 120,
+      align: 'right',
+    },
+  },
+])
+
+const flatData = [
+  { id: '1', pid: '', name: '父节点 1', value: 10 },
+  { id: '1-1', pid: '1', name: '子节点 1-1', value: 11 },
+  { id: '1-2', pid: '1', name: '子节点 1-2', value: 12 },
+  { id: '1-2-1', pid: '1-2', name: '子节点 1-2-1', value: 121 },
+  { id: '2', pid: '', name: '父节点 2', value: 20 },
+  { id: '2-1', pid: '2', name: '子节点 2-1', value: 21 },
+]
+
+const loadData = async (_params: Record<string, any>) => {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(flatData), 200)
+  })
+}
+</script>

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/time/base.vue

@@ -1,68 +1,68 @@
-<template>
-  <div class="demo-time-basic">
-    <div class="block">
-      <span class="demonstration">Default</span>
-      <j-time v-model="value1" placeholder="Pick a time" />
-    </div>
-    <div class="block">
-      <span class="demonstration">Time Range</span>
-      <j-time
-        v-model="value2"
-        placeholder="Pick a time range"
-        is-range
-        start-placeholder="Start time"
-        end-placeholder="End time"
-      />
-    </div>
-    <div class="block">
-      <span class="demonstration">Arrow Control</span>
-      <j-time
-        v-model="value3"
-        placeholder="Pick a time"
-        arrow-control
-      />
-    </div>
-    <div class="block">
-      <span class="demonstration">Selectable Range</span>
-      <j-time
-        v-model="value4"
-        placeholder="Pick a time"
-        :selectable-range="selectableRange"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value1 = ref('')
-const value2 = ref('')
-const value3 = ref('')
-const value4 = ref('')
-
-const selectableRange = ['08:30:00 - 20:30:00']
-</script>
-
-<style scoped>
-.demo-time-basic {
-  display: flex;
-  flex-wrap: wrap;
-}
-.demo-time-basic .block {
-  padding: 30px 0;
-  text-align: center;
-  border-right: solid 1px var(--el-border-color);
-  flex: 1;
-  min-width: 200px;
-}
-.demo-time-basic .block:last-child {
-  border-right: none;
-}
-.demo-time-basic .demonstration {
-  display: block;
-  color: var(--el-text-color-secondary);
-  font-size: 14px;
-  margin-bottom: 20px;
-}
+<template>
+  <div class="demo-time-basic">
+    <div class="block">
+      <span class="demonstration">Default</span>
+      <j-time v-model="value1" placeholder="Pick a time" />
+    </div>
+    <div class="block">
+      <span class="demonstration">Time Range</span>
+      <j-time
+        v-model="value2"
+        placeholder="Pick a time range"
+        is-range
+        start-placeholder="Start time"
+        end-placeholder="End time"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">Arrow Control</span>
+      <j-time
+        v-model="value3"
+        placeholder="Pick a time"
+        arrow-control
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">Selectable Range</span>
+      <j-time
+        v-model="value4"
+        placeholder="Pick a time"
+        :selectable-range="selectableRange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+const value2 = ref('')
+const value3 = ref('')
+const value4 = ref('')
+
+const selectableRange = ['08:30:00 - 20:30:00']
+</script>
+
+<style scoped>
+.demo-time-basic {
+  display: flex;
+  flex-wrap: wrap;
+}
+.demo-time-basic .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  flex: 1;
+  min-width: 200px;
+}
+.demo-time-basic .block:last-child {
+  border-right: none;
+}
+.demo-time-basic .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
 </style>

package/docs/examples/title/basic.vue

@@ -1,87 +1,87 @@
-<template>
-  <div class="title-demo">
-    <div class="demo-item">
-      <p>基础用法</p>
-      <j-title title="这是一个标题" />
-    </div>
-
-    <div class="demo-item">
-      <p>设置对齐方式</p>
-      <j-title title="左对齐" align="left" />
-      <j-title title="居中对齐" align="center" />
-      <j-title title="右对齐" align="right" />
-    </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="左对齐" align="left" />
+      <j-title title="居中对齐" align="center" />
+      <j-title title="右对齐" align="right" />
+    </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>