@everchron/ec-shards 19.10.0 → 19.10.3

package/dist/ec-shards.js

@@ -6305,14 +6305,28 @@ var qo = /*#__PURE__*/ H(Bo, [["render", Ko], ["__scopeId", "data-v-95f66a3d"]])
 		expandedWidth: {
 			type: String,
 			default: "100%"
+		},
+		hideFooterOnExpand: {
+			type: Boolean,
+			default: !1
+		},
+		beforeExpand: {
+			type: Function,
+			default: null
+		},
+		loading: {
+			type: Boolean,
+			default: !1
 		}
 	},
 	data() {
 		return {
 			isSelected: this.selected,
 			isExpanded: this.expanded,
+			isLoading: !1,
 			expandHeight: 0,
 			sidebarWidth: 0,
+			footerHeight: 0,
 			expandId: ""
 		};
 	},
@@ -6329,6 +6343,18 @@ var qo = /*#__PURE__*/ H(Bo, [["render", Ko], ["__scopeId", "data-v-95f66a3d"]])
 		showHover() {
 			return this.hover || !!this.expandMode;
 		},
+		cardExpanded() {
+			return this.isExpanded && !!this.expandMode;
+		},
+		expandLoading() {
+			return this.loading || this.isLoading;
+		},
+		footerHidden() {
+			return this.hideFooterOnExpand && this.isExpanded;
+		},
+		footerStyle() {
+			return this.hideFooterOnExpand ? this.isExpanded ? { height: "0px" } : this.footerHeight ? { height: this.footerHeight + "px" } : { height: "auto" } : null;
+		},
 		hasSidebar() {
 			return !!this.$slots.sidebar;
 		},
@@ -6390,14 +6416,30 @@ var qo = /*#__PURE__*/ H(Bo, [["render", Ko], ["__scopeId", "data-v-95f66a3d"]])
 			this.isSelected = !!e, this.$emit("update:selected", this.isSelected);
 		},
 		toggleExpand() {
-			this.setExpanded(!this.isExpanded);
+			this.isExpanded ? this.setExpanded(!1) : this.requestExpand();
 		},
 		expand() {
-			this.setExpanded(!0);
+			this.requestExpand();
 		},
 		collapse() {
 			this.setExpanded(!1);
 		},
+		requestExpand() {
+			if (!(this.isExpanded || this.isLoading)) {
+				if (typeof this.beforeExpand == "function") {
+					let e = this.beforeExpand();
+					if (e && typeof e.then == "function") {
+						this.isLoading = !0, e.then(() => {
+							this.isLoading = !1, this.$nextTick(() => this.setExpanded(!0));
+						}).catch(() => {
+							this.isLoading = !1;
+						});
+						return;
+					}
+				}
+				this.setExpanded(!0);
+			}
+		},
 		setExpanded(e) {
 			let t = !!e;
 			this.isExpanded !== t && (this.measure(), this.isExpanded = t, this.$emit("update:expanded", this.isExpanded));
@@ -6410,7 +6452,8 @@ var qo = /*#__PURE__*/ H(Bo, [["render", Ko], ["__scopeId", "data-v-95f66a3d"]])
 			this._observed = this._observed || {};
 			let e = {
 				expand: this.$refs.expandInner,
-				sidebar: this.$refs.sidebarInner
+				sidebar: this.$refs.sidebarInner,
+				footer: this.$refs.footerInner
 			};
 			Object.keys(e).forEach((t) => {
 				let n = e[t];
@@ -6418,24 +6461,21 @@ var qo = /*#__PURE__*/ H(Bo, [["render", Ko], ["__scopeId", "data-v-95f66a3d"]])
 			});
 		},
 		measure() {
-			this.$refs.expandInner && (this.expandHeight = this.$refs.expandInner.offsetHeight), this.$refs.sidebarInner && (this.sidebarWidth = this.$refs.sidebarInner.offsetWidth);
+			this.$refs.expandInner && (this.expandHeight = this.$refs.expandInner.offsetHeight), this.$refs.sidebarInner && (this.sidebarWidth = this.$refs.sidebarInner.offsetWidth), this.$refs.footerInner && (this.footerHeight = this.$refs.footerInner.offsetHeight);
 		}
 	}
-}, Yo = { class: "ecs-content-card-timeline-inner" }, Xo = { class: "ecs-content-card-body" }, Zo = { class: "ecs-content-card-main" }, Qo = {
+}, Yo = { class: "ecs-content-card-timeline-inner" }, Xo = { class: "ecs-content-card-body" }, Zo = { class: "ecs-content-card-columns" }, Qo = { class: "ecs-content-card-main" }, $o = {
 	key: 0,
 	class: "ecs-content-card-header"
-}, $o = {
+}, es = {
 	key: 1,
 	class: "ecs-content-card-header-content"
-}, es = { class: "ecs-content-card-content" }, ts = ["id", "aria-hidden"], ns = {
-	ref: "expandInner",
-	class: "ecs-content-card-expand-inner"
-}, rs = {
-	key: 2,
-	class: "ecs-content-card-footer"
-}, is = ["aria-hidden"], as = {
+}, ts = ["id", "aria-hidden"], ns = ["aria-hidden"], rs = {
 	ref: "sidebarInner",
 	class: "ecs-content-card-sidebar-inner"
+}, is = ["aria-hidden"], as = {
+	ref: "footerInner",
+	class: "ecs-content-card-footer-inner"
 };
 function os(e, t, n, r, i, a) {
 	let u = A("ecs-checkbox"), d = A("ecs-button"), p = A("ecs-card");
@@ -6478,14 +6518,14 @@ function os(e, t, n, r, i, a) {
 		onDblclick: a.onCardDblclick,
 		id: n.id,
 		selected: i.isSelected,
-		expanded: i.isExpanded,
+		expanded: a.cardExpanded,
 		hover: a.showHover,
 		progress: n.progress,
 		disabled: n.disabled,
 		class: "ecs-content-card-card"
 	}, {
-		default: I(() => [l("div", Xo, [l("div", Zo, [
-			a.hasHeader ? (T(), c("div", Qo, [
+		default: I(() => [l("div", Xo, [l("div", Zo, [l("div", Qo, [
+			a.hasHeader ? (T(), c("div", $o, [
 				n.selectable ? (T(), c("div", {
 					key: 0,
 					onClick: t[0] ||= R(() => {}, ["stop"]),
@@ -6499,7 +6539,7 @@ function os(e, t, n, r, i, a) {
 					"value",
 					"disabled"
 				])])) : s("", !0),
-				e.$slots.header ? (T(), c("div", $o, [k(e.$slots, "header", {}, void 0, !0)])) : s("", !0),
+				e.$slots.header ? (T(), c("div", es, [k(e.$slots, "header", {}, void 0, !0)])) : s("", !0),
 				a.showExpandButton ? (T(), o(d, {
 					key: 2,
 					onClick: R(a.toggleExpand, ["stop"]),
@@ -6507,6 +6547,7 @@ function os(e, t, n, r, i, a) {
 					"icon-only": "",
 					size: "sml",
 					icon: i.isExpanded ? "collapse" : "expand",
+					loading: a.expandLoading,
 					active: i.isExpanded || null,
 					disabled: n.disabled,
 					"aria-controls": i.expandId,
@@ -6516,6 +6557,7 @@ function os(e, t, n, r, i, a) {
 				}, null, 8, [
 					"onClick",
 					"icon",
+					"loading",
 					"active",
 					"disabled",
 					"aria-controls",
@@ -6528,21 +6570,28 @@ function os(e, t, n, r, i, a) {
 					class: "ecs-content-card-actions"
 				}, [k(e.$slots, "actions", {}, void 0, !0)])) : s("", !0)
 			])) : s("", !0),
-			l("div", es, [k(e.$slots, "default", {}, void 0, !0)]),
+			l("div", { class: b(["ecs-content-card-content", { "has-select": n.selectable }]) }, [k(e.$slots, "default", {}, void 0, !0)], 2),
 			e.$slots.contentExpand ? (T(), c("div", {
 				key: 1,
 				id: i.expandId,
 				style: S({ height: i.isExpanded ? i.expandHeight + "px" : "0px" }),
 				"aria-hidden": i.isExpanded ? "false" : "true",
 				class: "ecs-content-card-expand"
-			}, [l("div", ns, [k(e.$slots, "contentExpand", {}, void 0, !0)], 512)], 12, ts)) : s("", !0),
-			e.$slots.footer ? (T(), c("div", rs, [k(e.$slots, "footer", {}, void 0, !0)])) : s("", !0)
+			}, [l("div", {
+				ref: "expandInner",
+				class: b(["ecs-content-card-expand-inner", { "has-select": n.selectable }])
+			}, [k(e.$slots, "contentExpand", {}, void 0, !0)], 2)], 12, ts)) : s("", !0)
 		]), e.$slots.sidebar ? (T(), c("div", {
 			key: 0,
 			style: S({ width: i.isExpanded ? "300px" : "0px" }),
 			"aria-hidden": i.isExpanded ? "false" : "true",
 			class: "ecs-content-card-sidebar"
-		}, [l("div", as, [k(e.$slots, "sidebar", {}, void 0, !0)], 512)], 12, is)) : s("", !0)])]),
+		}, [l("div", rs, [k(e.$slots, "sidebar", {}, void 0, !0)], 512)], 12, ns)) : s("", !0)]), e.$slots.footer ? (T(), c("div", {
+			key: 0,
+			style: S(a.footerStyle),
+			"aria-hidden": a.footerHidden ? "true" : "false",
+			class: b(["ecs-content-card-footer", { "is-collapsing": n.hideFooterOnExpand }])
+		}, [l("div", as, [k(e.$slots, "footer", {}, void 0, !0)], 512)], 14, is)) : s("", !0)])]),
 		_: 3
 	}, 8, [
 		"onClick",
@@ -6555,7 +6604,7 @@ function os(e, t, n, r, i, a) {
 		"disabled"
 	])], 6);
 }
-var ss = /*#__PURE__*/ H(Jo, [["render", os], ["__scopeId", "data-v-14ef76c7"]]), cs = {
+var ss = /*#__PURE__*/ H(Jo, [["render", os], ["__scopeId", "data-v-255198d5"]]), cs = {
 	name: "ecs-formatted",
 	components: { EcsSkeletonLoader: G },
 	mixins: [Y],