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

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

@@ -0,0 +1,289 @@
+<template>
+  <div class="fu-speed-dial" :style="style" v-click-outside="outsideClickClose">
+    <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(index)"/>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script setup lang="ts">
+import {ref, watch, getCurrentInstance, onMounted, computed, provide, useSlots, PropType} from "vue";
+import type {CSSProperties} from 'vue'
+import type {ZIndexProperty, PositionProperty} from 'csstype'
+import {ClickOutside as vClickOutside} from 'element-plus'
+import FuSpeedDialButton from "@/components/speed-dial/FuSpeedDialButton.vue"
+import FuSpeedDialItem from "@/components/speed-dial/FuSpeedDialItem.vue"
+import {SpeedDialKey} from "./types";
+
+defineOptions({name: "FuSpeedDial"});
+const props = defineProps({
+  modelValue: Boolean,
+  id: String,
+  type: {
+    type: String,
+    default: "primary"
+  },
+  items: Array as any,
+  size: {
+    type: String,
+    default: "default",
+    validator: (value: string) => ["large", "default", "small"].includes(value)
+  },
+  direction: {
+    type: String,
+    default: "top",
+    validator: (value: string) => ["top", "bottom", "left", "right"].includes(value)
+  },
+  icon: {
+    type: String,
+    default: "Plus"
+  },
+  activeIcon: {
+    type: String,
+    default: "Close"
+  },
+  movable: {
+    type: Boolean,
+    default: false
+  },
+  position: {
+    type: String as PropType<PositionProperty>,
+    validator: (value: string) => ["absolute", "fixed"].includes(value)
+  },
+  left: String,
+  top: String,
+  right: String,
+  bottom: String,
+  zIndex: {
+    type: ([String, Number]) as PropType<ZIndexProperty>,
+    default: 99
+  },
+  itemClickClose: {
+    type: Boolean,
+    default: true
+  },
+  outsideClose: {
+    type: Boolean,
+    default: true
+  },
+  manual: {
+    type: Boolean,
+    default: false
+  },
+  localKey: String,
+  sizeOptions: {
+    type: Object,
+    default: () => {
+      return {
+        large: {
+          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"}
+        },
+        small: {
+          fab: {size: 32, fontSize: "12px", padding: 0},
+          item: {size: 24, spacing: 0, titleFontSize: "12px", buttonFontSize: "12px"}
+        },
+      }
+    }
+  },
+})
+
+const emit = defineEmits(["close", "outside-click", "click"])
+
+const slots = useSlots()
+const instance = getCurrentInstance()
+
+const active = ref(false)
+const moving = ref(false)
+
+const {zIndex, position, left, top, right, bottom} = props
+const style = ref({zIndex, position, left, top, right, bottom})
+
+watch(() => props.modelValue, (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())
+
+function updateStyle() {
+  const {zIndex, position, left, top, right, bottom} = props
+  style.value = {zIndex, position, left, top, right, bottom}
+
+}
+
+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 rotate = true
+  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: props.type, rotate, active: active.value, 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 positionStyle: CSSProperties = {position: "absolute", zIndex: props.zIndex}
+  if (["top", "bottom"].includes(props.direction)) {
+    positionStyle.top = position + "px"
+  } else {
+    positionStyle.top = 0
+    positionStyle.left = position + "px"
+  }
+  return positionStyle
+})
+
+
+function toggle(bool?: any) {
+  if (!moving.value && hashChildren.value) {
+    active.value = bool === undefined ? !active.value : bool
+  }
+}
+
+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 (props.movable) {
+    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} = instance?.vnode.el as HTMLElement
+
+    const maxWidth = offsetParent && offsetParent.clientWidth || 0 - clientWidth
+    const maxHeight = offsetParent && offsetParent.clientHeight || 0 - 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(index: any) {
+  if (index !== undefined) {
+    const item = props.items[index] as any;
+    if (item.click && typeof item.click === "function") return item.click(index)
+  }
+}
+
+function close() {
+  if (props.itemClickClose && !props.manual) {
+    toggle(false)
+  }
+  emit("close", [props.id, active.value])
+}
+
+
+provide(SpeedDialKey, {
+  config: config.value,
+  direction: computed(() => props.direction),
+  active: active,
+  close
+
+})
+onMounted(() => {
+  readPosition()
+})
+
+defineExpose({
+  close
+})
+
+</script>

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

@@ -0,0 +1,218 @@
+import { PropType } from "vue";
+import type { ZIndexProperty, PositionProperty } from 'csstype';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: BooleanConstructor;
+    id: StringConstructor;
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    items: any;
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    direction: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    movable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: PropType<PositionProperty>;
+        validator: (value: string) => boolean;
+    };
+    left: StringConstructor;
+    top: StringConstructor;
+    right: StringConstructor;
+    bottom: StringConstructor;
+    zIndex: {
+        type: PropType<ZIndexProperty>;
+        default: number;
+    };
+    itemClickClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    outsideClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    manual: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    localKey: StringConstructor;
+    sizeOptions: {
+        type: ObjectConstructor;
+        default: () => {
+            large: {
+                fab: {
+                    size: number;
+                    fontSize: string;
+                };
+                item: {
+                    size: number;
+                    spacing: number;
+                    titleFontSize: string;
+                    buttonFontSize: string;
+                };
+            };
+            default: {
+                fab: {
+                    size: number;
+                    fontSize: string;
+                };
+                item: {
+                    size: number;
+                    spacing: number;
+                    titleFontSize: string;
+                    buttonFontSize: string;
+                };
+            };
+            small: {
+                fab: {
+                    size: number;
+                    fontSize: string;
+                    padding: number;
+                };
+                item: {
+                    size: number;
+                    spacing: number;
+                    titleFontSize: string;
+                    buttonFontSize: string;
+                };
+            };
+        };
+    };
+}, {
+    close: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "close" | "outside-click")[], "click" | "close" | "outside-click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: BooleanConstructor;
+    id: StringConstructor;
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    items: any;
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    direction: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    activeIcon: {
+        type: StringConstructor;
+        default: string;
+    };
+    movable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: PropType<PositionProperty>;
+        validator: (value: string) => boolean;
+    };
+    left: StringConstructor;
+    top: StringConstructor;
+    right: StringConstructor;
+    bottom: StringConstructor;
+    zIndex: {
+        type: PropType<ZIndexProperty>;
+        default: number;
+    };
+    itemClickClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    outsideClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    manual: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    localKey: StringConstructor;
+    sizeOptions: {
+        type: ObjectConstructor;
+        default: () => {
+            large: {
+                fab: {
+                    size: number;
+                    fontSize: string;
+                };
+                item: {
+                    size: number;
+                    spacing: number;
+                    titleFontSize: string;
+                    buttonFontSize: string;
+                };
+            };
+            default: {
+                fab: {
+                    size: number;
+                    fontSize: string;
+                };
+                item: {
+                    size: number;
+                    spacing: number;
+                    titleFontSize: string;
+                    buttonFontSize: string;
+                };
+            };
+            small: {
+                fab: {
+                    size: number;
+                    fontSize: string;
+                    padding: number;
+                };
+                item: {
+                    size: number;
+                    spacing: number;
+                    titleFontSize: string;
+                    buttonFontSize: string;
+                };
+            };
+        };
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onOutside-click"?: ((...args: any[]) => any) | undefined;
+}, {
+    type: string;
+    icon: string;
+    zIndex: ZIndexProperty;
+    size: string;
+    modelValue: boolean;
+    direction: string;
+    movable: boolean;
+    manual: boolean;
+    items: any;
+    activeIcon: string;
+    itemClickClose: boolean;
+    outsideClose: boolean;
+    sizeOptions: Record<string, any>;
+}>;
+export default _default;

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";
+import { SpeedDialKey } from "./types";
+
+const props = defineProps({
+  index: Number,
+  icon: {
+    type: String,
+    default: "Plus"
+  },
+  titleClass: String,
+  titleBgColor: String,
+  titleColor: String,
+  buttonClass: String,
+  bgColor: String,
+  color: String,
+  title: [String, Number]
+})
+
+const emit = defineEmits(["click"])
+const speedDialKey = inject(SpeedDialKey)
+
+const config = computed(() => {
+  return speedDialKey?.config;
+})
+
+const direction = computed(() => {
+  return speedDialKey?.direction.value || "";
+})
+// 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 || 0 % 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);
+  speedDialKey?.close();
+}
+</script>

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

@@ -0,0 +1,32 @@
+declare const _default: import("vue").DefineComponent<{
+    index: NumberConstructor;
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    titleClass: StringConstructor;
+    titleBgColor: StringConstructor;
+    titleColor: StringConstructor;
+    buttonClass: StringConstructor;
+    bgColor: StringConstructor;
+    color: StringConstructor;
+    title: (StringConstructor | NumberConstructor)[];
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    index: NumberConstructor;
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    titleClass: StringConstructor;
+    titleBgColor: StringConstructor;
+    titleColor: StringConstructor;
+    buttonClass: StringConstructor;
+    bgColor: StringConstructor;
+    color: StringConstructor;
+    title: (StringConstructor | NumberConstructor)[];
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    icon: string;
+}>;
+export default _default;

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

@@ -0,0 +1,45 @@
+<template>
+  <div :class="[
+  'fu-speed-dial-button',
+  'el-button',
+  'el-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>
+      <el-icon>
+        <component :is="icon" />
+      </el-icon>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { validateType } from "@/tools/theme"
+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>

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

@@ -0,0 +1,42 @@
+declare const _default: import("vue").DefineComponent<{
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    rotate: BooleanConstructor;
+    disabled: BooleanConstructor;
+    active: BooleanConstructor;
+    icon: StringConstructor;
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+    backgroundColor: StringConstructor;
+    color: StringConstructor;
+    fontSize: StringConstructor;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    rotate: BooleanConstructor;
+    disabled: BooleanConstructor;
+    active: BooleanConstructor;
+    icon: StringConstructor;
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+    backgroundColor: StringConstructor;
+    color: StringConstructor;
+    fontSize: StringConstructor;
+}>>, {
+    type: string;
+    disabled: boolean;
+    size: string;
+    active: boolean;
+    rotate: boolean;
+}>;
+export default _default;