feat: use nc input fields instead of bare fields

Author: chenasraf

src/components/HouseSettingsDialog/HouseSettingsDialog.vue

@@ -45,14 +45,15 @@
             <tr v-for="member in members" :key="member.id">
               <td>{{ member.displayName }}</td>
               <td>
-                <select
+                <NcSelect
                   v-if="canAdmin && member.role !== 'owner'"
-                  :value="member.role"
-                  @change="changeRole(member.id, ($event.target as HTMLSelectElement).value)"
-                >
-                  <option value="admin">{{ roleLabel('admin') }}</option>
-                  <option value="member">{{ roleLabel('member') }}</option>
-                </select>
+                  :model-value="roleOptionFor(member.role)"
+                  :options="roleOptions"
+                  :clearable="false"
+                  :searchable="false"
+                  autocomplete="off"
+                  @option:selected="(opt: RoleOption) => changeRole(member.id, opt.value)"
+                />
                 <span v-else>{{ roleLabel(member.role) }}</span>
               </td>
               <td>
@@ -154,7 +155,12 @@
         :placeholder="strings.userIdPlaceholder"
         autocomplete="off"
       />
-      <NcSelect v-model="newRoleOption" :options="roleOptions" :input-label="strings.roleLabel" />
+      <NcSelect
+        v-model="newRoleOption"
+        :options="roleOptions"
+        :input-label="strings.roleLabel"
+        autocomplete="off"
+      />
       <p v-if="addError" class="pantry-form-error">{{ addError }}</p>
     </form>
     <template #actions>
@@ -562,6 +568,10 @@ function roleLabel(role: HouseRole): string {
   }
 }
 
+function roleOptionFor(role: HouseRole): RoleOption {
+  return roleOptions.value.find((o) => o.value === role) ?? roleOptions.value[0]!
+}
+
 const strings = {
   title: t('pantry', 'House settings'),
   generalSection: t('pantry', 'General'),

src/components/RecurrenceEditor/RecurrenceEditor.test.ts

@@ -38,8 +38,8 @@ vi.mock('@nextcloud/vue/components/NcCheckboxRadioSwitch', () => ({
   default: {
     name: 'NcCheckboxRadioSwitch',
     template:
-      '<label class="nc-checkbox"><input type="checkbox" :checked="modelValue" @change="$emit(\'update:modelValue\', $event.target.checked)" /><slot /></label>',
-    props: ['modelValue', 'type'],
+      "<label :class=\"type === 'radio' ? 'nc-radio' : 'nc-checkbox'\"><input :type=\"type === 'radio' ? 'radio' : 'checkbox'\" :checked=\"type === 'radio' ? modelValue === value : !!modelValue\" :value=\"value\" :name=\"name\" @change=\"$emit('update:modelValue', type === 'radio' ? value : $event.target.checked)\" /><slot /></label>",
+    props: ['modelValue', 'type', 'value', 'name'],
     emits: ['update:modelValue'],
   },
 }))
@@ -143,7 +143,7 @@ describe('RecurrenceEditor', () => {
 
     it('renders end condition radio buttons', () => {
       const wrapper = mountEditor()
-      const radios = wrapper.findAll('.pantry-recurrence__radio')
+      const radios = wrapper.findAll('.nc-radio')
       expect(radios.length).toBe(3)
     })
 

src/components/RecurrenceEditor/RecurrenceEditor.vue

@@ -87,13 +87,25 @@
       <section class="pantry-recurrence__section">
         <label class="pantry-recurrence__label">{{ strings.endsLabel }}</label>
         <div class="pantry-recurrence__ends">
-          <label class="pantry-recurrence__radio">
-            <input v-model="endKind" type="radio" value="never" />
-            <span>{{ strings.endNever }}</span>
-          </label>
-          <label class="pantry-recurrence__radio">
-            <input v-model="endKind" type="radio" value="count" />
-            <span>{{ strings.endAfter }}</span>
+          <NcCheckboxRadioSwitch
+            :model-value="endKind"
+            value="never"
+            name="pantry-end-kind"
+            type="radio"
+            @update:model-value="endKind = $event"
+          >
+            {{ strings.endNever }}
+          </NcCheckboxRadioSwitch>
+          <div class="pantry-recurrence__radio-row">
+            <NcCheckboxRadioSwitch
+              :model-value="endKind"
+              value="count"
+              name="pantry-end-kind"
+              type="radio"
+              @update:model-value="endKind = $event"
+            >
+              {{ strings.endAfter }}
+            </NcCheckboxRadioSwitch>
             <input
               v-model.number="endCount"
               type="number"
@@ -103,17 +115,24 @@
               :disabled="endKind !== 'count'"
             />
             <span>{{ strings.endAfterSuffix }}</span>
-          </label>
-          <label class="pantry-recurrence__radio">
-            <input v-model="endKind" type="radio" value="until" />
-            <span>{{ strings.endOn }}</span>
+          </div>
+          <div class="pantry-recurrence__radio-row">
+            <NcCheckboxRadioSwitch
+              :model-value="endKind"
+              value="until"
+              name="pantry-end-kind"
+              type="radio"
+              @update:model-value="endKind = $event"
+            >
+              {{ strings.endOn }}
+            </NcCheckboxRadioSwitch>
             <input
               v-model="endUntil"
               type="date"
               class="pantry-recurrence__date"
               :disabled="endKind !== 'until'"
             />
-          </label>
+          </div>
         </div>
       </section>
 
@@ -610,11 +629,10 @@ const strings = {
     gap: 0.5rem;
   }
 
-  &__radio {
+  &__radio-row {
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    cursor: pointer;
   }
 
   &__divider {