diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 7fcb6b7182..4adde4d7b2 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -74,7 +74,6 @@ export default defineConfig({ { text: 'Input', link: '/components/input' }, { text: 'Input Switch', link: '/components/input-switch' }, { text: 'Label', link: '/components/label' }, - { text: 'Menu', link: '/components/menu' }, { text: 'Modal', link: '/components/modal' }, { text: 'Modal Fullscreen', link: '/components/modal-fullscreen' }, { text: 'Multiselect', link: '/components/multiselect' }, diff --git a/docs/components/menu.md b/docs/components/menu.md deleted file mode 100644 index 4f57621550..0000000000 --- a/docs/components/menu.md +++ /dev/null @@ -1,228 +0,0 @@ -# Menu - -**KMenu** - Menu component - - - -```html - -``` - -## Props - -### items - -An array of items to populate the menu with. The value passed for the `items` prop should adhere to this type interface: - -```ts -export interface MenuItem { - title: string - description?: string -} - -export interface KMenuItemType extends MenuItem { - expandable: boolean - type: 'string' | 'number' | 'divider' -} -``` - -Properties: - -- `title` - menu item label -- `description` - text displayed when `expandable` item is expanded -- `expandable` - boolean of whether or not this item is expandable -- `type` - supported values: `string`, `number`, `divider` - -> Note: `type='divider'` will insert an empty item that is just an `
`. - - - -```html - - - -``` - -### width - -You can pass a `width` string for **KMenu**. Currently we support numbers (will be converted to `px`), `auto`, and percentages for width. - -By default the `width` is set to `284px`. - - - -```html - -``` - -## KMenuItem - -**KMenu** generates a **KMenuItem** for each item in the `items` property. - -### Properties - -- `item` - the menu item content is built from this. - - Properties: - - `title` - menu item label - - `description` - text displayed when `expandable` item is expanded - - Interface: - ```ts - export interface MenuItem { - title: string - description?: string - } - ``` -- `type` - supported values: `string`, `number`, `divider` -- `expandable` - boolean of whether or not this item is expandable -- `lastMenuItem` - boolean of whether or not this is the last item in the menu (for styling) - -```html - -``` - -### Item Slots - -- `itemTitle` - the title content for the menu item -- `itemBody` - the body content for the menu item - -```html - - - - -``` - -## Slots - -- `body` - The body of the menu, we expect this to be an array of `KMenuItem` components. This should be used instead of the `items` property. -- `actionButton` - the button at the bottom of the menu - - - - - - -```html - - - - -``` - - - - diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md index 597f8155a7..f93d202555 100644 --- a/docs/guide/migrating-to-version-9.md +++ b/docs/guide/migrating-to-version-9.md @@ -390,6 +390,8 @@ No breaking changes. ### KMenu +This component has been removed. + ### KMethodBadge This component has been removed. Please refer to KBadge component which has been updated to support method appearances. diff --git a/src/components/KMenu/KMenu.cy.ts b/src/components/KMenu/KMenu.cy.ts deleted file mode 100644 index 56b2df8558..0000000000 --- a/src/components/KMenu/KMenu.cy.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { mount } from 'cypress/vue' -import KMenu from '@/components/KMenu/KMenu.vue' -import type { KMenuItemType } from '@/components/KMenu/KMenu.vue' - -/** - * ALL TESTS MUST USE testMode: true - * We generate unique IDs for reference by aria properties. Test mode strips these out - * allowing for successful snapshot verification. - * props: { - * testMode: true - * } - */ - -const getItems = (count: number): KMenuItemType[] => { - const myItems = [] - - for (let i = 0; i < count; i++) { - myItems.push({ - title: 'Item ' + i, - type: Math.random() < 0.5 ? 'string' : 'number', - expandable: Math.random() < 0.5, - description: "The item's description for number " + i, - }) - } - - return myItems -} - -const customItem = { - title: 'Item #', - description: 'Cras aliquet auctor ex ut hendrerit. Donec sagittis est nec aliquet semper. Quisque feugiat metus orci, at ullamcorper odio molestie non. Nam dignissim sed ligula ut commodo.', - expandable: true, -} - -describe('KMenu', () => { - it('renders proper menu when using props', () => { - mount(KMenu, { - props: { - items: getItems(5), - testMode: true, - }, - }) - - cy.get('.k-menu').should('be.visible') - cy.get('.k-menu-item').should('have.length', 5) - }) - - it('shows chevron down icon', () => { - mount(KMenu, { - props: { - items: [customItem], - testMode: true, - }, - }) - - cy.get('.k-menu').should('be.visible') - cy.get('.k-menu-item .k-button .span-icon-container').should('be.visible') - }) -}) diff --git a/src/components/KMenu/KMenu.vue b/src/components/KMenu/KMenu.vue deleted file mode 100644 index a67fa97c15..0000000000 --- a/src/components/KMenu/KMenu.vue +++ /dev/null @@ -1,124 +0,0 @@ - - - - - diff --git a/src/components/KMenu/KMenuDivider.vue b/src/components/KMenu/KMenuDivider.vue deleted file mode 100644 index 6718994212..0000000000 --- a/src/components/KMenu/KMenuDivider.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - - - diff --git a/src/components/KMenu/KMenuItem.vue b/src/components/KMenu/KMenuItem.vue deleted file mode 100644 index d74d30a902..0000000000 --- a/src/components/KMenu/KMenuItem.vue +++ /dev/null @@ -1,186 +0,0 @@ - - - - - diff --git a/src/components/index.ts b/src/components/index.ts index aabf3d6f01..1953f6c0f7 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -28,8 +28,6 @@ export { default as KInlineEdit } from './KInlineEdit/KInlineEdit.vue' export { default as KInput } from './KInput/KInput.vue' export { default as KInputSwitch } from './KInputSwitch/KInputSwitch.vue' export { default as KLabel } from './KLabel/KLabel.vue' -export { default as KMenu } from './KMenu/KMenu.vue' -export { default as KMenuItem } from './KMenu/KMenuItem.vue' export { default as KModal } from './KModal/KModal.vue' export { default as KModalFullscreen } from './KModalFullscreen/KModalFullscreen.vue' export { default as KMultiselect } from './KMultiselect/KMultiselect.vue' diff --git a/src/global-components.ts b/src/global-components.ts index c766353f29..251f732d24 100644 --- a/src/global-components.ts +++ b/src/global-components.ts @@ -27,8 +27,6 @@ declare module '@vue/runtime-core' { KInput: typeof components.KInput KInputSwitch: typeof components.KInputSwitch KLabel: typeof components.KLabel - KMenu: typeof components.KMenu - KMenuItem: typeof components.KMenuItem KModal: typeof components.KModal KModalFullscreen: typeof components.KModalFullscreen KMultiselect: typeof components.KMultiselect diff --git a/src/types/index.ts b/src/types/index.ts index a9fb746439..e8fbc98bf2 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -16,7 +16,6 @@ export * from './tabs' export * from './utils' export * from './input' export * from './label' -export * from './menu' export * from './pagination' export * from './stepper' export * from './radio' diff --git a/src/types/menu.ts b/src/types/menu.ts deleted file mode 100644 index 2742e7811b..0000000000 --- a/src/types/menu.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type { AnyElementOf } from '@/types/utils' - -export const MenuTypeArray = ['string', 'number', 'divider'] as const -export type MenuType = AnyElementOf - -export interface MenuItem { - title: string - description?: string -} - -export interface KMenuItemType extends MenuItem { - expandable?: boolean - type: MenuType -}