fit2cloud-ui-plus 0.0.1-beta.16 → 0.0.1-beta.19

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

@@ -6,7 +6,7 @@
       <el-popover popper-class="fu-filter-component-popover" :show-arrow="false" placement="bottom-start"
         trigger="click" width="240">
         <el-select v-model="selection" v-bind="$attrs" :multiple="multiple" @change="change" :teleported="false"
-          :size="size" :placeholder="t('fu.search_bar.please_select')">
+          :size="configSize" :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>
@@ -30,10 +30,9 @@ import { ref, provide, computed, PropType, Ref, inject } from "vue";
 import FuFilterOption from "./FuFilterOption.vue";
 import { FilterCondition, OptionProps, ReferenceContext, referenceKey, selectKey } from "../types";
 
-import { useLocale } from "@/hooks"
+import {useLocale, useSize} from "@/hooks"
 import { validateSize } from "@/tools/size";
 defineOptions({ name: "FuFilterSelect" });
-const { t } = useLocale()
 
 const props = defineProps({
   size: {
@@ -65,7 +64,7 @@ const props = defineProps({
 const emit = defineEmits(["change"])
 
 const selection: Ref<Array<string | number> | string | number> = ref(props.multiple ? [] : '')
-
+const configSize = useSize()
 const showOptions = computed(() => {
   return props.options.filter((o, i) => {
     let show = props.showLimit < 0 ? true : i < props.showLimit
@@ -88,6 +87,8 @@ const valueLabel = computed(() => {
   return getValueLabel(selection.value);
 })
 
+const { t } = useLocale()
+
 function change(v: string) {
   if (v.includes("")) {
     selection.value = props.options.map(o => o.value)

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

@@ -7,9 +7,9 @@
     </template>
     <template #default="{ read }">
       <el-select v-model="data" v-bind="$attrs" @input="input" @blur="blur(read, $event)"
-        @change="change(read, $event)">
+                 @change="change(read, $event)">
         <slot>
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
         </slot>
       </el-select>
     </template>
@@ -17,15 +17,22 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, PropType } from "vue";
-import { OptionProps } from "./types";
-defineOptions({ name: "FuSelectRwSwitch" });
+import FuReadWriteSwitch from "./FuReadWriteSwitch.vue";
+import {watch, ref, PropType} from "vue";
+import {OptionProps} from "./types";
+
+defineOptions({name: "FuSelectRwSwitch"});
+
 const props = defineProps({
   modelValue: [String, Number],
   options: {
     type: Array as PropType<OptionProps[]>,
     default: []
   },
+  blurTime: {
+    type: Number,
+    default: 150
+  },
   writeTrigger: {
     type: String,
     default: "onClick",
@@ -34,22 +41,28 @@ const props = defineProps({
     }
   }
 })
-const emit = defineEmits(["input", "blur", "change"])
+const emit = defineEmits(["input", "blur", "change", "update:modelValue"])
 const data = ref(props.modelValue)
 
 watch(() => props.modelValue, (v) => {
   data.value = v
 })
+
 function input(e: Event) {
   emit("input", data.value, e)
 }
+
 function blur(read: Function, e: Event) {
-  setTimeout(() => {
-    read()
-  }, 100)
-  emit("blur", data.value, e)
+  if (props.blurTime > 0) {
+    setTimeout(() => {
+      read()
+    }, props.blurTime)
+    emit("blur", e)
+  }
 }
+
 function change(read: Function, e: Event) {
+  emit("update:modelValue", data.value, e)
   emit("change", data.value, e)
   read()
 }

package/src/components/search-bar/FuComplexSearch.vue

@@ -1,170 +1,104 @@
 <template>
-  <div class="fu-complex-search">
-    <el-popover
-      trigger="manual"
-      v-model="active"
-      :visible-arrow="false"
-      @hide="closePopover"
-      popper-class="fu-complex-components">
-
+  <el-popover :visible="active" :show-arrow="false" @hide="hide" width="auto" popper-class="fu-complex-components">
+    <div class="fu-complex-components">
       <div class="fu-complex-components__body">
-        <slot></slot>
+        <slot>
+          <component v-for="c in components" :is="c.component" v-bind="c" :size="configSize"/>
+        </slot>
       </div>
       <div class="fu-complex-components__footer">
-        <el-button @click="active=false" :size="size">{{ t('fu.search_bar.cancel') }}</el-button>
-        <el-button type="primary" @click="ok" :size="size">{{ t('fu.search_bar.ok') }}</el-button>
+        <el-button @click="close" :size="configSize">{{ t('fu.search_bar.cancel') }}</el-button>
+        <el-button type="primary" @click="ok" :size="configSize">{{ t('fu.search_bar.ok') }}</el-button>
       </div>
-
-      <fu-search-bar-button
-        slot="reference"
-        icon="el-icon-arrow-right"
-        @click="toggle"
-        :size="size"
-        :class="['fu-complex-search__trigger',{'is-active':active}]"
-        :tooltip="t('fu.search_bar.adv_search')"/>
-    </el-popover>
-  </div>
+    </div>
+    <template #reference>
+      <el-button circle icon="ArrowRightBold" @click="toggle" :size="configSize" v-show="showComplex"
+                 :class="['fu-complex-components-trigger', {'is-active':active}]"/>
+    </template>
+  </el-popover>
 </template>
 
 <script setup lang="ts">
-import {ref, computed} from "vue";
-import {useLocale} from "@/hooks"
+import {ref, inject, computed, PropType} from "vue";
+import {useLocale, useSize} from "@/hooks"
 import {validateSize} from "@/tools/size";
-import FuSearchBarButton from "@/components/search-bar/FuSearchBarButton";
+import {ComplexCondition, referenceKey} from "./types";
 
 defineOptions({name: "FuComplexSearch"});
 
-defineProps({
+const props = defineProps({
   size: {
     type: String,
     validator: validateSize
   },
-  resultCount: Number,
-  quickPlaceholder: String,
-  components: Array
+  components: Array as PropType<any[]>,
 })
 
-const emit = defineEmits(["exec"])
+const emit = defineEmits(["close", "change"])
+
+const active = ref(false)
+const references = inject(referenceKey)
 
-const quick = ref("")
-const conditions = ref([])
+const configSize = useSize()
 
-const filterRef = ref()
+const showComplex = computed(() => {
+  return references ? references.value.length > 0 : false
+})
 
 const {t} = useLocale()
 
-function open() {
-  filterRef.value?.open()
+function hide() {
+  emit("close")
 }
 
-function change() {
-  emit("exec", conditionObj.value)
+function toggle() {
+  active.value = !active.value
+  if (active.value) {
+    references?.value.forEach(r => r.init())
+  }
 }
 
-function filter(c: any) {
-  conditions.value = c
-  emit("exec", conditionObj.value)
+function close() {
+  active.value = false
 }
 
-function setConditions(conditionObj: any) {
-  filterRef.value?.setConditions(conditionObj)
+function ok() {
+  close()
+  exec()
 }
 
-const conditionObj = computed(() => {
-  let obj: any = {quick: quick.value}
-  conditions.value.forEach((c: any) => {
-    obj[c.field] = c
+function exec() {
+  let conditions: any = [];
+  references?.value.forEach(r => {
+    let condition = r.getCondition()
+    if (condition && condition.value !== undefined) {
+      conditions.push(condition)
+    }
   })
-  return obj
-});
-
-defineExpose({
-  setConditions
-})
-</script>
-
-<script>
-import FuSearchBarButton from "@/components/search-bar/FuSearchBarButton";
-import Locale from "@/mixins/locale";
-import ConfigSize from "@/mixins/config-size";
+  emit("change", conditions)
+}
 
-export default {
-  name: "FuComplexSearch",
-  components: {FuSearchBarButton},
-  mixins: [Locale, ConfigSize],
-  props: {
-    components: Array,
-  },
-  data() {
-    return {
-      active: false,
-    }
-  },
-  methods: {
-    closePopover() {
-      this.$emit("close")
-    },
-    toggle() {
-      this.active = !this.active
-      this.refs.forEach(r => {
-        if (r.init) {
-          r.init()
-        } else {
-          console.warn("init undefined", r)
-        }
-      })
-    },
-    close() {
-      this.active = false
-    },
-    ok() {
-      this.active = false
-      let conditions = [];
-      this.refs.forEach(r => {
-        let condition
-        if (r.getCondition) {
-          condition = r.getCondition()
-        } else {
-          console.warn("getCondition undefined", r)
-        }
-        if (condition && condition.value !== undefined) {
-          conditions.push(condition)
+function setConditions(conditionObj: any): ComplexCondition[] {
+  let result: ComplexCondition[] = []
+  if (conditionObj) {
+    Object.keys(conditionObj).forEach(key => {
+      let c = conditionObj[key]
+      references?.value.forEach(r => {
+        if (r.field === key) {
+          r.init(c.value)
+          const condition = r.getCondition()
+          if (condition) {
+            result.push(condition)
+          }
         }
       })
-      this.$emit("change", conditions)
-    },
-    createConditions(conditions) {
-      let result = []
-      if (conditions) {
-        Object.keys(conditions).forEach(key => {
-          let c = conditions[key]
-          this.refs.forEach(r => {
-            if (r.field === key) {
-              result.push(r.createCondition(c.value, c.operator))
-            }
-          })
-        })
-      }
-      return result
-    }
-  },
-  computed: {
-    refs() {
-      let refs = [];
-      if (this.$slots?.default) {
-        // 使用slot
-        this.$slots.default.forEach(component => {
-          refs.push(component.componentInstance)
-        })
-      } else {
-        // 使用components
-        let $refs = this.$refs
-        this.components.forEach(c => {
-          refs.push($refs[c.field][0])
-        })
-      }
-      return refs
-    }
+    })
   }
+  return result
 }
+
+defineExpose({
+  setConditions,
+  close
+})
 </script>

package/src/components/search-bar/FuQuickSearch.vue

@@ -1,8 +1,10 @@
 <template>
-  <div :class="['fu-quick-search', 'fu-quick-search--' + size]">
-    <i class="el-icon-search" v-if="useIcon"/>
+  <div :class="['fu-quick-search', 'fu-quick-search--' + configSize]">
+    <el-icon v-if="useIcon">
+      <Search/>
+    </el-icon>
     <label>
-      <input :placeholder="placeholder" v-model="quick" @input="input" @blur="blur" @keydown="keydown"/>
+      <input :placeholder="placeholder" v-model="value" @blur="blur" @focus="focus" @keydown="keydown"/>
     </label>
   </div>
 </template>
@@ -11,8 +13,9 @@
 <script setup lang="ts">
 import {computed, ref, watch} from "vue";
 import {validateSize} from "@/tools/size";
+import {useSize} from "@/hooks";
 
-defineOptions({name: "FuFilterSelect"});
+defineOptions({name: "FuQuickSearch"});
 
 const props = defineProps({
   size: {
@@ -27,12 +30,11 @@ const props = defineProps({
   }
 })
 
-const quick = ref<string>("")
+const focused = ref(false)
 
-const emit = defineEmits<{
-  (e: "update:modelValue", value: string): void
-  (e: "change", value: string, event: Event): void
-}>()
+const emit = defineEmits(["update:modelValue", "change"])
+
+const configSize = useSize()
 
 const value = computed({
   get: () => props.modelValue,
@@ -41,54 +43,22 @@ const value = computed({
   }
 })
 
+function focus() {
+  focused.value = true
+}
+
 function blur(e: Event) {
-  emit("change", quick.value, e)
+  if (focused.value) {
+    emit("change", value.value, e)
+  }
+  focused.value = false
 }
 
 function keydown(e: KeyboardEvent) {
   const {code} = e
   if (code === "Enter") {
-    emit("change", quick.value, e)
-  }
-}
-</script>
-
-<script>
-import ConfigSize from "@/mixins/config-size";
-
-export default {
-  name: "FuQuickSearch",
-  mixins: [ConfigSize],
-  props: {
-    value: String,
-    placeholder: String,
-    useIcon: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      quick: ""
-    }
-  },
-  watch: {
-    value(v) {
-      this.quick = v
-    }
-  },
-  methods: {
-    input(e) {
-      this.$emit("input", this.quick, e)
-    },
-    blur(e) {
-      this.$emit("change", this.quick, e)
-    },
-    keydown(e) {
-      if (e.keyCode === 13) {
-        this.$emit("change", this.quick, e)
-      }
-    }
+    focused.value = false
+    emit("change", value.value, e)
   }
 }
 </script>