@a2simcode/ui 0.0.55 → 0.0.57

package/docs/examples/menu/basic.vue

@@ -1,58 +1,58 @@
-<template>
-  <div style="height: 300px">
-    <j-menu :menus="menuList" :active-id="activeId" @click="handleClick" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const activeId = ref('1-1')
-
-const menuList = ref([
-  {
-    label: '首页',
-    value: '1',
-    icon: 'material-symbols-light:home',
-  },
-  {
-    label: '系统管理',
-    value: '2',
-    icon: 'material-symbols-light:settings',
-    children: [
-      {
-        label: '用户管理',
-        value: '2-1',
-        icon: 'material-symbols-light:person',
-      },
-      {
-        label: '角色管理',
-        value: '2-2',
-        icon: 'material-symbols-light:group',
-      },
-    ],
-  },
-  {
-    label: '数据管理',
-    value: '3',
-    icon: 'material-symbols-light:database',
-    children: [
-      {
-        label: '数据列表',
-        value: '3-1',
-        icon: 'material-symbols-light:table',
-      },
-      {
-        label: '数据导入',
-        value: '3-2',
-        icon: 'material-symbols-light:upload',
-      },
-    ],
-  },
-])
-
-const handleClick = (item: any) => {
-  console.log('点击菜单项：', item)
-  activeId.value = item.value
-}
-</script>
+<template>
+  <div style="height: 300px">
+    <j-menu :menus="menuList" :active-id="activeId" @click="handleClick" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeId = ref('1-1')
+
+const menuList = ref([
+  {
+    label: '首页',
+    value: '1',
+    icon: 'material-symbols-light:home',
+  },
+  {
+    label: '系统管理',
+    value: '2',
+    icon: 'material-symbols-light:settings',
+    children: [
+      {
+        label: '用户管理',
+        value: '2-1',
+        icon: 'material-symbols-light:person',
+      },
+      {
+        label: '角色管理',
+        value: '2-2',
+        icon: 'material-symbols-light:group',
+      },
+    ],
+  },
+  {
+    label: '数据管理',
+    value: '3',
+    icon: 'material-symbols-light:database',
+    children: [
+      {
+        label: '数据列表',
+        value: '3-1',
+        icon: 'material-symbols-light:table',
+      },
+      {
+        label: '数据导入',
+        value: '3-2',
+        icon: 'material-symbols-light:upload',
+      },
+    ],
+  },
+])
+
+const handleClick = (item: any) => {
+  console.log('点击菜单项：', item)
+  activeId.value = item.value
+}
+</script>

package/docs/examples/menu/collapsed.vue

@@ -1,49 +1,49 @@
-<template>
-  <div style="display: flex; gap: 20px">
-    <div style="height: 300px; width: 200px">
-      <j-button
-        style="margin-bottom: 10px"
-        :label="collapsed ? '展开' : '折叠'"
-        @click="collapsed = !collapsed"
-      />
-      <j-menu :menus="menuList" :active-id="activeId" :collapsed="collapsed" @click="handleClick" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const activeId = ref('1-1')
-const collapsed = ref(false)
-
-const menuList = ref([
-  {
-    label: '首页',
-    value: '1',
-    icon: 'material-symbols-light:home',
-  },
-  {
-    label: '系统管理',
-    value: '2',
-    icon: 'material-symbols-light:settings',
-    children: [
-      {
-        label: '用户管理',
-        value: '2-1',
-        icon: 'material-symbols-light:person',
-      },
-      {
-        label: '角色管理',
-        value: '2-2',
-        icon: 'material-symbols-light:group',
-      },
-    ],
-  },
-])
-
-const handleClick = (item: any) => {
-  console.log('点击菜单项：', item)
-  activeId.value = item.value
-}
-</script>
+<template>
+  <div style="display: flex; gap: 20px">
+    <div style="height: 300px; width: 200px">
+      <j-button
+        style="margin-bottom: 10px"
+        :label="collapsed ? '展开' : '折叠'"
+        @click="collapsed = !collapsed"
+      />
+      <j-menu :menus="menuList" :active-id="activeId" :collapsed="collapsed" @click="handleClick" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeId = ref('1-1')
+const collapsed = ref(false)
+
+const menuList = ref([
+  {
+    label: '首页',
+    value: '1',
+    icon: 'material-symbols-light:home',
+  },
+  {
+    label: '系统管理',
+    value: '2',
+    icon: 'material-symbols-light:settings',
+    children: [
+      {
+        label: '用户管理',
+        value: '2-1',
+        icon: 'material-symbols-light:person',
+      },
+      {
+        label: '角色管理',
+        value: '2-2',
+        icon: 'material-symbols-light:group',
+      },
+    ],
+  },
+])
+
+const handleClick = (item: any) => {
+  console.log('点击菜单项：', item)
+  activeId.value = item.value
+}
+</script>

package/docs/examples/menu/horizontal.vue

@@ -1,44 +1,44 @@
-<template>
-  <div>
-    <j-menu :menus="menuList" :active-id="activeId" mode="horizontal" @click="handleClick" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const activeId = ref('1')
-
-const menuList = ref([
-  {
-    label: '首页',
-    value: '1',
-    icon: 'material-symbols-light:home',
-  },
-  {
-    label: '产品',
-    value: '2',
-    icon: 'material-symbols-light:apps',
-    children: [
-      {
-        label: '产品列表',
-        value: '2-1',
-      },
-      {
-        label: '新增产品',
-        value: '2-2',
-      },
-    ],
-  },
-  {
-    label: '关于',
-    value: '3',
-    icon: 'material-symbols-light:info',
-  },
-])
-
-const handleClick = (item: any) => {
-  console.log('点击菜单项：', item)
-  activeId.value = item.value
-}
-</script>
+<template>
+  <div>
+    <j-menu :menus="menuList" :active-id="activeId" mode="horizontal" @click="handleClick" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeId = ref('1')
+
+const menuList = ref([
+  {
+    label: '首页',
+    value: '1',
+    icon: 'material-symbols-light:home',
+  },
+  {
+    label: '产品',
+    value: '2',
+    icon: 'material-symbols-light:apps',
+    children: [
+      {
+        label: '产品列表',
+        value: '2-1',
+      },
+      {
+        label: '新增产品',
+        value: '2-2',
+      },
+    ],
+  },
+  {
+    label: '关于',
+    value: '3',
+    icon: 'material-symbols-light:info',
+  },
+])
+
+const handleClick = (item: any) => {
+  console.log('点击菜单项：', item)
+  activeId.value = item.value
+}
+</script>

package/docs/examples/menu/selection-test.vue

@@ -1,104 +1,104 @@
-<template>
-  <div class="menu-selection-test">
-    <div class="controls">
-      <p>Current Active ID: {{ activeId }}</p>
-      <div class="buttons">
-        <j-button @click="changeSelection('1')" label="Select Home (1)" />
-        <j-button @click="changeSelection('2-1')" label="Select User Manage (2-1)" />
-        <j-button @click="changeSelection('3-2')" label="Select Data Import (3-2)" />
-        <j-button @click="changeSelection('999')" label="Select Non-existent" />
-        <j-button
-          @click="collapsed = !collapsed"
-          :label="collapsed ? 'Expand Menu' : 'Collapse Menu'"
-        />
-      </div>
-    </div>
-
-    <div class="menu-container" style="height: 400px; border: 1px solid #eee; margin-top: 20px">
-      <j-menu
-        v-model:active-id="activeId"
-        :menus="menuList"
-        :collapsed="collapsed"
-        @click="handleClick"
-        @expand-change="handleExpandChange"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const activeId = ref('1')
-const collapsed = ref(false)
-
-const menuList = ref([
-  {
-    label: 'Home',
-    value: '1',
-    icon: 'material-symbols-light:home',
-  },
-  {
-    label: 'System',
-    value: '2',
-    icon: 'material-symbols-light:settings',
-    children: [
-      {
-        label: 'User',
-        value: '2-1',
-        icon: 'material-symbols-light:person',
-      },
-      {
-        label: 'Role',
-        value: '2-2',
-        icon: 'material-symbols-light:group',
-      },
-    ],
-  },
-  {
-    label: 'Data',
-    value: '3',
-    icon: 'material-symbols-light:database',
-    children: [
-      {
-        label: 'List',
-        value: '3-1',
-        icon: 'material-symbols-light:table',
-      },
-      {
-        label: 'Import',
-        value: '3-2',
-        icon: 'material-symbols-light:upload',
-      },
-    ],
-  },
-])
-
-const handleClick = (item: any) => {
-  console.log('Menu clicked:', item)
-}
-
-const handleExpandChange = (detail: any) => {
-  console.log('Expand changed:', detail)
-}
-
-const changeSelection = (id: string) => {
-  console.log('Manually changing selection to:', id)
-  activeId.value = id
-}
-</script>
-
-<style scoped>
-.menu-selection-test {
-  padding: 20px;
-}
-.controls {
-  margin-bottom: 20px;
-}
-.buttons {
-  display: flex;
-  gap: 10px;
-  margin-top: 10px;
-  flex-wrap: wrap;
-}
-</style>
+<template>
+  <div class="menu-selection-test">
+    <div class="controls">
+      <p>Current Active ID: {{ activeId }}</p>
+      <div class="buttons">
+        <j-button @click="changeSelection('1')" label="Select Home (1)" />
+        <j-button @click="changeSelection('2-1')" label="Select User Manage (2-1)" />
+        <j-button @click="changeSelection('3-2')" label="Select Data Import (3-2)" />
+        <j-button @click="changeSelection('999')" label="Select Non-existent" />
+        <j-button
+          @click="collapsed = !collapsed"
+          :label="collapsed ? 'Expand Menu' : 'Collapse Menu'"
+        />
+      </div>
+    </div>
+
+    <div class="menu-container" style="height: 400px; border: 1px solid #eee; margin-top: 20px">
+      <j-menu
+        v-model:active-id="activeId"
+        :menus="menuList"
+        :collapsed="collapsed"
+        @click="handleClick"
+        @expand-change="handleExpandChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeId = ref('1')
+const collapsed = ref(false)
+
+const menuList = ref([
+  {
+    label: 'Home',
+    value: '1',
+    icon: 'material-symbols-light:home',
+  },
+  {
+    label: 'System',
+    value: '2',
+    icon: 'material-symbols-light:settings',
+    children: [
+      {
+        label: 'User',
+        value: '2-1',
+        icon: 'material-symbols-light:person',
+      },
+      {
+        label: 'Role',
+        value: '2-2',
+        icon: 'material-symbols-light:group',
+      },
+    ],
+  },
+  {
+    label: 'Data',
+    value: '3',
+    icon: 'material-symbols-light:database',
+    children: [
+      {
+        label: 'List',
+        value: '3-1',
+        icon: 'material-symbols-light:table',
+      },
+      {
+        label: 'Import',
+        value: '3-2',
+        icon: 'material-symbols-light:upload',
+      },
+    ],
+  },
+])
+
+const handleClick = (item: any) => {
+  console.log('Menu clicked:', item)
+}
+
+const handleExpandChange = (detail: any) => {
+  console.log('Expand changed:', detail)
+}
+
+const changeSelection = (id: string) => {
+  console.log('Manually changing selection to:', id)
+  activeId.value = id
+}
+</script>
+
+<style scoped>
+.menu-selection-test {
+  padding: 20px;
+}
+.controls {
+  margin-bottom: 20px;
+}
+.buttons {
+  display: flex;
+  gap: 10px;
+  margin-top: 10px;
+  flex-wrap: wrap;
+}
+</style>

package/docs/examples/menu/theme.vue

@@ -1,46 +1,46 @@
-<template>
-  <div style="display: flex; gap: 20px">
-    <div style="height: 300px; width: 200px">
-      <j-menu :menus="menuList" :active-id="activeId" theme="light" @click="handleClick" />
-    </div>
-    <div style="height: 300px; width: 200px">
-      <j-menu :menus="menuList" :active-id="activeId" theme="dark" @click="handleClick" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const activeId = ref('1-1')
-
-const menuList = ref([
-  {
-    label: '首页',
-    value: '1',
-    icon: 'material-symbols-light:home',
-  },
-  {
-    label: '系统管理',
-    value: '2',
-    icon: 'material-symbols-light:settings',
-    children: [
-      {
-        label: '用户管理',
-        value: '2-1',
-        icon: 'material-symbols-light:person',
-      },
-      {
-        label: '角色管理',
-        value: '2-2',
-        icon: 'material-symbols-light:group',
-      },
-    ],
-  },
-])
-
-const handleClick = (item: any) => {
-  console.log('点击菜单项：', item)
-  activeId.value = item.value
-}
-</script>
+<template>
+  <div style="display: flex; gap: 20px">
+    <div style="height: 300px; width: 200px">
+      <j-menu :menus="menuList" :active-id="activeId" theme="light" @click="handleClick" />
+    </div>
+    <div style="height: 300px; width: 200px">
+      <j-menu :menus="menuList" :active-id="activeId" theme="dark" @click="handleClick" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeId = ref('1-1')
+
+const menuList = ref([
+  {
+    label: '首页',
+    value: '1',
+    icon: 'material-symbols-light:home',
+  },
+  {
+    label: '系统管理',
+    value: '2',
+    icon: 'material-symbols-light:settings',
+    children: [
+      {
+        label: '用户管理',
+        value: '2-1',
+        icon: 'material-symbols-light:person',
+      },
+      {
+        label: '角色管理',
+        value: '2-2',
+        icon: 'material-symbols-light:group',
+      },
+    ],
+  },
+])
+
+const handleClick = (item: any) => {
+  console.log('点击菜单项：', item)
+  activeId.value = item.value
+}
+</script>