dnhyxc-ui-vue 1.0.0

package/packages/script/build/buildfull.ts

@@ -0,0 +1,77 @@
+import { defineConfig } from 'vite';
+// import { rmSync } from 'fs';
+import vue from '@vitejs/plugin-vue';
+// import AutoImport from 'unplugin-auto-import/vite';
+// import Components from 'unplugin-vue-components/vite';
+// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+// import path from 'path';
+import dts from 'vite-plugin-dts';
+import { external } from './external';
+
+// 打包前先删除 dist 目录
+// rmSync('dist', { recursive: true, force: true });
+
+// 组件库打包配置
+export default defineConfig({
+  build: {
+    // 打包输出目录
+    outDir: 'dist',
+    // 构建库模式
+    lib: {
+      // 组件库入口文件
+      entry: '',
+      // 输出格式
+      formats: ['es', 'umd']
+      // // 输出文件名
+      // fileName: (format) => `index.${format}.js`,
+      // // 在 UMD 构建模式下为这个包指定一个全局变量名称
+      // name: 'dnhyxc-ui-plus'
+    },
+    rollupOptions: {
+      // 外部化处理依赖
+      external,
+      input: ['./index.ts'],
+      output: [
+        {
+          // 输出文件名格式
+          entryFileNames: '[name].mjs',
+          // 输出格式为 ES Module
+          format: 'es',
+          // ES Module 格式文件的输出目录
+          // dir: './dist',
+          chunkFileNames: 'dist/index.mjs',
+          // 保持目录结构
+          // preserveModules: true,
+          // 指定输出文件的根目录，将所有模块放在 components 目录下，这样可以保持更清晰的目录结构
+          // preserveModulesRoot: 'src',
+          assetFileNames: 'index.[ext]'
+        },
+        {
+          entryFileNames: '[name].js',
+          chunkFileNames: 'dist/index.cjs',
+          format: 'cjs',
+          name: 'dnhyxc-ui-plus',
+          // 输出文件夹
+          dir: './dist',
+          // 保持目录结构
+          // preserveModules: true,
+          // // 输出目录
+          // preserveModulesRoot: 'src',
+          assetFileNames: 'index.[ext]'
+          // UMD格式下需要指定全局变量名， 这样在浏览器中通过 <script> 标签引入时，就会从 window.Vue 获取 Vue 依赖
+          // globals: {
+          //   vue: 'Vue'
+          // }
+        }
+      ]
+    }
+  },
+  plugins: [
+    vue(),
+    // 生成组件的类型声明文件
+    dts({
+      include: ['./**/*'],
+      outDir: ['./dist']
+    })
+  ]
+});

package/packages/script/build/external.ts

@@ -0,0 +1,21 @@
+export const external = [
+  'vue',
+  'node_modules',
+  '@dnhyxc-ui/utils',
+  'element-plus',
+  'element-plus/dist/index.css',
+  'monaco-editor',
+  'monaco-editor/esm/vs/editor/editor.api.js',
+  'monaco-editor/esm/vs/language/json/json.worker?worker',
+  'monaco-editor/esm/vs/language/css/css.worker?worker',
+  'monaco-editor/esm/vs/language/html/html.worker?worker',
+  'monaco-editor/esm/vs/language/typescript/ts.worker?worker',
+  'monaco-editor/esm/vs/editor/editor.worker?worker',
+  'prettier/parser-markdown',
+  'prettier/parser-babel',
+  'prettier/parser-typescript',
+  'prettier/parser-html',
+  'prettier/parser-yaml',
+  'prettier/parser-postcss',
+  'prettier'
+];

package/packages/script/build/index.ts

@@ -0,0 +1,22 @@
+import { series, parallel, src, dest } from 'gulp';
+import { componentPath } from '../utils/paths';
+import glupSass from 'gulp-sass';
+import * as dartSass from 'sass';
+import autoprefixer from 'gulp-autoprefixer';
+import cleanCSS from 'gulp-clean-css';
+
+//打包样式
+export const buildStyle = () => {
+  return src(`${componentPath}/**/**.scss`)
+    .pipe(glupSass(dartSass)())
+    .pipe(
+      autoprefixer(
+        { cascade: false } //文件不缓存
+      )
+    )
+    .pipe(cleanCSS({ compatibility: 'ie8' })) // 压缩css文件
+    .pipe(dest(`${componentPath}/es`))
+    .pipe(dest(`${componentPath}/lib`));
+};
+
+export default series(parallel(async () => buildStyle()));

package/packages/script/utils/delPath.ts

@@ -0,0 +1,30 @@
+import fs from 'fs';
+import { resolve } from 'path';
+import { pkgPath } from './paths';
+//保留的文件
+const stayFile = ['README.md'];
+
+const delPath = async (path: string) => {
+  let files: string[] = [];
+
+  if (fs.existsSync(path)) {
+    files = fs.readdirSync(path);
+
+    files.forEach(async (file) => {
+      let curPath = resolve(path, file);
+
+      if (fs.statSync(curPath).isDirectory()) {
+        // recurse
+        if (file != 'node_modules') await delPath(curPath);
+      } else {
+        // delete file
+        if (!stayFile.includes(file)) {
+          fs.unlinkSync(curPath);
+        }
+      }
+    });
+
+    if (path != `${pkgPath}/dnhyxc-ui-plus`) fs.rmdirSync(path);
+  }
+};
+export default delPath;

package/packages/script/utils/paths.ts

@@ -0,0 +1,7 @@
+import { resolve } from 'path';
+
+//组件库根目录
+export const componentPath = resolve(__dirname, '../../components');
+
+//pkg根目录
+export const pkgPath = resolve(__dirname, '../../../');

package/packages/theme/gulpfile.js

@@ -0,0 +1,41 @@
+'use strict';
+
+import gulp from 'gulp';
+import autoprefixer from 'gulp-autoprefixer';
+// const sass = require('gulp-sass')(require('sass'));
+import gulpSass from 'gulp-sass';
+import * as sass from 'sass';
+// import cssmin from 'gulp-cssmin';
+import cleanCSS from 'gulp-clean-css';
+
+const _sass = gulpSass(sass);
+
+// // import autoprefixer from 'gulp-autoprefixer';
+// // import cssmin from 'gulp-cssmin';
+// const gulp = require('gulp'); // gulp 编译 scss文件的插件
+// const sass = require('gulp-sass')(require('sass')); // gulp 编译 scss文件的插件
+// const autoprefixer = require('gulp-autoprefixer'); // 根据设置浏览器版本自动处理浏览器前缀的插件
+// const cssmin = require('gulp-cssmin'); // 压缩css文件的插件
+
+gulp.task('sass', function () {
+  // 新建 compile 任务
+  return gulp
+    .src('./src/*.scss') // 匹配所有的 src目录下的 scss 文件
+    .pipe(_sass())
+    .pipe(
+      autoprefixer({
+        // 设置浏览器自动前缀
+        cascade: false //文件不缓存
+      })
+    )
+    .pipe(cleanCSS({ compatibility: 'ie8' })) // 压缩css文件
+    .pipe(gulp.dest('./dist')); //将编译后的文件放在 lib 目录下
+});
+
+// gulp.task('copyfont', function () {
+//   // iconfont 图标编译任务
+//   return gulp
+//     .src('./src/fonts/**') // 匹配 iconfont 目录下的所有文件
+//     .pipe(cssmin()) // 压缩匹配文件
+//     .pipe(gulp.dest('./lib/fonts')); // 将文件输出带 lib/fonts 目录下
+// });

package/packages/theme/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@dnhyxc-ui/theme",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "build": "gulp sass"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "browserslist": [
+    "last 2 versions",
+    "ie >= 9"
+  ]
+}

package/packages/theme/src/icon.scss

@@ -0,0 +1,8 @@
+@use 'mixins/mixins.scss' as *;
+
+@include b(icon) {
+  display: inline-flex;
+  height: 1em;
+  width: 1em;
+  vertical-align: middle;
+}

package/packages/theme/src/icon2.scss

@@ -0,0 +1,8 @@
+@use 'mixins/mixins.scss' as *;
+
+@include b(icon2) {
+  display: inline-flex;
+  height: 1em;
+  width: 1em;
+  vertical-align: middle;
+}

package/packages/theme/src/index.scss

@@ -0,0 +1,2 @@
+@use './icon.scss';
+@use './icon2.scss';

package/packages/theme/src/mixins/config.scss

@@ -0,0 +1,4 @@
+$namespace: 'n';
+$element-separator: '__';
+$modifier-separator: '--';
+$state-prefix: 'is-';

package/packages/theme/src/mixins/mixins.scss

@@ -0,0 +1,80 @@
+@use 'config' as *;
+@forward 'config';
+
+/**
+ * 用于定义组件的基础样式
+ * @param {string} $block - 组件名称
+ * @example
+ *   @include b(button) {
+ *     color: red;
+ *   }
+ * 编译后:
+ *   .el-button {
+ *     color: red;
+ *   }
+ */
+@mixin b($block) {
+  $B: $namespace + '-' + $block;
+  .#{$B} {
+    @content;
+  }
+}
+/**
+ * 用于定义组件的状态样式
+ * @param {string} $state - 状态名称
+ * @example
+ *   @include when(active) {
+ *     color: red;
+ *   }
+ * 编译后:
+ *   &.is-active {
+ *     color: red;
+ *   }
+ */
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}
+
+/**
+ * 用于定义组件的修饰符样式
+ * @param {string} $modifier - 修饰符名称
+ * @example
+ *   @include m(primary) {
+ *     color: red;
+ *   }
+ * 编译后:
+ *   .el-button--primary {
+ *     color: red;
+ *   }
+ */
+@mixin m($modifier) {
+  @at-root {
+    #{& + $modifier-separator + $modifier} {
+      @content;
+    }
+  }
+}
+
+/**
+ * 用于定义组件的元素样式
+ * @param {string} $element - 元素名称
+ * @example
+ *   @include e(header) {
+ *     color: red;
+ *   }
+ * 编译后:
+ *   .el-button__header {
+ *     color: red;
+ *   }
+ */
+@mixin e($element) {
+  @at-root {
+    #{& + $element-separator + $element} {
+      @content;
+    }
+  }
+}

package/packages/utils/bem.ts

@@ -0,0 +1,60 @@
+// bem 规范 block 代码块 element 元素 modifier 装饰
+// n-button n-button--primary n-button--disabled
+const _bem = (prefix: string, blockSuffix: string, element: string, modifier: string) => {
+  if (blockSuffix) {
+    prefix += `-${blockSuffix}`;
+  }
+  if (element) {
+    prefix += `__${element}`;
+  }
+  if (modifier) {
+    prefix += `--${modifier}`;
+  }
+  return prefix;
+};
+
+const createBEM = (prefix: string = '') => {
+  const b = (blockSuffix: string = '') => _bem(prefix, blockSuffix, '', '');
+
+  const e = (element: string = '') => (element ? _bem(prefix, '', element, '') : '');
+
+  const m = (modifier: string = '') => (modifier ? _bem(prefix, '', '', modifier) : '');
+
+  const be = (blockSuffix: string = '', element: string = '') =>
+    blockSuffix && element ? _bem(prefix, blockSuffix, element, '') : '';
+
+  const em = (element: string = '', modifier: string = '') =>
+    element && modifier ? _bem(prefix, '', element, modifier) : '';
+
+  const bm = (blockSuffix: string = '', modifier: string = '') =>
+    blockSuffix && modifier ? _bem(prefix, blockSuffix, '', modifier) : '';
+
+  const bem = (blockSuffix: string = '', element: string = '', modifier: string = '') =>
+    blockSuffix && element && modifier ? _bem(prefix, blockSuffix, element, modifier) : '';
+
+  const is = (name: string, status: boolean) => (status ? `is-${name}` : '');
+
+  return {
+    b,
+    e,
+    m,
+    be,
+    em,
+    bm,
+    bem,
+    is
+  };
+};
+
+export const createNamespace = (name: string) => {
+  const prefix = `n-${name}`;
+  return createBEM(prefix);
+};
+
+// const bem = createNamespace('button');
+// console.log(bem.b('box'));
+// console.log(bem.e('element'));
+// console.log(bem.m('modifer'));
+// console.log(bem.is('checked', true));
+// console.log(bem.be('box', 'element'));
+// console.log(bem.bem('box', 'element', 'modifer'));

package/packages/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './bem';
+export * from './with-install';

package/packages/utils/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@dnhyxc-ui/utils",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}

package/packages/utils/vite.config.ts

@@ -0,0 +1,61 @@
+import { defineConfig } from 'vite';
+import { rmSync } from 'fs';
+import dts from 'vite-plugin-dts';
+
+// 打包前先删除 dist 目录
+rmSync('dist', { recursive: true, force: true });
+
+// 组件库打包配置
+export default defineConfig({
+  build: {
+    // 打包输出目录
+    outDir: 'es',
+    // 构建库模式
+    lib: {
+      // 组件库入口文件
+      entry: './index.ts'
+      // // 输出格式
+      // formats: ['es']
+    },
+    rollupOptions: {
+      // 外部化处理依赖
+      input: ['./index.ts'],
+      output: [
+        {
+          // 输出文件名格式
+          entryFileNames: '[name].js',
+          // 输出格式为 ES Module
+          format: 'es',
+          // ES Module 格式文件的输出目录
+          dir: 'dist',
+          // 保持目录结构
+          preserveModules: true,
+          // 指定输出文件的根目录，将所有模块放在 components 目录下，这样可以保持更清晰的目录结构
+          preserveModulesRoot: 'src'
+        }
+        // {
+        //   entryFileNames: '[name].js',
+        //   format: 'cjs',
+        //   name: 'dnhyxc-ui',
+        //   // 输出文件夹
+        //   dir: 'dist/lib',
+        //   // 保持目录结构
+        //   preserveModules: true,
+        //   // 输出目录
+        //   preserveModulesRoot: 'src'
+        //   // UMD格式下需要指定全局变量名， 这样在浏览器中通过 <script> 标签引入时，就会从 window.Vue 获取 Vue 依赖
+        //   // globals: {
+        //   //   vue: 'Vue'
+        //   // }
+        // }
+      ]
+    }
+  },
+  plugins: [
+    // 生成组件的类型声明文件
+    dts({
+      include: ['./**/*'],
+      outDir: ['dist']
+    })
+  ]
+});

package/packages/utils/with-install.ts

@@ -0,0 +1,12 @@
+import { type Plugin, type App } from 'vue';
+
+export type SFCWithInstall<T> = T & Plugin;
+
+// 为组件增加install方法，使组件及可以通过 use 方式注册为全局组件，也可以通过 import 方式单独使用
+export const withInstall = <T>(comp: T) => {
+  const c = comp as unknown as { name: string };
+  (comp as SFCWithInstall<T>).install = (app: App) => {
+    app.component(c.name, c);
+  };
+  return comp as SFCWithInstall<T>;
+};

package/play/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

package/play/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

package/play/auto-imports.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+
+}

package/play/components.d.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    ElButton: typeof import('element-plus/es')['ElButton']
+    MyInput: typeof import('./src/components/MyInput.vue')['default']
+  }
+}

package/play/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/play/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "play",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@dnhyxc-ui/theme": "workspace:^",
+    "@vicons/ionicons5": "^0.13.0",
+    "dnhyxc-ui-plus": "workspace:^",
+    "element-plus": "^2.10.3",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/tsconfig": "^0.7.0",
+    "sass-embedded": "^1.89.2",
+    "scss": "^0.2.4",
+    "typescript": "~5.7.2",
+    "unplugin-auto-import": "^19.3.0",
+    "unplugin-element-plus": "^0.10.0",
+    "unplugin-vue-components": "^28.8.0",
+    "vite": "^7.0.0",
+    "vue-tsc": "^2.2.0"
+  }
+}

package/play/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/play/src/App.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { NButton, NMonaco } from 'dnhyxc-ui-plus';
+import { Earth } from '@vicons/ionicons5';
+import MyInput from './components/MyInput.vue';
+// import 'dnhyxc-ui-plus/es/button/src/index.css';
+// import 'dnhyxc-ui-plus/es/input/src/index.css';
+</script>
+
+<template>
+  <div>
+    <h1>test play</h1>
+    <NButton type="primary" size="large" :disabled="false" class="my-inp">这是自定义按钮</NButton>
+    <MyInput />
+    <NMonaco code="测试输入内容" theme="vs" />
+    <!-- <el-button>这是 element-plus button</el-button> -->
+    <n-icon :size="20" color="red">
+      <Earth />
+    </n-icon>
+    <n-icon :size="20" color="skyblue">
+      <Earth />
+    </n-icon>
+    <n-icon2 :size="50" color="pink">
+      <Earth />
+    </n-icon2>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.my-inp {
+  margin-top: 20px;
+}
+</style>

package/play/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/play/src/components/MyInput.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { NInput } from 'dnhyxc-ui-plus';
+// import 'dnhyxc-ui-plus/es/button/src/index.css';
+// import 'dnhyxc-ui-plus/es/input/src/index.css';
+
+const keyword = ref('');
+
+watch(keyword, (newValue, oldValue) => {
+  console.log('newValue', newValue);
+  console.log('oldValue', oldValue);
+});
+</script>
+
+<template>
+  <div>
+    <NInput v-model:value="keyword" size="large" class="my-inp" placeholder="请输入" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.my-inp {
+  margin-top: 50px;
+}
+</style>

package/play/src/main.ts

@@ -0,0 +1,12 @@
+import { createApp } from 'vue';
+import ElementPlus from 'element-plus';
+// import 'element-plus/dist/index.css';
+import App from './App.vue';
+import { NInput } from 'dnhyxc-ui-plus';
+import 'dnhyxc-ui-plus/es/index.css';
+// import 'dnhyxc-ui/dist/style/theme-chalk.css';
+
+const app = createApp(App);
+app.use(ElementPlus);
+app.use(NInput);
+app.mount('#app');

package/play/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}