@studiocms/wysiwyg 0.1.0-beta.24

package/dist/common/grapesBlocks/components/tabs/Tabs.js

@@ -0,0 +1,169 @@
+import { resolveTemplate } from "../../consts.js";
+var Tabs_default = (editor, config) => {
+  const { Components } = editor;
+  const script = function(props) {
+    const el = this;
+    const classTabActive = props.classactive;
+    const selectorTab = props.selectortab;
+    const { history } = window;
+    const _isEditor = window._isEditor;
+    const attrSelected = "ariaSelected";
+    const roleTab = "[role=tab]";
+    const roleTabContent = "[role=tabpanel]";
+    const { body, location } = document;
+    const matches = body.matches || // biome-ignore lint/suspicious/noExplicitAny: This is the type that was already used in the original code
+    body.webkitMatchesSelector || // biome-ignore lint/suspicious/noExplicitAny: This is the type that was already used in the original code
+    body.mozMatchesSelector || // biome-ignore lint/suspicious/noExplicitAny: This is the type that was already used in the original code
+    body.msMatchesSelector;
+    const each = (items, clb) => {
+      Array.from(items).forEach(clb);
+    };
+    const hideContents = () => {
+      each(el.querySelectorAll(roleTabContent), (i) => {
+        i.hidden = true;
+      });
+    };
+    const getTabId = (item) => item.getAttribute(selectorTab) || "";
+    const qS = (elem, qs) => elem.querySelector(qs);
+    const getAllTabs = () => el.querySelectorAll(roleTab);
+    const upTabIdx = (item, val) => {
+      if (!_isEditor) {
+        item.tabIndex = Number.parseInt(val);
+      }
+    };
+    const activeTab = (tabEl) => {
+      each(getAllTabs(), (item) => {
+        item.className = item.className.replace(classTabActive, "").trim();
+        item.setAttribute(attrSelected, "false");
+        upTabIdx(item, "-1");
+      });
+      hideContents();
+      tabEl.className += ` ${classTabActive}`;
+      tabEl.setAttribute(attrSelected, "true");
+      upTabIdx(tabEl, "0");
+      const tabContentId = getTabId(tabEl);
+      const tabContent = tabContentId && qS(el, `#${tabContentId}`);
+      if (tabContent) {
+        tabContent.hidden = false;
+      }
+    };
+    const getTabByHash = () => {
+      const hashId = (location.hash || "").replace("#", "");
+      const qrStr = (att) => `${roleTab}[${att}=${hashId}]`;
+      return hashId ? qS(el, qrStr(selectorTab)) : null;
+    };
+    const getSelectedTab = (target) => {
+      return Array.from(getAllTabs()).find((item) => item.contains(target));
+    };
+    let tabToActive = qS(el, `.${classTabActive}${roleTab}`);
+    tabToActive = tabToActive || getTabByHash() || qS(el, roleTab);
+    if (tabToActive) activeTab(tabToActive);
+    el.addEventListener("click", (ev) => {
+      let target = ev.target;
+      if (!target) return;
+      let found = matches.call(target, roleTab);
+      if (!found) {
+        const selectedTab = getSelectedTab(target);
+        if (selectedTab) {
+          target = selectedTab;
+          found = true;
+        }
+      }
+      if (found && !ev.__trg && target.className.indexOf(classTabActive) < 0) {
+        ev.preventDefault();
+        ev.__trg = 1;
+        activeTab(target);
+        const id = getTabId(target);
+        try {
+          history?.pushState(null, "", `#${id}`);
+        } catch (e) {
+          console.error("History API is not supported", e);
+        }
+      }
+    });
+  };
+  const styleText = config.style ? config.style(config) : "";
+  const defTabs = [1, 2, 3].map((i) => ({
+    type: config.typeTab,
+    components: resolveTemplate(config.templateTab, { index: i })
+  }));
+  Components.addType(config.typeTabs, {
+    model: {
+      defaults: {
+        name: "Tabs",
+        classactive: config.classTabActive,
+        selectortab: config.selectorTab,
+        "script-props": ["classactive", "selectortab"],
+        script,
+        traits: [
+          {
+            type: "button",
+            label: "Add Tab",
+            text: "Add Tab",
+            full: true,
+            command: (editor2) => {
+              const selected = editor2.getSelected();
+              selected?.addTab();
+            }
+          }
+        ],
+        components: [
+          { type: config.typeTabContainer, components: defTabs },
+          { type: config.typeTabContents }
+        ],
+        styles: styleText,
+        ...config.tabsProps
+      },
+      // biome-ignore lint/suspicious/noExplicitAny: This is the type that was already used in the original code
+      isTabsComponent(comp) {
+        return comp.findTabs !== void 0;
+      },
+      init() {
+        const component = this;
+        component.findTabs().forEach((tab, index) => {
+          this.__onTab(tab, index + 1, {});
+        });
+        const container = component.getTabContainerType();
+        let tabCount = component.findTabs().length;
+        this.listenTo(container?.components(), "add", (tab) => {
+          tabCount++;
+          tab.__initTab?.(tabCount);
+        });
+      },
+      // biome-ignore lint/suspicious/noExplicitAny: This is the type that was already used in the original code
+      __onTab(tab, index, _v, opts = {}) {
+        if (!opts.avoidStore && !opts.temporary) {
+          tab.__initTab(index);
+        }
+      },
+      getTabContainerType() {
+        return this.findType(config.typeTabContainer)[0];
+      },
+      getContentsType() {
+        return this.findType(config.typeTabContents)[0] || this;
+      },
+      findTabs() {
+        return this.findType(config.typeTab);
+      },
+      findContents() {
+        return this.findType(config.typeTabContent);
+      },
+      addTab(content) {
+        const component = this;
+        const container = component.getTabContainerType();
+        const currentTabs = component.findTabs();
+        const templateProps = {
+          index: currentTabs.length + 1
+        };
+        const finalContent = content ? typeof content === "function" ? content(templateProps) : content : resolveTemplate(config.templateTab, templateProps);
+        container?.append({
+          type: config.typeTab,
+          components: finalContent
+        });
+      }
+    }
+  });
+};
+export {
+  Tabs_default as default
+};

package/dist/common/grapesBlocks/components/tooltip.d.ts

@@ -0,0 +1,4 @@
+import type { Editor } from 'grapesjs';
+import type { RequiredTooltipOptions } from '../types';
+export declare const tooltipComponent: (editor: Editor, opts: RequiredTooltipOptions) => void;
+export default tooltipComponent;

package/dist/common/grapesBlocks/components/tooltip.js

@@ -0,0 +1,246 @@
+const tooltipComponent = (editor, opts) => {
+  const {
+    id: tooltipId,
+    labelTooltip,
+    classTooltip,
+    attrTooltip,
+    style,
+    styleAdditional,
+    extendTraits,
+    showTooltipOnStyle,
+    propsTooltip,
+    stylableTooltip
+  } = opts;
+  const classTooltipBody = `${classTooltip}__body`;
+  const classTooltipEmpty = `${classTooltip}--empty`;
+  const attrTooltipVis = `${attrTooltip}-visible`;
+  const attrTooltipPos = `${attrTooltip}-pos`;
+  const attrTooltipLen = `${attrTooltip}-length`;
+  const traitIdStyleTooltip = "style-tooltip";
+  editor.Components.addType(tooltipId, {
+    isComponent: (el) => el.hasAttribute?.(attrTooltip),
+    model: {
+      defaults: {
+        name: labelTooltip,
+        classes: [classTooltip],
+        attributes: { [attrTooltip]: labelTooltip },
+        styles: (style || `
+          .${classTooltip} {
+            position: relative;
+            display: inline-block;
+            vertical-align: top;
+          }
+
+          .${classTooltipEmpty} {
+            width: 50px;
+            height: 50px;
+          }
+
+          .${classTooltipBody},
+          [${attrTooltip}]::after {
+            font-family: Helvetica, sans-serif;
+            background: rgba(55, 61, 73, 0.95);
+            border-radius: 3px;
+            bottom: 100%;
+            color: #fff;
+            content: attr(${attrTooltip});
+            display: block;
+            font-size: 12px;
+            left: 50%;
+            line-height: normal;
+            max-width: 32rem;
+            opacity: 0;
+            overflow: hidden;
+            padding: 8px 16px;
+            pointer-events: none;
+            position: absolute;
+            text-overflow: ellipsis;
+            transform: translate(-50%, 0);
+            transition: opacity 0.25s, transform 0.25s;
+            white-space: nowrap;
+            box-sizing: border-box;
+            z-index: 10;
+          }
+
+          [${attrTooltipVis}=true]::after,
+          [${attrTooltip}]:focus::after,
+          [${attrTooltip}]:hover::after {
+            opacity: 1;
+            transform: translate(-50%, -0.5rem);
+          }
+
+          [${attrTooltipPos}=right]::after {
+            bottom: 50%;
+            left: 100%;
+            transform: translate(0, 50%);
+          }
+
+          [${attrTooltipPos}=right]:focus::after,
+          [${attrTooltipPos}=right]:hover::after,
+          [${attrTooltipVis}=true][${attrTooltipPos}=right]::after {
+            transform: translate(0.5rem, 50%);
+          }
+
+          [${attrTooltipPos}=bottom]::after {
+            bottom: auto;
+            top: 100%;
+            transform: translate(-50%, 0);
+          }
+
+          [${attrTooltipPos}=bottom]:focus::after,
+          [${attrTooltipPos}=bottom]:hover::after,
+          [${attrTooltipVis}=true][${attrTooltipPos}=bottom]::after {
+            transform: translate(-50%, 0.5rem);
+          }
+
+          [${attrTooltipPos}=left]::after {
+            bottom: 50%;
+            left: auto;
+            right: 100%;
+            transform: translate(0, 50%);
+          }
+
+          [${attrTooltipPos}=left]:focus::after,
+          [${attrTooltipPos}=left]:hover::after,
+          [${attrTooltipVis}=true][${attrTooltipPos}=left]::after {
+            transform: translate(-0.5rem, 50%);
+          }
+
+          [${attrTooltipLen}=small]::after {
+            white-space: normal;
+            width: 80px;
+          }
+
+          [${attrTooltipLen}=medium]::after {
+            white-space: normal;
+            width: 150px;
+          }
+
+          [${attrTooltipLen}=large]::after {
+            white-space: normal;
+            width: 300px;
+          }
+
+          [${attrTooltipLen}=fit]::after {
+            white-space: normal;
+            width: 100%;
+          }
+
+          // IE 11 bugfix
+          button[${attrTooltip}] {
+            overflow: visible;
+          }
+        `) + styleAdditional,
+        // biome-ignore lint/style/noNonNullAssertion: This is the type that was already used in the original code
+        traits: extendTraits([
+          {
+            name: attrTooltip,
+            label: "Text"
+          },
+          {
+            name: attrTooltipPos,
+            label: "Position",
+            type: "select",
+            options: [
+              {
+                value: "top",
+                name: "Top",
+                id: ""
+              },
+              {
+                value: "right",
+                name: "Right",
+                id: ""
+              },
+              {
+                value: "bottom",
+                name: "Bottom",
+                id: ""
+              },
+              {
+                value: "left",
+                name: "Left",
+                id: ""
+              }
+            ]
+          },
+          {
+            name: attrTooltipLen,
+            label: "Length",
+            type: "select",
+            options: [
+              {
+                value: "",
+                name: "One line",
+                id: ""
+              },
+              {
+                value: "small",
+                name: "Small",
+                id: ""
+              },
+              {
+                value: "medium",
+                name: "Medium",
+                id: ""
+              },
+              {
+                value: "large",
+                name: "Large",
+                id: ""
+              },
+              {
+                value: "fit",
+                name: "Fit",
+                id: ""
+              }
+            ]
+          },
+          {
+            name: attrTooltipVis,
+            label: "Visible",
+            type: "checkbox",
+            valueTrue: "true"
+          },
+          {
+            name: traitIdStyleTooltip,
+            labelButton: "Style tooltip",
+            type: "button",
+            full: true,
+            command: (editor2) => {
+              const openSm = editor2.Panels.getButton("views", "open-sm");
+              openSm?.set("active", true);
+              const ruleTooltip = editor2.Css.getRules(`.${classTooltipBody}`)[0];
+              ruleTooltip.set("stylable", stylableTooltip);
+              editor2.StyleManager.select(ruleTooltip);
+              if (showTooltipOnStyle) {
+                const selected = editor2.getSelected();
+                if (selected?.is(tooltipId)) {
+                  selected.addAttributes({ [attrTooltipVis]: "true" });
+                  editor2.once("style:target", () => {
+                    selected.addAttributes({ [attrTooltipVis]: "false" });
+                  });
+                }
+              }
+            }
+          }
+        ]),
+        // biome-ignore lint/suspicious/noExplicitAny: This is the type that was already used in the original code
+        ...propsTooltip
+      },
+      init() {
+        this.listenTo(this.components(), "add remove", this.checkEmpty);
+        this.checkEmpty();
+      },
+      checkEmpty() {
+        const empty = !this.components().length;
+        this[empty ? "addClass" : "removeClass"](`${classTooltipEmpty}`);
+      }
+    }
+  });
+};
+var tooltip_default = tooltipComponent;
+export {
+  tooltip_default as default,
+  tooltipComponent
+};

package/dist/common/grapesBlocks/components/typed.d.ts

@@ -0,0 +1,9 @@
+import type { Editor } from 'grapesjs';
+import type { RequiredTypedOptions } from '../types.js';
+declare global {
+    interface Window {
+        Typed: any;
+    }
+}
+declare const _default: (editor: Editor, opts: RequiredTypedOptions) => void;
+export default _default;

package/dist/common/grapesBlocks/components/typed.js

@@ -0,0 +1,109 @@
+import { typedId, typedTraitStringId } from "../consts.js";
+const getTraitType = (value) => {
+  if (typeof value === "number") return "number";
+  if (typeof value === "boolean") return "checkbox";
+  return "text";
+};
+var typed_default = (editor, opts) => {
+  const domc = editor.DomComponents;
+  const { keys } = Object;
+  const typedProps = {
+    strings: [],
+    "type-speed": 0,
+    "start-delay": 0,
+    "back-speed": 0,
+    "smart-backspace": true,
+    "back-delay": 700,
+    "fade-out": false,
+    "fade-out-class": "typed-fade-out",
+    "fade-out-delay": 500,
+    "show-cursor": true,
+    "cursor-char": "|",
+    "auto-insert-css": true,
+    "bind-input-focus-events": false,
+    "content-type": "html",
+    loop: false,
+    "loop-count": Number.POSITIVE_INFINITY,
+    shuffle: false,
+    attr: ""
+  };
+  const typedPropsKeys = keys(typedProps);
+  const traits = typedPropsKeys.filter((item) => ["strings"].indexOf(item) < 0).map((name) => ({
+    changeProp: true,
+    // biome-ignore lint/suspicious/noExplicitAny: This is the type that was already used in the original code
+    type: getTraitType(typedProps[name]),
+    min: 0,
+    name
+  }));
+  traits.unshift({
+    changeProp: true,
+    name: "strings",
+    type: typedTraitStringId
+  });
+  domc.addType(typedId, {
+    model: {
+      defaults: opts.props({
+        ...typedProps,
+        typedsrc: opts.script,
+        droppable: 0,
+        traits,
+        "script-props": [...typedPropsKeys, "typedsrc"],
+        script(props) {
+          const getStrings = (value) => {
+            if (Array.isArray(value)) {
+              return value;
+            }
+            if (value.indexOf("\n") >= 0) {
+              return value.split("\n");
+            }
+            return [];
+          };
+          const strings = getStrings(props.strings);
+          const int = (num) => Number.parseInt(num, 10) || 0;
+          const bool = (val) => !!val;
+          const init = () => {
+            const el = this;
+            el.innerHTML = "<span></span>";
+            const loopCount = Number.parseInt(`${props["loop-count"]}`, 10);
+            `${props["type-speed"]}`;
+            const config = {
+              typeSpeed: int(props["type-speed"]),
+              startDelay: int(props["start-delay"]),
+              backDelay: int(props["back-delay"]),
+              backSpeed: int(props["back-speed"]),
+              smartBackspace: bool(props["smart-backspace"]),
+              fadeOut: bool(props["fade-out"]),
+              fadeOutClass: props["fade-out-class"],
+              fadeOutDelay: int(props["fade-out-delay"]),
+              shuffle: bool(props.shuffle),
+              loop: bool(props.loop),
+              loopCount: Number.isNaN(loopCount) ? Number.POSITIVE_INFINITY : loopCount,
+              showCursor: bool(props["show-cursor"]),
+              cursorChar: props["cursor-char"],
+              autoInsertCss: bool(props["auto-insert-css"]),
+              bindInputFocusEvents: bool(props["bind-input-focus-events"]),
+              attr: props.attr,
+              contentType: props["content-type"]
+            };
+            if (strings?.length) {
+              config.strings = strings;
+            }
+            new window.Typed(el.children[0], config);
+          };
+          if (!window.Typed) {
+            const scr = document.createElement("script");
+            scr.src = props.typedsrc;
+            scr.onload = init;
+            document.head.appendChild(scr);
+          } else {
+            init();
+          }
+        }
+        // biome-ignore lint/suspicious/noExplicitAny: This is the type that was already used in the original code
+      })
+    }
+  });
+};
+export {
+  typed_default as default
+};

package/dist/common/grapesBlocks/consts.d.ts

@@ -0,0 +1,25 @@
+import type { RequiredGrapesBlocksOptions, TabsOptions, TabTemplate, TabTemplateProps } from './types.js';
+export declare const cmdImport = "gjs-open-import-webpage";
+export declare const cmdDeviceDesktop = "set-device-desktop";
+export declare const cmdDeviceTablet = "set-device-tablet";
+export declare const cmdDeviceMobile = "set-device-mobile";
+export declare const exportTemplate = "export-template";
+export declare const cmdClear = "canvas-clear";
+export declare const cmdSave = "store-data";
+export declare const typedId = "typed";
+export declare const typedTraitStringId = "typed-strings";
+export declare const keyCustomCode = "custom-code-plugin__code";
+export declare const typeCustomCode = "custom-code";
+export declare const commandNameCustomCode = "custom-code:open-modal";
+export declare const typeForm = "form";
+export declare const typeInput = "input";
+export declare const typeTextarea = "textarea";
+export declare const typeSelect = "select";
+export declare const typeCheckbox = "checkbox";
+export declare const typeRadio = "radio";
+export declare const typeButton = "button";
+export declare const typeLabel = "label";
+export declare const typeOption = "option";
+export declare const resolveTemplate: (template: TabTemplate | undefined, props: TabTemplateProps) => string | undefined;
+export declare const mergeStyles: (userStyle?: (config: TabsOptions) => string) => (config: TabsOptions) => string;
+export declare const defaultGrapesBlocksOptions: RequiredGrapesBlocksOptions;