@dforge-core/diagram 0.0.1 → 0.0.3

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.
@@ -2,14 +2,17 @@
2
2
  Self-contained icon button used by the diagram toolbars.
3
3
 
4
4
  Deliberately minimal (and independent of `@dforge/ui`) so this package
5
- can be published standalone. Renders a Bootstrap Icons glyph, so the
6
- consuming app must load the `bootstrap-icons` font/CSS; colors come from
7
- Bootstrap CSS variables (`--bs-*`) for theme consistency.
5
+ can be published standalone. Renders an inline SVG glyph from the bundled
6
+ `icons.ts` registry no `bootstrap-icons` font/CSS required in the host.
7
+ Colors come from Bootstrap CSS variables (`--bs-*`) via `currentColor` for
8
+ theme consistency.
8
9
  -->
9
10
  <script lang="ts">
11
+ import { ICONS } from './icons.js';
12
+
10
13
  interface Props {
11
- /** Bootstrap Icons class name, e.g. `bi-plus-lg`. */
12
- icon: string;
14
+ /** Icon key from the registry, e.g. `bi-plus-lg`. */
15
+ icon: keyof typeof ICONS | (string & {});
13
16
  title: string;
14
17
  onclick?: (e: MouseEvent) => void;
15
18
  disabled?: boolean;
@@ -25,6 +28,8 @@
25
28
  size = 'sm',
26
29
  class: cls = '',
27
30
  }: Props = $props();
31
+
32
+ const path = $derived(ICONS[icon] ?? '');
28
33
  </script>
29
34
 
30
35
  <button
@@ -35,15 +40,33 @@
35
40
  {onclick}
36
41
  {disabled}
37
42
  >
38
- <i class="bi {icon}"></i>
43
+ <svg
44
+ class="icon-svg"
45
+ viewBox="0 0 16 16"
46
+ fill="currentColor"
47
+ aria-hidden="true"
48
+ focusable="false"
49
+ xmlns="http://www.w3.org/2000/svg"
50
+ >{@html path}</svg
51
+ >
39
52
  </button>
40
53
 
41
54
  <style>
42
55
  .icon-btn {
56
+ /* Clickable target size. Hosts can scale per-instance or globally by
57
+ overriding `--df-icon-btn-size` (e.g. style="--df-icon-btn-size: 2rem").
58
+ Size tiers below set sensible defaults. */
59
+ --df-icon-btn-size: 1.75rem;
43
60
  position: relative;
44
61
  display: inline-flex;
45
62
  align-items: center;
46
63
  justify-content: center;
64
+ /* WCAG 2.2 AA (SC 2.5.8): interactive target never below 24×24px,
65
+ even if a host overrides the variable smaller. */
66
+ min-width: 24px;
67
+ min-height: 24px;
68
+ width: var(--df-icon-btn-size);
69
+ height: var(--df-icon-btn-size);
47
70
  padding: 0;
48
71
  border: none;
49
72
  background: none;
@@ -53,6 +76,13 @@
53
76
  line-height: 1;
54
77
  text-decoration: none;
55
78
  }
79
+ /* Glyph scales with the tier `font-size` below, matching the old font icon.
80
+ `display: block` drops the inline baseline gap so it stays centered. */
81
+ .icon-svg {
82
+ width: 1em;
83
+ height: 1em;
84
+ display: block;
85
+ }
56
86
  .icon-btn:hover {
57
87
  background: var(--bs-tertiary-bg);
58
88
  color: var(--bs-body-color);
@@ -64,20 +94,19 @@
64
94
  color: var(--bs-secondary-color);
65
95
  }
66
96
 
67
- /* Size tiers */
97
+ /* Size tiers set the target size (`--df-icon-btn-size`) and the glyph
98
+ font-size independently — so a small control keeps a small glyph while
99
+ still meeting the 24px target floor. */
68
100
  .icon-btn-sm {
69
- width: 18px;
70
- height: 18px;
101
+ --df-icon-btn-size: 24px;
71
102
  font-size: 0.85em;
72
103
  }
73
104
  .icon-btn-md {
74
- width: 1.5rem;
75
- height: 1.5rem;
105
+ --df-icon-btn-size: 1.5rem;
76
106
  font-size: 1rem;
77
107
  }
78
108
  .icon-btn-lg {
79
- width: 1.75rem;
80
- height: 1.75rem;
109
+ --df-icon-btn-size: 1.75rem;
81
110
  font-size: 1.125rem;
82
111
  }
83
112
  </style>
@@ -1,6 +1,7 @@
1
+ import { ICONS } from './icons.js';
1
2
  interface Props {
2
- /** Bootstrap Icons class name, e.g. `bi-plus-lg`. */
3
- icon: string;
3
+ /** Icon key from the registry, e.g. `bi-plus-lg`. */
4
+ icon: keyof typeof ICONS | (string & {});
4
5
  title: string;
5
6
  onclick?: (e: MouseEvent) => void;
6
7
  disabled?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../src/lib/IconButton.svelte.ts"],"names":[],"mappings":"AAGC,UAAU,KAAK;IACd,qDAAqD;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAuBF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"IconButton.svelte.d.ts","sourceRoot":"","sources":["../src/lib/IconButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGlC,UAAU,KAAK;IACd,qDAAqD;IACrD,IAAI,EAAE,MAAM,OAAO,KAAK,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AA0BF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
@@ -42,7 +42,7 @@
42
42
  col('last_name', 'Last Name'),
43
43
  col('email', 'Email', { fieldTypeCd: 'email' }),
44
44
  col('company_id', 'Company', {
45
- columnType: 'R', fieldTypeCd: 'reference', baseDatatypeCd: 'number',
45
+ columnType: 'R', fieldTypeCd: 'lookup', baseDatatypeCd: 'number',
46
46
  refEntityId: COMPANY_ID, isNullable: true,
47
47
  }),
48
48
  ];
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Inline SVG icon registry for the diagram toolbars.
3
+ *
4
+ * Self-contained so this package needs no `bootstrap-icons` font/CSS in the
5
+ * consuming app. Each entry is the inner markup of a 16×16 `viewBox="0 0 16 16"`
6
+ * SVG using `fill="currentColor"`, so glyphs inherit the button's text color.
7
+ *
8
+ * Keys mirror the original Bootstrap Icons class names (e.g. `bi-plus-lg`) so
9
+ * existing `icon="bi-…"` call sites stay unchanged. Paths are copied verbatim
10
+ * from Bootstrap Icons (MIT).
11
+ */
12
+ export declare const ICONS: Record<string, string>;
13
+ //# sourceMappingURL=icons.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/lib/icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CASxC,CAAC"}
package/dist/icons.js ADDED
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Inline SVG icon registry for the diagram toolbars.
3
+ *
4
+ * Self-contained so this package needs no `bootstrap-icons` font/CSS in the
5
+ * consuming app. Each entry is the inner markup of a 16×16 `viewBox="0 0 16 16"`
6
+ * SVG using `fill="currentColor"`, so glyphs inherit the button's text color.
7
+ *
8
+ * Keys mirror the original Bootstrap Icons class names (e.g. `bi-plus-lg`) so
9
+ * existing `icon="bi-…"` call sites stay unchanged. Paths are copied verbatim
10
+ * from Bootstrap Icons (MIT).
11
+ */
12
+ export const ICONS = {
13
+ 'bi-plus-lg': '<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/>',
14
+ 'bi-dash-lg': '<path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8"/>',
15
+ 'bi-fullscreen': '<path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5"/>',
16
+ 'bi-arrow-counterclockwise': '<path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/><path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/>',
17
+ };
@@ -1,3 +1,4 @@
1
+ import type { BaseDatatypeCd, ColumnTypeCd, FieldTypeCd } from '@dforge-core/metadata';
1
2
  export interface ModelGetResponse {
2
3
  modules: ModelModule[];
3
4
  }
@@ -38,11 +39,11 @@ export interface ModelConstraint {
38
39
  export interface ModelColumn {
39
40
  columnCd: string;
40
41
  description?: string;
41
- columnType?: string;
42
+ columnType?: ColumnTypeCd;
42
43
  isPk: boolean;
43
44
  isNullable?: boolean;
44
- fieldTypeCd?: string;
45
- baseDatatypeCd: string;
45
+ fieldTypeCd?: FieldTypeCd;
46
+ baseDatatypeCd: BaseDatatypeCd;
46
47
  maxLen?: number;
47
48
  precision?: number;
48
49
  flags?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"model-types.d.ts","sourceRoot":"","sources":["../src/lib/model-types.ts"],"names":[],"mappings":"AAWA,MAAM,WAAW,gBAAgB;IAChC,OAAO,EAAE,WAAW,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,WAAW;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,WAAW;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,WAAW,EAAE,eAAe,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,eAAe;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB"}
1
+ {"version":3,"file":"model-types.d.ts","sourceRoot":"","sources":["../src/lib/model-types.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEvF,MAAM,WAAW,gBAAgB;IAChC,OAAO,EAAE,WAAW,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,WAAW;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,WAAW;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,WAAW,EAAE,eAAe,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,eAAe;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,cAAc,EAAE,cAAc,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB"}
@@ -7,5 +7,13 @@
7
7
  //
8
8
  // TypeScript is structurally typed, so SDK-produced objects can still be
9
9
  // passed directly into these components. Keep the shapes in sync with
10
- // `clients/packages/sdk/src/types/metadata.ts`.
10
+ // `clients/packages/sdk/src/types/metadata.ts` — drift between the two is
11
+ // caught at type-check time by the compat guard at
12
+ // `clients/apps/dforge/src/lib/type-tests/diagram-sdk-compat.ts`
13
+ // (runs via the root `pnpm check`).
14
+ //
15
+ // The scalar code fields (`columnType`, `fieldTypeCd`, `baseDatatypeCd`) are
16
+ // the canonical enums from `@dforge-core/metadata` — the same source the SDK
17
+ // uses — so both sides of the compat guard reference one definition. The import
18
+ // is type-only and erased at build, so the package ships no runtime dependency.
11
19
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dforge-core/diagram",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "description": "Entity-relationship and workspace diagram components for dForge models. Standalone Svelte 5 library with no dForge runtime dependencies.",
5
5
  "license": "MIT",
6
6
  "author": "dForge",
@@ -38,6 +38,9 @@
38
38
  "files": [
39
39
  "dist"
40
40
  ],
41
+ "dependencies": {
42
+ "@dforge-core/metadata": "0.0.2"
43
+ },
41
44
  "peerDependencies": {
42
45
  "svelte": "^5.0.0"
43
46
  },