origam 0.3.10 → 2.3.0

package/dist/src/components/ExpansionPanel/OrigamExpansionPanel.vue

@@ -9,6 +9,23 @@
 				class="origam-expansion-panel__shadow"
 		/>
 
+		<template v-if="hasLoading">
+			<slot name="loader">
+				<div class="origam-expansion-panel__loader">
+					<origam-progress
+							v-if="loaderConfig.kind !== 'skeleton'"
+							:active="true"
+							:indeterminate="loaderConfig.indeterminate"
+							:model-value="loaderConfig.modelValue"
+							:type="loaderConfig.kind === 'circular' ? PROGRESS_TYPE.CIRCULAR : PROGRESS_TYPE.LINEAR"
+							:class="expansionPanelProgressClasses"
+							thickness="4"
+							v-bind="loaderConfig.overrides"
+					/>
+				</div>
+			</slot>
+		</template>
+
 		<template v-if="hasHeader">
 			<slot
 					name="header"
@@ -82,20 +99,22 @@
 
 <script setup>
 import { computed, provide, ref, StyleValue, toRef, useSlots } from "vue";
-import { OrigamExpansionPanelContent, OrigamExpansionPanelHeader } from "../../components";
+import { OrigamExpansionPanelContent, OrigamExpansionPanelHeader, OrigamProgress } from "../../components";
 import {
-  useBorder,
+  useActive,
   useBothColor,
+  useDefaults,
   useDensity,
-  useElevation,
   useGroupItem,
-  useMargin,
-  usePadding,
+  useHover,
+  useLoader,
   useProps,
-  useRounded
+  useStateEffect,
+  useStyle
 } from "../../composables";
 import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts";
-const props = defineProps({
+import { PROGRESS_TYPE } from "../../enums";
+const _props = defineProps({
   tag: { type: String, required: false, default: "div" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -103,10 +122,6 @@ const props = defineProps({
   density: { type: null, required: false },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -131,7 +146,7 @@ const props = defineProps({
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
@@ -151,24 +166,21 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   ripple: { type: [Boolean, Object], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  hover: { type: [Boolean, Object], required: false },
   content: { type: null, required: false },
   eager: { type: Boolean, required: false },
-  loading: { type: [Boolean, Number], required: false },
+  loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false }
 });
+const props = useDefaults(_props);
 defineEmits(["group:selected"]);
 const { filterProps } = useProps(props);
 const origamExpansionPanelHeaderRef = ref();
 const origamExpansionPanelContentRef = ref();
 const groupItem = useGroupItem(props, ORIGAM_EXPANSION_PANEL_KEY);
 const slots = useSlots();
-const { borderClasses, borderStyles } = useBorder(props);
-const { paddingClasses, paddingStyles } = usePadding(props);
-const { marginClasses, marginStyles } = useMargin(props);
-const { densityClasses } = useDensity(props);
-const { colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
-const { elevationClasses } = useElevation(props);
-const { roundedClasses, roundedStyles } = useRounded(props);
 const isDisabled = computed(() => {
   return groupItem?.disabled.value || props.disabled;
 });
@@ -199,6 +211,10 @@ const isAfterSelected = computed(() => {
 if (groupItem !== null) {
   provide(ORIGAM_EXPANSION_PANEL_KEY, groupItem);
 }
+const { loaderClasses, loaderConfig } = useLoader(props, "line");
+const hasLoading = computed(() => {
+  return slots.loader || loaderConfig.value.isActive;
+});
 const hasContent = computed(() => {
   return slots.content || !!props.content;
 });
@@ -211,6 +227,21 @@ const expansionPanelHeaderProps = computed(() => {
 const expansionPanelContentProps = computed(() => {
   return origamExpansionPanelContentRef.value?.filterProps(props, ["class", "id", "style", "tag"]);
 });
+const { densityClasses } = useDensity(props);
+const { isHover, hoverState } = useHover(props);
+const { isActive, activeState } = useActive(props);
+const {
+  borderClasses,
+  borderStyles,
+  roundedClasses,
+  roundedStyles,
+  elevationClasses,
+  paddingClasses,
+  paddingStyles,
+  marginClasses,
+  marginStyles
+} = useStateEffect(props, isHover, isActive, hoverState, activeState);
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const expansionPanelStyles = computed(() => {
   return [
     colorStyles.value,
@@ -221,6 +252,12 @@ const expansionPanelStyles = computed(() => {
     props.style
   ];
 });
+const expansionPanelProgressClasses = computed(() => {
+  return [
+    "origam-expansion-panel__progress",
+    `origam-expansion-panel__progress--${loaderConfig.value.kind === "line" ? "linear" : loaderConfig.value.kind}`
+  ];
+});
 const expansionPanelClasses = computed(() => {
   return [
     "origam-expansion-panel",
@@ -230,6 +267,8 @@ const expansionPanelClasses = computed(() => {
       "origam-expansion-panel--after-active": isAfterSelected.value,
       "origam-expansion-panel--disabled": isDisabled.value
     },
+    loaderClasses.value,
+    colorClasses.value,
     borderClasses.value,
     paddingClasses.value,
     marginClasses.value,
@@ -239,42 +278,49 @@ const expansionPanelClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(expansionPanelStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
 <style lang="scss" scoped>
-	// TODO - Rework with css variables
 	.origam-expansion-panel {
-		flex: 1 0 100%;
-		max-width: 100%;
-		position: relative;
-		transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
-		transition-property: margin-top, border-radius, border, max-width;
-		border-radius: 4px;
+		flex: var(--origam-expansion-panel---flex, 1 0 100%);
+		max-width: var(--origam-expansion-panel---max-width, 100%);
+		position: var(--origam-expansion-panel---position, relative);
+		transition-duration: var(--origam-expansion-panel---transition-duration, 0.3s);
+		transition-property: var(--origam-expansion-panel---transition-property, margin-top, border-radius, border, max-width);
+		transition-timing-function: var(--origam-expansion-panel---transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
+		border-radius: var(--origam-expansion-panel---border-radius, 4px);
 
 		&:not(:first-child) {
 			&:after {
 				border-top-style: solid;
 				border-top-width: thin;
-				border-top-color: rgba(33, 33, 33, 0.12);
+				border-top-color: var(--origam-expansion-panel---divider-color, var(--origam-color__border---subtle));
+				opacity: var(--origam-expansion-panel---divider-opacity, 0.12);
 				content: "";
 				left: 0;
 				position: absolute;
 				right: 0;
 				top: 0;
-				transition: 0.3s opacity cubic-bezier(0.4, 0, 0.2, 1);
+				transition: var(--origam-expansion-panel---transition-duration, 0.3s) opacity var(--origam-expansion-panel---transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
 			}
 		}
 
 		&--disabled {
 			:deep(.origam-expansion-panel-header) {
-				color: rgba(0, 0, 0, 0.26);
-				pointer-events: none;
+				color: var(--origam-expansion-panel---disabled-color, var(--origam-color__text---disabled));
+				pointer-events: var(--origam-expansion-panel---disabled-pointer-events, none);
 
 				.origam-expansion-panel-header__overlay {
-					opacity: 0.4615384615;
+					opacity: var(--origam-expansion-panel---disabled-overlay-opacity, 0.4615384615);
 				}
 			}
 		}
@@ -282,7 +328,7 @@ defineExpose({
 		&--active {
 			&:not(:first-child),
 			+ .origam-expansion-panel {
-				margin-top: 16px;
+				margin-top: var(--origam-expansion-panel---active-margin-top, 16px);
 
 				&:after {
 					opacity: 0;
@@ -293,27 +339,21 @@ defineExpose({
 				border-bottom-left-radius: 0;
 				border-bottom-right-radius: 0;
 
-				&:not(.v-expansion-panel-title--static) {
-					min-height: 64px;
+				&:not(.origam-expansion-panel-header--static) {
+					min-height: var(--origam-expansion-panel__header---min-height-active, 64px);
 				}
 			}
 		}
 
 		&__shadow {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			box-shadow: 0px 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 2px 2px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 5px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
-			border-radius: inherit;
-			z-index: -1;
+			position: var(--origam-expansion-panel__shadow---position, absolute);
+			top: var(--origam-expansion-panel__shadow---top, 0);
+			left: var(--origam-expansion-panel__shadow---left, 0);
+			width: var(--origam-expansion-panel__shadow---width, 100%);
+			height: var(--origam-expansion-panel__shadow---height, 100%);
+			box-shadow: var(--origam-expansion-panel__shadow---box-shadow, var(--origam-shadow---sm));
+			border-radius: var(--origam-expansion-panel__shadow---border-radius, inherit);
+			z-index: var(--origam-expansion-panel__shadow---z-index, -1);
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/components/ExpansionPanel/OrigamExpansionPanelContent.vue

@@ -7,17 +7,41 @@
 				:style="expansionPanelContentStyles"
 		>
 			<div class="origam-expansion-panel-content__wrapper">
-				<template v-if="hasContent">
-					<slot name="default">
-						<template v-if="isComponent">
-							<component :is="content"/>
-						</template>
+				<template v-if="loaderConfig.isActive && loaderConfig.kind === 'skeleton'">
+					<slot name="loader">
+						<origam-skeleton variant="text" :loading="true" v-bind="loaderConfig.overrides"/>
+						<origam-skeleton variant="text" :loading="true" v-bind="loaderConfig.overrides"/>
+						<origam-skeleton variant="text" :loading="true" v-bind="loaderConfig.overrides"/>
+					</slot>
+				</template>
 
-						<template v-else>
-							{{ content }}
-						</template>
+				<template v-else-if="loaderConfig.isActive">
+					<slot name="loader">
+						<origam-progress
+								:active="true"
+								:indeterminate="loaderConfig.indeterminate"
+								:model-value="loaderConfig.modelValue"
+								:type="loaderConfig.kind === 'circular' ? PROGRESS_TYPE.CIRCULAR : PROGRESS_TYPE.LINEAR"
+								:class="expansionPanelContentProgressClasses"
+								thickness="4"
+								v-bind="loaderConfig.overrides"
+						/>
 					</slot>
 				</template>
+
+				<template v-if="!loaderConfig.isActive || loaderConfig.kind !== 'skeleton'">
+					<template v-if="hasContent">
+						<slot name="default">
+							<template v-if="isComponent">
+								<component :is="content"/>
+							</template>
+
+							<template v-else>
+								{{ content }}
+							</template>
+						</slot>
+					</template>
+				</template>
 			</div>
 		</component>
 	</origam-expand-y>
@@ -25,32 +49,31 @@
 
 <script setup>
 import { computed, inject, StyleValue, toRef } from "vue";
-import { OrigamExpandY } from "../../components";
+import { OrigamExpandY, OrigamProgress, OrigamSkeleton } from "../../components";
 import {
   useBorder,
   useBothColor,
   useDensity,
   useLazy,
+  useLoader,
   useMargin,
   usePadding,
   useProps,
-  useRounded
+  useRounded,
+  useStyle
 } from "../../composables";
+import { PROGRESS_TYPE } from "../../enums";
 import { ORIGAM_EXPANSION_PANEL_KEY } from "../../consts";
 const props = defineProps({
   content: { type: null, required: false },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
@@ -79,25 +102,26 @@ const props = defineProps({
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
   eager: { type: Boolean, required: false },
-  loading: { type: [Boolean, Number], required: false },
+  loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
 const expansionPanel = inject(ORIGAM_EXPANSION_PANEL_KEY);
 if (!expansionPanel) throw new Error("[Origam] expansion-panel-content needs to be placed inside expansion-panel");
 const { hasContent, onAfterLeave: handleAfterLeave } = useLazy(props, expansionPanel.isSelected);
-const { borderClasses, borderStyles } = useBorder(props);
-const { paddingClasses, paddingStyles } = usePadding(props);
-const { marginClasses, marginStyles } = useMargin(props);
-const { densityClasses } = useDensity(props);
-const { colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
-const { roundedClasses, roundedStyles } = useRounded(props);
 const isSelected = computed(() => {
   return expansionPanel.isSelected.value;
 });
 const isComponent = computed(() => {
   return typeof props.content !== "string";
 });
+const { loaderClasses, loaderConfig } = useLoader(props, "line");
+const { borderClasses, borderStyles } = useBorder(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { densityClasses } = useDensity(props);
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const { roundedClasses, roundedStyles } = useRounded(props);
 const expansionPanelContentStyles = computed(() => {
   return [
     colorStyles.value,
@@ -108,9 +132,17 @@ const expansionPanelContentStyles = computed(() => {
     props.style
   ];
 });
+const expansionPanelContentProgressClasses = computed(() => {
+  return [
+    "origam-expansion-panel-content__progress",
+    `origam-expansion-panel-content__progress--${loaderConfig.value.kind === "line" ? "linear" : loaderConfig.value.kind}`
+  ];
+});
 const expansionPanelContentClasses = computed(() => {
   return [
     "origam-expansion-panel-content",
+    loaderClasses.value,
+    colorClasses.value,
     borderClasses.value,
     paddingClasses.value,
     marginClasses.value,
@@ -119,25 +151,28 @@ const expansionPanelContentClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(expansionPanelContentStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
 <style lang="scss" scoped>
 	.origam-expansion-panel-content {
-		display: flex;
+		display: var(--origam-expansion-panel__content---display, flex);
 
 		&__wrapper {
-			padding: 8px 24px 16px;
-			flex: 1 1 auto;
-			max-width: 100%;
+			padding-block-start: var(--origam-expansion-panel__content---padding-block-start, 8px);
+			padding-block-end: var(--origam-expansion-panel__content---padding-block-end, 16px);
+			padding-inline-start: var(--origam-expansion-panel__content---padding-inline-start, 24px);
+			padding-inline-end: var(--origam-expansion-panel__content---padding-inline-end, 24px);
+			flex: var(--origam-expansion-panel__content---flex, 1 1 auto);
+			max-width: var(--origam-expansion-panel__content---max-width, 100%);
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>