@aerogel/core 0.0.0-next.f1f5a990033d966dc0bb12d251110fbc9350dcc7 → 0.0.0-next.f7d6218c6788b7d93b1f58d848fc11cd0a351798

package/src/components/forms/AGButton.vue

@@ -1,44 +0,0 @@
-<template>
-    <AGHeadlessButton class="px-2.5 py-1.5 focus-visible:outline focus-visible:outline-2" :class="colorClasses">
-        <slot />
-    </AGHeadlessButton>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { enumProp } from '@/utils/vue';
-import { Colors } from '@/components/constants';
-
-import AGHeadlessButton from '../headless/forms/AGHeadlessButton.vue';
-
-const props = defineProps({
-    color: enumProp(Colors, Colors.Primary),
-});
-
-const colorClasses = computed(() => {
-    switch (props.color) {
-        case Colors.Secondary:
-            return [
-                'text-white bg-gray-600',
-                'hover:bg-gray-500',
-                'focus-visible:outline-offset-2 focus-visible:outline-gray-600',
-            ].join(' ');
-        case Colors.Clear:
-            return 'hover:bg-gray-500/20 focus-visible:outline-gray-500/60';
-        case Colors.Danger:
-            return [
-                'text-white bg-red-600',
-                'hover:bg-red-500',
-                'focus-visible:outline-offset-2 focus-visible:outline-red-600',
-            ].join(' ');
-        case Colors.Primary:
-        default:
-            return [
-                'text-white bg-indigo-600',
-                'hover:bg-indigo-500',
-                'focus-visible:outline-offset-2 focus-visible:outline-indigo-600',
-            ].join(' ');
-    }
-});
-</script>

package/src/components/forms/AGCheckbox.vue

@@ -1,35 +0,0 @@
-<template>
-    <AGHeadlessInput ref="$input" :name="name" class="flex">
-        <AGHeadlessInputInput
-            v-bind="$attrs"
-            type="checkbox"
-            :class="{
-                'text-indigo-600 focus:ring-indigo-600': !$input?.errors,
-                'border-red-200 text-red-600 focus:ring-red-600': $input?.errors,
-            }"
-        />
-
-        <div class="ml-2">
-            <AGHeadlessInputLabel v-if="$slots.default">
-                <slot />
-            </AGHeadlessInputLabel>
-            <AGHeadlessInputError class="text-sm text-red-600" />
-        </div>
-    </AGHeadlessInput>
-</template>
-
-<script setup lang="ts">
-import { componentRef, stringProp } from '@/utils/vue';
-
-import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
-
-import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
-import AGHeadlessInputError from '../headless/forms/AGHeadlessInputError.vue';
-import AGHeadlessInputInput from '../headless/forms/AGHeadlessInputInput.vue';
-import AGHeadlessInputLabel from '../headless/forms/AGHeadlessInputLabel.vue';
-
-defineProps({ name: stringProp() });
-defineOptions({ inheritAttrs: false });
-
-const $input = componentRef<IAGHeadlessInput>();
-</script>

package/src/components/forms/AGForm.vue

@@ -1,26 +0,0 @@
-<template>
-    <form @submit.prevent="submit">
-        <slot />
-    </form>
-</template>
-
-<script setup lang="ts">
-import { provide } from 'vue';
-
-import { objectProp } from '@/utils/vue';
-import type Form from '@/forms/Form';
-
-const props = defineProps({ form: objectProp<Form>() });
-
-const emit = defineEmits<{ submit: [] }>();
-
-provide('form', props.form);
-
-function submit() {
-    if (props.form && !props.form.submit()) {
-        return;
-    }
-
-    emit('submit');
-}
-</script>

package/src/components/forms/AGInput.vue

@@ -1,36 +0,0 @@
-<template>
-    <AGHeadlessInput
-        ref="$input"
-        class="relative flex flex-col items-center"
-        :class="className"
-        :name="name"
-    >
-        <AGHeadlessInputInput
-            v-bind="attrs"
-            class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600"
-            :class="{
-                'ring-1 ring-red-500': $input?.errors,
-            }"
-        />
-        <div class="absolute bottom-0 left-0 translate-y-full">
-            <AGHeadlessInputError class="mt-1 text-sm text-red-500" />
-        </div>
-    </AGHeadlessInput>
-</template>
-
-<script setup lang="ts">
-import { componentRef, stringProp } from '@/utils/vue';
-
-import { useInputAttrs } from '@/utils';
-import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
-
-import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
-import AGHeadlessInputInput from '../headless/forms/AGHeadlessInputInput.vue';
-import AGHeadlessInputError from '../headless/forms/AGHeadlessInputError.vue';
-
-defineProps({ name: stringProp() });
-defineOptions({ inheritAttrs: false });
-
-const $input = componentRef<IAGHeadlessInput>();
-const [attrs, className] = useInputAttrs();
-</script>

package/src/components/forms/AGSelect.story.vue

@@ -1,28 +0,0 @@
-<template>
-    <Story>
-        <div class="h-96">
-            <AGSelect v-model="bestMugiwara" :label="label" :options="options" />
-        </div>
-    </Story>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-
-import AGSelect from './AGSelect.vue';
-
-const bestMugiwara = ref(null);
-const label = 'Who\'s the best Mugiwara?';
-const options = [
-    'Monkey D. Luffy',
-    'Roronoa Zoro',
-    'Nami',
-    'Usopp',
-    'Sanji',
-    'Tony Tony Chopper',
-    'Nico Robin',
-    'Franky',
-    'Brook',
-    'Jinbe',
-];
-</script>

package/src/components/forms/AGSelect.vue

@@ -1,53 +0,0 @@
-<template>
-    <AGHeadlessSelect v-bind="props" ref="$select" as="div">
-        <AGHeadlessSelectLabel class="block text-sm font-medium leading-6 text-gray-900" />
-        <div class="relative" :class="{ 'mt-2': $select?.label }">
-            <AGHeadlessSelectButton
-                class="relative w-full cursor-default bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-600"
-                text-class="block truncate"
-                :class="{
-                    'ring-1 ring-red-500': $select?.errors,
-                }"
-            >
-                <template #icon>
-                    <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                        <IconCheveronDown class="h-5 w-5 text-gray-400" />
-                    </span>
-                </template>
-            </AGHeadlessSelectButton>
-            <AGHeadlessSelectOptions
-                class="absolute z-10 mt-1 max-h-60 w-full overflow-auto border bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none"
-            >
-                <AGHeadlessSelectOption
-                    v-for="(option, index) in $select?.options ?? []"
-                    :key="index"
-                    :value="option.value"
-                    class="relative block cursor-default select-none truncate py-2 pl-3 pr-9"
-                    selected-class="font-semibold"
-                    unselected-class="font-normal"
-                    active-class="bg-indigo-600 text-white"
-                    inactive-class="text-gray-900"
-                />
-            </AGHeadlessSelectOptions>
-        </div>
-        <AGHeadlessSelectError class="mt-2 text-sm text-red-600" />
-    </AGHeadlessSelect>
-</template>
-
-<script setup lang="ts">
-import IconCheveronDown from '~icons/zondicons/cheveron-down';
-
-import { componentRef } from '@/utils/vue';
-import { useSelectProps } from '@/components/headless/forms/AGHeadlessSelect';
-import type { IAGHeadlessSelect } from '@/components/headless/forms/AGHeadlessSelect';
-
-import AGHeadlessSelect from '../headless/forms/AGHeadlessSelect.vue';
-import AGHeadlessSelectButton from '../headless/forms/AGHeadlessSelectButton.vue';
-import AGHeadlessSelectError from '../headless/forms/AGHeadlessSelectError.vue';
-import AGHeadlessSelectLabel from '../headless/forms/AGHeadlessSelectLabel.vue';
-import AGHeadlessSelectOption from '../headless/forms/AGHeadlessSelectOption.vue';
-import AGHeadlessSelectOptions from '../headless/forms/AGHeadlessSelectOptions';
-
-const props = defineProps(useSelectProps());
-const $select = componentRef<IAGHeadlessSelect>();
-</script>

package/src/components/forms/index.ts

@@ -1,5 +0,0 @@
-export { default as AGButton } from './AGButton.vue';
-export { default as AGCheckbox } from './AGCheckbox.vue';
-export { default as AGForm } from './AGForm.vue';
-export { default as AGInput } from './AGInput.vue';
-export { default as AGSelect } from './AGSelect.vue';

package/src/components/headless/forms/AGHeadlessButton.vue

@@ -1,51 +0,0 @@
-<template>
-    <component :is="component.tag" v-bind="component.props">
-        <slot />
-    </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { objectWithoutEmpty } from '@noeldemartin/utils';
-
-import { booleanProp, objectProp, stringProp } from '@/utils/vue';
-
-const { href, url, route, routeParams, routeQuery, submit } = defineProps({
-    href: stringProp(),
-    url: stringProp(),
-    route: stringProp(),
-    routeParams: objectProp(() => ({})),
-    routeQuery: objectProp(() => ({})),
-    submit: booleanProp(),
-});
-
-const component = computed(() => {
-    if (route) {
-        return {
-            tag: 'router-link',
-            props: {
-                to: objectWithoutEmpty({
-                    name: route,
-                    params: routeParams,
-                    query: routeQuery,
-                }),
-            },
-        };
-    }
-
-    if (href || url) {
-        return {
-            tag: 'a',
-            props: {
-                target: '_blank',
-                href: href || url,
-            },
-        };
-    }
-
-    return {
-        tag: 'button',
-        props: { type: submit ? 'submit' : 'button' },
-    };
-});
-</script>

package/src/components/headless/forms/AGHeadlessInput.ts

@@ -1,28 +0,0 @@
-import type { ComputedRef, DeepReadonly, ExtractPropTypes, Ref } from 'vue';
-
-import { stringProp } from '@/utils';
-import { extractComponentProps } from '@/components/utils';
-
-export interface IAGHeadlessInput {
-    id: string;
-    name: ComputedRef<string | null>;
-    label: ComputedRef<string | null>;
-    value: ComputedRef<string | number | boolean | null>;
-    errors: DeepReadonly<Ref<string[] | null>>;
-    update(value: string | number | boolean | null): void;
-}
-
-export const inputProps = {
-    name: stringProp(),
-    label: stringProp(),
-};
-
-export function useInputProps(): typeof inputProps {
-    return inputProps;
-}
-
-export function extractInputProps<T extends ExtractPropTypes<typeof inputProps>>(
-    props: T,
-): Pick<T, keyof typeof inputProps> {
-    return extractComponentProps(props, inputProps);
-}

package/src/components/headless/forms/AGHeadlessInput.vue

@@ -1,57 +0,0 @@
-<template>
-    <component :is="as" v-if="as">
-        <slot />
-    </component>
-    <slot v-else />
-</template>
-
-<script setup lang="ts">
-import { computed, inject, provide, readonly } from 'vue';
-import { uuid } from '@noeldemartin/utils';
-
-import { mixedProp, stringProp } from '@/utils/vue';
-import type Form from '@/forms/Form';
-
-import { useInputProps } from './AGHeadlessInput';
-import type { IAGHeadlessInput } from './AGHeadlessInput';
-
-const emit = defineEmits(['update:modelValue']);
-const props = defineProps({
-    as: stringProp('div'),
-    modelValue: mixedProp<string | number | boolean>([String, Number, Boolean]),
-    ...useInputProps(),
-});
-const errors = computed(() => {
-    if (!form || !props.name) {
-        return null;
-    }
-
-    return form.errors[props.name] ?? null;
-});
-const form = inject<Form | null>('form', null);
-const api: IAGHeadlessInput = {
-    id: `input-${uuid()}`,
-    name: computed(() => props.name),
-    label: computed(() => props.label),
-    value: computed(() => {
-        if (form && props.name) {
-            return form.getFieldValue(props.name) as string | number | boolean | null;
-        }
-
-        return props.modelValue;
-    }),
-    errors: readonly(errors),
-    update(value) {
-        if (form && props.name) {
-            form.setFieldValue(props.name, value);
-
-            return;
-        }
-
-        emit('update:modelValue', value);
-    },
-};
-
-provide<IAGHeadlessInput>('input', api);
-defineExpose<IAGHeadlessInput>(api);
-</script>

package/src/components/headless/forms/AGHeadlessInputInput.vue

@@ -1,45 +0,0 @@
-<template>
-    <input
-        :id="input.id"
-        ref="$input"
-        :type="type"
-        :value="value"
-        :aria-invalid="input.errors ? 'true' : 'false'"
-        :aria-describedby="input.errors ? `${input.id}-error` : undefined"
-        :checked="checked"
-        @input="update"
-    >
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-
-import { injectReactiveOrFail, stringProp } from '@/utils';
-import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
-
-const props = defineProps({
-    type: stringProp('text'),
-});
-
-const $input = ref<HTMLInputElement>();
-const input = injectReactiveOrFail<IAGHeadlessInput>(
-    'input',
-    '<AGHeadlessInputInput> must be a child of a <AGHeadlessInput>',
-);
-const value = computed(() => input.value);
-const checked = computed(() => {
-    if (props.type !== 'checkbox') {
-        return;
-    }
-
-    return !!value.value;
-});
-
-function update() {
-    if (!$input.value) {
-        return;
-    }
-
-    input.update(props.type === 'checkbox' ? $input.value.checked : $input.value.value);
-}
-</script>

package/src/components/headless/forms/AGHeadlessSelect.ts

@@ -1,39 +0,0 @@
-import type { ComputedRef, DeepReadonly, ExtractPropTypes, Ref } from 'vue';
-
-import { requiredArrayProp, stringProp } from '@/utils/vue';
-import { extractComponentProps } from '@/components/utils';
-
-export interface IAGSelectOption {
-    value: string | number | boolean | object | null;
-    text: string;
-}
-
-export type IAGSelectOptionValue = string | number | boolean | object | null;
-
-export interface IAGHeadlessSelect {
-    id: string;
-    label: ComputedRef<string | null>;
-    noSelectionText: ComputedRef<string>;
-    buttonText: ComputedRef<string>;
-    selectedOption: ComputedRef<IAGSelectOption | undefined>;
-    options: ComputedRef<IAGSelectOption[]>;
-    errors: DeepReadonly<Ref<string[] | null>>;
-    update(value: IAGSelectOptionValue): void;
-}
-
-export const selectProps = {
-    name: stringProp(),
-    label: stringProp(),
-    options: requiredArrayProp<IAGSelectOptionValue>(),
-    noSelectionText: stringProp(),
-};
-
-export function useSelectProps(): typeof selectProps {
-    return selectProps;
-}
-
-export function extractSelectProps<T extends ExtractPropTypes<typeof selectProps>>(
-    props: T,
-): Pick<T, keyof typeof selectProps> {
-    return extractComponentProps(props, selectProps);
-}

package/src/components/headless/forms/AGHeadlessSelect.vue

@@ -1,76 +0,0 @@
-<template>
-    <Listbox
-        v-slot="{ value, open, disabled }: ComponentProps"
-        :model-value="selectedOption?.value"
-        @update:model-value="update($event)"
-    >
-        <slot :value="value" :open="open" :disabled="disabled" />
-    </Listbox>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, provide } from 'vue';
-import { isObject, toString, uuid } from '@noeldemartin/utils';
-import { Listbox } from '@headlessui/vue';
-
-import { mixedProp } from '@/utils/vue';
-import { translateWithDefault } from '@/lang/utils';
-import type Form from '@/forms/Form';
-import type { ComponentProps } from '@/utils/vue';
-
-import { useSelectProps } from './AGHeadlessSelect';
-import type { IAGHeadlessSelect, IAGSelectOption, IAGSelectOptionValue } from './AGHeadlessSelect';
-
-const emit = defineEmits(['update:modelValue']);
-const props = defineProps({
-    modelValue: mixedProp<IAGSelectOptionValue>(),
-    ...useSelectProps(),
-});
-const form = inject<Form | null>('form', null);
-const noSelectionText = computed(() => props.noSelectionText ?? translateWithDefault('select.noSelection', '-'));
-const options = computed(() =>
-    props.options.map((value) => {
-        const option: IAGSelectOption = {
-            value,
-            text: toString(isObject(value) && 'text' in value ? value.text : value),
-        };
-
-        return option;
-    }));
-const selectedOption = computed(() => {
-    const selectedOptionValue = form && props.name ? form.getFieldValue(props.name) : props.modelValue;
-
-    return options.value.find((option) => option.value === selectedOptionValue);
-});
-const errors = computed(() => {
-    if (!form || !props.name) {
-        return null;
-    }
-
-    return form.errors[props.name] ?? null;
-});
-
-function update(value: IAGSelectOptionValue) {
-    if (form && props.name) {
-        form.setFieldValue(props.name, value);
-
-        return;
-    }
-
-    emit('update:modelValue', value);
-}
-
-const api: IAGHeadlessSelect = {
-    id: `select-${uuid()}`,
-    options,
-    noSelectionText,
-    selectedOption,
-    errors,
-    label: computed(() => props.label),
-    buttonText: computed(() => selectedOption.value?.text ?? noSelectionText.value),
-    update,
-};
-
-provide<IAGHeadlessSelect>('select', api);
-defineExpose<IAGHeadlessSelect>(api);
-</script>

package/src/components/headless/forms/AGHeadlessSelectButton.vue

@@ -1,24 +0,0 @@
-<template>
-    <ListboxButton v-slot="{ value, open, disabled }: ComponentProps">
-        <slot :value="value" :open="open" :disabled="disabled">
-            <span :class="textClass">{{ select?.buttonText }}</span>
-        </slot>
-        <slot name="icon" />
-    </ListboxButton>
-</template>
-
-<script setup lang="ts">
-import { ListboxButton } from '@headlessui/vue';
-
-import { injectReactiveOrFail, stringProp } from '@/utils/vue';
-import type { ComponentProps } from '@/utils/vue';
-
-import type { IAGHeadlessSelect } from './AGHeadlessSelect';
-
-defineProps({ textClass: stringProp() });
-
-const select = injectReactiveOrFail<IAGHeadlessSelect>(
-    'select',
-    '<AGHeadlessSelectButton> must be a child of a <AGHeadlessSelect>',
-);
-</script>

package/src/components/headless/forms/AGHeadlessSelectLabel.vue

@@ -1,24 +0,0 @@
-<template>
-    <ListboxLabel v-if="show" v-slot="{ open, disabled }: ComponentProps">
-        <slot :open="open" :disabled="disabled">
-            {{ select.label }}
-        </slot>
-    </ListboxLabel>
-</template>
-
-<script setup lang="ts">
-import { computed, useSlots } from 'vue';
-import { ListboxLabel } from '@headlessui/vue';
-
-import { injectReactiveOrFail } from '@/utils/vue';
-import type { ComponentProps } from '@/utils/vue';
-
-import type { IAGHeadlessSelect } from './AGHeadlessSelect';
-
-const select = injectReactiveOrFail<IAGHeadlessSelect>(
-    'select',
-    '<AGHeadlessSelectLabel> must be a child of a <AGHeadlessSelect>',
-);
-const slots = useSlots();
-const show = computed(() => !!(select.label || slots.default));
-</script>

package/src/components/headless/forms/AGHeadlessSelectOption.ts

@@ -1,4 +0,0 @@
-export type IAGHeadlessSelectOptionSlotProps = {
-    active: boolean;
-    selected: boolean;
-};

package/src/components/headless/forms/AGHeadlessSelectOption.vue

@@ -1,39 +0,0 @@
-<template>
-    <ListboxOption v-slot="{ active, selected, disabled }: ComponentProps" :value="value" as="template">
-        <slot :active="active" :selected="selected" :disabled="disabled">
-            <li
-                :class="{
-                    [activeClass ?? 'active']: active,
-                    [inactiveClass ?? 'inactive']: !active,
-                    [selectedClass ?? 'selected']: selected,
-                    [unselectedClass ?? 'unselected']: !selected,
-                }"
-            >
-                {{ option?.text }}
-            </li>
-        </slot>
-    </ListboxOption>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { ListboxOption } from '@headlessui/vue';
-
-import { injectReactiveOrFail, requiredMixedProp, stringProp } from '@/utils/vue';
-import type { ComponentProps } from '@/utils/vue';
-
-import type { IAGHeadlessSelect, IAGSelectOptionValue } from './AGHeadlessSelect';
-
-const props = defineProps({
-    value: requiredMixedProp<IAGSelectOptionValue>(),
-    selectedClass: stringProp(),
-    unselectedClass: stringProp(),
-    activeClass: stringProp(),
-    inactiveClass: stringProp(),
-});
-const select = injectReactiveOrFail<IAGHeadlessSelect>(
-    'select',
-    '<AGHeadlessSelectOption> must be a child of a <AGHeadlessSelect>',
-);
-const option = computed(() => select.options.find((selectOption) => selectOption.value === props.value));
-</script>

package/src/components/headless/forms/AGHeadlessSelectOptions.ts

@@ -1,3 +0,0 @@
-import { ListboxOptions } from '@headlessui/vue';
-
-export default ListboxOptions;

package/src/components/headless/forms/index.ts

@@ -1,14 +0,0 @@
-export * from './AGHeadlessInput';
-export * from './AGHeadlessSelect';
-export * from './AGHeadlessSelectOption';
-export { default as AGHeadlessButton } from './AGHeadlessButton.vue';
-export { default as AGHeadlessInput } from './AGHeadlessInput.vue';
-export { default as AGHeadlessInputError } from './AGHeadlessInputError.vue';
-export { default as AGHeadlessInputInput } from './AGHeadlessInputInput.vue';
-export { default as AGHeadlessInputLabel } from './AGHeadlessInputLabel.vue';
-export { default as AGHeadlessSelect } from './AGHeadlessSelect.vue';
-export { default as AGHeadlessSelectButton } from './AGHeadlessSelectButton.vue';
-export { default as AGHeadlessSelectError } from './AGHeadlessSelectError.vue';
-export { default as AGHeadlessSelectLabel } from './AGHeadlessSelectLabel.vue';
-export { default as AGHeadlessSelectOption } from './AGHeadlessSelectOption.vue';
-export { default as AGHeadlessSelectOptions } from './AGHeadlessSelectOptions';