@nuxt/ui 0.4.1 → 2.8.1

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

@@ -0,0 +1,63 @@
+import type { PropType } from 'vue';
+import type { Group } from '../../types/command-palette';
+declare const _default: import("vue").DefineComponent<{
+    group: {
+        type: PropType<Group>;
+        required: true;
+    };
+    query: {
+        type: StringConstructor;
+        default: string;
+    };
+    groupAttribute: {
+        type: StringConstructor;
+        required: true;
+    };
+    commandAttribute: {
+        type: StringConstructor;
+        required: true;
+    };
+    selectedIcon: {
+        type: StringConstructor;
+        required: true;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    label: import("vue").ComputedRef<any>;
+    highlight: (text: string, { indices, value }: {
+        indices: number[][];
+        value: string;
+    }) => string;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    group: {
+        type: PropType<Group>;
+        required: true;
+    };
+    query: {
+        type: StringConstructor;
+        default: string;
+    };
+    groupAttribute: {
+        type: StringConstructor;
+        required: true;
+    };
+    commandAttribute: {
+        type: StringConstructor;
+        required: true;
+    };
+    selectedIcon: {
+        type: StringConstructor;
+        required: true;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    ui: any;
+    query: string;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,197 @@
+<template>
+  <div :class="wrapperClass" v-bind="attrs">
+    <slot name="prev" :on-click="onClickPrev">
+      <UButton
+        v-if="prevButton"
+        :size="size"
+        :disabled="!canGoPrev"
+        :class="[ui.base, ui.rounded]"
+        v-bind="{ ...ui.default.prevButton, ...prevButton }"
+        :ui="{ rounded: '' }"
+        @click="onClickPrev"
+      />
+    </slot>
+
+    <UButton
+      v-for="(page, index) of displayedPages"
+      :key="`${page}-${index}`"
+      :size="size"
+      :label="`${page}`"
+      v-bind="page === currentPage ? { ...ui.default.activeButton, ...activeButton } : { ...ui.default.inactiveButton, ...inactiveButton }"
+      :class="[{ 'pointer-events-none': typeof page === 'string', 'z-[1]': page === currentPage }, ui.base, ui.rounded]"
+      :ui="{ rounded: '' }"
+      @click="() => onClickPage(page)"
+    />
+
+    <slot name="next" :on-click="onClickNext">
+      <UButton
+        v-if="nextButton"
+        :size="size"
+        :disabled="!canGoNext"
+        :class="[ui.base, ui.rounded]"
+        v-bind="{ ...ui.default.nextButton, ...nextButton }"
+        :ui="{ rounded: '' }"
+        @click="onClickNext"
+      />
+    </slot>
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent } from "vue";
+import { omit } from "lodash-es";
+import { twMerge } from "tailwind-merge";
+import UButton from "../elements/Button.vue";
+import { defuTwMerge } from "../../utils";
+import { useAppConfig } from "#imports";
+import appConfig from "#build/app.config";
+export default defineComponent({
+  components: {
+    UButton
+  },
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: Number,
+      required: true
+    },
+    pageCount: {
+      type: Number,
+      default: 10
+    },
+    total: {
+      type: Number,
+      required: true
+    },
+    max: {
+      type: Number,
+      default: 7,
+      validate(value) {
+        return value >= 7 && value < Number.MAX_VALUE;
+      }
+    },
+    size: {
+      type: String,
+      default: () => appConfig.ui.pagination.default.size,
+      validator(value) {
+        return Object.keys(appConfig.ui.button.size).includes(value);
+      }
+    },
+    activeButton: {
+      type: Object,
+      default: () => appConfig.ui.pagination.default.activeButton
+    },
+    inactiveButton: {
+      type: Object,
+      default: () => appConfig.ui.pagination.default.inactiveButton
+    },
+    prevButton: {
+      type: Object,
+      default: () => appConfig.ui.pagination.default.prevButton
+    },
+    nextButton: {
+      type: Object,
+      default: () => appConfig.ui.pagination.default.nextButton
+    },
+    divider: {
+      type: String,
+      default: "\u2026"
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { attrs, emit }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.pagination));
+    const currentPage = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(value) {
+        emit("update:modelValue", value);
+      }
+    });
+    const pages = computed(() => Array.from({ length: Math.ceil(props.total / props.pageCount) }, (_, i) => i + 1));
+    const displayedPages = computed(() => {
+      if (!props.max || pages.value.length <= 5) {
+        return pages.value;
+      } else {
+        const current = currentPage.value;
+        const max = pages.value.length;
+        const r = Math.floor((Math.min(props.max, max) - 5) / 2);
+        const r1 = current - r;
+        const r2 = current + r;
+        const beforeWrapped = r1 - 1 > 1;
+        const afterWrapped = r2 + 1 < max;
+        const items = [1];
+        if (beforeWrapped)
+          items.push(props.divider);
+        if (!afterWrapped) {
+          const addedItems = current + r + 2 - max;
+          for (let i = current - r - addedItems; i <= current - r - 1; i++) {
+            items.push(i);
+          }
+        }
+        for (let i = r1 > 2 ? r1 : 2; i <= Math.min(max, r2); i++) {
+          items.push(i);
+        }
+        if (!beforeWrapped) {
+          const addedItems = 1 - (current - r - 2);
+          for (let i = current + r + 1; i <= current + r + addedItems; i++) {
+            items.push(i);
+          }
+        }
+        if (afterWrapped)
+          items.push(props.divider);
+        if (r2 < max)
+          items.push(max);
+        if (items.length >= 3 && items[1] === props.divider && items[2] === 3) {
+          items[1] = 2;
+        }
+        if (items.length >= 3 && items[items.length - 2] === props.divider && items[items.length - 1] === items.length) {
+          items[items.length - 2] = items.length - 1;
+        }
+        return items;
+      }
+    });
+    const canGoPrev = computed(() => currentPage.value > 1);
+    const canGoNext = computed(() => currentPage.value < pages.value.length);
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
+    function onClickPage(page) {
+      if (typeof page === "string") {
+        return;
+      }
+      currentPage.value = page;
+    }
+    function onClickPrev() {
+      if (!canGoPrev.value) {
+        return;
+      }
+      currentPage.value--;
+    }
+    function onClickNext() {
+      if (!canGoNext.value) {
+        return;
+      }
+      currentPage.value++;
+    }
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      currentPage,
+      pages,
+      displayedPages,
+      canGoPrev,
+      canGoNext,
+      wrapperClass,
+      onClickPrev,
+      onClickNext,
+      onClickPage
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,125 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+import type { Button } from '../../types/button';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: NumberConstructor;
+        required: true;
+    };
+    pageCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    total: {
+        type: NumberConstructor;
+        required: true;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+        validate(value: any): boolean;
+    };
+    size: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    activeButton: {
+        type: PropType<Button>;
+        default: () => any;
+    };
+    inactiveButton: {
+        type: PropType<Button>;
+        default: () => any;
+    };
+    prevButton: {
+        type: PropType<Button>;
+        default: () => any;
+    };
+    nextButton: {
+        type: PropType<Button>;
+        default: () => any;
+    };
+    divider: {
+        type: StringConstructor;
+        default: string;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    currentPage: import("vue").WritableComputedRef<number>;
+    pages: import("vue").ComputedRef<number[]>;
+    displayedPages: import("vue").ComputedRef<(string | number)[]>;
+    canGoPrev: import("vue").ComputedRef<boolean>;
+    canGoNext: import("vue").ComputedRef<boolean>;
+    wrapperClass: import("vue").ComputedRef<string>;
+    onClickPrev: () => void;
+    onClickNext: () => void;
+    onClickPage: (page: number | string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        required: true;
+    };
+    pageCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    total: {
+        type: NumberConstructor;
+        required: true;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+        validate(value: any): boolean;
+    };
+    size: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    activeButton: {
+        type: PropType<Button>;
+        default: () => any;
+    };
+    inactiveButton: {
+        type: PropType<Button>;
+        default: () => any;
+    };
+    prevButton: {
+        type: PropType<Button>;
+        default: () => any;
+    };
+    nextButton: {
+        type: PropType<Button>;
+        default: () => any;
+    };
+    divider: {
+        type: StringConstructor;
+        default: string;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    ui: any;
+    size: string;
+    max: number;
+    pageCount: number;
+    activeButton: Button;
+    inactiveButton: Button;
+    prevButton: Button;
+    nextButton: Button;
+    divider: string;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,138 @@
+<template>
+  <HTabGroup
+    :vertical="orientation === 'vertical'"
+    :selected-index="selectedIndex"
+    as="div"
+    :class="wrapperClass"
+    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 :item="item" :index="index" :selected="selected" :disabled="disabled">
+            {{ item.label }}
+          </slot>
+        </button>
+      </HTab>
+    </HTabList>
+
+    <HTabPanels :class="ui.container">
+      <HTabPanel
+        v-for="(item, index) of items"
+        :key="index"
+        v-slot="{ selected }"
+        :class="ui.base"
+      >
+        <slot :name="item.slot || 'item'" :item="item" :index="index" :selected="selected">
+          {{ item.content }}
+        </slot>
+      </HTabPanel>
+    </HTabPanels>
+  </HTabGroup>
+</template>
+
+<script>
+import { ref, computed, watch, onMounted, defineComponent } from "vue";
+import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel } from "@headlessui/vue";
+import { useResizeObserver } from "@vueuse/core";
+import { omit } from "lodash-es";
+import { twMerge } from "tailwind-merge";
+import { defuTwMerge } from "../../utils";
+import { useAppConfig } from "#imports";
+export default defineComponent({
+  components: {
+    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: () => []
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { attrs, emit }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.tabs));
+    const listRef = ref();
+    const itemRefs = ref([]);
+    const markerRef = ref();
+    const selectedIndex = ref(props.modelValue || props.defaultIndex);
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
+    function calcMarkerSize(index) {
+      const tab = itemRefs.value[index]?.$el;
+      if (!tab) {
+        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", index);
+      }
+      calcMarkerSize(index);
+    }
+    useResizeObserver(listRef, () => {
+      calcMarkerSize(selectedIndex.value);
+    });
+    watch(() => props.modelValue, (value) => {
+      selectedIndex.value = value;
+      calcMarkerSize(value);
+    });
+    onMounted(() => calcMarkerSize(selectedIndex.value));
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      listRef,
+      itemRefs,
+      markerRef,
+      selectedIndex,
+      wrapperClass,
+      onChange
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,69 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+import type { TabItem } from '../../types/tabs';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    defaultIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    items: {
+        type: PropType<TabItem[]>;
+        default: () => never[];
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    listRef: import("vue").Ref<HTMLElement | undefined>;
+    itemRefs: import("vue").Ref<HTMLElement[]>;
+    markerRef: import("vue").Ref<HTMLElement | undefined>;
+    selectedIndex: import("vue").Ref<number>;
+    wrapperClass: import("vue").ComputedRef<string>;
+    onChange: (index: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    defaultIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    items: {
+        type: PropType<TabItem[]>;
+        default: () => never[];
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    ui: any;
+    modelValue: number;
+    items: TabItem[];
+    orientation: "horizontal" | "vertical";
+    defaultIndex: number;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,79 @@
+<template>
+  <nav :class="wrapperClass" v-bind="attrs">
+    <ULink
+      v-for="(link, index) of links"
+      v-slot="{ isActive }"
+      :key="index"
+      v-bind="omit(link, ['label', 'icon', 'iconClass', 'avatar', 'badge', 'click'])"
+      :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="[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="ui.label">{{ link.label }}</span>
+      </slot>
+      <slot name="badge" :link="link" :is-active="isActive">
+        <span v-if="link.badge" :class="[ui.badge.base, isActive ? ui.badge.active : ui.badge.inactive]">
+          {{ link.badge }}
+        </span>
+      </slot>
+    </ULink>
+  </nav>
+</template>
+
+<script>
+import { computed, defineComponent } from "vue";
+import { omit } from "lodash-es";
+import { twMerge } from "tailwind-merge";
+import UIcon from "../elements/Icon.vue";
+import UAvatar from "../elements/Avatar.vue";
+import ULink from "../elements/Link.vue";
+import { defuTwMerge } from "../../utils";
+import { useAppConfig } from "#imports";
+export default defineComponent({
+  components: {
+    UIcon,
+    UAvatar,
+    ULink
+  },
+  inheritAttrs: false,
+  props: {
+    links: {
+      type: Array,
+      default: () => []
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { attrs }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.verticalNavigation));
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      wrapperClass,
+      omit
+    };
+  }
+});
+</script>