@resee-movies/nuxt-ux 0.4.1 → 0.6.0

package/dist/runtime/components/ToggleButton.vue

@@ -0,0 +1,45 @@
+<template>
+  <Button
+    :text         = "currentText"
+    :icon         = "currentIcon"
+    :aria-pressed = "pressed"
+    @click        = "handleClick"
+  >
+    <template #default v-if="slots.default">
+      <slot />
+    </template>
+  </Button>
+</template>
+
+<script>
+
+</script>
+
+<script setup>
+import { computed, useSlots, watch } from "vue";
+import Button from "./Button.vue";
+const props = defineProps({
+  onIcon: { type: String, required: false, default: void 0 },
+  offIcon: { type: String, required: false, default: void 0 },
+  onText: { type: String, required: false, default: void 0 },
+  offText: { type: String, required: false, default: void 0 }
+});
+const emits = defineEmits(["click", "change"]);
+const pressed = defineModel("pressed", { type: Boolean, ...{ default: false } });
+const slots = useSlots();
+const currentText = computed(() => {
+  return pressed.value ? props.onText ?? props.text : props.offText ?? props.text;
+});
+const currentIcon = computed(() => {
+  return pressed.value ? props.onIcon ?? props.icon : props.offIcon ?? props.icon;
+});
+watch(pressed, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    emits("change", newVal);
+  }
+});
+function handleClick() {
+  pressed.value = !pressed.value;
+  emits("click", pressed.value);
+}
+</script>

package/dist/runtime/components/ToggleButton.vue.d.ts

@@ -0,0 +1,30 @@
+import type { ButtonProps } from './Button.vue.js';
+export interface ToggleButtonProps extends /* @vue-ignore */ Omit<ButtonProps, 'onClick' | 'trailingIcon' | 'trailingIconSize'> {
+    onIcon?: string;
+    offIcon?: string;
+    onText?: string;
+    offText?: string;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ToggleButtonProps & {
+    pressed?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:pressed": (value: boolean) => any;
+} & {
+    change: (pressed: boolean) => any;
+    click: (pressed: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ToggleButtonProps & {
+    pressed?: boolean;
+}> & Readonly<{
+    onChange?: ((pressed: boolean) => any) | undefined;
+    onClick?: ((pressed: boolean) => any) | undefined;
+    "onUpdate:pressed"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/form/Form.vue

@@ -0,0 +1,79 @@
+<template>
+  <PrimeForm
+    v-slot                    = "$form"
+    ref                       = "form"
+    novalidate                = "true"
+    :validate-on-mount        = "true"
+    :validate-on-submit       = "true"
+    :validate-on-value-update = "true"
+    :validate-on-blur         = "false"
+    :initial-values           = "props.initialValues"
+    :aria-disabled            = "props.disabled"
+    @submit                   = "handleFormSubmit"
+  >
+    <slot :state="$form" />
+  </PrimeForm>
+</template>
+
+<script>
+export * from "../../types/form";
+</script>
+
+<script setup>
+import PrimeForm, {} from "@primevue/forms/form";
+import { toNonNullableArray } from "@resee-movies/utilities/arrays/to-non-nullable-array";
+import { isPromiseLike } from "@resee-movies/utilities/objects/is-promise-like";
+import { syncRefs, watchDebounced } from "@vueuse/core";
+import { useTemplateRef, watchEffect } from "vue";
+import { provideFormInstance, getValuesFromFormState } from "../../utils/form";
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  initialValues: { type: Object, required: false },
+  onSubmit: { type: [Function, Array], required: false },
+  onChange: { type: Function, required: false },
+  onChangeDebounce: { type: Number, required: false, default: 32 }
+});
+defineEmits(["submit", "change"]);
+const formInstance = provideFormInstance();
+syncRefs(() => props.disabled, formInstance.isDisabled);
+const form = useTemplateRef("form");
+let oldValues = void 0;
+const changeHandles = watchDebounced(
+  () => form.value?.states,
+  (newState) => {
+    const newValues = newState ? getValuesFromFormState(newState) : null;
+    const stringify = JSON.stringify(newValues);
+    if (stringify !== oldValues) {
+      props.onChange?.(newValues);
+      oldValues = stringify;
+    }
+  },
+  {
+    debounce: props.onChangeDebounce,
+    deep: 2
+  }
+);
+watchEffect(() => {
+  changeHandles[props.onChange ? "resume" : "pause"]();
+});
+async function handleFormSubmit(event) {
+  if (props.disabled) {
+    return;
+  }
+  formInstance.hasSubmitted.value = true;
+  if (!event.valid) {
+    return;
+  }
+  if (props.onSubmit) {
+    const handlers = toNonNullableArray(props.onSubmit);
+    const values = getValuesFromFormState(event.states);
+    const newEvent = { ...event, values };
+    const results = handlers.map((handler) => handler(newEvent));
+    if (!!results.find((result) => isPromiseLike(result))) {
+      formInstance.isSubmitting.value = true;
+      await Promise.allSettled(results);
+      formInstance.isSubmitting.value = false;
+    }
+  }
+}
+</script>

package/dist/runtime/components/form/Form.vue.d.ts

@@ -0,0 +1,35 @@
+import type { FormValues, FormSubmitHandler, FormSubmitEvent } from '../../types/form.js';
+export * from '../../types/form.js';
+export interface FormProps<T extends FormValues = FormValues> {
+    disabled?: boolean;
+    initialValues?: Record<string, unknown>;
+    onSubmit?: FormSubmitHandler<T> | FormSubmitHandler<T>[];
+    onChange?: (values: T | null) => void;
+    onChangeDebounce?: number;
+}
+declare const __VLS_export: <T extends FormValues>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<FormProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<{
+        (e: "submit", evt: FormSubmitEvent<T>): (void | Promise<void>);
+        (e: "change", values: T): void;
+    }>>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            state: any;
+        }) => any;
+    };
+    emit: {
+        (e: "submit", evt: FormSubmitEvent<T>): (void | Promise<void>);
+        (e: "change", values: T): void;
+    };
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/form/FormField.vue

@@ -0,0 +1,96 @@
+<template>
+  <PrimeFormField
+    v-slot         = "$field"
+    :as            = "props.is"
+    :name          = "props.name"
+    :resolver      = "validatorFunction"
+    :initial-value = "props.initialValue"
+    :class         = "['input-field', props.class, { disabled: isDisabled, readonly: isReadonly, required: props.required }]"
+  >
+    <FormLabelInputPair
+      :input-id       = "inputId"
+      :label-id       = "labelId"
+      :label-text     = "labelText"
+      :label-position = "props.labelPosition"
+      :label-sr-only  = "props.labelSrOnly"
+      :disabled       = "isDisabled && !isReadonly"
+      :required       = "props.required"
+      :faux-label     = "props.fauxLabel"
+    >
+      <template #label>
+        <slot name="label" />
+      </template>
+
+      <template #input>
+        <slot
+          name        = "default"
+          :input-name = "props.name"
+          :input-id   = "inputId"
+          :label-id   = "labelId"
+          :label-text = "labelText"
+          :message-id = "$field.error ? messageId : void 0"
+          :disabled   = "isDisabled"
+          :readonly   = "isReadonly"
+          :invalid    = "$field.invalid"
+          :on-blur    = "$field.props.onBlur"
+          :on-change  = "$field.props.onChange"
+          :on-input   = "$field.props.onInput"
+          :on-invalid = "$field.props.onInvalid"
+        />
+      </template>
+    </FormLabelInputPair>
+
+    <FormValidationMessage
+      v-if     = "$field.error"
+      :id      = "messageId"
+      :visible = "$field.touched || formState.hasSubmitted.value"
+      :message = "$field.error.message"
+    />
+  </PrimeFormField>
+</template>
+
+<script>
+import { computed } from "vue";
+</script>
+
+<script setup>
+import PrimeFormField, {} from "@primevue/forms/formfield";
+import { humanize } from "@resee-movies/utilities/strings/humanize";
+import { useId } from "vue";
+import { injectFormInstance } from "../../utils/form";
+import FormLabelInputPair from "./FormLabelInputPair.vue";
+import FormValidationMessage from "./FormValidationMessage.vue";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  name: { type: String, required: true },
+  label: { type: String, required: false, default: void 0 },
+  is: { type: String, required: false, default: "div" },
+  initialValue: { type: null, required: false, default: void 0 },
+  required: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  fauxLabel: { type: Boolean, required: false },
+  labelSrOnly: { type: Boolean, required: false },
+  labelPosition: { type: String, required: false },
+  validator: { type: Function, required: false, default: void 0 },
+  class: { type: null, required: false }
+});
+const formState = injectFormInstance();
+const inputId = useId();
+const labelId = `${inputId}_label`;
+const messageId = `${inputId}_message`;
+const labelText = computed(() => props.label ?? humanize(props.name));
+const isDisabled = computed(() => props.disabled || formState.isDisabled.value);
+const isReadonly = computed(() => props.readonly || formState.isSubmitting.value);
+const validatorFunction = computed(() => {
+  return ({ value }) => {
+    const result = props?.validator?.(value, labelText.value)?.safeParse(value);
+    if (result?.error?.issues.length) {
+      return { errors: result.error.issues };
+    }
+    return void 0;
+  };
+});
+</script>

package/dist/runtime/components/form/FormField.vue.d.ts

@@ -0,0 +1,42 @@
+import type { ZodMiniType } from 'zod/mini';
+import type { HintedString, HTMLElementClassNames } from '../../types/index.js';
+import type { FormLabelInputPairProps } from './FormLabelInputPair.vue.js';
+export interface FormFieldProps {
+    name: string;
+    label?: string;
+    is?: HintedString<'div'>;
+    initialValue?: unknown;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    fauxLabel?: boolean;
+    labelSrOnly?: boolean;
+    labelPosition?: FormLabelInputPairProps['labelPosition'];
+    validator?: (value: unknown, label: string) => undefined | ZodMiniType;
+    class?: HTMLElementClassNames;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+} & {
+    default?: (props: {
+        inputName: string;
+        inputId: any;
+        labelId: any;
+        labelText: any;
+        messageId: any;
+        disabled: any;
+        readonly: any;
+        invalid: any;
+        onBlur: any;
+        onChange: any;
+        onInput: any;
+        onInvalid: any;
+    }) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/form/FormFieldCheckbox.vue

@@ -0,0 +1,56 @@
+<template>
+  <FormField v-bind="props" :validator="validatorFunction">
+    <template #label>
+      <slot name="label" />
+    </template>
+
+    <template #default="{ inputId, messageId, disabled, readonly }">
+      <PrimeCheckbox
+        :input-id         = "inputId"
+        :value            = "props.value"
+        :true-value       = "props.trueValue"
+        :false-value      = "props.falseValue"
+        :binary           = "props.binary"
+        :aria-describedby = "messageId"
+        :disabled         = "disabled || readonly"
+        :readonly         = "readonly"
+        class             = "input-group"
+      >
+        <template #icon="{ checked }">
+          <Icon v-if="checked" name="i-ph-check-bold" />
+        </template>
+      </PrimeCheckbox>
+    </template>
+  </FormField>
+</template>
+
+<script>
+import { computed } from "vue";
+</script>
+
+<script setup>
+import PrimeCheckbox from "primevue/checkbox";
+import { createBooleanValidator } from "../../utils/validation";
+import FormField from "./FormField.vue";
+import Icon from "../Icon.vue";
+const props = defineProps({
+  value: { type: null, required: false, default: void 0 },
+  trueValue: { type: null, required: false, default: () => true },
+  falseValue: { type: null, required: false, default: () => false },
+  binary: { type: Boolean, required: false, default: () => true },
+  name: { type: String, required: true },
+  label: { type: String, required: false },
+  is: { type: String, required: false },
+  initialValue: { type: null, required: false, default: () => false },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  fauxLabel: { type: Boolean, required: false },
+  labelSrOnly: { type: Boolean, required: false },
+  labelPosition: { type: String, required: false, default: "after" },
+  class: { type: null, required: false }
+});
+const validatorFunction = computed(() => {
+  return () => createBooleanValidator({ required: props.required });
+});
+</script>

package/dist/runtime/components/form/FormFieldCheckbox.vue.d.ts

@@ -0,0 +1,17 @@
+import type { FormFieldProps } from './FormField.vue.js';
+export interface FormFieldCheckboxProps extends Omit<FormFieldProps, 'validator'> {
+    value?: unknown;
+    trueValue?: unknown;
+    falseValue?: unknown;
+    binary?: boolean;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldCheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldCheckboxProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/form/FormFieldSelect.vue

@@ -0,0 +1,86 @@
+<template>
+  <FormField v-bind="props" :validator="validatorFunction">
+    <template #label>
+      <slot name="label" />
+    </template>
+
+    <template #default="{ inputName, inputId, labelId, messageId, disabled, readonly }">
+      <FormElementSelectOptions
+        :name                  = "inputName"
+        :input-id              = "inputId"
+        :label-id              = "labelId"
+        :disabled              = "disabled"
+        :readonly              = "readonly"
+        :aria-describedby      = "messageId"
+        :multiple              = "props.multiple"
+        :options               = "props.options"
+        :option-label          = "props.optionLabel"
+        :option-value          = "props.optionValue"
+        :option-disabled       = "props.optionDisabled"
+        :data-key              = "props.dataKey"
+        :placeholder           = "props.placeholder"
+        :show-clear            = "props.showClear"
+        :show-option-footer    = "props.showOptionFilter"
+        :filter-placeholder    = "props.filterPlaceholder"
+        :loading               = "props.loading"
+        :selection-limit       = "props.maxRequired"
+      >
+        <template #option="{ option, selected, index }" v-if="slots.option">
+          <slot
+            name      = "option"
+            :option   = "option"
+            :selected = "selected"
+            :index    = "index"
+          />
+        </template>
+      </FormElementSelectOptions>
+    </template>
+  </FormField>
+</template>
+
+<script>
+import {} from "./FormField.vue";
+</script>
+
+<script setup>
+import { computed, useSlots } from "vue";
+import { createBooleanValidator, createListValidator } from "../../utils/validation";
+import FormField from "./FormField.vue";
+import FormElementSelectOptions from "./element/FormElementSelectOptions.vue";
+const props = defineProps({
+  options: { type: Array, required: false },
+  optionLabel: { type: String, required: false },
+  optionValue: { type: String, required: false },
+  optionDisabled: { type: String, required: false },
+  dataKey: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  showClear: { type: Boolean, required: false, default: true },
+  showOptionFilter: { type: Boolean, required: false, default: void 0 },
+  filterPlaceholder: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  multiple: { type: Boolean, required: false, default: false },
+  minRequired: { type: [String, Number], required: false },
+  maxRequired: { type: [String, Number], required: false },
+  name: { type: String, required: true },
+  label: { type: String, required: false },
+  is: { type: String, required: false },
+  initialValue: { type: null, required: false },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  fauxLabel: { type: Boolean, required: false, default: true },
+  labelSrOnly: { type: Boolean, required: false },
+  labelPosition: { type: String, required: false },
+  class: { type: null, required: false }
+});
+const slots = useSlots();
+const validatorFunction = computed(() => {
+  return props.multiple ? () => createListValidator({
+    required: props.required,
+    minRequired: props.minRequired,
+    maxRequired: props.maxRequired
+  }) : () => createBooleanValidator({
+    required: props.required
+  });
+});
+</script>

package/dist/runtime/components/form/FormFieldSelect.vue.d.ts

@@ -0,0 +1,40 @@
+import { type FormFieldProps } from './FormField.vue.js';
+export interface FormFieldSelectProps<T = unknown> extends Omit<FormFieldProps, 'validator'> {
+    options?: T[];
+    optionLabel?: string;
+    optionValue?: string;
+    optionDisabled?: string;
+    dataKey?: string;
+    placeholder?: string;
+    showClear?: boolean;
+    showOptionFilter?: boolean;
+    filterPlaceholder?: string;
+    loading?: boolean;
+    multiple?: boolean;
+    minRequired?: string | number;
+    maxRequired?: string | number;
+}
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<FormFieldSelectProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        label?: (props: {}) => any;
+    } & {
+        option?: (props: {
+            option: T;
+            selected: any;
+            index: any;
+        }) => any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/form/FormFieldSelectButton.vue

@@ -0,0 +1,76 @@
+<template>
+  <FormField v-bind="props" :validator="validatorFunction">
+    <template #label>
+      <slot name="label" />
+    </template>
+
+    <template #default="{ labelId, messageId, invalid, disabled, readonly, onChange, onBlur }">
+      <FormElementSelectButton
+        :aria-labelledby  = "labelId"
+        :aria-describedby = "messageId"
+        :aria-invalid     = "invalid"
+        :disabled         = "disabled"
+        :readonly         = "readonly"
+        :options          = "props.options"
+        :option-label     = "props.optionLabel"
+        :option-icon      = "props.optionIcon"
+        :option-value     = "props.optionValue"
+        :option-disabled  = "props.optionDisabled"
+        :option-data-key  = "props.optionDataKey"
+        :icon-only        = "props.iconOnly"
+        :multiple         = "props.multiple"
+        :selection-limit  = "props.maxRequired ? toInteger(props.maxRequired) : void 0"
+        @change           = "onChange"
+        @focusout         = "onBlur"
+      />
+    </template>
+  </FormField>
+</template>
+
+<script>
+import {} from "./element/FormElementSelectButton.vue";
+import {} from "./FormField.vue";
+</script>
+
+<script setup>
+import { toInteger } from "@resee-movies/utilities/numbers/to-integer";
+import { computed } from "vue";
+import { createBooleanValidator, createListValidator } from "../../utils/validation";
+import FormField from "./FormField.vue";
+import FormElementSelectButton from "./element/FormElementSelectButton.vue";
+const props = defineProps({
+  minRequired: { type: [String, Number], required: false },
+  maxRequired: { type: [String, Number], required: false },
+  name: { type: String, required: true },
+  label: { type: String, required: false },
+  is: { type: String, required: false },
+  initialValue: { type: null, required: false },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  fauxLabel: { type: Boolean, required: false, default: true },
+  labelSrOnly: { type: Boolean, required: false },
+  labelPosition: { type: String, required: false },
+  class: { type: null, required: false },
+  options: { type: Array, required: true },
+  optionLabel: { type: String, required: false },
+  optionIcon: { type: String, required: false },
+  optionValue: { type: String, required: false },
+  optionDisabled: { type: String, required: false },
+  optionDataKey: { type: String, required: false },
+  iconOnly: { type: Boolean, required: false, default: false },
+  multiple: { type: Boolean, required: false, default: false },
+  ariaLabelledby: { type: String, required: false },
+  ariaDescribedby: { type: String, required: false },
+  selectionLimit: { type: Number, required: false }
+});
+const validatorFunction = computed(() => {
+  return props.multiple ? () => createListValidator({
+    required: props.required,
+    minRequired: props.minRequired,
+    maxRequired: props.maxRequired
+  }) : () => createBooleanValidator({
+    required: props.required
+  });
+});
+</script>

package/dist/runtime/components/form/FormFieldSelectButton.vue.d.ts

@@ -0,0 +1,16 @@
+import { type FormElementSelectButtonProps } from './element/FormElementSelectButton.vue.js';
+import { type FormFieldProps } from './FormField.vue.js';
+export interface FormFieldSelectButtonProps extends Omit<FormFieldProps, 'validator'>, FormElementSelectButtonProps {
+    minRequired?: string | number;
+    maxRequired?: string | number;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormFieldSelectButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldSelectButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};