From 4dbb3cb8e22f523ba711fc4729a6fc98ee4b8550 Mon Sep 17 00:00:00 2001 From: portikM Date: Thu, 7 Dec 2023 12:00:03 -0500 Subject: [PATCH 1/2] fix(kmethodbadge): remove component [KHCP-8989] --- docs/.vitepress/config.ts | 1 - docs/components/method-badge.md | 103 ----------- docs/guide/migrating-to-version-9.md | 7 +- .../KMethodBadge/KMethodBadge.cy.ts | 48 ----- src/components/KMethodBadge/KMethodBadge.vue | 166 ------------------ src/types/index.ts | 1 - src/types/method-badge.ts | 7 - 7 files changed, 4 insertions(+), 329 deletions(-) delete mode 100644 docs/components/method-badge.md delete mode 100644 src/components/KMethodBadge/KMethodBadge.cy.ts delete mode 100644 src/components/KMethodBadge/KMethodBadge.vue delete mode 100644 src/types/method-badge.ts diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 1b321e7064..94a82a1cbd 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -55,7 +55,6 @@ export default defineConfig({ { text: 'Input Switch', link: '/components/input-switch' }, { text: 'Label', link: '/components/label' }, { text: 'Menu', link: '/components/menu' }, - { text: 'Method Badge', link: '/components/method-badge' }, { text: 'Modal', link: '/components/modal' }, { text: 'Modal Fullscreen', link: '/components/modal-fullscreen' }, { text: 'Multiselect', link: '/components/multiselect' }, diff --git a/docs/components/method-badge.md b/docs/components/method-badge.md deleted file mode 100644 index 4086146010..0000000000 --- a/docs/components/method-badge.md +++ /dev/null @@ -1,103 +0,0 @@ -# MethodBadge - -**KMethodBadge** is a component that provides pre-configured styles for displaying HTTP request methods like `GET`, `POST`, etc. It simplifies the process of showcasing different methods in a visually appealing and consistent manner. - - - -```html - -``` - -## Props - -### method - -Method the component should display. Supported methods: - -- `get` -- `post` -- `put` -- `patch` -- `delete` -- `head` -- `options` -- `trace` -- `connect` -- `custom` (for any custom methods) - -This prop is required. - -
- -
- -```html - -``` - -### label - -KMethodBadge automatically displays method passed through [`method`](#method-1) prop in uppercase, but in case you are displaying any custom methods, you can use this prop. - - - -```html - -``` - -### isRounded - -When `true`, the badge is rounded. - -
- - -
- -```html - - -``` -### isToggle - -When `true`, the KMethodBadge will come with a switch input. You can use `v-model` to bind the value to the switch. - - - - - -```html - - - -``` - - - - diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md index 4c90055fb7..70891ca5bb 100644 --- a/docs/guide/migrating-to-version-9.md +++ b/docs/guide/migrating-to-version-9.md @@ -286,11 +286,12 @@ Component has been renamed to `KDropdown` ### KMethodBadge -#### Constants, Types & Interfaces +This component has been removed. Please refer to KBadge component which has been updated to support method appearances. -* `MethodShape` type has been removed +#### Constants, Types & Interfaces -### KMethod Badge +* `MethodShape`, `Method` and `MethodBadgeColors` types have been removed +* `MethodsArray` const has been removed ### KModal diff --git a/src/components/KMethodBadge/KMethodBadge.cy.ts b/src/components/KMethodBadge/KMethodBadge.cy.ts deleted file mode 100644 index ef61e7d2f7..0000000000 --- a/src/components/KMethodBadge/KMethodBadge.cy.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { mount } from 'cypress/vue' -import KMethodBadge from '@/components/KMethodBadge/KMethodBadge.vue' -import { MethodsArray } from '@/types' - -const rendersCorrectMethod = (method: string) => { - it(`renders KMethodBadge for ${method.toUpperCase()} method`, () => { - mount(KMethodBadge, { - props: { - method, - }, - }) - - cy.get('.k-method-badge').should('have.class', `method-${method}`) - }) -} - -describe('KMethodBadge', () => { - MethodsArray.map(method => rendersCorrectMethod(method)) - - it('displays label prop correctly', () => { - const labelText = 'METHOD' - - mount(KMethodBadge, { - props: { - method: 'custom', - label: labelText, - }, - }) - - cy.get('.k-method-badge').should('contain', labelText) - }) - - it('displays input switch and allows toggling on/off when isToggle is true', () => { - const toggleValue = false - - mount(KMethodBadge, { - props: { - method: 'custom', - isToggle: true, - value: toggleValue, - 'onUpdate:modelValue': cy.spy().as('onModelValueUpdate'), - }, - }) - - cy.get('.k-method-badge').should('be.visible').click() - cy.get('@onModelValueUpdate').should('have.been.calledOnceWith', !toggleValue) - }) -}) diff --git a/src/components/KMethodBadge/KMethodBadge.vue b/src/components/KMethodBadge/KMethodBadge.vue deleted file mode 100644 index 11adacec65..0000000000 --- a/src/components/KMethodBadge/KMethodBadge.vue +++ /dev/null @@ -1,166 +0,0 @@ - - - - - - - diff --git a/src/types/index.ts b/src/types/index.ts index 9f10db505d..1d694951e9 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -26,7 +26,6 @@ export * from './skeleton' export * from './select' export * from './swrv' export * from './toaster' -export * from './method-badge' export * from './inline-edit' export * from './text-area' export * from './view-switcher' diff --git a/src/types/method-badge.ts b/src/types/method-badge.ts deleted file mode 100644 index 571cd82e9f..0000000000 --- a/src/types/method-badge.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type Method = 'get' | 'post' | 'put' | 'patch' | 'delete' | 'head' | 'options' | 'trace' | 'connect' | 'custom' -export interface MethodBadgeColors { - color: string - backgroundColor: string -} - -export const MethodsArray = ['get', 'post', 'put', 'patch', 'delete', 'head', 'options', 'trace', 'connect', 'custom'] as const From b631f8e27a6aff27e6543a77774cfcb72f41fd19 Mon Sep 17 00:00:00 2001 From: portikM Date: Thu, 7 Dec 2023 12:04:19 -0500 Subject: [PATCH 2/2] fix: remove kmethodbadge component exports [KHCP-8989] --- src/components/index.ts | 1 - src/global-components.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/src/components/index.ts b/src/components/index.ts index 7ec17f20d2..abaf0953b2 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -53,5 +53,4 @@ export { default as KTreeList } from './KTreeList/KTreeList.vue' export { default as KViewSwitcher } from './KViewSwitcher/KViewSwitcher.vue' export { default as KExternalLink } from './KExternalLink/KExternalLink.vue' export { default as KTruncate } from './KTruncate/KTruncate.vue' -export { default as KMethodBadge } from './KMethodBadge/KMethodBadge.vue' export { default as KCopy } from './KCopy/KCopy.vue' diff --git a/src/global-components.ts b/src/global-components.ts index 10fc4be1b5..4a7891cb2e 100644 --- a/src/global-components.ts +++ b/src/global-components.ts @@ -52,7 +52,6 @@ declare module '@vue/runtime-core' { KViewSwitcher: typeof components.KViewSwitcher ToastManager: typeof components.ToastManager KTruncate: typeof components.KTruncate - KMethodBadge: typeof components.KMethodBadge KCopy: typeof components.KCopy // {%%NEW_KONGPONENT%%} (do not remove comment) }