@nexxtmove/ui 0.1.63 → 0.1.65

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.63",
+  "version": "0.1.65",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/CustomerJourneyTile/CustomerJourneyTile.vue

@@ -12,6 +12,7 @@ interface NexxtCustomerJourneyTileProps {
   delay?: number
   percentage?: number
   percentageExplanaition?: string
+  invertPercentageColor?: boolean
   variant?: 'information' | 'display'
   selected?: boolean
 }
@@ -28,6 +29,7 @@ const {
   delay,
   percentage,
   percentageExplanaition,
+  invertPercentageColor = false,
   variant = 'information',
   selected = false,
 } = defineProps<NexxtCustomerJourneyTileProps>()
@@ -118,10 +120,10 @@ const iconColors = computed(() => {
         <span
           class="extra-small-semibold"
           :class="
-            percentage > 0
-              ? 'text-green-500'
-              : percentage === 0
-                ? 'text-orange-500'
+            percentage === 0
+              ? 'text-orange-500'
+              : percentage > 0 !== invertPercentageColor
+                ? 'text-green-500'
                 : 'text-brick-500'
           "
           ><template v-if="percentage > 0">+</template>{{ percentage }}%</span

package/src/components/InputField/InputField.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, getCurrentInstance } from 'vue'
 import Icon from '../Icon/Icon.vue'
 
 const generateId = () => 'input-field-' + Math.random().toString(36).slice(2, 10)
@@ -20,7 +21,22 @@ export interface NexxtInputFieldProps {
 
 defineProps<NexxtInputFieldProps>()
 
-const modelValue = defineModel<string>()
+const modelValue = defineModel<string | number>()
+
+const isNumber = computed(() => {
+  const instance = getCurrentInstance()
+  return instance?.attrs.type === 'number'
+})
+
+const increment = () => {
+  const current = Number(modelValue.value || 0)
+  modelValue.value = current + 1
+}
+
+const decrement = () => {
+  const current = Number(modelValue.value || 0)
+  modelValue.value = current - 1
+}
 </script>
 
 <template>
@@ -35,7 +51,7 @@ const modelValue = defineModel<string>()
     </label>
 
     <div
-      class="flex items-center gap-2 overflow-hidden rounded-lg ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
+      class="group flex items-center gap-2 overflow-hidden rounded-lg ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
       :class="[error ? 'ring-brick-400' : 'ring-gray-200', { 'pl-3': leftIcon, 'pr-3': rightIcon }]"
     >
       <span v-if="leftIcon" class="flex items-center">
@@ -47,11 +63,29 @@ const modelValue = defineModel<string>()
         v-model="modelValue"
         :placeholder="placeholder"
         v-bind="$attrs"
-        class="bg-transparant h-10 w-full min-w-60 text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
+        class="bg-transparant h-10 w-full min-w-60 text-sm text-gray-900 placeholder-gray-400 focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
         :class="{ 'pl-3': !leftIcon, 'pr-3': !rightIcon }"
       />
       <slot name="right">
-        <span v-if="rightIcon" class="flex items-center">
+        <div v-if="isNumber" class="flex flex-col pr-1.5">
+          <button
+            type="button"
+            class="flex h-5 w-8 cursor-pointer items-center justify-center pt-2 text-gray-400 transition-colors group-focus-within:text-gray-950 hover:text-cornflower-blue-600 focus:text-cornflower-blue-600 focus:outline-none"
+            aria-label="Verhogen"
+            @click="increment"
+          >
+            <Icon name="chevron-up" class="text-[10px]" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            class="flex h-5 w-8 cursor-pointer items-center justify-center pb-2 text-gray-400 transition-colors group-focus-within:text-gray-950 hover:text-cornflower-blue-600 focus:text-cornflower-blue-600 focus:outline-none"
+            aria-label="Verlagen"
+            @click="decrement"
+          >
+            <Icon name="chevron-down" class="text-[10px]" aria-hidden="true" />
+          </button>
+        </div>
+        <span v-else-if="rightIcon" class="flex items-center">
           <Icon :name="rightIcon" />
         </span>
       </slot>

package/src/components/Select/Select.vue

@@ -61,7 +61,7 @@ const select = (opt: SelectOption, close: () => void) => {
           :aria-expanded="isOpen"
           aria-haspopup="listbox"
           tabindex="0"
-          class="flex w-full cursor-pointer items-center gap-2 rounded-lg ring transition-colors ease-out focus:ring-cornflower-blue-500 focus:outline-none"
+          class="group flex w-full cursor-pointer items-center gap-2 rounded-lg ring transition-colors ease-out focus:ring-cornflower-blue-500 focus:outline-none"
           :class="[error ? 'ring-brick-400' : 'ring-gray-200', { 'pl-3': leftIcon, 'pr-3': true }]"
           @click="toggle"
           @keydown.enter.prevent="toggle"
@@ -78,7 +78,7 @@ const select = (opt: SelectOption, close: () => void) => {
           </span>
           <NexxtIcon
             name="chevron-down"
-            class="shrink-0 text-gray-400 transition-transform duration-200"
+            class="shrink-0 text-gray-400 transition-all duration-200 group-hover:text-cornflower-blue-600"
             :class="{ 'rotate-180': isOpen }"
           />
         </div>