@nuxt/ui 2.18.4 → 3.0.0-alpha.1

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

@@ -1,140 +0,0 @@
-<template>
-  <div :class="ui.wrapper" :data-n-ids="attrs['data-n-ids']">
-    <div :class="ui.container">
-      <input
-        :id="inputId"
-        v-model="pick"
-        :name="name"
-        :required="required"
-        :value="value"
-        :disabled="disabled"
-        type="radio"
-        :class="inputClass"
-        v-bind="attrs"
-        @change="onChange"
-      >
-    </div>
-    <div v-if="label || $slots.label" :class="ui.inner">
-      <label :for="inputId" :class="ui.label">
-        <slot name="label" :label="label">{{ label }}</slot>
-        <span v-if="required" :class="ui.required">*</span>
-      </label>
-      <p v-if="help || $slots.help" :class="ui.help">
-        <slot name="help" :help="help">
-          {{ help }}
-        </slot>
-      </p>
-    </div>
-  </div>
-</template>
-
-<script>
-import { computed, defineComponent, inject, toRef } from "vue";
-import { twMerge, twJoin } from "tailwind-merge";
-import { useUI } from "../../composables/useUI";
-import { useFormGroup } from "../../composables/useFormGroup";
-import { mergeConfig } from "../../utils";
-import appConfig from "#build/app.config";
-import { radio } from "#ui/ui.config";
-import { useId } from "#imports";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.radio, radio);
-export default defineComponent({
-  inheritAttrs: false,
-  props: {
-    id: {
-      type: String,
-      default: null
-    },
-    value: {
-      type: [String, Number, Boolean],
-      default: null
-    },
-    modelValue: {
-      type: [String, Number, Boolean, Object],
-      default: null
-    },
-    name: {
-      type: String,
-      default: null
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    help: {
-      type: String,
-      default: null
-    },
-    label: {
-      type: String,
-      default: null
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    color: {
-      type: String,
-      default: () => config.default.color,
-      validator(value) {
-        return appConfig.ui.colors.includes(value);
-      }
-    },
-    inputClass: {
-      type: String,
-      default: null
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(props, { emit }) {
-    const { ui, attrs } = useUI("radio", toRef(props, "ui"), config, toRef(props, "class"));
-    const inputId = props.id ?? useId();
-    const radioGroup = inject("radio-group", null);
-    const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config);
-    const pick = computed({
-      get() {
-        return props.modelValue;
-      },
-      set(value) {
-        emit("update:modelValue", value);
-        if (!radioGroup) {
-          emitFormChange();
-        }
-      }
-    });
-    function onChange(event) {
-      emit("change", event.target.value);
-    }
-    const inputClass = computed(() => {
-      return twMerge(twJoin(
-        ui.value.base,
-        ui.value.form,
-        ui.value.background,
-        ui.value.border,
-        color.value && ui.value.ring.replaceAll("{color}", color.value),
-        color.value && ui.value.color.replaceAll("{color}", color.value)
-      ), props.inputClass);
-    });
-    return {
-      inputId,
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      attrs,
-      pick,
-      // eslint-disable-next-line vue/no-dupe-keys
-      name,
-      // eslint-disable-next-line vue/no-dupe-keys
-      inputClass,
-      onChange
-    };
-  }
-});
-</script>

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

@@ -1,168 +0,0 @@
-import type { PropType } from 'vue';
-import type { Strategy } from '../../types/index.js';
-import colors from '#ui-colors';
-declare const config: {
-    wrapper: string;
-    container: string;
-    base: string;
-    form: string;
-    color: string;
-    background: string;
-    border: string;
-    ring: string;
-    inner: string;
-    label: string;
-    required: string;
-    help: string;
-    default: {
-        color: string;
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    id: {
-        type: StringConstructor;
-        default: any;
-    };
-    value: {
-        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
-        default: any;
-    };
-    modelValue: {
-        type: (StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor)[];
-        default: any;
-    };
-    name: {
-        type: StringConstructor;
-        default: any;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    help: {
-        type: StringConstructor;
-        default: any;
-    };
-    label: {
-        type: StringConstructor;
-        default: any;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    color: {
-        type: PropType<(typeof colors)[number]>;
-        default: () => string;
-        validator(value: string): any;
-    };
-    inputClass: {
-        type: StringConstructor;
-        default: any;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    inputId: string;
-    ui: import("vue").ComputedRef<{
-        wrapper: string;
-        container: string;
-        base: string;
-        form: string;
-        color: string;
-        background: string;
-        border: string;
-        ring: string;
-        inner: string;
-        label: string;
-        required: string;
-        help: string;
-        default: {
-            color: string;
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    pick: import("vue").WritableComputedRef<string | number | boolean | Record<string, any>>;
-    name: any;
-    inputClass: import("vue").ComputedRef<string>;
-    onChange: (event: Event) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    id: {
-        type: StringConstructor;
-        default: any;
-    };
-    value: {
-        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
-        default: any;
-    };
-    modelValue: {
-        type: (StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor)[];
-        default: any;
-    };
-    name: {
-        type: StringConstructor;
-        default: any;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    help: {
-        type: StringConstructor;
-        default: any;
-    };
-    label: {
-        type: StringConstructor;
-        default: any;
-    };
-    required: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    color: {
-        type: PropType<(typeof colors)[number]>;
-        default: () => string;
-        validator(value: string): any;
-    };
-    inputClass: {
-        type: StringConstructor;
-        default: any;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>> & {
-    onChange?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-}, {
-    name: string;
-    required: boolean;
-    class: any;
-    color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
-    disabled: boolean;
-    label: string;
-    ui: {};
-    id: string;
-    modelValue: string | number | boolean | Record<string, any>;
-    value: string | number | boolean;
-    help: string;
-    inputClass: string;
-}, {}>;
-export default _default;

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

@@ -1,145 +0,0 @@
-<template>
-  <div :class="ui.wrapper">
-    <fieldset v-bind="attrs" :class="ui.fieldset">
-      <legend v-if="legend || $slots.legend" :class="ui.legend">
-        <slot name="legend">
-          {{ legend }}
-        </slot>
-      </legend>
-      <URadio
-        v-for="option in normalizedOptions"
-        :key="option.value"
-        :label="option.label"
-        :model-value="modelValue"
-        :value="option.value"
-        :help="option.help"
-        :disabled="option.disabled || disabled"
-        :ui="uiRadio"
-        @change="onUpdate(option.value)"
-      >
-        <template #label>
-          <slot name="label" v-bind="{ option, selected: option.selected }" />
-        </template>
-
-        <template #help>
-          <slot name="help" v-bind="{ option, selected: option.selected }" />
-        </template>
-      </URadio>
-    </fieldset>
-  </div>
-</template>
-
-<script>
-import URadio from "./Radio.vue";
-import { computed, defineComponent, provide, toRef } from "vue";
-import { useUI } from "../../composables/useUI";
-import { useFormGroup } from "../../composables/useFormGroup";
-import { mergeConfig, get } from "../../utils";
-import appConfig from "#build/app.config";
-import { radioGroup, radio } from "#ui/ui.config";
-const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.radioGroup, radioGroup);
-const configRadio = mergeConfig(appConfig.ui.strategy, appConfig.ui.radio, radio);
-export default defineComponent({
-  components: {
-    URadio
-  },
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: [String, Number, Object, Boolean],
-      default: ""
-    },
-    name: {
-      type: String,
-      default: null
-    },
-    legend: {
-      type: String,
-      default: null
-    },
-    options: {
-      type: Array,
-      default: () => []
-    },
-    optionAttribute: {
-      type: String,
-      default: "label"
-    },
-    valueAttribute: {
-      type: String,
-      default: "value"
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    color: {
-      type: String,
-      default: () => config.default.color,
-      validator(value) {
-        return appConfig.ui.colors.includes(value);
-      }
-    },
-    class: {
-      type: [String, Object, Array],
-      default: () => ""
-    },
-    ui: {
-      type: Object,
-      default: () => ({})
-    },
-    uiRadio: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(props, { emit }) {
-    const { ui, attrs } = useUI("radioGroup", toRef(props, "ui"), config, toRef(props, "class"));
-    const { ui: uiRadio } = useUI("radio", toRef(props, "uiRadio"), configRadio);
-    const { emitFormChange, color, name } = useFormGroup(props, config);
-    provide("radio-group", { color, name });
-    const onUpdate = (value) => {
-      emit("update:modelValue", value);
-      emit("change", value);
-      emitFormChange();
-    };
-    const guessOptionValue = (option) => {
-      return get(option, props.valueAttribute, get(option, props.optionAttribute));
-    };
-    const guessOptionText = (option) => {
-      return get(option, props.optionAttribute, get(option, props.valueAttribute));
-    };
-    const guessOptionSelected = (option) => {
-      return props.modelValue === guessOptionValue(option);
-    };
-    const normalizeOption = (option) => {
-      if (["string", "number", "boolean"].includes(typeof option)) {
-        return {
-          value: option,
-          label: option
-        };
-      }
-      return {
-        ...option,
-        value: guessOptionValue(option),
-        label: guessOptionText(option),
-        selected: guessOptionSelected(option)
-      };
-    };
-    const normalizedOptions = computed(() => {
-      return props.options.map((option) => normalizeOption(option));
-    });
-    return {
-      // eslint-disable-next-line vue/no-dupe-keys
-      ui,
-      // eslint-disable-next-line vue/no-dupe-keys
-      uiRadio,
-      attrs,
-      normalizedOptions,
-      // eslint-disable-next-line vue/no-dupe-keys
-      onUpdate
-    };
-  }
-});
-</script>

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

@@ -1,176 +0,0 @@
-import type { PropType } from 'vue';
-import type { Strategy } from '../../types/index.js';
-import colors from '#ui-colors';
-declare const config: {
-    wrapper: string;
-    fieldset: string;
-    legend: string;
-    default: {
-        color: string;
-    };
-};
-declare const configRadio: {
-    wrapper: string;
-    container: string;
-    base: string;
-    form: string;
-    color: string;
-    background: string;
-    border: string;
-    ring: string;
-    inner: string;
-    label: string;
-    required: string;
-    help: string;
-    default: {
-        color: string;
-    };
-};
-declare const _default: import("vue").DefineComponent<{
-    modelValue: {
-        type: (StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor)[];
-        default: string;
-    };
-    name: {
-        type: StringConstructor;
-        default: any;
-    };
-    legend: {
-        type: StringConstructor;
-        default: any;
-    };
-    options: {
-        type: ArrayConstructor;
-        default: () => any[];
-    };
-    optionAttribute: {
-        type: StringConstructor;
-        default: string;
-    };
-    valueAttribute: {
-        type: StringConstructor;
-        default: string;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    color: {
-        type: PropType<(typeof colors)[number]>;
-        default: () => string;
-        validator(value: string): any;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-    uiRadio: {
-        type: PropType<Partial<typeof configRadio> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}, {
-    ui: import("vue").ComputedRef<{
-        wrapper: string;
-        fieldset: string;
-        legend: string;
-        default: {
-            color: string;
-        };
-    }>;
-    uiRadio: import("vue").ComputedRef<{
-        wrapper: string;
-        container: string;
-        base: string;
-        form: string;
-        color: string;
-        background: string;
-        border: string;
-        ring: string;
-        inner: string;
-        label: string;
-        required: string;
-        help: string;
-        default: {
-            color: string;
-        };
-    }>;
-    attrs: import("vue").ComputedRef<Pick<{
-        [x: string]: unknown;
-    }, string>>;
-    normalizedOptions: import("vue").ComputedRef<any[]>;
-    onUpdate: (value: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: (StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor)[];
-        default: string;
-    };
-    name: {
-        type: StringConstructor;
-        default: any;
-    };
-    legend: {
-        type: StringConstructor;
-        default: any;
-    };
-    options: {
-        type: ArrayConstructor;
-        default: () => any[];
-    };
-    optionAttribute: {
-        type: StringConstructor;
-        default: string;
-    };
-    valueAttribute: {
-        type: StringConstructor;
-        default: string;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    color: {
-        type: PropType<(typeof colors)[number]>;
-        default: () => string;
-        validator(value: string): any;
-    };
-    class: {
-        type: PropType<any>;
-        default: () => "";
-    };
-    ui: {
-        type: PropType<Partial<typeof config> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-    uiRadio: {
-        type: PropType<Partial<typeof configRadio> & {
-            strategy?: Strategy;
-        }>;
-        default: () => {};
-    };
-}>> & {
-    onChange?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
-}, {
-    name: string;
-    class: any;
-    color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
-    disabled: boolean;
-    legend: string;
-    ui: {};
-    options: unknown[];
-    modelValue: string | number | boolean | Record<string, any>;
-    optionAttribute: string;
-    valueAttribute: string;
-    uiRadio: {};
-}, {}>;
-export default _default;