yuang-framework-ui-pc 1.1.45 → 1.1.47

package/es/ele-basic-select/index.js

@@ -0,0 +1,349 @@
+import { defineComponent, ref, computed, watch, resolveComponent, createBlock, openBlock, withCtx, createElementVNode, normalizeStyle, normalizeClass, createVNode, createElementBlock, createCommentVNode, withKeys, createSlots, withModifiers, renderSlot, Fragment, renderList, createTextVNode, toDisplayString } from "vue";
+import { ElTag, ElIcon, ElInput } from "element-plus";
+import { ArrowDown, CloseCircleFilled } from "../icons";
+import EleTooltip from "../ele-tooltip/index";
+import ReceiverView from "../ele-config-provider/components/receiver-view";
+import { basicSelectEmits, basicSelectProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleBasicSelect",
+  components: {
+    ElInput,
+    ElIcon,
+    ElTag,
+    CloseCircleFilled,
+    ArrowDown,
+    EleTooltip,
+    ReceiverView
+  },
+  props: basicSelectProps,
+  emits: basicSelectEmits,
+  setup(props, { emit }) {
+    const tooltipRef = ref(null);
+    const inputRef = ref(null);
+    const searchRef = ref(null);
+    const inputValue = ref(
+      props.multiple || !props.selectedLabel ? "" : props.selectedLabel
+    );
+    const searchValue = ref("");
+    const isEmpty = computed(() => {
+      if (!props.multiple) {
+        return props.value == null || props.value === "";
+      }
+      return !Array.isArray(props.value) || !props.value.length;
+    });
+    const inputPlaceholder = computed(() => {
+      const str = isEmpty.value && props.placeholder ? props.placeholder : "";
+      if (!props.filterable || !props.visible || props.multiple) {
+        return str;
+      }
+      return props.selectedLabel || str;
+    });
+    const isCollapse = computed(() => {
+      return typeof props.maxTagCount === "number" && props.selected != null && props.selected.length > props.maxTagCount;
+    });
+    const currentTags = computed(() => {
+      if (!isCollapse.value || isEmpty.value || props.selected == null) {
+        return props.selected || [];
+      }
+      return props.selected.slice(0, props.maxTagCount);
+    });
+    const omittedTags = computed(() => {
+      if (!isCollapse.value || isEmpty.value || props.selected == null) {
+        return [];
+      }
+      return props.selected.slice(props.maxTagCount);
+    });
+    const omittedSize = computed(() => {
+      if (isEmpty.value || props.maxTagCount == null || props.maxTagCount < 0) {
+        return 0;
+      }
+      return props.value.length - props.maxTagCount;
+    });
+    const updatePopper = () => {
+      tooltipRef.value && tooltipRef.value.updatePopper();
+    };
+    const focusSearchInput = (e) => {
+      if (props.filterable && props.visible) {
+        if (e != null && e.target != null) {
+          const target = e.target;
+          if (target.nodeName && target.nodeName.toLowerCase() === "input") {
+            return;
+          }
+        }
+        const input = props.multiple ? searchRef.value : inputRef.value;
+        input && input.focus();
+      }
+    };
+    const updateSearchValue = (modelValue) => {
+      if (props.filterable && props.visible && props.multiple) {
+        searchValue.value = modelValue;
+        emit("filterChange", modelValue);
+      }
+    };
+    const updateInputValue = (modelValue) => {
+      if (props.filterable && props.visible && !props.multiple) {
+        inputValue.value = modelValue;
+        emit("filterChange", modelValue);
+      }
+    };
+    const updateVisible = (visible) => {
+      if (!props.disabled || !visible) {
+        emit("update:visible", visible);
+      }
+    };
+    const handleTagClose = (item) => {
+      if (!props.disabled) {
+        emit("removeTag", item);
+      }
+    };
+    const handleClear = () => {
+      emit("clear");
+    };
+    const handleInputClick = (e) => {
+      if (props.automaticDropdown && props.visible) {
+        e.stopPropagation();
+      }
+    };
+    const handleInputFocus = (e) => {
+      if (props.automaticDropdown && !props.visible) {
+        updateVisible(true);
+      }
+      emit("focus", e);
+    };
+    const handleInputBlur = (e) => {
+      emit("blur", e);
+    };
+    const handleInputEsc = (e) => {
+      if (!props.disabled && props.visible) {
+        e.stopPropagation();
+        e.preventDefault();
+        updateVisible(false);
+      }
+    };
+    watch(
+      () => props.selectedLabel,
+      (label) => {
+        if (!props.filterable || !props.visible) {
+          inputValue.value = props.multiple || !label ? "" : label;
+        }
+      }
+    );
+    watch(
+      () => props.visible,
+      (visible) => {
+        if (props.filterable) {
+          if (props.multiple) {
+            searchValue.value = "";
+            if (visible) {
+              focusSearchInput();
+            }
+          } else {
+            const label = props.selectedLabel;
+            inputValue.value = visible || !label ? "" : label;
+          }
+        }
+      }
+    );
+    return {
+      tooltipRef,
+      inputRef,
+      searchRef,
+      inputValue,
+      searchValue,
+      isEmpty,
+      inputPlaceholder,
+      isCollapse,
+      currentTags,
+      omittedTags,
+      omittedSize,
+      updatePopper,
+      focusSearchInput,
+      updateSearchValue,
+      updateInputValue,
+      updateVisible,
+      handleTagClose,
+      handleClear,
+      handleInputClick,
+      handleInputFocus,
+      handleInputBlur,
+      handleInputEsc
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CloseCircleFilled = resolveComponent("CloseCircleFilled");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  const _component_ArrowDown = resolveComponent("ArrowDown");
+  const _component_ElInput = resolveComponent("ElInput");
+  const _component_ElTag = resolveComponent("ElTag");
+  const _component_ReceiverView = resolveComponent("ReceiverView");
+  const _component_EleTooltip = resolveComponent("EleTooltip");
+  return openBlock(), createBlock(_component_EleTooltip, {
+    ref: "tooltipRef",
+    trigger: "click",
+    visible: _ctx.visible,
+    disabled: _ctx.disabled,
+    placement: _ctx.placement,
+    teleported: _ctx.teleported,
+    width: _ctx.popperWidth,
+    popperClass: _ctx.popperClass,
+    popperOptions: _ctx.popperOptions,
+    transition: _ctx.transition,
+    gpuAcceleration: _ctx.transition === "el-fade-in-linear",
+    effect: "light",
+    persistent: true,
+    isPopover: true,
+    triggerKeys: [],
+    "onUpdate:visible": _ctx.updateVisible
+  }, {
+    body: withCtx(() => [
+      _ctx.persistent || _ctx.visible ? (openBlock(), createBlock(_component_ReceiverView, {
+        key: 0,
+        class: "ele-popover-body",
+        onClick: _ctx.focusSearchInput
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["onClick"])) : createCommentVNode("", true)
+    ]),
+    default: withCtx(() => [
+      createElementVNode("div", {
+        class: normalizeClass([
+          "ele-select",
+          _ctx.selectClass,
+          { "is-empty": _ctx.isEmpty },
+          { "is-multiple": _ctx.multiple },
+          { "is-disabled": _ctx.disabled },
+          { "is-filterable": _ctx.filterable },
+          { "is-small": _ctx.size === "small" },
+          { "is-large": _ctx.size === "large" },
+          { "is-opened": _ctx.visible }
+        ]),
+        style: normalizeStyle(_ctx.selectStyle)
+      }, [
+        createVNode(_component_ElInput, {
+          ref: "inputRef",
+          size: _ctx.size,
+          disabled: _ctx.disabled,
+          validateEvent: false,
+          modelValue: _ctx.inputValue,
+          placeholder: _ctx.filterable && _ctx.multiple && _ctx.visible ? "" : _ctx.inputPlaceholder,
+          readonly: !_ctx.filterable || !_ctx.visible || _ctx.multiple,
+          style: normalizeStyle(_ctx.inputStyle),
+          "onUpdate:modelValue": _ctx.updateInputValue,
+          onClick: _ctx.handleInputClick,
+          onFocus: _ctx.handleInputFocus,
+          onBlur: _ctx.handleInputBlur,
+          onKeydown: withKeys(_ctx.handleInputEsc, ["esc"])
+        }, createSlots({
+          suffix: withCtx(() => [
+            _ctx.clearable && !_ctx.disabled && !_ctx.isEmpty ? (openBlock(), createBlock(_component_ElIcon, {
+              key: 0,
+              class: "ele-select-clear el-input__icon",
+              onClick: withModifiers(_ctx.handleClear, ["stop"])
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "clearIcon", {}, () => [
+                  createVNode(_component_CloseCircleFilled)
+                ])
+              ]),
+              _: 3
+            }, 8, ["onClick"])) : createCommentVNode("", true),
+            createVNode(_component_ElIcon, { class: "ele-select-arrow el-input__icon" }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "suffixIcon", { visible: _ctx.visible }, () => [
+                  createVNode(_component_ArrowDown)
+                ])
+              ]),
+              _: 3
+            })
+          ]),
+          _: 2
+        }, [
+          _ctx.$slots.prefix ? {
+            name: "prefix",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "prefix")
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["size", "disabled", "modelValue", "placeholder", "readonly", "style", "onUpdate:modelValue", "onClick", "onFocus", "onBlur", "onKeydown"]),
+        _ctx.multiple ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "ele-select-tags",
+          style: normalizeStyle(_ctx.selectTagsStyle)
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.currentTags, (item, index2) => {
+            return openBlock(), createBlock(_component_ElTag, {
+              key: index2 + "-" + item.value,
+              size: _ctx.size,
+              type: _ctx.tagType,
+              closable: !_ctx.disabled,
+              disableTransitions: true,
+              title: item.label,
+              onClose: ($event) => _ctx.handleTagClose(item)
+            }, {
+              default: withCtx(() => [
+                item.label && _ctx.maxTagTextLength && item.label.length > _ctx.maxTagTextLength ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                  createTextVNode(toDisplayString(item.label.slice(0, _ctx.maxTagTextLength)) + "... ", 1)
+                ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  createTextVNode(toDisplayString(item.label), 1)
+                ], 64))
+              ]),
+              _: 2
+            }, 1032, ["size", "type", "closable", "title", "onClose"]);
+          }), 128)),
+          _ctx.isCollapse ? (openBlock(), createBlock(_component_ElTag, {
+            key: 0,
+            size: _ctx.size,
+            type: _ctx.tagType,
+            disableTransitions: true
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "maxTagPlaceholder", {
+                omittedValues: _ctx.omittedTags,
+                omittedSize: _ctx.omittedSize
+              }, () => [
+                createTextVNode(" +" + toDisplayString(_ctx.omittedSize), 1)
+              ])
+            ]),
+            _: 3
+          }, 8, ["size", "type"])) : createCommentVNode("", true),
+          !_ctx.disabled && _ctx.filterable ? (openBlock(), createBlock(_component_ElTag, {
+            key: 1,
+            size: _ctx.size,
+            disableTransitions: true,
+            class: "ele-select-search"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_ElInput, {
+                ref: "searchRef",
+                size: _ctx.size,
+                validateEvent: false,
+                modelValue: _ctx.searchValue,
+                placeholder: _ctx.inputPlaceholder,
+                "onUpdate:modelValue": _ctx.updateSearchValue,
+                onKeydown: withKeys(_ctx.handleInputEsc, ["esc"])
+              }, null, 8, ["size", "modelValue", "placeholder", "onUpdate:modelValue", "onKeydown"])
+            ]),
+            _: 1
+          }, 8, ["size"])) : createCommentVNode("", true)
+        ], 4)) : createCommentVNode("", true)
+      ], 6)
+    ]),
+    _: 3
+  }, 8, ["visible", "disabled", "placement", "teleported", "width", "popperClass", "popperOptions", "transition", "gpuAcceleration", "onUpdate:visible"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-basic-select/props.d.ts

@@ -0,0 +1,85 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { ElInputProps, ElTagProps } from '../ele-app/el';
+import { EleTooltipProps } from '../ele-app/plus';
+import { SelectValue, SelectedItem } from './types';
+
+/**
+ * 属性
+ */
+export declare const basicSelectProps: {
+    /** 选中值 */
+    value: {
+        type: PropType<SelectValue>;
+        default: () => null;
+    };
+    /** 是否多选 */
+    multiple: BooleanConstructor;
+    /** 是否禁用 */
+    disabled: BooleanConstructor;
+    /** 尺寸 */
+    size: PropType<ElInputProps["size"]>;
+    /** 是否支持清除 */
+    clearable: BooleanConstructor;
+    /** 无选中时提示文本 */
+    placeholder: StringConstructor;
+    /** 单选选中展示文本 */
+    selectedLabel: StringConstructor;
+    /** 多选选中数据 */
+    selected: PropType<SelectedItem[]>;
+    /** 多选标签最大显示数量 */
+    maxTagCount: NumberConstructor;
+    /** 多选标签最大显示文本长度 */
+    maxTagTextLength: NumberConstructor;
+    /** 多选标签类型 */
+    tagType: PropType<ElTagProps["type"]>;
+    /** 是否在输入框获得焦点后自动弹出选项菜单 */
+    automaticDropdown: BooleanConstructor;
+    /** 是否可以筛选 */
+    filterable: BooleanConstructor;
+    /** 下拉框是否显示 */
+    visible: BooleanConstructor;
+    /** 是否将下拉框插入 body */
+    teleported: BooleanConstructor;
+    /** 始终渲染下拉框 */
+    persistent: BooleanConstructor;
+    /** 下拉框位置 */
+    placement: PropType<EleTooltipProps["placement"]>;
+    /** 下拉框渐变动画 */
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** popper.js 参数 */
+    popperOptions: PropType<EleTooltipProps["popperOptions"]>;
+    /** 下拉框类名 */
+    popperClass: StringConstructor;
+    /** 下拉框宽度 */
+    popperWidth: (NumberConstructor | StringConstructor)[];
+    /** 自定义类名 */
+    selectClass: StringConstructor;
+    /** 自定义样式 */
+    selectStyle: PropType<StyleValue>;
+    /** 自定义输入框样式 */
+    inputStyle: PropType<StyleValue>;
+    /** 自定义多选标签容器样式 */
+    selectTagsStyle: PropType<StyleValue>;
+};
+export type BasicSelectProps = ExtractPropTypes<typeof basicSelectProps>;
+/**
+ * 事件
+ */
+export declare const basicSelectEmits: {
+    /** 更新下拉框显示状态 */
+    'update:visible': (_visible: boolean) => boolean;
+    /** 多选标签移除事件 */
+    removeTag: (_item: SelectedItem) => boolean;
+    /** 清空事件 */
+    clear: () => boolean;
+    /** 获取焦点事件 */
+    focus: (_e: FocusEvent) => boolean;
+    /** 失去焦点事件 */
+    blur: (_e: FocusEvent) => boolean;
+    /** 筛选输入框值改变事件 */
+    filterChange: (_value: string) => boolean;
+};

package/es/ele-basic-select/props.js

@@ -0,0 +1,78 @@
+const basicSelectProps = {
+  /** 选中值 */
+  value: {
+    type: [String, Number, Boolean, Array],
+    default: () => {
+      return null;
+    }
+  },
+  /** 是否多选 */
+  multiple: Boolean,
+  /** 是否禁用 */
+  disabled: Boolean,
+  /** 尺寸 */
+  size: String,
+  /** 是否支持清除 */
+  clearable: Boolean,
+  /** 无选中时提示文本 */
+  placeholder: String,
+  /** 单选选中展示文本 */
+  selectedLabel: String,
+  /** 多选选中数据 */
+  selected: Array,
+  /** 多选标签最大显示数量 */
+  maxTagCount: Number,
+  /** 多选标签最大显示文本长度 */
+  maxTagTextLength: Number,
+  /** 多选标签类型 */
+  tagType: String,
+  /** 是否在输入框获得焦点后自动弹出选项菜单 */
+  automaticDropdown: Boolean,
+  /** 是否可以筛选 */
+  filterable: Boolean,
+  /** 下拉框是否显示 */
+  visible: Boolean,
+  /** 是否将下拉框插入 body */
+  teleported: Boolean,
+  /** 始终渲染下拉框 */
+  persistent: Boolean,
+  /** 下拉框位置 */
+  placement: String,
+  /** 下拉框渐变动画 */
+  transition: {
+    type: String,
+    default: "el-fade-in-linear"
+  },
+  /** popper.js 参数 */
+  popperOptions: Object,
+  /** 下拉框类名 */
+  popperClass: String,
+  /** 下拉框宽度 */
+  popperWidth: [Number, String],
+  /** 自定义类名 */
+  selectClass: String,
+  /** 自定义样式 */
+  selectStyle: Object,
+  /** 自定义输入框样式 */
+  inputStyle: Object,
+  /** 自定义多选标签容器样式 */
+  selectTagsStyle: Object
+};
+const basicSelectEmits = {
+  /** 更新下拉框显示状态 */
+  "update:visible": (_visible) => true,
+  /** 多选标签移除事件 */
+  removeTag: (_item) => true,
+  /** 清空事件 */
+  clear: () => true,
+  /** 获取焦点事件 */
+  focus: (_e) => true,
+  /** 失去焦点事件 */
+  blur: (_e) => true,
+  /** 筛选输入框值改变事件 */
+  filterChange: (_value) => true
+};
+export {
+  basicSelectEmits,
+  basicSelectProps
+};

package/es/ele-basic-select/style/css-var.scss

@@ -0,0 +1,9 @@
+@use '../../style/util.scss' as *;
+
+/* 通用下拉选择主题变量 */
+@mixin set-basic-select-var($var) {
+  .ele-select {
+    @include set-ele-var('input', $var);
+    @include set-ele-var('input-error', $var);
+  }
+}

package/es/ele-basic-select/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-basic-select/style/index.js

@@ -0,0 +1,5 @@
+import "element-plus/es/components/input/style/index";
+import "element-plus/es/components/icon/style/index";
+import "element-plus/es/components/tag/style/index";
+import "../../ele-tooltip/style/index";
+import "./index.scss";

package/es/ele-bottom-bar/index.d.ts

@@ -0,0 +1,15 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    bodyStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    extraStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    teleported: BooleanConstructor;
+}>, {
+    isActivated: import('vue').Ref<boolean, boolean>;
+    teleportTo: import('vue').ComputedRef<HTMLElement | null | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    bodyStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    extraStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    teleported: BooleanConstructor;
+}>> & Readonly<{}>, {
+    teleported: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/ele-bottom-bar/index.js

@@ -0,0 +1,56 @@
+import { defineComponent, ref, computed, onActivated, onDeactivated, createBlock, openBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, renderSlot } from "vue";
+import { useLayoutState } from "../ele-pro-layout/util";
+import { bottomBarProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleBottomBar",
+  props: bottomBarProps,
+  setup() {
+    const layoutState = useLayoutState();
+    const isActivated = ref(true);
+    const teleportTo = computed(() => {
+      var _a;
+      return (_a = layoutState.getBodyWrapperEl) == null ? void 0 : _a.call(layoutState);
+    });
+    onActivated(() => {
+      isActivated.value = true;
+    });
+    onDeactivated(() => {
+      isActivated.value = false;
+    });
+    return { isActivated, teleportTo };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(Teleport, {
+    to: _ctx.teleportTo,
+    disabled: !_ctx.teleported || !_ctx.teleportTo
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass(["ele-bottom-bar", { "is-deactivated": !_ctx.isActivated }])
+    }, [
+      createElementVNode("div", {
+        class: "ele-bottom-bar-body",
+        style: normalizeStyle(_ctx.bodyStyle)
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 4),
+      createElementVNode("div", {
+        class: "ele-bottom-bar-extra",
+        style: normalizeStyle(_ctx.extraStyle)
+      }, [
+        renderSlot(_ctx.$slots, "extra")
+      ], 4)
+    ], 2)
+  ], 8, ["to", "disabled"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-bottom-bar/props.d.ts

@@ -0,0 +1,15 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
+
+/**
+ * 属性
+ */
+export declare const bottomBarProps: {
+    /** 内容样式 */
+    bodyStyle: PropType<StyleValue>;
+    /** 右侧样式 */
+    extraStyle: PropType<StyleValue>;
+    /** 是否插入到布局的内容节点后 */
+    teleported: BooleanConstructor;
+};
+export type BottomBarProps = ExtractPropTypes<typeof bottomBarProps>;

package/es/ele-bottom-bar/props.js

@@ -0,0 +1,11 @@
+const bottomBarProps = {
+  /** 内容样式 */
+  bodyStyle: Object,
+  /** 右侧样式 */
+  extraStyle: Object,
+  /** 是否插入到布局的内容节点后 */
+  teleported: Boolean
+};
+export {
+  bottomBarProps
+};

package/es/ele-bottom-bar/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-bottom-bar/style/index.js

@@ -0,0 +1 @@
+import "./index.scss";

package/es/ele-bottom-bar/style/index.scss

@@ -0,0 +1,31 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-bottom-bar-var($ele);
+
+.ele-bottom-bar {
+  flex-shrink: 0;
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: eleVar('bottom-bar', 'padding');
+  background: eleVar('bottom-bar', 'bg');
+  box-shadow: eleVar('bottom-bar', 'shadow');
+  z-index: var(#{eleVarName('layout', 'index')}, 99);
+
+  .ele-bottom-bar-body {
+    flex: 1;
+    overflow: auto;
+  }
+
+  .ele-bottom-bar-extra {
+    flex-shrink: 0;
+  }
+
+  &.is-deactivated {
+    display: none;
+  }
+}