move alert messages to a separate DOM element

<template>
    <v-form class="ct-flex-container ct-flex-container--column fullHeight">

            <v-container
                grid-list-md
                fluid
                class="pa-1"
            >
                <v-layout
                    row
                    wrap
                    justify-space-between
                >
                    <v-flex
                        v-if="editable && title"
                        xs12
                        md12
                    >

{{ title }}

                    </v-flex>
                    <v-flex
                        xs12
                        md12
                    >

{{ i18n.selectStore }}

                        <v-select
                            v-if="showQuerySettings && storeData.length > 1"
                            ref="selectedStoreIdSelect"
                            v-model="selectedStoreId"
                            :items="storeData"
                            :disabled="editable"
                            :loading="loading"
                            :aria-label="i18n.aria.selectLayer"
                            item-value="id"
                            class="pa-0"
                            single-line
                            hide-details
                            @change="$emit('storeChanged', $event)"
                        >
                        </v-select>

                            {{ storeData[0].text }}

                    </v-flex>
                    <v-flex
                        v-if="showQuerySettings"
                        xs12
                        md12
                    >
                        <fieldset>
                            <legend class="caption">{{ i18n.spatialRelation }}</legend>
                            <template v-if="showSpatialInputActions">
                                <v-container class="pa-0 mt-1">
                                    <v-checkbox
                                        v-model="negateSpatialInput"
                                        class="pa-0 mt-2 mb-2"
                                        hide-details
                                        color="primary"
                                        :label="i18n.negateSpatialInput"
                                    ></v-checkbox>
                                    <v-btn-toggle v-model="activeSpatialInputAction">
                                        <v-btn
                                            v-for="spatialInputAction in spatialInputActions"
                                            :key="spatialInputAction.id"
                                            :value="spatialInputAction.id"
                                        >
                                            <v-icon>{{ spatialInputAction.iconClass }}</v-icon>
                                            {{ spatialInputAction.title }}
                                        </v-btn>
                                    </v-btn-toggle>

                                        {{ activeSpatialInputActionDescription }}

                                </v-container>
                            </template>
                            <template v-else>
                                <v-radio-group
                                    v-model="spatialRelation"
                                    class="pa-0 mt-1"
                                    row
                                    hide-details
                                >
                                    <v-radio
                                        :label="i18n.everywhere"
                                        :disabled="disableSpatialRelationRadio"
                                        hide-details
                                        value="everywhere"
                                        color="primary"
                                    />
                                    <v-radio
                                        :label="i18n.currentExtent"
                                        :disabled="disableSpatialRelationRadio"
                                        hide-details
                                        value="current_extent"
                                        color="primary"
                                    />
                                </v-radio-group>
                            </template>
                        </fieldset>
                    </v-flex>
                    <v-flex
                        v-if="showSpatialInputActions"
                        xs12
                        md12
                    >
                        <v-btn
                            small
                            block
                            class="ma-0"
                            @click="$emit('resetSpatialInput')"
                        >
                            <v-icon left>
                                delete
                            </v-icon>
                            {{ i18n.resetSpatialInput }}
                        </v-btn>
                    </v-flex>

                    <v-flex
                        v-if="showQuerySettings && showSortSelectInUserMode"
                        xs12
                        md12
                    >

{{ i18n.sortOptions }}

                        <v-layout
                            row
                            align-center>
                            <v-flex grow>
                                <v-select
                                    ref="selectedSortFieldNameSelect"
                                    v-model="selectedSortFieldName"
                                    :items="sortFieldData"
                                    :disabled="editable"
                                    :aria-label="i18n.aria.sortingField"
                                    item-value="id"
                                    class="pa-0"
                                    single-line
                                    hide-details
                                />
                            </v-flex>
                            <v-flex shrink>
                                <v-btn
                                    flat
                                    small
                                    class="ma-0"
                                    color="primary"
                                    @click="sortDescending=!sortDescending"
                                >
                                    <v-icon
                                        v-if="sortDescending"
                                        left
                                    >
                                        arrow_downward
                                    </v-icon>
                                    <v-icon
                                        v-else
                                        left
                                    >
                                        arrow_upward
                                    </v-icon>
                                    {{ i18n.sorting }}
                                </v-btn>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                    <v-flex
                        xs12
                        md12
                    >
                        <v-layout
                            row
                            align-center>
                            <v-flex
                                class="pr-5 subheading"
                                shrink>
                                {{ i18n.searchParameter }}
                            </v-flex>
                            <fieldset>
                                <legend style="float:left"
                                        v-if="showQuerySettings"
                                        class="flex caption shrink pt-2">
                                    {{ i18n.linkOperator }}
                                </legend>
                                <v-flex style="float:left"
                                        v-if="showQuerySettings"
                                        shrink>

                                    <v-radio-group
                                        v-model="linkOperator"
                                        class="pa-0 ma-0"
                                        :disabled="fieldQueries.length < 2"
                                        row
                                        hide-details
                                    >
                                        <v-radio
                                            :label="i18n.and"
                                            :disabled="disableLinkOperatorRadio"
                                            hide-details
                                            value="$and"
                                            color="primary"
                                        />
                                        <v-radio
                                            :label="i18n.or"
                                            :disabled="disableLinkOperatorRadio"
                                            hide-details
                                            value="$or"
                                            color="primary"
                                        />
                                    </v-radio-group>
                                </v-flex>
                            </fieldset>
                        </v-layout>
                        <v-divider class="mt-1"></v-divider>
                    </v-flex>
                </v-layout>
            </v-container>

            <v-container
                align-center
                justify-center
                :fill-height="processing"
                grid-list-md
                fluid
                class="pa-1"
            >
                <v-progress-circular
                    v-if="processing"
                    :size="100"
                    color="primary"
                    indeterminate
                ></v-progress-circular>
                <field-widget
                    v-for="(fieldQuery, index) in fieldQueries"
                    v-else
                    :key="index"
                    :locale="locale"
                    :field-query="fieldQuery"
                    :index="index"
                    :allow-negation="allowNegation"
                    :active-tool="activeTool"
                    :enable-distinct-values="enableDistinctValues"
                    :i18n="i18n"
                    @add-event="handleLinkOperatorsAriaLabel"
                    @remove-event="handleLinkOperatorsAriaLabel"
                />
            </v-container>

            <v-container
                grid-list-md
                fluid
                class="pa-1"
            >
                <v-layout
                    row
                    wrap
                    justify-center
                >
                    <v-flex md12>
                        <v-btn
                            v-if="!processing"
                            block
                            ripple
                            color="primary"
                            @click="emitSearch"
                        >
                            <v-icon left>
                                search
                            </v-icon>
                            {{ i18n.search }}
                        </v-btn>
                        <v-btn
                            v-else
                            block
                            ripple
                            color="primary"
                            @click="$emit('cancel-search', {})"
                        >
                            <v-icon left>
                                cancel
                            </v-icon>
                            {{ i18n.cancelSearch }}
                        </v-btn>
                    </v-flex>
                </v-layout>
            </v-container>

    </v-form>
</template>

<template>
    <v-form class="ct-flex-container ct-flex-container--column fullHeight">

            <v-container
                grid-list-md
                fluid
                class="pa-1"
            >
                <v-layout
                    row
                    wrap
                    justify-space-between
                >
                    <v-flex
                        v-if="editable && title"
                        xs12
                        md12
                    >

{{ title }}

                    </v-flex>
                    <v-flex
                        xs12
                        md12
                    >

{{ i18n.selectStore }}

                        <v-select
                            v-if="showQuerySettings && storeData.length > 1"
                            ref="selectedStoreIdSelect"
                            v-model="selectedStoreId"
                            :items="storeData"
                            :disabled="editable"
                            :loading="loading"
                            :aria-label="i18n.aria.selectLayer"
                            item-value="id"
                            class="pa-0"
                            single-line
                            hide-details
                            @change="$emit('storeChanged', $event)"
                        >
                        </v-select>

                            {{ storeData[0].text }}

                    </v-flex>
                    <v-flex
                        v-if="showQuerySettings"
                        xs12
                        md12
                    >
                        <fieldset>
                            <legend class="caption">{{ i18n.spatialRelation }}</legend>
                            <template v-if="showSpatialInputActions">
                                <v-container class="pa-0 mt-1">
                                    <v-checkbox
                                        v-model="negateSpatialInput"
                                        class="pa-0 mt-2 mb-2"
                                        hide-details
                                        color="primary"
                                        :label="i18n.negateSpatialInput"
                                    ></v-checkbox>
                                    <v-btn-toggle v-model="activeSpatialInputAction">
                                        <v-btn
                                            v-for="spatialInputAction in spatialInputActions"
                                            :key="spatialInputAction.id"
                                            :value="spatialInputAction.id"
                                        >
                                            <v-icon>{{ spatialInputAction.iconClass }}</v-icon>
                                            {{ spatialInputAction.title }}
                                        </v-btn>
                                    </v-btn-toggle>

                                        {{ activeSpatialInputActionDescription }}

                                </v-container>
                            </template>
                            <template v-else>
                                <v-radio-group
                                    v-model="spatialRelation"
                                    class="pa-0 mt-1"
                                    row
                                    hide-details
                                >
                                    <v-radio
                                        :label="i18n.everywhere"
                                        :disabled="disableSpatialRelationRadio"
                                        hide-details
                                        value="everywhere"
                                        color="primary"
                                    />
                                    <v-radio
                                        :label="i18n.currentExtent"
                                        :disabled="disableSpatialRelationRadio"
                                        hide-details
                                        value="current_extent"
                                        color="primary"
                                    />
                                </v-radio-group>
                            </template>
                        </fieldset>
                    </v-flex>
                    <v-flex
                        v-if="showSpatialInputActions"
                        xs12
                        md12
                    >
                        <v-btn
                            small
                            block
                            class="ma-0"
                            @click="$emit('resetSpatialInput')"
                        >
                            <v-icon left>
                                delete
                            </v-icon>
                            {{ i18n.resetSpatialInput }}
                        </v-btn>
                    </v-flex>

                    <v-flex
                        v-if="showQuerySettings && showSortSelectInUserMode"
                        xs12
                        md12
                    >

{{ i18n.sortOptions }}

                        <v-layout
                            row
                            align-center>
                            <v-flex grow>
                                <v-select
                                    ref="selectedSortFieldNameSelect"
                                    v-model="selectedSortFieldName"
                                    :items="sortFieldData"
                                    :disabled="editable"
                                    :aria-label="i18n.aria.sortingField"
                                    item-value="id"
                                    class="pa-0"
                                    single-line
                                    hide-details
                                />
                            </v-flex>
                            <v-flex shrink>
                                <v-btn
                                    flat
                                    small
                                    class="ma-0"
                                    color="primary"
                                    @click="sortDescending=!sortDescending"
                                >
                                    <v-icon
                                        v-if="sortDescending"
                                        left
                                    >
                                        arrow_downward
                                    </v-icon>
                                    <v-icon
                                        v-else
                                        left
                                    >
                                        arrow_upward
                                    </v-icon>
                                    {{ i18n.sorting }}
                                </v-btn>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                    <v-flex
                        xs12
                        md12
                    >
                        <v-layout
                            row
                            align-center>
                            <v-flex
                                class="pr-5 subheading"
                                shrink>
                                {{ i18n.searchParameter }}
                            </v-flex>
                            <fieldset>
                                <legend style="float:left"
                                        v-if="showQuerySettings"
                                        class="flex caption shrink pt-2">
                                    {{ i18n.linkOperator }}
                                </legend>
                                <v-flex style="float:left"
                                        v-if="showQuerySettings"
                                        shrink>

                                    <v-radio-group
                                        v-model="linkOperator"
                                        class="pa-0 ma-0"
                                        :disabled="fieldQueries.length < 2"
                                        row
                                        hide-details
                                        id="linkOperatorsRadioGroup"
                                    >
                                        <v-radio
                                            :label="i18n.and"
                                            :disabled="disableLinkOperatorRadio"
                                            hide-details
                                            value="$and"
                                            color="primary"
                                        />
                                        <v-radio
                                            :label="i18n.or"
                                            :disabled="disableLinkOperatorRadio"
                                            hide-details
                                            value="$or"
                                            color="primary"
                                        />
                                    </v-radio-group>
                                </v-flex>
                            </fieldset>
                        </v-layout>
                        <v-divider class="mt-1"></v-divider>
                    </v-flex>
                </v-layout>
            </v-container>

            <v-container
                align-center
                justify-center
                :fill-height="processing"
                grid-list-md
                fluid
                class="pa-1"
            >
                <v-progress-circular
                    v-if="processing"
                    :size="100"
                    color="primary"
                    indeterminate
                ></v-progress-circular>
                <field-widget
                    v-for="(fieldQuery, index) in fieldQueries"
                    v-else
                    :key="index"
                    :locale="locale"
                    :field-query="fieldQuery"
                    :index="index"
                    :allow-negation="allowNegation"
                    :active-tool="activeTool"
                    :enable-distinct-values="enableDistinctValues"
                    :i18n="i18n"
                    @add-event="handleLinkOperatorsAriaLabel"
                    @remove-event="handleLinkOperatorsAriaLabel"
                />
            </v-container>

            <v-container
                grid-list-md
                fluid
                class="pa-1"
            >
                <v-layout
                    row
                    wrap
                    justify-center
                >
                    <v-flex md12>
                        <v-btn
                            v-if="!processing"
                            block
                            ripple
                            color="primary"
                            @click="emitSearch"
                        >
                            <v-icon left>
                                search
                            </v-icon>
                            {{ i18n.search }}
                        </v-btn>
                        <v-btn
                            v-else
                            block
                            ripple
                            color="primary"
                            @click="$emit('cancel-search', {})"
                        >
                            <v-icon left>
                                cancel
                            </v-icon>
                            {{ i18n.cancelSearch }}
                        </v-btn>
                    </v-flex>
                </v-layout>
            </v-container>

    </v-form>
</template>


comment erroring eventbus behaviour for now

<template>

            <user-avatar :user="actor" size="small"></user-avatar>

            <comment-form :event-window="eventWindow"></comment-form>

          <button v-t="'comment_form.sign_in'" @click="signIn()" v-if="!isLoggedIn()" class="md-primary md-raised add-comment-panel__sign-in-btn"></button>

</template>


Simplify logic:

Simplify logic:

<template>

  <core-modal
    :title="$tr('addNewAccountTitle')"
    @cancel="close"
    width="400px"
  >
    <ui-alert type="error" v-if="errorMessage" @dismiss="errorMessage = ''">{{ errorMessage }}</ui-alert>

    <form @submit.prevent="createNewUser">

        <core-textbox
          :label="$tr('name')"
          :autofocus="true"
          :required="true"
          :maxlength="120"
          :enforceMaxlength="true"
          type="text"
          class="user-field"
          v-model.trim="fullName"/>
        <core-textbox
          :label="$tr('username')"
          :required="true"
          :maxlength="30"
          :enforceMaxlength="true"
          :invalid="usernameInvalid"
          :error="usernameInvalidMsg"
          type="text"
          class="user-field"
          v-model="username"/>
        <core-textbox
          :label="$tr('password')"
          :required="true"
          type="password"
          class="user-field"
          v-model="password"/>
        <core-textbox
          :label="$tr('confirmPassword')"
          :required="true"
          :invalid="passwordConfirmInvalid"
          :error="$tr('pwMismatchError')"
          type="password"
          class="user-field"
          v-model="passwordConfirm"/>

          {{$tr('userKind')}}
          <select v-model="kind" id="user-kind">
            <option :value="LEARNER"> {{$tr('learner')}} </option>
            <option :value="COACH"> {{$tr('coach')}} </option>
            <option :value="ADMIN"> {{$tr('admin')}} </option>
          </select>

        <icon-button class="create-btn" :text="$tr('createAccount')" :primary="true" :loading="loading"/>

    </form>
  </core-modal>

</template>


Update way of disabling links.

Update way of disabling links.

<template>

  <component-style-guide
      class="button-style-guide"
      :codeExamplesTemplate="codeExamplesTemplate"
      :api="api"
      :requirePath="requirePath"
    >

Buttons

      Buttons initialize actions and communicate what will happen upon clicking
      them.

Scope

        This is meant to cover 90% of buttons. There will always be edge cases,
        and common sense always trumps rote rules. Maintain consistency as much as
        possible, but don’t make significant sacrifices in the UX for the sake of
        consistency.

Types of buttons

        There are 3 main types of buttons, each to map to a different level of
        visual hierarchy.

Raised buttons for more prominent actions.

Flat buttons for less prominent or actions that repeat in a list.

Hyperlink text for very deemphasized actions or in paragraphs.

Dropdown buttons

        In areas where multiple actions are necessary, raised or flat buttons can
        be made into dropdown buttons, which have multiple actions nested
        underneath them in a menu.

        The label on a dropdown button is not an action itself, but rather should
        label the group of actions that are nested under the button.

        If a single action is more important or prominent than the others, it can
        be brought out as its own individual button, next to the menu with more
        actions.

Language

        Buttons should aim to have a single word in them, with two at most.

        The buttons language should avoid any ambiguity, be specific to the action
        you are completing. For example, use ‘Save’ instead of ‘OK’.

        Never use commas or other punctuation in buttons.

Color usage

        Primary/affirmative actions should be purple.

        Secondary/cancel actions should be grey.

        Tertiary links should always use purple.

Button placement

        Buttons should be right aligned in modals.

        Global actions on tables should be put above the table and right aligned.

        Deviates from these patterns are fine with common sense.

Iconography

        Aside from the dropdown icon, there is no iconography in buttons.

Responsive

        Buttons should be determined by the size of the text in them, with a min
        width. They should not generally transform based on the size of the page.

        Buttons should elide if you really really really have but pls don’t thx.

        Details for devs (to be deleted after button component is implemented)

Spacing

          Height: 36

          Min width is 64

          Button length corresponds to text length + 16px padding on each side

          8px padding between buttons

Typography

14 pt

Caps

bold

Language

Buttons should be specific to action

Ideally 1 word, no more than 2 words

Color usage

Use fushia for primary actions #996189

Grey for secondary action or cancel #EEEEEE

Iconography

No iconography aside from dropdown carrot

Placement on page

Right aligned on modals

Top right for major creation actions

  </component-style-guide>

</template>


Good old dangling comma

Good old dangling comma

<template>

      The source could not be displayed because it is too large. You can download it instead.

      The source could not be displayed because a rendering error occurred. You can download it instead.

</template>


watch for background img

watch for background img

<template lang="html">

      {{ title }}

</template>


docs: remove width param in dropdowncustom

<template>

DropdownCustom 自定义下拉控件

DropdownCustom可以添加自定义的className定义各种不同的模式的下拉控件，className将应用在.h-dropdowncustom-show上，该dom为触发下拉的元素，包含自定义的内容以及右侧展示状态的icon。

提示：系统自带一个h-text-dropdown的样式。

由于该样式应用在组件中，所以在调用的vue文件中，style的scope属性将无效。

基本调用

    <example demo="plugins/dropdowncustom1"></example>

不同的触发方式

    <example demo="plugins/dropdowncustom2"></example>

是否显示切换的icon

    <example demo="plugins/dropdowncustom3"></example>

下拉显示的位置

placement: top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end

    <example demo="plugins/dropdowncustom4"></example>

自定义下拉的位置

分别控制left, top的位移

    <example demo="plugins/dropdowncustom6"></example>

自定义下拉的控制

    <example demo="plugins/dropdowncustom5"></example>

DropdownCustom 参数

        参数
        说明
        类型
        可选值
        默认值

        trigger
        触发方式
        String
        click, hover, focus
        click

        equalWidth
        是否和触发的dom等宽
        Boolean
        -
        false

        disabled
        是否禁用
        Boolean
        -
        false

        toggleIcon
        是否显示展示状态的icon
        Boolean
        -
        true

        placement
        menu显示的位置
        Stirng

          top, top-start, top-end,

          bottom, bottom-start, bottom-end,

          left, left-start, left-end,

          right, right-start, right-end

        bottom-start

        className
        为点击触发的dom添加class
        String
        -
        -

        offset
        位移
        String, Number
        -

left, top

10

'10%'

'10, 10'

'10%, 10'

'10 + 10%'

'10 - 5vh + 3%'

'-10px + 5vh, 5px - 6%'

DropdownCustom 方法

        参数
        说明

        show
        显示dropdown

        udpate
        更新dropdown的位置

        hide
        关闭dropdown

</template>

<template>

DropdownCustom 自定义下拉控件

DropdownCustom可以添加自定义的className定义各种不同的模式的下拉控件，className将应用在.h-dropdowncustom-show上，该dom为触发下拉的元素，包含自定义的内容以及右侧展示状态的icon。

提示：系统自带一个h-text-dropdown的样式。

由于该样式应用在组件中，所以在调用的vue文件中，style的scope属性将无效。

基本调用

    <example demo="plugins/dropdowncustom1"></example>

不同的触发方式

    <example demo="plugins/dropdowncustom2"></example>

是否显示切换的icon

    <example demo="plugins/dropdowncustom3"></example>

下拉显示的位置

placement: top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end

    <example demo="plugins/dropdowncustom4"></example>

自定义下拉的位置

分别控制left, top的位移

    <example demo="plugins/dropdowncustom6"></example>

自定义下拉的控制

    <example demo="plugins/dropdowncustom5"></example>

DropdownCustom 参数

        参数
        说明
        类型
        可选值
        默认值

        trigger
        触发方式
        String
        click, hover, focus
        click

        equalWidth
        是否和触发的dom等宽
        Boolean
        -
        false

        disabled
        是否禁用
        Boolean
        -
        false

        toggleIcon
        是否显示展示状态的icon
        Boolean
        -
        true

        width
        自定义menu的宽度
        Number
        -
        -

        placement
        menu显示的位置
        Stirng

          top, top-start, top-end,

          bottom, bottom-start, bottom-end,

          left, left-start, left-end,

          right, right-start, right-end

        bottom-start

        className
        为点击触发的dom添加class
        String
        -
        -

        offset
        位移
        String, Number
        -

left, top

10

'10%'

'10, 10'

'10%, 10'

'10 + 10%'

'10 - 5vh + 3%'

'-10px + 5vh, 5px - 6%'

DropdownCustom 方法

        参数
        说明

        show
        显示dropdown

        udpate
        更新dropdown的位置

        hide
        关闭dropdown

</template>


Improve Upload simple example (#2763)

Improve Upload simple example (#2763)

<template>

                Click to upload

                {{ file.name }}

</template>


fixed base-input-select firing 2 update events on each selection

<template>

    {{label}}
      <slot name="description">
        {{description}}
      </slot>

    <select
      v-show="editable"
      ref="inputRef"
      :id="id"
      :name="name"
      :value="localValue"
      :disabled="disabled"
      :class="classObject"
      @change="updateValue"
      @blur="onBlur"
      @focus="$emit('focus')"
    >
      <option v-show="defaultText" disabled :value="defaultValue">{{defaultText}}</option>
      <option v-for="option in options" :key="option[optionValueKey]" :value="option[optionValueKey]">{{option[optionTextKey]}}</option>
    </select>

    {{ inlineText }}  Edit
    <button v-if="inline && editable" @mousedown="onSave" class="button">OK</button>

    <slot name="error-msg">
      {{ errorMessage }}
    </slot>

    <slot name="actions"></slot>

</template>

<template>

    {{label}}
      <slot name="description">
        {{description}}
      </slot>

    <select
      v-show="editable"
      ref="inputRef"
      :id="id"
      :name="name"
      :value="localValue"
      :disabled="disabled"
      :class="classObject"
      @input="updateValue"
      @change="updateValue"
      @blur="onBlur"
      @focus="$emit('focus')"
    >
      <option v-show="defaultText" disabled :value="defaultValue">{{defaultText}}</option>
      <option v-for="option in options" :key="option[optionValueKey]" :value="option[optionValueKey]">{{option[optionTextKey]}}</option>
    </select>

    {{ inlineText }}  Edit
    <button v-if="inline && editable" @mousedown="onSave" class="button">OK</button>

    <slot name="error-msg">
      {{ errorMessage }}
    </slot>

    <slot name="actions"></slot>

</template>


relative date for feed dates

relative date for feed dates

<template>

    <form class="pk-panel-teaser uk-form uk-form-stacked" v-if="editing">

{{ 'Feed Widget' | trans }}

            {{ 'Title' | trans }}

                <input id="form-feed-title" class="uk-width-1-1" type="text" name="widget[title]" v-model="widget.title">

            {{ 'URL' | trans }}

                <input id="form-feed-url" class="uk-width-1-1" type="text" name="url" v-model="widget.url" lazy>

            {{ 'Number of Posts' | trans }}

                <select id="form-feed-count" class="uk-width-1-1" v-model="widget.count" number>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>

            {{ 'Post Content' | trans }}

                    <input type="radio" value="" v-model="widget.content"> {{ "Don't show" | trans }}

                    <input type="radio" value="1" v-model="widget.content"> {{ 'Show on all posts' | trans }}

                    <input type="radio" value="2" v-model="widget.content"> {{ 'Only show on first post.' | trans }}

    </form>

{{ widget.title }}

{{ 'Unable to retrieve feed data.' | trans }}

{{ 'No URL given.' | trans }}

                {{ entry.title }} {{ entry.publishedDate | relativeDate }}

{{ entry.contentSnippet }}

{{ $index == 0 ? entry.contentSnippet : '' }}

</template>

<template>

    <form class="pk-panel-teaser uk-form uk-form-stacked" v-if="editing">

{{ 'Feed Widget' | trans }}

            {{ 'Title' | trans }}

                <input id="form-feed-title" class="uk-width-1-1" type="text" name="widget[title]" v-model="widget.title">

            {{ 'URL' | trans }}

                <input id="form-feed-url" class="uk-width-1-1" type="text" name="url" v-model="widget.url" lazy>

            {{ 'Number of Posts' | trans }}

                <select id="form-feed-count" class="uk-width-1-1" v-model="widget.count" number>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>

            {{ 'Post Content' | trans }}

                    <input type="radio" value="" v-model="widget.content"> {{ "Don't show" | trans }}

                    <input type="radio" value="1" v-model="widget.content"> {{ 'Show on all posts' | trans }}

                    <input type="radio" value="2" v-model="widget.content"> {{ 'Only show on first post.' | trans }}

    </form>

{{ widget.title }}

{{ 'Unable to retrieve feed data.' | trans }}

{{ 'No URL given.' | trans }}

                {{ entry.title }} {{ entry.publishedDate }}

{{ entry.contentSnippet }}

{{ $index == 0 ? entry.contentSnippet : '' }}

</template>


Add preloader progress bar

Add preloader progress bar

<template>

    <vue-headful :title="title" />

    <v-breadcrumbs :items="breadcrumbs">
      <v-icon slot="divider">chevron_right</v-icon>
    </v-breadcrumbs>

    <v-progress-linear :indeterminate="true" v-if="!loaded"></v-progress-linear>

    <v-pagination v-model="current_page" :length="total_pages" v-if="loaded"></v-pagination>

    <v-card v-if="loaded">
      <v-container fluid grid-list-lg>
        <v-layout row wrap>
          <v-flex xs12 v-for="character in characters" :key="character.id">
            <v-card dark>
              <v-layout>
                <v-flex xs5>
                  <v-img :src="character.icon" height="128px" contain></v-img>
                </v-flex>
                <v-flex xs7>
                  <v-card-title primary-title>

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

                  </v-card-title>
                </v-flex>
              </v-layout>
              <v-divider light></v-divider>
              <v-card-actions>
                <v-btn color="info">LPStore</v-btn>
                <v-spacer></v-spacer>
                <v-btn color="info">
                  <router-link :to="{ name: 'character', params: { id: character.id }}">
                    Info
                  </router-link>
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-flex>

        </v-layout>
      </v-container>
    </v-card>

    <v-pagination v-model="current_page" :length="total_pages" v-if="loaded"></v-pagination>

</template>

<template>

    <vue-headful :title="title" />

    <v-breadcrumbs :items="breadcrumbs">
      <v-icon slot="divider">chevron_right</v-icon>
    </v-breadcrumbs>

    <v-pagination v-model="current_page" :length="total_pages"></v-pagination>

    <v-card>
      <v-container fluid grid-list-lg>
        <v-layout row wrap>
          <v-flex xs12 v-for="character in characters" :key="character.id">
            <v-card dark>
              <v-layout>
                <v-flex xs5>
                  <v-img :src="character.icon" height="128px" contain></v-img>
                </v-flex>
                <v-flex xs7>
                  <v-card-title primary-title>

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

                  </v-card-title>
                </v-flex>
              </v-layout>
              <v-divider light></v-divider>
              <v-card-actions>
                <v-btn color="info">LPStore</v-btn>
                <v-spacer></v-spacer>
                <v-btn color="info">
                  <router-link :to="{ name: 'character', params: { id: character.id }}">
                    Info
                  </router-link>
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-flex>

        </v-layout>
      </v-container>
    </v-card>

    <v-pagination v-model="current_page" :length="total_pages"></v-pagination>

</template>


Update UI

Update UI

<template>

    <vue-headful :title="title" />

    <v-breadcrumbs :items="breadcrumbs">
      <v-icon slot="divider">chevron_right</v-icon>
    </v-breadcrumbs>

    <v-progress-linear :indeterminate="true" v-if="!loaded"></v-progress-linear>

    <v-pagination v-model="current_page" :length="total_pages" v-if="loaded"></v-pagination>

    <v-card v-if="loaded">
      <v-container fluid grid-list-lg>
        <v-layout row wrap>
          <v-flex xs12 v-for="character in characters" :key="character.id">
            <v-card dark>
              <v-layout>
                <v-flex xs5>
                  <v-img :src="character.icon" height="128px" contain></v-img>
                </v-flex>
                <v-flex xs7>
                  <v-card-title primary-title>

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

                  </v-card-title>
                </v-flex>
              </v-layout>
              <v-divider light></v-divider>
              <v-card-actions>
                <v-btn color="error" @click="removeCharacter(character.id)">
                  Remove
                </v-btn>
                <v-spacer></v-spacer>
                <v-btn color="info">LPStore</v-btn>
                <v-spacer></v-spacer>
                <v-btn color="info">
                  <router-link :to="{ name: 'character', params: { id: character.id }}">
                    Info
                  </router-link>
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-flex>

        </v-layout>
      </v-container>
    </v-card>

    <v-pagination v-model="current_page" :length="total_pages" v-if="loaded"></v-pagination>

</template>


more table styling cleanup

more table styling cleanup

<template>

    <slot name="key"></slot>
    <slot name="value"></slot>

</template>


Fixed path Bulma css-var (#2742)

Fixed path Bulma css-var (#2742)

<template>

                Docs

        <Example :component="ExFormat" :code="ExFormatCode" vertical>

Bulma-Css-Vars is not included in Buefy, you have to install it.

Also make sure you use Bulma v0.8 or higher and sass instead of node-sass:

                <CodeView :code="npmInstallSnippet | pre" expanded/>

This creates an initial config file bulma-css-vars.config.js, where you can declare the variables you want to modify. Each additional variable will increase the size of your css.

Finally, you have to reference the main.scss file in your compilation, preferably in your entry Vue component:

                <CodeView :code="vueCompSnippet" expanded/>

You have to run bulma-css-vars every time you change the config. Add this script to your package.json to simplify this:

                <CodeView :code="scriptSnippet" expanded/>

Read more in the bulma-css-vars documentation.

        </Example>

</template>


removed unused branch

removed unused branch

<template>
    <uw-card :loaded="isReady">
        <template #card-heading>

Notices

        </template>
        <template #card-body>

                You do not have any notices at this time.

                                Critical:

                                New

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


tooltips

tooltips

<template>

 0" :title="titleText">
    <ui-tooltip trigger="icon" position="bottom center" v-if="!isTopic">
      {{ $tr('coachResourceLabel') }}
    </ui-tooltip>
    <ui-icon
      class="coach-mat-icon"
      ref="icon"
      icon="local_library"
    />

      {{ value }}

</template>

<template>

 0">
    <ui-tooltip trigger="icon" position="top center">
      {{ $tr('coachLabel') }}
    </ui-tooltip>
    <ui-icon
      class="coach-mat-icon"
      ref="icon"
      icon="local_library"
    />

      {{ value }}

</template>


Remove unneeded text

Remove unneeded text

<template>
  <section class="BackgroundPolling" ref="injectionHTMLElement">
  </section>
</template>

<script>
import BackgroundPollingView from 'dashboard/views/dashboard/background-polling/background-polling-view';

export default {
  name: 'BackgroundPollingView',
  props: {
    routeType: {
      type: String,
      default: 'maps'
    }
  },
  mounted () {
    this.backgroundPollingView = this.renderView();
  },
  beforeDestroy () {
    this.backgroundPollingView.clean();
  },
  watch: {
    routeType () {
      this.backgroundPollingView.clean();
      this.backgroundPollingView = this.renderView();
    }
  },
  methods: {
    getBackgroundPollingView () {
      return this.backgroundPollingView;
    },
    renderView () {
      const backgroundPollingModel = this.$cartoModels.backgroundPolling;
      const configModel = this.$cartoModels.config;
      const userModel = this.$cartoModels.user;

      const backgroundPollingView = new BackgroundPollingView({
        model: backgroundPollingModel,
        createVis: this.$props.routeType === 'maps',
        userModel,
        configModel,
        el: this.$refs.injectionHTMLElement
      });

      backgroundPollingView.render();
      backgroundPollingView.model.on('change', model => {
        if (model.get('state') === 'complete' &&
            this.$props.routeType === 'datasets') {
          this.$store.dispatch('datasets/fetchDatasets');
        }
      });

      return backgroundPollingView;
    }
  }
};
</script>

<template>
  <section class="BackgroundPolling" ref="injectionHTMLElement">
  {{ routeType }}
  </section>
</template>

<script>
import BackgroundPollingView from 'dashboard/views/dashboard/background-polling/background-polling-view';

export default {
  name: 'BackgroundPollingView',
  props: {
    routeType: {
      type: String,
      default: 'maps'
    }
  },
  mounted () {
    this.backgroundPollingView = this.renderView();
  },
  beforeDestroy () {
    this.backgroundPollingView.clean();
  },
  watch: {
    routeType () {
      this.backgroundPollingView.clean();
      this.backgroundPollingView = this.renderView();
    }
  },
  methods: {
    getBackgroundPollingView () {
      return this.backgroundPollingView;
    },
    renderView () {
      const backgroundPollingModel = this.$cartoModels.backgroundPolling;
      const configModel = this.$cartoModels.config;
      const userModel = this.$cartoModels.user;

      const backgroundPollingView = new BackgroundPollingView({
        model: backgroundPollingModel,
        createVis: this.$props.routeType === 'maps',
        userModel,
        configModel,
        el: this.$refs.injectionHTMLElement
      });

      backgroundPollingView.render();
      backgroundPollingView.model.on('change', model => {
        if (model.get('state') === 'complete' &&
            this.$props.routeType === 'datasets') {
          this.$store.dispatch('datasets/fetchDatasets');
        }
      });

      return backgroundPollingView;
    }
  }
};
</script>


Most issues with fullscreen are now resolved

<template>
    <fullscreen ref="fullScreenContainer" @change="fullScreenChange">
        <v-card style="overflow: hidden;">
            <v-tabs :color="isFullScreen ? 'accent' : 'primary'" :slider-color="isFullScreen ? 'white' : 'accent'" dark :fixed-tabs="isFullScreen" v-model="tab">

                <v-tab>
                    Sunburst
                </v-tab>
                <v-tab>
                    Treemap
                </v-tab>
                <v-tab>
                    Treeview
                </v-tab>
                <v-tab v-if="!isFullScreen">
                    Hierarchical Outline
                </v-tab>
                <v-tab v-if="!isFullScreen" @click="openHeatmapWizard()" v-on:click.stop>
                    Heatmap
                </v-tab>
                <v-spacer>
                </v-spacer>
                <v-menu v-if="!isFullScreen && this.tab < 3" bottom left>
                    <template v-slot:activator="{ on }">
                        <v-btn text class="align-self-center mr-4" v-on="on">
                            More
                            <v-icon right>arrow_drop_down</v-icon>
                        </v-btn>
                    </template>

                    <v-list class="grey lighten-3">
                        <v-list-tile key="enter-full-screen" @click="switchToFullScreen()" >
                            <v-list-tile-title>
                                <v-icon>
                                    mdi-fullscreen
                                </v-icon>
                                Enter full screen
                            </v-list-tile-title>
                        </v-list-tile>
                        <v-list-tile key="save-as-image" @click="saveAsImage()" >
                            <v-list-tile-title>
                                <v-icon>
                                    mdi-download
                                </v-icon>
                                Save as image
                            </v-list-tile-title>
                        </v-list-tile>
                    </v-list>
                </v-menu>

                    <v-btn icon text @click="reset()">
                        <v-icon color="white">
                            mdi-restore
                        </v-icon>
                    </v-btn>
                    <v-btn icon text @click="saveAsImage()">
                        <v-icon color="white">
                            mdi-download
                        </v-icon>
                    </v-btn>
                    <v-btn icon text @click="exitFullScreen()">
                        <v-icon color="white">
                            mdi-fullscreen-exit
                        </v-icon>
                    </v-btn>

            </v-tabs>
            <v-tabs-items v-model="tab">
                <v-tab-item>
                    <v-card flat>
                        <sunburst-visualization ref="sunburst" :full-screen="isFullScreen" class="unipept-sunburst" v-if="$store.getters.activeDataset && $store.getters.activeDataset.progress === 1" :dataset="$store.getters.activeDataset"></sunburst-visualization>

                    </v-card>
                </v-tab-item>
                <v-tab-item>
                    <v-card flat>
                        <treemap-visualization ref="treemap" id="treemap" :full-screen="isFullScreen" v-if="$store.getters.activeDataset && $store.getters.activeDataset.progress === 1" :dataset="$store.getters.activeDataset"></treemap-visualization>

                    </v-card>
                </v-tab-item>
                <v-tab-item>
                    <v-card flat>
                        <treeview-visualization ref="treeview" :full-screen="isFullScreen" v-if="$store.getters.activeDataset && $store.getters.activeDataset.progress === 1" :dataset="$store.getters.activeDataset"></treeview-visualization>

                    </v-card>
                </v-tab-item>
                <v-tab-item>
                    <v-card flat>
                        <v-card-text>
                            <hierarchical-outline-visualization v-if="$store.getters.activeDataset" :dataset="$store.getters.activeDataset"></hierarchical-outline-visualization>

                                {{ waitString }}

                        </v-card-text>
                    </v-card>
                </v-tab-item>
            </v-tabs-items>
            <template v-for="dataset of $store.getters.selectedDatasets">
                <v-dialog v-model="dialogOpen" width="1000px" :key="dataset.id" v-if="dataset && $store.getters.activeDataset && dataset.id === $store.getters.activeDataset.id">

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

Heatmap wizard

                            <heatmap-wizard-single-sample v-if="dataset" :dataset="dataset"></heatmap-wizard-single-sample>

                                    <v-progress-circular indeterminate color="primary"></v-progress-circular>

                </v-dialog>
            </template>
        </v-card>
    </fullscreen>
</template>

<template>
    <fullscreen ref="fullScreenContainer" @change="fullScreenChange">
        <v-card style="overflow: hidden;">
            <v-tabs :color="isFullScreen ? 'accent' : 'primary'" :slider-color="isFullScreen ? 'white' : 'accent'" dark :fixed-tabs="isFullScreen" v-model="tab">

                <v-tab>
                    Sunburst
                </v-tab>
                <v-tab>
                    Treemap
                </v-tab>
                <v-tab>
                    Treeview
                </v-tab>
                <v-tab>
                    Hierarchical Outline
                </v-tab>
                <v-tab v-if="!isFullScreen" @click="openHeatmapWizard()" v-on:click.stop>
                    Heatmap
                </v-tab>
                <v-spacer>
                </v-spacer>
                <v-menu v-if="!isFullScreen" bottom left>
                    <template v-slot:activator="{ on }">
                        <v-btn text class="align-self-center mr-4" v-on="on">
                            More
                            <v-icon right>arrow_drop_down</v-icon>
                        </v-btn>
                    </template>

                    <v-list class="grey lighten-3">
                        <v-list-tile key="enter-full-screen" @click="switchToFullScreen()" >
                            <v-list-tile-title>
                                <v-icon>
                                    mdi-fullscreen
                                </v-icon>
                                Enter full screen
                            </v-list-tile-title>
                        </v-list-tile>
                        <v-list-tile key="save-as-image" @click="saveAsImage()" >
                            <v-list-tile-title>
                                <v-icon>
                                    mdi-download
                                </v-icon>
                                Save as image
                            </v-list-tile-title>
                        </v-list-tile>
                    </v-list>
                </v-menu>
            </v-tabs>
            <v-tabs-items v-model="tab">
                <v-tab-item>
                    <v-card flat>
                        <sunburst-visualization ref="sunburst" :full-screen="isFullScreen" class="unipept-sunburst" v-if="$store.getters.activeDataset && $store.getters.activeDataset.progress === 1" :dataset="$store.getters.activeDataset"></sunburst-visualization>

                    </v-card>
                </v-tab-item>
                <v-tab-item>
                    <v-card flat>
                        <treemap-visualization ref="treemap" id="treemap" :full-screen="isFullScreen" v-if="$store.getters.activeDataset && $store.getters.activeDataset.progress === 1" :dataset="$store.getters.activeDataset"></treemap-visualization>

                    </v-card>
                </v-tab-item>
                <v-tab-item>
                    <v-card flat>
                        <treeview-visualization ref="treeview" :full-screen="isFullScreen" v-if="$store.getters.activeDataset && $store.getters.activeDataset.progress === 1" :dataset="$store.getters.activeDataset"></treeview-visualization>

                    </v-card>
                </v-tab-item>
                <v-tab-item>
                    <v-card flat>
                        <v-card-text>
                            <hierarchical-outline-visualization v-if="$store.getters.activeDataset" :dataset="$store.getters.activeDataset"></hierarchical-outline-visualization>

                                {{ waitString }}

                        </v-card-text>
                    </v-card>
                </v-tab-item>
            </v-tabs-items>
            <template v-for="dataset of $store.getters.selectedDatasets">
                <v-dialog v-model="dialogOpen" width="1000px" :key="dataset.id" v-if="dataset && $store.getters.activeDataset && dataset.id === $store.getters.activeDataset.id">

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

Heatmap wizard

                            <heatmap-wizard-single-sample v-if="dataset" :dataset="dataset"></heatmap-wizard-single-sample>

                                    <v-progress-circular indeterminate color="primary"></v-progress-circular>

                </v-dialog>
            </template>
        </v-card>
    </fullscreen>
</template>


Make links clickable agaijn

Make links clickable agaijn

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


UiAutocomplete: Fix misnamed prop in docs: highlightFirstMatch => highlightOnFirstMatch (#473)

<template>

UiAutocomplete

UiAutocomplete shows a dropdown of autocomplete suggestions below an input as the user types.

UiAutocomplete can show a label above the input as well as help or error below the input, and it supports keyboard navigation.

            Examples View Source

Basic

            <ui-autocomplete
                help="Pick your favourite month of the year"
                label="Favourite Month"
                name="favourite_month"
                placeholder="Enter your favourite month"

                :suggestions="months"

                v-model="autocomplete1"
            ></ui-autocomplete>

Floating label

            <ui-autocomplete
                floating-label
                help="Pick your favourite month of the year"
                label="Favourite Month"
                name="favourite_month"
                placeholder="Enter your favourite month"

                :suggestions="months"

                v-model="autocomplete2"
            ></ui-autocomplete>

With icon

            <ui-autocomplete
                help="Pick your favourite month of the year"
                icon="events"
                label="Favourite Month"
                name="favourite_month"
                placeholder="Enter your favourite month"

                :suggestions="months"

                v-model="autocomplete3"
            ></ui-autocomplete>

Validation: required

            <ui-autocomplete
                error="This field is required"
                help="Pick your favourite month of the year"
                label="Favourite Month"
                name="favourite_month"
                placeholder="Enter your favourite month"

                :invalid="autocomplete4Touched && !autocomplete4.length > 0"
                :suggestions="months"

                @touch="autocomplete4Touched = true"

                v-model="autocomplete4"
            ></ui-autocomplete>

Type: image, minChars: 0

            <ui-autocomplete
                help="Pick your favourite member of the Simpsons family"
                label="Favourite Simpson"
                name="favourite_simpson"
                placeholder="Choose your favourite Simpson"
                type="image"

                :keys="{ label: 'label', value: 'label', image: 'image' }"
                :min-chars="0"
                :suggestions="theSimpsons"

                v-model="autocomplete5"
            ></ui-autocomplete>

Suggestions are updated dynamically when the suggestions array changes.

            <ui-button :disabled="addedGrannies" @click="addGrannies">
                Add Grandma & Grandpa
            </ui-button>

Custom template

The following simply renders the prop passed to the custom template for each suggestion.

            <ui-autocomplete
                help="Pick your favourite month of the year"
                label="Favourite Month"
                name="favourite_month"
                placeholder="Enter your favourite month"

                :suggestions="months"
                v-model="autocomplete6"
            >
                <template slot-scope="props" slot="suggestion">
                    {{ props }}
                </template>
            </ui-autocomplete>

Disabled

            <ui-autocomplete
                disabled
                label="Favourite Colour"
                placeholder="You can't interact with this"

                v-model="autocomplete7"
            ></ui-autocomplete>

API

        <ui-tabs raised>
            <ui-tab title="Props">

                                Name
                                Type
                                Default
                                Description

                                name
                                String

The name attribute of the autocomplete input element.

                                value, v-model
                                String

The model the autocomplete value syncs to.

If you are not using v-model, you should listen for the input event and update value.

                                suggestions
                                Array
                                []

An array of suggestions to show to the user. The array can either be of strings or objects (but not both).

For an array of objects, each object should have label and value properties. The label is shown to the user and the value is written to the model when the user makes a selection.

You can redefine the label and value keys to fit your data using the keys prop.

For an array of strings, each string is used as both the label and the value.

                                limit
                                Number
                                8
                                The maximum number of suggestions to show to the user at any one time.

                                append
                                Boolean
                                false

Whether or not the value of the selected suggestion should be appended to the current value (instead of replacing the current value).

Set to true to append selected suggestions.

                                appendDelimiter
                                String
                                ", "
                                The delimiter (separator) to use when appending selected suggestions.

                                type
                                String
                                "simple"

The type of template to use for rendering each suggestion. One of simple or image.

The default type is simple, which simply renders the suggestion text.

The image type renders each suggestion with with an image. To use, set type to image and set an image URL as the image property on each suggestion. You can redefine the image key to fit your data using the keys prop.

You can also render each suggestion with a custom template using the suggestion scoped slot.

                                minChars
                                Number
                                2
                                The minimum number of characters the user should type before the suggestions are shown.

                                showOnUpDown
                                Boolean
                                true
                                Determines whether the suggestions should be shown when the user presses the Up or Down arrow keys in the input.

                                invalid
                                Boolean
                                false

Whether or not the autocomplete is invalid.

When invalid is true, the autocomplete label appears red and the error is shown if available.

                                autofocus
                                Boolean
                                false

Whether or not the autocomplete should automatically receive focus when it is rendered for the first time.

Only one input element should have this prop set to true in the document for the autofocus to work properly.

                                filter
                                Function
                                fuzzysearch

Defines a custom filter function that is used for filtering the suggestions when the user types into the autocomplete.

The function is called for each item in the suggestions array with two arguments:

suggestion: (Object or String) - the current suggestion

query: (String) - the current value of the autocomplete input (what the user has typed)

defaultFilter: (Function) - Keen UI's default filter function. You can call this with the suggestion and query to defer to the default fuzzy filter behavior. Remember to return its result from your custom filter function if you're using it.

The function should return true if the suggestion matches the query or false otherwise.

                                sort
                                Function

Defines a custom sort function that is used for sorting the suggestions after they are filtered.

The function should implement the standard Array.prototype.sort() compare callback.

                                keys
                                Object

{
  label: 'label',
  value: 'value',
  image: 'image'
}

Allows for redefining each suggestion object's keys.

Pass an object with custom keys if your data does not match the default keys.

Note that if you redefine one key, you have to define all the others as well.

Default value can be changed globally.

                                highlightOnFirstMatch
                                Boolean
                                true

Whether or not the first matching suggestion is automatically highlighted when the user input changes.

Set to false to disable automatically highlighting the first match.

                                cycleHighlight
                                Boolean
                                true

Whether or not highlighting should cycle (wrap around) immediately on overflow.

When this is set to false, pressing the down arrow key when on the last suggestion will not immediately highlight the first suggestion, but pressing it a second time will.

The same goes for when pressing the up arrow key on the first suggestion.

                                placeholder
                                String

                                The placeholder attribute of the autocomplete input element.

                                icon
                                String

The autocomplete icon. Can be any of the Material Icons.

You can set a custom or SVG icon using the icon slot.

                                iconPosition
                                String
                                "left"

The position of the icon relative to the input. One of left or right.

                                label
                                String

The autocomplete label (text only). For HTML, use the default slot.

                                floatingLabel
                                Boolean
                                false

Whether or not the autocomplete label starts out inline and moves to float above the input when it is focused.

Set to true for a floating label. This will disable the input placeholder.

                                tabindex
                                Number, String

                                The autocomplete input tabindex.

                                help
                                String

The help text (hint) shown to the user below the autocomplete input. For HTML, use the help slot.

Extra space is reserved under the input for the help and error, but if neither is available, this space is collapsed.

                                error
                                String

The error text shown to the user below the autocomplete input when the invalid prop is true. For HTML, use the error slot.

Extra space is reserved under the input for the help and error, but if neither is available, this space is collapsed.

                                readonly
                                Boolean
                                false
                                The readonly attribute of the autocomplete input element.

                                disabled
                                Boolean
                                false
                                Whether or not the autocomplete is disabled. Set to true to disable the autocomplete.

                * Required prop
            </ui-tab>

            <ui-tab title="Slots">

                                Name
                                Description

                                (default)
                                Holds the autocomplete label and can contain HTML.

                                suggestion

Use this slot to render each suggestion with a custom template. The slot is passed the following properties, which will be available through scope:

suggestion: (Object or String) - the suggestion

index: (Number) - the index of the suggestion in the array of matched suggestions

highlighted: (Boolean) - whether or not the suggestion is currently highlighted

For more information, see the Scoped Slots documentation.

                                icon

Holds the autocomplete icon and can contain any custom or SVG icon.

                                help

Holds the autocomplete help and can contain HTML.

                                error

Holds the autocomplete error and can contain HTML.

            </ui-tab>

            <ui-tab title="Events">

                            Name
                            Description

                            select

Emitted when a suggestion is selected. The handler is called with the selected suggestion.

Listen for it using @select.

                            input

Emitted when the autocomplete input value is changed. The handler is called with the new value.

If you are not using v-model, you should listen for this event and update the value prop.

Listen for it using @input.

                            change

Emitted when a change in the autocomplete value is committed. The handler is called with the new value.

See the onchange event documentation for more information.

Listen for it using @change.

                            touch

Emitted when the autocomplete is focused for the first time and then blurred.

Listen for it using @touch.

                            focus

Emitted when the autocomplete input is focused.

Listen for it using @focus.

                            blur

Emitted when the autocomplete input loses focus.

Listen for it using @blur.

                            dropdown-open

Emitted when the autocomplete dropdown is opened.

Listen for it using @dropdown-open.

                            dropdown-close

Emitted when the autocomplete dropdown is closed.

Listen for it using @dropdown-close.

                            highlight

Emitted when a suggestion is highlighted using the arrow keys. The handler is called with the following arguments:

suggestion: (Object or String) - the suggestion that was highlighted

index: (Number) - the index of the suggestion in the array of matched suggestions

Listen for it using @highlight.

                            highlight-overflow

Emitted when an attempted highlight overflows (this happens when the user is on the first suggestion and presses the up arrow key or on the last suggestion and presses the down arrow key).

This event is only emitted when the cycleHighlight prop is false.

The handler is called with the overflowing index. Listen for it using @highlight-overflow.

            </ui-tab>

            <ui-tab title="Methods">

                                Name
                                Description

                                focus()

Call this method to programmatically focus the autocomplete.

                                reset()

Call this method to reset the autocomplete to its initial value. You should also reset the invalid and touched props.

                                resetTouched()
                                Call this method to reset the touched state of the autocomplete. By default it will set the touched state to false, but you can pass an object with { touched: true } to set the touched state to true.

            </ui-tab>
        </ui-tabs>

</template>

<template>

UiAutocomplete

UiAutocomplete shows a dropdown of autocomplete suggestions below an input as the user types.

UiAutocomplete can show a label above the input as well as help or error below the input, and it supports keyboard navigation.

            Examples View Source

Basic

            <ui-autocomplete
                help="Pick your favourite month of the year"
                label="Favourite Month"
                name="favourite_month"
                placeholder="Enter your favourite month"

                :suggestions="months"

                v-model="autocomplete1"
            ></ui-autocomplete>

Floating label

            <ui-autocomplete
                floating-label
                help="Pick your favourite month of the year"
                label="Favourite Month"
                name="favourite_month"
                placeholder="Enter your favourite month"

                :suggestions="months"

                v-model="autocomplete2"
            ></ui-autocomplete>

With icon

            <ui-autocomplete
                help="Pick your favourite month of the year"
                icon="events"
                label="Favourite Month"
                name="favourite_month"
                placeholder="Enter your favourite month"

                :suggestions="months"

                v-model="autocomplete3"
            ></ui-autocomplete>

Validation: required

            <ui-autocomplete
                error="This field is required"
                help="Pick your favourite month of the year"
                label="Favourite Month"
                name="favourite_month"
                placeholder="Enter your favourite month"

                :invalid="autocomplete4Touched && !autocomplete4.length > 0"
                :suggestions="months"

                @touch="autocomplete4Touched = true"

                v-model="autocomplete4"
            ></ui-autocomplete>

Type: image, minChars: 0

            <ui-autocomplete
                help="Pick your favourite member of the Simpsons family"
                label="Favourite Simpson"
                name="favourite_simpson"
                placeholder="Choose your favourite Simpson"
                type="image"

                :keys="{ label: 'label', value: 'label', image: 'image' }"
                :min-chars="0"
                :suggestions="theSimpsons"

                v-model="autocomplete5"
            ></ui-autocomplete>

Suggestions are updated dynamically when the suggestions array changes.

            <ui-button :disabled="addedGrannies" @click="addGrannies">
                Add Grandma & Grandpa
            </ui-button>

Custom template

The following simply renders the prop passed to the custom template for each suggestion.

            <ui-autocomplete
                help="Pick your favourite month of the year"
                label="Favourite Month"
                name="favourite_month"
                placeholder="Enter your favourite month"

                :suggestions="months"
                v-model="autocomplete6"
            >
                <template slot-scope="props" slot="suggestion">
                    {{ props }}
                </template>
            </ui-autocomplete>

Disabled

            <ui-autocomplete
                disabled
                label="Favourite Colour"
                placeholder="You can't interact with this"

                v-model="autocomplete7"
            ></ui-autocomplete>

API

        <ui-tabs raised>
            <ui-tab title="Props">

                                Name
                                Type
                                Default
                                Description

                                name
                                String

The name attribute of the autocomplete input element.

                                value, v-model
                                String

The model the autocomplete value syncs to.

If you are not using v-model, you should listen for the input event and update value.

                                suggestions
                                Array
                                []

An array of suggestions to show to the user. The array can either be of strings or objects (but not both).

For an array of objects, each object should have label and value properties. The label is shown to the user and the value is written to the model when the user makes a selection.

You can redefine the label and value keys to fit your data using the keys prop.

For an array of strings, each string is used as both the label and the value.

                                limit
                                Number
                                8
                                The maximum number of suggestions to show to the user at any one time.

                                append
                                Boolean
                                false

Whether or not the value of the selected suggestion should be appended to the current value (instead of replacing the current value).

Set to true to append selected suggestions.

                                appendDelimiter
                                String
                                ", "
                                The delimiter (separator) to use when appending selected suggestions.

                                type
                                String
                                "simple"

The type of template to use for rendering each suggestion. One of simple or image.

The default type is simple, which simply renders the suggestion text.

The image type renders each suggestion with with an image. To use, set type to image and set an image URL as the image property on each suggestion. You can redefine the image key to fit your data using the keys prop.

You can also render each suggestion with a custom template using the suggestion scoped slot.

                                minChars
                                Number
                                2
                                The minimum number of characters the user should type before the suggestions are shown.

                                showOnUpDown
                                Boolean
                                true
                                Determines whether the suggestions should be shown when the user presses the Up or Down arrow keys in the input.

                                invalid
                                Boolean
                                false

Whether or not the autocomplete is invalid.

When invalid is true, the autocomplete label appears red and the error is shown if available.

                                autofocus
                                Boolean
                                false

Whether or not the autocomplete should automatically receive focus when it is rendered for the first time.

Only one input element should have this prop set to true in the document for the autofocus to work properly.

                                filter
                                Function
                                fuzzysearch

Defines a custom filter function that is used for filtering the suggestions when the user types into the autocomplete.

The function is called for each item in the suggestions array with two arguments:

suggestion: (Object or String) - the current suggestion

query: (String) - the current value of the autocomplete input (what the user has typed)

defaultFilter: (Function) - Keen UI's default filter function. You can call this with the suggestion and query to defer to the default fuzzy filter behavior. Remember to return its result from your custom filter function if you're using it.

The function should return true if the suggestion matches the query or false otherwise.

                                sort
                                Function

Defines a custom sort function that is used for sorting the suggestions after they are filtered.

The function should implement the standard Array.prototype.sort() compare callback.

                                keys
                                Object

{
  label: 'label',
  value: 'value',
  image: 'image'
}

Allows for redefining each suggestion object's keys.

Pass an object with custom keys if your data does not match the default keys.

Note that if you redefine one key, you have to define all the others as well.

Default value can be changed globally.

                                highlightFirstMatch
                                Boolean
                                true

Whether or not the first matching suggestion is automatically highlighted when the user input changes.

Set to false to disable automatically highlighting the first match.

                                cycleHighlight
                                Boolean
                                true

Whether or not highlighting should cycle (wrap around) immediately on overflow.

When this is set to false, pressing the down arrow key when on the last suggestion will not immediately highlight the first suggestion, but pressing it a second time will.

The same goes for when pressing the up arrow key on the first suggestion.

                                placeholder
                                String

                                The placeholder attribute of the autocomplete input element.

                                icon
                                String

The autocomplete icon. Can be any of the Material Icons.

You can set a custom or SVG icon using the icon slot.

                                iconPosition
                                String
                                "left"

The position of the icon relative to the input. One of left or right.

                                label
                                String

The autocomplete label (text only). For HTML, use the default slot.

                                floatingLabel
                                Boolean
                                false

Whether or not the autocomplete label starts out inline and moves to float above the input when it is focused.

Set to true for a floating label. This will disable the input placeholder.

                                tabindex
                                Number, String

                                The autocomplete input tabindex.

                                help
                                String

The help text (hint) shown to the user below the autocomplete input. For HTML, use the help slot.

Extra space is reserved under the input for the help and error, but if neither is available, this space is collapsed.

                                error
                                String

The error text shown to the user below the autocomplete input when the invalid prop is true. For HTML, use the error slot.

Extra space is reserved under the input for the help and error, but if neither is available, this space is collapsed.

                                readonly
                                Boolean
                                false
                                The readonly attribute of the autocomplete input element.

                                disabled
                                Boolean
                                false
                                Whether or not the autocomplete is disabled. Set to true to disable the autocomplete.

                * Required prop
            </ui-tab>

            <ui-tab title="Slots">

                                Name
                                Description

                                (default)
                                Holds the autocomplete label and can contain HTML.

                                suggestion

Use this slot to render each suggestion with a custom template. The slot is passed the following properties, which will be available through scope:

suggestion: (Object or String) - the suggestion

index: (Number) - the index of the suggestion in the array of matched suggestions

highlighted: (Boolean) - whether or not the suggestion is currently highlighted

For more information, see the Scoped Slots documentation.

                                icon

Holds the autocomplete icon and can contain any custom or SVG icon.

                                help

Holds the autocomplete help and can contain HTML.

                                error

Holds the autocomplete error and can contain HTML.

            </ui-tab>

            <ui-tab title="Events">

                            Name
                            Description

                            select

Emitted when a suggestion is selected. The handler is called with the selected suggestion.

Listen for it using @select.

                            input

Emitted when the autocomplete input value is changed. The handler is called with the new value.

If you are not using v-model, you should listen for this event and update the value prop.

Listen for it using @input.

                            change

Emitted when a change in the autocomplete value is committed. The handler is called with the new value.

See the onchange event documentation for more information.

Listen for it using @change.

                            touch

Emitted when the autocomplete is focused for the first time and then blurred.

Listen for it using @touch.

                            focus

Emitted when the autocomplete input is focused.

Listen for it using @focus.

                            blur

Emitted when the autocomplete input loses focus.

Listen for it using @blur.

                            dropdown-open

Emitted when the autocomplete dropdown is opened.

Listen for it using @dropdown-open.

                            dropdown-close

Emitted when the autocomplete dropdown is closed.

Listen for it using @dropdown-close.

                            highlight

Emitted when a suggestion is highlighted using the arrow keys. The handler is called with the following arguments:

suggestion: (Object or String) - the suggestion that was highlighted

index: (Number) - the index of the suggestion in the array of matched suggestions

Listen for it using @highlight.

                            highlight-overflow

Emitted when an attempted highlight overflows (this happens when the user is on the first suggestion and presses the up arrow key or on the last suggestion and presses the down arrow key).

This event is only emitted when the cycleHighlight prop is false.

The handler is called with the overflowing index. Listen for it using @highlight-overflow.

            </ui-tab>

            <ui-tab title="Methods">

                                Name
                                Description

                                focus()

Call this method to programmatically focus the autocomplete.

                                reset()

Call this method to reset the autocomplete to its initial value. You should also reset the invalid and touched props.

                                resetTouched()
                                Call this method to reset the touched state of the autocomplete. By default it will set the touched state to false, but you can pass an object with { touched: true } to set the touched state to true.

            </ui-tab>
        </ui-tabs>

</template>


Fixed comparison for term in myplan component

<template>

        In MyPlan

            {{ readyCount }}
            {{ readyCount == 1 ? "course" : "courses" }}
            ready

            {{ unreadyCount }} not ready
            <b-button
              v-b-toggle="`${summerCardLabel}inMyPlanUnready-collapse-${_uid}`"
              :title="buttonTitle"
              size="sm"
              variant="link"
              class="ml-1 p-0 border-0 bg-transparent align-baseline"
            >
              {{ collapseOpen ? "Hide Details" : "See Details" }}

    <b-collapse
      :id="`${summerCardLabel}inMyPlanUnready-collapse-${_uid}`"
      v-model="collapseOpen"
    >

        <uw-myplan-courses
          :next-term-year="year"
          :next-term-quarter="quarter"
          :my-plan-data="myPlanData"
        />

        In MyPlan

          No courses in your plan

          Add courses

</template>


Local move on up&down

Local move on up&down

<template>

    <v-container fluid>
      <v-row no-gutters class="text-subtitle-2">
        <v-col cols="2">
          {{ $tc('activityContent.storyboard.entity.section.fields.column1') }}
        </v-col>
        <v-col cols="7">
          {{ $tc('activityContent.storyboard.entity.section.fields.column2') }}
        </v-col>
        <v-col cols="2">
          {{ $tc('activityContent.storyboard.entity.section.fields.column3') }}
        </v-col>
        <v-col cols="1" />
      </v-row>
      <transition-group name="flip-list" tag="div">

          <v-row no-gutters class="row-inter" justify="center">
            <v-col cols="1">
              <v-btn icon
                     small
                     class="button-add"
                     color="success"
                     @click="addSection">
                <v-icon>mdi-plus</v-icon>
              </v-btn>
            </v-col>
          </v-row>

          <api-form :entity="section">
            <v-row dense>
              <v-col cols="2">
                <api-textarea
                  fieldname="column1"
                  auto-grow
                  rows="2" />
              </v-col>
              <v-col cols="7">
                <api-textarea
                  fieldname="column2"
                  auto-grow
                  rows="4" />
              </v-col>
              <v-col cols="2">
                <api-textarea
                  fieldname="column3"
                  auto-grow
                  rows="2" />
              </v-col>
              <v-col cols="1">

                  <v-btn icon small
                         class="float-right"
                         @click="sectionUp(section)">
                    <v-icon>mdi-arrow-up-bold</v-icon>
                  </v-btn>
                  <dialog-entity-delete :entity="section">
                    <template v-slot:activator="{ on }">
                      <v-btn icon
                             small
                             color="error"
                             class="float-right"
                             v-on="on">
                        <v-icon>mdi-delete</v-icon>
                      </v-btn>
                    </template>
                  </dialog-entity-delete>
                  <v-btn icon small
                         class="float-right"
                         @click="sectionDown(section)">
                    <v-icon>mdi-arrow-down-bold</v-icon>
                  </v-btn>

              </v-col>
            </v-row>
          </api-form>

      </transition-group>

      <v-row no-gutters justify="center">
        <v-col cols="1">
          <v-btn icon
                 small
                 class="button-add"
                 color="success"
                 @click="addSection">
            <v-icon>mdi-plus</v-icon>
          </v-btn>
        </v-col>
      </v-row>
    </v-container>

</template>


feat: link to docs

feat: link to docs

<template>

    <AppHeaderLogo />

    <AppHistoryNav />

    <AppSelect />

    <AppMainMenu
      :last-inspector-route="lastInspectorRoute"
    />

    <template v-if="currentInspectorRoute">

      <AppHeaderSelect
        :items="inspectorRoutes"
        :selected-item="currentInspectorRoute"
        @select="route => $router.push(route.targetRoute)"
      >
        <template #default="{ item }">

            {{ item.label }}
            <PluginSourceIcon
              v-if="item.pluginId"
              :plugin-id="item.pluginId"
              class="flex-none"
            />

        </template>
      </AppHeaderSelect>
    </template>

      <portal-target
        name="header-end"
        class="flex items-center"
      />

      <VueDropdown
        :offset="[0, 0]"
      >
        <template #trigger>
          <VueButton
            icon-left="more_vert"
            class="icon-button flat"
          />
        </template>

        <portal-target name="more-menu" />

        <VueDropdownButton
          :to="{
            name: 'plugins'
          }"
        >
          Devtools plugins...
        </VueDropdownButton>

        <VueDropdownButton
          :to="{
            name: 'global-settings'
          }"
        >
          Global settings...
        </VueDropdownButton>

        <VueDropdownButton
          href="https://devtools.vuejs.org"
          target="_blank"
        >
          Documentation
        </VueDropdownButton>

        <VueDropdownButton
          href="https://new-issue.vuejs.org/?repo=vuejs/vue-devtools"
          target="_blank"
        >
          Report a bug
        </VueDropdownButton>

        <VueDropdownButton
          href="https://github.com/vuejs/vue-devtools/releases"
          target="_blank"
        >
          Full changelog
        </VueDropdownButton>
      </VueDropdown>

</template>

<template>

    <AppHeaderLogo />

    <AppHistoryNav />

    <AppSelect />

    <AppMainMenu
      :last-inspector-route="lastInspectorRoute"
    />

    <template v-if="currentInspectorRoute">

      <AppHeaderSelect
        :items="inspectorRoutes"
        :selected-item="currentInspectorRoute"
        @select="route => $router.push(route.targetRoute)"
      >
        <template #default="{ item }">

            {{ item.label }}
            <PluginSourceIcon
              v-if="item.pluginId"
              :plugin-id="item.pluginId"
              class="flex-none"
            />

        </template>
      </AppHeaderSelect>
    </template>

      <portal-target
        name="header-end"
        class="flex items-center"
      />

      <VueDropdown
        :offset="[0, 0]"
      >
        <template #trigger>
          <VueButton
            icon-left="more_vert"
            class="icon-button flat"
          />
        </template>

        <portal-target name="more-menu" />

        <VueDropdownButton
          :to="{
            name: 'plugins'
          }"
        >
          Devtools plugins...
        </VueDropdownButton>

        <VueDropdownButton
          :to="{
            name: 'global-settings'
          }"
        >
          Global settings...
        </VueDropdownButton>

        <VueDropdownButton
          href="https://new-issue.vuejs.org/?repo=vuejs/vue-devtools"
          target="_blank"
        >
          Report a bug
        </VueDropdownButton>

        <VueDropdownButton
          href="https://github.com/vuejs/vue-devtools/releases"
          target="_blank"
        >
          Full changelog
        </VueDropdownButton>
      </VueDropdown>

</template>