@a2simcode/ui 0.0.264 → 0.0.266

package/docs/examples/buttons/link.vue

@@ -1,47 +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: {
-      status: 'danger',
-    },
-    click: () => {
-      ElMessage.warning('点击了删除按钮')
-    },
-  },
-])
-</script>
+<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: {
+      status: 'danger',
+    },
+    click: () => {
+      ElMessage.warning('点击了删除按钮')
+    },
+  },
+])
+</script>

package/docs/examples/buttons/popup.vue

@@ -1,39 +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>
+<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>

package/docs/examples/buttons/size.vue

@@ -1,45 +1,45 @@
-<template>
-  <div style="display: flex; flex-direction: column; gap: 16px">
-    <div>
-      <div style="margin-bottom: 8px; color: #666">Large:</div>
-      <j-buttons :list="buttonList" size="large" />
-    </div>
-    <div>
-      <div style="margin-bottom: 8px; color: #666">Default:</div>
-      <j-buttons :list="buttonList" size="default" />
-    </div>
-    <div>
-      <div style="margin-bottom: 8px; color: #666">Small:</div>
-      <j-buttons :list="buttonList" size="small" />
-    </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',
-      icon: 'material-symbols-light:add',
-    },
-    click: () => {
-      ElMessage.success('点击了新增按钮')
-    },
-  },
-  {
-    id: 'edit',
-    label: '编辑',
-    config: {
-      icon: 'material-symbols-light:edit-outline',
-    },
-    click: () => {
-      ElMessage.info('点击了编辑按钮')
-    },
-  },
-])
-</script>
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px">
+    <div>
+      <div style="margin-bottom: 8px; color: #666">Large:</div>
+      <j-buttons :list="buttonList" size="large" />
+    </div>
+    <div>
+      <div style="margin-bottom: 8px; color: #666">Default:</div>
+      <j-buttons :list="buttonList" size="default" />
+    </div>
+    <div>
+      <div style="margin-bottom: 8px; color: #666">Small:</div>
+      <j-buttons :list="buttonList" size="small" />
+    </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',
+      icon: 'material-symbols-light:add',
+    },
+    click: () => {
+      ElMessage.success('点击了新增按钮')
+    },
+  },
+  {
+    id: 'edit',
+    label: '编辑',
+    config: {
+      icon: 'material-symbols-light:edit-outline',
+    },
+    click: () => {
+      ElMessage.info('点击了编辑按钮')
+    },
+  },
+])
+</script>

package/docs/examples/card-list/basic.vue

@@ -1,70 +1,70 @@
-<template>
-  <div style="padding: 12px">
-    <j-card-list
-      :data-source="list"
-      :load-src="loadSrc"
-      :buttons="buttons"
-      :show-big-edit-button="true"
-      :is-multi-select="true"
-      @click="handleClick"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
-
-const list = ref([
-  { f_Id: '1', f_Name: '卡片 1', img: 'https://picsum.photos/seed/simcode-1/600/400' },
-  { f_Id: '2', f_Name: '卡片 2', img: 'https://picsum.photos/seed/simcode-2/600/400' },
-  { f_Id: '3', f_Name: '卡片 3', img: 'https://picsum.photos/seed/simcode-3/600/400' },
-  { f_Id: '4', f_Name: '卡片 4', img: 'https://picsum.photos/seed/simcode-4/600/400' },
-])
-
-const loadSrc = (row: any) => row.img
-
-const buttons = ref([
-  {
-    id: 'edit',
-    label: '编辑',
-    config: { type: 'primary', icon: 'material-symbols-light:edit-outline' },
-    click: (scope: any) => {
-      ElMessage.info(`点击编辑：${scope?.data?.f_Name || ''}`)
-    },
-  },
-  {
-    id: 'delete',
-    label: '删除',
-    config: { status: 'danger', icon: 'material-symbols-light:delete-outline' },
-    click: (scope: any) => {
-      ElMessage.warning(`点击删除：${scope?.data?.f_Name || ''}`)
-    },
-  },
-  {
-    id: 'more',
-    label: '更多',
-    config: { icon: 'material-symbols-light:more-horiz' },
-    children: [
-      {
-        id: 'copy',
-        label: '复制',
-        click: (scope: any) => {
-          ElMessage.success(`点击复制：${scope?.data?.f_Name || ''}`)
-        },
-      },
-      {
-        id: 'detail',
-        label: '详情',
-        click: (scope: any) => {
-          ElMessage.info(`点击详情：${scope?.data?.f_Name || ''}`)
-        },
-      },
-    ],
-  },
-])
-
-const handleClick = (id: string, payload: any) => {
-  ElMessage.success(`触发 click 事件：${id}（${payload?.item?.f_Name || ''}）`)
-}
-</script>
+<template>
+  <div style="padding: 12px">
+    <j-card-list
+      :data-source="list"
+      :load-src="loadSrc"
+      :buttons="buttons"
+      :show-big-edit-button="true"
+      :is-multi-select="true"
+      @click="handleClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const list = ref([
+  { f_Id: '1', f_Name: '卡片 1', img: 'https://picsum.photos/seed/simcode-1/600/400' },
+  { f_Id: '2', f_Name: '卡片 2', img: 'https://picsum.photos/seed/simcode-2/600/400' },
+  { f_Id: '3', f_Name: '卡片 3', img: 'https://picsum.photos/seed/simcode-3/600/400' },
+  { f_Id: '4', f_Name: '卡片 4', img: 'https://picsum.photos/seed/simcode-4/600/400' },
+])
+
+const loadSrc = (row: any) => row.img
+
+const buttons = ref([
+  {
+    id: 'edit',
+    label: '编辑',
+    config: { type: 'primary', icon: 'material-symbols-light:edit-outline' },
+    click: (scope: any) => {
+      ElMessage.info(`点击编辑：${scope?.data?.f_Name || ''}`)
+    },
+  },
+  {
+    id: 'delete',
+    label: '删除',
+    config: { status: 'danger', icon: 'material-symbols-light:delete-outline' },
+    click: (scope: any) => {
+      ElMessage.warning(`点击删除：${scope?.data?.f_Name || ''}`)
+    },
+  },
+  {
+    id: 'more',
+    label: '更多',
+    config: { icon: 'material-symbols-light:more-horiz' },
+    children: [
+      {
+        id: 'copy',
+        label: '复制',
+        click: (scope: any) => {
+          ElMessage.success(`点击复制：${scope?.data?.f_Name || ''}`)
+        },
+      },
+      {
+        id: 'detail',
+        label: '详情',
+        click: (scope: any) => {
+          ElMessage.info(`点击详情：${scope?.data?.f_Name || ''}`)
+        },
+      },
+    ],
+  },
+])
+
+const handleClick = (id: string, payload: any) => {
+  ElMessage.success(`触发 click 事件：${id}（${payload?.item?.f_Name || ''}）`)
+}
+</script>

package/docs/examples/card-list/selection-pagination.vue

@@ -1,69 +1,69 @@
-<template>
-  <div style="padding: 12px">
-    <div style="margin-bottom: 12px; display: flex; gap: 8px">
-      <j-button type="primary" label="获取选中项" @click="handleGetSelections" />
-      <j-button label="清空选中" @click="handleClear" />
-    </div>
-
-    <j-card-list
-      ref="cardListRef"
-      :data-source="list"
-      :load-src="loadSrc"
-      :is-radio="true"
-      :is-page="true"
-      :page-total="total"
-      v-model:table-page="page"
-      v-model:page-size="pageSize"
-      :page-sizes="[4, 8, 12]"
-      :loading="loading"
-      @load-page-data="handleLoadPageData"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
-
-const loading = ref(false)
-const total = ref(40)
-const page = ref(1)
-const pageSize = ref(4)
-
-const buildList = (p: number, s: number) => {
-  const start = (p - 1) * s + 1
-  return Array.from({ length: s }).map((_, i) => {
-    const id = String(start + i)
-    return {
-      f_Id: id,
-      f_Name: `第 ${id} 条`,
-      img: `https://picsum.photos/seed/simcode-page-${id}/600/400`,
-    }
-  })
-}
-
-const list = ref(buildList(page.value, pageSize.value))
-
-const loadSrc = (row: any) => row.img
-
-const handleLoadPageData = async (data: any) => {
-  loading.value = true
-  page.value = data.page
-  pageSize.value = data.rows
-  await new Promise((r) => setTimeout(r, 300))
-  list.value = buildList(page.value, pageSize.value)
-  loading.value = false
-}
-
-const cardListRef = ref<any>()
-
-const handleGetSelections = () => {
-  const rows = cardListRef.value?.getSelections?.() || []
-  ElMessage.info(`选中：${rows?.[0]?.f_Name || '无'}`)
-}
-
-const handleClear = () => {
-  cardListRef.value?.clearSelection?.()
-  ElMessage.success('已清空')
-}
-</script>
+<template>
+  <div style="padding: 12px">
+    <div style="margin-bottom: 12px; display: flex; gap: 8px">
+      <j-button type="primary" label="获取选中项" @click="handleGetSelections" />
+      <j-button label="清空选中" @click="handleClear" />
+    </div>
+
+    <j-card-list
+      ref="cardListRef"
+      :data-source="list"
+      :load-src="loadSrc"
+      :is-radio="true"
+      :is-page="true"
+      :page-total="total"
+      v-model:table-page="page"
+      v-model:page-size="pageSize"
+      :page-sizes="[4, 8, 12]"
+      :loading="loading"
+      @load-page-data="handleLoadPageData"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const loading = ref(false)
+const total = ref(40)
+const page = ref(1)
+const pageSize = ref(4)
+
+const buildList = (p: number, s: number) => {
+  const start = (p - 1) * s + 1
+  return Array.from({ length: s }).map((_, i) => {
+    const id = String(start + i)
+    return {
+      f_Id: id,
+      f_Name: `第 ${id} 条`,
+      img: `https://picsum.photos/seed/simcode-page-${id}/600/400`,
+    }
+  })
+}
+
+const list = ref(buildList(page.value, pageSize.value))
+
+const loadSrc = (row: any) => row.img
+
+const handleLoadPageData = async (data: any) => {
+  loading.value = true
+  page.value = data.page
+  pageSize.value = data.rows
+  await new Promise((r) => setTimeout(r, 300))
+  list.value = buildList(page.value, pageSize.value)
+  loading.value = false
+}
+
+const cardListRef = ref<any>()
+
+const handleGetSelections = () => {
+  const rows = cardListRef.value?.getSelections?.() || []
+  ElMessage.info(`选中：${rows?.[0]?.f_Name || '无'}`)
+}
+
+const handleClear = () => {
+  cardListRef.value?.clearSelection?.()
+  ElMessage.success('已清空')
+}
+</script>

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

@@ -1,28 +1,28 @@
-<template>
-  <j-cascader-select v-model="value" :options="options" placeholder="请选择" style="width: 300px" />
-  <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref('')
-const options = [
-  {
-    label: '地区',
-    value: 'area',
-    children: [
-      { label: '北京', value: 'beijing' },
-      { label: '上海', value: 'shanghai' },
-    ],
-  },
-  {
-    label: '部门',
-    value: 'department',
-    children: [
-      { label: '技术部', value: 'tech' },
-      { label: '销售部', value: 'sales' },
-    ],
-  },
-]
-</script>
+<template>
+  <j-cascader-select v-model="value" :options="options" placeholder="请选择" style="width: 300px" />
+  <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+const options = [
+  {
+    label: '地区',
+    value: 'area',
+    children: [
+      { label: '北京', value: 'beijing' },
+      { label: '上海', value: 'shanghai' },
+    ],
+  },
+  {
+    label: '部门',
+    value: 'department',
+    children: [
+      { label: '技术部', value: 'tech' },
+      { label: '销售部', value: 'sales' },
+    ],
+  },
+]
+</script>

package/docs/examples/cascader-select/clearable.vue

@@ -1,34 +1,34 @@
-<template>
-  <j-cascader-select
-    v-model="value"
-    :options="options"
-    placeholder="支持清除"
-    style="width: 300px"
-    clearable
-  />
-  <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref('')
-const options = [
-  {
-    label: '地区',
-    value: 'area',
-    children: [
-      { label: '北京', value: 'beijing' },
-      { label: '上海', value: 'shanghai' },
-    ],
-  },
-  {
-    label: '部门',
-    value: 'department',
-    children: [
-      { label: '技术部', value: 'tech' },
-      { label: '销售部', value: 'sales' },
-    ],
-  },
-]
-</script>
+<template>
+  <j-cascader-select
+    v-model="value"
+    :options="options"
+    placeholder="支持清除"
+    style="width: 300px"
+    clearable
+  />
+  <p v-if="value" style="margin-top: 12px; color: #606266">选中的值: {{ value }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+const options = [
+  {
+    label: '地区',
+    value: 'area',
+    children: [
+      { label: '北京', value: 'beijing' },
+      { label: '上海', value: 'shanghai' },
+    ],
+  },
+  {
+    label: '部门',
+    value: 'department',
+    children: [
+      { label: '技术部', value: 'tech' },
+      { label: '销售部', value: 'sales' },
+    ],
+  },
+]
+</script>