feat(action-menu): [action-menu] New Theme Adaptation (#771)

* feat(action-menu): [action-menu] New Theme Adaptation * Merge branch 'dev' of github.com:opentiny/tiny-vue into smb-action-menu
2023-12-04 18:50:26 -08:00 · 2023-12-04 18:50:26 -08:00 · 0133e9a39b
parent 5a7e8fd931
commit 0133e9a39b
16 changed files with 184 additions and 9 deletions
--- a/examples/sites/demos/pc/app/action-menu/add-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/action-menu/add-icon-composition-api.vue
@ -0,0 +1,31 @@
+<template>
+  <tiny-action-menu :options="options" :max-show-num="3"> </tiny-action-menu>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+import { IconWebPlus, IconSuccessful, IconCloseSquare } from '@opentiny/vue-icon';
+
+const options = ref([
+  {
+    label: '远程登陆',
+    icon: IconWebPlus()
+  },
+  {
+    label: '开机',
+    icon: IconSuccessful()
+  },
+  {
+    label: '关机',
+    icon: IconCloseSquare()
+  },
+  {
+    label: '重启'
+  },
+  {
+    label: '网络设置',
+    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+  }
+])
+</script>
--- a/examples/sites/demos/pc/app/action-menu/add-icon.vue
+++ b/examples/sites/demos/pc/app/action-menu/add-icon.vue
@ -0,0 +1,39 @@
+<template>
+  <tiny-action-menu :options="options" spacing="12px" :max-show-num="3"> </tiny-action-menu>
+</template>
+
+<script lang="jsx">
+import { ActionMenu } from '@opentiny/vue'
+import { IconWebPlus, IconSuccessful, IconCloseSquare } from '@opentiny/vue-icon';
+
+export default {
+  components: {
+    TinyActionMenu: ActionMenu
+  },
+  data() {
+    return {
+      options: [
+        {
+          label: '远程登陆',
+          icon: IconWebPlus()
+        },
+        {
+          label: '开机',
+          icon: IconSuccessful()
+        },
+        {
+          label: '关机',
+          icon: IconCloseSquare()
+        },
+        {
+          label: '重启'
+        },
+        {
+          label: '网络设置',
+          children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+        }
+      ]
+    }
+  }
+}
+</script>
--- a/examples/sites/demos/pc/app/action-menu/basic-usage.vue
+++ b/examples/sites/demos/pc/app/action-menu/basic-usage.vue
@ -1,5 +1,5 @@
 <template>
-  <tiny-action-menu :options="options"> </tiny-action-menu>
+  <tiny-action-menu :options="options" more-text="更多"> </tiny-action-menu>
 </template>

 <script>
@ -13,7 +13,7 @@ export default {
    return {
      options: [
        {
-          label: '远程登陆'
+          label: '远程登陆',
        },
        {
          label: '开机'
--- a/examples/sites/demos/pc/app/action-menu/disabled.vue
+++ b/examples/sites/demos/pc/app/action-menu/disabled.vue
@ -23,7 +23,8 @@ export default {
          label: '关机'
        },
        {
-          label: '重启'
+          label: '重启',
+          disabled: true
        },
        {
          label: '网络设置',
--- a/examples/sites/demos/pc/app/action-menu/webdoc/action-menu.js
+++ b/examples/sites/demos/pc/app/action-menu/webdoc/action-menu.js
@ -21,6 +21,16 @@ export default {
      },
      'codeFiles': ['disabled.vue']
    },
+    {
+      'demoId': 'add-icon',
+      'name': { 'zh-CN': '图标', 'en-US': 'Icon' },
+      'desc': {
+        'zh-CN': '通过属性 <code>icon</code> 配置菜单按钮前的图标。',
+        'en-US':
+          'The <code>icon</code> attribute is used to Configure the icon in front of the menu button.'
+      },
+      'codeFiles': ['add-icon.vue']
+    },
    {
      'demoId': 'text-field',
      'name': { 'zh-CN': '映射字段', 'en-US': 'Display Text' },
@ -129,6 +139,13 @@ export default {
          },
          'demoId': 'more-text'
        },
+        {
+          'name': 'icon',
+          'type': 'component',
+          'defaultValue': '',
+          'desc': { 'zh-CN': '菜单项显示值前的图标', 'en-US': 'Icon of a menu item' },
+          'demId': 'add-icon'
+        },
        {
          'name': 'options',
          'type': 'IItemData[]',
--- a/packages/design/smb/index.ts
+++ b/packages/design/smb/index.ts
@ -1,4 +1,5 @@
 import Alert from './src/alert'
+import ActionMenu from './src/action-menu'
 import Popconfirm from './src/popconfirm'
 import Dropdown from './src/dropdown'
 import DropdownItem from './src/dropdown-item'
@ -13,6 +14,7 @@ export default {
  version,
  components: {
    Alert,
+    ActionMenu,
    Popconfirm,
    Dropdown,
    DropdownItem,
--- a/packages/design/smb/src/action-menu/index.ts
+++ b/packages/design/smb/src/action-menu/index.ts
@ -0,0 +1,7 @@
+import { IconEllipsis } from '@opentiny/vue-icon'
+
+export default {
+  icons: {
+    moreIcon: IconEllipsis()
+  }
+}
--- a/packages/renderless/src/action-menu/vue.ts
+++ b/packages/renderless/src/action-menu/vue.ts
@ -24,12 +24,13 @@ export const api = ['state', 'handleMoreClick', 'handleItemClick', 'visibleChang
 export const renderless = (
  props: IActionMenuProps,
  { computed, reactive }: ISharedRenderlessParamHooks,
-  { emit }: IActionMenuRenderlessParamUtils
+  { emit, designConfig }: IActionMenuRenderlessParamUtils
 ): IActionMenuApi => {
  const state: IActionMenuState = reactive({
    visibleOptions: computed(() => props.options.slice(0, props.maxShowNum)),
    moreOptions: computed(() => props.options.slice(props.maxShowNum)),
-    spacing: computed(() => (String(props.spacing).includes('px') ? props.spacing : props.spacing + 'px'))
+    spacing: computed(() => (String(props.spacing).includes('px') ? props.spacing : props.spacing + 'px')),
+    moreIcon:  computed(() => designConfig?.icons?.moreIcon)
  })

  const api: IActionMenuApi = {
--- a/packages/theme/src/action-menu/aurora-theme.js
+++ b/packages/theme/src/action-menu/aurora-theme.js
@ -1,4 +1,5 @@
 export const tinyActionMenuAuroraTheme = {
  'ti-action-menu-text-color': 'var(--ti-common-color-text-highlight)',
-  'ti-action-menu-item-hover-text-color': 'var(--ti-common-color-text-link-hover)'
+  'ti-action-menu-item-hover-text-color': 'var(--ti-common-color-text-link-hover)',
+  'ti-action-menu-suffix-inner-display': 'inline-block'
 }
--- a/packages/theme/src/action-menu/index.less
+++ b/packages/theme/src/action-menu/index.less
@ -14,12 +14,32 @@
@import './vars.less';

@action-menu-prefix-cls: ~'@{css-prefix}action-menu';
+@dropdown-prefix-cls: ~'@{css-prefix}dropdown';
@dropdown-item-prefix-cls: ~'@{css-prefix}dropdown-item';

 .@{action-menu-prefix-cls} {
  .component-css-vars-action-menu();
+  .@{dropdown-prefix-cls} {
+    .@{dropdown-prefix-cls}__suffix-inner {
+      display: var(--ti-action-menu-suffix-inner-display);
+    }

+    .@{dropdown-prefix-cls}-trigger {
+      &:hover {
+        background-color: var(--ti-action-menu-more-icon-hover-bgc);
+        border-radius: var(--ti-action-menu-more-icon-hover-radius);
+      }
+
+      .tiny-svg {
+        margin-right: 0;
+        padding: var(--ti-action-menu-more-icon-padding);
+        width: var(--ti-action-menu-more-icon-width);
+        height: var(--ti-action-menu-more-icon-height);
+      }
+    }
+  }
  font-size: var(--ti-action-menu-font-size);
+  font-weight: var(--ti-action-menu-font-weight);
  color: var(--ti-action-menu-text-color);

  &__wrap {
@ -34,6 +54,8 @@
        fill: var(--ti-action-menu-text-color); // TINY-TODO :没有使用--ti-base-color-brand-7的图标色
        margin: var(--ti-action-menu-item-svg-margin-top) var(--ti-action-menu-item-svg-margin-right)
          var(--ti-action-menu-item-svg-margin-bottom) var(--ti-action-menu-item-svg-margin-left);
+          width: var(--ti-action-menu-more-icon-width);
+          height: var(--ti-action-menu-more-icon-height);
      }

      &:not(.is-disabled):hover {
@ -62,6 +84,7 @@

          &:hover {
            background-color: var(--ti-action-menu-item-hover-bg-color);
+            text-decoration: var(--ti-action-menu-hover-text-decoratio);
          }
        }

@ -74,7 +97,7 @@

      .@{action-menu-prefix-cls}__item-line {
        position: relative;
-        width: 1px;
+        width: var(--ti-action-menu-item-line-width);
        height: 12px;
        background: var(--ti-action-menu-item-line-bg-color);
        display: inline-block;
--- a/packages/theme/src/action-menu/smb-theme.js
+++ b/packages/theme/src/action-menu/smb-theme.js
@ -0,0 +1,16 @@
+export const tinyActionMenuSmbTheme = {
+    'ti-action-menu-item-line-bg-color': 'var(--ti-common-color-transparent)',
+    'ti-dropdown-item-font-size': 'var(--ti-common-font-size-1)',
+    'ti-dropdown-item-line-height': 'var(--ti-common-line-height-2)',
+    'ti-action-menu-item-svg-margin-top': '0',
+    'ti-action-menu-font-weight': 'var(--ti-common-font-weight-bold)',
+    'ti-action-menu-item-hover-text-color': 'var(--ti-common-color-text-link)',
+    'ti-action-menu-item-line-width': 'var(--ti-common-space-0)',
+    'ti-action-menu-hover-text-decoratio': 'underline',
+    'ti-dropdown-line-height': 'calc(var(--ti-common-line-height-4) + 2px)',
+    'ti-action-menu-suffix-inner-display': 'none',
+    'ti-action-menu-more-icon-width': 'var(--ti-common-size-6x)',
+    'ti-action-menu-more-icon-height': 'var(--ti-common-size-6x)',
+    'ti-action-menu-more-icon-hover-bgc': 'rgba(0,0,0,0.05)',
+    'ti-action-menu-more-icon-hover-radius': 'var(--ti-common-border-radius-2)'
+}
--- a/packages/theme/src/action-menu/vars.less
+++ b/packages/theme/src/action-menu/vars.less
@ -11,6 +11,22 @@
 */

 .component-css-vars-action-menu() {
+  // 按钮文本字重
+  --ti-action-menu-font-weight: var(--ti-common-font-weight-normal);
+  // 按钮文本装饰
+  --ti-action-menu-hover-text-decoratio: none;
+  // 更多后面的箭头是否显示
+  --ti-action-menu-suffix-inner-display: none;
+  // 更多...图标的宽度
+  --ti-action-menu-more-icon-width: 1em;
+  // 更多...图标的高度
+  --ti-action-menu-more-icon-height: 1em;
+  // 更多...图标hover态的背景颜色
+  --ti-action-menu-more-icon-hover-bgc: transparent;
+  // 更多...图标的内边距
+  --ti-action-menu-more-icon-padding: 2px;
+  // 更多...图标的圆角
+  --ti-action-menu-more-icon-hover-radius: var(--ti-common-border-radius-0);
  // 下拉触发源文本颜色
  --ti-action-menu-text-color: var(--ti-common-color-text-link, #526ecc);
  // 下拉触发源文本禁用色
@ -19,6 +35,8 @@
  --ti-action-menu-font-size: var(--ti-common-font-size-base, 12px);
  // 分割线颜色
  --ti-action-menu-item-line-bg-color: var(--ti-common-color-line-dividing, #dfe1e6);
+  // 分割线宽度
+  --ti-action-menu-item-line-width: var(--ti-common-space-1);
  // 下拉菜单项悬浮背景色
  --ti-action-menu-item-hover-bg-color: var(--ti-common-color-transparent, transparent);
  // 下拉菜单项文本悬浮色
--- a/packages/theme/src/dropdown-item/index.less
+++ b/packages/theme/src/dropdown-item/index.less
@ -112,6 +112,9 @@
  }

  &:not(.is-disabled).has-children:hover {
+    color: var(--ti-dropdown-item-content-text-hover);
+    background-color: var(--ti-dropdown-item-content-bg-hover);
+
    & > .@{dropdown-item-prefix-cls}__wrap {
      & > .@{dropdown-item-prefix-cls}__content {
        font-weight: var(--ti-dropdown-item-content-font-weight-hover);
--- a/packages/theme/src/dropdown-item/smb-theme.js
+++ b/packages/theme/src/dropdown-item/smb-theme.js
@ -10,5 +10,12 @@ export const tinyDropdownItemSmbTheme = {
  'ti-dropdown-item-max-width': 'var(--ti-common-size-auto)',
  'ti-dropdown-item-height': 'var(--ti-common-size-height-normal)',
  'ti-dropdown-item-icon-color': 'var(--ti-common-color-icon)',
-  'ti-dropdown-item-content-font-weight-hover': 'var(--ti-common-font-weight-6)'
+  'ti-dropdown-item-content-font-weight-hover': 'var(--ti-common-font-weight-6)',
+  'ti-dropdown-item-active-bg-color': 'var(--ti-common-color-bg-white-normal)',
+  'ti-dropdown-item-active-text-color': '#1476FF',
+  'ti-dropdown-item-content-text-hover': '#1476FF',
+  'ti-dropdown-item-before-bg-color': 'transparent',
+  'ti-dropdown-item-divided-border-color': 'transparent',
+  'ti-dropdown-item-content-bg-hover': 'transparent',
+  'ti-dropdown-item-before-height': '0'
 }
--- a/packages/theme/src/dropdown-item/vars.less
+++ b/packages/theme/src/dropdown-item/vars.less
@ -55,6 +55,10 @@
  --ti-dropdown-item-content-margin-left: var(--ti-common-space-0, 0px);
  // 下拉项内容悬浮时的字重
  --ti-dropdown-item-content-font-weight-hover: var(--ti-common-font-weight-4, normal);
+  // 有二级菜单下拉项内容悬浮时的文本色
+  --ti-dropdown-item-content-text-hover: var(--ti-common-color-text-highlight);
+  // 有二级菜单下拉项内容悬浮时的背景色
+  --ti-dropdown-item-content-bg-hover: var(--ti-common-color-bg-white-emphasize);
  // 下拉项分割线尺寸
  --ti-dropdown-item-divided-border-weight: var(--ti-common-border-weight-normal, 1px);
  // 下拉项分割线样式
--- a/packages/vue/src/action-menu/src/pc.vue
+++ b/packages/vue/src/action-menu/src/pc.vue
@ -11,6 +11,7 @@
          :label="visableItem[textField]"
          :text-field="textField"
          :disabled="visableItem.disabled"
+          :icon="visableItem.icon"
          @item-click="handleItemClick"
        >
          <template #default="{ itemData }">
@ -22,12 +23,15 @@

      <li v-if="state.moreOptions.length" class="tiny-action-menu__item">
        <tiny-dropdown
-          :title="moreText"
          :trigger="trigger"
          @item-click="handleItemClick"
          @handle-click="handleMoreClick"
          @visible-change="visibleChange"
        >
+        <template v-if="state.moreIcon">
+          <component :is="state.moreIcon"/>
+        </template>
+        <span v-else>{{ moreText }}</span>
          <template #dropdown>
            <tiny-dropdown-menu :text-field="textField" :popper-class="popperClass">
              <tiny-dropdown-item
@ -35,6 +39,7 @@
                :key="index"
                :item-data="item"
                :label="item[textField]"
+                :disabled="item.disabled"
              >
                <template #default="{ itemData }">
                  <slot name="item" :data="itemData"></slot>