ff-ui-plus 2.0.7

package/package.json

@@ -0,0 +1,149 @@
+{
+  "name": "ff-ui-plus",
+  "version": "2.0.7",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Vue3 中基于Element-plus二次封装基础组件文档",
+  "author": "zhangpengfeia",
+  "license": "MIT",
+  "private": false,
+  "workspaces": {
+    "packages": [
+      "packages/*",
+      "docs"
+    ]
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "dayjs": "^1.11.7",
+    "element-plus": "^2.7.8",
+    "esbuild": "0.24.0",
+    "lodash-es": "^4.17.21",
+    "sortablejs": "^1.15.0",
+    "vite": "^5.2.9",
+    "vue": "^3.4.21",
+    "vue-tsc": "1.8.27",
+    "@ff-ui-plus/resolver": "0.0.2",
+    "@ff-ui-plus/components": "0.0.1",
+    "@ff-ui-plus/eslint-config": "0.0.2",
+    "@ff-ui-plus/theme-chalk": "0.0.7",
+    "@ff-ui-plus/hooks": "0.0.1",
+    "@ff-ui-plus/locale": "0.0.1",
+    "@ff-ui-plus/types": "1.0.0",
+    "@ff-ui-plus/utils": "0.0.2"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.6.3",
+    "@commitlint/config-conventional": "^17.6.3",
+    "@inquirer/prompts": "^1.2.3",
+    "@pnpm/find-workspace-packages": "^6.0.8",
+    "@pnpm/types": "^9.0.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@types/fs-extra": "^11.0.1",
+    "@types/jsdom": "^21.1.1",
+    "@types/lodash-es": "^4.17.7",
+    "@types/node": "^20.1.4",
+    "@types/sortablejs": "^1.15.1",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vitest/coverage-v8": "^1.5.0",
+    "@vue/test-utils": "^2.4.5",
+    "autoprefixer": "^10.4.14",
+    "chalk": "4.1.2",
+    "commitizen": "^4.3.0",
+    "compare-func": "^2.0.0",
+    "consola": "^3.1.0",
+    "conventional-changelog-cli": "^3.0.0",
+    "conventional-changelog-custom-config": "^0.3.1",
+    "cssnano": "^6.0.1",
+    "cz-conventional-changelog": "^3.3.0",
+    "cz-customizable": "^7.0.0",
+    "cz-git": "^1.6.1",
+    "enquirer": "^2.3.6",
+    "execa": "5.1.0",
+    "fast-glob": "^3.2.12",
+    "fs-extra": "^11.1.1",
+    "husky": "^8.0.3",
+    "jsdom": "^22.1.0",
+    "lint-staged": "^13.2.2",
+    "minimist": "^1.2.8",
+    "ora": "^6.3.1",
+    "postcss": "^8.4.24",
+    "prettier": "^2.8.8",
+    "rimraf": "^5.0.0",
+    "rollup": "^4.14.3",
+    "rollup-plugin-banner2": "^1.2.3",
+    "rollup-plugin-esbuild": "^6.1.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^4.0.0",
+    "sass": "1.32.13",
+    "sass-loader": "13.1.0",
+    "semver": "^7.5.1",
+    "tsx": "^4.7.2",
+    "typescript": "^5.4.5",
+    "unbuild": "^2.0.0",
+    "vite-plugin-dts": "^3.8.3",
+    "vitest": "^1.5.0"
+  },
+  "peerDependencies": {
+    "element-plus": "^2.7.8",
+    "vue": "^3.2.0"
+  },
+  "engines": {
+    "node": ">= 18"
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-git",
+      "useEmoji": true
+    }
+  },
+  "lint-staged": {
+    "*.{vue,js,ts,jsx,tsx}": [
+      "pnpm run lint"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zhangpengfeia/ff-ui-plus.git"
+  },
+  "homepage": "https://zhangpengfeia.github.io/ff-ui-plus/",
+  "keywords": [
+    "element-ui",
+    "element-plus",
+    "vite",
+    "vite3",
+    "vitepress",
+    "vue",
+    "vue3",
+    "ff-ui",
+    "ff-ui-plus",
+    "wocwin",
+    "二次封装组件",
+    "封装组件",
+    "components"
+  ],
+  "scripts": {
+    "preinstall": "npx only-allow pnpm",
+    "postinstall": "pnpm stub:build && pnpm build:utils && pnpm build:eslint-config",
+    "stub:build": "pnpm run -C scripts/build stub",
+    "build": "pnpm run clean && pnpm run build:theme && pnpm run build:main",
+    "build:resolver": "rimraf packages/resolver/dist && pnpm run -C packages/resolver build",
+    "build:utils": "pnpm run -C packages/utils build",
+    "build:main": "pnpm run -C scripts/build build",
+    "build:theme": "pnpm run -C packages/theme-chalk build",
+    "build:eslint-config": "pnpm run -C packages/eslint-config build",
+    "clean": "rimraf dist && rimraf packages/theme-chalk/dist",
+    "pub": "npm publish --registry=https://registry.npmjs.org/",
+    "deploy": "./deploy.sh",
+    "resolver": "resolver.sh",
+    "lib-pub": "lib.sh",
+    "prettier": "prettier --write \"packages/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
+    "docs:prettier": "prettier --write \"docs/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
+    "docs:dev": "pnpm run -C docs dev",
+    "docs:build": "pnpm run -C docs build",
+    "lint:lint-staged": "lint-staged"
+  }
+}

package/packages/components/adaptive-page/index.ts

@@ -0,0 +1,5 @@
+import AdaptivePage from "./src/index.vue"
+
+export * from "./src/type"
+
+export const TAdaptivePage = AdaptivePage

package/packages/components/adaptive-page/src/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="t_adaptive_page">
+    <div
+      :style="{ width: isShow('leftContent') ? `${leftWidth}px` : '0px' }"
+      v-if="isShow('leftContent')"
+      class="left_content"
+    >
+      <div class="left_tree">
+        <slot name="leftContent" />
+      </div>
+    </div>
+    <t-layout-page class="right_content" :style="pageStyle">
+      <t-layout-page-item class="table_search" :style="queryPageStyle" v-if="$attrs.opts">
+        <t-query-condition v-bind="$attrs" ref="TQueryConditionPage">
+          <template v-for="(_index, name) in slots" #[name]="data">
+            <slot :name="name" v-bind="data" />
+          </template>
+        </t-query-condition>
+      </t-layout-page-item>
+      <slot name="content" />
+      <t-layout-page-item
+        class="table_main"
+        :class="{ 't_table_self-filling': isTTableSelfFilling }"
+        :style="tablePageStyle"
+      >
+        <t-table
+          v-bind="{ columnSetting, name, ...$attrs }"
+          :isSlotToolbar="isShow('toolbar')"
+          :isSlotTitle="isShow('title')"
+          ref="TTablePage"
+        >
+          <template v-for="(_index, name) in slots" #[name]="data">
+            <slot :name="name" v-bind="data" />
+          </template>
+        </t-table>
+      </t-layout-page-item>
+    </t-layout-page>
+    <slot name="footer" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TLayoutPage from "../../layout-page/src/index.vue"
+import TLayoutPageItem from "../../layout-page-item/src/index.vue"
+import TTable from "../../table/src/index.vue"
+import TQueryCondition from "../../query-condition/src/index.vue"
+import { getCurrentInstance, onMounted, ref, useSlots } from "vue"
+import type { TAdaptivePageProps } from "./type"
+
+defineOptions({
+  name: "TAdaptivePage"
+})
+withDefaults(defineProps<TAdaptivePageProps>(), {
+  leftWidth: 260,
+  pageStyle: () => ({}),
+  columnSetting: false,
+  name: "",
+  queryPageStyle: () => ({}),
+  tablePageStyle: () => ({}),
+  isTTableSelfFilling: false
+})
+
+const slots = useSlots()
+
+const isShow = (name: string) => {
+  return Object.keys(slots).includes(name)
+}
+
+const instance = getCurrentInstance() as any
+const TQueryConditionPage = ref<InstanceType<typeof TQueryCondition> | null>(null)
+const TTablePage = ref<InstanceType<typeof TTable> | null>(null)
+
+onMounted(() => {
+  const exposedObj = {
+    ...TQueryConditionPage.value?.$.exposed,
+    ...TTablePage.value?.$.exposed
+  }
+  const entries = Object.entries(exposedObj)
+  for (const [key, value] of entries) {
+    instance.exposed[key] = value
+  }
+})
+
+defineExpose({ ...instance.exposed, TQueryConditionPage, TTablePage })
+</script>

package/packages/components/adaptive-page/src/type.ts

@@ -0,0 +1,9 @@
+export interface TAdaptivePageProps {
+  leftWidth?: number | string
+  pageStyle?: Record<string, string>
+  columnSetting?: boolean
+  name?: string // 表格开启columnSetting后，设置缓存数据唯一标识
+  queryPageStyle?: Record<string, string>
+  tablePageStyle?: Record<string, string>
+  isTTableSelfFilling?: boolean
+}

package/packages/components/adaptive-page/style/css.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/t-adaptive-page.css"

package/packages/components/adaptive-page/style/index.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/src/adaptive-page.scss"

package/packages/components/button/index.ts

@@ -0,0 +1,5 @@
+import Button from "./src/index.vue"
+
+export * from "./src/type"
+
+export const TButton = Button

package/packages/components/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="t-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 { TButtonSelfProps as TButtonProps } from "./type"
+
+defineOptions({
+  name: "TButton"
+})
+
+const props = withDefaults(defineProps<TButtonProps>(), {
+  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/components/button/src/type.ts

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

package/packages/components/button/style/css.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/t-button.css"

package/packages/components/button/style/index.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/src/button.scss"

package/packages/components/chart/index.ts

@@ -0,0 +1,5 @@
+import Chart from "./src/index.vue"
+
+export * from "./src/type"
+
+export const TChart = Chart

package/packages/components/chart/src/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="t-chart" v-bind="$attrs">
+    <div v-show="!formatEmpty" class="t-chart-container" :id="id" ref="echartRef" />
+    <slot v-if="formatEmpty" name="empty">
+      <el-empty v-bind="$attrs" :description="description" />
+    </slot>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  onMounted,
+  getCurrentInstance,
+  ref,
+  watch,
+  nextTick,
+  onBeforeUnmount,
+  markRaw,
+  useAttrs,
+  computed
+} from "vue"
+import { useResizeObserver } from "@vueuse/core"
+import { debounce, toLine } from "../../utils"
+import type { TChartProps } from "./type"
+
+defineOptions({
+  name: "TChart"
+})
+const { proxy } = getCurrentInstance() as any
+
+const props = withDefaults(defineProps<TChartProps>(), {
+  options: () => ({}),
+  id: () => Math.random().toString(36).substring(2, 8),
+  theme: "",
+  isEmpty: false,
+  description: "暂无数据"
+})
+
+const echartRef = ref<HTMLDivElement>()
+const chart = ref()
+const emits = defineEmits()
+const events = Object.entries(useAttrs())
+
+// 图表初始化
+const renderChart = () => {
+  chart.value = markRaw(proxy.$echarts.init(echartRef.value, props.theme))
+  setOption(props.options)
+  // 返回chart实例
+  emits("chart", chart.value)
+
+  // 监听图表事件
+  events.forEach(([key, value]) => {
+    if (key.startsWith("on") && !key.startsWith("onChart")) {
+      const on = toLine(key).substring(3)
+      chart.value.on(on, (...args: any) => emits(on, ...args))
+    }
+  })
+
+  // 监听元素变化
+  useResizeObserver(echartRef.value, resizeChart)
+  // 大小自适应
+  // window.addEventListener('resize', resizeChart)
+}
+
+// 重绘图表函数
+const resizeChart = debounce(
+  () => {
+    chart.value?.resize()
+  },
+  300,
+  true
+)
+
+// 设置图表函数
+const setOption = debounce(
+  async data => {
+    if (!chart.value) return
+    chart.value.setOption(data, true, true)
+    await nextTick()
+    resizeChart()
+  },
+  300,
+  true
+)
+
+const formatEmpty = computed(() => {
+  if (typeof props.isEmpty === "function") {
+    return props.isEmpty(props.options)
+  }
+  return props.isEmpty
+})
+
+watch(
+  () => props.options,
+  async nw => {
+    await nextTick()
+    setOption(nw)
+  },
+  { deep: true }
+)
+
+watch(
+  () => props.theme,
+  async () => {
+    chart.value.dispose()
+    renderChart()
+  }
+)
+
+onMounted(() => {
+  renderChart()
+})
+onBeforeUnmount(() => {
+  // 取消监听
+  // window.removeEventListener('resize', resizeChart)
+  // 销毁echarts实例
+  chart.value.dispose()
+  chart.value = null
+})
+</script>

package/packages/components/chart/src/type.ts

@@ -0,0 +1,7 @@
+export interface TChartProps {
+  options?: Record<string, any>
+  id?: string
+  theme?: string
+  isEmpty?: boolean | ((options: Record<string, any>) => boolean)
+  description?: string
+}

package/packages/components/chart/style/css.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/t-chart.css"

package/packages/components/chart/style/index.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/src/chart.scss"

package/packages/components/checkbox/index.ts

@@ -0,0 +1,3 @@
+import Checkbox from "./src/index.vue"
+
+export const TCheckbox = Checkbox

package/packages/components/checkbox/src/checkbox.d.ts

@@ -0,0 +1,5 @@
+export interface OptionsProps {
+  value: string
+  label: string
+  disabled: string
+}

package/packages/components/checkbox/src/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-checkbox-group v-bind="$attrs" :size="size">
+    <slot>
+      <component
+        v-for="(item, index) in options"
+        v-bind="item"
+        :is="checkType"
+        :key="index"
+        :value="item[optionsProps.value]"
+        :border="border"
+        :disabled="item[optionsProps.disabled]"
+      >
+        <slot :name="item.slot" v-bind="item">
+          {{ item[optionsProps.label] }}
+        </slot>
+      </component>
+    </slot>
+  </el-checkbox-group>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue"
+import type { PropType } from "vue"
+import type { OptionsProps } from "./checkbox"
+defineOptions({
+  name: "TCheckbox"
+})
+const checkProps = defineProps({
+  type: {
+    type: String as PropType<"check" | "button">,
+    validator: (value: string) => ["check", "button"].includes(value),
+    default: "check"
+  },
+  options: {
+    type: Array as any,
+    default: () => []
+  },
+  size: {
+    type: String as PropType<"large" | "default" | "small">,
+    validator: (value: string) => ["large", "default", "small"].includes(value),
+    default: "default"
+  },
+  border: {
+    type: Boolean,
+    default: false
+  },
+  props: {
+    type: Object,
+    default: () => ({})
+  }
+})
+const checkType = computed(() => {
+  const obj = {
+    check: "el-checkbox",
+    button: "el-checkbox-button"
+  }
+  return obj[checkProps.type] ?? "el-checkbox"
+})
+const optionsProps = ref<OptionsProps>({
+  ...{
+    value: "value",
+    label: "label",
+    disabled: "disabled"
+  },
+  ...checkProps.props
+})
+</script>

package/packages/components/checkbox/style/css.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/t-checkbox.css"

package/packages/components/checkbox/style/index.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/src/checkbox.scss"

package/packages/components/date-picker/index.ts

@@ -0,0 +1,5 @@
+import DatePicker from "./src/index.vue"
+
+export * from "./src/type"
+
+export const TDatePicker = DatePicker