@nuxt/ui 2.18.4 → 3.0.0-alpha.1

package/dist/runtime/components/elements/ButtonGroup.d.ts

@@ -1,153 +0,0 @@
-import type { PropType } from 'vue';
-import type { ButtonSize, Strategy } from '../../types/index.js';
-declare const buttonGroupConfig: {
-    wrapper: {
-        horizontal: string;
-        vertical: string;
-    };
-    rounded: string;
-    shadow: string;
-    orientation: {
-        'rounded-none': {
-            horizontal: {
-                start: string;
-                end: string;
-            };
-            vertical: {
-                start: string;
-                end: string;
-            };
-        };
-        'rounded-sm': {
-            horizontal: {
-                start: string;
-                end: string;
-            };
-            vertical: {
-                start: string;
-                end: string;
-            };
-        };
-        rounded: {
-            horizontal: {
-                start: string;
-                end: string;
-            };
-            vertical: {
-                start: string;
-                end: string;
-            };
-        };
-        'rounded-md': {
-            horizontal: {
-                start: string;
-                end: string;
-            };
-            vertical: {
-                start: string;
-                end: string;
-            };
-        };
-        'rounded-lg': {
-            horizontal: {
-                start: string;
-                end: string;
-            };
-            vertical: {
-                start: string;
-                end: string;
-            };
-        };
-        'rounded-xl': {
-            horizontal: {
-                start: string;
-                end: string;
-            };
-            vertical: {
-                start: string;
-                end: string;
-            };
-        };
-        'rounded-2xl': {
-            horizontal: {
-                start: string;
-                end: string;
-            };
-            vertical: {
-                start: string;
-                end: string;
-            };
-        };
-        'rounded-3xl': {
-            horizontal: {
-                start: string;
-                end: string;
-            };
-            vertical: {
-                start: string;
-                end: string;
-            };
-        };
-        'rounded-full': {
-            horizontal: {
-                start: string;
-                end: string;
-            };
-            vertical: {
-                start: string;
-                end: string;
-            };
-        };
-    };
-};
-declare const _default: import("@vue/runtime-core").DefineComponent<{
-    size: {
-        type: PropType<ButtonSize>;
-        default: any;
-        validator(value: string): boolean;
-    };
-    orientation: {
-        type: PropType<"horizontal" | "vertical">;
-        default: string;
-        validator(value: string): boolean;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof buttonGroupConfig> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, () => import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
-    size: {
-        type: PropType<ButtonSize>;
-        default: any;
-        validator(value: string): boolean;
-    };
-    orientation: {
-        type: PropType<"horizontal" | "vertical">;
-        default: string;
-        validator(value: string): boolean;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof buttonGroupConfig> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>>, {
-    orientation: "horizontal" | "vertical";
-    size: ButtonSize;
-    ui: {};
-    class: any;
-}, {}>;
-export default _default;

package/dist/runtime/components/elements/ButtonGroup.js

@@ -1,51 +0,0 @@
-import { h, computed, toRef, defineComponent } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
-import { useUI } from "../../composables/useUI.js";
-import { mergeConfig, getSlotsChildren } from "../../utils/index.js";
-import { useProvideButtonGroup } from "../../composables/useButtonGroup.js";
-import appConfig from "#build/app.config";
-import { button, buttonGroup } from "#ui/ui.config";
-const buttonConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.button, button);
-const buttonGroupConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.buttonGroup, buttonGroup);
-export default defineComponent({
-  name: "ButtonGroup",
-  inheritAttrs: false,
-  props: {
-    size: {
-      type: String,
-      default: null,
-      validator(value) {
-        return Object.keys(buttonConfig.size).includes(value);
-      }
-    },
-    orientation: {
-      type: String,
-      default: "horizontal",
-      validator(value) {
-        return ["horizontal", "vertical"].includes(value);
-      }
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props, { slots }) {
-    const { ui, attrs } = useUI("buttonGroup", toRef(props, "ui"), buttonGroupConfig);
-    const children = computed(() => getSlotsChildren(slots));
-    const wrapperClass = computed(() => {
-      return twMerge(twJoin(
-        ui.value.wrapper[props.orientation],
-        ui.value.rounded,
-        ui.value.shadow
-      ), props.class);
-    });
-    const rounded = computed(() => ui.value.orientation[ui.value.rounded][props.orientation]);
-    useProvideButtonGroup({ orientation: toRef(props, "orientation"), size: toRef(props, "size"), ui, rounded });
-    return () => h("div", { class: wrapperClass.value, ...attrs.value }, children.value);
-  }
-});

package/dist/runtime/components/elements/Carousel.vue

@@ -1,165 +0,0 @@
-<template>
-  <div :class="ui.wrapper" v-bind="attrs">
-    <div ref="carouselRef" :class="ui.container" class="no-scrollbar">
-      <div
-        v-for="(item, index) in items"
-        :key="index"
-        :class="ui.item"
-        :role="indicators ? 'tabpanel' : null"
-      >
-        <slot :item="item" :index="index" />
-      </div>
-    </div>
-
-    <div v-if="arrows" :class="ui.arrows.wrapper">
-      <slot name="prev" :on-click="onClickPrev" :disabled="isFirst">
-        <UButton
-          v-if="prevButton"
-          :disabled="isFirst"
-          v-bind="{ ...ui.default.prevButton, ...prevButton }"
-          :class="twMerge(ui.default.prevButton.class, prevButton?.class)"
-          aria-label="Prev"
-          @click="onClickPrev"
-        />
-      </slot>
-
-      <slot name="next" :on-click="onClickNext" :disabled="isLast">
-        <UButton
-          v-if="nextButton"
-          :disabled="isLast"
-          v-bind="{ ...ui.default.nextButton, ...nextButton }"
-          :class="twMerge(ui.default.nextButton.class, nextButton?.class)"
-          aria-label="Next"
-          @click="onClickNext"
-        />
-      </slot>
-    </div>
-
-    <div v-if="indicators" role="tablist" :class="ui.indicators.wrapper">
-      <template v-for="page in pages" :key="page">
-        <slot name="indicator" :on-click="onClick" :active="page === currentPage" :page="page">
-          <button
-            type="button"
-            role="tab"
-            :aria-selected="page === currentPage"
-            :class="[
-              ui.indicators.base,
-              page === currentPage ? ui.indicators.active : ui.indicators.inactive
-            ]"
-            :aria-label="`set slide ${page}`"
-            @click="onClick(page)"
-          />
-        </slot>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref, toRef, computed, defineComponent } from "vue";
-import { twMerge } from "tailwind-merge";
-import { mergeConfig } from "../../utils";
-import UButton from "../elements/Button.vue";
-import { useUI } from "../../composables/useUI";
-import { useCarouselScroll } from "../../composables/useCarouselScroll";
-import { useScroll, useResizeObserver, useElementSize } from "@vueuse/core";
-import appConfig from "#build/app.config";
-import { carousel } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.carousel, carousel);
-export default defineComponent({
-  components: {
-    UButton
-  },
-  inheritAttrs: false,
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    arrows: {
-      type: Boolean,
-      default: false
-    },
-    indicators: {
-      type: Boolean,
-      default: false
-    },
-    prevButton: {
-      type: Object,
-      default: () => config.default.prevButton
-    },
-    nextButton: {
-      type: Object,
-      default: () => config.default.nextButton
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: void 0
-    }
-  },
-  setup(props, { expose }) {
-    const { ui, attrs } = useUI("carousel", toRef(props, "ui"), config, toRef(props, "class"));
-    const carouselRef = ref();
-    const itemWidth = ref(0);
-    const { x } = useScroll(carouselRef, { behavior: "smooth" });
-    const { width: carouselWidth } = useElementSize(carouselRef);
-    useCarouselScroll(carouselRef);
-    useResizeObserver(carouselRef, (entries) => {
-      const [entry] = entries;
-      itemWidth.value = entry?.target?.firstElementChild?.clientWidth || 0;
-    });
-    const currentPage = computed(() => {
-      if (!itemWidth.value) {
-        return 0;
-      }
-      return Math.round(x.value / itemWidth.value) + 1;
-    });
-    const pages = computed(() => {
-      if (!itemWidth.value) {
-        return 0;
-      }
-      return props.items.length - Math.round(carouselWidth.value / itemWidth.value) + 1;
-    });
-    const isFirst = computed(() => currentPage.value <= 1);
-    const isLast = computed(() => currentPage.value === pages.value);
-    function onClickNext() {
-      x.value += itemWidth.value;
-    }
-    function onClickPrev() {
-      x.value -= itemWidth.value;
-    }
-    function onClick(page) {
-      x.value = (page - 1) * itemWidth.value;
-    }
-    expose({
-      pages,
-      page: currentPage,
-      prev: onClickPrev,
-      next: onClickNext,
-      select: onClick
-    });
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      isFirst,
-      isLast,
-      carouselRef,
-      pages,
-      currentPage,
-      onClickNext,
-      onClickPrev,
-      onClick,
-      twMerge
-    };
-  }
-});
-</script>
-
-<style scoped>
-.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
-</style>

package/dist/runtime/components/elements/Carousel.vue.d.ts

@@ -1,159 +0,0 @@
-import type { PropType } from 'vue';
-import type { Strategy, Button } from '../../types/index.js';
-declare const config: {
-    wrapper: string;
-    container: string;
-    item: string;
-    arrows: {
-        wrapper: string;
-    };
-    indicators: {
-        wrapper: string;
-        base: string;
-        active: string;
-        inactive: string;
-    };
-    default: {
-        prevButton: {
-            color: "black";
-            class: string;
-            icon: string;
-        };
-        nextButton: {
-            color: "black";
-            class: string;
-            icon: string;
-        };
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    items: {
-        type: PropType<any[]>;
-        default: () => any[];
-    };
-    arrows: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    indicators: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    prevButton: {
-        type: PropType<Button & {
-            class?: string;
-        }>;
-        default: () => Button & {
-            class?: string;
-        };
-    };
-    nextButton: {
-        type: PropType<Button & {
-            class?: string;
-        }>;
-        default: () => Button & {
-            class?: string;
-        };
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config & {
-            strategy?: Strategy;
-        }>>;
-        default: any;
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        wrapper: string;
-        container: string;
-        item: string;
-        arrows: {
-            wrapper: string;
-        };
-        indicators: {
-            wrapper: string;
-            base: string;
-            active: string;
-            inactive: string;
-        };
-        default: {
-            prevButton: {
-                color: "black";
-                class: string;
-                icon: string;
-            };
-            nextButton: {
-                color: "black";
-                class: string;
-                icon: string;
-            };
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    isFirst: import("vue").ComputedRef<boolean>;
-    isLast: import("vue").ComputedRef<boolean>;
-    carouselRef: import("vue").Ref<HTMLElement>;
-    pages: import("vue").ComputedRef<number>;
-    currentPage: import("vue").ComputedRef<number>;
-    onClickNext: () => void;
-    onClickPrev: () => void;
-    onClick: (page: number) => void;
-    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    items: {
-        type: PropType<any[]>;
-        default: () => any[];
-    };
-    arrows: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    indicators: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    prevButton: {
-        type: PropType<Button & {
-            class?: string;
-        }>;
-        default: () => Button & {
-            class?: string;
-        };
-    };
-    nextButton: {
-        type: PropType<Button & {
-            class?: string;
-        }>;
-        default: () => Button & {
-            class?: string;
-        };
-    };
-    class: {
-        type: PropType<any>;
-        default: () => string;
-    };
-    ui: {
-        type: PropType<Partial<typeof config & {
-            strategy?: Strategy;
-        }>>;
-        default: any;
-    };
-}>>, {
-    class: any;
-    ui: any;
-    items: any[];
-    arrows: boolean;
-    indicators: boolean;
-    prevButton: Button & {
-        class?: string;
-    };
-    nextButton: Button & {
-        class?: string;
-    };
-}, {}>;
-export default _default;

package/dist/runtime/components/elements/Chip.vue

@@ -1,85 +0,0 @@
-<template>
-  <div :class="ui.wrapper" v-bind="attrs">
-    <slot />
-
-    <span v-if="show" :class="chipClass">
-      <slot name="content">
-        {{ text }}
-      </slot>
-    </span>
-  </div>
-</template>
-
-<script>
-import { defineComponent, computed, toRef } from "vue";
-import { twJoin } from "tailwind-merge";
-import { useUI } from "../../composables/useUI";
-import { mergeConfig } from "../../utils";
-import appConfig from "#build/app.config";
-import { chip } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.chip, chip);
-export default defineComponent({
-  inheritAttrs: false,
-  props: {
-    size: {
-      type: String,
-      default: () => config.default.size,
-      validator(value) {
-        return Object.keys(config.size).includes(value);
-      }
-    },
-    color: {
-      type: String,
-      default: () => config.default.color,
-      validator(value) {
-        return ["gray", ...appConfig.ui.colors].includes(value);
-      }
-    },
-    position: {
-      type: String,
-      default: () => config.default.position,
-      validator(value) {
-        return Object.keys(config.position).includes(value);
-      }
-    },
-    text: {
-      type: [String, Number],
-      default: null
-    },
-    inset: {
-      type: Boolean,
-      default: () => config.default.inset
-    },
-    show: {
-      type: Boolean,
-      default: true
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props) {
-    const { ui, attrs } = useUI("chip", toRef(props, "ui"), config, toRef(props, "class"));
-    const chipClass = computed(() => {
-      return twJoin(
-        ui.value.base,
-        ui.value.size[props.size],
-        ui.value.position[props.position],
-        props.inset ? null : ui.value.translate[props.position],
-        ui.value.background.replaceAll("{color}", props.color)
-      );
-    });
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      chipClass
-    };
-  }
-});
-</script>