vome-core 0.3.9 → 0.3.11

package/dist/admin/crud/components/vm-avatar.vue

@@ -25,6 +25,7 @@
 </template>
 
 <script setup lang="ts">
+import { crudLabel } from '../style'
 import { computed, ref } from 'vue'
 import VmPreviewViewer from './vm-preview-viewer.vue'
 
@@ -59,7 +60,7 @@ const displayName = computed(() => {
 
 const fallbackText = computed(() => displayName.value.slice(0, 1).toUpperCase())
 
-const title = computed(() => displayName.value || '头像')
+const title = computed(() => displayName.value || crudLabel('avatar'))
 const boxStyle = computed(() => ({
   width: `${props.size}px`,
   height: `${props.size}px`,

package/dist/admin/crud/components/vm-color-picker.vue

@@ -9,7 +9,7 @@
       type="button"
       class="vm-color-picker__swatch"
       :disabled="disabled"
-      :title="disabled ? undefined : '选择颜色'"
+      :title="disabled ? undefined : crudLabel('pickColor')"
       @click="toggle"
     >
       <span
@@ -61,7 +61,7 @@
                 role="tab"
                 @click="panelMode = 'theme'"
               >
-                主题
+                {{ crudLabel('theme') }}
               </button>
               <button
                 type="button"
@@ -70,15 +70,15 @@
                 role="tab"
                 @click="panelMode = 'picker'"
               >
-                取色器
+                {{ crudLabel('colorPickerTab') }}
               </button>
             </div>
             <span v-else class="vm-color-picker__toolbar-spacer" />
             <button
               type="button"
               class="vm-color-picker__close"
-              title="关闭"
-              aria-label="关闭"
+              :title="crudLabel('dismiss')"
+              :aria-label="crudLabel('dismiss')"
               @click="closePanel"
             >
               <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
@@ -128,7 +128,7 @@
               v-if="hasEyeDropper"
               type="button"
               class="vm-color-picker__eyedropper"
-              title="吸取颜色"
+              :title="crudLabel('eyedropper')"
               @click="pickEyeDropper"
             >
               <!-- 内联 SVG：不依赖 remixicon 字体是否已加载 -->
@@ -179,7 +179,7 @@
                 type="button"
                 class="vm-color-picker__format"
                 :class="{ 'is-open': formatOpen }"
-                title="颜色格式"
+                :title="crudLabel('colorFormat')"
                 @click.stop="toggleFormatMenu"
               >
                 {{ formatLabel }}
@@ -247,7 +247,7 @@ import {
   resolveCssThemeColorOptions,
   type VmColorThemeOption,
 } from '../../lib/theme-color-options'
-import { getCrudConfig } from '../style'
+import { crudLabel, getCrudConfig } from '../style'
 
 defineOptions({ name: 'vm-color-picker' })
 

package/dist/admin/crud/components/vm-column-custom.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Button size="sm" variant="outline" class="h-8" @click="open = true">
-      自定义列
+      {{ crudLabel('customColumns') }}
     </Button>
     <Dialog :open="open" @update:open="onOpenChange">
       <DialogContent
@@ -12,7 +12,7 @@
         @interact-outside="preventDialogOutsideClose"
       >
         <DialogHeader class="vm-crud-shell__head">
-          <DialogTitle class="vm-crud-shell__title">自定义列</DialogTitle>
+          <DialogTitle class="vm-crud-shell__title">{{ crudLabel('customColumns') }}</DialogTitle>
         </DialogHeader>
         <div class="vm-crud-shell__body">
           <div class="vm-col-custom">
@@ -38,13 +38,13 @@
         </div>
         <DialogFooter class="vm-crud-shell__foot">
           <button type="button" class="vm-crud-shell__btn is-ghost" @click="open = false">
-            取消
+            {{ crudLabel('close') }}
           </button>
           <button type="button" class="vm-crud-shell__btn is-danger" @click="reset">
-            重置
+            {{ crudLabel('reset') }}
           </button>
           <button type="button" class="vm-crud-shell__btn is-primary" @click="save">
-            保存
+            {{ crudLabel('save') }}
           </button>
         </DialogFooter>
       </DialogContent>
@@ -53,6 +53,7 @@
 </template>
 
 <script setup lang="ts">
+import { crudLabel } from '../style'
 import { ref, watch, inject } from 'vue'
 import { preventDialogOutsideClose } from '../../lib/dialog-float'
 import { injectTableOptions, TABLE_API_KEY } from '../key'

package/dist/admin/crud/components/vm-copy-btn.vue

@@ -7,11 +7,12 @@
     @click="copy"
   >
     <i :class="copying ? 'ri-loader-4-line is-spin' : icon" aria-hidden="true" />
-    <span>{{ copying ? copyingText : label }}</span>
+    <span>{{ copying ? (copyingText ?? crudLabel('copying')) : (label ?? crudLabel('copy')) }}</span>
   </button>
 </template>
 
 <script setup lang="ts">
+import { crudLabel } from '../style'
 import { ref } from 'vue'
 
 defineOptions({ name: 'vm-copy-btn' })
@@ -26,8 +27,8 @@ const props = withDefaults(
     disabled?: boolean
   }>(),
   {
-    label: '复制',
-    copyingText: '复制中…',
+    label: undefined,
+    copyingText: undefined,
     icon: 'ri-file-copy-line',
     size: 'md',
     disabled: false,

package/dist/admin/crud/components/vm-date-calendar-panel.vue

@@ -10,10 +10,10 @@
         />
       </button>
       <div class="vm-dt-cal__nav">
-        <button type="button" class="vm-dt-cal__nav-btn" title="上一页" @click="prevPage">
+        <button type="button" class="vm-dt-cal__nav-btn" :title="crudLabel('prevPage')" @click="prevPage">
           <i class="ri-arrow-up-s-line" aria-hidden="true" />
         </button>
-        <button type="button" class="vm-dt-cal__nav-btn" title="下一页" @click="nextPage">
+        <button type="button" class="vm-dt-cal__nav-btn" :title="crudLabel('nextPage')" @click="nextPage">
           <i class="ri-arrow-down-s-line" aria-hidden="true" />
         </button>
       </div>
@@ -88,14 +88,15 @@
     </div>
 
     <footer class="vm-dt-cal__foot">
-      <button type="button" class="vm-dt-cal__link" @click="emit('clear')">清除</button>
-      <button type="button" class="vm-dt-cal__link" @click="pickToday">今天</button>
+      <button type="button" class="vm-dt-cal__link" @click="emit('clear')">{{ crudLabel('clear') }}</button>
+      <button type="button" class="vm-dt-cal__link" @click="pickToday">{{ crudLabel('today') }}</button>
     </footer>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from 'vue'
+import { crudFormat, crudLabel } from '../style'
 import {
   buildMonthGrid,
   clampTimePart,
@@ -125,26 +126,23 @@ const emit = defineEmits<{
 
 const precision = computed(() => normalizeDateTimePrecision(props.precision))
 const isDatetime = computed(() => precision.value === 'datetime')
-const weekdays = ['日', '一', '二', '三', '四', '五', '六']
-const monthLabels = [
-  '1月',
-  '2月',
-  '3月',
-  '4月',
-  '5月',
-  '6月',
-  '7月',
-  '8月',
-  '9月',
-  '10月',
-  '11月',
-  '12月',
-]
-const timeFields = [
-  { key: 'h' as const, label: '时', max: 23 },
-  { key: 'm' as const, label: '分', max: 59 },
-  { key: 's' as const, label: '秒', max: 59 },
-]
+const weekdays = computed(() => [
+  crudLabel('weekdaySun'),
+  crudLabel('weekdayMon'),
+  crudLabel('weekdayTue'),
+  crudLabel('weekdayWed'),
+  crudLabel('weekdayThu'),
+  crudLabel('weekdayFri'),
+  crudLabel('weekdaySat'),
+])
+const monthLabels = computed(() =>
+  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((n) => crudLabel(`month${n}`)),
+)
+const timeFields = computed(() => [
+  { key: 'h' as const, label: crudLabel('hour'), max: 23 },
+  { key: 'm' as const, label: crudLabel('minute'), max: 59 },
+  { key: 's' as const, label: crudLabel('second'), max: 59 },
+])
 
 type PanelView = 'date' | 'month' | 'year'
 const view = ref<PanelView>('date')
@@ -179,9 +177,14 @@ const yearCells = computed(() =>
 )
 
 const headTitle = computed(() => {
-  if (view.value === 'year') return `${yearStart.value}年 - ${yearStart.value + 11}年`
-  if (view.value === 'month') return `${viewYear.value}年`
-  return `${viewYear.value}年${String(viewMonth.value + 1).padStart(2, '0')}月`
+  if (view.value === 'year')
+    return crudFormat(crudLabel('yearRange'), yearStart.value, yearStart.value + 11)
+  if (view.value === 'month') return crudFormat(crudLabel('yearLabel'), viewYear.value)
+  return crudFormat(
+    crudLabel('yearMonth'),
+    viewYear.value,
+    String(viewMonth.value + 1).padStart(2, '0'),
+  )
 })
 
 function currentTime() {

package/dist/admin/crud/components/vm-date-picker.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script setup lang="ts">
+import { crudLabel } from '../style'
 import { computed } from 'vue'
 import { useCrud } from '../useCrud'
 import VmDatetimeField from './vm-datetime-field.vue'
@@ -49,10 +50,10 @@ const TYPE_PRECISION: Record<string, DateTimePrecision> = {
 }
 
 const TYPE_PLACEHOLDER: Record<string, string> = {
-  date: '选择日期',
-  datetime: '选择日期时间',
-  month: '选择月份',
-  year: '选择年份',
+  date: 'pickDate',
+  datetime: 'pickDateTime',
+  month: 'pickMonth',
+  year: 'pickYear',
 }
 
 const precision = computed(
@@ -60,7 +61,7 @@ const precision = computed(
 )
 
 const placeholderText = computed(
-  () => props.placeholder || TYPE_PLACEHOLDER[props.type] || '选择日期',
+  () => props.placeholder || crudLabel(TYPE_PLACEHOLDER[props.type] || 'pickDate'),
 )
 
 function onUpdate(v: string | null) {

package/dist/admin/crud/components/vm-date-range.vue

@@ -4,7 +4,7 @@
       class="vm-date-range__field"
       :model-value="modelValue?.[0] ?? null"
       :precision="precision"
-      :placeholder="startPlaceholder"
+      :placeholder="startPlaceholder ?? crudLabel('startTime')"
       :disabled="disabled"
       @update:model-value="(v) => set(0, v)"
     />
@@ -13,7 +13,7 @@
       class="vm-date-range__field"
       :model-value="modelValue?.[1] ?? null"
       :precision="precision"
-      :placeholder="endPlaceholder"
+      :placeholder="endPlaceholder ?? crudLabel('endTime')"
       :disabled="disabled"
       @update:model-value="(v) => set(1, v)"
     />
@@ -21,6 +21,7 @@
 </template>
 
 <script setup lang="ts">
+import { crudLabel } from '../style'
 import VmDatetimeField from './vm-datetime-field.vue'
 import type { DateTimePrecision } from '../../../shared/datetime-picker'
 
@@ -37,8 +38,8 @@ const props = withDefaults(
   }>(),
   {
     precision: 'day',
-    startPlaceholder: '开始时间',
-    endPlaceholder: '结束时间',
+    startPlaceholder: undefined,
+    endPlaceholder: undefined,
   },
 )
 

package/dist/admin/crud/components/vm-datetime-field.vue

@@ -6,8 +6,8 @@
     @click="onRootClick"
   >
     <div class="vm-dt-field__box">
-      <span v-if="!displayText && placeholder" class="vm-dt-field__ph">{{
-        placeholder
+      <span v-if="!displayText" class="vm-dt-field__ph">{{
+        placeholder ?? crudLabel('pickDateTime')
       }}</span>
       <span class="vm-dt-field__val">{{ displayText }}</span>
     </div>
@@ -42,6 +42,7 @@
 </template>
 
 <script setup lang="ts">
+import { crudLabel } from '../style'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { FocusScope } from 'reka-ui'
 import VmDateCalendarPanel from './vm-date-calendar-panel.vue'
@@ -64,7 +65,7 @@ const props = withDefaults(
   {
     modelValue: null,
     precision: 'day',
-    placeholder: '选择日期时间',
+    placeholder: undefined,
     disabled: false,
   },
 )

package/dist/admin/crud/components/vm-json-code.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script setup lang="ts">
+import { crudLabel } from '../style'
 import { computed } from 'vue'
 import { prettyJson } from '../../lib/json'
 
@@ -14,11 +15,11 @@ const props = withDefaults(
     empty?: string
   }>(),
   {
-    empty: '（空）',
+    empty: undefined,
   },
 )
 
-const body = computed(() => prettyJson(props.modelValue, props.empty))
+const body = computed(() => prettyJson(props.modelValue, props.empty ?? crudLabel('jsonEmpty')))
 </script>
 
 <style lang="scss" scoped>

package/dist/admin/crud/components/vm-json-editor.vue

@@ -5,7 +5,7 @@
       :class="{ 'is-error': Boolean(error) }"
       :value="inner"
       :disabled="disabled"
-      :placeholder="placeholder"
+      :placeholder="placeholder ?? crudLabel('jsonPlaceholder')"
       :rows="fill ? undefined : rows"
       @input="onInput"
       @blur="validate"
@@ -15,6 +15,7 @@
 </template>
 
 <script setup lang="ts">
+import { crudLabel } from '../style'
 import { ref, watch } from 'vue'
 import { parseJsonInput, prettyJson, textOfJson } from '../../lib/json'
 
@@ -32,7 +33,7 @@ const props = withDefaults(
     fill?: boolean
   }>(),
   {
-    placeholder: '请输入 JSON',
+    placeholder: undefined,
     rows: 8,
     formatOnBlur: true,
     fill: false,

package/dist/admin/crud/components/vm-json-kv-editor.vue

@@ -25,14 +25,14 @@
           :filterable="false"
           :refresh-on-change="false"
           width="110px"
-          placeholder="类型"
+          :placeholder="crudLabel('jsonType')"
           @update:model-value="(v) => onKindChange(index, String(v))"
         />
         <input
           v-if="row.valueKind === 'string' || row.valueKind === 'number'"
           class="vm-json-kv__value"
           :value="row.stringValue"
-          :placeholder="row.valueKind === 'number' ? '数字' : 'value'"
+          :placeholder="row.valueKind === 'number' ? crudLabel('jsonNumber') : 'value'"
           :type="row.valueKind === 'number' ? 'number' : 'text'"
           @input="
             patchRow(index, {
@@ -51,7 +51,7 @@
           @update:model-value="(v) => patchRow(index, { stringValue: String(v) })"
         />
         <div v-else class="vm-json-kv__value-spacer" />
-        <div class="vm-json-kv__app" title="对App开放">
+        <div class="vm-json-kv__app" :title="crudLabel('openToApp')">
           <vm-switch
             :model-value="row.openToApp"
             :active-value="true"
@@ -62,13 +62,13 @@
         <vm-icon-btn
           v-if="row.valueKind === 'object'"
           icon="ri-add-line"
-          title="新增子键值对"
+          :title="crudLabel('addChildKv')"
           size="sm"
           @click="addChild(index)"
         />
         <vm-icon-btn
           icon="ri-delete-bin-line"
-          title="删除"
+          :title="crudLabel('delete')"
           size="sm"
           variant="danger"
           @click="removeRow(index)"
@@ -87,6 +87,7 @@
 </template>
 
 <script setup lang="ts">
+import { crudLabel } from '../style'
 import { computed, toValue, type MaybeRefOrGetter } from 'vue'
 import type { JsonKvNode, JsonValueKind } from '../json-kv'
 import VmSelect from './vm-select.vue'
@@ -109,17 +110,17 @@ const emit = defineEmits<{
   'update:modelValue': [JsonKvNode[]]
 }>()
 
-const defaultKindOptions = [
-  { label: '文本', value: 'string' },
-  { label: '数字', value: 'number' },
-  { label: '布尔', value: 'boolean' },
-  { label: '对象', value: 'object' },
-]
+const defaultKindOptions = computed(() => [
+  { label: crudLabel('jsonText'), value: 'string' },
+  { label: crudLabel('jsonNumber'), value: 'number' },
+  { label: crudLabel('jsonBoolean'), value: 'boolean' },
+  { label: crudLabel('jsonObject'), value: 'object' },
+])
 
 /** 平铺为 label/value；不走索引搜索（filterable=false） */
 const kindOptions = computed(() => {
   const list = toValue(props.kindOptions)
-  const raw = list?.length ? list : defaultKindOptions
+  const raw = list?.length ? list : defaultKindOptions.value
   return raw.map((opt) => ({
     label: String(opt.label ?? opt.name ?? opt.value ?? ''),
     value: opt.value as string | number,

package/dist/admin/crud/components/vm-multi-select.vue

@@ -44,7 +44,7 @@
             />
             <span>{{ opt.label }}</span>
           </label>
-          <div v-if="!options.length" class="vm-multi-select__empty">暂无选项</div>
+          <div v-if="!options.length" class="vm-multi-select__empty">{{ crudLabel('noOptions') }}</div>
         </div>
       </FocusScope>
     </Teleport>
@@ -52,6 +52,7 @@
 </template>
 
 <script setup lang="ts">
+import { crudFormat, crudLabel } from '../style'
 import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
 import { FocusScope } from 'reka-ui'
 import { POPUP_TRIGGER_GAP } from '../../lib/dialog-float'
@@ -69,7 +70,7 @@ const props = withDefaults(
   {
     modelValue: () => [],
     options: () => [],
-    placeholder: '请选择',
+    placeholder: undefined,
   },
 )
 
@@ -96,13 +97,13 @@ function normalizeMulti(
 const selected = computed(() => normalizeMulti(props.modelValue))
 
 const triggerText = computed(() => {
-  if (!selected.value.length) return props.placeholder
+  if (!selected.value.length) return props.placeholder ?? crudLabel('pleaseSelect')
   const labels = selected.value.map((v) => {
     const hit = props.options.find((o) => String(o.value) === String(v))
     return hit?.label ?? String(v)
   })
   if (labels.length <= 2) return labels.join('、')
-  return `已选 ${labels.length} 项`
+  return crudFormat(crudLabel('selectedCount'), labels.length)
 })
 
 function isChecked(v: string | number | boolean) {

package/dist/admin/crud/components/vm-number-range.vue

@@ -5,7 +5,7 @@
         class="vm-number-range__input"
         :type="mode === 'float' ? 'text' : 'number'"
         inputmode="decimal"
-        :placeholder="startPlaceholder"
+        :placeholder="startPlaceholder ?? crudLabel('min')"
         :disabled="disabled"
         :value="display(0)"
         @input="(e) => onInput(0, e)"
@@ -19,7 +19,7 @@
         class="vm-number-range__input"
         :type="mode === 'float' ? 'text' : 'number'"
         inputmode="decimal"
-        :placeholder="endPlaceholder"
+        :placeholder="endPlaceholder ?? crudLabel('max')"
         :disabled="disabled"
         :value="display(1)"
         @input="(e) => onInput(1, e)"
@@ -31,6 +31,7 @@
 </template>
 
 <script setup lang="ts">
+import { crudLabel } from '../style'
 defineOptions({ name: 'vm-number-range' })
 
 const props = withDefaults(
@@ -44,8 +45,8 @@ const props = withDefaults(
   }>(),
   {
     mode: 'int',
-    startPlaceholder: '最小值',
-    endPlaceholder: '最大值',
+    startPlaceholder: undefined,
+    endPlaceholder: undefined,
   },
 )