gy-ui-plus 1.0.6 → 1.0.7

package/package.json

@@ -5,7 +5,7 @@
   },
   "author": "zyj",
   "license": "MIT",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "private": false,
   "type": "module",
   "main": "dist/gy-ui-plus.umd.js",
@@ -38,10 +38,9 @@
   "scripts": {
     "lib": "vite build",
     "deploy": "deploy.sh",
-    "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
-    "preview": "vite preview",
-    "build-only": "vite build",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
     "type-check": "vue-tsc --build",
     "lint:oxlint": "oxlint . --fix -D correctness --ignore-path .gitignore",
     "lint:eslint": "eslint . --fix --cache",
@@ -49,20 +48,17 @@
     "format": "prettier --write --experimental-cli src/"
   },
   "dependencies": {
-    "sortablejs": "1.15.0",
     "axios": "^1.13.2",
     "element-plus": "^2.13.1",
-    "vue": "^3.5.25",
+    "sortablejs": "1.15.0",
     "vue-router": "^4.6.3"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.2",
-    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-dts": "^3.0.0",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
     "@prettier/plugin-oxc": "^0.0.5",
     "@tsconfig/node24": "^24.0.3",
     "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vitejs/plugin-vue-jsx": "^5.1.3",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/tsconfig": "^0.8.1",
     "eslint": "^9.39.1",
@@ -75,7 +71,12 @@
     "sass": "^1.97.1",
     "typescript": "~5.9.0",
     "vite": "^7.2.4",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-dts": "^3.0.0",
     "vite-plugin-vue-devtools": "^8.0.5",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vitepress": "^1.6.4",
+    "vue": "^3.5.27",
     "vue-tsc": "^3.1.5"
   }
 }

package/packages/button/src/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-tooltip v-if="tip" :content="tip" :placement="placement" v-bind="tipProps">
+    <el-button v-bind="$attrs" class="gy-button-tip" @click="handleClick">
+      <slot />
+    </el-button>
+  </el-tooltip>
+  <el-button v-else v-bind="$attrs" @click="handleClick">
+    <slot />
+  </el-button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { GyButtonSelfProps as GyButtonProps } from './type'
+
+defineOptions({
+  name: 'GyButton',
+})
+
+const props = withDefaults(defineProps<GyButtonProps>(), {
+  time: 1000,
+  tip: '',
+  placement: 'top',
+  tipProps: () => ({}),
+  isDebounce: true,
+})
+
+// 抛出事件
+const emits = defineEmits(['click'])
+
+const record = ref(0)
+
+const handleClick = () => {
+  if (!props.isDebounce) return emits('click')
+  const newTime = new Date()
+  if (newTime.getTime() - record.value > props.time) {
+    emits('click')
+  }
+  record.value = newTime.getTime()
+}
+</script>

package/packages/button/src/type.ts

@@ -0,0 +1,11 @@
+import type { ButtonProps } from "element-plus"
+import type { Mutable } from "element-plus/es/utils"
+
+export interface GyButtonSelfProps {
+  time?: number
+  tip?: string
+  placement?: string
+  tipProps?: Record<string, any>
+  isDebounce?: boolean
+}
+export type GyButtonProps = GyButtonSelfProps & Partial<Mutable<ButtonProps>>

package/packages/index.ts

@@ -2,8 +2,9 @@ import type { Component, App } from 'vue'
 // import ElementPlus from 'element-plus'
 // import 'element-plus/dist/index.css'
 // import locale from 'element-plus/lib/locale/lang/zh-cn' // 因element-plus默认是英文，我们指定一下默认中文
-import GyButton from './gy-button/src/index.vue'
-import GyTable from './gy-table/src/index.vue'
+import GyButton from './button/src/index.vue'
+import GyTable from './table/src/index.vue'
+import GyLayoutPage from './layout-page/src/index.vue'
 
 // 存储组件列表
 const components: {
@@ -11,6 +12,7 @@ const components: {
 } = {
   GyButton,
   GyTable,
+  GyLayoutPage,
 }
 // 插件声明：声明所有插件
 // 插件注册：在 Vue 项目的入口文件中，通过 ( app.use(插件) ) 进行注册
@@ -28,7 +30,7 @@ const install: any = (app: any, router?: any) => {
 }
 
 // 按需引入
-export { GyButton, GyTable }
+export { GyButton, GyTable, GyLayoutPage }
 export default {
   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
   install,

package/packages/layout-page/index.ts

@@ -0,0 +1,4 @@
+import LayoutPage from "./src/index.vue"
+export type { GyLayoutPageProps } from "./src/index.vue"
+
+export const GyLayoutPage = LayoutPage

package/packages/layout-page/src/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div
+    ref="GyLayoutPageRef"
+    class="gy_layout_page"
+    :class="{ layout_page_no_margin: isNoMargin }"
+    @scroll="(e: any) => (scrollTop = e.target.scrollTop)"
+  >
+    <slot />
+    <div class="back_to_top" v-if="showGoTopButton">
+      <div v-if="isShowGoTopButton" @click="backToTop">
+        <el-icon v-bind="{ size: 24, ...$attrs }"><CaretTop /></el-icon>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { onActivated, onMounted, ref, watch } from 'vue'
+import { CaretTop } from '@element-plus/icons-vue'
+defineOptions({
+  name: 'GyLayoutPage',
+})
+
+export interface GyLayoutPageProps {
+  keepScrollDisabled?: boolean
+  isNoMargin?: boolean
+  showGoTopButton?: boolean
+  scrollToTop?: number
+}
+
+const props = withDefaults(defineProps<GyLayoutPageProps>(), {
+  keepScrollDisabled: false,
+  isNoMargin: false,
+  showGoTopButton: true,
+  scrollToTop: 100,
+})
+const isShowGoTopButton = ref(false)
+
+const GyLayoutPageRef = ref(null)
+const scrollTop = ref(0)
+watch(
+  () => scrollTop.value,
+  (newVal) => {
+    if (newVal > props.scrollToTop) {
+      isShowGoTopButton.value = true
+    } else {
+      isShowGoTopButton.value = false
+    }
+  }
+)
+const backToTop = () => {
+  scrollTop.value = 0
+  ;(GyLayoutPageRef.value as any).scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  })
+}
+onMounted(() => {
+  const pageItems = (GyLayoutPageRef.value as any).querySelectorAll('.gy_layout_page_item')
+  if (pageItems.length === 2) {
+    pageItems[0].style.marginBottom = '8px'
+  }
+  if (pageItems.length > 2) {
+    pageItems.forEach((item: any) => {
+      item.style.marginBottom = '8px'
+    })
+    pageItems[pageItems.length - 1].style.marginBottom = '0'
+  }
+})
+
+onActivated(() => {
+  if (!props.keepScrollDisabled) {
+    ;(GyLayoutPageRef.value as any).scrollTop = scrollTop
+  }
+})
+</script>

package/packages/layout-page/style/index.ts

@@ -0,0 +1 @@
+import "./layout-page.scss"

package/packages/layout-page/style/layout-page.scss

@@ -0,0 +1,37 @@
+.t_layout_page {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  .back_to_top {
+    position: absolute;
+    right: 10px;
+    bottom: 100px;
+    z-index: 100;
+    box-shadow: 0 5px 6px 2px rgba(0, 0, 0, 0.5);
+    background: #fff;
+    border-radius: 5px;
+    opacity: 0.6;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    > div {
+      cursor: pointer;
+      height: 40px;
+      width: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .el-icon {
+        color: #9b59b6;
+      }
+    }
+  }
+}
+.layout_page_no_margin {
+  padding: 0;
+}

package/packages/table/index.ts

@@ -0,0 +1,5 @@
+import Table from "./src/index.vue"
+export * from "./src/tableProps"
+export * from "./src/useExpose"
+
+export const GyTable = Table

package/packages/table/src/GyTableColumn.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-table-column
+    v-if="typeof item.isShowCol == 'function' ? item.isShowCol(item) : !item.isShowCol"
+    :prop="item.prop"
+    :label="item.label"
+    :type="item.type"
+    :align="item.align || align"
+    :min-width="item['min-width'] || item.minWidth"
+    :width="item.width"
+    :fixed="item.fixed"
+  >
+    <template #header v-if="item.renderHeader">
+      <render-header :column="item" :render="item.renderHeader" />
+    </template>
+    <template v-for="(val, index) of item.children">
+      <gy-table-column v-if="val.children" :key="index" :item="val" v-bind="$attrs">
+        <template v-for="(_index, name) in slots" v-slot:[name]="data">
+          <slot :name="name" v-bind="data"></slot>
+        </template>
+      </gy-table-column>
+      <el-table-column
+        v-else
+        :key="val.prop"
+        :prop="val.prop"
+        :label="val.label"
+        :min-width="val['min-width'] || val.minWidth"
+        :width="val.width"
+        :sortable="val.sortable || val.sort || sortable"
+        :align="val.align || align"
+        :fixed="val.fixed"
+        :formatter="val.formatter"
+        v-if="typeof val.isShowCol == 'function' ? val.isShowCol(val) : !val.isShowCol"
+        v-bind="{ 'show-overflow-tooltip': true, ...val.bind, ...$attrs }"
+      >
+        <template #header v-if="val.renderHeader">
+          <render-header :column="val" :render="val.renderHeader" />
+        </template>
+        <template #default="scope">
+          <!-- render渲染 -->
+          <template v-if="val.render">
+            <render-col :column="val" :row="scope.row" :render="val.render" :index="scope.$index" />
+          </template>
+          <!-- 自定义插槽 -->
+          <template v-if="val.slotNameMerge">
+            <slot :name="val.slotNameMerge" :scope="scope"></slot>
+          </template>
+          <!-- 单个单元格编辑 -->
+          <template v-if="val.canEdit">
+            <single-edit-cell
+              :isShowRules="false"
+              :configEdit="val.configEdit"
+              v-model="scope.row[val.prop]"
+              :prop="val.prop"
+              :scope="scope"
+              @handleEvent="({ type, val }:any) => emits('handleEvent', type, val, scope.$index)"
+              v-bind="$attrs"
+            >
+              <template v-for="(_index, name) in slots" v-slot:[name]="data">
+                <slot :name="name" v-bind="data"></slot>
+              </template>
+            </single-edit-cell>
+          </template>
+          <div v-if="!val.render && !val.slotNameMerge && !val.canEdit && !val.formatter">
+            {{ scope.row[val.prop] }}
+          </div>
+        </template>
+      </el-table-column>
+    </template>
+  </el-table-column>
+</template>
+
+<script setup lang="tsx">
+import SingleEditCell from './singleEditCell.vue'
+import RenderCol from './renderCol.vue'
+import RenderHeader from './renderHeader.vue'
+import { useSlots } from 'vue'
+defineOptions({
+  name: 'GyTableColumn',
+})
+defineProps({
+  item: {
+    type: Object,
+    default: () => {
+      return {}
+    },
+    required: true,
+  },
+  align: {
+    type: String,
+    default: 'center',
+  },
+  sortable: {
+    type: [Boolean, String],
+  },
+})
+// 抛出事件
+const emits = defineEmits(['handleEvent'])
+// 获取所有插槽
+const slots = useSlots()
+</script>