intable 0.0.6 → 0.0.7

package/{dist → packages/intable/src}/theme/antd.scss

@@ -9,17 +9,25 @@
 
   --table-row-hover-bg: var(--ant-table-row-hover-bg, #fafafa);
 
-  @apply text-[14px];
+  font-size: 14px;
   
   &:not(&--border) thead th {
-    @apply relative;
+    position: relative;
     &:not(:last-child)::before {
-      @apply content-[''] absolute top-1/2 right-0 h-[1.6em] w-[1px] bg-[--table-b-c] translate-y-[-50%];
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: 0;
+      height: 1.6em;
+      width: 1px;
+      background-color: var(--table-b-c);
+      transform: translateY(-50%);
     }
   }
 
   th, td {
-    @apply px-2 py-3 lh-[22px];
+    padding: 12px 8px;
+    line-height: 22px;
   }
 
   .row-selection {
@@ -28,7 +36,8 @@
 
   &--small {
     th, td {
-      @apply px-2;
+      padding-left: 8px;
+      padding-right: 8px;
     }
   }
 }

package/{dist → packages/intable/src}/theme/element-plus.scss

@@ -14,14 +14,15 @@
   
   --table-row-hover-bg: var(--el-table-row-hover-bg-color, #f5f7fa);
 
-  @apply lh-[23px] text-[14px];
+  line-height: 23px;
+  font-size: 14px;
   
   thead th {
-    @apply font-600;
+    font-weight: 600;
   }
 
   th, td {
-    @apply px-3 py-2;
+    padding: 8px 12px;
   }
 
   .row-selection {
@@ -29,10 +30,10 @@
   }
 
   &--small {
-    @apply text-3;
+    font-size: 12px;
 
     th, td {
-      @apply px-2 py-1;
+      padding: 4px 8px;
     }
   }
 }

package/packages/intable/src/tree.ts

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

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

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

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

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

package/packages/react/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@intable/react",
+  "version": "0.0.7",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.scss": "./dist/style.scss"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "intable": "workspace:^",
+    "solid-js": "^1.9.9"
+  },
+  "peerDependencies": {
+    "react": "^18 | ^19 | ^20",
+    "react-dom": "^18 | ^19 | ^20"
+  },
+  "devDependencies": {
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "antd": "^5.22.5"
+  }
+}

package/packages/react/src/index.ts

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

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

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

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

@@ -0,0 +1,34 @@
+{
+  "name": "@intable/vue",
+  "version": "0.0.7",
+  "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

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

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

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

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

package/pnpm-workspace.yaml

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

package/public/vite.svg

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