feat: 初始化form包

Author: JessYan0913

main/src/components/SvgIcon.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, toRefs } from 'vue';
 const props = withDefaults(
   defineProps<{
     name: string;
@@ -16,7 +16,9 @@ const props = withDefaults(
   }
 );
 
-const fill = ref<string>(props.color);
+const { color } = toRefs(props);
+
+const fill = ref<string>(color.value);
 
 const svgSymbol = computed<string>(() => `#${props.prefix}-${props.name}`);
 </script>

packages/form/package.json

@@ -0,0 +1,47 @@
+{
+  "version": "0.0.1",
+  "name": "@pictode/form",
+  "sideEffects": [
+    "dist/*",
+    "src/theme/*"
+  ],
+  "main": "dist/pictode-form.umd.js",
+  "module": "dist/pictode-form.mjs",
+  "style": "dist/style.css",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/pictode-form.mjs",
+      "require": "./dist/pictode-form.umd.js"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    },
+    "./*": "./*"
+  },
+  "scripts": {
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
+    "@pictode/utils": "workspace:^0.0.1",
+    "element-plus": "^2.2.28",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.0",
+    "@types/lodash-es": "^4.17.4",
+    "@types/node": "^15.12.4",
+    "@types/sortablejs": "^1.10.7",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-sfc": "^3.2.37",
+    "rimraf": "^3.0.2",
+    "sass": "^1.35.1",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5",
+    "vue-tsc": "^1.8.5"
+  }
+}

packages/form/src/constants/injection-keys.ts

@@ -0,0 +1,5 @@
+import { InjectionKey } from 'vue';
+
+import { RadioCtx } from '@/types';
+
+export const RadioCtxKey: InjectionKey<RadioCtx<unknown>> = Symbol('RadioCtx');

packages/form/src/index.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ElForm } from 'element-plus';
+</script>
+
+<template>
+  <ElForm></ElForm>
+</template>

packages/form/src/main.ts

@@ -0,0 +1 @@
+export default {};

packages/form/src/types.ts

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {}
+  },
+  "include": ["src"]
+}

packages/form/tsconfig.build.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "../.."
+  },
+  "exclude": ["**/dist/**/*"]
+}

packages/form/tsconfig.json

@@ -0,0 +1,50 @@
+import path from 'path';
+
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+import pkg from './package.json';
+
+export default defineConfig({
+  plugins: [vue()],
+
+  resolve: {
+    alias:
+      process.env.NODE_ENV === 'production'
+        ? []
+        : [{ find: /^@pictode\/utils/, replacement: path.join(__dirname, '../utils/src/index.ts') }],
+  },
+
+  build: {
+    cssCodeSplit: false,
+    sourcemap: true,
+    minify: false,
+    target: 'esnext',
+
+    lib: {
+      entry: 'src/index.ts',
+      name: 'PictodeForm',
+      fileName: 'pictode-form',
+    },
+
+    rollupOptions: {
+      // 确保外部化处理那些你不想打包进库的依赖
+      external(id: string) {
+        return (
+          /^vue/.test(id) ||
+          /^element-plus/.test(id) ||
+          /^@edoms\//.test(id) ||
+          Object.keys(pkg.dependencies).some((k) => new RegExp(`^${k}`).test(id))
+        );
+      },
+
+      output: {
+        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
+        globals: {
+          vue: 'Vue',
+          'element-plus': 'ElementPlus',
+        },
+      },
+    },
+  },
+});