Merge branch dev into main

DevCloudFE · Apr 13, 2024 · f154140 · f154140
2 parents 8afdb42 + fccccc2
commit f154140
Show file tree

Hide file tree

Showing 11 changed files with 170 additions and 105 deletions.
diff --git a/packages/devui-vue/devui/category-search/src/category-search.tsx b/packages/devui-vue/devui/category-search/src/category-search.tsx
@@ -12,51 +12,53 @@ import { useCategorySearch } from './composables/use-category-search';
 import './category-search.scss';
 
 export default defineComponent({
-	name: 'DCategorySearch',
-	props: categorySearchProps,
-	emits: ['search', 'selectedTagsChange', 'createFilter', 'clearAll', 'searchKeyChange'],
-	setup(props: CategorySearchProps, ctx: SetupContext) {
-		const {
-			rootRef,
-			scrollBarRef,
-			inputRef,
-			isHover,
-			containerClasses,
-			innerSelectedTags,
-			joinLabelTypes,
-			showExtendedConfig,
-			operationConfig,
-			onSearch,
-		} = useCategorySearch(props, ctx);
+  name: 'DCategorySearch',
+  props: categorySearchProps,
+  emits: ['search', 'selectedTagsChange', 'createFilter', 'clearAll', 'searchKeyChange'],
+  setup(props: CategorySearchProps, ctx: SetupContext) {
+    const {
+      rootRef,
+      scrollBarRef,
+      inputRef,
+      isHover,
+      containerClasses,
+      innerSelectedTags,
+      joinLabelTypes,
+      showExtendedConfig,
+      operationConfig,
+      onSearch,
+    } = useCategorySearch(props, ctx);
 
-		return () => (
-			<div
-				ref={rootRef}
-				class={containerClasses.value}
-				onMouseenter={() => (isHover.value = true)}
-				onMouseleave={() => (isHover.value = false)}>
-				<div class="dp-category-search-icon" onClick={onSearch}>
-					<SearchIcon />
-				</div>
-				<div ref={scrollBarRef} class="dp-category-search-line-container">
-					<ul class="dp-category-search-line">
-						{innerSelectedTags.value.map((item) => (
-							<CategorySearchTagDropdown item={item} isJoinLabelType={joinLabelTypes.includes(item.type || '')} />
-						))}
-						<CategorySearchInput ref={inputRef} />
-					</ul>
-				</div>
-				{showExtendedConfig.value && (
-					<div class="dp-category-search-extended-container">
-						{operationConfig.clear?.show && (
-							<>{ctx.slots.clear?.() ?? <CategorySearchClear disabled={operationConfig.clear?.disabled} />}</>
-						)}
-						{operationConfig.save?.show && <>{ctx.slots.save?.() ?? <CategorySearchSave disabled={operationConfig.save?.disabled} />}</>}
-						{operationConfig.more?.show && <>{ctx.slots.more?.() ?? <CategorySearchMore disabled={operationConfig.more?.disabled} />}</>}
-						{ctx.slots.operation?.()}
-					</div>
-				)}
-			</div>
-		);
-	},
+    return () => (
+      <div
+        ref={rootRef}
+        class={containerClasses.value}
+        onMouseenter={() => (isHover.value = true)}
+        onMouseleave={() => (isHover.value = false)}>
+        {ctx.slots.searchIcon?.() ?? (
+          <div class="dp-category-search-icon" onClick={onSearch}>
+            <SearchIcon />
+          </div>
+        )}
+        <div ref={scrollBarRef} class="dp-category-search-line-container">
+          <ul class="dp-category-search-line">
+            {innerSelectedTags.value.map((item) => (
+              <CategorySearchTagDropdown item={item} isJoinLabelType={joinLabelTypes.includes(item.type || '')} />
+            ))}
+            <CategorySearchInput ref={inputRef} />
+          </ul>
+        </div>
+        {showExtendedConfig.value && (
+          <div class="dp-category-search-extended-container">
+            {operationConfig.clear?.show && (
+              <>{ctx.slots.clear?.() ?? <CategorySearchClear disabled={operationConfig.clear?.disabled} />}</>
+            )}
+            {operationConfig.save?.show && <>{ctx.slots.save?.() ?? <CategorySearchSave disabled={operationConfig.save?.disabled} />}</>}
+            {operationConfig.more?.show && <>{ctx.slots.more?.() ?? <CategorySearchMore disabled={operationConfig.more?.disabled} />}</>}
+            {ctx.slots.operation?.()}
+          </div>
+        )}
+      </div>
+    );
+  },
 });
diff --git a/packages/devui-vue/devui/checkbox/src/checkbox-types.ts b/packages/devui-vue/devui/checkbox/src/checkbox-types.ts
@@ -37,7 +37,6 @@ const commonProps = {
   },
   size: {
     type: String as PropType<Size>,
-    default: 'md',
   },
   showGlowStyle: {
     type: Boolean,

diff --git a/packages/devui-vue/devui/checkbox/src/use-checkbox.ts b/packages/devui-vue/devui/checkbox/src/use-checkbox.ts
@@ -143,7 +143,7 @@ export function useCheckboxGroup(props: CheckboxGroupProps, ctx: SetupContext):
   );
 
   // 组件 size 优先于表单 size
-  const checkboxGroupSize = computed(() => props.size || formContext?.size || '');
+  const checkboxGroupSize = computed(() => props.size || formContext?.size || 'md');
 
   provide(checkboxGroupInjectionKey, {
     disabled: toRef(props, 'disabled'),

diff --git a/packages/devui-vue/devui/date-picker-pro/src/components/range-date-picker-pro.tsx b/packages/devui-vue/devui/date-picker-pro/src/components/range-date-picker-pro.tsx
@@ -19,7 +19,7 @@ export default defineComponent({
   setup(props: RangeDatePickerProProps, ctx: SetupContext) {
     const app = getCurrentInstance();
     const t = createI18nTranslate('DDatePickerPro', app);
-    const { showGlowStyle } = toRefs(props);
+    const { showGlowStyle, position } = toRefs(props);
 
     const ns = useNamespace('range-date-picker-pro');
     const {
@@ -44,7 +44,6 @@ export default defineComponent({
       handlerClearTime,
       onChangeRangeFocusType,
     } = useRangePickerPro(props, ctx);
-    const position = ref(['bottom-start', 'top-start']);
     const currentPosition = ref('bottom');
     const handlePositionChange = (pos: string) => {
       currentPosition.value = pos.split('-')[0] === 'top' ? 'top' : 'bottom';
@@ -53,6 +52,15 @@ export default defineComponent({
       transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%',
       'z-index': 'var(--devui-z-index-dropdown, 1052)',
     }));
+    const align = computed(() => {
+      if (position.value.some((item: string) => item.includes('start'))) {
+        return 'start';
+      }
+      if (position.value.some((item: string) => item.includes('end'))) {
+        return 'end';
+      }
+      return undefined;
+    });
 
     return () => {
       const vSlots = {
@@ -141,7 +149,7 @@ export default defineComponent({
                 v-model={isPanelShow.value}
                 ref={overlayRef}
                 origin={originRef.value}
-                align="start"
+                align={align.value}
                 position={position.value}
                 style={styles.value}
                 onPositionChange={handlePositionChange}>

diff --git a/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro-types.ts b/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro-types.ts
@@ -3,6 +3,20 @@ import type { Dayjs } from 'dayjs';
 import { ArrType } from '../../time-picker/src/types';
 import type { InputSize } from '../../input/src/input-types';
 
+export type Placement =
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'left'
+  | 'top-start'
+  | 'top-end'
+  | 'right-start'
+  | 'right-end'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left-start'
+  | 'left-end';
+
 export const datePickerProCommonProps = {
   format: {
     type: String,
@@ -34,6 +48,10 @@ export const datePickerProCommonProps = {
     type: Boolean,
     default: true,
   },
+  position: {
+    type: Array as PropType<Placement[]>,
+    default: () => ['bottom-start', 'top-start'],
+  },
 };
 
 export const datePickerProProps = {

diff --git a/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.tsx b/packages/devui-vue/devui/date-picker-pro/src/date-picker-pro.tsx
@@ -3,7 +3,7 @@ import type { SetupContext } from 'vue';
 import { datePickerProProps, DatePickerProProps } from './date-picker-pro-types';
 import usePickerPro from './use-picker-pro';
 import { Input } from '../../input';
-import { FlexibleOverlay, Placement } from '../../overlay';
+import { FlexibleOverlay } from '../../overlay';
 import DatePickerProPanel from './components/date-picker-panel';
 import { IconCalendar } from './components/icon-calendar';
 import { IconClose } from './components/icon-close';
@@ -18,7 +18,7 @@ export default defineComponent({
   setup(props: DatePickerProProps, ctx: SetupContext) {
     const app = getCurrentInstance();
     const t = createI18nTranslate('DDatePickerPro', app);
-    const { showGlowStyle } = toRefs(props);
+    const { showGlowStyle, position } = toRefs(props);
 
     const ns = useNamespace('date-picker-pro');
     const {
@@ -39,7 +39,6 @@ export default defineComponent({
       onSelectedDate,
       handlerClearTime,
     } = usePickerPro(props, ctx, t);
-    const position = ref<Placement[]>(['bottom-start', 'top-start']);
     const currentPosition = ref('bottom');
     const handlePositionChange = (pos: string) => {
       currentPosition.value = pos.split('-')[0] === 'top' ? 'top' : 'bottom';
@@ -48,6 +47,15 @@ export default defineComponent({
       transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%',
       'z-index': 'var(--devui-z-index-dropdown, 1052)',
     }));
+    const align = computed(() => {
+      if (position.value.some((item: string) => item.includes('start'))) {
+        return 'start';
+      }
+      if (position.value.some((item: string) => item.includes('end'))) {
+        return 'end';
+      }
+      return undefined;
+    });
 
     return () => {
       const vSlots = {
@@ -90,7 +98,7 @@ export default defineComponent({
                 v-model={isPanelShow.value}
                 ref={overlayRef}
                 origin={originRef.value}
-                align="start"
+                align={align.value}
                 position={position.value}
                 style={styles.value}
                 onPositionChange={handlePositionChange}>

diff --git a/packages/devui-vue/devui/menu/src/components/sub-menu/sub-menu.tsx b/packages/devui-vue/devui/menu/src/components/sub-menu/sub-menu.tsx
@@ -1,21 +1,14 @@
 import { randomId } from '../../../../shared/utils/random-id';
 import type { ComponentInternalInstance, Ref } from 'vue';
-import {
-  defineComponent,
-  getCurrentInstance,
-  inject,
-  onMounted,
-  ref,
-  watch,
-  watchEffect
-} from 'vue';
+import { defineComponent, getCurrentInstance, inject, onMounted, ref, watch, watchEffect } from 'vue';
 import { useNamespace } from '../../../../shared/hooks/use-namespace';
 import { useClick } from '../../composables/use-click';
 import { addLayer, clearSelect, getLayer, pushElement } from '../../composables/use-layer-operate';
 import { useNearestMenuElement } from '../../composables/use-nearest-menu-element';
 import MenuTransition from '../menu-transition/menu-transition';
 import { SubMenuProps, subMenuProps } from './sub-menu-types';
 import { useShowSubMenu } from './use-sub-menu';
+import { SelectArrowIcon } from '../../../../svg-icons';
 
 const ns = useNamespace('menu');
 const subNs = useNamespace('submenu');
@@ -31,7 +24,7 @@ export default defineComponent({
   setup(props: SubMenuProps, ctx) {
     const isShow = ref(true);
     const {
-      vnode: { key }
+      vnode: { key },
     } = getCurrentInstance() as ComponentInternalInstance;
     let key_ = String(key);
     const defaultOpenKeys = inject('openKeys') as Ref<string[]>;
@@ -63,7 +56,7 @@ export default defineComponent({
         if (idx >= 0 && cur.tagName === 'UL') {
           defaultOpenKeys.value.splice(idx, 1);
         } else {
-          if (cur.tagName === 'UL'){
+          if (cur.tagName === 'UL') {
             defaultOpenKeys.value.push(key_);
           }
         }
@@ -72,7 +65,7 @@ export default defineComponent({
           type: 'submenu-change',
           state: isOpen.value,
           key: key_,
-          el: ele
+          el: ele,
         });
       }
     };
@@ -93,12 +86,13 @@ export default defineComponent({
     watch(
       () => defaultOpenKeys,
       (n) => {
-        if (n.value.includes(key_)){
+        if (n.value.includes(key_)) {
           isOpen.value = true;
         } else {
           isOpen.value = false;
         }
-      },{deep: true}
+      },
+      { deep: true }
     );
     onMounted(() => {
       const subMenuTitle = title.value as unknown as HTMLElement;
@@ -142,18 +136,19 @@ export default defineComponent({
           onClick={clickHandle}
           class={[subMenuClass, class_layer.value, props['disabled'] && `${subMenuClass}-disabled`]}
           ref={subMenu}>
-          <div
-            class={[`${subMenuClass}-title`]}
-            style={`padding: 0 ${indent}px`}
-            ref={title}>
+          <div class={[`${subMenuClass}-title`]} style={`padding: 0 ${indent}px`} ref={title}>
             <span class={`${ns.b()}-icon`}>{ctx.slots?.icon?.()}</span>
             <span v-show={!isCollapsed.value} class={`${subMenuClass}-title-content`}>
               {props.title}
             </span>
+            <SelectArrowIcon
+              v-show={!isCollapsed.value && key !== 'overflowContainer' && class_layer.value !== `layer_${subMenuClass}`}
+              class={[ns.e('arrow-icon'), { 'is-opened': isOpen.value }]}
+            />
             <i
               v-show={!isCollapsed.value && key !== 'overflowContainer'}
               class={{
-                'icon icon-chevron-up': class_layer.value !== `layer_${subMenuClass}`,
+                'icon icon-chevron-up': false,
                 'icon icon-chevron-right': class_layer.value === `layer_${subMenuClass}`,
                 'is-opened': isOpen.value,
               }}></i>
@@ -162,8 +157,7 @@ export default defineComponent({
             <div
               class={`${ns.b()}-item-horizontal-wrapper ${ns.b()}-item-horizontal-wrapper-hidden`}
               ref={wrapper}
-              v-show={!props.disabled}
-            >
+              v-show={!props.disabled}>
               {ctx.slots.default?.()}
             </div>
           ) : (

diff --git a/packages/devui-vue/devui/menu/src/styles/vertical.scss b/packages/devui-vue/devui/menu/src/styles/vertical.scss
@@ -6,8 +6,7 @@
 }
 .#{$devui-prefix}-menu-vertical {
   padding: 0;
-  transition:
-    width $devui-animation-duration-slow $devui-animation-ease-in-smooth,
+  transition: width $devui-animation-duration-slow $devui-animation-ease-in-smooth,
     padding $devui-animation-duration-slow $devui-animation-ease-in-smooth;
   border-right: $devui-line 1px solid;
 
@@ -48,6 +47,7 @@
 
   .#{$devui-prefix}-menu-item-vertical-wrapper {
     padding-left: 0 !important;
+    margin: 4px 0 !important;
   }
 
   .#{$devui-prefix}-menu-item {
@@ -108,7 +108,6 @@
       cursor: pointer;
       width: 100%;
       height: 40px;
-      margin: 4px 0;
       line-height: 40px;
       padding-left: 18px;
       align-items: center;
@@ -227,4 +226,18 @@
   .#{$devui-prefix}-submenu-disabled::after {
     content: unset;
   }
+
+  .#{$devui-prefix}-menu__arrow-icon {
+    width: 16px;
+    height: 16px;
+    transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
+
+    path {
+      fill: $devui-text-weak;
+    }
+
+    &.is-opened {
+      transform: rotate(180deg);
+    }
+  }
 }
diff --git a/packages/devui-vue/docs/components/category-search/index.md b/packages/devui-vue/docs/components/category-search/index.md
@@ -391,6 +391,7 @@ export default defineComponent({
 | save         | 自定义保存图标                                                                                                      |                                                            |                                   |
 | more         | 自定义更多图标                                                                                                      |                                                            |                                   |
 | operation    | 自定义除`clear`、`save`、`more`外的其他图标                                                                         |                                                            | [自定义扩展按钮](#自定义扩展按钮) |
+| searchIcon   | 自定义搜索图标                                                                                                      |                                                            |                                   |
 
 ### CategorySearch 方法