origam 2.16.0 → 2.17.0

package/dist/src/components/Parallax/OrigamParallaxElement.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			:class="parallaxElementClasses"
 			:style="parallaxElementStyles"
 	>
@@ -10,19 +11,23 @@
 
 <script lang="ts" setup>
 import { computed, inject, StyleValue } from "vue";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useParallaxTransform } from "../../composables/Parallax/transform.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
 import {
-  useBorder,
-  useElevation,
-  useMargin,
-  usePadding,
-  useParallaxTransform,
-  useProps,
-  useRounded,
-  useStyle
-} from "../../composables";
-import { ORIGAM_PARALLAX_KEY } from "../../consts";
-import { AXIS, PARALLAX_ELEMENT_TYPE, PARALLAX_EVENT } from "../../enums";
-import { cyclicMovement, elementMovement } from "../../utils";
+  PARALLAX_ELEMENT_VAR_X,
+  PARALLAX_ELEMENT_VAR_Y
+} from "../../consts/Parallax/parallax-element.const";
+import { ORIGAM_PARALLAX_KEY } from "../../consts/Parallax/parallax.const";
+import { AXIS } from "../../enums/Commons/drag.enum";
+import { PARALLAX_ELEMENT_TYPE } from "../../enums/Parallax/parallax-element.enum";
+import { PARALLAX_EASING, PARALLAX_EVENT } from "../../enums/Parallax/parallax.enum";
+import { cyclicMovement, elementMovement } from "../../utils/Parallax/parallax-element.util";
 const props = defineProps({
   transformOrigin: { type: null, required: false, default: "center" },
   originX: { type: Number, required: false, default: 50 },
@@ -75,6 +80,7 @@ const props = defineProps({
   type: { type: null, required: false, default: PARALLAX_ELEMENT_TYPE.TRANSLATE }
 });
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const { borderClasses, borderStyles } = useBorder(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
@@ -83,7 +89,7 @@ const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);
 const parallax = inject(ORIGAM_PARALLAX_KEY);
 if (!parallax) throw new Error("[Origam] parallax-element needs to be placed inside parallax");
-const { transformStyles, strength } = useParallaxTransform(props);
+const { transformStyles, strength, customMovement } = useParallaxTransform(props);
 const transform = computed(() => {
   return transformCalculation();
 });
@@ -91,7 +97,7 @@ const transitionDuration = computed(() => {
   return `${parallax.duration.value}ms`;
 });
 const transitionTimingFunction = computed(() => {
-  return parallax.easing.value;
+  return parallax.easing.value === PARALLAX_EASING.SPRING ? "var(--origam-parallax---transition-easing-spring, cubic-bezier(0.16, 1, 0.3, 1))" : parallax.easing.value;
 });
 const transformParameters = computed(() => {
   return {
@@ -166,6 +172,13 @@ const transformCalculation = () => {
     x = mouseMovement.x;
     y = mouseMovement.y;
   }
+  if (props.type === PARALLAX_ELEMENT_TYPE.CUSTOM) {
+    const movement = customMovement(x, y);
+    return {
+      [PARALLAX_ELEMENT_VAR_X]: String(movement.x),
+      [PARALLAX_ELEMENT_VAR_Y]: String(movement.y)
+    };
+  }
   return {
     transform: transformStyles(x, y)
   };
@@ -194,7 +207,7 @@ const parallaxElementClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(parallaxElementStyles);
+const { id, css, load, isLoaded, unload } = useStyle(parallaxElementStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

package/dist/src/components/Parallax/OrigamParallaxLayer.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			ref="layerRef"
 			:class="layerClasses"
 			:style="layerStyles"
@@ -10,9 +11,9 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, onMounted, ref, StyleValue } from "vue";
-import { useProps } from "../../composables";
-import { ORIGAM_PARALLAX_LAYER_KEY } from "../../consts";
+import { computed, inject, onBeforeUnmount, onMounted, ref, StyleValue, watch } from "vue";
+import { useProps } from "../../composables/Commons/props.composable";
+import { ORIGAM_PARALLAX_LAYER_KEY } from "../../consts/Parallax/parallax-layer.const";
 const props = defineProps({
   speed: { type: Number, required: false, default: 1 },
   offsetX: { type: Number, required: false, default: 0 },
@@ -24,17 +25,18 @@ const props = defineProps({
   tag: { type: String, required: false, default: "div" }
 });
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const parallax = inject(ORIGAM_PARALLAX_LAYER_KEY);
 if (!parallax) {
   throw new Error("[Origam] OrigamParallaxLayer must be nested inside OrigamParallax (use direction/easing/disabled props on the host).");
 }
 const layerRef = ref();
-const id = /* @__PURE__ */ Symbol("origam:parallax-layer");
+const registryToken = /* @__PURE__ */ Symbol("origam:parallax-layer");
 onMounted(() => {
   if (!layerRef.value) return;
   const registry = {
-    id,
+    id: registryToken,
     speed: props.speed ?? 1,
     offsetX: props.offsetX ?? 0,
     offsetY: props.offsetY ?? 0,
@@ -43,8 +45,18 @@ onMounted(() => {
   parallax.register(registry);
 });
 onBeforeUnmount(() => {
-  parallax.unregister(id);
+  parallax.unregister(registryToken);
 });
+watch(
+  () => [props.speed, props.offsetX, props.offsetY],
+  ([speed, offsetX, offsetY]) => {
+    parallax.update(registryToken, {
+      speed: speed ?? 1,
+      offsetX: offsetX ?? 0,
+      offsetY: offsetY ?? 0
+    });
+  }
+);
 const layerStyles = computed(() => {
   const styles = {
     willChange: "var(--origam-parallax__layer---will-change, transform)",

package/dist/src/components/PasswordField/OrigamPasswordField.vue

@@ -152,9 +152,13 @@
 							v-if="!minimal"
 							#appendInner
 					>
-						<div
+						<button
+								type="button"
 								class="origam-password-field__toggle-icon"
-								@mousedown="handleToggleShow"
+								:aria-label="toggleLabel"
+								:aria-pressed="show"
+								@mousedown.prevent="handleToggleShow"
+								@keydown="handleToggleKeydown"
 						>
 							<slot
 									name="appendInner"
@@ -162,7 +166,7 @@
 							>
 								<origam-icon :icon="currentIcon"/>
 							</slot>
-						</div>
+						</button>
 					</template>
 
 					<template
@@ -297,40 +301,33 @@
 
 <script lang="ts" setup>
 import { computed, nextTick, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
-import {
-  OrigamChip,
-  OrigamCol,
-  OrigamCounter,
-  OrigamField,
-  OrigamIcon,
-  OrigamInput,
-  OrigamMenu,
-  OrigamRow,
-  OrigamSheet
-} from "../../components";
-import {
-  computeStrength,
-  useAdjacent,
-  useAdjacentInner,
-  useDefaults,
-  useFocus,
-  useLocale,
-  useProps,
-  useStyle,
-  useVModel
-} from "../../composables";
-import {
-  DEFAULT_PASSWORD_REQUIREMENTS,
-  REQUIREMENT_MIN_LENGTH,
-  REQUIREMENT_NUMBER,
-  REQUIREMENT_SPECIAL,
-  REQUIREMENT_TINY,
-  REQUIREMENT_UPPERCASE
-} from "../../consts";
-import { vIntersect } from "../../directives";
-import { DENSITY, DIRECTION, MDI_ICONS, TEXT_FIELD_TYPE } from "../../enums";
-import { filterInputAttrs, forwardRefs } from "../../utils";
-const _props = defineProps({
+import OrigamChip from "../Chip/OrigamChip.vue";
+import OrigamCol from "../Grids/OrigamCol.vue";
+import OrigamCounter from "../Counter/OrigamCounter.vue";
+import OrigamField from "../Field/OrigamField.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import OrigamInput from "../Input/OrigamInput.vue";
+import OrigamMenu from "../Menu/OrigamMenu.vue";
+import OrigamRow from "../Grids/OrigamRow.vue";
+import OrigamSheet from "../Sheet/OrigamSheet.vue";
+import { computeStrength } from "../../composables/PasswordField/passwordStrength.composable";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useAdjacentInner } from "../../composables/Commons/adjacentInner.composable";
+import { useFocus } from "../../composables/Commons/focus.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { DEFAULT_PASSWORD_REQUIREMENTS, REQUIREMENT_MIN_LENGTH, REQUIREMENT_NUMBER, REQUIREMENT_SPECIAL, REQUIREMENT_TINY, REQUIREMENT_UPPERCASE } from "../../consts/PasswordField/password-field.const";
+import vIntersect from "../../directives/Intersect/intersect.directive";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
+import { KEYBOARD_VALUES } from "../../enums/Commons/hotkey.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { TEXT_FIELD_TYPE } from "../../enums/TextField/text-field.enum";
+import { filterInputAttrs } from "../../utils/Input/input.util";
+import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
+const props = defineProps({
   onIcon: { type: null, required: false, default: MDI_ICONS.EYE_OUTLINE },
   offIcon: { type: null, required: false, default: MDI_ICONS.EYE_OFF },
   maxlength: { type: Number, required: false },
@@ -374,17 +371,13 @@ const _props = defineProps({
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   error: { type: [String, Boolean], required: false },
-  flat: { type: Boolean, required: false },
   inline: { type: Boolean, required: false },
   label: { type: String, required: false },
   prefix: { type: String, required: false },
   suffix: { type: String, required: false },
   persistentClear: { type: Boolean, required: false },
-  reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
-  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
@@ -431,7 +424,6 @@ const _props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  fontFamily: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
@@ -465,8 +457,7 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false }
 });
-const props = useDefaults(_props);
-const emits = defineEmits(["click:control", "mousedown:control", "update:strength", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "click:clear", "update:active", "click:append", "click:prepend"]);
+const emits = defineEmits(["click:control", "mousedown:control", "update:strength", "update:focused", "click:appendInner", "click:prependInner", "click:clear", "update:modelValue", "click:append", "click:prepend"]);
 defineSlots();
 const slots = useSlots();
 const attrs = useAttrs();
@@ -603,9 +594,15 @@ const currentIcon = computed(() => {
 const currentType = computed(() => {
   return show.value ? TEXT_FIELD_TYPE.TEXT : TEXT_FIELD_TYPE.PASSWORD;
 });
+const toggleLabel = computed(() => t(show.value ? "origam.password_field.hide" : "origam.password_field.show"));
 const handleToggleShow = () => {
   show.value = !show.value;
 };
+const handleToggleKeydown = (e) => {
+  if (e.key !== KEYBOARD_VALUES.ENTER && e.key !== KEYBOARD_VALUES.EMPTY) return;
+  e.preventDefault();
+  handleToggleShow();
+};
 const enrichedRules = computed(() => {
   const base = Array.isArray(props.rules) ? [...props.rules] : [];
   Object.keys(infos.value).forEach((key) => {
@@ -618,7 +615,7 @@ const enrichedRules = computed(() => {
 });
 const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
 const inputProps = computed(() => {
-  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "id", "focused"]);
+  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused"]);
 });
 const fieldProps = computed(() => {
   return origamFieldRef.value?.filterProps(props, ["class", "id", "active", "dirty", "disabled", "focused", "error", "style"]);
@@ -677,6 +674,15 @@ defineExpose(forwardRefs({
 		&__toggle-icon {
 			cursor: var(--origam-password-field__toggle-icon---cursor, pointer);
 			opacity: var(--origam-password-field__toggle-icon---opacity, 1);
+
+			// issue #443 — now a real <button> (was a bare <div>): reset the
+			// UA button chrome. `padding-bottom` alone, never the `padding`
+			// shorthand, to avoid clobbering any padding set elsewhere.
+			border: none;
+			background: none;
+			padding-bottom: 0;
+			font: inherit;
+			color: inherit;
 		}
 
 		&__details {

package/dist/src/components/Picker/OrigamPicker.vue

@@ -1,5 +1,6 @@
 <template>
 	<origam-sheet
+			:id="id"
 			ref="origamSheetRef"
 			:class="pickerClasses"
 			:style="pickerStyles"
@@ -45,8 +46,11 @@
 
 <script lang="ts" setup>
 import { computed, ref, StyleValue, toRef, useSlots } from "vue";
-import { OrigamPickerTitle, OrigamSheet } from "../../components";
-import { useBackgroundColor, useProps, useStyle } from "../../composables";
+import OrigamPickerTitle from "./OrigamPickerTitle.vue";
+import OrigamSheet from "../Sheet/OrigamSheet.vue";
+import { useBackgroundColor } from "../../composables/Commons/backgroundColor.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
 const props = defineProps({
   landscape: { type: Boolean, required: false },
   hideHeader: { type: Boolean, required: false },
@@ -57,6 +61,7 @@ const props = defineProps({
   open: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   persistent: { type: Boolean, required: false },
+  handleLabel: { type: String, required: false },
   tag: { type: String, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -111,15 +116,15 @@ const props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
   title: { type: String, required: false },
-  fontFamily: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
-  lineHeight: { type: null, required: false },
   letterSpacing: { type: null, required: false }
 });
 const slots = useSlots();
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, "bgColor"));
 const hasTitle = computed(() => {
@@ -144,7 +149,7 @@ const pickerClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(pickerStyles);
+const { id, css, load, isLoaded, unload } = useStyle(pickerStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

package/dist/src/components/Picker/OrigamPickerTitle.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			:class="pickerTitleClasses"
 			:style="pickerTitleStyles"
 	>
@@ -12,7 +13,10 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue, toRef } from "vue";
-import { useBothColor, useProps, useStyle, useTypography } from "../../composables";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
 const props = defineProps({
   title: { type: String, required: false },
   id: { type: String, required: false },
@@ -21,13 +25,12 @@ const props = defineProps({
   tag: { type: String, required: false, default: "div" },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontFamily: { type: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
-  lineHeight: { type: null, required: false },
   letterSpacing: { type: null, required: false }
 });
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { typographyStyles } = useTypography(props, "picker-title");
@@ -45,7 +48,7 @@ const pickerTitleClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(pickerTitleStyles);
+const { id, css, load, isLoaded, unload } = useStyle(pickerTitleStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -64,6 +67,6 @@ defineExpose({
 		padding-block: var(--origam-picker-title---padding-block, 16px);
 		font-weight: var(--origam-picker-title---font-weight, 400);
 		letter-spacing: var(--origam-picker-title---letter-spacing, .1666666667em);
-		color: var(--origam-picker-title---color, var(--origam-picker--title---color, inherit));
+		color: var(--origam-picker-title---color, inherit);
 	}
 </style>

package/dist/src/components/Progress/OrigamProgress.vue

@@ -1,16 +1,10 @@
 <template>
 	<component
 			:is="progressComponent"
+			:id="id"
 			ref="origamProgressRef"
-			:aria-busy="indeterminate ? true : undefined"
-			:aria-hidden="!active"
-			:aria-label="progressAriaLabel"
-			:aria-valuemax="max"
-			:aria-valuenow="indeterminate ? undefined : normalizedValue"
 			:class="progressClasses"
 			:style="progressStyles"
-			aria-valuemin="0"
-			role="progressbar"
 			v-bind="progressProps"
 	>
 		<template
@@ -24,14 +18,14 @@
 
 <script lang="ts" setup>
 import { computed, ref, StyleValue } from "vue";
-import { OrigamProgressCircular, OrigamProgressLinear } from "../../components";
-import {
-  useProgress,
-  useProps,
-  useSize,
-  useStyle
-} from "../../composables";
-import { PROGRESS_TYPE, SIZES } from "../../enums";
+import OrigamProgressCircular from "./OrigamProgressCircular.vue";
+import OrigamProgressLinear from "./OrigamProgressLinear.vue";
+import { useProgress } from "../../composables/Progress/progress.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useSize } from "../../composables/Commons/size.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
+import { SIZES } from "../../enums/Commons/size.enum";
 const props = defineProps({
   type: { type: null, required: false },
   bufferValue: { type: [Number, String], required: false },
@@ -41,11 +35,11 @@ const props = defineProps({
   indeterminate: { type: Boolean, required: false },
   modelValue: { type: [String, Number], required: false, default: 0 },
   thickness: { type: [String, Number], required: false, default: 4 },
-  active: { type: Boolean, required: false },
+  active: { type: Boolean, required: false, default: true },
   absolute: { type: Boolean, required: false },
   max: { type: [Number, String], required: false, default: 100 },
   striped: { type: Boolean, required: false },
-  label: { type: String, required: false },
+  label: { type: String, required: false, default: "origam.loading" },
   tag: { type: String, required: false, default: "div" },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
@@ -76,11 +70,11 @@ const props = defineProps({
   size: { type: null, required: false, default: SIZES.DEFAULT }
 });
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const origamProgressRef = ref();
 const { sizeClasses, sizeStyles } = useSize(props);
-const { normalizedValue, hasContent } = useProgress(props);
-const progressAriaLabel = computed(() => props.label ?? "Loading");
+const { hasContent } = useProgress(props);
 const isCircular = computed(() => {
   return props.type === PROGRESS_TYPE.CIRCULAR;
 });
@@ -102,7 +96,7 @@ const progressClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(progressStyles);
+const { id, css, load, isLoaded, unload } = useStyle(progressStyles, () => props.id);
 defineExpose({
   filterProps,
   css,