@nexxtmove/ui 0.1.36 → 0.1.38

package/package.json

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

package/src/components/DropdownButton/DropdownButton.vue

@@ -140,14 +140,14 @@ const transitionClasses = computed(() => {
       <div
         v-if="isOpen"
         role="menu"
-        class="absolute top-full z-10 mt-2.5 min-w-full rounded-md border border-gray-200 bg-white"
+        class="absolute top-full z-10 mt-2.5 min-w-full rounded-md border border-gray-200 bg-white whitespace-nowrap"
         :class="placement === 'right' ? 'right-0' : 'left-0'"
       >
         <button
           v-for="option in options"
           :key="option.label"
           role="menuitem"
-          class="flex w-full min-w-42 cursor-pointer items-center gap-2 px-4 py-2 text-left text-sm text-gray-700 transition-colors duration-200 hover:bg-gray-100 hover:text-purple-600 focus:bg-gray-100 focus:outline-none"
+          class="flex w-full min-w-42 cursor-pointer items-center gap-2 px-4 py-2 text-left text-sm whitespace-nowrap text-gray-700 transition-colors duration-200 hover:bg-gray-100 hover:text-purple-600 focus:bg-gray-100 focus:outline-none"
           @click="handleOptionClick(option.action)"
         >
           <NexxtIcon v-if="option.icon" :name="option.icon" aria-hidden="true" />

package/src/components/InputField/InputField.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
 import Icon from '../Icon/Icon.vue'
 
 const generateId = () => 'input-field-' + Math.random().toString(36).slice(2, 10)
-const inputId = ref(generateId())
+const inputId = generateId()
 
 defineOptions({
   name: 'NexxtInputField',
@@ -14,71 +13,57 @@ interface NexxtInputFieldProps {
   label?: string
   error?: boolean
   errorMessage?: string
-  focused?: boolean
   leftIcon?: InstanceType<typeof Icon>['name']
   rightIcon?: InstanceType<typeof Icon>['name']
 }
 
-const props = defineProps<NexxtInputFieldProps>()
+defineProps<NexxtInputFieldProps>()
 
-// ✅ Correct usage
 const modelValue = defineModel<string>()
-
-const isFocused = ref(false)
-
-const wrapperClasses = computed(() => {
-  if (props.error) {
-    return 'border-brick-400'
-  }
-  if (props.focused || isFocused.value) {
-    return 'border-cornflower-blue-500'
-  }
-  return 'border-gray-200'
-})
-
-const onFocus = () => {
-  isFocused.value = true
-}
-
-const onBlur = () => {
-  isFocused.value = false
-}
 </script>
 
 <template>
-  <div class="flex w-full flex-col gap-1">
+  <div class="inline-flex flex-col gap-1">
     <label
-      v-if="props.label"
+      v-if="label"
       class="text-color-gray-700 justify-start body-normal text-sm"
       :for="inputId"
     >
-      {{ props.label }}
+      {{ label }}
     </label>
 
     <div
-      class="flex items-center gap-2 rounded-lg border px-3 py-2 transition-colors"
-      :class="wrapperClasses"
+      class="flex items-center gap-2 rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
+      :class="error ? 'ring-brick-400' : 'ring-gray-200'"
     >
-      <span v-if="props.leftIcon" class="flex items-center">
-        <Icon :name="props.leftIcon" />
+      <span v-if="leftIcon" class="flex items-center">
+        <Icon :name="leftIcon" />
       </span>
 
       <input
         :id="inputId"
         v-model="modelValue"
-        :placeholder="props.placeholder"
-        @focus="onFocus"
-        @blur="onBlur"
-        class="w-full bg-transparent text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
+        :placeholder="placeholder"
+        v-bind="$attrs"
+        class="h-10 min-w-60 bg-transparent text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
       />
 
-      <span v-if="props.rightIcon" class="flex items-center">
-        <Icon :name="props.rightIcon" />
+      <span v-if="rightIcon" class="flex items-center">
+        <Icon :name="rightIcon" />
       </span>
     </div>
 
-    <p v-if="props.errorMessage" class="text-sm text-brick-400">
-      {{ props.errorMessage }}
-    </p>
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="opacity-0 -translate-y-1"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition-all duration-150 ease-in"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 -translate-y-1"
+    >
+      <p v-if="error && errorMessage" class="text-sm text-brick-400">
+        {{ errorMessage }}
+      </p>
+    </Transition>
   </div>
 </template>

package/src/components/Table/Table.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup generic="TKey extends string">
+<script lang="ts" setup generic="TKey extends string, TRow extends Record<TKey, unknown>">
 import { computed, ref } from 'vue'
 import Icon from '../Icon/Icon.vue'
 import Checkbox from '../Checkbox/Checkbox.vue'
@@ -10,9 +10,12 @@ export interface TableColumn<K extends string = string> {
   width?: string
 }
 
-export interface NexxtTableProps<TKey extends string = string> {
+export interface NexxtTableProps<
+  TKey extends string = string,
+  TRow extends Record<TKey, unknown> = Record<TKey, unknown>,
+> {
   columns: TableColumn<TKey>[]
-  rows: Record<TKey, unknown>[]
+  rows: TRow[]
   selectable?: boolean
 }
 
@@ -20,12 +23,12 @@ const INTERACTIVE = ['a', 'button', 'input', 'select', 'textarea', 'label']
 
 defineOptions({ name: 'NexxtTable' })
 
-const props = defineProps<NexxtTableProps<TKey>>()
+const props = defineProps<NexxtTableProps<TKey, TRow>>()
 const emit = defineEmits<{
-  'row-click': [row: Record<TKey, unknown>]
+  'row-click': [row: TRow]
 }>()
 
-const selected = defineModel<Record<TKey, unknown>[]>({ default: () => [] })
+const selected = defineModel<TRow[]>({ default: () => [] })
 const sortKey = defineModel<TKey>('sortKey')
 const sortDirection = defineModel<'asc' | 'desc'>('sortDirection', { default: 'asc' })
 
@@ -38,13 +41,13 @@ const someSelected = computed(
   () => selected.value.length > 0 && selected.value.length < props.rows.length,
 )
 
-const isRowSelected = (row: Record<TKey, unknown>) => selected.value.includes(row)
+const isRowSelected = (row: TRow) => selected.value.includes(row)
 
 const toggleAll = () => {
   selected.value = allSelected.value ? [] : [...props.rows]
 }
 
-const toggleRow = (row: Record<TKey, unknown>) => {
+const toggleRow = (row: TRow) => {
   selected.value = isRowSelected(row)
     ? selected.value.filter((r) => r !== row)
     : [...selected.value, row]
@@ -84,6 +87,8 @@ const getRowRoundedClass = (rowIndex: number) => {
   return ''
 }
 
+const rowValue = (row: TRow, key: TKey) => (row as Record<TKey, unknown>)[key]
+
 const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
   if (event.key === 'ArrowDown') {
     event.preventDefault()
@@ -210,8 +215,8 @@ const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
               role="gridcell"
               :aria-colindex="colIndex + (selectable ? 2 : 1)"
             >
-              <slot :name="`cell-${column.key}`" :row="row" :value="row[column.key]">
-                {{ row[column.key] }}
+              <slot :name="`cell-${column.key}`" :row="row" :value="rowValue(row, column.key)">
+                {{ rowValue(row, column.key) }}
               </slot>
             </div>
           </div>

package/src/components.json

@@ -23,4 +23,4 @@
   "NexxtTimelineEvent": "components/TimelineEvent/TimelineEvent.vue",
   "NexxtTimelinePhaseblock": "components/TimelinePhaseblock/TimelinePhaseblock.vue",
   "NexxtTooltip": "components/Tooltip/Tooltip.vue"
-}
+}