@nuxt/ui 3.0.1 → 3.1.0

package/dist/runtime/components/Collapsible.vue

@@ -1,46 +1,27 @@
-<script lang="ts">
-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 { tv } from '../utils/tv'
-
-const appConfigCollapsible = _appConfig as AppConfig & { ui: { collapsible: Partial<typeof theme> } }
-
-const collapsible = tv({ extend: tv(theme), ...(appConfigCollapsible.ui?.collapsible || {}) })
-
-export interface CollapsibleProps extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
-  /**
-   * The element or component this component should render as.
-   * @defaultValue 'div'
-   */
-  as?: any
-  class?: any
-  ui?: Partial<typeof collapsible.slots>
-}
-
-export interface CollapsibleEmits extends CollapsibleRootEmits {}
-
-export interface CollapsibleSlots {
-  default(props: { open: boolean }): any
-  content(props?: {}): any
-}
+<script>
+import theme from "#build/ui/collapsible";
 </script>
 
-<script setup lang="ts">
-import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
-
-const props = withDefaults(defineProps<CollapsibleProps>(), {
-  unmountOnHide: true
-})
-const emits = defineEmits<CollapsibleEmits>()
-const slots = defineSlots<CollapsibleSlots>()
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled', 'unmountOnHide'), emits)
-
-// eslint-disable-next-line vue/no-dupe-keys
-const ui = collapsible()
+<script setup>
+import { computed } from "vue";
+import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  open: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  unmountOnHide: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["update:open"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultOpen", "open", "disabled", "unmountOnHide"), emits);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.collapsible || {} })());
 </script>
 
 <template>

package/dist/runtime/components/Collapsible.vue.d.ts

@@ -0,0 +1,50 @@
+import type { CollapsibleRootProps, CollapsibleRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/collapsible';
+import type { ComponentConfig } from '../types/utils';
+type Collapsible = ComponentConfig<typeof theme, AppConfig, 'collapsible'>;
+export interface CollapsibleProps extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    ui?: Collapsible['slots'];
+}
+export interface CollapsibleEmits extends CollapsibleRootEmits {
+}
+export interface CollapsibleSlots {
+    default(props: {
+        open: boolean;
+    }): any;
+    content(props?: {}): any;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<CollapsibleProps>, {
+    unmountOnHide: boolean;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    unmountOnHide: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<CollapsibleSlots> & CollapsibleSlots>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/ColorPicker.vue

@@ -1,271 +1,185 @@
-<!-- eslint-disable vue/block-tag-newline -->
-<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)
-
+<script>
+import theme from "#build/ui/color-picker";
+function HSLtoHSV(hsl) {
+  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
-
+function HSVtoHSL(hsv) {
+  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'
-  /**
-   * @defaultValue 'md'
-   */
-  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>({
+<script setup>
+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";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  throttle: { type: Number, required: false, default: 50 },
+  disabled: { type: Boolean, required: false },
+  defaultValue: { type: String, required: false, default: "#FFFFFF" },
+  format: { type: String, required: false, default: "hex" },
+  size: { type: null, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const modelValue = defineModel({ type: String, ...void 0 });
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.colorPicker || {} })({
+  size: props.size
+}));
+const pickedColor = computed({
   get() {
     try {
-      const color = new ColorTranslator(modelValue.value || props.defaultValue)
-
-      return HSLtoHSV(color.HSLObject)
+      const color = new ColorTranslator(modelValue.value || props.defaultValue);
+      return HSLtoHSV(color.HSLObject);
     } catch (_) {
-      return { h: 0, s: 0, v: 100 }
+      return { h: 0, s: 0, v: 100 };
     }
   },
   set(value) {
     const color = new ColorTranslator(HSVtoHSL(value), {
       decimals: 2,
-      labUnit: 'percent',
-      cmykUnit: 'percent',
-      cmykFunction: 'cmyk'
-    })
-
+      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':
+      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
+        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)
-
+});
+function useColorDraggable(targetElement, containerElement, axis = "both", initialPosition = { x: 0, y: 0 }, disabled2) {
+  const position = ref(initialPosition);
+  const pressedDelta = ref();
+  const targetRect = useElementBounding(targetElement);
+  const containerRect = useElementBounding(containerElement);
+  function start(event) {
+    if (toValue(disabled2)) 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)
+    };
+    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)
+  function move(event) {
+    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)
+    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 }
+    position.value = { x, y };
   }
-
   function end() {
     if (!pressedDelta.value) {
-      return
+      return;
     }
-
-    pressedDelta.value = undefined
+    pressedDelta.value = void 0;
   }
-
   if (isClient) {
-    useEventListener(containerElement, 'pointerdown', start)
-    useEventListener(window, 'pointermove', move)
-    useEventListener(window, 'pointerup', end)
+    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
+function normalizeHue(hue, dir = "left") {
+  if (dir === "right") {
+    return hue * 100 / 360;
   }
-
-  return (hue / 100) * 360
+  return hue / 100 * 360;
 }
-
-function normalizeBrightness(brightness: number): number {
-  return 100 - brightness
+function normalizeBrightness(brightness) {
+  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', {
+const selectorRef = ref(null);
+const selectorThumbRef = ref(null);
+const trackRef = ref(null);
+const trackThumbRef = ref(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', {
+}, disabled);
+const { position: trackThumbPosition } = useColorDraggable(trackThumbRef, trackRef, "y", {
   x: 0,
-  y: normalizeHue(pickedColor.value.h, 'right')
-}, disabled)
-
+  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')
-  }
-})
-
+    y: normalizeHue(hsb.h, "right")
+  };
+});
 watchThrottled([selectorThumbPosition, trackThumbPosition], () => {
-  pauseWatchColor()
-
+  pauseWatchColor();
   pickedColor.value = {
     h: normalizeHue(trackThumbPosition.value.y),
     s: selectorThumbPosition.value.x,
     v: normalizeBrightness(selectorThumbPosition.value.y)
-  }
-
-  nextTick(resumeWatchColor)
-}, { throttle: () => props.throttle })
-
+  };
+  nextTick(resumeWatchColor);
+}, { throttle: () => props.throttle });
 const trackThumbColor = computed(() => new ColorTranslator(HSVtoHSL({
   h: normalizeHue(trackThumbPosition.value.y),
   s: 100,
   v: 100
-})).HEX)
-
+})).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">
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })" :data-disabled="disabled ? true : void 0">
     <div :class="ui.picker({ class: props.ui?.picker })">
       <div
         ref="selectorRef"
@@ -277,7 +191,7 @@ const ui = computed(() => colorPicker({
             ref="selectorThumbRef"
             :class="ui.selectorThumb({ class: props.ui?.selectorThumb })"
             :style="selectorThumbStyle"
-            :data-disabled="disabled ? true : undefined"
+            :data-disabled="disabled ? true : void 0"
           />
         </div>
       </div>
@@ -290,7 +204,7 @@ const ui = computed(() => colorPicker({
           ref="trackThumbRef"
           :class="ui.trackThumb({ class: props.ui?.trackThumb })"
           :style="trackThumbStyle"
-          :data-disabled="disabled ? true : undefined"
+          :data-disabled="disabled ? true : void 0"
         />
       </div>
     </div>

package/dist/runtime/components/ColorPicker.vue.d.ts

@@ -0,0 +1,63 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/color-picker';
+import type { ComponentConfig } from '../types/utils';
+type ColorPicker = ComponentConfig<typeof theme, AppConfig, 'colorPicker'>;
+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';
+    /**
+     * @defaultValue 'md'
+     */
+    size?: ColorPicker['variants']['size'];
+    class?: any;
+    ui?: ColorPicker['slots'];
+};
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    modelValue?: string;
+} & ColorPickerProps>, {
+    format: string;
+    throttle: number;
+    defaultValue: string;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    format: "hex" | "rgb" | "hsl" | "cmyk" | "lab";
+    defaultValue: string;
+    throttle: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};