@ibiz-template/vue3-util 0.6.1-dev.0 → 0.6.1-dev.2

package/src/props/editor/switch.ts

@@ -1,23 +0,0 @@
-import { getEditorProps, getGridEditorCommonProps } from './common';
-
-/**
- * 获取开关的props
- *
- * @export
- * @template C
- * @returns {*}
- */
-export function getSwitchProps<C>() {
-  return { ...getEditorProps<C>(), value: [String, Number] };
-}
-
-/**
- * 获取表格步进器的props
- *
- * @export
- * @template C
- * @returns {*}
- */
-export function getGridSwitchProps<C>() {
-  return { ...getSwitchProps<C>(), ...getGridEditorCommonProps() };
-}

package/src/props/editor/text-box.ts

@@ -1,79 +0,0 @@
-import { getEditorProps, getGridEditorCommonProps } from './common';
-
-/**
- * 获取文本框的props
- *
- * @author lxm
- * @date 2022-11-01 19:11:12
- * @export
- * @template C
- * @returns {*}
- */
-export function getInputProps<C>() {
-  return { ...getEditorProps<C>(), value: [String, Number] };
-}
-
-/**
- * 获取表格文本框的props
- *
- * @author lxm
- * @date 2022-11-01 19:11:12
- * @export
- * @template C
- * @returns {*}
- */
-export function getGridInputProps<C>() {
-  return { ...getInputProps<C>(), ...getGridEditorCommonProps() };
-}
-
-/**
- * 获取数值框的props
- *
- * @author lxm
- * @date 2022-11-01 19:11:12
- * @export
- * @template C
- * @returns {*}
- */
-export function getInputNumberProps<C>() {
-  return { ...getEditorProps<C>(), value: Number };
-}
-
-/**
- * 获取表格数值框的props
- *
- * @author lxm
- * @date 2022-11-01 19:11:12
- * @export
- * @template C
- * @returns {*}
- */
-export function getGridInputNumberProps<C>() {
-  return { ...getInputNumberProps<C>(), ...getGridEditorCommonProps() };
-}
-
-/**
- * 获取ip框的props
- *
- * @author lxm
- * @date 2022-11-01 19:11:12
- * @export
- * @template C
- * @returns {*}
- */
-export function getInputIpProps<C>() {
-  return { ...getEditorProps<C>(), value: String };
-}
-
-/**
- * 获取表格ip框的props
- *
- * @author lxm
- * @date 2022-11-01 19:11:12
- * @export
- * @template C
- * @returns {*}
- */
-export function getGridInputIpProps<C>() {
-  return { ...getInputIpProps<C>(), ...getGridEditorCommonProps() };
-}

package/src/props/editor/upload.ts

@@ -1,27 +0,0 @@
-import { getEditorProps, getGridEditorCommonProps } from './common';
-
-/**
- * 获取上传的props
- *
- * @author lxm
- * @date 2022-11-01 19:11:12
- * @export
- * @template C
- * @returns {*}
- */
-export function getUploadProps<C>() {
-  return { ...getEditorProps<C>(), value: String };
-}
-
-/**
- * 获取表格上传的props
- *
- * @author lxm
- * @date 2022-11-01 19:11:12
- * @export
- * @template C
- * @returns {*}
- */
-export function getGridUploadProps<C>() {
-  return { ...getUploadProps<C>(), ...getGridEditorCommonProps() };
-}

package/src/props/index.ts

@@ -1,2 +0,0 @@
-export * from './common';
-export * from './editor';

package/src/types/index.d.ts

@@ -1,8 +0,0 @@
-import VueRouter from 'vue-router';
-
-declare module 'vue/types/vue' {
-  interface Vue {
-    $route: IData;
-    $router: VueRouter;
-  }
-}

package/src/use/click-outside/click-outside.ts

@@ -1,72 +0,0 @@
-import {
-  NOOP,
-  onClickOutside,
-  OnClickOutsideHandler,
-  OnClickOutsideOptions,
-  OnClickOutsideResult,
-} from '@ibiz-template/core';
-import { isNil } from 'ramda';
-import { onBeforeUnmount, Ref, watch } from 'vue';
-
-/**
- * 使用点击组件外部监听事件
- *
- * @author lxm
- * @date 2022-10-31 14:10:12
- * @export
- * @param {Ref} elRef 组件的ref对象
- * @param {OnClickOutsideHandler} handler 处理回调
- * @param {OnClickOutsideOptions} [options={}] 额外配置参数
- * @returns {*}  {OnClickOutsideResult}
- */
-export function useClickOutside(
-  elRef: Ref,
-  handler: OnClickOutsideHandler,
-  options: OnClickOutsideOptions = {},
-): OnClickOutsideResult {
-  let stop = NOOP;
-  let pause = NOOP;
-  let proceed = NOOP;
-
-  // 移除监听，清空方法
-  const destroy = (): void => {
-    stop();
-    stop = NOOP;
-    pause = NOOP;
-    proceed = NOOP;
-  };
-
-  watch(
-    elRef,
-    (newVal, oldVal) => {
-      if (newVal !== oldVal) {
-        if (isNil(newVal)) {
-          destroy();
-        } else {
-          const result = onClickOutside(
-            newVal?.$el || newVal,
-            handler,
-            options,
-          );
-          stop = result.stop;
-          pause = result.pause;
-          proceed = result.proceed;
-        }
-      }
-    },
-    { immediate: true },
-  );
-
-  // 组件销毁前销毁监听
-  onBeforeUnmount(() => {
-    if (stop !== NOOP) {
-      destroy();
-    }
-  });
-
-  return {
-    stop: () => stop(),
-    pause: () => pause(),
-    proceed: () => proceed(),
-  };
-}

package/src/use/control/index.ts

@@ -1 +0,0 @@
-export * from './use-control-controller/use-control-controller';

package/src/use/control/use-control-controller/use-control-controller.ts

@@ -1,153 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  ControlController,
-  IControlController,
-  IControlProvider,
-} from '@ibiz-template/runtime';
-import {
-  getCurrentInstance,
-  onActivated,
-  onBeforeUnmount,
-  onDeactivated,
-  reactive,
-  watch,
-} from 'vue';
-import { useForce, useProps } from '../../vue/vue';
-import { useCtx } from '../../util';
-
-/**
- * 监听并更新上下文和视图参数（引用不变）
- * @author lxm
- * @date 2023-05-25 01:48:14
- * @param {IData} props
- * @param {IViewController} view
- */
-function watchAndUpdateContextParams(
-  props: IData,
-  control: IControlController,
-): void {
-  watch(
-    () => ({ context: props.context, params: props.params }),
-    newVal => {
-      // 不改变引用的情况下，重置控制器里的上下文和视图参数。
-      // 重新计算上下文和视图参数
-      control.updateContextParams({ ...newVal });
-      ibiz.log.debug(`${control.model.id}的上下文或视图参数变更：`, newVal);
-    },
-  );
-}
-
-/**
- * 监听部件的props并更新部件state状态
- * 排除部分keys,如context,params
- * @author lxm
- * @date 2023-10-27 01:46:23
- * @param {IData} props
- * @param {IControlController} control
- */
-function watchAndUpdateState(
-  props: IData,
-  control: IControlController,
-  excludeFields: string[] = [],
-): void {
-  const excludeKeys = ['context', 'params', 'modelData', ...excludeFields];
-  watch(
-    () => {
-      const watchProps: IData = {};
-      Object.keys(props).forEach(key => {
-        if (!excludeKeys.includes(key)) {
-          watchProps[key] = props[key];
-        }
-      });
-      return watchProps;
-    },
-    (newVal, oldVal) => {
-      const changeProps: IData = {};
-      Object.keys(newVal).forEach(key => {
-        if (newVal[key] !== (oldVal || {})[key]) {
-          changeProps[key] = newVal[key];
-        }
-      });
-      ibiz.log.debug(`部件 [${control.model.name}] state 变更`, changeProps);
-      Object.keys(changeProps).forEach(key => {
-        if (changeProps[key] !== undefined) {
-          (control.state as any)[key] = changeProps[key];
-        }
-      });
-    },
-    { immediate: true },
-  );
-}
-
-export interface extraOptions {
-  /**
-   * 排除监听的props里的key
-   * @author lxm
-   * @date 2023-11-22 06:11:45
-   * @type {string[]}
-   */
-  excludePropsKeys: string[];
-}
-
-/**
- * 初始化部件控制器
- *
- * @author chitanda
- * @date 2022-08-15 17:08:47
- * @export
- * @template T
- * @param {() => T} fn
- * @return {*}  {T}
- */
-export function useControlController<T extends IControlController>(
-  fn: (...args: ConstructorParameters<typeof ControlController>) => T,
-  opts?: Partial<extraOptions>,
-): T {
-  // 获取上层组件的ctx
-  const ctx = useCtx();
-  // 获取 props
-  const props = useProps();
-  // 上下文里提前预告部件
-  ctx.evt.emit('onForecast', props.modelData.name!);
-
-  // 实例化部件控制器
-  const provider = props.provider as IControlProvider | undefined;
-  let c: T;
-  if (provider?.createController) {
-    // 如果适配器给了创建方法使用适配器的方法
-    c = provider.createController(
-      props.modelData,
-      props.context,
-      props.params,
-      ctx,
-    ) as T;
-  } else {
-    c = fn(props.modelData, props.context, props.params, ctx);
-  }
-
-  watchAndUpdateContextParams(props, c);
-  watchAndUpdateState(props, c, opts?.excludePropsKeys);
-
-  c.state = reactive(c.state);
-
-  onActivated(() => c.onActivated());
-
-  onDeactivated(() => c.onDeactivated());
-
-  // 挂载强制更新方法
-  c.force = useForce();
-
-  const vue = getCurrentInstance()!.proxy!;
-  c.evt.onAll((eventName: string, event: unknown) => {
-    vue.$emit(eventName.slice(2), event);
-  });
-
-  // vue组件级事件最早的抛出controller
-  vue.$emit('controllerAppear', c);
-
-  c.created();
-
-  // 卸载时销毁
-  onBeforeUnmount(() => c.destroyed());
-  return c;
-}

package/src/use/event/event.ts

@@ -1,57 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { listenJSEvent, NOOP } from '@ibiz-template/core';
-import { isNil } from 'ramda';
-import { onBeforeUnmount, Ref, watch } from 'vue';
-
-/**
- * 监听JS原生事件，返回cleanup回调，调用后删除该监听
- *
- * @author lxm
- * @date 2022-10-28 18:10:36
- * @export
- * @param {Ref} elRef 监听组件的ref
- * @param {string} eventName 监听事件名称
- * @param {(..._args: any[]) => any} listener 监听回调
- * @param {AddEventListenerOptions} options 额外参数
- * @returns {*}  {() => void}
- */
-export function useEventListener(
-  elRef: Ref,
-  eventName: string,
-  listener: (..._args: any[]) => any,
-  options: AddEventListenerOptions = {},
-): () => void {
-  let cleanup = NOOP;
-
-  watch(
-    elRef,
-    (newVal, oldVal) => {
-      if (newVal !== oldVal) {
-        if (isNil(newVal)) {
-          cleanup();
-          cleanup = NOOP;
-        } else {
-          cleanup = listenJSEvent(
-            newVal?.$el || newVal,
-            eventName,
-            listener,
-            options,
-          );
-        }
-      }
-    },
-    { immediate: true },
-  );
-
-  // 组件销毁前销毁监听
-  onBeforeUnmount(() => {
-    if (cleanup !== NOOP) {
-      cleanup();
-    }
-  });
-
-  return () => {
-    cleanup();
-  };
-}

package/src/use/focus-blur/focus-blur.ts

@@ -1,83 +0,0 @@
-import { OnClickOutsideResult } from '@ibiz-template/core';
-import { Ref, ref } from 'vue';
-import { useClickOutside } from '../click-outside/click-outside';
-import { useEventListener } from '../event/event';
-
-/**
- * 给指定元素添加聚焦和失焦事件
- * 点击指定元素时会触发聚焦事件
- * 已经聚焦之后，点击指定元素外部会触发失焦事件。
- * @author lxm
- * @date 2023-05-31 08:36:04
- * @export
- * @return {*}
- */
-export function useFocusAndBlur(
-  focus: () => void,
-  blur: () => void,
-): {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  componentRef: Ref<any>;
-  isFocus: Ref<boolean>;
-  doBlur: () => void;
-  pause: () => void;
-  stop: () => void;
-} {
-  /** 添加事件的元素ref */
-  const componentRef = ref();
-  const isFocus = ref(false);
-  let outsideFuns: OnClickOutsideResult;
-  /**
-   * 手动触发失焦事件
-   * @author lxm
-   * @date 2023-05-31 08:43:54
-   */
-  const doBlur = (): void => {
-    if (!isFocus.value) {
-      ibiz.log.debug('没有聚焦，不触发失焦');
-    }
-    blur();
-    outsideFuns.stop();
-    isFocus.value = false;
-  };
-
-  /**
-   * 暂停外部点击的监听
-   * 用于某些组件操作过程中会触发外部点击的场景
-   * @author lxm
-   * @date 2023-05-31 08:47:53
-   */
-  const pause = (): void => {
-    if (outsideFuns) {
-      outsideFuns.pause();
-    }
-  };
-
-  /**
-   * 暂停外部点击的监听
-   * 用于某些组件操作过程中会触发外部点击的场景
-   * @author lxm
-   * @date 2023-05-31 08:47:53
-   */
-  const stop = (): void => {
-    if (outsideFuns) {
-      outsideFuns.stop();
-    }
-  };
-
-  useEventListener(
-    componentRef,
-    'click',
-    _evt => {
-      if (!isFocus.value) {
-        outsideFuns = useClickOutside(componentRef, () => {
-          doBlur();
-        });
-        isFocus.value = true;
-        focus();
-      }
-    },
-    { capture: true }, // 捕获防止内部ui拦截点击事件
-  );
-  return { componentRef, isFocus, doBlur, pause, stop };
-}

package/src/use/index.ts

@@ -1,9 +0,0 @@
-export * from './click-outside/click-outside';
-export * from './control';
-export * from './event/event';
-export * from './focus-blur/focus-blur';
-export * from './namespace/namespace';
-export * from './route/route';
-export * from './util';
-export * from './view';
-export * from './vue/vue';

package/src/use/namespace/namespace.ts

@@ -1,14 +0,0 @@
-import { Namespace } from '@ibiz-template/core';
-
-/**
- * css 命名空间
- *
- * @author chitanda
- * @date 2022-09-06 15:09:04
- * @export
- * @param {string} block
- * @return {*}  {Namespace}
- */
-export function useNamespace(block: string): Namespace {
-  return new Namespace(block, ibiz.env.namespace);
-}

package/src/use/route/route.ts

@@ -1,47 +0,0 @@
-import { RouteLocationNormalizedLoaded, useRoute } from 'vue-router';
-import { ref, Ref, watch } from 'vue';
-import { RouteListener } from '../../util';
-
-/**
- * 获取路由查询参数
- *
- * @author chitanda
- * @date 2022-08-15 15:08:28
- * @export
- * @return {*}  {IParams}
- */
-export function useRouterQuery(): IParams {
-  const route = useRoute();
-  const { query } = route;
-  return query;
-}
-
-/**
- * 监听普通的key变更，在路由下次更新后再改变赋给新的RouteKey
- * 第一次默认值会直接赋给routeKey
- *
- * @export
- * @param {Ref<string>} originKey 监听的原始Ref
- * @param {RouteLocationNormalizedLoaded} route 路由
- * @param {Ref<string>} [routeKey] 预先提供的转换后的Ref
- * @returns {*}  {Ref<string>}
- */
-export function useRouteKey(
-  originKey: Ref<string>,
-  route: RouteLocationNormalizedLoaded,
-  routeKey?: Ref<string>,
-): Ref<string> {
-  if (!routeKey) {
-    routeKey = ref('');
-  }
-  routeKey.value = originKey.value;
-  const routeListener = new RouteListener(route);
-  watch(originKey, (newVal, oldVal) => {
-    if (newVal !== oldVal) {
-      routeListener.nextChange(() => {
-        routeKey!.value = newVal;
-      });
-    }
-  });
-  return routeKey;
-}

package/src/use/util/index.ts

@@ -1,26 +0,0 @@
-import { CTX, IMobViewController } from '@ibiz-template/runtime';
-import { inject } from 'vue';
-
-/**
- * 获取视图上下文环境对象
- *
- * @author chitanda
- * @date 2023-06-16 15:06:16
- * @export
- * @return {*}  {CTX}
- */
-export function useCtx(): CTX {
-  return inject('ctx') as CTX;
-}
-
-/**
- * 获取移动端视图上下文环境对象
- *
- * @author chitanda
- * @date 2023-06-16 16:06:51
- * @export
- * @return {*}  {CTX<IMobViewController>}
- */
-export function useMobCtx(): CTX<IMobViewController> {
-  return inject('ctx') as CTX;
-}

package/src/use/view/index.ts

@@ -1 +0,0 @@
-export { useViewController } from './use-view-controller/use-view-controller';