Open file in viewer if available

Open file in viewer if available

Signed-off-by: Julius Härtl <bf353fa4999f2f148afcc6d8ee6cb1ee74cc07c3@bitgrid.net>

<template>
	<AttachmentDragAndDrop :card-id="cardId" class="drop-upload--sidebar">
		<button class="icon-upload" @click="clickAddNewAttachmment()">
			{{ t('deck', 'Upload attachment') }}
		</button>
		<input ref="localAttachments"
			type="file"
			style="display: none;"
			multiple
			@change="handleUploadFile">

							{{ attachment.name }}

						<progress :value="attachment.progress" max="100" />

							{{ attachment.data }}

						{{ formattedFileSize(attachment.extendedData.filesize) }}
						{{ relativeDate(attachment.createdAt*1000) }}
						{{ attachment.createdBy }}

				<Actions v-if="selectable">
					<ActionButton icon="icon-confirm" @click="$emit('selectAttachment', attachment)">
						{{ t('deck', 'Add this attachment') }}
					</ActionButton>
				</Actions>
				<Actions v-if="removable">
					<ActionLink v-if="attachment.fileid" icon="icon-folder" :href="'/index.php/f/'+attachment.fileid">
						{{ t('deck', 'Show in files') }}
					</ActionLink>
					<ActionButton icon="icon-delete">
						{{ t('deck', 'Unshare file') }}
					</ActionButton>
					<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="$emit('deleteAttachment', attachment)">
						{{ t('deck', 'Delete Attachment') }}
					</ActionButton>

					<ActionButton v-else icon="icon-history" @click="$emit('restoreAttachment', attachment)">
						{{ t('deck', 'Restore Attachment') }}
					</ActionButton>
				</Actions>

	</AttachmentDragAndDrop>
</template>

<template>
	<AttachmentDragAndDrop :card-id="cardId" class="drop-upload--sidebar">
		<button class="icon-upload" @click="clickAddNewAttachmment()">
			{{ t('deck', 'Upload attachment') }}
		</button>
		<input ref="localAttachments"
			type="file"
			style="display: none;"
			multiple
			@change="handleUploadFile">

							{{ attachment.name }}

						<progress :value="attachment.progress" max="100" />

							{{ attachment.data }}

						{{ formattedFileSize(attachment.extendedData.filesize) }}
						{{ relativeDate(attachment.createdAt*1000) }}
						{{ attachment.createdBy }}

				<Actions v-if="selectable">
					<ActionButton icon="icon-confirm" @click="$emit('selectAttachment', attachment)">
						{{ t('deck', 'Add this attachment') }}
					</ActionButton>
				</Actions>
				<Actions v-if="removable">
					<ActionButton v-if="attachment.deletedAt === 0" icon="icon-delete" @click="$emit('deleteAttachment', attachment)">
						{{ t('deck', 'Delete Attachment') }}
					</ActionButton>

					<ActionButton v-else icon="icon-history" @click="$emit('restoreAttachment', attachment)">
						{{ t('deck', 'Restore Attachment') }}
					</ActionButton>
				</Actions>

	</AttachmentDragAndDrop>
</template>


WIP(icon): fix icon display

WIP(icon): fix icon display

affects: da39a3ee5e6b4b0d3255bfef95601890afd80709@rei/cdr-icon

<template>

Icons

    <cdr-icon-sprite/>
    <icon-account-profile data-backstop="cdr-icon-add" />

Default icon size

    <cdr-row
      cols="3"
      cols-md="6"
      cols-lg="10"
    >
      <cdr-col
        v-for="(val, key) in Icons"
        :key="key"
        v-if="key !== 'CdrIcon' && key !== 'CdrIconSprite'"
      >

            <svg :is="key" />

{{ key }}

            <cdr-icon :use="`#${getSpriteId(key)}`" />

using sprite

      </cdr-col>
    </cdr-row>

Small icon size

    <cdr-row
      cols="3"
      cols-md="6"
      cols-lg="10"
    >
      <cdr-col
        v-for="(val, key) in Icons"
        :key="key"
        v-if="key !== 'CdrIcon' && key !== 'CdrIconSprite'"
      >

          <svg
            :is="key"
            modifier="sm"
          />

{{ key }}

      </cdr-col>
    </cdr-row>

Large icon size

    <cdr-row
      cols="3"
      cols-md="6"
      cols-lg="10"
    >
      <cdr-col
        v-for="(val, key) in Icons"
        :key="key"
        v-if="key !== 'CdrIcon' && key !== 'CdrIconSprite'"
      >

          <svg
            :is="key"
            modifier="lg"
          />

{{ key }}

      </cdr-col>
    </cdr-row>

</template>


update navbar component

update navbar component

<template>

			<button type="button" class="navbar-toggle" @click='collapsAction'>
			Toggle navigation

			</button>
			{{Logo}}

<router-link to="/">Home</router-link>

<router-link to="/app">App</router-link>

					{{userEmail}}

<router-link to = "login">Login</router-link>

<router-link to = 'update-profile'>Profile</router-link>

<router-link to="/login">Logout</router-link>

</template>

<template>

			<button type="button" class="navbar-toggle">
			Toggle navigation

			</button>
			{{Logo}}

<router-link to="/">Home</router-link>

<router-link to="/app">App</router-link>

					{{userEmail}}

<router-link to = "login">Login</router-link>

<router-link to = 'update-profile'>Profile</router-link>

<router-link to="/login">Logout</router-link>

</template>


Pass the tasks data as a prop and sync with parent

<template>

        <modal id="delete" heading="Delete this task" body="Are you sure you want to delete this task ?" approve-button-text="Delete" deny-button-text="Cancel"></modal>

{{ heading }}

        <alert :type="message.type" placement="top-right" :show.sync="showMessage" :dismissable="true" :duration="3000" width="400px">
             Well Done !
{{ message.message }}

        </alert>

                        Task
                        Description
                        Actions

                        {{ task.title | strlimit }}
                        {{ task.description | strlimit }}

                                <button class="btn btn-sm btn-danger" data-title="Delete" data-toggle="modal" data-target="#delete" data-placement="top" rel="tooltip" @click="setSelectedTask(task)"></button>
                                <button class="btn btn-sm btn-success" @click.prevent="toggleCompletion(task)"></button>

    <spinner type="pulse" :show="loading"></spinner>
</template>


맵 수정, 애니메이션 수정

맵 수정, 애니메이션 수정

<template>

				2017.11.04(토) 12:00PM
				세븐스프링스 목동점
				평생을 같이하고 싶은 사람을 만나 한 가정을 이루게 되었습니다. 오셔서 저희의 시작을 지켜봐 주시고 축하해 주시면 감사하겠습니다.

세븐스프링스 목동점

서울시 양천구 목동동로 293 현대 41타워 41층

02-2168-2511

지하철

오목교역(목동운동장앞) 2번출구, 도보 10분

버스

간선: 571, 603 | 지선: 6624, 6627, 6637

지하철

2시간 무료

(주차공간 부족시 목동 공영주차장을 이용해 주세요.)

목동 공영주차창 지도 보기

목동 공영주차장

서울시 양천구 목동 915 (현대백화점 옆)

</template>


removed groups form now (= folders with permissions)


Fix Bug where Placeholder is wider than Main image

The `.progressive-image-placeholder` should have the same size as the `.progressive-image-main` class so that the main image blends nicely on top of the placeholder image.  This bug occurs when the main image is not wide enough to fill its parent container

<template>

    <canvas v-if="!shouldImageRender" width="1" height="1" class="canvas" ref="canvas"></canvas>

      <transition
        enter-class="progressive-image-enter"
        enter-active-class="progressive-image-before-enter">

      </transition>
      <transition
        enter-class="progressive-image-enter"
        enter-active-class="progressive-image-before-enter">

      </transition>

</template>


fix(MdApp): normalized component's tag before checking to match slot … (#1994)


show clear the add LDAP account button

show clear the add LDAP account button

Signed-off-by: Rohit Yadav <902b9eb5dd62819678163bd5e00fbf0cbc7c264b@shapeblue.com>

// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied.  See the License for the
// specific language governing permissions and limitations
// under the License.

<template>

    <console :resource="resource" :size="size" v-if="resource && resource.id && dataView" />

      <template slot="title">
        {{ $t(action.label) }}
      </template>
       0 && ('groupShow' in action ? action.show(resource, $store.getters) : true)))) ||
            (dataView && action.dataView && ('show' in action ? action.show(resource, $store.getters) : true))
          )" >

            {{ $t(action.label) }}

       0 && ('groupShow' in action ? action.show(resource, $store.getters) : true)))) ||
            (dataView && action.dataView && ('show' in action ? action.show(resource, $store.getters) : true))
          )"
        :icon="action.icon"
        :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
        :shape="!dataView && ['plus', 'user-add'].includes(action.icon) ? 'round' : 'circle'"
        style="margin-left: 5px"
        :size="size"
        @click="execAction(action)">

          {{ $t(action.label) }}

</template>

// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied.  See the License for the
// specific language governing permissions and limitations
// under the License.

<template>

    <console :resource="resource" :size="size" v-if="resource && resource.id && dataView" />

      <template slot="title">
        {{ $t(action.label) }}
      </template>
       0 && ('groupShow' in action ? action.show(resource, $store.getters) : true)))) ||
            (dataView && action.dataView && ('show' in action ? action.show(resource, $store.getters) : true))
          )" >

            {{ $t(action.label) }}

       0 && ('groupShow' in action ? action.show(resource, $store.getters) : true)))) ||
            (dataView && action.dataView && ('show' in action ? action.show(resource, $store.getters) : true))
          )"
        :icon="action.icon"
        :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
        :shape="!dataView && action.icon === 'plus' ? 'round' : 'circle'"
        style="margin-left: 5px"
        :size="size"
        @click="execAction(action)">

          {{ $t(action.label) }}

</template>


Apply suggestions from code review

Apply suggestions from code review

<template>

      <KIconButton
        v-show="searchBoxIsDropdown"
        ref="toggleBtn"
        icon="search"
        size="small"
        style="margin-left: 8px;"
        :color="$themeTokens.textInverted"
        @click="toggleDropdownSearchBox"
      />

        <SearchBox
          ref="searchBox"
          :icon="searchBoxIsDropdown ? 'forward' : 'search'"
          :class="searchBoxIsDropdown ? '' : 'search-box-within-action-bar'"
          @closeDropdownSearchBox="closeDropdownSearchBox"
        />

</template>


Maintaining thumbnail aspect ratio

Maintaining thumbnail aspect ratio

<template>

  <router-link :to="link" class="card" :style="cardHeight">

      <content-icon v-if="!thumbnail" :kind="kind" :style="iconSize" class="card-thumbnail-backup"/>

 0" class="card-progress-icon-wrapper">
        <progress-icon :progress="progress"/>

        <content-icon :kind="kind" class="card-content-icon"/>

        <div
          class="card-progress-bar"
          :style="{ width: `${progress * 100}%` }"
          :class="{ 'card-progress-bar-mastered': mastered, 'card-progress-bar-progress': inProgress }">

{{ title }}

{{ subtitle }}

  </router-link>

</template>

<template>

  <router-link :to="link" class="card">

      <content-icon v-if="!thumbnail" :kind="kind" class="card-thumbnail-backup"/>

 0" class="card-progress-icon-wrapper">
        <progress-icon :progress="progress"/>

        <content-icon :kind="kind" class="card-content-icon"/>

        <div
          class="card-progress-bar"
          :style="{ width: `${progress * 100}%` }"
          :class="{ 'card-progress-bar-mastered': mastered, 'card-progress-bar-progress': inProgress }">

{{ title }}

{{ subtitle }}

  </router-link>

</template>


Removing Learner tag from userlist

Removing Learner tag from userlist

<template>

        All Users

       ( {{ visibleUsers.length }} )

      Filter User Type
      <select v-model="roleFilter" id="type-filter" name="type-filter">
        <option selected value="all"> All Users </option>
        <option :value="userKinds.ADMIN"> Admins </option>
        <option :value="userKinds.COACH"> Coaches </option>
        <option :value="userKinds.LEARNER"> Learners </option>
      </select>

        <svg class="icon" src="../icons/search.svg" aria-hidden="true"></svg>
        <input
          id="search-field"
          aria-label="Search for a user..."
          type="search"
          v-model="searchFilter"
          placeholder="Search for a user...">

        <icon-button @click="openCreateUserModal" class="create-user-button" text="Add New" :primary="true">
          <svg class="add-user" src="../icons/add_new_user.svg"></svg>
        </icon-button>

    <user-edit-modal
      v-if="editingUser"
      :user="currentUserEdit"
      @close="closeEditUserModal">
    </user-edit-modal>
    <user-create-modal
      v-if="creatingUser"
      @close="closeCreateUserModal">
    </user-create-modal>

Users

           Full Name

              Role

           Username
           Edit

              {{user.full_name}}

              {{user.kind | capitalize}}

            {{user.username}}

            <icon-button class="edit-user-button" @click="openEditUserModal(user)">
              Edit Account Info
              <svg src="../icons/pencil.svg"></svg>
            </icon-button>

{{ $tr('noUsersExist') }}

{{ $tr('allUsersFilteredOut') }}

</template>


dead code

dead code

<template>

      {{userPageTitle}}

     ( {{ visibleUsers.length }} )

      <select v-model="roleFilter" name="user-filter">
        <option selected value="all"> All Users </option>
        <option value="admin"> Admins </option>
        <option value="learner"> Learners </option>
      </select>

        <svg class="search-button" src="../icons/search.svg"></svg>
        <input
        type="search"
        v-model="searchFilter"
        placeholder="Search for a user...">

        <user-create-modal></user-create-modal>

           Student Name
           Username
           Edit

            {{user.full_name}}

              {{role.kind | capitalize}}

            {{user.username}}

            <user-edit-modal
              :userid="user.id"
              :roles="user.roles"
              :username="user.username"
              :fullname="user.full_name">
            </user-edit-modal>

</template>


remove unused css

remove unused css

<template>

          <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>

Are you sure ?

You are going to delete the {{ instanceName }} instance.

It represents  {{ instanceSize }} of data.

          Cancel

            Delete

</template>


Flush button on sign-up page

Flush button on sign-up page

<template>

    <ui-toolbar type="colored" textColor="white">
      <template slot="icon">
        <ui-icon class="app-bar-icon"><logo /></ui-icon>
      </template>
      <template slot="brand">
        {{ $tr('kolibri') }}
      </template>

        <router-link
          id="signin"
          :to="signInPage"
        >
          {{ $tr('logIn') }}
        </router-link>

    </ui-toolbar>

    <form
      class="signup-form"
      ref="form"
      @submit.prevent="signUp"
    >
      <ui-alert
        v-if="unknownError"
        type="error"
        @dismiss="resetSignUpState"
      >
        {{ errorMessage }}
      </ui-alert>

{{ $tr('createAccount') }}

      <k-textbox
        ref="name"
        id="name"
        type="text"
        autocomplete="name"
        :label="$tr('name')"
        :maxlength="120"
        :autofocus="true"
        :invalid="nameIsInvalid"
        :invalidText="nameIsInvalidText"
        @blur="nameBlurred = true"
        v-model="name"
      />

      <k-textbox
        ref="username"
        id="username"
        type="text"
        autocomplete="username"
        :label="$tr('username')"
        :maxlength="30"
        :invalid="usernameIsInvalid"
        :invalidText="usernameIsInvalidText"
        @blur="usernameBlurred = true"
        @input="resetSignUpState"
        v-model="username"
      />

      <k-textbox
        ref="password"
        id="password"
        type="password"
        autocomplete="new-password"
        :label="$tr('password')"
        :invalid="passwordIsInvalid"
        :invalidText="passwordIsInvalidText"
        @blur="passwordBlurred = true"
        v-model="password"
      />

      <k-textbox
        ref="confirmedPassword"
        id="confirmed-password"
        type="password"
        autocomplete="new-password"
        :label="$tr('reEnterPassword')"
        :invalid="confirmedPasswordIsInvalid"
        :invalidText="confirmedPasswordIsInvalidText"
        @blur="confirmedPasswordBlurred = true"
        v-model="confirmedPassword"
      />

      <k-select
        :label="$tr('facility')"
        v-model="selectedFacility"
        :options="facilityList"
        :invalid="facilityIsInvalid"
        :invalidText="facilityIsInvalidText"
        @blur="facilityBlurred = true"
      />

      <k-button
        :disabled="busy"
        :primary="true"
        :text="$tr('finish')"
        type="submit"
      />

    </form>

      <language-switcher-footer />

</template>


Fix bug

Fix bug

<template>

			<button @click="post" :title="$t('title')"><fa icon="pencil-alt"/></button>

			<template v-if="$store.state.device.deckMode">

					<router-link to="/"><fa icon="columns"/>
{{ $t('deck') }}
</router-link>

					<fa icon="home"/>
{{ $t('home') }}

			</template>
			<template v-else>

					<router-link to="/"><fa icon="home"/>
{{ $t('home') }}
</router-link>

					<fa icon="columns"/>
{{ $t('deck') }}

			</template>

				<fa icon="comments"/><template v-if="hasUnreadMessagingMessage"><fa icon="circle"/></template>

				<fa icon="gamepad"/><template v-if="hasGameInvitations"><fa icon="circle"/></template>

				<fa icon="cloud"/>

				<fa :icon="['far', 'bell']"/>

				<fa icon="cog"/>

			<router-link :to="`/@${ $store.state.i.username }`">
				<mk-avatar class="avatar" :user="$store.state.i"/>
			</router-link>

					<fa icon="power-off"/>

					<router-link to="/i/favorites"><fa icon="star"/></router-link>

					<fa :icon="['far', 'envelope']"/>{{ $store.state.i.pendingReceivedFollowRequestsCount }}

				<template v-if="$store.state.device.darkmode"><fa icon="moon"/></template><template v-else><fa :icon="['far', 'moon']"/></template>

	<transition :name="`slide-${navbar}`">

			<mk-notifications/>

	</transition>

</template>

<template>

			<button @click="post" :title="$t('title')"><fa icon="pencil-alt"/></button>

			<template v-if="$store.state.device.deckMode">

					<router-link to="/"><fa icon="columns"/></router-link>

					<router-link to="/home"><fa icon="home"/></router-link>

			</template>
			<template v-else>

					<router-link to="/"><fa icon="home"/></router-link>

					<router-link to="/deck"><fa icon="columns"/></router-link>

			</template>

				<fa icon="comments"/><template v-if="hasUnreadMessagingMessage"><fa icon="circle"/></template>

				<fa icon="gamepad"/><template v-if="hasGameInvitations"><fa icon="circle"/></template>

				<fa icon="cloud"/>

				<fa :icon="['far', 'bell']"/>

				<fa icon="cog"/>

			<router-link :to="`/@${ $store.state.i.username }`">
				<mk-avatar class="avatar" :user="$store.state.i"/>
			</router-link>

					<fa icon="power-off"/>

					<router-link to="/i/favorites"><fa icon="star"/></router-link>

					<fa :icon="['far', 'envelope']"/>{{ $store.state.i.pendingReceivedFollowRequestsCount }}

				<template v-if="$store.state.device.darkmode"><fa icon="moon"/></template><template v-else><fa :icon="['far', 'moon']"/></template>

	<transition :name="`slide-${navbar}`">

			<mk-notifications/>

	</transition>

</template>


fix for null reaction

fix for null reaction

<script lang="coffee">
import Records from '@/shared/services/records'
import Session from '@/shared/services/session'
import {merge, capitalize, difference, keys, throttle, startsWith, each, compact} from 'lodash'
import WatchRecords from '@/mixins/watch_records'
import { colonToUnicode, stripColons } from '@/shared/helpers/emojis'

export default
  mixins: [WatchRecords]
  props:
    model: Object
    fetch:
      type: Boolean
      default: false

  data: ->
    diameter: 20
    maxNamesCount: 10
    reactionHash: {all: []}

  mounted: ->
    @watchRecords
      collections: ['reactions']
      query: (store) =>
        @reactionHash = {all: []}
        each Records.reactions.find(@reactionParams), (reaction) =>
          unless @reactionHash[reaction.reaction]?
            @reactionHash[reaction.reaction] = []
          user = Records.users.find(reaction.userId)
          @reactionHash[reaction.reaction].push(user)
          @reactionHash['all'].push(user)
          true

    if @fetch
      Records.reactions.fetch
        params:
          reactable_type: capitalize(@model.constructor.singular)
          reactable_id: @model.id

  computed:
    reactionParams: ->
      reactableType: capitalize(@model.constructor.singular)
      reactableId: @model.id

    reactionTypes: ->
      compact difference keys(@reactionHash), ['all']

    myReaction: ->
      return unless Session.isSignedIn()
      Records.reactions.find(merge({}, @reactionParams, userId: Session.user().id))[0]

    otherReaction: ->
      Records.reactions.find(merge({}, @reactionParams, {userId: {'$ne': Session.user().id}}))[0]

    reactionTypes: ->
      difference keys(@reactionHash), ['all']

  methods:
    stripColons: stripColons
    colonToUnicode: colonToUnicode
    removeMine: (reaction) ->
      mine = Records.reactions.find(merge({}, @reactionParams,
        userId:   Session.user().id
        reaction: reaction
      ))[0]
      mine.destroy() if mine

    translate: (shortname) ->
      title = emojiTitle(shortname)
      if startsWith(title, "reactions.") then shortname else title

    countFor: (reaction) ->
      if @reactionHash[reaction]?
        @reactionHash[reaction].length - @maxNamesCount
      else
        0

</script>
<template lang="pug">
.reactions-display.mr-2(v-if="reactionTypes.length")
  .reactions-display__emojis
    .reaction.lmo-pointer(@click="removeMine(reaction)" v-for="reaction in reactionTypes" :key="reaction")
      v-tooltip(bottom)
        template(v-slot:activator="{ on }")
          .reactions-display__group(v-on="on")
            span {{colonToUnicode(reaction)}}
            //- span(v-if="reactionHash[reaction].length > 1") {{reactionHash[reaction].length}}
            //- span(v-if="reactionHash[reaction]") list present
            user-avatar.reactions-display__author(v-for="user in reactionHash[reaction]" :key="user.id" :user="user" :size="diameter")
        .reactions-display__name(v-for="user in reactionHash[reaction]" :key="user.id")
          span {{ user.name }}
</template>

<style lang="sass">
.reactions-display__group
	opacity: 0.8
	display: flex
	align-items: center
	margin-right: 2px
	span
		font-size: 20px
		line-height: 20px
		margin-bottom: -5px
.reactions-display__emojis
	display: flex
</style>

<script lang="coffee">
import Records from '@/shared/services/records'
import Session from '@/shared/services/session'
import {merge, capitalize, difference, keys, throttle, startsWith, each} from 'lodash'
import WatchRecords from '@/mixins/watch_records'
import { colonToUnicode, stripColons } from '@/shared/helpers/emojis'

export default
  mixins: [WatchRecords]
  props:
    model: Object
    fetch:
      type: Boolean
      default: false

  data: ->
    diameter: 20
    maxNamesCount: 10
    reactionHash: {all: []}

  mounted: ->
    @watchRecords
      collections: ['reactions']
      query: (store) =>
        @reactionHash = {all: []}
        each Records.reactions.find(@reactionParams), (reaction) =>
          unless @reactionHash[reaction.reaction]?
            @reactionHash[reaction.reaction] = []
          user = Records.users.find(reaction.userId)
          @reactionHash[reaction.reaction].push(user)
          @reactionHash['all'].push(user)
          true

    if @fetch
      Records.reactions.fetch
        params:
          reactable_type: capitalize(@model.constructor.singular)
          reactable_id: @model.id

  computed:
    reactionParams: ->
      reactableType: capitalize(@model.constructor.singular)
      reactableId: @model.id

    reactionTypes: ->
      difference keys(@reactionHash), ['all']

    myReaction: ->
      return unless Session.isSignedIn()
      Records.reactions.find(merge({}, @reactionParams, userId: Session.user().id))[0]

    otherReaction: ->
      Records.reactions.find(merge({}, @reactionParams, {userId: {'$ne': Session.user().id}}))[0]

    reactionTypes: ->
      difference keys(@reactionHash), ['all']

  methods:
    stripColons: stripColons
    colonToUnicode: colonToUnicode
    removeMine: (reaction) ->
      mine = Records.reactions.find(merge({}, @reactionParams,
        userId:   Session.user().id
        reaction: reaction
      ))[0]
      mine.destroy() if mine

    translate: (shortname) ->
      title = emojiTitle(shortname)
      if startsWith(title, "reactions.") then shortname else title

    countFor: (reaction) ->
      if @reactionHash[reaction]?
        @reactionHash[reaction].length - @maxNamesCount
      else
        0

</script>
<template lang="pug">
.reactions-display.mr-2(v-if="reactionTypes.length")
  .reactions-display__emojis
    .reaction.lmo-pointer(@click="removeMine(reaction)" v-for="reaction in reactionTypes" :key="reaction")
      v-tooltip(bottom)
        template(v-slot:activator="{ on }")
          .reactions-display__group(v-on="on")
            span {{colonToUnicode(reaction)}}
            //- span(v-if="reactionHash[reaction].length > 1") {{reactionHash[reaction].length}}
            //- span(v-if="reactionHash[reaction]") list present
            user-avatar.reactions-display__author(v-for="user in reactionHash[reaction]" :key="user.id" :user="user" :size="diameter")
        .reactions-display__name(v-for="user in reactionHash[reaction]" :key="user.id")
          span {{ user.name }}
</template>

<style lang="sass">
.reactions-display__group
	opacity: 0.8
	display: flex
	align-items: center
	margin-right: 2px
	span
		font-size: 20px
		line-height: 20px
		margin-bottom: -5px
.reactions-display__emojis
	display: flex
</style>


[FIX] skiptrack() now checks if there is any remaining question before either skipping or exiting the game session

<template>

for dev purpose: {{ correctAnswer }}

      <button class="play-button fa fa-play fa-5x" v-bind:class="{ 'playing': playing, 'not-playing': !playing }" v-on:click="startNewExtract()" :disabled="playing == 1"></button>

Time remaining: {{ timer }}

      <button class="answer-button" v-bind:class="{ 'active-button': playing, 'hide': !displayPropositions }" v-on:click="displayToggle(0)" :disabled="playing == 0">{{ answers[0] }}</button>
      <button class="answer-button" v-bind:class="{ 'active-button': playing, 'hide': !displayPropositions }" v-on:click="displayToggle(1)" :disabled="playing == 0">{{ answers[1] }}</button>

      <button class="answer-button" v-bind:class="{ 'active-button': playing, 'hide': !displayPropositions }" v-on:click="displayToggle(2)" :disabled="playing == 0">{{ answers[2] }}</button>
      <button class="answer-button" v-bind:class="{ 'active-button': playing, 'hide': !displayPropositions }" v-on:click="displayToggle(3)" :disabled="playing == 0">{{ answers[3] }}</button>

{{ skip }}

</template>


Remove props from veui-link slot

Remove props from veui-link slot

<template>
<component v-if="!to"
  class="veui-link"
  :class="klass"
  :is="fallback"
  @click="handleRedirect"><slot></slot></component>
<router-link v-else-if="$router && !native"
  class="veui-link"
  :class="klass"
  :to="to"
  :replace="replace">
  <slot></slot>
</router-link>
<a v-else
  class="veui-link"
  :class="klass"
  :href="to"
  @click="handleRedirect">
  <slot></slot>
</a>
</template>
<script>
export default {
  name: 'veui-link',
  components: {
    'veui-element': Element
  },
  props: {
    to: {
      type: String,
      default: ''
    },
    replace: Boolean,
    native: Boolean,
    fallback: {
      type: String,
      default: 'span'
    },
    disabled: Boolean
  },
  computed: {
    klass () {
      return {
        'veui-disabled': this.disabled
      }
    }
  },
  methods: {
    handleRedirect (event) {
      if (this.disabled) {
        event.preventDefault()
        return
      }
      if (this.to) {
        this.$emit('click', event)

        if (this.replace && !event.defaultPrevented) {
          event.preventDefault()
          location.replace(this.to)
        }
      } else {
        event.preventDefault()
        this.$emit('click', event)
      }
    }
  }
}
</script>

<template>
<component v-if="!to"
  class="veui-link"
  :class="klass"
  :is="fallback"
  @click="handleRedirect"><slot :disabled="disabled"></slot></component>
<router-link v-else-if="$router && !native"
  class="veui-link"
  :class="klass"
  :to="to"
  :replace="replace">
  <slot></slot>
</router-link>
<a v-else
  class="veui-link"
  :class="klass"
  :href="to"
  @click="handleRedirect">
  <slot></slot>
</a>
</template>
<script>
export default {
  name: 'veui-link',
  components: {
    'veui-element': Element
  },
  props: {
    to: {
      type: String,
      default: ''
    },
    replace: Boolean,
    native: Boolean,
    fallback: {
      type: String,
      default: 'span'
    },
    disabled: Boolean
  },
  computed: {
    klass () {
      return {
        'veui-disabled': this.disabled
      }
    }
  },
  methods: {
    handleRedirect (event) {
      if (this.disabled) {
        event.preventDefault()
        return
      }
      if (this.to) {
        this.$emit('click', event)

        if (this.replace && !event.defaultPrevented) {
          event.preventDefault()
          location.replace(this.to)
        }
      } else {
        event.preventDefault()
        this.$emit('click', event)
      }
    }
  }
}
</script>


修复modal弹层显示的问题

修复modal弹层显示的问题

<template>
    <Page>

            <Toolbar>
                <Buttons end slot="buttons">
                    <Button role="bar-button" type="solid" @click="closeModal">
                        Close
                    </Button>
                </Buttons>
                <Title>测试页面</Title>
            </Toolbar>

        <Content padding ref="content">

说明

Hello, 这里是 Modal 测试页面, 这个页面具有Page组件的完整特性!

            <Button block @click="closeModal">关闭Modal</Button>
            <Button block @click="scrollToBottom">滚动到底部</Button>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolore eveniet excepturi illum impedit in incidunt inventore minima, molestias obcaecati odio officia porro quam quidem quo recusandae repudiandae veritatis, vero.

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolore eveniet excepturi illum impedit in incidunt inventore minima, molestias obcaecati odio officia porro quam quidem quo recusandae repudiandae veritatis, vero.

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolore eveniet excepturi illum impedit in incidunt inventore minima, molestias obcaecati odio officia porro quam quidem quo recusandae repudiandae veritatis, vero.

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolore eveniet excepturi illum impedit in incidunt inventore minima, molestias obcaecati odio officia porro quam quidem quo recusandae repudiandae veritatis, vero.

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolore eveniet excepturi illum impedit in incidunt inventore minima, molestias obcaecati odio officia porro quam quidem quo recusandae repudiandae veritatis, vero.

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolore eveniet excepturi illum impedit in incidunt inventore minima, molestias obcaecati odio officia porro quam quidem quo recusandae repudiandae veritatis, vero.

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolore eveniet excepturi illum impedit in incidunt inventore minima, molestias obcaecati odio officia porro quam quidem quo recusandae repudiandae veritatis, vero.

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolore eveniet excepturi illum impedit in incidunt inventore minima, molestias obcaecati odio officia porro quam quidem quo recusandae repudiandae veritatis, vero.

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolore eveniet excepturi illum impedit in incidunt inventore minima, molestias obcaecati odio officia porro quam quidem quo recusandae repudiandae veritatis, vero.

            <Button block @click="scrollToTop">滚动到顶部</Button>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor dolore excepturi in itaque iure, magni minima nam officia porro possimus quaerat quos similique sint unde velit vero vitae voluptatibus.

        </Content>

            <Toolbar>
                <Title>Modal Toolbar Footer</Title>
            </Toolbar>

    </Page>
</template>

<template>
    <Page>

            <Toolbar>
                <Buttons end slot="buttons">
                    <Button role="bar-button" type="solid" @click="closeModal">
                        Close
                    </Button>
                </Buttons>
                <Title>测试页面</Title>
            </Toolbar>

        <Content padding ref="content" >

说明

Hello, 这里是 Modal 测试页面, 这个页面具有Page组件的完整特性!

            <Button block @click="closeModal">关闭Modal</Button>
            <Button block @click="scrollToBottom">滚动到底部</Button>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolore eveniet excepturi illum impedit in incidunt inventore minima, molestias obcaecati odio officia porro quam quidem quo recusandae repudiandae veritatis, vero.

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolore eveniet excepturi illum impedit in incidunt inventore minima, molestias obcaecati odio officia porro quam quidem quo recusandae repudiandae veritatis, vero.

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolore eveniet excepturi illum impedit in incidunt inventore minima, molestias obcaecati odio officia porro quam quidem quo recusandae repudiandae veritatis, vero.

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolore eveniet excepturi illum impedit in incidunt inventore minima, molestias obcaecati odio officia porro quam quidem quo recusandae repudiandae veritatis, vero.

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolore eveniet excepturi illum impedit in incidunt inventore minima, molestias obcaecati odio officia porro quam quidem quo recusandae repudiandae veritatis, vero.

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolore eveniet excepturi illum impedit in incidunt inventore minima, molestias obcaecati odio officia porro quam quidem quo recusandae repudiandae veritatis, vero.

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolore eveniet excepturi illum impedit in incidunt inventore minima, molestias obcaecati odio officia porro quam quidem quo recusandae repudiandae veritatis, vero.

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolore eveniet excepturi illum impedit in incidunt inventore minima, molestias obcaecati odio officia porro quam quidem quo recusandae repudiandae veritatis, vero.

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolore eveniet excepturi illum impedit in incidunt inventore minima, molestias obcaecati odio officia porro quam quidem quo recusandae repudiandae veritatis, vero.

            <Button block @click="scrollToTop">滚动到顶部</Button>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor dolore excepturi in itaque iure, magni minima nam officia porro possimus quaerat quos similique sint unde velit vero vitae voluptatibus.

        </Content>

            <Toolbar>
                <Title>Modal Toolbar Footer</Title>
            </Toolbar>

    </Page>
</template>


remove redundant v-if checks

remove redundant v-if checks

/*
Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
*/
<template>
    <fieldset>

          <legend :id="id">Well Class</legend>

            Save
            Back to top

          <form-input
              id="wellTagNumberStaff"
              label="Well Tag Number"
              type="text"
              :value="$route.params.id"
              disabled
          ></form-input>

          <form-input
            select
            v-model="wellStatusCodeInput"
            :options="codes.well_status_codes"
            value-field="well_status_code"
            text-field="description"
            label="Well Status"
            placeholder="Select status"
            :errors="errors['well_status']"
            :loaded="fieldsLoaded['well_status']"
            id="wellStatusCodeInput"></form-input>

              <template slot="first">
                <option value="" disabled>Select class</option>
              </template>

              <div v-for="(error, index) in errors['well_class']" :key="`wellClass error ${index}`">
                {{ error }}

              <template slot="first">
                <option value="" disabled>Select subclass</option>
              </template>

              <div v-for="(error, index) in errors['well_subclass']" :key="`wellSubclass error ${index}`">
                {{ error }}

          <form-input
            select
            v-model="intendedWaterUseInput"
            :options="codes.intended_water_uses"
            value-field="intended_water_use_code"
            text-field="description"
            label="Intended Water Use"
            placeholder="Select intended use"
            :errors="errors['intended_water_use']"
            :loaded="fieldsLoaded['intended_water_use']"
            id="intendedWaterUse"></form-input>

            <v-select
              v-model="wellTagNumberInput"
              id="wellTagNumberSelect"
              :filterable="false"
              :options="wellTagOptions"
              label="well_tag_number"
              @search="onWellTagSearch">
              <template slot="no-options">
                  Search by well tag number or owner name
              </template>
              <template slot="option" slot-scope="option">

                  {{ option.well_tag_number }} ({{ option.owner_full_name }})

              </template>
              <template slot="selected-option" slot-scope="option">

                  {{ option.well_tag_number }}

              </template>
            </v-select>

          <form-input
              id="idPlateNumber"
              label="Well Identification Plate Number"
              type="text"
              v-model="idPlateNumberInput"
              :errors="errors['identification_plate_number']"
              :loaded="fieldsLoaded['identification_plate_number']"
          ></form-input>

          <form-input
              id="wellPlateAttached"
              label="Where Identification Plate Attached"
              type="text"
              v-model="wellPlateAttachedInput"
              :errors="errors['well_identification_plate_attached']"
              :loaded="fieldsLoaded['well_identification_plate_attached']"
          ></form-input>

          <form-input
              id="wellPlateAttachedBy"
              label="Identification Plate Attached By"
              type="text"
              v-model="idPlateAttachedByInput"
              :errors="errors['id_plate_attached_by']"
              :loaded="fieldsLoaded['id_plate_attached_by']"
          ></form-input>

          <form-input
              id="waterSupplySystem"
              label="Water Supply System Name"
              type="text"
              v-model="waterSupplySystemInput"
              :errors="errors['water_supply_system_name']"
              :loaded="fieldsLoaded['water_supply_system_name']"
          ></form-input>

          <form-input
              id="waterSupplyWell"
              label="Water Supply Well Name"
              type="text"
              v-model="waterSupplyWellInput"
              :errors="errors['water_supply_system_well_name']"
              :loaded="fieldsLoaded['water_supply_system_well_name']"
          ></form-input>

          <form-input
              id="workStartDateInput"
              type="date"
              label="Start Date of Work *"
              hint="Enter date as YYYY/MM/DD"
              v-model="workStartDateInput"
              :errors="errors.work_start_date"
              :loaded="fieldsLoaded['work_start_date']">
          </form-input>

          <form-input
              id="workEndDateInput"
              type="date"
              label="End Date of Work *"
              hint="Enter date as YYYY/MM/DD"
              v-model="workEndDateInput"
              :errors="errors.work_end_date"
              :loaded="fieldsLoaded['work_end_date']">
          </form-input>

    </fieldset>
</template>


router push when saving in a viz tab

router push when saving in a viz tab

<template>

          {{ titleDataset }}

    <DatasetNav :active-dataset-tab="activeDatasetTab" />

    <SummaryTab
      v-if="activeDatasetTab === 0 && attributes"
      :private-queries="privateQueries"
      :public-queries="publicQueries"
      :array-formats="arrayFormats"
      :array-columns="arrayColumns"
      :resources-list="resourcesList"
      :dataset-attributes="attributes"
      :is-user-logged="isUserLogged"
    />

    <DataTab
      v-else-if="activeDatasetTab === 1"
      :private-queries="privateQueries"
      :public-queries="publicQueries"
      :recent-queries="recentQueriesFiltered"
      :array-columns="arrayColumns"
      :array-formats="arrayFormats"
      :array-columns-query="arrayColumnsQuery"
      :items="items"
      :is-query-saved="isQuerySaved"
      :is-viz-saved="isVizSaved"
      :is-query-saving-prompt-visible="isQuerySavingPromptVisible"
      :is-query-running="isQueryRunning"
      :is-query-modified="isQueryModified"
      :is-viz-modified="isVizModified"
      :is-viz-saving-prompt-visible="isVizSavingPromptVisible"
      :is-fork-prompt-visible="isForkPromptVisible"
      :query-stored="currentQuery"
      :query-name="queryName"
      :query-duration="queryDuration"
      :query-error="queryError"
      :enabled-query-saved-button="enabledQuerySavedButton"
      :enabled-viz-saved-button="enabledVizSavedButton"
      :enabled-fork-button="enabledForkButton"
      :enabled-revert-button="enabledRevertButton"
      :show-revert-query="showRevertQuery"
      :show-private="showPrivate"
      :table-name="tableName"
      :is-user-logged="isUserLogged"
      :query-input-focus="queryInputFocus"
      :viz-input-focus="vizInputFocus"
    />

    <QueriesTab
      v-else-if="activeDatasetTab === 2"
      :private-queries="privateQueries"
      :public-queries="publicQueries"
      :is-user-logged="isUserLogged"
    />

    <VisualizationsTab
      v-else-if="activeDatasetTab === 3"
      :dataset-id="datasetId"
      :is-user-logged="isUserLogged"
      :is-viz-saving-prompt-visible="isVizSavingPromptVisible"
      :is-viz-modified="isVizModified"
      :is-viz-saved="isVizSaved"
      :is-private-viz-loading="isPrivateVizLoading"
      :is-public-viz-loading="isPublicVizLoading"
      :public-visualizations="publicVisualizations"
      :private-visualizations="privateVisualizations"
      :enabled-viz-saved-button="enabledVizSavedButton"
      :current-viz-tab="currentVizTab"
      :enabled-fork-viz-button="enabledForkVizButton"
      :viz-input-focus="vizInputFocus"
    />

    <DownloadsTab
      v-else-if="activeDatasetTab === 4"
      :array-formats="arrayFormats"
      :resources-list="resourcesList"
    />

</template>


修正授权页的样式

修正授权页的样式

<template>

    <el-row :gutter="24" type="flex">
      <el-col :span="10" class="role-table">

          角色

          <el-table stripe border ref="roleTable" :data="role.data" style="width: 100%" highlight-current-row @current-change="roleCurrentChange">
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="code" label="角色编码"></el-table-column>
            <el-table-column prop="name" label="角色名称"></el-table-column>
          </el-table>

      </el-col>
      <el-col :span="14" class="function-table">

          角色名称：{{role.current.name}}
          <el-button :disabled="isRoleActived" type="primary" @click="editFunction" v-loading.fullscreen.lock="fullscreenLoading">授权</el-button>

          <el-table v-loading="loading" stripe border :data="func.table" ref="functionTable" style="width: 100%" highlight-current-row>
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column sortable prop="type" label="类型"></el-table-column>
            <el-table-column sortable prop="parentName" label="父节点"></el-table-column>
          </el-table>

      </el-col>
    </el-row>
    <el-dialog class="dialog-function" title="授权" size="large" :visible.sync="dialogFunctionVisible">
      <el-row v-loading="dialogLoading" type="flex">
        <el-col :span="8" class="function-tree">

            功能{{currentNodeType}}

            <el-tree node-key="id" ref="functionTree" highlight-current show-checkbox accordion current-node-key="id" :data="func.data" :props="func.props" :default-checked-keys="func.defaultChecked" :render-content="renderFunctionContent" :expand-on-click-node="true" @current-change="functionCurrentChange" @check-change="functionCheckChange"></el-tree>

        </el-col>
        <el-col :span="16" class="permission-table">

            属性（NODE类型节点不能添加属性）
            <el-button :disabled="checkAddPermission" type="primary" size="small" @click="addPermission">新增</el-button>

            <el-table stripe ref="permissionTable" :data="permission.data" style="width: 100%" highlight-current-row>
              <el-table-column prop="proName" label="属性名"></el-table-column>
              <el-table-column prop="value" label="属性值"></el-table-column>
              <el-table-column label="操作">
                <template scope="scope">
                  <el-button size="small" @click="editPermission(scope.$index, scope.row)">编辑</el-button>
                  <el-button size="small" type="danger" @click="deletePermission(scope.$index, scope.row, permission.data)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

        </el-col>
      </el-row>

        <el-button @click="closeDialogFunction">取 消</el-button>
        <el-button type="primary" @click="saveFunction">确 定</el-button>

    </el-dialog>
    <el-dialog class="dialog-permission" title="属性" :visible.sync="dialogPermissionVisible">
      <el-form ref="permissionForm" :rules="formRules" label-position="right" label-width="120px" :model="permission.current">
        <el-form-item label="属性名" prop="proName">
          <el-input v-model="permission.current.proName"></el-input>
        </el-form-item>
        <el-form-item label="属性值" prop="value">
          <el-input v-model="permission.current.value"></el-input>
        </el-form-item>
      </el-form>

        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="savePermission">确 定</el-button>

    </el-dialog>

</template>

<template>

    <el-row :gutter="24" type="flex">
      <el-col :span="10" class="role-list">

          角色

          <el-table stripe border ref="roleTable" :data="role.data" style="width: 100%" highlight-current-row @current-change="roleCurrentChange">
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="code" label="角色编码"></el-table-column>
            <el-table-column prop="name" label="角色名称"></el-table-column>
          </el-table>

      </el-col>
      <el-col :span="14" class="role-org">

          角色名称：{{role.current.name}}
          <el-button :disabled="isRoleActived" type="primary" @click="editFunction" v-loading.fullscreen.lock="fullscreenLoading">授权</el-button>

          <el-table v-loading="loading" stripe border :data="func.table" ref="functionTable" style="width: 100%" highlight-current-row>
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column sortable prop="type" label="类型"></el-table-column>
            <el-table-column sortable prop="parentName" label="父节点"></el-table-column>
          </el-table>

      </el-col>
    </el-row>
    <el-dialog class="dialog-function" title="授权" size="large" :visible.sync="dialogFunctionVisible">
      <el-row v-loading="dialogLoading">
        <el-col :span="8" class="role-function">

            功能{{currentNodeType}}

            <el-tree node-key="id" ref="functionTree" highlight-current show-checkbox accordion current-node-key="id" :data="func.data" :props="func.props" :default-checked-keys="func.defaultChecked" :render-content="renderFunctionContent" :expand-on-click-node="true" @current-change="functionCurrentChange" @check-change="functionCheckChange"></el-tree>

        </el-col>
        <el-col :span="16" class="role-org">

            属性（NODE类型节点不能添加属性）
            <el-button :disabled="checkAddPermission" type="primary" size="small" @click="addPermission">新增</el-button>

            <el-table stripe border ref="permissionTable" :data="permission.data" style="width: 100%" highlight-current-row>
              <el-table-column prop="proName" label="属性名"></el-table-column>
              <el-table-column prop="value" label="属性值"></el-table-column>
              <el-table-column label="操作">
                <template scope="scope">
                  <el-button size="small" @click="editPermission(scope.$index, scope.row)">编辑</el-button>
                  <el-button size="small" type="danger" @click="deletePermission(scope.$index, scope.row, permission.data)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

        </el-col>
      </el-row>

        <el-button @click="closeDialogFunction">取 消</el-button>
        <el-button type="primary" @click="saveFunction">确 定</el-button>

    </el-dialog>
    <el-dialog class="dialog-permission" title="属性" :visible.sync="dialogPermissionVisible">
      <el-form ref="permissionForm" :rules="formRules" label-position="right" label-width="120px" :model="permission.current">
        <el-form-item label="属性名" prop="proName">
          <el-input v-model="permission.current.proName"></el-input>
        </el-form-item>
        <el-form-item label="属性值" prop="value">
          <el-input v-model="permission.current.value"></el-input>
        </el-form-item>
      </el-form>

        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="savePermission">确 定</el-button>

    </el-dialog>

</template>


オプション用にインデックスを修正

オプション用にインデックスを修正

<template>
<div id="menu-recipe-tab">
  <v-stepper v-model="step">
    <v-stepper-header>
      <v-stepper-step step="1" :complete="step > 1" :editable="step > 1">アイテムを選ぶ</v-stepper-step>
      <v-divider></v-divider>
      <v-stepper-step step="2" :complete="step > 2" :editable="step > 2">作成数を選ぶ</v-stepper-step>
      <v-divider></v-divider>
      <v-stepper-step step="4" :complete="step > 4">作成する</v-stepper-step>
    </v-stepper-header>

    <v-stepper-content step="1">
      <select-item-step :targets.sync="targets"
                        @addTarget="it => addTarget(it)"
                        @removeTarget="it => removeTarget(it)">
      </select-item-step>
      <v-layout>
        <v-spacer></v-spacer>
        <v-btn small @click.native="step = 2" :disabled="targets.length == 0">作成数を選ぶ</v-btn>
      </v-layout>
    </v-stepper-content>

    <v-stepper-content step="2">
      <select-item-number-step :targets.sync="targets"
                               @setTargetNumber="it => setTargetNumber(it)">
      </select-item-number-step>
      <v-layout>
        <v-spacer></v-spacer>
        <v-btn small @click.native="step = 1">アイテムを選択し直す</v-btn>
        <v-btn small @click.native="step = 4"
               :disabled="targets.find((e, i, a) => e.個数 > 0) === undefined">
          アイテムを作成する
        </v-btn>
      </v-layout>
    </v-stepper-content>

    <v-stepper-content step="4">
      <recipe-result-step :targets.sync="targets">
      </recipe-result-step>
      <v-layout>
        <v-spacer></v-spacer>
        <v-btn small @click.native="step = 2">個数を決め直す</v-btn>
        <v-btn small @click.native="step = 1">最初からやり直す</v-btn>
      </v-layout>
    </v-stepper-content>
  </v-stepper>
  </div>
</template>

<script>
import ItemButton from './ItemButton.vue'
import _ from 'lodash'
import { baseURL, getCall } from './rest'
import SelectItemStep from './RecipeMenu/SelectItemStep.vue'
import SelectItemNumberStep from './RecipeMenu/SelectItemNumberStep.vue'
import RecipeResultStep from './RecipeMenu/RecipeResultStep.vue'

export default {
  name: 'menu-recipe-tab',
  props: ['character'],
  data: () => ({
    step: 0,
    query: '',
    fromIng: false,
    items: [],
    loadingItems: false,
    targets: [],
  }),
  computed: {
    useCharacterInfo() {
      return this.$store.state.useCharacterInfo
    },
  },
  watch: {
    query: function() {
      if (this.query != '') {
        this.lazyGetItems()
      }
    },
    fromIng: function() {
      if (this.query != '') {
        this.getItems()
      }
    },
  },
  methods: {
    lazyGetItems: _.debounce(
      function() {
        this.getItems()
      },
      500
    ),
    getItems: function() {
      this.loadingItems = true
      getCall(baseURL+'/items?migemo=true&only-products=true&from-ingredients='+this.fromIng+'&query='+this.query, (xhr) => {
        if (xhr.readyState==4 && xhr.status==200) {
          this.items = JSON.parse(xhr.response)['アイテム一覧']
          this.loadingItems = false
        }
      })
    },
    addTarget: function(item) {
      if (!this.targets.find((elm, i, a) => elm.アイテム名 === item.アイテム名)) {
        item.個数 = 0
        this.targets.push(item)
      }
    },
    removeTarget: function(item) {
      const idx = this.targets.findIndex((elm, i, a) => elm.アイテム名 === item.アイテム名)
      if (idx !== -1) {
        this.targets.splice(idx, 1)
      }
    },
    setTargetNumber: function(item) {
      let idx = this.targets.findIndex((elm, i, a) => elm.アイテム名 === item.アイテム名)
      this.$set(this.targets, idx, item)
    },
  },
  components: {
    ItemButton,
    SelectItemStep,
    SelectItemNumberStep,
    RecipeResultStep,
  }
}
</script>

<style scoped>
</style>

<template>
<div id="menu-recipe-tab">
  <v-stepper v-model="step">
    <v-stepper-header>
      <v-stepper-step step="1" :complete="step > 1" :editable="step > 1">アイテムを選ぶ</v-stepper-step>
      <v-divider></v-divider>
      <v-stepper-step step="2" :complete="step > 2" :editable="step > 2">作成数を選ぶ</v-stepper-step>
      <v-divider></v-divider>
      <v-stepper-step step="3" :complete="step > 3">作成する</v-stepper-step>
    </v-stepper-header>

    <v-stepper-content step="1">
      <select-item-step :targets.sync="targets"
                        @addTarget="it => addTarget(it)"
                        @removeTarget="it => removeTarget(it)">
      </select-item-step>
      <v-layout>
        <v-spacer></v-spacer>
        <v-btn small @click.native="step = 2" :disabled="targets.length == 0">作成数を選ぶ</v-btn>
      </v-layout>
    </v-stepper-content>

    <v-stepper-content step="2">
      <select-item-number-step :targets.sync="targets"
                               @setTargetNumber="it => setTargetNumber(it)">
      </select-item-number-step>
      <v-layout>
        <v-spacer></v-spacer>
        <v-btn small @click.native="step = 1">アイテムを選択し直す</v-btn>
        <v-btn small @click.native="step = 3"
               :disabled="targets.find((e, i, a) => e.個数 > 0) === undefined">
          アイテムを作成する
        </v-btn>
      </v-layout>
    </v-stepper-content>

    <v-stepper-content step="3">
      <recipe-result-step :targets.sync="targets">
      </recipe-result-step>
      <v-layout>
        <v-spacer></v-spacer>
        <v-btn small @click.native="step = 2">個数を決め直す</v-btn>
        <v-btn small @click.native="step = 1">最初からやり直す</v-btn>
      </v-layout>
    </v-stepper-content>
  </v-stepper>
  </div>
</template>

<script>
import ItemButton from './ItemButton.vue'
import _ from 'lodash'
import { baseURL, getCall } from './rest'
import SelectItemStep from './RecipeMenu/SelectItemStep.vue'
import SelectItemNumberStep from './RecipeMenu/SelectItemNumberStep.vue'
import RecipeResultStep from './RecipeMenu/RecipeResultStep.vue'

export default {
  name: 'menu-recipe-tab',
  props: ['character'],
  data: () => ({
    step: 0,
    query: '',
    fromIng: false,
    items: [],
    loadingItems: false,
    targets: [],
  }),
  computed: {
    useCharacterInfo() {
      return this.$store.state.useCharacterInfo
    },
  },
  watch: {
    query: function() {
      if (this.query != '') {
        this.lazyGetItems()
      }
    },
    fromIng: function() {
      if (this.query != '') {
        this.getItems()
      }
    },
  },
  methods: {
    lazyGetItems: _.debounce(
      function() {
        this.getItems()
      },
      500
    ),
    getItems: function() {
      this.loadingItems = true
      getCall(baseURL+'/items?migemo=true&only-products=true&from-ingredients='+this.fromIng+'&query='+this.query, (xhr) => {
        if (xhr.readyState==4 && xhr.status==200) {
          this.items = JSON.parse(xhr.response)['アイテム一覧']
          this.loadingItems = false
        }
      })
    },
    addTarget: function(item) {
      if (!this.targets.find((elm, i, a) => elm.アイテム名 === item.アイテム名)) {
        item.個数 = 0
        this.targets.push(item)
      }
    },
    removeTarget: function(item) {
      const idx = this.targets.findIndex((elm, i, a) => elm.アイテム名 === item.アイテム名)
      if (idx !== -1) {
        this.targets.splice(idx, 1)
      }
    },
    setTargetNumber: function(item) {
      let idx = this.targets.findIndex((elm, i, a) => elm.アイテム名 === item.アイテム名)
      this.$set(this.targets, idx, item)
    },
  },
  components: {
    ItemButton,
    SelectItemStep,
    SelectItemNumberStep,
    RecipeResultStep,
  }
}
</script>

<style scoped>
</style>


style(): loading cards have margin like real cards

<template>

    <HubHeader></HubHeader>

Extras

Add that special something to supercharge your PWA. These cross-platform features can make your website work more like an app.

      <FeatureCard
        v-if="samples.length > 0 && !selectedSamples.includes(sample)"
        v-for="sample in samples"
        :sample="sample"
        :key="sample.id"
        v-on:selected="onSelected"
        v-on:removed="onRemoved"
        :showRemoveButton="false"
        :showAddButton="true"
        :wrapText="true"
      >

      </FeatureCard>

      <FeatureCard
        v-if="selectedSamples.length > 0"
        v-for="sample in selectedSamples"
        :sample="sample"
        :key="sample.id"
        v-on:selected="onSelected"
        v-on:removed="onRemoved"
        :showRemoveButton="true"
        :showAddButton="true"
        :wrapText="true"
      >

      </FeatureCard>

        <Loading active></Loading>

        <Loading active></Loading>

        <Loading active></Loading>

    <Modal
      v-on:modalOpened="modalOpened()"
      v-on:modalClosed="modalClosed()"
      v-on:modalSubmit="modalSelected()"
      :showSubmitButton="false"
      title="Add Feature"
      ref="addFeatureModal"
    >

            <CodeViewer
              code-type="javascript"
              :size="viewerSize"
              :code="loadCode()"
              v-on:editorValue="updateCode($event)"
              v-if="sample"
              :showToolbar="false"
              :showHeader="true"
            >

{{$t('windows.codeTitle')}}

            </CodeViewer>

            <CodeViewer
              code-type="javascript"
              :size="viewerSize"
              :code="sample.source"
              v-if="sample"
              :showToolbar="false"
              :showHeader="true"
            >

{{$t('windows.sourceTitle')}}

            </CodeViewer>

      <button
        slot="extraButton"
        id="addBundleButton"
        v-on:click="addBundle()"
      >{{ $t("windows.download_sample") }}</button>

{{sample.description}}

Required Properties

{{prop.name}}

{{prop.description}}

    </Modal>

</template>


Copy old layout

Copy old layout

<template>

    <GeneratorMenu first-link-path='generate' />

                Here are the values we picked up from your site.

                Update or add any details below.

                Name
                    [?]

                <input id="ember528" class="ember-view ember-text-field pwa-generator-input" type="text">

                Short Name
                    [?]

                <input id="ember529" class="ember-view ember-text-field pwa-generator-input" name="short_name" type="text">

                Description
                    [?]

                <input id="ember530" class="ember-view ember-text-field pwa-generator-input" name="description" type="text">

                Icon Url
                    [?]

                    <input id="ember585" class="ember-view ember-text-field pwa-generator-input" placeholder="http://example.com/image.png or /images/example.png"
                        type="url">

                            <button data-ember-action="597" class="pwa-button pwa-button--text isEnabled">
                                Or upload an image...
                            </button>

                        <button class="pwa-button pwa-button--text pwa-button--right" data-ember-action="595" disabled="">
                            Add Icon
                        </button>

Preview

Size

                            16x16 32x32

                Scope
                    [?]

                <input id="ember540" class="ember-view ember-text-field pwa-generator-input" type="text">

                Start Url
                    [?]

                <input id="ember541" class="ember-view ember-text-field pwa-generator-input" type="text">

                Display
                    [?]

                <select id="ember552" class="ember-view ember-select pwa-generator-input pwa-generator-input--select">

                    <option id="ember604" class="ember-view" value="fullscreen">fullscreen</option>
                    <option id="ember605" class="ember-view" value="standalone">standalone</option>
                    <option id="ember606" class="ember-view" value="minimal-ui">minimal-ui</option>
                    <option id="ember607" class="ember-view" value="browser">browser</option>
                </select>

                Orientation
                    [?]

                <select id="ember553" class="ember-view ember-select pwa-generator-input pwa-generator-input--select">

                    <option id="ember608" class="ember-view" value="any">any</option>
                    <option id="ember609" class="ember-view" value="natural">natural</option>
                    <option id="ember610" class="ember-view" value="landscape">landscape</option>
                    <option id="ember611" class="ember-view" value="portrait">portrait</option>
                    <option id="ember612" class="ember-view" value="portrait-primary">portrait-primary</option>
                    <option id="ember613" class="ember-view" value="portrait-secondary">portrait-secondary</option>
                    <option id="ember614" class="ember-view" value="landscape-primary">landscape-primary</option>
                    <option id="ember615" class="ember-view" value="landscape-secondary">landscape-secondary</option>
                </select>

                Language
                    [?]

                <select id="ember554" class="ember-view ember-select pwa-generator-input pwa-generator-input--select">

                    <option id="ember616" class="ember-view" value=""> </option>
                    <option id="ember617" class="ember-view" value="ab">Abkhaz</option>
                    <option id="ember618" class="ember-view" value="aa">Afar</option>
                    <option id="ember619" class="ember-view" value="af">Afrikaans</option>
                    <option id="ember620" class="ember-view" value="ak">Akan</option>
                    <option id="ember621" class="ember-view" value="sq">Albanian</option>
                    <option id="ember622" class="ember-view" value="am">Amharic</option>
                    <option id="ember623" class="ember-view" value="ar">Arabic</option>
                    <option id="ember624" class="ember-view" value="an">Aragonese</option>
                    <option id="ember625" class="ember-view" value="hy">Armenian</option>
                    <option id="ember626" class="ember-view" value="as">Assamese</option>
                    <option id="ember627" class="ember-view" value="av">Avaric</option>
                    <option id="ember628" class="ember-view" value="ae">Avestan</option>
                    <option id="ember629" class="ember-view" value="ay">Aymara</option>
                    <option id="ember630" class="ember-view" value="az">Azerbaijani</option>
                    <option id="ember631" class="ember-view" value="bm">Bambara</option>
                    <option id="ember632" class="ember-view" value="ba">Bashkir</option>
                    <option id="ember633" class="ember-view" value="eu">Basque</option>
                    <option id="ember634" class="ember-view" value="be">Belarusian</option>
                    <option id="ember635" class="ember-view" value="bn">Bengali</option>
                    <option id="ember636" class="ember-view" value="bh">Bihari</option>
                    <option id="ember637" class="ember-view" value="bi">Bislama</option>
                    <option id="ember638" class="ember-view" value="bs">Bosnian</option>
                    <option id="ember639" class="ember-view" value="br">Breton</option>
                    <option id="ember640" class="ember-view" value="bg">Bulgarian</option>
                    <option id="ember641" class="ember-view" value="my">Burmese</option>
                    <option id="ember642" class="ember-view" value="ca">Catalan; Valencian</option>
                    <option id="ember643" class="ember-view" value="ch">Chamorro</option>
                    <option id="ember644" class="ember-view" value="ce">Chechen</option>
                    <option id="ember645" class="ember-view" value="ny">Chichewa; Chewa; Nyanja</option>
                    <option id="ember646" class="ember-view" value="zh">Chinese</option>
                    <option id="ember647" class="ember-view" value="cv">Chuvash</option>
                    <option id="ember648" class="ember-view" value="kw">Cornish</option>
                    <option id="ember649" class="ember-view" value="co">Corsican</option>
                    <option id="ember650" class="ember-view" value="cr">Cree</option>
                    <option id="ember651" class="ember-view" value="hr">Croatian</option>
                    <option id="ember652" class="ember-view" value="cs">Czech</option>
                    <option id="ember653" class="ember-view" value="da">Danish</option>
                    <option id="ember654" class="ember-view" value="dv">Divehi; Dhivehi; Maldivian;</option>
                    <option id="ember655" class="ember-view" value="nl">Dutch</option>
                    <option id="ember656" class="ember-view" value="en">English</option>
                    <option id="ember657" class="ember-view" value="eo">Esperanto</option>
                    <option id="ember658" class="ember-view" value="et">Estonian</option>
                    <option id="ember659" class="ember-view" value="ee">Ewe</option>
                    <option id="ember660" class="ember-view" value="fo">Faroese</option>
                    <option id="ember661" class="ember-view" value="fj">Fijian</option>
                    <option id="ember662" class="ember-view" value="fi">Finnish</option>
                    <option id="ember663" class="ember-view" value="fr">French</option>
                    <option id="ember664" class="ember-view" value="ff">Fula; Fulah; Pulaar; Pular</option>
                    <option id="ember665" class="ember-view" value="gl">Galician</option>
                    <option id="ember666" class="ember-view" value="ka">Georgian</option>
                    <option id="ember667" class="ember-view" value="de">German</option>
                    <option id="ember668" class="ember-view" value="el">Greek, Modern</option>
                    <option id="ember669" class="ember-view" value="gn">Guaraní</option>
                    <option id="ember670" class="ember-view" value="gu">Gujarati</option>
                    <option id="ember671" class="ember-view" value="ht">Haitian; Haitian Creole</option>
                    <option id="ember672" class="ember-view" value="ha">Hausa</option>
                    <option id="ember673" class="ember-view" value="he">Hebrew (modern)</option>
                    <option id="ember674" class="ember-view" value="hz">Herero</option>
                    <option id="ember675" class="ember-view" value="hi">Hindi</option>
                    <option id="ember676" class="ember-view" value="ho">Hiri Motu</option>
                    <option id="ember677" class="ember-view" value="hu">Hungarian</option>
                    <option id="ember678" class="ember-view" value="ia">Interlingua</option>
                    <option id="ember679" class="ember-view" value="id">Indonesian</option>
                    <option id="ember680" class="ember-view" value="ie">Interlingue</option>
                    <option id="ember681" class="ember-view" value="ga">Irish</option>
                    <option id="ember682" class="ember-view" value="ig">Igbo</option>
                    <option id="ember683" class="ember-view" value="ik">Inupiaq</option>
                    <option id="ember684" class="ember-view" value="io">Ido</option>
                    <option id="ember685" class="ember-view" value="is">Icelandic</option>
                    <option id="ember686" class="ember-view" value="it">Italian</option>
                    <option id="ember687" class="ember-view" value="iu">Inuktitut</option>
                    <option id="ember688" class="ember-view" value="ja">Japanese</option>
                    <option id="ember689" class="ember-view" value="jv">Javanese</option>
                    <option id="ember690" class="ember-view" value="kl">Kalaallisut, Greenlandic</option>
                    <option id="ember691" class="ember-view" value="kn">Kannada</option>
                    <option id="ember692" class="ember-view" value="kr">Kanuri</option>
                    <option id="ember693" class="ember-view" value="ks">Kashmiri</option>
                    <option id="ember694" class="ember-view" value="kk">Kazakh</option>
                    <option id="ember695" class="ember-view" value="km">Khmer</option>
                    <option id="ember696" class="ember-view" value="ki">Kikuyu, Gikuyu</option>
                    <option id="ember697" class="ember-view" value="rw">Kinyarwanda</option>
                    <option id="ember698" class="ember-view" value="ky">Kirghiz, Kyrgyz</option>
                    <option id="ember699" class="ember-view" value="kv">Komi</option>
                    <option id="ember700" class="ember-view" value="kg">Kongo</option>
                    <option id="ember701" class="ember-view" value="ko">Korean</option>
                    <option id="ember702" class="ember-view" value="ku">Kurdish</option>
                    <option id="ember703" class="ember-view" value="kj">Kwanyama, Kuanyama</option>
                    <option id="ember704" class="ember-view" value="la">Latin</option>
                    <option id="ember705" class="ember-view" value="lb">Luxembourgish, Letzeburgesch</option>
                    <option id="ember706" class="ember-view" value="lg">Luganda</option>
                    <option id="ember707" class="ember-view" value="li">Limburgish, Limburgan, Limburger</option>
                    <option id="ember708" class="ember-view" value="ln">Lingala</option>
                    <option id="ember709" class="ember-view" value="lo">Lao</option>
                    <option id="ember710" class="ember-view" value="lt">Lithuanian</option>
                    <option id="ember711" class="ember-view" value="lu">Luba-Katanga</option>
                    <option id="ember712" class="ember-view" value="lv">Latvian</option>
                    <option id="ember713" class="ember-view" value="gv">Manx</option>
                    <option id="ember714" class="ember-view" value="mk">Macedonian</option>
                    <option id="ember715" class="ember-view" value="mg">Malagasy</option>
                    <option id="ember716" class="ember-view" value="ms">Malay</option>
                    <option id="ember717" class="ember-view" value="ml">Malayalam</option>
                    <option id="ember718" class="ember-view" value="mt">Maltese</option>
                    <option id="ember719" class="ember-view" value="mi">Māori</option>
                    <option id="ember720" class="ember-view" value="mr">Marathi (Marāṭhī)</option>
                    <option id="ember721" class="ember-view" value="mh">Marshallese</option>
                    <option id="ember722" class="ember-view" value="mn">Mongolian</option>
                    <option id="ember723" class="ember-view" value="na">Nauru</option>
                    <option id="ember724" class="ember-view" value="nv">Navajo, Navaho</option>
                    <option id="ember725" class="ember-view" value="nb">Norwegian Bokmål</option>
                    <option id="ember726" class="ember-view" value="nd">North Ndebele</option>
                    <option id="ember727" class="ember-view" value="ne">Nepali</option>
                    <option id="ember728" class="ember-view" value="ng">Ndonga</option>
                    <option id="ember729" class="ember-view" value="nn">Norwegian Nynorsk</option>
                    <option id="ember730" class="ember-view" value="no">Norwegian</option>
                    <option id="ember731" class="ember-view" value="ii">Nuosu</option>
                    <option id="ember732" class="ember-view" value="nr">South Ndebele</option>
                    <option id="ember733" class="ember-view" value="oc">Occitan</option>
                    <option id="ember734" class="ember-view" value="oj">Ojibwe, Ojibwa</option>
                    <option id="ember735" class="ember-view" value="cu">Old Church Slavonic, Church Slavic, Church Slavonic, Old Bulgarian, Old Slavonic</option>
                    <option id="ember736" class="ember-view" value="om">Oromo</option>
                    <option id="ember737" class="ember-view" value="or">Oriya</option>
                    <option id="ember738" class="ember-view" value="os">Ossetian, Ossetic</option>
                    <option id="ember739" class="ember-view" value="pa">Panjabi, Punjabi</option>
                    <option id="ember740" class="ember-view" value="pi">Pāli</option>
                    <option id="ember741" class="ember-view" value="fa">Persian</option>
                    <option id="ember742" class="ember-view" value="pl">Polish</option>
                    <option id="ember743" class="ember-view" value="ps">Pashto, Pushto</option>
                    <option id="ember744" class="ember-view" value="pt">Portuguese</option>
                    <option id="ember745" class="ember-view" value="qu">Quechua</option>
                    <option id="ember746" class="ember-view" value="rm">Romansh</option>
                    <option id="ember747" class="ember-view" value="rn">Kirundi</option>
                    <option id="ember748" class="ember-view" value="ro">Romanian, Moldavian, Moldovan</option>
                    <option id="ember749" class="ember-view" value="ru">Russian</option>
                    <option id="ember750" class="ember-view" value="sa">Sanskrit (Saṁskṛta)</option>
                    <option id="ember751" class="ember-view" value="sc">Sardinian</option>
                    <option id="ember752" class="ember-view" value="sd">Sindhi</option>
                    <option id="ember753" class="ember-view" value="se">Northern Sami</option>
                    <option id="ember754" class="ember-view" value="sm">Samoan</option>
                    <option id="ember755" class="ember-view" value="sg">Sango</option>
                    <option id="ember756" class="ember-view" value="sr">Serbian</option>
                    <option id="ember757" class="ember-view" value="gd">Scottish Gaelic; Gaelic</option>
                    <option id="ember758" class="ember-view" value="sn">Shona</option>
                    <option id="ember759" class="ember-view" value="si">Sinhala, Sinhalese</option>
                    <option id="ember760" class="ember-view" value="sk">Slovak</option>
                    <option id="ember761" class="ember-view" value="sl">Slovene</option>
                    <option id="ember762" class="ember-view" value="so">Somali</option>
                    <option id="ember763" class="ember-view" value="st">Southern Sotho</option>
                    <option id="ember764" class="ember-view" value="es">Spanish; Castilian</option>
                    <option id="ember765" class="ember-view" value="su">Sundanese</option>
                    <option id="ember766" class="ember-view" value="sw">Swahili</option>
                    <option id="ember767" class="ember-view" value="ss">Swati</option>
                    <option id="ember768" class="ember-view" value="sv">Swedish</option>
                    <option id="ember769" class="ember-view" value="ta">Tamil</option>
                    <option id="ember770" class="ember-view" value="te">Telugu</option>
                    <option id="ember771" class="ember-view" value="tg">Tajik</option>
                    <option id="ember772" class="ember-view" value="th">Thai</option>
                    <option id="ember773" class="ember-view" value="ti">Tigrinya</option>
                    <option id="ember774" class="ember-view" value="bo">Tibetan Standard, Tibetan, Central</option>
                    <option id="ember775" class="ember-view" value="tk">Turkmen</option>
                    <option id="ember776" class="ember-view" value="tl">Tagalog</option>
                    <option id="ember777" class="ember-view" value="tn">Tswana</option>
                    <option id="ember778" class="ember-view" value="to">Tonga (Tonga Islands)</option>
                    <option id="ember779" class="ember-view" value="tr">Turkish</option>
                    <option id="ember780" class="ember-view" value="ts">Tsonga</option>
                    <option id="ember781" class="ember-view" value="tt">Tatar</option>
                    <option id="ember782" class="ember-view" value="tw">Twi</option>
                    <option id="ember783" class="ember-view" value="ty">Tahitian</option>
                    <option id="ember784" class="ember-view" value="ug">Uighur, Uyghur</option>
                    <option id="ember785" class="ember-view" value="uk">Ukrainian</option>
                    <option id="ember786" class="ember-view" value="ur">Urdu</option>
                    <option id="ember787" class="ember-view" value="uz">Uzbek</option>
                    <option id="ember788" class="ember-view" value="ve">Venda</option>
                    <option id="ember789" class="ember-view" value="vi">Vietnamese</option>
                    <option id="ember790" class="ember-view" value="vo">Volapük</option>
                    <option id="ember791" class="ember-view" value="wa">Walloon</option>
                    <option id="ember792" class="ember-view" value="cy">Welsh</option>
                    <option id="ember793" class="ember-view" value="wo">Wolof</option>
                    <option id="ember794" class="ember-view" value="fy">Western Frisian</option>
                    <option id="ember795" class="ember-view" value="xh">Xhosa</option>
                    <option id="ember796" class="ember-view" value="yi">Yiddish</option>
                    <option id="ember797" class="ember-view" value="yo">Yoruba</option>
                    <option id="ember798" class="ember-view" value="za">Zhuang, Chuang</option>
                </select>

                    Background Color
                        [?]

                            <input id="ember799" class="ember-view" type="radio" value="none"> None

                            <input id="ember800" class="ember-view" type="radio" value="transparent"> Transparent

                            <input id="ember801" class="ember-view" type="radio" value="pick"> Custom color

                <input type="checkbox" class="pwa-generator-togglecheck">

Specify related applications to be added to the manifest.

                <input type="checkbox" class="pwa-generator-togglecheck">

Specify custom members to be added to the manifest.

                W3C Manifest
                <button class="pwa-button pwa-button--simple pwa-button--brand pwa-button--header" data-ember-action="572">Next step</button>

                        Warnings (1)

                        Suggestions (6)

                            <button data-flare="{"category": "Download", "action": "Web", "label": "Download Archive", "value": { "page": "/download/web" }}"
                                data-ember-action="804" class="pwa-button pwa-button--simple  isEnabled">
                                Download manifest

                            </button>

{
"dir": "ltr",
"lang": "en",
"name": "Google",
"scope": "/?gws_rd=ssl",
"display": "browser",
"start_url": "http://google.es/?gws_rd=ssl",
"short_name": "Google",
"theme_color": "transparent",
"description": "Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.",
"orientation": "any",
"background_color": "transparent",
"related_applications": [],
"prefer_related_applications": false,
"icons": [
{
"src": "/images/branding/product/ico/googleg_lodp.ico",
"sizes": "16x16 32x32"
}
]
}

Copy

Warnings
                            (1 item)

start_url

                                    Required https url: The target website must be served from a secure origin (i.e.
                                    moved to HTTPS) to be compliant with Progressive Web Apps requirements. Platforms affected:
                                    general.

Suggestions
                            (6 items)

icons

                                    Missing image group: It appears that some image sizes used on Windows 10 are
                                    not in your Manifest. We will leave off any we can, and add defaults for any necessary
                                    images that are missing. Platforms affected: windows10.

                                    Missing image: Launcher icons of the following sizes are required: 48x48, 72x72,
                                    96x96, 144x144, 192x192, 512x512. Platforms affected: android.

                                    Missing image: An app icon of the following sizes is required: 76x76, 120x120,
                                    152x152 and 180x180. Platforms affected: ios.

                                    Missing image: An 1024x1024 app icon for the App Store is required. Platforms
                                    affected: ios.

                                    Missing image: A launch image of the following sizes is required: 750x1334,
                                    1334x750, 1242x2208, 2208x1242, 640x1136, 640x960, 1536x2048, 2048x1536, 768x1024 and
                                    1024x768. Platforms affected: ios.

                                    Missing image group: It appears that some image sizes used on Windows 10 are
                                    not in your Manifest. We will leave off any we can, and add defaults for any necessary
                                    images that are missing. Platforms affected: windows.

        <button class="pwa-button" data-ember-action="835">Next Step</button>

    <TwoWays/>

</template>

<template>

    <GeneratorMenu first-link-path='generate'/>

    <TwoWays/>

</template>


Revert "default headers with origin url corrected."

This reverts commit 4abb8f051aefbd423e9f35a409b4e39bb8dc0aa2.

<template>

    <HubHeader :showSubHeader="true"></HubHeader>

{{ $t("generate.subtitle") }}

{{ $t("generate.instructions") }}

              <button v-bind:class="{ active: showBasicSection }" @click="showBasicsSection()">Info</button>
              <button
                v-bind:class="{ active: showImagesSection }"
                @click="showImageSection()"
              >Images</button>
              <button
                v-bind:class="{ active: showSettingsSection }"
                @click="showSettingSection()"
              >Settings</button>

{{ $t("generate.name") }}

Used for App lists or Store listings

              <input
                class="l-generator-input"
                v-model="manifest$.name"
                @keyup="onChangeSimpleInput()"
                type="text"
                v-on:focus="activeFormField = 'appName'"
                placeholder="App Name"
              />

{{ $t("generate.short_name") }}

Used for tiles or home screens

              <input
                class="l-generator-input"
                v-model="manifest$.short_name"
                @keyup="onChangeSimpleInput()"
                name="short_name"
                type="text"
                v-on:focus="activeFormField = 'shortName'"
                placeholder="App Short Name"
              />

{{ $t("generate.description") }}

Used for App listings

              <textarea
                id="descText"
                class="l-generator-textarea"
                v-model="manifest$.description"
                @keydown.enter.exact.prevent="textareaError"
                @keypress="textareaCheck"
                @keyup="onChangeSimpleInput()"
                name="description"
                type="text"
                v-on:focus="activeFormField = 'appDesc'"
                placeholder="App Description"
                v-bind:style="{ outline: textareaOutlineColor}"
              ></textarea>
              Newline not allowed

{{ $t("generate.start_url") }}

This will be the first page that loads in your PWA.

              <input
                class="l-generator-input"
                v-model="manifest$.start_url"
                @keyup="onChangeSimpleInput()"
                type="text"
                v-on:focus="activeFormField = 'startURL'"
                placeholder="Start URL"
              />

Upload app icons for your PWA

We suggest at least one image 512×512 or larger

If you want a bigger images, we suggest to you to upload at least one image 512×512 or larger

                    <button
                      id="iconDownloadButton"
                      class="work-button l-generator-button"
                      :class="{ disabled: zipRequested }"
                      @click="onClickDownloadAll()"
                      :disabled="zipRequested"
                    >Download All</button>

                    <button
                      id="iconUploadButton"
                      class="work-button l-generator-button"
                      @click="onClickUploadIcon()"
                    >Upload</button>

{{icon.sizes}}

{{ $t("generate.scope") }}

Scope determines what part of your website runs in the PWA

              <input
                class="l-generator-input"
                v-model="manifest$.scope"
                @keyup="onChangeSimpleInput()"
                type="text"
                placeholder="App Scope"
                v-on:focus="activeFormField = 'appScope'"
              />

{{ $t("generate.display") }}

Display identifies the browser components that should be included in your. "Standalone" appears as a traditional app.

              <select
                class="l-generator-input l-generator-input--select"
                v-model="manifest$.display"
                @change="onChangeSimpleInput(), update()"
                v-on:focus="activeFormField = 'displayMode'"
              >
                <option v-for="display in displaysNames" :value="display" :key="display">{{display}}</option>
              </select>

{{ $t("generate.orientation") }}

Orientation determines the perfered flow of your application.

              <select
                class="l-generator-input l-generator-input--select"
                v-model="manifest$.orientation"
                @change="onChangeSimpleInput(), update()"
                v-on:focus="activeFormField = 'appOrientation'"
              >
                <option
                  v-for="orientation in orientationsNames"
                  :value="orientation"
                  :key="orientation"
                >{{orientation}}</option>
              </select>

{{ $t("generate.language") }}

Declare the language of your PWA

              <select
                class="l-generator-input l-generator-input--select"
                v-model="manifest$.lang"
                @change="onChangeSimpleInput(), update()"
                v-on:change="activeFormField = 'appLang'"
              >
                <option
                  v-for="language in languagesNames"
                  :value="language"
                  :key="language"
                >{{language}}</option>
              </select>

              <ColorSelector />

          <nuxt-link @click.native="saveChanges" id="doneButton" to="reportCard">Done</nuxt-link>

        <CodeViewer
          code-type="html"
          v-if="seeEditor"
          title="Add this code to your start page"
          code="<link rel='manifest' href='/manifest.json'>"
          :showHeader="true"
          :showCopyButton="true"
          monaco-id="manifestHTMLId"
          id="manifestHTML"
        >

Add this code to your start page:

        </CodeViewer>

        <CodeViewer
          code-type="json"
          v-on:invalidManifest="invalidManifest()"
          v-on:editorValue="handleEditorValue($event)"
          v-if="seeEditor"
          :code="getCode()"
          :title="$t('generate.w3c_manifest')"
          :suggestions="suggestions"
          :suggestionsTotal="suggestionsTotal"
          :warnings="warnings"
          :warningsTotal="warningsTotal"
          :showToolbar="true"
          :showHeader="true"
          :showCopyButton="showCopy"
          monaco-id="manifestCodeId"
          id="manifestCode"
        >

Add this code to your manifest.json file

        </CodeViewer>

      <Modal
        v-on:modalOpened="modalOpened()"
        v-on:modalClosed="modalClosed()"
        :title="$t('generate.upload_title')"
        ref="iconsModal"
        v-on:modalSubmit="onSubmitIconModal"
        v-on:cancel="onCancelIconModal"
      >

            {{ $t("generate.upload_image") }}
            {{ iconFile && iconFile.name ? iconFile.name : $t("generate.choose_file") }}
            <input id="modal-file" @change="onFileIconChange" class="l-hidden" type="file" />

              {{ $t("generate.generate_missing") }}
              <input
                type="checkbox"
                v-model="iconCheckMissing"
              />

      </Modal>

        PWA Builder was founded by Microsoft as a community guided, open source project to help move PWA adoption forward.
        Our Privacy Statement

</template>