intable 0.0.8 → 0.0.9

package/packages/intable/src/tree.ts

@@ -1,13 +0,0 @@
-export const findParent = (data: any[], cb, childrenField = 'children'): any => {
-  let parent = null
-  const stack = [...data]
-  while (stack.length) {
-    const node = stack.pop()
-    if (cb(node)) return parent
-    if (Array.isArray(node[childrenField])) {
-      stack.push(...node[childrenField])
-      parent = node
-    }
-  }
-  return null
-}

package/packages/intable/src/types/auto-imports.d.ts

@@ -1,13 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// noinspection JSUnusedGlobalSymbols
-// Generated by unplugin-auto-import
-// biome-ignore lint: disable
-export {}
-declare global {
-  const ILucideChevronRight: typeof import('~icons/lucide/chevron-right.jsx')['default']
-  const ILucidePlus: typeof import('~icons/lucide/plus.jsx')['default']
-  const ILucideX: typeof import('~icons/lucide/x.jsx')['default']
-  const IMyLoading: typeof import('~icons/my/loading.jsx')['default']
-}

package/packages/intable/src/utils.ts

@@ -1,122 +0,0 @@
-import { delay, isFunction, isPlainObject, isPromise } from "es-toolkit"
-import { useMemoAsync } from "./hooks"
-
-export * as tree from './tree'
-
-export function file2base64(file: File) {
-  return new Promise<string>((resolve, reject) => {
-    const reader = new FileReader()
-    reader.readAsDataURL(file)
-    reader.onload = () => resolve(reader.result as string)
-  })
-}
-
-export function chooseFile(opts: { accept?: string; multiple?: false }): Promise<File>
-export function chooseFile(opts: { accept?: string; multiple: true }): Promise<File[]>
-
-export function chooseFile(opts?) {
-  return new Promise((resolve, reject) => {
-    const input = document.createElement('input')
-    input.type = 'file'
-    input.accept = opts?.accept
-    input.multiple = opts?.multiple
-    input.onchange = () => {
-      if (input.files && input.files.length > 0) {
-        resolve(input.multiple ? [...input.files] : input.files[0])
-      } else {}
-    }
-    input.oncancel = reject
-    input.click()
-  })
-}
-
-export function chooseImage() {
-  return chooseFile({ accept: 'image/*' })
-}
-
-// export async function html2docx(content: string) {
-//   const { inline, initWasm } = await import('@css-inline/css-inline-wasm')
-//   const wasm = fetch(await import('@css-inline/css-inline-wasm/index_bg.wasm?url').then((e) => e.default))
-//   await initWasm(wasm).catch(() => {})
-
-//   content = inline(content + getStyles())
-//   const blob = await import('html-docx-js-typescript').then((e) => e.asBlob(content))
-//   return blob as Blob
-// }
-
-export async function print(html: string) {
-  const iframe = document.createElement('iframe')
-  const styles = [...document.querySelectorAll('style'), ...document.querySelectorAll('link[rel="stylesheet"]')] as HTMLElement[]
-  iframe.srcdoc = `${styles.map(e => e.outerHTML).join('\n')}\n\n${html}`
-  Object.assign(iframe.style, { position: 'fixed', display: 'none' })
-  document.body.append(iframe)
-  await new Promise(resolve => iframe.contentWindow.addEventListener('load', resolve, { once: true }))
-  await delay(300)
-  iframe.contentWindow.print()
-  iframe.remove()
-}
-
-export function mergeRect(rect1: DOMRect, rect2: DOMRect) {
-  return DOMRect.fromRect({
-    x: Math.min(rect1.x, rect2.x),
-    y: Math.min(rect1.y, rect2.y),
-    width: Math.max(rect1.right, rect2.right) - Math.min(rect1.x, rect2.x),
-    height: Math.max(rect1.bottom, rect2.bottom) - Math.min(rect1.y, rect2.y),
-  })
-}
-
-export function getStyles(el = document as ParentNode) {
-  return [...el.querySelectorAll('style'), ...el.querySelectorAll('link[rel="stylesheet"]')].map(e => e.outerHTML).join('\n')
-}
-
-export const unFn = (fn, ...args) => typeof fn == 'function' ? fn(...args) : fn
-
-export const log = (...args) => (console.log(...args), args[0])
-
-export const toArr = v => Array.isArray(v) ? v : v != null ? [v] : []
-
-export const parseStyle = s => s ? s.split(';').reduce((o, e) => ((([k, v]) => o[k.trim()] = v.trim())(e.split(':')), o), {}) : {}
-
-export function findret<T, R>(arr: readonly T[], cb: (e: T, i: number) => R): R | undefined {
-  for (let i = 0; i < arr.length; i++) {
-    const ret = cb(arr[i], i)
-    if (ret != null) return ret
-  }
-}
-
-export function emptyObject(o) {
-  for (const k of Object.keys(o)) delete o[k]
-  return o
-}
-
-export async function findAsync<T>(arr: T[], cb: (e: T, i: number) => Promise<boolean> | boolean) {
-  for (let i = 0; i < arr.length; i++) {
-    if (await cb(arr[i], i)) return arr[i]
-  }
-}
-
-type Fnable<T> = T | (() => T)
-type Awatable<T> = T | Promise<T>
-type BaseType = string | number | boolean | null
-
-const cache = new WeakMap
-
-export function resolveOptions(opts: Fnable<Awatable<Record<string, any> | ({ label: any; value: any } | BaseType)[]>>): { label: any; value: any }[] {
-  let ret = opts
-  if (isFunction(ret)) ret = ret()
-  if (isPromise(ret)) {
-    if (cache.has(ret)) return cache.get(ret)()
-    cache.set(ret, useMemoAsync(() => ret.then(e => e.map(e => resolveOptions(e)))))
-    return cache.get(ret)()
-  }
-  if (isPlainObject(ret)) ret = Object.entries(ret).map(([k, v]) => ({ value: k, label: v, ...v }))
-  return (ret as any[])?.map(e => resolveOpt(e)) || []
-}
-
-function resolveOpt(opt) {
-  return (
-    isPlainObject(opt) ? opt :
-    Array.isArray(opt) ? { label: opt[0], value: opt[1] } :
-    { label: opt, value: opt }
-  )
-}

package/packages/intable/src/wc.tsx

@@ -1,35 +0,0 @@
-/* @refresh reload */
-import { batch, createEffect, createMemo, createSignal, untrack } from 'solid-js'
-import { customElement, noShadowDOM } from 'solid-element'
-import { createMutable } from 'solid-js/store'
-import { Intable } from './'
-import { useMemoState } from './hooks'
-
-const PROPS = {
-  options: {},
-  css: { value: '', attribute: 'css', notify: true, reflect: false },
-  theme: '',
-  noShadow: true,
-}
-
-export const TableElement = customElement('wc-table', PROPS, (attrs, { element }) => {
-  attrs.noShadow && noShadowDOM()
-
-  const props = useMemoState(() => attrs.options)
-  
-  return (
-    <Intable {...props} />
-  )
-})
-
-function memoAsync(fn) {
-  const ret = createSignal('')
-  let count = 0
-  createEffect(async () => {
-    const _count = ++count
-    let val = fn()
-    if (val instanceof Promise) val = await val
-    if (_count == count) ret[1](val)
-  })
-  return ret[0]
-}

package/packages/intable/src/web-component.ts

@@ -1 +0,0 @@
-export * from './wc'

package/packages/react/package.json

@@ -1,36 +0,0 @@
-{
-  "name": "@intable/react",
-  "version": "0.0.8",
-  "license": "MIT",
-  "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": "./dist/index.js",
-    "./*": {
-      "import": "./dist/*.js",
-      "types": "./dist/*.d.ts"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "dependencies": {
-    "intable": "workspace:^",
-    "solid-js": "^1.9.9"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0 || ^20.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0 || ^20.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "antd": "^5.22.5"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  }
-}

package/packages/react/src/index.ts

@@ -1,44 +0,0 @@
-import { useEffect, useRef, createElement as h, type FC } from 'react'
-import { createRoot } from 'react-dom/client'
-import { flushSync } from 'react-dom'
-import { type TableProps } from 'intable'
-import 'intable/wc'
-import './style.scss'
-
-import { onCleanup } from 'solid-js'
-
-
-export const Intable: FC<TableProps> = (props) => {
-  const ref = useRef<any>(null)
-
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.options = {
-        ...props,
-        renderer: component,
-        plugins: [
-          ...(props.plugins || [])
-        ],
-      } as TableProps
-    }
-  }, [props])
-
-  return h('wc-table', { ref, style: { display: 'contents' } })
-}
-
-
-export const component = <T extends Record<string, any>>(Comp: FC<T>) => {
-  return (props: T) => {
-    // const el = document.createDocumentFragment()
-    const el = document.createElement('div')
-    el.remove ??= () => {}
-
-    const root = createRoot(el)
-    flushSync(() => root.render(h(Comp, props)))
-    onCleanup(() => root.unmount())
-    
-    return el
-  }
-}
-
-export default Intable

package/packages/react/src/plugins/antd.ts

@@ -1,94 +0,0 @@
-import type { Plugin } from 'intable'
-import type { Editor } from 'intable/plugins/EditablePlugin'
-import { resolveOptions } from 'intable/utils'
-
-import { Checkbox, ColorPicker, DatePicker, Input, InputNumber, Rate, Select, Switch, TimePicker } from 'antd'
-import { useEffect, useRef, useState, createElement as h, type FC } from 'react'
-import { createRoot } from 'react-dom/client'
-
-export const AntdPlugin: Plugin = {
-  name: 'antd',
-  store(store) {
-    store.editors.text = editor(Input)
-    store.editors.number = editor(InputNumber)
-    store.editors.rate = editor(Rate)
-    store.editors.switch = editor(Switch)
-    store.editors.checkbox = editor(Checkbox)
-    store.editors.color = selector(ColorPicker, { transform: v => v?.toHexString?.() || v })
-    store.editors.select = selector(Select)
-    store.editors.date = selector(DatePicker)
-    store.editors.time = selector(TimePicker)
-    store.editors.datetime = selector(DatePicker, { showTime: true })
-  },
-  rewriteProps: {
-    class: ({ class: clazz }) => `antd ${clazz}`
-  }
-}
-
-const getEl = (el: any) => {
-  if (!el) return el
-  if (el instanceof Text) el = el.nextElementSibling
-  return el?.querySelector('input') ?? el?.querySelector('button') ?? el?.querySelector('[class*=trigger]') ?? el
-}
-
-const createEditor = (Comp: FC<any>, opts: any, isSelector?: boolean): Editor => (editorOpts) => {
-  const { eventKey, value, col, ok, cancel, props } = editorOpts
-  const container = document.createElement('div')
-  const root = createRoot(container)
-  
-  let currentValue = eventKey || value
-  let elRef: any
-  
-  const EditorComp = () => {
-    const [val, setVal] = useState(currentValue)
-    const ref = useRef<any>(null)
-    
-    useEffect(() => {
-      elRef = ref.current
-      if (isSelector) {
-        setTimeout(() => (getEl(ref.current)?.click?.(), ref.current?.focus?.()), 0)
-      } else {
-        ref.current?.focus?.()
-      }
-    }, [])
-    
-    const handleChange = (newVal: any) => {
-      currentValue = opts.transform ? opts.transform(newVal) : newVal
-      setVal(currentValue)
-      isSelector && setTimeout(ok, 100)
-    }
-    
-    const handleKeyDown = (e: any) => {
-      e.stopPropagation()
-      if (e.key === 'Enter') ok()
-      if (e.key === 'Escape') cancel()
-    }
-    
-    return h(Comp, {
-      ref,
-      value: val,
-      onChange: handleChange,
-      onPointerDown: (e: any) => e.stopPropagation(),
-      onKeyDown: handleKeyDown,
-      ...(col?.enum && { options: resolveOptions(col.enum) }),
-      ...opts,
-      ...props,
-    })
-  }
-  
-  root.render(h(EditorComp))
-  
-  const fragment = document.createDocumentFragment()
-  fragment.appendChild(container)
-  
-  return {
-    el: fragment,
-    getValue: () => currentValue,
-    destroy: () => root.unmount(),
-    focus: () => (isSelector && getEl(elRef)?.click?.(), elRef?.focus?.()),
-    blur: () => elRef?.blur?.(),
-  }
-}
-
-const editor = (Comp: FC<any>, opts = {}) => createEditor(Comp, opts, false)
-const selector = (Comp: FC<any>, opts = {}) => createEditor(Comp, opts, true)

package/packages/react/src/style.scss

@@ -1,12 +0,0 @@
-.antd {
-  .is-editing {
-    & > .area { @apply hidden; }
-  }
-  .in-cell-edit-wrapper {
-    @apply flex items-center p-1;
-
-    > .ant-input-affix-wrapper > .ant-input-prefix {
-      @apply hidden;
-    }
-  }
-}

package/packages/react/src/types/auto-imports.d.ts

@@ -1,10 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// noinspection JSUnusedGlobalSymbols
-// Generated by unplugin-auto-import
-// biome-ignore lint: disable
-export {}
-declare global {
-
-}

package/packages/vue/package.json

@@ -1,34 +0,0 @@
-{
-  "name": "@intable/vue",
-  "version": "0.0.8",
-  "license": "MIT",
-  "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": "./dist/index.js",
-    "./*": {
-      "import": "./dist/*.js",
-      "types": "./dist/*.d.ts"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "dependencies": {
-    "@vue/shared": "^3.5.27",
-    "intable": "workspace:^",
-    "solid-js": "^1.9.9"
-  },
-  "peerDependencies": {
-    "vue": "^3"
-  },
-  "devDependencies": {
-    "element-plus": "^2.13.0"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  }
-}

package/packages/vue/src/index.ts

@@ -1,63 +0,0 @@
-import { onCleanup, createRenderEffect } from 'solid-js'
-import { type Plugin, type TableProps } from 'intable'
-import 'intable/wc'
-import './style.scss'
-
-// import '../../intable/src/wc'
-
-export type { TableProps } from 'intable'
-
-import { h, normalizeClass, toRaw, render, type Component, type FunctionalComponent, type App } from 'vue'
-import { stringifyStyle } from '@vue/shared'
-import { mapValues } from 'es-toolkit'
-
-export const Intable: FunctionalComponent<TableProps> = ((props) => (
-  props = mapValues(props, v => toRaw(v)),
-  h('wc-table', {
-    style: 'display: contents',
-    '.options': {
-      ...props,
-      class: normalizeClass(props.class),
-      style: stringifyStyle(props.style),
-      renderer: component,
-      plugins: [
-        VModelPlugin,
-        ...props.plugins || []
-      ]
-    } as TableProps
-  })
-))
-
-Intable.inheritAttrs = false
-Intable.__name = 'intable'
-Intable.install = app => app.component(Intable.__name, Intable)
-
-const VModelPlugin: Plugin = {
-  name: 'v-model',
-  rewriteProps: {
-    rowSelection: ({ rowSelection }, { store }) => ({
-      get value() { return store.props?.selected },
-      ...rowSelection,
-      onChange(selected) {
-        store.props!['onUpdate:selected']?.(selected)
-        rowSelection?.onChange?.(...arguments)
-      },
-    }),
-    onDataChange: ({ onDataChange }, { store }) => (data) => {
-      store.props!['onUpdate:data']?.(data)
-      onDataChange?.(data)
-    }
-  }
-}
-
-const component = <T extends Record<string, any>>(Comp: Component<T>) => {
-  return (props: T) => {
-    const root = document.createDocumentFragment()
-    root.remove ??= () => {}
-    createRenderEffect(() => render(h(Comp, { ...props }), root))
-    onCleanup(() => render(null, root))
-    return root
-  }
-}
-
-export default Intable

package/packages/vue/src/plugins/element-plus.ts

@@ -1,69 +0,0 @@
-import type { Plugin } from 'intable'
-import type { Editor } from 'intable/plugins/EditablePlugin'
-import { resolveOptions } from 'intable/utils'
-
-import { ElCheckbox, ElColorPicker, ElDatePicker, ElInput, ElInputNumber, ElRate, ElSelect, ElSwitch, ElTimePicker } from 'element-plus'
-import { type Component, h, mergeProps, ref, render } from 'vue'
-
-export const ElementPlusPlugin: Plugin = {
-  store(store) {
-    store.editors.text = createEditor(ElInput)
-    store.editors.number = createEditor(ElInputNumber)
-    store.editors.rate = createEditor(ElRate)
-    store.editors.switch = createEditor(ElSwitch)
-    store.editors.checkbox = createEditor(ElCheckbox)
-    store.editors.color = createEditor(ElColorPicker, {}, true)
-    store.editors.select = createEditor(ElSelect, {}, true)
-    store.editors.date = createEditor(ElDatePicker, { valueFormat: 'YYYY-MM-DD' }, true)
-    store.editors.time = createEditor(ElTimePicker, {}, true)
-    store.editors.datetime = createEditor(ElDatePicker, { type: 'datetime', valueFormat: 'YYYY-MM-DD HH:mm:ss' }, true)
-  },
-  rewriteProps: {
-    class: ({ class: clazz }) => `element-plus ${clazz}`
-  }
-}
-
-const getElement = (el: any) => {
-  if (!el) return el
-  if (el instanceof Text) el = el.nextElementSibling
-  return el.querySelector('input') ?? el.querySelector('button') ?? el.querySelector('[class*=__trigger]') ?? el
-}
-
-const createEditor = (Comp: Component, extra?, isSelector?): Editor => {
-  return ({ eventKey, value, col, ok, cancel, props }) => {
-    const v = ref(isSelector ? value : (eventKey || value))
-    const elref = ref()
-    const root = document.createDocumentFragment()
-    root.remove ??= () => {}
-    
-    const App = () => h(Comp, mergeProps(extra, props, {
-      ref: elref,
-      modelValue: v.value,
-      'onUpdate:modelValue': (val) => v.value = val,
-      onPointerdown: (e: Event) => e.stopPropagation(),
-      onMousedown: (e: Event) => e.stopPropagation(),
-      onKeydown: (e: KeyboardEvent) => {
-        e.stopPropagation()
-        if (e.key === 'Enter') ok()
-        if (e.key === 'Escape') cancel()
-      },
-      ...isSelector ? {
-        onChange: () => ok(),
-        options: resolveOptions(col.enum ?? []),
-      } : {}
-    }))
-
-    render(h(App), root)
-    
-    return {
-      el: root,
-      getValue: () => v.value,
-      destroy: () => render(null, root),
-      focus: () => {
-        if (isSelector) getElement(elref.value?.$el)?.click()
-        elref.value?.focus?.()
-      },
-      blur: () => elref.value?.blur?.(),
-    }
-  }
-}

package/packages/vue/src/style.scss

@@ -1,12 +0,0 @@
-.element-plus {
-  .is-editing {
-    & > .area { @apply hidden; }
-  }
-  .in-cell-edit-wrapper {
-    @apply flex items-center  p-1;
-
-    > .el-input > .el-input__wrapper > .el-input__prefix {
-      @apply hidden;
-    }
-  }
-}

package/packages/vue/src/types/auto-imports.d.ts

@@ -1,10 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// noinspection JSUnusedGlobalSymbols
-// Generated by unplugin-auto-import
-// biome-ignore lint: disable
-export {}
-declare global {
-
-}

package/pnpm-workspace.yaml

@@ -1,2 +0,0 @@
-packages:
-  - 'packages/*'

package/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>