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

package/packages/components/radioGroup/JaRadioGroup.vue

@@ -1,50 +1,50 @@
-<script setup lang="ts">
-import type {ValidationInstance} from '../../hooks/useBackendValidations'
-import {inject, ref, watch} from "vue";
-import {ElRadioGroup} from "element-plus";
-import type {EpPropMergeType} from "element-plus/es/utils";
-import {getValue, setValue} from "../../utils/objectUtils";
-
-const input = ref<typeof ElRadioGroup>({} as typeof ElRadioGroup)
-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 | number | boolean | undefined]
-}>()
-
-function onChange(val: string | number | boolean | undefined) {
-    validator.removeFieldError(prop)
-    setValue(model.formData, prop, mv.value);
-    emit('change', val)
-}
-
-type modelType =
-    EpPropMergeType<readonly [StringConstructor, NumberConstructor, BooleanConstructor], unknown, unknown>
-    | undefined;
-
-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(),
-    elRadioGroup: input
-})
-</script>
-
-<template>
-    <el-radio-group
-        ref="input"
-        v-model="mv"
-        @change="onChange"
-        v-bind="$attrs">
-        <template v-for="(_, name) in $slots" v-slot:[name]>
-            <slot :name="name"></slot>
-        </template>
-    </el-radio-group>
-</template>
+<script setup lang="ts">
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import {inject, ref, watch} from "vue";
+import {ElRadioGroup} from "element-plus";
+import type {EpPropMergeType} from "element-plus/es/utils";
+import {getValue, setValue} from "../../utils/objectUtils";
+
+const input = ref<typeof ElRadioGroup>({} as typeof ElRadioGroup)
+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 | number | boolean | undefined]
+}>()
+
+function onChange(val: string | number | boolean | undefined) {
+    validator.removeFieldError(prop)
+    setValue(model.formData, prop, mv.value);
+    emit('change', val)
+}
+
+type modelType =
+    EpPropMergeType<readonly [StringConstructor, NumberConstructor, BooleanConstructor], unknown, unknown>
+    | undefined;
+
+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(),
+    elRadioGroup: input
+})
+</script>
+
+<template>
+    <el-radio-group
+        ref="input"
+        v-model="mv"
+        @change="onChange"
+        v-bind="$attrs">
+        <template v-for="(_, name) in $slots" v-slot:[name]>
+            <slot :name="name"></slot>
+        </template>
+    </el-radio-group>
+</template>

package/packages/components/radioGroup/index.ts

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

package/packages/components/rolePicker/RoleEditor.vue

@@ -1,129 +1,129 @@
-<script setup lang="ts">
-import {ref} from "vue";
-
-import {
-    type AppInstance,
-    createAxiosWithoutCache,
-    type Role, useAppApi,
-    useLoading, useRoleApi
-} from "@jari-ace/app-bolts";
-import {JaButton} from "../button";
-import {JaInput} from "../input";
-import {JaFormItem} from "../formItem";
-import {JaBaseRolePicker} from "./index";
-import {useBackendValidations} from "../../hooks/useBackendValidations";
-import type {JaForm} from "../form";
-import {ElDrawer, ElButton} from "element-plus";
-import vFocus from "../../directives/autofocus"
-import {useAppInstances} from "../../hooks/useAppInstances";
-
-const visible = defineModel<boolean>({
-    default: false
-});
-const props = defineProps<{
-    appName?: string
-}>();
-const emits = defineEmits<{
-    (e: "success", g: Role): void
-}>();
-
-const initData: Role = {
-    hasChildren: false, parentId: "0",
-    releaseSource: "",
-    app: {
-        id: "0"
-    },
-    caption: "",
-    compositeRoles: [],
-    dataVersion: 0,
-    description: "",
-    id: "0",
-    name: ""
-}
-
-const state = ref<{
-    formData: Role
-}>({
-    formData: {...initData}
-})
-const axios = createAxiosWithoutCache();
-const validator = useBackendValidations(Object.keys(initData), axios);
-const loading = useLoading(axios);
-const api = useRoleApi(axios);
-const formRef = ref<typeof JaForm>()
-const rolePicker = ref<InstanceType<typeof JaBaseRolePicker>>();
-const app = ref<AppInstance>()
-
-async function init() {
-    state.value.formData = {...initData};
-    if (!props.appName) {
-        throw new Error('rolePicker组件的appName属性不能为空')
-    }
-    app.value = await (
-        await useAppInstances()
-    ).getByName(props.appName);
-}
-
-async function submit() {
-    if (!props.appName) return;
-    const role = state.value.formData;
-    const s = rolePicker.value?.currentRole;
-    formRef.value?.validate(() => api.create({
-        addTo: s ? {
-            id: s.id,
-            name: s.name,
-            app: {
-                id: app.value!.id
-            }
-        } : undefined,
-        app: {
-            id: app.value!.id,
-        },
-        description: role.description,
-        name: role.name,
-        caption: role.caption
-    }).then(g => {
-        emits('success', g);
-        visible.value = false;
-    }))
-}
-</script>
-
-<template>
-    <el-drawer destroy-on-close
-               append-to-body
-               title="新建角色"
-               v-model="visible"
-               @open="init">
-        <ja-form
-            ref="formRef"
-            :model="state"
-            :validator="validator">
-            <ja-form-item label="角色名称" prop="name" required>
-                <ja-input v-focus/>
-            </ja-form-item>
-            <ja-form-item label="上级角色" prop="none">
-                <ja-base-role-picker ref="rolePicker"
-                                     placeholder="请选择上级角色，置空表示添加顶层角色"
-                                     :app-name="props.appName"></ja-base-role-picker>
-            </ja-form-item>
-            <ja-form-item label="角色标题" prop="caption" required>
-                <ja-input-i18n-raw :app-id="app?.id" size="small"
-                                   v-model="state.formData.caption"></ja-input-i18n-raw>
-            </ja-form-item>
-            <ja-form-item label="角色说明" prop="description">
-                <ja-input type="textarea"/>
-            </ja-form-item>
-        </ja-form>
-        <template #footer>
-            <ja-button size="default" type="primary" @click="submit" :loading="loading"
-                       shortcut="Alt+Enter">确定
-            </ja-button>
-            <el-button size="default" @click="visible = false">取消</el-button>
-        </template>
-    </el-drawer>
-</template>
-
-<style scoped lang="scss">
-
-</style>
+<script setup lang="ts">
+import {ref} from "vue";
+
+import {
+    type AppInstance,
+    createAxiosWithoutCache,
+    type Role, useAppApi,
+    useLoading, useRoleApi
+} from "@jari-ace/app-bolts";
+import {JaButton} from "../button";
+import {JaInput} from "../input";
+import {JaFormItem} from "../formItem";
+import {JaBaseRolePicker} from "./index";
+import {useBackendValidations} from "../../hooks/useBackendValidations";
+import type {JaForm} from "../form";
+import {ElDrawer, ElButton} from "element-plus";
+import vFocus from "../../directives/autofocus"
+import {useAppInstances} from "../../hooks/useAppInstances";
+
+const visible = defineModel<boolean>({
+    default: false
+});
+const props = defineProps<{
+    appName?: string
+}>();
+const emits = defineEmits<{
+    (e: "success", g: Role): void
+}>();
+
+const initData: Role = {
+    hasChildren: false, parentId: "0",
+    releaseSource: "",
+    app: {
+        id: "0"
+    },
+    caption: "",
+    compositeRoles: [],
+    dataVersion: 0,
+    description: "",
+    id: "0",
+    name: ""
+}
+
+const state = ref<{
+    formData: Role
+}>({
+    formData: {...initData}
+})
+const axios = createAxiosWithoutCache();
+const validator = useBackendValidations(Object.keys(initData), axios);
+const loading = useLoading(axios);
+const api = useRoleApi(axios);
+const formRef = ref<typeof JaForm>()
+const rolePicker = ref<InstanceType<typeof JaBaseRolePicker>>();
+const app = ref<AppInstance>()
+
+async function init() {
+    state.value.formData = {...initData};
+    if (!props.appName) {
+        throw new Error('rolePicker组件的appName属性不能为空')
+    }
+    app.value = await (
+        await useAppInstances()
+    ).getByName(props.appName);
+}
+
+async function submit() {
+    if (!props.appName) return;
+    const role = state.value.formData;
+    const s = rolePicker.value?.currentRole;
+    formRef.value?.validate(() => api.create({
+        addTo: s ? {
+            id: s.id,
+            name: s.name,
+            app: {
+                id: app.value!.id
+            }
+        } : undefined,
+        app: {
+            id: app.value!.id,
+        },
+        description: role.description,
+        name: role.name,
+        caption: role.caption
+    }).then(g => {
+        emits('success', g);
+        visible.value = false;
+    }))
+}
+</script>
+
+<template>
+    <el-drawer destroy-on-close
+               append-to-body
+               title="新建角色"
+               v-model="visible"
+               @open="init">
+        <ja-form
+            ref="formRef"
+            :model="state"
+            :validator="validator">
+            <ja-form-item label="角色名称" prop="name" required>
+                <ja-input v-focus/>
+            </ja-form-item>
+            <ja-form-item label="上级角色" prop="none">
+                <ja-base-role-picker ref="rolePicker"
+                                     placeholder="请选择上级角色，置空表示添加顶层角色"
+                                     :app-name="props.appName"></ja-base-role-picker>
+            </ja-form-item>
+            <ja-form-item label="角色标题" prop="caption" required>
+                <ja-input-i18n-raw :app-id="app?.id" size="small"
+                                   v-model="state.formData.caption"></ja-input-i18n-raw>
+            </ja-form-item>
+            <ja-form-item label="角色说明" prop="description">
+                <ja-input type="textarea"/>
+            </ja-form-item>
+        </ja-form>
+        <template #footer>
+            <ja-button size="default" type="primary" @click="submit" :loading="loading"
+                       shortcut="Alt+Enter">确定
+            </ja-button>
+            <el-button size="default" @click="visible = false">取消</el-button>
+        </template>
+    </el-drawer>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/packages/components/rolePicker/RolePicker.vue

@@ -1,44 +1,44 @@
-<script setup lang="ts">
-import {JaBaseRolePicker} from "./index";
-import {inject, ref, watch} from "vue";
-import type {ValidationInstance} from "../../hooks/useBackendValidations";
-import {getValue, setValue} from "../../utils/objectUtils";
-import RolePickerRaw from "./RolePickerRaw.vue";
-
-const props = defineProps<{
-    appName?: string
-}>();
-
-
-type modelType = string | undefined;
-const picker = ref<InstanceType<typeof JaBaseRolePicker>>();
-const model = inject('aceFormModel') as Record<modelType, any>
-const prop = inject('aceFormItemProp') as string
-const validator = inject('aceFormValidator') as ValidationInstance
-const emit = defineEmits<{
-    change: [value: string]
-}>()
-
-function onChange(value: modelType) {
-    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
-})
-</script>
-
-<template>
-    <role-picker-raw ref="picker" :app-name="props.appName"
-                     v-model="mv" @change="onChange"
-                     v-bind="$attrs">
-        <template v-for="(_, name) in $slots" v-slot:[name]>
-            <slot :name="name"></slot>
-        </template>
-    </role-picker-raw>
-</template>
+<script setup lang="ts">
+import {JaBaseRolePicker} from "./index";
+import {inject, ref, watch} from "vue";
+import type {ValidationInstance} from "../../hooks/useBackendValidations";
+import {getValue, setValue} from "../../utils/objectUtils";
+import RolePickerRaw from "./RolePickerRaw.vue";
+
+const props = defineProps<{
+    appName?: string
+}>();
+
+
+type modelType = string | undefined;
+const picker = ref<InstanceType<typeof JaBaseRolePicker>>();
+const model = inject('aceFormModel') as Record<modelType, any>
+const prop = inject('aceFormItemProp') as string
+const validator = inject('aceFormValidator') as ValidationInstance
+const emit = defineEmits<{
+    change: [value: string]
+}>()
+
+function onChange(value: modelType) {
+    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
+})
+</script>
+
+<template>
+    <role-picker-raw ref="picker" :app-name="props.appName"
+                     v-model="mv" @change="onChange"
+                     v-bind="$attrs">
+        <template v-for="(_, name) in $slots" v-slot:[name]>
+            <slot :name="name"></slot>
+        </template>
+    </role-picker-raw>
+</template>

package/packages/components/rolePicker/RolePickerRaw.vue

@@ -1,56 +1,56 @@
-<script setup lang="ts">
-import {JaBaseRolePicker} from "./index";
-import {Plus} from "@element-plus/icons-vue";
-import RoleEditor from "./RoleEditor.vue"
-import type {Role} from "@jari-ace/app-bolts";
-import {ref} from "vue";
-import {JaButton} from "../button";
-
-const props = defineProps<{
-    appName?: string
-}>();
-
-const mv = defineModel<string | undefined>({
-    required: false
-})
-
-function onCreateSuccess(r: Role) {
-    mv.value = r.name;
-    picker.value?.loadData();
-}
-
-const picker = ref<InstanceType<typeof JaBaseRolePicker>>();
-const editorVisible = ref(false);
-
-function onAddClick() {
-    editorVisible.value = true;
-}
-
-</script>
-
-<template>
-    <div class="ja-role-picker">
-        <ja-base-role-picker ref="picker" :app-name="props.appName" style="flex: auto;"
-                             v-bind="$attrs" v-model="mv">
-            <template v-for="(_, name) in $slots" v-slot:[name]>
-                <slot :name="name"></slot>
-            </template>
-            <template #footer>
-                <ja-button link type="primary" :icon="Plus" shortcut="Alt+I" style="width: 100%"
-                           @click="onAddClick">
-                    新建角色(Alt+I)
-                </ja-button>
-                <role-editor v-model="editorVisible" :app-name="props.appName"
-                             @success="onCreateSuccess"></role-editor>
-            </template>
-        </ja-base-role-picker>
-    </div>
-</template>
-
-<style scoped lang="scss">
-.ja-role-picker {
-    display: inline-flex;
-    gap: 8px;
-    width: 100%;
-}
-</style>
+<script setup lang="ts">
+import {JaBaseRolePicker} from "./index";
+import {Plus} from "@element-plus/icons-vue";
+import RoleEditor from "./RoleEditor.vue"
+import type {Role} from "@jari-ace/app-bolts";
+import {ref} from "vue";
+import {JaButton} from "../button";
+
+const props = defineProps<{
+    appName?: string
+}>();
+
+const mv = defineModel<string | undefined>({
+    required: false
+})
+
+function onCreateSuccess(r: Role) {
+    mv.value = r.name;
+    picker.value?.loadData();
+}
+
+const picker = ref<InstanceType<typeof JaBaseRolePicker>>();
+const editorVisible = ref(false);
+
+function onAddClick() {
+    editorVisible.value = true;
+}
+
+</script>
+
+<template>
+    <div class="ja-role-picker">
+        <ja-base-role-picker ref="picker" :app-name="props.appName" style="flex: auto;"
+                             v-bind="$attrs" v-model="mv">
+            <template v-for="(_, name) in $slots" v-slot:[name]>
+                <slot :name="name"></slot>
+            </template>
+            <template #footer>
+                <ja-button link type="primary" :icon="Plus" shortcut="Alt+I" style="width: 100%"
+                           @click="onAddClick">
+                    新建角色(Alt+I)
+                </ja-button>
+                <role-editor v-model="editorVisible" :app-name="props.appName"
+                             @success="onCreateSuccess"></role-editor>
+            </template>
+        </ja-base-role-picker>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.ja-role-picker {
+    display: inline-flex;
+    gap: 8px;
+    width: 100%;
+}
+</style>