fit2cloud-ui-plus 0.0.1-beta.0

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

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

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

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

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

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

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

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

@@ -0,0 +1,88 @@
+<template>
+  <div class="fu-speed-dial-action-button">
+    <div v-if="title" class="fu-speed-dial-action-button__title" :style="titleSize">
+      <slot name="title">
+        <div class="fu-speed-dial-action-button__text" :class="titleClass" :style="titleStyle" @click="click">{{
+            title }}
+        </div>
+      </slot>
+    </div>
+    <slot>
+      <fu-speed-dial-button :class="buttonClass" v-bind="buttonProps" :icon="icon" @click="click"/>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import FuSpeedDialButton from "@/components/speed-dial/FuSpeedDialButton.vue";
+
+const props = defineProps({
+    index: Number,
+    icon: {
+      type: String,
+      default: "el-icon-plus"
+    },
+    titleClass: String,
+    titleBgColor: String,
+    titleColor: String,
+    buttonClass: String,
+    bgColor: String,
+    color: String,
+    title: [String, Number]
+})
+
+const emit = defineEmits(["click"])
+const FuSpeedDial = inject('FuSpeedDial')
+
+const config =computed(()=>{
+    return FuSpeedDial.config;
+})
+
+const direction =computed(()=>{
+    return FuSpeedDial.direction;
+})
+const clickClose =computed(()=>{
+    return FuSpeedDial.clickClose;
+})
+
+const titleSize =computed(()=>{
+    let size = config.value.fab.size + "px";
+      let style: CSSProperties = {position: "absolute", height: size};
+      if (["top", "bottom"].includes(direction.value)) {
+        style['text-align'] = "right"
+        style['right'] = size
+      } else {
+        style['text-align'] = "center"
+        style['min-width'] = size
+        if (props.index % 2 === 0) {
+          style.top = size
+        } else {
+          style.top = "-" + size
+        }
+      }
+      return style;
+})
+
+const titleStyle =computed(()=>{
+      let backgroundColor = props.titleBgColor;
+      let color = props.titleColor
+      let fontSize = config.value.item.titleFontSize
+      return {backgroundColor, color, fontSize}
+})
+
+const buttonProps =computed(()=>{
+     let backgroundColor = props.bgColor;
+      let color = props.color
+      let fontSize = config.value.item.buttonFontSize
+      let size = config.value.item.size + "px";
+      return {backgroundColor, color, fontSize, size}
+})
+
+function click(e: Event) {
+      const {index, title} = props
+      emit("click", {index, title}, e);
+      FuSpeedDial.close();
+    }
+</script>

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

@@ -0,0 +1,42 @@
+<template>
+  <div :class="[
+    'fu-speed-dial-button',
+    'fu-speed-dial-button--' + type,
+    {
+      'fu-speed-dial-button--rotate': rotate,
+      'is-disabled': disabled,
+      'is-active': active,
+    }, ]" 
+    :style="{
+    width: size,
+    height: size,
+    backgroundColor: backgroundColor,
+    color: color,
+    fontSize: fontSize }">
+    <slot>
+      <i :class="icon" />
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { validateType } from "@/tools/theme"
+const props = defineProps({
+  type: {
+    type: String,
+    default: "default",
+    validator: validateType
+  },
+  rotate: Boolean,
+  disabled: Boolean,
+  active: Boolean,
+  icon: String,
+  size: {
+    type: String,
+    default: "32px"
+  },
+  backgroundColor: String,
+  color: String,
+  fontSize: String
+})
+</script>