github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

style: update grid

feat-css-var
tangjinzhou 2022-02-28 10:46:14 +08:00
parent cb95d1202a
commit a01fcebee6
5 changed files with 44 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
components/grid/Col.tsx
View File

@ -1,7 +1,6 @@
import type { CSSProperties, ExtractPropTypes } from 'vue';
import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
import { defineComponent, computed } from 'vue';
import classNames from '../_util/classNames';
import PropTypes from '../_util/vue-types';
import useConfigInject from '../_util/hooks/useConfigInject';
import { useInjectRow } from './context';
@ -29,38 +28,28 @@ function parseFlex(flex: FlexType): string {
return flex;
}
const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
export const colSize = PropTypes.shape<ColSize>({
span: stringOrNumber,
order: stringOrNumber,
offset: stringOrNumber,
push: stringOrNumber,
pull: stringOrNumber,
}).loose;
const objectOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number, colSize]);
const colProps = () => ({
span: [String, Number],
order: [String, Number],
offset: [String, Number],
push: [String, Number],
pull: [String, Number],
xs: { type: [String, Number, Object] as PropType<string | number | ColSize> },
sm: { type: [String, Number, Object] as PropType<string | number | ColSize> },
md: { type: [String, Number, Object] as PropType<string | number | ColSize> },
lg: { type: [String, Number, Object] as PropType<string | number | ColSize> },
xl: { type: [String, Number, Object] as PropType<string | number | ColSize> },
xxl: { type: [String, Number, Object] as PropType<string | number | ColSize> },
xxxl: { type: [String, Number, Object] as PropType<string | number | ColSize> },
prefixCls: String,
flex: [String, Number],
});
const colProps = {
span: stringOrNumber,
order: stringOrNumber,
offset: stringOrNumber,
push: stringOrNumber,
pull: stringOrNumber,
xs: objectOrNumber,
sm: objectOrNumber,
md: objectOrNumber,
lg: objectOrNumber,
xl: objectOrNumber,
xxl: objectOrNumber,
xxxl: objectOrNumber,
prefixCls: PropTypes.string,
flex: stringOrNumber,
};
export type ColProps = Partial<ExtractPropTypes<typeof colProps>>;
export type ColProps = Partial<ExtractPropTypes<ReturnType<typeof colProps>>>;
export default defineComponent({
name: 'ACol',
props: colProps,
props: colProps(),
setup(props, { slots }) {
const { gutter, supportFlexGap, wrap } = useInjectRow();
const { prefixCls, direction } = useConfigInject('col', props);
@ -123,7 +112,7 @@ export default defineComponent({
// Hack for Firefox to avoid size issue
// https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553
if (flex === 'auto' && wrap.value === false && !style.minWidth) {
if (wrap.value === false && !style.minWidth) {
style.minWidth = 0;
}
}

22
components/grid/Row.tsx
View File

@ -1,8 +1,7 @@
import type { ExtractPropTypes, CSSProperties } from 'vue';
import type { ExtractPropTypes, CSSProperties, PropType } from 'vue';
import { defineComponent, ref, onMounted, onBeforeUnmount, computed } from 'vue';
import classNames from '../_util/classNames';
import { tuple } from '../_util/type';
import PropTypes from '../_util/vue-types';
import type { Breakpoint, ScreenMap } from '../_util/responsiveObserve';
import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
import useConfigInject from '../_util/hooks/useConfigInject';
@ -18,20 +17,19 @@ export interface rowContextState {
gutter?: [number, number];
}
const rowProps = {
type: PropTypes.oneOf(['flex']),
align: PropTypes.oneOf(RowAligns),
justify: PropTypes.oneOf(RowJustify),
prefixCls: PropTypes.string,
gutter: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]).def(0),
wrap: PropTypes.looseBool,
};
export const rowProps = () => ({
align: String as PropType<typeof RowAligns[number]>,
justify: String as PropType<typeof RowJustify[number]>,
prefixCls: String,
gutter: { type: [Number, Array, Object] as PropType<Gutter | [Gutter, Gutter]>, default: 0 },
wrap: { type: Boolean, default: undefined },
});
export type RowProps = Partial<ExtractPropTypes<typeof rowProps>>;
export type RowProps = Partial<ExtractPropTypes<ReturnType<typeof rowProps>>>;
const ARow = defineComponent({
name: 'ARow',
props: rowProps,
props: rowProps(),
setup(props, { slots }) {
const { prefixCls, direction } = useConfigInject('row', props);

26
components/grid/__tests__/__snapshots__/demo.test.js.snap
View File

@ -21,35 +21,35 @@ exports[`renders ./components/grid/demo/basic.vue correctly 1`] = `
exports[`renders ./components/grid/demo/flex.vue correctly 1`] = `
<div id="components-grid-demo-flex">
<p>sub-element align left</p>
<div class="ant-row ant-row-start">
<div class="ant-row ant-row-start" type="flex">
<div class="ant-col ant-col-4">col-4</div>
<div class="ant-col ant-col-4">col-4</div>
<div class="ant-col ant-col-4">col-4</div>
<div class="ant-col ant-col-4">col-4</div>
</div>
<p>sub-element align center</p>
<div class="ant-row ant-row-center">
<div class="ant-row ant-row-center" type="flex">
<div class="ant-col ant-col-4">col-4</div>
<div class="ant-col ant-col-4">col-4</div>
<div class="ant-col ant-col-4">col-4</div>
<div class="ant-col ant-col-4">col-4</div>
</div>
<p>sub-element align right</p>
<div class="ant-row ant-row-end">
<div class="ant-row ant-row-end" type="flex">
<div class="ant-col ant-col-4">col-4</div>
<div class="ant-col ant-col-4">col-4</div>
<div class="ant-col ant-col-4">col-4</div>
<div class="ant-col ant-col-4">col-4</div>
</div>
<p>sub-element monospaced arrangement</p>
<div class="ant-row ant-row-space-between">
<div class="ant-row ant-row-space-between" type="flex">
<div class="ant-col ant-col-4">col-4</div>
<div class="ant-col ant-col-4">col-4</div>
<div class="ant-col ant-col-4">col-4</div>
<div class="ant-col ant-col-4">col-4</div>
</div>
<p>sub-element align full</p>
<div class="ant-row ant-row-space-around">
<div class="ant-row ant-row-space-around" type="flex">
<div class="ant-col ant-col-4">col-4</div>
<div class="ant-col ant-col-4">col-4</div>
<div class="ant-col ant-col-4">col-4</div>
@ -60,7 +60,7 @@ exports[`renders ./components/grid/demo/flex.vue correctly 1`] = `
exports[`renders ./components/grid/demo/flex-align.vue correctly 1`] = `
<p>Align Top</p>
<div class="ant-row ant-row-center ant-row-top">
<div class="ant-row ant-row-center ant-row-top" type="flex">
<div class="ant-col ant-col-4">
<p class="height-100">col-4</p>
</div>
@ -75,7 +75,7 @@ exports[`renders ./components/grid/demo/flex-align.vue correctly 1`] = `
</div>
</div>
<p>Align Center</p>
<div class="ant-row ant-row-space-around ant-row-middle">
<div class="ant-row ant-row-space-around ant-row-middle" type="flex">
<div class="ant-col ant-col-4">
<p class="height-100">col-4</p>
</div>
@ -90,7 +90,7 @@ exports[`renders ./components/grid/demo/flex-align.vue correctly 1`] = `
</div>
</div>
<p>Align Bottom</p>
<div class="ant-row ant-row-space-between ant-row-bottom">
<div class="ant-row ant-row-space-between ant-row-bottom" type="flex">
<div class="ant-col ant-col-4">
<p class="height-100">col-4</p>
</div>
@ -108,14 +108,14 @@ exports[`renders ./components/grid/demo/flex-align.vue correctly 1`] = `
exports[`renders ./components/grid/demo/flex-order.vue correctly 1`] = `
<div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Normal</span></div>
<div class="ant-row">
<div class="ant-row" type="flex">
<div class="ant-col ant-col-6 ant-col-order-4">1 col-order-4</div>
<div class="ant-col ant-col-6 ant-col-order-3">2 col-order-3</div>
<div class="ant-col ant-col-6 ant-col-order-2">3 col-order-2</div>
<div class="ant-col ant-col-6 ant-col-order-1">4 col-order-1</div>
</div>
<div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Responsive</span></div>
<div class="ant-row">
<div class="ant-row" type="flex">
<div class="ant-col ant-col-6 ant-col-xs-order-1 ant-col-sm-order-2 ant-col-md-order-3 ant-col-lg-order-4"> 1 col-order-responsive </div>
<div class="ant-col ant-col-6 ant-col-xs-order-2 ant-col-sm-order-1 ant-col-md-order-4 ant-col-lg-order-3"> 2 col-order-responsive </div>
<div class="ant-col ant-col-6 ant-col-xs-order-3 ant-col-sm-order-4 ant-col-md-order-2 ant-col-lg-order-2"> 3 col-order-responsive </div>
@ -125,17 +125,17 @@ exports[`renders ./components/grid/demo/flex-order.vue correctly 1`] = `
exports[`renders ./components/grid/demo/flex-stretch.vue correctly 1`] = `
<div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Percentage columns</span></div>
<div class="ant-row">
<div class="ant-row" type="flex">
<div class="ant-col" style="flex: 2 2 auto;">2 / 5</div>
<div class="ant-col" style="flex: 3 3 auto;">3 / 5</div>
</div>
<div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Fill rest</span></div>
<div class="ant-row">
<div class="ant-row" type="flex">
<div class="ant-col" style="flex: 0 0 100px;">100px</div>
<div class="ant-col" style="flex-basis: auto;">auto</div>
</div>
<div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Raw flex style</span></div>
<div class="ant-row">
<div class="ant-row" type="flex">
<div class="ant-col" style="flex: 1 1 200px;">1 1 200px</div>
<div class="ant-col" style="flex: 0 1 300px;">0 1 300px</div>
</div>

2
components/grid/demo/gutter.vue
View File

@ -22,7 +22,7 @@ You can use the `gutter` property of `Row` as grid spacing, we recommend set it
You can set it to a object like `{ xs: 8, sm: 16, md: 24, lg: 32 }` for responsive design.
You can use a array to set vertical spacing, `[horizontal, vertical]` `[16, { xs: 8, sm: 16, md: 24, lg: 32 }]`.
You can use an array to set vertical spacing, `[horizontal, vertical]` `[16, { xs: 8, sm: 16, md: 24, lg: 32 }]`.
> vertical gutter was supported after `1.5.0`.

0
components/grid/style/index.ts → components/grid/style/index.tsx
View File