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

package/packages/components/properyPicker/PropertyPicker.vue

@@ -1,314 +1,314 @@
-<script setup lang="ts">
-import {
-    createAxiosWithoutCache,
-    type ProjectedPropertyDefinition,
-    useEntityApi, 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";
-
-const props = defineProps<{
-    entityId?: string
-}>();
-let currentEntityId: string | undefined = undefined;
-const model = defineModel<string | undefined>({
-    required: true
-});
-const selectedProp = ref<string[]>([]);
-const axios = createAxiosWithoutCache();
-const api = useEntityApi(axios);
-const properties = ref<ProjectedPropertyDefinition[]>();
-const propsCache: Record<number, ProjectedPropertyDefinition[]> = {};
-const activeIndex = ref(0);
-const loading = useLoading(axios);
-const isHovered = ref(false);
-const isFocused = ref(false);
-const filterInput = ref<HTMLInputElement | null>();
-const scrollbar = ref<InstanceType<typeof ElScrollbar>>();
-const filter = ref("");
-let dropdownVisible = ref(false);
-
-async function loadProperties() {
-    if (!currentEntityId) {
-        currentEntityId = props.entityId
-    }
-    if (currentEntityId) {
-        let p = propsCache[currentEntityId];
-        if (!p) {
-            p = await api.getProperties(currentEntityId);
-            propsCache[currentEntityId] = p;
-        }
-        properties.value = p;
-    } else {
-        properties.value = [];
-    }
-}
-
-function onChange(query: string[] | undefined) {
-    let v: string;
-    if (query) {
-        v = query.join('.');
-    } else {
-        v = "";
-    }
-    if (v !== model.value) model.value = v;
-    nextTick(async () => {
-        currentEntityId = props.entityId!;
-        await loadProperties();
-        let ps = propsCache[currentEntityId];
-        if (!ps) return;
-        for (let i = 0; i < query.length; i++) {
-            const pn = query[i];
-            let p = ps.find(x => x.name === pn);
-            if (p && p.entityType) {
-                currentEntityId = p.entityType.id;
-                if (i < query.length - 1) {
-                    await loadProperties();
-                    ps = propsCache[currentEntityId];
-                } else {
-                    if (p.dataType === 'ENTITY' && p.collectionType === 'NONE') {
-                        currentEntityId = p.entityType.id;
-                        loadProperties();
-                    } else {
-                        currentEntityId = "-1";
-                        loadProperties();
-                    }
-                }
-            } else {
-                currentEntityId = "-1";
-                loadProperties();
-            }
-        }
-        filterInput.value?.focus();
-    })
-}
-
-function optionLabel(p: ProjectedPropertyDefinition) {
-    if (p.caption && p.caption.length > 0) {
-        return p.name + "(" + p.caption + ")";
-    } else {
-        return p.name;
-    }
-}
-
-function onMouseEnter(index: number) {
-    activeIndex.value = index;
-}
-
-function getLiClass(index: number) {
-    return activeIndex.value === index ? "active" : "";
-}
-
-function onLiClick(p: ProjectedPropertyDefinition) {
-    selectedProp.value?.push(p.name);
-    filter.value = '';
-    filterInput.value?.focus();
-}
-
-function onTagClose(t: string) {
-    selectedProp.value?.pop();
-}
-
-function onFilterInput() {
-    if (!currentEntityId) return;
-    const ps = propsCache[currentEntityId];
-    if (!ps) return;
-    const filter = filterInput.value?.value;
-    if (filter && filter.length > 0)
-        properties.value = [...ps].filter(p => p.name.toLowerCase().indexOf(filter.toLowerCase())
-                                               > -1);
-    else properties.value = ps;
-    scrollToActive();
-}
-
-
-function onInputArrowDown() {
-    if (!properties.value) return;
-    if (activeIndex.value < properties.value.length - 1) {
-        activeIndex.value++;
-    }
-    scrollToActive();
-}
-
-function onInputArrowUp() {
-    if (activeIndex.value > 0) {
-        activeIndex.value--;
-    }
-    scrollToActive();
-}
-
-function onInputEnter() {
-    if (!properties.value) return;
-    const p = properties.value[activeIndex.value];
-    if (p) onLiClick(p);
-}
-
-function onInputDelete() {
-    if (filter.value && filter.value.length > 0) return;
-    selectedProp.value?.pop();
-}
-
-function onDropdownChanged(visible: boolean) {
-    if (visible) {
-        nextTick(() => {
-            filterInput.value?.focus();
-        })
-    }
-    dropdownVisible.value = visible;
-}
-
-
-const displayedExpr = computed(() => selectedProp.value && selectedProp.value.length
-                                     > 0 ? selectedProp.value?.join('.') : "请选择属性")
-
-const scrollToActive = () => {
-    nextTick(() => {
-        const scrollWrapper = scrollbar.value?.$refs.wrapRef as HTMLElement;
-        const activeItem = scrollWrapper?.querySelectorAll('li')[activeIndex.value] as HTMLElement;
-        if (activeItem && scrollWrapper) {
-            const itemTop = (
-                activeItem as HTMLElement
-            ).offsetTop;
-            const itemBottom = activeItem.offsetTop + activeItem.offsetHeight;
-            const visibleTop = scrollWrapper.scrollTop;
-            const visibleBottom = scrollWrapper.scrollTop + scrollWrapper.clientHeight;
-            if (itemBottom > visibleBottom) {
-                scrollbar.value?.scrollTo(0,
-                    itemBottom - scrollWrapper.clientHeight + activeItem.offsetHeight - 38);
-            } else if (itemTop < visibleTop) {
-                scrollbar.value?.scrollTo(0, itemTop);
-            }
-        }
-    });
-};
-
-
-watch(() => props.entityId, loadProperties);
-
-watch(selectedProp,
-    () => onChange(selectedProp.value),
-    {
-        deep: true
-    })
-
-function syncSelectedProp() {
-    if (model.value && model.value.length > 0) {
-        const arr = model.value.split('.');
-        if (arr.length !== selectedProp.value.length)
-            selectedProp.value = arr;
-    } else {
-        if (selectedProp.value.length > 0)
-            selectedProp.value = [];
-    }
-}
-
-watch(model, () => {
-    syncSelectedProp();
-})
-
-if (model.value && model.value.length > 0) {
-    syncSelectedProp();
-} else {
-    loadProperties();
-}
-
-watch(properties, () => {
-    activeIndex.value = 0;
-    scrollToActive();
-});
-
-</script>
-
-<template>
-    <el-dropdown @visible-change="onDropdownChanged">
-        <el-tag type="primary">{{ displayedExpr }}
-            <el-icon v-if="dropdownVisible">
-                <arrow-up></arrow-up>
-            </el-icon>
-            <el-icon v-else>
-                <arrow-down></arrow-down>
-            </el-icon>
-        </el-tag>
-        <template #dropdown>
-            <div class="ja-property-picker__dropdown">
-                <div class="el-input-tag el-input-tag--small el-input-tag__wrapper"
-                     :class="{ 'is-hovering': isHovered, 'is-focused': isFocused }"
-                     @mouseenter="isHovered=true"
-                     @mouseleave="isHovered=false">
-                    <el-tag v-for="t in selectedProp" :id="t" @close="onTagClose(t)" closable>{{
-                            t
-                        }}
-                    </el-tag>
-                    <input ref="filterInput" type="text" style="flex: auto;"
-                           class="el-input-tag__input"
-                           v-model="filter"
-                           placeholder="属性名过滤"
-                           @focus="isFocused=true" @blur="isFocused=false"
-                           @keydown.delete="onInputDelete"
-                           @keydown.down="onInputArrowDown"
-                           @keydown.up="onInputArrowUp"
-                           @keydown.enter="onInputEnter"
-                           @input="onFilterInput">
-                </div>
-                <el-scrollbar height="300px" v-loading="loading" always ref="scrollbar">
-                    <ul v-if="properties?.length??0 > 0">
-                        <li v-for="(p, index) in properties"
-                            :key="p.id"
-                            @mouseenter="onMouseEnter(index)"
-                            @click="onLiClick(p)"
-                            :class="getLiClass(index)">
-                            <span v-if="p.dataType==='ENTITY'" class="entity-type">{{
-                                    optionLabel(p)
-                                }}</span>
-                            <span v-else>{{ optionLabel(p) }}</span>
-                        </li>
-                    </ul>
-                    <el-empty v-else description="无可选属性"></el-empty>
-                </el-scrollbar>
-            </div>
-        </template>
-    </el-dropdown>
-</template>
-
-<style scoped lang="scss">
-.ja-property-picker {
-    &__dropdown {
-        padding: 12px;
-        width: 400px;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-
-        ul {
-            padding: 0 16px 0 0;
-            margin: 0;
-
-            li {
-                height: 38px;
-                display: flex;
-                align-items: center;
-                gap: 4px;
-                padding: 0 8px;
-
-                .entity-type {
-                    font-weight: bold;
-                }
-
-                &.active {
-                    background-color: var(--el-color-primary-light-9);
-                }
-            }
-        }
-
-        :deep(.el-input-tag .el-tag:not(:last-of-type) .el-tag__close) {
-            display: none !important;
-        }
-
-        :deep(.el-input-tag) {
-            display: flex;
-            gap: 4px;
-        }
-    }
-}
-</style>
+<script setup lang="ts">
+import {
+    createAxiosWithoutCache,
+    type ProjectedPropertyDefinition,
+    useEntityApi, 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";
+
+const props = defineProps<{
+    entityId?: string
+}>();
+let currentEntityId: string | undefined = undefined;
+const model = defineModel<string | undefined>({
+    required: true
+});
+const selectedProp = ref<string[]>([]);
+const axios = createAxiosWithoutCache();
+const api = useEntityApi(axios);
+const properties = ref<ProjectedPropertyDefinition[]>();
+const propsCache: Record<number, ProjectedPropertyDefinition[]> = {};
+const activeIndex = ref(0);
+const loading = useLoading(axios);
+const isHovered = ref(false);
+const isFocused = ref(false);
+const filterInput = ref<HTMLInputElement | null>();
+const scrollbar = ref<InstanceType<typeof ElScrollbar>>();
+const filter = ref("");
+let dropdownVisible = ref(false);
+
+async function loadProperties() {
+    if (!currentEntityId) {
+        currentEntityId = props.entityId
+    }
+    if (currentEntityId) {
+        let p = propsCache[currentEntityId];
+        if (!p) {
+            p = await api.getProperties(currentEntityId);
+            propsCache[currentEntityId] = p;
+        }
+        properties.value = p;
+    } else {
+        properties.value = [];
+    }
+}
+
+function onChange(query: string[] | undefined) {
+    let v: string;
+    if (query) {
+        v = query.join('.');
+    } else {
+        v = "";
+    }
+    if (v !== model.value) model.value = v;
+    nextTick(async () => {
+        currentEntityId = props.entityId!;
+        await loadProperties();
+        let ps = propsCache[currentEntityId];
+        if (!ps) return;
+        for (let i = 0; i < query.length; i++) {
+            const pn = query[i];
+            let p = ps.find(x => x.name === pn);
+            if (p && p.entityType) {
+                currentEntityId = p.entityType.id;
+                if (i < query.length - 1) {
+                    await loadProperties();
+                    ps = propsCache[currentEntityId];
+                } else {
+                    if (p.dataType === 'ENTITY' && p.collectionType === 'NONE') {
+                        currentEntityId = p.entityType.id;
+                        loadProperties();
+                    } else {
+                        currentEntityId = "-1";
+                        loadProperties();
+                    }
+                }
+            } else {
+                currentEntityId = "-1";
+                loadProperties();
+            }
+        }
+        filterInput.value?.focus();
+    })
+}
+
+function optionLabel(p: ProjectedPropertyDefinition) {
+    if (p.caption && p.caption.length > 0) {
+        return p.name + "(" + p.caption + ")";
+    } else {
+        return p.name;
+    }
+}
+
+function onMouseEnter(index: number) {
+    activeIndex.value = index;
+}
+
+function getLiClass(index: number) {
+    return activeIndex.value === index ? "active" : "";
+}
+
+function onLiClick(p: ProjectedPropertyDefinition) {
+    selectedProp.value?.push(p.name);
+    filter.value = '';
+    filterInput.value?.focus();
+}
+
+function onTagClose(t: string) {
+    selectedProp.value?.pop();
+}
+
+function onFilterInput() {
+    if (!currentEntityId) return;
+    const ps = propsCache[currentEntityId];
+    if (!ps) return;
+    const filter = filterInput.value?.value;
+    if (filter && filter.length > 0)
+        properties.value = [...ps].filter(p => p.name.toLowerCase().indexOf(filter.toLowerCase())
+                                               > -1);
+    else properties.value = ps;
+    scrollToActive();
+}
+
+
+function onInputArrowDown() {
+    if (!properties.value) return;
+    if (activeIndex.value < properties.value.length - 1) {
+        activeIndex.value++;
+    }
+    scrollToActive();
+}
+
+function onInputArrowUp() {
+    if (activeIndex.value > 0) {
+        activeIndex.value--;
+    }
+    scrollToActive();
+}
+
+function onInputEnter() {
+    if (!properties.value) return;
+    const p = properties.value[activeIndex.value];
+    if (p) onLiClick(p);
+}
+
+function onInputDelete() {
+    if (filter.value && filter.value.length > 0) return;
+    selectedProp.value?.pop();
+}
+
+function onDropdownChanged(visible: boolean) {
+    if (visible) {
+        nextTick(() => {
+            filterInput.value?.focus();
+        })
+    }
+    dropdownVisible.value = visible;
+}
+
+
+const displayedExpr = computed(() => selectedProp.value && selectedProp.value.length
+                                     > 0 ? selectedProp.value?.join('.') : "请选择属性")
+
+const scrollToActive = () => {
+    nextTick(() => {
+        const scrollWrapper = scrollbar.value?.$refs.wrapRef as HTMLElement;
+        const activeItem = scrollWrapper?.querySelectorAll('li')[activeIndex.value] as HTMLElement;
+        if (activeItem && scrollWrapper) {
+            const itemTop = (
+                activeItem as HTMLElement
+            ).offsetTop;
+            const itemBottom = activeItem.offsetTop + activeItem.offsetHeight;
+            const visibleTop = scrollWrapper.scrollTop;
+            const visibleBottom = scrollWrapper.scrollTop + scrollWrapper.clientHeight;
+            if (itemBottom > visibleBottom) {
+                scrollbar.value?.scrollTo(0,
+                    itemBottom - scrollWrapper.clientHeight + activeItem.offsetHeight - 38);
+            } else if (itemTop < visibleTop) {
+                scrollbar.value?.scrollTo(0, itemTop);
+            }
+        }
+    });
+};
+
+
+watch(() => props.entityId, loadProperties);
+
+watch(selectedProp,
+    () => onChange(selectedProp.value),
+    {
+        deep: true
+    })
+
+function syncSelectedProp() {
+    if (model.value && model.value.length > 0) {
+        const arr = model.value.split('.');
+        if (arr.length !== selectedProp.value.length)
+            selectedProp.value = arr;
+    } else {
+        if (selectedProp.value.length > 0)
+            selectedProp.value = [];
+    }
+}
+
+watch(model, () => {
+    syncSelectedProp();
+})
+
+if (model.value && model.value.length > 0) {
+    syncSelectedProp();
+} else {
+    loadProperties();
+}
+
+watch(properties, () => {
+    activeIndex.value = 0;
+    scrollToActive();
+});
+
+</script>
+
+<template>
+    <el-dropdown @visible-change="onDropdownChanged">
+        <el-tag type="primary">{{ displayedExpr }}
+            <el-icon v-if="dropdownVisible">
+                <arrow-up></arrow-up>
+            </el-icon>
+            <el-icon v-else>
+                <arrow-down></arrow-down>
+            </el-icon>
+        </el-tag>
+        <template #dropdown>
+            <div class="ja-property-picker__dropdown">
+                <div class="el-input-tag el-input-tag--small el-input-tag__wrapper"
+                     :class="{ 'is-hovering': isHovered, 'is-focused': isFocused }"
+                     @mouseenter="isHovered=true"
+                     @mouseleave="isHovered=false">
+                    <el-tag v-for="t in selectedProp" :id="t" @close="onTagClose(t)" closable>{{
+                            t
+                        }}
+                    </el-tag>
+                    <input ref="filterInput" type="text" style="flex: auto;"
+                           class="el-input-tag__input"
+                           v-model="filter"
+                           placeholder="属性名过滤"
+                           @focus="isFocused=true" @blur="isFocused=false"
+                           @keydown.delete="onInputDelete"
+                           @keydown.down="onInputArrowDown"
+                           @keydown.up="onInputArrowUp"
+                           @keydown.enter="onInputEnter"
+                           @input="onFilterInput">
+                </div>
+                <el-scrollbar height="300px" v-loading="loading" always ref="scrollbar">
+                    <ul v-if="properties?.length??0 > 0">
+                        <li v-for="(p, index) in properties"
+                            :key="p.id"
+                            @mouseenter="onMouseEnter(index)"
+                            @click="onLiClick(p)"
+                            :class="getLiClass(index)">
+                            <span v-if="p.dataType==='ENTITY'" class="entity-type">{{
+                                    optionLabel(p)
+                                }}</span>
+                            <span v-else>{{ optionLabel(p) }}</span>
+                        </li>
+                    </ul>
+                    <el-empty v-else description="无可选属性"></el-empty>
+                </el-scrollbar>
+            </div>
+        </template>
+    </el-dropdown>
+</template>
+
+<style scoped lang="scss">
+.ja-property-picker {
+    &__dropdown {
+        padding: 12px;
+        width: 400px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        ul {
+            padding: 0 16px 0 0;
+            margin: 0;
+
+            li {
+                height: 38px;
+                display: flex;
+                align-items: center;
+                gap: 4px;
+                padding: 0 8px;
+
+                .entity-type {
+                    font-weight: bold;
+                }
+
+                &.active {
+                    background-color: var(--el-color-primary-light-9);
+                }
+            }
+        }
+
+        :deep(.el-input-tag .el-tag:not(:last-of-type) .el-tag__close) {
+            display: none !important;
+        }
+
+        :deep(.el-input-tag) {
+            display: flex;
+            gap: 4px;
+        }
+    }
+}
+</style>

package/packages/components/properyPicker/index.ts

@@ -1,7 +1,7 @@
-import {type SFCWithInstall, withInstall} from "../../utils/install";
-import _JaPropertyPicker from "./JaPropertyPicker.vue";
-import PropertyPicker from "./PropertyPicker.vue";
-
-export const JaPropertyPicker: SFCWithInstall<typeof _JaPropertyPicker> = withInstall(_JaPropertyPicker);
-
-export const JaPropertyPickerRaw: SFCWithInstall<typeof PropertyPicker> = withInstall(PropertyPicker);
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import _JaPropertyPicker from "./JaPropertyPicker.vue";
+import PropertyPicker from "./PropertyPicker.vue";
+
+export const JaPropertyPicker: SFCWithInstall<typeof _JaPropertyPicker> = withInstall(_JaPropertyPicker);
+
+export const JaPropertyPickerRaw: SFCWithInstall<typeof PropertyPicker> = withInstall(PropertyPicker);