@aerogel/core 0.0.0-next.d197d66a9d339318d752a1d8a96b2919faba3003 → 0.0.0-next.d4f3ae130b52cace673d7c95681c19256ee1acb4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.0.0-next.d197d66a9d339318d752a1d8a96b2919faba3003",
+    "version": "0.0.0-next.d4f3ae130b52cace673d7c95681c19256ee1acb4",
     "type": "module",
     "sideEffects": false,
     "exports": {
@@ -25,7 +25,7 @@
     "peerDependencies": {
         "@tailwindcss/forms": "^0.5.10",
         "@tailwindcss/typography": "^0.5.16",
-        "tailwindcss": "^4.1.1",
+        "tailwindcss": "^4.1.4",
         "vue": "^3.5.0"
     },
     "dependencies": {

package/src/components/contracts/AlertModal.ts

@@ -1,3 +1,6 @@
+import { computed } from 'vue';
+
+import { translateWithDefault } from '@aerogel/core/lang';
 import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
 
 export interface AlertModalProps {
@@ -6,3 +9,11 @@ export interface AlertModalProps {
 }
 
 export interface AlertModalExpose extends ModalExpose<void> {}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useAlertModal(props: AlertModalProps) {
+    const renderedTitle = computed(() => props.title ?? translateWithDefault('ui.alert', 'Alert'));
+    const titleHidden = computed(() => !props.title);
+
+    return { renderedTitle, titleHidden };
+}

package/src/components/contracts/ConfirmModal.ts

@@ -39,8 +39,10 @@ export function useConfirmModal(props: ConfirmModalProps) {
         ),
     );
 
+    const renderedTitle = computed(() => props.title ?? translateWithDefault('ui.confirm', 'Confirm'));
+    const titleHidden = computed(() => !props.title);
     const renderedAcceptText = computed(() => props.acceptText ?? translateWithDefault('ui.accept', 'Ok'));
     const renderedCancelText = computed(() => props.cancelText ?? translateWithDefault('ui.cancel', 'Cancel'));
 
-    return { form, renderedAcceptText, renderedCancelText };
+    return { form, renderedTitle, titleHidden, renderedAcceptText, renderedCancelText };
 }

package/src/components/ui/AdvancedOptions.vue

@@ -1,7 +1,7 @@
 <template>
     <details class="group">
         <summary
-            class="-ml-2 flex w-[max-content] cursor-pointer items-center rounded-lg py-2 pr-3 pl-1 hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700"
+            class="-ml-2 flex w-[max-content] items-center rounded-lg py-2 pr-3 pl-1 hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700"
         >
             <IconCheveronRight class="size-6 transition-transform group-open:rotate-90" />
             <span>{{ $td('ui.advancedOptions', 'Advanced options') }}</span>

package/src/components/ui/AlertModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <Modal :title>
+    <Modal :title="renderedTitle" :title-hidden="titleHidden">
         <Markdown :text="message" />
     </Modal>
 </template>
@@ -7,8 +7,11 @@
 <script setup lang="ts">
 import Modal from '@aerogel/core/components/ui/Modal.vue';
 import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import { useAlertModal } from '@aerogel/core/components/contracts/AlertModal';
 import type { AlertModalExpose, AlertModalProps } from '@aerogel/core/components/contracts/AlertModal';
 
-defineProps<AlertModalProps>();
+const props = defineProps<AlertModalProps>();
+const { renderedTitle, titleHidden } = useAlertModal(props);
+
 defineExpose<AlertModalExpose>();
 </script>

package/src/components/ui/Button.vue

@@ -5,8 +5,10 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+
 import HeadlessButton from '@aerogel/core/components/headless/HeadlessButton.vue';
-import { computedVariantClasses } from '@aerogel/core/utils/classes';
+import { variantClasses } from '@aerogel/core/utils/classes';
 import type { ButtonProps } from '@aerogel/core/components/contracts/Button';
 import type { Variants } from '@aerogel/core/utils/classes';
 
@@ -14,10 +16,10 @@ const { class: baseClasses, size, variant, disabled, ...props } = defineProps<Bu
 
 /* eslint-disable vue/max-len */
 // prettier-ignore
-const renderedClasses = computedVariantClasses<Variants<Pick<ButtonProps, 'size' | 'variant' | 'disabled'>>>(
+const renderedClasses = computed(() => variantClasses<Variants<Pick<ButtonProps, 'size' | 'variant' | 'disabled'>>>(
     { baseClasses, variant, size, disabled },
     {
-        baseClasses: 'flex items-center justify-center gap-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
+        baseClasses: 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
         variants: {
             variant: {
                 default: 'bg-primary-600 text-white focus-visible:outline-primary-600',
@@ -25,12 +27,12 @@ const renderedClasses = computedVariantClasses<Variants<Pick<ButtonProps, 'size'
                 danger: 'bg-red-600 text-white focus-visible:outline-red-600',
                 ghost: 'bg-transparent',
                 outline: 'bg-transparent text-primary-600 ring-primary-600',
-                link: 'text-primary-600',
+                link: 'text-links',
             },
             size: {
-                small: 'text-xs',
-                default: 'text-sm',
-                large: 'text-base',
+                small: 'text-xs min-h-6',
+                default: 'text-sm min-h-8',
+                large: 'text-base min-h-10',
                 icon: 'rounded-full p-2.5',
             },
             disabled: {
@@ -41,7 +43,7 @@ const renderedClasses = computedVariantClasses<Variants<Pick<ButtonProps, 'size'
         compoundVariants: [
             {
                 variant: ['default', 'secondary', 'danger', 'ghost', 'outline'],
-                class: 'font-medium',
+                class: 'flex items-center justify-center gap-1 font-medium',
             },
             {
                 variant: ['default', 'danger'],
@@ -93,6 +95,6 @@ const renderedClasses = computedVariantClasses<Variants<Pick<ButtonProps, 'size'
             disabled: false,
         },
     },
-);
+));
 /* eslint-enable vue/max-len */
 </script>

package/src/components/ui/ConfirmModal.vue

@@ -1,6 +1,11 @@
 <template>
     <!-- @vue-generic {import('@aerogel/core/ui/UI').ModalExposeResult<ConfirmModalExpose>} -->
-    <Modal v-slot="{ close }" :title persistent>
+    <Modal
+        v-slot="{ close }"
+        :title="renderedTitle"
+        :title-hidden="titleHidden"
+        persistent
+    >
         <Form :form @submit="close([true, form.data()])">
             <Markdown :text="message" :actions />
 
@@ -39,7 +44,7 @@ import { useConfirmModal } from '@aerogel/core/components/contracts/ConfirmModal
 import type { ConfirmModalExpose, ConfirmModalProps } from '@aerogel/core/components/contracts/ConfirmModal';
 
 const { cancelVariant = 'secondary', ...props } = defineProps<ConfirmModalProps>();
-const { form, renderedAcceptText, renderedCancelText } = useConfirmModal(props);
+const { form, renderedTitle, titleHidden, renderedAcceptText, renderedCancelText } = useConfirmModal(props);
 
 defineExpose<ConfirmModalExpose>();
 </script>

package/src/components/ui/ErrorReportModal.vue

@@ -1,5 +1,10 @@
 <template>
-    <Modal wrapper-class="p-0 sm:w-auto sm:min-w-lg sm:max-w-[80vw]">
+    <Modal
+        :title="$td('errors.report', 'Errors report')"
+        title-hidden
+        wrapper-class="p-0 sm:w-auto sm:min-w-lg sm:max-w-[80vw]"
+        close-class="hidden"
+    >
         <div class="px-4 pt-5 pb-4">
             <h2 class="flex justify-between gap-4">
                 <div class="flex items-center gap-2">

package/src/components/ui/Markdown.vue

@@ -67,3 +67,19 @@ async function onClick(event: Event) {
     }
 }
 </script>
+
+<style scoped>
+/* @apply .text-links .font-normal .no-underline .hover:underline; */
+* :deep(a) {
+    --tw-font-weight: var(--font-weight-normal);
+    text-decoration-line: none;
+    color: var(--color-links);
+    font-weight: var(--font-weight-normal);
+}
+
+@media (hover: hover) {
+    * :deep(a:hover) {
+        text-decoration-line: underline;
+    }
+}
+</style>

package/src/components/ui/Modal.vue

@@ -14,7 +14,7 @@
             }"
         />
         <HeadlessModalContent v-bind="contentProps" :class="renderedWrapperClass">
-            <div v-if="!persistent && dismissable" class="absolute top-0 right-0 hidden pt-3.5 pr-2.5 sm:block">
+            <div v-if="!persistent" :class="renderedCloseClass">
                 <button
                     type="button"
                     class="clickable z-10 rounded-full p-2.5 text-gray-400 hover:text-gray-500"
@@ -71,7 +71,7 @@ type HeadlessModalInstance = ComponentPublicInstance & ModalExpose<T>;
 
 const {
     class: contentClass = '',
-    dismissable = true,
+    closeClass = '',
     wrapperClass = '',
     title,
     titleHidden,
@@ -80,7 +80,7 @@ const {
     ...props
 } = defineProps<
     ModalProps & {
-        dismissable?: boolean;
+        closeClass?: HTMLAttributes['class'];
         wrapperClass?: HTMLAttributes['class'];
         class?: HTMLAttributes['class'];
     }
@@ -98,6 +98,7 @@ const context = injectReactiveOrFail<UIModalContext>('modal');
 const inForeground = computed(() => !context.modal.closing && context.childIndex === UI.openModals.length);
 const contentProps = computed(() => (description ? {} : { 'aria-describedby': undefined }));
 const renderedContentClass = computed(() => classes({ 'mt-2': title && !titleHidden }, contentClass));
+const renderedCloseClass = computed(() => classes('absolute top-0 right-0 hidden pt-3.5 pr-2.5 sm:block', closeClass));
 const renderedWrapperClass = computed(() =>
     classes(
         'isolate fixed top-1/2 left-1/2 z-50 w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2',

package/src/components/ui/SelectOptions.vue

@@ -1,11 +1,11 @@
 <template>
     <HeadlessSelectOptions :class="renderedClasses">
-        <slot v-if="select?.options?.length">
+        <slot v-if="select.options?.length">
             <SelectOption v-for="option of select?.options ?? []" :key="option.key" :value="option.value">
                 {{ option.label }}
             </SelectOption>
         </slot>
-        <slot v-else name="empty">
+        <slot v-else>
             <SelectOption disabled :value="null">
                 {{ $td('ui.selectEmpty', 'No options available') }}
             </SelectOption>

package/src/components/ui/Toast.vue

@@ -13,32 +13,34 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
 
 import Button from '@aerogel/core/components/ui/Button.vue';
 import Markdown from '@aerogel/core/components/ui/Markdown.vue';
 import HeadlessToast from '@aerogel/core/components/headless/HeadlessToast.vue';
 import HeadlessToastAction from '@aerogel/core/components/headless/HeadlessToastAction.vue';
-import { computedVariantClasses } from '@aerogel/core/utils/classes';
+import { variantClasses } from '@aerogel/core/utils/classes';
 import type { ToastExpose, ToastProps } from '@aerogel/core/components/contracts/Toast';
 import type { Variants } from '@aerogel/core/utils/classes';
 
 const { class: baseClasses, variant = 'secondary' } = defineProps<ToastProps & { class?: HTMLAttributes['class'] }>();
-const renderedClasses = computedVariantClasses<Variants<Pick<ToastProps, 'variant'>>>(
-    { baseClasses, variant },
-    {
-        baseClasses: 'flex items-center gap-2 rounded-md p-2 ring-1 shadow-lg border-gray-200',
-        variants: {
-            variant: {
-                secondary: 'bg-gray-900 text-white ring-black',
-                danger: 'bg-red-50 text-red-900 ring-red-100',
+const renderedClasses = computed(() =>
+    variantClasses<Variants<Pick<ToastProps, 'variant'>>>(
+        { baseClasses, variant },
+        {
+            baseClasses: 'flex items-center gap-2 rounded-md p-2 ring-1 shadow-lg border-gray-200',
+            variants: {
+                variant: {
+                    secondary: 'bg-gray-900 text-white ring-black',
+                    danger: 'bg-red-50 text-red-900 ring-red-100',
+                },
+            },
+            defaultVariants: {
+                variant: 'secondary',
             },
         },
-        defaultVariants: {
-            variant: 'secondary',
-        },
-    },
-);
+    ));
 
 defineExpose<ToastExpose>();
 </script>

package/src/directives/measure.ts

@@ -3,6 +3,15 @@ import { tap } from '@noeldemartin/utils';
 
 const resizeObservers: WeakMap<HTMLElement, ResizeObserver> = new WeakMap();
 
+export type MeasureDirectiveValue =
+    | MeasureDirectiveListener
+    | {
+          css?: boolean;
+          watch?: boolean;
+      };
+
+export type MeasureDirectiveModifiers = 'css' | 'watch';
+
 export interface ElementSize {
     width: number;
     height: number;
@@ -10,11 +19,8 @@ export interface ElementSize {
 
 export type MeasureDirectiveListener = (size: ElementSize) => unknown;
 
-export default defineDirective({
-    mounted(element: HTMLElement, { value }) {
-        // TODO replace with argument when typed properly
-        const modifiers = { css: true, watch: true };
-
+export default defineDirective<MeasureDirectiveValue, MeasureDirectiveModifiers>({
+    mounted(element: HTMLElement, { value, modifiers }) {
         const listener = typeof value === 'function' ? (value as MeasureDirectiveListener) : null;
         const update = () => {
             const sizes = element.getBoundingClientRect();

package/src/index.css

@@ -6,8 +6,6 @@
 @source './';
 
 @theme {
-    --color-background: oklch(1 0 0);
-
     --color-primary: oklch(0.205 0 0);
     --color-primary-50: color-mix(in oklab, var(--color-primary-600) 5%, transparent);
     --color-primary-100: color-mix(in oklab, var(--color-primary-600) 15%, transparent);
@@ -20,6 +18,9 @@
     --color-primary-800: color-mix(in oklab, var(--color-primary-600) 80%, black);
     --color-primary-900: color-mix(in oklab, var(--color-primary-600) 70%, black);
     --color-primary-950: color-mix(in oklab, var(--color-primary-600) 50%, black);
+
+    --color-background: oklch(1 0 0);
+    --color-links: var(--color-primary);
 }
 
 .clickable {

package/src/utils/classes.ts

@@ -1,14 +1,13 @@
 import clsx from 'clsx';
-import { computed, unref } from 'vue';
+import { unref } from 'vue';
 import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
 import type { ClassValue } from 'clsx';
-import type { ComputedRef, PropType, Ref } from 'vue';
+import type { PropType } from 'vue';
 import type { GetClosureArgs, GetClosureResult } from '@noeldemartin/utils';
 
 export type CVAConfig<T> = NonNullable<GetClosureArgs<typeof cva<T>>[1]>;
 export type CVAProps<T> = NonNullable<GetClosureArgs<GetClosureResult<typeof cva<T>>>[0]>;
-export type RefsObject<T> = { [K in keyof T]: Ref<T[K]> | T[K] };
 export type Variants<T extends Record<string, string | boolean>> = Required<{
     [K in keyof T]: Exclude<T[K], undefined> extends string
         ? { [key in Exclude<T[K], undefined>]: string | null }
@@ -26,22 +25,15 @@ export type PickComponentProps<TValues, TDefinitions> = {
     [K in keyof TValues]: K extends keyof TDefinitions ? TValues[K] : never;
 };
 
-export function computedVariantClasses<T>(
-    value: RefsObject<{ baseClasses?: string } & CVAProps<T>>,
+export function variantClasses<T>(
+    value: { baseClasses?: string } & CVAProps<T>,
     config: { baseClasses?: string } & CVAConfig<T>,
-): ComputedRef<string> {
-    return computed(() => {
-        const { baseClasses: valueBaseClasses, ...valueRefs } = value;
-        const { baseClasses: configBaseClasses, ...configs } = config;
-        const variants = cva(configBaseClasses, configs as CVAConfig<T>);
-        const values = Object.entries(valueRefs).reduce((extractedValues, [name, valueRef]) => {
-            extractedValues[name as keyof CVAProps<T>] = unref(valueRef);
+): string {
+    const { baseClasses: valueBaseClasses, ...values } = value;
+    const { baseClasses: configBaseClasses, ...configs } = config;
+    const variants = cva(configBaseClasses, configs as CVAConfig<T>);
 
-            return extractedValues;
-        }, {} as CVAProps<T>);
-
-        return classes(variants(values), unref(valueBaseClasses));
-    });
+    return classes(variants(values as CVAProps<T>), unref(valueBaseClasses));
 }
 
 export function classes(...inputs: ClassValue[]): string {

package/src/utils/vue.ts

@@ -12,7 +12,12 @@ function renderVNodeAttrs(node: VNode): string {
     }, '');
 }
 
-export function defineDirective(directive: Directive): Directive {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function defineDirective<TValue = any, TModifiers extends string = string>(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    directive: Directive<any, TValue, TModifiers>,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): Directive<any, TValue, TModifiers> {
     return directive;
 }