<template>

    <Navbar></Navbar>

      <Sidebar></Sidebar>
      <mainFooter></mainFooter>
      <router-view></router-view>

</template>

Add login check to root components.


<template>

      {{ item.title }}

      {{ item.key }}

{{ item.text }}

      submitted by: {{ item.author.full_name_displayed }}

</template>

Handle prepend() errors on older browsers


<template>
  <v-footer
    height="auto"
    color="lighten-1"
  >
    <v-layout
      justify-center
      align-center
      row
      wrap
    >

        made by

          Aelve

          source

        on GitHub

        licensed under

          CC+ BY-SA 4.0

    </v-layout>
  </v-footer>
</template>

Move the space out of the link in the footer


<template>

        <card-header>

                    {{ tab.label }}

        </card-header>
        <card-body>

                <slot></slot>

        </card-body>

</template>

Add console log for debugging


<template>
	<span :title="email"
		  v-tooltip="{ content: 'label', placement: 'bottom' }">{{ label }}</span>
</template>

<script>
	export default {
		name: "Address",
		props: [
			'email',
			'label',
		]
	}
</script>

Use shorter syntax for bottom placement

<template>
	<span :title="email"
		  v-tooltip.bottom="label">{{ label }}</span>
</template>

<script>
	export default {
		name: "Address",
		props: [
			'email',
			'label',
		]
	}
</script>


<template>

		<component
			:is="stepComponent"
			:user="user"
			:is-social-registration="isSocialRegistration"
			@next="onNextStep"
		>
			<template v-slot:controls="{ shouldShowSkip, canContinue }">

					<template v-if="shouldShowSkip">
						<app-form-button
							class="-skip"
							block
							:primary="false"
							:solid="false"
							trans
							:disabled="!canContinue"
						>
							<translate>Skip</translate>
						</app-form-button>
					</template>
					<template v-else>
						<app-form-button primary block solid :disabled="!canContinue">
							<translate>Next</translate>
						</app-form-button>
					</template>

			</template>
		</component>

</template>

Fix onboarding page fully collapsing its height


<template>

{{ text }}

</template>

Hide page titles on small screens


<template>
  <div>
    <button id="add-to-cart" @click="addToCart(product)">Click</button>
    <button id="remove-from-cart" @click="removeFromCart(product)">Click</button>
    <button id="close-microcart" @click="closeMicrocart">Click</button>
    <button id="open-microcart" @click="openMicrocart">Click</button>
  </div>
</template>

<script>
import {
  addToCart,
  removeFromCart,
  productsInCart,
  closeMicrocart,
  openMicrocart,
  isMicrocartOpen
} from '../index.js'

export default {
  data () {
    return {
      product: 'productString'
    }
  },
  mixins: [
    addToCart,
    removeFromCart,
    productsInCart,
    closeMicrocart,
    openMicrocart,
    isMicrocartOpen
  ]
}
</script>

Test Instance for core cart module updated with examples

<template>
  <!-- Examples of usage -->
  <div>
    <button id="add-to-cart" @click="addToCart(product)">addproduct to cart</button>
    <button id="remove-from-cart" @click="removeFromCart(product)">Remove product from cart</button>
    <button id="close-microcart" @click="closeMicrocart">close microcart</button>
    <button id="open-microcart" @click="openMicrocart">Open microcart</button>
  </div>
</template>

<script>
// Just import the features that you need in the view grouped in modules
import {
  addToCart,
  removeFromCart,
  productsInCart,
  closeMicrocart,
  openMicrocart,
  isMicrocartOpen
} from 'core/api/cart'

export default {
  data () {
    return {
      product: 'productObjectMock'
    }
  },
  // And register them as a mixins
  mixins: [
    addToCart,
    removeFromCart,
    productsInCart,
    closeMicrocart,
    openMicrocart,
    isMicrocartOpen
  ]
}
</script>


<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.fullPath
    }
  }
}
</script>

<style lang="scss" scoped>
.app-main {
  /* 50= navbar  50  */
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.fixed-header+.app-main {
  padding-top: 50px;
  height: 100vh;
  overflow: auto;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }

  .fixed-header+.app-main {
    padding-top: 84px;
  }
}
</style>

Revert "perf: optimize page scrolling when setting fixedHeader"

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.fullPath
    }
  }
}
</script>

<style lang="scss" scoped>
.app-main {
  /* 50= navbar  50  */
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.fixed-header+.app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }

  .fixed-header+.app-main {
    padding-top: 84px;
  }
}
</style>


<template>

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

</template>

Move syntax highlighting into a method


<template>
    <div class="c-oparl-client">

    </div>
</template>

<script>
    import OParl from 'oparl';

    let client = OParl.open('http://dev.dev-website.dev/api/v1/system', function (err, serverObj) {
        if (err !== null) {
            console.error('Something went wrong: ' + err);
        } else {
            console.log(serverObj);
        }
    });

    window.OParl = client;

    export default {
        data() {
            return {
                url: document.location.href
            }
        }
    };
</script>

Remove oparl client debug code

<template>
    <div class="c-oparl-client">

    </div>
</template>

<script>
    import OParl from 'oparl';

    /*
    let client = OParl.open('', function (err, serverObj) {
        if (err !== null) {
            console.error('Something went wrong: ' + err);
        } else {
            console.log(serverObj);
        }
    });

    window.OParl = client;
     */

    export default {
        data() {
            return {
                url: document.location.href
            }
        }
    };
</script>


<template>

</template>

<script>
    export default {
        name: "item-card"
    }
</script>

<style scoped>

</style>

Add season tag to item card.

<template>
</template>

<script>
import SeasonTag from '@/components/item_card/SeasonTag'
export default {
  components: {SeasonTag},
  name: 'item-card'
}
</script>

<style scoped>

</style>


<template>

{{entity}}

{{message}}

</template>

Hide words longer than message display width


<template>

 Labels

    <legend></legend>
    <demo-block>

          Colored labels with the html tag you want

        <n-pagination :total="10" v-model="currentPage"></n-pagination>
        <n-label color="gray">Default</n-label>
        <n-label color="orange" tag="div">Orange</n-label>
        <n-label color="green">Green</n-label>
        <n-label color="blue">Blue</n-label>
        <n-label color="yellow">Yellow</n-label>
        <n-label color="red">Red</n-label>

    </demo-block>

</template>

Remove pagination from labels example

<template>

 Labels

    <legend></legend>
    <demo-block>

          Colored labels with the html tag you want

        <n-label color="gray">Default</n-label>
        <n-label color="orange" tag="div">Orange</n-label>
        <n-label color="green">Green</n-label>
        <n-label color="blue">Blue</n-label>
        <n-label color="yellow">Yellow</n-label>
        <n-label color="red">Red</n-label>

    </demo-block>

</template>


<template>
  <div>
    <herodesc class="hero-section" :hero="hero"/>
    <attributes class="hero-section" :attributes="hero.attributes" :auto="hero.auto"/>
    <skill :num="1" :skill="hero.s1"/>
    <skill :num="2" :skill="hero.s2"/>
    <skill :num="3" :skill="hero.s3"/>
    <skill :num="4" :skill="hero.s4"/>
    <weapon class="hero-section" :weapon="hero.weapon"/>
    <options/>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import HeroDesc from "./HeroDesc.vue";
import Attributes from "./Attributes.vue";
import Skill from "./Skill.vue";
import Weapon from "./Weapon.vue";
import Options from "./Options.vue";

export default {
  name: "Hero",
  components: {
    herodesc: HeroDesc,
    attributes: Attributes,
    skill: Skill,
    weapon: Weapon,
    options: Options
  },
  computed: {
    ...mapGetters({
      hero: "getHero"
    })
  }
};
</script>

<style>
.media + .media {
  border-top: unset;
  margin-top: unset;
  padding-top: unset;
}
</style>

Remove options from bottom of hero section.

<template>
  <div>
    <herodesc class="hero-section" :hero="hero"/>
    <attributes class="hero-section" :attributes="hero.attributes" :auto="hero.auto"/>
    <skill :num="1" :skill="hero.s1"/>
    <skill :num="2" :skill="hero.s2"/>
    <skill :num="3" :skill="hero.s3"/>
    <skill :num="4" :skill="hero.s4"/>
    <weapon class="hero-section" :weapon="hero.weapon"/>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import HeroDesc from "./HeroDesc.vue";
import Attributes from "./Attributes.vue";
import Skill from "./Skill.vue";
import Weapon from "./Weapon.vue";
import Options from "./Options.vue";

export default {
  name: "Hero",
  components: {
    herodesc: HeroDesc,
    attributes: Attributes,
    skill: Skill,
    weapon: Weapon,
    options: Options
  },
  computed: {
    ...mapGetters({
      hero: "getHero"
    })
  }
};
</script>

<style>
.media + .media {
  border-top: unset;
  margin-top: unset;
  padding-top: unset;
}
</style>


<template lang="pug">
.wrapper
	input.form-control(
		id="getFieldID(schema)",
		type="file",
		:name="schema.inputName",
		@change="schema.onChange || null",
		:accept="schema.accept",
		:multiple="schema.multiple",
		:placeholder="schema.placeholder",
		:readonly="schema.readonly",
		:required="schema.required",
		:disabled="disabled",)
</template>

<script>
import abstractField from "../abstractField";

export default {
	mixins: [abstractField]
};

</script>

<style lang="sass">
	.vue-form-generator .field-input {
		.wrapper {
			width: 100%;
		}
		.helper {
			margin: auto 0.5em;
		}
	}
</style>

Improve onChange in file field.

<template lang="pug">
.wrapper
	input.form-control(
		id="getFieldID(schema)",
		type="file",
		:name="schema.inputName",
		@change="onChange",
		:accept="schema.accept",
		:multiple="schema.multiple",
		:placeholder="schema.placeholder",
		:readonly="schema.readonly",
		:required="schema.required",
		:disabled="disabled",)
</template>

<script>
import abstractField from "../abstractField";
import { isFunction } from "lodash";

export default {
	mixins: [abstractField],
	methods: {
		onChange(){
			if(isFunction(this.schema.onChanged)){
				// Schema has defined onChange method.
				this.schema.onChanged.call(this, this.model, this.schema, event, this);
			}
		}
	}
};

</script>

<style lang="sass">
	.vue-form-generator .field-input {
		.wrapper {
			width: 100%;
		}
		.helper {
			margin: auto 0.5em;
		}
	}
</style>


<template>

        {{ tab.title }}

      <slot></slot>

</template>

Add changed event to tabs


<template>
    <span contenteditable  @paste="pasteValue" @blur="updateValue"
          :class="{'is-empty': isEmptyValue()}">{{property.languages[lang]}}</span>
</template>

<script>
  export default {
    name: 'propertiesEditor',
    props: ['lang', 'property'],
    mounted() {
      if (this.property.languages[this.lang].trim() === "") {
        this.resetValue();
      }

    },
    methods: {
      updateValue($event) {
        $event.preventDefault();
        $event.stopPropagation();

        if ($event.target.innerText.trim()) {
          this.property.languages[this.lang] = $event.target.innerText;
        }

        if (this.isEmptyValue()) {
          this.resetValue();
        }
      },

      isEmptyValue() {
        return !this.property.languages[this.lang].trim()
      },

      pasteValue(e) {
        e.stopPropagation();
        e.preventDefault();

        // Get pasted data via clipboard API
        var clipboardData = e.clipboardData || window.clipboardData;
        var pastedData = clipboardData.getData('Text');
        if (pastedData) {
          this.property.languages[this.lang] = pastedData;
        }

        if (this.isEmptyValue()) {
          this.resetValue();
        }
      },

      resetValue() {
        // issue https://github.com/vuejs/vue/issues/5234
        this.property.languages[this.lang] = '  ';
      }
    }
  }
</script>

<style>
  .is-empty {
    background-color: #fff8bb !important;
  }
</style>

Remove binding by property html

<template>
    <span contenteditable  @paste="pasteValue" @blur="updateValue"
          :class="{'is-empty': isEmptyValue()}" :inner-text.prop="property.languages[lang]"></span>
</template>

<script>
  export default {
    name: 'propertiesEditor',
    props: ['lang', 'property'],
    mounted() {
      if (this.property.languages[this.lang].trim() === "") {
        this.resetValue();
      }

    },
    methods: {
      updateValue($event) {
        $event.preventDefault();
        $event.stopPropagation();

        if ($event.target.innerText.trim()) {
          this.property.languages[this.lang] = $event.target.innerText;
        }

        if (this.isEmptyValue()) {
          this.resetValue();
        }
      },

      isEmptyValue() {
        return !this.property.languages[this.lang].trim()
      },

      pasteValue(e) {
        e.stopPropagation();
        e.preventDefault();

        // Get pasted data via clipboard API
        var clipboardData = e.clipboardData || window.clipboardData;
        var pastedData = clipboardData.getData('Text');
        if (pastedData) {
          this.property.languages[this.lang] = pastedData;
        }

        if (this.isEmptyValue()) {
          this.resetValue();
        }
      },

      resetValue() {
        // issue https://github.com/vuejs/vue/issues/5234
        this.property.languages[this.lang] = '  ';
      }
    }
  }
</script>

<style>
  .is-empty {
    background-color: #fff8bb !important;
  }
</style>


<template>

Profile

Email: {{ email }}

Characters count: {{ characters_count }}

</template>

Add seo title and breadcrumbs

<template>

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

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

Email: {{ email }}

Characters count: {{ characters_count }}

</template>


<template>

QR Code

QR Code generator.

      <qrcode-vue :value="value" size="200" level="H"></qrcode-vue>

    <page-footer></page-footer>

</template>

Create value form in component


<template>

</template>

Use event.prevent instead of event.preventDefault()


<template>

        Invite members

{{ group.groupName }}

{{ group.id }}

{{ group.sharedValues }}

Members

{{ member }}

</template>

Standardize padding around /dashboard page


<template>
  <figure class="my-10 md:my-16">
    <cld-image :public-id="publicId">
      <cld-transformation :width="width"
                          :height="height"
                          :alt="alt"
                          crop="scale"
                          fetchFormat="auto"
                          quality="auto"
      />
    </cld-image>
    <figcaption v-if="caption" class="mt-2 text-center font-semibold">
      {{ caption }}
    </figcaption>
  </figure>
</template>

<script>
export default {
  props: {
    publicId: {
      type: String,
      required: true,
    },
    width: {
      type: String,
      default: '',
    },
    height: {
      type: String,
      default: '',
    },
    alt: {
      type: String,
      required: true,
    },
    caption: {
      type: String,
      default: null,
    },
  },
};
</script>

<style>
figure img {
  @apply .mx-auto;
}
</style>

Use caption for alt text.

<template>
  <figure class="my-10 md:my-16">
    <cld-image :public-id="publicId">
      <cld-transformation :width="width"
                          :height="height"
                          :alt="caption"
                          crop="scale"
                          fetchFormat="auto"
                          quality="auto"
      />
    </cld-image>
    <figcaption v-if="caption" class="mt-2 text-center font-semibold">
      {{ caption }}
    </figcaption>
  </figure>
</template>

<script>
export default {
  props: {
    publicId: {
      type: String,
      required: true,
    },
    width: {
      type: String,
      default: '',
    },
    height: {
      type: String,
      default: '',
    },
    alt: {
      type: String,
      required: true,
    },
    caption: {
      type: String,
      default: null,
    },
  },
};
</script>

<style>
figure img {
  @apply .mx-auto;
}
</style>


<template>

        <spring-icon v-if="season === 'spring'"/>
        <summer-icon v-if="season === 'summer'"/>
        <fall-icon v-if="season === 'fall'"/>
        <winter-icon v-if="season === 'winter'"/>

</template>

Change color to remove varied colors.


<template>
  <div>
    <div
      v-if="type === 'String'"
      key="string-result"
      v-html="data"
      >
    </div>
    <div
      v-else-if="type === 'StringList'"
      key="string-list-result"
      >
      <span
        v-for="(item, index) in data"
        :key="`result-${index}`"
        v-html="`${item}<br />`"
        >
      </span>
    </div>
    <div
      v-else-if="type === 'Table'"
      key="table-result"
      >
      <report-result-details-table
        :name="data.name"
        :rows="data.rows"
        ></report-result-details-table>
    </div>
    <div
      v-else-if="type === 'TableList'"
      key="table-list-result"
      >
      <report-result-details-table
        v-for="(item, index) in data"
        :key="`result-${index}`"
        :name="item.name"
        :rows="item.rows"
        ></report-result-details-table>
    </div>

  </div>
</template>

<script>
import ReportResultDetailsTable from "./report-result-details-table"
export default {
  components: {
    ReportResultDetailsTable
  },
  props: {
    type: {
      type: String,
      required: true
    },
    data: {
      required: true
    }
  }
}
</script>

Add markdown support to string and string list details result types

<template>
  <div>
    <vue-showdown
      v-if="type === 'String'"
      key="string-result"
      :markdown="data"
      >
    </vue-showdown>
    <div
      v-else-if="type === 'StringList'"
      key="string-list-result"
      >
      <vue-showdown
        v-for="(item, index) in data"
        :key="`result-${index}`"
        :markdown="item"
        >
      </vue-showdown>
    </div>
    <div
      v-else-if="type === 'Table'"
      key="table-result"
      >
      <report-result-details-table
        :name="data.name"
        :rows="data.rows"
        ></report-result-details-table>
    </div>
    <div
      v-else-if="type === 'TableList'"
      key="table-list-result"
      >
      <report-result-details-table
        v-for="(item, index) in data"
        :key="`result-${index}`"
        :name="item.name"
        :rows="item.rows"
        ></report-result-details-table>
    </div>

  </div>
</template>

<script>
import ReportResultDetailsTable from "./report-result-details-table"
export default {
  components: {
    ReportResultDetailsTable
  },
  props: {
    type: {
      type: String,
      required: true
    },
    data: {
      required: true
    }
  }
}
</script>


<template>

			<reply :discussion="discussion" :reply="reply" @deleted="remove(index)"></reply>

				<svg class="icon text-subtle">
					<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bell"></use>
				</svg>

					<input type="checkbox"> Notify me when there are replies to this discussion

		<quick-reply :endpoint="endpoint" @created="add"></quick-reply>

</template>

Fix an issue with improper rendering on delete


<template>
  <a @click.prevent="handleClick"><slot></slot></a>
</template>

<script>
import VueScrollTo from "vue-scrollto";
import { createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('annotations_ui');

export default {
  props: {
    enclosingAnnotationIds: {type: Array,
                             default: []}
  },
  computed: {
    id() {
      return this.$attrs.name || this.$attrs.id;
    },
    siblingId() {
      return (this.$attrs.href || "").slice(1);
    },
    relatedAnnotationIds() {
      return this.$store.getters['footnotes_ui/getById'](this.siblingId) || [];
    }
  },
  methods: {
    ...mapActions(['expandById']),
    handleClick() {
      this.expandById(this.relatedAnnotationIds);
      this.$nextTick(() => VueScrollTo.scrollTo(document.querySelector(`[id="${this.siblingId}"], [name="${this.siblingId}"]`)));
    }
  },
  created() {
    // footnotes register their state, by ID, in vuex
    // so that dependent links can expand their partner's annotations
    this.$store.commit(
      'footnotes_ui/register',
      {id: this.id,
       annotationIds: this.enclosingAnnotationIds}
    );
  }
}
</script>

Use a factory function to return the default param

<template>
  <a @click.prevent="handleClick"><slot></slot></a>
</template>

<script>
import VueScrollTo from "vue-scrollto";
import { createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('annotations_ui');

export default {
  props: {
    enclosingAnnotationIds: {type: Array,
                             default: (() =>[])}
  },
  computed: {
    id() {
      return this.$attrs.name || this.$attrs.id;
    },
    siblingId() {
      return (this.$attrs.href || "").slice(1);
    },
    relatedAnnotationIds() {
      return this.$store.getters['footnotes_ui/getById'](this.siblingId) || [];
    }
  },
  methods: {
    ...mapActions(['expandById']),
    handleClick() {
      this.expandById(this.relatedAnnotationIds);
      this.$nextTick(() => VueScrollTo.scrollTo(document.querySelector(`[id="${this.siblingId}"], [name="${this.siblingId}"]`)));
    }
  },
  created() {
    // footnotes register their state, by ID, in vuex
    // so that dependent links can expand their partner's annotations
    this.$store.commit(
      'footnotes_ui/register',
      {id: this.id,
       annotationIds: this.enclosingAnnotationIds}
    );
  }
}
</script>


<template>

    <content-page>

        <template v-if="nextLessonResource">

{{ $tr('nextInLesson') }}

          <content-card
            :isMobile="true"
            :kind="nextLessonResource.kind"
            :link="nextResourceLink"
            :progress="nextLessonResource.progress_fraction"
            :thumbnail="getContentNodeThumbnail(nextLessonResource)"
            :title="nextLessonResource.title"
          />
        </template>

    </content-page>

</template>

Make next content cards less wide


<template>
    <card title="Experiment summary">
        <search-settings-form></search-settings-form>

            <simple-button label="Update" glyphicon="repeat" type="primary"></simple-button>

        No dataset is selected... Wait for at least one dataset to be loaded or select one.

            We managed to match xx of your {{ this.$store.getters.activeDataset.getAmountOfPeptides() }} peptides.
            Unfortunately, xx peptides couldn't be found.

    </card>
</template>

Convert ExperimentSummaryCard to new API

<template>
    <card>
        <card-header>
            <card-title>Experiment summary</card-title>
        </card-header>
        <card-body>
            <search-settings-form></search-settings-form>

                <simple-button label="Update" glyphicon="repeat" type="primary"></simple-button>

            No dataset is selected... Wait for at least one dataset to be loaded or select one.

                We managed to match xx of your {{ this.$store.getters.activeDataset.getAmountOfPeptides() }} peptides.
                Unfortunately, xx peptides couldn't be found.

        </card-body>
    </card>
</template>


<template>

  <help-circle-icon />

    {{ text }}

</template>

Add markdown support to question mark widget

<template>
<div
  class="question-mark"
>
  <help-circle-icon />
  <div
    class="question-text"
    v-html="renderMarkdown(text)"
  >
  </div>
</div>
</template>

<script>
import { HelpCircleIcon } from 'vue-feather-icons'
import { renderMarkdown } from '@/lib/render'

export default {
  name: 'spinner',
  components: {
    HelpCircleIcon
  },

  props: {
    text: {
      type: String
    }
  },

  computed: {
  },

  methods: {
    renderMarkdown
  }
}
</script>

<style lang="scss" scoped>
.question-mark {
  position: relative;

  .question-text {
    background: var(--background-alt);
    border-radius: 5px;
    box-shadow: 0 2px 6px var(--box-shadow);
    display: none;
    min-width: 300px;
    padding: 0.5em;
    position: absolute;
    z-index: 300;
  }

  &:hover {
    .question-text {
      display: block;
    }
  }
}
</style>


<template>
    <span>
        <aui-label :for="id">{{ label }}</aui-label>
        <aui-toggle ref="toggle" :id="id"
                    :tooltip-on="tooltipOn || 'Enabled'" :tooltip-off="tooltipOff || 'Disabled'"
                    :label="label || ''"
                    :checked="value"></aui-toggle>
    </span>
</template>

<script>
  export default {
    props: ['value', 'id', 'label', 'tooltipOn', 'tooltipOff'],

    mounted: function () {
      this.$refs.toggle.addEventListener('change', this.emitChange);
    },

    methods: {
      emitChange() {
        this.$emit('input', this.$refs.toggle.checked)
      }
    }
  }
</script>

Fix aui-toggle-button warning and add clear error.

<template>
    <span>
        <aui-label v-if="label" :for="id">{{ label }}</aui-label>
        <aui-toggle ref="toggle" :id="id"
                    :tooltip-on="tooltipOn || 'Enabled'" :tooltip-off="tooltipOff || 'Disabled'"
                    :label="label || ''"
                    :checked="value"></aui-toggle>
    </span>
</template>

<script>
  export default {
    props: ['value', 'id', 'label', 'tooltipOn', 'tooltipOff'],

    mounted: function () {
      if (this.label && !this.id) {
            throw "You need to define aui-toggle-button id attribute to properly match label to the toggle"
      }
      this.$refs.toggle.addEventListener('change', this.emitChange);
    },

    methods: {
      emitChange() {
        this.$emit('input', this.$refs.toggle.checked)
      }
    }
  }
</script>


<template>

        {{ field.title }}

</template>

Make dapp list headings sticky


<template>
	{{ formatted }}
</template>

Use quotes for bound variable


<template>

Articles tagged "{{ tag }}"

    <ArticlesList :all-articles="taggedArticles"
                  :start-page="startPage"
                  :root-segment="rootSegment"
    />

</template>

Add "view all tags" link.

<template>

Articles tagged "{{ tag }}"

          <nuxt-link to="/tags">
            View all tags
          </nuxt-link>

    <ArticlesList :all-articles="taggedArticles"
                  :start-page="startPage"
                  :root-segment="rootSegment"
    />

</template>


<template>

    keyboard_arrow_right

    keyboard_arrow_left

</template>

Modify component "sub-btn" : change span to button

<template>
  <button @click.stop="next()" v-if="type === 'next'">
    keyboard_arrow_right
  </button>
  <button @click.stop="back()" v-else>
    keyboard_arrow_left
  </button>
</template>


<template>

      <q-badge color="secondary" multi-line>
        Model: "{{ model }}"
      </q-badge>

      <q-select filled v-model="model" :options="options" label="Standard" />

</template>

Update QSelect - Object options example


<template>

  <core-modal
    :title="$tr('title')"
    @cancel="handleClickCancel()"
  >

        {{ $tr('deleteActionDescription') }}: {{ channelTitle }}

{{ $tr('restorationInstructions') }}

{{ $tr('confirmationQuestion') }}

      <k-button
        :primary="false"
        @click="handleClickCancel()"
        :text="$tr('cancelButtonLabel')"
      />

      <k-button
        name="confirm"
        :primary="true"
        @click="handleClickConfirm()"
        :text="$tr('confirmButtonLabel')"
      />

  </core-modal>

</template>

Update messaging in the delete channel modal.

<template>

  <core-modal
    :title="$tr('title')"
    @cancel="handleClickCancel()"
  >

{{ $tr('confirmationQuestion', { channelTitle }) }}

      <k-button
        :primary="false"
        @click="handleClickCancel()"
        :text="$tr('cancelButtonLabel')"
      />

      <k-button
        name="confirm"
        :primary="true"
        @click="handleClickConfirm()"
        :text="$tr('confirmButtonLabel')"
      />

  </core-modal>

</template>


<template>

      {{ scout.firstname }} {{ scout.lastname }}
      <button class="button edit-button is-pulled-right"
              @click="toggleEdit()">

      </button>

    <scout-detail v-if="!editing" :scout="scout"></scout-detail>
    <scout-edit v-if="editing" :scout="scout" @close="toggleEdit()"></scout-edit>

</template>

Switch edit icon to close icon when editing


<template>

  <div
    class="base-toolbar"
    :style="{ color: $themeTokens.text }"
  >
    <slot></slot>
  </div>

</template>

<script>

  /**
   * A simple toolbar with appearance derived from UiToolbar.
   * It behaves like a container that doesn't provide any implementation
   * of its internal content layout. Insted, its content area is expected
   * to be fully controlled from components that use this toolbar.
   * It is suitable for toolbar layouts that don't conform to typical UiToolbar
   * use-cases or when using UiToolbar may be possible but is complicated
   * and requires many /deep/ overrides and fixes.
   */
  export default {
    name: 'BaseToolbar',
  };

</script>

<style lang="scss" scoped>

  .base-toolbar {
    position: relative;
    min-height: 3.5rem;
    padding-right: 24px;
    padding-left: 24px;
    font-size: 1.125rem;
    background-color: white;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
  }

</style>

Use theme colors in the base toolbar

<template>

  <div
    class="base-toolbar"
    :style="{
      color: $themeTokens.text,
      backgroundColor: $themeTokens.surface
    }"
  >
    <slot></slot>
  </div>

</template>

<script>

  /**
   * A simple toolbar with appearance derived from UiToolbar.
   * It behaves like a container that doesn't provide any implementation
   * of its internal content layout. Insted, its content area is expected
   * to be fully controlled from components that use this toolbar.
   * It is suitable for toolbar layouts that don't conform to typical UiToolbar
   * use-cases or when using UiToolbar may be possible but is complicated
   * and requires many /deep/ overrides and fixes.
   */
  export default {
    name: 'BaseToolbar',
  };

</script>

<style lang="scss" scoped>

  .base-toolbar {
    position: relative;
    min-height: 3.5rem;
    padding-right: 24px;
    padding-left: 24px;
    font-size: 1.125rem;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
  }

</style>


<template>

			Coded with lots of
			 by
			Napster

</template>

Add some padding to footer for better clarity


<template>

        {{ copyright }}

        {{ madeWith }}

</template>

Improve the vertical spacing, introduce link to GitHub


<template>

    <lazy-this>

    </lazy-this>

</template>

Change image to dummy image


<template lang="pug">
  .maze
    h1 Maze
    ul
      li(v-for='name in fruit') {{name}}
    #drawing
</template>

<script lang="coffee">
  import SVG from 'svg.js'

  export default
    data: ->
      fruit: ["Apple", "Turnip", "Carrot"]
    methods:
      draw: ->
        draw = SVG('drawing').size(400, 300)
        symbol = draw.symbol()
        symbol.rect(100, 100).fill('#f09')
        use = draw.use(symbol).move(20, 60)
    mounted: ->
      this.draw()

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {color: #42b983;}

#drawing {
  width: 400px;
  height: 300px;
  background-color: black;
  margin: 0 25%;
}
</style>

Add first attempt, grid layout in svg

<template lang="pug">
  .maze
    #drawing
</template>

<script lang="coffee">
  import SVG from 'svg.js'

  export default
    data: ->
      width: 400
      height: 300
      columns: 40
      rows: 30
    methods:
      draw: ->
        cellWidth = @width / @columns
        cellHeight = @height / @rows

        draw = SVG('drawing').size(400, 300)
        symbol = draw.symbol()
        for x in [0..@columns]
          for y in [0..@rows]
            symbol.rect(@cellWidth, @cellHeight).fill('white')
            symbol.stroke({color: 'red', width: '0.5px'})
            symbol.move(x, y)
            use = draw.use(symbol)

    mounted: ->
      this.draw()

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {color: #42b983;}

#drawing {
  width: 400px;
  height: 300px;
  background-color: white;
  margin: 0 25%;
}
</style>


<template>

            <nuxt-link
              :class="{ active: isPM === true }"
              to="/messages"
              class="nav-link"
              exact>
              Messages
            </nuxt-link>

            <nuxt-link
              :class="{ active: isPM === false }"
              to="/messages?public"
              class="nav-link">
              Chat Rooms
            </nuxt-link>

    <nuxt-child @updateNav="isPM = $event" />

</template>

Fix that list is not updated when moved between channel

<template>

            <nuxt-link
              :class="{ active: isPM === true }"
              to="/messages"
              class="nav-link"
              exact>
              Messages
            </nuxt-link>

            <nuxt-link
              :class="{ active: isPM === false }"
              to="/messages?public"
              class="nav-link">
              Chat Rooms
            </nuxt-link>

    <nuxt-child
      :key="$route.params.channel"
      @updateNav="isPM = $event"
    />

</template>


<template>
    <composer-package hide-name hide-packagist :update-only="packageInstalled('contao/manager-bundle')" :data="data">
        <img src="../../../assets/images/logo.svg" slot="logo">

        <template slot="actions" v-if="!packageInstalled('contao/manager-bundle')">
            <button class="widget-button widget-button--update" disabled>{{ $t('ui.package.updateButton') }}</button>
        </template>
    </composer-package>
</template>

<script>
    import { mapGetters } from 'vuex';

    import ComposerPackage from './ComposerPackage';

    export default {
        components: { ComposerPackage },

        props: {
            package: {
                type: Object,
                required: true,
            },
        },

        computed: {
            ...mapGetters('packages', ['packageInstalled']),

            data() {
                return Object.assign(
                    {},
                    this.package,
                    {
                        title: 'Contao Open Source CMS',
                        description: 'Contao is an Open Source PHP Content Management System.',
                        homepage: 'https://contao.org',
                        support: {
                            docs: 'https://docs.contao.org',
                            forum: 'https://community.contao.org',
                            issues: 'https://github.com/contao/contao/issues',
                            source: 'https://github.com/contao/contao',
                        },
                    },
                );
            },
        },
    };
</script>

Allow to set package props to override them

<template>
    <composer-package hide-packagist :name="''" :update-only="packageInstalled('contao/manager-bundle')" :data="data">
        <img src="../../../assets/images/logo.svg" alt="" slot="logo">

        <template slot="actions" v-if="!packageInstalled('contao/manager-bundle')">
            <button class="widget-button widget-button--update" disabled>{{ $t('ui.package.updateButton') }}</button>
        </template>
    </composer-package>
</template>

<script>
    import { mapGetters } from 'vuex';

    import ComposerPackage from './ComposerPackage';

    export default {
        components: { ComposerPackage },

        props: {
            package: {
                type: Object,
                required: true,
            },
        },

        computed: {
            ...mapGetters('packages', ['packageInstalled']),

            data() {
                return Object.assign(
                    {},
                    this.package,
                    {
                        title: 'Contao Open Source CMS',
                        description: 'Contao is an Open Source PHP Content Management System.',
                        homepage: 'https://contao.org',
                        support: {
                            docs: 'https://docs.contao.org',
                            forum: 'https://community.contao.org',
                            issues: 'https://github.com/contao/contao/issues',
                            source: 'https://github.com/contao/contao',
                        },
                    },
                );
            },
        },
    };
</script>


<template>

          Stardew Community Checklist

          Track Your Progress on the Community Center!

</template>

Add item card to welcome for testing.

<template>

          Stardew Community Checklist

          Track Your Progress on the Community Center!

        <item-card/>

</template>


<template>

{{ name }}

</template>

Add some really basic styling to block list.


<template>
  <form id="lesspass-options-form" novalidate v-on:submit.prevent="saveOptions">

          {{$t('Default login')}}

            <input
              id="login"
              type="text"
              name="login"
              ref="login"
              class="form-control"
              autocomplete="off"
              autocorrect="off"
              autocapitalize="none"
              v-model="defaultPassword.login"
            />

            <button type="submit" class="btn btn-primary">{{$t('Save')}}</button>

      </form>
</template>

Fix layout of the options form


<style lang="sass">
.container
  padding: 20px 0
</style>

<template lang="pug">
.container
  .box
    .field
      label.label App ID
      input.input(placeholder="App ID", v-model="appId")
    .field
      label.label Master Key
      input.input(placeholder="Master Key", v-model="appKey")
    .button.is-info(@click="connect") Connect
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      appId: window.localStorage.getItem('lse_app_id') || '',
      appKey: window.localStorage.getItem('lse_app_key') || ''
    }
  },
  methods: {
    connect () {
      axios.get('https://api.leancloud.cn/1.1/stats/appinfo', {
        headers: {
          'X-LC-Id': this.appId,
          'X-LC-Key': this.appKey + ',master'
        }
      }).then(result => {
        window.localStorage.setItem('lse_app_id', this.appId)
        window.localStorage.setItem('lse_app_key', this.appKey)
        this.$router.push('/')
      }).catch(err => {
        window.alert(err)
      })
    }
  }
}
</script>

Add loading to login page

<style lang="sass">
.container
  padding: 20px 0
</style>

<template lang="pug">
.container
  .box
    .field
      label.label App ID
      input.input(placeholder="App ID", v-model="appId")
    .field
      label.label Master Key
      input.input(placeholder="Master Key", v-model="appKey")
    .button.is-info(@click="connect", :class="{'is-loading': loading}") Connect
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      loading: false,
      appId: window.localStorage.getItem('lse_app_id') || '',
      appKey: window.localStorage.getItem('lse_app_key') || ''
    }
  },
  methods: {
    connect () {
      if (this.loading) return
      this.loading = true
      axios.get('https://api.leancloud.cn/1.1/stats/appinfo', {
        headers: {
          'X-LC-Id': this.appId,
          'X-LC-Key': this.appKey + ',master'
        }
      }).then(result => {
        window.localStorage.setItem('lse_app_id', this.appId)
        window.localStorage.setItem('lse_app_key', this.appKey)
        this.$router.push('/')
      }).catch(err => {
        window.alert(err)
      }).then(() => {
        this.loading = false
      })
    }
  }
}
</script>


<template>

      <svg src="./progress-icons/inprogress.svg"/>

      <svg src="./progress-icons/completed.svg"/>

</template>

Tweak to progress-icon to get it to pass the tests.


<template>
<td class="name">
  <div
    class="tag task-type-name"
    :style="{ 'border-left': '4px solid ' + color }"
  >
    {{ entry.name }}
  </div>
</td>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'task-type-name',
  components: {
  },
  props: [
    'entry'
  ],
  computed: {
    ...mapGetters([
    ]),
    color () {
      if (this.entry.color.toUpperCase() === '#000000') return '#666'
      else return this.entry.color
    }
  },
  methods: {
    ...mapActions([
    ])
  }
}
</script>

<style scoped>
.tag {
  margin: 0.7em;
  padding: 1em;
  font-size: 1em;
  color: #666;
  border-radius: 0;
  font-weight: bold;
}
</style>

Set default cursor on task type name

<template>
<td class="name">
  <div
    class="tag task-type-name"
    :style="{ 'border-left': '4px solid ' + color }"
  >
    {{ entry.name }}
  </div>
</td>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'task-type-name',
  components: {
  },
  props: [
    'entry'
  ],
  computed: {
    ...mapGetters([
    ]),
    color () {
      if (this.entry.color.toUpperCase() === '#000000') return '#666'
      else return this.entry.color
    }
  },
  methods: {
    ...mapActions([
    ])
  }
}
</script>

<style scoped>
.tag {
  margin: 0.7em;
  padding: 1em;
  font-size: 1em;
  color: #666;
  border-radius: 0;
  font-weight: bold;
  cursor: default;
}
</style>


<template>

        <kanban-list header="Para executar"></kanban-list>
        <kanban-list header="Em andamento"></kanban-list>
        <kanban-list header="Finalizado"></kanban-list>

</template>

Add some sample card data as arrays to the board and bind that card data to the child lists

<!--
    kanban-board

    The actual Kanban board parent container
-->
<template>
    <main id="kanban-board">
        <kanban-list header="Para executar" :cards="todo"></kanban-list>
        <kanban-list header="Em andamento" :cards="doing"></kanban-list>
        <kanban-list header="Finalizado" :cards="done"></kanban-list>
    </main>
</template>

<script>
import KanbanList from './kanban-list.vue'

export default {
    data() {
        return {
            todo: [
                "do thing 1",
                "do thing 2",
                "thing things",
                "thing things",
                "thing things",
                "thing things",
                "thing things",
                "thing things",
                "thing things",
                "thing things",
                "thing test thing",
                "thing test thing",
                "thing test thing",
                "thing test thing",
                "thing test thing",
                "thing test thing",
                "thing test thing",
                "thing test thing",
                "thing test thing",
                "thing test thing",
                "thing things",
                "thing things",
                "thing things",
                "thing things",
                "thing things",
                "a longer thing to see how this thing draws in the thing"
            ],
            doing: [
                "a thing"
            ],
            done: [
                "first thing"
            ]
        }
    },
    components: {
        KanbanList
    }
}
</script>

<style lang="scss" src="./kanban-board.scss"></style>


<template>

			{{ label }}

		<slot />

</template>

Remove validation on field value


<template>

<nuxt-link @click.native="trackDappMetaClick(slug)" :to="{name: 'dapp-detail-meta', params: {slug: slug}}">Add this ÐApp's badges to your website</nuxt-link>

</template>

Make dapp badge download more enticing

<template>

<nuxt-link @click.native="trackDappMetaClick(slug)" :to="{name: 'dapp-detail-meta', params: {slug: slug}}">Add this ÐApp's badges to your website</nuxt-link>

<nuxt-link @click.native="trackDappMetaClick(slug)" :to="{name: 'dapp-detail-meta', params: {slug: slug}}"><img :src="`https://badges.stateofthedapps.com/${slug}/${badge}`"></nuxt-link>

And many more...

</template>


<template>

</template>

<script>
export default {
  name: 'bundles'
}
</script>

<style scoped>

</style>

Add navigation and bundle display area.

<template>

    <BundleNav />

      <router-view></router-view>

</template>


<template>
	<div class="c-FormActions">
		<v-btn color="accent" class="c-FormActions__button" @click="$emit('save')">
			{{ $t('button.save') }}
		</v-btn>
		<v-btn text color="primary" class="c-FormActions__button" @click="$emit('reset')">
			{{ $t('button.reset') }}
		</v-btn>
	</div>
</template>

<script>
export default {
	name: 'FormActions'
}
</script>

<style lang="less">
.c-FormActions {
	text-align: center;

	&__button {
		margin-right: 16px;
	}
}
</style>
S

Allow hiding the reset button.

<template>
	<div class="c-FormActions">
		<v-btn color="accent" class="c-FormActions__button" @click="$emit('save')">
			{{ $t('button.save') }}
		</v-btn>
		<v-btn
			v-if="showReset" text color="primary"
			class="c-FormActions__button" @click="$emit('reset')"
		>
			{{ $t('button.reset') }}
		</v-btn>
	</div>
</template>

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

	props: {
		showReset: {
			type: Boolean,
			default: true
		}
	}
}
</script>

<style lang="less">
.c-FormActions {
	text-align: center;

	&__button {
		margin-right: 16px;
	}
}
</style>
S


<template>
  <datatable id="users-admin-table"
    data-url="/api/v1/users"
    data-path="users"
    :columns="tableConfig">
  </datatable>
</template>

Fix link issue on Users admin table


<template>
    <reveal  :disable-overlay="true" class="reveal">

            <cards v-depth="3">
                <cards-content class="profile">

                </cards-content>
                <cards-content class="scrollable">

                </cards-content>
                <cards-action>

                        <flat-button type="button" v-unreveal:click="" class="dialog-cancel-button" v-ripple></flat-button>
                        <flat-button type="button" v-unreveal:click="" class="dialog-confirm-button primary" v-ripple></flat-button>

                </cards-action>
            </cards>

    </reveal>
</template>

Update Confirmation Dialog to hide ID

<template>
    <reveal id="confirmationDialogforPlugin" :disable-overlay="true" class="reveal">

            <cards v-depth="3">
                <cards-content class="profile">

                </cards-content>
                <cards-content class="scrollable">

                </cards-content>
                <cards-action>

                        <flat-button type="button" v-unreveal:click="" class="dialog-cancel-button" v-ripple></flat-button>
                        <flat-button type="button" v-unreveal:click="" class="dialog-confirm-button primary" v-ripple></flat-button>

                </cards-action>
            </cards>

    </reveal>
</template>


<template>
    <multiselect class="SharpTags"
                 :value="value"
                 :options="options"
                 :placeholder="placeholder"
                 :tag-placeholder="createText"
                 :max="maxTagCount"
                 :taggable="creatable"
                 :close-on-select="false"

                 label="label"
                 multiple searchable hide-selected
                 selectLabel="" selectedLabel="" deselectLabel=""
                 @input="v=>$emit('input',v)"
                 @tag="handleNewTag">
        <template slot="maxElements">
            Maximum de {{maxTagCount}} éléments atteint
        </template>
    </multiselect>
</template>

<script>
    import Multiselect from 'vue-multiselect';

    export default {
        name:'SharpTags',
        components: {
            Multiselect
        },
        props : {
            value:Array,
            options:Array,
            placeholder:String,
            maxTagCount:Number,
            createText:String,
            creatable:true,
        },
        methods: {
            handleNewTag(val) {
                this.value.push({id:null,label:val});
            }
        }
    }
</script>

Fix tags remove not working

<template>
    <multiselect class="SharpTags"
                 :value="tags"
                 :options="indexedOptions"
                 :placeholder="placeholder"
                 :tag-placeholder="createText"
                 :max="maxTagCount"
                 :taggable="creatable"
                 :close-on-select="false"
                 track-by="internalId"
                 label="label"
                 multiple searchable hide-selected
                 selectLabel="" selectedLabel="" deselectLabel=""
                 @input="handleInput"
                 @tag="handleNewTag">
        <template slot="maxElements">
            Maximum de {{maxTagCount}} éléments atteint
        </template>
    </multiselect>
</template>

<script>
    import Multiselect from 'vue-multiselect';

    export default {
        name:'SharpTags',
        components: {
            Multiselect
        },
        props : {
            value:Array,
            options:Array,
            placeholder:String,
            maxTagCount:Number,
            createText:String,
            creatable:true,
        },
        data() {
            return {
                tags:[],
                lastIndex:0
            }
        },
        computed: {
            indexedOptions() {
                return this.patch(this.options);
            },
        },
        watch: {
            tags(tags) {
                if(this.lastIndex) {
                    this.$emit('input',tags.map(t =>({id:t.id, label:t.label})));
                }
            }
        },
        methods: {
            patch(array) {
                return array.map((o,i) => {
                    o.internalId = i;
                    return o;
                });
            },
            handleNewTag(val) {
                this.tags.push({id:null,label:val,internalId:this.lastIndex++});
            },
            handleInput(val) {
                this.tags = val;
            }
        },
        mounted() {
            this.tags = this.patch(this.value);
            this.lastIndex = this.options.length + this.tags.length;
        }
    }
</script>


<template>
  <flat-button
    level="primary"
    @click="click"
  >
    <i :class="hideIconClass" />
  </flat-button>
</template>

<script>
import FlatButton from 'app/components/flat-button.vue'

export default {
    'name': 'HideButton',
    'components': {
        'flat-button': FlatButton,
    },
    'props': {
        'value': {
            'type': Boolean,
            'default': false,
        },
    },
    'computed': {
        'hideIconClass': function() {
            return 'fa fa-' + (this.value ? 'plus' : 'minus')
        },
    },
    'methods': {
        'click': function() {
            this.$emit('input', !this.value)
        }
    }
}
</script>

Use chevrons for button to open and close processing sections not "+" and "-"

<template>
  <flat-button
    level="primary"
    @click="click"
  >
    <i :class="hideIconClass" />
  </flat-button>
</template>

<script>
import FlatButton from 'app/components/flat-button.vue'

export default {
    'name': 'HideButton',
    'components': {
        'flat-button': FlatButton,
    },
    'props': {
        'value': {
            'type': Boolean,
            'default': false,
        },
    },
    'computed': {
        'hideIconClass': function() {
            return 'fa fa-' + (this.value ? 'chevron-down' : 'chevron-up')
        },
    },
    'methods': {
        'click': function() {
            this.$emit('input', !this.value)
        }
    }
}
</script>


<template>
  <app-layout name="design">
    <app-menu brand="Lessy Design Guide" home="/design" slot="menu">
      <app-menu-link to="/design/grid">Grid</app-menu-link>
      <app-menu-link to="/design/typography">Typography</app-menu-link>
      <app-menu-link to="/design/colors">Colors</app-menu-link>
      <app-menu-link to="/design/visuals">Visuals</app-menu-link>
      <app-menu-link to="/design/components">Components</app-menu-link>
      <app-menu-link to="/design/wording">Wording</app-menu-link>
      <app-menu-link to="/" icon="home">Back to home</app-menu-link>
    </app-menu>

    <slot></slot>
  </app-layout>
</template>

Fix home menu link in design layout

<template>
  <app-layout name="design">
    <app-menu brand="Lessy Design Guide" home="/design" slot="menu">
      <app-menu-link to="/design/grid">Grid</app-menu-link>
      <app-menu-link to="/design/typography">Typography</app-menu-link>
      <app-menu-link to="/design/colors">Colors</app-menu-link>
      <app-menu-link to="/design/visuals">Visuals</app-menu-link>
      <app-menu-link to="/design/components">Components</app-menu-link>
      <app-menu-link to="/design/wording">Wording</app-menu-link>
      <app-menu-link to="/today" icon="home">Back to home</app-menu-link>
    </app-menu>

    <slot></slot>
  </app-layout>
</template>


<template>
	<router-link :to="newMessageRoute"
				 exact
				 v-tooltip.bottom="label">{{ label }}
	</router-link>
</template>

<script>
	export default {
		name: "Address",
		props: [
			'email',
			'label',
		],
		computed: {
			newMessageRoute () {
				return {
					name: 'message',
					params: {
						accountId: this.$route.params.accountId,
						folderId: this.$route.params.folderId,
						messageUid: 'new'
					}, query: {
						to: this.email
					}
				}
			}
		}
	}
</script>

Fix address tooltip to show the actual address and not the label

<template>
	<router-link :to="newMessageRoute"
				 exact
				 v-tooltip.bottom="email">{{ label }}
	</router-link>
</template>

<script>
	export default {
		name: "Address",
		props: [
			'email',
			'label',
		],
		computed: {
			newMessageRoute () {
				return {
					name: 'message',
					params: {
						accountId: this.$route.params.accountId,
						folderId: this.$route.params.folderId,
						messageUid: 'new'
					}, query: {
						to: this.email
					}
				}
			}
		}
	}
</script>


<template>

            <app-tracker :coin="coin" :visible="false" v-on:value-update="valueUpdate" v-on:tracker-delete="deleteTracker"></app-tracker>

</template>

Add key for Vue to track order of trackers


<template lang="pug">
ul.md-nav-tabs.nav.nav-tabs(role='tablist')
  nav-tab(v-if='!hasDefaultSlot' v-for='t in tabs', :key='t', :id='t.id', :name='t.name', :active='t.active', :icon='t.icon' @onTabClick='onTabClick')
  slot
</template>

<script>
import NavTab from './nav-tab'
import { EVENT_ON_TAB_CLICK } from './constants'

export default {
  name: 'nav-tabs',
  props: {
    tabs: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  components: {
    NavTab
  },
  computed: {
    hasDefaultSlot() {
      return !!this.$slots.default
    }
  },
  methods: {
    onTabClick(tabId) {
      let tab = this.tabs.find(t => t.id === tabId)
      tab.active = true
      this.tabs.forEach((tab) => {
        if (tab.id === tabId) {
          tab.active = true
          this.$emit(EVENT_ON_TAB_CLICK, tab || tabId)
        } else {
          tab.active = false
        }
      }, this)
    }
  }
}
</script>

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

Use :key='tab.id' instead of tab

<template lang="pug">
ul.md-nav-tabs.nav.nav-tabs(role='tablist')
  nav-tab(v-if='!hasDefaultSlot' v-for='t in tabs', :key='t.id', :id='t.id', :name='t.name', :active='t.active', :icon='t.icon' @onTabClick='onTabClick')
  slot
</template>

<script>
import NavTab from './nav-tab'
import { EVENT_ON_TAB_CLICK } from './constants'

export default {
  name: 'nav-tabs',
  props: {
    tabs: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  components: {
    NavTab
  },
  computed: {
    hasDefaultSlot() {
      return !!this.$slots.default
    }
  },
  methods: {
    onTabClick(tabId) {
      let tab = this.tabs.find(t => t.id === tabId)
      tab.active = true
      this.tabs.forEach((tab) => {
        if (tab.id === tabId) {
          tab.active = true
          this.$emit(EVENT_ON_TAB_CLICK, tab || tabId)
        } else {
          tab.active = false
        }
      }, this)
    }
  }
}
</script>

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


<template>

</template>

<script>
    export default {
        name: "skill-tag"
    }
</script>

<style scoped>

</style>

Add skill icons in tag.

<template>

      <farming-icon v-if="skill === 'farming'"/>
      <mining-icon v-if="skill === 'mining'"/>
      <foraging-icon v-if="skill === 'foraging'"/>
      <fishing-icon v-if="skill === 'fishing'"/>
      <combat-icon v-if="skill === 'combat'"/>

</template>


<template>

</template>

Add createVis property to .carto and .zip to override home behaviour


<template>
<router-link
  class="button"
  :to="path"
>
   0">

    {{ text }}

</router-link>
</template>

Improve button link widget when there is only icon

<template>
<router-link
  class="button"
  :to="path"
>
   0">

    0">
    {{ text }}

</router-link>
</template>


<template>

    <template v-if="!project.isStarted">
      <router-link
        v-if="canStartProject"
        :to="project.urlStart"
      >
        Start this project
      </router-link>

        Start this project

    </template>

      <form-group label="Started on">
        <static-field :value="project.startedAtLabel" />
      </form-group>
      <form-group label="Due on">
        <static-field :value="project.dueAtLabel" />
      </form-group>

{{ project.description }}

      Aucune description

</template>

Fix default value if there is no description

<template>

    <template v-if="!project.isStarted">
      <router-link
        v-if="canStartProject"
        :to="project.urlStart"
      >
        Start this project
      </router-link>

        Start this project

    </template>

      <form-group label="Started on">
        <static-field :value="project.startedAtLabel" />
      </form-group>
      <form-group label="Due on">
        <static-field :value="project.dueAtLabel" />
      </form-group>

{{ project.description }}

        There is no description for this project yet.
        <router-link :to="project.urlEdit">Edit?</router-link>

</template>


<template>

        © 2015-{{ currentYear }}

            Hiroto-K

</template>

Fix the footer coding styles


<template>

Example Component

                        I'm an example component!

</template>

Use mounted instead of ready


<template>

Welcome to Praelatus!

</template>

Make index page more useful

<template>

Welcome to Praelatus!

          Praelatus is an Open Source bug tracking and ticketing system.
          If you're new to Praelatus and are wondering how to get started
          you can view our User Guide.
          Otherwise just sign in or sign up and get cracking!

              <login></login>

              <login register="true"></login>

</template>


<template>

     {{ generateAvatar(person) }}

</template>

Use precomputed data to generate person avatars

<template>

     {{ person.initials }}

</template>


<template>

Blog

      <blog-preview :post="post"/>

</template>

Remove slash from meta to try and fix blog page


<style>
  @font-face {
    font-family: 'Avenir Next LT Pro';
    font-style: normal;
    src: url(/static/fonts/AvenirNextLTPro-Regular.otf) format('opentype'), local('Avenir Next LT Pro');
  }

  body {
    font-family: "Avenir Next LT Pro", Helvetica, Arial, sans-serif;
    padding: 0 20px;
  }

  .container {
    margin-top: 70px;
  }

  .container h3,
  .container h4 {
    text-transform: uppercase;
  }
</style>

<template lang="pug">
  div
    nav-bar
    div.container
      router-view
</template>

<script>
  import Navbar from "./navbar.vue"
  export default {
    components: {
      "nav-bar": Navbar
    }
  }
</script>

Hide nav bar in login page

<style>
  @font-face {
    font-family: 'Avenir Next LT Pro';
    font-style: normal;
    src: url(/static/fonts/AvenirNextLTPro-Regular.otf) format('opentype'), local('Avenir Next LT Pro');
  }

  body {
    font-family: "Avenir Next LT Pro", Helvetica, Arial, sans-serif;
    padding: 0 20px;
  }

  .container {
    margin-top: 70px;
  }

  .container h3,
  .container h4 {
    text-transform: uppercase;
  }
</style>

<template lang="pug">
  div
    nav-bar(v-if="this.$route.path !== '/login'")
    div.container
      router-view
</template>

<script>
  import Navbar from "./navbar.vue"
  export default {
    components: {
      "nav-bar": Navbar
    }
  }
</script>


<template>
  <LayoutMain>
    <div class="page-dapps-detail">
      <DappDetail :dapp="dapp" :direct="direct"/>
    </div>
  </LayoutMain>
</template>

<script>
import axios from '~/helpers/axios'
import DappDetail from '~/components/DappDetail'
import * as constants from '~/helpers/constants'
import LayoutMain from '~/components/LayoutMain'

export default {
  data () {
    return {
      dapp: constants.dappSchema,
      direct: false
    }
  },
  asyncData ({ store, params, error }) {
    return axios
      .get('dapps/' + params.slug)
      .then(response => {
        const data = response.data
        const dapp = data.item
        if (!Object.keys(dapp).length > 0) {
          error({ statusCode: 404 })
        }
        return {
          dapp
        }
      })
  },
  head () {
    return {
      title: this.dapp.name + ' — State of the ÐApps',
      meta: [
        { hid: 'description', name: 'description', content: this.dapp.teaser }
      ]
    }
  },
  components: {
    DappDetail,
    LayoutMain
  }
}
</script>

Add og image to dapp detail

<template>
  <LayoutMain>
    <div class="page-dapps-detail">
      <DappDetail :dapp="dapp" :direct="direct"/>
    </div>
  </LayoutMain>
</template>

<script>
import axios from '~/helpers/axios'
import DappDetail from '~/components/DappDetail'
import * as constants from '~/helpers/constants'
import LayoutMain from '~/components/LayoutMain'

export default {
  data () {
    return {
      dapp: constants.dappSchema,
      direct: false
    }
  },
  asyncData ({ store, params, error }) {
    return axios
      .get('dapps/' + params.slug)
      .then(response => {
        const data = response.data
        const dapp = data.item
        if (!Object.keys(dapp).length > 0) {
          error({ statusCode: 404 })
        }
        return {
          dapp
        }
      })
  },
  head () {
    return {
      title: this.dapp.name + ' — State of the ÐApps',
      meta: [
        { hid: 'description', name: 'description', content: this.dapp.teaser },
        { hid: 'image', property: 'og:image', content: this.dapp.productImage }
      ]
    }
  },
  components: {
    DappDetail,
    LayoutMain
  }
}
</script>


<template>
  <span class="material-icons">
    {{ icon }}
  </span>
</template>

<script>
import themeClassMixin from '../base/themeClassMixin.js'

export default {
  mixins: [themeClassMixin],
  props: {
    icon: {
      type: String,
      required: true
    }
  }
}
</script>

Change tag name to <i>

<template>
  <i class="material-icons">
    {{ icon }}
  </i>
</template>

<script>
import themeClassMixin from '../base/themeClassMixin.js'

export default {
  mixins: [themeClassMixin],
  props: {
    icon: {
      type: String,
      required: true
    }
  }
}
</script>


<template>

          Stardew Community Checklist

          Track Your Progress on the Community Center!

        <item-card/>

</template>

Remove background from welcome for better look.


<template>
  <div class="page">

    <opt v-model="val">Упрощённая схема цветов для зачётов</opt>
    <opt disabled>Здравый смысл у преподавателей</opt>
    <opt disabled>Повышенная стипендия</opt>
    <opt disabled>ПМ лучше ИТ</opt>

  </div>
</template>

<script>
import Opt from './Option'

export default {
  name: 'settings',
  components: { Opt },
  data: () => ({ val: false })
}
</script>

<style scoped>
  .page {
    margin: 10px;
  }
</style>

Add exit button to settings

<template>

    <opt v-model="val">Упрощённая схема цветов для зачётов</opt>
    <opt disabled>Здравый смысл у преподавателей</opt>
    <opt disabled>Повышенная стипендия</opt>
    <opt disabled>ПМ лучше ИТ</opt>

      <button class="exit">
        Выйти из аккаунта
      </button>

</template>


<template>

        <router-link :to="link" v-if="link">
          {{ username }}
        </router-link>
        <template v-else>{{ username }}</template>

{{ description }}

      <slot></slot>

</template>

Fix user widget background styling


<template>

</template>

Use article frontmatter title as page heading

<template>

{{article.title}}

</template>


<template>
    <a :is="componentType" class="dropdown-item" :to="to" :href="hrefString"  @click="click">
        <slot></slot>
    </a>
</template>

<script>
    import Link from './link.vue';

    export default {
        extends: Link
    };
</script>

Change the component type to button if 'href' and 'to' props are not defined

<template>
    <a :is="itemType" class="dropdown-item" :to="to" :href="hrefString"  @click="click">
        <slot></slot>
    </a>
</template>

<script>
    import Link from './link.vue';

    export default {
        extends: Link,
        computed: {
            itemType() {
                return (this.href || this.to) ? this.componentType : 'button';
            }
        }
    };
</script>


<template>

  {{ label }}

      <select
        ref="select"
        @change="updateValue"
      >
        <option
          v-for="option in options"
          :value="option.value || option.label"
          :selected="value === option.value"
        >
          {{ $t(localeKeyPrefix + option.label.toLowerCase()) }}
        </option>
      </select>

</template>

Make translation optional in combobox options

<template>

  {{ label }}

      <select
        ref="select"
        @change="updateValue"
      >
        <option
          v-for="option in options"
          :value="option.value || option.label"
          :selected="value === option.value"
        >
          {{ getOptionLabel(option) }}
        </option>
      </select>

</template>


<template>
<div class="start_over">
  <button @click="reset();$awa( { 'referrerUri': 'https://preview.pwabuilder.com/manifest/generator-startover-trigger' }); class="pwa-button pwa-button--simple">
    {{ $t('publish.start_over') }}
  </button>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Action, namespace } from 'vuex-class';
import Component from 'nuxt-class-component';

import * as publish from '~/store/modules/publish';

const PublishAction = namespace(publish.name, Action);

@Component()
export default class extends Vue {
  @PublishAction resetAppData;

  public reset(): void {
    this.resetAppData();
    this.$router.push({
        path: this.$i18n.path('')
    });
  }
}
</script>

<style lang="scss" scoped>
@import '~assets/scss/base/variables';

.start_over {
  background-color: $color-foreground-brighter;
  display: block;
  padding: 2rem;
  text-align: center;
}
</style>

Fix Start Over button. Typo error.

<template>
<div class="start_over">
  <button @click="reset();$awa( { 'referrerUri': 'https://preview.pwabuilder.com/manifest/generator-startover-trigger' });" class="pwa-button pwa-button--simple">
    {{ $t('publish.start_over') }}
  </button>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Action, namespace } from 'vuex-class';
import Component from 'nuxt-class-component';

import * as publish from '~/store/modules/publish';

const PublishAction = namespace(publish.name, Action);

@Component()
export default class extends Vue {
  @PublishAction resetAppData;

  public reset(): void {
    this.resetAppData();
    this.$router.push({
        path: this.$i18n.path('')
    });
  }
}
</script>

<style lang="scss" scoped>
@import '~assets/scss/base/variables';

.start_over {
  background-color: $color-foreground-brighter;
  display: block;
  padding: 2rem;
  text-align: center;
}
</style>


Add info notification that says site is under construction

<template>

      Site is under construction. Please visit
      zorexsalvo.com.

</template>


<template>

        <slot>{{content}}</slot>

</template>

Add new prop to select the mount element


<template>

      {{ title }}

    <slot />

</template>

Add support for card actions

<template>
  <v-card
    v-if="true"
    flat
  >
    <v-card-title>

        {{ title }}

      <v-spacer />
      <slot name="actions" />
    </v-card-title>
    <v-card-text>
      <slot />
    </v-card-text>
  </v-card>

        {{ title }}

      <template v-if="$slots.actions">
        <v-spacer />
        <slot name="actions" />
      </template>

    <slot />

</template>


<template>

    <fa icon="volume-up" fixed-width />
    <n-link :to="linkTo" :title="player.title" class="text-white px-2">
      {{ title() }}
    </n-link>

      <fa icon="times" />

      {{ $app.name }}

</template>

Change app name text color on footer


<template lang="html">

    <template v-if="hasBookmarks">
      <search-item v-for="bookmark in bookmarks"
        :key="bookmark.id"
        :bookmark="bookmark"></search-item>
    </template>

No matches found

</template>

Adjust max results list height


<template>

TRANSITION-CONNECT

</template>

Set z-index higher then content.


<template>

        There exists {{ numberOfResults }} {{ collective }} in the database
        We found {{ numberOfResults }} {{ collective }} matching your needs

</template>

Add message when no matching results

<template>

        {{infoMessage}}

</template>


<template>

        {{ title }}

</template>

Remove bold on title text

<template>

        {{ title }}

</template>


<template>
  <header class="dummy-header">
    <img svg-inline src="../assets/icons/common/cartoLogo-white.svg" />
  </header>
</template>

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

<style scoped lang="scss">
@import 'new-dashboard/styles/variables';

.dummy-header {
  display: flex;
  padding: 0 64px;
  height: 60px;
  align-items: center;
  background-color: $primary-color;

  @media (max-width: $layout-tablet) {
    padding: 0 24px;
  }

  @media (max-width: $layout-mobile) {
    padding: 0 16px;
  }
}
</style>

Fix hound and add carto.com link

<template>
  <header class="dummy-header">
    <a href="https://carto.com">
      <img svg-inline src="../assets/icons/common/cartoLogo-white.svg" />
    </a>
  </header>
</template>

<script>
export default {
  name: 'DummyHeader'
};
</script>

<style scoped lang="scss">
@import 'new-dashboard/styles/variables';

.dummy-header {
  display: flex;
  padding: 0 64px;
  height: 60px;
  align-items: center;
  background-color: $primary-color;

  @media (max-width: $layout-tablet) {
    padding: 0 24px;
  }

  @media (max-width: $layout-mobile) {
    padding: 0 16px;
  }
}
</style>


<template>

  <repo-tab v-for="tab in openedFiles" :key="tab.id" :tab="tab" :class="{'active' : tab.active}" @xclicked="xclicked"/>

</template>

Rename x clicked to be consisten.


<template>

      <router-link :to="getAnchorLink(anchor.hash)">
        {{ anchor.label }}
      </router-link>

</template>

Remove comment closer to the its code.


<template>

      Site is under construction. Please visit
      zorexsalvo.com.

        I code in Python/Django/Flask and lately I've been doing javascript also. I'm not a design-
        guy so I'm usually assigned to do backend stuffs.

I'm in continuous loop of learni
        ng and experimenting new technologies ergo my ever-presence on many tech conferences, hacka
        thons, and codecamps.

I do blogs too. I write about tech, hackathon, experiences,
        events, anything random that comes to mind.

</template>

Add media-query for the introduction


<template>

CS3244 Project dsajdakhdsajkdhaajskdhasjdhasjhdjashdjahdajhdjahdjkahsdajshdjahdjahskajhdksahdkajshdksjahdkajshdsadajshdkajsdas hdjask dakshdjaksd kasdjkashdkjsahdjkhas dhaskjdkjsdjsdjkahskjhsadajk d

</template>

Enable redirect to editor/viewer page on dblclick

<template>

    <button class="button-folder">

CS3244 Project dsajdakhdsajkdhaajskdhasjdhasjhdjashdjahdajhdjahdjkahsdajshdjahdjahskajhdksahdkajshdksjahdkajshdsadajshdkajsdas hdjask dakshdjaksd kasdjkashdkjsahdjkhas dhaskjdkjsdjsdjkahskjhsadajk d

    </button>

</template>


<template>

    <navbar></navbar>

      <codemirror v-model="content" @changed="codeChange" >
      </codemirror>

{{content}}

</template>

Fix codemirror and viewer width

<template>

    <navbar></navbar>

          <codemirror v-model="content" >
          </codemirror>

{{content}}

</template>


<template>
  <a-entity daydream-controls></a-entity>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      isTouching: 0, // 0: false, 1: first touch, 2: moving
      touchStart: {
        x: 0, z: 0,
      },
      touchDiff: {
        x: 0, z: 0,
      }
    };
  },
  mounted() {
    this.$el.addEventListener('touchend', (event) => {
      this.isTouching = 0;
    });
    this.$el.addEventListener('touchstart', (event) => {
      this.isTouching = 1;
    });
    this.$el.addEventListener('axismove', (event) => {
      if (event.detail.axis[0] + event.detail.axis[1] === 0) return;

      if (this.isTouching === 1) {
        this.touchStart.x = event.detail.axis[0];
        this.touchStart.z = event.detail.axis[1];
        this.isTouching = 2;
      }

      this.touchDiff.x = event.detail.axis[0] - this.touchStart.x;
      this.touchDiff.z = event.detail.axis[1] - this.touchStart.z;

      this.$emit('input', {
        x: this.value.x + this.touchDiff.x,
        y: this.value.y,
        z: this.value.z + this.touchDiff.z,
      });

      this.touchStart.x = event.detail.axis[0];
      this.touchStart.z = event.detail.axis[1];
    });
  },
}
</script>

Implement movement by mapping axis distance to speed

<template>
  <a-entity daydream-controls></a-entity>
</template>

<script>

const MAX_SPEED = 0.1;
let animationRequestId = null;

export default {
  props: ['value'],
  data() {
    return {
      speed: {
        x: 0,
        y: 0,
        z: 0,
      }
    };
  },
  mounted() {
    const move = () => {
      this.$emit('input', {
        x: this.value.x + this.speed.x,
        y: this.value.y + this.speed.y,
        z: this.value.z + this.speed.z,
      });
      console.log(this.speed.x, this.speed.y, this.speed.z);
      animationRequestId = window.requestAnimationFrame(move);
    };

    this.$el.addEventListener('touchstart', (event) => {
      animationRequestId = window.requestAnimationFrame(move);

    });
    this.$el.addEventListener('touchend', (event) => {
      window.cancelAnimationFrame(animationRequestId);
    });
    this.$el.addEventListener('axismove', (event) => {
      this.speed.x = MAX_SPEED * event.detail.axis[0];
      this.speed.z = MAX_SPEED * event.detail.axis[1];
    });
  },
}
</script>


<template>

Home Page

This is the home page.

</template>

Load articles and list on page.

<template>

Home Page

These are the articles:

{{ article.title }}

{{ article.caption }}

      <nuxt-link :to="article._path">
        Read
      </nuxt-link>

</template>


<template>
    <button
            type="button"
            @click="$emit('click', $event)"
            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
            :class="classes">
        <slot/>
    </button>
</template>

<script>
export default {
    name: "AppButton",
    props: {
        floating: Boolean
    },
    computed: {
        classes() {
            return {
                'mdl-button--fab': this.floating
            }
        }
    }
}
</script>

<style scoped>

</style>

Add more props to customize button

<template>
    <button
            type="button"
            @click="$emit('click', $event)"
            class="mdl-button mdl-js-button mdl-js-ripple-effect"
            :class="classes">
        <slot/>
    </button>
</template>

<script>
export default {
    name: "AppButton",
    props: {
        floating: Boolean,
        toolbar: Boolean,
        flat: Boolean
    },
    computed: {
        classes() {
            return {
                'mdl-button--fab': this.floating,
                'mdl-button--icon': this.toolbar,
                'mdl-button--raised': !this.flat
            }
        }
    }
}
</script>

<style scoped>

</style>


<template>

{{ name }}

      <slot></slot>

</template>

Fix alignment of list-group-header on mobile


<template>
  <div id="input-bar">
    > <input type="text" id="input-text" placeholder="_"
     v-model="inputText" @keypress.enter="submit"/>
  </div>
</template>

<script>
export default {
  computed: {
    inputText: {
      get() {
        return this.$store.getters.inputText;
      },
      set(newValue) {
        this.$store.dispatch("setInputText", newValue);
      }
    }
  },
  methods: {
    submit() {
      if (this.inputText !== "") {
        this.$store.dispatch("enterCommand", this.inputText);
      }
    }
  }
};
</script>

<style scoped>
#input-bar {
  padding: 4px 10px 4px 10px;
  color: var(--text);
  background-color: var(--ui-darker);
  font-family: "Ubuntu Mono", monospace;
}

#input-text {
  width: 92%;
  resize: auto;
  padding: 4px 0px 4px 0px;
  border-style: none;
  outline: none;
  background-color: var(--ui-darker);
  /* Text */
  color: var(--text);
  font-size: 0.95em;
  font-family: "Ubuntu Mono", monospace;
  caret-color: var(--text-blur);
}
</style>

Add non-whitespace test on input and send it to game plugin

<template>
  <div id="input-bar">
    > <input type="text" id="input-text" placeholder="_"
     v-model="inputText" @keypress.enter="submit"/>
  </div>
</template>

<script>
export default {
  computed: {
    inputText: {
      get() {
        return this.$store.getters.inputText;
      },
      set(newValue) {
        this.$store.dispatch("setInputText", newValue);
      }
    }
  },
  methods: {
    submit() {
      // Only submit if there are non-whitespace chars
      if (!/^\s*$/.test(this.inputText)) {
        let input = this.inputText.trim();
        this.$store.dispatch("enterCommand", input);
        this.$game.receiveInput(input);
      }
    }
  }
};
</script>

<style scoped>
#input-bar {
  padding: 4px 10px 4px 10px;
  color: var(--text);
  background-color: var(--ui-darker);
  font-family: "Ubuntu Mono", monospace;
}

#input-text {
  width: 92%;
  resize: auto;
  padding: 4px 0px 4px 0px;
  border-style: none;
  outline: none;
  background-color: var(--ui-darker);
  /* Text */
  color: var(--text);
  font-size: 0.95em;
  font-family: "Ubuntu Mono", monospace;
  caret-color: var(--text-blur);
}
</style>


<template>

  <core-modal
    title="Please choose a source..."
    :enablebgclickcancel="false"
    @cancel="cancelImportExportWizard"
  >

        <icon-button text="Internet" @click="showImportNetworkWizard">
          <svg src="./world.svg"></svg>
        </icon-button>
        <icon-button text="Local Drives" @click="showImportLocalWizard">
          <svg src="./storage.svg"></svg>
        </icon-button>

        <button @click="cancelImportExportWizard">
          Cancel
        </button>

  </core-modal>

</template>

Add div around the 2 icon buttons


<template lang='pug'>
footer
  small
    | Released under the #[a(href='https://opensource.org/licenses/MIT') MIT License]
    br
    | Copyright © 2016-#{new Date().getFullYear()} Chris Nguyen
</template>

<style scoped lang='scss'>
@import 'colors';

footer {
  padding: 2rem;
  color: white;
  background: $vue-green;
  text-align: center;

  a {
    color: white;
    font-weight: 700;
    text-decoration: none;
  }
}
</style>

Update MIT link to open in new tab

<template lang='pug'>
footer
  small
    | Released under the #[a(href='https://opensource.org/licenses/MIT', target='_blank') MIT License]
    br
    | Copyright © 2016-#{new Date().getFullYear()} Chris Nguyen
</template>

<style scoped lang='scss'>
@import 'colors';

footer {
  padding: 2rem;
  color: white;
  background: $vue-green;
  text-align: center;

  a {
    color: white;
    font-weight: 700;
    text-decoration: none;
  }
}
</style>


<template>

        <slot></slot>
        <button v-clipboard:copy="copyText"
            v-clipboard:success="onCopySuccess"
            v-clipboard:error="onCopyError" aria-label="copy button" title="copy this">
        </button>
        <button aria-label="edit button" v-if="editButton" @click="$emit('edit')" title="edit this">

        </button>

</template>

Switch edit slug button icon to fa-pencil-alt


<template>

I'm a app: {{ message }}

    <Sample></Sample>

</template>

Remove bootstrap usage on sample vue script


<template>

        <button
          class="button is-inverted"
          title="Toggle sidebar"
          @click="$emit('toggleSidebar')">

        </button>

</template>

Fix topbar left and right positioning


<template>
  <app name="page-index">

              Are they calling back from beyond the cloud?

            Let's find out!

  </app>
</template>

Clean up the index page dom


<template>

  <button aria-label="Edit annotation"
          v-bind:style="{right: offsetRight + 'px'}"
          @click.prevent="$refs.menu.open">✎</button>
  <ContextMenu ref="menu">

<slot></slot>

  </ContextMenu>

</template>

Use a ref instead of manual js access

<template>

  <button ref="button"
          aria-label="Edit annotation"
          v-bind:style="{right: offsetRight + 'px'}"
          @click.prevent="$refs.menu.open">✎</button>
  <ContextMenu ref="menu">

<slot></slot>

  </ContextMenu>

</template>


<template>
  <message
    heading="Welcome"
    :name="messageKey"
    :ga-label="gaLabel"
    :display="{ onGrayMobileBg: true }"
    @setMessageSeen="$emit('setMessageSeen')"
  >
    <template v-slot:icon>
      <icon name="bell" :display="{ size: 's' }" />
    </template>
    <template v-slot:content>

          Thanks for creating your Texas Tribune account! You can use this login
          to edit your contact information, comment on texastribune.org stories,
          and view donation or subscription history. Soon, you'll also be able
          to update your newsletter preferences and credit card information.

    </template>
  </message>
</template>

Remove reference to newsletter and credit card details

<template>
  <message
    heading="Welcome"
    :name="messageKey"
    :ga-label="gaLabel"
    :display="{ onGrayMobileBg: true }"
    @setMessageSeen="$emit('setMessageSeen')"
  >
    <template v-slot:icon>
      <icon name="bell" :display="{ size: 's' }" />
    </template>
    <template v-slot:content>

          Thanks for creating your Texas Tribune account! You can use this login
          to edit your contact information, comment on texastribune.org stories,
          and view donation or subscription history.

    </template>
  </message>
</template>


<template>

        <edit-form-buttons
          :is-confidential="isConfidential"
          :update-confidential-attribute="updateConfidentialAttribute"
        />

</template>

Fix dropdown open to show in confidential edit form


<template>
  <input type="text" :placeholder="placeholder" :value="value" @input="onInput">
</template>

<script>
import Flatpickr from 'flatpickr'

export default {
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default: () => {}
    },
    value: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      fp: null
    }
  },
  watch: {
    options (opt, oldOpt) {
      for (let o in opt) {
        if (opt[o] !== oldOpt[o]) {
          this.fp.set(o, opt[o])
        }
      }
    }
  },
  mounted () {
    this.fp = new Flatpickr(this.$el, this.options)
    this.$emit('FlatpickrRef', this.fp)
  },
  destroyed () {
    this.fp = null
  },
  methods: {
    onInput (e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>

Fix alt input not update with value

<template>
  <input type="text" :placeholder="placeholder" :value="value" @input="onInput">
</template>

<script>
import Flatpickr from 'flatpickr'

export default {
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default: () => {}
    },
    value: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      fp: null
    }
  },
  watch: {
    value (val) {
      this.fp.setDate(val)
    },
    options (opt, oldOpt) {
      for (let o in opt) {
        if (opt[o] !== oldOpt[o]) {
          this.fp.set(o, opt[o])
        }
      }
    }
  },
  mounted () {
    this.fp = new Flatpickr(this.$el, this.options)
    this.$emit('FlatpickrRef', this.fp)
  },
  destroyed () {
    this.fp = null
  },
  methods: {
    onInput (e) {
      this.$emit('input', e.target.value)
    }
  }
}
</script>


<template>

    <button-tab>
      <button-tab-item>Today</button-tab-item>
      <button-tab-item selected>This Week</button-tab-item>
      <button-tab-item>This Month</button-tab-item>
    </button-tab>

    <button-tab>
      <button-tab-item selected>文章订阅</button-tab-item>
      <button-tab-item>商品订阅</button-tab-item>
    </button-tab>

</template>

Add an example with red dot

<template>

    <button-tab>
      <button-tab-item>Today</button-tab-item>
      <button-tab-item selected>This Week</button-tab-item>
      <button-tab-item>This Month</button-tab-item>
    </button-tab>

    <button-tab>
      <button-tab-item selected>文章订阅</button-tab-item>
      <button-tab-item>商品订阅</button-tab-item>
    </button-tab>

    <divider>Red Dot</divider>
    <button-tab>
      <button-tab-item selected>All Message</button-tab-item>
      <button-tab-item>New Message</button-tab-item>
    </button-tab>

</template>


<template>

			<button type="button" :id="menu.new.id" :class="menu.new.icon" @click="menu.new.action">{{menu.new.text}}</button>

			<navigation-item v-for="item in menu.items" :item="item" :key="item.key" />

				<button class="settings-button"
						data-apps-slide-toggle="#app-settings-content"
				>{{t('settings', 'Settings')}}</button>

				<slot name="settings-content"></slot>

</template>

Hide app navigation settings when not provided


<template>

        <transition
            enter-class="SharpViewPanel--collapsed"
            enter-active-class="SharpViewPanel--expanding"
            enter-to-class="SharpViewPanel--expanded"
            leave-class="SharpViewPanel--expanded"
            leave-active-class="SharpViewPanel--collapsing"
            leave-to-class="SharpViewPanel--collapsed"
        >
            <template v-if="visible">

            </template>
        </transition>

</template>

Allow downloading in command view iframe


<template>

Spellbook

{{ spell }}

</template>

Copy cantrips instead of directly cite them


<style lang="scss" scoped>
.video-wrapper {
  margin-top: 2rem;
}
.video-wrapper iframe {
  min-height: 360px;
  width: 100%;

  @include mobile {
    min-height: 230px;
  }
}
</style>

<template>
  <div class="video-wrapper">
    <iframe src="https://player.vimeo.com/video/323205772" frameborder="0"
            webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>
  </div>
</template>

Switch to official youtube stream

<style lang="scss" scoped>
.video-wrapper {
  margin-top: 2rem;
}
.video-wrapper iframe {
  min-height: 360px;
  width: 100%;

  @include mobile {
    min-height: 230px;
  }
}
</style>

<template>
  <div class="video-wrapper">
    <iframe src="https://www.youtube-nocookie.com/embed/Z94bOTBGLzM" frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>
  </div>
</template>


<template>

{{ restaurant_info.name }}
    (map)

    {{ entry.dish }}

</template>

Add / to restaurant request


<template>

            {{header}}

                    test

section bla bla

section bla bla

section bla bla

section bla bla

section bla bla

section bla bla

section bla bla

section bla bla

section bla bla

section bla bla

section bla bla

section bla bla

section bla bla

section bla bla

section bla bla

section bla bla

section bla bla

section bla bla

section bla bla

                <button>Adicionar...</button>

</template>

Set a prop in the list component in order to receive card data from the board Draw a listitem for each card in the data received from parent

<template>

            {{header}}

{{card}}

                <button>Adicionar...</button>

</template>


<template>

		<app-page-header :cover-media-item="coverMediaItem" cover-max-height="250">
			<router-link :to="{ name: 'dash.stickers.overview' }">

					<translate>Your Stickers</translate>

			</router-link>

					<translate>
						Marvel at your collection of beautiful stickers.
					</translate>

		</app-page-header>

		<router-view />

</template>

Revert "fix cover max breaking build"

<template>

		<app-page-header :cover-media-item="coverMediaItem" :cover-max-height="250">
			<router-link :to="{ name: 'dash.stickers.overview' }">

					<translate>Your Stickers</translate>

			</router-link>

					<translate>
						Marvel at your collection of beautiful stickers.
					</translate>

		</app-page-header>

		<router-view />

</template>


<template>

Facilities Configuration

Configure and change different Facility settings here.

Your current Facility

        {{ currentFacilityName }}

Facility Settings

</template>

Add markup for settings checklist

<template>

Facilities Configuration

Configure and change different Facility settings here.

Your current Facility

        {{ currentFacilityName }}

Facility Settings

        <ui-checkbox box-position="right">
          Allow users to edit their username
        </ui-checkbox>
        <ui-checkbox box-position="right">
          Allow users to edit their full name
        </ui-checkbox>
        <ui-checkbox box-position="right">
          Allow users to change their password when logged in
        </ui-checkbox>
        <ui-checkbox box-position="right">
          Allow users to delete their account
        </ui-checkbox>
        <ui-checkbox box-position="right">
          Permit users to sign-up on this device
        </ui-checkbox>
        <ui-checkbox box-position="right">
          Require users to log-in on this device
        </ui-checkbox>

</template>


<template>

        {{ $tc('print.program.title') }}: {{ $tc('entity.period.name') }}
        {{ period.description }}

    <program-day
      v-for="day in days"
      :key="'day' + day.id"
      :day="day"
      :show-daily-summary="showDailySummary"
      :show-activities="showActivities"
      :index="index"
    />

</template>

Use the more elegant way of querying the period's content nodes, now that it's available


<template>
  <button class="wizard-btn" tabindex="-1">
    <slot></slot>
  </button>
</template>
<script>
  export default {}
</script>
<style>
</style>

Add explicit button type to button component

<template>
  <button class="wizard-btn" tabindex="-1" type="button">
    <slot></slot>
  </button>
</template>
<script>
  export default {}
</script>
<style>
</style>


<template>

      <slot name="toolbar-start"></slot>

      <slot name="toolbar-end"></slot>
      <q-toolbar-item v-for="item in items" :key="item.id" :isActive="item.isActive" :icon="item.icon" :label="item.label"></q-toolbar-item>

</template>

Change to use items slot instead of prop

<template>

      <slot name="toolbar-start"></slot>

      <slot name="toolbar-end"></slot>

</template>


<template>

</template>

Replace Not Push History on Redirect Component


<template>
  <b-field v-if="isWrapped" v-bind="properties">
    <slot></slot>
  </b-field>
  <div v-else>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    props: {
      isWrapped: {
        type: Boolean,
        default: false
      },
      properties: Object
    }
  }
</script>

Edit structure of field wrapper

<template>
  <div class="form-field-wrapper">
    <b-field v-if="isWrapped" v-bind="properties">
      <slot></slot>
    </b-field>
    <slot v-else></slot>
  </div>
</template>

<script>
  export default {
    props: {
      isWrapped: {
        type: Boolean,
        default: false
      },
      properties: Object
    }
  }
</script>


<template>
<section class="page page--welcome">
  <Welcome />
  <MapsSection class="section" />
  <DatasetsSection class="section section--noBorder" />
  <QuotaSection></QuotaSection>
</section>
</template>

<script>
import Welcome from './WelcomeSection/Welcome.vue';
import MapsSection from './MapsSection/MapsSection.vue';
import DatasetsSection from './DatasetsSection/DatasetsSection.vue';
import QuotaSection from './QuotaSection/QuotaSection.vue';
import { sendMetric, MetricsTypes } from 'new-dashboard/core/metrics';

export default {
  name: 'Home',
  components: {
    Welcome,
    MapsSection,
    DatasetsSection,
    QuotaSection
  },
  beforeRouteEnter (to, from, next) {
    sendMetric(MetricsTypes.VISITED_PRIVATE_PAGE, { page: 'dashboard' });
    next();
  },
  beforeRouteLeave (to, from, next) {
    this.$store.dispatch('datasets/resetFilters');
    this.$store.dispatch('maps/resetFilters');
    next();
  }
};
</script>

<style scoped lang="scss">
@import 'stylesheets/new-dashboard/variables';

.page--welcome {
  padding: 64px 0 0;
}
</style>

Send visited dashboard page only when is first time visiting dashboard

<template>
<section class="page page--welcome">
  <Welcome />
  <MapsSection class="section" />
  <DatasetsSection class="section section--noBorder" />
  <QuotaSection></QuotaSection>
</section>
</template>

<script>
import Welcome from './WelcomeSection/Welcome.vue';
import MapsSection from './MapsSection/MapsSection.vue';
import DatasetsSection from './DatasetsSection/DatasetsSection.vue';
import QuotaSection from './QuotaSection/QuotaSection.vue';
import { sendMetric, MetricsTypes } from 'new-dashboard/core/metrics';

export default {
  name: 'Home',
  components: {
    Welcome,
    MapsSection,
    DatasetsSection,
    QuotaSection
  },
  created () {
    if (this.isFirstTimeViewingDashboard) {
      sendMetric(MetricsTypes.VISITED_PRIVATE_PAGE, { page: 'dashboard' });
    }
  },
  beforeRouteLeave (to, from, next) {
    this.$store.dispatch('datasets/resetFilters');
    this.$store.dispatch('maps/resetFilters');
    next();
  },
  computed: {
    isFirstTimeViewingDashboard () {
      return this.$store.state.config.isFirstTimeViewingDashboard;
    }
  }
};
</script>

<style scoped lang="scss">
@import 'stylesheets/new-dashboard/variables';

.page--welcome {
  padding: 64px 0 0;
}
</style>


<template>
    <reveal id="confirmationDialogforPlugin" :disable-overlay="true" class="reveal">

            <cards v-depth="3">
                <cards-content class="profile">

                </cards-content>
                <cards-content class="scrollable">

                </cards-content>
                <cards-action>

                        <flat-button type="button" v-unreveal:click="" class="dialog-cancel-button" v-ripple></flat-button>
                        <flat-button type="button" v-unreveal:click="" class="dialog-confirm-button primary" v-ripple></flat-button>

                </cards-action>
            </cards>

    </reveal>
</template>

Fix confirmation dialog cannot click


<template>
  <div id="player-inventory">
    <!-- At some point this will show player inventory, but for now it will show position -->
    Player position:
    {{playerPos.x}},{{playerPos.y}}
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    playerPos() {
      return this.$store.getters.playerPos;
    },
  },
};
</script>

<style>
#player-inventory {
  padding: 10px;
  overflow-y: auto;
  color: var(--text-blur);
  background-color: var(--ui-darker);
  border-color: var(--ui-border);
  font-family: "Ubuntu Mono", monospace;
  font-size: 0.85em;
  white-space: pre-wrap;
}

#player-inventory::-webkit-scrollbar {
  width: 8px;
}

#player-inventory::-webkit-scrollbar-track {
  background-color: var(--ui-darker);
}

#player-inventory::-webkit-scrollbar-thumb {
  background-color: var(--ui-border);
}
</style>

Stop errors before game starts

<template>
  <div id="player-inventory">
    <!-- At some point this will show player inventory, but for now it will show position -->
    Player position:
    {{playerPos.x}},{{playerPos.y}}
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    playerPos() {
      const pos = this.$store.getters.playerPos;
      return pos ? pos : { x: 0, y: 0 };
    },
  },
};
</script>

<style>
#player-inventory {
  padding: 10px;
  overflow-y: auto;
  color: var(--text-blur);
  background-color: var(--ui-darker);
  border-color: var(--ui-border);
  font-family: "Ubuntu Mono", monospace;
  font-size: 0.85em;
  white-space: pre-wrap;
}

#player-inventory::-webkit-scrollbar {
  width: 8px;
}

#player-inventory::-webkit-scrollbar-track {
  background-color: var(--ui-darker);
}

#player-inventory::-webkit-scrollbar-thumb {
  background-color: var(--ui-border);
}
</style>