origam 2.15.0 → 2.17.0

package/dist/src/components/Media/OrigamMediaVolumeControl.vue

@@ -8,11 +8,12 @@
 		<template #activator="{ props: activatorProps }">
 			<button
 					v-bind="activatorProps"
+					:id="id"
 					type="button"
 					class="origam-media-volume-control__btn"
 					:class="rootClasses"
-					:style="rootStyle"
-					:aria-label="muted ? unmuteLabel : muteLabel"
+					:style="rootStyles"
+					:aria-label="toggleLabel"
 					:data-cy="btnDataCy"
 					@click="onToggleMute"
 			>
@@ -43,11 +44,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, toRef } from "vue";
 import { OrigamIcon } from "../Icon";
 import { OrigamTooltip } from "../Tooltip";
 import OrigamMediaScrubber from "./OrigamMediaScrubber.vue";
-import { MDI_ICONS } from "../../enums";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useSize } from "../../composables/Commons/size.composable";
+import { useTextColor } from "../../composables/Commons/textColor.composable";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 const props = defineProps({
   volume: { type: Number, required: true },
   muted: { type: Boolean, required: true },
@@ -57,17 +62,42 @@ const props = defineProps({
   dataCy: { type: String, required: false, default: "origam-media-volume-control" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
-  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, 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 },
+  size: { type: null, required: false },
+  density: { type: null, required: false }
 });
 const emit = defineEmits(["update:muted", "update:volume"]);
+defineSlots();
 const ICONS = {
   VOLUME_HIGH: MDI_ICONS.VOLUME_HIGH,
   VOLUME_MEDIUM: MDI_ICONS.VOLUME_MEDIUM,
   VOLUME_LOW: MDI_ICONS.VOLUME_LOW,
   VOLUME_OFF: MDI_ICONS.VOLUME_OFF
 };
-const rootClasses = computed(() => [props.class]);
-const rootStyle = computed(() => props.style);
+const { textColorClasses, textColorStyles } = useTextColor(toRef(props, "color"));
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { sizeClasses, sizeStyles } = useSize(props);
+const { densityClasses } = useDensity(props);
+const rootClasses = computed(() => [
+  props.class,
+  textColorClasses.value,
+  roundedClasses.value,
+  sizeClasses.value,
+  densityClasses.value
+]);
+const rootStyles = computed(() => [
+  props.style,
+  textColorStyles.value,
+  roundedStyles.value,
+  sizeStyles.value
+]);
+const toggleLabel = computed(() => props.muted ? props.unmuteLabel : props.muteLabel);
 const btnDataCy = computed(() => `${props.dataCy}-mute`);
 const wrapperDataCy = computed(() => `${props.dataCy}-wrapper`);
 const scrubberDataCy = computed(() => props.dataCy);
@@ -102,41 +132,83 @@ function onVolumeFromScrubber(value) {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		width: var(--origam-media-volume-control---btn-size, 36px);
-		height: var(--origam-media-volume-control---btn-size, 36px);
-		border-radius: var(--origam-media-volume-control---btn-border-radius, 50%);
+		width: calc(var(--origam-media-volume-control__btn---size) + var(--origam-media-volume-control---density));
+		height: calc(var(--origam-media-volume-control__btn---size) + var(--origam-media-volume-control---density));
+		border-radius: var(--origam-media-volume-control__btn---border-radius);
 		cursor: pointer;
-		color: var(--origam-media-volume-control---color, inherit);
-		transition: background-color 120ms ease, transform 120ms ease, opacity 120ms ease;
-		opacity: 0.95;
+		color: var(--origam-media-volume-control__btn---color);
+		background-color: var(--origam-media-volume-control__btn---background-color);
+		transition:
+			background-color var(--origam-media-volume-control__btn---transition-duration) ease,
+			transform var(--origam-media-volume-control__btn---transition-duration) ease,
+			opacity var(--origam-media-volume-control__btn---transition-duration) ease;
+		opacity: var(--origam-media-volume-control__btn---opacity);
 	}
 
 	.origam-media-volume-control__btn:hover,
 	.origam-media-volume-control__btn:focus-visible {
-		opacity: 1;
-		background-color: var(--origam-media-volume-control---hover-background-color, color-mix(in srgb, currentColor 12%, transparent));
+		opacity: var(--origam-media-volume-control__btn--hover---opacity);
+		background-color: var(--origam-media-volume-control__btn--hover---background-color);
 	}
 
 	.origam-media-volume-control__btn:active {
-		transform: scale(0.92);
+		transform: scale(var(--origam-media-volume-control__btn--active---scale));
 	}
 
-	.origam-media-volume-control__btn .origam-icon {
-		font-size: var(--origam-media-volume-control---icon-size, 20px);
+	.origam-media-volume-control__btn :deep(.origam-icon) {
+		font-size: var(--origam-media-volume-control__icon---font-size);
 		line-height: 1;
 	}
 
+	.origam-media-volume-control--size-x-small {
+		--origam-media-volume-control__btn---size: var(--origam-media-volume-control__btn---size-xs);
+		--origam-media-volume-control__icon---font-size: var(--origam-media-volume-control__icon---font-size-xs);
+	}
+
+	.origam-media-volume-control--size-small {
+		--origam-media-volume-control__btn---size: var(--origam-media-volume-control__btn---size-sm);
+		--origam-media-volume-control__icon---font-size: var(--origam-media-volume-control__icon---font-size-sm);
+	}
+
+	.origam-media-volume-control--size-default {
+		--origam-media-volume-control__btn---size: var(--origam-media-volume-control__btn---size-md);
+		--origam-media-volume-control__icon---font-size: var(--origam-media-volume-control__icon---font-size-md);
+	}
+
+	.origam-media-volume-control--size-large {
+		--origam-media-volume-control__btn---size: var(--origam-media-volume-control__btn---size-lg);
+		--origam-media-volume-control__icon---font-size: var(--origam-media-volume-control__icon---font-size-lg);
+	}
+
+	.origam-media-volume-control--size-x-large {
+		--origam-media-volume-control__btn---size: var(--origam-media-volume-control__btn---size-xl);
+		--origam-media-volume-control__icon---font-size: var(--origam-media-volume-control__icon---font-size-xl);
+	}
+
+	.origam-media-volume-control--density-comfortable {
+		--origam-media-volume-control---density: var(--origam-media-volume-control--comfortable---density);
+	}
+
+	.origam-media-volume-control--density-default {
+		--origam-media-volume-control---density: var(--origam-media-volume-control--default---density);
+	}
+
+	.origam-media-volume-control--density-compact {
+		--origam-media-volume-control---density: var(--origam-media-volume-control--compact---density);
+	}
+
 	:deep(.origam-media-volume-control__tooltip) {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: 10px 8px;
-		background-color: var(--origam-media-volume-control---tooltip-background-color, rgba(28, 28, 28, 0.92));
+		padding: var(--origam-media-volume-control__tooltip---padding);
+		color: var(--origam-media-volume-control__tooltip---color);
+		background-color: var(--origam-media-volume-control__tooltip---background-color);
 	}
 
 	.origam-media-volume-control__wrapper {
-		width: 14px;
-		height: 80px;
+		width: var(--origam-media-volume-control__wrapper---width);
+		height: var(--origam-media-volume-control__wrapper---height);
 		display: flex;
 		align-items: stretch;
 		justify-content: center;
@@ -144,9 +216,9 @@ function onVolumeFromScrubber(value) {
 
 	.origam-media-volume-control__scrubber {
 		--origam-media-scrubber---color: currentColor;
-		--origam-media-scrubber---track-background-color: color-mix(in srgb, currentColor 30%, transparent);
-		--origam-media-scrubber---track-size: 4px;
-		--origam-media-scrubber---track-size-active: 4px;
-		--origam-media-scrubber---thumb-diameter: 10px;
+		--origam-media-scrubber---track-background-color: var(--origam-media-volume-control__scrubber---track-background-color);
+		--origam-media-scrubber---track-size: var(--origam-media-volume-control__scrubber---track-size);
+		--origam-media-scrubber---track-size-active: var(--origam-media-volume-control__scrubber---track-size);
+		--origam-media-scrubber---thumb-diameter: var(--origam-media-volume-control__scrubber---thumb-diameter);
 	}
 </style>

package/dist/src/components/Menu/OrigamMenu.vue

@@ -16,10 +16,10 @@
 			@keydown="handleKeydown"
 			@click:outside="handleClickOutside"
 	>
-		<template #activator="{props}">
+		<template #activator="{props: activatorSlotProps}">
 			<slot
 					name="activator"
-					v-bind="{props}"
+					v-bind="{props: mergeProps(activatorSlotProps, {onContextmenu: handleContextMenu})}"
 			/>
 		</template>
 
@@ -47,20 +47,22 @@
 								<origam-list-item
 										v-if="!hasChilds(item)"
 										class="origam-menu__item"
-										v-bind="item"
+										v-bind="menuItemProps(item)"
+										@click="handleSelect(item)"
 								/>
 								<origam-menu
 										v-else
+										v-bind="{...menuItemProps(item), ...overlayProps}"
+										:items="childItems(item)"
 										:offset="[8,8]"
 										:open-on-context-menu="false"
 										open-on-click
-										v-bind="{...item, ...overlayProps}"
 								>
 									<template #activator="{props}">
 										<origam-list-item
 												:append-icon="MDI_ICONS.CHEVRON_RIGHT"
 												class="origam-menu__item"
-												v-bind="{...props, ...item}"
+												v-bind="{...props, ...menuItemProps(item)}"
 										/>
 									</template>
 								</origam-menu>
@@ -75,27 +77,28 @@
 
 <script lang="ts" setup>
 import { computed, inject, mergeProps, nextTick, provide, ref, shallowRef, StyleValue, toRef, watch } from "vue";
-import {
-  OrigamList,
-  OrigamListGroup,
-  OrigamListItem,
-  OrigamListSubheader,
-  OrigamOverlay,
-  OrigamTranslateScale
-} from "../../components";
-import {
-  useBothColor,
-  useDefaults,
-  useProps,
-  useScopeId,
-  useStateEffect,
-  useStyle,
-  useVModel
-} from "../../composables";
-import { ORIGAM_MENU_KEY } from "../../consts";
-import { INLINE, KEYBOARD_VALUES, LOCATION_STRATEGIES, MDI_ICONS, SCROLL_STRATEGIES } from "../../enums";
-import { focusableChildren, focusChild, forwardRefs, getNextElement, getUid } from "../../utils";
-const _props = defineProps({
+import OrigamList from "../List/OrigamList.vue";
+import OrigamListGroup from "../List/OrigamListGroup.vue";
+import OrigamListItem from "../List/OrigamListItem.vue";
+import OrigamListSubheader from "../List/OrigamListSubheader.vue";
+import OrigamOverlay from "../Overlay/OrigamOverlay.vue";
+import OrigamTranslateScale from "../Transition/OrigamTranslateScale.vue";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useScopeId } from "../../composables/Commons/scopeId.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { ORIGAM_MENU_KEY } from "../../consts/Menu/menu.const";
+import { INLINE } from "../../enums/Commons/anchor.enum";
+import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum";
+import { LOCATION_STRATEGIES } from "../../enums/Commons/location.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { SCROLL_STRATEGIES } from "../../enums/Commons/scroll.enum";
+import { focusableChildren, focusChild, getNextElement, getPropertyFromItem, omit } from "../../utils/Commons/commons.util";
+import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
+const props = defineProps({
   id: { type: String, required: false },
   absolute: { type: Boolean, required: false },
   attach: { type: [Boolean, String], required: false, skipCheck: true },
@@ -173,7 +176,7 @@ const _props = defineProps({
   items: { type: Array, required: false },
   itemTitle: { type: null, required: false },
   itemValue: { type: null, required: false },
-  itemChildren: { type: null, required: false },
+  itemChildren: { type: null, required: false, default: "children" },
   itemProps: { type: null, required: false },
   returnObject: { type: Boolean, required: false },
   valueComparator: { type: null, required: false },
@@ -208,14 +211,13 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   hover: { type: [Boolean, Object], required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  hoverClass: { type: String, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false }
 });
-const props = useDefaults(_props);
-defineEmits(["contextmenu", "update:modelValue"]);
+const emit = defineEmits(["contextmenu", "select", "update:modelValue"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
@@ -234,7 +236,7 @@ const {
 const isActive = useVModel(props, "modelValue");
 const { scopeId } = useScopeId();
 const uid = getUid();
-const id = computed(() => props.id || `origam-menu--${uid}`);
+const id = computed(() => props.id || `origam-menu-${uid}`);
 const origamOverlayRef = ref();
 const parent = inject(ORIGAM_MENU_KEY, null);
 const openChildren = shallowRef(0);
@@ -278,6 +280,13 @@ watch(isActive, (val) => {
 const handleClickOutside = () => {
   parent?.closeParents();
 };
+const handleContextMenu = (e) => {
+  emit("contextmenu", e);
+};
+const handleSelect = (item) => {
+  if (props.disabled) return;
+  emit("select", item);
+};
 const handleKeydown = (e) => {
   if (props.disabled) return;
   if (e.key === KEYBOARD_VALUES.TAB) {
@@ -321,8 +330,15 @@ const activatorProps = computed(() => {
 const overlayProps = computed(() => {
   return origamOverlayRef.value?.filterProps(props, ["activatorProps", "id", "class", "style", "role", "modelValue", "absolute", "activator", "target", "openOnClick", "openOnContextMenu"]);
 });
+const childItems = (item) => {
+  const children = getPropertyFromItem(item, props.itemChildren);
+  return Array.isArray(children) ? children : [];
+};
 const hasChilds = (item) => {
-  return item?.items;
+  return childItems(item).length > 0;
+};
+const menuItemProps = (item) => {
+  return typeof props.itemChildren === "string" ? omit(item, [props.itemChildren]) : item;
 };
 const menuStyles = computed(() => {
   return [

package/dist/src/components/Messages/OrigamMessages.vue

@@ -4,8 +4,8 @@
 			:transition="transition"
 	>
 		<component
-				:is="props.tag"
-				:id="props.id"
+				:is="tag"
+				:id="id"
 				:class="messagesClasses"
 				:style="[messagesStyles, rootTypographyStyles]"
 				aria-live="polite"
@@ -34,23 +34,23 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue, toRef } from "vue";
-import { OrigamSlideY, OrigamTransition } from "../../components";
-import {
-  useBorder,
-  useDefaults,
-  useDensity,
-  useMargin,
-  usePadding,
-  useProps,
-  useRounded,
-  useSsrBoot,
-  useStyle,
-  useTextColor,
-  useTypography
-} from "../../composables";
-import { DENSITY } from "../../enums";
-import { toKebabCase, wrapInArray } from "../../utils";
-const _props = defineProps({
+import OrigamSlideY from "../Transition/OrigamSlideY.vue";
+import OrigamTransition from "../Transition/OrigamTransition.vue";
+import { useUnsupportedProp } from "../../composables/Commons/unsupportedProp.composable";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useSsrBoot } from "../../composables/Commons/ssrBoot.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTextColor } from "../../composables/Commons/textColor.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { toKebabCase, wrapInArray } from "../../utils/Commons/commons.util";
+const props = defineProps({
   active: { type: Boolean, required: false },
   messages: { type: [Array, String], required: false },
   id: { type: String, required: false },
@@ -58,7 +58,6 @@ const _props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamSlideY }) },
-  disabled: { type: Boolean, required: false },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
@@ -94,13 +93,10 @@ const _props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   elevation: { type: [Number, String], required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  lineHeight: { type: null, required: false }
 });
-const props = useDefaults(_props);
+defineEmits([]);
 defineSlots();
 const { filterProps } = useProps(props);
 const messages = computed(() => {
@@ -108,12 +104,19 @@ const messages = computed(() => {
 });
 const { textColorClasses, textColorStyles } = useTextColor(toRef(props, "color"));
 const { typographyStyles: rootTypographyStyles } = useTypography(props, "messages");
+useUnsupportedProp(
+  "OrigamMessages",
+  "active",
+  "visibility is driven by `messages` being non-empty, never by this prop.",
+  () => props.active !== void 0
+);
 const { typographyStyles: childTypographyStyles } = useTypography(props, "messages__message");
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const { densityClasses } = useDensity(props);
+const { elevationClasses, elevationStyles } = useElevation(props);
 const { isBooted } = useSsrBoot();
 const messagesStyles = computed(() => {
   return [
@@ -122,6 +125,7 @@ const messagesStyles = computed(() => {
     paddingStyles.value,
     marginStyles.value,
     textColorStyles.value,
+    elevationStyles.value,
     props.style
   ];
 });
@@ -132,12 +136,13 @@ const messagesClasses = computed(() => {
     densityClasses.value,
     roundedClasses.value,
     borderClasses.value,
+    elevationClasses.value,
     paddingClasses.value,
     marginClasses.value,
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(messagesStyles);
+const { id, css, load, isLoaded, unload } = useStyle(messagesStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -151,7 +156,7 @@ defineExpose({
 <style lang="scss" scoped>
 	.origam-messages {
 		color: var(--origam-messages---color, currentColor);
-		padding: var(--origam-messages---density, 0);
+		padding: var(--origam-messages---padding, var(--origam-messages---density, 0));
 		flex: var(--origam-messages---flex, 1 1 auto);
 		font-size: var(--origam-messages---font-size, 12px);
 		min-height: var(--origam-messages---min-height, 14px);