@elmethis/core 1.0.0-alpha.19 → 1.0.0-alpha.190

package/dist/components/containments/ElmSnackbar.vue2.mjs

@@ -0,0 +1,39 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, createBlock, createVNode, createElementVNode, resolveDynamicComponent, unref, normalizeStyle } from "vue";
+import { Icon } from "@iconify/vue";
+import ElmInlineText from "../typography/ElmInlineText.vue.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmSnackbar",
+  props: {
+    label: {},
+    children: {},
+    timeout: { default: 5e3 },
+    close: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.snackbar)
+      }, [
+        props.label != null ? (openBlock(), createBlock(ElmInlineText, {
+          key: 0,
+          text: props.label
+        }, null, 8, ["text"])) : (openBlock(), createBlock(resolveDynamicComponent(() => props.children), { key: 1 })),
+        createVNode(unref(Icon), {
+          icon: "mdi:cross-circle-outline",
+          class: normalizeClass(_ctx.$style.icon),
+          onClick: _ctx.close
+        }, null, 8, ["class", "onClick"]),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.progress),
+          style: normalizeStyle({
+            animationDuration: `${_ctx.timeout}ms`
+          })
+        }, null, 6)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/containments/ElmSnackbar.vue3.mjs

@@ -0,0 +1,26 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._snackbar_ti69w_1{position:relative;display:inline-flex;flex-direction:row;gap:1rem;align-items:center;padding:.75rem;pointer-events:all;border-radius:.25rem;box-shadow:0 0 .25rem #00000040;background-color:#ffffff80}[data-theme=dark] ._snackbar_ti69w_1{box-shadow:0 0 .25rem #00000080;background-color:#0003}._icon_ti69w_18{padding:.25rem;border-radius:50%;width:1rem;height:1rem;cursor:pointer;transition:background-color .2s;color:#000000bf}[data-theme=dark] ._icon_ti69w_18{color:#ffffffbf}._icon_ti69w_18:hover{background-color:#0000001a}[data-theme=dark] ._icon_ti69w_18:hover{background-color:#ffffff1a}@keyframes _progress_ti69w_47{0%{transform:scaleX(1);transform-origin:left}to{transform:scaleX(0);transform-origin:left}}._progress_ti69w_47{position:absolute;width:100%;height:3px;bottom:0;left:0;background-color:#6987b8;animation-name:_progress_ti69w_47;animation-iteration-count:1;animation-fill-mode:both;animation-timing-function:linear}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const snackbar = "_snackbar_ti69w_1";
+const icon = "_icon_ti69w_18";
+const progress = "_progress_ti69w_47";
+const style0 = {
+  snackbar,
+  icon,
+  progress
+};
+export {
+  style0 as default,
+  icon,
+  progress,
+  snackbar
+};

package/dist/components/containments/ElmSnackbarContainer.vue.d.ts

@@ -0,0 +1,10 @@
+export interface ElmSnackbarContainerProps {
+    snackbars: {
+        id: string;
+        label: string;
+        timeout?: number;
+        close: () => void;
+    }[];
+}
+declare const _default: import('vue').DefineComponent<ElmSnackbarContainerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmSnackbarContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/containments/ElmSnackbarContainer.vue.mjs

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

package/dist/components/containments/ElmSnackbarContainer.vue2.mjs

@@ -0,0 +1,33 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, createVNode, TransitionGroup, withCtx, Fragment, renderList, createBlock, mergeProps } from "vue";
+import ElmSnackbar from "./ElmSnackbar.vue.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmSnackbarContainer",
+  props: {
+    snackbars: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style["snackbar-screen"])
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style["snackbar-container"])
+        }, [
+          createVNode(TransitionGroup, { name: "fade" }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.snackbars, (snackbar) => {
+                return openBlock(), createBlock(ElmSnackbar, mergeProps({ ref_for: true }, snackbar, {
+                  key: snackbar.id
+                }), null, 16);
+              }), 128))
+            ]),
+            _: 1
+          })
+        ], 2)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/containments/ElmSnackbarContainer.vue3.mjs

@@ -0,0 +1,19 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._snackbar-screen_rfxmg_1{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1000;display:flex;justify-content:flex-end;align-items:flex-end;pointer-events:none}._snackbar-container_rfxmg_14{margin:1rem;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:.5rem}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const style0 = {
+  "snackbar-screen": "_snackbar-screen_rfxmg_1",
+  "snackbar-container": "_snackbar-container_rfxmg_14"
+};
+export {
+  style0 as default
+};

package/dist/components/containments/ElmToggle.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof ElmToggle>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
+export declare const InlineSummary: Story;

package/dist/components/containments/ElmToggle.vue.d.ts

@@ -1,26 +1,37 @@
+import { Property } from 'csstype';
+import { VNode } from 'vue';
 export interface ElmToggleProps {
     /**
      * The summary of the toggle.
      */
-    summary: string;
+    summary?: string;
+    /**
+     * The margin of the toggle.
+     */
+    margin?: Property.MarginBlock;
 }
-declare let __VLS_typeProps: ElmToggleProps;
+type __VLS_Props = ElmToggleProps;
 type __VLS_PublicProps = {
-    'isOpen'?: boolean;
-} & typeof __VLS_typeProps;
+    "isOpen"?: boolean;
+} & __VLS_Props;
 declare function __VLS_template(): {
-    slots: {
-        default?(_: {}): any;
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default: () => VNode[];
+        summary?: () => VNode[];
+    }> & {
+        default: () => VNode[];
+        summary?: () => VNode[];
     };
     refs: {};
-    attrs: Partial<{}>;
+    rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:isOpen": (isOpen: boolean) => any;
+    "update:isOpen": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:isOpen"?: ((isOpen: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+    "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/containments/ElmToggle.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-6b2a5911],.v-leave-from[data-v-6b2a5911]{opacity:1}.v-enter-active[data-v-6b2a5911],.v-leave-active[data-v-6b2a5911]{transition:opacity .2s;transform-origin:top}.v-enter-from[data-v-6b2a5911],.v-leave-to[data-v-6b2a5911]{opacity:0}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+import _sfc_main from "./ElmToggle.vue2.mjs";
+import style0 from "./ElmToggle.vue3.mjs";
+
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmToggle = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules], ["__scopeId", "data-v-6b2a5911"]]);
+export {
+  ElmToggle as default
+};

package/dist/components/containments/ElmToggle.vue2.mjs

@@ -0,0 +1,103 @@
+import { defineComponent, mergeModels, useModel, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, createVNode, unref, createBlock, renderSlot, Transition, withCtx, createCommentVNode } from "vue";
+import ElmInlineText from "../typography/ElmInlineText.vue.mjs";
+import { Icon } from "@iconify/vue";
+import { mdiChevronUp } from "../../node_modules/.pnpm/@mdi_js@7.4.47/node_modules/@mdi/js/mdi.mjs";
+const _hoisted_1 = { style: { display: "flex", gap: "0.5rem" } };
+const _hoisted_2 = {
+  viewBox: "0 0 24 24",
+  width: "1.25rem",
+  height: "1.25rem"
+};
+const _hoisted_3 = ["d"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmToggle",
+  props: /* @__PURE__ */ mergeModels({
+    summary: {},
+    margin: {}
+  }, {
+    "isOpen": { type: Boolean, ...{
+      default: false
+    } },
+    "isOpenModifiers": {}
+  }),
+  emits: ["update:isOpen"],
+  setup(__props) {
+    const isOpen = useModel(__props, "isOpen");
+    const handleClick = (event) => {
+      event.preventDefault();
+      isOpen.value = !isOpen.value;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.toggle),
+        style: normalizeStyle({ "--margin-block": _ctx.margin })
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.summary),
+          onClick: handleClick,
+          style: normalizeStyle({
+            borderRadius: isOpen.value ? "0.25rem 0.25rem 0rem 0rem" : "0.25rem"
+          })
+        }, [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(unref(Icon), {
+              icon: "mdi:chevron-right",
+              class: normalizeClass(_ctx.$style.icon),
+              style: normalizeStyle({ "--rotate": isOpen.value ? "90deg" : "0deg" })
+            }, null, 8, ["class", "style"]),
+            createElementVNode("div", null, [
+              _ctx.summary != null ? (openBlock(), createBlock(ElmInlineText, {
+                key: 0,
+                text: _ctx.summary
+              }, null, 8, ["text"])) : renderSlot(_ctx.$slots, "summary", { key: 1 }, void 0, true)
+            ])
+          ]),
+          createVNode(unref(Icon), {
+            icon: "mdi:plus",
+            class: normalizeClass(_ctx.$style.icon),
+            style: normalizeStyle({
+              "--rotate": isOpen.value ? "135deg" : "0deg",
+              "--color": isOpen.value ? "#b36472" : void 0
+            })
+          }, null, 8, ["class", "style"])
+        ], 6),
+        createVNode(Transition, null, {
+          default: withCtx(() => [
+            isOpen.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(_ctx.$style.content)
+            }, [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ], 2)) : createCommentVNode("", true)
+          ]),
+          _: 3
+        }),
+        createVNode(Transition, null, {
+          default: withCtx(() => [
+            isOpen.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(_ctx.$style.close),
+              onClick: handleClick
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass(_ctx.$style["close-button"])
+              }, [
+                (openBlock(), createElementBlock("svg", _hoisted_2, [
+                  createElementVNode("path", { d: unref(mdiChevronUp) }, null, 8, _hoisted_3)
+                ])),
+                createVNode(ElmInlineText, {
+                  text: "CLOSE",
+                  color: "#8e3636"
+                })
+              ], 2)
+            ], 2)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        })
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/containments/ElmToggle.vue3.mjs

@@ -0,0 +1,33 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._toggle_7zlts_1{margin-block:var(--margin-block)}._summary_7zlts_5{box-sizing:border-box;padding:1rem;width:100%;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:.5rem;border:1px solid rgba(128,128,128,.25);background-color:#00000006}[data-theme=dark] ._summary_7zlts_5{background-color:#ffffff1a}._icon_7zlts_22{width:1.25rem;height:1.25rem;color:#59b57c;color:var(--color, #59b57c);transform:rotate(0);transform:rotate(var(--rotate, 0deg));transition:transform .2s}._content_7zlts_30{margin:0;padding:.75rem;display:block;background-color:#ffffff0d;border:1px solid rgba(128,128,128,.25);border-radius:0 0 .25rem .25rem}._close_7zlts_39{margin-block:.25rem;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:.25rem}._close-button_7zlts_48{padding:.25rem;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;fill:#c56565;opacity:.7;transition:background-color .1s;border-radius:.25rem}._close-button_7zlts_48:hover{background-color:#c5656526}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const toggle = "_toggle_7zlts_1";
+const summary = "_summary_7zlts_5";
+const icon = "_icon_7zlts_22";
+const content = "_content_7zlts_30";
+const close = "_close_7zlts_39";
+const style0 = {
+  toggle,
+  summary,
+  icon,
+  content,
+  close,
+  "close-button": "_close-button_7zlts_48"
+};
+export {
+  close,
+  content,
+  style0 as default,
+  icon,
+  summary,
+  toggle
+};

package/dist/components/containments/ElmTooltip.vue.d.ts

@@ -1,6 +1,7 @@
 export interface ElmTooltipProps {
 }
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: {
         original?(_: {}): any;
         tooltip?(_: {}): any;
@@ -8,10 +9,12 @@ declare function __VLS_template(): {
     refs: {
         el: HTMLSpanElement;
     };
-    attrs: Partial<{}>;
+    rootEl: HTMLSpanElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<ElmTooltipProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmTooltipProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<ElmTooltipProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmTooltipProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    el: HTMLSpanElement;
+}, HTMLSpanElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/containments/ElmTooltip.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-cd939485],.v-leave-from[data-v-cd939485]{transform:scale(1);opacity:1}.v-enter-active[data-v-cd939485],.v-leave-active[data-v-cd939485]{transition:opacity .1s,transform .2s}.v-enter-from[data-v-cd939485],.v-leave-to[data-v-cd939485]{transform:scale(.5);opacity:0}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+import _sfc_main from "./ElmTooltip.vue2.mjs";
+import style0 from "./ElmTooltip.vue3.mjs";
+
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmTooltip = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules], ["__scopeId", "data-v-cd939485"]]);
+export {
+  ElmTooltip as default
+};

package/dist/components/containments/ElmTooltip.vue2.mjs

@@ -0,0 +1,49 @@
+import { defineComponent, ref, createElementBlock, openBlock, normalizeClass, renderSlot, createVNode, Transition, withCtx, createCommentVNode, normalizeStyle, unref } from "vue";
+import { useElementBounding, useWindowSize } from "@vueuse/core";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmTooltip",
+  setup(__props) {
+    const el = ref(null);
+    const { x, y, width, height } = useElementBounding(el);
+    const windowSize = useWindowSize();
+    const isHover = ref(false);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        ref_key: "el",
+        ref: el,
+        class: normalizeClass(_ctx.$style.original),
+        onMouseover: _cache[0] || (_cache[0] = () => {
+          isHover.value = true;
+        }),
+        onMouseleave: _cache[1] || (_cache[1] = () => {
+          isHover.value = false;
+        })
+      }, [
+        renderSlot(_ctx.$slots, "original", {}, void 0, true),
+        createVNode(Transition, null, {
+          default: withCtx(() => [
+            isHover.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(_ctx.$style.tooltip),
+              style: normalizeStyle(
+                unref(x) > unref(windowSize).width.value / 2 ? {
+                  top: `${unref(y) + unref(height)}px`,
+                  right: `${unref(windowSize).width.value - unref(x) - unref(width)}px`
+                } : {
+                  top: `${unref(y) + unref(height)}px`,
+                  left: `${unref(x)}px`
+                }
+              )
+            }, [
+              renderSlot(_ctx.$slots, "tooltip", {}, void 0, true)
+            ], 6)) : createCommentVNode("", true)
+          ]),
+          _: 3
+        })
+      ], 34);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/containments/ElmTooltip.vue3.mjs

@@ -0,0 +1,20 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._tooltip_1tyuh_1{position:fixed;z-index:1000;box-sizing:border-box;padding:.25rem .5rem;border-radius:.25rem;box-shadow:0 0 .25rem #0000001a;color:#000000b3;background-color:#ffffffe6;transform-origin:top}[data-theme=dark] ._tooltip_1tyuh_1{color:#ffffffb3;background-color:#000000e6}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const tooltip = "_tooltip_1tyuh_1";
+const style0 = {
+  tooltip
+};
+export {
+  style0 as default,
+  tooltip
+};

package/dist/components/containments/useSnackbarState.d.ts

@@ -0,0 +1,28 @@
+import { VNode } from 'vue';
+export declare function useSnackbarState(): {
+    snackbars: import('vue').Ref<{
+        id: string;
+        label?: string | undefined;
+        timeout: number;
+        children?: VNode | undefined;
+        close: () => void;
+    }[], {
+        id: string;
+        label?: string;
+        timeout: number;
+        children?: VNode;
+        close: () => void;
+    }[] | {
+        id: string;
+        label?: string | undefined;
+        timeout: number;
+        children?: VNode | undefined;
+        close: () => void;
+    }[]>;
+    push: ({ label, timeout, children, }: {
+        label?: string;
+        timeout?: number;
+        children?: VNode;
+    }) => string;
+    remove: (id: string) => void;
+};

package/dist/components/data/ElmMultiProgress.stories.d.ts

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

package/dist/components/data/ElmMultiProgress.vue.d.ts

@@ -0,0 +1,30 @@
+import { Property } from 'csstype';
+export interface ElmMultiProgressProps {
+    progress: Array<{
+        /**
+         * The current value of the progress.
+         */
+        value: number;
+        /**
+         * The buffer value of the progress.
+         */
+        buffer?: number;
+        /**
+         * The color of the progress.
+         */
+        color: string;
+    }>;
+    /**
+     * The weight of the progress.
+     */
+    weight?: Property.Height<string | number>;
+    /**
+     * Whether the progress should be round.
+     */
+    round?: boolean;
+}
+declare const _default: import('vue').DefineComponent<ElmMultiProgressProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmMultiProgressProps> & Readonly<{}>, {
+    weight: Property.Height<string | number>;
+    round: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/data/ElmMultiProgress.vue.mjs

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

package/dist/components/data/ElmMultiProgress.vue2.mjs

@@ -0,0 +1,45 @@
+import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, Fragment, renderList } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmMultiProgress",
+  props: {
+    progress: {},
+    weight: { default: "4px" },
+    round: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const max = computed(() => props.progress.reduce((p, n) => p + n.value, 0));
+    const computedProgress = computed(() => {
+      let cumulative = 0;
+      return props.progress.map((p) => {
+        const scale = p.value / max.value * 100;
+        const start = cumulative;
+        cumulative += scale;
+        return { ...p, scale: scale / 100, start };
+      });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.container),
+        style: normalizeStyle({
+          "--weight": _ctx.weight,
+          "--border-radius": _ctx.round ? "calc(var(--weight) / 2)" : void 0
+        })
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(computedProgress.value, (p) => {
+          return openBlock(), createElementBlock("div", {
+            key: _ctx.index,
+            class: normalizeClass(_ctx.$style.bar),
+            style: normalizeStyle({
+              "--transform": `translateX(${p.start}%) scaleX(${p.scale})`,
+              "--color": p.color
+            })
+          }, null, 6);
+        }), 128))
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/data/ElmMultiProgress.vue3.mjs

@@ -0,0 +1,23 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode('._container_1xl4h_1{width:100%;height:var(--weight);position:relative;border-radius:var(--border-radius);overflow:hidden;background-color:#0000001a}[data-theme=dark] ._container_1xl4h_1{background-color:#ffffff1a}._bar_1xl4h_13{position:absolute;content:"";width:100%;height:100%;transition:transform .8s;transform:scaleX(0);transform:var(--transform, scaleX(0));transform-origin:left;background-color:red;background-color:var(--color, red)}'));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const container = "_container_1xl4h_1";
+const bar = "_bar_1xl4h_13";
+const style0 = {
+  container,
+  bar
+};
+export {
+  bar,
+  container,
+  style0 as default
+};

package/dist/components/data/ElmProgress.stories.d.ts

@@ -7,3 +7,4 @@ export declare const Primary: Story;
 export declare const WithBuffer: Story;
 export declare const Bold: Story;
 export declare const WithColor: Story;
+export declare const Loading: Story;