<script lang="ts" setup>
|
import { computed, ref, unref, watch } from 'vue';
|
|
import { useAttrs } from '@jnpf/hooks';
|
|
import { preferences } from '@vben/preferences';
|
|
import { useDebounceFn } from '@vueuse/core';
|
import { Input } from 'ant-design-vue';
|
import { omit } from 'lodash-es';
|
|
import I18nModal from './I18nModal.vue';
|
import { i18nInputProps } from './props';
|
|
defineOptions({ inheritAttrs: false, name: 'JnpfI18nInput' });
|
const props = defineProps(i18nInputProps);
|
const emit = defineEmits(['update:value', 'change', 'update:i18n', 'i18nChange']);
|
const attrs: any = useAttrs({ excludeDefaultKeys: false });
|
const innerValue = ref('');
|
const i18nValue = ref('');
|
const i18nModalRef = ref(null);
|
const debounceOnChange = useDebounceFn((value) => {
|
emit('change', value);
|
}, 200);
|
|
const getBindValue = computed(() => ({ ...omit(unref(attrs), ['addonAfter']) }));
|
const getClass = computed(() => [
|
'jnpf-i18n-input',
|
{
|
[`jnpf-i18n-input--active`]: !!unref(i18nValue),
|
},
|
]);
|
|
watch(
|
() => unref(props.value),
|
(val) => {
|
setValue(val);
|
},
|
{ immediate: true },
|
);
|
watch(
|
() => props.i18n,
|
(val) => {
|
setI18nValue(val);
|
},
|
{ immediate: true },
|
);
|
|
function setValue(value) {
|
innerValue.value = value;
|
}
|
function setI18nValue(value) {
|
i18nValue.value = value;
|
}
|
function onChange(e) {
|
emit('update:value', e.target.value);
|
debounceOnChange(e.target.value);
|
}
|
function onI18nValueChange(val, data) {
|
emit('update:i18n', val);
|
emit('i18nChange', val, data);
|
}
|
function openI18nModal() {
|
if (Reflect.has(unref(attrs), 'disabled') && unref(attrs).disabled) return;
|
const i18nModal = unref(i18nModalRef) as any;
|
i18nModal?.openModal();
|
}
|
</script>
|
|
<template>
|
<Input :class="getClass" v-bind="getBindValue" v-model:value="innerValue" @change="onChange">
|
<template #[item]="data" v-for="item in Object.keys($slots).filter((k) => k !== 'addonAfter')"><slot :name="item" v-bind="data || {}"></slot></template>
|
<template #prefix v-if="prefixIcon">
|
<i :class="prefixIcon"></i>
|
</template>
|
<template #suffix v-if="suffixIcon">
|
<i :class="suffixIcon"></i>
|
</template>
|
<template #addonAfter v-if="preferences.widget.languageToggle">
|
<i class="i18n-icon icon-ym icon-ym-header-language" @click.stop="openI18nModal" :title="i18nValue"></i>
|
</template>
|
</Input>
|
<a-form-item-rest>
|
<I18nModal v-model:value="i18nValue" ref="i18nModalRef" @change="onI18nValueChange" />
|
</a-form-item-rest>
|
</template>
|
<style lang="scss">
|
.jnpf-i18n-input {
|
.ant-input-prefix,
|
.ant-input-suffix,
|
:deep(.ant-input-prefix),
|
:deep(.ant-input-suffix) {
|
i {
|
line-height: 20px;
|
color: var(--text-color-help-dark);
|
}
|
}
|
|
.i18n-icon {
|
padding: 0 11px;
|
font-size: 18px;
|
cursor: pointer;
|
|
&:hover {
|
color: var(--primary-color);
|
}
|
}
|
|
.ant-input-group-addon {
|
flex-shrink: 0;
|
padding: 0;
|
|
&.ant-input-group-addon-disabled {
|
cursor: not-allowed;
|
|
.i18n-icon {
|
cursor: not-allowed;
|
|
&:hover {
|
color: unset;
|
}
|
}
|
}
|
}
|
|
&--active {
|
.ant-input-affix-wrapper + .ant-input-group-addon,
|
.ant-input + .ant-input-group-addon {
|
color: #fff;
|
background: var(--primary-color);
|
|
.i18n-icon:hover {
|
color: #fff;
|
}
|
}
|
}
|
}
|
</style>
|
