intable 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +118 -8
- package/dist/__uno.css +1 -0
- package/dist/components/Menu.js +1 -1
- package/dist/components/Render.d.ts +1 -1
- package/dist/components/Tree.d.ts +4 -4
- package/dist/hooks/index.d.ts +2 -2
- package/dist/hooks/index.js +2 -2
- package/dist/index.d.ts +6 -5
- package/dist/index.js +12 -6
- package/dist/plugins/DiffPlugin.js +1 -1
- package/dist/plugins/EditablePlugin.d.ts +0 -1
- package/dist/plugins/EditablePlugin.js +2 -2
- package/dist/plugins/HistoryPlugin.d.ts +1 -1
- package/dist/plugins/MenuPlugin.js +1 -1
- package/dist/plugins/ResizePlugin.d.ts +1 -1
- package/dist/plugins/ResizePlugin.js +2 -2
- package/dist/plugins/RowSelectionPlugin.d.ts +1 -1
- package/dist/plugins/VirtualScrollPlugin.d.ts +1 -1
- package/dist/{intable.css → style.css} +29 -121
- package/dist/theme/antd.scss +34 -0
- package/dist/theme/element-plus.scss +33 -0
- package/dist/wc.js +2 -2
- package/package.json +5 -27
- package/LICENSE +0 -21
- package/dist/demo.d.ts +0 -2
- package/dist/demo.js +0 -64
- package/dist/vite.svg +0 -1
package/README.md
CHANGED
|
@@ -7,16 +7,126 @@
|
|
|
7
7
|
- 单元格编辑、数据校验
|
|
8
8
|
- 列宽、行高可拖动
|
|
9
9
|
- 虚拟滚动
|
|
10
|
-
- 历史回滚
|
|
11
|
-
<!-- - 合并单元格 -->
|
|
12
|
-
<!-- - 表头分组 -->
|
|
13
10
|
- 数据分组
|
|
14
11
|
- 行展开
|
|
15
|
-
<!-- - tree -->
|
|
16
|
-
<!-- - 过滤、排序 -->
|
|
17
|
-
- Diff 数据对比
|
|
18
|
-
<!-- - 导出 Excel -->
|
|
19
12
|
- 插件易扩展
|
|
20
13
|
- 多框架支持（Vue、React）
|
|
14
|
+
- 多 UI库支持（Antd、ElementPlus）
|
|
21
15
|
|
|
22
|
-
## 快速开始
|
|
16
|
+
## 快速开始
|
|
17
|
+
|
|
18
|
+
<details>
|
|
19
|
+
<summary>solid-js</summary>
|
|
20
|
+
|
|
21
|
+
**安装**
|
|
22
|
+
|
|
23
|
+
```sh
|
|
24
|
+
pnpm add intable
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
**使用**
|
|
28
|
+
|
|
29
|
+
```jsx
|
|
30
|
+
import { render } from 'solid-js/web'
|
|
31
|
+
import Intable from 'intable'
|
|
32
|
+
|
|
33
|
+
const App = () => {
|
|
34
|
+
const columns = [
|
|
35
|
+
{ id: 'name', name: '名称' },
|
|
36
|
+
{ id: 'date', name: '日期' },
|
|
37
|
+
{ id: 'address', name: '地址' },
|
|
38
|
+
]
|
|
39
|
+
|
|
40
|
+
const data = [
|
|
41
|
+
{ date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
|
|
42
|
+
{ date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
|
|
43
|
+
{ date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
|
|
44
|
+
{ date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
|
|
45
|
+
]
|
|
46
|
+
|
|
47
|
+
return <Intable data={data} columns={columns} />
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
render(() => <App />)
|
|
51
|
+
```
|
|
52
|
+
</details>
|
|
53
|
+
|
|
54
|
+
<details>
|
|
55
|
+
<summary>vue</summary>
|
|
56
|
+
|
|
57
|
+
**安装**
|
|
58
|
+
|
|
59
|
+
```sh
|
|
60
|
+
pnpm add @intable/react
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
**使用**
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<template>
|
|
67
|
+
<Intable data={data} columns={columns} />
|
|
68
|
+
</template>
|
|
69
|
+
|
|
70
|
+
<script setup>
|
|
71
|
+
import Intable from '@intable/vue'
|
|
72
|
+
|
|
73
|
+
const columns = [
|
|
74
|
+
{ id: 'name', name: '名称' },
|
|
75
|
+
{ id: 'date', name: '日期' },
|
|
76
|
+
{ id: 'address', name: '地址' },
|
|
77
|
+
]
|
|
78
|
+
|
|
79
|
+
const data = [
|
|
80
|
+
{ date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
|
|
81
|
+
{ date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
|
|
82
|
+
{ date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
|
|
83
|
+
{ date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
|
|
84
|
+
]
|
|
85
|
+
</script>
|
|
86
|
+
```
|
|
87
|
+
</details>
|
|
88
|
+
|
|
89
|
+
<details>
|
|
90
|
+
<summary>react</summary>
|
|
91
|
+
|
|
92
|
+
**安装**
|
|
93
|
+
|
|
94
|
+
```sh
|
|
95
|
+
pnpm add @intable/react
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
**使用**
|
|
99
|
+
|
|
100
|
+
```jsx
|
|
101
|
+
import Intable from 'intable'
|
|
102
|
+
|
|
103
|
+
const App = () => {
|
|
104
|
+
const columns = [
|
|
105
|
+
{ id: 'name', name: '名称' },
|
|
106
|
+
{ id: 'date', name: '日期' },
|
|
107
|
+
{ id: 'address', name: '地址' },
|
|
108
|
+
]
|
|
109
|
+
|
|
110
|
+
const data = [
|
|
111
|
+
{ date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
|
|
112
|
+
{ date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
|
|
113
|
+
{ date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
|
|
114
|
+
{ date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
|
|
115
|
+
]
|
|
116
|
+
|
|
117
|
+
return <Intable data={data} columns={columns} />
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
</details>
|
|
121
|
+
|
|
122
|
+
## Props
|
|
123
|
+
|
|
124
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
125
|
+
| ------------ | ------------ | ------------------------------- | ------ |
|
|
126
|
+
| data | 数据 | any[] | |
|
|
127
|
+
| columns | 展示列 | Column[] | |
|
|
128
|
+
| index | 显示序号 | bool | false |
|
|
129
|
+
| border | 显示纵向边框 | bool | false |
|
|
130
|
+
| stickyHeader | 表头吸顶 | bool | false |
|
|
131
|
+
| size | 尺寸 | 'large' \| 'default' \| 'small' | false |
|
|
132
|
+
| rowSelection | 启用行选择 | [@see]() | false |
|
package/dist/__uno.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*, ::before, ::after, ::backdrop{--un-bg-opacity:100%;--un-content:"";--un-translate-x:initial;--un-translate-y:initial;--un-translate-z:initial;--un-text-opacity:100%;--un-border-opacity:100%;--un-space-y-reverse:initial;--un-space-x-reverse:initial;--un-outline-style:solid;--un-outline-opacity:100%;--un-leading:initial;}}@property --un-leading{syntax:"*";inherits:false;}@property --un-outline-style{syntax:"*";inherits:false;initial-value:solid;}@property --un-outline-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}:root, :host {--spacing: 0.25rem;--colors-gray-DEFAULT: oklch(70.7% 0.022 261.325);--text-sm-fontSize: 0.875rem;--text-sm-lineHeight: 1.25rem;--radius-sm: 0.25rem;--colors-blue-DEFAULT: oklch(70.7% 0.165 254.624);--font-sans: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--default-font-family: var(--font-sans);--default-monoFont-family: var(--font-mono);}/* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Remove default margins and padding 3. Reset all borders.*/*,::after,::before,::backdrop,::file-selector-button { box-sizing: border-box; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 2 */ border: 0 solid; /* 3 */}/* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS.*/html,:host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ tab-size: 4; /* 3 */ font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' ); /* 4 */ font-feature-settings: var(--default-font-featureSettings, normal); /* 5 */ font-variation-settings: var(--default-font-variationSettings, normal); /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */}/* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Reset the default border style to a 1px solid border.*/hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */}/* Add the correct text decoration in Chrome, Edge, and Safari.*/abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted;}/* Remove the default font size and weight for headings.*/h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit;}/* Reset links to optimize for opt-in styling instead of opt-out.*/a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit;}/* Add the correct font weight in Edge and Safari.*/b,strong { font-weight: bolder;}/* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers.*/code,kbd,samp,pre { font-family: var( --default-monoFont-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace ); /* 1 */ font-feature-settings: var(--default-monoFont-featureSettings, normal); /* 2 */ font-variation-settings: var(--default-monoFont-variationSettings, normal); /* 3 */ font-size: 1em; /* 4 */}/* Add the correct font size in all browsers.*/small { font-size: 80%;}/* Prevent `sub` and `sup` elements from affecting the line height in all browsers.*/sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sub { bottom: -0.25em;}sup { top: -0.5em;}/* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default.*/table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */}/* Use the modern Firefox focus style for all focusable elements.*/:-moz-focusring { outline: auto;}/* Add the correct vertical alignment in Chrome and Firefox.*/progress { vertical-align: baseline;}/* Add the correct display in Chrome and Safari.*/summary { display: list-item;}/* Make lists unstyled by default.*/ol,ul,menu { list-style: none;}/* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design.*/img,svg,video,canvas,audio,iframe,embed,object { display: block; /* 1 */ vertical-align: middle; /* 2 */}/* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)*/img,video { max-width: 100%; height: auto;}/* 1. Inherit font styles in all browsers. 2. Remove border radius in all browsers. 3. Remove background color in all browsers. 4. Ensure consistent opacity for disabled states in all browsers.*/button,input,select,optgroup,textarea,::file-selector-button { font: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ border-radius: 0; /* 2 */ background-color: transparent; /* 3 */ opacity: 1; /* 4 */}/* Restore default font weight.*/:where(select:is([multiple], [size])) optgroup { font-weight: bolder;}/* Restore indentation.*/:where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px;}/* Restore space after button.*/::file-selector-button { margin-inline-end: 4px;}/* Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)*/::placeholder { opacity: 1;}/* Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)*/@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or (contain-intrinsic-size: 1px) /* Safari 17+ */ { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); }}/* Prevent resizing textareas horizontally by default.*/textarea { resize: vertical;}/* Remove the inner padding in Chrome and Safari on macOS.*/::-webkit-search-decoration { -webkit-appearance: none;}/* 1. Ensure date/time inputs have the same height when empty in iOS Safari. 2. Ensure text alignment can be changed on date/time inputs in iOS Safari.*/::-webkit-date-and-time-value { min-height: 1lh; /* 1 */ text-align: inherit; /* 2 */}/* Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.*/::-webkit-datetime-edit { display: inline-flex;}/* Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.*/::-webkit-datetime-edit-fields-wrapper { padding: 0;}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field { padding-block: 0;}/* Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)*/::-webkit-calendar-picker-indicator { line-height: 1;}/* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)*/:-moz-ui-invalid { box-shadow: none;}/* Correct the inability to style the border radius in iOS Safari.*/button,input:where([type='button'], [type='reset'], [type='submit']),::file-selector-button { appearance: button;}/* Correct the cursor style of increment and decrement buttons in Safari.*/::-webkit-inner-spin-button,::-webkit-outer-spin-button { height: auto;}/* Make elements with the HTML hidden attribute stay hidden by default.*/[hidden]:where(:not([hidden~='until-found'])) { display: none !important;}.container{width:100%;}.aic{align-items:center;}@media (min-width: 40rem){.container{max-width:40rem;}}@media (min-width: 48rem){.container{max-width:48rem;}}@media (min-width: 64rem){.container{max-width:64rem;}}@media (min-width: 80rem){.container{max-width:80rem;}}@media (min-width: 96rem){.container{max-width:96rem;}}.text-3\.5{font-size:0.875rem;}.lh-\[1\]{--un-leading:1;line-height:1;}.m9{margin:calc(var(--spacing) * 9);}.mx-1{margin-inline:calc(var(--spacing) * 1);}.mx-3\!{margin-inline:calc(var(--spacing) * 3) !important;}.my-1{margin-block:calc(var(--spacing) * 1);}.ml{margin-left:calc(var(--spacing) * 4);}.ml-\.5{margin-left:calc(var(--spacing) * 0.5);}.ml-1{margin-left:calc(var(--spacing) * 1);}.mr--1{margin-right:calc(var(--spacing) * -1);}.mr-1{margin-right:calc(var(--spacing) * 1);}.mr-2{margin-right:calc(var(--spacing) * 2);}.mr-2\.5{margin-right:calc(var(--spacing) * 2.5);}.p-1{padding:calc(var(--spacing) * 1);}.px,.px-4{padding-inline:calc(var(--spacing) * 4);}.px-2{padding-inline:calc(var(--spacing) * 2);}.py-1{padding-block:calc(var(--spacing) * 1);}.py-2{padding-block:calc(var(--spacing) * 2);}.pl-1{padding-left:calc(var(--spacing) * 1);}.pr-4{padding-right:calc(var(--spacing) * 4);}.ps{padding-inline-start:calc(var(--spacing) * 4);}.outline-0{outline-style:var(--un-outline-style);outline-width:0px;}.outline-2{outline-style:var(--un-outline-style);outline-width:2px;}.outline-blue{outline-color:color-mix(in srgb, var(--colors-blue-DEFAULT) var(--un-outline-opacity), transparent) /* oklch(70.7% 0.165 254.624) */;}.b{border-width:1px;}.rd-2{border-radius:0.5rem;}.rd-sm{border-radius:var(--radius-sm);}.bg-\#dafaea{background-color:color-mix(in oklab, #dafaea var(--un-bg-opacity), transparent) /* #dafaea */;}.bg-\#ffe8e8{background-color:color-mix(in oklab, #ffe8e8 var(--un-bg-opacity), transparent) /* #ffe8e8 */;}.bg-\#fff{background-color:color-mix(in oklab, #fff var(--un-bg-opacity), transparent) /* #fff */;}.bg-gray\/20{background-color:color-mix(in srgb, var(--colors-gray-DEFAULT) 20%, transparent) /* oklch(70.7% 0.022 261.325) */;}.op-75{opacity:75%;}.op40{opacity:40%;}.flex{display:flex;}.flex-shrink-0{flex-shrink:0;}.flex-row{flex-direction:row;}.flex-wrap{flex-wrap:wrap;}.gap-2{gap:calc(var(--spacing) * 2);}.size-4\!{width:calc(var(--spacing) * 4) !important;height:calc(var(--spacing) * 4) !important;}.size-full{width:100%;height:100%;}.h-a\!{height:auto !important;}.h-full{height:100%;}.max-h-100{max-height:calc(var(--spacing) * 100);}.min-h-40{min-height:calc(var(--spacing) * 40);}.min-h-a\!{min-height:auto !important;}.after\:h-1::after{height:calc(var(--spacing) * 1);}.after\:w-1::after{width:calc(var(--spacing) * 1);}.block{display:block;}.cursor-s-resize{cursor:s-resize;}.cursor-w-resize{cursor:w-resize;}.resize-none{resize:none;}.transform{transform:var(--un-rotate-x) var(--un-rotate-y) var(--un-rotate-z) var(--un-skew-x) var(--un-skew-y);}.items-center{align-items:center;}.box-border{box-sizing:border-box;}.justify-center{justify-content:center;}.absolute{position:absolute;}.fixed{position:fixed;}.relative{position:relative;}.z-1{z-index:1;}.z-9{z-index:9;}.overflow-auto{overflow:auto;}.table{display:table;}@supports (color: color-mix(in lab, red, red)){.outline-blue{outline-color:color-mix(in oklab, var(--colors-blue-DEFAULT) var(--un-outline-opacity), transparent) /* oklch(70.7% 0.165 254.624) */;}.bg-gray\/20{background-color:color-mix(in oklab, var(--colors-gray-DEFAULT) 20%, transparent) /* oklch(70.7% 0.022 261.325) */;}}
|
package/dist/components/Menu.js
CHANGED
|
@@ -7,8 +7,8 @@ import loading_default from "../loading.js";
|
|
|
7
7
|
import { className, createComponent, effect, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
|
|
8
8
|
import { children, createContext, createEffect, createMemo, createSignal, onMount, splitProps, useContext } from "solid-js";
|
|
9
9
|
import { createMutable } from "solid-js/store";
|
|
10
|
-
import { delay } from "es-toolkit";
|
|
11
10
|
import { combineProps } from "@solid-primitives/props";
|
|
11
|
+
import { delay } from "es-toolkit";
|
|
12
12
|
import { pointerHover } from "@solid-primitives/pointer";
|
|
13
13
|
import { isEmpty } from "es-toolkit/compat";
|
|
14
14
|
import { autoUpdate, createFloating, offset } from "floating-ui-solid";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export declare function createRender({ is, processProps }?: {
|
|
2
|
-
processProps?: (
|
|
2
|
+
processProps?: (e: any) => any;
|
|
3
3
|
}): (props: any) => import("solid-js").JSX.Element;
|
|
4
4
|
export declare const Render: (props: any) => import("solid-js").JSX.Element;
|
|
@@ -4,17 +4,17 @@ export declare abstract class $Node {
|
|
|
4
4
|
get label(): any;
|
|
5
5
|
abstract getChildren(): $Node[] | undefined;
|
|
6
6
|
children: $Node[] | undefined;
|
|
7
|
-
$children: import("solid-js").Accessor<$Node[]
|
|
7
|
+
$children: import("solid-js").Accessor<$Node[]>;
|
|
8
8
|
parent: $Node | undefined;
|
|
9
9
|
$parent: import("solid-js").Signal<unknown>;
|
|
10
10
|
deep: number;
|
|
11
11
|
$deep: import("solid-js").Accessor<number>;
|
|
12
12
|
index: number;
|
|
13
|
-
$index: import("solid-js").Accessor<number
|
|
13
|
+
$index: import("solid-js").Accessor<number>;
|
|
14
14
|
prev: $Node | undefined;
|
|
15
|
-
$prev: import("solid-js").Accessor<$Node
|
|
15
|
+
$prev: import("solid-js").Accessor<$Node>;
|
|
16
16
|
next: $Node | undefined;
|
|
17
|
-
$next: import("solid-js").Accessor<$Node
|
|
17
|
+
$next: import("solid-js").Accessor<$Node>;
|
|
18
18
|
root: $Node;
|
|
19
19
|
$root: any;
|
|
20
20
|
path: $Node[];
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -13,8 +13,8 @@ type EndCb = (e: PointerEvent) => void;
|
|
|
13
13
|
export declare function usePointerDrag(el: MaybeAccessor<HTMLElement | undefined>, options: UseDragOptions): void;
|
|
14
14
|
export declare function model(el: any, value: () => [() => string, (v: string) => any]): void;
|
|
15
15
|
export declare function toSignle<T extends Record<string, any>>(state: T, k: keyof T): ((v: any) => any)[];
|
|
16
|
-
export declare function useDark(): [get: import("solid-js").Accessor<boolean>, set: import("solid-js").Setter<boolean>, init: string | Promise<string>
|
|
17
|
-
export declare function useMemoAsync<T>(fn: (prev?: T) => Promise<T> | T, init?: Awaited<T>): import("solid-js").Accessor<Awaited<T
|
|
16
|
+
export declare function useDark(): [get: import("solid-js").Accessor<boolean>, set: import("solid-js").Setter<boolean>, init: string | Promise<string>];
|
|
17
|
+
export declare function useMemoAsync<T>(fn: (prev?: T) => Promise<T> | T, init?: Awaited<T>): import("solid-js").Accessor<Awaited<T>>;
|
|
18
18
|
export declare function useSignle2<T>(v: T | (() => T), opt?: {
|
|
19
19
|
before?: (v: T) => Promise<T | void> | T;
|
|
20
20
|
}): Signal<T>;
|
package/dist/hooks/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { unFn } from "../utils.js";
|
|
2
|
-
import { $PROXY, createComputed, createEffect, createMemo, createRenderEffect, createRoot, createSignal, on, onCleanup } from "solid-js";
|
|
2
|
+
import { $PROXY, createComputed, createEffect, createMemo, createRenderEffect, createRoot, createSignal, on, onCleanup, untrack } from "solid-js";
|
|
3
3
|
import { $RAW, createMutable } from "solid-js/store";
|
|
4
4
|
import { isFunction, isPromise, mapValues } from "es-toolkit";
|
|
5
5
|
import { createEventListener } from "@solid-primitives/event-listener";
|
|
@@ -71,7 +71,7 @@ function useMemoAsync(fn, init) {
|
|
|
71
71
|
const REJECT = Symbol();
|
|
72
72
|
const [val, setVal] = createSignal(init);
|
|
73
73
|
createComputed(async () => {
|
|
74
|
-
const ret = fn(val
|
|
74
|
+
const ret = fn(untrack(val));
|
|
75
75
|
const v = ret instanceof Promise ? await new Promise((resolve) => {
|
|
76
76
|
ret.then(resolve);
|
|
77
77
|
onCleanup(() => resolve(REJECT));
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { For, type JSX, type Component } from 'solid-js';
|
|
2
|
-
import '
|
|
2
|
+
import 'virtual:uno.css';
|
|
3
|
+
import './style.scss';
|
|
3
4
|
import './plugins/CellSelectionPlugin';
|
|
4
5
|
import './plugins/CopyPastePlugin';
|
|
5
6
|
import './plugins/EditablePlugin';
|
|
@@ -60,12 +61,12 @@ export interface TableProps {
|
|
|
60
61
|
plugins?: Plugin[];
|
|
61
62
|
onDataChange?: (data: any[]) => void;
|
|
62
63
|
}
|
|
63
|
-
type THProps = {
|
|
64
|
+
export type THProps = {
|
|
64
65
|
x: number;
|
|
65
66
|
col: TableColumn;
|
|
66
67
|
children: JSX.Element;
|
|
67
68
|
};
|
|
68
|
-
type TDProps = {
|
|
69
|
+
export type TDProps = {
|
|
69
70
|
x: number;
|
|
70
71
|
y: number;
|
|
71
72
|
data: any;
|
|
@@ -110,7 +111,7 @@ export interface TableStore extends Obj {
|
|
|
110
111
|
rawProps: TableProps;
|
|
111
112
|
plugins: Plugin[];
|
|
112
113
|
}
|
|
113
|
-
export declare const
|
|
114
|
+
export declare const Intable: (props: TableProps) => JSX.Element;
|
|
115
|
+
export default Intable;
|
|
114
116
|
export declare const ScrollPlugin: Plugin;
|
|
115
117
|
export declare const defaultsPlugins: Plugin[];
|
|
116
|
-
export {};
|
package/dist/index.js
CHANGED
|
@@ -1,23 +1,26 @@
|
|
|
1
1
|
import { unFn } from "./utils.js";
|
|
2
2
|
import { toReactive, useMemo } from "./hooks/index.js";
|
|
3
|
-
|
|
3
|
+
import './style.css';;/* empty css */
|
|
4
|
+
/* empty css */
|
|
4
5
|
import { CellSelectionPlugin } from "./plugins/CellSelectionPlugin.js";
|
|
5
6
|
import { ClipboardPlugin } from "./plugins/CopyPastePlugin.js";
|
|
6
7
|
import { EditablePlugin } from "./plugins/EditablePlugin.js";
|
|
7
8
|
import { solidComponent } from "./components/utils.js";
|
|
8
9
|
import { RenderPlugin } from "./plugins/RenderPlugin/index.js";
|
|
10
|
+
import { MenuPlugin } from "./plugins/MenuPlugin.js";
|
|
9
11
|
import { CommandPlugin } from "./plugins/CommandPlugin.js";
|
|
10
12
|
import { RowSelectionPlugin } from "./plugins/RowSelectionPlugin.js";
|
|
13
|
+
import { ResizePlugin } from "./plugins/ResizePlugin.js";
|
|
11
14
|
import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
|
|
12
15
|
import { For, createComputed, createContext, createEffect, createMemo, createSignal, getOwner, mapArray, mergeProps as mergeProps$1, on, onCleanup, runWithOwner, useContext } from "solid-js";
|
|
13
16
|
import { createMutable, reconcile } from "solid-js/store";
|
|
14
|
-
import { difference, mapValues, sumBy } from "es-toolkit";
|
|
15
17
|
import { combineProps } from "@solid-primitives/props";
|
|
18
|
+
import { difference, mapValues, sumBy } from "es-toolkit";
|
|
16
19
|
import { createElementSize } from "@solid-primitives/resize-observer";
|
|
17
20
|
import { createScrollPosition } from "@solid-primitives/scroll";
|
|
18
21
|
var _tmpl$ = /* @__PURE__ */ template(`<table>`), _tmpl$2 = /* @__PURE__ */ template(`<thead>`), _tmpl$3 = /* @__PURE__ */ template(`<tbody>`), _tmpl$4 = /* @__PURE__ */ template(`<tr>`), _tmpl$5 = /* @__PURE__ */ template(`<th>`), _tmpl$6 = /* @__PURE__ */ template(`<td>`), _tmpl$7 = /* @__PURE__ */ template(`<div><div class=data-table__layers></div><table class=data-table--table>`);
|
|
19
22
|
const Ctx = createContext({ props: {} });
|
|
20
|
-
const
|
|
23
|
+
const Intable = (props) => {
|
|
21
24
|
props = mergeProps$1({ rowKey: "id" }, props);
|
|
22
25
|
const plugins = createMemo(() => [
|
|
23
26
|
...defaultsPlugins,
|
|
@@ -117,6 +120,7 @@ var TBody = () => {
|
|
|
117
120
|
});
|
|
118
121
|
} });
|
|
119
122
|
};
|
|
123
|
+
var src_default = Intable;
|
|
120
124
|
function BasePlugin() {
|
|
121
125
|
const omits = {
|
|
122
126
|
col: null,
|
|
@@ -165,7 +169,7 @@ function BasePlugin() {
|
|
|
165
169
|
data: ({ data = [] }) => data,
|
|
166
170
|
columns: ({ columns = [] }) => columns,
|
|
167
171
|
newRow: ({ newRow = () => ({}) }) => newRow,
|
|
168
|
-
Table: ({ Table
|
|
172
|
+
Table: ({ Table = table }, { store }) => (o) => {
|
|
169
173
|
const [el, setEl] = createSignal();
|
|
170
174
|
const { props } = useContext(Ctx);
|
|
171
175
|
o = combineProps({
|
|
@@ -177,7 +181,7 @@ function BasePlugin() {
|
|
|
177
181
|
return props.style;
|
|
178
182
|
}
|
|
179
183
|
}, o);
|
|
180
|
-
return createComponent(Table
|
|
184
|
+
return createComponent(Table, o);
|
|
181
185
|
},
|
|
182
186
|
Thead: ({ Thead = thead }, { store }) => (o) => {
|
|
183
187
|
o = combineProps({ ref: (el) => store.thead = el }, o);
|
|
@@ -336,13 +340,15 @@ const defaultsPlugins = [
|
|
|
336
340
|
ScrollPlugin,
|
|
337
341
|
BasePlugin(),
|
|
338
342
|
CommandPlugin,
|
|
343
|
+
MenuPlugin,
|
|
339
344
|
CellSelectionPlugin,
|
|
340
345
|
RowSelectionPlugin,
|
|
341
346
|
IndexPlugin,
|
|
342
347
|
StickyHeaderPlugin,
|
|
343
348
|
FixedColumnPlugin,
|
|
349
|
+
ResizePlugin,
|
|
344
350
|
ClipboardPlugin,
|
|
345
351
|
EditablePlugin,
|
|
346
352
|
FitColWidthPlugin
|
|
347
353
|
];
|
|
348
|
-
export { Ctx, ScrollPlugin,
|
|
354
|
+
export { Ctx, Intable, ScrollPlugin, src_default as default, defaultsPlugins };
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { useTinykeys } from "../hooks/index.js";
|
|
2
2
|
import { createComponent } from "solid-js/web";
|
|
3
3
|
import { unwrap } from "solid-js/store";
|
|
4
|
-
import { isEqual, keyBy } from "es-toolkit";
|
|
5
4
|
import { combineProps } from "@solid-primitives/props";
|
|
5
|
+
import { isEqual, keyBy } from "es-toolkit";
|
|
6
6
|
import { createLazyMemo } from "@solid-primitives/memo";
|
|
7
7
|
import { v4 } from "uuid";
|
|
8
8
|
import { diffArrays } from "diff";
|
|
@@ -4,8 +4,8 @@ import { Ctx } from "../index.js";
|
|
|
4
4
|
import { createComponent, delegateEvents, effect, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
|
|
5
5
|
import { createComputed, createEffect, createMemo, createRoot, createSignal, on, onCleanup, useContext } from "solid-js";
|
|
6
6
|
import { createMutable } from "solid-js/store";
|
|
7
|
-
import { delay } from "es-toolkit";
|
|
8
7
|
import { combineProps } from "@solid-primitives/props";
|
|
8
|
+
import { delay } from "es-toolkit";
|
|
9
9
|
import { createAsyncMemo } from "@solid-primitives/memo";
|
|
10
10
|
var _tmpl$ = /* @__PURE__ */ template(`<input style=position:absolute;margin-top:1em;width:0;height:0;pointer-events:none;opacity:0>`), _tmpl$2 = /* @__PURE__ */ template(`<div class=in-cell-edit-wrapper>`), _tmpl$3 = /* @__PURE__ */ template(`<input>`), _tmpl$4 = /* @__PURE__ */ template(`<select>`), _tmpl$5 = /* @__PURE__ */ template(`<option>`), _tmpl$6 = /* @__PURE__ */ template(`<label class="h-full flex items-center">`);
|
|
11
11
|
const EditablePlugin = {
|
|
@@ -17,7 +17,7 @@ const EditablePlugin = {
|
|
|
17
17
|
const [editing, setEditing] = createSignal(false);
|
|
18
18
|
let eventKey = "";
|
|
19
19
|
const selected = createMemo(() => (([x, y]) => o.x == x && o.y == y)(store.selected.start || []));
|
|
20
|
-
const preEdit = createMemo(() => selected() && editable() && !editing()
|
|
20
|
+
const preEdit = createMemo(() => selected() && editable() && !editing());
|
|
21
21
|
const editorState = createAsyncMemo(async () => {
|
|
22
22
|
if (editing()) {
|
|
23
23
|
let canceled = false;
|
|
@@ -3,8 +3,8 @@ import { useMemoAsync } from "../hooks/index.js";
|
|
|
3
3
|
import { Menu } from "../components/Menu.js";
|
|
4
4
|
import { createComponent, memo, mergeProps } from "solid-js/web";
|
|
5
5
|
import { batch, createMemo, createSignal, mapArray } from "solid-js";
|
|
6
|
-
import { range, remove } from "es-toolkit";
|
|
7
6
|
import { combineProps } from "@solid-primitives/props";
|
|
7
|
+
import { range, remove } from "es-toolkit";
|
|
8
8
|
import { createEventListener } from "@solid-primitives/event-listener";
|
|
9
9
|
import { autoPlacement, computePosition } from "@floating-ui/dom";
|
|
10
10
|
const MenuPlugin = {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { usePointerDrag } from "../hooks/index.js";
|
|
2
|
-
import { Ctx } from "../index.js";
|
|
3
2
|
import { useSplit } from "../components/Split.js";
|
|
3
|
+
import { Ctx } from "../index.js";
|
|
4
4
|
import { createComponent, template, use } from "solid-js/web";
|
|
5
5
|
import { createMemo, onMount, useContext } from "solid-js";
|
|
6
|
-
import { clamp } from "es-toolkit";
|
|
7
6
|
import { combineProps } from "@solid-primitives/props";
|
|
7
|
+
import { clamp } from "es-toolkit";
|
|
8
8
|
import { defaultsDeep } from "es-toolkit/compat";
|
|
9
9
|
var _tmpl$ = /* @__PURE__ */ template(`<div class="in-cell__resize-handle flex justify-center after:w-1 cursor-w-resize">`), _tmpl$2 = /* @__PURE__ */ template(`<div class="in-cell__resize-handle flex flex-row items-center after:h-1 cursor-s-resize">`);
|
|
10
10
|
const ResizePlugin = { rewriteProps: {
|
|
@@ -1,126 +1,9 @@
|
|
|
1
|
-
@charset "UTF-8";@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*, ::before, ::after, ::backdrop{--un-bg-opacity:100%;--un-space-y-reverse:initial;--un-border-opacity:100%;--un-space-x-reverse:initial;--un-content:"";--un-translate-x:initial;--un-translate-y:initial;--un-translate-z:initial;--un-text-opacity:100%;--un-outline-style:solid;--un-outline-opacity:100%;--un-leading:initial;}}@property --un-leading{syntax:"*";inherits:false;}@property --un-outline-style{syntax:"*";inherits:false;initial-value:solid;}@property --un-outline-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}:root, :host {--spacing: 0.25rem;--colors-gray-DEFAULT: oklch(70.7% 0.022 261.325);--text-sm-fontSize: 0.875rem;--text-sm-lineHeight: 1.25rem;--radius-sm: 0.25rem;--colors-blue-DEFAULT: oklch(70.7% 0.165 254.624);--font-sans: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--default-font-family: var(--font-sans);--default-monoFont-family: var(--font-mono);}/* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Remove default margins and padding 3. Reset all borders.*/*,::after,::before,::backdrop,::file-selector-button { box-sizing: border-box; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 2 */ border: 0 solid; /* 3 */}/* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS.*/html,:host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ tab-size: 4; /* 3 */ font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' ); /* 4 */ font-feature-settings: var(--default-font-featureSettings, normal); /* 5 */ font-variation-settings: var(--default-font-variationSettings, normal); /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */}/* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Reset the default border style to a 1px solid border.*/hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */}/* Add the correct text decoration in Chrome, Edge, and Safari.*/abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted;}/* Remove the default font size and weight for headings.*/h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit;}/* Reset links to optimize for opt-in styling instead of opt-out.*/a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit;}/* Add the correct font weight in Edge and Safari.*/b,strong { font-weight: bolder;}/* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers.*/code,kbd,samp,pre { font-family: var( --default-monoFont-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace ); /* 1 */ font-feature-settings: var(--default-monoFont-featureSettings, normal); /* 2 */ font-variation-settings: var(--default-monoFont-variationSettings, normal); /* 3 */ font-size: 1em; /* 4 */}/* Add the correct font size in all browsers.*/small { font-size: 80%;}/* Prevent `sub` and `sup` elements from affecting the line height in all browsers.*/sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sub { bottom: -0.25em;}sup { top: -0.5em;}/* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default.*/table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */}/* Use the modern Firefox focus style for all focusable elements.*/:-moz-focusring { outline: auto;}/* Add the correct vertical alignment in Chrome and Firefox.*/progress { vertical-align: baseline;}/* Add the correct display in Chrome and Safari.*/summary { display: list-item;}/* Make lists unstyled by default.*/ol,ul,menu { list-style: none;}/* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design.*/img,svg,video,canvas,audio,iframe,embed,object { display: block; /* 1 */ vertical-align: middle; /* 2 */}/* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)*/img,video { max-width: 100%; height: auto;}/* 1. Inherit font styles in all browsers. 2. Remove border radius in all browsers. 3. Remove background color in all browsers. 4. Ensure consistent opacity for disabled states in all browsers.*/button,input,select,optgroup,textarea,::file-selector-button { font: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ border-radius: 0; /* 2 */ background-color: transparent; /* 3 */ opacity: 1; /* 4 */}/* Restore default font weight.*/:where(select:is([multiple], [size])) optgroup { font-weight: bolder;}/* Restore indentation.*/:where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px;}/* Restore space after button.*/::file-selector-button { margin-inline-end: 4px;}/* Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)*/::placeholder { opacity: 1;}/* Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)*/@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or (contain-intrinsic-size: 1px) /* Safari 17+ */ { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); }}/* Prevent resizing textareas horizontally by default.*/textarea { resize: vertical;}/* Remove the inner padding in Chrome and Safari on macOS.*/::-webkit-search-decoration { -webkit-appearance: none;}/* 1. Ensure date/time inputs have the same height when empty in iOS Safari. 2. Ensure text alignment can be changed on date/time inputs in iOS Safari.*/::-webkit-date-and-time-value { min-height: 1lh; /* 1 */ text-align: inherit; /* 2 */}/* Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.*/::-webkit-datetime-edit { display: inline-flex;}/* Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.*/::-webkit-datetime-edit-fields-wrapper { padding: 0;}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field { padding-block: 0;}/* Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)*/::-webkit-calendar-picker-indicator { line-height: 1;}/* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)*/:-moz-ui-invalid { box-shadow: none;}/* Correct the inability to style the border radius in iOS Safari.*/button,input:where([type='button'], [type='reset'], [type='submit']),::file-selector-button { appearance: button;}/* Correct the cursor style of increment and decrement buttons in Safari.*/::-webkit-inner-spin-button,::-webkit-outer-spin-button { height: auto;}/* Make elements with the HTML hidden attribute stay hidden by default.*/[hidden]:where(:not([hidden~='until-found'])) { display: none !important;}.container{width:100%;}.aic{align-items:center;}@media (min-width: 40rem){.container{max-width:40rem;}}@media (min-width: 48rem){.container{max-width:48rem;}}@media (min-width: 64rem){.container{max-width:64rem;}}@media (min-width: 80rem){.container{max-width:80rem;}}@media (min-width: 96rem){.container{max-width:96rem;}}.text-3\.5{font-size:0.875rem;}.lh-\[1\]{--un-leading:1;line-height:1;}.mx-1{margin-inline:calc(var(--spacing) * 1);}.mx-3\!{margin-inline:calc(var(--spacing) * 3) !important;}.my-1{margin-block:calc(var(--spacing) * 1);}.ml{margin-left:calc(var(--spacing) * 4);}.ml-\.5{margin-left:calc(var(--spacing) * 0.5);}.ml-1{margin-left:calc(var(--spacing) * 1);}.mr--1{margin-right:calc(var(--spacing) * -1);}.mr-1{margin-right:calc(var(--spacing) * 1);}.mr-2{margin-right:calc(var(--spacing) * 2);}.mr-2\.5{margin-right:calc(var(--spacing) * 2.5);}.ms{margin-inline-start:calc(var(--spacing) * 4);}.p-1{padding:calc(var(--spacing) * 1);}.px,.px-4{padding-inline:calc(var(--spacing) * 4);}.px-2{padding-inline:calc(var(--spacing) * 2);}.py-1{padding-block:calc(var(--spacing) * 1);}.py-2{padding-block:calc(var(--spacing) * 2);}.pl-1{padding-left:calc(var(--spacing) * 1);}.pr-4{padding-right:calc(var(--spacing) * 4);}.ps{padding-inline-start:calc(var(--spacing) * 4);}.outline-0{outline-style:var(--un-outline-style);outline-width:0px;}.outline-2{outline-style:var(--un-outline-style);outline-width:2px;}.outline-blue{outline-color:color-mix(in srgb, var(--colors-blue-DEFAULT) var(--un-outline-opacity), transparent) /* oklch(70.7% 0.165 254.624) */;}.b,.border{border-width:1px;}.rd-2{border-radius:0.5rem;}.rd-sm{border-radius:var(--radius-sm);}.bg-\#dafaea{background-color:color-mix(in oklab, #dafaea var(--un-bg-opacity), transparent) /* #dafaea */;}.bg-\#ffe8e8{background-color:color-mix(in oklab, #ffe8e8 var(--un-bg-opacity), transparent) /* #ffe8e8 */;}.bg-\#fff{background-color:color-mix(in oklab, #fff var(--un-bg-opacity), transparent) /* #fff */;}.bg-gray\/20{background-color:color-mix(in srgb, var(--colors-gray-DEFAULT) 20%, transparent) /* oklch(70.7% 0.022 261.325) */;}.op-75{opacity:75%;}.op40{opacity:40%;}.flex{display:flex;}.flex-shrink-0{flex-shrink:0;}.flex-row{flex-direction:row;}.flex-wrap{flex-wrap:wrap;}.gap-2{gap:calc(var(--spacing) * 2);}.size-4\!{width:calc(var(--spacing) * 4) !important;height:calc(var(--spacing) * 4) !important;}.size-full{width:100%;height:100%;}.h-40vh{height:40vh;}.h-a\!{height:auto !important;}.h-full{height:100%;}.max-h-100{max-height:calc(var(--spacing) * 100);}.min-h-40{min-height:calc(var(--spacing) * 40);}.min-h-a\!{min-height:auto !important;}.w-50vw\!{width:50vw !important;}.after\:h-1::after{height:calc(var(--spacing) * 1);}.after\:w-1::after{width:calc(var(--spacing) * 1);}.block{display:block;}.cursor-s-resize{cursor:s-resize;}.cursor-w-resize{cursor:w-resize;}.resize-none{resize:none;}.transform{transform:var(--un-rotate-x) var(--un-rotate-y) var(--un-rotate-z) var(--un-skew-x) var(--un-skew-y);}.items-center{align-items:center;}.box-border{box-sizing:border-box;}.justify-center{justify-content:center;}.absolute{position:absolute;}.fixed{position:fixed;}.relative{position:relative;}.z-1{z-index:1;}.z-9{z-index:9;}.of-auto,.overflow-auto{overflow:auto;}.table{display:table;}@supports (color: color-mix(in lab, red, red)){.outline-blue{outline-color:color-mix(in oklab, var(--colors-blue-DEFAULT) var(--un-outline-opacity), transparent) /* oklch(70.7% 0.165 254.624) */;}.bg-gray\/20{background-color:color-mix(in oklab, var(--colors-gray-DEFAULT) 20%, transparent) /* oklch(70.7% 0.022 261.325) */;}}:root {
|
|
2
|
-
|
|
3
|
-
--bg: #fff;
|
|
4
|
-
--menu-bg: #fff;
|
|
5
|
-
--header-bg: #f6f6f7;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.dark {
|
|
9
|
-
color-scheme: dark;
|
|
10
|
-
--bg: #121212;
|
|
11
|
-
--menu-bg: #121212;
|
|
12
|
-
--header-bg: #161618;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
body {
|
|
16
|
-
margin:calc(var(--spacing) * 0);background-color:color-mix(in oklab, var(--bg) var(--un-bg-opacity), transparent) /* var(--bg) */;
|
|
17
|
-
}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}
|
|
18
|
-
|
|
19
|
-
button {
|
|
20
|
-
border-radius: 8px;
|
|
21
|
-
border: 1px solid transparent;
|
|
22
|
-
font-size: 1em;
|
|
23
|
-
cursor: pointer;
|
|
24
|
-
transition: border-color 0.25s;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
button:hover {
|
|
28
|
-
border-color: #646cff;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
button:focus,
|
|
32
|
-
button:focus-visible {
|
|
33
|
-
outline: 4px auto -webkit-focus-ring-color;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
mark {
|
|
37
|
-
padding: 0.1rem 0.3rem;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.col-hand {
|
|
41
|
-
--w: 4px;
|
|
42
|
-
position: absolute;
|
|
43
|
-
top: 0;
|
|
44
|
-
left: 100%;
|
|
45
|
-
height: 100%;
|
|
46
|
-
width: var(--gap);
|
|
47
|
-
cursor: w-resize;
|
|
48
|
-
display: flex;
|
|
49
|
-
justify-content: center;
|
|
50
|
-
opacity: 0;
|
|
51
|
-
transition: opacity 100ms linear;
|
|
52
|
-
}
|
|
53
|
-
.col-hand:hover, .col-hand:active {
|
|
54
|
-
opacity: 1;
|
|
55
|
-
}
|
|
56
|
-
.col-hand::after {
|
|
57
|
-
content: "";
|
|
58
|
-
display: block;
|
|
59
|
-
flex-shrink: 0;
|
|
60
|
-
width: 4px;
|
|
61
|
-
height: 100%;
|
|
62
|
-
background: rgba(128, 128, 128, 0.5);
|
|
63
|
-
}
|
|
64
|
-
.col-hand > .dot {
|
|
65
|
-
--w: 20px;
|
|
66
|
-
position: absolute;
|
|
67
|
-
top: 0;
|
|
68
|
-
display: flex;
|
|
69
|
-
align-items: center;
|
|
70
|
-
justify-content: center;
|
|
71
|
-
transform: translateY(-50%);
|
|
72
|
-
width: calc(var(--w) * 1);
|
|
73
|
-
height: calc(var(--w) * 1);
|
|
74
|
-
}
|
|
75
|
-
.col-hand > .dot:hover::after {
|
|
76
|
-
content: "+";
|
|
77
|
-
display: flex;
|
|
78
|
-
align-items: center;
|
|
79
|
-
justify-content: center;
|
|
80
|
-
width: calc(var(--w) * 1);
|
|
81
|
-
height: calc(var(--w) * 1);
|
|
82
|
-
background-color: rgba(0, 0, 255, 0.75);
|
|
83
|
-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
|
84
|
-
}
|
|
85
|
-
.col-hand > .dot::after {
|
|
86
|
-
content: "";
|
|
87
|
-
display: block;
|
|
88
|
-
width: 8px;
|
|
89
|
-
height: 8px;
|
|
90
|
-
color: #fff;
|
|
91
|
-
background-color: rgba(0, 0, 255, 0.5);
|
|
92
|
-
border-radius: 50%;
|
|
93
|
-
transition: all 100ms;
|
|
94
|
-
cursor: pointer;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.li {
|
|
98
|
-
cursor:pointer;position:relative;
|
|
99
|
-
}
|
|
100
|
-
.li:hover, .li.hover {
|
|
101
|
-
background-color:color-mix(in srgb, var(--colors-gray-DEFAULT) 20%, transparent) /* oklch(70.7% 0.022 261.325) */;
|
|
102
|
-
}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@supports (color: color-mix(in lab, red, red)){.li:hover,.li.hover{background-color:color-mix(in oklab, var(--colors-gray-DEFAULT) 20%, transparent) /* oklch(70.7% 0.022 261.325) */;}}
|
|
103
|
-
.li:active::before, .li.selected::before, .li.active::before {
|
|
104
|
-
content: "";
|
|
105
|
-
border-radius:inherit;background-color:color-mix(in srgb, var(--colors-gray-DEFAULT) 15%, transparent) /* oklch(70.7% 0.022 261.325) */;inset:calc(var(--spacing) * 0);position:absolute;
|
|
106
|
-
}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@supports (color: color-mix(in lab, red, red)){.li:active::before,.li.selected::before,.li.active::before{background-color:color-mix(in oklab, var(--colors-gray-DEFAULT) 15%, transparent) /* oklch(70.7% 0.022 261.325) */;}}
|
|
107
|
-
.li.disabled, .li[disabled] {
|
|
108
|
-
opacity: 0.4;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.tt-menu {
|
|
112
|
-
font-size:var(--text-sm-fontSize);line-height:var(--un-leading, var(--text-sm-lineHeight));padding-block:calc(var(--spacing) * 1);border-width:1px;border-color:color-mix(in srgb, var(--colors-gray-DEFAULT) 30%, transparent) /* oklch(70.7% 0.022 261.325) */;border-radius:0.5rem;--un-border-style:solid;border-style:solid;background-color:color-mix(in oklab, var(--menu-bg) var(--un-bg-opacity), transparent) /* var(--menu-bg) */;cursor:default;--un-shadow:0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
|
|
113
|
-
}@property --un-border-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@supports (color: color-mix(in lab, red, red)){.tt-menu{border-color:color-mix(in oklab, var(--colors-gray-DEFAULT) 30%, transparent) /* oklch(70.7% 0.022 261.325) */;}}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@property --un-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-shadow-color{syntax:"*";inherits:false;}@property --un-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-inset-shadow-color{syntax:"*";inherits:false;}@property --un-ring-color{syntax:"*";inherits:false;}@property --un-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-inset-ring-color{syntax:"*";inherits:false;}@property --un-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-ring-inset{syntax:"*";inherits:false;}@property --un-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0px;}@property --un-ring-offset-color{syntax:"*";inherits:false;}@property --un-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}.tt-menu{:where(&>:not(:last-child)){--un-space-y-reverse:0;margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--un-space-y-reverse));margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--un-space-y-reverse)));}}@property --un-space-y-reverse{syntax:"*";inherits:false;initial-value:0;}
|
|
114
|
-
|
|
115
|
-
.tt-menu-x {
|
|
116
|
-
font-size:var(--text-sm-fontSize);line-height:var(--un-leading, var(--text-sm-lineHeight));padding-inline:calc(var(--spacing) * 1);border-width:1px;border-color:color-mix(in srgb, var(--colors-gray-DEFAULT) 30%, transparent) /* oklch(70.7% 0.022 261.325) */;border-radius:0.5rem;--un-border-style:solid;border-style:solid;background-color:color-mix(in oklab, var(--menu-bg) var(--un-bg-opacity), transparent) /* var(--menu-bg) */;cursor:default;--un-shadow:0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
|
|
117
|
-
}@property --un-border-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@supports (color: color-mix(in lab, red, red)){.tt-menu-x{border-color:color-mix(in oklab, var(--colors-gray-DEFAULT) 30%, transparent) /* oklch(70.7% 0.022 261.325) */;}}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@property --un-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-shadow-color{syntax:"*";inherits:false;}@property --un-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-inset-shadow-color{syntax:"*";inherits:false;}@property --un-ring-color{syntax:"*";inherits:false;}@property --un-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-inset-ring-color{syntax:"*";inherits:false;}@property --un-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-ring-inset{syntax:"*";inherits:false;}@property --un-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0px;}@property --un-ring-offset-color{syntax:"*";inherits:false;}@property --un-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}.tt-menu-x{:where(&>:not(:last-child)){--un-space-x-reverse:0;margin-inline-start: calc(calc(var(--spacing) * 0.5) * var(--un-space-x-reverse));margin-inline-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--un-space-x-reverse)));}}@property --un-space-x-reverse{syntax:"*";inherits:false;initial-value:0;}
|
|
118
|
-
.tt-menu-x > .hr {
|
|
119
|
-
margin-block:calc(var(--spacing) * 1.5);background-color:color-mix(in srgb, var(--colors-gray-DEFAULT) 30%, transparent) /* oklch(70.7% 0.022 261.325) */;width:1px;
|
|
120
|
-
}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@supports (color: color-mix(in lab, red, red)){.tt-menu-x > .hr{background-color:color-mix(in oklab, var(--colors-gray-DEFAULT) 30%, transparent) /* oklch(70.7% 0.022 261.325) */;}}
|
|
1
|
+
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*, ::before, ::after, ::backdrop{--un-bg-opacity:100%;--un-content:"";--un-translate-x:initial;--un-translate-y:initial;--un-translate-z:initial;--un-text-opacity:100%;--un-border-opacity:100%;--un-space-y-reverse:initial;--un-space-x-reverse:initial;--un-outline-style:solid;--un-outline-opacity:100%;--un-leading:initial;}}@property --un-leading{syntax:"*";inherits:false;}@property --un-outline-style{syntax:"*";inherits:false;initial-value:solid;}@property --un-outline-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}:root, :host {--spacing: 0.25rem;--colors-gray-DEFAULT: oklch(70.7% 0.022 261.325);--text-sm-fontSize: 0.875rem;--text-sm-lineHeight: 1.25rem;--radius-sm: 0.25rem;--colors-blue-DEFAULT: oklch(70.7% 0.165 254.624);--font-sans: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--default-font-family: var(--font-sans);--default-monoFont-family: var(--font-mono);}/* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Remove default margins and padding 3. Reset all borders.*/*,::after,::before,::backdrop,::file-selector-button { box-sizing: border-box; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 2 */ border: 0 solid; /* 3 */}/* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS.*/html,:host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ tab-size: 4; /* 3 */ font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' ); /* 4 */ font-feature-settings: var(--default-font-featureSettings, normal); /* 5 */ font-variation-settings: var(--default-font-variationSettings, normal); /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */}/* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Reset the default border style to a 1px solid border.*/hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */}/* Add the correct text decoration in Chrome, Edge, and Safari.*/abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted;}/* Remove the default font size and weight for headings.*/h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit;}/* Reset links to optimize for opt-in styling instead of opt-out.*/a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit;}/* Add the correct font weight in Edge and Safari.*/b,strong { font-weight: bolder;}/* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers.*/code,kbd,samp,pre { font-family: var( --default-monoFont-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace ); /* 1 */ font-feature-settings: var(--default-monoFont-featureSettings, normal); /* 2 */ font-variation-settings: var(--default-monoFont-variationSettings, normal); /* 3 */ font-size: 1em; /* 4 */}/* Add the correct font size in all browsers.*/small { font-size: 80%;}/* Prevent `sub` and `sup` elements from affecting the line height in all browsers.*/sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}sub { bottom: -0.25em;}sup { top: -0.5em;}/* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default.*/table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */}/* Use the modern Firefox focus style for all focusable elements.*/:-moz-focusring { outline: auto;}/* Add the correct vertical alignment in Chrome and Firefox.*/progress { vertical-align: baseline;}/* Add the correct display in Chrome and Safari.*/summary { display: list-item;}/* Make lists unstyled by default.*/ol,ul,menu { list-style: none;}/* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design.*/img,svg,video,canvas,audio,iframe,embed,object { display: block; /* 1 */ vertical-align: middle; /* 2 */}/* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)*/img,video { max-width: 100%; height: auto;}/* 1. Inherit font styles in all browsers. 2. Remove border radius in all browsers. 3. Remove background color in all browsers. 4. Ensure consistent opacity for disabled states in all browsers.*/button,input,select,optgroup,textarea,::file-selector-button { font: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ border-radius: 0; /* 2 */ background-color: transparent; /* 3 */ opacity: 1; /* 4 */}/* Restore default font weight.*/:where(select:is([multiple], [size])) optgroup { font-weight: bolder;}/* Restore indentation.*/:where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px;}/* Restore space after button.*/::file-selector-button { margin-inline-end: 4px;}/* Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)*/::placeholder { opacity: 1;}/* Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)*/@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or (contain-intrinsic-size: 1px) /* Safari 17+ */ { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); }}/* Prevent resizing textareas horizontally by default.*/textarea { resize: vertical;}/* Remove the inner padding in Chrome and Safari on macOS.*/::-webkit-search-decoration { -webkit-appearance: none;}/* 1. Ensure date/time inputs have the same height when empty in iOS Safari. 2. Ensure text alignment can be changed on date/time inputs in iOS Safari.*/::-webkit-date-and-time-value { min-height: 1lh; /* 1 */ text-align: inherit; /* 2 */}/* Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.*/::-webkit-datetime-edit { display: inline-flex;}/* Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.*/::-webkit-datetime-edit-fields-wrapper { padding: 0;}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field { padding-block: 0;}/* Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)*/::-webkit-calendar-picker-indicator { line-height: 1;}/* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)*/:-moz-ui-invalid { box-shadow: none;}/* Correct the inability to style the border radius in iOS Safari.*/button,input:where([type='button'], [type='reset'], [type='submit']),::file-selector-button { appearance: button;}/* Correct the cursor style of increment and decrement buttons in Safari.*/::-webkit-inner-spin-button,::-webkit-outer-spin-button { height: auto;}/* Make elements with the HTML hidden attribute stay hidden by default.*/[hidden]:where(:not([hidden~='until-found'])) { display: none !important;}.container{width:100%;}.aic{align-items:center;}@media (min-width: 40rem){.container{max-width:40rem;}}@media (min-width: 48rem){.container{max-width:48rem;}}@media (min-width: 64rem){.container{max-width:64rem;}}@media (min-width: 80rem){.container{max-width:80rem;}}@media (min-width: 96rem){.container{max-width:96rem;}}.text-3\.5{font-size:0.875rem;}.lh-\[1\]{--un-leading:1;line-height:1;}.m9{margin:calc(var(--spacing) * 9);}.mx-1{margin-inline:calc(var(--spacing) * 1);}.mx-3\!{margin-inline:calc(var(--spacing) * 3) !important;}.my-1{margin-block:calc(var(--spacing) * 1);}.ml{margin-left:calc(var(--spacing) * 4);}.ml-\.5{margin-left:calc(var(--spacing) * 0.5);}.ml-1{margin-left:calc(var(--spacing) * 1);}.mr--1{margin-right:calc(var(--spacing) * -1);}.mr-1{margin-right:calc(var(--spacing) * 1);}.mr-2{margin-right:calc(var(--spacing) * 2);}.mr-2\.5{margin-right:calc(var(--spacing) * 2.5);}.p-1{padding:calc(var(--spacing) * 1);}.px,.px-4{padding-inline:calc(var(--spacing) * 4);}.px-2{padding-inline:calc(var(--spacing) * 2);}.py-1{padding-block:calc(var(--spacing) * 1);}.py-2{padding-block:calc(var(--spacing) * 2);}.pl-1{padding-left:calc(var(--spacing) * 1);}.pr-4{padding-right:calc(var(--spacing) * 4);}.ps{padding-inline-start:calc(var(--spacing) * 4);}.outline-0{outline-style:var(--un-outline-style);outline-width:0px;}.outline-2{outline-style:var(--un-outline-style);outline-width:2px;}.outline-blue{outline-color:color-mix(in srgb, var(--colors-blue-DEFAULT) var(--un-outline-opacity), transparent) /* oklch(70.7% 0.165 254.624) */;}.b{border-width:1px;}.rd-2{border-radius:0.5rem;}.rd-sm{border-radius:var(--radius-sm);}.bg-\#dafaea{background-color:color-mix(in oklab, #dafaea var(--un-bg-opacity), transparent) /* #dafaea */;}.bg-\#ffe8e8{background-color:color-mix(in oklab, #ffe8e8 var(--un-bg-opacity), transparent) /* #ffe8e8 */;}.bg-\#fff{background-color:color-mix(in oklab, #fff var(--un-bg-opacity), transparent) /* #fff */;}.bg-gray\/20{background-color:color-mix(in srgb, var(--colors-gray-DEFAULT) 20%, transparent) /* oklch(70.7% 0.022 261.325) */;}.op-75{opacity:75%;}.op40{opacity:40%;}.flex{display:flex;}.flex-shrink-0{flex-shrink:0;}.flex-row{flex-direction:row;}.flex-wrap{flex-wrap:wrap;}.gap-2{gap:calc(var(--spacing) * 2);}.size-4\!{width:calc(var(--spacing) * 4) !important;height:calc(var(--spacing) * 4) !important;}.size-full{width:100%;height:100%;}.h-a\!{height:auto !important;}.h-full{height:100%;}.max-h-100{max-height:calc(var(--spacing) * 100);}.min-h-40{min-height:calc(var(--spacing) * 40);}.min-h-a\!{min-height:auto !important;}.after\:h-1::after{height:calc(var(--spacing) * 1);}.after\:w-1::after{width:calc(var(--spacing) * 1);}.block{display:block;}.cursor-s-resize{cursor:s-resize;}.cursor-w-resize{cursor:w-resize;}.resize-none{resize:none;}.transform{transform:var(--un-rotate-x) var(--un-rotate-y) var(--un-rotate-z) var(--un-skew-x) var(--un-skew-y);}.items-center{align-items:center;}.box-border{box-sizing:border-box;}.justify-center{justify-content:center;}.absolute{position:absolute;}.fixed{position:fixed;}.relative{position:relative;}.z-1{z-index:1;}.z-9{z-index:9;}.overflow-auto{overflow:auto;}.table{display:table;}@supports (color: color-mix(in lab, red, red)){.outline-blue{outline-color:color-mix(in oklab, var(--colors-blue-DEFAULT) var(--un-outline-opacity), transparent) /* oklch(70.7% 0.165 254.624) */;}.bg-gray\/20{background-color:color-mix(in oklab, var(--colors-gray-DEFAULT) 20%, transparent) /* oklch(70.7% 0.022 261.325) */;}}
|
|
2
|
+
@charset "UTF-8";
|
|
121
3
|
:root {
|
|
122
4
|
--c-primary: #51a2ff;
|
|
123
5
|
--select-area-bg: #5292f71a;
|
|
6
|
+
--menu-bg: #fff;
|
|
124
7
|
}
|
|
125
8
|
|
|
126
9
|
.data-table {
|
|
@@ -274,4 +157,29 @@ input[type=checkbox].you-checkbox.checked::after {
|
|
|
274
157
|
}.in-cell__resize-handle:hover::after{background-color:color-mix(in oklab, var(--c-primary) 40%, transparent) /* var(--c-primary) */;}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;syntax:"<percentage>";inherits:false;initial-value:100%;}.in-cell__resize-handle:active::after{background-color:color-mix(in oklab, var(--c-primary) var(--un-bg-opacity), transparent) /* var(--c-primary) */;}
|
|
275
158
|
.in-cell__resize-handle::after {
|
|
276
159
|
--un-content:'';content:var(--un-content);
|
|
277
|
-
}@property --un-content{syntax:"*";inherits:false;initial-value:"";}
|
|
160
|
+
}@property --un-content{syntax:"*";inherits:false;initial-value:"";}
|
|
161
|
+
|
|
162
|
+
.li {
|
|
163
|
+
cursor:pointer;position:relative;
|
|
164
|
+
}
|
|
165
|
+
.li:hover, .li.hover {
|
|
166
|
+
background-color:color-mix(in srgb, var(--colors-gray-DEFAULT) 20%, transparent) /* oklch(70.7% 0.022 261.325) */;
|
|
167
|
+
}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@supports (color: color-mix(in lab, red, red)){.li:hover,.li.hover{background-color:color-mix(in oklab, var(--colors-gray-DEFAULT) 20%, transparent) /* oklch(70.7% 0.022 261.325) */;}}
|
|
168
|
+
.li:active::before, .li.selected::before, .li.active::before {
|
|
169
|
+
content: "";
|
|
170
|
+
border-radius:inherit;background-color:color-mix(in srgb, var(--colors-gray-DEFAULT) 15%, transparent) /* oklch(70.7% 0.022 261.325) */;inset:calc(var(--spacing) * 0);position:absolute;
|
|
171
|
+
}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@supports (color: color-mix(in lab, red, red)){.li:active::before,.li.selected::before,.li.active::before{background-color:color-mix(in oklab, var(--colors-gray-DEFAULT) 15%, transparent) /* oklch(70.7% 0.022 261.325) */;}}
|
|
172
|
+
.li.disabled, .li[disabled] {
|
|
173
|
+
opacity: 0.4;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.tt-menu {
|
|
177
|
+
font-size:var(--text-sm-fontSize);line-height:var(--un-leading, var(--text-sm-lineHeight));padding-block:calc(var(--spacing) * 1);border-width:1px;border-color:color-mix(in srgb, var(--colors-gray-DEFAULT) 30%, transparent) /* oklch(70.7% 0.022 261.325) */;border-radius:0.5rem;--un-border-style:solid;border-style:solid;background-color:color-mix(in oklab, var(--menu-bg) var(--un-bg-opacity), transparent) /* var(--menu-bg) */;cursor:default;--un-shadow:0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
|
|
178
|
+
}@property --un-border-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@supports (color: color-mix(in lab, red, red)){.tt-menu{border-color:color-mix(in oklab, var(--colors-gray-DEFAULT) 30%, transparent) /* oklch(70.7% 0.022 261.325) */;}}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@property --un-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-shadow-color{syntax:"*";inherits:false;}@property --un-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-inset-shadow-color{syntax:"*";inherits:false;}@property --un-ring-color{syntax:"*";inherits:false;}@property --un-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-inset-ring-color{syntax:"*";inherits:false;}@property --un-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-ring-inset{syntax:"*";inherits:false;}@property --un-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0px;}@property --un-ring-offset-color{syntax:"*";inherits:false;}@property --un-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}.tt-menu{:where(&>:not(:last-child)){--un-space-y-reverse:0;margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--un-space-y-reverse));margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--un-space-y-reverse)));}}@property --un-space-y-reverse{syntax:"*";inherits:false;initial-value:0;}
|
|
179
|
+
|
|
180
|
+
.tt-menu-x {
|
|
181
|
+
font-size:var(--text-sm-fontSize);line-height:var(--un-leading, var(--text-sm-lineHeight));padding-inline:calc(var(--spacing) * 1);border-width:1px;border-color:color-mix(in srgb, var(--colors-gray-DEFAULT) 30%, transparent) /* oklch(70.7% 0.022 261.325) */;border-radius:0.5rem;--un-border-style:solid;border-style:solid;background-color:color-mix(in oklab, var(--menu-bg) var(--un-bg-opacity), transparent) /* var(--menu-bg) */;cursor:default;--un-shadow:0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
|
|
182
|
+
}@property --un-border-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@supports (color: color-mix(in lab, red, red)){.tt-menu-x{border-color:color-mix(in oklab, var(--colors-gray-DEFAULT) 30%, transparent) /* oklch(70.7% 0.022 261.325) */;}}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@property --un-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-shadow-color{syntax:"*";inherits:false;}@property --un-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-inset-shadow-color{syntax:"*";inherits:false;}@property --un-ring-color{syntax:"*";inherits:false;}@property --un-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-inset-ring-color{syntax:"*";inherits:false;}@property --un-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}@property --un-ring-inset{syntax:"*";inherits:false;}@property --un-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0px;}@property --un-ring-offset-color{syntax:"*";inherits:false;}@property --un-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000;}.tt-menu-x{:where(&>:not(:last-child)){--un-space-x-reverse:0;margin-inline-start: calc(calc(var(--spacing) * 0.5) * var(--un-space-x-reverse));margin-inline-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--un-space-x-reverse)));}}@property --un-space-x-reverse{syntax:"*";inherits:false;initial-value:0;}
|
|
183
|
+
.tt-menu-x > .hr {
|
|
184
|
+
margin-block:calc(var(--spacing) * 1.5);background-color:color-mix(in srgb, var(--colors-gray-DEFAULT) 30%, transparent) /* oklch(70.7% 0.022 261.325) */;width:1px;
|
|
185
|
+
}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@supports (color: color-mix(in lab, red, red)){.tt-menu-x > .hr{background-color:color-mix(in oklab, var(--colors-gray-DEFAULT) 30%, transparent) /* oklch(70.7% 0.022 261.325) */;}}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
.data-table {
|
|
2
|
+
--table-b: 1px solid var(--table-b-c);
|
|
3
|
+
--table-b-c: var(--ant-table-border-color, #f0f0f0);
|
|
4
|
+
--table-c: var(--ant-color-text, rgba(0,0,0,0.88));
|
|
5
|
+
--table-bg: var(--ant-color-bg-container, #fff);
|
|
6
|
+
|
|
7
|
+
--table-header-c: var(--ant-table-header-color, rgba(0,0,0,0.88));
|
|
8
|
+
--table-header-bg: var(--ant-table-header-bg, #fafafa);
|
|
9
|
+
|
|
10
|
+
--table-row-hover-bg: var(--ant-table-row-hover-bg, #fafafa);
|
|
11
|
+
|
|
12
|
+
@apply text-[14px];
|
|
13
|
+
|
|
14
|
+
&:not(&--border) thead th {
|
|
15
|
+
@apply relative;
|
|
16
|
+
&:not(:last-child)::before {
|
|
17
|
+
@apply content-[''] absolute top-1/2 right-0 h-[1.6em] w-[1px] bg-[--table-b-c] translate-y-[-50%];
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
th, td {
|
|
22
|
+
@apply px-2 py-3 lh-[22px];
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.row-selection {
|
|
26
|
+
width: 35px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&--small {
|
|
30
|
+
th, td {
|
|
31
|
+
@apply px-2;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
.data-table {
|
|
2
|
+
--table-b: 1px solid var(--table-b-c);
|
|
3
|
+
--table-b-c: var(--el-table-border-color, #ebeef5);
|
|
4
|
+
--table-c: var(--el-table-text-color, #606266);
|
|
5
|
+
--table-bg: var(--el-table-tr-bg-color, #fff);
|
|
6
|
+
|
|
7
|
+
--table-header-c: var(--el-table-header-text-color, #909399);
|
|
8
|
+
--table-header-bg: var(--table-bg);
|
|
9
|
+
|
|
10
|
+
--table-row-hover-bg: var(--el-table-row-hover-bg-color, #f5f7fa);
|
|
11
|
+
|
|
12
|
+
@apply lh-[23px] text-[14px];
|
|
13
|
+
|
|
14
|
+
thead th {
|
|
15
|
+
@apply font-600;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
th, td {
|
|
19
|
+
@apply px-3 py-2;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.row-selection {
|
|
23
|
+
width: 45px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&--small {
|
|
27
|
+
@apply text-3;
|
|
28
|
+
|
|
29
|
+
th, td {
|
|
30
|
+
@apply px-2 py-1;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
package/dist/wc.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Intable } from "./index.js";
|
|
2
2
|
import { createComponent } from "solid-js/web";
|
|
3
3
|
import { batch, createEffect, createSignal, untrack } from "solid-js";
|
|
4
4
|
import { createMutable, reconcile } from "solid-js/store";
|
|
@@ -19,6 +19,6 @@ const TableElement = customElement("wc-table", {
|
|
|
19
19
|
const { options } = attrs;
|
|
20
20
|
untrack(() => batch(() => reconcile(options)(props)));
|
|
21
21
|
});
|
|
22
|
-
return createComponent(
|
|
22
|
+
return createComponent(Intable, props);
|
|
23
23
|
});
|
|
24
24
|
export { TableElement };
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "intable",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
|
+
"license": "MIT",
|
|
4
5
|
"type": "module",
|
|
5
6
|
"files": [
|
|
6
7
|
"dist"
|
|
@@ -31,7 +32,6 @@
|
|
|
31
32
|
"@solid-primitives/storage": "^4.3.3",
|
|
32
33
|
"@solid-primitives/utils": "^6.3.2",
|
|
33
34
|
"@tanstack/solid-virtual": "^3.13.12",
|
|
34
|
-
"diff": "^8.0.2",
|
|
35
35
|
"es-toolkit": "^1.39.10",
|
|
36
36
|
"floating-ui-solid": "^1.0.63",
|
|
37
37
|
"solid-element": "^1.9.1",
|
|
@@ -39,33 +39,11 @@
|
|
|
39
39
|
"tinykeys": "^3.0.0",
|
|
40
40
|
"uuid": "^13.0.0"
|
|
41
41
|
},
|
|
42
|
-
"devDependencies": {
|
|
43
|
-
"@babel/plugin-syntax-typescript": "^7.27.1",
|
|
44
|
-
"@iconify-json/lucide": "^1.2.63",
|
|
45
|
-
"@iconify-json/solar": "^1.2.4",
|
|
46
|
-
"@iconify-json/vscode-icons": "^1.2.29",
|
|
47
|
-
"@unocss/transformer-directives": "^66.4.2",
|
|
48
|
-
"babel-plugin-solid-undestructure": "^1.1.0",
|
|
49
|
-
"rollup-plugin-visualizer": "^6.0.3",
|
|
50
|
-
"sass": "^1.90.0",
|
|
51
|
-
"tinyglobby": "^0.2.15",
|
|
52
|
-
"typescript": "~5.8.3",
|
|
53
|
-
"undestructure-macros": "^0.0.1",
|
|
54
|
-
"unocss": "^66.4.2",
|
|
55
|
-
"unplugin-auto-import": "^19.3.0",
|
|
56
|
-
"unplugin-icons": "^22.2.0",
|
|
57
|
-
"vite": "npm:rolldown-vite@7.1.12",
|
|
58
|
-
"vite-plugin-solid": "^2.11.8",
|
|
59
|
-
"vue": "^3.5.24"
|
|
60
|
-
},
|
|
61
42
|
"publishConfig": {
|
|
62
43
|
"access": "public",
|
|
63
44
|
"registry": "https://registry.npmjs.org/"
|
|
64
45
|
},
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"build": "vite build",
|
|
68
|
-
"build:lib": "node scripts/build.js",
|
|
69
|
-
"preview": "vite preview"
|
|
46
|
+
"devDependencies": {
|
|
47
|
+
"diff": "^8.0.2"
|
|
70
48
|
}
|
|
71
|
-
}
|
|
49
|
+
}
|
package/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 huodoushigemi
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
package/dist/demo.d.ts
DELETED
package/dist/demo.js
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { log } from "./utils.js";
|
|
2
|
-
import { Table } from "./index.js";
|
|
3
|
-
/* empty css */
|
|
4
|
-
/* empty css */
|
|
5
|
-
import { VirtualScrollPlugin } from "./plugins/VirtualScrollPlugin.js";
|
|
6
|
-
import { createComponent, delegateEvents, effect, insert, render, template } from "solid-js/web";
|
|
7
|
-
import { batch } from "solid-js";
|
|
8
|
-
import { createMutable, reconcile } from "solid-js/store";
|
|
9
|
-
import { range } from "es-toolkit";
|
|
10
|
-
var _tmpl$ = /* @__PURE__ */ template(`<input type=checkbox>`), _tmpl$2 = /* @__PURE__ */ template(`<button>xxx`), _tmpl$3 = /* @__PURE__ */ template(`<div class=p-6>`);
|
|
11
|
-
var root = document.getElementById("root");
|
|
12
|
-
var state = createMutable({ bool: true });
|
|
13
|
-
var cols = createMutable(range(5).map((e) => ({
|
|
14
|
-
name: "col_" + e,
|
|
15
|
-
id: "col_" + e,
|
|
16
|
-
width: 80
|
|
17
|
-
})));
|
|
18
|
-
var data = createMutable(range(100).map((e, i) => Object.fromEntries(cols.map((e$1) => [e$1.id, i + 1]))));
|
|
19
|
-
render(() => (() => {
|
|
20
|
-
var _el$ = _tmpl$();
|
|
21
|
-
_el$.addEventListener("change", (e) => state.bool = e.currentTarget.checked);
|
|
22
|
-
effect(() => _el$.checked = state.bool);
|
|
23
|
-
return _el$;
|
|
24
|
-
})(), root);
|
|
25
|
-
render(() => (() => {
|
|
26
|
-
var _el$2 = _tmpl$2();
|
|
27
|
-
_el$2.$$click = () => data[0].col_1 = "xxx";
|
|
28
|
-
return _el$2;
|
|
29
|
-
})(), root);
|
|
30
|
-
cols[0].editor = "select";
|
|
31
|
-
cols[0].enum = {
|
|
32
|
-
1: 1,
|
|
33
|
-
2: 2,
|
|
34
|
-
3: 3
|
|
35
|
-
};
|
|
36
|
-
cols.forEach((e) => (e.editable = true, e.editOnInput = true));
|
|
37
|
-
cols.at(-3).width = void 0;
|
|
38
|
-
cols.at(-1).width = void 0;
|
|
39
|
-
data.forEach((e) => e.g = e.col_0 % 10);
|
|
40
|
-
data.forEach((e) => e.n = e.col_0 % 3);
|
|
41
|
-
render(() => createComponent(Table, {
|
|
42
|
-
"class": "w-50vw! h-40vh of-auto",
|
|
43
|
-
get index() {
|
|
44
|
-
return state.bool;
|
|
45
|
-
},
|
|
46
|
-
get stickyHeader() {
|
|
47
|
-
return state.bool;
|
|
48
|
-
},
|
|
49
|
-
columns: cols,
|
|
50
|
-
onColumnsChange: (o) => reconcile(o)(cols),
|
|
51
|
-
data,
|
|
52
|
-
border: true,
|
|
53
|
-
plugins: [VirtualScrollPlugin],
|
|
54
|
-
onDataChange: (v) => batch(() => (data.length = 0, data.push(...v))),
|
|
55
|
-
expand: { render: ({ data: data$1 }) => (() => {
|
|
56
|
-
var _el$3 = _tmpl$3();
|
|
57
|
-
insert(_el$3, () => JSON.stringify(data$1));
|
|
58
|
-
return _el$3;
|
|
59
|
-
})() },
|
|
60
|
-
diff: { onCommit: (...arg) => log(arg) },
|
|
61
|
-
virtual: {},
|
|
62
|
-
rowSelection: {}
|
|
63
|
-
}), root);
|
|
64
|
-
delegateEvents(["click"]);
|
package/dist/vite.svg
DELETED
|
@@ -1 +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>
|