fit2cloud-ui-plus 0.0.1-beta.0

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

@@ -0,0 +1,65 @@
+<template>
+  <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"
+                      :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"
+defineOptions({ name: "FuFilterDateTime" });
+const {t} = useLocale()
+
+const props = defineProps({
+  label: String,
+  field: {
+    type: String,
+    required: true
+  },
+  valueFormat: {
+    type: String,
+    default: "x",
+  },
+})
+
+const value = ref('')
+
+const valueLabel = computed(() => {
+  return (
+    datetimeFormat(value.value[0]) +
+    " - " +
+    datetimeFormat(value.value[1])
+  );
+})
+
+function getCondition(): FilterCondition | undefined {
+  if (!String(value.value)) return;
+  let {field, label} = props
+  return {field, label, value: value.value, valueLabel: valueLabel.value}
+}
+
+function init(v: any) {
+  value.value = v !== undefined ? v : ''
+}
+
+const references = inject(referenceKey)
+const field = props.field
+const reference: ReferenceContext = {field, init, getCondition}
+references?.value.push(reference)
+
+defineExpose({
+  getCondition,
+  init
+})
+</script>

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="fu-filter-option" :class="{ 'is-selected': selected, 'is-disabled': disabled }" @click.stop="click">
+    {{ label || value }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, inject} from "vue";
+import {selectKey} from "@/components/filter-bar/types";
+
+const props = defineProps({
+  value: {
+    type: [String, Number],
+    required: true
+  },
+  label: [String, Number],
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const select = inject(selectKey)
+
+const selected = computed(() => {
+  if (!select) return false
+  if (Array.isArray(select.selection.value)) {
+    return select.selection.value.includes(props.value)
+  } else {
+    return select.selection.value === props.value
+  }
+})
+
+function click() {
+  select?.setSelected(props.value, selected.value)
+}
+
+</script>

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

@@ -0,0 +1,143 @@
+<template>
+  <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"/>
+      <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"
+                   :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-select>
+        <template #reference>
+          <div class="fu-filter-option">
+            <el-icon>
+              <Plus/>
+            </el-icon>
+            {{ t('fu.filter_bar.more') }}
+          </div>
+        </template>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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"
+defineOptions({ name: "FuFilterSelect" });
+const {t} = useLocale()
+
+const props = defineProps({
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  showLimit: {
+    type: Number,
+    default: 3 // -1 全显示
+  },
+  useSelectAll: {
+    type: Boolean,
+    default: false
+  },
+  label: String,
+  field: {
+    type: String,
+    required: true
+  },
+  options: {
+    type: Array as PropType<OptionProps[]>,
+    default: []
+  }
+})
+const emit = defineEmits(["change"])
+
+const selection: Ref<Array<string | number> | string | number> = ref(props.multiple ? [] : '')
+
+const showOptions = computed(() => {
+  return props.options.filter((o, i) => {
+    let show = props.showLimit < 0 ? true : i < props.showLimit
+    if (Array.isArray(selection.value)) {
+      return show || selection.value.includes(o.value)
+    } else {
+      return show || selection.value === o.value
+    }
+  })
+})
+
+const valueLabel = computed(() => {
+  if (Array.isArray(selection.value)) {
+    let values: any = []
+    selection.value.forEach((v: any) => {
+      values.push(getValueLabel(v))
+    })
+    return values.join(", ");
+  }
+  return getValueLabel(selection.value);
+})
+
+function change(v: string) {
+  if (v.includes("")) {
+    selection.value = props.options.map(o => o.value)
+  }
+  emit("change", selection.value)
+}
+
+function setSelected(value: string | number, selected: boolean) {
+  if (!Array.isArray(selection.value)) {
+    selection.value = selected ? '' : value
+    return
+  }
+  if (selected) {
+    let index = selection.value.indexOf(value)
+    selection.value.splice(index, 1)
+  } else {
+    selection.value.push(value)
+  }
+}
+
+function selectAll() {
+  selection.value = props.options.map(o => o.value)
+}
+
+function getValueLabel(value: string | number) {
+  for (let o of props.options) {
+    if (o.value === value) {
+      return o.label
+    }
+  }
+  return value
+}
+
+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}
+}
+
+function init(v: any) {
+  selection.value = v !== undefined ? v : props.multiple ? [] : ''
+}
+
+provide(selectKey, {
+  setSelected,
+  selection: selection,
+})
+
+const references = inject(referenceKey)
+const field = props.field
+const reference: ReferenceContext = {field, init, getCondition}
+references?.value.push(reference)
+
+defineExpose({
+  getCondition,
+  init,
+})
+</script>

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

@@ -0,0 +1,19 @@
+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'
+
+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)
+  }
+}

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

@@ -0,0 +1,31 @@
+import {InjectionKey, Ref} from "vue";
+
+export const selectKey = Symbol('SelectKey') as unknown as InjectionKey<SelectContext>
+
+export interface SelectContext {
+  selection: Ref<Array<string | number> | string | number>
+
+  setSelected(value: string | number, selected: boolean): void
+}
+
+export const referenceKey = Symbol('ReferenceKey') as unknown as InjectionKey<Ref<ReferenceContext[]>>
+
+export interface ReferenceContext {
+  field: string,
+
+  init(v: any): void
+
+  getCondition(): FilterCondition | undefined
+}
+
+export interface OptionProps {
+  label: string
+  value: string | number
+}
+
+export interface FilterCondition {
+  field: string
+  label?: string
+  value: any
+  valueLabel?: string
+}

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

@@ -0,0 +1,44 @@
+<template>
+  <fu-read-write-switch :write-trigger="writeTrigger" :data="data">
+    <template #default="{ read }">
+      <el-input v-model="data" v-bind="$attrs" @input="input" @blur="blur(read, $event)"
+        @keydown="keydown(read, $event)" />
+    </template>
+  </fu-read-write-switch>
+</template>
+
+<script setup lang="ts">
+
+import { ref, watch } from "vue";
+defineOptions({ name: "FuInputRwSwitch" });
+const props = defineProps({
+  value: [String, Number],
+  writeTrigger: {
+    type: String,
+    default: "click",
+    validator: (value: string) => {
+      return ['click', 'dblclick'].includes(value)
+    }
+  }
+})
+const emit = defineEmits(["input", "blur"])
+
+const data = ref(props.value)
+
+watch(() => props.value, (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()
+  }
+}
+</script>

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

@@ -0,0 +1,91 @@
+<script lang="ts">
+import { ref, watch, defineComponent, h, nextTick } from 'vue'
+import { uuid } from "@/tools/utils"
+
+const TRIGGERS = ['manual', 'click', 'dblclick']
+
+export default defineComponent({
+  name: "FuReadWriteSwitch",
+  props: {
+    value: Boolean,
+    data: [String, Number, Boolean],
+    writeTrigger: {
+      type: String,
+      default: "click",
+      validator: (value: string) => {
+        return TRIGGERS.includes(value)
+      }
+    }
+  },
+
+  setup(props, { slots, emit }) {
+    const id = ref(uuid())
+    const write = ref(props.value === undefined ? false : props.value)
+    watch(() => props.value, (v) => {
+          console.log(v)
+      if (v === write.value) return
+
+      if (v) {
+        switchWrite()
+      } else {
+        switchRead()
+      }
+    })
+
+    function change() {
+      emit("input", write.value)
+      emit("change", [props.data, write.value])
+    }
+    function switchWrite() {
+      write.value = true
+  
+      nextTick(() => {
+        // 目前只支持input和textarea自动获取焦点
+        const nid = document.getElementById(id.value)
+        const input = nid?.querySelector("input")
+        input?.click() // el-select等组件自动展开
+        input?.focus()
+        const textarea = nid?.querySelector("textarea")
+        textarea?.focus()
+
+        // 可以在change事件自定义获取焦点
+        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
+
+    // 读状态内容，提供切换到写状态的方法
+    if (!write.value && slots.read) {
+      children = slots.read({
+        write: switchWrite
+      })
+    }
+
+    // 写状态内容，提供切换到读状态的方法
+    if (write.value && slots.default) {
+      children = slots.default({
+        read: switchRead
+      })
+    }
+
+     return () => h("div", context, children)
+  }
+
+})
+</script>

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

@@ -0,0 +1,53 @@
+<template>
+  <fu-read-write-switch :write-trigger="writeTrigger" :data="data">
+    <template #read>
+      <slot name="read">
+        {{ data }}
+      </slot>
+    </template>
+    <template #default="{ read }">
+      <el-select v-model="data" v-bind="$attrs" @input="input" @blur="blur(read, $event)"
+        @change="change(read, $event)">
+        <slot>
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </slot>
+      </el-select>
+    </template>
+  </fu-read-write-switch>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+defineOptions({ name: "FuSelectRwSwitch" });
+const props = defineProps({
+  value: [String, Number],
+  options: Array,
+  writeTrigger: {
+    type: String,
+    default: "click",
+    validator: (value: string) => {
+      return ['click', 'dblclick'].includes(value)
+    }
+  }
+})
+const emit = defineEmits(["input", "blur", "change"])
+const data = ref(props.value)
+
+watch(() => props.value, (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)
+}
+function change(read: Function, e: Event) {
+  emit("change", data.value, e)
+  read()
+}
+
+</script>

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

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

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

@@ -0,0 +1,108 @@
+<template>
+  <div class="fu-complex-search">
+    <el-popover trigger="manual" v-model="active" :show-arrow="false" @hide="closePopover"
+      popper-class="fu-complex-components">
+
+      <div class="fu-complex-components__body">
+        <slot>
+          <!-- :size="configSize" -->
+          <component v-for="(c, i) in components" :key="i" :is="c.component" v-bind="c" :ref="c.field" v-on="c" />
+        </slot>
+      </div>
+      <div class="fu-complex-components__footer">
+        <!--  :size="configSize" -->
+        <el-button @click="active = false">{{ t('fu.search_bar.cancel') }}</el-button>
+        <el-button type="primary" @click="ok">{{ t('fu.search_bar.ok') }}</el-button>
+      </div>
+      <template #reference>
+        <!--  :size="configSize" -->
+        <fu-search-bar-button icon="ArrowRight" @click="toggle"
+          :class="['fu-complex-search__trigger', { 'is-active': active }]" :tooltip="t('fu.search_bar.adv_search')" />
+      </template>
+    </el-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, useSlots, getCurrentInstance } from "vue";
+import FuSearchBarButton from "@/components/search-bar/FuSearchBarButton.vue";
+import { useLocale } from "@/hooks"
+
+const slots = useSlots()
+const instance = getCurrentInstance()
+
+const props = defineProps({
+  components: Array,
+});
+const emit = defineEmits(["close", "change"])
+const { t } = useLocale()
+const active = ref(false)
+
+
+function closePopover() {
+  emit("close")
+}
+function toggle() {
+  active.value = !active.value
+  refs.value.forEach((r: any) => {
+    // *****r.init  有问题
+    if (r?.init) {
+      r.init()
+    } else {
+      console.warn("init undefined", r)
+    }
+  })
+}
+
+function close() {
+  active.value = false
+}
+function ok() {
+  active.value = false
+  let conditions: any = [];
+  refs.value.forEach((r: any) => {
+    let condition
+    if (r.getCondition) {
+      condition = r.getCondition()
+    } else {
+      console.warn("getCondition undefined", r)
+    }
+    if (condition && condition.value !== undefined) {
+      conditions.push(condition)
+    }
+  })
+  emit("change", conditions)
+}
+
+function createConditions(conditions: any) {
+  let result: any = []
+  if (conditions) {
+    Object.keys(conditions).forEach(key => {
+      let c = conditions[key]
+      refs.value.forEach((r: any) => {
+        if (r.field === key) {
+          result.push(r.createCondition(c.value, c.operator))
+        }
+      })
+    })
+  }
+  return result
+}
+const refs = computed(() => {
+  let refs: any = [];
+  if (slots.default?.()[0].children.length) {
+    // 使用slot
+    slots.default?.().forEach((component: any) => {
+      refs.push(component.componentInstance)
+    })
+  } else {
+    // 使用components
+    props.components.forEach((c: any) => {
+      refs.push(instance.refs[c.field][0])
+    })
+  }
+  return refs
+});
+
+
+</script>

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

@@ -0,0 +1,43 @@
+<template>
+  <!-- , 'fu-quick-search--' + configSize -->
+  <div :class="['fu-quick-search']">
+    <el-icon v-if="useIcon">
+      <Search />
+    </el-icon>
+    <label>
+      <input :placeholder="placeholder" v-model="quick" @input="input" @blur="blur" @keydown="keydown" />
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+defineOptions({ name: "FuQuickSearch" });
+const props = defineProps({
+  value: String,
+  placeholder: String,
+  useIcon: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(["input", "change"])
+const quick = ref("")
+
+watch(() => props.value, (val: any) => {
+  quick.value = val
+})
+function input(e: Event) {
+  emit("input", quick.value, e)
+}
+function blur(e: Event) {
+  emit("change", quick.value, e)
+}
+function keydown(e: Event) {
+  const event = e as KeyboardEvent
+  if (event.key === "Enter") {
+    emit("change", quick.value, e)
+  }
+}
+</script>