@ajaxjs/ui 1.2.0 → 1.2.2

package/src/widget/OpacityBanner.vue

@@ -1,125 +0,0 @@
-<template>
-  <ul class="aj-opacity-banner">
-    <slot></slot>
-  </ul>
-</template>
-
-<script lang="ts">
-/**
- * 渐显 banner
- * 注意：定时器保存在 DOM 元素的属性上，是否会内存泄漏呢？
- */
-export default {
-  props: {
-    delay: { default: 3000 }, // 延时
-    fps: { default: 25 }, // 帧速
-  },
-  data(): any {
-    return {
-      active: 0, // 当前索引
-    };
-  },
-  mounted(): void {
-    this.list = this.$el.querySelectorAll("li"); // 各帧
-    this.list[0].style.opacity = "1";
-    this.run();
-  },
-  methods: {
-    /**
-     * 播放动画
-     *
-     * @param this
-     */
-    run(): void {
-      this.timer = window.setInterval(() => {
-        let active: number = this.active;
-        this.clear();
-        active += 1;
-        this.active = active % this.list.length;
-        this.animate(100);
-      }, this.delay);
-    },
-
-    /**
-     * 下一帧
-     *
-     * @param this
-     */
-    per(): void {
-      let active: number = this.active;
-      this.clear();
-      active -= 1;
-      active = active % this.list.length;
-
-      if (active < 0) active = this.list.length - 1;
-
-      this.active = active;
-      this.animate(100);
-    },
-
-    /**
-     * 内容淡出
-     */
-    clear(): void {
-      this.animate(0);
-    },
-
-    /**
-     *
-     * @param params
-     */
-    animate(params: number): void {
-      var el: HTMLLIElement = this.list[this.active],
-        fps: number = 1000 / this.fps;
-      // @ts-ignore
-      window.clearTimeout(el.timer);
-
-      window.setTimeout(function loop() {
-        var i: number = getOpacity(el);
-        let speed: number = (params - i) / 8;
-        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
-        // console.log("i=" + i + "; speed="+ speed+"; s="+s+"; k="+k);
-        i += speed;
-        el.style.opacity = String(i / 100);
-        // @ts-ignore
-        window.clearTimeout(el.timer);
-        // params.complete && params.complete.call(elem);
-        // @ts-ignore
-        el.timer = window.setTimeout(loop, fps);
-      }, fps);
-    },
-  },
-};
-
-/**
- * 获取元素的透明度
- *
- * @param el
- */
-function getOpacity(el: Element): number {
-  let v = Number(getComputedStyle(el)["opacity"]);
-  v *= 100;
-
-  return parseFloat(v + "") || 0;
-}
-</script>
-
-<style lang="less" scoped>
-.aj-opacity-banner {
-  position: relative;
-  min-height: 90px;
-
-  li {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    width: 100%;
-  }
-
-  img {
-    // border-top:solid 20px #00416d;
-    width: 100%;
-  }
-}
-</style>

package/src/widget/ProcessLine.vue

@@ -1,133 +0,0 @@
-<template>
-  <div class="aj-process-line">
-    <div class="process-line">
-      <div v-for="(item, index) in items" :key="index" :class="{current: index == current, done: index < current}">
-        <span>{{index + 1}}</span>
-        <p>{{item}}</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-/**
- * 进度条
- */
-export default {
-  props: {
-    items: {
-      type: Array,
-      default(): string[] {
-        return ["Step 1", "Step 2", "Step 3"];
-      },
-    },
-  },
-  data():any {
-    return {
-      current: 0,
-    };
-  },
-  methods: {
-    /**
-     *
-     * @param i
-     */
-    go(i: number): void {
-      this.current = i;
-    },
-
-    /**
-     *
-     */
-    perv(): void {
-      let perv: number = this.current - 1;
-      if (perv < 0) perv = this.items.length - 1;
-
-      this.go(perv);
-    },
-
-    /**
-     *
-     */
-    next(): void {
-      let next: number = this.current + 1;
-      if (this.items.length == next) next = 0; // 循环
-
-      this.go(next);
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.aj-process-line {
-  display: flex;
-  padding: 5%;
-  justify-content: center;
-
-  .process-line {
-    font-size: 18px;
-    color: lightgray;
-    font-weight: bold;
-
-    & > div {
-      float: left;
-      width: 156px;
-      text-align: center;
-      position: relative;
-
-      &.current {
-        color: black;
-
-        span {
-          background-color: gray;
-        }
-      }
-
-      &.done {
-        //				color: lighten(@mainColor, 80%);
-        span {
-          //					background-color: lighten(@mainColor, 50%);
-        }
-
-        &::after {
-          //					background-color: lighten(@mainColor, 50%);
-        }
-      }
-
-      p {
-        font-size: 1rem;
-        letter-spacing: 3px;
-        padding-top: 5%;
-      }
-
-      span {
-        display: inline-block;
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        color: #fff;
-        line-height: 32px;
-        font-size: 16px;
-        background-color: lightgray;
-        position: relative;
-        z-index: 1;
-      }
-
-      &:last-child::after {
-        display: none;
-      }
-
-      &::after {
-        content: "";
-        position: absolute;
-        top: 14px;
-        left: 94px;
-        width: 124px;
-        height: 4px;
-        background-color: lightgray;
-      }
-    }
-  }
-}
-</style>

package/src/widget/Resize.ts

@@ -1,152 +0,0 @@
-export default {
-    data() {
-        return {
-            styleWidth: 0,// 样式参数值
-            styleHeight: 0,
-            styleLeft: 0,
-            styleTop: 0,
-            sideLeft: 0,  // 四条边定位坐标
-            sideRight: 0,
-            sideUp: 0,
-            sideDown: 0,
-            fixLeft: 0,   // top 和 left 定位参数
-            fixTop: 0,
-            fn: null,
-
-            LockX: false,// 是否锁定水平方向拖放
-            LockY: false,// 是否锁定垂直方向拖放
-            Lock: false,// 是否锁定
-
-            scale: {                // 按比例缩放
-                enable: true,      // 是否按比例缩放
-                ratio: 0,           // 设置比例(宽/高)
-                left: 0,
-                top: 0,
-            },
-
-            min: {                  // 最小控制
-                enable: false,
-                height: 100,
-                width: 200,
-            },
-            max: {                  // 最大控制
-                enable: false,
-                height: 300,
-                width: 500,
-            }
-
-        };
-    },
-    methods: {
-        /**
-         * 准备拖动
-         */
-        start(e: MouseEvent, fn: Function): void {
-            this.styleWidth = this.$el.clientWidth;
-            this.styleHeight = this.$el.clientHeight;
-            this.styleLeft = this.$el.offsetLeft;         // 记录鼠标相对拖放对象的位置
-            this.styleTop = this.$el.offsetTop;
-
-            this.sideLeft = e.clientX - this.styleWidth;
-            this.sideRight = e.clientX + this.styleWidth;
-            this.sideUp = e.clientY - this.styleHeight;
-            this.sideDown = e.clientY + this.styleHeight;
-
-            this.fixLeft = this.styleWidth + this.styleLeft;
-            this.fixTop = this.styleHeight + this.styleTop;
-            this.fn = fn;
-
-            if (this.scale.enable) {
-                this.scale.ratio = Math.max(this.scale.ratio, 0) || this.styleWidth / this.styleHeight;        //设置比例
-                this.scale.left = this.styleLeft + this.styleWidth / 2;// left 和 top 的定位坐标
-                this.scale.top = this.styleTop + this.styleHeight / 2;
-            }
-
-            document.addEventListener("mousemove", this.resize);// mousemove 时移动 mouseup 时停止
-            document.addEventListener("mouseup", this.stop);
-        },
-
-        // 缩放
-        resize(e: MouseEvent): void {
-            window.getSelection().removeAllRanges(); // 清除选择
-            this.fn(e);
-
-            if (this.min.enable) {
-                if (this.styleHeight <= this.min.height)
-                    return;
-                if (this.styleWidth <= this.min.width)
-                    return;
-            }
-            if (this.max.enable) {
-                if (this.styleHeight >= this.max.height)
-                    return;
-                if (this.styleWidth >= this.max.width)
-                    return;
-            }
-
-            let s = this.$el.style;
-            s.width = this.styleWidth + "px";
-            s.height = this.styleHeight + "px";
-            s.top = this.styleTop + "px";
-            s.left = this.styleLeft + "px";
-        },
-
-        // 停止缩放
-        stop(): void {
-            document.removeEventListener("mousemove", this.resize);
-            document.removeEventListener("mouseup", this.stop);
-        },
-
-        //缩放程序
-
-        //上
-        up(e: MouseEvent): void {
-            this.styleHeight = Math.max(this.sideDown - e.clientY, 0);
-            this.styleTop = this.fixTop - this.styleHeight;
-            this.styleLeft = this.scale.left - this.styleWidth / 2;
-            console.log(this.styleLeft)
-        },
-
-        //下
-        down(e: MouseEvent): void {
-            this.styleHeight = Math.max(e.clientY - this.sideUp, 0);
-            this.styleLeft = this.scale.left - this.styleWidth / 2;
-
-        },
-
-        //右
-        right(e: MouseEvent): void {
-            this.styleWidth = Math.max(e.clientX - this.sideLeft, 0);
-        },
-
-        //左
-        left(e: MouseEvent): void {
-            this.styleWidth = Math.max(this.sideRight - e.clientX, 0);
-            this.styleLeft = this.fixLeft - this.styleWidth;
-        },
-
-        //右下
-        rightDown(e: MouseEvent): void {
-            this.right(e);
-            this.down(e);
-        },
-
-        //右上
-        rightUp(e: MouseEvent): void {
-            this.right(e);
-            this.up(e);
-        },
-
-        //左下
-        leftDown(e: MouseEvent): void {
-            this.left(e);
-            this.down(e);
-        },
-
-        //左上
-        leftUp(e: MouseEvent): void {
-            this.left(e);
-            this.up(e);
-        },
-    },
-};

package/src/widget/Resize.vue

@@ -1,104 +0,0 @@
-<template>
-  <!-- 拖拉缩放效果 -->
-  <div class="resize-box">
-    <div class="rRightDown" @mousedown="start($event, rightDown)"> </div>
-    <div class="rLeftDown" @mousedown="start($event, leftDown)"> </div>
-    <div class="rRightUp" @mousedown="start($event, rightUp)"> </div>
-    <div class="rLeftUp" @mousedown="start($event, leftUp)"> </div>
-    <div class="rRight" @mousedown="start($event, right)"> </div>
-    <div class="rLeft" @mousedown="start($event, left)"> </div>
-    <div class="rDown" @mousedown="start($event, down)"></div>
-    <div class="rUp" @mousedown="start($event, up)"> </div>
-  </div>
-</template>
-
-<script lang="ts" src="./Resize.ts"></script>
-
-<style lang="less" scoped>
-.rRightDown,
-.rLeftDown,
-.rLeftUp,
-.rRightUp,
-.rRight,
-.rLeft,
-.rUp,
-.rDown {
-  position: absolute;
-  background: #c00;
-  width: 7px;
-  height: 7px;
-  z-index: 5;
-  font-size: 0;
-}
-
-.rLeftDown, .rRightUp {
-  cursor: ne-resize;
-}
-
-.rRightDown, .rLeftUp {
-  cursor: nw-resize;
-}
-
-.rRight, .rLeft {
-  cursor: e-resize;
-}
-
-.rUp, .rDown {
-  cursor: n-resize;
-}
-
-.rLeftDown {
-  left: -4px;
-  bottom: -4px;
-}
-
-.rRightUp {
-  right: -4px;
-  top: -4px;
-}
-
-.rRightDown {
-  right: -4px;
-  bottom: -4px;
-  background-color: 0f;
-}
-
-.rLeftUp {
-  left: -4px;
-  top: -4px;
-}
-
-.rRight {
-  right: -4px;
-  top: 50%;
-  margin-top: -4px;
-}
-
-.rLeft {
-  left: -4px;
-  top: 50%;
-  margin-top: -4px;
-}
-
-.rUp {
-  top: -4px;
-  left: 50%;
-  margin-left: -4px;
-}
-
-.rDown {
-  bottom: -4px;
-  left: 50%;
-  margin-left: -4px;
-}
-
-.resize-box {
-  border: 1px solid gray;
-  width: 100px;
-  height: 60px;
-  top: 150px;
-  left: 550px;
-  background: #fff;
-  position: absolute;
-}
-</style>

package/src/widget/TreeSelector.vue

@@ -1,4 +0,0 @@
-<!-- 下拉分类 -->
-<template>
-
-</template>

package/src/widget/calendar/BetweenDate.vue

@@ -1,63 +0,0 @@
-<template>
-  <form action="." method="GET" class="dateRange" @submit="valid">
-    <aj-form-calendar-input
-      :date-only="true"
-      :position-fixed="true"
-      placeholder="起始时间"
-      field-name="startDate"
-    ></aj-form-calendar-input>
-    -
-    <aj-form-calendar-input
-      :date-only="true"
-      :position-fixed="true"
-      placeholder="截至时间"
-      field-name="endDate"
-    ></aj-form-calendar-input>
-    <button class="aj-btn">按时间筛选</button>
-  </form>
-</template>
-
-<script lang="ts">
-/**
- * 起始时间、截止时间的范围选择
- */
-export default {
-  props: {
-    isAjax: { type: Boolean, default: true }, // 是否 AJAX 模式
-  },
-  methods: {
-    valid(this: Vue, ev: Event): void {
-      let start = (<HTMLInputElement>(
-          this.$el.querySelector("input[name=startDate]")
-        )).value,
-        end = (<HTMLInputElement>this.$el.querySelector("input[name=endDate]"))
-          .value;
-
-      if (!start || !end) {
-        alert("输入数据不能为空");
-        ev.preventDefault();
-        return;
-      }
-
-      if (new Date(start) > new Date(end)) {
-        alert("起始日期不能晚于结束日期");
-        ev.preventDefault();
-        return;
-      }
-
-      //@ts-ignore
-      if (this.isAjax) {
-        ev.preventDefault();
-        let grid: any = this.$parent.$parent;
-
-        Object.assign(grid.$refs.pager.extraParam, {
-          startDate: start,
-          endDate: end,
-        });
-
-        grid.reload();
-      }
-    },
-  },
-};
-</script>