export wheel.min

.npmignore

@@ -0,0 +1,13 @@
+src/
+node_modules/
+.babelrc
+webpack.config.js
+.gitignore
+log4js.json
+tsconfig.json
+tslint.json
+.npmignore
+.npmrc
+.yarnrc
+logs/
+

.yarnrc

@@ -0,0 +1,2 @@
+--registry "https://registry.npm.taobao.org"
+--no-lockfile true

gulpfile.js

@@ -0,0 +1,180 @@
+const gulp = require('gulp');
+const webpack = require("webpack");
+const ws = require('webpack-stream');
+const autoprefixer = require("autoprefixer");
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const pkg = require("./package.json");
+
+gulp.task('build:wheel-picker', (cb) => {
+	const dest = './dist/';
+	console.log(cb)
+	const banner = `	WheelPicker v${pkg.version}
+	${pkg.homepage}
+	Licensed under the ${pkg.license} License`;
+	return gulp.src(['./src/WheelPicker.js'])
+		.pipe(ws({
+			entry: {
+				wheelpicker: "./src/WheelPicker.js"
+			},
+			output: {
+				path: __dirname + "/dist",
+				filename: "[name].min.js",
+				library: "WheelPicker",
+				libraryTarget: "umd"
+			},
+			module: {
+				loaders: [{
+					test: /\.scss$/,
+					loader: ExtractTextPlugin.extract(["css", "sass-loader!postcss-loader"])
+				}]
+			},
+			plugins: [
+				new webpack.optimize.UglifyJsPlugin({ minimize: true }),
+				new ExtractTextPlugin("[name].min.css"),
+				new webpack.BannerPlugin(banner, { entryOnly: true })
+			],
+			postcss: function () {
+				return [autoprefixer];
+			}
+		}, webpack))
+		.on('error', (e) => {
+			cb(e);
+		})
+		.pipe(gulp.dest(dest));
+});
+
+gulp.task('build:wheel', (cb) => {
+	const dest = './dist/';
+	const banner = `	Wheel v${pkg.version}
+	${pkg.homepage}
+	Licensed under the ${pkg.license} License`;
+	return gulp.src(['./src/Wheel.js'])
+		.pipe(ws({
+			entry: {
+				wheel: "./src/Wheel.js"
+			},
+			output: {
+				path: __dirname + "/dist",
+				filename: "[name].min.js",
+				library: "Wheel",
+				libraryTarget: "umd"
+			},
+			module: {
+				loaders: [{
+					test: /\.scss$/,
+					loader: ExtractTextPlugin.extract(["css", "sass-loader!postcss-loader"])
+				}]
+			},
+			plugins: [
+				new webpack.optimize.UglifyJsPlugin({ minimize: true }),
+				new ExtractTextPlugin("[name].min.css"),
+				new webpack.BannerPlugin(banner, { entryOnly: true })
+			],
+			postcss: function () {
+				return [autoprefixer];
+			}
+		}, webpack))
+		.on('error', (e) => {
+			cb(e);
+		})
+		.pipe(gulp.dest(dest));
+});
+
+gulp.task('watch:wheel-picker', async (cb) => {
+	await sleep(10000);
+	const dest = './dist/';
+	console.log(cb)
+	const banner = `	WheelPicker v${pkg.version}
+	${pkg.homepage}
+	Licensed under the ${pkg.license} License`;
+	return gulp.src(['./src/WheelPicker.js'])
+		.pipe(ws({
+			watch: true,
+			watchOptions: {
+				aggregateTimeout: 300,
+				poll: 1000,
+				ignored: /node_modules/
+			},
+			mode: 'none',
+			entry: {
+				wheelpicker: "./src/WheelPicker.js"
+			},
+			output: {
+				path: __dirname + "/dist",
+				filename: "[name].min.js",
+				library: "WheelPicker",
+				libraryTarget: "umd"
+			},
+			module: {
+				loaders: [{
+					test: /\.scss$/,
+					loader: ExtractTextPlugin.extract(["css", "sass-loader!postcss-loader"])
+				}]
+			},
+			plugins: [
+				new ExtractTextPlugin("[name].min.css"),
+				new webpack.BannerPlugin(banner, { entryOnly: true })
+			],
+			postcss: function () {
+				return [autoprefixer];
+			}
+		}, webpack))
+		.on('error', (e) => {
+			cb(e);
+		})
+		.pipe(gulp.dest(dest));
+});
+
+gulp.task('watch:wheel', async (cb) => {
+	await sleep(10000);
+	const dest = './dist/';
+	const banner = `	Wheel v${pkg.version}
+	${pkg.homepage}
+	Licensed under the ${pkg.license} License`;
+	return gulp.src(['./src/Wheel.js'])
+		.pipe(ws({
+			watch: true,
+			watchOptions: {
+				aggregateTimeout: 300,
+				poll: 1000,
+				ignored: /node_modules/
+			},
+			mode: 'none',
+			entry: {
+				wheel: "./src/Wheel.js"
+			},
+			output: {
+				path: __dirname + "/dist",
+				filename: "[name].min.js",
+				library: "Wheel",
+				libraryTarget: "umd"
+			},
+			module: {
+				loaders: [{
+					test: /\.scss$/,
+					loader: ExtractTextPlugin.extract(["css", "sass-loader!postcss-loader"])
+				}]
+			},
+			plugins: [
+				new ExtractTextPlugin("[name].min.css"),
+				new webpack.BannerPlugin(banner, { entryOnly: true })
+			],
+			postcss: function () {
+				return [autoprefixer];
+			}
+		}, webpack))
+		.on('error', (e) => {
+			cb(e);
+		})
+		.pipe(gulp.dest(dest));
+});
+
+function sleep(timeout) {
+	return new Promise((resolve) => {
+		setTimeout(resolve, timeout);
+	})
+}
+
+gulp.task('watch', gulp.parallel('watch:wheel', 'watch:wheel-picker'));
+
+gulp.task('default', gulp.parallel('build:wheel', 'build:wheel-picker'));

index.d.ts

@@ -0,0 +1,134 @@
+interface Item {
+	text?: string;
+	value?: string;
+}
+
+type IData = Item | string;
+
+interface IWheelOptions {
+	/**
+	 * 每列的数据组成的数组
+	 */
+	data: IData[];
+	/**
+	 * 每列的默认值组成的数组
+	 */
+	value?: string;
+	/**
+	 * 可见的行数（奇数）
+	 */
+	rows?: number;
+	/**
+	 * 行高
+	 */
+	rowHeight?: number;
+	/**
+	 * 选择改变时触发，参数为选中数据
+	 */
+	onSelect?: (selectedItems: IData) => void;
+}
+
+export class Wheel {
+	constructor(container: HTMLHtmlElement, options: IWheelOptions);
+}
+
+type TOmit = 'onSelect' | 'data'
+
+interface IWheelPickerOptions extends Omit<IWheelOptions, TOmit> {
+	/**
+	 * 标题
+	 */
+	title: string;
+	/**
+	 * 选择器对应的 input 元素
+	 */
+	el: HTMLInputElement;
+	/**
+	 * 将 el.type 设置为 hidden 并用于保存 value 值；再 clone 一个 el 元素用于显示 text 值
+	 */
+	hiddenInput?: boolean;
+	/**
+	 * 点击遮罩层关闭组件（相当于点击取消按钮）
+	 */
+	hideOnBackdrop?: boolean;
+	/**
+	 * 每列的数据组成的数组
+	 */
+	data: IData[][];
+	/**
+	 * 从 el 元素获取默认值
+	 */
+	formatValue?: (val: string) => void;
+	/**
+	 * 保存时填充到 el 或 cloneNode 的值
+	 */
+	parseValue?: (val: string) => void;
+	/**
+	 * 保存时填充到 el 的值（如果 hiddenInput 为 true）
+	 */
+	parseHiddenValue?: (val: string) => void;
+	/**
+	 * 生成组件 DOM 时触发，参数为组件元素
+	 */
+	onRender?: (container: HTMLDivElement) => void;
+	/**
+	 * 显示组件时触发
+	 */
+	onShow?: () => void;
+	/**
+	 * 滚动导致值变化时触发，参数为发生变化的列的索引值和选中项
+	 */
+	onChange?: (index: number, selectedItem: IData) => void;
+	/**
+	 * 点击确定时触发，参数为条目数组
+	 */
+	onSelect?: (selectedItems: IData[]) => void;
+	/**
+	 * 点击取消时触发
+	 */
+	onCancel?: () => void;
+}
+
+export default class WheelPicker {
+	constructor(options: IWheelPickerOptions);
+	/**
+	 * 返回值数组或指定列的值
+	 */
+	public getValue(index: number): IData;
+	/**
+	 * 设置各列的值或指定列的值
+	 */
+	public setValue(value: string, index?: number): void;
+	/**
+	 * 返回选中的条目数组
+	 */
+	public getSelectedItems(): IData[];
+	/**
+	 * 返回数据数组或指定列的数据
+	 */
+	public getData(index?: number): IData[] | IData[][];
+	/**
+	 * 设置各列或指定列的数据和值
+	 */
+	public setData(data: IData[] | IData[][], index: number, value: string | string[]);
+	/**
+	 * 显示组件
+	 */
+	public show();
+	/**
+	 * 隐藏组件
+	 */
+	public hide();
+	/**
+	 * 启用组件
+	 */
+	public enable();
+	/**
+	 * 禁用组件
+	 */
+	public disable();
+	/**
+	 * 销毁组件
+	 */
+	public destory();
+}

package.json

@@ -1,15 +1,15 @@
 {
-  "name": "wheel-picker",
-  "version": "1.1.0",
+  "name": "@feidao-msz/wheel-picker",
+  "version": "1.0.201910161500",
   "description": "仿 iOS UIPickerView 的滚动选择器",
   "main": "dist/wheelpicker.min.js",
   "keywords": [
     "UIPickerView",
     "滚动选择"
   ],
   "scripts": {
-    "build": "webpack --optimize-minimize",
-    "dev": "webpack --progress --colors --watch"
+    "build": "gulp",
+    "dev": "gulp && gulp watch & live-server"
   },
   "author": "Cople",
   "license": "MIT",
@@ -25,6 +25,9 @@
     "postcss-loader": "^0.9.1",
     "sass-loader": "^3.2.3",
     "style-loader": "^0.13.1",
-    "webpack": "^1.13.2"
+    "webpack": "^1.13.2",
+    "gulp": "4.0.2",
+    "webpack-stream": "5.2.1",
+    "live-server": "latest"
   }
 }

publish.sh

@@ -0,0 +1,3 @@
+#! /bin/bash
+version='1.0.'$(date +%Y%m%d%H%M)
+npm version ${version} && npm run build && npm publish --access public && git commit -am publish:${version} && git push