@greypan/web-ui 1.1.1 → 1.2.1

package/src/components/back-top/index.ts

@@ -1,124 +0,0 @@
-import 'iconify-icon'
-import '@/components/button'
-import { getRootScrollTop } from '@greypan/browser-kit'
-import { html, LitElement, type PropertyValues, unsafeCSS } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import style from './style.css?inline'
-
-@customElement('web-ui-back-top')
-export class WebUiBackTop extends LitElement {
-  static styles = unsafeCSS(style)
-
-  @property({ type: Boolean, reflect: true }) smooth = true
-  @property({ type: Number, reflect: true }) threshold: number = 200
-  @property({ type: Boolean, reflect: true }) visible = false
-  @property({ type: Object, attribute: false }) scrollTarget: HTMLElement | Window = window
-
-  @state() private eventController?: AbortController
-
-  override connectedCallback() {
-    super.connectedCallback()
-    this.computeVisible()
-    this.onScrollTarget()
-  }
-
-  override disconnectedCallback() {
-    super.disconnectedCallback()
-    this.eventController?.abort()
-  }
-
-  protected override willUpdate(props: PropertyValues) {
-    super.willUpdate(props)
-
-    if (props.has('threshold') || props.has('scrollTarget')) {
-      this.computeVisible()
-    }
-    //避免首次与 connectedCallback 重复触发
-    if (props.has('scrollTarget') && this.hasUpdated) {
-      this.onScrollTarget()
-    }
-  }
-
-  private get target() {
-    if (!this.scrollTarget) {
-      return window
-    }
-    const isRoot =
-      this.scrollTarget === window ||
-      this.scrollTarget === document.documentElement ||
-      this.scrollTarget === document.body
-    return isRoot ? window : this.scrollTarget
-  }
-
-  private onScrollTarget() {
-    this.eventController?.abort()
-    this.eventController = new AbortController()
-
-    this.target.addEventListener(
-      'scroll',
-      () => {
-        this.computeVisible()
-      },
-      {
-        signal: this.eventController.signal,
-        passive: true
-      }
-    )
-  }
-
-  private computeVisible() {
-    const { target } = this
-    let nextVisible: boolean
-    if (target === window) {
-      nextVisible = getRootScrollTop() >= this.threshold
-    } else if (target instanceof HTMLElement) {
-      nextVisible = target.scrollTop >= this.threshold
-    } else {
-      throw new Error('Prop scrollTarget must be HTMLElement or Window.')
-    }
-    if (nextVisible !== this.visible) {
-      this.visible = nextVisible
-      this.dispatchEvent(
-        new CustomEvent('visible-change', {
-          detail: { visible: nextVisible },
-          bubbles: true,
-          composed: true
-        })
-      )
-    }
-  }
-
-  toTop() {
-    this.target.scrollTo({
-      top: 0,
-      behavior: this.smooth ? 'smooth' : 'auto'
-    })
-  }
-
-  private onEnter(e: KeyboardEvent) {
-    if ((e as KeyboardEvent).key == 'Enter') {
-      e.preventDefault()
-      this.toTop()
-    }
-  }
-
-  render() {
-    return html`
-      <div role="button" tabindex="0" @click=${this.toTop} @keydown=${this.onEnter}>
-        <slot>
-          <!-- 默认 slot 加上 tabindex="-1"，防止双重 focus -->
-          <web-ui-button tabindex="-1" icon>
-            <iconify-icon icon="octicon:move-to-top-16" width="16" height="16"></iconify-icon>
-          </web-ui-button>
-        </slot>
-      </div>
-    `
-  }
-}
-
-export interface WebUiBackTop {
-  readonly $events: {
-    'visible-change': CustomEvent<{ visible: boolean }>
-  }
-}

package/src/components/back-top/style.css

@@ -1,25 +0,0 @@
-:host {
-  pointer-events: none;
-
-  position: fixed;
-  z-index: var(--web-ui-back-top-z-index, auto);
-  top: var(--web-ui-back-top-top, auto);
-  right: var(--web-ui-back-top-right, 20px);
-  bottom: var(--web-ui-back-top-bottom, 20px);
-  left: var(--web-ui-back-top-left, auto);
-  transform: scale(0);
-
-  display: inline-block;
-
-  visibility: hidden;
-  opacity: 0;
-
-  transition: all 0.3s ease-out;
-}
-
-:host([visible]) {
-  pointer-events: auto;
-  transform: scale(1);
-  visibility: visible;
-  opacity: 1;
-}

package/src/components/button/index.ts

@@ -1,28 +0,0 @@
-import { html, LitElement, unsafeCSS } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import style from './style.css?inline'
-
-@customElement('web-ui-button')
-export class WebUiButton extends LitElement {
-  static styles = unsafeCSS(style)
-
-  @property({ type: Boolean, reflect: true }) full = false
-  @property({ type: Boolean, reflect: true }) primary = false
-  @property({ type: Boolean, reflect: true }) text = false
-  @property({ type: Boolean, reflect: true }) icon = false
-
-  render() {
-    return html`
-      <button>
-        ${this.icon
-          ? html`<slot></slot>`
-          : html`
-              <slot name="prefix"></slot>
-              <slot></slot>
-              <slot name="suffix"></slot>
-            `}
-      </button>
-    `
-  }
-}

package/src/components/button/style.css

@@ -1,52 +0,0 @@
-:host {
-  button {
-    cursor: pointer;
-
-    display: inline-flex;
-    gap: var(--web-ui-button-gap, 8px);
-    align-items: center;
-    justify-content: center;
-
-    width: max-content;
-    min-height: var(--web-ui-button-h, 32px);
-    padding: var(--web-ui-button-p-y, 4px) var(--web-ui-button-p-x, 16px);
-    border: none;
-    border-radius: 999vmax;
-
-    font-size: var(--web-ui-button-font-size, 14px);
-    font-weight: var(--web-ui-button-bold, 500);
-    color: var(--web-ui-button-color, #006cf9);
-
-    background: none;
-    background-color: var(--web-ui-button-bg, #f0f0f6);
-  }
-}
-
-:host([full]) {
-  button {
-    display: flex;
-    width: 100%;
-  }
-}
-
-:host([primary]) {
-  button {
-    color: var(--web-ui-button-primary-color, #fff);
-    background-color: var(--web-ui-button-primary-bg, #006cf9);
-  }
-}
-
-:host([text]) {
-  button {
-    color: var(--web-ui-button-primary-color, #006cf9);
-    background-color: transparent;
-  }
-}
-
-:host([icon]) {
-  button {
-    width: var(--web-ui-button-h, 32px);
-    height: var(--web-ui-button-h, 32px);
-    padding: var(--web-ui-button-p-y, 4px);
-  }
-}

package/src/components/layout/__tests__/layout.spec.ts

@@ -1,7 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test'
-
-describe('test', () => {
-  it('1 + 1 = 2', () => {
-    expect(1 + 1).toBe(2)
-  })
-})

package/src/components/layout/index.ts

@@ -1,26 +0,0 @@
-import { html, LitElement, unsafeCSS } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import style from './style.css?inline'
-
-@customElement('web-ui-layout')
-export class WebUiLayout extends LitElement {
-  static styles = unsafeCSS(style)
-
-  render() {
-    return html`
-      <header>
-        <slot name="header"></slot>
-      </header>
-      <main>
-        <slot></slot>
-      </main>
-      <aside>
-        <div class="menu"><slot name="sidebar"></slot></div>
-      </aside>
-      <footer>
-        <slot name="tabbar"></slot>
-      </footer>
-    `
-  }
-}

package/src/components/layout/style.css

@@ -1,50 +0,0 @@
-:host {
-  display: grid;
-  grid-template-areas:
-    'sidebar header'
-    'sidebar content';
-  grid-template-columns: var(--web-ui-base-layout-sidebar-width, 240px) 1fr;
-  grid-template-rows: var(--web-ui-base-layout-header-height, 64px) 1fr;
-
-  box-sizing: border-box;
-  min-height: 100dvh;
-  min-height: 100vh;
-
-  * {
-    box-sizing: inherit;
-  }
-}
-
-header {
-  position: sticky;
-  top: 0;
-  right: 0;
-  grid-area: header;
-}
-
-main {
-  grid-area: content;
-}
-
-aside {
-  position: sticky;
-  top: 0;
-  left: 0;
-
-  grid-area: sidebar;
-
-  height: 100dvh;
-  height: 100vh;
-  padding: 8px;
-
-  .menu {
-    height: 100%;
-    border-radius: 16px;
-    background-color: var(--web-ui-base-layout-bg, #f5f5f5);
-    box-shadow: 2px 4px 32px rgb(0 0 0 / 0.2);
-  }
-}
-
-footer {
-  grid-area: footer;
-}

package/src/components/svg-draw-lines/index.ts

@@ -1,127 +0,0 @@
-import { html, LitElement, unsafeCSS } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
-import style from './style.css?inline'
-
-@customElement('web-ui-svg-draw-lines')
-export class WebUiSvgDrawLines extends LitElement {
-  static styles = unsafeCSS(style)
-
-  @property({ type: Number, reflect: true }) duration = 1000
-  @property({ type: String, reflect: true }) easing = 'linear'
-
-  @state() private isAnimating = false
-  @state() private svgClone: SVGSVGElement | null = null
-  @query('slot') private slotEl!: HTMLSlotElement
-
-  private handleSlotChange() {
-    if (this.isAnimating) return
-
-    this.cloneOriginalSvg()
-
-    this.isAnimating = true
-    void this.startAnimation()
-  }
-
-  private cloneOriginalSvg() {
-    const original = this.slotEl.assignedElements({ flatten: true })[0]
-    if (!(original instanceof SVGSVGElement)) return
-
-    const svgClone = original.cloneNode(true) as SVGSVGElement
-    svgClone.classList.add('svg-clone')
-    this.svgClone = svgClone
-  }
-
-  private async startAnimation() {
-    if (!this.svgClone) return
-    await this.updateComplete
-
-    const selectors = 'path, rect, circle, line, polyline, polygon, ellipse'
-    const elements = Array.from(this.svgClone.querySelectorAll(selectors)) as SVGGeometryElement[]
-
-    const animTasks: SVGGeometryElement[] = []
-    let cursor = { x: 0, y: 0 }
-
-    // 除 path 外其余几何图形无需额外处理
-    // 将绘制多段路径的单 path 先拆分为多 path 并重新插入 dom
-    // 再分别计算每个 path 的 total length
-    elements.forEach(el => {
-      if (el instanceof SVGPathElement) {
-        const d = el.getAttribute('d') || ''
-        const segments = d.split(/(?=[Mm])/).filter(s => s.trim())
-
-        // 无论是一段还是多段，统一处理
-        segments.forEach(seg => {
-          const pathPart = segments.length > 1 ? (el.cloneNode() as SVGPathElement) : el
-          let finalD = seg.startsWith('m') ? `M${cursor.x} ${cursor.y}${seg}` : seg
-
-          finalD = this.fixPathGap(pathPart, finalD)
-          pathPart.setAttribute('d', finalD)
-
-          if (segments.length > 1) el.parentNode?.insertBefore(pathPart, el)
-
-          animTasks.push(pathPart)
-
-          const end = pathPart.getPointAtLength(pathPart.getTotalLength())
-          cursor = { x: end.x, y: end.y }
-        })
-
-        if (segments.length > 1) el.remove()
-      } else {
-        animTasks.push(el)
-      }
-    })
-
-    if (animTasks.length === 0) return this.stopAnimation()
-
-    const promises = animTasks.map((el, i) => {
-      return new Promise<void>(resolve => {
-        this.drawLine(el, i, resolve)
-      })
-    })
-
-    await Promise.all(promises)
-    this.stopAnimation()
-  }
-
-  // 缺口修复逻辑
-  // 多走 0.1px 触发渲染闭合和确定起始矢量方向
-  private fixPathGap(pathEl: SVGPathElement, d: string): string {
-    if (/[Zz]\s*$/.test(d)) {
-      pathEl.setAttribute('d', d)
-      const p0 = pathEl.getPointAtLength(0)
-      const p1 = pathEl.getPointAtLength(0.1)
-
-      // 将 Z 替换为回到起点并多走 0.1px 的路径
-      return d.replace(/[Zz]\s*$/, `L${p0.x.toFixed(3)} ${p0.y.toFixed(3)} L${p1.x.toFixed(3)} ${p1.y.toFixed(3)}`)
-    }
-    return d
-  }
-
-  private drawLine(el: SVGGeometryElement, index: number, onFinish: () => void) {
-    const strokeWidth = parseFloat(getComputedStyle(el).strokeWidth) || 0
-    const len = el.getTotalLength() + strokeWidth
-
-    el.style.strokeDasharray = `${len}`
-    el.style.strokeDashoffset = `${len}`
-
-    const anim = el.animate([{ strokeDashoffset: `${len}` }, { strokeDashoffset: '0' }], {
-      duration: this.duration,
-      easing: this.easing,
-      fill: 'forwards'
-    })
-    anim.onfinish = onFinish
-  }
-
-  private stopAnimation() {
-    this.isAnimating = false
-    this.svgClone = null
-  }
-
-  render() {
-    return html`
-      <slot ?hidden="${this.isAnimating}" @slotchange="${this.handleSlotChange}"></slot>
-      ${this.isAnimating ? this.svgClone : ''}
-    `
-  }
-}

package/src/components/svg-draw-lines/style.css

@@ -1,21 +0,0 @@
-:host {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-
-  .svg-clone {
-    pointer-events: none;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    width: 100%;
-    height: 100%;
-  }
-
-  slot[hidden] {
-    display: contents;
-    visibility: hidden;
-  }
-}

package/src/index.ts

@@ -1,4 +0,0 @@
-export * from '@/components/back-top'
-export * from '@/components/button'
-export * from '@/components/layout'
-export * from '@/components/svg-draw-lines'

package/src/types/react.ts

@@ -1,30 +0,0 @@
-import type { DetailedHTMLProps, HTMLAttributes } from 'react'
-
-import type { WebUiBackTop, WebUiButton, WebUiLayout } from '..'
-
-import type { ExtractProps, OmitLitBase } from './utils'
-// 提取 $events 并转化为 React 的 on 事件
-type ExtractReactEvents<T> = T extends { readonly $events: infer E }
-  ? {
-      [K in keyof E as `on${string & K}`]?: (e: E[K]) => void
-    }
-  : object
-
-export type ReactWrapper<T> = DetailedHTMLProps<
-  ExtractProps<OmitLitBase<T>> & ExtractReactEvents<T> & HTMLAttributes<HTMLElement>,
-  HTMLElement
->
-
-export interface WebUiComponents {
-  'web-ui-button': ReactWrapper<WebUiButton>
-  'web-ui-back-top': ReactWrapper<WebUiBackTop>
-  'web-ui-layout': ReactWrapper<WebUiLayout>
-}
-
-declare module 'react' {
-  // oxlint-disable-next-line typescript/no-namespace
-  namespace JSX {
-    // oxlint-disable-next-line typescript/no-empty-object-type
-    interface IntrinsicElements extends WebUiComponents {}
-  }
-}

package/src/types/utils.ts

@@ -1,14 +0,0 @@
-import type { LitElement } from 'lit'
-
-type Fn = (...args: unknown[]) => unknown
-
-/**
- * 1. 移除属性中的函数
- * 2. 移除 $events 虚拟属性
- * 3. 属性全部设为可选（符合 web component 标准）
- */
-export type ExtractProps<T> = {
-  [K in keyof T as T[K] extends Fn ? never : K extends '$events' ? never : K]?: T[K]
-}
-
-export type OmitLitBase<T> = Omit<T, keyof HTMLElement | keyof LitElement>

package/src/types/vue.ts

@@ -1,27 +0,0 @@
-import type { DefineComponent } from 'vue'
-
-import type { WebUiBackTop, WebUiButton, WebUiLayout } from '..'
-
-import type { ExtractProps, OmitLitBase } from './utils'
-
-// 提取 $events 并转化为 Vue on 事件
-// 使用 Capitalize 让事件在 Vue 模板中获得更好的驼峰/短横线兼容支持
-// 例如：识别 onVisibleChange 或 onVisible-change 格式
-type ExtractVueEvents<T> = T extends { readonly $events: infer E }
-  ? {
-      [K in keyof E as `on${Capitalize<string & K>}`]?: (e: E[K]) => void
-    }
-  : object
-
-export type VueWrapper<T> = DefineComponent<ExtractProps<OmitLitBase<T>> & ExtractVueEvents<T>>
-
-export interface WebUiComponents {
-  'web-ui-button': VueWrapper<WebUiButton>
-  'web-ui-back-top': VueWrapper<WebUiBackTop>
-  'web-ui-layout': VueWrapper<WebUiLayout>
-}
-
-declare module 'vue' {
-  // oxlint-disable-next-line typescript/no-empty-object-type
-  export interface GlobalComponents extends WebUiComponents {}
-}

package/tsconfig.app.json

@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "experimentalDecorators": true, // Lit 必备
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "types": ["vite/client"],
-    "useDefineForClassFields": false // Lit 必备
-  },
-  "exclude": ["src/**/__tests__"],
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["src/**/*"]
-}

package/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.node.json" },
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.vitest.json" }
-  ]
-}

package/tsconfig.node.json

@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "noEmit": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "types": ["node"]
-  },
-  "extends": "@tsconfig/node24/tsconfig.json",
-  "include": [
-    "vite.config.*",
-    "vitest.config.*",
-    "cypress.config.*",
-    "nightwatch.conf.*",
-    "playwright.config.*",
-    "eslint.config.*"
-  ]
-}

package/tsconfig.vitest.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": [],
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
-    "types": ["node", "jsdom"]
-  },
-  "exclude": [],
-  "extends": "./tsconfig.app.json",
-  "include": ["src/**/__tests__"]
-}

package/vite.config.ts

@@ -1,40 +0,0 @@
-import { resolve } from 'node:path'
-
-import dts from 'vite-plugin-dts'
-import { type UserConfig } from 'vite-plus'
-
-export default {
-  resolve: {
-    tsconfigPaths: true
-  },
-  plugins: [
-    dts({
-      tsconfigPath: './tsconfig.app.json'
-    })
-  ],
-  test: {
-    environment: 'jsdom'
-  },
-  css: {
-    transformer: 'lightningcss'
-  },
-  build: {
-    cssMinify: 'lightningcss',
-    sourcemap: true,
-    lib: {
-      entry: resolve(import.meta.dirname, 'src/index.ts'),
-      name: 'WebUi',
-      formats: ['es']
-    },
-    rollupOptions: {
-      external: ['@greypan/browser-kit', '@greypan/js-kit'],
-      output: {
-        preserveModules: true,
-        // 指定源码根目录，这样 dist 下就不会多出一层 'src' 目录
-        preserveModulesRoot: 'src',
-        dir: 'dist',
-        entryFileNames: '[name].js'
-      }
-    }
-  }
-} satisfies UserConfig