ele-admin-plus 1.0.0-beta.1

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

@@ -0,0 +1,387 @@
+import { defineComponent, ref, computed, onMounted, watch, nextTick, resolveComponent, openBlock, createBlock, createSlots, withCtx, createVNode, mergeProps, renderList, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { useResponsive } from "../ele-config-provider/use-receiver";
+import EleBasicSelect from "../ele-basic-select/index";
+import EleProTable from "../ele-pro-table/index";
+import { tableSelectProps, tableSelectEmits } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleTableSelect",
+  components: { EleBasicSelect, EleProTable },
+  props: tableSelectProps,
+  emits: tableSelectEmits,
+  setup(props, { emit }) {
+    const isResponsive = useResponsive(props);
+    const selectRef = ref(null);
+    const tableRef = ref(null);
+    const visible = ref(false);
+    const selectedLabel = ref("");
+    const selectedData = ref([]);
+    const current = ref(null);
+    const selections = ref([]);
+    const innerUpdate = ref(false);
+    const selectPopperClass = computed(() => {
+      const classes = ["ele-table-select-popper"];
+      if (isResponsive.value) {
+        classes.push("is-responsive");
+      }
+      if (props.popperClass) {
+        classes.push(props.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 = props.modelValue ?? [];
+      updateModelValue(values.filter((v) => v !== item.value));
+      emit("removeTag", item.value);
+    };
+    const onClear = () => {
+      updateModelValue(props.multiple ? [] : null);
+      updateVisible(false);
+      emit("clear");
+    };
+    const onFocus = (e) => {
+      emit("focus", e);
+    };
+    const onBlur = (e) => {
+      emit("blur", e);
+    };
+    const valueIsChanged = (value) => {
+      const isEmpty = isEmptyValue(props.modelValue);
+      if (!props.multiple) {
+        if (isEmptyValue(value) && isEmpty) {
+          return false;
+        }
+        return value !== props.modelValue;
+      }
+      const values = value;
+      const selected = props.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 && !props.multiple && value != null) {
+        updateModelValue(value[props.valueKey]);
+        emit("select", value);
+      }
+    };
+    const onUpdateSelections = (values) => {
+      selections.value = values;
+      if (!innerUpdate.value && props.multiple && values != null) {
+        updateModelValue(values.map((d) => d[props.valueKey]));
+        if (values.length) {
+          emit("select", values);
+        }
+      }
+    };
+    const onValueChange = (value) => {
+      if (props.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[props.labelKey] ?? "";
+        if (current.value !== row) {
+          updateCurrentRow(row);
+        }
+        return;
+      }
+      updateCurrentRow(null);
+      if (isEmptyValue(props.initValue)) {
+        selectedLabel.value = value;
+        return;
+      }
+      const label = props.initValue[props.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[props.labelKey] });
+          return;
+        }
+        const row = getRowByValue(value);
+        if (row) {
+          checked.push({ value, label: row[props.labelKey] });
+          extras.push(row);
+          return;
+        }
+        const label = getLabelFromInit(value);
+        checked.push({ value, label });
+        extras.push({ [props.valueKey]: value, [props.labelKey]: label });
+      });
+      const selectedRows = selections.value.filter((d) => values.includes(d[props.valueKey])).concat(extras);
+      return { checked, selectedRows };
+    };
+    const getLabelFromInit = (value) => {
+      if (isEmptyValue(props.initValue)) {
+        return value;
+      }
+      const list = props.initValue;
+      const temp = list.find((d) => d[props.valueKey] === value);
+      return temp ? temp[props.labelKey] : value;
+    };
+    const isEmptyValue = (value) => {
+      return value == null || value === "";
+    };
+    const isArrayDatasource = () => {
+      const tableProps = props.tableProps;
+      return tableProps != null && Array.isArray(tableProps.datasource);
+    };
+    const getTablePageData = () => {
+      return tableRef.value ? tableRef.value.getData() : [];
+    };
+    const getTableData = () => {
+      if (isArrayDatasource()) {
+        return props.tableProps.datasource;
+      }
+      return getTablePageData();
+    };
+    const getRowByValue = (value, data) => {
+      const list = data ?? getTableData();
+      return list.find((d) => d[props.valueKey] === value);
+    };
+    const pageToSeleted = () => {
+      if (!tableRef.value || isEmptyValue(props.modelValue)) {
+        return;
+      }
+      const data = getTablePageData();
+      if (!props.multiple) {
+        if (data.some((d) => d[props.valueKey] === props.modelValue)) {
+          return;
+        }
+        tableRef.value.goPageByRowKey(props.modelValue);
+        return;
+      }
+      if (!Array.isArray(props.modelValue) || !props.modelValue.length) {
+        return;
+      }
+      const selected = props.modelValue;
+      if (data.some((d) => selected.includes(d[props.valueKey]))) {
+        return;
+      }
+      tableRef.value.goPageByRowKey(selected[selected.length - 1]);
+    };
+    const onTableDone = () => {
+      nextTick(() => {
+        updatePopover();
+      });
+      if (!props.multiple) {
+        if (!isEmptyValue(props.modelValue)) {
+          const row = getRowByValue(props.modelValue);
+          if (row) {
+            selectedLabel.value = row[props.labelKey] ?? "";
+            updateCurrentRow(row);
+          }
+        }
+        return;
+      }
+      const values = props.modelValue;
+      if (values != null && values.length) {
+        const rows = [];
+        const data = getTablePageData();
+        selections.value.forEach((d) => {
+          rows.push(getRowByValue(d[props.valueKey], data) ?? d);
+        });
+        updateSelectedRows(rows);
+        const { checked } = getMultipleResult(values);
+        selectedData.value = checked;
+      }
+    };
+    const onTableRowClick = () => {
+      if (!props.multiple) {
+        updateVisible(false);
+      }
+    };
+    const onInitValueChange = (init) => {
+      if (!isEmptyValue(init)) {
+        if (!props.multiple) {
+          updateModelValue(init[props.valueKey]);
+          return;
+        }
+        const key = props.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();
+      }
+    };
+    onMounted(() => {
+      var _a;
+      if (props.multiple) {
+        if (!isEmptyValue(props.initValue)) {
+          onInitValueChange(props.initValue);
+        } else if ((_a = props.modelValue) == null ? void 0 : _a.length) {
+          onValueChange(props.modelValue);
+        }
+      } else if (!isEmptyValue(props.initValue)) {
+        onInitValueChange(props.initValue);
+      } else if (!isEmptyValue(props.modelValue)) {
+        onValueChange(props.modelValue);
+      }
+    });
+    watch(
+      () => props.modelValue,
+      (value) => {
+        onValueChange(value);
+      }
+    );
+    watch(
+      () => props.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, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_EleProTable = resolveComponent("EleProTable");
+  const _component_EleBasicSelect = resolveComponent("EleBasicSelect");
+  return openBlock(), 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
+  }, createSlots({
+    default: withCtx(() => [
+      createVNode(_component_EleProTable, 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
+      }), createSlots({ _: 2 }, [
+        renderList(Object.keys(_ctx.$slots).filter(
+          (k) => "maxTagPlaceholder" !== k
+        ), (name) => {
+          return {
+            name,
+            fn: withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+            ])
+          };
+        })
+      ]), 1040, ["rowKey", "current", "selections", "highlightCurrentRow", "onDone", "onRowClick", "onUpdate:current", "onUpdate:selections"])
+    ]),
+    _: 2
+  }, [
+    _ctx.$slots.maxTagPlaceholder ? {
+      name: "maxTagPlaceholder",
+      fn: withCtx((slotProps) => [
+        renderSlot(_ctx.$slots, "maxTagPlaceholder", normalizeProps(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]]);
+export {
+  index as default
+};

package/es/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/es/ele-table-select/props.js

@@ -0,0 +1,97 @@
+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
+};
+export {
+  tableSelectEmits,
+  tableSelectProps
+};

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

@@ -0,0 +1,3 @@
+import '../../ele-basic-select/style/index';
+import '../../ele-pro-table/style/index';
+import './index.scss';

package/es/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/es/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/es/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;