srcdev-nuxt-forms 0.0.9 → 0.0.10
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.
|
@@ -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>
|
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
|
})
|