@symbo.ls/create 2.11.417 → 2.11.422

package/dist/cjs/bundle/index.js

@@ -607,7 +607,7 @@ var require_object = __commonJS({
       diff: () => diff,
       diffArrays: () => diffArrays,
       diffObjects: () => diffObjects,
-      exec: () => exec4,
+      exec: () => exec5,
       flattenRecursive: () => flattenRecursive,
       getChildrenComponentsByKey: () => getChildrenComponentsByKey,
       getExtendsInElement: () => getExtendsInElement,
@@ -632,7 +632,7 @@ var require_object = __commonJS({
     var import_types = require_types();
     var import_array = require_array();
     var import_string = require_string();
-    var exec4 = (param, element, state, context) => {
+    var exec5 = (param, element, state, context) => {
       if ((0, import_types.isFunction)(param)) {
         return param(
           element,
@@ -644,7 +644,7 @@ var require_object = __commonJS({
     };
     var map2 = (obj, extention, element) => {
       for (const e in extention) {
-        obj[e] = exec4(extention[e], element);
+        obj[e] = exec5(extention[e], element);
       }
     };
     var merge6 = (element, obj, excludeFrom = []) => {
@@ -733,7 +733,7 @@ var require_object = __commonJS({
       return o;
     };
     var deepCloneWithExtend3 = (obj, excludeFrom = ["node"], options = {}) => {
-      const o = (0, import_types.isArray)(obj) ? [] : {};
+      const o = options.window ? (0, import_types.isArray)(obj) ? new options.window.Array([]) : new options.window.Object({}) : (0, import_types.isArray)(obj) ? [] : {};
       for (const prop in obj) {
         if (!Object.prototype.hasOwnProperty.call(obj, prop))
           continue;
@@ -1109,6 +1109,12 @@ var require_object = __commonJS({
         if (foundString || foundInArray)
           return el;
       }
+      if (el.parent && el.parent.childExtend) {
+        const foundString = (0, import_types.isString)(el.parent.childExtend) && el.parent.childExtend === key;
+        const foundInArray = (0, import_types.isArray)(el.parent.childExtend) && el.parent.childExtend.filter((v) => v === key).length;
+        if (foundString || foundInArray)
+          return el;
+      }
     };
     var getExtendsInElement = (obj) => {
       let result = [];
@@ -2142,7 +2148,7 @@ var require_cjs2 = __commonJS({
           diff: () => diff,
           diffArrays: () => diffArrays,
           diffObjects: () => diffObjects,
-          exec: () => exec4,
+          exec: () => exec5,
           flattenRecursive: () => flattenRecursive,
           getChildrenComponentsByKey: () => getChildrenComponentsByKey,
           getExtendsInElement: () => getExtendsInElement,
@@ -2167,7 +2173,7 @@ var require_cjs2 = __commonJS({
         var import_types = require_types4();
         var import_array = require_array4();
         var import_string = require_string4();
-        var exec4 = (param, element, state, context) => {
+        var exec5 = (param, element, state, context) => {
           if ((0, import_types.isFunction)(param)) {
             return param(
               element,
@@ -2179,7 +2185,7 @@ var require_cjs2 = __commonJS({
         };
         var map2 = (obj, extention, element) => {
           for (const e in extention) {
-            obj[e] = exec4(extention[e], element);
+            obj[e] = exec5(extention[e], element);
           }
         };
         var merge52 = (element, obj, excludeFrom = []) => {
@@ -4004,7 +4010,7 @@ var require_cjs2 = __commonJS({
           diff: () => diff,
           diffArrays: () => diffArrays,
           diffObjects: () => diffObjects,
-          exec: () => exec4,
+          exec: () => exec5,
           flattenRecursive: () => flattenRecursive,
           getChildrenComponentsByKey: () => getChildrenComponentsByKey,
           getExtendsInElement: () => getExtendsInElement,
@@ -4029,7 +4035,7 @@ var require_cjs2 = __commonJS({
         var import_types = require_types22();
         var import_array = require_array22();
         var import_string = require_string22();
-        var exec4 = (param, element, state, context) => {
+        var exec5 = (param, element, state, context) => {
           if ((0, import_types.isFunction)(param)) {
             return param(
               element,
@@ -4041,7 +4047,7 @@ var require_cjs2 = __commonJS({
         };
         var map2 = (obj, extention, element) => {
           for (const e in extention) {
-            obj[e] = exec4(extention[e], element);
+            obj[e] = exec5(extention[e], element);
           }
         };
         var merge52 = (element, obj, excludeFrom = []) => {
@@ -7265,7 +7271,7 @@ var require_cjs3 = __commonJS({
           diff: () => diff,
           diffArrays: () => diffArrays,
           diffObjects: () => diffObjects,
-          exec: () => exec4,
+          exec: () => exec5,
           flattenRecursive: () => flattenRecursive,
           getChildrenComponentsByKey: () => getChildrenComponentsByKey,
           getExtendsInElement: () => getExtendsInElement,
@@ -7290,7 +7296,7 @@ var require_cjs3 = __commonJS({
         var import_types = require_types4();
         var import_array = require_array4();
         var import_string = require_string4();
-        var exec4 = (param, element, state, context) => {
+        var exec5 = (param, element, state, context) => {
           if ((0, import_types.isFunction)(param)) {
             return param(
               element,
@@ -7302,7 +7308,7 @@ var require_cjs3 = __commonJS({
         };
         var map2 = (obj, extention, element) => {
           for (const e in extention) {
-            obj[e] = exec4(extention[e], element);
+            obj[e] = exec5(extention[e], element);
           }
         };
         var merge6 = (element, obj, excludeFrom = []) => {
@@ -7391,7 +7397,7 @@ var require_cjs3 = __commonJS({
           return o;
         };
         var deepCloneWithExtend3 = (obj, excludeFrom = ["node"], options = {}) => {
-          const o = (0, import_types.isArray)(obj) ? [] : {};
+          const o = options.window ? (0, import_types.isArray)(obj) ? new options.window.Array([]) : new options.window.Object({}) : (0, import_types.isArray)(obj) ? [] : {};
           for (const prop in obj) {
             if (!Object.prototype.hasOwnProperty.call(obj, prop))
               continue;
@@ -7767,6 +7773,12 @@ var require_cjs3 = __commonJS({
             if (foundString || foundInArray)
               return el;
           }
+          if (el.parent && el.parent.childExtend) {
+            const foundString = (0, import_types.isString)(el.parent.childExtend) && el.parent.childExtend === key;
+            const foundInArray = (0, import_types.isArray)(el.parent.childExtend) && el.parent.childExtend.filter((v) => v === key).length;
+            if (foundString || foundInArray)
+              return el;
+          }
         };
         var getExtendsInElement = (obj) => {
           let result = [];
@@ -8182,13 +8194,15 @@ var require_cjs3 = __commonJS({
     });
     module2.exports = __toCommonJS2(src_exports2);
     var import_utils210 = __toESM2(require_cjs18(), 1);
-    var toggleFullscreen = (el) => {
+    var toggleFullscreen = async (el) => {
       if (!document.fullscreenElement) {
-        el.node.requestFullscreen().catch((err) => {
+        try {
+          await (el.node || document).requestFullscreen();
+        } catch (err) {
           console.warn(`Error attempting to enable fullscreen mode: ${err.message} (${err.name})`);
-        });
+        }
       } else {
-        document.exitFullscreen();
+        await document.exitFullscreen();
       }
     };
     var import_utils32 = __toESM2(require_cjs18(), 1);
@@ -8243,7 +8257,7 @@ var require_cjs3 = __commonJS({
         }
       });
     };
-    var loadJavascriptFileSync2 = (FILE_URL, doc = document, type = "text/javascript") => {
+    var loadJavascriptFileSync2 = (FILE_URL, doc = document, fallback, type = "text/javascript") => {
       const xhr = new window.XMLHttpRequest();
       xhr.open("GET", FILE_URL, false);
       xhr.send();
@@ -8252,6 +8266,8 @@ var require_cjs3 = __commonJS({
         scriptEle.type = type;
         scriptEle.text = xhr.responseText;
         doc.body.appendChild(scriptEle);
+        if (typeof fallback === "function")
+          fallback();
       } else {
         throw new Error(`Failed to load the script ${FILE_URL}`);
       }
@@ -9971,7 +9987,7 @@ var require_attr = __commonJS({
       if (params) {
         for (const attr in params) {
           const val = (0, import_utils32.exec)(params[attr], element);
-          if ((0, import_utils32.isDefined)(val) && val && node3.setAttribute)
+          if (val !== false && !(0, import_utils32.isUndefined)(val) && !(0, import_utils32.isNull)(val) && node3.setAttribute)
             node3.setAttribute(attr, val);
           else if (node3.removeAttribute)
             node3.removeAttribute(attr);
@@ -10145,11 +10161,9 @@ var require_set = __commonJS({
         ...options
       });
     };
-    var reset = (params = {}, options) => {
+    var reset = (options) => {
       const element = void 0;
-      if (!options.preventRemove)
-        (0, import_content.removeContent)(element, options);
-      (0, import_create.default)(params, element, options.contentElementKey || "content", {
+      (0, import_create.default)(element, element.parent, void 0, {
         ignoreChildExtend: true,
         ...import_mixins.registry.defaultOptions,
         ...import_options3.default.create,
@@ -10335,7 +10349,8 @@ var require_html = __commonJS({
     module2.exports = __toCommonJS2(html_exports);
     var import_utils32 = require_cjs();
     var html_default = (param, element, node3) => {
-      const prop = (0, import_utils32.exec)(param, element);
+      var _a;
+      const prop = (0, import_utils32.exec)(param, element) || (0, import_utils32.exec)((_a = element == null ? void 0 : element.props) == null ? void 0 : _a.html, element);
       const { __ref } = element;
       if (prop !== __ref.__html) {
         if (node3.nodeName === "SVG")
@@ -10780,6 +10795,7 @@ var require_methods2 = __commonJS({
       return parent;
     };
     var lookdown = function(param) {
+      var _a;
       const el = this;
       const { __ref: ref } = el;
       const children = ref.__children;
@@ -10789,18 +10805,19 @@ var require_methods2 = __commonJS({
         if (v === param)
           return childElem;
         else if ((0, import_utils32.isFunction)(param)) {
-          const exec4 = param(childElem, childElem.state, childElem.context);
-          if (childElem.state && exec4) {
+          const exec5 = param(childElem, childElem.state, childElem.context);
+          if (childElem.state && exec5) {
             return childElem;
           }
         }
-        const lookdown2 = childElem == null ? void 0 : childElem.lookdown(param);
+        const lookdown2 = (_a = childElem == null ? void 0 : childElem.lookdown) == null ? void 0 : _a.call(childElem, param);
         if (lookdown2)
           return lookdown2;
       }
       return null;
     };
     var lookdownAll = function(param, results = []) {
+      var _a;
       const el = this;
       const { __ref: ref } = el;
       const children = ref.__children;
@@ -10810,11 +10827,11 @@ var require_methods2 = __commonJS({
         if (v === param)
           results.push(childElem);
         else if ((0, import_utils32.isFunction)(param)) {
-          const exec4 = param(childElem, childElem.state, childElem.context);
-          if (childElem.state && exec4)
+          const exec5 = param(childElem, childElem.state, childElem.context);
+          if (childElem.state && exec5)
             results.push(childElem);
         }
-        childElem == null ? void 0 : childElem.lookdownAll(param, results);
+        (_a = childElem == null ? void 0 : childElem.lookdownAll) == null ? void 0 : _a.call(childElem, param, results);
       }
       return results.length ? results : null;
     };
@@ -12599,7 +12616,7 @@ var require_object3 = __commonJS({
       diff: () => diff,
       diffArrays: () => diffArrays,
       diffObjects: () => diffObjects,
-      exec: () => exec4,
+      exec: () => exec5,
       flattenRecursive: () => flattenRecursive,
       hasOwnProperty: () => hasOwnProperty,
       isEmpty: () => isEmpty,
@@ -12622,7 +12639,7 @@ var require_object3 = __commonJS({
     var import_types = require_types2();
     var import_array = require_array2();
     var import_string = require_string2();
-    var exec4 = (param, element, state, context) => {
+    var exec5 = (param, element, state, context) => {
       if ((0, import_types.isFunction)(param)) {
         return param(
           element,
@@ -12634,7 +12651,7 @@ var require_object3 = __commonJS({
     };
     var map2 = (obj, extention, element) => {
       for (const e in extention) {
-        obj[e] = exec4(extention[e], element);
+        obj[e] = exec5(extention[e], element);
       }
     };
     var merge6 = (element, obj, excludeFrom = []) => {
@@ -14954,7 +14971,7 @@ var require_object4 = __commonJS({
       diff: () => diff,
       diffArrays: () => diffArrays,
       diffObjects: () => diffObjects,
-      exec: () => exec4,
+      exec: () => exec5,
       flattenRecursive: () => flattenRecursive,
       hasOwnProperty: () => hasOwnProperty,
       isEmpty: () => isEmpty,
@@ -14977,7 +14994,7 @@ var require_object4 = __commonJS({
     var import_types = require_types3();
     var import_array = require_array3();
     var import_string = require_string3();
-    var exec4 = (param, element, state, context) => {
+    var exec5 = (param, element, state, context) => {
       if ((0, import_types.isFunction)(param)) {
         return param(
           element,
@@ -14989,7 +15006,7 @@ var require_object4 = __commonJS({
     };
     var map2 = (obj, extention, element) => {
       for (const e in extention) {
-        obj[e] = exec4(extention[e], element);
+        obj[e] = exec5(extention[e], element);
       }
     };
     var merge6 = (element, obj, excludeFrom = []) => {
@@ -17334,6 +17351,7 @@ __export(uikit_exports, {
   CommonField: () => CommonField,
   CommonFieldTemplate: () => CommonFieldTemplate,
   CountIndicator: () => CountIndicator,
+  Data: () => Data,
   Dialog: () => Dialog,
   DialogFooter: () => DialogFooter,
   DialogHeader: () => DialogHeader,
@@ -17826,8 +17844,8 @@ var Img = {
   attr: {
     src: (el) => {
       const { props: props2, context } = el;
-      const { exec: exec4, isString: isString14, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3 } = context.utils;
-      let src = (props2.preSrc || "") + exec4(props2.src, el);
+      const { exec: exec5, isString: isString14, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3 } = context.utils;
+      let src = (props2.preSrc || "") + exec5(props2.src, el);
       if (isString14(src) && src.includes("{{")) {
         src = replaceLiteralsWithObjectFields3(src, el.state);
       }
@@ -17912,8 +17930,8 @@ var getComputedBackgroundColor = ({ props: props2 }) => {
   return (0, import_scratch6.getColor)(props2.shapeDirectionColor) || (0, import_scratch6.getColor)(props2.borderColor) || (0, import_scratch6.getColor)(props2.backgroundColor) || (0, import_scratch6.getColor)(props2.background);
 };
 var inheritTransition = ({ props: props2, deps }) => {
-  const exec4 = Timing.class.transition({ props: props2, deps });
-  return exec4 && exec4.transition;
+  const exec5 = Timing.class.transition({ props: props2, deps });
+  return exec5 && exec5.transition;
 };
 var SHAPES = {
   rectangle: {},
@@ -18578,9 +18596,10 @@ var Collection = {
     $collection: (param, el, state) => {
       const { __ref: ref } = el;
       const { children, childrenAs, childrenExtend } = el.props || {};
-      const hasChildren = (0, import_utils8.isArray)(children);
+      const childrenExec = children && (0, import_utils8.exec)(children, el, state);
+      const hasChildren = (0, import_utils8.isArray)(childrenExec);
       if (hasChildren) {
-        param = children;
+        param = (0, import_utils8.deepCloneWithExtend)(childrenExec);
         if (childrenAs)
           param = param.map((v) => ({ extend: childrenExtend, [childrenAs]: v }));
       } else if (!param)
@@ -18641,7 +18660,8 @@ var Collection = {
       return data;
     },
     $stateCollection: (param, el, state, ctx) => {
-      if (!param)
+      const { children, childrenAs } = el.props || {};
+      if (!param || children || childrenAs)
         return;
       if ((0, import_utils8.isString)(param)) {
         if (param === "state")
@@ -18682,7 +18702,8 @@ var Collection = {
       el.content = obj;
     },
     $propsCollection: (param, el, state) => {
-      if (!param)
+      const { children, childrenAs } = el.props || {};
+      if (!param || children || childrenAs)
         return;
       if ((0, import_utils8.isString)(param)) {
         if (param === "state")
@@ -18816,6 +18837,8 @@ var Svg = {
     const { designSystem, utils: utils2 } = context;
     const SVG = designSystem && designSystem.SVG;
     const useSvgSprite = props2.spriteId || context.designSystem && context.designSystem.useSvgSprite;
+    if (props2.html)
+      return props2.html;
     if (!useSvgSprite && props2.src)
       return props2.src;
     const useSVGSymbol = (icon) => `<use xlink:href="#${icon}" />`;
@@ -18942,6 +18965,7 @@ var Footnote = {
 };
 var B = { tag: "b" };
 var I = { tag: "i" };
+var Data = { tag: "data" };
 
 // ../uikit/Atoms/Transform.js
 var import_utils11 = __toESM(require_cjs());
@@ -19435,8 +19459,8 @@ var Link = {
   },
   attr: {
     href: (el, s, ctx) => {
-      const { isString: isString14, exec: exec4, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3 } = ctx.utils;
-      const href = exec4(el.props.href, el) || exec4(el.props, el).href;
+      const { isString: isString14, exec: exec5, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3 } = ctx.utils;
+      const href = exec5(el.props.href, el) || exec5(el.props, el).href;
       if (isString14(href) && href.includes("{{")) {
         return replaceLiteralsWithObjectFields3(href, s);
       }
@@ -19452,8 +19476,8 @@ var RouterLink = {
     click: (event, el, s) => {
       const { props: props2, context: ctx } = el;
       const { href: h, scrollToTop, stopPropagation } = props2;
-      const { exec: exec4, isString: isString14, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3, isDefined: isDefined2 } = ctx.utils;
-      let href = exec4(h, el, s);
+      const { exec: exec5, isString: isString14, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields3, isDefined: isDefined2 } = ctx.utils;
+      let href = exec5(h, el, s);
       if (isString14(href) && href.includes("{{")) {
         href = replaceLiteralsWithObjectFields3(href, s);
       }
@@ -22171,8 +22195,8 @@ var initRouter = (element, options) => {
   const routerOptions = options.router;
   const router2 = options.snippets && options.snippets.router ? options.snippets.router : import_router2.router;
   const onRouterRenderDefault = (el, s) => {
-    const { pathname, hash: hash3 } = import_utils20.window.location;
-    const url2 = pathname + hash3;
+    const { pathname, search, hash: hash3 } = import_utils20.window.location;
+    const url2 = pathname + search + hash3;
     if (el.routes)
       router2(url2, el, {}, { initialRender: true });
   };
@@ -22199,8 +22223,8 @@ var popStateRouter = (element, options) => {
     return;
   const router2 = options.snippets && options.snippets.router ? options.snippets.router : import_router2.router;
   import_utils20.window.onpopstate = (e) => {
-    const { pathname, hash: hash3 } = import_utils20.window.location;
-    const url2 = pathname + hash3;
+    const { pathname, search, hash: hash3 } = import_utils20.window.location;
+    const url2 = pathname + search + hash3;
     router2(url2, element, {}, { pushState: false, scrollToTop: false, level: 0 });
   };
 };
@@ -25591,19 +25615,29 @@ var ENV = "development";
 var defautlOpts = {};
 var CONNECT_ATTEPT = 0;
 var CONNECT_ATTEPT_MAX_ALLOWED = 1;
-var connect = (key, options = {}) => {
-  const isDev = options.development || window3 && window3.location && window3.location.host.includes("local") || (ENV === "test" || ENV === "development");
+var getIsDev = (options) => {
+  return options.development || window3 && window3.location && window3.location.host.includes("local") || (ENV === "test" || ENV === "development");
+};
+var getSocketUrl = (options, isDev) => {
   const SOCKET_BACKEND_URL = isDev ? "http://localhost:13336/" : "https://socket.symbols.app/";
   const socketUrls = isArray3(options.socketUrl) ? options.socketUrl : [options.socketUrl || SOCKET_BACKEND_URL];
   const primaryUrl = socketUrls[0];
   const secondaryUrl = socketUrls[1] || "socket.symbols.app";
-  const socket = lookup2(primaryUrl || SOCKET_BACKEND_URL, {
+  return {
+    primaryUrl: primaryUrl || SOCKET_BACKEND_URL,
+    secondaryUrl
+  };
+};
+var connect = (key, options = {}) => {
+  const isDev = getIsDev(options);
+  const { primaryUrl, secondaryUrl } = getSocketUrl(options, isDev);
+  const socket = lookup2(primaryUrl || secondaryUrl, {
     // withCredentials: true
   });
   socket.on("connect", () => {
     if (isDev) {
       console.log(
-        `Connected to %c${primaryUrl || SOCKET_BACKEND_URL} %c${key} %c${socket.id}`,
+        `Connected to %c${primaryUrl} %c${key} %c${socket.id}`,
         "font-weight: bold; color: green;",
         "font-weight: bold;",
         ""
@@ -25868,7 +25902,9 @@ var connectedToSymbols = (clients, element, state) => {
       state.update({ connected: false });
       const t = setTimeout(() => {
         delete state.notifications.connected;
-        element.notifications.content.connected.setProps({ animation: "fadeOutDown" });
+        if (element.notifications.content.connected) {
+          element.notifications.content.connected.setProps({ animation: "fadeOutDown" });
+        }
         state.update({ connected: true });
         clearTimeout(t);
       }, 3e3);

package/dist/cjs/router.js

@@ -41,8 +41,8 @@ const initRouter = (element, options) => {
   const routerOptions = options.router;
   const router = options.snippets && options.snippets.router ? options.snippets.router : import_router.router;
   const onRouterRenderDefault = (el, s) => {
-    const { pathname, hash } = import_utils.window.location;
-    const url = pathname + hash;
+    const { pathname, search, hash } = import_utils.window.location;
+    const url = pathname + search + hash;
     if (el.routes)
       router(url, el, {}, { initialRender: true });
   };
@@ -69,8 +69,8 @@ const popStateRouter = (element, options) => {
     return;
   const router = options.snippets && options.snippets.router ? options.snippets.router : import_router.router;
   import_utils.window.onpopstate = (e) => {
-    const { pathname, hash } = import_utils.window.location;
-    const url = pathname + hash;
+    const { pathname, search, hash } = import_utils.window.location;
+    const url = pathname + search + hash;
     router(url, element, {}, { pushState: false, scrollToTop: false, level: 0 });
   };
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@symbo.ls/create",
-  "version": "2.11.417",
+  "version": "2.11.422",
   "license": "MIT",
-  "gitHead": "d3f5ad50e57320d72c7d50bc0309f3308e6b8ff2",
+  "gitHead": "656fc11f2234248ed554e1a1d4ba11c70fa3253b",
   "files": [
     "src",
     "dist"

package/src/router.js

@@ -19,8 +19,8 @@ export const initRouter = (element, options) => {
   const router = (options.snippets && options.snippets.router) ? options.snippets.router : defaultRouter
 
   const onRouterRenderDefault = (el, s) => {
-    const { pathname, hash } = window.location
-    const url = pathname + hash
+    const { pathname, search, hash } = window.location
+    const url = pathname + search + hash
     if (el.routes) router(url, el, {}, { initialRender: true })
   }
 
@@ -50,8 +50,8 @@ export const popStateRouter = (element, options) => {
     ? options.snippets.router
     : defaultRouter
   window.onpopstate = e => {
-    const { pathname, hash } = window.location
-    const url = pathname + hash
+    const { pathname, search, hash } = window.location
+    const url = pathname + search + hash
     router(url, element, {}, { pushState: false, scrollToTop: false, level: 0 })
   }
 }