@cloudbase/weda-ui-mp 0.2.20

package/components/wd-menu-list/index.js

@@ -0,0 +1,256 @@
+import { getWedaAPI } from '../../utils/getWedaApi';
+import { commonCompBehavior } from '../../utils/common-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+import eventBus from '../wd-menu-layout/utils/index';
+import { getQuery, judgeMenuPathAndCurrentPath } from '../../utils/tool';
+
+const filterMenuData = (menu) => {
+  const res = [];
+  menu?.forEach((item) => {
+    if (item.children?.length) {
+      item.children = filterMenuData(item.children);
+    }
+
+    if (item.visible !== false) {
+      res.push(item);
+    }
+  });
+
+  return res;
+};
+
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    menu: {
+      type: Object,
+      value: {},
+    },
+    defaultOpened: {
+      type: Boolean,
+      value: true,
+    },
+    selectedMenuKey: {
+      type: String,
+      value: '',
+    },
+  },
+  data: {
+    classPrefix: WD_PREFIX,
+    selectedKey: '',
+    menuData: [],
+  },
+  lifetimes: {
+    attached() {
+      this.updateWidgetAPI();
+      this.init();
+      this.properties.selectedMenuKey &&
+        this.setData({ selectedKey: this.properties.selectedMenuKey });
+    },
+  },
+  observers: {
+    'menu,defaultOpened': function (menu, defaultOpened) {
+      const menuData = filterMenuData(
+        (menu.isMultiTerminal ? menu.mobileMenuData : menu.menuData) || []
+      );
+      this.findSelectItem(menuData);
+      this.init(menu, defaultOpened);
+    },
+    selectedMenuKey: function (selectedMenuKey) {
+      selectedMenuKey && this.setData({ selectedKey: selectedMenuKey });
+    },
+  },
+  methods: {
+    updateWidgetAPI() {
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          setSelectedInfo: this.setSelectedInfo,
+        });
+    },
+    /**
+     * 设置选中菜单项
+     * @param {*} params
+     */
+    setSelectedInfo({ params, isNavigate = false } = {}) {
+      const { key, item } = params || {};
+      let selectItem = item;
+      if (key || !item) {
+        const menuData =
+          (this.data.isMultiTerminal
+            ? this.data.mobileMenuData
+            : this.data.menuData) || [];
+        selectItem = this.findSelectItem(menuData, key) || {};
+      }
+      if (!selectItem) return;
+      this.setData({ selectedKey: selectItem?.key });
+      isNavigate && this.navigateTo(selectItem);
+    },
+    /**
+     * 根据菜单项链接跳转
+     * @param {*} item
+     */
+    navigateTo(item) {
+      const { app } = getWedaAPI();
+      const { $w } = app?.__internal__ || {};
+
+      const currentPath = `/${$w?.page?.uuid || $w?.page?.id}`;
+      const menuPath = `${
+        item.subPackageName ? `/${item.subPackageName}` : ''
+      }${item.path || ''}`;
+
+      if (
+        item?.type === 'route' &&
+        item?.path &&
+        (currentPath !== menuPath.split('?')[0] ||
+          !judgeMenuPathAndCurrentPath(menuPath))
+      ) {
+        app.navigateTo({
+          pageId: item.path.replace('/', '')?.split('?')?.[0],
+          packageName: item.subPackageName || '',
+          mode: 'weDa',
+          params: getQuery(item.path),
+        });
+      }
+    },
+    /**
+     * 初始化菜单列表和选择项
+     * @param {*} menu
+     */
+    init(menu = this.data.menu, defaultOpened = this.properties.defaultOpened) {
+      const menuData = filterMenuData(
+        (menu.isMultiTerminal ? menu.mobileMenuData : menu.menuData) || []
+      );
+      const selectItem = this.findSelectItem(menuData) || {};
+      this.setSelectedInfo({ params: { item: selectItem } });
+      this.setData({
+        menuData: this.generateMenuData({
+          menuData,
+          menuItem: selectItem,
+          init: true,
+          defaultOpened,
+        }),
+      });
+    },
+    /**
+     * 判断菜单是否展开
+     * @param {*} menu
+     * @param {*} selectedkey
+     * @returns
+     */
+    hasSelectedMenu(menu, selectedkey) {
+      let opened = false;
+      if (menu.key === selectedkey) {
+        return true;
+      }
+      menu?.children?.forEach((i) => {
+        if (i.key === selectedkey) {
+          opened = true;
+        }
+        if (i?.children?.length) {
+          opened = this.hasSelectedMenu(i, selectedkey);
+        }
+      });
+      return opened;
+    },
+    /**
+     * 处理待显示的菜单列表
+     * @param {*} menuData
+     * @param {*} menuItem
+     * @param {*} init
+     * @returns
+     */
+    generateMenuData({ menuData, menuItem, init = false, defaultOpened } = {}) {
+      let menus = JSON.parse(JSON.stringify(menuData));
+      return menus?.map((i) => {
+        if (init) {
+          i.expand = defaultOpened || this.hasSelectedMenu(i, menuItem?.key);
+        } else if (i.key === menuItem?.key) {
+          i.expand = menuItem?.expand;
+        }
+        return {
+          ...i,
+          children: this.generateMenuData({
+            menuData: i.children || [],
+            menuItem,
+            init,
+            defaultOpened,
+          }),
+        };
+      });
+    },
+    /**
+     * 点击菜单的某一项
+     * @param {*} itemInfo
+     * @returns
+     */
+    menuClick(itemInfo) {
+      const menu = itemInfo?.currentTarget?.dataset?.menu;
+      const { children, expand, key, disabled } = menu;
+      if (disabled) return;
+
+      if (children.length) {
+        this.setData({
+          menuData: this.generateMenuData({
+            menuData: this.data.menuData,
+            menuItem: {
+              ...menu,
+              expand: !expand,
+            },
+          }),
+        });
+        return;
+      } else {
+        this.setData({ selectedKey: key });
+        this.triggerEvent('menuClick', { item: menu });
+        eventBus.emit('dealMenuShow', false);
+        this.navigateTo(menu);
+      }
+    },
+    /**
+     * 查找已选中的菜单项
+     * @param {*} menu
+     * @param {*} selectedKey
+     * @returns
+     */
+    findSelectItem(menu, selectedKey) {
+      const len = menu.length;
+      // 默认高亮当前路由对应的菜单
+      const { app } = getWedaAPI();
+      const { $w } = app?.__internal__ || {};
+      const currentPath = `/${$w?.page?.uuid || $w?.page?.id}`;
+
+      for (let i = 0; i < len; i++) {
+        if (menu[i].children) {
+          const selectItem = this.findSelectItem(menu[i].children, selectedKey);
+
+          if (selectItem) return selectItem;
+        }
+
+        const menuPath = `${
+          menu[i].subPackageName ? `/${menu[i].subPackageName}` : ''
+        }${menu[i].path}`;
+
+        if (
+          menu[i].key === selectedKey ||
+          (currentPath === menuPath.split('?')[0] &&
+            judgeMenuPathAndCurrentPath(menuPath))
+        )
+          return menu[i];
+      }
+
+      return null;
+    },
+  },
+});

package/components/wd-menu-list/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "wd-icon": "../wd-icon/index"
+  }
+}

package/components/wd-menu-list/index.wxml

@@ -0,0 +1,50 @@
+<wxs module="tools"> function includes(tabItem) { return tabItem.iconUrl && tabItem.iconUrl.indexOf('http') !== -1 ? 'custom' : 'inner' } module.exports = { includes: includes } </wxs>
+<view style="{{style}}" class="{{className}} weda-menu-mobile__drawer">
+  <view class="weda-drawer-drawer__body">
+    <scroll-view class="weda-drawer-menu weda-menu__drawer-menu weda-drawer-menu--light" scroll-y>
+      <view class="weda-drawer-menu weda-menu__drawer-menu weda-drawer-menu--light" style="background:{{navigationStyle.menuBackgroundColor}}">
+        <view class="weda-drawer-menu__body">
+          <view class="weda-drawer-menu__list">
+            <block wx:for="{{menuData}}" wx:key="menuIndex" wx:for-item="menuItem">
+              <view class="{{menuItem.children ? 'weda-drawer-menu__submenu' : ''}} {{menuItem.expand?'expand':''}}">
+                <view class="weda-drawer-menu__item {{selectedKey===menuItem.key ? 'is-selected' : ''}} {{menuItem.disabled ? 'is-disabled' : ''}}" bindtap="menuClick" data-menu="{{menuItem}}">
+                  <wd-icon wx:if="{{menuItem.iconUrl}}" name="{{menuItem.iconUrl}}" type="{{tools.includes(menuItem)}}" size="md" />
+                  <wd-icon wx:elif="{{menuItem.selectedIconPath || menuItem.iconPath}}" name="{{selectedKey === menuItem.key? menuItem.selectedIconPath : menuItem.iconPath}}" src="{{selectedKey === menuItem.key? menuItem.selectedIconPath : menuItem.iconPath}}" type="custom" size="md" />
+                  <view class="weda-drawer-menu__text">{{menuItem.title}}</view>
+                  <view wx-if="{{menuItem.children.length>0}}" class="weda-menu__bar-btn-expand lcap-icon lcap-icon-chevrondown"></view>
+                </view>
+                <view class="weda-drawer-menu__list">
+                  <block wx-if="{{menuItem.children}}">
+                    <block wx:for="{{menuItem.children}}" wx:key="secondIndex" wx:for-item="secondMenu">
+                      <view class="{{secondMenu.children ? 'weda-drawer-menu__submenu weda-menu__submenu' : ''}} {{secondMenu.expand?'expand':''}}">
+                        <view class="weda-drawer-menu__item {{selectedKey===secondMenu.key ? 'is-selected' : ''}} {{secondMenu.disabled ? 'is-disabled' : ''}}" bindtap="menuClick" data-menu="{{secondMenu}}">
+                          <wd-icon wx:if="{{secondMenu.iconUrl}}" name="{{secondMenu.iconUrl}}" size="md" type="{{tools.includes(secondMenu)}}" />
+                          <wd-icon wx:elif="{{secondMenu.selectedIconPath || secondMenu.iconPath}}" name="{{selectedKey === secondMenu.key? secondMenu.selectedIconPath : secondMenu.iconPath}}" src="{{selectedKey === secondMenu.key? secondMenu.selectedIconPath : secondMenu.iconPath}}" type="custom" size="md" />
+                          <view class="weda-drawer-menu__text">{{secondMenu.title}}</view>
+                          <view wx-if="{{secondMenu.children.length>0}}" class="weda-menu__bar-btn-expand lcap-icon lcap-icon-chevrondown"></view>
+                        </view>
+                        <view class="weda-drawer-menu__list">
+                          <block wx-if="{{secondMenu.children}}">
+                            <block wx:for="{{secondMenu.children}}" wx:key="thridIndex" wx:for-item="thridMenu">
+                              <view class="">
+                                <view class="weda-drawer-menu__item {{selectedKey===thridMenu.key ? 'is-selected' : ''}} {{thridMenu.disabled ? 'is-disabled' : ''}}" bindtap="menuClick" data-menu="{{thridMenu}}">
+                                  <wd-icon wx:if="{{thridMenu.iconUrl}}" name="{{thridMenu.iconUrl}}" size="md" type="{{tools.includes(thridMenu)}}" />
+                                  <wd-icon wx:elif="{{thridMenu.selectedIconPath || thridMenu.iconPath}}" name="{{selectedKey === thridMenu.key? thridMenu.selectedIconPath : thridMenu.iconPath}}" src="{{selectedKey === thridMenu.key? thridMenu.selectedIconPath : thridMenu.iconPath}}" type="custom" size="md" />
+                                  <view class="weda-drawer-menu__text">{{thridMenu.title}}</view>
+                                </view>
+                              </view>
+                            </block>
+                          </block>
+                        </view>
+                      </view>
+                    </block>
+                  </block>
+                </view>
+              </view>
+            </block>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</view>

package/components/wd-menu-list/index.wxss

@@ -0,0 +1,146 @@
+@import '../../style/wd-design.wxss';
+@import './wd-menu-list.wxss';
+
+.weda-menu-mobile__drawer {
+  width: 100%;
+  position: fixed;
+  left: 0;
+  right: auto;
+  bottom: 0;
+  top: 112rpx;
+  flex-direction: column;
+  background-color: #fff;
+  box-shadow: 0 0.14286rem 0.28571rem 0 rgb(54 58 80 / 32%);
+  display: flex;
+  color: rgba(0, 0, 0, 0.9);
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.weda-menu-mobile__drawer .weda-drawer-drawer__body {
+  padding: 0;
+  flex: 1 1 auto;
+  overflow: auto;
+  margin-left: auto;
+  width: var(--wd-menulayout-h5-drawer-width);
+}
+
+.weda-menu-mobile__drawer .weda-drawer-menu--light {
+  position: relative;
+  width: 100%;
+  background-color: #1e222d;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  vertical-align: top;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow-x: hidden;
+  background-color: #fff;
+}
+
+.weda-menu-mobile__drawer .weda-menu__drawer-menu .weda-drawer-menu__body {
+  width: 100%;
+  border: none;
+  flex: 1;
+  overflow: auto;
+  overflow-x: hidden;
+}
+
+.weda-menu-mobile__drawer .weda-menu__drawer-menu .weda-drawer-menu__item {
+  padding: 14px 16px 16px 16px;
+  border-bottom: 1px solid rgba(160, 160, 160, 0.2);
+  display: flex;
+  align-items: center;
+}
+.weda-grid-navigation__icon {
+  display: flex;
+  align-items: center;
+}
+
+.weda-menu-mobile__drawer .weda-menu__drawer-menu .weda-drawer-menu__list {
+  padding-bottom: 0;
+}
+
+.weda-menu-mobile__drawer
+  .weda-menu__drawer-menu
+  .weda-drawer-menu__submenu
+  .weda-drawer-menu__list
+  .weda-drawer-menu__item {
+  padding-left: 50px;
+}
+
+.weda-menu-mobile__drawer
+  .weda-menu__drawer-menu
+  .weda-menu__submenu
+  .weda-drawer-menu__list
+  .weda-drawer-menu__item {
+  padding-left: 70px;
+}
+
+.weda-menu-mobile__drawer .weda-menu__drawer-menu .weda-drawer-menu__list-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+  margin-top: 0;
+  vertical-align: text-top;
+}
+
+.weda-drawer-menu__item .weda-drawer-menu__text {
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.9);
+  padding: 0;
+  max-width: 100%;
+  font-weight: normal;
+  display: inline-block;
+  margin-left: calc(var(--wd-space-base) * 2);
+}
+
+.weda-drawer-menu__item.is-selected {
+  background: var(--wd-menulayout-header-menu-text-color-bg-checked);
+  color: var(--wd-menulayout-header-menu-text-color-checked);
+}
+
+.weda-drawer-menu__item.is-selected .weda-drawer-menu__text {
+  color: var(--wd-menulayout-header-menu-text-color-checked);
+}
+
+.weda-menu-mobile__drawer
+  .weda-menu__drawer-menu
+  .weda-drawer-menu__submenu
+  .weda-drawer-menu__list
+  .weda-drawer-menu__text {
+  font-weight: normal;
+}
+
+.weda-drawer-menu__submenu {
+  width: 100%;
+}
+
+.wedatea2td-menu--light.wedatea2td-menu.weda-menu__drawer-menu {
+  width: 100%;
+}
+
+.weda-menu-mobile__drawer .weda-grid-navigation__icon .weda-icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  margin-right: 4px;
+}
+
+.weda-drawer-menu__submenu > .weda-drawer-menu__list {
+  display: none;
+}
+.weda-drawer-menu__submenu.expand > .weda-drawer-menu__list {
+  display: block;
+}
+.weda-menu__bar-btn-expand {
+  top: 10px;
+  right: 10px;
+  font-size: 16px;
+  margin-left: auto;
+}
+.weda-drawer-menu__submenu.expand
+  > .weda-drawer-menu__item
+  > .weda-menu__bar-btn-expand {
+  transform: scaleY(-1);
+}