@farris/cli 2.0.3 → 2.1.1

package/templates/lib/components/button/src/button.component.tsx

@@ -1,84 +0,0 @@
-import { CSSProperties, computed, defineComponent } from 'vue';
-import { useBem } from '@/components/common';
-import { BUTTON_NAME, ButtonProps, buttonProps } from './button.props';
-
-export default defineComponent({
-  name: BUTTON_NAME,
-  props: buttonProps,
-  emits: ['click'],
-  setup(props: ButtonProps, context) {
-    const { slots } = context;
-
-    const { bem, getModifierClass } = useBem(BUTTON_NAME);
-
-    const buttonClass = computed(() => {
-      const classList = [bem(), getModifierClass(props.type)];
-      props.disabled && classList.push(getModifierClass('disabled'));
-      props.block && classList.push(getModifierClass('block'));
-      props.round && classList.push(getModifierClass('round'));
-      props.plain && classList.push(getModifierClass('plain'));
-      props.noBorder && classList.push(getModifierClass('noborder'));
-      props.loading && classList.push(getModifierClass('loading'));
-      props.size && classList.push(getModifierClass(props.size));
-      return classList;
-    });
-
-    const applyGradientBorderBehavior = (style: CSSProperties, color: string) =>{
-      const isGradientColor = color.includes('gradient');
-      if (isGradientColor) {
-        style.border = 0;
-      } else {
-        style.borderColor = color;
-      }
-    };
-
-    const buttonStyle = computed(() => {
-      const textColor = props.plain ? props.color : '#fff';
-      const backgroundColor = !props.plain ? props.color : null;
-
-      const style: CSSProperties = {};
-      if (props.color) {
-        style.color = textColor;
-        style.boxShadow = 'none';
-        backgroundColor && (style.background = backgroundColor);
-        applyGradientBorderBehavior(style, props.color);
-      }
-      return style;
-    });
-
-    const onClickButton = ($event: Event) =>{
-      $event.stopPropagation();
-      if (!props.disabled) {
-        context.emit('click', $event);
-      }
-    };
-
-    const renderLoading = () => {
-      return (
-        props.loading && <>
-          <span class={bem('loading')}>
-            <svg viewBox="25 25 50 50" class={bem('loading-icon-circular')}>
-              <circle cx="50" cy="50" r="20" fill="none" />
-            </svg>
-          </span>
-          {props.loadingText && <span class={bem('loading-text')}>{props.loadingText}</span>}
-        </>
-      );
-    };
-
-    const renderText = ()=> {
-      return slots.default && <span class={bem('text')}>{slots.default()}</span>;
-    };
-
-    return () => (
-      <button
-        class={buttonClass.value}
-        style={buttonStyle.value}
-        onClick={onClickButton}
-      >
-        {renderLoading()}
-        {renderText()}
-      </button>
-    );
-  }
-});

package/templates/lib/components/button/src/button.props.ts

@@ -1,55 +0,0 @@
-import { ExtractPropTypes, PropType } from 'vue';
-
-export type ButtonType = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
-export type ButtonSize = 'large' | 'normal' | 'small' | 'mini';
-
-export const BUTTON_NAME = "fm-button";
-
-export const buttonProps = {
-  type: {
-    type: String as PropType<ButtonType>,
-    default: 'primary'
-  },
-  size: {
-    type: String as PropType<ButtonSize>,
-    default: ''
-  },
-  color: {
-    type: String,
-    default: ''
-  },
-  block: {
-    type: Boolean,
-    default: false
-  },
-  noBorder: {
-    type: Boolean,
-    default: false
-  },
-  plain: {
-    type: Boolean,
-    default: false
-  },
-  round: {
-    type: Boolean,
-    default: false
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  icon: {
-    type: String,
-    default: ''
-  },
-  loading: {
-    type: Boolean,
-    default: false
-  },
-  loadingText: {
-    type: String,
-    default: ''
-  }
-};
-
-export type ButtonProps = ExtractPropTypes<typeof buttonProps>;

package/templates/lib/components/button/src/button.scss

@@ -1,179 +0,0 @@
-@use '../../common/src/style/mixins/index.scss' as *;
-
-:root {
-  --fm-button-height: 42px;
-  --fm-button-padding: 0 14px;
-  --fm-button-radius: 2px;
-  --fm-button-border-width: 1px;
-  --fm-button-color: var(--fm-white);
-  --fm-button-line-height: var(--fm-line-height);
-  --fm-button-font-size: var(--fm-font-size);
-  --fm-button-plain-background: var(--fm-white);
-  --fm-button-lg-height: 46px;
-  --fm-button-lg-font-size: 18px;
-  --fm-button-md-height: 38px;
-  --fm-button-md-font-size: 14px;
-  --fm-button-sm-height: 34px;
-  --fm-button-sm-padding: 0 8px;
-  --fm-button-sm-font-size: 12px;
-  --fm-button-xs-height: 28px;
-  --fm-button-xs-font-size: 10px;
-  --fm-button-secondary-color: var(--fm-blue-light);
-}
-
-@include b(button){
-  position: relative;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  text-align: center;
-  margin: 0;
-  border: none;
-  transition: opacity 0.2s;
-  color: var(--fm-button-color);
-  height: var(--fm-button-height);
-  padding: var(--fm-button-padding);
-  font-size: var(--fm-button-font-size);
-  line-height: var(--fm-button-line-height);
-  border-radius: var(--fm-button-radius);
-
-  @include m((primary, info)) {
-    background: var(--fm-primary-color);
-  }
-
-  @include m(secondary) {
-    color: var(--fm-primary-color);
-    background: var(--fm-button-secondary-color);
-  }
-
-  @include m(danger) {
-    background-color: var(--fm-danger-color);
-  }
-
-  @include m(warning) {
-    background-color: var(--fm-warning-color);
-  }
-
-  @include m(success) {
-    background-color: var(--fm-success-color);
-  }
-
-  @include m(plain) {
-    box-shadow: none;
-    background: var(--fm-button-plain-background);
-    @include root-m((primary, info)) {
-      color: var(--fm-primary-color);
-      border: var(--fm-button-border-width) solid var(--fm-primary-color);
-    }
-    @include root-m(success) {
-      color: var(--fm-success-color);
-      border: var(--fm-button-border-width) solid var(--fm-success-color);
-    }
-    @include root-m(danger) {
-      color: var(--fm-danger-color);
-      border: var(--fm-button-border-width) solid var(--fm-danger-color);
-    }
-    @include root-m(warning) {
-      color: var(--fm-button-warning-color);
-      border: var(--fm-button-border-width) solid var(--fm-button-warning-color);
-    }
-  }
-
-  @include m(noborder) {
-    border: none !important;
-  }
-
-  @include m(large) {
-    height: var(--fm-button-lg-height);
-    font-size: var(--fm-button-lg-font-size);
-  }
-
-  @include m(normal) {
-    height: var(--fm-button-md-height);
-    font-size: var(--fm-button-md-font-size);
-  }
-
-  @include m(small) {
-    height: var(--fm-button-sm-height);
-    padding: var(--fm-button-sm-padding);
-    font-size: var(--fm-button-sm-font-size);
-  }
-
-  @include m(mini) {
-    height: var(--fm-button-xs-height);
-    padding: var(--fm-button-sm-padding);
-    font-size: var(--fm-button-xs-font-size);
-  }
-
-  @include m(block) {
-    display: flex;
-    width: 100%;
-  }
-
-  @include m(disabled) {
-    cursor: not-allowed;
-    opacity: var(--fm-disabled-opacity);
-  }
-
-  @include m((loading, disabled)) {
-    &::before {
-      display: none;
-    }
-  }
-
-  @include m(round) {
-    border-radius: var(--fm-radius-max);
-  }
-
-  @include m(square) {
-    border-radius: 0;
-  }
-
-  @include e(loading) {
-    display: inline-block;
-    width: 20px;
-    max-width: 100%;
-    height: 20px;
-    max-height: 100%;
-    vertical-align: middle;
-    animation: fm-rotate 2s linear infinite;
-    circle {
-      animation: fm-circular 1.5s ease-in-out infinite;
-      stroke: currentColor;
-      stroke-width: 4;
-      stroke-linecap: round;
-    }
-  }
-  @include e(loading-icon-circular) {
-    color: #fff;
-  }
-  @include e(loading-text) {
-    margin-left: 6px;
-  }
-  @include e(icon) {
-    &:not(:last-child) {
-      margin-right: 6px;
-    }
-  }
-
-  &::before {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    height: 100%;
-    background-color: #000;
-    border: inherit;
-    border-color: #000;
-    border-radius: inherit;
-    -webkit-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    opacity: 0;
-    content: ' ';
-  }
-  &:active::before {
-    opacity: 0.1;
-  }
-}

package/templates/lib/components/common/index.ts

@@ -1,6 +0,0 @@
-export * from './src/compositions';
-export * from './src/utils';
-export * from './types';
-
-export const FM_UI_PROVIDER_SERVICE_TOKEN = Symbol('UIProviderService');
-

package/templates/lib/components/common/src/common.scss

@@ -1,4 +0,0 @@
-@use './style/variables';
-@use './style/base';
-@use './style/icon';
-@use './style/animation';

package/templates/lib/components/common/src/compositions/index.ts

@@ -1,19 +0,0 @@
-export * from './types';
-export * from './use-context/use-parent-context';
-export * from './use-context/use-children-contexts';
-export * from './use-event-listener';
-export * from './use-touch-move';
-export * from './use-touch';
-export * from './use-lay-render';
-export * from './use-refs';
-export * from './use-rect';
-export * from './use-expose';
-export * from './use-mount-component';
-export * from './use-bem';
-export * from './use-link';
-export * from './use-click-away';
-export * from './use-lock-scroll';
-export * from './use-momentum';
-export * from './use-scroll-parent';
-export * from './use-resize-observer';
-export * from './use-long-press';

package/templates/lib/components/common/src/compositions/types.ts

@@ -1,6 +0,0 @@
-export interface ParentProvideValue<ParentContext, ChildContext> {
-  addChild(childContext: ChildContext): void;
-  removeChild(childContext: ChildContext): void;
-  childContexts: Array<ChildContext>;
-  parentContext: ParentContext;
-};

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

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

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

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

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

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

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

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

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

@@ -1,25 +0,0 @@
-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];
-}