@oinone/kunlun-vue-widget 6.3.9 → 6.4.1

package/src/state/global.ts

@@ -0,0 +1,13 @@
+import { reactive } from 'vue';
+
+export interface OioGlobalState {
+  fullscreen: boolean;
+}
+
+function createGlobalState(): OioGlobalState {
+  return reactive<OioGlobalState>({
+    fullscreen: false
+  });
+}
+
+export const globalState = createGlobalState();

package/src/state/index.ts

@@ -0,0 +1,3 @@
+export * from './typing';
+export * from './context';
+export * from './use-state';

package/src/state/method/action.ts

@@ -0,0 +1,83 @@
+import { DEFAULT_SLOT_NAME } from '@oinone/kunlun-dsl';
+import { reactive } from 'vue';
+import { Widget } from '../../basic';
+import { executeInvisible, InvisibleSupported } from '../../feature';
+import { hasActionBarViewState, hasRowActionBarViewState, OioActionBarState, OioAnyViewState } from '../typing';
+
+export function createActionBarState(
+  this: OioAnyViewState,
+  options: {
+    handle: string;
+  } & Partial<Omit<OioActionBarState, 'handle'>>
+) {
+  const state: OioActionBarState = {
+    actions: [],
+    visibleActions: [],
+    ...options
+  };
+  Object.defineProperty(state, 'visibleActions', {
+    get() {
+      return this.actions.filter((handle: string) => {
+        const widget = Widget.select<Widget & InvisibleSupported>(handle);
+        if (!widget) {
+          return false;
+        }
+        return !executeInvisible(widget);
+      });
+    }
+  });
+  return reactive(state);
+}
+
+export function getActionBarState(this: OioAnyViewState, rowIndex?: number): OioActionBarState | undefined {
+  if (rowIndex == null) {
+    const position = this.__position[this.__position.length - 1];
+    if (position == null) {
+      console.warn('Please call getActionBarState method in the vue lifecycle.');
+      return this.actionBar;
+    }
+    // fixme @zbh 20251205 rowIndex 无法准确设置，暂不可用
+    // const { slotName, rowIndex } = position;
+    const { slotName } = position;
+    if (!slotName || slotName === DEFAULT_SLOT_NAME) {
+      if (hasActionBarViewState(this)) {
+        return this.actionBar;
+      }
+    } else if (hasActionBarViewState(this)) {
+      return this.actionBars[slotName];
+    }
+  } else if (hasRowActionBarViewState(this)) {
+    return this.inlineActionBars?.[rowIndex];
+  }
+}
+
+export function pushAction(this: OioAnyViewState, handle: string, rowIndex?: number) {
+  const actionBarState = this.getActionBarState(rowIndex);
+  if (!actionBarState) {
+    return;
+  }
+  const { actions } = actionBarState;
+  if (!actions) {
+    return;
+  }
+  if (!actions.some((v) => v === handle)) {
+    actions.push(handle);
+    actionBarState.actions = [...actions];
+  }
+}
+
+export function popAction(this: OioAnyViewState, handle: string, rowIndex?: number) {
+  const actionBarState = this.getActionBarState(rowIndex);
+  if (!actionBarState) {
+    return;
+  }
+  const { actions } = actionBarState;
+  if (!actions) {
+    return;
+  }
+  const index = actions.findIndex((v) => v === handle);
+  if (index !== -1) {
+    actions.splice(index, 1);
+    actionBarState.actions = [...actions];
+  }
+}

package/src/state/method/field.ts

@@ -0,0 +1,56 @@
+import { hasFieldsViewState, isGalleryViewState, OioAnyViewState } from '../typing';
+
+interface FieldState {
+  fields?: string[];
+  fieldWidgets?: Record<string, string>;
+}
+
+function getFieldsState(viewState: OioAnyViewState, rowIndex?: number): FieldState | undefined {
+  // fixme @zbh 20251205 rowIndex 无法准确设置，暂不可用
+  // const position = viewState.__position[viewState.__position.length - 1];
+  // if (position == null) {
+  //   console.warn('Please call getFieldsState method in the vue lifecycle.');
+  //   if (hasFieldsViewState(viewState)) {
+  //     return viewState;
+  //   }
+  //   return undefined;
+  // }
+  // const { rowIndex } = position;
+  if (rowIndex == null) {
+    if (hasFieldsViewState(viewState)) {
+      return viewState;
+    }
+  } else if (isGalleryViewState(viewState)) {
+    return viewState.cards?.[rowIndex];
+  }
+}
+
+export function pushField(this: OioAnyViewState, handle: string, rowIndex?: number): void {
+  const fieldsState = getFieldsState(this, rowIndex);
+  if (!fieldsState) {
+    return;
+  }
+  const { fields, fieldWidgets } = fieldsState;
+  if (fields) {
+    if (!fields.some((v) => v === handle)) {
+      fields.push(handle);
+      fieldsState.fields = [...fields];
+    }
+  }
+}
+
+export function popField(this: OioAnyViewState, handle: string, rowIndex?: number): void {
+  const fieldsState = getFieldsState(this, rowIndex);
+  if (!fieldsState) {
+    return;
+  }
+  const { fields } = fieldsState;
+  if (!fields) {
+    return;
+  }
+  const index = fields.findIndex((v) => v === handle);
+  if (index !== -1) {
+    fields.splice(index, 1);
+    fieldsState.fields = [...fields];
+  }
+}

package/src/state/method/index.ts

@@ -0,0 +1,2 @@
+export * from './action';
+export * from './field';

package/src/state/typing.ts

@@ -0,0 +1,169 @@
+import { ViewType } from '@oinone/kunlun-meta';
+import { ButtonBizStyle, ButtonType } from '@oinone/kunlun-vue-ui-common';
+
+type StateEntity = {
+  readonly handle: string;
+
+  [key: string]: any;
+};
+
+export interface RenderPosition {
+  handle: string;
+  slotName?: string;
+  rowIndex?: number; // fixme @zbh 20251205 rowIndex 无法准确设置，暂不可用
+}
+
+export interface OioViewState extends StateEntity {
+  /**
+   * Vue生命周期时可能有值，用于获取渲染参数处理属性多态的问题
+   */
+  __position: RenderPosition[];
+
+  fullscreen: boolean;
+  viewType?: ViewType;
+  popupScene?: string;
+
+  createActionBarState(options: { handle: string } & Partial<Omit<OioActionBarState, 'handle'>>): OioActionBarState;
+
+  /**
+   * 此获取方法仅能用在Vue生命周期，否则无法准确获取真实的ActionBar状态变量
+   */
+  getActionBarState(rowIndex?: number): OioActionBarState | undefined;
+
+  pushField(handle: string, rowIndex?: number): void;
+
+  popField(handle: string, rowIndex?: number): void;
+
+  pushAction(handle: string, rowIndex?: number): void;
+
+  popAction(handle: string, rowIndex?: number): void;
+}
+
+export interface OioActionBarState extends StateEntity {
+  inline?: boolean;
+  actions: string[];
+  visibleActions: string[];
+  bizStyle?: string;
+
+  getActionBarBizStyle?(actionHandle: string): { type: ButtonType; bizStyle: ButtonBizStyle } | undefined;
+}
+
+export interface OioTableViewState extends OioViewState {
+  searchView?: string;
+  actionBar?: OioActionBarState;
+  actionBars?: Record<string, OioActionBarState>;
+  inlineActionBars?: OioActionBarState[];
+  table?: string;
+  fields?: string[];
+  fieldWidgets?: Record<string, string>;
+}
+
+export interface OioSearchViewState extends OioViewState {
+  search?: string;
+  fields?: string[];
+  fieldWidgets?: Record<string, string>;
+}
+
+export interface OioFormViewState extends OioViewState {
+  draftCode?: string;
+  actionBar?: OioActionBarState;
+  actionBars?: Record<string, OioActionBarState>;
+  form?: string;
+  fields?: string[];
+  fieldWidgets?: Record<string, string>;
+}
+
+export interface OioDetailViewState extends OioViewState {
+  actionBar?: OioActionBarState;
+  actionBars?: Record<string, OioActionBarState>;
+  detail?: string;
+  fields?: string[];
+  fieldWidgets?: Record<string, string>;
+}
+
+export interface OioCardState extends StateEntity {
+  titleProps?: Record<string, unknown>;
+  contentProps?: Record<string, unknown>;
+
+  fields?: string[];
+  fieldWidgets?: Record<string, string>;
+}
+
+export interface OioGalleryViewState extends OioViewState {
+  searchView?: string;
+  actionBar?: OioActionBarState;
+  inlineActionBars?: OioActionBarState[];
+  gallery?: string;
+  cards?: OioCardState[];
+}
+
+export interface OioTreeViewState extends OioViewState {
+  searchView?: string;
+  actionBar?: OioActionBarState;
+  tree?: string;
+  fields?: string[];
+  fieldWidgets?: Record<string, string>;
+}
+
+export type OioAnyViewState =
+  | OioTableViewState
+  | OioSearchViewState
+  | OioFormViewState
+  | OioDetailViewState
+  | OioGalleryViewState
+  | OioTreeViewState;
+
+export type OioListViewState = OioTableViewState | OioGalleryViewState;
+
+export type OioObjectViewState = OioFormViewState | OioDetailViewState | OioSearchViewState;
+
+export function isTableViewState(state: OioAnyViewState): state is OioTableViewState {
+  return state.viewType === ViewType.Table;
+}
+
+export function isSearchViewState(state: OioAnyViewState): state is OioSearchViewState {
+  return state.viewType === ViewType.Search;
+}
+
+export function isFormViewState(state: OioAnyViewState): state is OioFormViewState {
+  return state.viewType === ViewType.Form;
+}
+
+export function isDetailViewState(state: OioAnyViewState): state is OioDetailViewState {
+  return state.viewType === ViewType.Detail;
+}
+
+export function isGalleryViewState(state: OioAnyViewState): state is OioGalleryViewState {
+  return state.viewType === ViewType.Gallery;
+}
+
+export function isTreeViewState(state: OioAnyViewState): state is OioTreeViewState {
+  return state.viewType === ViewType.Tree;
+}
+
+export function isListViewState(state: OioAnyViewState): state is OioListViewState {
+  return state.viewType === ViewType.Table || state.viewType === ViewType.Gallery;
+}
+
+export function isObjectViewState(state: OioAnyViewState): state is OioObjectViewState {
+  return state.viewType === ViewType.Form || state.viewType === ViewType.Detail || state.viewType === ViewType.Search;
+}
+
+export function hasFieldsViewState(
+  state: OioAnyViewState
+): state is OioTableViewState | OioFormViewState | OioDetailViewState {
+  const { viewType } = state;
+  return !!viewType && (viewType === ViewType.Table || viewType === ViewType.Form || viewType === ViewType.Detail);
+}
+
+export function hasActionBarViewState(
+  state: OioAnyViewState
+): state is OioTableViewState | OioFormViewState | OioDetailViewState | OioGalleryViewState | OioTreeViewState {
+  const { viewType } = state;
+  return !!viewType && viewType !== ViewType.Search;
+}
+
+export function hasRowActionBarViewState(state: OioAnyViewState): state is OioTableViewState | OioGalleryViewState {
+  const { viewType } = state;
+  return !!viewType && (viewType === ViewType.Table || viewType === ViewType.Gallery);
+}

package/src/state/use-state.ts

@@ -0,0 +1,44 @@
+import { globalState, OioGlobalState } from './global';
+import { OioAnyViewState } from './typing';
+import { clearViewState, createViewState, getViewState, setViewState } from './view';
+
+export function useOioState(): {
+  globalState: OioGlobalState;
+  viewState: OioAnyViewState | undefined;
+
+  createViewState: (handle: string) => OioAnyViewState;
+  getViewState: (handle: string) => OioAnyViewState | undefined;
+  clearViewState: (handle: string) => OioAnyViewState | undefined;
+};
+
+export function useOioState(handle: string): {
+  globalState: OioGlobalState;
+  viewState: OioAnyViewState | undefined;
+
+  createViewState: () => OioAnyViewState;
+  getViewState: () => OioAnyViewState | undefined;
+  clearViewState: () => OioAnyViewState | undefined;
+};
+
+export function useOioState(handle?: string) {
+  if (handle) {
+    return {
+      globalState,
+      viewState: getViewState(handle),
+      createViewState: () => {
+        const state = createViewState(handle);
+        setViewState(state);
+        return state;
+      },
+      getViewState: () => getViewState(handle),
+      clearViewState: () => clearViewState(handle)
+    };
+  }
+  return {
+    globalState,
+    viewState: getViewState(),
+    createViewState,
+    getViewState,
+    clearViewState
+  };
+}

package/src/state/view.ts

@@ -0,0 +1,58 @@
+import { reactive } from 'vue';
+import { useInjectMetaContext } from './context';
+import { createActionBarState, getActionBarState, popAction, popField, pushAction, pushField } from './method';
+import { OioAnyViewState } from './typing';
+
+const viewStateStorage: Record<string, OioAnyViewState> = {};
+
+const viewStateMethods: Record<string, Function> = {
+  pushField,
+  popField,
+  createActionBarState,
+  getActionBarState,
+  pushAction,
+  popAction
+};
+
+export function createViewState(handle: string): OioAnyViewState {
+  const state = {
+    get handle() {
+      return handle;
+    },
+    fullscreen: false
+  } as OioAnyViewState;
+  state.__position = [];
+  const proxy = reactive<OioAnyViewState>(state);
+  for (const [method, fn] of Object.entries(viewStateMethods)) {
+    state[method] = fn.bind(proxy);
+  }
+  return proxy;
+}
+
+export function getViewState(handle?: string): OioAnyViewState | undefined {
+  if (!handle) {
+    handle = useInjectMetaContext()?.rootHandle.value;
+    if (!handle) {
+      console.warn('Invalid root handle.');
+      return undefined;
+    }
+  }
+  return viewStateStorage[handle];
+}
+
+export function setViewState(state: OioAnyViewState): void {
+  viewStateStorage[state.handle] = state;
+}
+
+export function clearViewState(handle?: string): OioAnyViewState | undefined {
+  if (!handle) {
+    handle = useInjectMetaContext()?.rootHandle.value;
+    if (!handle) {
+      console.warn('Invalid root handle.');
+      return undefined;
+    }
+  }
+  const state = viewStateStorage[handle];
+  delete viewStateStorage[handle];
+  return state;
+}