135 lines
2.4 KiB
Vue
135 lines
2.4 KiB
Vue
<template>
|
|
<div class="ui-alias" :class="{'is-disabled': disabled, 'is-locked': locked }">
|
|
<button type="button" class="ui-alias-lock" @click="toggleLock">
|
|
<i :class="locked ? 'fth-lock' : 'fth-unlock'"></i>
|
|
</button>
|
|
<input ref="input" :value="value" @input="onChange" type="text" class="ui-input" :maxlength="maxLength" :readonly="locked" :disabled="disabled" @blur="locked=true" />
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import { map as _map } from 'underscore';
|
|
import UtilsApi from 'zero/api/utils.js';
|
|
|
|
export default {
|
|
name: 'uiAlias',
|
|
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
name: {
|
|
type: String,
|
|
required: true,
|
|
default: null
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
maxLength: {
|
|
type: Number,
|
|
default: 200
|
|
}
|
|
},
|
|
|
|
|
|
data: () => ({
|
|
custom: false,
|
|
locked: true
|
|
}),
|
|
|
|
|
|
watch: {
|
|
name: function(val)
|
|
{
|
|
this.updateAlias(val);
|
|
}
|
|
},
|
|
|
|
|
|
mounted()
|
|
{
|
|
this.updateAlias(this.name);
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
onChange(ev)
|
|
{
|
|
let alias = ev.target.value;
|
|
|
|
this.custom = alias !== this.value;
|
|
this.updateAlias(alias);
|
|
|
|
this.$emit('input', alias);
|
|
},
|
|
|
|
|
|
toggleLock()
|
|
{
|
|
this.locked = !this.locked;
|
|
|
|
if (!this.locked)
|
|
{
|
|
this.$nextTick(() =>
|
|
{
|
|
this.$refs.input.focus();
|
|
this.$refs.input.select();
|
|
});
|
|
}
|
|
},
|
|
|
|
|
|
updateAlias(value)
|
|
{
|
|
UtilsApi.generateAlias(value).then(alias =>
|
|
{
|
|
this.custom = alias !== this.value;
|
|
this.$emit('input', alias);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.ui-alias
|
|
{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.ui-alias button
|
|
{
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: var(--radius);
|
|
background: var(--color-box-nested);
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.ui-alias input
|
|
{
|
|
background: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
height: 24px !important;
|
|
padding: 0 !important;
|
|
outline: none !important;
|
|
min-width: 10px !important;
|
|
width: auto !important;
|
|
}
|
|
|
|
.ui-alias:not(.is-locked) input
|
|
{
|
|
font-weight: bold;
|
|
}
|
|
</style> |