@farris/cli 1.0.28 → 2.0.0-beta.8

package/lib/plugins/create-component-style.js

@@ -0,0 +1,45 @@
+const NotStyleComponents = ['designer-canvas', 'dynamic-view', 'dynamic-resolver', 'common'];
+const getComponentStyle = (imports) => {
+    const components = imports
+        .filter(path => {
+        return path.startsWith('@components/') && !NotStyleComponents.find(notStylecomponent => path.includes(notStylecomponent));
+    })
+        .filter((item, index, array) => {
+        const targetIndex = array.filter(e => e !== item).findIndex(e => item.includes(e));
+        return targetIndex < 0;
+    })
+        .map(name => {
+        const paths = name.split('/');
+        return {
+            name: paths[1],
+            path: `../${paths[1]}/style.js`
+        };
+    });
+    components.push({
+        name: 'components',
+        path: `./index.css`
+    });
+    const template = `${components.map(component => {
+        const { path } = component;
+        return `import '${path}';`;
+    }).join('\n')}
+`;
+    return template;
+};
+export function createComponentStyle() {
+    return {
+        name: 'farris-gen-component-style',
+        renderChunk(code, chunk) {
+            const { imports } = chunk;
+            const template = getComponentStyle(imports);
+            template && this.emitFile({
+                type: 'asset',
+                fileName: 'style.js',
+                source: template
+            });
+            return code;
+        }
+    };
+}
+;
+//# sourceMappingURL=create-component-style.js.map

package/lib/plugins/create-component-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-component-style.js","sourceRoot":"","sources":["../../src/plugins/create-component-style.ts"],"names":[],"mappings":"AAAA,MAAM,kBAAkB,GAAG,CAAC,iBAAiB,EAAE,cAAc,EAAE,kBAAkB,EAAE,QAAQ,CAAC,CAAC;AAE7F,MAAM,iBAAiB,GAAG,CAAC,OAAiB,EAAE,EAAE;IAE9C,MAAM,UAAU,GAAG,OAAO;SACvB,MAAM,CAAC,IAAI,CAAC,EAAE;QACb,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAC5H,CAAC,CAAC;SACD,MAAM,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;QAC7B,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA,EAAE,CAAC,CAAC,KAAG,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QAChF,OAAO,WAAW,GAAG,CAAC,CAAC;IACzB,CAAC,CAAC;SACD,GAAG,CAAC,IAAI,CAAC,EAAE;QACV,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC9B,OAAO;YACL,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;YACd,IAAI,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,WAAW;SAChC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEL,UAAU,CAAC,IAAI,CAAC;QACd,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,aAAa;KACpB,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;QAC7C,MAAM,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;QAC3B,OAAO,WAAW,IAAI,IAAI,CAAC;IAC7B,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;CACd,CAAC;IAEA,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,UAAU,oBAAoB;IAClC,OAAO;QACL,IAAI,EAAE,4BAA4B;QAClC,WAAW,CAAC,IAAY,EAAE,KAAU;YAClC,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;YAE1B,MAAM,QAAQ,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;YAE5C,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;gBACxB,IAAI,EAAE,OAAO;gBACb,QAAQ,EAAE,UAAU;gBACpB,MAAM,EAAE,QAAQ;aACjB,CAAC,CAAC;YACH,OAAO,IAAI,CAAC;QACd,CAAC;KACF,CAAC;AACJ,CAAC;AAAA,CAAC"}

package/lib/plugins/create-package-json.js

@@ -0,0 +1,34 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { CWD } from "../common/constant.js";
+export const createPackageJson = () => {
+    return {
+        name: 'create-package-json',
+        generateBundle() {
+            const pkg = readFileSync(resolve(CWD, 'package.json'), 'utf-8');
+            const packageJson = JSON.parse(pkg);
+            const result = {
+                name: '',
+                version: '',
+                private: false,
+                main: './index.umd.js',
+                module: './index.esm.js',
+                types: './types/index.d.ts',
+                style: './index.css',
+            };
+            const exclude = ['scripts', 'devDependencies', 'private'];
+            Object.keys(packageJson).forEach(key => {
+                if (exclude.includes(key)) {
+                    return;
+                }
+                result[key] = packageJson[key];
+            });
+            this.emitFile({
+                type: 'asset',
+                fileName: 'package.json',
+                source: JSON.stringify(result, null, 2)
+            });
+        }
+    };
+};
+//# sourceMappingURL=create-package-json.js.map

package/lib/plugins/create-package-json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-package-json.js","sourceRoot":"","sources":["../../src/plugins/create-package-json.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAQ,EAAE;IACzC,OAAO;QACL,IAAI,EAAE,qBAAqB;QAC3B,cAAc;YACZ,MAAM,GAAG,GAAG,YAAY,CAAC,OAAO,CAAC,GAAG,EAAE,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;YAChE,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YACpC,MAAM,MAAM,GAAwB;gBAClC,IAAI,EAAE,EAAE;gBACR,OAAO,EAAE,EAAE;gBACX,OAAO,EAAE,KAAK;gBACd,IAAI,EAAE,gBAAgB;gBACtB,MAAM,EAAE,gBAAgB;gBACxB,KAAK,EAAE,oBAAoB;gBAC3B,KAAK,EAAE,aAAa;aACrB,CAAC;YACF,MAAM,OAAO,GAAG,CAAC,SAAS,EAAE,iBAAiB,EAAE,SAAS,CAAC,CAAC;YAC1D,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;gBACrC,IAAI,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;oBACzB,OAAO;iBACR;gBACD,MAAM,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;YACjC,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,QAAQ,CAAC;gBACZ,IAAI,EAAE,OAAO;gBACb,QAAQ,EAAE,cAAc;gBACxB,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;aACxC,CAAC,CAAC;QACL,CAAC;KACF,CAAC;AACJ,CAAC,CAAC"}

package/lib/plugins/dts.js

@@ -0,0 +1,9 @@
+import dts from "vite-plugin-dts";
+export function generateTypes(entry, outDir) {
+    return dts({
+        entryRoot: entry,
+        outDir
+    });
+}
+;
+//# sourceMappingURL=dts.js.map

package/lib/plugins/dts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dts.js","sourceRoot":"","sources":["../../src/plugins/dts.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,iBAAiB,CAAC;AAElC,MAAM,UAAU,aAAa,CAAC,KAAa,EAAE,MAAc;IACzD,OAAO,GAAG,CAAC;QACT,SAAS,EAAE,KAAK;QAChB,MAAM;KACP,CAAC,CAAC;AACL,CAAC;AAAA,CAAC"}

package/lib/plugins/html-system.js

@@ -0,0 +1,12 @@
+export const htmlSystemPlugin = () => {
+    return {
+        name: 'html-transform-system',
+        transformIndexHtml(html) {
+            const regexp = /<script.*type="module".*src="(.*?)"><\/script>/;
+            return html.replace(regexp, (str, p1) => `
+    <script src="https://cdn.bootcdn.net/ajax/libs/systemjs/6.15.1/system.js"></script>
+    <script >System.import("${p1}");</script>`);
+        }
+    };
+};
+//# sourceMappingURL=html-system.js.map

package/lib/plugins/html-system.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-system.js","sourceRoot":"","sources":["../../src/plugins/html-system.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,OAAO;QACL,IAAI,EAAE,uBAAuB;QAC7B,kBAAkB,CAAC,IAAY;YAC7B,MAAM,MAAM,GAAG,gDAAgD,CAAC;YAChE,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,GAAW,EAAE,EAAU,EAAC,EAAE,CAAC;;8BAEhC,EAAE,cAAc,CAAC,CAAC;QAC5C,CAAC;KACF,CAAC;AACJ,CAAC,CAAC"}

package/lib/plugins/replace.js

@@ -0,0 +1,14 @@
+export function replace(path) {
+    return {
+        name: 'farris-replace',
+        renderChunk(code, chunk) {
+            const fileNames = chunk.fileName.split('.');
+            const format = fileNames[fileNames.length - 2];
+            return code.replace(/@components(\/\w+)/g, (...args) => {
+                return path(format, args);
+            });
+        }
+    };
+}
+;
+//# sourceMappingURL=replace.js.map

package/lib/plugins/replace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"replace.js","sourceRoot":"","sources":["../../src/plugins/replace.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,OAAO,CAAC,IAAgD;IACtE,OAAO;QACL,IAAI,EAAE,gBAAgB;QACtB,WAAW,CAAC,IAAY,EAAE,KAAU;YAClC,MAAM,SAAS,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAC5C,MAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC;YAC7C,OAAO,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,IAAI,EAAC,EAAE;gBACpD,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;YAC5B,CAAC,CAAC,CAAC;QACL,CAAC;KACF,CAAC;AACJ,CAAC;AAAA,CAAC"}

package/lib/plugins/systemjs-bundle.js

@@ -0,0 +1,16 @@
+export function systemjsBundle() {
+    return {
+        name: 'systemjs-bundle',
+        outputOptions(options) {
+            if (options.format === 'systemjs') {
+                return {
+                    ...options,
+                    name: undefined
+                };
+            }
+            return options;
+        }
+    };
+}
+;
+//# sourceMappingURL=systemjs-bundle.js.map

package/lib/plugins/systemjs-bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"systemjs-bundle.js","sourceRoot":"","sources":["../../src/plugins/systemjs-bundle.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,cAAc;IAC5B,OAAO;QACL,IAAI,EAAE,iBAAiB;QACvB,aAAa,CAAC,OAAY;YACxB,IAAG,OAAO,CAAC,MAAM,KAAK,UAAU,EAAE;gBAChC,OAAO;oBACL,GAAG,OAAO;oBACV,IAAI,EAAE,SAAS;iBAChB,CAAC;aACH;YACD,OAAO,OAAO,CAAC;QACjB,CAAC;KACF,CAAC;AACJ,CAAC;AAAA,CAAC"}

package/package.json

@@ -1,26 +1,41 @@
-{
-  "name": "@farris/cli",
-  "version": "1.0.28",
-  "description": "Farris command line interface",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://git.iec.io/webadp/farris-cli.git"
-  },
-  "keywords": [
-    "Farris",
-    "CLI"
-  ],
-  "bin": {
-    "farris": "ci/cli.js"
-  },
-  "author": "Sagi Chen",
-  "license": "ISC",
-  "dependencies": {
-    "lerna": "^4.0.0",
-    "moment": "^2.29.3"
-  }
-}
+{
+  "name": "@farris/cli",
+  "private": false,
+  "version": "2.0.0-beta.8",
+  "type": "module",
+  "typings": "lib/index.d.ts",
+  "bin": {
+    "farris-cli": "./bin/index.js"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "scripts": {
+    "build": "rimraf ./lib && tsc"
+  },
+  "files": [
+    "lib",
+    "templates",
+    "bin.js"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@types/inquirer": "^9.0.7",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "commander": "^9.4.0",
+    "esbuild": "^0.23.0",
+    "esbuild-sass-plugin": "^3.3.1",
+    "inquirer": "^9.3.0",
+    "ora": "^8.0.1",
+    "typescript": "^4.6.4",
+    "vite": "^4.4.1",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-dts": "^3.9.1"
+  },
+  "devDependencies": {
+    "@types/inquirer": "^9.0.7",
+    "rimraf": "^5.0.7",
+    "vue": "^3.2.37"
+  }
+}

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