#310 change job setting layout

#310 change job setting layout

<template>

        <el-form :model="jobSettingInfo" :rules="rules" ref="jobSettingInfo" label-width="350px">
            <el-collapse v-model="activeNames">
                <el-collapse-item name="1">
                    <template slot="title">
                        基本配置<el-button size="small" type="primary" icon="el-icon-refresh" style="margin-left: 20px;">更新</el-button>
                    </template>

                        <el-row>
                            <el-col :span="18">
                                <el-form-item prop="jobClass" label="作业实现类" required>
                                    <el-input v-model="jobSettingInfo.jobClass"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="18">
                                <el-form-item prop="cron" label="Cron">
                                    <el-input v-model="jobSettingInfo.cron"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <el-form-item label-width="10">
                                    预测
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item prop="shardNum" label="作业分片数">
                                    <el-input v-model="jobSettingInfo.shardNum"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="16">
                                <el-form-item prop="localMode" label="本地模式">
                                    <el-switch v-model="jobSettingInfo.localMode"></el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="18">
                                <el-form-item prop="abc" label="分片序列号/参数对照表">
                                    <el-input type="textarea" v-model="jobSettingInfo.abc"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="18">
                                <el-form-item prop="customParams" label="自定义参数">
                                    <el-input type="textarea" v-model="jobSettingInfo.customParams"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item prop="executor" label="优先executor">
                                    <el-input v-model="jobSettingInfo.executor"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="16">
                                <el-form-item prop="onlyExecutor" label="只使用优先executor">
                                    <el-switch v-model="jobSettingInfo.localMode"></el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>

                </el-collapse-item>
                <el-collapse-item name="2">
                    <template slot="title">高级配置</template>

                        <el-row>
                            <el-col :span="9">
                                <el-form-item prop="timeoutAlarm" label="超时告警(秒)">
                                    <el-input v-model="jobSettingInfo.timeoutAlarm"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9">
                                <el-form-item prop="timeoutKill" label="超时强杀(秒)">
                                    <el-input v-model="jobSettingInfo.timeoutKill"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="18">
                                <el-form-item prop="group" label="所属分组">
                                    <el-input v-model="jobSettingInfo.group"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="9">
                                <el-form-item prop="load" label="作业负荷">
                                    <el-input v-model="jobSettingInfo.load"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9">
                                <el-form-item prop="processInteval" label="统计处理间隔">
                                    <el-input v-model="jobSettingInfo.processInteval"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="9">
                                <el-form-item prop="timeZone" label="时区">
                                    <el-input v-model="jobSettingInfo.timeZone"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9">
                                <el-form-item prop="dependJob" label="依赖作业">
                                    <el-input v-model="jobSettingInfo.dependJob"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="9">
                                <el-form-item prop="consoleOutputLog" label="显示控制台输出日志">
                                    <el-switch v-model="jobSettingInfo.consoleOutputLog"></el-switch>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9">
                                <el-form-item prop="operateStatus" label="上报运行状态">
                                    <el-switch v-model="jobSettingInfo.operateStatus"></el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>

                </el-collapse-item>
            </el-collapse>
        </el-form>

</template>

<template>

        <el-form :model="jobSettingInfo" :rules="rules" ref="jobSettingInfo" label-width="160px">
            <el-collapse v-model="activeNames">
                <el-collapse-item name="1">
                    <template slot="title">
                        基本配置<el-button size="small" type="primary" icon="el-icon-refresh" style="margin-left: 20px;">更新</el-button>
                    </template>

                        <el-row>
                            <el-col :span="22">
                                <el-form-item prop="jobClass" label="作业实现类" required>
                                    <el-input v-model="jobSettingInfo.jobClass"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item prop="cron" label="Cron">
                                    <el-input v-model="jobSettingInfo.cron"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <el-form-item label-width="10">
                                    预测
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item prop="shardNum" label="作业分片数">
                                    <el-input v-model="jobSettingInfo.shardNum"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="16">
                                <el-form-item prop="localMode" label="本地模式">
                                    <el-switch v-model="jobSettingInfo.localMode"></el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="22">
                                <el-form-item prop="abc" label="分片序列号/参数对照表">
                                    <el-input type="textarea" v-model="jobSettingInfo.abc"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="22">
                                <el-form-item prop="customParams" label="自定义参数">
                                    <el-input type="textarea" v-model="jobSettingInfo.customParams"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item prop="executor" label="优先executor">
                                    <el-input v-model="jobSettingInfo.executor"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="16">
                                <el-form-item prop="onlyExecutor" label="只使用优先executor">
                                    <el-switch v-model="jobSettingInfo.localMode"></el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>

                </el-collapse-item>
                <el-collapse-item name="2">
                    <template slot="title">高级配置</template>

                        <el-row>
                            <el-col :span="11">
                                <el-form-item prop="timeoutAlarm" label="超时告警(秒)">
                                    <el-input v-model="jobSettingInfo.timeoutAlarm"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item prop="timeoutKill" label="超时强杀(秒)">
                                    <el-input v-model="jobSettingInfo.timeoutKill"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="22">
                                <el-form-item prop="group" label="所属分组">
                                    <el-input v-model="jobSettingInfo.group"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item prop="load" label="作业负荷">
                                    <el-input v-model="jobSettingInfo.load"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item prop="processInteval" label="统计处理间隔">
                                    <el-input v-model="jobSettingInfo.processInteval"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item prop="timeZone" label="时区">
                                    <el-input v-model="jobSettingInfo.timeZone"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item prop="dependJob" label="依赖作业">
                                    <el-input v-model="jobSettingInfo.dependJob"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item prop="consoleOutputLog" label="显示控制台输出日志">
                                    <el-switch v-model="jobSettingInfo.consoleOutputLog"></el-switch>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11">
                                <el-form-item prop="operateStatus" label="上报运行状态">
                                    <el-switch v-model="jobSettingInfo.operateStatus"></el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>

                </el-collapse-item>
            </el-collapse>
        </el-form>

</template>


change query links in header

change query links in header

<template>
  <v-toolbar :dense="this.$vuetify.breakpoint.sm">
    <router-link to="/" class="mt-2">

    </router-link>
    <v-toolbar-title class="mr-4 ml-3 hidden-xs-only">
      <router-link to="/">
        Elasticvue
      </router-link>
    </v-toolbar-title>

      <v-icon small>{{connectionIcon}}</v-icon>
      {{clusterInfo}}
      <v-chip :class="clusterHealthClasses" title="Health" small>{{clusterHealth}}</v-chip>
      <reload-button id="header-reload-button" :action="getHealth" :default-setting="5"/>

    <v-spacer/>

    <v-toolbar-items>
      <v-btn id="navbar_home" flat to="/" exact>Home</v-btn>
      <v-btn id="navbar_nodes" flat to="/nodes">Nodes</v-btn>
      <v-btn id="navbar_indices" flat to="/indices">Indices</v-btn>
      <v-btn id="navbar_search" flat to="/search">Search</v-btn>

      <v-menu offset-y>
        <v-btn id="navbar_query" slot="activator" flat>
          Query
          <v-icon>arrow_drop_down</v-icon>
        </v-btn>

        <v-list>
          <v-list-tile to="/query/rest">
            <v-list-tile-content>
              <v-list-tile-title>
                REST
              </v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>

          <v-list-tile to="/query/api_browser">
            <v-list-tile-content>
              <v-list-tile-title>
                API BROWSER
              </v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-menu>

      <v-btn id="navbar_utilities" flat to="/utilities">Utilities</v-btn>
    </v-toolbar-items>
  </v-toolbar>
</template>

<template>
  <v-toolbar :dense="this.$vuetify.breakpoint.sm">
    <router-link to="/" class="mt-2">

    </router-link>
    <v-toolbar-title class="mr-4 ml-3 hidden-xs-only">
      <router-link to="/">
        Elasticvue
      </router-link>
    </v-toolbar-title>

      <v-icon small>{{connectionIcon}}</v-icon>
      {{clusterInfo}}
      <v-chip :class="clusterHealthClasses" title="Health" small>{{clusterHealth}}</v-chip>
      <reload-button id="header-reload-button" :action="getHealth" :default-setting="5"/>

    <v-spacer/>

    <v-toolbar-items>
      <v-btn id="navbar_home" flat to="/" exact>Home</v-btn>
      <v-btn id="navbar_nodes" flat to="/nodes">Nodes</v-btn>
      <v-btn id="navbar_indices" flat to="/indices">Indices</v-btn>
      <v-btn id="navbar_search" flat to="/search">Search</v-btn>

      <v-menu offset-y>
        <v-btn id="navbar_query" slot="activator" flat>
          Query
          <v-icon>arrow_drop_down</v-icon>
        </v-btn>

        <v-list>
          <v-list-tile @click="$router.push('/query/rest')">
            <v-list-tile-content>
              <v-list-tile-title>
                REST
              </v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>

          <v-list-tile @click="$router.push('/query/api_browser')">
            <v-list-tile-content>
              <v-list-tile-title>
                API BROWSER
              </v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-menu>

      <v-btn id="navbar_utilities" flat to="/utilities">Utilities</v-btn>
    </v-toolbar-items>
  </v-toolbar>
</template>


fix dialog

fix dialog

<template>
  <overlay transition="fade"
           transition-duration="300"
           ref="overlay"
           @after-enter="afterMaskEnter">

      <transition name="bounce-zoom-in"
                  @enter="onDialogEnter"
                  @after-leave="afterDialogLeave">
        <div :class="['dialog', `-${state}`, {'-freezing': freezeScreen}]"
             ref="dialog"
             v-if="entered">
          <icon-close class="dialog-close"
                      @click.native="close"></icon-close>

            <i :class="['dialog-icon', `${config$.iconClassPrefix}${icon}`]"
               v-if="icon"
               :style="{ fontSize: iconSize }">
            {{title}}

{{message}}

            <k-button :state="primaryButton == 'confirm' ? state : 'default'"
                      @click="onConfirmClick">{{confirmText}}</k-button>
            <k-button :state="primaryButton == 'cancel' ? state : 'default'"
                      @click="onCancelClick"
                      v-if="!hideCancelButton">{{cancelText}}</k-button>

      </transition>

  </overlay>
</template>

<template>
  <overlay transition="fade"
           transition-duration="300"
           ref="overlay"
           @after-enter="afterMaskEnter">

      <transition name="bounce-zoom-in"
                  @enter="onDialogEnter"
                  @after-leave="afterDialogLeave">
        <div :class="['dialog', `-${state}`]"
             ref="dialog"
             v-if="entered">
          <icon-close class="dialog-close"
                      @click.native="close"></icon-close>

            <i :class="['dialog-icon', `${config$.iconClassPrefix}${icon}`]"
               v-if="icon"
               :style="{ fontSize: iconSize }">
            {{title}}

{{message}}

            <k-button :state="primaryButton == 'confirm' ? state : 'default'"
                      @click="onConfirmClick">{{confirmText}}</k-button>
            <k-button :state="primaryButton == 'cancel' ? state : 'default'"
                      @click="onCancelClick"
                      v-if="!hideCancelButton">{{cancelText}}</k-button>

      </transition>

  </overlay>
</template>


export: add remove state button

export: add remove state button

<template>

          Name:

          <input id="export-name" type="text" v-model="title" />

          Paper size:

          <select v-model="paperSize">
                    <option v-for="size in paperSizes" v-bind:value="$key">ISO {{ $key }} ({{ size[0] }}mm × {{ size[1] }}mm)</option>
                  </select>

          Download:

JPG

PDF

GeoTIFF

          Vector format:

          <select name="select" v-model="vectorFormat">
            <option value="json" selected>GeoJSON (web GIS)</option>
            <option value="kml">KML (Google Earth)</option>
            <option value="geopkg">Geopackage (high performance)</option>
            <option value="shapefile">Shapefile (legacy desktop GIS)</option>
            <option value="csv">CSV (Spreadsheet/Excel)</option>
          </select>

          Export state:

             Download state as file

          Save state:

            <input id="saveStateName" class="input-group-field" type="text" placeholder="Name for saved state"/>

              Save

          Load state:

              ✕

            {{ state }}

            No saved states yet

             Upload state file<input type="file" id="uploadFile" class="show-for-sr" name="statefile" accept="application/json" v-model="statefile" v-el:statefile @change="load()"/>

          Reset:

             Reset SSS

        <gk-legend></gk-legend>

</template>


loading: fix covered by element  when using scroll plugins

<template>
  <transition :name="transition">

{{ $t(text) || $t('loading') }}<slot></slot>

  </transition>
</template>

<i18n>
loading:
  en: loading
  zh-CN: 加载中
</i18n>


feat：播放前进后退功能

feat：播放前进后退功能

<template>

 0">
    <transition name="normal"
      @enter="enter"
      @after-enter="afterEnter"
      @leave="leave"
      @after-leave="afterLeave"
    >

    </transition>

    <transition name="mini">

    </transition>
    <audio :src="currentSong.url"
      ref="audio"
      @canplay="ready"
      @error="error"
    >
    </audio>

</template>

<template>

 0">
    <transition name="normal"
      @enter="enter"
      @after-enter="afterEnter"
      @leave="leave"
      @after-leave="afterLeave"
    >

    </transition>

    <transition name="mini">

    </transition>
    <audio :src="currentSong.url" ref="audio"></audio>

</template>


remove channel switcher from coach

remove channel switcher from coach

<template>

  <core-base :topLevelPageName="topLevelPageName" :appBarTitle="$tr('coachTitle')">

        <top-nav/>

      <component class="page" :is="currentPage"/>

{{ $tr('logInPrompt') }}

{{ $tr('logInCommand') }}

  </core-base>

</template>

<template>

  <core-base :topLevelPageName="topLevelPageName" :appBarTitle="$tr('coachTitle')">

      <channel-switcher @switch="switchChannel"/>

        <top-nav/>

      <component class="page" :is="currentPage"/>

{{ $tr('logInPrompt') }}

{{ $tr('logInCommand') }}

  </core-base>

</template>


#280 Bugfix (Event "closed" fires when opening and closing of the datepicker)

<template>

          {{ calendarButtonIconContent }}
          …

      <input
        :type="inline ? 'hidden' : 'text'"
        :class="[ inputClass, { 'form-control' : bootstrapStyling } ]"
        :name="name"
        :ref="refName"
        :id="id"
        @click="showCalendar"
        :value="formattedValue"
        :open-date="openDate"
        :placeholder="placeholder"
        :clear-button="clearButton"
        :disabled="disabledPicker"
        :required="required"
        readonly>

          ×

        <template v-if="allowedToShowView('day')">

                  <
                  {{ currMonthName }} {{ currYear }}

                  >

                {{ d }}
                <template v-if="blankDays > 0">

                </template>{{ day.date }}

        </template>

        <template v-if="allowedToShowView('month')">

                  <
                  {{ getPageYear() }}
                  >

              {{ month.month }}

        </template>

        <template v-if="allowedToShowView('year')">

                  <
                  {{ getPageDecade() }}
                  >

              {{ year.year }}

        </template>

</template>


img から png に変更

img から png に変更

<template>
  <form class="form-inline">

      size
      <input type="number" id="umlWidth" step="10" max="300" min="10" v-model="umlWidth" class="form-control">

      img
      <select id="umlExtension" v-model="umlExtension" class="form-control">
        <option v-for="option in umlExtensions" :value="option.value">
          {{ option.text }}
        </option>
      </select>

        <button type="button" class="btn btn-default" @click="renderUML" data-toggle="tooltip" data-placement="bottom" title="refresh" data-container="body">

        </button>
        <button type="button" class="btn btn-default" @click="save" data-toggle="tooltip" data-placement="bottom" title="save" data-container="body">

        </button>

        <button type="button" class="btn btn-default" @click="showGistModal" data-toggle="tooltip" data-placement="bottom" title="share" data-container="body">

        </button>

  </form>
</template>


add key

add key

<template>

    <input type="file" name="uploadFile" class="inputfile" :id="`uploadFile${key}`" @change="changed($event)">
    <label :for="`uploadFile${key}`">{{message}}
    <button v-show="file" type="button" class="button" @click="send()">{{buttonTitle}}</button>

</template>

<template>

    <input type="file" name="uploadFile" class="inputfile" :id="`uploadFile${id}`" @change="changed($event)">
    <label :for="`uploadFile${id}`">{{message}}
    <button v-show="file" type="button" class="button" @click="send()">{{buttonTitle}}</button>

</template>


the changes are emmited in the property textVal and should ne been updated by emitChange


Remove the twitter link

Remove the twitter link

<template>

          <router-link to="/"
                       class="navbar-item">
            About
          </router-link>
          <router-link to="blog"
                       class="navbar-item">
            Blog
          </router-link>
          <router-link to="extras"
                       class="navbar-item">
            Extras
          </router-link>

          <router-link to="archive"
                       class="navbar-item">
            Archive
          </router-link>

</template>

<template>

          <router-link to="/"
                       class="navbar-item">
            About
          </router-link>
          <router-link to="blog"
                       class="navbar-item">
            Blog
          </router-link>
          <router-link to="/"
                       class="navbar-item">
            Extras
          </router-link>

          <router-link to="archive"
                       class="navbar-item">
            Archive
          </router-link>

</template>


Load cover.json from ecvbdx1617 github-for-fashion, we can load each user and depo from the cover.json, now we need to define what we should do with it

<template>

      <card v-for="garment in garments" :data="garment"></card>

</template>


configure table toolbar and do some tidying

<template>

	<el-button type="primary" @click="showEditTableDialog">Edit table</el-button>
	<el-dialog
		custom-class="edit-table-dialog"
		:visible.sync="editTableDialogVisible"
		:append-to-body="true"
		:fullscreen="editTableDialogFullscreen"
		top="8vh">

			Edit table
			<el-button type="text" @click="toggleDialogFullscreen"> {{ fullscreenToggleText }}</el-button>

	  	<editor
			v-model="value"
			v-if="editTableDialogVisible"
			:init="editorConfig"
			:initialValue="field.default"></editor>

			<el-button type="primary" @click="hideEditTableDialog">Close</el-button>

	</el-dialog>

</template>


Change 'add youth ticket' to 'add another youth ticket' (#128)

* Change 'add youth ticket' to 'add another youth ticket'

* change all but the first word to start with a lowercase letter

<template>

      {{ $t('Select Your Tickets') }}
      {{ $t('Select Youth Tickets') }}

{{ $t('NOTE: Parent attendance is highly encouraged, and in some cases mandatory.') }}

    {{ $t('Please contact the Dojo if you have any questions.') }}

      <ticket v-for="(_user, index) in users" :user="_user" :event="event" v-model="usersTickets[index]" :key="_user.id"></ticket>

    <child-ticket v-for="(child, index) in children" ref="allChildComponents" :key="child.id" :eventId="eventId" :event="event" :sessions="sessions" :id="child.id" v-model="child.value" v-on:delete="deleteChildComponent(index)"></child-ticket>

      <button class="cd-event-sessions__add-youth btn btn-primary" tag="button" @click="addChildComponent"> {{ $t('Add another youth ticket') }}</button>

      {{ $t('Phone Number') }}

{{ $t('Since you are acting as a guardian, the Dojo needs your number in case of emergencies.') }}

        <input class="form-control" v-model="phone" ref="phone" type="text" placeholder="e.g. +353851234567" data-vv-name="phone" data-vv-validate-on="blur" v-validate="{ required: true, regex: /^\+[0-9\ \.\-]+$/ }"/>

{{ $t('Phone number is required') }}

{{ $t('* Please include the plus symbol(+) and country code. For example, a phone number in Ireland should begin +353') }}

 {{ $t('Please select at least one ticket') }}

      <button class="cd-event-sessions__next btn btn-primary" tag="button" @click="submitBooking" name="submitApplications" v-validate:applications="'required'" >
        {{ $t('Request booking for {totalBooked} ticket(s)', { totalBooked }) }}
        {{ $t('Confirm booking for {totalBooked} ticket(s)', { totalBooked }) }}
      </button>

</template>

<template>

      {{ $t('Select Your Tickets') }}
      {{ $t('Select Youth Tickets') }}

{{ $t('NOTE: Parent attendance is highly encouraged, and in some cases mandatory.') }}

    {{ $t('Please contact the Dojo if you have any questions.') }}

      <ticket v-for="(_user, index) in users" :user="_user" :event="event" v-model="usersTickets[index]" :key="_user.id"></ticket>

    <child-ticket v-for="(child, index) in children" ref="allChildComponents" :key="child.id" :eventId="eventId" :event="event" :sessions="sessions" :id="child.id" v-model="child.value" v-on:delete="deleteChildComponent(index)"></child-ticket>

      <button class="cd-event-sessions__add-youth btn btn-primary" tag="button" @click="addChildComponent"> {{ $t('Add Youth Ticket') }}</button>

      {{ $t('Phone Number') }}

{{ $t('Since you are acting as a guardian, the Dojo needs your number in case of emergencies.') }}

        <input class="form-control" v-model="phone" ref="phone" type="text" placeholder="e.g. +353851234567" data-vv-name="phone" data-vv-validate-on="blur" v-validate="{ required: true, regex: /^\+[0-9\ \.\-]+$/ }"/>

{{ $t('Phone number is required') }}

{{ $t('* Please include the plus symbol(+) and country code. For example, a phone number in Ireland should begin +353') }}

 {{ $t('Please select at least one ticket') }}

      <button class="cd-event-sessions__next btn btn-primary" tag="button" @click="submitBooking" name="submitApplications" v-validate:applications="'required'" >
        {{ $t('Request booking for {totalBooked} ticket(s)', { totalBooked }) }}
        {{ $t('Confirm booking for {totalBooked} ticket(s)', { totalBooked }) }}
      </button>

</template>


Update ProgressbarLogoRefresh.vue

Update ProgressbarLogoRefresh.vue

<template>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-label="Progressbar logo" alt="Progressbar logo" viewBox="0 0 328.5 123" width="100%" height="100%">
    <title>Progressbar logo</title>
    <g>
      <path d=" M 11 120 L 2 111 L 2 48 L 29 48 L 29 66 L 20 75 L 11 75" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 38 75 L 38 57 L 47 48 L 56 48" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 65 57 L 56 66 L 56 84 L 74 84 L 83 75 L 83 57 L 65 57 Z " fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 110 120 L 119 111 L 119 48 L 92 48 L 92 66 L 101 75 L 110 75" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 128 75 L 128 57 L 137 48 L 146 48" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 164 84 L 146 84 L 146 66 L 155 57 L 173 57 L 173 66 L 164 75" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 182 84 L 191 84 L 200 75" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 200 75 L 182 57 L 191 48 L 200 48" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 209 84 L 218 84 L 227 75 L 209 57 L 218 48 L 227 48" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 245 57 L 254 48 L 263 48 L 263 75 L 236 75 L 236 12 L 245 3" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 308 75 L 308 57 L 317 48 L 326 48" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 272 48 L 290 48 L 299 57 L 299 75 L 272 75 L 272 66 L 281 57" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
    </g>
</svg>
</template>

<script>
export default {
  name: 'progressbar-logo-refresh',
}
</script>

<style scoped>
</style>

<template>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-label="Progressbar logo" alt="Progressbar logo" viewBox="0 0 328.5 123" width="100%" height="100%">
    <title>Progressbar logo</title>
    <g>
      <path d=" M 11 120 L 2 111 L 2 48 L 29 48 L 29 66 L 20 75 L 11 75" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 38 75 L 38 57 L 47 48 L 56 48" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 65 57 L 56 66 L 56 84 L 74 84 L 83 75 L 83 57 L 65 57 Z " fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 110 120 L 119 111 L 119 48 L 92 48 L 92 66 L 101 75 L 110 75" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 128 75 L 128 57 L 137 48 L 146 48" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 164 84 L 146 84 L 146 66 L 155 57 L 173 57 L 173 66 L 164 75" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 182 84 L 191 84 L 200 75" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 200 75 L 182 57 L 191 48 L 200 48" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 209 84 L 218 84 L 227 75 L 209 57 L 218 48 L 227 48" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 245 57 L 254 48 L 263 48 L 263 75 L 236 75 L 236 12 L 245 3" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 308 75 L 308 57 L 317 48 L 326 48" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
      <path d=" M 272 48 L 290 48 L 299 57 L 299 75 L 272 75 L 272 66 L 281 57" fill="none" stroke-width="4" stroke="currentColor" stroke-linejoin="miter" stroke-linecap="square"  />
    </g>
</svg>
</template>

<script>
export default {
  name: 'offer',
}
</script>

<style scoped>
</style>


Rename settings to deck settings

Rename settings to deck settings

Signed-off-by: Vincent Petry <87e1f221a672a14a323e57bb65eaea19d3ed3804@nextcloud.com>

<template>
	<AppNavigationVue :class="{'icon-loading': loading}">
		<template #list>
			<AppNavigationItem :title="t('deck', 'Upcoming cards')"
				icon="icon-calendar-dark"
				:exact="true"
				to="/" />
			<AppNavigationBoardCategory id="deck-navigation-all"
				to="/board"
				:text="t('deck', 'All boards')"
				:boards="noneArchivedBoards"
				:open-on-add-boards="true"
				icon="icon-deck" />
			<AppNavigationBoardCategory id="deck-navigation-archived"
				to="/board/archived"
				:text="t('deck', 'Archived boards')"
				:boards="archivedBoards"
				icon="icon-archive" />
			<AppNavigationBoardCategory id="deck-navigation-shared"
				to="/board/shared"
				:text="t('deck', 'Shared with you')"
				:boards="sharedBoards"
				icon="icon-shared" />
			<AppNavigationAddBoard v-if="canCreate" />
		</template>
		<template #footer>
			<AppNavigationSettings :title="t('deck', 'Deck settings')">

						<input id="toggle-modal"
							v-model="cardDetailsInModal"
							type="checkbox"
							class="checkbox">

							{{ t('deck', 'Use bigger card view') }}

						<input id="toggle-calendar"
							v-model="configCalendar"
							type="checkbox"
							class="checkbox">

							{{ t('deck', 'Show boards in calendar/tasks') }}

					<Multiselect v-if="isAdmin"
						v-model="groupLimit"
						:class="{'icon-loading-small': groupLimitDisabled}"
						open-direction="bottom"
						:options="groups"
						:multiple="true"
						:disabled="groupLimitDisabled"
						:placeholder="t('deck', 'Limit deck usage of groups')"
						label="displayname"
						track-by="id"
						@input="updateConfig" />

						{{ t('deck', 'Limiting Deck will block users not part of those groups from creating their own boards. Users will still be able to work on boards that have been shared with them.') }}

			</AppNavigationSettings>
		</template>
	</AppNavigationVue>
</template>

<template>
	<AppNavigationVue :class="{'icon-loading': loading}">
		<template #list>
			<AppNavigationItem :title="t('deck', 'Upcoming cards')"
				icon="icon-calendar-dark"
				:exact="true"
				to="/" />
			<AppNavigationBoardCategory id="deck-navigation-all"
				to="/board"
				:text="t('deck', 'All boards')"
				:boards="noneArchivedBoards"
				:open-on-add-boards="true"
				icon="icon-deck" />
			<AppNavigationBoardCategory id="deck-navigation-archived"
				to="/board/archived"
				:text="t('deck', 'Archived boards')"
				:boards="archivedBoards"
				icon="icon-archive" />
			<AppNavigationBoardCategory id="deck-navigation-shared"
				to="/board/shared"
				:text="t('deck', 'Shared with you')"
				:boards="sharedBoards"
				icon="icon-shared" />
			<AppNavigationAddBoard v-if="canCreate" />
		</template>
		<template #footer>
			<AppNavigationSettings>

						<input id="toggle-modal"
							v-model="cardDetailsInModal"
							type="checkbox"
							class="checkbox">

							{{ t('deck', 'Use bigger card view') }}

						<input id="toggle-calendar"
							v-model="configCalendar"
							type="checkbox"
							class="checkbox">

							{{ t('deck', 'Show boards in calendar/tasks') }}

					<Multiselect v-if="isAdmin"
						v-model="groupLimit"
						:class="{'icon-loading-small': groupLimitDisabled}"
						open-direction="bottom"
						:options="groups"
						:multiple="true"
						:disabled="groupLimitDisabled"
						:placeholder="t('deck', 'Limit deck usage of groups')"
						label="displayname"
						track-by="id"
						@input="updateConfig" />

						{{ t('deck', 'Limiting Deck will block users not part of those groups from creating their own boards. Users will still be able to work on boards that have been shared with them.') }}

			</AppNavigationSettings>
		</template>
	</AppNavigationVue>
</template>


revert デスクトップの動画埋め込みを廃止

revert デスクトップの動画埋め込みを廃止

<template>

		%fa:exclamation-triangle% %i18n:@sensitive%
		%i18n:@click-to-show%

	<video class="video"
		:src="video.url"
		:title="video.name"
		controls
		@dblclick.prevent="onClick"
		ref="video"
		v-if="inlinePlayable" />

		%fa:R play-circle%

</template>

<template>

		%fa:exclamation-triangle% %i18n:@sensitive%
		%i18n:@click-to-show%

		%fa:R play-circle%

</template>


Fix broken import (until the PR is merged upstream)

Signed-off-by: Joas Schilling <ab43a7c9cb5b2380afc4ddf8b3e2583169b39a02@schilljs.com>

<!--
  - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me>
  -
  - @author Marco Ambrosini <marcoambrosini@pm.me
  -
  - @license GNU AGPL version 3 or any later version
  -
  - This program is free software: you can redistribute it and/or modify
  - it under the terms of the GNU Affero General Public License as
  - published by the Free Software Foundation, either version 3 of the
  - License, or (at your option) any later version.
  -
  - This program is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  - GNU Affero General Public License for more details.
  -
  - You should have received a copy of the GNU Affero General Public License
  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-->

<template>
	<ul class="contacts-list">
		<AppContentListItem
			v-for="item of contacts"
			:key="item.id"
			:title="item.id"
			@click="createAndJoinConversation(item.id)">
			<Avatar
				slot="icon"
				:size="44"
				:user="item.id"
				:display-name="item.id" />
		</AppContentListItem>
	</ul>
</template>

<script>
import Avatar from 'nextcloud-vue/dist/Components/Avatar'
import AppContentListItem from '../ConversationsList/AppContentListItem/AppContentListItem'
import { createOneToOneConversation } from '../../../services/conversationsService'

export default {
	name: 'ContactsList',
	components: {
		Avatar,
		AppContentListItem
	},
	props: {
		contacts: {
			type: Object,
			required: true
		},
		isLoading: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		/**
		 * Create a new conversation with the selected user.
		 * @param {String} userId the ID of the clicked user.
		 */
		async createAndJoinConversation(userId) {
			console.debug(userId)
			const response = await createOneToOneConversation(userId)
			const conversationToken = response.data.ocs.data.token
			this.$router.push({ name: 'conversation', params: { token: conversationToken } }).catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
			console.debug(response)
		}
	}
}
</script>

<style lang="scss" scoped>
.ellipsis {
	text-overflow: ellipsis;
}
.contacts-list {
	overflow: visible;
	display: block;
}

</style>

<!--
  - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me>
  -
  - @author Marco Ambrosini <marcoambrosini@pm.me
  -
  - @license GNU AGPL version 3 or any later version
  -
  - This program is free software: you can redistribute it and/or modify
  - it under the terms of the GNU Affero General Public License as
  - published by the Free Software Foundation, either version 3 of the
  - License, or (at your option) any later version.
  -
  - This program is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  - GNU Affero General Public License for more details.
  -
  - You should have received a copy of the GNU Affero General Public License
  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-->

<template>
	<ul class="contacts-list">
		<AppContentListItem
			v-for="item of contacts"
			:key="item.id"
			:title="item.id"
			@click="createAndJoinConversation(item.id)">
			<Avatar
				slot="icon"
				:size="44"
				:user="item.id"
				:display-name="item.id" />
		</AppContentListItem>
	</ul>
</template>

<script>
import Avatar from 'nextcloud-vue/dist/Components/Avatar'
import AppContentListItem from 'nextcloud-vue/dist/Components/AppContentListItem'
import { createOneToOneConversation } from '../../../services/conversationsService'

export default {
	name: 'ContactsList',
	components: {
		Avatar,
		AppContentListItem
	},
	props: {
		contacts: {
			type: Object,
			required: true
		},
		isLoading: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		/**
		 * Create a new conversation with the selected user.
		 * @param {String} userId the ID of the clicked user.
		 */
		async createAndJoinConversation(userId) {
			console.debug(userId)
			const response = await createOneToOneConversation(userId)
			const conversationToken = response.data.ocs.data.token
			this.$router.push({ name: 'conversation', params: { token: conversationToken } }).catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
			console.debug(response)
		}
	}
}
</script>

<style lang="scss" scoped>
.ellipsis {
	text-overflow: ellipsis;
}
.contacts-list {
	overflow: visible;
	display: block;
}

</style>


chore(ui/dev): update fab-extended demo page

<template>
  <q-layout view="hHh lpr fFf">
    <q-header elevated>
      <q-toolbar class="q-gutter-md justify-around">
        <q-select dark color="yellow" borderless square v-model="fabDirection" :options="fabDirections" label="FAB open direction" style="min-width: 150px" />
        <q-select dark color="yellow" borderless square v-model="fabVerticalAlign" :options="fabVerticalAligns" label="FAB v-align" style="min-width: 150px" />
        <q-select dark color="yellow" borderless square v-model="fabLabelPosition" :options="fabLabelPositions" label="Label position" style="min-width: 150px" />
        <q-toggle dark color="yellow" v-model="fabExternalLabel" label="External label" />
        <q-toggle dark color="yellow" v-model="fabSquare" label="Square" />
        <q-toggle dark color="yellow" v-model="hideLabel" label="Hide label" />
        <q-toggle dark color="yellow" v-model="withLabelClass" label="Label class" />
      </q-toolbar>
    </q-header>

    <q-page-container>
      <q-page padding>

        <div v-for="i in 300" :key="i" class="q-pa-sm">
          Row {{ i }}
        </div>

        <q-page-sticky :position="stickyConfig.position" :offset="stickyConfig.offset">
          <q-fab
            :direction="fabDirection"
            color="primary"
            :label="`Actions aligned ${fabVerticalAlign}`"
            :label-position="fabLabelPosition"
            :actions-vertical-align="fabVerticalAlign"
            :square="fabSquare"
            :external-label="fabExternalLabel"
            :hide-label="hideLabel"
            :label-class="labelClass"
          >
            <q-fab-action
              class="white"
              color="green"
              icon="center_focus_weak"
              :square="fabSquare"
              :external-label="fabExternalLabel"
              :hide-label="hideLabel"
              :label-class="labelClass"
            />
            <q-fab-action
              class="white"
              color="red"
              icon="center_focus_weak"
              label="Anchor start"
              :label-position="fabLabelPosition"
              anchor="start"
              :square="fabSquare"
              :external-label="fabExternalLabel"
              :hide-label="hideLabel"
              :label-class="labelClass"
            />
            <q-fab-action
              class="white"
              color="red"
              icon="center_focus_weak"
              anchor="center"
              :square="fabSquare"
              :external-label="fabExternalLabel"
              :hide-label="hideLabel"
              :label-class="labelClass"
            />
            <q-fab-action
              class="white"
              color="blue"
              icon="center_focus_weak"
              label="Anchor center"
              :label-position="fabLabelPosition"
              anchor="center"
              :square="fabSquare"
              :external-label="fabExternalLabel"
              :hide-label="hideLabel"
              :label-class="labelClass"
            />
            <q-fab-action
              class="white"
              color="deep-orange"
              icon="center_focus_weak"
              anchor="end"
              :square="fabSquare"
              :external-label="fabExternalLabel"
              :hide-label="hideLabel"
              :label-class="labelClass"
            />
            <q-fab-action
              class="white"
              color="deep-orange"
              icon="center_focus_weak"
              label="Anchor end"
              :label-position="fabLabelPosition"
              anchor="end"
              :square="fabSquare"
              :external-label="fabExternalLabel"
              :hide-label="hideLabel"
              :label-class="labelClass"
            />
            <q-fab-action
              class="white"
              color="green"
              icon="center_focus_weak"
              :label-position="fabLabelPosition"
              :square="fabSquare"
              :external-label="fabExternalLabel"
              :hide-label="hideLabel"
              :label-class="labelClass"
            />
            <q-fab-action
              class="white"
              color="blue"
              icon="center_focus_weak"
              anchor="start"
              :square="fabSquare"
              :external-label="fabExternalLabel"
              :hide-label="hideLabel"
              :label-class="labelClass"
            />
            <q-fab-action
              class="white"
              color="purple"
              icon="center_focus_weak"
              label="Anchor default"
              :label-position="fabLabelPosition"
              :square="fabSquare"
              :external-label="fabExternalLabel"
              :hide-label="hideLabel"
              :label-class="labelClass"
            />
          </q-fab>
        </q-page-sticky>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script>
export default {
  data () {
    return {
      fabDirection: 'up',
      fabVerticalAlign: 'center',
      fabExtended: true,
      fabExternalLabel: true,
      fabLabelPosition: 'right',
      fabSquare: false,
      hideLabel: false,
      withLabelClass: false,

      fabDirections: [ 'right', 'left', 'up', 'down' ],
      fabVerticalAligns: [ 'center', 'left', 'right' ],
      fabLabelPositions: [ 'right', 'left', 'top', 'bottom' ]
    }
  },

  computed: {
    labelClass () {
      if (this.withLabelClass === true) {
        return 'bg-white text-grey-8'
      }
    },

    stickyConfig () {
      if (this.fabDirection === 'up') {
        return {
          position: 'bottom',
          offset: [ this.fabVerticalAlign === 'center' ? 0 : 18, 18 ]
        }
      }

      if (this.fabDirection === 'down') {
        return {
          position: 'top',
          offset: [ this.fabVerticalAlign === 'center' ? 0 : 18, 18 ]
        }
      }

      if (this.fabDirection === 'left') {
        return {
          position: 'right',
          offset: [ 18, 0 ]
        }
      }

      return {
        position: 'left',
        offset: [ 18, 0 ]
      }
    }
  },

  methods: {
    logEvt (evt) {
      console.log(`@${evt.type}`, evt)
    }
  }
}
</script>

<template>
  <q-layout view="hHh lpr fFf">
    <q-header elevated>
      <q-toolbar class="q-gutter-md justify-around">
        <q-select dark color="yellow" borderless square v-model="fabDirection" :options="fabDirections" label="FAB open direction" style="min-width: 150px" />
        <q-select dark color="yellow" borderless square v-model="fabAnchor" :options="fabAnchors" label="FAB anchor" style="min-width: 150px" />
        <q-select dark color="yellow" borderless square v-model="fabLabelPosition" :options="fabLabelPositions" label="Label position" style="min-width: 150px" />
        <q-toggle dark color="yellow" v-model="fabExternalLabel" label="External label" />
        <q-toggle dark color="yellow" v-model="fabSquare" label="Square" />
        <q-toggle dark color="yellow" v-model="hideLabel" label="Hide label" />
        <q-toggle dark color="yellow" v-model="withLabelClass" label="Label class" />
      </q-toolbar>
    </q-header>

    <q-page-container>
      <q-page padding>

        <div v-for="i in 300" :key="i" class="q-pa-sm">
          Row {{ i }}
        </div>

        <q-page-sticky :position="stickyConfig.position" :offset="stickyConfig.offset">
          <q-fab
            :direction="fabDirection"
            color="primary"
            :label="`Actions aligned ${fabAnchor}`"
            :label-position="fabLabelPosition"
            :actions-vertical-align="fabAnchor"
            :square="fabSquare"
            :external-label="fabExternalLabel"
            :hide-label="hideLabel"
            :label-class="labelClass"
          >
            <q-fab-action
              class="white"
              color="green"
              icon="center_focus_weak"
              :square="fabSquare"
              :external-label="fabExternalLabel"
              :hide-label="hideLabel"
              :label-class="labelClass"
            />
            <q-fab-action
              class="white"
              color="red"
              icon="center_focus_weak"
              label="Anchor start"
              :label-position="fabLabelPosition"
              anchor="start"
              :square="fabSquare"
              :external-label="fabExternalLabel"
              :hide-label="hideLabel"
              :label-class="labelClass"
            />
            <q-fab-action
              class="white"
              color="red"
              icon="center_focus_weak"
              anchor="center"
              :square="fabSquare"
              :external-label="fabExternalLabel"
              :hide-label="hideLabel"
              :label-class="labelClass"
            />
            <q-fab-action
              class="white"
              color="blue"
              icon="center_focus_weak"
              label="Anchor center"
              :label-position="fabLabelPosition"
              anchor="center"
              :square="fabSquare"
              :external-label="fabExternalLabel"
              :hide-label="hideLabel"
              :label-class="labelClass"
            />
            <q-fab-action
              class="white"
              color="deep-orange"
              icon="center_focus_weak"
              anchor="end"
              :square="fabSquare"
              :external-label="fabExternalLabel"
              :hide-label="hideLabel"
              :label-class="labelClass"
            />
            <q-fab-action
              class="white"
              color="deep-orange"
              icon="center_focus_weak"
              label="Anchor end"
              :label-position="fabLabelPosition"
              anchor="end"
              :square="fabSquare"
              :external-label="fabExternalLabel"
              :hide-label="hideLabel"
              :label-class="labelClass"
            />
            <q-fab-action
              class="white"
              color="green"
              icon="center_focus_weak"
              :label-position="fabLabelPosition"
              :square="fabSquare"
              :external-label="fabExternalLabel"
              :hide-label="hideLabel"
              :label-class="labelClass"
            />
            <q-fab-action
              class="white"
              color="blue"
              icon="center_focus_weak"
              anchor="start"
              :square="fabSquare"
              :external-label="fabExternalLabel"
              :hide-label="hideLabel"
              :label-class="labelClass"
            />
            <q-fab-action
              class="white"
              color="purple"
              icon="center_focus_weak"
              label="Anchor default"
              :label-position="fabLabelPosition"
              :square="fabSquare"
              :external-label="fabExternalLabel"
              :hide-label="hideLabel"
              :label-class="labelClass"
            />
          </q-fab>
        </q-page-sticky>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script>
export default {
  data () {
    return {
      fabDirection: 'up',
      fabAnchor: 'center',
      fabExtended: true,
      fabExternalLabel: true,
      fabLabelPosition: 'right',
      fabSquare: false,
      hideLabel: false,
      withLabelClass: false,

      fabDirections: [ 'right', 'left', 'up', 'down' ],
      fabAnchors: [ 'center', 'left', 'right' ],
      fabLabelPositions: [ 'right', 'left', 'top', 'bottom' ]
    }
  },

  computed: {
    labelClass () {
      if (this.withLabelClass === true) {
        return 'bg-white text-grey-8'
      }
    },

    stickyConfig () {
      if (this.fabDirection === 'up') {
        return {
          position: 'bottom',
          offset: [ this.fabAnchor === 'center' ? 0 : 18, 18 ]
        }
      }

      if (this.fabDirection === 'down') {
        return {
          position: 'top',
          offset: [ this.fabAnchor === 'center' ? 0 : 18, 18 ]
        }
      }

      if (this.fabDirection === 'left') {
        return {
          position: 'right',
          offset: [ 18, 0 ]
        }
      }

      return {
        position: 'left',
        offset: [ 18, 0 ]
      }
    }
  },

  methods: {
    logEvt (evt) {
      console.log(`@${evt.type}`, evt)
    }
  }
}
</script>


Fix typo

Fix typo

<template>
<mk-window ref="window" is-modal width="800px" height="500px" @closed="$destroy">

		 0">({{ files.length }}%i18n:@choose-file%)

	<mk-drive
		ref="browser"
		:class="$style.browser"
		:multiple="multiple"
		@selected="onSelected"
		@change-selection="onChangeSelection"
	/>

		<button :class="$style.upload" title="%i18n:@upload%" @click="upload">%fa:upload%</button>
		<button :class="$style.cancel" @click="cancel">%i18n:@cancel%</button>
		<button :class="$style.ok" :disabled="multiple && files.length == 0" @click="ok">%i18n:@ok%</button>

</mk-window>
</template>


Improve performance

Improve performance

<template>

	@{{ user.username }}
	@{{ user.host || host }}
	<fa v-if="user.isLocked == true" class="locked" icon="lock" fixed-width/>

</template>


fix `warnOnExit: false` on IE

fix `warnOnExit: false` on IE

IE does not honor the null return value here like other browsers do.
see https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Notes

<template>

        <link :href="themeUrl" rel="stylesheet" type="text/css">

        <template v-if="!hasStarted || (!fallbackComponent && networks.length === 0)">
            <component :is="startupComponent" @start="startUp"/>
        </template>
        <template v-else>
            <state-browser :networks="networks" :sidebar-state="sidebarState"/>

                <template v-if="!activeComponent && network">
                    <container
                        :network="network"
                        :buffer="buffer"
                        :sidebar-state="sidebarState"
                    >
                        <media-viewer
                            v-if="mediaviewerOpen"
                            slot="before"
                            :url="mediaviewerUrl"
                            :component="mediaviewerComponent"
                            :is-iframe="mediaviewerIframe"
                        />
                    </container>
                    <control-input :container="networks" :buffer="buffer"/>
                </template>
                <component
                    v-else-if="!activeComponent"
                    :is="fallbackComponent"
                    v-bind="fallbackComponentProps"
                />
                <component v-else :is="activeComponent" v-bind="activeComponentProps"/>

        </template>

</template>


when merging with an existing user, only merge uid/supannAliasLogin/global_xxx attrs

Exemple de pb corrigé :
- import avec données sans homePhone
- fusion avec utilisateur ayant homePhone
- comptex appelle crejsonldap pour le profile COMPTEX en donnant le homePhone du compte existant

https://projets.univ-paris1.fr/project/11/task/279

NB: mifare/barcode are handled by global_mifare/global_barcode

<template>

    <component :is="resp.component" :resp="resp" :v="v"></component>

    <component :is="step_description" :v_pre="v_pre" :v="v"></component>

            <ImportResult :imported="imported" :ordered_fields="to_import.fields" @done="imported = to_import = undefined"></ImportResult>

            <ImportFile :attrs="attrs" @change="val => to_import = val"></ImportFile>

     Recherche des homonymes, veuillez patienter...

    <Homonyms :v="v" :l="potential_homonyms" @merge="merge" @no_merge="no_merge">
    </Homonyms>

                Le compte sera fusionné avec le compte existant {{v.uid}}.

                {{v.givenName}} {{v.sn}} <ExistingAccountWarning :v="v"></ExistingAccountWarning>

    <attrsForm
        :v="v" :v_ldap="v_ldap" :attrs="other_attrs" :step_labels="step.labels"
        @submit="submit" @reject="reject"></attrsForm>

</template>


Foodkeeper

Foodkeeper

<template>

      <svg v-if="foodkeeper.favorite" viewBox="0 0 50 50" class="foodkeeper-star-icon">
        <use xlink:href="#app-icon-star"></use>
      </svg>

{{ foodkeeper.name }}

{{ foodkeeper.description }}

Mes compères

      <members-list :members="accomplices" type="accomplice" add="true"></members-list>

    <tabs-navigation :objectid="$route.params.id" route="DetailsFoodkeeper"></tabs-navigation>
    <router-view></router-view>

</template>


Removes breaking batch operations code

Removes breaking batch operations code

<template>
  <AposModal
    :modal="modal" :modal-title="modalTitle"
    ref="modal"
    @esc="confirmAndCancel" @no-modal="$emit('safe-close')"
    @inactive="modal.active = false" @show-modal="modal.showModal = true"
  >
    <template #secondaryControls>
      <AposButton
        v-if="relationshipField"
        type="default" label="apostrophe:cancel"
        @click="confirmAndCancel"
      />
      <AposButton
        v-else
        type="default" label="apostrophe:exit"
        @click="confirmAndCancel"
      />
    </template>
    <template #primaryControls>
      <AposContextMenu
        v-if="utilityOperations.menu.length"
        :button="utilityOperations.button"
        :menu="utilityOperations.menu"
        @item-clicked="utilityOperationsHandler"
      />
      <AposButton
        v-if="relationshipField"
        type="primary"
        :label="saveRelationshipLabel"
        :disabled="!!relationshipErrors"
        @click="saveRelationship"
      />
      <AposButton
        v-else-if="moduleOptions.canEdit && moduleOptions.showCreate"
        :label="{
          key: 'apostrophe:newDocType',
          type: $t(moduleOptions.label)
        }" type="primary"
        @click="create"
      />
    </template>
    <template v-if="relationshipField" #leftRail>
      <AposModalRail>

            <AposMinMaxCount
              :field="relationshipField"
              :value="checkedDocs"
            />

          <AposSlatList
            class="apos-pieces-manager__relationship__items"
            @input="setCheckedDocs"
            @item-clicked="editRelationship"
            :value="checkedDocs"
            :has-relationship-schema="!!(relationshipField && relationshipField.schema)"
          />

      </AposModalRail>
    </template>
    <template #main>
      <AposModalBody>
        <template #bodyHeader>
          <AposDocsManagerToolbar
            :selected-state="selectAllState"
            :total-pages="totalPages"
            :current-page="currentPage"
            :filter-choices="filterChoices"
            :filter-values="filterValues"
            :filters="moduleOptions.filters"
            :labels="moduleLabels"
            :displayed-items="items.length"
            :checked-count="checked.length"
            :batch-operations="moduleOptions.batchOperations"
            @select-click="selectAll"
            @search="search"
            @page-change="updatePage"
            @filter="filter"
            @batch="handleBatchAction"
            :options="{
              disableUnchecked: maxReached()
            }"
          />
          <AposDocsManagerSelectBox
            :selected-state="selectAllState"
            :module-labels="moduleLabels"
            :filter-values="filterValues"
            :checked-ids="checked"
            :all-pieces-selection="allPiecesSelection"
            :displayed-items="items.length"
            @select-all="selectAllPieces"
            @set-all-pieces-selection="setAllPiecesSelection"
          />
        </template>
        <template #bodyMain>
          <AposDocsManagerDisplay
            v-if="items.length > 0"
            :items="items"
            :headers="headers"
            v-model="checked"
            @open="edit"
            :options="{
              ...moduleOptions,
              disableUnchecked: maxReached(),
              disableUnpublished: disableUnpublished,
              manuallyPublished: manuallyPublished
            }"
          />

            <AposEmptyState :empty-state="emptyDisplay" />

        </template>
      </AposModalBody>
    </template>
  </AposModal>
</template>


fix formatting

fix formatting

<style lang="sass">
</style>

<template lang="jade">
  div.inset
    form#team-form.form-horizontal(data-toggle="validator")
      team-form(:team.sync="team", :visibility="false")
      div.form-group
        div.col-sm-offset-2.col-sm-5
          div.btn-group(role="group")
            button.btn.btn-primary(type="submit" @click.prevent="saveTeam()") Save
            button.btn.btn-default(type="button" @click="resetTeam()") Reset
</template>

<script lang="babel">
import * as Store from '../store'
var TeamFormView = require('./TeamForm.vue')

module.exports = {
  components: {
    'team-form': TeamFormView
  },
  data: function() {
    return {
      team: JSON.parse(JSON.stringify(this.activeTeam))
    }
  },
  vuex: {
    getters: {
      activeTeam: Store.activeTeam
    },
    actions: {
      ajaxPost: Store.ajaxPost,
      setActiveTeam: Store.setActiveTeam,
      showPopover: Store.showPopover
    }
  },
  ready: function() {
    this.resetTeam()
  },
  methods: {
    saveTeam: function(event) {
      delete this.team.permissions
      delete this.team.publicKey
      this.ajaxPost('/team/update', {
        flags: this.team.flags,
        id: this.team.id,
        name: this.team.name
      }, data => {
        ga('send', 'event', 'team', 'update', 'success')
        this.setActiveTeam(data)
        this.$router.go({ name: 'team-settings', params: { teamName: data.name } })
      }, {
        409: () => {
          ga('send', 'event', 'team', 'update', 'duplicateName')
          this.showPopover('#team-name', {
            title: 'Duplicate name',
            content: 'A team with the same name already exists.'
          })
        }
      })
    },
    resetTeam: function() {
      $('#team-form').validator()
      this.team = JSON.parse(JSON.stringify(this.activeTeam))
    }
  }
}
</script>


Client - fix record card style

Client - fix record card style

<template>

    <Card>
      <template #title>
        <SportImage :sport-label="records.label" :color="records.color" />
        {{ sportTranslatedLabel }}
      </template>
      <template #content>

            {{ $t(`workouts.RECORD_${record.record_type}`) }}

          {{ record.value }}

            <router-link
              :to="{
                name: 'Workout',
                params: { workoutId: record.workout_id },
              }"
            >
              {{ record.workout_date }}
            </router-link>

      </template>
    </Card>

</template>


Remove footer ad.

Remove footer ad.

<template>

			<template v-if="!Screen.isXs">

						<router-link
							class="-client-logo"
							:to="{ name: 'landing.client' }"
							v-app-track-event="`footer:client-promo`"
						>
							<app-theme-svg src="~img/game-jolt-client-logo.svg" alt="Game Jolt Client" />
						</router-link>
						<app-button solid primary :to="{ name: 'landing.client' }">
							<translate>Get It Now</translate>
						</app-button>

			</template>

									<router-link :to="{ name: 'landing.learn' }">
										<translate>What's Game Jolt</translate>
									</router-link>

									<router-link :to="{ name: 'landing.client' }">
										<translate>Client</translate>
									</router-link>

										<translate>Jams</translate>

									<router-link :to="{ name: 'forums.landing.overview' }">
										<translate>Forums</translate>
									</router-link>

									<router-link :to="{ name: 'landing.about' }">
										<translate>About</translate>
									</router-link>

									<router-link :to="{ name: 'landing.game-api' }">
										<translate>Game API</translate>
									</router-link>

									<router-link :to="{ name: 'landing.marketplace' }">
										<translate>Marketplace</translate>
									</router-link>

									<router-link :to="{ name: 'landing.partners' }">
										<translate>Partners</translate>
									</router-link>

									<app-link-external href="https://github.com/gamejolt">
										<translate>footer.open_source</translate>
									</app-link-external>

									<router-link
										:to="{ name: 'forums.channels.view', params: { name: 'gj-improve' } }"
									>
										<translate>Feature Requests</translate>
									</router-link>

									<app-link-external href="https://github.com/gamejolt/issue-tracker">
										<translate>Bug Tracker</translate>
									</app-link-external>

									<app-link-external href="https://www.redbubble.com/people/gamejolt/shop">
										<translate>Merch</translate>
									</app-link-external>

										<translate>footer.contact</translate>

									<router-link :to="{ name: 'legal.terms' }">
										<translate>legal.terms</translate>
									</router-link>

									<router-link :to="{ name: 'legal.privacy' }">
										<translate>legal.privacy</translate>
									</router-link>

									<router-link :to="{ name: 'legal.cookies' }">
										<translate>Cookie Policy</translate>
									</router-link>

					<router-link :to="{ name: 'home' }">
						<app-theme-svg src="~img/jolt.svg" alt="" width="68" height="72" />
					</router-link>

						<app-button
							trans
							circle
							icon="twitter-bird"
							href="https://twitter.com/gamejolt"
							target="_blank"
						/>
						<app-button
							trans
							circle
							icon="facebook"
							href="https://facebook.com/gamejolt"
							target="_blank"
						/>

© {{ curDate | date('YYYY') }} Lucent Web Creative, LLC

							<translate>footer.send_system_report</translate>

						v{{ clientVersion }}

						<app-translate-lang-selector />

						<translate>footer.translations</translate>

						<app-link-external href="https://poeditor.com/join/project/B4nWT6EgnD">
							<translate>footer.translations_help</translate>
						</app-link-external>

</template>

<template>

			<app-ad-widget size="footer" />

			<template v-if="!Screen.isXs">

						<router-link
							class="-client-logo"
							:to="{ name: 'landing.client' }"
							v-app-track-event="`footer:client-promo`"
						>
							<app-theme-svg src="~img/game-jolt-client-logo.svg" alt="Game Jolt Client" />
						</router-link>
						<app-button solid primary :to="{ name: 'landing.client' }">
							<translate>Get It Now</translate>
						</app-button>

			</template>

									<router-link :to="{ name: 'landing.learn' }">
										<translate>What's Game Jolt</translate>
									</router-link>

									<router-link :to="{ name: 'landing.client' }">
										<translate>Client</translate>
									</router-link>

										<translate>Jams</translate>

									<router-link :to="{ name: 'forums.landing.overview' }">
										<translate>Forums</translate>
									</router-link>

									<router-link :to="{ name: 'landing.about' }">
										<translate>About</translate>
									</router-link>

									<router-link :to="{ name: 'landing.game-api' }">
										<translate>Game API</translate>
									</router-link>

									<router-link :to="{ name: 'landing.marketplace' }">
										<translate>Marketplace</translate>
									</router-link>

									<router-link :to="{ name: 'landing.partners' }">
										<translate>Partners</translate>
									</router-link>

									<app-link-external href="https://github.com/gamejolt">
										<translate>footer.open_source</translate>
									</app-link-external>

									<router-link
										:to="{ name: 'forums.channels.view', params: { name: 'gj-improve' } }"
									>
										<translate>Feature Requests</translate>
									</router-link>

									<app-link-external href="https://github.com/gamejolt/issue-tracker">
										<translate>Bug Tracker</translate>
									</app-link-external>

									<app-link-external href="https://www.redbubble.com/people/gamejolt/shop">
										<translate>Merch</translate>
									</app-link-external>

										<translate>footer.contact</translate>

									<router-link :to="{ name: 'legal.terms' }">
										<translate>legal.terms</translate>
									</router-link>

									<router-link :to="{ name: 'legal.privacy' }">
										<translate>legal.privacy</translate>
									</router-link>

									<router-link :to="{ name: 'legal.cookies' }">
										<translate>Cookie Policy</translate>
									</router-link>

					<router-link :to="{ name: 'home' }">
						<app-theme-svg src="~img/jolt.svg" alt="" width="68" height="72" />
					</router-link>

						<app-button
							trans
							circle
							icon="twitter-bird"
							href="https://twitter.com/gamejolt"
							target="_blank"
						/>
						<app-button
							trans
							circle
							icon="facebook"
							href="https://facebook.com/gamejolt"
							target="_blank"
						/>

© {{ curDate | date('YYYY') }} Lucent Web Creative, LLC

							<translate>footer.send_system_report</translate>

						v{{ clientVersion }}

						<app-translate-lang-selector />

						<translate>footer.translations</translate>

						<app-link-external href="https://poeditor.com/join/project/B4nWT6EgnD">
							<translate>footer.translations_help</translate>
						</app-link-external>

</template>


indent autocomplete object

indent autocomplete object

<template>

    <textarea ref="queryEditor" />

      <template v-if="queryError">

          {{ queryError }}

      </template>

      <template v-else>

          {{ labelQueryExecuted }} {{ queryDurationParsed }}ms

      </template>

      {{ labelGuide }}

</template>


Close variable accepts also custom class for closing icon

<template>
    <transition
            enter-active-class="animated quick fadeInRight"
            leave-active-class="animated quick fadeOutRight"
    >

            <slot name="content"></slot>
            <button v-if="close === 'bulma'" class="delete" @click="hideMe"></button>
            <button v-else-if="close === 'bootstrap'" type="button" class="close" aria-label="Close" @click="hideMe">
                ×
            </button>
            clear

    </transition>
</template>


eslint fix

eslint fix

<template>

    <slot name="title">

        {{ title }}

    </slot>

      <slot></slot>

</template>


switch from $els to $refs - vue2

switch from $els to $refs - vue2

<template>

    <icon-button
      class="btn"
      :text="inFullscreen ? $tr('exitFullscreen') : $tr('enterFullscreen')"
      @click="togglefullscreen"/>

</template>

<template>

  <div v-el:container class="container" allowfullscreen>
    <icon-button
      class="btn"
      :text="inFullscreen ? $tr('exitFullscreen') : $tr('enterFullscreen')"
      @click="togglefullscreen"/>
    <iframe v-el:sandbox class="sandbox" :src="rooturl" sandbox="allow-scripts"></iframe>
  </div>

</template>

<script>

  module.exports = {
    components: {
      'icon-button': require('kolibri.coreVue.components.iconButton'),
    },
    props: {
      defaultFile: {
        type: Object,
        required: true,
      },
    },
    data: () => ({
      inFullscreen: false,
    }),
    computed: {
      rooturl() {
        return this.defaultFile.storage_url;
      },
    },
    methods: {
      togglefullscreen() {
        const container = this.$els.container;
        if (!document.fullscreenElement
          && !document.webkitFullscreenElement
          && !document.mozFullScreenElement
          && !document.msFullscreenElement) {
          if (container.requestFullscreen) {
            container.requestFullscreen();
          } else if (container.webkitRequestFullscreen) {
            container.webkitRequestFullscreen();
          } else if (container.mozRequestFullScreen) {
            container.mozRequestFullScreen();
          } else if (container.msRequestFullscreen) {
            container.msRequestFullscreen();
          }
          this.inFullscreen = true;
        } else {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
          this.inFullscreen = false;
        }
      },
      updateFullscreenState() {
        if (!document.fullscreenElement
          && !document.webkitFullscreenElement
          && !document.mozFullScreenElement
          && !document.msFullscreenElement) {
          this.inFullscreen = false;
        }
      },
    },
    ready() {
      this.$emit('startTracking');
      const self = this;
      this.timeout = setTimeout(() => {
        self.$emit('progressUpdate', 1);
      }, 15000);

      document.addEventListener('fullscreenchange', this.updateFullscreenState, false);
      document.addEventListener('webkitfullscreenchange', this.updateFullscreenState, false);
      document.addEventListener('mozfullscreenchange', this.updateFullscreenState, false);
      document.addEventListener('MSFullscreenChange', this.updateFullscreenState, false);
    },
    beforeDestroy() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.$emit('stopTracking');

      document.removeEventListener('fullscreenchange', this.updateFullscreenState, false);
      document.removeEventListener('webkitfullscreenchange', this.updateFullscreenState, false);
      document.removeEventListener('mozfullscreenchange', this.updateFullscreenState, false);
      document.removeEventListener('MSFullscreenChange', this.updateFullscreenState, false);
    },
    $trNameSpace: 'html5Renderer',
    $trs: {
      exitFullscreen: 'Exit Fullscreen',
      enterFullscreen: 'Enter Fullscreen',
    },
  };

</script>

<style lang="stylus" scoped>

  .btn
    margin-bottom: 1em

  .container
    text-align: center
    height: 100vh
    max-height: calc(100vh - 24em)
    min-height: 400px
    &:fullscreen
      width: 100%
      height: 100%
      min-height: inherit
      max-height: inherit

  .sandbox
    /* Accounts for the button height. */
    height: calc(100% - 4em)
    width: 100%

</style>


Make surecustom-ui-menu header gets style

<template>

<slot name="header"/>

      <menu-option
        :disable-ripple="disableRipple"
        :disabled="option[keys.disabled]"
        :active="Boolean(option.active)"
        :icon-props="iconProps || option[keys.iconProps]"
        :icon="hasIcons ? option[keys.icon] : null"
        :key="index"
        :label="option[keys.type] === 'divider' ? null : option[keys.label] || option"
        :secondary-text="hasSecondaryText ? option[keys.secondaryText] : null"
        :type="option[keys.type]"

        @click.native="selectOption(option)"
        @keydown.enter.native.prevent="selectOption(option)"
        @keydown.esc.native.esc="closeMenu"

        v-for="(option, index) in options"
      >
        <slot name="option" :option="option"></slot>
      </menu-option>

</template>


Reduced spacing between contact info (#2808)

<template>
  <uw-card v-if="!isReady || applicantData" :loaded="isReady">
    <template v-if="applicantData.is_returning" #card-heading>

        Your Returning Student Application

    </template>
    <template v-else #card-heading>

        Your Seattle Application for
        {{ titleCaseWord(applicantData.quarter) }} {{ applicantData.year }}

    </template>
    <template v-if="applicantData.is_returning" #card-body>

Application status

        For application status, contact the Office of the University Registrar:

Email

            regoff@uw.edu

Location

2nd Floor Schmitz Hall

Registration for returning student

        You must
        confirm your enrollment
        and pay the enrollment fee prior to being able to register.

        You will then register beginning with Registration Period II for your returning quarter.
        Check dates on the
        Academic Calendar.

Resources for Seattle applicants

            Student financial aid, loans, and scholarships

            Check out the Student Guide

            View the UW Academic Calendar

    </template>
    <template v-else #card-body>
      <uw-link-button class="my-4" href="https://sdb.admin.uw.edu/admissions/uwnetid/appstatus.asp">
        View your {{ applicantData.type }} application status
      </uw-link-button>

Resources for Seattle applicants

ADMISSIONS

            Key dates & deadlines for freshmen

            Key dates & deadlines for transfer students

            Key dates & deadlines for postbaccalaureates

FINANCES

            Student financial aid, loans, and scholarships

            Financial aid key dates and deadlines

            Understand total cost of attendance

STUDENT LIFE

           Plan your visit: Seattle campus tours

           Explore campus living

           Disability Resources for Students (DRS)

Next steps if you are admitted

            Accept your admission offer and pay the fee

            Register for an Advising & Orientation session

            Make sure you’re immunized

            Submit a photo for your Husky Card

            See additional steps required to enroll at the UW

            International students: additional steps

Additional resources for admitted students

            View undergraduate majors

           Learn about First Year Programs

           Check out the Student Guide

    </template>
  </uw-card>
</template>


Use smaller boilerplate for adding external methods to the component

<template>

Kanji Recognition

            Copy and paste japanese text into the form below, then click "Show".
            The kanji for which you have flashcards will be
            hyperlinked to the Study pages, and a popup will reveal the
            Heisig keywords.

          <form class="mb-4">
            <textarea
              ref="input"
              v-model="japaneseText"
              class="w-full mb-2 p-2 min-h-[300px] border border-[#ddd] rounded-lg text-lg"
            ></textarea>
            <input
              type="submit"
              class="btn btn-success"
              value="Show"
              @click.prevent="onClickShow"
            />
          </form>

            <cjk-lang-ja>
              <template v-for="(k, i) in jtextarray" :key="i">

                  {{ k.kanji }}

              </template>
            </cjk-lang-ja>

            <button class="btn btn-success" @click="onClickToEdit">{{
              "Enter more japanese text"
            }}</button>

        <template v-if="isStateEdit">

Instructions

 Enter Japanese text to the left...

Purpose of this page

                In this reading section, you can test your memory from the kanji
                to the keyword, while also seeing kanji in context.

                See if you can recognize simple words made of kanji you already
                know. You may also be able to guess the meaning of some of these
                words based on the meaning of the characters.

Resources

                  Japanese text:
                  Aozora Bunko.

                  Guide to the Japanese Writing System
                  by Jack Halpern

        </template>

        <template v-if="!isStateEdit && !curKanji">

              Select a character on the left to display more information in this
              pane.

        </template>

        <template v-if="!isStateEdit && curKanji">

                  {{ curKanji.kanji }}

KANA - READING

{{ toRomaji(curKanji.kanji) }}

UNICODE POINT

                    {{ curKanji.kanji.charCodeAt(0) }}

Keyword

                    {{ curKanji.keyword }}

Heisig Index

                    {{ curKanji.seq_nr }}

                Go to study page

Dictionary

 DICT HERE

        </template>

</template>


后台管理上传更新

后台管理上传更新

<template>

    <el-button type="primary" :loading="uploading" @click="selectPic">上传</el-button>
    <input type="file" id="fileLoad" @change="onFileChange" multiple style="display: none;">
    <el-table :data="tableData" border style="width: 100%" class="table">
    <el-table-column label="日期" width="200" :formatter="format"></el-table-column>
    <el-table-column label="上传者" width="160" prop="authorName"></el-table-column>
    <el-table-column label="图片地址" inline-template>
      <template>
        <el-popover trigger="hover" placement="top">

            <el-tag>{{ row.url }}</el-tag>

        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200" inline-template>
      <template>
        <el-button size="small" type="danger" @click="handleDelete($index, row)"> 删除</el-button>
        <el-button size="small" type="info"> 复制地址</el-button>
      </template>
    </el-table-column>
  </el-table>

</template>

<template>

    <el-button type="primary" :loading="uploading" @click="selectPic">上传</el-button>
    <input type="file" id="fileLoad" @change="onFileChange" multiple style="display: none;">
    <el-table :data="tableData" border style="width: 100%" class="table">
    <el-table-column label="日期" width="160" prop="date"></el-table-column>
    <el-table-column label="上传者" width="160" prop="author"></el-table-column>
    <el-table-column label="图片地址" inline-template>
      <template>
        <el-popover trigger="hover" placement="top">

            <el-tag>{{ row.imgUrl }}</el-tag>

        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200" inline-template>
      <template>
        <el-button size="small" type="danger" @click="handleDelete($index, row)"> 删除</el-button>
        <el-button size="small" type="info"> 复制地址</el-button>
      </template>
    </el-table-column>
  </el-table>

</template>


Button: remove duplicated click event fix #28

<template>
	<a href="javascript:" class="weui_btn" :class="{'weui_btn_disabled':disabled, 'weui_btn_primary':type==='primary', 'weui_btn_warn':type==='warn', 'weui_btn_default':type==='default'}">
		{{text}}<slot></slot>
	</a>
</template>

<script>
export default {
  props: {
    type: {
      required: false,
      default: 'default'
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    text: {
      type: String,
      required: false
    }
  }
}
</script>

<style>
</style>

<template>
	<a href="javascript:" class="weui_btn" :class="{'weui_btn_disabled':disabled, 'weui_btn_primary':type==='primary', 'weui_btn_warn':type==='warn', 'weui_btn_default':type==='default'}" @click="click">
		{{text}}<slot></slot>
	</a>
</template>

<script>
export default {
  props: {
    type: {
      required: false,
      default: 'default'
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    text: {
      type: String,
      required: false
    }
  },
  methods: {
    click: function () {
      if (!this.disabled) {
        this.$dispatch('click')
      }
    }
  }
}
</script>

<style>
</style>


fix 本地图片无法加载

fix 本地图片无法加载

<template>

              壁纸

              搜索

              导入 / 导出

          <button type="button" class="close" @click="hideBox">
            ×
          </button>

              壁纸类型：
              <select class="form-control" v-model="bgType">

                <option :value="1">使用必应官方地址（每日更换）</option>
                <option :value="2">使用网络图片地址</option>
                <option :value="3">使用本地图片</option>
              </select>

                网络图片地址：
                <input
                  type="text"
                  class="form-control"
                  v-model="bgUrl"
                  placeholder="请填写网络图片地址"
                />

                选择本地图片：
                <input
                  type="file"
                  @change="localBackground($event)"
                  class="form-control-file"
                />

                模糊度：{{bgBlur}}
                <input
                  type="range"
                  min="0"
                  max="100"
                  step="1"
                  v-model="bgBlur"
                  class="custom-range"
                  id="customRange1"
                />

              是否开启搜索：
              <input id="switcher" type="checkbox" v-model="isSearchOpen" />

                搜索名称：
                <input
                  type="text"
                  class="form-control"
                  v-model="searchTitle"
                  placeholder="请填写搜索名称"
                />

                搜索地址：
                <input
                  type="text"
                  class="form-control"
                  v-model="searchUrl"
                  placeholder="请填写搜索地址（例如：https://www.baidu.com/s?wd=）"
                />

                图标地址：
                <input
                  type="text"
                  class="form-control"
                  v-model="searchIcon"
                  placeholder="请填写图标地址（例如：https://www.baidu.com/favicon.ico）"
                />

            <textarea
              name="migrateData"
              id="migrateData"
              class="form-control"
              cols="30"
              rows="10"
              style="margin-bottom:10px;"
              v-model="migrateData"
            ></textarea>
            <button type="button" class="btn btn-primary" @click="exportData">导出</button>
            <button type="button" class="btn btn-danger" @click="importData">导入</button>

</template>