@elmethis/vue 0.1.0

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

@@ -0,0 +1,116 @@
+import { defineComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, createCommentVNode, createVNode, Fragment, unref } from "vue";
+import ElmInlineText from "../typography/ElmInlineText.vue.mjs";
+import ElmImage from "../media/ElmImage.vue.mjs";
+import ElmMdiIcon from "../icon/ElmMdiIcon.vue.mjs";
+import { mdiCalendarMonth, mdiCalendarRefresh } from "@mdi/js";
+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": __props.margin })
+      }, [
+        createElementVNode("a", {
+          class: normalizeClass(_ctx.$style.bookmark),
+          href: __props.url,
+          target: __props.openInNewTab ? "_blank" : void 0,
+          rel: "noopener noreferrer",
+          onClick: handleClick
+        }, [
+          __props.image != null ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.$style.image)
+          }, [
+            createVNode(ElmImage, { src: __props.image }, null, 8, ["src"])
+          ], 2)) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style.typography)
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style.title)
+            }, [
+              createVNode(ElmInlineText, {
+                text: __props.title ?? "No title provided",
+                bold: ""
+              }, null, 8, ["text"])
+            ], 2),
+            createElementVNode("div", null, [
+              createVNode(ElmInlineText, {
+                text: __props.description == null ? "No description provided" : __props.description.length > 100 ? __props.description.slice(0, 100) + "..." : __props.description,
+                size: ".8rem",
+                style: { opacity: 0.6 }
+              }, null, 8, ["text"])
+            ]),
+            __props.createdAt != null || __props.updatedAt != null ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(_ctx.$style.date)
+            }, [
+              __props.createdAt != null ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                createVNode(ElmMdiIcon, {
+                  d: unref(mdiCalendarMonth),
+                  size: "1em"
+                }, null, 8, ["d"]),
+                createVNode(ElmInlineText, {
+                  text: `${__props.createdAt}`,
+                  size: ".8rem"
+                }, null, 8, ["text"])
+              ], 64)) : createCommentVNode("", true),
+              __props.updatedAt != null ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createVNode(ElmMdiIcon, {
+                  d: unref(mdiCalendarRefresh),
+                  size: "1em"
+                }, null, 8, ["d"]),
+                createVNode(ElmInlineText, {
+                  text: `${__props.updatedAt}`,
+                  size: ".8rem"
+                }, null, 8, ["text"])
+              ], 64)) : createCommentVNode("", true)
+            ], 2)) : createCommentVNode("", true),
+            !__props.hideUrl && __props.url != null ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass(_ctx.$style.link)
+            }, [
+              __props.favicon ? (openBlock(), createElementBlock("img", {
+                key: 0,
+                src: __props.favicon,
+                alt: "favicon",
+                class: normalizeClass(_ctx.$style.favicon)
+              }, null, 10, _hoisted_2)) : createCommentVNode("", true),
+              createVNode(ElmInlineText, {
+                text: `${__props.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,41 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._parent_1tjtz_1{container-type:inline-size;margin-block:var(--margin-block);border-radius:.25rem;box-shadow:0 0 .125rem #0000001a;overflow:hidden;transition:background-color .2s,transform .2s}._parent_1tjtz_1:hover{background-color:#6987b81a;transform:translate(-.125rem) translateY(-.125rem)}._parent_1tjtz_1:active{background-color:#59b57c1a;transform:translate(0) translateY(0)}._bookmark_1tjtz_18{all:unset;display:flex;cursor:pointer;background-color:#ffffff80}[data-theme=dark] ._bookmark_1tjtz_18{background-color:#0003}._bookmark_1tjtz_18{flex-direction:row;height:120px}@container (max-width: 700px){._bookmark_1tjtz_18{flex-direction:column;height:auto}}._bookmark_1tjtz_18 ._image_1tjtz_37{overflow:hidden;height:100%;opacity:.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_1tjtz_18 ._image_1tjtz_37{min-width:0;min-width:initial;max-width:none;max-width:initial;width:100%}}._bookmark_1tjtz_18 ._typography_1tjtz_57{overflow:hidden;box-sizing:border-box;padding:.5rem;display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:.25rem}._bookmark_1tjtz_18 ._typography_1tjtz_57 ._title_1tjtz_67{display:inline;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}._bookmark_1tjtz_18 ._typography_1tjtz_57 ._date_1tjtz_74{width:100%;display:flex;justify-content:flex-end;gap:.5rem;white-space:nowrap;text-overflow:ellipsis}._link_1tjtz_83{width:100%;display:flex;justify-content:flex-end;align-items:center;white-space:nowrap;text-overflow:ellipsis;gap:.5rem}._favicon_1tjtz_93{width:16px;height:16px}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const parent = "_parent_1tjtz_1";
+const bookmark = "_bookmark_1tjtz_18";
+const image = "_image_1tjtz_37";
+const typography = "_typography_1tjtz_57";
+const title = "_title_1tjtz_67";
+const date = "_date_1tjtz_74";
+const link = "_link_1tjtz_83";
+const favicon = "_favicon_1tjtz_93";
+const style0 = {
+  parent,
+  bookmark,
+  image,
+  typography,
+  title,
+  date,
+  link,
+  favicon
+};
+export {
+  bookmark,
+  date,
+  style0 as default,
+  favicon,
+  image,
+  link,
+  parent,
+  title,
+  typography
+};

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/vue3-vite';
+import { default as ElmBreadcrumb } from './ElmBreadcrumb.vue';
+declare const meta: Meta<typeof ElmBreadcrumb>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Long: Story;

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

@@ -0,0 +1,19 @@
+export interface ElmBreadcrumbProps {
+    /**
+     * The links to display.
+     */
+    links: Array<{
+        /**
+         * The text to display.
+         */
+        text: string;
+        /**
+         * The action to perform when the link is clicked.
+         */
+        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, {
+    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,65 @@
+import { defineComponent, ref, createElementBlock, openBlock, normalizeStyle, normalizeClass, Fragment, renderList, createElementVNode, createBlock, createCommentVNode, createVNode, unref } from "vue";
+import ElmInlineText from "../typography/ElmInlineText.vue.mjs";
+import { useIntersectionObserver } from "@vueuse/core";
+import ElmMdiIcon from "../icon/ElmMdiIcon.vue.mjs";
+import { mdiHome, mdiApplicationOutline, mdiFolderOpen, mdiChevronRight } from "@mdi/js";
+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(__props.links, (link, index) => {
+          return openBlock(), createElementBlock(Fragment, null, [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["link-container"]),
+              onClick: link.onClick
+            }, [
+              createVNode(ElmMdiIcon, {
+                d: index === 0 ? unref(mdiHome) : index === __props.links.length - 1 ? unref(mdiApplicationOutline) : unref(mdiFolderOpen),
+                size: "1.25em",
+                class: normalizeClass(_ctx.$style.text),
+                style: normalizeStyle({
+                  "--delay": `${index * 100}ms`
+                })
+              }, null, 8, ["d", "class", "style"]),
+              createVNode(ElmInlineText, {
+                text: link.text,
+                class: normalizeClass(_ctx.$style.text),
+                style: normalizeStyle({
+                  "--delay": `${index * 100 + 50}ms`
+                })
+              }, null, 8, ["text", "class", "style"])
+            ], 10, _hoisted_1),
+            __props.links.length !== index + 1 ? (openBlock(), createBlock(ElmMdiIcon, {
+              key: 0,
+              d: unref(mdiChevronRight),
+              size: "1em",
+              color: "#b69545",
+              class: normalizeClass(_ctx.$style.text),
+              style: normalizeStyle({ "--delay": `${index * 100 + 100}ms` })
+            }, null, 8, ["d", "class", "style"])) : createCommentVNode("", true)
+          ], 64);
+        }), 256))
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,24 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._container_xsa12_1{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}._link-container_xsa12_10{display:flex;flex-direction:row;align-items:center;gap:0;box-sizing:border-box;padding:.25rem;border-radius:.25rem;cursor:pointer;transition:background-color .1s,opacity .1s,transform .1s}._link-container_xsa12_10:hover{background-color:#868e9c33;transform:translate(-1px) translateY(-1px)}._link-container_xsa12_10:active{opacity:.5;transform:translate(1px) translateY(1px)}._text_xsa12_30{opacity:var(--opacity);transition:opacity .2s;transition-delay:var(--delay);padding:0 .25rem}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const container = "_container_xsa12_1";
+const text = "_text_xsa12_30";
+const style0 = {
+  container,
+  "link-container": "_link-container_xsa12_10",
+  text
+};
+export {
+  container,
+  style0 as default,
+  text
+};

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/vue3-vite';
+import { default as ElmPagetop } from './ElmPagetop.vue';
+declare const meta: Meta<typeof ElmPagetop>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

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

@@ -0,0 +1,10 @@
+export interface ElmPagetopProps {
+    /**
+     * Specifies the position of the button.
+     */
+    position?: "left" | "right";
+}
+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, {}, 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
+};

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

@@ -0,0 +1,52 @@
+import { defineComponent, ref, watch, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, unref } from "vue";
+import { useWindowScroll } from "@vueuse/core";
+import textStyle from "../../styles/text.module.scss.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmPagetop",
+  props: {
+    position: { default: "right" }
+  },
+  setup(__props) {
+    const isVisible = ref(false);
+    const { y } = useWindowScroll();
+    watch(
+      () => y.value,
+      () => {
+        isVisible.value = y.value > 100;
+      }
+    );
+    const toTop = () => {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", {
+        class: normalizeClass([_ctx.$style.wrapper, { [_ctx.$style["wrapper--visible"]]: isVisible.value }]),
+        style: normalizeStyle({
+          "--size": `${64}px`,
+          left: __props.position === "left" ? "0" : "auto",
+          right: __props.position === "right" ? "0" : "auto"
+        }),
+        onClick: toTop
+      }, [
+        createElementVNode("div", {
+          "aria-hidden": "",
+          class: normalizeClass(_ctx.$style.partial)
+        }, null, 2),
+        createElementVNode("div", {
+          "aria-hidden": "",
+          class: normalizeClass(_ctx.$style.partial)
+        }, null, 2),
+        createElementVNode("div", {
+          "aria-hidden": "",
+          class: normalizeClass(_ctx.$style.partial)
+        }, null, 2),
+        createElementVNode("span", {
+          class: normalizeClass([_ctx.$style.text, unref(textStyle).text])
+        }, "Back to Top", 2)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,30 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode('._wrapper_11hrj_1{--const-margin: 1rem;z-index:50;display:block;position:fixed;bottom:0;margin:1rem .5rem;margin:var(--const-margin) .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 .7s,opacity .4s;transform-origin:50% 50%;transform:translateY(250%) rotate(180deg)}._wrapper--visible_11hrj_20{transition:transform .7s,opacity .2s;transform:translateY(0) rotate(0)}._wrapper_11hrj_1:hover{opacity:.8}._wrapper_11hrj_1:active{opacity:.4}@keyframes _move_11hrj_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)}to{opacity:0;transform:translateY(-50%) scale(.5)}}._wrapper_11hrj_1 ._partial_11hrj_52{position:absolute;width:var(--size);height:20px;opacity:0;transform:scale3d(.5,.5,.5);animation:_move_11hrj_1 3s ease-out infinite}._wrapper_11hrj_1 ._partial_11hrj_52:nth-of-type(1){animation:_move_11hrj_1 3s ease-out 1s infinite}._wrapper_11hrj_1 ._partial_11hrj_52:nth-of-type(2){animation:_move_11hrj_1 3s ease-out 2s infinite}._wrapper_11hrj_1 ._partial_11hrj_52:before,._wrapper_11hrj_1 ._partial_11hrj_52:after{content:"";position:absolute;top:0;height:100%;width:50%;background-color:#494f59}[data-theme=dark] ._wrapper_11hrj_1 ._partial_11hrj_52:before,[data-theme=dark] ._wrapper_11hrj_1 ._partial_11hrj_52:after{background-color:#bec2ca}._wrapper_11hrj_1 ._partial_11hrj_52:before{left:0;transform:skew(0,-30deg)}._wrapper_11hrj_1 ._partial_11hrj_52:after{right:0;transform:skew(0,30deg)}._wrapper_11hrj_1 ._text_11hrj_85{transition:opacity .2s ease .4s;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}'));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const wrapper = "_wrapper_11hrj_1";
+const partial = "_partial_11hrj_52";
+const move = "_move_11hrj_1";
+const text = "_text_11hrj_85";
+const style0 = {
+  wrapper,
+  "wrapper--visible": "_wrapper--visible_11hrj_20",
+  partial,
+  move,
+  text
+};
+export {
+  style0 as default,
+  move,
+  partial,
+  text,
+  wrapper
+};

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/vue3-vite';
+import { default as ElmTableOfContents } from './ElmTableOfContents.vue';
+declare const meta: Meta<typeof ElmTableOfContents>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Deep: Story;

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

@@ -0,0 +1,9 @@
+export interface ElmTableOfContentsProps {
+    headings: Array<{
+        level: 1 | 2 | 3 | 4 | 5 | 6;
+        text: string;
+        id?: string;
+    }>;
+}
+declare const _default: import('vue').DefineComponent<ElmTableOfContentsProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmTableOfContentsProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+export default _default;

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

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

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

@@ -0,0 +1,45 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, Fragment, renderList, normalizeStyle, createElementVNode, createVNode, unref } from "vue";
+import ElmInlineText from "../typography/ElmInlineText.vue.mjs";
+import ElmMdiIcon from "../icon/ElmMdiIcon.vue.mjs";
+import { mdiMenuDown } from "@mdi/js";
+const _hoisted_1 = ["href"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmTableOfContents",
+  props: {
+    headings: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", {
+        class: normalizeClass(_ctx.$style.toc)
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.headings, (heading) => {
+          return openBlock(), createElementBlock("a", {
+            class: normalizeClass(_ctx.$style.link),
+            href: `#${heading.id ?? heading.text}`,
+            style: normalizeStyle({ "--padding-left": `${heading.level * 0.5}rem` })
+          }, [
+            createElementVNode("sup", null, [
+              createVNode(ElmInlineText, {
+                text: `H${heading.level}`,
+                size: "0.6rem",
+                color: "#6987b8"
+              }, null, 8, ["text"])
+            ]),
+            createVNode(ElmInlineText, {
+              text: heading.text
+            }, null, 8, ["text"]),
+            createVNode(ElmMdiIcon, {
+              d: unref(mdiMenuDown),
+              size: "1em",
+              color: "#6987b8"
+            }, null, 8, ["d"])
+          ], 14, _hoisted_1);
+        }), 256))
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,23 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._toc_vrpzl_1{box-sizing:border-box;display:flex;flex-direction:column;padding-left:.5rem;border-left-style:solid;border-left-width:.25rem;border-left-color:#0000001a}[data-theme=dark] ._toc_vrpzl_1{border-left-color:#ffffff26}._toc_vrpzl_1 ._link_vrpzl_13{all:unset;box-sizing:border-box;display:flex;justify-content:flex-start;gap:.5rem;border-radius:.25rem;padding:.25rem;padding-left:var(--padding-left, .25rem);transition:background-color .2s;cursor:pointer}._toc_vrpzl_1 ._link_vrpzl_13:hover{background-color:#6987b833}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const toc = "_toc_vrpzl_1";
+const link = "_link_vrpzl_13";
+const style0 = {
+  toc,
+  link
+};
+export {
+  style0 as default,
+  link,
+  toc
+};

package/dist/components/others/ElmColorSample.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/vue3-vite';
+import { default as ElmColorSample } from './ElmColorSample.vue';
+declare const meta: Meta<typeof ElmColorSample>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/others/ElmColorSample.vue.d.ts

@@ -0,0 +1,8 @@
+export interface ElmColorSampleProps {
+    /**
+     * The color to display.
+     */
+    color: string;
+}
+declare const _default: import('vue').DefineComponent<ElmColorSampleProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmColorSampleProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/others/ElmColorSample.vue.mjs

@@ -0,0 +1,23 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode(".v-enter-to[data-v-4e995755],.v-leave-from[data-v-4e995755]{opacity:1}.v-enter-active[data-v-4e995755],.v-leave-active[data-v-4e995755]{transition:opacity .3s}.v-enter-from[data-v-4e995755],.v-leave-to[data-v-4e995755]{opacity:0}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+import _sfc_main from "./ElmColorSample.vue2.mjs";
+import style0 from "./ElmColorSample.vue3.mjs";
+
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmColorSample = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules], ["__scopeId", "data-v-4e995755"]]);
+export {
+  ElmColorSample as default
+};

package/dist/components/others/ElmColorSample.vue2.mjs

@@ -0,0 +1,72 @@
+import { defineComponent, createElementBlock, openBlock, normalizeStyle, createVNode, withCtx, createElementVNode, unref, normalizeClass, toDisplayString, Transition, createBlock, createCommentVNode } from "vue";
+import { parseToRgb, parseToHsl, rgbToColorString } from "polished";
+import ElmTooltip from "../containments/ElmTooltip.vue.mjs";
+import { useClipboard } from "@vueuse/core";
+import ElmMdiIcon from "../icon/ElmMdiIcon.vue.mjs";
+import { mdiCheck } from "@mdi/js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmColorSample",
+  props: {
+    color: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { blue, green, red } = parseToRgb(props.color);
+    const { hue, saturation, lightness } = parseToHsl(props.color);
+    const hex = rgbToColorString(parseToRgb(props.color));
+    const rgb = `rgb(${red}, ${green}, ${blue})`;
+    const hsl = `hsl(${Math.floor(hue)}, ${Math.floor(saturation * 100)}%, ${Math.floor(lightness * 100)}%)`;
+    const { copy, copied } = useClipboard();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({ "--color": __props.color })
+      }, [
+        createVNode(ElmTooltip, null, {
+          original: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["color-bg"]),
+              style: normalizeStyle({
+                "--background-color": __props.color
+              }),
+              onClick: _cache[0] || (_cache[0] = ($event) => unref(copy)(unref(hex)))
+            }, [
+              createVNode(Transition, null, {
+                default: withCtx(() => [
+                  unref(copied) ? (openBlock(), createBlock(ElmMdiIcon, {
+                    key: 0,
+                    d: unref(mdiCheck),
+                    size: "1em",
+                    color: "white"
+                  }, null, 8, ["d"])) : createCommentVNode("", true)
+                ]),
+                _: 1
+              })
+            ], 6),
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style.text),
+              onClick: _cache[1] || (_cache[1] = ($event) => unref(copy)(unref(hex)))
+            }, toDisplayString(unref(hex)), 3)
+          ]),
+          tooltip: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style.text),
+              onClick: _cache[2] || (_cache[2] = ($event) => unref(copy)(unref(hex)))
+            }, toDisplayString(unref(hex)), 3),
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style.text),
+              onClick: _cache[3] || (_cache[3] = ($event) => unref(copy)(rgb))
+            }, toDisplayString(rgb), 2),
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style.text),
+              onClick: _cache[4] || (_cache[4] = ($event) => unref(copy)(hsl))
+            }, toDisplayString(hsl), 2)
+          ]),
+          _: 1
+        })
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/others/ElmColorSample.vue3.mjs

@@ -0,0 +1,21 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._color-bg_819fg_1{width:5rem;height:2rem;border-radius:.25rem;background-color:var(--background-color);cursor:pointer;transition:opacity .1s}._color-bg_819fg_1:active{opacity:.5}._text_819fg_13{margin-block:.125rem;padding:.125rem;border-radius:.125rem;transition:color .1s,background-color .1s,opacity .1s;color:var(--color);cursor:pointer}._text_819fg_13:hover{color:#fff;background-color:var(--color)}._text_819fg_13:active{opacity:.5}._text_819fg_13::-moz-selection{color:#fff;background-color:var(--color)}._text_819fg_13::selection{color:#fff;background-color:var(--color)}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const text = "_text_819fg_13";
+const style0 = {
+  "color-bg": "_color-bg_819fg_1",
+  text
+};
+export {
+  style0 as default,
+  text
+};

package/dist/components/others/ElmColorTable.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/vue3-vite';
+import { default as ElmColorTable } from './ElmColorTable.vue';
+declare const meta: Meta<typeof ElmColorTable>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;