@ajaxjs/ui 1.2.0 → 1.2.2

package/src/widget/calendar/Calendar.less

@@ -1,210 +0,0 @@
-// 日历选择器
-.aj-form-calendar {
-	font-family        : Verdana;
-	font-size          : .8rem;
-	background-color   : white;
-	border             : 1px solid lightgray;
-	border-radius      : 5px;
-	box-shadow         : 0 5px 10px rgba(0, 0, 0, 0.2);
-	text-align         : center;
-	width              : 320px;
-	-webkit-user-select: none;
-	-moz-user-select   : none;
-	user-select        : none;
-	padding            : 10px;
-	line-height        : 1.5em;
-
-	a {
-		color: #1e5494;
-		text-decoration: none;
-	}
-
-	.selectYearMonth {
-		float: right;
-		width: 100px;
-
-		div {
-			display: inline-block;
-		}
-	}
-
-	.showCurrentYearMonth {
-		text-align: left;
-		color     : lightgray;
-		font-size : 1.6rem;
-		padding   : 5% 0;
-	}
-
-	table {
-		width          : 100%;
-		border         : 0;
-		border-spacing : 0;
-		border-collapse: collapse;
-
-		thead {
-			tr {
-				color        : #acacac;
-				border-bottom: 1px solid lightgray;
-				margin-bottom: 15px;
-			}
-		}
-
-		td {
-			font-size       : .8rem;
-			padding         : .4rem;
-			letter-spacing  : 1px;
-			border          : 0;
-			background-color: white;
-			text-align      : center;
-
-			&.day {
-				cursor    : pointer;
-				transition: background-color 190ms ease-in-out;
-			}
-
-			&.onToday {
-				font-weight: bold;
-				color      : #C60;
-			}
-
-			&.onSelect {
-				font-weight: bold;
-			}
-
-			&.day:hover {
-				color           : darken(#e0ecf9, 50%);
-				background-color: #e9e9e9;
-			}
-		}
-	}
-
-	.idCalendarPre,
-	.idCalendarNext {
-		cursor       : pointer;
-		font-size    : 1.2rem;
-		text-align   : center;
-		border-radius: 3px;
-		padding      : 2px 5px;
-
-		&:hover {
-			background-color: #e9e9e9;
-		}
-	}
-
-	.idCalendarPre {
-		float: left;
-	}
-
-	.idCalendarNext {
-		float: right;
-	}
-
-	.btns {
-		position: absolute;
-		left    : 15px;
-		bottom  : 5px;
-
-		input[type=button] {
-			font-size: .8rem;
-			padding  : 2px 4px;
-			margin   : 1px;
-		}
-	}
-	.showTime{
-		margin-top: 5%;
-		select {
-			min-width:50px;
-			text-align: center;
-		}
-	}
-}
-
-// 日历 悬浮出现
-.aj-form-calendar-input {
-	position: relative;
-	width   : 125px;
-	line-height: 19px;
-
-	&.show-time {
-		width: 170px;
-	}
-
-	display: inline-block;
-
-	input[type=text] {
-		// .aj-input-base();
-		max-width: 100% ! important;
-		width    : 100% ! important;
-
-	}
-
-	.icon {
-		position              : absolute;
-		width                 : 17px;
-		height                : 16px;
-		right                 : 5px;
-		top                   : 6px;
-		opacity               : .6;
-		cursor                : pointer;
-		//		.menu {
-		//			color: #000;
-		//			position: absolute;
-		//			margin-left: 2px;
-		//			margin-top: 8px;
-		//			width: 17px;
-		//			height: 1px;
-		//			background-color: currentColor;
-		//			&:before {
-		//				content: '';
-		//				position: absolute;
-		//				top: -5px;
-		//				left: 0;
-		//				width: 17px;
-		//				height: 1px;
-		//				background-color: currentColor;
-		//			}
-		//
-		//			&:after {
-		//				content: '';
-		//				position: absolute;
-		//				top: 5px;
-		//				left: 0;
-		//				width: 17px;
-		//				height: 1px;
-		//				background-color: currentColor;
-		//			}
-		//		}
-	}
-
-	.aj-form-calendar {
-		z-index : 999999999;
-		display : none;
-		position: absolute;
-
-		&.positionFixed {
-			// 若父元素 overflow:hidden，则 position: absolute 不能完整显示，故 fixed
-			position: fixed;
-		}
-
-		right: -3px;
-		top  : 25px;
-	}
-
-	&:hover .aj-form-calendar,
-	.aj-form-calendar:hover {
-		display: block;
-
-		.icon {
-			opacity: .5;
-		}
-	}
-
-	&:hover .icon {
-		opacity: 1;
-	}
-
-	.selectYearMonth select {
-		min-width: 65px;
-		outline: none;
-	}
-}

package/src/widget/calendar/Calendar.ts

@@ -1,167 +0,0 @@
-/**
- * 日期选择器
- */
-export default {
-    props: {
-        showTime: Boolean // 是否显示时间，即“时分秒”
-    },
-    data() {
-        let date: Date = new Date;
-        return {
-            date: date,
-            year: date.getFullYear(),
-            month: date.getMonth() + 1,
-            day: 1
-        };
-    },
-    mounted(): void {
-        this.$options.watch.date.call(this);
-    },
-    watch: {
-        date(): void {
-            this.year = this.date.getFullYear();
-            this.month = this.date.getMonth() + 1;
-            this.render();
-        }
-    },
-    methods: {
-        /**
-         * 画日历
-         */
-        render(): void {
-            let arr: number[] = this.getDateArr(),// 用来保存日期列表
-                frag: DocumentFragment = document.createDocumentFragment();// 插入日期
-
-            while (arr.length) {
-                let row: HTMLTableRowElement = document.createElement("tr"); // 每个星期插入一个 tr
-
-                for (let i = 1; i <= 7; i++) { // 每个星期有7天
-                    let cell: HTMLTableCellElement = document.createElement("td");
-
-                    if (arr.length) {
-                        let d: number = arr.shift();
-
-                        if (d) {
-                            let text: string = this.year + '-' + this.month + '-' + d;
-                            cell.title = text;  // 保存日期在 title 属性
-                            cell.className = 'day day_' + text;
-                            cell.innerHTML = d + "";
-
-                            let on: Date = new Date(this.year, this.month - 1, d);
-
-                            // 判断是否今日
-                            if (isSameDay(on, this.date)) {
-                                cell.classList.add('onToday');
-                                // this.onToday && this.onToday(cell);// 点击 今天 时候触发的事件
-                            }
-                            // 判断是否选择日期
-                            // this.selectDay && this.onSelectDay && this.isSameDay(on, this.selectDay) && this.onSelectDay(cell);
-                        }
-                    }
-
-                    row.appendChild(cell);
-                }
-
-                frag.appendChild(row);
-            }
-
-            // 先清空内容再插入
-            let tbody = <HTMLElement>this.$el.querySelector("table tbody");
-            tbody.innerHTML = '';
-            tbody.appendChild(frag);
-        },
-
-        /**
-         * 获取指定的日期
-         * 
-         * @param dateType 
-         * @param month 
-         */
-        getDate(dateType: 'preMonth' | 'nextMonth' | 'setMonth' | 'preYear' | 'nextYear', month: number): void {
-            let nowYear: number = this.date.getFullYear(),
-                nowMonth: number = this.date.getMonth() + 1; // 当前日期
-
-            switch (dateType) {
-                case 'preMonth':// 上一月
-                    this.date = new Date(nowYear, nowMonth - 2, 1);
-                    break;
-                case 'nextMonth':// 下一月
-                    this.date = new Date(nowYear, nowMonth, 1);
-                    break;
-                case 'setMonth':// 指定月份
-                    this.date = new Date(nowYear, month - 1, 1);
-                    break;
-                case 'preYear':// 上一年
-                    this.date = new Date(nowYear - 1, nowMonth - 1, 1);
-                    break;
-                case 'nextYear':// 下一年
-                    this.date = new Date(nowYear + 1, nowMonth - 1, 1);
-                    break;
-            }
-        },
-
-        /**
-         * 
-         * 
-         * @param querySelectoreven
-         */
-        setMonth(ev: Event): void {
-            let el: HTMLSelectElement = <HTMLSelectElement>ev.target;
-            this.getDate('setMonth', Number(el.selectedOptions[0].value));
-        },
-
-        /**
-         * 获取空白的非上月天数 + 当月天数
-         * 
-         * @param this 
-         */
-        getDateArr(): number[] {
-            let arr: number[] = [];
-
-            // 算出这个月1号距离前面的星期天有多少天
-            for (let i = 1, firstDay: number = new Date(this.year, this.month - 1, 1).getDay(); i <= firstDay; i++)
-                arr.push(0);
-
-            // 这个月有多少天。用上个月然后设置日子参数为 0，就可以得到本月有多天
-            for (let i = 1, monthDay: number = new Date(this.year, this.month, 0).getDate(); i <= monthDay; i++)
-                arr.push(i);
-
-            return arr;
-        },
-
-        /**
-         * 获取日期
-         * 
-         * @param event 
-         */
-        pickDay(ev: Event): string {
-            let el: HTMLElement = <HTMLElement>ev.target,
-                date: string = el.title;
-            this.$emit('pickdate', date);
-
-            return date;
-        },
-
-        /**
-         * 
-         * @param event 
-         */
-        pickupTime(event: Event): void {
-            let hour: HTMLSelectElement = <HTMLSelectElement>this.$el.querySelector('.hour'),
-                minute: HTMLSelectElement = <HTMLSelectElement>this.$el.querySelector('.minute'),
-                time = hour.selectedOptions[0].value + ':' + minute.selectedOptions[0].value;
-
-            this.$emit('pick-time', time);
-        }
-    }
-};
-
-/**
-  * 判断两个日期是否同一日
-  * 
-  * @param d1 
-  * @param d2 
-  */
-function isSameDay(d1: Date, d2: Date): boolean {
-    return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
-}

package/src/widget/calendar/Calendar.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="aj-form-calendar">
-    <div class="selectYearMonth">
-      <a href="###" @click="getDate('preYear')" class="preYear" title="上一年">	&#171; <!-- &lt; --></a>
-      <select @change="setMonth" v-model="month">
-        <option value="1">一月</option>
-        <option value="2">二月</option>
-        <option value="3">三月</option>
-        <option value="4">四月</option>
-        <option value="5">五月</option>
-        <option value="6">六月</option>
-        <option value="7">七月</option>
-        <option value="8">八月</option>
-        <option value="9">九月</option>
-        <option value="10">十月</option>
-        <option value="11">十一月</option>
-        <option value="12">十二月</option>
-      </select>
-      <a href="###" @click="getDate('nextYear')" class="nextYear" title="下一年"> &#187;<!-- &gt; --> </a>
-    </div>
-    <div class="showCurrentYearMonth">
-      <span class="showYear">{{year}}</span>/<span class="showMonth">{{month}}</span>
-    </div>
-    <table>
-      <thead>
-        <tr>
-          <td>日</td>
-          <td>一</td>
-          <td>二</td>
-          <td>三</td>
-          <td>四</td>
-          <td>五</td>
-          <td>六</td>
-        </tr>
-      </thead>
-      <tbody @click="pickDay"></tbody>
-    </table>
-    <div v-if="showTime" class="showTime">
-      时 <select class="hour aj-select">
-        <option v-for="n in 24" :key="n">{{n}}</option>
-      </select>
-      分 <select class="minute aj-select">
-        <option v-for="n in 61" :key="n">{{n - 1}}</option>
-      </select>
-      <a href="#" @click="pickupTime">选择时间</a>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" src="./Calendar.ts"></script>
-
-<style lang="less" scoped  src="./Calendar.less"></style>

package/src/widget/calendar/CalendarInput.vue

@@ -1,71 +0,0 @@
-<template>
-  <div class="aj-form-calendar-input" :class="{'show-time': showTime}" @mouseover="onMouseOver">
-    <div class="icon fa fa-calendar"></div>
-    <input :placeholder="placeholder" size="12" :name="fieldName" :value="date + (dateOnly ? '' : ' ' + time)" type="text" autocomplete="off" />
-    <aj-form-calendar ref="calendar" :show-time="showTime" @pick-date="recEvent" @pick-time="recTimeEvent">
-    </aj-form-calendar>
-  </div>
-</template>
-
-<script lang="ts">
-/**
- * 帶有 input 輸入框的
- */
-export default {
-  data() {
-    return {
-      date: this.fieldValue,
-      time: "",
-    };
-  },
-  props: {
-    fieldName: { type: String, required: true }, // 表单 name，字段名
-    fieldValue: { type: String, required: false, default: "" },
-    dateOnly: { type: Boolean, required: false, default: true }, // 是否只处理日期，不考虑时间
-    showTime: { type: Boolean, required: false, default: false },
-    positionFixed: Boolean, // 是否采用固定定位
-    placeholder: { type: String, default: "请输入日期" }, // 提示文字
-  },
-  watch: {
-    fieldValue( n: string): void {
-      this.date = n;
-    },
-  },
-  mounted(): void {
-    if (this.positionFixed) {
-      let el: HTMLElement = <HTMLElement>this.$el.$(".aj-form-calendar");
-      el.classList.add("positionFixed");
-    }
-
-    // 2012-07-08
-    // firefox中解析 new Date('2012/12-23') 不兼容，提示invalid date 无效的日期
-    // Chrome下可以直接将其格式化成日期格式，且时分秒默认为零
-    // var arr = date.split('-'), now = new Date(arr[0], arr[1] - 1, arr[2],
-    // " ", "", " ");
-    if (this.fieldValue) {
-      let arr: string = this.fieldValue.split(" ")[0],
-        _arr = arr.split("-");
-      // @ts-ignore
-      this.$refs.calendar.date = new Date(arr[0],arr[1] - 1, arr[2]," ", "", " ");
-    }
-  },
-  methods: {
-    recTimeEvent(time: string): void {
-      this.time = time;
-    },
-    recEvent(date: string): void {
-      this.date = date.trim();
-    },
-    onMouseOver(ev: Event): void {
-      if (this.positionFixed) {
-        let el: HTMLElement = <HTMLElement>ev.currentTarget,
-          b: DOMRect = el.getBoundingClientRect(),
-          c: HTMLElement = <HTMLElement>this.$el.$(".aj-form-calendar");
-
-        c.style.top = b.top + el.clientHeight - 0 + "px";
-        c.style.left = b.left - 0 + 0 + "px";
-      }
-    },
-  },
-};
-</script>