@dineug/erd-editor 4.1.0 → 5.0.0

package/dist/components/primitives/icon/icons.d.ts

@@ -9,6 +9,7 @@ declare const LUCIDE_ICON: {
     'arrow-right': IconNode;
     'arrow-up': IconNode;
     atom: IconNode;
+    'book-type': IconNode;
     braces: IconNode;
     brackets: IconNode;
     'case-sensitive': IconNode;
@@ -32,6 +33,7 @@ declare const LUCIDE_ICON: {
     folder: IconNode;
     'folder-open': IconNode;
     fullscreen: IconNode;
+    'funnel-x': IconNode;
     'grip-vertical': IconNode;
     group: IconNode;
     hand: IconNode;
@@ -40,7 +42,9 @@ declare const LUCIDE_ICON: {
     languages: IconNode;
     link: IconNode;
     list: IconNode;
+    'list-plus': IconNode;
     'list-tree': IconNode;
+    'list-x': IconNode;
     'loader-circle': IconNode;
     lock: IconNode;
     'lock-open': IconNode;
@@ -77,6 +81,7 @@ declare const LUCIDE_ICON: {
     'triangle-alert': IconNode;
     'undo-2': IconNode;
     ungroup: IconNode;
+    upload: IconNode;
     'wand-sparkles': IconNode;
     waypoints: IconNode;
     'whole-word': IconNode;

package/dist/components/primitives/icon/icons.js

@@ -0,0 +1,156 @@
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Atom, BookType, Braces, Brackets, CaseSensitive, CaseUpper, Check, ChevronDown, ChevronRight, ChevronsDownUp, Code, Contrast, Copy, Database, Download, Ellipsis, ExternalLink, Eye, FileDiff, FileImage, FileInput, FileOutput, Folder, FolderOpen, Fullscreen, FunnelX, GripVertical, Group, Hand, KeyRound, Keyboard, Languages, Link, List, ListPlus, ListTree, ListX, LoaderCircle, Lock, LockOpen, Logs, Maximize, MessageSquare, Minimize, Minus, Monitor, MoonStar, MousePointer2, Network, Palette, PanelRight, PanelRightClose, PanelRightOpen, Pencil, Pipette, Plus, Redo2, RefreshCw, Regex, Replace, ReplaceAll, RotateCcwClock, Search, Settings, Share2, Spline, StickyNote, Sun, Table2, TableProperties, TriangleAlert, Undo2, Ungroup, Upload, WandSparkles, Waypoints, WholeWord, Workflow, X } from "lucide";
+//#region src/components/primitives/icon/icons.ts
+var ICON_VIEW_BOX = "0 0 24 24";
+var LUCIDE_ICON = {
+	"arrow-down": ArrowDown,
+	"arrow-left": ArrowLeft,
+	"arrow-right": ArrowRight,
+	"arrow-up": ArrowUp,
+	atom: Atom,
+	"book-type": BookType,
+	braces: Braces,
+	brackets: Brackets,
+	"case-sensitive": CaseSensitive,
+	"case-upper": CaseUpper,
+	check: Check,
+	"chevron-down": ChevronDown,
+	"chevron-right": ChevronRight,
+	"chevrons-down-up": ChevronsDownUp,
+	code: Code,
+	contrast: Contrast,
+	copy: Copy,
+	database: Database,
+	download: Download,
+	ellipsis: Ellipsis,
+	"external-link": ExternalLink,
+	eye: Eye,
+	"file-diff": FileDiff,
+	"file-image": FileImage,
+	"file-input": FileInput,
+	"file-output": FileOutput,
+	folder: Folder,
+	"folder-open": FolderOpen,
+	fullscreen: Fullscreen,
+	"funnel-x": FunnelX,
+	"grip-vertical": GripVertical,
+	group: Group,
+	hand: Hand,
+	keyboard: Keyboard,
+	"key-round": KeyRound,
+	languages: Languages,
+	link: Link,
+	list: List,
+	"list-plus": ListPlus,
+	"list-tree": ListTree,
+	"list-x": ListX,
+	"loader-circle": LoaderCircle,
+	lock: Lock,
+	"lock-open": LockOpen,
+	logs: Logs,
+	maximize: Maximize,
+	"message-square": MessageSquare,
+	minimize: Minimize,
+	minus: Minus,
+	monitor: Monitor,
+	"moon-star": MoonStar,
+	"mouse-pointer-2": MousePointer2,
+	network: Network,
+	palette: Palette,
+	"panel-right": PanelRight,
+	"panel-right-close": PanelRightClose,
+	"panel-right-open": PanelRightOpen,
+	pencil: Pencil,
+	pipette: Pipette,
+	plus: Plus,
+	"redo-2": Redo2,
+	"refresh-cw": RefreshCw,
+	regex: Regex,
+	replace: Replace,
+	"replace-all": ReplaceAll,
+	"rotate-ccw-clock": RotateCcwClock,
+	search: Search,
+	settings: Settings,
+	"share-2": Share2,
+	spline: Spline,
+	"sticky-note": StickyNote,
+	sun: Sun,
+	"table-2": Table2,
+	"table-properties": TableProperties,
+	"triangle-alert": TriangleAlert,
+	"undo-2": Undo2,
+	ungroup: Ungroup,
+	upload: Upload,
+	"wand-sparkles": WandSparkles,
+	waypoints: Waypoints,
+	"whole-word": WholeWord,
+	workflow: Workflow,
+	x: X
+};
+var NOTATION_ICON = {
+	ZeroOneN: [
+		["circle", {
+			cx: "7",
+			cy: "12",
+			r: "5"
+		}],
+		["path", { d: "M12 12h10" }],
+		["path", { d: "M15 6v12" }],
+		["path", { d: "M16 12l6-6" }],
+		["path", { d: "M16 12l6 6" }]
+	],
+	ZeroOne: [
+		["path", { d: "M2 12h3" }],
+		["circle", {
+			cx: "10",
+			cy: "12",
+			r: "5"
+		}],
+		["path", { d: "M15 12h7" }],
+		["path", { d: "M20 6v12" }]
+	],
+	ZeroN: [
+		["path", { d: "M2 12h3" }],
+		["circle", {
+			cx: "10",
+			cy: "12",
+			r: "5"
+		}],
+		["path", { d: "M15 12h7" }],
+		["path", { d: "M15 12l7-6" }],
+		["path", { d: "M15 12l7 6" }]
+	],
+	OneOnly: [
+		["path", { d: "M2 12h20" }],
+		["path", { d: "M14 6v12" }],
+		["path", { d: "M19 6v12" }]
+	],
+	OneN: [
+		["path", { d: "M2 12h20" }],
+		["path", { d: "M14 6v12" }],
+		["path", { d: "M15 12l7-6" }],
+		["path", { d: "M15 12l7 6" }]
+	],
+	One: [["path", { d: "M2 12h20" }], ["path", { d: "M14 6v12" }]],
+	N: [
+		["path", { d: "M2 12h20" }],
+		["path", { d: "M15 12l7-6" }],
+		["path", { d: "M15 12l7 6" }]
+	]
+};
+var iconMap = {};
+setIconMap();
+function setIconMap() {
+	for (const name of Object.keys(LUCIDE_ICON)) iconMap[name] = {
+		name,
+		node: LUCIDE_ICON[name]
+	};
+	for (const name of Object.keys(NOTATION_ICON)) iconMap[name] = {
+		name,
+		node: NOTATION_ICON[name]
+	};
+}
+function getIcon(name) {
+	return iconMap[name];
+}
+//#endregion
+export { ICON_VIEW_BOX, NOTATION_ICON, getIcon, iconMap };

package/dist/components/primitives/kbd/Kbd.js

@@ -0,0 +1,12 @@
+import { shortcutToTuple } from "../../../utils/keyboard-shortcut/index.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { kbd, mini, root } from "./Kbd.styles.js";
+//#region src/components/primitives/kbd/Kbd.tsx
+var Kbd = (props, ctx) => {
+	return () => {
+		const shortcuts = shortcutToTuple(props.shortcut).map(([mods, key]) => [...mods, key].join(" + "));
+		return html`<div class=${["kbd", root]} .dir="ltr">${shortcuts.map((shortcut) => html`<div class=${props.mini ? mini : kbd}>${shortcut}</div>`)}</div>`;
+	};
+};
+//#endregion
+export { Kbd as default };

package/dist/components/primitives/kbd/Kbd.styles.js

@@ -0,0 +1,44 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { typography } from "../../../styles/typography.styles.js";
+//#region src/components/primitives/kbd/Kbd.styles.ts
+var root = css`
+  display: flex;
+  width: fit-content;
+`;
+var kbd = css`
+  display: inline-flex;
+  align-items: center;
+
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  padding-bottom: 0.05em;
+  margin-right: 4px;
+  ${typography.paragraph};
+
+  white-space: nowrap;
+  color: var(--foreground);
+  border: 1px solid var(--foreground);
+  border-radius: 3px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+`;
+var mini = css`
+  padding-left: 0.25em;
+  padding-right: 0.25em;
+  padding-bottom: 0.05em;
+  margin-right: 2px;
+  font-size: 10px;
+
+  white-space: nowrap;
+  color: var(--placeholder);
+  border: 1px solid var(--placeholder);
+  border-radius: 3px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+`;
+//#endregion
+export { kbd, mini, root };

package/dist/components/primitives/sash/Sash.js

@@ -0,0 +1,46 @@
+import { html } from "../../../r-html/dist/render/index.js";
+import { sash } from "./Sash.styles.js";
+import { drag$ } from "../../../utils/globalEventObservable.js";
+//#region src/components/primitives/sash/Sash.tsx
+var SashType = {
+	vertical: "vertical",
+	horizontal: "horizontal",
+	edge: "edge"
+};
+var Sash = (props, ctx) => {
+	const centerTop = () => {
+		const top = props.top ?? 0;
+		return top === 0 && props.type === SashType.vertical ? top : top - 5 / 2;
+	};
+	const centerLeft = () => {
+		const left = props.left ?? 0;
+		return left === 0 && props.type === SashType.horizontal ? left : left - 5 / 2;
+	};
+	const handleMousedown = (event) => {
+		props.onMousedown?.(event);
+		drag$.subscribe((dragMove) => {
+			dragMove.event.type === "mousemove" && dragMove.event.preventDefault();
+			props.onMove?.(dragMove);
+		});
+	};
+	return () => {
+		const vertical = props.type === SashType.vertical;
+		const horizontal = props.type === SashType.horizontal;
+		const edge = props.type === SashType.edge;
+		return html`<div class=${[
+			"sash",
+			sash,
+			{
+				vertical,
+				horizontal,
+				edge
+			}
+		]} style=${{
+			top: `${centerTop()}px`,
+			left: `${centerLeft()}px`,
+			cursor: edge ? props.cursor : ""
+		}} @mousedown=${handleMousedown} @dblclick=${(event) => props.onDblclick?.(event)}></div>`;
+	};
+};
+//#endregion
+export { SashType, Sash as default };

package/dist/components/primitives/sash/Sash.styles.js

@@ -0,0 +1,23 @@
+import { css } from "../../../r-html/dist/template/css.js";
+var sash = css`
+  position: absolute;
+
+  &.vertical {
+    width: ${5}px;
+    height: 100%;
+    cursor: ew-resize;
+  }
+
+  &.horizontal {
+    width: 100%;
+    height: ${5}px;
+    cursor: ns-resize;
+  }
+
+  &.edge {
+    width: ${5}px;
+    height: ${5}px;
+  }
+`;
+//#endregion
+export { sash };

package/dist/components/primitives/select/Select.js

@@ -0,0 +1,6 @@
+import { html } from "../../../r-html/dist/render/index.js";
+import Icon from "../icon/Icon.js";
+import { chevron, root } from "./Select.styles.js";
+var Select = (props) => () => html`<div class=${[root, props.class]} ?data-dimmed=${props.dimmed}>${props.children}<span class=${chevron} aria-hidden="true"><${Icon} .name="chevron-down" .size=${14} /></span></div>`;
+//#endregion
+export { Select as default };

package/dist/components/primitives/select/Select.styles.js

@@ -0,0 +1,59 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { typography } from "../../../styles/typography.styles.js";
+//#region src/components/primitives/select/Select.styles.ts
+var chevron = css`
+  grid-area: 1 / 1;
+  justify-self: end;
+  display: flex;
+  margin-inline-end: 7px;
+  pointer-events: none;
+`;
+var root = css`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  color: var(--active);
+
+  &[data-dimmed] {
+    color: var(--placeholder);
+  }
+
+  & > select {
+    grid-area: 1 / 1;
+    width: 100%;
+    min-width: 0;
+    height: 28px;
+    margin: 0;
+    padding-block: 0;
+    padding-inline: 8px 26px;
+    appearance: none;
+    border: 1px solid var(--context-menu-border);
+    border-radius: 4px;
+    color: inherit;
+    background-color: var(--context-menu-background);
+    text-overflow: ellipsis;
+    ${typography.paragraph};
+  }
+
+  & > select:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: 1px;
+  }
+
+  & > select:disabled,
+  & > select:disabled + ${chevron} {
+    color: var(--placeholder);
+  }
+
+  @media (forced-colors: active) {
+    & > ${chevron} {
+      color: FieldText;
+    }
+
+    & > select:disabled + ${chevron} {
+      color: GrayText;
+    }
+  }
+`;
+//#endregion
+export { chevron, root };

package/dist/components/primitives/separator/Separator.js

@@ -0,0 +1,14 @@
+import { html } from "../../../r-html/dist/render/index.js";
+import { horizontal, separator } from "./Separator.styles.js";
+//#region src/components/primitives/separator/Separator.tsx
+var Separator = (props, ctx) => {
+	return () => html`<div style=${{
+		"padding-left": `${props.padding ?? 0}px`,
+		"padding-right": `${props.padding ?? 0}px`
+	}}><div class=${[separator, horizontal]} style=${{
+		"margin-top": `${props.space ?? 0}px`,
+		"margin-bottom": `${props.space ?? 0}px`
+	}}></div></div>`;
+};
+//#endregion
+export { Separator as default };

package/dist/components/primitives/separator/Separator.styles.js

@@ -0,0 +1,11 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/primitives/separator/Separator.styles.ts
+var separator = css`
+  background-color: var(--gray-color-6);
+`;
+var horizontal = css`
+  width: 100%;
+  height: 1px;
+`;
+//#endregion
+export { horizontal, separator };

package/dist/components/primitives/slider/Slider.js

@@ -0,0 +1,42 @@
+import { html } from "../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { drag$ } from "../../../utils/globalEventObservable.js";
+import { range as range$1, root, thumb, track } from "./Slider.styles.js";
+import { clamp } from "es-toolkit";
+import { round } from "es-toolkit/compat";
+//#region src/components/primitives/slider/Slider.tsx
+var Slider = (props, ctx) => {
+	const root$1 = createRef();
+	const clientXToValue = (clientX) => {
+		const rect = root$1.value.getBoundingClientRect();
+		const x = clientX - rect.x;
+		const ratioValue = round(x / rect.width, 2);
+		const max = props.max - props.min;
+		const inRange = (value) => clamp(value, props.min, props.max);
+		return inRange(round(max * ratioValue) + props.min);
+	};
+	const handleMove = ({ event, x }) => {
+		event.type === "mousemove" && event.preventDefault();
+		const value = clientXToValue(x);
+		if (value !== props.value) props.onChange(value);
+	};
+	const handleMoveStart = (event) => {
+		drag$.subscribe(handleMove);
+	};
+	const handleMousedown = (event) => {
+		const value = clientXToValue(event.clientX);
+		if (value !== props.value) props.onChange(value);
+		handleMoveStart(event);
+	};
+	return () => {
+		const max = props.max - props.min;
+		const value = props.value - props.min;
+		const ratioValue = round(value / max, 2);
+		const percent = ratioValue * 100;
+		const right = `${100 - percent}%`;
+		const left = `calc(${percent}% - ${12 * ratioValue}px)`;
+		return html`<div class=${root} .dir="ltr" ${ref(root$1)} @mousedown=${handleMousedown}><div class=${track}><div class=${range$1} style=${{ right }}></div></div><div class=${thumb} style=${{ left }} @mousedown=${handleMoveStart}></div></div>`;
+	};
+};
+//#endregion
+export { Slider as default };

package/dist/components/primitives/slider/Slider.styles.js

@@ -0,0 +1,58 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/primitives/slider/Slider.styles.ts
+var root = css`
+  display: flex;
+  width: 100%;
+  height: 12px;
+  position: relative;
+  align-items: center;
+  user-select: none;
+  touch-action: none;
+`;
+var track = css`
+  width: 100%;
+  height: 8px;
+  background-color: var(--gray-color-3);
+  box-shadow: inset 0 0 0 1px var(--gray-color-6);
+  overflow: hidden;
+  position: relative;
+  border-radius: 9999px;
+`;
+var range = css`
+  position: absolute;
+  border-radius: inherit;
+  background-color: var(--accent-color-9);
+  box-shadow: inset 0 0 0 1px var(--gray-color-6);
+  top: 0;
+  width: 100%;
+  height: 100%;
+`;
+var thumb = css`
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background-color: white;
+  border-radius: 9999px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: calc(12px * 3);
+    height: calc(12px * 3);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    background-color: white;
+    border-radius: 9999px;
+    inset: calc(-0.25 * 8px);
+    box-shadow: inset 0 0 0 1px var(--gray-color-6);
+    cursor: pointer;
+  }
+`;
+//#endregion
+export { range, root, thumb, track };

package/dist/components/primitives/switch/Switch.d.ts

@@ -2,6 +2,8 @@ import { FC } from '@dineug/r-html';
 export type SwitchProps = {
     size?: '1' | '2' | '3';
     value: boolean;
+    /** Shows the value and takes no press, as a field a reader may not change does. */
+    disabled?: boolean;
     onChange: (value: boolean) => void;
 };
 declare const Switch: FC<SwitchProps>;

package/dist/components/primitives/switch/Switch.js

@@ -0,0 +1,11 @@
+import { html } from "../../../r-html/dist/render/index.js";
+import { Switch_styles_exports, switchButton, switchThumb } from "./Switch.styles.js";
+//#region src/components/primitives/switch/Switch.tsx
+var Switch = (props, ctx) => {
+	const handleChange = () => {
+		props.onChange(!props.value);
+	};
+	return () => html`<button class=${[switchButton, Reflect.get(Switch_styles_exports, `size${props.size ?? "2"}`)]} type="button" .dir="ltr" role="switch" aria-checked=${props.value ? "true" : "false"} data-checked=${props.value} ?disabled=${props.disabled} @click=${props.disabled ? null : handleChange}><span class=${switchThumb} ?data-checked=${props.value}></span></button>`;
+};
+//#endregion
+export { Switch as default };

package/dist/components/primitives/switch/Switch.styles.js

@@ -0,0 +1,117 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/primitives/switch/Switch.styles.ts
+var Switch_styles_exports = /* @__PURE__ */ __exportAll({
+	size1: () => size1,
+	size2: () => size2,
+	size3: () => size3,
+	switchButton: () => switchButton,
+	switchThumb: () => switchThumb
+});
+var switchButton = css`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  outline: none;
+  border-radius: 9999px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    transition: background-position, background-color, box-shadow, filter;
+    transition-timing-function: linear, ease-in-out, ease-in-out, ease-in-out;
+    background-repeat: no-repeat;
+    background-color: var(--gray-color-3);
+    background-image: linear-gradient(
+      to right,
+      var(--accent-color-9) 40%,
+      transparent 60%
+    );
+    box-shadow: inset 0 0 0 1px var(--gray-color-6);
+  }
+
+  &[data-checked='true']::before {
+    transition-duration: 0.16s, 0.14s, 0.14s, 0.14s;
+    background-position: 0;
+  }
+
+  &[data-checked='false']::before {
+    transition-duration: 0.12s, 0.14s, 0.14s, 0.14s;
+    background-position-x: 100%;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+var size1 = css`
+  width: 28px;
+  height: 16px;
+
+  &::before {
+    background-size: calc(28px * 2 + 16px) 100%;
+  }
+
+  & > span {
+    width: 14px;
+    height: 14px;
+  }
+
+  & > span[data-checked] {
+    transform: translateX(calc(28px - 14px - 1px));
+  }
+`;
+var size2 = css`
+  width: 35px;
+  height: 20px;
+
+  &::before {
+    background-size: calc(35px * 2 + 20px) 100%;
+  }
+
+  & > span {
+    width: 18px;
+    height: 18px;
+  }
+
+  & > span[data-checked] {
+    transform: translateX(calc(35px - 18px - 1px));
+  }
+`;
+var size3 = css`
+  width: 42px;
+  height: 24px;
+
+  &::before {
+    background-size: calc(42px * 2 + 24px) 100%;
+  }
+
+  & > span {
+    width: 22px;
+    height: 22px;
+  }
+
+  & > span[data-checked] {
+    transform: translateX(calc(42px - 22px - 1px));
+  }
+`;
+var switchThumb = css`
+  background-color: #fff;
+  position: relative;
+  border-radius: 9999px;
+  box-shadow:
+    0 0 1px 1px rgba(0, 0, 0, 0.1),
+    0 1px 1px rgba(0, 0, 0, 0.05),
+    0 2px 4px -1px rgba(0, 0, 0, 0.15);
+  transition:
+    transform 0.14s cubic-bezier(0.45, 0.05, 0.55, 0.95),
+    box-shadow 0.14s ease-in-out;
+  transform: translateX(1px);
+`;
+//#endregion
+export { Switch_styles_exports, size1, size2, size3, switchButton, switchThumb };

package/dist/components/primitives/text-input/TextInput.js

@@ -0,0 +1,25 @@
+import { onMounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { restAttrs } from "../../../utils/attribute.js";
+import { onNumberOnly } from "../../../utils/domEvent.js";
+import { lastCursorFocus } from "../../../utils/focus.js";
+//#region src/components/primitives/text-input/TextInput.tsx
+var directionOf = ({ dir, value }) => dir ? { dir: value ? dir : "" } : {};
+var TextInput = (props, ctx) => {
+	const input = createRef();
+	onMounted(() => {
+		const $input = input.value;
+		if (!props.autofocus || !$input) return;
+		lastCursorFocus($input);
+	});
+	return () => html`<input ${ref(input)} class=${props.class} style=${{ width: props.width ? `${props.width}px` : "" }} ...${{
+		...restAttrs({
+			title: props.title,
+			placeholder: props.placeholder
+		}),
+		...directionOf(props)
+	}} type="text" spellcheck="false" ?readonly=${props.readonly} ?disabled=${props.disabled} .value=${props.value ?? ""} @input=${props.numberOnly ? onNumberOnly : null} @input=${props.onInput} @change=${props.onChange} @blur=${props.onBlur} @keyup=${props.onKeyup} @keydown=${props.onKeydown} />`;
+};
+//#endregion
+export { TextInput as default };