@ibiz-template/vue3-components 0.7.41-alpha.10 → 0.7.41-alpha.101

package/src/editor/data-picker/ibiz-transfer-picker/components/transfer/icon.tsx

@@ -0,0 +1,17 @@
+export const arrowLeft = (): JSX.Element => (
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'>
+    <path
+      fill='currentColor'
+      d='M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z'
+    ></path>
+  </svg>
+);
+
+export const arrowRight = (): JSX.Element => (
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'>
+    <path
+      fill='currentColor'
+      d='M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z'
+    ></path>
+  </svg>
+);

package/src/editor/data-picker/ibiz-transfer-picker/components/transfer/interface.ts

@@ -0,0 +1,120 @@
+/* eslint-disable no-unused-vars */
+import type { ExtractPropTypes, h as H, PropType, VNode } from 'vue';
+import { isArray, isNil } from 'lodash-es';
+
+export const UPDATE_MODEL_EVENT = 'update:modelValue';
+export const CHANGE_EVENT = 'change';
+export const INPUT_EVENT = 'input';
+export const LEFT_CHECK_CHANGE_EVENT = 'leftCheckChange';
+export const RIGHT_CHECK_CHANGE_EVENT = 'rightCheckChange';
+export const LEFT_AC_SEARCH = 'leftAcSearch';
+
+export type TransferKey = string | number;
+export type TransferDirection = 'left' | 'right';
+export type renderContent = (h: typeof H, option: IData) => VNode | VNode[];
+export interface TransferFormat {
+  noChecked?: string;
+  hasChecked?: string;
+}
+export interface TransferPropsAlias {
+  label?: string;
+  key?: string;
+  disabled?: string;
+}
+export interface TransferCheckedState {
+  leftChecked: TransferKey[];
+  rightChecked: TransferKey[];
+}
+
+export const transferCheckedChangeFn = (
+  value: TransferKey[],
+  movedKeys?: TransferKey[],
+): boolean =>
+  [value, movedKeys].every(isArray) || (isArray(value) && isNil(movedKeys));
+
+export const transferProps = {
+  data: {
+    type: Array as PropType<IData>,
+    default: (): IData => [],
+  },
+  titles: {
+    type: Array as PropType<Array<string>>,
+    default: (): Array<string> => [],
+  },
+  buttonTexts: {
+    type: Array as PropType<Array<string>>,
+    default: (): Array<string> => [],
+  },
+  filterPlaceholder: String,
+  filterMethod: {
+    type: Function as PropType<(query: string, item: IData) => boolean>,
+  },
+  rightSearchMethod: {
+    type: Function as PropType<(query: string) => IData[]>,
+  },
+  leftDefaultChecked: {
+    type: Array as PropType<Array<TransferKey>>,
+    default: (): Array<TransferKey> => [],
+  },
+  rightDefaultChecked: {
+    type: Array as PropType<Array<TransferKey>>,
+    default: (): Array<TransferKey> => [],
+  },
+  renderContent: {
+    type: Function as PropType<renderContent>,
+  },
+  modelValue: {
+    type: Array as PropType<Array<TransferKey>>,
+    default: (): Array<TransferKey> => [],
+  },
+  format: {
+    type: Object as PropType<TransferFormat>,
+    default: (): TransferFormat => ({}),
+  },
+  filterable: Boolean,
+  props: {
+    type: Object as PropType<TransferPropsAlias>,
+    default: (): TransferPropsAlias => ({
+      label: 'label',
+      key: 'key',
+      disabled: 'disabled',
+    }),
+  },
+  targetOrder: {
+    type: String,
+    values: ['original', 'push', 'unshift'],
+    default: 'original',
+  },
+  enableRemoteSearch: {
+    type: Boolean,
+    default: false,
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type TransferProps = ExtractPropTypes<typeof transferProps>;
+
+export const transferEmits = {
+  [CHANGE_EVENT]: (
+    value: TransferKey[],
+    direction: TransferDirection,
+    movedKeys: TransferKey[],
+  ): boolean =>
+    [value, movedKeys].every(isArray) && ['left', 'right'].includes(direction),
+  [UPDATE_MODEL_EVENT]: (value: TransferKey[]): boolean => isArray(value),
+  [LEFT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn,
+  [RIGHT_CHECK_CHANGE_EVENT]: transferCheckedChangeFn,
+  [LEFT_AC_SEARCH]: (query: string): string => query,
+};
+export type TransferEmits = typeof transferEmits;

package/src/editor/data-picker/ibiz-transfer-picker/components/transfer/transfer-util.ts

@@ -0,0 +1,180 @@
+/* eslint-disable no-unused-vars */
+import { computed } from 'vue';
+import type { ComputedRef, SetupContext } from 'vue';
+import {
+  CHANGE_EVENT,
+  LEFT_CHECK_CHANGE_EVENT,
+  RIGHT_CHECK_CHANGE_EVENT,
+  UPDATE_MODEL_EVENT,
+} from './interface';
+import type {
+  TransferCheckedState,
+  TransferDirection,
+  TransferEmits,
+  TransferKey,
+  TransferProps,
+  TransferPropsAlias,
+} from './interface';
+
+export const usePropsAlias = (props: {
+  props: TransferPropsAlias;
+}): ComputedRef => {
+  const initProps: Required<TransferPropsAlias> = {
+    label: 'label',
+    key: 'key',
+    disabled: 'disabled',
+  };
+
+  return computed(() => ({
+    ...initProps,
+    ...props.props,
+  }));
+};
+
+export const useComputedData = (
+  props: TransferProps,
+): {
+  sourceData: ComputedRef;
+  targetData: ComputedRef;
+} => {
+  const propsAlias = usePropsAlias(props);
+
+  const dataObj = computed(() =>
+    props.data.reduce(
+      // eslint-disable-next-line no-return-assign, no-param-reassign
+      (o: IData, cur: IData) => (o[cur[propsAlias.value.key]] = cur) && o,
+      {},
+    ),
+  );
+
+  const sourceData = computed(() =>
+    props.data.filter(
+      (item: IData) => !props.modelValue.includes(item[propsAlias.value.key]),
+    ),
+  );
+
+  const targetData = computed(() => {
+    if (props.targetOrder === 'original') {
+      return props.data.filter((item: IData) =>
+        props.modelValue.includes(item[propsAlias.value.key]),
+      );
+    }
+    return props.modelValue.reduce((arr: IData[], cur: TransferKey) => {
+      const val = dataObj.value[cur];
+      if (val) {
+        arr.push(val);
+      }
+      return arr;
+    }, []);
+  });
+
+  return {
+    sourceData,
+    targetData,
+  };
+};
+
+export const useCheckedChange = (
+  checkedState: TransferCheckedState,
+  emit: SetupContext<TransferEmits>['emit'],
+): {
+  onSourceCheckedChange: (
+    val: TransferKey[],
+    movedKeys?: TransferKey[],
+  ) => void;
+  onTargetCheckedChange: (
+    val: TransferKey[],
+    movedKeys?: TransferKey[],
+  ) => void;
+} => {
+  const onSourceCheckedChange = (
+    val: TransferKey[],
+    movedKeys?: TransferKey[],
+  ): void => {
+    // eslint-disable-next-line no-param-reassign
+    checkedState.leftChecked = val;
+    if (!movedKeys) return;
+    emit(LEFT_CHECK_CHANGE_EVENT, val, movedKeys);
+  };
+
+  const onTargetCheckedChange = (
+    val: TransferKey[],
+    movedKeys?: TransferKey[],
+  ): void => {
+    // eslint-disable-next-line no-param-reassign
+    checkedState.rightChecked = val;
+    if (!movedKeys) return;
+    emit(RIGHT_CHECK_CHANGE_EVENT, val, movedKeys);
+  };
+
+  return {
+    onSourceCheckedChange,
+    onTargetCheckedChange,
+  };
+};
+
+export const useMove = (
+  props: TransferProps,
+  checkedState: TransferCheckedState,
+  emit: SetupContext<TransferEmits>['emit'],
+): {
+  addToLeft: () => void;
+  addToRight: () => void;
+} => {
+  const propsAlias = usePropsAlias(props);
+
+  const _emit = (
+    value: TransferKey[],
+    direction: TransferDirection,
+    movedKeys: TransferKey[],
+  ): void => {
+    emit(UPDATE_MODEL_EVENT, value);
+    emit(CHANGE_EVENT, value, direction, movedKeys);
+  };
+
+  const addToLeft = (): void => {
+    const currentValue = props.modelValue.slice();
+
+    checkedState.rightChecked.forEach(item => {
+      const index = currentValue.indexOf(item);
+      if (index > -1) {
+        currentValue.splice(index, 1);
+      }
+    });
+    _emit(currentValue, 'left', checkedState.rightChecked);
+  };
+
+  const addToRight = (): void => {
+    let currentValue = props.modelValue.slice();
+
+    const itemsToBeMoved = props.data
+      .filter((item: IData) => {
+        const itemKey = item[propsAlias.value.key];
+        return (
+          checkedState.leftChecked.includes(itemKey) &&
+          !props.modelValue.includes(itemKey)
+        );
+      })
+      .map((item: IData) => item[propsAlias.value.key]);
+
+    currentValue =
+      props.targetOrder === 'unshift'
+        ? itemsToBeMoved.concat(currentValue)
+        : currentValue.concat(itemsToBeMoved);
+
+    if (props.targetOrder === 'original') {
+      currentValue = props.data
+        .filter((item: IData) =>
+          currentValue.includes(item[propsAlias.value.key]),
+        )
+        .map((item: IData) => item[propsAlias.value.key]);
+    }
+
+    _emit(currentValue, 'right', checkedState.leftChecked);
+  };
+
+  return {
+    addToLeft,
+    addToRight,
+  };
+};

package/src/editor/data-picker/ibiz-transfer-picker/components/transfer/transfer.scss

@@ -0,0 +1,24 @@
+@include b('transfer') {
+    @include e(buttons) {
+        display: inline-block;
+        padding: 0 rem(30px);
+        vertical-align: middle;
+    }
+
+    @include e(button) {
+        vertical-align: top;
+
+        &:nth-child(2) {
+            margin: 0 0 0 10px;
+        }
+
+        i,
+        span {
+            font-size: getCssVar('font-size', 'header-6');
+        }
+
+        .el-icon {
+            font-size: getCssVar('font-size', 'regular');
+        }
+    }
+}

package/src/editor/data-picker/ibiz-transfer-picker/components/transfer/transfer.tsx

@@ -0,0 +1,174 @@
+import { computed, defineComponent, h, reactive, ref, VNode } from 'vue';
+import { isEmpty } from 'ramda';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import {
+  useCheckedChange,
+  useComputedData,
+  useMove,
+  usePropsAlias,
+} from './transfer-util';
+import { transferEmits, transferProps } from './interface';
+import type { TransferCheckedState, TransferDirection } from './interface';
+import { TransferPanel } from '../transfer-panel/transfer-panel';
+import { arrowLeft, arrowRight } from './icon';
+import './transfer.scss';
+
+export const TransferSelect = defineComponent({
+  name: 'IBizTransfer',
+  props: transferProps,
+  emits: transferEmits,
+  setup(props, { emit, slots }) {
+    const ns = useNamespace('transfer');
+
+    const checkedState = reactive<TransferCheckedState>({
+      leftChecked: [],
+      rightChecked: [],
+    });
+
+    const propsAlias = usePropsAlias(props);
+
+    const { sourceData, targetData } = useComputedData(props);
+
+    const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(
+      checkedState,
+      emit,
+    );
+
+    const { addToLeft, addToRight } = useMove(props, checkedState, emit);
+
+    const leftPanel = ref();
+    const rightPanel = ref();
+
+    const clearQuery = (which: TransferDirection): void => {
+      switch (which) {
+        case 'left':
+          leftPanel.value!.query = '';
+          break;
+        case 'right':
+          rightPanel.value!.query = '';
+          break;
+        default:
+          break;
+      }
+    };
+
+    const onLeftAcSearch = (query: string): void => {
+      emit('leftAcSearch', query);
+    };
+
+    const hasButtonTexts = computed(() => props.buttonTexts.length === 2);
+
+    const leftPanelTitle = computed(() => props.titles[0] || '可选列表');
+
+    const rightPanelTitle = computed(() => props.titles[1] || '已选列表');
+
+    const panelFilterPlaceholder = computed(
+      () => props.filterPlaceholder || '请输入',
+    );
+
+    const optionRender = computed(() => (option: IData): VNode | VNode[] => {
+      if (props.renderContent) return props.renderContent(h, option);
+
+      const defaultSlotVNodes = (slots.default?.({ option }) || []).filter(
+        node => node.type !== Comment,
+      );
+      if (defaultSlotVNodes.length) {
+        return defaultSlotVNodes;
+      }
+
+      return h(
+        'span',
+        option[propsAlias.value.label] || option[propsAlias.value.key],
+      );
+    });
+    return {
+      ns,
+      targetData,
+      rightPanelTitle,
+      optionRender,
+      panelFilterPlaceholder,
+      leftPanelTitle,
+      sourceData,
+      leftPanel,
+      rightPanel,
+      hasButtonTexts,
+      checkedState,
+      addToLeft,
+      addToRight,
+      clearQuery,
+      onLeftAcSearch,
+      onSourceCheckedChange,
+      onTargetCheckedChange,
+    };
+  },
+  render() {
+    return (
+      <div class={this.ns.b()}>
+        <TransferPanel
+          ref='leftPanel'
+          data={this.sourceData}
+          readonly={this.readonly}
+          optionRender={this.optionRender}
+          placeholder={this.panelFilterPlaceholder}
+          title={this.leftPanelTitle}
+          filterable={this.filterable}
+          format={this.format}
+          enableAcSearch={this.enableRemoteSearch}
+          loading={this.loading}
+          filterMethod={this.filterMethod}
+          defaultChecked={this.leftDefaultChecked}
+          onAcSearch={this.onLeftAcSearch}
+          props={this.props}
+          onCheckedChange={this.onSourceCheckedChange}
+        ></TransferPanel>
+        <div class={this.ns.e('buttons')}>
+          <el-button
+            class={[
+              this.ns.e('button'),
+              this.ns.is('with-texts', this.hasButtonTexts),
+            ]}
+            type='primary'
+            disabled={
+              !!isEmpty(this.checkedState.rightChecked) || this.readonly
+            }
+            onClick={this.addToLeft}
+          >
+            <el-icon>{{ default: () => arrowLeft() }}</el-icon>
+            {this.buttonTexts[0] !== undefined ? (
+              <span>{this.buttonTexts[0]}</span>
+            ) : null}
+          </el-button>
+          <el-button
+            class={[
+              this.ns.e('button'),
+              this.ns.is('with-texts', this.hasButtonTexts),
+            ]}
+            type='primary'
+            disabled={!!isEmpty(this.checkedState.leftChecked) || this.readonly}
+            onClick={this.addToRight}
+          >
+            {this.buttonTexts[1] !== undefined ? (
+              <span>{this.buttonTexts[1]}</span>
+            ) : null}
+
+            <el-icon>{{ default: () => arrowRight() }}</el-icon>
+          </el-button>
+        </div>
+        <TransferPanel
+          ref='rightPanel'
+          data={this.targetData}
+          readonly={this.readonly}
+          optionRender={this.optionRender}
+          placeholder={this.panelFilterPlaceholder}
+          filterable={this.filterable}
+          format={this.format}
+          filterMethod={this.filterMethod}
+          title={this.rightPanelTitle}
+          defaultChecked={this.rightDefaultChecked}
+          props={this.props}
+          onCheckedChange={this.onTargetCheckedChange}
+        ></TransferPanel>
+      </div>
+    );
+  },
+});

package/src/editor/data-picker/ibiz-transfer-picker/components/transfer-panel/icon.tsx

@@ -0,0 +1,8 @@
+export const Search = (): JSX.Element => (
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'>
+    <path
+      fill='currentColor'
+      d='m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704'
+    ></path>
+  </svg>
+);

package/src/editor/data-picker/ibiz-transfer-picker/components/transfer-panel/interface.ts

@@ -0,0 +1,74 @@
+/* eslint-disable no-unused-vars */
+import { ExtractPropTypes, PropType, VNode } from 'vue';
+import { isArray, isNil } from 'lodash-es';
+import { TransferFormat } from '../transfer/interface';
+
+export const CHECKED_CHANGE_EVENT = 'checkedChange';
+export const AC_SEARCH = 'acSearch';
+export type TransferKey = string | number;
+export interface TransferPanelState {
+  checked: TransferKey[];
+  allChecked: boolean;
+  query: string;
+  checkChangeByUser: boolean;
+}
+
+export interface TransferPropsAlias {
+  label?: string;
+  key?: string;
+  disabled?: string;
+}
+export type CheckboxValueType = string | number | boolean;
+
+export const transferCheckedChangeFn = (
+  value: TransferKey[],
+  movedKeys?: TransferKey[],
+): boolean =>
+  [value, movedKeys].every(isArray) || (isArray(value) && isNil(movedKeys));
+export const transferPanelProps = {
+  data: {
+    type: Array as PropType<IData>,
+    default: (): IData => [],
+  },
+  optionRender: {
+    type: Function as PropType<(option: IData) => VNode | VNode[]>,
+  },
+  placeholder: String,
+  title: String,
+  filterable: Boolean,
+  enableAcSearch: Boolean,
+  format: {
+    type: Object as PropType<TransferFormat>,
+    default: (): TransferFormat => ({}),
+  },
+  filterMethod: {
+    type: Function as PropType<(query: string, item: IData) => boolean>,
+  },
+  defaultChecked: {
+    type: Array as PropType<Array<TransferKey>>,
+    default: (): Array<TransferKey> => [],
+  },
+  props: {
+    type: Object as PropType<TransferPropsAlias>,
+    default: (): TransferPropsAlias => ({
+      label: 'label',
+      key: 'key',
+      disabled: 'disabled',
+    }),
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+};
+export type TransferPanelProps = ExtractPropTypes<typeof transferPanelProps>;
+
+export const transferPanelEmits = {
+  [CHECKED_CHANGE_EVENT]: transferCheckedChangeFn,
+  [AC_SEARCH]: (query: string): string => query,
+};
+export type TransferPanelEmits = typeof transferPanelEmits;