@a2simcode/ui 0.0.111 → 0.0.114

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

@@ -0,0 +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;
+}
+</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>