Merge branch dev

DevCloudFE · Mar 26, 2024 · 9aef1e6 · 9aef1e6
2 parents 4b26e50 + ec1da27
commit 9aef1e6
Show file tree

Hide file tree

Showing 22 changed files with 277 additions and 105 deletions.
diff --git 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 ? (
             <div class={ns.e('arrow')}>
               <button class="arrow-left" onClick={() => prev()}>
-                <Icon name="arrow-left" />
+                <CarouselArrowLeft />
               </button>
               <button class="arrow-right" onClick={() => next()}>
-                <Icon name="arrow-right" />
+                <CarouselArrowRight />
               </button>
             </div>
           ) : 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
@@ -0,0 +1,26 @@
+export function CarouselArrowLeft(): JSX.Element {
+  return (
+    <svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon
+          fill="#293040"
+          fill-rule="nonzero"
+          points="10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"></polygon>
+      </g>
+    </svg>
+  );
+}
+
+export function CarouselArrowRight(): JSX.Element {
+  return (
+    <svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon
+          fill="#293040"
+          fill-rule="nonzero"
+          transform="translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) "
+          points="11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"></polygon>
+      </g>
+    </svg>
+  );
+}
diff --git 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
@@ -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 && (
                 <div class={`${ns.e('icon')} ${ns.m('drop-icon-animation')}`}>
-                  <d-icon name="select-arrow" size="12px"></d-icon>
+                  <SelectArrowIcon />
                 </div>
               )}
               {showClearable.value && props.clearable && (
                 <div class={`${ns.e('icon')} ${ns.e('close')}`} onClick={clearData}>
-                  <d-icon name="close" size="12px"></d-icon>
+                  <div class="close-icon-container">
+                    <InputClearIcon />
+                  </div>
                 </div>
               )}
             </div>
@@ -103,15 +106,17 @@ export default defineComponent({
                 )}
                 {props.filterable && isSearching.value && (
                   <div class={ns.e('panel')}>
-                    {suggestionsList.value.length === 0
-                      ? <label style="font-weight: bold;">没有数据</label>
-                      : suggestionsList.value.map((item) => {
+                    {suggestionsList.value.length === 0 ? (
+                      <label style="font-weight: bold;">没有数据</label>
+                    ) : (
+                      suggestionsList.value.map((item) => {
                         return (
                           <div class={ns.e('suggest-list')} onClick={() => chooseSuggestion(cloneDeep(item))}>
                             {item.labelsString}
                           </div>
                         );
-                      })}
+                      })
+                    )}
                   </div>
                 )}
               </div>

diff --git 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}
             <span class={ns.e('open-icon')}>
-              <OpenIcon />
+              <SelectArrowIcon />
             </span>
           </div>
           <Transition name={transitionNs.b()} onEnter={enter} onLeave={leave}>

diff --git 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
@@ -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
@@ -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 && (
-                <Icon size={inputSize.value} class={ns.em('clear', 'icon')} name="error-o" color="#adb0b8" onClick={onClear} />
-              )}
+              {showClearable.value && <InputClearIcon class={ns.em('clear', 'icon')} onClick={onClear} />}
             </span>
           )}
         </div>

diff --git a/packages/devui-vue/devui/modal/src/components/modal-icons.tsx b/packages/devui-vue/devui/modal/src/components/modal-icons.tsx
@@ -0,0 +1,19 @@
+export function CloseIcon(): JSX.Element {
+	return (
+		<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+			<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+				<path
+					d={`M14.6887175,1.25368865 C15.0770801,1.64205125 15.0121881,2.34244569 14.544513,2.81012074 L9.383,7.971 L14.544513,13.1322854 
+					C14.9787827,13.5665551 15.0657548,14.2014859 14.7650189,14.6009195 L14.6887175,14.6887175 C14.3003549,15.0770801 
+					13.5999604,15.0121881 13.1322854,14.544513 L13.1322854,14.544513 L7.971,9.383 L2.81012075,14.544513 C2.3424457,15.0121881 
+					1.64205125,15.0770801 1.25368865,14.6887175 C0.865326051,14.3003549 0.930218063,13.5999605 1.39789313,13.1322854 L6.558,7.971 
+					L1.39789311,2.81012074 C0.963623424,2.37585105 0.876651354,1.74092026 1.17738727,1.34148668 L1.25368865,1.25368865 
+					C1.64205125,0.865326051 2.34244569,0.930218063 2.81012074,1.39789311 L2.81012074,1.39789311 L7.971,6.558 L13.1322854,1.39789311 
+					C13.5999605,0.930218063 14.3003549,0.865326051 14.6887175,1.25368865 Z`}
+					fill="#8A8E99"
+					fill-rule="nonzero"
+				></path>
+			</g>
+		</svg>
+	);
+}
diff --git 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);
   }
-}
+}
diff --git 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 && (
                 <div onClick={execClose} class="btn-close">
-                  <Icon name="close" size="20px"></Icon>
+                  <Icon operable component={CloseIcon()}></Icon>
                 </div>
               )}
               {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
@@ -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,21 +8,25 @@ 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 () => (
       <>
         <Dropdown position={pageSizeDirection.value} class={ns.e('size-list')} onToggle={onDropdownToggle}>
           {{
             default: () => (
-              <div tabindex="0" class={[ns.e('size'), size.value ? ns.em('size', size.value) : '']}>
-                <Icon name="select-arrow" size="16px" rotate={iconRotate.value}>
-                  {{ prefix: () => <span>{currentPageSize.value}</span> }}
-                </Icon>
+              <div tabindex="0" class={pageSizeClasses.value}>
+                <span>{currentPageSize.value}</span>
+                <SelectArrowIcon />
               </div>
             ),
             menu: () => (