@jari-ace/element-plus-component 0.3.2 → 0.3.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jari-ace/element-plus-component",
   "private": false,
-  "version": "0.3.2",
+  "version": "0.3.3",
   "main": "lib/index.umd.cjs",
   "module": "lib/index.js",
   "types": "dist/index.d.ts",
@@ -25,7 +25,7 @@
     "animate.css": "^4.1.1",
     "pretty-bytes": "^7.1.0",
     "vue-pdf-embed": "^2.1.3",
-    "@jari-ace/app-bolts": "0.5.10"
+    "@jari-ace/app-bolts": "0.5.11"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
@@ -33,7 +33,7 @@
     "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vue/tsconfig": "^0.5.1",
     "@vueuse/core": "^11.1.0",
-    "element-plus": "2.10.3",
+    "element-plus": "2.11.7",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^8.0.0",
     "gulp-clean-css": "^4.3.0",
@@ -46,18 +46,18 @@
     "sass": "^1.77.6",
     "typescript": "~5.4.5",
     "vite": "^6.3.5",
-    "vue": "^3.5.13",
+    "vue": "^3.5.24",
     "vue-i18n": "^9.13.1",
-    "vue-tsc": "^2.0.21"
+    "vue-tsc": "^2.2.12"
   },
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
     "@vueuse/core": "^11.1.0",
-    "element-plus": "^2.8.4",
+    "element-plus": "^2.11.7",
     "lodash-es": "^4.17.21",
-    "vue": "^3.5.11",
+    "vue": "^3.5.24",
     "vue-i18n": "^9.13.1"
   },
   "scripts": {

package/packages/components/input/JaInput.vue

@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<{
     suffixIcon?: string | Component
     rows?: number
     autosize?: boolean | object
-    autocomplete?: string
+    autocomplete?: AutoFill
     name?: string
     readonly?: boolean,
     max?: any

package/packages/components/inputI18n/I18nBundleEditor.vue

@@ -13,7 +13,7 @@ const visible = defineModel<boolean>({
     required: true
 });
 const props = defineProps<{
-    appId: string,
+    appId?: string,
     preKey?: string
 }>();
 const axios = createAxiosWithoutCache();
@@ -22,7 +22,7 @@ const app = ref<AppInstance>();
 const key = ref("");
 const messages = ref<Record<string, string>>({})
 const emits = defineEmits(["success"])
-const appInstances = await useAppInstances();
+const appInstances = useAppInstances();
 
 function onOpen() {
     loadApp();

package/packages/components/inputI18n/InputI18n.vue

@@ -32,7 +32,7 @@ const focused = ref(false)
 const editorVisible = ref(false)
 const select = ref<InstanceType<typeof ElSelect>>()
 const appName = ref("");
-const appInstances = await useAppInstances();
+const appInstances = useAppInstances();
 const filterKey = ref("")
 const i18nTxt = ref("")
 const selectI18n = ref<InstanceType<typeof ElSelect>>();
@@ -43,13 +43,13 @@ let timeoutHandle: number | undefined = undefined;
 async function loadMessage(val?: string) {
     if (!val) val = model.value;
     if (!props.appId) return
+    i18nTxt.value = val
     const app = await appInstances.getById(props.appId)
     appName.value = app.name
-    if (!val || !appName.value) {
+    if (!val || val.length === 0 || !appName.value) {
         i18nTxt.value = "";
         return;
     }
-    i18nTxt.value = val
     let key = val;
     if (val && val.length > 0) {
         key = trim(key);
@@ -62,6 +62,7 @@ async function loadMessage(val?: string) {
     });
     const message = messages.find(m => m.locale === locale)
     if (message) {
+        await nextTick()
         i18nTxt.value = message.message
     }
 }
@@ -95,10 +96,13 @@ onUnmounted(() => {
 watch(model, () => {
     debounceLoadMessage();
 }, {
-    deep: true,
-    immediate: true
+    deep: true
 })
 
+if (!i18nTxt.value) {
+    debounceLoadMessage()
+}
+
 function onChange(value: string) {
     emits('change', value)
 }
@@ -120,27 +124,31 @@ defineExpose({
 </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>
+    <div class="ja-input-i18n">
+        <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 reserve-keyword
+                   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>
+    </div>
 </template>
 
 <style scoped lang="scss">
-
+.ja-input-i18n {
+    flex: auto;
+}
 </style>

package/packages/components/inputNumber/JaInputNumber.vue

@@ -4,6 +4,7 @@ import {ElInputNumber} from 'element-plus'
 import type {ValidationInstance} from '../../hooks/useBackendValidations'
 import {getValue, setValue} from "../../utils/objectUtils";
 
+type ModelType = number | null | undefined;
 const props = withDefaults(defineProps<{
     min?: number
     max?: number
@@ -43,11 +44,10 @@ const input = ref<typeof ElInputNumber>()
 const emit = defineEmits<{
     blur: [evt: Event]
     focus: [evt: Event]
-    change: [value?: number]
+    change: [value?: ModelType]
 }>()
-type ModelType = number;
 
-function onChange(value?: number) {
+function onChange(value?: ModelType) {
     validator.removeFieldError(prop)
     setValue(model.formData, prop, mv.value)
     emit('change', value)
@@ -55,7 +55,8 @@ function onChange(value?: number) {
 
 const mv = ref(getValue(model.formData, prop) as ModelType);
 watch(() => model.formData, () => {
-    mv.value = getValue(model.formData, prop) as ModelType
+    const value = getValue(model.formData, prop)
+    mv.value = value as ModelType
 }, {
     deep: true
 })
@@ -79,7 +80,7 @@ defineExpose({
                      :aria-label="ariaLabel"
                      :controls="controls"
                      :controls-position="controlsPosition"
-                     v-model="mv"
+                     v-model.number="mv"
                      :name="name"
                      :placeholder="placeholder"
                      :precision="precision"

package/packages/components/properyPicker/PropertyPicker.vue

@@ -2,11 +2,12 @@
 import {
     createAxiosWithoutCache,
     type ProjectedPropertyDefinition,
-    useEntityApi, useLoading
+    useLoading
 } from "@jari-ace/app-bolts";
 import {computed, nextTick, ref, watch} from "vue";
 import {ElDropdown, ElScrollbar, ElTag, ElIcon, ElEmpty, vLoading} from "element-plus";
 import {ArrowDown, ArrowUp} from "@element-plus/icons-vue";
+import { useProperties } from "../../hooks/useProperties";
 
 const props = defineProps<{
     entityId?: string
@@ -17,7 +18,7 @@ const model = defineModel<string | undefined>({
 });
 const selectedProp = ref<string[]>([]);
 const axios = createAxiosWithoutCache();
-const api = useEntityApi(axios);
+const {getProperties} = useProperties();
 const properties = ref<ProjectedPropertyDefinition[]>();
 const propsCache: Record<number, ProjectedPropertyDefinition[]> = {};
 const activeIndex = ref(0);
@@ -34,12 +35,7 @@ async function loadProperties() {
         currentEntityId = props.entityId
     }
     if (currentEntityId) {
-        let p = propsCache[currentEntityId];
-        if (!p) {
-            p = await api.getProperties(currentEntityId);
-            propsCache[currentEntityId] = p;
-        }
-        properties.value = p;
+        properties.value = await getProperties(currentEntityId);
     } else {
         properties.value = [];
     }

package/packages/components/rolePicker/RoleCategorySelector.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import {createAxiosWithoutCache, type RoleCategory, useRoleCategoryApi} from "@jari-ace/app-bolts";
+import {ref, watch} from "vue";
+import {Check, Delete, Edit, InfoFilled, Plus} from "@element-plus/icons-vue";
+import {useRoleCategories} from "../../hooks/useRoleCategories";
+import {ElMessage, ElSelect, ElOption, ElInput, ElText, ElTooltip, ElIcon} from "element-plus";
+import JaButton from "../button/JaButton.vue";
+import vFocus from '../../directives/autofocus'
+
+const props = defineProps<{
+    appId?: string,
+    allowEdit?: boolean
+}>()
+const axios = createAxiosWithoutCache()
+const api = useRoleCategoryApi(axios)
+const model = defineModel<string>({required: false})
+const {getRoleCategories, refreshRoleCategoryCache} = useRoleCategories();
+const categories = ref<RoleCategory[]>([])
+const editingCategory = ref<RoleCategory>()
+
+async function loadCategories() {
+    if (!props.appId) return;
+    categories.value = await getRoleCategories(props.appId)
+    if (categories.value.length > 0) model.value = categories.value[0].name
+    console.log(`Loading categories for ${props.appId}`, categories.value)
+}
+
+async function onAddClicked() {
+    if (!props.appId) {
+        throw new Error('appId 参数不能为空')
+    }
+    if (!!editingCategory.value) {
+        const r = await submit();
+        if (!r) return;
+    }
+    editingCategory.value = {
+        id: "0",
+        name: "",
+        app: {
+            id: props.appId
+        },
+        dataVersion: 0
+    }
+    categories.value.push(editingCategory.value)
+}
+
+async function onEditClicked(c: RoleCategory) {
+    if (!!editingCategory.value) {
+        if (!(await  submit())) return;
+    }
+    editingCategory.value = c;
+}
+
+async function onSubmitClicked() {
+    if (!!editingCategory.value) {
+        if (!(await submit())) return;
+    }
+    editingCategory.value = undefined;
+}
+
+async function onDeleteClicked(c: RoleCategory) {
+    if (!!editingCategory.value) {
+        if (!(await submit())) return;
+        editingCategory.value = undefined;
+    }
+    await api.delete({
+        id: c.id,
+        dataVersion: c.dataVersion
+    })
+    refreshRoleCategoryCache(props.appId)
+    categories.value.splice(categories.value.indexOf(c), 1);
+}
+
+function onOptionClicked(e: Event, category: RoleCategory) {
+    if (category === editingCategory.value) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+}
+
+async function submit() {
+    if (!editingCategory.value) return true;
+    if (!editingCategory.value.name || editingCategory.value.name.length < 1) {
+        ElMessage.error("类别名称不能为空");
+        return false;
+    }
+    try {
+        let r: RoleCategory;
+        if (editingCategory.value.id == "0") {
+            r = await api.create({
+                name: editingCategory.value.name,
+                app: editingCategory.value.app
+            }, {
+                popValidationErrorNotification: true
+            })
+        } else {
+            r = await api.update({
+                ...editingCategory.value
+            }, {
+                popValidationErrorNotification: true
+            })
+        }
+        refreshRoleCategoryCache(props.appId)
+        editingCategory.value.id = r.id;
+        editingCategory.value.dataVersion = r.dataVersion;
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+watch(() => props.appId, loadCategories, {immediate: true})
+</script>
+
+<template>
+    <el-select v-model="model" placeholder="[未分类]">
+        <el-option label="[未分类]" value=""/>
+        <el-option v-for="c in categories" :key="c.id" :label="c.name" :value="c.name">
+            <div style="display: flex; margin: 0 -32px 0 -20px; padding: 0 32px 0 20px"
+                 @click="onOptionClicked($event, c)">
+                <div style="flex: 1;">
+                    <el-text v-if="c !== editingCategory"> {{ c.name }}</el-text>
+                    <el-input v-focus @click.prevent.stop v-if="c === editingCategory" size="small"
+                              v-model="editingCategory.name" maxlength="255" @keydown.enter="onSubmitClicked"></el-input>
+                </div>
+                <div>
+                    <ja-button v-if="c !== editingCategory && allowEdit" size="small" type="primary" :icon="Edit"
+                               link @click.stop.prevent="onEditClicked(c)" tooltip="修改"></ja-button>
+                    <ja-button v-if="c !== editingCategory && allowEdit" size="small" type="danger" :icon="Delete"
+                               link @click.stop.prevent="onDeleteClicked(c)" tooltip="删除"></ja-button>
+                    <ja-button v-if="c === editingCategory && allowEdit" size="small" type="primary"
+                               :icon="Check" link @click.stop.prevent="onSubmitClicked" tooltip="提交"></ja-button>
+                </div>
+            </div>
+        </el-option>
+        <template #header>
+            <div style="display: flex; padding: 0 20px 0 10px">
+                <div style="flex: 1;">
+                    <el-text><b>业务分类</b>
+                    <el-tooltip content="业务分类限制角色只能授予同分类的用户组"><el-icon><info-filled/></el-icon></el-tooltip>
+                    </el-text>
+                </div>
+                <div style="flex: 1; text-align: right;" v-if="allowEdit">
+                    <ja-button size="small" type="primary" plain :icon="Plus" shortcut="Alt+A"
+                               link tooltip="添加" @click.prevent.stop="onAddClicked"></ja-button>
+                </div>
+            </div>
+        </template>
+    </el-select>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/packages/components/rolePicker/RoleEditor.vue

@@ -11,17 +11,21 @@ import {JaButton} from "../button";
 import {JaInput} from "../input";
 import {JaFormItem} from "../formItem";
 import {JaBaseRolePicker} from "./index";
+import {JaInputI18nRaw} from "../inputI18n";
 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";
+import {useRoles} from "../../hooks/useRoles";
+import RoleCategorySelector from "./RoleCategorySelector.vue";
 
 const visible = defineModel<boolean>({
     default: false
 });
 const props = defineProps<{
-    appName?: string
+    appName?: string,
+    category?: string
 }>();
 const emits = defineEmits<{
     (e: "success", g: Role): void
@@ -38,7 +42,8 @@ const initData: Role = {
     dataVersion: 0,
     description: "",
     id: "0",
-    name: ""
+    name: "",
+    category: props.category
 }
 
 const state = ref<{
@@ -53,15 +58,14 @@ const api = useRoleApi(axios);
 const formRef = ref<typeof JaForm>()
 const rolePicker = ref<InstanceType<typeof JaBaseRolePicker>>();
 const app = ref<AppInstance>()
-
+const apps = useAppInstances()
+const {refreshRolesCache} = useRoles()
 async function init() {
     state.value.formData = {...initData};
     if (!props.appName) {
         throw new Error('rolePicker组件的appName属性不能为空')
     }
-    app.value = await (
-        await useAppInstances()
-    ).getByName(props.appName);
+    app.value = await apps.getByName(props.appName);
 }
 
 async function submit() {
@@ -81,8 +85,10 @@ async function submit() {
         },
         description: role.description,
         name: role.name,
-        caption: role.caption
+        caption: role.caption,
+        category: role.category
     }).then(g => {
+        refreshRolesCache(app.value!.id)
         emits('success', g);
         visible.value = false;
     }))
@@ -111,6 +117,9 @@ async function submit() {
                 <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="category">
+                <role-category-selector :app-id="app?.id" v-model="state.formData.category"></role-category-selector>
+            </ja-form-item>
             <ja-form-item label="角色说明" prop="description">
                 <ja-input type="textarea"/>
             </ja-form-item>

package/packages/components/rolePicker/baseRolePicker.vue

@@ -1,32 +1,25 @@
 <script setup lang="ts">
 import {
     type AppInstance,
-    createAxiosWithoutCache,
-    useAppApi,
-    useRoleApi,
     type ProjectedRole,
 } from "@jari-ace/app-bolts";
 import {ref, watch} from "vue";
 import type {TreeNodeData} from "element-plus/es/components/tree/src/tree.type";
 import {ElTreeSelect} from "element-plus";
+import {useAppInstances} from "../../hooks/useAppInstances";
+import {useRoles} from "../../hooks/useRoles";
 
-const axios = createAxiosWithoutCache();
-const api = useRoleApi(axios);
-const appApi = useAppApi(axios);
+const {getRoles} = useRoles()
 const props = defineProps<{
     appName?: string
 }>();
 const currentApp = ref<AppInstance>();
 const roles = ref<ProjectedRole[]>([]);
+const apps = useAppInstances()
 const loadData = async () => {
     if (!props.appName) return;
-    currentApp.value = await appApi.getByName(props.appName);
-    roles.value = (
-        await api.getAllRole(currentApp.value.id)
-    ).map(r => {
-        r.name = r.appName + "." + r.name
-        return r
-    });
+    currentApp.value = await apps.getByName(props.appName);
+    roles.value = await getRoles(currentApp.value.id);
     if (selectedRoleName.value) {
         currentRole.value = findRole(selectedRoleName.value, roles.value);
     } else {

package/packages/components/rolePicker/index.ts

@@ -2,9 +2,12 @@ import {type SFCWithInstall, withInstall} from "../../utils/install";
 import BaseRolePicker from "./baseRolePicker.vue";
 import RolePicker from "./RolePicker.vue";
 import RolePickerRaw from "./RolePickerRaw.vue";
+import RoleCategorySelector from "./RoleCategorySelector.vue"
 
 export const JaBaseRolePicker: SFCWithInstall<typeof BaseRolePicker> = withInstall(BaseRolePicker);
 
 export const JaRolePicker: SFCWithInstall<typeof RolePicker> = withInstall(RolePicker);
 
 export const JaRolePickerRaw: SFCWithInstall<typeof RolePickerRaw> = withInstall(RolePickerRaw);
+
+export const JaRoleCategorySelector: SFCWithInstall<typeof RoleCategorySelector> = withInstall(RoleCategorySelector);

package/packages/components/upload/index.ts

@@ -3,3 +3,4 @@ import Upload from './uploader.vue'
 import _JaUploader from './JaUploader.vue'
 export const JaUploader = withInstall(_JaUploader);
 export const JaUploaderRaw = withInstall(Upload);
+export * from './types'

package/packages/components/upload/types.ts

@@ -0,0 +1,4 @@
+import type {Meta, UppyFile} from "@uppy/core";
+
+export type AceFile = UppyFile<Meta, Record<string, never>>;
+