@fishtank/fishtank-vue
Version:
[Fish Tank VueJS Component Module](https://fishtank.bna.com)
1,532 lines (1,298 loc) • 770 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var Vue = _interopDefault(require('vue'));
var __vue_normalize__ = _interopDefault(require('vue-runtime-helpers/dist/normalize-component.js'));
var __vue_create_injector__ = _interopDefault(require('vue-runtime-helpers/dist/inject-style/browser.js'));
var iconsVue = require('@fishtank/icons-vue');
var defineProperty = _interopDefault(require('core-js/library/fn/object/define-property'));
var iterator = _interopDefault(require('core-js/library/fn/symbol/iterator'));
var symbol = _interopDefault(require('core-js/library/fn/symbol'));
var getPrototypeOf = _interopDefault(require('core-js/library/fn/object/get-prototype-of'));
var setPrototypeOf = _interopDefault(require('core-js/library/fn/object/set-prototype-of'));
var create = _interopDefault(require('core-js/library/fn/object/create'));
var tslib_1 = require('tslib');
var vuePropertyDecorator = require('vue-property-decorator');
require('core-js/modules/es6.regexp.to-string');
require('core-js/modules/es6.function.name');
var isArray = _interopDefault(require('core-js/library/fn/array/is-array'));
var from = _interopDefault(require('core-js/library/fn/array/from'));
var isIterable = _interopDefault(require('core-js/library/fn/is-iterable'));
require('core-js/modules/es6.object.keys');
require('core-js/modules/es6.array.sort');
require('core-js/modules/es6.array.from');
require('core-js/modules/web.dom.iterable');
require('core-js/modules/es6.string.iterator');
require('core-js/modules/es6.set');
var _ = _interopDefault(require('lodash'));
require('core-js/modules/es6.regexp.replace');
var ftColorsObj = _interopDefault(require('@fishtank/colors/dist/text.common.js'));
require('core-js/modules/es6.number.constructor');
require('core-js/modules/es6.regexp.split');
require('core-js/modules/es6.string.fixed');
var vueClassComponent = require('vue-class-component');
var colors = require('@fishtank/colors/dist/index.common');
var colors__default = colors['default'];
require('core-js/modules/es6.string.small');
var getIterator = _interopDefault(require('core-js/library/fn/get-iterator'));
var VueJsPaginate = require('vuejs-paginate');
var vueContentLoader = require('vue-content-loader');
require('core-js/modules/es7.array.includes');
require('core-js/modules/es6.string.includes');
require('core-js/modules/es7.symbol.async-iterator');
require('core-js/modules/es6.symbol');
var ftColorsObj$1 = _interopDefault(require('@fishtank/colors/dist/heading.common.js'));
require('core-js/modules/es6.array.find');
require('core-js/modules/es6.string.anchor');
var Popper = _interopDefault(require('popper.js'));
var vueClickaway = require('vue-clickaway');
require('core-js/modules/es6.regexp.constructor');
var VTooltip = _interopDefault(require('v-tooltip'));
var defineProperties = _interopDefault(require('core-js/library/fn/object/define-properties'));
var getOwnPropertyDescriptors = _interopDefault(require('core-js/library/fn/object/get-own-property-descriptors'));
var getOwnPropertyDescriptor = _interopDefault(require('core-js/library/fn/object/get-own-property-descriptor'));
var getOwnPropertySymbols = _interopDefault(require('core-js/library/fn/object/get-own-property-symbols'));
var keys = _interopDefault(require('core-js/library/fn/object/keys'));
var script = Vue.extend({
name: "BaseAlert",
props: {
heading: {
type: String,
required: true
}
},
computed: {
hasIcon: function hasIcon() {
return !!this.$slots.icon;
}
}
});
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", {
class: _vm.$style.alert
}, [_vm.hasIcon ? _c("div", {
class: _vm.$style.icon
}, [_vm._t("icon")], 2) : _vm._e(), _vm._v(" "), _c("div", {
class: _vm.hasIcon ? _vm.$style.contentWIcon : _vm.$style.content
}, [_c("div", {
class: _vm.$style.heading
}, [_vm._v(_vm._s(_vm.heading))]), _vm._v(" "), _vm._t("default")], 2)]);
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */
var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
if (!inject) return;
inject("data-v-13806d49_0", {
source: ".ft-alert-EqSB {\n padding: 0.75rem;\n position: relative;\n border-color: #292E31;\n border-width: 1px;\n border-style: solid;\n}\n.ft-icon-1qwv {\n position: absolute;\n}\n.ft-icon-1qwv svg {\n height: 2rem;\n width: 2rem;\n}\n.ft-contentWIcon-1StY {\n margin-left: 2.75rem;\n}\n.ft-content-yzHv {\n font-size: 0.75rem;\n line-height: 1rem;\n margin-left: 0.75rem;\n}\n.ft-heading-1j03 {\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-bottom: 0.5rem;\n}\n",
map: undefined,
media: undefined
});
Object.defineProperty(this, "$style", {
value: {
"alert": "ft-alert-EqSB",
"icon": "ft-icon-1qwv",
"contentWIcon": "ft-contentWIcon-1StY",
"content": "ft-content-yzHv",
"heading": "ft-heading-1j03"
}
});
};
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject SSR */
var BaseAlert = __vue_normalize__({
render: __vue_render__,
staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, __vue_create_injector__, undefined);
var script$1 = {
name: "AlertError",
components: {
BaseAlert: BaseAlert,
WarningIcon: iconsVue.Warning32
},
props: {
heading: {
type: String,
required: true
}
}
};
/* script */
var __vue_script__$1 = script$1;
/* template */
var __vue_render__$1 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("base-alert", {
class: _vm.$style.error,
attrs: {
heading: _vm.heading
}
}, [_c("WarningIcon", {
class: _vm.$style.icon,
attrs: {
slot: "icon",
scale: 1
},
slot: "icon"
}), _vm._v(" "), _vm._t("default")], 2);
};
var __vue_staticRenderFns__$1 = [];
__vue_render__$1._withStripped = true;
/* style */
var __vue_inject_styles__$1 = function __vue_inject_styles__(inject) {
if (!inject) return;
inject("data-v-08d4fdfc_0", {
source: ".ft-error-1UNG {\n background-color: #FBECEB;\n border-color: #E1483E;\n}\n.ft-error-1UNG .ft-icon-2GHs {\n color: #E1483E;\n}\n",
map: undefined,
media: undefined
});
Object.defineProperty(this, "$style", {
value: {
"error": "ft-error-1UNG",
"icon": "ft-icon-2GHs"
}
});
};
/* scoped */
var __vue_scope_id__$1 = undefined;
/* module identifier */
var __vue_module_identifier__$1 = undefined;
/* functional template */
var __vue_is_functional_template__$1 = false;
/* style inject SSR */
var AlertError = __vue_normalize__({
render: __vue_render__$1,
staticRenderFns: __vue_staticRenderFns__$1
}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, __vue_create_injector__, undefined);
var script$2 = Vue.extend({
name: "AlertInfo",
components: {
BaseAlert: BaseAlert
},
props: {
heading: {
type: String,
required: true
}
}
});
/* script */
var __vue_script__$2 = script$2;
/* template */
var __vue_render__$2 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("base-alert", {
class: _vm.$style.info,
attrs: {
heading: _vm.heading
}
}, [_vm._t("default")], 2);
};
var __vue_staticRenderFns__$2 = [];
__vue_render__$2._withStripped = true;
/* style */
var __vue_inject_styles__$2 = function __vue_inject_styles__(inject) {
if (!inject) return;
inject("data-v-0bceeaa0_0", {
source: ".ft-info-15HG {\n background-color: #E7F5FB;\n border-color: #0D9DDB;\n}\n",
map: undefined,
media: undefined
});
Object.defineProperty(this, "$style", {
value: {
"info": "ft-info-15HG"
}
});
};
/* scoped */
var __vue_scope_id__$2 = undefined;
/* module identifier */
var __vue_module_identifier__$2 = undefined;
/* functional template */
var __vue_is_functional_template__$2 = false;
/* style inject SSR */
var AlertInfo = __vue_normalize__({
render: __vue_render__$2,
staticRenderFns: __vue_staticRenderFns__$2
}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, __vue_create_injector__, undefined);
var script$3 = Vue.extend({
name: "AlertSuccess",
components: {
BaseAlert: BaseAlert
},
props: {
heading: {
type: String,
required: true
}
}
});
/* script */
var __vue_script__$3 = script$3;
/* template */
var __vue_render__$3 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("base-alert", {
class: _vm.$style.success,
attrs: {
heading: _vm.heading
}
}, [_vm._t("default")], 2);
};
var __vue_staticRenderFns__$3 = [];
__vue_render__$3._withStripped = true;
/* style */
var __vue_inject_styles__$3 = function __vue_inject_styles__(inject) {
if (!inject) return;
inject("data-v-64df3240_0", {
source: ".ft-success-30AK {\n background-color: #EBF6F1;\n border-color: #49B88B;\n}\n",
map: undefined,
media: undefined
});
Object.defineProperty(this, "$style", {
value: {
"success": "ft-success-30AK"
}
});
};
/* scoped */
var __vue_scope_id__$3 = undefined;
/* module identifier */
var __vue_module_identifier__$3 = undefined;
/* functional template */
var __vue_is_functional_template__$3 = false;
/* style inject SSR */
var AlertSuccess = __vue_normalize__({
render: __vue_render__$3,
staticRenderFns: __vue_staticRenderFns__$3
}, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, __vue_create_injector__, undefined);
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var defineProperty$1 = defineProperty;
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
defineProperty$1(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
var iterator$1 = iterator;
var symbol$1 = symbol;
function _typeof(obj) {
if (typeof symbol$1 === "function" && typeof iterator$1 === "symbol") {
_typeof = function _typeof(obj) {
return typeof obj;
};
} else {
_typeof = function _typeof(obj) {
return obj && typeof symbol$1 === "function" && obj.constructor === symbol$1 && obj !== symbol$1.prototype ? "symbol" : typeof obj;
};
}
return _typeof(obj);
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _possibleConstructorReturn(self, call) {
if (call && (_typeof(call) === "object" || typeof call === "function")) {
return call;
}
return _assertThisInitialized(self);
}
var getPrototypeOf$1 = getPrototypeOf;
var setPrototypeOf$1 = setPrototypeOf;
function _getPrototypeOf(o) {
_getPrototypeOf = setPrototypeOf$1 ? getPrototypeOf$1 : function _getPrototypeOf(o) {
return o.__proto__ || getPrototypeOf$1(o);
};
return _getPrototypeOf(o);
}
var create$1 = create;
function _setPrototypeOf(o, p) {
_setPrototypeOf = setPrototypeOf$1 || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = create$1(superClass && superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}
});
if (superClass) setPrototypeOf(subClass, superClass);
}
var inputOrientation =
/*#__PURE__*/
function (_Vue) {
_inherits(inputOrientation, _Vue);
function inputOrientation() {
_classCallCheck(this, inputOrientation);
return _possibleConstructorReturn(this, _getPrototypeOf(inputOrientation).apply(this, arguments));
}
return inputOrientation;
}(vuePropertyDecorator.Vue);
tslib_1.__decorate([vuePropertyDecorator.Prop({
type: String,
default: null
})], inputOrientation.prototype, "orientation", void 0);
inputOrientation = tslib_1.__decorate([vuePropertyDecorator.Component({})], inputOrientation);
var orientation = inputOrientation;
var TextInputMixin =
/*#__PURE__*/
function (_Vue) {
_inherits(TextInputMixin, _Vue);
function TextInputMixin() {
_classCallCheck(this, TextInputMixin);
return _possibleConstructorReturn(this, _getPrototypeOf(TextInputMixin).apply(this, arguments));
}
_createClass(TextInputMixin, [{
key: "data",
value: function data() {
return {
identifier: (Math.random() * 10000).toFixed(0).toString(),
isFocused: false
};
}
}, {
key: "showRightIcon",
get: function get() {
return !!this.$slots.rightIcon || this.$props.value && this.$props.value.length > 0;
}
}, {
key: "errorMessage",
get: function get() {
if (!this.error) {
return undefined;
}
if (typeof this.error === "string") {
return this.error;
} else if (this.error.fullMessage) {
return this.error.fullMessage;
} else {
return undefined;
}
}
}]);
return TextInputMixin;
}(vuePropertyDecorator.Vue);
tslib_1.__decorate([vuePropertyDecorator.Prop({
required: false,
type: String,
default: ""
})], TextInputMixin.prototype, "value", void 0);
tslib_1.__decorate([vuePropertyDecorator.Prop({
required: false,
type: String,
default: undefined
})], TextInputMixin.prototype, "label", void 0);
tslib_1.__decorate([vuePropertyDecorator.Prop({
type: String,
default: null,
required: false
})], TextInputMixin.prototype, "id", void 0);
tslib_1.__decorate([vuePropertyDecorator.Prop({
type: Boolean,
default: false,
required: false
})], TextInputMixin.prototype, "required", void 0);
tslib_1.__decorate([vuePropertyDecorator.Prop({
required: false,
default: null,
type: [String, Object],
validator: function validator(value) {
if (typeof value === 'string') {
return true;
}
if (value.fullMessage) {
return true;
} // eslint-disable-next-line no-console
console.warn("InputText's `error` prop should be a string or an object with a `fullMessage` string property");
return false;
}
})], TextInputMixin.prototype, "error", void 0);
TextInputMixin = tslib_1.__decorate([vuePropertyDecorator.Component({})], TextInputMixin);
var textInputMixin = TextInputMixin;
var a11y = Vue.extend({
created: function created() {
window.addEventListener('keydown', this.handleFirstTab);
},
mounted: function mounted() {
this.setBodyAriaForLoader(this);
},
destroyed: function destroyed() {
this.removeBodyAriaForLoader(this);
},
methods: {
handleFirstTab: function handleFirstTab(e) {
if (e.keyCode === 9) {
document.body.classList.add('user-is-tabbing');
window.removeEventListener('keydown', this.handleFirstTab);
window.addEventListener('mousedown', this.handleMouseDownOnce);
}
},
handleMouseDownOnce: function handleMouseDownOnce() {
document.body.classList.remove('user-is-tabbing');
window.removeEventListener('mousedown', this.handleMouseDownOnce);
window.addEventListener('keydown', this.handleFirstTab);
},
setBodyAriaForLoader: function setBodyAriaForLoader(vm) {
if (["FishTankLoaderSpinner", "FishTankLoaderContent"].indexOf(vm.$options.name) >= 0) {
document.body.getAttribute('aria-busy') === null ? document.body.setAttribute('aria-busy', 'true') : document.body.getAttribute('aria-busy') === 'false' ? document.body.setAttribute('aria-busy', 'true') : null;
}
},
removeBodyAriaForLoader: function removeBodyAriaForLoader(vm) {
if (["FishTankLoaderSpinner", "FishTankLoaderContent"].indexOf(vm.$options.name) >= 0) {
document.body.getAttribute('aria-busy') === null ? null : document.body.setAttribute('aria-busy', 'false');
}
}
}
});
var boxMixin = {
props: {// tag:{
// default:'div',
// required:false,
// type:String,
// validator: function (value: IsBoxType) {
// return ["div", "span", "section", "article", "aside", "footer", "header", "details", "figcaption", "figure", "main", "nav", "summary", "time"].indexOf(value) !== -1
// },
// description:"Box semantic element"
// },
// as:{
// default:'div',
// required:false,
// type:String,
// validator: function (value: IsBoxType) {
// return ["div", "span", "section", "article", "aside", "footer", "header", "details", "figcaption", "figure", "main", "nav", "summary", "time"].indexOf(value) !== -1
// },
// description:"Box semantic element"
// },
// column: {
// type:Number,
// default:undefined,
// required:false,
// validator: function(value: Column){
// return (0<value && 13>value)
// },
// description:'Box grid columns; maps to xs-column grid',
// },
// // Column, /* 1 -12 */
// // // @Prop()
// xsColumn: {
// type:Number,
// default:null,
// required:false,
// validator: function(value: Column){
// return (0<value && 13>value)
// },
// description:'Box grid columns - XS Breakpoint',
// },
// // xsColumn, /* 1 -12 */
// // // @Prop()
// smColumn: {
// type:Number,
// default:null,
// required:false,
// validator: function(value: Column){
// return (0<value && 13>value)
// },
// description:'Box grid columns - SM Breakpoint',
// },
// // smColumn, /* 1 -12 */
// // // @Prop()
// mdColumn: {
// type:Number,
// default:null,
// required:false,
// validator: function(value: Column){
// return (0<value && 13>value)
// },
// description:'Box grid columns - MD Breakpoint',
// },
// // mdColumn, /* 1 -12 */
// // // @Prop()
// lgColumn: {
// type:Number,
// default:null,
// required:false,
// validator: function(value: Column){
// return (0<value && 13>value)
// },
// description:'Box grid columns - LG Breakpoint',
// },
// // lgColumn, /* 1 -12 */
// // // @Prop()
// xlColumn: {
// type:Number,
// default:null,
// required:false,
// validator: function(value: Column){
// return (0<value && 13>value)
// },
// description:'Box grid columns - LG Breakpoint',
// },
// // xlColumn, /* 1 -12 */
// // // @Prop()
},
computed: {
tagElement: function tagElement() {
return this.as === undefined ? this.tag : this.as;
}
}
};
var FishTankBaseButton =
/*#__PURE__*/
function (_Vue) {
_inherits(FishTankBaseButton, _Vue);
function FishTankBaseButton() {
_classCallCheck(this, FishTankBaseButton);
return _possibleConstructorReturn(this, _getPrototypeOf(FishTankBaseButton).apply(this, arguments));
}
_createClass(FishTankBaseButton, [{
key: "listeners",
// computed functions
get: function get() {
var _this = this;
return Object.assign({}, this.$listeners, {
click: function click($event) {
if (_this.disabled) return;
/**
* Mouse click event.
* @event click
* @type {Event}
*/
_this.$emit("click", $event);
}
});
}
}]);
return FishTankBaseButton;
}(vuePropertyDecorator.Vue);
tslib_1.__decorate([vuePropertyDecorator.Prop({
default: false,
type: Boolean
})], FishTankBaseButton.prototype, "disabled", void 0);
tslib_1.__decorate([vuePropertyDecorator.Prop({
default: false,
type: Boolean
})], FishTankBaseButton.prototype, "block", void 0);
tslib_1.__decorate([vuePropertyDecorator.Prop({
type: String,
default: "",
required: false
})], FishTankBaseButton.prototype, "name", void 0);
FishTankBaseButton = tslib_1.__decorate([vuePropertyDecorator.Component({
mixins: [a11y]
})], FishTankBaseButton);
var script$4 = FishTankBaseButton;
/* script */
var __vue_script__$4 = script$4;
/* template */
var __vue_render__$4 = function __vue_render__() {
var _obj;
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("button", _vm._g({
class: (_obj = {}, _obj[_vm.$style.button] = true, _obj[_vm.$style.buttonDisabled] = _vm.disabled, _obj[_vm.$style.buttonBlock] = _vm.block, _obj),
attrs: {
disabled: _vm.disabled,
type: "button"
}
}, _vm.$listeners), [_vm._t("default")], 2);
};
var __vue_staticRenderFns__$4 = [];
__vue_render__$4._withStripped = true;
/* style */
var __vue_inject_styles__$4 = function __vue_inject_styles__(inject) {
if (!inject) return;
inject("data-v-9324361c_0", {
source: "body.ft-user-is-tabbing-2mDK button:focus {\n -webkit-box-shadow: 0 0 0 2px #0D9DDB;\n box-shadow: 0 0 0 2px #0D9DDB;\n}\n.ft-baseButton-3d8c {\n font-size: 1rem;\n line-height: 1.5rem;\n font-family: \"OpenSans\", arial, sans-serif;\n font-weight: 600;\n padding: 6px 11px 10px 11px;\n height: 2.5rem;\n}\n.ft-baseButtonSm-3p0F {\n font-size: 0.75rem;\n line-height: 1rem;\n font-family: \"OpenSans\", arial, sans-serif;\n font-weight: 600;\n padding: 7px 11px 9px 11px;\n height: 2.5rem;\n}\n.ft-button-2Pla {\n font-size: 1rem;\n line-height: 1.5rem;\n font-family: \"OpenSans\", arial, sans-serif;\n font-weight: 600;\n padding: 6px 11px 10px 11px;\n height: 2.5rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border-radius: 2px;\n border-width: 1px;\n border-style: solid;\n outline: none;\n}\n.ft-button-2Pla:active, .ft-button-2Pla:hover {\n cursor: pointer;\n}\n.ft-button-2Pla:active:disabled, .ft-button-2Pla:hover:disabled {\n cursor: default;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.ft-button-2Pla:active {\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.ft-buttonBlock-311V {\n display: block;\n width: 100%;\n}\n",
map: undefined,
media: undefined
});
Object.defineProperty(this, "$style", {
value: {
"user-is-tabbing": "ft-user-is-tabbing-2mDK",
"baseButton": "ft-baseButton-3d8c",
"baseButtonSm": "ft-baseButtonSm-3p0F",
"button": "ft-button-2Pla",
"buttonBlock": "ft-buttonBlock-311V"
}
});
};
/* scoped */
var __vue_scope_id__$4 = undefined;
/* module identifier */
var __vue_module_identifier__$4 = undefined;
/* functional template */
var __vue_is_functional_template__$4 = false;
/* style inject SSR */
var FishTankBaseButton$1 = __vue_normalize__({
render: __vue_render__$4,
staticRenderFns: __vue_staticRenderFns__$4
}, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, __vue_create_injector__, undefined);
/**
* FishTankButtonPrimary
* @deprecated
* This component is being deprecated in favor of FishTankButton.
* It will be removed from the library in October 2019.
* FishTankButton offers a more standard and consistant API, and better code quality.
* Please begin using FishTankButton to avoid any breaking changes.
*/
var script$5 = Vue.extend({
name: "FishTankButtonPrimary",
components: {
FishTankBaseButton: FishTankBaseButton$1
},
mounted: function mounted() {
// eslint-disable-next-line no-console
console.warn('FishTankButtonPrimary is being deprecated in favor of FishTankButton. It will be removed from the library in October 2019. Please migrate to FishTankButton.');
}
});
/* script */
var __vue_script__$5 = script$5;
/* template */
var __vue_render__$5 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("fish-tank-base-button", _vm._g(_vm._b({
staticClass: "button--primary"
}, "fish-tank-base-button", _vm.$attrs, false), _vm.$listeners), [_vm._t("default")], 2);
};
var __vue_staticRenderFns__$5 = [];
__vue_render__$5._withStripped = true;
/* style */
var __vue_inject_styles__$5 = function __vue_inject_styles__(inject) {
if (!inject) return;
inject("data-v-2b39c105_0", {
source: ".button--primary {\n background-color: #3DA774;\n border-color: #30855C;\n color: #FFFFFF;\n -webkit-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 8px 8px -8px rgba(61, 167, 116, 0.5), 0 10px 15px -8px rgba(0, 0, 0, 0.2);\n box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 8px 8px -8px rgba(61, 167, 116, 0.5), 0 10px 15px -8px rgba(0, 0, 0, 0.2);\n}\n.button--primary:disabled {\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.button--primary:hover {\n -webkit-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 8px 8px -8px rgba(61, 167, 116, 0.6), 0 10px 15px -8px rgba(0, 0, 0, 0.3);\n box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 8px 8px -8px rgba(61, 167, 116, 0.6), 0 10px 15px -8px rgba(0, 0, 0, 0.3);\n}\n.button--primary:hover {\n background-color: #49B88B;\n}\n.button--primary:active {\n background-color: #399E6E;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.button--primary:disabled {\n opacity: 0.4;\n}\n.button--primary:disabled:hover {\n background-color: #3DA774;\n}\n",
map: undefined,
media: undefined
});
};
/* scoped */
var __vue_scope_id__$5 = undefined;
/* module identifier */
var __vue_module_identifier__$5 = undefined;
/* functional template */
var __vue_is_functional_template__$5 = false;
/* style inject SSR */
var FishTankButtonPrimary = __vue_normalize__({
render: __vue_render__$5,
staticRenderFns: __vue_staticRenderFns__$5
}, __vue_inject_styles__$5, __vue_script__$5, __vue_scope_id__$5, __vue_is_functional_template__$5, __vue_module_identifier__$5, __vue_create_injector__, undefined);
/**
* FishTankButtonSecondary
* @deprecated
* This component is being deprecated in favor of FishTankButton.
* It will be removed from the library in October 2019.
* FishTankButton offers a more standard and consistant API, and better code quality.
* Please begin using FishTankButton to avoid any breaking changes.
*/
var script$6 = Vue.extend({
name: "FishTankButtonSecondary",
components: {
FishTankBaseButton: FishTankBaseButton$1
},
mounted: function mounted() {
// eslint-disable-next-line no-console
console.warn('FishTankButtonSecondary is being deprecated in favor of FishTankButton. It will be removed from the library in October 2019. Please migrate to FishTankButton.');
}
});
/* script */
var __vue_script__$6 = script$6;
/* template */
var __vue_render__$6 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("fish-tank-base-button", _vm._g(_vm._b({
staticClass: "button--secondary"
}, "fish-tank-base-button", _vm.$attrs, false), _vm.$listeners), [_vm._t("default")], 2);
};
var __vue_staticRenderFns__$6 = [];
__vue_render__$6._withStripped = true;
/* style */
var __vue_inject_styles__$6 = function __vue_inject_styles__(inject) {
if (!inject) return;
inject("data-v-1c280ed4_0", {
source: ".button--secondary {\n background-color: #EDF2F5;\n border-color: #C5CACD;\n color: #505558;\n font-weight: 400;\n -webkit-box-shadow: inset 0 -1px 0 0px rgba(0, 0, 0, 0.08), inset 0 1px 0 0px rgba(255, 255, 255, 0.5), 0 3px 1px -2px rgba(237, 242, 245, 0.5), 0 4px 3px -2px rgba(0, 0, 0, 0.15);\n box-shadow: inset 0 -1px 0 0px rgba(0, 0, 0, 0.08), inset 0 1px 0 0px rgba(255, 255, 255, 0.5), 0 3px 1px -2px rgba(237, 242, 245, 0.5), 0 4px 3px -2px rgba(0, 0, 0, 0.15);\n}\n.button--secondary:hover {\n background-color: #F6F8FA;\n color: #292E31;\n -webkit-box-shadow: inset 0 -1px 0 0px rgba(0, 0, 0, 0.08), inset 0 1px 0 0px rgba(255, 255, 255, 0.5), 0 3px 1px -2px rgba(237, 242, 245, 0.6), 0 4px 3px -2px rgba(0, 0, 0, 0.2);\n box-shadow: inset 0 -1px 0 0px rgba(0, 0, 0, 0.08), inset 0 1px 0 0px rgba(255, 255, 255, 0.5), 0 3px 1px -2px rgba(237, 242, 245, 0.6), 0 4px 3px -2px rgba(0, 0, 0, 0.2);\n}\n.button--secondary:active {\n background-color: #E0E5E8;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.button--secondary:disabled {\n color: #C5CACD;\n border-color: #C5CACD;\n background-color: #EDF2F5;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.button--secondary:disabled:hover {\n background-color: #EDF2F5;\n}\n",
map: undefined,
media: undefined
});
};
/* scoped */
var __vue_scope_id__$6 = undefined;
/* module identifier */
var __vue_module_identifier__$6 = undefined;
/* functional template */
var __vue_is_functional_template__$6 = false;
/* style inject SSR */
var FishTankButtonSecondary = __vue_normalize__({
render: __vue_render__$6,
staticRenderFns: __vue_staticRenderFns__$6
}, __vue_inject_styles__$6, __vue_script__$6, __vue_scope_id__$6, __vue_is_functional_template__$6, __vue_module_identifier__$6, __vue_create_injector__, undefined);
/**
* FishTankButtonDestructive
* @deprecated
* This component is being deprecated in favor of FishTankButton.
* It will be removed from the library in October 2019.
* FishTankButton offers a more standard and consistant API, and better code quality.
* Please begin using FishTankButton to avoid any breaking changes.
*/
var script$7 = Vue.extend({
name: "FishTankButtonDestructive",
introduction: "Destructive Button",
components: {
FishTankBaseButton: FishTankBaseButton$1
},
mounted: function mounted() {
// eslint-disable-next-line no-console
console.warn('FishTankButtonDestructive is being deprecated in favor of FishTankButton. It will be removed from the library in October 2019. Please migrate to FishTankButton.');
}
});
/* script */
var __vue_script__$7 = script$7;
/* template */
var __vue_render__$7 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("fish-tank-base-button", _vm._g(_vm._b({
staticClass: "button--destructive"
}, "fish-tank-base-button", _vm.$attrs, false), _vm.$listeners), [_vm._t("default")], 2);
};
var __vue_staticRenderFns__$7 = [];
__vue_render__$7._withStripped = true;
/* style */
var __vue_inject_styles__$7 = function __vue_inject_styles__(inject) {
if (!inject) return;
inject("data-v-494e71c5_0", {
source: ".button--destructive {\n background-color: #E1483E;\n border-color: #B43931;\n color: #FFFFFF;\n -webkit-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 8px 8px -8px rgba(225, 72, 62, 0.5), 0 10px 15px -8px rgba(0, 0, 0, 0.2);\n box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 8px 8px -8px rgba(225, 72, 62, 0.5), 0 10px 15px -8px rgba(0, 0, 0, 0.2);\n}\n.button--destructive:disabled {\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.button--destructive:hover {\n -webkit-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 8px 8px -8px rgba(225, 72, 62, 0.6), 0 10px 15px -8px rgba(0, 0, 0, 0.3);\n box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 8px 8px -8px rgba(225, 72, 62, 0.6), 0 10px 15px -8px rgba(0, 0, 0, 0.3);\n}\n.button--destructive:hover {\n background-color: #E7564A;\n}\n.button--destructive:active {\n background-color: #D5443A;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.button--destructive:disabled {\n opacity: 0.4;\n}\n.button--destructive:disabled:hover {\n background-color: #E1483E;\n}\n",
map: undefined,
media: undefined
});
};
/* scoped */
var __vue_scope_id__$7 = undefined;
/* module identifier */
var __vue_module_identifier__$7 = undefined;
/* functional template */
var __vue_is_functional_template__$7 = false;
/* style inject SSR */
var FishTankButtonDestructive = __vue_normalize__({
render: __vue_render__$7,
staticRenderFns: __vue_staticRenderFns__$7
}, __vue_inject_styles__$7, __vue_script__$7, __vue_scope_id__$7, __vue_is_functional_template__$7, __vue_module_identifier__$7, __vue_create_injector__, undefined);
/**
* FishTankButtonSecondary
* @deprecated
* This component is being deprecated in favor of FishTankButton.
* It will be removed from the library in October 2019.
* FishTankButton offers a more standard and consistant API, and better code quality.
* Please begin using FishTankButton to avoid any breaking changes.
*/
var script$8 = Vue.extend({
name: "FishTankButtonWhite",
components: {
FishTankBaseButton: FishTankBaseButton$1
},
mounted: function mounted() {
// eslint-disable-next-line no-console
console.warn('FishTankButtonWhite is being deprecated in favor of FishTankButton. It will be removed from the library in October 2019. Please migrate to FishTankButton.');
}
});
/* script */
var __vue_script__$8 = script$8;
/* template */
var __vue_render__$8 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("fish-tank-base-button", _vm._g(_vm._b({
staticClass: "button--white"
}, "fish-tank-base-button", _vm.$attrs, false), _vm.$listeners), [_vm._t("default")], 2);
};
var __vue_staticRenderFns__$8 = [];
__vue_render__$8._withStripped = true;
/* style */
var __vue_inject_styles__$8 = function __vue_inject_styles__(inject) {
if (!inject) return;
inject("data-v-02f080fc_0", {
source: ".button--white {\n background-color: #FFFFFF;\n border-color: #EDF2F5;\n color: #777C7F;\n -webkit-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 8px 8px -8px rgba(255, 255, 255, 0.5), 0 10px 15px -8px rgba(0, 0, 0, 0.2);\n box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 8px 8px -8px rgba(255, 255, 255, 0.5), 0 10px 15px -8px rgba(0, 0, 0, 0.2);\n}\n.button--white:disabled {\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.button--white:hover {\n -webkit-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 8px 8px -8px rgba(255, 255, 255, 0.6), 0 10px 15px -8px rgba(0, 0, 0, 0.3);\n box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 8px 8px -8px rgba(255, 255, 255, 0.6), 0 10px 15px -8px rgba(0, 0, 0, 0.3);\n}\n.button--white:hover {\n color: #292E31;\n}\n.button--white:active {\n background-color: #EDF2F5;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.button--white:disabled {\n opacity: 0.4;\n}\n.button--white:disabled:hover {\n background-color: #C5CACD;\n color: #C5CACD;\n}\n",
map: undefined,
media: undefined
});
};
/* scoped */
var __vue_scope_id__$8 = undefined;
/* module identifier */
var __vue_module_identifier__$8 = undefined;
/* functional template */
var __vue_is_functional_template__$8 = false;
/* style inject SSR */
var FishTankButtonWhite = __vue_normalize__({
render: __vue_render__$8,
staticRenderFns: __vue_staticRenderFns__$8
}, __vue_inject_styles__$8, __vue_script__$8, __vue_scope_id__$8, __vue_is_functional_template__$8, __vue_module_identifier__$8, __vue_create_injector__, undefined);
/**
* FishTankButtonOutline
* @deprecated
* This component is being deprecated in favor of FishTankButton.
* It will be removed from the library in October 2019.
* FishTankButton offers a more standard and consistant API, and better code quality.
* Please begin using FishTankButton to avoid any breaking changes.
*/
var script$9 = Vue.extend({
name: "FishTankButtonOutline",
components: {
FishTankBaseButton: FishTankBaseButton$1
},
mounted: function mounted() {
// eslint-disable-next-line no-console
console.warn('FishTankButtonOutline is being deprecated in favor of FishTankButton. Please migrate to FishTankButton.');
}
});
/* script */
var __vue_script__$9 = script$9;
/* template */
var __vue_render__$9 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("fish-tank-base-button", _vm._g(_vm._b({
staticClass: "button--outline"
}, "fish-tank-base-button", _vm.$attrs, false), _vm.$listeners), [_vm._t("default")], 2);
};
var __vue_staticRenderFns__$9 = [];
__vue_render__$9._withStripped = true;
/* style */
var __vue_inject_styles__$9 = function __vue_inject_styles__(inject) {
if (!inject) return;
inject("data-v-6f0b5eb8_0", {
source: ".button--outline {\n background-color: transparent;\n border-color: #777C7F;\n border-width: 2px;\n color: #777C7F;\n}\n.button--outline:hover {\n color: #FFFFFF;\n background-color: #777C7F;\n}\n.button--outline:disabled {\n color: #C5CACD;\n border-color: #C5CACD;\n}\n.button--outline:disabled:hover {\n background-color: transparent;\n}\n.button--outline:active {\n background-color: #505558;\n border-color: #505558;\n}\n",
map: undefined,
media: undefined
});
};
/* scoped */
var __vue_scope_id__$9 = undefined;
/* module identifier */
var __vue_module_identifier__$9 = undefined;
/* functional template */
var __vue_is_functional_template__$9 = false;
/* style inject SSR */
var FishTankButtonOutline = __vue_normalize__({
render: __vue_render__$9,
staticRenderFns: __vue_staticRenderFns__$9
}, __vue_inject_styles__$9, __vue_script__$9, __vue_scope_id__$9, __vue_is_functional_template__$9, __vue_module_identifier__$9, __vue_create_injector__, undefined);
var script$10 = Vue.extend({
name: "FishTankButtonGradient",
components: {
FishTankBaseButton: FishTankBaseButton$1
},
props: {
gradientStart: {
type: String,
required: true,
default: "#000000",
description: "Start Color of Gradient; String(Hex color, or valid CSS color)"
},
gradientEnd: {
type: String,
required: true,
default: "#000000",
description: "End Color of Gradient; String(Hex color, or valid CSS color)"
},
colorDirection: {
type: String,
required: false,
default: "to right",
description: "Horizontal Direction of Gradient; String(\"to right\" or \"to left\")"
},
block: {
type: Boolean,
default: false
}
},
computed: {
returnGradientStyle: function returnGradientStyle() {
return "background-image: linear-gradient(".concat(this.colorDirection, ", ").concat(this.gradientStart, ", ").concat(this.gradientEnd, " );");
}
}
});
/* script */
var __vue_script__$10 = script$10;
/* template */
var __vue_render__$10 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("a", {
staticClass: "button--wrapper",
class: {
"button--block": _vm.block
},
style: _vm.returnGradientStyle
}, [_c("fish-tank-base-button", _vm._g(_vm._b({
staticClass: "button--gradient",
attrs: {
block: _vm.block
}
}, "fish-tank-base-button", _vm.$attrs, false), _vm.$listeners), [_vm._t("default")], 2)], 1);
};
var __vue_staticRenderFns__$10 = [];
__vue_render__$10._withStripped = true;
/* style */
var __vue_inject_styles__$10 = function __vue_inject_styles__(inject) {
if (!inject) return;
inject("data-v-8fe05718_0", {
source: ".button--block {\n display: block;\n width: 100%;\n}\n.button--wrapper {\n padding: 2px;\n border-radius: 4px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: inline-block;\n}\n.button--gradient {\n border: none;\n background-color: #FFFFFF;\n color: #777C7F;\n}\n.button--gradient:hover {\n background: transparent;\n color: #FFFFFF;\n}\n.button--gradient:disabled {\n opacity: 0.4;\n}\n.button--gradient:disabled:hover {\n background-color: #777C7F;\n}\n.button--gradient:active {\n background-color: rgba(0, 0, 0, 0.3);\n border-color: rgba(0, 0, 0, 0.3);\n}\n",
map: undefined,
media: undefined
});
};
/* scoped */
var __vue_scope_id__$10 = undefined;
/* module identifier */
var __vue_module_identifier__$10 = undefined;
/* functional template */
var __vue_is_functional_template__$10 = false;
/* style inject SSR */
var FishTankButtonGradient = __vue_normalize__({
render: __vue_render__$10,
staticRenderFns: __vue_staticRenderFns__$10
}, __vue_inject_styles__$10, __vue_script__$10, __vue_scope_id__$10, __vue_is_functional_template__$10, __vue_module_identifier__$10, __vue_create_injector__, undefined);
var isArray$1 = isArray;
function _arrayWithoutHoles(arr) {
if (isArray$1(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
arr2[i] = arr[i];
}
return arr2;
}
}
var from$1 = from;
var isIterable$1 = isIterable;
function _iterableToArray(iter) {
if (isIterable$1(Object(iter)) || Object.prototype.toString.call(iter) === "[object Arguments]") return from$1(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
function identity() {
return {
className: new Set(),
inlineStyle: {}
};
}
function fromClassName() {
for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
classNames[_key] = arguments[_key];
}
return {
className: new Set(classNames),
inlineStyle: {}
};
}
function fromInlineStyle(inlineStyle) {
return {
className: new Set(),
inlineStyle: inlineStyle
};
}
var mapClassName = function mapClassName(fn) {
return function (_ref) {
var className = _ref.className,
inlineStyle = _ref.inlineStyle;
return {
className: new Set(Array.from(className).map(fn)),
inlineStyle: inlineStyle
};
};
};
function concat(styles) {
return styles.reduce(function (prev, curr) {
return {
className: new Set([].concat(_toConsumableArray(Array.from(prev.className)), _toConsumableArray(Array.from(curr.className)))),
inlineStyle: Object.assign({}, prev.inlineStyle, curr.inlineStyle)
};
}, identity());
}
var toProps = function toProps(_ref2) {
var className = _ref2.className,
inlineStyle = _ref2.inlineStyle;
var props = {
className: '',
style: {}
};
if (className.size > 0) {
// Sorting here ensures that classNames are always stable, reducing diff
// churn. Box usually has a small number of properties so it's not a perf
// concern.
props.className = Array.from(className).sort().join(' ');
}
if (Object.keys(inlineStyle).length > 0) {
props.style = inlineStyle;
}
return props;
};
var arrayToProps = function arrayToProps(_ref3) {
var className = _ref3.className,
inlineStyle = _ref3.inlineStyle;
var props = {
className: [''],
style: {}
};
if (className.size > 0) {
// Sorting here ensures that classNames are always stable, reducing diff
// churn. Box usually has a small number of properties so it's not a perf
// concern.
props.className = Array.from(className).sort();
}
if (Object.keys(inlineStyle).length > 0) {
props.style = inlineStyle;
}
return props;
};
function mapping(map) {
return function (val) {
return _.has(map, val) ? fromClassName(map[val]) : identity();
};
} // Adds a classname when a property is present.
//
// <Box top />
//
function toggle() {
for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
classNames[_key] = arguments[_key];
}
return function (val) {
return val ? fromClassName.apply(void 0, classNames) : identity();
};
}
function range(scale) {
return function (val) {
return fromClassName("".concat(scale).concat(val < 0 ? "N".concat(Math.abs(val)) : val));
};
}
function rangeWithoutZero(scale) {
return function (val) {
return val === 0 ? identity() : range(scale)(val);
};
}
function bind(fn, scope) {
return function (val) {
return mapClassName(function (name) {
return scope[name];
})(fn(val));
};
}
var union = function union() {
for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
fns[_key2] = arguments[_key2];
}
return function (val) {
return concat(fns.map(function (fn) {
return fn(val);
}));
};
};
/**
*
* @param color passed to fishtank component
* @returns fishtankColorName
*/
function propToFishtankColorName(color) {
var _ref = [color[0], color.substring(1, color.length)],
prefix = _ref[0],
rest = _ref[1];
var colorClassName = "color".concat(prefix.toUpperCase()).concat(rest);
return colorClassName;
}
var fontSizes = ['headingLg', 'headingMd', 'headingSm', 'baseLg', 'baseMd', 'baseSm'];
var align = ['left', 'right', 'center', 'justify'];
var script$11 = Vue.extend({
/**
* @display A component that provides block and inline text. It embeds the font-family and font face CSS, without requiring exernal stylesheets.
*/
name: "FishTankText",
props: {
/**
* Text alignment
*/
align: {
type: String,
default: 'left',
validator: function validator(value) {
return align.indexOf(value) !== -1;
}
},
/**
* Text color, based on the limited palette for body text
*/
color: {
type: String,
validator: function validator(value) {
return propToFishtankColorName(value) in ftColorsObj;
},
default: 'black'
},
/**
* Text renders in an inline element (span); text is block level element by default
*/
inline: {
type: Boolean,
required: false,
default: false
},
/**
* Bold font weight
*/
bold: {
type: Boolean,
required: false,
default: false
},
/**
* Semi-bold font weight
*/
semiBold: {
type: Boolean,
required: false,
default: false
},
/**
* Text size
* `baseSM, baseMd, baseLg`
*/
size: {
type: String,
default: 'baseLg',
validator: function validator(value) {
return fontSizes.indexOf(value) !== -1;
}
},
/**
* Text Overflow
* ``breakword, normal`
*/
overflow: {
type: String,
default: 'breakWord',
validator: function validator(value) {
return ['breakWord', 'normal'].indexOf(value) !== -1;
}
},
/**
* Text, within a container of fixed size, overflows with ellipsis
*/
truncate: {
type: Boolean,
default: false
},
/**
* Text font style, either primary or accent
* `primary, accent`
*/
font: {
default: 'primary',
type: String,
validator: function validator(value) {
return ['primary', 'accent'].indexOf(value) !== -1;
}
},
/**
* Text renders as italic
*/
italic: {
default: false,
type: Boolean
},
/**
* Uppercase text
*/
uppercase: {
default: false,
required: false,
type: Boolean
}
},
computed: {
styles: function styles() {
var style = this.$style;
return style;
},
propMapping: function propMapping() {
var style = this.styles;
return {
color: this.colorMappingFunc,
inline: toggle(style.inline),
semiBold: toggle(style.fontWeightSemiBold),
bold: toggle(style.fontWeightBold),
italic: toggle(style.fontStyleItalic),
size: mapping({
headingLg: style.fontSizeHeadingLg,
headingMd: style.fontSizeHeadingMd,
headingSm: style.fontSizeHeadingSm,
baseLg: style.fontSizeBaseLg,
baseMd: style.fontSizeBaseMd,
baseSm: style.fontSizeBaseSm
}),
font: mapping({
primary: style.primary,
accent: style.accent
}),
align: mapping({
left: style.alignLeft,
right: style.alignRight,
center: style.alignCenter,
justify: style.alignJustify
}),
truncate: toggle(style.truncate),
overflow: mapping({
normal: style.normal,
breakWord: style.breakWord
}),
uppercase: toggle(style.uppercase)