orio-ui 1.8.0 → 1.9.1

package/dist/module.json

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

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.vue → NumberInput/index.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, toRefs } from "vue";
+import { computed, toRefs } from "vue";
 
 interface Props {
   min?: number;
@@ -19,27 +19,6 @@ 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;
 
@@ -55,6 +34,33 @@ function setValidatedValue(value: number) {
 
   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>
@@ -65,30 +71,31 @@ function setValidatedValue(value: number) {
         v-model="modelValue"
         type="number"
         class="number-input"
+        @blur="onBlur"
       />
       <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"
-        />
+        <slot name="controls" v-bind="slotExpose" />
       </div>
     </div>
   </orio-control-element>
 </template>
 
 <style scoped>
+input[type=number]::-webkit-outer-spin-button,
+input[type=number]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type=number] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.wrapper {
+  position: relative;
+}
+
 .number-input {
   width: 100%;
   padding: 0.5rem 0.75rem;
@@ -117,20 +124,14 @@ function setValidatedValue(value: number) {
   cursor: not-allowed;
 }
 
-.wrapper {
-  position: relative;
-}
-
 .controls {
   position: absolute;
-  height: 100%;
-  right: 3px;
-  top: 0;
+  inset: 0;
   display: flex;
-  flex-direction: column;
-  justify-content: space-around;
+  align-items: center;
+  pointer-events: none;
 }
-.controls div {
-  margin: 0.25rem;
+.controls :deep(button) {
+  pointer-events: auto;
 }
 </style>

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

@@ -3,3 +3,4 @@ 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

@@ -5,3 +5,4 @@ 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/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.8.0",
+  "version": "1.9.1",
   "description": "Modern Nuxt component library with theme support",
   "type": "module",
   "main": "./dist/module.mjs",