@elmethis/vue 0.2.3 → 0.2.5
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, ref,
|
|
1
|
+
import { defineComponent, ref, createElementBlock, openBlock, normalizeClass, createVNode, createElementVNode, Transition, unref, withCtx, withDirectives, vShow, normalizeStyle, createCommentVNode } from "vue";
|
|
2
2
|
import ElmRectangleWave from "../fallback/ElmRectangleWave.vue.mjs";
|
|
3
3
|
import ElmDotLoadingIcon from "../icon/ElmDotLoadingIcon.vue.mjs";
|
|
4
4
|
import { useImage, onKeyStroke, useIntersectionObserver } from "@vueuse/core";
|
|
@@ -20,13 +20,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
20
20
|
setup(__props) {
|
|
21
21
|
const props = __props;
|
|
22
22
|
const { isLoading, error } = useImage({ src: props.src });
|
|
23
|
-
const isLoaded = ref(false);
|
|
24
|
-
watch(
|
|
25
|
-
() => props.src,
|
|
26
|
-
() => {
|
|
27
|
-
isLoaded.value = false;
|
|
28
|
-
}
|
|
29
|
-
);
|
|
30
23
|
const isModalOpen = ref(false);
|
|
31
24
|
onKeyStroke("Escape", (e) => {
|
|
32
25
|
e.preventDefault();
|
|
@@ -69,8 +62,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
69
62
|
createElementVNode("div", {
|
|
70
63
|
class: normalizeClass(_ctx.$style["image-frame"]),
|
|
71
64
|
style: normalizeStyle({
|
|
72
|
-
"--margin-block": __props.margin
|
|
73
|
-
aspectRatio: __props.block ? "1200 / 630" : void 0
|
|
65
|
+
"--margin-block": __props.margin
|
|
74
66
|
})
|
|
75
67
|
}, [
|
|
76
68
|
createVNode(Transition, {
|
|
@@ -111,16 +103,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
111
103
|
onClick: _cache[0] || (_cache[0] = ($event) => {
|
|
112
104
|
if (__props.enableModal) isModalOpen.value = true;
|
|
113
105
|
}),
|
|
114
|
-
onLoad: _cache[1] || (_cache[1] = ($event) => isLoaded.value = true),
|
|
115
|
-
onError: _cache[2] || (_cache[2] = ($event) => isLoaded.value = false),
|
|
116
106
|
style: normalizeStyle({
|
|
117
107
|
cursor: __props.enableModal ? "zoom-in" : void 0,
|
|
118
108
|
"--margin-block": __props.margin,
|
|
119
|
-
opacity:
|
|
109
|
+
opacity: !unref(isLoading) && !unref(error) ? 1 : 0,
|
|
120
110
|
transition: "opacity 220ms ease",
|
|
121
|
-
pointerEvents:
|
|
111
|
+
pointerEvents: !unref(isLoading) && !unref(error) ? void 0 : "none"
|
|
122
112
|
})
|
|
123
|
-
}, null,
|
|
113
|
+
}, null, 14, _hoisted_1)
|
|
124
114
|
]),
|
|
125
115
|
_: 1
|
|
126
116
|
}, 8, ["enter-from-class", "enter-active-class", "enter-to-class", "leave-from-class", "leave-active-class", "leave-to-class"])
|
|
@@ -167,7 +157,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
167
157
|
isModalOpen.value ? (openBlock(), createElementBlock("div", {
|
|
168
158
|
key: 0,
|
|
169
159
|
class: normalizeClass(_ctx.$style.modal),
|
|
170
|
-
onClick: _cache[
|
|
160
|
+
onClick: _cache[1] || (_cache[1] = ($event) => isModalOpen.value = false)
|
|
171
161
|
}, [
|
|
172
162
|
createElementVNode("img", {
|
|
173
163
|
class: normalizeClass(_ctx.$style["modal-image"]),
|
|
@@ -3,28 +3,28 @@
|
|
|
3
3
|
try {
|
|
4
4
|
if (typeof document != "undefined") {
|
|
5
5
|
var elementStyle = document.createElement("style");
|
|
6
|
-
elementStyle.appendChild(document.createTextNode(".
|
|
6
|
+
elementStyle.appendChild(document.createTextNode("._wrapper_yva5m_1{width:100%;display:flex;flex-direction:column;align-items:center;opacity:var(--opacity);transition:opacity .4s}._error_yva5m_10{display:flex;justify-content:center;align-items:center;gap:1rem;width:100%;height:100%;min-height:10rem;line-height:1.5rem;color:#c56565}._image-frame_yva5m_22{position:relative;width:100%;aspect-ratio:1200/630}._fallback_yva5m_28{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;display:flex;justify-content:center;align-items:center;aspect-ratio:1200/630}._image_yva5m_22{display:block;margin-block:var(--margin-block);max-width:100%;max-height:100vh;transition:opacity .22s ease;z-index:0}._image-block_yva5m_50{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;overflow:hidden;border-radius:.25rem;box-shadow:0 0 .125rem #0000004d;z-index:0;transition:opacity .22s ease}._alt-container_yva5m_63{max-width:80%;margin:1rem;display:flex;justify-content:center;align-items:center;gap:1rem;color:#6987b8;opacity:.8}._modal_yva5m_74{position:fixed;z-index:10;top:0;left:0;width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background-color:#23262acc;cursor:zoom-out}._modal-image_yva5m_88{display:block;max-width:100%;cursor:zoom-out}"));
|
|
7
7
|
document.head.appendChild(elementStyle);
|
|
8
8
|
}
|
|
9
9
|
} catch (e) {
|
|
10
10
|
console.error("vite-plugin-css-injected-by-js", e);
|
|
11
11
|
}
|
|
12
12
|
})();
|
|
13
|
-
const wrapper = "
|
|
14
|
-
const error = "
|
|
15
|
-
const fallback = "
|
|
16
|
-
const image = "
|
|
17
|
-
const modal = "
|
|
13
|
+
const wrapper = "_wrapper_yva5m_1";
|
|
14
|
+
const error = "_error_yva5m_10";
|
|
15
|
+
const fallback = "_fallback_yva5m_28";
|
|
16
|
+
const image = "_image_yva5m_22";
|
|
17
|
+
const modal = "_modal_yva5m_74";
|
|
18
18
|
const style0 = {
|
|
19
19
|
wrapper,
|
|
20
20
|
error,
|
|
21
|
-
"image-frame": "_image-
|
|
21
|
+
"image-frame": "_image-frame_yva5m_22",
|
|
22
22
|
fallback,
|
|
23
23
|
image,
|
|
24
|
-
"image-block": "_image-
|
|
25
|
-
"alt-container": "_alt-
|
|
24
|
+
"image-block": "_image-block_yva5m_50",
|
|
25
|
+
"alt-container": "_alt-container_yva5m_63",
|
|
26
26
|
modal,
|
|
27
|
-
"modal-image": "_modal-
|
|
27
|
+
"modal-image": "_modal-image_yva5m_88"
|
|
28
28
|
};
|
|
29
29
|
export {
|
|
30
30
|
style0 as default,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elmethis/vue",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.5",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@ag-ui/core": "^0.0.42",
|
|
38
38
|
"@notionhq/client": "^5.6.0",
|
|
39
|
-
"@storybook/vue3-vite": "10.1.
|
|
39
|
+
"@storybook/vue3-vite": "10.1.11",
|
|
40
40
|
"@types/json-schema": "^7.0.15",
|
|
41
41
|
"@types/katex": "^0.16.7",
|
|
42
42
|
"@types/lodash-es": "^4.17.12",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"jarkup-ts": "^0.6.0",
|
|
47
47
|
"openapi-types": "^12.1.3",
|
|
48
48
|
"postcss": "^8.5.6",
|
|
49
|
-
"postcss-preset-env": "^10.
|
|
49
|
+
"postcss-preset-env": "^10.6.0",
|
|
50
50
|
"sass": "^1.97.1",
|
|
51
51
|
"vite": "^7.3.0",
|
|
52
52
|
"vite-plugin-css-injected-by-js": "^3.5.2",
|