Data Dictionaries and Shared Utilities

This section focuses on a group of high-frequency capabilities that appear across business applications:

• data dictionaries
• option transformation
• pinyin-enhanced search
• shared utilities from @vef-framework-react/shared

Where Data Dictionaries Come From

Provide the dictionary query function through createApp().render():

createApp().render({
  appContext: {
    dictionaryQueryFn: findDataDictItems
  },
  ...
});

Once this is configured, forms and search areas can use:

• useDictionaryQuery
• useDictionaryOptionsSelect
• useDataOptionsTreeSelect

Example

const { gender } = useDictionaryOptionsSelect({
  gender: "common.gender"
});

// gender is a SelectProps that can be spread directly:
// <Select {...gender} />

For low-level access (e.g. when not rendering a Select), useDictionaryQuery({ gender: "common.gender" }) returns a UseQueryResult with data?.gender shaped as DataOption[].

Why Pinyin Search Matters

VEF's option-transformation chain can automatically enrich values with pinyin metadata, which means:

• Chinese labels can be searched directly in Chinese
• full pinyin and pinyin initials can also be used

This is especially useful for people, departments, organizations, and dictionary items.

Common Exports from @vef-framework-react/shared

Export	Use
z	form and parameter validation
EventEmitter	local page event bus
formatDate / getLocalizedDateTime	date and time display
flattenTree / mapTree / traverseTree	tree-data handling
withPinyin	enriches option objects with pinyin indexes
camelCase / constantCase	string transformation

Usage Notes

Whenever a page needs dictionaries, tree utilities, formatting, or validation, it is worth checking shared and the related hooks first.
The framework is designed to reduce repetition in page-level code.