orio-ui 1.7.4 → 1.8.0

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "1.7.4",
+  "version": "1.8.0",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/Button.vue

@@ -25,12 +25,28 @@ const isIconOnly = computed(() => {
 
 const emit = defineEmits<{
   (e: "click", event: PointerEvent): void;
+  (e: "mousedown", event: MouseEvent): void;
+  (e: "mouseup", event: MouseEvent): void;
+  (e: "mouseleave", event: MouseEvent): void;
 }>();
 
 function click(event: PointerEvent) {
   if (loading.value || disabled.value) return;
   emit("click", event);
 }
+
+function onMousedown(event: MouseEvent) {
+  if (loading.value || disabled.value) return;
+  emit("mousedown", event);
+}
+
+function onMouseup(event: MouseEvent) {
+  emit("mouseup", event);
+}
+
+function onMouseleave(event: MouseEvent) {
+  emit("mouseleave", event);
+}
 </script>
 
 <template>
@@ -40,6 +56,9 @@ function click(event: PointerEvent) {
       :class="[variant, 'gradient-hover', { 'icon-only': isIconOnly }]"
       :disabled
       @click="click"
+      @mousedown="onMousedown"
+      @mouseup="onMouseup"
+      @mouseleave="onMouseleave"
     >
       <orio-loading-spinner v-if="loading" />
       <slot v-else name="icon">
@@ -68,6 +87,7 @@ button {
 button.icon-only {
   padding: 0;
   border-radius: 50%;
+  line-height: 0;
 }
 button:disabled, button:disabled:hover {
   background-color: var(--color-accent-soft-base);

package/dist/runtime/components/ControlElement.vue

@@ -27,6 +27,11 @@ withDefaults(defineProps<ControlProps>(), {
 .control .control-label {
   user-select: none;
 }
+.control .slot-wrapper {
+  width: fit-content;
+  height: fit-content;
+  line-height: 0;
+}
 .control.minimal {
   margin: 0;
 }

package/dist/runtime/components/Input.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-defineEmits<{
-  (e: "input", value: string): void;
-}>();
-
-const text = defineModel<string>({ default: "" });
+const modelValue = defineModel<string>({ default: "" });
 </script>
 
 <template>
   <orio-control-element v-bind="$attrs">
-    <input v-bind="$attrs" v-model="text" type="text" class="text-input" />
+    <input
+      v-bind="$attrs"
+      v-model="modelValue"
+      type="text"
+      class="text-input"
+    />
   </orio-control-element>
 </template>
 

package/dist/runtime/components/NumberInput.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { ref, toRefs } from "vue";
+
+interface Props {
+  min?: number;
+  max?: number;
+  step?: number;
+  decimalPlaces?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  min: undefined,
+  max: undefined,
+  step: 1,
+  decimalPlaces: 0,
+});
+
+const { min, max, step, decimalPlaces } = toRefs(props);
+
+const modelValue = defineModel<number>({ default: 0 });
+
+const interval = ref<number | null>(null);
+const timeout = ref<number | null>(null);
+
+function pressAndHold(callback: () => void) {
+  callback();
+  timeout.value = window.setTimeout(() => {
+    interval.value = window.setInterval(callback, 50);
+  }, 500);
+}
+
+function stop() {
+  if (timeout.value) {
+    window.clearTimeout(timeout.value);
+    timeout.value = null;
+  }
+  if (interval.value) {
+    window.clearInterval(interval.value);
+    interval.value = null;
+  }
+}
+
+function setValidatedValue(value: number) {
+  let finalValue = value;
+
+  if (Number.isFinite(max.value) && finalValue > (max.value as number)) {
+    finalValue = max.value as number;
+  }
+
+  if (Number.isFinite(min.value) && finalValue < (min.value as number)) {
+    finalValue = min.value as number;
+  }
+
+  finalValue = Number((finalValue ?? 0).toFixed(decimalPlaces.value));
+
+  modelValue.value = finalValue;
+}
+</script>
+
+<template>
+  <orio-control-element v-bind="$attrs">
+    <div class="wrapper">
+      <input
+        v-bind="$attrs"
+        v-model="modelValue"
+        type="number"
+        class="number-input"
+      />
+      <div class="controls">
+        <orio-button
+          appearance="minimal"
+          icon="chevron-up"
+          :disabled="Number.isFinite(max) && modelValue >= (max as number)"
+          @mousedown="pressAndHold(() => setValidatedValue(modelValue + step))"
+          @mouseup="stop"
+          @mouseleave="stop"
+        />
+        <orio-button
+          appearance="minimal"
+          icon="chevron-down"
+          :disabled="Number.isFinite(min) && modelValue <= (min as number)"
+          @mousedown="pressAndHold(() => setValidatedValue(modelValue - step))"
+          @mouseup="stop"
+          @mouseleave="stop"
+        />
+      </div>
+    </div>
+  </orio-control-element>
+</template>
+
+<style scoped>
+.number-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--color-text);
+  background-color: var(--color-bg);
+  box-sizing: border-box;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.number-input::placeholder {
+  color: var(--color-muted);
+}
+.number-input:hover {
+  border-color: var(--color-accent);
+}
+.number-input:focus {
+  border-color: var(--color-accent);
+  outline: none;
+}
+.number-input:disabled {
+  background-color: var(--color-surface);
+  color: var(--color-muted);
+  cursor: not-allowed;
+}
+
+.wrapper {
+  position: relative;
+}
+
+.controls {
+  position: absolute;
+  height: 100%;
+  right: 3px;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.controls div {
+  margin: 0.25rem;
+}
+</style>

package/dist/runtime/components/Popover.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div ref="trigger" @click="togglePopover()">
+    <div ref="trigger">
       <slot :toggle="togglePopover" />
     </div>
 
@@ -202,6 +202,7 @@ async function updateRects() {
 async function togglePopover(force: boolean | null = null) {
   if (props.disabled) return;
   showPopover.value = force !== null ? force : !showPopover.value;
+
   if (!showPopover.value) return;
 
   await nextTick();

package/dist/runtime/components/Selector.vue

@@ -95,7 +95,7 @@ const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
     <orio-popover position="bottom-right" :offset="5">
       <template #default="{ toggle }">
         <slot name="trigger" :toggle>
-          <div class="selector-trigger">
+          <div class="selector-trigger" @click="toggle()">
             <slot
               name="trigger-content"
               :toggle

package/dist/runtime/composables/index.d.ts

@@ -2,3 +2,4 @@ export { useApi, type ApiOptions, type RequestBody, type RequestMethod, } from "
 export { useFuzzySearch } from "./useFuzzySearch.js";
 export { useModal, type ModalProps, type OriginRect } from "./useModal.js";
 export { useTheme } from "./useTheme.js";
+export { useDecimalFormatter } from "./useDecimalFormatter.js";

package/dist/runtime/composables/index.js

@@ -4,3 +4,4 @@ export {
 export { useFuzzySearch } from "./useFuzzySearch.js";
 export { useModal } from "./useModal.js";
 export { useTheme } from "./useTheme.js";
+export { useDecimalFormatter } from "./useDecimalFormatter.js";

package/dist/runtime/composables/useDecimalFormatter.d.ts

@@ -0,0 +1,11 @@
+type DecimalFormatOptions = {
+    locale?: string;
+    decimals?: number;
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+};
+export declare function useDecimalFormatter(): {
+    toNumber: (input: string | number) => number | null;
+    formatDecimal: (input: string | number, options?: DecimalFormatOptions) => string | null;
+};
+export {};

package/dist/runtime/composables/useDecimalFormatter.js

@@ -0,0 +1,40 @@
+function getSystemLocale() {
+  if (typeof navigator === "undefined") return "de-DE";
+  return navigator.languages?.[0] ?? navigator.language;
+}
+export function useDecimalFormatter() {
+  function toNumber(input) {
+    if (typeof input === "number") {
+      return Number.isFinite(input) ? input : null;
+    }
+    if (typeof input !== "string") return null;
+    const cleaned = input.replace(/[^\d.,-]/g, "").trim();
+    if (!cleaned) return null;
+    const lastComma = cleaned.lastIndexOf(",");
+    const lastDot = cleaned.lastIndexOf(".");
+    let normalized = cleaned;
+    if (lastComma > lastDot) {
+      normalized = cleaned.replace(/\./g, "").replace(",", ".");
+    } else {
+      normalized = cleaned.replace(/,/g, "");
+    }
+    const result = Number(normalized);
+    return Number.isFinite(result) ? result : null;
+  }
+  function formatDecimal(input, options = {}) {
+    const locale = options.locale ?? getSystemLocale();
+    const decimals = options.decimals ?? 2;
+    const minimumFractionDigits = options.minimumFractionDigits ?? decimals;
+    const maximumFractionDigits = options.maximumFractionDigits ?? decimals;
+    const value = toNumber(input);
+    if (value === null) return null;
+    return new Intl.NumberFormat(locale, {
+      minimumFractionDigits,
+      maximumFractionDigits
+    }).format(value);
+  }
+  return {
+    toNumber,
+    formatDecimal
+  };
+}

package/package.json

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