ci-plus 1.0.1

package/src/sortableTable/utils/sortableTableColumnCell.vue

@@ -0,0 +1,91 @@
+<!-- /*
+* @module sortableTableColumnCell
+* @author : 杨佳贺&卖女孩的小火柴
+* @description : 表格列单元格
+* @version : 1.0.0
+* @since : 创建时间 2023-12-29 13:40:49
+* @lastTime : 2023-12-29 新增默认居中显示属性
+* @lastTime : 2024-01-03 新增默认超出隐藏悬停显示、拖拽改变列宽
+*/ -->
+
+<template>
+  <el-table-column
+    v-if="!data.hide && data.children"
+    v-bind="data.col"
+  >
+    <sortable-table-column-cell
+      v-for="v in data.children || []"
+      :key="v.key"
+      :data="v"
+    />
+  </el-table-column>
+  <el-table-column
+    v-else-if="!data.hide && data.scope"
+    v-bind="data.col"
+    :align="data.col.align || 'center'"
+    :showOverflowTooltip="data.col.showOverflowTooltip || true"
+    :resizable="data.col.resizable || true"
+  >
+    <template #default="scope">
+      {{ data.scope(scope) }}
+    </template>
+    <template #header="header">
+      <component
+        :is="headerVue(header)"
+        :header="header"
+      ></component>
+    </template>
+  </el-table-column>
+  <el-table-column
+    v-else-if="!data.hide && data.component"
+    v-bind="data.col"
+    :align="data.col.align || 'center'"
+    :showOverflowTooltip="data.col.showOverflowTooltip || true"
+    :resizable="data.col.resizable || true"
+  >
+    <template #default="scope">
+      <component
+        :is="data.component(h, scope)"
+        :scope="scope"
+      ></component>
+    </template>
+    <template #header="header">
+      <component
+        :is="headerVue(header)"
+        :header="header"
+      ></component>
+    </template>
+  </el-table-column>
+  <el-table-column
+    v-else-if="!data.hide"
+    v-bind="data.col"
+    :align="data.col.align || 'center'"
+    :showOverflowTooltip="data.col.showOverflowTooltip || true"
+    :resizable="data.col.resizable || true"
+  >
+    <template #header="header">
+      <component
+        :is="headerVue(header)"
+        :header="header"
+      ></component>
+    </template>
+  </el-table-column>
+</template>
+<script setup lang="ts">
+import { Scope, SortColumn } from './interface'
+import { h } from 'vue'
+defineOptions({
+  name: 'sortable-table-column-cell',
+})
+
+const props = defineProps<{
+  data: SortColumn
+}>()
+const headerVue = (header: Pick<Scope<any>, '$index' | 'column'>) => {
+  const item = props.data.header?.(h, header)
+  if (!item) return h('div', props.data.col.label)
+  if (typeof item === 'string') return h('div', item)
+  return item
+}
+</script>
+<style scoped></style>

package/src/sortableTable/utils/sortableTableColumnCell2.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-table-column
+    v-if="!data.hide && data.children"
+    v-bind="data.col"
+  >
+    <sortable-table-column-cell
+      v-for="v in data.children || []"
+      :key="v.key"
+      :data="v"
+    />
+  </el-table-column>
+  <el-table-column
+    v-else-if="!data.hide && data.scope"
+    v-bind="data.col"
+  >
+    <template #default="scope">
+      {{ data.scope(scope) }}
+    </template>
+    <template #header="header">
+      <component
+        :is="headerVue(header)"
+        :header="header"
+      ></component>
+    </template>
+  </el-table-column>
+  <el-table-column
+    v-else-if="!data.hide && data.component"
+    v-bind="data.col"
+  >
+    <template #default="scope">
+      <component
+        :is="data.component(h, scope)"
+        :scope="scope"
+      ></component>
+    </template>
+    <template #header="header">
+      <component
+        :is="headerVue(header)"
+        :header="header"
+      ></component>
+    </template>
+  </el-table-column>
+  <el-table-column
+    v-else-if="!data.hide"
+    v-bind="data.col"
+  >
+    <template #header="header">
+      <component
+        :is="headerVue(header)"
+        :header="header"
+      ></component>
+    </template>
+  </el-table-column>
+</template>
+<script setup lang="ts">
+import { Scope, SortColumn } from './interface'
+import { h } from 'vue'
+defineOptions({
+  name: 'sortable-table-column-cell',
+})
+
+const props = defineProps<{
+  data: SortColumn
+}>()
+const headerVue = (header: Pick<Scope<any>, '$index' | 'column'>) => {
+  const item = props.data.header?.(h, header)
+  if (!item) return h('div', props.data.col.label)
+  if (typeof item === 'string') return h('div', item)
+  return item
+}
+</script>
+<style scoped></style>

package/src/sortableTable/utils/sortableTableDragItem.vue

@@ -0,0 +1,164 @@
+<!-- 2023-12-29 新增显示/隐藏按钮 -->
+
+<template>
+  <draggable
+    class="drag-container"
+    :list="modelValue"
+    chosen-class="hover"
+    handle=".mover"
+    draggable=".item"
+    itemKey="key"
+  >
+    <template
+      #item="{ element, index }: { element: SortColumn; index: number }"
+    >
+      <div :class="{ item: true, 'item-hide': element.hide }">
+        <div class="mover">
+          <el-icon :size="16"><Rank /></el-icon>
+        </div>
+        <div
+          class="title"
+          @click="handleShow(element)"
+        >
+          {{ element.col.label }}
+        </div>
+        <div
+          class="pin"
+          v-if="showPin"
+        >
+          <span
+            v-if="element.col.fixed === true || element.col.fixed === 'left'"
+            @click="element.col.fixed = void 0"
+          >
+            <svg-icon
+              name="regular-left"
+              size="20"
+              color="#2C93FF"
+            ></svg-icon>
+          </span>
+          <span
+            v-else
+            @click="element.col.fixed = 'left'"
+          >
+            <svg-icon
+              name="regular-center"
+              size="20"
+            ></svg-icon>
+          </span>
+          <span
+            v-if="element.col.fixed === 'right'"
+            @click="element.col.fixed = void 0"
+          >
+            <svg-icon
+              name="regular-right"
+              size="20"
+              color="#2C93FF"
+            ></svg-icon>
+          </span>
+          <span
+            v-else
+            @click="element.col.fixed = 'right'"
+          >
+            <svg-icon
+              name="regular-center"
+              size="20"
+            ></svg-icon>
+          </span>
+        </div>
+        <div class="ifshow">
+          <el-button
+            :type="element.hide ? 'primary' : ''"
+            @click="handleShow(element)"
+            size="small"
+          >
+            {{ element.hide ? '显示' : '隐藏' }}
+          </el-button>
+        </div>
+        <sortable-table-drag-item
+          v-if="element.children"
+          v-model="element.children"
+        />
+      </div>
+    </template>
+  </draggable>
+</template>
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon.vue'
+import { computed } from 'vue'
+import draggable from 'vuedraggable'
+import { SortColumn, SortableTableIns } from './interface'
+import { Rank } from '@element-plus/icons-vue'
+const props = defineProps<{
+  modelValue: SortableTableIns['modelValue']
+  showPin?: boolean
+}>()
+const emits = defineEmits(['update:modelValue', 'update:data'])
+const modelValue = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emits('update:modelValue', value)
+  },
+})
+
+// 显示或者隐藏列
+const handleShow = (col: SortColumn) => {
+  // console.log('显示或者隐藏列', col)
+  col.hide = !col.hide
+}
+</script>
+<style scoped lang="scss">
+$hoverBC: rgba(137, 182, 233, 0.5);
+
+.drag-container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+
+  .item {
+    border: 1px solid #f2f2f2;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    width: 100%;
+    .mover,
+    .title {
+      padding: 5px;
+      cursor: pointer;
+      &:hover {
+        background: $hoverBC;
+      }
+    }
+    .title {
+      width: 150px;
+      border-left: 1px solid #f2f2f2;
+      border-right: 1px solid #f2f2f2;
+      overflow: hidden;
+    }
+    .pin {
+      cursor: pointer;
+      > *:hover {
+        background: $hoverBC;
+      }
+      > * {
+        padding: 5px;
+      }
+    }
+    .ifshow {
+      text-align: center;
+      flex: 1;
+      line-height: 32px;
+      .el-button {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .item-hide {
+    background: rgba(218, 218, 218, 0.5);
+  }
+  .hover {
+    background: $hoverBC;
+  }
+}
+</style>

package/src/sortableTable/utils/sortableTableDragItem2.vue

@@ -0,0 +1,144 @@
+<!-- @format -->
+
+<template>
+  <draggable
+    class="drag-container"
+    :list="modelValue"
+    chosen-class="hover"
+    handle=".mover"
+    draggable=".item"
+    itemKey="key"
+  >
+    <template
+      #item="{ element, index }: { element: SortColumn; index: number }"
+    >
+      <div :class="{ item: true, 'item-hide': element.hide }">
+        <div class="mover">
+          <el-icon :size="16"><Rank /></el-icon>
+        </div>
+        <div
+          class="title"
+          @click="element.hide = !element.hide"
+        >
+          {{ element.col.label }}
+        </div>
+        <div
+          class="pin"
+          v-if="showPin"
+        >
+          <span
+            v-if="element.col.fixed === true || element.col.fixed === 'left'"
+            @click="element.col.fixed = void 0"
+          >
+            <!-- <el-icon color="#409EFC" class="no-inherit" > <StarFilled /> </el-icon> -->
+            <svg-icon
+              name="regular-left"
+              size="20"
+              color="#2C93FF"
+            ></svg-icon>
+          </span>
+          <span
+            v-else
+            @click="element.col.fixed = 'left'"
+          >
+            <!-- <el-icon color="#000000" class="no-inherit"><Star /></el-icon> -->
+            <svg-icon
+              name="regular-center"
+              size="20"
+            ></svg-icon>
+          </span>
+          <span
+            v-if="element.col.fixed === 'right'"
+            @click="element.col.fixed = void 0"
+          >
+            <!-- <el-icon color="#409EFC" class="no-inherit"> <StarFilled /> </el-icon> -->
+            <svg-icon
+              name="regular-right"
+              size="20"
+              color="#2C93FF"
+            ></svg-icon>
+          </span>
+          <span
+            v-else
+            @click="element.col.fixed = 'right'"
+          >
+            <!-- <el-icon color="#000000" class="no-inherit"><Star /></el-icon> -->
+            <svg-icon
+              name="regular-center"
+              size="20"
+            ></svg-icon>
+          </span>
+        </div>
+        <sortable-table-drag-item
+          v-if="element.children"
+          v-model="element.children"
+        />
+      </div>
+    </template>
+  </draggable>
+</template>
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon.vue'
+import { computed } from 'vue'
+import draggable from 'vuedraggable'
+import { SortColumn, SortableTableIns } from './interface'
+import { Rank } from '@element-plus/icons-vue'
+const props = defineProps<{
+  modelValue: SortableTableIns['modelValue']
+  showPin?: boolean
+}>()
+const emits = defineEmits(['update:modelValue', 'update:data'])
+const modelValue = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emits('update:modelValue', value)
+  },
+})
+</script>
+<style scoped lang="scss">
+$hoverBC: rgba(137, 182, 233, 0.5);
+
+.drag-container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+
+  .item {
+    border: 1px solid #f2f2f2;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    .mover,
+    .title {
+      padding: 5px;
+      cursor: pointer;
+      &:hover {
+        background: $hoverBC;
+      }
+    }
+    .title {
+      width: 150px;
+      border-left: 1px solid #f2f2f2;
+      border-right: 1px solid #f2f2f2;
+      overflow: hidden;
+    }
+    .pin {
+      cursor: pointer;
+      > *:hover {
+        background: $hoverBC;
+      }
+      > * {
+        padding: 5px;
+      }
+    }
+  }
+  .item-hide {
+    background: rgba(218, 218, 218, 0.5);
+  }
+  .hover {
+    background: $hoverBC;
+  }
+}
+</style>

package/src/sortableTable/utils/sortableTableTs.ts

@@ -0,0 +1,9 @@
+import { SortColumn } from './interface'
+
+export const setKey = (data: SortColumn[], path: number[] = []) => {
+  data.forEach((v, i) => {
+    const path_ = [...path, i]
+    v.key = path_.join('_')
+    if (v.children) setKey(v.children, path_)
+  })
+}

package/src/utils/index.ts

@@ -0,0 +1 @@
+export { default as withInstall } from './withinstall/index';

package/src/utils/withinstall/index.ts

@@ -0,0 +1,12 @@
+import type { App, Plugin } from 'vue';
+export type SFCWithInstall<T> = T & Plugin;
+export default <T>(comp: T) => {
+  (comp as SFCWithInstall<T>).install = (app: App) => {
+    // 当组件是 script setup 的形式时，会自动以为文件名注册，会挂载到组件的__name 属性上
+    // 所以要加上这个条件
+    const name = (comp as any).name || (comp as any).__name;
+    //注册组件
+    app.component(name, comp as SFCWithInstall<T>);
+  };
+  return comp as SFCWithInstall<T>;
+};

package/vite.config.ts

@@ -0,0 +1,76 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import dts from 'vite-plugin-dts';
+// @ts-ignore
+import DefineOptions from 'unplugin-vue-define-options/vite';
+export default defineConfig({
+  test: {
+    environment: 'happy-dom'
+  },
+  build: {
+    //压缩
+    //minify: false,
+    rollupOptions: {
+      //忽略不需要打包的文件和组件库
+      external: ['vue', /\.less/, '@easyest/utils', 'element-plus'],
+      input: ['index.ts'],
+      output: [
+        {
+          //打包格式
+          format: 'es',
+          //打包后文件名
+          entryFileNames: '[name].mjs',
+          //让打包目录和我们目录对应
+          preserveModules: true,
+          exports: 'named',
+          //配置打包根目录
+          dir: '../easyest/es'
+        },
+        {
+          //打包格式
+          format: 'cjs',
+          //打包后文件名
+          entryFileNames: '[name].js',
+          //让打包目录和我们目录对应
+          preserveModules: true,
+          exports: 'named',
+          //配置打包根目录
+          dir: '../easyest/lib'
+        }
+      ]
+    },
+    lib: {
+      entry: './index.ts',
+      name: 'easyest'
+    }
+  },
+  plugins: [
+    vue(),
+    dts({
+      entryRoot: 'src',
+      outputDir: ['../easyest/es/src', '../easyest/lib/src'],
+      //指定使用的tsconfig.json为我们整个项目根目录下,如果不配置,你也可以在components下新建tsconfig.json
+      tsConfigFilePath: '../../tsconfig.json'
+    }),
+    DefineOptions(),
+    {
+      name: 'style',
+      generateBundle(config, bundle) {
+        //这里可以获取打包后的文件目录以及代码code
+        const keys = Object.keys(bundle);
+
+        for (const key of keys) {
+          const bundler: any = bundle[key as any];
+          //rollup内置方法,将所有输出文件code中的.less换成.css,因为我们当时没有打包less文件
+
+          this.emitFile({
+            type: 'asset',
+            fileName: key, //文件名名不变
+            source: bundler.code.replace(/\.less/g, '.css')
+          });
+        }
+      }
+    }
+  ]
+});