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

package/packages/components/stringList/StringListInput.vue

@@ -1,96 +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>
+<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/packages/components/stringList/index.ts

@@ -1,7 +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);
+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/packages/components/switch/JaSwitch.vue

@@ -1,50 +1,50 @@
-<script setup lang="ts">
-import type {ValidationInstance} from '../../hooks/useBackendValidations'
-import {inject, ref, watch} from "vue";
-import {ElSwitch} from "element-plus";
-import {getValue, setValue} from "../../utils/objectUtils";
-import type {EpPropMergeType} from "element-plus/es/utils";
-
-const input = ref<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]
-}>()
-
-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
-})
-
-defineExpose({
-    focus: () => input.value?.focus(),
-    blur: () => input.value?.blur(),
-    elSwitch: input
-})
-</script>
-
-<template>
-    <el-switch
-        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-switch>
-</template>
+<script setup lang="ts">
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import {inject, ref, watch} from "vue";
+import {ElSwitch} from "element-plus";
+import {getValue, setValue} from "../../utils/objectUtils";
+import type {EpPropMergeType} from "element-plus/es/utils";
+
+const input = ref<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]
+}>()
+
+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
+})
+
+defineExpose({
+    focus: () => input.value?.focus(),
+    blur: () => input.value?.blur(),
+    elSwitch: input
+})
+</script>
+
+<template>
+    <el-switch
+        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-switch>
+</template>

package/packages/components/switch/index.ts

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

package/packages/components/timePicker/JaTimePicker.vue

@@ -1,52 +1,52 @@
-<script setup lang="ts">
-import type {ValidationInstance} from '../../hooks/useBackendValidations'
-import {inject, onMounted, ref, watch} from "vue";
-import {ElTimePicker} from "element-plus";
-import {getValue, setValue} from "../../utils/objectUtils";
-
-const input = ref<typeof ElTimePicker>({} as 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]
-}>()
-
-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;
-
-const mv = ref(getValue(model.formData, prop) as ModelType);
-watch(() => model.formData, () => {
-    mv.value = getValue(model.formData, prop) as ModelType;
-}, {
-    deep: true
-})
-
-onMounted(() => {
-    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="$attrs">
-        <template v-for="(_, name) in $slots" v-slot:[name]>
-            <slot :name="name"></slot>
-        </template>
-    </el-time-picker>
-</template>
+<script setup lang="ts">
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import {inject, onMounted, ref, watch} from "vue";
+import {ElTimePicker} from "element-plus";
+import {getValue, setValue} from "../../utils/objectUtils";
+
+const input = ref<typeof ElTimePicker>({} as 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]
+}>()
+
+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;
+
+const mv = ref(getValue(model.formData, prop) as ModelType);
+watch(() => model.formData, () => {
+    mv.value = getValue(model.formData, prop) as ModelType;
+}, {
+    deep: true
+})
+
+onMounted(() => {
+    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="$attrs">
+        <template v-for="(_, name) in $slots" v-slot:[name]>
+            <slot :name="name"></slot>
+        </template>
+    </el-time-picker>
+</template>

package/packages/components/timePicker/index.ts

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

package/packages/components/tip/index.ts

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

package/packages/components/tip/src/AceTip.vue

@@ -1,43 +1,43 @@
-<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">
-const props = withDefaults(defineProps<{
-    type?: "primary" | "success" | "warning" | "danger" | "info";
-    text?: string;
-}>(), {
-    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>
+<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">
+const props = withDefaults(defineProps<{
+    type?: "primary" | "success" | "warning" | "danger" | "info";
+    text?: string;
+}>(), {
+    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>

package/packages/components/upload/index.ts

@@ -1,6 +1,4 @@
-import { withInstall } from '../../utils/install'
-import Upload from './src/Upload.vue'
-export const AceUpload = withInstall(Upload);
-export default Upload;
-
-export * from "./src/Upload.vue";
+import { withInstall } from '../../utils/install'
+import Upload from './uploader.vue'
+export const AceUpload = withInstall(Upload);
+

package/packages/components/upload/pdf-viewer/PdfViewerModal.vue

@@ -0,0 +1,32 @@
+<template>
+    <el-dialog fullscreen v-model="visible" append-to-body modal class="preview-dialog">
+        <VuePdfEmbed annotation-layer text-layer :source="props.src" />
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import {ElDialog } from "element-plus"
+import { defineProps, defineEmits, defineModel } from 'vue';
+import VuePdfEmbed from 'vue-pdf-embed'
+import 'vue-pdf-embed/dist/styles/annotationLayer.css'
+import 'vue-pdf-embed/dist/styles/textLayer.css'
+
+// 1. 定义 Props
+const props = defineProps({
+    src: {
+        type: String,
+        required: true,
+    }
+});
+
+const visible = defineModel<boolean>({
+    required: true
+});
+
+</script>
+
+<style lang="scss" scoped>
+.el-dialog__body {
+    height: 100% !important;
+}
+</style>