Updated scrolling

Updated scrolling

<template>

  <div v-bind:class="['toolbar-show', displayToolBar ? 'toolbar-hide' : '' ]" >
    <breadcrumbs class="breadcrumbs"></breadcrumbs>
    <search-button v-on:scrolling="handleScroll" class='search-btn'></search-button>
  </div>

</template>

<script>

  module.exports = {

    data: () => ({
      currScrollTop: 0,
      delta: 5,
      lastScrollTop: 0,
      displayToolBar: false,
    }),
    components: {
      'search-widget': require('../search-widget'),
      'search-button': require('../search-widget/search-button'),
      'breadcrumbs': require('../breadcrumbs'),
    },
    methods: {
      handleScroll(position) {
        this.position = position;
        this.currScrollTop = position.scrollTop;

        if (Math.abs(this.lastScrollTop - this.currScrollTop) <= this.delta) {
          return;
        }

        if (this.currScrollTop > this.lastScrollTop) {
          this.displayToolBar = true;
        } else {
          this.displayToolBar = false;
        }
        this.lastScrollTop = this.currScrollTop;
      },
    },
    vuex: {
      getters: {
        rootTopicId: state => state.rootTopicId,
        topic: state => state.pageState.topic,
        isRoot: (state) => state.pageState.topic.id === state.rootTopicId,
      },
    },
  };

</script>

<style lang="stylus" scoped>

  @require '~core-theme.styl'

  .breadcrumbs
    position: relative
    display: table-cell
    vertical-align: middle
    left: 120px
    @media screen and (max-width: $portrait-breakpoint)
      left: 3rem

  .toolbar-show
    position: fixed
    display: table
    left: -20px
    top: 0
    width: 100%
    height: 42px
    background: $core-bg-canvas
    z-index: 100
    transition: top 0.2s ease-in-out

  .toolbar-hide
    position: fixed
    display: table
    left: -20px
    top: -40px

  .search-btn
    position: absolute
    top: 0.6rem
    right: 2rem
    z-index: 1
    @media screen and (max-width: $portrait-breakpoint)
      right: 1rem

</style>

<template>

  <div v-scroll='onScroll' v-bind:class="['toolbar-show', displaytoolbar ? 'toolbar-hide' : '' ]" >
    <breadcrumbs class="breadcrumbs"></breadcrumbs>
    <search-button class='search-btn'></search-button>
  </div>

</template>

<script>

  module.exports = {

    data: () => ({
      currScrollTop: 0,
      delta: 5,
      lastScrollTop: 0,
      displayToolBar: false,
    }),
    components: {
      'search-widget': require('../search-widget'),
      'search-button': require('../search-widget/search-button'),
      'breadcrumbs': require('../breadcrumbs'),
    },
    methods: {
      handleScroll(position) {
        this.position = position;
        this.currScrollTop = position.scrollTop;

        if (Math.abs(this.lastScrollTop - this.currScrollTop) <= this.delta) {
          return;
        }

        if (this.currScrollTop > this.lastScrollTop) {
          this.displayToolBar = true;
        } else {
          this.displayToolBar = false;
        }
        this.lastScrollTop = this.currScrollTop;
      },
    },
    vuex: {
      getters: {
        rootTopicId: state => state.rootTopicId,
        topic: state => state.pageState.topic,
        isRoot: (state) => state.pageState.topic.id === state.rootTopicId,
      },
    },
  };

</script>

<style lang="stylus" scoped>

  @require '~core-theme.styl'

  .breadcrumbs
    position: relative
    display: table-cell
    vertical-align: middle
    left: 120px
    @media screen and (max-width: $portrait-breakpoint)
      left: 3rem

  .toolbar-show
    position: fixed
    display: table
    left: -20px
    top: 0
    width: 100%
    height: 42px
    background: $core-bg-canvas
    z-index: 100
    transition: top 0.2s ease-in-out

  .toolbar-hide
    position: fixed
    display: table
    left: -20px
    top: -40px

  .search-btn
    position: absolute
    top: 0.6rem
    right: 2rem
    z-index: 1
    @media screen and (max-width: $portrait-breakpoint)
      right: 1rem

</style>


Bump learners in table to 50

Bump learners in table to 50

<template>

    <KCheckbox
      key="adHocLearners"
      :label="$tr('individualLearnersLabel')"
      :checked="showAsChecked"
      :disabled="disabled"
      @change="toggleChecked"
    />

        {{ $tr("selectedIndividualLearnersLabel") }}

        {{ $tr("onlyShowingEnrolledLabel") }}

      <PaginatedListContainer
        :items="learners"
        :filterFunction="filterLearners"
        :filterPlaceholder="$tr('searchPlaceholder')"
        :itemsPerPage="itemsPerPage"
        @pageChanged="pageNum => currentPage = pageNum"
      >
        <template v-slot:default="{items, filterInput}">
          <CoreTable
            :selectable="true"
            :emptyMessage="$tr('noUsersMatch')"
          >

                  <KCheckbox
                    key="selectAllOnPage"
                    :label="$tr('selectAllLabel')"
                    :checked="allOfCurrentPageIsSelected"
                    :disabled="disabled"
                    @change="selectVisiblePage"
                  />

                  {{ coreString('usernameLabel') }}

                  {{ coachString('groupsLabel') }}

                <template v-if="learnerIsInSelectedGroup(learner.id)">

                    <KCheckbox
                      :key="`select-learner-${learner.id}`"
                      :label="learner.name"
                      :checked="true"
                      :disabled="true"
                    />

                   {{ learner.username }}
                   {{ groupsForLearner(learner.id) }}
                </template>
                <template v-else>

                    <KCheckbox
                      :key="`select-learner-${learner.id}`"
                      :label="learner.name"
                      :checked="selectedAdHocIds.includes(learner.id)"
                      :disabled="disabled"
                      @change="toggleSelectedLearnerId(learner.id)"
                    />

                   {{ learner.username }}
                   {{ groupsForLearner(learner.id) }}
                </template>

          </CoreTable>
        </template>
      </PaginatedListContainer>

</template>


[MultiSelect] should not directly update the "value" prop. (fix #283)

<template>
  <dropdown
    v-model="showDropdown"
    ref="dropdown"
    :not-close-elements="els"
    :append-to-body="appendToBody"
    :disabled="disabled"
    :style="containerStyles"
    @keydown.native.esc="showDropdown=false">

{{selectedText}}

    <template slot="dropdown">

        <input
          aria-label="Filter..."
          ref="filterInput"
          class="form-control input-sm"
          type="text"
          :placeholder="filterPlaceholder || t('uiv.multiSelect.filterPlaceholder')"
          v-model="filterInput"
          @keydown.prevent.stop.down="goNextOption"
          @keydown.prevent.stop.up="goPrevOption"
          @keydown.prevent.stop.enter="selectOption"
        />

      <template v-for="item in groupedOptions">

        <template v-for="_item in item.options">

              {{_item[labelKey]}}

              {{_item[labelKey]}}

        </template>
      </template>
    </template>
  </dropdown>
</template>


Levelbar: fix breadcrumb when menus have different label and link

<template>

          {{ name }}

      <breadcrumb :list="list"><breadcrumb>

</template>


重构scroller

重构scroller

<template>

{{title}}

      更多

      <slot name="promItem"></slot>

            {{item.title}}

              6.9

          {{item.title}}

</template>


[MODIFY] Added Fade Transition of Timeline cards

<template>

        Our Timeline

          <v-card :class="[index == active ? 'active' : '', active != null && index != active ? 'inactive' : '', 'card']"
                  :data-aos="index%2 == 0 ? 'fade-right' : 'fade-left'"
                  data-aos-duration="600"
          >
            <v-card-title primary-title class="timeline-card">

                    {{ item.event_name }}

            </v-card-title>
            <v-card-actions class="justify-content-between overflow-content">

{{ format_date(item.event_time) }}

            </v-card-actions>
          </v-card>

{{ format_date(item.event_time) }}

</template>

<template>

        Our Timeline

          <v-card :class="[index == active ? 'active' : '', active != null && index != active ? 'inactive' : '', 'card']">
            <v-card-title primary-title class="timeline-card">

                    {{ item.event_name }}

            </v-card-title>
            <v-card-actions class="justify-content-between overflow-content">

{{ format_date(item.event_time) }}

            </v-card-actions>
          </v-card>

{{ format_date(item.event_time) }}

</template>


Allow profile to be empty

Allow profile to be empty

<template>
  <div class='user'>
      <ui-button color='default' type='secondary' has-dropdown ref='profileButton' v-if='profile'>
          <ui-menu contain-focus has-icons has-secondary-text slot="dropdown" :options="profileOptions"
                  @select='onMenuClick'
                  @close="$refs.profileButton.closeDropdown()">
          </ui-menu>
        {{profile.name}}
      </ui-button>
  </div>
</template>

<script>
import { UiButton, UiMenu } from 'keen-ui';

export default {
  name: 'UserInfo',
  props: ['profile'],
  data() {
    return {
      profileOptions: [{
        id: 'sign-out',
        label: 'Sign out'
      }]
    };
  },
  methods: {
    onMenuClick(option) {
      if (option.id === 'sign-out') {
        this.$emit('signOut');
      }
    }
  },
  components: {
    UiButton,
    UiMenu
  }
};
</script>

<style scoped>
.user1 {
  -webkit-background-size: 32px 32px;
  background-size: 32px 32px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  display: block;
  margin: -1px;
  overflow: hidden;
  position: relative;
  height: 32px;
  width: 32px;
  z-index: 0;
}
</style>

<template>
  <div class='user'>
      <ui-button color='default' type='secondary' has-dropdown ref='profileButton'>
          <ui-menu contain-focus has-icons has-secondary-text slot="dropdown" :options="profileOptions"
                  @select='onMenuClick'
                  @close="$refs.profileButton.closeDropdown()">
          </ui-menu>
        {{profile.name}}
      </ui-button>
  </div>
</template>

<script>
import { UiButton, UiMenu } from 'keen-ui';

export default {
  name: 'UserInfo',
  props: ['profile'],
  data() {
    return {
      profileOptions: [{
        id: 'sign-out',
        label: 'Sign out'
      }]
    };
  },
  methods: {
    onMenuClick(option) {
      if (option.id === 'sign-out') {
        this.$emit('signOut');
      }
    }
  },
  components: {
    UiButton,
    UiMenu
  }
};
</script>

<style scoped>
.user1 {
  -webkit-background-size: 32px 32px;
  background-size: 32px 32px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  display: block;
  margin: -1px;
  overflow: hidden;
  position: relative;
  height: 32px;
  width: 32px;
  z-index: 0;
}
</style>


fix typo

fix typo

<template>

      <slot></slot>

 1">

</template>


[#146463617] Mary wants to easily register for an event <design>

<template>

      Parent / Guardian

    Name
    <input type="text" class="form-control" name="firstName" placeholder="First Name" id="name" data-vv-as="first name" v-validate.initial="'required'" v-model="parentUserData.firstName">

    <input type="text" class="form-control" name="lastName" placeholder="Last Name" id="lastName" data-vv-as="last name" v-validate.initial="'required'" v-model="parentUserData.lastName">

{{ errors.first('firstName') }}

{{ errors.first('lastName') }}

    Phone Number
    <input type="text" class="form-control" placeholder="Eg. 353 123 45678" name="phoneNumber" id="phoneNumber" data-vv-as="phone number" v-validate.initial="'required|numeric'" v-model="parentUserData.phone">

{{ errors.first('phoneNumber') }}

    Email Address
    <input type="email" placeholder="Email address" class="form-control" name="email" id="email" data-vv-as="email" v-validate.initial="'required|email'" v-model="parentUserData.email">

{{ errors.first('email') }}

{{ selectedTicket.ticket.name }} ({{ ticket.session.name }})

          Name

        <input type="text" placeholder="First Name" v-model="selectedTicket.user.firstName" class="cd-booking-parent-form__child-first-name form-control" />
        <input type="text" placeholder="Last Name" v-model="selectedTicket.user.lastName" class="cd-booking-parent-form__child-last-name form-control" />

          Date of Birth

        <input type="text" placeholder="Date" v-model="selectedTicket.user.dob.date" class="cd-booking-parent-form__child-dob-date form-control" />
        <input type="text" placeholder="Month" v-model="selectedTicket.user.dob.month" class="cd-booking-parent-form__child-dob-month form-control" />
        <input type="text" placeholder="Year" v-model="selectedTicket.user.dob.year" class="cd-booking-parent-form__child-dob-year form-control" />

          Email Address (optional)

        <input type="email" placeholder="Email address" v-model="selectedTicket.user.email" class="cd-booking-parent-form__child-email form-control" />
        Gender

          <input type="radio" :name="'childGender' + selectedTicket.ticket.id + index" value="Male" v-model="selectedTicket.user.gender" /> Male
          <input type="radio" :name="'childGender' + selectedTicket.ticket.id + index" value="Female" v-model="selectedTicket.user.gender" /> Female

            <input type="radio" :name="'childGender' + selectedTicket.ticket.id + index" value="Other" v-model="selectedTicket.user.gender" />
             Not Listed. Specify here:

          <input type="text" class="form-control cd-booking-parent-form__other" placeholder="Preferred Gender" :name="'otherGender' + index"  v-model="selectedTicket.user.otherGender"  />
          <input type="radio" :name="'childGender' + selectedTicket.ticket.id + index" value="Undisclosed" v-model="selectedTicket.user.gender" /> Prefer not to answer

</template>


Modify EditorSelection (WIP)

Modify EditorSelection (WIP)

Remove Bootstrap-Components. Use Vuetify-Components instead.

<template>
  <v-card>
    <v-overlay v-if="modelInstances.length" :absolute="true" :opacity="0.85">
      <v-icon x-large>mdi-folder-lock</v-icon>

        Locked because there are model instances

    </v-overlay>

    <v-card-title>
      Edit project {{ gdslProject.name }}
    </v-card-title>

    <v-divider class="ma-0"></v-divider>

    <v-card-text>
      <v-stepper v-model="stepCounter">
        <v-stepper-header>
          <v-stepper-step :complete="stepCounter > 1" step="1">Concept
Editor</v-stepper-step>
          <v-divider></v-divider>
          <v-stepper-step :complete="stepCounter > 2" step="2">Shape</v-stepper-step>
          <v-divider></v-divider>
          <v-stepper-step :complete="stepCounter > 3" step="3">Style</v-stepper-step>
          <v-divider></v-divider>
          <v-stepper-step :complete="stepCounter === 4" step="4">Diagram</v-stepper-step>
        </v-stepper-header>
      </v-stepper>

      <v-dialog v-model="editProjectDialog" fullscreen hide-overlay transition="dialog-bottom-transition">
        <template v-slot:activator="{ on, attrs }">

            <v-btn v-on:click="showStepElement(stepCounter)" class="mt-4" color="primary" depressed v-bind="attrs" v-on="on">
              Edit project
            </v-btn>

        </template>

        <v-card>
          <v-toolbar dark color="primary" class="rounded-0">
            <v-btn icon dark @click="editProjectDialog = false">
              <v-icon>mdi-close</v-icon>
            </v-btn>
            <v-toolbar-title>Edit project</v-toolbar-title>
            <v-spacer></v-spacer>

            <v-toolbar-items>
              <v-stepper v-model="stepCounter" class="elevation-0 rounded-0">
                <v-stepper-header>
                  <v-stepper-step @click="showStepElement(stepCounter=1)" :complete="stepCounter > 1" step="1">
                    {{ step1 }}
                  </v-stepper-step>
                  <v-divider></v-divider>
                  <v-stepper-step @click="showStepElement(stepCounter=2)" :complete="stepCounter > 2" step="2">
                    {{ step2 }}
                  </v-stepper-step>
                  <v-divider></v-divider>
                  <v-stepper-step @click="showStepElement(stepCounter=3)" :complete="stepCounter > 3" step="3">
                    {{ step3 }}
                  </v-stepper-step>
                  <v-divider></v-divider>
                  <v-stepper-step @click="showStepElement(stepCounter=4)" :complete="stepCounter === 4" step="4">
                    {{ step4 }}
                  </v-stepper-step>
                </v-stepper-header>
              </v-stepper>

              <v-btn :disabled="continueBtnIsHidden" text
                     v-on:click="initializeEditor(), stepCounter++, showStepElement(stepCounter)">Continue
              </v-btn>
            </v-toolbar-items>
          </v-toolbar>

            <GraphicalEditor v-if="!step1IsHidden"></GraphicalEditor>

                  {{ step2 }}

                              Saving succeed
                              Saving failed

                                Save

                  {{ step3 }}

                              Saving succeed
                              Saving failed

                                Save

                  {{ step4 }}

                                Saving succeed
                                Saving failed

                                  Save

        </v-card>
      </v-dialog>
    </v-card-text>

    <v-divider class="ma-0"></v-divider>

    <v-card-actions>
      <v-menu offset-y>
        <template v-slot:activator="{ on }">
          <v-btn color="secondary" outlined v-on="on">
            Validator
            <v-icon class="ml-1">mdi-chevron-down</v-icon>
          </v-btn>
        </template>
        <v-list>
          <v-list-item v-on:click="validatorGenerate" id="validatorGenerate">
            <v-list-item-title>Generate / Update Validator</v-list-item-title>
          </v-list-item>
          <v-list-item v-on:click="validatorShow" id="validatorShow">
            <v-list-item-title>Show Validation Rules</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-card-actions>
  </v-card>
</template>

<template>

      Edit project {{ gdslProject.name }}

    <v-stepper v-model="stepCounter">
      <v-stepper-header>
        <v-stepper-step :complete="stepCounter > 1" step="1">Concept
Editor</v-stepper-step>
        <v-divider></v-divider>
        <v-stepper-step :complete="stepCounter > 2" step="2">Shape</v-stepper-step>
        <v-divider></v-divider>
        <v-stepper-step :complete="stepCounter > 3" step="3">Style</v-stepper-step>
        <v-divider></v-divider>
        <v-stepper-step :complete="stepCounter === 4" step="4">Diagram</v-stepper-step>
      </v-stepper-header>

      <v-dialog v-model="editProjectDialog" fullscreen hide-overlay transition="dialog-bottom-transition">
        <template v-slot:activator="{ on, attrs }">

            <v-btn v-on:click="showStepElement(stepCounter)" class="list-group-item my-auto" v-bind="attrs" v-on="on">
              Edit project
            </v-btn>

        </template>

        <v-card>

          <v-toolbar dark color="primary">
            <v-btn icon dark @click="editProjectDialog = false">
              <v-icon>mdi-close</v-icon>
            </v-btn>
            <v-toolbar-title>Edit project</v-toolbar-title>
            <v-spacer></v-spacer>

            <v-stepper v-model="stepCounter">
              <v-stepper-header>
                <v-stepper-step @click="showStepElement(stepCounter=1)" :complete="stepCounter > 1" step="1">
                  {{ step1 }}
                </v-stepper-step>
                <v-divider></v-divider>
                <v-stepper-step @click="showStepElement(stepCounter=2)" :complete="stepCounter > 2" step="2">
                  {{ step2 }}
                </v-stepper-step>
                <v-divider></v-divider>
                <v-stepper-step @click="showStepElement(stepCounter=3)" :complete="stepCounter > 3" step="3">
                  {{ step3 }}
                </v-stepper-step>
                <v-divider></v-divider>
                <v-stepper-step @click="showStepElement(stepCounter=4)" :complete="stepCounter === 4" step="4">
                  {{ step4 }}
                </v-stepper-step>
              </v-stepper-header>
            </v-stepper>

            <v-toolbar-items>
              <v-btn :disabled="continueBtnIsHidden" color="primary"
                     v-on:click="initializeEditor(), stepCounter++, showStepElement(stepCounter)">Continue
              </v-btn>
            </v-toolbar-items>
          </v-toolbar>

            <GraphicalEditor v-if="!step1IsHidden"></GraphicalEditor>

                  {{ step2 }}

                              Saving succeed
                              Saving failed

                                Save

                  {{ step3 }}

                              Saving succeed
                              Saving failed

                                Save

                  {{ step4 }}

                                Saving succeed
                                Saving failed

                                  Save

        </v-card>
      </v-dialog>
    </v-stepper>

      <button class="btn dropdown-toggle" type="button" id="btnValidator" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="true">
        Validator

      </button>

Generate / Update Validator

Show Validation Rules

</template>


Update promote and demote from moderator icons

Signed-off-by: marco <3397c7e210a9d1588196cfebb12b2c6b133f6934@pm.me>

<template>

		<AvatarWrapper
			:id="computedId"
			:disable-tooltip="true"
			:disable-menu="isSearched"
			:size="44"
			:show-user-status="showUserStatus && !isSearched"
			:show-user-status-compact="false"
			:preloaded-user-status="preloadedUserStatus"
			:name="computedName"
			:source="participant.source || participant.actorType"
			:offline="isOffline"
			:menu-container="container" />

				{{ computedName }}
				({{ t('spreed', 'moderator') }})
				({{ t('spreed', 'bot') }})
				({{ t('spreed', 'guest') }})

				{{ statusMessage }}

			{{ callIconTooltip }}
			<Microphone
				v-if="callIcon === 'audio'"
				:size="24"
				title=""
				decorative />
			<Phone
				v-if="callIcon === 'phone'"
				:size="24"
				title=""
				decorative />
			<Video
				v-if="callIcon === 'video'"
				:size="24"
				title=""
				decorative />
			<HandBackLeft
				v-if="callIcon === 'hand'"
				:size="24"
				title=""
				decorative />

		<Actions
			v-if="canBeModerated && !isSearched"
			:container="container"
			:aria-label="participantSettingsAriaLabel"
			:force-menu="true"
			class="participant-row__actions">
			<ActionText
				v-if="attendeePin"
				:title="t('spreed', 'Dial-in PIN')"
				icon="icon-password">
				{{ attendeePin }}
			</ActionText>
			<ActionButton v-if="canBeDemoted"
				:close-after-click="true"
				@click="demoteFromModerator">
				<template #icon>
					<Account
						:size="20"
						title=""
						decorative />
					{{ t('spreed', 'Demote from moderator') }}
				</template>
			</ActionButton>
			<ActionButton v-if="canBePromoted"
				:close-after-click="true"
				@click="promoteToModerator">
				<template #icon>
					<Crown
						:size="20"
						title=""
						decorative />
				</template>
				{{ t('spreed', 'Promote to moderator') }}
			</ActionButton>
			<ActionButton v-if="isEmailActor"
				icon="icon-mail"
				:close-after-click="true"
				@click="resendInvitation">
				{{ t('spreed', 'Resend invitation') }}
			</ActionButton>
			<ActionSeparator
				v-if="attendeePin || canBePromoted || canBeDemoted || isEmailActor" />
			<ActionButton
				icon="icon-delete"
				:close-after-click="true"
				@click="removeParticipant">
				<template v-if="isGroup">
					{{ t('spreed', 'Remove group and members') }}
				</template>
				<template v-else>
					{{ t('spreed', 'Remove participant') }}
				</template>
			</ActionButton>
		</Actions>

</template>

<template>

		<AvatarWrapper
			:id="computedId"
			:disable-tooltip="true"
			:disable-menu="isSearched"
			:size="44"
			:show-user-status="showUserStatus && !isSearched"
			:show-user-status-compact="false"
			:preloaded-user-status="preloadedUserStatus"
			:name="computedName"
			:source="participant.source || participant.actorType"
			:offline="isOffline"
			:menu-container="container" />

				{{ computedName }}
				({{ t('spreed', 'moderator') }})
				({{ t('spreed', 'bot') }})
				({{ t('spreed', 'guest') }})

				{{ statusMessage }}

			{{ callIconTooltip }}
			<Microphone
				v-if="callIcon === 'audio'"
				:size="24"
				title=""
				decorative />
			<Phone
				v-if="callIcon === 'phone'"
				:size="24"
				title=""
				decorative />
			<Video
				v-if="callIcon === 'video'"
				:size="24"
				title=""
				decorative />
			<HandBackLeft
				v-if="callIcon === 'hand'"
				:size="24"
				title=""
				decorative />

		<Actions
			v-if="canBeModerated && !isSearched"
			:container="container"
			:aria-label="participantSettingsAriaLabel"
			:force-menu="true"
			class="participant-row__actions">
			<ActionText
				v-if="attendeePin"
				:title="t('spreed', 'Dial-in PIN')"
				icon="icon-password">
				{{ attendeePin }}
			</ActionText>
			<ActionButton v-if="canBeDemoted"
				icon="icon-rename"
				:close-after-click="true"
				@click="demoteFromModerator">
				{{ t('spreed', 'Demote from moderator') }}
			</ActionButton>
			<ActionButton v-if="canBePromoted"
				icon="icon-rename"
				:close-after-click="true"
				@click="promoteToModerator">
				{{ t('spreed', 'Promote to moderator') }}
			</ActionButton>
			<ActionButton v-if="isEmailActor"
				icon="icon-mail"
				:close-after-click="true"
				@click="resendInvitation">
				{{ t('spreed', 'Resend invitation') }}
			</ActionButton>
			<ActionSeparator
				v-if="attendeePin || canBePromoted || canBeDemoted || isEmailActor" />
			<ActionButton
				icon="icon-delete"
				:close-after-click="true"
				@click="removeParticipant">
				<template v-if="isGroup">
					{{ t('spreed', 'Remove group and members') }}
				</template>
				<template v-else>
					{{ t('spreed', 'Remove participant') }}
				</template>
			</ActionButton>
		</Actions>

</template>


Add "order direction" select.

Add "order direction" select.

<template>

            <button id="export-report" class="btn btn-primary btn-sm" v-on:click="exportReport">

                Export Report
            </button>

            <select class="custom-select form-control-sm" v-model="exportFormat">
                <option value="csv">csv</option>
                <option value="xls">xls</option>
                <option value="xlsx">xlsx</option>
                <option value="tsv">tsv</option>
                <option value="ods">ods</option>
                <option value="json">json</option>
                <option value="yaml">yaml</option>
                <option value="html">html</option>
            </select>

            <pager v-bind:next="next"
                   v-bind:previous="previous"
                   @next-page="getEntries(next)"
                   @previous-page="getEntries(previous)"></pager>

    <form name="report-filters"
          class="row mb-4 pt-3 pb-1 bg-faded rounded"
          v-on:submit.prevent
          v-on:submit="getReport">

                <select2 id="report-filter-user"
                         v-model="user"
                         v-bind:options="users"
                         placeholder="Users"></select2>

                <select2 id="report-filter-project"
                         v-model="project"
                         v-bind:options="projects"
                         placeholder="Projects"></select2>

                <select2 id="report-filter-client"
                         v-model="client"
                         v-bind:options="clients"
                         placeholder="Clients"></select2>

                <select2 id="report-filter-task"
                         v-model="task"
                         v-bind:options="tasks"
                         placeholder="Tasks"></select2>

                        <datepicker id="report-filter-min-date"
                                    type="text"
                                    class="form-control form-control-sm date-input"
                                    v-model="dateMin"
                                    placeholder="Min. date"></datepicker>

                        <datepicker id="report-filter-max-date"
                                    type="text"
                                    class="form-control form-control-sm date-input"
                                    v-model="dateMax"
                                    placeholder="Max. date"></datepicker>

                        <select2 id="report-sort-by"
                                 v-model="orderBy"
                                 v-bind:options="orderByOptions"
                                 placeholder="Order by"></select2>

                        <select2 id="report-order-dir"
                                 v-model="orderDir"
                                 v-bind:options="orderDirOptions"
                                 placeholder="Order direction"></select2>

            <button id="generate-report" type="submit" class="btn btn-primary btn-sm w-100">
                Generate Report
            </button>

    </form>

                    {{ moment(entryBlock.date) }}

            <entry v-for="(entry, index) in entryBlock.entries"
                v-bind:entry="entry"
                v-bind:index="index"
                v-bind:key="entry.id"
                v-bind:editable="editable">
            </entry>

            Subtotal

            Total

            {{ subtotal }}

            {{ total }}

</template>

<template>

            <button id="export-report" class="btn btn-primary btn-sm" v-on:click="exportReport">

                Export Report
            </button>

            <select class="custom-select form-control-sm" v-model="exportFormat">
                <option value="csv">csv</option>
                <option value="xls">xls</option>
                <option value="xlsx">xlsx</option>
                <option value="tsv">tsv</option>
                <option value="ods">ods</option>
                <option value="json">json</option>
                <option value="yaml">yaml</option>
                <option value="html">html</option>
            </select>

            <pager v-bind:next="next"
                   v-bind:previous="previous"
                   @next-page="getEntries(next)"
                   @previous-page="getEntries(previous)"></pager>

    <form name="report-filters"
          class="row mb-4 pt-3 pb-1 bg-faded rounded"
          v-on:submit.prevent
          v-on:submit="getReport">

                <select2 id="report-filter-user"
                         v-model="user"
                         v-bind:options="users"
                         placeholder="Users"></select2>

                <select2 id="report-filter-project"
                         v-model="project"
                         v-bind:options="projects"
                         placeholder="Projects"></select2>

                <select2 id="report-filter-client"
                         v-model="client"
                         v-bind:options="clients"
                         placeholder="Clients"></select2>

                <select2 id="report-filter-task"
                         v-model="task"
                         v-bind:options="tasks"
                         placeholder="Tasks"></select2>

                        <datepicker id="report-filter-min-date"
                                    type="text"
                                    class="form-control form-control-sm date-input"
                                    v-model="dateMin"
                                    placeholder="Min. date"></datepicker>

                        <datepicker id="report-filter-max-date"
                                    type="text"
                                    class="form-control form-control-sm date-input"
                                    v-model="dateMax"
                                    placeholder="Max. date"></datepicker>

                <select2 id="report-order-by"
                         v-model="orderBy"
                         v-bind:options="orderByOptions"
                         placeholder="Order by"></select2>

            <button id="generate-report" type="submit" class="btn btn-primary btn-sm w-100">
                Generate Report
            </button>

    </form>

                    {{ moment(entryBlock.date) }}

            <entry v-for="(entry, index) in entryBlock.entries"
                v-bind:entry="entry"
                v-bind:index="index"
                v-bind:key="entry.id"
                v-bind:editable="editable">
            </entry>

            Subtotal

            Total

            {{ subtotal }}

            {{ total }}

</template>


添加左侧点击时的右侧联动功能

添加左侧点击时的右侧联动功能

<template>

                        0" class="icon" :class="classMap[item.type]">{{item.name}}

{{item.name}}

{{food.name}}

{{food.description}}

                                    月售{{food.sellCount}}份好评率{{food.rating}}%

                                    ￥{{food.price}}￥{{food.oldPrice}}

</template>


solving html loader  problem

solving html loader  problem

<template lang="html">

			<form class="form" v-on:submit.prevent>

					Titulo
					<input class="form-control" v-model="post.title">

					Subtitulo
					<input class="form-control" v-model="post.subtitle">

					Descrição curta
					<textarea class="form-control" rows="3" v-model="post.previous"></textarea>

					Conteudo Principal
					<textarea
						id="tiny-text-area"
						class="form-control"
						v-model="post.text"
					></textarea>
					<button class="btn btn-default" v-on:click="getPreviousMain">Ver prévia</button>

					{{{post.text}}}

					<input type="text" class="form-control" v-model="post.date">

			</form>

				<input-file
					title="imagem previa"
					:image-name="imageName"
					image-locale="previous"
				></input-file>

					Categoria
					<select class="form-control" v-model="post.category" v-if="categories.length > 0">
						<option v-for="(key, cat) in categories" :value="cat.key" :selected="key === 0">
							{{index, cat.name}}
						</option>
					</select>
					<select class="form-control" v-else>
						<option>Nenhuma categoria</option>
					</select>

				Status
				<select class="form-control" v-model="post.status">
					<option value="hidden" selected>Oculto</option>
					<option value="visible">Visível</op tion>
				</select>

				Tamanho
				<select class="form-control" v-model="post.appearance">
					<option value="big" selected>Grande</option>
					<option value="small" >Pequeno</option>
				</select>
				<button class="btn btn-default btn__save" v-on:click="storePost">Salvar</button>

</template>

<template lang="html">

			<form class="form" v-on:submit.prevent>

					Titulo
					<input class="form-control" v-model="post.title">

					Subtitulo
					<input class="form-control" v-model="post.subtitle">

					Descrição curta
					<textarea class="form-control" rows="3" v-model="post.previous"></textarea>

					Conteudo Principal
					<textarea
						id="tiny-text-area"
						class="form-control"
						v-model="post.text"
					></textarea>
					<button class="btn btn-default" v-on:click="getPreviousMain">Ver prévia</button>

					{{{post.text}}}

					<input type="text" class="form-control" v-model="post.date">

			</form>

				<input-file
					title="imagem previa"
					:image-name="imageName"
					image-locale="previous"
				></input-file>

					Categoria
					<select class="form-control" v-model="post.category" v-if="categories.length > 0">
						<option v-for="(key, cat) in categories" :value="cat.key" :selected="key === 0">
							{{index, cat.name}}
						</option>
					</select>
					<select class="form-control" v-else
						<option>Nenhuma categoria</option>
					</select>

				Status
				<select class="form-control" v-model="post.status">
					<option value="hidden" selected>Oculto</option>
					<option value="visible">Visível</op tion>
				</select>

				Tamanho
				<select class="form-control" v-model="post.appearance">
					<option value="big" selected>Grande</option>
					<option value="small" >Pequeno</option>
				</select>
				<button class="btn btn-default btn__save" v-on:click="storePost">Salvar</button>

</template>


chore: 👷 reset state on error for ENS commitment

<template>

    <the-wrapper-dapp
      :is-new-header="true"
      :dapp-img="headerImg"
      :banner-text="header"
      :tab-items="tabs"
      :active-tab="activeTab"
      external-contents
      :on-tab="tabChanged"
      :valid-networks="validNetworks"
    >

      <template #tabContent1>
        <v-sheet
          max-width="700px"
          color="transparent"
          class="px-3 py-8 py-md-13 mx-auto"
        >

              {{ $t('ens.search-domain') }}

            <form @submit.prevent="findDomain">
              <v-row class="mx-0">
                <v-col class="pr-0" cols="8">
                  <mew-input
                    :value="name"
                    :has-clear-btn="true"
                    :rules="rules"
                    :label="$t('ens.register.domain-name')"
                    :placeholder="$t('ens.ph.three-char')"
                    class="mr-3 flex-grow-1"
                    :error-messages="errorMessages"
                    @input="setName"
                  />
                </v-col>
                <v-col class="pl-0" cols="4">
                  <mew-button
                    :loading="loading"
                    :disabled="
                      !name ||
                      (name && name.length < 3) ||
                      loading ||
                      (name && name.split('.').length > 2)
                    "
                    :has-full-width="true"
                    btn-size="xlarge"
                    :title="$t('ens.register.name')"
                    @click.native="findDomain"
                  />
                </v-col>
              </v-row>
            </form>

        </v-sheet>
      </template>

      <template #tabContent2>
        <v-sheet class="px-3 py-8 py-md-13">

              {{ $t('ens.my-domains') }}
              ({{ totalDomains }})

          <mew-expand-panel
            :idx-to-expand="null"
            class="my-domains-panel"
            :panel-items="myDomains"
            :right-action-text="$t('ens.buy-domain')"
            @onActionClick="buyDomain"
          >
            <template
              v-for="(domain, idx) in myDomains"
              :slot="'panelBody' + (idx + 1)"
            >

                <v-row class="subheader-container">
                  <v-col cols="12" md="6" class="d-flex align-center">

{{ $t('ens.manage-domains.registrant') }}

                    <mew-blockie
                      :address="domain.registrarAddress"
                      width="25px"
                      height="25px"
                      class="mx-2"
                    />
                    <mew-transform-hash :hash="domain.registrarAddress" />
                    <mew-copy
                      class="ml-2 mew-body"
                      :copy-value="domain.registrarAddress"
                      :is-small="true"
                    />

                      <v-icon small class="call-made"> mdi-call-made </v-icon>

                  </v-col>

                  <v-spacer></v-spacer>

                  <v-col cols="12" md="6" class="d-flex align-center">

{{ $t('ens.manage-domains.controller') }}

                    <mew-blockie
                      :address="domain.controllerAddress"
                      width="25px"
                      height="25px"
                      class="mx-2"
                    />
                    <mew-transform-hash :hash="domain.controllerAddress" />
                    <mew-copy
                      class="ml-2 mew-body"
                      :copy-value="domain.controllerAddress"
                      :is-small="true"
                    />

                      <v-icon small class="call-made"> mdi-call-made </v-icon>

                  </v-col>
                </v-row>

                    {{ $t('ens.manage-domains.what-to-do') }}

                <v-divider class="mx-7"></v-divider>
                <v-row class="pa-7">
                  <v-col
                    v-for="(option, key) in manageDomainOptions"
                    v-show="!domain.expired || key === 1"
                    :key="key"
                    cols="6"
                    sm="6"
                    md="4"
                    lg="2"
                  >

                      <v-icon color="greenPrimary" x-large>{{
                        option.icon
                      }}</v-icon>

{{ option.label }}

                          {{
                            $t('ens.manage-domains.expire-on', {
                              date: domain.expiration
                            })
                          }}

                  </v-col>
                </v-row>

            </template>
          </mew-expand-panel>
        </v-sheet>
      </template>
      <template #tabContent3>
        <v-sheet
          max-width="500px"
          color="transparent"
          class="px-3 py-8 py-md-13 mx-auto"
        >

            <claim-balance
              :balance="ensTokens.balance"
              :claimed="ensTokens.claimed"
            />
            <form
              v-if="!ensTokens.claimed && hasEnsTokenBalance"
              @submit.prevent="claimTokens"
            >
              <module-address-book
                :label="$t('ens.delegator.addr')"
                :is-valid-address-func="isValidDelegatorAddress"
                preselect-curr-wallet-adr
                @setAddress="setDelegatorAddress"
              />
              <mew-button
                :loading="loading"
                :disabled="isClaimDisabled"
                :has-full-width="true"
                btn-size="xlarge"
                :title="$t('ens.claim-token-title')"
                @click.native="claimTokens"
              />
            </form>

        </v-sheet>
      </template>

      <template #tabContent4>
        <v-sheet
          max-width="500px"
          color="transparent"
          class="px-3 py-8 py-md-13 mx-auto"
        >

            <ens-reverse-lookup
              :address="address"
              :ens-manager="ensManager"
              :name="name"
              :duration-pick="durationPick"
            />

        </v-sheet>
      </template>
    </the-wrapper-dapp>

    <module-register-domain
      v-if="onRegister"
      ref="registerDomain"
      :on-register="onRegister"
      :close="closeRegister"
      :register="register"
      :not-enough-funds="notEnoughFunds"
      :loading-commit="loadingCommit"
      :loading-reg="loadingReg"
      :commited="committed"
      :minimum-age="minimumAge"
      :commit="commit"
      :no-funds-for-reg-fees="noFundsForRegFees"
      :commit-fee-in-eth="commitFeeInEth"
      :commit-fee-in-wei="commitFeeInWei"
      :commit-fee-usd="commitFeeUsd"
      :total-cost-usd="totalCostUsd"
      :total-cost="totalCost"
      :name="nameHandler.name"
      :parsed-host-name="nameHandler.parsedHostName"
      :checking-domain-avail="loading"
      :generate-key-phrase="generateKeyPhrase"
      :get-rent-price="getRentPrice"
      :waiting-for-reg="waitingForReg"
      @getCommitFeeOnly="getCommitFeeOnly"
    />

    <module-manage-domain
      ref="manageDomain"
      :setting-ipfs="settingIpfs"
      :on-manage="onManage"
      :close="closeManage"
      :type="manageType"
      :transfer="transfer"
      :renew="renew"
      :no-funds-for-renewal-fees="noFundsForRenewalFees"
      :loading-renew="loadingRenew"
      :upload-file="uploadFile"
      :uploaded-hash="manageDomainHandler.contentHash"
      :set-text-records="setTextRecords"
      :set-multicoin="setMulticoin"
      :multicoin="manageDomainHandler.multiCoin"
      :text-records="manageDomainHandler.txtRecords"
      :set-ipfs="setIpfs"
      :host-name="manageDomainHandler.parsedHostName"
      :get-rent-price="getRentPrice"
      :get-total-renew-fee-only="getTotalRenewFeeOnly"
      :manage-domain-handler="manageDomainHandler"
    />

</template>


indent script content

indent script content

<template>

    <button class="btn btn-default" v-on:click="fetchData(prev_page_url)" :disabled="!prev_page_url">
      {{config.previous_button_text}}
      <icon v-if="config.previous_button_text.length === 0" name="chevron-left"></icon>
    </button>
    Page {{current_page}} of {{last_page}}
    <button class="btn btn-default" v-on:click="fetchData(next_page_url)" :disabled="!next_page_url">
      {{config.next_button_text}}
      <icon v-if="config.next_button_text.length === 0" name="chevron-right"></icon>
    </button>

</template>


Add functionality for user to go back/forth in messages with keyboard arrow keys (consistent with new Cinematics feature) (#814)


Started working on adding arc drawing capabilities to map plotter.

<template xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">

      Points
      Enter Coordinates Here (lat, lon):
      <textarea v-model="pointCoordinatesString" style="width: 100%; height: 400px;"></textarea>

      Arcs
      <textarea v-model="arcsString" style="width: 100%; height: 400px;"></textarea>

    <gmap-map
      :center="center"
      :zoom="2"
      style="flex: 1 1 auto; height: 100%;">
      <gmap-marker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        @click="center=m.position"
      ></gmap-marker>
      <gmap-polyline
        :path="[{ lat: 0.0, lng: 0.0 }, { lat: 45.0, lng: 45.0 }]"
        :options="{ geodesic: true }"></gmap-polyline>
    </gmap-map>

</template>


Extra field validation

Extra field validation

<template>

    <input type="text" v-model="searchZipcode" :placeholder="$t('Zipcode')">
    <button @click="getDroppoints">{{ $t('Update') }}</button>

    {{ error }}

    Loading
    <gmap-map class="map-container" :center="center" :zoom="12" :options="{streetViewControl:false, fullscreenControl: false}">
      <gmap-marker
        :key="index"
        v-for="(m, index) in droppoints"
        :position="m.position"
        :animation="selected.id === m.id? 1:0"
        :clickable="true"
        :icon="m.icon"
        @click="selectDroppoint(m)" />
    </gmap-map>

    <input type="text" v-model="shipping.phoneNumber" :placeholder="$t('Phone Number')"
           @keyup="$v.shipping.phoneNumber.$touch(); setShipping()"
    >

      Field is required

      {{ field.title }}
      <input type="text" v-model="shipping.extraFields[index]" @keyup="$v.shipping.extraFields[index].$touch(); setShipping()">

        Field is required

{{ m.name }}

{{ m.streetname }}

{{ m.zipcode }} {{ m.city }}

        <input type="radio" v-model="selected" :value="m" >

</template>

<template>

    <input type="text" v-model="searchZipcode" :placeholder="$t('Zipcode')">
    <button @click="getDroppoints">{{ $t('Update') }}</button>

    {{ error }}

    Loading
    <gmap-map class="map-container" :center="center" :zoom="12" :options="{streetViewControl:false, fullscreenControl: false}">
      <gmap-marker
        :key="index"
        v-for="(m, index) in droppoints"
        :position="m.position"
        :animation="selected.id === m.id? 1:0"
        :clickable="true"
        :icon="m.icon"
        @click="selectDroppoint(m)" />
    </gmap-map>

    <input type="text" v-model="shipping.phoneNumber" :placeholder="$t('Phone Number')"
           @change="$v.shipping.phoneNumber.$touch(); setShipping"
    >

      Field is required

      {{ field.title }}
      <input type="text" v-model="shipping.extraFields[index]" @change="setShipping">

{{ m.name }}

{{ m.streetname }}

{{ m.zipcode }} {{ m.city }}

        <input type="radio" v-model="selected" :value="m" >

</template>


Grapher page for more user-defined graphs


Solve bug in TransactionWizard component where recurrings' fixed end dates didn't come through

<template>

            <button
                class="bg__button"
                :class="{ 'bg__button--active': type == 'earning' }"
                @click="switchType('earning')">Earning</button>
            <button
                class="bg__button"
                :class="{ 'bg__button--active': type == 'spending' }"
                @click="switchType('spending')">Spending</button>

            Tag
            <searchable
                name="tag"
                :items="tags"
                @SelectUpdated="tagUpdated"></searchable>
            <validation-error v-if="errors.tag_id" :message="errors.tag_id"></validation-error>

            Date
            <input type="text" v-model="date" />

YYYY-MM-DD

            <validation-error v-if="errors.date" :message="errors.date"></validation-error>
            <validation-error v-if="errors.day" :message="errors.day"></validation-error>

            Description
            <input type="text" v-model="description" placeholder="Birthday Present Angela" />
            <validation-error v-if="errors.description" :message="errors.description"></validation-error>

            Amount
            <input type="text" v-model="amount" />
            <validation-error v-if="errors.amount" :message="errors.amount"></validation-error>

                    <input type="checkbox" id="test" v-model="isRecurring" />

                    This is a recurring spending—create it for me in the future

                    How long will this spending go on for?

                            <input id="noEnd" type="radio" v-model="recurringEnd" value="forever" />

                            Forever :(

                            <input id="fixedEnd" type="radio" v-model="recurringEnd" value="fixed" />

                            Until
                            <input type="text" v-model="recurringEndDate" />

YYYY-MM-DD

                            <validation-error v-if="errors.end" :message="errors.end"></validation-error>

        <button
            class="button"
            @click="createEarning">
            Loading
            Create
        </button>

</template>

<template>

            <button
                class="bg__button"
                :class="{ 'bg__button--active': type == 'earning' }"
                @click="switchType('earning')">Earning</button>
            <button
                class="bg__button"
                :class="{ 'bg__button--active': type == 'spending' }"
                @click="switchType('spending')">Spending</button>

            Tag
            <searchable
                name="tag"
                :items="tags"
                @SelectUpdated="tagUpdated"></searchable>
            <validation-error v-if="errors.tag_id" :message="errors.tag_id"></validation-error>

            Date
            <input type="text" v-model="date" />

YYYY-MM-DD

            <validation-error v-if="errors.date" :message="errors.date"></validation-error>
            <validation-error v-if="errors.day" :message="errors.day"></validation-error>

            Description
            <input type="text" v-model="description" placeholder="Birthday Present Angela" />
            <validation-error v-if="errors.description" :message="errors.description"></validation-error>

            Amount
            <input type="text" v-model="amount" />
            <validation-error v-if="errors.amount" :message="errors.amount"></validation-error>

                    <input type="checkbox" id="test" v-model="isRecurring" />

                    This is a recurring spending—create it for me in the future

                    How long will this spending go on for?

                            <input type="radio" v-model="recurringEnd" value="forever" />

                            Forever :(

                            <input type="radio" v-model="recurringEnd" value="fixed" />

                            Until
                            <input type="text" />
                            <validation-error v-if="errors.end" :message="errors.end"></validation-error>

YYYY-MM-DD

        <button
            class="button"
            @click="createEarning">
            Loading
            Create
        </button>

</template>


devop: use imported components

devop: use imported components

<template>
  <div>
    <mew-module
      v-if="tokensData.length > 0"
      class="mt-6"
      subtitle="My Tokens Value"
      :title="`$ ${totalTokensValue}`"
      :icon="require('@/assets/images/icons/icon-token-grey.png')"
      icon-align="left"
    >
      <template #moduleBody>
        <mew-table
          :has-color="false"
          :table-headers="tableHeaders"
          :table-data="tokensData"
        />
      </template>
    </mew-module>
    <!--
    =====================================================================================
      display if the user has no tokens
    =====================================================================================
    -->
    <balance-empty-block v-else is-tokens />
  </div>
</template>
<script>
import BigNumber from 'bignumber.js';
import { mapGetters } from 'vuex';
import BalanceEmptyBlock from './components/BalanceEmptyBlock';
export default {
  components: {
    BalanceEmptyBlock
  },
  data() {
    return {
      tableHeaders: [
        {
          text: 'Token',
          value: 'token',
          sortable: true
        },
        {
          text: 'Price',
          value: 'price',
          sortable: true
        },
        {
          text: 'Market Cap',
          value: 'cap',
          sortable: true
        },
        {
          text: '24H Changes',
          value: 'change',
          sortable: true
        },
        {
          text: 'Token Value',
          value: 'value',
          sortable: true,
          width: '250px'
        }
      ]
    };
  },
  computed: {
    ...mapGetters('wallet', ['tokensList']),
    tokensData() {
      return this.tokensList
        .filter(item => {
          if (item.price_change_24h || item.market_cap) {
            return item;
          }
        })
        .map(item => {
          const newObj = {};
          newObj.value = `$ ${item.usdBalance}`;
          newObj.token = item.symbol;
          newObj.cap = item.market_cap;
          newObj.change = item.price_change_24h;
          newObj.status = item.price_change_24h > 0 ? '+' : '-';
          newObj.price = item.price;
          newObj.tokenImg = item.img;
          newObj.usdBalance = item.usdBalance;

          return newObj;
        });
    },
    totalTokensValue() {
      return new BigNumber(
        this.tokensData.reduce((acc, currentVal) => {
          return new BigNumber(acc).plus(currentVal.usdBalance).toFixed();
        }, 0)
      ).toFixed(2);
    }
  }
};
</script>
<style lang="scss" scoped>
.mew-component--my-token-value {
  .theme--dark.v-sheet {
    background-color: var(--v-mewBg-base);
    border-color: var(--v-mewBg-base);
  }
  .block-title {
    margin-left: 10px;
    .header-wrapper {
      padding: 0 !important;
    }
    .left-wrapper {
      padding-left: 0 !important;
    }
    .right-wrapper {
      padding: 0 !important;
      margin-right: 10px;
    }
  }
}
</style>

<template>
  <div>
    <mew-module
      v-if="tokensData.length > 0"
      class="mt-6"
      subtitle="My Tokens Value"
      :title="`$ ${totalTokensValue}`"
      :icon="require('@/assets/images/icons/icon-token-grey.png')"
      icon-align="left"
    >
      <template #moduleBody>
        <mew-table
          :has-color="false"
          :table-headers="tableHeaders"
          :table-data="tokensData"
        />
      </template>
    </mew-module>
    <!--
    =====================================================================================
      display if the user has no tokens
    =====================================================================================
    -->
    <balance-empty-block v-else is-tokens />
  </div>
</template>
<script>
import BigNumber from 'bignumber.js';
import { mapGetters } from 'vuex';
import BalanceEmptyBlock from './components/BalanceEmptyBlock';
export default {
  data() {
    return {
      tableHeaders: [
        {
          text: 'Token',
          value: 'token',
          sortable: true
        },
        {
          text: 'Price',
          value: 'price',
          sortable: true
        },
        {
          text: 'Market Cap',
          value: 'cap',
          sortable: true
        },
        {
          text: '24H Changes',
          value: 'change',
          sortable: true
        },
        {
          text: 'Token Value',
          value: 'value',
          sortable: true,
          width: '250px'
        }
      ]
    };
  },
  computed: {
    ...mapGetters('wallet', ['tokensList']),
    tokensData() {
      return this.tokensList
        .filter(item => {
          if (item.price_change_24h || item.market_cap) {
            return item;
          }
        })
        .map(item => {
          const newObj = {};
          newObj.value = `$ ${item.usdBalance}`;
          newObj.token = item.symbol;
          newObj.cap = item.market_cap;
          newObj.change = item.price_change_24h;
          newObj.status = item.price_change_24h > 0 ? '+' : '-';
          newObj.price = item.price;
          newObj.tokenImg = item.img;
          newObj.usdBalance = item.usdBalance;

          return newObj;
        });
    },
    totalTokensValue() {
      return new BigNumber(
        this.tokensData.reduce((acc, currentVal) => {
          return new BigNumber(acc).plus(currentVal.usdBalance).toFixed();
        }, 0)
      ).toFixed(2);
    }
  }
};
</script>
<style lang="scss" scoped>
.mew-component--my-token-value {
  .theme--dark.v-sheet {
    background-color: var(--v-mewBg-base);
    border-color: var(--v-mewBg-base);
  }
  .block-title {
    margin-left: 10px;
    .header-wrapper {
      padding: 0 !important;
    }
    .left-wrapper {
      padding-left: 0 !important;
    }
    .right-wrapper {
      padding: 0 !important;
      margin-right: 10px;
    }
  }
}
</style>


[review] Fix annotion display when browsing frames

<template>

      <canvas
        id="annotation-canvas"
        ref="annotation-canvas"
        class="canvas"
      >
      </canvas>

    <preview-viewer
      ref="preview-viewer"
      name="player1"
      class="preview-viewer"
      :big="big"
      :default-height="defaultHeight"
      :full-screen="fullScreen"
      :is-ordering="isOrdering"
      :is-comparing="isComparing"
      :is-muted="isMuted"
      :is-repeating="isRepeating"
      :light="light"
      :preview="currentPreview"
      @size-changed="fixCanvasSize"
      @duration-changed="changeMaxDuration"
      @time-update="updateTime"
      @play-ended="pause"
    />

    <preview-viewer
      ref="comparison-preview-viewer"
      name="player2"
      class="comparison-preview-viewer"
      :big="big"
      :default-height="defaultHeight"
      :full-screen="fullScreen"
      :is-comparing="isComparing"
      :is-muted="true"
      :is-repeating="isRepeating"
      :light="light"
      :preview="previewToCompare"
      v-show="isComparing && previewToCompare"
    />

      <progress
        ref="progress"
        value="0"
        min="0"
        @click="onProgressClicked"
      >
      </progress>

    <annotation-bar
      :annotations="annotations"
      :maxDurationRaw="videoDuration"
      :width="width"
      @select-annotation="onAnnotationClicked"
      ref="annotation-bar"
      v-show="isMovie"
    />

        <button-simple
          class="flexrow-item"
          :title="$t('playlists.actions.play')"
          icon="play"
          @click="onPlayPauseClicked"
          v-if="!isPlaying"
        />
        <button-simple
          class="flexrow-item"
          :title="$t('playlists.actions.pause')"
          icon="pause"
          @click="onPlayPauseClicked"
          v-else
        />

        <button-simple
          :active="isRepeating"
          :title="$t('playlists.actions.looping')"
          icon="repeat"
          @click="onRepeatClicked"
          v-if="fullScreen"
        />

        <button-simple
          class="flexrow-item"
          :title="$t('playlists.actions.unmute')"
          icon="soundoff"
          @click="onToggleSoundClicked"
          v-if="isMuted"
        />
        <button-simple
          class="flexrow-item"
          :title="$t('playlists.actions.mute')"
          icon="soundon"
          @click="onToggleSoundClicked"
          v-else
        />

          {{ currentTime }}

        /

         {{ maxDuration }}

          ({{ currentFrame }})

        <button-simple
          class="ml1"
          :active="isComparing"
          icon="compare"
          :title="$t('playlists.actions.split_screen')"
          @click="onCompareClicked"
          v-if="taskTypeOptions.length > 0 && fullScreen"
        />

        <combobox
          class="comparison-combobox dark"
          :options="taskTypeOptions"
          :is-dark="true"
          :thin="true"
          v-model="taskTypeId"
          v-if="isComparing && (!light || fullScreen)"
        />
        <combobox
          class="comparison-combobox dark"
          :options="previewFileOptions"
          :is-dark="true"
          :thin="true"
          v-model="previewToCompareId"
          v-if="isComparing && (!light || fullScreen)"
        />

          <button-simple
            class="flexrow-item"
            icon="undo"
            :title="$t('playlists.actions.annotation_undo')"
            v-if="!readOnly && fullScreen"
            @click="undoLastAction"
          />

          <button-simple
            class="flexrow-item flexrow-item"
            :title="$t('playlists.actions.annotation_redo')"
            icon="redo"
            v-if="!readOnly && fullScreen"
            @click="redoLastAction"
          />

          <button-simple
            class="flexrow-item"
            icon="remove"
            :title="$t('playlists.actions.annotation_delete')"
            @click="onDeleteClicked"
            v-if="!readOnly && fullScreen"
          />

          <transition name="slide">

              <color-picker
                :isOpen="isShowingPalette"
                :color="this.textColor"
                :palette="this.palette"
                @TogglePalette="onPickColor"
                @change="onChangeTextColor"
              />

          </transition>

          <button-simple
            class="flexrow-item"
            icon="type"
            :active="isTyping"
            :title="$t('playlists.actions.annotation_text')"
            @click="onTypeClicked"
            v-if="!readOnly && fullScreen"
          />

          <transition name="slide">

              <pencil-picker
                :isOpen="isShowingPencilPalette"
                :pencil="pencil"
                :sizes="this.pencilPalette"
                @toggle-palette="onPickPencil"
                @change="onChangePencil"
              />

              <color-picker
                :isOpen="isShowingPalette"
                :color="this.color"
                :palette="this.palette"
                @TogglePalette="onPickColor"
                @change="onChangeColor"
              />

          </transition>

          <button-simple
            class="flexrow-item"
            icon="pencil"
            :active="isDrawing"
            :title="$t('playlists.actions.annotation_draw')"
            @click="onPencilAnnotateClicked"
            v-if="!readOnly && fullScreen"
          />

          <arrow-up-right-icon class="icon is-small" />

 1 ||
                                lastPreviewFiles.length > 1))"
        >

        <browsing-bar
          :current-index="currentIndex"
          :previews="previews"
          :read-only="readOnly"
          :light="light"
          :full-screen="fullScreen"
          @add-preview-clicked="$emit('add-extra-preview')"
          @next-clicked="onNextClicked"
          @previous-clicked="onPreviousClicked"
          @remove-preview-clicked="onRemovePreviewClicked"
          @current-index-clicked="isOrdering = !isOrdering"
          v-if="currentPreview"
        />

            <span
              :class="{
                'previous-preview-file': true,
                'current-preview-file': isCurrentRevision(previewFile)
              }"
              :key="`last-preview-${previewFile.id}`"
              :title="getRevisionTitle(previewFile)"
              @click="changeCurrentPreview(previewFile)"
              v-for="previewFile in lastPreviewFiles"
            >
              {{ previewFile.revision }}

 1"
        >

          <download-icon class="icon is-small" />

        <button-simple
          class="flexrow-item"
          :title="$t('playlists.actions.fullscreen')"
          icon="maximize"
          v-if="isFullScreenEnabled"
          @click="onFullscreenClicked"
        />

      <revision-preview
        :preview-file="preview"
        :index="index"
        :is-selected="currentPreview.id === preview.id"
        @selected="onRevisionPreviewSelected(index + 1)"
        @preview-dropped="onRevisionPreviewDropped"
      />

</template>


feat: Update to v0.10.1 specs

feat: Update to v0.10.1 specs

<template>

        Click
        Tap
        on each type to see it in action.

          {{dialog.icon}}

{{dialog.label}}

          keyboard_arrow_right

With Form Components

          {{dialog.icon}}

{{dialog.label}}

          keyboard_arrow_right

Form components can be combined and named however you wish. Check source code.

</template>


hide hold dialog by default

hide hold dialog by default

<template>
  <content>

        Waiting for an opponent.

        Please be patient.

  </content>
</template>


:bug: (categories) Close alert when delete confirmed

<template>

    <category-modal
      :show="showModal"
      :category="selectedCategory"
      :categoryNames="categories.map(c => c.label)"
      @content-update="editCategoryLabel"
      @content-error="showCategoryUpdateError"
      @close-modal="closeModal">
    </category-modal>

    <category-alert
      type="warning"
      class="category-alert"
      :show="showAlert"
      @close-alert="closeAlert">

Delete category

        Do you really want to delete "{{ selectedCategoryLabel }}"?

      <button class="default" slot="cancel" @click="closeAlert">
        Cancel
      </button>
      <button class="warning" slot="confirm" @click="confirmDeleteCategory">
        Delete category
      </button>
    </category-alert>

    <app-header :back="true" backPath="settings">

Manage Categories

    </app-header>

      <form class="add-category" @submit.prevent="submitNewCategory">

          <input required
            type="text"
            id="category-name"
            placeholder="Category"
            v-model="categoryName" />

        <button class="circle" aria-label="Add category">
          <feather-plus />
        </button>
      </form>

          <li v-for="(category, index) in categories" :key="`category-${index}`">

              {{ category.label }}

              <button
                class="icon inverse"
                aria-label="Edit category"
                @click="openCategoryModal(category)">
                <feather-edit />
              </button>
              <button
                class="icon inverse"
                aria-label="Delete category"
                @click="openCategoryDialog($event, category)">
                <feather-trash />
              </button>

            You don't have any categories yet.

</template>


multiple data now works the same as single data

<template>
  <v-layout column>
    <v-flex xs12 class='text-xs-center' mt-5>

Edit

    </v-flex>
    <v-flex>
      <v-btn primary v-on:click='onSaveClick'>Save</v-btn>
    </v-flex>
    <v-flex v-for='item in dataset' :key='item.name'>
      {{item.name}}

      <el-input
        v-if='item.type === "text"'
        :name='item.name'
        v-model='item.value'
      />
      <el-input
        v-if='item.type === "paragraph"'
        :name='item.name'
        v-model='item.value'
        type='textarea'
      />
      <el-input-number
        v-if='item.type === "number"'
        v-model='item.value'
      />
      <el-switch
        v-if='item.type === "switch"'
        v-model='item.value'
      />
      <el-date-picker
        v-if='item.type === "date-time"'
        :value='item.value'
        @input='onDateTimeChange(item, $event)'
        type='datetime'
      />
      <el-color-picker
        v-if='item.type === "color"'
        v-model='item.value'
      />
      <v-select
        v-if='item.type === "images"'
        :items='images'
        v-model='item.value'
        :label='item.name'
        multiple
      />
      <el-rate
        v-if='item.type === "rate"'
        v-model='item.value'
      />
    </v-flex>
  </v-layout>
</template>

<template>
  <v-layout column>
    <v-flex xs12 class='text-xs-center' mt-5>

Edit

    </v-flex>
    <v-flex>
      <v-btn primary v-on:click='onSaveClick'>Save</v-btn>
    </v-flex>
    <v-flex v-for='item in dataset' :key='item.name'>
      <v-text-field
        v-if='item.type === "text"'
        :label='item.name'
        :name='item.name'
        v-model='item.value'
      />
      <v-text-field
        v-if='item.type === "paragraph"'
        :label='item.name'
        :name='item.name'
        v-model='item.value'
        multi-line
      />
      <el-input-number
        v-if='item.type === "number"'
        v-model='item.value'
      />
      <el-switch
        v-if='item.type === "switch"'
        v-model='item.value'
      />
      <el-date-picker
        v-if='item.type === "date-time"'
        :value='item.value'
        @input='onDateTimeChange(item, $event)'
        type='datetime'
      />

    </v-flex>
  </v-layout>
</template>


fixed unending loading animations

fixed unending loading animations

<template>

        <canvas class="kiwi-loading-animation" />

</template>


Use new eventhook

Use new eventhook

<style lang="scss">
</style>

<template lang="pug">
div
  // Main plotting div
  #timechart
</template>

<script>
import { TimeChart } from 'd3-foresight'
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions([
      'initTimeChart',
      'plotTimeChart',
      'updateTimeChart'
    ]),
    ...mapActions('weeks', [
      'updateSelectedWeek'
    ])
  },
  ready () {
    // Initialize time chart
    let timechart = new TimeChart('#timechart')

    timechart.eventHooks.push(eventData => {
      if (eventData.type === 'positionUpdate') {
        this.updateSelectedWeek(eventData.value)
      }
    })

    this.initTimeChart(timechart)

    // Setup selected data
    this.plotTimeChart()

    // Hot start
    this.updateTimeChart()
  }
}
</script>

<style lang="scss">
</style>

<template lang="pug">
div
  // Main plotting div
  #timechart
</template>

<script>
import { TimeChart } from 'd3-foresight'
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions([
      'initTimeChart',
      'plotTimeChart',
      'updateTimeChart'
    ]),
    ...mapActions('weeks', [
      'updateSelectedWeek'
    ])
  },
  ready () {
    // Initialize time chart
    let timechart = new TimeChart('#timechart')

    timechart.eventHooks.push(eventData => {
      if (eventData.type === 'weekUpdate') {
        this.updateSelectedWeek(eventData.value)
      }
    })

    this.initTimeChart(timechart)

    // Setup selected data
    this.plotTimeChart()

    // Hot start
    this.updateTimeChart()
  }
}
</script>


Make title editable in the sidebar

Make title editable in the sidebar

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

<template>
	<AppSidebar v-if="currentBoard && currentCard && copiedCard"
		:title="currentCard.title"
		:subtitle="subtitle"
		:title-editable.sync="titleEditable"
		@update:title="updateTitle"
		@close="closeSidebar">
		<template #secondary-actions />
		<AppSidebarTab id="details"
			:order="0"
			:name="t('deck', 'Details')"
			icon="icon-home">

					{{ t('deck', 'Tags') }}

					<Multiselect v-model="allLabels"
						:multiple="true"
						:disabled="!canEdit"
						:options="currentBoard.labels"
						:placeholder="t('deck', 'Assign a tag to this card…')"
						:taggable="true"
						label="title"
						track-by="id"
						@select="addLabelToCard"
						@remove="removeLabelFromCard">
						<template #option="scope">

								{{ scope.option.title }}

						</template>
						<template #tag="scope">

								{{ scope.option.title }}

						</template>
					</Multiselect>

					{{ t('deck', 'Assign to users/groups/circles') }}

					<Multiselect v-if="canEdit"
						v-model="assignedUsers"
						:multiple="true"
						:options="formatedAssignables"
						:user-select="true"
						:auto-limit="false"
						:placeholder="t('deck', 'Assign a user to this card…')"
						label="displayname"
						track-by="multiselectKey"
						@select="assignUserToCard"
						@remove="removeUserFromCard">
						<template #tag="scope">

								<Avatar :user="scope.option.uid"
									:display-name="scope.option.displayname"
									:size="24"
									:is-no-user="scope.option.isNoUser"
									:disable-menu="true" />

						</template>
					</Multiselect>

						<Avatar v-for="option in assignedUsers"
							:key="option.primaryKey"
							:user="option.uid"
							:display-name="option.displayname"
							:is-no-user="option.isNoUser"
							:size="32" />

					{{ t('deck', 'Due date') }}

					<DatetimePicker v-model="duedate"
						:placeholder="t('deck', 'Set a due date')"
						type="datetime"
						:minute-step="5"
						:show-second="false"
						:format="format"
						:disabled="saving || !canEdit"
						confirm />
					<Actions v-if="canEdit">
						<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
							{{ t('deck', 'Remove due date') }}
						</ActionButton>
					</Actions>

				<CollectionList v-if="currentCard.id"
					:id="`${currentCard.id}`"
					:name="currentCard.title"
					type="deck-card" />

				{{ t('deck', 'Description') }}
				{{ t('deck', '(Unsaved)') }}
				{{ t('deck', '(Saving…)') }}

				<Actions v-if="canEdit">
					<ActionButton v-if="!descriptionEditing" icon="icon-rename" @click="showEditor()">
						{{ t('deck', 'Edit description') }}
					</ActionButton>
					<ActionButton v-else icon="icon-toggle" @click="hideEditor()">
						{{ t('deck', 'View description') }}
					</ActionButton>
				</Actions>
				<Actions v-if="canEdit">
					<ActionButton v-if="descriptionEditing" icon="icon-attach" @click="showAttachmentModal()">
						{{ t('deck', 'Add Attachment') }}
					</ActionButton>
				</Actions>

			<VueEasymde v-else
				:key="copiedCard.id"
				ref="markdownEditor"
				v-model="copiedCard.description"
				:configs="mdeConfig"
				@input="updateDescription"
				@blur="saveDescription" />
		</AppSidebarTab>

		<AppSidebarTab id="attachments"
			:order="1"
			:name="t('deck', 'Attachments')"
			icon="icon-attach">
			<CardSidebarTabAttachments :card="currentCard" />
		</AppSidebarTab>

		<AppSidebarTab v-if="hasComments"
			id="comments"
			:order="2"
			:name="t('deck', 'Comments')"
			icon="icon-comment">
			<CardSidebarTabComments :card="currentCard" />
		</AppSidebarTab>

		<AppSidebarTab v-if="hasActivity"
			id="timeline"
			:order="3"
			:name="t('deck', 'Timeline')"
			icon="icon-activity">
			<CardSidebarTabActivity :card="currentCard" />
		</AppSidebarTab>
		<Modal v-if="modalShow" :title="t('deck', 'Choose attachment')" @close="modalShow=false">

{{ t('deck', 'Choose attachment') }}

				<AttachmentList
					:card-id="currentCard.id"
					:selectable="true"
					@selectAttachment="addAttachment" />

		</Modal>
	</AppSidebar>
</template>

<template>
	<AppSidebar v-if="currentBoard && currentCard && copiedCard"
		:title="currentCard.title"
		:subtitle="subtitle"
		@close="closeSidebar">
		<template #secondary-actions />
		<AppSidebarTab id="details"
			:order="0"
			:name="t('deck', 'Details')"
			icon="icon-home">

					{{ t('deck', 'Tags') }}

					<Multiselect v-model="allLabels"
						:multiple="true"
						:disabled="!canEdit"
						:options="currentBoard.labels"
						:placeholder="t('deck', 'Assign a tag to this card…')"
						:taggable="true"
						label="title"
						track-by="id"
						@select="addLabelToCard"
						@remove="removeLabelFromCard">
						<template #option="scope">

								{{ scope.option.title }}

						</template>
						<template #tag="scope">

								{{ scope.option.title }}

						</template>
					</Multiselect>

					{{ t('deck', 'Assign to users/groups/circles') }}

					<Multiselect v-if="canEdit"
						v-model="assignedUsers"
						:multiple="true"
						:options="formatedAssignables"
						:user-select="true"
						:auto-limit="false"
						:placeholder="t('deck', 'Assign a user to this card…')"
						label="displayname"
						track-by="multiselectKey"
						@select="assignUserToCard"
						@remove="removeUserFromCard">
						<template #tag="scope">

								<Avatar :user="scope.option.uid"
									:display-name="scope.option.displayname"
									:size="24"
									:is-no-user="scope.option.isNoUser"
									:disable-menu="true" />

						</template>
					</Multiselect>

						<Avatar v-for="option in assignedUsers"
							:key="option.primaryKey"
							:user="option.uid"
							:display-name="option.displayname"
							:is-no-user="option.isNoUser"
							:size="32" />

					{{ t('deck', 'Due date') }}

					<DatetimePicker v-model="duedate"
						:placeholder="t('deck', 'Set a due date')"
						type="datetime"
						:minute-step="5"
						:show-second="false"
						:format="format"
						:disabled="saving || !canEdit"
						confirm />
					<Actions v-if="canEdit">
						<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">
							{{ t('deck', 'Remove due date') }}
						</ActionButton>
					</Actions>

				<CollectionList v-if="currentCard.id"
					:id="`${currentCard.id}`"
					:name="currentCard.title"
					type="deck-card" />

				{{ t('deck', 'Description') }}
				{{ t('deck', '(Unsaved)') }}
				{{ t('deck', '(Saving…)') }}

				<Actions v-if="canEdit">
					<ActionButton v-if="!descriptionEditing" icon="icon-rename" @click="showEditor()">
						{{ t('deck', 'Edit description') }}
					</ActionButton>
					<ActionButton v-else icon="icon-toggle" @click="hideEditor()">
						{{ t('deck', 'View description') }}
					</ActionButton>
				</Actions>
				<Actions v-if="canEdit">
					<ActionButton v-if="descriptionEditing" icon="icon-attach" @click="showAttachmentModal()">
						{{ t('deck', 'Add Attachment') }}
					</ActionButton>
				</Actions>

			<VueEasymde v-else
				:key="copiedCard.id"
				ref="markdownEditor"
				v-model="copiedCard.description"
				:configs="mdeConfig"
				@input="updateDescription"
				@blur="saveDescription" />
		</AppSidebarTab>

		<AppSidebarTab id="attachments"
			:order="1"
			:name="t('deck', 'Attachments')"
			icon="icon-attach">
			<CardSidebarTabAttachments :card="currentCard" />
		</AppSidebarTab>

		<AppSidebarTab v-if="hasComments"
			id="comments"
			:order="2"
			:name="t('deck', 'Comments')"
			icon="icon-comment">
			<CardSidebarTabComments :card="currentCard" />
		</AppSidebarTab>

		<AppSidebarTab v-if="hasActivity"
			id="timeline"
			:order="3"
			:name="t('deck', 'Timeline')"
			icon="icon-activity">
			<CardSidebarTabActivity :card="currentCard" />
		</AppSidebarTab>
		<Modal v-if="modalShow" :title="t('deck', 'Choose attachment')" @close="modalShow=false">

{{ t('deck', 'Choose attachment') }}

				<AttachmentList
					:card-id="currentCard.id"
					:selectable="true"
					@selectAttachment="addAttachment" />

		</Modal>
	</AppSidebar>
</template>


CardBadges: Count checkboxes started with "+ [ ]"

Fixes #2187

Signed-off-by: Johannes Reiff <1d6e1cf70ec6f9ab28d3ea4b27a49a77654d370e@jreiff.de>

<template>

 0" class="icon icon-comment" />

 0" class="card-tasks icon icon-checkmark">
			{{ checkListCheckedCount }}/{{ checkListCount }}

 0" class="icon-attach icon icon-attach-dark">
			{{ card.attachmentCount }}

		<AvatarList :users="card.assignedUsers" />

		<CardMenu :id="id" />

</template>


增加了移动端筛选组件

增加了移动端筛选组件

/**
* Created by 于士博 on 2017/7/26.
* QQ: 491387425
* weChat: 491387425
* 筛选功能：目前功能为移动端筛选
*/

<template>

{{areas}}

        <transition name="showlist">

                {{item.name}}

        </transition>

职位筛选

        <transition name="showlist">

工作经验

               -1}" @click="chooseMulti(exps,item)">
                {{item.name}}

学历要求

               -1}" @click="chooseMulti(educations,item)">
                {{item.name}}

                确定

        </transition>

公司筛选

        <transition name="showlist">

融资阶段

               -1}" @click="chooseMulti(steps,item)">
                {{item.name}}

                确定

        </transition>

    <transition name="showcover">

    </transition>

</template>

/**
* Created by 于士博 on 2017/7/25.
* QQ: 491387425
* weChat: 491387425
* 筛选功能：目前功能为登录
*/

<template>

全上海

职位筛选

公司筛选

</template>


TabbedView improvements to fix missing $children at times

<template>

            {{c.header}}

        <slot></slot>

</template>


add to set valid

add to set valid

<template>

          <q-btn :label="$t('invitation')" color="primary" @click="invite" />

        <q-input v-model="account.invitationURL" readonly v-if="account.invitationURL"/>

      <q-list bordered separator>
        <q-item>
          <q-item-section>
            {{ $t('accountInvited') }}
          </q-item-section>
          <q-item-section>
            {{ longTimestamp(account.data().invitedAt.seconds * 1000) }}
          </q-item-section>
        </q-item>
        <q-item>
          <q-item-section>
            {{ $t('accountEntered') }}
          </q-item-section>
          <q-item-section>
            {{ longTimestamp(account.data().enteredAt.seconds * 1000) }}
          </q-item-section>
        </q-item>
        <q-item>
          <q-item-section>
            {{ $t('accountPaused') }}
          </q-item-section>
          <q-item-section>
            <q-toggle
              v-model="paused"
              :label="paused ? 'Yes' : 'No'"
              @input="toggleValid"
              v-if="account.id !== $store.state.me.id"
            />

              {{ paused ? 'Yes' : 'No' }}

          </q-item-section>
        </q-item>
      </q-list>

</template>

<template>

      <q-list bordered separator>
        <q-item>
          <q-item-section>
            {{ $t('accountInvited') }}
          </q-item-section>
          <q-item-section>
            {{ longTimestamp(account.data().invitedAt.seconds * 1000) }}
          </q-item-section>
        </q-item>
        <q-item>
          <q-item-section>
            {{ $t('accountEntered') }}
          </q-item-section>
          <q-item-section>
            {{ longTimestamp(account.data().enteredAt.seconds * 1000) }}
          </q-item-section>
        </q-item>
        <q-item>
          <q-item-section>
            {{ $t('accountPaused') }}
          </q-item-section>
          <q-item-section>
            {{ account.data().valid ? 'No' : 'Yes' }}
          </q-item-section>
        </q-item>
      </q-list>

          <q-btn :label="$t('invitation')" color="primary" @click="invite(account.id)" />

        <q-input v-model="account.invitationURL" readonly v-if="account.invitationURL"/>

</template>


add debounced xhr search

add debounced xhr search

<template>

    <input
      v-model="display"
      type="text"
      :placeholder="placeholder"
      :disabled="disableInput"
      @click="search"
      @input="search"
      @keydown.enter="enter"
      @keydown.tab="close"
      @keydown.up="up"
      @keydown.down="down"
      @keydown.esc="close"
      @focus="focus"
      @blur="blur"
    >
    <input :name="name" type="hidden" :value="value">

{{ result.name }}

Nothing found.

{{ error }}

</template>


Don't change focus when ctrl key is detected on its own

<template>

            <transition name="kiwi-selfuser-trans">
                <self-user
                    v-if="networkState==='connected'
                    && selfuser_open === true"
                    :network="buffer.getNetwork()"
                    @close="selfuser_open=false"
                />
            </transition>

            <away-status-indicator
                v-if="buffer.getNetwork() && buffer.getNetwork().state === 'connected'"
                :network="buffer.getNetwork()"
                :user="buffer.getNetwork().currentUser()"
            />

                {{ currentNick }}

            <form
                class="kiwi-controlinput-form"
                @submit.prevent="submitForm"
                @click="maybeHidePlugins"
            >
                <auto-complete
                    v-if="autocomplete_open"
                    ref="autocomplete"
                    :items="autocomplete_items"
                    :filter="autocomplete_filter"
                    :buffer="buffer"
                    @temp="onAutocompleteTemp"
                    @selected="onAutocompleteSelected"
                    @cancel="onAutocompleteCancel"
                />

                    <irc-input
                        ref="input"
                        :placeholder="$t('input_placeholder')"
                        class="kiwi-controlinput-input"
                        wrap="off"
                        @input="inputUpdate"
                        @keydown="inputKeyDown($event)"
                        @keyup="inputKeyUp($event)"
                        @click="closeInputTool"/>

                <button
                    v-if="shouldShowSendButton"
                    type="submit"
                    class="kiwi-controlinput-send fa fa-paper-plane" />
            </form>

                <transition name="kiwi-plugin-ui-trans">

                </transition>

            <component :is="active_tool" v-bind="active_tool_props"/>

</template>


Fix typing done state not being sent on FF with empty input

<template>

            <transition name="kiwi-selfuser-trans">
                <self-user
                    v-if="networkState==='connected'
                    && selfuser_open === true"
                    :network="buffer.getNetwork()"
                    @close="selfuser_open=false"
                />
            </transition>

            <away-status-indicator
                v-if="buffer.getNetwork() && buffer.getNetwork().state === 'connected'"
                :network="buffer.getNetwork()"
                :user="buffer.getNetwork().currentUser()"
            />

                {{ currentNick }}

            <form
                class="kiwi-controlinput-form"
                @submit.prevent="submitForm"
                @click="maybeHidePlugins"
            >
                <auto-complete
                    v-if="autocomplete_open"
                    ref="autocomplete"
                    :items="autocomplete_items"
                    :filter="autocomplete_filter"
                    :buffer="buffer"
                    @temp="onAutocompleteTemp"
                    @selected="onAutocompleteSelected"
                    @cancel="onAutocompleteCancel"
                />
                <typing-users-list :buffer="buffer" />

                    <irc-input
                        ref="input"
                        :placeholder="$t('input_placeholder')"
                        class="kiwi-controlinput-input"
                        wrap="off"
                        @input="inputUpdate"
                        @keydown="inputKeyDown($event)"
                        @keyup="inputKeyUp($event)"
                        @click="closeInputTool"/>

                <button
                    v-if="shouldShowSendButton"
                    type="submit"
                    class="kiwi-controlinput-send fa fa-paper-plane" />
            </form>

                <transition name="kiwi-plugin-ui-trans">

                </transition>

            <component :is="active_tool" v-bind="active_tool_props"/>

</template>


fix header dropdown layout

fix header dropdown layout

<template>

        <router-link to="/">

        </router-link>

            <router-link v-if="item.type === 'dropdown' && item.path" :to="item.path" v-text="i18nify(item.label)"></router-link>

                <router-link v-if="child.type !== 'outgoing'" :to="child.path" v-text="i18nify(child.label)"></router-link>

            <router-link v-if="item.type !== 'dropdown' && item.type !== 'outgoing'" :to="item.path" v-text="i18nify(item.label)"></router-link>

          <router-link v-if="item.type === 'dropdown' && item.path" :to="item.path" v-text="i18nify(item.label)"></router-link>

              <router-link v-if="child.type !== 'outgoing'" :to="child.path" v-text="i18nify(child.label)"></router-link>

          <router-link v-if="item.type !== 'dropdown' && item.type !== 'outgoing'" :to="item.path" v-text="i18nify(item.label)"></router-link>

    <transition name="fade">

    </transition>

</template>


Change cdr-image to use <script setup> syntax

<template>
  <div
    v-if="ratio"
    :style="ratioObject"
    :class="style[ratioClass]"
  >
    <img
      :style="cropObject"
      :class="mapClasses(style,
                         baseClass,
                         modifierClass,
                         radiusClass,
                         coverWrapperClass,
                         cropClass,
                         coverClass,
      )"
      :src="src"
      :alt="alt"
      v-bind="$attrs"
    >
  </div>
  <img
    v-else
    :class="mapClasses(style,
                       baseClass,
                       modifierClass,
                       radiusClass,
    )"
    :src="src"
    :alt="alt"
    v-bind="$attrs"
  >
</template>
<script setup>
import { useCssModule, computed } from 'vue';
import mapClasses from '../../utils/mapClasses';
import propValidator from '../../utils/propValidator';
const props = defineProps({
  /**
   * Required. Image source url.
   */
  src: {
    type: String,
    required: true,
  },
  /**
   * Required. Image alt text.
   */
  alt: {
    type: String,
    default: '',
  },
  /**
   * Aspect ratio of the media container. {auto, square, 1-2, 2-3, 3-4, 9-16, 2-1, 3-2, 4-3, 16-9}
   */
  ratio: {
    type: String,
    validator: (value) => ([
      'auto',
      'square',
      '1-2',
      '2-3',
      '3-4',
      '9-16',
      '2-1',
      '3-2',
      '4-3',
      '16-9'].indexOf(value) >= 0) || false,
  },
  /**
   * Requires a `ratio`. Area to crop the image overflow to. {left, center, right} {top, center, bottom}
   */
  crop: {
    type: String,
  },
  /**
   * Requires a `ratio`. Scale the image to be as large as possible to fill the area (background-position: cover;)
   */
  cover: {
    type: Boolean,
  },
  /**
   * Sets a border radius to an element {square, top, right, bottom, left}
   */
  radius: {
    type: String,
    validator: (value) => ([
      'circle',
      'rounded'].indexOf(value) >= 0) || false,
  },

  modifier: {
    type: String,
    default: '',
    validator: (value) => propValidator(value, ['', 'responsive']),
  }
});
const style = useCssModule();
const baseClass = 'cdr-image';
const ratioClass = 'cdr-image-ratio';
const coverWrapperClass = 'cdr-image-ratio__cover';
const modifierClass = computed(() => props.modifer && `${baseClass}--${props.modifer}`);
const radiusClass = computed(() => props.radius && `${baseClass}--${props.radius}`);
const cropObject = computed(() => ({ objectPosition: props.crop }));
const ratioObject = computed(() => {
  let ratioPct;
  if (props.ratio === 'square') {
    ratioPct = '100%';
  } else if (props.ratio === 'auto') {
    ratioPct = '0';
  } else {
    const [x, y] = props.ratio.split('-');
    ratioPct = `${(y / x) * 100}%`;
  }
  return { '--ratio': ratioPct };
});

const cropClass = computed(() => props.crop && `${coverWrapperClass}--crop`);
const coverClass = computed(() => props.cover && `${coverWrapperClass}--cover`);

</script>

<style lang="scss" module src="./styles/CdrImg.module.scss">
</style>

<template>
  <div
    v-if="ratio"
    :style="ratioObject"
    :class="style[ratioClass]"
  >
    <img
      :style="cropObject"
      :class="mapClasses(style,
                         baseClass,
                         modifierClass,
                         radiusClass,
                         coverWrapperClass,
                         cropClass,
                         coverClass,
      )"
      :src="src"
      :alt="alt"
      v-bind="$attrs"
    >
  </div>
  <img
    v-else
    :class="mapClasses(style,
                       baseClass,
                       modifierClass,
                       radiusClass,
    )"
    :src="src"
    :alt="alt"
    v-bind="$attrs"
  >
</template>
<script>
import { defineComponent, useCssModule, computed } from 'vue';

import mapClasses from '../../utils/mapClasses';
import propValidator from '../../utils/propValidator';

export default defineComponent({
  name: 'CdrImg',
  inheritAttrs: false,
  props: {
    /**
     * Required. Image source url.
     */
    src: {
      type: String,
      required: true,
    },
    /**
     * Required. Image alt text.
     */
    alt: {
      type: String,
      default: '',
    },
    /**
     * Aspect ratio of the media container. {auto, square, 1-2, 2-3, 3-4, 9-16, 2-1, 3-2, 4-3, 16-9}
     */
    ratio: {
      type: String,
      validator: (value) => ([
        'auto',
        'square',
        '1-2',
        '2-3',
        '3-4',
        '9-16',
        '2-1',
        '3-2',
        '4-3',
        '16-9'].indexOf(value) >= 0) || false,
    },
    /**
     * Requires a `ratio`. Area to crop the image overflow to. {left, center, right} {top, center, bottom}
     */
    crop: {
      type: String,
    },
    /**
     * Requires a `ratio`. Scale the image to be as large as possible to fill the area (background-position: cover;)
     */
    cover: {
      type: Boolean,
    },
    /**
     * Sets a border radius to an element {square, top, right, bottom, left}
     */
    radius: {
      type: String,
      validator: (value) => ([
        'circle',
        'rounded'].indexOf(value) >= 0) || false,
    },

    modifier: {
      type: String,
      default: '',
      validator: (value) => propValidator(value, ['', 'responsive']),
    },
  },

  setup(props) {
    const baseClass = 'cdr-image';
    const ratioClass = 'cdr-image-ratio';
    const coverWrapperClass = 'cdr-image-ratio__cover';
    const modifierClass = computed(() => props.modifer && `${baseClass}--${props.modifer}`);
    const radiusClass = computed(() => props.radius && `${baseClass}--${props.radius}`);

    const cropObject = computed(() => ({ objectPosition: props.crop }));
    const ratioObject = computed(() => {
      let ratioPct;
      if (props.ratio === 'square') {
        ratioPct = '100%';
      } else if (props.ratio === 'auto') {
        ratioPct = '0';
      } else {
        const [x, y] = props.ratio.split('-');
        ratioPct = `${(y / x) * 100}%`;
      }
      return { '--ratio': ratioPct };
    });

    const cropClass = computed(() => props.crop && `${coverWrapperClass}--crop`);
    const coverClass = computed(() => props.cover && `${coverWrapperClass}--cover`);

    return {
      style: useCssModule(),
      baseClass,
      ratioClass,
      coverWrapperClass,
      modifierClass,
      radiusClass,
      cropObject,
      ratioObject,
      cropClass,
      coverClass,
      mapClasses,
    };
  },
});
</script>

<style lang="scss" module src="./styles/CdrImg.module.scss">
</style>