origam 0.3.9 → 2.2.1

package/dist/src/components/Stepper/OrigamStepperItem.vue

@@ -0,0 +1,220 @@
+<template>
+	<component
+			:is="isClickable ? 'button' : 'div'"
+			:class="itemClasses"
+			:type="isClickable ? 'button' : undefined"
+			:aria-current="resolvedStatus === 'active' ? 'step' : undefined"
+			:aria-label="title ? `Step ${(index ?? 0) + 1}: ${title}` : undefined"
+			:disabled="isClickable && resolvedStatus === 'active' ? true : undefined"
+			@click="handleClick"
+	>
+		<span
+				:class="indicatorClasses"
+				aria-hidden="true"
+		>
+			<template v-if="resolvedStatus === 'done'">
+				<origam-icon :icon="MDI_ICONS.CHECK" />
+			</template>
+			<template v-else-if="resolvedStatus === 'error'">
+				<origam-icon :icon="MDI_ICONS.EXCLAMATION" />
+			</template>
+			<template v-else-if="icon">
+				<origam-icon :icon="icon" />
+			</template>
+			<template v-else>
+				{{ (index ?? 0) + 1 }}
+			</template>
+		</span>
+
+		<span class="origam-stepper-item__label">
+			<span
+					v-if="title"
+					class="origam-stepper-item__title"
+			>{{ title }}</span>
+			<span
+					v-if="subtitle"
+					class="origam-stepper-item__subtitle"
+			>{{ subtitle }}</span>
+		</span>
+	</component>
+</template>
+
+<script setup>
+import { computed, inject } from "vue";
+import { OrigamIcon } from "../../components";
+import { ORIGAM_STEPPER_KEY } from "../../consts";
+import { MDI_ICONS } from "../../enums";
+import { useProps } from "../../composables";
+const props = defineProps({
+  index: { type: Number, required: false, default: 0 },
+  title: { type: String, required: false },
+  subtitle: { type: String, required: false },
+  icon: { type: null, required: false },
+  status: { type: String, required: false },
+  clickable: { type: Boolean, 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 }
+});
+const emit = defineEmits(["click"]);
+const { filterProps } = useProps(props);
+const stepper = inject(ORIGAM_STEPPER_KEY);
+const isClickable = computed(() => {
+  if (props.clickable === true) return true;
+  return stepper?.clickable.value ?? false;
+});
+const resolvedStatus = computed(() => {
+  if (props.status !== void 0) return props.status;
+  const modelValue = stepper?.modelValue.value ?? 0;
+  const idx = props.index ?? 0;
+  if (idx < modelValue) return "done";
+  if (idx === modelValue) return "active";
+  return "pending";
+});
+const handleClick = () => {
+  if (!isClickable.value) return;
+  emit("click", props.index ?? 0);
+  if (stepper) {
+    stepper.modelValue.value = props.index ?? 0;
+  }
+};
+const orientation = computed(() => stepper?.orientation.value ?? "horizontal");
+const itemClasses = computed(() => [
+  "origam-stepper-item",
+  `origam-stepper-item--${resolvedStatus.value}`,
+  `origam-stepper-item--${orientation.value}`,
+  {
+    "origam-stepper-item--clickable": isClickable.value
+  },
+  props.class
+]);
+const indicatorClasses = computed(() => [
+  "origam-stepper-item__indicator",
+  `origam-stepper-item__indicator--${resolvedStatus.value}`
+]);
+defineExpose({
+  filterProps,
+  resolvedStatus
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-stepper-item {
+		$this: &;
+
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--origam-stepper---gap, 8px);
+		flex: 1;
+		min-width: 0;
+		background: none;
+		border: none;
+		padding: 0;
+		margin: 0;
+		cursor: default;
+		text-decoration: none;
+
+		&--clickable {
+			cursor: pointer;
+
+			&:hover {
+				#{$this}__indicator {
+					opacity: 0.85;
+				}
+			}
+
+			&:focus-visible {
+				outline: 2px solid var(--origam-stepper---indicator-active-bg, var(--origam-color__action--primary---bg));
+				outline-offset: 2px;
+				border-radius: var(--origam-radius---full, 9999px);
+			}
+		}
+
+		&__indicator {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: var(--origam-stepper---indicator-size, 32px);
+			height: var(--origam-stepper---indicator-size, 32px);
+			border-radius: var(--origam-radius---full, 9999px);
+			font-size: var(--origam-stepper---indicator-font-size, 0.75rem);
+			font-weight: var(--origam-stepper---indicator-font-weight, 500);
+			flex-shrink: 0;
+			transition: background-color 0.2s ease, color 0.2s ease;
+
+			background-color: var(--origam-stepper---indicator-bg, var(--origam-color__surface---overlay));
+			color: var(--origam-stepper---indicator-color, var(--origam-color__text---secondary));
+			border: var(--origam-stepper---indicator-border-width, 2px) solid currentColor;
+
+			:deep(.origam-icon) {
+				font-size: calc(var(--origam-stepper---indicator-font-size, 0.75rem) * 1.4);
+				line-height: 1;
+			}
+
+			&--active,
+			&--done {
+				color: var(
+					--origam-stepper---color,
+					var(--origam-color__action--primary---bg)
+				);
+				border-color: var(
+					--origam-stepper---color,
+					var(--origam-color__action--primary---bg)
+				);
+				background-color: var(
+					--origam-stepper---background-color,
+					color-mix(
+						in srgb,
+						var(--origam-stepper---color, var(--origam-color__action--primary---bg)) 16%,
+						transparent
+					)
+				);
+			}
+
+			&--error {
+				background-color: var(--origam-stepper---indicator-error-bg, var(--origam-color__feedback--danger---bg));
+				color: var(--origam-stepper---indicator-error-color, var(--origam-color__feedback--danger---fg));
+				border-color: var(--origam-stepper---indicator-error-bg, var(--origam-color__feedback--danger---bg));
+			}
+		}
+
+		&__label {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			text-align: center;
+			min-width: 0;
+		}
+
+		&--vertical {
+			flex-direction: row;
+			align-items: flex-start;
+			gap: var(--origam-stepper---gap, 8px);
+
+			#{$this}__label {
+				align-items: flex-start;
+				text-align: start;
+			}
+		}
+
+		&__title {
+			font-size: var(--origam-stepper---title-font-size, 0.875rem);
+			font-weight: var(--origam-stepper---title-font-weight, 500);
+			color: var(--origam-stepper---title-color, var(--origam-color__text---primary));
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			max-width: 100%;
+		}
+
+		&__subtitle {
+			font-size: var(--origam-stepper---subtitle-font-size, 0.75rem);
+			color: var(--origam-stepper---subtitle-color, var(--origam-color__text---secondary));
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			max-width: 100%;
+		}
+	}
+</style>

package/dist/src/components/Stepper/index.cjs

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamStepper", {
+  enumerable: true,
+  get: function () {
+    return _OrigamStepper.default;
+  }
+});
+Object.defineProperty(exports, "OrigamStepperItem", {
+  enumerable: true,
+  get: function () {
+    return _OrigamStepperItem.default;
+  }
+});
+var _OrigamStepper = _interopRequireDefault(require("./OrigamStepper.vue"));
+var _OrigamStepperItem = _interopRequireDefault(require("./OrigamStepperItem.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { default as OrigamStepper } from './OrigamStepper.vue';
+export { default as OrigamStepperItem } from './OrigamStepperItem.vue';

package/dist/src/components/Stepper/index.js

@@ -0,0 +1,2 @@
+export { default as OrigamStepper } from "./OrigamStepper.vue";
+export { default as OrigamStepperItem } from "./OrigamStepperItem.vue";

package/dist/src/components/Switch/OrigamSwitch.vue

@@ -1,5 +1,15 @@
 <template>
+	<origam-skeleton
+			v-if="isSkeletonLoading"
+			variant="rectangular"
+			:rounded="true"
+			:width="'52px'"
+			:height="'32px'"
+			v-bind="loaderConfig.overrides"
+	/>
+
 	<origam-input
+			v-else
 			:id="id"
 			ref="origamInputRef"
 			v-model="model"
@@ -23,37 +33,40 @@
 					@focus="handleFocus"
 					@update:model-value="handleChange"
 			>
-				<template #default="{backgroundColorStyles, textColorStyles}">
-					<div
-							:style="[backgroundColorStyles, textColorStyles]"
-							class="origam-switch__track"
+				<template #default="{bgColor: scBgColor}">
+					<origam-switch-track
+							:bg-color="scBgColor"
+							:disabled="isDisabled"
+							:error="isValid === false"
+							:inset="inset"
+							:is-valid="isValid"
+							:model-value="model"
+							:readonly="isReadonly"
 							@click="handleTrackClick"
 					>
-						<div
+						<template
 								v-if="slots['track.true']"
-								key="prepend"
-								class="origam-switch__track-true"
+								#track.true="slotProps"
 						>
 							<slot
 									name="track.true"
-									v-bind="{model, isValid}"
+									v-bind="slotProps"
 							/>
-						</div>
+						</template>
 
-						<div
+						<template
 								v-if="slots['track.false']"
-								key="append"
-								class="origam-switch__track-false"
+								#track.false="slotProps"
 						>
 							<slot
 									name="track.false"
-									v-bind="{model, isValid}"
+									v-bind="slotProps"
 							/>
-						</div>
-					</div>
+						</template>
+					</origam-switch-track>
 				</template>
 
-				<template #input="{model, backgroundColorStyles, icon, props: selectionControlProps}">
+				<template #input="{model, icon, props: selectionControlProps}">
 					<input
 							ref="input"
 							:aria-checked="selectionControlProps.type === 'checkbox' ? model : undefined"
@@ -62,13 +75,11 @@
 							:checked="model"
 							v-bind="selectionControlProps"
 					/>
-
 					<div
-							:class="['origam-switch__thumb', { 'origam-switch__thumb--filled': !!icon || props.loading }]"
-							:style="props.inset ? undefined : backgroundColorStyles"
+							:class="getSwitchThumbClasses(icon)"
 					>
 						<origam-translate-scale>
-							<template v-if="!props.loading">
+							<template v-if="!loaderConfig.isActive">
 								<origam-icon
 										v-if="icon"
 										:icon="icon"
@@ -80,14 +91,15 @@
 								<slot name="loader">
 									<div class="origam-switch__loader">
 										<origam-progress
-												:active="!!props.loading"
-												:color="props.color"
-												:indeterminate="typeof props.loading !== 'number'"
-												:model-value="typeof props.loading === 'number' ? props.loading : undefined"
+												:active="loaderConfig.isActive"
+												:color="color"
+												:indeterminate="loaderConfig.indeterminate"
+												:model-value="loaderConfig.modelValue"
 												:size="SIZES.X_SMALL"
 												:type="PROGRESS_TYPE.CIRCULAR"
 												class="origam-switch__progress origam-switch__progress--circular"
 												thickness="2"
+												v-bind="loaderConfig.overrides"
 										/>
 									</div>
 								</slot>
@@ -107,9 +119,19 @@ import {
   OrigamInput,
   OrigamProgress,
   OrigamSelectionControl,
+  OrigamSkeleton,
+  OrigamSwitchTrack,
   OrigamTranslateScale
 } from "../../components";
-import { useFocus, useLoader, useProps, useVModel } from "../../composables";
+import {
+  useFocus,
+  useHover,
+  useLoader,
+  useProps,
+  useStateEffect,
+  useStyle,
+  useVModel
+} from "../../composables";
 import { DENSITY, PROGRESS_TYPE, SIZES } from "../../enums";
 import { filterInputAttrs, getUid } from "../../utils";
 const props = defineProps({
@@ -143,7 +165,7 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: 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 },
@@ -157,10 +179,6 @@ const props = defineProps({
   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 },
   elevation: { type: [Number, String], required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
@@ -185,6 +203,7 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  size: { type: null, required: false },
   trueValue: { type: null, required: false },
   falseValue: { type: null, required: false },
   value: { type: null, required: false },
@@ -196,10 +215,15 @@ const props = defineProps({
   type: { type: String, required: false },
   valueComparator: { type: Function, required: false },
   ripple: { type: [Boolean, Object], required: false },
-  loading: { type: [Boolean, Number], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  hover: { type: [Boolean, Object], required: false },
+  loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false }
 });
 defineEmits(["update:modelValue", "update:focused", "update:indeterminate", "click:label"]);
+const { isHover, hoverState } = useHover(props);
+useStateEffect(props, isHover, void 0, hoverState, void 0);
 const { filterProps } = useProps(props);
 const origamSelectionControlRef = ref();
 const origamInputRef = ref();
@@ -208,7 +232,7 @@ const model = useVModel(props, "modelValue");
 const { isFocused, onFocus: handleFocus, onBlur: handleBlur } = useFocus(props);
 const attrs = useAttrs();
 const slots = useSlots();
-const { loaderClasses } = useLoader(props);
+const { loaderClasses, loaderConfig } = useLoader(props, "circular");
 const uid = getUid();
 const id = computed(() => {
   return props.id || `switch-${uid}`;
@@ -218,26 +242,33 @@ const handleChange = () => {
     indeterminate.value = false;
   }
 };
-const handleTrackClick = (e) => {
-  e.stopPropagation();
-  e.preventDefault();
+const handleTrackClick = (_e) => {
   origamSelectionControlRef.value?.inputRef?.click();
 };
 const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
 const inputProps = computed(() => {
-  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "focused", "id", "style"]);
+  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "focused", "id", "style", "color", "bgColor", "activeColor", "activeBgColor", "hoverColor", "hoverBgColor"]);
 });
 const controlProps = computed(() => {
   return origamSelectionControlRef.value?.filterProps(props, ["modelValue", "type", "disabled", "readonly", "class", "style", "id"]);
 });
 const hasLoading = computed(() => {
-  return slots.loader || !!props.loading;
+  return slots.loader || loaderConfig.value.isActive;
+});
+const isSkeletonLoading = computed(() => {
+  return loaderConfig.value.isActive && loaderConfig.value.kind === "skeleton";
 });
 const switchStyles = computed(() => {
   return [
     props.style
   ];
 });
+const getSwitchThumbClasses = (icon) => {
+  return [
+    "origam-switch__thumb",
+    { "origam-switch__thumb--filled": !!icon || loaderConfig.value.isActive }
+  ];
+};
 const switchClasses = computed(() => {
   return [
     "origam-switch",
@@ -250,8 +281,15 @@ const switchClasses = computed(() => {
     props.class
   ];
 });
+const { id: styleId, css, load, isLoaded, unload } = useStyle(switchStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded,
+  styleId
 });
 </script>
 
@@ -271,7 +309,6 @@ defineExpose({
 			}
 		}
 
-		&__track,
 		&__thumb {
 			transition: none;
 
@@ -282,7 +319,7 @@ defineExpose({
 		}
 
 		.origam-selection-control {
-			min-height: calc(var(--origam-input__control---height, 56px) + var(--origam-input---density, 0px));
+			min-height: calc(var(--origam-switch__selection-control---min-height, 56px) + var(--origam-input---density, 0px));
 
 			:deep(.origam-selection-control__input) {
 				border-radius: 50%;
@@ -303,25 +340,12 @@ defineExpose({
 
 			&--error {
 				&:not(.origam-selection-control--disabled) {
-					#{$this}__track,
 					#{$this}__thumb {
 						background-color: rgba(255, 0, 0, 1);
-						color: rgba(255, 255, 255, 5);
+						color: rgba(255, 255, 255, 1);
 					}
 				}
 			}
-
-			&:not(.origam-selection-control--dirty) {
-				#{$this}__track-true {
-					opacity: 0;
-				}
-			}
-
-			&--dirty {
-				#{$this}__track-false {
-					opacity: 0;
-				}
-			}
 		}
 
 		&.origam-input {
@@ -338,32 +362,25 @@ defineExpose({
 			}
 		}
 
-		&__track-true {
-			margin-inline-end: auto;
+		.origam-selection-control__wrapper.origam--color-primary &__thumb,
+		.origam-selection-control__wrapper.origam--color-secondary &__thumb,
+		.origam-selection-control__wrapper.origam--color-success &__thumb,
+		.origam-selection-control__wrapper.origam--color-warning &__thumb,
+		.origam-selection-control__wrapper.origam--color-danger &__thumb,
+		.origam-selection-control__wrapper.origam--color-info &__thumb,
+		.origam-selection-control__wrapper.origam--color-neutral &__thumb {
+			background-color: currentColor;
 		}
 
-		&__track-false {
-			margin-inline-start: auto;
-		}
-
-		&__track {
-			display: inline-flex;
-			align-items: center;
-			font-size: 0.5rem;
-			padding: 0 5px;
-			background-color: rgb(163, 163, 163);
-			border-radius: 9999px;
-			height: 14px;
-			opacity: 0.6;
-			min-width: 36px;
-			cursor: pointer;
-			transition: 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
+		.origam-selection-control__wrapper[style*="color:"] &__thumb {
+			background-color: currentColor;
 		}
 
 		&__thumb {
 			align-items: center;
-			background-color: rgb(71, 71, 71);
-			color: rgb(255, 255, 255);
+			background-color: var(--origam-switch__thumb---background-color, rgb(255, 255, 255));
+			color: var(--origam-switch__thumb---color, currentColor);
+			border: 1px solid var(--origam-switch__thumb---border-color, rgba(0, 0, 0, 0.18));
 			border-radius: 50%;
 			display: flex;
 			font-size: 0.75rem;
@@ -371,7 +388,7 @@ defineExpose({
 			justify-content: center;
 			width: 20px;
 			pointer-events: 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);
+			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);
 			position: relative;
 			overflow: hidden;
 
@@ -381,16 +398,6 @@ defineExpose({
 		}
 
 		&#{$this}--inset {
-			#{$this}__track {
-				border-radius: 9999px;
-				font-size: 0.75rem;
-				height: 32px;
-				min-width: 52px;
-
-				@media (forced-colors: active) {
-					border-width: 2px;
-				}
-			}
 
 			#{$this}__thumb {
 				height: 24px;
@@ -430,22 +437,6 @@ defineExpose({
 			}
 		}
 
-		&:not(#{$this}--inset) {
-			#{$this}__thumb {
-				box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-			}
-		}
-
-		&#{$this}--flat {
-			:not(#{$this}--inset) {
-				#{$this}__thumb {
-					background: rgb(var(--v-theme-surface-variant));
-					color: rgb(var(--v-theme-on-surface-variant));
-					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);
-				}
-			}
-		}
-
 		&#{$this}--indeterminate {
 			:deep(.origam-selection-control__input) {
 				transform: scale(0.8);
@@ -453,7 +444,6 @@ defineExpose({
 
 			#{$this}__thumb {
 				transform: scale(0.75);
-				box-shadow: none;
 			}
 		}
 
@@ -461,12 +451,6 @@ defineExpose({
 			#{$this}__thumb {
 				@media (forced-colors: active) {
 					background-color: graytext;
-				}
-			}
-
-			#{$this}__track,
-			#{$this}__thumb {
-				@media (forced-colors: active) {
 					color: graytext;
 				}
 			}
@@ -503,14 +487,7 @@ defineExpose({
 
 		&:not(.origam-input--disabled) {
 			.origam-selection-control--dirty {
-				#{$this}__track {
-					@media (forced-colors: active) {
-						background-color: highlight;
-					}
-				}
-
-				#{$this}__track,
-				#{$this}_thumb {
+				#{$this}__thumb {
 					@media (forced-colors: active) {
 						color: highlight;
 					}