fit2cloud-ui-plus 0.0.1-beta.7 → 1.0.0-beta.1

package/src/components/speed-dial/FuSpeedDialActionButton.vue

@@ -2,13 +2,13 @@
   <div class="fu-speed-dial-action-button">
     <div v-if="title" class="fu-speed-dial-action-button__title" :style="titleSize">
       <slot name="title">
-        <div class="fu-speed-dial-action-button__text" :class="titleClass" :style="titleStyle" @click="click">{{
-            title }}
+        <div class="fu-speed-dial-action-button__text" :class="titleClass" :style="titleStyle" @click="click">{{ title
+        }}
         </div>
       </slot>
     </div>
     <slot>
-      <fu-speed-dial-button :class="buttonClass" v-bind="buttonProps" :icon="icon" @click="click"/>
+      <fu-speed-dial-button :class="buttonClass" v-bind="buttonProps" :icon="icon" @click="click" />
     </slot>
   </div>
 </template>
@@ -17,72 +17,72 @@
 import { inject, computed } from 'vue'
 import type { CSSProperties } from 'vue'
 import FuSpeedDialButton from "@/components/speed-dial/FuSpeedDialButton.vue";
+import { SpeedDialKey } from "./types";
 
 const props = defineProps({
-    index: Number,
-    icon: {
-      type: String,
-      default: "el-icon-plus"
-    },
-    titleClass: String,
-    titleBgColor: String,
-    titleColor: String,
-    buttonClass: String,
-    bgColor: String,
-    color: String,
-    title: [String, Number]
+  index: Number,
+  icon: {
+    type: String,
+    default: "Plus"
+  },
+  titleClass: String,
+  titleBgColor: String,
+  titleColor: String,
+  buttonClass: String,
+  bgColor: String,
+  color: String,
+  title: [String, Number]
 })
 
 const emit = defineEmits(["click"])
-const FuSpeedDial = inject('FuSpeedDial')
+const speedDialKey = inject(SpeedDialKey)
 
-const config =computed(()=>{
-    return FuSpeedDial.config;
+const config = computed(() => {
+  return speedDialKey?.config;
 })
 
-const direction =computed(()=>{
-    return FuSpeedDial.direction;
-})
-const clickClose =computed(()=>{
-    return FuSpeedDial.clickClose;
+const direction = computed(() => {
+  return speedDialKey?.direction.value || "";
 })
+// const clickClose =computed(()=>{
+//     return FuSpeedDial.clickClose;
+// })
 
-const titleSize =computed(()=>{
-    let size = config.value.fab.size + "px";
-      let style: CSSProperties = {position: "absolute", height: size};
-      if (["top", "bottom"].includes(direction.value)) {
-        style['text-align'] = "right"
-        style['right'] = size
-      } else {
-        style['text-align'] = "center"
-        style['min-width'] = size
-        if (props.index % 2 === 0) {
-          style.top = size
-        } else {
-          style.top = "-" + size
-        }
-      }
-      return style;
+const titleSize = computed(() => {
+  let size = config.value?.fab.size + "px";
+  let style: CSSProperties = { position: "absolute", height: size };
+  if (["top", "bottom"].includes(direction.value)) {
+    style['text-align'] = "right"
+    style['right'] = size
+  } else {
+    style['text-align'] = "center"
+    style['min-width'] = size
+    if (props.index || 0 % 2 === 0) {
+      style.top = size
+    } else {
+      style.top = "-" + size
+    }
+  }
+  return style;
 })
 
-const titleStyle =computed(()=>{
-      let backgroundColor = props.titleBgColor;
-      let color = props.titleColor
-      let fontSize = config.value.item.titleFontSize
-      return {backgroundColor, color, fontSize}
+const titleStyle = computed(() => {
+  let backgroundColor = props.titleBgColor;
+  let color = props.titleColor
+  let fontSize = config.value?.item.titleFontSize
+  return { backgroundColor, color, fontSize }
 })
 
-const buttonProps =computed(()=>{
-     let backgroundColor = props.bgColor;
-      let color = props.color
-      let fontSize = config.value.item.buttonFontSize
-      let size = config.value.item.size + "px";
-      return {backgroundColor, color, fontSize, size}
+const buttonProps = computed(() => {
+  let backgroundColor = props.bgColor;
+  let color = props.color
+  let fontSize = config.value?.item.buttonFontSize
+  let size = config.value?.item.size + "px";
+  return { backgroundColor, color, fontSize, size }
 })
-
 function click(e: Event) {
-      const {index, title} = props
-      emit("click", {index, title}, e);
-      FuSpeedDial.close();
-    }
+  const { index, title } = props
+  emit("click", { index, title }, e);
+  speedDialKey?.close();
+}
 </script>

package/src/components/speed-dial/FuSpeedDialButton.vue

@@ -1,27 +1,30 @@
 <template>
   <div :class="[
-    'fu-speed-dial-button',
-    'fu-speed-dial-button--' + type,
-    {
-      'fu-speed-dial-button--rotate': rotate,
-      'is-disabled': disabled,
-      'is-active': active,
-    }, ]" 
-    :style="{
+  'fu-speed-dial-button',
+  'el-button',
+  'el-button--' + type,
+  {
+    'fu-speed-dial-button--rotate': rotate,
+    'is-disabled': disabled,
+    'is-active': active,
+  },]" :style="{
     width: size,
     height: size,
     backgroundColor: backgroundColor,
     color: color,
-    fontSize: fontSize }">
+    fontSize: fontSize
+  }">
     <slot>
-      <i :class="icon" />
+      <el-icon>
+        <component :is="icon" />
+      </el-icon>
     </slot>
   </div>
 </template>
 
 <script setup lang="ts">
 import { validateType } from "@/tools/theme"
-const props = defineProps({
+defineProps({
   type: {
     type: String,
     default: "default",

package/src/components/speed-dial/FuSpeedDialItem.vue

@@ -9,11 +9,9 @@
 </template>
 
 <script setup lang="ts">
-import {
-  inject,
-  computed
-} from 'vue'
+import { inject, computed } from 'vue'
 import FuSpeedDialActionButton from "@/components/speed-dial/FuSpeedDialActionButton.vue";
+import { SpeedDialKey } from "./types";
 defineOptions({ name: "FuSpeedDialItem" });
 const props = defineProps({
   index: {
@@ -21,21 +19,17 @@ const props = defineProps({
     required: true
   },
 })
-const FuSpeedDial = inject('FuSpeedDial')
+const speedDialKey = inject(SpeedDialKey)
 
 const config = computed(() => {
-  return FuSpeedDial.config;
+  return speedDialKey?.config;
 })
 
 const direction = computed(() => {
-  return FuSpeedDial.direction;
+  return speedDialKey?.direction.value || "";
 })
 const isActive = computed(() => {
-  return FuSpeedDial.active;
-})
-
-const size = computed(() => {
-  return FuSpeedDial.size;
+  return speedDialKey?.active?.value;
 })
 
 const spacing = computed(() => {
@@ -44,13 +38,13 @@ const spacing = computed(() => {
 
 const directionPosition = computed(() => {
   if (["top", "left"].includes(direction.value)) {
-    return -config.value.fab.size - spacing.value
+    return -config.value?.fab?.size - spacing.value
   }
-  return config.value.fab.size + spacing.value
+  return config.value?.fab?.size + spacing.value
 })
 
 const itemSize = computed(() => {
-  let size = config.value.fab.size + "px";
+  let size = config.value?.fab?.size + "px";
   return {
     width: size,
     height: size,

package/src/components/speed-dial/types.ts

@@ -0,0 +1,12 @@
+import {InjectionKey, ComputedRef, Ref} from "vue";
+
+export interface SpeedDialContext {
+  config?: any,
+  direction: ComputedRef<string>,
+  active?: Ref<boolean>,
+  close(): void
+}
+
+
+export const SpeedDialKey: InjectionKey<SpeedDialContext> = Symbol('SpeedDialKey')
+

package/src/components/split-pane/FuSplitPane.vue

@@ -51,7 +51,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["changeSplit"])
 
-const instance = getCurrentInstance()
+const instance: any = getCurrentInstance()
 
 const active = ref(false)
 const usedValue = ref(0)
@@ -133,7 +133,7 @@ const resizerAttr = computed(() => {
     : isReverse.value
       ? "bottom"
       : "top" ;
-})
+}) as any
 const saveKey = computed(() => {
   return "Fu-SP-" + props.localKey;
 })

package/src/components/table/FuTable.vue

@@ -7,8 +7,11 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, useSlots, ref, watch, computed, onUpdated, provide } from "vue";
-import FuTableBody from "@/components/table/FuTableBody";
+import { onMounted, useSlots, ref, watch, computed, onUpdated, provide, VNodeNormalizedChildren, VNode } from "vue";
+import { isFix, getLabel, FuTableBody } from "@/components/table/FuTableBody";
+import { isValidElementNode, getChildren, isValidChildren } from "@/tools/vnode";
+import { LocalKey } from "@/components/table/types";
+
 defineOptions({ name: "FuTable" });
 const props = defineProps({
   columns: Array,
@@ -20,38 +23,20 @@ const props = defineProps({
 
 });
 
-const slots = useSlots()
+const slots = useSlots().default?.()
 
 const key = ref(0);
 
-
 const prefix = "FU-T-"
 
-const isFix = (node: any) => {
-  const includeTag = node.type.name.indexOf("FuTableColumnDropdown") >= 0
-  const { fix } = node.props
-  let { type } = node.props
-  return (fix !== undefined && fix !== false) || ["selection", "index", "expand"].includes(type) || includeTag
-}
-
-const getLabel = (node: any) => {
-  if (node.props.label) return node.props.label
-  const includeTag = node.type.name.indexOf("FuTableColumnDropdown") >= 0
-  let { label, type } = node.props
-  if (includeTag) label = prefix + "dropdown"
-  label ??= node.props.label
-  label ??= prefix + type
-  return label;
-}
-
 const cleanColumns = (columns: any) => {
   columns.splice(0, columns.length)
 }
 
 const updateNodes = (nodes: any) => {
   nodes.forEach((node: any) => {
-    if (!node.type.key) {
-      node.type.key = getLabel(node)
+    if (isValidElementNode(node) && !(node.type as any).key) {
+      (node.type as any).key = getLabel(node)
     }
   })
 }
@@ -92,8 +77,16 @@ const updateColumns = (nodes: any, columns: any) => {
 const columnsKey = computed(() => {
   return prefix + props.localKey
 })
+
 // 去掉v-if=false的node
-const children = slots.default?.().filter((c: any) => c.type.name !== undefined)
+let children: VNodeNormalizedChildren | VNode[]
+if (slots) {
+  if (isValidChildren(slots)) {
+    children = slots
+  }
+  children = getChildren(slots)
+}
+
 watch(() => props.columns,
   () => {
     // 设置refresh，可以避免抖动或闪烁，但是table会更新一次
@@ -134,9 +127,7 @@ onMounted(() => {
   }
 })
 
-
-provide("localKey", props.localKey)
-
+provide(LocalKey, props.localKey)
 onUpdated(() => {
   updateNodes(children)
   updateColumns(children, props.columns)

package/src/components/table/FuTableBody.ts

@@ -1,9 +1,10 @@
-import { h } from "vue";
+import {getChildren} from "@/tools/vnode";
+import {isArray} from "@vue/shared";
 
-const isFix = (node: any) => {
+export const isFix = (node: any) => {
   const includeTag = node.type.name.indexOf("FuTableColumnDropdown") >= 0;
-  const { fix } = node.props;
-  let { type } = node.props;
+  const {fix} = node.props;
+  let {type} = node.props;
   return (
     (fix !== undefined && fix !== false) ||
     ["selection", "index", "expand"].includes(type) ||
@@ -11,36 +12,33 @@ const isFix = (node: any) => {
   );
 };
 
-const getLabel = (node: any) => {
+export const getLabel = (node: any) => {
   if (node.props.label) return node.props.label;
   const prefix = "FU-T-";
   const includeTag = node.type.name.indexOf("FuTableColumnDropdown") >= 0;
-  let { label, type } = node.props;
+  let {label, type} = node.props;
   if (includeTag) label = prefix + "dropdown";
   label ??= node.props.label;
   label ??= prefix + type;
   return label;
 };
 
-const FuTableBody = (props: any, context: any) => {
+export const FuTableBody = (props: any, context: any) => {
   let slots = context.slots.default();
   const nodes: any = [];
-  let { columns } = props;
-  if (typeof slots[0].children[0].type === "symbol") {
-    slots = slots[0].children;
-  }
-  const children = slots[0].children.filter((c: any) => c.type.name !== undefined);
+  let {columns} = props;
+  let children = getChildren(slots);
   if (!children) return nodes;
   if (!columns || columns?.length === 0) return children;
   columns.forEach((col: any) => {
-    let node = children.find((child: any) => {
-      return col.label === getLabel(child);
-    });
-    if (node && (isFix(node) || col.show !== false)) {
-      nodes.push(node);
+    if (isArray(children)) {
+      let node = children.find((child: any) => {
+        return col.label === getLabel(child) && child.type.name !== undefined;
+      });
+      if (node && (isFix(node) || col.show !== false)) {
+        nodes.push(node);
+      }
     }
   });
   return nodes;
 };
-
-export default FuTableBody;

package/src/components/table/index.ts

@@ -1,15 +1,19 @@
 import FuTable from "./FuTable.vue"
-import FuTableColumnSelect from "./table-column-select"
+import FuTableColumnSelect from "./table-column-select/FuTableColumnSelect.vue"
 import FuTablePagination from "./FuTablePagination.vue"
-import FuTableOperations from "./table-operations"
-import FuTableColumnDropdown from "./table-column-dropdown"
+import FuTableOperations from "./table-operations/FuTableOperations.vue";
+import FuTableButton from "./table-operations/FuTableButton.vue";
+import FuTableMoreButton from "./table-operations/FuTableMoreButton.vue";
+import FuTableColumnDropdown from "./FuTableColumnDropdown.vue"
 
 import type { App } from 'vue'
 FuTable.install = (app: App): void => {
   app.component(FuTable.name, FuTable);
   app.component(FuTablePagination.name, FuTablePagination)
-  app.use(FuTableOperations.install)
-  app.use(FuTableColumnSelect.install)
-  app.use(FuTableColumnDropdown.install)
+  app.component(FuTableColumnSelect.name, FuTableColumnSelect);
+  app.component(FuTableColumnDropdown.name, FuTableColumnDropdown)
+  app.component(FuTableOperations.name, FuTableOperations);
+  app.component(FuTableButton.name, FuTableButton);
+  app.component(FuTableMoreButton.name, FuTableMoreButton);
 };
-export default FuTable;
+export default FuTable;

package/src/components/table/table-column-select/FuTableColumnSelectDialog.vue

@@ -1,6 +1,5 @@
 <template>
   <div style="display: inline-block">
-    <!-- :size="configSize"  -->
     <el-button class="fu-search-bar-button" :icon="icon" @click="visible = true">{{ t('fu.table.custom_table_rows') }}
     </el-button>
     <el-dialog custom-class="fu-table-column-select-dialog" v-model="visible" @open="open" append-to-body>
@@ -34,17 +33,12 @@
 import { ref, inject } from "vue";
 import { tableColumnSelect } from "./utils"
 import { useLocale } from "@/hooks"
-
+import { LocalKey } from "../types";
 const props = defineProps({
   icon: {
     type: String,
     default: "Setting"
   },
-  trigger: {
-    type: String,
-    default: "hover",
-    validator: (value: string) => ['click', 'hover'].includes(value)
-  },
   columns: {
     type: Array,
     default: () => []
@@ -52,7 +46,7 @@ const props = defineProps({
 
 })
 
-const localKey = inject("localKey")
+const localKey = inject(LocalKey, undefined)
 
 const { t } = useLocale()
 
@@ -90,7 +84,7 @@ function ok() {
 }
 
 function reset() {
-  if (columnsKey) {
+  if (columnsKey.value) {
     localStorage.removeItem(columnsKey.value)
   }
   props.columns.splice(0, props.columns.length)

package/src/components/table/table-column-select/FuTableColumnSelectPopover.vue

@@ -1,6 +1,6 @@
 <template>
   <el-popover class="fu-table-column-select" popper-class="fu-table-column-select-popper" :trigger="trigger"
-    :show-arrow="false" v-show="hasSelect">
+    :show-arrow="false" :style="{'visibility': hasSelect ? 'visible': 'hidden'}">
     <h3>
       {{ t('fu.table.custom_table_fields') }}
     </h3>
@@ -22,7 +22,6 @@
     <template #reference>
       <el-button class="fu-search-bar-button" :icon="icon">{{ t('fu.table.custom_table_rows') }}</el-button>
     </template>
-    <!-- :size="configSize" -->
   </el-popover>
 </template>
 
@@ -30,6 +29,7 @@
 import { computed, inject } from "vue";
 import { tableColumnSelect } from "./utils"
 import { useLocale } from "@/hooks"
+import { LocalKey } from "../types";
 
 const props = defineProps({
   icon: {
@@ -50,7 +50,8 @@ const props = defineProps({
 
 const { t } = useLocale()
 
-const localKey = inject("localKey")
+const localKey = inject(LocalKey, undefined)
+
 
 const {
   columnsKey,

package/src/components/table/table-operations/FuTableButton.vue

@@ -6,11 +6,8 @@
   </el-tooltip>
 </template>
 <script lang="ts" setup>
+defineOptions({ name: "FuTableButton" });
 defineProps({
-  size: {
-    type: String,
-    default: "default"
-  },
   label: String,
   disabled: Boolean,
   icon: Boolean,

package/src/components/table/table-operations/FuTableMoreButton.vue

@@ -23,7 +23,7 @@ import { computed } from "vue";
 import { useLocale } from "@/hooks"
 import { PropType } from "vue";
 import { DropdownProps } from "@/tools/types";
-
+defineOptions({ name: "FuTableMoreButton" });
 const { t } = useLocale()
 const props = defineProps({
   row: Object,

package/src/components/table/table-operations/FuTableOperations.vue

@@ -26,7 +26,6 @@ import FuTableMoreButton from "./FuTableMoreButton.vue";
 
 defineOptions({ name: "FuTableOperations" });
 const props = defineProps({
-  // columns: Array,
   align: {
     type: String,
     default: "center"
@@ -35,7 +34,7 @@ const props = defineProps({
   minWidth: [String, Number],
   ellipsis: { // 超过几个按钮时显示省略号，如果只超过一个也不显示省略号
     type: Number,
-    default: 3
+    default: 2
   },
   buttons: {
     type: Array,

package/src/components/table/types.ts

@@ -0,0 +1,3 @@
+import {InjectionKey} from "vue";
+
+export const LocalKey: InjectionKey<string | undefined> = Symbol('LocalKey')

package/src/components/tabs/FuTabs.vue

@@ -1,13 +1,12 @@
 <template>
   <el-tabs class="fu-tabs" :before-leave="beforeLeave" :editable="false" :addable="false" v-bind="$attrs">
-    <slot></slot>
-    <el-tab-pane name="add" key="add" v-if="addable">
+      <el-tab-pane name="add" key="add" v-if="addable" :lazy="true">
       <template #label>
         <slot name="add">
           <!-- 下拉方式 -->
           <el-dropdown @command="handleCommand" v-if="addType === 'dropdown'" :trigger="addTrigger">
             <slot name="dropdownButton">
-              <el-button type="primary" plain>
+              <el-button type="primary" plain >
                 <el-icon>
                   <component :is="addIcon" />
                 </el-icon>
@@ -34,6 +33,8 @@
         </slot>
       </template>
     </el-tab-pane>
+    <slot />
+
   </el-tabs>
 </template>
 

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
-
 export * from './use-global-config'
 export * from './use-locale'
+export * from './use-size'
+

package/src/hooks/use-global-config/index.ts

@@ -1,28 +1,17 @@
-import { computed, getCurrentInstance, inject, ref } from 'vue'
-// import { configProviderContextKey } from '@element-plus/tokens'
-// import type { Ref } from 'vue'
-// import type { ConfigProviderContext } from '@element-plus/tokens'
+import {computed, getCurrentInstance, inject, provide, InjectionKey, Ref, ref, App, unref} from 'vue'
+import {MaybeRef} from "@vueuse/core";
 
-// this is meant to fix global methods like `ElMessage(opts)`, this way we can inject current locale
-// into the component as default injection value.
-// refer to: https://github.com/element-plus/element-plus/issues/2610#issuecomment-887965266
 const globalConfig = ref()
 
-// export function useGlobalConfig<
-//   K extends keyof ConfigProviderContext,
-//   D extends ConfigProviderContext[K]
-// >(
-//   key: K,
-//   defaultValue?: D
-// ): Ref<Exclude<ConfigProviderContext[K], undefined> | D>
-// export function useGlobalConfig(): Ref<ConfigProviderContext>
-export function useGlobalConfig(
-  key?: keyof any,
-  defaultValue = undefined
-) {
-  const config = getCurrentInstance()
-    ? inject( Symbol(), globalConfig)
-    : globalConfig
+export const globalConfigKey: InjectionKey<Ref<GlobalConfig>> = Symbol('GlobalConfigKey')
+
+export interface GlobalConfig {
+  size?: string,
+  locale?: any
+}
+
+export function useGlobalConfig(key?: keyof any, defaultValue = undefined) {
+  const config = getCurrentInstance() ? inject(globalConfigKey, globalConfig) : globalConfig
   if (key) {
     return computed(() => config.value?.[key] ?? defaultValue)
   } else {
@@ -30,3 +19,17 @@ export function useGlobalConfig(
   }
 }
 
+export const provideGlobalConfig = (config: MaybeRef<GlobalConfig>, app?: App) => {
+  const inSetup = !!getCurrentInstance()
+  const provideFn = app?.provide ?? (inSetup ? provide : undefined)
+  const context = computed(() => {
+    return unref(config)
+  })
+  provideFn?.(globalConfigKey, context)
+  if (!globalConfig.value) {
+    globalConfig.value = context.value
+  }
+
+  return context
+}
+