@a2simcode/ui 0.0.46 → 0.0.48

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

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

package/docs/examples/button/basic.vue

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

package/docs/examples/button/danger-ghost.vue

@@ -0,0 +1,17 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <div style="display: flex; gap: 8px; flex-wrap: wrap">
+      <j-button danger label="Danger Default" />
+      <j-button type="primary" danger label="Danger Primary" />
+      <j-button type="dashed" danger label="Danger Dashed" />
+      <j-button type="text" danger label="Danger Text" />
+      <j-button type="link" danger label="Danger Link" />
+    </div>
+    <div style="background: #999; padding: 16px; display: flex; gap: 8px; flex-wrap: wrap">
+      <j-button ghost label="Ghost Default" />
+      <j-button type="primary" ghost label="Ghost Primary" />
+      <j-button type="dashed" ghost label="Ghost Dashed" />
+      <j-button danger ghost label="Ghost Danger" />
+    </div>
+  </div>
+</template>

package/docs/examples/button/disabled.vue

@@ -0,0 +1,10 @@
+<template>
+  <div style="display: flex; gap: 8px; flex-wrap: wrap">
+    <j-button disabled label="Disabled" />
+    <j-button type="primary" disabled label="Primary Disabled" />
+    <j-button type="dashed" disabled label="Dashed Disabled" />
+    <j-button type="link" disabled label="Link Disabled" />
+    <j-button ghost disabled label="Ghost Disabled" />
+    <j-button danger disabled label="Danger Disabled" />
+  </div>
+</template>

package/docs/examples/button/loading.vue

@@ -0,0 +1,6 @@
+<template>
+  <div style="display: flex; gap: 8px; flex-wrap: wrap">
+    <j-button loading type="primary" label="Loading" />
+    <j-button :loading="{ delay: 500 }" type="primary" label="Delay 500ms" />
+  </div>
+</template>

package/docs/examples/button/shape.vue

@@ -0,0 +1,7 @@
+<template>
+  <div style="display: flex; gap: 8px; flex-wrap: wrap">
+    <j-button type="primary" label="Default" />
+    <j-button shape="round" type="primary" label="Round" />
+    <j-button shape="circle" type="primary" icon="mdi:search" not-label />
+  </div>
+</template>

package/docs/examples/button/size.vue

@@ -0,0 +1,14 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <div style="display: flex; gap: 8px; align-items: center">
+      <j-button size="large" type="primary" label="Large" />
+      <j-button size="default" type="primary" label="Default" />
+      <j-button size="small" type="primary" label="Small" />
+    </div>
+    <div style="display: flex; gap: 8px; align-items: center">
+      <j-button size="large" label="Large" />
+      <j-button size="default" label="Default" />
+      <j-button size="small" label="Small" />
+    </div>
+  </div>
+</template>

package/docs/examples/button/type.vue

@@ -0,0 +1,9 @@
+<template>
+  <div style="display: flex; gap: 8px; flex-wrap: wrap">
+    <j-button type="primary" label="Primary Button" />
+    <j-button label="Default Button" />
+    <j-button type="dashed" label="Dashed Button" />
+    <j-button type="text" label="Text Button" />
+    <j-button type="link" label="Link Button" />
+  </div>
+</template>

package/docs/examples/button-select/basic.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <j-button-select v-model="value" :options="options" />
+    <div style="margin-top: 12px">选中: {{ value }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+
+const options = [
+  { label: '新增', value: 'add', icon: 'material-symbols-light:add' },
+  { label: '导出', value: 'export', icon: 'material-symbols-light:download' },
+  { label: '导入', value: 'import', icon: 'material-symbols-light:upload' },
+  { label: '刷新', value: 'refresh', icon: 'material-symbols-light:refresh' },
+]
+</script>

package/docs/examples/buttons/basic.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <j-buttons :list="buttonList" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const buttonList = ref([
+  {
+    id: 'add',
+    label: '新增',
+    config: {
+      type: 'primary',
+      icon: 'material-symbols-light:add',
+    },
+    click: () => {
+      ElMessage.success('点击了新增按钮')
+    },
+  },
+  {
+    id: 'edit',
+    label: '编辑',
+    config: {
+      icon: 'material-symbols-light:edit-outline',
+    },
+    click: () => {
+      ElMessage.info('点击了编辑按钮')
+    },
+  },
+  {
+    id: 'delete',
+    label: '删除',
+    config: {
+      danger: true,
+      icon: 'material-symbols-light:delete-outline',
+    },
+    click: () => {
+      ElMessage.warning('点击了删除按钮')
+    },
+  },
+])
+</script>

package/docs/examples/buttons/disabled.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <j-buttons :list="buttonList" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const buttonList = ref([
+  {
+    id: 'add',
+    label: '新增',
+    config: {
+      type: 'primary',
+      icon: 'material-symbols-light:add',
+    },
+  },
+  {
+    id: 'edit',
+    label: '编辑（禁用）',
+    config: {
+      icon: 'material-symbols-light:edit-outline',
+      disabled: true,
+    },
+  },
+  {
+    id: 'delete',
+    label: '删除',
+    config: {
+      danger: true,
+      icon: 'material-symbols-light:delete-outline',
+    },
+  },
+])
+</script>

package/docs/examples/buttons/dropdown.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <j-buttons :list="buttonList" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const buttonList = ref([
+  {
+    id: 'add',
+    label: '新增',
+    config: {
+      type: 'primary',
+      icon: 'material-symbols-light:add',
+    },
+    click: () => {
+      ElMessage.success('点击了新增按钮')
+    },
+  },
+  {
+    id: 'more',
+    label: '更多操作',
+    config: {
+      icon: 'material-symbols-light:more-horiz',
+    },
+    children: [
+      {
+        id: 'export',
+        label: '导出',
+        config: {
+          icon: 'material-symbols-light:download',
+        },
+        click: () => {
+          ElMessage.info('点击了导出')
+        },
+      },
+      {
+        id: 'import',
+        label: '导入',
+        config: {
+          icon: 'material-symbols-light:upload',
+        },
+        click: () => {
+          ElMessage.info('点击了导入')
+        },
+      },
+      {
+        id: 'refresh',
+        label: '刷新',
+        config: {
+          icon: 'material-symbols-light:refresh',
+        },
+        click: () => {
+          ElMessage.info('点击了刷新')
+        },
+      },
+    ],
+  },
+])
+</script>

package/docs/examples/buttons/group.vue

@@ -0,0 +1,52 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <j-buttons :list="buttonList" />
+    <div style="color: #666; font-size: 14px">通过设置不同的 groupId，按钮会自动分组显示</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const buttonList = ref([
+  {
+    id: 'add',
+    label: '新增',
+    config: {
+      type: 'primary',
+    },
+    groupId: 'group1',
+    click: () => {
+      ElMessage.success('分组1：新增')
+    },
+  },
+  {
+    id: 'edit',
+    label: '编辑',
+    groupId: 'group1',
+    click: () => {
+      ElMessage.info('分组1：编辑')
+    },
+  },
+  {
+    id: 'delete',
+    label: '删除',
+    config: {
+      danger: true,
+    },
+    groupId: 'group2',
+    click: () => {
+      ElMessage.warning('分组2：删除')
+    },
+  },
+  {
+    id: 'export',
+    label: '导出',
+    groupId: 'group2',
+    click: () => {
+      ElMessage.info('分组2：导出')
+    },
+  },
+])
+</script>

package/docs/examples/buttons/link.vue

@@ -0,0 +1,47 @@
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <div>
+      <div style="margin-bottom: 8px; color: #666">默认按钮:</div>
+      <j-buttons :list="buttonList" />
+    </div>
+    <div>
+      <div style="margin-bottom: 8px; color: #666">链接按钮:</div>
+      <j-buttons :list="buttonList" :is-link="true" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const buttonList = ref([
+  {
+    id: 'add',
+    label: '新增',
+    config: {
+      type: 'primary',
+    },
+    click: () => {
+      ElMessage.success('点击了新增按钮')
+    },
+  },
+  {
+    id: 'edit',
+    label: '编辑',
+    click: () => {
+      ElMessage.info('点击了编辑按钮')
+    },
+  },
+  {
+    id: 'delete',
+    label: '删除',
+    config: {
+      danger: true,
+    },
+    click: () => {
+      ElMessage.warning('点击了删除按钮')
+    },
+  },
+])
+</script>

package/docs/examples/buttons/popup.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <j-buttons :list="buttonList" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, h } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const buttonList = ref([
+  {
+    id: 'open',
+    label: '打开弹窗',
+    config: {
+      type: 'primary',
+      icon: 'material-symbols-light:open-in-new',
+    },
+    click: ({ openLayer }: any) => {
+      openLayer({
+        title: '示例弹窗',
+        width: 600,
+        name: {
+          setup(props: any, { expose }: any) {
+            expose({
+              ok: () => {
+                ElMessage.success('点击了确定')
+                return true
+              },
+            })
+            return () =>
+              h('div', { style: 'padding: 16px' }, '这是一个通过 j-buttons 点击打开的弹窗。')
+          },
+        },
+      })
+    },
+  },
+])
+</script>