@farris/cli 2.0.3 → 2.1.1

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

@@ -1,141 +0,0 @@
-/* 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

@@ -1,82 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,85 +0,0 @@
-/* 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 };
-}

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

@@ -1,37 +0,0 @@
-/* eslint-disable no-use-before-define */
-import { ComponentPublicInstance, Ref, unref, getCurrentScope, onScopeDispose } from 'vue';
-import { inBrowser } from '../../utils';
-
-export const defaultWindow = inBrowser ? window : undefined;
-
-export type MaybeRef<T> = T | Ref<T>;
-export type MaybeRefOrGetter<T> = MaybeRef<T> | (() => T);
-
-export type VueInstance = ComponentPublicInstance;
-export type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
-export type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeRefOrGetter<T>;
-export type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
-
-export type UnRefElementReturn<T extends MaybeElement = MaybeElement> =
-  T extends VueInstance ? Exclude<MaybeElement, VueInstance> : T | undefined;
-
-export type AnyFn = (...args: any[]) => any;
-
-export function toValue<T>(r: MaybeRefOrGetter<T>): T {
-  return typeof r === 'function'
-    ? (r as AnyFn)()
-    : unref(r);
-}
-
-export function unrefElement<T extends MaybeElement>(elRef: MaybeComputedElementRef<T>): UnRefElementReturn<T> {
-  const plain = toValue(elRef);
-  return (plain as VueInstance)?.$el ?? plain;
-}
-
-export function tryOnScopeDispose(fn: (() => void)) {
-  if (getCurrentScope()) {
-    onScopeDispose(fn);
-    return true;
-  }
-  return false;
-}

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

@@ -1,42 +0,0 @@
-import { ref, Ref, onMounted } from 'vue';
-import { inBrowser } from '../../utils';
-
-type ScrollElement = HTMLElement | Window;
-
-const overflowScrollReg = /scroll|auto|overlay/i;
-const defaultRoot = inBrowser ? window : undefined;
-
-function isElement(node: Element) {
-  const ELEMENT_NODE_TYPE = 1;
-  return (
-    node.tagName !== 'HTML' &&
-    node.tagName !== 'BODY' &&
-    node.nodeType === ELEMENT_NODE_TYPE
-  );
-}
-
-export function getScrollParent(el: Element, root: ScrollElement | undefined = defaultRoot) {
-  let node = el;
-
-  while (node && node !== root && isElement(node)) {
-    const { overflowY } = window.getComputedStyle(node);
-    if (overflowScrollReg.test(overflowY)) {
-      return node;
-    }
-    node = node.parentNode as Element;
-  }
-
-  return root;
-}
-
-export function useScrollParent(el: Ref<Element | undefined>, root: ScrollElement | undefined = defaultRoot) {
-  const scrollParent = ref<Element | Window>();
-
-  onMounted(() => {
-    if (el.value) {
-      scrollParent.value = getScrollParent(el.value, root);
-    }
-  });
-
-  return scrollParent;
-}

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

@@ -1,82 +0,0 @@
-import { ref } from 'vue';
-
-export const TAP_OFFSET = 5;
-
-type Direction = '' | 'vertical' | 'horizontal';
-
-function getDirection(x: number, y: number) {
-  if (x > y) {
-    return 'horizontal';
-  }
-  if (y > x) {
-    return 'vertical';
-  }
-  return '';
-}
-
-export function useTouch() {
-  const startX = ref(0);
-  const startY = ref(0);
-  const deltaX = ref(0);
-  const deltaY = ref(0);
-  const offsetX = ref(0);
-  const offsetY = ref(0);
-  const direction = ref<Direction>('');
-  const isTap = ref(true);
-
-  const isVertical = () => direction.value === 'vertical';
-  const isHorizontal = () => direction.value === 'horizontal';
-
-  const reset = () => {
-    deltaX.value = 0;
-    deltaY.value = 0;
-    offsetX.value = 0;
-    offsetY.value = 0;
-    direction.value = '';
-    isTap.value = true;
-  };
-
-  const start = ((event: TouchEvent) => {
-    reset();
-    startX.value = event.touches[0].clientX;
-    startY.value = event.touches[0].clientY;
-  }) as EventListener;
-
-  const move = ((event: TouchEvent) => {
-    const touch = event.touches[0];
-    // safari back will set clientX to negative number
-    deltaX.value = (touch.clientX < 0 ? 0 : touch.clientX) - startX.value;
-    deltaY.value = touch.clientY - startY.value;
-    offsetX.value = Math.abs(deltaX.value);
-    offsetY.value = Math.abs(deltaY.value);
-
-    // lock direction when distance is greater than a certain value
-    const LOCK_DIRECTION_DISTANCE = 10;
-    if (
-      !direction.value ||
-      (offsetX.value < LOCK_DIRECTION_DISTANCE && offsetY.value < LOCK_DIRECTION_DISTANCE)
-    ) {
-      direction.value = getDirection(offsetX.value, offsetY.value);
-    }
-
-    if (isTap.value && (offsetX.value > TAP_OFFSET || offsetY.value > TAP_OFFSET)) {
-      isTap.value = false;
-    }
-  }) as EventListener;
-
-  return {
-    move,
-    start,
-    reset,
-    startX,
-    startY,
-    deltaX,
-    deltaY,
-    offsetX,
-    offsetY,
-    direction,
-    isVertical,
-    isHorizontal,
-    isTap
-  };
-}

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

@@ -1,120 +0,0 @@
-import { reactive, ref, Ref } from 'vue';
-import { throttle } from '../../utils';
-import { useEventListener } from '../use-event-listener';
-
-const MIN_DISTANCE = 10;
-
-type TouchDirection = 'horizontal' | 'vertical' | '';
-
-export type TouchOffset = {
-  startX: number;
-  startY: number;
-  endX: number;
-  endY: number;
-  offsetX: number;
-  offsetY: number;
-  direction: TouchDirection;
-};
-
-type TouchListener = {
-  onTouchStart?: (event: Event) => void;
-  onTouchMove?: (event: Event) => void;
-  onTouchEnd?: (event: Event) => void;
-  onTouchCancel?: (event: Event) => void;
-};
-
-function getDirection(x: number, y: number): TouchDirection {
-  if (x > y && x > MIN_DISTANCE) {
-    return 'horizontal';
-  }
-
-  if (y > x && y > MIN_DISTANCE) {
-    return 'vertical';
-  }
-  return '';
-}
-
-const defaultTouchOffset: () => TouchOffset = () => {
-  return {
-    startX: 0,
-    startY: 0,
-    endX: 0,
-    endY: 0,
-    offsetX: 0,
-    offsetY: 0,
-    direction: ''
-  };
-};
-
-export enum DragStatus {
-  NotStarted,
-  Started,
-  Dragging,
-  End
-}
-
-export function useTouchMove(
-  target: Ref<EventTarget | undefined>,
-  listener?: TouchListener,
-  wait = 0
-) {
-  let beginOffset = { offsetX: 0, offsetY: 0 };
-  const offset: TouchOffset = reactive(defaultTouchOffset());
-  const dragStatus = ref(DragStatus.NotStarted);
-
-  const touchStart = (event: any) => {
-    if (!event.touches || !event.touches[0]) {
-      return;
-    }
-    offset.startX = event.touches[0].clientX;
-    offset.startY = event.touches[0].clientY;
-    listener?.onTouchStart && listener.onTouchStart(event);
-    dragStatus.value = DragStatus.Started;
-  };
-
-  const touchMove = (event: any) => {
-    if (!event.touches || !event.touches[0]) {
-      return;
-    }
-    const touch = event.touches[0];
-    offset.offsetX = touch.clientX - offset.startX + beginOffset.offsetX;
-    offset.offsetY = touch.clientY - offset.startY + beginOffset.offsetY;
-    offset.endX = event.touches[0].clientX;
-    offset.endY = event.touches[0].clientY;
-    offset.direction = getDirection(offset.offsetX, offset.offsetY);
-    listener?.onTouchMove && listener.onTouchMove(event);
-    dragStatus.value = DragStatus.Dragging;
-  };
-
-  const touchEnd = (event: Event) => {
-    beginOffset = { offsetX: offset.offsetX, offsetY: offset.offsetY };
-    listener?.onTouchEnd && listener.onTouchEnd(event);
-    listener?.onTouchCancel && listener.onTouchCancel(event);
-    dragStatus.value = DragStatus.End;
-  };
-
-  const resetTouchStatus = () => {
-    offset.endX = 0;
-    offset.endY = 0;
-    offset.offsetX = 0;
-    offset.offsetY = 0;
-    offset.direction = '';
-    beginOffset = { offsetX: 0, offsetY: 0 };
-    dragStatus.value = DragStatus.NotStarted;
-  };
-
-  if (target) {
-    useEventListener('touchstart', touchStart, { target });
-    useEventListener('touchmove', wait > 0 ? throttle(touchMove, wait) : touchMove, {
-      target,
-      passive: false
-    });
-    useEventListener('touchend', touchEnd, { target });
-  }
-
-  return {
-    offset,
-    dragStatus,
-    resetTouchStatus
-  };
-}