refactor: inline all x-design design config (#2317)

* refactor(action-menu): inline action-menu design config

* refactor(alert): inline alert design config

* refactor(breadcrumb-item): inline breadcrumb-item design config

* refactor(drawer): inline drawer design config

* refactor(dropdown): inline dropdown design config

* refactor(dropdown-item): inline dropdown-item design config

* refactor(filter-box): inline filter-box design config

* refactor(guide): inline guide design config

* refactor(popconfirm): inline popconfirm design config

* refactor(select): inline select design config

* refactor(split): inline split design config

* refactor(time-range): inline split time-range config

* refactor(time-spinner): inline split time-spinner config

* refactor(transfer-panel): inline transfer-panel design config

* refactor(upload-list): inline upload-list design config

* refactor(tree-node): inline tree-node design config

* refactor(milestone): inline milestone design config

packages/design/aurora/index.ts

@@ -1,15 +1,26 @@
 import Alert from './src/alert'
+import BreadcrumbItem from './src/breadcrumb-item'
 import CollapseItem from './src/collapse-item'
 import Drawer from './src/drawer'
 import Dropdown from './src/dropdown'
 import DropdownMenu from './src/dropdown-menu'
 import DropdownItem from './src/dropdown-item'
+import FilterBox from './src/filter-box'
 import Form from './src/form'
+import Guide from './src/guide'
 import Grid from './src/grid'
+import Milestone from './src/milestone'
+import Popconfirm from './src/popconfirm'
+import Popover from './src/popover'
 import Switch from './src/switch'
 import Select from './src/select'
+import Split from './src/split'
+import Time from './src/time'
+import TimeRange from './src/time-range'
+import TimeSpinner from './src/time-spinner'
+import TransferPanel from './src/transfer-panel'
+import UploadList from './src/upload-list'
 import Loading from './src/loading'
-import Popover from './src/popover'
 import Input from './src/input'
 import DateRange from './src/date-range'
 import Pager from './src/pager'
@@ -23,16 +34,27 @@ export default {
   version,
   components: {
     Alert,
+    BreadcrumbItem,
     CollapseItem,
     Drawer,
     Dropdown,
     DropdownMenu,
     DropdownItem,
+    FilterBox,
     Form,
+    Guide,
     Grid,
+    Milestone,
+    Popconfirm,
+    Popover,
     Switch,
     Select,
-    Popover,
+    Split,
+    Time,
+    TimeRange,
+    TimeSpinner,
+    TransferPanel,
+    UploadList,
     Loading,
     Input,
     DateRange,

packages/design/aurora/src/alert/index.ts

@@ -3,14 +3,5 @@ import { iconWarning } from '@opentiny/vue-icon'
 export default {
   icons: {
     warning: iconWarning()
-  },
-  renderless: (props, hooks, { emit }, api) => {
-    const state = api.state
-    return {
-      close() {
-        state.show = false
-        emit('close')
-      }
-    }
   }
 }

packages/design/smb/src/breadcrumb-item/index.ts → packages/design/aurora/src/breadcrumb-item/index.ts

@@ -1,3 +1,3 @@
 export default {
-  separator: '/'
+  separator: '>'
 }

packages/design/aurora/src/filter-box/index.ts

@@ -0,0 +1,7 @@
+import { iconArrowBottom } from '@opentiny/vue-icon'
+
+export default {
+  icons: {
+    expandButton: iconArrowBottom()
+  }
+}

packages/design/aurora/src/milestone/index.ts

@@ -0,0 +1,26 @@
+export default {
+  renderless: (props, hooks, { constants }, api) => {
+    return {
+      getMileIcon: (node) => {
+        const status = props.milestonesStatus[node[props.statusField]] || constants.DEFAULT_COLOR
+
+        const isCompleted = node[props.statusField] === props.completedField
+        const switchColor = isCompleted && !props.solid
+        const { r, g, b } = api.hexToRgb(status)
+
+        return {
+          background: (switchColor ? constants.DEFAULT_BACK_COLOR : status) + '!important',
+          color: (switchColor ? status : constants.DEFAULT_BACK_COLOR) + '!important',
+          boxShadow: `rgba(${r},${g},${b},.4) ${constants.BOX_SHADOW_PX}`
+        }
+      },
+      getFlagStyle: ({ index, idx }) => {
+        return {
+          left: `calc(${
+            (100 / (props.data[props.flagBefore ? index : index + 1][props.flagField].length + 1)) * (idx + 1)
+          }% - 29px)`
+        }
+      }
+    }
+  }
+}

packages/design/aurora/src/popconfirm/index.ts

@@ -0,0 +1,7 @@
+import { iconWarning } from '@opentiny/vue-icon'
+
+export default {
+  icons: {
+    warning: iconWarning()
+  }
+}

packages/design/aurora/src/split/index.ts

@@ -0,0 +1,3 @@
+export default {
+  triggerBarConWithLine: false
+}

packages/design/smb/src/time-range/index.ts → packages/design/aurora/src/time-range/index.ts

@@ -1,4 +1,4 @@
 export default {
   // 控制time-picker组件时间范围button显示和样式
-  showTimePickerRangeButton: true
+  showTimePickerRangeButton: false
 }

packages/design/aurora/src/time-spinner/index.ts

@@ -0,0 +1,4 @@
+export default {
+  // 时间选择器单个item的margin为0px.
+  itemMarginSpace: 0
+}

packages/design/aurora/src/time/index.ts

@@ -0,0 +1,4 @@
+export default {
+  // 控制time-picker组件button显示和样式
+  showTimePickerButton: false
+}

packages/design/aurora/src/transfer-panel/index.ts

@@ -0,0 +1,4 @@
+export default {
+  inputBoxType: 'normal',
+  showInputSearch: false
+}

packages/design/aurora/src/upload-list/index.ts

@@ -0,0 +1,12 @@
+export default {
+  state: {
+    progressType: 'circle',
+    progressWidth: null,
+    progressStrokeWidth: 6,
+    tooltipDisabled: true
+  },
+  icons: {
+    closeComponent: 'icon-close',
+    preViewComponent: ''
+  }
+}

packages/design/saas/index.ts

@@ -1,15 +1,26 @@
 import Alert from './src/alert'
 import Badge from './src/badge'
+import BreadcrumbItem from './src/breadcrumb-item'
 import CollapseItem from './src/collapse-item'
 import Drawer from './src/drawer'
 import Dropdown from './src/dropdown'
 import DropdownMenu from './src/dropdown-menu'
 import DropdownItem from './src/dropdown-item'
+import FilterBox from './src/filter-box'
 import Form from './src/form'
+import Guide from './src/guide'
 import Grid from './src/grid'
+import Milestone from './src/milestone'
+import Popconfirm from './src/popconfirm'
+import Popover from './src/popover'
 import Switch from './src/switch'
 import Select from './src/select'
-import Popover from './src/popover'
+import Split from './src/split'
+import Time from './src/time'
+import TimeRange from './src/time-range'
+import TimeSpinner from './src/time-spinner'
+import TransferPanel from './src/transfer-panel'
+import UploadList from './src/upload-list'
 import Loading from './src/loading'
 import Input from './src/input'
 import DateRange from './src/date-range'
@@ -25,22 +36,33 @@ export default {
   components: {
     Alert,
     Badge,
+    BreadcrumbItem,
     CollapseItem,
     Drawer,
     Dropdown,
     DropdownMenu,
     DropdownItem,
+    FilterBox,
     Form,
+    Guide,
     Grid,
+    Milestone,
+    Pager,
+    Popconfirm,
+    Popeditor,
+    Popover,
     Switch,
     Select,
-    Popover,
+    Split,
+    Time,
+    TimeRange,
+    TimeSpinner,
+    TransferPanel,
+    UploadList,
     Loading,
     Input,
     DateRange,
-    Pager,
     DialogBox,
-    Popeditor,
     DatePanel
   }
 }

packages/design/saas/src/alert/index.ts

@@ -3,14 +3,5 @@ import { iconWarning } from '@opentiny/vue-icon'
 export default {
   icons: {
     warning: iconWarning()
-  },
-  renderless: (props, hooks, { emit }, api) => {
-    const state = api.state
-    return {
-      close() {
-        state.show = false
-        emit('close')
-      }
-    }
   }
 }

packages/design/saas/src/breadcrumb-item/index.ts

@@ -0,0 +1,3 @@
+export default {
+  separator: '>'
+}

packages/design/saas/src/filter-box/index.ts

@@ -0,0 +1,7 @@
+import { iconArrowBottom } from '@opentiny/vue-icon'
+
+export default {
+  icons: {
+    expandButton: iconArrowBottom()
+  }
+}

packages/design/smb/src/drawer/index.ts → packages/design/saas/src/guide/index.ts

@@ -1,5 +1,5 @@
 export default {
   state: {
-    btnOrderReversed: true
+    isUseModalOverlay: true
   }
 }

packages/design/saas/src/milestone/index.ts

@@ -0,0 +1,26 @@
+export default {
+  renderless: (props, hooks, { constants }, api) => {
+    return {
+      getMileIcon: (node) => {
+        const status = props.milestonesStatus[node[props.statusField]] || constants.DEFAULT_COLOR
+
+        const isCompleted = node[props.statusField] === props.completedField
+        const switchColor = isCompleted && !props.solid
+        const { r, g, b } = api.hexToRgb(status)
+
+        return {
+          background: (switchColor ? constants.DEFAULT_BACK_COLOR : status) + '!important',
+          color: (switchColor ? status : constants.DEFAULT_BACK_COLOR) + '!important',
+          boxShadow: `rgba(${r},${g},${b},.4) ${constants.BOX_SHADOW_PX}`
+        }
+      },
+      getFlagStyle: ({ index, idx }) => {
+        return {
+          left: `calc(${
+            (100 / (props.data[props.flagBefore ? index : index + 1][props.flagField].length + 1)) * (idx + 1)
+          }% - 29px)`
+        }
+      }
+    }
+  }
+}

packages/design/saas/src/popconfirm/index.ts

@@ -0,0 +1,7 @@
+import { iconWarning } from '@opentiny/vue-icon'
+
+export default {
+  icons: {
+    warning: iconWarning()
+  }
+}

packages/design/saas/src/split/index.ts

@@ -0,0 +1,3 @@
+export default {
+  triggerBarConWithLine: false
+}

packages/design/saas/src/time-range/index.ts

@@ -0,0 +1,4 @@
+export default {
+  // 控制time-picker组件时间范围button显示和样式
+  showTimePickerRangeButton: false
+}

packages/design/saas/src/time-spinner/index.ts

@@ -0,0 +1,4 @@
+export default {
+  // 时间选择器单个item的margin为0px.
+  itemMarginSpace: 0
+}

packages/design/saas/src/time/index.ts

@@ -0,0 +1,4 @@
+export default {
+  // 控制time-picker组件button显示和样式
+  showTimePickerButton: false
+}

packages/design/saas/src/transfer-panel/index.ts

@@ -0,0 +1,4 @@
+export default {
+  inputBoxType: 'normal',
+  showInputSearch: false
+}

packages/design/saas/src/upload-list/index.ts

@@ -0,0 +1,12 @@
+export default {
+  state: {
+    progressType: 'circle',
+    progressWidth: null,
+    progressStrokeWidth: 6,
+    tooltipDisabled: true
+  },
+  icons: {
+    closeComponent: 'icon-close',
+    preViewComponent: ''
+  }
+}

packages/design/smb/index.ts

@@ -1,44 +1,7 @@
-import Alert from './src/alert'
-import ActionMenu from './src/action-menu'
-import Popconfirm from './src/popconfirm'
-import Drawer from './src/drawer'
-import Dropdown from './src/dropdown'
-import DropdownItem from './src/dropdown-item'
-import FilterBox from './src/filter-box'
-import Guide from './src/guide'
-import Select from './src/select'
-import TreeNode from './src/tree-node'
-import TimeSpinner from './src/time-spinner'
-import TimeRange from './src/time-range'
-import Time from './src/time-spinner'
-import UploadList from './src/upload-list'
-import BreadcrumbItem from './src/breadcrumb-item'
-import Milestone from './src/milestone'
-import Split from './src/split'
-import TransferPanel from './src/transfer-panel'
 import { version } from './package.json'
 
 export default {
   name: 'smb',
   version,
-  components: {
-    Alert,
-    ActionMenu,
-    Popconfirm,
-    Drawer,
-    Dropdown,
-    DropdownItem,
-    FilterBox,
-    Guide,
-    Select,
-    TreeNode,
-    TimeSpinner,
-    TimeRange,
-    Time,
-    BreadcrumbItem,
-    UploadList,
-    Milestone,
-    Split,
-    TransferPanel
-  }
+  components: {}
 }