[Feature Request]: 自定义属性添加本地化

[cnguu]

Problem Statement | 需求背景

减少代码量

Package Scope

enum-plus (core)

Feature Description | 功能描述

自定义属性像 label 一样支持本地化

const ScanModeEnum = enum({
  A: {
    label: () => $t('default.a'),
    value: 'a',

    // 本地化不生效，希望增加同 label 一样的本地化
    // abbr: () => 'default.aAbbr',

    // 目前只能在vue的template中手动转换
    // {{ $t(ScanModeEnum.raw('a').abbr) }}
    abbr: 'default.aAbbr',
  },
})

Use Cases | 使用场景

本地化

Importance | 重要性评估

No response

Feature Level | 特性级别

Core Library (核心库)

Proposed Solution (Optional) | 建议方案(可选)

No response

[shijistar]

Good point. I'll think about it. But I think we should explicitly specify the fields for auto-i18n, not all string fields.

[cnguu]

我想到两种方式

1. 需要本地化的属性名统一一个后缀，例如：后缀是 Key

const ScanModeEnum = enum({
  A: {
    label: () => $t('default.a'),
    value: 'a',

    // 本地化
    abbrKey: 'default.aAbbr',

    // 非本地化
    abbr: 'default.aAbbr'
  },
})

2. 本地化函数增加一个特有的标记，例如：__isI18n: boolean

const $t = i18n.global.t

function $T(key: string) {
  const cb = () => $t(key)
  cb.__isI18n = true
  return cb
}

const ScanModeEnum = enum({
  A: {
    label: () => $t('default.a'),
    value: 'a',

    // 本地化
    abbr: $T('default.aAbbr'),

    // 非本地化
    // abbr: 'default.aAbbr'
  },
})

[shijistar]

I’d like to add a new option autoLocalizeMeta so users can choose which fields to auto-i18n.

What do you think?

const WeekEnum = Enum(
  {
    Monday: { value: 1, label: 'week.monday', abbr: 'week. monday. abbr' },
    Tuesday: { value: 2, label: 'week. tuesday', abbr: 'week. tuesday. abbr' },
  },
  {
    autoLocalizeMeta: ['abbr'],
  },
);

WeekEnum.named.Monday.abbr; // Mon

[cnguu]

这种方式也可以

[shijistar]

I'm pleased to announce that v3.2.0 has been released. Please try the new version.

You need to configure the autoLocalizeMeta option to specify which fields should be auto-i18n. You can either provide field names or set it to true which applies to all meta fields.

const WeekEnum = Enum(
  {
    Monday: { value: 1, label: 'week.monday', abbr: 'week. monday. abbr' },
    Tuesday: { value: 2, label: 'week. tuesday', abbr: 'week. tuesday. abbr' },
  },
  {
    autoLocalizeMeta: ['abbr'],
  },
);

There are two ways to obtain the metadata texts.

1. Retrieve meta of static enum items

WeekEnum.named.Monday.abbr; // Mon

2. Programmatically retrieve meta of dynamic values

WeekEnum.item(value)?.abbr; // Mon

[cnguu]

我在vue3项目中尝试，配置后不生效，并且ts报错

    "dependencies": {
        "enum-plus": "3.2.0",
        "pinia": "3.0.4",
        "vue": "3.5.38",
        "vue-i18n": "11.4.6",
        "vue-router": "5.1.0"
    }

[shijistar]

Could you show the implementation of enumUtil? It is recommended to use Enum factory method directly.

Your second question, please use ScanModeEnum.item(scanMode)?.abbr instead of ScanModeEnum.raw(scanMode)?.abbr. Actually the raw() method returns the original object information supplied when the enum was initially created. It's never changed.

[cnguu]

1、enumUtil 只是做了一个别名导出

import { Enum } from 'enum-plus'

export const enumUtil = Enum

2、.item() 和 .raw() 在使用时没发现有什么区别，不太清楚它们之间的具体使用场景

[cnguu]

另外，我并没有使用 Enum 的相关本地化插件，例如：@enum-plus/plugin-i18next-vue，因为插件不支持在 setup 外执行，目前使用 vue-i18n 的 t 方法能正常对 label 进行响应

const i18n = createI18n({
  legacy: false,
  globalInjection: true,
  locale: '',
  messages: {},
})

const $t = i18n.global.t

const ScanModeEnum = Enum({
  AUTOMATIC: {
    label: () => $t('common.automatic'),
    value: 'automatic',
    abbr: 'common.automaticAbbr',
  },
})

[shijistar]

If you are using vue-i18n, you might want to try the plugin @enum-plus/plugin-vue-i18n. By using the plugin, you don't have to use functions in label, just use the resource key. And I think the TypeScript error should go away too.

[cnguu]

但是 @enum-plus/plugin-i18next-vue 插件不支持在 setup 外使用