fit2cloud-ui-plus 0.0.1-beta.8 → 1.0.0-beta.2

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

@@ -2,12 +2,12 @@
   <div class="fu-speed-dial" :style="style" v-click-outside="outsideClickClose">
     <div class="fu-speed-dial__content">
       <slot name="fab">
-        <fu-speed-dial-button v-bind="buttonProps" @click="click" @mousedown="mousedown" />
+        <fu-speed-dial-button v-bind="buttonProps" @click="click" @mousedown="mousedown"/>
       </slot>
       <div :style="contentPosition">
         <slot>
           <fu-speed-dial-item v-for="(item, index) in items" :index="index" :key="index" v-bind="item"
-            @click="itemClick" />
+                              @click="itemClick(index)"/>
         </slot>
       </div>
     </div>
@@ -16,24 +16,27 @@
 
 
 <script setup lang="ts">
-import { reactive, ref, watch, getCurrentInstance, onMounted, computed, provide, useSlots } from "vue";
-import type { CSSProperties } from 'vue'
-import { ClickOutside as vClickOutside } from 'element-plus'
+import {ref, watch, getCurrentInstance, onMounted, computed, provide, useSlots, PropType} from "vue";
+import type {CSSProperties} from 'vue'
+import type {ZIndexProperty, PositionProperty} from 'csstype'
+import {ClickOutside as vClickOutside} from 'element-plus'
 import FuSpeedDialButton from "@/components/speed-dial/FuSpeedDialButton.vue"
 import FuSpeedDialItem from "@/components/speed-dial/FuSpeedDialItem.vue"
-defineOptions({ name: "FuSpeedDial" });
+import {SpeedDialKey} from "./types";
+
+defineOptions({name: "FuSpeedDial"});
 const props = defineProps({
+  modelValue: Boolean,
   id: String,
-  value: Boolean,
   type: {
     type: String,
     default: "primary"
   },
-  items: Array,
+  items: Array as any,
   size: {
     type: String,
     default: "default",
-    validator: (value: string) => ["big", "default", "medium", "small"].includes(value)
+    validator: (value: string) => ["large", "default", "small"].includes(value)
   },
   direction: {
     type: String,
@@ -42,18 +45,18 @@ const props = defineProps({
   },
   icon: {
     type: String,
-    default: "el-icon-plus"
+    default: "Plus"
   },
   activeIcon: {
     type: String,
-    default: "el-icon-close"
+    default: "Close"
   },
   movable: {
     type: Boolean,
     default: false
   },
   position: {
-    type: String,
+    type: String as PropType<PositionProperty>,
     validator: (value: string) => ["absolute", "fixed"].includes(value)
   },
   left: String,
@@ -61,7 +64,7 @@ const props = defineProps({
   right: String,
   bottom: String,
   zIndex: {
-    type: [String, Number],
+    type: ([String, Number]) as PropType<ZIndexProperty>,
     default: 99
   },
   itemClickClose: {
@@ -81,21 +84,17 @@ const props = defineProps({
     type: Object,
     default: () => {
       return {
-        big: {
-          fab: { size: 56, fontSize: "18px" },
-          item: { size: 40, spacing: 0, titleFontSize: "14px", buttonFontSize: "18px" }
+        large: {
+          fab: {size: 56, fontSize: "18px"},
+          item: {size: 40, spacing: 0, titleFontSize: "14px", buttonFontSize: "18px"}
         },
         default: {
-          fab: { size: 40, fontSize: "16px" },
-          item: { size: 32, spacing: 0, titleFontSize: "14px", buttonFontSize: "16px" }
-        },
-        medium: {
-          fab: { size: 36, fontSize: "14px" },
-          item: { size: 28, spacing: 0, titleFontSize: "12px", buttonFontSize: "14px" }
+          fab: {size: 40, fontSize: "16px"},
+          item: {size: 32, spacing: 0, titleFontSize: "14px", buttonFontSize: "16px"}
         },
         small: {
-          fab: { size: 32, fontSize: "12px" },
-          item: { size: 24, spacing: 0, titleFontSize: "12px", buttonFontSize: "12px" }
+          fab: {size: 32, fontSize: "12px", padding: 0},
+          item: {size: 24, spacing: 0, titleFontSize: "12px", buttonFontSize: "12px"}
         },
       }
     }
@@ -107,26 +106,27 @@ const emit = defineEmits(["close", "outside-click", "click"])
 const slots = useSlots()
 const instance = getCurrentInstance()
 
-const { zIndex, position, left, top, right, bottom } = props
-
 const active = ref(false)
 const moving = ref(false)
-const style = reactive({ zIndex, position, left, top, right, bottom }) as any
-const updateStyle = function () {
-  style.value = { zIndex, position, left, top, right, bottom }
-}
 
-provide("FuSpeedDial", instance)
+const {zIndex, position, left, top, right, bottom} = props
+const style = ref({zIndex, position, left, top, right, bottom})
 
-watch(() => props.value, (v) => {
+watch(() => props.modelValue, (v) => {
   active.value = v
 })
-watch(() => props.position, updateStyle)
-watch(() => props.zIndex, updateStyle)
-watch(() => props.left, updateStyle)
-watch(() => props.right, updateStyle)
-watch(() => props.top, updateStyle)
-watch(() => props.bottom, updateStyle)
+watch(() => props.position, () => updateStyle())
+watch(() => props.zIndex, () => updateStyle())
+watch(() => props.left, () => updateStyle())
+watch(() => props.right, () => updateStyle())
+watch(() => props.top, () => updateStyle())
+watch(() => props.bottom, () => updateStyle())
+
+function updateStyle() {
+  const {zIndex, position, left, top, right, bottom} = props
+  style.value = {zIndex, position, left, top, right, bottom}
+
+}
 
 const saveKey = computed(() => {
   return "Fu-SD-" + props.localKey
@@ -141,13 +141,11 @@ const config = computed(() => {
   return props.sizeOptions[props.size] || props.sizeOptions["default"]
 })
 const buttonProps = computed(() => {
-  let type = props.type
   let rotate = true
-  let activeValue = active.value
   let size = config.value.fab.size + "px"
   let fontSize = config.value.fab.fontSize
   let icon = props.activeIcon === props.icon ? props.icon : active.value ? props.activeIcon : props.icon
-  return { type, rotate, active: activeValue, size, fontSize, icon }
+  return {type: props.type, rotate, active: active.value, size, fontSize, icon}
 })
 const spacing = computed(() => {
   let spacing = config.value.item.spacing || 0
@@ -161,19 +159,20 @@ const contentPosition = computed(() => {
     position = -config.value.fab.size - spacing.value
   }
 
-  let style: CSSProperties = { position: "absolute", zIndex: props.zIndex }
+  let positionStyle: CSSProperties = {position: "absolute", zIndex: props.zIndex}
   if (["top", "bottom"].includes(props.direction)) {
-    style.top = position + "px"
+    positionStyle.top = position + "px"
   } else {
-    style.top = 0
-    style.left = position + "px"
+    positionStyle.top = 0
+    positionStyle.left = position + "px"
   }
-  return style
+  return positionStyle
 })
 
-function toggle(active?: any) {
+
+function toggle(bool?: any) {
   if (!moving.value && hashChildren.value) {
-    active.value = active === undefined ? !active.value : active
+    active.value = bool === undefined ? !active.value : bool
   }
 }
 
@@ -183,22 +182,25 @@ function outsideClickClose() {
   }
   emit("outside-click", [props.id, active.value])
 }
+
 function click(e: Event) {
   if (!props.manual) {
     toggle()
   }
   emit("click", [props.id, active.value], e)
 }
+
 function mousedown() {
-  if (moving.value) {
+  if (props.movable) {
     document.addEventListener('mousemove', mousemove)
     document.addEventListener('mouseup', mouseup)
   }
 }
+
 function mousemove(e: MouseEvent) {
   moving.value = true
   if (props.position === "fixed") {
-    const el = instance.vnode.el as HTMLElement
+    const el = instance?.vnode.el as HTMLElement
     const rect = el.getBoundingClientRect()
     let left = e.clientX - rect.width / 2
     let top = e.clientY - rect.height / 2
@@ -207,11 +209,11 @@ function mousemove(e: MouseEvent) {
     delete style.value.right
     delete style.value.bottom
   }
-
   if (props.position === "absolute") {
-    const { offsetLeft, offsetTop, clientWidth, clientHeight, offsetParent } = this.$el
-    const maxWidth = offsetParent.clientWidth - clientWidth
-    const maxHeight = offsetParent.clientHeight - clientHeight
+    const {offsetLeft, offsetTop, clientWidth, clientHeight, offsetParent} = instance?.vnode.el as HTMLElement
+
+    const maxWidth = offsetParent && offsetParent.clientWidth || 0 - clientWidth
+    const maxHeight = offsetParent && offsetParent.clientHeight || 0 - clientHeight
 
     let left = offsetLeft + e.movementX
     let top = offsetTop + e.movementY
@@ -225,17 +227,20 @@ function mousemove(e: MouseEvent) {
     }
   }
 }
+
 function mouseup() {
   writePosition()
   document.removeEventListener('mousemove', mousemove)
   document.removeEventListener('mouseup', mouseup)
   setTimeout(() => moving.value = false)
 }
+
 function writePosition() {
   if (props.localKey) {
     localStorage.setItem(saveKey.value, JSON.stringify(style.value))
   }
 }
+
 function readPosition() {
   // *******????
   // if (this.savePosition) {
@@ -250,12 +255,11 @@ function readPosition() {
   }
   // }
 }
-function itemClick(arg: any, e: any) {
-  console.log(arg)
-  const { index } = arg
+
+function itemClick(index: any) {
   if (index !== undefined) {
-    const item = props.items[index];
-    if (item.click && typeof item.click === "function") return item.click(arg, e)
+    const item = props.items[index] as any;
+    if (item.click && typeof item.click === "function") return item.click(index)
   }
 }
 
@@ -266,11 +270,18 @@ function close() {
   emit("close", [props.id, active.value])
 }
 
+
+provide(SpeedDialKey, {
+  config: config.value,
+  direction: computed(() => props.direction),
+  active: active,
+  close
+
+})
 onMounted(() => {
   readPosition()
 })
 
-
 defineExpose({
   close
 })

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

@@ -1,17 +1,18 @@
 <template>
   <el-table class="fu-table" v-bind="$attrs" :key="key" header-row-class-name="fu-table-header">
     <fu-table-body name="table-body" :columns="columns">
-      <slot/>
+      <slot />
     </fu-table-body>
   </el-table>
 </template>
 
 <script lang="ts" setup>
-import {onMounted, useSlots, ref, watch, computed, onUpdated, provide, VNodeNormalizedChildren, VNode} from "vue";
-import {isFix, getLabel, FuTableBody} from "@/components/table/FuTableBody";
-import {getChildren, isValidChildren} from "@/tools/vnode";
+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"});
+defineOptions({ name: "FuTable" });
 const props = defineProps({
   columns: Array,
   refresh: {
@@ -34,8 +35,8 @@ const cleanColumns = (columns: any) => {
 
 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)
     }
   })
 }
@@ -44,11 +45,11 @@ const initColumns = (nodes: any, columns: any) => {
   nodes.forEach((node: any) => {
     const label = getLabel(node)
     const fix = isFix(node);
-    const {show} = node.props
+    const { show } = node.props
     if (!label && !fix) {
       throw new Error("unfixed column's label is required.")
     }
-    columns.push({label, show, fix})
+    columns.push({ label, show, fix })
   })
 }
 
@@ -97,7 +98,7 @@ watch(() => props.columns,
     }
 
   },
-  {deep: true}
+  { deep: true }
 )
 // 之前的created
 onMounted(() => {
@@ -126,9 +127,7 @@ onMounted(() => {
   }
 })
 
-
-provide("localKey", props.localKey)
-
+provide(LocalKey, props.localKey)
 onUpdated(() => {
   updateNodes(children)
   updateColumns(children, props.columns)

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;