fit2cloud-ui-plus 0.0.1-beta.1 → 0.0.1-beta.10

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

@@ -1,108 +0,0 @@
-<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

@@ -1,43 +0,0 @@
-<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>

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

@@ -1,165 +0,0 @@
-<template>
-  <div class="fu-search-bar">
-    <div class="fu-search-bar__content">
-       <!-- :size="configSize" -->
-      <fu-complex-search ref="complex" :components="components" @change="change" v-if="showComplex" @close="closePopover">
-        <slot name="complex" />
-      </fu-complex-search>
-       <!-- :size="configSize" -->
-      <fu-search-conditions :conditions="conditions" @change="change" v-if="showComplex"/>
-      <!-- :size="configSize" -->
-      <fu-quick-search :use-icon="!showComplex" :placeholder="placeholder" v-model="quick"
-                       @change="quickChange" v-if="useQuickSearch"/>
-    </div>
-    <div class="fu-search-bar__buttons">
-      <slot name="buttons">
-        <!-- :size="configSize" -->
-        <fu-search-bar-button icon="Close" @click="clean" :tooltip="t('fu.search_bar.clean')"
-          v-if="showClean" />
-          <!-- :size="configSize" -->
-        <fu-search-bar-button icon="Refresh" @click="refresh"
-          :tooltip="t('fu.search_bar.refresh')" v-if="showRefresh" />
-        <slot />
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, useSlots } from "vue";
-import FuQuickSearch from "./FuQuickSearch.vue";
-import FuComplexSearch from "./FuComplexSearch.vue";
-import FuSearchBarButton from "@/components/search-bar/FuSearchBarButton.vue";
-import FuSearchConditions from "@/components/search-bar/FuSearchContions.vue";
-import ComplexCondition from "@/components/search-bar/store";
-import { useLocale } from "@/hooks"
-defineOptions({ name: "FuSearchBar" });
-const { t } = useLocale()
-
-const slots = useSlots()
-
-const props = defineProps({
-  quickKey: {
-    type: String,
-    default: "quick"
-  },
-  quickPlaceholder: String,
-  useCleanButton: { // 是否使用清除按钮
-    type: Boolean,
-    default: true
-  },
-  useRefreshButton: { // 是否使用刷新按钮
-    type: Boolean,
-    default: false
-  },
-  useQuickSearch: { // 是否使用快速搜索
-    type: Boolean,
-    default: true
-  },
-  components: Array,
-})
-
-const emit = defineEmits(["close", "exec"])
-
-
-const quick = ref("")
-const conditions = ref([])
-
-// refs
-
-const complex = ref();
-
-// target覆盖source相同的field
-function merge(source: any, target: any) {
-  let conditions = source.concat(target)
-  let conditionMap = new Map()
-
-  for (let condition of conditions) {
-    conditionMap.set(condition.field, condition)
-  }
-  let result: any = [];
-  conditionMap.forEach(c => {
-    result.push(c)
-  })
-
-  return result
-}
-
-
-
-
-function closePopover() {
-  emit("close")
-}
-function setConditions(conditions: any) {
-  conditions.value = complex.value.createConditions(conditions)
-
-  if (props.useQuickSearch && conditions[props.quickKey] !== undefined) {
-    quick.value = conditions[props.quickKey].value
-    quickChange(quick.value)
-  } else {
-    refresh()
-  }
-}
-function quickChange(value: string, e?: any) {
-  if (value) {
-    const field = props.quickKey
-    const valueLabel = value
-    // *****此处有问题，待解决
-    conditions.value = merge(conditions.value, [new ComplexCondition({ field, value, valueLabel })])
-    exec(e)
-    quick.value = "";
-  }
-}
-function change(conditions: any) {
-  conditions.value = merge(conditions.value, conditions)
-  exec()
-}
-function clean() {
-  quick.value = ""
-  conditions.value = []
-  emit("exec", conditions.value)
-}
-function refresh() {
-  complex.value.close()
-  exec()
-}
-function exec() {
-  // 只有快速搜索
-  if (!showComplex) {
-    emit("exec", quick.value )
-    return
-  }
-  emit("exec", condition.value )
-}
-
-const placeholder = computed(() => {
-  return props.quickPlaceholder ? props.quickPlaceholder : t('fu.search_bar.search')
-});
-const showComplex = computed(() => {
-  if (slots?.complex) return true
-  return props.components?.length > 0;
-});
-
-const showClean = computed(() => {
-  return props.useCleanButton && showComplex && (conditions.value.length > 0 || quick.value)
-});
-
-const showRefresh = computed(() => {
-  return props.useRefreshButton && showComplex
-});
-
-const condition = computed(() => {
-  const condition = {}
-  if (conditions.value.length > 0) {
-    conditions.value.forEach(c => {
-      const { field, operator, value } = c
-      condition[c.field] = { field, operator, value }
-    })
-  }
-
-  return condition
-});
-
-
-</script>

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

@@ -1,14 +0,0 @@
-<template>
-  <el-tooltip :content="tooltip" :disabled="!tooltip">
-    <!-- :size="configSize"  -->
-    <el-button class="fu-search-bar-button" circle v-bind="$attrs" />
-    <!-- <slot></slot> -->
-     <!-- *****element问题  加上插槽 空的情况下渲染多出一个span标签问题 待考虑 -->
-  </el-tooltip>
-</template>
-<script setup lang="ts">
-defineOptions({ name: "FuSearchBarButton" });
-defineProps({
-  tooltip: String
-});
-</script>

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

@@ -1,24 +0,0 @@
-<template>
-<!-- , 'fu-search-conditions--' + configSize -->
-  <div :class="['fu-search-conditions']">
-    <div class="fu-search-conditions__item" v-for="(condition, index) in conditions" :key="index">
-      <div v-if="condition.label">{{ condition.label }}</div>
-      <div v-if="condition.operatorLabel">{{ condition.operatorLabel }}</div>
-      <div class="condition-value">{{ condition.valueLabel }}</div>
-      <i class="el-icon-close condition-remove" @click="remove(index)" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  conditions: Array
-})
-const emit = defineEmits(["change"])
-
-function remove(index: number) {
-  props.conditions.splice(index, 1)
-  emit("change", props.conditions)
-}
-
-</script>

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

@@ -1,13 +0,0 @@
-import FuSearchBar from "./FuSearchBar.vue"
-import FuQuickSearch from "./FuQuickSearch.vue"
-import FuSearchBarButton from "./FuSearchBarButton.vue"
-// import FuComplexComponents from "./complex-components"
-
-import type { App } from 'vue'
-FuSearchBar.install = (app: App): void => {
-  app.component(FuSearchBar.name, FuSearchBar)
-  app.component(FuSearchBarButton.name, FuSearchBarButton)
-  app.component(FuQuickSearch.name, FuQuickSearch)
-  // app.use(FuComplexComponents.install)
-};
-export default FuSearchBar;

package/src/components/search-bar/store.ts

@@ -1,25 +0,0 @@
-export interface Options {
-  field: string
-  label: string
-  operator?: string
-  operatorLabel: string
-  value: string
-  valueLabel: string
-}
-
-export default class ComplexCondition {
-  field: string
-  label: string
-  operator?: string
-  operatorLabel: string
-  value: string
-  valueLabel: string
-  constructor(options: Options) {
-    this.field = options.field
-    this.label = options.label
-    this.operator = options.operator
-    this.operatorLabel = options.operatorLabel
-    this.value = options.value
-    this.valueLabel = options.valueLabel || options.value
-  }
-}

package/src/components/speed-dial/FuSpeedDial.vue

@@ -1,280 +0,0 @@
-<template>
-  <!-- v-outside-click="outsideClickClose" -->
-  <div class="fu-speed-dial" :style="style">
-    <div class="fu-speed-dial__content">
-      <slot name="fab">
-        <fu-speed-dial-button v-bind="buttonProps" @click="click" @mousedown="mousedown" />
-      </slot>
-      <div :style="contentPosition">
-        <slot>
-          <fu-speed-dial-item v-for="(item, index) in items" :index="index" :key="index" v-bind="item"
-            @click="itemClick" />
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-
-<script setup lang="ts">
-import { reactive, ref, watch, getCurrentInstance, onMounted, computed, provide, useSlots } from "vue";
-import type { CSSProperties } from 'vue'
-// import OutsideClick from "element-ui/src/utils/clickoutside"
-// directives: { OutsideClick },
-import FuSpeedDialButton from "@/components/speed-dial/FuSpeedDialButton.vue"
-import FuSpeedDialItem from "@/components/speed-dial/FuSpeedDialItem.vue"
-defineOptions({ name: "FuSpeedDial" });
-const props = defineProps({
-  id: String,
-  value: Boolean,
-  type: {
-    type: String,
-    default: "primary"
-  },
-  items: Array,
-  size: {
-    type: String,
-    default: "default",
-    validator: (value: string) => ["big", "default", "medium", "small"].includes(value)
-  },
-  direction: {
-    type: String,
-    default: "top",
-    validator: (value: string) => ["top", "bottom", "left", "right"].includes(value)
-  },
-  icon: {
-    type: String,
-    default: "el-icon-plus"
-  },
-  activeIcon: {
-    type: String,
-    default: "el-icon-close"
-  },
-  movable: {
-    type: Boolean,
-    default: false
-  },
-  position: {
-    type: String,
-    validator: (value: string) => ["absolute", "fixed"].includes(value)
-  },
-  left: String,
-  top: String,
-  right: String,
-  bottom: String,
-  zIndex: {
-    type: [String, Number],
-    default: 99
-  },
-  itemClickClose: {
-    type: Boolean,
-    default: true
-  },
-  outsideClose: {
-    type: Boolean,
-    default: true
-  },
-  manual: {
-    type: Boolean,
-    default: false
-  },
-  localKey: String,
-  sizeOptions: {
-    type: Object,
-    default: () => {
-      return {
-        big: {
-          fab: { size: 56, fontSize: "18px" },
-          item: { size: 40, spacing: 0, titleFontSize: "14px", buttonFontSize: "18px" }
-        },
-        default: {
-          fab: { size: 40, fontSize: "16px" },
-          item: { size: 32, spacing: 0, titleFontSize: "14px", buttonFontSize: "16px" }
-        },
-        medium: {
-          fab: { size: 36, fontSize: "14px" },
-          item: { size: 28, spacing: 0, titleFontSize: "12px", buttonFontSize: "14px" }
-        },
-        small: {
-          fab: { size: 32, fontSize: "12px" },
-          item: { size: 24, spacing: 0, titleFontSize: "12px", buttonFontSize: "12px" }
-        },
-      }
-    }
-  },
-})
-
-const emit = defineEmits(["close", "outside-click", "click"])
-
-const slots = useSlots()
-const instance = getCurrentInstance()
-
-const { zIndex, position, left, top, right, bottom } = props
-
-const active = ref(false)
-const moving = ref(false)
-const style = reactive({ zIndex, position, left, top, right, bottom }) as any
-const updateStyle = function () {
-  style.value = { zIndex, position, left, top, right, bottom }
-}
-
-provide("FuSpeedDial", instance)
-
-watch(() => props.value, (v) => {
-  active.value = v
-})
-watch(() => props.position, updateStyle)
-watch(() => props.zIndex, updateStyle)
-watch(() => props.left, updateStyle)
-watch(() => props.right, updateStyle)
-watch(() => props.top, updateStyle)
-watch(() => props.bottom, updateStyle)
-
-const saveKey = computed(() => {
-  return "Fu-SD-" + props.localKey
-})
-const hashChildren = computed(() => {
-  if (props.items && props.items.length > 0) {
-    return true
-  }
-  return slots && slots.default
-})
-const config = computed(() => {
-  return props.sizeOptions[props.size] || props.sizeOptions["default"]
-})
-const buttonProps = computed(() => {
-  let type = props.type
-  let rotate = true
-  let activeValue = active.value
-  let size = config.value.fab.size + "px"
-  let fontSize = config.value.fab.fontSize
-  let icon = props.activeIcon === props.icon ? props.icon : active.value ? props.activeIcon : props.icon
-  return { type, rotate, active: activeValue, size, fontSize, icon }
-})
-const spacing = computed(() => {
-  let spacing = config.value.item.spacing || 0
-  spacing += (config.value.fab.size - config.value.item.size) / 2
-  return spacing
-})
-
-const contentPosition = computed(() => {
-  let position = config.value.fab.size + spacing.value
-  if (["top", "left"].includes(props.direction)) {
-    position = -config.value.fab.size - spacing.value
-  }
-
-  let style: CSSProperties = { position: "absolute", zIndex: props.zIndex }
-  if (["top", "bottom"].includes(props.direction)) {
-    style.top = position + "px"
-  } else {
-    style.top = 0
-    style.left = position + "px"
-  }
-  return style
-})
-
-function toggle(active?: any) {
-  if (!moving.value && hashChildren.value) {
-    active.value = active === undefined ? !active.value : active
-  }
-}
-
-// function outsideClickClose() {
-//   if (props.outsideClose && !props.manual) {
-//     toggle(false)
-//   }
-//   emit("outside-click", [props.id, active.value])
-// }
-function click(e: Event) {
-  if (!props.manual) {
-    toggle()
-  }
-  emit("click", [props.id, active.value], e)
-}
-function mousedown() {
-  if (moving.value) {
-    document.addEventListener('mousemove', mousemove)
-    document.addEventListener('mouseup', mouseup)
-  }
-}
-function mousemove(e: MouseEvent) {
-  moving.value = true
-  if (props.position === "fixed") {
-    const el = instance.vnode.el as HTMLElement
-    const rect = el.getBoundingClientRect()
-    let left = e.clientX - rect.width / 2
-    let top = e.clientY - rect.height / 2
-    style.value.left = left + 'px'
-    style.value.top = top + 'px'
-    delete style.value.right
-    delete style.value.bottom
-  }
-
-  if (props.position === "absolute") {
-    const { offsetLeft, offsetTop, clientWidth, clientHeight, offsetParent } = this.$el
-    const maxWidth = offsetParent.clientWidth - clientWidth
-    const maxHeight = offsetParent.clientHeight - clientHeight
-
-    let left = offsetLeft + e.movementX
-    let top = offsetTop + e.movementY
-    if (left > 0 && left < maxWidth) {
-      style.value.left = left + 'px'
-      delete style.value.right
-    }
-    if (top > 0 && top < maxHeight) {
-      style.value.top = top + 'px'
-      delete style.value.bottom
-    }
-  }
-}
-function mouseup() {
-  writePosition()
-  document.removeEventListener('mousemove', mousemove)
-  document.removeEventListener('mouseup', mouseup)
-  setTimeout(() => moving.value = false)
-}
-function writePosition() {
-  if (props.localKey) {
-    localStorage.setItem(saveKey.value, JSON.stringify(style.value))
-  }
-}
-function readPosition() {
-  // *******????
-  // if (this.savePosition) {
-  let position = localStorage.getItem(saveKey.value)
-  try {
-    localStorage.getItem(saveKey.value)
-    if (position) {
-      style.value = JSON.parse(position)
-    }
-  } catch (e) {
-    console.warn(saveKey.value + " error", e)
-  }
-  // }
-}
-function itemClick(arg: any, e: any) {
-  console.log(arg)
-  const { index } = arg
-  if (index !== undefined) {
-    const item = props.items[index];
-    if (item.click && typeof item.click === "function") return item.click(arg, e)
-  }
-}
-
-function close() {
-  if (props.itemClickClose && !props.manual) {
-    toggle(false)
-  }
-  emit("close", [props.id, active.value])
-}
-
-onMounted(() => {
-  readPosition()
-})
-
-
-defineExpose({
-  close
-})
-
-</script>