<commit_before>import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import * as View from '!view!./expand.html?style=./expand.styl';

@View
@Component({
	name: 'expand',
})
export class AppExpand extends Vue
{
	@Prop( Boolean ) when?: boolean;

	inDom = false;

	// Used for a hack to force browser reflow.
	private reflow: number;

	created()
	{
		this.inDom = !!this.when;

		if ( this.inDom ) {
			this.$el.style.height = 'auto';
		}
	}

	@Watch( 'when' )
	async onWhenWatch()
	{
		if ( this.when ) {

			// Show in DOM as soon as possible.
			// This will get the correct height to expand out to.
			this.inDom = true;
			this.$el.classList.add( 'transition' );
			await this.$nextTick();

			// Should be in DOM now so we can pull height.
			this.$el.style.height = this.$el.scrollHeight + 'px';
		}
		else {

			this.$el.style.height = this.$el.scrollHeight + 'px';

			// This hack forces a browser reflow.
			// THis way the change from explicit height to 0 is noticed.
			this.reflow = this.$el.offsetWidth;

			this.$el.classList.add( 'transition' );
			this.$el.style.height = '0';
		}
	}
<commit_msg>Expander has option to animate initial<commit_after>import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import * as View from '!view!./expand.html?style=./expand.styl';

@View
@Component({
	name: 'expand',
})
export class AppExpand extends Vue
{
	@Prop( Boolean ) when?: boolean;
	@Prop( Boolean ) animateInitial?: boolean;

	inDom = false;

	// Used for a hack to force browser reflow.
	private reflow: number;

	created()
	{
		this.inDom = !!this.when;
	}

	async mounted()
	{
		if ( this.inDom ) {
			this.$el.style.height = 'auto';

			// This simulates having it closed and then showing immediately to
			// slide it out.
			if ( this.animateInitial ) {
				this.$el.style.height = '0';
				this.inDom = false;
				await this.$nextTick();
				this.onWhenWatch();
			}
		}
	}

	@Watch( 'when' )
	async onWhenWatch()
	{
		if ( this.when ) {

			// Show in DOM as soon as possible.
			// This will get the correct height to expand out to.
			this.inDom = true;
			this.$el.classList.add( 'transition' );
			await this.$nextTick();

			// Should be in DOM now so we can pull height.
			this.$el.style.height = this.$el.scrollHeight + 'px';
		}
		else {

			this.$el.style.height = this.$el.scrollHeight + 'px';

			// This hack forces a browser reflow.
			// This way the change from explicit height to 0 is noticed.
			this.reflow = this.$el.offsetWidth;

			this.$el.classList.add( 'transition' );
			this.$el.style.height = '0';
		}
	}

{'fraction_non_alphanumeric': 0.14563476934807473, 'fraction_numerical': 0.0019062142584826535, 'mean_word_length': 2.893175074183976, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '939352', 'n_tokens_mistral': 999, 'n_tokens_neox': 887, 'n_words': 267}