@nuxt/ui 3.0.0-alpha.8 → 3.0.0-beta.1

package/dist/runtime/components/Checkbox.vue

@@ -1,18 +1,23 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
-import type { CheckboxRootProps } from 'radix-vue'
+import type { VariantProps } from 'tailwind-variants'
+import type { CheckboxRootProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/checkbox'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 
-const appConfig = _appConfig as AppConfig & { ui: { checkbox: Partial<typeof theme> } }
+const appConfigCheckbox = _appConfig as AppConfig & { ui: { checkbox: Partial<typeof theme> } }
 
-const checkbox = tv({ extend: tv(theme), ...(appConfig.ui?.checkbox || {}) })
+const checkbox = tv({ extend: tv(theme), ...(appConfigCheckbox.ui?.checkbox || {}) })
 
 type CheckboxVariants = VariantProps<typeof checkbox>
 
-export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id'> {
+export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
   label?: string
   description?: string
   color?: CheckboxVariants['color']
@@ -22,66 +27,53 @@ export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'req
    * @defaultValue appConfig.ui.icons.check
    */
   icon?: string
-  indeterminate?: boolean
   /**
    * The icon displayed when the checkbox is indeterminate.
    * @defaultValue appConfig.ui.icons.minus
    */
   indeterminateIcon?: string
-  /** The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state. */
-  defaultValue?: boolean
   class?: any
   ui?: Partial<typeof checkbox.slots>
 }
 
-export interface CheckboxEmits {
-  (e: 'update:modelValue', payload: boolean): void
-  (e: 'change', payload: Event): void
+export type CheckboxEmits = {
+  change: [payload: Event]
 }
 
 export interface CheckboxSlots {
   label(props: { label?: string }): any
   description(props: { description?: string }): any
 }
-
-extendDevtoolsMeta({ defaultProps: { label: 'Check me!' } })
 </script>
 
 <script setup lang="ts">
 import { computed, useId } from 'vue'
-import { CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from 'radix-vue'
+import { Primitive, CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useFormField } from '../composables/useFormField'
 import UIcon from './Icon.vue'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps<CheckboxProps>()
 const slots = defineSlots<CheckboxSlots>()
 const emits = defineEmits<CheckboxEmits>()
 
-const modelValue = defineModel<boolean | undefined>({ default: undefined })
+const modelValue = defineModel<boolean | 'indeterminate'>({ default: undefined })
 
-const rootProps = useForwardProps(reactivePick(props, 'required', 'value'))
+const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
 
 const appConfig = useAppConfig()
-const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled } = useFormField<CheckboxProps>(props)
+const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField<CheckboxProps>(props)
 const id = _id.value ?? useId()
 
-const checked = computed({
-  get() {
-    return props.indeterminate ? 'indeterminate' : modelValue.value
-  },
-  set(value) {
-    modelValue.value = value === 'indeterminate' ? undefined : value
-  }
-})
-
 const ui = computed(() => checkbox({
   size: size.value,
   color: color.value,
   required: props.required,
   disabled: disabled.value,
-  checked: (modelValue.value ?? props.defaultValue) || props.indeterminate
+  checked: Boolean(modelValue.value ?? props.defaultValue)
 }))
 
 function onUpdate(value: any) {
@@ -93,23 +85,25 @@ function onUpdate(value: any) {
 }
 </script>
 
+<!-- eslint-disable vue/no-template-shadow -->
 <template>
-  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <div :class="ui.container({ class: props.ui?.container })">
       <CheckboxRoot
         :id="id"
-        v-model:checked="checked"
-        :default-checked="defaultValue"
-        v-bind="rootProps"
+        v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+        v-model="modelValue"
         :name="name"
         :disabled="disabled"
         :class="ui.base({ class: props.ui?.base })"
-        @update:checked="onUpdate"
+        @update:model-value="onUpdate"
       >
-        <CheckboxIndicator as-child>
-          <UIcon v-if="indeterminate" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon({ class: props.ui?.icon })" />
-          <UIcon v-else :name="icon || appConfig.ui.icons.check" :class="ui.icon({ class: props.ui?.icon })" />
-        </CheckboxIndicator>
+        <template #default="{ modelValue }">
+          <CheckboxIndicator as-child>
+            <UIcon v-if="modelValue === 'indeterminate'" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon({ class: props.ui?.icon })" />
+            <UIcon v-else :name="icon || appConfig.ui.icons.check" :class="ui.icon({ class: props.ui?.icon })" />
+          </CheckboxIndicator>
+        </template>
       </CheckboxRoot>
     </div>
 
@@ -125,5 +119,5 @@ function onUpdate(value: any) {
         </slot>
       </p>
     </div>
-  </div>
+  </Primitive>
 </template>

package/dist/runtime/components/Chip.vue

@@ -1,13 +1,13 @@
 <script lang="ts">
-import { tv, type VariantProps } from 'tailwind-variants'
+import type { VariantProps } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/chip'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 
-const appConfig = _appConfig as AppConfig & { ui: { chip: Partial<typeof theme> } }
+const appConfigChip = _appConfig as AppConfig & { ui: { chip: Partial<typeof theme> } }
 
-const chip = tv({ extend: tv(theme), ...(appConfig.ui?.chip || {}) })
+const chip = tv({ extend: tv(theme), ...(appConfigChip.ui?.chip || {}) })
 
 type ChipVariants = VariantProps<typeof chip>
 
@@ -22,7 +22,7 @@ export interface ChipProps {
   color?: ChipVariants['color']
   size?: ChipVariants['size']
   position?: ChipVariants['position']
-  /** When `true`, translate the chip at the edge for non rounded elements. */
+  /** When `true`, keep the chip inside the component for rounded elements. */
   inset?: boolean
   /** When `true`, render the chip relatively to the parent. */
   standalone?: boolean
@@ -38,13 +38,11 @@ export interface ChipSlots {
   default(props?: {}): any
   content(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'ChipExample' })
 </script>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Primitive, Slot } from 'radix-vue'
+import { Primitive, Slot } from 'reka-ui'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
 
 defineOptions({ inheritAttrs: false })

package/dist/runtime/components/Collapsible.vue

@@ -1,16 +1,15 @@
 <script lang="ts">
-import { tv } from 'tailwind-variants'
-import type { CollapsibleRootProps, CollapsibleRootEmits } from 'radix-vue'
+import type { CollapsibleRootProps, CollapsibleRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/collapsible'
-import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
+import { tv } from '../utils/tv'
 
-const appConfig = _appConfig as AppConfig & { ui: { collapsible: Partial<typeof theme> } }
+const appConfigCollapsible = _appConfig as AppConfig & { ui: { collapsible: Partial<typeof theme> } }
 
-const collapsible = tv({ extend: tv(theme), ...(appConfig.ui?.collapsible || {}) })
+const collapsible = tv({ extend: tv(theme), ...(appConfigCollapsible.ui?.collapsible || {}) })
 
-export interface CollapsibleProps extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled'> {
+export interface CollapsibleProps extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -26,19 +25,19 @@ export interface CollapsibleSlots {
   default(props: { open: boolean }): any
   content(props?: {}): any
 }
-
-extendDevtoolsMeta({ example: 'CollapsibleExample' })
 </script>
 
 <script setup lang="ts">
-import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from 'radix-vue'
+import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 
-const props = defineProps<CollapsibleProps>()
+const props = withDefaults(defineProps<CollapsibleProps>(), {
+  unmountOnHide: true
+})
 const emits = defineEmits<CollapsibleEmits>()
 const slots = defineSlots<CollapsibleSlots>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled', 'unmountOnHide'), emits)
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = collapsible()

package/dist/runtime/components/ColorPicker.vue

@@ -0,0 +1,297 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/color-picker'
+import { tv } from '../utils/tv'
+import type { HSLObject } from 'colortranslator'
+
+const appConfigColorPicker = _appConfig as AppConfig & { ui: { colorPicker: Partial<typeof theme> } }
+
+const colorPicker = tv({ extend: tv(theme), ...(appConfigColorPicker.ui?.colorPicker || {}) })
+
+type ColorPickerVariants = VariantProps<typeof colorPicker>
+
+type HSVColor = {
+  h: number
+  s: number
+  v: number
+}
+
+function HSLtoHSV(hsl: HSLObject): HSVColor {
+  const x = hsl.S * (hsl.L < 50 ? hsl.L : 100 - hsl.L)
+  const v = hsl.L + (x / 100)
+
+  return {
+    h: hsl.H,
+    s: hsl.L === 0 ? hsl.S : 2 * x / v,
+    v
+  }
+}
+
+function HSVtoHSL(hsv: HSVColor): HSLObject {
+  const x = (200 - hsv.s) * hsv.v / 100
+
+  return {
+    H: hsv.h,
+    S: x === 0 || x === 200 ? 0 : Math.round(hsv.s * hsv.v / (x <= 100 ? x : 200 - x)),
+    L: Math.round(x / 2)
+  }
+}
+
+export type ColorPickerProps = {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  /**
+   * Throttle time in ms for the color picker
+   */
+  throttle?: number
+  /**
+   * Disable the color picker
+   */
+  disabled?: boolean
+  /**
+   * The default value of the color picker
+   */
+  defaultValue?: string
+  /**
+   * Format of the color
+   * @defaultValue 'hex'
+   */
+  format?: 'hex' | 'rgb' | 'hsl' | 'cmyk' | 'lab'
+  size?: ColorPickerVariants['size']
+  class?: any
+  ui?: Partial<typeof colorPicker.slots>
+}
+</script>
+
+<script setup lang="ts">
+import { ref, nextTick, computed, toValue } from 'vue'
+import { Primitive } from 'reka-ui'
+import { useEventListener, useElementBounding, watchThrottled, watchPausable } from '@vueuse/core'
+import { isClient } from '@vueuse/shared'
+import { ColorTranslator } from 'colortranslator'
+
+const props = withDefaults(defineProps<ColorPickerProps>(), {
+  format: 'hex',
+  throttle: 50,
+  defaultValue: '#FFFFFF'
+})
+const modelValue = defineModel<string>(undefined)
+
+const pickedColor = computed<HSVColor>({
+  get() {
+    try {
+      const color = new ColorTranslator(modelValue.value || props.defaultValue)
+
+      return HSLtoHSV(color.HSLObject)
+    } catch (_) {
+      return { h: 0, s: 0, v: 100 }
+    }
+  },
+  set(value) {
+    const color = new ColorTranslator(HSVtoHSL(value), {
+      decimals: 2,
+      labUnit: 'percent',
+      cmykUnit: 'percent',
+      cmykFunction: 'cmyk'
+    })
+
+    switch (props.format) {
+      case 'rgb':
+        modelValue.value = color.RGB
+        break
+      case 'hsl':
+        modelValue.value = color.HSL
+        break
+      case 'cmyk':
+        modelValue.value = color.CMYK
+        break
+      case 'lab':
+        modelValue.value = color.CIELab
+        break
+      case 'hex':
+      default:
+        modelValue.value = color.HEX
+    }
+  }
+})
+
+function useColorDraggable(targetElement: MaybeRefOrGetter<HTMLElement | null>,
+  containerElement: MaybeRefOrGetter<HTMLElement | null>,
+  axis: 'x' | 'y' | 'both' = 'both',
+  initialPosition = { x: 0, y: 0 },
+  disabled?: MaybeRefOrGetter<boolean | undefined>
+) {
+  const position = ref<{ x: number, y: number }>(initialPosition)
+  const pressedDelta = ref<{ x: number, y: number }>()
+  const targetRect = useElementBounding(targetElement)
+  const containerRect = useElementBounding(containerElement)
+
+  function start(event: PointerEvent) {
+    if (toValue(disabled)) return event.preventDefault()
+
+    const container = toValue(containerElement)
+
+    pressedDelta.value = {
+      x: event.clientX - (container ? event.clientX - containerRect.left.value + container.scrollLeft : targetRect.left.value),
+      y: event.clientY - (container ? event.clientY - containerRect.top.value + container.scrollTop : targetRect.top.value)
+    }
+
+    move(event)
+  }
+
+  function move(event: PointerEvent) {
+    if (!pressedDelta.value) return
+
+    const container = toValue(containerElement)
+    let { x, y } = position.value
+
+    if (container && (axis === 'x' || axis === 'both')) {
+      x = Math.min(Math.max(0, (event.clientX - pressedDelta.value.x) / container.scrollWidth * 100), 100)
+    }
+
+    if (container && (axis === 'y' || axis === 'both')) {
+      y = Math.min(Math.max(0, (event.clientY - pressedDelta.value.y) / container.scrollHeight * 100), 100)
+    }
+
+    position.value = { x, y }
+  }
+
+  function end() {
+    if (!pressedDelta.value) {
+      return
+    }
+
+    pressedDelta.value = undefined
+  }
+
+  if (isClient) {
+    useEventListener(containerElement, 'pointerdown', start)
+    useEventListener(window, 'pointermove', move)
+    useEventListener(window, 'pointerup', end)
+  }
+
+  return {
+    position
+  }
+}
+
+function normalizeHue(hue: number, dir: 'left' | 'right' = 'left'): number {
+  if (dir === 'right') {
+    return (hue * 100) / 360
+  }
+
+  return (hue / 100) * 360
+}
+
+function normalizeBrightness(brightness: number): number {
+  return 100 - brightness
+}
+
+const selectorRef = ref<HTMLDivElement | null>(null)
+const selectorThumbRef = ref<HTMLDivElement | null>(null)
+const trackRef = ref<HTMLDivElement | null>(null)
+const trackThumbRef = ref<HTMLDivElement | null>(null)
+
+const disabled = computed(() => props.disabled)
+
+const { position: selectorThumbPosition } = useColorDraggable(selectorThumbRef, selectorRef, 'both', {
+  x: pickedColor.value.s,
+  y: normalizeBrightness(pickedColor.value.v)
+}, disabled)
+
+const { position: trackThumbPosition } = useColorDraggable(trackThumbRef, trackRef, 'y', {
+  x: 0,
+  y: normalizeHue(pickedColor.value.h, 'right')
+}, disabled)
+
+const { pause: pauseWatchColor, resume: resumeWatchColor } = watchPausable(pickedColor, (hsb) => {
+  selectorThumbPosition.value = {
+    x: hsb.s,
+    y: normalizeBrightness(hsb.v)
+  }
+  trackThumbPosition.value = {
+    x: 0,
+    y: normalizeHue(hsb.h, 'right')
+  }
+})
+
+watchThrottled([selectorThumbPosition, trackThumbPosition], () => {
+  pauseWatchColor()
+
+  pickedColor.value = {
+    h: normalizeHue(trackThumbPosition.value.y),
+    s: selectorThumbPosition.value.x,
+    v: normalizeBrightness(selectorThumbPosition.value.y)
+  }
+
+  nextTick(resumeWatchColor)
+}, { throttle: () => props.throttle })
+
+const trackThumbColor = computed(() => new ColorTranslator(HSVtoHSL({
+  h: normalizeHue(trackThumbPosition.value.y),
+  s: 100,
+  v: 100
+})).HEX)
+
+const selectorStyle = computed(() => ({
+  backgroundColor: trackThumbColor.value
+}))
+
+const selectorThumbStyle = computed(() => ({
+  backgroundColor: new ColorTranslator(modelValue.value || props.defaultValue).HEX,
+  left: `${selectorThumbPosition.value.x}%`,
+  top: `${selectorThumbPosition.value.y}%`
+}))
+
+const trackThumbStyle = computed(() => ({
+  backgroundColor: trackThumbColor.value,
+  top: `${trackThumbPosition.value.y}%`
+}))
+
+const ui = computed(() => colorPicker({
+  size: props.size
+}))
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })" :data-disabled="disabled ? true : undefined">
+    <div :class="ui.picker({ class: props.ui?.picker })">
+      <div
+        ref="selectorRef"
+        :class="ui.selector({ class: props.ui?.selector })"
+        :style="selectorStyle"
+      >
+        <div :class="ui.selectorBackground({ class: props.ui?.selectorBackground })" data-color-picker-background>
+          <div
+            ref="selectorThumbRef"
+            :class="ui.selectorThumb({ class: props.ui?.selectorThumb })"
+            :style="selectorThumbStyle"
+            :data-disabled="disabled ? true : undefined"
+          />
+        </div>
+      </div>
+      <div
+        ref="trackRef"
+        :class="ui.track({ class: props.ui?.track })"
+        data-color-picker-track
+      >
+        <div
+          ref="trackThumbRef"
+          :class="ui.trackThumb({ class: props.ui?.trackThumb })"
+          :style="trackThumbStyle"
+          :data-disabled="disabled ? true : undefined"
+        />
+      </div>
+    </div>
+  </Primitive>
+</template>
+
+<style scoped>
+[data-color-picker-background]{background-image:linear-gradient(0deg,#000 0,transparent),linear-gradient(90deg,#fff 0,hsla(0,0%,100%,0))}[data-color-picker-track]{background-image:linear-gradient(0deg,red,#f0f 17%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red)}
+</style>