@nuxt/ui 0.4.1 → 2.8.1

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

@@ -0,0 +1,172 @@
+<template>
+  <HMenu v-slot="{ open }" as="div" :class="wrapperClass" v-bind="attrs" @mouseleave="onMouseLeave">
+    <HMenuButton
+      ref="trigger"
+      as="div"
+      :disabled="disabled"
+      class="inline-flex w-full"
+      role="button"
+      @mouseover="onMouseOver"
+    >
+      <slot :open="open" :disabled="disabled">
+        <button :disabled="disabled">
+          Open
+        </button>
+      </slot>
+    </HMenuButton>
+
+    <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
+      <Transition appear v-bind="ui.transition">
+        <HMenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
+          <div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
+            <HMenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled">
+              <ULink
+                v-bind="omit(item, ['label', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'click'])"
+                :class="[ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
+                @click="item.click"
+              >
+                <slot :name="item.slot || 'item'" :item="item">
+                  <UIcon v-if="item.icon" :name="item.icon" :class="[ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive, item.iconClass]" />
+                  <UAvatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
+
+                  <span class="truncate">{{ item.label }}</span>
+
+                  <span v-if="item.shortcuts?.length" :class="ui.item.shortcuts">
+                    <UKbd v-for="shortcut of item.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>
+                  </span>
+                </slot>
+              </ULink>
+            </HMenuItem>
+          </div>
+        </HMenuItems>
+      </Transition>
+    </div>
+  </HMenu>
+</template>
+
+<script>
+import { defineComponent, ref, computed, onMounted } from "vue";
+import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem } from "@headlessui/vue";
+import { defu } from "defu";
+import { omit } from "lodash-es";
+import { twMerge } from "tailwind-merge";
+import UIcon from "../elements/Icon.vue";
+import UAvatar from "../elements/Avatar.vue";
+import UKbd from "../elements/Kbd.vue";
+import ULink from "../elements/Link.vue";
+import { usePopper } from "../../composables/usePopper";
+import { defuTwMerge } from "../../utils";
+import { useAppConfig } from "#imports";
+export default defineComponent({
+  components: {
+    HMenu,
+    HMenuButton,
+    HMenuItems,
+    HMenuItem,
+    UIcon,
+    UAvatar,
+    UKbd,
+    ULink
+  },
+  inheritAttrs: false,
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    mode: {
+      type: String,
+      default: "click",
+      validator: (value) => ["click", "hover"].includes(value)
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    popper: {
+      type: Object,
+      default: () => ({})
+    },
+    openDelay: {
+      type: Number,
+      default: 0
+    },
+    closeDelay: {
+      type: Number,
+      default: 0
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { attrs }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.dropdown));
+    const popper = computed(() => defu(props.mode === "hover" ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper));
+    const [trigger, container] = usePopper(popper.value);
+    const menuApi = ref(null);
+    let openTimeout = null;
+    let closeTimeout = null;
+    onMounted(() => {
+      setTimeout(() => {
+        const menuProvides = trigger.value?.$.provides;
+        if (!menuProvides) {
+          return;
+        }
+        const menuProvidesSymbols = Object.getOwnPropertySymbols(menuProvides);
+        menuApi.value = menuProvidesSymbols.length && menuProvides[menuProvidesSymbols[0]];
+      }, 200);
+    });
+    const containerStyle = computed(() => {
+      const offsetDistance = props.popper?.offsetDistance || ui.value.popper?.offsetDistance || 8;
+      return props.mode === "hover" ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {};
+    });
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
+    function onMouseOver() {
+      if (props.mode !== "hover" || !menuApi.value) {
+        return;
+      }
+      if (closeTimeout) {
+        clearTimeout(closeTimeout);
+        closeTimeout = null;
+      }
+      if (menuApi.value.menuState === 0) {
+        return;
+      }
+      openTimeout = openTimeout || setTimeout(() => {
+        menuApi.value.openMenu && menuApi.value.openMenu();
+        openTimeout = null;
+      }, props.openDelay);
+    }
+    function onMouseLeave() {
+      if (props.mode !== "hover" || !menuApi.value) {
+        return;
+      }
+      if (openTimeout) {
+        clearTimeout(openTimeout);
+        openTimeout = null;
+      }
+      if (menuApi.value.menuState === 1) {
+        return;
+      }
+      closeTimeout = closeTimeout || setTimeout(() => {
+        menuApi.value.closeMenu && menuApi.value.closeMenu();
+        closeTimeout = null;
+      }, props.closeDelay);
+    }
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      trigger,
+      container,
+      containerStyle,
+      wrapperClass,
+      onMouseOver,
+      onMouseLeave,
+      omit
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,96 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+import type { DropdownItem } from '../../types/dropdown';
+import type { PopperOptions } from '../../types/popper';
+declare const _default: import("vue").DefineComponent<{
+    items: {
+        type: PropType<DropdownItem[][]>;
+        default: () => never[];
+    };
+    mode: {
+        type: PropType<"click" | "hover">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    popper: {
+        type: PropType<PopperOptions>;
+        default: () => {};
+    };
+    openDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    closeDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
+    container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
+    containerStyle: import("vue").ComputedRef<{
+        paddingTop: string;
+        paddingBottom: string;
+    } | {
+        paddingTop?: undefined;
+        paddingBottom?: undefined;
+    }>;
+    wrapperClass: import("vue").ComputedRef<string>;
+    onMouseOver: () => void;
+    onMouseLeave: () => void;
+    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<{
+    items: {
+        type: PropType<DropdownItem[][]>;
+        default: () => never[];
+    };
+    mode: {
+        type: PropType<"click" | "hover">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    popper: {
+        type: PropType<PopperOptions>;
+        default: () => {};
+    };
+    openDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    closeDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    ui: any;
+    popper: PopperOptions;
+    disabled: boolean;
+    items: DropdownItem[][];
+    mode: "click" | "hover";
+    openDelay: number;
+    closeDelay: number;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,15 @@
+<template>
+  <span :class="name" />
+</template>
+
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
+  }
+});
+</script>

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

@@ -0,0 +1,12 @@
+declare const _default: import("vue").DefineComponent<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}, {}>;
+export default _default;

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

@@ -0,0 +1,55 @@
+<template>
+  <kbd :class="kbdClass" v-bind="attrs">
+    <slot>{{ value }}</slot>
+  </kbd>
+</template>
+
+<script>
+import { defineComponent, computed } from "vue";
+import { omit } from "lodash-es";
+import { twMerge, twJoin } from "tailwind-merge";
+import { defuTwMerge } from "../../utils";
+import { useAppConfig } from "#imports";
+import appConfig from "#build/app.config";
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: String,
+      default: null
+    },
+    size: {
+      type: String,
+      default: () => appConfig.ui.kbd.default.size,
+      validator(value) {
+        return Object.keys(appConfig.ui.kbd.size).includes(value);
+      }
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { attrs }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.kbd));
+    const kbdClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.base,
+        ui.value.size[props.size],
+        ui.value.padding,
+        ui.value.rounded,
+        ui.value.font,
+        ui.value.background,
+        ui.value.ring
+      ), attrs.class);
+    });
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      kbdClass
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,42 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: StringConstructor;
+        default: null;
+    };
+    size: {
+        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>;
+    kbdClass: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: null;
+    };
+    size: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    ui: any;
+    value: string;
+    size: string;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,80 @@
+<template>
+  <button v-if="!to" :type="type" :disabled="disabled" v-bind="$attrs" :class="inactiveClass">
+    <slot />
+  </button>
+  <NuxtLink
+    v-else
+    v-slot="{ route, href, target, rel, navigate, isActive, isExactActive, isExternal }"
+    v-bind="$props"
+    custom
+  >
+    <a
+      v-bind="$attrs"
+      :href="!disabled ? href : undefined"
+      :aria-disabled="disabled ? 'true' : undefined"
+      :role="disabled ? 'link' : undefined"
+      :rel="rel"
+      :target="target"
+      :class="resolveLinkClass(route, $route, { isActive, isExactActive })"
+      @click="(e) => !isExternal && navigate(e)"
+    >
+      <slot v-bind="{ isActive: exact ? isExactActive : isActive }" />
+    </a>
+  </NuxtLink>
+</template>
+
+<script>
+import { isEqual } from "lodash-es";
+import { defineComponent } from "vue";
+import { NuxtLink } from "#components";
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    ...NuxtLink.props,
+    type: {
+      type: String,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: null
+    },
+    exact: {
+      type: Boolean,
+      default: false
+    },
+    exactQuery: {
+      type: Boolean,
+      default: false
+    },
+    exactHash: {
+      type: Boolean,
+      default: false
+    },
+    inactiveClass: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props) {
+    function resolveLinkClass(route, $route, { isActive, isExactActive }) {
+      if (props.exactQuery && !isEqual(route.query, $route.query)) {
+        return props.inactiveClass;
+      }
+      if (props.exactHash && route.hash !== $route.hash) {
+        return props.inactiveClass;
+      }
+      if (props.exact && isExactActive) {
+        return props.activeClass;
+      }
+      if (!props.exact && isActive) {
+        return props.activeClass;
+      }
+      return props.inactiveClass;
+    }
+    return {
+      resolveLinkClass
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,9 @@
+declare const _default: import("vue").DefineComponent<any, {
+    resolveLinkClass: (route: any, $route: any, { isActive, isExactActive }: {
+        isActive: boolean;
+        isExactActive: boolean;
+    }) => any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<any>, {} | {
+    [x: string]: any;
+}, {}>;
+export default _default;

package/dist/runtime/components/forms/Checkbox.vue

@@ -0,0 +1,136 @@
+<template>
+  <div :class="wrapperClass">
+    <div class="flex items-center h-5">
+      <input
+        :id="name"
+        v-model="toggle"
+        :name="name"
+        :required="required"
+        :value="value"
+        :disabled="disabled"
+        :checked="checked"
+        :indeterminate="indeterminate"
+        type="checkbox"
+        class="form-checkbox"
+        :class="inputClass"
+        v-bind="attrs"
+        @change="onChange"
+      >
+    </div>
+    <div v-if="label || $slots.label" class="ms-3 text-sm">
+      <label :for="name" :class="ui.label">
+        <slot name="label">{{ label }}</slot>
+        <span v-if="required" :class="ui.required">*</span>
+      </label>
+      <p v-if="help" :class="ui.help">
+        {{ help }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent } from "vue";
+import { omit } from "lodash-es";
+import { twMerge, twJoin } from "tailwind-merge";
+import { defuTwMerge } from "../../utils";
+import { useFormGroup } from "../../composables/useFormGroup";
+import { useAppConfig } from "#imports";
+import appConfig from "#build/app.config";
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: [String, Number, Boolean, Object],
+      default: null
+    },
+    modelValue: {
+      type: [Boolean, Array],
+      default: null
+    },
+    name: {
+      type: String,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    indeterminate: {
+      type: Boolean,
+      default: false
+    },
+    help: {
+      type: String,
+      default: null
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    color: {
+      type: String,
+      default: () => appConfig.ui.checkbox.default.color,
+      validator(value) {
+        return appConfig.ui.colors.includes(value);
+      }
+    },
+    inputClass: {
+      type: String,
+      default: ""
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.checkbox));
+    const { emitFormChange, formGroup } = useFormGroup();
+    const color = computed(() => formGroup?.error?.value ? "red" : props.color);
+    const toggle = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(value) {
+        emit("update:modelValue", value);
+      }
+    });
+    const onChange = (event) => {
+      emit("change", event);
+      emitFormChange();
+    };
+    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
+    const inputClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.base,
+        ui.value.rounded,
+        ui.value.background,
+        ui.value.border,
+        ui.value.ring.replaceAll("{color}", color.value),
+        ui.value.color.replaceAll("{color}", color.value)
+      ), props.inputClass);
+    });
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      toggle,
+      wrapperClass,
+      // eslint-disable-next-line vue/no-dupe-keys
+      inputClass,
+      onChange
+    };
+  }
+});
+</script>