easy-elplus 1.0.1 → 1.2.0

package/packages/components/descriptions/src/comp.vue

@@ -1,39 +0,0 @@
-<script setup>
-import { useDynamicComponent } from "@easy-elplus/hooks"
-
-defineOptions({
-  name: "EasyDescriptionsComp"
-})
-
-defineProps({
-  id: {
-    type: String,
-    default: ""
-  },
-  components: {
-    type: [String, Number, Function, Object],
-    default: ""
-  },
-  props: {
-    type: Object,
-    default: () => ({})
-  }
-})
-
-const descriptionsData = defineModel("modelValue")
-
-const { getComponent } = useDynamicComponent()
-</script>
-
-<template>
-  <slot :name="components">
-    <component
-      v-if="id"
-      :is="getComponent(components, descriptionsData)"
-      v-model="descriptionsData[id]"
-      v-bind="props"
-    />
-
-    <component v-else :is="getComponent(components)" v-bind="props" />
-  </slot>
-</template>

package/packages/components/descriptions/src/descriptions.vue

@@ -1,138 +0,0 @@
-<script setup>
-import { h, computed } from "vue"
-import { ElDescriptions, ElDescriptionsItem } from "element-plus"
-import { isObject, isFunction } from "@easy-elplus/utils"
-import Comp from "./comp.vue"
-
-defineOptions({
-  name: "EasyDescriptions"
-})
-
-const props = defineProps({
-  items: {
-    type: Array,
-    default: () => []
-  }
-})
-
-const descriptionsData = defineModel("modelValue")
-
-// 内部处理单个列表的函数
-const normalizeItems = list => {
-  return list.reduce((prev, item) => {
-    const isHidden = isFunction(item.hidden) ? item.hidden(descriptionsData.value) : item.hidden
-
-    if (isHidden) return prev
-
-    prev.push({
-      ...item,
-      label: isObject(item.label)
-        ? item.label
-        : {
-            components: item.label
-          },
-      value: isObject(item.value)
-        ? item.value
-        : {
-            id: item.value,
-            components: item.value
-          }
-    })
-
-    return prev
-  }, [])
-}
-
-const renderList = computed(() => {
-  if (!props.items || props.items.length === 0) return []
-
-  // 判断是否为分组模式：第一项包含 items 字段且是一个数组
-  // 为了兼容性更好，这里假设如果 item 内部有 items 属性，则认为是分组
-  const isGroup = props.items.some(item => item.items && Array.isArray(item.items))
-
-  if (isGroup) {
-    // 分组模式
-    return props.items
-      .filter(group => {
-        const isHidden = isFunction(group.hidden) ? group.hidden(descriptionsData.value) : group.hidden
-        return !isHidden
-      })
-      .map(group => {
-        // 分离出内部使用的属性，其他的属性放入 bindProps 透传给 el-descriptions
-        // eslint-disable-next-line no-unused-vars
-        const { extra, items, hidden, ...rest } = group
-        return {
-          ...group,
-          rows: normalizeItems(group.items),
-          bindProps: rest
-        }
-      })
-  } else {
-    // 单组模式：包装成一个默认分组
-    return [
-      {
-        rows: normalizeItems(props.items),
-        bindProps: {}
-      }
-    ]
-  }
-})
-
-defineExpose({})
-</script>
-
-<template>
-  <div class="epl-descriptions">
-    <template v-for="(group, index) in renderList" :key="index">
-      <el-descriptions v-bind="{ ...$attrs, ...group.bindProps }" style="margin-bottom: 20px">
-        <!-- 标题插槽 (支持作用域插槽透传 group 数据) -->
-        <template v-if="group.title || $slots.title" #title>
-          <template v-if="group.title">
-            {{ group.title }}
-          </template>
-          <slot v-else name="title" :group="group" :index="index" />
-        </template>
-
-        <!-- 操作区插槽 (支持作用域插槽透传 group 数据) -->
-        <template v-if="group.extra || $slots.extra" #extra>
-          <template v-if="group.extra">
-            {{ group.extra }}
-          </template>
-          <slot v-else name="extra" :group="group" :index="index" />
-        </template>
-
-        <el-descriptions-item v-for="item in group.rows" :key="item.label" v-bind="item">
-          <template #label>
-            <component
-              :is="
-                h(
-                  Comp,
-                  {
-                    modelValue: descriptionsData,
-                    ...item.label
-                  },
-                  $slots
-                )
-              "
-            />
-          </template>
-
-          <template #default>
-            <component
-              :is="
-                h(
-                  Comp,
-                  {
-                    modelValue: descriptionsData,
-                    ...item.value
-                  },
-                  $slots
-                )
-              "
-            />
-          </template>
-        </el-descriptions-item>
-      </el-descriptions>
-    </template>
-  </div>
-</template>

package/packages/components/index.js

@@ -1,6 +0,0 @@
-export * from "./button"
-export * from "./descriptions"
-export * from "./table"
-export * from "./dialog"
-export * from "./ImageUpload"
-export * from "./FileUpload"

package/packages/components/package.json

@@ -1,20 +0,0 @@
-{
-  "name": "@easy-elplus/components",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "packageManager": "pnpm@10.28.2",
-  "dependencies": {
-    "lodash-es": "^4.17.23"
-  },
-  "devDependencies": {
-    "@element-plus/icons-vue": "^2.3.2",
-    "element-plus": "^2.13.2"
-  }
-}

package/packages/components/table/index.js

@@ -1,11 +0,0 @@
-// 用来整合组件的，最终实现导出组件
-
-import { withInstall } from "@easy-elplus/utils"
-import table from "./src/table.vue"
-
-// 通过 withInstall 方法给 button 添加了一个 Vue3 插件所需的 install 方法
-export const EasyTable = withInstall(table)
-// 可以通过 app.use 来使用，也可以通过 import 方式单独使用
-
-export default EasyTable
-export * from "./src/table.vue"

package/packages/components/table/src/table.vue

@@ -1,300 +0,0 @@
-<template>
-  <div class="table-container">
-    <div class="table">
-      <el-table
-        id="iTable"
-        ref="iTableRef"
-        :data="tableData"
-        v-bind="options"
-        height="100%"
-        style="width: 100%"
-        @sort-change="sortChange"
-        @selection-change="handleSelectionChange"
-      >
-        <template v-for="(column, index) in processedHeaders" :key="index + (column.prop || '')">
-          <el-table-column v-if="isColumnVisible(column)" :min-width="headSpanFit(column)" v-bind="column">
-            <!-- 渲染插槽  key是el-table-column插槽名称, value 是传递的插槽名称 -->
-            <template v-for="(value, key) in column.slot" #[key]="scope">
-              <slot :name="value" v-bind="scope"> </slot>
-            </template>
-
-            <!-- 渲染默认内容 无插槽 -->
-            <template v-if="!column.slot" #default="scope">
-              <!-- 渲染render -->
-              <template v-if="column.render">
-                <!-- 如果render返回的是字符串 -->
-                <div v-if="isString(getRenderContent(column, scope))">
-                  <div v-html="getRenderContent(column, scope)"></div>
-                </div>
-                <!-- 如果render返回的是组件 -->
-                <component v-else :is="column.render" v-bind="scope" :row="scope.row" :index="scope.$index" />
-              </template>
-
-              <!-- 渲染formatter -->
-              <template v-else-if="column.formatter">
-                <span v-html="column.formatter(scope.row, column)"></span>
-              </template>
-
-              <!-- 渲染默认内容 -->
-              <template v-else-if="!column.type">
-                <span>{{ scope.row[column.prop] ?? "--" }}</span>
-              </template>
-            </template>
-          </el-table-column>
-        </template>
-
-        <!-- 操作列 -->
-        <el-table-column
-          v-if="operates.list?.length"
-          label="操作"
-          align="left"
-          :width="operates.width"
-          :fixed="operates.fixed"
-        >
-          <template #default="scope">
-            <div class="operate-group">
-              <!-- 渲染外部按钮 -->
-              <template v-for="(item, idx) in getVisibleButtons(scope.row).outside" :key="idx">
-                <el-button
-                  v-bind="item"
-                  :type="item.type || 'primary'"
-                  :size="item.size || 'small'"
-                  @click.stop="item.method(scope.row, scope.$index)"
-                >
-                  {{ item.label }}
-                  <el-icon v-if="item.icon" class="el-icon--right">
-                    <component :is="item.icon" />
-                  </el-icon>
-                </el-button>
-              </template>
-
-              <!-- 渲染下拉按钮 -->
-              <el-dropdown v-if="getVisibleButtons(scope.row).inside.length" class="custom-dropdown" trigger="click">
-                <el-button link size="small" class="custom-text">
-                  <el-icon :size="18"><MoreFilled /></el-icon>
-                </el-button>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item
-                      v-for="(item, idx) in getVisibleButtons(scope.row).inside"
-                      :key="idx"
-                      v-bind="item"
-                      @click="item.method(scope.row, scope.$index)"
-                    >
-                      {{ item.label }}
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-
-    <!-- 分页 -->
-    <div v-if="!hidden" class="pagination-container" :style="{ justifyContent: paginationJustify }">
-      <el-pagination
-        v-model:current-page="currentPage"
-        v-model:page-size="pageSize"
-        :background="background"
-        :layout="layout"
-        :page-sizes="pageSizes"
-        :pager-count="pagerCount"
-        :total="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref, useSlots, watch } from "vue"
-import { MoreFilled } from "@element-plus/icons-vue"
-import { scrollTo } from "./scrollTo"
-import { isString, isFunction } from "@easy-elplus/utils"
-
-defineOptions({ name: "EasyTable" })
-
-const props = defineProps({
-  columns: { type: Array, default: () => [] },
-  tableData: { type: Array, default: () => [] },
-  total: { type: Number, default: 0 },
-  page: { type: Number, default: 1 },
-  options: {
-    type: Object,
-    default: () => ({ stripe: false, highlightCurrentRow: false, border: true })
-  },
-  limit: { type: Number, default: 20 },
-  pageSizes: { type: Array, default: () => [10, 20, 30, 50] },
-  pagerCount: {
-    type: Number,
-    default: () => (typeof document !== "undefined" && document.body.clientWidth < 992 ? 5 : 7)
-  },
-  layout: { type: String, default: "total, sizes, prev, pager, next, jumper" },
-  background: { type: Boolean, default: true },
-  autoScroll: { type: Boolean, default: true },
-  hidden: { type: Boolean, default: false },
-  operates: { type: Object, default: () => ({ list: [] }) },
-  paginationPosition: { type: String, default: "right" }
-})
-
-const emit = defineEmits(["update:page", "update:limit", "pagination", "sortChange", "handleSelectionChange"])
-
-const slots = useSlots()
-const iTableRef = ref(null)
-const processedHeaders = ref([])
-
-/** 1. 逻辑优化：使用 watch 监听 columns 变化，避免在 onBeforeUpdate 中过度计算 **/
-watch(
-  () => [props.columns, slots],
-  () => {
-    processedHeaders.value = props.columns.map(column => {
-      const col = { ...column }
-      if (!col.key) col.key = col.prop
-
-      // 匹配插槽逻辑保持不变
-      Object.keys(slots).forEach(key => {
-        const res = key.match(/^(\S+)-(\S+)/)
-
-        if (res && res[2] === col.key) {
-          col.slot = { ...col.slot, [res[1]]: res[0] }
-        }
-      })
-
-      return col
-    })
-  },
-  { immediate: true, deep: true }
-)
-
-/** 2. 工具函数 **/
-
-// 计算表头宽度
-const headSpanFit = column => {
-  const labelLen = column?.label?.length || 0
-  return Math.max(labelLen * 20, 100)
-}
-
-// 判断列是否显示
-const isColumnVisible = column => {
-  if (isFunction(column.show)) return column.show()
-  return column.show !== false
-}
-
-// 获取渲染内容
-const getRenderContent = (column, scope) => {
-  return isFunction(column.render) ? column.render(scope) : column.render
-}
-
-// 获取可见按钮
-const getVisibleButtons = row => {
-  const list = (props.operates?.list || []).filter(item => {
-    return isFunction(item.show) ? item.show(row) : item.show !== false
-  })
-  return list.length > 3
-    ? {
-        outside: list.slice(0, 2),
-        inside: list.slice(2)
-      }
-    : {
-        outside: list,
-        inside: []
-      }
-}
-
-/** 3. 分页计算属性 **/
-// 当前页码
-const currentPage = computed({
-  get: () => props.page,
-  set: val => emit("update:page", val)
-})
-
-// 每页条数
-const pageSize = computed({
-  get: () => props.limit,
-  set: val => emit("update:limit", val)
-})
-
-// 分页对齐方式
-const paginationJustify = computed(() => {
-  const map = { left: "flex-start", center: "center", right: "flex-end" }
-  return map[props.paginationPosition] || "flex-end"
-})
-
-/** 4. 事件处理 **/
-// 改变每页条数
-const handleSizeChange = val => {
-  if (currentPage.value * val > props.total) currentPage.value = 1
-  emit("pagination", { page: currentPage.value, limit: val })
-  if (props.autoScroll) scrollTo(0, 800)
-}
-
-// 改变当前页
-const handleCurrentChange = val => {
-  emit("pagination", { page: val, limit: pageSize.value })
-  if (props.autoScroll) scrollTo(0, 800)
-}
-
-// 改变排序
-const sortChange = args => emit("sortChange", args)
-
-// 改变选择
-const handleSelectionChange = val => emit("handleSelectionChange", val)
-
-defineExpose({ iTableRef })
-</script>
-
-<style scoped lang="scss">
-.table-container {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 400px;
-
-  .table {
-    flex: 1;
-    position: relative;
-    :deep(.el-table) {
-      position: absolute;
-      height: 100%;
-    }
-  }
-}
-
-.pagination-container {
-  padding: 16px 0;
-  display: flex;
-}
-
-.operate-group {
-  display: flex;
-  align-items: center;
-
-  .el-button + .el-button,
-  .el-button + .custom-dropdown {
-    margin-left: 16px;
-    position: relative;
-
-    &::before {
-      content: "";
-      position: absolute;
-      left: -8px;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 1px;
-      height: 12px;
-      background-color: #dcdfe6;
-    }
-  }
-
-  :deep(.custom-text) {
-    color: #606266;
-    padding: 0;
-    &:hover {
-      color: #409eff;
-    }
-  }
-}
-</style>

package/packages/constants/event.js

@@ -1,3 +0,0 @@
-export const UPDATE_MODEL_EVENT = "update:modelValue"
-export const CHANGE_EVENT = "change"
-export const INPUT_EVENT = "input"

package/packages/constants/index.js

@@ -1 +0,0 @@
-export * from "./event"

package/packages/constants/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "@easy-elplus/constants",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "packageManager": "pnpm@10.28.2"
-}

package/packages/easy-elplus/index.js

@@ -1,36 +0,0 @@
-import Button from "@easy-elplus/components/button"
-import Descriptions from "@easy-elplus/components/descriptions"
-import Table from "@easy-elplus/components/table"
-import ImageUpload from "@easy-elplus/components/ImageUpload"
-import FileUpload from "@easy-elplus/components/FileUpload"
-import { setGlobalAppContext } from "@easy-elplus/utils"
-
-// 组件列表
-const components = [Button, Descriptions, Table, ImageUpload, FileUpload]
-
-// 是否已安装标识（防止重复 install）
-const INSTALLED_KEY = Symbol("INSTALLED_KEY")
-
-// 组件库插件
-const EasyElementPlus = {
-  install(app) {
-    // 防止重复安装
-    if (app[INSTALLED_KEY]) return
-
-    app[INSTALLED_KEY] = true
-
-    // 保存全局应用上下文，供 EasyDialog 等工具使用
-    // 这样即使在非组件上下文中调用，也能访问到主应用的插件和全局组件
-    setGlobalAppContext(app._context)
-
-    // 逐个安装组件
-    components.forEach(component => {
-      app.use(component)
-    })
-  }
-}
-
-export default EasyElementPlus
-
-// 具名导出所有组件，支持按需导入
-export * from "@easy-elplus/components"

package/packages/easy-elplus/package.json

@@ -1,62 +0,0 @@
-{
-  "name": "easy-elplus",
-  "version": "1.0.0",
-  "description": "A Component Library for Vue 3",
-  "author": {
-    "name": "Mr.Jia",
-    "email": "jiagongzi0625@gmail.com"
-  },
-  "keywords": [
-    "element-plus",
-    "element",
-    "component library",
-    "ui framework",
-    "ui",
-    "vue"
-  ],
-  "homepage": "https://github.com/jiayc4215/easy-elplus",
-  "bugs": {
-    "url": "https://github.com/jiayc4215/easy-elplus/issues"
-  },
-  "license": "MIT",
-  "main": "lib/index.js",
-  "module": "es/index.mjs",
-  "unpkg": "dist/index.full.js",
-  "jsdelivr": "dist/index.full.js",
-  "exports": {
-    ".": {
-      "import": "./es/index.mjs",
-      "require": "./lib/index.js"
-    },
-    "./es": "./es/index.mjs",
-    "./lib": "./lib/index.js",
-    "./dist/*": "./dist/*",
-    "./es/*": "./es/*",
-    "./lib/*": "./lib/*",
-    "./*": "./*"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/jiayc4215/easy-elplus.git"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "dependencies": {
-    "@vue/shared": "catalog:",
-    "lodash-es": "^4.17.23"
-  },
-  "engines": {
-    "node": ">= 4.0.0",
-    "npm": ">= 3.0.0"
-  },
-  "peerDependencies": {
-    "vue": "^3.3.0"
-  },
-  "browserslist": [
-    "> 1%",
-    "not ie 11",
-    "not op_mini all"
-  ]
-}

package/packages/hooks/index.js

@@ -1 +0,0 @@
-export * from "./src/useDynamicComponent"

package/packages/hooks/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "@easy-elplus/hooks",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "packageManager": "pnpm@10.28.2"
-}

package/packages/utils/index.js

@@ -1,3 +0,0 @@
-export * from "./vue/install.js"
-export * from "./vue/appContext.js"
-export * from "./type.js"

package/packages/utils/package.json

@@ -1,16 +0,0 @@
-{
-  "name": "@easy-elplus/utils",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "packageManager": "pnpm@10.28.2",
-  "dependencies": {
-    "@vue/shared": "catalog:"
-  }
-}

package/packages/utils/type.js

@@ -1,6 +0,0 @@
-export { isArray, isFunction, isObject, isDate, isPromise, isSymbol, isPlainObject } from "@vue/shared"
-
-export const isUndefined = val => typeof val === "undefined"
-export const isBoolean = val => typeof val === "boolean"
-export const isNumber = val => typeof val === "number"
-export const isString = val => typeof val === "string"