fit2cloud-ui-plus 0.0.1-beta.5 → 0.0.1-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fit2cloud-ui-plus",
-  "version": "0.0.1-beta.5",
+  "version": "0.0.1-beta.6",
   "private": false,
   "main": "./lib/fit2cloud-ui-plus.es.js",
   "files": [

package/src/components/filter-bar/FuFilter.vue

@@ -65,7 +65,7 @@ const props = defineProps({
     type: Number,
     default: 0
   },
-  components: Array,
+  components: Array as any,
   drawerWidth: {
     type: [Number, String],
     default: "680px"

package/src/components/read-write-switch/FuInputRwSwitch.vue

@@ -9,33 +9,37 @@
 
 <script setup lang="ts">
 
+import FuReadWriteSwitch from "@/components/read-write-switch/FuReadWriteSwitch.vue";
 import { ref, watch } from "vue";
+
 defineOptions({ name: "FuInputRwSwitch" });
 const props = defineProps({
-  value: [String, Number],
+  modelValue: [String, Number],
   writeTrigger: {
     type: String,
-    default: "click",
+    default: "onClick",
     validator: (value: string) => {
-      return ['click', 'dblclick'].includes(value)
+      return ['onClick', 'onDblclick'].includes(value)
     }
   }
 })
 const emit = defineEmits(["input", "blur"])
 
-const data = ref(props.value)
+const data = ref(props.modelValue)
 
-watch(() => props.value, (v) => {
+watch(() => props.modelValue, (v) => {
   data.value = v
 })
 
 function input(e: Event) {
   emit("input", data.value, e)
 }
+
 function blur(read: Function, e: Event) {
   emit("blur", data.value, e)
   read()
 }
+
 function keydown(read: Function, e: KeyboardEvent) {
   if (e.key === "Enter") {
     read()

package/src/components/read-write-switch/FuReadWriteSwitch.vue

@@ -1,28 +1,27 @@
 <script lang="ts">
-import { ref, watch, defineComponent, h, nextTick } from 'vue'
-import { uuid } from "@/tools/utils"
+import {ref, watch, defineComponent, h, nextTick} from 'vue'
+import {uuid} from "@/tools/utils"
 
-const TRIGGERS = ['manual', 'click', 'dblclick']
+const TRIGGERS = ['manual', 'onClick', 'onDblclick']
 
 export default defineComponent({
   name: "FuReadWriteSwitch",
   props: {
-    value: Boolean,
+    modelValue: Boolean,
     data: [String, Number, Boolean],
     writeTrigger: {
       type: String,
-      default: "click",
+      default: "onClick",
       validator: (value: string) => {
         return TRIGGERS.includes(value)
       }
     }
   },
 
-  setup(props, { slots, emit }) {
+  setup(props, {slots, emit}) {
     const id = ref(uuid())
-    const write = ref(props.value === undefined ? false : props.value)
-    watch(() => props.value, (v) => {
-          console.log(v)
+    const write = ref(props.modelValue === undefined ? false : props.modelValue)
+    watch(() => props.modelValue, (v) => {
       if (v === write.value) return
 
       if (v) {
@@ -33,12 +32,13 @@ export default defineComponent({
     })
 
     function change() {
-      emit("input", write.value)
+      emit("update:modelValue", write.value)
       emit("change", [props.data, write.value])
     }
+
     function switchWrite() {
       write.value = true
-  
+
       nextTick(() => {
         // 目前只支持input和textarea自动获取焦点
         const nid = document.getElementById(id.value)
@@ -52,39 +52,41 @@ export default defineComponent({
         change()
       })
     }
+
     function switchRead() {
       write.value = false
       change()
     }
-    
-    const context: any = {
-      class: "fu-read-write-switch",
-      attrs: { id: id.value },
-      on: {}
-    }
 
-    // 读状态添加触发写状态的事件
-    if (!write.value && props.writeTrigger !== TRIGGERS[0]) {
-      context.on[props.writeTrigger] = switchWrite
-    }
-    // 没有slot时显示文本数据
-    let children: any = props.data
+    return () => {
+      const context: any = {
+        class: "fu-read-write-switch",
+        id: id.value,
+      }
 
-    // 读状态内容，提供切换到写状态的方法
-    if (!write.value && slots.read) {
-      children = slots.read({
-        write: switchWrite
-      })
-    }
+      // 读状态添加触发写状态的事件
+      if (!write.value && props.writeTrigger !== TRIGGERS[0]) {
+        context[props.writeTrigger] = switchWrite
+      }
+      // 没有slot时显示文本数据
+      let children: any = props.data
 
-    // 写状态内容，提供切换到读状态的方法
-    if (write.value && slots.default) {
-      children = slots.default({
-        read: switchRead
-      })
-    }
+      // 读状态内容，提供切换到写状态的方法
+      if (!write.value && slots.read) {
+        children = slots.read({
+          write: switchWrite
+        })
+      }
 
-     return () => h("div", context, children)
+      // 写状态内容，提供切换到读状态的方法
+      if (write.value && slots.default) {
+        children = slots.default({
+          read: switchRead
+        })
+      }
+
+      return h("div", context, children)
+    }
   }
 
 })

package/src/components/read-write-switch/FuSelectRwSwitch.vue

@@ -17,23 +17,27 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, PropType } from "vue";
+import { OptionProps } from "./types";
 defineOptions({ name: "FuSelectRwSwitch" });
 const props = defineProps({
-  value: [String, Number],
-  options: Array,
+  modelValue: [String, Number],
+  options: {
+    type: Array as PropType<OptionProps[]>,
+    default: []
+  },
   writeTrigger: {
     type: String,
-    default: "click",
+    default: "onClick",
     validator: (value: string) => {
-      return ['click', 'dblclick'].includes(value)
+      return ['onClick', 'onDblclick'].includes(value)
     }
   }
 })
 const emit = defineEmits(["input", "blur", "change"])
-const data = ref(props.value)
+const data = ref(props.modelValue)
 
-watch(() => props.value, (v) => {
+watch(() => props.modelValue, (v) => {
   data.value = v
 })
 function input(e: Event) {

package/src/components/read-write-switch/types.ts

@@ -0,0 +1,4 @@
+export interface OptionProps {
+  label: string
+  value: string | number
+}

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>

package/src/components/table/FuTableBody.ts

@@ -1,40 +1,46 @@
-import { h } from 'vue'
+import { h } from "vue";
 
 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 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
+  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()
+  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;
+  if (typeof slots[0].children[0].type === "symbol") {
+    slots = slots[0].children;
+  }
+  const children = slots[0].children.filter((c: any) => c.type.name !== undefined);
+  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)
-    })
+      return col.label === getLabel(child);
+    });
     if (node && (isFix(node) || col.show !== false)) {
       nodes.push(node);
     }
-  })
-  return nodes
-}
+  });
+  return nodes;
+};
 
 export default FuTableBody;
-
-

package/src/components/table/table-column-dropdown/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/table-column-select/FuTableColumnSelectDialog.vue

@@ -1,18 +1,19 @@
 <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,9 +31,9 @@
 </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"
 
 const props = defineProps({
   icon: {
@@ -53,7 +54,7 @@ const props = defineProps({
 
 const localKey = inject("localKey")
 
-const {t} = useLocale()
+const { t } = useLocale()
 
 const cloneColumn = (source: any, target: any) => {
   source.forEach((col: any) => {
@@ -72,7 +73,7 @@ const {
   drop
 } = tableColumnSelect(localKey)
 
-const cloneColumns = ref([])
+const cloneColumns = ref([]) as any
 const visible = ref(false)
 
 function open() {
@@ -82,7 +83,7 @@ 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

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" v-show="hasSelect">
     <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"
 
 const props = defineProps({
   icon: {
@@ -42,13 +42,13 @@ 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")
 

package/src/components/table/table-column-select/utils.ts

@@ -6,7 +6,7 @@ export const tableColumnSelect = (localKey: any) => {
     return localKey ? "FU-T-" + localKey : ''
   })
 
-  function dragstart(event: DragEvent, index: string) {
+  function dragstart(event: DragEvent, index: any) {
     if (event.dataTransfer) {
       event.dataTransfer.effectAllowed = "move"
       event.dataTransfer.setData("source_index", index)
@@ -15,15 +15,17 @@ export const tableColumnSelect = (localKey: any) => {
 
   function dragenter(event: DragEvent) {
     event.preventDefault()
-    if (event.target) {
-      event.target.style.opacity = .2
+    let target = event.target as HTMLElement
+    if (target) {
+      target.style.opacity= ".2"
     }
   }
 
   function dragleave(event: DragEvent) {
     event.preventDefault()
-    if (event.target) {
-      event.target.style.opacity = ""
+    let target = event.target as HTMLElement
+    if (target) {
+      target.style.opacity = ""
     }
   }
 
@@ -34,6 +36,7 @@ export const tableColumnSelect = (localKey: any) => {
   }
 
   function drop(event: DragEvent, list: any, index: number) {
+    let target = event.target as HTMLElement
     let source_index = Number(event.dataTransfer?.getData("source_index"))
     let target_index = index
     if (target_index > source_index) {
@@ -43,8 +46,8 @@ export const tableColumnSelect = (localKey: any) => {
       list.splice(target_index, 0, list[source_index])
       list.splice(source_index + 1, 1)
     }
-    if (event.target) {
-      event.target.style.opacity = ""
+    if (target) {
+      target.style.opacity = ""
     }
   }
 

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

@@ -10,7 +10,7 @@
     </el-button>
     <template #dropdown>
       <el-dropdown-menu>
-        <el-dropdown-item v-for="(btn, i) in buttons" :key="i" :icon="type === 'icon'&& btn.icon" :disabled="disabled(btn)"
+        <el-dropdown-item v-for="(btn, i) in buttons" :key="i" :icon="type === 'icon'? btn.icon: ''" :disabled="disabled(btn)"
           :command="btn">
           {{ btn.label }}
         </el-dropdown-item>
@@ -21,12 +21,14 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 import { useLocale } from "@/hooks"
+import { PropType } from "vue";
+import { DropdownProps } from "@/tools/types";
 
 const { t } = useLocale()
 const props = defineProps({
   row: Object,
   buttons: {
-    type: Array,
+    type: Array as PropType<DropdownProps[]>,
     required: true
   },
   size: {

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

@@ -5,8 +5,8 @@
     </template>
     <template #default="{ row }">
       <fu-table-button :icon="type === 'icon'" v-for="(btn, i) in defaultButtons(row)" :key="i"
-        @click.stop="btn.click(row)" :disabled="disableButton(btn, row)" :label="btn.label" :type="btn.type || 'primary'"
-        link>
+        @click.stop="btn.click(row)" :disabled="disableButton(btn, row)" :label="btn.label"
+        :type="btn.type || 'primary'" link>
         <el-icon v-if="type === 'icon'">
           <component :is="btn.icon" />
         </el-icon>
@@ -52,13 +52,13 @@ const hasShowFunc = computed(() => {
   return props.buttons.some((btn: any) => typeof btn.show === "function")
 });
 
-const defaultButtons = computed(() => {
+const defaultButtons: any = computed(() => {
   return function (row: any) {
     return hasMore(row) ? showButtons(row).slice(0, props.ellipsis) : showButtons(row)
   }
 });
 
-const moreButtons = computed(() => {
+const moreButtons: any = computed(() => {
   return function (row: any) {
     return hasMore(row) ? showButtons(row).slice(props.ellipsis) : []
   }
@@ -66,7 +66,7 @@ const moreButtons = computed(() => {
 
 const computeWidth = computed(() => {
   let length = hasShowFunc.value ? props.ellipsis : defaultButtons.value.length
-  let buttonsWidth = 35 + length * 58 + 58
+  let buttonsWidth: string | number = 35 + length * 58 + 58
   if (props.minWidth) {
     buttonsWidth = buttonsWidth < props.minWidth ? props.minWidth : buttonsWidth
   }

package/src/components/tabs/FuTabs.vue

@@ -2,7 +2,7 @@
   <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">
-      <template v-slot:label>
+      <template #label>
         <slot name="add">
           <!-- 下拉方式 -->
           <el-dropdown @command="handleCommand" v-if="addType === 'dropdown'" :trigger="addTrigger">
@@ -38,6 +38,8 @@
 </template>
 
 <script lang="ts" setup>
+import { PropType } from "vue";
+import { DropdownProps } from "@/tools/types";
 import { uuid } from "@/tools/utils";
 defineOptions({ name: "FuTabs" });
 type TabPanelName = string | number
@@ -48,7 +50,7 @@ const props = defineProps({
     validator: (val: string) => ["default", "dropdown"].includes(val),
   },
   dropdownMenus: {
-    type: Array,
+    type: Array as PropType<DropdownProps[]>,
     default: () => [],
   },
   addTrigger: {

package/src/styles/common/variables.scss

@@ -14,15 +14,9 @@
 );
 
 // fit2cloud ui variables
-
 $filter-color: #646A73 !default;
 $filter-drawer-color: #646A73 !default;
 $filter-condition-color: #0C296E !default;
 $filter-condition-bgColor: rgba(51, 112, 255, 0.1) !default;
 $filter-option-bgColor:  #F5F6F7 !default;
 $filter-scroll-bgColor:  rgba(31, 35, 41, 0.1) !default;
-
-// $fu-search-bar-width: 100% !default;
-// $fu-search-bar-height: 48px !default;
-// $fu-search-bar-condition-color: #424242 !default;
-// $fu-search-bar-condition-bgColor: #E6E6E6 !default;

package/src/styles/components/tabs.scss

@@ -3,7 +3,7 @@
 
 @include b(tabs) {
   #tab-add {
-    .el-icon-close {
+    .is-icon-close {
       display: none;
     }
   }

package/src/tools/types.ts

@@ -0,0 +1,9 @@
+export interface DropdownProps {
+  icon?: string
+  disabled?: boolean
+  divided?: boolean
+  command?: string | number | object
+  label?: string | number
+  [k:string]: any;
+}
+