Add missing accessControlAllowOrigin list to middleware view

Headers middleware doesn't support `accessControlAllowOrigin` option
anymore, it should print a list of values from
`accessControlAllowOriginList`.

<template>
  <q-card flat bordered v-bind:class="['panel-middleware-details', {'panel-middleware-details-dense':isDense}]">
    <q-scroll-area v-if="data && data.length" :thumb-style="appThumbStyle" style="height:100%;">

        <q-card-section v-if="!isDense" class="app-title">

{{ middleware.name }}

        </q-card-section>

        <q-card-section>

Type

              <q-chip
                dense
                class="app-chip app-chip-purple">
                {{ middleware.type }}
              </q-chip>

PROVIDER

                <q-avatar class="provider-logo">
                  <q-icon :name="`img:statics/providers/${middleware.provider}.svg`" />
                </q-avatar>

{{middleware.provider}}

        </q-card-section>
        <q-card-section>

STATUS

                <avatar-state :state="middleware.status | status "/>
                <div v-bind:class="['block-right-text-label', `block-right-text-label-${middleware.status}`]">{{middleware.status | statusLabel}}

        </q-card-section>

        <q-card-section v-if="middleware.error">

ERRORS

              <q-chip
                v-for="(errorMsg, index) in middleware.error" :key="index"
                class="app-chip app-chip-error">
                {{ errorMsg }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.addPrefix">

PREFIX

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).prefix }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="exData(middleware).users">

USERS

              <q-chip
                v-for="(user, key) in exData(middleware).users" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ user }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="exData(middleware).usersFile">

Users File

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).usersFile }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="exData(middleware).realm">

Realm

              <q-chip
                dense
                class="app-chip app-chip-warning">
                {{ exData(middleware).realm }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.basicAuth || middleware.digestAuth">

Remove Header

              <boolean-state :value="exData(middleware).removeHeader"/>

        </q-card-section>

        <q-card-section v-if="exData(middleware).headerField">

Header Field

              <q-chip
                dense
                class="app-chip app-chip-warning">
                {{ exData(middleware).headerField }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.chain">

Chain

              <q-chip
                v-for="(mi, key) in exData(middleware).middlewares" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ mi }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="exData(middleware).maxRequestBodyBytes || exData(middleware).memRequestBodyBytes">

Max Request Body Bytes

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).maxRequestBodyBytes }}
              </q-chip>

Mem Request Body Bytes

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).memRequestBodyBytes }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="exData(middleware).maxResponseBodyBytes || exData(middleware).memResponseBodyBytes">

Max Response Body Bytes

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).maxResponseBodyBytes }}
              </q-chip>

Mem Response Body Bytes

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).memResponseBodyBytes }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="exData(middleware).retryExpression">

Retry Expression

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).retryExpression }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.circuitBreaker">

Expression

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).expression }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.compress">

Compress

              <boolean-state :value="!!middleware.compress"/>

        </q-card-section>

        <q-card-section v-if="middleware.errors">

Service

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).service }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.errors">

Query

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).query }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.errors">

Status

              <q-chip
                v-for="(st, key) in exData(middleware).status" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ st }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.forwardAuth">

Address

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).address }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.forwardAuth">

TLS

              <boolean-state :value="!!exData(middleware).tls"/>

Trust Forward Headers

              <boolean-state :value="exData(middleware).trustForwardHeader"/>

        </q-card-section>

        <q-card-section v-if="middleware.forwardAuth">

Auth Response Headers

              <q-chip
                v-for="(respHeader, key) in exData(middleware).authResponseHeaders" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ respHeader }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Custom Request Headers

              <q-chip
                v-for="(val, key) in exData(middleware).customRequestHeaders" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ val }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Custom Response Headers

              <q-chip
                v-for="(val, key) in exData(middleware).customResponseHeaders" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ val }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Access Control Allow Credentials

              <boolean-state :value="!!exData(middleware).accessControlAllowCredentials"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Access Control Allow Headers

              <q-chip
                v-for="(val, key) in exData(middleware).accessControlAllowHeaders" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ val }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Access Control Allow Methods

              <q-chip
                v-for="(val, key) in exData(middleware).accessControlAllowMethods" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ val }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Access Control Allow Origin

              <q-chip
                v-for="(val, key) in exData(middleware).accessControlAllowOriginList" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ val }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Access Control Expose Headers

              <q-chip
                v-for="(val, key) in exData(middleware).accessControlExposeHeaders" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ val }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Access Control Max Age

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).accessControlMaxAge }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Add Vary Header

              <boolean-state :value="!!exData(middleware).addVaryHeader"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Allowed Hosts

              <q-chip
                v-for="(val, key) in exData(middleware).allowedHosts" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ val }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Hosts Proxy Headers

              <q-chip
                v-for="(val, key) in exData(middleware).hostsProxyHeaders" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ val }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

SSL Redirect

              <boolean-state :value="!!exData(middleware).sslRedirect"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

SSL Temporary Redirect

              <boolean-state :value="!!exData(middleware).sslTemporaryRedirect"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

SSL Host

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).sslHost }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

SSL Proxy Headers

              <q-chip
                v-for="(val, key) in exData(middleware).sslProxyHeaders" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ val }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

SSL Force Host

              <boolean-state :value="!!exData(middleware).sslForceHost"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

STS Seconds

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).stsSeconds }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

STS Include Subdomains

              <boolean-state :value="!!exData(middleware).stsIncludeSubdomains"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

STS Preload

              <boolean-state :value="!!exData(middleware).stsPreload"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Force STS Header

              <boolean-state :value="!!exData(middleware).forceSTSHeader"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Frame Deny

              <boolean-state :value="!!exData(middleware).frameDeny"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Custom Frame Options Value

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).customFrameOptionsValue }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Content Type Nosniff

              <boolean-state :value="!!exData(middleware).contentTypeNosniff"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Browser XSS Filter

              <boolean-state :value="!!exData(middleware).browserXssFilter"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Custom Browser XSS Value

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).customBrowserXSSValue }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Content Security Policy

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).contentSecurityPolicy }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Public Key

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).publicKey }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Referrer Policy

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).referrerPolicy }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Feature Policy

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).featurePolicy }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Is Development

              <boolean-state :value="!!exData(middleware).isDevelopment"/>

        </q-card-section>

        <q-card-section v-if="middleware.ipWhiteList">

Source Range

              <q-chip
                v-for="(range, key) in exData(middleware).sourceRange" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ range }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.ipWhiteList">

IP Strategy

              <q-chip
                dense
                class="app-chip app-chip-accent">Depth :</q-chip>
              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).ipStrategy.depth }}
              </q-chip>

                <q-chip
                  dense
                  class="app-chip app-chip-accent">
                  Excluded IPs:
                </q-chip>
                <q-chip
                  v-for="(excludedIPs, key) in exData(middleware).ipStrategy.excludedIPs" :key="key"
                  dense
                  class="app-chip app-chip-green">
                  {{ excludedIPs }}
                </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.rateLimit">

Average

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).average }}
              </q-chip>

Burst

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).burst }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="exData(middleware).amount">

AMOUNT

              <q-chip
                dense
                class="app-chip app-chip-warning">
                {{ exData(middleware).amount }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="exData(middleware).sourceCriterion && exData(middleware).sourceCriterion.ipStrategy">

IP STRATEGY

              <q-chip
                dense
                class="app-chip app-chip-accent">Depth :</q-chip>
              <q-chip
                dense
                class="app-chip app-chip-green">
               {{ exData(middleware).sourceCriterion.ipStrategy.depth }}
              </q-chip>

                <q-chip
                  dense
                  class="app-chip app-chip-accent">
                  Excluded IPs:
                </q-chip>
                <q-chip
                  v-for="(excludedIPs, key) in exData(middleware).sourceCriterion.ipStrategy.excludedIPs" :key="key"
                  dense
                  class="app-chip app-chip-green">
                  {{ excludedIPs }}
                </q-chip>

        </q-card-section>

        <q-card-section v-if="exData(middleware) && exData(middleware).sourceCriterion">

REQUEST HEADER NAME

              <q-chip
                dense
                class="app-chip app-chip-warning">
                {{ exData(middleware).sourceCriterion.requestHeaderName }}
              </q-chip>

REQUEST HOST

              <boolean-state :value="exData(middleware).sourceCriterion.requestHost"/>

        </q-card-section>

        <q-card-section v-if="middleware.passTLSClientCert">

PEM

              <boolean-state :value="!!exData(middleware).pem"/>

        </q-card-section>

        <q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info">

Info:

Not After

              <boolean-state :value="!!exData(middleware).info.notAfter"/>

Not Before

              <boolean-state :value="!!exData(middleware).info.notBefore"/>

Sans

              <boolean-state :value="!!exData(middleware).info.sans"/>

        </q-card-section>

        <q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.subject">

Info Subject:

country

              <boolean-state :value="!!exData(middleware).info.subject.country"/>

Province

              <boolean-state :value="!!exData(middleware).info.subject.province"/>

        </q-card-section>
        <q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.subject">

Locality

              <boolean-state :value="!!exData(middleware).info.subject.locality"/>

Organization

              <boolean-state :value="!!exData(middleware).info.subject.organization"/>

        </q-card-section>
        <q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.subject">

Common Name

              <boolean-state :value="!!exData(middleware).info.subject.commonName"/>

Serial Number

              <boolean-state :value="!!exData(middleware).info.subject.serialNumber"/>

        </q-card-section>
        <q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.subject">

Domain Component

              <boolean-state :value="!!exData(middleware).info.subject.domainComponent"/>

        </q-card-section>

        <q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.issuer">

Info Issuer:

country

              <boolean-state :value="!!exData(middleware).info.issuer.country"/>

Province

              <boolean-state :value="!!exData(middleware).info.issuer.province"/>

        </q-card-section>
        <q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.issuer">

Locality

              <boolean-state :value="!!exData(middleware).info.issuer.locality"/>

Organization

              <boolean-state :value="!!exData(middleware).info.issuer.organization"/>

        </q-card-section>
        <q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.issuer">

Common Name

              <boolean-state :value="!!exData(middleware).info.issuer.commonName"/>

Serial Number

              <boolean-state :value="!!exData(middleware).info.issuer.serialNumber"/>

        </q-card-section>
        <q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.issuer">

Domain Component

              <boolean-state :value="!!exData(middleware).info.issuer.domainComponent"/>

        </q-card-section>

        <q-card-section v-if="middleware.redirectRegex">

Regex

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).regex }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.redirectRegex">

Replacement

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).replacement }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.redirectRegex">

Permanent

              <boolean-state :value="!!exData(middleware).permanent"/>

        </q-card-section>

        <q-card-section v-if="middleware.redirectScheme">

Scheme

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).scheme }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.replacePath">

Path

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).path }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.replacePathRegex">

Regex

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).regex }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.replacePathRegex">

Replacement

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).replacement }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.retry">

Attempts

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).attempts }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.stripPrefix">

Prefixes

              <q-chip
                v-for="(prefix, key) in exData(middleware).prefixes" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ prefix }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.stripPrefixRegex">

Regex

              <q-chip
                v-for="(exp, key) in exData(middleware).regex" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ exp }}
              </q-chip>

        </q-card-section>

        <q-separator v-if="(index+1) < data.length" inset />

    </q-scroll-area>
    <q-card-section v-else style="height: 100%">

There are no
Middlewares configured

    </q-card-section>
  </q-card>
</template>

<template>
  <q-card flat bordered v-bind:class="['panel-middleware-details', {'panel-middleware-details-dense':isDense}]">
    <q-scroll-area v-if="data && data.length" :thumb-style="appThumbStyle" style="height:100%;">

        <q-card-section v-if="!isDense" class="app-title">

{{ middleware.name }}

        </q-card-section>

        <q-card-section>

Type

              <q-chip
                dense
                class="app-chip app-chip-purple">
                {{ middleware.type }}
              </q-chip>

PROVIDER

                <q-avatar class="provider-logo">
                  <q-icon :name="`img:statics/providers/${middleware.provider}.svg`" />
                </q-avatar>

{{middleware.provider}}

        </q-card-section>
        <q-card-section>

STATUS

                <avatar-state :state="middleware.status | status "/>
                <div v-bind:class="['block-right-text-label', `block-right-text-label-${middleware.status}`]">{{middleware.status | statusLabel}}

        </q-card-section>

        <q-card-section v-if="middleware.error">

ERRORS

              <q-chip
                v-for="(errorMsg, index) in middleware.error" :key="index"
                class="app-chip app-chip-error">
                {{ errorMsg }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.addPrefix">

PREFIX

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).prefix }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="exData(middleware).users">

USERS

              <q-chip
                v-for="(user, key) in exData(middleware).users" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ user }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="exData(middleware).usersFile">

Users File

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).usersFile }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="exData(middleware).realm">

Realm

              <q-chip
                dense
                class="app-chip app-chip-warning">
                {{ exData(middleware).realm }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.basicAuth || middleware.digestAuth">

Remove Header

              <boolean-state :value="exData(middleware).removeHeader"/>

        </q-card-section>

        <q-card-section v-if="exData(middleware).headerField">

Header Field

              <q-chip
                dense
                class="app-chip app-chip-warning">
                {{ exData(middleware).headerField }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.chain">

Chain

              <q-chip
                v-for="(mi, key) in exData(middleware).middlewares" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ mi }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="exData(middleware).maxRequestBodyBytes || exData(middleware).memRequestBodyBytes">

Max Request Body Bytes

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).maxRequestBodyBytes }}
              </q-chip>

Mem Request Body Bytes

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).memRequestBodyBytes }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="exData(middleware).maxResponseBodyBytes || exData(middleware).memResponseBodyBytes">

Max Response Body Bytes

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).maxResponseBodyBytes }}
              </q-chip>

Mem Response Body Bytes

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).memResponseBodyBytes }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="exData(middleware).retryExpression">

Retry Expression

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).retryExpression }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.circuitBreaker">

Expression

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).expression }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.compress">

Compress

              <boolean-state :value="!!middleware.compress"/>

        </q-card-section>

        <q-card-section v-if="middleware.errors">

Service

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).service }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.errors">

Query

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).query }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.errors">

Status

              <q-chip
                v-for="(st, key) in exData(middleware).status" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ st }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.forwardAuth">

Address

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).address }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.forwardAuth">

TLS

              <boolean-state :value="!!exData(middleware).tls"/>

Trust Forward Headers

              <boolean-state :value="exData(middleware).trustForwardHeader"/>

        </q-card-section>

        <q-card-section v-if="middleware.forwardAuth">

Auth Response Headers

              <q-chip
                v-for="(respHeader, key) in exData(middleware).authResponseHeaders" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ respHeader }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Custom Request Headers

              <q-chip
                v-for="(val, key) in exData(middleware).customRequestHeaders" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ val }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Custom Response Headers

              <q-chip
                v-for="(val, key) in exData(middleware).customResponseHeaders" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ val }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Access Control Allow Credentials

              <boolean-state :value="!!exData(middleware).accessControlAllowCredentials"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Access Control Allow Headers

              <q-chip
                v-for="(val, key) in exData(middleware).accessControlAllowHeaders" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ val }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Access Control Allow Methods

              <q-chip
                v-for="(val, key) in exData(middleware).accessControlAllowMethods" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ val }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Access Control Allow Origin

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).accessControlAllowOrigin }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Access Control Expose Headers

              <q-chip
                v-for="(val, key) in exData(middleware).accessControlExposeHeaders" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ val }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Access Control Max Age

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).accessControlMaxAge }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Add Vary Header

              <boolean-state :value="!!exData(middleware).addVaryHeader"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Allowed Hosts

              <q-chip
                v-for="(val, key) in exData(middleware).allowedHosts" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ val }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Hosts Proxy Headers

              <q-chip
                v-for="(val, key) in exData(middleware).hostsProxyHeaders" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ val }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

SSL Redirect

              <boolean-state :value="!!exData(middleware).sslRedirect"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

SSL Temporary Redirect

              <boolean-state :value="!!exData(middleware).sslTemporaryRedirect"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

SSL Host

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).sslHost }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

SSL Proxy Headers

              <q-chip
                v-for="(val, key) in exData(middleware).sslProxyHeaders" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ val }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

SSL Force Host

              <boolean-state :value="!!exData(middleware).sslForceHost"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

STS Seconds

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).stsSeconds }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

STS Include Subdomains

              <boolean-state :value="!!exData(middleware).stsIncludeSubdomains"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

STS Preload

              <boolean-state :value="!!exData(middleware).stsPreload"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Force STS Header

              <boolean-state :value="!!exData(middleware).forceSTSHeader"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Frame Deny

              <boolean-state :value="!!exData(middleware).frameDeny"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Custom Frame Options Value

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).customFrameOptionsValue }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Content Type Nosniff

              <boolean-state :value="!!exData(middleware).contentTypeNosniff"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Browser XSS Filter

              <boolean-state :value="!!exData(middleware).browserXssFilter"/>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Custom Browser XSS Value

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).customBrowserXSSValue }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Content Security Policy

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).contentSecurityPolicy }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Public Key

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).publicKey }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Referrer Policy

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).referrerPolicy }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Feature Policy

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).featurePolicy }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.headers">

Is Development

              <boolean-state :value="!!exData(middleware).isDevelopment"/>

        </q-card-section>

        <q-card-section v-if="middleware.ipWhiteList">

Source Range

              <q-chip
                v-for="(range, key) in exData(middleware).sourceRange" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ range }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.ipWhiteList">

IP Strategy

              <q-chip
                dense
                class="app-chip app-chip-accent">Depth :</q-chip>
              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).ipStrategy.depth }}
              </q-chip>

                <q-chip
                  dense
                  class="app-chip app-chip-accent">
                  Excluded IPs:
                </q-chip>
                <q-chip
                  v-for="(excludedIPs, key) in exData(middleware).ipStrategy.excludedIPs" :key="key"
                  dense
                  class="app-chip app-chip-green">
                  {{ excludedIPs }}
                </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.rateLimit">

Average

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).average }}
              </q-chip>

Burst

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).burst }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="exData(middleware).amount">

AMOUNT

              <q-chip
                dense
                class="app-chip app-chip-warning">
                {{ exData(middleware).amount }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="exData(middleware).sourceCriterion && exData(middleware).sourceCriterion.ipStrategy">

IP STRATEGY

              <q-chip
                dense
                class="app-chip app-chip-accent">Depth :</q-chip>
              <q-chip
                dense
                class="app-chip app-chip-green">
               {{ exData(middleware).sourceCriterion.ipStrategy.depth }}
              </q-chip>

                <q-chip
                  dense
                  class="app-chip app-chip-accent">
                  Excluded IPs:
                </q-chip>
                <q-chip
                  v-for="(excludedIPs, key) in exData(middleware).sourceCriterion.ipStrategy.excludedIPs" :key="key"
                  dense
                  class="app-chip app-chip-green">
                  {{ excludedIPs }}
                </q-chip>

        </q-card-section>

        <q-card-section v-if="exData(middleware) && exData(middleware).sourceCriterion">

REQUEST HEADER NAME

              <q-chip
                dense
                class="app-chip app-chip-warning">
                {{ exData(middleware).sourceCriterion.requestHeaderName }}
              </q-chip>

REQUEST HOST

              <boolean-state :value="exData(middleware).sourceCriterion.requestHost"/>

        </q-card-section>

        <q-card-section v-if="middleware.passTLSClientCert">

PEM

              <boolean-state :value="!!exData(middleware).pem"/>

        </q-card-section>

        <q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info">

Info:

Not After

              <boolean-state :value="!!exData(middleware).info.notAfter"/>

Not Before

              <boolean-state :value="!!exData(middleware).info.notBefore"/>

Sans

              <boolean-state :value="!!exData(middleware).info.sans"/>

        </q-card-section>

        <q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.subject">

Info Subject:

country

              <boolean-state :value="!!exData(middleware).info.subject.country"/>

Province

              <boolean-state :value="!!exData(middleware).info.subject.province"/>

        </q-card-section>
        <q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.subject">

Locality

              <boolean-state :value="!!exData(middleware).info.subject.locality"/>

Organization

              <boolean-state :value="!!exData(middleware).info.subject.organization"/>

        </q-card-section>
        <q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.subject">

Common Name

              <boolean-state :value="!!exData(middleware).info.subject.commonName"/>

Serial Number

              <boolean-state :value="!!exData(middleware).info.subject.serialNumber"/>

        </q-card-section>
        <q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.subject">

Domain Component

              <boolean-state :value="!!exData(middleware).info.subject.domainComponent"/>

        </q-card-section>

        <q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.issuer">

Info Issuer:

country

              <boolean-state :value="!!exData(middleware).info.issuer.country"/>

Province

              <boolean-state :value="!!exData(middleware).info.issuer.province"/>

        </q-card-section>
        <q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.issuer">

Locality

              <boolean-state :value="!!exData(middleware).info.issuer.locality"/>

Organization

              <boolean-state :value="!!exData(middleware).info.issuer.organization"/>

        </q-card-section>
        <q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.issuer">

Common Name

              <boolean-state :value="!!exData(middleware).info.issuer.commonName"/>

Serial Number

              <boolean-state :value="!!exData(middleware).info.issuer.serialNumber"/>

        </q-card-section>
        <q-card-section v-if="middleware.passTLSClientCert && middleware.passTLSClientCert.info && middleware.passTLSClientCert.info.issuer">

Domain Component

              <boolean-state :value="!!exData(middleware).info.issuer.domainComponent"/>

        </q-card-section>

        <q-card-section v-if="middleware.redirectRegex">

Regex

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).regex }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.redirectRegex">

Replacement

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).replacement }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.redirectRegex">

Permanent

              <boolean-state :value="!!exData(middleware).permanent"/>

        </q-card-section>

        <q-card-section v-if="middleware.redirectScheme">

Scheme

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).scheme }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.replacePath">

Path

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).path }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.replacePathRegex">

Regex

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).regex }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.replacePathRegex">

Replacement

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).replacement }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.retry">

Attempts

              <q-chip
                dense
                class="app-chip app-chip-green">
                {{ exData(middleware).attempts }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.stripPrefix">

Prefixes

              <q-chip
                v-for="(prefix, key) in exData(middleware).prefixes" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ prefix }}
              </q-chip>

        </q-card-section>

        <q-card-section v-if="middleware.stripPrefixRegex">

Regex

              <q-chip
                v-for="(exp, key) in exData(middleware).regex" :key="key"
                dense
                class="app-chip app-chip-green">
                {{ exp }}
              </q-chip>

        </q-card-section>

        <q-separator v-if="(index+1) < data.length" inset />

    </q-scroll-area>
    <q-card-section v-else style="height: 100%">

There are no
Middlewares configured

    </q-card-section>
  </q-card>
</template>


lines 169, 175 day object requests removed from Month component call

<template>

 0,
      vhd__datepicker__fullview: alwaysVisible,
    }"
    :ref="`DatePicker-${hash}`"
    v-if="value"
  >

      +

      <date-input
        :i18n="i18n"
        :input-date="formatDate(checkIn)"
        input-date-type="check-in"
        :is-open="isOpen"
        :toggle-datepicker="toggleDatepicker"
        :single-day-selection="singleDaySelection"
      />

      <date-input
        v-if="!singleDaySelection"
        :i18n="i18n"
        :input-date="formatDate(checkOut)"
        input-date-type="check-out"
        :is-open="isOpen"
        :toggle-datepicker="toggleDatepicker"
        :single-day-selection="singleDaySelection"
      />

            {{ `${checkIn ? dateFormater(checkIn) : i18n['check-in']}` }}

            {{ `${checkOut ? dateFormater(checkOut) : i18n['check-out']}` }}

          <button
            type="button"
            class="vhd__datepicker__month-button vhd__datepicker__month-button--prev"
            @click="renderPreviousMonth"
            @keyup.enter.stop.prevent="renderPreviousMonth"
            :tabindex="isOpen ? 0 : -1"
            :disabled="activeMonthIndex === 0"
          />
          <button
            type="button"
            class="vhd__datepicker__month-button vhd__datepicker__month-button--next"
            @click="renderNextMonth"
            @keyup.enter.stop.prevent="renderNextMonth"
            :disabled="isPreventedMaxMonth"
            :tabindex="isOpen ? 0 : -1"
          />

          <Month
            v-for="(month, monthIndex) in paginateMonths"
            :key="`${datepickerMonthKey}-${monthIndex}-desktop`"
            ref="datepickerMonth"
            :month="month"
            :dayKey="datepickerDayKey"
            :weekKey="datepickerWeekKey"
            :isDesktop="isDesktop"
            :firstDayOfWeek="firstDayOfWeek"
            :showYear="showYear"
            :yearBeforeMonth="yearBeforeMonth"
            :activeMonthIndex="activeMonthIndex"
            :bookings="sortBookings"
            :checkIn="checkIn"
            :checkIncheckOutHalfDay="checkIncheckOutHalfDay"
            :checkInPeriod="checkInPeriod"
            :checkOut="checkOut"
            :disableCheckoutOnCheckin="disableCheckoutOnCheckin"
            :duplicateBookingDates="duplicateBookingDates"
            :hoveringDate="hoveringDate"
            :hoveringPeriod="hoveringPeriod"
            :i18n="i18n"
            :isOpen="isOpen"
            :minNightCount="minNightCount"
            :nextDisabledDate="nextDisabledDate"
            :nextPeriodDisableDates="nextPeriodDisableDates"
            :options="dayOptions"
            :priceSymbol="priceSymbol"
            :screenSize="screenSize"
            :showCustomTooltip="showCustomTooltip"
            :showPrice="showPrice"
            :disabledDates="disabledDates"
            :periodDates="periodDates"
            :sortedDisabledDates="sortedDisabledDates"
            :sortedPeriodDates="sortedPeriodDates"
            :tooltipMessage="customTooltipMessage"
            @clear-selection="clearSelection"
            @booking-clicked="handleBookingClicked"
            @day-clicked="handleDayClick"
            @enter-day="enterDay"
            @enter-month="enterMonth"
          />

            <template v-if="customTooltipMessage">
              {{ cleanString(customTooltipMessage) }}
            </template>

            <Month
              v-for="(month, monthIndex) in paginateMonths"
              :key="`${datepickerMonthKey}-${monthIndex}-desktop`"
              ref="datepickerMonth"
              :month="month"
              :dayKey="datepickerDayKey"
              :weekKey="datepickerWeekKey"
              :isDesktop="isDesktop"
              :firstDayOfWeek="firstDayOfWeek"
              :showYear="showYear"
              :yearBeforeMonth="yearBeforeMonth"
              :activeMonthIndex="activeMonthIndex"
              :bookings="sortBookings"
              :checkIn="checkIn"
              :checkIncheckOutHalfDay="checkIncheckOutHalfDay"
              :checkInPeriod="checkInPeriod"
              :checkOut="checkOut"
              :disableCheckoutOnCheckin="disableCheckoutOnCheckin"
              :duplicateBookingDates="duplicateBookingDates"
              :hoveringDate="hoveringDate"
              :hoveringPeriod="hoveringPeriod"
              :i18n="i18n"
              :isOpen="isOpen"
              :minNightCount="minNightCount"
              :nextDisabledDate="nextDisabledDate"
              :nextPeriodDisableDates="nextPeriodDisableDates"
              :options="dayOptions"
              :priceSymbol="priceSymbol"
              :screenSize="screenSize"
              :showCustomTooltip="false"
              :showPrice="showPrice"
              :sortedDisabledDates="sortedDisabledDates"
              :sortedPeriodDates="sortedPeriodDates"
              :tooltipMessage="customTooltipMessage"
              @clear-selection="clearSelection"
              @booking-clicked="handleBookingClicked"
              @day-clicked="handleDayClick"
              @enter-day="enterDay"
              @enter-month="enterMonth"
            />

      <slot name="content" />

</template>

<template>

 0,
      vhd__datepicker__fullview: alwaysVisible,
    }"
    :ref="`DatePicker-${hash}`"
    v-if="value"
  >

      +

      <date-input
        :i18n="i18n"
        :input-date="formatDate(checkIn)"
        input-date-type="check-in"
        :is-open="isOpen"
        :toggle-datepicker="toggleDatepicker"
        :single-day-selection="singleDaySelection"
      />

      <date-input
        v-if="!singleDaySelection"
        :i18n="i18n"
        :input-date="formatDate(checkOut)"
        input-date-type="check-out"
        :is-open="isOpen"
        :toggle-datepicker="toggleDatepicker"
        :single-day-selection="singleDaySelection"
      />

            {{ `${checkIn ? dateFormater(checkIn) : i18n['check-in']}` }}

            {{ `${checkOut ? dateFormater(checkOut) : i18n['check-out']}` }}

          <button
            type="button"
            class="vhd__datepicker__month-button vhd__datepicker__month-button--prev"
            @click="renderPreviousMonth"
            @keyup.enter.stop.prevent="renderPreviousMonth"
            :tabindex="isOpen ? 0 : -1"
            :disabled="activeMonthIndex === 0"
          />
          <button
            type="button"
            class="vhd__datepicker__month-button vhd__datepicker__month-button--next"
            @click="renderNextMonth"
            @keyup.enter.stop.prevent="renderNextMonth"
            :disabled="isPreventedMaxMonth"
            :tabindex="isOpen ? 0 : -1"
          />

          <Month
            v-for="(month, monthIndex) in paginateMonths"
            :key="`${datepickerMonthKey}-${monthIndex}-desktop`"
            ref="datepickerMonth"
            :month="month"
            :dayKey="datepickerDayKey"
            :weekKey="datepickerWeekKey"
            :isDesktop="isDesktop"
            :firstDayOfWeek="firstDayOfWeek"
            :showYear="showYear"
            :yearBeforeMonth="yearBeforeMonth"
            :activeMonthIndex="activeMonthIndex"
            :bookings="sortBookings"
            :checkIn="checkIn"
            :checkIncheckOutHalfDay="checkIncheckOutHalfDay"
            :checkInPeriod="checkInPeriod"
            :checkOut="checkOut"
            :disableCheckoutOnCheckin="disableCheckoutOnCheckin"
            :duplicateBookingDates="duplicateBookingDates"
            :hoveringDate="hoveringDate"
            :hoveringPeriod="hoveringPeriod"
            :i18n="i18n"
            :isOpen="isOpen"
            :minNightCount="minNightCount"
            :nextDisabledDate="nextDisabledDate"
            :nextPeriodDisableDates="nextPeriodDisableDates"
            :options="dayOptions"
            :priceSymbol="priceSymbol"
            :screenSize="screenSize"
            :showCustomTooltip="showCustomTooltip"
            :showPrice="showPrice"
            :disabledDates="disabledDates"
            :periodDates="periodDates"
            :sortedDisabledDates="sortedDisabledDates"
            :sortedPeriodDates="sortedPeriodDates"
            :tooltipMessage="customTooltipMessage"
            @clear-selection="clearSelection"
            @booking-clicked="handleBookingClicked"
            @day-clicked="handleDayClick"
            @enter-day="enterDay"
            @enter-month="enterMonth"
          />

            <template v-if="customTooltipMessage">
              {{ cleanString(customTooltipMessage) }}
            </template>

            <Month
              v-for="(month, monthIndex) in paginateMonths"
              :key="`${datepickerMonthKey}-${monthIndex}-desktop`"
              ref="datepickerMonth"
              :month="month"
              :dayKey="datepickerDayKey"
              :weekKey="datepickerWeekKey"
              :isDesktop="isDesktop"
              :firstDayOfWeek="firstDayOfWeek"
              :showYear="showYear"
              :yearBeforeMonth="yearBeforeMonth"
              :activeMonthIndex="activeMonthIndex"
              :belongsToThisMonth="day.belongsToThisMonth"
              :bookings="sortBookings"
              :checkIn="checkIn"
              :checkIncheckOutHalfDay="checkIncheckOutHalfDay"
              :checkInPeriod="checkInPeriod"
              :checkOut="checkOut"
              :date="day.date"
              :disableCheckoutOnCheckin="disableCheckoutOnCheckin"
              :duplicateBookingDates="duplicateBookingDates"
              :hoveringDate="hoveringDate"
              :hoveringPeriod="hoveringPeriod"
              :i18n="i18n"
              :isOpen="isOpen"
              :minNightCount="minNightCount"
              :nextDisabledDate="nextDisabledDate"
              :nextPeriodDisableDates="nextPeriodDisableDates"
              :options="dayOptions"
              :priceSymbol="priceSymbol"
              :screenSize="screenSize"
              :showCustomTooltip="false"
              :showPrice="showPrice"
              :sortedDisabledDates="sortedDisabledDates"
              :sortedPeriodDates="sortedPeriodDates"
              :tooltipMessage="customTooltipMessage"
              @clear-selection="clearSelection"
              @booking-clicked="handleBookingClicked"
              @day-clicked="handleDayClick"
              @enter-day="enterDay"
              @enter-month="enterMonth"
            />

      <slot name="content" />

</template>


Remove obsolete style

Remove obsolete style

<template>

  <CoreBase
    :immersivePage="true"
    immersivePageIcon="close"
    :immersivePagePrimary="false"
    :immersivePageRoute="toolbarRoute"
    :appBarTitle="$tr('createNewExamLabel')"
    :authorized="userIsAuthorized"
    authorizedRole="adminOrCoach"
    :pageTitle="$tr('createNewExamLabel')"
    :marginBottom="72"
  >

    <KPageContainer>

{{ $tr('createNewExamLabel') }}

      <UiAlert
        v-if="showError && !inSearchMode"
        type="error"
        :dismissible="false"
      >
        {{ selectionIsInvalidText }}
      </UiAlert>

{{ coachString('detailsLabel') }}

      <KGrid>
        <KGridItem :layout12="{ span: 6 }">
          <KTextbox
            ref="title"
            v-model.trim="examTitle"
            :label="coachString('titleLabel')"
            :autofocus="true"
            :maxlength="100"
          />
        </KGridItem>
        <KGridItem :layout12="{ span: 6 }">
          <KGrid>
            <KGridItem
              :layout4="{ span: 2 }"
              :layout8="{ span: 5 }"
              :layout12="{ span: 8 }"
            >
              <KTextbox
                ref="questionsInput"
                v-model.trim.number="numQuestions"
                type="number"
                :min="1"
                :max="maxQs"
                :invalid="Boolean(showError && numQuestIsInvalidText)"
                :invalidText="numQuestIsInvalidText"
                :label="$tr('numQuestions')"
                @blur="numQuestionsBlurred = true"
              />
            </KGridItem>
            <KGridItem
              :layout4="{ span: 2 }"
              :layout8="{ span: 3 }"
              :layout12="{ span: 4 }"
              :style="{ marginTop: '16px' }"
            >
              <UiIconButton
                type="flat"
                aria-hidden="true"
                :disabled="numQuestions === 1"
                @click="numQuestions -= 1"
              >
                <mat-svg name="remove" category="content" />
              </UiIconButton>
              <UiIconButton
                type="flat"
                aria-hidden="true"
                :disabled="numQuestions === maxQs"
                @click="numQuestions += 1"
              >
                <mat-svg name="add" category="content" />
              </UiIconButton>
            </KGridItem>
          </KGrid>
        </KGridItem>
      </KGrid>

{{ $tr('chooseExercises') }}

      <LessonsSearchBox
        class="search-box"
        @searchterm="handleSearchTerm"
      />

      <LessonsSearchFilters
        v-if="inSearchMode"
        v-model="filters"
        :searchTerm="searchTerm"
        :searchResults="searchResults"
      />
      <ResourceSelectionBreadcrumbs
        v-else
        :ancestors="ancestors"
        :channelsLink="channelsLink"
        :topicsLink="topicsLink"
      />

{{ topicTitle }}

{{ topicDescription }}

      <ContentCardList
        :contentList="filteredContentList"
        :showSelectAll="selectAllIsVisible"
        :viewMoreButtonState="viewMoreButtonState"
        :selectAllChecked="selectAllChecked"
        :selectAllIndeterminate="selectAllIndeterminate"
        :contentIsChecked="contentIsSelected"
        :contentIsIndeterminate="contentIsIndeterminate"
        :contentHasCheckbox="contentHasCheckbox"
        :contentCardMessage="selectionMetadata"
        :contentCardLink="contentLink"
        @changeselectall="toggleTopicInWorkingResources"
        @change_content_card="toggleSelected"
        @moreresults="handleMoreResults"
      />

      <BottomAppBar v-if="inSearchMode">
        <KRouterLink
          appearance="raised-button"
          :text="$tr('exitSearchButtonLabel')"
          primary
          :to="toolbarRoute"
        />
      </BottomAppBar>
      <BottomAppBar v-else>
        <KRouterLink
          appearance="flat-button"
          :text="coreString('goBackAction')"
          :to="toolbarRoute"
        />
        <KButton
          :text="coreString('continueAction')"
          primary
          @click="continueProcess"
        />
      </BottomAppBar>

    </KPageContainer>

  </CoreBase>

</template>


docs(MadeWithVuetify): lazy load external network call

remove when `v-img` supports lazy loading

<template>
  <v-card
    v-if="featured.length > 0"
    class="text-xs-center py-4"
    flat
  >
    <v-subtitle-1
      class="title font-weight-regular"
      v-text="$t('Vuetify.Home.madeWithVuetify')"
    />

    <v-container grid-list-xl mb-3>
      <v-layout
        align-center
        fill-height
        justify-center
        wrap
      >
        <v-flex
          v-for="(feature, i) in computedFeatured"
          :key="i"
          xs12
          sm6
          md4
        >
          <v-card
            :href="`${feature.url}?ref=vuetifyjs.com`"
            elevation="24"
            target="_blank"
            rel="noopener"
            @click="$ga.event('home', 'click', 'mwvjs', feature.title)"
          >
            <v-img
              :alt="feature.title"
              :src="feature.image"
              height="300px"
              width="100%"
            />
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>

    <div class="text-xs-center">
      <a
        href="https://madewithvuejs.com?ref=vuetifyjs.com"
        target="_blank"
        rel="noopener"
        @click="$ga.event('home', 'click', ' mwvjs')"
      >
        <v-img
          alt="Powered by madewithvuejs.com"
          contain
          src="https://cdn.vuetifyjs.com/images/home/powered-by-madewithvue-1.svg"
          height="65px"
        />
      </a>
    </div>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      featured: []
    }),

    computed: {
      computedFeatured () {
        return this.featured.slice(0, 6)
      },
      features () {
        return this.$t('Vuetify.Home.features', 'en')
      }
    },

    // TODO: Remove when v-img
    // supports lazy loading
    mounted () {
      window.addEventListener('scroll', this.init, { passive: true })
    },

    beforeDestroy () {
      this.removeListener()
    },

    methods: {
      removeListener () {
        window.removeEventListener('scroll', this.init, { passive: true })
      },
      init () {
        this.removeListener()

        fetch('https://madewithvuejs.com/api/tag/vuetify', {
          method: 'get',
          headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json'
          }
        })
          .then(res => res.json())
          .then(res => {
            this.featured = this.setFeatured(res)
          })
          .catch(err => console.log(err))
      },
      setFeatured (data) {
        if (!data) return []
        const featured = data.data.map(f => {
          f.hover = false
          return f
        })
        return this.shuffle(featured)
      },
      shuffle (array) {
        let currentIndex = array.length
        let temporaryValue
        let randomIndex
        // While there remain elements to shuffle...
        while (currentIndex !== 0) {
          // Pick a remaining element...
          randomIndex = Math.floor(Math.random() * currentIndex)
          currentIndex -= 1
          // And swap it with the current element.
          temporaryValue = array[currentIndex]
          array[currentIndex] = array[randomIndex]
          array[randomIndex] = temporaryValue
        }
        return array
      }
    }
  }
</script>

<template>
  <v-card
    class="text-xs-center py-4"
    flat
  >
    <v-subtitle-1
      class="title font-weight-regular"
      v-text="$t('Vuetify.Home.madeWithVuetify')"
    />

    <v-container grid-list-xl mb-3>
      <v-layout
        align-center
        fill-height
        justify-center
        wrap
      >
        <v-flex
          v-for="(feature, i) in computedFeatured"
          :key="i"
          xs12
          sm6
          md4
        >
          <v-card
            :href="`${feature.url}?ref=vuetifyjs.com`"
            elevation="24"
            target="_blank"
            rel="noopener"
            @click="$ga.event('home', 'click', 'mwvjs', feature.title)"
          >
            <v-img
              :alt="feature.title"
              :src="feature.image"
              height="300px"
              width="100%"
            />
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>

    <div class="text-xs-center">
      <a
        href="https://madewithvuejs.com?ref=vuetifyjs.com"
        target="_blank"
        rel="noopener"
        @click="$ga.event('home', 'click', ' mwvjs')"
      >
        <v-img
          alt="Powered by madewithvuejs.com"
          contain
          src="https://cdn.vuetifyjs.com/images/home/powered-by-madewithvue-1.svg"
          height="65px"
        />
      </a>
    </div>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      featured: []
    }),

    computed: {
      computedFeatured () {
        return this.featured.slice(0, 6)
      },
      features () {
        return this.$t('Vuetify.Home.features', 'en')
      }
    },

    mounted () {
      fetch('https://madewithvuejs.com/api/tag/vuetify', {
        method: 'get',
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Content-Type': 'application/json'
        }
      })
        .then(res => res.json())
        .then(res => {
          this.featured = this.setFeatured(res)
        })
        .catch(err => console.log(err))
    },

    methods: {
      setFeatured (data) {
        if (!data) return []
        const featured = data.data.map(f => {
          f.hover = false
          return f
        })
        return this.shuffle(featured)
      },
      shuffle (array) {
        let currentIndex = array.length
        let temporaryValue
        let randomIndex
        // While there remain elements to shuffle...
        while (currentIndex !== 0) {
          // Pick a remaining element...
          randomIndex = Math.floor(Math.random() * currentIndex)
          currentIndex -= 1
          // And swap it with the current element.
          temporaryValue = array[currentIndex]
          array[currentIndex] = array[randomIndex]
          array[randomIndex] = temporaryValue
        }
        return array
      }
    }
  }
</script>


fix: 修正拖拽结束后不隐藏提示的bug

fix: 修正拖拽结束后不隐藏提示的bug

<template>

      <button type="text" @click="isCreateShow = true">

        网站
      </button>
      <button type="text" @click="isCreateCategoryShow = true">

        分类
      </button>
      <button @click="toggleEditMode">

        管理
      </button>
      <button @click="isSettingShow = true">

        设置
      </button>

      <input
        type="text"
        @keyup.enter="search"
        class="form-control"
        v-model="keywords"
        :placeholder="'通过 ' + store.search.title + ' 来搜索'"
      />
      <button class="search_button" @click="search">搜索</button>

        <draggable
          v-model="store.categories"
          :animation="250"
          handle=".tab"
          class="tabs"
          :disabled="isDraggableDisabled"
          @end="moveCategory"
        >
          <template #item="{ element, index }">

{{ store.links[element].title }}

          </template>
        </draggable>

      <draggable
        v-model="store.links[curTabKey].list"
        :itemKey="generateRandomKey"
        :animation="250"
        handle=".speeddial"
        :disabled="isDraggableDisabled"
        class="SpeedDialBox"
        @end="moveItem"
      >
        <template #item="{ element, index }">

                  <Icon :name="element.name" :url="element.url"></Icon>
                  {{ element.name }}

{{ element.url }}

        </template>
      </draggable>

    <CreateBox v-show="isCreateShow" :onShow="handleShowCreateBox" :onClose="handleHideCreateBox"></CreateBox>
    <CreateCategory
      v-show="isCreateCategoryShow"
      :onShow="handleShowCreateCategory"
      :onClose="handleHideCreateCategory"
    ></CreateCategory>
    <SettingBox v-show="isSettingShow" :onShow="handleShowSettings" :onClose="handleHideSettings"></SettingBox>

</template>


Update app/components/meetings/sessions/session-list.vue

Co-authored-by: Stephane Bilodeau <12d20c5bfe847815aa4001679583b57b734bfe4e@users.noreply.github.com>

<template >

Meeting Sessions

          {{normalizedSymbol}}

          #
          Date
          Title

          {{ sessionNumber(index) }}
          {{ date | dateTimeFilter('cccc, d MMMM yyyy - T') }}
          {{title}}

</template>


Begin support for event/slash command registration

<template>
    <pre>
    /*
    {{ license }}
    */

    {{ pluginBody }}
    </pre>
</template>

<script lang="ts">
    import * as _ from 'lodash';
    import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
    import {IPlugin} from '../lib/IPlugin';
    import {CPPClass} from "../alyssa/CPPClass";
    import {CPPHelper} from '../alyssa/CPPHelper';
    import {CPPFunction} from "../alyssa/CPPFunction";
    import {CPPVariable} from '../alyssa/CPPVariable';
    import {CPPVisibility} from '../alyssa/CPPVisibility';
    import {CPPFormatter} from "../alyssa/CPPFormatter";
    import {CPPWritableObject} from "../alyssa/CPPWritableObject";

    @Component({
        name: 'plugin-generator'
    })
    export default class PluginGenerator extends Vue {
        pluginBuilder: CPPClass;

        @Prop()
        pluginDefinition: IPlugin;

        created() {
            this.pluginBuilder = new CPPClass(this.className);
        }

        get className() {
            if (this.pluginDefinition.name.trim().length === 0) {
                return 'SAMPLE_PLUGIN';
            }

            let literalNumbers = ['Zero', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine'];
            let pluginClassName = this.pluginDefinition.name.replace(/[^A-Za-z0-9_]/g, '');

            let tryParse = parseInt(pluginClassName.charAt(0));

            if (!isNaN(tryParse)) {
                pluginClassName = literalNumbers[tryParse] + pluginClassName.substring(1);
            }

            return pluginClassName;
        }

        get pluginBody() {
            let formatter = new CPPFormatter({
                indentWithSpaces: true,
                indentSpaceCount: 4,
            });

            return this.pluginBuilder.write(formatter, 0);
        }

        get license() {
            let currentYear = new Date().getFullYear().toString();

            if (this.pluginDefinition.license === null) {
                return `Copyright (C) ${currentYear} ${this.pluginDefinition.author}\nAll rights reserved.`;
            }

            return this.pluginDefinition.license.body
                .replace('{year}', currentYear)
                .replace('{author}', this.pluginDefinition.author)
                .replace('{name}', this.pluginDefinition.name)
            ;
        }

        get sortedEvents() {
            return _.sortBy(this.pluginDefinition.events, ['name']);
        }

        buildInitFunction() {
            let initBody = [];

            // Register events
            this.sortedEvents.forEach(function (event) {
                initBody.push(CPPHelper.createFunctionCall('Register', [event.name]));
            });

            // Register slash commands
            if (this.pluginDefinition.slashCommands.length > 0) {
                if (this.sortedEvents.length > 0) {
                    initBody.push(CPPHelper.createEmptyLine());
                }

                this.pluginDefinition.slashCommands.forEach(function (command: any) {
                    initBody.push(CPPHelper.createFunctionCall('bz_registerCustomSlashCommand', [
                        `"${command}"`,
                        'this'
                    ]));
                });
            }

            // Build our Init() function
            let fxn = new CPPFunction('void', 'name', [
                CPPVariable.createConstChar('config')
            ]);
            fxn.implementFunction(initBody);
            fxn.setParentClass(this.pluginBuilder, CPPVisibility.Public);
        }

        @Watch('pluginDefinition.name')
        onPluginNameUpdateEvent() {
            this.buildInitFunction();
        }

        @Watch('pluginDefinition.events')
        onPluginEventUpdateEvent() {
            this.buildInitFunction();
        }
    }
</script>

<template>
    <pre>
    /*
    {{ license }}
    */
    </pre>
</template>

<script lang="ts">
    import * as _ from 'lodash';
    import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
    import {IPlugin} from '../lib/IPlugin';

    @Component({
        name: 'plugin-generator'
    })
    export default class PluginGenerator extends Vue {
        pluginBuilder: any;

        @Prop()
        pluginDefinition: IPlugin;

        get className() {
            if (this.pluginDefinition.name.trim().length === 0) {
                return 'SAMPLE_PLUGIN';
            }

            let literalNumbers = ['Zero', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine'];
            let pluginClassName = this.pluginDefinition.name.replace(/[^A-Za-z0-9_]/g, '');

            let tryParse = parseInt(pluginClassName.charAt(0));

            if (!isNaN(tryParse)) {
                pluginClassName = literalNumbers[tryParse] + pluginClassName.substring(1);
            }

            return pluginClassName;
        }

        get license() {
            let currentYear = new Date().getFullYear().toString();

            if (this.pluginDefinition.license === null) {
                return `Copyright (C) ${currentYear} ${this.pluginDefinition.author}\nAll rights reserved.`;
            }

            return this.pluginDefinition.license.body
                .replace('{year}', currentYear)
                .replace('{author}', this.pluginDefinition.author)
                .replace('{name}', this.pluginDefinition.name)
            ;
        }

        get sortedEvents() {
            return _.sortBy(this.pluginDefinition.events, ['name']);
        }

        buildInitFunction() {
            let initBody = [];

            this.sortedEvents.forEach(function (event) {
                // @todo generate a Register();
                // initBody.push(event['name']);
            });

            if (this.pluginDefinition.slashCommands.length > 0) {
                if (this.sortedEvents.length > 0) {
                    // @todo generate a new line
                    // initBody.push()
                }

                this.pluginDefinition.slashCommands.forEach(function (command: any) {
                    // @todo create a function call to bz_registerCustomSlashCommand
                    // initBody.push(LanguageHelpers.createFunctionCall('bz_registerCustomSlashCommand', [
                    //     LanguageHelpers.createString(command),
                    //     'this'
                    // ]));
                });
            }

            // @todo convert this into a CppClass instance
            // this.pluginBuilder.implementFunction('void', 'Init', initBody);
        }

        @Watch('pluginDefinition.name')
        onPluginNameUpdateEvent() {
            this.buildInitFunction();
        }

        @Watch('pluginDefinition.events')
        onPluginEventUpdateEvent() {
            this.buildInitFunction();
        }
    }
</script>


test username

test username


add matches ensure to tooltip

add matches ensure to tooltip

<script>
  import utils from './../../utils/domUtils'

  const SHOW_CLASS = 'in'
  const BASE_CLASS = 'tooltip fade'

  export default {
    render (h) {
      return h(
        this.tag,
        [
          this.$slots.default,
          h('div',
            {
              ref: 'tooltip',
              attrs: {
                role: 'tooltip'
              },
              on: {
                mouseenter: this.showOnHover,
                mouseleave: this.hideOnLeave
              }
            },
            [
              h('div', {'class': 'tooltip-arrow'}),
              h('div', {'class': 'tooltip-inner'}, this.text)
            ]
          )
        ]
      )
    },
    props: {
      tag: {
        type: String,
        'default': 'span'
      },
      text: {
        type: String,
        'default': ''
      },
      trigger: {
        type: String,
        'default': utils.triggers.HOVER_FOCUS
      },
      placement: {
        type: String,
        'default': utils.placements.TOP
      },
      autoPlacement: {
        type: Boolean,
        'default': true
      },
      appendTo: {
        type: String,
        'default': 'body'
      },
      transitionDuration: {
        type: Number,
        'default': 150
      },
      enable: {
        type: Boolean,
        'default': true
      }
    },
    data () {
      return {
        timeoutId: 0,
        triggerEl: null
      }
    },
    mounted () {
      utils.ensureElementMatchesFunction()
      this.initListeners()
      utils.removeFromDom(this.$refs.tooltip)
    },
    beforeDestroy () {
      this.clearListeners()
      utils.removeFromDom(this.$refs.tooltip)
    },
    watch: {
      trigger () {
        this.clearListeners()
        this.initListeners()
      }
    },
    methods: {
      initListeners () {
        this.triggerEl = this.$el.firstChild === this.$refs.tooltip ? null : this.$el.firstChild
        if (this.triggerEl) {
          if (this.trigger === utils.triggers.HOVER) {
            utils.on(this.triggerEl, utils.events.MOUSE_ENTER, this.show)
            utils.on(this.triggerEl, utils.events.MOUSE_LEAVE, this.hide)
          } else if (this.trigger === utils.triggers.FOCUS) {
            utils.on(this.triggerEl, utils.events.FOCUS, this.show)
            utils.on(this.triggerEl, utils.events.BLUR, this.hide)
          } else if (this.trigger === utils.triggers.HOVER_FOCUS) {
            utils.on(this.triggerEl, utils.events.MOUSE_ENTER, this.handleAuto)
            utils.on(this.triggerEl, utils.events.MOUSE_LEAVE, this.handleAuto)
            utils.on(this.triggerEl, utils.events.FOCUS, this.handleAuto)
            utils.on(this.triggerEl, utils.events.BLUR, this.handleAuto)
          } else if (this.trigger === utils.triggers.CLICK || this.trigger === utils.triggers.OUTSIDE_CLICK) {
            utils.on(this.triggerEl, utils.events.CLICK, this.toggle)
          } else {
            throw new TypeError(this.trigger + ' trigger is not supported.')
          }
        }
        utils.on(window, utils.events.CLICK, this.windowClicked)
      },
      clearListeners () {
        if (this.triggerEl) {
          utils.off(this.triggerEl, utils.events.FOCUS, this.show)
          utils.off(this.triggerEl, utils.events.BLUR, this.hide)
          utils.off(this.triggerEl, utils.events.MOUSE_ENTER, this.show)
          utils.off(this.triggerEl, utils.events.MOUSE_LEAVE, this.hide)
          utils.off(this.triggerEl, utils.events.CLICK, this.toggle)
          utils.off(this.triggerEl, utils.events.MOUSE_ENTER, this.handleAuto)
          utils.off(this.triggerEl, utils.events.MOUSE_LEAVE, this.handleAuto)
          utils.off(this.triggerEl, utils.events.FOCUS, this.handleAuto)
          utils.off(this.triggerEl, utils.events.BLUR, this.handleAuto)
        }
        utils.off(window, utils.events.CLICK, this.windowClicked)
      },
      show () {
        let tooltip = this.$refs.tooltip
        if (!this.enable || !this.triggerEl || utils.hasClass(tooltip, SHOW_CLASS)) {
          return
        }
        if (this.timeoutId > 0) {
          clearTimeout(this.timeoutId)
          this.timeoutId = 0
        } else {
          tooltip.className = `${BASE_CLASS} ${this.placement}`
          let container = document.querySelector(this.appendTo)
          container.appendChild(tooltip)
          utils.setTooltipPosition(tooltip, this.triggerEl, this.placement, this.autoPlacement, this.appendTo)
          tooltip.offsetHeight
        }
        utils.addClass(tooltip, SHOW_CLASS)
        this.$emit('tooltip-show')
      },
      hide () {
        clearTimeout(this.timeoutId)
        utils.removeClass(this.$refs.tooltip, SHOW_CLASS)
        this.timeoutId = setTimeout(() => {
          utils.removeFromDom(this.$refs.tooltip)
          this.timeoutId = 0
          this.$emit('tooltip-hide')
        }, this.transitionDuration)
      },
      toggle () {
        if (utils.hasClass(this.$refs.tooltip, SHOW_CLASS)) {
          this.hide()
        } else {
          this.show()
        }
      },
      showOnHover () {
        if (this.trigger === utils.triggers.HOVER || this.trigger === utils.triggers.HOVER_FOCUS) {
          this.show()
        }
      },
      hideOnLeave () {
        if (this.trigger === utils.triggers.HOVER || this.trigger === utils.triggers.HOVER_FOCUS) {
          this.hide()
        }
      },
      handleAuto () {
        setTimeout(() => {
          if (this.triggerEl.matches(':hover, :focus')) {
            this.show()
          } else {
            this.hide()
          }
        }, 20) // 20ms make firefox happy
      },
      windowClicked (event) {
        if (this.triggerEl && !this.triggerEl.contains(event.target) &&
          this.trigger === utils.triggers.OUTSIDE_CLICK && !this.$refs.tooltip.contains(event.target) &&
          utils.hasClass(this.$refs.tooltip, SHOW_CLASS)) {
          this.hide()
        }
      }
    }
  }
</script>

<script>
  import utils from './../../utils/domUtils'

  const SHOW_CLASS = 'in'
  const BASE_CLASS = 'tooltip fade'

  export default {
    render (h) {
      return h(
        this.tag,
        [
          this.$slots.default,
          h('div',
            {
              ref: 'tooltip',
              attrs: {
                role: 'tooltip'
              },
              on: {
                mouseenter: this.showOnHover,
                mouseleave: this.hideOnLeave
              }
            },
            [
              h('div', {'class': 'tooltip-arrow'}),
              h('div', {'class': 'tooltip-inner'}, this.text)
            ]
          )
        ]
      )
    },
    props: {
      tag: {
        type: String,
        'default': 'span'
      },
      text: {
        type: String,
        'default': ''
      },
      trigger: {
        type: String,
        'default': utils.triggers.HOVER_FOCUS
      },
      placement: {
        type: String,
        'default': utils.placements.TOP
      },
      autoPlacement: {
        type: Boolean,
        'default': true
      },
      appendTo: {
        type: String,
        'default': 'body'
      },
      transitionDuration: {
        type: Number,
        'default': 150
      },
      enable: {
        type: Boolean,
        'default': true
      }
    },
    data () {
      return {
        timeoutId: 0,
        triggerEl: null
      }
    },
    mounted () {
      this.initListeners()
      utils.removeFromDom(this.$refs.tooltip)
    },
    beforeDestroy () {
      this.clearListeners()
      utils.removeFromDom(this.$refs.tooltip)
    },
    watch: {
      trigger () {
        this.clearListeners()
        this.initListeners()
      }
    },
    methods: {
      initListeners () {
        this.triggerEl = this.$el.firstChild === this.$refs.tooltip ? null : this.$el.firstChild
        if (this.triggerEl) {
          if (this.trigger === utils.triggers.HOVER) {
            utils.on(this.triggerEl, utils.events.MOUSE_ENTER, this.show)
            utils.on(this.triggerEl, utils.events.MOUSE_LEAVE, this.hide)
          } else if (this.trigger === utils.triggers.FOCUS) {
            utils.on(this.triggerEl, utils.events.FOCUS, this.show)
            utils.on(this.triggerEl, utils.events.BLUR, this.hide)
          } else if (this.trigger === utils.triggers.HOVER_FOCUS) {
            utils.on(this.triggerEl, utils.events.MOUSE_ENTER, this.handleAuto)
            utils.on(this.triggerEl, utils.events.MOUSE_LEAVE, this.handleAuto)
            utils.on(this.triggerEl, utils.events.FOCUS, this.handleAuto)
            utils.on(this.triggerEl, utils.events.BLUR, this.handleAuto)
          } else if (this.trigger === utils.triggers.CLICK || this.trigger === utils.triggers.OUTSIDE_CLICK) {
            utils.on(this.triggerEl, utils.events.CLICK, this.toggle)
          } else {
            throw new TypeError(this.trigger + ' trigger is not supported.')
          }
        }
        utils.on(window, utils.events.CLICK, this.windowClicked)
      },
      clearListeners () {
        if (this.triggerEl) {
          utils.off(this.triggerEl, utils.events.FOCUS, this.show)
          utils.off(this.triggerEl, utils.events.BLUR, this.hide)
          utils.off(this.triggerEl, utils.events.MOUSE_ENTER, this.show)
          utils.off(this.triggerEl, utils.events.MOUSE_LEAVE, this.hide)
          utils.off(this.triggerEl, utils.events.CLICK, this.toggle)
          utils.off(this.triggerEl, utils.events.MOUSE_ENTER, this.handleAuto)
          utils.off(this.triggerEl, utils.events.MOUSE_LEAVE, this.handleAuto)
          utils.off(this.triggerEl, utils.events.FOCUS, this.handleAuto)
          utils.off(this.triggerEl, utils.events.BLUR, this.handleAuto)
        }
        utils.off(window, utils.events.CLICK, this.windowClicked)
      },
      show () {
        let tooltip = this.$refs.tooltip
        if (!this.enable || !this.triggerEl || utils.hasClass(tooltip, SHOW_CLASS)) {
          return
        }
        if (this.timeoutId > 0) {
          clearTimeout(this.timeoutId)
          this.timeoutId = 0
        } else {
          tooltip.className = `${BASE_CLASS} ${this.placement}`
          let container = document.querySelector(this.appendTo)
          container.appendChild(tooltip)
          utils.setTooltipPosition(tooltip, this.triggerEl, this.placement, this.autoPlacement, this.appendTo)
          tooltip.offsetHeight
        }
        utils.addClass(tooltip, SHOW_CLASS)
        this.$emit('tooltip-show')
      },
      hide () {
        clearTimeout(this.timeoutId)
        utils.removeClass(this.$refs.tooltip, SHOW_CLASS)
        this.timeoutId = setTimeout(() => {
          utils.removeFromDom(this.$refs.tooltip)
          this.timeoutId = 0
          this.$emit('tooltip-hide')
        }, this.transitionDuration)
      },
      toggle () {
        if (utils.hasClass(this.$refs.tooltip, SHOW_CLASS)) {
          this.hide()
        } else {
          this.show()
        }
      },
      showOnHover () {
        if (this.trigger === utils.triggers.HOVER || this.trigger === utils.triggers.HOVER_FOCUS) {
          this.show()
        }
      },
      hideOnLeave () {
        if (this.trigger === utils.triggers.HOVER || this.trigger === utils.triggers.HOVER_FOCUS) {
          this.hide()
        }
      },
      handleAuto () {
        setTimeout(() => {
          if (this.triggerEl.matches(':hover, :focus')) {
            this.show()
          } else {
            this.hide()
          }
        }, 20) // 20ms make firefox happy
      },
      windowClicked (event) {
        if (this.triggerEl && !this.triggerEl.contains(event.target) &&
          this.trigger === utils.triggers.OUTSIDE_CLICK && !this.$refs.tooltip.contains(event.target) &&
          utils.hasClass(this.$refs.tooltip, SHOW_CLASS)) {
          this.hide()
        }
      }
    }
  }
</script>


删除a标签

删除a标签

<template>

    <template v-if="typeof this.href === 'string'">

        <slot></slot>

    </template>
    <template v-else>

        <slot></slot>

    </template>
    {{ separator }}

</template>


add now so we dont cache

add now so we dont cache

<script lang="coffee">
import AppConfig from '@/shared/services/app_config'
import EventBus from '@/shared/services/event_bus'
import Session from '@/shared/services/session'
import Records from '@/shared/services/records'
import marked from 'marked'
import md5 from 'md5'

export default
  data: ->
    notice: false
    showNotice: false
    reload: false

  mounted: ->
    setInterval =>
      Records.fetch
        path: 'boot/version'
        params:
          version: AppConfig.version
          release: AppConfig.release
          now: Date.now()
      .then(@eatData)
    ,
      1000 * 60 * 5
    EventBus.$on 'systemNotice', @eatData
    @eatData({version: AppConfig.version, notice: AppConfig.systemNotice})

  methods:
    eatData: (data) ->
      @reload = data.reload
      @notice = data.notice
      @showNotice = @reload || (@notice && !Session.user().hasExperienced(md5(@notice)))

    accept: ->
      @showNotice = false
      @notice && Records.users.saveExperience(md5(@notice))
      if @reload
        setTimeout ->
          location.reload()
        , 100

</script>

<template lang="pug">
v-system-bar.system-notice(v-if="showNotice" app color="primary" height="40")
  .d-flex.justify-space-between(style="width: 100%")
    .system-notice__message.text-subtitle-1
      span(v-if="notice" v-marked="notice")
      span(v-else="notice" v-t="'global.messages.app_update'")
    v-btn.system-notice__hide(small outlined @click="accept" v-t="(reload && 'global.messages.reload') || 'dashboard_page.dismiss'")
</template>

<style lang="sass">
.system-notice
  p
    margin-top: 0
    margin-bottom: 0
</style>

<script lang="coffee">
import AppConfig from '@/shared/services/app_config'
import EventBus from '@/shared/services/event_bus'
import Session from '@/shared/services/session'
import Records from '@/shared/services/records'
import marked from 'marked'
import md5 from 'md5'

export default
  data: ->
    notice: false
    showNotice: false
    reload: false

  mounted: ->
    setInterval =>
      Records.fetch
        path: 'boot/version'
        params:
          version: AppConfig.version
          release: AppConfig.release
      .then(@eatData)
    ,
      1000 * 60 * 5
    EventBus.$on 'systemNotice', @eatData
    @eatData({version: AppConfig.version, notice: AppConfig.systemNotice})

  methods:
    eatData: (data) ->
      @reload = data.reload
      @notice = data.notice
      @showNotice = @reload || (@notice && !Session.user().hasExperienced(md5(@notice)))

    accept: ->
      @showNotice = false
      @notice && Records.users.saveExperience(md5(@notice))
      if @reload
        setTimeout ->
          location.reload()
        , 100

</script>

<template lang="pug">
v-system-bar.system-notice(v-if="showNotice" app color="primary" height="40")
  .d-flex.justify-space-between(style="width: 100%")
    .system-notice__message.text-subtitle-1
      span(v-if="notice" v-marked="notice")
      span(v-else="notice" v-t="'global.messages.app_update'")
    v-btn.system-notice__hide(small outlined @click="accept" v-t="(reload && 'global.messages.reload') || 'dashboard_page.dismiss'")
</template>

<style lang="sass">
.system-notice
  p
    margin-top: 0
    margin-bottom: 0
</style>


chore(requests): first, list all unapproved requests by oldest to newest; second, list all approved requests by newest to oldest

<script lang="coffee">
import Records        from '@/shared/services/records'
import AbilityService from '@/shared/services/ability_service'
import ModalService   from '@/shared/services/modal_service'
import RecordLoader   from '@/shared/services/record_loader'
import Session        from '@/shared/services/session'
import AnnouncementModalMixin from '@/mixins/announcement_modal'
import {includes, some, compact, intersection, orderBy, slice, filter, isEmpty} from 'lodash'
import LmoUrlService from '@/shared/services/lmo_url_service'
import { exact, approximate } from '@/shared/helpers/format_time'

export default
  data: ->
    requests: []
    group: Records.groups.fuzzyFind(@$route.params.key)
  created: ->
    if AbilityService.canManageMembershipRequests(@group)
      Records.membershipRequests.fetchPendingByGroup(@group.key, per: 100)
      Records.membershipRequests.fetchPreviousByGroup(@group.key, per: 100)
      @watchRecords
        collections: ['membershipRequests']
        query: (store) =>
          @requests = @group.membershipRequests()
  computed:
    unapprovedRequestsByOldestFirst: ->
      unapproved = filter @requests, (request) -> !request.respondedAt
      orderBy unapproved, ['createdAt'], ['asc']

    approvedRequestsByNewestFirst: ->
      approved = filter @requests, (request) -> request.respondedAt
      orderBy approved, ['respondedAt'], ['desc']

</script>
<template lang="pug">
.requests-panel
  v-list(two-line)
    membership-request(v-for="request in unapprovedRequestsByOldestFirst" :request="request" :key="request.id")
    membership-request(v-for="request in approvedRequestsByNewestFirst" :request="request" :key="request.id")
</template>

<script lang="coffee">
import Records        from '@/shared/services/records'
import AbilityService from '@/shared/services/ability_service'
import ModalService   from '@/shared/services/modal_service'
import RecordLoader   from '@/shared/services/record_loader'
import Session        from '@/shared/services/session'
import AnnouncementModalMixin from '@/mixins/announcement_modal'
import {includes, some, compact, intersection, orderBy, slice} from 'lodash'
import LmoUrlService from '@/shared/services/lmo_url_service'
import { exact, approximate } from '@/shared/helpers/format_time'

export default
  data: ->
    requests: []
    group: Records.groups.fuzzyFind(@$route.params.key)
  created: ->
    if AbilityService.canManageMembershipRequests(@group)
      Records.membershipRequests.fetchPendingByGroup(@group.key, per: 100)
      Records.membershipRequests.fetchPreviousByGroup(@group.key, per: 100)
      @watchRecords
        collections: ['membershipRequests']
        query: (store) =>
          @requests = @group.membershipRequests()
  computed:
    requestsByPending: ->
      orderBy @requests, [(r) -> r.respondedAt || ''], ['asc']

</script>
<template lang="pug">
.requests-panel
  v-list(two-line)
    membership-request(v-for="request in requestsByPending" :request="request" :key="request.id")
</template>