orio-ui 1.7.5 → 1.9.0

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "1.7.5",
+  "version": "1.9.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/Horizontal.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { usePressAndHold } from "../../composables/usePressAndHold";
+
+interface Props {
+  min?: number;
+  max?: number;
+  step?: number;
+  decimalPlaces?: number;
+  disabled?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  min: undefined,
+  max: undefined,
+  step: 1,
+  decimalPlaces: 0,
+  disabled: false,
+});
+
+const modelValue = defineModel<number>({ default: 0 });
+
+const { pressAndHold, stop } = usePressAndHold();
+</script>
+
+<template>
+  <orio-number-input v-model="modelValue" v-bind="$props" class="horizontal">
+    <template #controls="{ increase, decrease, isAtMax, isAtMin }">
+      <orio-button
+        appearance="minimal"
+        icon="minus"
+        variant="subdued"
+        :disabled="isAtMin || disabled"
+        @mousedown="pressAndHold(decrease)"
+        @mouseup="stop"
+        @mouseleave="stop"
+      />
+      <orio-button
+        appearance="minimal"
+        icon="plus"
+        variant="subdued"
+        :disabled="isAtMax || disabled"
+        @mousedown="pressAndHold(increase)"
+        @mouseup="stop"
+        @mouseleave="stop"
+      />
+    </template>
+  </orio-number-input>
+</template>
+
+<style scoped>
+.horizontal :deep(.number-input) {
+  text-align: center;
+}
+.horizontal :deep(.controls) {
+  justify-content: space-between;
+  padding: 0 3px;
+}
+</style>

package/dist/runtime/components/NumberInput/Vertical.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { usePressAndHold } from "../../composables/usePressAndHold";
+
+interface Props {
+  min?: number;
+  max?: number;
+  step?: number;
+  decimalPlaces?: number;
+  disabled?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  min: undefined,
+  max: undefined,
+  step: 1,
+  decimalPlaces: 0,
+  disabled: false,
+});
+
+const modelValue = defineModel<number>({ default: 0 });
+
+const { pressAndHold, stop } = usePressAndHold();
+</script>
+
+<template>
+  <orio-number-input v-model="modelValue" v-bind="$props" class="vertical">
+    <template #controls="{ increase, decrease, isAtMax, isAtMin }">
+      <orio-button
+        appearance="minimal"
+        icon="chevron-up"
+        variant="subdued"
+        :disabled="isAtMax || disabled"
+        @mousedown="pressAndHold(increase)"
+        @mouseup="stop"
+        @mouseleave="stop"
+      />
+      <orio-button
+        appearance="minimal"
+        icon="chevron-down"
+        variant="subdued"
+        :disabled="isAtMin || disabled"
+        @mousedown="pressAndHold(decrease)"
+        @mouseup="stop"
+        @mouseleave="stop"
+      />
+    </template>
+  </orio-number-input>
+</template>
+
+<style scoped>
+.vertical :deep(.controls) {
+  flex-direction: column;
+  justify-content: space-around;
+  right: 3px;
+  left: auto;
+}
+</style>

package/dist/runtime/components/NumberInput/index.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed, 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 });
+
+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;
+}
+
+function onBlur() {
+  setValidatedValue(modelValue.value);
+}
+
+function increase() {
+  setValidatedValue(modelValue.value + step.value);
+}
+
+function decrease() {
+  setValidatedValue(modelValue.value - step.value);
+}
+
+const isAtMax = computed(
+  () => Number.isFinite(max.value) && modelValue.value >= (max.value as number),
+);
+
+const isAtMin = computed(
+  () => Number.isFinite(min.value) && modelValue.value <= (min.value as number),
+);
+
+const slotExpose = computed(() => ({
+  increase,
+  decrease,
+  isAtMax: isAtMax.value,
+  isAtMin: isAtMin.value,
+}));
+</script>
+
+<template>
+  <orio-control-element v-bind="$attrs">
+    <div class="wrapper">
+      <input
+        v-bind="$attrs"
+        v-model="modelValue"
+        type="number"
+        class="number-input"
+        @blur="onBlur"
+      />
+      <div class="controls">
+        <slot name="controls" v-bind="slotExpose" />
+      </div>
+    </div>
+  </orio-control-element>
+</template>
+
+<style scoped>
+.wrapper {
+  position: relative;
+}
+
+.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;
+}
+
+.controls {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+}
+.controls :deep(button) {
+  pointer-events: auto;
+}
+</style>

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

@@ -2,3 +2,5 @@ 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";
+export { usePressAndHold } from "./usePressAndHold.js";

package/dist/runtime/composables/index.js

@@ -4,3 +4,5 @@ export {
 export { useFuzzySearch } from "./useFuzzySearch.js";
 export { useModal } from "./useModal.js";
 export { useTheme } from "./useTheme.js";
+export { useDecimalFormatter } from "./useDecimalFormatter.js";
+export { usePressAndHold } from "./usePressAndHold.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/dist/runtime/composables/usePressAndHold.d.ts

@@ -0,0 +1,4 @@
+export declare function usePressAndHold(): {
+    pressAndHold: (callback: () => void) => void;
+    stop: () => void;
+};

package/dist/runtime/composables/usePressAndHold.js

@@ -0,0 +1,22 @@
+import { ref } from "vue";
+export function usePressAndHold() {
+  const interval = ref(null);
+  const timeout = ref(null);
+  function pressAndHold(callback) {
+    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;
+    }
+  }
+  return { pressAndHold, stop };
+}

package/dist/runtime/index.d.ts

@@ -1,6 +1,9 @@
 export { default as Button } from "./components/Button.vue.js";
 export { default as NavButton } from "./components/NavButton.vue.js";
 export { default as Input } from "./components/Input.vue.js";
+export { default as NumberInput } from "./components/NumberInput/index.vue.js";
+export { default as NumberInputVertical } from "./components/NumberInput/Vertical.vue.js";
+export { default as NumberInputHorizontal } from "./components/NumberInput/Horizontal.vue.js";
 export { default as Textarea } from "./components/Textarea.vue.js";
 export { default as CheckBox } from "./components/CheckBox.vue.js";
 export { default as SwitchButton } from "./components/SwitchButton.vue.js";
@@ -13,7 +16,7 @@ export { default as LoadingSpinner } from "./components/LoadingSpinner.vue.js";
 export { default as Modal } from "./components/Modal.vue.js";
 export { default as Popover } from "./components/Popover.vue.js";
 export { default as Tooltip } from "./components/Tooltip.vue.js";
-export { default as Upload } from "./components/Upload.vue.js";
+export { default as Upload } from "./components/Upload/index.vue.js";
 export { default as EmptyState } from "./components/EmptyState.vue.js";
 export { default as DashedContainer } from "./components/DashedContainer.vue.js";
 export { default as ControlElement } from "./components/ControlElement.vue.js";

package/dist/runtime/index.js

@@ -1,6 +1,9 @@
 export { default as Button } from "./components/Button.vue";
 export { default as NavButton } from "./components/NavButton.vue";
 export { default as Input } from "./components/Input.vue";
+export { default as NumberInput } from "./components/NumberInput/index.vue";
+export { default as NumberInputVertical } from "./components/NumberInput/Vertical.vue";
+export { default as NumberInputHorizontal } from "./components/NumberInput/Horizontal.vue";
 export { default as Textarea } from "./components/Textarea.vue";
 export { default as CheckBox } from "./components/CheckBox.vue";
 export { default as SwitchButton } from "./components/SwitchButton.vue";
@@ -13,7 +16,7 @@ export { default as LoadingSpinner } from "./components/LoadingSpinner.vue";
 export { default as Modal } from "./components/Modal.vue";
 export { default as Popover } from "./components/Popover.vue";
 export { default as Tooltip } from "./components/Tooltip.vue";
-export { default as Upload } from "./components/Upload.vue";
+export { default as Upload } from "./components/Upload/index.vue";
 export { default as EmptyState } from "./components/EmptyState.vue";
 export { default as DashedContainer } from "./components/DashedContainer.vue";
 export { default as ControlElement } from "./components/ControlElement.vue";

package/dist/runtime/utils/icon-registry.js

@@ -32,6 +32,8 @@ export const iconRegistry = {
   check: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z"/></svg>`,
   // Plus / Add
   plus: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>`,
+  // Minus / Remove
+  minus: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 13H5v-2h14v2z"/></svg>`,
   // Calendar
   calendar: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 16H5V10h14zm0-12H5V6h14zM7 12h5v5H7z"/></svg>`,
   // Close / X

package/package.json

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