@aerogel/core 0.0.0-next.88c59e62f64db70aedfbc4c31b5bbc287be44483 → 0.0.0-next.9487bb13082b9d479112445804d906125ded5cbc

package/histoire.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'histoire';
+import { HstVue } from '@histoire/plugin-vue';
+
+export default defineConfig({
+    setupFile: '/src/main.histoire.ts',
+    plugins: [HstVue()],
+});

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aerogel/core",
     "description": "The Lightest Solid",
-    "version": "0.0.0-next.88c59e62f64db70aedfbc4c31b5bbc287be44483",
+    "version": "0.0.0-next.9487bb13082b9d479112445804d906125ded5cbc",
     "main": "dist/aerogel-core.cjs.js",
     "module": "dist/aerogel-core.esm.js",
     "types": "dist/aerogel-core.d.ts",
@@ -10,6 +10,8 @@
         "build": "rm dist -rf && npm run build:js && npm run build:types",
         "build:js": "noeldemartin-build-javascript",
         "build:types": "noeldemartin-build-types && cp src/types/virtual.d.ts dist",
+        "histoire:dev": "histoire dev",
+        "histoire:prod": "histoire build",
         "lint": "noeldemartin-lint src",
         "publish-next": "noeldemartin-publish-next",
         "test": "vitest --run"
@@ -42,6 +44,7 @@
     "devDependencies": {
         "@aerogel/vite": "*",
         "@types/dompurify": "^3.0.2",
-        "@types/marked": "^5.0.0"
+        "@types/marked": "^5.0.0",
+        "tailwindcss": "^3.3.5"
     }
 }

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

package/src/assets/histoire.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

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

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

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

@@ -2,3 +2,4 @@ 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/AGHeadlessInput.vue

@@ -28,7 +28,7 @@ const errors = computed(() => {
     return form.errors[props.name] ?? null;
 });
 const form = inject<Form | null>('form', null);
-const publicApi: IAGHeadlessInput = {
+const api: IAGHeadlessInput = {
     id: `input-${uuid()}`,
     value: computed(() => {
         if (form && props.name) {
@@ -49,6 +49,6 @@ const publicApi: IAGHeadlessInput = {
     },
 };
 
-provide<IAGHeadlessInput>('input', publicApi);
-defineExpose<IAGHeadlessInput>(publicApi);
+provide<IAGHeadlessInput>('input', api);
+defineExpose<IAGHeadlessInput>(api);
 </script>

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

@@ -1,17 +1,29 @@
-import type { ComputedRef } from 'vue';
+import type { ComputedRef, DeepReadonly, Ref } from 'vue';
 
-import { requiredArrayProp } from '@/utils/vue';
+import { requiredArrayProp, stringProp } from '@/utils/vue';
 
-export type SelectOptionValue = string | number | boolean | object | null;
+export interface IAGSelectOption {
+    value: string | number | boolean | object | null;
+    text: string;
+}
+
+export type IAGSelectOptionValue = string | number | boolean | object | null;
 
 export interface IAGHeadlessSelect {
-    value: ComputedRef<SelectOptionValue | undefined>;
-    options: SelectOptionValue[];
-    update(value: string | number | boolean | null): void;
+    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 = {
-    options: requiredArrayProp<SelectOptionValue>(),
+    options: requiredArrayProp<IAGSelectOptionValue>(),
+    label: stringProp(),
+    noSelectionText: stringProp(),
 };
 
 export function useSelectProps(): typeof selectProps {

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

@@ -1,45 +1,77 @@
 <template>
-    <Listbox :model-value="publicApi.value.value" @update:model-value="publicApi.update($event)">
-        <slot />
+    <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 } from 'vue';
+import { computed, inject, provide } from 'vue';
+import { isObject, toString, uuid } from '@noeldemartin/utils';
 import { Listbox } from '@headlessui/vue';
 
 import { mixedProp, stringProp } 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, SelectOptionValue } from './AGHeadlessSelect';
+import type { IAGHeadlessSelect, IAGSelectOption, IAGSelectOptionValue } from './AGHeadlessSelect';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
     name: stringProp(),
-    modelValue: mixedProp<SelectOptionValue>(),
+    modelValue: mixedProp<IAGSelectOptionValue>(),
     ...useSelectProps(),
 });
 const form = inject<Form | null>('form', null);
-const publicApi: IAGHeadlessSelect = {
-    value: computed(() => {
-        if (form && props.name) {
-            return form.getFieldValue(props.name);
-        }
-
-        return props.modelValue;
-    }),
-    options: props.options,
-    update(value) {
-        if (form && props.name) {
-            form.setFieldValue(props.name, value);
-
-            return;
-        }
-
-        emit('update:modelValue', value);
-    },
+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,
 };
 
-defineExpose<IAGHeadlessSelect>(publicApi);
+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,21 @@
+<template>
+    <ListboxLabel v-if="select.label" v-slot="{ open, disabled }: ComponentProps">
+        <slot :open="open" :disabled="disabled">
+            {{ select.label }}
+        </slot>
+    </ListboxLabel>
+</template>
+
+<script setup lang="ts">
+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>',
+);
+</script>

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

@@ -1,8 +1,4 @@
-import { ListboxOption } from '@headlessui/vue';
-
 export type IAGHeadlessSelectOptionSlotProps = {
     active: boolean;
     selected: boolean;
 };
-
-export default ListboxOption;

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,
+                }"
+            >
+                {{ 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/index.ts

@@ -1,12 +1,14 @@
 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';
-export { default as AGHeadlessSelectLabel } from './AGHeadlessSelectLabel';
-export { default as AGHeadlessSelectOption, IAGHeadlessSelectOptionSlotProps } from './AGHeadlessSelectOption';
+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/forms/Form.ts

@@ -41,13 +41,14 @@ export type GetFormFieldValue<TType> = TType extends typeof FormFieldTypes.Strin
     ? object
     : never;
 
+const validForms: WeakMap<Form, ComputedRef<boolean>> = new WeakMap();
+
 export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinitions> extends MagicObject {
 
     public errors: DeepReadonly<UnwrapNestedRefs<FormErrors<Fields>>>;
 
     private _fields: Fields;
     private _data: FormData<Fields>;
-    private _valid: ComputedRef<boolean>;
     private _submitted: Ref<boolean>;
     private _errors: FormErrors<Fields>;
 
@@ -58,13 +59,17 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
         this._submitted = ref(false);
         this._data = this.getInitialData(fields);
         this._errors = this.getInitialErrors(fields);
-        this._valid = computed(() => !Object.values(this._errors).some((error) => error !== null));
+
+        validForms.set(
+            this,
+            computed(() => !Object.values(this._errors).some((error) => error !== null)),
+        );
 
         this.errors = readonly(this._errors);
     }
 
     public get valid(): boolean {
-        return this._valid.value;
+        return !!validForms.get(this)?.value;
     }
 
     public get submitted(): boolean {

package/src/main.histoire.ts

@@ -0,0 +1 @@
+import './assets/histoire.css';

package/src/utils/vue.ts

@@ -108,7 +108,7 @@ export function requiredEnumProp<Enum extends Record<string, unknown>>(
     };
 }
 
-export function requiredMixedProp<T>(type: PropType<T>): RequiredProp<T> {
+export function requiredMixedProp<T>(type?: PropType<T>): RequiredProp<T> {
     return {
         type,
         required: true,

package/tailwind.config.js

@@ -0,0 +1,4 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ['./src/**/*.{vue,ts}'],
+};

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

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

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

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