vft 0.0.363 → 0.0.365

package/es/components/md-code-demo/code-demo/utils.js

@@ -1,5 +1,5 @@
-const CODE_DEMO_OPTIONS = {
-  useBabel: false,
+const i = {
+  useBabel: !1,
   jsLib: [],
   cssLib: [],
   codepenLayout: "left",
@@ -8,9 +8,7 @@ const CODE_DEMO_OPTIONS = {
   vue: "https://unpkg.com/vue/dist/vue.global.prod.js",
   react: "https://unpkg.com/react/umd/react.production.min.js",
   reactDOM: "https://unpkg.com/react-dom/umd/react-dom.production.min.js"
-};
-const options = CODE_DEMO_OPTIONS;
-const preProcessorConfig = {
+}, n = i, d = {
   html: {
     types: ["html", "slim", "haml", "md", "markdown", "vue"],
     map: {
@@ -45,76 +43,66 @@ const preProcessorConfig = {
       styl: "stylus"
     }
   }
-};
-const h = (tag, attrs, children) => {
-  const node = document.createElement(tag);
-  attrs && Object.keys(attrs).forEach((key) => {
-    if (!key.indexOf("data")) {
-      const k = key.replace("data", "");
-      node.dataset[k] = attrs[key];
-    } else node[key] = attrs[key];
-  });
-  if (children)
-    children.forEach((child) => {
-      node.appendChild(child);
-    });
-  return node;
-};
-const getConfig = (config) => ({
-  ...options,
-  ...config,
+}, p = (t, s, c) => {
+  const o = document.createElement(t);
+  return s && Object.keys(s).forEach((e) => {
+    if (e.indexOf("data"))
+      o[e] = s[e];
+    else {
+      const r = e.replace("data", "");
+      o.dataset[r] = s[e];
+    }
+  }), c && c.forEach((e) => {
+    o.appendChild(e);
+  }), o;
+}, a = (t) => ({
+  ...n,
+  ...t,
   jsLib: Array.from(
-    /* @__PURE__ */ new Set([...options.jsLib || [], ...config.jsLib || []])
+    /* @__PURE__ */ new Set([...n.jsLib || [], ...t.jsLib || []])
   ),
   cssLib: Array.from(
-    /* @__PURE__ */ new Set([...options.cssLib || [], ...config.cssLib || []])
+    /* @__PURE__ */ new Set([...n.cssLib || [], ...t.cssLib || []])
   )
-});
-const loadScript = (state, link) => {
-  if (state[link] !== void 0) return state[link];
-  const loadEvent = new Promise((resolve) => {
-    const script = document.createElement("script");
-    script.src = link;
-    document.querySelector("body")?.appendChild(script);
-    script.onload = () => {
-      resolve();
+}), m = (t, s) => {
+  if (t[s] !== void 0) return t[s];
+  const c = new Promise((o) => {
+    const e = document.createElement("script");
+    e.src = s, document.querySelector("body")?.appendChild(e), e.onload = () => {
+      o();
     };
   });
-  state[link] = loadEvent;
-  return loadEvent;
-};
-const injectCSS = (shadowRoot, code) => {
-  if (code.css && // style not injected
-  Array.from(shadowRoot.childNodes).every(
-    (element) => element.nodeName !== "STYLE"
+  return t[s] = c, c;
+}, l = (t, s) => {
+  if (s.css && // style not injected
+  Array.from(t.childNodes).every(
+    (c) => c.nodeName !== "STYLE"
   )) {
-    const style = h("style", { innerHTML: code.css });
-    shadowRoot.appendChild(style);
+    const c = p("style", { innerHTML: s.css });
+    t.appendChild(c);
   }
-};
-const injectScript = (id, shadowRoot, code) => {
-  const scriptText = code.getScript();
-  if (scriptText && // style not injected
-  Array.from(shadowRoot.childNodes).every(
-    (element) => element.nodeName !== "SCRIPT"
+}, u = (t, s, c) => {
+  const o = c.getScript();
+  if (o && // style not injected
+  Array.from(s.childNodes).every(
+    (e) => e.nodeName !== "SCRIPT"
   )) {
-    const script = document.createElement("script");
-    script.appendChild(
+    const e = document.createElement("script");
+    e.appendChild(
       document.createTextNode(
         // here we are fixing `document` variable back to shadowDOM
-        `{const document=window.document.querySelector('#${id} .code-demo-container').shadowRoot;
-${scriptText}}`
+        `{const document=window.document.querySelector('#${t} .code-demo-container').shadowRoot;
+${o}}`
       )
-    );
-    shadowRoot.appendChild(script);
+    ), s.appendChild(e);
   }
 };
 export {
-  getConfig,
-  h,
-  injectCSS,
-  injectScript,
-  loadScript,
-  options,
-  preProcessorConfig
+  a as getConfig,
+  p as h,
+  l as injectCSS,
+  u as injectScript,
+  m as loadScript,
+  n as options,
+  d as preProcessorConfig
 };

package/es/components/md-code-demo/index.js

@@ -1,7 +1,12 @@
-import MdCodeDemo from "./md-code-demo.js";
-import { withInstall } from "../../utils/vue/install.js";
-const VftMdCodeDemo = withInstall(MdCodeDemo);
+import "@vueuse/core";
+import "@vft/utils";
+import "../config-provider/hooks/use-global-config.js";
+import "vue";
+import { withInstall as o } from "../../utils/vue/install.js";
+import "lodash-es";
+import t from "./md-code-demo.js";
+const a = o(t);
 export {
-  VftMdCodeDemo,
-  VftMdCodeDemo as default
+  a as VftMdCodeDemo,
+  a as default
 };

package/es/components/md-code-demo/md-code-demo.js

@@ -1,11 +1,17 @@
-import { VftIcon } from "../icon/index.js";
-import { vLoading } from "../loading/directive.js";
-import { defineComponent, ref, computed, onMounted, withDirectives, h } from "vue";
-import { getCode, getReactCode, getVueCode, getNormalCode } from "./code-demo/code.js";
-import { loadNormal, loadVue, loadReact } from "./code-demo/loadScript.js";
-import { atou, injectCSS, injectScript } from "./utils.js";
-const MARKDOWN_ENHANCE_DELAY = 800;
-const MdCodeDemo = defineComponent({
+import { VftIcon as j } from "../icon/index.js";
+import { vLoading as C } from "../loading/directive.js";
+import "@vft/utils";
+import "@vueuse/core";
+import "../config-provider/hooks/use-global-config.js";
+import { defineComponent as L, ref as l, computed as i, onMounted as S, withDirectives as _, h as t } from "vue";
+import "lodash-es";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import { getCode as N, getReactCode as w, getVueCode as x, getNormalCode as D } from "./code-demo/code.js";
+import { loadNormal as E, loadVue as M, loadReact as R } from "./code-demo/loadScript.js";
+import { atou as g, injectCSS as k, injectScript as J } from "./utils.js";
+const O = 800, B = L({
   name: "VftMdCodeDemo",
   props: {
     /**
@@ -15,7 +21,7 @@ const MdCodeDemo = defineComponent({
      */
     id: {
       type: String,
-      required: true
+      required: !0
     },
     /**
      * Code demo type
@@ -51,76 +57,52 @@ const MdCodeDemo = defineComponent({
      */
     code: {
       type: String,
-      required: true
+      required: !0
     }
   },
-  setup(props, { slots }) {
-    const isExpanded = ref(false);
-    const demoWrapper = ref();
-    const codeContainer = ref();
-    const height = ref("0");
-    const loaded = ref(false);
-    const config = computed(
-      () => JSON.parse(props.config ? atou(props.config) : "{}")
-    );
-    const codeType = computed(() => {
-      const codeConfig = JSON.parse(atou(props.code));
-      return getCode(codeConfig);
-    });
-    const code = computed(
-      () => props.type === "react" ? getReactCode(codeType.value, config.value) : props.type === "vue" ? getVueCode(codeType.value, config.value) : getNormalCode(codeType.value, config.value)
-    );
-    const isLegal = computed(() => code.value.isLegal);
-    const initDom = (innerHTML = false) => {
-      const shadowRoot = demoWrapper.value.attachShadow({ mode: "open" });
-      const appElement = document.createElement("div");
-      appElement.classList.add("code-demo-app");
-      shadowRoot.appendChild(appElement);
-      if (isLegal.value) {
-        if (innerHTML) appElement.innerHTML = code.value.html;
-        injectCSS(shadowRoot, code.value);
-        injectScript(props.id, shadowRoot, code.value);
-        height.value = "0";
-      } else height.value = "auto";
-      loaded.value = true;
-    };
-    const loadDemo = () => {
-      switch (props.type) {
-        case "react": {
-          return loadReact(code.value).then(() => initDom());
-        }
-        case "vue": {
-          return loadVue(code.value).then(() => initDom());
-        }
-        default: {
-          return loadNormal(code.value).then(() => initDom(true));
-        }
+  setup(a, { slots: y }) {
+    const n = l(!1), m = l(), f = l(), d = l("0"), s = l(!1), u = i(
+      () => JSON.parse(a.config ? g(a.config) : "{}")
+    ), o = i(() => {
+      const r = JSON.parse(g(a.code));
+      return N(r);
+    }), e = i(
+      () => a.type === "react" ? w(o.value, u.value) : a.type === "vue" ? x(o.value, u.value) : D(o.value, u.value)
+    ), h = i(() => e.value.isLegal), c = (r = !1) => {
+      const p = m.value.attachShadow({ mode: "open" }), v = document.createElement("div");
+      v.classList.add("code-demo-app"), p.appendChild(v), h.value ? (r && (v.innerHTML = e.value.html), k(p, e.value), J(a.id, p, e.value), d.value = "0") : d.value = "auto", s.value = !0;
+    }, b = () => {
+      switch (a.type) {
+        case "react":
+          return R(e.value).then(() => c());
+        case "vue":
+          return M(e.value).then(() => c());
+        default:
+          return E(e.value).then(() => c(!0));
       }
     };
-    onMounted(() => {
+    return S(() => {
       setTimeout(() => {
-        void loadDemo();
-      }, MARKDOWN_ENHANCE_DELAY);
-    });
-    return () => withDirectives(
-      h("div", { class: "vft-md-code-demo", id: props.id }, [
+        b();
+      }, O);
+    }), () => _(
+      t("div", { class: "vft-md-code-demo", id: a.id }, [
         // loaded.value ? null : h(Icon, { class: 'loading', icon: 'icon-icomoon-free:spinner2' }),
-        h("div", { class: "code-demo-header" }, [
-          code.value.isLegal ? h("button", {
-            class: ["toggle-button", isExpanded.value ? "down" : "right"],
+        t("div", { class: "code-demo-header" }, [
+          e.value.isLegal ? t("button", {
+            class: ["toggle-button", n.value ? "down" : "right"],
             onClick: () => {
-              height.value = isExpanded.value ? "0" : `${codeContainer.value.clientHeight + 13.8}px`;
-              isExpanded.value = !isExpanded.value;
+              d.value = n.value ? "0" : `${f.value.clientHeight + 13.8}px`, n.value = !n.value;
             }
           }) : null,
-          props.title ? h("span", { class: "title" }, decodeURIComponent(props.title)) : null,
-          h(
+          a.title ? t("span", { class: "title" }, decodeURIComponent(a.title)) : null,
+          t(
             "div",
             {
               style: { display: "flex" }
             },
             [
-              code.value.isLegal && code.value.jsfiddle !== false ? h(
+              e.value.isLegal && e.value.jsfiddle !== !1 ? t(
                 "form",
                 {
                   class: "code-demo-jsfiddle",
@@ -129,54 +111,54 @@ const MdCodeDemo = defineComponent({
                   method: "post"
                 },
                 [
-                  h("input", {
+                  t("input", {
                     type: "hidden",
                     name: "html",
-                    value: code.value.html
+                    value: e.value.html
                   }),
-                  h("input", {
+                  t("input", {
                     type: "hidden",
                     name: "js",
-                    value: code.value.js
+                    value: e.value.js
                   }),
-                  h("input", {
+                  t("input", {
                     type: "hidden",
                     name: "css",
-                    value: code.value.css
+                    value: e.value.css
                   }),
-                  h("input", {
+                  t("input", {
                     type: "hidden",
                     name: "wrap",
                     value: "1"
                   }),
-                  h("input", {
+                  t("input", {
                     type: "hidden",
                     name: "panel_js",
                     value: "3"
                   }),
-                  h("input", {
+                  t("input", {
                     type: "hidden",
                     name: "resources",
                     value: [
-                      ...code.value.cssLib,
-                      ...code.value.jsLib
+                      ...e.value.cssLib,
+                      ...e.value.jsLib
                     ].join(",")
                   }),
-                  h(
+                  t(
                     "button",
                     {
                       type: "submit",
                       "aria-label": "JSFiddle",
                       "data-balloon-pos": "up"
                     },
-                    h(VftIcon, {
+                    t(j, {
                       icon: "icon-jsfiddle",
                       class: "jsfiddle-button"
                     })
                   )
                 ]
               ) : null,
-              !code.value.isLegal || code.value.codepen !== false ? h(
+              !e.value.isLegal || e.value.codepen !== !1 ? t(
                 "form",
                 {
                   class: "code-demo-codepen",
@@ -185,35 +167,35 @@ const MdCodeDemo = defineComponent({
                   method: "post"
                 },
                 [
-                  h("input", {
+                  t("input", {
                     type: "hidden",
                     name: "data",
                     value: JSON.stringify({
-                      html: code.value.html,
-                      js: code.value.js,
-                      css: code.value.css,
+                      html: e.value.html,
+                      js: e.value.js,
+                      css: e.value.css,
                       // eslint-disable-next-line @typescript-eslint/naming-convention
-                      js_external: code.value.jsLib.join(";"),
+                      js_external: e.value.jsLib.join(";"),
                       // eslint-disable-next-line @typescript-eslint/naming-convention
-                      css_external: code.value.cssLib.join(";"),
-                      layout: code.value.codepenLayout,
+                      css_external: e.value.cssLib.join(";"),
+                      layout: e.value.codepenLayout,
                       // eslint-disable-next-line @typescript-eslint/naming-convention
-                      html_pre_processor: codeType.value ? codeType.value.html[1] : "none",
+                      html_pre_processor: o.value ? o.value.html[1] : "none",
                       // eslint-disable-next-line @typescript-eslint/naming-convention
-                      js_pre_processor: codeType.value ? codeType.value.js[1] : code.value.jsx ? "babel" : "none",
+                      js_pre_processor: o.value ? o.value.js[1] : e.value.jsx ? "babel" : "none",
                       // eslint-disable-next-line @typescript-eslint/naming-convention
-                      css_pre_processor: codeType.value ? codeType.value.css[1] : "none",
-                      editors: code.value.codepenEditors
+                      css_pre_processor: o.value ? o.value.css[1] : "none",
+                      editors: e.value.codepenEditors
                     })
                   }),
-                  h(
+                  t(
                     "button",
                     {
                       type: "submit",
                       "aria-label": "Codepen",
                       "data-balloon-pos": "up"
                     },
-                    h(Icon, {
+                    t(Icon, {
                       icon: "icon-codepen",
                       class: "codepen-button"
                     })
@@ -223,33 +205,33 @@ const MdCodeDemo = defineComponent({
             ]
           )
         ]),
-        h("div", {
-          ref: demoWrapper,
+        t("div", {
+          ref: m,
           class: "code-demo-container",
           style: {
-            display: isLegal.value && loaded.value ? "block" : "none"
+            display: h.value && s.value ? "block" : "none"
           }
         }),
-        h(
+        t(
           "div",
           {
             class: "code-demo-code-wrapper",
-            style: { height: height.value }
+            style: { height: d.value }
           },
-          h(
+          t(
             "div",
             {
-              ref: codeContainer,
+              ref: f,
               class: "code-demo-codes"
             },
-            slots["default"]?.()
+            y.default?.()
           )
         )
       ]),
-      [[vLoading, !loaded.value]]
+      [[C, !s.value]]
     );
   }
 });
 export {
-  MdCodeDemo as default
+  B as default
 };

package/es/components/md-code-demo/style/css.js

@@ -1 +1,2 @@
-
+import "vft/theme-style/base.css";
+import "vft/theme-style/vft-md-code-demo.css";

package/es/components/md-code-demo/style/index.js

@@ -1 +1,2 @@
-
+import "vft/theme-style/src/base.scss";
+import "vft/theme-style/src/md-code-demo.scss";

package/es/components/md-code-demo/utils.js

@@ -1,65 +1,56 @@
-import { strFromU8, unzlibSync, strToU8 } from "fflate/browser";
-const atou = (base64) => {
-  const binary = atob(base64);
-  return strFromU8(unzlibSync(strToU8(binary, true)));
-};
-const loadScript = (state, link) => {
-  if (state[link] !== void 0) return state[link];
-  const loadEvent = new Promise((resolve) => {
-    const script = document.createElement("script");
-    script.src = link;
-    document.querySelector("body")?.appendChild(script);
-    script.onload = () => {
-      resolve();
+import { strFromU8 as d, unzlibSync as s, strToU8 as i } from "fflate/browser";
+const m = (c) => {
+  const e = atob(c);
+  return d(s(i(e, !0)));
+}, l = (c, e) => {
+  if (c[e] !== void 0) return c[e];
+  const o = new Promise((n) => {
+    const t = document.createElement("script");
+    t.src = e, document.querySelector("body")?.appendChild(t), t.onload = () => {
+      n();
     };
   });
-  state[link] = loadEvent;
-  return loadEvent;
-};
-const h = (tag, attrs, children) => {
-  const node = document.createElement(tag);
-  attrs && Object.keys(attrs).forEach((key) => {
-    if (!key.indexOf("data")) {
-      const k = key.replace("data", "");
-      node.dataset[k] = attrs[key];
-    } else node[key] = attrs[key];
-  });
-  if (children)
-    children.forEach((child) => {
-      node.appendChild(child);
-    });
-  return node;
-};
-const injectCSS = (shadowRoot, code) => {
-  if (code.css && // style not injected
-  Array.from(shadowRoot.childNodes).every(
-    (element) => element.nodeName !== "STYLE"
+  return c[e] = o, o;
+}, a = (c, e, o) => {
+  const n = document.createElement(c);
+  return e && Object.keys(e).forEach((t) => {
+    if (t.indexOf("data"))
+      n[t] = e[t];
+    else {
+      const r = t.replace("data", "");
+      n.dataset[r] = e[t];
+    }
+  }), o && o.forEach((t) => {
+    n.appendChild(t);
+  }), n;
+}, u = (c, e) => {
+  if (e.css && // style not injected
+  Array.from(c.childNodes).every(
+    (o) => o.nodeName !== "STYLE"
   )) {
-    const style = h("style", { innerHTML: code.css });
-    shadowRoot.appendChild(style);
+    const o = a("style", { innerHTML: e.css });
+    c.appendChild(o);
   }
-};
-const injectScript = (id, shadowRoot, code) => {
-  const scriptText = code.getScript();
-  if (scriptText && // style not injected
-  Array.from(shadowRoot.childNodes).every(
-    (element) => element.nodeName !== "SCRIPT"
+}, f = (c, e, o) => {
+  const n = o.getScript();
+  if (n && // style not injected
+  Array.from(e.childNodes).every(
+    (t) => t.nodeName !== "SCRIPT"
   )) {
-    const script = document.createElement("script");
-    script.appendChild(
+    const t = document.createElement("script");
+    t.appendChild(
       document.createTextNode(
         // here we are fixing `document` variable back to shadowDOM
-        `{const document=window.document.querySelector('#${id} .code-demo-container').shadowRoot;
-${scriptText}}`
+        `{const document=window.document.querySelector('#${c} .code-demo-container').shadowRoot;
+${n}}`
       )
-    );
-    shadowRoot.appendChild(script);
+    ), e.appendChild(t);
   }
 };
 export {
-  atou,
-  h,
-  injectCSS,
-  injectScript,
-  loadScript
+  m as atou,
+  a as h,
+  u as injectCSS,
+  f as injectScript,
+  l as loadScript
 };

package/es/components/md-code-tabs/index.js

@@ -1,7 +1,12 @@
-import MdCodeTabs from "./md-code-tabs.js";
-import { withInstall } from "../../utils/vue/install.js";
-const VftMdCodeTabs = withInstall(MdCodeTabs);
+import "@vueuse/core";
+import "@vft/utils";
+import "../config-provider/hooks/use-global-config.js";
+import "vue";
+import { withInstall as o } from "../../utils/vue/install.js";
+import "lodash-es";
+import t from "./md-code-tabs.js";
+const e = o(t);
 export {
-  VftMdCodeTabs,
-  VftMdCodeTabs as default
+  e as VftMdCodeTabs,
+  e as default
 };