@tailor-cms/ce-html-raw-display 0.0.1

package/README.md

@@ -0,0 +1 @@
+# Content element `Display` component

package/dist/components/Display.vue.d.ts

@@ -0,0 +1,11 @@
+import { Element } from '@tailor-cms/ce-html-raw-manifest';
+type __VLS_Props = {
+    element: Element;
+    userState: any;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    interaction: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onInteraction?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/index.cjs

@@ -0,0 +1,79 @@
+"use strict";
+var import_index = require("./index.css");
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+var type = "HTML_RAW";
+var name = "Raw HTML";
+var initState = () => ({
+  content: ""
+});
+var ui = {
+  // Display icon, https://pictogrammers.com/library/mdi/
+  icon: "mdi-code-tags",
+  // Does element support only full width or can be used within layouts
+  // (e.g. 50/50 layout)
+  forceFullWidth: true
+};
+var mocks = {
+  displayContexts: [
+    { name: "Test preset 1", data: { state: "I have a value" } },
+    { name: "Test preset 2", data: { state: "I have a different value" } }
+  ]
+};
+var manifest$1 = {
+  type,
+  version: "1.0",
+  name,
+  ssr: false,
+  initState,
+  ui,
+  mocks
+};
+var index_default = manifest$1;
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "Display",
+  props: {
+    element: {},
+    userState: {}
+  },
+  emits: ["interaction"],
+  setup(__props) {
+    const props = __props;
+    const displayFrame = vue.useTemplateRef("displayFrame");
+    function updateFrameContent(iframe, content) {
+      iframe.contentDocument.body.innerHTML = content;
+      updateHeight(displayFrame.value);
+      setTimeout(() => updateHeight(displayFrame.value), 1e3);
+    }
+    function updateHeight(frame) {
+      const height = frame.contentWindow.document.body.scrollHeight;
+      frame.height = height > 180 ? height : 180;
+    }
+    vue.onMounted(() => {
+      updateFrameContent(displayFrame.value, props.element.data.content || "");
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("iframe", {
+        ref_key: "displayFrame",
+        ref: displayFrame,
+        class: "mt-4",
+        title: "Preview",
+        width: "100%"
+      }, null, 512);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const Display = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9c52b481"]]);
+const manifest = {
+  ...index_default,
+  Display
+};
+exports.Display = Display;
+exports.default = manifest;

package/dist/index.css

@@ -0,0 +1,4 @@
+
+iframe[data-v-9c52b481] {
+  border: none;
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import type { ElementManifest } from '@tailor-cms/ce-html-raw-manifest';
+import Display from './components/Display.vue';
+declare const manifest: ElementManifest;
+export default manifest;
+export { Display };

package/dist/index.js

@@ -0,0 +1,79 @@
+import "./index.css";
+import { defineComponent, useTemplateRef, onMounted, createElementBlock, openBlock } from "vue";
+var type = "HTML_RAW";
+var name = "Raw HTML";
+var initState = () => ({
+  content: ""
+});
+var ui = {
+  // Display icon, https://pictogrammers.com/library/mdi/
+  icon: "mdi-code-tags",
+  // Does element support only full width or can be used within layouts
+  // (e.g. 50/50 layout)
+  forceFullWidth: true
+};
+var mocks = {
+  displayContexts: [
+    { name: "Test preset 1", data: { state: "I have a value" } },
+    { name: "Test preset 2", data: { state: "I have a different value" } }
+  ]
+};
+var manifest$1 = {
+  type,
+  version: "1.0",
+  name,
+  ssr: false,
+  initState,
+  ui,
+  mocks
+};
+var index_default = manifest$1;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Display",
+  props: {
+    element: {},
+    userState: {}
+  },
+  emits: ["interaction"],
+  setup(__props) {
+    const props = __props;
+    const displayFrame = useTemplateRef("displayFrame");
+    function updateFrameContent(iframe, content) {
+      iframe.contentDocument.body.innerHTML = content;
+      updateHeight(displayFrame.value);
+      setTimeout(() => updateHeight(displayFrame.value), 1e3);
+    }
+    function updateHeight(frame) {
+      const height = frame.contentWindow.document.body.scrollHeight;
+      frame.height = height > 180 ? height : 180;
+    }
+    onMounted(() => {
+      updateFrameContent(displayFrame.value, props.element.data.content || "");
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("iframe", {
+        ref_key: "displayFrame",
+        ref: displayFrame,
+        class: "mt-4",
+        title: "Preview",
+        width: "100%"
+      }, null, 512);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const Display = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9c52b481"]]);
+const manifest = {
+  ...index_default,
+  Display
+};
+export {
+  Display,
+  manifest as default
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@tailor-cms/ce-html-raw-display",
+  "description": "Raw HTML display component",
+  "author": "Studion <info@gostudion.com> (https://github.com/tailor-cms)",
+  "type": "module",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "types": "./types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@tailor-cms/eslint-config": "1.1.2",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.3",
+    "vue-tsc": "^3.0.1",
+    "@tailor-cms/ce-html-raw-manifest": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "pnpm nuke:dist && vue-tsc && vite build",
+    "lint": "eslint ./src",
+    "lint:fix": "pnpm lint --fix",
+    "nuke": "pnpm dlx del-cli dist node_modules",
+    "nuke:dist": "pnpm dlx del-cli dist",
+    "prepublish": "pnpm build"
+  }
+}