diff --git a/.gitignore b/.gitignore index c626b0f..cec61b0 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ *.min.css .httpserver index.html +test.js .vscode node_modules/ dist/ diff --git a/build.dev.js b/build.dev.js index 3c71713..679d357 100644 --- a/build.dev.js +++ b/build.dev.js @@ -3,7 +3,7 @@ import 'es.shim' import fs from 'iofs' import { parse, resolve } from 'path' -import scss from 'sass' +import scss from '@bytedo/sass' import chalk from 'chalk' import { transform } from 'esbuild' import chokidar from 'chokidar' @@ -37,7 +37,10 @@ function parseName(str) { function fixImport(str) { return str .replace(/import '([\w-/_.]*)'/g, 'import "$1.js"') - .replace(/import ([\w\s,{}$]*) from '([a-z0-9\/\.\-_]*)'/g, 'import $1 from "$2.js"') + .replace( + /import ([\w\s,{}$]*) from '([a-z0-9\/\.\-_]*)'/g, + 'import $1 from "$2.js"' + ) } function compileJs(entry, output) { @@ -47,7 +50,11 @@ function compileJs(entry, output) { buf = fixImport(buf) transform(buf, ESBUILD_OPTIONS).then(res => { - log('编译JS: %s, 耗时 %s ms', chalk.green(entry), chalk.yellow(Date.now() - t1)) + log( + '编译JS: %s, 耗时 %s ms', + chalk.green(entry), + chalk.yellow(Date.now() - t1) + ) fs.echo(res.code, output) }) } @@ -55,7 +62,7 @@ function compileJs(entry, output) { // 编译样式 function compileScss(code = '') { try { - return scss.renderSync({ data: BASE_SCSS + code }).css + return scss.compileString(BASE_SCSS + code).css } catch (err) { log(err) } @@ -105,7 +112,10 @@ function mkWCFile({ style, html, js }) { ) .replace('mounted()', 'connectedCallback()') .replace('unmounted()', 'disconnectedCallback()') - .replace('watch() {', 'attributeChangedCallback(name, old, val) {\nif (old === val) {return}') + .replace( + 'watch() {', + 'attributeChangedCallback(name, old, val) {\nif (old === val) {return}' + ) .replace('adopted()', 'adoptedCallback()') js += `if(!customElements.get('wc-${parseName(name)}')){ @@ -138,7 +148,11 @@ const compileWC = (entry, output) => { js = js ? js[1] : '' mkWCFile({ style, html, js }).then(txt => { - log('编译WC: %s, 耗时 %s ms', chalk.green(entry), chalk.yellow(Date.now() - t1)) + log( + '编译WC: %s, 耗时 %s ms', + chalk.green(entry), + chalk.yellow(Date.now() - t1) + ) fs.echo(txt, output) }) } diff --git a/build.prod.js b/build.prod.js index e9a2f7e..3ebda69 100644 --- a/build.prod.js +++ b/build.prod.js @@ -3,7 +3,7 @@ import 'es.shim' import fs from 'iofs' import { parse, resolve } from 'path' -import scss from 'sass' +import scss from '@bytedo/sass' import chalk from 'chalk' import { transform } from 'esbuild' @@ -37,7 +37,10 @@ function parseName(str) { function fixImport(str) { return str .replace(/import '([\w-/_.]*)'/g, 'import "$1.js"') - .replace(/import ([\w\s,{}$]*) from '([a-z0-9\/\.\-_]*)'/g, 'import $1 from "$2.js"') + .replace( + /import ([\w\s,{}$]*) from '([a-z0-9\/\.\-_]*)'/g, + 'import $1 from "$2.js"' + ) } function compileJs(entry, output) { @@ -47,7 +50,11 @@ function compileJs(entry, output) { buf = fixImport(buf) transform(buf, ESBUILD_OPTIONS).then(res => { - log('编译JS: %s, 耗时 %s ms', chalk.green(entry), chalk.yellow(Date.now() - t1)) + log( + '编译JS: %s, 耗时 %s ms', + chalk.green(entry), + chalk.yellow(Date.now() - t1) + ) fs.echo(res.code, output) }) } @@ -56,9 +63,8 @@ function compileJs(entry, output) { function compileScss(code = '') { try { return ( - scss.renderSync({ - data: BASE_SCSS + code, - outputStyle: 'compressed' + scss.compileString(BASE_SCSS + code, { + style: 'compressed' }).css + '' ).trim() } catch (err) { @@ -112,7 +118,10 @@ function mkWCFile({ style, html, js }) { ) .replace('mounted()', 'connectedCallback()') .replace('unmounted()', 'disconnectedCallback()') - .replace('watch() {', 'attributeChangedCallback(name, old, val) {\nif (old === val) {return}') + .replace( + 'watch() {', + 'attributeChangedCallback(name, old, val) {\nif (old === val) {return}' + ) .replace('adopted()', 'adoptedCallback()') js += `if(!customElements.get('wc-${parseName(name)}')){ @@ -145,7 +154,11 @@ const compileWC = (entry, output) => { js = js ? js[1] : '' mkWCFile({ style, html, js }).then(txt => { - log('编译WC: %s, 耗时 %s ms', chalk.green(entry), chalk.yellow(Date.now() - t1)) + log( + '编译WC: %s, 耗时 %s ms', + chalk.green(entry), + chalk.yellow(Date.now() - t1) + ) fs.echo(txt, output) }) } diff --git a/package.json b/package.json index b3bad16..60b1aed 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "chokidar": "^3.5.2", "es.shim": "^2.0.2", "iofs": "^1.5.2", - "sass": "^1.43.4", + "@bytedo/sass": "^1.58.3", "esbuild": "^0.13.15" } } diff --git a/src/form/button.wc b/src/form/button.wc index 1943e53..2855cbe 100644 --- a/src/form/button.wc +++ b/src/form/button.wc @@ -5,266 +5,6 @@ - - + + diff --git a/src/form/input.wc b/src/form/input.wc index aa5f4a9..7c74cd5 100644 --- a/src/form/input.wc +++ b/src/form/input.wc @@ -13,6 +13,322 @@ + + - - diff --git a/src/form/link.wc b/src/form/link.wc index 712c9a7..bb066e3 100644 --- a/src/form/link.wc +++ b/src/form/link.wc @@ -4,189 +4,6 @@ - - + + diff --git a/src/form/passwd.wc b/src/form/passwd.wc index ee15fab..33cc0db 100644 --- a/src/form/passwd.wc +++ b/src/form/passwd.wc @@ -7,6 +7,203 @@ + + - - diff --git a/src/utils.js b/src/utils.js index 1989ad6..2bdc462 100644 --- a/src/utils.js +++ b/src/utils.js @@ -6,11 +6,18 @@ function noop() {} -export default { +export default function $(selector, container) { + if (container) { + return container.querySelector(selector) + } + return document.body.querySelector(selector) +} + +Object.assign($, { /** * 异步回调 */ - nextTick: (function() { + nextTick: (function () { let queue = [] let node = document.createTextNode('') let bool = false @@ -25,7 +32,7 @@ export default { new MutationObserver(callback).observe(node, { characterData: true }) - return function(fn) { + return function (fn) { queue.push(fn) bool = !bool node.data = bool @@ -35,12 +42,12 @@ export default { //取得距离页面左上角的坐标 offset(node) { try { - var rect = node.getBoundingClientRect() + let rect = node.getBoundingClientRect() if (rect.width || rect.height || node.getClientRects().length) { - var doc = node.ownerDocument - var root = doc.documentElement - var win = doc.defaultView + let doc = node.ownerDocument + let root = doc.documentElement + let win = doc.defaultView return { top: rect.top + win.pageYOffset - root.clientTop, left: rect.left + win.pageXOffset - root.clientLeft @@ -79,13 +86,47 @@ export default { /** * 事件绑定 */ - bind(dom, type, fn = noop, phase = false) { + bind(dom, type, selector, fn, phase = true) { let events = type.split(',') - this.each(events, function(t) { - t = t.trim() - dom.addEventListener(t, fn, phase) + let callback + + if (typeof selector === 'function') { + phase = fn + fn = selector + selector = null + } else { + if (typeof selector !== 'string') { + selector = null + } + fn = fn || noop + } + + if (selector) { + callback = function (ev) { + let agents = $(ev.currentTarget).find(selector) + let elem = ev.target + if (agents) { + while (true) { + if (elem === ev.currentTarget) { + break + } + if (agents.has(elem)) { + fn(ev) + break + } else { + elem = elem.parentNode + } + } + } + } + } else { + callback = fn + } + + $.each(events, function (t) { + dom.addEventListener(t.trim(), callback, phase) }) - return fn + return callback }, /** @@ -93,10 +134,10 @@ export default { */ catch(dom, type, fn, phase) { function fn2(ev) { - ev.stopPropagation && ev.stopPropagation() + ev.stopPropagation() fn && fn(ev) } - return this.bind(dom, type, fn2, phase) + return $.bind(dom, type, fn2, phase) }, /** @@ -104,35 +145,44 @@ export default { */ unbind(dom, type, fn = noop, phase = false) { let events = type.split(',') - this.each(events, function(t) { - t = t.trim() - dom.removeEventListener(t, fn, phase) + $.each(events, function (t) { + dom.removeEventListener(t.trim(), fn, phase) }) }, // 指定节点外点击(最高不能超过body层) outside(dom, fn = noop) { - return this.bind(document, 'mousedown', ev => { - if (ev) { - if (ev.path) { - var path = ev.path.concat() - while (path.length > 3) { - if (path.shift() === dom) { - return - } - } - } else { - var target = ev.explicitOriginalTarget || ev.target - if (dom === target || dom.contains(target) || (dom.root && dom.root.contains(target))) { + return $.bind(document, 'mousedown', ev => { + let path = ev.composedPath ? ev.composedPath() : ev.path + if (path) { + while (path.length > 3) { + if (path.shift() === dom) { return } } + } else { + let target = ev.explicitOriginalTarget || ev.target + if ( + dom === target || + dom.contains(target) || + (dom.root && dom.root.contains(target)) + ) { + return + } } + fn(ev) }) }, clearOutside(fn = noop) { - this.unbind(document, 'mousedown', fn) + $.unbind(document, 'mousedown', fn) + }, + + fire(el, name = 'click', data = {}) { + let ev = document.createEvent('Events') + ev.initEvent(name, true, true) + Object.assign(ev, data) + el.dispatchEvent(ev) } -} +})