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

package/dist/components/form/ElmTextField.css

@@ -0,0 +1,163 @@
+@keyframes _loading_bthl1_19 {
+0% {
+    transform-origin: 0%;
+    transform: scaleX(0);
+}
+40% {
+    transform-origin: 0%;
+    transform: scaleX(1);
+}
+60% {
+    transform-origin: 100%;
+    transform: scaleX(1);
+}
+100% {
+    transform-origin: 100%;
+    transform: scaleX(0);
+}
+}
+._loading_bthl1_19 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #6987b8;
+  transition: opacity 200ms;
+  pointer-events: none;
+  animation-name: _loading_bthl1_19;
+  animation-iteration-count: infinite;
+  animation-duration: 1600ms;
+}
+._wrapper_bthl1_33 {
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: border-color 200ms, background-color 200ms;
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--border-color);
+  background-color: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.15);
+}
+[data-theme=dark] ._wrapper_bthl1_33 {
+  background-color: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.75);
+}
+._header_bthl1_55 {
+  box-sizing: border-box;
+  height: 0.75rem;
+  padding: 0 0.25rem;
+  display: flex;
+  justify-content: space-between;
+}
+._label_bthl1_63 {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+  height: 0.75rem;
+  vertical-align: top;
+  transition: color 200ms;
+  color: rgba(0, 0, 0, 0.65);
+  color: var(--color, rgba(0, 0, 0, 0.65));
+}
+[data-theme=dark] ._label_bthl1_63 {
+  color: rgba(255, 255, 255, 0.65);
+  color: var(--color, rgba(255, 255, 255, 0.65));
+}
+._requierd_bthl1_78 {
+  padding-inline: 0.25rem;
+  color: #c56565;
+  font-weight: bold;
+}
+._body_bthl1_84 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 0.5rem;
+}
+._left-icon_bthl1_91 {
+  margin: auto 0.25rem;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0.7;
+}
+[data-theme=dark] ._left-icon_bthl1_91 {
+  filter: invert(1);
+}
+._input_bthl1_104 {
+  all: unset;
+  box-sizing: border-box;
+  padding: 0.5rem;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.7);
+  caret-color: rgba(0, 0, 0, 0.7);
+}
+._input_bthl1_104::-moz-placeholder {
+  opacity: 0.5;
+}
+._input_bthl1_104::placeholder {
+  opacity: 0.5;
+}
+[data-theme=dark] ._input_bthl1_104::-moz-placeholder {
+  opacity: 0.7;
+}
+[data-theme=dark] ._input_bthl1_104::placeholder {
+  opacity: 0.7;
+}
+._input_bthl1_104::-moz-selection {
+  background-color: rgba(0, 0, 0, 0.7);
+  color: rgba(255, 255, 255, 0.7);
+}
+._input_bthl1_104::selection {
+  background-color: rgba(0, 0, 0, 0.7);
+  color: rgba(255, 255, 255, 0.7);
+}
+[data-theme=dark] ._input_bthl1_104 {
+  color: rgba(255, 255, 255, 0.7);
+  caret-color: rgba(255, 255, 255, 0.7);
+}
+[data-theme=dark] ._input_bthl1_104::-moz-selection {
+  background-color: rgba(255, 255, 255, 0.7);
+  color: rgba(0, 0, 0, 0.7);
+}
+[data-theme=dark] ._input_bthl1_104::selection {
+  background-color: rgba(255, 255, 255, 0.7);
+  color: rgba(0, 0, 0, 0.7);
+}
+._icon-box_bthl1_131 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+._icon_bthl1_131 {
+  box-sizing: border-box;
+  border-radius: 50%;
+  padding: 0.25rem;
+  width: 28px;
+  height: 28px;
+  transition: background-color 200ms;
+  color: gray;
+  cursor: pointer;
+}
+._icon_bthl1_131:hover {
+  background-color: rgba(128, 128, 128, 0.2);
+}
+._suffix_bthl1_151 {
+  opacity: 0.6;
+  padding: 0 0.5rem;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}

package/dist/components/form/ElmTextField.stories.d.ts

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

package/dist/components/form/ElmTextField.vue.d.ts

@@ -0,0 +1,30 @@
+import { VNode, FunctionalComponent } from 'vue';
+export interface ElmTextFieldProps {
+    label: string;
+    maxLength?: number;
+    suffix?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    icon?: VNode | FunctionalComponent;
+    isPassword?: boolean;
+    required?: boolean;
+}
+type __VLS_Props = ElmTextFieldProps;
+declare const __VLS_defaults: {
+    modelValue: string;
+};
+type __VLS_PublicProps = {
+    modelValue?: typeof __VLS_defaults['modelValue'];
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    required: boolean;
+    loading: boolean;
+    disabled: boolean;
+    isPassword: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/form/ElmTextField.vue.mjs

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

package/dist/components/form/ElmTextField.vue2.mjs

@@ -0,0 +1,124 @@
+import { defineComponent, mergeModels, ref, useModel, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, createBlock, createCommentVNode, unref, toDisplayString, withDirectives, resolveDynamicComponent, vModelDynamic, createVNode } from "vue";
+import { Icon } from "@iconify/vue";
+import ElmInlineText from "../inline/ElmInlineText.vue.mjs";
+import { nanoid } from "nanoid";
+const _hoisted_1 = ["for"];
+const _hoisted_2 = ["id", "type", "placeholder", "disabled", "aria-required"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmTextField",
+  props: /* @__PURE__ */ mergeModels({
+    label: {},
+    maxLength: {},
+    suffix: {},
+    placeholder: {},
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    icon: {},
+    isPassword: { type: Boolean, default: false },
+    required: { type: Boolean, default: false }
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const id = nanoid();
+    const isFocused = ref(false);
+    const props = __props;
+    const input = useModel(__props, "modelValue");
+    const type = ref(props.isPassword ? "password" : "text");
+    const handleDelete = () => {
+      if (!props.loading && !props.disabled) input.value = "";
+    };
+    const handleVisibleSwitch = () => {
+      if (!props.loading && !props.disabled)
+        type.value = type.value === "text" ? "password" : "text";
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.wrapper),
+        style: normalizeStyle({
+          "--border-color": isFocused.value ? "#59b57c" : "transparent",
+          backgroundColor: _ctx.disabled || _ctx.loading ? "rgba(0,0,0,0.15)" : void 0
+        })
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.header)
+        }, [
+          createElementVNode("label", {
+            for: unref(id),
+            class: normalizeClass(_ctx.$style.label),
+            style: normalizeStyle({ "--color": isFocused.value ? "#59b57c" : void 0 })
+          }, [
+            createElementVNode("span", null, toDisplayString(_ctx.label), 1),
+            _ctx.required ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(_ctx.$style.requierd)
+            }, "*", 2)) : createCommentVNode("", true)
+          ], 14, _hoisted_1),
+          _ctx.maxLength != null ? (openBlock(), createBlock(ElmInlineText, {
+            key: 0,
+            text: `${input.value.length} / ${_ctx.maxLength}`,
+            color: input.value.length > _ctx.maxLength ? "#c56565" : "gray",
+            size: "0.75rem"
+          }, null, 8, ["text", "color"])) : createCommentVNode("", true)
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.body)
+        }, [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), {
+            class: normalizeClass(_ctx.$style["left-icon"])
+          }, null, 8, ["class"])),
+          withDirectives(createElementVNode("input", {
+            id: unref(id),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => input.value = $event),
+            type: type.value,
+            class: normalizeClass(_ctx.$style.input),
+            placeholder: _ctx.placeholder,
+            onFocus: _cache[1] || (_cache[1] = ($event) => isFocused.value = true),
+            onBlur: _cache[2] || (_cache[2] = ($event) => isFocused.value = false),
+            disabled: _ctx.disabled || _ctx.loading,
+            style: normalizeStyle({
+              cursor: _ctx.disabled ? "not-allowed" : _ctx.loading ? "progress" : "auto"
+            }),
+            "aria-required": _ctx.required
+          }, null, 46, _hoisted_2), [
+            [vModelDynamic, input.value]
+          ]),
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style["icon-box"])
+          }, [
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.$style.suffix)
+            }, [
+              _ctx.suffix != null ? (openBlock(), createBlock(ElmInlineText, {
+                key: 0,
+                text: _ctx.suffix
+              }, null, 8, ["text"])) : createCommentVNode("", true)
+            ], 2),
+            _ctx.isPassword ? (openBlock(), createBlock(unref(Icon), {
+              key: 0,
+              icon: type.value === "text" ? "heroicons:eye" : "heroicons:eye-slash",
+              class: normalizeClass(_ctx.$style.icon),
+              onClick: handleVisibleSwitch
+            }, null, 8, ["icon", "class"])) : createCommentVNode("", true),
+            createVNode(unref(Icon), {
+              icon: "heroicons:backspace-16-solid",
+              class: normalizeClass(_ctx.$style.icon),
+              onClick: handleDelete
+            }, null, 8, ["class"])
+          ], 2)
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.loading),
+          style: normalizeStyle({
+            opacity: _ctx.loading ? 0.2 : 0
+          })
+        }, null, 6)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/form/ElmTextField.vue3.mjs

@@ -0,0 +1,34 @@
+const loading = "_loading_bthl1_19";
+const wrapper = "_wrapper_bthl1_33";
+const header = "_header_bthl1_55";
+const label = "_label_bthl1_63";
+const requierd = "_requierd_bthl1_78";
+const body = "_body_bthl1_84";
+const input = "_input_bthl1_104";
+const icon = "_icon_bthl1_131";
+const suffix = "_suffix_bthl1_151";
+const style0 = {
+  loading,
+  wrapper,
+  header,
+  label,
+  requierd,
+  body,
+  "left-icon": "_left-icon_bthl1_91",
+  input,
+  "icon-box": "_icon-box_bthl1_131",
+  icon,
+  suffix
+};
+export {
+  body,
+  style0 as default,
+  header,
+  icon,
+  input,
+  label,
+  loading,
+  requierd,
+  suffix,
+  wrapper
+};

package/dist/components/form/ElmTotp.css

@@ -0,0 +1,60 @@
+._dummy-input_gewi2_1 {
+  all: unset;
+  height: 0px;
+}
+._container_gewi2_6 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+._char-box_gewi2_13 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 3.5rem;
+  height: 4rem;
+  border: solid 1px #ccc;
+  border-radius: 0.25rem;
+  transition: border-color 100ms, background-color 100ms, opacity 100ms;
+  background-color: rgba(0, 0, 0, 0.025);
+}
+[data-theme=dark] ._char-box_gewi2_13 {
+  background-color: rgba(255, 255, 255, 0.025);
+}
+._focused_gewi2_28 {
+  border-color: #6987b8;
+  background-color: rgba(105, 135, 184, 0.05);
+}
+._loading_gewi2_33 {
+  opacity: 0.5;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+[data-theme=dark] ._loading_gewi2_33 {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+._char_gewi2_13 {
+  font-size: 1.75rem;
+  font-family: monospace;
+  color: rgba(0, 0, 0, 0.7);
+}
+[data-theme=dark] ._char_gewi2_13 {
+  color: rgba(255, 255, 255, 0.7);
+}
+._icon_gewi2_50 {
+  width: 24px;
+  height: 24px;
+  padding: 0.5rem;
+  border-radius: 50%;
+  transition: background-color 200ms;
+  color: rgba(0, 0, 0, 0.7);
+}
+._icon_gewi2_50:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+[data-theme=dark] ._icon_gewi2_50 {
+  color: rgba(255, 255, 255, 0.7);
+}
+[data-theme=dark] ._icon_gewi2_50:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}

package/dist/components/form/ElmTotp.stories.d.ts

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

package/dist/components/form/ElmTotp.vue.d.ts

@@ -0,0 +1,12 @@
+export interface ElmTotpProps {
+    length: number;
+    focusOnMount?: boolean;
+    loading?: boolean;
+}
+declare const _default: import('vue').DefineComponent<ElmTotpProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmTotpProps> & Readonly<{}>, {
+    loading: boolean;
+    focusOnMount: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    targetRef: HTMLInputElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/form/ElmTotp.vue.mjs

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

package/dist/components/form/ElmTotp.vue2.mjs

@@ -0,0 +1,102 @@
+import { defineComponent, ref, computed, onMounted, nextTick, createElementBlock, openBlock, createElementVNode, withDirectives, normalizeClass, createVNode, Fragment, renderList, unref, createCommentVNode, toDisplayString, vModelText } from "vue";
+import { Icon } from "@iconify/vue";
+import { useFocus } from "@vueuse/core";
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["maxlength", "disabled"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmTotp",
+  props: {
+    length: {},
+    focusOnMount: { type: Boolean, default: true },
+    loading: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const inputModel = ref("");
+    const paddedInputRef = computed(() => {
+      return inputModel.value.padEnd(props.length, " ");
+    });
+    const targetRef = ref(null);
+    const { focused } = useFocus(targetRef);
+    const selectedIndex = ref(0);
+    const select = (index) => {
+      selectText(index);
+      selectedIndex.value = index;
+    };
+    const selectText = (index) => {
+      if (targetRef.value) {
+        targetRef.value.focus();
+        targetRef.value.setSelectionRange(index, index + 1);
+      }
+    };
+    const handleInput = () => {
+      if (focused.value && selectedIndex.value !== null) {
+        if (selectedIndex.value < props.length - 1) {
+          select(selectedIndex.value + 1);
+        } else {
+          select(0);
+        }
+      }
+    };
+    const onInputChange = () => {
+      var _a;
+      const inputValue = ((_a = targetRef.value) == null ? void 0 : _a.value) ?? "";
+      inputModel.value = inputValue.slice(0, props.length);
+      handleInput();
+    };
+    const reset = () => {
+      inputModel.value = "";
+      nextTick(() => select(0));
+    };
+    onMounted(() => {
+      inputModel.value = "";
+      if (props.focusOnMount) nextTick(() => select(0));
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.container)
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(paddedInputRef.value.split(""), (char, index) => {
+            return openBlock(), createElementBlock("div", {
+              class: normalizeClass([
+                _ctx.$style["char-box"],
+                {
+                  [_ctx.$style.focused]: unref(focused) && selectedIndex.value === index,
+                  [_ctx.$style.loading]: _ctx.loading
+                }
+              ]),
+              onClick: ($event) => select(index)
+            }, [
+              char !== " " ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                class: normalizeClass(_ctx.$style.char)
+              }, toDisplayString(char), 3)) : createCommentVNode("", true)
+            ], 10, _hoisted_1);
+          }), 256)),
+          createVNode(unref(Icon), {
+            icon: "heroicons:backspace",
+            class: normalizeClass(_ctx.$style.icon),
+            onClick: reset
+          }, null, 8, ["class"])
+        ], 2),
+        withDirectives(createElementVNode("input", {
+          "aria-hidden": "",
+          type: "text",
+          class: normalizeClass(_ctx.$style["dummy-input"]),
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputModel.value = $event),
+          ref_key: "targetRef",
+          ref: targetRef,
+          maxlength: _ctx.length,
+          onInput: onInputChange,
+          disabled: _ctx.loading
+        }, null, 42, _hoisted_2), [
+          [vModelText, inputModel.value]
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/form/ElmTotp.vue3.mjs

@@ -0,0 +1,22 @@
+const container = "_container_gewi2_6";
+const focused = "_focused_gewi2_28";
+const loading = "_loading_gewi2_33";
+const char = "_char_gewi2_13";
+const icon = "_icon_gewi2_50";
+const style0 = {
+  "dummy-input": "_dummy-input_gewi2_1",
+  container,
+  "char-box": "_char-box_gewi2_13",
+  focused,
+  loading,
+  char,
+  icon
+};
+export {
+  char,
+  container,
+  style0 as default,
+  focused,
+  icon,
+  loading
+};

package/dist/components/headings/ElmFragmentIdentifier.css

@@ -0,0 +1,20 @@
+._fragment_fa0ru_1 {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+._icon_fa0ru_7 {
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  width: 20px;
+  height: 20px;
+  color: #6987b8;
+  transition: background-color 200ms;
+  cursor: pointer;
+}
+._icon_fa0ru_7:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+[data-theme=dark] ._icon_fa0ru_7:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}

package/dist/components/headings/ElmFragmentIdentifier.stories.d.ts

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

package/dist/components/headings/ElmFragmentIdentifier.vue.d.ts

@@ -0,0 +1,8 @@
+export interface ElmFragmentIdentifierProps {
+    /**
+     * ID of the heading element.
+     */
+    id: string;
+}
+declare const _default: import('vue').DefineComponent<ElmFragmentIdentifierProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmFragmentIdentifierProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/headings/ElmFragmentIdentifier.vue.mjs

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