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

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
+};

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

@@ -0,0 +1,51 @@
+import { defineComponent, ref, watch, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode } from "vue";
+import { useWindowScroll } from "@vueuse/core";
+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: _ctx.position === "left" ? "0" : "auto",
+          right: _ctx.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)
+        }, "Back to Top", 2)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,18 @@
+const wrapper = "_wrapper_q0z76_1";
+const partial = "_partial_q0z76_52";
+const move = "_move_q0z76_1";
+const text = "_text_q0z76_85";
+const style0 = {
+  wrapper,
+  "wrapper--visible": "_wrapper--visible_q0z76_20",
+  partial,
+  move,
+  text
+};
+export {
+  style0 as default,
+  move,
+  partial,
+  text,
+  wrapper
+};

package/dist/components/navigation/ElmTableOfContents.css

@@ -0,0 +1,33 @@
+._toc_gvfxl_1 {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding-left: 0.5rem;
+  border-left-style: solid;
+  border-left-width: 0.25rem;
+  border-left-color: rgba(0, 0, 0, 0.1);
+}
+[data-theme=dark] ._toc_gvfxl_1 {
+  border-left-color: rgba(255, 255, 255, 0.15);
+}
+._toc_gvfxl_1 ._link_gvfxl_13 {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: flex-start;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  padding: 0.25rem;
+  padding-left: 0.25rem;
+  padding-left: var(--padding-left, 0.25rem);
+  transition: background-color 200ms;
+  cursor: pointer;
+}
+._toc_gvfxl_1 ._link_gvfxl_13:hover {
+  background-color: rgba(105, 135, 184, 0.2);
+}
+._toc_gvfxl_1 ._link_gvfxl_13 ._icon_gvfxl_28 {
+  width: 12px;
+  height: 12px;
+  color: #6987b8;
+}

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

@@ -5,5 +5,5 @@ export interface ElmTableOfContentsProps {
         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, {}, any>;
+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,43 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, Fragment, renderList, normalizeStyle, createElementVNode, createVNode, unref } from "vue";
+import { Icon } from "@iconify/vue";
+import ElmInlineText from "../inline/ElmInlineText.vue.mjs";
+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(_ctx.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(unref(Icon), {
+              icon: "heroicons:bars-arrow-down",
+              class: normalizeClass(_ctx.$style.icon)
+            }, null, 8, ["class"])
+          ], 14, _hoisted_1);
+        }), 256))
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,14 @@
+const toc = "_toc_gvfxl_1";
+const link = "_link_gvfxl_13";
+const icon = "_icon_gvfxl_28";
+const style0 = {
+  toc,
+  link,
+  icon
+};
+export {
+  style0 as default,
+  icon,
+  link,
+  toc
+};

package/dist/components/others/ElmColorSample.css

@@ -0,0 +1,12 @@
+.v-enter-to[data-v-9606dccc],
+.v-leave-from[data-v-9606dccc] {
+  opacity: 1;
+}
+.v-enter-active[data-v-9606dccc],
+.v-leave-active[data-v-9606dccc] {
+  transition: opacity 300ms;
+}
+.v-enter-from[data-v-9606dccc],
+.v-leave-to[data-v-9606dccc] {
+  opacity: 0;
+}

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+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,10 @@
+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-9606dccc"]]);
+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 { Icon } from "@iconify/vue";
+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": _ctx.color })
+      }, [
+        createVNode(ElmTooltip, null, {
+          original: withCtx(() => [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["color-bg"]),
+              style: normalizeStyle({
+                "--background-color": _ctx.color
+              }),
+              onClick: _cache[0] || (_cache[0] = ($event) => unref(copy)(unref(hex)))
+            }, [
+              createVNode(Transition, null, {
+                default: withCtx(() => [
+                  unref(copied) ? (openBlock(), createBlock(unref(Icon), {
+                    key: 0,
+                    icon: "heroicons:check",
+                    style: { color: "white" },
+                    width: "16",
+                    height: "16"
+                  })) : 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,9 @@
+const text = "_text_819fg_13";
+const style0 = {
+  "color-bg": "_color-bg_819fg_1",
+  text
+};
+export {
+  style0 as default,
+  text
+};

package/dist/components/others/ElmColorSample2.css

@@ -0,0 +1,34 @@
+._color-bg_819fg_1 {
+  width: 5rem;
+  height: 2rem;
+  border-radius: 0.25rem;
+  background-color: var(--background-color);
+  cursor: pointer;
+  transition: opacity 100ms;
+}
+._color-bg_819fg_1:active {
+  opacity: 0.5;
+}
+._text_819fg_13 {
+  margin-block: 0.125rem;
+  padding: 0.125rem;
+  border-radius: 0.125rem;
+  transition: color 100ms, background-color 100ms, opacity 100ms;
+  color: var(--color);
+  cursor: pointer;
+}
+._text_819fg_13:hover {
+  color: white;
+  background-color: var(--color);
+}
+._text_819fg_13:active {
+  opacity: 0.5;
+}
+._text_819fg_13::-moz-selection {
+  color: white;
+  background-color: var(--color);
+}
+._text_819fg_13::selection {
+  color: white;
+  background-color: var(--color);
+}

package/dist/components/others/ElmColorTable.css

@@ -0,0 +1,26 @@
+._container_2ivef_1 {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 0.25rem;
+}
+._container_2ivef_1 ._row-container_2ivef_8 {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-direction: row;
+  gap: 0.25rem;
+}
+._container_2ivef_1 ._row-container_2ivef_8 ._color-name_2ivef_15 {
+  width: 6rem;
+  color: var(--color);
+}
+._container_2ivef_1 ._row-container_2ivef_8 ._color-name_2ivef_15::-moz-selection {
+  background-color: var(--color);
+  color: white;
+}
+._container_2ivef_1 ._row-container_2ivef_8 ._color-name_2ivef_15::selection {
+  background-color: var(--color);
+  color: white;
+}

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+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;

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

@@ -0,0 +1,11 @@
+export interface ElmColorTableProps {
+    /**
+     * The colors to display.
+     */
+    colors: {
+        name: string;
+        code: string;
+    }[];
+}
+declare const _default: import('vue').DefineComponent<ElmColorTableProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmColorTableProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

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

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

@@ -0,0 +1,45 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, Fragment, renderList, createElementVNode, normalizeStyle, toDisplayString, createVNode, unref } from "vue";
+import { darken } from "polished";
+import ElmColorSample from "./ElmColorSample.vue.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmColorTable",
+  props: {
+    colors: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.container)
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.colors, (color) => {
+          return openBlock(), createElementBlock("div", {
+            class: normalizeClass(_ctx.$style["row-container"])
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(_ctx.$style["color-name"]),
+              style: normalizeStyle({ "--color": color.code })
+            }, toDisplayString(color.name), 7),
+            (openBlock(), createElementBlock(Fragment, null, renderList([
+              -0.2,
+              -0.15,
+              -0.1,
+              -0.05,
+              0,
+              0.05,
+              0.1,
+              0.15,
+              0.2
+            ], (darkness) => {
+              return createVNode(ElmColorSample, {
+                color: unref(darken)(darkness, color.code)
+              }, null, 8, ["color"]);
+            }), 64))
+          ], 2);
+        }), 256))
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,10 @@
+const container = "_container_2ivef_1";
+const style0 = {
+  container,
+  "row-container": "_row-container_2ivef_8",
+  "color-name": "_color-name_2ivef_15"
+};
+export {
+  container,
+  style0 as default
+};

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

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

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

@@ -0,0 +1,4 @@
+export interface ElmTypingProps {
+}
+declare const _default: import('vue').DefineComponent<ElmTypingProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmTypingProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/renderer/ElmJsonRenderer.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof ElmJsonRenderer>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
+export declare const InlineIcon: Story;
 export declare const Callout: Story;
 export declare const BulletedList: Story;
 export declare const NumberedList: Story;