misp-ui-library-test 0.0.1

package/README.md

@@ -0,0 +1,113 @@
+# Vue2 UI 组件库
+
+基于Vue2的轻量级UI组件库，提供丰富的可复用组件。
+
+## 特性
+
+- ⚡️ 基于 Vue2 开发
+- 📦 支持按需引入和全局引入
+- 📚 使用 VuePress 生成文档
+- 🎨 统一的设计语言
+- 📦 支持 UMD 和 CJS 格式
+- 🔧 Webpack 构建
+
+## 快速开始
+
+### 安装
+
+```bash
+# 全局引入
+npm install vue2-ui-library
+
+# 按需引入
+npm install vue2-ui-library/lib/button
+```
+
+### 使用
+
+```javascript
+// 全局引入
+import Vue2UILibrary from 'vue2-ui-library'
+import 'vue2-ui-library/lib/theme-chalk/index.css'
+
+Vue.use(Vue2UILibrary)
+
+// 按需引入
+import Button from 'vue2-ui-library/lib/button'
+import 'vue2-ui-library/lib/theme-chalk/button.css'
+
+Vue.component('Button', Button)
+```
+
+## 文档
+
+访问 [官方文档](https://your-docs-url.com) 查看完整文档和示例。
+
+## 目录结构
+
+```
+vue2-ui-library/
+├── dist/                 # 构建输出目录
+├── src/
+│   ├── index.js          # 主入口文件
+│   └── packages/         # 组件目录
+│       ├── button/       # Button组件
+│       ├── input/        # Input组件
+│       └── select/       # Select组件
+├── docs/                 # 文档目录
+│   ├── .vuepress/       # VuePress配置
+│   ├── components/      # 组件文档
+│   └── examples/        # 示例代码
+├── public/               # 静态资源
+├── webpack.config.js     # Webpack配置
+├── babel.config.js      # Babel配置
+├── package.json         # 项目配置
+└── README.md            # 项目说明
+```
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 开发文档
+npm run dev
+
+# 构建组件库
+npm run build:lib
+
+# 运行 lint 检查
+npm run lint
+
+# 自动修复 lint 错误
+npm run lint:fix
+```
+
+## 组件列表
+
+- [Button](./src/packages/button/README.md) - 按钮组件
+- [Input](./src/packages/input/README.md) - 输入框组件
+- [Select](./src/packages/select/README.md) - 选择器组件
+
+## 构建
+
+组件库支持多种格式输出：
+
+- **UMD格式**：直接用于浏览器环境
+- **CommonJS格式**：用于Node.js环境
+- **ES Module格式**：用于现代JavaScript模块系统
+
+## 发布
+
+1. 修改版本号：`package.json` 中的 `version` 字段
+2. 运行构建命令：`npm run build:lib`
+3. 发布到npm：`npm publish`
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 许可证
+
+MIT License

package/dist/theme-chalk/alert/index.scss

@@ -0,0 +1,152 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(alert) {
+  width: 100%;
+  padding: 12px 16px;
+  margin: 0;
+  box-sizing: border-box;
+  border-radius: 4px;
+  position: relative;
+  background-color: $white;
+  overflow: hidden;
+  opacity: 1;
+  display: flex;
+  align-items: center;
+  transition: opacity .2s;
+
+  @include when(light) {
+    .ui-alert__closebtn {
+      color: $--color-text-placeholder;
+    }
+  }
+
+  @include when(dark) {
+    .ui-alert__closebtn {
+      color: $white;
+    }
+    .ui-alert__description {
+      color: $white;
+    }
+  }
+
+  @include when(center) {
+    justify-content: center;
+  }
+
+  @include m(success) {
+    &.is-light {
+      background-color: $green-1;
+      color: $--color-success;
+      border: 1px solid $green-2;
+
+      .ui-alert__description {
+        color: $--color-success;
+      }
+    }
+
+    &.is-dark {
+      background-color: $--color-success;
+      color: $white;
+    }
+  }
+
+  @include m(info) {
+    &.is-light {
+      background-color: $blue-bg;
+      color: $--color-info;
+      border: 1px solid $sd-blue;
+
+      .ui-alert__description {
+        color: $--color-info;
+      }
+    }
+
+    &.is-dark {
+      background-color: $--color-info;
+      color: $white;
+    }
+  }
+
+  @include m(warning) {
+    &.is-light {
+      background-color: $yellow-1;
+      color: $--color-warning;
+      border: 1px solid $yellow-2;
+
+      .ui-alert__description {
+        color: $--color-warning;
+      }
+    }
+
+    &.is-dark {
+      background-color: $--color-warning;
+      color: $white;
+    }
+  }
+
+  @include m(error) {
+    &.is-light {
+      background-color: $red-1;
+      color: $--color-danger;
+      border: 1px solid $red-2;
+
+      .ui-alert__description {
+        color: $--color-danger;
+      }
+    }
+
+    &.is-dark {
+      background-color: $--color-danger;
+      color: $white;
+    }
+  }
+
+  @include e(content) {
+    display: table-cell;
+    padding: 0 8px;
+  }
+
+  @include e(icon) {
+    font-size: 16px;
+    width: 16px;
+    @include when(big) {
+      font-size: 20px;
+      width: 20px;
+    }
+  }
+
+  @include e(title) {
+    font-size: 14px;
+    line-height: 18px;
+    @include when(bold) {
+      font-weight: bold;
+    }
+  }
+
+  & .ui-alert__description {
+    font-size: 13px;
+    margin: 5px 0 0 0;
+  }
+
+  @include e(closebtn) {
+    font-size: 14px;
+    opacity: 1;
+    position: absolute;
+    top: 12px;
+    right: 15px;
+    cursor: pointer;
+
+    @include when(customed) {
+      font-style: normal;
+      font-size: 16px;
+      top: 9px;
+    }
+  }
+}
+
+.ui-alert-fade-enter,
+.ui-alert-fade-leave-active {
+  opacity: 0;
+}

package/dist/theme-chalk/avatar/index.scss

@@ -0,0 +1,51 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(avatar) {
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  overflow: hidden;
+  background: $primary-line;
+  color: $white;
+  font-size: 14px;
+
+  @include when(icon) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  > img {
+    display: block;
+    height: 100%;
+    vertical-align: middle;
+  }
+
+  @include m(large) {
+    width: 60px;
+    height: 60px;
+    line-height: 60px;
+  }
+
+  @include m(medium) {
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+  }
+
+  @include m(small) {
+    width: 28px;
+    height: 28px;
+    line-height: 28px;
+  }
+
+  @include m(circle) {
+    border-radius: 50%;
+  }
+
+  @include m(square) {
+    border-radius: 4px;
+  }
+}

package/dist/theme-chalk/backtop/index.scss

@@ -0,0 +1,38 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(backtop) {
+  position: fixed;
+  background-color: $white;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  color: $primary-blue;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  box-shadow: $box-shadow-3;
+  cursor: pointer;
+  z-index: $index-top;
+  transition: opacity 0.3s;
+
+  &:hover {
+    background-color: $base-bg;
+  }
+
+  @include e(icon) {
+    font-size: 20px;
+  }
+}
+
+.ui-fade-in-enter-active,
+.ui-fade-in-leave-active {
+  transition: opacity 0.3s;
+}
+
+.ui-fade-in-enter,
+.ui-fade-in-leave-to {
+  opacity: 0;
+}

package/dist/theme-chalk/badge/index.scss

@@ -0,0 +1,63 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(badge) {
+  position: relative;
+  vertical-align: middle;
+  display: inline-block;
+
+  @include e(content) {
+    position: relative;
+    display: inline-block;
+    text-align: center;
+    border-radius: 50%;
+    padding: 0 6px;
+    background-color: $danger;
+    color: $white;
+    font-size: 12px;
+    height: 18px;
+    line-height: 18px;
+    white-space: nowrap;
+    border: 1px solid $white;
+
+    @include m(fixed) {
+      position: absolute;
+      top: 0;
+      right: 10px;
+      transform: translateY(-50%) translateX(100%);
+
+      @include when(dot) {
+        right: 5px;
+      }
+    }
+
+    @include when(dot) {
+      width: 8px;
+      height: 8px;
+      padding: 0;
+      right: 0;
+      border-radius: 50%;
+    }
+
+    @include m(primary) {
+      background-color: $primary-blue;
+    }
+
+    @include m(success) {
+      background-color: $success;
+    }
+
+    @include m(warning) {
+      background-color: $warning;
+    }
+
+    @include m(info) {
+      background-color: $disable-text;
+    }
+
+    @include m(danger) {
+      background-color: $danger;
+    }
+  }
+}

package/dist/theme-chalk/breadcrumb/index.scss

@@ -0,0 +1,36 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(breadcrumb) {
+  font-size: 14px;
+  line-height: 1;
+
+  @include e(item) {
+    float: left;
+
+    @include e(inner) {
+      color: $--color-text-regular;
+      font-weight: bold;
+
+      @include when(link) {
+        cursor: pointer;
+
+        &:hover {
+          color: $--color-primary;
+        }
+      }
+    }
+
+    @include e(separator) {
+      margin: 0 9px;
+      color: $--color-text-placeholder;
+    }
+  }
+
+  &::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}

package/dist/theme-chalk/breadcrumb-item/index.scss

@@ -0,0 +1,36 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(breadcrumb) {
+  font-size: 14px;
+  line-height: 1;
+
+  @include e(item) {
+    float: left;
+
+    @include e(inner) {
+      color: $--color-text-regular;
+      font-weight: bold;
+
+      @include when(link) {
+        cursor: pointer;
+
+        &:hover {
+          color: $--color-primary;
+        }
+      }
+    }
+
+    @include e(separator) {
+      margin: 0 9px;
+      color: $--color-text-placeholder;
+    }
+  }
+
+  &::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}

package/dist/theme-chalk/button/index.scss

@@ -0,0 +1,157 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@mixin getTheme($ft, $bg, $bd) {
+  color: $ft;
+  background-color: $bg;
+  border: 1px solid $bd;
+  > i {
+    color: $ft;
+  }
+  &.is-plain {
+    color: $bg;
+    background-color: color-mix(in srgb, $bg 10%, var(--base-bg) 90%);
+    border: 1px solid color-mix(in srgb, $bd 50%, var(--base-bg) 50%);
+    > i, span {
+      color: $bg;
+    }
+  }
+  &.is-text {
+    color: $ft;
+    background-color: transparent;
+    border: none;
+    padding: 0;
+  }
+}
+
+@mixin getSize($h, $p, $fz) {
+  height: $h;
+  padding: $p;
+  font-size: $fz;
+  border-radius: calc(#{$h} / 8);
+  &.is-round {
+    border-radius: calc(#{$h} / 2);
+  }
+  &.is-circle {
+    width: $h !important;
+    height: $h !important;
+    border-radius: calc(#{$h} / 2);
+  }
+  &.is-text {
+    height: initial;
+  }
+}
+
+@include b(button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  text-align: center;
+  box-sizing: border-box;
+  outline: none;
+  margin: 0;
+  transition: .1s;
+  padding: 12px 20px;
+  font-size: 14px;
+  border-radius: 4px;
+  font-weight: 500;
+  transition: opacity .1s;
+
+  // 默认样式
+  color: var(--sd-text);
+  background-color: var(--sd-bg);
+  border: 1px solid var(--sd-bg);
+  &.is-plain {
+    background-color: color-mix(in srgb, var(--sd-bg) 10%, var(--base-bg) 90%);
+    border: 1px solid var(--primary-line);
+  }
+  &.is-text {
+    background-color: transparent;
+    border: none;
+    padding: 0;
+  }
+
+  &:hover, &:focus {
+    opacity: .8;
+  }
+  &:active {
+    outline: none;
+  }
+  @include when(active) {
+    outline: none;
+  }
+  &::-moz-focus-inner {
+    border: 0;
+  }
+  @include when(disabled) {
+    opacity: .5;
+    cursor: not-allowed;
+    background-image: none;
+  }
+  @include when(loading) {
+    opacity: .8;
+    cursor: not-allowed;
+    pointer-events: none;
+    &::before {
+      display: none;
+    }
+  }
+
+  @include when(round) {
+    border-radius: 20px;
+    padding: 12px 23px;
+  }
+  @include when(circle) {
+    padding: 0;
+    justify-content: center;
+  }
+
+  // 类型变体
+  @include m(primary) {
+    @include getTheme(var(--white), var(--primary-blue), var(--primary-blue));
+  }
+  @include m(success) {
+    @include getTheme(var(--white), var(--success), var(--success));
+  }
+  @include m(warning) {
+    @include getTheme(var(--white), var(--warning), var(--warning));
+  }
+  @include m(danger) {
+    @include getTheme(var(--white), var(--danger), var(--danger));
+  }
+
+  // 尺寸
+  @include getSize(38px, 10px 20px, 14px);
+  @include m(small) {
+    @include getSize(32px, 9px 15px, 12px);
+  }
+  @include m(mini) {
+    @include getSize(28px, 7px 15px, 12px);
+  }
+
+  @include m(text) {
+    background-color: transparent;
+    border-color: transparent;
+    padding: 0;
+  }
+
+  // 文字图标间距
+  .ui-icon-loading + span,
+  i + span {
+    margin-left: 5px;
+  }
+}
+
+// 旋转动画
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/theme-chalk/card/index.scss

@@ -0,0 +1,38 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(card) {
+  border-radius: 4px;
+  border: 1px solid $primary-line;
+  background-color: $white;
+  overflow: hidden;
+  color: $sd-text;
+  transition: 0.3s;
+
+  @include when(always-shadow) {
+    box-shadow: $box-shadow-3;
+  }
+
+  @include when(hover-shadow) {
+    box-shadow: $box-shadow-3;
+
+    &:hover {
+      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
+    }
+  }
+
+  @include when(never-shadow) {
+    box-shadow: none;
+  }
+
+  @include e(header) {
+    padding: 18px 20px 15px;
+    border-bottom: 1px solid $primary-line;
+    box-sizing: border-box;
+  }
+
+  @include e(body) {
+    padding: 20px;
+  }
+}

package/dist/theme-chalk/chart/index.scss

@@ -0,0 +1,21 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(chart) {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition: all 0.3s ease;
+  @include e(inner) {
+    width: 100%;
+    height: 100%;
+  }
+  @include e(empty) {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}