@formique/semantq 1.0.2 → 1.0.4
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/README.md +237 -5
- package/formique-semantq.js +3870 -0
- package/package.json +2 -2
- package/formique.mjs +0 -1
package/README.md
CHANGED
|
@@ -99,7 +99,7 @@ For demo purposes, let's create a new route (page) in `src/routes/registration`.
|
|
|
99
99
|
touch src/routes/registration/+page.Semantq
|
|
100
100
|
```
|
|
101
101
|
|
|
102
|
-
## Step 2: Add the CSS
|
|
102
|
+
## Step 2: Add the CSS (Optional)
|
|
103
103
|
|
|
104
104
|
Paste the following Formique CSS in the `<head>` section of `src/app.html`:
|
|
105
105
|
|
|
@@ -107,7 +107,9 @@ Paste the following Formique CSS in the `<head>` section of `src/app.html`:
|
|
|
107
107
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/formique-css@1.0.7/formique.min.css" formique-style>
|
|
108
108
|
```
|
|
109
109
|
|
|
110
|
-
|
|
110
|
+
**Note:** The provided Formique CSS is optional. Formique will function fully without it, allowing you full flexibility to apply your own styles. However, for convenience, a set of default class names is available to help you quickly style form containers, form elements, and input types. See the sections below for a complete list of available class names.
|
|
111
|
+
|
|
112
|
+
## Step 3: Install `@formique/semantq`
|
|
111
113
|
|
|
112
114
|
To use Formique in your Semantq application, you need to install the `formique-semantq` package.
|
|
113
115
|
|
|
@@ -124,7 +126,7 @@ Add the following code to +page.Semantq:
|
|
|
124
126
|
```Semantq
|
|
125
127
|
<script>
|
|
126
128
|
import { onMount } from 'Semantq';
|
|
127
|
-
import Formique from 'formique
|
|
129
|
+
import Formique from '@formique/semantq';
|
|
128
130
|
|
|
129
131
|
// Define the form schema
|
|
130
132
|
const formSchema = [
|
|
@@ -184,8 +186,238 @@ Once the server is running, you can view the form at:
|
|
|
184
186
|
|
|
185
187
|
http://localhost:5173/registration
|
|
186
188
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
+
|
|
190
|
+
## ✨ 1. Styling the Form
|
|
191
|
+
|
|
192
|
+
Formique comes with a set of built-in themes to help you quickly style your forms. These themes are **headless and minimal**, allowing easy blending with your site's design system. They apply styling **primarily to the submit button background** and **the bottom border of focused inputs**, while maintaining a **light background** for most themes.
|
|
193
|
+
|
|
194
|
+
### Available Built-in Themes:
|
|
195
|
+
|
|
196
|
+
* `light`
|
|
197
|
+
* `dark`
|
|
198
|
+
* `pink`
|
|
199
|
+
* `indigo`
|
|
200
|
+
* `dark-blue`
|
|
201
|
+
* `light-blue`
|
|
202
|
+
* `dark-orange`
|
|
203
|
+
* `bright-yellow`
|
|
204
|
+
* `green`
|
|
205
|
+
* `purple`
|
|
206
|
+
* `midnight-blush`
|
|
207
|
+
* `deep-blue`
|
|
208
|
+
* `blue`
|
|
209
|
+
* `brown`
|
|
210
|
+
* `orange`
|
|
211
|
+
|
|
212
|
+
> ⚠️ The `dark` theme is more opinionated with full dark background support. All others are intentionally minimal.
|
|
213
|
+
|
|
214
|
+
To apply a theme, set the `theme` option in your `formSettings`:
|
|
215
|
+
|
|
216
|
+
```js
|
|
217
|
+
const formSettings = {
|
|
218
|
+
theme: 'indigo'
|
|
219
|
+
};
|
|
220
|
+
```
|
|
221
|
+
If no theme is set, Formique will default to the dark theme.
|
|
222
|
+
|
|
223
|
+
### Fine-Grained Theme Control
|
|
224
|
+
|
|
225
|
+
To override the button and focus color with your own custom color, use the `themeColor` option in hexadecimal format:
|
|
226
|
+
|
|
227
|
+
```js
|
|
228
|
+
const formSettings = {
|
|
229
|
+
themeColor: '#327ba8' // Must be a valid hex value
|
|
230
|
+
};
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
### Custom Styling
|
|
234
|
+
|
|
235
|
+
Formique’s form classes are exposed for complete customization. You can target the form using `.formique`, and inputs with classes like `.formique-input`, `.formique-label`, `.formique-submit`. See section below.
|
|
236
|
+
|
|
237
|
+
Example:
|
|
238
|
+
|
|
239
|
+
```css
|
|
240
|
+
.formique-input {
|
|
241
|
+
border-radius: 5px;
|
|
242
|
+
padding: 10px;
|
|
243
|
+
}
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
|
|
247
|
+
## 2. Styling and Sizing the Form Container
|
|
248
|
+
|
|
249
|
+
Formique renders inside a container `<div>` that you specify by ID.
|
|
250
|
+
|
|
251
|
+
### Default Container
|
|
252
|
+
|
|
253
|
+
```html
|
|
254
|
+
<div id="formique" class=""></div>
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
### ⚙Custom Container ID
|
|
258
|
+
|
|
259
|
+
You can use any custom container ID by declaring it in your `formSettings`:
|
|
260
|
+
|
|
261
|
+
```js
|
|
262
|
+
const formSettings = {
|
|
263
|
+
formContainerId: 'myForm'
|
|
264
|
+
};
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
And in your HTML:
|
|
268
|
+
|
|
269
|
+
```html
|
|
270
|
+
<div id="myForm"></div>
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
### Built-in Container Size Classes
|
|
274
|
+
|
|
275
|
+
Formique includes several responsive width utility classes that can be used directly on your form container:
|
|
276
|
+
|
|
277
|
+
| Class Name | Description |
|
|
278
|
+
| -- | -- |
|
|
279
|
+
| `width-full` | 100% width |
|
|
280
|
+
| `width-half` | 50% width |
|
|
281
|
+
| `width-medium` | 600px fixed width |
|
|
282
|
+
| `width-small` | 400px fixed width |
|
|
283
|
+
|
|
284
|
+
Example:
|
|
285
|
+
|
|
286
|
+
```html
|
|
287
|
+
<div id="formique" class="width-half"></div>
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
### Custom Inline Style Control
|
|
291
|
+
|
|
292
|
+
If you want precise control over the container styling, use the `formContainerStyle` setting:
|
|
293
|
+
|
|
294
|
+
```js
|
|
295
|
+
const formSettings = {
|
|
296
|
+
formContainerStyle: 'width: 100%; max-width: 700px; padding: 2rem;'
|
|
297
|
+
};
|
|
298
|
+
```
|
|
299
|
+
|
|
300
|
+
> This will override the container’s `style` attribute directly.
|
|
301
|
+
|
|
302
|
+
|
|
303
|
+
|
|
304
|
+
|
|
305
|
+
## ✅ Complete List of `.formique`-Scoped CSS Classes
|
|
306
|
+
|
|
307
|
+
Here is a clean, alphabetically grouped list of **all unique CSS class selectors** used in your Formique stylesheet:
|
|
308
|
+
|
|
309
|
+
### 📦 Container & Layout
|
|
310
|
+
|
|
311
|
+
* `.formique`
|
|
312
|
+
* `.formique-form`
|
|
313
|
+
* `.width-full`
|
|
314
|
+
* `.width-half`
|
|
315
|
+
* `.width-medium`
|
|
316
|
+
* `.width-small`
|
|
317
|
+
* `.width-custom`
|
|
318
|
+
|
|
319
|
+
### 🏷️ Labels & Inputs
|
|
320
|
+
|
|
321
|
+
* `.form-label`
|
|
322
|
+
* `.form-input`
|
|
323
|
+
* `.form-control`
|
|
324
|
+
* `.form-textarea`
|
|
325
|
+
* `.form-select`
|
|
326
|
+
* `.form-select-input`
|
|
327
|
+
* `.form-radio-input`
|
|
328
|
+
* `.form-checkbox-input`
|
|
329
|
+
|
|
330
|
+
### 📚 Input Wrappers
|
|
331
|
+
|
|
332
|
+
* `.input-block`
|
|
333
|
+
* `.radio-group`
|
|
334
|
+
* `.checkbox-group`
|
|
335
|
+
|
|
336
|
+
### 🎨 Themes
|
|
337
|
+
|
|
338
|
+
* `.custom-theme`
|
|
339
|
+
* `.dark-theme`
|
|
340
|
+
* `.light-theme`
|
|
341
|
+
* `.pink-theme`
|
|
342
|
+
* `.indigo-theme`
|
|
343
|
+
* `.dark-blue-theme`
|
|
344
|
+
* `.light-blue-theme`
|
|
345
|
+
* `.dark-orange-theme`
|
|
346
|
+
* `.bright-yellow-theme`
|
|
347
|
+
* `.green-theme`
|
|
348
|
+
* `.purple-theme`
|
|
349
|
+
* `.midnight-blush-theme`
|
|
350
|
+
* `.deep-blue-theme`
|
|
351
|
+
* `.blue-theme`
|
|
352
|
+
* `.brown-theme`
|
|
353
|
+
* `.orange-theme`
|
|
354
|
+
|
|
355
|
+
### 🚀 Button
|
|
356
|
+
|
|
357
|
+
* `.form-submit-btn`
|
|
358
|
+
|
|
359
|
+
### 🔁 Loading
|
|
360
|
+
|
|
361
|
+
* `#formiqueSpinner`
|
|
362
|
+
* `.formique-spinner`
|
|
363
|
+
* `.formique-spinner .message`
|
|
364
|
+
|
|
365
|
+
### Status Messages
|
|
366
|
+
|
|
367
|
+
* `.formique-success`
|
|
368
|
+
* `.formique-error`
|
|
369
|
+
|
|
370
|
+
|
|
371
|
+
|
|
372
|
+
## 📬 3. Contact Form Quick Setup
|
|
373
|
+
|
|
374
|
+
Formique supports plug-and-play email contact forms using `@formique/semantq`.
|
|
375
|
+
|
|
376
|
+
### 🔧 Basic Email Contact Setup
|
|
377
|
+
|
|
378
|
+
```js
|
|
379
|
+
const formSettings = {
|
|
380
|
+
submitMode: 'email', // Required
|
|
381
|
+
submitOnPage: true, // Required
|
|
382
|
+
successMessage: 'Survey filled successfully', // Optional
|
|
383
|
+
errorMessage: 'Something went wrong', // Optional
|
|
384
|
+
sendTo: ['contacts@yourwebsite.com'] // Your actual email
|
|
385
|
+
};
|
|
386
|
+
```
|
|
387
|
+
|
|
388
|
+
### 📑 Defining a Form Schema
|
|
389
|
+
|
|
390
|
+
Create your form fields using a simple schema array:
|
|
391
|
+
|
|
392
|
+
```js
|
|
393
|
+
const formSchema = [
|
|
394
|
+
['text', 'name', 'Name', { required: true }],
|
|
395
|
+
['text', 'surname', 'Surname', { required: true }],
|
|
396
|
+
['email', 'email', 'Email', { required: true }, { style: 'color: red' }],
|
|
397
|
+
['textarea', 'message', 'Your Message here', { required: true }]
|
|
398
|
+
];
|
|
399
|
+
```
|
|
400
|
+
|
|
401
|
+
### Schema Syntax Recap
|
|
402
|
+
|
|
403
|
+
Each form field follows this format:
|
|
404
|
+
|
|
405
|
+
```js
|
|
406
|
+
['field type', 'field name', 'Label', { inlineValidation }, { inputAttributes }, [options]]
|
|
407
|
+
```
|
|
408
|
+
|
|
409
|
+
Examples:
|
|
410
|
+
|
|
411
|
+
* `text`, `email`, `textarea`, `select`, `checkbox`, `radio`
|
|
412
|
+
* Inline validation can include `{ required: true }`
|
|
413
|
+
* Additional HTML attributes (like `style`, `placeholder`, etc.) are supported.
|
|
414
|
+
|
|
415
|
+
|
|
416
|
+
## ⚠️ Domain Verification for Email Submissions
|
|
417
|
+
|
|
418
|
+
To enable email submissions, ensure your domain is **registered on your [useformique.com](https://useformique.com) account**.
|
|
419
|
+
|
|
420
|
+
This is required for sender verification and spam protection.
|
|
189
421
|
|
|
190
422
|
|
|
191
423
|
For more comprehensive details on Formique's features and usage and options visit the [Formique GitHub Repository](https://github.com/Gugulethu-Nyoni/formique).
|