sprintify-ui 0.12.13 → 0.12.15

package/src/components/BaseDataIteratorSectionButton.vue

@@ -2,30 +2,31 @@
   <BaseButton
     :icon="section.icon"
     :size="size"
+    :color="hasCount ? 'primary' : ''"
     type="button"
     @click="open()"
   >
     <span v-if="section.title && width > 600">
       {{ section.title }}
     </span>
-    <BaseBadge
-      v-if="section.count"
-      class="ml-2"
-      color="blue"
-      :size="size == 'sm' ? 'sm' : 'md'"
+    <span
+      v-if="hasCount"
+      class="ml-2 inline-flex items-center whitespace-nowrap rounded bg-white/25 px-1.5 py-0.5 font-semibold leading-tight"
+      :class="size == 'sm' ? 'text-[10px]' : 'text-xs'"
     >
-      {{ section.count }}
-    </BaseBadge>
+      <span aria-hidden="true">{{ section.count }}</span>
+      <span class="sr-only">{{ activeFiltersLabel }}</span>
+    </span>
   </BaseButton>
 </template>
 
 <script lang="ts" setup>
 import { DataIteratorSection } from '@/types';
 import BaseButton from './BaseButton.vue';
-import BaseBadge from './BaseBadge.vue';
 import { Size } from '@/utils/sizes';
+import { useSectionCount } from '@/composables/sectionCount';
 
-defineProps<{
+const props = defineProps<{
   section: DataIteratorSection;
   size: Size;
 }>();
@@ -36,6 +37,8 @@ const emit = defineEmits<{
 
 const width = inject('dataIterator:width', ref(0));
 
+const { hasCount, activeFiltersLabel } = useSectionCount(() => props.section);
+
 function open() {
   emit('open');
 }

package/src/composables/sectionCount.ts

@@ -0,0 +1,18 @@
+import { DataIteratorSection } from '@/types';
+import { t } from '@/i18n';
+
+/**
+ * Shared active-filter badge state for the data-iterator section chrome (the
+ * box header and the compact funnel button). Each renders the count with its
+ * own markup, but the "is there a count to show?" test and the accessible
+ * plural label are identical — so they live here.
+ */
+export function useSectionCount(getSection: () => DataIteratorSection) {
+  const hasCount = computed<boolean>(() => (getSection().count ?? 0) > 0);
+
+  const activeFiltersLabel = computed<string>(() =>
+    t('sui.x_active_filters', { count: getSection().count })
+  );
+
+  return { hasCount, activeFiltersLabel };
+}

package/src/lang/en.json

@@ -93,6 +93,7 @@
     "up_to_x": "Up to {x}",
     "upload_failed": "Upload failed",
     "whoops": "Whoops",
+    "x_active_filters": "1 active filter | {count} active filters",
     "x_ago": "{duration} ago",
     "x_rows_selected": "1 item selected | {count} items selected",
     "year": "Year",

package/src/lang/fr.json

@@ -93,6 +93,7 @@
     "up_to_x": "Jusqu'à {x}",
     "upload_failed": "Le téléchargement a échoué",
     "whoops": "Oups",
+    "x_active_filters": "1 filtre actif | {count} filtres actifs",
     "x_ago": "il y a {duration}",
     "x_rows_selected": "1 item sélectionné | \n{count} items sélectionnés",
     "year": "Année",

package/src/utils/index.ts

@@ -6,6 +6,7 @@ import { disableScroll, enableScroll } from './scrollPreventer';
 import { blobToBase64, validateBase64, base64ToBlob } from './blob';
 import { getColorConfig } from './colors';
 import { getInitials, getAvatarColor } from './avatar';
+import { isEmpty } from './isEmpty';
 
 export {
   toHumanList,
@@ -20,4 +21,5 @@ export {
   getColorConfig,
   getInitials,
   getAvatarColor,
+  isEmpty,
 };

package/src/utils/isEmpty.ts

@@ -0,0 +1,54 @@
+/**
+ * Deep emptiness predicate — the default "is this filter active?" rule.
+ *
+ * A value counts as *empty* (i.e. not an active filter) when it carries no
+ * user intent. This is deliberately NOT lodash's `isEmpty`: here `0` and
+ * `false` are meaningful, exposed choices and therefore count as active.
+ *
+ * Reference table (WIT-159):
+ *
+ * | Value                              | Empty (does not count) |
+ * |------------------------------------|------------------------|
+ * | `undefined`, `null`                | yes                    |
+ * | `''`, `'   '` (trimmed)            | yes                    |
+ * | `[]`, `[null]`, `['']` (deep)      | yes                    |
+ * | `{}`, `{from:null,to:null}` (deep) | yes                    |
+ * | `0`                                | **no → counts**        |
+ * | `false`                            | **no → counts**        |
+ * | `'jedi'`, `5`, `['a']`, `Date`     | no → counts            |
+ *
+ * Arrays and plain objects are inspected recursively: a container is empty
+ * only when every leaf it holds is itself empty. This keeps a grouped filter
+ * (`{ from, to }`) counting as a single active filter when any leaf is set.
+ */
+export function isEmpty(value: unknown): boolean {
+  if (value === undefined || value === null) {
+    return true;
+  }
+
+  if (typeof value === 'string') {
+    return value.trim().length === 0;
+  }
+
+  // 0 and false are explicit, exposed choices → they count as active.
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return false;
+  }
+
+  if (value instanceof Date) {
+    return false;
+  }
+
+  if (Array.isArray(value)) {
+    return value.every((item) => isEmpty(item));
+  }
+
+  if (typeof value === 'object') {
+    return Object.values(value as Record<string, unknown>).every((item) =>
+      isEmpty(item)
+    );
+  }
+
+  // Any other primitive (bigint, symbol, function, …) carries intent.
+  return false;
+}