@nexxtmove/ui 0.1.34 → 0.1.36

package/dist/nuxt.js

@@ -1,5 +1,5 @@
 import { defineNuxtModule as c, addComponent as s, addTemplate as a } from "@nuxt/kit";
-const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar/Avatar.vue", x = "components/Button/Button.vue", u = "components/Calendar/Calendar.vue", p = "components/Checkbox/Checkbox.vue", l = "components/Chip/Chip.vue", r = "components/CustomerJourneyTile/CustomerJourneyTile.vue", d = "components/DatePicker/DatePicker.vue", v = "components/DropdownButton/DropdownButton.vue", N = "components/Header/Header.vue", T = "components/Icon/Icon.vue", C = "components/InfoBlock/InfoBlock.vue", S = "components/Pagination/Pagination.vue", b = "components/ProgressBar/ProgressBar.vue", f = "components/SocialIcons/SocialIcons.vue", h = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", P = "components/SocialMediaTemplate/SocialMediaTemplate.vue", k = "components/SocialMediaType/SocialMediaType.vue", B = "components/StepperHeader/StepperHeader.vue", M = "components/Table/Table.vue", I = "components/TimelineEvent/TimelineEvent.vue", g = "components/TimelinePhaseblock/TimelinePhaseblock.vue", y = "components/Tooltip/Tooltip.vue", A = {
+const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar/Avatar.vue", x = "components/Button/Button.vue", u = "components/Calendar/Calendar.vue", p = "components/Checkbox/Checkbox.vue", l = "components/Chip/Chip.vue", r = "components/CustomerJourneyTile/CustomerJourneyTile.vue", d = "components/DatePicker/DatePicker.vue", v = "components/DropdownButton/DropdownButton.vue", N = "components/Header/Header.vue", T = "components/Icon/Icon.vue", C = "components/InfoBlock/InfoBlock.vue", S = "components/InputField/InputField.vue", b = "components/Pagination/Pagination.vue", f = "components/ProgressBar/ProgressBar.vue", h = "components/SocialIcons/SocialIcons.vue", P = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", k = "components/SocialMediaTemplate/SocialMediaTemplate.vue", B = "components/SocialMediaType/SocialMediaType.vue", I = "components/StepperHeader/StepperHeader.vue", M = "components/Table/Table.vue", g = "components/TimelineEvent/TimelineEvent.vue", y = "components/TimelinePhaseblock/TimelinePhaseblock.vue", A = "components/Tooltip/Tooltip.vue", D = {
   NexxtAnimatedNumber: i,
   NexxtAvatar: m,
   NexxtButton: x,
@@ -12,18 +12,19 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar
   NexxtHeader: N,
   NexxtIcon: T,
   NexxtInfoBlock: C,
-  NexxtPagination: S,
-  NexxtProgressBar: b,
-  NexxtSocialIcons: f,
-  NexxtSocialMediaCustomTemplate: h,
-  NexxtSocialMediaTemplate: P,
-  NexxtSocialMediaType: k,
-  NexxtStepperHeader: B,
+  NexxtInputField: S,
+  NexxtPagination: b,
+  NexxtProgressBar: f,
+  NexxtSocialIcons: h,
+  NexxtSocialMediaCustomTemplate: P,
+  NexxtSocialMediaTemplate: k,
+  NexxtSocialMediaType: B,
+  NexxtStepperHeader: I,
   NexxtTable: M,
-  NexxtTimelineEvent: I,
-  NexxtTimelinePhaseblock: g,
-  NexxtTooltip: y
-}, H = c({
+  NexxtTimelineEvent: g,
+  NexxtTimelinePhaseblock: y,
+  NexxtTooltip: A
+}, w = c({
   meta: {
     name: "@nexxtmove/ui",
     configKey: "nexxtmoveUi",
@@ -35,7 +36,7 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar
     addCSS: !0
   },
   setup(e, o) {
-    for (const [t, n] of Object.entries(A))
+    for (const [t, n] of Object.entries(D))
       s({
         name: t,
         export: "default",
@@ -54,5 +55,5 @@ const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar
   }
 });
 export {
-  H as default
+  w as default
 };

package/package.json

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

package/src/components/InputField/InputField.vue

@@ -0,0 +1,84 @@
+<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())
+
+defineOptions({
+  name: 'NexxtInputField',
+})
+
+interface NexxtInputFieldProps {
+  placeholder?: string
+  label?: string
+  error?: boolean
+  errorMessage?: string
+  focused?: boolean
+  leftIcon?: InstanceType<typeof Icon>['name']
+  rightIcon?: InstanceType<typeof Icon>['name']
+}
+
+const props = 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">
+    <label
+      v-if="props.label"
+      class="text-color-gray-700 justify-start body-normal text-sm"
+      :for="inputId"
+    >
+      {{ props.label }}
+    </label>
+
+    <div
+      class="flex items-center gap-2 rounded-lg border px-3 py-2 transition-colors"
+      :class="wrapperClasses"
+    >
+      <span v-if="props.leftIcon" class="flex items-center">
+        <Icon :name="props.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"
+      />
+
+      <span v-if="props.rightIcon" class="flex items-center">
+        <Icon :name="props.rightIcon" />
+      </span>
+    </div>
+
+    <p v-if="props.errorMessage" class="text-sm text-brick-400">
+      {{ props.errorMessage }}
+    </p>
+  </div>
+</template>

package/src/components/Pagination/Pagination.vue

@@ -46,6 +46,7 @@ const {
       :class="{ 'pointer-events-none opacity-50': disabled }"
     >
       <PaginationFirst
+        v-if="items.some((item) => item.type === 'ellipsis')"
         class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
         :disabled="disabled"
       >
@@ -83,6 +84,7 @@ const {
         <NexxtIcon name="chevron-right" />
       </PaginationNext>
       <PaginationLast
+        v-if="items.some((item) => item.type === 'ellipsis')"
         class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-transparent transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
         :disabled="disabled"
       >

package/src/components/Table/Table.vue

@@ -13,25 +13,23 @@ export interface TableColumn<K extends string = string> {
 export interface NexxtTableProps<TKey extends string = string> {
   columns: TableColumn<TKey>[]
   rows: Record<TKey, unknown>[]
-  sortKey?: TKey
-  sortDirection?: 'asc' | 'desc'
   selectable?: boolean
-  modelValue?: number[]
 }
 
 const INTERACTIVE = ['a', 'button', 'input', 'select', 'textarea', 'label']
 
 defineOptions({ name: 'NexxtTable' })
 
-const props = withDefaults(defineProps<NexxtTableProps<TKey>>(), {
-  sortDirection: 'asc',
-})
+const props = defineProps<NexxtTableProps<TKey>>()
 const emit = defineEmits<{
-  sort: [key: string, direction: 'asc' | 'desc']
-  'update:modelValue': [selected: number[]]
+  'row-click': [row: Record<TKey, unknown>]
 }>()
 
-const selected = computed(() => props.modelValue ?? [])
+const selected = defineModel<Record<TKey, unknown>[]>({ default: () => [] })
+const sortKey = defineModel<TKey>('sortKey')
+const sortDirection = defineModel<'asc' | 'desc'>('sortDirection', { default: 'asc' })
+
+const rowRefs = ref<HTMLElement[]>([])
 
 const allSelected = computed(
   () => props.rows.length > 0 && selected.value.length === props.rows.length,
@@ -40,15 +38,16 @@ const someSelected = computed(
   () => selected.value.length > 0 && selected.value.length < props.rows.length,
 )
 
+const isRowSelected = (row: Record<TKey, unknown>) => selected.value.includes(row)
+
 const toggleAll = () => {
-  emit('update:modelValue', allSelected.value ? [] : props.rows.map((_, i) => i))
+  selected.value = allSelected.value ? [] : [...props.rows]
 }
 
-const toggleRow = (index: number) => {
-  const next = selected.value.includes(index)
-    ? selected.value.filter((i) => i !== index)
-    : [...selected.value, index]
-  emit('update:modelValue', next)
+const toggleRow = (row: Record<TKey, unknown>) => {
+  selected.value = isRowSelected(row)
+    ? selected.value.filter((r) => r !== row)
+    : [...selected.value, row]
 }
 
 const columnTemplate = computed(() =>
@@ -61,32 +60,30 @@ const gridTemplate = computed(() =>
 
 const handleSort = (column: TableColumn) => {
   if (!column.sortable) return
-  const newDirection =
-    props.sortKey === column.key && props.sortDirection === 'asc' ? 'desc' : 'asc'
-  emit('sort', column.key, newDirection)
+  sortDirection.value =
+    sortKey.value === column.key && sortDirection.value === 'asc' ? 'desc' : 'asc'
+  sortKey.value = column.key as TKey
 }
 
 const handleRowClick = (event: MouseEvent, rowIndex: number) => {
-  if (!props.selectable) return
   const path = event.composedPath() as Element[]
   const isInteractive = path.some(
     (el) => el.tagName && INTERACTIVE.includes(el.tagName.toLowerCase()),
   )
-  if (!isInteractive) toggleRow(rowIndex)
+  if (isInteractive) return
+  emit('row-click', props.rows[rowIndex])
 }
 
 const getRowRoundedClass = (rowIndex: number) => {
-  if (!props.selectable || !selected.value.includes(rowIndex)) return ''
-  const prevSelected = selected.value.includes(rowIndex - 1)
-  const nextSelected = selected.value.includes(rowIndex + 1)
+  if (!props.selectable || !isRowSelected(props.rows[rowIndex])) return ''
+  const prevSelected = rowIndex > 0 && isRowSelected(props.rows[rowIndex - 1])
+  const nextSelected = rowIndex < props.rows.length - 1 && isRowSelected(props.rows[rowIndex + 1])
   if (!prevSelected && !nextSelected) return 'rounded-md'
   if (!prevSelected) return 'rounded-t-md'
   if (!nextSelected) return 'rounded-b-md'
   return ''
 }
 
-const rowRefs = ref<HTMLElement[]>([])
-
 const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
   if (event.key === 'ArrowDown') {
     event.preventDefault()
@@ -176,18 +173,20 @@ const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
             v-for="(row, rowIndex) in rows"
             :key="rowIndex"
             ref="rowRefs"
-            class="grid border-b border-gray-100 transition-colors duration-150 focus-visible:bg-slate-50 focus-visible:ring-2 focus-visible:ring-cornflower-blue-500 focus-visible:outline-none focus-visible:ring-inset"
+            class="grid border-b border-gray-100 transition-colors duration-150 hover:bg-cornflower-blue-50 focus-visible:bg-slate-50 focus-visible:ring-2 focus-visible:ring-cornflower-blue-500 focus-visible:outline-none focus-visible:ring-inset"
             :class="[
               {
-                'hover:bg-slate-50': selectable,
-                'border-white/80 bg-cornflower-blue-50': selectable && selected.includes(rowIndex),
+                'hover:rounded-md': !isRowSelected(rows[rowIndex]),
+                'border-white/80 bg-cornflower-blue-100':
+                  selectable && isRowSelected(rows[rowIndex]),
+                'border-transparent': selectable && isRowSelected(rows[rowIndex + 1]),
               },
               getRowRoundedClass(rowIndex),
             ]"
             :style="{ gridTemplateColumns: gridTemplate }"
             role="row"
             :aria-rowindex="rowIndex + 2"
-            :aria-selected="selectable ? selected.includes(rowIndex) : undefined"
+            :aria-selected="selectable ? isRowSelected(row) : undefined"
             tabindex="0"
             @click="handleRowClick($event, rowIndex)"
             @keydown="handleRowKeydown($event, rowIndex)"
@@ -199,9 +198,9 @@ const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
               :aria-colindex="1"
             >
               <Checkbox
-                :model-value="selected.includes(rowIndex)"
+                :model-value="isRowSelected(row)"
                 :aria-label="`Select row ${rowIndex + 1}`"
-                @update:model-value="toggleRow(rowIndex)"
+                @update:model-value="toggleRow(row)"
               />
             </div>
             <div

package/src/components.json

@@ -11,6 +11,7 @@
   "NexxtHeader": "components/Header/Header.vue",
   "NexxtIcon": "components/Icon/Icon.vue",
   "NexxtInfoBlock": "components/InfoBlock/InfoBlock.vue",
+  "NexxtInputField": "components/InputField/InputField.vue",
   "NexxtPagination": "components/Pagination/Pagination.vue",
   "NexxtProgressBar": "components/ProgressBar/ProgressBar.vue",
   "NexxtSocialIcons": "components/SocialIcons/SocialIcons.vue",

package/src/index.ts

@@ -11,6 +11,7 @@ export { default as NexxtDropdownButton } from './components/DropdownButton/Drop
 export { default as NexxtHeader } from './components/Header/Header.vue'
 export { default as NexxtIcon } from './components/Icon/Icon.vue'
 export { default as NexxtInfoBlock } from './components/InfoBlock/InfoBlock.vue'
+export { default as NexxtInputField } from './components/InputField/InputField.vue'
 export { default as NexxtPagination } from './components/Pagination/Pagination.vue'
 export { default as NexxtProgressBar } from './components/ProgressBar/ProgressBar.vue'
 export { default as NexxtSocialIcons } from './components/SocialIcons/SocialIcons.vue'