From 54dc8a04eea28e431b4ddd40c9d6166f8c990da4 Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Tue, 3 Sep 2024 23:34:25 +0800 Subject: [PATCH 01/16] pkp/pkp-lib#9890 Define outline config in tailwind --- tailwind.config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/tailwind.config.js b/tailwind.config.js index 5d954bca4..806aba783 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -189,6 +189,10 @@ export default { }, ], }, + outlineColor: { + ...colors, + dark: '#101010', + }, }, plugins: [], }; From b222edb3935055c187e4f0425af92b2b5087d6bf Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Tue, 3 Sep 2024 23:35:15 +0800 Subject: [PATCH 02/16] pkp/pkp-lib#9890 Map index in items data for sidemenu component --- src/composables/useSideMenu.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/composables/useSideMenu.js b/src/composables/useSideMenu.js index 351ba490a..7e2b6aee2 100644 --- a/src/composables/useSideMenu.js +++ b/src/composables/useSideMenu.js @@ -53,10 +53,11 @@ export function useSideMenu(_items, _activeItemKey = '', _expandedKeys = {}) { function mapItems(_items, level = 1) { const result = []; - _items.forEach((_item) => { + _items.forEach((_item, index) => { const item = { ..._item, level, + index, }; if (_item.items) { From a3b3742d19378f2852e36c4b385a20c57c16ef33 Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Tue, 3 Sep 2024 23:35:48 +0800 Subject: [PATCH 03/16] pkp/pkp-lib#9890 Define border and outline classes for SideMenu component --- src/components/SideMenu/SideMenu.vue | 30 +++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/components/SideMenu/SideMenu.vue b/src/components/SideMenu/SideMenu.vue index 8737a4f1b..cae0de409 100644 --- a/src/components/SideMenu/SideMenu.vue +++ b/src/components/SideMenu/SideMenu.vue @@ -105,6 +105,11 @@ const emit = defineEmits([ ]); const navigationStyling = { + header: { + class: [ + 'focus-visible:outline focus-visible:outline-1 focus-visible:outline-dark', + ], + }, headerContent: () => { return { class: [ @@ -157,14 +162,15 @@ function getButtonStyles(item, isFocused) { const style = { // Base - 'inline-flex relative items-center gap-x-1 text-lg-medium py-2 px-3 w-full border-b border-b-light cursor-pointer': true, + 'inline-flex relative items-center gap-x-1 text-lg-medium py-2 px-3 w-full cursor-pointer': true, + // Default button styling - 'text-primary border-light hover:text-hover disabled:text-disabled': - !isActiveItem, + 'text-primary hover:text-hover disabled:text-disabled': !isActiveItem, backgroundVariant: !isActiveItem, + // Active 'text-on-dark bg-selection-dark': isActiveItem, - 'border-transparent': isActiveItem && !item.colorStripe, + // Indentions for child menus '!px-7': item.level === 2 && item.colorStripe, '!px-9': item.level === 2 && !item.colorStripe, @@ -172,12 +178,18 @@ function getButtonStyles(item, isFocused) { '!px-12': item.level === 3 && !item.colorStripe, '!px-14': item.level === 4 && item.colorStripe, '!px-16': item.level === 4 && !item.colorStripe, - // Additional border styling - 'border-t border-t-light': item.key === 'item_0', - 'border-s-8': item.colorStripe, - // Items with children + + // Border + 'border-b border-b-light': true, + 'border-transparent': isActiveItem && !item.colorStripe, + 'border-t border-t-light': item.index === 0 && item.level === 1, + '!border-s-8': !!item.colorStripe, + + // Outline (focus) + 'outline outline-1 outline-dark hover:outline-none': isFocused, + + // Root items with submenu '!text-lg-bold': item.items && item.level === 1, - 'border !border-dark': isFocused, }; // set the additional class if the button should include a color stripe From f2528d5a77a5cd6c011c77d602e45a5ca7ba8590 Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Tue, 3 Sep 2024 23:36:55 +0800 Subject: [PATCH 04/16] pkp/pkp-lib#9890 Update menu items mapping in sidenav for sidemenu --- src/components/SideNav/SideNav.vue | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/SideNav/SideNav.vue b/src/components/SideNav/SideNav.vue index 0b2a378db..2a76b43fe 100644 --- a/src/components/SideNav/SideNav.vue +++ b/src/components/SideNav/SideNav.vue @@ -42,7 +42,7 @@ const props = defineProps({ let currentActiveKey = ''; const items = reactive(convertLinksToArray(props.links)); -function convertLinksToArray(links, level = 1) { +function convertLinksToArray(links, level = 1, parentKey = '') { const result = []; for (const key in links) { @@ -55,11 +55,15 @@ function convertLinksToArray(links, level = 1) { }; if (link.submenu) { - item.items = convertLinksToArray(link.submenu, level + 1); + item.items = convertLinksToArray(link.submenu, level + 1, item.key); + } + + if (parentKey) { + item.key = `${parentKey}_${item.key}`; } if (link.isCurrent) { - currentActiveKey = key; + currentActiveKey = item.key; } result.push(item); From 0fdbaee64a250715629ce56fde4aab43a10f2943 Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Wed, 4 Sep 2024 02:21:03 +0800 Subject: [PATCH 05/16] pkp/pkp-lib#9890 Update links to sidemenu stories --- src/components/SideMenu/SideMenu.stories.js | 84 ++++++++++----------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/src/components/SideMenu/SideMenu.stories.js b/src/components/SideMenu/SideMenu.stories.js index 831bb4c2b..57ff178db 100644 --- a/src/components/SideMenu/SideMenu.stories.js +++ b/src/components/SideMenu/SideMenu.stories.js @@ -44,7 +44,7 @@ export const Default = { { label: 'Action required by me', key: 'action_required', - link: '#', + link: '#action_required', badge: { slot: 20, isWarnable: true, @@ -53,7 +53,7 @@ export const Default = { { label: 'Assigned to me', key: 'assigned_to_me', - link: '#', + link: '#assigned_to_me', badge: { slot: 45, }, @@ -61,7 +61,7 @@ export const Default = { { label: 'Active submissions', key: 'active_submissions', - link: '#', + link: '#active_submissions', badge: { slot: 100, }, @@ -69,7 +69,7 @@ export const Default = { { label: 'All in submission stage', key: 'all_in_submission_stage', - link: '#', + link: '#all_in_submission_stage', badge: { slot: 35, }, @@ -77,7 +77,7 @@ export const Default = { { label: 'Needs reviewers', key: 'needs_reviewers', - link: '#', + link: '#needs_reviewers', badge: { slot: 5, }, @@ -85,7 +85,7 @@ export const Default = { { label: 'Awaiting reviews', key: 'awaiting_reviews', - link: '#', + link: '#awaiting_reviews', badge: { slot: 6, }, @@ -93,7 +93,7 @@ export const Default = { { label: 'Reviews submitted', key: 'reviews_submitted', - link: '#', + link: '#reviews_submitted', badge: { slot: 4, }, @@ -101,7 +101,7 @@ export const Default = { { label: 'Reviews overdue', key: 'reviews_overdue', - link: '#', + link: '#reviews_overdue', badge: { slot: 10, isWarnable: true, @@ -110,7 +110,7 @@ export const Default = { { label: 'Author revisions submitted', key: 'author_revisions_submitted', - link: '#', + link: '#author_revisions_submitted', badge: { slot: 5, }, @@ -118,7 +118,7 @@ export const Default = { { label: 'All in review stage', key: 'all_in_review_stage', - link: '#', + link: '#all_in_review_stage', badge: { slot: 10, }, @@ -126,7 +126,7 @@ export const Default = { { label: 'All in copyediting stage', key: 'all_in_copyediting_stage', - link: '#', + link: '#all_in_copyediting_stage', badge: { slot: 10, }, @@ -134,7 +134,7 @@ export const Default = { { label: 'All in production stage', key: 'all_in_production_stage', - link: '#', + link: '#all_in_production_stage', badge: { slot: 12, }, @@ -142,7 +142,7 @@ export const Default = { { label: 'Scheduled for publishing', key: 'scheduled_for_publishing', - link: '#', + link: '#scheduled_for_publishing', badge: { slot: 16, }, @@ -150,7 +150,7 @@ export const Default = { { label: 'Published', key: 'published', - link: '#', + link: '#published', badge: { slot: 75, }, @@ -158,7 +158,7 @@ export const Default = { { label: 'Declined', key: 'declined', - link: '#', + link: '#declined', badge: { slot: 10, }, @@ -178,37 +178,37 @@ export const Default = { label: 'My Assignments as Reviewer', key: 'my_assignments_as_reviewer', icon: 'ReviewAssignments', - link: '#', + link: '#ReviewAssignments', }, { label: 'My Submissions as Author', key: 'my_submissions_as_author', icon: 'MySubmissions', - link: '#', + link: '#MySubmissions', }, { label: 'Issues', key: 'issues', icon: 'Issues', - link: '#', + link: '#Issues', }, { label: 'Announcements', key: 'announcements', icon: 'Announcements', - link: '#', + link: '#Announcements', }, { label: 'DOIs', key: 'dois', icon: 'NavDoi', - link: '#', + link: '#NavDoi', }, { label: 'Institutes', key: 'institutes', icon: 'Institutes', - link: '#', + link: '#Institutes', }, ], }, @@ -239,49 +239,49 @@ export const WithColorStripe = { { label: 'Desk Review', key: 'desk_review', - link: '#', + link: '#desk_review', colorStripe: 'border-stage-desk-review', }, { label: 'Review', key: 'review', - link: '#', + link: '#review', colorStripe: 'border-stage-in-review', }, { label: 'Copyediting', key: 'copyediting', - link: '#', + link: '#copyediting', colorStripe: 'border-stage-copyediting', }, { label: 'Production', key: 'production', - link: '#', + link: '#production', colorStripe: 'border-stage-production', }, { label: 'Scheduled', key: 'scheduled', - link: '#', + link: '#scheduled', colorStripe: 'border-stage-scheduled-for-publishing', }, { label: 'Incomoplete Submission', key: 'incomplete_submission', - link: '#', + link: '#incomplete_submission', colorStripe: 'border-stage-incomplete-submission', }, { label: 'Published', key: 'published', - link: '#', + link: '#published', colorStripe: 'border-stage-published', }, { label: 'Declined', key: 'declined', - link: '#', + link: '#declined', colorStripe: 'border-stage-declined', }, ], @@ -316,35 +316,35 @@ export const ExpandedMenu = { { label: 'Submission', key: 'submission', - link: '#', + link: '#submission', colorStripe: 'border-stage-desk-review', }, { label: 'Review', key: 'review', - link: '#', + link: '#review', items: [ { label: 'Review Round 1', key: 'review_round_1', - link: '#', + link: '#review_round_1', }, { label: 'New Review Round', key: 'new_review_round', - link: '#', + link: '#new_review_round', }, ], }, { label: 'Copyediting', key: 'copyediting', - link: '#', + link: '#copyediting', }, { label: 'Production', key: 'production', - link: '#', + link: '#production', }, ], }, @@ -357,37 +357,37 @@ export const ExpandedMenu = { { label: 'Title & Abstract', key: 'title_and_abstract', - link: '#', + link: '#title_and_abstract', }, { label: 'Contributors', key: 'contributors', - link: '#', + link: '#contributors', }, { label: 'Metadata', key: 'metadata', - link: '#', + link: '#metadata', }, { label: 'References', key: 'references', - link: '#', + link: '#references', }, { label: 'Galleys', key: 'galleys', - link: '#', + link: '#galleys', }, { label: 'Permissions & Disclosure', key: 'permissions_and_disclosure', - link: '#', + link: '#permissions_and_disclosure', }, { label: 'Issue', key: 'issue', - link: '#', + link: '#issue', }, ], }, From 3250739a4f6b0a88277c1c8754f61265cd5d7d1c Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Wed, 4 Sep 2024 02:22:23 +0800 Subject: [PATCH 06/16] pkp/pkp-lib#9890 Add command on root items to navigate to links --- src/composables/useSideMenu.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/composables/useSideMenu.js b/src/composables/useSideMenu.js index 7e2b6aee2..caddf62ea 100644 --- a/src/composables/useSideMenu.js +++ b/src/composables/useSideMenu.js @@ -64,6 +64,12 @@ export function useSideMenu(_items, _activeItemKey = '', _expandedKeys = {}) { item.items = mapItems(_item.items, level + 1); } + if (level === 1 && item.link && !_item.items) { + item.command = () => { + window.location.href = item.link; + }; + } + result.push(item); }); From 3686a17ff264dc0b04596da22ff7ace87cec412c Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Thu, 12 Sep 2024 01:19:10 +0800 Subject: [PATCH 07/16] pkp/pkp-lib#9890 Add new colorVariant 'attention' to Badge component --- src/components/Badge/Badge.vue | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Badge/Badge.vue b/src/components/Badge/Badge.vue index ea67a30f0..102781536 100644 --- a/src/components/Badge/Badge.vue +++ b/src/components/Badge/Badge.vue @@ -54,6 +54,7 @@ export default { 'negative-bg', 'stage-in-review-bg', 'success-bg', + 'attention', ].includes(prop), }, /** */ @@ -74,13 +75,17 @@ export default { const colorVariant = this.colorVariant; return { // base - 'inline-block py-1 px-4 text-base-normal rounded-[1.2em] border': true, + 'inline-block py-1 px-3 text-base-normal rounded-[1.2em] border': true, // default 'text-default border-light': colorVariant === 'default', // default-on-dark 'text-on-dark border-light': colorVariant === 'default-on-dark', // primary - 'border-primary text-primary': colorVariant === 'primary', + 'border-primary text-primary bg-secondary': + colorVariant === 'primary', + // attention-border + 'border-attention text-attention bg-secondary': + colorVariant === 'attention', // primary-bg 'bg-primary text-on-dark border-primary': colorVariant === 'primary-bg', From de59e0834def595abbb26ce31a67f94a72667a63 Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Thu, 12 Sep 2024 01:24:29 +0800 Subject: [PATCH 08/16] pkp/pkp-lib#9890 Remove added outlineColor in tailwind config --- tailwind.config.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index 806aba783..5d954bca4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -189,10 +189,6 @@ export default { }, ], }, - outlineColor: { - ...colors, - dark: '#101010', - }, }, plugins: [], }; From 7133bc05c57cd03e31df9ab5e3842d905bb1ab0a Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Thu, 12 Sep 2024 01:26:08 +0800 Subject: [PATCH 09/16] pkp/pkp-lib#9890 Change background color when an item is infocus in sidemenu component --- src/components/SideMenu/SideMenu.vue | 34 ++++++++-------------------- 1 file changed, 10 insertions(+), 24 deletions(-) diff --git a/src/components/SideMenu/SideMenu.vue b/src/components/SideMenu/SideMenu.vue index cae0de409..534291167 100644 --- a/src/components/SideMenu/SideMenu.vue +++ b/src/components/SideMenu/SideMenu.vue @@ -13,13 +13,10 @@ v-bind="itemProps.action" :href="item.link" tabindex="-1" - @click="handleClick(item)" > @@ -96,19 +93,13 @@ const props = defineProps({ }); const emit = defineEmits([ - /** When a panel menu item's "action" is clicked */ - 'action', - /** When the item with link is clicked */ - 'update:activeItemKey', /** When the expandedKeys gets updated by the PanelMenu */ 'update:expandedKeys', ]); const navigationStyling = { header: { - class: [ - 'focus-visible:outline focus-visible:outline-1 focus-visible:outline-dark', - ], + class: ['focus-visible:outline-none focus-visible:bg-hover'], }, headerContent: () => { return { @@ -142,16 +133,6 @@ const navigationStyling = { }, }; -function handleClick(item) { - if (item.action) { - emit('action', item.action, {...item.actionArgs, key: item.key}); - } - - if (!item.items) { - emit('update:activeItemKey', item.key); - } -} - function isActive(item) { const currentActiveKey = props.activeItemKey; return currentActiveKey && currentActiveKey === item?.key; @@ -165,7 +146,8 @@ function getButtonStyles(item, isFocused) { 'inline-flex relative items-center gap-x-1 text-lg-medium py-2 px-3 w-full cursor-pointer': true, // Default button styling - 'text-primary hover:text-hover disabled:text-disabled': !isActiveItem, + 'text-primary hover:text-hover disabled:text-disabled hover:bg-hover hover:text-on-dark': + !isActiveItem, backgroundVariant: !isActiveItem, // Active @@ -186,10 +168,10 @@ function getButtonStyles(item, isFocused) { '!border-s-8': !!item.colorStripe, // Outline (focus) - 'outline outline-1 outline-dark hover:outline-none': isFocused, + 'bg-hover !text-on-dark': isFocused && !isActiveItem, // Root items with submenu - '!text-lg-bold': item.items && item.level === 1, + '!text-lg-bold': item.level === 1, }; // set the additional class if the button should include a color stripe @@ -210,4 +192,8 @@ a.text-on-dark:focus, a.text-on-dark:active { color: rgb(255 255 255 / var(--tw-text-opacity)); } + +div[data-pc-section='header']:focus-visible a { + @apply text-on-dark; +} From 75313217c732c7ea013955e5913a2de1456c346d Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Thu, 12 Sep 2024 01:28:50 +0800 Subject: [PATCH 10/16] pkp/pkp-lib#9890 Add onActionFn parameter in useSideMenu api and map item.command function to handle click events --- src/components/Modal/SideModal.stories.js | 7 ++- src/components/SideMenu/SideMenu.stories.js | 35 ++++++------ src/components/SideNav/SideNav.vue | 9 ++-- src/composables/useSideMenu.js | 16 +++++- src/composables/useSideMenu.mdx | 59 ++++++++++++++++----- 5 files changed, 88 insertions(+), 38 deletions(-) diff --git a/src/components/Modal/SideModal.stories.js b/src/components/Modal/SideModal.stories.js index 9e507bad7..44fd7fda5 100644 --- a/src/components/Modal/SideModal.stories.js +++ b/src/components/Modal/SideModal.stories.js @@ -513,10 +513,9 @@ const SideModalWithSideMenu = { }, ]; - const {sideMenuProps, setExpandedKeys} = useSideMenu( - items, - 'review_round_1', - ); + const {sideMenuProps, setExpandedKeys} = useSideMenu(items, { + activeItemKey: 'review_round_1', + }); setExpandedKeys(['workflow', 'review', 'publication']); return {metadata, generalInformation, items, sideMenuProps}; diff --git a/src/components/SideMenu/SideMenu.stories.js b/src/components/SideMenu/SideMenu.stories.js index 57ff178db..deb8c256d 100644 --- a/src/components/SideMenu/SideMenu.stories.js +++ b/src/components/SideMenu/SideMenu.stories.js @@ -1,5 +1,6 @@ import SideMenu from './SideMenu.vue'; import {useSideMenu} from '@/composables/useSideMenu.js'; +import {useModal} from '@/composables/useModal.js'; export default { title: 'Components/SideMenu', @@ -7,15 +8,21 @@ export default { render: (args) => ({ components: {SideMenu}, setup() { - const {sideMenuProps, setExpandedKeys, setActiveItemKey} = useSideMenu( - args.items, - 'action_required', - ); + const {sideMenuProps, setExpandedKeys} = useSideMenu(args.items, { + activeItemKey: 'action_required', + onActionFn: handleActions, + }); setExpandedKeys(['action_required', 'editorial_dashboard']); + const {openDialog} = useModal(); function startNewSubmission(actionArgs) { - setActiveItemKey(actionArgs.key); + openDialog({ + name: 'startNewSubmission', + title: 'Start New Submission', + message: 'Modal for starting new submission', + close: () => {}, + }); } function handleActions(action, actionArgs) { @@ -27,9 +34,9 @@ export default { console.error(`No handler for action: ${action}`); } } - return {args, sideMenuProps, handleActions}; + return {args, sideMenuProps}; }, - template: '', + template: '', }), }; @@ -47,7 +54,7 @@ export const Default = { link: '#action_required', badge: { slot: 20, - isWarnable: true, + colorVariant: 'attention', }, }, { @@ -104,7 +111,7 @@ export const Default = { link: '#reviews_overdue', badge: { slot: 10, - isWarnable: true, + colorVariant: 'attention', }, }, { @@ -220,10 +227,9 @@ export const WithColorStripe = { setup() { const activeItemKey = 'submission_stages'; const expandedKeys = ['submission_stages']; - const {sideMenuProps, setExpandedKeys} = useSideMenu( - args.items, + const {sideMenuProps, setExpandedKeys} = useSideMenu(args.items, { activeItemKey, - ); + }); setExpandedKeys(expandedKeys); return {args, sideMenuProps}; @@ -296,10 +302,9 @@ export const ExpandedMenu = { setup() { const activeItemKey = 'review_round_1'; const expandedKeys = ['workflow', 'review', 'publication']; - const {sideMenuProps, setExpandedKeys} = useSideMenu( - args.items, + const {sideMenuProps, setExpandedKeys} = useSideMenu(args.items, { activeItemKey, - ); + }); setExpandedKeys(expandedKeys); return {args, sideMenuProps}; diff --git a/src/components/SideNav/SideNav.vue b/src/components/SideNav/SideNav.vue index 2a76b43fe..e2a8f312b 100644 --- a/src/components/SideNav/SideNav.vue +++ b/src/components/SideNav/SideNav.vue @@ -98,9 +98,8 @@ function getExpandedKeys(items) { return _expandedKeys; } -const {sideMenuProps} = useSideMenu( - items, - currentActiveKey, - getExpandedKeys(items), -); +const {sideMenuProps} = useSideMenu(items, { + activeItemKey: currentActiveKey, + expandedKeys: getExpandedKeys(items), +}); diff --git a/src/composables/useSideMenu.js b/src/composables/useSideMenu.js index caddf62ea..858ebf738 100644 --- a/src/composables/useSideMenu.js +++ b/src/composables/useSideMenu.js @@ -1,6 +1,10 @@ import {toRef, ref, computed} from 'vue'; -export function useSideMenu(_items, _activeItemKey = '', _expandedKeys = {}) { +export function useSideMenu(_items, opts = {}) { + const _activeItemKey = opts.activeItemKey || ''; + const _expandedKeys = opts.expandedKeys || {}; + const onActionFn = opts.onActionFn || (() => {}); + const itemsRef = toRef(_items); if (typeof itemsRef.value === 'undefined') { throw new Error('items must be provided to use this api'); @@ -64,9 +68,17 @@ export function useSideMenu(_items, _activeItemKey = '', _expandedKeys = {}) { item.items = mapItems(_item.items, level + 1); } - if (level === 1 && item.link && !_item.items) { + if (item.link) { item.command = () => { window.location.href = item.link; + setActiveItemKey(item.key); + }; + } + + if (item.action) { + item.command = () => { + onActionFn(item.action, {...item.actionArgs, key: item.key}); + setActiveItemKey(item.key); }; } diff --git a/src/composables/useSideMenu.mdx b/src/composables/useSideMenu.mdx index 0620fad37..7a39e0f33 100644 --- a/src/composables/useSideMenu.mdx +++ b/src/composables/useSideMenu.mdx @@ -4,7 +4,7 @@ ## Usage -To use the `useSideMenu` composable, first import it and then invoke it within your setup function. You need to pass the `items` array that represents your menu structure, and optionally pass an initial `activeItemKey`, an object of `expandedKeys`. +To use the `useSideMenu` composable, first import it and then invoke it within your setup function. You need to pass the `items` array that represents your menu structure, and optionally pass an `opts` object. The `opts` object can include an initial `activeItemKey` and an `expandedKeys` object. If a menu item includes an `action` that should be triggered when clicked, you can pass this function within the `opts` object using the `onActionFn` attribute. ```javascript const items = [ @@ -12,20 +12,49 @@ const items = [ label: 'Menu Item 1', key: 'menuItem1', items: [ - {label: 'Item 1.1', key: 'menuItem1_1'}, + { + label: 'Item 1.1', + key: 'menuItem1_1', + action: 'openModal', + actionArgs: {}, + }, {label: 'Item 1.2', key: 'menuItem1_2'}, ], }, { label: 'Menu Item 2', key: 'menuItem2', - items: [{label: 'Item 2.1', key: 'menuItem2_1'}], + items: [ + { + label: 'Item 2.1', + key: 'menuItem2_1', + action: 'openSideModal', + actionArgs: {}, + }, + ], }, ]; -const {activeItemKey, setActiveItemKey} = useSideMenu(items, 'menuItem1_1', { - menuItem1: true, - menuItem2: true, +function handleActions(action, actionArgs) { + switch (action) { + case 'openModal': + openModal(actionArgs); + break; + case 'openSideModal': + openSideModal(actionArgs); + break; + default: + console.error(`No handler for action: ${action}`); + } +} + +const {activeItemKey, setActiveItemKey} = useSideMenu(items, { + activeItemKey: 'menuItem1_1', + expandedKeys: { + menuItem1: true, + menuItem2: true, + }, + onActionFn: handleActions, }); ``` @@ -76,9 +105,12 @@ const {selectedItem} = useSideMenu(items, 'menuItem2_1'); // will return {label: This function allows you to set a new active item key dynamically from within your component or from other components that consume the `useSideMenu` composable. It accepts a string that represents the key of the item you want to set as active. This value will be assigned to the `activeItemKey` ref. ```javascript -const {activeItemKey, setActiveItemKey} = useSideMenu(items, 'menuItem1_1', { - menuItem1: true, - menuItem2: true, +const {activeItemKey, setActiveItemKey} = useSideMenu(items, { + activeItemKey: 'menuItem1_1', + expandedKeys: { + menuItem1: true, + menuItem2: true, + }, }); function someEvent() { @@ -91,9 +123,12 @@ function someEvent() { It allows you to dynamically update new set of keys that should be expanded in the `SideMenu` component. It accepts an array of strings where each string represents a key that should be expanded in the side menu. ```javascript -const {expandedKeys, setExpandedKeys} = useSideMenu(items, 'menuItem1_1', { - menuItem1: true, - menuItem2: true, +const {expandedKeys, setExpandedKeys} = useSideMenu(items, { + activeItemKey: 'menuItem1_1', + expandedKeys: { + menuItem1: true, + menuItem2: true, + }, }); function someEvent() { From c5078679410d47e28c9f6e93482903049d93bc72 Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Thu, 12 Sep 2024 01:41:59 +0800 Subject: [PATCH 11/16] pkp/pkp-lib#9890 Add link color override in DropdownActions component --- src/components/DropdownActions/DropdownActions.vue | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/DropdownActions/DropdownActions.vue b/src/components/DropdownActions/DropdownActions.vue index dd0335091..f1dbba826 100644 --- a/src/components/DropdownActions/DropdownActions.vue +++ b/src/components/DropdownActions/DropdownActions.vue @@ -126,3 +126,14 @@ const isValidAction = (action) => { return action?.label && (action?.url || action?.name); }; + + From 5b450e95f32daa5d0a8b35efa44daa1193a3da34 Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Thu, 12 Sep 2024 01:50:32 +0800 Subject: [PATCH 12/16] pkp/pkp-lib#9890 Add comment on setting the css property for itemlink in SideMenu component --- src/components/SideMenu/SideMenu.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/SideMenu/SideMenu.vue b/src/components/SideMenu/SideMenu.vue index 534291167..11ed3c7b5 100644 --- a/src/components/SideMenu/SideMenu.vue +++ b/src/components/SideMenu/SideMenu.vue @@ -193,6 +193,7 @@ a.text-on-dark:active { color: rgb(255 255 255 / var(--tw-text-opacity)); } +/* In this case we need to set the font-color of the if the current focus is in the header section */ div[data-pc-section='header']:focus-visible a { @apply text-on-dark; } From 41b929d0ac6743730efa5c3e65a92ae50af6fecb Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Thu, 12 Sep 2024 03:48:52 +0800 Subject: [PATCH 13/16] pkp/pkp-lib#9890 Use SideNav component in Page story --- src/components/Container/Page.stories.js | 49 ++---------------------- 1 file changed, 4 insertions(+), 45 deletions(-) diff --git a/src/components/Container/Page.stories.js b/src/components/Container/Page.stories.js index da259828f..a143ec807 100644 --- a/src/components/Container/Page.stories.js +++ b/src/components/Container/Page.stories.js @@ -1,6 +1,7 @@ import {computed} from 'vue'; import Page from './Page.vue'; import Dropdown from '@/components/Dropdown/Dropdown.vue'; +import SideNav from '@/components/SideNav/SideNav.vue'; import PageMock from '@/mocks/page'; export default { @@ -10,7 +11,7 @@ export default { export const Default = { render: (args) => ({ - components: {Page, Dropdown}, + components: {Page, Dropdown, SideNav}, setup() { const classes = computed(() => { let _classes = []; @@ -108,50 +109,8 @@ export const Default = {
- + +