@live-change/vue3-components 0.9.198 → 0.9.200

package/README.md

@@ -0,0 +1,123 @@
+---
+title: @live-change/vue3-components
+---
+
+## @live-change/vue3-components
+
+Pakiet `@live-change/vue3-components` dostarcza **zestaw gotowych komponentów Vue 3** zintegrowanych z Live Change:
+
+- komponenty **logiczne** (`logic/*`) – obserwacja danych, strefy ładowania i pracy, analityka
+- komponenty **formularzy** (`form/*`) – `DefinedForm`, `CommandForm`, `FormBind`
+- komponenty **widoków** (`view/*`) – `ScrollLoader`, `VisibleArea`, `RangeViewer`
+
+W typowej aplikacji rejestrujesz komponenty globalnie:
+
+```javascript
+import { createApp } from 'vue'
+import { registerComponents } from '@live-change/vue3-components'
+import App from './App.vue'
+
+const app = createApp(App)
+
+registerComponents(app, {
+  // opcjonalne ustawienia, np. analytics
+})
+
+app.mount('#app')
+```
+
+### Komponenty logiczne
+
+Najważniejsze komponenty i helpery:
+
+- `Loading`, `LoadingZone`, `LoadingWorkingZone` – spójne wyświetlanie stanów ładowania
+- `WorkingZone` – zarządzanie „pracami” (operacjami) i ich błędami
+- `Observe` – reaktywne obserwowanie ścieżek DAO
+- `analytics`, `useAnalytics`, `installRouterAnalytics` – prosty system zdarzeń analitycznych
+- `synchronized`, `synchronizedList` – synchronizacja danych formularzy z widokami/akcjami
+
+Przykład użycia `synchronized` (fragment z `speed-dating`):
+
+```javascript
+import { synchronized } from '@live-change/vue3-components'
+import { usePath, live, useActions } from '@live-change/vue3-ssr'
+
+const path = usePath()
+const actions = useActions()
+
+const eventPath = computed(() => path.speedDating.event({ event }))
+const eventData = await live(eventPath)
+
+const synchronizedEvent = synchronized({
+  source: eventData,
+  update: actions.speedDating.updateEvent,
+  identifiers: { event },
+  recursive: true,
+  autoSave: true,
+  debounce: 600
+})
+
+const editable = synchronizedEvent.value
+```
+
+### Formularze: `DefinedForm`, `CommandForm`, `FormBind`
+
+- **`DefinedForm`** – renderuje formularz na podstawie definicji (np. definicji akcji)
+- **`CommandForm`** – integruje formularz bezpośrednio z akcją (wysyła komendę po submit)
+- **`FormBind`** – wiąże formularz z metadanymi i walidacją
+
+Przykład prostego formularza opartego o definicję akcji:
+
+```vue
+<DefinedForm
+  :definition="definition"
+  v-model="editable"
+  @submit="save"
+/>
+```
+
+### Widoki: `ScrollLoader`, `VisibleArea`, `RangeViewer`
+
+Komponenty widoków są zintegrowane z DAO i `RangeBuckets`:
+
+- **`ScrollLoader`** – ładowanie kolejnych stron danych przy przewijaniu
+- **`VisibleArea`** – reagowanie na widoczność fragmentu DOM
+- **`RangeViewer`** – prezentacja danych podzielonych na zakresy
+
+Użycie `ScrollLoader` w typowym widoku listy:
+
+```vue
+<scroll-loader :loadMore="loadMore" :canLoadMore="canLoadMore">
+  <div v-for="item in items" :key="item.id">
+    {{ item.name }}
+  </div>
+</scroll-loader>
+```
+
+### Receptury z projektów
+
+#### `speed-dating` – formularz edycji eventu
+
+Plik `front/src/pages/events/[event]/edit.vue` pokazuje:
+
+- pobranie definicji modelu z `vue3-ssr`
+- użycie `synchronized` do auto-zapisu
+- `AutoEditor` z `frontend-auto-form` do generowania formularza na bazie modelu
+
+#### `speed-dating` – wizytówka użytkownika
+
+Plik `front/src/components/profile/ProfileSettings.vue`:
+
+- `synchronized` dla draftu wizytówki (`draft` service)
+- `AutoField` do mapowania właściwości modelu na pola formularza
+- integracja z PrimeVue i własnymi komponentami UI
+
+#### `family-tree` – strefy ładowania i praca na danych
+
+W `family-tree` komponenty z `@live-change/vue3-components` są użyte do:
+
+- synchronizacji identyfikacji użytkownika z analityką
+- emisji zdarzeń przez `analytics.emit(...)`
+
+Te przykłady będą opisane szerzej w sekcji „receptur frontendu” w dokumentacji.
+

package/logic/data.js

@@ -33,7 +33,7 @@ export function defaultData(definition, otherSrc) {
 
 export function validateData(definition, data, validationType = 'validation',
                              context = undefined, propName = '', props = data,
-                             outputValidatorParams = false) {
+                             outputValidatorParams = false, validatedProperties = undefined) {
   context = context || getCurrentInstance().appContext
   //console.log("VALIDATIE DATA", definition, data, validationType, context, propName, props)
   if(!context) throw new Error("No context")
@@ -60,8 +60,10 @@ export function validateData(definition, data, validationType = 'validation',
   if(definition.properties) {
     const propertyErrors = {}
     for(let name in definition.properties) {
+      const computedName = propName ? propName + '.' + name : name
+      if(validatedProperties && !validatedProperties.includes(computedName)) continue
       const error = validateData(definition.properties[name], data?.[name], validationType, context,
-        propName ? propName + '.' + name: name, props, outputValidatorParams)
+        computedName, props, outputValidatorParams)
       if(error) {
         if(error.propertyErrors) {
           for(let internalName in error.propertyErrors) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/vue3-components",
-  "version": "0.9.198",
+  "version": "0.9.200",
   "description": "Live Change Framework - vue components",
   "main": "index.js",
   "scripts": {
@@ -21,11 +21,11 @@
   },
   "homepage": "https://github.com/live-change/live-change-stack",
   "dependencies": {
-    "@live-change/vue3-ssr": "^0.9.198",
+    "@live-change/vue3-ssr": "^0.9.200",
     "debug": "^4.3.4",
     "mitt": "3.0.1",
     "vue": "^3.5.12",
     "vue3-scroll-border": "0.1.7"
   },
-  "gitHead": "7e485dcbaa2af7fb17052a40238210dc8bdf0c09"
+  "gitHead": "a509834e600a546297faa7d1534b6f52e66d2e66"
 }