@aerogel/core 0.0.0-next.7f6ed5a1f91688a86bf5ede2adc465e4fd6cfdea → 0.0.0-next.824cf5311c4335d119158f507dad094ed4f4f0b6

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

@@ -1,8 +1,28 @@
-import type { ComputedRef, DeepReadonly, Ref } from 'vue';
+import type { ComputedRef, DeepReadonly, ExtractPropTypes, Ref } from 'vue';
+
+import { stringProp } from '@/utils';
+import { extractComponentProps } from '@/components/utils';
 
 export interface IAGHeadlessInput {
     id: string;
-    value: ComputedRef<string | number | null>;
+    name: ComputedRef<string | null>;
+    label: ComputedRef<string | null>;
+    value: ComputedRef<string | number | boolean | null>;
     errors: DeepReadonly<Ref<string[] | null>>;
-    update(value: string | number | null): void;
+    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

@@ -9,16 +9,17 @@
 import { computed, inject, provide, readonly } from 'vue';
 import { uuid } from '@noeldemartin/utils';
 
-import { stringProp } from '@/utils/vue';
+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(),
-    name: stringProp(),
-    modelValue: stringProp(),
+    as: stringProp('div'),
+    modelValue: mixedProp<string | number | boolean>([String, Number, Boolean]),
+    ...useInputProps(),
 });
 const errors = computed(() => {
     if (!form || !props.name) {
@@ -27,12 +28,14 @@ const errors = computed(() => {
 
     return form.errors[props.name] ?? null;
 });
-const form = inject<Form>('form');
-const publicApi: IAGHeadlessInput = {
-    id: uuid(),
+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);
+            return form.getFieldValue(props.name) as string | number | boolean | null;
         }
 
         return props.modelValue;
@@ -49,6 +52,6 @@ const publicApi: IAGHeadlessInput = {
     },
 };
 
-provide<IAGHeadlessInput>('input', publicApi);
-defineExpose<IAGHeadlessInput>(publicApi);
+provide<IAGHeadlessInput>('input', api);
+defineExpose<IAGHeadlessInput>(api);
 </script>

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

@@ -5,18 +5,22 @@
 </template>
 
 <script setup lang="ts">
-import { injectReactiveOrFail } from '@/utils';
+import { computed } from 'vue';
+
+import { injectReactiveOrFail } from '@/utils/vue';
+import { translateWithDefault } from '@/lang/utils';
 
 import type { IAGHeadlessInput } from './AGHeadlessInput';
-import { computed } from 'vue';
-import { lang } from '@/lang';
 
-const input = injectReactiveOrFail<IAGHeadlessInput>('input');
+const input = injectReactiveOrFail<IAGHeadlessInput>(
+    'input',
+    '<AGHeadlessInputError> must be a child of a <AGHeadlessInput>',
+);
 const errorMessage = computed(() => {
     if (!input.errors) {
         return null;
     }
 
-    return lang(`errors.${input.errors[0]}`);
+    return translateWithDefault(`errors.${input.errors[0]}`, `Error: ${input.errors[0]}`);
 });
 </script>

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

@@ -1,10 +1,12 @@
 <template>
     <input
+        :id="input.id"
         ref="$input"
-        type="text"
+        :type="type"
         :value="value"
         :aria-invalid="input.errors ? 'true' : 'false'"
         :aria-describedby="input.errors ? `${input.id}-error` : undefined"
+        :checked="checked"
         @input="update"
     >
 </template>
@@ -12,18 +14,32 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
-import { injectReactiveOrFail } from '@/utils';
+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');
+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($input.value.value);
+    input.update(props.type === 'checkbox' ? $input.value.checked : $input.value.value);
 }
 </script>

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

@@ -0,0 +1,22 @@
+<template>
+    <label v-if="show" :for="input.id">
+        <slot>
+            {{ input.label }}
+        </slot>
+    </label>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+
+import { injectReactiveOrFail } from '@/utils/vue';
+
+import type { IAGHeadlessInput } from './AGHeadlessInput';
+
+const input = injectReactiveOrFail<IAGHeadlessInput>(
+    'input',
+    '<AGHeadlessInputLabel> must be a child of a <AGHeadlessInput>',
+);
+const slots = useSlots();
+const show = computed(() => !!(input.label || slots.default));
+</script>

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

@@ -0,0 +1,42 @@
+import type { ComputedRef, DeepReadonly, ExtractPropTypes, Ref } from 'vue';
+import type { Writable } from '@noeldemartin/utils';
+
+import { mixedProp, requiredArrayProp, stringProp } from '@/utils/vue';
+import { extractComponentProps } from '@/components/utils';
+import type { FormFieldValue } from '@/forms/Form';
+
+export interface IAGHeadlessSelect {
+    id: string;
+    label: ComputedRef<string | null>;
+    noSelectionText: ComputedRef<string>;
+    buttonText: ComputedRef<string>;
+    renderText: ComputedRef<(value: FormFieldValue) => string>;
+    selectedOption: ComputedRef<FormFieldValue | null>;
+    options: ComputedRef<FormFieldValue[]>;
+    errors: DeepReadonly<Ref<string[] | null>>;
+    update(value: FormFieldValue): void;
+}
+
+export const selectProps = {
+    name: stringProp(),
+    label: stringProp(),
+    options: requiredArrayProp<FormFieldValue>(),
+    noSelectionText: stringProp(),
+    optionsText: mixedProp<string | ((option: FormFieldValue) => string)>(),
+};
+
+export const selectEmits = ['update:modelValue'] as const;
+
+export function useSelectProps(): typeof selectProps {
+    return selectProps;
+}
+
+export function useSelectEmits(): Writable<typeof selectEmits> {
+    return [...selectEmits];
+}
+
+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

@@ -0,0 +1,77 @@
+<template>
+    <Listbox
+        v-slot="{ value, open, disabled }: ComponentProps"
+        :model-value="selectedOption"
+        @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 { 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 { FormFieldValue } from '@/forms/Form';
+import type { ComponentProps } from '@/utils/vue';
+
+import { useSelectEmits, useSelectProps } from './AGHeadlessSelect';
+import type { IAGHeadlessSelect } from './AGHeadlessSelect';
+
+const emit = defineEmits(useSelectEmits());
+const props = defineProps({
+    modelValue: mixedProp<FormFieldValue>(),
+    ...useSelectProps(),
+});
+const renderText = computed(() => {
+    if (typeof props.optionsText === 'function') {
+        return props.optionsText;
+    }
+
+    if (typeof props.optionsText === 'string') {
+        return (option: FormFieldValue): string => toString(option[props.optionsText as keyof FormFieldValue]);
+    }
+
+    return (option: FormFieldValue) => toString(option);
+});
+const form = inject<Form | null>('form', null);
+const noSelectionText = computed(() => props.noSelectionText ?? translateWithDefault('select.noSelection', '-'));
+const selectedOption = computed(() => (form && props.name ? form.getFieldValue(props.name) : props.modelValue));
+const errors = computed(() => {
+    if (!form || !props.name) {
+        return null;
+    }
+
+    return form.errors[props.name] ?? null;
+});
+
+function update(value: FormFieldValue) {
+    if (form && props.name) {
+        form.setFieldValue(props.name, value);
+
+        return;
+    }
+
+    emit('update:modelValue', value);
+}
+
+const api: IAGHeadlessSelect = {
+    id: `select-${uuid()}`,
+    noSelectionText,
+    selectedOption,
+    errors,
+    options: computed(() => props.options),
+    label: computed(() => props.label),
+    buttonText: computed(() =>
+        selectedOption.value === null ? noSelectionText.value : renderText.value(selectedOption.value)),
+    renderText,
+    update,
+};
+
+provide<IAGHeadlessSelect>('select', api);
+defineExpose<IAGHeadlessSelect>(api);
+</script>

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

@@ -0,0 +1,24 @@
+<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/AGHeadlessSelectError.vue

@@ -0,0 +1,26 @@
+<template>
+    <p v-if="errorMessage" :id="`${select.id}-error`">
+        {{ errorMessage }}
+    </p>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { injectReactiveOrFail } from '@/utils/vue';
+import { translateWithDefault } from '@/lang/utils';
+
+import type { IAGHeadlessSelect } from './AGHeadlessSelect';
+
+const select = injectReactiveOrFail<IAGHeadlessSelect>(
+    'select',
+    '<AGHeadlessSelectError> must be a child of a <AGHeadlessSelect>',
+);
+const errorMessage = computed(() => {
+    if (!select.errors) {
+        return null;
+    }
+
+    return translateWithDefault(`errors.${select.errors[0]}`, `Error: ${select.errors[0]}`);
+});
+</script>

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

@@ -0,0 +1,24 @@
+<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

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

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

@@ -0,0 +1,39 @@
+<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,
+                }"
+            >
+                {{ select.renderText(value) }}
+            </li>
+        </slot>
+    </ListboxOption>
+</template>
+
+<script setup lang="ts">
+import { ListboxOption } from '@headlessui/vue';
+
+import { injectReactiveOrFail, requiredMixedProp, stringProp } from '@/utils/vue';
+import type { ComponentProps } from '@/utils/vue';
+import type { FormFieldValue } from '@/forms/Form';
+
+import type { IAGHeadlessSelect } from './AGHeadlessSelect';
+
+defineProps({
+    value: requiredMixedProp<FormFieldValue>(),
+    selectedClass: stringProp(),
+    unselectedClass: stringProp(),
+    activeClass: stringProp(),
+    inactiveClass: stringProp(),
+});
+
+const select = injectReactiveOrFail<IAGHeadlessSelect>(
+    'select',
+    '<AGHeadlessSelectOption> must be a child of a <AGHeadlessSelect>',
+);
+</script>

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

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

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

@@ -1,4 +1,14 @@
-import AGHeadlessButton from './AGHeadlessButton.vue';
-import AGHeadlessInput from './AGHeadlessInput.vue';
-
-export { AGHeadlessButton, AGHeadlessInput };
+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';

package/src/components/headless/index.ts

@@ -1,2 +1,3 @@
 export * from './forms';
 export * from './modals';
+export * from './snackbars';

package/src/components/headless/modals/AGHeadlessModal.ts

@@ -1,3 +1,8 @@
+import { computed } from 'vue';
+import type { ExtractPropTypes, Ref } from 'vue';
+
+import { booleanProp, stringProp } from '@/utils';
+import { extractComponentProps } from '@/components/utils';
 import type { IAGModal } from '@/components/modals/AGModal';
 
 export interface IAGHeadlessModal extends IAGModal {}
@@ -5,3 +10,25 @@ export interface IAGHeadlessModal extends IAGModal {}
 export interface IAGHeadlessModalDefaultSlotProps {
     close(result?: unknown): Promise<void>;
 }
+
+export const modalProps = {
+    cancellable: booleanProp(true),
+    title: stringProp(),
+};
+
+export function useModalProps(): typeof modalProps {
+    return modalProps;
+}
+
+export function extractModalProps<T extends ExtractPropTypes<typeof modalProps>>(
+    props: T,
+): Pick<T, keyof typeof modalProps> {
+    return extractComponentProps(props, modalProps);
+}
+
+export function useModalExpose($modal: Ref<IAGHeadlessModal | undefined>): IAGModal {
+    return {
+        close: async () => $modal.value?.close(),
+        cancellable: computed(() => !!$modal.value?.cancellable),
+    };
+}

package/src/components/headless/modals/AGHeadlessModal.vue

@@ -11,19 +11,21 @@ import type { VNode } from 'vue';
 
 import Events from '@/services/Events';
 import { useEvent } from '@/utils/composition/events';
-import { booleanProp, injectReactiveOrFail } from '@/utils/vue';
+import { injectReactiveOrFail } from '@/utils/vue';
 import type { IAGModalContext } from '@/components/modals/AGModalContext';
 
+import { useModalProps } from './AGHeadlessModal';
 import type { IAGHeadlessModal, IAGHeadlessModalDefaultSlotProps } from './AGHeadlessModal';
 
-const props = defineProps({
-    cancellable: booleanProp(true),
-});
-
+const props = defineProps(useModalProps());
 const $root = ref<{ $el?: HTMLElement } | null>(null);
 const hidden = ref(true);
 const closed = ref(false);
-const { modal } = injectReactiveOrFail<IAGModalContext>('modal');
+const { modal } = injectReactiveOrFail<IAGModalContext>(
+    'modal',
+    'could not obtain modal reference from <AGHeadlessModal>, ' +
+        'did you render this component manually? Show it using $ui.openModal() instead',
+);
 
 async function hide(): Promise<void> {
     if (!$root.value?.$el) {

package/src/components/headless/modals/AGHeadlessModalPanel.vue

@@ -1,7 +1,11 @@
 <template>
     <DialogPanel>
         <slot />
-        <AGModalContext v-if="childModal" :child-index="modal.childIndex + 1" :modal="childModal" />
+
+        <template v-if="childModal">
+            <div class="pointer-events-none fixed inset-0 z-50 bg-black/30" />
+            <AGModalContext :child-index="modal.childIndex + 1" :modal="childModal" />
+        </template>
     </DialogPanel>
 </template>
 
@@ -15,6 +19,10 @@ import type { IAGModalContext } from '@/components/modals/AGModalContext';
 
 import AGModalContext from '../../modals/AGModalContext.vue';
 
-const modal = injectReactiveOrFail<IAGModalContext>('modal');
+const modal = injectReactiveOrFail<IAGModalContext>(
+    'modal',
+    'could not obtain modal reference from <AGHeadlessModalPanel>, ' +
+        'did you render this component manually? Show it using $ui.openModal() instead',
+);
 const childModal = computed(() => UI.modals[modal.childIndex] ?? null);
 </script>

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

@@ -1,6 +1,4 @@
-import AGHeadlessModal from './AGHeadlessModal.vue';
-import AGHeadlessModalPanel from './AGHeadlessModalPanel.vue';
-import AGHeadlessModalTitle from './AGHeadlessModalTitle.vue';
-import type { IAGHeadlessModal } from './AGHeadlessModal';
-
-export { AGHeadlessModal, AGHeadlessModalPanel, AGHeadlessModalTitle, IAGHeadlessModal };
+export * from './AGHeadlessModal';
+export { default as AGHeadlessModal } from './AGHeadlessModal.vue';
+export { default as AGHeadlessModalPanel } from './AGHeadlessModalPanel.vue';
+export { default as AGHeadlessModalTitle } from './AGHeadlessModalTitle.vue';

package/src/components/headless/snackbars/AGHeadlessSnackbar.vue

@@ -0,0 +1,10 @@
+<template>
+    <div class="pointer-events-auto">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Stub import to fix build (otherwise, this file doesn't seem to be treated as a module).
+import 'virtual:aerogel';
+</script>

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

@@ -0,0 +1,40 @@
+import type { ExtractPropTypes } from 'vue';
+import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
+
+import UI from '@/ui/UI';
+import { arrayProp, enumProp, requiredStringProp } from '@/utils/vue';
+import { Colors } from '@/components/constants';
+import { objectWithout } from '@noeldemartin/utils';
+
+export { default as AGHeadlessSnackbar } from './AGHeadlessSnackbar.vue';
+
+export const SnackbarColors = objectWithout(Colors, ['Primary', 'Clear']);
+export const snackbarProps = {
+    id: requiredStringProp(),
+    message: requiredStringProp(),
+    actions: arrayProp<SnackbarAction>(() => []),
+    color: enumProp(SnackbarColors, Colors.Secondary),
+};
+
+export interface SnackbarAction {
+    text: string;
+    dismiss?: boolean;
+    handler?(): unknown;
+}
+
+export type SnackbarColor = (typeof SnackbarColors)[keyof typeof SnackbarColors];
+export type AGSnackbarProps = ObjectWithoutEmpty<ExtractPropTypes<typeof snackbarProps>>;
+
+export function useSnackbarProps(): typeof snackbarProps {
+    return snackbarProps;
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useSnackbar(props: ExtractPropTypes<typeof snackbarProps>) {
+    function activate(action: SnackbarAction): void {
+        action.handler?.();
+        action.dismiss && UI.hideSnackbar(props.id);
+    }
+
+    return { activate };
+}

package/src/components/index.ts

@@ -1,8 +1,11 @@
 import AGAppLayout from './AGAppLayout.vue';
+import AGAppOverlays from './AGAppOverlays.vue';
 
-export { AGAppLayout };
+export { AGAppLayout, AGAppOverlays };
 
-export * from './basic';
+export * from './constants';
 export * from './forms';
 export * from './headless';
+export * from './lib';
 export * from './modals';
+export * from './snackbars';

package/src/components/lib/AGErrorMessage.vue

@@ -0,0 +1,16 @@
+<template>
+    <AGMarkdown :text="message" inline />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import Errors from '@/errors/Errors';
+import { requiredObjectProp } from '@/utils/vue';
+import type { ErrorSource } from '@/errors/Errors.state';
+
+import AGMarkdown from './AGMarkdown.vue';
+
+const props = defineProps({ error: requiredObjectProp<ErrorSource>() });
+const message = computed(() => Errors.getErrorMessage(props.error));
+</script>

package/src/components/lib/AGLink.vue

@@ -0,0 +1,9 @@
+<template>
+    <AGHeadlessButton class="font-medium hover:underline">
+        <slot />
+    </AGHeadlessButton>
+</template>
+
+<script setup lang="ts">
+import AGHeadlessButton from '../headless/forms/AGHeadlessButton.vue';
+</script>