@xelqun/forms 0.2.0 → 0.3.1

package/README.md

@@ -97,6 +97,10 @@ Other packages can add fields, with the same search, uploads, rows and saving as
 - **Give each action its own `authorize()`.** An action does nothing without one, and the form's `authorize()` doesn't count.
 - **Schedule `php artisan xelqun-forms:prune-uploads`.** Temporary uploads stay on disk until it runs.
 
+## Inspiration
+
+Xelqun Forms is heavily inspired by [Filament](https://filamentphp.com). I'm a big fan of Filament and have built several packages for it, and this project brings its PHP-first way of building forms to Inertia and Vue.
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xelqun/forms",
-    "version": "0.2.0",
+    "version": "0.3.1",
     "description": "Vue renderer for Xelqun Forms: PHP-defined, schema-driven forms for Laravel + Inertia.",
     "license": "MIT",
     "repository": {

package/resources/js/components/XqAction.vue

@@ -1,9 +1,18 @@
+<script lang="ts">
+import type { FormStore } from '../core/store';
+
+/**
+ * What the button needs from whatever holds it. Outside a form, pass your own.
+ */
+export type ActionRunner = Pick<FormStore, 'mountAction' | 'runAction' | 'processing' | 't'>;
+</script>
+
 <script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
 import { LoaderCircle } from 'lucide-vue-next';
 import { computed, onScopeDispose, ref, shallowRef, watch } from 'vue';
 import { useFormStore } from '../composables/context';
 import { createFormStore } from '../core/store';
-import type { FormStore } from '../core/store';
 import type { SchemaNode } from '../schema/types';
 import XqButton from '../ui/XqButton.vue';
 import XqConfirmDialog from '../ui/XqConfirmDialog.vue';
@@ -11,8 +20,8 @@ import XqDialog from '../ui/XqDialog.vue';
 import XqIcon from '../ui/XqIcon.vue';
 import XqForm from './XqForm.vue';
 
-const props = defineProps<{ node: SchemaNode }>();
-const store = useFormStore();
+const props = defineProps<{ node: SchemaNode; runner?: ActionRunner }>();
+const store = props.runner ?? useFormStore();
 const options = computed(() => props.node.props ?? {});
 const running = ref(false);
 const confirming = ref(false);
@@ -32,6 +41,19 @@ const variant = computed(() =>
           : (variants[options.value.color] ?? 'outline'),
 );
 
+// Inertia can only visit its own app, and a new tab isn't a visit.
+const isVisit = computed(() => {
+    if (options.value.openInNewTab) {
+        return false;
+    }
+
+    const url: string = options.value.url;
+
+    return typeof window === 'undefined'
+        ? url.startsWith('/')
+        : new URL(url, window.location.href).origin === window.location.origin;
+});
+
 async function run(): Promise<void> {
     // Enter in a modal field reaches this without the button.
     if (running.value) {
@@ -87,6 +109,25 @@ onScopeDispose(closeModal);
 <template>
     <div class="inline-flex" data-xq-action>
         <XqButton
+            v-if="options.url"
+            as-child
+            :variant="variant"
+            :size="options.style === 'icon' ? 'icon-sm' : 'sm'"
+            :title="options.tooltip"
+            :aria-label="options.style === 'icon' ? options.label : undefined"
+        >
+            <component
+                :is="isVisit ? Link : 'a'"
+                :href="options.url"
+                :target="options.openInNewTab ? '_blank' : undefined"
+                :rel="options.openInNewTab ? 'noopener noreferrer' : undefined"
+            >
+                <XqIcon v-if="options.icon" :name="options.icon" />
+                <template v-if="options.style !== 'icon'">{{ options.label }}</template>
+            </component>
+        </XqButton>
+        <XqButton
+            v-else
             type="button"
             :variant="variant"
             :size="options.style === 'icon' ? 'icon-sm' : 'sm'"

package/resources/js/core/store.ts

@@ -64,6 +64,27 @@ export interface ActionModal {
     liveError: Ref<string | null>;
 }
 
+/**
+ * Show why a request failed: on the fields a validation error names, or as a
+ * message on the target.
+ */
+export function reportRequestFailure(
+    error: unknown,
+    target: Omit<ActionModal, 'state' | 'settled' | 'validate'>,
+    t: (text: string) => string,
+): void {
+    if (error instanceof HttpError && error.status === 422) {
+        target.addErrors(error.validationErrors);
+        target.focusFirstError();
+    } else if (error instanceof HttpError && error.status === 419) {
+        target.fatalError.value = t('This form has expired. Reload the page to continue.');
+    } else {
+        target.liveError.value = t(
+            'Some fields could not be updated. Check your connection and try again.',
+        );
+    }
+}
+
 export interface FormStoreOptions {
     send?: (url: string, request: UpdateRequest, signal: AbortSignal) => Promise<UpdatePatch>;
 }
@@ -679,16 +700,7 @@ export function createFormStore(schema: FormSchema, options: FormStoreOptions =
             liveError,
         },
     ): void {
-        if (error instanceof HttpError && error.status === 422) {
-            target.addErrors(error.validationErrors);
-            target.focusFirstError();
-        } else if (error instanceof HttpError && error.status === 419) {
-            target.fatalError.value = t('This form has expired. Reload the page to continue.');
-        } else {
-            target.liveError.value = t(
-                'Some fields could not be updated. Check your connection and try again.',
-            );
-        }
+        reportRequestFailure(error, target, t);
     }
 
     function actionBody(

package/resources/js/core/translate.ts

@@ -9,9 +9,16 @@ export function translate(
     text: string,
     replacements: Replacements = {},
 ): string {
-    return Object.entries(replacements).reduce(
-        // A function, so a "$&" in a file name isn't read as a pattern.
-        (line, [name, value]) => line.replaceAll(`:${name}`, () => String(value)),
-        messages?.[text] ?? text,
+    const line = messages?.[text] ?? text;
+    const names = Object.keys(replacements).sort((first, second) => second.length - first.length);
+
+    if (names.length === 0) {
+        return line;
+    }
+
+    // One pass, longest name first, so :to can't match inside :total and a value
+    // holding ":name" isn't filled in again. A function, so "$&" isn't a pattern.
+    return line.replace(new RegExp(`:(${names.join('|')})`, 'g'), (_, name: string) =>
+        String(replacements[name]),
     );
 }

package/resources/js/index.ts

@@ -3,6 +3,8 @@ export type { XelqunFormsOptions, XelqunPlugin, XelqunPluginContext } from './pl
 
 export { default as XqForm } from './components/XqForm.vue';
 export { default as XqNode } from './components/XqNode.vue';
+export { default as XqAction } from './components/XqAction.vue';
+export type { ActionRunner } from './components/XqAction.vue';
 export { default as XqFieldWrapper } from './components/XqFieldWrapper.vue';
 export { createRegistry, defaultComponents } from './components/defaults';
 
@@ -10,12 +12,14 @@ export { useXqForm } from './composables/useXqForm';
 export { useField } from './composables/useField';
 export { useFormStore, useTranslator } from './composables/context';
 export { gridStyle, spanStyle } from './composables/layout';
+export { useRegistry } from './composables/registry';
 export type { ComponentRegistry, ComponentResolver } from './composables/registry';
 
-export { createFormStore, defaultLiveConfig } from './core/store';
-export type { FormStore, FormStoreOptions, SubmitOptions } from './core/store';
+export { createFormStore, defaultLiveConfig, reportRequestFailure } from './core/store';
+export type { ActionModal, FormStore, FormStoreOptions, SubmitOptions } from './core/store';
 export type { RequestKind, RequestLogEntry } from './core/log';
-export { HttpError } from './core/http';
+export { HttpError, postJson } from './core/http';
+export { translate } from './core/translate';
 export { evaluateCondition } from './core/conditions';
 export { evaluateExpression } from './core/expressions';
 export { getPath, overlaps } from './core/paths';

package/resources/js/ui/XqCheckbox.vue

@@ -1,28 +1,35 @@
 <script setup lang="ts">
-import { Check } from 'lucide-vue-next';
+import { Check, Minus } from 'lucide-vue-next';
 import { CheckboxIndicator, CheckboxRoot } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { cn } from '../lib/utils';
 
-const props = defineProps<{ id?: string; disabled?: boolean; class?: HTMLAttributes['class'] }>();
+const props = defineProps<{
+    id?: string;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    class?: HTMLAttributes['class'];
+}>();
 const model = defineModel<boolean>({ default: false });
 </script>
 
 <template>
     <CheckboxRoot
         :id="id"
-        v-model="model"
+        :model-value="indeterminate ? 'indeterminate' : model"
         data-slot="xq-checkbox"
         :disabled="disabled"
+        @update:model-value="model = $event === true"
         :class="
             cn(
-                'peer size-4 shadow-xs shrink-0 cursor-pointer rounded-[4px] border border-xq-input bg-xq-background transition-shadow outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-xq-destructive data-[state=checked]:border-xq-primary data-[state=checked]:bg-xq-primary data-[state=checked]:text-xq-primary-foreground',
+                'peer size-4 shadow-xs shrink-0 cursor-pointer rounded-[4px] border border-xq-input bg-xq-background transition-shadow outline-none focus-visible:ring-[3px] focus-visible:ring-xq-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-xq-destructive data-[state=checked]:border-xq-primary data-[state=checked]:bg-xq-primary data-[state=checked]:text-xq-primary-foreground data-[state=indeterminate]:border-xq-primary data-[state=indeterminate]:bg-xq-primary data-[state=indeterminate]:text-xq-primary-foreground',
                 props.class,
             )
         "
     >
         <CheckboxIndicator class="flex items-center justify-center text-current">
-            <Check class="size-3.5" :stroke-width="3" />
+            <Minus v-if="indeterminate" class="size-3.5" :stroke-width="3" />
+            <Check v-else class="size-3.5" :stroke-width="3" />
         </CheckboxIndicator>
     </CheckboxRoot>
 </template>

package/resources/js/ui/XqPopover.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../lib/utils';
+import { popoverClass } from './classes';
+
+const props = withDefaults(
+    defineProps<{
+        align?: 'start' | 'center' | 'end';
+        sideOffset?: number;
+        class?: HTMLAttributes['class'];
+    }>(),
+    { align: 'start', sideOffset: 4 },
+);
+const open = defineModel<boolean>('open', { default: false });
+</script>
+
+<template>
+    <PopoverRoot v-model:open="open">
+        <PopoverTrigger as-child>
+            <slot name="trigger" />
+        </PopoverTrigger>
+        <PopoverPortal>
+            <PopoverContent
+                data-slot="xq-popover"
+                :align="align"
+                :side-offset="sideOffset"
+                :class="cn(popoverClass, 'p-3', props.class)"
+            >
+                <slot />
+            </PopoverContent>
+        </PopoverPortal>
+    </PopoverRoot>
+</template>

package/resources/js/ui/index.ts

@@ -10,6 +10,7 @@ export { registerIcons, resolveIcon } from './icons';
 export { default as XqIcon } from './XqIcon.vue';
 export { default as XqInput } from './XqInput.vue';
 export { default as XqLabel } from './XqLabel.vue';
+export { default as XqPopover } from './XqPopover.vue';
 export { default as XqRadioGroup } from './XqRadioGroup.vue';
 export { default as XqRadioGroupItem } from './XqRadioGroupItem.vue';
 export { default as XqSelect } from './XqSelect.vue';