The themis from ryancui92

themis's Introduction

Ryan Cui

Hello, I am ryancui.

I’m currently working on echarts-composables which seems to be useless..., lol=_=
I am looking forward to something interesting and funny to dive in
I am very interested in Nintendo Games and IPs, such as Zelda, Mario

You can reach me with email: [email protected]

My blog is now hosting at Notion! Ryan's Blog

themis's People

Contributors

Watchers

themis's Issues

useEnterCommit

绑定 input 框的 keydown, compositionStart, compositionEnd 事件，让 input 框可以通过 enter 或 shift/ctrl+enter 提交当前输入内容。

同时避免在拼音输入状态下的 enter 键触发提交。

export function useEnterCommit(options?: {
  shift?: boolean
  ctrl?: boolean
  meta?: boolean
} = {}): {
  onCompositionStart: (event: KeyboardEvent) => void
  onCompositionEnd: (event: KeyboardEvent) => void
  onKeyDown: (event: KeyboardEvent) => void
  onCommit: (callback: (value: string) => void) => void
}

useTreeHelper

比如类似下面的场景

将一个 tree data, deep flat 成一个平铺数组
在一个 tree 中，找到符合条件的节点
在一个 tree 中，找到符合条件的节点的父节点
在一个 tree 中，找到符合条件的节点的从根到该节点的路径

export function useTree(
  tree: MaybeRefOrGetter<T[]>, // 如果只有一个根节点，业务自行处理成数组传入，降低内部复杂度
  options: {
    childProp: string // 后代节点属性名，默认 'children'
    keyProp: string // 节点唯一属性名，默认 'id', 也可以不传
  } = {}
): {
  nodes: ComputedRef<T[]> // deep flat 数组，这里应该保持了对传入数组的 obj 一对一的引用，如果直接改变 obj.xx，原数组应该也被改变
  find: (match: (node: T) => boolean): T | undefined
  findParent: (match: (node: T) => boolean): T | undefined // TODO: 如何区分根节点和节点不存在？parent 都不存在
  getPathFromRoot: (match: (node: T) => boolean): T[]
}

同理，应该也要相应的逆向方法

export function useAsTree(
  nodes: MaybeRefOrGetter<T[]>,
  options: {
    childProp: string // 后代节点属性名，默认 'children'
    keyProp: string // 节点唯一属性名，默认 'id', 也可以不传
  } = {}
): {
  tree: ComputedRef<T[]> // 树，这里应该保持了对传入数组的 obj 一对一的引用，如果直接改变 obj.xx，原数组应该也被改变
  find: (match: (node: T) => boolean): T | undefined
  findParent: (match: (node: T) => boolean): T | undefined // TODO: 如何区分根节点和节点不存在？parent 都不存在
  getPathFromRoot: (match: (node: T) => boolean): T[]
}