From a4fe86bf2a3b61da5317064571f6d31924b98733 Mon Sep 17 00:00:00 2001 From: Deepak Singh Date: Thu, 12 Oct 2023 09:14:43 +0530 Subject: [PATCH 01/11] feat: custom-component auto expanding of menus & actions --- example/element.js | 2 +- now-ui.json | 6 +++--- package-lock.json | 2 +- package.json | 4 ++-- .../components/menu-editor.js | 7 ++++++- .../components/menu-item.js | 7 +++++-- .../components/menu-tree.js | 12 ++++++++++-- src/x-759224-menu-builder-uic/index.js | 2 +- 8 files changed, 29 insertions(+), 13 deletions(-) diff --git a/example/element.js b/example/element.js index 49a2642..a8281a7 100644 --- a/example/element.js +++ b/example/element.js @@ -4,5 +4,5 @@ const el = document.createElement('DIV'); document.body.appendChild(el); el.innerHTML = ` - + `; diff --git a/now-ui.json b/now-ui.json index 6063645..b0f2982 100644 --- a/now-ui.json +++ b/now-ui.json @@ -1,6 +1,6 @@ { "components": { - "x-759224-menu-builder-uic": { + "x-1114407-menu-builder-uic": { "actions": [ { "name": "TREE_UPDATED", @@ -35,7 +35,7 @@ ], "uiBuilder": { "associatedTypes": ["global.core", "global.landing-page"], - "label": "Menu Builder", + "label": "Menu Builder H23", "icon": "add-item-below-fill", "description": "Import, edit, and build menus for your UI Buider Portal Experiences using a user-friendly interface.", "category": "primitives" @@ -52,5 +52,5 @@ ] } }, - "scopeName": "x_759224_menu_bu_1" + "scopeName": "x_1114407_menu_bu" } diff --git a/package-lock.json b/package-lock.json index 6409ddc..384b267 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "menu-builder-uic", + "name": "menu-builder-h23", "version": "0.0.1", "lockfileVersion": 1, "requires": true, diff --git a/package.json b/package.json index 37f3a3a..1942e66 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { - "name": "menu-builder-uic", + "name": "menu-builder-h23", "version": "0.0.1", "private": false, "description": "", "keywords": [ "ServiceNow", "Now Experience UI Component", - "menu-builder-uic" + "menu-builder-h23" ], "readme": "./README.md", "engines": { diff --git a/src/x-759224-menu-builder-uic/components/menu-editor.js b/src/x-759224-menu-builder-uic/components/menu-editor.js index eecb526..480b6dd 100644 --- a/src/x-759224-menu-builder-uic/components/menu-editor.js +++ b/src/x-759224-menu-builder-uic/components/menu-editor.js @@ -40,13 +40,17 @@ createCustomElement("menu-editor", { parent: { default: null, }, + + expandParent: { + default: null, + } }, actionHandlers: { "NOW_DROPDOWN#ITEM_CLICKED": ({ action: { payload: { item }, }, - properties: { parent }, + properties: { parent, expandParent }, dispatch, }) => { let choice = ""; @@ -69,6 +73,7 @@ createCustomElement("menu-editor", { // Dispatch back to menu-builder component the new menu item information dispatch("MENU_ITEM_EDITED", eventPayload); + expandParent(); }, }, }); diff --git a/src/x-759224-menu-builder-uic/components/menu-item.js b/src/x-759224-menu-builder-uic/components/menu-item.js index c26b210..7b705f5 100644 --- a/src/x-759224-menu-builder-uic/components/menu-item.js +++ b/src/x-759224-menu-builder-uic/components/menu-item.js @@ -11,7 +11,7 @@ import "./menu-editor"; const view = ( { - properties: { id, choice, label, type, page, sysId, href }, + properties: { id, choice, label, type, page, sysId, href, expandParent }, labelInput, typeInput, pageInput, @@ -110,7 +110,7 @@ const view = ( >
- +
{typeValue == "route" ? ( @@ -201,6 +201,9 @@ createCustomElement("menu-item", { href: { default: undefined, }, + expandParent: { + default: undefined + } }, // Keeps track of any changes made during editing initialState: { diff --git a/src/x-759224-menu-builder-uic/components/menu-tree.js b/src/x-759224-menu-builder-uic/components/menu-tree.js index c1a755b..e2eb3f5 100644 --- a/src/x-759224-menu-builder-uic/components/menu-tree.js +++ b/src/x-759224-menu-builder-uic/components/menu-tree.js @@ -8,12 +8,19 @@ import "./menu-item"; // File description: This displays a top-level menu item (and child items), expand/collapse functionality for the container -const view = ({ properties: { tree }, expanded }) => { +const view = ({ properties: { tree }, expanded }, { updateState }) => { const { id, children, parent, choice, label, type, page, sys_id, href } = tree; const hasChildren = children && children.length > 0; + const EXPAND_PARENT = () => { + console.log('update state...'); + updateState({ + expanded: true, + }); + } + return (
@@ -35,6 +42,7 @@ const view = ({ properties: { tree }, expanded }) => { sysId={sys_id} href={href} className="menu-item" + expandParent={EXPAND_PARENT} >
{/* Render child menu items in a collapsible container if they exist */} @@ -62,7 +70,7 @@ createCustomElement("menu-tree", { }, }, initialState: { - expanded: false, + expanded: true, }, actionHandlers: { "NOW_BUTTON_ICONIC#CLICKED": ({ diff --git a/src/x-759224-menu-builder-uic/index.js b/src/x-759224-menu-builder-uic/index.js index c3fadc8..96ac4f3 100644 --- a/src/x-759224-menu-builder-uic/index.js +++ b/src/x-759224-menu-builder-uic/index.js @@ -25,7 +25,7 @@ const view = ( return ; }; -createCustomElement("x-759224-menu-builder-uic", { +createCustomElement("x-1114407-menu-builder-uic", { renderer: { type: snabbdom }, view, styles, From 284952f448cc2469e2b214399b9d374c43933f3f Mon Sep 17 00:00:00 2001 From: Deepak Singh Date: Thu, 12 Oct 2023 09:33:47 +0530 Subject: [PATCH 02/11] refactor: custom-component-revert revert configuration --- example/element.js | 2 +- now-ui.json | 6 +++--- package-lock.json | 2 +- package.json | 4 ++-- src/x-759224-menu-builder-uic/index.js | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/example/element.js b/example/element.js index a8281a7..49a2642 100644 --- a/example/element.js +++ b/example/element.js @@ -4,5 +4,5 @@ const el = document.createElement('DIV'); document.body.appendChild(el); el.innerHTML = ` - + `; diff --git a/now-ui.json b/now-ui.json index b0f2982..6063645 100644 --- a/now-ui.json +++ b/now-ui.json @@ -1,6 +1,6 @@ { "components": { - "x-1114407-menu-builder-uic": { + "x-759224-menu-builder-uic": { "actions": [ { "name": "TREE_UPDATED", @@ -35,7 +35,7 @@ ], "uiBuilder": { "associatedTypes": ["global.core", "global.landing-page"], - "label": "Menu Builder H23", + "label": "Menu Builder", "icon": "add-item-below-fill", "description": "Import, edit, and build menus for your UI Buider Portal Experiences using a user-friendly interface.", "category": "primitives" @@ -52,5 +52,5 @@ ] } }, - "scopeName": "x_1114407_menu_bu" + "scopeName": "x_759224_menu_bu_1" } diff --git a/package-lock.json b/package-lock.json index 384b267..6409ddc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "menu-builder-h23", + "name": "menu-builder-uic", "version": "0.0.1", "lockfileVersion": 1, "requires": true, diff --git a/package.json b/package.json index 1942e66..37f3a3a 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { - "name": "menu-builder-h23", + "name": "menu-builder-uic", "version": "0.0.1", "private": false, "description": "", "keywords": [ "ServiceNow", "Now Experience UI Component", - "menu-builder-h23" + "menu-builder-uic" ], "readme": "./README.md", "engines": { diff --git a/src/x-759224-menu-builder-uic/index.js b/src/x-759224-menu-builder-uic/index.js index 96ac4f3..c3fadc8 100644 --- a/src/x-759224-menu-builder-uic/index.js +++ b/src/x-759224-menu-builder-uic/index.js @@ -25,7 +25,7 @@ const view = ( return ; }; -createCustomElement("x-1114407-menu-builder-uic", { +createCustomElement("x-759224-menu-builder-uic", { renderer: { type: snabbdom }, view, styles, From 01a4501515a8fdb07e5b7549b56320ce4008b8c4 Mon Sep 17 00:00:00 2001 From: Deepak Singh Date: Thu, 12 Oct 2023 09:41:16 +0530 Subject: [PATCH 03/11] test: custom-component removed logging --- src/x-759224-menu-builder-uic/components/menu-tree.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/x-759224-menu-builder-uic/components/menu-tree.js b/src/x-759224-menu-builder-uic/components/menu-tree.js index e2eb3f5..9473ef3 100644 --- a/src/x-759224-menu-builder-uic/components/menu-tree.js +++ b/src/x-759224-menu-builder-uic/components/menu-tree.js @@ -15,7 +15,6 @@ const view = ({ properties: { tree }, expanded }, { updateState }) => { const hasChildren = children && children.length > 0; const EXPAND_PARENT = () => { - console.log('update state...'); updateState({ expanded: true, }); From 97e5822748cbe11a2682aa6215472bf477b8e856 Mon Sep 17 00:00:00 2001 From: Deepak Singh Date: Wed, 18 Oct 2023 12:47:50 +0530 Subject: [PATCH 04/11] fix: custom-component added 'rightIcon' property to the json & functionality to edit it --- .../components/menu-item.js | 41 +- .../components/menu-tree.js | 3 +- src/x-759224-menu-builder-uic/icons.js | 1247 +++++++++++++++++ src/x-759224-menu-builder-uic/index.js | 3 + .../styles/menu-item.scss | 4 + 5 files changed, 1296 insertions(+), 2 deletions(-) create mode 100644 src/x-759224-menu-builder-uic/icons.js diff --git a/src/x-759224-menu-builder-uic/components/menu-item.js b/src/x-759224-menu-builder-uic/components/menu-item.js index 7b705f5..0fb1f22 100644 --- a/src/x-759224-menu-builder-uic/components/menu-item.js +++ b/src/x-759224-menu-builder-uic/components/menu-item.js @@ -6,18 +6,20 @@ import "@servicenow/now-collapse"; import "@servicenow/now-dropdown"; import "@servicenow/now-input"; import "./menu-editor"; +import iconlist from "../icons"; // File description: This is where to configure all the details about a menu item, such as its name, link, or delete const view = ( { - properties: { id, choice, label, type, page, sysId, href, expandParent }, + properties: { id, choice, label, type, page, sysId, href, expandParent, rightIcon }, labelInput, typeInput, pageInput, sysIdInput, hrefInput, editMode, + iconInput }, { dispatch } ) => { @@ -31,6 +33,7 @@ const view = ( const pageValue = pageInput || page; const sysIdValue = sysIdInput || sysId; const hrefValue = hrefInput || href; + const iconValue = iconInput || rightIcon; // This is constructing the JSON output that the chrome_menu UX Page Property expects for this specific menu item @@ -54,6 +57,10 @@ const view = ( }, }; + if(iconValue){ + actionJSON.value.rightIcon = iconValue + } + if (typeValue) { actionJSON.value.type = typeValue; actionJSON.value.value = typeValue === "route" ? routeJSON : externalJSON; @@ -88,6 +95,30 @@ const view = ( name="labelInput" readonly={!editMode} > + { + iconValue && + } + ({ id: e, label: e }))]} + selectedItems={[iconValue]} + name="iconInput" + select="single" + placeholder="" + icon="" + variant="secondary" + size="md" + bare={true} + tooltip-content="Select right icon" + panel-fit-props={{}} + show-padding={true} + config-aria={{}} + disabled={!editMode} + search="true" + > { diff --git a/src/x-759224-menu-builder-uic/components/menu-tree.js b/src/x-759224-menu-builder-uic/components/menu-tree.js index 9473ef3..c13c82f 100644 --- a/src/x-759224-menu-builder-uic/components/menu-tree.js +++ b/src/x-759224-menu-builder-uic/components/menu-tree.js @@ -9,7 +9,7 @@ import "./menu-item"; const view = ({ properties: { tree }, expanded }, { updateState }) => { - const { id, children, parent, choice, label, type, page, sys_id, href } = + const { id, children, parent, choice, label, type, page, sys_id, href, rightIcon } = tree; const hasChildren = children && children.length > 0; @@ -40,6 +40,7 @@ const view = ({ properties: { tree }, expanded }, { updateState }) => { page={page} sysId={sys_id} href={href} + rightIcon={rightIcon} className="menu-item" expandParent={EXPAND_PARENT} > diff --git a/src/x-759224-menu-builder-uic/icons.js b/src/x-759224-menu-builder-uic/icons.js new file mode 100644 index 0000000..50a5d91 --- /dev/null +++ b/src/x-759224-menu-builder-uic/icons.js @@ -0,0 +1,1247 @@ +// all the icons picked from ServiceNow Icon Gallery https://developer.servicenow.com/dev.do#!/reference/next-experience/orlando/now-components/now-icon/gallery +export default [ + "abc-fill", + "abc-outline", + "accessibility-fill", + "accessibility-outline", + "activity-fill", + "activity-outline", + "add-item-above-fill", + "add-item-above-outline", + "add-item-below-fill", + "add-item-below-outline", + "add-item-left-fill", + "add-item-left-outline", + "add-item-right-fill", + "add-item-right-outline", + "address-book-fill", + "address-book-outline", + "address-card-fill", + "address-card-outline", + "agile-fill", + "agile-outline", + "ai-sparkle-fill", + "ai-sparkle-outline", + "align-center-fill", + "align-center-outline", + "align-left-fill", + "align-left-outline", + "align-right-fill", + "align-right-outline", + "analytics-center-fill", + "analytics-center-outline", + "appsee-fill", + "appsee-outline", + "arena-fill", + "arena-outline", + "arrow-clockwise-fill", + "arrow-clockwise-outline", + "arrow-counterclockwise-fill", + "arrow-counterclockwise-outline", + "arrow-down-dot-fill", + "arrow-down-dot-outline", + "arrow-down-fill", + "arrow-down-left-fill", + "arrow-down-left-outline", + "arrow-down-outline", + "arrow-down-rectangle-fill", + "arrow-down-rectangle-outline", + "arrow-down-right-fill", + "arrow-down-right-outline", + "arrow-left-fill", + "arrow-left-most-fill", + "arrow-left-most-outline", + "arrow-left-outline", + "arrow-move-fill", + "arrow-move-outline", + "arrow-reorder-fill", + "arrow-reorder-outline", + "arrow-right-fill", + "arrow-right-most-fill", + "arrow-right-most-outline", + "arrow-right-outline", + "arrow-up-dot-fill", + "arrow-up-dot-outline", + "arrow-up-down-fill", + "arrow-up-down-outline", + "arrow-up-fill", + "arrow-up-left-fill", + "arrow-up-left-outline", + "arrow-up-outline", + "arrow-up-right-fill", + "arrow-up-right-outline", + "asterisk-fill", + "asterisk-outline", + "bag-fill", + "bag-outline", + "ban-fill", + "ban-outline", + "barcode-fill", + "barcode-outline", + "beaker-fill", + "beaker-outline", + "bell-fill", + "bell-outline", + "bell-slash-fill", + "bell-slash-outline", + "bind-fill", + "bind-outline", + "binoculars-fill", + "binoculars-outline", + "board-flexible-fill", + "board-flexible-outline", + "board-guided-fill", + "board-guided-outline", + "book-fill", + "book-open-fill", + "book-open-outline", + "book-outline", + "bookmark-fill", + "bookmark-outline", + "bot-fill", + "bot-outline", + "briefcase-fill", + "briefcase-outline", + "broadcast-tower-fill", + "broadcast-tower-outline", + "bug-fill", + "bug-outline", + "building-feed-fill", + "building-feed-outline", + "building-fill", + "building-outline", + "bundle-fill", + "bundle-outline", + "calendar-check-fill", + "calendar-check-outline", + "calendar-clock-fill", + "calendar-clock-outline", + "calendar-days-clock-fill", + "calendar-days-clock-outline", + "calendar-days-fill", + "calendar-days-outline", + "calendar-fill", + "calendar-outline", + "camera-fill", + "camera-outline", + "camera-plus-fill", + "camera-plus-outline", + "caret-down-fill", + "caret-down-outline", + "caret-left-fill", + "caret-left-outline", + "caret-right-fill", + "caret-right-outline", + "caret-up-down-fill", + "caret-up-down-outline", + "caret-up-fill", + "caret-up-outline", + "catalog-builder-fill", + "catalog-builder-outline", + "catalog-fill", + "catalog-outline", + "cd-fill", + "cd-outline", + "cellphone-fill", + "cellphone-outline", + "change-fill", + "change-outline", + "change-past-fill", + "change-past-outline", + "change-planned-fill", + "change-planned-outline", + "chart-area-fill", + "chart-area-outline", + "chart-bar-column-fill", + "chart-bar-column-outline", + "chart-bar-group-fill", + "chart-bar-group-outline", + "chart-bar-horizontal-fill", + "chart-bar-horizontal-outline", + "chart-bar-search-fill", + "chart-bar-search-outline", + "chart-bar-vertical-fill", + "chart-bar-vertical-outline", + "chart-box-fill", + "chart-box-outline", + "chart-bubble-fill", + "chart-bubble-outline", + "chart-bullet-horizontal-fill", + "chart-bullet-horizontal-outline", + "chart-bullet-vertical-fill", + "chart-bullet-vertical-outline", + "chart-column-and-total-fill", + "chart-column-and-total-outline", + "chart-control-fill", + "chart-control-outline", + "chart-dial-fill", + "chart-dial-outline", + "chart-donut-fill", + "chart-donut-outline", + "chart-forecast-fill", + "chart-forecast-outline", + "chart-funnel-fill", + "chart-funnel-outline", + "chart-geomap-fill", + "chart-geomap-outline", + "chart-heatmap-fill", + "chart-heatmap-outline", + "chart-histogram-fill", + "chart-histogram-outline", + "chart-line-fill", + "chart-line-outline", + "chart-navigator-fill", + "chart-navigator-outline", + "chart-pareto-fill", + "chart-pareto-outline", + "chart-pie-fill", + "chart-pie-outline", + "chart-pivot-table-fill", + "chart-pivot-table-outline", + "chart-pyramid-fill", + "chart-pyramid-outline", + "chart-relative-compare-fill", + "chart-relative-compare-outline", + "chart-sankey-fill", + "chart-sankey-outline", + "chart-semi-donut-fill", + "chart-semi-donut-outline", + "chart-speedometer-fill", + "chart-speedometer-outline", + "chart-spider-fill", + "chart-spider-outline", + "chart-spline-fill", + "chart-spline-outline", + "chart-stepline-fill", + "chart-stepline-outline", + "chart-sunburst-fill", + "chart-sunburst-outline", + "chart-text-fill", + "chart-text-outline", + "chart-threshold-fill", + "chart-threshold-outline", + "chart-treemap-fill", + "chart-treemap-outline", + "chart-trend-fill", + "chart-trend-outline", + "chart-workbench-fill", + "chart-workbench-outline", + "chat-circle-exclamation-fill", + "chat-circle-exclamation-outline", + "chat-fill", + "chat-heart-fill", + "chat-heart-outline", + "chat-lock-fill", + "chat-lock-outline", + "chat-outline", + "chat-triangle-exclamation-fill", + "chat-triangle-exclamation-outline", + "check-fill", + "check-outline", + "checkbox-checked-fill", + "checkbox-checked-outline", + "checkbox-indeterminate-fill", + "checkbox-indeterminate-outline", + "checkbox-unchecked-fill", + "checkbox-unchecked-outline", + "checklist-fill", + "checklist-outline", + "chevron-down-fill", + "chevron-down-outline", + "chevron-left-fill", + "chevron-left-outline", + "chevron-right-fill", + "chevron-right-outline", + "chevron-up-fill", + "chevron-up-outline", + "chip-fill", + "chip-outline", + "circle-arrow-down-fill", + "circle-arrow-down-outline", + "circle-arrow-left-fill", + "circle-arrow-left-outline", + "circle-arrow-right-fill", + "circle-arrow-right-outline", + "circle-arrow-up-fill", + "circle-arrow-up-outline", + "circle-backward-fill", + "circle-backward-outline", + "circle-caret-down-fill", + "circle-caret-down-outline", + "circle-caret-left-fill", + "circle-caret-left-outline", + "circle-caret-right-fill", + "circle-caret-right-outline", + "circle-caret-up-fill", + "circle-caret-up-outline", + "circle-check-fill", + "circle-check-outline", + "circle-chevron-down-fill", + "circle-chevron-down-outline", + "circle-chevron-left-fill", + "circle-chevron-left-outline", + "circle-chevron-right-fill", + "circle-chevron-right-outline", + "circle-chevron-up-fill", + "circle-chevron-up-outline", + "circle-close-fill", + "circle-close-outline", + "circle-dashed-fill", + "circle-dashed-outline", + "circle-download-fill", + "circle-download-outline", + "circle-ellipsis-fill", + "circle-ellipsis-outline", + "circle-exclamation-fill", + "circle-exclamation-outline", + "circle-fill", + "circle-flag-event-fill", + "circle-flag-event-outline", + "circle-forward-fill", + "circle-forward-outline", + "circle-half-fill", + "circle-half-outline", + "circle-info-fill", + "circle-info-outline", + "circle-minus-fill", + "circle-minus-outline", + "circle-minus-vertical-fill", + "circle-minus-vertical-outline", + "circle-next-fill", + "circle-next-outline", + "circle-outline", + "circle-pause-fill", + "circle-pause-outline", + "circle-play-fill", + "circle-play-outline", + "circle-plus-fill", + "circle-plus-outline", + "circle-previous-fill", + "circle-previous-outline", + "circle-quarter-fill", + "circle-quarter-outline", + "circle-question-fill", + "circle-question-outline", + "circle-record-fill", + "circle-record-outline", + "circle-semi-check-fill", + "circle-semi-check-outline", + "circle-semi-percentage-fill", + "circle-semi-percentage-outline", + "circle-shuffle-fill", + "circle-shuffle-outline", + "circle-stop-fill", + "circle-stop-outline", + "circle-thick-fill", + "circle-thick-outline", + "circle-three-quarter-fill", + "circle-three-quarter-outline", + "circle-user-fill", + "circle-user-outline", + "circle-workflow-skip-fill", + "circle-workflow-skip-outline", + "clear-cache-fill", + "clear-cache-outline", + "clipboard-check-fill", + "clipboard-check-outline", + "clipboard-exclamation-fill", + "clipboard-exclamation-outline", + "clipboard-fill", + "clipboard-lines-fill", + "clipboard-lines-outline", + "clipboard-outline", + "clipboard-slash-fill", + "clipboard-slash-outline", + "clipboards-fill", + "clipboards-outline", + "clock-fill", + "clock-outline", + "clone-fill", + "clone-outline", + "close-fill", + "close-outline", + "cloud-checkmark-fill", + "cloud-checkmark-outline", + "cloud-fill", + "cloud-outline", + "cloud-slash-fill", + "cloud-slash-outline", + "code-edit-fill", + "code-edit-outline", + "code-fill", + "code-outline", + "cohort-analysis-fill", + "cohort-analysis-outline", + "collapse-fill", + "collapse-outline", + "combine-fill", + "combine-outline", + "comment-blank-fill", + "comment-blank-outline", + "comment-fill", + "comment-outline", + "comment-plus-fill", + "comment-plus-outline", + "compass-fill", + "compass-outline", + "component-bundle-fill", + "component-bundle-outline", + "component-fill", + "component-outline", + "conference-room-fill", + "conference-room-outline", + "configuration-item-fill", + "configuration-item-outline", + "connect-view-document-fill", + "connect-view-document-outline", + "console-fill", + "console-outline", + "contract-history-fill", + "contract-history-outline", + "crop-fill", + "crop-outline", + "cube-fill", + "cube-outline", + "currency-exchange-fill", + "currency-exchange-outline", + "currency-fill", + "currency-outline", + "cursor-fill", + "cursor-move-fill", + "cursor-move-outline", + "cursor-outline", + "dashboard-dial-fill", + "dashboard-dial-outline", + "database-error-fill", + "database-error-outline", + "database-fill", + "database-outline", + "database-search-fill", + "database-search-outline", + "decimal-fill", + "decimal-outline", + "desk-fill", + "desk-outline", + "diamond-exclamation-fill", + "diamond-exclamation-outline", + "diamond-fill", + "diamond-outline", + "direction-arrow-down-fill", + "direction-arrow-down-outline", + "direction-arrow-left-fill", + "direction-arrow-left-outline", + "direction-arrow-right-fill", + "direction-arrow-right-outline", + "direction-arrow-slight-left-fill", + "direction-arrow-slight-left-outline", + "direction-arrow-slight-right-fill", + "direction-arrow-slight-right-outline", + "direction-arrow-up-fill", + "direction-arrow-up-outline", + "document-archive-fill", + "document-archive-outline", + "document-audio-fill", + "document-audio-outline", + "document-blank-fill", + "document-blank-outline", + "document-blank-slash-fill", + "document-blank-slash-outline", + "document-certificate-fill", + "document-certificate-outline", + "document-code-fill", + "document-code-outline", + "document-excel-fill", + "document-excel-outline", + "document-fill", + "document-image-fill", + "document-image-outline", + "document-infected-fill", + "document-infected-outline", + "document-outline", + "document-pdf-fill", + "document-pdf-outline", + "document-plus-fill", + "document-plus-outline", + "document-powerpoint-fill", + "document-powerpoint-outline", + "document-ppt-fill", + "document-ppt-outline", + "document-question-mark-fill", + "document-question-mark-outline", + "document-template-fill", + "document-template-outline", + "document-txt-fill", + "document-txt-outline", + "document-video-fill", + "document-video-outline", + "document-xls-fill", + "document-xls-outline", + "documents-fill", + "documents-outline", + "door-fill", + "door-outline", + "double-chevron-left-fill", + "double-chevron-left-outline", + "double-chevron-right-fill", + "double-chevron-right-outline", + "double-slash-forward-fill", + "double-slash-forward-outline", + "download-code-fill", + "download-code-outline", + "download-fill", + "download-outline", + "download-slash-fill", + "download-slash-outline", + "drag-dots-fill", + "drag-dots-outline", + "drag-resize-fill", + "drag-resize-outline", + "drawer-fill", + "drawer-outline", + "dropdown-caret-fill", + "dropdown-caret-outline", + "dynamic-segment-fill", + "dynamic-segment-outline", + "elevator-fill", + "elevator-outline", + "ellipsis-horizontal-fill", + "ellipsis-horizontal-outline", + "ellipsis-vertical-fill", + "ellipsis-vertical-outline", + "emoji-negative-fill", + "emoji-negative-outline", + "emoji-neutral-fill", + "emoji-neutral-outline", + "emoji-positive-fill", + "emoji-positive-outline", + "emoji-slightly-negative-fill", + "emoji-slightly-negative-outline", + "emoji-smile-fill", + "emoji-smile-outline", + "envelope-arrow-fill", + "envelope-arrow-outline", + "envelope-fill", + "envelope-minus-fill", + "envelope-minus-outline", + "envelope-open-fill", + "envelope-open-outline", + "envelope-outline", + "envelope-plus-fill", + "envelope-plus-outline", + "escalator-fill", + "escalator-outline", + "exclamation-fill", + "exclamation-outline", + "expand-fill", + "expand-outline", + "eye-fill", + "eye-outline", + "eye-slash-fill", + "eye-slash-outline", + "facebook-fill", + "facebook-outline", + "field-name-fill", + "field-name-outline", + "filter-fill", + "filter-outline", + "fire-fill", + "fire-outline", + "fit-width-fill", + "fit-width-outline", + "flag-event-add-fill", + "flag-event-add-outline", + "flag-event-fill", + "flag-event-outline", + "flag-fill", + "flag-outline", + "flashlight-fill", + "flashlight-outline", + "flex-distribute-bottom-fill", + "flex-distribute-bottom-outline", + "flex-distribute-center-fill", + "flex-distribute-center-outline", + "flex-distribute-space-around-fill", + "flex-distribute-space-around-outline", + "flex-distribute-space-between-fill", + "flex-distribute-space-between-outline", + "flex-distribute-space-evenly-fill", + "flex-distribute-space-evenly-outline", + "flex-distribute-top-fill", + "flex-distribute-top-outline", + "flex-justify-center-fill", + "flex-justify-center-outline", + "flex-justify-left-fill", + "flex-justify-left-outline", + "flex-justify-right-fill", + "flex-justify-right-outline", + "flex-justify-space-around-fill", + "flex-justify-space-around-outline", + "flex-justify-space-between-fill", + "flex-justify-space-between-outline", + "flex-justify-space-evenly-fill", + "flex-justify-space-evenly-outline", + "floorplan-fill", + "floorplan-outline", + "folder-fill", + "folder-open-fill", + "folder-open-outline", + "folder-outline", + "food-fill", + "food-outline", + "form-fill", + "form-outline", + "formula-fill", + "formula-outline", + "fullscreen-fill", + "fullscreen-outline", + "gear-changes-fill", + "gear-changes-outline", + "gear-fill", + "gear-outline", + "gem-fill", + "gem-outline", + "glasses-fill", + "glasses-outline", + "globe-fill", + "globe-outline", + "graduation-cap-fill", + "graduation-cap-outline", + "grid-align-items-baseline-fill", + "grid-align-items-baseline-outline", + "grid-align-items-bottom-fill", + "grid-align-items-bottom-outline", + "grid-align-items-center-fill", + "grid-align-items-center-outline", + "grid-align-items-stretch-fill", + "grid-align-items-stretch-outline", + "grid-align-items-top-fill", + "grid-align-items-top-outline", + "grid-distribute-content-bottom-fill", + "grid-distribute-content-bottom-outline", + "grid-distribute-content-center-fill", + "grid-distribute-content-center-outline", + "grid-distribute-content-space-around-fill", + "grid-distribute-content-space-around-outline", + "grid-distribute-content-space-between-fill", + "grid-distribute-content-space-between-outline", + "grid-distribute-content-space-evenly-fill", + "grid-distribute-content-space-evenly-outline", + "grid-distribute-content-stretch-fill", + "grid-distribute-content-stretch-outline", + "grid-distribute-content-top-fill", + "grid-distribute-content-top-outline", + "grid-fill", + "grid-four-fill", + "grid-four-outline", + "grid-justify-content-center-fill", + "grid-justify-content-center-outline", + "grid-justify-content-left-fill", + "grid-justify-content-left-outline", + "grid-justify-content-right-fill", + "grid-justify-content-right-outline", + "grid-justify-content-space-around-fill", + "grid-justify-content-space-around-outline", + "grid-justify-content-space-between-fill", + "grid-justify-content-space-between-outline", + "grid-justify-content-space-evenly-fill", + "grid-justify-content-space-evenly-outline", + "grid-justify-content-stretch-fill", + "grid-justify-content-stretch-outline", + "grid-justify-items-baseline-fill", + "grid-justify-items-baseline-outline", + "grid-justify-items-center-fill", + "grid-justify-items-center-outline", + "grid-justify-items-left-fill", + "grid-justify-items-left-outline", + "grid-justify-items-right-fill", + "grid-justify-items-right-outline", + "grid-justify-items-stretch-fill", + "grid-justify-items-stretch-outline", + "grid-outline", + "grid-three-fill", + "grid-three-outline", + "grid-vertical-fill", + "grid-vertical-outline", + "hand-gear-fill", + "hand-gear-outline", + "handshake-fill", + "handshake-outline", + "harddrive-fill", + "harddrive-outline", + "headset-fill", + "headset-outline", + "health-screening-fill", + "health-screening-outline", + "health-status-fill", + "health-status-outline", + "heart-fill", + "heart-outline", + "heartbeat-fill", + "heartbeat-outline", + "home-fill", + "home-outline", + "hr-fill", + "hr-outline", + "id-fill", + "id-outline", + "image-fill", + "image-outline", + "image-plus-fill", + "image-plus-outline", + "image-slash-fill", + "image-slash-outline", + "images-fill", + "images-outline", + "inbox-archive-fill", + "inbox-archive-outline", + "inbox-fill", + "inbox-outline", + "inbox-queue-fill", + "inbox-queue-outline", + "insert-column-left-fill", + "insert-column-left-outline", + "insert-column-right-fill", + "insert-column-right-outline", + "insert-row-after-fill", + "insert-row-after-outline", + "insert-row-before-fill", + "insert-row-before-outline", + "instagram-fill", + "instagram-outline", + "integer-fill", + "integer-outline", + "inventory-circle-plus-fill", + "inventory-circle-plus-outline", + "inventory-fill", + "inventory-outline", + "isolation-fill", + "isolation-outline", + "item-indent-fill", + "item-indent-outline", + "item-unindent-fill", + "item-unindent-outline", + "journal-fill", + "journal-outline", + "key-fill", + "key-outline", + "keyboard-fill", + "keyboard-outline", + "keys-fill", + "keys-outline", + "kpi-fill", + "kpi-outline", + "label-fill", + "label-outline", + "laptop-fill", + "laptop-outline", + "layers-middle-fill", + "layers-middle-outline", + "layout-fill", + "layout-outline", + "lifesaver-fill", + "lifesaver-outline", + "lightbulb-fill", + "lightbulb-outline", + "lightning-fill", + "lightning-outline", + "lightning-slash-fill", + "lightning-slash-outline", + "link-fill", + "link-outline", + "linkedin-fill", + "linkedin-outline", + "list-fill", + "list-hide-fill", + "list-hide-outline", + "list-marker-fill", + "list-marker-outline", + "list-outline", + "list-show-fill", + "list-show-outline", + "live-feed-fill", + "live-feed-outline", + "live-feed-vertical-fill", + "live-feed-vertical-outline", + "loader-fill", + "loader-outline", + "lock-fill", + "lock-outline", + "magic-fill", + "magic-outline", + "magic-slash-fill", + "magic-slash-outline", + "magnifying-glass-check-fill", + "magnifying-glass-check-outline", + "magnifying-glass-fill", + "magnifying-glass-minus-fill", + "magnifying-glass-minus-outline", + "magnifying-glass-outline", + "magnifying-glass-plus-fill", + "magnifying-glass-plus-outline", + "map-direction-fill", + "map-direction-outline", + "map-fill", + "map-outline", + "map-pin-fill", + "map-pin-outline", + "map-pins-fill", + "map-pins-outline", + "marker-fill", + "marker-outline", + "market-fill", + "market-outline", + "maximize-fill", + "maximize-outline", + "media-back-fill", + "media-back-outline", + "media-next-fill", + "media-next-outline", + "megaphone-fill", + "megaphone-outline", + "mention-fill", + "mention-outline", + "menu-fill", + "menu-outline", + "microphone-fill", + "microphone-outline", + "microphone-slash-fill", + "microphone-slash-outline", + "microsoft-teams-fill", + "microsoft-teams-outline", + "minimize-fill", + "minimize-outline", + "minus-fill", + "minus-outline", + "minus-vertical-fill", + "minus-vertical-outline", + "modal-fill", + "modal-outline", + "monitor-exclamation-fill", + "monitor-exclamation-outline", + "monitor-fill", + "monitor-outline", + "move-item-down-fill", + "move-item-down-outline", + "move-item-left-fill", + "move-item-left-outline", + "move-item-right-fill", + "move-item-right-outline", + "move-item-up-fill", + "move-item-up-outline", + "news-fill", + "news-outline", + "note-fill", + "note-outline", + "number-fill", + "number-outline", + "official-verification-fill", + "official-verification-outline", + "okta-fill", + "okta-outline", + "ongoing-fill", + "ongoing-outline", + "open-link-left-fill", + "open-link-left-outline", + "open-link-right-fill", + "open-link-right-outline", + "outage-past-fill", + "outage-past-outline", + "outage-planned-fill", + "outage-planned-outline", + "palette-fill", + "palette-outline", + "panel-display-bottom-fill", + "panel-display-bottom-outline", + "panel-display-left-fill", + "panel-display-left-outline", + "panel-display-popout-fill", + "panel-display-popout-outline", + "panel-display-right-fill", + "panel-display-right-outline", + "paperclip-fill", + "paperclip-outline", + "pencil-fill", + "pencil-outline", + "pencil-page-fill", + "pencil-page-outline", + "percentage-fill", + "percentage-outline", + "phone-fill", + "phone-incoming-fill", + "phone-incoming-outline", + "phone-keypad-fill", + "phone-keypad-outline", + "phone-outgoing-fill", + "phone-outgoing-outline", + "phone-outline", + "phone-slash-fill", + "phone-slash-outline", + "phone-user-fill", + "phone-user-outline", + "pilcrow-fill", + "pilcrow-outline", + "pinterest-fill", + "pinterest-outline", + "playbook-fill", + "playbook-outline", + "plug-fill", + "plug-outline", + "plug-slash-fill", + "plug-slash-outline", + "plus-fill", + "plus-outline", + "pop-in-fill", + "pop-in-outline", + "power-fill", + "power-outline", + "presence-available-fill", + "presence-available-outline", + "presence-away-fill", + "presence-away-outline", + "presence-busy-fill", + "presence-busy-outline", + "presence-fill", + "presence-offline-fill", + "presence-offline-outline", + "presence-outline", + "printer-fill", + "printer-outline", + "publish-fill", + "publish-outline", + "puzzle-fill", + "puzzle-outline", + "qr-code-fill", + "qr-code-outline", + "quote-left-fill", + "quote-left-outline", + "quote-right-fill", + "quote-right-outline", + "radio-abc-scale-fill", + "radio-abc-scale-outline", + "radio-button-fill", + "radio-button-outline", + "radio-numeric-scale-fill", + "radio-numeric-scale-outline", + "ramp-fill", + "ramp-outline", + "record-activity-details-fill", + "record-activity-details-outline", + "record-activity-fill", + "record-activity-outline", + "record-activity-stream-fill", + "record-activity-stream-outline", + "record-activity-stream-vertical-fill", + "record-activity-stream-vertical-outline", + "rectangle-arrow-down-fill", + "rectangle-arrow-down-outline", + "redo-bottom-fill", + "redo-bottom-outline", + "redo-top-fill", + "redo-top-outline", + "replace-all-fill", + "replace-all-outline", + "replace-fill", + "replace-outline", + "reply-fill", + "reply-outline", + "reservation-fill", + "reservation-outline", + "restroom-fill", + "restroom-outline", + "roadmap-fill", + "roadmap-outline", + "rocketship-fill", + "rocketship-outline", + "rotate-clockwise-fill", + "rotate-clockwise-outline", + "rotate-counter-clockwise-fill", + "rotate-counter-clockwise-outline", + "save-fill", + "save-outline", + "scanner-fill", + "scanner-outline", + "score-fill", + "score-list-fill", + "score-list-outline", + "score-outline", + "script-check-fill", + "script-check-outline", + "script-fill", + "script-outline", + "select-element-fill", + "select-element-outline", + "send-fill", + "send-outline", + "separate-fill", + "separate-outline", + "serverbox-application-fill", + "serverbox-application-outline", + "serverbox-clock-fill", + "serverbox-clock-outline", + "serverbox-cloud-fill", + "serverbox-cloud-outline", + "serverbox-cluster-fill", + "serverbox-cluster-outline", + "serverbox-database-fill", + "serverbox-database-outline", + "serverbox-email-fill", + "serverbox-email-outline", + "serverbox-fill", + "serverbox-health-fill", + "serverbox-health-outline", + "serverbox-java-fill", + "serverbox-java-outline", + "serverbox-outline", + "shapes-fill", + "shapes-outline", + "share-fill", + "share-outline", + "shield-check-fill", + "shield-check-outline", + "shield-close-fill", + "shield-close-outline", + "shopping-cart-fill", + "shopping-cart-full-fill", + "shopping-cart-full-outline", + "shopping-cart-outline", + "shopping-cart-slash-fill", + "shopping-cart-slash-outline", + "signal-fill", + "signal-outline", + "size-fill", + "size-outline", + "slack-fill", + "slack-outline", + "sliders-fill", + "sliders-outline", + "sliders-vertical-fill", + "sliders-vertical-outline", + "sort-ascending-fill", + "sort-ascending-outline", + "sort-descending-fill", + "sort-descending-outline", + "speaker-fill", + "speaker-outline", + "spell-check-fill", + "spell-check-outline", + "split-vertical-fill", + "split-vertical-outline", + "square-arrow-down-fill", + "square-arrow-down-outline", + "square-arrow-left-fill", + "square-arrow-left-outline", + "square-arrow-right-fill", + "square-arrow-right-outline", + "square-arrow-up-fill", + "square-arrow-up-outline", + "square-arrow-up-right-fill", + "square-arrow-up-right-outline", + "square-c-fill", + "square-c-outline", + "square-close-fill", + "square-close-outline", + "square-curly-bracket-fill", + "square-curly-bracket-outline", + "square-dashed-fill", + "square-dashed-outline", + "square-fill", + "square-i-fill", + "square-i-outline", + "square-loop-fill", + "square-loop-outline", + "square-outline", + "square-p-fill", + "square-p-outline", + "square-question-fill", + "square-question-outline", + "square-s-fill", + "square-s-outline", + "square-share-fill", + "square-share-outline", + "stairs-fill", + "stairs-outline", + "star-fill", + "star-outline", + "status-fill", + "status-outline", + "stopwatch-fill", + "stopwatch-outline", + "stream-all-input-fill", + "stream-all-input-outline", + "stream-one-input-fill", + "stream-one-input-outline", + "sync-fill", + "sync-outline", + "syntax-check-fill", + "syntax-check-outline", + "syntax-pencil-fill", + "syntax-pencil-outline", + "table-fill", + "table-outline", + "tablet-fill", + "tablet-outline", + "tabset-fill", + "tabset-outline", + "tag-detail-fill", + "tag-detail-outline", + "tag-dot-fill", + "tag-dot-outline", + "tag-fill", + "tag-outline", + "tags-fill", + "tags-outline", + "target-fill", + "target-outline", + "text-bold-fill", + "text-bold-outline", + "text-fill", + "text-indent-fill", + "text-indent-outline", + "text-italic-fill", + "text-italic-outline", + "text-outline", + "text-style-add-fill", + "text-style-add-outline", + "text-style-clear-fill", + "text-style-clear-outline", + "text-type-fill", + "text-type-outline", + "text-underline-fill", + "text-underline-outline", + "text-unindent-fill", + "text-unindent-outline", + "threshold-bar-fill", + "threshold-bar-outline", + "thumbs-down-fill", + "thumbs-down-outline", + "thumbs-up-fill", + "thumbs-up-outline", + "thumbtack-fill", + "thumbtack-outline", + "thumbtack-slash-fill", + "thumbtack-slash-outline", + "ticket-fill", + "ticket-outline", + "ticket-plus-fill", + "ticket-plus-outline", + "timeline-fill", + "timeline-outline", + "today-dashed-fill", + "today-dashed-outline", + "today-fill", + "today-outline", + "toggle-fill", + "toggle-outline", + "toolbox-fill", + "toolbox-outline", + "translated-html-fill", + "translated-html-outline", + "translated-text-fill", + "translated-text-outline", + "trash-fill", + "trash-outline", + "tree-fill", + "tree-outline", + "tree-selected-fill", + "tree-selected-outline", + "tree-view-long-fill", + "tree-view-long-outline", + "tree-view-short-fill", + "tree-view-short-outline", + "tree-workflow-fill", + "tree-workflow-outline", + "triangle-exclamation-fill", + "triangle-exclamation-outline", + "tumblr-fill", + "tumblr-outline", + "twilio-fill", + "twilio-outline", + "twitter-fill", + "twitter-outline", + "unbind-fill", + "unbind-outline", + "undo-bottom-fill", + "undo-bottom-outline", + "undo-top-fill", + "undo-top-outline", + "unlink-fill", + "unlink-outline", + "unlock-fill", + "unlock-outline", + "upload-fill", + "upload-outline", + "user-escalation-fill", + "user-escalation-outline", + "user-feed-fill", + "user-feed-outline", + "user-fill", + "user-group-fill", + "user-group-outline", + "user-minus-fill", + "user-minus-outline", + "user-outline", + "user-plus-fill", + "user-plus-outline", + "user-tag-fill", + "user-tag-outline", + "user-transfer-fill", + "user-transfer-outline", + "user-verify-fill", + "user-verify-outline", + "user-wheelchair-fill", + "user-wheelchair-outline", + "vacation-fill", + "vacation-outline", + "vaccine-check-fill", + "vaccine-check-outline", + "venn-empty-fill", + "venn-empty-outline", + "venn-intersection-fill", + "venn-intersection-outline", + "venn-left-fill", + "venn-left-outline", + "venn-right-fill", + "venn-right-outline", + "venn-union-fill", + "venn-union-outline", + "video-chat-fill", + "video-chat-outline", + "video-fill", + "video-outline", + "video-plus-fill", + "video-plus-outline", + "video-slash-fill", + "video-slash-outline", + "viz-designer-fill", + "viz-designer-outline", + "walk-fill", + "walk-outline", + "window-code-fill", + "window-code-outline", + "window-dialog-fill", + "window-dialog-outline", + "window-fill", + "window-outline", + "windows-fill", + "windows-outline", + "wishlist-fill", + "wishlist-outline", + "work-note-fill", + "work-note-outline", + "workflow-approval-action-fill", + "workflow-approval-action-outline", + "workflow-fill", + "workflow-on-hold-fill", + "workflow-on-hold-outline", + "workflow-outline", + "workflow-skip-fill", + "workflow-skip-outline", + "wrench-fill", + "wrench-outline", + "wrench-pencil-fill", + "wrench-pencil-outline", + "youtube-fill", + "youtube-outline", + "zoom-fill", + "zoom-outline" + ] \ No newline at end of file diff --git a/src/x-759224-menu-builder-uic/index.js b/src/x-759224-menu-builder-uic/index.js index 96ac4f3..9e4578d 100644 --- a/src/x-759224-menu-builder-uic/index.js +++ b/src/x-759224-menu-builder-uic/index.js @@ -43,6 +43,7 @@ createCustomElement("x-1114407-menu-builder-uic", { * type: external or internal link * page: what page to link to if internal type link * sys_id: what sys_id to link to on a page if internal type link + * rightIcon: right icon * href: the href link for an external type link * } * If you look at how the default value is setup and compare it to the actual menu in a UI Builder portal page then hopefully the structure starts to make sense @@ -86,6 +87,7 @@ createCustomElement("x-1114407-menu-builder-uic", { label: "Browse Menu Item 1", type: "route", page: "article", + rightIcon:"document-fill", sys_id: "3020c9b1474321009db4b5b08b9a712d", href: null, }, @@ -449,6 +451,7 @@ createCustomElement("x-1114407-menu-builder-uic", { actionHandlers: { // This event is for updating the content of an individual menu item. The label, link type, href or page/sys_id values of the item has changed INPUT_UPDATED: ({ action: { payload }, dispatch }) => { + console.log(payload); dispatch("MENU_UPDATED", { menu: payload, }); diff --git a/src/x-759224-menu-builder-uic/styles/menu-item.scss b/src/x-759224-menu-builder-uic/styles/menu-item.scss index 5720add..094c03b 100644 --- a/src/x-759224-menu-builder-uic/styles/menu-item.scss +++ b/src/x-759224-menu-builder-uic/styles/menu-item.scss @@ -18,6 +18,10 @@ now-input { width: 100%; } + + now-dropdown { + max-width: 105px; + } } .rightMenu { From 97dc188e25c32d3d20a2cf71547329214bf00411 Mon Sep 17 00:00:00 2001 From: Deepak Singh Date: Wed, 18 Oct 2023 12:49:18 +0530 Subject: [PATCH 05/11] test: custom-component removing log function --- src/x-759224-menu-builder-uic/components/menu-item.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/x-759224-menu-builder-uic/components/menu-item.js b/src/x-759224-menu-builder-uic/components/menu-item.js index 0fb1f22..c55be96 100644 --- a/src/x-759224-menu-builder-uic/components/menu-item.js +++ b/src/x-759224-menu-builder-uic/components/menu-item.js @@ -267,8 +267,6 @@ createCustomElement("menu-item", { updateState({ iconInput: payload.item.id }); break; } - - console.log(); }, // Text input field has changed (someone typed in the field or cleared value for example) "NOW_INPUT#INPUT": ({ action: { payload }, updateState }) => { From 7eb125b6c86c539806961d84cb632e405e3a3524 Mon Sep 17 00:00:00 2001 From: Deepak Singh Date: Wed, 18 Oct 2023 12:58:58 +0530 Subject: [PATCH 06/11] doc: custom-component adding some documentation points --- src/x-759224-menu-builder-uic/components/menu-item.js | 5 ++++- src/x-759224-menu-builder-uic/index.js | 3 +-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/x-759224-menu-builder-uic/components/menu-item.js b/src/x-759224-menu-builder-uic/components/menu-item.js index c55be96..77d4c94 100644 --- a/src/x-759224-menu-builder-uic/components/menu-item.js +++ b/src/x-759224-menu-builder-uic/components/menu-item.js @@ -57,6 +57,7 @@ const view = ( }, }; + // adding rightIcon property to JSON if(iconValue){ actionJSON.value.rightIcon = iconValue } @@ -103,6 +104,8 @@ const view = ( > } ({ id: e, label: e }))]} selectedItems={[iconValue]} name="iconInput" @@ -264,7 +267,7 @@ createCustomElement("menu-item", { updateState({ typeInput: payload.item.id }); break; default: - updateState({ iconInput: payload.item.id }); + updateState({ iconInput: payload.item.id }); // action on icon selection break; } }, diff --git a/src/x-759224-menu-builder-uic/index.js b/src/x-759224-menu-builder-uic/index.js index 9e4578d..86c7dfa 100644 --- a/src/x-759224-menu-builder-uic/index.js +++ b/src/x-759224-menu-builder-uic/index.js @@ -43,7 +43,7 @@ createCustomElement("x-1114407-menu-builder-uic", { * type: external or internal link * page: what page to link to if internal type link * sys_id: what sys_id to link to on a page if internal type link - * rightIcon: right icon + * rightIcon: right icon property to show icon * href: the href link for an external type link * } * If you look at how the default value is setup and compare it to the actual menu in a UI Builder portal page then hopefully the structure starts to make sense @@ -451,7 +451,6 @@ createCustomElement("x-1114407-menu-builder-uic", { actionHandlers: { // This event is for updating the content of an individual menu item. The label, link type, href or page/sys_id values of the item has changed INPUT_UPDATED: ({ action: { payload }, dispatch }) => { - console.log(payload); dispatch("MENU_UPDATED", { menu: payload, }); From dfdb8c5e819f4b5f6f788b350fca6f88d97c6db5 Mon Sep 17 00:00:00 2001 From: Deepak Singh Date: Wed, 18 Oct 2023 13:00:47 +0530 Subject: [PATCH 07/11] refactor: custom-component removing unnecessary code --- src/x-759224-menu-builder-uic/components/menu-item.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/x-759224-menu-builder-uic/components/menu-item.js b/src/x-759224-menu-builder-uic/components/menu-item.js index 77d4c94..19091c3 100644 --- a/src/x-759224-menu-builder-uic/components/menu-item.js +++ b/src/x-759224-menu-builder-uic/components/menu-item.js @@ -268,7 +268,6 @@ createCustomElement("menu-item", { break; default: updateState({ iconInput: payload.item.id }); // action on icon selection - break; } }, // Text input field has changed (someone typed in the field or cleared value for example) From ae1b8b744e12d0f594cfc5a73db1881598a1404a Mon Sep 17 00:00:00 2001 From: Deepak Singh Date: Mon, 30 Oct 2023 11:18:21 +0530 Subject: [PATCH 08/11] feat: custom-component adding functinality to block menu & action after 4 recurring level --- .../components/menu-item.js | 16 +++++++++++----- .../components/menu-tree.js | 8 ++++++-- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/x-759224-menu-builder-uic/components/menu-item.js b/src/x-759224-menu-builder-uic/components/menu-item.js index 0839d7e..7ca0b60 100644 --- a/src/x-759224-menu-builder-uic/components/menu-item.js +++ b/src/x-759224-menu-builder-uic/components/menu-item.js @@ -12,7 +12,7 @@ import iconlist from "../icons"; const view = ( { - properties: { id, choice, label, type, page, sysId, href, expandParent, rightIcon }, + properties: { id, choice, label, type, page, sysId, href, expandParent, rightIcon, level }, labelInput, typeInput, pageInput, @@ -34,7 +34,7 @@ const view = ( const sysIdValue = sysIdInput || sysId; const hrefValue = hrefInput || href; const iconValue = iconInput || rightIcon; - + // This is constructing the JSON output that the chrome_menu UX Page Property expects for this specific menu item const routeJSON = { @@ -135,9 +135,12 @@ const view = (

}
-
- -
+ { + level < 4 ?
+ +
:
+ } +
@@ -251,6 +254,9 @@ createCustomElement("menu-item", { }, rightIcon: { default: null + }, + level: { + default: 0 } }, // Keeps track of any changes made during editing diff --git a/src/x-759224-menu-builder-uic/components/menu-tree.js b/src/x-759224-menu-builder-uic/components/menu-tree.js index c13c82f..02c511e 100644 --- a/src/x-759224-menu-builder-uic/components/menu-tree.js +++ b/src/x-759224-menu-builder-uic/components/menu-tree.js @@ -8,7 +8,7 @@ import "./menu-item"; // File description: This displays a top-level menu item (and child items), expand/collapse functionality for the container -const view = ({ properties: { tree }, expanded }, { updateState }) => { +const view = ({ properties: { tree, level }, expanded }, { updateState }) => { const { id, children, parent, choice, label, type, page, sys_id, href, rightIcon } = tree; @@ -43,6 +43,7 @@ const view = ({ properties: { tree }, expanded }, { updateState }) => { rightIcon={rightIcon} className="menu-item" expandParent={EXPAND_PARENT} + level={level} >
{/* Render child menu items in a collapsible container if they exist */} @@ -50,7 +51,7 @@ const view = ({ properties: { tree }, expanded }, { updateState }) => { @@ -68,6 +69,9 @@ createCustomElement("menu-tree", { tree: { default: {}, }, + level: { + default: 1 + } }, initialState: { expanded: true, From 55cdf9e537b3b40071e1d2f0749e2702009f9580 Mon Sep 17 00:00:00 2001 From: Deepak Singh Date: Mon, 30 Oct 2023 11:33:55 +0530 Subject: [PATCH 09/11] fix: custom-component resolved right icon issue due to menu & action add button --- src/x-759224-menu-builder-uic/components/menu-item.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/x-759224-menu-builder-uic/components/menu-item.js b/src/x-759224-menu-builder-uic/components/menu-item.js index 7ca0b60..fa9ebb0 100644 --- a/src/x-759224-menu-builder-uic/components/menu-item.js +++ b/src/x-759224-menu-builder-uic/components/menu-item.js @@ -34,7 +34,8 @@ const view = ( const sysIdValue = sysIdInput || sysId; const hrefValue = hrefInput || href; const iconValue = iconInput || rightIcon; - + console.log("TEST_CASE", iconValue); + // This is constructing the JSON output that the chrome_menu UX Page Property expects for this specific menu item const routeJSON = { @@ -112,7 +113,7 @@ const view = ( ({ id: e, label: e }))]} + items={[{ id: null, label: "no-icon" }, ...iconlist.map(e => ({ id: e, label: e, type: 'icon' }))]} selectedItems={[iconValue]} name="iconInput" select="single" @@ -278,13 +279,17 @@ createCustomElement("menu-item", { * Only handle this event if called from this component * Since menu-editor also uses this event */ + switch (payload.item.id) { case "route": case "external": updateState({ typeInput: payload.item.id }); break; default: - updateState({ iconInput: payload.item.id }); // action on icon selection + } + + if(payload.item.type === 'icon'){ + updateState({ iconInput: payload.item.id }); // action on icon selection } }, // Text input field has changed (someone typed in the field or cleared value for example) From 15261fd3f6a8c9f55cd27076568e4cf2c2eed8a5 Mon Sep 17 00:00:00 2001 From: Deepak Singh Date: Mon, 30 Oct 2023 11:34:41 +0530 Subject: [PATCH 10/11] refactor: custom-component removing logs --- src/x-759224-menu-builder-uic/components/menu-item.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/x-759224-menu-builder-uic/components/menu-item.js b/src/x-759224-menu-builder-uic/components/menu-item.js index fa9ebb0..68e67f5 100644 --- a/src/x-759224-menu-builder-uic/components/menu-item.js +++ b/src/x-759224-menu-builder-uic/components/menu-item.js @@ -34,7 +34,6 @@ const view = ( const sysIdValue = sysIdInput || sysId; const hrefValue = hrefInput || href; const iconValue = iconInput || rightIcon; - console.log("TEST_CASE", iconValue); // This is constructing the JSON output that the chrome_menu UX Page Property expects for this specific menu item From bd933636b71a44837ce3de3e70b335178d3583f9 Mon Sep 17 00:00:00 2001 From: Deepak Singh Date: Mon, 30 Oct 2023 13:01:29 +0530 Subject: [PATCH 11/11] fix: custom-component fixed removing rightIcon on selecting no-icon issue after adding level limit --- src/x-759224-menu-builder-uic/components/menu-item.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/x-759224-menu-builder-uic/components/menu-item.js b/src/x-759224-menu-builder-uic/components/menu-item.js index 68e67f5..2c7094c 100644 --- a/src/x-759224-menu-builder-uic/components/menu-item.js +++ b/src/x-759224-menu-builder-uic/components/menu-item.js @@ -112,7 +112,7 @@ const view = ( ({ id: e, label: e, type: 'icon' }))]} + items={[{ id: null, label: "no-icon", type: 'icon' }, ...iconlist.map(e => ({ id: e, label: e, type: 'icon' }))]} selectedItems={[iconValue]} name="iconInput" select="single"