@jari-ace/element-plus-component 0.0.2 → 0.1.1

package/packages/components/inputI18n/InputI18n.vue

@@ -1,142 +1,142 @@
-<script setup lang="ts">
-import {ElInput, ElOption, ElSelect} from "element-plus";
-import {nextTick, onUnmounted, ref, watch} from "vue"
-import {createAxios, 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 = createAxios()
-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 {createAxios, 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 = createAxios()
+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);

package/packages/components/inputNumber/JaInputNumber.vue

@@ -1,98 +1,98 @@
-<script setup lang="ts">
-import {inject, ref, watch, computed} from 'vue'
-import {ElInputNumber} from 'element-plus'
-import type {ValidationInstance} from '../../hooks/useBackendValidations'
-import {getValue, setValue} from "../../utils/objectUtils";
-
-const props = withDefaults(defineProps<{
-    min?: number
-    max?: number
-    step?: number
-    stepStrictly?: boolean
-    precision?: number
-    size?: 'large' | 'default' | 'small'
-    readonly?: boolean
-    disabled?: boolean
-    controls?: boolean
-    controlsPosition?: '' | 'right'
-    name?: string
-    label?: string
-    ariaLabel?: string
-    placeholder?: string
-    id?: string
-    valueOnClear?: number | null | 'min' | 'max'
-    validateEvent?: boolean
-}>(), {
-    min: -Infinity,
-    max: Infinity,
-    step: 1,
-    stepStrictly: false,
-    size: 'small',
-    readonly: false,
-    controls: true,
-    validateEvent: true
-})
-
-const model = inject('aceFormModel') as Record<string, any>
-const prop = inject('aceFormItemProp') as string
-const validator = inject('aceFormValidator') as ValidationInstance
-const size = computed<'large' | 'default' | 'small' | undefined>(() => {
-    return props.size ? props.size : inject("aceFormSize");
-});
-const input = ref<typeof ElInputNumber>()
-const emit = defineEmits<{
-    blur: [evt: Event]
-    focus: [evt: Event]
-    change: [value?: number]
-}>()
-type ModelType = number;
-
-function onChange(value?: number) {
-    validator.removeFieldError(prop)
-    setValue(model.formData, prop, mv.value)
-    emit('change', value)
-}
-
-const mv = ref(getValue(model.formData, prop) as ModelType);
-watch(() => model.formData, () => {
-    mv.value = getValue(model.formData, prop) as ModelType
-}, {
-    deep: true
-})
-defineExpose({
-    focus() {
-        input?.value?.focus()
-    },
-    blur() {
-        input?.value?.blur()
-    },
-    elInputNumber: input
-})
-</script>
-
-<template>
-    <el-input-number :min="min"
-                     :max="max"
-                     :label="label"
-                     :disabled="disabled"
-                     :id="id"
-                     :aria-label="ariaLabel"
-                     :controls="controls"
-                     :controls-position="controlsPosition"
-                     v-model="mv"
-                     :name="name"
-                     :placeholder="placeholder"
-                     :precision="precision"
-                     :readonly="readonly"
-                     :size="size"
-                     :step="step"
-                     :step-strictly="stepStrictly"
-                     :value-on-clear="valueOnClear"
-                     :validate-event="validateEvent"
-                     @change="onChange"
-                     @blur="evt => $emit('blur', evt)"
-                     @focus="evt => $emit('focus', evt)">
-        <slot name="decrease-icon"></slot>
-        <slot name="increase-icon"></slot>
-    </el-input-number>
-</template>
+<script setup lang="ts">
+import {inject, ref, watch, computed} from 'vue'
+import {ElInputNumber} from 'element-plus'
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import {getValue, setValue} from "../../utils/objectUtils";
+
+const props = withDefaults(defineProps<{
+    min?: number
+    max?: number
+    step?: number
+    stepStrictly?: boolean
+    precision?: number
+    size?: 'large' | 'default' | 'small'
+    readonly?: boolean
+    disabled?: boolean
+    controls?: boolean
+    controlsPosition?: '' | 'right'
+    name?: string
+    label?: string
+    ariaLabel?: string
+    placeholder?: string
+    id?: string
+    valueOnClear?: number | null | 'min' | 'max'
+    validateEvent?: boolean
+}>(), {
+    min: -Infinity,
+    max: Infinity,
+    step: 1,
+    stepStrictly: false,
+    size: 'small',
+    readonly: false,
+    controls: true,
+    validateEvent: true
+})
+
+const model = inject('aceFormModel') as Record<string, any>
+const prop = inject('aceFormItemProp') as string
+const validator = inject('aceFormValidator') as ValidationInstance
+const size = computed<'large' | 'default' | 'small' | undefined>(() => {
+    return props.size ? props.size : inject("aceFormSize");
+});
+const input = ref<typeof ElInputNumber>()
+const emit = defineEmits<{
+    blur: [evt: Event]
+    focus: [evt: Event]
+    change: [value?: number]
+}>()
+type ModelType = number;
+
+function onChange(value?: number) {
+    validator.removeFieldError(prop)
+    setValue(model.formData, prop, mv.value)
+    emit('change', value)
+}
+
+const mv = ref(getValue(model.formData, prop) as ModelType);
+watch(() => model.formData, () => {
+    mv.value = getValue(model.formData, prop) as ModelType
+}, {
+    deep: true
+})
+defineExpose({
+    focus() {
+        input?.value?.focus()
+    },
+    blur() {
+        input?.value?.blur()
+    },
+    elInputNumber: input
+})
+</script>
+
+<template>
+    <el-input-number :min="min"
+                     :max="max"
+                     :label="label"
+                     :disabled="disabled"
+                     :id="id"
+                     :aria-label="ariaLabel"
+                     :controls="controls"
+                     :controls-position="controlsPosition"
+                     v-model="mv"
+                     :name="name"
+                     :placeholder="placeholder"
+                     :precision="precision"
+                     :readonly="readonly"
+                     :size="size"
+                     :step="step"
+                     :step-strictly="stepStrictly"
+                     :value-on-clear="valueOnClear"
+                     :validate-event="validateEvent"
+                     @change="onChange"
+                     @blur="evt => $emit('blur', evt)"
+                     @focus="evt => $emit('focus', evt)">
+        <slot name="decrease-icon"></slot>
+        <slot name="increase-icon"></slot>
+    </el-input-number>
+</template>

package/packages/components/inputNumber/index.ts

@@ -1,4 +1,4 @@
-import {type SFCWithInstall, withInstall} from "../../utils/install";
-import InputNumber from "./JaInputNumber.vue";
-export const JaInputNumber:SFCWithInstall<typeof InputNumber> = withInstall(InputNumber);
-export default InputNumber;
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import InputNumber from "./JaInputNumber.vue";
+export const JaInputNumber:SFCWithInstall<typeof InputNumber> = withInstall(InputNumber);
+export default InputNumber;