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

package/packages/components/button/JaButton.vue

@@ -1,51 +1,51 @@
-<script setup lang="ts">
-import dShortcut from "../../directives/shortcut";
-import vAuth from "../../directives/auth";
-import {ElButton, ElTooltip} from "element-plus";
-import {ref} from "vue";
-
-const input = ref<typeof ElButton>({} as typeof ElButton)
-type AuthModifier = {
-    disable: boolean;
-    any: boolean
-}
-const props = withDefaults(defineProps<{
-    tooltip?: string
-    shortcut?: string
-    auth?: string | string[]
-    authModifiers?: AuthModifier
-    tooltipPlacement?: 'top' | 'bottom'
-}>(), {
-    tooltipPlacement: 'bottom',
-    authModifiers: () => ({
-        disable: true,
-        any: false
-    })
-})
-
-const vShortcut = dShortcut
-
-defineExpose({
-    elButton: input
-})
-
-</script>
-
-<template>
-    <el-tooltip :placement="tooltipPlacement" append-to="body">
-        <el-button
-            ref="input"
-            v-auth:[authModifiers]="auth"
-            v-shortcut:[shortcut]
-            v-bind="$attrs">
-            <template v-for="(_, name) in $slots" v-slot:[name]>
-                <slot :name="name"></slot>
-            </template>
-        </el-button>
-        <template #content>
-            {{
-                `${props.tooltip ?? ''} ${props.shortcut ? "(" : ""}${props.shortcut ?? ""}${props.shortcut ? ")" : ""}`
-            }}
-        </template>
-    </el-tooltip>
-</template>
+<script setup lang="ts">
+import dShortcut from "../../directives/shortcut";
+import vAuth from "../../directives/auth";
+import {ElButton, ElTooltip} from "element-plus";
+import {ref} from "vue";
+
+const input = ref<typeof ElButton>({} as typeof ElButton)
+type AuthModifier = {
+    disable: boolean;
+    any: boolean
+}
+const props = withDefaults(defineProps<{
+    tooltip?: string
+    shortcut?: string
+    auth?: string | string[]
+    authModifiers?: AuthModifier
+    tooltipPlacement?: 'top' | 'bottom'
+}>(), {
+    tooltipPlacement: 'bottom',
+    authModifiers: () => ({
+        disable: true,
+        any: false
+    })
+})
+
+const vShortcut = dShortcut
+
+defineExpose({
+    elButton: input
+})
+
+</script>
+
+<template>
+    <el-tooltip :placement="tooltipPlacement" append-to="body">
+        <el-button
+            ref="input"
+            v-auth:[authModifiers]="auth"
+            v-shortcut:[shortcut]
+            v-bind="$attrs">
+            <template v-for="(_, name) in $slots" v-slot:[name]>
+                <slot :name="name"></slot>
+            </template>
+        </el-button>
+        <template #content>
+            {{
+                `${props.tooltip ?? ''} ${props.shortcut ? "(" : ""}${props.shortcut ?? ""}${props.shortcut ? ")" : ""}`
+            }}
+        </template>
+    </el-tooltip>
+</template>

package/packages/components/button/index.ts

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

package/packages/components/channelPicker/index.ts

@@ -1,7 +1,7 @@
-import {type SFCWithInstall, withInstall} from "../../utils/install";
-import ChannelPicker from "./src/JaChannelPicker.vue";
-import RawChannelPicker from "./src/ChannelPicker.vue";
-
-export const JaChannelPicker: SFCWithInstall<typeof ChannelPicker> = withInstall(ChannelPicker);
-export const JaChannelPickerRaw: SFCWithInstall<typeof RawChannelPicker> = withInstall(RawChannelPicker);
-
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import ChannelPicker from "./src/JaChannelPicker.vue";
+import RawChannelPicker from "./src/ChannelPicker.vue";
+
+export const JaChannelPicker: SFCWithInstall<typeof ChannelPicker> = withInstall(ChannelPicker);
+export const JaChannelPickerRaw: SFCWithInstall<typeof RawChannelPicker> = withInstall(RawChannelPicker);
+

package/packages/components/channelPicker/src/ChannelPicker.vue

@@ -1,43 +1,43 @@
-<script setup lang="ts">
-import {ElSelect, ElOption} from "element-plus";
-import {createAxiosWithoutCache, type ProjectedChannel, useChannelApi} from "@jari-ace/app-bolts";
-import {onBeforeMount, ref, watch} from "vue";
-
-const axios = createAxiosWithoutCache();
-const api = useChannelApi(axios);
-const props = defineProps<{
-    appName?: string
-}>();
-const channels = ref<ProjectedChannel[]>();
-const bindingChannels = ref<ProjectedChannel[]>();
-const selected = defineModel<ProjectedChannel>({
-    required: true
-})
-
-onBeforeMount(() => {
-    loadData();
-})
-
-async function loadData() {
-    console.log('load channels of app ' + props.appName);
-    if (!props.appName) return;
-    channels.value = await api.getAll(props.appName);
-    bindingChannels.value = channels.value;
-}
-
-function filter(queryName: string) {
-    bindingChannels.value = channels.value?.filter(c => c.name.indexOf(queryName) > -1) ?? [];
-}
-
-watch(() => props.appName, loadData);
-</script>
-
-<template>
-    <el-select filterable :filter-method="filter" value-key="id" v-model="selected" v-bind="$attrs">
-        <el-option v-for="c in bindingChannels" :key="c.id" :label="c.name" :value="c"></el-option>
-    </el-select>
-</template>
-
-<style scoped lang="scss">
-
-</style>
+<script setup lang="ts">
+import {ElSelect, ElOption} from "element-plus";
+import {createAxiosWithoutCache, type ProjectedChannel, useChannelApi} from "@jari-ace/app-bolts";
+import {onBeforeMount, ref, watch} from "vue";
+
+const axios = createAxiosWithoutCache();
+const api = useChannelApi(axios);
+const props = defineProps<{
+    appName?: string
+}>();
+const channels = ref<ProjectedChannel[]>();
+const bindingChannels = ref<ProjectedChannel[]>();
+const selected = defineModel<ProjectedChannel>({
+    required: true
+})
+
+onBeforeMount(() => {
+    loadData();
+})
+
+async function loadData() {
+    console.log('load channels of app ' + props.appName);
+    if (!props.appName) return;
+    channels.value = await api.getAll(props.appName);
+    bindingChannels.value = channels.value;
+}
+
+function filter(queryName: string) {
+    bindingChannels.value = channels.value?.filter(c => c.name.indexOf(queryName) > -1) ?? [];
+}
+
+watch(() => props.appName, loadData);
+</script>
+
+<template>
+    <el-select filterable :filter-method="filter" value-key="id" v-model="selected" v-bind="$attrs">
+        <el-option v-for="c in bindingChannels" :key="c.id" :label="c.name" :value="c"></el-option>
+    </el-select>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/packages/components/channelPicker/src/JaChannelPicker.vue

@@ -1,42 +1,42 @@
-<script setup lang="ts">
-
-import ChannelPicker from "./ChannelPicker.vue";
-import {inject, ref, watch} from "vue";
-import type {ValidationInstance} from "../../../hooks/useBackendValidations";
-import {getValue, setValue} from "../../../utils/objectUtils";
-import type {ProjectedChannel} from "@jari-ace/app-bolts";
-
-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 = ProjectedChannel;
-
-const mv = ref(getValue(model.formData, prop) as modelType);
-watch(() => model.formData, () => {
-    mv.value = getValue(model.formData, prop) as modelType
-}, {
-    deep: true
-})
-
-</script>
-
-<template>
-    <channel-picker v-model="mv"
-                    @change="onChange"
-                    v-bind="$attrs">
-    </channel-picker>
-</template>
-
-<style scoped lang="scss">
-
-</style>
+<script setup lang="ts">
+
+import ChannelPicker from "./ChannelPicker.vue";
+import {inject, ref, watch} from "vue";
+import type {ValidationInstance} from "../../../hooks/useBackendValidations";
+import {getValue, setValue} from "../../../utils/objectUtils";
+import type {ProjectedChannel} from "@jari-ace/app-bolts";
+
+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 = ProjectedChannel;
+
+const mv = ref(getValue(model.formData, prop) as modelType);
+watch(() => model.formData, () => {
+    mv.value = getValue(model.formData, prop) as modelType
+}, {
+    deep: true
+})
+
+</script>
+
+<template>
+    <channel-picker v-model="mv"
+                    @change="onChange"
+                    v-bind="$attrs">
+    </channel-picker>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/packages/components/checkbox/JaCheckbox.vue

@@ -1,73 +1,73 @@
-<script setup lang="ts">
-import {inject, ref, watch} from 'vue'
-import {type CheckboxValueType, ElCheckbox} from 'element-plus'
-import type {ValidationInstance} from '../../hooks/useBackendValidations'
-import {getValue, setValue} from "../../utils/objectUtils";
-
-const props = withDefaults(defineProps<{
-    label?: string | number | boolean | object
-    trueLabel?: string | number
-    falseLabel?: string | number
-    disabled?: boolean
-    border?: boolean
-    size?: 'large' | 'default' | 'small'
-    name?: string
-    checked?: boolean
-    indeterminate?: boolean
-    validateEvent?: boolean
-}>(), {
-    disabled: false,
-    border: false,
-    checked: false,
-    indeterminate: false,
-    validateEvent: true
-})
-
-const model = inject('aceFormModel') as Record<string, any>
-const prop = inject('aceFormItemProp') as string
-const validator = inject('aceFormValidator') as ValidationInstance
-const checkbox = ref<typeof ElCheckbox>({} as typeof ElCheckbox)
-const emit = defineEmits<{
-    change: [value: CheckboxValueType]
-}>()
-
-function onChange(value: CheckboxValueType) {
-    validator.removeFieldError(prop);
-    setValue(model.formData, prop, mv.value);
-    emit('change', value);
-}
-
-type ModelType = string | number | boolean | undefined;
-
-const mv = ref(getValue(model.formData, prop) as ModelType);
-watch(() => model.formData, () => {
-    mv.value = getValue(model.formData, prop) as ModelType
-})
-defineExpose({
-    elCheckbox: checkbox
-})
-</script>
-
-<template>
-    <el-checkbox
-        ref="checkbox"
-        v-model="mv"
-        :disabled="disabled"
-        :true-label="trueLabel"
-        :false-label="falseLabel"
-        :border="border"
-        :size="size"
-        :name="name"
-        :checked="checked"
-        :indeterminate="indeterminate"
-        :validate-event="validateEvent"
-        :label="label"
-        @change="onChange"
-    >
-        <slot></slot>
-    </el-checkbox>
-</template>
-
-<style scoped lang="scss">
-
-</style>
+<script setup lang="ts">
+import {inject, ref, watch} from 'vue'
+import {type CheckboxValueType, ElCheckbox} from 'element-plus'
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import {getValue, setValue} from "../../utils/objectUtils";
+
+const props = withDefaults(defineProps<{
+    label?: string | number | boolean | object
+    trueLabel?: string | number
+    falseLabel?: string | number
+    disabled?: boolean
+    border?: boolean
+    size?: 'large' | 'default' | 'small'
+    name?: string
+    checked?: boolean
+    indeterminate?: boolean
+    validateEvent?: boolean
+}>(), {
+    disabled: false,
+    border: false,
+    checked: false,
+    indeterminate: false,
+    validateEvent: true
+})
+
+const model = inject('aceFormModel') as Record<string, any>
+const prop = inject('aceFormItemProp') as string
+const validator = inject('aceFormValidator') as ValidationInstance
+const checkbox = ref<typeof ElCheckbox>({} as typeof ElCheckbox)
+const emit = defineEmits<{
+    change: [value: CheckboxValueType]
+}>()
+
+function onChange(value: CheckboxValueType) {
+    validator.removeFieldError(prop);
+    setValue(model.formData, prop, mv.value);
+    emit('change', value);
+}
+
+type ModelType = string | number | boolean | undefined;
+
+const mv = ref(getValue(model.formData, prop) as ModelType);
+watch(() => model.formData, () => {
+    mv.value = getValue(model.formData, prop) as ModelType
+})
+defineExpose({
+    elCheckbox: checkbox
+})
+</script>
+
+<template>
+    <el-checkbox
+        ref="checkbox"
+        v-model="mv"
+        :disabled="disabled"
+        :true-label="trueLabel"
+        :false-label="falseLabel"
+        :border="border"
+        :size="size"
+        :name="name"
+        :checked="checked"
+        :indeterminate="indeterminate"
+        :validate-event="validateEvent"
+        :label="label"
+        @change="onChange"
+    >
+        <slot></slot>
+    </el-checkbox>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/packages/components/checkbox/index.ts

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

package/packages/components/checkboxGroup/JaCheckboxGroup.vue

@@ -1,45 +1,45 @@
-<script setup lang="ts">
-import type {ValidationInstance} from '../../hooks/useBackendValidations'
-import {inject, ref, watch} from "vue";
-import {type CheckboxGroupValueType, ElCheckboxGroup} from "element-plus";
-import {getValue, setValue} from "../../utils/objectUtils";
-
-const input = ref<typeof ElCheckboxGroup>({} as typeof ElCheckboxGroup)
-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: CheckboxGroupValueType]
-}>()
-
-function onChange(val: CheckboxGroupValueType) {
-    validator.removeFieldError(prop)
-    setValue(model.formData, prop, mv.value);
-    emit('change', val)
-}
-
-const mv = ref(getValue(model.formData, prop) as CheckboxGroupValueType);
-watch(() => model.formData, () => {
-    mv.value = getValue(model.formData, prop) as CheckboxGroupValueType
-}, {
-    deep: true
-})
-
-defineExpose({
-    focus: () => input.value.focus(),
-    blur: () => input.value.blur(),
-    elCheckboxGroup: input
-})
-</script>
-
-<template>
-    <el-checkbox-group
-        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-checkbox-group>
-</template>
+<script setup lang="ts">
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import {inject, ref, watch} from "vue";
+import {type CheckboxGroupValueType, ElCheckboxGroup} from "element-plus";
+import {getValue, setValue} from "../../utils/objectUtils";
+
+const input = ref<typeof ElCheckboxGroup>({} as typeof ElCheckboxGroup)
+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: CheckboxGroupValueType]
+}>()
+
+function onChange(val: CheckboxGroupValueType) {
+    validator.removeFieldError(prop)
+    setValue(model.formData, prop, mv.value);
+    emit('change', val)
+}
+
+const mv = ref(getValue(model.formData, prop) as CheckboxGroupValueType);
+watch(() => model.formData, () => {
+    mv.value = getValue(model.formData, prop) as CheckboxGroupValueType
+}, {
+    deep: true
+})
+
+defineExpose({
+    focus: () => input.value.focus(),
+    blur: () => input.value.blur(),
+    elCheckboxGroup: input
+})
+</script>
+
+<template>
+    <el-checkbox-group
+        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-checkbox-group>
+</template>

package/packages/components/checkboxGroup/index.ts

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

package/packages/components/customGroupTree/index.ts

@@ -1,10 +1,10 @@
-import {type SFCWithInstall, withInstall} from "../../utils/install";
-import CustomGroupTree from "./src/customGroupTree.vue";
-
-
-/**
- * 可单选的部门树组件
- */
-export const JaCustomGroupTree: SFCWithInstall<typeof CustomGroupTree> = withInstall(CustomGroupTree);
-
-
+import {type SFCWithInstall, withInstall} from "../../utils/install";
+import CustomGroupTree from "./src/customGroupTree.vue";
+
+
+/**
+ * 可单选的部门树组件
+ */
+export const JaCustomGroupTree: SFCWithInstall<typeof CustomGroupTree> = withInstall(CustomGroupTree);
+
+