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

package/templates/lib/components/common/src/utils/src/throttle.ts

@@ -0,0 +1,41 @@
+export const throttle = (
+  fn: (...args: any)=> any,
+  wait: number,
+  options: { leading?: boolean; trailing?: boolean } = {}
+) => {
+  let timeout: any = null;
+  let previous = 0;
+
+  const throttled = (...args: any) => {
+    const nowDate = +new Date();
+
+    if (!previous && options.leading === false) {
+      previous = nowDate;
+    }
+
+    const remaining = wait - (nowDate - previous);
+
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      previous = nowDate;
+      fn(...args);
+    } else if (!timeout && options.trailing !== false) {
+      timeout = setTimeout(() => {
+        previous = options.leading === false ? 0 : +new Date();
+        timeout = null;
+        fn(...args);
+      }, remaining);
+    }
+  };
+
+  // 手动取消
+  throttled.cancel = function () {
+    clearTimeout(timeout);
+    previous = 0;
+    timeout = null;
+  };
+  return throttled;
+};

package/templates/lib/components/common/src/utils/src/transition.ts

@@ -0,0 +1,14 @@
+export const getSlideTransitionName = (position: string | undefined) => {
+  switch (position) {
+    case 'bottom':
+      return 'fm-slide-up';
+    case 'top':
+      return 'fm-slide-down';
+    case 'left':
+      return 'fm-slide-left';
+    case 'right':
+      return 'fm-slide-right';
+    default:
+      return 'fm-fade';
+  }
+};

package/templates/lib/components/common/src/utils/src/type.ts

@@ -0,0 +1,105 @@
+export const inBrowser = typeof window !== 'undefined';
+
+export const inIOS = () => /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent);
+
+export const inAndroid = () => /(Android|Adr)/i.test(navigator.userAgent);
+
+export function isDef<T>(val: T): val is NonNullable<T> {
+  return val !== undefined && val !== null;
+}
+
+export function isNull(val: unknown): val is null {
+  return val === null;
+}
+
+export function isUndefined(val: unknown): val is undefined {
+  return val === undefined;
+}
+
+export function isString(val: unknown): val is string {
+  return typeof val === 'string';
+}
+
+export function isNumber(val: unknown): val is number {
+  return typeof val === 'number';
+}
+
+export function isBoolean(val: unknown): val is null {
+  return typeof val === 'boolean';
+}
+
+export const { isArray } = Array;
+
+export function isSymbol(val: unknown): val is symbol {
+  return typeof val === 'symbol';
+}
+
+export function isFunction(val: unknown): val is FunctionConstructor {
+  return typeof val === 'function';
+}
+
+export function isObject(val: unknown): val is Record<any, any> {
+  return val !== null && typeof val === 'object';
+}
+
+export function isPromise<T = any>(val: unknown): val is Promise<T> {
+  return isObject(val) && isFunction(val.then) && isFunction(val.catch);
+}
+
+export function isNumeric(val: string) {
+  return /^-?\d+(\.\d+)?$/.test(val);
+}
+
+export function isDate(val: unknown): val is Date {
+  return typeof val === 'object' && val instanceof Date;
+}
+
+export function getType(val: unknown) {
+  let type: string;
+  switch (val) {
+    case isString(val):{
+      type = 'string';
+      break;
+    }
+    case isNumber(val):{
+      type = 'number';
+      break;
+    }
+    case isDate(val):{
+      type = 'date';
+      break;
+    }
+    case isNull(val):{
+      type = 'null';
+      break;
+    }
+    case isUndefined(val):{
+      type = 'undefined';
+      break;
+    }
+    case isArray(val):{
+      type = 'array';
+      break;
+    }
+    case isSymbol(val):{
+      type = 'symbol';
+      break;
+    }
+    case isFunction(val):{
+      type = 'function';
+      break;
+    }
+    case isPromise(val):{
+      type = 'promise';
+      break;
+    }
+    case isObject(val):{
+      type = 'object';
+      break;
+    }
+    default:
+      type = typeof val;
+      break;
+  }
+  return type;
+}

package/templates/lib/components/common/src/utils/src/use-appearance.ts

@@ -0,0 +1,33 @@
+/**
+ * 根据传递过来已有的类对象和自定义类名，构造新的样式对象
+ * @param classObject 
+ * @param customClass 
+ * @returns 
+ */
+export function getCustomClass(classObject: Record<string, any>, customClass: string) {
+    const customClassArray = customClass?.split(' ') || [];
+    customClassArray.reduce((result: Record<string, boolean>, classString: string) => {
+        if (classString) {
+            result[classString] = true;
+        }
+        return result;
+    }, classObject);
+    return classObject;
+}
+/**
+ * 根据传递过来已有的style对象和自定义style，构造新的style对象
+ * @param styleObject 
+ * @param customStyle 
+ * @returns 
+ */
+export function getCustomStyle(styleObject: Record<string, any>, customStyle: string) {
+    const styleArray = customStyle?.split(';') || [];
+    styleArray.reduce((result: Record<string, any>, styleString: string) => {
+        if (styleString) {
+            const styles = styleString.split(':');
+            result[styles[0]] = styles[1];
+        }
+        return result;
+    }, styleObject);
+    return styleObject;
+}

package/templates/lib/components/common/src/utils/src/with-install.ts

@@ -0,0 +1,16 @@
+import type { App, Component } from 'vue';
+
+export type WithInstall<T> = T & {
+  install(app: App): void;
+};
+
+export function withInstall<T extends Component>(options: T) {
+  (options as Record<string, unknown>).install = (app: App) => {
+    const { name } = options;
+    if (name) {
+      app.component(name, options);
+    }
+  };
+
+  return options as WithInstall<T>;
+}

package/templates/lib/components/common/src/utils/src/with-register-designer.ts

@@ -0,0 +1,16 @@
+import type { App, Component } from 'vue';
+
+export type WithRegisterDesigner<T> = T & {
+  registerDesigner(app: App): void;
+};
+
+export function withRegisterDesigner<T extends Component>(component: T, options: { name: string, designerComponent: Component, propsResolver: (schemaValue?: Record<string, any>) => Record<string, any> }) {
+  const { name, designerComponent, propsResolver } = options;
+
+  (component as Record<string, unknown>).registerDesigner = (componentMap: Record<string, any>, propsResolverMap: Record<string, any>, configResolverMap: Record<string, any>, resolverMap: Record<string, any>) => {
+    componentMap[name] = designerComponent;
+    propsResolverMap[name] = propsResolver;
+  };
+
+  return component as WithRegisterDesigner<T>;
+}

package/templates/lib/components/common/src/utils/src/with-register.ts

@@ -0,0 +1,16 @@
+import type { App, Component } from 'vue';
+
+export type WithRegister<T> = T & {
+  register(app: App): void;
+};
+
+export function withRegister<T extends Component>(component: T, options: { name: string, propsResolver: (schemaValue?: Record<string, any>) => Record<string, any> }) {
+  const { name, propsResolver } = options;
+
+  (component as Record<string, unknown>).register = (componentMap: Record<string, any>, propsResolverMap: Record<string, any>, configResolverMap: Record<string, any>, resolverMap: Record<string, any>) => {
+    componentMap[name] = component;
+    propsResolverMap[name] = propsResolver;
+  };
+
+  return component as WithRegister<T>;
+}

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

@@ -0,0 +1,131 @@
+import { ComputedRef, Ref } from "vue";
+
+export interface TextBoxProps {
+
+    customClass: string;
+
+    disabled: boolean;
+
+    editable: boolean;
+
+    enableClear: boolean;
+
+    enableTitle: boolean;
+
+    forcePlaceholder: boolean;
+
+    modelValue: string;
+
+    placeholder: string;
+
+    readonly: boolean;
+
+    textAlign: string;
+
+    showBorder: boolean;
+
+    updateOn: 'blur' | 'change';
+}
+
+export interface UseClear {
+
+    clearButtonClass: ComputedRef<Record<string, boolean>>;
+
+    clearButtonStyle: ComputedRef<Record<string, any>>;
+
+    hasShownClearButton: Ref<boolean>;
+
+    onClearValue: ($event: MouseEvent) => void;
+
+    onMouseEnter: ($event: MouseEvent) => void;
+
+    onMouseLeave: ($event: MouseEvent) => void;
+
+    shouldShowClearButton: ComputedRef<boolean>;
+}
+
+export interface UseTextBox {
+
+    changeTextBoxValue: (newValue: string, shouldEmitChangeEvent: boolean) => void;
+
+    disabled?: Ref<boolean>;
+
+    displayText?: Ref<string>;
+
+    editable?: Ref<boolean>;
+
+    hasFocused?: ComputedRef<boolean>;
+
+    inputGroupClass: ComputedRef<Record<string, boolean>>;
+
+    inputType: Ref<string>;
+
+    isEmpty: ComputedRef<boolean>;
+
+    modelValue?: Ref<string>;
+
+    readonly?: ComputedRef<boolean>;
+
+    onBlur?: (payload: FocusEvent) => boolean;
+
+    onClick?: (payload: MouseEvent) => void;
+
+    onFocus?: (payload: FocusEvent) => void;
+
+    onInput?: (payload: Event) => void;
+
+    onKeydown?: (payload: KeyboardEvent) => void;
+
+    onKeyup?: (payload: KeyboardEvent) => void;
+
+    onMousedown?: (payload: MouseEvent) => void;
+
+    onTextBoxValueChange?: (payload: Event) => void;
+
+    placeholder: ComputedRef<string>;
+
+    textBoxClass: ComputedRef<Record<string, boolean>>;
+
+    textBoxTitle: ComputedRef<string>;
+
+    inputGroupStyle: ComputedRef<string>;
+}
+
+export interface UseDateFormat {
+    formatTo: (date: string | Date, format: string) => string;
+}
+export type NumberType = string | number;
+export interface NumberOption {
+    prefix?: string;
+    suffix?: string;
+    decimalSeparator?: string;
+    groupSeparator?: string;
+    [key: string]: any;
+}
+export interface UseNumberFormat {
+    formatTo: (value: NumberType, opts: any) => string;
+    removeFormat: (value: NumberType | null | undefined, opts: any) => string;
+    convertCurrency: (money: string) => string;
+    toFixed: (value: string, precision: number) => string;
+    toNumber: (value: string) => number;
+    greaterThan: (firstValue: NumberType, secondValue: NumberType) => boolean;
+    lessThan: (firstValue: NumberType, secondValue: NumberType) => boolean;
+    equal: (firstValue: NumberType, secondValue: NumberType) => boolean;
+    minus: (firstValue: NumberType, secondValue: NumberType) => string;
+    multiplied: (firstValue: NumberType, secondValue: NumberType) => string;
+    plus: (firstValue: NumberType, secondValue: NumberType) => string;
+    average: (total: NumberType, len: number) => string;
+    sum: (numberArray: NumberType[]) => string;
+    min: (firstValue: Array<NumberType> | NumberType, secondValue: NumberType | null) => string;
+    max: (firstValue: Array<NumberType> | NumberType, secondValue: NumberType | null) => string;
+}
+
+export type TimeAgoDate = Date | string | number;
+export type TimeAgoOptions = {
+    // 可能后期有其他属性
+    /** 相对的日期 */
+    readonly relativeDate?: TimeAgoDate;
+};
+export interface UseTimeAgoFormat {
+    formatTo(date: TimeAgoDate, opts?: TimeAgoOptions): string
+}

package/templates/lib/farris.config.mjs

@@ -1,35 +1,56 @@
 import { fileURLToPath, URL } from 'node:url';
 
+const { BUILD_TYPE } = process.env;
+const externalDependencies = BUILD_TYPE !== 'app';
+const externals = [BUILD_TYPE === 'components' ? "@components" : ''];
+const outDir = BUILD_TYPE === 'app' ? "dist" : 'package';
 export default {
-  // 库模式配置
-  lib: {
-    // 入口 默认值 './src/main.ts'
-    entry: './packages/index.ts', 
-    // 库名称
-    name: "<%= name %>",
-    // 输出文件名
-    fileName: "index",
-    // 输出文件格式 默认值 ["es", 'systemjs']
-    formats: <%= formats %>, 
-  },
+  format: "<%= format %>",
   // 输出目录  App模式默认值 './dist' Lib模式 './lib'
   // outDir: fileURLToPath(new URL('./dist', import.meta.url)),
-  // 最小化 默认值 true
+  // 压缩代码 默认值 true
   minify: true,
   // 外部依赖排除项 默认值 { include: [], exclude: [] }
   // externals: {
   //   include: [],
   //   exclude: []
   // },
+  externals: {
+    include: externals,
+    filter: (externals) => {
+      return (id) => {
+        return externals.find((item) => item && id.indexOf(item) === 0);
+      };
+    }
+  },
   // 是否排除 package.json 中 dependencies和 peerDependencies 依赖的包; App模式默认值 false Lib模式默认值 true
-  externalDependencies: true,
+  externalDependencies,
   // 路径别名 默认值 null
   alias: [
-    { find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
-    { find: '@packages', replacement: fileURLToPath(new URL('./packages', import.meta.url)) },
+    { find: '@', replacement: fileURLToPath(new URL('./', import.meta.url)) },
+    { find: '@components', replacement: fileURLToPath(new URL('./components', import.meta.url)) }
   ],
+  // 打包后产物路径
+  outDir: fileURLToPath(new URL(`./${outDir}`, import.meta.url)),
+  // 开发者模式 本地启动服务
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:5173",
+        changeOrigin: true,
+        secure: false
+      }
+    }
+  },
+  lib: {
+    entry: fileURLToPath(new URL('./components/index.ts', import.meta.url)),
+    name: "",
+    fileName: "index",
+    formats: ["esm", 'umd', 'systemjs'],
+  },
+  target: 'es2015',
   // 插件 默认值 [vue(), vueJsx()] 不要重复添加
   // plugins: [],
   // viteConfig 配置项
   viteConfig: {}
-}
+};

package/templates/lib/index.html

@@ -1,12 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/lib/package.json

@@ -1,29 +1,29 @@
-{
-  "name": "<%= name %>",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "main": "./dist/index.umd.js",
-  "module": "./dist/index.js",
-  "scripts": {
-    "dev": "farris-cli dev",
-    "build": "farris-cli build-lib",
-    "preview": "farris-cli preview",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "format": "prettier --write src/"
-  },
-  "dependencies": {
-    "vue": "^3.4.29"
-  },
-  "devDependencies": {
-    "@farris/cli": "<%= cliVersion %>",
-    "@rushstack/eslint-patch": "^1.8.0",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^13.0.0",
-    "@vue/tsconfig": "^0.5.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.23.0",
-    "prettier": "^3.2.5",
-    "typescript": "~5.4.0"
-  }
+{
+  "name": "<%= name %>",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "farris-cli dev",
+    "build": "farris-cli build",
+    "preview": "farris-cli preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@farris/ui-vue": "latest",
+    "vue": "^3.4.29",
+    "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "@farris/cli": "<%= cliVersion %>",
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/tsconfig": "^0.5.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "prettier": "^3.2.5",
+    "typescript": "~5.4.0"
+  }
 }

package/templates/lib/src/App.vue

@@ -1,5 +1,80 @@
-<template>
-  <div>App</div>
-  <app-button></app-button>
-</template>
-
+<script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router';
+</script>
+
+<template>
+  <header>
+    <div class="wrapper">
+      <nav>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
+      </nav>
+    </div>
+  </header>
+
+  <RouterView />
+</template>
+
+<style scoped>
+header {
+  line-height: 1.5;
+  max-height: 100vh;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+nav {
+  width: 100%;
+  font-size: 12px;
+  text-align: center;
+  margin-top: 2rem;
+}
+
+nav a.router-link-exact-active {
+  color: var(--color-text);
+}
+
+nav a.router-link-exact-active:hover {
+  background-color: transparent;
+}
+
+nav a {
+  display: inline-block;
+  padding: 0 1rem;
+  border-left: 1px solid var(--color-border);
+}
+
+nav a:first-of-type {
+  border: 0;
+}
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  nav {
+    text-align: left;
+    margin-left: -1rem;
+    font-size: 1rem;
+
+    padding: 1rem 0;
+    margin-top: 1rem;
+  }
+}
+</style>

package/templates/lib/src/components/TheButton.vue

@@ -0,0 +1,3 @@
+<template>
+  <f-button>按钮</f-button>
+</template>

package/templates/lib/src/main.ts

@@ -1,9 +1,10 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import componentsLib from "@packages/index";
-
-const app = createApp(App)
-
-app.use(componentsLib)
-
-app.mount('#app')
+import { createApp } from 'vue';
+import FarrisVue from '@farris/ui-vue';
+import App from './App.vue';
+import router from './router';
+
+const app = createApp(App);
+
+app.use(router).use(FarrisVue);
+
+app.mount('#app');

package/templates/lib/src/router/index.ts

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import HomeView from '../views/HomeView.vue';
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView
+    },
+    {
+      path: '/about',
+      name: 'about',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/AboutView.vue')
+    }
+  ]
+});
+
+export default router;