intable 0.0.6 → 0.0.8

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/packages/intable/src/theme/dark.scss

@@ -0,0 +1,46 @@
+/**
+ * intable — Dark (OLED) Theme
+ * Deep black background, high contrast, WCAG AAA compliant
+ * Best for: developer tools, night mode, coding platforms
+ */
+
+.data-table {
+  --bg: #0d1117;
+  --c-primary: #388bfd;
+
+  --menu-bg: #161b22;
+  --li-hover-bg: rgba(177, 186, 196, 0.12);
+
+  --table-b: 1px solid var(--table-b-c);
+  --table-b-c: #30363d;
+  --table-c: #e6edf3;
+  --table-bg: #0d1117;
+
+  --table-header-c: #8b949e;
+  --table-header-bg: #161b22;
+
+  --table-row-hover-bg: #161b22;
+
+  --select-area-bg: #388bfd1f;
+
+  color-scheme: dark;
+  font-size: 13px;
+
+  th, td {
+    padding: 8px 12px;
+    line-height: 20px;
+  }
+
+  &--small {
+    font-size: 12px;
+
+    th, td {
+      padding: 4px 8px;
+    }
+  }
+
+  thead th {
+    font-weight: 600;
+    letter-spacing: 0.01em;
+  }
+}

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/theme/github.scss

@@ -0,0 +1,80 @@
+/**
+ * intable — GitHub Theme
+ * Matches GitHub's Primer design system — light & dark surfaces
+ * Best for: developer tools, docs sites, code-adjacent UIs
+ */
+
+.data-table {
+  --bg: #ffffff;
+  --c-primary: #0969da;
+
+  --menu-bg: #ffffff;
+  --li-hover-bg: #f3f4f6;
+
+  --table-b: 1px solid var(--table-b-c);
+  --table-b-c: #d0d7de;
+  --table-c: #1f2328;
+  --table-bg: #ffffff;
+
+  --table-header-c: #636c76;
+  --table-header-bg: #f6f8fa;
+
+  --table-row-hover-bg: #f6f8fa;
+
+  --select-area-bg: #0969da1a;
+
+  font-size: 14px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+
+  th, td {
+    padding: 8px 12px;
+    line-height: 1.5;
+  }
+
+  thead th {
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  tbody tr:nth-child(even) td {
+    background-color: #f6f8fa;
+  }
+
+  tbody tr:nth-child(even):hover td {
+    background-color: var(--table-row-hover-bg);
+  }
+
+  &--small {
+    font-size: 12px;
+
+    th, td {
+      padding: 4px 8px;
+    }
+  }
+
+  // Dark (GitHub Dark Default)
+  &.dark, [data-theme="dark"] & {
+    --bg: #0d1117;
+    --c-primary: #388bfd;
+
+    --menu-bg: #161b22;
+    --li-hover-bg: rgba(177, 186, 196, 0.12);
+
+    --table-b-c: #30363d;
+    --table-c: #e6edf3;
+    --table-bg: #0d1117;
+
+    --table-header-c: #8b949e;
+    --table-header-bg: #161b22;
+
+    --table-row-hover-bg: #161b22;
+
+    --select-area-bg: #388bfd1f;
+
+    color-scheme: dark;
+
+    tbody tr:nth-child(even) td {
+      background-color: #161b22;
+    }
+  }
+}

package/packages/intable/src/theme/material.scss

@@ -0,0 +1,73 @@
+/**
+ * intable — Material Design 3 Theme
+ * Google Material You / M3 surface tones and typography
+ * Best for: Android-style web apps, admin panels, data management UIs
+ */
+
+.data-table {
+  --bg: #fffbfe;
+  --c-primary: #6750a4;
+
+  --menu-bg: #ece6f0;
+  --li-hover-bg: rgba(103, 80, 164, 0.08);
+
+  --table-b: 1px solid var(--table-b-c);
+  --table-b-c: #cac4d0;
+  --table-c: #1c1b1f;
+  --table-bg: #fffbfe;
+
+  --table-header-c: #49454f;
+  --table-header-bg: #fffbfe;
+
+  --table-row-hover-bg: rgba(103, 80, 164, 0.08);
+
+  --select-area-bg: rgba(103, 80, 164, 0.12);
+
+  font-size: 14px;
+  font-family: 'Roboto', sans-serif;
+
+  th, td {
+    padding: 10px 16px;
+    line-height: 20px;
+  }
+
+  thead th {
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+  }
+
+  tr:not(:last-child) td {
+    border-bottom: 1px solid var(--table-b-c);
+  }
+
+  &--small {
+    font-size: 12px;
+
+    th, td {
+      padding: 6px 12px;
+    }
+  }
+
+  // Dark variant (M3 dark)
+  &.dark, [data-theme="dark"] & {
+    --bg: #1c1b1f;
+    --c-primary: #d0bcff;
+
+    --menu-bg: #2b2930;
+    --li-hover-bg: rgba(208, 188, 255, 0.08);
+
+    --table-b-c: #49454f;
+    --table-c: #e6e1e5;
+    --table-bg: #1c1b1f;
+
+    --table-header-c: #cac4d0;
+    --table-header-bg: #1c1b1f;
+
+    --table-row-hover-bg: rgba(208, 188, 255, 0.08);
+
+    --select-area-bg: rgba(208, 188, 255, 0.12);
+
+    color-scheme: dark;
+  }
+}

package/packages/intable/src/theme/shadcn.scss

@@ -0,0 +1,66 @@
+/**
+ * intable — Shadcn/Zinc Theme
+ * Neutral zinc/slate tones, clean minimal, matches shadcn/ui palette
+ * Best for: modern SaaS dashboards, admin panels, clean productivity tools
+ */
+
+.data-table {
+  --bg: #ffffff;
+  --c-primary: #18181b;
+
+  --menu-bg: #ffffff;
+  --li-hover-bg: #f4f4f5;
+
+  --table-b: 1px solid var(--table-b-c);
+  --table-b-c: #e4e4e7;
+  --table-c: #09090b;
+  --table-bg: #ffffff;
+
+  --table-header-c: #71717a;
+  --table-header-bg: #ffffff;
+
+  --table-row-hover-bg: #fafafa;
+
+  --select-area-bg: #18181b14;
+
+  font-size: 14px;
+
+  th, td {
+    padding: 10px 12px;
+    line-height: 20px;
+  }
+
+  thead th {
+    font-weight: 500;
+  }
+
+  &--small {
+    font-size: 13px;
+
+    th, td {
+      padding: 6px 10px;
+    }
+  }
+
+  // Dark mode variant
+  &.dark, [data-theme="dark"] & {
+    --bg: #09090b;
+    --c-primary: #fafafa;
+
+    --menu-bg: #09090b;
+    --li-hover-bg: #27272a;
+
+    --table-b-c: #27272a;
+    --table-c: #fafafa;
+    --table-bg: #09090b;
+
+    --table-header-c: #71717a;
+    --table-header-bg: #09090b;
+
+    --table-row-hover-bg: #18181b;
+
+    --select-area-bg: #ffffff14;
+
+    color-scheme: dark;
+  }
+}

package/packages/intable/src/theme/stripe.scss

@@ -0,0 +1,57 @@
+/**
+ * intable — Stripe Theme
+ * Ultra-clean minimal white, tight spacing, strong typographic hierarchy
+ * Best for: fintech, e-commerce, financial dashboards, data-dense UIs
+ */
+
+.data-table {
+  --bg: #ffffff;
+  --c-primary: #635bff;
+
+  --menu-bg: #ffffff;
+  --li-hover-bg: #f6f8fa;
+
+  --table-b: 1px solid var(--table-b-c);
+  --table-b-c: #e3e8ee;
+  --table-c: #0a2540;
+  --table-bg: #ffffff;
+
+  --table-header-c: #425466;
+  --table-header-bg: #f7fafc;
+
+  --table-row-hover-bg: #f7fafc;
+
+  --select-area-bg: #635bff1a;
+
+  font-size: 13.5px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+  th, td {
+    padding: 9px 14px;
+    line-height: 20px;
+  }
+
+  thead th {
+    font-size: 11.5px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--table-header-c);
+  }
+
+  &--small {
+    font-size: 12.5px;
+
+    th, td {
+      padding: 5px 10px;
+    }
+
+    thead th {
+      font-size: 11px;
+    }
+  }
+
+  .row-selection {
+    width: 38px;
+  }
+}

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,36 @@
+{
+  "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

@@ -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