ele-admin-plus 1.0.0-beta.1

package/lib/ele-table-select/index.js

@@ -0,0 +1,386 @@
+"use strict";
+const vue = require("vue");
+const useReceiver = require("../ele-config-provider/use-receiver");
+const EleBasicSelect = require("../ele-basic-select/index");
+const EleProTable = require("../ele-pro-table/index");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleTableSelect",
+  components: { EleBasicSelect, EleProTable },
+  props: props.tableSelectProps,
+  emits: props.tableSelectEmits,
+  setup(props2, { emit }) {
+    const isResponsive = useReceiver.useResponsive(props2);
+    const selectRef = vue.ref(null);
+    const tableRef = vue.ref(null);
+    const visible = vue.ref(false);
+    const selectedLabel = vue.ref("");
+    const selectedData = vue.ref([]);
+    const current = vue.ref(null);
+    const selections = vue.ref([]);
+    const innerUpdate = vue.ref(false);
+    const selectPopperClass = vue.computed(() => {
+      const classes = ["ele-table-select-popper"];
+      if (isResponsive.value) {
+        classes.push("is-responsive");
+      }
+      if (props2.popperClass) {
+        classes.push(props2.popperClass);
+      }
+      return classes.join(" ");
+    });
+    const updateVisible = (value) => {
+      if (visible.value !== value) {
+        visible.value = value;
+        emit("visibleChange", value);
+      }
+      if (value) {
+        pageToSeleted();
+      }
+    };
+    const onRemoveTag = (item) => {
+      const values = props2.modelValue ?? [];
+      updateModelValue(values.filter((v) => v !== item.value));
+      emit("removeTag", item.value);
+    };
+    const onClear = () => {
+      updateModelValue(props2.multiple ? [] : null);
+      updateVisible(false);
+      emit("clear");
+    };
+    const onFocus = (e) => {
+      emit("focus", e);
+    };
+    const onBlur = (e) => {
+      emit("blur", e);
+    };
+    const valueIsChanged = (value) => {
+      const isEmpty = isEmptyValue(props2.modelValue);
+      if (!props2.multiple) {
+        if (isEmptyValue(value) && isEmpty) {
+          return false;
+        }
+        return value !== props2.modelValue;
+      }
+      const values = value;
+      const selected = props2.modelValue;
+      if (isEmpty || !selected.length) {
+        return !!values.length;
+      }
+      if (values.length !== selected.length) {
+        return true;
+      }
+      return values.some((v) => !selected.includes(v));
+    };
+    const updateModelValue = (value) => {
+      if (valueIsChanged(value)) {
+        emit("update:modelValue", value);
+        emit("change", value);
+      }
+    };
+    const onUpdateCurrent = (value) => {
+      current.value = value;
+      if (!innerUpdate.value && !props2.multiple && value != null) {
+        updateModelValue(value[props2.valueKey]);
+        emit("select", value);
+      }
+    };
+    const onUpdateSelections = (values) => {
+      selections.value = values;
+      if (!innerUpdate.value && props2.multiple && values != null) {
+        updateModelValue(values.map((d) => d[props2.valueKey]));
+        if (values.length) {
+          emit("select", values);
+        }
+      }
+    };
+    const onValueChange = (value) => {
+      if (props2.multiple) {
+        const values = value;
+        if (values == null || !values.length) {
+          selectedData.value = [];
+          updateSelectedRows([]);
+          return;
+        }
+        const { checked, selectedRows } = getMultipleResult(values);
+        selectedData.value = checked;
+        updateSelectedRows(selectedRows);
+        return;
+      }
+      if (isEmptyValue(value)) {
+        selectedLabel.value = "";
+        updateCurrentRow(null);
+        return;
+      }
+      const row = getRowByValue(value);
+      if (row) {
+        selectedLabel.value = row[props2.labelKey] ?? "";
+        if (current.value !== row) {
+          updateCurrentRow(row);
+        }
+        return;
+      }
+      updateCurrentRow(null);
+      if (isEmptyValue(props2.initValue)) {
+        selectedLabel.value = value;
+        return;
+      }
+      const label = props2.initValue[props2.labelKey];
+      selectedLabel.value = label ?? "";
+    };
+    const updateCurrentRow = (row) => {
+      if (tableRef.value) {
+        innerUpdate.value = true;
+        tableRef.value.setCurrentRow(row);
+        innerUpdate.value = false;
+      }
+    };
+    const updateSelectedRows = (rows) => {
+      if (tableRef.value) {
+        innerUpdate.value = true;
+        tableRef.value.setSelectedRows(rows);
+        innerUpdate.value = false;
+      }
+    };
+    const getMultipleResult = (values) => {
+      const checked = [];
+      const extras = [];
+      values.forEach((value) => {
+        const item = getRowByValue(value, selections.value);
+        if (item) {
+          checked.push({ value, label: item[props2.labelKey] });
+          return;
+        }
+        const row = getRowByValue(value);
+        if (row) {
+          checked.push({ value, label: row[props2.labelKey] });
+          extras.push(row);
+          return;
+        }
+        const label = getLabelFromInit(value);
+        checked.push({ value, label });
+        extras.push({ [props2.valueKey]: value, [props2.labelKey]: label });
+      });
+      const selectedRows = selections.value.filter((d) => values.includes(d[props2.valueKey])).concat(extras);
+      return { checked, selectedRows };
+    };
+    const getLabelFromInit = (value) => {
+      if (isEmptyValue(props2.initValue)) {
+        return value;
+      }
+      const list = props2.initValue;
+      const temp = list.find((d) => d[props2.valueKey] === value);
+      return temp ? temp[props2.labelKey] : value;
+    };
+    const isEmptyValue = (value) => {
+      return value == null || value === "";
+    };
+    const isArrayDatasource = () => {
+      const tableProps = props2.tableProps;
+      return tableProps != null && Array.isArray(tableProps.datasource);
+    };
+    const getTablePageData = () => {
+      return tableRef.value ? tableRef.value.getData() : [];
+    };
+    const getTableData = () => {
+      if (isArrayDatasource()) {
+        return props2.tableProps.datasource;
+      }
+      return getTablePageData();
+    };
+    const getRowByValue = (value, data) => {
+      const list = data ?? getTableData();
+      return list.find((d) => d[props2.valueKey] === value);
+    };
+    const pageToSeleted = () => {
+      if (!tableRef.value || isEmptyValue(props2.modelValue)) {
+        return;
+      }
+      const data = getTablePageData();
+      if (!props2.multiple) {
+        if (data.some((d) => d[props2.valueKey] === props2.modelValue)) {
+          return;
+        }
+        tableRef.value.goPageByRowKey(props2.modelValue);
+        return;
+      }
+      if (!Array.isArray(props2.modelValue) || !props2.modelValue.length) {
+        return;
+      }
+      const selected = props2.modelValue;
+      if (data.some((d) => selected.includes(d[props2.valueKey]))) {
+        return;
+      }
+      tableRef.value.goPageByRowKey(selected[selected.length - 1]);
+    };
+    const onTableDone = () => {
+      vue.nextTick(() => {
+        updatePopover();
+      });
+      if (!props2.multiple) {
+        if (!isEmptyValue(props2.modelValue)) {
+          const row = getRowByValue(props2.modelValue);
+          if (row) {
+            selectedLabel.value = row[props2.labelKey] ?? "";
+            updateCurrentRow(row);
+          }
+        }
+        return;
+      }
+      const values = props2.modelValue;
+      if (values != null && values.length) {
+        const rows = [];
+        const data = getTablePageData();
+        selections.value.forEach((d) => {
+          rows.push(getRowByValue(d[props2.valueKey], data) ?? d);
+        });
+        updateSelectedRows(rows);
+        const { checked } = getMultipleResult(values);
+        selectedData.value = checked;
+      }
+    };
+    const onTableRowClick = () => {
+      if (!props2.multiple) {
+        updateVisible(false);
+      }
+    };
+    const onInitValueChange = (init) => {
+      if (!isEmptyValue(init)) {
+        if (!props2.multiple) {
+          updateModelValue(init[props2.valueKey]);
+          return;
+        }
+        const key = props2.valueKey;
+        updateModelValue(init.map((d) => d[key]));
+      }
+    };
+    const updatePopover = () => {
+      var _a, _b;
+      const popperRef = (_b = (_a = selectRef.value) == null ? void 0 : _a.popoverRef) == null ? void 0 : _b.popperRef;
+      if (popperRef == null ? void 0 : popperRef.popperInstanceRef) {
+        popperRef.popperInstanceRef.update();
+      }
+    };
+    vue.onMounted(() => {
+      var _a;
+      if (props2.multiple) {
+        if (!isEmptyValue(props2.initValue)) {
+          onInitValueChange(props2.initValue);
+        } else if ((_a = props2.modelValue) == null ? void 0 : _a.length) {
+          onValueChange(props2.modelValue);
+        }
+      } else if (!isEmptyValue(props2.initValue)) {
+        onInitValueChange(props2.initValue);
+      } else if (!isEmptyValue(props2.modelValue)) {
+        onValueChange(props2.modelValue);
+      }
+    });
+    vue.watch(
+      () => props2.modelValue,
+      (value) => {
+        onValueChange(value);
+      }
+    );
+    vue.watch(
+      () => props2.initValue,
+      (initValue) => {
+        onInitValueChange(initValue);
+      }
+    );
+    return {
+      selectRef,
+      tableRef,
+      visible,
+      selectedLabel,
+      selectedData,
+      current,
+      selections,
+      selectPopperClass,
+      updateVisible,
+      onRemoveTag,
+      onClear,
+      onFocus,
+      onBlur,
+      onUpdateCurrent,
+      onUpdateSelections,
+      onTableDone,
+      onTableRowClick
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_EleProTable = vue.resolveComponent("EleProTable");
+  const _component_EleBasicSelect = vue.resolveComponent("EleBasicSelect");
+  return vue.openBlock(), vue.createBlock(_component_EleBasicSelect, {
+    ref: "selectRef",
+    value: _ctx.modelValue,
+    multiple: _ctx.multiple,
+    disabled: _ctx.disabled,
+    size: _ctx.size,
+    clearable: _ctx.clearable,
+    placeholder: _ctx.placeholder,
+    name: _ctx.name,
+    autocomplete: _ctx.autocomplete,
+    maxTagCount: _ctx.maxTagCount,
+    maxTagTextLength: _ctx.maxTagTextLength,
+    teleported: _ctx.teleported,
+    persistent: _ctx.persistent,
+    automaticDropdown: _ctx.automaticDropdown,
+    tagType: _ctx.tagType,
+    placement: _ctx.placement,
+    popperWidth: _ctx.popperWidth,
+    popperOptions: _ctx.popperOptions,
+    popperClass: _ctx.selectPopperClass,
+    selectedLabel: _ctx.selectedLabel,
+    selected: _ctx.selectedData,
+    visible: _ctx.visible,
+    "onUpdate:visible": _ctx.updateVisible,
+    onRemoveTag: _ctx.onRemoveTag,
+    onClear: _ctx.onClear,
+    onFocus: _ctx.onFocus,
+    onBlur: _ctx.onBlur
+  }, vue.createSlots({
+    default: vue.withCtx(() => [
+      vue.createVNode(_component_EleProTable, vue.mergeProps(_ctx.tableProps, {
+        ref: "tableRef",
+        rowKey: _ctx.valueKey,
+        current: _ctx.current,
+        selections: _ctx.selections,
+        highlightCurrentRow: !_ctx.multiple,
+        onDone: _ctx.onTableDone,
+        onRowClick: _ctx.onTableRowClick,
+        "onUpdate:current": _ctx.onUpdateCurrent,
+        "onUpdate:selections": _ctx.onUpdateSelections
+      }), vue.createSlots({ _: 2 }, [
+        vue.renderList(Object.keys(_ctx.$slots).filter(
+          (k) => "maxTagPlaceholder" !== k
+        ), (name) => {
+          return {
+            name,
+            fn: vue.withCtx((slotProps) => [
+              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+            ])
+          };
+        })
+      ]), 1040, ["rowKey", "current", "selections", "highlightCurrentRow", "onDone", "onRowClick", "onUpdate:current", "onUpdate:selections"])
+    ]),
+    _: 2
+  }, [
+    _ctx.$slots.maxTagPlaceholder ? {
+      name: "maxTagPlaceholder",
+      fn: vue.withCtx((slotProps) => [
+        vue.renderSlot(_ctx.$slots, "maxTagPlaceholder", vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1032, ["value", "multiple", "disabled", "size", "clearable", "placeholder", "name", "autocomplete", "maxTagCount", "maxTagTextLength", "teleported", "persistent", "automaticDropdown", "tagType", "placement", "popperWidth", "popperOptions", "popperClass", "selectedLabel", "selected", "visible", "onUpdate:visible", "onRemoveTag", "onClear", "onFocus", "onBlur"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

package/lib/ele-table-select/props.d.ts

@@ -0,0 +1,74 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { SelectValue, SingleValue } from '../ele-basic-select/types';
+import type { ProTableProps } from '../ele-pro-table/props';
+import type { DataItem } from '../ele-pro-table/types';
+import type { InitValue } from './types';
+/**
+ * 属性
+ */
+export declare const tableSelectProps: {
+    modelValue: PropType<SelectValue>;
+    multiple: BooleanConstructor;
+    disabled: BooleanConstructor;
+    size: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never> | undefined>;
+    clearable: BooleanConstructor;
+    placeholder: StringConstructor;
+    name: StringConstructor;
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    initValue: PropType<InitValue>;
+    tableProps: {
+        type: PropType<Partial<ProTableProps>>;
+        required: boolean;
+    };
+    maxTagCount: NumberConstructor;
+    maxTagTextLength: NumberConstructor;
+    teleported: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    automaticDropdown: BooleanConstructor;
+    tagType: {
+        type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown>>;
+        default: string;
+    };
+    placement: {
+        type: PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], unknown, unknown>>;
+        default: string;
+    };
+    popperWidth: (StringConstructor | NumberConstructor)[];
+    popperOptions: PropType<Partial<import("element-plus").Options>>;
+    popperClass: StringConstructor;
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+};
+export type TableSelectProps = ExtractPropTypes<typeof tableSelectProps>;
+/**
+ * 事件
+ */
+export declare const tableSelectEmits: {
+    'update:modelValue': (_value: SelectValue) => boolean;
+    change: (_value: SelectValue) => boolean;
+    visibleChange: (_visible: boolean) => boolean;
+    removeTag: (_value: SingleValue) => boolean;
+    clear: () => boolean;
+    focus: (_e: FocusEvent) => boolean;
+    blur: (_e: FocusEvent) => boolean;
+    select: (_item: DataItem | DataItem[]) => boolean;
+};

package/lib/ele-table-select/props.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tableSelectProps = {
+  // 绑定值
+  modelValue: [String, Number, Boolean, Array],
+  // 是否多选
+  multiple: Boolean,
+  // 是否禁用
+  disabled: Boolean,
+  // 尺寸
+  size: String,
+  // 是否支持清除
+  clearable: Boolean,
+  // 占位符
+  placeholder: String,
+  // input 的 name 属性
+  name: String,
+  // input 的 autocomplete 属性
+  autocomplete: {
+    type: String,
+    default: "off"
+  },
+  // value 的键名
+  valueKey: {
+    type: String,
+    default: "value"
+  },
+  // label 的键名
+  labelKey: {
+    type: String,
+    default: "label"
+  },
+  // 默认选中值
+  initValue: [Object, Array],
+  // 表格配置
+  tableProps: {
+    type: Object,
+    required: true
+  },
+  // 最多显示多少个 tag
+  maxTagCount: Number,
+  // 最大显示的 tag 文本长度
+  maxTagTextLength: Number,
+  // 是否将 popover 内容插入 body
+  teleported: {
+    type: Boolean,
+    default: true
+  },
+  // 始终渲染 popover 内容
+  persistent: {
+    type: Boolean,
+    default: true
+  },
+  // 是否在输入框获得焦点后自动弹出选项菜单
+  automaticDropdown: Boolean,
+  // 标签类型
+  tagType: {
+    type: String,
+    default: "info"
+  },
+  // 气泡框位置
+  placement: {
+    type: String,
+    default: "bottom-start"
+  },
+  // popper 宽度
+  popperWidth: [Number, String],
+  // popper.js 的参数
+  popperOptions: Object,
+  // 下拉框的类名
+  popperClass: String,
+  // 是否开启响应式
+  responsive: {
+    type: Boolean,
+    default: null
+  }
+};
+const tableSelectEmits = {
+  // 更新绑定值
+  "update:modelValue": (_value) => true,
+  // 选中值改变事件
+  change: (_value) => true,
+  // 下拉框展开状态改变事件
+  visibleChange: (_visible) => true,
+  // 多选移除选中标签事件
+  removeTag: (_value) => true,
+  // 清空事件
+  clear: () => true,
+  // 获取焦点事件
+  focus: (_e) => true,
+  // 失去焦点事件
+  blur: (_e) => true,
+  // 表格行选中事件
+  select: (_item) => true
+};
+exports.tableSelectEmits = tableSelectEmits;
+exports.tableSelectProps = tableSelectProps;

package/lib/ele-table-select/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+require("../../ele-basic-select/style/index");
+require("../../ele-pro-table/style/index");
+require("./index.scss");

package/lib/ele-table-select/style/index.scss

@@ -0,0 +1,9 @@
+@use '../../style/themes/default.scss' as *;
+
+.ele-table-select-popper {
+  #{elVarName('popover', 'padding')}: 8px;
+
+  &.is-responsive {
+    max-width: calc(100vw - 32px);
+  }
+}

package/lib/ele-table-select/types/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 单选 initValue
+ */
+export type SingleInitValue = Record<string, any>;
+/**
+ * 多选 initValue
+ */
+export type MultipleInitValue = Array<SingleInitValue>;
+/**
+ * initValue
+ */
+export type InitValue = SingleInitValue | MultipleInitValue | undefined | null;

package/lib/ele-tabs/components/tab-title.d.ts

@@ -0,0 +1,34 @@
+import type { PropType } from 'vue';
+import type { TabPaneItem, TabEventOption, DropdownInstance } from '../types';
+declare const _sfc_main: import("vue").DefineComponent<{
+    active: (StringConstructor | NumberConstructor)[];
+    tabName: (StringConstructor | NumberConstructor)[];
+    label: StringConstructor;
+    item: PropType<TabPaneItem>;
+    contextMenu: BooleanConstructor;
+    handleClick: BooleanConstructor;
+}, {
+    dropdownRef: import("vue").Ref<DropdownInstance>;
+    onContextMenu: (command: string) => void;
+    onContextVisible: (visible: boolean) => void;
+    onClick: (e: MouseEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    itemClick: (_opt: TabEventOption) => true;
+    contextMenu: (_option: TabEventOption) => true;
+    contextOpen: (_ref: DropdownInstance) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    active: (StringConstructor | NumberConstructor)[];
+    tabName: (StringConstructor | NumberConstructor)[];
+    label: StringConstructor;
+    item: PropType<TabPaneItem>;
+    contextMenu: BooleanConstructor;
+    handleClick: BooleanConstructor;
+}>> & {
+    onItemClick?: ((_opt: TabEventOption) => any) | undefined;
+    onContextMenu?: ((_option: TabEventOption) => any) | undefined;
+    onContextOpen?: ((_ref: DropdownInstance) => any) | undefined;
+}, {
+    contextMenu: boolean;
+    handleClick: boolean;
+}, {}>;
+export default _sfc_main;