@pairbo/ui-kit 0.2.0 → 0.2.2
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/pairbo.es.js +1 -0
- package/dist/src/index.d.ts +2 -0
- package/package.json +1 -1
- package/README.md +0 -186
package/dist/pairbo.es.js
CHANGED
|
@@ -12841,6 +12841,7 @@ let PboSelector = class extends r$5 {
|
|
|
12841
12841
|
firstUpdated() {
|
|
12842
12842
|
this._initializeChoices();
|
|
12843
12843
|
}
|
|
12844
|
+
// @ts-ignore
|
|
12844
12845
|
_initializeChoices() {
|
|
12845
12846
|
var _a2;
|
|
12846
12847
|
(_a2 = this._choices) == null ? void 0 : _a2.destroy();
|
package/package.json
CHANGED
package/README.md
DELETED
|
@@ -1,186 +0,0 @@
|
|
|
1
|
-
## **🚀 V1 To-Do List**
|
|
2
|
-
|
|
3
|
-
### **🔧 Pending Setup**
|
|
4
|
-
|
|
5
|
-
- [ ] **11ty setup is incomplete.**
|
|
6
|
-
- [ ] **Mock API needed** for:
|
|
7
|
-
- Fetching and submitting cards
|
|
8
|
-
- Processing handwritten images
|
|
9
|
-
|
|
10
|
-
---
|
|
11
|
-
|
|
12
|
-
## **🎨 Global Theme ([src/themes](src/themes))**
|
|
13
|
-
|
|
14
|
-
- [ ] Define global theme styles
|
|
15
|
-
- Identify `--sl-` global CSS variables in component styles, and replace with `--pbo-`
|
|
16
|
-
- Declare variables in [`default.css`](src/themes/default.css)
|
|
17
|
-
|
|
18
|
-
---
|
|
19
|
-
|
|
20
|
-
## **📌 Components Overview**
|
|
21
|
-
|
|
22
|
-
### **🗂️ Drawer ([src/components/drawer](src/components/drawer))**
|
|
23
|
-
|
|
24
|
-
- [x] Implement **window-like title bar** with:
|
|
25
|
-
- **Left:** Back icon (if not on Card Selection page)
|
|
26
|
-
- **Center:** Current page name (**Card Selection** / **Card Editing**)
|
|
27
|
-
- **Right:** Close icon to dismiss drawer
|
|
28
|
-
- [x] Make styles more flexible:
|
|
29
|
-
- Support top/bottom/left/right drawers
|
|
30
|
-
- Allow setting drawer size (`30%`, `50%`, `60%`, `100%`)
|
|
31
|
-
- Add opening animations
|
|
32
|
-
- [ ] _(Optional)_ Customizable themes (background, colors, etc.)
|
|
33
|
-
|
|
34
|
-
---
|
|
35
|
-
|
|
36
|
-
### **✍️ Editor ([src/components/editor](src/components/editor))**
|
|
37
|
-
|
|
38
|
-
#### 🖥️ **Desktop Layout**
|
|
39
|
-
|
|
40
|
-
- [x] Implement responsive grid layout for desktop
|
|
41
|
-
- Grid rows: `1`
|
|
42
|
-
- Grid cols: `12`
|
|
43
|
-
- Image Slider:
|
|
44
|
-
- `sm`: col start `2`, end `7`
|
|
45
|
-
- `2xl`: col start `3`, end `7`
|
|
46
|
-
- Message Editor:
|
|
47
|
-
- `sm`: col start `7`, end `12`
|
|
48
|
-
- `2xl`: col start `7`, end `11`
|
|
49
|
-
|
|
50
|
-
#### 📱 **Mobile Layout**
|
|
51
|
-
|
|
52
|
-
- [x] Implement responsive flex layout for mobile
|
|
53
|
-
- `display: flex`
|
|
54
|
-
- `flex-direction: column`
|
|
55
|
-
- `gap: 1rem`
|
|
56
|
-
|
|
57
|
-
---
|
|
58
|
-
|
|
59
|
-
## **📝 Form Elements**
|
|
60
|
-
|
|
61
|
-
### **📄 Type Form ([src/components/type-form](src/components/type-form))**
|
|
62
|
-
|
|
63
|
-
- [x] Add gap between form elements
|
|
64
|
-
- [ ] Implement submit logic:
|
|
65
|
-
- If message is empty → CTA button turns **red** and shows `Skip` link
|
|
66
|
-
- **❓ Where to implement validation logic?** (At type form level or button level?)
|
|
67
|
-
- [x] **Editor ↔️ Image Slider Communication**
|
|
68
|
-
- Auto-focus image slider when user types in textarea
|
|
69
|
-
- Improve communication logic between image slider and type form
|
|
70
|
-
|
|
71
|
-
---
|
|
72
|
-
|
|
73
|
-
### **🔠 Font Selector**
|
|
74
|
-
|
|
75
|
-
- [ ] **Extract** `font-selector` as a separate reusable component
|
|
76
|
-
- [ ] Optimize font variable passing
|
|
77
|
-
- [ ] Display font preview in dropdown
|
|
78
|
-
- [ ] Enable global font imports
|
|
79
|
-
- [ ] Improve font variable handling in `<pbo-selector>`
|
|
80
|
-
|
|
81
|
-
---
|
|
82
|
-
|
|
83
|
-
### **📝 Textarea ([src/components/textarea](src/components/textarea))**
|
|
84
|
-
|
|
85
|
-
- [x] Show **current/max characters** indicator
|
|
86
|
-
- [ ] _(Optional)_ Show **current/max lines** indicator
|
|
87
|
-
|
|
88
|
-
---
|
|
89
|
-
|
|
90
|
-
## **🎛️ Form Controls**
|
|
91
|
-
|
|
92
|
-
### **️ Radio Button, Group, and Button Enhancements**
|
|
93
|
-
|
|
94
|
-
#### **✅ Submit Button ([src/components/button](src/components/button))**
|
|
95
|
-
|
|
96
|
-
- [ ] **Submit Button Logic**
|
|
97
|
-
- Add validation to check form inputs
|
|
98
|
-
- Support `pre-submit` & `post-submit` callbacks:
|
|
99
|
-
- `pre-submit`: E.g. validate stock before adding a card
|
|
100
|
-
- `post-submit`: E.g. update cart after adding a card
|
|
101
|
-
|
|
102
|
-
#### **🎛️ Button Group ([src/components/button-group](src/components/button-group))**
|
|
103
|
-
|
|
104
|
-
- [x] Define group styles
|
|
105
|
-
- [ ] Implement submit validation & error handling
|
|
106
|
-
|
|
107
|
-
#### **🔘 Radio Button ([src/components/radio-button](src/components/radio-button))**
|
|
108
|
-
|
|
109
|
-
- [x] Enhance styling and logic based on button component
|
|
110
|
-
|
|
111
|
-
#### **📻 Radio Group ([src/components/radio-group](src/components/radio-group))**
|
|
112
|
-
|
|
113
|
-
- [x] Define group styles
|
|
114
|
-
- [ ] Implement validation & error handling
|
|
115
|
-
|
|
116
|
-
---
|
|
117
|
-
|
|
118
|
-
## **📂 Category & Category Image Components**
|
|
119
|
-
|
|
120
|
-
### **📦 Category ([src/components/category](src/components/category))**
|
|
121
|
-
|
|
122
|
-
- [x] Fix **image aspect ratio** (currently responsive)
|
|
123
|
-
- [x] Ensure **responsive slider**:
|
|
124
|
-
- **Desktop:** Show **4** cards
|
|
125
|
-
- **Mobile:** Show **2** cards
|
|
126
|
-
- Hide arrows if fewer than needed cards
|
|
127
|
-
- [x] Add **hover animations**
|
|
128
|
-
- [x] Improve **category title styling**
|
|
129
|
-
|
|
130
|
-
## Roadmap
|
|
131
|
-
|
|
132
|
-
### Preprepare
|
|
133
|
-
|
|
134
|
-
- [x] **Live Documentation for Development and Future Reference**
|
|
135
|
-
_Status_: The basic structure has been initialized using **11ty**. However, the bundling process for `src/components` is not fully configured. Additionally, rendering inline `` `html` `` within Markdown to actual HTML in **11ty** is not yet fully functional.
|
|
136
|
-
|
|
137
|
-
---
|
|
138
|
-
|
|
139
|
-
### Phase 1: Core Card Editor
|
|
140
|
-
|
|
141
|
-
- [x] **Font Dropdown Selector**
|
|
142
|
-
- [x] **Editor Dropdown Selector**
|
|
143
|
-
- [x] **Text Alignment Button Group**
|
|
144
|
-
- [x] **Text Color Block**
|
|
145
|
-
- [x] **Live Preview (Zoomed View)**
|
|
146
|
-
- [x] **Typing Live Preview**
|
|
147
|
-
- [ ] **Handwritten Live Preview**
|
|
148
|
-
- [x] **Image Slider**
|
|
149
|
-
- [ ] **CTA Button**
|
|
150
|
-
- [ ] **Handwritten Description Section**
|
|
151
|
-
|
|
152
|
-
---
|
|
153
|
-
|
|
154
|
-
### Phase 2: Core Card Selection
|
|
155
|
-
|
|
156
|
-
- [x] **Image Slider for Card Covers**
|
|
157
|
-
_(4 columns on desktop, 2 columns on mobile)_
|
|
158
|
-
- [x] **Category Selection**
|
|
159
|
-
- [x] **Image Components (Optional)**
|
|
160
|
-
|
|
161
|
-
---
|
|
162
|
-
|
|
163
|
-
### Phase 3: Integration Components
|
|
164
|
-
|
|
165
|
-
- [x] **Card Selection - Main Content**
|
|
166
|
-
- [x] **Card Editor (Typing) - Right Content Group**
|
|
167
|
-
- [ ] **Card Editor (Handwritten) - Right Content Group**
|
|
168
|
-
- [ ] **Card Editor (Handwritten) - Content Section**
|
|
169
|
-
- [x] **Card Editor (Typing) - Content Section**
|
|
170
|
-
|
|
171
|
-
---
|
|
172
|
-
|
|
173
|
-
### Phase 4: Modal/Pop-up
|
|
174
|
-
|
|
175
|
-
- [ ] **Checkboxes**
|
|
176
|
-
- [x] **Basic Modal Implementation**
|
|
177
|
-
- [x] **Sectioned Form in Modal**
|
|
178
|
-
- [ ] **Modal Submission API**
|
|
179
|
-
|
|
180
|
-
---
|
|
181
|
-
|
|
182
|
-
### Phase 5: Abstract Internal Logic
|
|
183
|
-
|
|
184
|
-
- **TBD** _(Detailed planning will be decided later.)_
|
|
185
|
-
|
|
186
|
-
This phase will focus on abstracting internal logic, such as retrieving card data and synchronizing editing information across different components.
|