fit2cloud-ui-plus 0.0.1-beta.8 → 1.0.0-beta.2

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

@@ -5,43 +5,53 @@
         <slot name="tl"></slot>
       </div>
       <div class="top_right">
-        <slot name="tr">
-          <!-- :size="configSize" -->
-          <FuSearchInput v-model="quick" :placeholder="quickPlaceholder" @change="change"/>
-          <el-button @click="open" icon="Filter">{{ 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">
-      <FuFilter ref="filterRef" @filter="filter" :count="resultCount" :components="components">
+      <fu-filter ref="filterRef" @filter="filter" :count="resultCount" :components="components" :size="configSize"
+                 :show-empty="showEmpty">
         <slot></slot>
-      </FuFilter>
+      </fu-filter>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import {ref, computed} from "vue";
-import {useLocale} from "@/hooks"
-import FuSearchInput from "@/components/filter-bar/FuSearchInput.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()
 
-const props = defineProps({
+defineOptions({name: "FuFilterBar"});
+const {t} = useLocale()
+defineProps({
+  size: {
+    type: String,
+    validator: validateSize
+  },
   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() {
@@ -62,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
   })
@@ -70,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

@@ -2,8 +2,8 @@
   <div class="fu-filter-component">
     <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"
+      <!--configSize-->
+      <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>
@@ -15,11 +15,16 @@
 import {ref, computed, inject} from "vue";
 import {FilterCondition, ReferenceContext, referenceKey} from "../types";
 import {dateFormat} from "@/tools/time";
-import {useLocale} from "@/hooks"
-defineOptions({ name: "FuFilterDate" });
-const {t} = useLocale()
+import {useLocale, useSize} from "@/hooks"
+import {validateSize} from "@/tools/size";
+
+defineOptions({name: "FuFilterDate"});
 
 const props = defineProps({
+  size: {
+    type: String,
+    validator: validateSize
+  },
   label: String,
   field: {
     type: String,
@@ -31,6 +36,7 @@ const props = defineProps({
   },
 })
 const value = ref('')
+const configSize = useSize()
 
 const valueLabel = computed(() => {
   return (
@@ -40,6 +46,8 @@ const valueLabel = computed(() => {
   );
 })
 
+const {t} = useLocale()
+
 function getCondition(): FilterCondition | undefined {
   if (!String(value.value)) return;
   let {field, label} = props

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

@@ -3,25 +3,27 @@
     <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="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>
     </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, useSize} from "@/hooks"
+import { validateSize } from "@/tools/size";
 defineOptions({ name: "FuFilterDateTime" });
-const {t} = useLocale()
 
 const props = defineProps({
+  size: {
+    type: String,
+    validator: validateSize
+  },
   label: String,
   field: {
     type: String,
@@ -34,7 +36,7 @@ const props = defineProps({
 })
 
 const value = ref('')
-
+const configSize = useSize()
 const valueLabel = computed(() => {
   return (
     datetimeFormat(value.value[0]) +
@@ -42,11 +44,12 @@ const valueLabel = computed(() => {
     datetimeFormat(value.value[1])
   );
 })
+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) {
@@ -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="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>
-          <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,19 @@
 </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, useSize} from "@/hooks"
+import { validateSize } from "@/tools/size";
 defineOptions({ name: "FuFilterSelect" });
-const {t} = useLocale()
 
 const props = defineProps({
+  size: {
+    type: String,
+    validator: validateSize
+  },
   multiple: {
     type: Boolean,
     default: false
@@ -60,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
@@ -83,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)
@@ -118,8 +124,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 +139,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 FuFilterInput from "./FuFilterInput.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'
+FuFilterBar.install = (app: App): void => {
+  app.component(FuFilterBar.name, FuFilterBar);
+  app.component(FuFilter.name, FuFilter);
+  app.component(FuFilterInput.name, FuFilterInput);
+  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 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>