@hinen/pro-element-plus 1.7.17 → 1.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DataTable/DataTable.vue.d.ts +24 -6
- package/dist/components/DataTable/DataTable.vue.d.ts.map +1 -1
- package/dist/components/DataTable/props.d.ts +11 -2
- package/dist/components/DataTable/props.d.ts.map +1 -1
- package/dist/components/DataTable/types.d.ts +14 -1
- package/dist/components/DataTable/types.d.ts.map +1 -1
- package/dist/components/DataTable/useDataTable.d.ts.map +1 -1
- package/dist/components/FormFields/FormCascadeSelect/FormCascadeSelect.test.d.ts +2 -0
- package/dist/components/FormFields/FormCascadeSelect/FormCascadeSelect.test.d.ts.map +1 -0
- package/dist/components/FormFields/FormCascadeSelect/FormCascadeSelect.vue.d.ts +136 -146
- package/dist/components/FormFields/FormCascadeSelect/FormCascadeSelect.vue.d.ts.map +1 -1
- package/dist/components/FormFields/FormCascadeSelect/props.d.ts +112 -114
- package/dist/components/FormFields/FormCascadeSelect/props.d.ts.map +1 -1
- package/dist/components/FormFields/FormCascadeSelect/types.d.ts +24 -1
- package/dist/components/FormFields/FormCascadeSelect/types.d.ts.map +1 -1
- package/dist/components/FormFields/FormTagInput/FormTagInput.vue.d.ts.map +1 -1
- package/dist/components/FormFields/FormTreeSelect/props.d.ts +3 -1
- package/dist/components/FormFields/FormTreeSelect/props.d.ts.map +1 -1
- package/dist/index.cjs +14 -14
- package/dist/index.js +2613 -2203
- package/dist/skills/building-form-workflows/SKILL.md +77 -0
- package/dist/skills/building-form-workflows/references/examples.md +47 -0
- package/dist/skills/building-form-workflows/references/field-selection.md +16 -0
- package/dist/skills/building-form-workflows/references/gotchas.md +10 -0
- package/dist/skills/building-form-workflows/references/workflow.md +21 -0
- package/dist/skills/building-modal-workflows/SKILL.md +79 -0
- package/dist/skills/building-modal-workflows/references/examples.md +104 -0
- package/dist/skills/building-modal-workflows/references/gotchas.md +19 -0
- package/dist/skills/building-modal-workflows/references/workflow.md +17 -0
- package/dist/skills/building-query-pages/SKILL.md +81 -0
- package/dist/skills/building-query-pages/references/examples.md +64 -0
- package/dist/skills/building-query-pages/references/field-selection.md +24 -0
- package/dist/skills/building-query-pages/references/gotchas.md +10 -0
- package/dist/skills/building-query-pages/references/workflow.md +22 -0
- package/dist/skills/building-selection-inputs/SKILL.md +85 -0
- package/dist/skills/building-selection-inputs/references/examples.md +87 -0
- package/dist/skills/building-selection-inputs/references/gotchas.md +19 -0
- package/dist/skills/building-selection-inputs/references/selection-guide.md +47 -0
- package/dist/skills/choosing-components/SKILL.md +78 -0
- package/dist/skills/choosing-components/references/component-groups.md +37 -0
- package/dist/skills/choosing-components/references/examples.md +91 -0
- package/dist/skills/choosing-components/references/gotchas.md +10 -0
- package/dist/skills/choosing-components/references/selection-guide.md +40 -0
- package/dist/skills/optimizing-component-skills/REVIEW.md +775 -0
- package/dist/skills/using-checkbox-group/SKILL.md +91 -0
- package/dist/skills/using-checkbox-group/references/examples.md +55 -0
- package/dist/skills/using-checkbox-group/references/gotchas.md +13 -0
- package/dist/skills/using-checkbox-group/references/props.md +83 -0
- package/dist/skills/using-config-provider/SKILL.md +96 -0
- package/dist/skills/using-config-provider/references/examples.md +38 -0
- package/dist/skills/using-config-provider/references/gotchas.md +13 -0
- package/dist/skills/using-config-provider/references/props.md +38 -0
- package/dist/skills/using-data-select/SKILL.md +127 -0
- package/dist/skills/using-data-select/references/examples.md +67 -0
- package/dist/skills/using-data-select/references/gotchas.md +19 -0
- package/dist/skills/using-data-select/references/props.md +126 -0
- package/dist/skills/using-data-table/SKILL.md +289 -0
- package/dist/skills/using-data-table/references/examples.md +347 -0
- package/dist/skills/using-data-table/references/gotchas.md +114 -0
- package/dist/skills/using-data-table/references/props.md +375 -0
- package/dist/skills/using-drawer/SKILL.md +104 -0
- package/dist/skills/using-drawer/references/examples.md +109 -0
- package/dist/skills/using-drawer/references/gotchas.md +16 -0
- package/dist/skills/using-drawer/references/props.md +105 -0
- package/dist/skills/using-ellipsis-text/SKILL.md +105 -0
- package/dist/skills/using-ellipsis-text/references/examples.md +71 -0
- package/dist/skills/using-ellipsis-text/references/gotchas.md +19 -0
- package/dist/skills/using-ellipsis-text/references/props.md +97 -0
- package/dist/skills/using-form-autocomplete/SKILL.md +87 -0
- package/dist/skills/using-form-autocomplete/references/examples.md +62 -0
- package/dist/skills/using-form-autocomplete/references/gotchas.md +13 -0
- package/dist/skills/using-form-autocomplete/references/props.md +100 -0
- package/dist/skills/using-form-cascade-select/SKILL.md +82 -0
- package/dist/skills/using-form-cascade-select/references/examples.md +59 -0
- package/dist/skills/using-form-cascade-select/references/gotchas.md +13 -0
- package/dist/skills/using-form-cascade-select/references/props.md +138 -0
- package/dist/skills/using-form-checkbox-group/SKILL.md +83 -0
- package/dist/skills/using-form-checkbox-group/references/examples.md +61 -0
- package/dist/skills/using-form-checkbox-group/references/gotchas.md +13 -0
- package/dist/skills/using-form-checkbox-group/references/props.md +85 -0
- package/dist/skills/using-form-date-picker/SKILL.md +79 -0
- package/dist/skills/using-form-date-picker/references/examples.md +54 -0
- package/dist/skills/using-form-date-picker/references/gotchas.md +10 -0
- package/dist/skills/using-form-date-picker/references/props.md +99 -0
- package/dist/skills/using-form-fields/SKILL.md +101 -0
- package/dist/skills/using-form-fields/references/examples.md +45 -0
- package/dist/skills/using-form-fields/references/gotchas.md +6 -0
- package/dist/skills/using-form-fields/references/props.md +57 -0
- package/dist/skills/using-form-item/SKILL.md +92 -0
- package/dist/skills/using-form-item/references/examples.md +59 -0
- package/dist/skills/using-form-item/references/gotchas.md +13 -0
- package/dist/skills/using-form-item/references/props.md +85 -0
- package/dist/skills/using-form-number/SKILL.md +82 -0
- package/dist/skills/using-form-number/references/examples.md +66 -0
- package/dist/skills/using-form-number/references/gotchas.md +13 -0
- package/dist/skills/using-form-number/references/props.md +82 -0
- package/dist/skills/using-form-radio-group/SKILL.md +83 -0
- package/dist/skills/using-form-radio-group/references/examples.md +53 -0
- package/dist/skills/using-form-radio-group/references/gotchas.md +13 -0
- package/dist/skills/using-form-radio-group/references/props.md +81 -0
- package/dist/skills/using-form-rate/SKILL.md +86 -0
- package/dist/skills/using-form-rate/references/examples.md +60 -0
- package/dist/skills/using-form-rate/references/gotchas.md +16 -0
- package/dist/skills/using-form-rate/references/props.md +88 -0
- package/dist/skills/using-form-select/SKILL.md +94 -0
- package/dist/skills/using-form-select/references/examples.md +67 -0
- package/dist/skills/using-form-select/references/gotchas.md +13 -0
- package/dist/skills/using-form-select/references/props.md +87 -0
- package/dist/skills/using-form-switch/SKILL.md +81 -0
- package/dist/skills/using-form-switch/references/examples.md +54 -0
- package/dist/skills/using-form-switch/references/gotchas.md +10 -0
- package/dist/skills/using-form-switch/references/props.md +83 -0
- package/dist/skills/using-form-tag-input/SKILL.md +83 -0
- package/dist/skills/using-form-tag-input/references/examples.md +53 -0
- package/dist/skills/using-form-tag-input/references/gotchas.md +13 -0
- package/dist/skills/using-form-tag-input/references/props.md +80 -0
- package/dist/skills/using-form-text/SKILL.md +82 -0
- package/dist/skills/using-form-text/references/examples.md +66 -0
- package/dist/skills/using-form-text/references/gotchas.md +13 -0
- package/dist/skills/using-form-text/references/props.md +98 -0
- package/dist/skills/using-form-time-picker/SKILL.md +78 -0
- package/dist/skills/using-form-time-picker/references/examples.md +53 -0
- package/dist/skills/using-form-time-picker/references/gotchas.md +10 -0
- package/dist/skills/using-form-time-picker/references/props.md +89 -0
- package/dist/skills/using-form-tree-select/SKILL.md +82 -0
- package/dist/skills/using-form-tree-select/references/examples.md +55 -0
- package/dist/skills/using-form-tree-select/references/gotchas.md +13 -0
- package/dist/skills/using-form-tree-select/references/props.md +86 -0
- package/dist/skills/using-image/SKILL.md +88 -0
- package/dist/skills/using-image/references/examples.md +31 -0
- package/dist/skills/using-image/references/gotchas.md +13 -0
- package/dist/skills/using-image/references/props.md +91 -0
- package/dist/skills/using-modal/SKILL.md +113 -0
- package/dist/skills/using-modal/references/examples.md +122 -0
- package/dist/skills/using-modal/references/gotchas.md +16 -0
- package/dist/skills/using-modal/references/props.md +100 -0
- package/dist/skills/using-query-form/SKILL.md +134 -0
- package/dist/skills/using-query-form/references/examples.md +103 -0
- package/dist/skills/using-query-form/references/gotchas.md +19 -0
- package/dist/skills/using-query-form/references/props.md +146 -0
- package/dist/skills/using-radio-group/SKILL.md +91 -0
- package/dist/skills/using-radio-group/references/examples.md +55 -0
- package/dist/skills/using-radio-group/references/gotchas.md +13 -0
- package/dist/skills/using-radio-group/references/props.md +83 -0
- package/dist/skills/using-select/SKILL.md +93 -0
- package/dist/skills/using-select/references/examples.md +50 -0
- package/dist/skills/using-select/references/gotchas.md +13 -0
- package/dist/skills/using-select/references/props.md +90 -0
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: building-form-workflows
|
|
3
|
+
description: Use when you need to route a schema-driven or business-form workflow into the right Form* wrappers, FormItem semantics, and field-specific using-* skills.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Building form workflows
|
|
7
|
+
|
|
8
|
+
## Overview
|
|
9
|
+
|
|
10
|
+
Use this skill as the **form-workflow router** for the package.
|
|
11
|
+
|
|
12
|
+
Its job is to move from business-form requirements — labels, rules, wrapper semantics, and field value shapes — into the correct `using-form-*` skills, while keeping `FormItem` and `FormFields` as the shared mental model.
|
|
13
|
+
|
|
14
|
+
## Use it when
|
|
15
|
+
|
|
16
|
+
Use this skill when several of these are true:
|
|
17
|
+
|
|
18
|
+
- you are composing a business form from the `FormFields` family
|
|
19
|
+
- you need consistent label, validation, and wrapper behavior across many inputs
|
|
20
|
+
- you need to pick the right wrapped field for each piece of data
|
|
21
|
+
- you need a routing layer before opening several field-specific `using-form-*` skills
|
|
22
|
+
|
|
23
|
+
Strong signals this skill applies:
|
|
24
|
+
|
|
25
|
+
- admin edit forms
|
|
26
|
+
- settings forms
|
|
27
|
+
- schema-driven business forms
|
|
28
|
+
- mixed forms using text, number, select, and specialized field wrappers together
|
|
29
|
+
|
|
30
|
+
## Prefer something else when
|
|
31
|
+
|
|
32
|
+
- you are building a search page rather than a general business form
|
|
33
|
+
→ use `../building-query-pages/SKILL.md`
|
|
34
|
+
- you already know the exact wrapped field or direct component you need
|
|
35
|
+
→ open the matching `using-form-*` or `using-*` skill directly
|
|
36
|
+
- you only need to pick among top-level workflow families
|
|
37
|
+
→ use `../choosing-components/SKILL.md`
|
|
38
|
+
|
|
39
|
+
## Decision guide
|
|
40
|
+
|
|
41
|
+
Use `building-form-workflows` if the answer is yes for **two or more** of these:
|
|
42
|
+
|
|
43
|
+
- Are you still choosing among several `Form*` wrapper types?
|
|
44
|
+
- Do label, validation, and wrapper semantics need to stay consistent across many fields?
|
|
45
|
+
- Do you need a field-type routing layer before opening concrete component skills?
|
|
46
|
+
- Is the workflow primarily about create, edit, or settings forms rather than query plus results pages?
|
|
47
|
+
|
|
48
|
+
If not, go straight to the narrowest known component or use the query-page router instead.
|
|
49
|
+
|
|
50
|
+
## Recommended path
|
|
51
|
+
|
|
52
|
+
1. Start with the data shape and validation rules.
|
|
53
|
+
2. Use `../using-form-item/SKILL.md` to lock in wrapper semantics.
|
|
54
|
+
3. Use `../using-form-fields/SKILL.md` to see the full wrapper family.
|
|
55
|
+
4. Choose the narrowest `using-form-*` skill that matches each field’s value semantics.
|
|
56
|
+
5. If the same field patterns must also power a search page, hand off to `../building-query-pages/SKILL.md` and `../using-query-form/SKILL.md`.
|
|
57
|
+
|
|
58
|
+
## Common mistakes
|
|
59
|
+
|
|
60
|
+
- choosing wrapped fields by visual similarity instead of stored value semantics
|
|
61
|
+
- skipping `FormItem` and `FormFields` and jumping straight into one concrete wrapper without confirming the family pattern
|
|
62
|
+
- stretching one wrapper to cover unrelated input behavior
|
|
63
|
+
- treating business forms and query pages as the same workflow when the page shape is actually different
|
|
64
|
+
|
|
65
|
+
## Related skills
|
|
66
|
+
|
|
67
|
+
- Top-level router: `../choosing-components/SKILL.md`
|
|
68
|
+
- Query-page router: `../building-query-pages/SKILL.md`
|
|
69
|
+
- Wrapper-family overview: `../using-form-fields/SKILL.md`
|
|
70
|
+
- Base wrapper semantics: `../using-form-item/SKILL.md`
|
|
71
|
+
|
|
72
|
+
## References
|
|
73
|
+
|
|
74
|
+
- Workflow: `./references/workflow.md`
|
|
75
|
+
- Field selection: `./references/field-selection.md`
|
|
76
|
+
- Examples: `./references/examples.md`
|
|
77
|
+
- Gotchas: `./references/gotchas.md`
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
# Form-workflow examples
|
|
2
|
+
|
|
3
|
+
## 1. Business edit form
|
|
4
|
+
|
|
5
|
+
Start with `../../using-form-item/SKILL.md` and `../../using-form-fields/SKILL.md`, then move into the concrete `using-form-*` skills for each field.
|
|
6
|
+
|
|
7
|
+
Minimal pattern:
|
|
8
|
+
|
|
9
|
+
```vue
|
|
10
|
+
<FormText label="Name" prop="name" />
|
|
11
|
+
<FormNumber label="Order" prop="order" />
|
|
12
|
+
<FormSelect label="Status" prop="status" :options="statusOptions" />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Why this fits:
|
|
16
|
+
|
|
17
|
+
- the workflow is create/edit rather than filter-plus-results
|
|
18
|
+
- wrapper semantics should stay consistent across many fields
|
|
19
|
+
- the narrow `using-form-*` skills decide each field after the workflow is clear
|
|
20
|
+
|
|
21
|
+
## 2. Mixed field settings form
|
|
22
|
+
|
|
23
|
+
Use this router when the form mixes text, number, select, boolean, and specialized wrappers but should still share one wrapper model.
|
|
24
|
+
|
|
25
|
+
Minimal pattern:
|
|
26
|
+
|
|
27
|
+
```vue
|
|
28
|
+
<FormText label="Title" prop="title" />
|
|
29
|
+
<FormNumber label="Retry Count" prop="retryCount" />
|
|
30
|
+
<FormSelect label="Mode" prop="mode" :value-enum="modeEnum" />
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Why this fits:
|
|
34
|
+
|
|
35
|
+
- the form mixes value shapes
|
|
36
|
+
- wrapper consistency matters more than raw component freedom
|
|
37
|
+
- the family router stays useful before the field set fully stabilizes
|
|
38
|
+
|
|
39
|
+
## 3. Same field semantics later reused in search
|
|
40
|
+
|
|
41
|
+
Use this workflow first for field semantics, then hand off to `../building-query-pages/SKILL.md` when the same concepts need a query-page shell.
|
|
42
|
+
|
|
43
|
+
Typical route:
|
|
44
|
+
|
|
45
|
+
- define the business-form field meaning first
|
|
46
|
+
- pick the matching `using-form-*` skills
|
|
47
|
+
- later map the same field concepts into `QueryForm` or `DataTable` only when the page shape becomes filter-plus-results
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
# Field selection
|
|
2
|
+
|
|
3
|
+
Use this grid as the **canonical business-form field map** when the workflow is create, edit, or settings oriented rather than filter plus results.
|
|
4
|
+
|
|
5
|
+
Choose fields by stored value semantics first, then refine the UX inside the destination skill.
|
|
6
|
+
|
|
7
|
+
- Free text, passwords, or textarea-like values → `../../using-form-text/SKILL.md`
|
|
8
|
+
- Numbers with min, max, step, or precision → `../../using-form-number/SKILL.md`
|
|
9
|
+
- Local or enum-backed choice sets in a wrapped field → `../../using-form-select/SKILL.md`
|
|
10
|
+
- Visible checkbox or radio lists inside the wrapper family → `../../using-form-checkbox-group/SKILL.md`, `../../using-form-radio-group/SKILL.md`
|
|
11
|
+
- True binary toggles → `../../using-form-switch/SKILL.md`
|
|
12
|
+
- Hierarchical values → `../../using-form-cascade-select/SKILL.md`, `../../using-form-tree-select/SKILL.md`
|
|
13
|
+
- Date-like or time-like values → `../../using-form-date-picker/SKILL.md`, `../../using-form-time-picker/SKILL.md`
|
|
14
|
+
- Tag collection, rating, or suggestion-driven text → `../../using-form-tag-input/SKILL.md`, `../../using-form-rate/SKILL.md`, `../../using-form-autocomplete/SKILL.md`
|
|
15
|
+
|
|
16
|
+
If the same field semantics must also power a search surface, keep this grid as the base mapping and then layer query-specific rules from `../../building-query-pages/references/field-selection.md` on top.
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
# Form-workflow gotchas
|
|
2
|
+
|
|
3
|
+
- This skill routes field semantics, not page shells
|
|
4
|
+
If the page also owns search results and pagination, use `../building-query-pages/SKILL.md`.
|
|
5
|
+
|
|
6
|
+
- `FormItem` and `FormFields` are foundation skills, not optional detours
|
|
7
|
+
They define the wrapper model the concrete `using-form-*` skills build on.
|
|
8
|
+
|
|
9
|
+
- Do not force one wrapper to cover unrelated value types
|
|
10
|
+
Pick the narrowest matching `using-form-*` skill for each field.
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# Form-workflow checklist
|
|
2
|
+
|
|
3
|
+
Use this checklist when the workflow is primarily **create, edit, or settings oriented**.
|
|
4
|
+
|
|
5
|
+
If the page is mainly about filters plus results, pagination, or query-state coordination, switch to `../../building-query-pages/SKILL.md` instead of stretching this workflow.
|
|
6
|
+
|
|
7
|
+
1. Lock in the wrapper contract first with `../../using-form-item/SKILL.md`.
|
|
8
|
+
- Confirm labels, `prop`, rules, required state, and wrapper-level tooltip/error behavior before choosing field components.
|
|
9
|
+
2. Use `../../using-form-fields/SKILL.md` to decide whether you are still picking from the wrapper family or already know the exact wrapped field.
|
|
10
|
+
3. Map each business field to the correct wrapped skill with `./field-selection.md`.
|
|
11
|
+
- Choose by stored value semantics, not by visual similarity.
|
|
12
|
+
- Only open the narrowest `using-form-*` skill after the field family is clear.
|
|
13
|
+
4. Keep one clear source of truth for defaults, labels, validation rules, and option data.
|
|
14
|
+
- Do not let similar fields drift into different wrapper choices without a data-shape reason.
|
|
15
|
+
5. Reuse the same field semantics in `../../using-query-form/SKILL.md` only when the same business concepts also appear in a search surface.
|
|
16
|
+
- Reuse the field intent.
|
|
17
|
+
- Do not treat query forms and business forms as the same page workflow.
|
|
18
|
+
6. Hand off to `../../building-query-pages/SKILL.md` when the page also owns result rendering, pagination, refresh, or shared table-state decisions.
|
|
19
|
+
7. Recheck edge cases before finalizing.
|
|
20
|
+
- Use `./gotchas.md` for common routing mistakes.
|
|
21
|
+
- Use `./examples.md` when you need scenario-shaped guidance rather than another field list.
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: building-modal-workflows
|
|
3
|
+
description: Use when you need to route an overlay workflow into Modal or Drawer while keeping footer behavior, close handling, and embedded content choices consistent.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Building modal workflows
|
|
7
|
+
|
|
8
|
+
## Overview
|
|
9
|
+
|
|
10
|
+
Use this skill as the **overlay-workflow router** for the package.
|
|
11
|
+
|
|
12
|
+
Its job is to decide whether an interaction should be a centered modal or an edge-attached drawer, then hand off to the right overlay skill while keeping footer semantics and close behavior aligned.
|
|
13
|
+
|
|
14
|
+
## Use it when
|
|
15
|
+
|
|
16
|
+
Use this skill when several of these are true:
|
|
17
|
+
|
|
18
|
+
- you need an overlay that owns confirm and cancel actions
|
|
19
|
+
- you are choosing between a centered dialog and a side-panel flow
|
|
20
|
+
- you want to keep async submit and default footer behavior consistent
|
|
21
|
+
- the shell choice is still open even though you know the interaction belongs in an overlay
|
|
22
|
+
|
|
23
|
+
Strong signals this skill applies:
|
|
24
|
+
|
|
25
|
+
- confirm dialogs
|
|
26
|
+
- compact record editors
|
|
27
|
+
- side-panel editors
|
|
28
|
+
- review and approve overlays
|
|
29
|
+
|
|
30
|
+
## Prefer something else when
|
|
31
|
+
|
|
32
|
+
- you already know the exact overlay shell
|
|
33
|
+
→ open `../using-modal/SKILL.md` or `../using-drawer/SKILL.md` directly
|
|
34
|
+
- the main decision is the content inside the overlay rather than the overlay shell itself
|
|
35
|
+
→ use `../building-form-workflows/SKILL.md` or `../building-query-pages/SKILL.md` for the inner flow
|
|
36
|
+
- you are still choosing among top-level workflow families
|
|
37
|
+
→ use `../choosing-components/SKILL.md`
|
|
38
|
+
|
|
39
|
+
## Decision guide
|
|
40
|
+
|
|
41
|
+
Use `building-modal-workflows` if the answer is yes for **two or more** of these:
|
|
42
|
+
|
|
43
|
+
- Is the interaction definitely an overlay but the shell is still undecided?
|
|
44
|
+
- Do centered modal versus side drawer tradeoffs matter to the UX?
|
|
45
|
+
- Should confirm and cancel behavior stay aligned with the package defaults?
|
|
46
|
+
- Will choosing the right shell reduce custom overlay scaffolding?
|
|
47
|
+
|
|
48
|
+
If not, go straight to the narrowest known overlay skill or back up to the top-level router.
|
|
49
|
+
|
|
50
|
+
## Recommended path
|
|
51
|
+
|
|
52
|
+
1. Choose the shell:
|
|
53
|
+
- compact, centered overlay → `../using-modal/SKILL.md`
|
|
54
|
+
- roomier, side-panel flow → `../using-drawer/SKILL.md`
|
|
55
|
+
2. Decide whether the built-in footer is enough.
|
|
56
|
+
3. Wire business-side close handling explicitly even when confirm and cancel buttons are generated for you.
|
|
57
|
+
4. If the overlay hosts a form, hand off to `../building-form-workflows/SKILL.md` for field and wrapper decisions.
|
|
58
|
+
5. If the overlay hosts a list or query flow, hand off to `../building-query-pages/SKILL.md` for the inner page logic.
|
|
59
|
+
|
|
60
|
+
## Common mistakes
|
|
61
|
+
|
|
62
|
+
- choosing `Modal` or `Drawer` by habit instead of by content shape and context needs
|
|
63
|
+
- replacing the built-in footer before confirming whether the default action model already fits
|
|
64
|
+
- assuming confirm or cancel events automatically close the overlay
|
|
65
|
+
- deciding the shell without considering whether the inner content is a form flow or a query flow
|
|
66
|
+
|
|
67
|
+
## Related skills
|
|
68
|
+
|
|
69
|
+
- Top-level router: `../choosing-components/SKILL.md`
|
|
70
|
+
- Centered overlay shell: `../using-modal/SKILL.md`
|
|
71
|
+
- Side-panel overlay shell: `../using-drawer/SKILL.md`
|
|
72
|
+
- Form content router: `../building-form-workflows/SKILL.md`
|
|
73
|
+
- Query content router: `../building-query-pages/SKILL.md`
|
|
74
|
+
|
|
75
|
+
## References
|
|
76
|
+
|
|
77
|
+
- Workflow: `./references/workflow.md`
|
|
78
|
+
- Examples: `./references/examples.md`
|
|
79
|
+
- Gotchas: `./references/gotchas.md`
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
# Overlay examples
|
|
2
|
+
|
|
3
|
+
## 1. Short confirmation
|
|
4
|
+
|
|
5
|
+
Prefer `../../using-modal/SKILL.md` when the body is brief and the main job is confirming or editing one small entity.
|
|
6
|
+
|
|
7
|
+
Minimal pattern:
|
|
8
|
+
|
|
9
|
+
```vue
|
|
10
|
+
<Modal
|
|
11
|
+
:model-value="visible"
|
|
12
|
+
title="Delete User"
|
|
13
|
+
@cancel="visible = false"
|
|
14
|
+
@ok="handleDelete"
|
|
15
|
+
>
|
|
16
|
+
<p>Confirm deletion?</p>
|
|
17
|
+
</Modal>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Typical fit:
|
|
21
|
+
|
|
22
|
+
- destructive confirmation with a few explanatory lines
|
|
23
|
+
- one-step approval dialog
|
|
24
|
+
- tiny editor where the main action is still confirm or cancel
|
|
25
|
+
|
|
26
|
+
## 2. Side-panel editor
|
|
27
|
+
|
|
28
|
+
Prefer `../../using-drawer/SKILL.md` when the content is longer, stacked vertically, or feels better as a right-side task flow.
|
|
29
|
+
|
|
30
|
+
Minimal pattern:
|
|
31
|
+
|
|
32
|
+
```vue
|
|
33
|
+
<Drawer
|
|
34
|
+
:model-value="visible"
|
|
35
|
+
title="Edit Project"
|
|
36
|
+
@cancel="visible = false"
|
|
37
|
+
@ok="handleSave"
|
|
38
|
+
>
|
|
39
|
+
<ProjectForm />
|
|
40
|
+
</Drawer>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
Typical fit:
|
|
44
|
+
|
|
45
|
+
- multi-section editor
|
|
46
|
+
- detail review with supporting context
|
|
47
|
+
- workflow that should stay visually attached to the page
|
|
48
|
+
|
|
49
|
+
## 3. Overlay with form content
|
|
50
|
+
|
|
51
|
+
Choose the shell here first, then hand off to `../building-form-workflows/SKILL.md` for the field and wrapper plan inside the overlay.
|
|
52
|
+
|
|
53
|
+
Typical route:
|
|
54
|
+
|
|
55
|
+
- compact editor → `Modal` + business-form workflow
|
|
56
|
+
- roomier editor → `Drawer` + business-form workflow
|
|
57
|
+
|
|
58
|
+
Typical fit:
|
|
59
|
+
|
|
60
|
+
- quick record edit in a modal
|
|
61
|
+
- richer create or edit flow in a drawer
|
|
62
|
+
|
|
63
|
+
The overlay router chooses the shell; the form router chooses the inner field and wrapper plan.
|
|
64
|
+
|
|
65
|
+
## 4. Overlay with query or list content
|
|
66
|
+
|
|
67
|
+
Use `../building-query-pages/SKILL.md` when the overlay body is not a simple editor, but a filter-plus-results or review list surface.
|
|
68
|
+
|
|
69
|
+
Typical route:
|
|
70
|
+
|
|
71
|
+
- choose `Modal` or `Drawer` for the shell
|
|
72
|
+
- then use `QueryForm` or `DataTable` as the inner page/list shell
|
|
73
|
+
|
|
74
|
+
Typical fit:
|
|
75
|
+
|
|
76
|
+
- select-from-list drawer
|
|
77
|
+
- review history modal with filters
|
|
78
|
+
- side panel that combines search criteria and result rows
|
|
79
|
+
|
|
80
|
+
In these cases, the overlay skill chooses the shell first and the query-page router owns the inner list logic.
|
|
81
|
+
|
|
82
|
+
## 5. Close-handling pattern
|
|
83
|
+
|
|
84
|
+
Built-in footer actions do not close the overlay by themselves.
|
|
85
|
+
|
|
86
|
+
Minimal pattern:
|
|
87
|
+
|
|
88
|
+
```vue
|
|
89
|
+
<Modal
|
|
90
|
+
:model-value="visible"
|
|
91
|
+
@update:model-value="visible = $event"
|
|
92
|
+
@cancel="visible = false"
|
|
93
|
+
@ok="handleSubmit"
|
|
94
|
+
/>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
Minimum handoff pattern:
|
|
98
|
+
|
|
99
|
+
- visibility stays in feature state
|
|
100
|
+
- `update:modelValue` mirrors shell visibility changes
|
|
101
|
+
- `cancel` usually closes immediately
|
|
102
|
+
- `ok` runs business logic and only closes when that logic decides to
|
|
103
|
+
|
|
104
|
+
For concrete shell-level examples, use the minimal patterns in `../../using-modal/SKILL.md` or `../../using-drawer/SKILL.md`.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# Overlay-workflow gotchas
|
|
2
|
+
|
|
3
|
+
- This skill chooses shells, not inner fields
|
|
4
|
+
Once the shell is clear, move into the form or query router for the overlay content itself.
|
|
5
|
+
|
|
6
|
+
- Modal versus Drawer is a UX decision, not just a size choice
|
|
7
|
+
Centered interruption and edge-attached task flow communicate different product intent.
|
|
8
|
+
|
|
9
|
+
- Built-in footer actions still need business-side close logic
|
|
10
|
+
Do not assume generated confirm and cancel buttons manage visibility by themselves.
|
|
11
|
+
|
|
12
|
+
- Do not choose `Modal` or `Drawer` by habit
|
|
13
|
+
Pick the shell by content shape and surrounding context, not by whichever overlay component feels more familiar.
|
|
14
|
+
|
|
15
|
+
- Visibility control and action handling are separate concerns
|
|
16
|
+
`modelValue` decides whether the shell is open. `ok` and `cancel` are workflow events. Treating them as the same thing leads to fragile close behavior.
|
|
17
|
+
|
|
18
|
+
- Do not pick the shell without checking the body workflow
|
|
19
|
+
A form-heavy editor and a filter-plus-results surface can both live in overlays, but they should hand off to different inner routers after the shell choice is made.
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
# Overlay workflow
|
|
2
|
+
|
|
3
|
+
1. Choose the shell.
|
|
4
|
+
- `../../using-modal/SKILL.md` for centered overlays with built-in size presets.
|
|
5
|
+
- `../../using-drawer/SKILL.md` for side panels with the same confirm and cancel pattern.
|
|
6
|
+
2. Decide what kind of content the overlay is hosting.
|
|
7
|
+
- focused form or editor flow → `../building-form-workflows/SKILL.md`
|
|
8
|
+
- query, list, or review surface with results → `../building-query-pages/SKILL.md`
|
|
9
|
+
3. Decide whether the built-in footer is enough.
|
|
10
|
+
- keep it when confirm and cancel are still the real action model
|
|
11
|
+
- replace it only when the body owns a genuinely different action layout
|
|
12
|
+
4. Wire business-side close handling explicitly even when confirm and cancel buttons are generated for you.
|
|
13
|
+
- closing still belongs in your feature logic
|
|
14
|
+
- use the downstream `using-modal` or `using-drawer` examples for the concrete `update:modelValue`, `cancel`, and `ok` pattern
|
|
15
|
+
5. Recheck whether the shell still matches the content shape.
|
|
16
|
+
- compact interruption → stay with `Modal`
|
|
17
|
+
- roomier task flow or richer side context → stay with `Drawer`
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: building-query-pages
|
|
3
|
+
description: Use when you need to route a filter or admin-style list workflow into QueryForm, DataTable, ConfigProvider, and the correct field-level using-* skills.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Building query pages
|
|
7
|
+
|
|
8
|
+
## Overview
|
|
9
|
+
|
|
10
|
+
Use this skill as the **query-page router** for the package.
|
|
11
|
+
|
|
12
|
+
Its job is to decide whether a page stops at collecting filters or should own the full search-plus-results shell, then hand off to the correct `using-*` skills for fields, table shell, and shared table-state presentation.
|
|
13
|
+
|
|
14
|
+
## Use it when
|
|
15
|
+
|
|
16
|
+
Use this skill when several of these are true:
|
|
17
|
+
|
|
18
|
+
- you are building a search form plus result list page
|
|
19
|
+
- the page needs pagination, refresh, or query-state coordination
|
|
20
|
+
- you need to decide whether `QueryForm` alone is enough or the page should promote to `DataTable`
|
|
21
|
+
- you need a routing layer before choosing field-level `using-form-*` or `using-data-select` skills
|
|
22
|
+
|
|
23
|
+
Strong signals this skill applies:
|
|
24
|
+
|
|
25
|
+
- admin search pages
|
|
26
|
+
- list pages with filters and result grids
|
|
27
|
+
- report pages with standard filter shells
|
|
28
|
+
- multiple related tables sharing empty or error treatment
|
|
29
|
+
|
|
30
|
+
## Prefer something else when
|
|
31
|
+
|
|
32
|
+
- you are building a general business form rather than a filter plus results flow
|
|
33
|
+
→ use `../building-form-workflows/SKILL.md`
|
|
34
|
+
- you already know the exact page shell you need
|
|
35
|
+
→ open `../using-query-form/SKILL.md`, `../using-data-table/SKILL.md`, or `../using-config-provider/SKILL.md` directly
|
|
36
|
+
- you are still choosing among top-level workflow families
|
|
37
|
+
→ use `../choosing-components/SKILL.md`
|
|
38
|
+
|
|
39
|
+
## Decision guide
|
|
40
|
+
|
|
41
|
+
Use `building-query-pages` if the answer is yes for **two or more** of these:
|
|
42
|
+
|
|
43
|
+
- Does the page involve filters or search criteria?
|
|
44
|
+
- Does the same surface also need result rows, pagination, or refresh?
|
|
45
|
+
- Do query-field choices need to route into the standardized field skills?
|
|
46
|
+
- Should shared empty or error treatment across tables be part of the page decision?
|
|
47
|
+
|
|
48
|
+
If not, go straight to `using-query-form`, `using-data-table`, or the form-workflow router.
|
|
49
|
+
|
|
50
|
+
## Recommended path
|
|
51
|
+
|
|
52
|
+
1. Define the fields users actually need to search on.
|
|
53
|
+
2. Choose the page shell:
|
|
54
|
+
- filters only → `../using-query-form/SKILL.md`
|
|
55
|
+
- filters plus results, pagination, refresh → `../using-data-table/SKILL.md`
|
|
56
|
+
3. Map each query field to the correct field skill using the query-page field grid.
|
|
57
|
+
4. Keep one clear source of truth for labels, defaults, placeholders, and option data.
|
|
58
|
+
5. Add `../using-config-provider/SKILL.md` only when multiple tables should share empty or error UI.
|
|
59
|
+
6. If the underlying field semantics are still unclear, hand off to `../building-form-workflows/SKILL.md` for wrapper-family routing.
|
|
60
|
+
|
|
61
|
+
## Common mistakes
|
|
62
|
+
|
|
63
|
+
- treating query pages like ordinary business forms when the page shell really needs query-plus-results behavior
|
|
64
|
+
- picking `QueryForm` and `DataTable` before deciding whether the page actually owns results
|
|
65
|
+
- duplicating field semantics between page-level filters and broader form-wrapper rules instead of sharing them
|
|
66
|
+
- introducing `ConfigProvider` for one local table when the customization should stay local
|
|
67
|
+
|
|
68
|
+
## Related skills
|
|
69
|
+
|
|
70
|
+
- Top-level router: `../choosing-components/SKILL.md`
|
|
71
|
+
- Form-workflow router for shared field semantics: `../building-form-workflows/SKILL.md`
|
|
72
|
+
- Standalone filter shell: `../using-query-form/SKILL.md`
|
|
73
|
+
- Query-plus-results shell: `../using-data-table/SKILL.md`
|
|
74
|
+
- Shared table empty and error rendering: `../using-config-provider/SKILL.md`
|
|
75
|
+
|
|
76
|
+
## References
|
|
77
|
+
|
|
78
|
+
- Workflow: `./references/workflow.md`
|
|
79
|
+
- Field selection: `./references/field-selection.md`
|
|
80
|
+
- Examples: `./references/examples.md`
|
|
81
|
+
- Gotchas: `./references/gotchas.md`
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# Query-page examples
|
|
2
|
+
|
|
3
|
+
## 1. Small filter panel
|
|
4
|
+
|
|
5
|
+
Use `../../using-query-form/SKILL.md` when the page just collects filters for another component or request flow.
|
|
6
|
+
|
|
7
|
+
Minimal pattern:
|
|
8
|
+
|
|
9
|
+
```vue
|
|
10
|
+
<QueryForm :items="items" @search="handleSearch" @reset="handleReset" />
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Why this fits:
|
|
14
|
+
|
|
15
|
+
- the page owns filters but not a standard result table shell
|
|
16
|
+
- search state still benefits from schema-driven query controls
|
|
17
|
+
|
|
18
|
+
## 2. Standard search table page
|
|
19
|
+
|
|
20
|
+
Use `../../using-data-table/SKILL.md` when the page owns filtering, loading, pagination, and result rendering together.
|
|
21
|
+
|
|
22
|
+
Minimal pattern:
|
|
23
|
+
|
|
24
|
+
```vue
|
|
25
|
+
<DataTable :columns="columns" :query-fn="queryFn" />
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Why this fits:
|
|
29
|
+
|
|
30
|
+
- one shell owns query, fetch, pagination, and rendering
|
|
31
|
+
- columns define both field and row behavior
|
|
32
|
+
|
|
33
|
+
## 3. Shared table shell
|
|
34
|
+
|
|
35
|
+
Wrap the feature with `../../using-config-provider/SKILL.md` when several tables should share the same empty and error presentation.
|
|
36
|
+
|
|
37
|
+
Minimal pattern:
|
|
38
|
+
|
|
39
|
+
```vue
|
|
40
|
+
<ConfigProvider>
|
|
41
|
+
<DataTable :columns="userColumns" :query-fn="userQuery" />
|
|
42
|
+
<DataTable :columns="roleColumns" :query-fn="roleQuery" />
|
|
43
|
+
</ConfigProvider>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Use this when the shared fallback rendering belongs to the feature subtree rather than one list.
|
|
47
|
+
|
|
48
|
+
## 4. Shared field semantics with business forms
|
|
49
|
+
|
|
50
|
+
If the query filters reuse the same field semantics as broader business forms, route through `../building-form-workflows/SKILL.md` before finalizing the field choices.
|
|
51
|
+
|
|
52
|
+
Typical route:
|
|
53
|
+
|
|
54
|
+
- define the field meaning in the business-form workflow first
|
|
55
|
+
- reuse that field meaning in `QueryForm` or `DataTable` only after the page is confirmed to be filter-plus-results
|
|
56
|
+
|
|
57
|
+
## 5. Query page inside an overlay
|
|
58
|
+
|
|
59
|
+
If the body is still a filter-plus-results workflow but should live in a temporary shell, route through `../building-modal-workflows/SKILL.md` first, then come back to `QueryForm` or `DataTable` for the inner page shell.
|
|
60
|
+
|
|
61
|
+
Typical route:
|
|
62
|
+
|
|
63
|
+
- choose `Modal` or `Drawer` for the outer shell
|
|
64
|
+
- keep `QueryForm` or `DataTable` as the inner query-page surface
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
# Field selection for query pages
|
|
2
|
+
|
|
3
|
+
Use this guide as the **query-page extension** to the canonical business-form grid at `../../building-form-workflows/references/field-selection.md`.
|
|
4
|
+
|
|
5
|
+
Start from the business-form field meaning first, then apply the query-specific rules below.
|
|
6
|
+
|
|
7
|
+
## Start from the base field map
|
|
8
|
+
|
|
9
|
+
- text-like filter input → `../../using-form-text/SKILL.md`
|
|
10
|
+
- numeric filter input → `../../using-form-number/SKILL.md`
|
|
11
|
+
- local wrapped select filter → `../../using-form-select/SKILL.md`
|
|
12
|
+
- visible checkbox or radio filter → `../../using-form-checkbox-group/SKILL.md`, `../../using-form-radio-group/SKILL.md`
|
|
13
|
+
- tree or cascade filter → `../../using-form-tree-select/SKILL.md`, `../../using-form-cascade-select/SKILL.md`
|
|
14
|
+
- date or time filter → `../../using-form-date-picker/SKILL.md`, `../../using-form-time-picker/SKILL.md`
|
|
15
|
+
- suggestion-driven filter text → `../../using-form-autocomplete/SKILL.md`
|
|
16
|
+
|
|
17
|
+
## Apply query-specific rules
|
|
18
|
+
|
|
19
|
+
- Use `../../using-data-select/SKILL.md` when option loading is request-driven, param-driven, or filter-aware enough that loading behavior is part of the component choice.
|
|
20
|
+
- Stay with `../../using-form-select/SKILL.md` when the query field is still a wrapped local or enum-backed select and remote loading is not the real differentiator.
|
|
21
|
+
- Prefer filter-oriented date, time, and select modes that match backend query semantics rather than full data-entry richness.
|
|
22
|
+
- Do not introduce business-form-only fields such as `FormSwitch`, `FormTagInput`, or `FormRate` into this grid unless the page is no longer primarily a query surface.
|
|
23
|
+
|
|
24
|
+
For broader business-form field routing outside query pages, keep using `../../building-form-workflows/references/field-selection.md` as the base map.
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
# Query-page gotchas
|
|
2
|
+
|
|
3
|
+
- This skill chooses page shells, not just field wrappers
|
|
4
|
+
If the page also owns result rows and pagination, that shell decision matters more than any one field.
|
|
5
|
+
|
|
6
|
+
- `QueryForm` and `DataTable` are not interchangeable
|
|
7
|
+
Use `QueryForm` for filter surfaces only and `DataTable` when the page should own the full query-plus-results loop.
|
|
8
|
+
|
|
9
|
+
- `ConfigProvider` is a shared-shell tool
|
|
10
|
+
If only one table needs a custom empty or error state, keep that customization local instead of forcing a provider.
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# Query-page workflow
|
|
2
|
+
|
|
3
|
+
Use this checklist when the page is primarily a **filter plus results** workflow rather than a general business form.
|
|
4
|
+
|
|
5
|
+
If the page is mainly create, edit, or settings oriented, switch to `../../building-form-workflows/SKILL.md` instead of stretching this workflow.
|
|
6
|
+
|
|
7
|
+
1. Decide whether the page stops at collecting filters or also owns result rendering.
|
|
8
|
+
- filters only → `../../using-query-form/SKILL.md`
|
|
9
|
+
- filters plus rows, pagination, refresh, or table-state control → `../../using-data-table/SKILL.md`
|
|
10
|
+
2. Map query fields with `./field-selection.md` before tuning the shell details.
|
|
11
|
+
- Use query-oriented field skills such as `using-data-select` only when the filter surface really needs request-driven option loading.
|
|
12
|
+
- Keep wrapper-family semantics in the background unless the field meaning is still unclear.
|
|
13
|
+
3. Keep one clear source of truth for filter defaults, labels, placeholders, and option data.
|
|
14
|
+
- Avoid drifting into one set of semantics for the query schema and another for the page shell.
|
|
15
|
+
4. Add `../../using-config-provider/SKILL.md` only when multiple nearby `DataTable` instances should share empty or error presentation.
|
|
16
|
+
- Keep one-off table customization local when the override belongs to a single list.
|
|
17
|
+
5. Hand off to `../../building-form-workflows/SKILL.md` only when the page also contains broader business-form areas or the field semantics cannot be resolved from the query-field grid alone.
|
|
18
|
+
- Query-page workflow is about page-shell decisions.
|
|
19
|
+
- Form-workflow routing is about wrapper semantics and business-form field meaning.
|
|
20
|
+
6. Recheck edge cases before finalizing.
|
|
21
|
+
- Use `./gotchas.md` for shell-level routing mistakes.
|
|
22
|
+
- Use `./examples.md` when you need scenario-shaped guidance for list pages, report pages, or admin search surfaces.
|