feat: @pureadmin/table3.0.0版本nuxt3示例代码提交

.github/workflows/ci.yml

@@ -0,0 +1,36 @@
+name: Build and Deploy
+permissions:
+  contents: write
+on:
+  push:
+    branches:
+      - main
+jobs:
+  deploy:
+    concurrency: ci-${{ github.ref }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: "20"
+          registry-url: https://registry.npmjs.com/
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+
+      - name: Install and Build
+        run: |
+          pnpm install --no-frozen-lockfile
+          pnpm generate
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: dist
+          clean: true

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist

.npmrc

@@ -0,0 +1,4 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
+shell-emulator=true
+legacy-peer-deps=true

.prettierignore

@@ -0,0 +1,7 @@
+dist
+.nuxt
+.output
+.vscode
+.DS_Store
+node_modules
+pnpm-lock.yaml

.prettierrc.js

@@ -0,0 +1,9 @@
+// @ts-check
+
+/** @type {import("prettier").Config} */
+export default {
+  bracketSpacing: true,
+  singleQuote: false,
+  arrowParens: "avoid",
+  trailingComma: "none"
+};

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "bradlc.vscode-tailwindcss",
+    "esbenp.prettier-vscode",
+    "lokalise.i18n-ally",
+    "Vue.volar"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+    "i18n-ally.localesPaths": "locales",
+    "i18n-ally.keystyle": "nested",
+    "i18n-ally.sortKeys": true,
+    "i18n-ally.namespace": true,
+    "i18n-ally.enabledParsers": [
+        "yaml",
+        "js"
+    ],
+    "i18n-ally.sourceLanguage": "en",
+    "i18n-ally.displayLanguage": "zh-CN",
+    "i18n-ally.enabledFrameworks": [
+        "vue"
+    ],
+    "iconify.excludes": [
+        "el"
+    ]
+}

README.md

@@ -1,2 +1 @@
-# pure-admin-table-nuxt3
-@pureadmin/table在nuxt3中的示例
+[在线预览](https://pure-admin.github.io/pure-admin-table-nuxt3/)

app.vue

@@ -0,0 +1,3 @@
+<template>
+  <TableDemo />
+</template>

components/TableDemo.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const tableRef = ref();
+const {
+  empty,
+  dayIcon,
+  darkIcon,
+  chineseIcon,
+  englishIcon,
+  locale,
+  spacer,
+  loading,
+  columns,
+  dataList,
+  language,
+  tableSize,
+  pagination,
+  tableHeight,
+  loadingConfig,
+  paginationSmall,
+  paginationAlign,
+  t,
+  rowClick,
+  onEmpty,
+  onChange,
+  onRefresh,
+  handleUpdate,
+  handleDelete,
+  pageSizeChange,
+  getTableMethods,
+  pageCurrentChange,
+  handleSelectionChange,
+  isDark,
+  toggleDark
+} = useColumns(tableRef);
+</script>
+
+<template>
+  <el-config-provider size="small">
+    <el-space class="pure-space" wrap :spacer="spacer">
+      <el-switch
+        v-model="isDark"
+        inline-prompt
+        size="default"
+        :active-icon="dayIcon"
+        :inactive-icon="darkIcon"
+        @change="toggleDark"
+      />
+      <el-switch
+        v-model="language"
+        inline-prompt
+        size="default"
+        :active-icon="chineseIcon"
+        :inactive-icon="englishIcon"
+        @change="locale = language ? 'zh' : 'en'"
+      />
+      <el-button type="primary" @click="onRefresh">
+        {{ t("button.refresh") }}
+      </el-button>
+      <el-button type="primary" @click="onEmpty">
+        {{ t("button.empty") }}
+      </el-button>
+      <el-tooltip :content="t('text.console')">
+        <el-button type="primary" @click="getTableMethods">
+          {{ t("button.methods") }}
+        </el-button>
+      </el-tooltip>
+      <div class="pure-radio">
+        <p class="pure-small">{{ t("text.size") }}</p>
+        <el-radio-group v-model="tableSize">
+          <el-radio-button label="large">large</el-radio-button>
+          <el-radio-button label="default">default</el-radio-button>
+          <el-radio-button label="small">small</el-radio-button>
+        </el-radio-group>
+      </div>
+      <div class="pure-radio">
+        <p class="pure-small">{{ t("text.page") }}</p>
+        <el-radio-group v-model="paginationSmall" @change="onChange">
+          <el-radio-button :label="false">no small</el-radio-button>
+          <el-radio-button :label="true">small</el-radio-button>
+        </el-radio-group>
+      </div>
+      <div class="pure-radio">
+        <p class="pure-small">{{ t("text.align") }}</p>
+        <el-radio-group v-model="paginationAlign">
+          <el-radio-button label="right">right</el-radio-button>
+          <el-radio-button label="center">center</el-radio-button>
+          <el-radio-button label="left">left</el-radio-button>
+        </el-radio-group>
+      </div>
+    </el-space>
+  </el-config-provider>
+
+  <PureTable
+    ref="tableRef"
+    :loading="loading"
+    :loadingConfig="loadingConfig"
+    :size="tableSize as any"
+    :height="tableHeight"
+    border
+    row-key="id"
+    alignWhole="center"
+    showOverflowTooltip
+    :data="
+      dataList.slice(
+        (pagination.currentPage - 1) * pagination.pageSize,
+        pagination.currentPage * pagination.pageSize
+      )
+    "
+    :columns="columns"
+    :pagination="pagination"
+    :header-cell-style="{
+      background: 'var(--el-table-row-hover-bg-color)',
+      color: 'var(--el-text-color-primary)'
+    }"
+    @selection-change="handleSelectionChange"
+    @row-click="rowClick"
+    @page-size-change="pageSizeChange"
+    @page-current-change="pageCurrentChange"
+  >
+    <template #empty>
+      <el-empty :description="t('text.empty')" :image-size="60">
+        <template #image>
+          <empty />
+        </template>
+      </el-empty>
+    </template>
+    <template #append>
+      <p style="text-align: center">
+        <el-link
+          type="primary"
+          href="https://github.com/pure-admin/pure-admin-table"
+          target="_blank"
+        >
+          MIT License | Copyright (c) 2022-present, pure-admin
+        </el-link>
+      </p>
+    </template>
+    <template #operateHeader> {{ t("table.operate") }}</template>
+    <template #operation="{ row }">
+      <el-button link type="primary" @click="handleUpdate(row)">
+        {{ t("button.edit") }}
+      </el-button>
+      <el-popconfirm :title="t('text.sure')">
+        <template #reference>
+          <el-button link type="primary" @click="handleDelete(row)">
+            {{ t("button.delete") }}
+          </el-button>
+        </template>
+      </el-popconfirm>
+    </template>
+  </PureTable>
+</template>
+
+<style scoped>
+:deep(.el-empty__description) {
+  margin: 0;
+}
+
+.pure-space {
+  margin-bottom: 2px;
+}
+
+.pure-radio {
+  display: flex;
+}
+
+.pure-small {
+  font-size: 14px;
+  line-height: 20px;
+}
+</style>