@farris/cli 2.0.2 → 2.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@farris/cli",
     "private": false,
-    "version": "2.0.2",
+    "version": "2.0.3",
     "type": "module",
     "typings": "lib/index.d.ts",
     "bin": {
@@ -29,7 +29,7 @@
         "inquirer": "^9.3.0",
         "ora": "^8.0.1",
         "typescript": "^4.6.4",
-        "vite": "^4.4.1",
+        "vite": "^4.5.10",
         "vite-plugin-css-injected-by-js": "^3.5.2",
         "vite-plugin-dts": "^3.9.1",
         "glob": "11.0.3"

package/templates/lib/.eslintrc.cjs

@@ -0,0 +1,15 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution');
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+};

package/templates/lib/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}

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

@@ -0,0 +1,7 @@
+import { Plugin } from 'vue';
+import { withInstall } from '@components/common';
+import ButtonInstallless from './src/button.component';
+
+const Button = withInstall(ButtonInstallless);
+export { Button };
+export default Button as typeof Button & Plugin;

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

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

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

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

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

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

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

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

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

@@ -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];
+}