@aerogel/core 0.0.0-next.9a02fcd3bcf698211dd7a71d4c48257c96dd7832 → 0.0.0-next.a3194a101ceda87a7033fa5e283e046bad6f4bfc

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aerogel/core",
     "description": "The Lightest Solid",
-    "version": "0.0.0-next.9a02fcd3bcf698211dd7a71d4c48257c96dd7832",
+    "version": "0.0.0-next.a3194a101ceda87a7033fa5e283e046bad6f4bfc",
     "main": "dist/aerogel-core.cjs.js",
     "module": "dist/aerogel-core.esm.js",
     "types": "dist/aerogel-core.d.ts",

package/src/components/forms/AGInput.vue

@@ -13,6 +13,7 @@
                 'ring-1 ring-red-500': $input?.errors,
             }"
         />
+        <AGHeadlessInputDescription />
         <div class="absolute bottom-0 left-0 translate-y-full">
             <AGHeadlessInputError class="mt-1 text-sm text-red-500" />
         </div>
@@ -26,6 +27,7 @@ import { useInputProps } from '@/components/headless/forms/AGHeadlessInput';
 import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
 
 import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
+import AGHeadlessInputDescription from '../headless/forms/AGHeadlessInputDescription.vue';
 import AGHeadlessInputError from '../headless/forms/AGHeadlessInputError.vue';
 import AGHeadlessInputInput from '../headless/forms/AGHeadlessInputInput.vue';
 import AGHeadlessInputLabel from '../headless/forms/AGHeadlessInputLabel.vue';

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

@@ -7,6 +7,7 @@ export interface IAGHeadlessInput {
     id: string;
     name: ComputedRef<string | null>;
     label: ComputedRef<string | null>;
+    description: ComputedRef<string | boolean | null>;
     value: ComputedRef<string | number | boolean | null>;
     errors: DeepReadonly<Ref<string[] | null>>;
     update(value: string | number | boolean | null): void;
@@ -15,6 +16,7 @@ export interface IAGHeadlessInput {
 export const inputProps = {
     name: stringProp(),
     label: stringProp(),
+    description: stringProp(),
 };
 
 export function useInputProps(): typeof inputProps {

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

@@ -33,6 +33,7 @@ const api: IAGHeadlessInput = {
     id: `input-${uuid()}`,
     name: computed(() => props.name),
     label: computed(() => props.label),
+    description: computed(() => props.description),
     value: computed(() => {
         if (form && props.name) {
             return form.getFieldValue(props.name) as string | number | boolean | null;

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

@@ -0,0 +1,28 @@
+<template>
+    <slot :id="`${input.id}-description`">
+        <AGMarkdown
+            v-if="show"
+            v-bind="$attrs"
+            :id="`${input.id}-description`"
+            :text="text"
+        />
+    </slot>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { injectReactiveOrFail } from '@/utils/vue';
+
+import AGMarkdown from '../../lib/AGMarkdown.vue';
+import type { IAGHeadlessInput } from './AGHeadlessInput';
+
+defineOptions({ inheritAttrs: false });
+
+const input = injectReactiveOrFail<IAGHeadlessInput>(
+    'input',
+    '<AGHeadlessInputDescription> must be a child of a <AGHeadlessInput>',
+);
+const text = computed(() => (typeof input.description === 'string' ? input.description : ''));
+const show = computed(() => !!input.description);
+</script>

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

@@ -6,7 +6,9 @@
         :type="type"
         :value="value"
         :aria-invalid="input.errors ? 'true' : 'false'"
-        :aria-describedby="input.errors ? `${input.id}-error` : undefined"
+        :aria-describedby="
+            input.errors ? `${input.id}-error` : input.description ? `${input.id}-description` : undefined
+        "
         :checked="checked"
         @input="update"
     >

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

@@ -3,6 +3,7 @@ export * from './AGHeadlessSelect';
 export * from './AGHeadlessSelectOption';
 export { default as AGHeadlessButton } from './AGHeadlessButton.vue';
 export { default as AGHeadlessInput } from './AGHeadlessInput.vue';
+export { default as AGHeadlessInputDescription } from './AGHeadlessInputDescription.vue';
 export { default as AGHeadlessInputError } from './AGHeadlessInputError.vue';
 export { default as AGHeadlessInputInput } from './AGHeadlessInputInput.vue';
 export { default as AGHeadlessInputLabel } from './AGHeadlessInputLabel.vue';

package/src/components/lib/AGMarkdown.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, h } from 'vue';
+import { computed, h, useAttrs } from 'vue';
 
 import { renderMarkdown } from '@/utils/markdown';
 import { booleanProp, objectProp, stringProp } from '@/utils/vue';
@@ -17,6 +17,7 @@ const props = defineProps({
     text: stringProp(),
 });
 
+const attrs = useAttrs();
 const markdown = computed(() => props.text ?? (props.langKey && translate(props.langKey, props.langParams ?? {})));
 const html = computed(() => {
     if (!markdown.value) {
@@ -32,5 +33,9 @@ const html = computed(() => {
     return renderedHtml;
 });
 const root = () =>
-    h(props.as ?? (props.inline ? 'span' : 'div'), { class: props.inline ? '' : 'prose', innerHTML: html.value });
+    h(props.as ?? (props.inline ? 'span' : 'div'), {
+        class: props.inline ? '' : 'prose',
+        innerHTML: html.value,
+        ...attrs,
+    });
 </script>

package/src/directives/index.ts

@@ -10,6 +10,8 @@ const builtInDirectives: Record<string, Directive> = {
     'measure': measure,
 };
 
+export * from './measure';
+
 export default definePlugin({
     install(app, options) {
         const directives = {

package/src/directives/measure.ts

@@ -1,12 +1,21 @@
 import { defineDirective } from '@/utils/vue';
 
+export interface ElementSize {
+    width: number;
+    height: number;
+}
+
+export type MeasureDirectiveListener = (size: ElementSize) => unknown;
+
 export default defineDirective({
-    mounted(element: HTMLElement, { value }: { value?: () => unknown }) {
+    mounted(element: HTMLElement, { value }) {
+        const listener = typeof value === 'function' ? (value as MeasureDirectiveListener) : null;
         const sizes = element.getBoundingClientRect();
 
+        // TODO guard with modifiers.css once typed properly
         element.style.setProperty('--width', `${sizes.width}px`);
         element.style.setProperty('--height', `${sizes.height}px`);
 
-        value?.();
+        listener?.({ width: sizes.width, height: sizes.height });
     },
 });

package/src/main.ts

@@ -1,5 +1,6 @@
 export * from './bootstrap';
 export * from './components';
+export * from './directives';
 export * from './errors';
 export * from './forms';
 export * from './jobs';