@king-one/antdv 1.0.5 → 1.0.7

package/components/scroll-bar/src/scroll-bar.tsx

@@ -1,211 +0,0 @@
-import { computed, defineComponent, onMounted, ref } from 'vue'
-import { VResizeObserver } from 'vueuc'
-import { off, on } from 'evtd'
-import { defaultNamespace } from '@king-one/antdv/hooks/use-namespace'
-import { scrollbarProps } from './types'
-
-export default defineComponent({
-  name: 'KScrollbar',
-  props: scrollbarProps,
-  inheritAttrs: false,
-  setup(props) {
-    onMounted(() => {
-      if (props.container)
-        return
-      sync()
-    })
-    const handleContentResize = () => {
-      sync()
-    }
-    const handleContainerResize = () => {
-      sync()
-    }
-    const contentRef = ref<HTMLElement | null>(null)
-    const containerRef = ref<HTMLElement | null>(null)
-    const yRailRef = ref<HTMLElement | null>(null)
-    const contentHeightRef = ref<Nullable<number>>(null)
-    const contentWidthRef = ref<Nullable<number>>(null)
-    const containerHeightRef = ref<Nullable<number>>(null)
-    const containerWidthRef = ref<Nullable<number>>(null)
-    const yRailSizeRef = ref<Nullable<number>>(null)
-    const mergedContentRef = computed(() => props.content?.() || contentRef.value)
-    const mergedContainerRef = computed(() => props.container?.() || containerRef.value)
-    const containerScrollTopRef = ref(0)
-    const yBarSizeRef = computed(() => {
-      const { value: containerHeight } = containerHeightRef
-      const { value: contentHeight } = contentHeightRef
-      const { value: yRailSize } = yRailSizeRef
-      if (containerHeight === null || contentHeight === null || yRailSize === null) {
-        return 0
-      }
-      else {
-        return Math.min(containerHeight, (yRailSize * containerHeight) / contentHeight + 5 * 1.5)
-      }
-    })
-    const yBarTopRef = computed(() => {
-      const { value: containerHeight } = containerHeightRef
-      const { value: containerScrollTop } = containerScrollTopRef
-      const { value: contentHeight } = contentHeightRef
-      const { value: yRailSize } = yRailSizeRef
-      if (containerHeight === null || contentHeight === null || yRailSize === null) {
-        return 0
-      }
-      else {
-        const heightDiff = contentHeight - containerHeight
-        if (!heightDiff)
-          return 0
-        return (containerScrollTop / heightDiff) * (yRailSize - yBarSizeRef.value)
-      }
-    })
-    const yBarTopPxRef = computed(() => {
-      return `${yBarTopRef.value}px`
-    })
-    const needYBarRef = computed(() => {
-      const { value: containerHeight } = containerHeightRef
-      const { value: contentHeight } = contentHeightRef
-      return containerHeight !== null && contentHeight !== null && contentHeight > containerHeight
-    })
-
-    const yBarSizePxRef = computed(() => {
-      return `${yBarSizeRef.value}px`
-    })
-    const syncPositionState = () => {
-      const { value: content } = mergedContentRef
-      if (content) {
-        contentHeightRef.value = content.offsetHeight
-        contentWidthRef.value = content.offsetWidth
-      }
-      const { value: container } = mergedContainerRef
-      if (container) {
-        containerHeightRef.value = container.offsetHeight
-        containerWidthRef.value = container.offsetWidth
-      }
-      const { value: yRailEl } = yRailRef
-      if (yRailEl) {
-        yRailSizeRef.value = yRailEl.offsetHeight
-      }
-    }
-    let yBarPressed = false
-    let memoYTop: number = 0
-    let memoMouseY: number = 0
-    let yBarVanishTimerId: number | undefined
-
-    const handleYScrollMouseMove = (e: MouseEvent) => {
-      if (!yBarPressed)
-        return
-
-      if (yBarVanishTimerId !== undefined) {
-        window.clearTimeout(yBarVanishTimerId)
-      }
-      const { value: containerHeight } = containerHeightRef
-      const { value: contentHeight } = contentHeightRef
-      const { value: yBarSize } = yBarSizeRef
-      if (containerHeight === null || contentHeight === null)
-        return
-      const dY = e.clientY - memoMouseY
-      const dScrollTop = (dY * (contentHeight - containerHeight)) / (containerHeight - yBarSize)
-      const toScrollTopUpperBound = contentHeight - containerHeight
-      let toScrollTop = memoYTop + dScrollTop
-      toScrollTop = Math.min(toScrollTopUpperBound, toScrollTop)
-      toScrollTop = Math.max(toScrollTop, 0)
-      const { value: container } = mergedContainerRef
-      if (container) {
-        container.scrollTop = toScrollTop
-      }
-    }
-    const handleYScrollMouseUp = (e: MouseEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      off('mousemove', window, handleYScrollMouseMove, true)
-      off('mouseup', window, handleYScrollMouseUp, true)
-      yBarPressed = false
-      sync()
-    }
-    const handleYScrollMouseDown = (e: MouseEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      on('mousemove', window, handleYScrollMouseMove, true)
-      on('mouseup', window, handleYScrollMouseUp, true)
-      memoYTop = containerScrollTopRef.value
-      memoMouseY = e.clientY
-      yBarPressed = true
-    }
-    function handleScroll(e: Event): void {
-      const { onScroll } = props
-      if (onScroll)
-        onScroll(e)
-      syncScrollState()
-    }
-    function syncScrollState(): void {
-      // only collect scroll state, do not trigger any dom event
-      const { value: container } = mergedContainerRef
-      if (container) {
-        containerScrollTopRef.value = container.scrollTop
-      }
-    }
-    function sync(): void {
-      syncPositionState()
-      syncScrollState()
-    }
-
-    return {
-      sync,
-      handleContentResize,
-      handleContainerResize,
-      contentRef,
-      yRailRef,
-      containerRef,
-      contentHeightRef,
-      containerHeightRef,
-      needYBarRef,
-      yBarSizePxRef,
-      handleYScrollMouseDown,
-      yBarTopPxRef,
-      handleScroll
-    }
-  },
-  render() {
-    const { $slots } = this
-    const createYBar = () => {
-      return (
-        <div class={`${defaultNamespace}-scrollbar-rail`} ref="yRailRef">
-          {this.needYBarRef && (
-            <div
-              class={`${defaultNamespace}-scrollbar-rail__scrollbar`}
-              style={{
-                height: this.yBarSizePxRef,
-                top: this.yBarTopPxRef
-              }}
-              onMousedown={this.handleYScrollMouseDown}
-            >
-            </div>
-          )}
-        </div>
-      )
-    }
-
-    const createChildren = () => {
-      return (
-        <div class={`${defaultNamespace}-scrollbar`} {...this.$attrs}>
-          {this.container
-            ? (
-                $slots.default?.()
-              )
-            : (
-                <div class={`${defaultNamespace}-scrollbar-container`} onScroll={this.handleScroll} ref="containerRef">
-                  <VResizeObserver onResize={this.handleContentResize}>
-                    <div ref="contentRef" class={`${defaultNamespace}-scrollbar-content`}>
-                      {$slots.default?.()}
-                    </div>
-                  </VResizeObserver>
-                </div>
-              )}
-
-          {createYBar()}
-        </div>
-      )
-    }
-    const createBarNode = this.container ? createChildren() : <VResizeObserver onResize={this.handleContainerResize}>{createChildren()}</VResizeObserver>
-    return createBarNode
-  }
-})

package/components/scroll-bar/src/types.ts

@@ -1,7 +0,0 @@
-import type { PropType } from 'vue'
-
-export const scrollbarProps = {
-  container: Function as PropType<() => HTMLElement | null | undefined>,
-  content: Function as PropType<() => HTMLElement | null | undefined>,
-  onScroll: Function as PropType<(e: Event) => void>
-} as const

package/components/scroll-bar/style/index.ts

@@ -1,2 +0,0 @@
-import '@king-one/antdv/components/base/style'
-import '@king-one/theme-chalk/src/scroll-bar.scss'

package/components/utils/install.ts

@@ -1,30 +0,0 @@
-/*
- * @Description:
- * @Version: 2.0
- * @Autor: caohao
- * @Date: 2024-09-17 00:15:40
- * @LastEditors: caohao
- * @LastEditTime: 2024-09-17 00:15:43
- */
-import type { App, Directive, Plugin } from 'vue'
-
-export type SFCWithInstall<T> = T & Plugin
-
-const defaultNamePrefix: string = 'K'
-export function withInstall<T>(main: T) {
-  (main as SFCWithInstall<T>).install = (app): void => {
-    const comp: Record<string, any> = main as Record<string, any>
-    app.component(defaultNamePrefix + comp.name, comp)
-  }
-  return main as SFCWithInstall<T>
-}
-
-// 注册指令
-export function withInstallDirectives<T extends Directive>(main: T, name: string) {
-  return {
-    install: (app: App): void => {
-      app.directive(name, main)
-    },
-    directive: main
-  }
-}

package/components/virtual-list/index.ts

@@ -1,6 +0,0 @@
-import { withInstall } from '../utils/install'
-import VirtualList from './src/virtual-list.vue'
-
-export * from './src/types'
-export const KVirtualList = withInstall(VirtualList)
-export default KVirtualList

package/components/virtual-list/src/types.ts

@@ -1,29 +0,0 @@
-import type { VirtualListItemData } from 'vueuc'
-import type { PropType } from 'vue'
-
-export const virtualListProps = {
-  items: {
-    type: Array as PropType<VirtualListItemData[]>,
-    default: () => []
-  },
-  itemSize: {
-    type: Number,
-    required: true
-  },
-  itemResizable: Boolean,
-  paddingTop: {
-    type: [Number, String] as PropType<number | string>,
-    default: 0
-  },
-  paddingBottom: {
-    type: [Number, String] as PropType<number | string>,
-    default: 0
-  },
-  keyField: {
-    type: String,
-    default: 'key'
-  },
-  onScroll: Function as PropType<() => void>,
-  onWheel: Function as PropType<(event: WheelEvent) => void>,
-  onResize: Function as PropType<(entry: ResizeObserverEntry) => void>
-} as const

package/components/virtual-list/src/virtual-list.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { VVirtualList, type VirtualListInst } from 'vueuc'
-import scrollbar from '../../scroll-bar'
-import { virtualListProps } from './types'
-
-const props = defineProps(virtualListProps)
-const virtualListInstRef = ref<VirtualListInst | null>(null)
-const scrollbarInstRef = ref<InstanceType<typeof scrollbar> | null>(null)
-function getScrollContainer(): HTMLElement | null | undefined {
-  return virtualListInstRef.value?.listElRef
-}
-function getScrollContent(): HTMLElement | null | undefined {
-  return virtualListInstRef.value?.itemsElRef
-}
-const syncScrollbar = () => scrollbarInstRef.value?.sync()
-function handleScroll() {
-  props.onScroll?.()
-  syncScrollbar()
-}
-function handleResize() {
-  syncScrollbar()
-}
-</script>
-
-<template>
-  <scrollbar ref="scrollbarInstRef" style="max-height: 300px" :container="getScrollContainer" :content="getScrollContent">
-    <VVirtualList
-      ref="virtualListInstRef"
-      :items="items"
-      style="height: 100%"
-      :item-size="itemSize"
-      :item-resizable="itemResizable"
-      :show-scrollbar="false"
-      :padding-bottom="paddingBottom"
-      :padding-top="paddingTop"
-      :on-scroll="handleScroll"
-      :on-resize="handleResize"
-    >
-      <template #default="{ item, index }">
-        <slot :item="item" :index="index" />
-      </template>
-    </VVirtualList>
-  </scrollbar>
-</template>
-
-<style></style>

package/hooks/use-namespace/index.ts

@@ -1,93 +0,0 @@
-import { computed, getCurrentInstance, inject, ref, unref } from 'vue'
-
-import type { InjectionKey, Ref } from 'vue'
-
-export const defaultNamespace = 'king'
-const statePrefix = 'is-'
-
-function _bem(namespace: string, block: string, blockSuffix: string, element: string, modifier: string) {
-  let cls = `${namespace}-${block}`
-  if (blockSuffix) {
-    cls += `-${blockSuffix}`
-  }
-  if (element) {
-    cls += `__${element}`
-  }
-  if (modifier) {
-    cls += `--${modifier}`
-  }
-  return cls
-}
-
-export const namespaceContextKey: InjectionKey<Ref<string | undefined>> = Symbol('namespaceContextKey')
-
-export function useGetDerivedNamespace(namespaceOverrides?: Ref<string | undefined>) {
-  const derivedNamespace = namespaceOverrides || (getCurrentInstance() ? inject(namespaceContextKey, ref(defaultNamespace)) : ref(defaultNamespace))
-  const namespace = computed(() => {
-    return unref(derivedNamespace) || defaultNamespace
-  })
-  return namespace
-}
-
-export function useNamespace(block: string, namespaceOverrides?: Ref<string | undefined>) {
-  const namespace = useGetDerivedNamespace(namespaceOverrides)
-  const b = (blockSuffix = '') => _bem(namespace.value, block, blockSuffix, '', '')
-  const e = (element?: string) => (element ? _bem(namespace.value, block, '', element, '') : '')
-  const m = (modifier?: string) => (modifier ? _bem(namespace.value, block, '', '', modifier) : '')
-  const be = (blockSuffix?: string, element?: string) => (blockSuffix && element ? _bem(namespace.value, block, blockSuffix, element, '') : '')
-  const em = (element?: string, modifier?: string) => (element && modifier ? _bem(namespace.value, block, '', element, modifier) : '')
-  const bm = (blockSuffix?: string, modifier?: string) => (blockSuffix && modifier ? _bem(namespace.value, block, blockSuffix, '', modifier) : '')
-  const bem = (blockSuffix?: string, element?: string, modifier?: string) =>
-    blockSuffix && element && modifier ? _bem(namespace.value, block, blockSuffix, element, modifier) : ''
-  const is: {
-    (name: string, state: boolean | undefined): string
-    (name: string): string
-  } = (name: string, ...args: [boolean | undefined] | []) => {
-    const state = args.length >= 1 ? args[0]! : true
-    return name && state ? `${statePrefix}${name}` : ''
-  }
-
-  // for css var
-  // --el-xxx: value;
-  const cssVar = (object: Record<string, string>) => {
-    const styles: Record<string, string> = {}
-    for (const key in object) {
-      if (object[key]) {
-        styles[`--${namespace.value}-${key}`] = object[key]
-      }
-    }
-    return styles
-  }
-  // with block
-  const cssVarBlock = (object: Record<string, string>) => {
-    const styles: Record<string, string> = {}
-    for (const key in object) {
-      if (object[key]) {
-        styles[`--${namespace.value}-${block}-${key}`] = object[key]
-      }
-    }
-    return styles
-  }
-
-  const cssVarName = (name: string) => `--${namespace.value}-${name}`
-  const cssVarBlockName = (name: string) => `--${namespace.value}-${block}-${name}`
-
-  return {
-    namespace,
-    b,
-    e,
-    m,
-    be,
-    em,
-    bm,
-    bem,
-    is,
-    // css
-    cssVar,
-    cssVarName,
-    cssVarBlock,
-    cssVarBlockName
-  }
-}
-
-export type UseNamespaceReturn = ReturnType<typeof useNamespace>

package/index.ts

@@ -1,4 +0,0 @@
-import installer from './installer'
-
-export * from './components'
-export default installer

package/installer.ts

@@ -1,19 +0,0 @@
-/*
- * @Description:
- * @Version: 2.0
- * @Autor: caohao
- * @Date: 2024-09-16 23:00:22
- * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
- * @LastEditTime: 2024-10-18 13:49:00
- */
-import type { App, Plugin } from 'vue'
-import { KForm, KVirtualList } from './components'
-
-const component = [KForm, KVirtualList] as Plugin[]
-export function install(app: App): any {
-  component.forEach(i => app.use(i))
-}
-const plugin = {
-  install
-}
-export default plugin