@tailor-cms/ce-image-display 1.1.1-beta.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/Display.vue.d.ts +1 -2
  2. package/dist/index.cjs +48 -30
  3. package/dist/index.css +21 -1
  4. package/dist/index.js +49 -31
  5. package/package.json +11 -8
package/dist/components/Display.vue.d.ts CHANGED
@@ -1,7 +1,6 @@
1
- import { Element } from '@tailor-cms/ce-image-manifest';
1
+ import type { Element } from '@tailor-cms/ce-image-manifest';
2
2
  type __VLS_Props = {
3
3
  element: Element;
4
- userState: any;
5
4
  };
6
5
  declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
7
6
  declare const _default: typeof __VLS_export;
package/dist/index.cjs CHANGED
@@ -3,7 +3,7 @@ Object.defineProperties(exports, {
3
3
  [Symbol.toStringTag]: { value: "Module" }
4
4
  });
5
5
  require('./index.css');let vue = require("vue");
6
- //#region ../manifest/dist/index.js
6
+ //#region ../manifest/dist/index.mjs
7
7
  var type = "IMAGE";
8
8
  var name = "Image";
9
9
  var initState = () => ({
@@ -16,7 +16,7 @@ var ui = {
16
16
  forceFullWidth: false
17
17
  };
18
18
  var isEmpty = (data) => !data.url;
19
- var index_default = {
19
+ var manifest$1 = {
20
20
  type,
21
21
  version: "1.0",
22
22
  name,
@@ -28,41 +28,59 @@ var index_default = {
28
28
  //#endregion
29
29
  //#region src/components/Display.vue?vue&type=script&setup=true&lang.ts
30
30
  var _hoisted_1 = { class: "tce-image-root" };
31
- var _hoisted_2 = { class: "d-flex align-center justify-center fill-height" };
31
+ var _hoisted_2 = ["aria-label"];
32
+ var _hoisted_3 = { class: "d-flex align-center justify-center fill-height" };
33
+ var _hoisted_4 = ["alt", "src"];
32
34
  var Display_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
33
35
  __name: "Display",
34
- props: {
35
- element: {},
36
- userState: {}
37
- },
36
+ props: { element: {} },
38
37
  setup(__props) {
38
+ const props = __props;
39
+ const closeBtn = (0, vue.useTemplateRef)("closeBtn");
40
+ const url = (0, vue.computed)(() => props.element.data.url);
39
41
  return (_ctx, _cache) => {
40
42
  const _component_VProgressCircular = (0, vue.resolveComponent)("VProgressCircular");
41
43
  const _component_VImg = (0, vue.resolveComponent)("VImg");
42
- const _component_VIcon = (0, vue.resolveComponent)("VIcon");
43
- const _component_VSheet = (0, vue.resolveComponent)("VSheet");
44
- return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [__props.element.data.url ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_VImg, {
45
- key: 0,
46
- alt: __props.element.data.alt,
47
- src: __props.element.data.url,
48
- class: "mx-auto"
44
+ const _component_VBtn = (0, vue.resolveComponent)("VBtn");
45
+ const _component_VDialog = (0, vue.resolveComponent)("VDialog");
46
+ return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [(0, vue.createVNode)(_component_VDialog, {
47
+ "aria-label": "Image viewer",
48
+ "content-class": "d-flex align-center justify-center h-100 w-100",
49
+ transition: "fade-transition",
50
+ onAfterEnter: _cache[0] || (_cache[0] = ($event) => closeBtn.value?.$el?.focus())
49
51
  }, {
50
- placeholder: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_2, [(0, vue.createVNode)(_component_VProgressCircular, {
51
- color: "blue-grey-darken-3",
52
- indeterminate: ""
53
- })])]),
54
- _: 1
55
- }, 8, ["alt", "src"])) : ((0, vue.openBlock)(), (0, vue.createBlock)(_component_VSheet, {
56
- key: 1,
57
- class: "d-flex justify-center align-center my-2 text-title-large",
58
- height: "15.5rem"
59
- }, {
60
- default: (0, vue.withCtx)(() => [(0, vue.createVNode)(_component_VIcon, { class: "mr-2" }, {
61
- default: (0, vue.withCtx)(() => [..._cache[0] || (_cache[0] = [(0, vue.createTextVNode)("mdi-image-outline", -1)])]),
52
+ activator: (0, vue.withCtx)(({ props: overlayProps }) => [(0, vue.createElementVNode)("button", (0, vue.mergeProps)(overlayProps, {
53
+ "aria-label": `Open image viewer: ${__props.element.data.alt || "image"}`,
54
+ class: "image-viewer-activator"
55
+ }), [(0, vue.createVNode)(_component_VImg, {
56
+ alt: __props.element.data.alt,
57
+ src: url.value,
58
+ class: "mx-auto",
59
+ rounded: "lg"
60
+ }, {
61
+ placeholder: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_3, [(0, vue.createVNode)(_component_VProgressCircular, {
62
+ "aria-label": "Loading image",
63
+ color: "blue-grey-darken-3",
64
+ indeterminate: ""
65
+ })])]),
62
66
  _: 1
63
- }), _cache[1] || (_cache[1] = (0, vue.createTextVNode)(" Image placeholder ", -1))]),
67
+ }, 8, ["alt", "src"])], 16, _hoisted_2)]),
68
+ default: (0, vue.withCtx)(({ isActive }) => [(0, vue.createVNode)(_component_VBtn, {
69
+ ref_key: "closeBtn",
70
+ ref: closeBtn,
71
+ "aria-label": "Close image viewer",
72
+ class: "position-absolute top-0 right-0",
73
+ color: "white",
74
+ icon: "mdi-close",
75
+ variant: "tonal",
76
+ onClick: ($event) => isActive.value = false
77
+ }, null, 8, ["onClick"]), (0, vue.createElementVNode)("img", {
78
+ alt: __props.element.data.alt,
79
+ src: url.value,
80
+ class: "viewer-image"
81
+ }, null, 8, _hoisted_4)]),
64
82
  _: 1
65
- }))]);
83
+ })]);
66
84
  };
67
85
  }
68
86
  });
@@ -75,11 +93,11 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
75
93
  };
76
94
  //#endregion
77
95
  //#region src/components/Display.vue
78
- var Display_default = /* @__PURE__ */ _plugin_vue_export_helper_default(Display_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-537894d1"]]);
96
+ var Display_default = /* @__PURE__ */ _plugin_vue_export_helper_default(Display_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-befe605b"]]);
79
97
  //#endregion
80
98
  //#region src/index.ts
81
99
  var manifest = {
82
- ...index_default,
100
+ ...manifest$1,
83
101
  Display: Display_default
84
102
  };
85
103
  //#endregion
package/dist/index.css CHANGED
@@ -1,3 +1,23 @@
1
1
 
2
- .tce-image-root[data-v-537894d1] {
2
+ .image-viewer-activator {
3
+ &[data-v-befe605b] {
4
+ display: block;
5
+ width: 100%;
6
+ border: none;
7
+ padding: 0;
8
+ background: transparent;
9
+ border-radius: 8px;
10
+ }
11
+ &[data-v-befe605b]:focus-visible {
12
+ outline: 3px solid highlight;
13
+ outline-offset: 2px;
14
+ }
15
+ }
16
+ .viewer-image[data-v-befe605b] {
17
+ max-width: 90vw;
18
+ max-height: 90vh;
19
+ border-radius: 8px;
20
+ }
21
+ .v-overlay--active[data-v-befe605b] {
22
+ backdrop-filter: blur(18px);
3
23
  }
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
- import { createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, resolveComponent, withCtx } from "vue";
2
- import './index.css';//#region ../manifest/dist/index.js
1
+ import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, resolveComponent, useTemplateRef, withCtx } from "vue";
2
+ import './index.css';//#region ../manifest/dist/index.mjs
3
3
  var type = "IMAGE";
4
4
  var name = "Image";
5
5
  var initState = () => ({
@@ -12,7 +12,7 @@ var ui = {
12
12
  forceFullWidth: false
13
13
  };
14
14
  var isEmpty = (data) => !data.url;
15
- var index_default = {
15
+ var manifest$1 = {
16
16
  type,
17
17
  version: "1.0",
18
18
  name,
@@ -24,41 +24,59 @@ var index_default = {
24
24
  //#endregion
25
25
  //#region src/components/Display.vue?vue&type=script&setup=true&lang.ts
26
26
  var _hoisted_1 = { class: "tce-image-root" };
27
- var _hoisted_2 = { class: "d-flex align-center justify-center fill-height" };
27
+ var _hoisted_2 = ["aria-label"];
28
+ var _hoisted_3 = { class: "d-flex align-center justify-center fill-height" };
29
+ var _hoisted_4 = ["alt", "src"];
28
30
  var Display_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
29
31
  __name: "Display",
30
- props: {
31
- element: {},
32
- userState: {}
33
- },
32
+ props: { element: {} },
34
33
  setup(__props) {
34
+ const props = __props;
35
+ const closeBtn = useTemplateRef("closeBtn");
36
+ const url = computed(() => props.element.data.url);
35
37
  return (_ctx, _cache) => {
36
38
  const _component_VProgressCircular = resolveComponent("VProgressCircular");
37
39
  const _component_VImg = resolveComponent("VImg");
38
- const _component_VIcon = resolveComponent("VIcon");
39
- const _component_VSheet = resolveComponent("VSheet");
40
- return openBlock(), createElementBlock("div", _hoisted_1, [__props.element.data.url ? (openBlock(), createBlock(_component_VImg, {
41
- key: 0,
42
- alt: __props.element.data.alt,
43
- src: __props.element.data.url,
44
- class: "mx-auto"
40
+ const _component_VBtn = resolveComponent("VBtn");
41
+ const _component_VDialog = resolveComponent("VDialog");
42
+ return openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_VDialog, {
43
+ "aria-label": "Image viewer",
44
+ "content-class": "d-flex align-center justify-center h-100 w-100",
45
+ transition: "fade-transition",
46
+ onAfterEnter: _cache[0] || (_cache[0] = ($event) => closeBtn.value?.$el?.focus())
45
47
  }, {
46
- placeholder: withCtx(() => [createElementVNode("div", _hoisted_2, [createVNode(_component_VProgressCircular, {
47
- color: "blue-grey-darken-3",
48
- indeterminate: ""
49
- })])]),
50
- _: 1
51
- }, 8, ["alt", "src"])) : (openBlock(), createBlock(_component_VSheet, {
52
- key: 1,
53
- class: "d-flex justify-center align-center my-2 text-title-large",
54
- height: "15.5rem"
55
- }, {
56
- default: withCtx(() => [createVNode(_component_VIcon, { class: "mr-2" }, {
57
- default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("mdi-image-outline", -1)])]),
48
+ activator: withCtx(({ props: overlayProps }) => [createElementVNode("button", mergeProps(overlayProps, {
49
+ "aria-label": `Open image viewer: ${__props.element.data.alt || "image"}`,
50
+ class: "image-viewer-activator"
51
+ }), [createVNode(_component_VImg, {
52
+ alt: __props.element.data.alt,
53
+ src: url.value,
54
+ class: "mx-auto",
55
+ rounded: "lg"
56
+ }, {
57
+ placeholder: withCtx(() => [createElementVNode("div", _hoisted_3, [createVNode(_component_VProgressCircular, {
58
+ "aria-label": "Loading image",
59
+ color: "blue-grey-darken-3",
60
+ indeterminate: ""
61
+ })])]),
58
62
  _: 1
59
- }), _cache[1] || (_cache[1] = createTextVNode(" Image placeholder ", -1))]),
63
+ }, 8, ["alt", "src"])], 16, _hoisted_2)]),
64
+ default: withCtx(({ isActive }) => [createVNode(_component_VBtn, {
65
+ ref_key: "closeBtn",
66
+ ref: closeBtn,
67
+ "aria-label": "Close image viewer",
68
+ class: "position-absolute top-0 right-0",
69
+ color: "white",
70
+ icon: "mdi-close",
71
+ variant: "tonal",
72
+ onClick: ($event) => isActive.value = false
73
+ }, null, 8, ["onClick"]), createElementVNode("img", {
74
+ alt: __props.element.data.alt,
75
+ src: url.value,
76
+ class: "viewer-image"
77
+ }, null, 8, _hoisted_4)]),
60
78
  _: 1
61
- }))]);
79
+ })]);
62
80
  };
63
81
  }
64
82
  });
@@ -71,11 +89,11 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
71
89
  };
72
90
  //#endregion
73
91
  //#region src/components/Display.vue
74
- var Display_default = /* @__PURE__ */ _plugin_vue_export_helper_default(Display_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-537894d1"]]);
92
+ var Display_default = /* @__PURE__ */ _plugin_vue_export_helper_default(Display_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-befe605b"]]);
75
93
  //#endregion
76
94
  //#region src/index.ts
77
95
  var manifest = {
78
- ...index_default,
96
+ ...manifest$1,
79
97
  Display: Display_default
80
98
  };
81
99
  //#endregion
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Tailor CMS image element end-user component",
4
4
  "author": "Studion <info@gostudion.com> (https://github.com/tailor-cms)",
5
5
  "type": "module",
6
- "version": "1.1.1-beta.0",
6
+ "version": "2.0.0",
7
7
  "exports": {
8
8
  ".": {
9
9
  "import": "./dist/index.js",
@@ -19,18 +19,21 @@
19
19
  "vue": "^3.5.29"
20
20
  },
21
21
  "devDependencies": {
22
- "@tailor-cms/eslint-config": "^2.0.0-beta.0",
23
- "@vitejs/plugin-vue": "^6.0.5",
24
- "typescript": "^5.9.3",
25
- "vite": "^8.0.0",
22
+ "@tailor-cms/eslint-config": "^2.0.1",
23
+ "@vitejs/plugin-vue": "^6.0.6",
24
+ "typescript": "^6.0.3",
25
+ "vite": "^8.0.10",
26
26
  "vite-plugin-lib-inject-css": "^2.2.2",
27
- "vue-tsc": "^3.2.5",
28
- "vuetify": "^4.0.0",
29
- "@tailor-cms/ce-image-manifest": "1.1.1-beta.0"
27
+ "vue-tsc": "^3.2.7",
28
+ "vuetify": "^4.0.6",
29
+ "@tailor-cms/ce-image-manifest": "2.0.0"
30
30
  },
31
31
  "publishConfig": {
32
32
  "access": "public"
33
33
  },
34
+ "engines": {
35
+ "node": ">=24"
36
+ },
34
37
  "scripts": {
35
38
  "dev": "vite build --watch",
36
39
  "build": "pnpm nuke:dist && vue-tsc && vite build",