resolver-egretimp-plus 0.1.119 → 0.1.121

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

@@ -1,424 +0,0 @@
-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: '',
-  },
-  showBar: {
-    type: Boolean,
-    default: true
-  },
-  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)
-        const hidden = pane.props.hidden
-        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
-        if (hidden) {
-          return null
-        }
-        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),
-            ]}
-            style={ hidden ? {display: 'none'}: {}}
-            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)
-              }
-            }}
-          >
-            <div title={tabLabelContent} class='tabs__item-wrap'>
-              {...[tabLabelContent, btnClose]}
-            </div>
-          </div>
-        )
-      })
-
-      return (
-        <div
-          ref={el$}
-          class={[
-            ns.e('nav-wrap'),
-            ns.is('scrollable', !!scrollable.value),
-            ns.is(rootTabs.props.tabPosition),
-            !props.showBar ? 'hidden-bar' : ''
-          ]}
-        >
-          {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 && props.showBar ? (
-                  <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-bak/components/tabs/src/tab-pane.js

@@ -1,16 +0,0 @@
-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,
-  hidden: Boolean,
-})
-

package/src-bak/components/tabs/src/tab-pane.vue

@@ -1,80 +0,0 @@
-<template>
-  <div
-    v-if="shouldBeRender"
-    v-show="active"
-    :id="`pane-${paneName}`"
-    :class="ns.b()"
-    role="tabpanel"
-    :aria-hidden="!active"
-    :aria-labelledby="`tab-${paneName}`"
-  >
-    <slot />
-  </div>
-</template>
-
-<script setup>
-import {
-  computed,
-  getCurrentInstance,
-  inject,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  useSlots,
-  watch,
-} from 'vue'
-import { eagerComputed } from '@vueuse/core'
-import { throwError } from 'element-plus/es/utils/index.mjs'
-import { useNamespace } from 'element-plus/es/hooks/index.mjs'
-import { tabsRootContextKey } from './constants.js'
-import { tabPaneProps } from './tab-pane'
-
-const COMPONENT_NAME = 'ElTabPane'
-defineOptions({
-  name: COMPONENT_NAME,
-})
-const props = defineProps(tabPaneProps)
-
-const instance = getCurrentInstance()
-const slots = useSlots()
-
-const tabsRoot = inject(tabsRootContextKey)
-if (!tabsRoot)
-  throwError(COMPONENT_NAME, 'usage: <el-tabs><el-tab-pane /></el-tabs/>')
-
-const ns = useNamespace('tab-pane')
-
-const index = ref()
-const isClosable = computed(() => props.closable || tabsRoot.props.closable)
-const active = eagerComputed(
-  () => tabsRoot.currentName.value === (props.name ?? index.value)
-)
-const loaded = ref(active.value)
-const paneName = computed(() => props.name ?? index.value)
-const shouldBeRender = eagerComputed(
-  () => !props.lazy || loaded.value || active.value
-)
-
-watch(active, (val) => {
-  if (val) loaded.value = true
-})
-
-const pane = reactive({
-  uid: instance.uid,
-  slots,
-  props,
-  paneName,
-  active,
-  index,
-  isClosable,
-})
-
-onMounted(() => {
-  tabsRoot.registerPane(pane)
-})
-
-onUnmounted(() => {
-  tabsRoot.unregisterPane(pane.uid)
-})
-</script>