@tailor-cms/ce-file-display 0.0.1

package/README.md

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

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

@@ -0,0 +1,8 @@
+import { ElementData } from '@tailor-cms/ce-file-manifest';
+type __VLS_Props = {
+    id: number;
+    data: ElementData;
+    userState: any;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/index.cjs

@@ -0,0 +1,93 @@
+"use strict";
+var import_index = require("./index.css");
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+var type = "FILE";
+var name = "File";
+var initState = () => ({
+  url: null,
+  name: null,
+  label: null,
+  assets: {}
+});
+var ui = {
+  // Display icon, https://pictogrammers.com/library/mdi/
+  icon: "mdi-file",
+  // Does element support only full width or can be used within layouts
+  // (e.g. 50/50 layout)
+  forceFullWidth: false
+};
+var manifest$1 = {
+  type,
+  version: "1.0",
+  name,
+  ssr: false,
+  initState,
+  ui
+};
+var index_default = manifest$1;
+const _hoisted_1 = { class: "tce-file-root" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "Display",
+  props: {
+    id: {},
+    data: {},
+    userState: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const label = vue.computed(() => {
+      const { data } = props;
+      return data.label || "Download file";
+    });
+    const downloadFile = async () => {
+      const { data } = props;
+      const { url } = data;
+      if (!url) return;
+      const res = await fetch(url);
+      const blob = await res.blob();
+      const blobUrl = await URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = blobUrl;
+      const filename = data.name || data.label || "untitled";
+      link.setAttribute("download", filename);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    };
+    return (_ctx, _cache) => {
+      const _component_VIcon = vue.resolveComponent("VIcon");
+      const _component_VBtn = vue.resolveComponent("VBtn");
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(_component_VBtn, {
+          color: "primary-darken-2",
+          variant: "tonal",
+          onClick: downloadFile
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_VIcon, {
+              icon: "mdi-file-download",
+              start: ""
+            }),
+            vue.createTextVNode(" " + vue.toDisplayString(label.value), 1)
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+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-7501f8a1"]]);
+const manifest = {
+  ...index_default,
+  Display
+};
+exports.Display = Display;
+exports.default = manifest;

package/dist/index.css

@@ -0,0 +1,7 @@
+
+.tce-file-root[data-v-7501f8a1] {
+  background-color: transparent;
+  margin: 1rem;
+  padding: 1.5rem;
+  text-align: center;
+}

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,93 @@
+import "./index.css";
+import { defineComponent, computed, resolveComponent, createElementBlock, openBlock, createVNode, withCtx, createTextVNode, toDisplayString } from "vue";
+var type = "FILE";
+var name = "File";
+var initState = () => ({
+  url: null,
+  name: null,
+  label: null,
+  assets: {}
+});
+var ui = {
+  // Display icon, https://pictogrammers.com/library/mdi/
+  icon: "mdi-file",
+  // Does element support only full width or can be used within layouts
+  // (e.g. 50/50 layout)
+  forceFullWidth: false
+};
+var manifest$1 = {
+  type,
+  version: "1.0",
+  name,
+  ssr: false,
+  initState,
+  ui
+};
+var index_default = manifest$1;
+const _hoisted_1 = { class: "tce-file-root" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Display",
+  props: {
+    id: {},
+    data: {},
+    userState: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const label = computed(() => {
+      const { data } = props;
+      return data.label || "Download file";
+    });
+    const downloadFile = async () => {
+      const { data } = props;
+      const { url } = data;
+      if (!url) return;
+      const res = await fetch(url);
+      const blob = await res.blob();
+      const blobUrl = await URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = blobUrl;
+      const filename = data.name || data.label || "untitled";
+      link.setAttribute("download", filename);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    };
+    return (_ctx, _cache) => {
+      const _component_VIcon = resolveComponent("VIcon");
+      const _component_VBtn = resolveComponent("VBtn");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_component_VBtn, {
+          color: "primary-darken-2",
+          variant: "tonal",
+          onClick: downloadFile
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_VIcon, {
+              icon: "mdi-file-download",
+              start: ""
+            }),
+            createTextVNode(" " + toDisplayString(label.value), 1)
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+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-7501f8a1"]]);
+const manifest = {
+  ...index_default,
+  Display
+};
+export {
+  Display,
+  manifest as default
+};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@tailor-cms/ce-file-display",
+  "description": "Tailor CMS file end-user 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": "0.0.2",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.0",
+    "vue-tsc": "^2.2.0",
+    "@tailor-cms/ce-file-manifest": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vue-tsc && vite build",
+    "lint": "eslint --ext .js,.ts,.vue ./src",
+    "lint:fix": "pnpm lint --fix"
+  }
+}