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

package/packages/components/rolePicker/baseRolePicker.vue

@@ -1,87 +1,91 @@
-<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";
-
-const axios = createAxiosWithoutCache();
-const api = useRoleApi(axios);
-const appApi = useAppApi(axios);
-const props = defineProps<{
-    appName?: string
-}>();
-const currentApp = ref<AppInstance>();
-const roles = ref<ProjectedRole[]>([]);
-const loadData = async () => {
-    if (!props.appName) return;
-    currentApp.value = await appApi.getByName(props.appName);
-    roles.value = await api.getAllRole(currentApp.value.id);
-    console.log(roles.value)
-    if (selectedRoleName.value) {
-        currentRole.value = findRole(selectedRoleName.value, roles.value);
-    } else {
-        currentRole.value = undefined;
-    }
-};
-const selectedRoleName = defineModel<string | undefined>()
-const emits = defineEmits(["change"]);
-const currentRole = ref<ProjectedRole>();
-
-watch(() => props.appName, loadData)
-
-loadData();
-
-const treeProps = {
-    label: (data: TreeNodeData) => data.caption ? data.caption : data.name,
-    isLeaf: (data: TreeNodeData) => !data.hasChildren
-}
-
-const select = ref<InstanceType<typeof ElTreeSelect>>();
-
-function onChange(projectedRole: string) {
-    currentRole.value = findRole(projectedRole, roles.value);
-    emits("change", projectedRole)
-}
-
-function findRole(name: string, roles: ProjectedRole[]): ProjectedRole | undefined {
-    for (let i = 0; i < roles.length; i++) {
-        if (roles[i].name === name) {
-            return roles[i]
-        }
-        const children = roles[i].children;
-        if (children) {
-            const r = findRole(name, children);
-            if (r) return r;
-        }
-    }
-    return undefined;
-}
-
-defineExpose({
-    loadData,
-    currentRole,
-    elTreeSelect: select
-})
-
-</script>
-
-<template>
-    <el-tree-select ref="select" :data="roles" node-key="name" :current-node-key="selectedRoleName"
-                    value-key="name" :props="treeProps" v-bind="$attrs" clearable
-                    check-strictly
-                    :highlight-current="true" @change="onChange" v-model="selectedRoleName">
-        <template v-for="(_, name) in $slots" v-slot:[name]>
-            <slot :name="name"></slot>
-        </template>
-    </el-tree-select>
-</template>
-
-<style scoped lang="scss">
-
-</style>
+<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";
+
+const axios = createAxiosWithoutCache();
+const api = useRoleApi(axios);
+const appApi = useAppApi(axios);
+const props = defineProps<{
+    appName?: string
+}>();
+const currentApp = ref<AppInstance>();
+const roles = ref<ProjectedRole[]>([]);
+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
+    });
+    if (selectedRoleName.value) {
+        currentRole.value = findRole(selectedRoleName.value, roles.value);
+    } else {
+        currentRole.value = undefined;
+    }
+};
+const selectedRoleName = defineModel<string | undefined>()
+const emits = defineEmits(["change"]);
+const currentRole = ref<ProjectedRole>();
+
+watch(() => props.appName, loadData)
+
+loadData();
+
+const treeProps = {
+    label: (data: TreeNodeData) => data.caption ? data.caption : data.name,
+    isLeaf: (data: TreeNodeData) => !data.hasChildren
+}
+
+const select = ref<InstanceType<typeof ElTreeSelect>>();
+
+function onChange(projectedRole: string) {
+    currentRole.value = findRole(projectedRole, roles.value);
+    emits("change", projectedRole)
+}
+
+function findRole(name: string, roles: ProjectedRole[]): ProjectedRole | undefined {
+    for (let i = 0; i < roles.length; i++) {
+        if (roles[i].name === name) {
+            return roles[i]
+        }
+        const children = roles[i].children;
+        if (children) {
+            const r = findRole(name, children);
+            if (r) return r;
+        }
+    }
+    return undefined;
+}
+
+defineExpose({
+    loadData,
+    currentRole,
+    elTreeSelect: select
+})
+
+</script>
+
+<template>
+    <el-tree-select ref="select" :data="roles" node-key="name" :current-node-key="selectedRoleName"
+                    value-key="name" :props="treeProps" v-bind="$attrs" clearable
+                    check-strictly
+                    :highlight-current="true" @change="onChange" v-model="selectedRoleName">
+        <template v-for="(_, name) in $slots" v-slot:[name]>
+            <slot :name="name"></slot>
+        </template>
+    </el-tree-select>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/packages/components/rolePicker/index.ts

@@ -1,10 +1,10 @@
-import {type SFCWithInstall, withInstall} from "../../utils/install";
-import BaseRolePicker from "./baseRolePicker.vue";
-import RolePicker from "./RolePicker.vue";
-import RolePickerRaw from "./RolePickerRaw.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);
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import BaseRolePicker from "./baseRolePicker.vue";
+import RolePicker from "./RolePicker.vue";
+import RolePickerRaw from "./RolePickerRaw.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);

package/packages/components/scrollbar/Scrollbar.vue

@@ -1,89 +1,89 @@
-<script setup lang="ts">
-import {ElScrollbar} from "element-plus";
-import {nextTick, onMounted, onUnmounted, provide, type Ref, ref, watch} from "vue";
-import {
-    SCROLL_BAR_WRAPPED_INJECT_KEY,
-    type ScrollbarWrapped
-} from "./utils";
-
-const scroll = ref<InstanceType<typeof ElScrollbar>>();
-const wrappedItems: Ref<ScrollbarWrapped[]> = ref([]);
-const wrappedItemsMap: Map<Element, ScrollbarWrapped> = new Map();
-defineExpose({
-    elScrollbar: scroll
-})
-// 提供 ElScroll 的实例和 DOM 元素
-provide(SCROLL_BAR_WRAPPED_INJECT_KEY, wrappedItems);
-
-let hasMounted = false;
-
-watch(wrappedItems, () => {
-    if (hasMounted) {
-        observeWrappedItemInView();
-    }
-}, {
-    deep: true
-})
-
-const observer = new IntersectionObserver((entries) => {
-    entries.forEach((entry) => {
-        const wrappedItem = wrappedItemsMap.get(entry.target);
-        wrappedItem?.onInView(entry.isIntersecting);
-    });
-});
-
-async function observeWrappedItemInView() {
-    await nextTick();
-    const wrap = scroll.value?.$el;
-    if (!wrappedItems.value) return;
-    try {
-        for (let i = 0; i < wrappedItems.value.length; i++) {
-            if (wrappedItems.value[i]) {
-                //检查子元素是否在scrollbar的可视区域内，如果是的话就直接执行回调，否则添加observer，等待滚动到可视区内再触发其回调
-                const wrappedItem = wrappedItems.value[i];
-                const rect = wrappedItem.childElement.getBoundingClientRect();
-                const parentRect = wrap.getBoundingClientRect();
-
-                const inView = (
-                    rect.top >= parentRect.top &&
-                    rect.bottom <= parentRect.bottom &&
-                    rect.left >= parentRect.left &&
-                    rect.right <= parentRect.right
-                );
-                if (inView) {
-                    wrappedItem.onInView(true);
-                }
-                wrappedItemsMap.set(wrappedItem.childElement, wrappedItem);
-                observer.observe(wrappedItem.childElement);
-            }
-        }
-    } finally {
-        if (wrappedItems.value)
-            wrappedItems.value.splice(0);
-    }
-    hasMounted = true;
-}
-
-onMounted(async () => {
-    await observeWrappedItemInView();
-})
-
-onUnmounted(() => {
-    wrappedItemsMap.forEach(value => {
-        observer.disconnect()
-    })
-})
-
-</script>
-
-<template>
-    <el-scrollbar ref="scroll" class="scroll-container"
-                  v-bind="$attrs">
-        <template v-for="(_, name) in $slots" v-slot:[name]>
-            <slot :name="name"></slot>
-        </template>
-    </el-scrollbar>
-</template>
-<style scoped lang="scss">
-
-</style>
+<script setup lang="ts">
+import {ElScrollbar} from "element-plus";
+import {nextTick, onMounted, onUnmounted, provide, type Ref, ref, watch} from "vue";
+import {
+    SCROLL_BAR_WRAPPED_INJECT_KEY,
+    type ScrollbarWrapped
+} from "./utils";
+
+const scroll = ref<InstanceType<typeof ElScrollbar>>();
+const wrappedItems: Ref<ScrollbarWrapped[]> = ref([]);
+const wrappedItemsMap: Map<Element, ScrollbarWrapped> = new Map();
+defineExpose({
+    elScrollbar: scroll
+})
+// 提供 ElScroll 的实例和 DOM 元素
+provide(SCROLL_BAR_WRAPPED_INJECT_KEY, wrappedItems);
+
+let hasMounted = false;
+
+watch(wrappedItems, () => {
+    if (hasMounted) {
+        observeWrappedItemInView();
+    }
+}, {
+    deep: true
+})
+
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+        const wrappedItem = wrappedItemsMap.get(entry.target);
+        wrappedItem?.onInView(entry.isIntersecting);
+    });
+});
+
+async function observeWrappedItemInView() {
+    await nextTick();
+    const wrap = scroll.value?.$el;
+    if (!wrappedItems.value) return;
+    try {
+        for (let i = 0; i < wrappedItems.value.length; i++) {
+            if (wrappedItems.value[i]) {
+                //检查子元素是否在scrollbar的可视区域内，如果是的话就直接执行回调，否则添加observer，等待滚动到可视区内再触发其回调
+                const wrappedItem = wrappedItems.value[i];
+                const rect = wrappedItem.childElement.getBoundingClientRect();
+                const parentRect = wrap.getBoundingClientRect();
+
+                const inView = (
+                    rect.top >= parentRect.top &&
+                    rect.bottom <= parentRect.bottom &&
+                    rect.left >= parentRect.left &&
+                    rect.right <= parentRect.right
+                );
+                if (inView) {
+                    wrappedItem.onInView(true);
+                }
+                wrappedItemsMap.set(wrappedItem.childElement, wrappedItem);
+                observer.observe(wrappedItem.childElement);
+            }
+        }
+    } finally {
+        if (wrappedItems.value)
+            wrappedItems.value.splice(0);
+    }
+    hasMounted = true;
+}
+
+onMounted(async () => {
+    await observeWrappedItemInView();
+})
+
+onUnmounted(() => {
+    wrappedItemsMap.forEach(value => {
+        observer.disconnect()
+    })
+})
+
+</script>
+
+<template>
+    <el-scrollbar ref="scroll" class="scroll-container"
+                  v-bind="$attrs">
+        <template v-for="(_, name) in $slots" v-slot:[name]>
+            <slot :name="name"></slot>
+        </template>
+    </el-scrollbar>
+</template>
+<style scoped lang="scss">
+
+</style>

package/packages/components/scrollbar/index.ts

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

package/packages/components/scrollbar/utils.ts

@@ -1,17 +1,17 @@
-export const SCROLL_BAR_WRAPPED_INJECT_KEY = "com.csicit.ace.scrollbar.wrapped"
-
-/**
- * 滚动区域包裹的组件接口
- */
-export interface ScrollbarWrapped {
-    /**
-     * 子组件的原生元素
-     */
-    childElement: HTMLElement;
-    /**
-     * 当子元素就在可视区域内时触发执行
-     */
-    onInView: (isInView: boolean) => void;
-}
-
-
+export const SCROLL_BAR_WRAPPED_INJECT_KEY = "com.csicit.ace.scrollbar.wrapped"
+
+/**
+ * 滚动区域包裹的组件接口
+ */
+export interface ScrollbarWrapped {
+    /**
+     * 子组件的原生元素
+     */
+    childElement: HTMLElement;
+    /**
+     * 当子元素就在可视区域内时触发执行
+     */
+    onInView: (isInView: boolean) => void;
+}
+
+

package/packages/components/select/JaSelect.vue

@@ -1,48 +1,48 @@
-<script setup lang="ts">
-import type {ValidationInstance} from '../../hooks/useBackendValidations'
-import {inject, ref, watch} from "vue";
-import {ElSelect} from "element-plus";
-import type {EpPropFinalized} from "element-plus/es/utils";
-import {getValue, setValue} from "../../utils/objectUtils";
-
-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]
-}>()
-
-function onChange(value: string) {
-    validator.removeFieldError(prop)
-    setValue(model.formData, prop, mv.value);
-    emit('change', value)
-}
-
-type modelType = EpPropFinalized<(ArrayConstructor | ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[], unknown, unknown, undefined, boolean>;
-
-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(),
-    elSelect: input
-})
-</script>
-
-<template>
-    <el-select
-        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-select>
-</template>
+<script setup lang="ts">
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import {inject, ref, watch} from "vue";
+import {ElSelect} from "element-plus";
+import type {EpPropFinalized} from "element-plus/es/utils";
+import {getValue, setValue} from "../../utils/objectUtils";
+
+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]
+}>()
+
+function onChange(value: string) {
+    validator.removeFieldError(prop)
+    setValue(model.formData, prop, mv.value);
+    emit('change', value)
+}
+
+type modelType = EpPropFinalized<(ArrayConstructor | ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[], unknown, unknown, undefined, boolean>;
+
+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(),
+    elSelect: input
+})
+</script>
+
+<template>
+    <el-select
+        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-select>
+</template>

package/packages/components/select/index.ts

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

package/packages/components/stringList/JaStringList.vue

@@ -1,36 +1,36 @@
-<script setup lang="ts">
-import StringListInput from "./StringListInput.vue";
-import {inject, watch, ref} from "vue";
-import {getValue, setValue} from "../../utils/objectUtils";
-import type {ValidationInstance} from "../../hooks/useBackendValidations";
-
-const model = inject('aceFormModel') as Record<string, never>
-const prop = inject('aceFormItemProp') as string
-const validator = inject('aceFormValidator') as ValidationInstance
-const emit = defineEmits<{
-    change: [value: string[]]
-}>()
-
-function onChange(value: string[]) {
-    validator.removeFieldError(prop)
-    setValue(model.formData, prop, mv.value);
-    emit('change', value)
-}
-
-const mv = ref(getValue(model.formData, prop) as string[] ?? [""]);
-watch(() => model.formData, () => {
-    mv.value = getValue(model.formData, prop) as string[] ?? [""]
-}, {
-    deep: true
-})
-</script>
-
-<template>
-    <string-list-input v-model="mv"
-                       @change="onChange"
-                       v-bind="$attrs"/>
-</template>
-
-<style scoped lang="scss">
-
-</style>
+<script setup lang="ts">
+import StringListInput from "./StringListInput.vue";
+import {inject, watch, ref} from "vue";
+import {getValue, setValue} from "../../utils/objectUtils";
+import type {ValidationInstance} from "../../hooks/useBackendValidations";
+
+const model = inject('aceFormModel') as Record<string, never>
+const prop = inject('aceFormItemProp') as string
+const validator = inject('aceFormValidator') as ValidationInstance
+const emit = defineEmits<{
+    change: [value: string[]]
+}>()
+
+function onChange(value: string[]) {
+    validator.removeFieldError(prop)
+    setValue(model.formData, prop, mv.value);
+    emit('change', value)
+}
+
+const mv = ref(getValue(model.formData, prop) as string[] ?? [""]);
+watch(() => model.formData, () => {
+    mv.value = getValue(model.formData, prop) as string[] ?? [""]
+}, {
+    deep: true
+})
+</script>
+
+<template>
+    <string-list-input v-model="mv"
+                       @change="onChange"
+                       v-bind="$attrs"/>
+</template>
+
+<style scoped lang="scss">
+
+</style>