resolver-egretimp-plus 0.0.4

package/src/components/styles/CustomComponenTable.scss

@@ -0,0 +1,125 @@
+.error-tip-block {
+  & + .el-form-item__error {
+    position: relative;
+  }
+}
+.custom-component-table {
+  --boder-radius: 4px;
+  border-radius: var(--boder-radius);
+  width: 100%;
+  .el-table, &.el-table {
+    --el-table-header-bg-color: #f5f6f7;
+    --el-table-header-text-color: #646a73;
+  }
+  .el-table--border {
+    border: 1px solid var(--el-table-border-color);
+    border-radius: var(--boder-radius);
+    &::before {
+      width: 0px;
+      // border-left: 1px solid var(--el-table-border-color);
+      // border-radius: var(--boder-radius);
+      // background-color: transparent;
+    }
+    &::after {
+      width: 0px;
+      // border-right: 1px solid var(--el-table-border-color);
+      // border-radius: var(--boder-radius);
+      // background-color: transparent;
+    }
+    .el-table__inner-wrapper {
+      &::before {
+        height: 0px;
+        // border-bottom: 1px solid var(--el-table-border-color);
+        // border-radius: var(--boder-radius);
+        // background-color: transparent;
+      }
+      &::after {
+        height: 0px;
+        // border-top: 1px solid var(--el-table-border-color);
+        // border-radius: var(--boder-radius);
+        // background-color: transparent;
+      }
+      .el-table__border-left-patch {
+        display: none;
+      }
+    }
+    .el-table__cell:last-of-type {
+      border-right: none;
+    }
+    .el-table__body {
+      tbody {
+        tr:last-of-type {
+          .el-table__cell {
+            border-bottom: none;
+          }
+        }
+      }
+    }
+  }
+  .el-table .el-table__cell {
+    padding: 4px 0;
+  }
+  .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+  }
+  thead th {
+    font-weight: 400;
+    height: 40px;
+    .head-span {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+  th.el-table__cell.is-leaf {
+    border-bottom: none;
+  }
+  td.el-table__cell {
+    color: var(--el-input-text-color,var(--el-text-color-regular));
+  }
+  .el-table__cell {
+    height: 40px;
+    .el-date-editor, .el-date-editor--date{
+      .el-input__wrapper{
+        padding: 0 8px;
+      }
+    }
+    .el-select__wrapper, .el-input__wrapper {
+      box-shadow: none;
+      border-bottom: 1px solid var(--el-border-color);
+      padding: 0;
+      border-radius: 0;
+      background-color: transparent;
+      min-height: 26px;
+      &.is-focused {
+        border-color: var(--el-color-primary);
+      }
+      &.is-focus {
+        border-color: var(--el-color-primary);
+      }
+    }
+    .is-error {
+      .el-select__wrapper, .el-input__wrapper {
+        box-shadow: none;
+        border-bottom: 1px solid var(--el-color-danger);
+      }
+    }
+  }
+  .cell {
+    // line-height: 16px;
+  }
+  .pagination-wrap {
+    display: flex;
+    margin-top: 16px;
+  }
+  .hidden-column {
+    display: none;
+  }
+  .hidden-column + .el-table__cell {
+    border: none;
+  }
+  .next-hidden-column {
+    border: none;
+  }
+}

package/src/components/tabs/index.js

@@ -0,0 +1,8 @@
+import Tabs from './src/tabs.jsx'
+import TabPane from './src/tab-pane.vue'
+
+export default Tabs
+
+export {
+  TabPane
+}

package/src/components/tabs/src/constants.js

@@ -0,0 +1,23 @@
+// import type { ComputedRef, InjectionKey, Ref, Slots, UnwrapRef } from 'vue'
+// import type { TabsProps } from './tabs'
+// import type { TabPaneProps } from './tab-pane'
+
+// export type TabsPaneContext = UnwrapRef<{
+//   uid: number
+//   slots: Slots
+//   props: TabPaneProps
+//   paneName: ComputedRef<string | number | undefined>
+//   active: ComputedRef<boolean>
+//   index: Ref<string | undefined>
+//   isClosable: ComputedRef<boolean>
+// }>
+
+// export interface TabsRootContext {
+//   props: TabsProps
+//   currentName: Ref<string | number>
+//   registerPane: (pane: TabsPaneContext) => void
+//   unregisterPane: (uid: number) => void
+// }
+
+export const tabsRootContextKey =
+  Symbol('tabsRootContextKey')

package/src/components/tabs/src/tab-bar.js

@@ -0,0 +1,8 @@
+import { buildProps, definePropType, mutable } from 'element-plus/es/utils/index.mjs'
+
+export const tabBarProps = buildProps({
+  tabs: {
+    type: definePropType(Array),
+    default: () => mutable([]),
+  },
+})

package/src/components/tabs/src/tab-bar.vue

@@ -0,0 +1,92 @@
+<template>
+  <div
+    ref="barRef"
+    :class="[ns.e('active-bar'), ns.is(rootTabs.props.tabPosition)]"
+    :style="barStyle"
+  />
+</template>
+
+<script setup>
+import { getCurrentInstance, defineOptions, defineProps, inject, nextTick, ref, watch } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import { capitalize, throwError } from 'element-plus/es/utils/index.mjs'
+import { useNamespace } from 'element-plus/es/hooks/index.mjs'
+import { tabsRootContextKey } from './constants.js'
+import { tabBarProps } from './tab-bar'
+
+// import type { CSSProperties } from 'vue'
+
+const COMPONENT_NAME = 'ElTabBar'
+defineOptions({
+  name: COMPONENT_NAME,
+})
+const props = defineProps(tabBarProps)
+
+const instance = getCurrentInstance()
+const rootTabs = inject(tabsRootContextKey)
+if (!rootTabs) throwError(COMPONENT_NAME, '<el-tabs><el-tab-bar /></el-tabs>')
+
+const ns = useNamespace('tabs')
+
+const barRef = ref()
+const barStyle = ref()
+
+const getBarStyle = () => {
+  let offset = 0
+  let tabSize = 0
+
+  const sizeName = ['top', 'bottom'].includes(rootTabs.props.tabPosition)
+    ? 'width'
+    : 'height'
+  const sizeDir = sizeName === 'width' ? 'x' : 'y'
+  const position = sizeDir === 'x' ? 'left' : 'top'
+
+  props.tabs.every((tab) => {
+    const $el = instance.parent?.refs?.[`tab-${tab.uid}`]
+    if (!$el) return false
+
+    if (!tab.active) {
+      return true
+    }
+
+    offset = $el[`offset${capitalize(position)}`]
+    tabSize = $el[`client${capitalize(sizeName)}`]
+
+    const tabStyles = window.getComputedStyle($el)
+
+    if (sizeName === 'width') {
+      if (props.tabs.length > 1) {
+        tabSize -=
+          Number.parseFloat(tabStyles.paddingLeft) +
+          Number.parseFloat(tabStyles.paddingRight)
+      }
+      offset += Number.parseFloat(tabStyles.paddingLeft)
+    }
+    return false
+  })
+
+  return {
+    [sizeName]: `${tabSize}px`,
+    transform: `translate${capitalize(sizeDir)}(${offset}px)`,
+  }
+}
+
+const update = () => (barStyle.value = getBarStyle())
+
+watch(
+  () => props.tabs,
+  async () => {
+    await nextTick()
+    update()
+  },
+  { immediate: true }
+)
+useResizeObserver(barRef, () => update())
+
+defineExpose({
+  /** @description tab root html element */
+  ref: barRef,
+  /** @description method to manually update tab bar style */
+  update,
+})
+</script>

package/src/components/tabs/src/tab-nav.jsx

@@ -0,0 +1,413 @@
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  inject,
+  nextTick,
+  onMounted,
+  onUpdated,
+  ref,
+  watch,
+} from 'vue'
+import {
+  useDocumentVisibility,
+  useResizeObserver,
+  useWindowFocus,
+} from '@vueuse/core'
+import {
+  buildProps,
+  capitalize,
+  definePropType,
+  mutable,
+  throwError,
+} from 'element-plus/es/utils/index.mjs'
+import { EVENT_CODE } from 'element-plus/es/constants/index.mjs'
+import { ElIcon } from 'element-plus/es/components/icon/index.mjs'
+import { ArrowLeft, ArrowRight, Close } from '@element-plus/icons-vue'
+import { useNamespace } from 'element-plus/es/hooks/index.mjs'
+import TabBar from './tab-bar.vue'
+import { tabsRootContextKey } from './constants.js'
+
+// import type { CSSProperties, ExtractPropTypes } from 'vue'
+// import type { TabsPaneContext } from './constants'
+// import type { TabPaneName } from './tabs'
+
+// interface Scrollable {
+//   next?: boolean
+//   prev?: number
+// }
+
+export const tabNavProps = buildProps({
+  panes: {
+    type: definePropType(Array),
+    default: () => mutable([]),
+  },
+  currentName: {
+    type: [String, Number],
+    default: '',
+  },
+  editable: Boolean,
+  type: {
+    type: String,
+    values: ['card', 'border-card', ''],
+    default: '',
+  },
+  stretch: Boolean,
+})
+
+export const tabNavEmits = {
+  tabClick: (tab, tabName, ev) =>
+    ev instanceof Event,
+  tabRemove: (tab, ev) => ev instanceof Event,
+}
+
+// export type TabNavProps = ExtractPropTypes<typeof tabNavProps>
+// export type TabNavEmits = typeof tabNavEmits
+
+const COMPONENT_NAME = 'ElTabNav'
+const TabNav = defineComponent({
+  name: COMPONENT_NAME,
+  props: tabNavProps,
+  emits: tabNavEmits,
+  setup(props, { expose, emit }) {
+    const vm = getCurrentInstance()
+
+    const rootTabs = inject(tabsRootContextKey)
+    if (!rootTabs) throwError(COMPONENT_NAME, `<el-tabs><tab-nav /></el-tabs>`)
+
+    const ns = useNamespace('tabs')
+    const visibility = useDocumentVisibility()
+    const focused = useWindowFocus()
+
+    const navScroll$ = ref()
+    const nav$ = ref()
+    const el$ = ref()
+
+    const tabBarRef = ref()
+
+    const scrollable = ref(false)
+    const navOffset = ref(0)
+    const isFocus = ref(false)
+    const focusable = ref(true)
+
+    const sizeName = computed(() =>
+      ['top', 'bottom'].includes(rootTabs.props.tabPosition)
+        ? 'width'
+        : 'height'
+    )
+    const navStyle = computed(() => {
+      const dir = sizeName.value === 'width' ? 'X' : 'Y'
+      return {
+        transform: `translate${dir}(-${navOffset.value}px)`,
+      }
+    })
+
+    const scrollPrev = () => {
+      if (!navScroll$.value) return
+
+      const containerSize =
+        navScroll$.value[`offset${capitalize(sizeName.value)}`]
+      const currentOffset = navOffset.value
+
+      if (!currentOffset) return
+
+      const newOffset =
+        currentOffset > containerSize ? currentOffset - containerSize : 0
+
+      navOffset.value = newOffset
+    }
+
+    const scrollNext = () => {
+      if (!navScroll$.value || !nav$.value) return
+
+      const navSize = nav$.value[`offset${capitalize(sizeName.value)}`]
+      const containerSize =
+        navScroll$.value[`offset${capitalize(sizeName.value)}`]
+      const currentOffset = navOffset.value
+
+      if (navSize - currentOffset <= containerSize) return
+
+      const newOffset =
+        navSize - currentOffset > containerSize * 2
+          ? currentOffset + containerSize
+          : navSize - containerSize
+
+      navOffset.value = newOffset
+    }
+
+    const scrollToActiveTab = async () => {
+      const nav = nav$.value
+      if (!scrollable.value || !el$.value || !navScroll$.value || !nav) return
+
+      await nextTick()
+
+      const activeTab = el$.value.querySelector('.is-active')
+      if (!activeTab) return
+
+      const navScroll = navScroll$.value
+      const isHorizontal = ['top', 'bottom'].includes(
+        rootTabs.props.tabPosition
+      )
+      const activeTabBounding = activeTab.getBoundingClientRect()
+      const navScrollBounding = navScroll.getBoundingClientRect()
+      const maxOffset = isHorizontal
+        ? nav.offsetWidth - navScrollBounding.width
+        : nav.offsetHeight - navScrollBounding.height
+      const currentOffset = navOffset.value
+      let newOffset = currentOffset
+
+      if (isHorizontal) {
+        if (activeTabBounding.left < navScrollBounding.left) {
+          newOffset =
+            currentOffset - (navScrollBounding.left - activeTabBounding.left)
+        }
+        if (activeTabBounding.right > navScrollBounding.right) {
+          newOffset =
+            currentOffset + activeTabBounding.right - navScrollBounding.right
+        }
+      } else {
+        if (activeTabBounding.top < navScrollBounding.top) {
+          newOffset =
+            currentOffset - (navScrollBounding.top - activeTabBounding.top)
+        }
+        if (activeTabBounding.bottom > navScrollBounding.bottom) {
+          newOffset =
+            currentOffset +
+            (activeTabBounding.bottom - navScrollBounding.bottom)
+        }
+      }
+      newOffset = Math.max(newOffset, 0)
+      navOffset.value = Math.min(newOffset, maxOffset)
+    }
+
+    const update = () => {
+      if (!nav$.value || !navScroll$.value) return
+
+      props.stretch && tabBarRef.value?.update()
+
+      const navSize = nav$.value[`offset${capitalize(sizeName.value)}`]
+      const containerSize =
+        navScroll$.value[`offset${capitalize(sizeName.value)}`]
+      const currentOffset = navOffset.value
+
+      if (containerSize < navSize) {
+        scrollable.value = scrollable.value || {}
+        scrollable.value.prev = currentOffset
+        scrollable.value.next = currentOffset + containerSize < navSize
+        if (navSize - currentOffset < containerSize) {
+          navOffset.value = navSize - containerSize
+        }
+      } else {
+        scrollable.value = false
+        if (currentOffset > 0) {
+          navOffset.value = 0
+        }
+      }
+    }
+
+    const changeTab = (e) => {
+      const code = e.code
+
+      const { up, down, left, right } = EVENT_CODE
+      if (![up, down, left, right].includes(code)) return
+
+      // 左右上下键更换tab
+      const tabList = Array.from(
+        (e.currentTarget).querySelectorAll<HTMLDivElement>(
+          '[role=tab]:not(.is-disabled)'
+        )
+      )
+      const currentIndex = tabList.indexOf(e.target)
+
+      let nextIndex
+      if (code === left || code === up) {
+        // left
+        if (currentIndex === 0) {
+          // first
+          nextIndex = tabList.length - 1
+        } else {
+          nextIndex = currentIndex - 1
+        }
+      } else {
+        // right
+        if (currentIndex < tabList.length - 1) {
+          // not last
+          nextIndex = currentIndex + 1
+        } else {
+          nextIndex = 0
+        }
+      }
+      tabList[nextIndex].focus({ preventScroll: true }) // 改变焦点元素
+      tabList[nextIndex].click() // 选中下一个tab
+      setFocus()
+    }
+
+    const setFocus = () => {
+      if (focusable.value) isFocus.value = true
+    }
+    const removeFocus = () => (isFocus.value = false)
+
+    watch(visibility, (visibility) => {
+      if (visibility === 'hidden') {
+        focusable.value = false
+      } else if (visibility === 'visible') {
+        setTimeout(() => (focusable.value = true), 50)
+      }
+    })
+    watch(focused, (focused) => {
+      if (focused) {
+        setTimeout(() => (focusable.value = true), 50)
+      } else {
+        focusable.value = false
+      }
+    })
+
+    useResizeObserver(el$, update)
+
+    onMounted(() => setTimeout(() => scrollToActiveTab(), 0))
+    onUpdated(() => update())
+
+    expose({
+      scrollToActiveTab,
+      removeFocus,
+    })
+
+    watch(
+      () => props.panes,
+      () => vm.update(),
+      { flush: 'post', deep: true }
+    )
+
+    return () => {
+      const scrollBtn = scrollable.value
+        ? [
+            <span
+              class={[
+                ns.e('nav-prev'),
+                ns.is('disabled', !scrollable.value.prev),
+              ]}
+              onClick={scrollPrev}
+            >
+              <ElIcon>
+                <ArrowLeft />
+              </ElIcon>
+            </span>,
+            <span
+              class={[
+                ns.e('nav-next'),
+                ns.is('disabled', !scrollable.value.next),
+              ]}
+              onClick={scrollNext}
+            >
+              <ElIcon>
+                <ArrowRight />
+              </ElIcon>
+            </span>,
+          ]
+        : null
+
+      const tabs = props.panes.map((pane, index) => {
+        const uid = pane.uid
+        const disabled = pane.props.disabled
+        const tabName = pane.props.name ?? pane.index ?? `${index}`
+        const closable = !disabled && (pane.isClosable || props.editable)
+        pane.index = `${index}`
+
+        const btnClose = closable ? (
+          <ElIcon
+            class="is-icon-close"
+            // `onClick` not exist when generate dts
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            onClick={(ev) => emit('tabRemove', pane, ev)}
+          >
+            <Close />
+          </ElIcon>
+        ) : null
+
+        const tabLabelContent = pane.slots.label?.() || pane.props.label
+        const tabindex = !disabled && pane.active ? 0 : -1
+
+        return (
+          <div
+            ref={`tab-${uid}`}
+            class={[
+              ns.e('item'),
+              ns.is(rootTabs.props.tabPosition),
+              ns.is('active', pane.active),
+              ns.is('disabled', disabled),
+              ns.is('closable', closable),
+              ns.is('focus', isFocus.value),
+            ]}
+            id={`tab-${tabName}`}
+            key={`tab-${uid}`}
+            aria-controls={`pane-${tabName}`}
+            role="tab"
+            aria-selected={pane.active}
+            tabindex={tabindex}
+            onFocus={() => setFocus()}
+            onBlur={() => removeFocus()}
+            onClick={(ev) => {
+              removeFocus()
+              emit('tabClick', pane, tabName, ev)
+            }}
+            onKeydown={(ev) => {
+              if (
+                closable &&
+                (ev.code === EVENT_CODE.delete ||
+                  ev.code === EVENT_CODE.backspace)
+              ) {
+                emit('tabRemove', pane, ev)
+              }
+            }}
+          >
+            {...[tabLabelContent, btnClose]}
+          </div>
+        )
+      })
+
+      return (
+        <div
+          ref={el$}
+          class={[
+            ns.e('nav-wrap'),
+            ns.is('scrollable', !!scrollable.value),
+            ns.is(rootTabs.props.tabPosition),
+          ]}
+        >
+          {scrollBtn}
+          <div class={ns.e('nav-scroll')} ref={navScroll$}>
+            <div
+              class={[
+                ns.e('nav'),
+                ns.is(rootTabs.props.tabPosition),
+                ns.is(
+                  'stretch',
+                  props.stretch &&
+                    ['top', 'bottom'].includes(rootTabs.props.tabPosition)
+                ),
+              ]}
+              ref={nav$}
+              style={navStyle.value}
+              role="tablist"
+              onKeydown={changeTab}
+            >
+              {...[
+                !props.type ? (
+                  <TabBar ref={tabBarRef} tabs={[...props.panes]} />
+                ) : null,
+                tabs,
+              ]}
+            </div>
+          </div>
+        </div>
+      )
+    }
+  },
+})
+
+// export type TabNavInstance = InstanceType<typeof TabNav> & {
+//   scrollToActiveTab: () => Promise<void>
+//   removeFocus: () => void
+// }
+export default TabNav

package/src/components/tabs/src/tab-pane.js

@@ -0,0 +1,15 @@
+import { buildProps } from 'element-plus/es/utils/index.mjs'
+
+export const tabPaneProps = buildProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: [String, Number],
+  },
+  closable: Boolean,
+  disabled: Boolean,
+  lazy: Boolean,
+})
+