@ajaxjs/ui 1.0.5 → 1.1.0

package/src/components/list/list.ts

@@ -1,261 +0,0 @@
-
-
-// namespace aj.list {
-// 	/**
-// 	 * 分页列表专用的结果数据
-// 	 */
-// 	interface PageListRepsonseResult extends RepsonseResult {
-// 		/**
-// 		 * 结果总数
-// 		 */
-// 		total: number;
-// 	}
-
-// 	/**
-// 	 * 列表数据
-// 	 */
-// 	interface DataStore extends Ajax {
-// 		/**
-// 		 * 是否分页，false=读取所有数据
-// 		 */
-// 		isPage: boolean;
-
-// 		pageStart: number;
-
-// 		pageSize: number;
-
-// 		initPageSize: number;
-
-// 		total: number;
-
-// 		/**
-// 		 * 请求结果
-// 		 */
-// 		result: BaseObject[];
-
-// 		totalPage: number;
-
-// 		currentPage: number;
-
-// 		/**
-// 		 * 默认的分页参数其名字
-// 		 */
-// 		pageParamNames: string[];
-
-// 		/**
-// 		 * 计算分页
-// 		 */
-// 		count(): void;
-// 	}
-
-// 	/**
-// 	 * 本地数据仓库
-// 	 * 一般情况下不会单独使用这个组件
-// 	 */
-// 	export var datastore = {
-// 		props: {
-// 			apiUrl: { type: String, required: true },                       // JSON 接口地址
-// 			isPage: { type: Boolean, default: true },
-// 			initPageSize: { type: Number, required: false, default: 9 },
-// 			isAutoLoad: { type: Boolean, default: true },
-// 			baseParam: { type: Object, default() { return {}; } },
-// 			pageParamNames: { type: Array, default() { return ['start', 'limit']; } }, 	// 默认的分页参数其名字
-// 			onLoad: Function
-// 		},
-// 		data(this: DataStore) {
-// 			return {
-// 				result: [],
-// 				extraParam: {},	                // 与 baseParam 合并后每次请求可发送的，可以修改的
-// 				pageSize: this.initPageSize,
-// 				total: 0,
-// 				totalPage: 0,
-// 				pageStart: 0,
-// 				currentPage: 0
-// 			};
-// 		},
-
-// 		methods: {
-// 			/**
-// 			 * 分页，跳到第几页，下拉控件传入指定的页码
-// 			 * 
-// 			 * @param this 
-// 			 * @param ev 
-// 			 */
-// 			jumpPageBySelect(this: DataStore, ev: Event): void {
-// 				let selectEl: HTMLSelectElement = <HTMLSelectElement>ev.target;
-// 				let currentPage: string = selectEl.options[selectEl.selectedIndex].value;
-
-// 				this.pageStart = (Number(currentPage) - 1) * this.pageSize;
-// 				this.getData();
-// 			},
-
-// 			/**
-// 			 * PageSize 改变时候重新分页
-// 			 * 
-// 			 * @param this 
-// 			 * @param ev 
-// 			 */
-// 			onPageSizeChange(this: DataStore, ev: Event): void {
-// 				this.pageSize = Number((<HTMLInputElement>ev.target).value);
-// 				this.count();
-// 				this.getData();
-// 			},
-
-// 			count(this: DataStore): void {
-// 				let totalPage: number = this.total / this.pageSize, yushu: number = this.total % this.pageSize;
-// 				this.totalPage = parseInt(String(yushu == 0 ? totalPage : totalPage + 1));
-// 				//@ts-ignore
-// 				this.currentPage = parseInt((this.pageStart / this.pageSize) + 1);
-// 			},
-
-// 			/**
-// 			 * 前一页
-// 			 * 
-// 			 * @param this 
-// 			 */
-// 			previousPage(this: DataStore): void {
-// 				this.pageStart -= this.pageSize;
-// 				//@ts-ignore
-// 				this.currentPage = parseInt((this.pageStart / this.pageSize) + 1);
-
-// 				this.getData();
-// 			},
-
-// 			/**
-// 			 * 下一页
-// 			 * 
-// 			 * @param this
-// 			 */
-// 			nextPage(this: DataStore): void {
-// 				this.pageStart += this.pageSize;
-// 				this.currentPage = (this.pageStart / this.pageSize) + 1;
-
-// 				this.getData();
-// 			}
-// 		}
-// 	};
-
-// 	/**
-// 	 * 列表控件
-// 	 */
-// 	interface List extends DataStore, Vue {
-// 		/**
-// 		 * 数据分页是否追加模式，默认不追加 = false。 App 一般采用追加模式
-// 		 */
-// 		isDataAppend: boolean;
-
-// 		/**
-// 		 * 到达底部是否自动加载下一页，通常在 移动端使用，这个应该是元素的 CSS Selector
-// 		 */
-// 		autoLoadWhenReachedBottom: boolean;
-// 	}
-
-// 	Vue.component('aj-list', {
-// 		mixins: [datastore],
-// 		template: html`
-// 			<div class="aj-list">
-// 				<slot name="header" v-if="total != 0"></slot>
-// 				<ul v-if="showDefaultUi && (total != 0)">
-// 					<li v-for="(item, index) in result">
-// 						<slot v-bind="item">
-// 							<a href="#" @click="show(item.id, index, $event)" :id="item.id">{{item.name}}</a>
-// 						</slot>
-// 					</li>
-// 				</ul>
-// 				<div class="no-data" v-show="isPage && total == 0">未有任何数据</div>
-// 				<footer v-if="isPage" class="pager">
-// 					<a v-if="pageStart > 0" href="#" @click="previousPage">上一页</a>
-// 					<a v-if="(pageStart > 0 ) && (pageStart + pageSize < total)" style="text-decoration: none;">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</a>
-// 					<a v-if="pageStart + pageSize < total" href="#" @click="nextPage">下一页</a>
-// 					<a href="javascript:;" @click="getData"><i class="fa fa-refresh" aria-hidden="true"></i> 刷新</a>
-// 					<input type="hidden" name="start" :value="pageStart" />
-// 					页数：{{currentPage}}/{{totalPage}} 记录数：{{pageStart}}/{{total}}
-// 					每页记录数： <input size="2" title="输入一个数字确定每页记录数" type="text" :value="pageSize" @change="onPageSizeChange" />
-// 					跳转：
-// 					<select @change="jumpPageBySelect">
-// 						<option :value="n" v-for="n in totalPage">{{n}}</option>
-// 					</select>
-// 				</footer>
-// 				<div v-show="!!autoLoadWhenReachedBottom" class="buttom"></div>
-// 			</div>
-// 		`,
-// 		props: {
-// 			showDefaultUi: { type: Boolean, default: true },		 // 如果只是单纯作为分页组件，那么则不需要 UI
-// 			isShowFooter: { type: Boolean, default: true },			 // 是否显示分页 UI
-// 			hrefStr: { type: String, required: false },
-// 			autoLoadWhenReachedBottom: { type: String, default: '' },
-// 			isDataAppend: { type: Boolean, default: false }
-// 		},
-// 		mounted(this: List): void {
-// 			this.isAutoLoad && this.getData();
-
-// 			// this.BUS.$on('base-param-change', this.onExtraParamChange.bind(this));
-// 			if (!!this.autoLoadWhenReachedBottom) {
-// 				// var scrollSpy = new aj.scrollSpy({ scrollInElement: aj(this.autoLoadWhenReachedBottom), spyOn: thish.$el.$('.buttom') });
-// 				// scrollSpy.onScrollSpyBackInSight = e => this.nextPage();
-// 			}
-// 		},
-// 		methods: {
-// 			getData(this: List): void {
-// 				this.lastRequestParam = {};
-// 				aj.apply(this.lastRequestParam, this.baseParam);
-// 				aj.apply(this.lastRequestParam, this.extraParam);
-// 				initPageParams.call(this);
-
-// 				xhr.get(this.apiUrl, this.onLoad || ((j: PageListRepsonseResult) => {
-// 					if (j.result) {
-// 						if (this.isPage && j.total === undefined)
-// 							aj.alert('JSON 缺少 total 字段');
-
-// 						if (j.total == 0 || j.result.length == 0)
-// 							aj.alert('没有找到任何记录');
-
-// 						this.result = j.result;
-
-// 						if (this.isPage) {
-// 							this.total = j.total;
-// 							this.count();
-// 						}
-// 					}
-
-// 					this.$emit('pager-result', this.result);
-// 				}), this.lastRequestParam);
-// 			},
-
-// 			/**
-// 			 * 复位
-// 			 * 
-// 			 * @param this 
-// 			 */
-// 			reset(this: List): void {
-// 				this.total = this.totalPage = this.pageStart = this.currentPage = 0;
-// 				this.pageSize = this.initPageSize;
-// 			},
-
-// 			onExtraParamChange(this: List, params: JsonParam): void {
-// 				aj.apply(this.extraParam, params);
-
-// 				this.pageStart = 0; // 每次 extraParam 被改变，都是从第一笔开始
-// 				this.getData();
-// 			}
-// 		},
-// 		watch: {
-// 			extraParam(this: List): void {
-// 				this.getData();
-// 			}
-// 		}
-// 	});
-
-// 	/**
-// 	 * 生成分页参数的名字
-// 	 * 
-// 	 * @param this 
-// 	 */
-// 	function initPageParams(this: List) {
-// 		let params: { [key: string]: number } = {};
-// 		params[this.pageParamNames[0]] = this.pageStart;
-// 		params[this.pageParamNames[1]] = this.pageSize;
-
-// 		this.isPage && aj.apply(this.lastRequestParam, params);
-// 	}
-// }

package/src/components/widgets/AccordionMenu.vue

@@ -1,138 +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, i = 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>
-// 折叠菜单 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/components/widgets/AdjustFontSize.vue

@@ -1,66 +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;
-
-        console.log(el);
-        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/components/widgets/AjAvatar.vue

@@ -1,42 +0,0 @@
-<template>
-  <a :href="avatar" target="_blank">
-    <img :src="avatar" style="max-width:50px;max-height:60px;vertical-align: middle;" @mouseenter="mouseEnter" @mouseleave="mouseLeave" />
-  </a>
-</template>
-
-<script lang="ts">
-/**
- * 显示头像
- */
-export default {
-  props: {
-    avatar: {
-      // 头像图片地址
-      type: String,
-      required: true,
-    },
-  },
-  methods: {
-    mouseEnter(): void {
-      // @ts-ignore
-      if (window.aj_avatar_imgUrl)
-        // @ts-ignore
-        window.aj_avatar_imgUrl = this.avatar;
-    },
-    mouseLeave(): void {
-      // @ts-ignore
-      if (window.aj_avatar_imgUrl)
-        // @ts-ignore
-        window.aj_avatar_imgUrl = null;
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.aj-img-thumb img {
-  max-width: 50px;
-  max-height: 60px;
-  vertical-align: middle;
-}
-</style>

package/src/components/widgets/Article.vue

@@ -1,49 +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">&#129109;来源</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>
-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/components/widgets/BaiduSearch.vue

@@ -1,50 +0,0 @@
-<template>
-  <form class="aj-widget-baidu-search" method="GET" action="http://www.baidu.com/baidu" onsubmit="//return g(this);">
-    <input type="text" name="word" placeholder="请输入搜索之关键字" />
-    <input name="tn" value="bds" type="hidden" />
-    <input name="cl" value="3" type="hidden" />
-    <input name="ct" value="2097152" type="hidden" />
-    <input name="si" :value="getSiteDomainName" type="hidden" />
-    <div class="searchBtn" onclick="this.parentNode.submit();"></div>
-  </form>
-</template>
-
-<script lang="ts">
-/**
- * Baidu 自定义搜索
- */
-export default {
-  props: {
-    siteDomainName: String,
-  },
-  computed: {
-    getSiteDomainName(): string {
-      return this.siteDomainName || location.host || document.domain;
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.aj-widget-baidu-search {
-  padding: 0;
-  margin: 0;
-
-  input[type="text"] {
-    border-radius: 5px;
-    border: 1px solid gray;
-    padding: 0 2px;
-    height: 22px;
-  }
-
-  .searchBtn {
-    background: url("data:image/gif;base64,R0lGODlhEAAQAGYAACH5BAEAAAAALAAAAAAQABAApgEAAOD3//n9/+3//936/xt7uX+x1KAQCyeHwsj1/6QcGZDd+fX+/+oOAFW05FCUxMXs+9P0/+T0+7fv/5rm/6fn/bHr/jCBugt0t0CKv47e+4fW9CaEv6fb8w9/weteSfkEAOsJC8xBKehVP+FZPxF1thZ4uMHx/1FBZQdssQ51uLrk9zlumyB3tDBRir3x/7nm+WK75DKb0z2k2XTG6mXD7Gq/6Euq20yk1EWp20ay5Umv4liw3dUcAKowMBqJycEzB8EqANoZACOa2KQNCp4NCgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeWgACCDwUIhgaCiYoFNBQWFQs4F4qJBQsRAZkBFTwZlBcbEQMCpAMDCwiUBRQEpCcTCQEwN4iJHBYSAgmwBAEQObWCBRoBAi8JvQMdMsEAGTEQAQTJAw4qlAAmNSsM3RIOPyzYACUzOjY7Qx4uIQfjDykYGC0oHyAN7uOKCiMNQvn6BCkg0SNIkYCJFIgAAhChDyII9QUCADs=")
-      no-repeat center;
-    width: 25px;
-    height: 25px;
-    cursor: pointer;
-    display: inline-block;
-    vertical-align: bottom;
-  }
-}
-</style>

package/src/components/widgets/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>