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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fit2cloud-ui-plus",
-  "version": "0.0.1-beta.13",
+  "version": "0.0.1-beta.16",
   "private": false,
   "main": "./lib/fit2cloud-ui-plus.es.js",
   "files": [
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^1.1.4",
-    "element-plus": "^2.2.2",
+    "element-plus": "^2.2.13",
     "github-markdown-css": "^5.1.0",
     "prism-theme-vars": "^0.2.3",
     "prismjs": "^1.28.0",

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

@@ -1,44 +1,46 @@
 <template>
-  <div class="fu-filter" ref="filterRef">
-    <div class="fu-filter__result">{{ count }} <span style="opacity: 0.6">{{ t('fu.filter_bar.results') }}</span></div>
-    <div class="fu-filter__split" />
+  <div class="fu-filter" ref="filterRef" v-show="show">
+    <div class="fu-filter__result">{{ count }} <span style="opacity: 0.6">{{ t('fu.filter_bar.results') }}</span>
+    </div>
+    <div class="fu-filter__split"/>
 
     <div class="fu-filter__scroll" @mousedown="left" @mouseup="mouseup" v-if="scroll">
       <el-icon>
-        <ArrowLeftBold />
+        <ArrowLeftBold/>
       </el-icon>
     </div>
 
-    <fu-filter-conditions :conditions="conditions" @change="change" ref="conditionsRef" />
+    <fu-filter-conditions :conditions="conditions" @change="change" ref="conditionsRef"/>
 
     <div class="fu-filter__scroll" @mousedown="right" @mouseup="mouseup" v-if="scroll">
       <el-icon>
-        <ArrowRightBold />
+        <ArrowRightBold/>
       </el-icon>
     </div>
 
     <div class="fu-filter__clear fu-scale-click" @click="clear" v-if="conditions.length > 0">
       <el-icon>
-        <Delete />
+        <Delete/>
       </el-icon>
       {{ t('fu.filter_bar.clear') }}
     </div>
-
-    <el-drawer :size="drawerWidth" custom-class="fu-filter__drawer" :title="t('fu.filter_bar.drawer_title')"
-      v-model="drawer" @open="initComponents">
-      <div class="drawer-body">
-        <slot>
-          <component v-for="(c, i) in components" :key="i" :is="c.component" v-bind="c" :ref="c.field" v-on="c" :size="size"/>
-        </slot>
-      </div>
-      <div class="drawer-footer">
-        <slot name="footer">
-          <el-button :size="size" @click="drawer = false">{{ t('fu.filter_bar.cancel') }}</el-button>
-          <el-button :size="size" type="primary" @click="filter">{{ t('fu.filter_bar.search') }}</el-button>
-        </slot>
-      </div>
-    </el-drawer>
   </div>
+
+  <el-drawer :size="drawerWidth" custom-class="fu-filter__drawer" :title="t('fu.filter_bar.drawer_title')"
+             v-model="drawer" @open="initComponents">
+    <div class="drawer-body">
+      <slot>
+        <component v-for="(c, i) in components" :key="i" :is="c.component" v-bind="c" :ref="c.field" v-on="c"
+                   :size="size"/>
+      </slot>
+    </div>
+    <div class="drawer-footer">
+      <slot name="footer">
+        <el-button :size="size" @click="drawer = false">{{ t('fu.filter_bar.cancel') }}</el-button>
+        <el-button :size="size" type="primary" @click="filter">{{ t('fu.filter_bar.search') }}</el-button>
+      </slot>
+    </div>
+  </el-drawer>
 </template>
 
 <script setup lang="ts">
@@ -52,16 +54,17 @@ import {
   ComponentPublicInstance
 } from "vue";
 import FuFilterConditions from "./FuFilterConditions.vue";
-import { useLocale } from "@/hooks"
-import { validateSize } from "@/tools/size";
-import { FilterCondition, ReferenceContext, referenceKey } from "@/components/filter-bar/types";
-defineOptions({ name: "FuFilter" });
-const { t } = useLocale()
+import {useLocale} from "@/hooks"
+import {validateSize} from "@/tools/size";
+import {FilterCondition, ReferenceContext, referenceKey} from "@/components/filter-bar/types";
+
+defineOptions({name: "FuFilter"});
+const {t} = useLocale()
 
 const filterRef = ref<HTMLElement | null>(null)
 const conditionsRef = ref<ComponentPublicInstance | null>(null)
 
-defineProps({
+const props = defineProps({
   size: {
     type: String,
     validator: validateSize
@@ -74,7 +77,8 @@ defineProps({
   drawerWidth: {
     type: [Number, String],
     default: "680px"
-  }
+  },
+  showEmpty: Boolean
 })
 
 const emit = defineEmits(["filter"])
@@ -167,6 +171,10 @@ const scrollWidth = computed(() => {
   return el === null ? 0 : el.getBoundingClientRect().width - 210
 })
 
+const show = computed(() => {
+  return (conditions.value.length > 0 && props.showEmpty === false) || props.showEmpty
+})
+
 provide(referenceKey, references)
 
 onMounted(() => {

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

@@ -5,19 +5,19 @@
         <slot name="tl"></slot>
       </div>
       <div class="top_right">
-        <slot name="tr">
-          <fu-search-input :size="size" v-model="quick" :placeholder="quickPlaceholder" @change="change" />
-          <el-button @click="open" icon="Filter" :size="size">{{ t('fu.filter_bar.filter') }}
-            <span v-if="conditions.length > 0">({{ conditions.length }})</span>
-          </el-button>
+        <slot name="tr" :condition="conditionObj">
+          <fu-filter-input :size="size" v-model="quick" :placeholder="quickPlaceholder" @change="change"/>
         </slot>
+        <el-button class="fu-filter-button" @click="open" icon="Filter" :size="size">{{ t('fu.filter_bar.filter') }}
+          <span v-if="conditions.length > 0">({{ conditions.length }})</span>
+        </el-button>
 
         <slot name="buttons"></slot>
-
       </div>
     </div>
     <div class="fu-filter-bar__bottom">
-      <fu-filter ref="filterRef" @filter="filter" :count="resultCount" :components="components" :size="size">
+      <fu-filter ref="filterRef" @filter="filter" :count="resultCount" :components="components" :size="size"
+                 :show-empty="showEmpty">
         <slot></slot>
       </fu-filter>
     </div>
@@ -25,13 +25,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
-import { useLocale } from "@/hooks"
-import { validateSize } from "@/tools/size";
-import FuSearchInput from "@/components/filter-bar/FuSearchInput.vue";
+import {ref, computed} from "vue";
+import {useLocale} from "@/hooks"
+import {validateSize} from "@/tools/size";
+import FuFilterInput from "@/components/filter-bar/FuFilterInput.vue";
 import FuFilter from "@/components/filter-bar/FuFilter.vue";
-defineOptions({ name: "FuFilterBar" });
-const { t } = useLocale()
+
+defineOptions({name: "FuFilterBar"});
+const {t} = useLocale()
 defineProps({
   size: {
     type: String,
@@ -39,7 +40,11 @@ defineProps({
   },
   resultCount: Number,
   quickPlaceholder: String,
-  components: Array
+  components: Array,
+  showEmpty: {
+    type: Boolean,
+    default: false
+  }
 })
 
 const emit = defineEmits(["exec"])
@@ -67,7 +72,10 @@ function setConditions(conditionObj: any) {
 }
 
 const conditionObj = computed(() => {
-  let obj: any = { quick: quick.value }
+  let obj: any = {}
+  if (quick.value) {
+    obj.quick = quick.value
+  }
   conditions.value.forEach((c: any) => {
     obj[c.field] = c
   })
@@ -75,6 +83,7 @@ const conditionObj = computed(() => {
 });
 
 defineExpose({
-  setConditions
+  setConditions,
+  open
 })
 </script>

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

@@ -0,0 +1,45 @@
+<template>
+  <el-input class="fu-filter-input" prefix-icon="Search" v-model="quick" @input="input" @blur="blur" @keydown="keydown"
+            @clear="clear" v-bind="$attrs" clearable :size="size"/>
+</template>
+
+<script setup lang="ts">
+import {ref, watch} from "vue";
+import {validateSize} from "@/tools/size";
+
+defineOptions({name: "FuFilterInput"});
+
+const props = defineProps({
+  size: {
+    type: String,
+    validator: validateSize
+  },
+  modelValue: String,
+})
+const emit = defineEmits(["update:modelValue", "change"])
+const quick = ref("")
+
+watch(() => props.modelValue, (val: any) => {
+  quick.value = val
+})
+
+function input(e: Event) {
+  emit("update:modelValue", quick.value, e)
+}
+
+function blur(e: Event) {
+  emit("change", quick.value, e)
+}
+
+function clear() {
+  emit("update:modelValue", quick.value)
+  emit("change", quick.value)
+}
+
+function keydown(e: Event) {
+  const event = e as KeyboardEvent
+  if (event.key === "Enter") {
+    emit("change", quick.value, e)
+  }
+}
+</script>

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

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

package/src/components/read-write-switch/index.d.ts

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

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

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

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

@@ -0,0 +1,170 @@
+<template>
+  <div class="fu-complex-search">
+    <el-popover
+      trigger="manual"
+      v-model="active"
+      :visible-arrow="false"
+      @hide="closePopover"
+      popper-class="fu-complex-components">
+
+      <div class="fu-complex-components__body">
+        <slot></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>
+      </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>
+</template>
+
+<script setup lang="ts">
+import {ref, computed} from "vue";
+import {useLocale} from "@/hooks"
+import {validateSize} from "@/tools/size";
+import FuSearchBarButton from "@/components/search-bar/FuSearchBarButton";
+
+defineOptions({name: "FuComplexSearch"});
+
+defineProps({
+  size: {
+    type: String,
+    validator: validateSize
+  },
+  resultCount: Number,
+  quickPlaceholder: String,
+  components: Array
+})
+
+const emit = defineEmits(["exec"])
+
+const quick = ref("")
+const conditions = ref([])
+
+const filterRef = ref()
+
+const {t} = useLocale()
+
+function open() {
+  filterRef.value?.open()
+}
+
+function change() {
+  emit("exec", conditionObj.value)
+}
+
+function filter(c: any) {
+  conditions.value = c
+  emit("exec", conditionObj.value)
+}
+
+function setConditions(conditionObj: any) {
+  filterRef.value?.setConditions(conditionObj)
+}
+
+const conditionObj = computed(() => {
+  let obj: any = {quick: quick.value}
+  conditions.value.forEach((c: any) => {
+    obj[c.field] = c
+  })
+  return obj
+});
+
+defineExpose({
+  setConditions
+})
+</script>
+
+<script>
+import FuSearchBarButton from "@/components/search-bar/FuSearchBarButton";
+import Locale from "@/mixins/locale";
+import ConfigSize from "@/mixins/config-size";
+
+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)
+        }
+      })
+      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
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,94 @@
+<template>
+  <div :class="['fu-quick-search', 'fu-quick-search--' + size]">
+    <i class="el-icon-search" v-if="useIcon"/>
+    <label>
+      <input :placeholder="placeholder" v-model="quick" @input="input" @blur="blur" @keydown="keydown"/>
+    </label>
+  </div>
+</template>
+
+
+<script setup lang="ts">
+import {computed, ref, watch} from "vue";
+import {validateSize} from "@/tools/size";
+
+defineOptions({name: "FuFilterSelect"});
+
+const props = defineProps({
+  size: {
+    type: String,
+    validator: validateSize
+  },
+  modelValue: String,
+  placeholder: String,
+  useIcon: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const quick = ref<string>("")
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void
+  (e: "change", value: string, event: Event): void
+}>()
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit("update:modelValue", val as string)
+  }
+})
+
+function blur(e: Event) {
+  emit("change", quick.value, e)
+}
+
+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)
+      }
+    }
+  }
+}
+</script>