@ctzy-web-client/plugin-component-vue 1.0.0

package/src/progress/progress-item.vue

@@ -0,0 +1,81 @@
+<template>
+  <div :class="ns.b()" :style="{ width: percent }" ref="progressItemEl"></div>
+</template>
+
+<script setup>
+import { combineLatest, delayWhen, from, map, Observable, tap } from 'rxjs';
+import {
+  computed,
+  inject,
+  nextTick,
+  onBeforeUnmount,
+  ref,
+  toRefs,
+  unref,
+  useAttrs,
+  watch,
+} from 'vue';
+import { useNamespace, progressKey } from 'web-base-client-vue';
+
+defineOptions({ name: 'BwaProgressItem' });
+
+const props = defineProps({
+  width: { type: Number, default: 0 },
+  label: { type: String, required: true },
+});
+
+const { width, label } = toRefs(props);
+
+const ns = useNamespace('progress-item');
+
+const progressItemEl = ref(null);
+
+const progress = inject(progressKey);
+
+const percent = computed(() => (unref(width) / progress.max) * 100 + '%');
+
+const attrs = useAttrs();
+
+const id = progress.nextID();
+
+const colorObservable = new Observable((observer) =>
+  watch(
+    computed(() => attrs.style['--bwa-progress-item-color']),
+    observer.next.bind(observer),
+    { immediate: true }
+  )
+).pipe(delayWhen(() => from(nextTick())));
+
+const widthObservable = new Observable((observer) =>
+  watch(width, observer.next.bind(observer), { immediate: true })
+).pipe(map((width) => parseInt(width) || 0));
+
+const labelObservable = new Observable((observer) =>
+  watch(label, observer.next.bind(observer), { immediate: true })
+).pipe();
+
+const progressItemObservable = combineLatest([
+  widthObservable,
+  labelObservable,
+  colorObservable,
+]);
+
+const subscription = progressItemObservable.subscribe({
+  next: ([width, label, color]) => {
+    progress.handleProgressItemCreate({
+      id,
+      width,
+      label,
+      color,
+    });
+  },
+  complete: () => {
+    progress.handleProgressItemDestroy(id);
+  },
+  error: () => {
+    progress.handleProgressItemDestroy(id);
+  },
+});
+
+onBeforeUnmount(subscription.unsubscribe.bind(subscription));
+</script>

package/src/progress/progress.vue

@@ -0,0 +1,58 @@
+<template>
+  <ElTooltip placement="bottom-start" effect="light" append-to=".bwa-application">
+    <div :class="ns.b()">
+      <div :class="ns.e('inner')" :style="{ '--bwa-progress-width': max }">
+        <slot></slot>
+      </div>
+      <div
+        v-if="showLabel"
+        :class="ns.e('percent')"
+        :style="{ '--bwa-progress-label-width': labelWidth }"
+      >
+        {{ percent }}%
+      </div>
+    </div>
+
+    <template #content>
+      <div :class="ns.be('info', 'wrapper')">
+        <div
+          v-for="item in states.progressItemList"
+          :key="item.id"
+          :class="ns.be('item', 'info')"
+          :style="{ '--bwa-progress-item-dot-color': item.color }"
+        >
+          <span :class="ns.be('item', 'label')">{{ item.label }}</span>
+          <span :class="ns.be('item', 'value')">{{ item.width }}</span>
+        </div>
+      </div>
+    </template>
+  </ElTooltip>
+</template>
+
+<script setup>
+import { ElTooltip } from 'element-plus';
+import { provide, reactive, toRefs } from 'vue';
+import { useNamespace, progressKey } from 'web-base-client-vue';
+import { useProgress, useProgressState } from './use-progress';
+
+defineOptions({ name: 'BwaProgress' });
+
+const props = defineProps({
+  max: { type: Number, default: 0 },
+  showLabel: { type: Boolean, default: true },
+  labelWidth: { type: String, default: 'auto' },
+});
+
+const { max } = toRefs(props);
+
+const ns = useNamespace('progress');
+
+const states = useProgressState(props);
+const { percent, handleProgressItemCreate, handleProgressItemDestroy, nextID } =
+  useProgress(props, states);
+
+provide(
+  progressKey,
+  reactive({ max, handleProgressItemCreate, handleProgressItemDestroy, nextID })
+);
+</script>

package/src/progress/use-progress.js

@@ -0,0 +1,66 @@
+import { computed, reactive, unref } from 'vue';
+
+let uid = 1;
+
+export const useProgressState = (props) =>
+  reactive({
+    progressItemList: [],
+  });
+
+export const useProgress = (props, states) => {
+  const max = computed(() => parseFloat(props.max));
+
+  const percent = computed(() => {
+    const total = states.progressItemList.reduce(
+      (result, progressItem) => result + progressItem.width,
+      0
+    );
+
+    if (unref(max) === 0 || isNaN(unref(max))) {
+      return 0;
+    }
+
+    return parseInt((total / unref(max)) * 100);
+  });
+
+  const removeProgressItem = (id) => {
+    states.progressItemList = states.progressItemList.filter(
+      (item) => item.id === id
+    );
+  };
+
+  const addProgressItem = (progressItem) => {
+    const index = states.progressItemList.findIndex(
+      (item) => item.id === progressItem.id
+    );
+
+    if (index !== -1) {
+    }
+
+    if (index === -1) {
+      states.progressItemList.push(progressItem);
+      return;
+    }
+
+    states.progressItemList.splice(index, 1, progressItem);
+  };
+
+  const handleProgressItemCreate = (progressItem) => {
+    addProgressItem(progressItem);
+  };
+
+  const handleProgressItemDestroy = (id) => {
+    removeProgressItem(id);
+  };
+
+  const nextID = () => {
+    return uid++;
+  };
+
+  return {
+    percent,
+    handleProgressItemCreate,
+    handleProgressItemDestroy,
+    nextID,
+  };
+};

package/src/utils/db.js

@@ -0,0 +1,8 @@
+import Dexie from 'dexie';
+
+export const dataModelDB = new Dexie('DataModel');
+
+dataModelDB.version(1).stores({
+  filterPanel: '[app+tableName+userID]',
+  tableHeaderSettings: '[app+tableName+userID]',
+});

package/src/utils.js

@@ -0,0 +1,263 @@
+import {
+  computed,
+  resolveComponent,
+  inject,
+  isProxy,
+  isReactive,
+  isRef,
+  unref,
+  markRaw,
+} from 'vue';
+import get from 'lodash/get';
+import set from 'lodash/set';
+
+/**
+ * 组件名称前缀
+ */
+export const COMPONENT_NAME_PREFIX = 'Bwa';
+/**
+ * 生成组件名称
+ * @param {Object} component
+ */
+export const createComponentName = (component) => {
+  component.name = COMPONENT_NAME_PREFIX + component.name;
+};
+
+export const useDynamicComponent = (
+  props,
+  { emit },
+  defaultComponent,
+  attributeName = 'attrName'
+) => {
+  const column = computed(() => props.column);
+
+  const componentProps = computed(() => {
+    const _column = unref(column);
+
+    if (!_column) {
+      return {};
+    }
+
+    const originalComponentProps = _column.componentProps;
+    const _componentProps = { ...originalComponentProps };
+
+    Object.keys(_componentProps).forEach((key) => {
+      let val = _componentProps[key];
+
+      //处理注入的参数值
+      if (val && typeof val == 'string' && val.indexOf('inject:') == 0) {
+        let injectNode = val.replace('inject:', '');
+
+        let injectInfo = injectNode.split('.');
+
+        let injectScope = injectInfo.shift();
+
+        let injectObj = inject(injectScope);
+
+        if (injectInfo.length) {
+          _componentProps[key] = get(injectObj, injectInfo.join('.'));
+        } else {
+          _componentProps[key] = injectObj;
+        }
+
+        if (isProxy(_componentProps[key])) {
+          //代理对象可能是ref 也可能是 reactive
+          _componentProps[key] = isRef(_componentProps[key])
+            ? _componentProps[key].value
+            : _componentProps[key];
+        }
+      } else {
+        _componentProps[key] = val;
+      }
+    });
+
+    return _componentProps;
+  });
+
+  const isFunctionComponent = computed(
+    () => typeof unref(column)?.component == 'function'
+  );
+
+  const component = computed(() => {
+    const _column = unref(column);
+    if (unref(isFunctionComponent)) {
+      return markRaw(
+        _column?.component({
+          record: props.record,
+          column,
+          value: props.modelValue,
+          props: componentProps,
+        })
+      );
+    }
+
+    return markRaw(resolveComponent(_column.component || defaultComponent));
+  });
+
+  const params = computed(() => {
+    const _column = unref(column);
+
+    const _params = { ...unref(componentProps) };
+
+    const _component = unref(component);
+
+    if (!_component) {
+      return _params;
+    }
+
+    if (_component.emits) {
+      //存在双向绑定就绑定
+
+      let emits = _component.emits || [];
+
+      if (!Array.isArray(emits) && emits && typeof emits === 'object') {
+        emits = Object.keys(emits);
+      }
+
+      if (
+        Array.isArray(emits) &&
+        emits.find((eventName) =>
+          [
+            'onUpdate:modelValue',
+            'onUpdate:model-value',
+            'update:modelValue',
+            'update:model-value',
+          ].includes(eventName)
+        )
+      ) {
+        _params['modelValue'] = get(props.record, _column[attributeName]);
+        _params['onUpdate:modelValue'] = (val) => {
+          set(props.record, _column[attributeName], val);
+        };
+      } else {
+        _params['value'] = get(props.record, _column[attributeName]);
+      }
+
+      //存在 on-change 事件的话 去绑定
+      if (emits.find((eventName) => eventName == 'on-change')) {
+        _params['on-change'] = (event) =>
+          emit('on-change', { data: event, column });
+      }
+    } else {
+      _params['value'] = get(props.record, _column[attributeName]);
+    }
+
+    Object.assign(_params, unref(componentProps));
+
+    return _params;
+  });
+
+  return { params, component };
+};
+
+// /**
+//  * 动态组件
+//  * @param {*} column
+//  * @param {String} value
+//  */
+// export const aaaauseDynamicComponent = (
+//   props,
+//   { emit },
+//   defaultComponent,
+//   attrName = 'attrName'
+// ) => {
+//   //字段
+//   const column = props.column;
+
+//   //参数
+//   const componentProps = column.componentProps
+//     ? { ...column.componentProps }
+//     : {};
+
+//   //处理组件参数
+//   Object.keys(componentProps).forEach((key) => {
+//     let val = componentProps[key];
+
+//     //处理注入的参数值
+//     if (val && typeof val == 'string' && val.indexOf('inject:') == 0) {
+//       let injectNode = val.replace('inject:', '');
+
+//       let injectInfo = injectNode.split('.');
+
+//       let injectScope = injectInfo.shift();
+
+//       let injectObj = inject(injectScope);
+
+//       if (injectInfo.length) {
+//         componentProps[key] = new Function(
+//           'obj',
+//           `return obj.${injectInfo.join('.')}`
+//         ).call(null, injectObj);
+//       } else {
+//         componentProps[key] = injectObj;
+//       }
+
+//       if (isProxy(componentProps[key])) {
+//         //代理对象可能是ref 也可能是 reactive
+//         componentProps[key] = isReactive(componentProps[key])
+//           ? componentProps[key]
+//           : componentProps[key].value;
+//       }
+//     } else {
+//       componentProps[key] = val;
+//     }
+//   });
+
+//   //是否是函数组件
+//   const isFunctionComponent = typeof column.component == 'function';
+
+//   //创建组件
+//   const component = isFunctionComponent
+//     ? column.component({
+//         record: props.record,
+//         column,
+//         value: props.modelValue,
+//         props: componentProps,
+//       })
+//     : resolveComponent(column.component || defaultComponent);
+
+//   //组件参数
+//   const params = {};
+
+//   //非函数组件
+//   if (!isFunctionComponent) {
+//     Object.assign(params, componentProps);
+
+//     //存在组件配置
+//     if (column.component) {
+//       if (component.emits) {
+//         //存在双向绑定就绑定
+//         if (
+//           component.emits.find((eventName) =>
+//             [
+//               'onUpdate:modelValue',
+//               'onUpdate:model-value',
+//               'update:modelValue',
+//               'update:model-value',
+//             ].includes(eventName)
+//           )
+//         ) {
+//           params['modelValue'] = get(props.record, column[attrName]);
+//           params['onUpdate:modelValue'] = (val) => {
+//             set(props.record, column[attrName], val);
+//           };
+//         } else {
+//           params['value'] = get(props.record, column[attrName]);
+//         }
+
+//         //存在 on-change 事件的话 去绑定
+//         if (component.emits.find((eventName) => eventName == 'on-change')) {
+//           params['on-change'] = (event) =>
+//             emit('on-change', { data: event, column });
+//         }
+//       } else {
+//         params['value'] = get(props.record, column[attrName]);
+//       }
+
+//       //合并参数
+//       Object.assign(params, componentProps);
+//     }
+//   }
+
+//   return { params, component };
+// };

package/src/where-filter-panel/use-where-filter-panel.js

@@ -0,0 +1,28 @@
+import { useProp } from 'element-plus';
+import { computed, unref } from 'vue';
+import { useGlobalConfig, useValue, useService } from 'web-base-client-vue';
+
+export const usewhereFilterPanel = (props, context) => {
+  const dataTable = useProp('dataTable');
+  const debounceDelay = useGlobalConfig('debounceDelay', 500);
+
+  const where = computed(() => unref(dataTable).where);
+
+  const filterColumns = computed(() => unref(dataTable).getFilterColumns());
+
+  const fixedColumns = computed(() =>
+    filterColumns.value.filter((column) => !column.closable)
+  );
+
+  const originalClosableColumns = computed(() =>
+    filterColumns.value.filter((column) => column.closable)
+  );
+
+  
+
+  const addFilter = () => {};
+
+  const removeFilter = () => {
+
+  };
+};

package/src/where-filter-panel/where-filter-panel.vue

@@ -0,0 +1,9 @@
+<template>
+  <div></div>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'BwaWhereFilterPanel',
+});
+</script>