feat: ui库 webpack

This commit is contained in:
mozzie 2023-02-24 00:34:24 +08:00
parent 50be565e70
commit 45aa679385
10 changed files with 1661 additions and 138 deletions

View File

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

View File

@ -1,56 +1,8 @@
import './index.less';
import $ from 'jquery';
import '@backset/ui/src/components/Tooltip/index.less';
// import '@backset/ui/src/components/Dropdown/index.scss';
// import '@backset/ui/src/components/Tooltip/index.less';
import Dropdown from '@backset/ui/dist/Dropdown';
$('select[data-menu]').each(function () {
let select = $(this);
let options = select.find('option');
let menu = $('<div />').addClass('bs-select-menu');
let button = $('<div />').addClass('button');
let list = $('<ul />');
$('<em />').prependTo(button);
options.each(function (i) {
let option = $(this);
list.append($('<li />').text(option.text()));
});
menu.css('--t', select.find(':selected').index() * -36.5 + 'px');
select.wrap(menu);
button.append(list).insertAfter(select);
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-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');
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');
}
$(function () {
new Dropdown('.ttt');
});

View File

@ -37,7 +37,9 @@
"autoprefixer": "10.4.13",
"terser-webpack-plugin": "5.3.6",
"webpack-bundle-analyzer": "4.8.0",
"normalize.css": "8.0.1"
"normalize.css": "8.0.1",
"@babel/plugin-proposal-class-properties": "7.18.6",
"@babel/preset-env": "7.20.2"
},
"dependencies": {
"object-hash": "^3.0.0"

View File

@ -4,9 +4,11 @@
"main": "dist/index",
"types": "dist/index.d.ts",
"scripts": {
"build": "rimraf ./dist && tsc -p ./tsconfig.build.json"
"build": "webpack build"
},
"devDependencies": {
"semantic-ui-dropdown": "2.5.0"
"semantic-ui-dropdown": "2.5.0",
"jquery": "3.6.3",
"@types/jquery": "3.5.16"
}
}

View File

@ -1 +1,58 @@
import './index.less'
import "./index.scss";
import $ from "jquery";
export const useHi = (str: string) => console.log(str);
export default class Dropdown {
constructor(selector: string) {
let select = $(selector);
let options = select.find("option");
let menu = $("<div />").addClass("bs-select-menu");
let button = $("<div />").addClass("button");
let list = $("<ul />");
$("<em />").prependTo(button);
options.each(function (i) {
let option = $(this);
list.append($("<li />").text(option.text()));
});
menu.css("--t", select.find(":selected").index() * -36.5 + "px");
select.wrap(menu);
button.append(list).insertAfter(select);
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-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");
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");
}
});
}
}

View File

@ -3,7 +3,8 @@
"experimentalDecorators": true
},
"include": [
"src/**/*"
"src/**/*",
"webpack.config.js"
],
"extends": "../../tsconfig.json",
}

View File

@ -0,0 +1,100 @@
/*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() },
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '',
filename: '[name].js',
clean: true,
libraryTarget: 'umd' // 添加 export default
},
mode: 'development',
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'],
},
};

File diff suppressed because it is too large Load Diff

View File

@ -2,6 +2,7 @@
"compilerOptions": {
"noImplicitAny": true, /* any*/
"strictNullChecks": true,
"esModuleInterop": true,
"baseUrl": ".",
"paths": {
"@backset/*": [