mozzie/web-backset.cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ui库 rollup

Browse Source
This commit is contained in:
mozzie 2023-02-25 14:29:38 +08:00
parent 597f1a3c39
commit 5c366bfd3d
12 changed files with 113 additions and 369 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/server/view/page/home/index.ejs
View File

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

2
apps/server/view/page/home/index.less
View File

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

183
apps/server/view/page/home/index.scss
View File

@ -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;
}
}
}

8
apps/server/view/page/home/index.ts
View File

@ -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');
},
});
});

35
packages/ui/src/components/Dropdown/index.scss → packages/ui/src/components/Dropdown/index.less
View File

@ -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;

72
packages/ui/src/components/Dropdown/index.ts
View File

@ -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 = $("<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) {
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);
});
}
}

60
packages/ui/src/components/Tooltip/index.scss → packages/ui/src/components/Tooltip/index.less
View File

@ -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%);
}
}

2
packages/ui/src/components/Tooltip/index.ts
View File

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

1
packages/ui/src/index.ts
View File

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

15
packages/ui/src/var.less Normal file
View File

@ -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;
}

2
packages/ui/tsconfig.json
View File

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

100
packages/ui/webpack.config.js
View File

@ -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'],
},
};