mirror of https://github.com/doccano/doccano.git
pythondatasetsactive-learningtext-annotationdatasetnatural-language-processingdata-labelingmachine-learningannotation-tool
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
2.4 KiB
106 lines
2.4 KiB
<template>
|
|
<base-card
|
|
:disabled="!valid"
|
|
:title="$t('labels.createLabel')"
|
|
:agree-text="$t('generic.save')"
|
|
:cancel-text="$t('generic.cancel')"
|
|
@agree="$emit('save')"
|
|
@cancel="$emit('cancel')"
|
|
>
|
|
<template #content>
|
|
<v-form v-model="valid">
|
|
<v-text-field
|
|
:value="text"
|
|
:label="$t('labels.labelName')"
|
|
:rules="[rules.required, rules.counter, rules.nameDuplicated]"
|
|
prepend-icon="label"
|
|
single-line
|
|
counter
|
|
autofocus
|
|
@input="updateValue('text', $event)"
|
|
/>
|
|
<v-select
|
|
:value="suffixKey"
|
|
:items="shortkeys"
|
|
:label="$t('labels.key')"
|
|
:rules="[rules.keyDuplicated]"
|
|
prepend-icon="mdi-keyboard"
|
|
@input="updateValue('suffixKey', $event)"
|
|
/>
|
|
<v-color-picker
|
|
:value="backgroundColor"
|
|
:rules="[rules.required]"
|
|
show-swatches
|
|
hide-mode-switch
|
|
width="800"
|
|
@input="updateValue('backgroundColor', $event)"
|
|
/>
|
|
</v-form>
|
|
</template>
|
|
</base-card>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from 'vue'
|
|
import BaseCard from '@/components/utils/BaseCard.vue'
|
|
|
|
export default Vue.extend({
|
|
components: {
|
|
BaseCard
|
|
},
|
|
|
|
props: {
|
|
text: {
|
|
type: String,
|
|
default: '',
|
|
required: true
|
|
},
|
|
suffixKey: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
backgroundColor: {
|
|
type: String,
|
|
default: '#ffffff',
|
|
required: true
|
|
},
|
|
usedNames: {
|
|
type: Array,
|
|
default: () => [],
|
|
required: true
|
|
},
|
|
usedKeys: {
|
|
type: Array,
|
|
default: () => [],
|
|
required: true
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
valid: false,
|
|
rules: {
|
|
required: (v: string) => !!v || 'Required',
|
|
// @ts-ignore
|
|
counter: (v: string) => (v && v.length <= 100) || this.$t('rules.labelNameRules').labelLessThan100Chars,
|
|
// @ts-ignore
|
|
nameDuplicated: (v: string) => (!this.usedNames.includes(v)) || this.$t('rules.labelNameRules').duplicated,
|
|
// @ts-ignore
|
|
keyDuplicated: (v: string) => !this.usedKeys.includes(v) || this.$t('rules.keyNameRules').duplicated,
|
|
}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
shortkeys() {
|
|
return '0123456789abcdefghijklmnopqrstuvwxyz'.split('')
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
updateValue(key: string, value: string) {
|
|
this.$emit(`update:${key}`, value);
|
|
}
|
|
}
|
|
})
|
|
</script>
|