@king-one/antdv 1.0.4 → 1.0.5

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @king-one/antdv
+
+## 1.0.0
+
+### Major Changes
+
+- feat：虚拟列表、滚动条

package/antdv/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@king-one/antdv",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "",
+  "author": "",
+  "license": "ISC",
+  "keywords": [],
+  "main": "lib/index.js",
+  "module": "es/index.mjs",
+  "types": "es/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "ant-design-vue": "^4.2.4",
+    "async-validator": "^4.2.5",
+    "vue": "^3.4.34"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@king-one/utils": "workspace:^",
+    "evtd": "^0.2.4",
+    "vueuc": "^0.4.64"
+  }
+}

package/components/base/style/index.ts

@@ -0,0 +1,8 @@
+/*
+ * @Author: caohao
+ * @Date: 2023-12-13 09:02:51
+ * @LastEditors: caohao
+ * @LastEditTime: 2023-12-13 10:46:43
+ * @Description:
+ */
+import '@king-one/theme-chalk/src/base.scss'

package/components/form/component/form.ts

@@ -0,0 +1,21 @@
+/*
+ * @Description:
+ * @Version: 2.0
+ * @Autor: caohao
+ * @Date: 2024-09-16 17:25:58
+ * @LastEditors: caohao
+ * @LastEditTime: 2024-09-16 22:46:07
+ */
+import type {
+  RuleItem
+} from 'async-validator'
+import type { PropType } from 'vue'
+
+export const formType = {
+  model: {
+    type: Object
+  },
+  rules: {
+    type: Object as PropType<Record<string, RuleItem[]>>
+  }
+} as const

package/components/form/component/form.vue

@@ -0,0 +1,24 @@
+<!--
+ * @Description:
+ * @Version: 2.0
+ * @Autor: caohao
+ * @Date: 2024-09-16 17:25:53
+ * @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-15 16:47:20
+-->
+<script setup lang='ts'>
+import { formType } from './form'
+
+defineProps(formType)
+</script>
+
+<template>
+  <form class="king-form">
+    <div>伟大的好歌</div>
+    <slot />
+  </form>
+</template>
+
+<style>
+
+</style>

package/components/form/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from '../utils/install'
+import form from './component/form.vue'
+
+export * from './component/form'
+export const KForm = withInstall(form) // 增加类型
+export default KForm

package/components/form-item/component/form-item.vue

@@ -0,0 +1,106 @@
+<!-- eslint-disable no-console -->
+<script lang="ts" setup>
+import type { TableProps } from 'ant-design-vue'
+
+const columns: TableProps['columns'] = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    filters: [
+      {
+        text: 'Joe',
+        value: 'Joe'
+      },
+      {
+        text: 'Category 1',
+        value: 'Category 1',
+        children: [
+          {
+            text: 'Yellow',
+            value: 'Yellow'
+          },
+          {
+            text: 'Pink',
+            value: 'Pink'
+          }
+        ]
+      },
+      {
+        text: 'Category 2',
+        value: 'Category 2',
+        children: [
+          {
+            text: 'Green',
+            value: 'Green'
+          },
+          {
+            text: 'Black',
+            value: 'Black'
+          }
+        ]
+      }
+    ],
+    filterMode: 'tree',
+    filterSearch: true,
+    onFilter: (value, record) => record.name.includes(value),
+    width: '30%'
+  },
+  {
+    title: 'Age',
+    dataIndex: 'age',
+    sorter: (a, b) => a.age - b.age
+  },
+  {
+    title: 'Address',
+    dataIndex: 'address',
+    filters: [
+      {
+        text: 'London',
+        value: 'London'
+      },
+      {
+        text: 'New York',
+        value: 'New York'
+      }
+    ],
+    onFilter: (value, record) => record.address.startsWith(value),
+    filterSearch: true,
+    width: '40%'
+  }
+]
+
+const data = [
+  {
+    key: '1',
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park'
+  },
+  {
+    key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 1 Lake Park'
+  },
+  {
+    key: '3',
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park'
+  },
+  {
+    key: '4',
+    name: 'Jim Red',
+    age: 32,
+    address: 'London No. 2 Lake Park'
+  }
+]
+
+function onChange(pagination, filters, sorter, extra) {
+  console.log('params', pagination, filters, sorter, extra)
+}
+</script>
+
+<template>
+  <a-table :columns="columns" :data-source="data" @change="onChange" />
+</template>

package/components/index.ts

@@ -0,0 +1,10 @@
+/*
+ * @Description:
+ * @Version: 2.0
+ * @Autor: caohao
+ * @Date: 2024-09-17 00:26:48
+ * @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-15 15:49:07
+ */
+export * from './form'
+export * from './virtual-list'

package/components/scroll-bar/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from '../utils/install'
+import ScrollBar from './src/scroll-bar'
+import './style'
+
+export * from './src/types'
+export const KScrollBar = withInstall(ScrollBar)
+export default KScrollBar

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

@@ -0,0 +1,211 @@
+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

@@ -0,0 +1,7 @@
+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

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

package/components/utils/install.ts

@@ -0,0 +1,30 @@
+/*
+ * @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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,47 @@
+<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

@@ -0,0 +1,93 @@
+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

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