srcdev-nuxt-forms 0.0.9 → 0.0.11
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/assets/styles/forms/variables/_theme.css +21 -21
- package/components/forms/input-text/InputText.vue +13 -14
- package/components/forms/scaffolding/FormField.vue +47 -0
- package/components/forms/scaffolding/FormWrapper.vue +34 -0
- package/layouts/default.vue +31 -0
- package/nuxt.config.ts +6 -2
- package/package.json +3 -1
- package/pages/index.vue +45 -0
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
2
|
+
--form-bg-color: #f9f9f9; /* Background color for form */
|
|
3
|
+
--form-border-color: #cccccc; /* Border color for form elements */
|
|
4
|
+
--form-text-color: #333333; /* Text color for form elements */
|
|
5
|
+
--form-placeholder-color: #888888; /* Placeholder text color */
|
|
6
|
+
--form-focus-border-color: #0076c6; /* Border color on focus */
|
|
7
|
+
--form-button-bg-color: #0076c6; /* Button background color */
|
|
8
|
+
--form-button-text-color: #ffffff; /* Button text color */
|
|
9
|
+
--form-error-color: #ce0606; /* Error message color */
|
|
10
|
+
--form-success-color: #008000; /* Success message color */
|
|
11
|
+
--form-warning-color: #ffcc00; /* Warning message color */
|
|
12
|
+
--form-info-color: #0076c6; /* Info message color */
|
|
13
|
+
--form-required-color: #ce0606; /* Required field color */
|
|
14
|
+
--form-disabled-color: #cccccc; /* Disabled field color */
|
|
15
|
+
--form-disabled-bg-color: #f9f9f9; /* Disabled field background color */
|
|
16
|
+
--form-disabled-border-color: #cccccc; /* Disabled field border color */
|
|
17
|
+
--form-disabled-text-color: #999999; /* Disabled field text color */
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
--input-border: #121212;
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
--input-border-radius: 4px;
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
23
|
+
--input-border-width-thin: 1px;
|
|
24
|
+
--input-border-width-thick: 2px;
|
|
25
|
+
}
|
|
@@ -1,23 +1,22 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
<div>
|
|
3
|
+
<input type="text" class="input-text" v-model="formValue" />
|
|
4
|
+
</div>
|
|
5
5
|
</template>
|
|
6
6
|
<script setup lang="ts">
|
|
7
|
-
|
|
7
|
+
console.log('InputText component loaded')
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
watchEffect(() => {
|
|
12
|
-
console.log("Form value changed to: ", formValue.value);
|
|
13
|
-
});
|
|
9
|
+
const formValue = ref('')
|
|
14
10
|
|
|
11
|
+
watchEffect(() => {
|
|
12
|
+
console.log('Form value changed to: ', formValue.value)
|
|
13
|
+
})
|
|
15
14
|
</script>
|
|
16
15
|
|
|
17
16
|
<style lang="css">
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
17
|
+
.input-text {
|
|
18
|
+
border: var(--input-border-width-thin) solid var(--input-border);
|
|
19
|
+
border-radius: var(--input-border-radius);
|
|
20
|
+
padding: 10px;
|
|
21
|
+
}
|
|
23
22
|
</style>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="form-field" :class="[width, { 'has-gutter': hasGutter }]">
|
|
3
|
+
<h1>FormField.vue</h1>
|
|
4
|
+
<slot name="default"></slot>
|
|
5
|
+
</div>
|
|
6
|
+
</template>
|
|
7
|
+
|
|
8
|
+
<script setup lang="ts">
|
|
9
|
+
defineProps({
|
|
10
|
+
width: {
|
|
11
|
+
type: String as PropType<string>,
|
|
12
|
+
default: 'narrow',
|
|
13
|
+
validator: (val: string) => ['narrow', 'medium', 'wide'].includes(val),
|
|
14
|
+
},
|
|
15
|
+
hasGutter: {
|
|
16
|
+
type: Boolean as PropType<boolean>,
|
|
17
|
+
default: true,
|
|
18
|
+
},
|
|
19
|
+
})
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<style lang="css">
|
|
23
|
+
.form-field {
|
|
24
|
+
--_gutter-width: 0px;
|
|
25
|
+
--_max-width: 400px;
|
|
26
|
+
|
|
27
|
+
margin-inline: auto;
|
|
28
|
+
width: min(100% - calc(2 * var(--_gutter-width)), var(--_max-width));
|
|
29
|
+
outline: 1px solid #571818;
|
|
30
|
+
|
|
31
|
+
&.has-gutter {
|
|
32
|
+
--_gutter-width: 16px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&.narrow {
|
|
36
|
+
max-width: 400px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&.medium {
|
|
40
|
+
--_max-width: 800px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&.wide {
|
|
44
|
+
--_max-width: 1200px;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
</style>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="form-wrapper" :class="width">
|
|
3
|
+
<h1>FormWrapper.vue</h1>
|
|
4
|
+
<slot name="default"></slot>
|
|
5
|
+
</div>
|
|
6
|
+
</template>
|
|
7
|
+
|
|
8
|
+
<script setup lang="ts">
|
|
9
|
+
defineProps({
|
|
10
|
+
width: {
|
|
11
|
+
type: String as PropType<string>,
|
|
12
|
+
default: 'narrow',
|
|
13
|
+
validator: (val: string) => ['narrow', 'medium', 'wide'].includes(val),
|
|
14
|
+
},
|
|
15
|
+
})
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<style lang="css">
|
|
19
|
+
.form-wrapper {
|
|
20
|
+
outline: 1px solid #000;
|
|
21
|
+
|
|
22
|
+
&.narrow {
|
|
23
|
+
max-width: 400px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&.medium {
|
|
27
|
+
max-width: 800px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&.wide {
|
|
31
|
+
max-width: 1200px;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
</style>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="page-layout">
|
|
3
|
+
<div>
|
|
4
|
+
<h1>Header</h1>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<div>
|
|
8
|
+
<slot name="layout-content"></slot>
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<div>
|
|
12
|
+
<h1>Footer</h1>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script setup lang="ts">
|
|
18
|
+
useHead({
|
|
19
|
+
bodyAttrs: {
|
|
20
|
+
class: 'body-default',
|
|
21
|
+
id: 'body',
|
|
22
|
+
},
|
|
23
|
+
})
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<style lang="css">
|
|
27
|
+
.page-layout {
|
|
28
|
+
display: grid;
|
|
29
|
+
grid-template-rows: auto 1fr auto;
|
|
30
|
+
}
|
|
31
|
+
</style>
|
package/nuxt.config.ts
CHANGED
|
@@ -4,7 +4,11 @@ const { resolve } = createResolver(import.meta.url)
|
|
|
4
4
|
|
|
5
5
|
export default defineNuxtConfig({
|
|
6
6
|
devtools: { enabled: true },
|
|
7
|
-
css: [
|
|
8
|
-
|
|
7
|
+
css: [resolve('./assets/styles/main.css')],
|
|
8
|
+
components: [
|
|
9
|
+
{
|
|
10
|
+
path: '~/components',
|
|
11
|
+
pathPrefix: false,
|
|
12
|
+
},
|
|
9
13
|
],
|
|
10
14
|
})
|
package/package.json
CHANGED
package/pages/index.vue
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<NuxtLayout name="default">
|
|
4
|
+
<template #layout-content>
|
|
5
|
+
<div>
|
|
6
|
+
<h1>Sample form page</h1>
|
|
7
|
+
|
|
8
|
+
<FormWrapper width="medium">
|
|
9
|
+
<template #default>
|
|
10
|
+
<form>
|
|
11
|
+
<p>Form content</p>
|
|
12
|
+
<FormField width="wide" :has-gutter="true">
|
|
13
|
+
<template #default>
|
|
14
|
+
<p>Input text</p>
|
|
15
|
+
<InputText />
|
|
16
|
+
</template>
|
|
17
|
+
</FormField>
|
|
18
|
+
</form>
|
|
19
|
+
</template>
|
|
20
|
+
</FormWrapper>
|
|
21
|
+
</div>
|
|
22
|
+
</template>
|
|
23
|
+
</NuxtLayout>
|
|
24
|
+
</div>
|
|
25
|
+
</template>
|
|
26
|
+
|
|
27
|
+
<script setup lang="ts">
|
|
28
|
+
definePageMeta({
|
|
29
|
+
layout: false,
|
|
30
|
+
})
|
|
31
|
+
|
|
32
|
+
useHead({
|
|
33
|
+
title: 'Homepage',
|
|
34
|
+
meta: [{ name: 'description', content: 'Homepage' }],
|
|
35
|
+
bodyAttrs: {
|
|
36
|
+
class: '',
|
|
37
|
+
},
|
|
38
|
+
})
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<style lang="css">
|
|
42
|
+
p {
|
|
43
|
+
color: initial;
|
|
44
|
+
}
|
|
45
|
+
</style>
|