origam 2.5.0 → 2.6.1

package/dist/src/components/Video/OrigamVideo.vue

@@ -131,6 +131,7 @@
 				role="status"
 				:aria-label="t('origam.loading')"
 				data-cy="origam-video-loading"
+				:style="typographyLoadingStyles"
 		>
 			<slot name="loading">
 				<origam-icon
@@ -146,6 +147,7 @@
 				class="origam-video__error"
 				role="alert"
 				data-cy="origam-video-error"
+				:style="typographyErrorStyles"
 		>
 			<slot
 					name="error"
@@ -182,45 +184,33 @@
 					@download="onDownloadClick"
 			>
 				<template #extraControlsRight>
-					<button
+					<origam-btn
 							v-if="hasCaptions"
-							type="button"
+							:icon="ICONS.CAPTIONS"
+							variant="text"
+							:active="captionsEnabled"
 							class="origam-video__btn"
-							:class="{ 'origam-video__btn--active': captionsEnabled }"
 							:aria-label="t(captionsLabelKey)"
 							data-cy="origam-video-captions"
 							@click="toggleCaptions"
-					>
-						<origam-icon
-								:icon="ICONS.CAPTIONS"
-								aria-hidden="true"
-						/>
-					</button>
-					<button
+					/>
+					<origam-btn
 							v-if="pipSupported"
-							type="button"
+							:icon="ICONS.PIP"
+							variant="text"
 							class="origam-video__btn"
 							:aria-label="t(pipLabelKey)"
 							data-cy="origam-video-pip"
 							@click="togglePipBtn"
-					>
-						<origam-icon
-								:icon="ICONS.PIP"
-								aria-hidden="true"
-						/>
-					</button>
-					<button
-							type="button"
+					/>
+					<origam-btn
+							:icon="fullscreenIcon"
+							variant="text"
 							class="origam-video__btn"
 							:aria-label="t(fullscreenLabelKey)"
 							data-cy="origam-video-fullscreen"
 							@click="toggleFullscreenBtn"
-					>
-						<origam-icon
-								:icon="fullscreenIcon"
-								aria-hidden="true"
-						/>
-					</button>
+					/>
 				</template>
 			</origam-media-controller>
 		</slot>
@@ -228,7 +218,7 @@
 	</origam-responsive>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   onBeforeUnmount,
@@ -239,7 +229,7 @@ import { OrigamBtn } from "../Btn";
 import { OrigamIcon } from "../Icon";
 import { OrigamMediaController } from "../Media";
 import { OrigamResponsive } from "../Responsive";
-import { shouldSuppressAutoplay, useBorder, useColorEffect, useDimension, useElevation, useLocale, useMargin, usePadding, useRounded, useVideoPlayer } from "../../composables";
+import { shouldSuppressAutoplay, useBorder, useColorEffect, useDimension, useElevation, useLocale, useMargin, usePadding, useRounded, useTypography, useVideoPlayer } from "../../composables";
 import { MDI_ICONS } from "../../enums";
 const { t } = useLocale();
 const props = defineProps({
@@ -303,7 +293,12 @@ const props = defineProps({
   paddingRight: { type: [Boolean, Number, String], required: false },
   paddingBlock: { type: [Boolean, Number, String], required: false },
   paddingInline: { type: [Boolean, Number, String], required: false },
-  elevation: { type: [Number, String], required: false }
+  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 }
 });
 const emit = defineEmits(["enterfullscreen", "exitfullscreen", "enterpip", "exitpip", "skip", "quality-change", "download", "play", "pause", "ended", "timeupdate", "volumechange", "loadedmetadata", "error", "update:playbackRate"]);
 const ICONS = {
@@ -613,6 +608,8 @@ const { paddingClasses, paddingStyles } = usePadding(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { elevationClasses } = useElevation(props);
 const { dimensionStyles } = useDimension(props);
+const { typographyStyles: typographyLoadingStyles } = useTypography(props, "video__loading");
+const { typographyStyles: typographyErrorStyles } = useTypography(props, "video--error");
 const scrubberColorStyle = computed(() => {
   if (hasColorProp.value || hasBgColorProp.value) {
     return { "--origam-media-controller__scrubber---color": "currentColor" };
@@ -1032,49 +1029,45 @@ defineExpose({
 		}
 	}
 
-	.origam-video__btn {
-		all: unset;
-		box-sizing: border-box;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 36px;
-		height: 36px;
-		border-radius: 50%;
-		cursor: pointer;
-		color: #ffffff;
-		transition: background-color 120ms ease, transform 120ms ease, opacity 120ms ease;
+	:deep(.origam-video__btn.origam-btn) {
+		--origam-btn---color: #ffffff;
+		--origam-btn---min-width: 36px;
+		--origam-btn---width: 36px;
+		--origam-btn---height: 36px;
+		--origam-btn---min-height: 36px;
+		--origam-btn---border-radius: 50%;
 		opacity: 0.95;
-	}
+		transition: background-color 120ms ease, transform 120ms ease, opacity 120ms ease;
 
-	.origam-video__btn:hover,
-	.origam-video__btn:focus-visible {
-		opacity: 1;
-		background-color: rgba(255, 255, 255, 0.12);
-	}
+		&:hover,
+		&:focus-visible {
+			opacity: 1;
+			background-color: rgba(255, 255, 255, 0.12);
+		}
+
+		&:active {
+			transform: scale(0.92);
+		}
 
-	.origam-video__btn:active {
-		transform: scale(0.92);
+		.origam-icon {
+			font-size: 20px;
+			line-height: 1;
+		}
 	}
 
-	.origam-video__btn--active {
+	:deep(.origam-video__btn.origam-btn.origam-btn--active) {
 		opacity: 1;
 		position: relative;
-	}
-
-	.origam-video__btn--active::after {
-		content: '';
-		position: absolute;
-		bottom: 2px;
-		width: 4px;
-		height: 4px;
-		border-radius: 50%;
-		background: #ef4444;
-	}
 
-	.origam-video__btn .origam-icon {
-		font-size: 20px;
-		line-height: 1;
+		&::after {
+			content: '';
+			position: absolute;
+			bottom: 2px;
+			width: 4px;
+			height: 4px;
+			border-radius: 50%;
+			background: #ef4444;
+		}
 	}
 
 	.origam-video--fullscreen {

package/dist/src/components/VirtualScroll/OrigamVirtualScroll.vue

@@ -77,7 +77,7 @@
 	</template>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, onMounted, onScopeDispose, Ref, StyleValue, toRef } from "vue";
 import { OrigamVirtualScrollItem } from "../../components";
 import {

package/dist/src/components/VirtualScroll/OrigamVirtualScrollItem.vue

@@ -17,7 +17,7 @@
 	</template>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, useAttrs, watch } from "vue";
 import {
   useProps,
@@ -58,8 +58,3 @@ defineExpose({
   isLoaded
 });
 </script>
-
-<style lang="scss" scoped>
-	.origam-virtual-scroll-item {
-	}
-</style>

package/dist/src/components/Watermark/OrigamWatermark.vue

@@ -19,7 +19,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   onBeforeUnmount,

package/dist/src/components/Window/OrigamWindow.vue

@@ -30,6 +30,9 @@
 						<origam-btn
 								v-if="canMoveBack"
 								v-bind="prevProps"
+								:bg-color="bgColor"
+								:hover="hover"
+								:active="active"
 						/>
 					</slot>
 
@@ -42,6 +45,9 @@
 						<origam-btn
 								v-if="canMoveForward"
 								v-bind="nextProps"
+								:bg-color="bgColor"
+								:hover="hover"
+								:active="active"
 						/>
 					</slot>
 				</slot>
@@ -55,13 +61,18 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, provide, ref, shallowRef, StyleValue, watch } from "vue";
 import { OrigamBtn, OrigamSpacer } from "../../components";
 import {
+  useBorder,
+  useElevation,
   useGroup,
   useLocale,
+  useMargin,
+  usePadding,
   useProps,
+  useRounded,
   useStyle
 } from "../../composables";
 import { ORIGAM_WINDOW_GROUP_KEY, ORIGAM_WINDOW_KEY } from "../../consts";
@@ -111,7 +122,11 @@ const props = defineProps({
   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 }
+  elevation: { type: [Number, String], required: false },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  hover: { type: [Boolean, Object], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false }
 });
 defineEmits(["update:modelValue"]);
 const { filterProps } = useProps(props);
@@ -194,8 +209,18 @@ const touchOptions = computed(() => {
     ...props.touch === true ? {} : props.touch
   };
 });
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { borderClasses, borderStyles } = useBorder(props);
+const { elevationClasses, elevationStyles } = useElevation(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
 const windowStyles = computed(() => {
   return [
+    roundedStyles.value,
+    borderStyles.value,
+    elevationStyles.value,
+    paddingStyles.value,
+    marginStyles.value,
     props.style
   ];
 });
@@ -205,6 +230,11 @@ const windowClasses = computed(() => {
     {
       "origam-window--show-arrows-on-hover": props.showArrows === "hover"
     },
+    roundedClasses.value,
+    borderClasses.value,
+    elevationClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });

package/dist/src/components/Window/OrigamWindowItem.vue

@@ -17,7 +17,7 @@
 	</origam-transition>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, nextTick, shallowRef, StyleValue } from "vue";
 import { OrigamTransition } from "../../components";
 import {

package/dist/src/components/index.cjs

@@ -1004,7 +1004,7 @@ Object.keys(_Treeview).forEach(function (key) {
     }
   });
 });
-var _QrCode = require("./QrCode");
+var _QrCode = require("./QrCode/index.cjs");
 Object.keys(_QrCode).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _QrCode[key]) return;

package/dist/src/components/index.js

@@ -89,7 +89,7 @@ export * from "./Kbd/index.js";
 export * from "./Stepper/index.js";
 export * from "./Timeline/index.js";
 export * from "./Treeview/index.js";
-export * from "./QrCode";
+export * from "./QrCode/index.js";
 export * from "./Watermark/index.js";
 export * from "./Video/index.js";
 export * from "./Audio/index.js";

package/dist/src/composables/Chart/chart-gauge.composable.cjs

@@ -17,7 +17,7 @@ const useChartGauge = options => {
     const min = options.min();
     const max = options.max();
     const value = options.value();
-    const thickness = options.thickness?.() ?? DEFAULT_THICKNESS;
+    const thickness = Math.max(1, options.thickness?.() ?? DEFAULT_THICKNESS);
     const startAngle = options.startAngle?.() ?? DEFAULT_START_ANGLE;
     const endAngle = options.endAngle?.() ?? DEFAULT_END_ANGLE;
     const cx = (padding.left + width - padding.right) / 2;

package/dist/src/composables/Chart/chart-gauge.composable.js

@@ -13,7 +13,7 @@ export const useChartGauge = (options) => {
     const min = options.min();
     const max = options.max();
     const value = options.value();
-    const thickness = options.thickness?.() ?? DEFAULT_THICKNESS;
+    const thickness = Math.max(1, options.thickness?.() ?? DEFAULT_THICKNESS);
     const startAngle = options.startAngle?.() ?? DEFAULT_START_ANGLE;
     const endAngle = options.endAngle?.() ?? DEFAULT_END_ANGLE;
     const cx = (padding.left + width - padding.right) / 2;

package/dist/src/composables/Chart/chart-header-typography.composable.cjs

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartHeaderTypography = useChartHeaderTypography;
+var _vue = require("vue");
+var _typography = require("../Commons/typography.composable.cjs");
+function useChartHeaderTypography(props) {
+  const {
+    typographyStyles: titleTypographyStyles
+  } = (0, _typography.useTypography)(props, "chart__title");
+  const {
+    typographyStyles: subtitleTypographyStyles
+  } = (0, _typography.useTypography)(props, "chart__subtitle");
+  const headerTypographyStyles = (0, _vue.computed)(() => [titleTypographyStyles.value, subtitleTypographyStyles.value]);
+  return {
+    headerTypographyStyles
+  };
+}

package/dist/src/composables/Chart/chart-header-typography.composable.d.ts

@@ -0,0 +1,27 @@
+import type { StyleValue } from 'vue';
+import type { ITypographyProps } from '../../interfaces';
+/**
+ * useChartHeaderTypography — applies the shared `ITypographyProps` surface to a
+ * chart's header (title + subtitle) at once.
+ *
+ * Both the title and subtitle `<text>` of every chart read the GLOBAL
+ * `--origam-chart__title---*` / `--origam-chart__subtitle---*` variables (their
+ * per-type element classes — `chart-gauge__title`, `chart-cartesian__title`, …
+ * — all reference the same shared vars in SCSS). So the returned styles are
+ * bound on the chart ROOT element and cascade down to those descendant `<text>`
+ * nodes; no per-element binding is needed.
+ *
+ * Effective props on SVG `<text>`: **fontSize + fontWeight** only (title reads
+ * both, subtitle reads font-size). `fontFamily` / `lineHeight` / `letterSpacing`
+ * are part of the surface but inert on charts — no SCSS rule reads them, and
+ * `line-height` is not even a valid SVG `<text>` property. See the chart
+ * typography recipe.
+ *
+ * @example
+ * // in a chart component:
+ * const { headerTypographyStyles } = useChartHeaderTypography(props)
+ * // template root: :style="[rootStyles, …, headerTypographyStyles]"
+ */
+export declare function useChartHeaderTypography(props: ITypographyProps): {
+    headerTypographyStyles: import("vue").ComputedRef<StyleValue>;
+};

package/dist/src/composables/Chart/chart-header-typography.composable.js

@@ -0,0 +1,11 @@
+import { computed } from "vue";
+import { useTypography } from "../Commons/typography.composable.js";
+export function useChartHeaderTypography(props) {
+  const { typographyStyles: titleTypographyStyles } = useTypography(props, "chart__title");
+  const { typographyStyles: subtitleTypographyStyles } = useTypography(props, "chart__subtitle");
+  const headerTypographyStyles = computed(() => [
+    titleTypographyStyles.value,
+    subtitleTypographyStyles.value
+  ]);
+  return { headerTypographyStyles };
+}

package/dist/src/composables/Chart/chart-zoom.composable.cjs

@@ -47,7 +47,6 @@ function useChartZoom(options) {
     const cur = effectiveEnd.value;
     const visibleRange = cur - zoomStart.value;
     if (visibleRange < MIN_VISIBLE_CATEGORIES - 1 && deltaFraction > 0) return;
-    const delta = visibleRange * deltaFraction;
     const anchor = zoomStart.value + visibleRange * Math.max(0, Math.min(1, anchorFraction));
     const newStart = anchor - (anchor - zoomStart.value) * (1 - deltaFraction);
     const newEnd = anchor + (cur - anchor) * (1 - deltaFraction);

package/dist/src/composables/Chart/chart-zoom.composable.js

@@ -41,7 +41,6 @@ export function useChartZoom(options) {
     const cur = effectiveEnd.value;
     const visibleRange = cur - zoomStart.value;
     if (visibleRange < MIN_VISIBLE_CATEGORIES - 1 && deltaFraction > 0) return;
-    const delta = visibleRange * deltaFraction;
     const anchor = zoomStart.value + visibleRange * Math.max(0, Math.min(1, anchorFraction));
     const newStart = anchor - (anchor - zoomStart.value) * (1 - deltaFraction);
     const newEnd = anchor + (cur - anchor) * (1 - deltaFraction);

package/dist/src/composables/Chart/chart.composable.cjs

@@ -569,16 +569,6 @@ const useChart = options => {
     }
     return pctMap;
   });
-  const pieTotal = (0, _vue.computed)(() => {
-    const first = options.series()[0];
-    if (!first) return 0;
-    let total = 0;
-    for (const entry of first.data) {
-      const y = typeof entry === "number" ? entry : entry.y;
-      if (y > 0) total += y;
-    }
-    return total;
-  });
   const paths = (0, _vue.computed)(() => {
     const out = [];
     const series = options.series();
@@ -591,7 +581,6 @@ const useChart = options => {
       cx,
       cy
     } = plot.value;
-    const baseline = scales.value.y(Math.max(0, yRange.value.min));
     const smoothing = options.smoothing();
     const pieSeriesList = series.filter(s => effectiveType(s) === "pie" || effectiveType(s) === "donut");
     if (pieSeriesList.length > 0) {

package/dist/src/composables/Chart/chart.composable.js

@@ -518,22 +518,11 @@ export const useChart = (options) => {
     }
     return pctMap;
   });
-  const pieTotal = computed(() => {
-    const first = options.series()[0];
-    if (!first) return 0;
-    let total = 0;
-    for (const entry of first.data) {
-      const y = typeof entry === "number" ? entry : entry.y;
-      if (y > 0) total += y;
-    }
-    return total;
-  });
   const paths = computed(() => {
     const out = [];
     const series = options.series();
     const cats = categories.value;
     const { x0, x1, y0, y1, cx, cy } = plot.value;
-    const baseline = scales.value.y(Math.max(0, yRange.value.min));
     const smoothing = options.smoothing();
     const pieSeriesList = series.filter((s) => effectiveType(s) === "pie" || effectiveType(s) === "donut");
     if (pieSeriesList.length > 0) {

package/dist/src/composables/Code/code.composable.js

@@ -24,7 +24,10 @@ function lruSet(key, value) {
 async function loadHighlighter() {
   if (_highlighterPromise) return _highlighterPromise;
   _highlighterPromise = (async () => {
-    const shiki = await import("shiki");
+    const shiki = await import(
+      /* @vite-ignore */
+      "shiki"
+    );
     const highlighter = await shiki.createHighlighter({
       themes: [LIGHT_THEME, DARK_THEME],
       langs: [...SUPPORTED_LANGS]

package/dist/src/composables/Commons/audio.composable.d.ts

@@ -3,17 +3,17 @@ import type { IUseAudioProps } from '../../interfaces';
  * useAudio
  ********************************************************/
 export declare function useAudio(props: IUseAudioProps): {
-    audioData: import("vue").ShallowRef<Uint8Array<ArrayBufferLike> | null, Uint8Array<ArrayBufferLike> | null>;
+    audioData: import("vue").ShallowRef<Uint8Array<ArrayBuffer> | null, Uint8Array<ArrayBuffer> | null>;
     analyser: import("vue").Ref<{
         fftSize: number;
         readonly frequencyBinCount: number;
         maxDecibels: number;
         minDecibels: number;
         smoothingTimeConstant: number;
-        getByteFrequencyData: (array: Uint8Array) => void;
-        getByteTimeDomainData: (array: Uint8Array) => void;
-        getFloatFrequencyData: (array: Float32Array) => void;
-        getFloatTimeDomainData: (array: Float32Array) => void;
+        getByteFrequencyData: (array: Uint8Array<ArrayBuffer>) => void;
+        getByteTimeDomainData: (array: Uint8Array<ArrayBuffer>) => void;
+        getFloatFrequencyData: (array: Float32Array<ArrayBuffer>) => void;
+        getFloatTimeDomainData: (array: Float32Array<ArrayBuffer>) => void;
         channelCount: number;
         channelCountMode: ChannelCountMode;
         channelInterpretation: ChannelInterpretation;
@@ -233,10 +233,10 @@ export declare function useAudio(props: IUseAudioProps): {
         maxDecibels: number;
         minDecibels: number;
         smoothingTimeConstant: number;
-        getByteFrequencyData: (array: Uint8Array) => void;
-        getByteTimeDomainData: (array: Uint8Array) => void;
-        getFloatFrequencyData: (array: Float32Array) => void;
-        getFloatTimeDomainData: (array: Float32Array) => void;
+        getByteFrequencyData: (array: Uint8Array<ArrayBuffer>) => void;
+        getByteTimeDomainData: (array: Uint8Array<ArrayBuffer>) => void;
+        getFloatFrequencyData: (array: Float32Array<ArrayBuffer>) => void;
+        getFloatTimeDomainData: (array: Float32Array<ArrayBuffer>) => void;
         channelCount: number;
         channelCountMode: ChannelCountMode;
         channelInterpretation: ChannelInterpretation;

package/dist/src/composables/Commons/border.composable.cjs

@@ -43,6 +43,16 @@ function useBorder(props, name = (0, _utils.getCurrentInstanceName)()) {
       }
     } else if (typeof border === "number") {
       styles.push(`border-width: ${(0, _utils.convertToUnit)(border)}`);
+      styles.push("border-style: solid");
+      styles.push("border-color: currentColor");
+    }
+    if (!(0, _vue.isRef)(props)) {
+      const {
+        borderColor,
+        borderStyle
+      } = props;
+      if (!(0, _utils.isEmpty)(borderColor)) styles.push(`border-color: ${borderColor}`);
+      if (!(0, _utils.isEmpty)(borderStyle)) styles.push(`border-style: ${borderStyle}`);
     }
     return styles;
   });

package/dist/src/composables/Commons/border.composable.js

@@ -41,6 +41,13 @@ export function useBorder(props, name = getCurrentInstanceName()) {
       }
     } else if (typeof border === "number") {
       styles.push(`border-width: ${convertToUnit(border)}`);
+      styles.push("border-style: solid");
+      styles.push("border-color: currentColor");
+    }
+    if (!isRef(props)) {
+      const { borderColor, borderStyle } = props;
+      if (!isEmpty(borderColor)) styles.push(`border-color: ${borderColor}`);
+      if (!isEmpty(borderStyle)) styles.push(`border-style: ${borderStyle}`);
     }
     return styles;
   });