@genexus/mercury 0.10.0 → 0.12.0
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/dist/assets-manager.d.ts +7 -58
- package/dist/bundles/css/all.css +1 -1
- package/dist/bundles/css/components/combo-box.css +1 -1
- package/dist/bundles/css/components/dialog.css +1 -1
- package/dist/bundles/css/components/flexible-layout.css +1 -1
- package/dist/bundles/css/components/layout-splitter.css +1 -0
- package/dist/bundles/css/components/navigation-list.css +1 -1
- package/dist/bundles/css/components/slider.css +1 -1
- package/dist/bundles/css/components/tab.css +1 -1
- package/dist/bundles/css/components/toggle.css +1 -0
- package/dist/bundles/css/utils/form--full.css +1 -1
- package/dist/bundles/scss/components/layout-splitter.scss +3 -0
- package/dist/bundles/scss/components/toggle.scss +3 -0
- package/dist/bundles.d.ts +3 -269
- package/dist/index.d.ts +4 -0
- package/dist/mercury.scss +338 -64
- package/dist/register-mercury.d.ts +1 -0
- package/dist/types.d.ts +59 -0
- package/package.json +35 -6
- package/dist/assets/MERCURY_ASSETS.js +0 -14724
- package/dist/assets-manager.js +0 -177
- package/dist/bundles.js +0 -94
package/dist/assets-manager.js
DELETED
|
@@ -1,177 +0,0 @@
|
|
|
1
|
-
import { MERCURY_ASSETS } from "./assets/MERCURY_ASSETS.js";
|
|
2
|
-
export { getThemeBundles, getBundles } from "./bundles.js";
|
|
3
|
-
const ASSETS_BY_VENDOR = {};
|
|
4
|
-
const ALIAS_TO_VENDOR_NAME = {};
|
|
5
|
-
const SEPARATOR = "/";
|
|
6
|
-
const EXPANDED_SEPARATOR = ":";
|
|
7
|
-
const MERCURY_ALIAS = "mer";
|
|
8
|
-
/**
|
|
9
|
-
* Given a vendor and its assets, it register the assets of the vendor. After
|
|
10
|
-
* the registration, the `getAsset` function can be used to retrieve any assets
|
|
11
|
-
* related to the vendor.
|
|
12
|
-
* @param vendorName The name of the vendor (for example, "Mercury"). Must be unique.
|
|
13
|
-
* @param vendorAlias The alias of the vendor (for example, "mer"). Must be unique.
|
|
14
|
-
* @param assets The assets (generated by the SVG Sass Generator) to register.
|
|
15
|
-
*/
|
|
16
|
-
export const registerAssets = (vendorName, vendorAlias, assets) => {
|
|
17
|
-
// Already registered
|
|
18
|
-
if (ASSETS_BY_VENDOR[vendorName] || ALIAS_TO_VENDOR_NAME[vendorAlias]) {
|
|
19
|
-
return;
|
|
20
|
-
}
|
|
21
|
-
ASSETS_BY_VENDOR[vendorName] = assets;
|
|
22
|
-
ALIAS_TO_VENDOR_NAME[vendorAlias] = vendorName;
|
|
23
|
-
};
|
|
24
|
-
/**
|
|
25
|
-
* @param vendorAlias The name or alias of the vendor.
|
|
26
|
-
* @param assetMetadata The metadata required to retrieve the icon
|
|
27
|
-
* @return The required asset or undefined if not found.
|
|
28
|
-
*/
|
|
29
|
-
export const getAsset = (vendorAliasOrName, assetMetadata) => {
|
|
30
|
-
const vendorName = ALIAS_TO_VENDOR_NAME[vendorAliasOrName] ?? vendorAliasOrName;
|
|
31
|
-
const vendorAssets = ASSETS_BY_VENDOR[vendorName];
|
|
32
|
-
if (!vendorAssets) {
|
|
33
|
-
return undefined;
|
|
34
|
-
}
|
|
35
|
-
const iconCategoryObject = vendorAssets.icons[assetMetadata.category];
|
|
36
|
-
// The category does not exists
|
|
37
|
-
if (!iconCategoryObject) {
|
|
38
|
-
return undefined;
|
|
39
|
-
}
|
|
40
|
-
const iconNameObject = iconCategoryObject[assetMetadata.name];
|
|
41
|
-
// The name in the category does not exists
|
|
42
|
-
if (!iconNameObject) {
|
|
43
|
-
return undefined;
|
|
44
|
-
}
|
|
45
|
-
return assetMetadata.colorType
|
|
46
|
-
? iconNameObject[assetMetadata.colorType]
|
|
47
|
-
: iconNameObject;
|
|
48
|
-
};
|
|
49
|
-
/**
|
|
50
|
-
* Given the metadata of the icon, it transforms the metadata into a string
|
|
51
|
-
* that contains the given information.
|
|
52
|
-
*/
|
|
53
|
-
export const getIconPath = (iconMetadata, vendorAlias = MERCURY_ALIAS) => {
|
|
54
|
-
const additionalInfo = iconMetadata.colorType
|
|
55
|
-
? `${SEPARATOR}${iconMetadata.colorType}`
|
|
56
|
-
: "";
|
|
57
|
-
return `${vendorAlias}${SEPARATOR}${iconMetadata.category}${SEPARATOR}${iconMetadata.name}${additionalInfo}`;
|
|
58
|
-
};
|
|
59
|
-
/**
|
|
60
|
-
* Given the metadata of the icon and the metadata of its expanded version, it
|
|
61
|
-
* transforms both metadata into a string that contains the given information.
|
|
62
|
-
*/
|
|
63
|
-
export const getIconPathExpanded = (iconMetadata, iconMetadataExpanded, vendorAlias = MERCURY_ALIAS) => `${getIconPath(iconMetadata, vendorAlias)}${EXPANDED_SEPARATOR}${getIconPath(iconMetadataExpanded, vendorAlias)}`;
|
|
64
|
-
const getCustomFullValue = (iconName, vendorAliasOrName, suffix) => {
|
|
65
|
-
const vendorPrefix = vendorAliasOrName === MERCURY_ALIAS
|
|
66
|
-
? ""
|
|
67
|
-
: `-${vendorAliasOrName}`;
|
|
68
|
-
return suffix
|
|
69
|
-
? `var(--icon${vendorPrefix}__${iconName}--${suffix})`
|
|
70
|
-
: `var(--icon${vendorPrefix}__${iconName})`;
|
|
71
|
-
};
|
|
72
|
-
/**
|
|
73
|
-
* Parses the incoming iconMetadata, assuming Mercury as the default vendor if
|
|
74
|
-
* the vendor is not specified (it is not found in the register)
|
|
75
|
-
*/
|
|
76
|
-
const parseIconMetadata = (iconPath) => {
|
|
77
|
-
const iconMetadata = iconPath.split(SEPARATOR);
|
|
78
|
-
const vendorAliasOrName = iconMetadata[0];
|
|
79
|
-
const vendorName = ALIAS_TO_VENDOR_NAME[vendorAliasOrName] ?? vendorAliasOrName;
|
|
80
|
-
const vendorAssets = ASSETS_BY_VENDOR[vendorName];
|
|
81
|
-
// The vendor is not contained in the path, assume by default Mercury.
|
|
82
|
-
if (!vendorAssets) {
|
|
83
|
-
const category = iconMetadata[0]; // Assume that the first value is the category
|
|
84
|
-
const name = iconMetadata[1];
|
|
85
|
-
const colorType = iconMetadata[2];
|
|
86
|
-
return {
|
|
87
|
-
vendor: MERCURY_ALIAS,
|
|
88
|
-
category,
|
|
89
|
-
name,
|
|
90
|
-
colorType: colorType
|
|
91
|
-
};
|
|
92
|
-
}
|
|
93
|
-
const category = iconMetadata[1];
|
|
94
|
-
const name = iconMetadata[2];
|
|
95
|
-
const colorType = iconMetadata[3];
|
|
96
|
-
return {
|
|
97
|
-
vendor: vendorAliasOrName,
|
|
98
|
-
category,
|
|
99
|
-
name,
|
|
100
|
-
colorType: colorType
|
|
101
|
-
};
|
|
102
|
-
};
|
|
103
|
-
export const getImagePathCallback = (iconPath) => {
|
|
104
|
-
const { vendor, category, name, colorType } = parseIconMetadata(iconPath);
|
|
105
|
-
const assetStates = getAsset(vendor, colorType ? { category, name, colorType } : { category, name });
|
|
106
|
-
if (!assetStates) {
|
|
107
|
-
return undefined;
|
|
108
|
-
}
|
|
109
|
-
const result = {
|
|
110
|
-
base: getCustomFullValue(assetStates.enabled.name, vendor)
|
|
111
|
-
};
|
|
112
|
-
if (assetStates.hover) {
|
|
113
|
-
result.hover = getCustomFullValue(assetStates.hover.name, vendor);
|
|
114
|
-
}
|
|
115
|
-
if (assetStates.active) {
|
|
116
|
-
result.active = getCustomFullValue(assetStates.active.name, vendor);
|
|
117
|
-
}
|
|
118
|
-
if (assetStates.disabled) {
|
|
119
|
-
result.disabled = getCustomFullValue(assetStates.disabled.name, vendor);
|
|
120
|
-
}
|
|
121
|
-
return result;
|
|
122
|
-
};
|
|
123
|
-
export const getActionListImagePathCallback = (additionalItem) => additionalItem.imgSrc
|
|
124
|
-
? getImagePathCallback(additionalItem.imgSrc)
|
|
125
|
-
: undefined;
|
|
126
|
-
export const getNavigationListImagePathCallback = (itemModel) => itemModel.startImgSrc
|
|
127
|
-
? getImagePathCallback(itemModel.startImgSrc)
|
|
128
|
-
: undefined;
|
|
129
|
-
export const getTreeViewImagePathCallback = (item, iconDirection) => {
|
|
130
|
-
if ((!item.startImgSrc && iconDirection === "start") ||
|
|
131
|
-
(!item.endImgSrc && iconDirection === "end")) {
|
|
132
|
-
return undefined;
|
|
133
|
-
}
|
|
134
|
-
const imgSrc = iconDirection === "start" ? item.startImgSrc : item.endImgSrc;
|
|
135
|
-
// Split the path into the collapsed (default) and expanded
|
|
136
|
-
const collapsedAndExpandedSrc = imgSrc.split(EXPANDED_SEPARATOR);
|
|
137
|
-
const defaultPath = getImagePathCallback(collapsedAndExpandedSrc[0]);
|
|
138
|
-
if (!defaultPath) {
|
|
139
|
-
return undefined;
|
|
140
|
-
}
|
|
141
|
-
// If the icon has expanded state, process the expanded state
|
|
142
|
-
return collapsedAndExpandedSrc[1]
|
|
143
|
-
? {
|
|
144
|
-
default: defaultPath,
|
|
145
|
-
expanded: getImagePathCallback(collapsedAndExpandedSrc[1])
|
|
146
|
-
}
|
|
147
|
-
: { default: defaultPath };
|
|
148
|
-
};
|
|
149
|
-
export const getComboBoxImagePathCallback = (item, iconDirection) => {
|
|
150
|
-
if ((!item.startImgSrc && iconDirection === "start") ||
|
|
151
|
-
(!item.endImgSrc && iconDirection === "end")) {
|
|
152
|
-
return undefined;
|
|
153
|
-
}
|
|
154
|
-
const imgSrc = iconDirection === "start" ? item.startImgSrc : item.endImgSrc;
|
|
155
|
-
return getImagePathCallback(imgSrc);
|
|
156
|
-
};
|
|
157
|
-
/**
|
|
158
|
-
* This object is used to register the getImagePathCallback definitions for all
|
|
159
|
-
* controls in Chameleon.
|
|
160
|
-
*
|
|
161
|
-
* @example
|
|
162
|
-
* ```ts
|
|
163
|
-
* registryProperty("getImagePathCallback", getImagePathCallbackDefinitions);
|
|
164
|
-
* ```
|
|
165
|
-
*/
|
|
166
|
-
export const getImagePathCallbackDefinitions = {
|
|
167
|
-
"ch-accordion-render": getImagePathCallback,
|
|
168
|
-
"ch-action-list-render": getActionListImagePathCallback,
|
|
169
|
-
"ch-combo-box-render": getComboBoxImagePathCallback,
|
|
170
|
-
"ch-navigation-list-render": getNavigationListImagePathCallback,
|
|
171
|
-
"ch-checkbox": getImagePathCallback,
|
|
172
|
-
"ch-edit": getImagePathCallback,
|
|
173
|
-
"ch-image": getImagePathCallback,
|
|
174
|
-
"ch-tree-view-render": getTreeViewImagePathCallback
|
|
175
|
-
};
|
|
176
|
-
// Initialize Mercury at the start
|
|
177
|
-
registerAssets("Mercury", MERCURY_ALIAS, MERCURY_ASSETS);
|
package/dist/bundles.js
DELETED
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
const getThemeModelItem = (basePath, bundleName, attachStyleSheet = undefined) => attachStyleSheet === undefined
|
|
2
|
-
? {
|
|
3
|
-
name: bundleName,
|
|
4
|
-
url: `${basePath}${bundleName}.css`
|
|
5
|
-
}
|
|
6
|
-
: {
|
|
7
|
-
name: bundleName,
|
|
8
|
-
url: `${basePath}${bundleName}.css`,
|
|
9
|
-
attachStyleSheet
|
|
10
|
-
};
|
|
11
|
-
/**
|
|
12
|
-
* Given the basePath, returns all bundles (except base and icons) in the
|
|
13
|
-
* format of type `ThemeModel`.
|
|
14
|
-
*
|
|
15
|
-
* This is useful for defining the following in an `index.html`:
|
|
16
|
-
*
|
|
17
|
-
* ```tsx
|
|
18
|
-
* const THEME_BUNDLES = getThemeBundles("<base path>");
|
|
19
|
-
*
|
|
20
|
-
* HTML/render/template:
|
|
21
|
-
* <body>
|
|
22
|
-
* <ch-theme model={THEME_BUNDLES}></ch-theme>
|
|
23
|
-
* ...
|
|
24
|
-
* </body>
|
|
25
|
-
* ```
|
|
26
|
-
*/
|
|
27
|
-
export const getThemeBundles = (basePath) => [
|
|
28
|
-
// Components
|
|
29
|
-
getThemeModelItem(basePath, "components/accordion"),
|
|
30
|
-
getThemeModelItem(basePath, "components/button"),
|
|
31
|
-
getThemeModelItem(basePath, "components/chat"),
|
|
32
|
-
getThemeModelItem(basePath, "components/checkbox"),
|
|
33
|
-
getThemeModelItem(basePath, "components/code"),
|
|
34
|
-
getThemeModelItem(basePath, "components/combo-box"),
|
|
35
|
-
getThemeModelItem(basePath, "components/flexible-layout"),
|
|
36
|
-
getThemeModelItem(basePath, "components/dialog"),
|
|
37
|
-
getThemeModelItem(basePath, "components/icon"),
|
|
38
|
-
getThemeModelItem(basePath, "components/edit"),
|
|
39
|
-
getThemeModelItem(basePath, "components/list-box"),
|
|
40
|
-
getThemeModelItem(basePath, "components/markdown-viewer", false),
|
|
41
|
-
getThemeModelItem(basePath, "components/navigation-list"),
|
|
42
|
-
getThemeModelItem(basePath, "components/pills"),
|
|
43
|
-
getThemeModelItem(basePath, "components/radio-group"),
|
|
44
|
-
getThemeModelItem(basePath, "components/segmented-control"),
|
|
45
|
-
getThemeModelItem(basePath, "components/sidebar"),
|
|
46
|
-
getThemeModelItem(basePath, "components/slider"),
|
|
47
|
-
getThemeModelItem(basePath, "components/tab"),
|
|
48
|
-
getThemeModelItem(basePath, "components/tabular-grid"),
|
|
49
|
-
getThemeModelItem(basePath, "components/ticket-list"),
|
|
50
|
-
getThemeModelItem(basePath, "components/tooltip"),
|
|
51
|
-
getThemeModelItem(basePath, "components/tree-view"),
|
|
52
|
-
getThemeModelItem(basePath, "components/widget"),
|
|
53
|
-
// Resets
|
|
54
|
-
getThemeModelItem(basePath, "resets/box-sizing"),
|
|
55
|
-
// Utils
|
|
56
|
-
getThemeModelItem(basePath, "utils/form"),
|
|
57
|
-
getThemeModelItem(basePath, "utils/elevation"),
|
|
58
|
-
getThemeModelItem(basePath, "utils/form--full"),
|
|
59
|
-
getThemeModelItem(basePath, "utils/layout"),
|
|
60
|
-
getThemeModelItem(basePath, "utils/spacing"),
|
|
61
|
-
getThemeModelItem(basePath, "utils/typography"),
|
|
62
|
-
getThemeModelItem(basePath, "chameleon/scrollbar")
|
|
63
|
-
];
|
|
64
|
-
/**
|
|
65
|
-
* Given the bundles array and the basePath (optional), returns the given
|
|
66
|
-
* bundles in the format of type `ThemeModel`.
|
|
67
|
-
*
|
|
68
|
-
* This is useful for defining the following in a dialog:
|
|
69
|
-
*
|
|
70
|
-
* ```tsx
|
|
71
|
-
* const CSS_BUNDLES: ThemeModel = getBundles(
|
|
72
|
-
* [
|
|
73
|
-
* "components/accordion",
|
|
74
|
-
* "components/button",
|
|
75
|
-
* "components/checkbox",
|
|
76
|
-
* "components/combo-box",
|
|
77
|
-
* "components/edit",
|
|
78
|
-
* "components/tree-view",
|
|
79
|
-
* "utils/form",
|
|
80
|
-
* "utils/layout",
|
|
81
|
-
* ],
|
|
82
|
-
* "./assets/css/"
|
|
83
|
-
* );
|
|
84
|
-
*
|
|
85
|
-
* HTML/render/template:
|
|
86
|
-
* <Host>
|
|
87
|
-
* <ch-theme model={CSS_BUNDLES}></ch-theme>
|
|
88
|
-
* ...
|
|
89
|
-
* </Host>
|
|
90
|
-
* ```
|
|
91
|
-
*/
|
|
92
|
-
export const getBundles = (bundles, basePath) => basePath
|
|
93
|
-
? bundles.map(bundle => getThemeModelItem(basePath, bundle))
|
|
94
|
-
: bundles;
|