@farris/cli 2.0.0-beta.7 → 2.0.0-beta.8

package/templates/lib/components/common/src/compositions/use-bem/index.ts

@@ -0,0 +1,46 @@
+import { isArray, camelToKebabCase } from '../../utils';
+
+export const useBem = (name: string) => {
+
+  const snakeCaseName = camelToKebabCase(name);
+
+  /**
+   * @param element 元素类名
+   * @returns .block__element
+   */
+  const getElementClass = (element?: string | string[])=>{
+    if(!element) {
+      return snakeCaseName;
+    }
+    const elementClass = isArray(element) ? element.join('__') : element;
+    return `${snakeCaseName}__${elementClass}`;
+  };
+
+  /**
+   * @param modifier 修饰符
+   * @param element 元素类名
+   * @returns .block[__element]--modifier
+   */
+  const getModifierClass = (modifier: string, element?: string | string[])=>{
+    const modifierClass = modifier ? `--${modifier}` : '';
+    if(element){
+      return getElementClass(element) + modifierClass;
+    }
+    return snakeCaseName + modifierClass;
+  };
+
+  /**
+   * @param element 元素类名
+   * @param modifier 修饰符
+   * @returns .block__element--modifier
+   */
+  const bem = (element?: string | string[], modifier?: string) => {
+    return modifier ? getModifierClass(modifier, element) : getElementClass(element);
+  };
+
+  return {
+    bem,
+    getElementClass,
+    getModifierClass
+  };
+};

package/templates/lib/components/common/src/compositions/use-click-away/index.ts

@@ -0,0 +1,40 @@
+import { Ref, unref } from 'vue';
+import { useEventListener } from '../use-event-listener';
+import { inBrowser, initNodePath } from '../../utils';
+
+export type ClickAwayOptions = {
+  eventName?: string
+  active?: Ref<boolean> | boolean
+}
+
+export function useClickAway(
+  target: Element | Ref<Element | undefined>,
+  listener: EventListener,
+  options: ClickAwayOptions = {},
+) {
+  if (!inBrowser) {
+    return;
+  }
+
+  const { eventName = 'click', active = true } = options;
+
+  const isOutsideElement = (event: Event)=>{
+    const _target = unref(target);
+    if(!_target){
+      return false;
+    }
+    // 多重条件，防止节点被删除后误触发
+    return document.contains(event.target as Node) && !_target.contains(event.target as Node);
+  };
+
+  const onClick = (event: Event) => {
+    const _active = unref(active);
+
+    const enableListener = _active && isOutsideElement(event);
+    
+    if (enableListener) {
+      listener(event);
+    }
+  };
+  useEventListener(eventName, onClick, { target: document });
+}

package/templates/lib/components/common/src/compositions/use-context/use-children-contexts.ts

@@ -0,0 +1,40 @@
+import { provide, InjectionKey } from 'vue';
+import { ParentProvideValue } from '../types';
+
+export function useChildrenContexts<ParentContext, ChildContext>(
+  parentKey: InjectionKey<ParentProvideValue<ParentContext, ChildContext>>,
+  parentContext?: ParentContext
+): { childContexts: Array<ChildContext> } {
+  const childContexts: Array<ChildContext> = [];
+
+  /**
+   * 注册子上下文
+   */
+  function addChild(childContext: ChildContext): void {
+    childContexts.push(childContext);
+  }
+
+  /**
+   * 移除子上下文
+   */
+  function removeChild(childContext: ChildContext): void {
+    const childIndex = childContexts.indexOf(childContext);
+    if (childIndex === -1) {
+      return;
+    }
+    childContexts.splice(childIndex, 1);
+  }
+
+  // 注入父上下文
+  const provideValue: ParentProvideValue<ParentContext, ChildContext> = {
+    addChild,
+    removeChild,
+    childContexts,
+    parentContext
+  };
+  provide(parentKey, provideValue);
+
+  return {
+    childContexts
+  };
+}

package/templates/lib/components/common/src/compositions/use-context/use-parent-context.ts

@@ -0,0 +1,24 @@
+import { inject, onUnmounted, InjectionKey } from 'vue';
+import { ParentProvideValue } from '../types';
+
+export function useParentContext<ParentContext, ChildContext>(
+  key: InjectionKey<ParentProvideValue<ParentContext, ChildContext>>,
+  childContext?: ChildContext
+): { parentContext: ParentContext } {
+  const parent = inject(key, null);
+  if (!parent) {
+    return {
+      parentContext: null
+    };
+  }
+
+  const { addChild, removeChild, parentContext } = parent;
+
+  addChild(childContext);
+  onUnmounted(() => {
+    removeChild(childContext);
+  });
+  return {
+    parentContext
+  };
+}

package/templates/lib/components/common/src/compositions/use-event-listener/index.ts

@@ -0,0 +1,45 @@
+import { onMountedOrActivated, inBrowser } from '../../utils';
+import { unref, onUnmounted, onDeactivated, Ref } from 'vue';
+
+export const supportsPassive = false;
+
+export type UseEventListenerOptions = {
+  target?: EventTarget | Ref<EventTarget | undefined>;
+  capture?: boolean;
+  passive?: boolean;
+  immediate?: boolean;
+};
+
+export function useEventListener(type: string, listener: EventListener, options: UseEventListenerOptions = {}) {
+  if (!inBrowser) {
+    return;
+  }
+
+  const { target = window, passive = false, capture = false, immediate = false } = options;
+  let attached = false;
+
+  const add = () => {
+    const element = unref(target);
+
+    if (element && !attached) {
+      element.addEventListener(type, listener, supportsPassive ? {
+        capture,
+        passive
+      } : capture);
+      attached = true;
+    }
+  };
+
+  const remove = () => {
+    const element = unref(target);
+
+    if (element && attached) {
+      element.removeEventListener(type, listener, capture);
+      attached = false;
+    }
+  };
+
+  immediate ? add() : onMountedOrActivated(add);
+  onUnmounted(remove);
+  onDeactivated(remove);
+}

package/templates/lib/components/common/src/compositions/use-expose/index.ts

@@ -0,0 +1,9 @@
+import { getCurrentInstance } from 'vue';
+
+// expose public api
+export function useExpose(apis: Record<string, any>) {
+  const instance = getCurrentInstance();
+  if (instance) {
+    Object.assign(instance.proxy, apis);
+  }
+}

package/templates/lib/components/common/src/compositions/use-lay-render/index.ts

@@ -0,0 +1,17 @@
+import { ref, watch, WatchSource } from 'vue';
+
+export function useLazyRender(show: WatchSource<boolean | undefined>) {
+  const inited = ref(false);
+
+  watch(
+    show,
+    (value) => {
+      if (value) {
+        inited.value = value;
+      }
+    },
+    { immediate: true }
+  );
+
+  return (render: () => JSX.Element) => () => (inited.value ? render() : null);
+}

package/templates/lib/components/common/src/compositions/use-link/index.ts

@@ -0,0 +1,14 @@
+import { inject, provide } from "vue";
+
+export const useLink = (key: string) => {
+  const setParent = <T>(context: T)=>{
+    provide(key, context);
+  };
+  const getParent = <T>(defaultValue?: any): T=>{
+    return inject(key, defaultValue);
+  };
+  return {
+    setParent,
+    getParent
+  };
+};

package/templates/lib/components/common/src/compositions/use-lock-scroll/index.ts

@@ -0,0 +1,25 @@
+let count = 0;
+
+const CLASSNAME = 'fm-overflow-hidden';
+
+export function useLockScroll(shouldLock: () => boolean) {
+  const lock = () => {
+    if (shouldLock()) {
+      if (!count) {
+        document.body.classList.add(CLASSNAME);
+      }
+      count++;
+    }
+  };
+
+  const unlock = () => {
+    if (shouldLock() && count) {
+      count--;
+      if (!count) {
+        document.body.classList.remove(CLASSNAME);
+      }
+    }
+  };
+
+  return [lock, unlock];
+}

package/templates/lib/components/common/src/compositions/use-long-press/index.ts

@@ -0,0 +1,141 @@
+/* eslint-disable no-use-before-define */
+import { ObjectDirective } from 'vue';
+
+const DEFAULT_DELAY = 600;
+const DEFAULT_THRESHOLD = 10;
+
+export interface OnLongPressModifiers {
+  stop?: boolean;
+  once?: boolean;
+  prevent?: boolean;
+  capture?: boolean;
+  self?: boolean;
+  interceptClick?: boolean;
+}
+
+export interface OnLongPressOptions {
+
+  delay?: number;
+
+  modifiers?: OnLongPressModifiers;
+
+  distanceThreshold?: number | false;
+}
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+function addEventListener(el: HTMLElement, event: string, listener: any, options: any): () => void {
+  el.addEventListener(event, listener, options);
+  return () => el.removeEventListener(event, listener, options);
+}
+
+export function onLongPress(
+  target: HTMLElement,
+  handler: (evt: TouchEvent) => void,
+  options?: OnLongPressOptions,
+) {
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  let posStart: Position | undefined;
+
+  function clear() {
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = undefined;
+    }
+    posStart = undefined;
+  }
+
+  function onStart(ev: TouchEvent) {
+    if (options?.modifiers?.self && ev.target !== target) {
+      return;
+    }
+
+    clear();
+
+    options?.modifiers?.prevent && ev.preventDefault();
+    options?.modifiers?.stop && ev.stopPropagation();
+
+    posStart = {
+      x: ev.touches[0].pageX,
+      y: ev.touches[0].pageY,
+    };
+    timeout = setTimeout(
+      () => {
+        timeout = undefined;
+        handler(ev);
+      },
+      options?.delay ?? DEFAULT_DELAY,
+    );
+  }
+
+  function onMove(ev: TouchEvent) {
+    if (options?.modifiers?.self && ev.target !== target) {
+      return;
+    }
+
+    if (!posStart || options?.distanceThreshold === false) {
+      return;
+    }
+
+    options?.modifiers?.prevent && ev.preventDefault();
+    options?.modifiers?.stop && ev.stopPropagation();
+
+    const dx = ev.touches[0].pageX - posStart.x;
+    const dy = ev.touches[0].pageY - posStart.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    if (distance >= (options?.distanceThreshold ?? DEFAULT_THRESHOLD)) {
+      clear();
+    }
+  }
+
+  function onEnd() {
+    if (options?.modifiers?.interceptClick && !timeout) {
+      addAutoDisappearMask();
+    }
+    clear();
+  }
+
+  const listenerOptions = {
+    capture: options?.modifiers?.capture,
+    once: options?.modifiers?.once,
+  };
+  const cleanup = [
+    addEventListener(target, 'touchstart', onStart, listenerOptions),
+    addEventListener(target, 'touchmove', onMove, listenerOptions),
+    addEventListener(target, 'touchend', onEnd, listenerOptions),
+    addEventListener(target, 'touchcancel', clear, listenerOptions),
+  ];
+  const stop = () => cleanup.forEach(fn => fn());
+  return stop;
+}
+
+type BindingValue = (evt: TouchEvent) => void;
+
+export const vOnLongPress: ObjectDirective<HTMLElement, BindingValue> = {
+  mounted(el, binding) {
+    const delayStr = binding.arg || '';
+    let delay = parseInt(delayStr, 10) || DEFAULT_DELAY;
+    if (delay <= 0) {
+      delay = DEFAULT_DELAY;
+    }
+    onLongPress(el, binding.value, { delay, modifiers: binding.modifiers });
+  }
+};
+
+function addAutoDisappearMask(duration?: number): void {
+  console.log(duration);
+  const mask = document.createElement('div');
+  mask.style.position = 'fixed';
+  mask.style.top = '0';
+  mask.style.right = '0';
+  mask.style.bottom = '0';
+  mask.style.left = '0';
+  mask.style.zIndex = '99999';
+  document.body.appendChild(mask);
+  setTimeout(() => {
+    document.body.removeChild(mask);
+  }, duration || 25);
+}

package/templates/lib/components/common/src/compositions/use-momentum/index.ts

@@ -0,0 +1,82 @@
+type MonmentumOption = {
+  maxOverflowY?: number,
+  TimeThreshold?: number,
+  YThreshold?: number
+}
+
+export const useMonmentum = (options: MonmentumOption) => {
+  const { maxOverflowY = 0, TimeThreshold = 200, YThreshold = 88 } = options;
+  let startTime = 0;
+  let momentumStartY = 0;
+  let deltaY = 0;
+  const start = (y: number) => {
+    startTime = new Date().getTime();
+    momentumStartY = y;
+  };
+  const move = (y: number) => {
+    deltaY = y;
+    const now = new Date().getTime();
+    const duration = now - startTime;
+    if (duration > TimeThreshold) {
+      momentumStartY = deltaY;
+      startTime = now;
+    }
+  };
+  const end = () => {
+    const now = new Date().getTime();
+    const duration = now - startTime;
+    const absDeltaY = Math.abs(deltaY - momentumStartY);
+    if (duration < TimeThreshold && absDeltaY > YThreshold) {
+      return true;
+    }
+    return false;
+  };
+  const get = (current: number, minY: number, maxY: number) => {
+    const durationMap = {
+      noBounce: 2500,
+      weekBounce: 800,
+      strongBounce: 400
+    };
+    const bezierMap = {
+      noBounce: 'cubic-bezier(.17, .89, .45, 1)',
+      weekBounce: 'cubic-bezier(.25, .46, .45, .94)',
+      strongBounce: 'cubic-bezier(.25, .46, .45, .94)'
+    };
+    let type = 'noBounce';
+    // 惯性滑动加速度
+    const deceleration = 0.003;
+    // 回弹阻力
+    const bounceRate = 10;
+    // 强弱回弹的分割值
+    const bounceThreshold = 300;
+
+    let overflowY = 0;
+    const now = new Date().getTime();
+    const duration = now - startTime;
+
+    const distance = current - momentumStartY;
+    const speed = (2 * Math.abs(distance)) / duration;
+    let destination = current + (speed / deceleration) * (distance < 0 ? -1 : 1);
+    if (destination < minY) {
+      overflowY = minY - destination;
+      type = overflowY > bounceThreshold ? 'strongBounce' : 'weekBounce';
+      destination = Math.max(minY - maxOverflowY, minY - overflowY / bounceRate);
+    } else if (destination > maxY) {
+      overflowY = destination - maxY;
+      type = overflowY > bounceThreshold ? 'strongBounce' : 'weekBounce';
+      destination = Math.min(maxY + maxOverflowY, maxY + overflowY / bounceRate);
+    }
+
+    return {
+      destination,
+      duration: durationMap[type],
+      bezier: bezierMap[type]
+    };
+  };
+  return {
+    start,
+    move,
+    end,
+    get
+  };
+};

package/templates/lib/components/common/src/compositions/use-mount-component/index.ts

@@ -0,0 +1,48 @@
+import { useExpose } from "../use-expose";
+import { Component, createApp, nextTick, reactive } from "vue";
+
+export function usePopupState() {
+  const state = reactive({
+    show: false,
+  });
+
+  const toggle = (show: boolean) => {
+    state.show = show;
+  };
+
+  const open = (props: Record<string, any>) => {
+    Object.assign(state, props);
+
+    nextTick(() => {
+      toggle(true);
+    });
+  };
+
+  const close = () => {
+    toggle(false);
+  };
+
+  useExpose({ open, close, toggle });
+
+  return {
+    open,
+    close,
+    state,
+    toggle,
+  };
+}
+
+export function mountComponent(RootComponent: Component) {
+  const app = createApp(RootComponent);
+  const root = document.createElement('div');
+
+  document.body.appendChild(root);
+
+  return {
+    instance: app.mount(root),
+    unmount() {
+      app.unmount();
+      document.body.removeChild(root);
+    },
+  };
+}

package/templates/lib/components/common/src/compositions/use-rect/index.ts

@@ -0,0 +1,31 @@
+import { Ref, unref } from 'vue';
+
+const isWindow = (val: unknown): val is Window => val === window;
+
+const makeDOMRect = (width: number, height: number) =>
+  ({
+    top: 0,
+    left: 0,
+    right: width,
+    bottom: height,
+    width,
+    height,
+  }) as DOMRect;
+
+export const useRect = (
+  elementOrRef: Element | Window | Ref<Element | Window | undefined>,
+) => {
+  const element = unref(elementOrRef);
+
+  if (isWindow(element)) {
+    const width = element.innerWidth;
+    const height = element.innerHeight;
+    return makeDOMRect(width, height);
+  }
+
+  if (element?.getBoundingClientRect) {
+    return element.getBoundingClientRect();
+  }
+
+  return makeDOMRect(0, 0);
+};

package/templates/lib/components/common/src/compositions/use-refs/index.ts

@@ -0,0 +1,21 @@
+import { ref, Ref, onBeforeUpdate } from 'vue';
+
+export function useRefs<T = Element>() {
+  const refs = ref([]) as Ref<T[]>;
+  const cache: Array<(el: unknown) => void> = [];
+
+  onBeforeUpdate(() => {
+    refs.value = [];
+  });
+
+  const setRefs = (index: number) => {
+    if (!cache[index]) {
+      cache[index] = (el: unknown) => {
+        refs.value[index] = el as T;
+      };
+    }
+    return cache[index];
+  };
+
+  return [refs, setRefs] as const;
+}

package/templates/lib/components/common/src/compositions/use-resize-observer/index.ts

@@ -0,0 +1,85 @@
+/* eslint-disable no-use-before-define */
+import { computed, watch } from 'vue';
+import { MaybeComputedElementRef, unrefElement, tryOnScopeDispose, defaultWindow } from './utils';
+
+export interface ResizeObserverSize {
+  readonly inlineSize: number;
+  readonly blockSize: number;
+}
+
+export interface ResizeObserverEntry {
+  readonly target: Element;
+  readonly contentRect: DOMRectReadOnly;
+  readonly borderBoxSize?: ReadonlyArray<ResizeObserverSize>;
+  readonly contentBoxSize?: ReadonlyArray<ResizeObserverSize>;
+  readonly devicePixelContentBoxSize?: ReadonlyArray<ResizeObserverSize>;
+}
+
+export type ResizeObserverCallback = (entries: ReadonlyArray<ResizeObserverEntry>, observer: ResizeObserver) => void;
+
+export interface UseResizeObserverOptions {
+
+  /** 监听的盒模型，默认为`content-box` */
+  box?: ResizeObserverBoxOptions;
+
+  /** 允许指定一个的`window` */
+  window?: Window;
+}
+
+declare class ResizeObserver {
+
+  constructor(callback: ResizeObserverCallback);
+
+  disconnect(): void;
+
+  observe(target: Element, options?: UseResizeObserverOptions): void;
+
+  unobserve(target: Element): void;
+}
+
+/**
+ * 监听元素的大小变化
+ */
+export function useResizeObserver(
+  target: MaybeComputedElementRef | MaybeComputedElementRef[],
+  callback: ResizeObserverCallback,
+  options: UseResizeObserverOptions = {},
+) {
+  const { window = defaultWindow, ...observerOptions } = options;
+  let observer: ResizeObserver | undefined;
+
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = undefined;
+    }
+  };
+
+  const targets = computed(() =>
+    Array.isArray(target)
+      ? target.map(el => unrefElement(el))
+      : [unrefElement(target)]);
+
+  const stopWatch = watch(
+    targets,
+    (elements) => {
+      cleanup();
+      if (window && 'ResizeObserver' in window) {
+        observer = new ResizeObserver(callback);
+        elements.forEach((element) => {
+          element && observer!.observe(element, observerOptions);
+        });
+      }
+    },
+    { immediate: true, flush: 'post' },
+  );
+
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+
+  tryOnScopeDispose(stop);
+
+  return { stop };
+}