dnhyxc-ui-vue 1.0.0

package/.prettierrc.json

@@ -0,0 +1,22 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "trailingComma": "none",
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "rangeStart": 0,
+  "requirePragma": false,
+  "insertPragma": false,
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css",
+  "vueIndentScriptAndStyle": false,
+  "endOfLine": "lf",
+  "embeddedLanguageFormatting": "auto",
+  "singleAttributePerLine": false
+}

package/docs/.vitepress/config.mts

@@ -0,0 +1,55 @@
+// import { demoBlockPlugin } from 'vitepress-theme-demoblock';
+import { defineConfig } from 'vitepress';
+// import { fileURLToPath, URL } from 'node:url';
+import { demoPreviewPlugin } from '@vitepress-code-preview/plugin';
+
+export default defineConfig({
+  title: 'dnhyxc-ui',
+  description: 'Vue3 UI Component',
+  themeConfig: {
+    outline: {
+      label: '页面导航'
+    },
+    docFooter: {
+      prev: '上一页',
+      next: '下一页'
+    },
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: 'Copyright © 2023-present dnhyxc'
+    },
+    sidebar: {
+      '/guide/': [
+        {
+          text: '指南',
+          items: [
+            { text: '安装', link: '/guide/installation' },
+            { text: '快速上手', link: '/guide/quick-start' }
+          ]
+        }
+      ],
+      '/components/': [
+        {
+          text: '组件',
+          items: [{ text: 'Icon 图标', link: '/components/icon' }]
+        }
+      ]
+    },
+    nav: [
+      { text: '指南', link: '/guide/installation' },
+      { text: '组件', link: '/components/icon' }
+    ],
+    socialLinks: [
+      {
+        icon: 'github',
+        link: 'https://github.com/dnhyxc/dnhyxc-ui-vue'
+      }
+    ]
+  },
+  markdown: {
+    config(md) {
+      // const docRoot = fileURLToPath(new URL('../', import.meta.url));
+      md.use(demoPreviewPlugin);
+    }
+  }
+});

package/docs/.vitepress/theme/index.ts

@@ -0,0 +1,30 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from 'vue';
+import type { Theme } from 'vitepress';
+import DefaultTheme from 'vitepress/theme';
+import { NIcon, NButton, NInput } from 'dnhyxc-ui';
+import ElementPlus from 'element-plus';
+import 'dnhyxc-ui-plus/dist/index.css';
+import DemoPreview, { useComponents } from '@vitepress-code-preview/container';
+// import { demoBlockPlugin } from 'vitepress-theme-demoblock';
+// import 'vitepress-theme-demoblock/dist/theme/styles/index.css';
+import '@vitepress-code-preview/container/dist/style.css';
+
+import './style.css';
+
+export default {
+  extends: DefaultTheme,
+  Layout: () => {
+    return h(DefaultTheme.Layout, null, {
+      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+    });
+  },
+  enhanceApp({ app, router, siteData }) {
+    useComponents(app, DemoPreview);
+    DefaultTheme.enhanceApp({ app, router, siteData });
+    app.component('NIcon', NIcon);
+    app.component('NButton', NButton);
+    app.component('NInput', NInput);
+    app.use(ElementPlus);
+  }
+} satisfies Theme;

package/docs/.vitepress/theme/style.css

@@ -0,0 +1,130 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attached to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}

package/docs/api-examples.md

@@ -0,0 +1,49 @@
+---
+outline: deep
+---
+
+# Runtime API Examples
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+<script setup>
+import { useData } from 'vitepress'
+
+const { theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+```
+
+<script setup>
+import { useData } from 'vitepress'
+
+const { site, theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).

package/docs/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/docs/components/icon.md

@@ -0,0 +1,75 @@
+# Icon 图标
+
+dnhyxc-ui 推荐使用 [xicons](https://www.xicons.org/#/) 作为图标库。
+
+```
+$ pnpm install @vicons/ionicons5
+```
+
+## 使用图标
+
+全局注册
+
+:::demo
+
+```vue
+<script setup lang="ts">
+import { Earth } from '@vicons/ionicons5';
+</script>
+
+<template>
+  <el-button>element-plus button</el-button>
+  <br />
+  <n-button>dnhyxc-ui-plus button</n-button>
+</template>
+```
+
+:::
+
+## API
+
+### Icon Props
+
+<script>
+const iconProps = [
+  {
+    name: 'size',
+    type: 'number | string',
+    default: '16',
+    description: '图标大小',
+    version: '-'
+  },
+  {
+    name: 'color',
+    type: 'string',
+    default: '#000',
+    description: '图标颜色',
+    version: '-'
+  }
+];
+</script>
+
+<table>
+  <thead>
+    <tr>
+      <th style="width: 1000px">名称</th>
+      <th style="width: 1000px">类型</th>
+      <th style="width: 1000px">默认值</th>
+      <th style="width: 1000px">说明</th>
+      <th style="width: 1000px">版本</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr v-for="prop in iconProps" :key="prop.name">
+      <td>{{ prop.name }}</td>
+      <td>
+        <code>{{ prop.type }}</code>
+      </td>
+      <td>
+        <code>{{ prop.default }}</code>
+      </td>
+      <td>{{ prop.description }}</td>
+      <td>{{ prop.version }}</td>
+    </tr>
+  </tbody>
+</table>

package/docs/components.d.ts

@@ -0,0 +1,13 @@
+/* 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']
+  }
+}

package/docs/guide/installation.md

@@ -0,0 +1 @@
+# 下载安装

package/docs/guide/quick-start.md

@@ -0,0 +1 @@
+# 快速开始

package/docs/index.md

@@ -0,0 +1,24 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: 'dnhyxc-ui'
+  text: 'dnhyxc-ui 组件库'
+  tagline: My great project tagline
+  actions:
+    - theme: brand
+      text: 快速开始
+      link: /guide/installation
+    - theme: alt
+      text: 组件库
+      link: /components/icon
+
+features:
+  - title: Feature A
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - title: Feature B
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - title: Feature C
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+---

package/docs/markdown-examples.md

@@ -0,0 +1,85 @@
+# Markdown Extension Examples
+
+This page demonstrates some of the built-in markdown extensions provided by VitePress.
+
+## Syntax Highlighting
+
+VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
+
+**Input**
+
+````md
+```js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+````
+
+**Output**
+
+```js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+
+## Custom Containers
+
+**Input**
+
+```md
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+```
+
+**Output**
+
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+
+## More
+
+Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).

package/docs/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@dnhyxc/docs",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vitepress dev",
+    "build": "vitepress build",
+    "preview": "vitepress preview"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitepress-code-preview/container": "^1.0.8",
+    "@vitepress-code-preview/plugin": "^1.0.6",
+    "unplugin-auto-import": "^19.3.0",
+    "unplugin-element-plus": "^0.10.0",
+    "unplugin-vue-components": "^28.8.0",
+    "vitepress": "^1.6.3",
+    "vitepress-theme-demoblock": "^3.1.3"
+  },
+  "dependencies": {
+    "@dnhyxc-ui/theme": "workspace:^",
+    "@vicons/ionicons5": "^0.13.0",
+    "dnhyxc-ui-plus": "workspace:^",
+    "element-plus": "^2.10.3"
+  }
+}

package/docs/vite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import { viteDemoPreviewPlugin } from '@vitepress-code-preview/plugin';
+import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import ElementPlus from 'unplugin-element-plus/vite';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+
+export default defineConfig({
+  base: '/', // 线上打包路径改为绝对路径，防止打包后，资源文件路径出现上述错误
+  plugins: [
+    viteDemoPreviewPlugin(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()]
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()]
+    }),
+    ElementPlus({})
+  ]
+});

package/eslint.config.mjs

@@ -0,0 +1,90 @@
+import eslint from '@eslint/js';
+import tsEslintPlugin from '@typescript-eslint/eslint-plugin';
+import tsEslintParser from '@typescript-eslint/parser';
+import vuePlugin from 'eslint-plugin-vue';
+import vueParser from 'vue-eslint-parser';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import globals from 'globals';
+
+const baseConfig = [
+  // 全局配置
+  {
+    name: 'global config',
+    languageOptions: {
+      globals: {
+        ...globals.es2022,
+        ...globals.browser,
+        ...globals.node
+      },
+      sourceType: 'module' // 确保设置为 module
+    },
+    rules: {
+      'no-dupe-class-members': 0,
+      'no-redeclare': 0,
+      'no-undef': 0,
+      'no-unused-vars': 0
+    }
+  },
+
+  // Vue 文件配置
+  {
+    name: 'vue-eslint',
+    files: ['**/*.vue'],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        parser: tsEslintParser, // Vue 文件中使用 TS 解析器
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        extraFileExtensions: ['.vue'],
+        ecmaFeatures: { jsx: false }
+      }
+    },
+    plugins: {
+      vue: vuePlugin
+    },
+    rules: {
+      ...vuePlugin.configs['vue3-recommended'].rules,
+      'vue/multi-word-component-names': 'off'
+    }
+  },
+
+  // JS/TS 文件配置
+  // {
+  //   files: ['**/*.{js,ts}'],
+  //   languageOptions: {
+  //     parser: tsEslintParser, // 统一使用 TS 解析器
+  //     parserOptions: {
+  //       ecmaVersion: 'latest',
+  //       sourceType: 'module',
+  //       ecmaFeatures: { jsx: false }
+  //     }
+  //   }
+  // },
+  // JS/TS 文件配置
+  {
+    name: 'typescript-eslint/base',
+    // files: ['**/*.ts'],
+    files: ['**/*.{js,ts}'],
+    languageOptions: {
+      parser: tsEslintParser,
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: { jsx: false }
+      }
+    },
+    rules: {
+      ...tsEslintPlugin.configs.recommended.rules,
+      '@typescript-eslint/no-confusing-non-null-assertion': 2
+    },
+    plugins: {
+      '@typescript-eslint': tsEslintPlugin
+    }
+  },
+  // 忽略文件
+  {
+    ignores: ['packages/*/dist/**', 'node_modules/**']
+  }
+];
+
+export default [eslint.configs.recommended, eslintPluginPrettierRecommended, ...baseConfig];