@nuxt/ui 0.4.1 → 2.8.1

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

@@ -0,0 +1,113 @@
+<template>
+  <HSwitch
+    v-model="active"
+    :name="name"
+    :disabled="disabled"
+    :class="switchClass"
+    v-bind="attrs"
+  >
+    <span :class="[active ? ui.container.active : ui.container.inactive, ui.container.base]">
+      <span v-if="onIcon" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
+        <UIcon :name="onIcon" :class="onIconClass" />
+      </span>
+      <span v-if="offIcon" :class="[active ? ui.icon.inactive : ui.icon.active, ui.icon.base]" aria-hidden="true">
+        <UIcon :name="offIcon" :class="offIconClass" />
+      </span>
+    </span>
+  </HSwitch>
+</template>
+
+<script>
+import { computed, defineComponent } from "vue";
+import { Switch as HSwitch } from "@headlessui/vue";
+import { omit } from "lodash-es";
+import { twMerge, twJoin } from "tailwind-merge";
+import UIcon from "../elements/Icon.vue";
+import { defuTwMerge } from "../../utils";
+import { useFormGroup } from "../../composables/useFormGroup";
+import { useAppConfig } from "#imports";
+import appConfig from "#build/app.config";
+export default defineComponent({
+  components: {
+    HSwitch,
+    UIcon
+  },
+  inheritAttrs: false,
+  props: {
+    name: {
+      type: String,
+      default: null
+    },
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    onIcon: {
+      type: String,
+      default: () => appConfig.ui.toggle.default.onIcon
+    },
+    offIcon: {
+      type: String,
+      default: () => appConfig.ui.toggle.default.offIcon
+    },
+    color: {
+      type: String,
+      default: () => appConfig.ui.toggle.default.color,
+      validator(value) {
+        return appConfig.ui.colors.includes(value);
+      }
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit, attrs }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.toggle));
+    const { emitFormChange, formGroup } = useFormGroup();
+    const color = computed(() => formGroup?.error?.value ? "red" : props.color);
+    const active = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(value) {
+        emit("update:modelValue", value);
+        emitFormChange();
+      }
+    });
+    const switchClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.base,
+        ui.value.rounded,
+        ui.value.ring.replaceAll("{color}", color.value),
+        (active.value ? ui.value.active : ui.value.inactive).replaceAll("{color}", color.value)
+      ), attrs.class);
+    });
+    const onIconClass = computed(() => {
+      return twJoin(
+        ui.value.icon.on.replaceAll("{color}", color.value)
+      );
+    });
+    const offIconClass = computed(() => {
+      return twJoin(
+        ui.value.icon.off.replaceAll("{color}", color.value)
+      );
+    });
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      active,
+      switchClass,
+      onIconClass,
+      offIconClass
+    };
+  }
+});
+</script>

package/dist/runtime/components/forms/Toggle.vue.d.ts

@@ -0,0 +1,83 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    offIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    color: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): any;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    active: import("vue").WritableComputedRef<boolean>;
+    switchClass: import("vue").ComputedRef<string>;
+    onIconClass: import("vue").ComputedRef<string>;
+    offIconClass: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        default: null;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    offIcon: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    color: {
+        type: StringConstructor;
+        default: () => any;
+        validator(value: string): any;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    color: string;
+    ui: any;
+    name: string;
+    modelValue: boolean;
+    disabled: boolean;
+    onIcon: string;
+    offIcon: string;
+}, {}>;
+export default _default;

package/dist/runtime/components/layout/Card.vue

@@ -0,0 +1,58 @@
+<template>
+  <component
+    :is="$attrs.onSubmit ? 'form' : as"
+    :class="cardClass"
+    v-bind="attrs"
+  >
+    <div v-if="$slots.header" :class="[ui.header.base, ui.header.padding, ui.header.background]">
+      <slot name="header" />
+    </div>
+    <div :class="[ui.body.base, ui.body.padding, ui.body.background]">
+      <slot />
+    </div>
+    <div v-if="$slots.footer" :class="[ui.footer.base, ui.footer.padding, ui.footer.background]">
+      <slot name="footer" />
+    </div>
+  </component>
+</template>
+
+<script>
+import { computed, defineComponent } from "vue";
+import { omit } from "lodash-es";
+import { twMerge, twJoin } from "tailwind-merge";
+import { defuTwMerge } from "../../utils";
+import { useAppConfig } from "#imports";
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    as: {
+      type: String,
+      default: "div"
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { attrs }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.card));
+    const cardClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.base,
+        ui.value.rounded,
+        ui.value.divide,
+        ui.value.ring,
+        ui.value.shadow,
+        ui.value.background
+      ), attrs.class);
+    });
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      cardClass
+    };
+  }
+});
+</script>

package/dist/runtime/components/layout/Card.vue.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    cardClass: 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<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    ui: any;
+    as: string;
+}, {}>;
+export default _default;

package/dist/runtime/components/layout/Container.vue

@@ -0,0 +1,43 @@
+<template>
+  <component :is="as" :class="containerClass" v-bind="attrs">
+    <slot />
+  </component>
+</template>
+
+<script>
+import { computed, defineComponent } from "vue";
+import { omit } from "lodash-es";
+import { twMerge, twJoin } from "tailwind-merge";
+import { defuTwMerge } from "../../utils";
+import { useAppConfig } from "#imports";
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    as: {
+      type: String,
+      default: "div"
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { attrs }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.container));
+    const containerClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.base,
+        ui.value.padding,
+        ui.value.constrained
+      ), attrs.class);
+    });
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      containerClass
+    };
+  }
+});
+</script>

package/dist/runtime/components/layout/Container.vue.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    containerClass: 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<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    ui: any;
+    as: string;
+}, {}>;
+export default _default;

package/dist/runtime/components/layout/Skeleton.vue

@@ -0,0 +1,37 @@
+<template>
+  <div :class="skeletonClass" v-bind="attrs" />
+</template>
+
+<script>
+import { computed, defineComponent } from "vue";
+import { omit } from "lodash-es";
+import { twMerge, twJoin } from "tailwind-merge";
+import { defuTwMerge } from "../../utils";
+import { useAppConfig } from "#imports";
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { attrs }) {
+    const appConfig2 = useAppConfig();
+    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.skeleton));
+    const skeletonClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.base,
+        ui.value.background,
+        ui.value.rounded
+      ), attrs.class);
+    });
+    return {
+      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      skeletonClass
+    };
+  }
+});
+</script>

package/dist/runtime/components/layout/Skeleton.vue.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="lodash" />
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    attrs: import("lodash").Omit<{
+        [x: string]: unknown;
+    }, "class">;
+    ui: import("vue").ComputedRef<any>;
+    skeletonClass: 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<{
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    ui: any;
+}, {}>;
+export default _default;