Skip to content

Commit ca24af1

Browse files
orvnorvn
authored
Merge pull request #62 from data-preservation-programs/fix-country-dropdown-submit-bug
fix: country dropdown submit bug
2 parents 0818cba + cf00fff commit ca24af1

File tree

112 files changed

+19602
-21036
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

112 files changed

+19602
-21036
lines changed

‎.eslintrc.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ module.exports = {
55
extends: [
66
'@nuxt/eslint-config',
77
'./.nuxt/.eslint.nuxt3-globals.json',
8-
'plugin:vue/essential'
8+
'plugin:vue/vue3-recommended'
99
],
1010
ignorePatterns: [
1111
'.nuxt/',
@@ -40,6 +40,7 @@ module.exports = {
4040
"max": 3
4141
}
4242
}],
43-
'vue/script-setup-uses-vars': 'error'
43+
'vue/script-setup-uses-vars': 'error',
44+
'vue/no-v-for-template-key': 'off'
4445
}
4546
}

‎.fleek.json

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
{
22
"build": {
3-
"image": "node:16.19",
3+
"image": "node:20.9.0-slim",
44
"command": "npm ci && npm run generate",
55
"publicDir": ".output/public",
66
"environment": {
7-
"SERVER_ENV": "production"
7+
"SERVER_ENV": "production",
8+
"ALGOLIA_APPLICATION_ID": "default",
9+
"ALGOLIA_API_KEY": "default",
10+
"ALGOLIA_INDEX_ID": "default"
811
}
912
}
1013
}

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Singularity Website
1+
# Singularity website
22
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?logo=conventionalcommits&logoColor=white)](https://conventionalcommits.org)
33

44

‎assets/scss/theme/typography.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -292,7 +292,7 @@ $fontAssetPath: 'assets/fonts';
292292

293293
@mixin formFieldErrorMessage {
294294
font-size: toRem(14);
295-
line-height: leading(21, 14);
295+
line-height: 1;
296296
font-weight: 400;
297297
letter-spacing: 0.01em;
298298
}

‎components/form/field-container.vue

+198
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
<template>
2+
<ZeroFormField
3+
v-slot="{ field, fieldId, fieldType, state, required, disabled, validationMessage, updateValue, toggleState }"
4+
v-bind="props">
5+
6+
<label v-if="scaffold.label" :for="fieldId" :class="['field-label', state]">
7+
{{ scaffold.label }}
8+
<sup v-if="required" class="required">*</sup>
9+
</label>
10+
11+
<div v-if="scaffold.description" class="description">
12+
{{ scaffold.description }}
13+
</div>
14+
15+
<component
16+
:is="map[fieldType]"
17+
:field="field"
18+
:form-scaffold="formScaffold"
19+
:disabled="disabled"
20+
@update-value="updateValue"
21+
@toggle-state="toggleState"
22+
@toggle-focused="toggleState" />
23+
24+
<slot />
25+
26+
<div v-if="validationMessage" class="validation-message">
27+
{{ validationMessage }}
28+
</div>
29+
30+
</ZeroFormField>
31+
</template>
32+
33+
<script setup>
34+
// ======================================================================= Setup
35+
const props = defineProps({
36+
scaffold: {
37+
type: Object,
38+
required: true
39+
},
40+
/**
41+
* Used in the Array field
42+
*/
43+
formScaffold: {
44+
type: Object,
45+
required: false,
46+
default: () => {}
47+
},
48+
forceDisabled: {
49+
type: Boolean,
50+
required: false,
51+
default: false
52+
},
53+
forceValidate: {
54+
type: Boolean,
55+
required: false,
56+
default: true
57+
},
58+
/**
59+
* On occasions where the final root element in field-conditional.vue render
60+
* must be something specific. Such as when wrapping a <tbody> in a field-standalone,
61+
* it cannot be a div as the wrapper. It must be <tbody> at the root to prevent
62+
* SSR hydration errors.
63+
*/
64+
rootHtmlTag: {
65+
type: String,
66+
required: false,
67+
default: 'div'
68+
}
69+
})
70+
71+
const map = {
72+
'FieldInput': resolveComponent('FormFieldInput'),
73+
'FieldTextarea': resolveComponent('FormFieldTextarea'),
74+
'FieldBoolean': resolveComponent('FormFieldBoolean'),
75+
'FieldDatepicker': resolveComponent('FormFieldDatepicker'),
76+
'FieldSelect': resolveComponent('FormFieldSelect'),
77+
'FieldUpload': resolveComponent('FormFieldUpload')
78+
}
79+
</script>
80+
81+
<style lang="scss" scoped>
82+
@keyframes grow {
83+
0% { transform: scale(0.5); }
84+
100% { opacity: 1; transform: scale(1); }
85+
}
86+
87+
// ///////////////////////////////////////////////////////////////////// General
88+
.field-container {
89+
position: relative;
90+
&:hover,
91+
&:focus-within {
92+
.tooltip {
93+
&:before,
94+
&:after,
95+
.icon {
96+
transition: 150ms ease-in;
97+
opacity: 1;
98+
}
99+
&:before {
100+
transform: translate(0, -50%) rotate(-90deg);
101+
}
102+
&:after {
103+
transform: translate(0, -50%);
104+
}
105+
.icon {
106+
transform: scale(1);
107+
}
108+
}
109+
}
110+
&.disabled {
111+
.field-label {
112+
cursor: default;
113+
}
114+
}
115+
&:not(:last-child) {
116+
margin-bottom: toRem(30);
117+
}
118+
}
119+
120+
:deep(.field) {
121+
position: relative;
122+
font-weight: 500;
123+
}
124+
125+
:deep(.description) {
126+
margin-top: 0.5rem;
127+
line-height: leading(30, 18);
128+
margin-bottom: 2.25rem;
129+
}
130+
131+
// ////////////////////////////////////////////////////////////////////// Arrays
132+
.array {
133+
display: flex;
134+
flex-direction: column;
135+
}
136+
137+
.group {
138+
display: flex;
139+
flex-direction: row;
140+
.field {
141+
flex: 1;
142+
margin-bottom: 2rem;
143+
&:not(:last-child) {
144+
margin-right: 2rem;
145+
}
146+
}
147+
}
148+
149+
.add-group-button {
150+
margin-left: auto;
151+
}
152+
153+
.icon-trash {
154+
width: 1.5rem;
155+
}
156+
157+
// /////////////////////////////////////////////////////////////////////// Label
158+
.field-label {
159+
display: inline-block;
160+
margin-bottom: toRem(8);
161+
font-size: toRem(13);
162+
font-weight: 500;
163+
cursor: pointer;
164+
.required {
165+
color: $burntSienna;
166+
font-size: toRem(20);
167+
top: 0;
168+
}
169+
}
170+
171+
.panel-left {
172+
display: flex;
173+
flex-direction: row;
174+
align-items: center;
175+
}
176+
177+
.icon {
178+
display: none;
179+
margin-right: toRem(11);
180+
&.question-mark {
181+
display: block;
182+
}
183+
}
184+
185+
// ////////////////////////////////////////////////////////////////// Validation
186+
:deep(.validation-message) {
187+
position: absolute;
188+
right: toRem(3);
189+
margin-top: toRem(6);
190+
@include formFieldErrorMessage;
191+
color: $burntSienna;
192+
sup {
193+
top: -0.125rem;
194+
margin-right: 0.0625rem;
195+
font-size: 100%;
196+
}
197+
}
198+
</style>

‎components/form/field/boolean.vue

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<template>
2+
<ZeroFieldBoolean v-bind="{...props, ...$attrs}" />
3+
</template>
4+
5+
<script setup>
6+
// ======================================================================= Setup
7+
const props = defineProps({
8+
field: {
9+
type: Object,
10+
required: true
11+
},
12+
disabled: {
13+
type: Boolean,
14+
required: false,
15+
default: false
16+
}
17+
})
18+
</script>
19+
20+
<style lang="scss" scoped>
21+
// ///////////////////////////////////////////////////////////////////// General
22+
.field-boolean {
23+
display: flex;
24+
position: relative;
25+
width: toRem(29);
26+
height: toRem(15);
27+
border-radius: toRem(12);
28+
// background-color: $outerSpace;
29+
cursor: pointer;
30+
transition: 150ms ease-out;
31+
&:after {
32+
content: '';
33+
position: absolute;
34+
top: -1px;
35+
left: -1px;
36+
width: 15px;
37+
height: 15px;
38+
// background-color: $whisper;
39+
border: 1px solid rgba(#7D7C7D, 0.4);
40+
border-radius: 50%;
41+
pointer-events: none;
42+
transition: 150ms ease-out;
43+
}
44+
&:not(.disabled):not(.checked) {
45+
&:hover {
46+
// background-color: rgba($whisper, 0.2);
47+
}
48+
&.error {
49+
background-color: $burntSienna;
50+
&:after {
51+
border-color: $burntSienna;
52+
}
53+
}
54+
}
55+
&.disabled {
56+
cursor: no-drop;
57+
}
58+
&.checked {
59+
background-color: $chardonnay;
60+
&:after {
61+
transition: 150ms ease-in;
62+
border-color: rgba($chardonnay, 0.3);
63+
transform: translateX(100%);
64+
}
65+
}
66+
}
67+
68+
:deep(.boolean-container) {
69+
width: 100%;
70+
height: 100%;
71+
}
72+
73+
:deep(input.boolean) {
74+
display: block;
75+
width: 100%;
76+
height: 100%;
77+
opacity: 0;
78+
cursor: pointer;
79+
}
80+
</style>

0 commit comments

Comments
 (0)