ace-front-end 1.0.0

package/ace-element-plus-component/packages/components/numberList/NumberListInput.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import {Minus, Plus} from "@element-plus/icons-vue";
+import {watch, ref, onBeforeMount} from "vue";
+import {ElInputNumber, ElButton} from "element-plus";
+
+const props = withDefaults(defineProps<{
+    modelValue: number[],
+    precision?: number,
+    step?: number,
+    size?: 'small' | 'large' | 'default'
+}>(), {})
+const emits = defineEmits(["update:modelValue", "change"])
+
+function removeValue(index: number) {
+    values.value.splice(index, 1);
+}
+
+function addValue() {
+    values.value.push({v: 0})
+}
+
+const values = ref(props.modelValue?.map(v => {
+    return {v}
+}) ?? [{
+    v: 0
+}])
+
+let initializing = false;
+let internalChangedValue = false;
+
+onBeforeMount(() => initializeModelValue(props.modelValue))
+
+function initializeModelValue(n: number[]) {
+    if (!n) return;
+    if (internalChangedValue) {
+        internalChangedValue = false;
+        return;
+    }
+    initializing = true;
+    if (n) {
+        values.value = n.map(v => {
+            return {v}
+        });
+        if (values.value.length == 0) {
+            values.value.push({v: 0});
+        }
+    } else {
+        values.value = [{v: 0}]
+    }
+}
+
+watch(() => props.modelValue, (n: number[]) => {
+    initializeModelValue(n);
+})
+
+watch(() => values.value, () => {
+    if (initializing) {
+        initializing = false;
+        return;
+    }
+    internalChangedValue = true;
+    const newValue = values.value.map(item => item.v)
+    emits("update:modelValue", newValue)
+    emits("change", newValue)
+}, {deep: true})
+</script>
+
+<template>
+    <div style="width: 100%;" class="ja-number-list">
+        <div class="ja-input-box" v-for="(v, index) in values" :key="index">
+            <el-input-number v-model="v.v" :precision="precision" :size="size"
+                             :step="step"></el-input-number>
+
+            <el-tooltip content="删除" placement="right">
+                <div class="el-input-group__append" v-show="index < (values?.length ?? 0) - 1">
+                    <el-button link :icon="Minus" @click="removeValue(index)" :size="size">
+                    </el-button>
+                </div>
+            </el-tooltip>
+            <el-tooltip content="添加" placement="right">
+                <div class="el-input-group__append" v-show="index === (values?.length ?? 0) - 1">
+                    <el-button @click="addValue()" :size="size"
+                               link :icon="Plus">
+                    </el-button>
+                </div>
+            </el-tooltip>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.ja-number-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .ja-input-box {
+        display: flex;
+        gap: 4px;
+
+        .el-input-group__append {
+            flex: none;
+            margin-left: 0 !important;
+        }
+
+        .el-input-number {
+            flex: auto;
+        }
+    }
+}
+</style>

package/ace-element-plus-component/packages/components/numberList/index.ts

@@ -0,0 +1,7 @@
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import NumberList from "./JaNumberList.vue";
+import NumberListInput from "./NumberListInput.vue";
+
+export const JaNumberList: SFCWithInstall<typeof NumberList> = withInstall(NumberList);
+
+export const JaNumberListRaw: SFCWithInstall<typeof NumberListInput> = withInstall(NumberListInput);

package/ace-element-plus-component/packages/components/properyPicker/JaPropertyPicker.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+
+import PropertyPicker from "./PropertyPicker.vue";
+import {inject, ref, watch} from "vue";
+import type {ValidationInstance} from "../../hooks/useBackendValidations";
+import {getValue, setValue} from "../../utils/objectUtils";
+
+
+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: number[]]
+}>()
+
+function onChange(value: number[]) {
+    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>
+    <property-picker v-model="mv"
+                     @change="onChange"
+                     v-bind="$attrs"></property-picker>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/ace-element-plus-component/packages/components/properyPicker/PropertyPicker.vue

@@ -0,0 +1,310 @@
+<script setup lang="ts">
+import {
+    createAxiosWithoutCache,
+    type ProjectedPropertyDefinition,
+    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
+}>();
+let currentEntityId: string | undefined = undefined;
+const model = defineModel<string | undefined>({
+    required: true
+});
+const selectedProp = ref<string[]>([]);
+const axios = createAxiosWithoutCache();
+const {getProperties} = useProperties();
+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) {
+        properties.value = await getProperties(currentEntityId);
+    } 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/ace-element-plus-component/packages/components/properyPicker/index.ts

@@ -0,0 +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);

package/ace-element-plus-component/packages/components/radioGroup/JaRadioGroup.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import {inject, ref, watch, computed} from "vue";
+import {ElRadioGroup} from "element-plus";
+import type { RadioGroupProps } from 'element-plus'
+import type {EpPropMergeType} from "element-plus/es/utils";
+import {getValue, setValue} from "../../utils/objectUtils";
+
+const input = ref<InstanceType<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]
+}>()
+
+export interface JaRadioGroupProps extends Partial<RadioGroupProps> {
+}
+
+const props = defineProps<JaRadioGroupProps>()
+
+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
+})
+
+const elementProps = computed(() => {
+    const { modelValue, ...rest } = props
+    return rest
+})
+
+defineExpose({
+    focus: () => (input.value as any)?.focus?.(), // Optional chaining
+    blur: () => (input.value as any)?.blur?.(), // Check if method exists
+    elRadioGroup: input
+})
+</script>
+
+<template>
+    <el-radio-group
+        ref="input"
+        v-model="mv"
+        @change="onChange"
+        v-bind="{ ...elementProps, ...$attrs }">
+        <template v-for="(_, name) in $slots" v-slot:[name]>
+            <slot :name="name"></slot>
+        </template>
+    </el-radio-group>
+</template>

package/ace-element-plus-component/packages/components/radioGroup/README.md

@@ -0,0 +1,24 @@
+# JaRadioGroup 单选框组组件
+
+`JaRadioGroup` 是对 Element Plus `ElRadioGroup` 的封装，集成了 `JaForm` 表单上下文注入。
+
+## 组件用途
+
+用于在 `JaForm` 中创建单选框组，自动绑定数据模型。
+
+## 属性 API
+
+该组件继承了 [ElRadioGroup](https://element-plus.org/zh-CN/component/radio.html#radiogroup-attributes) 的所有属性。
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| - | - | - | 支持所有 ElRadioGroup 属性 |
+
+## 使用示例
+
+```vue
+<ja-radio-group>
+  <el-radio :label="3">Option A</el-radio>
+  <el-radio :label="6">Option B</el-radio>
+</ja-radio-group>
+```

package/ace-element-plus-component/packages/components/radioGroup/index.ts

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