@ajaxjs/ui 1.2.0 → 1.2.2

package/src/util/xhr.ts

@@ -1,296 +0,0 @@
-import { XhrConfig } from './xhr-config';
-
-/**
- * 默认的请求配置
- */
-const DEFAULT_XHR_CFG: XhrConfig = {
-    timeout: 5000,
-    withCredentials: false,
-    parseContentType: 'json'
-};
-
-/**
- * 处理响应的回调函数
- */
-type XhrCallback = (json: {}, text: string) => void;
-
-/**
- * 全局请求的 head 参数
- */
-let BASE_HEAD_PARAMS = null;
-
-/**
- * 设置全局请求的 head 参数
- * 
- * @param param 
- */
-export function setBaseHeadParams(params: any): void {
-    if (BASE_HEAD_PARAMS === null)
-        BASE_HEAD_PARAMS = {};
-
-    Object.assign(BASE_HEAD_PARAMS, params);
-}
-
-/**
- * 
- * @param getOrDel 
- * @param url 
- * @param cb 
- * @param params 
- * @param cfg 
- */
-function getOrDel(getOrDel: 'get' | 'delete', url: string, cb: XhrCallback, params?: {}, cfg: XhrConfig = DEFAULT_XHR_CFG): void {
-    let xhr: XMLHttpRequest = initXhr(cfg);
-
-    if (params != null) {
-        if (url.indexOf('?') != -1)
-            url += '&' + toParams(params);
-        else
-            url += '?' + toParams(params);
-    }
-
-    xhr.open(getOrDel.toUpperCase(), url, true);
-    xhr.onreadystatechange = function () {
-        responseHandle(this, cb, cfg);
-    }
-
-    if (BASE_HEAD_PARAMS)// 设置自定义请求头
-        for (let key in BASE_HEAD_PARAMS)
-            xhr.setRequestHeader(key, BASE_HEAD_PARAMS[key]);
-
-    xhr.send();
-}
-
-/**
- * 
- * @param method 
- * @param url 
- * @param cb 
- * @param params 
- * @param cfg 
- */
-function postOrPut(method: 'post' | 'put', url: string, cb: XhrCallback, params: string | {}, cfg: XhrConfig = DEFAULT_XHR_CFG): void {
-    let xhr: XMLHttpRequest = initXhr(cfg);
-    xhr.open(method, url, true);
-    xhr.onreadystatechange = function () {
-        responseHandle(this, cb, cfg);
-    }
-
-    if (BASE_HEAD_PARAMS) // 设置自定义请求头
-        for (let key in BASE_HEAD_PARAMS)
-            xhr.setRequestHeader(key, BASE_HEAD_PARAMS[key]);
-
-    // 此方法必须在 open() 方法和 send() 之间调用
-
-    if (!cfg.contentType) // 如未设置，默认为表单请求
-        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-    else
-        xhr.setRequestHeader("Content-Type", cfg.contentType);
-
-
-    let _params: string = typeof params != 'string' ? toParams(params) : <string>params;
-
-    if (_params)
-        xhr.send(_params);
-    else
-        xhr.send();
-}
-
-/**
- * 
- * @param url 
- * @param cb 
- * @param params 
- * @param cfg 
- */
-export function xhr_post_upload(url: string, cb: XhrCallback, params: Document | XMLHttpRequestBodyInit, cfg: XhrConfig = DEFAULT_XHR_CFG): void {
-    let xhr: XMLHttpRequest = initXhr(cfg);
-    xhr.open('post', url, true);
-    xhr.onreadystatechange = function () {
-        responseHandle(this, cb, cfg);
-    }
-
-    if (BASE_HEAD_PARAMS) // 设置自定义请求头
-        for (let key in BASE_HEAD_PARAMS)
-            xhr.setRequestHeader(key, BASE_HEAD_PARAMS[key]);
-
-    // 什么 Content-Type 都不设置
-
-    xhr.send(params);
-}
-
-/**
- * XHR GET 请求
- * 
- * @param url       请求地址
- * @param cb        回调函数 @example (json: {}, text: string) => void;
- * @param params    参数，必填，如无填空字符串 ""；参数类型是json；参数值会进行 URL 编码，最后附加到 QueryString 中
- * @param cfg       配置，可选的
- */
-export function xhr_get(url: string, cb: XhrCallback, params?: {}, cfg: XhrConfig = DEFAULT_XHR_CFG): void {
-    getOrDel('get', url, cb, params, cfg);
-}
-
-/**
- * XHR DELETE 请求
- * 
- * @param url       请求地址
- * @param cb        回调函数 @example (json: {}, text: string) => void;
- * @param params    参数，必填，如无填空字符串 ""；参数类型是json；参数值会进行 URL 编码，最后附加到 QueryString 中
- * @param cfg       配置，可选的
- */
-export function xhr_del(url: string, cb: XhrCallback, params?: {}, cfg: XhrConfig = DEFAULT_XHR_CFG): void {
-    getOrDel('delete', url, cb, params, cfg);
-}
-
-/**
- * XHR POST 请求
- * 
- * @param url       请求地址
- * @param cb        回调函数 @example (json: {}, text: string) => void;
- * @param params    参数，必填，如无填空字符串 ""；参数类型可以是字符串或 json；参数值会进行 URL 编码
- * @param cfg       配置，可选的
- */
-export function xhr_post(url: string, cb: XhrCallback, params: string | {}, cfg: XhrConfig = DEFAULT_XHR_CFG): void {
-    postOrPut('post', url, cb, params, cfg);
-}
-
-/**
- * XHR PUT 请求
- * 
- * @param url       请求地址
- * @param cb        回调函数 @example (json: {}, text: string) => void;
- * @param params    参数，必填，如无填空字符串 ""；参数类型可以是字符串或 json；参数值会进行 URL 编码
- * @param cfg       配置，可选的
- */
-export function xhr_put(url: string, cb: XhrCallback, params: string | {}, cfg: XhrConfig = DEFAULT_XHR_CFG): void {
-    postOrPut('put', url, cb, params, cfg);
-}
-
-/**
- * 初始化 XHR
- * 
- * @param cfg 
- * @returns 
- */
-function initXhr(cfg: XhrConfig): XMLHttpRequest {
-    let xhr: XMLHttpRequest = new XMLHttpRequest();
-
-    if (cfg && cfg.timeout) {
-        xhr.timeout = cfg.timeout;
-        xhr.ontimeout = (e: ProgressEvent<EventTarget>) => console.error('系统异常，XHR 连接服务超时');
-    }
-
-    if (cfg && cfg.withCredentials)
-        xhr.withCredentials = true;
-
-    return xhr;
-}
-
-/**
- * 错误处理 
- * 
- * @param xhr 
- */
-function errHandle(xhr: XMLHttpRequest): void {
-    let msg: string;
-
-    if (xhr.status <= 400)
-        msg = '请求参数错误或者权限不足。';
-    else if (xhr.status <= 500)
-        msg = '服务端异常。';
-    else
-        msg = `未知异常，HTTP code:${xhr.status}。`;
-
-    if (!xhr.responseText)
-        msg += " 服务端返回空的字符串！";
-
-    console.error(msg, xhr.responseText);
-}
-
-/**
- * 响应处理
- * 
- * @param xhr 
- * @param cb 
- * @param cfg 
- */
-function responseHandle(xhr: XMLHttpRequest, cb: XhrCallback, cfg: XhrConfig): void {
-    if (xhr.readyState == 4) {
-        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
-            let text: string = xhr.responseText;
-            let json: any;
-
-            if (!text)
-                console.warn('服务端没有返回任何字符串');
-
-            switch (cfg.parseContentType) {
-                case 'text':
-                    break;
-                case 'xml':
-                    json = xhr.responseXML;
-                    break;
-                case 'json':
-                default:
-                    try {
-                        json = JSON.parse(text);
-                    } catch (e) {
-                        console.error('解析 JSON 时候发生错误，非法 JSON');
-                        console.warn(e);
-                    }
-            }
-
-            cb && cb(json, text);
-        } else errHandle(xhr);
-    }
-}
-
-/**
- * 对象转换为 URL 参数列表，用 & 分隔
- * 
- * @param {Object} param JSON 对象 
- * @returns URL 参数列表
- */
-export function toParams(param: any): string {
-    let result: string = "";
-
-    for (let name in param) {
-        if (typeof param[name] != "function")
-            result += "&" + name + "=" + encodeURIComponent(param[name]);
-    }
-
-    return result.substring(1);
-}
-
-/**
- * 获取 QueryString 的某个参数
- * 
- * @param val 
- * @returns 
-*/
-export function getQuery(val: string): string {
-    const w: number = location.hash.indexOf('?');
-    const query: string = location.hash.substring(w + 1);
-    let vars: string[] = query.split('&');
-
-    for (let i = 0; i < vars.length; i++) {
-        const pair = vars[i].split('=');
-
-        if (pair[0] == val)
-            return pair[1];
-    }
-
-    return '';
-}
-
-export function getPageList(self: any, listArray: any, callback?: Function): XhrCallback {
-    return (j: any) => {
-        if (j.status) {
-            listArray.total = j.total;
-            listArray.data = j.data;
-
-            callback && callback();
-        } else
-            self.$Message.warning(j.message || '获取数据失败');
-    }
-}

package/src/widget/AccordionMenu.vue

@@ -1,140 +0,0 @@
-<template>
-  <ul class="aj-accordion-menu" @click="onClk">
-    <slot></slot>
-  </ul>
-</template>
-
-<script lang="ts">
-/**
- * 内部子菜单的高亮
- *
- * @param ev
- */
-function highlightSubItem(ev: Event) {
-  let li: Element,
-    el: Element = ev.target as Element;
-
-  if (el.tagName == "A" && el.getAttribute("target")) {
-    li = el.parentNode as Element;
-    li.querySelectorAll("li").forEach((_el: Element) => {
-      if (_el == li) _el.classList.add("selected");
-      else _el.classList.remove("selected");
-    });
-  }
-}
-
-export default {
-  methods: {
-    onClk(ev: Event): void {
-      let children: HTMLCollection = this.$el.children;
-      highlightSubItem(ev);
-      let _btn: Element = ev.target as Element;
-
-      if (
-        _btn &&
-        _btn.tagName == "H3" &&
-        (_btn.parentNode as Element).tagName == "LI"
-      ) {
-        _btn = _btn.parentNode as Element;
-
-        for (let btn: Element, i: number = 0, j = children.length; i < j; i++) {
-          btn = children[i];
-          let ul = btn.querySelector("ul");
-
-          if (btn == _btn) {
-            if (btn.className.indexOf("pressed") != -1) {
-              btn.classList.remove("pressed"); // 再次点击，隐藏！
-              if (ul) ul.style.height = "0px";
-            } else {
-              if (ul) ul.style.height = ul.scrollHeight + "px";
-              btn.classList.add("pressed");
-            }
-          } else {
-            btn.classList.remove("pressed");
-            if (ul) ul.style.height = "0px";
-          }
-        }
-      } else return;
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-@import "../style/common-functions.less";
-
-// 折叠菜单 Accordion Menu
-.aj-accordion {
-  & > li h3 {
-    cursor: pointer;
-  }
-
-  .pressed {
-    & h3 {
-      color: black;
-    }
-  }
-
-  & > li > ul {
-    .transition (height .5s cubic-bezier(0, 1, 0.5, 1));;
-    overflow: hidden;
-  }
-
-  ul {
-    height: 0;
-  }
-}
-
-.aj-accordion-menu {
-  .aj-accordion ();
-  overflow: hidden;
-
-  & > li {
-    border-top: 1px solid white;
-    border-bottom: 1px solid lightgray;
-
-    &.pressed {
-      border-top: 0;
-      border-bottom: 1px solid lightgray;
-      box-shadow: inset 0px 10px 15px -15px gray;
-
-      h3 {
-        font-weight: bold;
-      }
-    }
-
-    ul {
-      li {
-        // list-style-type: disc;
-        padding-left: 15%;
-
-        a {
-          width: 100%;
-          display: block;
-        }
-
-        &.selected {
-          a {
-            color: black;
-            font-weight: bold;
-          }
-        }
-      }
-    }
-
-    h3,
-    li {
-      padding: 5px 0 5px 15px;
-      letter-spacing: 2px;
-      line-height: 20px;
-      color: #939da8;
-      font-size: 12px;
-
-      &:hover,
-      a:hover {
-        color: black;
-      }
-    }
-  }
-}
-</style>

package/src/widget/AdjustFontSize.vue

@@ -1,65 +0,0 @@
-<template>
-  <div class="aj-adjust-font-size">
-    <span>字体大小</span>
-    <ul @click="onClk">
-      <li><label><input type="radio" name="fontSize" /> 小</label></li>
-      <li><label><input type="radio" name="fontSize" /> 中</label></li>
-      <li><label><input type="radio" name="fontSize" /> 大</label></li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-/**
- * 调整正文字体大小
- */
-export default {
-  props: {
-    articleTarget: { type: String, default: "article p" }, // 正文所在的位置，通过 CSS Selector 定位
-  },
-  methods: {
-    onClk(ev: Event): void {
-      let el: Element = ev.target as Element;
-      let setFontSize = (fontSize: string): void => {
-        document.body
-          .querySelectorAll(this.$props.articleTarget)
-          .forEach((p: HTMLParagraphElement) => (p.style.fontSize = fontSize));
-      };
-
-      if (el.tagName == "LABEL" || el.tagName == "INPUT") {
-        if (el.tagName != "LABEL") el = el.parentNode as Element;
-
-        if (el.innerHTML.indexOf("大") != -1) setFontSize("12pt");
-        else if (el.innerHTML.indexOf("中") != -1) setFontSize("10.5pt");
-        else if (el.innerHTML.indexOf("小") != -1) setFontSize("9pt");
-      }
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.aj-adjust-font-size {
-  width: 210px;
-  font-size: 0.8rem;
-  padding: 2px 0;
-
-  span {
-    float: left;
-    width: 35%;
-    display: block;
-  }
-
-  ul {
-    width: 65%;
-    float: right;
-    cursor: pointer;
-
-    li {
-      display: block;
-      float: right;
-      width: 33%;
-    }
-  }
-}
-</style>

package/src/widget/Article.vue

@@ -1,59 +0,0 @@
-<template>
-  <article>
-    <h2>{{title}}</h2>
-
-    <div class="toolbar">
-      <span v-if="author">作者: {{author}}</span> &nbsp;
-      <a :href="source" v-if="source" target="_blank">
-
-        <svg width="16px" height="16px" viewBox="0 0 24 24" style="cursor:pointer;vertical-align: middle;">
-          <g stroke-width="2.1" stroke="#666" fill="none" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="17 13.5 17 19.5 5 19.5 5 7.5 11 7.5"></polyline>
-            <path d="M14,4.5 L20,4.5 L20,10.5 M20,4.5 L11,13.5"></path>
-          </g>
-        </svg>
-        来源</a>
-      <FontSize style="float:right;clear:both"></FontSize>
-    </div>
-    <slot></slot>
-  </article>
-</template>
-
-<script>
-import FontSize from './AdjustFontSize.vue';
-
-export default { 
-  props: {
-    title: String, author: String, source: String
-  },
-  components: { FontSize }
-}
-</script>
-
-<style lang="less" scoped>
-@import "../style/common-functions.less";
-
-article {
-  & > p {
-    .aj-text-function();
-    text-indent: 2em;
-  }
-  & > img,
-  & > p > img {
-    max-width: 80%;
-    margin: 0 auto;
-    display: block;
-  }
-
-  h2 {
-    .aj-text-title();
-  }
-
-  .toolbar {
-    height: 15px;
-    margin: 30px 0;
-    font-size: 0.8rem;
-    text-align: right;
-  }
-}
-</style>

package/src/widget/EmptyContent.js

@@ -1,4 +0,0 @@
-export default {
-    empty: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiNEQURFRTMiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTUwLjU5OCAxMS4wOTNDMjUuNTU0IDE1Ljc2IDExLjcyOCAyNC41NzMgOS4xMiAzNy41MzUgNS45OSA2OC42NDQgMTI4LjA4IDcwLjIgMTEzLjIxIDEwMi44NjNjLTcuODI2IDEwLjg4Ny0yNS41NjYgMTMuMjItNTMuMjE5IDYuOTk5IiBzdHJva2UtZGFzaGFycmF5PSIzIi8+PGcgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZmlsbD0iI0ZGRiIgZD0ibTU1IDY4LjI3IDQyLjE2Mi0xMi4zMjR2NDkuNTc3TDU1IDExNy41Njh6TTU1IDY4LjEwOCAxNi4wODEgNTUuOTQ2djQ5LjU3N0w1NSAxMTcuNTY4eiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNi4wMTIgNTYuMDQgNTUgNjguMTA4IDQyLjUgODYuNzU3IDQuNzMgNzMuMDYzek05Ny4xNjIgNTUuOTQ2IDU1IDY4LjEwOGwxMi44MSAxOC42NDkgNDIuMzI1LTE0LjE2NnoiLz48cGF0aCBmaWxsPSIjRjZGN0Y4IiBkPSJtMTYuMDgxIDU1Ljk0NiA0My4zNDctMTIuMTYyIDM3LjczNCAxMi4xNjJMNTUgNjguMTA4eiIvPjwvZz48ZyBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNNzguMDY4IDEwLjMxIDYwLjA0IDguOGwyLjc5LTUuMzF6Ii8+PHBhdGggZmlsbD0iI0Y2RjdGOCIgZD0iTTc4LjA2OCAxMC4zMSA1Ni40NSAxMy44OGwtMy44MzQtNS45MzR6Ii8+PC9nPjwvZz48L3N2Zz4=',
-    emptyDrak: 'data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyMCIgd2lkdGg9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiMzYTNjNDYiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTUwLjU5OCAxMS4wOTNDMjUuNTU0IDE1Ljc2IDExLjcyOCAyNC41NzMgOS4xMiAzNy41MzUgNS45OSA2OC42NDQgMTI4LjA4IDcwLjIgMTEzLjIxIDEwMi44NjNjLTcuODI2IDEwLjg4Ny0yNS41NjYgMTMuMjItNTMuMjE5IDYuOTk5IiBzdHJva2UtZGFzaGFycmF5PSIzIi8+PGcgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGcgZmlsbD0iIzFhMWIxZSI+PHBhdGggZD0ibTU1IDY4LjI3IDQyLjE2Mi0xMi4zMjR2NDkuNTc3TDU1IDExNy41Njh6TTU1IDY4LjEwOCAxNi4wODEgNTUuOTQ2djQ5LjU3N0w1NSAxMTcuNTY4eiIvPjxwYXRoIGQ9Ik0xNi4wMTIgNTYuMDQgNTUgNjguMTA4IDQyLjUgODYuNzU3IDQuNzMgNzMuMDYzek05Ny4xNjIgNTUuOTQ2IDU1IDY4LjEwOGwxMi44MSAxOC42NDkgNDIuMzI1LTE0LjE2NnoiLz48L2c+PHBhdGggZD0ibTE2LjA4MSA1NS45NDYgNDMuMzQ3LTEyLjE2MiAzNy43MzQgMTIuMTYyTDU1IDY4LjEwOHoiIGZpbGw9IiMxNDE1MTgiLz48L2c+PGcgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTc4LjA2OCAxMC4zMSA2MC4wNCA4LjhsMi43OS01LjMxeiIgZmlsbD0iIzFhMWIxZSIvPjxwYXRoIGQ9Ik03OC4wNjggMTAuMzEgNTYuNDUgMTMuODhsLTMuODM0LTUuOTM0eiIgZmlsbD0iIzE0MTUxOCIvPjwvZz48L2c+PC9zdmc+'
-};

package/src/widget/Expander.vue

@@ -1,65 +0,0 @@
-<template>
-  <div class="aj-expander" :style="'height:' + (expended ? openHeight : closeHeight) + 'px;'">
-    <div :class="expended ? 'closeBtn' : 'openBtn'" @click="expended = !expended;"></div>
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts">
-/**
- * 展开闭合器
- */
-export default {
-  props: {
-    openHeight: { type: Number, default: 200 },
-    closeHeight: { type: Number, default: 50 },
-  },
-  data(): any {
-    return {
-      expended: false,
-    };
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.aj-expander {
-  overflow: hidden;
-  position: relative;
-  clear: both;
-  transition: height 200ms ease 0s;
-
-  .mask-layer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 23px;
-    width: 100%;
-    background: -webkit-gradient(
-      linear,
-      center top,
-      center bottom,
-      from(transparent),
-      to(white)
-    );
-  }
-
-  .openBtn {
-    background: url("https://ajaxjs.nos-eastchina1.126.net/images/openBtn.png");
-  }
-
-  .closeBtn {
-    background: url("https://ajaxjs.nos-eastchina1.126.net/images/closeBtn.png");
-  }
-
-  .closeBtn,
-  .openBtn {
-    width: 45px;
-    height: 32px;
-    position: absolute;
-    cursor: pointer;
-    top: 0px;
-    right: 0px;
-  }
-}
-</style>

package/src/widget/FileUploader/FileUploader.less

@@ -1,68 +0,0 @@
-.aj-file-uploader {
-    width: 360px;
-
-    &>* {
-        display: inline-block;
-        vertical-align: middle;
-    }
-
-    label {
-        margin-right: 2%;
-
-        &>div {
-            border: 1px solid lightgray;
-            border-radius: 5px;
-            text-align: center;
-            color: gray;
-            cursor: pointer;
-            font-size: 0.8rem;
-            padding: 10px;
-            padding-bottom: 25px;
-            width: 100px;
-            height: 70px;
-            transition: border-color linear 300ms, color linear 300ms;
-
-            &:hover {
-                border-color: gray;
-                color: black;
-            }
-
-            &>div {
-                font-size: 2rem;
-            }
-        }
-    }
-
-    button {
-        min-width: 110px;
-    }
-
-    input[type="file"] {
-        display: none;
-    }
-
-    .msg {
-        font-size: 0.8rem;
-        color: gray;
-        max-width: 50%;
-        word-break: break-word;
-        text-overflow: ellipsis;
-
-        &>div {
-            font-size: 0.75rem;
-        }
-    }
-
-    .perviewImg {
-        max-width: 260px;
-    }
-
-    .fileName {
-        // display: inline-block;
-        text-overflow: ellipsis; //溢出用省略号显示
-        white-space: nowrap; //溢出不换行
-        max-width: 120px;
-        max-height: 20px;
-        overflow: hidden;
-    }
-}