@a2simcode/ui 0.0.318 → 0.0.320

package/docs/examples/barcode/props-text.vue

@@ -1,268 +1,268 @@
-<template>
-  <div class="props-demo-container">
-    <h2>文本设置属性</h2>
-
-    <div class="demo-section">
-      <h3>includetext - 是否显示人眼可读文本</h3>
-      <div class="demo-grid">
-        <div class="demo-item">
-          <p>includetext: true (默认)</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" :includetext="true" />
-        </div>
-        <div class="demo-item">
-          <p>includetext: false</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" :includetext="false" />
-        </div>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>alttext - 替代显示文本</h3>
-      <p class="section-desc">不改变条码逻辑，仅改变显示的字</p>
-      <div class="demo-grid">
-        <div class="demo-item">
-          <p>alttext: '' (默认，显示原始值)</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" />
-        </div>
-        <div class="demo-item">
-          <p>alttext: '自定义文本'</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" alttext="自定义文本" />
-        </div>
-        <div class="demo-item">
-          <p>alttext: 'Product Code: ABC123'</p>
-          <j-barcode
-            v-model="code"
-            bcid="code128"
-            :height="15"
-            :scale="2"
-            alttext="Product Code: ABC123"
-          />
-        </div>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>textfont - 字体</h3>
-      <div class="demo-grid">
-        <div class="demo-item">
-          <p>textfont: 'OCR-B' (默认)</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textfont="OCR-B" />
-        </div>
-        <div class="demo-item">
-          <p>textfont: 'OCR-A'</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textfont="OCR-A" />
-        </div>
-        <div class="demo-item">
-          <p>textfont: 'Helvetica'</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textfont="Helvetica" />
-        </div>
-        <div class="demo-item">
-          <p>textfont: 'Courier'</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textfont="Courier" />
-        </div>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>textsize - 字体大小</h3>
-      <div class="demo-grid">
-        <div class="demo-item">
-          <p>textsize: 8</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" :textsize="8" />
-        </div>
-        <div class="demo-item">
-          <p>textsize: 10 (默认)</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" :textsize="10" />
-        </div>
-        <div class="demo-item">
-          <p>textsize: 14</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" :textsize="14" />
-        </div>
-        <div class="demo-item">
-          <p>textsize: 18</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" :textsize="18" />
-        </div>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>textxalign - 文本水平对齐</h3>
-      <div class="demo-grid">
-        <div class="demo-item">
-          <p>textxalign: 'center' (默认)</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textxalign="center" />
-        </div>
-        <div class="demo-item">
-          <p>textxalign: 'left'</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textxalign="left" />
-        </div>
-        <div class="demo-item">
-          <p>textxalign: 'right'</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textxalign="right" />
-        </div>
-        <div class="demo-item">
-          <p>textxalign: 'offleft'</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textxalign="offleft" />
-        </div>
-        <div class="demo-item">
-          <p>textxalign: 'offright'</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textxalign="offright" />
-        </div>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>textyalign - 文本垂直对齐</h3>
-      <div class="demo-grid">
-        <div class="demo-item">
-          <p>textyalign: 'bottom' (默认)</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textyalign="bottom" />
-        </div>
-        <div class="demo-item">
-          <p>textyalign: 'top'</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textyalign="top" />
-        </div>
-        <div class="demo-item">
-          <p>textyalign: 'above'</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textyalign="above" />
-        </div>
-        <div class="demo-item">
-          <p>textyalign: 'center'</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textyalign="center" />
-        </div>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>textxoffset / textyoffset - 文本偏移</h3>
-      <div class="demo-grid">
-        <div class="demo-item">
-          <p>textxoffset: 0, textyoffset: 0 (默认)</p>
-          <j-barcode
-            v-model="code"
-            bcid="code128"
-            :height="15"
-            :scale="2"
-            :textxoffset="0"
-            :textyoffset="0"
-          />
-        </div>
-        <div class="demo-item">
-          <p>textxoffset: 10, textyoffset: 0</p>
-          <j-barcode
-            v-model="code"
-            bcid="code128"
-            :height="15"
-            :scale="2"
-            :textxoffset="10"
-            :textyoffset="0"
-          />
-        </div>
-        <div class="demo-item">
-          <p>textxoffset: 0, textyoffset: 5</p>
-          <j-barcode
-            v-model="code"
-            bcid="code128"
-            :height="15"
-            :scale="2"
-            :textxoffset="0"
-            :textyoffset="5"
-          />
-        </div>
-        <div class="demo-item">
-          <p>textxoffset: -10, textyoffset: -5</p>
-          <j-barcode
-            v-model="code"
-            bcid="code128"
-            :height="15"
-            :scale="2"
-            :textxoffset="-10"
-            :textyoffset="-5"
-          />
-        </div>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>textcolor - 文本颜色</h3>
-      <div class="demo-grid">
-        <div class="demo-item">
-          <p>textcolor: '' (默认，跟随barcolor)</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" />
-        </div>
-        <div class="demo-item">
-          <p>textcolor: 'ff0000' (红色)</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textcolor="ff0000" />
-        </div>
-        <div class="demo-item">
-          <p>textcolor: '0066cc' (蓝色)</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textcolor="0066cc" />
-        </div>
-        <div class="demo-item">
-          <p>textcolor: '00aa00' (绿色)</p>
-          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textcolor="00aa00" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const code = ref('1234567890')
-</script>
-
-<style scoped>
-.props-demo-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-.demo-section {
-  margin-bottom: 40px;
-}
-
-.demo-section h3 {
-  margin-bottom: 10px;
-  color: #303133;
-  font-size: 18px;
-  border-left: 4px solid #409eff;
-  padding-left: 10px;
-}
-
-.section-desc {
-  margin-bottom: 20px;
-  color: #909399;
-  font-size: 13px;
-}
-
-.demo-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 20px;
-}
-
-.demo-item {
-  padding: 15px;
-  border: 1px solid #e4e7ed;
-  border-radius: 6px;
-  background-color: #ffffff;
-}
-
-.demo-item p {
-  margin: 0 0 10px 0;
-  font-size: 13px;
-  color: #606266;
-  font-weight: 500;
-}
-
-.demo-item :deep(.j-barcode) {
-  display: flex;
-  justify-content: center;
-  padding: 10px;
-  background-color: #f5f7fa;
-  border-radius: 4px;
-}
-</style>
+<template>
+  <div class="props-demo-container">
+    <h2>文本设置属性</h2>
+
+    <div class="demo-section">
+      <h3>includetext - 是否显示人眼可读文本</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>includetext: true (默认)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" :includetext="true" />
+        </div>
+        <div class="demo-item">
+          <p>includetext: false</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" :includetext="false" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>alttext - 替代显示文本</h3>
+      <p class="section-desc">不改变条码逻辑，仅改变显示的字</p>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>alttext: '' (默认，显示原始值)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" />
+        </div>
+        <div class="demo-item">
+          <p>alttext: '自定义文本'</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" alttext="自定义文本" />
+        </div>
+        <div class="demo-item">
+          <p>alttext: 'Product Code: ABC123'</p>
+          <j-barcode
+            v-model="code"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            alttext="Product Code: ABC123"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>textfont - 字体</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>textfont: 'OCR-B' (默认)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textfont="OCR-B" />
+        </div>
+        <div class="demo-item">
+          <p>textfont: 'OCR-A'</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textfont="OCR-A" />
+        </div>
+        <div class="demo-item">
+          <p>textfont: 'Helvetica'</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textfont="Helvetica" />
+        </div>
+        <div class="demo-item">
+          <p>textfont: 'Courier'</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textfont="Courier" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>textsize - 字体大小</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>textsize: 8</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" :textsize="8" />
+        </div>
+        <div class="demo-item">
+          <p>textsize: 10 (默认)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" :textsize="10" />
+        </div>
+        <div class="demo-item">
+          <p>textsize: 14</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" :textsize="14" />
+        </div>
+        <div class="demo-item">
+          <p>textsize: 18</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" :textsize="18" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>textxalign - 文本水平对齐</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>textxalign: 'center' (默认)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textxalign="center" />
+        </div>
+        <div class="demo-item">
+          <p>textxalign: 'left'</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textxalign="left" />
+        </div>
+        <div class="demo-item">
+          <p>textxalign: 'right'</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textxalign="right" />
+        </div>
+        <div class="demo-item">
+          <p>textxalign: 'offleft'</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textxalign="offleft" />
+        </div>
+        <div class="demo-item">
+          <p>textxalign: 'offright'</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textxalign="offright" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>textyalign - 文本垂直对齐</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>textyalign: 'bottom' (默认)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textyalign="bottom" />
+        </div>
+        <div class="demo-item">
+          <p>textyalign: 'top'</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textyalign="top" />
+        </div>
+        <div class="demo-item">
+          <p>textyalign: 'above'</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textyalign="above" />
+        </div>
+        <div class="demo-item">
+          <p>textyalign: 'center'</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textyalign="center" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>textxoffset / textyoffset - 文本偏移</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>textxoffset: 0, textyoffset: 0 (默认)</p>
+          <j-barcode
+            v-model="code"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            :textxoffset="0"
+            :textyoffset="0"
+          />
+        </div>
+        <div class="demo-item">
+          <p>textxoffset: 10, textyoffset: 0</p>
+          <j-barcode
+            v-model="code"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            :textxoffset="10"
+            :textyoffset="0"
+          />
+        </div>
+        <div class="demo-item">
+          <p>textxoffset: 0, textyoffset: 5</p>
+          <j-barcode
+            v-model="code"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            :textxoffset="0"
+            :textyoffset="5"
+          />
+        </div>
+        <div class="demo-item">
+          <p>textxoffset: -10, textyoffset: -5</p>
+          <j-barcode
+            v-model="code"
+            bcid="code128"
+            :height="15"
+            :scale="2"
+            :textxoffset="-10"
+            :textyoffset="-5"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>textcolor - 文本颜色</h3>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <p>textcolor: '' (默认，跟随barcolor)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" />
+        </div>
+        <div class="demo-item">
+          <p>textcolor: 'ff0000' (红色)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textcolor="ff0000" />
+        </div>
+        <div class="demo-item">
+          <p>textcolor: '0066cc' (蓝色)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textcolor="0066cc" />
+        </div>
+        <div class="demo-item">
+          <p>textcolor: '00aa00' (绿色)</p>
+          <j-barcode v-model="code" bcid="code128" :height="15" :scale="2" textcolor="00aa00" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const code = ref('1234567890')
+</script>
+
+<style scoped>
+.props-demo-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+}
+
+.demo-section h3 {
+  margin-bottom: 10px;
+  color: #303133;
+  font-size: 18px;
+  border-left: 4px solid #409eff;
+  padding-left: 10px;
+}
+
+.section-desc {
+  margin-bottom: 20px;
+  color: #909399;
+  font-size: 13px;
+}
+
+.demo-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
+}
+
+.demo-item {
+  padding: 15px;
+  border: 1px solid #e4e7ed;
+  border-radius: 6px;
+  background-color: #ffffff;
+}
+
+.demo-item p {
+  margin: 0 0 10px 0;
+  font-size: 13px;
+  color: #606266;
+  font-weight: 500;
+}
+
+.demo-item :deep(.j-barcode) {
+  display: flex;
+  justify-content: center;
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+</style>

package/docs/examples/button/basic.vue

@@ -1,7 +1,7 @@
-<template>
-  <div style="display: flex; gap: 8px; flex-wrap: wrap">
-    <j-button icon="mdi:search" label="Search" />
-    <j-button type="primary" icon="mdi:add" label="Add" />
-    <j-button type="dashed" icon="mdi:settings-outline" label="Settings" />
-  </div>
-</template>
+<template>
+  <div style="display: flex; gap: 8px; flex-wrap: wrap">
+    <j-button icon="mdi:search" label="Search" />
+    <j-button type="primary" icon="mdi:add" label="Add" />
+    <j-button type="dashed" icon="mdi:settings-outline" label="Settings" />
+  </div>
+</template>

package/docs/examples/button/disabled.vue

@@ -1,42 +1,42 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 12px">
-    <div style="display: flex; gap: 8px; flex-wrap: wrap">
-      <j-button disabled label="Default Disabled" />
-      <j-button type="primary" disabled label="Primary Disabled" />
-      <j-button type="dashed" disabled label="Dashed Disabled" />
-      <j-button type="text" disabled label="Text Disabled" />
-      <j-button type="link" disabled label="Link Disabled" />
-      <j-button type="outline" disabled label="Outline Disabled" />
-    </div>
-    <div style="display: flex; gap: 8px; flex-wrap: wrap">
-      <j-button status="success" disabled label="Success Disabled" />
-      <j-button status="warning" disabled label="Warning Disabled" />
-      <j-button status="danger" disabled label="Danger Disabled" />
-    </div>
-    <div style="display: flex; gap: 8px; flex-wrap: wrap">
-      <j-button type="primary" status="success" disabled label="Primary Success Disabled" />
-      <j-button type="primary" status="warning" disabled label="Primary Warning Disabled" />
-      <j-button type="primary" status="danger" disabled label="Primary Danger Disabled" />
-    </div>
-    <div style="display: flex; gap: 8px; flex-wrap: wrap">
-      <j-button type="dashed" status="success" disabled label="Dashed Success Disabled" />
-      <j-button type="dashed" status="warning" disabled label="Dashed Warning Disabled" />
-      <j-button type="dashed" status="danger" disabled label="Dashed Danger Disabled" />
-    </div>
-    <div style="display: flex; gap: 8px; flex-wrap: wrap">
-      <j-button type="text" status="success" disabled label="Text Success Disabled" />
-      <j-button type="text" status="warning" disabled label="Text Warning Disabled" />
-      <j-button type="text" status="danger" disabled label="Text Danger Disabled" />
-    </div>
-    <div style="display: flex; gap: 8px; flex-wrap: wrap">
-      <j-button type="link" status="success" disabled label="Link Success Disabled" />
-      <j-button type="link" status="warning" disabled label="Link Warning Disabled" />
-      <j-button type="link" status="danger" disabled label="Link Danger Disabled" />
-    </div>
-    <div style="display: flex; gap: 8px; flex-wrap: wrap">
-      <j-button type="outline" status="success" disabled label="Outline Success Disabled" />
-      <j-button type="outline" status="warning" disabled label="Outline Warning Disabled" />
-      <j-button type="outline" status="danger" disabled label="Outline Danger Disabled" />
-    </div>
-  </div>
-</template>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 12px">
+    <div style="display: flex; gap: 8px; flex-wrap: wrap">
+      <j-button disabled label="Default Disabled" />
+      <j-button type="primary" disabled label="Primary Disabled" />
+      <j-button type="dashed" disabled label="Dashed Disabled" />
+      <j-button type="text" disabled label="Text Disabled" />
+      <j-button type="link" disabled label="Link Disabled" />
+      <j-button type="outline" disabled label="Outline Disabled" />
+    </div>
+    <div style="display: flex; gap: 8px; flex-wrap: wrap">
+      <j-button status="success" disabled label="Success Disabled" />
+      <j-button status="warning" disabled label="Warning Disabled" />
+      <j-button status="danger" disabled label="Danger Disabled" />
+    </div>
+    <div style="display: flex; gap: 8px; flex-wrap: wrap">
+      <j-button type="primary" status="success" disabled label="Primary Success Disabled" />
+      <j-button type="primary" status="warning" disabled label="Primary Warning Disabled" />
+      <j-button type="primary" status="danger" disabled label="Primary Danger Disabled" />
+    </div>
+    <div style="display: flex; gap: 8px; flex-wrap: wrap">
+      <j-button type="dashed" status="success" disabled label="Dashed Success Disabled" />
+      <j-button type="dashed" status="warning" disabled label="Dashed Warning Disabled" />
+      <j-button type="dashed" status="danger" disabled label="Dashed Danger Disabled" />
+    </div>
+    <div style="display: flex; gap: 8px; flex-wrap: wrap">
+      <j-button type="text" status="success" disabled label="Text Success Disabled" />
+      <j-button type="text" status="warning" disabled label="Text Warning Disabled" />
+      <j-button type="text" status="danger" disabled label="Text Danger Disabled" />
+    </div>
+    <div style="display: flex; gap: 8px; flex-wrap: wrap">
+      <j-button type="link" status="success" disabled label="Link Success Disabled" />
+      <j-button type="link" status="warning" disabled label="Link Warning Disabled" />
+      <j-button type="link" status="danger" disabled label="Link Danger Disabled" />
+    </div>
+    <div style="display: flex; gap: 8px; flex-wrap: wrap">
+      <j-button type="outline" status="success" disabled label="Outline Success Disabled" />
+      <j-button type="outline" status="warning" disabled label="Outline Warning Disabled" />
+      <j-button type="outline" status="danger" disabled label="Outline Danger Disabled" />
+    </div>
+  </div>
+</template>