diff --git a/packages/devui-vue/devui/carousel/src/carousel.tsx b/packages/devui-vue/devui/carousel/src/carousel.tsx index aeaed2d9f6..1f8f201838 100644 --- a/packages/devui-vue/devui/carousel/src/carousel.tsx +++ b/packages/devui-vue/devui/carousel/src/carousel.tsx @@ -1,7 +1,7 @@ import { defineComponent, ref, watch, onMounted, onBeforeUnmount, Fragment, Comment, toRefs } from 'vue'; import type { VNode } from 'vue'; import { carouselProps, DotTrigger, CarouselProps } from './types'; -import { Icon } from '@devui/shared/components/icon'; +import { CarouselArrowLeft, CarouselArrowRight } from './components/carousel-icons'; import { useNamespace } from '@devui/shared/utils'; import './carousel.scss'; @@ -182,10 +182,10 @@ export default defineComponent({ {arrowTrigger.value !== 'never' && showArrow.value ? (
) : null} diff --git a/packages/devui-vue/devui/carousel/src/components/carousel-icons.tsx b/packages/devui-vue/devui/carousel/src/components/carousel-icons.tsx new file mode 100644 index 0000000000..0742af52e7 --- /dev/null +++ b/packages/devui-vue/devui/carousel/src/components/carousel-icons.tsx @@ -0,0 +1,26 @@ +export function CarouselArrowLeft(): JSX.Element { + return ( + + + + + + ); +} + +export function CarouselArrowRight(): JSX.Element { + return ( + + + + + + ); +} diff --git a/packages/devui-vue/devui/cascader/src/cascader.scss b/packages/devui-vue/devui/cascader/src/cascader.scss index 3d91d87e7d..7b6f96ae2f 100644 --- a/packages/devui-vue/devui/cascader/src/cascader.scss +++ b/packages/devui-vue/devui/cascader/src/cascader.scss @@ -24,7 +24,28 @@ } &__close { - cursor: pointer; + .close-icon-container { + width: 14px; + height: 14px; + line-height: 14px; + cursor: pointer; + + svg { + width: 14px; + height: 14px; + + path { + fill: $devui-shape-icon-fill; + transition: all $devui-animation-ease-in-out-smooth $devui-animation-duration-slow; + } + + &:hover { + path { + fill: $devui-shape-icon-fill-hover; + } + } + } + } } &__disbaled { @@ -46,6 +67,9 @@ } &--drop-icon-animation { + svg path { + fill: $devui-text; + } transition: transform 0.2s linear; } @@ -83,7 +107,7 @@ } .#{$devui-prefix}-cascader__dropdown--open { - .#{$devui-prefix}-cascader--drop-icon-animation { + .#{$devui-prefix}-cascader__icon { transform: rotate(180deg); } } diff --git a/packages/devui-vue/devui/cascader/src/cascader.tsx b/packages/devui-vue/devui/cascader/src/cascader.tsx index 873d0bd93d..c516e0349d 100644 --- a/packages/devui-vue/devui/cascader/src/cascader.tsx +++ b/packages/devui-vue/devui/cascader/src/cascader.tsx @@ -9,6 +9,7 @@ import { FlexibleOverlay, Placement } from '../../overlay'; import { PopperTrigger } from '../../shared/components/popper-trigger'; import { POPPER_TRIGGER_TOKEN } from '../../shared/components/popper-trigger/src/popper-trigger-types'; import DInput from '../../input/src/input'; +import { SelectArrowIcon, InputClearIcon } from '../../svg-icons'; import './cascader.scss'; export default defineComponent({ @@ -66,12 +67,14 @@ export default defineComponent({ )} {!showClearable.value && (
- +
)} {showClearable.value && props.clearable && (
- +
+ +
)} @@ -103,15 +106,17 @@ export default defineComponent({ )} {props.filterable && isSearching.value && (
- {suggestionsList.value.length === 0 - ? - : suggestionsList.value.map((item) => { + {suggestionsList.value.length === 0 ? ( + + ) : ( + suggestionsList.value.map((item) => { return (
chooseSuggestion(cloneDeep(item))}> {item.labelsString}
); - })} + }) + )}
)} diff --git a/packages/devui-vue/devui/collapse/src/collapse-item.tsx b/packages/devui-vue/devui/collapse/src/collapse-item.tsx index 2237465622..d7a62af9d5 100644 --- a/packages/devui-vue/devui/collapse/src/collapse-item.tsx +++ b/packages/devui-vue/devui/collapse/src/collapse-item.tsx @@ -1,7 +1,7 @@ import { defineComponent, computed, inject, Transition, onMounted, shallowRef } from 'vue'; import { collapseItemProps } from './collapse-types'; import { useNamespace } from '@devui/shared/utils'; -import OpenIcon from './collapse-open-icon'; +import { SelectArrowIcon } from '../../svg-icons'; import { SELECT_TOKEN } from './const'; export default defineComponent({ @@ -65,7 +65,7 @@ export default defineComponent({ onClick={handlerTitleClick}> {ctx.slots.title ? ctx.slots.title() : props.title} - + diff --git a/packages/devui-vue/devui/icon/src/icon-types.ts b/packages/devui-vue/devui/icon/src/icon-types.ts index 60f55f6414..a4494160c8 100644 --- a/packages/devui-vue/devui/icon/src/icon-types.ts +++ b/packages/devui-vue/devui/icon/src/icon-types.ts @@ -5,7 +5,6 @@ export const iconProps = { name: { type: String, default: '', - required: true, }, size: { type: [Number, String], diff --git a/packages/devui-vue/devui/input/src/input.scss b/packages/devui-vue/devui/input/src/input.scss index eb6499e63e..172a02f194 100644 --- a/packages/devui-vue/devui/input/src/input.scss +++ b/packages/devui-vue/devui/input/src/input.scss @@ -49,13 +49,23 @@ } &--sm { - height: $devui-size-sm; + height: 26px; font-size: $devui-font-size-sm; + + .#{$devui-prefix}-input__clear--icon { + width: 14px; + height: 14px; + } } &--lg { - height: $devui-size-lg; + height: 46px; font-size: $devui-font-size-lg; + + .#{$devui-prefix}-input__clear--icon { + width: 18px; + height: 18px; + } } &--feedback { @@ -163,6 +173,19 @@ cursor: pointer; } + &__clear--icon { + path { + fill: $devui-shape-icon-fill; + transition: all $devui-animation-ease-in-out-smooth $devui-animation-duration-slow; + } + + &:hover { + path { + fill: $devui-shape-icon-fill-hover; + } + } + } + &--gray-style:not(.#{$devui-prefix}-input--disabled) { .#{$devui-prefix}-input__wrapper:not(.#{$devui-prefix}-input--error) { background: $devui-gray-5; diff --git a/packages/devui-vue/devui/input/src/input.tsx b/packages/devui-vue/devui/input/src/input.tsx index 8dd904f96b..dca1ad337b 100644 --- a/packages/devui-vue/devui/input/src/input.tsx +++ b/packages/devui-vue/devui/input/src/input.tsx @@ -5,6 +5,7 @@ import { AutoFocus } from '../../auto-focus'; import { inputProps, InputProps } from './input-types'; import { FORM_ITEM_TOKEN, FormItemContext } from '../../form/src/components/form-item/form-item-types'; import { useNamespace } from '@devui/shared/utils'; +import { InputClearIcon } from '../../svg-icons'; import { useInputRender } from './composables/use-input-render'; import { useInputEvent } from './composables/use-input-event'; import { useInputFunction } from './composables/use-input-function'; @@ -101,9 +102,7 @@ export default defineComponent({ onClick={clickPasswordIcon} /> )} - {showClearable.value && ( - - )} + {showClearable.value && } )} diff --git a/packages/devui-vue/devui/modal/src/components/modal-icons.tsx b/packages/devui-vue/devui/modal/src/components/modal-icons.tsx new file mode 100644 index 0000000000..0718310ba2 --- /dev/null +++ b/packages/devui-vue/devui/modal/src/components/modal-icons.tsx @@ -0,0 +1,19 @@ +export function CloseIcon(): JSX.Element { + return ( + + + + + + ); +} diff --git a/packages/devui-vue/devui/modal/src/modal.scss b/packages/devui-vue/devui/modal/src/modal.scss index 50644ac573..b766fa4269 100644 --- a/packages/devui-vue/devui/modal/src/modal.scss +++ b/packages/devui-vue/devui/modal/src/modal.scss @@ -5,7 +5,7 @@ top: 50%; left: 50%; width: 300px; - border-radius: $devui-border-radius; + border-radius: $devui-border-radius-card; border: none; opacity: 1; transform: translate(-50%, -50%); @@ -17,26 +17,14 @@ .btn-close { position: absolute; - right: 16px; - top: 20px; - width: 20px; - height: 20px; - line-height: 20px; - text-align: center; - cursor: pointer; - background: transparent; - border: 0; + right: 20px; + top: 18px; -webkit-appearance: none; + z-index: calc(var(--devui-z-index-modal, 1050) + 1); - &:hover { - color: $devui-icon-fill-active-hover; - background-color: $devui-list-item-hover-bg; - } - - & i { - position: absolute; - right: 0; - top: 0; + .#{$devui-prefix}-icon__container { + display: inline-flex; + align-items: center; } } @@ -70,12 +58,17 @@ .#{$devui-prefix}-modal__header { width: 100%; - height: 56px; + height: 46px; + line-height: 26px; padding: 20px 20px 0; - font-size: $devui-font-size-card-title; + font-size: $devui-font-size-modal-title; font-weight: bold; + letter-spacing: 0; box-sizing: border-box; - border: none; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + user-select: none; .header-alert-icon { display: inline-block; @@ -100,7 +93,7 @@ padding: 0 32px 24px; box-sizing: border-box; - & > * { + &>* { margin: 0 4px; } } @@ -119,4 +112,4 @@ opacity: 0.2; top: calc(50% - 24px); } -} +} \ No newline at end of file diff --git a/packages/devui-vue/devui/modal/src/modal.tsx b/packages/devui-vue/devui/modal/src/modal.tsx index f389a2f354..43206248a5 100644 --- a/packages/devui-vue/devui/modal/src/modal.tsx +++ b/packages/devui-vue/devui/modal/src/modal.tsx @@ -6,6 +6,7 @@ import { useModal, useModalRender } from './composables/use-modal'; import { useDraggable } from './composables/use-draggable'; import DModalHeader from './components/header'; import DModalBody from './components/body'; +import { CloseIcon } from './components/modal-icons'; import { useNamespace } from '../../shared/hooks/use-namespace'; import './modal.scss'; @@ -107,7 +108,7 @@ export default defineComponent({ style={{ transform: modalPosition.value }}> {showClose.value && (
- +
)} {props.type ? ( diff --git a/packages/devui-vue/devui/pagination/src/components/page-size.tsx b/packages/devui-vue/devui/pagination/src/components/page-size.tsx index 09ccf49960..9ae07a3b96 100644 --- a/packages/devui-vue/devui/pagination/src/components/page-size.tsx +++ b/packages/devui-vue/devui/pagination/src/components/page-size.tsx @@ -1,5 +1,5 @@ -import { defineComponent, inject, withModifiers, ref } from 'vue'; -import { Icon } from '@devui/shared/components/icon'; +import { defineComponent, inject, computed, ref } from 'vue'; +import { SelectArrowIcon } from '../../../svg-icons'; import { Dropdown } from '../../../dropdown'; import { useNamespace } from '@devui/shared/utils'; import { paginationInjectionKey, IPagination } from '../pagination-types'; @@ -8,10 +8,15 @@ export default defineComponent({ setup() { const ns = useNamespace('pagination'); const paginationContext = inject(paginationInjectionKey) as IPagination; - const iconRotate = ref(0); + const isOpen = ref(false); const { size, currentPageSize, pageSizeOptions, pageSizeDirection, pageSizeChange, t } = paginationContext; + const pageSizeClasses = computed(() => ({ + [ns.e('size')]: true, + [ns.em('size', size.value)]: Boolean(size.value), + [ns.em('size', 'open')]: isOpen.value, + })); const onDropdownToggle = (e: boolean) => { - iconRotate.value = e ? 180 : 0; + isOpen.value = e; }; return () => ( @@ -19,10 +24,9 @@ export default defineComponent({ {{ default: () => ( -
- - {{ prefix: () => {currentPageSize.value} }} - +
+ {currentPageSize.value} +
), menu: () => ( diff --git a/packages/devui-vue/devui/pagination/src/pagination.scss b/packages/devui-vue/devui/pagination/src/pagination.scss index aead5d84ef..3f57b68172 100644 --- a/packages/devui-vue/devui/pagination/src/pagination.scss +++ b/packages/devui-vue/devui/pagination/src/pagination.scss @@ -26,6 +26,18 @@ box-sizing: border-box; cursor: pointer; + span { + margin-right: 8px; + } + + svg { + transition: transform $devui-animation-ease-in-out-smooth $devui-animation-duration-slow; + + path { + fill: $devui-text; + } + } + &:hover { border-color: $devui-form-control-line-hover; } @@ -42,6 +54,12 @@ height: 46px; } + &.#{$devui-prefix}-pagination__size--open { + svg { + transform: rotate(180deg); + } + } + & > .#{$devui-prefix}-icon__container { display: flex; align-items: center; @@ -389,8 +407,7 @@ text-overflow: ellipsis; white-space: nowrap; cursor: pointer; - transition: - color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth, + transition: color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth, background-color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth; &:hover:not(.active) { diff --git a/packages/devui-vue/devui/search/src/components/search-close-icon.tsx b/packages/devui-vue/devui/search/src/components/search-close-icon.tsx deleted file mode 100644 index deca24bd6e..0000000000 --- a/packages/devui-vue/devui/search/src/components/search-close-icon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -const SearchCloseIcon = (): JSX.Element => ( - - - -); -export default SearchCloseIcon; diff --git a/packages/devui-vue/devui/search/src/components/search-icon.tsx b/packages/devui-vue/devui/search/src/components/search-icon.tsx deleted file mode 100644 index 4d8e5de139..0000000000 --- a/packages/devui-vue/devui/search/src/components/search-icon.tsx +++ /dev/null @@ -1,9 +0,0 @@ -const SearchIcon = (): JSX.Element => ( - - - -); -export default SearchIcon; diff --git a/packages/devui-vue/devui/search/src/search.scss b/packages/devui-vue/devui/search/src/search.scss index ef7a46d40e..7467f35a89 100644 --- a/packages/devui-vue/devui/search/src/search.scss +++ b/packages/devui-vue/devui/search/src/search.scss @@ -51,16 +51,32 @@ & svg { path { - fill: $devui-icon-fill; + fill: $devui-icon-text; } - @include size($devui-font-size-md, $devui-font-size-md); } } &__clear { position: absolute; - right: $devui-size-md; + right: 36px; cursor: pointer; + height: 100%; + font-size: 10px; + @include size(30px, 100%); + @include flex; + + & > svg { + path { + fill: $devui-shape-icon-fill; + transition: all $devui-animation-ease-in-out-smooth $devui-animation-duration-slow; + } + + &:hover { + path { + fill: $devui-shape-icon-fill-hover; + } + } + } &::after { content: ''; @@ -89,15 +105,28 @@ font-size: $devui-font-size-sm; &.#{$devui-prefix}-input--sm { - padding: 0 48px 0 6px; + font-size: $devui-font-size; + padding-right: 60px; } } - .#{$devui-prefix}-search__icon, .#{$devui-prefix}-search__clear { - @include size($devui-size-sm, $devui-size-sm); + .#{$devui-prefix}-search__icon { + @include size(34px, 26px); svg { - @include size($devui-font-size-sm, $devui-font-size-sm); + width: 14px; + height: 14px; + } + } + + .#{$devui-prefix}-search__clear { + @include size(26px, 100%); + + right: 34px; + + & > svg { + width: 14px; + height: 14px; } } @@ -116,11 +145,13 @@ } } - .#{$devui-prefix}-search__icon, .#{$devui-prefix}-search__clear { + .#{$devui-prefix}-search__icon, + .#{$devui-prefix}-search__clear { @include size($devui-size-lg, $devui-size-lg); svg { - @include size($devui-font-size-lg, $devui-font-size-lg); + width: 18px; + height: 18px; } } diff --git a/packages/devui-vue/devui/search/src/search.tsx b/packages/devui-vue/devui/search/src/search.tsx index af73ad9f4f..3b6570ae86 100644 --- a/packages/devui-vue/devui/search/src/search.tsx +++ b/packages/devui-vue/devui/search/src/search.tsx @@ -7,8 +7,7 @@ import DInput from '../../input/src/input'; import { useNamespace } from '../../shared/hooks/use-namespace'; import './search.scss'; import { createI18nTranslate } from '../../locale/create'; -import SearchCloseIcon from './components/search-close-icon'; -import SearchIcon from './components/search-icon'; +import { SearchIcon, InputClearIcon } from '../../svg-icons'; export default defineComponent({ name: 'DSearch', @@ -20,7 +19,7 @@ export default defineComponent({ const ns = useNamespace('search'); const isFocus = ref(false); - const {rootClass, searchSize} = useSearchClass(props, isFocus); + const { rootClass, searchSize } = useSearchClass(props, isFocus); const { keywords, clearIconShow, onClearHandle } = keywordsHandles(ctx, props); const { onInputKeydown, onClickHandle, useEmitKeyword } = keydownHandles(ctx, keywords, props); @@ -63,7 +62,7 @@ export default defineComponent({ {clearIconShow.value && (
- +
)} {props.iconPosition === 'right' && ( diff --git a/packages/devui-vue/devui/select/src/components/select-arrow-icon.tsx b/packages/devui-vue/devui/select/src/components/select-arrow-icon.tsx deleted file mode 100644 index 280be2bd1e..0000000000 --- a/packages/devui-vue/devui/select/src/components/select-arrow-icon.tsx +++ /dev/null @@ -1,13 +0,0 @@ -const SelectArrowIcon = (): JSX.Element => ( - - - - - -); -export default SelectArrowIcon; diff --git a/packages/devui-vue/devui/select/src/components/select-content.tsx b/packages/devui-vue/devui/select/src/components/select-content.tsx index d3c90b5b40..2e05aab24e 100644 --- a/packages/devui-vue/devui/select/src/components/select-content.tsx +++ b/packages/devui-vue/devui/select/src/components/select-content.tsx @@ -1,6 +1,5 @@ import { defineComponent, inject, computed, withModifiers } from 'vue'; -import AlertCloseIcon from '../../../alert/src/components/alert-close-icon'; -import SelectArrowIcon from './select-arrow-icon'; +import { SelectArrowIcon, InputClearIcon } from '../../../svg-icons'; import { Tag, SizeType } from '../../../tag'; import { Popover } from '../../../popover'; import { useNamespace } from '../../../shared/hooks/use-namespace'; @@ -121,7 +120,7 @@ export default defineComponent({ /> )} - + diff --git a/packages/devui-vue/devui/select/src/select.scss b/packages/devui-vue/devui/select/src/select.scss index 72393681e1..cc9ddb81c5 100644 --- a/packages/devui-vue/devui/select/src/select.scss +++ b/packages/devui-vue/devui/select/src/select.scss @@ -227,8 +227,17 @@ $select-item-min-height: 36px; .#{$devui-prefix}-select__clear { display: none; - svg path { - fill: $devui-text-weak; + svg { + path { + fill: $devui-shape-icon-fill; + transition: all $devui-animation-ease-in-out-smooth $devui-animation-duration-slow; + } + + &:hover { + path { + fill: $devui-shape-icon-fill-hover; + } + } } } diff --git a/packages/devui-vue/devui/svg-icons/index.tsx b/packages/devui-vue/devui/svg-icons/index.tsx new file mode 100644 index 0000000000..33657bdf88 --- /dev/null +++ b/packages/devui-vue/devui/svg-icons/index.tsx @@ -0,0 +1,56 @@ +export function SelectArrowIcon(): JSX.Element { + return ( + + + + + + ); +} + +export function SearchIcon(): JSX.Element { + return ( + + + + + + ); +} + +export function InputClearIcon(): JSX.Element { + return ( + + + + + + ); +} diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json index 582e89fd70..c2aa3ab74c 100644 --- a/packages/devui-vue/package.json +++ b/packages/devui-vue/package.json @@ -1,6 +1,6 @@ { "name": "vue-devui", - "version": "1.6.4", + "version": "1.6.4-alpha.0", "license": "MIT", "description": "DevUI components based on Vite and Vue3", "keywords": [