@tsaibot/vue-typed
Version:
Typed components for VueJs
465 lines (416 loc) • 14.9 kB
JavaScript
;Object.defineProperty(exports,'__esModule',{value:true});function _interopDefault(e){return(e&&(typeof e==='object')&&'default'in e)?e['default']:e}var Vue=_interopDefault(require('vue'));function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _asyncToGenerator(fn) {
return function () {
var self = this,
args = arguments;
return new Promise(function (resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}var script = Vue.extend({
name: 'VueTyped',
// vue component name
props: {
timeTakes: {
type: Number,
validator: function validator(value) {
return value >= 0.0;
},
default: 2000
},
text: {
type: [String, Array],
required: true,
validator: function validator(value) {
var result = value != undefined && value != null && value.length > 0;
if (result && Array.isArray(value)) {
value.forEach(function (v) {
if (typeof v != 'string') {
result = false;
}
});
}
return result;
}
},
tag: {
type: String,
default: 'span',
validator: function validator(value) {
return ['p', 'h1', 'h2', 'h3', 'h4', 'span'].includes(value);
}
}
},
data: function data() {
return {
isDone: false,
arrayIndex: 0,
bindingText: ''
};
},
methods: {
writeInit: function writeInit() {
var _this = this;
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
if (!(typeof _this.text === "string")) {
_context2.next = 8;
break;
}
_context2.next = 3;
return _this.writeText(_this.text);
case 3:
_context2.next = 5;
return _this.delay(_this.timeTakes);
case 5:
_this.isDone = true;
_context2.next = 9;
break;
case 8:
if (Array.isArray(_this.text)) {
_this.setIntervalImmediately( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return _this.managerArray();
case 2:
return _context.abrupt("return", _context.sent);
case 3:
case "end":
return _context.stop();
}
}
}, _callee);
})), _this.timeTakes * 1.4 * 2);
}
case 9:
case "end":
return _context2.stop();
}
}
}, _callee2);
}))();
},
writeText: function writeText(text) {
var _this2 = this;
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
var index, period, timer;
return regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
index = 0;
_this2.bindingText = '';
period = _this2.timeTakes / text.length;
timer = setInterval(function () {
if (index >= text.length - 1) {
clearInterval(timer);
}
index = _this2.appendText(text[index], index);
}, period);
case 4:
case "end":
return _context3.stop();
}
}
}, _callee3);
}))();
},
appendText: function appendText(char, index) {
this.bindingText += char;
index++;
return index;
},
eraseText: function eraseText(text) {
var _this3 = this;
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
var index, period, timer;
return regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
index = text.length;
_this3.bindingText = text;
period = _this3.timeTakes / text.length;
timer = setInterval(function () {
if (index <= 0) {
clearInterval(timer);
}
index = _this3.removeText(index);
}, period);
case 4:
case "end":
return _context4.stop();
}
}
}, _callee4);
}))();
},
removeText: function removeText(index) {
this.bindingText = this.bindingText.substring(0, index);
index--;
return index;
},
managerArray: function managerArray() {
var _this4 = this;
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
var text;
return regeneratorRuntime.wrap(function _callee5$(_context5) {
while (1) {
switch (_context5.prev = _context5.next) {
case 0:
text = _this4.text;
_context5.next = 3;
return _this4.writeText(text[_this4.arrayIndex]);
case 3:
_context5.next = 5;
return _this4.delay(_this4.timeTakes * 1.5);
case 5:
_context5.next = 7;
return _this4.eraseText(text[_this4.arrayIndex]);
case 7:
if (_this4.arrayIndex >= _this4.text.length - 1) {
_this4.arrayIndex = 0;
} else {
_this4.arrayIndex++;
}
return _context5.abrupt("return");
case 9:
case "end":
return _context5.stop();
}
}
}, _callee5);
}))();
},
delay: function delay(ms) {
return new Promise(function (resolve) {
return setTimeout(resolve, ms);
});
},
setIntervalImmediately: function setIntervalImmediately(func, interval) {
func();
return setInterval(func, interval);
}
},
mounted: function mounted() {
var _this5 = this;
return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
return regeneratorRuntime.wrap(function _callee6$(_context6) {
while (1) {
switch (_context6.prev = _context6.next) {
case 0:
_context6.next = 2;
return _this5.writeInit();
case 2:
case "end":
return _context6.stop();
}
}
}, _callee6);
}))();
}
});function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
const options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
let hook;
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
}
else if (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
const originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
const existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}function createInjectorSSR(context) {
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
if (!context)
return () => { };
if (!('styles' in context)) {
context._styles = context._styles || {};
Object.defineProperty(context, 'styles', {
enumerable: true,
get: () => context._renderStyles(context._styles)
});
context._renderStyles = context._renderStyles || renderStyles;
}
return (id, style) => addStyle(id, style, context);
}
function addStyle(id, css, context) {
const group = css.media || 'default' ;
const style = context._styles[group] || (context._styles[group] = { ids: [], css: '' });
if (!style.ids.includes(id)) {
style.media = css.media;
style.ids.push(id);
let code = css.source;
style.css += code + '\n';
}
}
function renderStyles(styles) {
let css = '';
for (const key in styles) {
const style = styles[key];
css +=
'<style data-vue-ssr-id="' +
Array.from(style.ids).join(' ') +
'"' +
(style.media ? ' media="' + style.media + '"' : '') +
'>' +
style.css +
'</style>';
}
return css;
}/* 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(_vm.tag, {
tag: "component"
}, [_c('span', {
staticClass: "vue-typed"
}, [_vm._v(_vm._s(_vm.bindingText))]), _vm._v(" "), !_vm.isDone ? _c('span', {
staticClass: "caret"
}) : _vm._e()]);
};
var __vue_staticRenderFns__ = [];
/* style */
var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
if (!inject) return;
inject("data-v-e5794ea6_0", {
source: ".caret[data-v-e5794ea6]{display:inline-block;vertical-align:baseline;width:1px;background:#000;margin-left:3px;position:relative;top:2px;-webkit-animation:caret-animation-data-v-e5794ea6 .5s linear infinite;animation:caret-animation-data-v-e5794ea6 .5s linear infinite}.caret[data-v-e5794ea6]:empty:before{content:\"\\200b\"}@keyframes caret-animation-data-v-e5794ea6{0%{opacity:1}30%{opacity:1}40%{opacity:0}90%{opacity:0}100%{opacity:1}}",
map: undefined,
media: undefined
});
};
/* scoped */
var __vue_scope_id__ = "data-v-e5794ea6";
/* module identifier */
var __vue_module_identifier__ = "data-v-e5794ea6";
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject shadow dom */
var __vue_component__ = /*#__PURE__*/normalizeComponent({
render: __vue_render__,
staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, createInjectorSSR, undefined);// Import vue component
// eslint-disable-next-line @typescript-eslint/no-explicit-any
// install function executed by Vue.use()
var install = function installVueTyped(Vue) {
if (install.installed) return;
install.installed = true;
Vue.component('VueTyped', __vue_component__);
}; // Create module definition for Vue.use()
var plugin = {
install: install
}; // To auto-install on non-es builds, when vue is found
// eslint-disable-next-line no-redeclare
/* global window, global */
{
var GlobalVue = null;
if (typeof window !== 'undefined') {
GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
}
} // Inject install function into component - allows component
// to be registered via Vue.use() as well as Vue.component()
// eslint-disable-next-line @typescript-eslint/no-explicit-any
__vue_component__.install = install; // Export component by default
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
// export const RollupDemoDirective = component;
exports.default=__vue_component__;