From 7dc503363056bc07dc5a8167f218db75afa20200 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 12 Mar 2024 10:25:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(flex):=20=E7=A7=BB=E9=99=A4=E5=BA=9F?=
 =?UTF-8?q?=E5=BC=83=E7=BB=84=E4=BB=B6flex?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/opendesign/src/flex/OFlex.vue        |  94 ----------
 packages/opendesign/src/flex/OFlexItem.vue    |  32 ----
 .../src/flex/__demo__/FlexBasic.vue           | 105 -----------
 .../opendesign/src/flex/__demo__/TheIndex.vue |  11 --
 packages/opendesign/src/flex/index.ts         |  14 --
 packages/opendesign/src/flex/style/index.scss |  98 -----------
 packages/opendesign/src/flex/style/index.ts   |   2 -
 packages/opendesign/src/flex/style/var.scss   |   4 -
 packages/opendesign/src/flex/types.ts         | 164 ------------------
 packages/opendesign/src/index.scss            |   1 -
 packages/opendesign/src/index.ts              |   1 -
 packages/portal/src/router.ts                 |   6 -
 12 files changed, 532 deletions(-)
 delete mode 100644 packages/opendesign/src/flex/OFlex.vue
 delete mode 100644 packages/opendesign/src/flex/OFlexItem.vue
 delete mode 100644 packages/opendesign/src/flex/__demo__/FlexBasic.vue
 delete mode 100644 packages/opendesign/src/flex/__demo__/TheIndex.vue
 delete mode 100644 packages/opendesign/src/flex/index.ts
 delete mode 100644 packages/opendesign/src/flex/style/index.scss
 delete mode 100644 packages/opendesign/src/flex/style/index.ts
 delete mode 100644 packages/opendesign/src/flex/style/var.scss
 delete mode 100644 packages/opendesign/src/flex/types.ts

diff --git a/packages/opendesign/src/flex/OFlex.vue b/packages/opendesign/src/flex/OFlex.vue
deleted file mode 100644
index 651eb979..00000000
--- a/packages/opendesign/src/flex/OFlex.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<script setup lang="ts">
-import { logger } from '../_utils/log';
-import { flexProps, FlexMediaT } from './types';
-import { computed } from 'vue';
-
-const props = defineProps(flexProps);
-
-const getMediaGap = (opts?: FlexMediaT) => {
-  if (!opts) {
-    return;
-  }
-  const { gapX, gapY, gap: gapXY } = opts;
-  let gx = gapX;
-  let gy = gapY;
-  if (gapXY) {
-    const [x, y] = gapXY.split(' ');
-    gx = gx ?? x;
-    gy = gy ?? y ?? gx;
-  }
-  return {
-    x: gx === 'auto' ? undefined : gx,
-    y: gy === 'auto' ? undefined : gy,
-  };
-};
-
-const gap = computed(() => {
-  return getMediaGap(props);
-});
-const x3lGap = computed(() => {
-  return getMediaGap(props.x3l);
-});
-const x2lGap = computed(() => {
-  return getMediaGap(props.x2l);
-});
-const xlGap = computed(() => {
-  return getMediaGap(props.xl);
-});
-
-const lgGap = computed(() => {
-  return getMediaGap(props.lg);
-});
-
-const mdGap = computed(() => {
-  return getMediaGap(props.md);
-});
-
-const smGap = computed(() => {
-  return getMediaGap(props.sm);
-});
-
-const xsGap = computed(() => {
-  return getMediaGap(props.xs);
-});
-
-logger.warn('component OFlex|OFlexItem is deprecated, please use ORow|OCol instead');
-</script>
-<template>
-  <div
-    class="o-flex"
-    :style="{
-      justifyContent: props.justify,
-      flexDirection: props.direction,
-      alignItems: props.align,
-      flexWrap: props.wrap,
-      '--flex-gap-x': gap?.x,
-      '--flex-gap-y': gap?.y,
-      '--flex-xs-gap-x': xsGap?.x,
-      '--flex-xs-gap-y': xsGap?.y,
-      '--flex-sm-gap-x': smGap?.x,
-      '--flex-sm-gap-y': smGap?.y,
-      '--flex-md-gap-x': mdGap?.x,
-      '--flex-md-gap-y': mdGap?.y,
-      '--flex-lg-gap-x': lgGap?.x,
-      '--flex-lg-gap-y': lgGap?.y,
-      '--flex-xl-gap-x': xlGap?.x,
-      '--flex-xl-gap-y': xlGap?.y,
-      '--flex-x2l-gap-x': x2lGap?.x,
-      '--flex-x2l-gap-y': x2lGap?.y,
-      '--flex-x3l-gap-x': x3lGap?.x,
-      '--flex-x3l-gap-y': x3lGap?.y,
-    }"
-    :class="{
-      'o-flex-xs': !!props.xs,
-      'o-flex-sm': !!props.sm,
-      'o-flex-md': !!props.md,
-      'o-flex-lg': !!props.lg,
-      'o-flex-xl': !!props.xl,
-      'o-flex-x2l': !!props.x2l,
-      'o-flex-x3l': !!props.x3l,
-    }"
-  >
-    <slot></slot>
-  </div>
-</template>
diff --git a/packages/opendesign/src/flex/OFlexItem.vue b/packages/opendesign/src/flex/OFlexItem.vue
deleted file mode 100644
index 896cf689..00000000
--- a/packages/opendesign/src/flex/OFlexItem.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import { flexItemProps } from './types';
-
-const props = defineProps(flexItemProps);
-</script>
-<template>
-  <div
-    class="o-flex-item"
-    :style="{
-      alignSelf: props.align,
-      '--flex-item-flex': props.flex,
-      '--flex-item-xs-flex': props.xs?.flex,
-      '--flex-item-sm-flex': props.sm?.flex,
-      '--flex-item-md-flex': props.md?.flex,
-      '--flex-item-lg-flex': props.lg?.flex,
-      '--flex-item-xl-flex': props.xl?.flex,
-      '--flex-item-x2l-flex': props.x2l?.flex,
-      '--flex-item-x3l-flex': props.x3l?.flex,
-    }"
-    :class="{
-      'o-flex-item-xs': !!props.xs,
-      'o-flex-item-sm': !!props.sm,
-      'o-flex-item-md': !!props.md,
-      'o-flex-item-lg': !!props.lg,
-      'o-flex-item-xl': !!props.xl,
-      'o-flex-item-x2l': !!props.x2l,
-      'o-flex-item-x3l': !!props.x3l,
-    }"
-  >
-    <slot></slot>
-  </div>
-</template>
diff --git a/packages/opendesign/src/flex/__demo__/FlexBasic.vue b/packages/opendesign/src/flex/__demo__/FlexBasic.vue
deleted file mode 100644
index c39f7011..00000000
--- a/packages/opendesign/src/flex/__demo__/FlexBasic.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script setup lang="ts">
-import { OFlex, OFlexItem } from '../index';
-</script>
-<template>
-  <h4>Basic 1</h4>
-  <div class="block">
-    <OFlex gap="32px" :xl="{ gap: '18px' }" :lg="{ gap: '12px 0' }" :md="{ gap: '0 8px' }" :sm="{ gap: '24px' }" :xs="{ gap: '0' }" wrap="wrap">
-      <OFlexItem class="colored"><div class="box">box</div></OFlexItem>
-      <OFlexItem flex="50%" class="colored"><div class="box">box</div></OFlexItem>
-      <OFlexItem class="colored"><div class="box">box</div></OFlexItem>
-      <OFlexItem flex="0 0 50%" class="colored"><div class="box">box</div></OFlexItem>
-      <OFlexItem class="colored"><div class="box">box</div></OFlexItem>
-      <OFlexItem class="colored"><div class="box">box</div></OFlexItem>
-    </OFlex>
-    <br />
-    <OFlex gap-x="16px">
-      <OFlexItem flex="25%" class="colored">
-        <div class="box">box</div>
-      </OFlexItem>
-      <OFlexItem flex="50%" class="colored">
-        <div class="box">box</div>
-      </OFlexItem>
-      <OFlexItem flex="25%" class="colored">
-        <div class="box">box</div>
-      </OFlexItem>
-    </OFlex>
-
-    <br />
-    <OFlex gap="16px">
-      <OFlexItem
-        v-for="item in 10"
-        :key="item"
-        flex="10%"
-        :xl="{ flex: '15%' }"
-        :lg="{ flex: '20%' }"
-        :md="{ flex: '25%' }"
-        :sm="{ flex: '33.333333%' }"
-        :xs="{ flex: '50%' }"
-        class="colored"
-      >
-        <div class="box">{{ item }}</div>
-      </OFlexItem>
-    </OFlex>
-    <br />
-    <OFlex
-      gap-x="16px"
-      gap-y="16px"
-      :xs="{ gap: '4px' }"
-      :sm="{ gap: '8px' }"
-      :md="{ gap: '16px' }"
-      :lg="{ gap: '24px' }"
-      :xl="{ gap: '32px' }"
-      :x2l="{ gap: '48px' }"
-      :x3l="{ gap: '64px' }"
-    >
-      <OFlexItem v-for="item in 10" :key="item" flex="20%" class="colored">
-        <div class="box">111{{ item }}</div>
-      </OFlexItem>
-    </OFlex>
-    <br />
-    <OFlex gap="16px">
-      <div class="colored"><div class="box">box</div></div>
-      <div class="colored"><div class="box">box</div></div>
-      <div class="colored"><div class="box">box</div></div>
-    </OFlex>
-    <br />
-    <OFlex gap="16px">
-      <OFlexItem class="colored"><div class="box">box</div></OFlexItem>
-      <OFlexItem class="colored"><div class="box">box</div></OFlexItem>
-      <OFlexItem class="colored"><div class="box">box</div></OFlexItem>
-    </OFlex>
-  </div>
-</template>
-<style lang="scss">
-.colored {
-  &:nth-child(4n) {
-    .box {
-      background-color: rgba(29, 29, 170, 0.469);
-    }
-  }
-  &:nth-child(4n + 1) {
-    .box {
-      background-color: rgba(38, 140, 144, 0.581);
-    }
-  }
-  &:nth-child(4n + 2) {
-    .box {
-      background-color: rgba(81, 190, 56, 0.581);
-    }
-  }
-  &:nth-child(4n + 3) {
-    .box {
-      background-color: rgba(188, 56, 190, 0.581);
-    }
-  }
-}
-.box {
-  padding: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  // width: 25vw;
-  height: 48px;
-}
-</style>
diff --git a/packages/opendesign/src/flex/__demo__/TheIndex.vue b/packages/opendesign/src/flex/__demo__/TheIndex.vue
deleted file mode 100644
index 6e2c1bce..00000000
--- a/packages/opendesign/src/flex/__demo__/TheIndex.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import '../style';
-
-import FlexBasic from './FlexBasic.vue';
-</script>
-<template>
-  <div class="page-demo">
-    <FlexBasic />
-  </div>
-</template>
-<style lang="scss"></style>
diff --git a/packages/opendesign/src/flex/index.ts b/packages/opendesign/src/flex/index.ts
deleted file mode 100644
index 55c72fd1..00000000
--- a/packages/opendesign/src/flex/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import _OFlex from './OFlex.vue';
-import OFlexItem from './OFlexItem.vue';
-import type { App } from 'vue';
-
-const OFlex = Object.assign(_OFlex, {
-  OFlexItem,
-  install(app: App) {
-    app.component(_OFlex.name, _OFlex);
-    app.component(OFlexItem.name, OFlexItem);
-  },
-});
-
-export { OFlex, OFlexItem };
-export * from './types';
diff --git a/packages/opendesign/src/flex/style/index.scss b/packages/opendesign/src/flex/style/index.scss
deleted file mode 100644
index 4129691e..00000000
--- a/packages/opendesign/src/flex/style/index.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-@use '../../_styles/mixin.scss' as *;
-@use './var.scss';
-$media-xs: 576px;
-$media-sm: 720px;
-$media-md: 960px;
-$media-lg: 1200px;
-$media-xl: 1440px;
-$media-x2l: 1680px;
-$media-x3l: 1920px;
-
-.o-flex {
-  display: flex;
-
-  --flex-item-gap-x: calc(var(--flex-gap-x) / 2);
-  --flex-item-gap-y: var(--flex-gap-y);
-  --flex-shift-x: calc(-1 * var(--flex-item-gap-x));
-  --flex-shift-y: calc(-1 * var(--flex-item-gap-y));
-  margin-left: var(--flex-shift-x);
-  margin-right: var(--flex-shift-x);
-  margin-bottom: var(--flex-shift-y);
-
-  > * {
-    padding-left: var(--flex-item-gap-x);
-    padding-right: var(--flex-item-gap-x);
-    margin-bottom: var(--flex-item-gap-y);
-    flex: 1 0 auto; // 默认撑满
-  }
-}
-
-.o-flex-item {
-  flex: var(--flex-item-flex);
-}
-@media (max-width: $media-x3l) {
-  .o-flex-xl {
-    --flex-item-gap-x: calc(var(--flex-x3l-gap-x) / 2);
-    --flex-item-gap-y: var(--flex-x3l-gap-y);
-  }
-  .o-flex-item-xl {
-    flex: var(--flex-item-x3l-flex);
-  }
-}
-@media (max-width: $media-x2l) {
-  .o-flex-xl {
-    --flex-item-gap-x: calc(var(--flex-x2l-gap-x) / 2);
-    --flex-item-gap-y: var(--flex-x2l-gap-y);
-  }
-  .o-flex-item-xl {
-    flex: var(--flex-item-x2l-flex);
-  }
-}
-@media (max-width: $media-xl) {
-  .o-flex-xl {
-    --flex-item-gap-x: calc(var(--flex-xl-gap-x) / 2);
-    --flex-item-gap-y: var(--flex-xl-gap-y);
-  }
-  .o-flex-item-xl {
-    flex: var(--flex-item-xl-flex);
-  }
-}
-
-@media (max-width: $media-lg) {
-  .o-flex-lg {
-    --flex-item-gap-x: calc(var(--flex-lg-gap-x) / 2);
-    --flex-item-gap-y: var(--flex-lg-gap-y);
-  }
-  .o-flex-item-lg {
-    flex: var(--flex-item-lg-flex);
-  }
-}
-@media (max-width: $media-md) {
-  .o-flex-md {
-    --flex-item-gap-x: calc(var(--flex-md-gap-x) / 2);
-    --flex-item-gap-y: var(--flex-md-gap-y);
-  }
-  .o-flex-item-md {
-    flex: var(--flex-item-md-flex);
-  }
-}
-
-@media (max-width: $media-sm) {
-  .o-flex-sm {
-    --flex-item-gap-x: calc(var(--flex-sm-gap-x) / 2);
-    --flex-item-gap-y: var(--flex-sm-gap-y);
-  }
-  .o-flex-item-sm {
-    flex: var(--flex-item-sm-flex);
-  }
-}
-
-@media (max-width: $media-xs) {
-  .o-flex-xs {
-    --flex-item-gap-x: calc(var(--flex-xs-gap-x) / 2);
-    --flex-item-gap-y: var(--flex-xs-gap-y);
-  }
-  .o-flex-item-xs {
-    flex: var(--flex-item-xs-flex);
-  }
-}
diff --git a/packages/opendesign/src/flex/style/index.ts b/packages/opendesign/src/flex/style/index.ts
deleted file mode 100644
index 786fce9c..00000000
--- a/packages/opendesign/src/flex/style/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import '../../_styles';
-import './index.scss';
diff --git a/packages/opendesign/src/flex/style/var.scss b/packages/opendesign/src/flex/style/var.scss
deleted file mode 100644
index b93b62a3..00000000
--- a/packages/opendesign/src/flex/style/var.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.o-flex {
-  --flex-gap-x: 0px;
-  --flex-gap-y: 0px;
-}
diff --git a/packages/opendesign/src/flex/types.ts b/packages/opendesign/src/flex/types.ts
deleted file mode 100644
index e748713d..00000000
--- a/packages/opendesign/src/flex/types.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-import { ExtractPropTypes, PropType } from 'vue';
-export interface FlexMediaT {
-  gap?: string;
-  gapY?: string;
-  gapX?: string;
-}
-export interface FlexItemMediaT {
-  flex: string;
-}
-
-export const flexProps = {
-  /**
-   * 是否为inline-flex
-   */
-  inline: {
-    type: Boolean,
-  },
-  /**
-   * 同 align-items
-   */
-  align: {
-    type: String as PropType<'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline' | 'inherit' | 'initial'>,
-  },
-  /**
-   * 同 justify-content
-   */
-  justify: {
-    type: String as PropType<'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'inherit' | 'initial'>,
-  },
-  /**
-   * flex-wrap
-   */
-  wrap: {
-    type: String as PropType<'nowrap' | 'wrap' | 'wrap-reverse' | 'initial' | 'inherit'>,
-    default: 'wrap',
-  },
-  /**
-   * flex-direction
-   */
-  direction: {
-    type: String as PropType<'row' | 'row-reverse' | 'column' | 'column-reverse'>,
-  },
-  /**
-   * gapX
-   */
-  gap: {
-    type: String,
-  },
-  /**
-   * gapX
-   */
-  gapX: {
-    type: String,
-  },
-  /**
-   * gapY
-   */
-  gapY: {
-    type: String,
-  },
-  /**
-   * @media (max-width: 576px)
-   */
-  xs: {
-    type: Object as PropType<FlexMediaT>,
-  },
-  /**
-   * @media (max-width: 720px)
-   */
-  sm: {
-    type: Object as PropType<FlexMediaT>,
-  },
-  /**
-   * @media (max-width: 960px)
-   */
-  md: {
-    type: Object as PropType<FlexMediaT>,
-  },
-  /**
-   * @media (max-width: 1200px)
-   */
-  lg: {
-    type: Object as PropType<FlexMediaT>,
-  },
-  /**
-   * @media (max-width: 1440px)
-   */
-  xl: {
-    type: Object as PropType<FlexMediaT>,
-  },
-  /**
-   * @media (max-width: 1680px)
-   */
-  x2l: {
-    type: Object as PropType<FlexMediaT>,
-  },
-  /**
-   * @media (max-width: 1920px)
-   */
-  x3l: {
-    type: Object as PropType<FlexMediaT>,
-  },
-};
-
-export const flexItemProps = {
-  /**
-   * flex-grow
-   */
-  flex: {
-    type: String,
-    default: '1 0 auto',
-  },
-  /**
-   * 同 align-self
-   */
-  align: {
-    type: String as PropType<'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline' | 'inherit' | 'initial'>,
-  },
-  /**
-   * @media (max-width: 576px)
-   */
-  xs: {
-    type: Object as PropType<FlexItemMediaT>,
-  },
-  /**
-   * @media (max-width: 720px)
-   */
-  sm: {
-    type: Object as PropType<FlexItemMediaT>,
-  },
-  /**
-   * @media (max-width: 960px)
-   */
-  md: {
-    type: Object as PropType<FlexItemMediaT>,
-  },
-  /**
-   * @media (max-width: 1200px)
-   */
-  lg: {
-    type: Object as PropType<FlexItemMediaT>,
-  },
-  /**
-   * @media (max-width: 1440px)
-   */
-  xl: {
-    type: Object as PropType<FlexItemMediaT>,
-  },
-  /**
-   * @media (max-width: 1680px)
-   */
-  x2l: {
-    type: Object as PropType<FlexItemMediaT>,
-  },
-  /**
-   * @media (max-width: 1920px)
-   */
-  x3l: {
-    type: Object as PropType<FlexItemMediaT>,
-  },
-};
-
-export type FlexPropsT = ExtractPropTypes<typeof flexProps>;
-export type FlexItemPropsT = ExtractPropTypes<typeof flexItemProps>;
diff --git a/packages/opendesign/src/index.scss b/packages/opendesign/src/index.scss
index 6f0a2c4e..9818ee9f 100644
--- a/packages/opendesign/src/index.scss
+++ b/packages/opendesign/src/index.scss
@@ -35,7 +35,6 @@
 @use './carousel/style/index.scss' as *;
 @use './message/style/index.scss' as *;
 @use './cascader/style/index.scss' as *;
-@use './flex/style/index.scss' as *;
 @use './grid/style/index.scss' as *;
 @use './result/style/index.scss' as *;
 @use './scroller/style/index.scss' as *;
diff --git a/packages/opendesign/src/index.ts b/packages/opendesign/src/index.ts
index 618b4dfa..6a8ce2b2 100644
--- a/packages/opendesign/src/index.ts
+++ b/packages/opendesign/src/index.ts
@@ -38,7 +38,6 @@ export * from './card';
 export * from './message';
 export * from './carousel';
 export * from './cascader';
-export * from './flex'; // deprecated
 export * from './grid';
 export * from './result';
 export * from './scroller';
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 510d40ad..fcd6c9c7 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -218,12 +218,6 @@ export const routes = [
     label: '栅格 Grid',
     component: () => import('@components/grid/__demo__/TheIndex.vue'),
   },
-  {
-    path: '/flex',
-    name: 'Flex',
-    label: '布局 Flex(已废弃)',
-    component: () => import('@components/flex/__demo__/TheIndex.vue'),
-  },
   {
     path: '/result',
     name: 'Result',
-- 
Gitee