feat(dropdown): [dropdown] add right side expansion function for drop…

…down (#2608) * feat(dropdown): [dropdown] add right side expansion function for dropdown * feat(dropdown): [dropdown] add right side expansion
opentiny · Dec 11, 2024 · 95028d5 · 95028d5
1 parent 31372b6
commit 95028d5
Show file tree

Hide file tree

Showing 6 changed files with 183 additions and 10 deletions.
diff --git a/examples/sites/demos/apis/dropdown.js b/examples/sites/demos/apis/dropdown.js
@@ -371,7 +371,10 @@ export default {
             'en-US': 'Menu pop-up location '
           },
           mode: ['pc'],
-          pcDemo: 'basic-usage'
+          pcDemo: 'placement',
+          meta: {
+            experimental: '3.21.0'
+          }
         },
         {
           name: 'popper-class',
@@ -551,7 +554,7 @@ type IButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'i
       name: 'IPlacementType',
       type: 'type',
       code: `        
-type IPlacementType =  'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
+type IPlacementType =  'bottom-start' | 'bottom-end'
 `
     }
   ]

diff --git a/examples/sites/demos/pc/app/dropdown/placement-composition-api.vue b/examples/sites/demos/pc/app/dropdown/placement-composition-api.vue
@@ -0,0 +1,50 @@
+<template>
+  <tiny-dropdown>
+    <template #dropdown>
+      <tiny-dropdown-menu placement="bottom-start">
+        <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
+        <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+        <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
+        <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
+      </tiny-dropdown-menu>
+    </template>
+  </tiny-dropdown>
+  <br />
+  <br />
+  <tiny-dropdown>
+    <template #dropdown>
+      <tiny-dropdown-menu :options="options" placement="bottom-start"> </tiny-dropdown-menu>
+    </template>
+  </tiny-dropdown>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+import { iconStarDisable } from '@opentiny/vue-icon'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
+
+const options = reactive([
+  {
+    label: '老友粉1',
+    icon: iconStarDisable(),
+    children: [
+      {
+        label: '老友粉2.1',
+        children: [{ label: '狮子头3.1' }]
+      },
+      { label: '老友粉2.2' },
+      { label: '老友粉2.3', disabled: true }
+    ]
+  },
+  {
+    label: '狮子头',
+    disabled: true
+  },
+  {
+    label: '黄金糕',
+    icon: iconStarDisable()
+  }
+])
+</script>
diff --git a/examples/sites/demos/pc/app/dropdown/placement.vue b/examples/sites/demos/pc/app/dropdown/placement.vue
@@ -0,0 +1,60 @@
+<template>
+  <tiny-dropdown>
+    <template #dropdown>
+      <tiny-dropdown-menu placement="bottom-start">
+        <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
+        <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+        <tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
+        <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
+      </tiny-dropdown-menu>
+    </template>
+  </tiny-dropdown>
+  <br />
+  <br />
+  <tiny-dropdown>
+    <template #dropdown>
+      <tiny-dropdown-menu :options="options" placement="bottom-start"> </tiny-dropdown-menu>
+    </template>
+  </tiny-dropdown>
+</template>
+
+<script>
+import { iconStarDisable } from '@opentiny/vue-icon'
+import { TinyDropdown, TinyDropdownMenu, TinyDropdownItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDropdown,
+    TinyDropdownMenu,
+    TinyDropdownItem
+  },
+  data() {
+    return {
+      options: [
+        {
+          label: '老友粉1',
+          icon: iconStarDisable(),
+          children: [
+            {
+              label: '老友粉2.1',
+              children: [{ label: '狮子头3.1' }]
+            },
+            { label: '老友粉2.2' },
+            { label: '老友粉2.3', disabled: true }
+          ]
+        },
+        {
+          label: '狮子头',
+          disabled: true
+        },
+        {
+          label: '黄金糕',
+          icon: iconStarDisable()
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
@@ -27,6 +27,20 @@ export default {
       },
       codeFiles: ['disabled.vue']
     },
+    {
+      demoId: 'placement',
+      name: {
+        'zh-CN': '展开位置',
+        'en-US': 'Placement'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>placement</code> 属性设置为 <code>bottom-start</code> 设置右侧展开。默认值为左侧展开。\n',
+        'en-US':
+          '<p>Set the <code>placement</code> attribute to <code>bottom-start</code> to expand on the right side. The default value is left expansion. </p>\n'
+      },
+      codeFiles: ['placement.vue']
+    },
     {
       demoId: 'size',
       name: {

diff --git a/packages/theme/src/dropdown-item/index.less b/packages/theme/src/dropdown-item/index.less
@@ -14,6 +14,7 @@
 @import './vars.less';
 
 @dropdown-item-prefix-cls: ~'@{css-prefix}dropdown-item';
+@dropdown-menu-prefix-cls: ~'@{css-prefix}dropdown-menu';
 @svg-prefix-cls: ~'@{css-prefix}svg';
 
 .@{dropdown-item-prefix-cls} {
@@ -69,7 +70,7 @@
     .@{dropdown-item-prefix-cls}__expand {
       display: flex;
       align-items: center;
-      margin-right: var(--tv-DropdownItem-expand-margin-right);
+      margin-right: var(--tv-DropdownItem-expand-margin-x);
 
       & + .@{dropdown-item-prefix-cls}__content {
         margin-left: 0;
@@ -88,7 +89,7 @@
       }
 
       .@{dropdown-item-prefix-cls}__pre-icon {
-        margin-right: var(--tv-DropdownItem-pre-icon-margin-right);
+        margin-right: var(--tv-DropdownItem-pre-icon-margin-x);
       }
     }
   }
@@ -155,3 +156,48 @@
     height: var(--tv-DropdownItem-height-xs);
   }
 }
+
+/* 右侧展开 */
+.@{dropdown-menu-prefix-cls}[x-placement='bottom-start'],
+.@{dropdown-menu-prefix-cls}[x-placement='top-start'] {
+  &:has(.has-children) {
+    &,
+    .@{dropdown-menu-prefix-cls} {
+      & > li:not(.has-children) .@{dropdown-item-prefix-cls}__content {
+        margin-left: 0;
+      }
+    }
+  }
+
+  .@{dropdown-item-prefix-cls}__wrap {
+    flex-direction: row-reverse;
+
+    .@{dropdown-item-prefix-cls}__expand {
+      margin-right: 0;
+      margin-left: var(--tv-DropdownItem-expand-margin-x);
+
+      .tiny-svg {
+        transform: scaleX(-1);
+      }
+    }
+
+    .@{dropdown-item-prefix-cls}__content {
+      flex-direction: row-reverse;
+      justify-content: flex-end;
+
+      .@{dropdown-item-prefix-cls}__pre-icon {
+        margin-left: var(--tv-DropdownItem-pre-icon-margin-x);
+        margin-right: 0;
+      }
+
+      .@{dropdown-item-prefix-cls}__label {
+        margin-left: 0;
+      }
+    }
+
+    .@{dropdown-item-prefix-cls}--child {
+      right: unset;
+      left: 100%;
+    }
+  }
+}
diff --git a/packages/theme/src/dropdown-item/vars.less b/packages/theme/src/dropdown-item/vars.less
@@ -35,17 +35,17 @@
 
   // 菜单项内边距
   --tv-DropdownItem-padding: 0px var(--tv-space-xl, 16px);
-  // 展开图标的右侧外边距
-  --tv-DropdownItem-expand-margin-right: var(--tv-space-md, 8px);
-  // 前置图标的右侧外边距
-  --tv-DropdownItem-pre-icon-margin-right: var(--tv-space-sm, 4px);
+  // 展开图标的水平外边距
+  --tv-DropdownItem-expand-margin-x: var(--tv-space-md, 8px);
+  // 自定义图标的水平外边距
+  --tv-DropdownItem-pre-icon-margin-x: var(--tv-space-sm, 4px);
   // 菜单项内容区的左侧外边距
   --tv-DropdownItem-content-margin-left: calc(
-    var(--tv-DropdownItem-icon-size) + var(--tv-DropdownItem-expand-margin-right)
+    var(--tv-DropdownItem-icon-size) + var(--tv-DropdownItem-expand-margin-x)
   );
   // 菜单项文本的左侧外边距
   --tv-DropdownItem-label-margin-left: calc(
-    var(--tv-DropdownItem-icon-size) + var(--tv-DropdownItem-pre-icon-margin-right)
+    var(--tv-DropdownItem-icon-size) + var(--tv-DropdownItem-pre-icon-margin-x)
   );
 
   // 菜单项高度(默认）