@vc-shell/vc-app-skill 2.0.0-alpha.33 → 2.0.0-alpha.34

package/runtime/knowledge/docs/ui/components/molecules/vc-form/vc-form.docs.md

@@ -4,11 +4,11 @@ A lightweight `<form>` wrapper that provides consistent styling, prevents defaul
 
 ## When to Use
 
-| Scenario | Component |
-|----------|-----------|
-| Blade detail view with editable fields | **VcForm** |
-| Popup with a short input form | **VcForm** |
-| Read-only display of data | Plain `<div>` or `VcField` |
+| Scenario                               | Component                  |
+| -------------------------------------- | -------------------------- |
+| Blade detail view with editable fields | **VcForm**                 |
+| Popup with a short input form          | **VcForm**                 |
+| Read-only display of data              | Plain `<div>` or `VcField` |
 
 > **Important:** VcForm renders a native `<form>` element with `novalidate`. All validation is handled by **vee-validate** `Field` components, not by the browser.
 
@@ -20,8 +20,16 @@ A lightweight `<form>` wrapper that provides consistent styling, prevents defaul
 <template>
   <VcForm @submit="handleSubmit">
     <div class="tw-space-y-4">
-      <VcInput v-model="name" label="Name" required />
-      <VcInput v-model="email" label="Email" required />
+      <VcInput
+        v-model="name"
+        label="Name"
+        required
+      />
+      <VcInput
+        v-model="email"
+        label="Email"
+        required
+      />
       <VcButton type="submit">Save</VcButton>
     </div>
   </VcForm>
@@ -73,12 +81,7 @@ Use `VcRow` and `VcCol` inside VcForm to create multi-column layouts that match
 VcForm itself does **not** manage validation. Validation is provided by wrapping each input with the `Field` component from `vee-validate`. This is the standard pattern used across the entire codebase:
 
 ```vue
-<Field
-  v-slot="{ errorMessage, handleChange, errors }"
-  :model-value="form.fieldName"
-  name="fieldName"
-  rules="required"
->
+<Field v-slot="{ errorMessage, handleChange, errors }" :model-value="form.fieldName" name="fieldName" rules="required">
   <VcInput
     v-model="form.fieldName"
     label="Field Label"
@@ -105,12 +108,7 @@ This same pattern works with all VcShell inputs:
 
 ```vue
 <!-- VcSelect -->
-<Field
-  v-slot="{ errorMessage, handleChange, errors }"
-  :model-value="form.category"
-  name="category"
-  rules="required"
->
+<Field v-slot="{ errorMessage, handleChange, errors }" :model-value="form.category" name="category" rules="required">
   <VcSelect
     v-model="form.category"
     label="Category"
@@ -125,12 +123,7 @@ This same pattern works with all VcShell inputs:
 </Field>
 
 <!-- VcTextarea -->
-<Field
-  v-slot="{ errorMessage, handleChange, errors }"
-  :model-value="form.description"
-  name="description"
-  rules="required|min:10"
->
+<Field v-slot="{ errorMessage, handleChange, errors }" :model-value="form.description" name="description" rules="required|min:10">
   <VcTextarea
     v-model="form.description"
     label="Description"
@@ -411,10 +404,7 @@ const validateSku = (value: string) => {
   const debouncedValidation = useDebounceFn(async () => {
     const errors = await validateOffer({ ...offer.value, sku: value });
     const skuErrors = errors?.filter((e) => e.propertyName?.toLowerCase() === "sku");
-    setFieldError(
-      "sku",
-      skuErrors.map((e) => t(`ERRORS.${e.errorCode}`, { value: e.attemptedValue })).join("\n"),
-    );
+    setFieldError("sku", skuErrors.map((e) => t(`ERRORS.${e.errorCode}`, { value: e.attemptedValue })).join("\n"));
   }, 1000);
 
   debouncedValidation();
@@ -429,12 +419,7 @@ const validateSku = (value: string) => {
 
 ```vue
 <!-- BAD: vee-validate never learns about value changes -->
-<Field
-  v-slot="{ errorMessage, errors }"
-  :model-value="form.name"
-  name="name"
-  rules="required"
->
+<Field v-slot="{ errorMessage, errors }" :model-value="form.name" name="name" rules="required">
   <VcInput
     v-model="form.name"
     label="Name"
@@ -444,12 +429,7 @@ const validateSku = (value: string) => {
 </Field>
 
 <!-- GOOD: handleChange keeps vee-validate in sync -->
-<Field
-  v-slot="{ errorMessage, handleChange, errors }"
-  :model-value="form.name"
-  name="name"
-  rules="required"
->
+<Field v-slot="{ errorMessage, handleChange, errors }" :model-value="form.name" name="name" rules="required">
   <VcInput
     v-model="form.name"
     label="Name"
@@ -464,21 +444,12 @@ const validateSku = (value: string) => {
 
 ```vue
 <!-- BAD: Field does not track the current value -->
-<Field
-  v-slot="{ errorMessage, handleChange, errors }"
-  name="name"
-  rules="required"
->
+<Field v-slot="{ errorMessage, handleChange, errors }" name="name" rules="required">
   <VcInput v-model="form.name" label="Name" />
 </Field>
 
 <!-- GOOD: Field receives the value and can validate it -->
-<Field
-  v-slot="{ errorMessage, handleChange, errors }"
-  :model-value="form.name"
-  name="name"
-  rules="required"
->
+<Field v-slot="{ errorMessage, handleChange, errors }" :model-value="form.name" name="name" rules="required">
   <VcInput
     v-model="form.name"
     label="Name"
@@ -514,28 +485,28 @@ disabled: computed(() => !modified.value),
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `ariaLabel` | `string` | `undefined` | Accessible label for the `<form>` element |
-| `ariaLabelledby` | `string` | `undefined` | ID of an element that labels the form |
+| Prop             | Type     | Default     | Description                               |
+| ---------------- | -------- | ----------- | ----------------------------------------- |
+| `ariaLabel`      | `string` | `undefined` | Accessible label for the `<form>` element |
+| `ariaLabelledby` | `string` | `undefined` | ID of an element that labels the form     |
 
 ## Events
 
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `submit` | -- | Emitted on form submission. Native `submit` is already `preventDefault`-ed. |
+| Event    | Payload | Description                                                                 |
+| -------- | ------- | --------------------------------------------------------------------------- |
+| `submit` | --      | Emitted on form submission. Native `submit` is already `preventDefault`-ed. |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot      | Description                                                     |
+| --------- | --------------------------------------------------------------- |
 | `default` | Form content -- inputs, buttons, fieldsets, VcRow/VcCol layouts |
 
 ## CSS Custom Properties
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--form-gap` | `1rem` | Default gap between form children (when using flex gap) |
+| Variable     | Default | Description                                             |
+| ------------ | ------- | ------------------------------------------------------- |
+| `--form-gap` | `1rem`  | Default gap between form children (when using flex gap) |
 
 ## Accessibility
 

package/runtime/knowledge/docs/ui/components/molecules/vc-image-tile/vc-image-tile.docs.md

@@ -26,46 +26,50 @@ Square image tile with skeleton loading, fade-in transition, and a slide-up acti
 <script setup lang="ts">
 import { VcImageTile } from "@vc-shell/framework";
 
-function openPreview() { /* open lightbox */ }
-function deleteImage() { /* remove from list */ }
+function openPreview() {
+  /* open lightbox */
+}
+function deleteImage() {
+  /* remove from list */
+}
 </script>
 ```
 
 ## Key Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `src` | `string` | — | Image source URL |
-| `alt` | `string` | — | Image alt text |
-| `name` | `string` | — | File name displayed in the tray |
-| `imageFit` | `"contain" \| "cover"` | `"contain"` | How the image fits within the tile |
-| `actions` | `VcImageTileActions` | — | Which built-in action buttons to show |
-| `thumbnailSize` | `ThumbnailSize` | — | Load a thumbnail variant instead of full-size image |
+| Prop            | Type                   | Default     | Description                                         |
+| --------------- | ---------------------- | ----------- | --------------------------------------------------- |
+| `src`           | `string`               | —           | Image source URL                                    |
+| `alt`           | `string`               | —           | Image alt text                                      |
+| `name`          | `string`               | —           | File name displayed in the tray                     |
+| `imageFit`      | `"contain" \| "cover"` | `"contain"` | How the image fits within the tile                  |
+| `actions`       | `VcImageTileActions`   | —           | Which built-in action buttons to show               |
+| `thumbnailSize` | `ThumbnailSize`        | —           | Load a thumbnail variant instead of full-size image |
 
 ## VcImageTileActions Interface
 
 ```ts
 interface VcImageTileActions {
-  preview?: boolean;  // Fullscreen/maximize button (default visible)
-  edit?: boolean;     // Pencil edit button
-  remove?: boolean;   // Trash delete button
+  preview?: boolean; // Fullscreen/maximize button (default visible)
+  edit?: boolean; // Pencil edit button
+  remove?: boolean; // Trash delete button
 }
 ```
 
 ## Events
 
-| Event | Description |
-|-------|-------------|
+| Event     | Description            |
+| --------- | ---------------------- |
 | `preview` | Preview button clicked |
-| `edit` | Edit button clicked |
-| `remove` | Remove button clicked |
+| `edit`    | Edit button clicked    |
+| `remove`  | Remove button clicked  |
 
 ## Slots
 
-| Slot | Description |
-|------|-------------|
+| Slot      | Description                                             |
+| --------- | ------------------------------------------------------- |
 | `overlay` | Overlay content on top of the image (e.g., drag handle) |
-| `actions` | Additional action buttons in the tray |
+| `actions` | Additional action buttons in the tray                   |
 
 ## Common Patterns
 
@@ -88,14 +92,7 @@ interface VcImageTileActions {
 ### All Actions Enabled
 
 ```vue
-<VcImageTile
-  src="/img/photo.jpg"
-  name="photo.jpg"
-  :actions="{ preview: true, edit: true, remove: true }"
-  @preview="onPreview"
-  @edit="onEdit"
-  @remove="onRemove"
-/>
+<VcImageTile src="/img/photo.jpg" name="photo.jpg" :actions="{ preview: true, edit: true, remove: true }" @preview="onPreview" @edit="onEdit" @remove="onRemove" />
 ```
 
 ### Cover Fit for Photos
@@ -123,19 +120,19 @@ When `src` is not provided or the image is still loading, a shimmer animation sk
 
 ## CSS Variables
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `--image-tile-radius` | `8px` | Corner radius |
-| `--image-tile-border` | `var(--secondary-200)` | Border color |
-| `--image-tile-shadow` | `0 1px 2px rgb(0 0 0 / 0.05)` | Default shadow |
-| `--image-tile-shadow-hover` | `0 4px 12px rgb(0 0 0 / 0.1)` | Hover shadow |
-| `--image-tile-tray-bg` | `rgba(255, 255, 255, 0.85)` | Tray background |
-| `--image-tile-tray-blur` | `12px` | Tray backdrop blur |
-| `--image-tile-skeleton-from` | `var(--secondary-100)` | Skeleton gradient start |
-| `--image-tile-skeleton-to` | `var(--secondary-200)` | Skeleton gradient end |
-| `--image-tile-action-color` | `var(--secondary-600)` | Action button color |
-| `--image-tile-action-hover` | `var(--primary-500)` | Action button hover color |
-| `--image-tile-action-danger` | `var(--danger-500)` | Danger action hover color |
+| Variable                     | Default                       | Description               |
+| ---------------------------- | ----------------------------- | ------------------------- |
+| `--image-tile-radius`        | `8px`                         | Corner radius             |
+| `--image-tile-border`        | `var(--secondary-200)`        | Border color              |
+| `--image-tile-shadow`        | `0 1px 2px rgb(0 0 0 / 0.05)` | Default shadow            |
+| `--image-tile-shadow-hover`  | `0 4px 12px rgb(0 0 0 / 0.1)` | Hover shadow              |
+| `--image-tile-tray-bg`       | `rgba(255, 255, 255, 0.85)`   | Tray background           |
+| `--image-tile-tray-blur`     | `12px`                        | Tray backdrop blur        |
+| `--image-tile-skeleton-from` | `var(--secondary-100)`        | Skeleton gradient start   |
+| `--image-tile-skeleton-to`   | `var(--secondary-200)`        | Skeleton gradient end     |
+| `--image-tile-action-color`  | `var(--secondary-600)`        | Action button color       |
+| `--image-tile-action-hover`  | `var(--primary-500)`          | Action button hover color |
+| `--image-tile-action-danger` | `var(--danger-500)`           | Danger action hover color |
 
 ## Accessibility