@jari-ace/element-plus-component 0.2.2 → 0.3.0

package/packages/components/inputI18n/I18nBundleEditor.vue

@@ -1,76 +1,76 @@
-<script setup lang="ts">
-import {
-    createAxiosWithoutCache,
-    type CreateAppMessageBundleCommand, useAppMessageApi, type AppInstance
-} from "@jari-ace/app-bolts";
-import {ref, watch} from 'vue'
-import {useAppInstances} from "../../hooks/useAppInstances";
-import {ElDrawer, ElForm, ElFormItem, ElInput, ElButton} from "element-plus";
-import {JaButton} from "../button";
-
-const visible = defineModel<boolean>({
-    default: false,
-    required: true
-});
-const props = defineProps<{
-    appId: string,
-    preKey?: string
-}>();
-const axios = createAxiosWithoutCache();
-const api = useAppMessageApi(axios);
-const app = ref<AppInstance>();
-const key = ref("");
-const messages = ref<Record<string, string>>({})
-const emits = defineEmits(["success"])
-const appInstances = await useAppInstances();
-
-function onOpen() {
-    loadApp();
-    key.value = props.preKey ?? "";
-    messages.value = {};
-}
-
-async function onSubmit() {
-    const cmd = {
-        key: key.value,
-        messages: messages.value,
-        appInstance: {
-            id: props.appId
-        }
-    } as CreateAppMessageBundleCommand;
-    await api.createBundle(cmd);
-    visible.value = false;
-    emits('success', key.value);
-}
-
-async function loadApp() {
-    app.value = await appInstances.getById(props.appId)
-}
-
-watch(() => props.appId, async () => {
-    await loadApp();
-})
-</script>
-
-<template>
-    <el-drawer destroy-on-close append-to-body v-model="visible"
-               title="创建国际化文本" @open="onOpen">
-        <el-form label-position="top" size="default">
-            <el-form-item label="文本键" required>
-                <el-input v-model="key" v-focus></el-input>
-            </el-form-item>
-            <el-form-item v-for="l in app?.supportedLocales" :key="l" :label="l">
-                <el-input type="textarea" :rows="4" v-model="messages[l]"></el-input>
-            </el-form-item>
-        </el-form>
-        <template #footer>
-            <ja-button size="default" shortcut="Alt+Enter" type="primary" @click="onSubmit">确定
-            </ja-button>
-            <el-button size="default" plain @click="visible = false">取消</el-button>
-        </template>
-    </el-drawer>
-</template>
-
-<style scoped lang="scss">
-
-</style>
+<script setup lang="ts">
+import {
+    createAxiosWithoutCache,
+    type CreateAppMessageBundleCommand, useAppMessageApi, type AppInstance
+} from "@jari-ace/app-bolts";
+import {ref, watch} from 'vue'
+import {useAppInstances} from "../../hooks/useAppInstances";
+import {ElDrawer, ElForm, ElFormItem, ElInput, ElButton} from "element-plus";
+import {JaButton} from "../button";
+
+const visible = defineModel<boolean>({
+    default: false,
+    required: true
+});
+const props = defineProps<{
+    appId: string,
+    preKey?: string
+}>();
+const axios = createAxiosWithoutCache();
+const api = useAppMessageApi(axios);
+const app = ref<AppInstance>();
+const key = ref("");
+const messages = ref<Record<string, string>>({})
+const emits = defineEmits(["success"])
+const appInstances = await useAppInstances();
+
+function onOpen() {
+    loadApp();
+    key.value = props.preKey ?? "";
+    messages.value = {};
+}
+
+async function onSubmit() {
+    const cmd = {
+        key: key.value,
+        messages: messages.value,
+        appInstance: {
+            id: props.appId
+        }
+    } as CreateAppMessageBundleCommand;
+    await api.createBundle(cmd);
+    visible.value = false;
+    emits('success', key.value);
+}
+
+async function loadApp() {
+    app.value = await appInstances.getById(props.appId)
+}
+
+watch(() => props.appId, async () => {
+    await loadApp();
+})
+</script>
+
+<template>
+    <el-drawer destroy-on-close append-to-body v-model="visible"
+               title="创建国际化文本" @open="onOpen">
+        <el-form label-position="top" size="default">
+            <el-form-item label="文本键" required>
+                <el-input v-model="key" v-focus></el-input>
+            </el-form-item>
+            <el-form-item v-for="l in app?.supportedLocales" :key="l" :label="l">
+                <el-input type="textarea" :rows="4" v-model="messages[l]"></el-input>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <ja-button size="default" shortcut="Alt+Enter" type="primary" @click="onSubmit">确定
+            </ja-button>
+            <el-button size="default" plain @click="visible = false">取消</el-button>
+        </template>
+    </el-drawer>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/packages/components/inputI18n/InputI18n.vue

@@ -1,146 +1,146 @@
-<script setup lang="ts">
-import {ElInput, ElOption, ElSelect} from "element-plus";
-import {nextTick, onUnmounted, ref, watch} from "vue"
-import {
-    createAxiosWithoutCache,
-    useAppMessageApi,
-    useLoginUser
-} from "@jari-ace/app-bolts";
-import MessageEditor from "./I18nBundleEditor.vue"
-import {trim} from "lodash-es";
-import {useAppInstances} from "../../hooks/useAppInstances";
-import debounce from "lodash-es/debounce";
-import {JaButton} from "../button";
-
-const props = withDefaults(defineProps<{
-    appId?: string,
-    size?: 'default' | 'large' | 'small',
-    textarea?: boolean,
-    disabled?: boolean
-}>(), {
-    size: 'default',
-    textarea: false
-})
-const model = defineModel<string>({
-    default: ""
-})
-const axios = createAxiosWithoutCache()
-const api = useAppMessageApi(axios)
-const locale = useLoginUser().locale
-const messageKeys = ref<string[]>()
-const focused = ref(false)
-const editorVisible = ref(false)
-const select = ref<InstanceType<typeof ElSelect>>()
-const appName = ref("");
-const appInstances = await useAppInstances();
-const filterKey = ref("")
-const i18nTxt = ref("")
-const selectI18n = ref<InstanceType<typeof ElSelect>>();
-const emits = defineEmits(["change", "focus", "blur"])
-const debounceLoadMessage = debounce(loadMessage, 500)
-let timeoutHandle: number | undefined = undefined;
-
-async function loadMessage(val?: string) {
-    if (!val) val = model.value;
-    if (!props.appId) return
-    const app = await appInstances.getById(props.appId)
-    appName.value = app.name
-    if (!val || !appName.value) {
-        i18nTxt.value = "";
-        return;
-    }
-    i18nTxt.value = val
-    let key = val;
-    if (val && val.length > 0) {
-        key = trim(key);
-        if (key.startsWith('{') && key.endsWith('}')) {
-            key = key.substring(1, key.length - 1);
-        }
-    }
-    const messages = await api.getByKey(appName.value, key, {
-        cancelDuplicatedRequest: false
-    });
-    const message = messages.find(m => m.locale === locale)
-    if (message) {
-        i18nTxt.value = message.message
-    }
-}
-
-async function filterMessages(filterName: string) {
-    filterKey.value = filterName
-    messageKeys.value = await api.searchKeys(appName.value, filterName)
-}
-
-async function onFocus() {
-    focused.value = true;
-    await nextTick()
-    emits("focus")
-    select.value?.focus()
-}
-
-function onBlur() {
-    timeoutHandle = setTimeout(() => {
-        focused.value = false
-    }, 200)
-    emits("blur")
-}
-
-onUnmounted(() => {
-    debounceLoadMessage.cancel()
-    if (timeoutHandle) {
-        clearTimeout(timeoutHandle)
-    }
-})
-
-watch(model, () => {
-    debounceLoadMessage();
-}, {
-    deep: true,
-    immediate: true
-})
-
-function onChange(value: string) {
-    emits('change', value)
-}
-
-async function onNewI18nCreated(messageKey: string) {
-    await filterMessages(filterKey.value);
-    model.value = "{" + messageKey + "}";
-    selectI18n.value.focus
-}
-
-defineExpose({
-    focus() {
-        selectI18n?.value.focus()
-    },
-    blur() {
-        select?.value.blur()
-    }
-})
-</script>
-
-<template>
-    <el-input ref="selectI18n" @focus="onFocus" v-show="!focused" v-model="i18nTxt" :size="size"
-              :disabled="disabled"
-              :type="textarea ? 'textarea': undefined">
-    </el-input>
-    <el-select ref="select" filterable remote :remote-method="filterMessages" v-show="focused"
-               :disabled="disabled" default-first-option
-               remote-show-suffix @change="onChange" :size="size" allow-create clearable
-               @blur="onBlur" v-model="model">
-        <el-option v-for="k in messageKeys" :key="k" :value="'{' + k +'}'"
-                   :label="'{' + k +'}'"></el-option>
-        <template #footer>
-            <ja-button link :style="{width: '100%'}" type="primary" @click="editorVisible=true"
-                       shortcut="Alt+I">
-                新建国际化文本(Alt+I)
-            </ja-button>
-        </template>
-    </el-select>
-    <message-editor :app-id="appId" :pre-key="filterKey" v-model="editorVisible"
-                    @success="onNewI18nCreated"></message-editor>
-</template>
-
-<style scoped lang="scss">
-
-</style>
+<script setup lang="ts">
+import {ElInput, ElOption, ElSelect} from "element-plus";
+import {nextTick, onUnmounted, ref, watch} from "vue"
+import {
+    createAxiosWithoutCache,
+    useAppMessageApi,
+    useLoginUser
+} from "@jari-ace/app-bolts";
+import MessageEditor from "./I18nBundleEditor.vue"
+import {trim} from "lodash-es";
+import {useAppInstances} from "../../hooks/useAppInstances";
+import debounce from "lodash-es/debounce";
+import {JaButton} from "../button";
+
+const props = withDefaults(defineProps<{
+    appId?: string,
+    size?: 'default' | 'large' | 'small',
+    textarea?: boolean,
+    disabled?: boolean
+}>(), {
+    size: 'default',
+    textarea: false
+})
+const model = defineModel<string>({
+    default: ""
+})
+const axios = createAxiosWithoutCache()
+const api = useAppMessageApi(axios)
+const locale = useLoginUser().locale
+const messageKeys = ref<string[]>()
+const focused = ref(false)
+const editorVisible = ref(false)
+const select = ref<InstanceType<typeof ElSelect>>()
+const appName = ref("");
+const appInstances = await useAppInstances();
+const filterKey = ref("")
+const i18nTxt = ref("")
+const selectI18n = ref<InstanceType<typeof ElSelect>>();
+const emits = defineEmits(["change", "focus", "blur"])
+const debounceLoadMessage = debounce(loadMessage, 500)
+let timeoutHandle: number | undefined = undefined;
+
+async function loadMessage(val?: string) {
+    if (!val) val = model.value;
+    if (!props.appId) return
+    const app = await appInstances.getById(props.appId)
+    appName.value = app.name
+    if (!val || !appName.value) {
+        i18nTxt.value = "";
+        return;
+    }
+    i18nTxt.value = val
+    let key = val;
+    if (val && val.length > 0) {
+        key = trim(key);
+        if (key.startsWith('{') && key.endsWith('}')) {
+            key = key.substring(1, key.length - 1);
+        }
+    }
+    const messages = await api.getByKey(appName.value, key, {
+        cancelDuplicatedRequest: false
+    });
+    const message = messages.find(m => m.locale === locale)
+    if (message) {
+        i18nTxt.value = message.message
+    }
+}
+
+async function filterMessages(filterName: string) {
+    filterKey.value = filterName
+    messageKeys.value = await api.searchKeys(appName.value, filterName)
+}
+
+async function onFocus() {
+    focused.value = true;
+    await nextTick()
+    emits("focus")
+    select.value?.focus()
+}
+
+function onBlur() {
+    timeoutHandle = setTimeout(() => {
+        focused.value = false
+    }, 200)
+    emits("blur")
+}
+
+onUnmounted(() => {
+    debounceLoadMessage.cancel()
+    if (timeoutHandle) {
+        clearTimeout(timeoutHandle)
+    }
+})
+
+watch(model, () => {
+    debounceLoadMessage();
+}, {
+    deep: true,
+    immediate: true
+})
+
+function onChange(value: string) {
+    emits('change', value)
+}
+
+async function onNewI18nCreated(messageKey: string) {
+    await filterMessages(filterKey.value);
+    model.value = "{" + messageKey + "}";
+    selectI18n.value.focus
+}
+
+defineExpose({
+    focus() {
+        selectI18n?.value.focus()
+    },
+    blur() {
+        select?.value.blur()
+    }
+})
+</script>
+
+<template>
+    <el-input ref="selectI18n" @focus="onFocus" v-show="!focused" v-model="i18nTxt" :size="size"
+              :disabled="disabled"
+              :type="textarea ? 'textarea': undefined">
+    </el-input>
+    <el-select ref="select" filterable remote :remote-method="filterMessages" v-show="focused"
+               :disabled="disabled" default-first-option
+               remote-show-suffix @change="onChange" :size="size" allow-create clearable
+               @blur="onBlur" v-model="model">
+        <el-option v-for="k in messageKeys" :key="k" :value="'{' + k +'}'"
+                   :label="'{' + k +'}'"></el-option>
+        <template #footer>
+            <ja-button link :style="{width: '100%'}" type="primary" @click="editorVisible=true"
+                       shortcut="Alt+I">
+                新建国际化文本(Alt+I)
+            </ja-button>
+        </template>
+    </el-select>
+    <message-editor :app-id="appId" :pre-key="filterKey" v-model="editorVisible"
+                    @success="onNewI18nCreated"></message-editor>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/packages/components/inputI18n/JaInputI18n.vue

@@ -1,50 +1,50 @@
-<script setup lang="ts">
-import type {ValidationInstance} from '../../hooks/useBackendValidations'
-import {inject, ref, watch} from "vue";
-import {ElSelect} from "element-plus";
-import {getValue, setValue} from "../../utils/objectUtils";
-import InputI18n from "./InputI18n.vue";
-
-const input = ref<typeof ElSelect>({} as typeof ElSelect)
-const model = inject('aceFormModel') as Record<string, any>
-const prop = inject('aceFormItemProp') as string
-const validator = inject('aceFormValidator') as ValidationInstance
-const emit = defineEmits<{
-    change: [value: string]
-}>()
-const props = defineProps<{
-    appId: string
-}>()
-
-function onChange(value: string) {
-    validator.removeFieldError(prop)
-    setValue(model.formData, prop, value);
-    emit('change', value)
-}
-
-type modelType = string;
-
-const mv = ref<modelType>();
-watch(() => model.formData, () => {
-    const v = getValue(model.formData, prop) as modelType
-    mv.value = v;
-}, {
-    immediate: true,
-    deep: true
-})
-
-defineExpose({
-    focus: () => input.value.focus(),
-    blur: () => input.value.blur(),
-    elSelect: input
-})
-</script>
-
-<template>
-    <input-i18n
-        ref="input"
-        v-model="mv"
-        @change="onChange"
-        v-bind="$attrs" :app-id="props.appId">
-    </input-i18n>
-</template>
+<script setup lang="ts">
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import {inject, ref, watch} from "vue";
+import {ElSelect} from "element-plus";
+import {getValue, setValue} from "../../utils/objectUtils";
+import InputI18n from "./InputI18n.vue";
+
+const input = ref<typeof ElSelect>({} as typeof ElSelect)
+const model = inject('aceFormModel') as Record<string, any>
+const prop = inject('aceFormItemProp') as string
+const validator = inject('aceFormValidator') as ValidationInstance
+const emit = defineEmits<{
+    change: [value: string]
+}>()
+const props = defineProps<{
+    appId: string
+}>()
+
+function onChange(value: string) {
+    validator.removeFieldError(prop)
+    setValue(model.formData, prop, value);
+    emit('change', value)
+}
+
+type modelType = string;
+
+const mv = ref<modelType>();
+watch(() => model.formData, () => {
+    const v = getValue(model.formData, prop) as modelType
+    mv.value = v;
+}, {
+    immediate: true,
+    deep: true
+})
+
+defineExpose({
+    focus: () => input.value.focus(),
+    blur: () => input.value.blur(),
+    elSelect: input
+})
+</script>
+
+<template>
+    <input-i18n
+        ref="input"
+        v-model="mv"
+        @change="onChange"
+        v-bind="$attrs" :app-id="props.appId">
+    </input-i18n>
+</template>

package/packages/components/inputI18n/index.ts

@@ -1,8 +1,8 @@
-import {type SFCWithInstall, withInstall} from "../../utils/install";
-import InputI18n from "./InputI18n.vue";
-import _JaInputI18n from "./JaInputI18n.vue";
-
-// 存在绑定的model watch不响应的问题，需用点击第二次watch才响应mv变化，这个问题无法解决
-// export const JaInputI18n: SFCWithInstall<typeof _JaInputI18n> = withInstall(_JaInputI18n);
-
-export const JaInputI18nRaw: SFCWithInstall<typeof InputI18n> = withInstall(InputI18n);
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import InputI18n from "./InputI18n.vue";
+import _JaInputI18n from "./JaInputI18n.vue";
+
+// 存在绑定的model watch不响应的问题，需用点击第二次watch才响应mv变化，这个问题无法解决
+// export const JaInputI18n: SFCWithInstall<typeof _JaInputI18n> = withInstall(_JaInputI18n);
+
+export const JaInputI18nRaw: SFCWithInstall<typeof InputI18n> = withInstall(InputI18n);