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

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@ctzy-web-client/plugin-component-vue",
+  "version": "1.0.0",
+  "main": "lib/index.js",
+  "module": "es/index.mjs",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "import": "./es/index.mjs"
+    },
+    "./src": "./src/index.js",
+    "./src/*": "./src/*",
+    "./es": "./es/index.mjs",
+    "./lib": "./lib/index.js",
+    "./es/*": "./es/*",
+    "./lib/*": "./lib/*",
+    "./style": "./style/index.css",
+    "./style/*": "./style/*",
+    "./style/src": "./style/src/index.scss",
+    "./style/src/*": "./style/src/*"
+  },
+  "style": "./style/index.css",
+  "author": "tommy",
+  "license": "MIT",
+  "description": "web client 通用ui库",
+  "dependencies": {
+    "@element-plus/icons": "^0.0.11",
+    "@tinymce/tinymce-vue": "^5",
+    "dayjs": "^1.11.6",
+    "dexie": "^3.2.3",
+    "element-plus": "^2.3.5",
+    "lodash": "^4.17.21",
+    "quill": "^1.3.7",
+    "rxjs": "^7.6.0",
+    "tinymce": "^6.4.2",
+    "web-base-client-vue": "^1.0.0"
+  },
+  "devDependencies": {
+    "@vueuse/core": "^9.6.0",
+    "vue": "^3.2.41",
+    "vue-router": "^4.1.6"
+  }
+}

package/src/advance-select/advance-operation.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    :class="[ns.be('select', 'operation'), ns.is('border', border)]"
+    @click="clickHandle"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+import { useNamespace, advanceSelectKey } from 'web-base-client-vue';
+
+defineOptions({
+  name: 'BwaAdvanceOperation',
+});
+
+const props = defineProps({
+  border: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: 'button',
+  },
+});
+
+const emit = defineEmits(['click']);
+
+const advanceSelect = inject(advanceSelectKey);
+
+const clickHandle = () => {
+  if (props.type !== 'button') {
+    return;
+  }
+
+  advanceSelect.hidePoppper();
+
+  emit('click');
+};
+
+const ns = useNamespace('advance');
+</script>

package/src/advance-select/advance-option.vue

@@ -0,0 +1,115 @@
+<template>
+  <div :class="ns.b('option')" @click.stop="filterOptionClick">
+    <!-- @mouseenter="handleOptionMouseEnter" -->
+    <div :class="`${ns.be('option', 'content')} content-label-${value}`">
+      <slot>
+        <ElTooltip placement="top" append-to=".bwa-application" :disabled="currentLabel.length < 16">
+          <div :class="ns.be('option', 'content-label')" ref="contentText">
+              <ElCheckbox
+                  v-if="source === 'pct' && !showSelectIcon"
+                  @click.prevent
+                  :class="ns.be('filter', 'checkbox')"
+                  :modelValue="itemSelected"
+                  style="height: 26px"
+              >
+                  <div :class="ns.be('option', 'content-label')" style="width: 178px">{{ currentLabel }}</div>
+              </ElCheckbox>
+              <div v-else :class="[ns.be('option', 'content-label'), ns.is('selected',source === 'pct' && itemSelected && showSelectIcon)]">{{ currentLabel }}</div>
+          </div>
+          <template #content>
+            {{ currentLabel }}
+          </template>
+        </ElTooltip>
+      </slot>
+    </div>
+    <ElIcon
+      v-if="itemSelected && showSelectIcon"
+      :class="ns.be('option', 'selected')"
+    >
+      <Select />
+    </ElIcon>
+  </div>
+</template>
+
+<script>
+import { ElTooltip } from 'element-plus';
+import { getCurrentInstance, toRefs, ref, nextTick, onMounted, onUnmounted } from 'vue';
+import { useNamespace } from 'web-base-client-vue';
+import { useEvent } from './events-helpers';
+import { useAdvanceOption } from './use-advance-option';
+
+export default {
+  name: 'BwaAdvanceOption',
+  props: {
+    label: {
+      type: [String, Number, Boolean],
+    },
+    value: {
+      type: null,
+    },
+  },
+  expose: ['currentLabel'],
+  setup(props, { expose }) {
+    const instance = getCurrentInstance();
+
+    const ns = useNamespace('advance');
+
+    const { handleOptionMouseEnter } = useEvent(ns);
+
+    const { advanceSelect, currentLabel, itemSelected, showSelectIcon, source } =
+      useAdvanceOption(props);
+
+    const show = ref(true)
+    const clickFlag = ref(true)
+
+    const contentText = ref()
+
+    expose({ currentLabel });
+
+    const filterOptionClick = () => {
+      advanceSelect.handleOptionSelect(instance.proxy);
+    };
+
+      // 判断是否需要展示tooltip
+    const isShow = async () => {
+      const dom = document.querySelector(`.content-label-${props.value} .bwa-advance-option__content-label`);
+      if (dom) {
+        const scrollWidth = document.querySelector(`.content-label-${props.value} .bwa-advance-option__content-label`).scrollWidth;
+        const offsetWidth = document.querySelector(`.content-label-${props.value} .bwa-advance-option__content-label`).offsetWidth;
+        if (scrollWidth > offsetWidth) {
+          show.value = false
+        } else {
+          show.value = true
+        }
+      }
+    }
+
+    const listenerClickFunction = () => {
+      setTimeout(() => {
+        isShow();
+      }, 100)
+    }
+    // onMounted(async () => {
+    //   if (clickFlag) {
+    //     document.querySelector('.bwa-advance-select button')?.addEventListener('click', listenerClickFunction)
+    //     clickFlag.value = false
+    //   }
+    // })
+
+    // onUnmounted(() => {
+    //   document.querySelector('.bwa-advance-select button').removeEventListener('click', listenerClickFunction)
+    // })
+
+    return {
+      show,
+      ns,
+      currentLabel,
+      itemSelected,
+      showSelectIcon,
+      filterOptionClick,
+      handleOptionMouseEnter,
+        source
+    };
+  },
+};
+</script>

package/src/advance-select/advance-select.vue

@@ -0,0 +1,343 @@
+<template>
+  <div :class="ns.b('select')" data-prefix="el" ref="selectWrapper">
+    <ElTooltip
+      :class="ns.be('select', 'tooltip')"
+      effect="light"
+      trigger="click"
+      placement="bottom-start"
+      :show-arrow="false"
+      append-to=".bwa-application"
+      :popper-style="popperStyle"
+      :popper-class="ns.be('select', 'popper')"
+      :persistent="true"
+      v-model:visible="isShowPopper"
+      :virtual-ref="virtualRef"
+      :virtual-triggering="virtualTriggering"
+    >
+      <template #default>
+        <slot name="reference" :label="selectedLabel" :column="column">
+          <div
+            :class="[
+              ns.be('select', 'pct-reference'),
+              ns.is('active', isShowPopper),
+            ]"
+            v-if="source"
+          >
+            <slot
+              name="reference-content"
+              :label="selectedLabel"
+              :column="column"
+              :selected="selected"
+            >
+              <slot name="label">
+                <span v-if="column" :class="ns.be('select', 'label')">
+                  {{ column.title }}
+                </span>
+              </slot>
+              <slot name="value" :selected="selected">
+                <span v-if="multiple" :class="ns.be('select', 'content')">
+                  {{ selectedLabel.length ? selectedLabel.join(',') : '全部' }}
+                </span>
+                <span v-else :class="ns.be('select', 'content')">
+                  {{ selectedLabel ? selectedLabel : '全部' }}
+                </span>
+              </slot>
+                <ElIcon :class="ns.be('select', 'caret')" v-if="showSelectIcon">
+                    <slot name="icon">
+                        <CaretBottom />
+                    </slot>
+                </ElIcon>
+            </slot>
+          </div>
+            <div
+                :class="[
+              ns.be('select', 'reference'),
+              ns.is('active', isShowPopper),
+            ]"
+                v-else
+            >
+                <slot
+                    name="reference-content"
+                    :label="selectedLabel"
+                    :column="column"
+                    :selected="selected"
+                >
+                    <slot name="label">
+                <span v-if="column" :class="ns.be('select', 'label')">
+                  {{ column.title }}
+                </span>
+                    </slot>
+                    <slot name="value" :selected="selected">
+                <span v-if="multiple" :class="ns.be('select', 'content')">
+                  {{ selectedLabel.length ? selectedLabel.join(',') : '全部' }}
+                </span>
+                        <span v-else :class="ns.be('select', 'content')">
+                  {{ selectedLabel ? selectedLabel : '全部' }}
+                </span>
+                    </slot>
+                </slot>
+                <ElIcon :class="ns.be('select', 'caret')" v-if="showSelectIcon">
+                    <slot name="icon">
+                        <CaretBottom />
+                    </slot>
+                </ElIcon>
+            </div>
+        </slot>
+      </template>
+
+      <template #content>
+        <div :class="[ns.be('select', 'content'), ns.is('single', !multiple)]" :style="{'margin': '6px'}">
+          <slot name="contentTop"> </slot>
+          <div v-if="showSearch" :class="ns.be('select', 'input-wrapper')">
+            <ElInput
+              v-model="search"
+              :class="ns.be('select', 'input')"
+              :placeholder="searchPlaceholder"
+              type="text"
+              prefix-icon="Search"
+              clearable
+            />
+          </div>
+          <div :class="ns.be('select', 'operation-wrapper')">
+            <template v-if="multiple || !required">
+              <template v-if="showSelection">
+                <AdvanceOperation
+                  :class="ns.be('select', 'selection-wrapper')"
+                  type="selection"
+                  :border="true"
+                >
+                  <span
+                    v-if="multiple"
+                    :class="[
+                      ns.be('select', 'selection'),
+                      ns.is('has-selected', !!selected.length),
+                    ]"
+                  >
+                    已选{{ selected.length }}项
+                  </span>
+                  <ElButton
+                    v-if="!required"
+                    link
+                    type="primary"
+                    :class="ns.be('select', 'clear')"
+                    @click="handleClearClick"
+                  >
+                    清除选项
+                  </ElButton>
+                </AdvanceOperation>
+              </template>
+            </template>
+
+            <slot name="operation"> </slot>
+          </div>
+          <div :class="ns.be('select', 'list')" v-loading="loading">
+            <ElScrollbar :max-height="listHeight">
+              <slot>
+                <AdvanceOption
+                  v-for="item in data"
+                  :key="item.value"
+                  :value="item.value"
+                  :label="item.label"
+                />
+              </slot>
+            </ElScrollbar>
+            <template v-if="!optionsCount">
+              <slot name="empy">
+                <div :class="ns.be('select', 'empty')">未匹配到相关条目</div>
+              </slot>
+            </template>
+          </div>
+          <div v-if="slots.contentBottom"
+               :class="ns.be('select', 'bottom')"
+               :style="{'boxShadow': source ? 'none': '', 'padding': source ? '0': '4px 0px',}"
+          >
+            <slot name="contentBottom"> </slot>
+          </div>
+        </div>
+      </template>
+    </ElTooltip>
+  </div>
+</template>
+
+<script setup>
+import { debounceTime, Observable } from 'rxjs';
+import {
+  reactive,
+  toRefs,
+  provide,
+  inject,
+  computed,
+  useSlots,
+  unref,
+  watch,
+  onBeforeUnmount,
+  getCurrentInstance,
+} from 'vue';
+import {
+  useNamespace,
+  advanceSelectKey,
+  filterPanelItemKey,
+  useGlobalConfig,
+} from 'web-base-client-vue';
+import { useData, dataProps } from '../hooks/use-data';
+import AdvanceOperation from './advance-operation.vue';
+import AdvanceOption from './advance-option.vue';
+import { useAdvanceSelectStates, useAdvanceSelect } from './use-advance-select';
+
+defineOptions({
+  name: 'BwaAdvanceSelect',
+});
+
+const props = defineProps({
+  ...dataProps,
+  options: {
+    type: Array,
+  },
+  modelValue: {
+    type: [Array, String, Number, Boolean],
+  },
+  listHeight: {
+    type: String,
+    default: '300px',
+  },
+  width: {
+    type: String,
+    default: '240px',
+  },
+  multiple: {
+    type: Boolean,
+    default: true,
+  },
+  multipleLimit: {
+    type: Number,
+    default: 0,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  showSearch: {
+    type: Boolean,
+    default: true,
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
+  showSelection: {
+    type: Boolean,
+    default: true,
+  },
+  showSelectIcon: {
+    type: Boolean,
+    default: true,
+  },
+  closeAfterSelection: {
+    typoe: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  virtualRef: null,
+  virtualTriggering: {
+    type: Boolean,
+    default: false,
+  },
+    source: '',
+    borderRadius: {
+        type: String,
+        default: '0px',
+    },
+});
+
+const emit = defineEmits(['update:modelValue', 'search', 'visible-change']);
+
+const debounceDelay = useGlobalConfig('debounceDelay', 500);
+
+const filterPanelItem = inject(filterPanelItemKey, null);
+
+const { listHeight, width, showSearch, showSelection, multiple, modelValue, borderRadius } =
+  toRefs(props);
+
+const slots = useSlots();
+
+const ns = useNamespace('advance');
+
+const states = useAdvanceSelectStates(props);
+
+const {
+  options: optionInstances,
+  optionsCount,
+  search,
+  isShowPopper,
+  selected,
+} = toRefs(states);
+
+const column = computed(() => filterPanelItem?.column ?? null);
+
+const {
+  selectedLabel,
+  onOptionCreate,
+  onOptionDestroy,
+  handleClearClick,
+  handleOptionSelect,
+  hidePoppper,
+} = useAdvanceSelect(props, states, {
+  emit,
+});
+
+const disabled = computed(() => !unref(isShowPopper));
+// console.log(column,disabled,search)
+const { data: itfData, loading: dataLoading } = useData(disabled, search);
+
+const loading = computed(() => props.loading || unref(dataLoading));
+
+const data = computed(() => props.options || unref(itfData));
+
+if (multiple.value && !Array.isArray(modelValue.value)) {
+  emit('update:modelValue', []);
+}
+if (!multiple.value && Array.isArray(modelValue.value)) {
+  emit('update:modelValue', '');
+}
+
+watch(isShowPopper, (isShowPopper) => {
+  emit('visible-change', isShowPopper);
+});
+
+const subscription = new Observable((observer) =>
+  watch(search, observer.next.bind(observer))
+)
+  .pipe(debounceTime(unref(debounceDelay)))
+  .subscribe(emit.bind(null, 'search'));
+
+onBeforeUnmount(subscription.unsubscribe.bind(subscription));
+
+provide(
+  advanceSelectKey,
+  reactive({
+    props,
+    options: optionInstances,
+    selected,
+    onOptionCreate,
+    onOptionDestroy,
+    handleOptionSelect,
+    hidePoppper,
+    select: getCurrentInstance(),
+  })
+);
+
+const popperStyle = reactive({
+  padding: '0',
+  borderRadius,
+  width,
+  border: 'none',
+  boxShadow: `0 3px 12px 0 rgb(0 0 0 / 12%), 0 0.5px 1.5px 0 rgb(0 0 0 / 8%)`,
+});
+
+defineExpose({
+    handleClearClick
+})
+</script>

package/src/advance-select/events-helpers.js

@@ -0,0 +1,40 @@
+import { inject } from 'vue';
+import { advanceSelectKey } from 'web-base-client-vue';
+import { getStyle } from 'element-plus/es/utils/index';
+import { createTablePopper } from 'element-plus/es/components/table/src/util';
+
+export function useEvent(ns) {
+  const { select: advanceSelect } = inject(advanceSelectKey, {});
+
+  const handleOptionMouseEnter = (event, tooltipEffect) => {
+    const content = event.target.querySelector(
+      '.' + ns.be('option', 'content')
+    );
+
+    const range = document.createRange();
+    range.setStart(content, 0);
+    range.setEnd(content, content.childNodes.length);
+    const rangeWidth = range.getBoundingClientRect().width;
+    const padding =
+      (Number.parseInt(getStyle(content, 'paddingLeft'), 10) || 0) +
+        Number.parseInt(getStyle(content, 'paddingRight'), 10) || 0;
+
+    if (
+      rangeWidth + padding > content.offsetWidth ||
+      content.scrollWidth > content.offsetWidth
+    ) {
+      createTablePopper(
+        advanceSelect?.refs.selectWrapper,
+        content,
+        content.innerText || content.textContent,
+        {
+          placement: 'top',
+          strategy: 'fixed',
+        },
+        'dark'
+      );
+    }
+  };
+
+  return { handleOptionMouseEnter };
+}

package/src/advance-select/index.js

@@ -0,0 +1,13 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+import AdvanceSelect from './advance-select.vue';
+import AdvanceOption from './advance-option.vue';
+import AdvanceOperation from './advance-operation.vue';
+
+export const BwaAdvanceSelect = withInstall(AdvanceSelect, {
+  AdvanceOption,
+  AdvanceOperation,
+});
+export const BwaAdvanceOption = withInstall(AdvanceOption);
+export const BwaAdvanceOperation = withInstall(AdvanceOperation);
+
+export default BwaAdvanceSelect;

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

@@ -0,0 +1,58 @@
+import {
+  computed,
+  getCurrentInstance,
+  inject,
+  onMounted,
+  onUnmounted,
+  watch,
+} from 'vue';
+import { advanceSelectKey } from 'web-base-client-vue';
+
+export const useAdvanceOption = (props) => {
+  const advanceSelect = inject(advanceSelectKey);
+
+  const instance = getCurrentInstance();
+
+  const currentLabel = computed(() => props.label || props.value);
+
+  const showSelectIcon = computed(
+    () => advanceSelect?.props?.showSelectIcon ?? true
+  );
+
+  const itemSelected = computed(() => {
+    if (!advanceSelect.props.multiple) {
+      return advanceSelect.props.modelValue === props.value || advanceSelect.props.modelValue === props.value + '';
+    } else {
+      return (advanceSelect.props.modelValue || []).includes(props.value);
+    }
+  });
+
+    /**
+     * 获取来源
+     * @type {ComputedRef<*>}
+     */
+    const source = computed(() => {
+        return advanceSelect.props.source
+    });
+
+
+  watch(
+    () => props.value,
+    (val, oldVal) => {
+      if (!Object.is(val, oldVal)) {
+        advanceSelect.onOptionDestroy(oldVal, instance.proxy);
+        advanceSelect.onOptionCreate(instance.proxy);
+      }
+    }
+  );
+
+  onMounted(() => {
+    advanceSelect.onOptionCreate(instance.proxy);
+  });
+
+  onUnmounted(() => {
+    advanceSelect.onOptionDestroy(props.value, instance.proxy);
+  });
+
+  return { advanceSelect, itemSelected, currentLabel, showSelectIcon, source };
+};