origam 0.3.10 → 2.2.1

package/dist/src/components/Slide/OrigamSlideGroup.vue

@@ -13,7 +13,6 @@
 				@click="handleFocusAffixes"
 				@mousedown="hasPrev && scrollTo('prev')"
 		>
-			>
 			<slot name="prev">
 				<origam-fade>
 					<origam-icon :icon="prevIcon"/>
@@ -48,7 +47,6 @@
 				@click="handleFocusAffixes"
 				@mousedown="hasNext && scrollTo('next')"
 		>
-			>
 			<slot name="next">
 				<origam-fade>
 					<origam-icon :icon="nextIcon"/>
@@ -71,7 +69,8 @@ import {
   useProps,
   useResizeObserver,
   useRounded,
-  useRtl
+  useRtl,
+  useStyle
 } from "../../composables";
 import { IN_BROWSER, ORIGAM_SLIDE_GROUP_KEY } from "../../consts";
 import { DIRECTION, MDI_ICONS } from "../../enums";
@@ -86,13 +85,13 @@ import {
 } from "../../utils";
 const props = defineProps({
   centerActive: { type: Boolean, required: false },
-  nextIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_LEFT },
-  prevIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_RIGHT },
+  nextIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_RIGHT },
+  prevIcon: { type: null, required: false, default: MDI_ICONS.CHEVRON_LEFT },
   showArrows: { type: [Boolean, String], required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  tag: { type: String, required: false },
+  tag: { type: String, required: false, default: "div" },
   direction: { type: null, required: false, default: DIRECTION.HORIZONTAL },
   disabled: { type: Boolean, required: false },
   modelValue: { type: null, required: false },
@@ -114,7 +113,7 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, 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 },
@@ -204,7 +203,7 @@ const scrollToPosition = (newPosition) => {
   const scrollSize = getScrollSize(isHorizontal.value, containerRef.value);
   if (scrollSize <= offsetSize || // Prevent scrolling by only a couple of pixels, which doesn't look smooth
   Math.abs(newPosition - scrollPosition) < 16) return;
-  if (isHorizontal.value && containerRef.value) {
+  if (isHorizontal.value && isRtl.value && containerRef.value) {
     const { scrollWidth, offsetWidth: containerWidth } = containerRef.value;
     newPosition = scrollWidth - containerWidth - newPosition;
   }
@@ -288,14 +287,8 @@ const focus = (location) => {
   }
 };
 const scrollTo = (location) => {
-  const direction = 1;
-  const offsetStep = (location === "prev" ? -direction : direction) * containerSize.value;
-  let newPosition = scrollOffset.value + offsetStep;
-  if (isHorizontal.value && containerRef.value) {
-    const { scrollWidth, offsetWidth: containerWidth } = containerRef.value;
-    newPosition += scrollWidth - containerWidth;
-  }
-  scrollToPosition(newPosition);
+  const offsetStep = (location === "prev" ? -1 : 1) * containerSize.value;
+  scrollToPosition(scrollOffset.value + offsetStep);
 };
 const slotProps = computed(() => ({
   next: group.next,
@@ -372,11 +365,89 @@ const slideGroupNextClasses = computed(() => {
   return [
     "origam-slide-group__next",
     {
-      "origam-slide-group__next--disabled": !hasPrev.value
+      // Was `!hasPrev.value` (copy-paste from the prev affix
+      // classes) — the next button stayed enabled at the end
+      // of the scroll and disabled at the start.
+      "origam-slide-group__next--disabled": !hasNext.value
     }
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(slideGroupStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
+
+<style lang="scss" scoped>
+	.origam-slide-group {
+		$this: &;
+
+		display: var(--origam-slide-group---display, flex);
+		overflow: var(--origam-slide-group---overflow, hidden);
+
+		&__prev,
+		&__next {
+			align-items: center;
+			display: flex;
+			flex: 0 1 var(--origam-slide-group__prev---min-width, 52px);
+			justify-content: center;
+			min-width: var(--origam-slide-group__prev---min-width, 52px);
+			cursor: var(--origam-slide-group__prev---cursor, pointer);
+			color: var(--origam-slide-group__prev---color, inherit);
+
+			&--disabled {
+				pointer-events: none;
+				opacity: var(--origam-slide-group__prev---opacity-disabled, 0.6);
+			}
+		}
+
+		&__content {
+			display: var(--origam-slide-group__content---display, flex);
+			flex: var(--origam-slide-group__content---flex, 1 0 auto);
+			position: var(--origam-slide-group__content---position, relative);
+			transition:
+				var(--origam-slide-group---transition-duration, 0.2s)
+				all
+				var(--origam-slide-group---transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+			white-space: var(--origam-slide-group__content---white-space, nowrap);
+
+			> * {
+				white-space: initial;
+			}
+		}
+
+		&__container {
+			contain: content;
+			display: var(--origam-slide-group__container---display, flex);
+			flex: var(--origam-slide-group__container---flex, 1 1 auto);
+			overflow-x: var(--origam-slide-group__container---overflow-x, auto);
+			overflow-y: var(--origam-slide-group__container---overflow-y, hidden);
+			scrollbar-width: none;
+			scrollbar-color: var(--origam-slide-group__container---scrollbar-color, transparent);
+
+			&::-webkit-scrollbar {
+				display: none;
+			}
+		}
+
+		&--vertical {
+			max-height: var(--origam-slide-group--vertical---max-height, inherit);
+
+			&,
+			#{$this}__container,
+			#{$this}__content {
+				flex-direction: column;
+			}
+
+			#{$this}__container {
+				overflow-x: var(--origam-slide-group--vertical---content-overflow-x, hidden);
+				overflow-y: var(--origam-slide-group--vertical---content-overflow-y, auto);
+			}
+		}
+	}
+</style>

package/dist/src/components/SliderField/OrigamSliderField.vue

@@ -36,8 +36,8 @@
 
 					<origam-slider-field-track
 							ref="origamSliderFieldTrackRef"
-							:start="0"
-							:stop="trackStop"
+							:start="isRange ? trackRangeStart : 0"
+							:stop="isRange ? trackRangeStop : trackStop"
 							class="origam-slider-field__track"
 							v-bind="{...trackProps}"
 					/>
@@ -183,7 +183,15 @@
 <script setup>
 import { computed, ref, StyleValue, useSlots, WritableComputedRef } from "vue";
 import { OrigamInput, OrigamLabel, OrigamSliderFieldThumb, OrigamSliderFieldTrack } from "../../components";
-import { useFocus, useProps, useRtl, useSlider, useSteps, useVModel } from "../../composables";
+import {
+  useFocus,
+  useProps,
+  useRtl,
+  useSlider,
+  useSteps,
+  useStyle,
+  useVModel
+} from "../../composables";
 import { DENSITY, DIRECTION } from "../../enums";
 import { getSliderFieldOffset, omit } from "../../utils";
 const props = defineProps({
@@ -208,11 +216,6 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   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 },
   centerAffix: { type: Boolean, required: false },
   hideDetails: { type: [Boolean, String], required: false },
   hideSpinButtons: { type: Boolean, required: false },
@@ -233,11 +236,12 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, 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 },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  bgColor: { 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 },
@@ -266,6 +270,7 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  size: { type: null, required: false },
   ripple: { type: [Boolean, Object], required: false }
 });
 const emits = defineEmits(["update:focused", "update:modelValue", "start", "end"]);
@@ -333,12 +338,12 @@ const {
   },
   getActiveThumb: (e) => {
     if (isRange.value) {
-      if (!origamSliderFieldStartThumbRef.value || !origamSliderFieldStartThumbRef.value) return;
+      if (!origamSliderFieldStartThumbRef.value || !origamSliderFieldStopThumbRef.value) return;
       const startOffset = getSliderFieldOffset(e, origamSliderFieldStartThumbRef.value.$el, props.direction);
-      const stopOffset = getSliderFieldOffset(e, origamSliderFieldStartThumbRef.value.$el, props.direction);
+      const stopOffset = getSliderFieldOffset(e, origamSliderFieldStopThumbRef.value.$el, props.direction);
       const a = Math.abs(startOffset);
       const b = Math.abs(stopOffset);
-      return a < b || a === b && startOffset < 0 ? origamSliderFieldStartThumbRef.value.$el : origamSliderFieldStartThumbRef.value.$el;
+      return a < b || a === b && startOffset < 0 ? origamSliderFieldStartThumbRef.value.$el : origamSliderFieldStopThumbRef.value.$el;
     } else {
       return origamSliderFieldThumbRef.value?.$el;
     }
@@ -404,7 +409,7 @@ const handleUpdateModelValue = (v) => {
   model.value = v;
 };
 const inputProps = computed(() => {
-  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "id", "focused", "centerAffix"]);
+  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "id", "focused", "centerAffix", "color", "bgColor", "activeColor", "activeBgColor", "hoverColor", "hoverBgColor"]);
 });
 const thumbProps = computed(() => {
   return omit(props.thumbProps ?? {}, ["modelValue", "class", "focused", "min", "max", "position"]);
@@ -434,8 +439,14 @@ const sliderFieldClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(sliderFieldStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 

package/dist/src/components/SliderField/OrigamSliderFieldThumb.vue

@@ -18,8 +18,8 @@
 
 		<div
 				v-ripple="rippleProps"
+				:class="sliderFieldThumbRippleClasses"
 				:style="sliderFieldThumbRippleStyles"
-				class="origam-slider-field-thumb__ripple"
 		/>
 
 		<origam-translate-scale origin="bottom center">
@@ -30,7 +30,7 @@
 				<div class="origam-slider-field-thumb__label">
 					<slot
 							name="default"
-							v-bind="{ modelValue: props.modelValue }"
+							v-bind="{ modelValue: modelValue }"
 					>
 						<span>{{ label }}</span>
 					</slot>
@@ -43,7 +43,14 @@
 <script setup>
 import { computed, inject, StyleValue } from "vue";
 import { OrigamTranslateScale } from "../../components";
-import { useBorder, useElevation, useProps, useRounded, useTextColor } from "../../composables";
+import {
+  useBorder,
+  useElevation,
+  useProps,
+  useRounded,
+  useStyle,
+  useTextColor
+} from "../../composables";
 import { ORIGAM_SLIDER_FIELD_KEY } from "../../consts";
 import { vRipple } from "../../directives";
 import { KEYBOARD_VALUES } from "../../enums";
@@ -61,15 +68,10 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   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 },
   size: { type: null, required: false, default: 20 },
   ripple: { type: [Boolean, Object], required: false, default: true },
   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 },
@@ -112,7 +114,9 @@ const isReadonly = computed(() => {
   return props.readonly ?? readonly.value;
 });
 const color = computed(() => {
-  return error || isDisabled.value ? void 0 : sliderColor.value ?? props.color;
+  if (isDisabled.value) return void 0;
+  if (error.value) return "danger";
+  return sliderColor.value || props.color;
 });
 const size = computed(() => {
   if (typeof props?.size === "number") {
@@ -141,7 +145,7 @@ const rippleProps = computed(() => {
 const { elevationClasses } = useElevation(elevationProps);
 const { borderClasses, borderStyles } = useBorder(borderProps);
 const { roundedClasses, roundedStyles } = useRounded(roundedProps);
-const { textColorStyles } = useTextColor(color);
+const { textColorClasses, textColorStyles } = useTextColor(color);
 const relevantKeys = [KEYBOARD_VALUES.PAGEUP, KEYBOARD_VALUES.PAGEDOWN, KEYBOARD_VALUES.END, KEYBOARD_VALUES.HOME, KEYBOARD_VALUES.LEFT, KEYBOARD_VALUES.RIGHT, KEYBOARD_VALUES.DOWN, KEYBOARD_VALUES.UP];
 const multipliers = computed(() => {
   if (step.value) return [1, 2, 3];
@@ -212,7 +216,14 @@ const sliderFieldThumbSurfaceClasses = computed(() => {
     "origam-slider-field-thumb__surface",
     elevationClasses.value,
     borderClasses.value,
-    roundedClasses.value
+    roundedClasses.value,
+    textColorClasses.value
+  ];
+});
+const sliderFieldThumbRippleClasses = computed(() => {
+  return [
+    "origam-slider-field-thumb__ripple",
+    textColorClasses.value
   ];
 });
 const sliderFieldThumbRippleStyles = computed(() => {
@@ -221,8 +232,14 @@ const sliderFieldThumbRippleStyles = computed(() => {
     props.style
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(sliderFieldThumbStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -249,9 +266,12 @@ defineExpose({
 			cursor: pointer;
 			width: var(--origam-slider-field-thumb---size, 20);
 			height: var(--origam-slider-field-thumb---size, 20);
+			border: 1px solid var(--origam-slider-field-thumb__surface---border-color, rgba(0, 0, 0, 0.18));
 			border-radius: 50%;
 			user-select: none;
 			background-color: currentColor;
+			box-shadow: none;
+			transition: 0.15s 0.05s transform cubic-bezier(0, 0, 0.2, 1), 0.2s color cubic-bezier(0.4, 0, 0.2, 1), 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1), 0.2s border-color cubic-bezier(0.4, 0, 0.2, 1);
 
 			@media (forced-colors: active) {
 				background-color: highlight;

package/dist/src/components/SliderField/OrigamSliderFieldTrack.vue

@@ -49,7 +49,12 @@
 
 <script setup>
 import { computed, inject, StyleValue, useSlots } from "vue";
-import { useBackgroundColor, useProps, useRounded } from "../../composables";
+import {
+  useBackgroundColor,
+  useProps,
+  useRounded,
+  useStyle
+} from "../../composables";
 import { ORIGAM_SLIDER_FIELD_KEY } from "../../consts";
 import { convertToUnit, int } from "../../utils";
 const props = defineProps({
@@ -61,12 +66,8 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   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 },
   size: { type: null, required: false, default: 4 },
-  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 },
@@ -94,10 +95,14 @@ const isDisabled = computed(() => {
   return props.disabled ?? disabled.value;
 });
 const color = computed(() => {
-  return error.value || isDisabled.value ? void 0 : sliderColor.value ? sliderColor.value : props.color;
+  if (isDisabled.value) return void 0;
+  if (error.value) return "danger";
+  return sliderColor.value || props.color;
 });
 const bgColor = computed(() => {
-  return error.value || isDisabled.value ? void 0 : sliderBgColor.value ? sliderBgColor.value : props.bgColor;
+  if (isDisabled.value) return void 0;
+  if (error.value) return "danger";
+  return sliderBgColor.value || props.bgColor;
 });
 const size = computed(() => {
   if (typeof props?.size === "number") {
@@ -112,8 +117,11 @@ const roundedProps = computed(() => {
   return props.rounded ?? sliderRounded.value;
 });
 const { roundedClasses, roundedStyles } = useRounded(roundedProps);
-const { backgroundColorStyles: trackFillColorStyles } = useBackgroundColor(bgColor);
-const { backgroundColorStyles } = useBackgroundColor(color);
+const {
+  backgroundColorClasses: trackFillColorClasses,
+  backgroundColorStyles: trackFillColorStyles
+} = useBackgroundColor(color);
+const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(bgColor);
 const startDir = computed(() => `inset-${isVertical.value ? "block" : "inline"}-${indexFromEnd.value ? "end" : "start"}`);
 const endDir = computed(() => isVertical.value ? "height" : "width");
 const backgroundStyles = computed(() => {
@@ -181,7 +189,8 @@ const sliderFieldTrackBgClasses = computed(() => {
     "origam-slider-field-track__background",
     {
       "origam-slider-field-track__background--opacity": !!color.value
-    }
+    },
+    backgroundColorClasses.value
   ];
 });
 const sliderFieldTrackFillStyles = computed(() => {
@@ -192,7 +201,8 @@ const sliderFieldTrackFillStyles = computed(() => {
 });
 const sliderFieldTrackFillClasses = computed(() => {
   return [
-    "origam-slider-field-track__fill"
+    "origam-slider-field-track__fill",
+    trackFillColorClasses.value
   ];
 });
 const sliderFieldTrackTicksClasses = computed(() => {
@@ -203,8 +213,14 @@ const sliderFieldTrackTicksClasses = computed(() => {
     }
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(sliderFieldTrackStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>