@elmethis/core 0.5.8 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,18 +3,18 @@
3
3
  try {
4
4
  if (typeof document != "undefined") {
5
5
  var elementStyle = document.createElement("style");
6
- elementStyle.appendChild(document.createTextNode('._progress_5ot7m_1{display:none}@keyframes _loading_5ot7m_23{0%{transform:scaleX(0);transform-origin:left}49%{transform:scaleX(1);transform-origin:left}51%{transform:scaleX(1);transform-origin:right}to{transform:scaleX(0);transform-origin:right}}._loading_5ot7m_23{position:absolute;content:"";width:100%;height:100%;transition:transform .8s;transform:scaleX(0);transform:var(--scale-x, scaleX(0));transform-origin:left;background-color:#555b67;background-color:var(--color, #555b67);animation-name:_loading_5ot7m_23;animation-duration:1.6s;animation-iteration-count:infinite}[data-theme=dark] ._loading_5ot7m_23{background-color:#b0b5be;background-color:var(--color, #b0b5be)}._container_5ot7m_40{width:100%;height:var(--weight);position:relative;border-radius:var(--border-radius);overflow:hidden;background-color:#0000001a}[data-theme=dark] ._container_5ot7m_40{background-color:#ffffff1a}._container_5ot7m_40 ._value_5ot7m_51{position:absolute;content:"";width:100%;height:100%;transition:transform .8s;transform:scaleX(0);transform:var(--scale-x, scaleX(0));transform-origin:left;background-color:#555b67;background-color:var(--color, #555b67)}[data-theme=dark] ._container_5ot7m_40 ._value_5ot7m_51{background-color:#b0b5be;background-color:var(--color, #b0b5be)}._container_5ot7m_40 ._buffer_5ot7m_64{position:absolute;content:"";width:100%;height:100%;transition:transform .4s;transform:scaleX(0);transform:var(--scale-x, scaleX(0));transform-origin:left;background-color:#555b67;background-color:var(--color, #555b67);opacity:.25}[data-theme=dark] ._container_5ot7m_40 ._buffer_5ot7m_64{background-color:#b0b5be;background-color:var(--color, #b0b5be)}'));
6
+ elementStyle.appendChild(document.createTextNode('._progress_kc3q3_1{display:none}@keyframes _loading_kc3q3_23{0%{transform:scaleX(0);transform-origin:left}49%{transform:scaleX(1);transform-origin:left}51%{transform:scaleX(1);transform-origin:right}to{transform:scaleX(0);transform-origin:right}}._loading_kc3q3_23{position:absolute;content:"";width:100%;height:100%;transition:transform .8s;transform:scaleX(0);transform:var(--scale-x, scaleX(0));transform-origin:left;background-color:#555b67;background-color:var(--color, #555b67)}[data-theme=dark] ._loading_kc3q3_23{background-color:#b0b5be;background-color:var(--color, #b0b5be)}._loading_kc3q3_23{animation-name:_loading_kc3q3_23;animation-duration:1.6s;animation-iteration-count:infinite}._container_kc3q3_42{width:100%;height:var(--weight);position:relative;border-radius:var(--border-radius);overflow:hidden;background-color:#0000001a}[data-theme=dark] ._container_kc3q3_42{background-color:#ffffff1a}._container_kc3q3_42 ._value_kc3q3_53{position:absolute;content:"";width:100%;height:100%;transition:transform .8s;transform:scaleX(0);transform:var(--scale-x, scaleX(0));transform-origin:left;background-color:#555b67;background-color:var(--color, #555b67)}[data-theme=dark] ._container_kc3q3_42 ._value_kc3q3_53{background-color:#b0b5be;background-color:var(--color, #b0b5be)}._container_kc3q3_42 ._buffer_kc3q3_66{position:absolute;content:"";width:100%;height:100%;transition:transform .4s;transform:scaleX(0);transform:var(--scale-x, scaleX(0));transform-origin:left;background-color:#555b67;background-color:var(--color, #555b67)}[data-theme=dark] ._container_kc3q3_42 ._buffer_kc3q3_66{background-color:#b0b5be;background-color:var(--color, #b0b5be)}._container_kc3q3_42 ._buffer_kc3q3_66{opacity:.25}'));
7
7
  document.head.appendChild(elementStyle);
8
8
  }
9
9
  } catch (e) {
10
10
  console.error("vite-plugin-css-injected-by-js", e);
11
11
  }
12
12
  })();
13
- const progress = "_progress_5ot7m_1";
14
- const loading = "_loading_5ot7m_23";
15
- const container = "_container_5ot7m_40";
16
- const value = "_value_5ot7m_51";
17
- const buffer = "_buffer_5ot7m_64";
13
+ const progress = "_progress_kc3q3_1";
14
+ const loading = "_loading_kc3q3_23";
15
+ const container = "_container_kc3q3_42";
16
+ const value = "_value_kc3q3_53";
17
+ const buffer = "_buffer_kc3q3_66";
18
18
  const style0 = {
19
19
  progress,
20
20
  loading,
@@ -4,3 +4,4 @@ declare const meta: Meta<typeof ElmTextField>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof meta>;
6
6
  export declare const Primary: Story;
7
+ export declare const Focus: Story;
@@ -16,7 +16,9 @@ declare const __VLS_defaults: {
16
16
  type __VLS_PublicProps = {
17
17
  modelValue?: typeof __VLS_defaults['modelValue'];
18
18
  } & __VLS_Props;
19
- declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
19
+ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
20
+ focus: () => void;
21
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
20
22
  "update:modelValue": (value: string) => any;
21
23
  }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
22
24
  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
@@ -25,5 +27,7 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
25
27
  loading: boolean;
26
28
  disabled: boolean;
27
29
  isPassword: boolean;
28
- }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
30
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
31
+ target: HTMLInputElement;
32
+ }, HTMLDivElement>;
29
33
  export default _default;
@@ -1,4 +1,4 @@
1
- import { defineComponent, mergeModels, ref, useModel, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, createBlock, createCommentVNode, unref, toDisplayString, withDirectives, vModelDynamic, createVNode } from "vue";
1
+ import { defineComponent, mergeModels, ref, useModel, useTemplateRef, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, createBlock, createCommentVNode, unref, toDisplayString, withDirectives, vModelDynamic, createVNode } from "vue";
2
2
  import ElmInlineText from "../typography/ElmInlineText.vue.mjs";
3
3
  import { nanoid } from "nanoid";
4
4
  import ElmMdiIcon from "../icon/ElmMdiIcon.vue.mjs";
@@ -22,7 +22,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
22
22
  "modelModifiers": {}
23
23
  }),
24
24
  emits: ["update:modelValue"],
25
- setup(__props) {
25
+ setup(__props, { expose: __expose }) {
26
26
  const id = nanoid();
27
27
  const isFocused = ref(false);
28
28
  const props = __props;
@@ -48,6 +48,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
48
48
  link: mdiLinkVariant,
49
49
  search: mdiMagnify
50
50
  };
51
+ const t = useTemplateRef("target");
52
+ __expose({
53
+ focus: () => {
54
+ void t.value?.focus();
55
+ }
56
+ });
51
57
  return (_ctx, _cache) => {
52
58
  return openBlock(), createElementBlock("div", {
53
59
  class: normalizeClass([_ctx.$style.wrapper, { [_ctx.$style.active]: isFocused.value }]),
@@ -97,7 +103,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
97
103
  style: normalizeStyle({
98
104
  cursor: _ctx.disabled ? "not-allowed" : _ctx.loading ? "progress" : "auto"
99
105
  }),
100
- "aria-required": _ctx.required
106
+ "aria-required": _ctx.required,
107
+ ref: "target"
101
108
  }, null, 46, _hoisted_2), [
102
109
  [vModelDynamic, input.value]
103
110
  ]),
@@ -3,21 +3,21 @@
3
3
  try {
4
4
  if (typeof document != "undefined") {
5
5
  var elementStyle = document.createElement("style");
6
- elementStyle.appendChild(document.createTextNode("._parent_28tsl_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_28tsl_1:hover{background-color:#6987b81a;transform:translate(-.125rem) translateY(-.125rem)}._parent_28tsl_1:active{background-color:#59b57c1a;transform:translate(0) translateY(0)}._bookmark_28tsl_18{all:unset;display:flex;cursor:pointer;background-color:#ffffff80;flex-direction:row;height:120px}[data-theme=dark] ._bookmark_28tsl_18{background-color:#0003}@container (max-width: 700px){._bookmark_28tsl_18{flex-direction:column;height:auto}}._bookmark_28tsl_18 ._image_28tsl_35{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_28tsl_18 ._image_28tsl_35{min-width:0;min-width:initial;max-width:none;max-width:initial;width:100%}}._bookmark_28tsl_18 ._typography_28tsl_55{overflow:hidden;box-sizing:border-box;padding:.5rem;display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:.25rem}._bookmark_28tsl_18 ._typography_28tsl_55 ._title_28tsl_65{display:inline;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}._bookmark_28tsl_18 ._typography_28tsl_55 ._date_28tsl_72{width:100%;display:flex;justify-content:flex-end;gap:.5rem;white-space:nowrap;text-overflow:ellipsis}._link_28tsl_81{width:100%;display:flex;justify-content:flex-end;align-items:center;white-space:nowrap;text-overflow:ellipsis;gap:.5rem}._favicon_28tsl_91{width:16px;height:16px}"));
6
+ 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}"));
7
7
  document.head.appendChild(elementStyle);
8
8
  }
9
9
  } catch (e) {
10
10
  console.error("vite-plugin-css-injected-by-js", e);
11
11
  }
12
12
  })();
13
- const parent = "_parent_28tsl_1";
14
- const bookmark = "_bookmark_28tsl_18";
15
- const image = "_image_28tsl_35";
16
- const typography = "_typography_28tsl_55";
17
- const title = "_title_28tsl_65";
18
- const date = "_date_28tsl_72";
19
- const link = "_link_28tsl_81";
20
- const favicon = "_favicon_28tsl_91";
13
+ const parent = "_parent_1tjtz_1";
14
+ const bookmark = "_bookmark_1tjtz_18";
15
+ const image = "_image_1tjtz_37";
16
+ const typography = "_typography_1tjtz_57";
17
+ const title = "_title_1tjtz_67";
18
+ const date = "_date_1tjtz_74";
19
+ const link = "_link_1tjtz_83";
20
+ const favicon = "_favicon_1tjtz_93";
21
21
  const style0 = {
22
22
  parent,
23
23
  bookmark,
@@ -3,14 +3,14 @@
3
3
  try {
4
4
  if (typeof document != "undefined") {
5
5
  var elementStyle = document.createElement("style");
6
- elementStyle.appendChild(document.createTextNode('._divider_154tk_1{margin-block:var(--margin-block);position:relative;display:block;width:100%;overflow:visible;border:none;border-bottom:1px solid #555b67;transform:scaleX(var(--scale));transition:transform 1.2s}[data-theme=dark] ._divider_154tk_1{border-bottom-color:#bec2ca}._divider_154tk_1:before{position:absolute;content:"";height:5px;width:5px;top:-2px;border-radius:50%;background-color:#555b67;left:0}[data-theme=dark] ._divider_154tk_1:before{background-color:#bec2ca}._divider_154tk_1:after{position:absolute;content:"";height:5px;width:5px;top:-2px;border-radius:50%;background-color:#555b67;right:0}[data-theme=dark] ._divider_154tk_1:after{background-color:#bec2ca}'));
6
+ elementStyle.appendChild(document.createTextNode('._divider_10gwr_1{margin-block:var(--margin-block);position:relative;display:block;width:100%;overflow:visible;border:none;border-bottom:1px solid #555b67;transform:scaleX(var(--scale));transition:transform 1.2s}[data-theme=dark] ._divider_10gwr_1{border-bottom-color:#bec2ca}._divider_10gwr_1:before{position:absolute;content:"";height:5px;width:5px;top:-2px;border-radius:50%;background-color:#555b67}[data-theme=dark] ._divider_10gwr_1:before{background-color:#bec2ca}._divider_10gwr_1:before{left:0}._divider_10gwr_1:after{position:absolute;content:"";height:5px;width:5px;top:-2px;border-radius:50%;background-color:#555b67}[data-theme=dark] ._divider_10gwr_1:after{background-color:#bec2ca}._divider_10gwr_1:after{right:0}'));
7
7
  document.head.appendChild(elementStyle);
8
8
  }
9
9
  } catch (e) {
10
10
  console.error("vite-plugin-css-injected-by-js", e);
11
11
  }
12
12
  })();
13
- const divider = "_divider_154tk_1";
13
+ const divider = "_divider_10gwr_1";
14
14
  const style0 = {
15
15
  divider
16
16
  };
@@ -0,0 +1,10 @@
1
+ import _sfc_main from "./ElmTypingAnimation.vue2.mjs";
2
+ import style0 from "./ElmTypingAnimation.vue3.mjs";
3
+ import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
4
+ const cssModules = {
5
+ "$style": style0
6
+ };
7
+ const ElmTypingAnimation = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
8
+ export {
9
+ ElmTypingAnimation as default
10
+ };
@@ -0,0 +1,49 @@
1
+ import { defineComponent, ref, onMounted, createElementBlock, openBlock, normalizeStyle, normalizeClass, createTextVNode, createElementVNode, toDisplayString } from "vue";
2
+ const _sfc_main = /* @__PURE__ */ defineComponent({
3
+ __name: "ElmTypingAnimation",
4
+ props: {
5
+ texts: { default: () => [] },
6
+ interval: { default: 3e3 },
7
+ fontSize: { default: "1rem" }
8
+ },
9
+ setup(__props) {
10
+ const props = __props;
11
+ const sleep = (duration) => {
12
+ return new Promise((resolve) => {
13
+ setTimeout(resolve, duration);
14
+ });
15
+ };
16
+ const display = ref("");
17
+ onMounted(async () => {
18
+ while (true) {
19
+ for (const text of props.texts) {
20
+ for (const char of text) {
21
+ await sleep(75);
22
+ display.value += char;
23
+ }
24
+ await sleep(props.interval);
25
+ while (true) {
26
+ if (display.value === "") break;
27
+ display.value = display.value.slice(0, -1);
28
+ await sleep(25);
29
+ }
30
+ await sleep(200);
31
+ }
32
+ }
33
+ });
34
+ return (_ctx, _cache) => {
35
+ return openBlock(), createElementBlock("span", {
36
+ class: normalizeClass(_ctx.$style.text),
37
+ style: normalizeStyle({ fontSize: _ctx.fontSize })
38
+ }, [
39
+ createTextVNode(toDisplayString(display.value), 1),
40
+ createElementVNode("span", {
41
+ class: normalizeClass(_ctx.$style.cursor)
42
+ }, " ", 2)
43
+ ], 6);
44
+ };
45
+ }
46
+ });
47
+ export {
48
+ _sfc_main as default
49
+ };
@@ -0,0 +1,26 @@
1
+ (function() {
2
+ "use strict";
3
+ try {
4
+ if (typeof document != "undefined") {
5
+ var elementStyle = document.createElement("style");
6
+ elementStyle.appendChild(document.createTextNode("._text_kfz2u_1{font-family:monospace;color:#000c;-webkit-user-select:none;-moz-user-select:none;user-select:none}._text_kfz2u_1::-moz-selection{color:#fffc;background-color:#000c}._text_kfz2u_1::selection{color:#fffc;background-color:#000c}[data-theme=dark] ._text_kfz2u_1{color:#fffc}[data-theme=dark] ._text_kfz2u_1::-moz-selection{color:#000c;background-color:#fffc}[data-theme=dark] ._text_kfz2u_1::selection{color:#000c;background-color:#fffc}@keyframes _blink_kfz2u_1{0%{opacity:0}to{opacity:1}}._cursor_kfz2u_26{margin-inline:1px;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:#3e434b80}[data-theme=dark] ._cursor_kfz2u_26{background-color:#cccfd540}"));
7
+ document.head.appendChild(elementStyle);
8
+ }
9
+ } catch (e) {
10
+ console.error("vite-plugin-css-injected-by-js", e);
11
+ }
12
+ })();
13
+ const text = "_text_kfz2u_1";
14
+ const cursor = "_cursor_kfz2u_26";
15
+ const blink = "_blink_kfz2u_1";
16
+ const style0 = {
17
+ text,
18
+ cursor,
19
+ blink
20
+ };
21
+ export {
22
+ blink,
23
+ cursor,
24
+ style0 as default,
25
+ text
26
+ };
package/dist/index.d.ts CHANGED
@@ -108,5 +108,7 @@ export type { ElmParagraphProps } from './components/typography/ElmParagraph.vue
108
108
  export { default as ElmParagraph } from './components/typography/ElmParagraph.vue';
109
109
  export type { ElmListProps } from './components/typography/ElmList.vue';
110
110
  export { default as ElmList } from './components/typography/ElmList.vue';
111
+ export type { ElmTypingAnimationProps } from './components/typography/ElmTypingAnimation.vue';
112
+ export { default as ElmTypingAnimation } from './components/typography/ElmTypingAnimation.vue';
111
113
  export { useElmethisTheme } from './hooks/useElmethisTheme';
112
114
  export { useTyping } from './hooks/useTyping';
package/dist/index.mjs CHANGED
@@ -66,6 +66,7 @@ import { default as default54 } from "./components/typography/ElmInlineText.vue.
66
66
  import { default as default55 } from "./components/typography/ElmParagraph.vue.mjs";
67
67
  import { default as default56 } from "./components/typography/ElmList.vue.mjs";
68
68
 
69
+ import { default as default57 } from "./components/typography/ElmTypingAnimation.vue.mjs";
69
70
  import { useElmethisTheme } from "./hooks/useElmethisTheme.mjs";
70
71
  import { useTyping } from "./hooks/useTyping.mjs";
71
72
  export {
@@ -122,6 +123,7 @@ export {
122
123
  default11 as ElmToggle,
123
124
  default33 as ElmToggleTheme,
124
125
  default12 as ElmTooltip,
126
+ default57 as ElmTypingAnimation,
125
127
  default19 as ElmUnsupportedBlock,
126
128
  default25 as ElmValidation,
127
129
  useElmethisTheme,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elmethis/core",
3
- "version": "0.5.8",
3
+ "version": "0.6.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -24,17 +24,17 @@
24
24
  },
25
25
  "dependencies": {
26
26
  "@mdi/js": "^7.4.47",
27
- "@vueuse/core": "^13.8.0",
27
+ "@vueuse/core": "^13.9.0",
28
28
  "katex": "^0.16.22",
29
29
  "lodash-es": "^4.17.21",
30
30
  "marked": "^16.2.1",
31
31
  "nanoid": "^5.1.5",
32
32
  "polished": "^4.3.1",
33
- "shiki": "^3.12.0"
33
+ "shiki": "^3.12.2"
34
34
  },
35
35
  "devDependencies": {
36
- "@notionhq/client": "^4.0.2",
37
- "@storybook/vue3-vite": "9.1.3",
36
+ "@notionhq/client": "^5.0.0",
37
+ "@storybook/vue3-vite": "9.1.5",
38
38
  "@types/json-schema": "^7.0.15",
39
39
  "@types/katex": "^0.16.7",
40
40
  "@types/lodash-es": "^4.17.12",
@@ -44,12 +44,12 @@
44
44
  "jarkup-ts": "^0.4.1",
45
45
  "openapi-types": "^12.1.3",
46
46
  "postcss": "^8.5.6",
47
- "postcss-preset-env": "^10.3.0",
48
- "sass": "^1.91.0",
49
- "vite": "^7.1.3",
47
+ "postcss-preset-env": "^10.3.1",
48
+ "sass": "^1.92.1",
49
+ "vite": "^7.1.5",
50
50
  "vite-plugin-css-injected-by-js": "^3.5.2",
51
51
  "vite-plugin-dts": "^4.5.4",
52
- "vue-tsc": "^3.0.6"
52
+ "vue-tsc": "^3.0.7"
53
53
  },
54
54
  "peerDependencies": {
55
55
  "vue": "^3.4.0"