fit2cloud-ui-plus 0.0.1-beta.9 → 1.0.0-beta.1

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

@@ -5,17 +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="configSize" v-model="quick" :placeholder="quickPlaceholder" @change="change"/>
         </slot>
+        <el-button class="fu-filter-button" @click="open" icon="Filter" :size="configSize">{{ 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="configSize"
+                 :show-empty="showEmpty">
         <slot></slot>
       </fu-filter>
     </div>
@@ -23,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, useSize} 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,
@@ -37,14 +40,18 @@ defineProps({
   },
   resultCount: Number,
   quickPlaceholder: String,
-  components: Array
+  components: Array,
+  showEmpty: {
+    type: Boolean,
+    default: false
+  }
 })
 
 const emit = defineEmits(["exec"])
 
+const configSize = useSize()
 const quick = ref("")
 const conditions = ref([])
-
 const filterRef = ref()
 
 function open() {
@@ -65,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
   })
@@ -73,6 +83,7 @@ const conditionObj = computed(() => {
 });
 
 defineExpose({
-  setConditions
+  setConditions,
+  open
 })
 </script>

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

@@ -0,0 +1,48 @@
+<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="configSize"/>
+</template>
+
+<script setup lang="ts">
+import {ref, watch} from "vue";
+import {validateSize} from "@/tools/size";
+import {useSize} from "@/hooks";
+
+defineOptions({name: "FuFilterInput"});
+
+const props = defineProps({
+  size: {
+    type: String,
+    validator: validateSize
+  },
+  modelValue: String,
+})
+
+const emit = defineEmits(["update:modelValue", "change"])
+const quick = ref("")
+const configSize = useSize()
+
+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/filter-components/FuFilterDate.vue

@@ -3,22 +3,23 @@
     <div class="fu-filter-component__label">{{ label }}</div>
     <div class="fu-filter-component__content">
       <!--configSize-->
-      <el-date-picker class="fu-filter-date" v-model="value" v-bind="$attrs" :size="size"
-        :placeholder="t('fu.search_bar.select_date')" type="daterange" :value-format="valueFormat"
-        :start-placeholder="t('fu.search_bar.start_date')" :end-placeholder="t('fu.search_bar.end_date')">
+      <el-date-picker class="fu-filter-date" v-model="value" v-bind="$attrs" :size="configSize"
+                      :placeholder="t('fu.search_bar.select_date')" type="daterange" :value-format="valueFormat"
+                      :start-placeholder="t('fu.search_bar.start_date')" :end-placeholder="t('fu.search_bar.end_date')">
       </el-date-picker>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, inject } from "vue";
-import { FilterCondition, ReferenceContext, referenceKey } from "../types";
-import { dateFormat } from "@/tools/time";
-import { useLocale } from "@/hooks"
-import { validateSize } from "@/tools/size";
-defineOptions({ name: "FuFilterDate" });
-const { t } = useLocale()
+import {ref, computed, inject} from "vue";
+import {FilterCondition, ReferenceContext, referenceKey} from "../types";
+import {dateFormat} from "@/tools/time";
+import {useLocale, useSize} from "@/hooks"
+import {validateSize} from "@/tools/size";
+
+defineOptions({name: "FuFilterDate"});
+
 const props = defineProps({
   size: {
     type: String,
@@ -35,6 +36,7 @@ const props = defineProps({
   },
 })
 const value = ref('')
+const configSize = useSize()
 
 const valueLabel = computed(() => {
   return (
@@ -44,10 +46,12 @@ const valueLabel = computed(() => {
   );
 })
 
+const {t} = useLocale()
+
 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) {
@@ -56,7 +60,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/FuFilterDateTime.vue

@@ -3,7 +3,7 @@
     <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" :size="size"
+      <el-date-picker class="fu-filter-date" v-model="value" v-bind="$attrs" :size="configSize"
         :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>
@@ -15,10 +15,9 @@
 import { ref, computed, inject } from "vue";
 import { FilterCondition, ReferenceContext, referenceKey } from "../types";
 import { datetimeFormat } from "@/tools/time";
-import { useLocale } from "@/hooks"
+import {useLocale, useSize} from "@/hooks"
 import { validateSize } from "@/tools/size";
 defineOptions({ name: "FuFilterDateTime" });
-const { t } = useLocale()
 
 const props = defineProps({
   size: {
@@ -37,7 +36,7 @@ const props = defineProps({
 })
 
 const value = ref('')
-
+const configSize = useSize()
 const valueLabel = computed(() => {
   return (
     datetimeFormat(value.value[0]) +
@@ -45,6 +44,7 @@ const valueLabel = computed(() => {
     datetimeFormat(value.value[1])
   );
 })
+const { t } = useLocale()
 
 function getCondition(): FilterCondition | undefined {
   if (!String(value.value)) return;

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/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/icon-button/FuIconButton.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="fu-icon-button" :class="[{'is-disabled':disabled}, typeClass]" :tabindex="tabindex" @click="click">
+    <slot>
+      <el-icon :color="color" :size="size" :class="{'is-loading': loading}">
+        <component :is="name"/>
+      </el-icon>
+    </slot>
+  </div>
+</template>
+
+
+<script setup lang="ts">
+
+import {computed} from "vue";
+import {validateType} from "@/tools/theme";
+
+defineOptions({name: "FuIconButton"});
+
+const props = defineProps({
+  name: String,
+  size: {
+    type: [Number, String],
+    default: 20,
+  },
+  color: String,
+  loading: Boolean,
+  disabled: Boolean,
+  type: {
+    type: String,
+    validator: validateType
+  },
+  tabindex: {
+    type: [String, Number],
+    default: 0,
+  },
+})
+
+const typeClass = computed(() => {
+  return props.type ? `fu-icon-button--${props.type}` : ""
+})
+
+const emit = defineEmits(["click"])
+
+function click(e: MouseEvent) {
+  if (!props.disabled) {
+    emit("click", e)
+  }
+}
+
+</script>
+
+<style scoped>
+
+</style>

package/src/components/icon-button/index.ts

@@ -0,0 +1,9 @@
+import FuIconButton from "./FuIconButton.vue"
+
+import type {App} from 'vue'
+
+FuIconButton.install = (app: App): void => {
+  app.component(FuIconButton.name, FuIconButton)
+}
+
+export default FuIconButton;

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

@@ -0,0 +1,104 @@
+<template>
+  <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>
+          <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="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>
+    </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, inject, computed, PropType} from "vue";
+import {useLocale, useSize} from "@/hooks"
+import {validateSize} from "@/tools/size";
+import {ComplexCondition, referenceKey} from "./types";
+
+defineOptions({name: "FuComplexSearch"});
+
+const props = defineProps({
+  size: {
+    type: String,
+    validator: validateSize
+  },
+  components: Array as PropType<any[]>,
+})
+
+const emit = defineEmits(["close", "change"])
+
+const active = ref(false)
+const references = inject(referenceKey)
+
+const configSize = useSize()
+
+const showComplex = computed(() => {
+  return references ? references.value.length > 0 : false
+})
+
+const {t} = useLocale()
+
+function hide() {
+  emit("close")
+}
+
+function toggle() {
+  active.value = !active.value
+  if (active.value) {
+    references?.value.forEach(r => r.init())
+  }
+}
+
+function close() {
+  active.value = false
+}
+
+function ok() {
+  close()
+  exec()
+}
+
+function exec() {
+  let conditions: any = [];
+  references?.value.forEach(r => {
+    let condition = r.getCondition()
+    if (condition && condition.value !== undefined) {
+      conditions.push(condition)
+    }
+  })
+  emit("change", conditions)
+}
+
+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)
+          }
+        }
+      })
+    })
+  }
+  return result
+}
+
+defineExpose({
+  setConditions,
+  close
+})
+</script>

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

@@ -0,0 +1,64 @@
+<template>
+  <div :class="['fu-quick-search', 'fu-quick-search--' + configSize]">
+    <el-icon v-if="useIcon">
+      <Search/>
+    </el-icon>
+    <label>
+      <input :placeholder="placeholder" v-model="value" @blur="blur" @focus="focus" @keydown="keydown"/>
+    </label>
+  </div>
+</template>
+
+
+<script setup lang="ts">
+import {computed, ref, watch} from "vue";
+import {validateSize} from "@/tools/size";
+import {useSize} from "@/hooks";
+
+defineOptions({name: "FuQuickSearch"});
+
+const props = defineProps({
+  size: {
+    type: String,
+    validator: validateSize
+  },
+  modelValue: String,
+  placeholder: String,
+  useIcon: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const focused = ref(false)
+
+const emit = defineEmits(["update:modelValue", "change"])
+
+const configSize = useSize()
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit("update:modelValue", val as string)
+  }
+})
+
+function focus() {
+  focused.value = true
+}
+
+function blur(e: Event) {
+  if (focused.value) {
+    emit("change", value.value, e)
+  }
+  focused.value = false
+}
+
+function keydown(e: KeyboardEvent) {
+  const {code} = e
+  if (code === "Enter") {
+    focused.value = false
+    emit("change", value.value, e)
+  }
+}
+</script>