@formique/semantq 1.0.4 → 1.0.6
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 +17 -12
- package/formique-semantq.js +555 -401
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -42,7 +42,7 @@ Formique Semantq is a native Semantq JS framework Schema Defintion Language (SDL
|
|
|
42
42
|
- **Mobile Responsive**: Forms are mobile responsive out of the box.
|
|
43
43
|
- **Nested Dynamic Conditional Logic**: Implement complex conditional logic to show or hide form fields based on user input.
|
|
44
44
|
- **Dynamic Dropdowns**: Create dropdowns whose options change dynamically based on other field selections.
|
|
45
|
-
- **JavaScript-Driven Themes**: Apply themes dynamically using JavaScript for a customizable user interface.
|
|
45
|
+
- **JavaScript-Driven Themes**: Apply themes or theme colors dynamically using JavaScript for a customizable user interface.
|
|
46
46
|
- **WAI-ARIA and WCAG-Compliant HTML**: Ensure all form elements are accessible and meet WCAG standards.
|
|
47
47
|
- **Progressive Enhancement**: Forms function with or without JavaScript, ensuring accessibility and functionality across all environments.
|
|
48
48
|
|
|
@@ -60,14 +60,6 @@ npx sv create
|
|
|
60
60
|
npx sv create my-app
|
|
61
61
|
```
|
|
62
62
|
|
|
63
|
-
#### Select the following options:
|
|
64
|
-
|
|
65
|
-
- **SemantqKit minimal** (optional but preferred)
|
|
66
|
-
- **Type checking with TypeScript** (optional but preferred)
|
|
67
|
-
- **ESLint** (optional but preferred)
|
|
68
|
-
- **npm** (required)
|
|
69
|
-
|
|
70
|
-
|
|
71
63
|
> **Note:** Always refer to the latest official Semantq guide on how to create a Semantq app, as this may change. [Semantq Documentation: Creating a Project](https://Semantq.dev/docs/kit/creating-a-project)
|
|
72
64
|
|
|
73
65
|
|
|
@@ -77,7 +69,7 @@ npx sv create my-app
|
|
|
77
69
|
npm run dev
|
|
78
70
|
|
|
79
71
|
# or start the server and open the app in a new browser tab
|
|
80
|
-
npm run dev
|
|
72
|
+
npm run dev
|
|
81
73
|
```
|
|
82
74
|
|
|
83
75
|
|
|
@@ -101,12 +93,25 @@ For demo purposes, let's create a new route (page) in `src/routes/registration`.
|
|
|
101
93
|
|
|
102
94
|
## Step 2: Add the CSS (Optional)
|
|
103
95
|
|
|
104
|
-
|
|
96
|
+
The NPM option:
|
|
97
|
+
|
|
98
|
+
```javascript
|
|
99
|
+
npm i formique-css
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
```javascript
|
|
103
|
+
import 'formique-css';
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
The CDN Option:
|
|
107
|
+
|
|
108
|
+
Include this inside the @head .. @end block of page layout file: `@layout.smq`
|
|
105
109
|
|
|
106
110
|
```html
|
|
107
|
-
<link rel="stylesheet" href="https://
|
|
111
|
+
<link rel="stylesheet" href="https://unpkg.com/formique-css@1.0.11/formique-css.css" />
|
|
108
112
|
```
|
|
109
113
|
|
|
114
|
+
|
|
110
115
|
**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
116
|
|
|
112
117
|
## Step 3: Install `@formique/semantq`
|