@a2simcode/ui 0.0.187 → 0.0.188

package/docs/examples/code-mirror/mode.vue

@@ -1,33 +1,33 @@
-<template>
-  <div class="demo-container">
-    <el-space direction="vertical" :fill="true" style="width: 100%">
-      <div>
-        <span style="margin-right: 10px">选择语言模式：</span>
-        <el-radio-group v-model="mode">
-          <el-radio value="application/javascript">JavaScript</el-radio>
-          <el-radio value="text/x-sql">SQL</el-radio>
-        </el-radio-group>
-      </div>
-      <j-code-mirror v-model="code" :height="250" :mode="mode" />
-    </el-space>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-
-const mode = ref('application/javascript')
-const code = ref(`function greet(name) {
-  return 'Hello, ' + name + '!';
-}`)
-
-watch(mode, (newMode) => {
-  if (newMode === 'text/x-sql') {
-    code.value = 'SELECT * FROM users WHERE status = "active";'
-  } else {
-    code.value = `function greet(name) {
-  return 'Hello, ' + name + '!';
-}`
-  }
-})
-</script>
+<template>
+  <div class="demo-container">
+    <el-space direction="vertical" :fill="true" style="width: 100%">
+      <div>
+        <span style="margin-right: 10px">选择语言模式：</span>
+        <el-radio-group v-model="mode">
+          <el-radio value="application/javascript">JavaScript</el-radio>
+          <el-radio value="text/x-sql">SQL</el-radio>
+        </el-radio-group>
+      </div>
+      <j-code-mirror v-model="code" :height="250" :mode="mode" />
+    </el-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const mode = ref('application/javascript')
+const code = ref(`function greet(name) {
+  return 'Hello, ' + name + '!';
+}`)
+
+watch(mode, (newMode) => {
+  if (newMode === 'text/x-sql') {
+    code.value = 'SELECT * FROM users WHERE status = "active";'
+  } else {
+    code.value = `function greet(name) {
+  return 'Hello, ' + name + '!';
+}`
+  }
+})
+</script>

package/docs/examples/code-mirror/readonly.vue

@@ -1,14 +1,14 @@
-<template>
-  <div>
-    <j-code-mirror :model-value="code" :height="200" mode="application/javascript" :readonly="true" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const code = ref(`function hello() {
-  console.log('Hello, World!');
-  return 'This is readonly mode';
-}`)
-</script>
+<template>
+  <div>
+    <j-code-mirror :model-value="code" :height="200" mode="application/javascript" :readonly="true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const code = ref(`function hello() {
+  console.log('Hello, World!');
+  return 'This is readonly mode';
+}`)
+</script>

package/docs/examples/collapse/basic.vue

@@ -1,82 +1,82 @@
-<template>
-  <div class="collapse-demo">
-    <div class="demo-item">
-      <p>基础用法</p>
-      <j-collapse v-model="activeNames1">
-        <el-collapse-item title="一致性 Consistency" name="1">
-          <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
-          <div>
-            在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
-          </div>
-        </el-collapse-item>
-        <el-collapse-item title="反馈 Feedback" name="2">
-          <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
-          <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
-        </el-collapse-item>
-        <el-collapse-item title="效率 Efficiency" name="3">
-          <div>简化流程：设计简洁直观的操作流程；</div>
-          <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
-          <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
-        </el-collapse-item>
-        <el-collapse-item title="可控 Controllability" name="4">
-          <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
-          <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
-        </el-collapse-item>
-      </j-collapse>
-    </div>
-
-    <div class="demo-item">
-      <p>手风琴效果</p>
-      <j-collapse v-model="activeName2" accordion>
-        <el-collapse-item title="一致性 Consistency" name="1">
-          <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
-          <div>
-            在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
-          </div>
-        </el-collapse-item>
-        <el-collapse-item title="反馈 Feedback" name="2">
-          <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
-          <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
-        </el-collapse-item>
-        <el-collapse-item title="效率 Efficiency" name="3">
-          <div>简化流程：设计简洁直观的操作流程；</div>
-          <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
-          <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
-        </el-collapse-item>
-        <el-collapse-item title="可控 Controllability" name="4">
-          <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
-          <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
-        </el-collapse-item>
-      </j-collapse>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const activeNames1 = ref(['1'])
-const activeName2 = ref('1')
-</script>
-
-<style scoped>
-.collapse-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="collapse-demo">
+    <div class="demo-item">
+      <p>基础用法</p>
+      <j-collapse v-model="activeNames1">
+        <el-collapse-item title="一致性 Consistency" name="1">
+          <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+          <div>
+            在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
+          </div>
+        </el-collapse-item>
+        <el-collapse-item title="反馈 Feedback" name="2">
+          <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+          <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+        </el-collapse-item>
+        <el-collapse-item title="效率 Efficiency" name="3">
+          <div>简化流程：设计简洁直观的操作流程；</div>
+          <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+          <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+        </el-collapse-item>
+        <el-collapse-item title="可控 Controllability" name="4">
+          <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+          <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+        </el-collapse-item>
+      </j-collapse>
+    </div>
+
+    <div class="demo-item">
+      <p>手风琴效果</p>
+      <j-collapse v-model="activeName2" accordion>
+        <el-collapse-item title="一致性 Consistency" name="1">
+          <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+          <div>
+            在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
+          </div>
+        </el-collapse-item>
+        <el-collapse-item title="反馈 Feedback" name="2">
+          <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+          <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+        </el-collapse-item>
+        <el-collapse-item title="效率 Efficiency" name="3">
+          <div>简化流程：设计简洁直观的操作流程；</div>
+          <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+          <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+        </el-collapse-item>
+        <el-collapse-item title="可控 Controllability" name="4">
+          <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+          <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+        </el-collapse-item>
+      </j-collapse>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeNames1 = ref(['1'])
+const activeName2 = ref('1')
+</script>
+
+<style scoped>
+.collapse-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/comp/basic.vue

@@ -1,7 +1,7 @@
-<template>
-  <div>
-    <j-comp type="j-button" :config="{ type: 'primary', label: '我是通过 JComp 渲染的按钮' }" />
-  </div>
-</template>
-
-<script setup lang="ts"></script>
+<template>
+  <div>
+    <j-comp type="j-button" :config="{ type: 'primary', label: '我是通过 JComp 渲染的按钮' }" />
+  </div>
+</template>
+
+<script setup lang="ts"></script>

package/docs/examples/comp/collapse.vue

@@ -1,38 +1,38 @@
-<template>
-  <j-comp
-    type="j-collapse"
-    :children="[
-      {
-        type: 'el-collapse-item',
-        config: {
-          label: 'Panel 1',
-        },
-        children: [
-          {
-            type: 'j-button',
-            config: {
-              label: 'Button in Panel 1',
-            },
-          },
-        ],
-      },
-      {
-        type: 'el-collapse-item',
-        config: {
-          label: 'Panel 2',
-          active: true,
-        },
-        children: [
-          {
-            type: 'j-button',
-            config: {
-              label: 'Button in Panel 2 (Active by default)',
-            },
-          },
-        ],
-      },
-    ]"
-  />
-</template>
-
-<script setup lang="ts"></script>
+<template>
+  <j-comp
+    type="j-collapse"
+    :children="[
+      {
+        type: 'el-collapse-item',
+        config: {
+          label: 'Panel 1',
+        },
+        children: [
+          {
+            type: 'j-button',
+            config: {
+              label: 'Button in Panel 1',
+            },
+          },
+        ],
+      },
+      {
+        type: 'el-collapse-item',
+        config: {
+          label: 'Panel 2',
+          active: true,
+        },
+        children: [
+          {
+            type: 'j-button',
+            config: {
+              label: 'Button in Panel 2 (Active by default)',
+            },
+          },
+        ],
+      },
+    ]"
+  />
+</template>
+
+<script setup lang="ts"></script>

package/docs/examples/comp/tabs.vue

@@ -1,38 +1,38 @@
-<template>
-  <j-comp
-    type="j-tabs"
-    :children="[
-      {
-        type: 'el-tab-pane',
-        config: {
-          label: 'Tab 1',
-        },
-        children: [
-          {
-            type: 'j-button',
-            config: {
-              label: 'Button in Tab 1',
-            },
-          },
-        ],
-      },
-      {
-        type: 'el-tab-pane',
-        config: {
-          label: 'Tab 2',
-          active: true,
-        },
-        children: [
-          {
-            type: 'j-button',
-            config: {
-              label: 'Button in Tab 2 (Active by default)',
-            },
-          },
-        ],
-      },
-    ]"
-  />
-</template>
-
-<script setup lang="ts"></script>
+<template>
+  <j-comp
+    type="j-tabs"
+    :children="[
+      {
+        type: 'el-tab-pane',
+        config: {
+          label: 'Tab 1',
+        },
+        children: [
+          {
+            type: 'j-button',
+            config: {
+              label: 'Button in Tab 1',
+            },
+          },
+        ],
+      },
+      {
+        type: 'el-tab-pane',
+        config: {
+          label: 'Tab 2',
+          active: true,
+        },
+        children: [
+          {
+            type: 'j-button',
+            config: {
+              label: 'Button in Tab 2 (Active by default)',
+            },
+          },
+        ],
+      },
+    ]"
+  />
+</template>
+
+<script setup lang="ts"></script>

package/docs/examples/count/basic.vue

@@ -1,101 +1,101 @@
-<template>
-  <div class="count-demo">
-    <div class="demo-item">
-      <p>基础计算 (1000 + 200):</p>
-      <j-count :format-json="formJSON" />
-    </div>
-
-    <div class="demo-item">
-      <p>千分位展示:</p>
-      <j-count :format-json="formJSON" thousand-separator />
-    </div>
-
-    <div class="demo-item">
-      <p>人民币大写:</p>
-      <j-count :format-json="formJSON" is-chinese />
-    </div>
-
-    <div class="demo-item">
-      <p>保留两位小数:</p>
-      <j-count :format-json="formJSON" :decimal="2" />
-    </div>
-
-    <!-- 计算公式 -->
-     <div class="demo-item">
-      <p>配置计算公式来计算结果:</p>
-      <j-input-count v-model="value" :list="list" @change="handleChange" />
-      <j-count :format-json="value" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useFormProvide } from '@a2simcode/ui'
-import { ref } from 'vue'
-
-
-// 模拟表单提供者，因为 Count 组件内部依赖注入
-const getValue = ({ id, i }: { id: string; i?: number }) => {
-    const mockData: Record<string, number> = {
-      price: 100,
-      quantity: 3,
-      'table1.price1': [100, 200],
-      'table1.quantity1': [1, 2]
-    }
-    return mockData[id] || 0
-  }
-  //@ts-ignore
-useFormProvide({ getValue: getValue })
-
-const formJSON =
-  '[{"value":1,"type":"num"},{"value":0,"type":"num"},{"value":0,"type":"num"},{"value":0,"type":"num"},{"value":"+","type":"num"},{"value":2,"type":"num"},{"value":0,"type":"num"},{"value":0,"type":"num"}]'
-
-
-const value = ref('')
-const list = [
-  {
-    label: '主表组件',
-    children: [
-      {
-        label: '价格',
-        value: 'price',
-      },
-      {
-        label: '数量',
-        value: 'quantity',
-      },
-    ],
-  },
-  {
-    label: '子表组件',
-    children: [
-      {
-        label: '价格',
-        value: 'table1.price1',
-      },
-      {
-        label: '数量',
-        value: 'table1.quantity1',
-      },
-    ],
-  },
-]
-
-const countRes = ref('')
-const handleChange = (list: any[]) => {
-  console.log(list, 'change', value)
-}
-</script>
-
-<style scoped>
-.count-demo {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-.demo-item p {
-  margin-bottom: 8px;
-  font-size: 14px;
-  color: var(--j-color-text-2);
-}
-</style>
+<template>
+  <div class="count-demo">
+    <div class="demo-item">
+      <p>基础计算 (1000 + 200):</p>
+      <j-count :format-json="formJSON" />
+    </div>
+
+    <div class="demo-item">
+      <p>千分位展示:</p>
+      <j-count :format-json="formJSON" thousand-separator />
+    </div>
+
+    <div class="demo-item">
+      <p>人民币大写:</p>
+      <j-count :format-json="formJSON" is-chinese />
+    </div>
+
+    <div class="demo-item">
+      <p>保留两位小数:</p>
+      <j-count :format-json="formJSON" :decimal="2" />
+    </div>
+
+    <!-- 计算公式 -->
+     <div class="demo-item">
+      <p>配置计算公式来计算结果:</p>
+      <j-input-count v-model="value" :list="list" @change="handleChange" />
+      <j-count :format-json="value" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useFormProvide } from '@a2simcode/ui'
+import { ref } from 'vue'
+
+
+// 模拟表单提供者，因为 Count 组件内部依赖注入
+const getValue = ({ id, i }: { id: string; i?: number }) => {
+    const mockData: Record<string, number> = {
+      price: 100,
+      quantity: 3,
+      'table1.price1': [100, 200],
+      'table1.quantity1': [1, 2]
+    }
+    return mockData[id] || 0
+  }
+  //@ts-ignore
+useFormProvide({ getValue: getValue })
+
+const formJSON =
+  '[{"value":1,"type":"num"},{"value":0,"type":"num"},{"value":0,"type":"num"},{"value":0,"type":"num"},{"value":"+","type":"num"},{"value":2,"type":"num"},{"value":0,"type":"num"},{"value":0,"type":"num"}]'
+
+
+const value = ref('')
+const list = [
+  {
+    label: '主表组件',
+    children: [
+      {
+        label: '价格',
+        value: 'price',
+      },
+      {
+        label: '数量',
+        value: 'quantity',
+      },
+    ],
+  },
+  {
+    label: '子表组件',
+    children: [
+      {
+        label: '价格',
+        value: 'table1.price1',
+      },
+      {
+        label: '数量',
+        value: 'table1.quantity1',
+      },
+    ],
+  },
+]
+
+const countRes = ref('')
+const handleChange = (list: any[]) => {
+  console.log(list, 'change', value)
+}
+</script>
+
+<style scoped>
+.count-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.demo-item p {
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: var(--j-color-text-2);
+}
+</style>