7x31/nginxconfig.io
1
0
Fork 0
mirror of https://github.com/digitalocean/nginxconfig.io.git synced 2025-10-15 19:19:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

Upgrade to Vue 3 (#331)

Browse Source 
* Dependency updates

* Upgrade to Vue 3 (WIP)

* Fix reactivity of imported domains (the object gets replaced by a proxy)

* Cleaner access of proxy for domain imports

* Remove upgrade note about reactivity issue

* Fix locale switching

* Remove upgrade note about language issue

* Patch Vue 3 issues with pretty-checkbox-vue

* Remove upgrade note about checkbox issue

* Fix extra slot for checkboxes and radios

* Set checkmark as default for extra slot

* Use patched pretty-checkbox-vue from do-vue

* Fix removing domains

* Switch to main do-vue/do-bulma
This commit is contained in:
Matt Cowley
2022-03-21 22:51:21 +00:00
committed by GitHub
parent 28993820eb
commit ebca910786
23 changed files with 1944 additions and 5512 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/nginxconfig/templates/global_sections/docker.vue
View File

@@ -1,5 +1,5 @@
<!--
Copyright 2020 DigitalOcean
Copyright 2022 DigitalOcean
This code is licensed under the MIT License.
You may obtain a copy of the License at
@@ -52,7 +52,6 @@ THE SOFTWARE.
<div :class="`control${dockerfileChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="dockerfile" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.docker.includeDockerfile') }}
</PrettyCheck>
</div>
@@ -69,7 +68,6 @@ THE SOFTWARE.
<div :class="`control${dockerComposeChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="dockerCompose" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.docker.includeDockerCompose') }}
</PrettyCheck>
</div>
@@ -81,10 +79,10 @@ THE SOFTWARE.
</template>
<script>
import PrettyCheck from 'pretty-checkbox-vue/check';
import delegatedFromDefaults from '../../util/delegated_from_defaults';
import computedFromDefaults from '../../util/computed_from_defaults';
import analytics from '../../util/analytics';
import PrettyCheck from '../inputs/checkbox';
const defaults = {
dockerfile: {

16
src/nginxconfig/templates/global_sections/https.vue
View File

@@ -35,7 +35,6 @@ THE SOFTWARE.
<div :class="`control${portReuseChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="portReuse" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.https.enableReuseOfPort') }}
</PrettyCheck>
</div>
@@ -73,7 +72,6 @@ THE SOFTWARE.
>
<div class="radio">
<PrettyRadio v-model="sslProfile" :value="value" class="p-default p-round p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t(name) }}
</PrettyRadio>
</div>
@@ -92,7 +90,6 @@ THE SOFTWARE.
<div :class="`control${ocspCloudflareChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="ocspCloudflare" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.https.cloudflareResolver') }}
</PrettyCheck>
</div>
@@ -104,7 +101,6 @@ THE SOFTWARE.
>
<div class="radio">
<PrettyRadio v-model="ocspCloudflareType" :value="value" class="p-default p-round p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t(name) }}
</PrettyRadio>
</div>
@@ -114,7 +110,6 @@ THE SOFTWARE.
<div :class="`control${ocspGoogleChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="ocspGoogle" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.https.googlePublicDns') }}
</PrettyCheck>
</div>
@@ -126,7 +121,6 @@ THE SOFTWARE.
>
<div class="radio">
<PrettyRadio v-model="ocspGoogleType" :value="value" class="p-default p-round p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t(name) }}
</PrettyRadio>
</div>
@@ -136,7 +130,6 @@ THE SOFTWARE.
<div :class="`control${ocspOpenDnsChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="ocspOpenDns" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.https.openDns') }}
</PrettyCheck>
</div>
@@ -148,7 +141,6 @@ THE SOFTWARE.
>
<div class="radio">
<PrettyRadio v-model="ocspOpenDnsType" :value="value" class="p-default p-round p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t(name) }}
</PrettyRadio>
</div>
@@ -158,7 +150,6 @@ THE SOFTWARE.
<div :class="`control${ocspQuad9Changed ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="ocspQuad9" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.https.quad9') }}
</PrettyCheck>
</div>
@@ -170,7 +161,6 @@ THE SOFTWARE.
>
<div class="radio">
<PrettyRadio v-model="ocspQuad9Type" :value="value" class="p-default p-round p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t(name) }}
</PrettyRadio>
</div>
@@ -180,7 +170,6 @@ THE SOFTWARE.
<div :class="`control${ocspVerisignChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="ocspVerisign" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.https.verisign') }}
</PrettyCheck>
</div>
@@ -192,7 +181,6 @@ THE SOFTWARE.
>
<div class="radio">
<PrettyRadio v-model="ocspVerisignType" :value="value" class="p-default p-round p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t(name) }}
</PrettyRadio>
</div>
@@ -242,11 +230,11 @@ THE SOFTWARE.
</template>
<script>
import PrettyCheck from 'pretty-checkbox-vue/check';
import PrettyRadio from 'pretty-checkbox-vue/radio';
import clone from 'clone';
import delegatedFromDefaults from '../../util/delegated_from_defaults';
import computedFromDefaults from '../../util/computed_from_defaults';
import PrettyCheck from '../inputs/checkbox';
import PrettyRadio from '../inputs/radio';
const ipType = {
default: 'ipv4',

12
src/nginxconfig/templates/global_sections/logging.vue
View File

@@ -71,7 +71,6 @@ THE SOFTWARE.
<div :class="`control${logNotFoundChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="logNotFound" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.logging.enableFileNotFoundErrorLogging') }} error_log
</PrettyCheck>
</div>
@@ -89,7 +88,6 @@ THE SOFTWARE.
<div v-if="cloudflareEnabled" :class="`control${cloudflareChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="cloudflare" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.logging.enableCloudflare') }}
</PrettyCheck>
</div>
@@ -97,7 +95,6 @@ THE SOFTWARE.
<div v-if="cfRayEnabled" :class="`control${cfRayChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="cfRay" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.logging.cfRay') }}
</PrettyCheck>
</div>
@@ -105,7 +102,6 @@ THE SOFTWARE.
<div v-if="cfConnectingIpEnabled" :class="`control${cfConnectingIpChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="cfConnectingIp" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.logging.cfConnectingIp') }}
</PrettyCheck>
</div>
@@ -113,7 +109,6 @@ THE SOFTWARE.
<div v-if="xForwardedForEnabled" :class="`control${xForwardedForChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="xForwardedFor" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.logging.xForwardedFor') }}
</PrettyCheck>
</div>
@@ -121,7 +116,6 @@ THE SOFTWARE.
<div v-if="xForwardedProtoEnabled" :class="`control${xForwardedProtoChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="xForwardedProto" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.logging.xForwardedProto') }}
</PrettyCheck>
</div>
@@ -129,7 +123,6 @@ THE SOFTWARE.
<div v-if="trueClientIpEnabled" :class="`control${trueClientIpChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="trueClientIp" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.logging.trueClientIp') }}
</PrettyCheck>
</div>
@@ -137,7 +130,6 @@ THE SOFTWARE.
<div v-if="cfIpCountryEnabled" :class="`control${cfIpCountryChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="cfIpCountry" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.logging.cfIpCountry') }}
</PrettyCheck>
</div>
@@ -145,7 +137,6 @@ THE SOFTWARE.
<div v-if="cfVisitorEnabled" :class="`control${cfVisitorChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="cfVisitor" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.logging.cfVisitor') }}
</PrettyCheck>
</div>
@@ -153,7 +144,6 @@ THE SOFTWARE.
<div v-if="cdnLoopEnabled" :class="`control${cdnLoopChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="cdnLoop" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.logging.cdnLoop') }}
</PrettyCheck>
</div>
@@ -165,9 +155,9 @@ THE SOFTWARE.
</template>
<script>
import PrettyCheck from 'pretty-checkbox-vue/check';
import delegatedFromDefaults from '../../util/delegated_from_defaults';
import computedFromDefaults from '../../util/computed_from_defaults';
import PrettyCheck from '../inputs/checkbox';
const defaults = {
accessLog: {

4
src/nginxconfig/templates/global_sections/performance.vue
View File

@@ -35,7 +35,6 @@ THE SOFTWARE.
<div :class="`control${gzipCompressionChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="gzipCompression" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.performance.enableGzipCompression') }}
</PrettyCheck>
</div>
@@ -53,7 +52,6 @@ THE SOFTWARE.
<div :class="`control${brotliCompressionChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="brotliCompression" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.performance.enableBrotliCompression') }}
</PrettyCheck>
</div>
@@ -150,10 +148,10 @@ THE SOFTWARE.
</template>
<script>
import PrettyCheck from 'pretty-checkbox-vue/check';
import ExternalLink from 'do-vue/src/templates/external_link';
import delegatedFromDefaults from '../../util/delegated_from_defaults';
import computedFromDefaults from '../../util/computed_from_defaults';
import PrettyCheck from '../inputs/checkbox';
const defaults = {
gzipCompression: {

3
src/nginxconfig/templates/global_sections/reverse_proxy.vue
View File

@@ -130,7 +130,6 @@ THE SOFTWARE.
>
<div class="radio">
<PrettyRadio v-model="proxyCoexistenceXForwarded" :value="value" class="p-default p-round p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t(name) }}
</PrettyRadio>
</div>
@@ -144,9 +143,9 @@ THE SOFTWARE.
</template>
<script>
import PrettyRadio from 'pretty-checkbox-vue/radio';
import delegatedFromDefaults from '../../util/delegated_from_defaults';
import computedFromDefaults from '../../util/computed_from_defaults';
import PrettyRadio from '../inputs/radio';
const defaults = {
proxyConnectTimeout: {

5
src/nginxconfig/templates/global_sections/security.vue
View File

@@ -96,7 +96,6 @@ THE SOFTWARE.
<div :class="`control${serverTokensChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="serverTokens" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('common.enable') }}
</PrettyCheck>
</div>
@@ -114,7 +113,6 @@ THE SOFTWARE.
<div :class="`control${limitReqChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="limitReq" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('common.enable') }}
</PrettyCheck>
</div>
@@ -132,7 +130,6 @@ THE SOFTWARE.
<div :class="`control${securityTxt ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="securityTxt" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('common.enable') }}
</PrettyCheck>
</div>
@@ -162,10 +159,10 @@ THE SOFTWARE.
</template>
<script>
import PrettyCheck from 'pretty-checkbox-vue/check';
import VueSelect from 'vue-select';
import delegatedFromDefaults from '../../util/delegated_from_defaults';
import computedFromDefaults from '../../util/computed_from_defaults';
import PrettyCheck from '../inputs/checkbox';
const defaults = {
referrerPolicy: {

4
src/nginxconfig/templates/global_sections/tools.vue
View File

@@ -35,7 +35,6 @@ THE SOFTWARE.
<div :class="`control${modularizedStructureChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="modularizedStructure" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.tools.enableModularizedConfigFiles') }}
</PrettyCheck>
</div>
@@ -53,7 +52,6 @@ THE SOFTWARE.
<div :class="`control${symlinkVhostChanged ? ' is-changed' : ''}`">
<div class="checkbox">
<PrettyCheck v-model="symlinkVhost" class="p-default p-curve p-fill p-icon">
<i slot="extra" class="icon fas fa-check"></i>
{{ $t('templates.globalSections.tools.enableSymLinksFrom') }} sites-available/
{{ $t('templates.globalSections.tools.to') }} sites-enabled/
</PrettyCheck>
@@ -146,12 +144,12 @@ THE SOFTWARE.
</template>
<script>
import PrettyCheck from 'pretty-checkbox-vue/check';
import Modal from 'do-vue/src/templates/modal';
import delegatedFromDefaults from '../../util/delegated_from_defaults';
import computedFromDefaults from '../../util/computed_from_defaults';
import shareQuery from '../../util/share_query';
import analytics from '../../util/analytics';
import PrettyCheck from '../inputs/checkbox';
const defaults = {
modularizedStructure: {