@nuxt/ui 2.18.3 → 3.0.0-alpha.0

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

@@ -1,126 +0,0 @@
-import type { PropType, Ref } from 'vue';
-import type { PopperOptions, Strategy } from '../../types.js';
-declare const config: {
-    wrapper: string;
-    container: 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;
-    };
-    popper: {
-        placement: string;
-        scroll: boolean;
-    };
-    arrow: {
-        base: string;
-        ring: string;
-        rounded: string;
-        background: string;
-        shadow: string;
-        placement: string;
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    virtualElement: {
-        type: ObjectConstructor;
-        required: true;
-    };
-    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;
-        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;
-        };
-        popper: {
-            placement: string;
-            scroll: boolean;
-        };
-        arrow: {
-            base: string;
-            ring: string;
-            rounded: string;
-            background: string;
-            shadow: string;
-            placement: string;
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    isOpen: import("vue").WritableComputedRef<boolean>;
-    wrapperClass: import("vue").ComputedRef<string>;
-    popper: import("vue").ComputedRef<PopperOptions>;
-    container: Ref<import("@vueuse/core").MaybeElement>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    virtualElement: {
-        type: ObjectConstructor;
-        required: true;
-    };
-    popper: {
-        type: PropType<PopperOptions>;
-        default: () => {};
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>> & {
-    onClose?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-}, {
-    class: any;
-    popper: PopperOptions;
-    ui: {};
-    modelValue: boolean;
-}, {}>;
-export default _default;

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

@@ -1,122 +0,0 @@
-<template>
-  <TransitionRoot :appear="appear" :show="isOpen" as="template" @after-leave="onAfterLeave">
-    <HDialog :class="ui.wrapper" 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>
-
-      <div :class="ui.inner">
-        <div :class="[ui.container, !fullscreen && ui.padding]">
-          <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
-            <HDialogPanel
-              :class="[
-                ui.base,
-                ui.background,
-                ui.ring,
-                ui.shadow,
-                fullscreen ? ui.fullscreen : [ui.width, ui.height, ui.rounded, ui.margin],
-              ]"
-            >
-              <slot />
-            </HDialogPanel>
-          </TransitionChild>
-        </div>
-      </div>
-    </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 { modal } from "#ui/ui.config";
-import { useId } from "#imports";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.modal, modal);
-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
-    },
-    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("modal", 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 {};
-      }
-      return {
-        ...ui.value.transition
-      };
-    });
-    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,
-      onAfterLeave,
-      close
-    };
-  }
-});
-</script>

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

@@ -1,166 +0,0 @@
-import type { PropType } from 'vue';
-import type { Strategy } from '../../types.js';
-declare const config: {
-    wrapper: string;
-    inner: string;
-    container: string;
-    padding: string;
-    margin: string;
-    base: string;
-    overlay: {
-        base: string;
-        background: string;
-        transition: {
-            enter: string;
-            enterFrom: string;
-            enterTo: string;
-            leave: string;
-            leaveFrom: string;
-            leaveTo: string;
-        };
-    };
-    background: string;
-    ring: string;
-    rounded: string;
-    shadow: string;
-    width: string;
-    height: string;
-    fullscreen: string;
-    transition: {
-        enter: string;
-        enterFrom: string;
-        enterTo: string;
-        leave: string;
-        leaveFrom: string;
-        leaveTo: string;
-    };
-};
-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;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        wrapper: string;
-        inner: string;
-        container: string;
-        padding: string;
-        margin: string;
-        base: string;
-        overlay: {
-            base: string;
-            background: string;
-            transition: {
-                enter: string;
-                enterFrom: string;
-                enterTo: string;
-                leave: string;
-                leaveFrom: string;
-                leaveTo: string;
-            };
-        };
-        background: string;
-        ring: string;
-        rounded: string;
-        shadow: string;
-        width: string;
-        height: string;
-        fullscreen: string;
-        transition: {
-            enter: string;
-            enterFrom: string;
-            enterTo: string;
-            leave: string;
-            leaveFrom: string;
-            leaveTo: string;
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    isOpen: import("vue").WritableComputedRef<boolean>;
-    transitionClass: import("vue").ComputedRef<{}>;
-    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: 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;
-    };
-    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;
-    fullscreen: boolean;
-    modelValue: boolean;
-}, {}>;
-export default _default;

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

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

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

@@ -1,212 +0,0 @@
-<template>
-  <Transition appear v-bind="ui.transition">
-    <div
-      :class="wrapperClass"
-      role="status"
-      v-bind="attrs"
-      @mouseover="onMouseover"
-      @mouseleave="onMouseleave"
-    >
-      <div :class="[ui.container, ui.rounded, ui.ring]">
-        <div class="flex" :class="[ui.padding, ui.gap, { '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="ui.inner">
-            <p v-if="(title || $slots.title)" :class="ui.title">
-              <slot name="title" :title="title">
-                {{ title }}
-              </slot>
-            </p>
-            <div v-if="(description || $slots.description)" :class="twMerge(ui.description, !title && !$slots.title && 'mt-0 leading-5')">
-              <slot name="description" :description="description">
-                {{ description }}
-              </slot>
-            </div>
-
-            <div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
-              <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
-            </div>
-          </div>
-          <div v-if="closeButton || (!description && !$slots.description && actions.length)" :class="twMerge(ui.actions, 'mt-0')">
-            <template v-if="!description && !$slots.description && actions.length">
-              <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
-            </template>
-
-            <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" @click.stop="onClose" />
-          </div>
-        </div>
-        <div v-if="timeout" :class="progressClass" :style="progressStyle" />
-      </div>
-    </div>
-  </Transition>
-</template>
-
-<script>
-import { ref, computed, toRef, onMounted, onUnmounted, watch, watchEffect, defineComponent } from "vue";
-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 { useUI } from "../../composables/useUI";
-import { useTimer } from "../../composables/useTimer";
-import { mergeConfig } from "../../utils";
-import appConfig from "#build/app.config";
-import { notification } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.notification, notification);
-export default defineComponent({
-  components: {
-    UIcon,
-    UAvatar,
-    UButton
-  },
-  inheritAttrs: false,
-  props: {
-    id: {
-      type: [String, Number],
-      required: true
-    },
-    title: {
-      type: String,
-      default: null
-    },
-    description: {
-      type: String,
-      default: null
-    },
-    icon: {
-      type: String,
-      default: () => config.default.icon
-    },
-    avatar: {
-      type: Object,
-      default: null
-    },
-    closeButton: {
-      type: Object,
-      default: () => config.default.closeButton
-    },
-    timeout: {
-      type: Number,
-      default: () => config.default.timeout
-    },
-    actions: {
-      type: Array,
-      default: () => []
-    },
-    callback: {
-      type: Function,
-      default: null
-    },
-    color: {
-      type: String,
-      default: () => config.default.color,
-      validator(value) {
-        return ["gray", ...appConfig.ui.colors].includes(value);
-      }
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ["close"],
-  setup(props, { emit }) {
-    const { ui, attrs } = useUI("notification", toRef(props, "ui"), config);
-    let timer = null;
-    const remaining = ref(props.timeout);
-    const wrapperClass = computed(() => {
-      return twMerge(twJoin(
-        ui.value.wrapper,
-        ui.value.background?.replaceAll("{color}", props.color),
-        ui.value.rounded,
-        ui.value.shadow,
-        ui.value.ring?.replaceAll("{color}", props.color)
-      ), props.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");
-    }
-    function initTimer() {
-      if (timer) {
-        timer.stop();
-      }
-      if (!props.timeout) {
-        return;
-      }
-      timer = useTimer(() => {
-        onClose();
-      }, props.timeout);
-      watchEffect(() => {
-        remaining.value = timer.remaining.value;
-      });
-    }
-    watch(() => props.timeout, initTimer);
-    onMounted(initTimer);
-    onUnmounted(() => {
-      if (timer) {
-        timer.stop();
-      }
-    });
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      wrapperClass,
-      progressClass,
-      progressStyle,
-      iconClass,
-      onMouseover,
-      onMouseleave,
-      onClose,
-      onAction,
-      twMerge
-    };
-  }
-});
-</script>