origam 0.3.10 → 2.3.0

package/dist/src/components/Drawer/OrigamDrawer.vue

@@ -1,43 +1,56 @@
 <template>
 	<teleport
-			v-if="isActive"
+			:disabled="isLayoutOrphan"
 			:to="teleportDrawer"
+			defer
 	>
-		<component
-				:is="tag"
-				:ref="rootEl"
-				:class="drawerClasses"
-				:style="drawerStyles"
-				v-bind="{...scopeId, ...$attrs}"
-				@mouseenter="handleMouseEnter"
-				@mouseleave="handleMouseLeave"
-		>
-			<div class="origam-drawer__wrapper">
-				<slot name="wrapper">
-					<div
-							v-if="hasPrepend"
-							class="origam-drawer__prepend"
-					>
-						<slot name="prepend"/>
-					</div>
-
-					<div
-							v-if="hasContent"
-							class="origam-drawer__content"
-					>
-						<slot name="default"/>
-					</div>
-
-					<div
-							v-if="hasAppend"
-							class="origam-drawer__append"
-					>
-						<slot name="append"/>
-					</div>
-				</slot>
-			</div>
-		</component>
+		<!--
+			`<origam-transition>` wraps the conditional <component v-if>
+			so the drawer animates on mount/unmount instead of popping
+			in / out. Default transition is `origam-transition--slide-x`
+			(horizontal slide keyframes shipped by OrigamSlideX). The
+			teleport itself stays mounted so transition events fire on
+			the inner element.
+		-->
+		<origam-transition :transition="transition">
+			<component
+					:is="tag"
+					v-if="isActive"
+					:ref="rootEl"
+					:class="drawerClasses"
+					:style="drawerStyles"
+					v-bind="{...scopeId, ...$attrs}"
+					@mouseenter="handleMouseEnter"
+					@mouseleave="handleMouseLeave"
+			>
+				<div class="origam-drawer__wrapper">
+					<slot name="wrapper">
+						<div
+								v-if="hasPrepend"
+								class="origam-drawer__prepend"
+						>
+							<slot name="prepend"/>
+						</div>
+
+						<div
+								v-if="hasContent"
+								class="origam-drawer__content"
+						>
+							<slot name="default"/>
+						</div>
+
+						<div
+								v-if="hasAppend"
+								class="origam-drawer__append"
+						>
+							<slot name="append"/>
+						</div>
+					</slot>
+				</div>
+			</component>
+		</origam-transition>
 		<origam-overlay-scrim
+				v-if="isActive"
 				:active="isTemporary && (isDragging || isActive && !!scrim)"
 				:scrim="scrim"
 				:style="scrimStyles"
@@ -61,27 +74,26 @@ import {
   useSlots,
   watch
 } from "vue";
-import { OrigamOverlayScrim } from "../../components";
+import { OrigamOverlayScrim, OrigamTransition } from "../../components";
 import {
+  useActive,
   useBackgroundColor,
-  useBorder,
   useDensity,
-  useElevation,
+  useHover,
   useLayoutItem,
-  useMargin,
-  usePadding,
   useProps,
-  useRounded,
   useRouter,
   useScopeId,
   useSsrBoot,
+  useStateEffect,
   useSticky,
+  useStyle,
   useToggleScope,
   useTouch,
   useVModel
 } from "../../composables";
 import { INLINE } from "../../enums";
-import { getUid, int } from "../../utils";
+import { int } from "../../utils";
 const props = defineProps({
   disableResizeWatcher: { type: Boolean, required: false },
   disableRouteWatcher: { type: Boolean, required: false },
@@ -95,6 +107,8 @@ const props = defineProps({
   touchless: { type: Boolean, required: false },
   width: { type: [Number, String], required: false, default: 256 },
   sticky: { type: Boolean, required: false },
+  push: { type: [Boolean, null], required: false, default: null },
+  clipped: { type: [Boolean, null], required: false, default: null },
   tag: { type: String, required: false, default: "nav" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -110,20 +124,16 @@ const props = defineProps({
   borderStyle: { type: String, required: false },
   elevation: { type: [Number, String], required: false },
   name: { type: String, required: false },
-  order: { type: [String, Number], required: true },
+  order: { type: [String, Number], required: false },
   absolute: { type: Boolean, required: false },
   location: { type: null, required: false, default: INLINE.LEFT },
-  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 },
   roundedBottomRight: { type: [Boolean, Number, String], 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 },
   density: { type: null, required: false },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
@@ -139,24 +149,35 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  transition: { type: [Boolean, String, Object], required: false },
+  transition: { type: [Boolean, String, Object], required: false, default: "origam-transition--drawer" },
   disabled: { type: Boolean, required: false },
-  scrim: { type: [Boolean, String], required: false, default: true }
+  scrim: { type: [Boolean, String], required: false, default: true },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  hover: { type: [Boolean, Object], required: false }
 });
 const emits = defineEmits(["update:rail"]);
 const { filterProps } = useProps(props);
-const { backgroundColorStyles } = useBackgroundColor(toRef(props, "bgColor"));
-const { elevationClasses } = useElevation(props);
-const { roundedClasses, roundedStyles } = useRounded(props);
-const { borderClasses, borderStyles } = useBorder(props);
-const { paddingClasses, paddingStyles } = usePadding(props);
-const { marginClasses, marginStyles } = useMargin(props);
+const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, "bgColor"));
 const { densityClasses } = useDensity(props);
+const { isHover, hoverState } = useHover(props);
+const { activeState } = useActive(props);
+const isActive = useVModel(props, "modelValue", false, (v) => !!v);
+const {
+  borderClasses,
+  borderStyles,
+  roundedClasses,
+  roundedStyles,
+  elevationClasses,
+  paddingClasses,
+  paddingStyles,
+  marginClasses,
+  marginStyles
+} = useStateEffect(props, isHover, isActive, hoverState, activeState);
 const slots = useSlots();
 const router = useRouter();
 const { ssrBootStyles } = useSsrBoot();
 const { scopeId } = useScopeId();
-const isActive = useVModel(props, "modelValue", false, (v) => !!v);
 const rootEl = ref();
 const isHovering = shallowRef(false);
 const width = computed(() => {
@@ -193,22 +214,44 @@ const { isDragging, dragProgress, dragStyles } = useTouch({
   position: location
 });
 const layoutSize = computed(() => {
+  if (!isPushing.value) return 0;
   const size = isTemporary.value ? 0 : props.rail && props.expandOnHover ? Number(props.railWidth) : width.value;
   return isDragging.value ? size * dragProgress.value : size;
 });
+const isPushing = computed(() => {
+  if (props.push === null || props.push === void 0) {
+    return !!props.permanent && !props.temporary;
+  }
+  return !!props.push;
+});
+const layoutOrder = computed(() => {
+  const explicit = int(props.order);
+  if (Number.isFinite(explicit)) return explicit;
+  if (props.clipped === true) return 1;
+  if (props.clipped === false) return 0;
+  return 0;
+});
 const { layoutItemStyles, layoutItemScrimStyles, layoutId } = useLayoutItem({
   id: props.name,
-  order: computed(() => int(props.order || getUid().toString())),
+  order: layoutOrder,
   position: location,
   layoutSize,
   elementSize: width,
+  // `active` controls the VISUAL transform of the drawer (open
+  // vs off-screen via translateX(0%) / translateX(-110%)).
+  // It must follow `isActive` regardless of push mode — otherwise
+  // the inline transform would stick the drawer off-screen even
+  // when the consumer is trying to display it. The PUSH gate
+  // lives in `layoutSize` above (returns 0 → no layer reservation).
   active: computed(() => isActive.value || isDragging.value),
   disableTransitions: computed(() => isDragging.value),
   absolute: computed(
     () => props.absolute || isSticky.value && typeof isStuck.value !== "string"
   )
 });
+const isLayoutOrphan = computed(() => layoutId.value === "origam-layout-orphan");
 const teleportDrawer = computed(() => {
+  if (isLayoutOrphan.value) return void 0;
   return `#${layoutId.value} .origam-layout__wrapper`;
 });
 const { isStuck, stickyStyles } = useSticky({ rootEl, isSticky, layoutItemStyles });
@@ -264,6 +307,7 @@ const drawerClasses = computed(() => {
       "origam-drawer--active": isActive.value,
       "origam-drawer--sticky": isSticky.value
     },
+    backgroundColorClasses.value,
     borderClasses.value,
     paddingClasses.value,
     marginClasses.value,
@@ -273,8 +317,14 @@ const drawerClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(drawerStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -282,69 +332,67 @@ defineExpose({
 	.origam-drawer {
 		-webkit-overflow-scrolling: touch;
 
-		display: var(--origam-drawer--display);
-		flex-direction: var(--origam-drawer--flex-direction);
+		display: var(--origam-drawer---display);
+		flex-direction: var(--origam-drawer---flex-direction);
 
-		height: var(--origam-drawer--height);
-		max-width: var(--origam-drawer--max-width);
+		height: var(--origam-drawer---height);
+		max-width: var(--origam-drawer---max-width);
 		width: var(--origam-drawer---width);
 
-		pointer-events: var(--origam-drawer--pointer-events);
+		pointer-events: var(--origam-drawer---pointer-events);
 
 		transform: var(--origam-layout---transform);
-		transition-duration: var(--origam-drawer--transition-duration);
-		transition-property: var(--origam-drawer--transition-property);
-		transition-timing-function: var(--origam-drawer--transition-timing-function);
+		transition-duration: var(--origam-drawer---transition-duration);
+		transition-property: var(--origam-drawer---transition-property);
+		transition-timing-function: var(--origam-drawer---transition-timing-function);
 
-		position: var(--origam-layout---position, var(--origam-drawer--position));
+		position: var(--origam-layout---position, var(--origam-drawer---position));
 		z-index: var(--origam-layout---zIndex, 1000);
 
-		border-color: var(--origam-drawer--border-color);
-		border-style: var(--origam-drawer--border-color);
-		border-width: var(--origam-drawer--border-width);
-		border-radius: var(--origam-drawer--border-radius);
-
-		background: var(--origam-drawer--background);
-		box-shadow: var(--origam-drawer--box-shadow);
-		color: var(--origam-drawer--color);
+		border-color: var(--origam-drawer---border-color);
+		border-style: var(--origam-drawer---border-style);
+		border-top-width: var(--origam-drawer---border-top-width, 0);
+		border-right-width: var(--origam-drawer---border-right-width, 0);
+		border-bottom-width: var(--origam-drawer---border-bottom-width, 0);
+		border-left-width: var(--origam-drawer---border-left-width, 0);
+		border-start-start-radius: var(--origam-drawer---border-start-start-radius, 0);
+		border-start-end-radius: var(--origam-drawer---border-start-end-radius, 0);
+		border-end-end-radius: var(--origam-drawer---border-end-end-radius, 0);
+		border-end-start-radius: var(--origam-drawer---border-end-start-radius, 0);
+
+		background-color: var(--origam-drawer---background);
+		box-shadow: var(--origam-drawer---box-shadow);
+		color: var(--origam-drawer---color);
 
 		&--border {
-			--origam-drawer--border-width: thin;
-			--origam-drawer--box-shadow: none;
+			--origam-drawer---border-top-width: thin;
+			--origam-drawer---border-right-width: thin;
+			--origam-drawer---border-bottom-width: thin;
+			--origam-drawer---border-left-width: thin;
 		}
 
 		&--top {
-			--origam-drawer--border-bottom-width: thin;
-
 			top: 0;
-			border-bottom-width: var(--origam-drawer--border-bottom-width);
+			--origam-drawer---border-bottom-width: thin;
 		}
 
 		&--bottom {
-			--origam-drawer--border-top-width: thin;
-
 			left: 0;
-			border-top-width: var(--origam-drawer--border-top-width);
+			--origam-drawer---border-top-width: thin;
 		}
 
 		&--left {
-			--origam-drawer--border-right-width: thin;
-
 			top: 0;
 			left: 0;
 			right: auto;
-
-			border-right-width: var(--origam-drawer--border-right-width);
+			--origam-drawer---border-right-width: thin;
 		}
 
 		&--right {
-			--origam-drawer--border-left-width: thin;
-
 			top: 0;
 			left: auto;
 			right: 0;
-
-			border-left-width: var(--origam-drawer--border-left-width);
+			--origam-drawer---border-left-width: thin;
 		}
 
 		&--floating {
@@ -352,12 +400,12 @@ defineExpose({
 		}
 
 		&--temporary {
-			--origam-drawer--box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
+			--origam-drawer---box-shadow: var(--origam-shadow---lg);
 		}
 
 		&--sticky {
-			--origam-drawer--height: auto;
-			--origam-drawer--transition-property: box-shadow, transform, visibility, width, height, left, right;
+			--origam-drawer---height: auto;
+			--origam-drawer---transition-property: box-shadow, transform, visibility, width, height, left, right;
 		}
 
 		&:deep(.origam-list) {
@@ -388,15 +436,17 @@ defineExpose({
 		}
 
 		&__scrim {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			background: black;
-			opacity: 0.2;
-			transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-			z-index: 1;
+			position: var(--origam-drawer__scrim---position, absolute);
+			top: var(--origam-drawer__scrim---position-top, 0);
+			left: var(--origam-drawer__scrim---position-left, 0);
+			width: var(--origam-drawer__scrim---width, 100%);
+			height: var(--origam-drawer__scrim---height, 100%);
+			background: var(--origam-drawer__scrim---background, var(--origam-color__overlay---scrim));
+			opacity: var(--origam-drawer__scrim---opacity, 0.2);
+			transition-property: var(--origam-drawer__scrim---transition-property, opacity);
+			transition-duration: var(--origam-drawer__scrim---transition-duration, var(--origam-motion__duration---medium));
+			transition-timing-function: var(--origam-drawer__scrim---transition-timing-function, var(--origam-motion__easing---standard));
+			z-index: var(--origam-drawer__scrim---z-index, var(--origam-z-index-raised));
 		}
 
 		&__prepend,
@@ -407,38 +457,85 @@ defineExpose({
 	}
 </style>
 
-<style>
-	:root {
-		--origam-drawer--display: flex;
-		--origam-drawer--flex-direction: column;
-
-		--origam-drawer--border-top-width: 0;
-		--origam-drawer--border-left-width: 0;
-		--origam-drawer--border-bottom-width: 0;
-		--origam-drawer--border-right-width: 0;
-		--origam-drawer--border-width: var(--origam-drawer--border-top-width) var(--origam-drawer--border-left-width) var(--origam-drawer--border-bottom-width) var(--origam-drawer--border-right-width);
-		--origam-drawer--border-color: rgba(0, 0, 0, 0.87);
-		--origam-drawer--border-style: solid;
-		--origam-drawer--border-start-start-radius: 0;
-		--origam-drawer--border-start-end-radius: 0;
-		--origam-drawer--border-end-start-radius: 0;
-		--origam-drawer--border-end-end-radius: 0;
-		--origam-drawer--border-radius: var(--origam-drawer--border-start-start-radius) var(--origam-drawer--border-start-end-radius) var(--origam-drawer--border-end-start-radius) var(--origam-drawer--border-end-end-radius);
-
-		--origam-drawer--position: absolute;
-
-		--origam-drawer--transition-duration: 0.2s;
-		--origam-drawer--transition-property: box-shadow, transform, visibility, width, height, left, right, top, bottom;
-		--origam-drawer--transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-		--origam-drawer--height: 100%;
-		--origam-drawer--width: 100%;
-		--origam-drawer--max-width: 100%;
-
-		--origam-drawer--pointer-events: auto;
-
-		--origam-drawer--color: rgba(0, 0, 0, 0.87);
-		--origam-drawer--box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
-		--origam-drawer--background: rgb(255, 255, 255);
+<style lang="scss">
+	// `!important` is mandatory: useLayoutItem emits an inline
+	// `transform: translateX(0%)` on the drawer root (it manages the
+	// open / close translation itself via active.value). Inline styles
+	// beat CSS rules unless the rule is `!important`. Without it, the
+	// keyframe transforms below are stomped → drawer never animates
+	// visibly.
+
+	.origam-transition--drawer {
+		&-enter-active,
+		&-leave-active {
+			transition-property: transform !important;
+			transition-duration: 0.25s !important;
+			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+		}
+
+		// Default (left) — slide out to the left.
+		&-enter-from,
+		&-leave-to {
+			transform: translateX(-100%) !important;
+		}
+	}
+
+	// Right drawer slides out to the right.
+	.origam-drawer--right.origam-transition--drawer-enter-from,
+	.origam-drawer--right.origam-transition--drawer-leave-to {
+		transform: translateX(100%) !important;
+	}
+
+	// Top drawer slides up out of view.
+	.origam-drawer--top.origam-transition--drawer-enter-from,
+	.origam-drawer--top.origam-transition--drawer-leave-to {
+		transform: translateY(-100%) !important;
+	}
+
+	// Bottom drawer slides down out of view.
+	.origam-drawer--bottom.origam-transition--drawer-enter-from,
+	.origam-drawer--bottom.origam-transition--drawer-leave-to {
+		transform: translateY(100%) !important;
+	}
+
+	// ── Generic-transition overrides scoped to the drawer ────────────
+	//
+	// OrigamSlideX / OrigamSlideY / OrigamFade are generic transitions
+	// used across the design system. Their keyframe transforms have NO
+	// `!important`, so when applied to the drawer they get stomped by
+	// useLayoutItem's inline `transform: translateX(0%)` — the result
+	// is that the consumer sees only the opacity portion of the
+	// keyframe (a fade) instead of the intended slide. Override
+	// per-transition on the `.origam-drawer` selector so the transforms
+	// win without affecting the same transition used on other
+	// components.
+
+	// slide-x: full panel width, location-aware.
+	.origam-drawer.origam-transition--slide-x-enter-from,
+	.origam-drawer.origam-transition--slide-x-leave-to {
+		transform: translateX(-100%) !important;
+		opacity: 0 !important;
+	}
+	.origam-drawer--right.origam-transition--slide-x-enter-from,
+	.origam-drawer--right.origam-transition--slide-x-leave-to {
+		transform: translateX(100%) !important;
+	}
+
+	// slide-y: full panel height, location-aware.
+	.origam-drawer.origam-transition--slide-y-enter-from,
+	.origam-drawer.origam-transition--slide-y-leave-to {
+		transform: translateY(-100%) !important;
+		opacity: 0 !important;
+	}
+	.origam-drawer--bottom.origam-transition--slide-y-enter-from,
+	.origam-drawer--bottom.origam-transition--slide-y-leave-to {
+		transform: translateY(100%) !important;
+	}
+
+	// fade: opacity-only, no transform. The drawer's inline transform
+	// stays at `translateX(0%)` throughout — only the alpha animates.
+	.origam-drawer.origam-transition--fade-enter-from,
+	.origam-drawer.origam-transition--fade-leave-to {
+		opacity: 0 !important;
 	}
 </style>