@ajaxjs/ui 1.1.9 → 1.2.0

package/src/style/common-functions.less

@@ -0,0 +1,294 @@
+:root {
+    --admin-main-color: #1e6bb8;
+}
+
+.aj-center-title () {
+    text-align    : center;
+    font-size     : 1.3rem;
+    font-weight   : bold;
+    letter-spacing: 5px;
+    padding       : 20px 0;
+}
+
+.aj-text-function() {
+    color         : #333;
+    line-height   : 160%;
+    margin        : 15px 0;
+    font-size     : .95rem;
+    letter-spacing: 1px;
+    text-align    : justify;
+}
+
+.centerBody (@defaultWidth: 1300px) {
+    max-width: @defaultWidth;
+    margin   : 0 auto;
+    width    : 100%;
+    height   : 100%;
+}
+
+.transition (@t) {
+    -webkit-transition: @t;
+    -moz-transition   : @t;
+    -ms-transition    : @t;
+    -o-transition     : @t;
+    transition        : @t;
+}
+
+.transition_withTransform (@t) {
+    -webkit-transition: -webkit-transform @t;
+    -moz-transition   : -moz-transform @t;
+    -ms-transition    : -moz-transform @t;
+    -o-transition     : -o-transform @t;
+    transition        : transform @t;
+}
+
+.transform (@t) {
+    -webkit-transform: @t;
+    -moz-transform   : @t;
+    -ms-transform    : @t;
+    -o-transform     : @t;
+    -transform       : @t;
+}
+
+.heightFx () {
+    .transition (300ms height ease-out);
+}
+
+.widthFx () {
+    .transition (200ms width ease-out);
+}
+
+.leftFx () {
+    .transition (200ms left linear);
+}
+
+// 解决使用CSS动画时闪烁的问题
+// http://ued.taobao.com/blog/2012/01/chrome%E6%B8%B2%E6%9F%93transition%E6%97%B6%E9%A1%B5%E9%9D%A2%E9%97%AA%E5%8A%A8bug/
+.fixTransitionFlash () {
+    backface-visibility        : hidden;
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility   : hidden;
+}
+
+// 解决高度塌陷的问题 – 清除浮动 或叫 闭合浮动
+// http://www.iyunlu.com/view/css-xhtml/55.html
+// http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%BA%8C/
+// 强制换行
+.forceBreak () {
+    word-wrap : break-word;
+    word-break: break-all;
+}
+
+.giveHeight () {
+    overflow: hidden;
+    zoom    : 1;
+}
+
+// 透明度
+.imgOpacityShow (@time: 300ms) {
+    .transition (opacity @time ease-in);
+}
+
+// 旋转角度
+.rotate (@ro: 30deg) {
+    .transform (rotate(@ro));
+}
+
+// 渐变
+.gradient (@direction , @startColor , @endColor) {
+    background-image: -webkit-linear-gradient(@direction, @startColor, @endColor);
+    background-image: -moz-linear-gradient(@direction, @startColor, @endColor);
+    background-image: -ms-linear-gradient(@direction, @startColor, @endColor);
+    background-image: -o-linear-gradient(@direction, @startColor, @endColor);
+    background-image: linear-gradient(@direction, @startColor, @endColor);
+}
+
+// 渐变
+.gradient (@direction , @startColor , @midColor , @endColor) {
+    background-image: -webkit-linear-gradient(@direction, @startColor, @midColor, @endColor);
+    background-image: -moz-linear-gradient(@direction, @startColor, @midColor, @endColor);
+    background-image: -ms-linear-gradient(@direction, @startColor, @midColor, @endColor);
+    background-image: -o-linear-gradient(@direction, @startColor, @midColor, @endColor);
+    background-image: linear-gradient(@direction, @startColor, @midColor, @endColor);
+}
+
+.fadeIn (@duration) {
+    animation         : fade-in;
+    animation-duration: @duration;
+    -webkit-animation : fade-in @duration;
+}
+
+.fadeOut (@duration) {
+    animation         : fade-out-hide;
+    animation-duration: @duration;
+    -webkit-animation : fade-out-hide @duration;
+}
+.aj-text-title {
+    letter-spacing: 2px;
+    margin: 10px;
+}
+.aj-text-function() {
+    color         : #333;
+    line-height   : 160%;
+    margin        : 15px 0;
+    font-size     : .95rem;
+    letter-spacing: 1px;
+    text-align    : justify;
+}
+
+// 快速制作1px 表格边框，为需要设置的 table 元素加上 border 的class即可
+.aj-table {
+    border         : 1px lightgray solid;
+    border-collapse: collapse;
+    border-spacing : 0;
+
+    th {
+        background-color: #efefef;
+        letter-spacing  : 3px;
+    }
+
+    td,
+    th {
+        border     : 1px lightgray solid;
+        line-height: 160%;
+        height     : 120%;
+        padding    : 6px;
+    }
+
+    tr {
+        .transition (background-color 400ms ease-out);
+
+        &:nth-child(odd) {
+            background: #f5f5f5;
+            box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
+        }
+
+        &:hover {
+            background-color: #fbf8e9;
+        }
+    }
+
+}
+
+.aj-form-table {
+    border-collapse: collapse;
+    border-spacing : 0;
+
+    th {
+        background-color: #efefef;
+        letter-spacing  : 3px;
+    }
+
+    td,
+    th {
+        line-height: 160%;
+        height     : 120%;
+        padding    : 10px 15px;
+    }
+
+    tr {
+        .transition (background-color 400ms ease-out);
+
+        &:nth-child(odd) {
+            background: #f5f5f5;
+            box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
+        }
+
+        &:hover {
+            background-color: #fbf8e9;
+        }
+    }
+}
+
+.aj-btn-base() {
+    min-height         : 26px;
+    font-size          : .8rem;
+    //line-height: 100%;
+    padding            : .3em 2.3em;
+    margin             : 10px auto;
+    color              : #333;
+    letter-spacing     : .3em;
+    border-radius      : 4px;
+    border             : 1px solid #ccc;
+    border-bottom-color: #B4B4B4;
+    box-shadow         : 0 1px 3px rgba(0, 0, 0, 0.12);
+    text-shadow        : 0 1px 0 rgba(255, 255, 255, 0.8);
+    background-color   : lightgray;
+    background-repeat  : repeat-x;
+    transition         : background-image 0.5s linear 1s;
+    cursor             : pointer;
+    outline            : 0;
+    .gradient (to bottom, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 60%, rgba(225, 223, 226, 1) 100%);
+
+    img {
+        vertical-align: middle;
+    }
+
+    &:hover {
+        color       : black;
+        border-color: lighten(black, 65%);
+    }
+
+    &:active {
+        box-shadow  : inset 0 3px 5px rgba(0, 0, 0, .2);
+        border-color: lighten(black, 55%);
+    }
+
+    &:focus {
+        border-color: lighten(black, 60%);
+    }
+
+    &:hover {
+        background-position: 0px -10px;
+    }
+}
+
+.aj-btnsHolder {
+    text-align: center;
+    padding   : 2% 0;
+
+    button {
+        margin-right: 3% !important;
+    }
+}
+
+.aj-input-base() {
+    min-height      : 25px;
+    font-size       : .9rem;
+    border          : 1px solid #abadb3;
+    // border-radius   : 3px;
+    box-sizing      : border-box;
+    background-color: white;
+    transition      : border-color ease-in-out 200ms;
+    outline         : 0;
+    padding         : 2px;
+    vertical-align  : middle;
+    color           : #333;
+    // letter-spacing  : 1px;
+
+    &:hover,
+    &:focus {
+        // box-shadow      : 1px 2px 3px #e5e5e5 inset;
+        border-color: lighten(black, 45);
+    }
+}
+
+form.aj-form {
+    input[type=text], .form input[type=password], .form textarea{
+        .aj-input-base();
+    }
+    button {
+        .aj-btn-base();
+    }
+
+    select {
+        color: gray;
+        height: 25px;
+        border: 1px solid gray;
+    }
+    
+    select:hover {
+        border-color: black;
+    }
+    
+}

package/src/style/reset.less

@@ -0,0 +1,19 @@
+/* AJAXJS Base CSS */
+body,dl,dt,dd,ul,li,pre,form,fieldset,input,p,blockquote,th,td,h1,h2,h3,h4,h5{margin:0;padding:0;}
+h1,h2,h3,h4,h5{font-weight: normal;}img{border:0;}ul li{list-style-type:none}.hide{display:none}
+body {-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;
+    font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;}
+
+/* a{text-decoration:none;color:#666;transition:color .4s ease-in-out;}
+a:hover{color:#000;}
+button{border:none;outline:0;cursor:pointer;letter-spacing:2px;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}
+input[type=password],input[type=text],select,textarea{outline:0;-moz-appearance:none;} */
+
+/* 手机端浏览器所显示的网页 CSS */
+@media screen and (max-width:480px) {
+    * {
+        -webkit-tap-highlight-color: transparent; /* 很多 Android 浏览器的 a 链接有边框，这里取消它  */
+        -webkit-touch-callout: none; /* 在 iOS 浏览器里面，假如用户长按 a 标签，都会出现默认的弹出菜单事件 */
+        /* -webkit-user-select:none; */
+    }
+}	

package/src/util/cookies.ts

@@ -0,0 +1,43 @@
+/**
+ * 获取某个 Cookie
+ * 
+ * @param name 键名称 
+ * @returns 值
+ */
+export function getCookie(name: string): string | null {
+    let arr: RegExpMatchArray, reg: RegExp = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
+
+    if (arr = document.cookie.match(reg))
+        return unescape(arr[2]);
+    else
+        return null;
+}
+
+/**
+ * 设置某个 Cookie
+ * 
+ * @param name  键名称 
+ * @param value 值
+ */
+export function setCookie(name: string, value: string): void {
+    let days: number = 2, exp: Date = new Date();
+    exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
+    // @ts-ignore
+    document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString();
+}
+
+/**
+ * 清空 Cookie
+ */
+export function delCookie(): void {
+    let keys = document.cookie.match(/[^ =;]+(?==)/g);
+
+    if (keys) {
+        let date: string = new Date(0).toUTCString();
+        for (let i = keys.length; i--;) {
+            document.cookie = keys[i] + '=0;path=/;expires=' + date; // 清除当前域名下的,例如：m.ratingdog.cn
+            document.cookie = keys[i] + '=0;path=/;domain=' + document.domain + ';expires=' + date; // 清除当前域名下的，例如 .m.ratingdog.cn
+            document.cookie = keys[i] + '=0;path=/;domain=' + location.host + ';expires=' + date; // 清除一级域名下的或指定的，例如 .ratingdog.cn
+        }
+    }
+}

package/src/util/dom.ts

@@ -0,0 +1,47 @@
+/**
+ * 向父级元素递归搜索
+ * 
+ * @param _el       当前所在元素
+ * @param tagName   目标标签名称
+ * @param className 目标元素样式类
+ * @returns 目标元素，找不到为 null
+ */
+export function up(_el: Element, tagName: string, className: string): Element | null {
+    if (tagName && className)
+        throw '只能任选一种参数，不能同时传';
+
+    let el: Element = _el.parentNode as Element;
+    tagName = tagName && tagName.toUpperCase();
+
+    while (el) {
+        if (tagName && el.tagName == tagName)
+            return el;
+
+        if (className && el.className && ~el.className.indexOf(className))
+            return el;
+
+        el = <Element>el.parentNode;
+    }
+
+    return null;
+}
+
+/**
+ * 加载脚本
+ * 
+ * @param url   脚本地址
+ * @param id    脚本元素 id，可选的
+ * @param cb    回调函数，可选的
+ */
+export function loadScript(url: string, id?: string, cb?: (ev: Event) => any): void {
+    let script: HTMLScriptElement = document.createElement("script");
+    script.src = url;
+
+    if (cb)
+        script.onload = cb;
+
+    if (id)
+        script.id = id;
+
+    document.getElementsByTagName("head")[0].appendChild(script);
+}

package/src/util/utils.ts

@@ -0,0 +1,184 @@
+/**
+ * 通用工具类
+ */
+
+const env = process.env.NODE_ENV;
+
+/**
+ * 是否调试模式中
+ * 
+ * 打包成组件之后不能用
+ * 
+ * @returns 
+ */
+export function isDebug(): boolean {
+    return env === 'development';
+}
+
+export function isDev(): boolean {
+    let currentHostname: string = window.location.hostname;
+
+    // 判断主机名是否是内网地址
+    return (currentHostname.startsWith('192.168.') || currentHostname.startsWith('10.') || currentHostname === 'localhost');
+}
+
+/**
+* 日期格式化。详见博客文章：http://blog.csdn.net/zhangxin09/archive/2011/01/01/6111294.aspx
+* e.g: new Date().format("yyyy-MM-dd hh:mm:ss")
+*
+* @param 	{String} format
+* @return	{String}
+*/
+export function dateFormat(this: Date, format: string): string {
+    let $1, o: any = {
+        "M+": this.getMonth() + 1,		// 月份，从0开始算
+        "d+": this.getDate(),   		// 日期
+        "h+": this.getHours(),   		// 小时
+        "m+": this.getMinutes(), 		// 分钟
+        "s+": this.getSeconds(), 		// 秒钟
+        // 季度 quarter
+        "q+": Math.floor((this.getMonth() + 3) / 3),
+        "S": this.getMilliseconds()	// 千秒
+    };
+
+    if (/(y+)/.test(format)) {
+        $1 = RegExp.$1, format = format.replace($1, String(this.getFullYear()).substr(4 - $1));
+    }
+
+    let key: string, value: string;
+    for (key in o) { // 如果没有指定该参数，则子字符串将延续到 stringvar 的最后。
+        if (new RegExp("(" + key + ")").test(format)) {
+            $1 = RegExp.$1,
+                value = String(o[key]),
+                value = $1.length == 1 ? value : ("00" + value).substr(value.length),
+                format = format.replace($1, value);
+        }
+    }
+
+    return format;
+}
+
+/**
+ * 日期格式化
+ * @author meizz
+ * @param date  日期，必须为 Date 类型
+ * @param fmt   格式模板
+ * @returns 格式化后的字符串
+ */
+export function dateFormat2(date: Date, fmt: string): string {
+    let o: { [key: string]: number } = {
+        "M+": date.getMonth() + 1,                  // 月份   
+        "d+": date.getDate(),                       // 日   
+        "h+": date.getHours(),                      // 小时   
+        "m+": date.getMinutes(),                    // 分   
+        "s+": date.getSeconds(),                    // 秒   
+        "q+": Math.floor((date.getMonth() + 3) / 3),// 季度   
+        "S": date.getMilliseconds()                 // 毫秒   
+    };
+
+    if (/(y+)/.test(fmt))
+        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
+
+    for (var k in o)
+        if (new RegExp("(" + k + ")").test(fmt)) {
+            let obj = (RegExp.$1.length == 1) ? o[k] : ("00" + o[k]).substr(("" + o[k]).length);
+            // @ts-ignore
+            fmt = fmt.replace(RegExp.$1, obj);
+        }
+
+    return fmt;
+}
+
+/**
+ * 并行和串行任务 
+ * 
+ * @author https://segmentfault.com/a/1190000013265925
+ * @param arr 
+ * @param finnaly 
+ */
+export function parallel(arr: [], _finally: Function) {
+    let fn: Function, index: number = 0;
+    // @ts-ignore
+    let statusArr = Array(arr.length).fill().map(() => ({ isActive: false, data: null }));
+
+    let isFinished = function () {
+        return statusArr.every((item: any) => item.isActive === true);
+    }
+
+    let resolve = function (index: number): Function {
+        return function (data: any) {
+            statusArr[index].data = data;
+            statusArr[index].isActive = true;
+            let isFinish = isFinished();
+
+            if (isFinish) {
+                let datas = statusArr.map((item: any) => item.data);
+
+                _finally(datas);
+            }
+        };
+    };
+
+    // @ts-ignore
+    while ((fn = arr.shift())) {
+        fn(resolve(index));// 给 resolve 函数追加参数,可以使用 bind 函数实现,这里使用了柯里化
+        index++;
+    }
+}
+
+/**
+ * 函数节流
+ * 
+ * @author https://www.cnblogs.com/moqiutao/p/6875955.html
+ * @param fn 
+ * @param delay 
+ * @param mustRunDelay 
+ */
+export function throttle(fn: Function, delay: number, mustRunDelay: number): Function {
+    var timer: number, t_start: number;
+
+    return function () {
+        var t_curr = +new Date();
+        window.clearTimeout(timer);
+
+        if (!t_start)
+            t_start = t_curr;
+
+        if (t_curr - t_start >= mustRunDelay) {
+            // @ts-ignore
+            fn.apply(this, arguments);
+            t_start = t_curr;
+        } else {
+            var args = arguments;
+            // @ts-ignore
+            timer = window.setTimeout(() => fn.apply(this, args), delay);
+        }
+    };
+}
+
+/**
+* 复制文字到剪切板
+* 
+* @param {*} text 
+*/
+export function copyToClipboard(text) {
+    if (navigator.clipboard) {
+        // clipboard api 复制
+        navigator.clipboard.writeText(text);
+    } else {
+        let textarea = document.createElement('textarea');
+        document.body.appendChild(textarea);
+        // 隐藏此输入框
+        textarea.style.position = 'fixed';
+        textarea.style.clip = 'rect(0 0 0 0)';
+        textarea.style.top = '10px';
+        // 赋值
+        textarea.value = text;
+        // 选中
+        textarea.select();
+        // 复制
+        document.execCommand('copy', true);
+        // 移除输入框
+        document.body.removeChild(textarea);
+    }
+}

package/src/util/xhr-config.ts

@@ -0,0 +1,25 @@
+/**
+ * XHR 请求配置
+ */
+export interface XhrConfig {
+    /**
+     * 请求头里面的 Content-Type 字段
+     */
+    contentType?: string;
+
+    /**
+     * XHR 响应结果的类型
+     */
+    parseContentType?: 'text' | 'xml' | 'json';
+
+    /**
+     * 超时时间，单位是毫秒
+     * 设为 0 适合不控制超时
+     */
+    timeout?: number;
+
+    /**
+     * 是否跨域
+     */
+    withCredentials?: boolean;
+}