orio-ui 1.16.1 → 1.17.0

package/dist/module.json

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

package/dist/runtime/assets/css/variables.css

@@ -1 +1 @@
-:root{--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px;--border-radius-pill:9999px;--font-sm:0.75rem;--font-md:0.875rem;--font-lg:1.25rem;--font-xl:1.75rem}
+:root{--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px;--border-radius-pill:9999px;--font-xs:0.65rem;--font-sm:0.75rem;--font-md:0.875rem;--font-lg:1.25rem;--font-xl:1.75rem}

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/ControlElement.vue

@@ -37,46 +37,50 @@ const props = defineProps({
 <style scoped>
 .control {
   --control-font-size: var(--font-md);
+  --control-label-font-size: var(--font-sm);
   --control-py: 0.5rem;
   --control-px: 0.75rem;
   --control-gap: 0.5rem;
   --control-radius: var(--border-radius-md);
   --control-icon-size: 1rem;
   --control-inner-block-start: 1.25rem;
-  --control-inner-block-end: 0.25rem;
+  --control-inner-block-end: 0.2rem;
   --control-label-block-start: 0.25rem;
 }
 .control.size-sm {
   --control-font-size: var(--font-sm);
+  --control-label-font-size: var(--font-xs);
   --control-py: 0.25rem;
   --control-px: 0.5rem;
   --control-gap: 0.25rem;
   --control-radius: var(--border-radius-sm);
   --control-icon-size: 0.75rem;
   --control-inner-block-start: 1rem;
-  --control-inner-block-end: 0.15rem;
+  --control-inner-block-end: 0.1rem;
   --control-label-block-start: 0.2rem;
 }
 .control.size-lg {
   --control-font-size: var(--font-lg);
+  --control-label-font-size: var(--font-md);
   --control-py: 0.625rem;
   --control-px: 1rem;
   --control-gap: 0.5rem;
   --control-radius: var(--border-radius-md);
   --control-icon-size: 1.25rem;
-  --control-inner-block-start: 1.75rem;
-  --control-inner-block-end: 0.25rem;
+  --control-inner-block-start: 1.1rem;
+  --control-inner-block-end: 0.2rem;
   --control-label-block-start: 0.25rem;
 }
 .control.size-xl {
   --control-font-size: var(--font-xl);
+  --control-label-font-size: var(--font-lg);
   --control-py: 0.75rem;
   --control-px: 1.25rem;
   --control-gap: 0.75rem;
   --control-radius: var(--border-radius-lg);
   --control-icon-size: 1.5rem;
-  --control-inner-block-start: 2.25rem;
-  --control-inner-block-end: 0.375rem;
+  --control-inner-block-start: 1.5rem;
+  --control-inner-block-end: 0;
   --control-label-block-start: 0.25rem;
 }
 .control {
@@ -86,7 +90,7 @@ const props = defineProps({
   gap: 0.1rem;
 }
 .control .control-label {
-  font-size: var(--control-font-size);
+  font-size: var(--control-label-font-size);
   user-select: none;
 }
 .control .control-group {
@@ -94,13 +98,15 @@ const props = defineProps({
 }
 .control .control-error {
   color: var(--color-danger);
-  font-size: var(--control-font-size);
+  font-size: var(--control-label-font-size);
 }
 .control .slot-wrapper :deep(*) {
   font-size: var(--control-font-size);
 }
+.control.has-error .slot-wrapper {
+  border: 1px solid var(--color-danger);
+}
 .control.has-error .slot-wrapper :deep(*) {
-  border-color: var(--color-danger);
   font-size: var(--control-font-size);
 }
 .control.minimal {

package/dist/runtime/components/Input.vue

@@ -13,7 +13,7 @@ const modelValue = defineModel({ type: String, ...{ default: "" } });
     :class="{ inner: layout === 'inner' }"
   >
     <slot name="before" />
-    <input v-bind="$attrs" :id v-model="modelValue" type="text" />
+    <input :id v-model="modelValue" type="text" v-bind="$attrs" />
     <slot name="after" />
   </orio-control-element>
 </template>
@@ -71,7 +71,10 @@ input {
   top: var(--control-label-block-start);
   color: var(--color-muted);
 }
+.inner :deep(.slot-wrapper) {
+  padding: var(--control-inner-block-start) var(--control-px) var(--control-inner-block-end);
+}
 .inner input {
-  padding: var(--control-inner-block-start) 0 var(--control-inner-block-end);
+  padding: 0;
 }
 </style>

package/dist/runtime/components/Textarea.vue

@@ -14,7 +14,7 @@ defineProps({
     :layout="layout === 'inner' ? 'vertical' : layout"
     :class="{ inner: layout === 'inner' }"
   >
-    <textarea v-bind="attrs" :id v-model="modelValue" rows="4" />
+    <textarea :id v-model="modelValue" rows="4" v-bind="attrs" />
   </orio-control-element>
 </template>
 

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/useValidation.d.ts

@@ -2,11 +2,11 @@ import { type MaybeRef } from "vue";
 export interface ValidationRule {
     model: MaybeRef<any>;
     id: string;
-    validator: (model: MaybeRef<any>) => boolean;
+    validator: (model: any) => boolean;
     message?: string;
 }
-export declare function isFilled(model: MaybeRef<string | []>): boolean;
-export declare function isEmail(model: MaybeRef<string>): boolean;
+export declare function isFilled(value: string | []): boolean;
+export declare function isEmail(value: string): boolean;
 export declare function useValidation(rules?: ValidationRule[]): {
     checkValidity: () => boolean;
     errors: Record<string, string | null>;

package/dist/runtime/composables/useValidation.js

@@ -1,9 +1,8 @@
-import { reactive, isRef, ref } from "vue";
-export function isFilled(model) {
-  return isRef(model) ? !!model.value.length : !!model.length;
+import { reactive, ref, unref } from "vue";
+export function isFilled(value) {
+  return !!value.length;
 }
-export function isEmail(model) {
-  const value = isRef(model) ? model.value : model;
+export function isEmail(value) {
   if (!value) return true;
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   return emailRegex.test(value);
@@ -17,7 +16,7 @@ export function useValidation(rules) {
     validator,
     message
   }) {
-    if (!validator(model)) {
+    if (!validator(unref(model))) {
       if (!errors[id]) {
         errors[id] = message || "Error on this field";
       }

package/package.json

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