srcdev-nuxt-forms 0.0.10 → 0.0.12
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/layouts/default.vue +31 -0
- package/nuxt.config.ts +6 -6
- package/package.json +3 -1
- package/pages/index.vue +45 -0
- /package/components/{forms → nuxt-forms}/input-text/InputText.vue +0 -0
- /package/components/{forms → nuxt-forms}/scaffolding/FormField.vue +0 -0
- /package/components/{forms → nuxt-forms}/scaffolding/FormWrapper.vue +0 -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
|
+
}
|
|
@@ -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
|
@@ -5,10 +5,10 @@ const { resolve } = createResolver(import.meta.url)
|
|
|
5
5
|
export default defineNuxtConfig({
|
|
6
6
|
devtools: { enabled: true },
|
|
7
7
|
css: [resolve('./assets/styles/main.css')],
|
|
8
|
-
components: [
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
],
|
|
8
|
+
// components: [
|
|
9
|
+
// {
|
|
10
|
+
// path: '~/components',
|
|
11
|
+
// pathPrefix: false,
|
|
12
|
+
// },
|
|
13
|
+
// ],
|
|
14
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
|
+
<NuxtFormsScaffoldingFormWrapper width="medium">
|
|
9
|
+
<template #default>
|
|
10
|
+
<form>
|
|
11
|
+
<p>Form content</p>
|
|
12
|
+
<NuxtFormsScaffoldingFormField width="wide" :has-gutter="true">
|
|
13
|
+
<template #default>
|
|
14
|
+
<p>Input text</p>
|
|
15
|
+
<NuxtFormsInputText />
|
|
16
|
+
</template>
|
|
17
|
+
</NuxtFormsScaffoldingFormField>
|
|
18
|
+
</form>
|
|
19
|
+
</template>
|
|
20
|
+
</NuxtFormsScaffoldingFormWrapper>
|
|
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>
|
|
File without changes
|
|
File without changes
|
|
File without changes
|