ele-admin-plus 1.2.0-beta.1 → 1.2.0-beta.2

package/es/ele-backtop/index.js

@@ -0,0 +1,104 @@
+import { defineComponent, ref, shallowRef, watch, onMounted, onBeforeUnmount, resolveComponent, openBlock, createBlock, Transition, withCtx, createElementBlock, normalizeStyle, renderSlot, createVNode, createCommentVNode } from "vue";
+import { ArrowUp } from "../icons";
+import { throttle } from "../utils/core";
+import { backtopProps, backtopEmits } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleBacktop",
+  components: { ArrowUp },
+  props: backtopProps,
+  emits: backtopEmits,
+  setup(props, { emit }) {
+    const visible = ref(false);
+    const targetEl = shallowRef(null);
+    const updateTarget = (el) => {
+      if (el !== targetEl.value && !(el == null && targetEl.value == null)) {
+        targetEl.value = !el || typeof el === "string" ? null : el;
+      }
+    };
+    const handleClick = (e) => {
+      if (targetEl.value) {
+        targetEl.value.scrollTo({ top: 0, behavior: "smooth" });
+      }
+      emit("click", e);
+    };
+    const handleScroll = () => {
+      if (targetEl.value != null && props.visibilityHeight != null) {
+        visible.value = targetEl.value.scrollTop >= props.visibilityHeight;
+      } else {
+        visible.value = false;
+      }
+    };
+    const scrollListener = throttle(handleScroll, 300, true);
+    const unbindEvent = () => {
+      if (targetEl.value != null) {
+        targetEl.value.removeEventListener("scroll", scrollListener);
+        targetEl.value = null;
+      }
+    };
+    const bindEvent = () => {
+      unbindEvent();
+      if (typeof props.target === "undefined") {
+        updateTarget(document.body);
+      } else if (typeof props.target === "string" && props.target) {
+        updateTarget(document.querySelector(props.target));
+      } else {
+        updateTarget(props.target);
+      }
+      handleScroll();
+      if (targetEl.value) {
+        targetEl.value.addEventListener("scroll", scrollListener);
+      }
+    };
+    watch(
+      () => props.target,
+      () => {
+        bindEvent();
+      }
+    );
+    onMounted(() => {
+      bindEvent();
+    });
+    onBeforeUnmount(() => {
+      unbindEvent();
+    });
+    return { visible, handleClick };
+  }
+});
+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_ArrowUp = resolveComponent("ArrowUp");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  return openBlock(), createBlock(Transition, { name: _ctx.transitionName }, {
+    default: withCtx(() => [
+      _ctx.visible ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "ele-backtop",
+        style: normalizeStyle({
+          bottom: typeof _ctx.bottom === "number" ? `${_ctx.bottom}px` : _ctx.bottom,
+          right: typeof _ctx.right === "number" ? `${_ctx.right}px` : _ctx.right
+        }),
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createVNode(_component_ElIcon, null, {
+            default: withCtx(() => [
+              createVNode(_component_ArrowUp)
+            ]),
+            _: 1
+          })
+        ])
+      ], 4)) : createCommentVNode("", true)
+    ]),
+    _: 3
+  }, 8, ["name"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-backtop/props.d.ts

@@ -0,0 +1,36 @@
+import { PropType, ExtractPropTypes } from 'vue';
+
+/**
+ * 属性
+ */
+export declare const backtopProps: {
+    /** 触发滚动的对象 */
+    target: PropType<string | HTMLElement>;
+    /** 滚动高度达到此参数值才出现 */
+    visibilityHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 距离页面底部距离 */
+    bottom: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** 距离页面右边距 */
+    right: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /** 过渡动画名称 */
+    transitionName: {
+        type: StringConstructor;
+        default: string;
+    };
+};
+export type BacktopProps = ExtractPropTypes<typeof backtopProps>;
+/**
+ * 事件
+ */
+export declare const backtopEmits: {
+    click: (_e: MouseEvent) => boolean;
+};

package/es/ele-backtop/props.js

@@ -0,0 +1,31 @@
+const backtopProps = {
+  /** 触发滚动的对象 */
+  target: [String, Object],
+  /** 滚动高度达到此参数值才出现 */
+  visibilityHeight: {
+    type: Number,
+    default: 200
+  },
+  /** 距离页面底部距离 */
+  bottom: {
+    type: [Number, String],
+    default: 60
+  },
+  /** 距离页面右边距 */
+  right: {
+    type: [Number, String],
+    default: 30
+  },
+  /** 过渡动画名称 */
+  transitionName: {
+    type: String,
+    default: "ele-backtop-fade"
+  }
+};
+const backtopEmits = {
+  click: (_e) => true
+};
+export {
+  backtopEmits,
+  backtopProps
+};

package/es/ele-backtop/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 返回顶部主题变量 */
+@mixin set-backtop-var($var) {
+  .ele-backtop {
+    @include set-ele-var('backtop', $var);
+  }
+}

package/es/ele-backtop/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-backtop/style/index.js

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

package/es/ele-backtop/style/index.scss

@@ -0,0 +1,34 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-backtop-var($ele);
+
+.ele-backtop {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  font-size: 18px;
+  color: eleVar('backtop', 'color');
+  background: eleVar('backtop', 'bg');
+  box-shadow: eleVar('backtop', 'shadow');
+  transition: (color $transition-base, background-color $transition-base);
+  position: fixed;
+  right: 40px;
+  bottom: 40px;
+  cursor: pointer;
+  z-index: 5;
+
+  & > .el-icon > .ele-arrow-up {
+    stroke-width: 5px;
+  }
+}
+
+.ele-backtop-fade-enter-from,
+.ele-backtop-fade-leave-active {
+  opacity: 0;
+}

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

@@ -1 +1 @@
-//
+

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

@@ -96,20 +96,20 @@ declare const _default: import('vue').DefineComponent<{
 }>> & {
     onFocus?: ((_e: FocusEvent) => any) | undefined;
     onBlur?: ((_e: FocusEvent) => any) | undefined;
-    "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
     onClear?: (() => any) | undefined;
     onRemoveTag?: ((_item: SelectedItem) => any) | undefined;
+    "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
     onFilterChange?: ((_value: string) => any) | undefined;
 }, {
     value: import('./types').SelectValue;
-    disabled: boolean;
     teleported: boolean;
     clearable: boolean;
-    persistent: boolean;
-    visible: boolean;
-    transition: string;
+    disabled: boolean;
     filterable: boolean;
     multiple: boolean;
+    visible: boolean;
+    transition: string;
+    persistent: boolean;
     automaticDropdown: boolean;
 }, {}>;
 export default _default;

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

@@ -0,0 +1 @@
+

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

@@ -1,5 +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';
+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-basic-select/style/index.scss

@@ -23,7 +23,7 @@
   & > .el-input > .el-input__wrapper {
     border: eleVar('input', 'border');
     background: eleVar('input', 'bg');
-    transition: all $ele-transition;
+    transition: all $transition-base;
     box-sizing: border-box;
     position: relative;
     box-shadow: none;
@@ -46,7 +46,7 @@
   & > .el-input > .el-input__wrapper .el-input__icon {
     color: eleVar('input', 'icon-color');
     font-size: eleVar('input', 'icon-size');
-    transition: all $ele-transition;
+    transition: all $transition-base;
   }
 
   & > .el-input .el-input__prefix-inner .el-input__icon {
@@ -83,7 +83,7 @@
   }
 
   .ele-select-arrow > svg > path {
-    transition: d $ele-transition;
+    transition: d $transition-base;
   }
 
   &.is-opened .ele-select-arrow > svg > path {

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

@@ -0,0 +1 @@
+

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

@@ -1 +1 @@
-import './index.scss';
+import "./index.scss";

package/es/ele-breadcrumb/index.d.ts

@@ -1,11 +1,14 @@
 import { ElBreadcrumbInstance } from '../ele-app/el';
 
 declare const _default: import('vue').DefineComponent<{
+    separator: {
+        type: import('vue').PropType<import('./types').BreadcrumbSeparator>;
+        default: string;
+    };
     items: {
         type: import('vue').PropType<import('./types').BreadcrumbItem[]>;
         required: boolean;
     };
-    separator: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "/", boolean>;
     separatorIcon: {
         readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>))[], unknown, unknown>>;
         readonly required: false;
@@ -14,12 +17,17 @@ declare const _default: import('vue').DefineComponent<{
     };
 }, {
     breadcrumbRef: import('vue').Ref<ElBreadcrumbInstance>;
+    breadcrumbSeparator: import('vue').ComputedRef<string | undefined>;
+    breadcrumbSeparatorIcon: import('vue').ComputedRef<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>))[], unknown, unknown> | undefined>;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    separator: {
+        type: import('vue').PropType<import('./types').BreadcrumbSeparator>;
+        default: string;
+    };
     items: {
         type: import('vue').PropType<import('./types').BreadcrumbItem[]>;
         required: boolean;
     };
-    separator: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "/", boolean>;
     separatorIcon: {
         readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>))[], unknown, unknown>>;
         readonly required: false;
@@ -27,6 +35,6 @@ declare const _default: import('vue').DefineComponent<{
         __epPropKey: true;
     };
 }>>, {
-    separator: string;
+    separator: import('./types').BreadcrumbSeparator;
 }, {}>;
 export default _default;

package/es/ele-breadcrumb/index.js

@@ -1,13 +1,34 @@
-import { defineComponent, ref, resolveComponent, openBlock, createBlock, withCtx, createElementBlock, Fragment, renderList, renderSlot, normalizeProps, mergeProps, resolveDynamicComponent, normalizeStyle, createCommentVNode, toDisplayString } from "vue";
+import { defineComponent, ref, computed, resolveComponent, openBlock, createBlock, withCtx, createElementBlock, Fragment, renderList, renderSlot, normalizeProps, mergeProps, resolveDynamicComponent, normalizeStyle, createCommentVNode, toDisplayString } from "vue";
 import { ElBreadcrumb, ElBreadcrumbItem, ElIcon } from "element-plus";
 import { breadcrumbProps } from "./props";
 const _sfc_main = defineComponent({
   name: "EleBreadcrumb",
   components: { ElBreadcrumb, ElBreadcrumbItem, ElIcon },
   props: breadcrumbProps,
-  setup(_props) {
+  setup(props) {
     const breadcrumbRef = ref(null);
-    return { breadcrumbRef };
+    const breadcrumbSeparator = computed(
+      () => {
+        if (typeof props.separator !== "string") {
+          return;
+        }
+        return props.separator;
+      }
+    );
+    const breadcrumbSeparatorIcon = computed(() => {
+      if (props.separatorIcon != null && props.separatorIcon !== "") {
+        return props.separatorIcon;
+      }
+      if (props.separator != null && typeof props.separator !== "string") {
+        return props.separator;
+      }
+      return props.separatorIcon;
+    });
+    return {
+      breadcrumbRef,
+      breadcrumbSeparator,
+      breadcrumbSeparatorIcon
+    };
   }
 });
 const _export_sfc = (sfc, props) => {
@@ -24,8 +45,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ElBreadcrumb = resolveComponent("ElBreadcrumb");
   return openBlock(), createBlock(_component_ElBreadcrumb, {
     ref: "breadcrumbRef",
-    separator: _ctx.separator,
-    separatorIcon: _ctx.separatorIcon,
+    separator: _ctx.breadcrumbSeparator,
+    separatorIcon: _ctx.breadcrumbSeparatorIcon,
     class: "ele-breadcrumb"
   }, {
     default: withCtx(() => [

package/es/ele-breadcrumb/props.d.ts

@@ -1,16 +1,19 @@
-import { BreadcrumbItem } from './types';
+import { BreadcrumbSeparator, BreadcrumbItem } from './types';
 import { PropType, ExtractPropTypes } from 'vue';
 
 /**
  * 属性
  */
 export declare const breadcrumbProps: {
+    separator: {
+        type: PropType<BreadcrumbSeparator>;
+        default: string;
+    };
     /** 面包屑数据 */
     items: {
         type: PropType<BreadcrumbItem[]>;
         required: boolean;
     };
-    separator: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "/", boolean>;
     separatorIcon: {
         readonly type: PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>))[], unknown, unknown>>;
         readonly required: false;

package/es/ele-breadcrumb/props.js

@@ -1,6 +1,10 @@
 import { breadcrumbProps as breadcrumbProps$1 } from "element-plus";
 const breadcrumbProps = {
   ...breadcrumbProps$1,
+  separator: {
+    type: [String, Object, Function],
+    default: "/"
+  },
   /** 面包屑数据 */
   items: {
     type: Array,

package/es/ele-breadcrumb/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-breadcrumb/style/index.js

@@ -1,3 +1,3 @@
-import 'element-plus/es/components/breadcrumb/style/index';
-import 'element-plus/es/components/breadcrumb-item/style/index';
-import './index.scss';
+import "element-plus/es/components/breadcrumb/style/index";
+import "element-plus/es/components/breadcrumb-item/style/index";
+import "./index.scss";

package/es/ele-breadcrumb/types.d.ts

@@ -1,9 +1,20 @@
 import type { Component } from 'vue';
 import type { StyleValue } from '../ele-app/types';
-import type { ElIconProps, ElBreadcrumbItemProps } from '../ele-app/el';
+import type {
+  ElIconProps,
+  ElBreadcrumbProps,
+  ElBreadcrumbItemProps
+} from '../ele-app/el';
 
 /**
- * 面包屑数据
+ * 面包屑导航分隔符
+ */
+export type BreadcrumbSeparator =
+  | ElBreadcrumbProps['separator']
+  | ElBreadcrumbProps['separatorIcon'];
+
+/**
+ * 面包屑导航数据
  */
 export interface BreadcrumbItem extends ElBreadcrumbItemProps {
   /** 循环的 key */

package/es/ele-card/index.d.ts

@@ -3,24 +3,43 @@ declare const _default: import('vue').DefineComponent<{
     footer: StringConstructor;
     bodyStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
     bodyClass: StringConstructor;
-    shadow: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "hover" | "always" | "never", unknown> | undefined>;
+    shadow: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "always" | "never" | "hover", unknown> | undefined>;
     bordered: BooleanConstructor;
     headerStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    titleStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    titleStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>; /** 是否折叠 */
     footerStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    collapsable: import('vue').PropType<boolean | "header">;
+    collapse: BooleanConstructor;
+    collapseIconStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
     flexTable: BooleanConstructor;
-}, unknown, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, {
+    isCollapse: import('vue').Ref<boolean>;
+    handleBeforeLeave: (el: HTMLElement) => void;
+    handleAfterLeave: (el: HTMLElement) => void;
+    handleEnter: (el: HTMLElement) => void;
+    handleAfterEnter: (el: HTMLElement) => void;
+    handleCollapseClick: () => void;
+    handleHeaderClick: () => void;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    collapseChange: (_collapse: boolean) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     header: StringConstructor;
     footer: StringConstructor;
     bodyStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
     bodyClass: StringConstructor;
-    shadow: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "hover" | "always" | "never", unknown> | undefined>;
+    shadow: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "always" | "never" | "hover", unknown> | undefined>;
     bordered: BooleanConstructor;
     headerStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    titleStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    titleStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>; /** 是否折叠 */
     footerStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    collapsable: import('vue').PropType<boolean | "header">;
+    collapse: BooleanConstructor;
+    collapseIconStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
     flexTable: BooleanConstructor;
-}>>, {
+}>> & {
+    onCollapseChange?: ((_collapse: boolean) => any) | undefined;
+}, {
+    collapse: boolean;
     bordered: boolean;
     flexTable: boolean;
 }, {}>;

package/es/ele-card/index.js

@@ -1,8 +1,48 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
-import { cardProps } from "./props";
+import { defineComponent, ref, watch, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withModifiers, createVNode, withCtx, Transition, withDirectives, vShow } from "vue";
+import { ElIcon } from "element-plus";
+import { ArrowUp } from "../icons";
+import { useCollapseAnim } from "../utils/hook";
+import { cardProps, cardEmits } from "./props";
 const _sfc_main = defineComponent({
   name: "EleCard",
-  props: cardProps
+  components: { ElIcon, ArrowUp },
+  props: cardProps,
+  emits: cardEmits,
+  setup(props, { emit }) {
+    const {
+      handleEnter,
+      handleAfterEnter,
+      handleBeforeLeave,
+      handleAfterLeave
+    } = useCollapseAnim();
+    const isCollapse = ref(!!props.collapse);
+    const handleCollapseClick = () => {
+      isCollapse.value = !isCollapse.value;
+      emit("collapseChange", isCollapse.value);
+    };
+    const handleHeaderClick = () => {
+      if (props.collapsable === "header") {
+        handleCollapseClick();
+      }
+    };
+    watch(
+      () => props.collapse,
+      (collapse) => {
+        if (isCollapse.value !== !!collapse) {
+          isCollapse.value = !!collapse;
+        }
+      }
+    );
+    return {
+      isCollapse,
+      handleBeforeLeave,
+      handleAfterLeave,
+      handleEnter,
+      handleAfterEnter,
+      handleCollapseClick,
+      handleHeaderClick
+    };
+  }
 });
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
@@ -12,19 +52,23 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ArrowUp = resolveComponent("ArrowUp");
+  const _component_ElIcon = resolveComponent("ElIcon");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass([
       "ele-card",
       { "is-border": _ctx.bordered },
       { "is-shadow": _ctx.shadow === "always" },
       { "is-hover-shadow": _ctx.shadow === "hover" },
+      { "is-collapse": _ctx.isCollapse },
       { "is-flex-table": _ctx.flexTable }
     ])
   }, [
     _ctx.header || _ctx.$slots.header || _ctx.$slots.extra ? (openBlock(), createElementBlock("div", {
       key: 0,
       class: "ele-card-header",
-      style: normalizeStyle(_ctx.headerStyle)
+      style: normalizeStyle(_ctx.headerStyle),
+      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleHeaderClick && _ctx.handleHeaderClick(...args))
     }, [
       createElementVNode("div", {
         class: "ele-card-title",
@@ -34,14 +78,42 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           createTextVNode(toDisplayString(_ctx.header), 1)
         ])
       ], 4),
-      _ctx.$slots.extra ? renderSlot(_ctx.$slots, "extra", { key: 0 }) : createCommentVNode("", true)
+      _ctx.$slots.extra ? renderSlot(_ctx.$slots, "extra", { key: 0 }) : createCommentVNode("", true),
+      _ctx.collapsable ? (openBlock(), createElementBlock("div", {
+        key: 1,
+        style: normalizeStyle(_ctx.collapseIconStyle),
+        class: "ele-card-collapse-icon",
+        onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.handleCollapseClick && _ctx.handleCollapseClick(...args), ["stop"]))
+      }, [
+        renderSlot(_ctx.$slots, "collapseIcon", {}, () => [
+          createVNode(_component_ElIcon, null, {
+            default: withCtx(() => [
+              createVNode(_component_ArrowUp)
+            ]),
+            _: 1
+          })
+        ])
+      ], 4)) : createCommentVNode("", true)
     ], 4)) : createCommentVNode("", true),
-    createElementVNode("div", {
-      class: normalizeClass(["ele-card-body", _ctx.bodyClass]),
-      style: normalizeStyle(_ctx.bodyStyle)
-    }, [
-      renderSlot(_ctx.$slots, "default")
-    ], 6),
+    createVNode(Transition, {
+      name: "ele-card-slide",
+      onBeforeLeave: _ctx.handleBeforeLeave,
+      onAfterLeave: _ctx.handleAfterLeave,
+      onEnter: _ctx.handleEnter,
+      onAfterEnter: _ctx.handleAfterEnter
+    }, {
+      default: withCtx(() => [
+        withDirectives(createElementVNode("div", {
+          class: normalizeClass(["ele-card-body", _ctx.bodyClass]),
+          style: normalizeStyle(_ctx.bodyStyle)
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 6), [
+          [vShow, !_ctx.isCollapse]
+        ])
+      ]),
+      _: 3
+    }, 8, ["onBeforeLeave", "onAfterLeave", "onEnter", "onAfterEnter"]),
     _ctx.footer || _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
       key: 1,
       class: "ele-card-footer",