diff --git a/src/index.less b/src/index.less index 588df8c..39ffb4f 100644 --- a/src/index.less +++ b/src/index.less @@ -46,3 +46,5 @@ @import './tall-storage/index.less'; @import './time-line/index.less'; @import './upload-list/index.less'; +@import './multi-select/index.less'; +@import './wheel/index.less'; diff --git a/src/multi-select/index.js b/src/multi-select/index.js new file mode 100644 index 0000000..de03ffe --- /dev/null +++ b/src/multi-select/index.js @@ -0,0 +1,12 @@ +export default { + "tiny-mobile-multi-select-bg": "#fff", + "tiny-mobile-multi-select-header-bg": "#fff", + "tiny-mobile-multi-select-header-item-height": "28px", + "tiny-mobile-multi-select-header-item-bg": "rgba(0, 0, 0, 0.03)", + "tiny-mobile-multi-select-header-item-margin-top": "10px", + "tiny-mobile-multi-select-header-label-text-color": "#595959", + "tiny-mobile-multi-select-header-label-font-size": "12px", + "tiny-mobile-multi-select-svg-fill-color": "#c2c2c2", + "tiny-mobile-multi-select-content-height": "226px", + "tiny-mobile-multi-select-footer-width": "164px", +}; diff --git a/src/multi-select/index.less b/src/multi-select/index.less new file mode 100644 index 0000000..bafccd1 --- /dev/null +++ b/src/multi-select/index.less @@ -0,0 +1,147 @@ +/** +* Copyright (c) 2022 - present TinyVue Authors. +* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd. +* +* Use of this source code is governed by an MIT-style license. +* +* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, +* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR +* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. +* +*/ + +@import '../custom.less'; +@import '../mixins/hairline.less'; +@import './vars.less'; + +@multi-select-prefix-cls: ~'@{css-prefix}mobile-multi-select'; + +.@{multi-select-prefix-cls} { + background: var(--ti-mobile-multi-select-bg, #fff); + width: 100%; + border-radius: 0px 0px 16px 16px; + + &__header { + display: flex; + padding: 0 16px; + flex-direction: row; + justify-content: center; + + &__flexCenter { + height: 48px; + width: 100%; + display: flex; + flex: 1; + flex-direction: row; + justify-content: space-between; + background: var(--ti-mobile-multi-select-header-bg, #fff); + box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.06) inset; + } + + &__calc { + position: absolute; + opacity: 0; + z-index: -999; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + pointer-events: none; + } + + &__item { + display: flex; + align-items: center; + justify-content: center; + height: var(--ti-mobile-multi-select-header-item-height, 28px); + background: var(--ti-mobile-multi-select-header-item-bg, rgba(0, 0, 0, 0.03)); + border-radius: 4px; + margin-top: var(--ti-mobile-multi-select-header-item-margin-top, 10px); + padding: 5px 8px; + + &:hover { + svg { + fill: var(--ti-mobile-base-color-brand-1, #4a79fe); + } + } + } + + &__item:hover &__label { + color: var(--ti-mobile-base-color-brand-1, #4a79fe); + } + + &__label { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + word-break: break-all; + font-size: var(--ti-mobile-multi-select-header-label-font-size, 12px); + color: var(--ti-mobile-multi-select-header-label-text-color, #595959); + line-height: 18px; + } + + &__icon { + height: 12px; + line-height: 12px; + width: 12px; + margin-top: 2px; + margin-left: 4px; + font-size: 0px; + transform-origin: center center; + transition: all linear 0.3s; + + svg { + fill: var(--ti-mobile-multi-select-svg-fill-color, #c2c2c2); + font-size: 12px; + vertical-align: text-bottom; + } + } + + &__active { + svg { + fill: var(--ti-mobile-base-color-brand-1, #4a79fe); + } + + color: var(--ti-mobile-base-color-brand-1, #4a79fe); + } + } + + &__content { + height: var(--ti-mobile-multi-select-content-height, 226px); + } + + .noFooter { + border-radius: 0px 0px 16px 16px; + } + + &__footer { + height: 74px; + padding: 16px; + text-align: center; + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + border-radius: 0px 0px 16px 16px; + box-shadow: 0px -1px 3px 0px #f8f8f8; + + button { + width: var(--ti-mobile-multi-select-footer-width, 164px); + } + + :first-child { + margin-right: 15px; + } + + .tiny-mobile-button--primary { + color: var(--ti-mobile-button-color, #fff); + border-color: var(--ti-mobile-base-color-brand-1, #4a79fe); + background-color: var(--ti-mobile-base-color-brand-1, #4a79fe); + } + + .tiny-mobile-button--default { + color: #191919; + } + } +} \ No newline at end of file diff --git a/src/multi-select/vars.less b/src/multi-select/vars.less new file mode 100644 index 0000000..a6dfcf0 --- /dev/null +++ b/src/multi-select/vars.less @@ -0,0 +1,12 @@ +:root { + --ti-mobile-multi-select-bg: #fff; + --ti-mobile-multi-select-header-bg: #fff; + --ti-mobile-multi-select-header-item-height: 28px; + --ti-mobile-multi-select-header-item-bg: rgba(0, 0, 0, 0.03); + --ti-mobile-multi-select-header-item-margin-top: 10px; + --ti-mobile-multi-select-header-label-text-color: #595959; + --ti-mobile-multi-select-header-label-font-size: 12px; + --ti-mobile-multi-select-svg-fill-color: #c2c2c2; + --ti-mobile-multi-select-content-height: 226px; + --ti-mobile-multi-select-footer-width: 164px; +} diff --git a/src/vars/index.js b/src/vars/index.js index 7feb5b9..63fada4 100644 --- a/src/vars/index.js +++ b/src/vars/index.js @@ -1,42 +1,44 @@ -import ActionSheet from '../action-sheet' -import Alert from '../alert' -import Avatar from '../avatar' -import Badge from '../badge' -import Base from '../base' -import Button from '../button' -import Checkbox from '../checkbox' -import CheckboxGroup from '../checkbox-group' -import DialogBox from '../dialog-box' -import DropdownItem from '../dropdown-item' -import DropdownMenu from '../dropdown-menu' -import Exception from '../exception' -import FileUpload from '../file-upload' -import Form from '../form' -import FormItem from '../form-item' -import ImageViewer from '../image-viewer' -import Input from '../input' -import List from '../list' -import Loading from '../loading' -import MiniPicker from '../mini-picker' -import NavBar from '../nav-bar' -import Numeric from '../numeric' -import PickerColumn from '../picker-column' -import Popup from '../popup' -import Progress from '../progress' -import PullRefresh from '../pull-refresh' -import Radio from '../radio' -import Search from '../search' -import Slider from '../slider' -import Svg from '../svg' -import Switch from '../switch' -import Tabbar from '../tabbar' -import TabbarItem from '../tabbar-item' -import Tabs from '../tabs' -import TallStorage from '../tall-storage' -import TimeLine from '../time-line' -import Upload from '../upload' -import UploadDragger from '../upload-dragger' -import UploadList from '../upload-list' +import ActionSheet from "../action-sheet"; +import Alert from "../alert"; +import Avatar from "../avatar"; +import Badge from "../badge"; +import Base from "../base"; +import Button from "../button"; +import Checkbox from "../checkbox"; +import CheckboxGroup from "../checkbox-group"; +import DialogBox from "../dialog-box"; +import DropdownItem from "../dropdown-item"; +import DropdownMenu from "../dropdown-menu"; +import Exception from "../exception"; +import FileUpload from "../file-upload"; +import Form from "../form"; +import FormItem from "../form-item"; +import ImageViewer from "../image-viewer"; +import Input from "../input"; +import List from "../list"; +import Loading from "../loading"; +import MiniPicker from "../mini-picker"; +import NavBar from "../nav-bar"; +import Numeric from "../numeric"; +import PickerColumn from "../picker-column"; +import Popup from "../popup"; +import Progress from "../progress"; +import PullRefresh from "../pull-refresh"; +import Radio from "../radio"; +import Search from "../search"; +import Slider from "../slider"; +import Svg from "../svg"; +import Switch from "../switch"; +import Tabbar from "../tabbar"; +import TabbarItem from "../tabbar-item"; +import Tabs from "../tabs"; +import TallStorage from "../tall-storage"; +import TimeLine from "../time-line"; +import Upload from "../upload"; +import UploadDragger from "../upload-dragger"; +import UploadList from "../upload-list"; +import MultiSelect from "../multi-select"; +import Wheel from "../wheel"; export default { ...ActionSheet, @@ -77,5 +79,7 @@ export default { ...TimeLine, ...Upload, ...UploadDragger, - ...UploadList -} + ...UploadList, + ...MultiSelect, + ...Wheel, +}; diff --git a/src/wheel/index.js b/src/wheel/index.js new file mode 100644 index 0000000..04065c2 --- /dev/null +++ b/src/wheel/index.js @@ -0,0 +1,13 @@ +export default { + "tiny-mobile-wheel-content-font-size": "14px", + "tiny-mobile-wheel-wrapper-height": "224px", + "tiny-mobile-wheel-wrapper-font-size": "14px", + "tiny-mobile-wheel-wrapper-scroll-margin-top": "38px", + "tiny-mobile-wheel-scroll-hasfooter-line-height": "36px", + "tiny-mobile-wheel-scroll-hasfooter-height": "36px", + "tiny-mobile-wheel-scroll-hasfooter-text-color": "#595959", + "tiny-mobile-wheel-scroll-nofooter-line-height": "44px", + "tiny-mobile-wheel-scroll-nofooter-height": "44px", + "tiny-mobile-wheel-scroll-nofooter-text-color": "#191919", + "tiny-mobile-wheel-scroll-icon-font-size": "20px", +}; diff --git a/src/wheel/index.less b/src/wheel/index.less new file mode 100644 index 0000000..9f7d8fb --- /dev/null +++ b/src/wheel/index.less @@ -0,0 +1,105 @@ +/** +* Copyright (c) 2022 - present TinyVue Authors. +* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd. +* +* Use of this source code is governed by an MIT-style license. +* +* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, +* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR +* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. +* +*/ + +@import '../custom.less'; +@import '../mixins/hairline.less'; +@import './vars.less'; + +@wheel-prefix-cls: ~'@{css-prefix}mobile-wheel'; + +.@{wheel-prefix-cls} { + width: 100%; + + ul { + list-style: none; + padding: 0; + } + + &__container { + width: 100%; + z-index: 100; + overflow: hidden; + text-align: center; + font-size: var(--ti-mobile-wheel-content-font-size, 14px); + } + + &__picker__panel { + z-index: 600; + } + + &__picker__content { + position: relative; + top: 0px; + } + + &__wheel__wrapper { + display: flex; + padding: 0 16px; + + .wheel { + flex: 1; + width: 1%; + height: var(--ti-mobile-wheel-wrapper-height, 224px); + overflow: hidden; + font-size: var(--ti-mobile-wheel-wrapper-font-size, 14px); + + .wheel__scroll_hasFooter { + padding: 0px; + margin-top: var(--ti-mobile-wheel-wrapper-scroll-margin-top, 38px); + line-height: var(--ti-mobile-wheel-scroll-hasfooter-line-height, 36px); + list-style: none; + + .wheel__item { + list-style: none; + height: var(--ti-mobile-wheel-scroll-hasfooter-height, 36px); + overflow: hidden; + white-space: nowrap; + color: var(--ti-mobile-wheel-scroll-hasfooter-text-color, #595959); + font-weight: 500; + } + + .wheel__item__selected { + color: var(--ti-mobile-base-color-brand-1, #4a79fe); + } + } + + .wheel__scroll_noFooter { + padding: 0px; + margin-top: 0px; + line-height: var(--ti-mobile-wheel-scroll-nofooter-line-height, 44px); + list-style: none; + + .wheel__item { + list-style: none; + height: var(--ti-mobile-wheel-scroll-nofooter-height, 44px); + overflow: hidden; + white-space: nowrap; + color: var(--ti-mobile-wheel-scroll-nofooter-text-color, #191919); + font-weight: 500; + display: flex; + justify-content: space-between; + align-items: center; + } + + .wheel__item__selected { + color: var(--ti-mobile-base-color-brand-1, #4a79fe); + fill: var(--ti-mobile-base-color-brand-1, #4a79fe); + } + + .size20 { + font-size: var(--ti-mobile-wheel-scroll-icon-font-size, 20px); + } + } + } + } + +} \ No newline at end of file diff --git a/src/wheel/vars.less b/src/wheel/vars.less new file mode 100644 index 0000000..1674146 --- /dev/null +++ b/src/wheel/vars.less @@ -0,0 +1,13 @@ +:root { + --ti-mobile-wheel-content-font-size: 14px; + --ti-mobile-wheel-wrapper-height: 224px; + --ti-mobile-wheel-wrapper-font-size: 14px; + --ti-mobile-wheel-wrapper-scroll-margin-top: 38px; + --ti-mobile-wheel-scroll-hasfooter-line-height: 36px; + --ti-mobile-wheel-scroll-hasfooter-height: 36px; + --ti-mobile-wheel-scroll-hasfooter-text-color: #595959; + --ti-mobile-wheel-scroll-nofooter-line-height: 44px; + --ti-mobile-wheel-scroll-nofooter-height: 44px; + --ti-mobile-wheel-scroll-nofooter-text-color: #191919; + --ti-mobile-wheel-scroll-icon-font-size: 20px; +}