@elmethis/vue 0.3.2 → 0.4.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.
@@ -10,10 +10,9 @@
10
10
  console.error("vite-plugin-css-injected-by-js", e);
11
11
  }
12
12
  })();
13
- import { defineComponent, useCssModule, ref, computed, watch, createElementBlock, openBlock, normalizeClass, createBlock, resolveDynamicComponent, h } from "vue";
13
+ import { defineComponent, defineAsyncComponent, useCssModule, ref, computed, watch, createElementBlock, openBlock, normalizeClass, createBlock, resolveDynamicComponent, h } from "vue";
14
14
  import ElmInlineText from "../typography/ElmInlineText.vue.mjs";
15
15
  import ElmKatex from "../code/ElmKatex.vue.mjs";
16
- import ElmMermaid from "../code/ElmMermaid.vue.mjs";
17
16
  import ElmInlineIcon from "../icon/ElmInlineIcon.vue.mjs";
18
17
  import ElmHeading from "../typography/ElmHeading.vue.mjs";
19
18
  import ElmParagraph from "../typography/ElmParagraph.vue.mjs";
@@ -33,6 +32,7 @@ import _sfc_main$1 from "../table/ElmTableBody.vue.mjs";
33
32
  import ElmTableRow from "../table/ElmTableRow.vue.mjs";
34
33
  import ElmTableCell from "../table/ElmTableCell.vue.mjs";
35
34
  import ElmUnsupportedBlock from "../fallback/ElmUnsupportedBlock.vue.mjs";
35
+ import ElmBlockFallback from "../fallback/ElmBlockFallback.vue.mjs";
36
36
  import { kebabCase } from "lodash-es";
37
37
  const _sfc_main = /* @__PURE__ */ defineComponent({
38
38
  __name: "ElmJsonComponentRenderer",
@@ -40,6 +40,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
40
40
  jsonComponents: {}
41
41
  },
42
42
  setup(__props) {
43
+ const ElmMermaid = defineAsyncComponent({
44
+ loader: async () => (await import("../code/ElmMermaid.vue.mjs")).default,
45
+ loadingComponent: ElmBlockFallback
46
+ });
43
47
  const props = __props;
44
48
  const style = useCssModule();
45
49
  const convertInlineComponentsToPlainText = (inlineComponents) => {
@@ -81,7 +85,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
81
85
  },
82
86
  { default: () => render2(slots.default) }
83
87
  ),
84
- Paragraph: ({ slots }) => h(ElmParagraph, {}, { default: () => render2(slots.default) }),
88
+ Paragraph: ({ props: props2, slots }) => h(
89
+ ElmParagraph,
90
+ {
91
+ color: props2?.color,
92
+ backgroundColor: props2?.backgroundColor
93
+ },
94
+ { default: () => render2(slots.default) }
95
+ ),
85
96
  ListItem: ({ slots }) => h("li", {}, { default: () => render2(slots.default) }),
86
97
  List: ({ props: props2, slots }) => h(
87
98
  _sfc_main$2,
@@ -4,3 +4,5 @@ declare const meta: Meta<typeof ElmParagraph>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof meta>;
6
6
  export declare const Primary: Story;
7
+ export declare const Color: Story;
8
+ export declare const BackgroundColor: Story;
@@ -1,4 +1,6 @@
1
1
  export interface ElmParagraphProps {
2
+ color?: string;
3
+ backgroundColor?: string;
2
4
  }
3
5
  declare function __VLS_template(): {
4
6
  attrs: Partial<{}>;
@@ -2,6 +2,10 @@ import { defineComponent, ref, createElementBlock, openBlock, normalizeStyle, no
2
2
  import { useIntersectionObserver } from "@vueuse/core";
3
3
  const _sfc_main = /* @__PURE__ */ defineComponent({
4
4
  __name: "ElmParagraph",
5
+ props: {
6
+ color: {},
7
+ backgroundColor: {}
8
+ },
5
9
  setup(__props) {
6
10
  const target = ref(null);
7
11
  const targetIsVisible = ref(false);
@@ -14,7 +18,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
14
18
  ref: target,
15
19
  class: normalizeClass(_ctx.$style.paragraph),
16
20
  style: normalizeStyle({
17
- "--opacity": targetIsVisible.value ? 1 : 0
21
+ "--opacity": targetIsVisible.value ? 1 : 0,
22
+ "--color": __props.color,
23
+ "--background-color": __props.backgroundColor
18
24
  })
19
25
  }, [
20
26
  renderSlot(_ctx.$slots, "default")
@@ -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("._paragraph_19lcl_1{margin-block:2rem;opacity:var(--opacity);transition:opacity .8s;color:#000000b3}._paragraph_19lcl_1::-moz-selection{color:#ffffffb3;background-color:#000000b3}._paragraph_19lcl_1::selection{color:#ffffffb3;background-color:#000000b3}[data-theme=dark] ._paragraph_19lcl_1{color:#ffffffb3}[data-theme=dark] ._paragraph_19lcl_1::-moz-selection{color:#000000b3;background-color:#ffffffb3}[data-theme=dark] ._paragraph_19lcl_1::selection{color:#000000b3;background-color:#ffffffb3}"));
6
+ elementStyle.appendChild(document.createTextNode("._paragraph_1tklt_1{margin-block:2rem;opacity:var(--opacity);transition:opacity .8s;color:var(--color);background-color:inherit;background-color:var(--background-color, inherit)}._paragraph_1tklt_1::-moz-selection{color:#ffffffb3;background-color:#000000b3}._paragraph_1tklt_1::selection{color:#ffffffb3;background-color:#000000b3}[data-theme=dark] ._paragraph_1tklt_1{color:#ffffffb3}[data-theme=dark] ._paragraph_1tklt_1::-moz-selection{color:#000000b3;background-color:#ffffffb3}[data-theme=dark] ._paragraph_1tklt_1::selection{color:#000000b3;background-color:#ffffffb3}"));
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 paragraph = "_paragraph_19lcl_1";
13
+ const paragraph = "_paragraph_1tklt_1";
14
14
  const style0 = {
15
15
  paragraph
16
16
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elmethis/vue",
3
- "version": "0.3.2",
3
+ "version": "0.4.1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -32,31 +32,31 @@
32
32
  "mermaid": "^11.12.3",
33
33
  "nanoid": "^5.1.6",
34
34
  "polished": "^4.3.1",
35
- "shiki": "^3.22.0"
35
+ "shiki": "^4.0.0"
36
36
  },
37
37
  "devDependencies": {
38
- "@ag-ui/core": "^0.0.45",
39
- "@notionhq/client": "^5.9.0",
40
- "storybook": "^10.2.10",
41
- "@storybook/addon-docs": "^10.2.10",
42
- "@storybook/vue3-vite": "10.2.10",
38
+ "@ag-ui/core": "^0.0.46",
39
+ "@notionhq/client": "^5.11.0",
40
+ "@storybook/addon-docs": "^10.2.13",
41
+ "@storybook/vue3-vite": "10.2.13",
43
42
  "@types/json-schema": "^7.0.15",
44
43
  "@types/katex": "^0.16.8",
45
44
  "@types/lodash-es": "^4.17.12",
46
45
  "@types/prismjs": "^1.26.6",
47
46
  "@vitejs/plugin-vue": "^6.0.4",
47
+ "@vue/tsconfig": "^0.8.1",
48
48
  "csstype": "^3.2.3",
49
- "jarkup-ts": "^0.7.0",
49
+ "jarkup-ts": "^0.8.0",
50
50
  "openapi-types": "^12.1.3",
51
51
  "postcss": "^8.5.6",
52
52
  "postcss-preset-env": "^11.2.0",
53
53
  "sass": "^1.97.3",
54
+ "storybook": "^10.2.13",
55
+ "typescript": "^5.9.3",
54
56
  "vite": "^7.3.1",
55
- "vite-plugin-css-injected-by-js": "^3.5.2",
57
+ "vite-plugin-css-injected-by-js": "^4.0.1",
56
58
  "vite-plugin-dts": "^4.5.4",
57
- "vue-tsc": "^3.2.5",
58
- "@vue/tsconfig": "^0.8.1",
59
- "typescript": "^5.9.3"
59
+ "vue-tsc": "^3.2.5"
60
60
  },
61
61
  "peerDependencies": {
62
62
  "vue": "^3.4.0"