@nuxt/ui 2.18.3 → 3.0.0-alpha.0

package/dist/runtime/components/navigation/Tabs.vue

@@ -1,160 +0,0 @@
-<template>
-  <HTabGroup
-    :vertical="orientation === 'vertical'"
-    :selected-index="selectedIndex"
-    as="div"
-    :class="ui.wrapper"
-    v-bind="attrs"
-    @change="onChange"
-  >
-    <HTabList
-      ref="listRef"
-      :class="[ui.list.base, ui.list.background, ui.list.rounded, ui.list.shadow, ui.list.padding, ui.list.width, orientation === 'horizontal' && ui.list.height, orientation === 'horizontal' && 'inline-grid items-center']"
-      :style="[orientation === 'horizontal' && `grid-template-columns: repeat(${items.length}, minmax(0, 1fr))`]"
-    >
-      <div ref="markerRef" :class="ui.list.marker.wrapper">
-        <div :class="[ui.list.marker.base, ui.list.marker.background, ui.list.marker.rounded, ui.list.marker.shadow]" />
-      </div>
-
-      <HTab
-        v-for="(item, index) of items"
-        :key="index"
-        ref="itemRefs"
-        v-slot="{ selected, disabled }"
-        :disabled="item.disabled"
-        as="template"
-      >
-        <button :class="[ui.list.tab.base, ui.list.tab.background, ui.list.tab.height, ui.list.tab.padding, ui.list.tab.size, ui.list.tab.font, ui.list.tab.rounded, ui.list.tab.shadow, selected ? ui.list.tab.active : ui.list.tab.inactive]">
-          <slot
-            name="icon"
-            :item="item"
-            :index="index"
-            :selected="selected"
-            :disabled="disabled"
-          >
-            <UIcon v-if="item.icon" :name="item.icon" :class="ui.list.tab.icon" />
-          </slot>
-
-          <slot :item="item" :index="index" :selected="selected" :disabled="disabled">
-            <span class="truncate">{{ item.label }}</span>
-          </slot>
-        </button>
-      </HTab>
-    </HTabList>
-
-    <HTabPanels v-if="content" :class="ui.container">
-      <HTabPanel v-for="(item, index) of items" :key="index" v-slot="{ selected }" :class="ui.base" :unmount="unmount">
-        <slot :name="item.slot || 'item'" :item="item" :index="index" :selected="selected">
-          {{ item.content }}
-        </slot>
-      </HTabPanel>
-    </HTabPanels>
-  </HTabGroup>
-</template>
-
-<script>
-import { toRef, ref, watch, onMounted, defineComponent } from "vue";
-import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel, provideUseId } from "@headlessui/vue";
-import { useResizeObserver } from "@vueuse/core";
-import UIcon from "../elements/Icon.vue";
-import { useUI } from "../../composables/useUI";
-import { mergeConfig } from "../../utils";
-import appConfig from "#build/app.config";
-import { tabs } from "#ui/ui.config";
-import { useId } from "#imports";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.tabs, tabs);
-export default defineComponent({
-  components: {
-    UIcon,
-    HTabGroup,
-    HTabList,
-    HTab,
-    HTabPanels,
-    HTabPanel
-  },
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: Number,
-      default: void 0
-    },
-    orientation: {
-      type: String,
-      default: "horizontal",
-      validator: (value) => ["horizontal", "vertical"].includes(value)
-    },
-    defaultIndex: {
-      type: Number,
-      default: 0
-    },
-    items: {
-      type: Array,
-      default: () => []
-    },
-    unmount: {
-      type: Boolean,
-      default: false
-    },
-    content: {
-      type: Boolean,
-      default: true
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(props, { emit }) {
-    const { ui, attrs } = useUI("tabs", toRef(props, "ui"), config, toRef(props, "class"));
-    const listRef = ref();
-    const itemRefs = ref([]);
-    const markerRef = ref();
-    const selectedIndex = ref(props.modelValue || props.defaultIndex);
-    function calcMarkerSize(index) {
-      const tab = itemRefs.value[index]?.$el;
-      if (!tab) {
-        return;
-      }
-      if (!markerRef.value) {
-        return;
-      }
-      markerRef.value.style.top = `${tab.offsetTop}px`;
-      markerRef.value.style.left = `${tab.offsetLeft}px`;
-      markerRef.value.style.width = `${tab.offsetWidth}px`;
-      markerRef.value.style.height = `${tab.offsetHeight}px`;
-    }
-    function onChange(index) {
-      selectedIndex.value = index;
-      emit("change", index);
-      if (props.modelValue !== void 0) {
-        emit("update:modelValue", selectedIndex.value);
-      }
-      calcMarkerSize(selectedIndex.value);
-    }
-    useResizeObserver(listRef, () => {
-      calcMarkerSize(selectedIndex.value);
-    });
-    watch(() => props.modelValue, (value) => {
-      selectedIndex.value = value;
-      calcMarkerSize(selectedIndex.value);
-    });
-    onMounted(() => calcMarkerSize(selectedIndex.value));
-    provideUseId(() => useId());
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      listRef,
-      itemRefs,
-      markerRef,
-      selectedIndex,
-      onChange
-    };
-  }
-});
-</script>

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

@@ -1,165 +0,0 @@
-import type { PropType } from 'vue';
-import type { TabItem, Strategy } from '../../types.js';
-declare const config: {
-    wrapper: string;
-    container: string;
-    base: string;
-    list: {
-        base: string;
-        background: string;
-        rounded: string;
-        shadow: string;
-        padding: string;
-        height: string;
-        width: string;
-        marker: {
-            wrapper: string;
-            base: string;
-            background: string;
-            rounded: string;
-            shadow: string;
-        };
-        tab: {
-            base: string;
-            background: string;
-            active: string;
-            inactive: string;
-            height: string;
-            padding: string;
-            size: string;
-            font: string;
-            rounded: string;
-            shadow: string;
-            icon: string;
-        };
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    modelValue: {
-        type: NumberConstructor;
-        default: any;
-    };
-    orientation: {
-        type: PropType<"horizontal" | "vertical">;
-        default: string;
-        validator: (value: string) => boolean;
-    };
-    defaultIndex: {
-        type: NumberConstructor;
-        default: number;
-    };
-    items: {
-        type: PropType<TabItem[]>;
-        default: () => any[];
-    };
-    unmount: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    content: {
-        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;
-        container: string;
-        base: string;
-        list: {
-            base: string;
-            background: string;
-            rounded: string;
-            shadow: string;
-            padding: string;
-            height: string;
-            width: string;
-            marker: {
-                wrapper: string;
-                base: string;
-                background: string;
-                rounded: string;
-                shadow: string;
-            };
-            tab: {
-                base: string;
-                background: string;
-                active: string;
-                inactive: string;
-                height: string;
-                padding: string;
-                size: string;
-                font: string;
-                rounded: string;
-                shadow: string;
-                icon: string;
-            };
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    listRef: import("vue").Ref<HTMLElement>;
-    itemRefs: import("vue").Ref<HTMLElement[]>;
-    markerRef: import("vue").Ref<HTMLElement>;
-    selectedIndex: import("vue").Ref<number>;
-    onChange: (index: number) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: NumberConstructor;
-        default: any;
-    };
-    orientation: {
-        type: PropType<"horizontal" | "vertical">;
-        default: string;
-        validator: (value: string) => boolean;
-    };
-    defaultIndex: {
-        type: NumberConstructor;
-        default: number;
-    };
-    items: {
-        type: PropType<TabItem[]>;
-        default: () => any[];
-    };
-    unmount: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    content: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>> & {
-    onChange?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-}, {
-    class: any;
-    content: boolean;
-    orientation: "horizontal" | "vertical";
-    ui: {};
-    modelValue: number;
-    unmount: boolean;
-    items: TabItem[];
-    defaultIndex: number;
-}, {}>;
-export default _default;

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

@@ -1,105 +0,0 @@
-<template>
-  <nav :class="ui.wrapper" v-bind="attrs">
-    <ul v-for="(section, sectionIndex) of sections" :key="`section${sectionIndex}`">
-      <li v-for="(link, index) of section" :key="`section${sectionIndex}-${index}`">
-        <ULink
-          v-slot="{ isActive }"
-          v-bind="getULinkProps(link)"
-          :class="[ui.base, ui.padding, ui.width, ui.ring, ui.rounded, ui.font, ui.size]"
-          :active-class="ui.active"
-          :inactive-class="ui.inactive"
-          @click="link.click"
-          @keyup.enter="$event.target.blur()"
-        >
-          <slot name="avatar" :link="link" :is-active="isActive">
-            <UAvatar
-              v-if="link.avatar"
-              v-bind="{ size: ui.avatar.size, ...link.avatar }"
-              :class="[ui.avatar.base]"
-            />
-          </slot>
-          <slot name="icon" :link="link" :is-active="isActive">
-            <UIcon
-              v-if="link.icon"
-              :name="link.icon"
-              :class="twMerge(twJoin(ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive), link.iconClass)"
-            />
-          </slot>
-          <slot :link="link" :is-active="isActive">
-            <span v-if="link.label" :class="twMerge(ui.label, link.labelClass)">
-              <span v-if="isActive" class="sr-only">
-                Current page:
-              </span>
-              {{ link.label }}
-            </span>
-          </slot>
-          <slot name="badge" :link="link" :is-active="isActive">
-            <UBadge
-              v-if="link.badge"
-              v-bind="{
-                size: ui.badge.size,
-                color: ui.badge.color,
-                variant: ui.badge.variant,
-                ...((typeof link.badge === 'string' || typeof link.badge === 'number') ? { label: link.badge } : link.badge)
-              }"
-              :class="ui.badge.base"
-            />
-          </slot>
-        </ULink>
-      </li>
-      <UDivider v-if="sectionIndex < sections.length - 1" :ui="ui.divider" />
-    </ul>
-  </nav>
-</template>
-
-<script>
-import { toRef, defineComponent, computed } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
-import UIcon from "../elements/Icon.vue";
-import UAvatar from "../elements/Avatar.vue";
-import UBadge from "../elements/Badge.vue";
-import ULink from "../elements/Link.vue";
-import UDivider from "../layout/Divider.vue";
-import { useUI } from "../../composables/useUI";
-import { mergeConfig, getULinkProps } from "../../utils";
-import appConfig from "#build/app.config";
-import { verticalNavigation } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.verticalNavigation, verticalNavigation);
-export default defineComponent({
-  components: {
-    UIcon,
-    UAvatar,
-    UBadge,
-    ULink,
-    UDivider
-  },
-  inheritAttrs: false,
-  props: {
-    links: {
-      type: Array,
-      default: () => []
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props) {
-    const { ui, attrs } = useUI("verticalNavigation", toRef(props, "ui"), config, toRef(props, "class"));
-    const sections = computed(() => Array.isArray(props.links[0]) ? props.links : [props.links]);
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      sections,
-      getULinkProps,
-      twMerge,
-      twJoin
-    };
-  }
-});
-</script>

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

@@ -1,113 +0,0 @@
-import type { PropType } from 'vue';
-import { twJoin } from 'tailwind-merge';
-import type { VerticalNavigationLink, Strategy } from '../../types.js';
-declare const config: {
-    wrapper: string;
-    base: string;
-    ring: string;
-    padding: string;
-    width: string;
-    rounded: string;
-    font: string;
-    size: string;
-    active: string;
-    inactive: string;
-    label: string;
-    icon: {
-        base: string;
-        active: string;
-        inactive: string;
-    };
-    avatar: {
-        base: string;
-        size: "2xs";
-    };
-    badge: {
-        base: string;
-        color: "gray";
-        variant: "solid";
-        size: "xs";
-    };
-    divider: {
-        wrapper: {
-            base: string;
-        };
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    links: {
-        type: PropType<VerticalNavigationLink[][] | VerticalNavigationLink[]>;
-        default: () => any[];
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        wrapper: string;
-        base: string;
-        ring: string;
-        padding: string;
-        width: string;
-        rounded: string;
-        font: string;
-        size: string;
-        active: string;
-        inactive: string;
-        label: string;
-        icon: {
-            base: string;
-            active: string;
-            inactive: string;
-        };
-        avatar: {
-            base: string;
-            size: "2xs";
-        };
-        badge: {
-            base: string;
-            color: "gray";
-            variant: "solid";
-            size: "xs";
-        };
-        divider: {
-            wrapper: {
-                base: string;
-            };
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    sections: import("vue").ComputedRef<VerticalNavigationLink[][]>;
-    getULinkProps: (props: any) => {};
-    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
-    twJoin: typeof twJoin;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    links: {
-        type: PropType<VerticalNavigationLink[][] | VerticalNavigationLink[]>;
-        default: () => any[];
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>>, {
-    class: any;
-    ui: {};
-    links: VerticalNavigationLink[] | VerticalNavigationLink[][];
-}, {}>;
-export default _default;

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

@@ -1,85 +0,0 @@
-<template>
-  <div v-if="isOpen" ref="container" :class="wrapperClass" v-bind="attrs">
-    <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.ring, ui.rounded, ui.shadow, ui.background]">
-          <slot />
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<script>
-import { computed, toRef, defineComponent } from "vue";
-import { defu } from "defu";
-import { onClickOutside } from "@vueuse/core";
-import { twMerge, twJoin } from "tailwind-merge";
-import { useUI } from "../../composables/useUI";
-import { usePopper } from "../../composables/usePopper";
-import { mergeConfig } from "../../utils";
-import appConfig from "#build/app.config";
-import { contextMenu } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.contextMenu, contextMenu);
-export default defineComponent({
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false
-    },
-    virtualElement: {
-      type: Object,
-      required: true
-    },
-    popper: {
-      type: Object,
-      default: () => ({})
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ["update:modelValue", "close"],
-  setup(props, { emit }) {
-    const { ui, attrs } = useUI("contextMenu", toRef(props, "ui"), config);
-    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
-      ), props.class);
-    });
-    onClickOutside(container, () => {
-      isOpen.value = false;
-    });
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      isOpen,
-      wrapperClass,
-      // eslint-disable-next-line vue/no-dupe-keys
-      popper,
-      container
-    };
-  }
-});
-</script>