@nuxt/ui 0.4.1 → 2.8.1

package/dist/runtime/components/navigation/VerticalNavigation.vue.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+import type { VerticalNavigationLink } from '../../types/vertical-navigation';
+declare const _default: import("vue").DefineComponent<{
+    links: {
+        type: PropType<VerticalNavigationLink[]>;
+        default: () => never[];
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    wrapperClass: import("vue").ComputedRef<string>;
+    omit: {
+        <T extends object, K extends import("lodash").PropertyName[]>(object: T | null | undefined, ...paths: K): Pick<T, Exclude<keyof T, K[number]>>;
+        <T_1 extends object, K_1 extends keyof T_1>(object: T_1 | null | undefined, ...paths: import("lodash").Many<K_1>[]): import("lodash").Omit<T_1, K_1>;
+        <T_2 extends object>(object: T_2 | null | undefined, ...paths: import("lodash").Many<import("lodash").PropertyName>[]): Partial<T_2>;
+    };
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    links: {
+        type: PropType<VerticalNavigationLink[]>;
+        default: () => never[];
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    ui: any;
+    links: VerticalNavigationLink[];
+}, {}>;
+export default _default;

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

@@ -0,0 +1,74 @@
+<template>
+  <div v-if="isOpen" ref="container" :class="wrapperClass" v-bind="attrs">
+    <Transition appear v-bind="ui.transition">
+      <div :class="[ui.base, ui.ring, ui.rounded, ui.shadow, ui.background]">
+        <slot />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script>
+import { computed, toRef, defineComponent } from "vue";
+import { defu } from "defu";
+import { onClickOutside } from "@vueuse/core";
+import { omit } from "lodash-es";
+import { twMerge, twJoin } from "tailwind-merge";
+import { usePopper } from "../../composables/usePopper";
+import { defuTwMerge } from "../../utils";
+import { useAppConfig } from "#imports";
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    virtualElement: {
+      type: Object,
+      required: true
+    },
+    popper: {
+      type: Object,
+      default: () => ({})
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["update:modelValue", "close"],
+  setup(props, { attrs, emit }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.contextMenu));
+    const popper = computed(() => defu({}, props.popper, ui.value.popper));
+    const isOpen = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(value) {
+        emit("update:modelValue", value);
+      }
+    });
+    const virtualElement = toRef(props, "virtualElement");
+    const [, container] = usePopper(popper.value, virtualElement);
+    const wrapperClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.container,
+        ui.value.width
+      ), attrs.class);
+    });
+    onClickOutside(container, () => {
+      isOpen.value = false;
+    });
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      isOpen,
+      wrapperClass,
+      container
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,54 @@
+/// <reference types="lodash" />
+import type { PropType, Ref } from 'vue';
+import type { PopperOptions } from '../../types/popper';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    virtualElement: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    popper: {
+        type: PropType<PopperOptions>;
+        default: () => {};
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    isOpen: import("vue").WritableComputedRef<boolean>;
+    wrapperClass: import("vue").ComputedRef<string>;
+    container: Ref<import("@vueuse/core").MaybeElement>;
+}, 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: BooleanConstructor;
+        default: boolean;
+    };
+    virtualElement: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    popper: {
+        type: PropType<PopperOptions>;
+        default: () => {};
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    ui: any;
+    popper: PopperOptions;
+    modelValue: boolean;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,113 @@
+<template>
+  <TransitionRoot :appear="appear" :show="isOpen" as="template">
+    <HDialog :class="wrapperClass" 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>
+
+      <div :class="ui.inner">
+        <div :class="[ui.container, ui.padding]">
+          <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
+            <HDialogPanel
+              :class="[
+                ui.base,
+                ui.background,
+                ui.ring,
+                ui.shadow,
+                fullscreen ? 'w-screen' : ui.width,
+                fullscreen ? 'h-screen' : ui.height,
+                fullscreen ? 'rounded-none' : ui.rounded,
+                fullscreen ? 'm-0' : ui.margin
+              ]"
+            >
+              <slot />
+            </HDialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </HDialog>
+  </TransitionRoot>
+</template>
+
+<script>
+import { computed, defineComponent } from "vue";
+import { omit } from "lodash-es";
+import { twMerge } from "tailwind-merge";
+import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from "@headlessui/vue";
+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
+    },
+    overlay: {
+      type: Boolean,
+      default: true
+    },
+    transition: {
+      type: Boolean,
+      default: true
+    },
+    preventClose: {
+      type: Boolean,
+      default: false
+    },
+    fullscreen: {
+      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.modal));
+    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
+      };
+    });
+    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/Modal.vue.d.ts

@@ -0,0 +1,82 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    appear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    overlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    preventClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    isOpen: import("vue").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: BooleanConstructor;
+        default: boolean;
+    };
+    appear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    overlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transition: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    preventClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fullscreen: {
+        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;
+    fullscreen: boolean;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,197 @@
+<template>
+  <Transition appear v-bind="ui.transition">
+    <div :class="wrapperClass" v-bind="attrs" @mouseover="onMouseover" @mouseleave="onMouseleave">
+      <div :class="[ui.container, ui.rounded, ui.ring]">
+        <div :class="ui.padding">
+          <div class="flex gap-3" :class="{ 'items-start': description || $slots.description, 'items-center': !description && !$slots.description }">
+            <UIcon v-if="icon" :name="icon" :class="iconClass" />
+            <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
+
+            <div class="w-0 flex-1">
+              <p :class="ui.title">
+                <slot name="title" :title="title">
+                  {{ title }}
+                </slot>
+              </p>
+              <p v-if="(description || $slots.description)" :class="ui.description">
+                <slot name="description" :description="description">
+                  {{ description }}
+                </slot>
+              </p>
+
+              <div v-if="(description || $slots.description) && actions.length" class="mt-3 flex items-center gap-2">
+                <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
+              </div>
+            </div>
+            <div class="flex-shrink-0 flex items-center gap-3">
+              <div v-if="!description && !$slots.description && actions.length" class="flex items-center gap-2">
+                <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
+              </div>
+
+              <UButton v-if="closeButton" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="onClose" />
+            </div>
+          </div>
+        </div>
+        <div v-if="timeout" :class="progressClass" :style="progressStyle" />
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script>
+import { ref, computed, onMounted, onUnmounted, watchEffect, defineComponent } from "vue";
+import { omit } from "lodash-es";
+import { twMerge, twJoin } from "tailwind-merge";
+import UIcon from "../elements/Icon.vue";
+import UAvatar from "../elements/Avatar.vue";
+import UButton from "../elements/Button.vue";
+import { useTimer } from "../../composables/useTimer";
+import { defuTwMerge } from "../../utils";
+import { useAppConfig } from "#imports";
+import appConfig from "#build/app.config";
+export default defineComponent({
+  components: {
+    UIcon,
+    UAvatar,
+    UButton
+  },
+  inheritAttrs: false,
+  props: {
+    id: {
+      type: [String, Number],
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      default: null
+    },
+    icon: {
+      type: String,
+      default: () => appConfig.ui.notification.default.icon
+    },
+    avatar: {
+      type: Object,
+      default: null
+    },
+    closeButton: {
+      type: Object,
+      default: () => appConfig.ui.notification.default.closeButton
+    },
+    timeout: {
+      type: Number,
+      default: 5e3
+    },
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    callback: {
+      type: Function,
+      default: null
+    },
+    color: {
+      type: String,
+      default: () => appConfig.ui.notification.default.color,
+      validator(value) {
+        return ["gray", ...appConfig.ui.colors].includes(value);
+      }
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["close"],
+  setup(props, { attrs, emit }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.notification));
+    let timer = null;
+    const remaining = ref(props.timeout);
+    const wrapperClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.wrapper,
+        ui.value.background,
+        ui.value.rounded,
+        ui.value.shadow
+      ), attrs.class);
+    });
+    const progressClass = computed(() => {
+      return twJoin(
+        ui.value.progress.base,
+        ui.value.progress.background?.replaceAll("{color}", props.color)
+      );
+    });
+    const progressStyle = computed(() => {
+      const remainingPercent = remaining.value / props.timeout * 100;
+      return { width: `${remainingPercent || 0}%` };
+    });
+    const iconClass = computed(() => {
+      return twJoin(
+        ui.value.icon.base,
+        ui.value.icon.color?.replaceAll("{color}", props.color)
+      );
+    });
+    function onMouseover() {
+      if (timer) {
+        timer.pause();
+      }
+    }
+    function onMouseleave() {
+      if (timer) {
+        timer.resume();
+      }
+    }
+    function onClose() {
+      if (timer) {
+        timer.stop();
+      }
+      if (props.callback) {
+        props.callback();
+      }
+      emit("close");
+    }
+    function onAction(action) {
+      if (timer) {
+        timer.stop();
+      }
+      if (action.click) {
+        action.click();
+      }
+      emit("close");
+    }
+    onMounted(() => {
+      if (!props.timeout) {
+        return;
+      }
+      timer = useTimer(() => {
+        onClose();
+      }, props.timeout);
+      watchEffect(() => {
+        remaining.value = timer.remaining.value;
+      });
+    });
+    onUnmounted(() => {
+      if (timer) {
+        timer.stop();
+      }
+    });
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      wrapperClass,
+      progressClass,
+      progressStyle,
+      iconClass,
+      onMouseover,
+      onMouseleave,
+      onClose,
+      onAction
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,126 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+import type { NotificationAction } from '../../types/notification';
+import type { Avatar } from '../../types/avatar';
+import type { Button } from '../../types/button';
+declare const _default: import("vue").DefineComponent<{
+    id: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    description: {
+        type: StringConstructor;
+        default: null;
+    };
+    icon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    avatar: {
+        type: PropType<Avatar>;
+        default: null;
+    };
+    closeButton: {
+        type: PropType<Button>;
+        default: () => any;
+    };
+    timeout: {
+        type: NumberConstructor;
+        default: number;
+    };
+    actions: {
+        type: PropType<NotificationAction[]>;
+        default: () => never[];
+    };
+    callback: {
+        type: FunctionConstructor;
+        default: null;
+    };
+    color: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    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;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: (StringConstructor | NumberConstructor)[];
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    description: {
+        type: StringConstructor;
+        default: null;
+    };
+    icon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    avatar: {
+        type: PropType<Avatar>;
+        default: null;
+    };
+    closeButton: {
+        type: PropType<Button>;
+        default: () => any;
+    };
+    timeout: {
+        type: NumberConstructor;
+        default: number;
+    };
+    actions: {
+        type: PropType<NotificationAction[]>;
+        default: () => never[];
+    };
+    callback: {
+        type: FunctionConstructor;
+        default: null;
+    };
+    color: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+}, {
+    description: string;
+    icon: string;
+    avatar: Avatar;
+    closeButton: Button;
+    timeout: number;
+    actions: NotificationAction[];
+    callback: Function;
+    color: string;
+    ui: any;
+}, {}>;
+export default _default;