@tailor-cms/ce-image-display 0.0.1

package/README.md

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

package/dist/index.cjs

@@ -0,0 +1,67 @@
+"use strict";
+var import_style = require("./style.css");
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+var type = "CE_IMAGE";
+var name = "Image";
+var initState = () => ({
+  url: ""
+});
+var ui = {
+  // Display icon, https://pictogrammers.com/library/mdi/
+  icon: "mdi-image",
+  // 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 src_default = manifest$1;
+const _hoisted_1 = { class: "d-flex align-center justify-center fill-height" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "Display",
+  props: {
+    id: {},
+    data: {},
+    userState: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_VProgressCircular = vue.resolveComponent("VProgressCircular");
+      const _component_VImg = vue.resolveComponent("VImg");
+      return vue.openBlock(), vue.createBlock(_component_VImg, {
+        src: _ctx.data.url,
+        class: "mx-auto"
+      }, {
+        placeholder: vue.withCtx(() => [
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.createVNode(_component_VProgressCircular, {
+              color: "blue-grey-darken-3",
+              indeterminate: ""
+            })
+          ])
+        ]),
+        _: 1
+      }, 8, ["src"]);
+    };
+  }
+});
+const manifest = {
+  ...src_default,
+  Display: _sfc_main
+};
+exports.Display = _sfc_main;
+exports.default = manifest;

package/dist/index.js

@@ -0,0 +1,67 @@
+import "./style.css";
+import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, createVNode } from "vue";
+var type = "CE_IMAGE";
+var name = "Image";
+var initState = () => ({
+  url: ""
+});
+var ui = {
+  // Display icon, https://pictogrammers.com/library/mdi/
+  icon: "mdi-image",
+  // 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 src_default = manifest$1;
+const _hoisted_1 = { class: "d-flex align-center justify-center fill-height" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Display",
+  props: {
+    id: {},
+    data: {},
+    userState: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_VProgressCircular = resolveComponent("VProgressCircular");
+      const _component_VImg = resolveComponent("VImg");
+      return openBlock(), createBlock(_component_VImg, {
+        src: _ctx.data.url,
+        class: "mx-auto"
+      }, {
+        placeholder: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(_component_VProgressCircular, {
+              color: "blue-grey-darken-3",
+              indeterminate: ""
+            })
+          ])
+        ]),
+        _: 1
+      }, 8, ["src"]);
+    };
+  }
+});
+const manifest = {
+  ...src_default,
+  Display: _sfc_main
+};
+export {
+  _sfc_main as Display,
+  manifest as default
+};

package/dist/style.css

@@ -0,0 +1,9 @@
+
+.tce-root[data-v-84c72b14] {
+  background-color: transparent;
+  margin-top: 1rem;
+  padding: 1.25rem;
+  border: 2px dashed #888;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1rem;
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@tailor-cms/ce-image-display",
+  "type": "module",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@tailor-cms/eslint-config": "0.0.2",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.5",
+    "vue-tsc": "^1.8.5",
+    "tce-manifest": "npm:@tailor-cms/ce-image-manifest@0.0.1"
+  },
+  "description": "Tailor image element",
+  "author": "Studion <info@gostudion.com> (https://github.com/tailor-cms)",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vue-tsc --noEmit && vite build",
+    "lint": "eslint --ext .js,.ts,.vue ./src",
+    "lint:fix": "pnpm lint --fix"
+  }
+}