WIP - Minus FormCheckbox

packages/frontend-2/components/viewer/filters/filter/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="border border-outline-2 rounded-xl mb-2">
+  <div class="group border border-outline-2 rounded-xl mb-2">
     <div class="p-1" :class="{ 'border-b border-outline-3': !collapsed }">
       <ViewerFiltersFilterHeader v-model:collapsed="collapsed" :filter="filter" />
     </div>

packages/frontend-2/components/viewer/filters/filter/Header.vue

@@ -2,7 +2,7 @@
 <!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
 <template>
   <div
-    class="flex group items-center justify-between"
+    class="flex items-center justify-between"
     :class="{ 'cursor-pointer': collapsed }"
     @click="toggleCollapsed"
   >
@@ -16,16 +16,6 @@
 
         {{ getPropertyName(filter.filter?.key) }}
       </FormButton>
-      <!-- <FormButton
-        v-tippy="'Toggle coloring for this property'"
-        color="subtle"
-        size="sm"
-        hide-text
-        class="opacity-0 group-hover:opacity-100 text-foreground-3"
-        :icon-right="ChevronsUpDown"
-        :is-expanded="!collapsed"
-        @click.stop="collapsed = !collapsed"
-      /> -->
     </div>
     <div class="flex items-start gap-0.5">
       <FormButton

packages/frontend-2/components/viewer/filters/filter/string/SelectAll.vue

@@ -6,17 +6,13 @@
       class="flex text-body-2xs items-center px-2 py-1.5 w-full hover:bg-highlight-1 rounded cursor-pointer"
       @click="handleSelectAllChange"
     >
-      <div
-        class="h-3.5 w-3.5 rounded border cursor-pointer flex items-center justify-center mr-2.5"
-        :class="[
-          areAllValuesSelected || areSomeValuesSelected
-            ? 'border-outline-5 hover:border-foreground-2 text-foreground'
-            : 'bg-foundation border-highlight-3 hover:border-foreground-2'
-        ]"
-      >
-        <Check v-if="areAllValuesSelected" class="h-3 w-3" />
-        <Minus v-else-if="areSomeValuesSelected" class="h-3 w-3" />
-      </div>
+      <FormCheckbox
+        :name="`select-all-${selectedCount}-${totalCount}`"
+        :model-value="areAllValuesSelected"
+        :indeterminate="areSomeValuesSelected"
+        class="mr-2.5 pointer-events-none"
+        hide-label
+      />
       <span class="text-foreground ml-px">Select all</span>
       <div class="text-foreground-2 text-body-3xs ml-1">
         ({{ selectedCount }} of {{ totalCount }})
@@ -26,7 +22,8 @@
 </template>
 
 <script setup lang="ts">
-import { Check, Minus } from 'lucide-vue-next'
+import { computed } from 'vue'
+import { FormCheckbox } from '@speckle/ui-components'
 
 const props = defineProps<{
   selectedCount: number

packages/frontend-2/components/viewer/filters/filter/string/ValueItem.vue

@@ -7,7 +7,9 @@
       @click="$emit('toggle')"
     >
       <div class="flex items-center min-w-0">
+        <!-- Checkbox is purely visual - so pointer-events-none -->
         <FormCheckbox
+          class="pointer-events-none"
           :class="{
             'border-transparent group-hover:border-outline-5': !isSelected,
             'opacity-50 dark:!bg-transparent !border !border-outline-5 !group-hover:border-outline-5':
@@ -16,7 +18,6 @@
           :name="`filter-${filterId}-${value}`"
           :model-value="isSelected"
           hide-label
-          @update:model-value="$emit('toggle')"
         />
         <span class="flex-1 truncate text-foreground ml-1">
           {{ value }}

packages/ui-components/src/components/form/Checkbox.vue

@@ -7,18 +7,40 @@
       class="flex h-6 items-center"
       :class="labelPosition === 'left' ? 'w-1/2 justify-end mr-2' : ''"
     >
-      <input
-        :id="finalId"
-        :checked="coreChecked"
-        :aria-describedby="descriptionId"
-        :name="name"
-        :disabled="disabled"
-        :value="checkboxValue"
-        type="checkbox"
-        :class="checkboxClasses"
-        v-bind="$attrs"
-        @change="onChange"
-      />
+      <div class="relative">
+        <input
+          :id="finalId"
+          :checked="coreChecked"
+          :aria-describedby="descriptionId"
+          :name="name"
+          :disabled="disabled"
+          :value="checkboxValue"
+          type="checkbox"
+          :class="checkboxClasses"
+          v-bind="$attrs"
+          @change="onChange"
+        />
+        <!-- Indeterminate state overlay -->
+        <div
+          v-if="indeterminate"
+          class="absolute inset-0 flex items-center justify-center pointer-events-none"
+        >
+          <svg
+            class="h-3 w-3 text-foreground"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M20 12H4"
+            />
+          </svg>
+        </div>
+      </div>
     </div>
     <div class="text-sm" :class="labelPosition === 'left' ? 'w-1/2' : 'ml-2'">
       <label :for="finalId" :class="{ 'sr-only': hideLabel }">
@@ -152,6 +174,10 @@ const props = defineProps({
   labelPosition: {
     type: String as PropType<LabelPosition>,
     default: 'top'
+  },
+  indeterminate: {
+    type: Boolean,
+    default: false
   }
 })