Checkbox ​

<script setup lang="ts">
import { ref } from 'vue'
import { Checkbox } from 'frappe-ui'

const items = ref([
  { label: 'Notifications', checked: true },
  { label: 'Weekly digest', checked: false },
  { label: 'Marketing emails', checked: true },
])

const allChecked = ref(false)

const indeterminate = ref(
  items.value.some((i) => i.checked) && !items.value.every((i) => i.checked),
)

function onSelectAll(val: boolean | 0 | 1 | undefined) {
  const checked = Boolean(val)
  items.value.forEach((i) => (i.checked = checked))
  allChecked.value = checked
  indeterminate.value = false
}

function onItemChange() {
  const checkedCount = items.value.filter((i) => i.checked).length
  allChecked.value = checkedCount === items.value.length
  indeterminate.value = checkedCount > 0 && checkedCount < items.value.length
}
</script>

<template>
  <div class="flex flex-col gap-1 w-48">
    <Checkbox
      :indeterminate="indeterminate"
      :model-value="allChecked"
      label="Select all"
      padded
      @update:model-value="onSelectAll"
    />
    <div class="pl-4 flex flex-col gap-1">
      <Checkbox
        v-for="item in items"
        :key="item.label"
        v-model="item.checked"
        :label="item.label"
        padded
        @update:model-value="onItemChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Checkbox } from 'frappe-ui'
</script>

<template>
  <div class="flex flex-col gap-3 items-start">
    <Checkbox label="Default" />
    <Checkbox label="Required" required />
    <Checkbox label="Disabled" disabled />
    <Checkbox label="With error" error="Required to continue." />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Avatar, MultiSelect } from 'frappe-ui'

const selected = ref<string[]>([])

const members = [
  { value: 'aaron-menezes', label: 'Aaron Menezes' },
  { value: 'vaani-kapoor', label: 'Vaani Kapoor' },
  { value: 'daniel-kapoor', label: 'Daniel Kapoor' },
  { value: 'steven-james', label: 'Steven James' },
  { value: 'dipen-gala', label: 'Dipen Gala' },
]
</script>

<template>
  <MultiSelect
    v-model="selected"
    :options="members"
    placeholder="Select members"
    class="w-64"
  >
    <template #item-prefix="{ item }">
      <Avatar :label="item.label" size="sm" />
    </template>
  </MultiSelect>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Checkbox } from 'frappe-ui'

const settings = ref({
  email: true,
  mentions: true,
  threads: true,
  events: false,
})
</script>

<template>
  <div class="flex w-96 flex-col gap-4">
    <Checkbox v-model="settings.email" label="Enable email notifications" />
    <Checkbox v-model="settings.mentions" label="Mentions" />
    <Checkbox
      v-model="settings.threads"
      label="Email threads on assigned document"
      description="Get notified when an email is received on any of the documents assigned to you."
    />
    <Checkbox v-model="settings.events" label="Event reminders" />
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { Checkbox } from 'frappe-ui'

const settings = reactive({
  roundToInteger: false,
  removeIfZero: false,
})

const helperText =
  'If enabled, the value specified or calculated in this component will not contribute to the earnings or deductions. However, its value can be referenced by other components that can be added or deducted.'
</script>

<template>
  <div class="flex flex-col gap-3 items-start w-[28rem]">
    <Checkbox
      v-model="settings.roundToInteger"
      label="Round to the nearest integer"
      :description="helperText"
    />
    <Checkbox
      v-model="settings.removeIfZero"
      label="Remove if zero valued"
      :description="helperText"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { Checkbox } from 'frappe-ui'

const settings = reactive({
  inclusiveText: false,
  paymentSchedule: false,
  taxesAsTable: true,
})
</script>

<template>
  <div class="flex flex-col gap-4 items-start w-[32rem]">
    <p class="text-lg-medium text-ink-gray-9">Print settings</p>
    <div class="flex flex-wrap gap-x-8 gap-y-2">
      <Checkbox v-model="settings.inclusiveText" label="Show inclusive text in print" />
      <Checkbox
        v-model="settings.paymentSchedule"
        label="Show payment schedule in print"
      />
      <Checkbox v-model="settings.taxesAsTable" label="Show taxes as table in print" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { Checkbox } from 'frappe-ui'

const ticketTypes = reactive({
  primary: true,
  promotions: true,
  social: true,
  updates: true,
})
</script>

<template>
  <div class="flex gap-3 items-start border-b border-outline-gray-1 py-3 w-[28rem]">
    <p class="text-base text-ink-gray-7 pt-1.5 w-40 shrink-0">Default ticket type</p>
    <div class="flex flex-col gap-1 items-start">
      <Checkbox v-model="ticketTypes.primary" label="Primary" disabled />
      <Checkbox v-model="ticketTypes.promotions" label="Promotions" />
      <Checkbox v-model="ticketTypes.social" label="Social" />
      <Checkbox v-model="ticketTypes.updates" label="Updates" />
    </div>
  </div>
</template>