├── .github
└── FUNDING.yml
├── LICENSE
├── Readme.markdown
├── dist
├── .ignore
├── dative.cjs.js
├── dative.cjs.js.map
├── dative.cjs.min.js
├── dative.cjs.min.js.map
├── dative.esm.js
├── dative.esm.js.map
├── dative.esm.min.js
├── dative.esm.min.js.map
├── dative.js
├── dative.js.map
├── dative.min.js
├── dative.min.js.map
├── dative.system.js
├── dative.system.js.map
├── dative.system.min.js
├── dative.system.min.js.map
├── dative.umd.js
├── dative.umd.js.map
├── dative.umd.min.js
└── dative.umd.min.js.map
├── index.js
├── index.mjs
├── package.json
├── rollup.config.js
├── src
└── index.js
└── types
├── animation
└── index.d.ts
└── index.d.ts
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: Tobithedev
2 | patreon: Tobithedev360
3 | open_collective: dativeJs
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Tobi
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/Readme.markdown:
--------------------------------------------------------------------------------
1 | # Dative v2-alpha
2 |
3 |
4 | usuage
5 |
6 | ```bash
7 | $ npm i dativejs
8 | ```
9 |
10 | ```js
11 | import Dative from 'dativejs'
12 |
13 |
14 | var app = new Dative({
15 | el: '#app',
16 | template: `
17 |
Holla
18 | `
19 | })
20 |
21 | ```
--------------------------------------------------------------------------------
/dist/.ignore:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/dist/dative.cjs.min.js:
--------------------------------------------------------------------------------
1 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=void 0!==document?document:{},t={slient:!!!e,mode:"development",noop:function(){},CurrentInstance:null};function n(e,...n){!1===t.slient&&console.error("[dative Warn]: ",e,...n)}function o(e){const t=`${e}`.charCodeAt(0);return 36===t||95===t}function r(e){let t,n,o={},r=o.toString,i=o.hasOwnProperty,a=i.toString,s=a.call(Object);return!(!e||"[object Object]"!==r.call(e))&&(t=Object.getPrototypeOf(e),!t||(n=i.call(t,"constructor")&&t.constructor,"function"==typeof n&&a.call(n)===s))}let i=0;class a{constructor(){this.id=i++,this.subs={}}addSub(e){this.subs[e.uid]||(this.subs[e.uid]=e)}notify(){for(let e in this.subs)this.subs[e].update()}}function s(e,t){let n=e[t],o=new a;return Object.defineProperty(e,t,{get:()=>(a.target&&o.addSub(a.target),n),set(e){n=e,o.notify()}}),e}function c(e){if("object"==function(e){let t={},n=t.toString.call(e);return null==e?e+"":("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" ").forEach((e=>{t[`[object ${e}]`]=e.toLowerCase()})),"object"==typeof e||"function"==typeof e?t[n]||"object":typeof e)}(e)){var t;for(let n in e)t=s(e,n);return t}}function l(e){return e.replace(/javascript:/gi,"").replace(/[^\w-_. ]/gi,(function(e){return`&#${e.charCodeAt(0)};`}))}a.target=null;var u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};function p(e){var t={},n=t.toString.call(e);return null==e?""+e:("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" ").forEach((function(e){return t["[object "+e+"]"]=e.toLowerCase()})),"object"===(void 0===e?"undefined":u(e))||"function"==typeof e?t[n]||"object":void 0===e?"undefined":u(e))}function f(e,t){return`if (${t}) {`}function d(e,t){return`} else if (${t}) {`}function h(e,t){return"} else {"}function y(e,t){return`with (${t}) {`}function v(e,t){return`_c(console[console.debug ? 'debug' : 'log']({${t}}));\n debugger`}function b(e,t,n){return`/** ${n} **/`}function m(e,t){return`let ${t};`}function g(e){return"function"==typeof e}var $="undefined"!=typeof window;var j=/`/g;function w(e,t,o){e=e.trim();var r,i=/{{(.+?)}}/g,a=/(^( )?(var|let|const|await|if|for|else|{|}|#each|\/each|#if|:else|:else if|\/if|#with|\/with|debugger|@debug|\$:|;))(.*)?/g,s="with(obj) { var r=[]; ",c=0,l="";s+="var _c = (msg)=>{ return r.push(msg)}; ";for(var u=function(e,t){return s+=t?e.match(a)?e.replace(/#each ((?:.|)+)/g,((e,t)=>{t.includes("as")||n("Expected keyword 'as' But got ' '");var o=(t=t.replace(/as/,"of")).split("of");return`for (const ${o[1].includes(",")?function(e){if(e[1].startsWith("{")&&e[1].split(" ")&&e[1].endsWith("}")){var t=e[1].split(" ");for(const{}in t){var n=t.join(",");return`[${e[0]}, ${n}]`}}return`[${e[0]},${e[1]}]`}(o[1].split(",")):(o[1].startsWith("{")&&o[1].endsWith("}"),o[1])} of ${!o[1].startsWith("{")&&o[1].includes(",")?`Object.entries(${o[0].trim()})`:o[0]}) {`})).replace(/\/each/g,"\n}").replace(/#if ((?:.|)+)/g,f).replace(/:else if ((?:.|)+)/g,d).replace(/:else/g,h).replace(/\/if/g,"}").replace(/#with ((?:.|)+)/g,y).replace(/\/with/g,(e=>"}")).replace(/@debug\s+?((?:.|)+)/g,v).replace(/\$:\s+((?:.|)+)/g,m)+"\n":"_c("+e.replace(/!(--)?((?:.|)+)?/g,b)+");\n":""!=e?"_c(`"+e.replace(j,"\\`").replace(/\${/g,"$\\{")+"`);":"",u};r=i.exec(e);)u(e.slice(c,r.index))(r[1],!0),c=r.index+r[0].length;u(e.substr(c,e.length-c)),s=(s+'return r.join(""); }').replace(/[\t]/g,"").trim();try{l=new Function("obj",s).apply(t,[t])}catch(e){console.error("Compiler "+e.name+": "+e.message+" at \n"+function(e,t=0,n=e.length){let o=e.split(/(\r?\n)/);const r=o.filter(((e,t)=>t%2==1));o=o.filter(((e,t)=>t%2==0));let i=0;const a=[];for(let e=0;e=t){for(let s=e-2;s<=e+2||n>i;s++){if(s<0||s>=o.length)continue;const c=s+1;a.push(`${c}${" ".repeat(Math.max(3-String(c).length,0))}| ${o[s]}`);const l=o[s].length,u=r[s]&&r[s].length||0;if(s===e){const e=t-(i-(l+u)),o=Math.max(1,n>i?l-e:n-t);a.push(" | "+" ".repeat(e)+"^".repeat(o))}else if(s>e){if(n>i){const e=Math.max(Math.min(n-i,l),1);a.push(" | "+"^".repeat(e))}i+=l+u}}break}return a.join("\n")}(t.template))}return l}function A(e){return e.childNodes&&e.childNodes.length?null:e.textContent}function x(e,t){return e.nodeType!==t.nodeType||e.tagName!==t.tagName||e.id!==t.id||e.src!==t.src}function O(e,t,n=[]){let o=t.childNodes,r=e.childNodes;r.forEach((function(r,i){if(e.querySelectorAll("template")){var a=e.querySelectorAll("template");for(var s of a){const e=document.createElement("div");e.innerHTML=s.innerHTML,s.replaceWith(e)}}if(!o[i])return void t.append(r.cloneNode(!0));if(x(r,o[i])){let e=function(e,t,n){return Array.from(t).slice(n+1).find((function(t){return!x(e,t)}))}(r,o,i);if(!e)return void o[i].before(r.cloneNode(!0));o[i].before(e)}if(n.filter((function(e){return![3,8].includes(r.nodeType)&&r.matches(e)})).length>0)return;let c=A(r);if(c&&c!==A(o[i])&&(o[i].textContent=c),o[i].childNodes.length>0&&r.childNodes.length<1)o[i].innerHTML="";else{if(o[i].childNodes.length<1&&r.childNodes.length>0){let e=document.createDocumentFragment();return O(r,e,n),void o[i].appendChild(e)}r.childNodes.length>0&&O(r,o[i],n)}})),function(e,t){let n=e.length-t.length;if(!(n<1))for(;n>0;n--)e[e.length-1].remove()}(o,r)}var S=function(e,t,o){if(e instanceof Element){var r=(i=t,(new DOMParser).parseFromString(i,"text/html").body);if(r.childElementCount>1)return void n("Multiple root nodes returned from template. Template","should return a single root node. \n",r.innerHTML,"\n"+"^".repeat(r.innerHTML.length/r.lastChild.textContent.length-2));if(r.querySelector("script"))return void n("`);
651 | return;
652 | }
653 | return el && el.innerHTML;
654 | }
655 |
656 | function s4() {
657 | return Math.floor((1 + Math.random()) * 0x10000)
658 | .toString(16)
659 | .substring(1);
660 | }
661 | function uuid_() {
662 | return (
663 | s4() +
664 | s4() +
665 | "-" +
666 | s4() +
667 | "-" +
668 | s4() +
669 | "-" +
670 | s4() +
671 | "-" +
672 | s4() +
673 | s4() +
674 | s4()
675 | );
676 | }
677 | /**
678 | * Prefix for directives
679 | */
680 | function prefix(subject = "") {
681 | return "dv-" + subject;
682 | }
683 | function valps(val, data) {
684 | var sub = val.split(".");
685 | if (sub.length > 1) {
686 | var temp = data;
687 | sub.forEach((item) => {
688 | if (!temp[item]) return;
689 | temp = temp[item];
690 | });
691 | return temp;
692 | } else if (!data[val]) return;
693 | return data[val];
694 | }
695 |
696 | /**
697 | * @param {Dative} Dative
698 | */
699 | function initRender(Dative) {
700 | /**
701 | * @param {string|object} obj new object for the data
702 | * @param {any} data new object for the data
703 | **/
704 | Dative.prototype.set = function set(obj, data) {
705 | var $this = this;
706 | if (typeof obj !== "object") {
707 | $this[obj] = data;
708 | $this.render();
709 | } else {
710 | for (var key in obj) {
711 | if (obj.hasOwnProperty(key)) {
712 | $this[key] = obj[key];
713 | $this.render();
714 | }
715 | }
716 | }
717 | };
718 | Dative.prototype.get = function get(value = "") {
719 | return value === "" ? this : valps(value, this);
720 | };
721 | function kebabToCamel(str, options = { prefix: "", ignorePrefix: "" }) {
722 | const { prefix, ignorePrefix } = options;
723 | let ignoredStr = str;
724 | if (
725 | ignorePrefix !== undefined &&
726 | ignorePrefix !== null &&
727 | ignorePrefix !== ""
728 | ) {
729 | ignoredStr = ignoredStr.replace(new RegExp(`^${ignorePrefix}-`), "");
730 | }
731 | const camelStr = ignoredStr
732 | .split("-")
733 | .filter((s) => s !== "")
734 | .reduce((r, s) => (r = r + `${s[0].toUpperCase()}${s.slice(1)}`));
735 | if (prefix !== undefined && prefix !== null && prefix !== "") {
736 | return `${prefix}${camelStr.replace(/^([a-z])/, (m, p) =>
737 | p.toUpperCase()
738 | )}`;
739 | }
740 | return camelStr;
741 | }
742 | /**
743 | *
744 | * @param {Element} target
745 | * @param {string} key
746 | * @param {Element} elem
747 | * @param {boolean} isDirective
748 | */
749 | var warnDuplicate$ = function (target, key, elem, isDirective = false) {
750 | target &&
751 | warn(
752 | `'${key}' is in ${elem} already.Do not duplicate ${
753 | isDirective ? "directives" : "attributes"
754 | }`
755 | );
756 | };
757 |
758 | /**
759 | *
760 | * @param {Array} polyps
761 | * @param {any} dv
762 | * @returns {void}
763 | */
764 | function renderPolyps(polyps, dv) {
765 | if (!polyps) return;
766 | polyps.forEach(function (component) {
767 | if (component.attached.includes(dv))
768 | return err(
769 | `"${dv.$el}" has attached nodes that it is also attached to, creating an infinite loop.`
770 | );
771 | if ("render" in component) component.render();
772 | });
773 | }
774 | /**
775 | * Credits: DativeAnimate
776 | * @link https://tobithedev.github.io/dative-animation
777 | * @param {HTMLElement|Element} el Element to be animated
778 | * @param {Number} duration duration for the animation
779 | * @param {Number} delay
780 | * @param {Boolean} once
781 | */
782 | function fadeIn(el, duration, delay = 0, once = true) {
783 | var op = 0;
784 | var animate = el.animate([{ opacity: op }, { display: "block" }], {
785 | duration,
786 | delay,
787 | easing: "linear",
788 | });
789 | var timer = setInterval(function () {
790 | if (op >= 1.0) {
791 | clearInterval(timer);
792 | if (once) {
793 | animate.pause();
794 | }
795 | }
796 | animate = el.animate([{ transition: "2s" }, { opacity: op }], {
797 | duration,
798 | delay,
799 | easing: "linear",
800 | });
801 | op = op + 0.1;
802 | if (once) {
803 | animate.cancel();
804 | }
805 | }, duration);
806 | }
807 |
808 | /**
809 | * Credits: DativeAnimate
810 | * @param {HTMLElement|Element} el Element to be animated
811 | * @param {Number} duration duration for the animation
812 | * @param {Number} delay
813 | * @param {Boolean} once
814 | */
815 | function bounce(el, duration, delay = 0, once = false) {
816 | var animate = el.animate(
817 | [
818 | {
819 | animationTimingFunction: "cubic-bezier(0.8,0,1,1)",
820 | transform: "translateY(-25%)",
821 | },
822 | {
823 | animationTimingFunction: "cubic-bezier(0,0,0.2,1)",
824 | transform: "translateY(0)",
825 | },
826 | ],
827 | {
828 | duration,
829 | delay,
830 | easing: "linear",
831 | iterations: Infinity,
832 | }
833 | );
834 | if (once === true) {
835 | animate.cancel();
836 | }
837 | }
838 | /**
839 | * returns the template to the dom
840 | * @returns {Element}
841 | **/
842 | Dative.prototype.render = function () {
843 | var $app = this;
844 | $app.kebabToCamel = kebabToCamel;
845 | let template =
846 | type(this.options.template) === "function"
847 | ? this.options.template()
848 | : this.options.template || "";
849 | if (typeof template === "string") {
850 | if (template[0] === "#") {
851 | template = idToTemplate(template);
852 | }
853 | }
854 | /** @type {string} */
855 | this.template = template;
856 | $app.isMounted = true;
857 | $app.isUnmounted = false;
858 | var target = $app.options.target || $app.options.el;
859 | if (target) {
860 | $app.$el = query(target);
861 | $app.$el.setAttribute("data-dative-app", "");
862 | }
863 | if (
864 | $app.$el == document.documentElement ||
865 | $app.$el == document.body ||
866 | $app.$el === doc.head
867 | ) {
868 | this.$el.remove();
869 | $app.isUnmounted = true;
870 | warn("Can't mount on or ");
871 | }
872 | if (this.$el && !template) {
873 | $app.isUnmounted = true;
874 | warn(
875 | "You did not provide a template for this instance or template returned " +
876 | typeof template
877 | );
878 | }
879 | $app.$el.dative_app = $app;
880 | /** @type {Element} */
881 | var elem = this.$el;
882 | if ($app.isMounted) {
883 | $app.attached.map(function (polyp) {
884 | return polyp.$el;
885 | });
886 | processor(elem, template.trim(), this);
887 |
888 | renderPolyps($app.attached, $app);
889 | for (const el of elem.querySelectorAll("*")) {
890 | if ($app.options.css) {
891 | el.setAttribute("data-dative-css", $app.cssId_);
892 | }
893 | for (const name of el.getAttributeNames()) {
894 | if (name.startsWith(prefix("on:")) || name.startsWith("on:")) {
895 | var eventName = name.slice(6);
896 | if (name.startsWith("on:")) {
897 | eventName = name.slice(3);
898 | }
899 |
900 | const handlerName = el.getAttribute(name);
901 | if ($app.events) {
902 | for (const events in $app.events) {
903 | const vall = $app.events[events];
904 | // console.log(events,vall);
905 | if (eventName === events) {
906 | vall(el, event.bind(this));
907 | }
908 | }
909 | }
910 | el.addEventListener(eventName, (evt) => {
911 | event(this, handlerName, el, evt);
912 | });
913 |
914 | el.removeAttribute(name);
915 | } else if (name.startsWith("transition") || name.startsWith("#")) {
916 | name.slice(11);
917 | if (name.startsWith("#")) {
918 | name.slice(1);
919 | }
920 | var transyName = el.getAttribute(name);
921 | let modifiersregexp = name.match(/\.[^.\]]+(?=[^\]]*$)/g) || [];
922 | let modifiers = modifiersregexp.map((i) => i.replace(".", ""));
923 | var transitionMap = {
924 | enter: function enter(klass) {
925 | el.classList.add(klass + "-enter");
926 | },
927 | "before-enter": function enter(klass) {
928 | el.classList.add(klass + "-before-enter");
929 | },
930 | leave: function enter(klass) {
931 | el.classList.add(klass + "-leave");
932 | },
933 | "before-leave": function enter(klass) {
934 | el.classList.add(klass + "-before-leave");
935 | },
936 | };
937 | if (transyName !== null) {
938 | modifiers.map(($value) => {
939 | if ($value == "leave") transitionMap[$value](transyName);
940 | else if ($value == "enter") transitionMap[$value](transyName);
941 | else if ($value == "before-enter")
942 | transitionMap[$value](transyName);
943 | else if ($value == "before-leave")
944 | transitionMap[$value](transyName);
945 | });
946 | } else {
947 | modifiers.map(($value) => {
948 | if ($value == "leave") {
949 | el.style.transition = {
950 | opacity: 0,
951 | transform: `scale(1)`,
952 | };
953 | } else if ($value == "enter") {
954 | el.style.transition = {
955 | opacity: 1,
956 | transform: `scale(1)`,
957 | };
958 | } else if ($value == "before-enter") {
959 | el.style.transition = {
960 | opacity: 0,
961 | transform: `scale(1)`,
962 | };
963 | } else if ($value == "before-leave") {
964 | el.style.transition = {
965 | opacity: 1,
966 | transform: `scale(1)`,
967 | };
968 | }
969 | });
970 | }
971 | el.removeAttribute(name);
972 | } else if (name.startsWith("animate:") || name.startsWith("@")) {
973 | var animation_name = name.slice(8);
974 | if (name.startsWith("@")) {
975 | animation_name = name.slice(1);
976 | }
977 | const checkani = el.getAttribute(name).split(",");
978 |
979 | var animationName = {
980 | duration: checkani[0],
981 | delay: checkani[1],
982 | ease: checkani[2],
983 | };
984 | const delay = animationName.delay;
985 | const duration = animationName.duration;
986 | const ease = animationName.ease;
987 | if ($app.animate) {
988 | for (const animate in $app.animate) {
989 | const vall = $app.animate[animate];
990 | const setStyle = (options) => {
991 | for (const key in options) {
992 | if (Object.hasOwnProperty.call(options, key)) {
993 | const property = options[key];
994 | el.style[key] = property;
995 | }
996 | }
997 | };
998 | if (animation_name === animate) {
999 | vall({
1000 | animate: el.animate.bind(el),
1001 | setStyle,
1002 | duration: Number(duration),
1003 | delay: Number(delay),
1004 | ease: ease,
1005 | });
1006 | }
1007 | }
1008 | }
1009 | if (animation_name === "fadein") {
1010 | fadeIn(el, Number(duration) || 200, Number(delay) || 200);
1011 | } else if (animation_name === "bounce") {
1012 | bounce(el, Number(duration) || 200, Number(delay) || 200);
1013 | }
1014 | el.removeAttribute(name);
1015 | } else if (name === prefix("ref") || name === "ref") {
1016 | if (el.ref) {
1017 | warnDuplicate$(el, "ref", el, true);
1018 | return;
1019 | }
1020 | const refName = el.getAttribute(name);
1021 | this.$ref[refName] = el;
1022 | el.removeAttribute(name);
1023 | } else if (
1024 | name.startsWith(prefix("bind:")) ||
1025 | name.startsWith("bind:")
1026 | ) {
1027 | let propName = name.slice(8);
1028 | if (name.startsWith("bind:")) {
1029 | propName = name.slice(5);
1030 | }
1031 | const dataName = el.getAttribute(name);
1032 | if (propName === "this") {
1033 | if (el.ref) {
1034 | warnDuplicate$(el, "bind:this", el, true);
1035 | return;
1036 | }
1037 | this.$ref[dataName] = el;
1038 | el.removeAttribute(name);
1039 | } else {
1040 | el[this.kebabToCamel(propName)] = attributeparser(
1041 | this,
1042 | dataName,
1043 | el
1044 | );
1045 | el.removeAttribute(name);
1046 | }
1047 | } else if (name === prefix("cloak")) {
1048 | if (el.getAttribute(name) !== "") {
1049 | warn(
1050 | "`dv-cloak` doesn't accepts any value.\nShould be\n<" +
1051 | el.tagName.toLowerCase() +
1052 | " dv-cloak ...>..."
1055 | );
1056 | }
1057 | queueMicrotask(() => el.removeAttribute(name));
1058 | }
1059 |
1060 | for (var keys in $app.directives) {
1061 | var val = $app.directives[keys];
1062 | if (typeof val === "function") {
1063 | var $name = keys;
1064 | if (name.startsWith(prefix($name))) {
1065 | var binding = el.getAttribute(name);
1066 | let modifiers = name.match(/\.[^.\]]+(?=[^\]]*$)/g) || [];
1067 | val(el, {
1068 | bind: {
1069 | value: attributeparser(this, binding, el),
1070 | args: name.split(":")[1],
1071 | name: name,
1072 | expression: binding,
1073 | modifiers: modifiers.map((i) => i.replace(".", "")),
1074 | },
1075 | });
1076 | val._dv_directives_ = el._dv_directives_ = {
1077 | active: true,
1078 | args: name.split(":")[1],
1079 | value: attributeparser(this, binding, el),
1080 | expression: binding,
1081 | name: name,
1082 | modifiers: modifiers.map((i) => i.replace(".", "")),
1083 | };
1084 | el.removeAttribute(name);
1085 | }
1086 | }
1087 | }
1088 | }
1089 | }
1090 |
1091 | return elem;
1092 | }
1093 | };
1094 | /**
1095 | * Attach a component to this one
1096 | * @param {Function|Array} component The component(s) to attach
1097 | */
1098 | Dative.prototype.attach = function (component) {
1099 | var ref = this;
1100 | // Attach components
1101 | let polyps = type(component) === "array" ? component : [component];
1102 | for (let polyp of polyps) {
1103 | ref.attached.push(polyp);
1104 | }
1105 | };
1106 | }
1107 |
1108 | /**
1109 | * Detach a linked component to this one
1110 | * @param {Function|Array} component The linked component(s) to detach
1111 | */
1112 | Dative.prototype.detach = function (component) {
1113 | // Detach components
1114 | let polyps = type(component) === "array" ? component : [component];
1115 | for (let polyp of polyps) {
1116 | let index = this.attached.indexOf(polyp);
1117 | if (index < 0) return;
1118 | this.attached.splice(index, 1);
1119 | }
1120 | };
1121 | /**
1122 | * @param {String} str
1123 | * @param {boolean} expectsLowerCase
1124 | */
1125 | function makeMap(str, expectsLowerCase) {
1126 | const map = Object.create(null);
1127 | const list = str.split(",");
1128 | for (let lists in list) {
1129 | map[list[lists]] = true;
1130 | }
1131 | return expectsLowerCase
1132 | ? (val) => !!map[val.toLowerCase()]
1133 | : (val) => !!map[val];
1134 | }
1135 |
1136 | var BuiltinNames = makeMap(
1137 | "object, function,switch,const,eval,var,let,Object,Array,in,of,if,else,instanceof,this,class,export,import,default,try,catch"
1138 | );
1139 |
1140 | /**
1141 | * @param {Dative} dative
1142 | */
1143 | function initMethods(dative) {
1144 | let methods = dative.methods;
1145 | if (methods) {
1146 | for (const key in methods) {
1147 | if (key in dative.data) {
1148 | warnDuplicate(this, key, "data");
1149 | return;
1150 | }
1151 | if (BuiltinNames(key)) {
1152 | warn(
1153 | "Don't use Valid Javascript Builtin names for functions in methods to avoid errors"
1154 | );
1155 | }
1156 | if (typeof methods[key] !== "function") {
1157 | warn(
1158 | `Method "${key}" has type "${typeof methods[
1159 | key
1160 | ]}" in the component definition. ` +
1161 | `Did you reference the function correctly?`
1162 | );
1163 | return;
1164 | }
1165 | if (key in dative && isReserved(key)) {
1166 | warn(
1167 | `Method "${key}" conflicts with an existing Dative instance method. ` +
1168 | `Avoid defining component methods that start with _ or $.`
1169 | );
1170 | return;
1171 | }
1172 | dative[key] =
1173 | methods[key] == null
1174 | ? config.noop
1175 | : typeof methods[key] == "function"
1176 | ? methods[key].bind(dative)
1177 | : "";
1178 | dative[key]._dv_function = true;
1179 | }
1180 | }
1181 | }
1182 |
1183 | /**
1184 | * idtotemplate converter for style
1185 | * @param {string} id
1186 | */
1187 | function idToTemplate$1(id) {
1188 | var el = query(id);
1189 | if (el.tagName.toLowerCase() !== "style") {
1190 | warn(
1191 | `Template element with id ${id}, must be a `
1204 | );
1205 | return;
1206 | }
1207 | return el && el.innerHTML;
1208 | }
1209 | /** @type {Number} */
1210 | var $$uid = 0;
1211 |
1212 | /**
1213 | * Install Dative plugin
1214 | * @param {Array} args The Dative plugin
1215 | */
1216 | function use() {
1217 | var arguments$1 = arguments;
1218 |
1219 | var _this = this;
1220 | var plugins = [];
1221 | for (var _i = 0; _i < arguments.length; _i++) {
1222 | plugins[_i] = arguments$1[_i];
1223 | }
1224 | plugins.forEach(function (p) {
1225 | if (p.install && isFunction(p.install)) {
1226 | p.install({
1227 | proto: _this.constructor.prototype,
1228 | Dative: _this.constructor,
1229 | instance: _this,
1230 | });
1231 | } else {
1232 | p({
1233 | proto: _this.constructor.prototype,
1234 | Dative: _this.constructor,
1235 | instance: _this,
1236 | });
1237 | }
1238 | });
1239 | return this;
1240 | }
1241 | var ReservedProperties = makeMap("el,ref");
1242 |
1243 | class DeprecatedError extends Error {
1244 | constructor(message) {
1245 | super(message);
1246 | this.name = "DeprecatedError";
1247 | this.message = message;
1248 | }
1249 | }
1250 |
1251 | function depd(namespace) {
1252 | return function deprecated(message) {
1253 | console.warn(new DeprecatedError(`${namespace} ${message}`));
1254 | };
1255 | }
1256 | function _init($this) {
1257 | $this.oncreated = $this.options.oncreated || config.noop;
1258 | $this.onmounted = $this.options.onmounted || config.noop;
1259 | $this.methods = $this.options.methods || Object.create(null);
1260 | $this.directives = $this.options.directives || Object.create(null);
1261 | $this.animate = $this.options.animate || Object.create(null);
1262 | $this.$ref = Object.create(null);
1263 | $this.isUnmounted = false;
1264 | $this.isMounted = false;
1265 | $this.ondestroy = $this.options.ondestroy || config.noop;
1266 | $this.attached = [];
1267 | $this.sanitize =
1268 | $this.options.sanitize === undefined ? false : $this.options.sanitize;
1269 | if ($this.options.css) $this.cssId_ = uuid_();
1270 | initData($this.options, $this);
1271 | initMethods($this);
1272 | var attach = $this.options.attach
1273 | ? type($this.options.attach) === "array"
1274 | ? $this.options.attach
1275 | : [$this.options.attach]
1276 | : [];
1277 | if ($this.oncreated !== undefined && $this.oncreated !== null) {
1278 | $this.oncreated();
1279 | }
1280 | $this._uid = $$uid += 1;
1281 | if ($this.options.store) {
1282 | var deprecated$ = depd("store");
1283 | deprecated$(
1284 | "options has been deprecated in Dyte" +
1285 | (config.dyte ? " " + config.dyte.version : "") +
1286 | " and in DativeJs " +
1287 | Dative.version +
1288 | ".Access it globally after installing Dyte.\n`app.use(store);`"
1289 | );
1290 | }
1291 | if ($this.options.update) {
1292 | var deprecated$$ = depd("update");
1293 | deprecated$$(
1294 | "options has been deprecated in " +
1295 | Dative.version
1296 | );
1297 | }
1298 |
1299 | /**
1300 | * initialize mounted hooks
1301 | **/
1302 | if ($this.onmounted !== undefined && $this.onmounted !== null) {
1303 | $this.onmounted();
1304 | } else if (
1305 | $this.isUnmounted &&
1306 | $this.ondestroy !== null &&
1307 | $this.ondestroy !== undefined
1308 | ) {
1309 | $this.ondestroy();
1310 | }
1311 | const computed = $this.options.computed || Object.create(null);
1312 | if (!computed) return false;
1313 | for (let key in computed) {
1314 | const value = computed[key];
1315 | if (key in $this.data || key in $this.methods) {
1316 | warnDuplicate($this, key, key in $this.data ? "data" : "methods");
1317 | return;
1318 | }
1319 | if (typeof value === "function") {
1320 | Object.defineProperty($this, key, {
1321 | get: value,
1322 | enumerable: true,
1323 | configurable: true,
1324 | });
1325 | } else if (
1326 | typeof value === "string" ||
1327 | (typeof value !== "function" && typeof value !== "object")
1328 | ) {
1329 | warn(
1330 | "computed options accepts ``Object|Function`` but got " + typeof value
1331 | );
1332 | return;
1333 | } else if (typeof value === "object") {
1334 | Object.defineProperty($this, key, {
1335 | get: value.get || config.noop,
1336 | set: value.set || config.noop,
1337 | configurable: true,
1338 | });
1339 | }
1340 | }
1341 | var property$ = $this.options.property || Object.create(null);
1342 | for (var prop in property$) {
1343 | if (ReservedProperties(prop)) {
1344 | WarnReserved$(prop);
1345 | return;
1346 | }
1347 | const vall = property$[prop];
1348 | if (typeof vall === "function") {
1349 | Object.defineProperty($this, "$" + prop, {
1350 | get: function propertygetter() {
1351 | return vall($this);
1352 | },
1353 | configurable: true,
1354 | });
1355 | }
1356 | }
1357 |
1358 | if (attach.length) {
1359 | attach.forEach(function (component) {
1360 | if ("attach" in component) {
1361 | component.attach($this);
1362 | }
1363 | });
1364 | }
1365 |
1366 | if ($this.$el) $this.render();
1367 | }
1368 |
1369 | /**
1370 | * Create the Dative Application
1371 | * @param {Object} options The component options
1372 | */
1373 | function Dative(options) {
1374 | options = options || {};
1375 | if (!("DOMParser" in window)) warn("Your Browser Doesnt support DativeJs.");
1376 | if (!(this instanceof Dative)) warn("Dative Must be called as a constructor");
1377 | var $this = this;
1378 | $this.options = options;
1379 | config.CurrentInstance = $this;
1380 | var $plugins = $this.options.use || [];
1381 | var styles = $this.options.css;
1382 |
1383 | if (styles) {
1384 | warn(
1385 | "css options is not supported on per-instance. Use it in \n var Component = Dative.extend({ \n ...,\n css: '/** Your css **/' });\n var comp = new Component({ ... });"
1386 | );
1387 | }
1388 | if ($plugins) {
1389 | if (Array.isArray($this.options.use)) {
1390 | $this.use.apply($this, $this.options.use);
1391 | }
1392 | }
1393 | _init($this);
1394 |
1395 | }
1396 |
1397 | initRender(Dative);
1398 | /**
1399 | * Destroys the current instance
1400 | */
1401 | Dative.prototype.$destroy = function () {
1402 | var $this = this;
1403 | if ($this.isUnmounted) {
1404 | warn("Instance can't be unmounted again");
1405 | }
1406 | if ($this.isMounted) {
1407 | this.$el.firstChild.remove();
1408 | delete this.onmounted;
1409 | delete this.$el.dative_app;
1410 | $this.isUnmounted = true;
1411 | $this.isMounted = false;
1412 | $this.ondestroy();
1413 | } else {
1414 | warn("Cannot use $destroy() on an instance that's not mounted");
1415 | }
1416 | };
1417 |
1418 | Dative.prototype.proxy = proxy;
1419 | Dative.prototype.use = use;
1420 |
1421 | var configs = { enumerable: true, configurable: true };
1422 | configs.get = function () {
1423 | return config;
1424 | };
1425 | {
1426 | configs.set = function () {
1427 | warn(
1428 | "Do not replace the Dative.config object, set individual fields instead."
1429 | );
1430 | };
1431 | }
1432 | Object.defineProperty(Dative, "config", configs);
1433 | var WarnReserved$ = function (key, target) {
1434 | warn(
1435 | ["`" + key + "` is a reserved property.\n", "Try using another name"].join(
1436 | ""
1437 | ),
1438 | target
1439 | );
1440 | };
1441 |
1442 | /**
1443 | * @param {string} name name of the property
1444 | * @param {Function} callback callback function
1445 | */
1446 |
1447 | var property = function (name, callback) {
1448 | if (ReservedProperties(name)) {
1449 | WarnReserved$(name);
1450 | return;
1451 | }
1452 | Object.defineProperty(Dative.prototype, "$" + name, {
1453 | get: function propertygetter() {
1454 | return callback();
1455 | },
1456 | set: function propertysetter(v) {
1457 | warn("Dative.defineProperty is readonly");
1458 | },
1459 | configurable: true,
1460 | enumerable: true,
1461 | });
1462 | };
1463 |
1464 | /**
1465 | * @param {any} options
1466 | */
1467 | var defineApp = function defineApp(options) {
1468 | if (options.data) {
1469 | if (typeof options.data !== "function") {
1470 | warn(`Data should be a function,But got ${typeof options.data}`);
1471 | return;
1472 | }
1473 | }
1474 | return new Dative(options);
1475 | };
1476 |
1477 | function initProps(options, dative, prop) {
1478 | let props = options.props;
1479 | props = dative.props = props || Object.create(null);
1480 | if (!Array.isArray(props) && !isPlainObject(props)) {
1481 | props = {};
1482 | warn("options props should return an object.");
1483 | }
1484 |
1485 | const props_ = prop;
1486 | for (let propss in props_) {
1487 | if (typeof prop[propss] === "string" && dative.sanitize) {
1488 | prop[propss] = sanitizeStr(prop[propss]);
1489 | }
1490 | if (!isReserved())
1491 | dative.proxyProps(
1492 | `props`,
1493 | propss,
1494 | props_[propss].type || props_[propss],
1495 | propss,
1496 | props_[propss].default
1497 | );
1498 | }
1499 | observe(props);
1500 | }
1501 | function proxyProps(sourceKey, key, value, name, defaultvalue) {
1502 | let self = this;
1503 | Object.defineProperty(self, key, {
1504 | configurable: true,
1505 | enumerable: true,
1506 | get: function reactivepropsgetter() {
1507 | var va = self[sourceKey][key];
1508 | if (value === String && typeof va !== "string") {
1509 | warn(
1510 | 'Props "' +
1511 | name +
1512 | '" requires String as the value but got ' +
1513 | typeof va
1514 | );
1515 | return "undefined";
1516 | } else if (value === Number && typeof va !== "number") {
1517 | warn(
1518 | 'Props "' +
1519 | name +
1520 | '" requires Number as the value but got ' +
1521 | typeof va
1522 | );
1523 | return "undefined";
1524 | } else if (value === Number && typeof va !== "number") {
1525 | warn(
1526 | 'Props "' +
1527 | name +
1528 | '" requires Number as the value but got ' +
1529 | typeof va
1530 | );
1531 | return "undefined";
1532 | } else if (value === Function && typeof va !== "function") {
1533 | warn(
1534 | 'Props "' +
1535 | name +
1536 | '" requires Function as the value but got ' +
1537 | typeof va
1538 | );
1539 | return "undefined";
1540 | } else if (value === Object && typeof va !== "object") {
1541 | warn(
1542 | 'Props "' +
1543 | name +
1544 | '" requires Object as the value but got ' +
1545 | typeof va
1546 | );
1547 | return "undefined";
1548 | } else if (value === Array && type(va) !== "array") {
1549 | warn(
1550 | 'Props "' +
1551 | name +
1552 | '" requires Array as the value but got ' +
1553 | typeof va
1554 | );
1555 | return "undefined";
1556 | } else if (value === Boolean && typeof va !== "boolean") {
1557 | warn(
1558 | 'Props "' +
1559 | name +
1560 | '" requires Boolean as the value but got ' +
1561 | typeof va
1562 | );
1563 | return "undefined";
1564 | } else if (value === null) {
1565 | return self[sourceKey][key] || defaultvalue;
1566 | } else {
1567 | return self[sourceKey][key] || defaultvalue;
1568 | }
1569 | },
1570 | set: function reactivepropssetter(newVal) {
1571 | if (value === String && typeof newVal !== "string") {
1572 | warn(
1573 | 'Props "' +
1574 | name +
1575 | '" requires String as the value but got ' +
1576 | typeof newVal
1577 | );
1578 | return;
1579 | } else if (value === Number && typeof newVal !== "number") {
1580 | warn(
1581 | 'Props "' +
1582 | name +
1583 | '" requires Number as the value but got ' +
1584 | typeof newVal
1585 | );
1586 | return;
1587 | } else if (value === Function && typeof newVal !== "function") {
1588 | warn(
1589 | 'Props "' +
1590 | name +
1591 | '" requires Function as the value but got ' +
1592 | typeof newVal
1593 | );
1594 | return;
1595 | } else if (value === Object && typeof newVal !== "object") {
1596 | warn(
1597 | 'Props "' +
1598 | name +
1599 | '" requires Object as the value but got ' +
1600 | typeof newVal
1601 | );
1602 | return;
1603 | } else if (value === Boolean && typeof newVal !== "boolean") {
1604 | warn(
1605 | 'Props "' +
1606 | name +
1607 | '" requires Boolean as the value but got ' +
1608 | typeof newVal
1609 | );
1610 | return;
1611 | } else if (value === Array && type(newVal) !== "array") {
1612 | warn(
1613 | 'Props "' +
1614 | name +
1615 | '" requires Array as the value but got ' +
1616 | typeof newVal
1617 | );
1618 | return;
1619 | } else if (value === null) {
1620 | self[sourceKey][key] = newVal;
1621 | self.render();
1622 | } else {
1623 | self[sourceKey][key] = newVal;
1624 | self.render();
1625 | return true;
1626 | }
1627 | },
1628 | });
1629 | }
1630 |
1631 | var PREFIX = "/* Dative.js component styles */";
1632 | function makeStyle(id) {
1633 | if (doc) {
1634 | var el = doc.createElement("style");
1635 | el.type = "text/css";
1636 | el.setAttribute("data-dative-css", id || "");
1637 | doc.getElementsByTagName("head")[0].appendChild(el);
1638 | return el;
1639 | }
1640 | }
1641 | function getStyle(id) {
1642 | return (
1643 | doc &&
1644 | (doc.querySelector('[data-dative-css="' + id + '"]') || makeStyle(id))
1645 | );
1646 | }
1647 |
1648 | var remove = /\/\*(?:[\s\S]*?)\*\//g;
1649 | var escape =
1650 | /url\(\s*(['"])(?:\\[\s\S]|(?!\1).)*\1\s*\)|url\((?:\\[\s\S]|[^)])*\)|(['"])(?:\\[\s\S]|(?!\2).)*\2/gi;
1651 | var value = /\0(\d+)/g;
1652 | /**
1653 | * Removes comments and strings from the given CSS to make it easier to parse.
1654 | *
1655 | * @param css
1656 | * @param callback receives the cleaned CSS
1657 | * @param additionalReplaceRules
1658 | */
1659 | function cleanCss(css, callback, additionalReplaceRules) {
1660 | if (additionalReplaceRules === void 0) {
1661 | additionalReplaceRules = [];
1662 | }
1663 | var values = [];
1664 | css = css
1665 | .replace(escape, function (match) {
1666 | return "\0" + (values.push(match) - 1);
1667 | })
1668 | .replace(remove, "");
1669 | additionalReplaceRules.forEach(function (pattern) {
1670 | css = css.replace(pattern, function (match) {
1671 | return "\0" + (values.push(match) - 1);
1672 | });
1673 | });
1674 | var reconstruct = function (css) {
1675 | return css.replace(value, function (_match, n) {
1676 | return values[n];
1677 | });
1678 | };
1679 | return callback(css, reconstruct);
1680 | }
1681 | var selectorsPattern = /(?:^|\}|\{|\x01)\s*([^\{\}\0\x01]+)\s*(?=\{)/g;
1682 | var importPattern = /@import\s*\([^)]*\)\s*;?/gi;
1683 | var importEndPattern = /\x01/g;
1684 | var keyframesDeclarationPattern =
1685 | /@keyframes\s+[^\{\}]+\s*\{(?:[^{}]+|\{[^{}]+})*}/gi;
1686 | var selectorUnitPattern =
1687 | /((?:(?:\[[^\]]+\])|(?:[^\s\+\>~:]))+)((?:::?[^\s\+\>\~\(:]+(?:\([^\)]+\))?)*\s*[\s\+\>\~]?)\s*/g;
1688 | var excludePattern = /^(?:@|\d+%)/;
1689 | var globe = /^(?:\:|\d+%)/g;
1690 | var dataRvcGuidPattern = /\[data-dative-css~="[a-z0-9-]"]/g;
1691 | function trim(str) {
1692 | return str.trim();
1693 | }
1694 | function extractString(unit) {
1695 | return unit.str;
1696 | }
1697 | function transformSelector(selector, parent) {
1698 | var selectorUnits = [];
1699 | var match;
1700 | while ((match = selectorUnitPattern.exec(selector))) {
1701 | selectorUnits.push({
1702 | str: match[0],
1703 | base: match[1],
1704 | modifiers: match[2],
1705 | });
1706 | }
1707 | // For each simple selector within the selector, we need to create a version
1708 | // that a) combines with the id, and b) is inside the id
1709 | var base = selectorUnits.map(extractString);
1710 | var transformed = [];
1711 | var i = selectorUnits.length;
1712 | while (i--) {
1713 | var appended = base.slice();
1714 | // Pseudo-selectors should go after the attribute selector
1715 | var unit = selectorUnits[i];
1716 | appended[i] = unit.base + parent + unit.modifiers || "";
1717 | var prepended = base.slice();
1718 | prepended[i] = parent + " " + prepended[i];
1719 | transformed.push(appended.join(" "), prepended.join(" "));
1720 | }
1721 | return transformed.join(", ");
1722 | }
1723 | function transformCss(css, id) {
1724 | var dataAttr = '[data-dative-css~="' + id + '"]';
1725 | var transformed;
1726 | if (dataRvcGuidPattern.test(css)) {
1727 | transformed = css.replace(dataRvcGuidPattern, dataAttr);
1728 | } else {
1729 | transformed = cleanCss(
1730 | css,
1731 | function (css, reconstruct) {
1732 | css = css
1733 | .replace(importPattern, "$&\x01")
1734 | .replace(selectorsPattern, function (match, $1) {
1735 | // don't transform at-rules and keyframe declarations
1736 | if (excludePattern.test($1)) {
1737 | return match;
1738 | }
1739 | if (globe.test($1)) return match;
1740 | var selectors = $1.split(",").map(trim);
1741 | var transformed =
1742 | selectors
1743 | .map(function (selector) {
1744 | return transformSelector(selector, dataAttr);
1745 | })
1746 | .join(", ") + " ";
1747 | return match.replace($1, transformed);
1748 | })
1749 | .replace(importEndPattern, "");
1750 | return reconstruct(css);
1751 | },
1752 | [keyframesDeclarationPattern]
1753 | );
1754 | }
1755 | return PREFIX + "\n" + transformed;
1756 | }
1757 |
1758 | var extend = function extend(options) {
1759 | if (options.el || options.target) {
1760 | warn(
1761 | `Dative.extend doesn't accept ${
1762 | options.el
1763 | ? "el: " + options.el
1764 | : options.target
1765 | ? "target: " + options.target
1766 | : ""
1767 | }.\nThe el or target should be pass to the var app = Dative.extend({...});\n new app({ ${
1768 | options.el
1769 | ? "el: '" + options.el + "'"
1770 | : options.target
1771 | ? "target: '" + options.target + "'"
1772 | : ""
1773 | }',.... })`
1774 | );
1775 | return;
1776 | }
1777 | /** @type {Dative} */
1778 | var Parent = this;
1779 | function DativeComponent(initialProps) {
1780 | if (!(this instanceof DativeComponent)) {
1781 | warn("Dative.extend class has to be called with the `new` keyboard");
1782 | return;
1783 | }
1784 | var $this = this;
1785 | $this.options = options;
1786 | if (initialProps.el || initialProps.target) {
1787 | $this.options.el = initialProps.el || initialProps.target;
1788 | } else {
1789 | $this.options.el = doc.createDocumentFragment();
1790 | }
1791 | var $plugins = $this.options.use || [];
1792 | if ($plugins) {
1793 | if (Array.isArray($this.options.use)) {
1794 | $this.use.apply($this, $this.options.use);
1795 | }
1796 | }
1797 |
1798 | if ($this.options.data) {
1799 | if (typeof $this.options.data !== "function") {
1800 | tip(
1801 | `Data should be a function,But got ${typeof $this.options.data}\n ${
1802 | typeof $this.options.data === "object"
1803 | ? "Replace data:{ \n \t msg: '....' \n } with data(){ return{ \n \t msg:'....' \n } }"
1804 | : ""
1805 | }`
1806 | );
1807 | }
1808 | }
1809 |
1810 | if (!$this.options.attach && initialProps.attach) {
1811 | $this.options.attach = initialProps.attach;
1812 | }
1813 |
1814 | if (options.props && initialProps.props)
1815 | initProps(initialProps, $this, options.props);
1816 |
1817 | _init($this);
1818 | var styles = $this.options.css;
1819 | $this.cssScoped = $this.options.cssScoped || true;
1820 | const scoped = $this.cssScoped;
1821 | if (styles) {
1822 | if (styles[0] === "#") {
1823 | styles = idToTemplate$1(styles);
1824 | }
1825 |
1826 | var compiled_styles = parse(styles, $this);
1827 | if (scoped) {
1828 | var compiled = transformCss(compiled_styles, $this.cssId_);
1829 | $this.css = {
1830 | value: compiled_styles,
1831 | transformed: { active: true, value: compiled },
1832 | };
1833 | if (doc.querySelector("style[data-dative-css]")) {
1834 | var st = doc.querySelector("style[data-dative-css]");
1835 | st.innerHTML = st.innerHTML + compiled;
1836 | } else {
1837 | var style = getStyle();
1838 | style.innerHTML = compiled;
1839 | }
1840 | }
1841 | }
1842 | }
1843 | initRender(DativeComponent);
1844 | var proto = Object.create(Parent.prototype);
1845 | proto.constructor = DativeComponent;
1846 | //DativeComponent['super']
1847 | DativeComponent.prototype = proto;
1848 | DativeComponent.prototype.proxyProps = proxyProps;
1849 |
1850 | Object.defineProperties(DativeComponent, {
1851 | extend: { value: Parent.extend, configurable: true, enumerable: true },
1852 | defineApp: {
1853 | value: Parent.defineApp,
1854 | configurable: true,
1855 | enumerable: true,
1856 | },
1857 | defineProperty: {
1858 | value: Parent.defineProperty,
1859 | configurable: true,
1860 | enumerable: true,
1861 | },
1862 | utlis: {
1863 | value: { warn: Parent.utlis.warn },
1864 | configurable: true,
1865 | enumerable: true,
1866 | },
1867 | version: { value: Parent.version, configurable: true, enumerable: true },
1868 | });
1869 | return DativeComponent;
1870 | };
1871 |
1872 | var __version__ = "V2.0.0-alpha";
1873 | Dative.version = __version__;
1874 | Dative.defineProperty = property;
1875 | Dative.defineApp = defineApp;
1876 | Object.defineProperty(Dative, "utlis", {
1877 | value: {
1878 | warn: warn,
1879 | },
1880 | configurable: true,
1881 | enumerable: true,
1882 | });
1883 | Dative.extend = extend;
1884 |
1885 | var deprecatedMethods = [
1886 | "use",
1887 | "importStyle",
1888 | "ref",
1889 | "reactive",
1890 | "watchEffect",
1891 | ];
1892 |
1893 | deprecatedMethods.forEach((methods) => {
1894 | Object.defineProperty(Dative, methods, {
1895 | /** @deprecated */
1896 | value: function () {
1897 | var deprecate = depd(methods);
1898 | // tip(`${methods} Has been deprecated in v2-alpha`)
1899 | deprecate(`Has been deprecated in v2-alpha`);
1900 | },
1901 | configurable: true,
1902 | enumerable: true,
1903 | });
1904 | });
1905 |
1906 | if (inBrowser) {
1907 | var welcomeIntro_1 = [
1908 | "%cDative.js %c" + Dative.version + " %cin debug mode, %cmore...",
1909 | "color: #FF3E00;font-weight: bold;",
1910 | "color: #111; font-weight: 600;",
1911 | "color: rgb(85, 85, 255); font-weight: normal;",
1912 | "color: rgb(82, 140, 224); font-weight: normal; text-decoration: underline;",
1913 | ];
1914 | var message = [
1915 | `You're running Dative ${Dative.version} in debug mode - messages will be printed to the console to help you fix problems and optimise your application.
1916 |
1917 | To disable debug mode, add this line at the start of your app:
1918 | Dative.config.slient = true;
1919 |
1920 | Get help and support:
1921 | http://dativejs.js.org`,
1922 | ];
1923 | if (!config.slient) {
1924 | if (typeof console !== "undefined") {
1925 | var hasCollpased = !!console.groupCollapsed;
1926 | if (hasCollpased) {
1927 | console[hasCollpased ? "groupCollapsed" : "group"].apply(
1928 | console,
1929 | welcomeIntro_1
1930 | );
1931 | console[console.info ? "info" : "log"].apply(console, message);
1932 | console.groupEnd();
1933 | } else {
1934 | console[console.info ? "info" : "log"].apply(console, message);
1935 | }
1936 | }
1937 | }
1938 | }
1939 | export default Dative;
1940 | export {
1941 | defineApp,
1942 | property as defineProperty,
1943 | __version__ as version,
1944 | warn,
1945 | };
--------------------------------------------------------------------------------
/types/animation/index.d.ts:
--------------------------------------------------------------------------------
1 | import type { Animate } from "../../../dative";
2 |
3 | export declare function flip({ animate, duration, delay }: Animate): void;
4 |
5 | export declare function fadeOut({ animate, duration, delay }: Animate): void;
6 |
7 | export declare function bubble({ animate, duration, delay }: Animate): void;
8 |
9 | export declare function swing({ animate, duration, delay }: Animate): void;
10 |
--------------------------------------------------------------------------------
/types/index.d.ts:
--------------------------------------------------------------------------------
1 | export interface Config {
2 | slient: boolean;
3 | /** @default 'development' */
4 | mode: string;
5 | noop: () => void;
6 | CurrentInstance: any;
7 | }
8 | export type Animate = {
9 | animate: (keyframes: Keyframe[] | PropertyIndexedKeyframes, options?: number | KeyframeAnimationOptions)=> Animation,
10 | duration: number,
11 | delay: number,
12 | setStyle: (options: CSSStyleDeclaration)=> void
13 | }
14 |
15 | type DativeAnimateOptions = {
16 | [x:string]: ({ animate,duration,delay, setStyle }:Animate)=> void
17 | }
18 |
19 | type Computed = { [x: string]: Function | { get: Function, set: Function } }
20 |
21 |
22 | export type Data= Record;
23 |
24 | export interface DativeOptions {
25 | data?: Data;
26 | el?: string | Element;
27 | target?: string | Element;
28 | methods?: object;
29 | template?: string;
30 | oncreated?: ()=> void;
31 | onmounted?: ()=> void;
32 | ondestroy?: ()=> void;
33 | use: Array