@oinone/kunlun-vue-admin-base 6.3.9 → 6.4.0

package/src/view/view-control/card-col-control/CardColControlWidget.ts

@@ -0,0 +1,33 @@
+import { SPI } from '@oinone/kunlun-spi';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { BaseElementWidget } from '../../../basic';
+import DefaultCardColControl from './DefaultCardColControl.vue';
+
+@SPI.ClassFactory(
+  BaseElementWidget.Token({
+    widget: 'CardColControl'
+  })
+)
+export class CardColControlWidget extends BaseElementWidget {
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(DefaultCardColControl);
+    return this;
+  }
+
+  /**
+   * 一行几列（设计器配置）
+   * @see {@link GalleryWidget}
+   */
+  @Widget.Reactive()
+  @Widget.Inject()
+  protected cols!: number;
+
+  /**
+   * 设置一行几列
+   * @see {@link GalleryWidget}
+   */
+  @Widget.Method()
+  @Widget.Inject()
+  public setCardCols!: (cols: number) => void;
+}

package/src/view/view-control/card-col-control/DefaultCardColControl.vue

@@ -0,0 +1,125 @@
+<template>
+  <a-popover
+    overlay-class-name="oio-popover default-view-control-popover"
+    trigger="click"
+    placement="bottomRight"
+    :visible="visible"
+    @visible-change="onVisibleChange"
+  >
+    <template #content>
+      <div class="default-card-col-control">
+        <div class="default-card-col-control-input">
+          <div class="default-card-col-control-title">{{ $translate('一行展示卡片数量') }}</div>
+          <oio-input-number v-model:value="internalCols"></oio-input-number>
+        </div>
+
+        <div class="default-card-col-control-footer">
+          <oio-button type="primary" @click="onSure">确定</oio-button>
+          <oio-button @click="onCancel">取消</oio-button>
+        </div>
+      </div>
+    </template>
+    <div class="default-view-control-item default-card-col-control">
+      <a-tooltip placement="bottom" class="oio-tooltip" v-model:visible="tooltipStatus">
+        <template #title>
+          <span>{{ $translate('行数量切换') }}</span>
+        </template>
+        <oio-icon size="16" icon="oinone-card-outlined" @click="visible = true"></oio-icon>
+      </a-tooltip>
+    </div>
+  </a-popover>
+</template>
+
+<script lang="ts">
+import { OioButton, OioIcon, OioInputNumber } from '@oinone/kunlun-vue-ui-antd';
+import { Popover as APopover } from 'ant-design-vue';
+import { toNumber } from 'lodash-es';
+import { defineComponent, PropType, ref } from 'vue';
+
+export default defineComponent({
+  name: 'DefaultCardColControl',
+  components: { APopover, OioIcon, OioInputNumber, OioButton },
+  props: {
+    cols: {
+      type: Number,
+      default: 4
+    },
+    setCardCols: {
+      type: Function as PropType<(cols: number) => void>
+    }
+  },
+  setup(props) {
+    const internalCols = ref<number>();
+    const visible = ref(false);
+
+    const tooltipStatus = ref(false);
+    const onVisibleChange = (val) => {
+      visible.value = val;
+      if (val) {
+        tooltipStatus.value = false;
+        internalCols.value = props.cols;
+      }
+    };
+
+    const onCancel = () => {
+      visible.value = false;
+    };
+
+    const onSure = () => {
+      if (!internalCols.value) {
+        return;
+      }
+      const val = toNumber(internalCols.value);
+      if (Number.isNaN(val)) {
+        console.error('Invalid cols value.', internalCols.value);
+        return;
+      }
+      props.setCardCols?.(val);
+      onCancel();
+    };
+
+    return {
+      internalCols,
+      visible,
+      tooltipStatus,
+      onCancel,
+      onVisibleChange,
+      onSure
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+.default-card-col-control {
+  .default-card-col-control-input {
+    padding: var(--oio-padding-md);
+  }
+
+  .default-card-col-control-title {
+    margin-bottom: var(--oio-margin);
+  }
+
+  .default-card-col-control-footer {
+    padding: var(--oio-padding-md);
+    border-top: 1px solid var(--oio-border-color);
+
+    .oio-button {
+      margin-right: var(--oio-margin-md);
+      line-height: var(--oio-line-height-sm);
+      padding: 2px var(--oio-padding-sm);
+      height: auto;
+      text-align: center;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &.ant-btn > span {
+        font-size: var(--oio-font-size-sm);
+        line-height: unset;
+      }
+    }
+  }
+}
+</style>

package/src/view/view-control/full-screen-control/DefaultFullScreenControl.vue

@@ -0,0 +1,28 @@
+<template>
+  <oio-full-screen :value="fullScreen" @change="switchFullScreen" />
+</template>
+
+<script lang="ts">
+import { useOioState } from '@oinone/kunlun-vue-widget';
+import { computed, defineComponent } from 'vue';
+import { OioFullScreen } from '../../../components';
+
+export default defineComponent({
+  name: 'DefaultFullScreenControl',
+  components: {
+    OioFullScreen
+  },
+  setup() {
+    const { viewState } = useOioState();
+
+    return {
+      fullScreen: computed(() => !!viewState?.fullscreen),
+      switchFullScreen: (val: boolean) => {
+        if (viewState) {
+          viewState.fullscreen = val;
+        }
+      }
+    };
+  }
+});
+</script>

package/src/view/view-control/full-screen-control/FullScreenControlWidget.ts

@@ -0,0 +1,17 @@
+import { SPI } from '@oinone/kunlun-spi';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { BaseElementWidget } from '../../../basic';
+import DefaultFullScreenControl from './DefaultFullScreenControl.vue';
+
+@SPI.ClassFactory(
+  BaseElementWidget.Token({
+    widget: 'FullScreenControl'
+  })
+)
+export class FullScreenControlWidget extends BaseElementWidget {
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(DefaultFullScreenControl);
+    return this;
+  }
+}

package/src/view/view-control/group-control/DefaultGroupControl.vue

@@ -0,0 +1,88 @@
+<template>
+  <a-popover
+    overlay-class-name="oio-popover default-view-control-popover"
+    trigger="click"
+    placement="bottomRight"
+    destroy-tooltip-on-hide
+    :visible="state.visible"
+    @visibleChange="onVisibleChange"
+  >
+    <template #content>
+      <sortable-group
+        title="添加分组"
+        sure-text="确定"
+        field-key="field"
+        direction-key="direction"
+        :list="groupList"
+        :model-fields="fieldOptions"
+        @change="onEnter"
+      ></sortable-group>
+    </template>
+    <div class="default-view-control-item default-view-control-group">
+      <a-tooltip placement="bottom" class="oio-tooltip" v-model:visible="tooltipStatus">
+        <template #title>
+          <span>{{ $translate('分组') }}</span>
+        </template>
+        <oio-icon v-if="groupList.length" size="16" icon="oinone-ungroup-outlined"></oio-icon>
+        <oio-icon v-else size="16" icon="oinone-group-outlined"></oio-icon>
+      </a-tooltip>
+    </div>
+  </a-popover>
+</template>
+
+<script lang="ts">
+import { GroupingField } from '@oinone/kunlun-engine';
+import { OioIcon } from '@oinone/kunlun-vue-ui-antd';
+import { Tooltip as ATooltip } from 'ant-design-vue';
+import { defineComponent, PropType, reactive, ref } from 'vue';
+import { SortableGroup, SortableGroupOption } from '../../../components';
+
+export default defineComponent({
+  name: 'DefaultGroupControl',
+  components: { SortableGroup, OioIcon, ATooltip },
+  props: {
+    groupList: {
+      type: Array as PropType<GroupingField[]>,
+      default: () => []
+    },
+    fieldOptions: {
+      type: Array as PropType<SortableGroupOption[]>,
+      default: () => []
+    },
+    onGroupChange: {
+      type: Function as PropType<(groupList: GroupingField[]) => void>
+    },
+    onOpen: {
+      type: Function
+    }
+  },
+  setup(props) {
+    const state = reactive({
+      visible: false
+    });
+
+    const tooltipStatus = ref(false);
+
+    const onVisibleChange = (visible: boolean) => {
+      state.visible = visible;
+      if (visible) {
+        tooltipStatus.value = false;
+        props.onOpen?.();
+      }
+    };
+
+    const onEnter = (groupList: GroupingField[]) => {
+      props.onGroupChange?.(groupList);
+      state.visible = false;
+    };
+
+    return {
+      state,
+      tooltipStatus,
+
+      onVisibleChange,
+      onEnter
+    };
+  }
+});
+</script>

package/src/view/view-control/group-control/GroupControlWidget.ts

@@ -0,0 +1,87 @@
+import { GroupingField, isAllowGrouping } from '@oinone/kunlun-engine';
+import { SPI } from '@oinone/kunlun-spi';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { BaseElementWidget } from '../../../basic';
+import { SortableGroupOption } from '../../../components';
+import DefaultGroupControl from './DefaultGroupControl.vue';
+
+type GroupingFieldOption = GroupingField & { title?: string };
+
+@SPI.ClassFactory(
+  BaseElementWidget.Token({
+    widget: 'GroupControl'
+  })
+)
+export class GroupControlWidget extends BaseElementWidget {
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(DefaultGroupControl);
+    return this;
+  }
+
+  /**
+   * 分组数据
+   * @see {@link BaseTableWidget#groupList}
+   */
+  @Widget.Reactive()
+  @Widget.Inject('groupList')
+  protected parentGroupList: GroupingField[] | undefined;
+
+  @Widget.Reactive()
+  protected groupList: GroupingFieldOption[] | undefined;
+
+  @Widget.Reactive()
+  protected options: SortableGroupOption[] = [];
+
+  /**
+   * 修改分组
+   * @see {@link BaseTableWidget#onGroupChange}
+   */
+  @Widget.Method()
+  @Widget.Inject()
+  protected onGroupChange!: (groupList: GroupingField[]) => void;
+
+  @Widget.Method()
+  protected onOpen() {
+    this.groupList = this.getGroupList();
+  }
+
+  protected getGroupList(): GroupingFieldOption[] | undefined {
+    return this.parentGroupList?.map((sort) => {
+      const { field: sortField } = sort;
+      const field = this.fieldOptions.find((v) => v.data === sortField);
+      return {
+        ...sort,
+        title: field?.label
+      };
+    });
+  }
+
+  @Widget.Reactive()
+  protected get fieldOptions(): SortableGroupOption[] {
+    return this.options;
+  }
+
+  protected mounted() {
+    const model = this.rootRuntimeContextNullable?.model.model;
+    if (!model) {
+      return;
+    }
+    const options: SortableGroupOption[] = [];
+    const { modelFields } = this.model;
+    for (const modelField of modelFields || []) {
+      const { invisible } = modelField;
+      if (invisible === true) {
+        continue;
+      }
+      if (isAllowGrouping(modelField)) {
+        options.push({
+          data: modelField.data,
+          name: modelField.name,
+          label: modelField.label || modelField.displayName || modelField.data
+        });
+      }
+    }
+    this.options = options;
+  }
+}

package/src/view/view-control/index.ts

@@ -0,0 +1,7 @@
+export * from './sort-control/SortControlWidget';
+export * from './group-control/GroupControlWidget';
+export * from './line-height-control/LineHeightControlWidget';
+export * from './full-screen-control/FullScreenControlWidget';
+export * from './keyboard-shortcut/KeyboardShortcutWidget';
+export * from './card-col-control/CardColControlWidget';
+export * from './ViewControlWidget';

package/src/view/view-control/keyboard-shortcut/DefaultKeyboardShortcut.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="default-view-control-item default-view-control-keybard-shortcut">
+    <a-popover
+      trigger="click"
+      placement="bottomRight"
+      destroy-tooltip-on-hide
+      :visible="visible"
+      overlay-class-name="table-key-board-shortcut-popover oio-popover"
+      @update:visible="onUpdateVisible"
+    >
+      <template #default>
+        <a-tooltip placement="bottom" class="oio-tooltip" v-model:visible="tooltipVisible">
+          <template #title>
+            <span>{{ $translate('快捷键') }}</span>
+          </template>
+          <oio-icon size="16" icon="oinone-shortcutkey-outlined"></oio-icon>
+        </a-tooltip>
+      </template>
+      <template #content>
+        <div class="table-keyboard-shortcut-inner">
+          <div class="shortcut-title">{{ $translate('快捷键') }}</div>
+          <div class="shortcut-content">
+            <oio-row class="shortcut-header">
+              <oio-col :span="12">
+                <span class="shortcut-header-title">{{ $translate('操作') }}</span>
+              </oio-col>
+              <oio-col :span="12">
+                <span class="shortcut-header-title">{{ $translate('快捷键') }}</span>
+              </oio-col>
+            </oio-row>
+
+            <oio-row v-for="item in keyboardConfigs" :key="item.label" class="shortcut-item">
+              <oio-col :span="12">
+                <span class="shortcut-item-title">{{ $translate(item.label) }}</span>
+              </oio-col>
+              <oio-col :span="12">
+                <div class="shortcut-key">
+                  <div class="shortcut-key-item" v-for="(key, index) in item.keyCodes" :key="key">
+                    <div class="shortcut-key-item-label">{{ key }}</div>
+                    <div v-if="index !== item.keyCodes.length - 1">+</div>
+                  </div>
+                </div>
+              </oio-col>
+            </oio-row>
+          </div>
+          <div class="shortcut-footer-desc">
+            <div>{{ $translate('1.以上可编辑单元格的快捷键，仅对表头带“编辑图标”的单元格生效') }}</div>
+            <div>
+              {{
+                $translate(
+                  '2.整行编辑完成后，单元格内所有可编辑数据将统一提交;若在编辑过程中按下Enter 键本行中已编辑但尚未提交的数据也会同步提交'
+                )
+              }}
+            </div>
+            <div>{{ $translate('3.若在编辑过程中按下 ESC 键，本行内已编辑但尚未提交的数据将被一井丢弃') }}</div>
+          </div>
+        </div>
+      </template>
+    </a-popover>
+  </div>
+</template>
+<script lang="ts">
+import { ButtonType, OioButton, OioCol, OioIcon, OioRow } from '@oinone/kunlun-vue-ui-antd';
+import { Popover as APopover, Tooltip as ATooltip } from 'ant-design-vue';
+import { defineComponent, PropType, ref } from 'vue';
+
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    keyboardConfigs: {
+      type: Array as PropType<{ label: string; keyCodes: string[] }[]>,
+      default: () => []
+    }
+  },
+  components: {
+    APopover,
+    OioButton,
+    OioRow,
+    OioCol,
+    OioIcon,
+    ATooltip
+  },
+  setup() {
+    const visible = ref(false);
+
+    const tooltipVisible = ref(false);
+
+    const onUpdateVisible = (val: boolean) => {
+      visible.value = val;
+      if (val) {
+        tooltipVisible.value = false;
+      }
+    };
+
+    return {
+      visible,
+      onUpdateVisible,
+      tooltipVisible,
+      ButtonType
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+.table-key-board-shortcut-popover {
+  .ant-popover-inner-content {
+    padding: 0;
+  }
+
+  .table-keyboard-shortcut-inner {
+    width: 480px;
+    box-sizing: border-box;
+
+    .shortcut-title {
+      padding: var(--oio-padding);
+      box-sizing: border-box;
+      border-bottom: 1px solid var(--oio-border-color);
+      font-size: var(--oio-font-size-lg);
+      color: #333333;
+      font-weight: bold;
+    }
+
+    .shortcut-content {
+      padding: var(--oio-padding);
+      box-sizing: border-box;
+
+      .shortcut-header {
+        margin-bottom: var(--oio-margin);
+
+        .shortcut-header-title {
+          color: var(--oio-text-color);
+        }
+      }
+
+      .shortcut-item {
+        margin-bottom: var(--oio-margin);
+        color: var(--oio-text-color-secondary);
+
+        .shortcut-key {
+          display: flex;
+          align-items: center;
+
+          .shortcut-key-item {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            margin-right: 4px;
+
+            .shortcut-key-item-label {
+              padding: 4px 3px;
+              border-radius: 2px;
+              background-color: #f4f4f5;
+            }
+          }
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    .shortcut-footer-desc {
+      box-sizing: border-box;
+      padding: var(--oio-padding-sm) var(--oio-padding) var(--oio-padding) var(--oio-padding);
+      font-size: var(--oio-font-size-sm);
+      color: var(--oio-disabled-color);
+    }
+  }
+}
+</style>

package/src/view/view-control/keyboard-shortcut/KeyboardShortcutWidget.ts

@@ -0,0 +1,66 @@
+import { KeyboardConfig, TableKeyboardConfig } from '@oinone/kunlun-engine';
+import { SPI } from '@oinone/kunlun-spi';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { BaseElementWidget } from '../../../basic';
+import DefaultKeyboardShortcut from './DefaultKeyboardShortcut.vue';
+
+@SPI.ClassFactory(
+  BaseElementWidget.Token({
+    widget: 'KeyboardShortcut'
+  })
+)
+export class KeyboardShortcutWidget extends BaseElementWidget {
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(DefaultKeyboardShortcut);
+    return this;
+  }
+
+  @Widget.Reactive()
+  @Widget.Inject('keyboardConfig')
+  protected tableKeyboardConfig: TableKeyboardConfig | undefined;
+
+  @Widget.Reactive()
+  public get keyboardConfigs() {
+    const configs: { label: string; keyCodes: string[] }[] = [];
+    const { tableKeyboardConfig } = this;
+    if (!tableKeyboardConfig) {
+      return configs;
+    }
+    const { left, right, up, down, enter, cancel } = tableKeyboardConfig;
+    const pushConfig = (config: KeyboardConfig) => {
+      const keyCodes: string[] = [];
+      const { desc, ctrl, shift, alt, key } = config;
+      if (ctrl) {
+        keyCodes.push('Ctrl');
+      }
+      if (shift) {
+        keyCodes.push('Shift');
+      }
+      if (alt) {
+        keyCodes.push('Alt');
+      }
+      keyCodes.push(key);
+      configs.push({ label: desc || '未命名快捷键', keyCodes });
+    };
+    if (left) {
+      pushConfig(left);
+    }
+    if (right) {
+      pushConfig(right);
+    }
+    if (up) {
+      pushConfig(up);
+    }
+    if (down) {
+      pushConfig(down);
+    }
+    if (enter) {
+      pushConfig(enter);
+    }
+    if (cancel) {
+      pushConfig(cancel);
+    }
+    return configs;
+  }
+}

package/src/view/view-control/line-height-control/DefaultLineHeightControl.vue

@@ -0,0 +1,26 @@
+<template>
+  <table-line-height :value="lineHeightType" @change="setLineHeightType" />
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { TableLineHeight } from '../../../components';
+import { TableLineHeightEnum } from '../../../typing';
+
+export default defineComponent({
+  name: 'DefaultLineHeightControl',
+  components: {
+    TableLineHeight
+  },
+  props: {
+    lineHeightType: {
+      type: String as PropType<TableLineHeightEnum>
+    },
+    setLineHeightType: {
+      type: Function as PropType<(lineHeightType: TableLineHeightEnum) => void>
+    }
+  }
+});
+</script>
+
+<style lang="scss"></style>

package/src/view/view-control/line-height-control/LineHeightControlWidget.ts

@@ -0,0 +1,39 @@
+import { SPI } from '@oinone/kunlun-spi';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { BaseElementWidget } from '../../../basic';
+import { TableLineHeightEnum } from '../../../typing';
+import DefaultLineHeightControl from './DefaultLineHeightControl.vue';
+
+@SPI.ClassFactory(
+  BaseElementWidget.Token({
+    widget: 'LineHeightControl'
+  })
+)
+export class LineHeightControlWidget extends BaseElementWidget {
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(DefaultLineHeightControl);
+    return this;
+  }
+
+  /**
+   * 当前行高类型
+   * @see {@link BaseTableWidget}
+   */
+  @Widget.Reactive()
+  protected get lineHeightType(): TableLineHeightEnum | undefined {
+    return this.viewState?.lineHeightType as TableLineHeightEnum | undefined;
+  }
+
+  /**
+   * 修改行高类型
+   * @see {@link BaseTableWidget}
+   */
+  @Widget.Reactive()
+  protected setLineHeightType(value: TableLineHeightEnum): void {
+    const { viewState } = this;
+    if (viewState) {
+      viewState.lineHeightType = value;
+    }
+  }
+}