refactor: use included directive instead extra import

<template>
  <ul class="l-window__controls">
    <close :func="close"></close>
    <maximize :func="maximize"></maximize>
    <minimize :func="minimize"></minimize>
  </ul>
</template>

<script>
import Close from './Controls/Close'
import Maximize from './Controls/Maximize'
import Minimize from './Controls/Minimize'

export default {
  components: {
    Close,
    Maximize,
    Minimize
  },
  methods: {
    close (e) {
      this.$electron.ipcRenderer.send('surfbird:window:close', true)
    },
    maximize (e) {
      this.$electron.ipcRenderer.send('surfbird:window:maximize', true)
    },
    minimize (e) {
      this.$electron.ipcRenderer.send('surfbird:window:minimize', true)
    }
  },
  name: 'controls'
}
</script>

<style lang="scss">
.l-window {
  &__controls {
    position: fixed;
    top: 0px;
    right: 0px;
    float: right;
    list-style: none;
    padding: 17px;
    padding-left: 25px;
    margin: 0;
    user-select: none;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 100%);
    z-index: 999;
  }

  &__control {
    color: #b0bec5;
    cursor: pointer;
    float: right;
    margin-right: 13px !important;
    padding: 0;
    margin: 0;
    font-family: Batch;
    font-size: 18px;

    &:first-child {
      margin-right: 0px !important;
    }
  }
}
</style>

<template>
  <ul class="l-window__controls">
    <close :func="close"></close>
    <maximize :func="maximize"></maximize>
    <minimize :func="minimize"></minimize>
  </ul>
</template>

<script>
import Close from './Controls/Close'
import Maximize from './Controls/Maximize'
import Minimize from './Controls/Minimize'
const ipcRenderer = require('electron').ipcRenderer

export default {
  components: {
    Close,
    Maximize,
    Minimize
  },
  methods: {
    close (e) {
      ipcRenderer.send('surfbird:window:close', true)
    },
    maximize (e) {
      ipcRenderer.send('surfbird:window:maximize', true)
    },
    minimize (e) {
      ipcRenderer.send('surfbird:window:minimize', true)
    }
  },
  name: 'controls'
}
</script>

<style lang="scss">
.l-window {
  &__controls {
    position: fixed;
    top: 0px;
    right: 0px;
    float: right;
    list-style: none;
    padding: 17px;
    padding-left: 25px;
    margin: 0;
    user-select: none;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 100%);
    z-index: 999;
  }

  &__control {
    color: #b0bec5;
    cursor: pointer;
    float: right;
    margin-right: 13px !important;
    padding: 0;
    margin: 0;
    font-family: Batch;
    font-size: 18px;

    &:first-child {
      margin-right: 0px !important;
    }
  }
}
</style>


Add bar chart data.

Add bar chart data.

<template>

Tomato habit

      Tomatoes completed

    <canvas id="line-chart" height="200"></canvas>

      Tomatoes time distribution

    <canvas id="bar-chart" height="200"></canvas>

      Tomato streak: {{ usageData.streak }} day{{usageData.streak > 1 ? 's' : ''}}

      Total completed: {{ usageData.totalCount }}

</template>


Forecast better layout

Forecast better layout

<template>

      {{ item.day }}

        <i :class="['icon','wi', `wi-owm-${item.icon}`]">

        ▼ {{ item.minTemp }}°C

        ▲ {{ item.maxTemp }}°C

</template>


録画中番組はエンコードダイアログできないように修正

録画中番組はエンコードダイアログできないように修正

<template>

        <v-menu class="menu" v-model="isOpened" bottom left>
            <template v-slot:activator="{ on }">
                <v-btn icon class="menu-button" v-on="on">
                    <v-icon>mdi-dots-vertical</v-icon>
                </v-btn>
            </template>
            <v-list>
                <v-list-item v-if="typeof recordedItem.ruleId !== 'undefined'" v-on:click="gotoRule">
                    <v-list-item-icon class="mr-3">
                        <v-icon>mdi-calendar</v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-item-title>rule</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item v-on:click="search">
                    <v-list-item-icon class="mr-3">
                        <v-icon>mdi-magnify</v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-item-title>search</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item
                    v-if="recordedItem.isRecording === false && serverConfig.isEnableEncode() === true"
                    v-on:click="openEncodeDialog"
                >
                    <v-list-item-icon class="mr-3">
                        <v-icon>mdi-plus-circle-outline</v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-item-title>encode</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item v-if="recordedItem.isEncoding === true" v-on:click="stopEncode">
                    <v-list-item-icon class="mr-3">
                        <v-icon>mdi-stop</v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-item-title>stop</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item v-on:click="openDeleteDialog">
                    <v-list-item-icon class="mr-3">
                        <v-icon>mdi-delete</v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-item-title>delete</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-menu>

        <AddEncodeDialog :isOpen.sync="isOpenEncodeDialog" :recordedItem="recordedItem"></AddEncodeDialog>
        <RecordedDeleteDialog :isOpen.sync="isOpenDeleteDialog" :recordedItem="recordedItem"></RecordedDeleteDialog>

</template>

<template>

        <v-menu class="menu" v-model="isOpened" bottom left>
            <template v-slot:activator="{ on }">
                <v-btn icon class="menu-button" v-on="on">
                    <v-icon>mdi-dots-vertical</v-icon>
                </v-btn>
            </template>
            <v-list>
                <v-list-item v-if="typeof recordedItem.ruleId !== 'undefined'" v-on:click="gotoRule">
                    <v-list-item-icon class="mr-3">
                        <v-icon>mdi-calendar</v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-item-title>rule</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item v-on:click="search">
                    <v-list-item-icon class="mr-3">
                        <v-icon>mdi-magnify</v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-item-title>search</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item v-if="serverConfig.isEnableEncode() === true" v-on:click="openEncodeDialog">
                    <v-list-item-icon class="mr-3">
                        <v-icon>mdi-plus-circle-outline</v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-item-title>encode</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item v-if="recordedItem.isEncoding === true" v-on:click="stopEncode">
                    <v-list-item-icon class="mr-3">
                        <v-icon>mdi-stop</v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-item-title>stop</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item v-on:click="openDeleteDialog">
                    <v-list-item-icon class="mr-3">
                        <v-icon>mdi-delete</v-icon>
                    </v-list-item-icon>
                    <v-list-item-content>
                        <v-list-item-title>delete</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-menu>

        <AddEncodeDialog :isOpen.sync="isOpenEncodeDialog" :recordedItem="recordedItem"></AddEncodeDialog>
        <RecordedDeleteDialog :isOpen.sync="isOpenDeleteDialog" :recordedItem="recordedItem"></RecordedDeleteDialog>

</template>


increase line height in menu options

increase line height in menu options

<template>

  <li
    role="menuitem"
    class="ui-menu-option"
    :class="classes"
    :tabindex="(isDivider || disabled) ? null : '0'"
    @click="$emit('select')"
    @keydown.enter="$emit('select')"
  >
    <slot v-if="!isDivider">
      <div class="ui-menu-option-content">
        <ui-icon
          v-if="$slots.icon"
          class="ui-menu-option-icon"
        >
          <slot name="icon"></slot>
        </ui-icon>

        <!-- if anything in the dropdown menu has an icon, then we are
        going to add padding to make all the items align -->
        <div
          class="ui-menu-option-text"
          :class="{ 'ui-menu-option-text-lp': !$slots.icon }"
        >
          {{ label }}
        </div>
        <div
          v-if="secondaryText"
          class="ui-menu-option-secondary-text"
        >
          {{ secondaryText }}
        </div>
      </div>
    </slot>

  </li>

</template>

<script>

  import UiIcon from 'keen-ui/src/UiIcon';

  export default {
    name: 'coreMenuOption',
    components: {
      UiIcon,
    },
    props: {
      type: String,
      label: String,
      secondaryText: String,
      disabled: {
        type: Boolean,
        default: false,
      },
      active: {
        type: Boolean,
        default: false,
      },
    },

    computed: {
      classes() {
        return {
          'is-divider': this.isDivider,
          'is-disabled': this.disabled,
          'is-active': this.active,
        };
      },

      isDivider() {
        return this.type === 'divider';
      },
    },
  };

</script>

<style lang="scss">

  @import '~keen-ui/src/styles/imports';

  .ui-menu-option {
      display: block;
      font-family: $font-stack;
      position: relative;
      user-select: none;
      width: 100%;

      &.is-divider {
          background-color: rgba(black, 0.08);
          display: block;
          height: rem-calc(1px);
          margin: rem-calc(6px 0);
          padding: 0;
      }

      &:not(.is-divider) {
          color: $primary-text-color;
          cursor: pointer;
          font-size: $ui-dropdown-item-font-size;
          font-weight: normal;
          min-height: rem-calc(40px);
          outline: none;

          &:hover:not(.is-disabled),
          body[modality="keyboard"] &:focus {
              background-color: #EEEEEE; // rgba(black, 0.1);
          }

          &.is-disabled {
              color: $secondary-text-color;
              cursor: default;
              opacity: 0.5;

              .ui-menu-option-secondary-text {
                  color: $secondary-text-color;
              }
          }
      }
  }

  .ui-menu-option-content {
      align-items: center;
      display: flex;
      height: rem-calc(40px);
      padding: rem-calc(0 16px);
  }

  .ui-menu-option-icon {
      color: $secondary-text-color;
      font-size: rem-calc(18px);
      margin-right: rem-calc(16px);
  }

  .ui-menu-option-text {
      @include text-truncation;
      flex-grow: 1;
      line-height: 2em;
  }

  .ui-menu-option-secondary-text {
      color: $hint-text-color;
      flex-shrink: 0;
      font-size: rem-calc(13px);
      margin-left: rem-calc(4px);
  }

  .ui-menu-option-text-lp {
    padding-left: 40px
  }

</style>

<template>

  <li
    role="menuitem"
    class="ui-menu-option"
    :class="classes"
    :tabindex="(isDivider || disabled) ? null : '0'"
    @click="$emit('select')"
    @keydown.enter="$emit('select')"
  >
    <slot v-if="!isDivider">
      <div class="ui-menu-option-content">
        <ui-icon
          v-if="$slots.icon"
          class="ui-menu-option-icon"
        >
          <slot name="icon"></slot>
        </ui-icon>

        <!-- if anything in the dropdown menu has an icon, then we are
        going to add padding to make all the items align -->
        <div
          class="ui-menu-option-text"
          :class="{ 'ui-menu-option-text-lp': !$slots.icon }"
        >
          {{ label }}
        </div>
        <div
          v-if="secondaryText"
          class="ui-menu-option-secondary-text"
        >
          {{ secondaryText }}
        </div>
      </div>
    </slot>

  </li>

</template>

<script>

  import UiIcon from 'keen-ui/src/UiIcon';

  export default {
    name: 'coreMenuOption',
    components: {
      UiIcon,
    },
    props: {
      type: String,
      label: String,
      secondaryText: String,
      disabled: {
        type: Boolean,
        default: false,
      },
      active: {
        type: Boolean,
        default: false,
      },
    },

    computed: {
      classes() {
        return {
          'is-divider': this.isDivider,
          'is-disabled': this.disabled,
          'is-active': this.active,
        };
      },

      isDivider() {
        return this.type === 'divider';
      },
    },
  };

</script>

<style lang="scss">

  @import '~keen-ui/src/styles/imports';

  .ui-menu-option {
      display: block;
      font-family: $font-stack;
      position: relative;
      user-select: none;
      width: 100%;

      &.is-divider {
          background-color: rgba(black, 0.08);
          display: block;
          height: rem-calc(1px);
          margin: rem-calc(6px 0);
          padding: 0;
      }

      &:not(.is-divider) {
          color: $primary-text-color;
          cursor: pointer;
          font-size: $ui-dropdown-item-font-size;
          font-weight: normal;
          min-height: rem-calc(40px);
          outline: none;

          &:hover:not(.is-disabled),
          body[modality="keyboard"] &:focus {
              background-color: #EEEEEE; // rgba(black, 0.1);
          }

          &.is-disabled {
              color: $secondary-text-color;
              cursor: default;
              opacity: 0.5;

              .ui-menu-option-secondary-text {
                  color: $secondary-text-color;
              }
          }
      }
  }

  .ui-menu-option-content {
      align-items: center;
      display: flex;
      height: rem-calc(40px);
      padding: rem-calc(0 16px);
  }

  .ui-menu-option-icon {
      color: $secondary-text-color;
      font-size: rem-calc(18px);
      margin-right: rem-calc(16px);
  }

  .ui-menu-option-text {
      @include text-truncation;
      flex-grow: 1;
  }

  .ui-menu-option-secondary-text {
      color: $hint-text-color;
      flex-shrink: 0;
      font-size: rem-calc(13px);
      margin-left: rem-calc(4px);
  }

  .ui-menu-option-text-lp {
    padding-left: 40px
  }

</style>


ESLint

ESLint

<template>

            <slot></slot>

</template>

<template>

            <slot></slot>

</template>


Workaround to center dialog.

Workaround to center dialog.

<template>
    <v-dialog v-model="dialog" scrollable persistent max-width="250" class="dialog-login">
        <v-card id="dialog-login-required">
            <v-card-text id="dialog-login-required-content">

{{loginDescription}}

{{$t("common:loginRequiredInfo")}}

                    <v-btn color="primary" outlined @click="goToLogin()" class="link-button">
                        {{$t("common:toolbar.login")}}
                    </v-btn>

                    <v-btn color="secondary" @click="goToRegister()" class="link-button">
                        {{$t("common:button.register")}}
                    </v-btn>

            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions class="action-container">
                <v-spacer></v-spacer>
                <v-btn color="primary" text @click.native="$emit('close-dialog')">
                    {{$t("common:button.close")}}
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<template>
    <v-layout row justify-center>
        <v-dialog v-model="dialog" scrollable persistent max-width="250px">
            <v-card id="dialog-login-required">
                <v-card-text id="dialog-login-required-content">

{{loginDescription}}

{{$t("common:loginRequiredInfo")}}

                        <v-btn color="primary" outlined @click="goToLogin()" class="link-button">
                            {{$t("common:toolbar.login")}}
                        </v-btn>

                        <v-btn color="secondary" @click="goToRegister()" class="link-button">
                            {{$t("common:button.register")}}
                        </v-btn>

                </v-card-text>
                <v-divider></v-divider>
                <v-card-actions class="action-container">
                    <v-spacer></v-spacer>
                    <v-btn color="primary" text @click.native="$emit('close-dialog')">
                        {{$t("common:button.close")}}
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-layout>
</template>


Update url-preview-popup.vue

Update url-preview-popup.vue

<template>
<div class="fgmtyycl _panel" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
	<x-url-preview :url="url"/>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import i18n from '../i18n';
import XUrlPreview from './url-preview.vue';

export default Vue.extend({
	i18n,

	components: {
		XUrlPreview
	},

	props: {
		url: {
			type: String,
			required: true
		},
		source: {
			required: true
		}
	},

	data() {
		return {
			u: null,
			top: 0,
			left: 0,
		};
	},

	mounted() {
		const rect = this.source.getBoundingClientRect();
		const x = ((rect.left + (this.source.offsetWidth / 2)) - (300 / 2)) + window.pageXOffset;
		const y = rect.top + this.source.offsetHeight + window.pageYOffset;

		this.top = y;
		this.left = x;
	},
});
</script>

<style lang="scss" scoped>
.fgmtyycl {
	position: absolute;
	z-index: 11000;
	width: 500px;
	overflow: hidden;
	pointer-events: none;
}
</style>

<template>
<div class="fgmtyycl _panel" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
	<x-url-preview :url="url" style="width: 600px;"/>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import i18n from '../i18n';
import XUrlPreview from './url-preview.vue';

export default Vue.extend({
	i18n,

	components: {
		XUrlPreview
	},

	props: {
		url: {
			type: String,
			required: true
		},
		source: {
			required: true
		}
	},

	data() {
		return {
			u: null,
			top: 0,
			left: 0,
		};
	},

	mounted() {
		const rect = this.source.getBoundingClientRect();
		const x = ((rect.left + (this.source.offsetWidth / 2)) - (300 / 2)) + window.pageXOffset;
		const y = rect.top + this.source.offsetHeight + window.pageYOffset;

		this.top = y;
		this.left = x;
	},
});
</script>

<style lang="scss" scoped>
.fgmtyycl {
	position: absolute;
	z-index: 11000;
	//width: 300px;
	overflow: hidden;
}
</style>


Fix refresh error if no rules exists

Fix refresh error if no rules exists

<template>

        <v-container>
            <v-card>
                <v-card-row class="green darken-1">
                    <v-card-title class="white--text">{{$t('vpsip.header')}}</v-card-title>
                </v-card-row>
                <v-card-text v-if="loadedStatus">
                    <v-card-row>
                        {{$t('vpsip.status.label')}}:
                        <v-chip v-if="status.enable_pending" label class="yellow">
                            {{$t('vpsip.status.enabling')}}
                        </v-chip>
                        <v-chip v-else-if="status.disable_pending" label class="yellow">
                            {{$t('vpsip.status.disabling')}}
                        </v-chip>
                        <v-chip v-else-if="status.enabled" label class="green white--text">
                            {{$t('vpsip.status.enabled')}}
                        </v-chip>
                        <v-chip v-else label class="red white--text">
                            {{$t('vpsip.status.disabled')}}
                        </v-chip>
                    </v-card-row>
                </v-card-text>
                <v-table-overflow v-if="loadedRules">

                            {{$t('table.id')}}
                            {{$t('table.protocol')}}
                            {{$t('table.ports')}}
                            {{$t('table.status')}}

                                        <input :id="'checkbox' + item.id" type="checkbox" class="filled"
                                            :value="item.id" v-model="checked">

                                #{{item.id}}
                                {{protocols[item.protocol]}}
                                {{item.port_range.from}}
                                {{item.port_range.from}} - {{item.port_range.to}}

                                        {{$t('vpsip.rule.creating')}}

                                        {{$t('vpsip.rule.deleting')}}

                                        {{$t('vpsip.rule.created')}}

                                    {{ $t('table.empty.rules') }}

                </v-table-overflow>
                <v-card-row actions style="justify-content: flex-start" v-if="loadedStatus">
                    <v-btn success v-if="(!status.enabled || status.enable_pending) && !status.disable_pending" v-on:click.native="enable"
                        :loading="changingStatus" :disabled="changingStatus">
                        {{$t('vpsip.enable')}}
                    </v-btn>
                    <v-btn error v-if="(status.enabled || status.disable_pending) && !status.enable_pending" v-on:click.native="disable"
                        :loading="changingStatus" :disabled="changingStatus">
                        {{$t('vpsip.disable')}}
                    </v-btn>
                    <v-modal v-model="addModal">
                        <v-btn slot="activator" success class="white--text">
                            {{$t('vpsip.add.submit')}}
                        </v-btn>
                        <v-card>
                            <v-card-text>

{{$t('vpsip.add.header')}}

                            </v-card-text>
                            <v-card-text>
                                <text-input
                                    :validationmessage="$t('validation.port')" :validation="validatePortFrom"
                                    :label="$t('vpsip.add.portfrom.label')"
                                    :placeholder="$t('vpsip.add.portfrom.placeholder')"
                                    name="portfrom" type="number" v-model="portFrom"
                                ></text-input>
                                <text-input
                                    :validationmessage="$t('validation.port')" :validation="validatePortTo"
                                    :label="$t('vpsip.add.portto.label')"
                                    :placeholder="$t('vpsip.add.portto.placeholder')"
                                    name="portto" type="number" v-model="portTo"
                                ></text-input>
                                <v-select
                                    :options="selectProtocols"
                                    :label="$t('vpsip.add.protocol')"
                                    v-model="protocol"
                                ></v-select>
                            </v-card-text>
                            <v-card-row actions>
                                <v-spacer></v-spacer>
                                <v-btn flat v-on:click.native="addModal = false" class="primary--text">
                                    {{$t('vpsip.add.cancel')}}
                                </v-btn>
                                <v-btn flat v-on:click.native="addRule" class="primary--text"
                                    :loading="addingRule" :disabled="addingRule">
                                    {{$t('vpsip.add.submit')}}
                                </v-btn>
                            </v-card-row>
                        </v-card>
                    </v-modal>
                    <v-btn error v-on:click.native="deleteRules" :disabled='checked.length === 0'>
                        {{$t('vpsip.delete')}}
                    </v-btn>
                </v-card-row>
            </v-card>
        </v-container>

</template>


(fix) change date init stage

(fix) change date init stage

<template>

            什么值得黑

            主题列表

{{ username }}

            登出

            登录
            注册

</template>


Ajout produit

Ajout produit

<template>

          <button class="btn btn-more" v-on:click="increment">+</button>
          <button class="btn btn-less" v-on:click="decrement">-</button>

          <svg viewBox="0 0 100 100" class="product-item-icon animated pulse">
            <use id="product-item-icon-svguse" xlink:href="#foods-icon"></use>
          </svg>
          +
          <input id="product-item-count" value="1" v-model="form.quantity" number hidden>

{{ form.quantity }}

        <input name="form-name" v-model="form.name" type="text" placeholder="Nom du produit" />

        <input name="form-description" v-model="form.description" type="text" placeholder="Description du produit" />

        <input id="raw" class="filter" type="radio" value="raw" v-model="form.type" checked>
        Produits Bruts
        <input id="homemade" class="filter" type="radio" value="homemade" v-model="form.type">
        Plats Préparés

        Dans quel(s) garde(s)-manger(s) associez-vous ce produit ?

        <select name="foodkeepersSelect" class="foodkeeper-add-product-form-select" id="foodkeepersSelect" v-model="form.foodkeepers" multiple>
          <template v-for="foodkeeper in foodkeepers">
            <option value="{{ foodkeeper._id }}">{{ foodkeeper.name }}</option>
          </template>
        </select>

 1">
            Denrée ajoutée sur :
            <template v-for="id in form.foodkeepers">
              <template v-for="foodkeeper in foodkeepers">
                {{ foodkeeper.name }}
              </template>
            </template>

À consommer sous

        {{ form.dlc }} jour jours
        <input type="range" name="product-dlc" value="1" max="10" min="1" step="1" v-model="form.dlc"/>

1 jour

10 jours

Ajouter

  <validation destination="Market" add="Product"></validation>
  <add-picto></add-picto>

</template>

<template>

          <button class="btn btn-more" v-on:click="increment">+</button>
          <button class="btn btn-less" v-on:click="decrement">-</button>

          <svg viewBox="0 0 100 100" class="product-item-icon animated pulse">
            <use xlink:href="#foods-icon-{{ form.icon }}"></use>
          </svg>
          +
          <input id="product-item-count" value="1" v-model="form.quantity" number hidden>

{{ form.quantity }}

        <input name="form-name" v-model="form.name" type="text" placeholder="Nom du produit" />

        <input name="form-description" v-model="form.description" type="text" placeholder="Description du produit" />

        <input id="raw" class="filter" type="radio" value="raw" v-model="form.type" checked>
        Produits Bruts
        <input id="homemade" class="filter" type="radio" value="homemade" v-model="form.type">
        Plats Préparés

        Dans quel(s) garde(s)-manger(s) associez-vous ce produit ?

        <select name="foodkeepersSelect" class="foodkeeper-add-product-form-select" id="foodkeepersSelect" v-model="form.foodkeepers" multiple>
          <template v-for="foodkeeper in foodkeepers">
            <option value="{{ foodkeeper._id }}">{{ foodkeeper.name }}</option>
          </template>
        </select>

 1">
            Denrée ajoutée sur :
            <template v-for="id in form.foodkeepers">
              <template v-for="foodkeeper in foodkeepers">
                {{ foodkeeper.name }}
              </template>
            </template>

À consommer sous

        {{ form.dlc }} jour jours
        <input type="range" name="product-dlc" value="1" max="10" min="1" step="1" v-model="form.dlc"/>

1 jour

10 jours

Ajouter

  <validation destination="Market" add="Product"></validation>
  <add-picto></add-picto>

</template>


fix:iOS13兼容textarea的margin

<template>
  <uni-textarea
    :value="_checkEmpty(value)"
    :maxlength="maxlengthNumber"
    :placeholder="_checkEmpty(placeholder)"
    :disabled="disabled"
    :focus="focus"
    :auto-focus="autoFocus"
    :placeholder-class="_checkEmpty(placeholderClass)"
    :placeholder-style="_checkEmpty(placeholderStyle)"
    :auto-height="autoHeight"
    :cursor="cursorNumber"
    :selection-start="selectionStartNumber"
    :selection-end="selectionEndNumber"
    @change.stop
    v-on="$listeners"
  >

{{ placeholder }}

{{ item.trim() ? item : '.' }}

        <v-uni-resize-sensor
          ref="sensor"
          @resize="_resize"/>

      <textarea
        ref="textarea"
        v-model="valueSync"
        :disabled="disabled"
        :maxlength="maxlengthNumber"
        :autofocus="autoFocus"
        :class="{'uni-textarea-textarea-ios': isIOS}"
        class="uni-textarea-textarea"
        @compositionstart="_compositionstart"
        @compositionend="_compositionend"
        @input.stop="_input"
        @focus="_focus"
        @blur="_blur"
        @touchstart.passive="_touchstart"
      />

  </uni-textarea>
</template>


지원진 글 상세보기 안나오는  오류 수정

지원진 글 상세보기 안나오는  오류 수정

<template>

    <router-link :to="{name: 'board', params: {name: $route.params.name}, query: $route.query}" class="ui icon basic button">

    </router-link>
    <pager :is-first="!prevPost" :is-last="!nextPost" @on-prev="prevTopic" @on-next="nextTopic" class="inline"></pager>

             {{$t('common.button.copy.url.to.clipboard')}}

          <kakao-share v-if="isMobile" :options="kakaoShareOptions" tag="div" class="item">
             {{$t('common.send.url.via.kakaotalk')}}
          </kakao-share>

          <button v-if="isAdmin && isNotice" @click="toggleNotice" class="item">
             {{$t('common.button.cancel.notice')}}
          </button>
          <button v-else-if="isAdmin && !isNotice" @click="toggleNotice" class="item">
             {{$t('common.button.set.as.notice')}}
          </button>
          <router-link v-if="isEditable" :to="{name: 'board.edit', params: {name: $route.params.name, seq: post.seq}}" class="item">
             {{$t('common.button.edit')}}
          </router-link>

             {{$t('common.button.delete')}}

      <router-link :to="{name: 'board.write', params: {name: $route.params.name}}" class="ui icon button">

      </router-link>

{{(post.status && post.status.delete) ? $t('board.msg.deleted') : post.subject}}

                 {{$t('board.notice')}}

                {{$t(categoryLabel(post.category.code))}}

{{post.seq}}

                <template v-if="post.writer">

                  {{post.writer.username}}
                </template>

{{post.id | IdToRegDate('LL')}}

              <button class="ui basic label nomargin">
                {{post.views}}
              </button>
              <button @click="likeOrDislike('LIKE')" :class="post.myFeeling === 'LIKE' ? 'blue' : 'basic'" type="button" class="ui label nomargin">
                {{post.numberOfLike}}
              </button>
              <button @click="likeOrDislike('DISLIKE')" :class="post.myFeeling === 'DISLIKE' ? 'teal' : 'basic'" type="button" class="ui  label nomargin">
                {{post.numberOfDislike}}
              </button>

{{$t('board.gallery.list')}}

          <router-link :to="{name: 'gallery.view', params: {id: file.id}}">
             {{file.name}}
          </router-link>

        <button @click="likeOrDislike('LIKE')" :class="post.myFeeling === 'LIKE' ? 'blue' : 'basic'" class="ui compact button">
          {{post.numberOfLike}}
        </button>
        <button @click="likeOrDislike('DISLIKE')" :class="post.myFeeling === 'DISLIKE' ? 'teal' : 'basic'" class="ui compact button">
          {{post.numberOfDislike}}
        </button>

      <router-link :to="{name: 'board', params: {name: $route.params.name}, query: $route.query}" class="ui icon basic button">

      </router-link>
      <pager :is-first="!prevPost" :is-last="!nextPost" @on-prev="prevTopic" @on-next="nextTopic" class="inline"></pager>

      <button @click="copyLinkIntoClipboard" type="button" class="ui icon button">

      </button>
      <kakao-share v-if="isMobile" :options="kakaoShareOptions" tag="button" type="button" class="button-kakao">

      </kakao-share>

 {{$t('latest.articles.author')}}

          <router-link :to="{name: 'board.view', params: {name: $route.params.name, seq: post.seq}, query: $route.query}" v-for="post in latestPostsByWriter" :key="post.id" class="item">

{{post.subject}}

                {{post.writer.username}} · {{post.id | IdToRegDate('LL')}}

          </router-link>

 {{$t('board.comments')}}

            {{$t('board.msg.there.is.no.new.comment')}}

          <comment-list-item :item="comment" v-for="comment in comments" :key="comment.id" @on-like="likeOrDislikeComment(comment, 'LIKE')" @on-dislike="likeOrDislikeComment(comment, 'DISLIKE')" @on-delete="deleteComment"></comment-list-item>

        <button @click="moreComments" :class="{loading: isCommentLoading}" type="button" class="fluid ui button">
           {{$t('common.button.more')}}
        </button>

{{$t('board.msg.need.login.for.write')}}

            <editor @on-created="onEditorCreated" @on-image-uploaded="onImageUploaded" :options="{mode: 'comment', language: $store.state.locale}"></editor>

            <button @click="checkCommentForm() && submitComment()" :class="{loading: isCommentSubmitting}" class="ui right floated blue labeled icon button">
               {{$t('common.button.write.comment')}}
            </button>

</template>

<template>

    <router-link :to="{name: 'board', params: {name: $route.params.name}, query: $route.query}" class="ui icon basic button">

    </router-link>
    <pager :is-first="!prevPost" :is-last="!nextPost" @on-prev="prevTopic" @on-next="nextTopic" class="inline"></pager>

             {{$t('common.button.copy.url.to.clipboard')}}

          <kakao-share v-if="isMobile" :options="kakaoShareOptions" tag="div" class="item">
             {{$t('common.send.url.via.kakaotalk')}}
          </kakao-share>

          <button v-if="isAdmin && isNotice" @click="toggleNotice" class="item">
             {{$t('common.button.cancel.notice')}}
          </button>
          <button v-else-if="isAdmin && !isNotice" @click="toggleNotice" class="item">
             {{$t('common.button.set.as.notice')}}
          </button>
          <router-link v-if="isEditable" :to="{name: 'board.edit', params: {name: $route.params.name, seq: post.seq}}" class="item">
             {{$t('common.button.edit')}}
          </router-link>

             {{$t('common.button.delete')}}

      <router-link :to="{name: 'board.write', params: {name: $route.params.name}}" class="ui icon button">

      </router-link>

{{(post.status && post.status.delete) ? $t('board.msg.deleted') : post.subject}}

                 {{$t('board.notice')}}

                {{$t(categoryLabel(post.category.code))}}

{{post.seq}}

                {{post.writer.username}}

{{post.id | IdToRegDate('LL')}}

              <button class="ui basic label nomargin">
                {{post.views}}
              </button>
              <button @click="likeOrDislike('LIKE')" :class="post.myFeeling === 'LIKE' ? 'blue' : 'basic'" type="button" class="ui label nomargin">
                {{post.numberOfLike}}
              </button>
              <button @click="likeOrDislike('DISLIKE')" :class="post.myFeeling === 'DISLIKE' ? 'teal' : 'basic'" type="button" class="ui  label nomargin">
                {{post.numberOfDislike}}
              </button>

{{$t('board.gallery.list')}}

          <router-link :to="{name: 'gallery.view', params: {id: file.id}}">
             {{file.name}}
          </router-link>

        <button @click="likeOrDislike('LIKE')" :class="post.myFeeling === 'LIKE' ? 'blue' : 'basic'" class="ui compact button">
          {{post.numberOfLike}}
        </button>
        <button @click="likeOrDislike('DISLIKE')" :class="post.myFeeling === 'DISLIKE' ? 'teal' : 'basic'" class="ui compact button">
          {{post.numberOfDislike}}
        </button>

      <router-link :to="{name: 'board', params: {name: $route.params.name}, query: $route.query}" class="ui icon basic button">

      </router-link>
      <pager :is-first="!prevPost" :is-last="!nextPost" @on-prev="prevTopic" @on-next="nextTopic" class="inline"></pager>

      <button @click="copyLinkIntoClipboard" type="button" class="ui icon button">

      </button>
      <kakao-share v-if="isMobile" :options="kakaoShareOptions" tag="button" type="button" class="button-kakao">

      </kakao-share>

 {{$t('latest.articles.author')}}

          <router-link :to="{name: 'board.view', params: {name: $route.params.name, seq: post.seq}, query: $route.query}" v-for="post in latestPostsByWriter" :key="post.id" class="item">

{{post.subject}}

                {{post.writer.username}} · {{post.id | IdToRegDate('LL')}}

          </router-link>

 {{$t('board.comments')}}

            {{$t('board.msg.there.is.no.new.comment')}}

          <comment-list-item :item="comment" v-for="comment in comments" :key="comment.id" @on-like="likeOrDislikeComment(comment, 'LIKE')" @on-dislike="likeOrDislikeComment(comment, 'DISLIKE')" @on-delete="deleteComment"></comment-list-item>

        <button @click="moreComments" :class="{loading: isCommentLoading}" type="button" class="fluid ui button">
           {{$t('common.button.more')}}
        </button>

{{$t('board.msg.need.login.for.write')}}

            <editor @on-created="onEditorCreated" @on-image-uploaded="onImageUploaded" :options="{mode: 'comment', language: $store.state.locale}"></editor>

            <button @click="checkCommentForm() && submitComment()" :class="{loading: isCommentSubmitting}" class="ui right floated blue labeled icon button">
               {{$t('common.button.write.comment')}}
            </button>

</template>


Added a try / catch when placing a bet

Added a try / catch when placing a bet

<template>

<v-card flat hover tile>
  <v-card-title>
    {{ fixture.time.starting_at.date_time }}
  </v-card-title>
  <v-card-text>

      <v-layout row wrap>
        <v-flex xs4 class="text-xs-center team" @click="$router.push(`teams/${home.id}`)" v-if="home">

          {{ home.name }}
        </v-flex>
        <v-flex xs4 v-if="!results">
          <v-layout v-if="odds" row wrap class="text-xs-center odds">
            <v-flex xs12>
              <v-btn @click.stop="betHome" class="bet" color="primary">
                <v-icon left dark>chevron_left</v-icon>
                {{ odds.home.toFixed(2) }}
              </v-btn>
            </v-flex><v-flex xs12>
              <v-btn @click.stop="betDraw" class="bet" color="primary">
                <v-icon left dark>remove</v-icon>
                {{ odds.draw.toFixed(2) }}
              </v-btn>
            </v-flex>
            <v-flex xs12>
              <v-btn @click.stop="betAway" class="bet" color="primary">
                <v-icon left dark>chevron_right</v-icon>
                {{ odds.away.toFixed(2) }}
              </v-btn>
            </v-flex>
          </v-layout>
          <v-progress-circular v-else style="margin: auto" :size="80" indeterminate color="primary"></v-progress-circular>
        </v-flex>
        <v-flex xs4 v-else>

            {{ fixture.scores.localteam_score }}
             -
            {{ fixture.scores.visitorteam_score }}

        </v-flex>
        <v-flex xs4 class="text-xs-center team" @click="$router.push(`teams/${away.id}`)" v-if="away">

          {{ away.name }}
        </v-flex>
      </v-layout>

  </v-card-text>
  <v-card-actions v-if="results">
    <v-spacer></v-spacer>
    <v-btn large color="accent" flat :href="`/#/fixtures/${fixture.id}`"><v-icon left>airplay</v-icon>Video highlights</v-btn>
  </v-card-actions>
</v-card>
<v-dialog v-model="dialog">
  <v-card>
    <v-card-title class="accent white--text">

{{ choiceLabel }}

    </v-card-title>
    <v-card-text>
      <v-text-field :rules="[() => wallet >= amount || `You only have ${wallet} tokens`]" type="number" label="Amount" v-model="amount"></v-text-field>
    </v-card-text>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn @click.stop="placeBet" large flat color="accent">Place bet </v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

</template>


fix clicking off of timer display to close

<template>

  <UiToolbar style="z-index: 8;" :style="contentSpecificStyles" class="toolbar">
    <CoachContentLabel
      :value="isCoachContent"
      style="margin-top: 8px; width: auto;"
    />
    <KLabeledIcon :style="{ 'margin-top': '8px', 'width': 'auto' }">
      <template #icon>
        <LearningActivityIcon
          data-test="learningActivityIcon"
          :kind="learningActivities"
          :shaded="true"
        />
      </template>
      <TextTruncator
        :text="resourceTitle"
        :maxHeight="26"
      />
      <template #iconAfter>
        <ProgressIcon :progress="contentProgress" class="progress-icon" />
      </template>
    </KLabeledIcon>
    <template #icon>
      <KIconButton
        icon="back"
        data-test="backButton"
        :tooltip="$tr('goBack')"
        :ariaLabel="$tr('goBack')"
        @click="onBackButtonClick"
      />
    </template>

    <template #actions>
      <KIconButton
        v-if="isQuiz && !showingReportState"
        ref="timerButton"
        data-test="timerButton"
        icon="timer"
        :tooltip="coreString('timeSpentLabel')"
        :ariaLabel="coreString('timeSpentLabel')"
        @click="toggleTimer"
      />
      <CoreMenu
        v-show="isTimerOpen"
        ref="timer"
        class="menu"
        :style="{ left: isRtl ? '16px' : 'auto', right: isRtl ? 'auto' : '16px' }"
        :raised="true"
        :isOpen="isTimerOpen"
        :containFocus="true"
        @close="closeTimer"
      >
        <template #options>

              {{ coreString('timeSpentLabel') }}

              <TimeDuration :seconds="timeSpent" />

              {{ learnString('suggestedTime') }}

            <SuggestedTime v-if="duration" :seconds="duration" />

        </template>
      </CoreMenu>
      <KIconButton
        v-for="action in barActions"
        :key="action.id"
        :data-test="`bar_${action.dataTest}`"
        :icon="action.icon"
        :color="action.iconColor"
        :tooltip="action.label"
        :ariaLabel="action.label"
        :disabled="action.disabled"
        @click="onActionClick(action.event)"
      />

        <KIconButton
          v-if="menuActions.length"
          ref="moreOptionsButton"
          data-test="moreOptionsButton"
          icon="optionsHorizontal"
          :tooltip="$tr('moreOptions')"
          :ariaLabel="$tr('moreOptions')"
          @click="toggleMenu"
        />
        <CoreMenu
          v-show="isMenuOpen"
          ref="menu"
          class="menu"
          :style="{ left: isRtl ? '16px' : 'auto', right: isRtl ? 'auto' : '16px' }"
          :raised="true"
          :isOpen="isMenuOpen"
          :containFocus="true"
          @close="closeMenu"
        >
          <template #options>
            <CoreMenuOption
              v-for="action in menuActions"
              :key="action.id"
              :data-test="`menu_${action.dataTest}`"
              :style="{ 'cursor': 'pointer' }"
              @select="onActionClick(action.event)"
            >
              <KLabeledIcon>
                <template #icon>
                  <KIcon
                    :icon="action.icon"
                    :color="action.iconColor"
                  />
                </template>

{{ action.label }}

              </KLabeledIcon>
            </CoreMenuOption>
          </template>
        </CoreMenu>

    </template>
    <MarkAsCompleteModal
      v-if="showMarkAsCompleteModal && allowMarkComplete"
      @complete="showMarkAsCompleteModal = false"
      @cancel="showMarkAsCompleteModal = false"
    />
  </UiToolbar>

</template>


fix locale select for editor

fix locale select for editor

<template>

                    <template v-if="showLabel">

                            {{ label }}

                    </template>
                    <template v-else>

                    </template>

                <template v-if="fieldProps.localized">

                        <FieldLocaleSelect
                            :locales="$form.locales"
                            :current-locale="locale"
                            :field-value="resolvedOriginalValue"
                            :is-locale-object="isLocaleObject"
                            :errors="errorsLocales"
                            @change="handleLocaleChanged"
                        />

                </template>

            <Field
                v-bind="$props"
                :id="fieldId"
                :unique-identifier="mergedErrorIdentifier"
                :field-config-identifier="mergedConfigIdentifier"
                @error="setError"
                @ok="setOk"
                @clear="clear"
                @blur="handleBlur"
                @locale-change="handleLocaleChanged"
                @input="handleValueChanged"
                ref="field"
            />

        <template v-if="stateMessage">

{{ stateMessage }}

        </template>

        <template v-if="helpMessage">

{{ helpMessage }}

        </template>

</template>


Fix add to list icon

Fix add to list icon

<template>

      <button v-if="!myList.includes(dapp.slug)" class="button -add" @click="addToMyList(dapp.slug)">
        +
        Add to my list
      </button>
      <button v-else class="button -add" @click="removeFromMyList(dapp.slug)">
        Remove from my list
      </button>

        Play game (NSFW)
        Launch ÐApp/website (NSFW)

        Play game (NSFW)
        Launch ÐApp (NSFW)

      Visit website (NSFW)

          <component :is="svgSocialComponent(social.platform)"></component>

</template>


Open detail report in new browser tab

Open detail report in new browser tab

<template>

                <fieldset>
                    <legend class="border-bottom" v-text="i18n('perfTest.report.summary')"></legend>
                </fieldset>

                    <fieldset>
                        <control-group lable_extra_class="control-label-wide non-cursor" labelMessageKey="perfTest.report.totalVusers">
                            {{ report.test.agentCount * report.test.vuserPerAgent | numFormat }}
                        </control-group>

                        <control-group lable_extra_class="control-label-wide non-cursor" labelMessageKey="perfTest.report.tps">
                            {{ report.test.tps | numFormat('0,0.0') }}
                        </control-group>

                        <control-group lable_extra_class="control-label-wide non-cursor" labelMessageKey="perfTest.report.peakTPS">
                            {{ report.test.peakTps | numFormat('0,0.0') }}
                        </control-group>

                        <control-group lable_extra_class="control-label-wide non-cursor" labelMessageKey="perfTest.report.meantime">
                            {{ report.test.meanTestTime | numFormat('0,0.00') }}
                            MS
                        </control-group>

                        <control-group lable_extra_class="control-label-wide non-cursor" labelMessageKey="perfTest.report.totalTests">
                            {{ report.test.tests + report.test.errors | numFormat }}
                        </control-group>

                        <control-group lable_extra_class="control-label-wide non-cursor" labelMessageKey="perfTest.report.successfulTests">
                            {{ report.test.tests | numFormat }}
                        </control-group>

                        <control-group lable_extra_class="control-label-wide non-cursor" labelMessageKey="perfTest.report.errors">
                            {{ report.test.errors | numFormat }}
                        </control-group>

                        <control-group lable_extra_class="control-label-wide non-cursor" labelMessageKey="perfTest.report.runtime">

                        </control-group>
                    </fieldset>

                <fieldSet>
                    <legend class="border-bottom">

                        <router-link :to="`/perftest/${report.test.id}/detail_report`"
                                     class="btn btn-primary float-right"
                                     target="_blank">

                        </router-link>
                    </legend>
                </fieldSet>

                <fieldSet>
                    <legend class="border-bottom">

                    </legend>
                </fieldSet>

                        <a :href="`${contextPath}/perftest/${report.test.id}/show_log/${log}`" target="log" title="open the log in the new window">
                            <img :src="`${contextPath}/img/open_external.png`">
                        <a :href="`${contextPath}/perftest/${report.test.id}/download_log/${log}`" v-text="log">

                <div v-if="logs.length <= 0" v-text="i18n('perfTest.report.message.noLog')">

                <fieldSet>
                    <legend class="border-bottom">

                        <button type="button" @click="leaveComment" class="btn btn-primary float-right">

                        </button>
                    </legend>
                </fieldSet>
                <textarea class="form-control" v-model="report.test.testComment" rows="3"></textarea>

</template>

<template>

                <fieldset>
                    <legend class="border-bottom" v-text="i18n('perfTest.report.summary')"></legend>
                </fieldset>

                    <fieldset>
                        <control-group lable_extra_class="control-label-wide non-cursor" labelMessageKey="perfTest.report.totalVusers">
                            {{ report.test.agentCount * report.test.vuserPerAgent | numFormat }}
                        </control-group>

                        <control-group lable_extra_class="control-label-wide non-cursor" labelMessageKey="perfTest.report.tps">
                            {{ report.test.tps | numFormat('0,0.0') }}
                        </control-group>

                        <control-group lable_extra_class="control-label-wide non-cursor" labelMessageKey="perfTest.report.peakTPS">
                            {{ report.test.peakTps | numFormat('0,0.0') }}
                        </control-group>

                        <control-group lable_extra_class="control-label-wide non-cursor" labelMessageKey="perfTest.report.meantime">
                            {{ report.test.meanTestTime | numFormat('0,0.00') }}
                            MS
                        </control-group>

                        <control-group lable_extra_class="control-label-wide non-cursor" labelMessageKey="perfTest.report.totalTests">
                            {{ report.test.tests + report.test.errors | numFormat }}
                        </control-group>

                        <control-group lable_extra_class="control-label-wide non-cursor" labelMessageKey="perfTest.report.successfulTests">
                            {{ report.test.tests | numFormat }}
                        </control-group>

                        <control-group lable_extra_class="control-label-wide non-cursor" labelMessageKey="perfTest.report.errors">
                            {{ report.test.errors | numFormat }}
                        </control-group>

                        <control-group lable_extra_class="control-label-wide non-cursor" labelMessageKey="perfTest.report.runtime">

                        </control-group>
                    </fieldset>

                <fieldSet>
                    <legend class="border-bottom">

                        <button @click="$router.push(`/perftest/${report.test.id}/detail_report`)" class="btn btn-primary float-right">

                        </button>
                    </legend>
                </fieldSet>

                <fieldSet>
                    <legend class="border-bottom">

                    </legend>
                </fieldSet>

                        <a :href="`${contextPath}/perftest/${report.test.id}/show_log/${log}`" target="log" title="open the log in the new window">
                            <img :src="`${contextPath}/img/open_external.png`">
                        <a :href="`${contextPath}/perftest/${report.test.id}/download_log/${log}`" v-text="log">

                <div v-if="logs.length <= 0" v-text="i18n('perfTest.report.message.noLog')">

                <fieldSet>
                    <legend class="border-bottom">

                        <button type="button" @click="leaveComment" class="btn btn-primary float-right">

                        </button>
                    </legend>
                </fieldSet>
                <textarea class="form-control" v-model="report.test.testComment" rows="3"></textarea>

</template>


Reset selected maps when page changes

Reset selected maps when page changes

<template>

  <StickySubheader :is-visible="Boolean(selectedMaps.length && isScrollPastHeader)">

      {{ $t('BulkActions.selected', {count: selectedMaps.length}) }}

    <MapBulkActions
      :selectedMaps="selectedMaps"
      @selectAll="selectAll"
      @deselectAll="deselectAll"></MapBulkActions>
  </StickySubheader>

      <SectionTitle class="grid-cell" :title='pageTitle' :showActionButton="!selectedMaps.length" ref="headerContainer">
        <template slot="icon">

        </template>

        <template slot="dropdownButton">
          <MapBulkActions
            :selectedMaps="selectedMaps"
            v-if="selectedMaps.length"
            @selectAll="selectAll"
            @deselectAll="deselectAll"></MapBulkActions>

          <FilterDropdown
            v-if="!selectedMaps.length"
            :filter="appliedFilter"
            :order="appliedOrder"
            :metadata="mapsMetadata"
            @filterChanged="applyFilter"/>
        </template>

        <template slot="actionButton">
          <CreateButton visualizationType="maps" >New map</CreateButton>
        </template>
      </SectionTitle>

      <div class="grid-cell" v-if="!isFetchingMaps && hasFilterApplied('mine') && totalUserEntries <= 0">
        <InitialState :title="$t(`MapsPage.zeroCase.title`)">
          <template slot="icon">

          </template>
          <template slot="description">
            <p class="text is-caption is-txtGrey" v-html="$t(`MapsPage.zeroCase.description`)">

          </template>
          <template slot="actionButton">
            <CreateButton visualizationType="maps">{{ $t(`MapsPage.zeroCase.createMap`) }}</CreateButton>
          </template>
        </InitialState>

          <MapCardFake></MapCardFake>

 0">

          <MapCard :map=map :isSelected="isMapSelected(map)" @toggleSelection="toggleSelected"></MapCard>

      <Pagination v-if="!isFetchingMaps && numResults > 0" :page=currentPage :numPages=numPages @pageChange="goToPage"></Pagination>

</template>


Fix: stationar access in 'history_direction'

<template>

        <date-range small v-model="date_range"/>

          <select-picker-m :options="services_options" actions_box multiple
                           noneText="Все услуги" search
                           uid="services_options" v-model="services"/>

          <button class="btn btn-blue-nb btn-ell dropdown-toggle" data-toggle="dropdown"
                  style="text-align: left!important;border-radius: 0;width: 100%;"
                  type="button">
             {{active_type_obj.title}}
          </button>

{{ row.title }}

        <button class="btn btn-blue-nb btn-ell" style="border-radius: 0;width: 50px;flex: 1 50px;" title="Обновить"
                @click="load_history_safe">

        </button>

        <colgroup>
          <col width="66">
          <col width="70">
          <col>
          <col width="65">
          <col :width="!!iss_pk ? 200 : 150">
          <col width="28">
        </colgroup>

          Дата
          № напр.
          Назначения
          Статус

          <input type="checkbox" v-model="all_checked"/>

        <colgroup>
          <col width="66">
          <col width="70">
          <col>
          <col width="65">
          <col :width="!!iss_pk ? 200 : 150">
          <col width="28">
        </colgroup>

          Не найдено

          Загрузка...

          {{row.date}}

              <a :href="`/mainmenu/stationar#{%22pk%22:${row.pk},%22opened_list_key%22:null,%22opened_form_pk%22:null,%22every%22:false}`" target="_blank" class="a-under">
                {{row.pk}}

            {{row.pk}}

          {{row.researches}}

            {{row.status}}*О

              <button class="btn btn-blue-nb" title="Штрих-код браслета" v-tippy
                      @click="print_hosp(row.pk)" v-if="row.has_hosp">
                 браслета
              </button>
              <button class="btn btn-blue-nb" v-if="row.status <= 1 && !row.has_hosp" @click="cancel_direction(row.pk)">
                Отмена
              </button>
              <button class="btn btn-blue-nb" v-else-if="!row.has_hosp" @click="show_results(row)">Результаты</button>
              <button class="btn btn-blue-nb" @click="print_direction(row.pk)">Направление</button>

          <input v-model="row.checked" type="checkbox"/>

    <Bottom
      v-show="checked.length > 0 || !iss_pk"
      class="bottom-picker"
      :checked="checked"
      :directions="directions"
      :iss_pk="iss_pk"
      :card_pk="patient_pk"
      :active_type="active_type"
      :kk="kk"
    />

</template>

<template>

        <date-range small v-model="date_range"/>

          <select-picker-m :options="services_options" actions_box multiple
                           noneText="Все услуги" search
                           uid="services_options" v-model="services"/>

          <button class="btn btn-blue-nb btn-ell dropdown-toggle" data-toggle="dropdown"
                  style="text-align: left!important;border-radius: 0;width: 100%;"
                  type="button">
             {{active_type_obj.title}}
          </button>

{{ row.title }}

        <button class="btn btn-blue-nb btn-ell" style="border-radius: 0;width: 50px;flex: 1 50px;" title="Обновить"
                @click="load_history_safe">

        </button>

        <colgroup>
          <col width="66">
          <col width="70">
          <col>
          <col width="65">
          <col :width="!!iss_pk ? 200 : 150">
          <col width="28">
        </colgroup>

          Дата
          № напр.
          Назначения
          Статус

          <input type="checkbox" v-model="all_checked"/>

        <colgroup>
          <col width="66">
          <col width="70">
          <col>
          <col width="65">
          <col :width="!!iss_pk ? 200 : 150">
          <col width="28">
        </colgroup>

          Не найдено

          Загрузка...

          {{row.date}}

              <a :href="`/mainmenu/stationar#{%22pk%22:${row.pk},%22opened_list_key%22:null,%22opened_form_pk%22:null,%22every%22:false}`" target="_blank" class="a-under">
                {{row.pk}}

            {{row.pk}}

          {{row.researches}}

            {{row.status}}*О

              <a :href="`/mainmenu/stationar#{%22pk%22:${row.parent.pk},%22opened_list_key%22:null,%22opened_form_pk%22:null,%22every%22:false}`"
                 :title="'Принадлежит и/б: ' + [[row.parent.pk]] + '-' + [[row.parent.parent_title]]" v-tippy target="_blank" class="btn btn-blue-nb" v-if="!!row.parent.parent_is_hosp">

              <button class="btn btn-blue-nb" title="Штрих-код браслета" v-tippy
                      @click="print_hosp(row.pk)" v-if="row.has_hosp">
                 браслета
              </button>
              <button class="btn btn-blue-nb" v-if="row.status <= 1 && !row.has_hosp" @click="cancel_direction(row.pk)">
                Отмена
              </button>
              <button class="btn btn-blue-nb" v-else-if="!row.has_hosp" @click="show_results(row)">Результаты</button>
              <button class="btn btn-blue-nb" @click="print_direction(row.pk)">Направление</button>

          <input v-model="row.checked" type="checkbox"/>

    <Bottom
      v-show="checked.length > 0 || !iss_pk"
      class="bottom-picker"
      :checked="checked"
      :directions="directions"
      :iss_pk="iss_pk"
      :card_pk="patient_pk"
      :active_type="active_type"
      :kk="kk"
    />

</template>


Updated empty staging tree wording

Updated empty staging tree wording

<template>

    <ToolBar v-if="currentChannel" color="white">
      <VToolbarSideIcon @click="drawer = true" />
      <VToolbarTitle>
        {{ $tr('deploy') }} {{ currentChannel.name }}
        <router-link :to="rootTreeRoute" class="pl-2 body-1" data-test="root-tree-link">
          {{ $tr('backToViewing') }}
        </router-link>
      </VToolbarTitle>

      <VSpacer />
      <OfflineText indicator />
      {{ $tr('reviewMode') }}
    </ToolBar>
    <MainNavigationDrawer v-model="drawer" />

    <VContainer fluid fill-height class="pa-0">
      <LoadingText v-if="isLoading" />
      <VLayout
        v-else-if="isEmpty"
        justify-center
        fill-height
        style="padding-top: 10%;"
      >
        <VFlex class="text-xs-center">

            {{ $tr('emptyChannelText') }}

            {{ $tr('emptyChannelSubText') }}

        </VFlex>
      </VLayout>

      <VLayout v-else row>
        <ResizableNavigationDrawer
          permanent
          clipped
          localName="topic-staging-tree"
          class="hidden-xs-only"
          :maxWidth="400"
          :minWidth="200"
          :style="{ backgroundColor: $vuetify.theme.backgroundColor }"
        >
          <VLayout row>
            <IconButton
              icon="collapse_all"
              :text="$tr('collapseAllButton')"
              @click="collapseAll"
            >
              $vuetify.icons.collapse_all
            </IconButton>
            <VSpacer />
            <IconButton
              :disabled="!ancestors || !ancestors.length"
              icon="gps_fixed"
              :text="$tr('openCurrentLocationButton')"
              @click="jumpToLocation"
            />
          </VLayout>

            <StudioTree
              :treeId="stagingId"
              :nodeId="stagingId"
              :selectedNodeId="nodeId"
              :onNodeClick="onTreeTopicClick"
              :root="true"
            />

        </ResizableNavigationDrawer>

        <VContainer fluid class="pa-0 ma-0" :style="{ backgroundColor: 'white' }">
          <VToolbar v-if="breadcrumbsItems.length" dense color="transparent" flat>
            <Breadcrumbs :items="breadcrumbsItems" class="pa-0">
              <template #item="props">

                  {{ props.item.title }}

              </template>
            </Breadcrumbs>
          </VToolbar>

          <VLayout fill-height :style="{'border-top': '1px solid #eee'}">
            <VFlex v-if="!children.length" class="subheading text-xs-center pa-4">
              {{ $tr('emptyTopicText') }}
            </VFlex>
            <VList
              v-else
              shrink
              class="pa-0"
              :style="{width: '100%', backgroundColor: $vuetify.theme.backgroundColor}"
            >
              <template v-for="child in children">
                <ContentNodeListItem
                  :key="child.id"
                  :node="child"
                  :compact="isCompactViewMode"
                  data-test="node-list-item"
                  @topicChevronClick="goToTopic(child.id)"
                  @click.native="onNodeClick(child)"
                  @dblclick.native="onNodeClick(child)"
                >
                  <template v-if="isTopic(child)" #actions-end>
                    <VListTileAction>
                      <IconButton
                        color="primary"
                        icon="info"
                        :text="$tr('viewDetails')"
                        data-test="btn-info"
                        @click="goToNodeDetail(child.id)"
                      />
                    </VListTileAction>
                  </template>
                </ContentNodeListItem>
              </template>
            </VList>

            <ResourceDrawer
              :nodeId="detailNodeId"
              :channelId="currentChannel.id"
              class="grow"
              data-test="resource-detail-drawer"
              @close="closePanel"
            />
          </VLayout>
        </VContainer>

        <BottomBar>
          <VLayout align-center justify-space-between row fill-height wrap>
            <VFlex>

                {{ $tr('totalResources') }}:
                {{ resourcesCountStaged }}
                <Diff :value="resourcesCountDiff" class="font-weight-bold">
                  <template slot-scope="{ sign, value }">
                    ({{ sign }}{{ value ? value : '-' }})
                  </template>
                </Diff>

                {{ $tr('totalSize') }}:
                {{ formatFileSize(fileSizeStaged) }}
                <Diff :value="fileSizeDiff" class="font-weight-bold">
                  <template slot-scope="{ sign, value }">
                    ({{ sign }}{{ value ? formatFileSize(value) : '-' }})
                  </template>
                </Diff>

            </VFlex>

            <VFlex class="bottom-bar-btns">
              <VDialog
                v-model="displaySummaryDetailsDialog"
                width="500"
              >
                <template v-slot:activator="{ on }">
                  <VBtn
                    flat
                    data-test="display-summary-details-dialog-btn"
                    v-on="on"
                  >
                    {{ $tr('openSummaryDetailsDialogBtn') }}
                  </VBtn>
                </template>

                <VCard data-test="summary-details-dialog">
                  <VCardTitle primary-title class="title font-weight-bold">
                    {{ $tr('summaryDetailsDialogTitle') }}
                  </VCardTitle>
                  <VCardText>
                    <DiffTable :stagingDiff="stagingDiff" />
                  </VCardText>
                  <VCardActions>
                    <VSpacer />
                    <VBtn
                      color="primary"
                      @click="displaySummaryDetailsDialog = false"
                    >
                      {{ $tr('closeSummaryDetailsDialogBtn') }}
                    </VBtn>
                  </VCardActions>
                </VCard>
              </VDialog>

              <VDialog
                v-model="displayDeployDialog"
                width="500"
              >
                <template v-slot:activator="{ on }">
                  <VBtn
                    color="primary"
                    data-test="display-deploy-dialog-btn"
                    v-on="on"
                  >
                    {{ $tr('deployChannel') }}
                  </VBtn>
                </template>

                <VCard data-test="deploy-dialog">
                  <VCardTitle primary-title class="title font-weight-bold">
                    {{ $tr('deployChannel') }}
                  </VCardTitle>
                  <VCardText>

{{ $tr('deployDialogDescription') }}

                    <VLayout data-test="deploy-dialog-live-resources">
                      <VFlex xs4 class="font-weight-bold">
                        {{ $tr('liveResources') }}:
                      </VFlex>
                      <VFlex>
                        {{ $tr('topicsCount', { count: topicsCountLive }) }},
                        {{ $tr('resourcesCount', { count: resourcesCountLive }) }}
                      </VFlex>
                    </VLayout>

                    <VLayout data-test="deploy-dialog-staged-resources">
                      <VFlex xs4 class="font-weight-bold">
                        {{ $tr('stagedResources') }}:
                      </VFlex>
                      <VFlex>
                        {{ $tr('topicsCount', { count: topicsCountStaged }) }},
                        {{ $tr('resourcesCount', { count: resourcesCountStaged }) }}
                      </VFlex>
                    </VLayout>
                  </VCardText>
                  <VCardActions>
                    <VSpacer />
                    <VBtn
                      flat
                      @click="displayDeployDialog = false"
                    >
                      {{ $tr('cancelDeployBtn') }}
                    </VBtn>
                    <VBtn
                      color="primary"
                      data-test="deploy-btn"
                      @click="onDeployChannelClick"
                    >
                      {{ $tr('confirmDeployBtn') }}
                    </VBtn>
                  </VCardActions>
                </VCard>
              </VDialog>
            </VFLex>
          </VLayout>
        </BottomBar>
      </VLayout>
    </VContainer>

</template>


added demo to the docs

added demo to the docs

<template>

Simple Calendars

      Show highlights, dots, bars and custom popovers

Highlights

        <v-calendar :attributes="highlights" ref="cal" />

Dots

        <v-calendar :attributes="dots" />

Bars

        <v-calendar :attributes="bars" />

Popovers

        <v-calendar :attributes="popovers">
          <template
            v-slot:day-popover="{
              day,
              format,
              masks,
              attributes,
              updateLayout,
            }"
          >

              {{
                format(day.date, masks.dayPopover)
              }}

              <popover-row
                v-for="{
                  key,
                  customData,
                  highlight,
                  dot,
                  bar,
                } in attributes.filter(a => a.customData)"
                :key="key"
                :attribute="{ highlight, dot, bar }"
              >

                    <input
                      v-if="customData.id === editId"
                      class="appearance-none bg-white border px-1 text-black"
                      :style="{ minWidth: '180px' }"
                      v-model="customData.description"
                      @keyup.enter="editId = 0"
                      v-focus-select
                    />

                      <input type="checkbox" v-model="customData.isComplete" />

                      {{ customData.description }}

                    <svg
                      v-if="editId !== customData.id"
                      class="fill-current text-blue-300"
                      viewBox="0 0 20 20"
                      width="12"
                      height="12"
                    >
                      <path
                        d="M12.3 3.7l4 4L4 20H0v-4L12.3 3.7zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z"
                      ></path>
                    </svg>

                    <svg
                      v-else
                      class="fill-current text-green-300"
                      viewBox="0 0 20 20"
                      width="12"
                      height="12"
                    >
                      <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                    </svg>

                    <svg
                      class="fill-current text-red-300"
                      viewBox="0 0 20 20"
                      width="12"
                      height="12"
                    >
                      <path
                        d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"
                      ></path>
                    </svg>

              </popover-row>

              + Add Todo

          </template>
        </v-calendar>

Week numbers

          <v-calendar show-weeknumbers />

</template>

<template>

Simple Calendars

      Show highlights, dots, bars and custom popovers

Highlights

        <v-calendar :attributes="highlights" ref="cal" />

Dots

        <v-calendar :attributes="dots" />

Bars

        <v-calendar :attributes="bars" />

Popovers

        <v-calendar :attributes="popovers">
          <template
            v-slot:day-popover="{
              day,
              format,
              masks,
              attributes,
              updateLayout,
            }"
          >

              {{
                format(day.date, masks.dayPopover)
              }}

              <popover-row
                v-for="{
                  key,
                  customData,
                  highlight,
                  dot,
                  bar,
                } in attributes.filter(a => a.customData)"
                :key="key"
                :attribute="{ highlight, dot, bar }"
              >

                    <input
                      v-if="customData.id === editId"
                      class="appearance-none bg-white border px-1 text-black"
                      :style="{ minWidth: '180px' }"
                      v-model="customData.description"
                      @keyup.enter="editId = 0"
                      v-focus-select
                    />

                      <input type="checkbox" v-model="customData.isComplete" />

                      {{ customData.description }}

                    <svg
                      v-if="editId !== customData.id"
                      class="fill-current text-blue-300"
                      viewBox="0 0 20 20"
                      width="12"
                      height="12"
                    >
                      <path
                        d="M12.3 3.7l4 4L4 20H0v-4L12.3 3.7zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z"
                      ></path>
                    </svg>

                    <svg
                      v-else
                      class="fill-current text-green-300"
                      viewBox="0 0 20 20"
                      width="12"
                      height="12"
                    >
                      <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                    </svg>

                    <svg
                      class="fill-current text-red-300"
                      viewBox="0 0 20 20"
                      width="12"
                      height="12"
                    >
                      <path
                        d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"
                      ></path>
                    </svg>

              </popover-row>

              + Add Todo

          </template>
        </v-calendar>

</template>


fix: #247 DataTable - mouse wheel scroll not working on Firefox

<template>

        <button v-if="config.refresh && !refreshing" class="primary clear" @click="refresh">
          refresh
        </button>
        <button v-if="refreshing" class="disabled">
          cached
        </button>
        <button v-if="config.filter" class="primary clear" @click="toolbar = 'filter'">
          filter_list
        </button>
        <q-select
          type="toggle"
          v-if="config.columnPicker"
          v-model="columnSelection"
          :options="columnSelectionOptions"
          static-label="Columns"
          class="text-right"
          style="margin-left: 10px"
        ></q-select>

        {{ rowsSelected }} item 1">s selected.
        <button class="primary clear small" @click="clearSelection()">Clear</button>

        <slot name="selection" :rows="selectedRows"></slot>

    <template v-if="responsive">

              <q-checkbox v-if="config.selection === 'multiple'" v-model="rowSelection[index]"></q-checkbox>
              <q-radio v-else v-model="rowSelection[0]" :val="index"></q-radio>

              <slot v-if="$scopedSlots['col-'+col.field]" :name="'col-'+col.field" :row="row" :col="col" :data="row[col.field]"></slot>

    </template>

              <slot v-if="$scopedSlots['col-'+col.field]" :name="'col-'+col.field" :row="row" :col="col" :data="row[col.field]"></slot>

      <template v-if="!message && (leftStickyColumns || config.selection)">

                <q-checkbox v-if="config.selection === 'multiple'" v-model="rowSelection[index]"></q-checkbox>
                <q-radio v-else v-model="rowSelection[0]" :val="index"></q-radio>

                <slot v-if="$scopedSlots['col-'+cols[n-1].field]" :name="'col-'+cols[n-1].field" :row="row" :col="cols[n-1]" :data="row[cols[n-1].field]"></slot>

      </template>

      <template v-if="!message && rightStickyColumns">

                <slot v-if="$scopedSlots['col-'+rightCols[n-1].field]" :name="'col-'+rightCols[n-1].field" :row="row" :col="rightCols[n-1]" :data="row[rightCols[n-1].field]"></slot>

      </template>

</template>


Fix email type bug

Fix email type bug


docs(examples): fix data-iterator usage icons

<template>
  <v-container class="fill-height">
    <v-data-iterator
      :footer-props="{ itemsPerPageOptions }"
      :items="items"
      :items-per-page.sync="itemsPerPage"
      :page="page"
      :search="search"
      :sort-by="sortBy.toLowerCase()"
      :sort-desc="sortDesc"
      v-bind="$attrs"
    >
      <template v-slot:header>
        <v-toolbar
          dark
          color="blue darken-3"
          class="mb-1"
        >
          <v-text-field
            v-model="search"
            clearable
            flat
            solo-inverted
            hide-details
            prepend-inner-icon="mdi-magnify"
            label="Search"
          ></v-text-field>
          <template v-if="$vuetify.breakpoint.mdAndUp">
            <v-spacer></v-spacer>
            <v-select
              v-model="sortBy"
              class="mx-2"
              flat
              solo-inverted
              hide-details
              :items="keys"
              prepend-inner-icon="mdi-magnify"
              label="Sort by"
            ></v-select>
            <v-spacer></v-spacer>
            <v-btn-toggle
              v-model="sortDesc"
              mandatory
            >
              <v-btn
                large
                depressed
                color="blue"
                :value="false"
              >
                <v-icon>mdi-arrow-up</v-icon>
              </v-btn>
              <v-btn
                large
                depressed
                color="blue"
                :value="true"
              >
                <v-icon>mdi-arrow-down</v-icon>
              </v-btn>
            </v-btn-toggle>
          </template>
        </v-toolbar>
      </template>
      <template v-slot:default="props">
        <v-row>
          <v-col
            v-for="item in props.items"
            :key="item.name"
            cols="12"
            sm="6"
          >
            <v-card>
              <v-card-title>
                <h5>{{ item.name }}</h5>
              </v-card-title>
              <v-divider></v-divider>
              <v-list dense>
                <v-list-item>
                  <v-row justify="space-between">
                    <v-col cols="auto">
                      <v-list-item-content>Calories:</v-list-item-content>
                    </v-col>
                    <v-col cols="auto">
                      <v-list-item-content>{{ item.calories }}</v-list-item-content>
                    </v-col>
                  </v-row>
                </v-list-item>
                <v-list-item>
                  <v-row justify="space-between">
                    <v-col cols="auto">
                      <v-list-item-content>Fat:</v-list-item-content>
                    </v-col>
                    <v-col cols="auto">
                      <v-list-item-content>{{ item.fat }}</v-list-item-content>
                    </v-col>
                  </v-row>
                </v-list-item>
                <v-list-item>
                  <v-row justify="space-between">
                    <v-col cols="auto">
                      <v-list-item-content>Carbs:</v-list-item-content>
                    </v-col>
                    <v-col cols="auto">
                      <v-list-item-content>{{ item.carbs }}</v-list-item-content>
                    </v-col>
                  </v-row>
                </v-list-item>
                <v-list-item>
                  <v-row justify="space-between">
                    <v-col cols="auto">
                      <v-list-item-content>Protein:</v-list-item-content>
                    </v-col>
                    <v-col cols="auto">
                      <v-list-item-content>{{ item.protein }}</v-list-item-content>
                    </v-col>
                  </v-row>
                </v-list-item>
                <v-list-item>
                  <v-row justify="space-between">
                    <v-col cols="auto">
                      <v-list-item-content>Sodium:</v-list-item-content>
                    </v-col>
                    <v-col cols="auto">
                      <v-list-item-content>{{ item.sodium }}</v-list-item-content>
                    </v-col>
                  </v-row>
                </v-list-item>
                <v-list-item>
                  <v-row justify="space-between">
                    <v-col cols="auto">
                      <v-list-item-content>Calcium:</v-list-item-content>
                    </v-col>
                    <v-col cols="auto">
                      <v-list-item-content>{{ item.calcium }}</v-list-item-content>
                    </v-col>
                  </v-row>
                </v-list-item>
                <v-list-item>
                  <v-row justify="space-between">
                    <v-col cols="auto">
                      <v-list-item-content>Iron:</v-list-item-content>
                    </v-col>
                    <v-col cols="auto">
                      <v-list-item-content>{{ item.iron }}</v-list-item-content>
                    </v-col>
                  </v-row>
                </v-list-item>
              </v-list>
            </v-card>
          </v-col>
        </v-row>
      </template>
    </v-data-iterator>
  </v-container>
</template>

<script>
  export default {
    name: 'Usage',

    inheritAttrs: false,

    data: () => ({
      itemsPerPageOptions: [4, 8, 12],
      search: '',
      sortDesc: false,
      page: 1,
      itemsPerPage: 4,
      sortBy: 'name',
      keys: [
        'Name',
        'Calories',
        'Fat',
        'Carbs',
        'Protein',
        'Sodium',
        'Calcium',
        'Iron',
      ],
      items: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          sodium: 87,
          calcium: '14%',
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          sodium: 129,
          calcium: '8%',
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          sodium: 337,
          calcium: '6%',
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          sodium: 413,
          calcium: '3%',
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          sodium: 327,
          calcium: '7%',
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          sodium: 50,
          calcium: '0%',
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          sodium: 38,
          calcium: '0%',
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          sodium: 562,
          calcium: '0%',
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          sodium: 326,
          calcium: '2%',
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          sodium: 54,
          calcium: '12%',
          iron: '6%',
        },
      ],
      defaults: {
        'disable-filtering': false,
        'disable-pagination': false,
        'disable-sort': false,
        'hide-default-footer': false,
      },
      options: {
        booleans: [
          'disable-filtering',
          'disable-pagination',
          'disable-sort',
          'hide-default-footer',
        ],
      },
      tabs: [],
    }),
  }
</script>

<template>
  <v-container class="fill-height">
    <v-data-iterator
      :footer-props="{ itemsPerPageOptions }"
      :items="items"
      :items-per-page.sync="itemsPerPage"
      :page="page"
      :search="search"
      :sort-by="sortBy.toLowerCase()"
      :sort-desc="sortDesc"
      v-bind="$attrs"
    >
      <template v-slot:header>
        <v-toolbar
          dark
          color="blue darken-3"
          class="mb-1"
        >
          <v-text-field
            v-model="search"
            clearable
            flat
            solo-inverted
            hide-details
            prepend-inner-icon="search"
            label="Search"
          ></v-text-field>
          <template v-if="$vuetify.breakpoint.mdAndUp">
            <v-spacer></v-spacer>
            <v-select
              v-model="sortBy"
              class="mx-2"
              flat
              solo-inverted
              hide-details
              :items="keys"
              prepend-inner-icon="search"
              label="Sort by"
            ></v-select>
            <v-spacer></v-spacer>
            <v-btn-toggle
              v-model="sortDesc"
              mandatory
            >
              <v-btn
                large
                depressed
                color="blue"
                :value="false"
              >
                <v-icon>mdi-arrow-up</v-icon>
              </v-btn>
              <v-btn
                large
                depressed
                color="blue"
                :value="true"
              >
                <v-icon>mdi-arrow-down</v-icon>
              </v-btn>
            </v-btn-toggle>
          </template>
        </v-toolbar>
      </template>
      <template v-slot:default="props">
        <v-row>
          <v-col
            v-for="item in props.items"
            :key="item.name"
            cols="12"
            sm="6"
          >
            <v-card>
              <v-card-title>
                <h5>{{ item.name }}</h5>
              </v-card-title>
              <v-divider></v-divider>
              <v-list dense>
                <v-list-item>
                  <v-row justify="space-between">
                    <v-col cols="auto">
                      <v-list-item-content>Calories:</v-list-item-content>
                    </v-col>
                    <v-col cols="auto">
                      <v-list-item-content>{{ item.calories }}</v-list-item-content>
                    </v-col>
                  </v-row>
                </v-list-item>
                <v-list-item>
                  <v-row justify="space-between">
                    <v-col cols="auto">
                      <v-list-item-content>Fat:</v-list-item-content>
                    </v-col>
                    <v-col cols="auto">
                      <v-list-item-content>{{ item.fat }}</v-list-item-content>
                    </v-col>
                  </v-row>
                </v-list-item>
                <v-list-item>
                  <v-row justify="space-between">
                    <v-col cols="auto">
                      <v-list-item-content>Carbs:</v-list-item-content>
                    </v-col>
                    <v-col cols="auto">
                      <v-list-item-content>{{ item.carbs }}</v-list-item-content>
                    </v-col>
                  </v-row>
                </v-list-item>
                <v-list-item>
                  <v-row justify="space-between">
                    <v-col cols="auto">
                      <v-list-item-content>Protein:</v-list-item-content>
                    </v-col>
                    <v-col cols="auto">
                      <v-list-item-content>{{ item.protein }}</v-list-item-content>
                    </v-col>
                  </v-row>
                </v-list-item>
                <v-list-item>
                  <v-row justify="space-between">
                    <v-col cols="auto">
                      <v-list-item-content>Sodium:</v-list-item-content>
                    </v-col>
                    <v-col cols="auto">
                      <v-list-item-content>{{ item.sodium }}</v-list-item-content>
                    </v-col>
                  </v-row>
                </v-list-item>
                <v-list-item>
                  <v-row justify="space-between">
                    <v-col cols="auto">
                      <v-list-item-content>Calcium:</v-list-item-content>
                    </v-col>
                    <v-col cols="auto">
                      <v-list-item-content>{{ item.calcium }}</v-list-item-content>
                    </v-col>
                  </v-row>
                </v-list-item>
                <v-list-item>
                  <v-row justify="space-between">
                    <v-col cols="auto">
                      <v-list-item-content>Iron:</v-list-item-content>
                    </v-col>
                    <v-col cols="auto">
                      <v-list-item-content>{{ item.iron }}</v-list-item-content>
                    </v-col>
                  </v-row>
                </v-list-item>
              </v-list>
            </v-card>
          </v-col>
        </v-row>
      </template>
    </v-data-iterator>
  </v-container>
</template>

<script>
  export default {
    name: 'Usage',

    inheritAttrs: false,

    data: () => ({
      itemsPerPageOptions: [4, 8, 12],
      search: '',
      sortDesc: false,
      page: 1,
      itemsPerPage: 4,
      sortBy: 'name',
      keys: [
        'Name',
        'Calories',
        'Fat',
        'Carbs',
        'Protein',
        'Sodium',
        'Calcium',
        'Iron',
      ],
      items: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          sodium: 87,
          calcium: '14%',
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          sodium: 129,
          calcium: '8%',
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          sodium: 337,
          calcium: '6%',
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          sodium: 413,
          calcium: '3%',
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          sodium: 327,
          calcium: '7%',
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          sodium: 50,
          calcium: '0%',
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          sodium: 38,
          calcium: '0%',
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          sodium: 562,
          calcium: '0%',
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          sodium: 326,
          calcium: '2%',
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          sodium: 54,
          calcium: '12%',
          iron: '6%',
        },
      ],
      defaults: {
        'disable-filtering': false,
        'disable-pagination': false,
        'disable-sort': false,
        'hide-default-footer': false,
      },
      options: {
        booleans: [
          'disable-filtering',
          'disable-pagination',
          'disable-sort',
          'hide-default-footer',
        ],
      },
      tabs: [],
    }),
  }
</script>


show preserved routes

show preserved routes

<template>

    <transition mode="out-in" name="fade">

        <button class="delete" @click="hideNotifications"></button>{{notification.message}}

    </transition>

Routes Builder

            Path

              <input class="input" type="text" v-model="form.path" placeholder="Ex: /path">

            Template

              <select v-model="form.template">
                <option v-for="(template, i) in templates" :key="i" :value="template.filename">
                  {{template.displayName}}
                </option>
              </select>

            Content

              <select v-model="form.content">
                <option v-for="(content, i) in contents" :key="i" :value="content['.key']">
                  {{content.title}}
                </option>
                <option value="none">No Content</option>
              </select>

              <button v-if="form.action === 'add'" class="button is-info" @click="addRoute">
                Add
              </button>
              <button v-if="form.action === 'update'" class="button is-info" @click="updateRoute">
                Update
              </button>

              <button class="button" @click="clear">Cancel</button>

Preserved routes:

              <router-link :to="route">{{route}}</router-link>

Dynamic routes:

              Path:
              <router-link :to="route.path">{{route.path}}</router-link>

                Template: {{getTemplateDisplayName(route.template)}} |
                Content: {{selectContentById(route.content).title || 'No Content'}}

</template>

<template>

    <transition mode="out-in" name="fade">

        <button class="delete" @click="hideNotifications"></button>{{notification.message}}

    </transition>

Routes Builder

            Path

              <input class="input" type="text" v-model="form.path" placeholder="Ex: /path">

            Template

              <select v-model="form.template">
                <option v-for="(template, i) in templates" :key="i" :value="template.filename">
                  {{template.displayName}}
                </option>
              </select>

            Content

              <select v-model="form.content">
                <option v-for="(content, i) in contents" :key="i" :value="content['.key']">
                  {{content.title}}
                </option>
                <option value="none">No Content</option>
              </select>

              <button v-if="form.action === 'add'" class="button is-info" @click="addRoute">
                Add
              </button>
              <button v-if="form.action === 'update'" class="button is-info" @click="updateRoute">
                Update
              </button>

              <button class="button" @click="clear">Cancel</button>

              Path:
              <router-link :to="route.path">{{route.path}}</router-link>

                Template: {{getTemplateDisplayName(route.template)}} |
                Content: {{selectContentById(route.content).title || 'No Content'}}

</template>


chore(dev): setup provide/inject demo

chore(dev): setup provide/inject demo