@jari-ace/element-plus-component 0.1.9 → 0.2.0

package/package.json

@@ -1,61 +1,61 @@
-{
-    "name": "@jari-ace/element-plus-component",
-    "private": false,
-    "version": "0.1.9",
-    "main": "lib/index.umd.cjs",
-    "module": "lib/index.js",
-    "types": "dist/index.d.ts",
-    "type": "module",
-    "files": [
-        "lib",
-        "dist",
-        "theme-style",
-        "packages"
-    ],
-    "scripts": {
-        "dev": "vite --port 3400",
-        "build": "run-p type-check && vite build",
-        "preview": "vite preview",
-        "dts": "vue-tsc --declaration --emitDeclarationOnly ",
-        "type-check": "vue-tsc --build --force"
-    },
-    "dependencies": {
-        "@element-plus/icons-vue": "^2.3.1",
-        "animate.css": "^4.1.1"
-    },
-    "devDependencies": {
-        "@jari-ace/app-bolts": "0.3.6",
-        "@types/lodash-es": "^4.17.12",
-        "@vitejs/plugin-vue": "^5.2.1",
-        "@vitejs/plugin-vue-jsx": "^4.1.1",
-        "@vue/tsconfig": "^0.5.1",
-        "@vueuse/core": "^11.1.0",
-        "element-plus": "2.10.3",
-        "gulp": "^4.0.2",
-        "gulp-autoprefixer": "^8.0.0",
-        "gulp-clean-css": "^4.3.0",
-        "gulp-concat-css": "^3.1.0",
-        "gulp-dart-sass": "^1.0.2",
-        "gulp-rename": "^2.0.0",
-        "gulp-replace": "^1.1.4",
-        "lodash-es": "^4.17.21",
-        "npm-run-all2": "^6.2.0",
-        "sass": "^1.77.6",
-        "typescript": "~5.4.5",
-        "vite": "^6.3.5",
-        "vue": "^3.5.13",
-        "vue-i18n": "^9.13.1",
-        "vue-tsc": "^2.0.21"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "peerDependencies": {
-        "@jari-ace/app-bolts": "workspace:*",
-        "@vueuse/core": "^11.1.0",
-        "element-plus": "^2.8.4",
-        "lodash-es": "^4.17.21",
-        "vue": "^3.5.11",
-        "vue-i18n": "^9.13.1"
-    }
-}
+{
+  "name": "@jari-ace/element-plus-component",
+  "private": false,
+  "version": "0.2.0",
+  "main": "lib/index.umd.cjs",
+  "module": "lib/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "lib",
+    "dist",
+    "theme-style",
+    "packages"
+  ],
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "animate.css": "^4.1.1"
+  },
+  "devDependencies": {
+    "@jari-ace/app-bolts": "0.3.6",
+    "@types/lodash-es": "^4.17.12",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vue/tsconfig": "^0.5.1",
+    "@vueuse/core": "^11.1.0",
+    "element-plus": "2.10.3",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^8.0.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-concat-css": "^3.1.0",
+    "gulp-dart-sass": "^1.0.2",
+    "gulp-rename": "^2.0.0",
+    "gulp-replace": "^1.1.4",
+    "lodash-es": "^4.17.21",
+    "npm-run-all2": "^6.2.0",
+    "sass": "^1.77.6",
+    "typescript": "~5.4.5",
+    "vite": "^6.3.5",
+    "vue": "^3.5.13",
+    "vue-i18n": "^9.13.1",
+    "vue-tsc": "^2.0.21"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@vueuse/core": "^11.1.0",
+    "element-plus": "^2.8.4",
+    "lodash-es": "^4.17.21",
+    "vue": "^3.5.11",
+    "vue-i18n": "^9.13.1",
+    "@jari-ace/app-bolts": "0.4.0"
+  },
+  "scripts": {
+    "dev": "vite --port 3400",
+    "build": "run-p type-check && vite build",
+    "preview": "vite preview",
+    "dts": "vue-tsc --declaration --emitDeclarationOnly ",
+    "type-check": "vue-tsc --build --force"
+  }
+}

package/packages/components/autoComplete/JaAutoComplete.vue

@@ -1,47 +1,47 @@
-<script setup lang="ts">
-import {ElAutocomplete} from "element-plus";
-import {inject, ref, watch} from "vue";
-import type {ValidationInstance} from "../../hooks/useBackendValidations";
-import type {EpPropMergeType} from "element-plus/es/utils";
-import {getValue, setValue} from "../../utils/objectUtils";
-
-const input = ref<typeof ElAutocomplete>()
-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 =
-    EpPropMergeType<readonly [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({
-    elAutocomplete: input
-})
-
-</script>
-
-<template>
-    <el-autocomplete
-        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-autocomplete>
-</template>
+<script setup lang="ts">
+import {ElAutocomplete} from "element-plus";
+import {inject, ref, watch} from "vue";
+import type {ValidationInstance} from "../../hooks/useBackendValidations";
+import type {EpPropMergeType} from "element-plus/es/utils";
+import {getValue, setValue} from "../../utils/objectUtils";
+
+const input = ref<typeof ElAutocomplete>()
+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 =
+    EpPropMergeType<readonly [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({
+    elAutocomplete: input
+})
+
+</script>
+
+<template>
+    <el-autocomplete
+        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-autocomplete>
+</template>

package/packages/components/autoComplete/index.ts

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

package/packages/components/avatar/JaAvatar.vue

@@ -1,126 +1,126 @@
-<script setup lang="ts">
-import {getAvatarToken} from "./avatarToken";
-import {ElAvatar, ElImage} from "element-plus";
-import {
-    computed,
-    defineProps,
-    nextTick,
-    onMounted, onUnmounted,
-    ref,
-    watch,
-    withDefaults
-} from "vue";
-import {defaultImg} from "./defaultImg";
-
-const props = withDefaults(defineProps<{
-    /**
-     * 用户id
-     */
-    userId?: string,
-    /**
-     * 用户名
-     */
-    username?: string,
-    /**
-     * 用户域
-     */
-    realm?: string,
-    /**
-     * 是否在tag上显示用户头像
-     */
-    doNotLoadAvatar?: boolean,
-    /**
-     * 用户是否设置了头像
-     */
-    hasAvatar?: boolean,
-
-    firstName?: string
-}>(), {
-    doNotLoadAvatar: false
-})
-
-const token = getAvatarToken();
-const inView = ref(false);
-const avatar = ref<InstanceType<typeof ElAvatar>>()
-const usernameSpan = ref<HTMLElement>();
-const scrollbarWrappedItems = undefined; //inject(SCROLL_BAR_WRAPPED_INJECT_KEY) as Ref<ScrollbarWrapped[] | undefined>
-if (!scrollbarWrappedItems) {
-    inView.value = true;
-}
-
-onMounted(async () => {
-    await nextTick();
-    if (scrollbarWrappedItems) {
-        scrollbarWrappedItems.value?.push({
-            childElement: avatar.value?.$el,
-            onInView(isInView: boolean) {
-                if (isInView && !inView.value) inView.value = true;
-            }
-        });
-    }
-})
-
-const lazyUrl = computed(() => {
-        if (!(
-            inView.value && props.hasAvatar && !props.doNotLoadAvatar
-        )) {
-            return props.firstName ? "" : defaultImg;
-        }
-        if (props.userId && props.userId.length > 0) {
-            const path = '/ace-app-service/avatar/' + props.userId
-            return window.appDescriptor.env.isDevMode()
-                ? new URL("/ace" + path, location.origin).toString() + "?t=" + token.value.toString() //开发模式下使用vite代理，添加ace前缀，由vite代理修改路由
-                : new URL(path, location.origin).toString() + "?t=" + token.value.toString()
-        }
-        if (props.realm && props.realm.length > 0 && props.username && props.username.length > 0) {
-            const path = '/ace-app-service/avatar/' + props.realm + '/' + props.username
-            return window.appDescriptor.env.isDevMode()
-                ? new URL("/ace" + path, location.origin).toString() + "?t=" + token.value.toString() //开发模式下使用vite代理，添加ace前缀，由vite代理修改路由
-                : new URL(path, location.origin).toString() + "?t=" + token.value.toString()
-        }
-        return props.firstName ? "" : defaultImg;
-    }
-)
-
-function adjustFontSize(element?: HTMLElement) {
-    if (!element) return;
-    let parentWidth = avatar.value?.$el.clientWidth;
-    let fontSize = parentWidth / 2.8;
-    element.style.fontSize = fontSize + 'px';
-}
-
-onUnmounted(() => {
-    if (scrollbarWrappedItems) {
-        scrollbarWrappedItems.value = undefined;
-    }
-})
-
-watch(usernameSpan, () => adjustFontSize(usernameSpan.value))
-</script>
-
-<template>
-    <el-avatar :src="lazyUrl" v-bind="$attrs" ref="avatar" class="ja-avatar">
-        <span v-if="props.firstName && props.firstName.length > 0" class="user-name-avatar"
-              ref="usernameSpan">
-            {{ firstName }}
-        </span>
-        <el-image style="height:100%" v-else
-                  :src="defaultImg"
-                  alt="用户头像"/>
-    </el-avatar>
-</template>
-
-<style scoped lang="scss">
-.ja-avatar {
-    --el-avatar-bg-color: #C1CCD7 !important;
-    transition: background-color 0.3s ease;
-
-    &:hover {
-        --el-avatar-bg-color: #9BA4AF !important;
-    }
-}
-
-.user-name-avatar {
-}
-
-</style>
+<script setup lang="ts">
+import {getAvatarToken} from "./avatarToken";
+import {ElAvatar, ElImage} from "element-plus";
+import {
+    computed,
+    defineProps,
+    nextTick,
+    onMounted, onUnmounted,
+    ref,
+    watch,
+    withDefaults
+} from "vue";
+import {defaultImg} from "./defaultImg";
+
+const props = withDefaults(defineProps<{
+    /**
+     * 用户id
+     */
+    userId?: string,
+    /**
+     * 用户名
+     */
+    username?: string,
+    /**
+     * 用户域
+     */
+    realm?: string,
+    /**
+     * 是否在tag上显示用户头像
+     */
+    doNotLoadAvatar?: boolean,
+    /**
+     * 用户是否设置了头像
+     */
+    hasAvatar?: boolean,
+
+    firstName?: string
+}>(), {
+    doNotLoadAvatar: false
+})
+
+const token = getAvatarToken();
+const inView = ref(false);
+const avatar = ref<InstanceType<typeof ElAvatar>>()
+const usernameSpan = ref<HTMLElement>();
+const scrollbarWrappedItems = undefined; //inject(SCROLL_BAR_WRAPPED_INJECT_KEY) as Ref<ScrollbarWrapped[] | undefined>
+if (!scrollbarWrappedItems) {
+    inView.value = true;
+}
+
+onMounted(async () => {
+    await nextTick();
+    if (scrollbarWrappedItems) {
+        scrollbarWrappedItems.value?.push({
+            childElement: avatar.value?.$el,
+            onInView(isInView: boolean) {
+                if (isInView && !inView.value) inView.value = true;
+            }
+        });
+    }
+})
+
+const lazyUrl = computed(() => {
+        if (!(
+            inView.value && props.hasAvatar && !props.doNotLoadAvatar
+        )) {
+            return props.firstName ? "" : defaultImg;
+        }
+        if (props.userId && props.userId.length > 0) {
+            const path = '/ace-app-service/avatar/' + props.userId
+            return window.appDescriptor.env.isDevMode()
+                ? new URL("/ace" + path, location.origin).toString() + "?t=" + token.value.toString() //开发模式下使用vite代理，添加ace前缀，由vite代理修改路由
+                : new URL(path, location.origin).toString() + "?t=" + token.value.toString()
+        }
+        if (props.realm && props.realm.length > 0 && props.username && props.username.length > 0) {
+            const path = '/ace-app-service/avatar/' + props.realm + '/' + props.username
+            return window.appDescriptor.env.isDevMode()
+                ? new URL("/ace" + path, location.origin).toString() + "?t=" + token.value.toString() //开发模式下使用vite代理，添加ace前缀，由vite代理修改路由
+                : new URL(path, location.origin).toString() + "?t=" + token.value.toString()
+        }
+        return props.firstName ? "" : defaultImg;
+    }
+)
+
+function adjustFontSize(element?: HTMLElement) {
+    if (!element) return;
+    let parentWidth = avatar.value?.$el.clientWidth;
+    let fontSize = parentWidth / 2.8;
+    element.style.fontSize = fontSize + 'px';
+}
+
+onUnmounted(() => {
+    if (scrollbarWrappedItems) {
+        scrollbarWrappedItems.value = undefined;
+    }
+})
+
+watch(usernameSpan, () => adjustFontSize(usernameSpan.value))
+</script>
+
+<template>
+    <el-avatar :src="lazyUrl" v-bind="$attrs" ref="avatar" class="ja-avatar">
+        <span v-if="props.firstName && props.firstName.length > 0" class="user-name-avatar"
+              ref="usernameSpan">
+            {{ firstName }}
+        </span>
+        <el-image style="height:100%" v-else
+                  :src="defaultImg"
+                  alt="用户头像"/>
+    </el-avatar>
+</template>
+
+<style scoped lang="scss">
+.ja-avatar {
+    --el-avatar-bg-color: #C1CCD7 !important;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+        --el-avatar-bg-color: #9BA4AF !important;
+    }
+}
+
+.user-name-avatar {
+}
+
+</style>

package/packages/components/avatar/avatarToken.ts

@@ -1,11 +1,11 @@
-import {ref} from "vue"
-
-const token = ref(Date.now());
-
-export function updateAvatarToken() {
-    token.value = Date.now();
-}
-
-export function getAvatarToken() {
-    return token;
-}
+import {ref} from "vue"
+
+const token = ref(Date.now());
+
+export function updateAvatarToken() {
+    token.value = Date.now();
+}
+
+export function getAvatarToken() {
+    return token;
+}

package/packages/components/avatar/defaultImg.ts

@@ -1,14 +1,14 @@
-export const defaultImg = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280.000000pt' height='1248.000000pt' viewBox='-384 -374 2048 2048' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,1248.000000) scale(0.100000,-0.100000)'\n" +
-    "fill='%23fff' stroke='none'%3E%3Cpath d='M6005 12474 c-22 -2 -89 -9 -149 -14 -542 -53 -1087 -253 -1556 -571\n" +
-    "-1089 -738 -1659 -2029 -1470 -3331 117 -802 507 -1518 1129 -2075 454 -406\n" +
-    "1057 -697 1666 -802 220 -39 317 -46 595 -46 278 0 375 7 595 46 1218 211\n" +
-    "2250 1096 2647 2269 353 1043 189 2180 -442 3075 -568 804 -1437 1318 -2425\n" +
-    "1435 -92 11 -518 21 -590 14z'/%3E%3Cpath d='M8585 5886 c-478 -363 -1085 -626 -1687 -730 -247 -43 -348 -51 -678\n" +
-    "-51 -319 0 -364 3 -612 41 -586 88 -1171 326 -1668 676 l-114 81 -106 -17\n" +
-    "c-58 -10 -181 -38 -275 -61 -807 -204 -1528 -616 -2120 -1210 -726 -728 -1170\n" +
-    "-1655 -1297 -2704 -29 -238 -32 -741 -5 -930 53 -378 142 -589 320 -758 171\n" +
-    "-163 421 -234 772 -220 269 11 533 55 1230 208 817 179 1195 244 1690 291 205\n" +
-    "19 4525 19 4730 0 495 -47 873 -112 1690 -291 697 -153 961 -197 1230 -208\n" +
-    "254 -10 438 21 605 103 172 84 315 254 390 463 74 203 108 420 117 736 34\n" +
-    "1230 -451 2439 -1332 3320 -707 707 -1608 1156 -2597 1294 -206 29 -201 30\n" +
-    "-283 -33z'/%3E%3C/g%3E%3C/svg%3E";
+export const defaultImg = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280.000000pt' height='1248.000000pt' viewBox='-384 -374 2048 2048' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,1248.000000) scale(0.100000,-0.100000)'\n" +
+    "fill='%23fff' stroke='none'%3E%3Cpath d='M6005 12474 c-22 -2 -89 -9 -149 -14 -542 -53 -1087 -253 -1556 -571\n" +
+    "-1089 -738 -1659 -2029 -1470 -3331 117 -802 507 -1518 1129 -2075 454 -406\n" +
+    "1057 -697 1666 -802 220 -39 317 -46 595 -46 278 0 375 7 595 46 1218 211\n" +
+    "2250 1096 2647 2269 353 1043 189 2180 -442 3075 -568 804 -1437 1318 -2425\n" +
+    "1435 -92 11 -518 21 -590 14z'/%3E%3Cpath d='M8585 5886 c-478 -363 -1085 -626 -1687 -730 -247 -43 -348 -51 -678\n" +
+    "-51 -319 0 -364 3 -612 41 -586 88 -1171 326 -1668 676 l-114 81 -106 -17\n" +
+    "c-58 -10 -181 -38 -275 -61 -807 -204 -1528 -616 -2120 -1210 -726 -728 -1170\n" +
+    "-1655 -1297 -2704 -29 -238 -32 -741 -5 -930 53 -378 142 -589 320 -758 171\n" +
+    "-163 421 -234 772 -220 269 11 533 55 1230 208 817 179 1195 244 1690 291 205\n" +
+    "19 4525 19 4730 0 495 -47 873 -112 1690 -291 697 -153 961 -197 1230 -208\n" +
+    "254 -10 438 21 605 103 172 84 315 254 390 463 74 203 108 420 117 736 34\n" +
+    "1230 -451 2439 -1332 3320 -707 707 -1608 1156 -2597 1294 -206 29 -201 30\n" +
+    "-283 -33z'/%3E%3C/g%3E%3C/svg%3E";

package/packages/components/avatar/index.ts

@@ -1,7 +1,7 @@
-import {type SFCWithInstall, withInstall} from "../../utils/install";
-import Avatar from "./JaAvatar.vue";
-
-export const JaAvatar: SFCWithInstall<typeof Avatar> = withInstall(Avatar);
-
-export * from "./avatarToken";
-
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import Avatar from "./JaAvatar.vue";
+
+export const JaAvatar: SFCWithInstall<typeof Avatar> = withInstall(Avatar);
+
+export * from "./avatarToken";
+