@tailor-cms/ce-image-edit 0.0.1

package/README.md

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

package/dist/index.cjs

@@ -0,0 +1,176 @@
+"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$1 = {
+  key: 0,
+  class: "text-subtitle-1"
+};
+const _hoisted_2$1 = { class: "pr-2" };
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  __name: "EditPlaceholder",
+  props: {
+    name: { type: String, required: true },
+    icon: { type: String, required: true },
+    placeholder: { type: String, default: "Select to edit" },
+    activePlaceholder: { type: String, default: "Use toolbar to edit" },
+    activeIcon: { type: String, default: null },
+    activeColor: { type: String, default: "#fff" },
+    isDisabled: { type: Boolean, default: false },
+    isFocused: { type: Boolean, default: false },
+    dense: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_VAvatar = vue.resolveComponent("VAvatar");
+      const _component_VIcon = vue.resolveComponent("VIcon");
+      const _component_VSheet = vue.resolveComponent("VSheet");
+      return vue.openBlock(), vue.createBlock(_component_VSheet, {
+        class: vue.normalizeClass([__props.dense ? "pt-3" : "pa-12", "d-flex flex-column align-center transparent text-grey-darken-4"])
+      }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_VAvatar, {
+            color: __props.isDisabled ? "grey-darken-3" : "teal-accent-4",
+            icon: __props.icon,
+            size: __props.dense ? 40 : 60,
+            variant: "tonal"
+          }, null, 8, ["color", "icon", "size"]),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass([
+              __props.isDisabled ? "text-grey-darken-3" : "text-grey-darken-4",
+              __props.dense ? "my-2 text-subtitle-2" : "my-4 text-h6"
+            ])
+          }, vue.toDisplayString(__props.name), 3),
+          !__props.dense && !__props.isDisabled ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+            !__props.isFocused ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              vue.createTextVNode(vue.toDisplayString(__props.placeholder), 1)
+            ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+              vue.createElementVNode("span", _hoisted_2$1, vue.toDisplayString(__props.activePlaceholder), 1),
+              __props.activeIcon ? (vue.openBlock(), vue.createBlock(_component_VIcon, {
+                key: 0,
+                color: "primary-darken-4",
+                size: "20"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(__props.activeIcon), 1)
+                ]),
+                _: 1
+              })) : vue.createCommentVNode("", true)
+            ], 64))
+          ])) : vue.createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["class"]);
+    };
+  }
+});
+const _hoisted_1 = { class: "tce-image" };
+const _hoisted_2 = {
+  key: 1,
+  class: "image-wrapper"
+};
+const _hoisted_3 = { class: "d-flex align-center justify-center fill-height" };
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  __name: "Edit",
+  props: {
+    element: {},
+    isFocused: { type: Boolean },
+    isDisabled: { type: Boolean }
+  },
+  emits: ["save"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_VProgressCircular = vue.resolveComponent("VProgressCircular");
+      const _component_VImg = vue.resolveComponent("VImg");
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        !_ctx.element.data.url ? (vue.openBlock(), vue.createBlock(_sfc_main$3, {
+          key: 0,
+          dense: false,
+          "is-disabled": _ctx.isDisabled,
+          "is-focused": _ctx.isFocused,
+          "active-icon": "mdi-arrow-up",
+          "active-placeholder": "Use toolbar to upload the image",
+          icon: "mdi-image-plus",
+          name: "Image component"
+        }, null, 8, ["is-disabled", "is-focused"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          vue.createVNode(_component_VImg, {
+            src: _ctx.element.data.url,
+            class: "mx-auto"
+          }, {
+            placeholder: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_3, [
+                vue.createVNode(_component_VProgressCircular, {
+                  color: "blue-grey-darken-3",
+                  indeterminate: ""
+                })
+              ])
+            ]),
+            _: 1
+          }, 8, ["src"])
+        ]))
+      ]);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "SideToolbar",
+  props: {
+    element: {}
+  },
+  emits: ["save"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div");
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "TopToolbar",
+  props: {
+    element: {}
+  },
+  emits: ["save"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div");
+    };
+  }
+});
+const manifest = {
+  ...src_default,
+  Edit: _sfc_main$2,
+  SideToolbar: _sfc_main$1,
+  TopToolbar: _sfc_main
+};
+exports.Edit = _sfc_main$2;
+exports.SideToolbar = _sfc_main$1;
+exports.TopToolbar = _sfc_main;
+exports.default = manifest;

package/dist/index.js

@@ -0,0 +1,176 @@
+import "./style.css";
+import { defineComponent, resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createVNode, createElementVNode, toDisplayString, createElementBlock, Fragment, createTextVNode, createCommentVNode } 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$1 = {
+  key: 0,
+  class: "text-subtitle-1"
+};
+const _hoisted_2$1 = { class: "pr-2" };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "EditPlaceholder",
+  props: {
+    name: { type: String, required: true },
+    icon: { type: String, required: true },
+    placeholder: { type: String, default: "Select to edit" },
+    activePlaceholder: { type: String, default: "Use toolbar to edit" },
+    activeIcon: { type: String, default: null },
+    activeColor: { type: String, default: "#fff" },
+    isDisabled: { type: Boolean, default: false },
+    isFocused: { type: Boolean, default: false },
+    dense: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_VAvatar = resolveComponent("VAvatar");
+      const _component_VIcon = resolveComponent("VIcon");
+      const _component_VSheet = resolveComponent("VSheet");
+      return openBlock(), createBlock(_component_VSheet, {
+        class: normalizeClass([__props.dense ? "pt-3" : "pa-12", "d-flex flex-column align-center transparent text-grey-darken-4"])
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_VAvatar, {
+            color: __props.isDisabled ? "grey-darken-3" : "teal-accent-4",
+            icon: __props.icon,
+            size: __props.dense ? 40 : 60,
+            variant: "tonal"
+          }, null, 8, ["color", "icon", "size"]),
+          createElementVNode("div", {
+            class: normalizeClass([
+              __props.isDisabled ? "text-grey-darken-3" : "text-grey-darken-4",
+              __props.dense ? "my-2 text-subtitle-2" : "my-4 text-h6"
+            ])
+          }, toDisplayString(__props.name), 3),
+          !__props.dense && !__props.isDisabled ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
+            !__props.isFocused ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              createTextVNode(toDisplayString(__props.placeholder), 1)
+            ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createElementVNode("span", _hoisted_2$1, toDisplayString(__props.activePlaceholder), 1),
+              __props.activeIcon ? (openBlock(), createBlock(_component_VIcon, {
+                key: 0,
+                color: "primary-darken-4",
+                size: "20"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(__props.activeIcon), 1)
+                ]),
+                _: 1
+              })) : createCommentVNode("", true)
+            ], 64))
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["class"]);
+    };
+  }
+});
+const _hoisted_1 = { class: "tce-image" };
+const _hoisted_2 = {
+  key: 1,
+  class: "image-wrapper"
+};
+const _hoisted_3 = { class: "d-flex align-center justify-center fill-height" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "Edit",
+  props: {
+    element: {},
+    isFocused: { type: Boolean },
+    isDisabled: { type: Boolean }
+  },
+  emits: ["save"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_VProgressCircular = resolveComponent("VProgressCircular");
+      const _component_VImg = resolveComponent("VImg");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        !_ctx.element.data.url ? (openBlock(), createBlock(_sfc_main$3, {
+          key: 0,
+          dense: false,
+          "is-disabled": _ctx.isDisabled,
+          "is-focused": _ctx.isFocused,
+          "active-icon": "mdi-arrow-up",
+          "active-placeholder": "Use toolbar to upload the image",
+          icon: "mdi-image-plus",
+          name: "Image component"
+        }, null, 8, ["is-disabled", "is-focused"])) : (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(_component_VImg, {
+            src: _ctx.element.data.url,
+            class: "mx-auto"
+          }, {
+            placeholder: withCtx(() => [
+              createElementVNode("div", _hoisted_3, [
+                createVNode(_component_VProgressCircular, {
+                  color: "blue-grey-darken-3",
+                  indeterminate: ""
+                })
+              ])
+            ]),
+            _: 1
+          }, 8, ["src"])
+        ]))
+      ]);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "SideToolbar",
+  props: {
+    element: {}
+  },
+  emits: ["save"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div");
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TopToolbar",
+  props: {
+    element: {}
+  },
+  emits: ["save"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div");
+    };
+  }
+});
+const manifest = {
+  ...src_default,
+  Edit: _sfc_main$2,
+  SideToolbar: _sfc_main$1,
+  TopToolbar: _sfc_main
+};
+export {
+  _sfc_main$2 as Edit,
+  _sfc_main$1 as SideToolbar,
+  _sfc_main as TopToolbar,
+  manifest as default
+};

package/dist/style.css

@@ -0,0 +1,4 @@
+
+.image-icon[data-v-881cde78] {
+  position: absolute;
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@tailor-cms/ce-image-edit",
+  "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"
+  }
+}