origam 0.3.9 → 2.2.1

package/dist/src/components/Card/OrigamCardHeader.vue

@@ -91,7 +91,12 @@
 
 <script setup>
 import { OrigamAvatar, OrigamIcon } from "../../components";
-import { useAdjacent, useDensity, useProps } from "../../composables";
+import {
+  useAdjacent,
+  useDensity,
+  useProps,
+  useStyle
+} from "../../composables";
 import { computed, StyleValue, toRef, useSlots } from "vue";
 const props = defineProps({
   subtitle: { type: [String, Number], required: false },
@@ -109,7 +114,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 },
@@ -162,8 +167,14 @@ const cardHeaderClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(cardHeaderStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -171,6 +182,43 @@ defineExpose({
 	.origam-card-header {
 		$this: &;
 
+		// CardHeader renders with `tag: 'OrigamToolbar'` so it inherits
+		// `.origam-toolbar`'s own SCSS. Two side-effects we don't want
+		// inside a Card:
+		//   1. `box-shadow: var(--origam-toolbar---box-shadow)` defaults
+		//      to `{shadow.sm}` → visually paints a SECOND elevation on
+		//      top of the parent Card's shadow ("header looks elevated
+		//      on top of the card"). Strip it so only the Card's
+		//      elevation drives the surface depth.
+		//   2. `background: var(--origam-toolbar---background)` defaults
+		//      to the toolbar's neutral surface (white/gray) → covers
+		//      the parent Card's `bgColor` so a Card with
+		//      `bgColor="primary"` paints primary on the body but the
+		//      header stays gray ("color doesn't apply to the header").
+		//      Make it transparent so the Card's intent shows through.
+		//   3. `color: var(--origam-toolbar---color)` resolves to the
+		//      toolbar's own dark-text token → overrides the inherited
+		//      `color: var(--primary-fg)` (white) that the Card pushes
+		//      via `useBothColor` auto-contrast. Result: dark text on
+		//      primary surface → unreadable. Force `color: inherit` so
+		//      the header text follows the Card's contrast pair. NB:
+		//      assigning `inherit` on the `--origam-toolbar---color`
+		//      custom property alone doesn't work — `inherit` on a
+		//      custom prop inherits the VARIABLE value (which falls
+		//      back to its `:root` default), not the parent's `color`.
+		//      We override the resolved `color` declaration directly.
+		--origam-toolbar---box-shadow: none;
+		--origam-toolbar---background: transparent;
+
+		// Compound selector to outrank the toolbar's own
+		// `.origam-toolbar[data-v-X] { color: var(--toolbar-color) }`
+		// rule (same specificity, but toolbar's scoped CSS is bundled
+		// last, so a flat `.origam-card-header { color: inherit }` was
+		// losing the cascade tiebreak).
+		&.origam-toolbar {
+			color: inherit;
+		}
+
 		align-items: var(--origam-card-header---align-items);
 		display: var(--origam-card-header---display);
 		flex: var(--origam-card-header---flex);

package/dist/src/components/Card/OrigamCardText.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-import { useProps } from "../../composables";
+import { useProps, useStyle } from "../../composables";
 import { computed, StyleValue } from "vue";
 const props = defineProps({
   text: { type: [String, Number], required: false },
@@ -28,7 +28,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 },
@@ -60,8 +60,14 @@ const cardTextClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(cardTextStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 

package/dist/src/components/Carousel/OrigamCarousel.vue

@@ -41,15 +41,14 @@
 					</template>
 				</div>
 
-				<template v-if="props.progress">
+				<template v-if="progress">
 					<slot
 							name="progress"
-							v-bind="{percent: (group.getItemIndex(model.value) + 1) / group.items.value.length * 100}"
+							v-bind="{percent: progressPercent}"
 					>
-						<origam-progress-linear
-								:model-value="(group.getItemIndex(model.value) + 1) / group.items.value.length * 100"
-								class="origam-carousel__progress"
-						/>
+						<div class="origam-carousel__progress">
+							<origam-progress-linear :model-value="progressPercent"/>
+						</div>
 					</slot>
 				</template>
 			</slot>
@@ -89,10 +88,15 @@
 
 <script setup>
 import { OrigamBtn, OrigamProgressLinear, OrigamWindow } from "../../components";
-import { useLocale, useProps, useVModel } from "../../composables";
+import {
+  useLocale,
+  useProps,
+  useStyle,
+  useVModel
+} from "../../composables";
 import { DENSITY, MDI_ICONS, SIZES } from "../../enums";
 import { convertToUnit } from "../../utils";
-import { computed, onMounted, ref, StyleValue, useSlots, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, StyleValue, useSlots, watch } from "vue";
 const props = defineProps({
   cycle: { type: Boolean, required: false },
   delimiterIcon: { type: null, required: false, default: MDI_ICONS.CIRCLE },
@@ -139,18 +143,13 @@ 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 },
   elevation: { type: [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 },
   height: { type: [Number, String], required: false, default: 500 },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -164,9 +163,39 @@ const { t } = useLocale();
 const model = useVModel(props, "modelValue");
 const origamWindowRef = ref();
 let slideTimeout = -1;
+const progressPercent = ref(0);
+let progressRaf = -1;
+let progressStart = 0;
+const stopProgress = () => {
+  if (progressRaf !== -1) {
+    window.cancelAnimationFrame(progressRaf);
+    progressRaf = -1;
+  }
+};
+const startProgress = () => {
+  stopProgress();
+  if (!props.cycle || !props.progress) {
+    progressPercent.value = 0;
+    return;
+  }
+  const interval = +props.interval > 0 ? +props.interval : 6e3;
+  progressStart = performance.now();
+  progressPercent.value = 0;
+  const tick = () => {
+    const elapsed = performance.now() - progressStart;
+    progressPercent.value = Math.min(100, elapsed / interval * 100);
+    if (progressPercent.value < 100 && props.cycle && props.progress) {
+      progressRaf = window.requestAnimationFrame(tick);
+    } else {
+      progressRaf = -1;
+    }
+  };
+  progressRaf = window.requestAnimationFrame(tick);
+};
 const startTimeout = () => {
   if (!props.cycle || !origamWindowRef.value) return;
   slideTimeout = window.setTimeout(origamWindowRef.value.group.next, +props.interval > 0 ? +props.interval : 6e3);
+  startProgress();
 };
 const restartTimeout = () => {
   window.clearTimeout(slideTimeout);
@@ -176,9 +205,21 @@ watch(model, restartTimeout);
 watch(() => props.interval, restartTimeout);
 watch(() => props.cycle, (val) => {
   if (val) restartTimeout();
-  else window.clearTimeout(slideTimeout);
+  else {
+    window.clearTimeout(slideTimeout);
+    stopProgress();
+    progressPercent.value = 0;
+  }
+});
+watch(() => props.progress, (val) => {
+  if (val && props.cycle) startProgress();
+  else stopProgress();
 });
 onMounted(startTimeout);
+onBeforeUnmount(() => {
+  window.clearTimeout(slideTimeout);
+  stopProgress();
+});
 const windowProps = computed(() => {
   return origamWindowRef.value?.filterProps(props, ["modelValue"]);
 });
@@ -226,8 +267,14 @@ const carouselControlsStyles = computed(() => {
     props.style
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(carouselStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -235,20 +282,21 @@ defineExpose({
 	.origam-carousel {
 		$this: &;
 
-		overflow: hidden;
-		position: relative;
-		width: 100%;
+		overflow: var(--origam-carousel---overflow, hidden);
+		position: var(--origam-carousel---position, relative);
+		width: var(--origam-carousel---width, 100%);
 
 		&__controls {
 			align-items: center;
-			bottom: 0;
+			bottom: var(--origam-carousel__controls---position-bottom, 0);
 			display: flex;
-			height: 50px;
+			height: var(--origam-carousel__controls---height, 50px);
 			justify-content: center;
 			list-style-type: none;
-			position: absolute;
-			width: 100%;
-			z-index: 1;
+			position: var(--origam-carousel__controls---position, absolute);
+			width: var(--origam-carousel__controls---width, 100%);
+			z-index: var(--origam-carousel__controls---z-index, 1);
+			background-color: var(--origam-carousel__controls---background-color, rgba(0, 0, 0, 0.4));
 
 			> .origam-item-group {
 				flex: 0 1 auto;
@@ -256,15 +304,15 @@ defineExpose({
 		}
 
 		&__controls-item {
-			margin: 0 8px;
+			margin-inline: var(--origam-carousel__controls-item---margin-inline, 8px);
 
 			.origam-icon {
-				opacity: 0.5;
+				opacity: var(--origam-carousel__controls-item---opacity, 0.5);
 			}
 
 			&--active {
 				.origam-icon {
-					opacity: 1;
+					opacity: var(--origam-carousel__controls-item---opacity-active, 1);
 					vertical-align: middle;
 				}
 			}
@@ -273,22 +321,29 @@ defineExpose({
 				background: none;
 
 				.origam-icon {
-					opacity: 0.8;
+					opacity: var(--origam-carousel__controls-item---opacity-hover, 0.8);
 				}
 			}
 		}
 
 		&__progress {
-			margin: 0;
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			right: 0;
+			margin: var(--origam-carousel__progress---margin, 0);
+			position: var(--origam-carousel__progress---position, absolute);
+			// Defaults to TOP so the progress bar isn't hidden behind the
+			// 50 px-tall `__controls` strip at the bottom. Both edges are
+			// still overridable via the CSS variable triplet below — set
+			// `--origam-carousel__progress---position-top: auto` and a
+			// `--…position-bottom` value to put it at the bottom instead.
+			top: var(--origam-carousel__progress---position-top, 0);
+			bottom: var(--origam-carousel__progress---position-bottom, auto);
+			left: var(--origam-carousel__progress---position-left, 0);
+			right: var(--origam-carousel__progress---position-right, 0);
+			z-index: var(--origam-carousel__progress---z-index, 2);
 		}
 
 		&--hide-delimiter-background {
 			#{$this}__controls {
-				background: transparent;
+				background: var(--origam-carousel--hide-delimiter-background---controls-background, transparent);
 			}
 		}
 
@@ -296,14 +351,8 @@ defineExpose({
 			#{$this}__controls {
 				flex-direction: column;
 				height: 100% !important;
-				width: 50px;
+				width: var(--origam-carousel--vertical-delimiters---controls-width, 50px);
 			}
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/components/Carousel/OrigamCarouselItem.vue

@@ -39,7 +39,10 @@
 
 <script setup>
 import { OrigamImg, OrigamWindowItem } from "../../components";
-import { useProps } from "../../composables";
+import {
+  useProps,
+  useStyle
+} from "../../composables";
 import { computed, ref, StyleValue, useAttrs, useSlots } from "vue";
 const props = defineProps({
   transition: { type: [Boolean, String], required: false, default: void 0 },
@@ -57,10 +60,6 @@ const props = defineProps({
   position: { type: 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 },
   aspectRatio: { type: [String, Number], required: false },
   contentClass: { type: String, required: false },
   inline: { type: Boolean, required: false },
@@ -96,7 +95,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 },
@@ -129,8 +128,14 @@ const carouselItemClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(carouselItemStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -145,9 +150,3 @@ defineExpose({
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/components/Checkbox/OrigamCheckbox.vue

@@ -57,7 +57,12 @@
 
 <script setup>
 import { OrigamCheckboxBtn, OrigamInput } from "../../components";
-import { useFocus, useProps, useVModel } from "../../composables";
+import {
+  useFocus,
+  useProps,
+  useStyle,
+  useVModel
+} from "../../composables";
 import { DENSITY } from "../../enums";
 import { filterInputAttrs, getUid } from "../../utils";
 import { computed, ref, StyleValue, useAttrs, useSlots } from "vue";
@@ -86,17 +91,13 @@ 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 },
   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 },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -130,6 +131,7 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
+  size: { type: null, required: false },
   indeterminate: { type: Boolean, required: false },
   indeterminateIcon: { type: null, required: false },
   trueValue: { type: null, required: false },
@@ -142,9 +144,13 @@ const props = defineProps({
   multiple: { type: Boolean, required: false },
   type: { type: String, required: false },
   valueComparator: { type: Function, required: false },
-  ripple: { type: [Boolean, Object], required: false }
+  ripple: { type: [Boolean, Object], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  hover: { type: [Boolean, Object], required: false }
 });
 const emits = defineEmits(["update:modelValue", "update:focused", "click:label"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const origamInputRef = ref();
 const origamCheckboxBtnRef = ref();
@@ -177,8 +183,15 @@ const checkboxClasses = computed(() => {
     props.class
   ];
 });
+const { id: styleId, css, load, isLoaded, unload } = useStyle(checkboxStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded,
+  styleId
 });
 </script>
 
@@ -193,9 +206,3 @@ defineExpose({
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/components/Checkbox/OrigamCheckboxBtn.vue

@@ -40,7 +40,11 @@
 
 <script setup>
 import { OrigamSelectionControl } from "../../components";
-import { useProps, useVModel } from "../../composables";
+import {
+  useProps,
+  useStyle,
+  useVModel
+} from "../../composables";
 import { DENSITY, MDI_ICONS } from "../../enums";
 import { computed, ref, StyleValue, useSlots } from "vue";
 const props = defineProps({
@@ -66,15 +70,15 @@ const props = defineProps({
   type: { type: String, required: false },
   valueComparator: { type: Function, 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, default: DENSITY.DEFAULT },
-  ripple: { type: [Boolean, Object], required: false }
+  ripple: { type: [Boolean, Object], required: false },
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  hover: { type: [Boolean, Object], required: false }
 });
-const emits = defineEmits(["update:modelValue", "update:focused", "update:indeterminate", "click:label"]);
+const emits = defineEmits(["update:indeterminate", "update:modelValue", "update:focused", "click:label"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const origamSelectionControlRef = ref();
 const indeterminate = useVModel(props, "indeterminate");
@@ -108,7 +112,13 @@ const checkboxBtnClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(checkboxBtnStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>