@nuxt/ui 0.4.1 → 2.8.1

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

@@ -0,0 +1,61 @@
+<template>
+  <div :class="wrapperClass" 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>
+</template>
+
+<script>
+import { computed, defineComponent } from "vue";
+import { omit } from "lodash-es";
+import { twMerge, twJoin } from "tailwind-merge";
+import UNotification from "./Notification.vue";
+import { useToast } from "../../composables/useToast";
+import { defuTwMerge } from "../../utils";
+import { useState, useAppConfig } from "#imports";
+export default defineComponent({
+  components: {
+    UNotification
+  },
+  inheritAttrs: false,
+  props: {
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { attrs }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.notifications));
+    const toast = useToast();
+    const notifications = useState("notifications", () => []);
+    const wrapperClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.wrapper,
+        ui.value.position,
+        ui.value.width
+      ), attrs.class);
+    });
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      toast,
+      notifications,
+      wrapperClass
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,41 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+import type { Notification } from '../../types/notification';
+declare const _default: import("vue").DefineComponent<{
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    toast: {
+        add: (notification: Partial<Notification>) => {
+            id: string;
+            title?: string | undefined;
+            description?: string | undefined;
+            icon?: string | undefined;
+            avatar?: import("../../types/avatar").Avatar | undefined;
+            closeButton?: import("../../types/button").Button | undefined;
+            timeout?: number | undefined;
+            actions?: import("../../types/notification").NotificationAction[] | undefined;
+            click?: Function | undefined;
+            callback?: Function | undefined;
+            color?: string | undefined;
+            ui?: any;
+        };
+        remove: (id: string) => void;
+    };
+    notifications: any;
+    wrapperClass: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    ui: any;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,139 @@
+<template>
+  <HPopover ref="popover" v-slot="{ open, close }" :class="wrapperClass" v-bind="attrs" @mouseleave="onMouseLeave">
+    <HPopoverButton
+      ref="trigger"
+      as="div"
+      :disabled="disabled"
+      class="inline-flex w-full"
+      role="button"
+      @mouseover="onMouseOver"
+    >
+      <slot :open="open" :close="close">
+        <button :disabled="disabled">
+          Open
+        </button>
+      </slot>
+    </HPopoverButton>
+
+    <div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
+      <Transition appear v-bind="ui.transition">
+        <HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
+          <slot name="panel" :open="open" :close="close" />
+        </HPopoverPanel>
+      </Transition>
+    </div>
+  </HPopover>
+</template>
+
+<script>
+import { computed, ref, onMounted, defineComponent } from "vue";
+import { defu } from "defu";
+import { omit } from "lodash-es";
+import { twMerge } from "tailwind-merge";
+import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as HPopoverPanel } from "@headlessui/vue";
+import { usePopper } from "../../composables/usePopper";
+import { defuTwMerge } from "../../utils";
+import { useAppConfig } from "#imports";
+export default defineComponent({
+  components: {
+    HPopover,
+    HPopoverButton,
+    HPopoverPanel
+  },
+  inheritAttrs: false,
+  props: {
+    mode: {
+      type: String,
+      default: "click",
+      validator: (value) => ["click", "hover"].includes(value)
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    openDelay: {
+      type: Number,
+      default: 0
+    },
+    closeDelay: {
+      type: Number,
+      default: 0
+    },
+    popper: {
+      type: Object,
+      default: () => ({})
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { attrs }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.popover));
+    const popper = computed(() => defu(props.mode === "hover" ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper));
+    const [trigger, container] = usePopper(popper.value);
+    const popover = ref(null);
+    const popoverApi = ref(null);
+    let openTimeout = null;
+    let closeTimeout = null;
+    onMounted(() => {
+      const popoverProvides = popover.value?.$.provides;
+      if (!popoverProvides) {
+        return;
+      }
+      const popoverProvidesSymbols = Object.getOwnPropertySymbols(popoverProvides);
+      popoverApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]];
+    });
+    const containerStyle = computed(() => {
+      const offsetDistance = props.popper?.offsetDistance || ui.value.popper?.offsetDistance || 8;
+      return props.mode === "hover" ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {};
+    });
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
+    function onMouseOver() {
+      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);
+    }
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      popover,
+      trigger,
+      container,
+      containerStyle,
+      wrapperClass,
+      onMouseOver,
+      onMouseLeave
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,82 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+import type { PopperOptions } from '../../types/popper';
+declare const _default: import("vue").DefineComponent<{
+    mode: {
+        type: PropType<"click" | "hover">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    openDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    closeDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    popper: {
+        type: PropType<PopperOptions>;
+        default: () => {};
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    popover: any;
+    trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
+    container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
+    containerStyle: import("vue").ComputedRef<{
+        paddingTop: string;
+        paddingBottom: string;
+    } | {
+        paddingTop?: undefined;
+        paddingBottom?: undefined;
+    }>;
+    wrapperClass: import("vue").ComputedRef<string>;
+    onMouseOver: () => void;
+    onMouseLeave: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    mode: {
+        type: PropType<"click" | "hover">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    openDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    closeDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    popper: {
+        type: PropType<PopperOptions>;
+        default: () => {};
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    ui: any;
+    popper: PopperOptions;
+    disabled: boolean;
+    mode: "click" | "hover";
+    openDelay: number;
+    closeDelay: number;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,103 @@
+<template>
+  <TransitionRoot as="template" :appear="appear" :show="isOpen">
+    <HDialog :class="[wrapperClass, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="(e) => !preventClose && close(e)">
+      <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, ui.width, ui.background, ui.ring, ui.padding]">
+          <slot />
+        </HDialogPanel>
+      </TransitionChild>
+    </HDialog>
+  </TransitionRoot>
+</template>
+
+<script>
+import { computed, defineComponent } from "vue";
+import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from "@headlessui/vue";
+import { omit } from "lodash-es";
+import { twMerge } from "tailwind-merge";
+import { defuTwMerge } from "../../utils";
+import { useAppConfig } from "#imports";
+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"].includes(value)
+    },
+    overlay: {
+      type: Boolean,
+      default: true
+    },
+    transition: {
+      type: Boolean,
+      default: true
+    },
+    preventClose: {
+      type: Boolean,
+      default: false
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["update:modelValue", "close"],
+  setup(props, { attrs, emit }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.slideover));
+    const isOpen = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(value) {
+        emit("update:modelValue", value);
+      }
+    });
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
+    const transitionClass = computed(() => {
+      if (!props.transition) {
+        return {};
+      }
+      return {
+        ...ui.value.transition,
+        enterFrom: props.side === "left" ? "-translate-x-full" : "translate-x-full",
+        enterTo: "translate-x-0",
+        leaveFrom: "translate-x-0",
+        leaveTo: props.side === "left" ? "-translate-x-full" : "translate-x-full"
+      };
+    });
+    function close(value) {
+      isOpen.value = value;
+      emit("close");
+    }
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      isOpen,
+      wrapperClass,
+      transitionClass,
+      close
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,84 @@
+/// <reference types="lodash" />
+import type { WritableComputedRef, PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    appear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    side: {
+        type: PropType<"right" | "left">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    overlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    preventClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    isOpen: WritableComputedRef<boolean>;
+    wrapperClass: import("vue").ComputedRef<string>;
+    transitionClass: import("vue").ComputedRef<any>;
+    close: (value: boolean) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    appear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    side: {
+        type: PropType<"right" | "left">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    overlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    preventClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    ui: any;
+    modelValue: boolean;
+    appear: boolean;
+    overlay: boolean;
+    transition: boolean;
+    preventClose: boolean;
+    side: "right" | "left";
+}, {}>;
+export default _default;

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

@@ -0,0 +1,118 @@
+<template>
+  <div ref="trigger" :class="wrapperClass" v-bind="attrs" @mouseover="onMouseOver" @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 :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="mx-1 text-gray-700 dark:text-gray-200">&middot;</span>
+            <UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
+              {{ shortcut }}
+            </Ukbd>
+          </span>
+        </div>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, ref, defineComponent } from "vue";
+import { defu } from "defu";
+import { omit } from "lodash-es";
+import { twMerge } from "tailwind-merge";
+import UKbd from "../elements/Kbd.vue";
+import { usePopper } from "../../composables/usePopper";
+import { defuTwMerge } from "../../utils";
+import { useAppConfig } from "#imports";
+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: 0
+    },
+    closeDelay: {
+      type: Number,
+      default: 0
+    },
+    popper: {
+      type: Object,
+      default: () => ({})
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { attrs }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.tooltip));
+    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;
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
+    function onMouseOver() {
+      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 {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      trigger,
+      container,
+      open,
+      wrapperClass,
+      onMouseOver,
+      onMouseLeave
+    };
+  }
+});
+</script>