ace-front-end 1.0.0

package/ace-element-plus-component/packages/components/select/JaSelect.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import {inject, ref, watch, computed} from "vue";
+import {ElSelect} from "element-plus";
+import type { SelectProps } from 'element-plus'
+import type {EpPropFinalized} from "element-plus/es/utils";
+import {getValue, setValue} from "../../utils/objectUtils";
+
+const input = ref<InstanceType<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: any]
+}>()
+
+export interface JaSelectProps extends Partial<SelectProps> {
+}
+
+const props = defineProps<JaSelectProps>()
+
+function onChange(value: any) {
+    validator.removeFieldError(prop)
+    setValue(model.formData, prop, mv.value);
+    emit('change', value)
+}
+
+// type modelType = EpPropFinalized<(ArrayConstructor | ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[], unknown, unknown, undefined, boolean>;
+type ModelType = any; // Select value can be complex
+
+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 as any
+    return rest
+})
+
+defineExpose({
+    focus: () => input.value?.focus?.(),
+    blur: () => input.value?.blur?.(),
+    elSelect: input
+})
+</script>
+
+<template>
+    <el-select
+        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-select>
+</template>

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

@@ -0,0 +1,24 @@
+# JaSelect 选择器组件
+
+`JaSelect` 是对 Element Plus `ElSelect` 的封装，集成了 `JaForm` 表单上下文注入。
+
+## 组件用途
+
+用于在 `JaForm` 中进行选择，自动绑定数据模型。
+
+## 属性 API
+
+该组件继承了 [ElSelect](https://element-plus.org/zh-CN/component/select.html#select-attributes) 的所有属性。
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| - | - | - | 支持所有 ElSelect 属性 |
+
+## 使用示例
+
+```vue
+<ja-select>
+  <el-option label="Zone 1" value="shanghai" />
+  <el-option label="Zone 2" value="beijing" />
+</ja-select>
+```

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

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

package/ace-element-plus-component/packages/components/stringList/JaStringList.vue

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

package/ace-element-plus-component/packages/components/stringList/StringListInput.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import {Minus, Plus} from "@element-plus/icons-vue";
+import {watch, ref, onBeforeMount} from "vue";
+import {ElSpace, ElInput, ElIcon, ElTooltip} from "element-plus";
+
+const props = withDefaults(defineProps<{
+    modelValue: string[],
+    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: ""})
+}
+
+const values = ref(props.modelValue?.map(v => {
+    return {v}
+}) ?? [{
+    v: ""
+}])
+
+let initializing = false;
+let internalChangedValue = false;
+
+onBeforeMount(() => initializeModelValue(props.modelValue))
+
+function initializeModelValue(n: string[]) {
+    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: ""});
+        }
+    } else {
+        values.value = [{v: ""}]
+    }
+}
+
+watch(() => props.modelValue, (n: string[]) => {
+    initializeModelValue(n);
+})
+
+watch(() => values.value, () => {
+    if (initializing) {
+        initializing = false;
+        return;
+    }
+    internalChangedValue = true;
+    const newValue = values.value.map(item => item.v).filter(v => v && v.length > 0)
+    emits("update:modelValue", newValue)
+    emits("change", newValue)
+}, {deep: true})
+</script>
+
+<template>
+    <div style="width: 100%">
+        <el-space direction="vertical" style="align-items: stretch; width: 100%">
+            <el-input v-for="(v, index) in values" :key="index" v-model="v.v" :size="size">
+                <template #append>
+                    <el-tooltip content="删除" placement="right">
+                        <div @click="removeValue(index)"
+                             v-show="index < (values?.length ?? 0) - 1"
+                             style="margin:0 -20px; padding: 0 20px;">
+                            <el-icon>
+                                <Minus/>
+                            </el-icon>
+                        </div>
+                    </el-tooltip>
+                    <el-tooltip content="添加" placement="right">
+                        <div @click="addValue()" v-show="index === (values?.length ?? 0) - 1"
+                             style="margin:0 -20px; padding: 0 20px;">
+                            <el-icon>
+                                <plus/>
+                            </el-icon>
+                        </div>
+                    </el-tooltip>
+
+                </template>
+            </el-input>
+        </el-space>
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -0,0 +1,7 @@
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import StringList from "./JaStringList.vue";
+import StringListInput from "./StringListInput.vue";
+
+export const JaStringList: SFCWithInstall<typeof StringList> = withInstall(StringList);
+
+export const JaStringListRaw: SFCWithInstall<typeof StringListInput> = withInstall(StringListInput);

package/ace-element-plus-component/packages/components/switch/JaSwitch.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import {inject, ref, watch, computed} from "vue";
+import {ElSwitch} from "element-plus";
+import type { SwitchProps } from 'element-plus'
+import {getValue, setValue} from "../../utils/objectUtils";
+import type {EpPropMergeType} from "element-plus/es/utils";
+
+const input = ref<InstanceType<typeof ElSwitch>>()
+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: boolean | string | number]
+}>()
+
+export interface JaSwitchProps extends Partial<SwitchProps> {
+}
+
+const props = defineProps<JaSwitchProps>()
+
+function onChange(value: boolean | string | number) {
+    validator.removeFieldError(prop)
+    setValue(model.formData, prop, mv.value);
+    emit('change', value)
+}
+
+type modelType =
+    EpPropMergeType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], 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?.(),
+    blur: () => (input.value as any)?.blur?.(),
+    elSwitch: input
+})
+</script>
+
+<template>
+    <el-switch
+        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-switch>
+</template>

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

@@ -0,0 +1,21 @@
+# JaSwitch 开关组件
+
+`JaSwitch` 是对 Element Plus `ElSwitch` 的封装，集成了 `JaForm` 表单上下文注入。
+
+## 组件用途
+
+用于在 `JaForm` 中切换状态，自动绑定数据模型。
+
+## 属性 API
+
+该组件继承了 [ElSwitch](https://element-plus.org/zh-CN/component/switch.html#switch-attributes) 的所有属性。
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| - | - | - | 支持所有 ElSwitch 属性 |
+
+## 使用示例
+
+```vue
+<ja-switch />
+```

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

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

package/ace-element-plus-component/packages/components/timePicker/JaTimePicker.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import {inject, onMounted, ref, watch, computed} from "vue";
+import {ElTimePicker} from "element-plus";
+import type { TimePickerDefaultProps } from 'element-plus'
+import {getValue, setValue} from "../../utils/objectUtils";
+
+const input = ref<InstanceType<typeof ElTimePicker>>()
+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]
+}>()
+
+export interface JaTimePickerProps extends Partial<TimePickerDefaultProps> {
+}
+
+const props = defineProps<JaTimePickerProps>()
+
+const exposeMethods = ref<any>({})
+
+function onChange(value: string) {
+    validator.removeFieldError(prop);
+    setValue(model.formData, prop, mv.value);
+    emit('change', value);
+}
+
+type ModelType = string | number | object | any;
+
+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
+})
+
+onMounted(() => {
+    if (input.value) {
+        const refMethods = Object.entries(input.value).filter(([_, v]) => v instanceof Function);
+        refMethods.forEach(([key, val]) => {
+            exposeMethods.value[key] = val;
+        })
+    }
+})
+
+defineExpose(exposeMethods.value);
+</script>
+
+<template>
+    <el-time-picker
+        ref="input"
+        v-model="model.formData[prop]"
+        @change="onChange"
+        v-bind="{ ...elementProps, ...$attrs }">
+        <template v-for="(_, name) in $slots" v-slot:[name]>
+            <slot :name="name"></slot>
+        </template>
+    </el-time-picker>
+</template>

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

@@ -0,0 +1,21 @@
+# JaTimePicker 时间选择器组件
+
+`JaTimePicker` 是对 Element Plus `ElTimePicker` 的封装，集成了 `JaForm` 表单上下文注入。
+
+## 组件用途
+
+用于在 `JaForm` 中选择时间，自动绑定数据模型。
+
+## 属性 API
+
+该组件继承了 [ElTimePicker](https://element-plus.org/zh-CN/component/time-picker.html#timepicker-attributes) 的所有属性。
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| - | - | - | 支持所有 ElTimePicker 属性 |
+
+## 使用示例
+
+```vue
+<ja-time-picker placeholder="Arbitrary time" />
+```

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

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

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

@@ -0,0 +1,20 @@
+# AceTip 提示组件
+
+`AceTip` 是一个简单的提示信息展示组件。
+
+## 组件用途
+
+用于显示警告、提示或说明信息。
+
+## 属性 API
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| `type` | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'primary'` | 提示类型（颜色） |
+| `text` | `string` | `''` | 提示文本 |
+
+## 使用示例
+
+```vue
+<ace-tip type="warning" text="请注意，此操作不可逆！" />
+```

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

@@ -0,0 +1,4 @@
+import { withInstall } from "../../utils/install";
+import Tip from "./src/AceTip.vue";
+export const AceTip = withInstall(Tip);
+export default Tip;

package/ace-element-plus-component/packages/components/tip/src/AceTip.vue

@@ -0,0 +1,51 @@
+<template>
+    <div
+        class="ace-tip-sfc"
+        :style="{
+            backgroundColor: `var(--el-color-${props.type}-light-9)`,
+            border: ` var(--el-color-${props.type})`,
+        }"
+    >
+        <slot name="icon"></slot>
+        <p class="text-box">
+            {{ props.text }}
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+export interface AceTipProps {
+    /**
+     * 提示类型
+     */
+    type?: "primary" | "success" | "warning" | "danger" | "info";
+    /**
+     * 提示文本
+     */
+    text?: string;
+}
+
+const props = withDefaults(defineProps<AceTipProps>(), {
+    type: "primary",
+    text: "",
+});
+</script>
+
+<style scoped lang="scss">
+.ace-tip-sfc {
+    padding: 8px 16px;
+    border-radius: 4px;
+    border-left: 5px solid;
+    margin: 20px 0;
+    font-size: 14px;
+    display: flex;
+    width: auto;
+    align-items: center;
+
+    .text-box {
+        display: flex;
+        align-items: center;
+        color: var(--el-color-info);
+    }
+}
+</style>