@citizenplane/pimp 9.7.5 → 9.7.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "9.7.5",
+  "version": "9.7.6",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpCheckbox.vue

@@ -3,19 +3,20 @@
     <div class="cpCheckbox__wrapper">
       <input
         :id="checkboxUniqueId"
-        v-model="isChecked"
+        ref="inputRef"
         :autofocus="autofocus"
+        :checked="isChecked"
         :disabled="isDisabled"
         :name="groupName"
         type="checkbox"
         :value="checkboxValue"
-        @change="onChange(checkboxValue)"
+        @change="onChange"
       />
-      <cp-icon type="check" />
+      <cp-icon :type="icon" />
     </div>
     <div class="cpCheckbox__content">
       <slot>
-        <span v-if="checkboxLabel" class="cpCheckbox__label" :class="labelComputedClasses">
+        <span v-if="checkboxLabel" class="cpCheckbox__label">
           {{ checkboxLabel }}
         </span>
       </slot>
@@ -27,19 +28,23 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useSlots, useId } from 'vue'
+import { computed, ref, useSlots, useId, watch, nextTick } from 'vue'
 
 import { ToggleColors } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
+type EmitType = {
+  (e: 'update:modelValue', value: boolean | unknown[]): void
+}
+
 interface Props {
   autofocus?: boolean
-  capitalizeLabel?: boolean
   checkboxLabel?: string
   checkboxValue?: string | number
   color?: string
   groupName?: string
   helper?: string
+  indeterminate?: boolean
   isDisabled?: boolean
   modelValue?: boolean | unknown[]
   reverseLabel?: boolean
@@ -49,34 +54,42 @@ const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
   checkboxValue: '',
   checkboxLabel: '',
-  isDisabled: false,
   groupName: '',
-  // eslint-disable-next-line vue/no-boolean-default
-  capitalizeLabel: true,
   color: ToggleColors.BLUE,
-  reverseLabel: false,
-  autofocus: false,
   helper: '',
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<EmitType>()
 
-const checkedProxy = ref(false)
 const checkboxUniqueId = useId()
-
-const isChecked = computed({
-  get() {
-    if (Array.isArray(props.modelValue)) {
-      return props.modelValue.includes(props.checkboxValue)
-    }
-    return props.modelValue
-  },
-  set(newValue) {
-    checkedProxy.value = newValue
+const inputRef = ref<HTMLInputElement>()
+
+// Synchronize native checkbox state with our props
+// as it will not reactively update otherwise
+watch(
+  () => ({ checked: props.modelValue, indeterminate: props.indeterminate }),
+  ({ checked, indeterminate }) => {
+    nextTick(() => {
+      if (inputRef.value) {
+        inputRef.value.indeterminate = indeterminate
+        if (!Array.isArray(checked)) {
+          inputRef.value.checked = checked as boolean
+        }
+      }
+    })
   },
+  { immediate: true },
+)
+
+const isChecked = computed(() => {
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue.includes(props.checkboxValue)
+  }
+  return props.modelValue
 })
 
 const capitalizedColor = computed(() => capitalizeFirstLetter(props.color))
+const icon = computed(() => (props.indeterminate ? 'minus' : 'check'))
 
 const slots = useSlots()
 const hasDefaultSlot = computed(() => !!slots.default)
@@ -89,36 +102,39 @@ const computedClasses = computed(() => {
       'cpCheckbox--isEmpty': isEmpty.value,
       'cpCheckbox--isDisabled': props.isDisabled,
       'cpCheckbox--isReversed': props.reverseLabel,
+      'cpCheckbox--isIndeterminate': props.indeterminate,
     },
     `cpCheckbox--is${capitalizedColor.value}`,
   ]
 })
 
-const labelComputedClasses = computed(() => {
-  return { 'cpCheckbox__label--isCapitalized': props.capitalizeLabel }
-})
-
-const onChange = (value: string | number) => {
+const onChange = () => {
   if (Array.isArray(props.modelValue)) {
     const currentValues = [...props.modelValue]
-    const valueIndex = currentValues.indexOf(value)
+    const valueIndex = currentValues.indexOf(props.checkboxValue)
 
     if (valueIndex > -1) {
       currentValues.splice(valueIndex, 1)
     } else {
-      currentValues.push(value)
+      currentValues.push(props.checkboxValue)
     }
 
     emit('update:modelValue', currentValues)
   } else {
-    emit('update:modelValue', !props.modelValue)
+    // Always uncheck when previously indeterminate
+    if (props.indeterminate) {
+      emit('update:modelValue', false)
+    } else {
+      emit('update:modelValue', !props.modelValue)
+    }
   }
 }
 </script>
 
 <style lang="scss">
 @mixin cp-checkbox-style($color, $className) {
-  &--is#{$className} input:checked {
+  &--is#{$className} input:checked,
+  &--is#{$className} input:indeterminate {
     background-color: $color;
     border-color: $color;
   }
@@ -127,7 +143,8 @@ const onChange = (value: string | number) => {
     background-color: color.scale($color, $lightness: 95%);
   }
 
-  &--is#{$className}:hover input:checked {
+  &--is#{$className}:hover input:checked,
+  &--is#{$className}:hover input:indeterminate {
     background-color: color.adjust($color, $lightness: -10%);
   }
 
@@ -192,7 +209,8 @@ const onChange = (value: string | number) => {
       stroke-width: 3;
     }
 
-    &:checked + i {
+    &:checked + i,
+    &:indeterminate + i {
       visibility: visible;
       opacity: 1;
     }
@@ -241,7 +259,7 @@ const onChange = (value: string | number) => {
   &__label {
     font-weight: 500;
 
-    &--isCapitalized::first-letter {
+    &::first-letter {
       text-transform: capitalize;
     }
   }

package/src/stories/CpCheckbox.stories.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 import type { Meta, StoryObj } from '@storybook/vue3'
 
@@ -28,10 +28,6 @@ const meta = {
       control: 'text',
       description: 'Name attribute for checkbox group',
     },
-    capitalizeLabel: {
-      control: 'boolean',
-      description: 'Whether to capitalize the first letter of the label',
-    },
     color: {
       control: 'select',
       options: ['blue', 'purple'],
@@ -49,6 +45,10 @@ const meta = {
       control: 'text',
       description: 'Helper text to display below the label',
     },
+    indeterminate: {
+      control: 'boolean',
+      description: 'Whether the checkbox is in an indeterminate state',
+    },
   },
 } satisfies Meta<typeof CpCheckbox>
 
@@ -57,14 +57,14 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    checkboxLabel: 'Checkbox Label',
+    checkboxLabel: 'checkbox label',
     modelValue: false,
     isDisabled: false,
-    capitalizeLabel: true,
     color: 'blue',
     reverseLabel: false,
     autofocus: false,
     helper: '',
+    indeterminate: false,
   },
   render: (args) => ({
     components: { CpCheckbox },
@@ -118,12 +118,71 @@ export const Reversed: Story = {
   },
 }
 
-export const WithoutCapitalization: Story = {
-  args: {
-    ...Default.args,
-    capitalizeLabel: false,
-    checkboxLabel: 'checkbox label',
-  },
+export const Indeterminate: Story = {
+  render: () => ({
+    components: { CpCheckbox },
+    setup() {
+      const childOptions = ref([
+        { id: 'email', label: 'Email notifications', checked: false },
+        { id: 'push', label: 'Push notifications', checked: true },
+        { id: 'sms', label: 'SMS notifications', checked: false },
+      ])
+
+      const parentState = computed(() => {
+        const checkedCount = childOptions.value.filter((option) => option.checked).length
+        const totalCount = childOptions.value.length
+
+        if (checkedCount === 0) return { checked: false, indeterminate: false }
+        if (checkedCount === totalCount) return { checked: true, indeterminate: false }
+        return { checked: false, indeterminate: true }
+      })
+
+      const handleParentChange = (value: boolean) => childOptions.value.forEach((option) => (option.checked = value))
+
+      const handleChildChange = (childId: string) => {
+        const child = childOptions.value.find((option) => option.id === childId)
+        if (child) {
+          child.checked = !child.checked
+        }
+      }
+
+      return {
+        childOptions,
+        parentState,
+        handleParentChange,
+        handleChildChange,
+      }
+    },
+    template: `
+      <div style="padding: 20px; display: flex; flex-direction: column; gap: 16px;">
+        <div style="font-size: 16px; font-weight: 600; margin-bottom: 8px;">
+          Parent-Child Checkbox Example
+        </div>
+        <CpCheckbox
+          :model-value="parentState.checked"
+          :indeterminate="parentState.indeterminate"
+          checkbox-label="All notifications"
+          @update:model-value="handleParentChange"
+          style="font-weight: 500; border-bottom: 1px solid #e0e0e0; padding-bottom: 12px;"
+        />
+        <div style="margin-left: 24px; display: flex; flex-direction: column; gap: 8px;">
+          <CpCheckbox
+            v-for="option in childOptions"
+            :key="option.id"
+            :model-value="option.checked"
+            :checkbox-label="option.label"
+            @update:model-value="() => handleChildChange(option.id)"
+          />
+        </div>
+        <div style="margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 4px; font-size: 14px;">
+          <strong>Current state: </strong> 
+          <span v-if="parentState.indeterminate" style="color: #ff9800;">Indeterminate (some selected)</span>
+          <span v-else-if="parentState.checked" style="color: #4caf50;">All selected</span>
+          <span v-else style="color: #757575;">None selected</span>
+        </div>
+      </div>
+    `,
+  }),
 }
 
 export const CheckboxGroup: Story = {