adata-ui 2.1.40-beta → 2.1.40-beta.2

package/components/forms/checkbox/ACheckboxV2.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+type Size = 'sm' | 'md' | 'lg'
+type Side = 'left' | 'right'
+type View = 'checkbox' | 'chip'
+
+const props = withDefaults(defineProps<{
+  value?: string | number | boolean | Record<string, unknown> | null
+  view?: View
+  size?: Size
+  side?: Side
+  intermediate?: boolean
+  disabled?: boolean
+  name?: string
+  label?: string
+}>(), {
+  value: null,
+  view: 'checkbox',
+  size: 'md',
+  side: 'right',
+  intermediate: false,
+  disabled: false,
+})
+
+const modelValue = defineModel<boolean | unknown[]>({ required: true })
+
+const slots = useSlots()
+
+const isChecked = computed(() => {
+  const v = modelValue.value
+  if (Array.isArray(v)) return v.includes(props.value as never)
+  return v === true
+})
+
+const ariaChecked = computed<'true' | 'false' | 'mixed'>(() => {
+  if (props.intermediate) return 'mixed'
+  return isChecked.value ? 'true' : 'false'
+})
+
+const hasLabel = computed(() => Boolean(props.label) || Boolean(slots.default?.().length))
+
+function toggle() {
+  if (props.disabled) return
+
+  const current = modelValue.value
+  if (Array.isArray(current)) {
+    const next = [...current]
+    const idx = next.indexOf(props.value as never)
+    if (idx === -1) next.push(props.value as never)
+    else next.splice(idx, 1)
+    modelValue.value = next
+  }
+  else {
+    modelValue.value = !current
+  }
+}
+
+const gapClass = computed(() => {
+  switch (props.size) {
+    case 'sm': return 'gap-1.5'
+    case 'lg': return 'gap-2.5'
+    default: return 'gap-2'
+  }
+})
+
+const textClass = computed(() => {
+  switch (props.size) {
+    case 'sm': return 'text-xs'
+    case 'lg': return 'text-base'
+    default: return 'text-sm'
+  }
+})
+
+const squareSizeClass = computed(() => {
+  switch (props.size) {
+    case 'sm': return 'size-4'
+    case 'lg': return 'size-6'
+    default: return 'size-[18px]'
+  }
+})
+
+const isActive = computed(() => isChecked.value || props.intermediate)
+
+const squareClass = computed(() => {
+  const base = [
+    'checkbox-square inline-flex shrink-0 items-center justify-center rounded-md border transition-colors duration-150',
+    squareSizeClass.value,
+  ]
+
+  if (isActive.value) {
+    base.push('border-transparent bg-blue-700 text-white dark:bg-blue-500')
+  }
+  else {
+    base.push('border-gray-300 bg-white text-transparent dark:border-gray-600 dark:bg-white/[0.04]')
+    if (!props.disabled) {
+      base.push('group-hover/cb:border-blue-500 dark:group-hover/cb:border-blue-400')
+    }
+  }
+
+  return base.join(' ')
+})
+
+const chipClass = computed(() => {
+  const base = [
+    'inline-flex items-center rounded-full border px-3 py-1 text-xs transition-colors duration-150',
+  ]
+
+  if (isActive.value) {
+    base.push('border-transparent bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900')
+  }
+  else {
+    base.push('border-gray-300 bg-transparent text-gray-700 dark:border-gray-600 dark:text-gray-300')
+    if (!props.disabled) {
+      base.push('group-hover/cb:border-gray-400 dark:group-hover/cb:border-gray-500')
+    }
+  }
+
+  return base.join(' ')
+})
+
+const labelClass = computed(() => `${textClass.value} leading-none text-deepblue-900 dark:text-gray-200`)
+
+const rootClass = computed(() => {
+  const base = [
+    'checkbox-v2 group/cb inline-flex items-center select-none rounded transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900',
+  ]
+
+  if (props.view === 'checkbox') {
+    base.push(gapClass.value)
+  }
+
+  if (props.disabled) {
+    base.push('cursor-not-allowed opacity-50')
+  }
+  else {
+    base.push('cursor-pointer')
+  }
+
+  return base.join(' ')
+})
+</script>
+
+<template>
+  <button
+    type="button"
+    role="checkbox"
+    :aria-checked="ariaChecked"
+    :aria-disabled="disabled || undefined"
+    :disabled="disabled"
+    :name="name"
+    :class="rootClass"
+    @click="toggle"
+    @keydown.space.prevent="toggle"
+  >
+    <template v-if="view === 'checkbox'">
+      <span v-if="side === 'left' && hasLabel" :class="labelClass">
+        <slot>{{ label }}</slot>
+      </span>
+
+      <span :class="squareClass">
+        <svg
+          v-if="intermediate"
+          class="checkbox-intermediate size-3/4"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <line x1="3" y1="8" x2="13" y2="8" stroke-width="2" stroke-linecap="round" />
+        </svg>
+        <svg
+          v-else-if="isChecked"
+          class="checkbox-check size-3/4"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            d="M3 8.5 L6.5 12 L13 4.5"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </span>
+
+      <span v-if="side === 'right' && hasLabel" :class="labelClass">
+        <slot>{{ label }}</slot>
+      </span>
+    </template>
+
+    <span v-else :class="chipClass">
+      <slot>{{ label }}</slot>
+    </span>
+  </button>
+</template>
+
+<style scoped lang="scss">
+.checkbox-check path {
+  stroke-dasharray: 22;
+  stroke-dashoffset: 22;
+  animation: check-draw 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+.checkbox-intermediate line {
+  stroke-dasharray: 14;
+  stroke-dashoffset: 14;
+  animation: check-draw 160ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
+@keyframes check-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .checkbox-check path,
+  .checkbox-intermediate line {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+
+  .checkbox-v2,
+  .checkbox-square {
+    transition: none;
+  }
+}
+</style>