srcdev-nuxt-forms 2.1.1 → 2.1.3
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 +6 -2
- package/assets/styles/forms/variables/index.css +0 -1
- package/components/forms/input-checkbox/InputCheckboxCore.vue +2 -0
- package/components/forms/input-number/variants/InputNumberDefault.vue +2 -2
- package/components/forms/input-radio/InputRadiobuttonCore.vue +1 -0
- package/components/forms/input-text/InputTextCore.vue +13 -5
- package/components/forms/input-text/variants/material/InputTextAsNumberWithLabel.vue +18 -2
- package/nuxt.config.ts +4 -3
- package/package.json +2 -1
- package/assets/styles/forms/variables/_palette.css +0 -104
package/README.md
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
## NOTE: This is personal forms setup and not necessarily intended for widespread use
|
|
4
4
|
|
|
5
|
+
## Layer extended into barebones project
|
|
6
|
+
|
|
7
|
+
Checkout the repo [SRCDEV Nuxt Forms being extended as layer into another Nuxt project](https://github.com/srcdev/nuxt-extend-nuxt-forms)
|
|
8
|
+
|
|
5
9
|
## Setup
|
|
6
10
|
|
|
7
11
|
Make sure to install the dependencies:
|
|
@@ -23,14 +27,14 @@ npm run release
|
|
|
23
27
|
## Install Nuxt Forms
|
|
24
28
|
|
|
25
29
|
```bash
|
|
26
|
-
npm install --save
|
|
30
|
+
npm install --save srcdev-nuxt-forms
|
|
27
31
|
```
|
|
28
32
|
|
|
29
33
|
Then add the dependency to their `extends` in `nuxt.config`:
|
|
30
34
|
|
|
31
35
|
```ts
|
|
32
36
|
defineNuxtConfig({
|
|
33
|
-
extends: '
|
|
37
|
+
extends: 'srcdev-nuxt-forms',
|
|
34
38
|
});
|
|
35
39
|
```
|
|
36
40
|
|
|
@@ -150,6 +150,8 @@ const isChecked = computed(() => {
|
|
|
150
150
|
grid-area: element-stack;
|
|
151
151
|
background-color: var(--theme-form-checkbox-bg);
|
|
152
152
|
|
|
153
|
+
border-radius: var(--_checkbox-border-radius);
|
|
154
|
+
transform: translate(-2px, -2px);
|
|
153
155
|
height: var(--_checkbox-size);
|
|
154
156
|
width: var(--_checkbox-size);
|
|
155
157
|
place-content: center;
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
<InputButtonCore
|
|
11
11
|
type="button"
|
|
12
12
|
@click.stop.prevent="updateValue(-step, Number(modelValue) > min)"
|
|
13
|
-
:readonly="Number(modelValue)
|
|
13
|
+
:readonly="Number(modelValue) <= min"
|
|
14
14
|
:is-pending="false"
|
|
15
15
|
buttonText="Step down"
|
|
16
16
|
theme="primary"
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
<InputButtonCore
|
|
26
26
|
type="button"
|
|
27
27
|
@click.stop.prevent="updateValue(step, Number(modelValue) < max)"
|
|
28
|
-
:readonly="Number(modelValue)
|
|
28
|
+
:readonly="Number(modelValue) >= max"
|
|
29
29
|
:is-pending="false"
|
|
30
30
|
buttonText="Step up"
|
|
31
31
|
theme="primary"
|
|
@@ -153,12 +153,20 @@ onMounted(() => {
|
|
|
153
153
|
box-shadow: var(--theme-form-focus-box-shadow);
|
|
154
154
|
}
|
|
155
155
|
|
|
156
|
-
.
|
|
157
|
-
|
|
158
|
-
|
|
156
|
+
&:not(:has(.btn)) {
|
|
157
|
+
.slot {
|
|
158
|
+
display: inline-block;
|
|
159
|
+
padding-inline: 8px;
|
|
160
|
+
|
|
161
|
+
.icon {
|
|
162
|
+
color: var(--theme-form-input-text);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
}
|
|
159
166
|
|
|
160
|
-
|
|
161
|
-
|
|
167
|
+
&:has(.btn) {
|
|
168
|
+
.btn {
|
|
169
|
+
margin-inline: 6px;
|
|
162
170
|
}
|
|
163
171
|
}
|
|
164
172
|
|
|
@@ -23,14 +23,30 @@
|
|
|
23
23
|
inputmode="numeric"
|
|
24
24
|
>
|
|
25
25
|
<template v-if="hasLeftSlot" #left>
|
|
26
|
-
<InputButtonCore
|
|
26
|
+
<InputButtonCore
|
|
27
|
+
type="button"
|
|
28
|
+
@click.stop.prevent="updateValue(-step, Number(modelValue) > min)"
|
|
29
|
+
:readonly="Number(modelValue) <= min"
|
|
30
|
+
:is-pending="false"
|
|
31
|
+
buttonText="Step down"
|
|
32
|
+
theme="ghost"
|
|
33
|
+
size="x-small"
|
|
34
|
+
>
|
|
27
35
|
<template #iconOnly>
|
|
28
36
|
<slot name="left"></slot>
|
|
29
37
|
</template>
|
|
30
38
|
</InputButtonCore>
|
|
31
39
|
</template>
|
|
32
40
|
<template v-if="hasRightSlot" #right>
|
|
33
|
-
<InputButtonCore
|
|
41
|
+
<InputButtonCore
|
|
42
|
+
type="button"
|
|
43
|
+
@click.stop.prevent="updateValue(step, Number(modelValue) < max)"
|
|
44
|
+
:readonly="Number(modelValue) >= max"
|
|
45
|
+
:is-pending="false"
|
|
46
|
+
buttonText="Step up"
|
|
47
|
+
theme="ghost"
|
|
48
|
+
size="x-small"
|
|
49
|
+
>
|
|
34
50
|
<template #iconOnly>
|
|
35
51
|
<slot name="right"></slot>
|
|
36
52
|
</template>
|
package/nuxt.config.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
// https://nuxt.com/docs/api/configuration/nuxt-config
|
|
2
|
-
import { createResolver } from '@nuxt/kit';
|
|
3
|
-
const { resolve } = createResolver(import.meta.url);
|
|
2
|
+
// import { createResolver } from '@nuxt/kit';
|
|
3
|
+
// const { resolve } = createResolver(import.meta.url);
|
|
4
4
|
|
|
5
5
|
export default defineNuxtConfig({
|
|
6
6
|
devtools: { enabled: true },
|
|
7
|
-
css: [resolve('./assets/styles/main.css')],
|
|
7
|
+
// css: [resolve('./assets/styles/main.css')],
|
|
8
|
+
css: ['modern-normalize', './assets/styles/main.css'],
|
|
8
9
|
modules: ['@nuxt/icon'],
|
|
9
10
|
components: [
|
|
10
11
|
{
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "srcdev-nuxt-forms",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "2.1.
|
|
4
|
+
"version": "2.1.3",
|
|
5
5
|
"main": "nuxt.config.ts",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
"@iconify-json/radix-icons": "1.2.1",
|
|
33
33
|
"@iconify-json/ri": "1.2.3",
|
|
34
34
|
"@nuxt/icon": "1.7.2",
|
|
35
|
+
"modern-normalize": "3.0.1",
|
|
35
36
|
"nuxt": "3.14.159",
|
|
36
37
|
"zod": "3.23.8"
|
|
37
38
|
},
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--grayscale-surface-subtle: #f3f2f4;
|
|
3
|
-
--grayscale-surface-default: #847d85;
|
|
4
|
-
--grayscale-surface-disabled: #c6c3c7;
|
|
5
|
-
--grayscale-border-default: #9d979d;
|
|
6
|
-
--grayscale-border-disabled: #ada8ad;
|
|
7
|
-
--grayscale-border-dark: #494549;
|
|
8
|
-
--grayscale-text-title: #373538;
|
|
9
|
-
--grayscale-text-body: #494549;
|
|
10
|
-
--grayscale-text-subtitle: #787279;
|
|
11
|
-
--grayscale-text-caption: #847d85;
|
|
12
|
-
--grayscale-text-negative: #f3f2f3;
|
|
13
|
-
--grayscale-text-disabled: #c6c3c7;
|
|
14
|
-
|
|
15
|
-
--primary-surface-subtle: #f2e8f2;
|
|
16
|
-
--primary-surface-light: #d5b9d7;
|
|
17
|
-
--primary-surface-default: #781d7d;
|
|
18
|
-
--primary-surface-dark: #551559;
|
|
19
|
-
--primary-border-subtle: #d5b9d7;
|
|
20
|
-
--primary-border-default: #781d7d;
|
|
21
|
-
--primary-border-dark: #421045;
|
|
22
|
-
--primary-border-light: #c197c3;
|
|
23
|
-
--primary-text-icon: #781d7d;
|
|
24
|
-
|
|
25
|
-
--secondary-surface-subtle: #fef1eb;
|
|
26
|
-
--secondary-surface-light: #fbd5c1;
|
|
27
|
-
--secondary-surface-default: #f37737;
|
|
28
|
-
--secondary-surface-dark: #ad5427;
|
|
29
|
-
--secondary-border-subtle: #fbd5c1;
|
|
30
|
-
--secondary-border-default: #f37737;
|
|
31
|
-
--secondary-border-dark: #86411e;
|
|
32
|
-
--secondary-border-light: #f9c0a3;
|
|
33
|
-
--secondary-text-icon: #f37737;
|
|
34
|
-
|
|
35
|
-
--accent-primary-surface-light: #e6f8fc;
|
|
36
|
-
--accent-primary-surface-subtle: #b0eaf7;
|
|
37
|
-
--accent-primary-surface-default: #00bbe4;
|
|
38
|
-
--accent-primary-surface-dark: #0085a2;
|
|
39
|
-
--accent-primary-border-subtle: #b0eaf7;
|
|
40
|
-
--accent-primary-border-default: #00bbe4;
|
|
41
|
-
--accent-primary-border-dark: #00677d;
|
|
42
|
-
--accent-primary-border-light: #8ae0f3;
|
|
43
|
-
--accent-primary-text-icon: #00bbe4;
|
|
44
|
-
|
|
45
|
-
--accent-secondary-surface-subtle: #f4f9ec;
|
|
46
|
-
--accent-secondary-surface-light: #dcedc3;
|
|
47
|
-
--accent-secondary-surface-default: #8ec63f;
|
|
48
|
-
--accent-secondary-surface-dark: #658d2d;
|
|
49
|
-
--accent-secondary-border-subtle: #dcedc3;
|
|
50
|
-
--accent-secondary-border-default: #8ec63f;
|
|
51
|
-
--accent-secondary-border-dark: #4e6d23;
|
|
52
|
-
--accent-secondary-border-light: #cbe5a7;
|
|
53
|
-
--accent-secondary-text-icon: #8ec63f;
|
|
54
|
-
|
|
55
|
-
--accent-tertiary-surface-subtle: #feecf4;
|
|
56
|
-
--accent-tertiary-surface-light: #fac4dd;
|
|
57
|
-
--accent-tertiary-surface-default: #f04292;
|
|
58
|
-
--accent-tertiary-surface-dark: #aa2f68;
|
|
59
|
-
--accent-tertiary-border-subtle: #fac4dd;
|
|
60
|
-
--accent-tertiary-border-default: #f04292;
|
|
61
|
-
--accent-tertiary-border-dark: #842450;
|
|
62
|
-
--accent-tertiary-border-light: #f8a8cd;
|
|
63
|
-
--accent-tertiary-text-icon: #f04292;
|
|
64
|
-
|
|
65
|
-
--error-surface-subtle: #fceaed;
|
|
66
|
-
--error-surface-light: #f5bdc6;
|
|
67
|
-
--error-surface-default: #e02947;
|
|
68
|
-
--error-surface-dark: #9f1d32;
|
|
69
|
-
--error-border-subtle: #f5bdc6;
|
|
70
|
-
--error-border-default: #e02947;
|
|
71
|
-
--error-border-dark: #7b1727;
|
|
72
|
-
--error-border-light: #f19daa;
|
|
73
|
-
--error-text-icon: #e02947;
|
|
74
|
-
|
|
75
|
-
--warning-orange-surface-subtle: #fef5e6;
|
|
76
|
-
--warning-orange-surface-light: #fce0b0;
|
|
77
|
-
--warning-orange-surface-default: #f59b00;
|
|
78
|
-
--warning-orange-surface-dark: #ae6e00;
|
|
79
|
-
--warning-orange-border-subtle: #fce0b0;
|
|
80
|
-
--warning-orange-border-default: #f59b00;
|
|
81
|
-
--warning-orange-border-dark: #875500;
|
|
82
|
-
--warning-orange-border-light: #fad18a;
|
|
83
|
-
--warning-orange-text-icon: #f59b00;
|
|
84
|
-
|
|
85
|
-
--warning-yellow-surface-subtle: #fffbe6;
|
|
86
|
-
--warning-yellow-surface-light: #fff4b0;
|
|
87
|
-
--warning-yellow-surface-default: #ffda00;
|
|
88
|
-
--warning-yellow-surface-dark: #b59b00;
|
|
89
|
-
--warning-yellow-border-subtle: #fff4b0;
|
|
90
|
-
--warning-yellow-border-default: #ffda00;
|
|
91
|
-
--warning-yellow-border-dark: #8c7800;
|
|
92
|
-
--warning-yellow-border-light: #ffee8a;
|
|
93
|
-
--warning-yellow-text-icon: #ffda00;
|
|
94
|
-
|
|
95
|
-
--success-surface-subtle: #e6f8f7;
|
|
96
|
-
--success-surface-light: #b2eae5;
|
|
97
|
-
--success-surface-default: #07bbac;
|
|
98
|
-
--success-surface-dark: #05857a;
|
|
99
|
-
--success-border-subtle: #b2eae5;
|
|
100
|
-
--success-border-default: #07bbac;
|
|
101
|
-
--success-border-dark: #04675f;
|
|
102
|
-
--success-border-light: #8de0d9;
|
|
103
|
-
--success-text-icon: #07bbac;
|
|
104
|
-
}
|