@elmethis/core 1.0.0-alpha.16 → 1.0.0-alpha.160

package/dist/components/media/ElmImage2.css

@@ -0,0 +1,51 @@
+._image_1brnh_1 {
+  display: block;
+  margin-block: var(--margin-block);
+  width: 100%;
+  height: var(--height);
+  opacity: var(--opacity);
+  transition: opacity 400ms;
+  cursor: var(--cursor);
+}
+._error_1brnh_11 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+  height: 100%;
+  min-height: 10rem;
+  line-height: 1.5rem;
+  color: #c56565;
+}
+._fallback_1brnh_23 {
+  margin-block: var(--margin-block);
+  margin: 0;
+  padding: 0;
+  position: relative;
+  width: 100%;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  aspect-ratio: 16/9;
+}
+._modal_1brnh_36 {
+  z-index: 1000;
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: zoom-out;
+}
+._modal_1brnh_36 ._modal-image_1brnh_49 {
+  width: 100vw;
+  height: 100vh;
+  -o-object-fit: contain;
+     object-fit: contain;
+}

package/dist/components/navigation/ElmBookmark.css

@@ -0,0 +1,104 @@
+._parent_1yb8i_1 {
+  container-type: inline-size;
+  margin-block: var(--margin-block);
+  border-radius: 0.25rem;
+  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: background-color 200ms, transform 200ms;
+}
+._parent_1yb8i_1:hover {
+  background-color: rgba(105, 135, 184, 0.1);
+  transform: translateX(-0.125rem) translateY(-0.125rem);
+}
+._parent_1yb8i_1:active {
+  background-color: rgba(89, 181, 124, 0.1);
+  transform: translateX(0) translateY(0);
+}
+._bookmark_1yb8i_18 {
+  all: unset;
+  display: flex;
+  cursor: pointer;
+  background-color: rgba(255, 255, 255, 0.5);
+  flex-direction: row;
+  height: 120px;
+}
+[data-theme=dark] ._bookmark_1yb8i_18 {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+@container (max-width: 700px) {
+._bookmark_1yb8i_18 {
+    flex-direction: column;
+    height: auto;
+}
+}
+._bookmark_1yb8i_18 ._image_1yb8i_35 {
+  overflow: hidden;
+  height: 100%;
+  opacity: 0.9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
+  aspect-ratio: 2/1;
+  min-width: -moz-min-content;
+  min-width: min-content;
+  max-width: 35%;
+}
+@container (max-width: 700px) {
+._bookmark_1yb8i_18 ._image_1yb8i_35 {
+    min-width: 0;
+    min-width: initial;
+    max-width: none;
+    max-width: initial;
+    width: 100%;
+}
+}
+._bookmark_1yb8i_18 ._typography_1yb8i_55 {
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: 0.5rem;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 0.25rem;
+}
+._bookmark_1yb8i_18 ._typography_1yb8i_55 ._title_1yb8i_65 {
+  display: inline;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+._bookmark_1yb8i_18 ._typography_1yb8i_55 ._date_1yb8i_72 {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+._bookmark_1yb8i_18 ._icon_1yb8i_80 {
+  width: 16px;
+  height: 16px;
+  color: rgba(0, 0, 0, 0.7);
+}
+[data-theme=dark] ._bookmark_1yb8i_18 ._icon_1yb8i_80 {
+  color: rgba(255, 255, 255, 0.7);
+}
+._link_1yb8i_89 {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  gap: 0.5rem;
+}
+._favicon_1yb8i_99 {
+  width: 16px;
+  height: 16px;
+}

package/dist/components/navigation/ElmBookmark.stories.d.ts

@@ -8,3 +8,5 @@ export declare const WithoutDate: Story;
 export declare const Card: Story;
 export declare const Square: Story;
 export declare const SquareCard: Story;
+export declare const InvalidImage: Story;
+export declare const NoImage: Story;

package/dist/components/navigation/ElmBookmark.vue.d.ts

@@ -1,8 +1,5 @@
+import { Property } from 'csstype';
 export interface ElmBookmarkProps {
-    /**
-     * Whether to display the bookmark horizontally.
-     */
-    isHorizontal?: boolean;
     /**
      * Whether to hide the URL.
      */
@@ -15,7 +12,7 @@ export interface ElmBookmarkProps {
     /**
      * The title of the bookmark.
      */
-    title: string;
+    title?: string;
     /**
      * The description of the bookmark.
      */
@@ -24,11 +21,11 @@ export interface ElmBookmarkProps {
      * The image to display.
      * This can be a URL or a base64-encoded image.
      */
-    image: string;
+    image?: string;
     /**
      * The URL to navigate to.
      */
-    url: string;
+    url?: string;
     /**
      * The date the bookmark was created.
      */
@@ -39,11 +36,18 @@ export interface ElmBookmarkProps {
      * If provided, the default behavior (navigating to the URL) is prevented.
      */
     onClick?: () => void;
+    /**
+     * The margin of the bookmark.
+     */
+    margin?: Property.MarginBlock;
+    /**
+     * The URL of the favicon.
+     */
+    favicon?: string;
 }
 declare const _default: import('vue').DefineComponent<ElmBookmarkProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmBookmarkProps> & Readonly<{}>, {
     openInNewTab: boolean;
-    isHorizontal: boolean;
     hideUrl: boolean;
     description: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/navigation/ElmBookmark.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmBookmark.vue2.mjs";
+import style0 from "./ElmBookmark.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmBookmark = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmBookmark as default
+};

package/dist/components/navigation/ElmBookmark.vue2.mjs

@@ -0,0 +1,115 @@
+import { defineComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, createCommentVNode, createVNode, Fragment, unref } from "vue";
+import { Icon } from "@iconify/vue";
+import ElmInlineText from "../inline/ElmInlineText.vue.mjs";
+import ElmImage from "../media/ElmImage.vue.mjs";
+const _hoisted_1 = ["href", "target"];
+const _hoisted_2 = ["src"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmBookmark",
+  props: {
+    hideUrl: { type: Boolean, default: false },
+    openInNewTab: { type: Boolean, default: true },
+    title: {},
+    description: { default: "No description provided" },
+    image: {},
+    url: {},
+    createdAt: {},
+    updatedAt: {},
+    onClick: {},
+    margin: {},
+    favicon: {}
+  },
+  setup(__props) {
+    const props = __props;
+    function handleClick(event) {
+      if (props.onClick) {
+        event.preventDefault();
+        props.onClick();
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.parent),
+        style: normalizeStyle({ "--margin-block": _ctx.margin })
+      }, [
+        createElementVNode("a", {
+          class: normalizeClass(_ctx.$style.bookmark),
+          href: _ctx.url,
+          target: _ctx.openInNewTab ? "_blank" : void 0,
+          rel: "noopener noreferrer",
+          onClick: handleClick
+        }, [
+          _ctx.image != null ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.$style.image)
+          }, [
+            createVNode(ElmImage, { src: _ctx.image }, null, 8, ["src"])
+          ], 2)) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style.typography)
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style.title)
+            }, [
+              createVNode(ElmInlineText, {
+                text: _ctx.title ?? "No title provided",
+                bold: ""
+              }, null, 8, ["text"])
+            ], 2),
+            createElementVNode("div", null, [
+              createVNode(ElmInlineText, {
+                text: _ctx.description == null ? "No description provided" : _ctx.description.length > 100 ? _ctx.description.slice(0, 100) + "..." : _ctx.description,
+                size: ".8rem",
+                style: { opacity: 0.6 }
+              }, null, 8, ["text"])
+            ]),
+            _ctx.createdAt != null || _ctx.updatedAt != null ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(_ctx.$style.date)
+            }, [
+              _ctx.createdAt != null ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                createVNode(unref(Icon), {
+                  icon: "mdi:calendar-month",
+                  class: normalizeClass(_ctx.$style.icon)
+                }, null, 8, ["class"]),
+                createVNode(ElmInlineText, {
+                  text: `${_ctx.createdAt}`,
+                  size: ".8rem"
+                }, null, 8, ["text"])
+              ], 64)) : createCommentVNode("", true),
+              _ctx.updatedAt != null ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createVNode(unref(Icon), {
+                  icon: "mdi:calendar-refresh",
+                  class: normalizeClass(_ctx.$style.icon)
+                }, null, 8, ["class"]),
+                createVNode(ElmInlineText, {
+                  text: `${_ctx.updatedAt}`,
+                  size: ".8rem"
+                }, null, 8, ["text"])
+              ], 64)) : createCommentVNode("", true)
+            ], 2)) : createCommentVNode("", true),
+            !_ctx.hideUrl && _ctx.url != null ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass(_ctx.$style.link)
+            }, [
+              _ctx.favicon ? (openBlock(), createElementBlock("img", {
+                key: 0,
+                src: _ctx.favicon,
+                alt: "favicon",
+                class: normalizeClass(_ctx.$style.favicon)
+              }, null, 10, _hoisted_2)) : createCommentVNode("", true),
+              createVNode(ElmInlineText, {
+                text: `${_ctx.url}`,
+                size: ".8rem",
+                color: "#6987b8"
+              }, null, 8, ["text"])
+            ], 2)) : createCommentVNode("", true)
+          ], 2)
+        ], 10, _hoisted_1)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/navigation/ElmBookmark.vue3.mjs

@@ -0,0 +1,32 @@
+const parent = "_parent_1yb8i_1";
+const bookmark = "_bookmark_1yb8i_18";
+const image = "_image_1yb8i_35";
+const typography = "_typography_1yb8i_55";
+const title = "_title_1yb8i_65";
+const date = "_date_1yb8i_72";
+const icon = "_icon_1yb8i_80";
+const link = "_link_1yb8i_89";
+const favicon = "_favicon_1yb8i_99";
+const style0 = {
+  parent,
+  bookmark,
+  image,
+  typography,
+  title,
+  date,
+  icon,
+  link,
+  favicon
+};
+export {
+  bookmark,
+  date,
+  style0 as default,
+  favicon,
+  icon,
+  image,
+  link,
+  parent,
+  title,
+  typography
+};

package/dist/components/navigation/ElmBreadcrumb.css

@@ -0,0 +1,46 @@
+._container_941di_1 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+._container_941di_1 ._icon_941di_8 {
+  width: 20px;
+  height: 20px;
+  color: rgba(0, 0, 0, 0.7);
+}
+[data-theme=dark] ._container_941di_1 ._icon_941di_8 {
+  color: rgba(255, 255, 255, 0.7);
+}
+._container_941di_1 ._chevron_941di_16 {
+  width: 16px;
+  height: 16px;
+  color: gray;
+}
+._container_941di_1 ._link-container_941di_21 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  box-sizing: border-box;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: background-color 200ms, transform 200ms;
+}
+._container_941di_1 ._link-container_941di_21:hover {
+  background-color: rgba(105, 135, 184, 0.2);
+  transform: translateX(-1px) translateY(-1px);
+}
+._container_941di_1 ._link-container_941di_21:active {
+  background-color: rgba(89, 181, 124, 0.2);
+  transform: translateX(1px) translateY(1px);
+}
+._fade_941di_41 {
+  opacity: var(--opacity);
+  transition: opacity 200ms;
+  transition-delay: var(--delay);
+}

package/dist/components/navigation/ElmBreadcrumb.vue.d.ts

@@ -13,5 +13,7 @@ export interface ElmBreadcrumbProps {
         onClick?: () => void;
     }>;
 }
-declare const _default: import('vue').DefineComponent<ElmBreadcrumbProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmBreadcrumbProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: import('vue').DefineComponent<ElmBreadcrumbProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmBreadcrumbProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    target: HTMLElement;
+}, HTMLElement>;
 export default _default;

package/dist/components/navigation/ElmBreadcrumb.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmBreadcrumb.vue2.mjs";
+import style0 from "./ElmBreadcrumb.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmBreadcrumb = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmBreadcrumb as default
+};

package/dist/components/navigation/ElmBreadcrumb.vue2.mjs

@@ -0,0 +1,63 @@
+import { defineComponent, ref, createElementBlock, openBlock, normalizeStyle, normalizeClass, Fragment, renderList, createElementVNode, createBlock, createCommentVNode, createVNode, unref } from "vue";
+import { Icon } from "@iconify/vue";
+import ElmInlineText from "../inline/ElmInlineText.vue.mjs";
+import { useIntersectionObserver } from "@vueuse/core";
+const _hoisted_1 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmBreadcrumb",
+  props: {
+    links: {}
+  },
+  setup(__props) {
+    const target = ref(null);
+    const targetIsVisible = ref(false);
+    useIntersectionObserver(target, ([{ isIntersecting }], _) => {
+      targetIsVisible.value = isIntersecting;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", {
+        class: normalizeClass(_ctx.$style.container),
+        ref_key: "target",
+        ref: target,
+        style: normalizeStyle({
+          "--opacity": targetIsVisible.value ? 1 : 0
+        })
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.links, (link, index) => {
+          return openBlock(), createElementBlock(Fragment, null, [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["link-container"]),
+              onClick: link.onClick
+            }, [
+              createVNode(unref(Icon), {
+                class: normalizeClass([_ctx.$style.icon, _ctx.$style.fade]),
+                icon: index === 0 ? "mdi:home" : index === _ctx.links.length - 1 ? "mdi:file-document-multiple-outline" : "mdi:folder-open-outline",
+                style: normalizeStyle({
+                  "--delay": `${index * 100}ms`
+                })
+              }, null, 8, ["class", "icon", "style"]),
+              createVNode(ElmInlineText, {
+                text: link.text,
+                class: normalizeClass(_ctx.$style.fade),
+                style: normalizeStyle({
+                  "--delay": `${index * 100 + 50}ms`
+                })
+              }, null, 8, ["text", "class", "style"])
+            ], 10, _hoisted_1),
+            _ctx.links.length !== index + 1 ? (openBlock(), createBlock(unref(Icon), {
+              key: 0,
+              icon: "mdi:chevron-right",
+              class: normalizeClass([_ctx.$style.chevron, _ctx.$style.fade]),
+              style: normalizeStyle({
+                "--delay": `${index * 100 + 100}ms`
+              })
+            }, null, 8, ["class", "style"])) : createCommentVNode("", true)
+          ], 64);
+        }), 256))
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/navigation/ElmBreadcrumb.vue3.mjs

@@ -0,0 +1,18 @@
+const container = "_container_941di_1";
+const icon = "_icon_941di_8";
+const chevron = "_chevron_941di_16";
+const fade = "_fade_941di_41";
+const style0 = {
+  container,
+  icon,
+  chevron,
+  "link-container": "_link-container_941di_21",
+  fade
+};
+export {
+  chevron,
+  container,
+  style0 as default,
+  fade,
+  icon
+};

package/dist/components/navigation/ElmPagetop.css

@@ -0,0 +1,105 @@
+._wrapper_q0z76_1 {
+  --const-margin: 1rem;
+  z-index: 50;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  position: fixed;
+  bottom: 0;
+  margin: 1rem 0.5rem;
+  margin: var(--const-margin) 0.5rem;
+  width: var(--size);
+  height: var(--size);
+  left: auto;
+  left: var(--left, auto);
+  right: auto;
+  right: var(---right, auto);
+  opacity: 1;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: transform 700ms, opacity 400ms;
+  transform-origin: 50% 50%;
+  transform: translateY(250%) rotate(180deg);
+}
+._wrapper--visible_q0z76_20 {
+  transition: transform 700ms, opacity 200ms;
+  transform: translateY(0%) rotate(0deg);
+}
+._wrapper_q0z76_1:hover {
+  opacity: 0.8;
+}
+._wrapper_q0z76_1:active {
+  opacity: 0.4;
+}
+@keyframes _move_q0z76_1 {
+0% {
+    opacity: 0;
+    transform: translateY(600%);
+}
+25% {
+    opacity: 1;
+    transform: translateY(220%);
+}
+42% {
+    opacity: 1;
+    transform: translateY(200%);
+}
+67% {
+    opacity: 1;
+    transform: translateY(0%);
+}
+100% {
+    opacity: 0;
+    transform: translateY(-50%) scale(0.5);
+}
+}
+._wrapper_q0z76_1 ._partial_q0z76_52 {
+  position: absolute;
+  width: var(--size);
+  height: 20px;
+  opacity: 0;
+  transform: scale3d(0.5, 0.5, 0.5);
+  animation: _move_q0z76_1 3000ms ease-out infinite;
+}
+._wrapper_q0z76_1 ._partial_q0z76_52:nth-of-type(1) {
+  animation: _move_q0z76_1 3000ms ease-out 1000ms infinite;
+}
+._wrapper_q0z76_1 ._partial_q0z76_52:nth-of-type(2) {
+  animation: _move_q0z76_1 3000ms ease-out 2000ms infinite;
+}
+._wrapper_q0z76_1 ._partial_q0z76_52:before, ._wrapper_q0z76_1 ._partial_q0z76_52:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 50%;
+  background-color: rgba(0, 0, 0, 0.7);
+}
+[data-theme=dark] ._wrapper_q0z76_1 ._partial_q0z76_52:before, [data-theme=dark] ._wrapper_q0z76_1 ._partial_q0z76_52:after {
+  background-color: rgba(255, 255, 255, 0.7);
+}
+._wrapper_q0z76_1 ._partial_q0z76_52:before {
+  left: 0;
+  transform: skew(0deg, -30deg);
+}
+._wrapper_q0z76_1 ._partial_q0z76_52:after {
+  right: 0;
+  transform: skew(0deg, 30deg);
+}
+._wrapper_q0z76_1 ._text_q0z76_85 {
+  transition: opacity 200ms ease 400ms;
+  width: 100%;
+  text-align: center;
+  font-family: sans-serif;
+  position: absolute;
+  z-index: 50;
+  bottom: calc(0px - var(--const-margin));
+  font-size: 12px;
+  white-space: nowrap;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  color: rgba(0, 0, 0, 0.7);
+}
+[data-theme=dark] ._wrapper_q0z76_1 ._text_q0z76_85 {
+  color: rgba(255, 255, 255, 0.7);
+}

package/dist/components/navigation/ElmPagetop.vue.d.ts

@@ -6,5 +6,5 @@ export interface ElmPagetopProps {
 }
 declare const _default: import('vue').DefineComponent<ElmPagetopProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmPagetopProps> & Readonly<{}>, {
     position: "left" | "right";
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
 export default _default;

package/dist/components/navigation/ElmPagetop.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmPagetop.vue2.mjs";
+import style0 from "./ElmPagetop.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmPagetop = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmPagetop as default
+};