Skip to content

Commit 8b8f4dc

Browse files
juzserjuzser
authored
Merge pull request #141 from ownego/component/grid
Complete Grid component
2 parents 0bd804e + e1bad1f commit 8b8f4dc

File tree

7 files changed

+139
-0
lines changed

7 files changed

+139
-0
lines changed

‎src/classes/Grid-Cell.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"Cell":"Polaris-Grid-Cell","Cell-1-column-xs":"Polaris-Grid-Cell--cell_1ColumnXs","Cell-2-column-xs":"Polaris-Grid-Cell--cell_2ColumnXs","Cell-3-column-xs":"Polaris-Grid-Cell--cell_3ColumnXs","Cell-4-column-xs":"Polaris-Grid-Cell--cell_4ColumnXs","Cell-5-column-xs":"Polaris-Grid-Cell--cell_5ColumnXs","Cell-6-column-xs":"Polaris-Grid-Cell--cell_6ColumnXs","Cell-1-column-sm":"Polaris-Grid-Cell--cell_1ColumnSm","Cell-2-column-sm":"Polaris-Grid-Cell--cell_2ColumnSm","Cell-3-column-sm":"Polaris-Grid-Cell--cell_3ColumnSm","Cell-4-column-sm":"Polaris-Grid-Cell--cell_4ColumnSm","Cell-5-column-sm":"Polaris-Grid-Cell--cell_5ColumnSm","Cell-6-column-sm":"Polaris-Grid-Cell--cell_6ColumnSm","Cell-1-column-md":"Polaris-Grid-Cell--cell_1ColumnMd","Cell-2-column-md":"Polaris-Grid-Cell--cell_2ColumnMd","Cell-3-column-md":"Polaris-Grid-Cell--cell_3ColumnMd","Cell-4-column-md":"Polaris-Grid-Cell--cell_4ColumnMd","Cell-5-column-md":"Polaris-Grid-Cell--cell_5ColumnMd","Cell-6-column-md":"Polaris-Grid-Cell--cell_6ColumnMd","Cell-1-column-lg":"Polaris-Grid-Cell--cell_1ColumnLg","Cell-2-column-lg":"Polaris-Grid-Cell--cell_2ColumnLg","Cell-3-column-lg":"Polaris-Grid-Cell--cell_3ColumnLg","Cell-4-column-lg":"Polaris-Grid-Cell--cell_4ColumnLg","Cell-5-column-lg":"Polaris-Grid-Cell--cell_5ColumnLg","Cell-6-column-lg":"Polaris-Grid-Cell--cell_6ColumnLg","Cell-7-column-lg":"Polaris-Grid-Cell--cell_7ColumnLg","Cell-8-column-lg":"Polaris-Grid-Cell--cell_8ColumnLg","Cell-9-column-lg":"Polaris-Grid-Cell--cell_9ColumnLg","Cell-10-column-lg":"Polaris-Grid-Cell--cell_10ColumnLg","Cell-11-column-lg":"Polaris-Grid-Cell--cell_11ColumnLg","Cell-12-column-lg":"Polaris-Grid-Cell--cell_12ColumnLg","Cell-1-column-xl":"Polaris-Grid-Cell--cell_1ColumnXl","Cell-2-column-xl":"Polaris-Grid-Cell--cell_2ColumnXl","Cell-3-column-xl":"Polaris-Grid-Cell--cell_3ColumnXl","Cell-4-column-xl":"Polaris-Grid-Cell--cell_4ColumnXl","Cell-5-column-xl":"Polaris-Grid-Cell--cell_5ColumnXl","Cell-6-column-xl":"Polaris-Grid-Cell--cell_6ColumnXl","Cell-7-column-xl":"Polaris-Grid-Cell--cell_7ColumnXl","Cell-8-column-xl":"Polaris-Grid-Cell--cell_8ColumnXl","Cell-9-column-xl":"Polaris-Grid-Cell--cell_9ColumnXl","Cell-10-column-xl":"Polaris-Grid-Cell--cell_10ColumnXl","Cell-11-column-xl":"Polaris-Grid-Cell--cell_11ColumnXl","Cell-12-column-xl":"Polaris-Grid-Cell--cell_12ColumnXl"}

‎src/classes/Grid.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"Grid":"Polaris-Grid"}

‎src/components/Grid/Grid.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template lang="pug">
2+
div(:class="styles.Grid", :style="style")
3+
slot
4+
</template>
5+
6+
<script setup lang="ts">
7+
import { computed } from 'vue';
8+
import styles from '@/classes/Grid.json';
9+
10+
type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
11+
12+
type Areas = {
13+
[Breakpoint in Breakpoints]?: string[];
14+
};
15+
16+
type Columns = {
17+
[Breakpoint in Breakpoints]?: number;
18+
};
19+
20+
type Gap = {
21+
[Breakpoint in Breakpoints]?: string;
22+
};
23+
24+
interface Props {
25+
/* Set grid-template-areas */
26+
areas?: Areas;
27+
/* Number of columns */
28+
columns?: Columns;
29+
/* Grid gap */
30+
gap?: Gap;
31+
}
32+
33+
const props = defineProps<Props>();
34+
35+
const style = computed(() => {
36+
return {
37+
'--pc-grid-gap-xs': props.gap?.xs,
38+
'--pc-grid-gap-sm': props.gap?.sm,
39+
'--pc-grid-gap-md': props.gap?.md,
40+
'--pc-grid-gap-lg': props.gap?.lg,
41+
'--pc-grid-gap-xl': props.gap?.xl,
42+
'--pc-grid-columns-xs': props.columns?.xs,
43+
'--pc-grid-columns-sm': props.columns?.sm,
44+
'--pc-grid-columns-md': props.columns?.md,
45+
'--pc-grid-columns-lg': props.columns?.lg,
46+
'--pc-grid-columns-xl': props.columns?.xl,
47+
'--pc-grid-areas-xs': formatAreas(props.areas?.xs),
48+
'--pc-grid-areas-sm': formatAreas(props.areas?.sm),
49+
'--pc-grid-areas-md': formatAreas(props.areas?.md),
50+
'--pc-grid-areas-lg': formatAreas(props.areas?.lg),
51+
'--pc-grid-areas-xl': formatAreas(props.areas?.xl),
52+
} as Record<string, any>;
53+
});
54+
55+
function formatAreas(areas?: string[]) {
56+
if (!areas) {
57+
return;
58+
}
59+
return `'${areas?.join(`' '`)}'`;
60+
}
61+
</script>
62+
63+
<style lang="scss">
64+
@import 'polaris/polaris-react/src/components/Grid/Grid.scss';
65+
</style>

‎src/components/Grid/components/Cell/Cell.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template lang="pug">
2+
div(:class="className", :style="style")
3+
slot
4+
</template>
5+
6+
<script setup lang="ts">
7+
import { computed } from 'vue';
8+
import { classNames } from 'polaris/polaris-react/src/utilities/css';
9+
import styles from '@/classes/Grid-Cell.json';
10+
11+
type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
12+
13+
type Cell = {
14+
[Breakpoint in Breakpoints]?: string;
15+
};
16+
17+
interface Columns {
18+
/** Number of columns the section should span on extra small screens */
19+
xs?: 1 | 2 | 3 | 4 | 5 | 6;
20+
/** Number of columns the section should span on small screens */
21+
sm?: 1 | 2 | 3 | 4 | 5 | 6;
22+
/** Number of columns the section should span on medium screens */
23+
md?: 1 | 2 | 3 | 4 | 5 | 6;
24+
/** Number of columns the section should span on large screens */
25+
lg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
26+
/** Number of columns the section should span on extra large screens */
27+
xl?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
28+
}
29+
30+
interface Props {
31+
area?: string;
32+
column?: Cell;
33+
columnSpan?: Columns;
34+
row?: Cell;
35+
}
36+
37+
const props = defineProps<Props>();
38+
39+
const className = computed(() => classNames(
40+
styles.Cell,
41+
props.columnSpan?.xs && styles[`Cell-${props.columnSpan.xs}-column-xs`],
42+
props.columnSpan?.sm && styles[`Cell-${props.columnSpan.sm}-column-sm`],
43+
props.columnSpan?.md && styles[`Cell-${props.columnSpan.md}-column-md`],
44+
props.columnSpan?.lg && styles[`Cell-${props.columnSpan.lg}-column-lg`],
45+
props.columnSpan?.xl && styles[`Cell-${props.columnSpan.xl}-column-xl`],
46+
));
47+
48+
const style = computed(() => {
49+
return {
50+
gridArea: props.area,
51+
'--pc-column-xs': props.column?.xs,
52+
'--pc-column-sm': props.column?.sm,
53+
'--pc-column-md': props.column?.md,
54+
'--pc-column-lg': props.column?.lg,
55+
'--pc-column-xl': props.column?.xl,
56+
'--pc-row-xs': props.row?.xs,
57+
'--pc-row-sm': props.row?.sm,
58+
'--pc-row-md': props.row?.md,
59+
'--pc-row-lg': props.row?.lg,
60+
'--pc-row-xl': props.row?.xl,
61+
};
62+
});
63+
64+
</script>
65+
66+
<style lang="scss">
67+
@import 'polaris/polaris-react/src/components/Grid/components/Cell/Cell.scss';
68+
</style>

‎src/components/Grid/components/Cell/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Cell } from './Cell.vue';

‎src/components/Grid/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './Cell';

‎src/components/Grid/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default as Grid } from './Grid.vue';
2+
export { default as GridCell } from './components/Cell/Cell.vue';

0 commit comments

Comments
 (0)