<commit_before>Vue.component('light-input', {
	'props': [ 'min', 'max' ],
	'template': `<input type="text" class="light-input" spellcheck="false" autcomplete="off" v-on:input="adjustWidth($el.value)">`,
	'data': function() {
		// FIXME: Not working well (it does the job but has a few quirks)

		let canvas = document.createElement('canvas'),
			ctx = canvas.getContext('2d');

		canvas.font = '12px Arial';

		return { ctx };
	},  
	'methods': {
		'adjustWidth': function(text) {
			let elem = this.$el,
				len = this.ctx.measureText(text).width + 8;
			
			len = len < this.min ? this.min : len;
			len = len > this.max ? this.max : len;

			elem.style.width = len + 'px';
		}
	},
	'ready': function() {
		this.adjustWidth(this.$el.value);
	}
});

Vue.component('tray', {
	'props': [ 'data' ],
	'data': function() {
		return {
			'editing': false,
			'savepoint': null
		};
	},
	'template': `
		<li class="vault-tray segmented"> 
			<div v-on:click="!editing && $emit('insert', data)" class="segment fill" :class="{ clickable: !editing }">
				<div class="tray-thumbnail">
					<div class="thumbnail-overlay" v-on:click.stop="toggleEdit" :title="editing ? 'Save' : 'Edit'">
						<i class="fa fa-pencil" v-if="!editing"></i>
						<i class="fa fa-check" v-if="editing"></i>
					</div>

					<img :src="data.props.other.thumbnail"></img>
				</div>

				<div class="tray-info">
					<input type="text" class="tray-name edit-name" v-model="data.name" v-if="editing" />

					<span class="tray-name" v-if="!editing">{{ data.name }}</span>
					<span class="tray-username" v-if="!editing">{{ data.props.credentials.username }}</span>
				</div>
			</div>

			<div class="segment segment-button square clickable" v-if="!editing" title="Copy password" v-on:click="copyPassword">
				<i class="fa fa-copy"></i>
			</div>

			<div class="segment segment-button square clickable" v-if="editing" title="Undo recent changes" v-on:click="undoChanges">
				<i class="fa fa-undo"></i>
			</div>

			<div class="segment segment-button danger square clickable" v-if="editing" title="Delete" v-on:click="$emit('delete', data)">
				<i class="fa fa-trash-o"></i>
			</div>

			<div class="tray-editor" v-if="editing"><commit_msg>Hide the username if it's empty<commit_after>Vue.component('light-input', {
	'props': [ 'min', 'max' ],
	'template': `<input type="text" class="light-input" spellcheck="false" autcomplete="off" v-on:input="adjustWidth($el.value)">`,
	'data': function() {
		// FIXME: Not working well (it does the job but has a few quirks)

		let canvas = document.createElement('canvas'),
			ctx = canvas.getContext('2d');

		canvas.font = '12px Arial';

		return { ctx };
	},  
	'methods': {
		'adjustWidth': function(text) {
			let elem = this.$el,
				len = this.ctx.measureText(text).width + 8;
			
			len = len < this.min ? this.min : len;
			len = len > this.max ? this.max : len;

			elem.style.width = len + 'px';
		}
	},
	'ready': function() {
		this.adjustWidth(this.$el.value);
	}
});

Vue.component('tray', {
	'props': [ 'data' ],
	'data': function() {
		return {
			'editing': false,
			'savepoint': null
		};
	},
	'template': `
		<li class="vault-tray segmented"> 
			<div v-on:click="!editing && $emit('insert', data)" class="segment fill" :class="{ clickable: !editing }">
				<div class="tray-thumbnail">
					<div class="thumbnail-overlay" v-on:click.stop="toggleEdit" :title="editing ? 'Save' : 'Edit'">
						<i class="fa fa-pencil" v-if="!editing"></i>
						<i class="fa fa-check" v-if="editing"></i>
					</div>

					<img :src="data.props.other.thumbnail"></img>
				</div>

				<div class="tray-info">
					<input type="text" class="tray-name edit-name" v-model="data.name" v-if="editing" />

					<span class="tray-name" v-if="!editing">{{ data.name }}</span>
					<span class="tray-username" v-if="data.props.credentials.username && !editing">{{ data.props.credentials.username }}</span>
				</div>
			</div>

			<div class="segment segment-button square clickable" v-if="!editing" title="Copy password" v-on:click="copyPassword">
				<i class="fa fa-copy"></i>
			</div>

			<div class="segment segment-button square clickable" v-if="editing" title="Undo recent changes" v-on:click="undoChanges">
				<i class="fa fa-undo"></i>
			</div>

			<div class="segment segment-button danger square clickable" v-if="editing" title="Delete" v-on:click="$emit('delete', data)">
				<i class="fa fa-trash-o"></i>
			</div>

			<div class="tray-editor" v-if="editing">
{'fraction_non_alphanumeric': 0.2114655364711131, 'fraction_numerical': 0.0017845192951148785, 'mean_word_length': 3.7550371155885474, 'pattern_counts': {'":': 0, '<': 73, '<?xml version=': 0, '>': 73, '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': '2839601', 'n_tokens_mistral': 1848, 'n_tokens_neox': 1612, 'n_words': 341}