fit2cloud-ui-plus 0.0.1-beta.0

package/src/components/table/table-column-select/FuTableColumnSelectPopover.vue

@@ -0,0 +1,80 @@
+<template>
+  <el-popover class="fu-table-column-select" popper-class="fu-table-column-select-popper" :trigger="trigger"
+              :show-arrow="false" v-show="hasSelect">
+    <h3>
+      {{ t('fu.table.custom_table_fields') }}
+    </h3>
+    <div class="fu-table-column-select-popper__body">
+      <div v-for="(c, i) in columns" :key="i" class="fu-table-column-select-popper__item">
+        <el-checkbox v-model="c.show" :checked="c.show !== false" draggable="true" @dragstart="dragstart($event, i)"
+                     @dragenter="dragenter" @dragleave="dragleave" @dragover.prevent @dragend="dragend"
+                     @drop="drop($event, columns, i)" v-show="!c.fix">
+          {{ c.label }}
+        </el-checkbox>
+      </div>
+    </div>
+    <div class="fu-table-column-select-popper__footer">
+      <el-button @click="reset" v-if="columnsKey">
+        {{ t('fu.table.reset') }}
+      </el-button>
+    </div>
+
+    <template #reference>
+      <el-button class="fu-search-bar-button" :icon="icon">{{t('fu.table.custom_table_rows')}}</el-button>
+    </template>
+    <!-- :size="configSize" -->
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+import {computed, inject} from "vue";
+import {tableColumnSelect} from "./utils"
+import {useLocale} from "@/hooks"
+
+const props = defineProps({
+  icon: {
+    type: String,
+    default: "Setting"
+  },
+  trigger: {
+    type: String,
+    default: "click",
+    validator: (value: string) => ['click', 'hover'].includes(value)
+  },
+  columns: {
+    type: Array,
+    default: () => []
+  },
+
+});
+
+const {t} = useLocale()
+
+const localKey = inject("localKey")
+
+const {
+  columnsKey,
+  dragstart,
+  dragenter,
+  dragleave,
+  dragend,
+  drop
+} = tableColumnSelect(localKey)
+
+const isFixAll = computed(() => {
+  return props.columns?.every((c: any) => {
+    return c.fix
+  })
+});
+
+const hasSelect = computed(() => {
+  return props.columns?.length > 0 && !isFixAll.value
+});
+
+function reset() {
+  if (columnsKey) {
+    localStorage.removeItem(columnsKey.value)
+  }
+  props.columns.splice(0, props.columns.length)
+}
+</script>

package/src/components/table/table-column-select/index.ts

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

package/src/components/table/table-column-select/utils.ts

@@ -0,0 +1,59 @@
+import {computed} from "vue";
+
+export const tableColumnSelect = (localKey: any) => {
+
+  const columnsKey = computed((): string => {
+    return localKey ? "FU-T-" + localKey : ''
+  })
+
+  function dragstart(event: DragEvent, index: string) {
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = "move"
+      event.dataTransfer.setData("source_index", index)
+    }
+  }
+
+  function dragenter(event: DragEvent) {
+    event.preventDefault()
+    if (event.target) {
+      event.target.style.opacity = .2
+    }
+  }
+
+  function dragleave(event: DragEvent) {
+    event.preventDefault()
+    if (event.target) {
+      event.target.style.opacity = ""
+    }
+  }
+
+  function dragend(event: DragEvent) {
+    if (event.dataTransfer) {
+      event.dataTransfer.clearData()
+    }
+  }
+
+  function drop(event: DragEvent, list: any, index: number) {
+    let source_index = Number(event.dataTransfer?.getData("source_index"))
+    let target_index = index
+    if (target_index > source_index) {
+      list.splice(target_index + 1, 0, list[source_index])
+      list.splice(source_index, 1)
+    } else {
+      list.splice(target_index, 0, list[source_index])
+      list.splice(source_index + 1, 1)
+    }
+    if (event.target) {
+      event.target.style.opacity = ""
+    }
+  }
+
+  return {
+    columnsKey,
+    dragstart,
+    dragenter,
+    dragleave,
+    dragend,
+    drop
+  }
+}

package/src/components/table/table-operations/FuTableButton.vue

@@ -0,0 +1,19 @@
+<template>
+  <el-tooltip :content="label" :disabled="!icon">
+    <el-button link v-bind="$attrs" :disabled="disabled">
+      <slot></slot>
+    </el-button>
+  </el-tooltip>
+</template>
+<script lang="ts" setup>
+defineProps({
+  size: {
+    type: String,
+    default: "default"
+  },
+  label: String,
+  disabled: Boolean,
+  icon: Boolean,
+});
+
+</script>

package/src/components/table/table-operations/FuTableMoreButton.vue

@@ -0,0 +1,52 @@
+<template>
+  <el-dropdown @command="handleCommand" class="fu-table-more-button">
+    <el-button link type="primary" @click.stop>
+      <el-icon v-if="type === 'icon'">
+        <MoreFilled />
+      </el-icon>
+      <template v-else>
+        {{ t('fu.table.more') }}
+      </template>
+    </el-button>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item v-for="(btn, i) in buttons" :key="i" :icon="type === 'icon'&& btn.icon" :disabled="disabled(btn)"
+          :command="btn">
+          {{ btn.label }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { useLocale } from "@/hooks"
+
+const { t } = useLocale()
+const props = defineProps({
+  row: Object,
+  buttons: {
+    type: Array,
+    required: true
+  },
+  size: {
+    type: String,
+    default: "default"
+  },
+  type: {
+    type: String,
+    default: "label",
+    validator: (value: string) => ['icon', 'label'].includes(value)
+  },
+});
+
+const disabled = computed(() => {
+  return function (btn: any) {
+    return typeof btn.disabled === "function" ? btn.disabled(props.row) : btn.disabled
+  }
+});
+
+function handleCommand(btn: any) {
+  btn.click(props.row)
+}
+</script>

package/src/components/table/table-operations/FuTableOperations.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-table-column class-name="fu-table-operations" :align="align" :width="computeWidth" v-bind="$attrs">
+    <template #header>
+      {{ $attrs.label }}
+    </template>
+    <template #default="{ row }">
+      <fu-table-button :icon="type === 'icon'" v-for="(btn, i) in defaultButtons(row)" :key="i"
+        @click.stop="btn.click(row)" :disabled="disableButton(btn, row)" :label="btn.label" :type="btn.type || 'primary'"
+        link>
+        <el-icon v-if="type === 'icon'">
+          <component :is="btn.icon" />
+        </el-icon>
+        <template v-else>
+          {{ btn.label }}
+        </template>
+      </fu-table-button>
+      <fu-table-more-button :type="type" :buttons="moreButtons(row)" :row="row" v-if="moreButtons(row).length > 0" />
+    </template>
+  </el-table-column>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import FuTableButton from "./FuTableButton.vue";
+import FuTableMoreButton from "./FuTableMoreButton.vue";
+
+defineOptions({ name: "FuTableOperations" });
+const props = defineProps({
+  // columns: Array,
+  align: {
+    type: String,
+    default: "center"
+  },
+  width: [String, Number],
+  minWidth: [String, Number],
+  ellipsis: { // 超过几个按钮时显示省略号，如果只超过一个也不显示省略号
+    type: Number,
+    default: 3
+  },
+  buttons: {
+    type: Array,
+    required: true
+  },
+  type: {
+    type: String,
+    default: "label",
+    validator: (value: string) => ['icon', 'label'].includes(value)
+  },
+});
+
+const hasShowFunc = computed(() => {
+  return props.buttons.some((btn: any) => typeof btn.show === "function")
+});
+
+const defaultButtons = computed(() => {
+  return function (row: any) {
+    return hasMore(row) ? showButtons(row).slice(0, props.ellipsis) : showButtons(row)
+  }
+});
+
+const moreButtons = computed(() => {
+  return function (row: any) {
+    return hasMore(row) ? showButtons(row).slice(props.ellipsis) : []
+  }
+});
+
+const computeWidth = computed(() => {
+  let length = hasShowFunc.value ? props.ellipsis : defaultButtons.value.length
+  let buttonsWidth = 35 + length * 58 + 58
+  if (props.minWidth) {
+    buttonsWidth = buttonsWidth < props.minWidth ? props.minWidth : buttonsWidth
+  }
+  return props.width ? props.width : buttonsWidth
+});
+
+const disableButton = computed(() => {
+  return function (btn: any, row: any) {
+    return typeof btn.disabled === "function" ? btn.disabled(row) : btn.disabled
+  }
+});
+
+function showButtons(row: any) {
+  return props.buttons?.filter((btn: any) => typeof btn.show === "function" ? btn.show(row) !== false : btn.show !== false)
+}
+function hasMore(row: any) {
+  return showButtons(row)?.length > props.ellipsis + 1
+}
+</script>

package/src/components/table/table-operations/index.ts

@@ -0,0 +1,12 @@
+import FuTableOperations from "./FuTableOperations.vue";
+import FuTableButton from "./FuTableButton.vue";
+import FuTableMoreButton from "./FuTableMoreButton.vue";
+import type { App } from 'vue'
+
+FuTableOperations.install = (app: App): void => {
+  app.component(FuTableOperations.name, FuTableOperations);
+  app.component(FuTableButton.name, FuTableButton);
+  app.component(FuTableMoreButton.name, FuTableMoreButton);
+};
+
+export default FuTableOperations;

package/src/components/tabs/FuTabs.vue

@@ -0,0 +1,84 @@
+<template>
+  <el-tabs class="fu-tabs" :before-leave="beforeLeave" :editable="false" :addable="false" v-bind="$attrs">
+    <slot></slot>
+    <el-tab-pane name="add" key="add" v-if="addable">
+      <template v-slot:label>
+        <slot name="add">
+          <!-- 下拉方式 -->
+          <el-dropdown @command="handleCommand" v-if="addType === 'dropdown'" :trigger="addTrigger">
+            <slot name="dropdownButton">
+              <el-button type="primary" plain>
+                <el-icon>
+                  <component :is="addIcon" />
+                </el-icon>
+                <template v-if="addButtonLabel">{{ addButtonLabel }}</template>
+              </el-button>
+            </slot>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item v-for="(item, i) in dropdownMenus" :key="i" :icon="item.icon"
+                  :disabled="item.disabled" :divided="item.divided" :command="item.command">
+                  {{ item.label }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <!-- 默认 -->
+          <el-button v-else @click="handleCommand" type="primary" plain>
+            <el-icon>
+              <component :is="addIcon" />
+            </el-icon>
+            <template v-if="addButtonLabel">{{ addButtonLabel }}</template>
+
+          </el-button>
+        </slot>
+      </template>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script lang="ts" setup>
+import { uuid } from "@/tools/utils";
+defineOptions({ name: "FuTabs" });
+type TabPanelName = string | number
+const props = defineProps({
+  addType: {
+    type: String,
+    default: "default",
+    validator: (val: string) => ["default", "dropdown"].includes(val),
+  },
+  dropdownMenus: {
+    type: Array,
+    default: () => [],
+  },
+  addTrigger: {
+    type: String,
+    default: "hover",
+    validator: (val: string) => ["hover", "click"].includes(val),
+  },
+  addIcon: {
+    type: String,
+    default: "Plus",
+  },
+  addButtonLabel: String,
+  addable: Boolean,
+});
+const emit = defineEmits(["command"])
+
+function handleCommand(e: any) {
+  const name = uuid();
+  let obj = null;
+  if (e) {
+    obj = props.dropdownMenus.find((item: any) => item.command === e);
+  }
+  emit("command", name, obj);
+}
+
+/* 活动标签切换时触发 */
+function beforeLeave(currentName: TabPanelName, oldName: TabPanelName) {
+  // 如果name是add，则什么都不触发
+  if (currentName === "add") {
+    return false;
+  }
+}
+</script>

package/src/components/tabs/index.ts

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

package/src/components/virtual-scroller/FuVirtualHorizontalScroll.js

@@ -0,0 +1,96 @@
+import measurable from "@/mixins/measurable";
+import {convertToUnit} from "@/tools/utils"
+
+export default {
+  name: 'FuVirtualHorizontalScroll',
+  mixins: [measurable],
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    itemWidth: {
+      type: [Number, String],
+      required: true
+    },
+    buffer: {
+      type: [Number, String],
+      default: 1
+    }
+  },
+  data() {
+    return {
+      scrollLeft: 0,
+      first: 0,
+      last: 0,
+    }
+  },
+  watch: {
+    width: 'scroll',
+    itemWidth: 'scroll',
+  },
+  computed: {
+    intItemWidth() {
+      return parseInt(this.itemWidth, 10)
+    },
+    intBuffer() {
+      return parseInt(this.buffer, 10)
+    },
+    firstToRender({first, intBuffer}) {
+      return Math.max(0, first - intBuffer)
+    },
+    lastToRender({items, last, intBuffer}) {
+      return Math.min(items.length, last + intBuffer)
+    },
+    containerWidth({items, intItemWidth}) {
+      return items.length * intItemWidth
+    }
+  },
+  methods: {
+    createChild(item, index) {
+      index += this.firstToRender
+      const left = convertToUnit(index * this.intItemWidth)
+
+      let data = {
+        staticClass: 'fu-virtual-scroll__item',
+        style: {left},
+        key: index,
+      }
+      let children = this.$scopedSlots["default"]({index, item})
+
+      return this.$createElement('div', data, children)
+    },
+    getFirst() {
+      return Math.floor(this.scrollLeft / this.intItemWidth)
+    },
+    getLast() {
+      const width = parseInt(this.width || 0, 10) || this.$el.clientWidth
+      return this.first + Math.ceil(width / this.intItemWidth)
+    },
+    scroll() {
+      this.scrollLeft = this.$el.scrollLeft
+      this.first = this.getFirst()
+      this.last = this.getLast()
+    }
+  },
+  render(h) {
+    const children = this.items.slice(this.firstToRender, this.lastToRender,).map(this.createChild)
+
+    const content = h('div', {
+      staticClass: 'fu-virtual-scroll__container',
+      style: {
+        height: this.height || "100%",
+        width: convertToUnit(this.containerWidth),
+      },
+    }, children)
+
+    return h('div', {
+      staticClass: 'fu-virtual-scroll is-horizontal',
+      style: this.styles,
+      on: {scroll: this.scroll, ...this.$listeners},
+    }, [content])
+  },
+  mounted() {
+    this.last = this.getLast()
+  },
+}

package/src/components/virtual-scroller/FuVirtualScroll.js

@@ -0,0 +1,15 @@
+import FuVirtualVerticalScroll from "./FuVirtualVerticalScroll";
+import FuVirtualHorizontalScroll from "./FuVirtualHorizontalScroll";
+
+export default {
+  name: "FuVirtualScroll",
+  functional: true,
+  render(h, {props, data, children}) {
+    const {horizontal} = props
+    if (horizontal === undefined || horizontal === false) {
+      return h(FuVirtualVerticalScroll, data, children)
+    } else {
+      return h(FuVirtualHorizontalScroll, data, children)
+    }
+  }
+}

package/src/components/virtual-scroller/FuVirtualVerticalScroll.js

@@ -0,0 +1,95 @@
+import measurable from "@/mixins/measurable";
+import {convertToUnit} from "@/tools/utils"
+
+export default {
+  name: 'FuVirtualVerticalScroll',
+  mixins: [measurable],
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    itemHeight: {
+      type: [Number, String],
+      required: true
+    },
+    buffer: {
+      type: [Number, String],
+      default: 1
+    }
+  },
+  data() {
+    return {
+      scrollTop: 0,
+      first: 0,
+      last: 0,
+    }
+  },
+  watch: {
+    height: 'scroll',
+    itemHeight: 'scroll',
+  },
+  computed: {
+    intItemHeight() {
+      return parseInt(this.itemHeight, 10)
+    },
+    intBuffer() {
+      return parseInt(this.buffer, 10)
+    },
+    firstToRender({first, intBuffer}) {
+      return Math.max(0, first - intBuffer)
+    },
+    lastToRender({items, last, intBuffer}) {
+      return Math.min(items.length, last + intBuffer)
+    },
+    containerHeight({items, intItemHeight}) {
+      return items.length * intItemHeight
+    }
+  },
+  methods: {
+    createChild(item, index) {
+      index += this.firstToRender
+      const top = convertToUnit(index * this.intItemHeight)
+
+      let data = {
+        staticClass: 'fu-virtual-scroll__item',
+        style: {top},
+        key: index,
+      }
+      let children = this.$scopedSlots["default"]({index, item})
+
+      return this.$createElement('div', data, children)
+    },
+    getFirst() {
+      return Math.floor(this.scrollTop / this.intItemHeight)
+    },
+    getLast() {
+      const height = parseInt(this.height || 0, 10) || this.$el.clientHeight
+      return this.first + Math.ceil(height / this.intItemHeight)
+    },
+    scroll() {
+      this.scrollTop = this.$el.scrollTop
+      this.first = this.getFirst()
+      this.last = this.getLast()
+    }
+  },
+  render(h) {
+    const children = this.items.slice(this.firstToRender, this.lastToRender,).map(this.createChild)
+
+    const content = h('div', {
+      staticClass: 'fu-virtual-scroll__container',
+      style: {
+        height: convertToUnit(this.containerHeight),
+      },
+    }, children)
+
+    return h('div', {
+      staticClass: 'fu-virtual-scroll',
+      style: this.styles,
+      on: {scroll: this.scroll, ...this.$listeners},
+    }, [content])
+  },
+  mounted() {
+    this.last = this.getLast()
+  },
+}

package/src/components/virtual-scroller/index.js

@@ -0,0 +1,10 @@
+import FuVirtualScroll from "./FuVirtualScroll";
+import locale from "@/locale";
+
+FuVirtualScroll.install = function (Vue, opts = {}) {
+  locale.use(opts.locale)
+  locale.i18n(opts.i18n)
+  Vue.component(FuVirtualScroll.name, FuVirtualScroll)
+}
+
+export default FuVirtualScroll

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+
+export * from './use-global-config'
+export * from './use-locale'

package/src/hooks/use-global-config/index.ts

@@ -0,0 +1,32 @@
+import { computed, getCurrentInstance, inject, ref } from 'vue'
+// import { configProviderContextKey } from '@element-plus/tokens'
+// import type { Ref } from 'vue'
+// import type { ConfigProviderContext } from '@element-plus/tokens'
+
+// this is meant to fix global methods like `ElMessage(opts)`, this way we can inject current locale
+// into the component as default injection value.
+// refer to: https://github.com/element-plus/element-plus/issues/2610#issuecomment-887965266
+const globalConfig = ref()
+
+// export function useGlobalConfig<
+//   K extends keyof ConfigProviderContext,
+//   D extends ConfigProviderContext[K]
+// >(
+//   key: K,
+//   defaultValue?: D
+// ): Ref<Exclude<ConfigProviderContext[K], undefined> | D>
+// export function useGlobalConfig(): Ref<ConfigProviderContext>
+export function useGlobalConfig(
+  key?: keyof any,
+  defaultValue = undefined
+) {
+  const config = getCurrentInstance()
+    ? inject( Symbol(), globalConfig)
+    : globalConfig
+  if (key) {
+    return computed(() => config.value?.[key] ?? defaultValue)
+  } else {
+    return config
+  }
+}
+