feat: ui库 rollup

apps/server/view/page/home/index.ejs

@@ -17,7 +17,7 @@
 
     <h1>1</h1>
 
-    <select class="ttt" data-menu>
+    <select class="ttt">
       <option>最近的</option>
       <option selected>最热门</option>
       <option>最多喜欢</option>

apps/server/view/page/home/index.less

@@ -1 +1 @@
-@import '../../less/common.less';
+@import '../../less/common.less';

apps/server/view/page/home/index.scss

@@ -1,183 +0,0 @@
-.select-menu {
-  --background: #242836;
-  --text: #fff;
-  --icon: #fff;
-  --icon-active: #3f4656;
-  --list: #1c212e;
-  --list-text: rgba(255, 255, 255, 0.2);
-  --list-text-hover: rgba(255, 255, 255, 0.5);
-  position: relative;
-  z-index: 1;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 25px;
-  select,
-  .button {
-    font-family: inherit;
-    margin: 0;
-    border: 0;
-    text-align: left;
-    text-transform: none;
-    -webkit-appearance: none;
-  }
-  select {
-    pointer-events: none;
-    user-select: none;
-    opacity: 0;
-    padding: 8px 36px 8px 12px;
-    visibility: hidden;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 25px;
-  }
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    transform: translateY(var(--t));
-    transition: opacity 0.3s ease,
-      transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
-    li {
-      padding: 8px 36px 8px 12px;
-      cursor: pointer;
-    }
-  }
-  & > ul {
-    background: var(--list);
-    color: var(--list-text);
-    border-radius: 6px;
-    li {
-      transition: color 0.3s ease;
-      &:hover {
-        color: var(--list-text-hover);
-      }
-    }
-  }
-  .button {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    padding: 0;
-    z-index: 1;
-    width: 100%;
-    display: block;
-    overflow: hidden;
-    border-radius: 6px;
-    color: var(--text);
-    background: var(--background);
-    em {
-      --r: 45deg;
-      display: block;
-      position: absolute;
-      right: 12px;
-      top: 0;
-      width: 7px;
-      height: 7px;
-      margin-top: 13px;
-      -webkit-backface-visibility: hidden;
-      &:before,
-      &:after {
-        --o: 0.4;
-        content: '';
-        width: 7px;
-        height: 7px;
-        opacity: var(--o);
-        display: block;
-        position: relative;
-        transition: opacity 0.2s ease;
-        transform: rotate(var(--r)) scale(0.75);
-      }
-      &:before {
-        border-left: 2px solid var(--icon);
-        border-top: 2px solid var(--icon);
-        top: 1px;
-      }
-      &:after {
-        border-right: 2px solid var(--icon);
-        border-bottom: 2px solid var(--icon);
-        bottom: 1px;
-      }
-    }
-  }
-  &:not(.open) {
-    & > ul {
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
-  &.open {
-    &.tilt-up {
-      animation: tilt-up 0.4s linear forwards;
-      .button {
-        em {
-          &:before {
-            --o: 1;
-          }
-        }
-      }
-    }
-    &.tilt-down {
-      animation: tilt-down 0.4s linear forwards;
-      .button {
-        em {
-          &:after {
-            --o: 1;
-          }
-        }
-      }
-    }
-  }
-}
-
-@keyframes tilt-up {
-  40%,
-  60% {
-    transform: perspective(500px) rotateX(8deg);
-  }
-}
-
-@keyframes tilt-down {
-  40%,
-  60% {
-    transform: perspective(500px) rotateX(-8deg);
-  }
-}
-
-html {
-  box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
-}
-
-* {
-  box-sizing: inherit;
-  &:before,
-  &:after {
-    box-sizing: inherit;
-  }
-}
-
-// Center & dribbble
-body {
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-family: 'Roboto', Arial;
-  background: #fff;
-  .dribbble {
-    position: fixed;
-    display: block;
-    right: 20px;
-    bottom: 20px;
-    img {
-      display: block;
-      height: 28px;
-    }
-  }
-}

apps/server/view/page/home/index.ts

@@ -1,8 +1,12 @@
-// import './index.less';
 import $ from 'jquery';
 import '@backset/ui/dist/ui.css';
 import { Dropdown } from '@backset/ui';
 
 $(function () {
-  new Dropdown('.ttt');
+  new Dropdown({
+    selector: '.ttt',
+    onChange: () => {
+      console.log('change');
+    },
+  });
 });

packages/ui/src/components/Dropdown/index.less

@@ -1,11 +1,13 @@
 .bs-dropdown {
-  --background: #242836;
+  --background: var(--bs-primary-color);
-  --text: #fff;
+  --text: var(--bs-font-color);
-  --icon: #fff;
+  --icon: var(--bs-font-color);
-  --icon-active: #3f4656;
+  --radius: var(--bs-radius);
-  --list: #1c212e;
+  --icon-active: var(--bs-dropdown-icon-active);
-  --list-text: rgba(255, 255, 255, 0.2);
+  --list: var(--bs-dropdpwn-list-bgc);
-  --list-text-hover: rgba(255, 255, 255, 0.5);
+  --list-text: var(--bs-dropdpwn-list-text-color);
+  --list-text-hover: var(--bs-dropdpwn-list-text-hover-color);
+  display: inline-block;
   position: relative;
   z-index: 1;
   font-weight: 500;
@@ -13,7 +15,6 @@
   line-height: 25px;
   select,
   .button {
-    font-family: inherit;
     margin: 0;
     border: 0;
     text-align: left;
@@ -23,11 +24,12 @@
     pointer-events: none;
     user-select: none;
     opacity: 0;
-    padding: 8px 36px 8px 12px;
+    padding: 0 36px 0 12px;
     visibility: hidden;
     font-weight: 500;
+    height: 36.5px;
+    line-height: 36.5px;
     font-size: 14px;
-    line-height: 25px;
   }
   ul {
     margin: 0;
@@ -41,14 +43,16 @@
     transition: opacity 0.3s ease,
       transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
     li {
-      padding: 8px 36px 8px 12px;
+      padding: 0 36px 0 12px;
+      height: 36.5px;
+      line-height: 36.5px;
       cursor: pointer;
     }
   }
   & > ul {
     background: var(--list);
     color: var(--list-text);
-    border-radius: 6px;
+    border-radius: var(--radius);
     li {
       transition: color 0.3s ease;
       &:hover {
@@ -67,7 +71,7 @@
     width: 100%;
     display: block;
     overflow: hidden;
-    border-radius: 6px;
+    border-radius: var(--radius);
     color: var(--text);
     background: var(--background);
     em {
@@ -75,10 +79,9 @@
       display: block;
       position: absolute;
       right: 12px;
-      top: 0;
+      top: 50%;
+      transform: translateY(-50%);
       width: 7px;
-      height: 7px;
-      margin-top: 13px;
       &:before,
       &:after {
         --o: 0.4;

packages/ui/src/components/Dropdown/index.ts

@@ -1,17 +1,25 @@
-import "./index.scss";
+import "./index.less";
 import $ from "jquery";
 
-export const useHi = (str: string) => console.log(str);
+interface IProps {
+  /**
+   * jquery selector
+   */
+  selector: string;
+  /**
+   * select事件
+   */
+  onChange?: () => void;
+}
 
 export default class Dropdown {
-  constructor(selector: string) {
+  constructor(p: IProps) {
-    let select = $(selector);
+    let select = $(p.selector);
     let options = select.find("option");
-    let menu = $("<div />").addClass("bs-select-menu");
+    let menu = $("<div />").addClass("bs-dropdown");
     let button = $("<div />").addClass("button");
     let list = $("<ul />");
     $("<em />").prependTo(button);
-
     options.each(function (i) {
       let option = $(this);
       list.append($("<li />").text(option.text()));
@@ -25,34 +33,34 @@ export default class Dropdown {
 
     list.clone().insertAfter(button);
 
-    $(document).on("click", ".bs-select-menu", function (e) {
+    $(document)
-      let menu = $(this);
+      .on("click", ".bs-dropdown", function (e) {
-      if (!menu.hasClass("open")) menu.addClass("open");
+        let menu = $(this);
-    });
+        if (!menu.hasClass("open")) menu.addClass("open");
+      })
+      .on("click", function (e: any) {
+        e.stopPropagation();
+        if ($(".bs-dropdown").has(e.target).length === 0) {
+          $(".bs-dropdown").removeClass("open");
+        }
+      })
+      .on("click", ".bs-dropdown > ul > li", function (e) {
+        let li = $(this);
+        let menu = li.parent().parent();
+        let select = menu.children("select");
+        let selected = select.find("option:selected");
+        let index = li.index();
 
-    $(document).on("click", ".bs-select-menu > ul > li", function (e) {
+        menu.css("--t", index * -36.5 + "px");
-      let li = $(this);
+        selected.removeAttr("selected");
-      let menu = li.parent().parent();
+        select.find("option").eq(index).attr("selected", "selected");
-      let select = menu.children("select");
+        p.onChange && p.onChange();
-      let selected = select.find("option:selected");
-      let index = li.index();
 
-      menu.css("--t", index * -36.5 + "px");
+        menu.addClass(index > selected.index() ? "tilt-down" : "tilt-up");
-      selected.removeAttr("selected");
-      select.find("option").eq(index).attr("selected", "selected");
 
-      menu.addClass(index > selected.index() ? "tilt-down" : "tilt-up");
+        setTimeout(() => {
-
+          menu.removeClass("open tilt-up tilt-down");
-      setTimeout(() => {
+        }, 500);
-        menu.removeClass("open tilt-up tilt-down");
+      });
-      }, 500);
-    });
-
-    $(document).on("click", function (e: any) {
-      e.stopPropagation();
-      if ($(".bs-select-menu").has(e.target).length === 0) {
-        $(".bs-select-menu").removeClass("open");
-      }
-    });
   }
 }

packages/ui/src/components/Tooltip/index.less

@@ -1,13 +1,11 @@
 :root {
-  --bs-bg-color: hsl(0, 0%, 20%);
+  --bg-color: var(--bs-primary-color);
-  --bs-border-color: hsl(0, 0%, 25%);
+  --radius: var(--bs-radius);
-  --bs-border-size: 1px;
+  --text-color: var(--bs-font-color);
-  --bs-border-radius: 2px;
+  --size: var(--bs-tooltip-font-size);
-  --bs-text-color: white;
+  --offset: var(--bs-tooltip-offset);
-  --bs-text-size: 1rem; /* I don't recommend putting a large size in here since it kinda relies on being small */
+  --time-short: 0.1s;
-  --bs-offset: 10px; /* How far outwards the tooltip goes */
+  --time-long: 0.2s;
-  --bs-transition-time-short: 0.1s; /* Only affects the fade out animations */
-  --bs-transition-time-long: 0.2s;
 }
 
 .bs-tooltip {
@@ -22,24 +20,22 @@
   &.zoom-up::before,
   &.zoom-down::before {
     box-sizing: border-box;
-    font-family: inherit;
     opacity: 0;
     line-height: 1;
     pointer-events: none;
     position: absolute;
     padding: 5px 10px;
-    border-radius: var(--bs-border-radius);
+    border-radius: var(--radius);
     content: attr(data-bs-text);
     display: flex;
     align-items: center;
     justify-content: center;
     width: max-content;
     height: 30px;
-    background-color: var(--bs-bg-color);
+    background-color: var(--bg-color);
-    border: var(--bs-border-size) solid var(--bs-border-color);
+    transition: var(--time-short);
-    transition: var(--bs-transition-time-short);
+    font-size: var(--size);
-    font-size: var(--bs-text-size);
+    color: var(--text-color);
-    color: var(--bs-text-color);
     z-index: 19940121;
   }
 
@@ -50,9 +46,9 @@
     left: 100%;
   }
   &.fade-right:hover::before {
-    transition: var(--bs-transition-time-long);
+    transition: var(--time-long);
     opacity: 1;
-    transform: translateX(var(--bs-offset));
+    transform: translateX(var(--offset));
   }
 
   &.fade-left::before {
@@ -60,9 +56,9 @@
     right: 100%;
   }
   &.fade-left:hover::before {
-    transition: var(--bs-transition-time-long);
+    transition: var(--time-long);
     opacity: 1;
-    transform: translateX(calc(var(--bs-offset) * -1));
+    transform: translateX(calc(var(--offset) * -1));
   }
 
   &.fade-up::before {
@@ -71,9 +67,9 @@
     transform: translate(-50%, -50%);
   }
   &.fade-up:hover::before {
-    transition: var(--bs-transition-time-long);
+    transition: var(--time-long);
     opacity: 1;
-    transform: translateY(calc(var(--bs-offset) * -1)) translate(-50%, -50%);
+    transform: translateY(calc(var(--offset) * -1)) translate(-50%, -50%);
   }
 
   &.fade-down::before {
@@ -82,9 +78,9 @@
     transform: translate(-50%, -50%);
   }
   &.fade-down:hover::before {
-    transition: var(--bs-transition-time-long);
+    transition: var(--time-long);
     opacity: 1;
-    transform: translateY(var(--bs-offset)) translate(-50%, -50%);
+    transform: translateY(var(--offset)) translate(-50%, -50%);
   }
 
   /* zoom out */
@@ -92,48 +88,48 @@
   &.zoom-right::before {
     transform: scale(0.1);
     transform-origin: center left;
-    transition: var(--bs-transition-time-long);
+    transition: var(--time-long);
     top: calc(50% - 15px);
     left: 100%;
   }
   &.zoom-right:hover::before {
     opacity: 1;
-    transform: translateX(var(--bs-offset));
+    transform: translateX(var(--offset));
   }
 
   &.zoom-left::before {
     transform: scale(0.1);
     transform-origin: center right;
-    transition: var(--bs-transition-time-long);
+    transition: var(--time-long);
     top: calc(50% - 15px);
     right: 100%;
   }
   &.zoom-left:hover::before {
     opacity: 1;
-    transform: translateX(calc(var(--bs-offset) * -1));
+    transform: translateX(calc(var(--offset) * -1));
   }
 
   &.zoom-up::before {
     transform-origin: bottom center;
-    transition: var(--bs-transition-time-long);
+    transition: var(--time-long);
     top: -15px;
     left: 50%;
     transform: translate(-50%, -50%) scale(0.1);
   }
   &.zoom-up:hover::before {
     opacity: 1;
-    transform: translateY(calc(var(--bs-offset) * -1)) translate(-50%, -50%);
+    transform: translateY(calc(var(--offset) * -1)) translate(-50%, -50%);
   }
 
   &.zoom-down::before {
     transform-origin: top center;
-    transition: var(--bs-transition-time-long);
+    transition: var(--time-long);
     top: calc(100% + 15px);
     left: 50%;
     transform: translate(-50%, -50%) scale(0.1);
   }
   &.zoom-down:hover::before {
     opacity: 1;
-    transform: translateY(var(--bs-offset)) translate(-50%, -50%);
+    transform: translateY(var(--offset)) translate(-50%, -50%);
   }
 }

packages/ui/src/components/Tooltip/index.ts

@@ -1 +1 @@
-import "./index.scss";
+import "./index.less";

packages/ui/src/index.ts

@@ -1,3 +1,4 @@
+import "./var.less";
 import "./components/Tooltip";
 import Dropdown from "./components/Dropdown/index";
 

packages/ui/src/var.less

@@ -0,0 +1,15 @@
+:root {
+  --bs-primary-color: #242836;
+  --bs-font-color: #fff;
+  --bs-radius: 3px;
+
+  /* dropdown */
+  --bs-dropdown-icon-active: #3f4656;
+  --bs-dropdpwn-list-bgc: #1c212e;
+  --bs-dropdpwn-list-text-color: rgba(255, 255, 255, 0.2);
+  --bs-dropdpwn-list-text-hover-color: rgba(255, 255, 255, 0.5);
+
+  /* tooltip */
+  --bs-tooltip-font-size: 1rem;
+  --bs-tooltip-offset: 10px;
+}

packages/ui/tsconfig.json

@@ -4,6 +4,6 @@
   },
   "include": [
     "src/**/*"
-, "scripts"  ],
+  ],
   "extends": "../../tsconfig.json",
 }

packages/ui/webpack.config.js

@@ -1,100 +0,0 @@
-/*eslint-disable*/
-const { join } = require('path');
-const path = require('path');
-const { readdirSync, statSync } = require('fs');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CopyPlugin = require('copy-webpack-plugin');
-const TerserPlugin = require("terser-webpack-plugin");
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const isDev = process.env.RUNNING_ENV === 'dev';
-const isProd = process.env.RUNNING_ENV === 'prod';
-
-const importEntry = () => {
-  const entries = {};
-  const rootDir = join(process.cwd(), '/src/components');
-  readdirSync(rootDir)
-    .filter(i => !i.startsWith('_'))
-    .forEach(file => {
-      if (statSync(join(rootDir, file)).isDirectory())
-        entries[file] = join(rootDir, `${file}/index.ts`);
-    });
-  return entries;
-};
-
-module.exports = {
-  entry: { ...importEntry(), 'index': join(__dirname, 'src/index.ts') },
-  output: {
-    path: path.resolve(__dirname, 'dist/'),
-    publicPath: '',
-    filename: '[name].js',
-    clean: true,
-    libraryTarget: 'umd' // 添加 export default 
-  },
-  mode: 'production',
-  optimization: {
-    minimize: true,
-    minimizer: [new TerserPlugin({
-      terserOptions: {
-        compress: true,
-      },
-    })],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.ts?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
-      },
-      {
-        test: /\.less$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
-      },
-      {
-        test: /\.(scss)$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: 'css-loader'
-          },
-          {
-            loader: 'postcss-loader',
-            options: {
-              postcssOptions: {
-                plugins: () => [
-                  require('autoprefixer')
-                ]
-              }
-            }
-          },
-          {
-            loader: 'sass-loader'
-          }
-        ]
-      },
-      {
-        test: /\.(png|jpg|gif)$/i,
-        use: [
-          {
-            loader: 'url-loader',
-            options: {
-              limit: 8192,
-            },
-          },
-        ],
-      },
-    ],
-  },
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: '[name].css'
-    }),
-  ].filter(Boolean),
-  resolve: {
-    extensions: ['.ts', '.js'],
-  },
-};