Refactored CountSelect.

frontend/src/components/departments/DepartmentList.vue

@@ -120,7 +120,7 @@ watch(payload, (payload) => refresh(payload), { deep: true, immediate: true });
     <div class="row">
       <SearchInput class="col-lg-4" v-model="search" />
       <SortSelect class="col-lg-4" :descending="isDescending" :options="sortOptions" v-model="sort" @descending="isDescending = $event" />
-      <CountSelect class="col-lg-4" :model-value="count.toString()" @update:model-value="count = $event ?? 0" />
+      <CountSelect class="col-lg-4" :model-value="count" @update:model-value="count = $event ?? 0" />
     </div>
     <template v-if="departments.length">
       <table class="table table-striped">

frontend/src/components/shared/CountSelect.vue

@@ -1,22 +1,45 @@
 <script setup lang="ts">
-import { TarSelect, parsingUtils, type SelectOptions } from "logitar-vue3-ui";
+import { TarSelect, parsingUtils, type SelectOption, type SelectSize } from "logitar-vue3-ui";
 import { useI18n } from "vue-i18n";
 
 const { parseNumber } = parsingUtils;
 const { t } = useI18n();
 
-const props = withDefaults(defineProps<SelectOptions>(), {
-  floating: true,
-  id: "count",
-  label: "count",
-  options: () => [{ text: "10" }, { text: "25" }, { text: "50" }, { text: "100" }],
-});
+const props = withDefaults(
+  defineProps<{
+    ariaLabel?: string;
+    describedBy?: string;
+    disabled?: boolean | string;
+    floating?: boolean | string;
+    id?: string;
+    label?: string;
+    modelValue?: number;
+    multiple?: boolean | string;
+    name?: string;
+    options?: SelectOption[];
+    placeholder?: string;
+    required?: boolean | string;
+    size?: SelectSize;
+  }>(),
+  {
+    floating: true,
+    id: "count",
+    label: "count",
+    options: () => [{ text: "10" }, { text: "25" }, { text: "50" }, { text: "100" }],
+  },
+);
 
 defineEmits<{
   (e: "update:model-value", value?: number): void;
 }>();
 </script>
 
 <template>
-  <TarSelect v-bind="props" :label="t(label)" :options="options" @update:model-value="$emit('update:model-value', parseNumber($event))" />
+  <TarSelect
+    v-bind="props"
+    :aria-label="ariaLabel ? t(ariaLabel) : undefined"
+    :label="t(label)"
+    :placeholder="placeholder ? t(placeholder) : undefined"
+    @update:model-value="$emit('update:model-value', parseNumber($event))"
+  />
 </template>

frontend/src/views/articles/ArticleList.vue

@@ -138,7 +138,7 @@ watch(
         @descending="setQuery('isDescending', $event.toString())"
         @update:model-value="setQuery('sort', $event ?? '')"
       />
-      <CountSelect class="col-lg-4" :model-value="count.toString()" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
+      <CountSelect class="col-lg-4" :model-value="count" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
     </div>
     <template v-if="articles.length">
       <table class="table table-striped">

frontend/src/views/banners/BannerList.vue

@@ -138,7 +138,7 @@ watch(
         @descending="setQuery('isDescending', $event.toString())"
         @update:model-value="setQuery('sort', $event ?? '')"
       />
-      <CountSelect class="col-lg-4" :model-value="count.toString()" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
+      <CountSelect class="col-lg-4" :model-value="count" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
     </div>
     <template v-if="banners.length">
       <table class="table table-striped">

frontend/src/views/products/ProductList.vue

@@ -184,7 +184,7 @@ watch(
         @descending="setQuery('isDescending', $event.toString())"
         @update:model-value="setQuery('sort', $event ?? '')"
       />
-      <CountSelect class="col-lg-4" :model-value="count.toString()" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
+      <CountSelect class="col-lg-4" :model-value="count" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
     </div>
     <template v-if="products.length">
       <table class="table table-striped">

frontend/src/views/receipts/ReceiptListView.vue

@@ -166,7 +166,7 @@ watch(
         @descending="setQuery('isDescending', $event.toString())"
         @update:model-value="setQuery('sort', $event ?? '')"
       />
-      <CountSelect class="col-lg-4" :model-value="count.toString()" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
+      <CountSelect class="col-lg-4" :model-value="count" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
     </div>
     <template v-if="receipts.length">
       <ReceiptList :receipts="receipts" />

frontend/src/views/stores/StoreList.vue

@@ -146,7 +146,7 @@ watch(
         @descending="setQuery('isDescending', $event.toString())"
         @update:model-value="setQuery('sort', $event ?? '')"
       />
-      <CountSelect class="col-lg-3" :model-value="count.toString()" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
+      <CountSelect class="col-lg-3" :model-value="count" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
     </div>
     <template v-if="stores.length">
       <table class="table table-striped">

frontend/src/views/taxes/TaxList.vue

@@ -144,7 +144,7 @@ watch(
         @descending="setQuery('isDescending', $event.toString())"
         @update:model-value="setQuery('sort', $event ?? '')"
       />
-      <CountSelect class="col-lg-3" :model-value="count.toString()" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
+      <CountSelect class="col-lg-3" :model-value="count" @update:model-value="setQuery('count', ($event ?? 10).toString())" />
     </div>
     <template v-if="taxes.length">
       <table class="table table-striped">