fit2cloud-ui-plus 0.0.1-beta.1 → 0.0.1-beta.12

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

@@ -0,0 +1,32 @@
+declare const _default: import("vue").DefineComponent<{
+    index: NumberConstructor;
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    titleClass: StringConstructor;
+    titleBgColor: StringConstructor;
+    titleColor: StringConstructor;
+    buttonClass: StringConstructor;
+    bgColor: StringConstructor;
+    color: StringConstructor;
+    title: (StringConstructor | NumberConstructor)[];
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    index: NumberConstructor;
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    titleClass: StringConstructor;
+    titleBgColor: StringConstructor;
+    titleColor: StringConstructor;
+    buttonClass: StringConstructor;
+    bgColor: StringConstructor;
+    color: StringConstructor;
+    title: (StringConstructor | NumberConstructor)[];
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    icon: string;
+}>;
+export default _default;

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/FuSpeedDialButton.vue.d.ts

@@ -0,0 +1,42 @@
+declare const _default: import("vue").DefineComponent<{
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    rotate: BooleanConstructor;
+    disabled: BooleanConstructor;
+    active: BooleanConstructor;
+    icon: StringConstructor;
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+    backgroundColor: StringConstructor;
+    color: StringConstructor;
+    fontSize: StringConstructor;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    rotate: BooleanConstructor;
+    disabled: BooleanConstructor;
+    active: BooleanConstructor;
+    icon: StringConstructor;
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+    backgroundColor: StringConstructor;
+    color: StringConstructor;
+    fontSize: StringConstructor;
+}>>, {
+    type: string;
+    disabled: boolean;
+    size: string;
+    active: boolean;
+    rotate: boolean;
+}>;
+export 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/FuSpeedDialItem.vue.d.ts

@@ -0,0 +1,12 @@
+declare const _default: import("vue").DefineComponent<{
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/components/speed-dial/index.d.ts

@@ -0,0 +1,2 @@
+import FuSpeedDial from "./FuSpeedDial.vue";
+export default FuSpeedDial;

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

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

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

@@ -8,7 +8,7 @@
       @mouseover="hover = true" @mouseleave="hover = false">
       <div class="icon" v-if="resizerType === 'resizer'">
         <slot name="resizer">
-          <i class="el-icon-more"></i>
+          <el-icon :size="10"><MoreFilled /></el-icon>
         </slot>
       </div>
     </div>
@@ -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/split-pane/FuSplitPane.vue.d.ts

@@ -0,0 +1,59 @@
+declare const _default: import("vue").DefineComponent<{
+    min: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    left: (StringConstructor | NumberConstructor)[];
+    right: (StringConstructor | NumberConstructor)[];
+    top: (StringConstructor | NumberConstructor)[];
+    bottom: (StringConstructor | NumberConstructor)[];
+    direction: {
+        validator: (val: string) => boolean;
+        default: string;
+    };
+    localKey: StringConstructor;
+    resizable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resizerType: {
+        validator: (val: string) => boolean;
+        default: string;
+    };
+    resizerClass: StringConstructor;
+    resizerStyle: ObjectConstructor;
+    resizerHoverClass: StringConstructor;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "changeSplit"[], "changeSplit", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    min: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    left: (StringConstructor | NumberConstructor)[];
+    right: (StringConstructor | NumberConstructor)[];
+    top: (StringConstructor | NumberConstructor)[];
+    bottom: (StringConstructor | NumberConstructor)[];
+    direction: {
+        validator: (val: string) => boolean;
+        default: string;
+    };
+    localKey: StringConstructor;
+    resizable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resizerType: {
+        validator: (val: string) => boolean;
+        default: string;
+    };
+    resizerClass: StringConstructor;
+    resizerStyle: ObjectConstructor;
+    resizerHoverClass: StringConstructor;
+}>> & {
+    onChangeSplit?: ((...args: any[]) => any) | undefined;
+}, {
+    min: string | number;
+    direction: string;
+    resizable: boolean;
+    resizerType: string;
+}>;
+export default _default;

package/src/components/split-pane/index.d.ts

@@ -0,0 +1,2 @@
+import FuSplitPane from './FuSplitPane.vue';
+export default FuSplitPane;

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 { getChildren, isValidChildren } from "@/tools/vnode";
+import { LocalKey } from "@/components/table/types";
+
 defineOptions({ name: "FuTable" });
 const props = defineProps({
   columns: Array,
@@ -20,30 +23,12 @@ 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)
 }
@@ -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,40 +1,44 @@
-import { h } from 'vue'
+import {getChildren} from "@/tools/vnode";
+import {isArray} from "@vue/shared";
 
-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
-}
+export 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 prefix = "FU-T-"
-  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
+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;
+  if (includeTag) label = prefix + "dropdown";
+  label ??= node.props.label;
+  label ??= prefix + type;
   return label;
-}
-const FuTableBody = (props: any, context: any) => {
-  const slots = context.slots.default()
+};
+
+export const FuTableBody = (props: any, context: any) => {
+  let slots = context.slots.default();
   const nodes: any = [];
-  let { columns } = props
-  const children = slots[0].children.filter((c: any) => c.type.name !== undefined)
-  if (!children) return nodes
-  if (!columns || columns?.length === 0) return children
+  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;
-
-
+  });
+  return nodes;
+};

package/src/components/table/{table-column-dropdown/FuTableColumnDropdown.vue → FuTableColumnDropdown.vue}

@@ -33,6 +33,9 @@
 </template>
 <script lang="ts" setup>
 import { computed, getCurrentInstance } from "vue";
+import { PropType } from "vue";
+import { DropdownProps } from "@/tools/types";
+
 defineOptions({ name: "FuTableColumnDropdown" });
 const props = defineProps({
   showType: {
@@ -41,7 +44,7 @@ const props = defineProps({
     validator: (value: string) => ["always", "hover", "selected"].includes(value),
   },
   menus: {
-    type: Array,
+    type: Array as PropType<DropdownProps[]>,
     default: () => [],
   },
   title: String,
@@ -56,7 +59,7 @@ const props = defineProps({
 
 });
 
-const instance = getCurrentInstance()
+const instance = getCurrentInstance() as any
 
 
 const isShow = computed(() => {

package/src/components/table/index.d.ts

@@ -0,0 +1,2 @@
+import FuTable from "./FuTable.vue";
+export default FuTable;

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,18 +1,18 @@
 <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-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>
-      <template #title>
+      <template #header>
         <h3>
           {{ t('fu.table.custom_table_fields') }}
         </h3>
-        <el-alert :title="t('fu.table.custom_table_fields_desc')" type="info" :closable="false"/>
+        <el-alert :title="t('fu.table.custom_table_fields_desc')" type="info" :closable="false" />
       </template>
 
       <el-checkbox v-for="(c, i) in cloneColumns" :key="i" v-model="c.show" :checked="c.show !== false" draggable="true"
-                   @dragstart="dragstart($event, i)" @dragenter="dragenter" @dragleave="dragleave"
-                   @dragover.prevent @dragend="dragend" @drop="drop($event, cloneColumns, i)" v-show="!c.fix">
+        @dragstart="dragstart($event, i)" @dragenter="dragenter" @dragleave="dragleave" @dragover.prevent
+        @dragend="dragend" @drop="drop($event, cloneColumns, i)" v-show="!c.fix">
         {{ c.label }}
       </el-checkbox>
 
@@ -30,20 +30,15 @@
 </template>
 
 <script setup lang="ts">
-import {ref, inject} from "vue";
-import {tableColumnSelect} from "./utils"
-import {useLocale} from "@/hooks"
-
+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: () => []
@@ -51,9 +46,9 @@ const props = defineProps({
 
 })
 
-const localKey = inject("localKey")
+const localKey = inject(LocalKey, undefined)
 
-const {t} = useLocale()
+const { t } = useLocale()
 
 const cloneColumn = (source: any, target: any) => {
   source.forEach((col: any) => {
@@ -72,7 +67,7 @@ const {
   drop
 } = tableColumnSelect(localKey)
 
-const cloneColumns = ref([])
+const cloneColumns = ref([]) as any
 const visible = ref(false)
 
 function open() {
@@ -82,14 +77,14 @@ function open() {
 
 function ok() {
   props.columns.splice(0, props.columns.length)
-  cloneColumns.value.forEach(c => {
+  cloneColumns.value.forEach((c: any) => {
     props.columns.push(c)
   })
   visible.value = false
 }
 
 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,14 +1,14 @@
 <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>
     <div class="fu-table-column-select-popper__body">
       <div v-for="(c, i) in columns" :key="i" class="fu-table-column-select-popper__item">
         <el-checkbox v-model="c.show" :checked="c.show !== false" draggable="true" @dragstart="dragstart($event, i)"
-                     @dragenter="dragenter" @dragleave="dragleave" @dragover.prevent @dragend="dragend"
-                     @drop="drop($event, columns, i)" v-show="!c.fix">
+          @dragenter="dragenter" @dragleave="dragleave" @dragover.prevent @dragend="dragend"
+          @drop="drop($event, columns, i)" v-show="!c.fix">
           {{ c.label }}
         </el-checkbox>
       </div>
@@ -20,16 +20,16 @@
     </div>
 
     <template #reference>
-      <el-button class="fu-search-bar-button" :icon="icon">{{t('fu.table.custom_table_rows')}}</el-button>
+      <el-button class="fu-search-bar-button" :icon="icon">{{ t('fu.table.custom_table_rows') }}</el-button>
     </template>
-    <!-- :size="configSize" -->
   </el-popover>
 </template>
 
 <script setup lang="ts">
-import {computed, inject} from "vue";
-import {tableColumnSelect} from "./utils"
-import {useLocale} from "@/hooks"
+import { computed, inject } from "vue";
+import { tableColumnSelect } from "./utils"
+import { useLocale } from "@/hooks"
+import { LocalKey } from "../types";
 
 const props = defineProps({
   icon: {
@@ -42,15 +42,16 @@ const props = defineProps({
     validator: (value: string) => ['click', 'hover'].includes(value)
   },
   columns: {
-    type: Array,
+    type: Array as any,
     default: () => []
   },
 
 });
 
-const {t} = useLocale()
+const { t } = useLocale()
+
+const localKey = inject(LocalKey, undefined)
 
-const localKey = inject("localKey")
 
 const {
   columnsKey,