@cloudbase/weda-ui-mp 3.6.0

package/components/wd-tabbar/index.js

@@ -0,0 +1,196 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { getWedaAPI } from '../../utils/getWedaApi';
+import { commonCompBehavior } from '../../utils/common-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+import handleEvents from '../../utils/handleEvents';
+import { judgeMenuPathAndCurrentPath } from '../../utils/tool';
+
+const filterMenuData = (tabs) => {
+  const res = [];
+  tabs?.forEach((item) => {
+    if (item.children?.length) {
+      item.children = filterMenuData(item.children);
+    }
+
+    if (item.visible !== false) {
+      res.push(item);
+    }
+  });
+
+  return res;
+};
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    tabs: {
+      type: Object,
+      value: {},
+    },
+    routeType: {
+      type: String,
+      value: 'redirectTo',
+    },
+  },
+  data: {
+    classPrefix: WD_PREFIX,
+    selectedKey: '',
+    tabsData: [],
+  },
+  lifetimes: {
+    attached() {
+      this.updateWidgetAPI();
+      this.init();
+    },
+  },
+  pageLifetimes: {
+    show: function () {
+      // 页面被展示，$w?.page?.id更新会慢一拍，所以加一个延迟
+      // eslint-disable-next-line rulesdir/no-timer
+      setTimeout(() => {
+        this.init();
+      }, 100);
+    },
+  },
+  observers: {
+    tabs: function (tabs) {
+      const tabsData = filterMenuData(
+        (tabs.isMultiTerminal ? tabs.mobileMenuData : tabs.menuData) || []
+      );
+      this.findSelectItem(tabsData);
+      this.init(tabs);
+    },
+  },
+  methods: {
+    ...handleEvents([{ title: '点击', name: 'tap' }]),
+    updateWidgetAPI() {
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          tabs: this.data.tabsData,
+          selectedTab: this.data.tabsData?.find?.(
+            (item) => item.key === this.data.selectedKey
+          ),
+          setSelectTab: this.setSelectTab.bind(this),
+        });
+    },
+    /**
+     * 设置选中项
+     * @param {string} key
+     */
+    setSelectTab(
+      { key, isNavigate = true } = {},
+      tabsData = this.data.tabsData,
+      isInit = false
+    ) {
+      const selectItem = this.findSelectItem(tabsData, key);
+
+      if (!selectItem) return;
+
+      if (key && this.data.selectedKey !== key && !isInit) {
+        this.triggerEvent('change', { tab: selectItem });
+      }
+
+      this.setData({ selectedKey: key || selectItem.key });
+      this.updateWidgetAPI();
+
+      isNavigate && this.navigateTo(selectItem);
+    },
+    /**
+     * 根据tab项链接跳转
+     * @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?.[this.properties.routeType] || app.navigateTo)?.({
+          pageId: item.path.replace('/', ''),
+          packageName: item.subPackageName || '',
+          mode: 'weDa',
+        });
+      }
+    },
+    /**
+     * 初始化tab列表和选择项
+     * @param {*} tabs
+     */
+    init(tabs = this.properties.tabs) {
+      const tabsData = filterMenuData(
+        (tabs.isMultiTerminal ? tabs.mobileMenuData : tabs.menuData) || []
+      );
+      const selectItem = this.findSelectItem(tabsData) || {};
+      this.setSelectTab({ key: selectItem.key }, tabsData, true);
+      this.setData({ tabsData });
+    },
+    /**
+     * 点击tab的某一项
+     * @param {*} itemInfo
+     * @returns
+     */
+    tabClick(itemInfo) {
+      const tab = itemInfo?.currentTarget?.dataset?.tab;
+
+      const { key, disabled } = tab;
+      if (disabled || this.data.selectedKey === key) return;
+
+      this.setData({ selectedKey: key });
+      this.updateWidgetAPI();
+      this.triggerEvent('change', { item: tab });
+      this.navigateTo(tab);
+    },
+    /**
+     * 查找已选中的tab项
+     * @param {*} tabs
+     * @param {*} selectedKey
+     * @returns
+     */
+    findSelectItem(tabs, selectedKey) {
+      const len = tabs.length;
+      // 默认高亮当前路由对应的菜单
+      const { app } = getWedaAPI();
+      const { $w } = app?.__internal__ || {};
+      const currentPath = `/${$w?.page?.uuid || $w?.page?.id}`;
+
+      for (let i = 0; i < len; i++) {
+        const menuPath = `${
+          tabs[i].subPackageName ? `/${tabs[i].subPackageName}` : ''
+        }${tabs[i].path}`;
+
+        if (
+          tabs[i].isSelect ||
+          tabs[i].key === selectedKey ||
+          (currentPath === menuPath.split('?')[0] &&
+            judgeMenuPathAndCurrentPath(menuPath))
+        )
+          return tabs[i];
+      }
+
+      return null;
+    },
+  },
+});

package/components/wd-tabbar/index.json

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

package/components/wd-tabbar/index.wxml

@@ -0,0 +1,10 @@
+<wxs module="tools"> function includes(tabItem) { return tabItem.iconUrl && tabItem.iconUrl.indexOf('http') !== -1 ? 'custom' : 'inner' } module.exports = { includes: includes } </wxs>
+<view id="{{id}}" style="{{style}}" class="{{className}} {{classPrefix + '-tabbar'}} {{classPrefix + '-mp-tabbar'}}">
+  <view wx:for="{{tabsData}}" wx:key="tabIndex" wx:for-item="tabItem" class="{{classPrefix + '-tabbar__item'}} {{selectedKey === tabItem.key ? 'is-selected' : ''}}" bindtap="tabClick" data-tab="{{tabItem}}">
+    <view class="{{classPrefix + '-tabbar__item-icon'}}">
+      <wd-icon wx:if="{{tabItem.iconUrl}}" name="{{tabItem.iconUrl}}" src="{{tabItem.iconUrl}}" type="{{tools.includes(tabItem)}}" />
+      <wd-icon wx:elif="{{tabItem.selectedIconPath || tabItem.iconPath}}" name="{{selectedKey === tabItem.key? tabItem.selectedIconPath : tabItem.iconPath}}" src="{{selectedKey === tabItem.key? tabItem.selectedIconPath : tabItem.iconPath}}" type="custom" />
+    </view>
+    <view class="{{classPrefix + '-tabbar__item-text'}}">{{tabItem.title}}</view>
+  </view>
+</view>

package/components/wd-tabbar/index.wxss

@@ -0,0 +1,2 @@
+@import '../../style/wd-design.wxss';
+@import './wd-tabbar.wxss';

package/components/wd-tabbar/wd-tabbar.wxss

@@ -0,0 +1,87 @@
+.wd-tabbar {
+  --wd-tabbar-heder-item-color: var(--wd-color-text-placeholder);
+  --wd-tabbar-heder-item-color-selected: var(--wd-color-brand);
+  --wd-tabbar-heder-item-font: var(--wd-typography-body-md);
+  --wd-tabbar-heder-item-color-hover: var(--wd-color-brand-hover);
+}
+
+.wd-h5-tabbar,
+.wd-mp-tabbar {
+  --wd-tabbar-heder-item-font: var(--wd-typography-body-xs);
+}
+
+.wd-tabbar {
+  color: var(--wd-color-text-default);
+  font-size: var(--wd-font-size-default);
+  line-height: var(--wd-font-line-height-default);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  box-sizing: content-box;
+  overflow-x: unset;
+  display: flex;
+  min-height: 56px;
+  align-items: center;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  background-color: var(--wd-menulayout-bg);
+}
+.wd-tabbar--shadow-top {
+  border-top: 1px solid var(--wd-color-border-separator);
+}
+.wd-tabbar--shadow-bottom {
+  border-bottom: 1px solid var(--wd-color-border-separator);
+}
+.wd-tabbar__item {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 0;
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+  min-width: unset;
+  color: var(--wd-tabbar-heder-item-color);
+}
+.wd-tabbar__item:hover {
+  color: var(--wd-tabbar-heder-item-color-hover);
+}
+.wd-tabbar__item:hover .wd-tabbar__item-text {
+  color: var(--wd-tabbar-heder-item-color-hover);
+}
+.wd-tabbar__item-text {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+  -webkit-line-clamp: 1;
+  white-space: pre-line;
+  margin-top: 1px;
+  color: var(--wd-tabbar-heder-item-color);
+  text-align: center;
+  font: var(--wd-tabbar-heder-item-font);
+}
+.wd-tabbar__item.is-selected {
+  color: var(--wd-tabbar-heder-item-color-selected);
+}
+.wd-tabbar__item.is-selected .wd-tabbar__item-text {
+  color: var(--wd-tabbar-heder-item-color-selected);
+}
+.wd-tabbar .wd-link__slot {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.wd-mp-tabbar .wd-tabbar__item {
+  cursor: unset;
+}

package/components/wd-tabs/index.js

@@ -0,0 +1,62 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    isMultipleSlot: {
+      type: Boolean,
+      value: false,
+    },
+    selectedIndex: {
+      type: Number,
+      value: 0,
+    },
+    list: {
+      type: Array,
+      value: [],
+    },
+    direction: {
+      type: String,
+      value: '',
+    },
+    currentIndex: {
+      type: Number,
+      value: 0,
+    },
+  },
+  data: {
+    classPrefix: WD_PREFIX,
+    showMask: true,
+    scrollId: '',
+  },
+  methods: {
+    onItemClick: function (e) {
+      if (!e.currentTarget.dataset.item.isDisabled) {
+        this.triggerEvent('onCurrent', +e.currentTarget.dataset.value);
+        // this.triggerEvent('change', e.currentTarget.dataset.item?.value);
+      }
+    },
+  },
+  observers: {
+    currentIndex: function (currentIndex) {
+      this.setData({ scrollId: `cell-${currentIndex}` });
+    },
+  },
+});

package/components/wd-tabs/index.json

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

package/components/wd-tabs/index.wxml

@@ -0,0 +1,34 @@
+<view id="{{id}}" style="{{style}}" class="{{classPrefix + '-tabs-root'}} {{classPrefix + '-tabs-h5-root'}} {{classPrefix + '-tabs-mp-root'}} {{direction==='vertical' ? 'wd-tabs--vertical' : ''}} {{className}}">
+  <view class="{{classPrefix + '-tabs__header'}}">
+    <view class="{{classPrefix + '-tabs__header-item-wrap' }}">
+      <view class="{{classPrefix + '-tabs__header-item-content'}}">
+        <scroll-view scroll-x="true" scroll-into-view="{{scrollId}}" class="{{classPrefix + '-tabs__scroll'}}" enable-flex="true" wx:if="{{direction!=='vertical'}}">
+          <view wx:for="{{list}}" class="{{classPrefix + '-tabs__item'}} {{item.selected?'is-selected':''}} {{item.isDisabled?'is-disabled':''}}" wx:for-index="index" wx:for-item="item" wx:key="index" id="{{'cell-'+index}}" bindtap="onItemClick" data-value="{{index}}" data-item="{{item}}">
+            <view wx-if="{{item.iconType !== 'none' && item.iconPosition === 'prefix'}}" class="{{classPrefix + '-tabs__item-icon'}}">
+              <wd-icon type="{{item.iconType}}" name="{{ item.iconType === 'inner' ? item.innerIcon : item.outerImage}}" src="{{item.iconType === 'custom' ? item.outerImage : ''}}" size="xs" />
+            </view>
+            <view class="{{classPrefix + '-tabs__item-text'}}"> {{item.label}} </view>
+            <view wx-if="{{item.iconType !== 'none' && item.iconPosition === 'suffix'}}" class="{{classPrefix + '-tabs__item-icon'}}">
+              <wd-icon type="{{item.iconType}}" name="{{ item.iconType === 'inner' ? item.innerIcon : item.outerImage}}" src="{{item.iconType === 'custom' ? item.outerImage : ''}}" size="xs" />
+            </view>
+          </view>
+        </scroll-view>
+        <view wx:if="{{direction==='vertical'}}" wx:for="{{list}}" class="{{classPrefix + '-tabs__item'}} {{item.selected?'is-selected':''}} {{item.isDisabled?'is-disabled':''}}" wx:for-index="index" wx:for-item="item" wx:key="index" id="{{'cell-'+index}}" bindtap="onItemClick" data-value="{{index}}" data-item="{{item}}">
+          <view wx-if="{{item.iconType !== 'none' && item.iconPosition === 'prefix'}}" class="{{classPrefix + '-tabs__item-icon'}}">
+            <wd-icon type="{{item.iconType}}" name="{{ item.iconType === 'inner' ? item.innerIcon : item.outerImage}}" src="{{item.iconType === 'custom' ? item.outerImage : ''}}" size="xs" />
+          </view>
+          <view class="{{classPrefix + '-tabs__item-text'}}"> {{item.label}} </view>
+          <view wx-if="{{item.iconType !== 'none' && item.iconPosition === 'suffix'}}" class="{{classPrefix + '-tabs__item-icon'}}">
+            <wd-icon type="{{item.iconType}}" name="{{ item.iconType === 'inner' ? item.innerIcon : item.outerImage}}" src="{{item.iconType === 'custom' ? item.outerImage : ''}}" size="xs" />
+          </view>
+        </view>
+        <view wx:if="{{showMask && direction!=='vertical'}}" class="{{classPrefix + '-tabs__header-item-mask'}}"></view>
+      </view>
+    </view>
+  </view>
+  <view class="{{classPrefix + '-tabs__body' }}">
+    <view class="{{classPrefix + '-tabs__body-content' }}">
+      <slot></slot>
+    </view>
+  </view>
+</view>

package/components/wd-tabs/index.wxss

@@ -0,0 +1,8 @@
+@import '../../style/wd-design.wxss';
+@import './wd-tabs.wxss';
+
+.wd-tabs-mp-root .wd-tabs__scroll {
+  width: 100%;
+  display: flex;
+  height: 50px;
+}

package/components/wd-tabs/wd-tabs.wxss

@@ -0,0 +1,265 @@
+.wd-tabs-root {
+  --wd-tabs-border-color: var(--wd-color-gray-3);
+  --wd-tabs-bg: transparent;
+  --wd-tabs-heder-bg: transparent;
+  --wd-tabs-heder-item-pd: 0.8125rem calc(var(--wd-space-base) * 4);
+  --wd-tabs-heder-item-size: var(--wd-font-size-default);
+  --wd-tabs-heder-item-size-selected: var(--wd-font-size-default);
+  --wd-tabs-heder-item-size-disabled: var(--wd-font-size-default);
+  --wd-tabs-heder-item-color: var(--wd-font-gray-2);
+  --wd-tabs-heder-item-color-selected: var(--wd-color-brand);
+  --wd-tabs-heder-item-color-disabled: var(--wd-color-text-disabled);
+  --wd-tabs-vertical-heder-width: 12.5rem;
+  --wd-tabs-vertical-heder-bg: #f8f8f8;
+  --wd-tabs-vertical-heder-item-size: var(--wd-font-size-default);
+  --wd-tabs-vertical-heder-item-size-selected: var(--wd-font-size-default);
+  --wd-tabs-vertical-heder-item-size-disabled: var(--wd-font-size-default);
+  --wd-tabs-vertical-heder-item-pd: calc(var(--wd-space-base) * 3)
+    calc(var(--wd-space-base) * 6);
+  --wd-tabs-vertical-heder-item-color: var(--wd-font-gray-2);
+  --wd-tabs-vertical-heder-item-color-selected: var(--wd-color-brand);
+  --wd-tabs-vertical-heder-item-bg-selected: var(--wd-white);
+  --wd-tabs-vertical-heder-item-color-disabled: var(--wd-color-text-disabled);
+  --wd-tabs-body-bg: transparent;
+  --wd-tabs-body-pd: calc(var(--wd-space-base) * 4) 0 0 0;
+  --wd-tabs-body-vertical-pd: calc(var(--wd-space-base) * 4);
+}
+
+.wd-tabs-h5-root {
+  --wd-tabs-vertical-heder-width: 6.375rem;
+  --wd-tabs-heder-item-color: var(--wd-color-text-default);
+  --wd-tabs-heder-item-color-selected: var(--wd-color-brand);
+  --wd-tabs-body-pd: calc(var(--wd-space-base) * 4)
+    calc(var(--wd-space-base) * 4) 0 calc(var(--wd-space-base) * 4);
+  --wd-tabs-body-vertical-pd: calc(var(--wd-space-base) * 4);
+  --wd-tabs-vertical-heder-item-pd: calc(var(--wd-space-base) * 4);
+}
+
+.wd-tabs-root {
+  color: var(--wd-color-text-default);
+  font-size: var(--wd-font-size-default);
+  line-height: var(--wd-font-line-height-default);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  width: 100%;
+  background: var(--wd-tabs-bg);
+}
+.wd-tabs__header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-bottom: 1px solid var(--wd-tabs-border-color);
+  background: var(--wd-tabs-heder-bg);
+}
+.wd-tabs__header-wrapper {
+  width: 100%;
+}
+.wd-tabs__header-item-wrap {
+  overflow: hidden;
+  display: flex;
+  width: 100%;
+}
+.wd-tabs__header-item-content {
+  display: flex;
+  flex: none;
+}
+.wd-tabs__header-nav-left {
+  cursor: pointer;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 0 calc(var(--wd-space-base) * 3);
+  background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48ZyBpZD0iY2hldnJvbi1yaWdodC5kb3VibGUiPjxwYXRoIGlkPSJVbmlvbiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy4wNDEgMTEuNTQwNUwxMi4xMjE4IDEyLjQ1OTdMOC4zNjkyNiA4LjcwNzJDNy45Nzg3NCA4LjMxNjY4IDcuOTc4NzQgNy42ODM1MSA4LjM2OTI2IDcuMjkyOTlMMTIuMTIxOCAzLjU0MDQ4TDEzLjA0MSA0LjQ1OTcyTDkuNTAwNjQgOC4wMDAxTDEzLjA0MSAxMS41NDA1Wk04LjA0MTA4IDExLjU0MDVMNy4xMjE4NSAxMi40NTk3TDMuMzY5MzMgOC43MDcyQzIuOTc4ODEgOC4zMTY2OCAyLjk3ODgxIDcuNjgzNTEgMy4zNjkzMyA3LjI5Mjk5TDcuMTIxODUgMy41NDA0OEw4LjA0MTA4IDQuNDU5NzJMNC41MDA3IDguMDAwMUw4LjA0MTA4IDExLjU0MDVaIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjYiLz48L2c+PC9zdmc+);
+}
+.wd-tabs__header-nav-right {
+  cursor: pointer;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 0 calc(var(--wd-space-base) * 3);
+  background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48ZyBpZD0iY2hldnJvbi1yaWdodC5kb3VibGUiPjxwYXRoIGlkPSJVbmlvbiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjk1ODk4IDExLjU0MDVMMy44NzgyMiAxMi40NTk3TDcuNjMwNzQgOC43MDcyQzguMDIxMjYgOC4zMTY2OCA4LjAyMTI2IDcuNjgzNTEgNy42MzA3NCA3LjI5Mjk5TDMuODc4MjIgMy41NDA0OEwyLjk1ODk4IDQuNDU5NzJMNi40OTkzNiA4LjAwMDFMMi45NTg5OCAxMS41NDA1Wk03Ljk1ODkyIDExLjU0MDVMOC44NzgxNSAxMi40NTk3TDEyLjYzMDcgOC43MDcyQzEzLjAyMTIgOC4zMTY2OCAxMy4wMjEyIDcuNjgzNTEgMTIuNjMwNyA3LjI5Mjk5TDguODc4MTUgMy41NDA0OEw3Ljk1ODkyIDQuNDU5NzJMMTEuNDk5MyA4LjAwMDFMNy45NTg5MiAxMS41NDA1WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC42Ii8+PC9nPjwvc3ZnPg==);
+}
+.wd-tabs__item {
+  flex: none;
+  display: flex;
+  align-items: center;
+  padding: var(--wd-tabs-heder-item-pd);
+  position: relative;
+  color: var(--wd-tabs-heder-item-color);
+  font-size: var(--wd-tabs-heder-item-size);
+  cursor: pointer;
+}
+.wd-tabs__item-icon {
+  display: flex;
+  align-items: center;
+  margin-right: calc(var(--wd-space-base) * 2);
+}
+.wd-tabs__item::after {
+  content: "";
+  position: absolute;
+  height: 2px;
+  width: 100%;
+  background-color: var(--wd-tabs-heder-item-color-selected);
+  bottom: 0;
+  left: 0;
+  display: none;
+}
+.wd-tabs__item:not(.is-disabled):hover::after {
+  display: block;
+}
+.wd-tabs__item:not(.is-disabled).is-selected {
+  font-size: var(--wd-tabs-heder-item-size-selected);
+  color: var(--wd-tabs-heder-item-color-selected);
+}
+.wd-tabs__item:not(.is-disabled).is-selected::after {
+  display: block;
+}
+.wd-tabs__item.is-disabled {
+  cursor: not-allowed;
+  font-size: var(--wd-tabs-heder-item-size-disabled);
+  color: var(--wd-tabs-heder-item-color-disabled);
+}
+.wd-tabs__item.is-disabled::after {
+  display: none;
+}
+.wd-tabs__body {
+  width: 100%;
+  background-color: var(--wd-tabs-body-bg);
+}
+.wd-tabs__body-content {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  flex-direction: column;
+}
+.wd-tabs__body-content.is-not-content {
+  height: 64px;
+}
+.wd-tabs--vertical.wd-tabs-root {
+  display: flex;
+  height: 100vh;
+}
+.wd-tabs--vertical .wd-tabs__header {
+  width: var(--wd-tabs-vertical-heder-width);
+  flex: none;
+  flex-direction: column;
+  border-bottom: none;
+  border-right: 1px solid var(--wd-tabs-border-color);
+  background: var(--wd-tabs-vertical-heder-bg);
+}
+.wd-tabs--vertical .wd-tabs__header-item-content {
+  flex-direction: column;
+  overflow-y: auto;
+  width: 100%;
+}
+.wd-tabs--vertical .wd-tabs__header-item-content::-webkit-scrollbar {
+  display: none;
+}
+.wd-tabs--vertical .wd-tabs__item {
+  padding: var(--wd-tabs-vertical-heder-item-pd);
+  font-size: var(--wd-tabs-vertical-heder-item-size);
+  line-height: calc(var(--wd-space-base) * 6);
+  color: var(--wd-tabs-vertical-heder-item-color);
+  cursor: pointer;
+}
+.wd-tabs--vertical .wd-tabs__item-icon {
+  display: flex;
+  align-items: center;
+  margin-right: calc(var(--wd-space-base) * 2);
+}
+.wd-tabs--vertical .wd-tabs__item-text {
+  word-break: break-all;
+}
+.wd-tabs--vertical .wd-tabs__item::after {
+  width: 2px;
+  height: 100%;
+  background-color: var(--wd-tabs-vertical-heder-item-color-selected);
+  top: 0;
+  left: 0;
+  display: none;
+}
+.wd-tabs--vertical .wd-tabs__item:not(.is-disabled):hover::after {
+  display: block;
+}
+.wd-tabs--vertical .wd-tabs__item.is-disabled {
+  cursor: not-allowed;
+  font-size: var(--wd-tabs-vertical-heder-item-size-disabled);
+  color: var(--wd-tabs-vertical-heder-item-color-disabled);
+}
+.wd-tabs--vertical .wd-tabs__item.is-disabled::after {
+  display: none;
+}
+.wd-tabs--vertical .wd-tabs__item:not(.is-disabled).is-selected {
+  font-size: var(--wd-tabs-vertical-heder-item-size-selected);
+  color: var(--wd-tabs-vertical-heder-item-color-selected);
+  background-color: var(--wd-tabs-vertical-heder-item-bg-selected);
+}
+.wd-tabs--vertical .wd-tabs__item:not(.is-disabled).is-selected::after {
+  display: block;
+}
+.wd-tabs--vertical .wd-tabs__body {
+  display: flex;
+  height: 100%;
+  background-color: var(--wd-tabs-body-bg);
+}
+.wd-tabs--vertical .wd-tabs__body-content.is-not-content {
+  height: 100%;
+}
+.wd-tabs-h5-root .wd-tabs__header-item-wrap {
+  position: relative;
+}
+.wd-tabs-h5-root .wd-tabs__header-item-content {
+  overflow-x: auto;
+  width: 100%;
+}
+.wd-tabs-h5-root .wd-tabs__header-item-content::-webkit-scrollbar {
+  display: none;
+}
+.wd-tabs-h5-root .wd-tabs__header-item-mask {
+  pointer-events: none;
+  position: absolute;
+  width: 50px;
+  right: -1px;
+  bottom: 0px;
+  height: 47px;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0.1), #fff);
+}
+.wd-tabs-h5-root .wd-tabs__item {
+  text-align: center;
+  justify-content: center;
+  flex-grow: 1;
+}
+.wd-tabs-h5-root .wd-tabs__item-icon {
+  margin-right: var(--wd-space-base);
+}
+.wd-tabs-h5-root .wd-tabs__item::after {
+  height: 3px;
+  width: 16px;
+  left: auto;
+}
+.wd-tabs-h5-root .wd-tabs__item:not(.is-disabled).is-selected {
+  font-weight: 600;
+}
+.wd-tabs-h5-root.wd-tabs--vertical .wd-tabs__item {
+  justify-content: flex-start;
+}
+.wd-tabs-h5-root.wd-tabs--vertical .wd-tabs__item-text {
+  word-break: break-all;
+  text-align: left;
+}
+.wd-tabs-h5-root.wd-tabs--vertical .wd-tabs__item::after {
+  width: 3px;
+  height: 16px;
+  top: auto;
+  bottom: auto;
+  left: 0;
+}
+.wd-tabs-h5-root.wd-tabs--vertical .wd-tabs__item:not(.is-disabled):hover::after {
+  display: block;
+}
+.wd-tabs-h5-root.wd-tabs--vertical .wd-tabs__item:not(.is-disabled).is-selected::after {
+  display: block;
+}