Add global performance section
MattIPv4
parent
b0d0df91c5
commit
306f057ebc
|
|
@ -2,3 +2,4 @@ export { default as HTTPS } from './https';
|
||||||
export { default as Security } from './security';
|
export { default as Security } from './security';
|
||||||
export { default as PHP } from './php';
|
export { default as PHP } from './php';
|
||||||
export { default as Python } from './python';
|
export { default as Python } from './python';
|
||||||
|
export { default as Performance } from './performance';
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,160 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="field is-horizontal">
|
||||||
|
<div class="field-label">
|
||||||
|
<label class="label">Gzip compression</label>
|
||||||
|
</div>
|
||||||
|
<div class="field-body">
|
||||||
|
<div class="field">
|
||||||
|
<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>
|
||||||
|
enable gzip compression
|
||||||
|
</PrettyCheck>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field is-horizontal">
|
||||||
|
<div class="field-label">
|
||||||
|
<label class="label">Brotli compression</label>
|
||||||
|
</div>
|
||||||
|
<div class="field-body">
|
||||||
|
<div class="field">
|
||||||
|
<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>
|
||||||
|
enable brotli compression
|
||||||
|
</PrettyCheck>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field is-horizontal">
|
||||||
|
<div class="field-label">
|
||||||
|
<label class="label">Expiration for assets</label>
|
||||||
|
</div>
|
||||||
|
<div class="field-body">
|
||||||
|
<div class="field">
|
||||||
|
<div :class="`control${assetsExpirationChanged ? ' is-changed' : ''}`">
|
||||||
|
<input v-model="assetsExpiration"
|
||||||
|
class="input"
|
||||||
|
type="text"
|
||||||
|
:placeholder="$props.data.assetsExpiration.default"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field is-horizontal">
|
||||||
|
<div class="field-label">
|
||||||
|
<label class="label">Expiration for media</label>
|
||||||
|
</div>
|
||||||
|
<div class="field-body">
|
||||||
|
<div class="field">
|
||||||
|
<div :class="`control${mediaExpirationChanged ? ' is-changed' : ''}`">
|
||||||
|
<input v-model="mediaExpiration"
|
||||||
|
class="input"
|
||||||
|
type="text"
|
||||||
|
:placeholder="$props.data.mediaExpiration.default"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field is-horizontal">
|
||||||
|
<div class="field-label">
|
||||||
|
<label class="label">Expiration for SVGs</label>
|
||||||
|
</div>
|
||||||
|
<div class="field-body">
|
||||||
|
<div class="field">
|
||||||
|
<div :class="`control${svgExpirationChanged ? ' is-changed' : ''}`">
|
||||||
|
<input v-model="svgExpiration"
|
||||||
|
class="input"
|
||||||
|
type="text"
|
||||||
|
:placeholder="$props.data.svgExpiration.default"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field is-horizontal">
|
||||||
|
<div class="field-label">
|
||||||
|
<label class="label">Expiration for fonts</label>
|
||||||
|
</div>
|
||||||
|
<div class="field-body">
|
||||||
|
<div class="field">
|
||||||
|
<div :class="`control${fontsExpirationChanged ? ' is-changed' : ''}`">
|
||||||
|
<input v-model="fontsExpiration"
|
||||||
|
class="input"
|
||||||
|
type="text"
|
||||||
|
:placeholder="$props.data.fontsExpiration.default"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import PrettyCheck from 'pretty-checkbox-vue/check';
|
||||||
|
import i18n from '../../i18n';
|
||||||
|
import delegatedFromDefaults from '../../util/delegated_from_defaults';
|
||||||
|
import computedFromDefaults from '../../util/computed_from_defaults';
|
||||||
|
|
||||||
|
const defaults = {
|
||||||
|
gzipCompression: {
|
||||||
|
default: true,
|
||||||
|
enabled: true,
|
||||||
|
},
|
||||||
|
brotliCompression: {
|
||||||
|
default: false,
|
||||||
|
enabled: true,
|
||||||
|
},
|
||||||
|
assetsExpiration: {
|
||||||
|
default: '7d',
|
||||||
|
enabled: true,
|
||||||
|
},
|
||||||
|
mediaExpiration: {
|
||||||
|
default: '7d',
|
||||||
|
enabled: true,
|
||||||
|
},
|
||||||
|
svgExpiration: {
|
||||||
|
default: '7d',
|
||||||
|
enabled: true,
|
||||||
|
},
|
||||||
|
fontsExpiration: {
|
||||||
|
default: '7d',
|
||||||
|
enabled: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'GlobalPerformance', // Component name
|
||||||
|
display: 'Performance', // Display name for tab
|
||||||
|
key: 'performance', // Key for data in parent
|
||||||
|
delegated: delegatedFromDefaults(defaults), // Data the parent will present here
|
||||||
|
components: {
|
||||||
|
PrettyCheck,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
data: Object, // Data delegated back to us from parent
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
i18n,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: computedFromDefaults(defaults, 'performance'), // Getters & setters for the delegated data
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue