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

Mobile UI Toolkit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Y = exports.X = exports.Wrap = exports.Offset = exports.M = exports.Gap = exports.Column = exports.Basic = void 0;
var _vueStrictProp = _interopRequireDefault(require("vue-strict-prop"));
var _vue = _interopRequireDefault(require("vue"));
var _vueTsxSupport = require("vue-tsx-support");
var _index = _interopRequireDefault(require("./index"));
require("./style");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Components/Basic/Grid',
  parameters: {
    component: _index.default,
    options: {
      showPanel: true
    }
  }
};
var Row = (0, _vueTsxSupport.component)({
  props: {
    gap: {
      type: Number,
      default: 1
    },
    wrap: {
      type: Boolean,
      default: false
    },
    units: {
      type: Number,
      default: 6
    },
    targetStyle: {
      type: String
    },
    x: _vueStrictProp.default.ofStringLiterals('left', 'right', 'center', 'between', 'around', 'baseline', 'stretch', 'evenly').optional,
    y: _vueStrictProp.default.ofStringLiterals('top', 'bottom', 'center', 'baseline', 'stretch', 'between', 'around', 'evenly').optional,
    m: _vueStrictProp.default.ofStringLiterals('top', 'bottom', 'center', 'between', 'around', 'stretch', 'evenly').optional,
    hasText: Boolean
  },
  render: function render() {
    var _this = this;
    var h = arguments[0];
    return h("div", {
      "style": {
        overflow: 'hidden'
      }
    }, [h(_index.default, {
      "attrs": {
        "m": this.m,
        "gap": this.gap,
        "wrap": this.wrap,
        "x": this.x,
        "y": this.y
      },
      "style": this.targetStyle
    }, [new Array(this.units).fill(0).map(function (_, index) {
      return h(_index.default.Item, {
        "attrs": {
          "span": 4
        },
        "style": {
          background: '#efefef',
          height: '100px',
          lineHeight: '100px',
          fontSize: "".concat(14 + index * 2 + 'px')
        }
      }, [_this.hasText && index + 1]);
    })])]);
  }
});
var Basic = exports.Basic = function Basic() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h(Row);
    }
  });
};
var Gap = exports.Gap = function Gap() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h(Row, {
        "attrs": {
          "gap": 4
        }
      });
    }
  });
};
var M = exports.M = function M() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h("div", [h("p", ["m: center"]), h(Row, {
        "attrs": {
          "m": "center",
          "targetStyle": "height: 300px; background: #e0e0e0;",
          "wrap": true
        }
      }), h("p", ["m: top"]), h(Row, {
        "attrs": {
          "m": "top",
          "targetStyle": "height: 300px; background: #e0e0e0;",
          "wrap": true
        }
      }), h("p", ["m: bottom"]), h(Row, {
        "attrs": {
          "m": "bottom",
          "targetStyle": "height: 300px; background: #e0e0e0;",
          "wrap": true
        }
      }), h("p", ["m: between"]), h(Row, {
        "attrs": {
          "m": "between",
          "targetStyle": "height: 300px; background: #e0e0e0;",
          "wrap": true
        }
      }), h("p", ["m: around"]), h(Row, {
        "attrs": {
          "m": "around",
          "targetStyle": "height: 300px; background: #e0e0e0;",
          "wrap": true
        }
      }), h("p", ["m: evenly"]), h(Row, {
        "attrs": {
          "m": "evenly",
          "targetStyle": "height: 300px; background: #e0e0e0;",
          "wrap": true
        }
      })]);
    }
  });
};
var X = exports.X = function X() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h("div", [h("p", ["x: center"]), h(Row, {
        "attrs": {
          "x": "center",
          "m": "center",
          "units": 3,
          "targetStyle": "height: 300px; background: #e0e0e0;",
          "wrap": true
        }
      }), h("p", ["x: left"]), h(Row, {
        "attrs": {
          "x": "left",
          "m": "center",
          "units": 2,
          "targetStyle": "height: 300px; background: #e0e0e0;",
          "wrap": true
        }
      }), h("p", ["x: right"]), h(Row, {
        "attrs": {
          "x": "right",
          "m": "center",
          "units": 2,
          "targetStyle": "height: 300px; background: #e0e0e0;",
          "wrap": true
        }
      }), h("p", ["x: between"]), h(Row, {
        "attrs": {
          "x": "between",
          "m": "center",
          "units": 2,
          "targetStyle": "height: 300px; background: #e0e0e0;",
          "wrap": true
        }
      }), h("p", ["x: around"]), h(Row, {
        "attrs": {
          "x": "around",
          "m": "center",
          "units": 2,
          "targetStyle": "height: 300px; background: #e0e0e0;",
          "wrap": true
        }
      }), h("p", ["x: evenly"]), h(Row, {
        "attrs": {
          "x": "evenly",
          "m": "center",
          "units": 2,
          "targetStyle": "height: 300px; background: #e0e0e0;",
          "wrap": true
        }
      })]);
    }
  });
};
var Y = exports.Y = function Y() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h("div", [h("p", ["y: center"]), h(Row, {
        "attrs": {
          "y": "center",
          "units": 2,
          "targetStyle": "height: 200px; background: #e0e0e0;"
        }
      }), h("p", ["y: top"]), h(Row, {
        "attrs": {
          "y": "top",
          "units": 2,
          "targetStyle": "height: 200px; background: #e0e0e0;"
        }
      }), h("p", ["y: bottom"]), h(Row, {
        "attrs": {
          "y": "bottom",
          "units": 2,
          "targetStyle": "height: 200px; background: #e0e0e0;"
        }
      })]);
    }
  });
};
var Wrap = exports.Wrap = function Wrap() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h(Row, {
        "attrs": {
          "units": 7,
          "wrap": true
        }
      });
    }
  });
};
var Column = exports.Column = function Column() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h("div", {
        "style": "overflow: hidden;"
      }, [h(_index.default, {
        "attrs": {
          "column": true,
          "gap": 2
        }
      }, [h(_index.default.Item, {
        "attrs": {
          "span": 12
        },
        "style": "background: #efefef; height: 100px;"
      }), h(_index.default.Item, {
        "attrs": {
          "span": 2
        },
        "style": "background: #efefef; height: 100px;"
      }), h(_index.default.Item, {
        "attrs": {
          "span": 5
        },
        "style": "background: #efefef; height: 100px;"
      }), h(_index.default.Item, {
        "attrs": {
          "span": 2
        },
        "style": "background: #efefef; height: 100px;"
      })])]);
    }
  });
};
var Offset = exports.Offset = function Offset() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h("div", [h(_index.default, {
        "style": "height: 200px; background: #e0e0e0;",
        "attrs": {
          "y": "center"
        }
      }, [h(_index.default.Item, {
        "attrs": {
          "offset": 2,
          "span": 2
        },
        "style": "background: #efefef; height: 100px;"
      }), h(_index.default.Item, {
        "attrs": {
          "offset": 2,
          "span": 2
        },
        "style": "background: #efefef; height: 100px;"
      }), h(_index.default.Item, {
        "attrs": {
          "offset": 2,
          "span": 2
        },
        "style": "background: #efefef; height: 100px;"
      })])]);
    }
  });
};