mirror of
https://github.com/directus/directus.git
synced 2026-04-25 03:00:53 -04:00
Finalize interface names (#5521)
* Rename button-links->presentation-links * Rename checkboxes->select-multiple-checkbox * Rename code->input-code * Rename checkboxes files * Rename color->select-color * Rename divider->presentation-divider * Rename dropdown-multiselect->select-multiple-dropdown * Rename hash->input-hash * Rename icon->select-icon * Rename image->file-image * Rename m2a-builder->list-m2a * Rename many-to-many->list-m2m * Rename many-to-one->select-dropdown-m2o * Rename markdown->input-rich-text-md * Rename notice->presentation-notice * Rename one-to-many->list-o2m * Rename radio-buttons->select-radio * Rename repeater->list * Rename text-input->input * Rename textarea->input-multiline * Rename toggle->boolean * Rename tree-view->list-o2m-tree-view * Rename wysiwyg->input-rich-text-html * Use correct interfaces in system defaults * Rename collection->system-collection * Rename collections->system-collections * Rename display-template->system-display-template * Rename field->system-field * Rename interface->system-interface * Rename interface-options->system-interface-options * Rename scope->interface-scope * Rename tfa-setup->system-mfa-setup * Fix oversights * Remove old todo * Some more tweaks * Add migration, fix dropdown name in system use * Merge numeric + input * Replace dropdown->select-dropdown in app use * Merge slug->input, user->select-dropdown-m2o * Fix type issue * Fix seeder field name
This commit is contained in:
Rijk van Zanten
13
app/src/interfaces/input/index.ts
Normal file
13
app/src/interfaces/input/index.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { defineInterface } from '@/interfaces/define';
|
||||
import InterfaceInput from './input.vue';
|
||||
import Options from './options.vue';
|
||||
|
||||
export default defineInterface({
|
||||
id: 'input',
|
||||
name: '$t:interfaces.input.input',
|
||||
description: '$t:interfaces.input.description',
|
||||
icon: 'text_fields',
|
||||
component: InterfaceInput,
|
||||
types: ['string', 'uuid', 'bigInteger', 'integer', 'float', 'decimal'],
|
||||
options: Options,
|
||||
});
|
||||
162
app/src/interfaces/input/input.vue
Normal file
162
app/src/interfaces/input/input.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<v-input
|
||||
:autofocus="autofocus"
|
||||
:value="value"
|
||||
:nullable="!clear"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:trim="trim"
|
||||
:type="inputType"
|
||||
:class="font"
|
||||
:db-safe="dbSafe"
|
||||
@input="$listeners.input"
|
||||
:slug="slug"
|
||||
>
|
||||
<template v-if="iconLeft" #prepend><v-icon :name="iconLeft" /></template>
|
||||
<template #append>
|
||||
<span
|
||||
v-if="percentageRemaining <= 20"
|
||||
class="remaining"
|
||||
:class="{
|
||||
warning: percentageRemaining < 10,
|
||||
danger: percentageRemaining < 5,
|
||||
}"
|
||||
>
|
||||
{{ charsRemaining }}
|
||||
</span>
|
||||
<v-icon
|
||||
:class="{ hide: percentageRemaining !== false && percentageRemaining <= 20 }"
|
||||
v-if="iconRight"
|
||||
:name="iconRight"
|
||||
/>
|
||||
</template>
|
||||
</v-input>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType, computed } from '@vue/composition-api';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
clear: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
masked: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
iconLeft: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
iconRight: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
trim: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
font: {
|
||||
type: String as PropType<'sans-serif' | 'serif' | 'monospace'>,
|
||||
default: 'sans-serif',
|
||||
},
|
||||
length: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
dbSafe: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
autofocus: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
slug: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const charsRemaining = computed(() => {
|
||||
if (!props.length) return null;
|
||||
if (!props.value) return null;
|
||||
return +props.length - props.value.length;
|
||||
});
|
||||
|
||||
const percentageRemaining = computed(() => {
|
||||
if (!props.length) return false;
|
||||
if (!props.value) return false;
|
||||
return 100 - (props.value.length / +props.length) * 100;
|
||||
});
|
||||
|
||||
const inputType = computed(() => {
|
||||
if (props.masked) return 'password';
|
||||
if (['bigInteger', 'integer', 'float', 'decimal'].includes(props.type)) return 'number';
|
||||
return 'text';
|
||||
});
|
||||
|
||||
return { inputType, charsRemaining, percentageRemaining };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-input {
|
||||
&.monospace {
|
||||
--v-input-font-family: var(--family-monospace);
|
||||
}
|
||||
|
||||
&.serif {
|
||||
--v-input-font-family: var(--family-serif);
|
||||
}
|
||||
|
||||
&.sans-serif {
|
||||
--v-input-font-family: var(--family-sans-serif);
|
||||
}
|
||||
}
|
||||
|
||||
.remaining {
|
||||
display: none;
|
||||
width: 24px;
|
||||
color: var(--foreground-subdued);
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
font-feature-settings: 'tnum';
|
||||
}
|
||||
|
||||
.v-input:focus-within .remaining {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.v-input:focus-within .hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.danger {
|
||||
color: var(--danger);
|
||||
}
|
||||
</style>
|
||||
234
app/src/interfaces/input/options.vue
Normal file
234
app/src/interfaces/input/options.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<v-form :fields="fields" v-model="options" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType } from '@vue/composition-api';
|
||||
import { Field } from '@/types';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
fieldData: {
|
||||
type: Object as PropType<Field>,
|
||||
default: null,
|
||||
},
|
||||
value: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const options = computed({
|
||||
get() {
|
||||
return props.value || {};
|
||||
},
|
||||
set(options: Record<string, unknown>) {
|
||||
emit('input', options);
|
||||
},
|
||||
});
|
||||
|
||||
const textOptions = [
|
||||
{
|
||||
field: 'placeholder',
|
||||
name: '$t:placeholder',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'input',
|
||||
options: {
|
||||
placeholder: '$t:enter_a_placeholder',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'font',
|
||||
name: '$t:font',
|
||||
type: 'string',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'select-dropdown',
|
||||
options: {
|
||||
choices: [
|
||||
{ text: '$t:sans_serif', value: 'sans-serif' },
|
||||
{ text: '$t:monospace', value: 'monospace' },
|
||||
{ text: '$t:serif', value: 'serif' },
|
||||
],
|
||||
},
|
||||
},
|
||||
schema: {
|
||||
default_value: 'sans-serif',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'iconLeft',
|
||||
name: '$t:icon_left',
|
||||
type: 'string',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'select-icon',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'iconRight',
|
||||
name: '$t:icon_right',
|
||||
type: 'string',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'select-icon',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'trim',
|
||||
name: '$t:interfaces.input.trim',
|
||||
type: 'boolean',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'boolean',
|
||||
options: {
|
||||
label: '$t:interfaces.input.trim_label',
|
||||
},
|
||||
},
|
||||
schema: {
|
||||
default_value: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'masked',
|
||||
name: '$t:interfaces.input.mask',
|
||||
type: 'boolean',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'boolean',
|
||||
options: {
|
||||
label: '$t:interfaces.input.mask_label',
|
||||
},
|
||||
},
|
||||
schema: {
|
||||
default_value: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'clear',
|
||||
name: '$t:interfaces.input.clear',
|
||||
type: 'boolean',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'boolean',
|
||||
options: {
|
||||
label: '$t:interfaces.input.clear_label',
|
||||
},
|
||||
},
|
||||
schema: {
|
||||
default_value: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'slug',
|
||||
name: '$t:interfaces.input.slug',
|
||||
type: 'boolean',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'boolean',
|
||||
options: {
|
||||
label: '$t:interfaces.input.slug_label',
|
||||
},
|
||||
},
|
||||
schema: {
|
||||
default_value: false,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const numberOptions = [
|
||||
{
|
||||
field: 'min',
|
||||
name: '$t:interfaces.input.minimum_value',
|
||||
type: 'integer',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'input',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'max',
|
||||
name: '$t:interfaces.input.maximum_value',
|
||||
type: 'integer',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'input',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'step',
|
||||
name: '$t:interfaces.input.step_interval',
|
||||
type: 'integer',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'input',
|
||||
},
|
||||
schema: {
|
||||
default_value: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'placeholder',
|
||||
name: '$t:placeholder',
|
||||
type: 'string',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'input',
|
||||
options: {
|
||||
placeholder: '$t:enter_a_placeholder',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'iconLeft',
|
||||
name: '$t:icon_left',
|
||||
type: 'string',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'select-icon',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'iconRight',
|
||||
name: '$t:icon_right',
|
||||
type: 'string',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'select-icon',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'font',
|
||||
name: '$t:font',
|
||||
type: 'string',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'select-dropdown',
|
||||
options: {
|
||||
choices: [
|
||||
{ text: '$t:sans_serif', value: 'sans-serif' },
|
||||
{ text: '$t:monospace', value: 'monospace' },
|
||||
{ text: '$t:serif', value: 'serif' },
|
||||
],
|
||||
},
|
||||
},
|
||||
schema: {
|
||||
default_value: 'sans-serif',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const fields = computed(() => {
|
||||
if (['bigInteger', 'integer', 'float', 'decimal'].includes(props.fieldData?.type)) {
|
||||
return numberOptions;
|
||||
}
|
||||
|
||||
return textOptions;
|
||||
});
|
||||
|
||||
return { fields, options };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user