@a2simcode/ui 0.0.54 → 0.0.56

package/docs/examples/layout/hide-mid-when-narrow.vue

@@ -1,96 +1,96 @@
-<template>
-  <div class="layout-demo">
-    <div class="demo-tip">
-      <p style="margin: 0 0 10px 0; color: #1890ff; font-weight: bold">
-        💡 尝试调整浏览器窗口宽度观察效果
-      </p>
-      <p style="margin: 0; color: #666; font-size: 14px">
-        当容器宽度小于 500px（左200px + 右200px +
-        mid最小宽度100px）时，中间区域会自动隐藏，左右区域平分剩余宽度
-      </p>
-    </div>
-    <j-layout
-      :left="200"
-      :right="200"
-      :mid-min-width="100"
-      :hide-mid-when-narrow="true"
-      :left-move="false"
-      :right-move="false"
-    >
-      <template #left>
-        <div class="demo-block left">
-          <h3>左侧区域</h3>
-          <p>宽度: 200px</p>
-          <p style="color: #1890ff; margin-top: 10px">
-            当中间区域隐藏时，如果有右侧区域，则左右各占 50%
-          </p>
-        </div>
-      </template>
-      <template #default>
-        <div class="demo-block mid">
-          <h3>中间区域</h3>
-          <p>最小宽度: 100px</p>
-          <p style="color: #52c41a; margin-top: 10px">
-            当容器总宽度 &lt; (左侧宽度 + 右侧宽度 + mid最小宽度) 时，此区域会自动隐藏
-          </p>
-        </div>
-      </template>
-      <template #right>
-        <div class="demo-block right">
-          <h3>右侧区域</h3>
-          <p>宽度: 200px</p>
-          <p style="color: #1890ff; margin-top: 10px">
-            当中间区域隐藏时，如果有左侧区域，则左右各占 50%
-          </p>
-        </div>
-      </template>
-    </j-layout>
-  </div>
-</template>
-
-<style scoped>
-.layout-demo {
-  border: 1px solid #e8e8e8;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.demo-tip {
-  padding: 15px;
-  background: #f0f9ff;
-  border-bottom: 1px solid #e8e8e8;
-}
-
-.layout-demo :deep(.j-layout) {
-  height: 500px;
-}
-
-.demo-block {
-  padding: 20px;
-  height: 100%;
-  overflow: auto;
-}
-
-.demo-block.left {
-  background: #e6f7ff;
-}
-
-.demo-block.mid {
-  background: #f6ffed;
-}
-
-.demo-block.right {
-  background: #fff7e6;
-}
-
-.demo-block h3 {
-  margin: 0 0 10px 0;
-  color: #333;
-}
-
-.demo-block p {
-  margin: 5px 0;
-  color: #666;
-  font-size: 14px;
-}
-</style>
+<template>
+  <div class="layout-demo">
+    <div class="demo-tip">
+      <p style="margin: 0 0 10px 0; color: #1890ff; font-weight: bold">
+        💡 尝试调整浏览器窗口宽度观察效果
+      </p>
+      <p style="margin: 0; color: #666; font-size: 14px">
+        当容器宽度小于 500px（左200px + 右200px +
+        mid最小宽度100px）时，中间区域会自动隐藏，左右区域平分剩余宽度
+      </p>
+    </div>
+    <j-layout
+      :left="200"
+      :right="200"
+      :mid-min-width="100"
+      :hide-mid-when-narrow="true"
+      :left-move="false"
+      :right-move="false"
+    >
+      <template #left>
+        <div class="demo-block left">
+          <h3>左侧区域</h3>
+          <p>宽度: 200px</p>
+          <p style="color: #1890ff; margin-top: 10px">
+            当中间区域隐藏时，如果有右侧区域，则左右各占 50%
+          </p>
+        </div>
+      </template>
+      <template #default>
+        <div class="demo-block mid">
+          <h3>中间区域</h3>
+          <p>最小宽度: 100px</p>
+          <p style="color: #52c41a; margin-top: 10px">
+            当容器总宽度 &lt; (左侧宽度 + 右侧宽度 + mid最小宽度) 时，此区域会自动隐藏
+          </p>
+        </div>
+      </template>
+      <template #right>
+        <div class="demo-block right">
+          <h3>右侧区域</h3>
+          <p>宽度: 200px</p>
+          <p style="color: #1890ff; margin-top: 10px">
+            当中间区域隐藏时，如果有左侧区域，则左右各占 50%
+          </p>
+        </div>
+      </template>
+    </j-layout>
+  </div>
+</template>
+
+<style scoped>
+.layout-demo {
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.demo-tip {
+  padding: 15px;
+  background: #f0f9ff;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.layout-demo :deep(.j-layout) {
+  height: 500px;
+}
+
+.demo-block {
+  padding: 20px;
+  height: 100%;
+  overflow: auto;
+}
+
+.demo-block.left {
+  background: #e6f7ff;
+}
+
+.demo-block.mid {
+  background: #f6ffed;
+}
+
+.demo-block.right {
+  background: #fff7e6;
+}
+
+.demo-block h3 {
+  margin: 0 0 10px 0;
+  color: #333;
+}
+
+.demo-block p {
+  margin: 5px 0;
+  color: #666;
+  font-size: 14px;
+}
+</style>

package/docs/examples/layout/min-size.vue

@@ -1,73 +1,73 @@
-<template>
-  <div class="layout-demo">
-    <j-layout
-      :left="200"
-      :right="200"
-      :top="80"
-      :bottom="80"
-      :mid-min-width="300"
-      :mid-min-height="200"
-    >
-      <template #left>
-        <div class="demo-block">
-          <h3>左侧区域</h3>
-          <p>尝试拖动边界调整大小</p>
-        </div>
-      </template>
-      <template #top>
-        <div class="demo-block">
-          <h3>顶部区域</h3>
-          <p>拖动下边界向下调整</p>
-        </div>
-      </template>
-      <template #default>
-        <div class="demo-block">
-          <h3>中间主体区域</h3>
-          <p>最小宽度: 300px</p>
-          <p>最小高度: 200px</p>
-          <p style="color: #1890ff; margin-top: 20px">
-            💡 无论如何拖动四周的分隔线，中间区域都不会小于设置的最小尺寸
-          </p>
-        </div>
-      </template>
-      <template #bottom>
-        <div class="demo-block">
-          <h3>底部区域</h3>
-          <p>拖动上边界向上调整</p>
-        </div>
-      </template>
-      <template #right>
-        <div class="demo-block">
-          <h3>右侧区域</h3>
-          <p>尝试拖动边界调整大小</p>
-        </div>
-      </template>
-    </j-layout>
-  </div>
-</template>
-
-<style scoped>
-.layout-demo {
-  height: 600px;
-  border: 1px solid #e8e8e8;
-  border-radius: 4px;
-}
-
-.demo-block {
-  padding: 20px;
-  height: 100%;
-  background: #f5f5f5;
-  overflow: auto;
-}
-
-.demo-block h3 {
-  margin: 0 0 10px 0;
-  color: #333;
-}
-
-.demo-block p {
-  margin: 5px 0;
-  color: #666;
-  font-size: 14px;
-}
-</style>
+<template>
+  <div class="layout-demo">
+    <j-layout
+      :left="200"
+      :right="200"
+      :top="80"
+      :bottom="80"
+      :mid-min-width="300"
+      :mid-min-height="200"
+    >
+      <template #left>
+        <div class="demo-block">
+          <h3>左侧区域</h3>
+          <p>尝试拖动边界调整大小</p>
+        </div>
+      </template>
+      <template #top>
+        <div class="demo-block">
+          <h3>顶部区域</h3>
+          <p>拖动下边界向下调整</p>
+        </div>
+      </template>
+      <template #default>
+        <div class="demo-block">
+          <h3>中间主体区域</h3>
+          <p>最小宽度: 300px</p>
+          <p>最小高度: 200px</p>
+          <p style="color: #1890ff; margin-top: 20px">
+            💡 无论如何拖动四周的分隔线，中间区域都不会小于设置的最小尺寸
+          </p>
+        </div>
+      </template>
+      <template #bottom>
+        <div class="demo-block">
+          <h3>底部区域</h3>
+          <p>拖动上边界向上调整</p>
+        </div>
+      </template>
+      <template #right>
+        <div class="demo-block">
+          <h3>右侧区域</h3>
+          <p>尝试拖动边界调整大小</p>
+        </div>
+      </template>
+    </j-layout>
+  </div>
+</template>
+
+<style scoped>
+.layout-demo {
+  height: 600px;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+}
+
+.demo-block {
+  padding: 20px;
+  height: 100%;
+  background: #f5f5f5;
+  overflow: auto;
+}
+
+.demo-block h3 {
+  margin: 0 0 10px 0;
+  color: #333;
+}
+
+.demo-block p {
+  margin: 5px 0;
+  color: #666;
+  font-size: 14px;
+}
+</style>

package/docs/examples/layout/percent-size.vue

@@ -1,80 +1,80 @@
-<template>
-  <div class="layout-demo">
-    <j-layout left="20%" right="25%" top="15%" bottom="12%">
-      <template #left>
-        <div class="demo-content">
-          <h3>左侧区域</h3>
-          <p>宽度: 20%</p>
-          <p>可随窗口大小自动调整</p>
-        </div>
-      </template>
-      <template #right>
-        <div class="demo-content">
-          <h3>右侧区域</h3>
-          <p>宽度: 25%</p>
-          <p>响应式布局</p>
-        </div>
-      </template>
-      <template #top>
-        <div class="demo-content">
-          <h3>顶部区域</h3>
-          <p>高度: 15%</p>
-        </div>
-      </template>
-      <template #bottom>
-        <div class="demo-content">
-          <h3>底部区域</h3>
-          <p>高度: 12%</p>
-        </div>
-      </template>
-      <div class="demo-main">
-        <h2>中间主体区域</h2>
-        <p>使用百分比设置各区域大小，布局会随窗口大小自动调整。</p>
-        <p>注意：拖动调整大小后，会自动转换为像素值。</p>
-      </div>
-    </j-layout>
-  </div>
-</template>
-
-<style scoped>
-.layout-demo {
-  height: 500px;
-  border: 1px solid #dcdfe6;
-}
-
-.demo-content {
-  padding: 20px;
-  background: #f5f7fa;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-.demo-content h3 {
-  margin: 0 0 10px 0;
-  color: #303133;
-}
-
-.demo-content p {
-  margin: 5px 0;
-  color: #606266;
-  font-size: 14px;
-}
-
-.demo-main {
-  padding: 40px;
-  height: 100%;
-  box-sizing: border-box;
-  background: #fff;
-}
-
-.demo-main h2 {
-  margin: 0 0 20px 0;
-  color: #303133;
-}
-
-.demo-main p {
-  margin: 10px 0;
-  color: #606266;
-  line-height: 1.6;
-}
-</style>
+<template>
+  <div class="layout-demo">
+    <j-layout left="20%" right="25%" top="15%" bottom="12%">
+      <template #left>
+        <div class="demo-content">
+          <h3>左侧区域</h3>
+          <p>宽度: 20%</p>
+          <p>可随窗口大小自动调整</p>
+        </div>
+      </template>
+      <template #right>
+        <div class="demo-content">
+          <h3>右侧区域</h3>
+          <p>宽度: 25%</p>
+          <p>响应式布局</p>
+        </div>
+      </template>
+      <template #top>
+        <div class="demo-content">
+          <h3>顶部区域</h3>
+          <p>高度: 15%</p>
+        </div>
+      </template>
+      <template #bottom>
+        <div class="demo-content">
+          <h3>底部区域</h3>
+          <p>高度: 12%</p>
+        </div>
+      </template>
+      <div class="demo-main">
+        <h2>中间主体区域</h2>
+        <p>使用百分比设置各区域大小，布局会随窗口大小自动调整。</p>
+        <p>注意：拖动调整大小后，会自动转换为像素值。</p>
+      </div>
+    </j-layout>
+  </div>
+</template>
+
+<style scoped>
+.layout-demo {
+  height: 500px;
+  border: 1px solid #dcdfe6;
+}
+
+.demo-content {
+  padding: 20px;
+  background: #f5f7fa;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.demo-content h3 {
+  margin: 0 0 10px 0;
+  color: #303133;
+}
+
+.demo-content p {
+  margin: 5px 0;
+  color: #606266;
+  font-size: 14px;
+}
+
+.demo-main {
+  padding: 40px;
+  height: 100%;
+  box-sizing: border-box;
+  background: #fff;
+}
+
+.demo-main h2 {
+  margin: 0 0 20px 0;
+  color: #303133;
+}
+
+.demo-main p {
+  margin: 10px 0;
+  color: #606266;
+  line-height: 1.6;
+}
+</style>

package/docs/examples/layout/simple.vue

@@ -1,22 +1,22 @@
-<template>
-  <div style="height: 400px; border: 1px solid #ddd">
-    <j-layout>
-      <template #left>
-        <div style="padding: 20px; background: #001529; color: #fff; height: 100%">
-          <h3 style="margin: 0 0 10px">导航菜单</h3>
-          <div>菜单项 1</div>
-          <div>菜单项 2</div>
-          <div>菜单项 3</div>
-        </div>
-      </template>
-      <template #default>
-        <div style="padding: 20px; height: 100%; overflow: auto; background: #fff">
-          <h2>欢迎使用 Layout 组件</h2>
-          <p>这是一个简单的左右布局示例</p>
-          <p>左侧是导航菜单区域，右侧是内容展示区域</p>
-          <p>可以通过拖拽中间的分隔线来调整左侧区域的宽度</p>
-        </div>
-      </template>
-    </j-layout>
-  </div>
-</template>
+<template>
+  <div style="height: 400px; border: 1px solid #ddd">
+    <j-layout>
+      <template #left>
+        <div style="padding: 20px; background: #001529; color: #fff; height: 100%">
+          <h3 style="margin: 0 0 10px">导航菜单</h3>
+          <div>菜单项 1</div>
+          <div>菜单项 2</div>
+          <div>菜单项 3</div>
+        </div>
+      </template>
+      <template #default>
+        <div style="padding: 20px; height: 100%; overflow: auto; background: #fff">
+          <h2>欢迎使用 Layout 组件</h2>
+          <p>这是一个简单的左右布局示例</p>
+          <p>左侧是导航菜单区域，右侧是内容展示区域</p>
+          <p>可以通过拖拽中间的分隔线来调整左侧区域的宽度</p>
+        </div>
+      </template>
+    </j-layout>
+  </div>
+</template>

package/docs/examples/layout/top-side.vue

@@ -1,34 +1,34 @@
-<template>
-  <div style="height: 400px; border: 1px solid #ddd">
-    <j-layout>
-      <template #top>
-        <div
-          style="
-            padding: 15px 20px;
-            background: #001529;
-            color: #fff;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-          "
-        >
-          <h3 style="margin: 0">网站标题</h3>
-          <div style="display: flex; gap: 20px">
-            <span>首页</span>
-            <span>产品</span>
-            <span>关于</span>
-          </div>
-        </div>
-      </template>
-      <template #default>
-        <div style="padding: 20px; height: 100%; overflow: auto; background: #fff">
-          <h2>顶部导航布局</h2>
-          <p>这是一个经典的顶部导航布局示例</p>
-          <p>顶部区域通常用于放置网站标题、导航菜单等内容</p>
-          <p>可以通过拖拽分隔线调整顶部区域的高度</p>
-        </div>
-      </template>
-    </j-layout>
-  </div>
-</template>
+<template>
+  <div style="height: 400px; border: 1px solid #ddd">
+    <j-layout>
+      <template #top>
+        <div
+          style="
+            padding: 15px 20px;
+            background: #001529;
+            color: #fff;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          "
+        >
+          <h3 style="margin: 0">网站标题</h3>
+          <div style="display: flex; gap: 20px">
+            <span>首页</span>
+            <span>产品</span>
+            <span>关于</span>
+          </div>
+        </div>
+      </template>
+      <template #default>
+        <div style="padding: 20px; height: 100%; overflow: auto; background: #fff">
+          <h2>顶部导航布局</h2>
+          <p>这是一个经典的顶部导航布局示例</p>
+          <p>顶部区域通常用于放置网站标题、导航菜单等内容</p>
+          <p>可以通过拖拽分隔线调整顶部区域的高度</p>
+        </div>
+      </template>
+    </j-layout>
+  </div>
+</template>

package/docs/examples/map/basic.vue

@@ -1,22 +1,22 @@
-<template>
-  <div style="height: 400px; display: flex; flex-direction: column; gap: 10px">
-    <j-map v-model:address="address" v-model:lng="lng" v-model:lat="lat" @change="handleChange" />
-    <div>
-      <p>地址: {{ address }}</p>
-      <p>经度: {{ lng }}</p>
-      <p>纬度: {{ lat }}</p>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const address = ref('')
-const lng = ref(0)
-const lat = ref(0)
-
-const handleChange = (data: any) => {
-  console.log('Map change:', data)
-}
-</script>
+<template>
+  <div style="height: 400px; display: flex; flex-direction: column; gap: 10px">
+    <j-map v-model:address="address" v-model:lng="lng" v-model:lat="lat" @change="handleChange" />
+    <div>
+      <p>地址: {{ address }}</p>
+      <p>经度: {{ lng }}</p>
+      <p>纬度: {{ lat }}</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const address = ref('')
+const lng = ref(0)
+const lat = ref(0)
+
+const handleChange = (data: any) => {
+  console.log('Map change:', data)
+}
+</script>