@ohu-mobile/core/lib/Popup/Popup.stories.js

Mobile UI Toolkit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Scroll = exports.Position = exports.Mask = exports.KeepState = exports.FunctionalInvoke = exports.Fullscreen = exports.Basic = exports.Animate = exports.Anchor = void 0;
var _CloseOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/CloseOutlined"));
var _vue = _interopRequireDefault(require("vue"));
var _index = _interopRequireDefault(require("./index"));
require("./style");
var _Card = _interopRequireDefault(require("../Card"));
require("../Card/style");
var _Button = _interopRequireDefault(require("../Button"));
require("../Button/style");
var _vueRouter = _interopRequireDefault(require("vue-router"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Components/FeedBack/Popup',
  parameters: {
    component: _index.default,
    options: {
      showPanel: true
    }
  }
};
var Basic = exports.Basic = function Basic() {
  return _vue.default.extend({
    data: function data() {
      return {
        v1: false
      };
    },
    methods: {
      open: function open() {
        this.v1 = true;
      }
    },
    render: function render() {
      var _this = this;
      var h = arguments[0];
      return h("div", {
        "style": "padding: 10px;"
      }, [h(_index.default, {
        "attrs": {
          "targetStyle": {
            width: '8rem',
            height: '8rem',
            background: '#fff'
          }
        },
        "model": {
          value: _this.v1,
          callback: function callback($$v) {
            _this.v1 = $$v;
          }
        }
      }), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["Basic"]), h(_Button.default, {
        "attrs": {
          "type": "primary"
        },
        "on": {
          "click": function click() {
            return _this.v1 = true;
          }
        }
      }, ["open"])])]);
    }
  });
};
var Position = exports.Position = function Position() {
  return _vue.default.extend({
    data: function data() {
      return {
        v2: false,
        v3: false,
        v4: false,
        v5: false
      };
    },
    render: function render() {
      var _this2 = this;
      var h = arguments[0];
      return h("div", {
        "style": "padding: 8px;"
      }, [h(_index.default, {
        "attrs": {
          "position": "top",
          "targetStyle": {
            width: '100%',
            height: '6rem',
            background: '#fff'
          }
        },
        "model": {
          value: _this2.v2,
          callback: function callback($$v) {
            _this2.v2 = $$v;
          }
        }
      }), h(_index.default, {
        "attrs": {
          "position": "bottom",
          "targetStyle": {
            width: '100%',
            height: '6rem',
            overflow: 'scroll',
            background: '#fff'
          }
        },
        "model": {
          value: _this2.v3,
          callback: function callback($$v) {
            _this2.v3 = $$v;
          }
        }
      }, [h("div", {
        "style": "height: 1000px;"
      }, [h("input", {
        "on": {
          "blur": function blur() {
            return window.scrollTo(0, 0);
          }
        },
        "attrs": {
          "type": "text"
        },
        "style": "width: 60px; font-size: 18px;"
      })])]), h(_index.default, {
        "attrs": {
          "position": "left",
          "targetStyle": {
            width: '6rem',
            height: '100%',
            background: '#fff'
          }
        },
        "model": {
          value: _this2.v4,
          callback: function callback($$v) {
            _this2.v4 = $$v;
          }
        }
      }, [h(_Button.default, {
        "attrs": {
          "type": "primary"
        },
        "on": {
          "click": function click() {
            return _this2.v5 = true;
          }
        }
      }, ["\u6253\u5F00right"])]), h(_index.default, {
        "attrs": {
          "position": "right",
          "targetStyle": {
            width: '6rem',
            height: '100%',
            background: '#fff'
          }
        },
        "model": {
          value: _this2.v5,
          callback: function callback($$v) {
            _this2.v5 = $$v;
          }
        }
      }, [h(_Button.default, {
        "attrs": {
          "type": "primary"
        },
        "on": {
          "click": function click() {
            return _this2.v4 = true;
          }
        }
      }, ["\u6253\u5F00left"]), h(_Button.default, {
        "attrs": {
          "type": "primary"
        },
        "on": {
          "click": function click() {
            return _this2.v4 = false;
          }
        }
      }, ["\u5173\u95EDleft"])]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["position"]), h(_Button.default, {
        "attrs": {
          "type": "primary"
        },
        "on": {
          "click": function click() {
            return _this2.v2 = true;
          }
        }
      }, ["top"]), h(_Button.default, {
        "on": {
          "click": function click() {
            return _this2.v3 = true;
          }
        }
      }, ["bottom"]), h(_Button.default, {
        "attrs": {
          "type": "primary"
        },
        "on": {
          "click": function click() {
            return _this2.v4 = true;
          }
        }
      }, ["left"]), h(_Button.default, {
        "on": {
          "click": function click() {
            return _this2.v5 = true;
          }
        }
      }, ["right"])])]);
    }
  });
};
var Animate = exports.Animate = function Animate() {
  return _vue.default.extend({
    data: function data() {
      return {
        vz: false,
        vf: false,
        vzs: false
      };
    },
    render: function render() {
      var _this3 = this;
      var h = arguments[0];
      return h("div", {
        "style": "padding: 8px;"
      }, [h(_index.default, {
        "attrs": {
          "usePortal": false,
          "animate": "zoom",
          "targetStyle": {
            width: '8rem',
            height: '8rem',
            background: '#fff'
          }
        },
        "model": {
          value: _this3.vz,
          callback: function callback($$v) {
            _this3.vz = $$v;
          }
        }
      }), h(_index.default, {
        "attrs": {
          "animate": "zoom-scale",
          "targetStyle": {
            width: '8rem',
            height: '8rem',
            background: '#fff'
          }
        },
        "model": {
          value: _this3.vzs,
          callback: function callback($$v) {
            _this3.vzs = $$v;
          }
        }
      }), h(_index.default, {
        "attrs": {
          "animate": "fade",
          "targetStyle": {
            width: '8rem',
            height: '8rem',
            background: '#fff'
          }
        },
        "model": {
          value: _this3.vf,
          callback: function callback($$v) {
            _this3.vf = $$v;
          }
        }
      }), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["animate"]), h(_Button.default, {
        "attrs": {
          "type": "primary"
        },
        "on": {
          "click": function click() {
            return _this3.vf = true;
          }
        }
      }, ["fade"]), h(_Button.default, {
        "on": {
          "click": function click() {
            return _this3.vz = true;
          }
        }
      }, ["zoom"]), h(_Button.default, {
        "attrs": {
          "type": "primary"
        },
        "on": {
          "click": function click() {
            return _this3.vzs = true;
          }
        }
      }, ["zoom-scale"])])]);
    }
  });
};
var Mask = exports.Mask = function Mask() {
  return _vue.default.extend({
    data: function data() {
      return {
        vm: false,
        vmf: false
      };
    },
    render: function render() {
      var _this4 = this;
      var h = arguments[0];
      return h("div", {
        "style": "padding: 8px;"
      }, [h(_index.default, {
        "attrs": {
          "animate": "zoom",
          "mask": false,
          "targetStyle": {
            width: '8rem',
            height: '8rem',
            background: 'grey'
          }
        },
        "model": {
          value: _this4.vm,
          callback: function callback($$v) {
            _this4.vm = $$v;
          }
        }
      }), h(_index.default, {
        "attrs": {
          "maskFrosted": true,
          "animate": "fade",
          "targetStyle": {
            width: '8rem',
            height: '8rem',
            background: '#FFF'
          }
        },
        "model": {
          value: _this4.vmf,
          callback: function callback($$v) {
            _this4.vmf = $$v;
          }
        }
      }), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["mask"]), h(_Button.default, {
        "attrs": {
          "type": "primary"
        },
        "on": {
          "click": function click() {
            return _this4.vm = true;
          }
        }
      }, ["without mask"]), h(_Button.default, {
        "attrs": {
          "type": "translucent"
        },
        "on": {
          "click": function click() {
            return _this4.vmf = true;
          }
        }
      }, ["frosted mask"])])]);
    }
  });
};
_vue.default.use(_vueRouter.default);
var Fullscreen = exports.Fullscreen = function Fullscreen() {
  return _vue.default.extend({
    data: function data() {
      return {
        vfs: false
      };
    },
    render: function render() {
      var _this5 = this;
      var h = arguments[0];
      return h("div", {
        "style": "padding: 8px;"
      }, [h(_index.default, {
        "attrs": {
          "animate": "slide-down",
          "fullscreen": true,
          "targetStyle": {
            background: '#FFF'
          },
          "round": true
        },
        "model": {
          value: _this5.vfs,
          callback: function callback($$v) {
            _this5.vfs = $$v;
          }
        }
      }, [h(_index.default.Header, {
        "attrs": {
          "center": true,
          "closeIcon": _CloseOutlined2.default
        }
      }, ["\u6807\u9898"]), h("div", {
        "style": "height: 200vh"
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["fullscreen"]), h(_Button.default, {
        "attrs": {
          "type": "primary"
        },
        "on": {
          "click": function click() {
            return _this5.vfs = true;
          }
        }
      }, ["fullscreen"])])]);
    }
  });
};
var A = _vue.default.extend({
  data: function data() {
    return {
      visible: false
    };
  },
  render: function render() {
    var _this6 = this;
    var h = arguments[0];
    return h("div", {
      "class": "demo"
    }, [h(_index.default, {
      "attrs": {
        "animate": "slide-down",
        "position": "bottom",
        "targetStyle": {
          width: '100%',
          height: '300px',
          background: '#FFF'
        },
        "round": true
      },
      "model": {
        value: _this6.visible,
        callback: function callback($$v) {
          _this6.visible = $$v;
        }
      }
    }, [h(_Button.default, {
      "attrs": {
        "type": "primary",
        "to": "/b"
      }
    }, ["\u6253\u5F00B"])]), h(_Card.default, {
      "attrs": {
        "shadow": true
      }
    }, [h(_Button.default, {
      "attrs": {
        "type": "primary"
      },
      "on": {
        "click": function click() {
          return _this6.visible = true;
        }
      }
    }, ["A \u6253\u5F00Popup"])])]);
  }
});
var B = _vue.default.extend({
  render: function render() {
    var h = arguments[0];
    return h("div", {
      "class": "demo"
    }, [h(_Button.default, {
      "attrs": {
        "type": "primary",
        "to": "/a"
      }
    }, ["\u6253\u5F00A"])]);
  }
});
var router = new _vueRouter.default({
  mode: 'hash',
  routes: [{
    path: '/a',
    component: A,
    alias: '/'
  }, {
    path: '/b',
    component: B
  }]
});
var KeepState = exports.KeepState = function KeepState() {
  return _vue.default.extend({
    router: router,
    render: function render() {
      var h = arguments[0];
      return h("div", {
        "class": "demo"
      }, [h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h("h1", ["Keep State"]), h("keep-alive", [h("router-view")])])]);
    }
  });
};
var Scroll = exports.Scroll = function Scroll() {
  return _vue.default.extend({
    data: function data() {
      return {
        v: false
      };
    },
    render: function render() {
      var _this7 = this;
      var h = arguments[0];
      return h("div", {
        "style": "padding: 8px;"
      }, [h(_index.default, {
        "attrs": {
          "scrollBody": true,
          "targetStyle": {
            width: '80vw',
            height: '120vh',
            margin: '32px',
            background: '#FFF'
          }
        },
        "model": {
          value: _this7.v,
          callback: function callback($$v) {
            _this7.v = $$v;
          }
        }
      }, [h(_Card.default, [h(_Card.default.Header, ["title"])])]), h(_Button.default, {
        "attrs": {
          "type": "primary"
        },
        "on": {
          "click": function click() {
            return _this7.v = true;
          }
        }
      }, ["open"])]);
    }
  });
};
var Anchor = exports.Anchor = function Anchor() {
  return _vue.default.extend({
    data: function data() {
      return {
        va: false,
        anchorEl: null,
        position: {
          vertical: 'bottom',
          horizontal: 'left'
        }
      };
    },
    methods: {
      setAnchor: function setAnchor(e, position) {
        this.anchorEl = e.target || e.srcElement;
        this.va = Boolean(this.anchorEl);
        if (position) {
          this.position = position;
        }
      }
    },
    render: function render() {
      var _this8 = this;
      var h = arguments[0];
      return h("div", {
        "style": "padding: 10px;"
      }, [h(_index.default, {
        "attrs": {
          "anchor": this.anchorEl,
          "mask": false,
          "animate": "zoom",
          "position": this.position,
          "targetStyle": {
            background: '#FFF',
            width: '200px',
            padding: '10px',
            boxShadow: '0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)'
          }
        },
        "model": {
          value: _this8.va,
          callback: function callback($$v) {
            _this8.va = $$v;
          }
        }
      }, [h("h2", ["This is PopOver"]), h("p", ["Here is description."])]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["transformOrigin"]), h("div", {
        "style": "display: flex; min-height: 200px; flex-flow: row wrap; justify-content: space-between; align-content: space-around;"
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["position"]), h("div", {
        "style": "display: flex; min-height: 200px; flex-flow: row wrap; justify-content: space-between; align-content: space-around;"
      }, [h(_Button.default, {
        "attrs": {
          "inline": true,
          "type": "primary"
        },
        "on": {
          "click": function click(e) {
            return _this8.setAnchor(e, 'top');
          }
        }
      }, ["top"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "type": "primary"
        },
        "on": {
          "click": function click(e) {
            return _this8.setAnchor(e, 'bottom');
          }
        }
      }, ["bottom"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "type": "primary"
        },
        "on": {
          "click": function click(e) {
            return _this8.setAnchor(e, 'left');
          }
        }
      }, ["left"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "type": "primary"
        },
        "on": {
          "click": function click(e) {
            return _this8.setAnchor(e, 'right');
          }
        }
      }, ["right"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "type": "primary"
        },
        "on": {
          "click": function click(e) {
            return _this8.setAnchor(e, {
              vertical: 'top',
              horizontal: 'left'
            });
          }
        }
      }, ["tl"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "type": "primary"
        },
        "on": {
          "click": function click(e) {
            return _this8.setAnchor(e, {
              vertical: 'top',
              horizontal: 'right'
            });
          }
        }
      }, ["tr"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "type": "primary"
        },
        "on": {
          "click": function click(e) {
            return _this8.setAnchor(e, {
              vertical: 'bottom',
              horizontal: 'left'
            });
          }
        }
      }, ["bl"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "type": "primary"
        },
        "on": {
          "click": function click(e) {
            return _this8.setAnchor(e, {
              vertical: 'bottom',
              horizontal: 'right'
            });
          }
        }
      }, ["br"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "type": "primary"
        },
        "on": {
          "click": function click(e) {
            return _this8.setAnchor(e, 'center');
          }
        }
      }, ["center"])])])]);
    }
  });
};
var FunctionalInvoke = exports.FunctionalInvoke = function FunctionalInvoke() {
  return _vue.default.extend({
    methods: {
      openModal: function openModal() {
        var h = this.$createElement;
        _index.default.open({
          parent: this,
          animate: 'zoom',
          maskClosable: false,
          targetStyle: {
            width: '100px',
            height: '100px',
            background: '#FFF'
          },
          render: function render() {
            var h = arguments[0];
            return h("div", {
              "style": "text-align: center;"
            }, [h(_Button.default, {
              "attrs": {
                "inline": true,
                "type": "primary"
              },
              "on": {
                "click": function click() {
                  return _index.default.close();
                }
              }
            }, ["\u5173\u95ED"])]);
          }
        });
      }
    },
    render: function render() {
      var h = arguments[0];
      return h("div", [h(_Button.default, {
        "attrs": {
          "type": "primary"
        },
        "on": {
          "click": this.openModal
        }
      }, ["function call"])]);
    }
  });
};