npmapps 1.0.17 → 1.0.19

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "npmapps",
-  "version": "1.0.17",
+  "version": "1.0.19",
+  "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -8,5 +9,5 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "description": ""
+  "type": "commonjs"
 }

package/app/sort/SortTableDemo.vue

@@ -1,93 +0,0 @@
-<template>
-  <div>
-    <!-- 演示：工具显隐开关 -->
-    <div style="margin-bottom:12px; display:flex; gap:16px; align-items:center; flex-wrap:wrap;">
-      <el-switch v-model="ui.showMoveUpDown" active-text="显示 上/下移" inactive-text="隐藏 上/下移" />
-      <el-switch v-model="ui.showMoveTopBottom" active-text="显示 置顶/置底" inactive-text="隐藏 置顶/置底" />
-      <el-switch v-model="ui.showMoveTo" active-text="显示 移至" inactive-text="隐藏 移至" />
-    </div>
-
-    <!-- 排序工具栏示例：完整用法 -->
-    <sort-table
-      :data.sync="tableData"
-      :selectData="selectedRows"
-      sortKey="order"
-      rowKey="id"
-      :tableRef="$refs.elTable"
-      :showMoveUpDown="ui.showMoveUpDown"
-      :showMoveTopBottom="ui.showMoveTopBottom"
-      :showMoveTo="ui.showMoveTo"
-    />
-
-    <!-- 表格主体：打开 selection，保留选择 -->
-    <el-table
-      ref="elTable"
-      :data="tableData"
-      row-key="id"
-      :reserve-selection="true"
-      style="width: 100%"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="55" />
-      <el-table-column prop="order" label="排序字段" width="120" />
-      <el-table-column prop="date" label="日期" width="180" />
-      <el-table-column prop="name" label="姓名" width="180" />
-      <el-table-column prop="address" label="地址" />
-    </el-table>
-  </div>
-</template>
-
-<script>
-import sortTable from './sortTable.vue';
-
-const mockApi = () => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve([
-        { id: '1', date: '2016-05-02', name: '王小虎 1', address: '上海市普陀区金沙江路 1518 弄', order: '1' },
-        { id: '2', date: '2016-05-04', name: '王小虎 2', address: '上海市普陀区金沙江路 1517 弄', order: '3' },
-        { id: '3', date: '2016-05-01', name: '王小虎 3', address: '上海市普陀区金沙江路 1519 弄', order: '5' },
-        { id: '4', date: '2016-05-03', name: '王小虎 4', address: '上海市普陀区金沙江路 1520 弄', order: '7' },
-        { id: '5', date: '2016-05-05', name: '王小虎 5', address: '上海市普陀区金沙江路 1521 弄', order: '9' },
-        { id: '6', date: '2016-05-06', name: '王小虎 6', address: '上海市普陀区金沙江路 1522 弄', order: '11' },
-        { id: '7', date: '2016-05-07', name: '王小虎 7', address: '上海市普陀区金沙江路 1523 弄', order: '13' },
-        { id: '8', date: '2016-05-08', name: '王小虎 8', address: '上海市普陀区金沙江路 1524 弄', order: '15' },
-      ]);
-    }, 300);
-  });
-};
-
-export default {
-  name: 'SortTableDemo',
-  components: { sortTable },
-  data() {
-    return {
-      tableData: [],
-      selectedRows: [],
-      ui: {
-        showMoveUpDown: true,
-        showMoveTopBottom: true,
-        showMoveTo: true,
-      },
-    };
-  },
-  async mounted() {
-    await this.load();
-  },
-  methods: {
-    async load() {
-      const res = await mockApi();
-      this.tableData = res;
-    },
-    handleSelectionChange(val) {
-      this.selectedRows = val || [];
-      // 演示：观察选中与数据变化
-      // console.log('selectedRows:', this.selectedRows.map(r => r.id));
-    },
-  },
-};
-</script>
-
-<style scoped>
-</style>
-

package/app/sort/index.vue

@@ -1,109 +0,0 @@
-<template>
-    <div>
-        <sort-table :data.sync="tableData" :selectData="selectedRows" sortKey="order1" :tableRef="$refs.elTable" />
-        <el-table ref="elTable" :data="tableData" row-key="id" :reserve-selection="true" style="width: 100%"
-            @selection-change="handleSelectionChange">
-            <el-table-column type="selection" width="55"></el-table-column>
-            <el-table-column prop="order1" label="排序字段" width="120" />
-            <el-table-column prop="date" label="日期" width="180" />
-            <el-table-column prop="name" label="姓名" width="180" />
-            <el-table-column prop="address" label="地址" />
-        </el-table>
-    </div>
-</template>
-
-<script>
-import sortTable from './sortTable.vue';
-const getDataApi = () => {
-    return new Promise((resolve, reject) => {
-        setTimeout(() => {
-            resolve( [
-                {
-                    id: '1',
-                    date: '2016-05-02',
-                    name: '王小虎1',
-                    address: '上海市普陀区金沙江路 1518 弄',
-                    order1: '2'
-                },
-                {
-                    id: '2',
-                    date: '2016-05-04',
-                    name: '王小虎2',
-                    address: '上海市普陀区金沙江路 1517 弄',
-                    order1: '4'
-                },
-                {
-                    id: '3',
-                    date: '2016-05-01',
-                    name: '王小虎3',
-                    address: '上海市普陀区金沙江路 1519 弄',
-                    order1: '6'
-                },
-                {
-                    id: '4',
-                    date: '2016-05-03',
-                    name: '王小虎4',
-                    address: '上海市普陀区金沙江路 1520 弄',
-                    order1: '8'
-                },
-                {
-                    id: '5',
-                    date: '2016-05-05',
-                    name: '王小虎5',
-                    address: '上海市普陀区金沙江路 1521 弄',
-                    order1: '10'
-                },
-                {
-                    id: '6',
-                    date: '2016-05-06',
-                    name: '王小虎6',
-                    address: '上海市普陀区金沙江路 1522 弄',
-                    order1: '12'
-                },
-                {
-                    id: '7',
-                    date: '2016-05-07',
-                    name: '王小虎7',
-                    address: '上海市普陀区金沙江路 1523 弄',
-                    order1: '14'
-                },
-            ])
-        }, 1000)
-    })
-}
-export default {
-    name: 'sort',
-    data() {
-        return {
-            tableData:[],
-            selectedRows: []
-        }
-    },
-    components: {
-        sortTable
-    },
-    watch: {
-        tableData: {
-            handler(newVal) {
-                console.log(newVal,'new');
-                console.log(this.selectedRows,'selectedRows');
-                
-            },
-            immediate: true
-        }
-    },
-    async mounted() {
-        await this.getTableData()
-    },
-    methods: {
-        async getTableData() {
-            const res = await getDataApi()
-            this.tableData = res
-        },
-        handleSelectionChange(val) {
-            this.selectedRows = val;
-        }
-    }
-
-}
-</script>

package/app/sort/sortTable.md

@@ -1,71 +0,0 @@
-# sortTable 排序工具栏使用文档
-
-## 概述
-- 为 `Element UI` 的 `el-table` 提供通用排序工具栏。
-- 支持拖拽行排序、批量上/下移、置顶/置底、移动到指定位置，并在排序后自动恢复行选择状态。
-
-## 依赖与环境
-- 运行环境：`Vue 2.x + element-ui`
-- 依赖：`sortablejs`
-- 组件路径：`src/views/element/sort/sortTable.vue`
-
-## Props
-- `data: Array` 表格数据源（建议使用 `.sync`）
-- `selectData: Array` 当前选中行数组（来自父级 `@selection-change`）
-- `sortKey: String` 排序字段名，排序后会按槽位顺序写回到该字段；默认 `order`
-- `rowKey: String` 行唯一标识字段名，用于恢复选择；默认 `id`
-- `tableRef: Object` `el-table` 的 `ref`，组件将基于此挂载拖拽与恢复选择
-- `showMoveUpDown: Boolean` 是否显示上移/下移按钮组；默认 `true`
-- `showMoveTopBottom: Boolean` 是否显示置顶/置底按钮组；默认 `true`
-- `showMoveTo: Boolean` 是否显示“移动到指定位置”；默认 `true`
-
-## 事件
-- `update:data(nextArray)` 排序变更后触发，回传最新数组以配合 `.sync`
-
-## 使用步骤
-1. 在父组件中准备 `tableData`（数组）与 `selectedRows`（数组）两个响应式字段。
-2. 渲染 `el-table`，打开行选择列（`type="selection"`），并监听 `@selection-change` 将选中行赋给 `selectedRows`。
-3. 在表格上方（或任意位置）渲染 `<sort-table>`，传入：
-   - `:data.sync="tableData"`
-   - `:selectData="selectedRows"`
-   - `sortKey="order"`（或你的实际字段）
-   - `:tableRef="$refs.elTable"`
-4. 可根据需要通过 `showMoveUpDown`、`showMoveTopBottom`、`showMoveTo` 控制工具按钮可见性。
-
-## 最小示例（片段）
-```vue
-<template>
-  <div>
-    <sort-table
-      :data.sync="tableData"
-      :selectData="selectedRows"
-      sortKey="order"
-      :tableRef="$refs.elTable"
-    />
-    <el-table
-      ref="elTable"
-      :data="tableData"
-      row-key="id"
-      :reserve-selection="true"
-      @selection-change="selectedRows = $event"
-    >
-      <el-table-column type="selection" width="55" />
-      <el-table-column prop="order" label="排序" width="120" />
-      <el-table-column prop="name" label="姓名" />
-    </el-table>
-  </div>
- </template>
-```
-
-## 行为说明
-- 拖拽排序：直接拖动表格行即可更改顺序。
-- 批量移动：当选中多行时，上下移会跳过相邻已选行，保持块内相对顺序。
-- 置顶/置底：抽取选中块放到顶部或底部。
-- 移至：在剩余元素中将选中块插入到目标下标（1 开始）。
-- 选择恢复：排序后自动恢复之前选中的行（依赖 `rowKey`）。
-
-## 常见问题
-- 未传 `tableRef`：拖拽不会生效，且选择恢复不可用。
-- `rowKey` 不唯一：选择恢复可能失败，请确保唯一性。
-- 远端保存：本组件只负责产生新顺序数组，请在父组件中监听 `update:data` 并进行保存。
-

package/app/sort/sortTable.vue

@@ -1,321 +0,0 @@
-<!--
-  组件：sortTable
-  功能：为 Element UI 的 `el-table` 提供通用排序工具栏，支持：
-  - 拖拽行排序（基于 SortableJS，直接拖动表格行）
-  - 批量上移/下移/置顶/置底 已选行
-  - 将选中行一次性移动到指定位置（按序插入）
-  - 排序后自动保持原选择状态（恢复 selection）
-
-  使用约定：
-  - 需要传入 `tableRef`（表格的 ref），以便挂载拖拽和处理选择恢复
-  - 需要指定排序字段 `sortKey`，组件会在 emit 新数据前按该字段写回排序值（slot 顺序）
-  - 通过 `data.sync` 接收并更新列表数据；通过 `selectData` 接收已选中的行数据
-
-  主要 Props：
-  - data: Array            表格当前数据（支持 .sync）
-  - selectData: Array      当前选中行数组（来自父级 @selection-change）
-  - sortKey: String        排序字段名（写回顺序时会按此字段覆盖）
-  - rowKey: String         用于选择恢复的行唯一标识字段名
-  - tableRef: Object       表格组件的 ref（必须传入）
-  - showMoveUpDown: Bool   是否显示上移/下移按钮组
-  - showMoveTopBottom: Bool是否显示置顶/置底按钮组
-  - showMoveTo: Bool       是否显示移动到指定位置的输入与按钮
-
-  事件：
-  - update:data(nextArray) 排序变更后，向父组件回传最新的数组（用于 .sync）
-
-  注意：组件不直接修改传入的 `data` 引用，而是拷贝后计算并通过事件回传；
-        拖拽排序仅在首次挂载时绑定一次。
--->
-<template>
-  <div class="sort-toolbar">
-    <div class="actions">
-      <!-- 上移/下移：跳过相邻已选行，保持块内相对顺序 -->
-      <el-button-group v-if="showMoveUpDown">
-        <el-button size="mini" @click="moveUp" :disabled="disabled">上移</el-button>
-        <el-button size="mini" @click="moveDown" :disabled="disabled">下移</el-button>
-      </el-button-group>
-      <div class="dividerLine" v-if="showMoveTopBottom"></div>
-      <!-- 置顶/置底：将选中行抽出形成块，拼接到顶部或底部 -->
-      <el-button-group v-if="showMoveTopBottom">
-        <el-button size="mini" @click="moveTop" :disabled="disabled">置顶</el-button>
-        <el-button size="mini" @click="moveBottom" :disabled="disabled">置底</el-button>
-      </el-button-group>
-      <div class="dividerLine" v-if="showMoveTo"></div>
-      <!-- 指定位置移动：将选中块插入目标下标（1 开始） -->
-      <div class="move-to" v-if="showMoveTo">
-        <el-input-number
-          size="mini"
-          v-model="targetIndex"
-          :min="1"
-          :max="dataMax"
-          controls-position="right"
-          :controls="false"
-          style="width: 60px"
-        />
-        <el-button size="mini" @click="moveTo" :disabled="disabled || !validTarget"
-          >移至</el-button
-        >
-      </div>
-      <!-- <div class="info">
-        <span>选中 {{ selectedIndices.length }} 项</span>
-      </div> -->
-    </div>
-  </div>
-</template>
-<script>
-import Sortable from "sortablejs";
-export default {
-  name: "sortTable",
-  props: {
-    // 表格数据源（建议使用 .sync）
-    data: {
-      type: Array,
-      default: () => [],
-    },
-    // 当前选中行数组（来自 el-table 的 @selection-change）
-    selectData: {
-      type: Array,
-      default: () => [],
-    },
-    // 排序字段名：会使用内部 slot 顺序写回到每个行的此字段
-    sortKey: {
-      type: String,
-      default: "order",
-    },
-    // 行唯一标识字段：用于排序后选择恢复
-    rowKey: {
-      type: String,
-      default: "id",
-    },
-    // el-table 的 ref，用于挂载拖拽与恢复选择
-    tableRef: {
-      type: Object,
-      default: null,
-    },
-    // 是否显示上移/下移按钮组
-    showMoveUpDown: {
-      type: Boolean,
-      default: true,
-    },
-    // 是否显示置顶/置底按钮组
-    showMoveTopBottom: {
-      type: Boolean,
-      default: true,
-    },
-    // 是否显示“移动到指定位置”功能
-    showMoveTo: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      // 目标位置的 1-based 下标（与 UI 交互）
-      targetIndex: undefined,
-      // 记录初始或最新的排序槽位（从数据中读取 sortKey 形成的顺序）
-      orderSlots: [],
-      // 最近一次排序变更前，选中行的 rowKey 集合，用于恢复 selection
-      lastSelectedKeys: [],
-    };
-  },
-  created() {},
-  watch: {
-    data: {
-      handler(newVal, oldVal) {
-        const d = newVal || [];
-        // 记录当前数据对应的排序槽位（用于写回 sortKey）
-        this.orderSlots = d.map((item) => item[this.sortKey]);
-      },
-      immediate: true,
-    },
-    tableRef: {
-      handler(newVal, oldVal) {
-        // 首次拿到表格 ref 时，挂载拖拽
-        this.attachSortable();
-      },
-      immediate: true,
-    },
-  },
-  computed: {
-    // 将 selectData 映射为在 data 中的下标列表，并按升序返回
-    selectedIndices() {
-      const res = [];
-      const d = this.data || [];
-      const s = this.selectData || [];
-      for (let i = 0; i < s.length; i++) {
-        const idx = d.indexOf(s[i]);
-        if (idx !== -1) res.push(idx);
-      }
-      return res.sort((a, b) => a - b);
-    },
-    // 是否禁用操作：无选择时禁用
-    disabled() {
-      return this.selectedIndices.length === 0;
-    },
-    // 数据最大长度，用于输入校验
-    dataMax() {
-      return (this.data || []).length;
-    },
-    // 目标输入是否合法（1 <= n <= dataMax）
-    validTarget() {
-      const n = Number(this.targetIndex);
-      return Number.isInteger(n) && n >= 1 && n <= this.dataMax;
-    },
-  },
-  methods: {
-    // 挂载拖拽能力：只绑定一次，避免重复实例化
-    attachSortable() {
-      const ref = this.tableRef;
-      if (!ref || !ref.$el) return;
-      const tbody = ref.$el.querySelector(".el-table__body-wrapper tbody");
-      if (!tbody) return;
-      if (this._sortable) return;
-      this._sortable = new Sortable(tbody, {
-        animation: 150,
-        onEnd: (evt) => {
-          if (!evt || evt.oldIndex === undefined || evt.newIndex === undefined) return;
-          const arr = this.data.slice();
-          const [moved] = arr.splice(evt.oldIndex, 1);
-          arr.splice(evt.newIndex, 0, moved);
-          this.emitData(arr);
-        },
-      });
-    },
-    // 按记录的 slot 顺序写回 sortKey，确保排序字段与展示一致
-    applySlotOrder(arr) {
-      const slots = this.orderSlots || [];
-      const n = Math.min(slots.length, arr.length);
-      for (let i = 0; i < n; i++) {
-        if (arr[i]) arr[i][this.sortKey] = slots[i];
-      }
-    },
-    // 统一的回传：写回排序字段、记录选择、触发更新、在 UI 更新后恢复选择
-    emitData(next) {
-      const key = this.rowKey;
-      this.lastSelectedKeys = (this.selectData || []).map((r) => r && r[key]);
-      this.applySlotOrder(next);
-      this.$emit("update:data", next);
-      this.$nextTick(() => {
-        this.restoreSelection();
-      });
-    },
-    // 根据上次记录的 rowKey 集合恢复 el-table 的选择状态
-    restoreSelection() {
-      const ref = this.tableRef;
-      if (!ref || !ref.clearSelection || !ref.toggleRowSelection) return;
-      const key = this.rowKey;
-      const set = new Set(this.lastSelectedKeys || []);
-      ref.clearSelection();
-      const rows = this.data || [];
-      for (let i = 0; i < rows.length; i++) {
-        const row = rows[i];
-        if (set.has(row && row[key])) {
-          ref.toggleRowSelection(row, true);
-        }
-      }
-    },
-    // 上移：按选中下标，从前到后遍历，避免与相邻块冲突
-    moveUp() {
-      if (this.disabled) return;
-      const arr = this.data.slice();
-      const set = new Set(this.selectedIndices);
-      for (let i = 0; i < this.selectedIndices.length; i++) {
-        const idx = this.selectedIndices[i];
-        if (idx > 0 && !set.has(idx - 1)) {
-          const tmp = arr[idx - 1];
-          arr[idx - 1] = arr[idx];
-          arr[idx] = tmp;
-          set.delete(idx);
-          set.add(idx - 1);
-        }
-      }
-      this.emitData(arr);
-    },
-    // 下移：从后到前遍历，避免与相邻块冲突
-    moveDown() {
-      if (this.disabled) return;
-      const arr = this.data.slice();
-      const set = new Set(this.selectedIndices);
-      for (let i = this.selectedIndices.length - 1; i >= 0; i--) {
-        const idx = this.selectedIndices[i];
-        if (idx < arr.length - 1 && !set.has(idx + 1)) {
-          const tmp = arr[idx + 1];
-          arr[idx + 1] = arr[idx];
-          arr[idx] = tmp;
-          set.delete(idx);
-          set.add(idx + 1);
-        }
-      }
-      this.emitData(arr);
-    },
-    // 置顶：抽取选中块 + 其余元素，拼接为 [块, 其余]
-    moveTop() {
-      if (this.disabled) return;
-      const arr = this.data.slice();
-      const block = [];
-      const set = new Set(this.selectedIndices);
-      for (let i = 0; i < arr.length; i++) {
-        if (set.has(i)) block.push(arr[i]);
-      }
-      const rest = arr.filter((_, i) => !set.has(i));
-      const next = block.concat(rest);
-      this.emitData(next);
-    },
-    // 置底：抽取选中块 + 其余元素，拼接为 [其余, 块]
-    moveBottom() {
-      if (this.disabled) return;
-      const arr = this.data.slice();
-      const block = [];
-      const set = new Set(this.selectedIndices);
-      for (let i = 0; i < arr.length; i++) {
-        if (set.has(i)) block.push(arr[i]);
-      }
-      const rest = arr.filter((_, i) => !set.has(i));
-      const next = rest.concat(block);
-      this.emitData(next);
-    },
-    // 移至：在剩余元素中按目标位置（1-based）插入选中块
-    moveTo() {
-      if (this.disabled || !this.validTarget) return;
-      const arr = this.data.slice();
-      const set = new Set(this.selectedIndices);
-      const block = [];
-      for (let i = 0; i < arr.length; i++) {
-        if (set.has(i)) block.push(arr[i]);
-      }
-      const rest = arr.filter((_, i) => !set.has(i));
-      let pos = Number(this.targetIndex) - 1;
-      if (pos < 0) pos = 0;
-      if (pos > rest.length) pos = rest.length;
-      rest.splice(pos, 0, ...block);
-      this.emitData(rest);
-    },
-  },
-};
-</script>
-<style scoped>
-.dividerLine {
-  width: 1px;
-  height: 24px;
-  background-color: #e4e7ed;
-}
-.sort-toolbar {
-  margin-bottom: 12px;
-}
-.actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-.move-to {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.info {
-  color: #909399;
-  font-size: 13px;
-}
-</style>

package/app.md

@@ -1,2 +0,0 @@
-1.0.16 vue3 jsx element-plus文档
-1.0.17  sortTable组件