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

package/src/advance-select/use-advance-select.js

@@ -0,0 +1,142 @@
+import { computed, reactive, unref, watch } from 'vue';
+import { debounce } from 'lodash';
+
+export const useAdvanceSelectStates = (props) => {
+  return reactive({
+    options: new Map(),
+    cachedOptions: new Map(),
+    optionsCount: 0,
+    selected: props.multiple ? [] : {},
+    search: '',
+    isShowPopper: false,
+  });
+};
+
+export const useAdvanceSelect = (props, states, ctx) => {
+  const cachedOptions = computed(() =>
+    Array.from(states.cachedOptions.values())
+  );
+
+  watch(
+    computed(() => states.isShowPopper),
+    (isShowPopper) => {
+      if (!isShowPopper) {
+        states.search = '';
+      }
+    }
+  );
+
+  watch(
+    () => props.modelValue,
+    () => {
+      setSelected();
+    },
+    { flush: 'post', deep: true }
+  );
+
+  const selectedLabel = computed(() => {
+    return props.multiple
+      ? states.selected.map((selected) => selected.label)
+      : states.selected.label || props.modelValue;
+  });
+
+  const getOption = (value) => {
+    let option = null;
+    for (const item of cachedOptions.value) {
+      if (item.value === value) {
+        option = {
+          value,
+          label: item.currentLabel,
+        };
+        break;
+      }
+    }
+
+    if (option) {
+      return option;
+    }
+
+    return { value, label: value };
+  };
+
+  const setSelected = () => {
+    if (!props.multiple) {
+      const option = getOption(props.modelValue);
+      states.selected = option;
+      return;
+    }
+    const result = [];
+    if (Array.isArray(props.modelValue)) {
+      props.modelValue.forEach((value) => {
+        result.push(getOption(value));
+      });
+    }
+    states.selected = result;
+  };
+
+  const onOptionCreate = (option) => {
+    states.optionsCount++;
+    states.options.set(option.value, option);
+    states.cachedOptions.set(option.value, option);
+  };
+
+  const onOptionDestroy = (key, option) => {
+    if (states.options.get(key) === option) {
+      states.optionsCount--;
+      states.options.delete(key);
+    }
+  };
+
+  const handleClearClick = () => {
+    ctx.emit('update:modelValue', props.multiple ? [] : '');
+    if (props.closeAfterSelection) {
+      states.isShowPopper = false;
+    }
+  };
+
+  const handleOptionSelect = (option) => {
+    if (props.multiple) {
+      const value = (props.modelValue || []).slice();
+      const optionIndex = value.indexOf(option.value);
+      if (optionIndex > -1) {
+        if (props.required && value.length === 1) {
+          return;
+        }
+
+        value.splice(optionIndex, 1);
+      } else if (
+        props.multipleLimit <= 0 ||
+        value.length < props.multipleLimit
+      ) {
+        value.push(option.value);
+      }
+      ctx.emit('update:modelValue', value);
+      if (props.closeAfterSelection) {
+        states.isShowPopper = false;
+      }
+    } else {
+      ctx.emit('update:modelValue', option.value);
+      states.isShowPopper = false;
+    }
+  };
+
+  const hidePoppper = () => {
+    states.isShowPopper = false;
+  };
+
+  watch(
+    computed(() => states.options.entries()),
+    () => {
+      setSelected();
+    }
+  );
+
+  return {
+    selectedLabel,
+    onOptionCreate,
+    onOptionDestroy,
+    handleClearClick,
+    handleOptionSelect,
+    hidePoppper,
+  };
+};

package/src/application-slot/application-slot.js

@@ -0,0 +1,70 @@
+import {
+  Fragment,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  render,
+  useSlots,
+  effectScope,
+  effect,
+} from 'vue';
+import { useGlobalConfig, applicationKey } from 'web-base-client-vue';
+
+let uuid = 1;
+
+const ApplicationSlot = {
+  name: 'BwaApplicationSlot',
+  props: {
+    type: String,
+  },
+  setup(props) {
+    let currentUuid = uuid++;
+
+    const slots = useSlots();
+
+    const application = useGlobalConfig(applicationKey);
+
+    const scope = effectScope();
+
+    let container = null;
+
+    onMounted(() => {
+      container = document.createElement('div');
+
+      scope.run(() => {
+        effect(() => {
+          const vnodes = slots.default?.();
+          let _vnodes = [...vnodes];
+
+          for (let i = 0; i < _vnodes.length; i++) {
+            const vnode = _vnodes[i];
+
+            vnode.appContext = ApplicationSlot._context;
+
+            if (Array.isArray(vnode.children)) {
+              _vnodes = _vnodes.concat(vnode.children);
+            }
+          }
+
+          const vnode = h(Fragment, vnodes);
+          vnode.appContext = ApplicationSlot._context;
+
+          render(vnode, container);
+        });
+      });
+
+      application.value.addApplicationSlot(props.type, currentUuid, container);
+    });
+
+    onBeforeUnmount(() => {
+      application.value.removeApplicationSlot(props.type, currentUuid);
+      render(null, container);
+      container = null;
+      scope.stop();
+    });
+
+    return () => h('i', { style: { display: 'none' } });
+  },
+};
+
+export default ApplicationSlot;

package/src/application-slot/breadcrumb-item.vue

@@ -0,0 +1,12 @@
+<template>
+  <ApplicationSlot type="breadcrumbItem">
+    <slot></slot>
+  </ApplicationSlot>
+</template>
+
+<script setup>
+import ApplicationSlot from './application-slot';
+defineOptions({
+  name: 'BwaBreadcrumbItem',
+});
+</script>

package/src/application-slot/header-tools-item.vue

@@ -0,0 +1,12 @@
+<template>
+  <ApplicationSlot type="headerToolItem">
+    <slot></slot>
+  </ApplicationSlot>
+</template>
+
+<script setup>
+import ApplicationSlot from './application-slot';
+defineOptions({
+  name: 'BwaHeaderToolsItem',
+});
+</script>

package/src/application-slot/index.js

@@ -0,0 +1,17 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+import ApplicationSlot from './application-slot.js';
+import BreadcrumbItem from './breadcrumb-item.vue';
+import HeaderToolsItem from './header-tools-item.vue';
+
+ApplicationSlot.install = (app) => {
+  ApplicationSlot._context = app._context;
+  app.component(ApplicationSlot.name, ApplicationSlot);
+  app.component(BreadcrumbItem.name, BreadcrumbItem);
+  app.component(HeaderToolsItem.name, HeaderToolsItem);
+};
+
+export const BwaApplicationSlot = ApplicationSlot;
+export const BwaBreadcrumbItem = withInstall(BreadcrumbItem);
+export const BwaHeaderToolsItem = withInstall(HeaderToolsItem);
+
+export default BwaApplicationSlot;

package/src/breadcrumb-select/breadcrumb-select.vue

@@ -0,0 +1,97 @@
+<template>
+  <BwaAdvanceSelect
+    v-bind="attrs"
+    :showSelection="false"
+    :search-placeholder="searchPlaceholder"
+    :multiple="false"
+  >
+    <template #contentTop v-if="recentEmptyDesc">
+      <div :class="ns.be('item', 'top')">
+        <slot name="recent">
+          <div :class="ns.be('item', 'top-empty')">{{ recentEmptyDesc }}</div>
+        </slot>
+      </div>
+    </template>
+
+    <template #contentBottom>
+      <AdvanceOperation v-if="showAll" :class="ns.be('item', 'opt')" @click="emit('all')">
+        <i class="ptp-caozuo-chakan ptp-icon"></i>
+        <span :class="ns.be('item', 'opt-label')">{{ allDesc }}</span>
+      </AdvanceOperation>
+        <AdvanceOperation v-if="showMine" :class="ns.be('item', 'opt')" @click="emit('mine')">
+            <i class="ptp-caozuo-chakan ptp-icon"></i>
+            <span :class="ns.be('item', 'opt-label')">{{ allMine }}</span>
+        </AdvanceOperation>
+      <AdvanceOperation v-if="showSave" :class="ns.be('item', 'opt')" @click="emit('save')">
+        <ElIcon><CirclePlus /></ElIcon>
+        <span :class="ns.be('item', 'opt-label')">{{ saveDesc }}</span>
+      </AdvanceOperation>
+    </template>
+    <slot></slot>
+
+    <template #reference="{ label }">
+      <ElButton :class="ns.be('item', 'dropdown')">
+        <i class="ptp-qiehuan ptp-icon"></i>
+        <span :class="ns.be('item', 'content')">
+          {{ label || defaultLabel }}
+        </span>
+        <ElIcon><ArrowDown /></ElIcon>
+      </ElButton>
+    </template>
+  </BwaAdvanceSelect>
+</template>
+
+<script setup>
+import { ElButton, ElIcon } from 'element-plus';
+import { useAttrs } from 'vue';
+import { useNamespace } from 'web-base-client-vue';
+import BwaAdvanceSelect from '../advance-select';
+import AdvanceOperation from '../advance-select/advance-operation.vue';
+
+defineOptions({ name: 'BwaBreadcrumbSelect' });
+
+const props = defineProps({
+  defaultLabel: {
+    type: String,
+    default: '请选择',
+  },
+  recentEmptyDesc: {
+    type: String,
+    default: '最近访问项目',
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '项目名称',
+  },
+  allDesc: {
+    type: String,
+    default: '全部项目',
+  },
+    allMine: {
+        type: String,
+        default: '我的项目',
+    },
+  saveDesc: {
+    type: String,
+    default: '新增项目',
+  },
+  showSave: {
+    type: Boolean,
+    default: true,
+  },
+    showMine: {
+        type: Boolean,
+        default: false,
+    },
+  showAll: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const emit = defineEmits(['all','mine', 'save']);
+
+const attrs = useAttrs();
+
+const ns = useNamespace('breadcrumb');
+</script>

package/src/breadcrumb-select/index.js

@@ -0,0 +1,6 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+import BreadcrumbSelect from './breadcrumb-select.vue';
+
+export const BwaBreadcrumbSelect = withInstall(BreadcrumbSelect);
+
+export default BwaBreadcrumbSelect;

package/src/components.js

@@ -0,0 +1,39 @@
+import { BwaDataForm } from './data-form';
+import { BwaDataTable } from './data-table';
+import { BwaFilterPanel, BwaCondition } from './filter-panel';
+import { BwaAdvanceSelect } from './advance-select';
+import { BwaDateRange } from './date-range';
+import { BwaApplicationSlot } from './application-slot';
+import { BwaLayout } from './layout';
+import { BwaMenu } from './menu';
+import { BwaPanel } from './panel';
+import { BwaPanelTab } from './panel-tabs';
+import { BwaBreadcrumbSelect } from './breadcrumb-select';
+import { BwaDataTableSetting } from './datatable-settings';
+import { BwaDraglist } from './drag-list';
+import { BwaProgress } from './progress';
+import { BwaDragable } from './dragable';
+import { BwaPctFilterPanel } from './pct-filter-panel';
+import { BwaPctMultipleMenuCondition, BwaPctInputCondition, BwaPctDateRangeCondition } from './pct-filter-panel/pct-compents'
+export default [
+  BwaDataForm,
+  BwaDataTable,
+  BwaFilterPanel,
+  BwaAdvanceSelect,
+  BwaDateRange,
+  BwaCondition,
+  BwaApplicationSlot,
+  BwaLayout,
+  BwaMenu,
+  BwaPanel,
+  BwaPanelTab,
+  BwaBreadcrumbSelect,
+  BwaDataTableSetting,
+  BwaDraglist,
+  BwaProgress,
+  BwaDragable,
+  BwaPctFilterPanel,
+    BwaPctMultipleMenuCondition,
+    BwaPctInputCondition,
+    BwaPctDateRangeCondition
+];

package/src/contextmenu/contextmenu-item.vue

@@ -0,0 +1,13 @@
+<template>
+  <div :class="ns.b()">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { useNamespace } from 'web-base-client-vue';
+
+defineOptions({ name: 'BwaContextmenuItem' });
+
+const ns = useNamespace('contextmenu-item');
+</script>

package/src/contextmenu/contextmenu.vue

@@ -0,0 +1,56 @@
+<template>
+  <div :class="ns.b()">
+    <ElScrollbar max-height="400px" ref="scrollbarRef">
+      <div
+        v-for="menu in menus"
+        @click="clickHandle(menu)"
+        :key="menu.id"
+        :class="ns.b('item')"
+      >
+        {{ menu.label }}
+      </div>
+    </ElScrollbar>
+  </div>
+</template>
+
+<script setup>
+import { ElScrollbar } from 'element-plus';
+import { computed, onMounted, ref, unref, watch } from 'vue';
+import { useNamespace } from 'web-base-client-vue';
+
+defineOptions({ name: 'BwaContextmenu' });
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  menus: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['select']);
+
+const ns = useNamespace('contextmenu');
+
+const scrollbarRef = ref(null);
+
+const clickHandle = (item) => {
+  emit('select', item);
+};
+
+onMounted(() => {
+  watch(
+    computed(() => props.visible),
+    (visible) => {
+      if (!visible) {
+        return;
+      }
+
+      unref(scrollbarRef).scrollTo(0, 0);
+    }
+  );
+});
+</script>

package/src/contextmenu/index.js

@@ -0,0 +1,11 @@
+import Contextmenu from './contextmenu.vue';
+
+Contextmenu.install = (app) => {
+  Contextmenu._context = app._context;
+  app.component(Contextmenu.name, Contextmenu);
+};
+
+export const BwaContextmenu = Contextmenu;
+export { useContextmenu } from './use-contextmenu';
+
+export default BwaContextmenu;

package/src/contextmenu/use-contextmenu.js

@@ -0,0 +1,117 @@
+import {
+  createApp,
+  h,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  unref,
+  vShow,
+  withDirectives,
+} from 'vue';
+import { useWindowSize, useElementBounding } from '@vueuse/core';
+import { useNamespace } from 'web-base-client-vue';
+import Contextmenu from './contextmenu.vue';
+
+export function useContextmenu({ menus = [] } = {}) {
+  const ns = useNamespace('contextmenu');
+
+  menus = ref([...menus]);
+
+  let el = document.createElement('div');
+
+  const contextmenuWrapper = ref(null);
+
+  const visible = ref(false);
+
+  const bounding = ref(null);
+  const position = reactive({ x: 0, y: 0 });
+
+  const windowSize = useWindowSize();
+
+  let resolve = null;
+
+  const contextmenuInstance = createApp({
+    setup() {
+      onMounted(() => {
+        bounding.value = useElementBounding(contextmenuWrapper);
+      });
+
+      return () =>
+        withDirectives(
+          h(
+            'div',
+            {
+              class: ns.e('wrapper'),
+              ref: contextmenuWrapper,
+              tabIndex: -1,
+              style: {
+                left: position.x + 'px',
+                top: position.y + 'px',
+              },
+              onContextmenu(e) {
+                e.preventDefault();
+                e.stopPropagation();
+              },
+              onBlur() {
+                resolve?.(null);
+                visible.value = false;
+              },
+            },
+            [
+              h(Contextmenu, {
+                menus: unref(menus),
+                visible: unref(visible),
+                onSelect(item) {
+                  resolve?.(item);
+                  visible.value = false;
+                },
+              }),
+            ]
+          ),
+          [[vShow, unref(visible)]]
+        );
+    },
+  });
+
+  const showContextmenu = async (x, y) => {
+    if (!Array.isArray(unref(menus)) || !unref(menus).length) {
+      return null;
+    }
+
+    visible.value = true;
+
+    let promise = new Promise((_resolve) => {
+      resolve = _resolve;
+    });
+
+    await nextTick();
+
+    position.x = x;
+    position.y = y;
+
+    if (windowSize.height.value - position.y < bounding.value.height) {
+      position.y = windowSize.height.value - bounding.value.height;
+    }
+    if (windowSize.width.value - position.x < bounding.value.width) {
+      position.x = windowSize.width.value - bounding.value.width;
+    }
+
+    contextmenuWrapper.value.focus();
+
+    return promise;
+  };
+
+  onMounted(() => {
+    contextmenuInstance.mount(el);
+    document.body.appendChild(el);
+  });
+
+  onBeforeUnmount(() => {
+    document.body.removeChild(el);
+    contextmenuInstance.unmount();
+  });
+
+  return { showContextmenu };
+}

package/src/data-form/data-form-item.vue

@@ -0,0 +1,49 @@
+<template>
+  <ElFormItem
+    v-if="formColumn && formColumn.visible"
+    v-bind="attrs"
+    :label="label"
+    :class="{ custom: !$slots.default }"
+    :prop="formColumn.fullAttrName"
+  >
+    <slot :column="formColumn" :record="dataForm.data" :dataForm="dataForm">
+      <DynamicComponent :column="formColumn" :record="dataForm.data" />
+    </slot>
+  </ElFormItem>
+</template>
+
+<script setup>
+import { ElFormItem, formContextKey } from 'element-plus';
+import { inject, computed, useAttrs, provide, reactive } from 'vue';
+import { dataFormKey } from 'web-base-client-vue';
+import DynamicComponent from './dynamic-component.js';
+
+defineOptions({ name: 'BwaDataFormItem' });
+
+const props = defineProps({
+  name: { type: String },
+    isShowLabelColon: { type: Boolean }
+});
+
+const attrs = useAttrs();
+
+const dataForm = inject(dataFormKey);
+
+const formContext = inject(formContextKey, {});
+
+const formColumn = dataForm
+  .getDisplayColumns()
+  .find((col) => col.fullAttrName == props.name);
+
+const label = computed(() => {
+  return attrs.label || (formColumn ? formColumn.title + (props.isShowLabelColon ? ' :' : '') : '');
+});
+
+const _formContext = {};
+_formContext.disabled = computed(
+  () => formContext.disabled || formColumn?.disabled
+);
+Reflect.setPrototypeOf(_formContext, formContext);
+
+provide(formContextKey, reactive(_formContext));
+</script>