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

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

@@ -3,25 +3,28 @@
     <div class="fu-filter-component__label">{{ label }}</div>
     <div class="fu-filter-component__content">
       <!-- :size="configSize"  -->
-      <el-date-picker class="fu-filter-date" v-model="value" v-bind="$attrs"
-                      :placeholder="t('fu.search_bar.select_date_time')" type="datetimerange"
-                      :value-format="valueFormat"
-                      :start-placeholder="t('fu.search_bar.start_date_time')"
-                      :end-placeholder="t('fu.search_bar.end_date_time')">
+      <el-date-picker class="fu-filter-date" v-model="value" v-bind="$attrs" :size="size"
+        :placeholder="t('fu.search_bar.select_date_time')" type="datetimerange" :value-format="valueFormat"
+        :start-placeholder="t('fu.search_bar.start_date_time')" :end-placeholder="t('fu.search_bar.end_date_time')">
       </el-date-picker>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {ref, computed, inject} from "vue";
-import {FilterCondition, ReferenceContext, referenceKey} from "../types";
-import {datetimeFormat} from "@/tools/time";
-import {useLocale} from "@/hooks"
+import { ref, computed, inject } from "vue";
+import { FilterCondition, ReferenceContext, referenceKey } from "../types";
+import { datetimeFormat } from "@/tools/time";
+import { useLocale } from "@/hooks"
+import { validateSize } from "@/tools/size";
 defineOptions({ name: "FuFilterDateTime" });
-const {t} = useLocale()
+const { t } = useLocale()
 
 const props = defineProps({
+  size: {
+    type: String,
+    validator: validateSize
+  },
   label: String,
   field: {
     type: String,
@@ -45,8 +48,8 @@ const valueLabel = computed(() => {
 
 function getCondition(): FilterCondition | undefined {
   if (!String(value.value)) return;
-  let {field, label} = props
-  return {field, label, value: value.value, valueLabel: valueLabel.value}
+  let { field, label } = props
+  return { field, label, value: value.value, valueLabel: valueLabel.value }
 }
 
 function init(v: any) {
@@ -55,7 +58,7 @@ function init(v: any) {
 
 const references = inject(referenceKey)
 const field = props.field
-const reference: ReferenceContext = {field, init, getCondition}
+const reference: ReferenceContext = { field, init, getCondition }
 references?.value.push(reference)
 
 defineExpose({

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

@@ -2,20 +2,20 @@
   <div class="fu-filter-component">
     <div class="fu-filter-component__label">{{ label }}</div>
     <div class="fu-filter-component__content">
-      <fu-filter-option :label="o.label" :value="o.value" v-for="o in showOptions" :key="o.value"/>
+      <fu-filter-option :label="o.label" :value="o.value" v-for="o in showOptions" :key="o.value" />
       <el-popover popper-class="fu-filter-component-popover" :show-arrow="false" placement="bottom-start"
-                  trigger="click" width="240">
+        trigger="click" width="240">
         <el-select v-model="selection" v-bind="$attrs" :multiple="multiple" @change="change" :teleported="false"
-                   :placeholder="t('fu.search_bar.please_select')">
+          :size="size" :placeholder="t('fu.search_bar.please_select')">
           <el-option value="" v-if="useSelectAll && multiple">
             <div @click="selectAll">{{ t('fu.filter_bar.select_all') }}</div>
           </el-option>
-          <el-option :label="o.label" :value="o.value" v-for="o in options" :key="o.value"/>
+          <el-option :label="o.label" :value="o.value" v-for="o in options" :key="o.value" />
         </el-select>
         <template #reference>
           <div class="fu-filter-option">
             <el-icon>
-              <Plus/>
+              <Plus />
             </el-icon>
             {{ t('fu.filter_bar.more') }}
           </div>
@@ -26,15 +26,20 @@
 </template>
 
 <script setup lang="ts">
-import {ref, provide, computed, PropType, Ref, inject} from "vue";
+import { ref, provide, computed, PropType, Ref, inject } from "vue";
 import FuFilterOption from "./FuFilterOption.vue";
-import {FilterCondition, OptionProps, ReferenceContext, referenceKey, selectKey} from "../types";
+import { FilterCondition, OptionProps, ReferenceContext, referenceKey, selectKey } from "../types";
 
-import {useLocale} from "@/hooks"
+import { useLocale } from "@/hooks"
+import { validateSize } from "@/tools/size";
 defineOptions({ name: "FuFilterSelect" });
-const {t} = useLocale()
+const { t } = useLocale()
 
 const props = defineProps({
+  size: {
+    type: String,
+    validator: validateSize
+  },
   multiple: {
     type: Boolean,
     default: false
@@ -118,8 +123,8 @@ function getValueLabel(value: string | number) {
 
 function getCondition(): FilterCondition | undefined {
   if (!selection.value || (Array.isArray(selection.value) && selection.value.length === 0)) return;
-  let {field, label} = props
-  return {field, label, value: selection.value, valueLabel: valueLabel.value}
+  let { field, label } = props
+  return { field, label, value: selection.value, valueLabel: valueLabel.value }
 }
 
 function init(v: any) {
@@ -133,7 +138,7 @@ provide(selectKey, {
 
 const references = inject(referenceKey)
 const field = props.field
-const reference: ReferenceContext = {field, init, getCondition}
+const reference: ReferenceContext = { field, init, getCondition }
 references?.value.push(reference)
 
 defineExpose({

package/src/components/filter-bar/index.ts

@@ -1,19 +1,18 @@
-import FuSearchInput from "./FuSearchInput.vue"
+import FuSearchInput from "./FuSearchInput.vue";
 import FuFilterBar from "./FuFilterBar.vue";
 import FuFilter from "./FuFilter.vue";
 import FuFilterSelect from "./filter-components/FuFilterSelect.vue";
 import FuFilterDate from "./filter-components/FuFilterDate.vue";
 import FuFilterDateTime from "./filter-components/FuFilterDateTime.vue";
+import type { App } from "vue";
 
-import type {App} from 'vue'
+FuSearchInput.install = (app: App): void => {
+  app.component(FuFilterBar.name, FuFilterBar);
+  app.component(FuFilter.name, FuFilter);
+  app.component(FuSearchInput.name, FuSearchInput);
+  app.component(FuFilterSelect.name, FuFilterSelect);
+  app.component(FuFilterDate.name, FuFilterDate);
+  app.component(FuFilterDateTime.name, FuFilterDateTime);
+};
 
-export default {
-  install: (app: App): void => {
-    app.component(FuFilterBar.name, FuFilterBar)
-    app.component(FuFilter.name, FuFilter)
-    app.component(FuSearchInput.name, FuSearchInput)
-    app.component(FuFilterSelect.name, FuFilterSelect)
-    app.component(FuFilterDate.name, FuFilterDate)
-    app.component(FuFilterDateTime.name, FuFilterDateTime)
-  }
-}
+export default FuSearchInput;

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>
@@ -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 { 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.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;