From 5277538c79100b60d4bd6fcadcd91991f42ddf37 Mon Sep 17 00:00:00 2001 From: Maksim Nedoshev Date: Thu, 20 Jul 2023 13:52:10 +0300 Subject: [PATCH] Revert "Feat/layout (#3382)" This reverts commit 26948d65853a95e13724bf474a308b310d527a03. --- .../blocks/api/component-parser/index.ts | 2 +- packages/docs/page-config/navigationRoutes.ts | 9 +- .../ui-elements/layout/examples/Absolute.vue | 50 --- .../ui-elements/layout/examples/AllSlots.vue | 94 ----- .../ui-elements/layout/examples/Default.vue | 47 --- .../layout/examples/MobileFriendly.vue | 52 --- .../ui-elements/layout/examples/Order.vue | 92 ----- .../page-config/ui-elements/layout/index.ts | 67 ---- .../ui-elements/layout/translations/en.json | 3 - packages/nuxt/src/config/components.ts | 1 - packages/ui/src/components/index.ts | 2 - .../components/va-layout/VaLayout.demo.vue | 366 ------------------ .../ui/src/components/va-layout/VaLayout.vue | 137 ------- .../va-layout/hooks/useGridTemplateArea.ts | 46 --- .../components/va-layout/hooks/useLayout.ts | 30 -- packages/ui/src/components/va-layout/index.ts | 4 - .../ui/src/services/vue-plugin/components.ts | 1 - 17 files changed, 2 insertions(+), 1001 deletions(-) delete mode 100644 packages/docs/page-config/ui-elements/layout/examples/Absolute.vue delete mode 100644 packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue delete mode 100644 packages/docs/page-config/ui-elements/layout/examples/Default.vue delete mode 100644 packages/docs/page-config/ui-elements/layout/examples/MobileFriendly.vue delete mode 100644 packages/docs/page-config/ui-elements/layout/examples/Order.vue delete mode 100644 packages/docs/page-config/ui-elements/layout/index.ts delete mode 100644 packages/docs/page-config/ui-elements/layout/translations/en.json delete mode 100644 packages/ui/src/components/va-layout/VaLayout.demo.vue delete mode 100644 packages/ui/src/components/va-layout/VaLayout.vue delete mode 100644 packages/ui/src/components/va-layout/hooks/useGridTemplateArea.ts delete mode 100644 packages/ui/src/components/va-layout/hooks/useLayout.ts delete mode 100644 packages/ui/src/components/va-layout/index.ts diff --git a/packages/docs/modules/page-config/blocks/api/component-parser/index.ts b/packages/docs/modules/page-config/blocks/api/component-parser/index.ts index ec9ce173b2..69a5fd3cc9 100644 --- a/packages/docs/modules/page-config/blocks/api/component-parser/index.ts +++ b/packages/docs/modules/page-config/blocks/api/component-parser/index.ts @@ -107,7 +107,7 @@ function convertComponentPropToApiDocs(propName: T, propOption name: propName, global: false, description: '', - types: types.join(' | '), + type: types.join(' | '), required: !!propOptionsRecord[propName].required, default: getDefaultValue(propOptionsRecord[propName], types), } as any diff --git a/packages/docs/page-config/navigationRoutes.ts b/packages/docs/page-config/navigationRoutes.ts index 21c758df11..5c0d2f9dad 100644 --- a/packages/docs/page-config/navigationRoutes.ts +++ b/packages/docs/page-config/navigationRoutes.ts @@ -267,16 +267,9 @@ export const navigationRoutes: NavigationRoute[] = [ name: "color-input", displayName: "Color Input", }, - + { category: 'Layout', - name: 'layout', - displayName: 'Layout', - meta: { - badge: navigationBadge.new('1.7.2'), - } - }, - { name: 'aspect-ratio', displayName: 'Aspect Ratio', meta: { diff --git a/packages/docs/page-config/ui-elements/layout/examples/Absolute.vue b/packages/docs/page-config/ui-elements/layout/examples/Absolute.vue deleted file mode 100644 index e7b0cb9be4..0000000000 --- a/packages/docs/page-config/ui-elements/layout/examples/Absolute.vue +++ /dev/null @@ -1,50 +0,0 @@ - - - \ No newline at end of file diff --git a/packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue b/packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue deleted file mode 100644 index f43b73bd49..0000000000 --- a/packages/docs/page-config/ui-elements/layout/examples/AllSlots.vue +++ /dev/null @@ -1,94 +0,0 @@ - - - \ No newline at end of file diff --git a/packages/docs/page-config/ui-elements/layout/examples/Default.vue b/packages/docs/page-config/ui-elements/layout/examples/Default.vue deleted file mode 100644 index 1144a6285a..0000000000 --- a/packages/docs/page-config/ui-elements/layout/examples/Default.vue +++ /dev/null @@ -1,47 +0,0 @@ - - - \ No newline at end of file diff --git a/packages/docs/page-config/ui-elements/layout/examples/MobileFriendly.vue b/packages/docs/page-config/ui-elements/layout/examples/MobileFriendly.vue deleted file mode 100644 index 934edf5793..0000000000 --- a/packages/docs/page-config/ui-elements/layout/examples/MobileFriendly.vue +++ /dev/null @@ -1,52 +0,0 @@ - - - \ No newline at end of file diff --git a/packages/docs/page-config/ui-elements/layout/examples/Order.vue b/packages/docs/page-config/ui-elements/layout/examples/Order.vue deleted file mode 100644 index 9e03351ff0..0000000000 --- a/packages/docs/page-config/ui-elements/layout/examples/Order.vue +++ /dev/null @@ -1,92 +0,0 @@ - - - \ No newline at end of file diff --git a/packages/docs/page-config/ui-elements/layout/index.ts b/packages/docs/page-config/ui-elements/layout/index.ts deleted file mode 100644 index 65e37edcc2..0000000000 --- a/packages/docs/page-config/ui-elements/layout/index.ts +++ /dev/null @@ -1,67 +0,0 @@ -export default definePageConfig({ - blocks: [ - block.title('Layout'), - block.paragraph('Component is used for building App layout. It is based on CSS Grid and provides a simple API for building complex layouts.'), - block.paragraph(` -VaLayout component is used in pair with [VaSidebar](/ui-elements/sidebar)[[target=_blank]], [VaNavbar](/ui-elements/navbar)[[target=_blank]], VaFooter components. - `), - - block.example('Default', { - title: 'Default usage', - description: 'Default usage of Layout component.', - }), - block.example('AllSlots', { - title: 'All slots', - description: 'Layout component has 4 slots: top, right, bottom, left, content (or default). You can use them to place your content.', - }), - block.example('Order', { - title: 'Rendering order', - description: 'You can use order area attribute to change order of slots. By default, order is 0. If order of one area is higher than another, it will be rendered on top of it. For example, if you set `top` order to `0` and `left` to `1`, left will take area from `top`. It is easier to play with it in example bellow.', - }), - block.example('Absolute', { - title: 'Absolute', - description: 'You can use absolute area attribute to make area absolute. It will be rendered on top of other areas and overflow them. Absolute respect order prop.', - }), - block.example('MobileFriendly', { - title: 'Mobile friendly', - description: 'It is recommended to make `left` and `right` areas absolute on mobile devices. You can use `absolute` prop to do it in pair with [useBreakpoint](http://localhost:3000/services/breakpoints)[[target=_blank]] composable.', - }), - - block.subtitle('Accessibility'), - block.paragraph(` -Layout component is not handling accessibility by default. - -You should always wrap content in slot with \`
\` to make it accessible. -Make sure you have \`main\` role on your main content in \`content\` slot, -\`aside\` in \`left\`, \`right\` slots, \`header\` in \`top\` slot and \`footer\` in \`bottom\` slot. -More about landmarks you can read [here](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/)[[target=_blank]]. - -Notice that if you're using components like VaSidebar, VaHeader the correct role will be added automatically. - `), - - block.api('VaLayout', { - props: { - top: 'AreaConfig for top slot', - right: 'AreaConfig for right slot', - bottom: 'AreaConfig for bottom slot', - left: 'AreaConfig for left slot', - } - }, - { - props: { - top: { - types: `{ absolute?: boolean, order?: number }` - }, - bottom: { - types: `{ absolute?: boolean, order?: number }` - }, - left: { - types: `{ absolute?: boolean, order?: number }` - }, - right: { - types: `{ absolute?: boolean, order?: number }` - } - } - }) - ] -}) \ No newline at end of file diff --git a/packages/docs/page-config/ui-elements/layout/translations/en.json b/packages/docs/page-config/ui-elements/layout/translations/en.json deleted file mode 100644 index 03553211af..0000000000 --- a/packages/docs/page-config/ui-elements/layout/translations/en.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "title": "Layout" -} \ No newline at end of file diff --git a/packages/nuxt/src/config/components.ts b/packages/nuxt/src/config/components.ts index 00ab8c3fa5..afbb1b11d8 100644 --- a/packages/nuxt/src/config/components.ts +++ b/packages/nuxt/src/config/components.ts @@ -43,7 +43,6 @@ export default [ 'VaInfiniteScroll', 'VaInnerLoading', 'VaInput', - 'VaLayout', 'VaList', 'VaListItem', 'VaListItemLabel', diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 5381318123..c247b1e0b0 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -50,8 +50,6 @@ export * from './va-icon' export * from './va-image' export * from './va-infinite-scroll' export * from './va-inner-loading' -export * from './va-input' -export * from './va-layout' export * from './va-list' export * from './va-modal' export * from './va-navbar' diff --git a/packages/ui/src/components/va-layout/VaLayout.demo.vue b/packages/ui/src/components/va-layout/VaLayout.demo.vue deleted file mode 100644 index 01901ff843..0000000000 --- a/packages/ui/src/components/va-layout/VaLayout.demo.vue +++ /dev/null @@ -1,366 +0,0 @@ - - - - - diff --git a/packages/ui/src/components/va-layout/VaLayout.vue b/packages/ui/src/components/va-layout/VaLayout.vue deleted file mode 100644 index 1cd960e0d5..0000000000 --- a/packages/ui/src/components/va-layout/VaLayout.vue +++ /dev/null @@ -1,137 +0,0 @@ - - - - - diff --git a/packages/ui/src/components/va-layout/hooks/useGridTemplateArea.ts b/packages/ui/src/components/va-layout/hooks/useGridTemplateArea.ts deleted file mode 100644 index 559406ac6b..0000000000 --- a/packages/ui/src/components/va-layout/hooks/useGridTemplateArea.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { computed } from 'vue' -import { type LayoutProps } from './useLayout' - -const areaIndexes = { - top: [0, 1, 2], - left: [0, 3, 6], - right: [2, 5, 8], - bottom: [6, 7, 8], -} - -export type AreaName = 'top' | 'left' | 'right' | 'bottom' -const areaElements = (['left', 'right', 'top', 'bottom'] as const) - -export const useGridTemplateArea = (props: LayoutProps) => { - const sort = () => { - return [...areaElements].sort((a, b) => { - return (props[a].order ?? 0) - (props[b].order ?? 0) - }) - } - - const applyTemplate = (template: string[], areaIndexes: number[], areaName: AreaName) => { - areaIndexes.forEach((index) => { - template[index] = areaName - }) - } - - return computed(() => { - const sorted = sort() - - const template = [ - '.', '.', '.', - '.', '.', '.', - '.', '.', '.', - ].map(() => 'content') - - sorted.forEach((areaName) => { - applyTemplate(template, areaIndexes[areaName], areaName) - }) - - return [ - '"' + template.slice(0, 3).join(' ') + '"', - '"' + template.slice(3, 6).join(' ') + '"', - '"' + template.slice(6, 9).join(' ') + '"', - ].join(' ') - }) -} diff --git a/packages/ui/src/components/va-layout/hooks/useLayout.ts b/packages/ui/src/components/va-layout/hooks/useLayout.ts deleted file mode 100644 index 92d3882a99..0000000000 --- a/packages/ui/src/components/va-layout/hooks/useLayout.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { ExtractPropTypes, PropType } from 'vue' - -// Unwrap type, e.g.: removes name from type alias and returns the type -type UnwrapType = true extends boolean ? T : never - -type AreaConfig = UnwrapType<{ - absolute?: boolean, - order?: number, -}> - -export const useLayoutProps = { - top: { - type: Object as PropType, - default: () => ({}), - }, - right: { - type: Object as PropType, - default: () => ({}), - }, - left: { - type: Object as PropType, - default: () => ({}), - }, - bottom: { - type: Object as PropType, - default: () => ({}), - }, -} - -export type LayoutProps = ExtractPropTypes diff --git a/packages/ui/src/components/va-layout/index.ts b/packages/ui/src/components/va-layout/index.ts deleted file mode 100644 index a3e35bdef3..0000000000 --- a/packages/ui/src/components/va-layout/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { withConfigTransport } from '../../services/config-transport' -import _VaLayout from './VaLayout.vue' - -export const VaLayout = withConfigTransport(_VaLayout) diff --git a/packages/ui/src/services/vue-plugin/components.ts b/packages/ui/src/services/vue-plugin/components.ts index d7f8ae0031..dd9113928a 100644 --- a/packages/ui/src/services/vue-plugin/components.ts +++ b/packages/ui/src/services/vue-plugin/components.ts @@ -44,7 +44,6 @@ export { VaInfiniteScroll, VaInnerLoading, VaInput, - VaLayout, VaList, VaListItem, VaListItemLabel,