adata-ui 2.1.41-beta.2 → 2.1.41-beta.21

package/components/forms/checkbox/ACheckboxV2.vue

@@ -1,229 +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-body-sm'
-    case 'lg': return 'text-body-lg'
-    default: return 'text-body-md'
-  }
-})
-
-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-sm border transition-colors duration-150',
-    squareSizeClass.value,
-  ]
-
-  if (isActive.value) {
-    base.push('border-transparent bg-action-primary text-action-primary-fg')
-  }
-  else {
-    base.push('border-strong bg-main text-transparent')
-    if (!props.disabled) {
-      base.push('group-hover/cb:border-brand')
-    }
-  }
-
-  return base.join(' ')
-})
-
-const chipClass = computed(() => {
-  const base = [
-    'inline-flex items-center rounded-full border px-3 py-1 text-body-sm transition-colors duration-150',
-  ]
-
-  if (isActive.value) {
-    base.push('border-transparent bg-action-primary text-action-primary-fg')
-  }
-  else {
-    base.push('border-strong bg-transparent text-quaternary')
-    if (!props.disabled) {
-      base.push('group-hover/cb:border-strong')
-    }
-  }
-
-  return base.join(' ')
-})
-
-const labelClass = computed(() => `${textClass.value} leading-none text-primary`)
-
-const rootClass = computed(() => {
-  const base = [
-    'checkbox-v2 group/cb inline-flex items-center select-none rounded transition focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2',
-  ]
-
-  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>
+<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-body-sm'
+    case 'lg': return 'text-body-lg'
+    default: return 'text-body-md'
+  }
+})
+
+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-sm border transition-colors duration-150',
+    squareSizeClass.value,
+  ]
+
+  if (isActive.value) {
+    base.push('border-transparent bg-action-primary text-action-primary-fg')
+  }
+  else {
+    base.push('border-strong bg-main text-transparent')
+    if (!props.disabled) {
+      base.push('group-hover/cb:border-brand')
+    }
+  }
+
+  return base.join(' ')
+})
+
+const chipClass = computed(() => {
+  const base = [
+    'inline-flex items-center rounded-full border px-3 py-1 text-body-sm transition-colors duration-150',
+  ]
+
+  if (isActive.value) {
+    base.push('border-transparent bg-action-primary text-action-primary-fg')
+  }
+  else {
+    base.push('border-strong bg-transparent text-quaternary')
+    if (!props.disabled) {
+      base.push('group-hover/cb:border-strong')
+    }
+  }
+
+  return base.join(' ')
+})
+
+const labelClass = computed(() => `${textClass.value} leading-none text-primary`)
+
+const rootClass = computed(() => {
+  const base = [
+    'checkbox-v2 group/cb inline-flex items-center select-none rounded transition focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2',
+  ]
+
+  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>