@jari-ace/element-plus-component 0.1.9 → 0.2.0

package/packages/components/input/JaInput.vue

@@ -1,143 +1,143 @@
-<script setup lang="ts">
-import {type Component, inject, type StyleValue, ref, watch} from 'vue'
-import {ElInput} from 'element-plus'
-import type {ValidationInstance} from '../../hooks/useBackendValidations'
-import type {EpPropMergeType} from "element-plus/es/utils";
-import {getValue, setValue} from "../../utils/objectUtils";
-
-const props = withDefaults(defineProps<{
-    type?: string
-    maxLength?: number
-    minLength?: number
-    showWordLimit?: boolean
-    placeholder?: string
-    clearable?: boolean
-    formatter?: (value: string | number) => string
-    parser?: (value: string) => string
-    showPassword?: boolean
-    disabled?: boolean
-    size?: 'large' | 'default' | 'small'
-    prefixIcon?: string | Component
-    suffixIcon?: string | Component
-    rows?: number
-    autosize?: boolean | object
-    autocomplete?: string
-    name?: string
-    readonly?: boolean,
-    max?: any
-    min?: any
-    step?: any
-    resize?: 'none' | 'both' | 'horizontal' | 'vertical'
-    autofocus?: boolean
-    form?: string
-    label?: string
-    tabindex?: string | number
-    validateEvent?: boolean
-    inputStyle?: StyleValue
-}>(), {
-    type: 'text',
-    showWordLimit: false,
-    clearable: false,
-    showPassword: false,
-    disabled: false,
-    rows: 2,
-    autosize: false,
-    autocomplete: 'off',
-    readonly: false,
-    autofocus: false,
-    validateEvent: true
-})
-
-const model = inject('aceFormModel') as Record<string, any>
-const prop = inject('aceFormItemProp') as string
-const validator = inject('aceFormValidator') as ValidationInstance
-const input = ref<typeof ElInput>({} as typeof ElInput)
-const emit = defineEmits<{
-    blur: [evt: Event]
-    focus: [evt: Event]
-    change: [value: string]
-    input: [value: string]
-    clear: [void]
-}>()
-
-function onChange(value: string) {
-    validator.removeFieldError(prop);
-    setValue(model.formData, prop, mv.value);
-    emit('change', value);
-}
-
-type ModelType = EpPropMergeType<(new (...args: any[]) => string | number)
-    | (() => string | number | null | undefined)
-    | ((new (...args: any[]) => string | number) | (() => string | number | null | undefined))[],
-    unknown, unknown>;
-
-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()
-    },
-    select() {
-        input.value.select()
-    },
-    clear() {
-        input.value.clear()
-    },
-    elInput: input
-})
-</script>
-
-<template>
-    <el-input
-        ref="input"
-        :type="type"
-        v-model="mv"
-        :maxlength="maxLength"
-        :minLength="minLength"
-        :show-word-limit="showWordLimit"
-        :placeholder="placeholder"
-        :clearable="clearable"
-        :formatter="formatter"
-        :parser="parser"
-        :show-password="showPassword"
-        :disabled="disabled"
-        :size="size"
-        :prefix-icon="prefixIcon"
-        :suffix-icon="suffixIcon"
-        :rows="rows"
-        :autosize="autosize"
-        :autocomplete="autocomplete"
-        :name="name"
-        :readonly="readonly"
-        :max="max"
-        :min="min"
-        :step="step"
-        :resize="resize"
-        :autofocus="autofocus"
-        :form="form"
-        :label="label"
-        :tabindex="tabindex"
-        :validate-event="validateEvent"
-        @blur="evt => $emit('blur', evt)"
-        @focus="evt => $emit('focus', evt)"
-        @change="onChange"
-        @input="value => $emit('input', value)"
-        @clear="() => $emit('clear')"
-    >
-        <template v-for="(_, name) in $slots" v-slot:[name]>
-            <slot :name="name"></slot>
-        </template>
-    </el-input>
-</template>
-
-<style scoped lang="scss">
-
-</style>
+<script setup lang="ts">
+import {type Component, inject, type StyleValue, ref, watch} from 'vue'
+import {ElInput} from 'element-plus'
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import type {EpPropMergeType} from "element-plus/es/utils";
+import {getValue, setValue} from "../../utils/objectUtils";
+
+const props = withDefaults(defineProps<{
+    type?: string
+    maxLength?: number
+    minLength?: number
+    showWordLimit?: boolean
+    placeholder?: string
+    clearable?: boolean
+    formatter?: (value: string | number) => string
+    parser?: (value: string) => string
+    showPassword?: boolean
+    disabled?: boolean
+    size?: 'large' | 'default' | 'small'
+    prefixIcon?: string | Component
+    suffixIcon?: string | Component
+    rows?: number
+    autosize?: boolean | object
+    autocomplete?: string
+    name?: string
+    readonly?: boolean,
+    max?: any
+    min?: any
+    step?: any
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical'
+    autofocus?: boolean
+    form?: string
+    label?: string
+    tabindex?: string | number
+    validateEvent?: boolean
+    inputStyle?: StyleValue
+}>(), {
+    type: 'text',
+    showWordLimit: false,
+    clearable: false,
+    showPassword: false,
+    disabled: false,
+    rows: 2,
+    autosize: false,
+    autocomplete: 'off',
+    readonly: false,
+    autofocus: false,
+    validateEvent: true
+})
+
+const model = inject('aceFormModel') as Record<string, any>
+const prop = inject('aceFormItemProp') as string
+const validator = inject('aceFormValidator') as ValidationInstance
+const input = ref<typeof ElInput>({} as typeof ElInput)
+const emit = defineEmits<{
+    blur: [evt: Event]
+    focus: [evt: Event]
+    change: [value: string]
+    input: [value: string]
+    clear: [void]
+}>()
+
+function onChange(value: string) {
+    validator.removeFieldError(prop);
+    setValue(model.formData, prop, mv.value);
+    emit('change', value);
+}
+
+type ModelType = EpPropMergeType<(new (...args: any[]) => string | number)
+    | (() => string | number | null | undefined)
+    | ((new (...args: any[]) => string | number) | (() => string | number | null | undefined))[],
+    unknown, unknown>;
+
+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()
+    },
+    select() {
+        input.value.select()
+    },
+    clear() {
+        input.value.clear()
+    },
+    elInput: input
+})
+</script>
+
+<template>
+    <el-input
+        ref="input"
+        :type="type"
+        v-model="mv"
+        :maxlength="maxLength"
+        :minLength="minLength"
+        :show-word-limit="showWordLimit"
+        :placeholder="placeholder"
+        :clearable="clearable"
+        :formatter="formatter"
+        :parser="parser"
+        :show-password="showPassword"
+        :disabled="disabled"
+        :size="size"
+        :prefix-icon="prefixIcon"
+        :suffix-icon="suffixIcon"
+        :rows="rows"
+        :autosize="autosize"
+        :autocomplete="autocomplete"
+        :name="name"
+        :readonly="readonly"
+        :max="max"
+        :min="min"
+        :step="step"
+        :resize="resize"
+        :autofocus="autofocus"
+        :form="form"
+        :label="label"
+        :tabindex="tabindex"
+        :validate-event="validateEvent"
+        @blur="evt => $emit('blur', evt)"
+        @focus="evt => $emit('focus', evt)"
+        @change="onChange"
+        @input="value => $emit('input', value)"
+        @clear="() => $emit('clear')"
+    >
+        <template v-for="(_, name) in $slots" v-slot:[name]>
+            <slot :name="name"></slot>
+        </template>
+    </el-input>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/packages/components/input/index.ts

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

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>