@live-change/frontend-template 0.9.199 → 0.9.200

package/.cursor/skills/live-change-frontend-editor-form.md

@@ -1,4 +1,5 @@
 ---
+name: live-change-frontend-editor-form
 description: Build CRUD editing forms with editorData and AutoField components
 ---
 
@@ -15,104 +16,98 @@ Use this skill when you build **CRUD editing forms** with `editorData` and `Auto
 **Not editing a model?** Use `actionData` instead (see `live-change-frontend-action-form` skill).
 **No form fields, just a button?** Use `api.command` (see `live-change-frontend-command-forms` skill).
 
-## Step 1 – Set up editorData
+## Step 1 – Set up editorData (recommended: `await`)
+
+Use `await editorData(...)` directly in `<script setup>`, just like `live()`. Suspense handles the loading state.
 
 ```javascript
-import { ref, getCurrentInstance } from 'vue'
-import { AutoField, editorData } from '@live-change/frontend-auto-form'
+import { editorData, AutoField, EditorButtons } from '@live-change/frontend-auto-form'
 import { useToast } from 'primevue/usetoast'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 
 const toast = useToast()
 const router = useRouter()
-const appContext = getCurrentInstance().appContext
-
-const editor = ref(null)
-
-async function loadEditor() {
-  editor.value = await editorData({
-    service: 'blog',
-    model: 'Article',
-    identifiers: { article: props.articleId },
-    draft: true,
-    appContext,
-    toast,
-    onSaved: () => {
-      toast.add({ severity: 'success', summary: 'Saved', life: 1500 })
-    },
-    onCreated: (result) => {
-      router.push({ name: 'article', params: { article: result } })
-    },
-  })
-}
-
-loadEditor()
+const route = useRoute()
+
+const editor = await editorData({
+  service: 'blog',
+  model: 'Article',
+  identifiers: { article: route.params.article },
+  draft: true,
+  onSaved: () => {
+    toast.add({ severity: 'success', summary: 'Saved', life: 1500 })
+  },
+  onCreated: (result) => {
+    router.push({ name: 'article', params: { article: result } })
+  },
+})
 ```
 
-For new records, pass an empty or missing identifier:
+For new records, pass empty identifiers:
 
 ```javascript
-identifiers: { article: props.articleId } // props.articleId can be undefined for new
+identifiers: {} // creates a new record
 ```
 
+This is the simplest and most readable approach. Use it when identifiers are available at setup time (static values, route params).
+
 ## Step 2 – Build the template with AutoField
 
-Use `editor.model.properties.*` as definitions and `editor.value.*` as v-model:
+Use `editor.model.properties.*` as definitions and `editor.data.value` for v-model bindings:
+
+**Important:** Always wrap in a `<form>` element. `EditorButtons` uses `type="submit"` / `type="reset"` internally — without a parent `<form>`, the buttons do nothing.
 
 ```vue
 <template>
-  <div v-if="editor" class="space-y-4">
-    <AutoField
-      :definition="editor.model.properties.title"
-      v-model="editor.value.title"
-      :error="editor.propertiesErrors?.title"
-      label="Title"
-    />
-    <AutoField
-      :definition="editor.model.properties.body"
-      v-model="editor.value.body"
-      :error="editor.propertiesErrors?.body"
-      label="Body"
-    />
-
-    <!-- Manual field alongside AutoField -->
-    <div>
-      <label class="block text-sm font-medium mb-1">Category</label>
-      <Dropdown
-        v-model="editor.value.category"
-        :options="categories"
-        optionLabel="name"
-        optionValue="id"
-        class="w-full"
+  <form @submit.prevent="editor.save()" @reset.prevent="editor.reset()">
+    <div class="space-y-4">
+      <AutoField
+        :definition="editor.model.properties.title"
+        v-model="editor.data.value.title"
+        :error="editor.propertiesErrors?.title"
+        label="Title"
+      />
+      <AutoField
+        :definition="editor.model.properties.body"
+        v-model="editor.data.value.body"
+        :error="editor.propertiesErrors?.body"
+        label="Body"
       />
-    </div>
 
-    <!-- Buttons -->
-    <div class="flex gap-2 justify-end">
-      <Button v-if="!editor.isNew" @click="editor.save()"
-        label="Save" icon="pi pi-save"
-        :disabled="!editor.changed" />
-      <Button v-else @click="editor.save()"
-        label="Create" icon="pi pi-plus" severity="success"
-        :disabled="!editor.changed" />
-      <Button @click="editor.reset()"
-        label="Reset" icon="pi pi-eraser"
-        :disabled="!editor.changed" />
+      <!-- Custom input inside AutoField — gets label + error automatically -->
+      <AutoField
+        :definition="editor.model.properties.category"
+        v-model="editor.data.value.category"
+        :error="editor.propertiesErrors?.category"
+        label="Category"
+      >
+        <Dropdown
+          v-model="editor.data.value.category"
+          :options="categories"
+          optionLabel="name"
+          optionValue="id"
+          class="w-full"
+        />
+      </AutoField>
+
+      <EditorButtons :editor="editor" :resetButton="true" />
     </div>
-  </div>
+  </form>
 </template>
 ```
 
+No `v-if="editor"` needed — with `await`, the editor is always available after the component loads (Suspense handles the loading state).
+
 ## Step 3 – Use EditorButtons (alternative)
 
 Instead of manual buttons, use the `EditorButtons` component:
 
 ```vue
 <template>
-  <div v-if="editor">
+  <form @submit.prevent="editor.save()" @reset.prevent="editor.reset()">
     <!-- fields... -->
     <EditorButtons :editor="editor" :resetButton="true" />
-  </div>
+  </form>
 </template>
 
 <script setup>
@@ -127,12 +122,57 @@ Instead of manual buttons, use the `EditorButtons` component:
 - Save/Create button (disabled when nothing changed),
 - optional Reset button.
 
-## Step 4 – Reactive identifiers with computedAsync
+## Showing validation errors — 3 approaches
+
+**Every field in an `editorData` form must show validation errors.** Never use bare `InputText`/`Dropdown` without error feedback.
+
+### Approach 1 — AutoField without slot (default, simplest)
+
+AutoField auto-picks the right input component and renders label + error `Message` automatically:
+
+```vue
+<AutoField :definition="editor.model.properties.name" v-model="editor.data.value.name"
+  :error="editor.propertiesErrors?.name" label="Name" />
+```
 
-When identifiers come from reactive sources (route params, props):
+Use for standard fields where the default input is fine.
+
+### Approach 2 — AutoField with slot (custom input)
+
+Wrap a custom input inside AutoField. AutoField still renders label and error:
+
+```vue
+<AutoField :definition="editor.model.properties.depth" v-model="editor.data.value.depth"
+  :error="editor.propertiesErrors?.depth" label="Depth">
+  <Dropdown v-model="editor.data.value.depth" :options="depthOptions"
+    placeholder="Select depth" class="w-full" />
+</AutoField>
+```
+
+Use when you need a non-standard input (custom Dropdown formatting, Popover picker, InputNumber with buttons, etc.). AutoField slots: `#default({ validationResult, uid })`, `#label({ uid })`, `#error({ validationResult })`.
+
+### Approach 3 — Manual `Message` (no AutoField wrapper)
+
+When the layout doesn't allow an AutoField wrapper (e.g. sub-fields of an Object property), add error feedback manually:
+
+```vue
+<InputText v-model="editor.data.value.address.street" placeholder="Street" class="w-full" />
+<Message v-if="editor.propertiesErrors?.address" severity="error"
+  variant="simple" size="small" class="mt-1">
+  {{ editor.propertiesErrors.address }}
+</Message>
+```
+
+Use as a last resort when there's no model property definition for the individual field.
+
+## Step 4 – Reactive identifiers with computedAsync (advanced)
+
+When identifiers come from reactive sources that **may change during the component lifetime** (e.g. a prop that changes without page navigation), use `computedAsync`. Create an additional `computed` to alias the data for cleaner template access:
 
 ```javascript
+import { computed } from 'vue'
 import { computedAsync } from '@vueuse/core'
+import { editorData, AutoField, EditorButtons } from '@live-change/frontend-auto-form'
 
 const editor = computedAsync(() =>
   editorData({
@@ -140,12 +180,34 @@ const editor = computedAsync(() =>
     model: 'Article',
     identifiers: { article: props.articleId },
     draft: true,
-    appContext,
-    toast,
   })
 )
+
+// Alias for cleaner template access
+const editable = computed(() => editor.value?.value)
 ```
 
+Then in the template:
+
+```vue
+<template>
+  <form v-if="editor" @submit.prevent="editor.save()" @reset.prevent="editor.reset()">
+    <AutoField
+      :definition="editor.model.properties.title"
+      v-model="editable.value.title"
+      :error="editor.propertiesErrors?.title"
+      label="Title"
+    />
+    <EditorButtons :editor="editor" />
+  </form>
+</template>
+```
+
+**When to use approach 1 vs approach 2:**
+- Route params (`route.params.id`) → use `await` (approach 1). Route changes cause full page remount.
+- Static identifiers (`{}` for new records) → use `await` (approach 1).
+- Reactive prop that changes without remount → use `computedAsync` (approach 2).
+
 ## Key options reference
 
 | Option | Default | Description |
@@ -165,7 +227,8 @@ const editor = computedAsync(() =>
 
 | Property | Description |
 |---|---|
-| `value` | Editable data (use with `v-model`) |
+| `data` | Editable form data (recommended), it is a ref, it should be used with value - editor.data.value |
+| `value` | Editable form data (obsolete), it is a ref, it should be used with value - editor.value.value |
 | `model` | Model definition (use `.properties.*` for `AutoField`) |
 | `changed` | `true` when there are unsaved changes |
 | `isNew` | `true` when creating (no existing record) |

package/.cursor/skills/live-change-frontend-locale-time.md

@@ -1,4 +1,5 @@
 ---
+name: live-change-frontend-locale-time
 description: Handle locale, timezone, currentTime, time synchronization and email locale
 ---
 

package/.cursor/skills/live-change-frontend-page-list-detail.md

@@ -1,4 +1,5 @@
 ---
+name: live-change-frontend-page-list-detail
 description: Build list and detail pages with live data, computed paths, .with() and useClient
 ---
 

package/.cursor/skills/live-change-frontend-range-list.md

@@ -1,4 +1,5 @@
 ---
+name: live-change-frontend-range-list
 description: Build paginated scrollable lists with RangeViewer, rangeBuckets and .with()
 ---
 

package/.cursor/skills/live-change-frontend-ssr-setup.md

@@ -1,4 +1,5 @@
 ---
+name: live-change-frontend-ssr-setup
 description: Set up SSR entry points, router, PrimeVue theme and Suspense data loading
 ---
 

package/front/src/router.js

@@ -10,7 +10,7 @@ import {
 
 import { dbAdminRoutes } from "@live-change/db-admin"
 import { autoFormRoutes } from "@live-change/frontend-auto-form"
-import { taskAdminRoutes } from "@live-change/task-frontend"
+import { taskAdminRoutes, cronAdminRoutes } from "@live-change/task-frontend"
 import { userRoutes } from "@live-change/user-frontend"
 import { catchAllPagesRoute, contentEditRoutes, pagesSitemap } from "@live-change/content-frontend"
 
@@ -27,6 +27,7 @@ export function routes(config = {}) {
     ...contentEditRoutes({ ...config }),
 
     ...taskAdminRoutes({ ...config, prefix: '/_task' }),
+    ...cronAdminRoutes({ ...config, prefix: '/_cron' }),
     ...dbAdminRoutes({ prefix: '/_db', route: r => ({ ...r, meta: { ...r.meta, raw: true }}) }),
     ...catchAllPagesRoute({ ...config }),
   ]

package/opencode.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://opencode.ai/config.json",
+  "instructions": [
+    ".claude/rules/live-change-backend-architecture.md",
+    ".claude/rules/live-change-backend-actions-views-triggers.md",
+    ".claude/rules/live-change-backend-models-and-relations.md",
+    ".claude/rules/live-change-service-structure.md",
+    ".claude/rules/live-change-frontend-vue-primevue.md"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-template",
-  "version": "0.9.199",
+  "version": "0.9.200",
   "scripts": {
     "memDev": "tsx --inspect --expose-gc server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "tsx server/start.js localDev --enableSessions --initScript ./init.js --dbAccess",
@@ -45,54 +45,56 @@
     "@codemirror/language": "6.10.1",
     "@dotenvx/dotenvx": "0.27.0",
     "@fortawesome/fontawesome-free": "^6.7.2",
-    "@live-change/access-control-frontend": "^0.9.199",
-    "@live-change/access-control-service": "^0.9.199",
-    "@live-change/agreement-service": "^0.9.199",
-    "@live-change/backup-service": "^0.9.199",
-    "@live-change/blog-frontend": "^0.9.199",
-    "@live-change/blog-service": "^0.9.199",
-    "@live-change/cli": "^0.9.199",
-    "@live-change/content-frontend": "^0.9.199",
-    "@live-change/content-service": "^0.9.199",
-    "@live-change/dao": "^0.9.199",
-    "@live-change/dao-vue3": "^0.9.199",
-    "@live-change/dao-websocket": "^0.9.199",
-    "@live-change/db-client": "^0.9.199",
-    "@live-change/draft-service": "^0.9.199",
-    "@live-change/email-service": "^0.9.199",
-    "@live-change/framework": "^0.9.199",
-    "@live-change/frontend-auto-form": "^0.9.199",
-    "@live-change/frontend-base": "^0.9.199",
-    "@live-change/geoip-service": "^0.9.199",
-    "@live-change/google-authentication-service": "^0.9.199",
-    "@live-change/image-frontend": "^0.9.199",
-    "@live-change/linkedin-authentication-service": "^0.9.199",
-    "@live-change/locale-settings-service": "^0.9.199",
-    "@live-change/notification-service": "^0.9.199",
-    "@live-change/password-authentication-service": "^0.9.199",
-    "@live-change/peer-connection-frontend": "^0.9.199",
-    "@live-change/peer-connection-service": "^0.9.199",
-    "@live-change/prosemirror-service": "^0.9.199",
-    "@live-change/secret-code-service": "^0.9.199",
-    "@live-change/secret-link-service": "^0.9.199",
-    "@live-change/security-service": "^0.9.199",
-    "@live-change/session-service": "^0.9.199",
-    "@live-change/task-frontend": "^0.9.199",
-    "@live-change/task-service": "^0.9.199",
-    "@live-change/timer-service": "^0.9.199",
-    "@live-change/upload-frontend": "^0.9.199",
-    "@live-change/upload-service": "^0.9.199",
-    "@live-change/url-frontend": "^0.9.199",
-    "@live-change/url-service": "^0.9.199",
-    "@live-change/user-frontend": "^0.9.199",
-    "@live-change/user-identification-service": "^0.9.199",
-    "@live-change/user-service": "^0.9.199",
-    "@live-change/video-call-frontend": "^0.9.199",
-    "@live-change/video-call-service": "^0.9.199",
-    "@live-change/vote-service": "^0.9.199",
-    "@live-change/vue3-components": "^0.9.199",
-    "@live-change/vue3-ssr": "^0.9.199",
-    "@live-change/wysiwyg-frontend": "^0.9.199",
+    "@live-change/access-control-frontend": "^0.9.200",
+    "@live-change/access-control-service": "^0.9.200",
+    "@live-change/agreement-service": "^0.9.200",
+    "@live-change/backup-service": "^0.9.200",
+    "@live-change/blog-frontend": "^0.9.200",
+    "@live-change/blog-service": "^0.9.200",
+    "@live-change/cli": "^0.9.200",
+    "@live-change/content-frontend": "^0.9.200",
+    "@live-change/content-service": "^0.9.200",
+    "@live-change/cron-service": "^0.9.200",
+    "@live-change/dao": "^0.9.200",
+    "@live-change/dao-vue3": "^0.9.200",
+    "@live-change/dao-websocket": "^0.9.200",
+    "@live-change/db-client": "^0.9.200",
+    "@live-change/draft-service": "^0.9.200",
+    "@live-change/email-service": "^0.9.200",
+    "@live-change/framework": "^0.9.200",
+    "@live-change/frontend-auto-form": "^0.9.200",
+    "@live-change/frontend-base": "^0.9.200",
+    "@live-change/geoip-service": "^0.9.200",
+    "@live-change/google-authentication-service": "^0.9.200",
+    "@live-change/image-frontend": "^0.9.200",
+    "@live-change/linkedin-authentication-service": "^0.9.200",
+    "@live-change/locale-settings-service": "^0.9.200",
+    "@live-change/notification-service": "^0.9.200",
+    "@live-change/password-authentication-service": "^0.9.200",
+    "@live-change/peer-connection-frontend": "^0.9.200",
+    "@live-change/peer-connection-service": "^0.9.200",
+    "@live-change/prosemirror-service": "^0.9.200",
+    "@live-change/scope-service": "^0.9.200",
+    "@live-change/secret-code-service": "^0.9.200",
+    "@live-change/secret-link-service": "^0.9.200",
+    "@live-change/security-service": "^0.9.200",
+    "@live-change/session-service": "^0.9.200",
+    "@live-change/task-frontend": "^0.9.200",
+    "@live-change/task-service": "^0.9.200",
+    "@live-change/timer-service": "^0.9.200",
+    "@live-change/upload-frontend": "^0.9.200",
+    "@live-change/upload-service": "^0.9.200",
+    "@live-change/url-frontend": "^0.9.200",
+    "@live-change/url-service": "^0.9.200",
+    "@live-change/user-frontend": "^0.9.200",
+    "@live-change/user-identification-service": "^0.9.200",
+    "@live-change/user-service": "^0.9.200",
+    "@live-change/video-call-frontend": "^0.9.200",
+    "@live-change/video-call-service": "^0.9.200",
+    "@live-change/vote-service": "^0.9.200",
+    "@live-change/vue3-components": "^0.9.200",
+    "@live-change/vue3-ssr": "^0.9.200",
+    "@live-change/wysiwyg-frontend": "^0.9.200",
     "@vueuse/core": "^12.3.0",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.5",
@@ -125,5 +127,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "ISC",
   "description": "",
-  "gitHead": "1900043a10cf9ad49b9cc33a539fb973706de962"
+  "gitHead": "a509834e600a546297faa7d1534b6f52e66d2e66"
 }