@cratis/components 4.26.0 → 4.26.1
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/compat-manifest.json +11 -11
- package/dist/esm/SchemaEditor/Tree/PropertyTypeBadge.d.ts.map +1 -1
- package/dist/esm/SchemaEditor/Tree/PropertyTypeBadge.js +3 -2
- package/dist/esm/SchemaEditor/Tree/PropertyTypeBadge.js.map +1 -1
- package/dist/esm/SchemaEditor/Tree/PropertyTypeGlyph.d.ts +12 -0
- package/dist/esm/SchemaEditor/Tree/PropertyTypeGlyph.d.ts.map +1 -0
- package/dist/esm/SchemaEditor/Tree/PropertyTypeGlyph.js +29 -0
- package/dist/esm/SchemaEditor/Tree/PropertyTypeGlyph.js.map +1 -0
- package/dist/esm/SchemaEditor/Tree/PropertyTypeMenu.d.ts.map +1 -1
- package/dist/esm/SchemaEditor/Tree/PropertyTypeMenu.js +4 -3
- package/dist/esm/SchemaEditor/Tree/PropertyTypeMenu.js.map +1 -1
- package/dist/esm/SchemaEditor/Tree/propertyTypeDisplay.d.ts +0 -2
- package/dist/esm/SchemaEditor/Tree/propertyTypeDisplay.d.ts.map +1 -1
- package/dist/esm/SchemaEditor/Tree/propertyTypeDisplay.js +1 -12
- package/dist/esm/SchemaEditor/Tree/propertyTypeDisplay.js.map +1 -1
- package/dist/esm/styles.SchemaEditor.css +58 -13
- package/dist/esm/styles.css +58 -13
- package/package.json +1 -1
package/compat-manifest.json
CHANGED
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
{
|
|
69
69
|
"name": "@cratis/components",
|
|
70
70
|
"role": "core",
|
|
71
|
-
"version": "4.26.
|
|
71
|
+
"version": "4.26.1",
|
|
72
72
|
"releaseMajorRange": ">=4 <5",
|
|
73
73
|
"independentRelease": false,
|
|
74
74
|
"private": false,
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
{
|
|
93
93
|
"name": "@cratis/eslint-plugin-components",
|
|
94
94
|
"role": "eslint",
|
|
95
|
-
"version": "4.26.
|
|
95
|
+
"version": "4.26.1",
|
|
96
96
|
"releaseMajorRange": ">=4 <5",
|
|
97
97
|
"independentRelease": false,
|
|
98
98
|
"private": false,
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
{
|
|
106
106
|
"name": "@cratis/components.migrator",
|
|
107
107
|
"role": "migrator",
|
|
108
|
-
"version": "4.26.
|
|
108
|
+
"version": "4.26.1",
|
|
109
109
|
"releaseMajorRange": ">=4 <5",
|
|
110
110
|
"independentRelease": false,
|
|
111
111
|
"private": false,
|
|
@@ -116,13 +116,13 @@
|
|
|
116
116
|
{
|
|
117
117
|
"name": "@cratis/components.conformance",
|
|
118
118
|
"role": "conformance",
|
|
119
|
-
"version": "4.26.
|
|
119
|
+
"version": "4.26.1",
|
|
120
120
|
"releaseMajorRange": ">=4 <5",
|
|
121
121
|
"independentRelease": false,
|
|
122
122
|
"private": false,
|
|
123
123
|
"packageAccess": "public",
|
|
124
124
|
"peerDependencies": {
|
|
125
|
-
"@cratis/components": "4.26.
|
|
125
|
+
"@cratis/components": "4.26.1",
|
|
126
126
|
"react": "^19.0.0",
|
|
127
127
|
"react-dom": "^19.0.0"
|
|
128
128
|
},
|
|
@@ -132,13 +132,13 @@
|
|
|
132
132
|
{
|
|
133
133
|
"name": "@cratis/components.mui",
|
|
134
134
|
"role": "renderer-adapter",
|
|
135
|
-
"version": "4.26.
|
|
135
|
+
"version": "4.26.1",
|
|
136
136
|
"releaseMajorRange": ">=4 <5",
|
|
137
137
|
"independentRelease": false,
|
|
138
138
|
"private": false,
|
|
139
139
|
"packageAccess": "public",
|
|
140
140
|
"peerDependencies": {
|
|
141
|
-
"@cratis/components": "4.26.
|
|
141
|
+
"@cratis/components": "4.26.1",
|
|
142
142
|
"@emotion/react": ">=11.5 <12",
|
|
143
143
|
"@emotion/styled": ">=11.11 <12",
|
|
144
144
|
"@mui/material": ">=9 <10",
|
|
@@ -188,13 +188,13 @@
|
|
|
188
188
|
{
|
|
189
189
|
"name": "@cratis/components.primereact",
|
|
190
190
|
"role": "renderer-adapter",
|
|
191
|
-
"version": "4.26.
|
|
191
|
+
"version": "4.26.1",
|
|
192
192
|
"releaseMajorRange": ">=4 <5",
|
|
193
193
|
"independentRelease": false,
|
|
194
194
|
"private": false,
|
|
195
195
|
"packageAccess": "public",
|
|
196
196
|
"peerDependencies": {
|
|
197
|
-
"@cratis/components": "4.26.
|
|
197
|
+
"@cratis/components": "4.26.1",
|
|
198
198
|
"@primereact/core": ">=11 <12",
|
|
199
199
|
"@primereact/ui": ">=11 <12",
|
|
200
200
|
"@primeuix/themes": ">=3 <4",
|
|
@@ -256,13 +256,13 @@
|
|
|
256
256
|
{
|
|
257
257
|
"name": "@cratis/components.primereact10",
|
|
258
258
|
"role": "renderer-adapter",
|
|
259
|
-
"version": "4.26.
|
|
259
|
+
"version": "4.26.1",
|
|
260
260
|
"releaseMajorRange": ">=4 <5",
|
|
261
261
|
"independentRelease": false,
|
|
262
262
|
"private": false,
|
|
263
263
|
"packageAccess": "public",
|
|
264
264
|
"peerDependencies": {
|
|
265
|
-
"@cratis/components": "4.26.
|
|
265
|
+
"@cratis/components": "4.26.1",
|
|
266
266
|
"primereact": ">=10.9.9 <11",
|
|
267
267
|
"react": "^19.0.0",
|
|
268
268
|
"react-dom": "^19.0.0"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PropertyTypeBadge.d.ts","sourceRoot":"","sources":["../../../../SchemaEditor/Tree/PropertyTypeBadge.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAY,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAAuB,CAAC;AAChE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,wBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"PropertyTypeBadge.d.ts","sourceRoot":"","sources":["../../../../SchemaEditor/Tree/PropertyTypeBadge.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAY,CAAC;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAAuB,CAAC;AAChE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,wBAAqB,CAAC;AAItE,8CAA8C;AAC9C,MAAM,WAAW,sBAAsB;IACnC,wCAAwC;IACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAE7C,2BAA2B;IAC3B,MAAM,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IAErC,uCAAuC;IACvC,IAAI,CAAC,EAAE,0BAA0B,CAAC,eAAe,CAAC,CAAC;IAEnD,sGAAsG;IACtG,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,2CAA4C,sBAAsB,gCAkB/F,CAAC"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useId } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { propertyTypeName } from './propertyTypeDisplay.js';
|
|
4
|
+
import { PropertyTypeGlyph } from './PropertyTypeGlyph.js';
|
|
4
5
|
|
|
5
6
|
const PropertyTypeBadge = ({ property, labels, part, lockReason }) => {
|
|
6
7
|
const reasonId = useId();
|
|
7
|
-
return (jsxs("span", { ...part, title: lockReason ?? part?.title, "aria-describedby": lockReason ? reasonId : part?.['aria-describedby'], className: `cratis-schema-editor__badge ${part?.className ?? ''}`, "data-cratis-part": 'badge', "data-property-type": property.type, "data-locked": lockReason ? true : undefined, children: [jsx(
|
|
8
|
+
return (jsxs("span", { ...part, title: lockReason ?? part?.title, "aria-describedby": lockReason ? reasonId : part?.['aria-describedby'], className: `cratis-schema-editor__badge ${part?.className ?? ''}`, "data-cratis-part": 'badge', "data-property-type": property.type, "data-concept": property.concept ? true : undefined, "data-locked": lockReason ? true : undefined, children: [jsx(PropertyTypeGlyph, { type: property.type }), jsx("span", { className: 'cratis-schema-editor__badge-name', children: property.concept ?? propertyTypeName(property.type, labels) }), lockReason && jsx("span", { id: reasonId, className: 'cratis-schema-editor__visually-hidden', children: lockReason })] }));
|
|
8
9
|
};
|
|
9
10
|
|
|
10
11
|
export { PropertyTypeBadge };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PropertyTypeBadge.js","sources":["../../../../SchemaEditor/Tree/PropertyTypeBadge.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useId } from 'react';\nimport type { Property } from './Property';\nimport type { SchemaEditorLabels } from '../SchemaEditorLabels';\nimport type { SchemaEditorPartAttributes } from './SchemaEditorParts';\nimport {
|
|
1
|
+
{"version":3,"file":"PropertyTypeBadge.js","sources":["../../../../SchemaEditor/Tree/PropertyTypeBadge.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useId } from 'react';\nimport type { Property } from './Property';\nimport type { SchemaEditorLabels } from '../SchemaEditorLabels';\nimport type { SchemaEditorPartAttributes } from './SchemaEditorParts';\nimport { propertyTypeName } from './propertyTypeDisplay';\nimport { PropertyTypeGlyph } from './PropertyTypeGlyph';\n\n/** Props for the type badge of a property. */\nexport interface PropertyTypeBadgeProps {\n /** The property whose type is shown. */\n property: Pick<Property, 'type' | 'concept'>;\n\n /** The resolved labels. */\n labels: Required<SchemaEditorLabels>;\n\n /** Attributes for the `badge` part. */\n part?: SchemaEditorPartAttributes<HTMLSpanElement>;\n\n /** Why the type is locked; shown as the badge's tooltip and exposed as its accessible description. */\n lockReason?: string;\n}\n\n/**\n * Shows what a property is typed as: a short glyph for the primitive, followed by the concept's name when the\n * property is typed as a concept, or the type's name when it is not. The glyph is decorative.\n */\nexport const PropertyTypeBadge = ({ property, labels, part, lockReason }: PropertyTypeBadgeProps) => {\n const reasonId = useId();\n return (\n <span\n {...part}\n title={lockReason ?? part?.title}\n aria-describedby={lockReason ? reasonId : part?.['aria-describedby']}\n className={`cratis-schema-editor__badge ${part?.className ?? ''}`}\n data-cratis-part='badge'\n data-property-type={property.type}\n data-concept={property.concept ? true : undefined}\n data-locked={lockReason ? true : undefined}\n >\n <PropertyTypeGlyph type={property.type} />\n <span className='cratis-schema-editor__badge-name'>{property.concept ?? propertyTypeName(property.type, labels)}</span>\n {lockReason && <span id={reasonId} className='cratis-schema-editor__visually-hidden'>{lockReason}</span>}\n </span>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AA6BO,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAA0B,KAAI;AAChG,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;IACxB,QACIA,IAAA,CAAA,MAAA,EAAA,EAAA,GACQ,IAAI,EACR,KAAK,EAAE,UAAU,IAAI,IAAI,EAAE,KAAK,EAAA,kBAAA,EACd,UAAU,GAAG,QAAQ,GAAG,IAAI,GAAG,kBAAkB,CAAC,EACpE,SAAS,EAAE,CAAA,4BAAA,EAA+B,IAAI,EAAE,SAAS,IAAI,EAAE,CAAA,CAAE,EAAA,kBAAA,EAChD,OAAO,EAAA,oBAAA,EACJ,QAAQ,CAAC,IAAI,EAAA,cAAA,EACnB,QAAQ,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,EAAA,aAAA,EACpC,UAAU,GAAG,IAAI,GAAG,SAAS,EAAA,QAAA,EAAA,CAE1CC,GAAA,CAAC,iBAAiB,EAAA,EAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAA,CAAI,EAC1CA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kCAAkC,EAAA,QAAA,EAAE,QAAQ,CAAC,OAAO,IAAI,gBAAgB,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,EAAA,CAAQ,EACtH,UAAU,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAC,uCAAuC,YAAE,UAAU,EAAA,CAAQ,CAAA,EAAA,CACrG;AAEf;;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { PropertyType } from './PropertyType.js';
|
|
2
|
+
/** Props for the glyph of a property type. */
|
|
3
|
+
export interface PropertyTypeGlyphProps {
|
|
4
|
+
/** The type whose glyph is shown. */
|
|
5
|
+
type: PropertyType;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* A short colored chip identifying a property type at a glance. It is decorative: the type's name is always
|
|
9
|
+
* next to it, so it is hidden from assistive technology.
|
|
10
|
+
*/
|
|
11
|
+
export declare const PropertyTypeGlyph: ({ type }: PropertyTypeGlyphProps) => import("react").JSX.Element;
|
|
12
|
+
//# sourceMappingURL=PropertyTypeGlyph.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PropertyTypeGlyph.d.ts","sourceRoot":"","sources":["../../../../SchemaEditor/Tree/PropertyTypeGlyph.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAgB,CAAC;AAoC9C,8CAA8C;AAC9C,MAAM,WAAW,sBAAsB;IACnC,qCAAqC;IACrC,IAAI,EAAE,YAAY,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,aAAc,sBAAsB,gCAEjE,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { PropertyType } from './PropertyType.js';
|
|
3
|
+
|
|
4
|
+
const iconProps = {
|
|
5
|
+
viewBox: '0 0 12 12',
|
|
6
|
+
fill: 'none',
|
|
7
|
+
stroke: 'currentColor',
|
|
8
|
+
strokeWidth: 1.5,
|
|
9
|
+
strokeLinecap: 'round',
|
|
10
|
+
strokeLinejoin: 'round',
|
|
11
|
+
width: 11,
|
|
12
|
+
height: 11,
|
|
13
|
+
'aria-hidden': true,
|
|
14
|
+
};
|
|
15
|
+
const glyphs = {
|
|
16
|
+
[PropertyType.String]: 'Aa',
|
|
17
|
+
[PropertyType.Number]: '123',
|
|
18
|
+
[PropertyType.Boolean]: 'T/F',
|
|
19
|
+
[PropertyType.Date]: (jsxs("svg", { ...iconProps, children: [jsx("rect", { x: '1', y: '2.5', width: '10', height: '8.5', rx: '1.5' }), jsx("path", { d: 'M1 5.5h10M4 1v3M8 1v3' })] })),
|
|
20
|
+
[PropertyType.Time]: (jsxs("svg", { ...iconProps, children: [jsx("circle", { cx: '6', cy: '6', r: '4.5' }), jsx("path", { d: 'M6 3.5v2.5l2 1' })] })),
|
|
21
|
+
[PropertyType.Object]: '{}',
|
|
22
|
+
[PropertyType.StringArray]: '[A]',
|
|
23
|
+
[PropertyType.NumberArray]: '[#]',
|
|
24
|
+
[PropertyType.ObjectArray]: '[{}]',
|
|
25
|
+
};
|
|
26
|
+
const PropertyTypeGlyph = ({ type }) => (jsx("span", { className: 'cratis-schema-editor__badge-glyph', "data-property-type": type, "aria-hidden": 'true', children: glyphs[type] }));
|
|
27
|
+
|
|
28
|
+
export { PropertyTypeGlyph };
|
|
29
|
+
//# sourceMappingURL=PropertyTypeGlyph.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PropertyTypeGlyph.js","sources":["../../../../SchemaEditor/Tree/PropertyTypeGlyph.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { PropertyType } from './PropertyType';\n\nconst iconProps = {\n viewBox: '0 0 12 12',\n fill: 'none',\n stroke: 'currentColor',\n strokeWidth: 1.5,\n strokeLinecap: 'round',\n strokeLinejoin: 'round',\n width: 11,\n height: 11,\n 'aria-hidden': true,\n} as const;\n\nconst glyphs: Record<PropertyType, React.ReactNode> = {\n [PropertyType.String]: 'Aa',\n [PropertyType.Number]: '123',\n [PropertyType.Boolean]: 'T/F',\n [PropertyType.Date]: (\n <svg {...iconProps}>\n <rect x='1' y='2.5' width='10' height='8.5' rx='1.5' />\n <path d='M1 5.5h10M4 1v3M8 1v3' />\n </svg>\n ),\n [PropertyType.Time]: (\n <svg {...iconProps}>\n <circle cx='6' cy='6' r='4.5' />\n <path d='M6 3.5v2.5l2 1' />\n </svg>\n ),\n [PropertyType.Object]: '{}',\n [PropertyType.StringArray]: '[A]',\n [PropertyType.NumberArray]: '[#]',\n [PropertyType.ObjectArray]: '[{}]',\n};\n\n/** Props for the glyph of a property type. */\nexport interface PropertyTypeGlyphProps {\n /** The type whose glyph is shown. */\n type: PropertyType;\n}\n\n/**\n * A short colored chip identifying a property type at a glance. It is decorative: the type's name is always\n * next to it, so it is hidden from assistive technology.\n */\nexport const PropertyTypeGlyph = ({ type }: PropertyTypeGlyphProps) => (\n <span className='cratis-schema-editor__badge-glyph' data-property-type={type} aria-hidden='true'>{glyphs[type]}</span>\n);\n"],"names":["_jsxs","_jsx"],"mappings":";;;AAKA,MAAM,SAAS,GAAG;AACd,IAAA,OAAO,EAAE,WAAW;AACpB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,MAAM,EAAE,cAAc;AACtB,IAAA,WAAW,EAAE,GAAG;AAChB,IAAA,aAAa,EAAE,OAAO;AACtB,IAAA,cAAc,EAAE,OAAO;AACvB,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,MAAM,EAAE,EAAE;AACV,IAAA,aAAa,EAAE,IAAI;CACb;AAEV,MAAM,MAAM,GAA0C;AAClD,IAAA,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI;AAC3B,IAAA,CAAC,YAAY,CAAC,MAAM,GAAG,KAAK;AAC5B,IAAA,CAAC,YAAY,CAAC,OAAO,GAAG,KAAK;AAC7B,IAAA,CAAC,YAAY,CAAC,IAAI,IACdA,IAAA,CAAA,KAAA,EAAA,EAAA,GAAS,SAAS,EAAA,QAAA,EAAA,CACdC,GAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAA,CAAG,EACvDA,GAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,uBAAuB,EAAA,CAAG,IAChC,CACT;AACD,IAAA,CAAC,YAAY,CAAC,IAAI,IACdD,IAAA,CAAA,KAAA,EAAA,EAAA,GAAS,SAAS,EAAA,QAAA,EAAA,CACdC,GAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,KAAK,EAAA,CAAG,EAChCA,GAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,gBAAgB,EAAA,CAAG,IACzB,CACT;AACD,IAAA,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI;AAC3B,IAAA,CAAC,YAAY,CAAC,WAAW,GAAG,KAAK;AACjC,IAAA,CAAC,YAAY,CAAC,WAAW,GAAG,KAAK;AACjC,IAAA,CAAC,YAAY,CAAC,WAAW,GAAG,MAAM;CACrC;AAYM,MAAM,iBAAiB,GAAG,CAAC,EAAE,IAAI,EAA0B,MAC9DA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mCAAmC,EAAA,oBAAA,EAAqB,IAAI,EAAA,aAAA,EAAc,MAAM,EAAA,QAAA,EAAE,MAAM,CAAC,IAAI,CAAC,EAAA,CAAQ;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PropertyTypeMenu.d.ts","sourceRoot":"","sources":["../../../../SchemaEditor/Tree/PropertyTypeMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQrF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAmB,CAAC;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAgB,CAAC;AACnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAAuB,CAAC;AAChE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"PropertyTypeMenu.d.ts","sourceRoot":"","sources":["../../../../SchemaEditor/Tree/PropertyTypeMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQrF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAmB,CAAC;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAgB,CAAC;AACnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAAuB,CAAC;AAChE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAqB,CAAC;AAO7D,iGAAiG;AACjG,MAAM,WAAW,qBAAqB;IAClC,2BAA2B;IAC3B,MAAM,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IAErC,kJAAkJ;IAClJ,QAAQ,EAAE,eAAe,EAAE,GAAG,SAAS,CAAC;IAExC,6FAA6F;IAC7F,WAAW,EAAE,KAAK,GAAG,YAAY,CAAC;IAElC,0CAA0C;IAC1C,YAAY,EAAE,MAAM,CAAC;IAErB,kCAAkC;IAClC,QAAQ,EAAE,SAAS,CAAC;IAEpB,iCAAiC;IACjC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAErC,qFAAqF;IACrF,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5D;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,+EAAgF,qBAAqB,gCA0FjI,CAAC"}
|
|
@@ -7,7 +7,8 @@ import { asReactAriaButtonProps } from '../../Common/reactAriaProps.js';
|
|
|
7
7
|
import { zIndexAboveDialog, OVERLAY_OFFSET } from '../../renderer/dialogStack.js';
|
|
8
8
|
import { useNearestDialogZIndex } from '../../renderer/DialogStackContext.js';
|
|
9
9
|
import { unstable_useOverlayEnvironment } from '../../renderer/RendererContext.js';
|
|
10
|
-
import { primitivePropertyTypes,
|
|
10
|
+
import { primitivePropertyTypes, compositePropertyTypes, propertyTypeName } from './propertyTypeDisplay.js';
|
|
11
|
+
import { PropertyTypeGlyph } from './PropertyTypeGlyph.js';
|
|
11
12
|
|
|
12
13
|
const typePrefix = 'type:';
|
|
13
14
|
const conceptPrefix = 'concept:';
|
|
@@ -28,9 +29,9 @@ const PropertyTypeMenu = ({ labels, concepts, triggerPart, triggerLabel, childre
|
|
|
28
29
|
}
|
|
29
30
|
onSelect(identifier.slice(typePrefix.length));
|
|
30
31
|
};
|
|
31
|
-
const typeItem = (type) => (jsxs(MenuItem, { id: `${typePrefix}${type}`, textValue: propertyTypeName(type, labels), className: `cratis-schema-editor__menu-item ${parts?.menuItem?.className ?? ''}`, "data-cratis-part": 'menuItem', children: [jsx(
|
|
32
|
+
const typeItem = (type) => (jsxs(MenuItem, { id: `${typePrefix}${type}`, textValue: propertyTypeName(type, labels), className: `cratis-schema-editor__menu-item ${parts?.menuItem?.className ?? ''}`, "data-cratis-part": 'menuItem', children: [jsx(PropertyTypeGlyph, { type: type }), propertyTypeName(type, labels)] }, type));
|
|
32
33
|
const triggerAttributes = parts?.[triggerPart];
|
|
33
|
-
return (jsx(UNSAFE_PortalProvider, { getContainer: overlayEnvironment.getContainer, children: jsxs(MenuTrigger, { children: [jsx(Button, { ...asReactAriaButtonProps(triggerAttributes), "aria-label": triggerLabel, className: `cratis-schema-editor__${triggerPart === 'add' ? 'add' : 'type-button'} ${triggerAttributes?.className ?? ''}`, "data-cratis-part": triggerPart === 'add' ? 'add' : 'typeButton', children: children }), jsx(Popover, { ...parts?.menu, className: `cratis-schema-editor__menu ${parts?.menu?.className ?? ''}`, style: { zIndex, ...parts?.menu?.style }, "data-cratis-part": 'menu', children: jsxs(Menu, { "aria-label": labels.propertyTypes, onAction: handleAction, className: 'cratis-schema-editor__menu-list', children: [primitivePropertyTypes.map(typeItem), concepts !== undefined && (jsxs(MenuSection, { className: 'cratis-schema-editor__menu-section', children: [jsx(Header, { className: 'cratis-schema-editor__menu-heading', children: labels.concepts }), sortedConcepts.length === 0 && (jsx(MenuItem, { id: 'concept-hint', isDisabled: true, textValue: labels.noConcepts, className: `cratis-schema-editor__menu-item cratis-schema-editor__menu-hint ${parts?.menuItem?.className ?? ''}`, "data-cratis-part": 'menuItem', children: labels.noConcepts })), sortedConcepts.map(concept => (jsxs(MenuItem, { id: `${conceptPrefix}${concept.name}`, textValue: concept.name, className: `cratis-schema-editor__menu-item ${parts?.menuItem?.className ?? ''}`, "data-cratis-part": 'menuItem', children: [jsx(
|
|
34
|
+
return (jsx(UNSAFE_PortalProvider, { getContainer: overlayEnvironment.getContainer, children: jsxs(MenuTrigger, { children: [jsx(Button, { ...asReactAriaButtonProps(triggerAttributes), "aria-label": triggerLabel, className: `cratis-schema-editor__${triggerPart === 'add' ? 'add' : 'type-button'} ${triggerAttributes?.className ?? ''}`, "data-cratis-part": triggerPart === 'add' ? 'add' : 'typeButton', children: children }), jsx(Popover, { ...parts?.menu, className: `cratis-schema-editor__menu ${parts?.menu?.className ?? ''}`, style: { zIndex, ...parts?.menu?.style }, "data-cratis-part": 'menu', children: jsxs(Menu, { "aria-label": labels.propertyTypes, onAction: handleAction, className: 'cratis-schema-editor__menu-list', children: [primitivePropertyTypes.map(typeItem), concepts !== undefined && (jsxs(MenuSection, { className: 'cratis-schema-editor__menu-section', children: [jsx(Header, { className: 'cratis-schema-editor__menu-heading', children: labels.concepts }), sortedConcepts.length === 0 && (jsx(MenuItem, { id: 'concept-hint', isDisabled: true, textValue: labels.noConcepts, className: `cratis-schema-editor__menu-item cratis-schema-editor__menu-hint ${parts?.menuItem?.className ?? ''}`, "data-cratis-part": 'menuItem', children: labels.noConcepts })), sortedConcepts.map(concept => (jsxs(MenuItem, { id: `${conceptPrefix}${concept.name}`, textValue: concept.name, className: `cratis-schema-editor__menu-item ${parts?.menuItem?.className ?? ''}`, "data-cratis-part": 'menuItem', children: [jsx(PropertyTypeGlyph, { type: concept.type }), concept.name] }, concept.name)))] })), jsx(Separator, { className: 'cratis-schema-editor__menu-separator' }), compositePropertyTypes.map(typeItem)] }) })] }) }));
|
|
34
35
|
};
|
|
35
36
|
|
|
36
37
|
export { PropertyTypeMenu };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PropertyTypeMenu.js","sources":["../../../../SchemaEditor/Tree/PropertyTypeMenu.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useMemo, type ButtonHTMLAttributes, type Key, type ReactNode } from 'react';\nimport { UNSAFE_PortalProvider } from 'react-aria';\nimport { Button as AriaButton } from 'react-aria-components/Button';\nimport { Header, Menu, MenuItem, MenuSection, MenuTrigger, Popover, Separator } from 'react-aria-components/Menu';\nimport { asReactAriaButtonProps } from '../../Common/reactAriaProps';\nimport { OVERLAY_OFFSET, zIndexAboveDialog } from '../../renderer/dialogStack';\nimport { useNearestDialogZIndex } from '../../renderer/DialogStackContext';\nimport { unstable_useOverlayEnvironment } from '../../renderer/RendererContext';\nimport type { PropertyConcept } from './PropertyConcept';\nimport type { PropertyType } from './PropertyType';\nimport type { SchemaEditorLabels } from '../SchemaEditorLabels';\nimport type { SchemaEditorParts } from './SchemaEditorParts';\nimport { compositePropertyTypes, primitivePropertyTypes, propertyTypeGlyph, propertyTypeName } from './propertyTypeDisplay';\n\nconst typePrefix = 'type:';\nconst conceptPrefix = 'concept:';\n\n/** Props for the menu of types the editor offers when adding a property or changing its type. */\nexport interface PropertyTypeMenuProps {\n /** The resolved labels. */\n labels: Required<SchemaEditorLabels>;\n\n /** The concepts offered after the primitive types. `undefined` when the host has not opted into concepts; an empty list shows a disabled hint. */\n concepts: PropertyConcept[] | undefined;\n\n /** The part of the editor the trigger button is: the add button or the row's type button. */\n triggerPart: 'add' | 'typeButton';\n\n /** The accessible name of the trigger. */\n triggerLabel: string;\n\n /** The content of the trigger. */\n children: ReactNode;\n\n /** The parts the host styles. */\n parts: SchemaEditorParts | undefined;\n\n /** Called with the chosen type, and the concept's name when a concept was chosen. */\n onSelect: (type: PropertyType, concept?: string) => void;\n}\n\n/**\n * The accessible menu of types: the primitives, the concepts of the domain, then the composite types. It is a\n * React Aria menu in a popover, so it handles keyboard navigation, typeahead, focus return and dismissal.\n */\nexport const PropertyTypeMenu = ({ labels, concepts, triggerPart, triggerLabel, children, parts, onSelect }: PropertyTypeMenuProps) => {\n const overlayEnvironment = unstable_useOverlayEnvironment();\n const nearestDialogZIndex = useNearestDialogZIndex();\n const zIndex = nearestDialogZIndex === null\n ? 'var(--cratis-z-index-overlay)'\n : zIndexAboveDialog(nearestDialogZIndex, OVERLAY_OFFSET);\n\n const sortedConcepts = useMemo(\n () => [...(concepts ?? [])].sort((left, right) => left.name.localeCompare(right.name)),\n [concepts]);\n\n const handleAction = (key: Key) => {\n const identifier = String(key);\n if (identifier.startsWith(conceptPrefix)) {\n const concept = sortedConcepts.find(candidate => candidate.name === identifier.slice(conceptPrefix.length));\n if (concept) onSelect(concept.type, concept.name);\n return;\n }\n onSelect(identifier.slice(typePrefix.length) as PropertyType);\n };\n\n const typeItem = (type: PropertyType) => (\n <MenuItem\n key={type}\n id={`${typePrefix}${type}`}\n textValue={propertyTypeName(type, labels)}\n className={`cratis-schema-editor__menu-item ${parts?.menuItem?.className ?? ''}`}\n data-cratis-part='menuItem'\n >\n <span className='cratis-schema-editor__badge-glyph' aria-hidden='true'>{propertyTypeGlyph[type]}</span>\n {propertyTypeName(type, labels)}\n </MenuItem>\n );\n\n const triggerAttributes: ButtonHTMLAttributes<HTMLButtonElement> | undefined = parts?.[triggerPart];\n\n return (\n <UNSAFE_PortalProvider getContainer={overlayEnvironment.getContainer}>\n <MenuTrigger>\n <AriaButton\n {...asReactAriaButtonProps(triggerAttributes)}\n aria-label={triggerLabel}\n className={`cratis-schema-editor__${triggerPart === 'add' ? 'add' : 'type-button'} ${triggerAttributes?.className ?? ''}`}\n data-cratis-part={triggerPart === 'add' ? 'add' : 'typeButton'}\n >\n {children}\n </AriaButton>\n <Popover\n {...parts?.menu}\n className={`cratis-schema-editor__menu ${parts?.menu?.className ?? ''}`}\n style={{ zIndex, ...parts?.menu?.style } as React.CSSProperties}\n data-cratis-part='menu'\n >\n <Menu aria-label={labels.propertyTypes} onAction={handleAction} className='cratis-schema-editor__menu-list'>\n {primitivePropertyTypes.map(typeItem)}\n {concepts !== undefined && (\n <MenuSection className='cratis-schema-editor__menu-section'>\n <Header className='cratis-schema-editor__menu-heading'>{labels.concepts}</Header>\n {sortedConcepts.length === 0 && (\n <MenuItem\n id='concept-hint'\n isDisabled\n textValue={labels.noConcepts}\n className={`cratis-schema-editor__menu-item cratis-schema-editor__menu-hint ${parts?.menuItem?.className ?? ''}`}\n data-cratis-part='menuItem'\n >\n {labels.noConcepts}\n </MenuItem>\n )}\n {sortedConcepts.map(concept => (\n <MenuItem\n key={concept.name}\n id={`${conceptPrefix}${concept.name}`}\n textValue={concept.name}\n className={`cratis-schema-editor__menu-item ${parts?.menuItem?.className ?? ''}`}\n data-cratis-part='menuItem'\n >\n <span className='cratis-schema-editor__badge-glyph' aria-hidden='true'>{propertyTypeGlyph[concept.type]}</span>\n {concept.name}\n </MenuItem>\n ))}\n </MenuSection>\n )}\n <Separator className='cratis-schema-editor__menu-separator' />\n {compositePropertyTypes.map(typeItem)}\n </Menu>\n </Popover>\n </MenuTrigger>\n </UNSAFE_PortalProvider>\n );\n};\n"],"names":["_jsxs","_jsx","AriaButton"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PropertyTypeMenu.js","sources":["../../../../SchemaEditor/Tree/PropertyTypeMenu.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useMemo, type ButtonHTMLAttributes, type Key, type ReactNode } from 'react';\nimport { UNSAFE_PortalProvider } from 'react-aria';\nimport { Button as AriaButton } from 'react-aria-components/Button';\nimport { Header, Menu, MenuItem, MenuSection, MenuTrigger, Popover, Separator } from 'react-aria-components/Menu';\nimport { asReactAriaButtonProps } from '../../Common/reactAriaProps';\nimport { OVERLAY_OFFSET, zIndexAboveDialog } from '../../renderer/dialogStack';\nimport { useNearestDialogZIndex } from '../../renderer/DialogStackContext';\nimport { unstable_useOverlayEnvironment } from '../../renderer/RendererContext';\nimport type { PropertyConcept } from './PropertyConcept';\nimport type { PropertyType } from './PropertyType';\nimport type { SchemaEditorLabels } from '../SchemaEditorLabels';\nimport type { SchemaEditorParts } from './SchemaEditorParts';\nimport { compositePropertyTypes, primitivePropertyTypes, propertyTypeName } from './propertyTypeDisplay';\nimport { PropertyTypeGlyph } from './PropertyTypeGlyph';\n\nconst typePrefix = 'type:';\nconst conceptPrefix = 'concept:';\n\n/** Props for the menu of types the editor offers when adding a property or changing its type. */\nexport interface PropertyTypeMenuProps {\n /** The resolved labels. */\n labels: Required<SchemaEditorLabels>;\n\n /** The concepts offered after the primitive types. `undefined` when the host has not opted into concepts; an empty list shows a disabled hint. */\n concepts: PropertyConcept[] | undefined;\n\n /** The part of the editor the trigger button is: the add button or the row's type button. */\n triggerPart: 'add' | 'typeButton';\n\n /** The accessible name of the trigger. */\n triggerLabel: string;\n\n /** The content of the trigger. */\n children: ReactNode;\n\n /** The parts the host styles. */\n parts: SchemaEditorParts | undefined;\n\n /** Called with the chosen type, and the concept's name when a concept was chosen. */\n onSelect: (type: PropertyType, concept?: string) => void;\n}\n\n/**\n * The accessible menu of types: the primitives, the concepts of the domain, then the composite types. It is a\n * React Aria menu in a popover, so it handles keyboard navigation, typeahead, focus return and dismissal.\n */\nexport const PropertyTypeMenu = ({ labels, concepts, triggerPart, triggerLabel, children, parts, onSelect }: PropertyTypeMenuProps) => {\n const overlayEnvironment = unstable_useOverlayEnvironment();\n const nearestDialogZIndex = useNearestDialogZIndex();\n const zIndex = nearestDialogZIndex === null\n ? 'var(--cratis-z-index-overlay)'\n : zIndexAboveDialog(nearestDialogZIndex, OVERLAY_OFFSET);\n\n const sortedConcepts = useMemo(\n () => [...(concepts ?? [])].sort((left, right) => left.name.localeCompare(right.name)),\n [concepts]);\n\n const handleAction = (key: Key) => {\n const identifier = String(key);\n if (identifier.startsWith(conceptPrefix)) {\n const concept = sortedConcepts.find(candidate => candidate.name === identifier.slice(conceptPrefix.length));\n if (concept) onSelect(concept.type, concept.name);\n return;\n }\n onSelect(identifier.slice(typePrefix.length) as PropertyType);\n };\n\n const typeItem = (type: PropertyType) => (\n <MenuItem\n key={type}\n id={`${typePrefix}${type}`}\n textValue={propertyTypeName(type, labels)}\n className={`cratis-schema-editor__menu-item ${parts?.menuItem?.className ?? ''}`}\n data-cratis-part='menuItem'\n >\n <PropertyTypeGlyph type={type} />\n {propertyTypeName(type, labels)}\n </MenuItem>\n );\n\n const triggerAttributes: ButtonHTMLAttributes<HTMLButtonElement> | undefined = parts?.[triggerPart];\n\n return (\n <UNSAFE_PortalProvider getContainer={overlayEnvironment.getContainer}>\n <MenuTrigger>\n <AriaButton\n {...asReactAriaButtonProps(triggerAttributes)}\n aria-label={triggerLabel}\n className={`cratis-schema-editor__${triggerPart === 'add' ? 'add' : 'type-button'} ${triggerAttributes?.className ?? ''}`}\n data-cratis-part={triggerPart === 'add' ? 'add' : 'typeButton'}\n >\n {children}\n </AriaButton>\n <Popover\n {...parts?.menu}\n className={`cratis-schema-editor__menu ${parts?.menu?.className ?? ''}`}\n style={{ zIndex, ...parts?.menu?.style } as React.CSSProperties}\n data-cratis-part='menu'\n >\n <Menu aria-label={labels.propertyTypes} onAction={handleAction} className='cratis-schema-editor__menu-list'>\n {primitivePropertyTypes.map(typeItem)}\n {concepts !== undefined && (\n <MenuSection className='cratis-schema-editor__menu-section'>\n <Header className='cratis-schema-editor__menu-heading'>{labels.concepts}</Header>\n {sortedConcepts.length === 0 && (\n <MenuItem\n id='concept-hint'\n isDisabled\n textValue={labels.noConcepts}\n className={`cratis-schema-editor__menu-item cratis-schema-editor__menu-hint ${parts?.menuItem?.className ?? ''}`}\n data-cratis-part='menuItem'\n >\n {labels.noConcepts}\n </MenuItem>\n )}\n {sortedConcepts.map(concept => (\n <MenuItem\n key={concept.name}\n id={`${conceptPrefix}${concept.name}`}\n textValue={concept.name}\n className={`cratis-schema-editor__menu-item ${parts?.menuItem?.className ?? ''}`}\n data-cratis-part='menuItem'\n >\n <PropertyTypeGlyph type={concept.type} />\n {concept.name}\n </MenuItem>\n ))}\n </MenuSection>\n )}\n <Separator className='cratis-schema-editor__menu-separator' />\n {compositePropertyTypes.map(typeItem)}\n </Menu>\n </Popover>\n </MenuTrigger>\n </UNSAFE_PortalProvider>\n );\n};\n"],"names":["_jsxs","_jsx","AriaButton"],"mappings":"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"}
|
|
@@ -4,8 +4,6 @@ import type { SchemaEditorLabels } from '../SchemaEditorLabels.js';
|
|
|
4
4
|
export declare const primitivePropertyTypes: readonly PropertyType[];
|
|
5
5
|
/** The types the menu offers after the concepts, in order. */
|
|
6
6
|
export declare const compositePropertyTypes: readonly PropertyType[];
|
|
7
|
-
/** Short text shown in a type badge; decorative, because the badge also carries the type's name. */
|
|
8
|
-
export declare const propertyTypeGlyph: Record<PropertyType, string>;
|
|
9
7
|
/**
|
|
10
8
|
* The display name of a property type.
|
|
11
9
|
* @param type The type.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"propertyTypeDisplay.d.ts","sourceRoot":"","sources":["../../../../SchemaEditor/Tree/propertyTypeDisplay.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAAuB,CAAC;AAEhE,uEAAuE;AACvE,eAAO,MAAM,sBAAsB,EAAE,SAAS,YAAY,EAMzD,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,sBAAsB,EAAE,SAAS,YAAY,EAKzD,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"propertyTypeDisplay.d.ts","sourceRoot":"","sources":["../../../../SchemaEditor/Tree/propertyTypeDisplay.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAAuB,CAAC;AAEhE,uEAAuE;AACvE,eAAO,MAAM,sBAAsB,EAAE,SAAS,YAAY,EAMzD,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,sBAAsB,EAAE,SAAS,YAAY,EAKzD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAYjG;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAE/D"}
|
|
@@ -13,17 +13,6 @@ const compositePropertyTypes = [
|
|
|
13
13
|
PropertyType.Object,
|
|
14
14
|
PropertyType.ObjectArray,
|
|
15
15
|
];
|
|
16
|
-
const propertyTypeGlyph = {
|
|
17
|
-
[PropertyType.String]: 'Aa',
|
|
18
|
-
[PropertyType.Number]: '123',
|
|
19
|
-
[PropertyType.Boolean]: 'T/F',
|
|
20
|
-
[PropertyType.Date]: 'Date',
|
|
21
|
-
[PropertyType.Time]: 'Time',
|
|
22
|
-
[PropertyType.Object]: '{ }',
|
|
23
|
-
[PropertyType.StringArray]: '[Aa]',
|
|
24
|
-
[PropertyType.NumberArray]: '[123]',
|
|
25
|
-
[PropertyType.ObjectArray]: '[{ }]',
|
|
26
|
-
};
|
|
27
16
|
function propertyTypeName(type, labels) {
|
|
28
17
|
switch (type) {
|
|
29
18
|
case PropertyType.Number: return labels.typeNumber;
|
|
@@ -41,5 +30,5 @@ function hasNestedProperties(type) {
|
|
|
41
30
|
return type === PropertyType.Object || type === PropertyType.ObjectArray;
|
|
42
31
|
}
|
|
43
32
|
|
|
44
|
-
export { compositePropertyTypes, hasNestedProperties, primitivePropertyTypes,
|
|
33
|
+
export { compositePropertyTypes, hasNestedProperties, primitivePropertyTypes, propertyTypeName };
|
|
45
34
|
//# sourceMappingURL=propertyTypeDisplay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"propertyTypeDisplay.js","sources":["../../../../SchemaEditor/Tree/propertyTypeDisplay.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { PropertyType } from './PropertyType';\nimport type { SchemaEditorLabels } from '../SchemaEditorLabels';\n\n/** The types the menu offers first, in order. Concepts follow them. */\nexport const primitivePropertyTypes: readonly PropertyType[] = [\n PropertyType.String,\n PropertyType.Number,\n PropertyType.Boolean,\n PropertyType.Date,\n PropertyType.Time,\n];\n\n/** The types the menu offers after the concepts, in order. */\nexport const compositePropertyTypes: readonly PropertyType[] = [\n PropertyType.StringArray,\n PropertyType.NumberArray,\n PropertyType.Object,\n PropertyType.ObjectArray,\n];\n\n
|
|
1
|
+
{"version":3,"file":"propertyTypeDisplay.js","sources":["../../../../SchemaEditor/Tree/propertyTypeDisplay.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { PropertyType } from './PropertyType';\nimport type { SchemaEditorLabels } from '../SchemaEditorLabels';\n\n/** The types the menu offers first, in order. Concepts follow them. */\nexport const primitivePropertyTypes: readonly PropertyType[] = [\n PropertyType.String,\n PropertyType.Number,\n PropertyType.Boolean,\n PropertyType.Date,\n PropertyType.Time,\n];\n\n/** The types the menu offers after the concepts, in order. */\nexport const compositePropertyTypes: readonly PropertyType[] = [\n PropertyType.StringArray,\n PropertyType.NumberArray,\n PropertyType.Object,\n PropertyType.ObjectArray,\n];\n\n/**\n * The display name of a property type.\n * @param type The type.\n * @param labels The resolved labels.\n * @returns The localized name.\n */\nexport function propertyTypeName(type: PropertyType, labels: Required<SchemaEditorLabels>): string {\n switch (type) {\n case PropertyType.Number: return labels.typeNumber;\n case PropertyType.Boolean: return labels.typeBoolean;\n case PropertyType.Date: return labels.typeDate;\n case PropertyType.Time: return labels.typeTime;\n case PropertyType.StringArray: return labels.typeStringArray;\n case PropertyType.NumberArray: return labels.typeNumberArray;\n case PropertyType.Object: return labels.typeObject;\n case PropertyType.ObjectArray: return labels.typeObjectArray;\n default: return labels.typeString;\n }\n}\n\n/**\n * Whether values of the type carry nested properties.\n * @param type The type.\n * @returns `true` for objects and lists of objects.\n */\nexport function hasNestedProperties(type: PropertyType): boolean {\n return type === PropertyType.Object || type === PropertyType.ObjectArray;\n}\n"],"names":[],"mappings":";;AAOO,MAAM,sBAAsB,GAA4B;AAC3D,IAAA,YAAY,CAAC,MAAM;AACnB,IAAA,YAAY,CAAC,MAAM;AACnB,IAAA,YAAY,CAAC,OAAO;AACpB,IAAA,YAAY,CAAC,IAAI;AACjB,IAAA,YAAY,CAAC,IAAI;;AAId,MAAM,sBAAsB,GAA4B;AAC3D,IAAA,YAAY,CAAC,WAAW;AACxB,IAAA,YAAY,CAAC,WAAW;AACxB,IAAA,YAAY,CAAC,MAAM;AACnB,IAAA,YAAY,CAAC,WAAW;;AAStB,SAAU,gBAAgB,CAAC,IAAkB,EAAE,MAAoC,EAAA;IACrF,QAAQ,IAAI;QACR,KAAK,YAAY,CAAC,MAAM,EAAE,OAAO,MAAM,CAAC,UAAU;QAClD,KAAK,YAAY,CAAC,OAAO,EAAE,OAAO,MAAM,CAAC,WAAW;QACpD,KAAK,YAAY,CAAC,IAAI,EAAE,OAAO,MAAM,CAAC,QAAQ;QAC9C,KAAK,YAAY,CAAC,IAAI,EAAE,OAAO,MAAM,CAAC,QAAQ;QAC9C,KAAK,YAAY,CAAC,WAAW,EAAE,OAAO,MAAM,CAAC,eAAe;QAC5D,KAAK,YAAY,CAAC,WAAW,EAAE,OAAO,MAAM,CAAC,eAAe;QAC5D,KAAK,YAAY,CAAC,MAAM,EAAE,OAAO,MAAM,CAAC,UAAU;QAClD,KAAK,YAAY,CAAC,WAAW,EAAE,OAAO,MAAM,CAAC,eAAe;AAC5D,QAAA,SAAS,OAAO,MAAM,CAAC,UAAU;;AAEzC;AAOM,SAAU,mBAAmB,CAAC,IAAkB,EAAA;IAClD,OAAO,IAAI,KAAK,YAAY,CAAC,MAAM,IAAI,IAAI,KAAK,YAAY,CAAC,WAAW;AAC5E;;"}
|
|
@@ -1963,7 +1963,8 @@
|
|
|
1963
1963
|
}
|
|
1964
1964
|
|
|
1965
1965
|
.cratis-schema-editor__row:hover {
|
|
1966
|
-
|
|
1966
|
+
border-color: var(--cratis-primary-color);
|
|
1967
|
+
background: color-mix(in srgb, var(--cratis-primary-color) 6%, var(--cratis-surface-card));
|
|
1967
1968
|
}
|
|
1968
1969
|
|
|
1969
1970
|
.cratis-schema-editor__row[data-selected] {
|
|
@@ -2049,24 +2050,68 @@
|
|
|
2049
2050
|
font-size: 0.75rem;
|
|
2050
2051
|
}
|
|
2051
2052
|
|
|
2053
|
+
.cratis-schema-editor,
|
|
2054
|
+
.cratis-schema-editor__menu {
|
|
2055
|
+
--cratis-schema-editor-type-string: #0e7490;
|
|
2056
|
+
--cratis-schema-editor-type-number: #b91c1c;
|
|
2057
|
+
--cratis-schema-editor-type-boolean: #15803d;
|
|
2058
|
+
--cratis-schema-editor-type-date: #c2410c;
|
|
2059
|
+
--cratis-schema-editor-type-time: #7c6d14;
|
|
2060
|
+
--cratis-schema-editor-type-object: #6d28d9;
|
|
2061
|
+
--cratis-schema-editor-type-string-array: #0f766e;
|
|
2062
|
+
--cratis-schema-editor-type-number-array: #991b1b;
|
|
2063
|
+
--cratis-schema-editor-type-object-array: #5b21b6;
|
|
2064
|
+
--cratis-schema-editor-type-text: #fff;
|
|
2065
|
+
--cratis-schema-editor-concept-background: #b4a5ff;
|
|
2066
|
+
--cratis-schema-editor-concept-text: #1c1040;
|
|
2067
|
+
}
|
|
2068
|
+
|
|
2052
2069
|
.cratis-schema-editor__badge {
|
|
2053
2070
|
display: inline-flex;
|
|
2054
2071
|
align-items: center;
|
|
2055
|
-
gap: 0.
|
|
2056
|
-
min-height: 1.25rem;
|
|
2057
|
-
padding: 0 0.375rem;
|
|
2058
|
-
border: 1px solid var(--cratis-surface-border);
|
|
2059
|
-
border-radius: 999px;
|
|
2060
|
-
background: var(--cratis-surface-100);
|
|
2072
|
+
gap: 0.375rem;
|
|
2061
2073
|
color: var(--cratis-text-color);
|
|
2062
2074
|
font-size: 0.75rem;
|
|
2063
2075
|
white-space: nowrap;
|
|
2064
2076
|
}
|
|
2065
2077
|
|
|
2066
2078
|
.cratis-schema-editor__badge-glyph {
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2079
|
+
display: inline-flex;
|
|
2080
|
+
align-items: center;
|
|
2081
|
+
justify-content: center;
|
|
2082
|
+
flex-shrink: 0;
|
|
2083
|
+
min-width: 1.5rem;
|
|
2084
|
+
height: 1.125rem;
|
|
2085
|
+
padding: 0 0.3125rem;
|
|
2086
|
+
border-radius: 0.25rem;
|
|
2087
|
+
background: var(--cratis-schema-editor-type-string);
|
|
2088
|
+
color: var(--cratis-schema-editor-type-text);
|
|
2089
|
+
font-family: system-ui, monospace, sans-serif;
|
|
2090
|
+
font-size: 0.625rem;
|
|
2091
|
+
font-weight: 700;
|
|
2092
|
+
line-height: 1;
|
|
2093
|
+
user-select: none;
|
|
2094
|
+
}
|
|
2095
|
+
|
|
2096
|
+
.cratis-schema-editor__badge-glyph svg {
|
|
2097
|
+
display: block;
|
|
2098
|
+
}
|
|
2099
|
+
|
|
2100
|
+
.cratis-schema-editor__badge-glyph[data-property-type="number"] { background: var(--cratis-schema-editor-type-number); }
|
|
2101
|
+
.cratis-schema-editor__badge-glyph[data-property-type="boolean"] { background: var(--cratis-schema-editor-type-boolean); }
|
|
2102
|
+
.cratis-schema-editor__badge-glyph[data-property-type="date"] { background: var(--cratis-schema-editor-type-date); }
|
|
2103
|
+
.cratis-schema-editor__badge-glyph[data-property-type="time"] { background: var(--cratis-schema-editor-type-time); }
|
|
2104
|
+
.cratis-schema-editor__badge-glyph[data-property-type="object"] { background: var(--cratis-schema-editor-type-object); }
|
|
2105
|
+
.cratis-schema-editor__badge-glyph[data-property-type="stringArray"] { background: var(--cratis-schema-editor-type-string-array); }
|
|
2106
|
+
.cratis-schema-editor__badge-glyph[data-property-type="numberArray"] { background: var(--cratis-schema-editor-type-number-array); }
|
|
2107
|
+
.cratis-schema-editor__badge-glyph[data-property-type="objectArray"] { background: var(--cratis-schema-editor-type-object-array); }
|
|
2108
|
+
|
|
2109
|
+
.cratis-schema-editor__badge[data-concept] .cratis-schema-editor__badge-name {
|
|
2110
|
+
padding: 0.0625rem 0.375rem;
|
|
2111
|
+
border-radius: 0.25rem;
|
|
2112
|
+
background: var(--cratis-schema-editor-concept-background);
|
|
2113
|
+
color: var(--cratis-schema-editor-concept-text);
|
|
2114
|
+
font-weight: 600;
|
|
2070
2115
|
}
|
|
2071
2116
|
|
|
2072
2117
|
.cratis-schema-editor__type-button,
|
|
@@ -2180,10 +2225,10 @@
|
|
|
2180
2225
|
max-height: min(24rem, var(--available-height));
|
|
2181
2226
|
overflow: auto;
|
|
2182
2227
|
border: 1px solid var(--cratis-surface-border);
|
|
2183
|
-
border-radius:
|
|
2228
|
+
border-radius: 0.375rem;
|
|
2184
2229
|
background: var(--cratis-surface-overlay);
|
|
2185
2230
|
color: var(--cratis-text-color);
|
|
2186
|
-
box-shadow:
|
|
2231
|
+
box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
|
|
2187
2232
|
}
|
|
2188
2233
|
|
|
2189
2234
|
.cratis-schema-editor__menu-list {
|
|
@@ -2196,7 +2241,7 @@
|
|
|
2196
2241
|
align-items: center;
|
|
2197
2242
|
gap: 0.5rem;
|
|
2198
2243
|
min-height: 1.75rem;
|
|
2199
|
-
padding: 0.
|
|
2244
|
+
padding: 0.3125rem 0.75rem;
|
|
2200
2245
|
border-radius: calc(var(--cratis-border-radius) * 0.75);
|
|
2201
2246
|
outline: none;
|
|
2202
2247
|
cursor: default;
|
package/dist/esm/styles.css
CHANGED
|
@@ -7534,7 +7534,8 @@
|
|
|
7534
7534
|
}
|
|
7535
7535
|
|
|
7536
7536
|
.cratis-schema-editor__row:hover {
|
|
7537
|
-
|
|
7537
|
+
border-color: var(--cratis-primary-color);
|
|
7538
|
+
background: color-mix(in srgb, var(--cratis-primary-color) 6%, var(--cratis-surface-card));
|
|
7538
7539
|
}
|
|
7539
7540
|
|
|
7540
7541
|
.cratis-schema-editor__row[data-selected] {
|
|
@@ -7620,24 +7621,68 @@
|
|
|
7620
7621
|
font-size: 0.75rem;
|
|
7621
7622
|
}
|
|
7622
7623
|
|
|
7624
|
+
.cratis-schema-editor,
|
|
7625
|
+
.cratis-schema-editor__menu {
|
|
7626
|
+
--cratis-schema-editor-type-string: #0e7490;
|
|
7627
|
+
--cratis-schema-editor-type-number: #b91c1c;
|
|
7628
|
+
--cratis-schema-editor-type-boolean: #15803d;
|
|
7629
|
+
--cratis-schema-editor-type-date: #c2410c;
|
|
7630
|
+
--cratis-schema-editor-type-time: #7c6d14;
|
|
7631
|
+
--cratis-schema-editor-type-object: #6d28d9;
|
|
7632
|
+
--cratis-schema-editor-type-string-array: #0f766e;
|
|
7633
|
+
--cratis-schema-editor-type-number-array: #991b1b;
|
|
7634
|
+
--cratis-schema-editor-type-object-array: #5b21b6;
|
|
7635
|
+
--cratis-schema-editor-type-text: #fff;
|
|
7636
|
+
--cratis-schema-editor-concept-background: #b4a5ff;
|
|
7637
|
+
--cratis-schema-editor-concept-text: #1c1040;
|
|
7638
|
+
}
|
|
7639
|
+
|
|
7623
7640
|
.cratis-schema-editor__badge {
|
|
7624
7641
|
display: inline-flex;
|
|
7625
7642
|
align-items: center;
|
|
7626
|
-
gap: 0.
|
|
7627
|
-
min-height: 1.25rem;
|
|
7628
|
-
padding: 0 0.375rem;
|
|
7629
|
-
border: 1px solid var(--cratis-surface-border);
|
|
7630
|
-
border-radius: 999px;
|
|
7631
|
-
background: var(--cratis-surface-100);
|
|
7643
|
+
gap: 0.375rem;
|
|
7632
7644
|
color: var(--cratis-text-color);
|
|
7633
7645
|
font-size: 0.75rem;
|
|
7634
7646
|
white-space: nowrap;
|
|
7635
7647
|
}
|
|
7636
7648
|
|
|
7637
7649
|
.cratis-schema-editor__badge-glyph {
|
|
7638
|
-
|
|
7639
|
-
|
|
7640
|
-
|
|
7650
|
+
display: inline-flex;
|
|
7651
|
+
align-items: center;
|
|
7652
|
+
justify-content: center;
|
|
7653
|
+
flex-shrink: 0;
|
|
7654
|
+
min-width: 1.5rem;
|
|
7655
|
+
height: 1.125rem;
|
|
7656
|
+
padding: 0 0.3125rem;
|
|
7657
|
+
border-radius: 0.25rem;
|
|
7658
|
+
background: var(--cratis-schema-editor-type-string);
|
|
7659
|
+
color: var(--cratis-schema-editor-type-text);
|
|
7660
|
+
font-family: system-ui, monospace, sans-serif;
|
|
7661
|
+
font-size: 0.625rem;
|
|
7662
|
+
font-weight: 700;
|
|
7663
|
+
line-height: 1;
|
|
7664
|
+
user-select: none;
|
|
7665
|
+
}
|
|
7666
|
+
|
|
7667
|
+
.cratis-schema-editor__badge-glyph svg {
|
|
7668
|
+
display: block;
|
|
7669
|
+
}
|
|
7670
|
+
|
|
7671
|
+
.cratis-schema-editor__badge-glyph[data-property-type="number"] { background: var(--cratis-schema-editor-type-number); }
|
|
7672
|
+
.cratis-schema-editor__badge-glyph[data-property-type="boolean"] { background: var(--cratis-schema-editor-type-boolean); }
|
|
7673
|
+
.cratis-schema-editor__badge-glyph[data-property-type="date"] { background: var(--cratis-schema-editor-type-date); }
|
|
7674
|
+
.cratis-schema-editor__badge-glyph[data-property-type="time"] { background: var(--cratis-schema-editor-type-time); }
|
|
7675
|
+
.cratis-schema-editor__badge-glyph[data-property-type="object"] { background: var(--cratis-schema-editor-type-object); }
|
|
7676
|
+
.cratis-schema-editor__badge-glyph[data-property-type="stringArray"] { background: var(--cratis-schema-editor-type-string-array); }
|
|
7677
|
+
.cratis-schema-editor__badge-glyph[data-property-type="numberArray"] { background: var(--cratis-schema-editor-type-number-array); }
|
|
7678
|
+
.cratis-schema-editor__badge-glyph[data-property-type="objectArray"] { background: var(--cratis-schema-editor-type-object-array); }
|
|
7679
|
+
|
|
7680
|
+
.cratis-schema-editor__badge[data-concept] .cratis-schema-editor__badge-name {
|
|
7681
|
+
padding: 0.0625rem 0.375rem;
|
|
7682
|
+
border-radius: 0.25rem;
|
|
7683
|
+
background: var(--cratis-schema-editor-concept-background);
|
|
7684
|
+
color: var(--cratis-schema-editor-concept-text);
|
|
7685
|
+
font-weight: 600;
|
|
7641
7686
|
}
|
|
7642
7687
|
|
|
7643
7688
|
.cratis-schema-editor__type-button,
|
|
@@ -7751,10 +7796,10 @@
|
|
|
7751
7796
|
max-height: min(24rem, var(--available-height));
|
|
7752
7797
|
overflow: auto;
|
|
7753
7798
|
border: 1px solid var(--cratis-surface-border);
|
|
7754
|
-
border-radius:
|
|
7799
|
+
border-radius: 0.375rem;
|
|
7755
7800
|
background: var(--cratis-surface-overlay);
|
|
7756
7801
|
color: var(--cratis-text-color);
|
|
7757
|
-
box-shadow:
|
|
7802
|
+
box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
|
|
7758
7803
|
}
|
|
7759
7804
|
|
|
7760
7805
|
.cratis-schema-editor__menu-list {
|
|
@@ -7767,7 +7812,7 @@
|
|
|
7767
7812
|
align-items: center;
|
|
7768
7813
|
gap: 0.5rem;
|
|
7769
7814
|
min-height: 1.75rem;
|
|
7770
|
-
padding: 0.
|
|
7815
|
+
padding: 0.3125rem 0.75rem;
|
|
7771
7816
|
border-radius: calc(var(--cratis-border-radius) * 0.75);
|
|
7772
7817
|
outline: none;
|
|
7773
7818
|
cursor: default;
|
package/package.json
CHANGED