From 47b7c2cb00d547588fb78888c59733186c9aa2bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A1=8C=E8=A8=80?= <2311595895@qq.com>
Date: Thu, 18 Apr 2024 21:04:09 +0800
Subject: [PATCH] =?UTF-8?q?feat(Dropdown):=20=E6=94=AF=E6=8C=81=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E6=8C=82=E8=BD=BD=E8=8A=82=E7=82=B9=20(#1834)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../category-search/src/category-search.scss  | 746 +++++++++---------
 .../devui/dropdown/src/dropdown-types.ts      |   6 +-
 .../devui-vue/devui/dropdown/src/dropdown.tsx |   4 +-
 .../docs/components/dropdown/index.md         |   1 +
 packages/devui-vue/package.json               |   2 +-
 5 files changed, 386 insertions(+), 373 deletions(-)

diff --git a/packages/devui-vue/devui/category-search/src/category-search.scss b/packages/devui-vue/devui/category-search/src/category-search.scss
index c5e9c16daf..a006b86e1b 100644
--- a/packages/devui-vue/devui/category-search/src/category-search.scss
+++ b/packages/devui-vue/devui/category-search/src/category-search.scss
@@ -1,417 +1,425 @@
 @import '@devui/theme/styles-var/devui-var.scss';
 
 @mixin tag-item() {
-	.#{$devui-prefix}-tag>.#{$devui-prefix}-tag__item {
-		display: block !important;
-
-		.dp-category-search-multi-tag>span,
-		&>span {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			display: inline-block;
-			vertical-align: middle;
-			margin: 0 4px;
-		}
-	}
+  .#{$devui-prefix}-tag > .#{$devui-prefix}-tag__item {
+    display: block !important;
+
+    .dp-category-search-multi-tag > span,
+    & > span {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: inline-block;
+      vertical-align: middle;
+      margin: 0 4px;
+    }
+  }
 }
 
 .dp-category-search-container {
-	position: relative;
-	border-radius: $devui-border-radius;
-	width: 100%;
-	height: 32px;
-	padding: 0 8px;
-	display: flex;
-	align-items: center;
-	background: transparent;
-	transition: border $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
-	background-color: $devui-base-bg;
-	border: 1px solid $devui-line;
-
-	ul,
-	li {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-	}
-
-	&.container-hover {
-		&>.dp-category-search-icon svg p path {
-			fill: $devui-icon-fill-hover;
-		}
-	}
-
-	&.dp-gray-style {
-		background-color: $devui-gray-form-control-bg;
-		border-color: transparent;
-		transition: all $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
-
-		&:hover {
-			background-color: $devui-gray-form-control-hover-bg;
-		}
-
-		&:focus-within {
-			background-color: $devui-base-bg;
-			border-color: $devui-brand;
-		}
-
-		.dp-category-search-input input.dp-category-search-toggle {
-			background-color: transparent !important;
-		}
-	}
-
-	.dp-category-search-toggle {
-		color: $devui-text;
-	}
-
-	.dp-category-search-line-container {
-		width: 100%;
-		height: 32px;
-		overflow: hidden;
-
-		&:hover {
-			overflow-x: auto;
-			overflow-y: overlay;
-		}
-
-		.dp-category-search-line {
-			display: flex;
-			flex-flow: row nowrap;
-			justify-content: flex-start;
-			align-items: flex-start;
-			width: 100%;
-			height: 30px;
-			position: relative;
-
-			&>li {
-				display: flex;
-				align-items: center;
-				flex-grow: 0;
-				white-space: nowrap;
-				height: 100%;
-			}
-
-			.dp-category-search-input {
-				display: flex;
-				justify-content: flex-start;
-				flex-grow: 1;
-				align-items: center;
-				min-width: 160px;
-				padding-right: 20px;
-
-				input {
-					min-width: 240px;
-					width: 100%;
-					height: 32px;
-					font-size: $devui-font-size-sm;
-				}
-
-				.dp-category-search-toggle {
-					padding-left: 0;
-				}
-
-				.dp-category-search-keyword-in-category {
-					overflow: visible;
-				}
-			}
-		}
-	}
-
-	input {
-		border: none;
-		background: transparent;
-		outline: none;
-
-		&::placeholder {
-			color: $devui-placeholder;
-		}
-
-		&:focus {
-			outline: none;
-		}
-	}
-
-	.dp-input-container {
-		display: flex;
-		flex: 1;
-	}
-
-	.dp-category-search-extended-container {
-		display: flex;
-		flex-wrap: nowrap;
-		width: fit-content;
-		height: 16px;
-		margin: 8px 0 8px;
-		border-left: 1px solid $devui-line;
-		padding-left: 8px;
-	}
+  position: relative;
+  border-radius: $devui-border-radius;
+  width: 100%;
+  height: 32px;
+  padding: 0 8px;
+  display: flex;
+  align-items: center;
+  background: transparent;
+  transition: border $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
+  background-color: $devui-base-bg;
+  border: 1px solid $devui-line;
+
+  ul,
+  li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &.container-hover {
+    & > .dp-category-search-icon svg p path {
+      fill: $devui-icon-fill-hover;
+    }
+  }
+
+  &.dp-gray-style {
+    background-color: $devui-gray-form-control-bg;
+    border-color: transparent;
+    transition: all $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
+
+    &:hover {
+      background-color: $devui-gray-form-control-hover-bg;
+    }
+
+    &:focus-within {
+      background-color: $devui-base-bg;
+      border-color: $devui-brand;
+    }
+
+    .dp-category-search-input input.dp-category-search-toggle {
+      background-color: transparent !important;
+    }
+  }
+
+  .dp-category-search-toggle {
+    color: $devui-text;
+  }
+
+  .dp-category-search-line-container {
+    width: 100%;
+    height: 32px;
+    overflow: hidden;
+
+    &:hover {
+      overflow-x: auto;
+      overflow-y: overlay;
+    }
+
+    .dp-category-search-line {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: flex-start;
+      align-items: flex-start;
+      width: 100%;
+      height: 30px;
+      position: relative;
+
+      & > li {
+        display: flex;
+        align-items: center;
+        flex-grow: 0;
+        white-space: nowrap;
+        height: 100%;
+      }
+
+      .dp-category-search-input {
+        display: flex;
+        justify-content: flex-start;
+        flex-grow: 1;
+        align-items: center;
+        min-width: 160px;
+        padding-right: 20px;
+
+        input {
+          min-width: 240px;
+          width: 100%;
+          height: 32px;
+          font-size: $devui-font-size-sm;
+        }
+
+        .dp-category-search-toggle {
+          padding-left: 0;
+        }
+
+        .dp-category-search-keyword-in-category {
+          overflow: visible;
+        }
+      }
+    }
+  }
+
+  input {
+    border: none;
+    background: transparent;
+    outline: none;
+
+    &::placeholder {
+      color: $devui-placeholder;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .dp-input-container {
+    display: flex;
+    flex: 1;
+  }
+
+  .dp-category-search-extended-container {
+    display: flex;
+    flex-wrap: nowrap;
+    width: fit-content;
+    height: 16px;
+    margin: 8px 0 8px;
+    border-left: 1px solid $devui-line;
+    padding-left: 8px;
+  }
 }
 
 .dp-category-search-icon {
-	display: flex;
-	padding-right: 8px;
-	align-items: center;
-	height: 16px;
-	cursor: pointer;
-
-	svg g path {
-		outline: none;
-		fill: $devui-icon-fill;
-		transition: all $devui-animation-ease-in-out-smooth $devui-animation-duration-slow;
-	}
-
-	&.disabled {
-		cursor: not-allowed;
-
-		svg g path {
-			fill: $devui-disabled-text;
-		}
-	}
-
-	&:not(.disabled):hover svg g path {
-		fill: $devui-icon-fill-hover;
-	}
+  display: flex;
+  padding-right: 8px;
+  align-items: center;
+  height: 16px;
+  cursor: pointer;
+
+  svg g path {
+    outline: none;
+    fill: $devui-icon-fill;
+    transition: all $devui-animation-ease-in-out-smooth $devui-animation-duration-slow;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    svg g path {
+      fill: $devui-disabled-text;
+    }
+  }
+
+  &:not(.disabled):hover svg g path {
+    fill: $devui-icon-fill-hover;
+  }
 }
 
 li.dp-tag-item {
-	display: inline-block;
-	margin-right: 4px;
-	@include tag-item();
-
-	&:first-child {
-		margin-left: 4px;
-	}
-
-	&:focus {
-		outline: none;
-	}
-
-	.dp-color-block-split-line {
-		color: $devui-aide-text;
-	}
-
-	.dp-color-block-sm {
-		width: 8px;
-		height: 8px;
-		border-radius: $devui-border-radius;
-		margin-right: 4px;
-		display: inline-block;
-		position: relative;
-		top: -1px;
-		vertical-align: middle;
-	}
+  display: inline-block;
+  margin-right: 4px;
+  @include tag-item();
+
+  &:first-child {
+    margin-left: 4px;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  .dp-color-block-split-line {
+    color: $devui-aide-text;
+  }
+
+  .dp-color-block-sm {
+    width: 8px;
+    height: 8px;
+    border-radius: $devui-border-radius;
+    margin-right: 4px;
+    display: inline-block;
+    position: relative;
+    top: -1px;
+    vertical-align: middle;
+  }
 }
 
 .dp-category-search-dropdown {
-	min-width: 200px;
-	overflow-x: auto;
-	white-space: nowrap;
-
-	ul,
-	li {
-		padding: 0;
-		margin: 0;
-		list-style: none;
-	}
+  min-width: 200px;
+  overflow-x: auto;
+  white-space: nowrap;
+
+  ul,
+  li {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
 }
 
 .dp-dropdown-menu-template {
-	max-width: 300px;
-	max-height: 352px;
-	padding: 12px !important;
-	overflow: auto;
-
-	&.dp-category-search-keyword-in-category {
-		padding: 0 !important;
-	}
-
-	.dp-dropdown-item {
-		display: block;
-		width: 100%;
-		max-height: 36px;
-		line-height: 20px;
-		padding: 8px 12px !important;
-		border-radius: $devui-border-radius;
-		border: 0;
-		box-sizing: border-box;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		transition: color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth,
-			background-color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth;
-		cursor: pointer;
-
-		&:not(:first-child) {
-			margin-top: 4px;
-		}
-
-		&:hover {
-			color: $devui-list-item-hover-text;
-			background-color: $devui-list-item-hover-bg;
-		}
-
-		&.active {
-			color: $devui-list-item-active-text;
-			background-color: $devui-list-item-active-bg;
-		}
-
-		.icon-search {
-			margin-right: 4px;
-		}
-	}
-
-	.dp-dividing-line {
-		height: 1px;
-		width: 100%;
-		background-color: $devui-dividing-line;
-		margin-top: 4px;
-	}
-
-	.dp-dropdown-menu-tip {
-		cursor: text;
-		padding: 12px 12px 0;
-		pointer-events: none;
-		color: $devui-aide-text;
-	}
-
-	.dp-color-block {
-		width: 12px;
-		height: 12px;
-		margin-right: 8px;
-		border-radius: $devui-border-radius;
-		position: relative;
-		top: -1px;
-		vertical-align: middle;
-		display: inline-block;
-	}
+  max-width: 300px;
+  max-height: 352px;
+  padding: 12px !important;
+  overflow: auto;
+
+  &.dp-category-search-keyword-in-category {
+    padding: 0 !important;
+  }
+
+  .dp-dropdown-item {
+    display: block;
+    width: 100%;
+    max-height: 36px;
+    line-height: 20px;
+    padding: 8px 12px !important;
+    border-radius: $devui-border-radius;
+    border: 0;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth,
+      background-color $devui-animation-duration-fast $devui-animation-ease-in-out-smooth;
+    cursor: pointer;
+
+    &:not(:first-child) {
+      margin-top: 4px;
+    }
+
+    &:hover {
+      color: $devui-list-item-hover-text;
+      background-color: $devui-list-item-hover-bg;
+    }
+
+    &.active {
+      color: $devui-list-item-active-text;
+      background-color: $devui-list-item-active-bg;
+    }
+
+    .icon-search {
+      margin-right: 4px;
+    }
+  }
+
+  .dp-dividing-line {
+    height: 1px;
+    width: 100%;
+    background-color: $devui-dividing-line;
+    margin-top: 4px;
+  }
+
+  .dp-dropdown-menu-tip {
+    cursor: text;
+    padding: 12px 12px 0;
+    pointer-events: none;
+    color: $devui-aide-text;
+  }
+
+  .dp-color-block {
+    width: 12px;
+    height: 12px;
+    margin-right: 8px;
+    border-radius: $devui-border-radius;
+    position: relative;
+    top: -1px;
+    vertical-align: middle;
+    display: inline-block;
+  }
+
+  .#{$devui-prefix}-checkbox__group,
+  .#{$devui-prefix}-checkbox__column-margin,
+  .#{$devui-prefix}-checkbox,
+  .#{$devui-prefix}-checkbox label,
+  .#{$devui-prefix}-checkbox__label-text {
+    max-width: 100%;
+  }
 }
 
 .dp-save-panel {
-	width: 400px;
-	height: auto;
-
-	.dp-save-panel-title {
-		display: flex;
-		justify-content: space-between;
-		height: 48px;
-		line-height: 48px;
-		border-bottom: 1px solid $devui-dividing-line;
-		padding: 0 20px;
-		font-size: 14px;
-		font-weight: bold;
-		color: $devui-font-size-page-title;
-	}
-
-	.dp-save-filter-name {
-		padding: 16px 20px;
-
-		.#{$devui-prefix}-form__item--vertical {
-			margin-bottom: 0;
-		}
-	}
-
-	.dp-save-panel-operation-area {
-		padding-bottom: 12px;
-		display: flex;
-		justify-content: center;
-
-		.#{$devui-prefix}-button:not(:first-child) {
-			margin-left: 16px;
-		}
-	}
+  width: 400px;
+  height: auto;
+
+  .dp-save-panel-title {
+    display: flex;
+    justify-content: space-between;
+    height: 48px;
+    line-height: 48px;
+    border-bottom: 1px solid $devui-dividing-line;
+    padding: 0 20px;
+    font-size: 14px;
+    font-weight: bold;
+    color: $devui-font-size-page-title;
+  }
+
+  .dp-save-filter-name {
+    padding: 16px 20px;
+
+    .#{$devui-prefix}-form__item--vertical {
+      margin-bottom: 0;
+    }
+  }
+
+  .dp-save-panel-operation-area {
+    padding-bottom: 12px;
+    display: flex;
+    justify-content: center;
+
+    .#{$devui-prefix}-button:not(:first-child) {
+      margin-left: 16px;
+    }
+  }
 }
 
 .dp-dropdown-menu-fix {
-	min-width: 200px;
-	margin-left: 0;
-	overflow-y: auto;
-	white-space: nowrap;
-
-	&.max-height {
-		max-height: 405px;
-	}
-
-	.#{$devui-prefix}-form {
-		.#{$devui-prefix}-form__item--horizontal {
-			margin: 16px 8px;
-		}
-
-		.#{$devui-prefix}-form__label {
-			display: none;
-		}
-
-		.#{$devui-prefix}-form__control--horizontal {
-			margin-left: 0;
-		}
-	}
-
-	.#{$devui-prefix}-input-number {
-		width: 70px;
-	}
+  min-width: 200px;
+  margin-left: 0;
+  overflow-y: auto;
+  white-space: nowrap;
+
+  &.max-height {
+    max-height: 405px;
+  }
+
+  .#{$devui-prefix}-form {
+    .#{$devui-prefix}-form__item--horizontal {
+      margin: 16px 8px;
+    }
+
+    .#{$devui-prefix}-form__label {
+      display: none;
+    }
+
+    .#{$devui-prefix}-form__control--horizontal {
+      margin-left: 0;
+    }
+  }
+
+  .#{$devui-prefix}-input-number {
+    width: 70px;
+  }
 }
 
 .dp-selected-tags-list {
-	ul {
-		display: flex;
-		flex-flow: row wrap;
-		align-items: center;
-		justify-content: flex-start;
-		max-height: 390px;
-		overflow: auto;
-
-		li.dp-tag-item {
-			display: flex;
-			flex-grow: 0;
-			flex-flow: row wrap;
-			margin: 2px 4px 2px 0;
-
-			&:last-child {
-				margin-right: 0;
-			}
-		}
-	}
+  ul {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: flex-start;
+    max-height: 390px;
+    overflow: auto;
+
+    li.dp-tag-item {
+      display: flex;
+      flex-grow: 0;
+      flex-flow: row wrap;
+      margin: 2px 4px 2px 0;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
 }
 
 .dp-dropdown-operation-area {
-	border-top: 1px solid $devui-dividing-line;
-	padding-top: 8px;
-	margin: 8px 0;
-	display: flex;
-	justify-content: center;
-
-	&>.#{$devui-prefix}-button:first-child {
-		margin-right: 8px;
-	}
+  border-top: 1px solid $devui-dividing-line;
+  padding-top: 8px;
+  margin: 8px 0;
+  display: flex;
+  justify-content: center;
+
+  & > .#{$devui-prefix}-button:first-child {
+    margin-right: 8px;
+  }
 }
 
 .dp-input-number-operation-area {
-	padding: 16px 16px 8px;
-	display: flex;
-	justify-content: space-evenly;
+  padding: 16px 16px 8px;
+  display: flex;
+  justify-content: space-evenly;
 }
 
 .dp-no-data-text {
-	font-size: $devui-font-size;
-	color: $devui-text;
-	padding: 8px 0;
-	text-align: center;
+  font-size: $devui-font-size;
+  color: $devui-text;
+  padding: 8px 0;
+  text-align: center;
 }
 
 .dp-scrollbar::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
+  width: 8px;
+  height: 8px;
 }
 
 .dp-scrollbar::-webkit-scrollbar-track {
-	background-color: transparent;
+  background-color: transparent;
 }
 
 .dp-scrollbar::-webkit-scrollbar-thumb {
-	border-radius: 8px;
-	background-color: $devui-line;
+  border-radius: 8px;
+  background-color: $devui-line;
 }
 
 .dp-scrollbar::-webkit-scrollbar-thumb:hover {
-	background-color: $devui-placeholder;
-}
\ No newline at end of file
+  background-color: $devui-placeholder;
+}
diff --git a/packages/devui-vue/devui/dropdown/src/dropdown-types.ts b/packages/devui-vue/devui/dropdown/src/dropdown-types.ts
index a829854a84..ccfc8fe3a6 100644
--- a/packages/devui-vue/devui/dropdown/src/dropdown-types.ts
+++ b/packages/devui-vue/devui/dropdown/src/dropdown-types.ts
@@ -1,4 +1,4 @@
-import type { PropType, ExtractPropTypes, Ref, ComputedRef } from 'vue';
+import type { PropType, ExtractPropTypes, Ref, ComputedRef, TeleportProps } from 'vue';
 
 export type TriggerType = 'click' | 'hover' | 'manually';
 export type CloseScopeArea = 'all' | 'blank' | 'none';
@@ -64,6 +64,10 @@ export const dropdownProps = {
     type: Boolean,
     default: true,
   },
+  teleport: {
+    type: [String, Object] as PropType<TeleportProps['to']>,
+    default: 'body',
+  },
 };
 
 export type DropdownProps = ExtractPropTypes<typeof dropdownProps>;
diff --git a/packages/devui-vue/devui/dropdown/src/dropdown.tsx b/packages/devui-vue/devui/dropdown/src/dropdown.tsx
index da5d9bf241..2b13ec3a2b 100644
--- a/packages/devui-vue/devui/dropdown/src/dropdown.tsx
+++ b/packages/devui-vue/devui/dropdown/src/dropdown.tsx
@@ -15,7 +15,7 @@ export default defineComponent({
   props: dropdownProps,
   emits: ['toggle'],
   setup(props: DropdownProps, { slots, attrs, emit, expose }) {
-    const { visible, position, align, offset, destroyOnHide, shiftOffset, showAnimation } = toRefs(props);
+    const { visible, position, align, offset, destroyOnHide, shiftOffset, showAnimation, teleport } = toRefs(props);
     const origin = ref<HTMLElement | undefined>();
     const dropdownRef = ref<HTMLElement | undefined>();
     const overlayRef = ref();
@@ -51,7 +51,7 @@ export default defineComponent({
     return () => (
       <>
         <PopperTrigger>{slots.default?.()}</PopperTrigger>
-        <Teleport to="body">
+        <Teleport to={teleport.value}>
           <Transition name={showAnimation.value ? ns.m(`fade-${currentPosition.value}`) : ''}>
             <FlexibleOverlay
               v-model={overlayModelValue.value}
diff --git a/packages/devui-vue/docs/components/dropdown/index.md b/packages/devui-vue/docs/components/dropdown/index.md
index 7b03df48bd..931decd3e1 100644
--- a/packages/devui-vue/docs/components/dropdown/index.md
+++ b/packages/devui-vue/docs/components/dropdown/index.md
@@ -269,6 +269,7 @@ export default defineComponent({
 | show-animation            | `boolean`                                   | true       | 可选，控制是否显示动画                                                                                                       |
 | overlay-class             | `string`                                    | --         | 可选，自定义 overlay 的样式                                                                                                  |
 | destroy-on-hide           | `boolean`                                   | true       | 可选，是否在关闭 dropdown 时将其销毁                                                                                         |
+| teleport          | `string \| HTMLElement`                            | 'body' | 可选，挂载节点，等同于 Teleport 组件的[to 属性](https://cn.vuejs.org/api/built-in-components.html#teleport) |
 
 ### Dropdown 事件
 
diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json
index c116e85fd1..4c796310fb 100644
--- a/packages/devui-vue/package.json
+++ b/packages/devui-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-devui",
-  "version": "1.6.13",
+  "version": "1.6.14",
   "license": "MIT",
   "description": "DevUI components based on Vite and Vue3",
   "keywords": [