@ohu-mobile/core/lib-rem/Popover/Popover.stories.js

Mobile UI Toolkit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.NoArrow = exports.Item = exports.Basic = void 0;
var _MenuOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/MenuOutlined"));
var _QrScanOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/QrScanOutlined"));
var _CustomerServiceOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/CustomerServiceOutlined"));
var _MessageOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/MessageOutlined"));
var _vue = _interopRequireDefault(require("vue"));
var _index = _interopRequireDefault(require("./index"));
require("./style");
var _Button = _interopRequireDefault(require("../Button"));
require("../Button/style");
var _Icon = _interopRequireDefault(require("../Icon"));
require("../Icon/style");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Components/FeedBack/Popover',
  parameters: {
    component: _index.default,
    options: {
      showPanel: true
    }
  }
};
var Basic = exports.Basic = function Basic() {
  return _vue.default.extend({
    data: function data() {
      return {
        vl: true
      };
    },
    render: function render() {
      var _this = this;
      var h = arguments[0];
      return h("div", {
        "style": "height: 1600px; display: flex; flex-flow: column nowrap; justify-content: space-around; align-items: center;"
      }, [h(_index.default, {
        "attrs": {
          "position": "left"
        },
        "model": {
          value: _this.vl,
          callback: function callback($$v) {
            _this.vl = $$v;
          }
        }
      }, [h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item1"]), h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item2"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "size": "md",
          "type": "primary"
        },
        "slot": "anchor"
      }, ["left"])]), h(_index.default, {
        "attrs": {
          "position": "right"
        }
      }, [h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item1"]), h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item2"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "size": "md",
          "type": "primary"
        },
        "slot": "anchor"
      }, ["right"])]), h(_index.default, {
        "attrs": {
          "position": "top"
        }
      }, [h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item1"]), h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item2"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "size": "md",
          "type": "primary"
        },
        "slot": "anchor"
      }, ["top"])]), h(_index.default, {
        "attrs": {
          "position": "bottom"
        }
      }, [h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item1"]), h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item2"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "size": "md",
          "type": "primary"
        },
        "slot": "anchor"
      }, ["bottom"])]), h(_index.default, {
        "attrs": {
          "position": {
            vertical: 'top',
            horizontal: 'left'
          }
        }
      }, [h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item1"]), h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item2"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "size": "md",
          "type": "primary"
        },
        "slot": "anchor"
      }, ["tl"])]), h(_index.default, {
        "attrs": {
          "position": {
            vertical: 'top',
            horizontal: 'right'
          }
        }
      }, [h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item1"]), h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item2"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "size": "md",
          "type": "primary"
        },
        "slot": "anchor"
      }, ["tr"])]), h(_index.default, {
        "attrs": {
          "position": {
            vertical: 'bottom',
            horizontal: 'left'
          }
        }
      }, [h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item1"]), h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item2"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "size": "md",
          "type": "primary"
        },
        "slot": "anchor"
      }, ["bl"])]), h(_index.default, {
        "attrs": {
          "position": {
            vertical: 'bottom',
            horizontal: 'right'
          }
        }
      }, [h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item1"]), h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item2"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "size": "md",
          "type": "primary"
        },
        "slot": "anchor"
      }, ["br"])]), h(_index.default, {
        "attrs": {
          "position": {
            vertical: 'top',
            horizontal: 'left'
          },
          "transformOrigin": {
            vertical: 'top',
            horizontal: 'right'
          }
        }
      }, [h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item1"]), h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item2"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "size": "md",
          "type": "primary"
        },
        "slot": "anchor"
      }, ["origin-tr"])]), h(_index.default, {
        "attrs": {
          "position": {
            vertical: 'top',
            horizontal: 'right'
          },
          "transformOrigin": {
            vertical: 'top',
            horizontal: 'left'
          }
        }
      }, [h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item1"]), h("div", {
        "style": "height: 40px; line-height: 40px; padding: 0 10px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": "message"
        }
      }), " Item2"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "size": "md",
          "type": "primary"
        },
        "slot": "anchor"
      }, ["origin-tl"])])]);
    }
  });
};
var NoArrow = exports.NoArrow = function NoArrow() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h("div", {
        "style": "height: 200px; display: flex; flex-flow: column nowrap; justify-content: space-around; align-items: center;"
      }, [h(_index.default, {
        "attrs": {
          "animate": "fade",
          "position": "left",
          "noArrow": true
        }
      }, [h("div", {
        "style": "padding: 10px;"
      }, ["no arrow"]), h(_Button.default, {
        "attrs": {
          "inline": true,
          "size": "md",
          "type": "primary"
        },
        "slot": "anchor"
      }, ["hello"])])]);
    }
  });
};
var Item = exports.Item = function Item() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h("div", {
        "style": "height: 200px; display: flex; flex-flow: column nowrap; justify-content: space-around; align-items: center;"
      }, [h(_index.default, {
        "attrs": {
          "contentStyle": {
            width: '130px'
          },
          "position": {
            vertical: 'bottom',
            horizontal: 'right'
          }
        },
        "on": {
          "select": function select(e) {
            console.log(e);
          }
        }
      }, [h(_index.default.Item, {
        "key": "message",
        "attrs": {
          "icon": _MessageOutlined2.default
        }
      }, ["messages"]), h(_index.default.Item, {
        "key": "customer-service",
        "attrs": {
          "icon": _CustomerServiceOutlined2.default
        }
      }, ["center"]), h(_index.default.Item, {
        "key": "scan-code",
        "attrs": {
          "disabled": true,
          "icon": _QrScanOutlined2.default
        }
      }, ["scan"]), h(_Button.default, {
        "attrs": {
          "icon": _MenuOutlined2.default,
          "inline": true,
          "size": "md",
          "type": "link"
        },
        "slot": "anchor"
      })])]);
    }
  });
};