Merge pull request #332 from ecaps1038/monorepo-dev

Version 0.0.11
ecaps1038 · Mar 20, 2024 · 6e332b4 · 6e332b4
2 parents 31f010e + 396e28c
commit 6e332b4
Show file tree

Hide file tree

Showing 31 changed files with 461 additions and 1,419 deletions.
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "new": "node ./config/script/new-component.mjs",
     "postinstall": "npx husky install",
     "preinstall": "npx only-allow pnpm",
-    "version:release": "pnpm --filter @yike-design/ui release",
+    "version:release": "pnpm --filter @yike-design/ui release && git push --follow-tags",
     "build:comp": "pnpm --filter @yike-design/build build && pnpm --filter @yike-design/ui build:comp && pnpm --filter @yike-design/ui build:less",
     "build:less": "pnpm --filter @yike-design/build build && pnpm --filter @yike-design/ui build:less",
     "gen:icon": "pnpm --filter @yike-design/ui gen:icon",
@@ -32,12 +32,6 @@
     "@types/node": "^18.11.12",
     "@typescript-eslint/eslint-plugin": "^6.2.1",
     "@typescript-eslint/parser": "^6.2.1",
-    "@babel/core": "^7.14.6",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "^7.14.7",
-    "@babel/preset-typescript": "^7.14.5",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "eslint": "^8.46.0",

diff --git a/packages/demo-test/package.json b/packages/demo-test/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "vue": "^3.4.21",
-    "@yike-design/ui": "^0.0.8",
+    "@yike-design/ui": "workspace:*",
     "@yike-design/resolver": "workspace:*",
     "unplugin-vue-components": "^0.26.0",
     "unplugin-auto-import": "^0.17.5"

diff --git a/packages/demo-test/src/App.vue b/packages/demo-test/src/App.vue
@@ -1,22 +1,80 @@
 <script setup lang="ts">
 import HelloWorld from './components/HelloWorld.vue'
+import { getCurrentInstance, ref } from 'vue'
+const proxy: any = getCurrentInstance()?.proxy
 // import { YkButton } from '@yike-design/ui'
+const handleClick = () => {
+  proxy.$message({ type: 'primary', message: '通用提示' })
+}
+const visible = ref<boolean>(false)
+const showModal = () => {
+  visible.value = true
+}
+function handleChange(value) {
+  console.log('一级菜单：', value)
+}
+
+function handleSelected(value) {
+  console.log(value)
+}
 </script>
 
 <template>
-  <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <yk-space>
-    <yk-button>主要按钮</yk-button>
-    <yk-button type="secondary">次要按钮</yk-button>
-    <yk-button type="outline">线框按钮</yk-button>
-    <IconCupOutline />
+  <yk-space dir="vertical">
+    <div>
+      <a href="https://vitejs.dev" target="_blank">
+        <img src="/vite.svg" class="logo" alt="Vite logo" />
+      </a>
+      <a href="https://vuejs.org/" target="_blank">
+        <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
+      </a>
+    </div>
+    <yk-space>
+      <yk-button @click="handleClick">主要按钮</yk-button>
+      <yk-button type="secondary">次要按钮</yk-button>
+      <yk-button type="outline">线框按钮</yk-button>
+      <IconCupOutline />
+    </yk-space>
+    <yk-space dir="vertical">
+      <yk-input-search loading placeholder="正在查找..." style="width: 360px" />
+      <yk-input-search style="width: 360px">
+        <template #prefix>
+          <IconSearchOutline />
+        </template>
+        <template #suffix>
+          <yk-button type="secondary">搜索</yk-button>
+        </template>
+      </yk-input-search>
+      <yk-input-search size="xl" placeholder="搜点什么" style="width: 360px">
+        <template #suffix>
+          <yk-button size="xl"><IconSearchOutline /></yk-button>
+        </template>
+      </yk-input-search>
+      <yk-modal v-model="visible" title="这里是标题">
+        <span>这一块是modal对话框的内容部分，这里支持各种标签，组件</span>
+      </yk-modal>
+
+      <yk-button @click="showModal">modal 对话框</yk-button>
+    </yk-space>
+    <yk-dropdown
+      title="下拉菜单"
+      @visible-change="handleChange"
+      @selected="handleSelected"
+    >
+      <yk-dropdown-item value="1">Action 1</yk-dropdown-item>
+      <yk-dropdown-item value="2">Action 2</yk-dropdown-item>
+      <yk-dropdown-item value="3" submenu>
+        <template #title>
+          Action 3
+          <IconRightOutline />
+        </template>
+        <yk-dropdown-item value="11">Action 11</yk-dropdown-item>
+        <yk-dropdown-item value="22">Action 22</yk-dropdown-item>
+        <yk-dropdown-item value="33">Action 33</yk-dropdown-item>
+      </yk-dropdown-item>
+      <yk-dropdown-item value="4">Action 4</yk-dropdown-item>
+      <yk-dropdown-item value="5">Action 5</yk-dropdown-item>
+    </yk-dropdown>
   </yk-space>
   <HelloWorld msg="Vite + Vue" />
 </template>

diff --git a/packages/demo-test/src/main.ts b/packages/demo-test/src/main.ts
@@ -2,5 +2,12 @@ import { createApp } from 'vue';
 import './style.css';
 import App from './App.vue';
 import '@yike-design/ui/es/components/styles/index.less';
+import { YkTitle, YkMessage, YkNotification, vLoading } from '@yike-design/ui';
 
-createApp(App).mount('#app');
+const app = createApp(App);
+app.component(YkTitle.name, YkTitle).mount('#app');
+
+app.directive('loading', vLoading);
+
+app.config.globalProperties.$notification = YkNotification;
+app.config.globalProperties.$message = YkMessage;
diff --git a/packages/yike-design-build/bin/index.js b/packages/yike-design-build/bin/index.js
diff --git a/packages/yike-design-build/scripts/build-style/index.ts b/packages/yike-design-build/scripts/build-style/index.ts
@@ -71,6 +71,20 @@ function cssjsPlugin(): Plugin {
     async generateBundle(outputOptions, bundle) {
       for (const filename of Object.keys(bundle)) {
         // const chunk = bundle[filename];
+        const indexExist = fs.existsSync(
+          resolvePath('es\\', filename.replace('index.js', 'index.css')),
+        );
+        if (!indexExist) {
+          this.emitFile({
+            type: 'asset',
+            fileName: filename.replace('index.js', 'index.css'),
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            // FIX ME
+            // Change the content of index.js to be correct
+            source: '',
+          });
+        }
         this.emitFile({
           type: 'asset',
           fileName: filename.replace('index.js', 'css.js'),

diff --git a/packages/yike-design-demo/auto-imports.d.ts b/packages/yike-design-demo/auto-imports.d.ts
@@ -0,0 +1,7 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {}
diff --git a/packages/yike-design-demo/src/router/config/components.json b/packages/yike-design-demo/src/router/config/components.json
@@ -1,4 +1,13 @@
 [
+  {
+    "title": "安装",
+    "list": [
+      {
+        "name": "快速上手",
+        "src": "startup"
+      }
+    ]
+  },
   {
     "title": "通用",
     "list": [

diff --git a/packages/yike-design-demo/src/router/modules/general.ts b/packages/yike-design-demo/src/router/modules/general.ts
@@ -1,6 +1,10 @@
 import { RouteRecordRaw } from 'vue-router';
 
 const generalRoutes: Array<RouteRecordRaw> = [
+  {
+    path: 'startup',
+    component: () => import('@/views/develop/getting-started.md'),
+  },
   {
     path: 'color',
     component: () => import('@/examples/color/doc.md'),

diff --git a/packages/yike-design-demo/src/views/HomeView.vue b/packages/yike-design-demo/src/views/HomeView.vue
@@ -19,7 +19,7 @@ const goPage = (path: string) => router.push({ path })
 
     <!-- start -->
     <div class="start-btns">
-      <yk-button size="l" @click="goPage('develop')">开始使用</yk-button>
+      <yk-button size="l" @click="goPage('module/startup')">开始使用</yk-button>
       <yk-button type="secondary" size="l" @click="goPage('design')">
         设计文件
       </yk-button>

diff --git a/packages/yike-design-demo/src/views/develop/getting-started.md b/packages/yike-design-demo/src/views/develop/getting-started.md
@@ -14,6 +14,7 @@ npm install --save-dev @yike-design/ui
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { YikeResolver } from '@yike-design/resolver' // https://vitejs.dev/config/ export default
+
 defineConfig({
   plugins: [
     vue(),
@@ -27,6 +28,13 @@ main.ts
 
 ```ts
 import '@yike-design/ui/es/components/styles/index.less'
+// 引入全局方法
+import { YkMessage, YkNotification } from '@yike-design/ui'
+
+const app = createApp(App)
+
+app.config.globalProperties.$notification = YkNotification
+app.config.globalProperties.$message = YkMessage
 ```
 
 package.json

diff --git a/packages/yike-design-resolver/src/index.ts b/packages/yike-design-resolver/src/index.ts
@@ -1,61 +1,5 @@
-export { YikeResolver } from './yike';
-const matchComponents = [
-  { pattern: /^YkUpload$/, componentDir: 'upload' },
-  { pattern: /^(YkRadio|YkRadioGroup)$/, componentDir: 'radio' },
-  { pattern: /^(YkCheckbox|YkCheckboxGroup)$/, componentDir: 'checkbox' },
-  { pattern: /^YkAnchor$/, componentDir: 'anchor' },
-  { pattern: /^YkPopover$/, componentDir: 'popover' },
-  { pattern: /^YkSwitch$/, componentDir: 'switch' },
-  { pattern: /^YkDrawer$/, componentDir: 'drawer' },
-  { pattern: /^(YkTable|YkTableColumn)$/, componentDir: 'table' },
-  { pattern: /^(YkBreadcrumb|YkBreadcrumbItem)$/, componentDir: 'breadcrumb' },
-  { pattern: /^YkBadge$/, componentDir: 'badge' },
-  { pattern: /^YkScrollbar$/, componentDir: 'scrollbar' },
-  { pattern: /^YkRate$/, componentDir: 'rate' },
-  { pattern: /^YkAffix$/, componentDir: 'affix' },
-  { pattern: /^YkInput$/, componentDir: 'input' },
-  { pattern: /^YkInputSearch$/, componentDir: 'input-search' },
-  { pattern: /^YkTree$/, componentDir: 'tree' },
-  { pattern: /^YkTreeSelect$/, componentDir: 'tree-select' },
-  { pattern: /^YkSlider$/, componentDir: 'slider' },
-  { pattern: /^YkCollapse$/, componentDir: 'collapse' },
-  { pattern: /^YkCollapseGroup$/, componentDir: 'collapse' },
-  { pattern: /^YkPopconfirm$/, componentDir: 'popconfirm' },
-  { pattern: /^YkInputNumber$/, componentDir: 'input-number' },
-  { pattern: /^(YkTabs|YkTabPane)$/, componentDir: 'tabs' },
-  { pattern: /^(YkForm|YkFormItem)$/, componentDir: 'form' },
-  { pattern: /^YkInputTag$/, componentDir: 'input-tag' },
-  { pattern: /^YkPagination$/, componentDir: 'pagination' },
-  { pattern: /^YkTextArea$/, componentDir: 'text-area' },
-  { pattern: /^YkTag$/, componentDir: 'tag' },
-  { pattern: /^YkCalendar$/, componentDir: 'calendar' },
-  { pattern: /^YkSkeleton$/, componentDir: 'skeleton' },
-  { pattern: /^YkDivider$/, componentDir: 'divider' },
-  { pattern: /^YkLink$/, componentDir: 'link' },
-  { pattern: /^YkAlert$/, componentDir: 'alert' },
-  { pattern: /^YkButton$/, componentDir: 'button' },
-  { pattern: /^YkTheme$/, componentDir: 'theme' },
-  { pattern: /^YkIcon$/, componentDir: 'icon' },
-  { pattern: /^(YkAvatar|YkAvatarGroup)$/, componentDir: 'avatar' },
-  { pattern: /^YkSpace$/, componentDir: 'space' },
-  { pattern: /^(YkTimeline|YkTimelineItem)$/, componentDir: 'timeline' },
-  { pattern: /^YkMessage$/, componentDir: 'message' },
-  { pattern: /^YkNotification$/, componentDir: 'notification' },
-  { pattern: /^(YkParagraph|YkTitle|YkText)$/, componentDir: 'typography' },
-  { pattern: /^YkBackTop$/, componentDir: 'back-top' },
-  { pattern: /^YkTooltip$/, componentDir: 'tooltip' },
-  { pattern: /^YkEmpty$/, componentDir: 'empty' },
-  { pattern: /^YkProgress$/, componentDir: 'progress' },
-  { pattern: /^YkModal$/, componentDir: 'modal' },
-  { pattern: /^(YkDropdown|YkDropdownItem)$/, componentDir: 'dropdown' },
-  {
-    pattern: /^(YkImage|YkImagePreview|YkImagePreviewGroup)$/,
-    componentDir: 'image',
-  },
-  { pattern: /^YkSpinner$/, componentDir: 'spinner' },
-  { pattern: /^vLoading$/, componentDir: 'directive' },
-];
-
+export { YikeResolver, matchComponents } from './yike';
+import { matchComponents } from './yike';
 export function kebabCase(key: string) {
   const result = key.replace(/([A-Z])/g, ' $1').trim();
   return result.split(' ').join('-').toLowerCase();

diff --git a/packages/yike-design-resolver/src/yike.ts b/packages/yike-design-resolver/src/yike.ts
@@ -1,7 +1,7 @@
 import type { ComponentInfo, ComponentResolver } from './types';
 import { isExclude } from './_utils';
 
-const matchComponents = [
+export const matchComponents = [
   { pattern: /^YkUpload$/, componentDir: 'upload' },
   { pattern: /^(YkRadio|YkRadioGroup)$/, componentDir: 'radio' },
   { pattern: /^(YkCheckbox|YkCheckboxGroup)$/, componentDir: 'checkbox' },
@@ -149,7 +149,7 @@ export interface YikeResolverOptions {
 /**
  * Resolver for Yike Design Vue
  *
- * Requires Yike-design/[email protected] or later
+ * Requires @yike-design/[email protected] or later
  *
  * @author @flsion
  * @link https://Yike.design/ for Yike-design