feat: use kebab-case and define-model in input

alexdln · alexdln · commit 549026aeac4a · 2026-02-08T18:31:07.000Z
diff --git a/app/components/Compare/PackageSelector.vue b/app/components/Compare/PackageSelector.vue
@@ -157,7 +157,7 @@ function handleBlur() {
               ? $t('compare.selector.search_first')
               : $t('compare.selector.search_add')
           "
-          noCorrect
+          no-correct
           size="medium"
           class="w-full min-w-25 ps-7"
           aria-autocomplete="list"
diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
@@ -247,7 +247,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             autocomplete="off"
             class="w-full min-w-25"
             size="medium"
-            noCorrect
+            no-correct
             @input="handleTextInput"
           />
         </div>
diff --git a/app/components/Header/AuthModal.client.vue b/app/components/Header/AuthModal.client.vue
@@ -95,7 +95,7 @@ watch(handleInput, newHandleInput => {
             type="text"
             name="handle"
             :placeholder="$t('auth.modal.handle_placeholder')"
-            noCorrect
+            no-correct
             class="w-full"
             size="medium"
           />
diff --git a/app/components/Header/ConnectorModal.vue b/app/components/Header/ConnectorModal.vue
@@ -167,7 +167,7 @@ function handleDisconnect() {
             type="password"
             name="connector-token"
             :placeholder="$t('connector.modal.token_placeholder')"
-            noCorrect
+            no-correct
             class="w-full"
             size="medium"
           />
diff --git a/app/components/Header/SearchBox.vue b/app/components/Header/SearchBox.vue
@@ -112,7 +112,7 @@ defineExpose({ focus })
             type="search"
             name="q"
             :placeholder="$t('search.placeholder')"
-            noCorrect
+            no-correct
             class="w-full min-w-25 ps-7"
             @focus="isSearchFocused = true"
             @blur="isSearchFocused = false"
diff --git a/app/components/Input/Base.vue b/app/components/Input/Base.vue
@@ -1,37 +1,30 @@
 <script setup lang="ts">
 import { noCorrect } from '~/utils/input'
 
+const model = defineModel<string>({ default: '' })
+
 const props = withDefaults(
   defineProps<{
     disabled?: boolean
-    modelValue?: string
     size?: 'small' | 'medium' | 'large'
     noCorrect?: boolean
   }>(),
   {
-    modelValue: '',
     size: 'medium',
     noCorrect: true,
   },
 )
 
 const emit = defineEmits<{
-  'update:modelValue': [value: string]
-  'focus': [event: FocusEvent]
-  'blur': [event: FocusEvent]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
 }>()
 
 const el = useTemplateRef('el')
 
-const model = computed({
-  get: () => props.modelValue,
-  set: (value: string) => emit('update:modelValue', value),
-})
-
 defineExpose({
   focus: () => el.value?.focus(),
   blur: () => el.value?.blur(),
-  getBoundingClientRect: () => el.value?.getBoundingClientRect(),
 })
 </script>
 
diff --git a/app/components/Org/MembersPanel.vue b/app/components/Org/MembersPanel.vue
@@ -337,7 +337,7 @@ watch(lastExecutionTime, () => {
           type="search"
           name="members-search"
           :placeholder="$t('org.members.filter_placeholder')"
-          noCorrect
+          no-correct
           class="w-full min-w-25 ps-7"
           size="small"
         />
@@ -523,7 +523,7 @@ watch(lastExecutionTime, () => {
             type="text"
             name="new-member-username"
             :placeholder="$t('org.members.username_placeholder')"
-            noCorrect
+            no-correct
             class="w-full min-w-25"
             size="small"
           />
diff --git a/app/components/Org/TeamsPanel.vue b/app/components/Org/TeamsPanel.vue
@@ -293,7 +293,7 @@ watch(lastExecutionTime, () => {
           type="search"
           name="teams-search"
           :placeholder="$t('org.teams.filter_placeholder')"
-          noCorrect
+          no-correct
           class="w-full min-w-25 ps-7"
           size="medium"
         />
@@ -453,7 +453,7 @@ watch(lastExecutionTime, () => {
                 type="text"
                 :name="`add-user-${teamName}`"
                 :placeholder="$t('org.teams.username_placeholder')"
-                noCorrect
+                no-correct
                 class="flex-1 min-w-25"
                 size="medium"
               />
@@ -510,7 +510,7 @@ watch(lastExecutionTime, () => {
               type="text"
               name="new-team-name"
               :placeholder="$t('org.teams.team_name_placeholder')"
-              noCorrect
+              no-correct
               class="flex-1 min-w-25 rounded-is-none"
               size="medium"
             />
diff --git a/app/components/Package/ListControls.vue b/app/components/Package/ListControls.vue
@@ -66,7 +66,7 @@ const showFilteredCount = computed(() => {
         v-model="filterValue"
         type="search"
         :placeholder="placeholder ?? $t('package.list.filter_placeholder')"
-        noCorrect
+        no-correct
         class="w-full min-w-25 ps-10"
         size="medium"
       />
diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
@@ -260,7 +260,7 @@ watch(
             type="text"
             name="add-owner-username"
             :placeholder="$t('package.maintainers.username_placeholder')"
-            noCorrect
+            no-correct
             class="flex-1 min-w-25 m-1"
             size="small"
           />
diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -89,7 +89,7 @@ defineOgImageComponent('Default', {
                   name="q"
                   autofocus
                   :placeholder="$t('search.placeholder')"
-                  noCorrect
+                  no-correct
                   size="large"
                   class="w-full ps-8 pe-24"
                   @focus="isSearchFocused = true"
diff --git a/test/nuxt/components/Input/Base.spec.ts b/test/nuxt/components/Input/Base.spec.ts
@@ -119,14 +119,6 @@ describe('InputBase', () => {
       expect(document.activeElement).not.toBe(input.element)
       container.remove()
     })
-
-    it('exposes getBoundingClientRect()', async () => {
-      const component = await mountSuspended(InputBase)
-      const rect = component.vm.getBoundingClientRect()
-      expect(rect).toBeDefined()
-      expect(typeof rect?.width).toBe('number')
-      expect(typeof rect?.height).toBe('number')
-    })
   })
 
   describe('accessibility (attrs fallthrough)', () => {

Original file line number	Diff line number	Diff line change
`@@ -157,7 +157,7 @@ function handleBlur() {`
`157`	`157`	`? $t('compare.selector.search_first')`
`158`	`158`	`: $t('compare.selector.search_add')`
`159`	`159`	`"`
`160`		`- noCorrect`
	`160`	`+ no-correct`
`161`	`161`	`size="medium"`
`162`	`162`	`class="w-full min-w-25 ps-7"`
`163`	`163`	`aria-autocomplete="list"`