@nuxt/ui 2.18.4 → 3.0.0-alpha.0

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

@@ -1,235 +0,0 @@
-import type { PropType } from 'vue';
-import type { Avatar, Button, NotificationColor, NotificationAction, Strategy } from '../../types/index.js';
-declare const config: {
-    wrapper: string;
-    container: string;
-    inner: string;
-    title: string;
-    description: string;
-    actions: string;
-    background: string;
-    shadow: string;
-    rounded: string;
-    padding: string;
-    gap: string;
-    ring: string;
-    icon: {
-        base: string;
-        color: string;
-    };
-    avatar: {
-        base: string;
-        size: "md";
-    };
-    progress: {
-        base: string;
-        background: string;
-    };
-    transition: {
-        enterActiveClass: string;
-        enterFromClass: string;
-        enterToClass: string;
-        leaveActiveClass: string;
-        leaveFromClass: string;
-        leaveToClass: string;
-    };
-    default: {
-        color: string;
-        icon: any;
-        timeout: number;
-        closeButton: {
-            icon: string;
-            color: "gray";
-            variant: "link";
-            padded: boolean;
-        };
-        actionButton: {
-            size: "xs";
-            color: "white";
-        };
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    id: {
-        type: (StringConstructor | NumberConstructor)[];
-        required: true;
-    };
-    title: {
-        type: StringConstructor;
-        default: any;
-    };
-    description: {
-        type: StringConstructor;
-        default: any;
-    };
-    icon: {
-        type: StringConstructor;
-        default: () => any;
-    };
-    avatar: {
-        type: PropType<Avatar>;
-        default: any;
-    };
-    closeButton: {
-        type: PropType<Button>;
-        default: () => Button;
-    };
-    timeout: {
-        type: NumberConstructor;
-        default: () => number;
-    };
-    actions: {
-        type: PropType<NotificationAction[]>;
-        default: () => any[];
-    };
-    callback: {
-        type: FunctionConstructor;
-        default: any;
-    };
-    color: {
-        type: PropType<NotificationColor>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        wrapper: string;
-        container: string;
-        inner: string;
-        title: string;
-        description: string;
-        actions: string;
-        background: string;
-        shadow: string;
-        rounded: string;
-        padding: string;
-        gap: string;
-        ring: string;
-        icon: {
-            base: string;
-            color: string;
-        };
-        avatar: {
-            base: string;
-            size: "md";
-        };
-        progress: {
-            base: string;
-            background: string;
-        };
-        transition: {
-            enterActiveClass: string;
-            enterFromClass: string;
-            enterToClass: string;
-            leaveActiveClass: string;
-            leaveFromClass: string;
-            leaveToClass: string;
-        };
-        default: {
-            color: string;
-            icon: any;
-            timeout: number;
-            closeButton: {
-                icon: string;
-                color: "gray";
-                variant: "link";
-                padded: boolean;
-            };
-            actionButton: {
-                size: "xs";
-                color: "white";
-            };
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    wrapperClass: import("vue").ComputedRef<string>;
-    progressClass: import("vue").ComputedRef<string>;
-    progressStyle: import("vue").ComputedRef<{
-        width: string;
-    }>;
-    iconClass: import("vue").ComputedRef<string>;
-    onMouseover: () => void;
-    onMouseleave: () => void;
-    onClose: () => void;
-    onAction: (action: NotificationAction) => void;
-    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    id: {
-        type: (StringConstructor | NumberConstructor)[];
-        required: true;
-    };
-    title: {
-        type: StringConstructor;
-        default: any;
-    };
-    description: {
-        type: StringConstructor;
-        default: any;
-    };
-    icon: {
-        type: StringConstructor;
-        default: () => any;
-    };
-    avatar: {
-        type: PropType<Avatar>;
-        default: any;
-    };
-    closeButton: {
-        type: PropType<Button>;
-        default: () => Button;
-    };
-    timeout: {
-        type: NumberConstructor;
-        default: () => number;
-    };
-    actions: {
-        type: PropType<NotificationAction[]>;
-        default: () => any[];
-    };
-    callback: {
-        type: FunctionConstructor;
-        default: any;
-    };
-    color: {
-        type: PropType<NotificationColor>;
-        default: () => string;
-        validator(value: string): boolean;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>> & {
-    onClose?: (...args: any[]) => any;
-}, {
-    class: any;
-    avatar: any;
-    color: NotificationColor;
-    title: string;
-    ui: {};
-    description: string;
-    icon: string;
-    closeButton: Button;
-    timeout: number;
-    actions: NotificationAction[];
-    callback: Function;
-}, {}>;
-export default _default;

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

@@ -1,69 +0,0 @@
-<template>
-  <Teleport to="body">
-    <div :class="wrapperClass" role="region" v-bind="attrs">
-      <div v-if="notifications.length" :class="ui.container">
-        <div v-for="notification of notifications" :key="notification.id">
-          <UNotification
-            v-bind="notification"
-            :class="notification.click && 'cursor-pointer'"
-            @click="notification.click && notification.click(notification)"
-            @close="toast.remove(notification.id)"
-          >
-            <template v-for="(_, name) in $slots" #[name]="slotData">
-              <slot :name="name" v-bind="slotData" />
-            </template>
-          </UNotification>
-        </div>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script>
-import { computed, toRef, defineComponent } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
-import UNotification from "./Notification.vue";
-import { useUI } from "../../composables/useUI";
-import { useToast } from "../../composables/useToast";
-import { mergeConfig } from "../../utils";
-import { useState } from "#imports";
-import appConfig from "#build/app.config";
-import { notifications } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.notifications, notifications);
-export default defineComponent({
-  components: {
-    UNotification
-  },
-  inheritAttrs: false,
-  props: {
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props) {
-    const { ui, attrs } = useUI("notifications", toRef(props, "ui"), config);
-    const toast = useToast();
-    const notifications2 = useState("notifications", () => []);
-    const wrapperClass = computed(() => {
-      return twMerge(twJoin(
-        ui.value.wrapper,
-        ui.value.position,
-        ui.value.width
-      ), props.class);
-    });
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      toast,
-      notifications: notifications2,
-      wrapperClass
-    };
-  }
-});
-</script>

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

@@ -1,66 +0,0 @@
-import type { PropType } from 'vue';
-import type { Notification, Strategy } from '../../types/index.js';
-declare const config: {
-    wrapper: string;
-    position: string;
-    width: string;
-    container: string;
-};
-declare const _default: import("vue").DefineComponent<{
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        wrapper: string;
-        position: string;
-        width: string;
-        container: string;
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    toast: {
-        add: (notification: Partial<Notification>) => {
-            id: string;
-            title?: string;
-            description?: string;
-            icon?: string;
-            avatar?: import("../../types/avatar").Avatar;
-            closeButton?: import("../../types/button").Button;
-            timeout?: number;
-            actions?: import("../../types/notification").NotificationAction[];
-            click?: (...args: any[]) => void;
-            callback?: (...args: any[]) => void;
-            color?: import("../../types/notification").NotificationColor;
-            ui?: any;
-        };
-        remove: (id: string) => void;
-        update: (id: string, notification: Partial<Notification>) => void;
-        clear: () => void;
-    };
-    notifications: import("vue").Ref<Notification[]>;
-    wrapperClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>>, {
-    class: any;
-    ui: {};
-}, {}>;
-export default _default;

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

@@ -1,213 +0,0 @@
-<template>
-  <!-- eslint-disable-next-line vue/no-template-shadow -->
-  <HPopover ref="popover" v-slot="{ open, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
-    <HPopoverButton
-      ref="trigger"
-      as="div"
-      :disabled="disabled"
-      :class="ui.trigger"
-      role="button"
-      @mouseenter="onMouseEnter"
-      @touchstart.passive="onTouchStart"
-    >
-      <slot :open="open" :close="close">
-        <button :disabled="disabled">
-          Open
-        </button>
-      </slot>
-    </HPopoverButton>
-
-    <Transition v-if="overlay" appear v-bind="ui.overlay.transition">
-      <div v-if="open" :class="[ui.overlay.base, ui.overlay.background]" />
-    </Transition>
-
-    <div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseenter="onMouseEnter">
-      <Transition appear v-bind="ui.transition">
-        <div>
-          <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
-
-          <HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
-            <slot name="panel" :open="open" :close="close" />
-          </HPopoverPanel>
-        </div>
-      </Transition>
-    </div>
-  </HPopover>
-</template>
-
-<script>
-import { computed, ref, toRef, onMounted, defineComponent, watch } from "vue";
-import { defu } from "defu";
-import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as HPopoverPanel, provideUseId } from "@headlessui/vue";
-import { useUI } from "../../composables/useUI";
-import { usePopper } from "../../composables/usePopper";
-import { mergeConfig } from "../../utils";
-import appConfig from "#build/app.config";
-import { popover } from "#ui/ui.config";
-import { useId } from "#imports";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.popover, popover);
-export default defineComponent({
-  components: {
-    HPopover,
-    HPopoverButton,
-    HPopoverPanel
-  },
-  inheritAttrs: false,
-  props: {
-    mode: {
-      type: String,
-      default: "click",
-      validator: (value) => ["click", "hover"].includes(value)
-    },
-    open: {
-      type: Boolean,
-      default: void 0
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    openDelay: {
-      type: Number,
-      default: () => config.default.openDelay
-    },
-    closeDelay: {
-      type: Number,
-      default: () => config.default.closeDelay
-    },
-    overlay: {
-      type: Boolean,
-      default: false
-    },
-    popper: {
-      type: Object,
-      default: () => ({})
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ["update:open"],
-  setup(props, { emit }) {
-    const { ui, attrs } = useUI("popover", toRef(props, "ui"), config, toRef(props, "class"));
-    const popper = computed(() => defu(props.mode === "hover" ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper));
-    const [trigger, container] = usePopper(popper.value);
-    const popover2 = ref(null);
-    const popoverApi = ref(null);
-    let openTimeout = null;
-    let closeTimeout = null;
-    onMounted(() => {
-      const popoverProvides = popover2.value?.$.provides;
-      if (!popoverProvides) {
-        return;
-      }
-      const popoverProvidesSymbols = Object.getOwnPropertySymbols(popoverProvides);
-      popoverApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]];
-      if (props.open) {
-        popoverApi.value?.togglePopover();
-      }
-    });
-    const containerStyle = computed(() => {
-      if (props.mode !== "hover") {
-        return {};
-      }
-      const offsetDistance = props.popper?.offsetDistance || ui.value.popper?.offsetDistance || 8;
-      const placement = popper.value.placement?.split("-")[0];
-      const padding = `${offsetDistance}px`;
-      if (placement === "top" || placement === "bottom") {
-        return {
-          paddingTop: padding,
-          paddingBottom: padding
-        };
-      } else if (placement === "left" || placement === "right") {
-        return {
-          paddingLeft: padding,
-          paddingRight: padding
-        };
-      } else {
-        return {
-          paddingTop: padding,
-          paddingBottom: padding,
-          paddingLeft: padding,
-          paddingRight: padding
-        };
-      }
-    });
-    function onTouchStart(event) {
-      if (!event.cancelable || !popoverApi.value) {
-        return;
-      }
-      if (popoverApi.value.popoverState === 0) {
-        popoverApi.value.closePopover();
-      } else {
-        popoverApi.value.togglePopover();
-      }
-    }
-    function onMouseEnter() {
-      if (props.mode !== "hover" || !popoverApi.value) {
-        return;
-      }
-      if (closeTimeout) {
-        clearTimeout(closeTimeout);
-        closeTimeout = null;
-      }
-      if (popoverApi.value.popoverState === 0) {
-        return;
-      }
-      openTimeout = openTimeout || setTimeout(() => {
-        popoverApi.value.togglePopover && popoverApi.value.togglePopover();
-        openTimeout = null;
-      }, props.openDelay);
-    }
-    function onMouseLeave() {
-      if (props.mode !== "hover" || !popoverApi.value) {
-        return;
-      }
-      if (openTimeout) {
-        clearTimeout(openTimeout);
-        openTimeout = null;
-      }
-      if (popoverApi.value.popoverState === 1) {
-        return;
-      }
-      closeTimeout = closeTimeout || setTimeout(() => {
-        popoverApi.value.closePopover && popoverApi.value.closePopover();
-        closeTimeout = null;
-      }, props.closeDelay);
-    }
-    watch(() => props.open, (newValue, oldValue) => {
-      if (!popoverApi.value) return;
-      if (oldValue === void 0 || newValue === oldValue) return;
-      if (newValue) {
-        popoverApi.value.popoverState = 0;
-      } else {
-        popoverApi.value.closePopover();
-      }
-    });
-    watch(() => popoverApi.value?.popoverState, (newValue, oldValue) => {
-      if (oldValue === void 0 || newValue === oldValue) return;
-      emit("update:open", newValue === 0);
-    });
-    provideUseId(() => useId());
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      popover: popover2,
-      // eslint-disable-next-line vue/no-dupe-keys
-      popper,
-      trigger,
-      container,
-      containerStyle,
-      onTouchStart,
-      onMouseEnter,
-      onMouseLeave
-    };
-  }
-});
-</script>