@nuxt/ui 2.18.3 → 3.0.0-alpha.0

package/dist/runtime/components/overlays/Popover.vue.d.ts

@@ -1,220 +0,0 @@
-import type { PropType } from 'vue';
-import type { PopperOptions, Strategy } from '../../types.js';
-declare const config: {
-    wrapper: string;
-    container: string;
-    trigger: string;
-    width: string;
-    background: string;
-    shadow: string;
-    rounded: string;
-    ring: string;
-    base: string;
-    transition: {
-        enterActiveClass: string;
-        enterFromClass: string;
-        enterToClass: string;
-        leaveActiveClass: string;
-        leaveFromClass: string;
-        leaveToClass: string;
-    };
-    overlay: {
-        base: string;
-        background: string;
-        transition: {
-            enterActiveClass: string;
-            enterFromClass: string;
-            enterToClass: string;
-            leaveActiveClass: string;
-            leaveFromClass: string;
-            leaveToClass: string;
-        };
-    };
-    popper: {
-        strategy: string;
-    };
-    default: {
-        openDelay: number;
-        closeDelay: number;
-    };
-    arrow: {
-        base: string;
-        ring: string;
-        rounded: string;
-        background: string;
-        shadow: string;
-        placement: string;
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    mode: {
-        type: PropType<"click" | "hover">;
-        default: string;
-        validator: (value: string) => boolean;
-    };
-    open: {
-        type: BooleanConstructor;
-        default: any;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    openDelay: {
-        type: NumberConstructor;
-        default: () => number;
-    };
-    closeDelay: {
-        type: NumberConstructor;
-        default: () => number;
-    };
-    overlay: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    popper: {
-        type: PropType<PopperOptions>;
-        default: () => {};
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        wrapper: string;
-        container: string;
-        trigger: string;
-        width: string;
-        background: string;
-        shadow: string;
-        rounded: string;
-        ring: string;
-        base: string;
-        transition: {
-            enterActiveClass: string;
-            enterFromClass: string;
-            enterToClass: string;
-            leaveActiveClass: string;
-            leaveFromClass: string;
-            leaveToClass: string;
-        };
-        overlay: {
-            base: string;
-            background: string;
-            transition: {
-                enterActiveClass: string;
-                enterFromClass: string;
-                enterToClass: string;
-                leaveActiveClass: string;
-                leaveFromClass: string;
-                leaveToClass: string;
-            };
-        };
-        popper: {
-            strategy: string;
-        };
-        default: {
-            openDelay: number;
-            closeDelay: number;
-        };
-        arrow: {
-            base: string;
-            ring: string;
-            rounded: string;
-            background: string;
-            shadow: string;
-            placement: string;
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    popover: import("vue").Ref<any>;
-    popper: import("vue").ComputedRef<PopperOptions>;
-    trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
-    container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
-    containerStyle: import("vue").ComputedRef<{
-        paddingTop?: undefined;
-        paddingBottom?: undefined;
-        paddingLeft?: undefined;
-        paddingRight?: undefined;
-    } | {
-        paddingTop: string;
-        paddingBottom: string;
-        paddingLeft?: undefined;
-        paddingRight?: undefined;
-    } | {
-        paddingLeft: string;
-        paddingRight: string;
-        paddingTop?: undefined;
-        paddingBottom?: undefined;
-    } | {
-        paddingTop: string;
-        paddingBottom: string;
-        paddingLeft: string;
-        paddingRight: string;
-    }>;
-    onTouchStart: (event: TouchEvent) => void;
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:open"[], "update:open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    mode: {
-        type: PropType<"click" | "hover">;
-        default: string;
-        validator: (value: string) => boolean;
-    };
-    open: {
-        type: BooleanConstructor;
-        default: any;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    openDelay: {
-        type: NumberConstructor;
-        default: () => number;
-    };
-    closeDelay: {
-        type: NumberConstructor;
-        default: () => number;
-    };
-    overlay: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    popper: {
-        type: PropType<PopperOptions>;
-        default: () => {};
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>> & {
-    "onUpdate:open"?: (...args: any[]) => any;
-}, {
-    mode: "click" | "hover";
-    class: any;
-    popper: PopperOptions;
-    disabled: boolean;
-    ui: {};
-    overlay: boolean;
-    open: boolean;
-    openDelay: number;
-    closeDelay: number;
-}, {}>;
-export default _default;

package/dist/runtime/components/overlays/Slideover.vue

@@ -1,152 +0,0 @@
-<template>
-  <TransitionRoot as="template" :appear="appear" :show="isOpen" @after-leave="onAfterLeave">
-    <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }, { 'items-end': side === 'bottom' }]" v-bind="attrs" @close="close">
-      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
-        <div :class="[ui.overlay.base, ui.overlay.background]" />
-      </TransitionChild>
-
-      <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
-        <HDialogPanel :class="[ui.base, sideType === 'horizontal' ? [ui.width, 'h-full'] : [ui.height, 'w-full'], ui.background, ui.ring, ui.padding]">
-          <slot />
-        </HDialogPanel>
-      </TransitionChild>
-    </HDialog>
-  </TransitionRoot>
-</template>
-
-<script>
-import { computed, toRef, defineComponent } from "vue";
-import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild, provideUseId } from "@headlessui/vue";
-import { useUI } from "../../composables/useUI";
-import { mergeConfig } from "../../utils";
-import appConfig from "#build/app.config";
-import { slideover } from "#ui/ui.config";
-import { useId } from "#imports";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.slideover, slideover);
-export default defineComponent({
-  components: {
-    HDialog,
-    HDialogPanel,
-    TransitionRoot,
-    TransitionChild
-  },
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false
-    },
-    appear: {
-      type: Boolean,
-      default: false
-    },
-    side: {
-      type: String,
-      default: "right",
-      validator: (value) => ["left", "right", "top", "bottom"].includes(value)
-    },
-    overlay: {
-      type: Boolean,
-      default: true
-    },
-    transition: {
-      type: Boolean,
-      default: true
-    },
-    preventClose: {
-      type: Boolean,
-      default: false
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ["update:modelValue", "close", "close-prevented", "after-leave"],
-  setup(props, { emit }) {
-    const { ui, attrs } = useUI("slideover", toRef(props, "ui"), config, toRef(props, "class"));
-    const isOpen = computed({
-      get() {
-        return props.modelValue;
-      },
-      set(value) {
-        emit("update:modelValue", value);
-      }
-    });
-    const transitionClass = computed(() => {
-      if (!props.transition) {
-        return {};
-      }
-      let enterFrom, leaveTo;
-      switch (props.side) {
-        case "left":
-          enterFrom = ui.value.translate.left;
-          leaveTo = ui.value.translate.left;
-          break;
-        case "right":
-          enterFrom = ui.value.translate.right;
-          leaveTo = ui.value.translate.right;
-          break;
-        case "top":
-          enterFrom = ui.value.translate.top;
-          leaveTo = ui.value.translate.top;
-          break;
-        case "bottom":
-          enterFrom = ui.value.translate.bottom;
-          leaveTo = ui.value.translate.bottom;
-          break;
-        default:
-          enterFrom = ui.value.translate.right;
-          leaveTo = ui.value.translate.right;
-      }
-      return {
-        ...ui.value.transition,
-        enterFrom,
-        enterTo: ui.value.translate.base,
-        leaveFrom: ui.value.translate.base,
-        leaveTo
-      };
-    });
-    const sideType = computed(() => {
-      switch (props.side) {
-        case "left":
-          return "horizontal";
-        case "right":
-          return "horizontal";
-        case "top":
-          return "vertical";
-        case "bottom":
-          return "vertical";
-        default:
-          return "right";
-      }
-    });
-    function close(value) {
-      if (props.preventClose) {
-        emit("close-prevented");
-        return;
-      }
-      isOpen.value = value;
-      emit("close");
-    }
-    const onAfterLeave = () => {
-      emit("after-leave");
-    };
-    provideUseId(() => useId());
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      isOpen,
-      transitionClass,
-      sideType,
-      onAfterLeave,
-      close
-    };
-  }
-});
-</script>

package/dist/runtime/components/overlays/Slideover.vue.d.ts

@@ -1,167 +0,0 @@
-import type { WritableComputedRef, PropType } from 'vue';
-import type { Strategy } from '../../types.js';
-declare const config: {
-    wrapper: string;
-    overlay: {
-        base: string;
-        background: string;
-        transition: {
-            enter: string;
-            enterFrom: string;
-            enterTo: string;
-            leave: string;
-            leaveFrom: string;
-            leaveTo: string;
-        };
-    };
-    base: string;
-    background: string;
-    ring: string;
-    rounded: string;
-    padding: string;
-    shadow: string;
-    width: string;
-    height: string;
-    translate: {
-        base: string;
-        left: string;
-        right: string;
-        top: string;
-        bottom: string;
-    };
-    transition: {
-        enter: string;
-        leave: string;
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    modelValue: {
-        type: PropType<boolean>;
-        default: boolean;
-    };
-    appear: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    side: {
-        type: PropType<"left" | "right" | "top" | "bottom">;
-        default: string;
-        validator: (value: string) => boolean;
-    };
-    overlay: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    transition: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    preventClose: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        wrapper: string;
-        overlay: {
-            base: string;
-            background: string;
-            transition: {
-                enter: string;
-                enterFrom: string;
-                enterTo: string;
-                leave: string;
-                leaveFrom: string;
-                leaveTo: string;
-            };
-        };
-        base: string;
-        background: string;
-        ring: string;
-        rounded: string;
-        padding: string;
-        shadow: string;
-        width: string;
-        height: string;
-        translate: {
-            base: string;
-            left: string;
-            right: string;
-            top: string;
-            bottom: string;
-        };
-        transition: {
-            enter: string;
-            leave: string;
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    isOpen: WritableComputedRef<boolean>;
-    transitionClass: import("vue").ComputedRef<{}>;
-    sideType: import("vue").ComputedRef<"right" | "horizontal" | "vertical">;
-    onAfterLeave: () => void;
-    close: (value: boolean) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue" | "close-prevented" | "after-leave")[], "close" | "update:modelValue" | "close-prevented" | "after-leave", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: PropType<boolean>;
-        default: boolean;
-    };
-    appear: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    side: {
-        type: PropType<"left" | "right" | "top" | "bottom">;
-        default: string;
-        validator: (value: string) => boolean;
-    };
-    overlay: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    transition: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    preventClose: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>> & {
-    onClose?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-    "onClose-prevented"?: (...args: any[]) => any;
-    "onAfter-leave"?: (...args: any[]) => any;
-}, {
-    class: any;
-    transition: boolean;
-    ui: {};
-    appear: boolean;
-    overlay: boolean;
-    preventClose: boolean;
-    side: "bottom" | "left" | "right" | "top";
-    modelValue: boolean;
-}, {}>;
-export default _default;

package/dist/runtime/components/overlays/Slideovers.client.vue

@@ -1,18 +0,0 @@
-<template>
-  <component
-    :is="slideoverState.component"
-    v-if="slideoverState"
-    v-bind="slideoverState.props"
-    v-model="isOpen"
-    @after-leave="reset"
-  />
-</template>
-
-<script lang="ts" setup>
-import { inject } from 'vue'
-import { useSlideover, slidOverInjectionKey } from '../../composables/useSlideover'
-
-const slideoverState = inject(slidOverInjectionKey)
-
-const { isOpen, reset } = useSlideover()
-</script>

package/dist/runtime/components/overlays/Tooltip.vue

@@ -1,127 +0,0 @@
-<template>
-  <div ref="trigger" :class="ui.wrapper" v-bind="attrs" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
-    <slot :open="open">
-      Hover
-    </slot>
-
-    <div v-if="open && !prevent" ref="container" :class="[ui.container, ui.width]">
-      <Transition appear v-bind="ui.transition">
-        <div>
-          <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
-
-          <div :class="[ui.base, ui.background, ui.color, ui.rounded, ui.shadow, ui.ring]">
-            <slot name="text">
-              {{ text }}
-            </slot>
-
-            <span v-if="shortcuts?.length" :class="ui.shortcuts">
-              <span :class="ui.middot">&middot;</span>
-
-              <UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
-                {{ shortcut }}
-              </UKbd>
-            </span>
-          </div>
-        </div>
-      </Transition>
-    </div>
-  </div>
-</template>
-
-<script>
-import { computed, ref, toRef, defineComponent } from "vue";
-import { defu } from "defu";
-import UKbd from "../elements/Kbd.vue";
-import { useUI } from "../../composables/useUI";
-import { usePopper } from "../../composables/usePopper";
-import { mergeConfig } from "../../utils";
-import appConfig from "#build/app.config";
-import { tooltip } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.tooltip, tooltip);
-export default defineComponent({
-  components: {
-    UKbd
-  },
-  inheritAttrs: false,
-  props: {
-    text: {
-      type: String,
-      default: null
-    },
-    prevent: {
-      type: Boolean,
-      default: false
-    },
-    shortcuts: {
-      type: Array,
-      default: () => []
-    },
-    openDelay: {
-      type: Number,
-      default: () => config.default.openDelay
-    },
-    closeDelay: {
-      type: Number,
-      default: () => config.default.closeDelay
-    },
-    popper: {
-      type: Object,
-      default: () => ({})
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props) {
-    const { ui, attrs } = useUI("tooltip", toRef(props, "ui"), config, toRef(props, "class"));
-    const popper = computed(() => defu({}, props.popper, ui.value.popper));
-    const [trigger, container] = usePopper(popper.value);
-    const open = ref(false);
-    let openTimeout = null;
-    let closeTimeout = null;
-    function onMouseEnter() {
-      if (closeTimeout) {
-        clearTimeout(closeTimeout);
-        closeTimeout = null;
-      }
-      if (open.value) {
-        return;
-      }
-      openTimeout = openTimeout || setTimeout(() => {
-        open.value = true;
-        openTimeout = null;
-      }, props.openDelay);
-    }
-    function onMouseLeave() {
-      if (openTimeout) {
-        clearTimeout(openTimeout);
-        openTimeout = null;
-      }
-      if (!open.value) {
-        return;
-      }
-      closeTimeout = closeTimeout || setTimeout(() => {
-        open.value = false;
-        closeTimeout = null;
-      }, props.closeDelay);
-    }
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      // eslint-disable-next-line vue/no-dupe-keys
-      popper,
-      trigger,
-      container,
-      open,
-      onMouseEnter,
-      onMouseLeave
-    };
-  }
-});
-</script>