orio-ui 1.16.0 → 1.16.2

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "1.16.0",
+  "version": "1.16.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/Badge.d.vue.ts

@@ -1,8 +1,7 @@
 export type BadgeVariant = "danger" | "alert" | "primary" | "grey";
-export type BadgeType = "default" | "pill";
 interface Props {
     variant?: BadgeVariant;
-    type?: BadgeType;
+    pill?: boolean;
 }
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
 type __VLS_Slots = {} & {
@@ -13,8 +12,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_5) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    type: BadgeType;
     variant: BadgeVariant;
+    pill: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Badge.vue

@@ -2,7 +2,7 @@
 import { useSlots, computed } from "vue";
 const props = defineProps({
   variant: { type: String, required: false, default: "primary" },
-  type: { type: String, required: false, default: "default" }
+  pill: { type: Boolean, required: false, default: false }
 });
 const slots = useSlots();
 const hasWrapping = computed(() => !!slots.wrapping);
@@ -13,15 +13,15 @@ const isDot = computed(() => !hasDefaultContent.value);
 <template>
   <div v-if="hasWrapping" class="badge-wrapper">
     <slot name="wrapping" />
-    <span class="badge positioned" :class="[variant, type, { dot: isDot }]">
+    <span class="badge positioned" :class="[variant, { pill, dot: isDot }]">
       <slot />
     </span>
   </div>
-  <span v-else class="badge" :class="[variant, type, { dot: isDot }]">
+  <span v-else class="badge" :class="[variant, { pill, dot: isDot }]">
     <slot />
   </span>
 </template>
 
 <style scoped>
-.badge-wrapper{display:inline-flex;position:relative}.badge{align-items:center;border:1px solid transparent;border-radius:var(--border-radius-sm);display:inline-flex;font-size:var(--font-sm);font-weight:600;justify-content:center;padding:.125rem .5rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.badge.positioned{position:absolute;right:.5rem;top:.5rem;transform:translate(50%,-50%)}.badge.pill{border-radius:var(--border-radius-pill)}.badge.dot{border-radius:50%;height:.5rem;min-height:.5rem;min-width:.5rem;padding:0;width:.5rem}.badge.primary{background-color:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}.badge.danger{background-color:var(--color-danger);border-color:var(--color-danger);color:var(--color-danger-ink)}.badge.alert{background-color:var(--color-alert);border-color:var(--color-alert);color:var(--color-alert-ink)}.badge.grey{background-color:var(--color-surface);border-color:var(--color-border);color:var(--color-muted)}
+.badge-wrapper{display:inline-flex;position:relative}.badge{align-items:center;border:1px solid transparent;border-radius:var(--border-radius-sm);display:inline-flex;font-size:var(--font-sm);font-weight:600;justify-content:center;padding:.125rem .35rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.badge.positioned{position:absolute;right:.5rem;top:.5rem;transform:translate(50%,-50%)}.badge.pill{border-radius:var(--border-radius-pill)}.badge.dot{border-radius:50%;height:.5rem;min-height:.5rem;min-width:.5rem;padding:0;width:.5rem}.badge.primary{background-color:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}.badge.danger{background-color:var(--color-danger);border-color:var(--color-danger);color:var(--color-danger-ink)}.badge.alert{background-color:var(--color-alert);border-color:var(--color-alert);color:var(--color-alert-ink)}.badge.grey{background-color:var(--color-surface);border-color:var(--color-border);color:var(--color-muted)}
 </style>

package/dist/runtime/components/Badge.vue.d.ts

@@ -1,8 +1,7 @@
 export type BadgeVariant = "danger" | "alert" | "primary" | "grey";
-export type BadgeType = "default" | "pill";
 interface Props {
     variant?: BadgeVariant;
-    type?: BadgeType;
+    pill?: boolean;
 }
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
 type __VLS_Slots = {} & {
@@ -13,8 +12,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_5) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    type: BadgeType;
     variant: BadgeVariant;
+    pill: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/gallery/Carousel.d.vue.ts

@@ -1,7 +1,9 @@
+export type CarouselAppearance = "default" | "minimal";
 interface CarouselProps {
     images?: string[];
     size?: string;
     fit?: "fill" | "cover" | "contain" | "scale-down";
+    appearance?: CarouselAppearance;
 }
 type __VLS_Props = CarouselProps;
 type __VLS_ModelProps = {
@@ -23,6 +25,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:activeImage"?: ((value: string | undefined) => any) | undefined;
 }>, {
+    appearance: CarouselAppearance;
     size: string;
     images: string[];
     fit: "fill" | "cover" | "contain" | "scale-down";

package/dist/runtime/components/gallery/Carousel.vue

@@ -4,9 +4,10 @@ import { useElementSize } from "@vueuse/core";
 const props = defineProps({
   images: { type: Array, required: false, default: () => [] },
   size: { type: String, required: false, default: "400:550" },
-  fit: { type: String, required: false, default: "contain" }
+  fit: { type: String, required: false, default: "contain" },
+  appearance: { type: String, required: false, default: "default" }
 });
-const { images, size, fit } = toRefs(props);
+const { images, size, fit, appearance } = toRefs(props);
 const rawSizes = computed(() => {
   const parts = size.value.split(":");
   return {
@@ -113,7 +114,7 @@ onMounted(() => {
         <img :src="activeImage" :alt="activeImage" />
       </slot>
     </div>
-    <div ref="carousel" class="carousel">
+    <div ref="carousel" class="carousel" :class="`carousel--${appearance}`">
       <div
         class="carousel-track"
         @pointerdown="onPointerDown"
@@ -156,5 +157,5 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.carousel-wrapper{display:block;position:relative}.carousel-measure{height:-moz-max-content;height:max-content;pointer-events:none;position:absolute;visibility:hidden;width:-moz-max-content;width:max-content}.carousel-measure img{display:block}.carousel{border:1px solid var(--color-border);border-radius:var(--border-radius-lg);height:v-bind("calculatedSize.height");max-height:v-bind(maxHeight);max-width:100%;overflow:hidden;transition:width .3s ease,height .3s ease;width:v-bind("calculatedSize.width")}.carousel-track{align-items:center;cursor:grab;display:flex;gap:.75rem;height:100%;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.carousel-track:active{cursor:grabbing}.carousel-item{background:var(--color-surface);border-radius:var(--border-radius-sm);color:var(--color-text);height:100%;inset:0;opacity:0;padding:.5rem .75rem;pointer-events:none;position:absolute;transition:opacity .5s ease-in-out,transform .5s ease-in-out;white-space:nowrap;width:100%}.carousel-item.previous-image{transform:translateX(-100%)}.carousel-item.next-image{transform:translateX(100%)}.carousel-item.active-image{opacity:1;pointer-events:auto;transform:translateX(0)}.carousel-item img{height:100%;-o-object-fit:v-bind(fit);object-fit:v-bind(fit);width:100%}.carousel-empty{color:var(--color-muted)}.switch-button{position:absolute}.switch-button :deep(button){background:transparent!important;border:none!important;color:transparent!important}.switch-button :deep(button:hover){color:transparent!important}.switch-button :deep(.orio-icon){color:#fff!important;fill:#fff!important;filter:drop-shadow(0 0 2px rgba(0,0,0,.8)) drop-shadow(0 0 4px rgba(0,0,0,.6))}@supports (mix-blend-mode:difference) and (not (-webkit-hyphens:none)){.switch-button :deep(.orio-icon){color:#000!important;fill:#000!important;filter:grayscale(1) contrast(9) invert(1) drop-shadow(0 0 1px black) drop-shadow(0 0 2px black);mix-blend-mode:difference}}.switch-button.previous-button{left:0}.switch-button.next-button{right:0}
+.carousel-wrapper{display:block;position:relative}.carousel-measure{height:-moz-max-content;height:max-content;pointer-events:none;position:absolute;visibility:hidden;width:-moz-max-content;width:max-content}.carousel-measure img{display:block}.carousel{border:1px solid var(--color-border);border-radius:var(--border-radius-lg);height:v-bind("calculatedSize.height");max-height:v-bind(maxHeight);max-width:100%;overflow:hidden;transition:width .3s ease,height .3s ease;width:v-bind("calculatedSize.width")}.carousel-track{align-items:center;cursor:grab;display:flex;gap:.75rem;height:100%;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.carousel-track:active{cursor:grabbing}.carousel-item{background:var(--color-surface);border-radius:var(--border-radius-sm);color:var(--color-text);height:100%;inset:0;opacity:0;overflow:hidden;padding:.5rem .75rem;pointer-events:none;position:absolute;transition:opacity .5s ease-in-out,transform .5s ease-in-out;white-space:nowrap;width:100%}.carousel-item.previous-image{transform:translateX(-100%)}.carousel-item.next-image{transform:translateX(100%)}.carousel-item.active-image{opacity:1;pointer-events:auto;transform:translateX(0)}.carousel-item img{height:100%;-o-object-fit:v-bind(fit);object-fit:v-bind(fit);width:100%}.carousel-empty{color:var(--color-muted)}.switch-button{position:absolute}.switch-button :deep(button){background:transparent!important;border:none!important;color:transparent!important}.switch-button :deep(button:hover){color:transparent!important}.switch-button :deep(.orio-icon){color:#fff!important;fill:#fff!important;filter:drop-shadow(0 0 2px rgba(0,0,0,.8)) drop-shadow(0 0 4px rgba(0,0,0,.6))}@supports (mix-blend-mode:difference) and (not (-webkit-hyphens:none)){.switch-button :deep(.orio-icon){color:#000!important;fill:#000!important;filter:grayscale(1) contrast(9) invert(1) drop-shadow(0 0 1px black) drop-shadow(0 0 2px black);mix-blend-mode:difference}}.switch-button.previous-button{left:0}.switch-button.next-button{right:0}.carousel--minimal{background:none;border:none}.carousel--minimal .carousel-item{background:none}.carousel--minimal .switch-button{opacity:0;transition:opacity .2s ease}.carousel--minimal:hover .switch-button{opacity:1}
 </style>

package/dist/runtime/components/gallery/Carousel.vue.d.ts

@@ -1,7 +1,9 @@
+export type CarouselAppearance = "default" | "minimal";
 interface CarouselProps {
     images?: string[];
     size?: string;
     fit?: "fill" | "cover" | "contain" | "scale-down";
+    appearance?: CarouselAppearance;
 }
 type __VLS_Props = CarouselProps;
 type __VLS_ModelProps = {
@@ -23,6 +25,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:activeImage"?: ((value: string | undefined) => any) | undefined;
 }>, {
+    appearance: CarouselAppearance;
     size: string;
     images: string[];
     fit: "fill" | "cover" | "contain" | "scale-down";

package/dist/runtime/composables/useUrlSync.js

@@ -5,6 +5,7 @@ import {
   topLevelKeys
 } from "../utils/urlParams.js";
 import { computed, watch } from "vue";
+import { useRoute } from "#imports";
 export function useUrlSync(state, keys) {
   const routeQuery = useRoute().query;
   const initKeys = keys ?? topLevelKeys(routeQuery);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orio-ui",
-  "version": "1.16.0",
+  "version": "1.16.2",
   "description": "Modern Nuxt component library with theme support",
   "type": "module",
   "main": "./dist/module.mjs",