From 5c366bfd3dd1b9eae94bf797856346f5fe8689da Mon Sep 17 00:00:00 2001 From: mozzie Date: Sat, 25 Feb 2023 14:29:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20ui=E5=BA=93=20rollup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/server/view/page/home/index.ejs | 2 +- apps/server/view/page/home/index.less | 2 +- apps/server/view/page/home/index.scss | 183 ------------------ apps/server/view/page/home/index.ts | 8 +- .../Dropdown/{index.scss => index.less} | 35 ++-- packages/ui/src/components/Dropdown/index.ts | 72 ++++--- .../Tooltip/{index.scss => index.less} | 60 +++--- packages/ui/src/components/Tooltip/index.ts | 2 +- packages/ui/src/index.ts | 1 + packages/ui/src/var.less | 15 ++ packages/ui/tsconfig.json | 2 +- packages/ui/webpack.config.js | 100 ---------- 12 files changed, 113 insertions(+), 369 deletions(-) delete mode 100644 apps/server/view/page/home/index.scss rename packages/ui/src/components/Dropdown/{index.scss => index.less} (79%) rename packages/ui/src/components/Tooltip/{index.scss => index.less} (54%) create mode 100644 packages/ui/src/var.less delete mode 100644 packages/ui/webpack.config.js diff --git a/apps/server/view/page/home/index.ejs b/apps/server/view/page/home/index.ejs index bffe57b..cc130c4 100644 --- a/apps/server/view/page/home/index.ejs +++ b/apps/server/view/page/home/index.ejs @@ -17,7 +17,7 @@

1

- diff --git a/apps/server/view/page/home/index.less b/apps/server/view/page/home/index.less index 01bdb59..5913055 100644 --- a/apps/server/view/page/home/index.less +++ b/apps/server/view/page/home/index.less @@ -1 +1 @@ -@import '../../less/common.less'; \ No newline at end of file +@import '../../less/common.less'; diff --git a/apps/server/view/page/home/index.scss b/apps/server/view/page/home/index.scss deleted file mode 100644 index 020c972..0000000 --- a/apps/server/view/page/home/index.scss +++ /dev/null @@ -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; - } - } -} diff --git a/apps/server/view/page/home/index.ts b/apps/server/view/page/home/index.ts index c44c16b..6853f57 100644 --- a/apps/server/view/page/home/index.ts +++ b/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'); + }, + }); }); diff --git a/packages/ui/src/components/Dropdown/index.scss b/packages/ui/src/components/Dropdown/index.less similarity index 79% rename from packages/ui/src/components/Dropdown/index.scss rename to packages/ui/src/components/Dropdown/index.less index 162069f..26d2299 100644 --- a/packages/ui/src/components/Dropdown/index.scss +++ b/packages/ui/src/components/Dropdown/index.less @@ -1,11 +1,13 @@ .bs-dropdown { - --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); + --background: var(--bs-primary-color); + --text: var(--bs-font-color); + --icon: var(--bs-font-color); + --radius: var(--bs-radius); + --icon-active: var(--bs-dropdown-icon-active); + --list: var(--bs-dropdpwn-list-bgc); + --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; diff --git a/packages/ui/src/components/Dropdown/index.ts b/packages/ui/src/components/Dropdown/index.ts index 3974756..2114d2d 100644 --- a/packages/ui/src/components/Dropdown/index.ts +++ b/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) { - let select = $(selector); + constructor(p: IProps) { + let select = $(p.selector); let options = select.find("option"); - let menu = $("
").addClass("bs-select-menu"); + let menu = $("
").addClass("bs-dropdown"); let button = $("
").addClass("button"); let list = $("
    "); $("").prependTo(button); - options.each(function (i) { let option = $(this); list.append($("
  • ").text(option.text())); @@ -25,34 +33,34 @@ export default class Dropdown { list.clone().insertAfter(button); - $(document).on("click", ".bs-select-menu", function (e) { - let menu = $(this); - if (!menu.hasClass("open")) menu.addClass("open"); - }); + $(document) + .on("click", ".bs-dropdown", function (e) { + 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) { - let li = $(this); - let menu = li.parent().parent(); - let select = menu.children("select"); - let selected = select.find("option:selected"); - let index = li.index(); + menu.css("--t", index * -36.5 + "px"); + selected.removeAttr("selected"); + select.find("option").eq(index).attr("selected", "selected"); + p.onChange && p.onChange(); - menu.css("--t", index * -36.5 + "px"); - selected.removeAttr("selected"); - select.find("option").eq(index).attr("selected", "selected"); + menu.addClass(index > selected.index() ? "tilt-down" : "tilt-up"); - menu.addClass(index > selected.index() ? "tilt-down" : "tilt-up"); - - setTimeout(() => { - 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"); - } - }); + setTimeout(() => { + menu.removeClass("open tilt-up tilt-down"); + }, 500); + }); } } diff --git a/packages/ui/src/components/Tooltip/index.scss b/packages/ui/src/components/Tooltip/index.less similarity index 54% rename from packages/ui/src/components/Tooltip/index.scss rename to packages/ui/src/components/Tooltip/index.less index a770ea9..a9ffc44 100644 --- a/packages/ui/src/components/Tooltip/index.scss +++ b/packages/ui/src/components/Tooltip/index.less @@ -1,13 +1,11 @@ :root { - --bs-bg-color: hsl(0, 0%, 20%); - --bs-border-color: hsl(0, 0%, 25%); - --bs-border-size: 1px; - --bs-border-radius: 2px; - --bs-text-color: white; - --bs-text-size: 1rem; /* I don't recommend putting a large size in here since it kinda relies on being small */ - --bs-offset: 10px; /* How far outwards the tooltip goes */ - --bs-transition-time-short: 0.1s; /* Only affects the fade out animations */ - --bs-transition-time-long: 0.2s; + --bg-color: var(--bs-primary-color); + --radius: var(--bs-radius); + --text-color: var(--bs-font-color); + --size: var(--bs-tooltip-font-size); + --offset: var(--bs-tooltip-offset); + --time-short: 0.1s; + --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); - border: var(--bs-border-size) solid var(--bs-border-color); - transition: var(--bs-transition-time-short); - font-size: var(--bs-text-size); - color: var(--bs-text-color); + background-color: var(--bg-color); + transition: var(--time-short); + font-size: var(--size); + color: var(--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%); } } diff --git a/packages/ui/src/components/Tooltip/index.ts b/packages/ui/src/components/Tooltip/index.ts index 44ae611..49f7e3f 100644 --- a/packages/ui/src/components/Tooltip/index.ts +++ b/packages/ui/src/components/Tooltip/index.ts @@ -1 +1 @@ -import "./index.scss"; +import "./index.less"; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index ddbe3f5..ebbe386 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,3 +1,4 @@ +import "./var.less"; import "./components/Tooltip"; import Dropdown from "./components/Dropdown/index"; diff --git a/packages/ui/src/var.less b/packages/ui/src/var.less new file mode 100644 index 0000000..ca081bf --- /dev/null +++ b/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; +} diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json index 0433e2c..ca2ccae 100644 --- a/packages/ui/tsconfig.json +++ b/packages/ui/tsconfig.json @@ -4,6 +4,6 @@ }, "include": [ "src/**/*" -, "scripts" ], + ], "extends": "../../tsconfig.json", } \ No newline at end of file diff --git a/packages/ui/webpack.config.js b/packages/ui/webpack.config.js deleted file mode 100644 index fceb8a6..0000000 --- a/packages/ui/webpack.config.js +++ /dev/null @@ -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'], - }, -};