vft 0.0.375 → 0.0.376

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

@@ -2,11 +2,11 @@ import "@vueuse/core";
 import "@vft/utils";
 import "../config-provider/hooks/use-global-config.js";
 import "vue";
-import { withInstall } from "../../utils/vue/install.js";
+import { withInstall as o } from "../../utils/vue/install.js";
 import "lodash-es";
-import MdCodeDemo from "./md-code-demo.js";
-const VftMdCodeDemo = withInstall(MdCodeDemo);
+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,18 +1,17 @@
-import { VftIcon } from "../icon/index.js";
-import { vLoading } from "../loading/directive.js";
+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, ref, computed, onMounted, withDirectives, h } from "vue";
+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, 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 { 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: {
     /**
@@ -22,7 +21,7 @@ const MdCodeDemo = defineComponent({
      */
     id: {
       type: String,
-      required: true
+      required: !0
     },
     /**
      * Code demo type
@@ -58,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",
@@ -136,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",
@@ -192,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"
                     })
@@ -230,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/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

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

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

@@ -1,10 +1,9 @@
-import { useStorage } from "@vueuse/core";
-import { defineComponent, ref, onMounted, watch, h } from "vue";
-const codeTabStore = useStorage(
+import { useStorage as m } from "@vueuse/core";
+import { defineComponent as g, ref as n, onMounted as S, watch as h, h as c } from "vue";
+const v = m(
   "VUEPRESS_CODE_TAB_STORE",
   {}
-);
-const MdCodeTabs = defineComponent({
+), C = g({
   name: "VftMdCodeTabs",
   props: {
     /**
@@ -23,7 +22,7 @@ const MdCodeTabs = defineComponent({
      */
     data: {
       type: Array,
-      required: true
+      required: !0
     },
     /**
      * Code tab id
@@ -32,7 +31,7 @@ const MdCodeTabs = defineComponent({
      */
     id: {
       type: String,
-      required: true
+      required: !0
     },
     /**
      * tab id
@@ -44,105 +43,83 @@ const MdCodeTabs = defineComponent({
       default: ""
     }
   },
-  setup(props, { slots }) {
-    const activeIndex = ref(props.active);
-    const tabRefs = ref([]);
-    const updateStore = () => {
-      if (props.tabId) {
-        const { title, id: value = title } = props.data[activeIndex.value];
-        codeTabStore.value[props.tabId] = value;
+  setup(t, { slots: o }) {
+    const d = n(t.active), i = n([]), r = () => {
+      if (t.tabId) {
+        const { title: a, id: e = a } = t.data[d.value];
+        v.value[t.tabId] = e;
       }
-    };
-    const activateNext = (index = activeIndex.value) => {
-      activeIndex.value = index < tabRefs.value.length - 1 ? index + 1 : 0;
-      tabRefs.value[activeIndex.value].focus();
-    };
-    const activatePrev = (index = activeIndex.value) => {
-      activeIndex.value = index > 0 ? index - 1 : tabRefs.value.length - 1;
-      tabRefs.value[activeIndex.value].focus();
-    };
-    const keyboardHandler = (event, index) => {
-      if (event.key === " " || event.key === "Enter") {
-        event.preventDefault();
-        activeIndex.value = index;
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault();
-        activateNext();
-      } else if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        activatePrev();
+    }, f = (a = d.value) => {
+      d.value = a < i.value.length - 1 ? a + 1 : 0, i.value[d.value].focus();
+    }, b = (a = d.value) => {
+      d.value = a > 0 ? a - 1 : i.value.length - 1, i.value[d.value].focus();
+    }, s = (a, e) => {
+      if (a.key === " " || a.key === "Enter" ? (a.preventDefault(), d.value = e) : a.key === "ArrowRight" ? (a.preventDefault(), f()) : a.key === "ArrowLeft" && (a.preventDefault(), b()), t.tabId) {
+        const { title: l, id: u = l } = t.data[d.value];
+        v.value[t.tabId] = u;
       }
-      if (props.tabId) {
-        const { title, id: value = title } = props.data[activeIndex.value];
-        codeTabStore.value[props.tabId] = value;
-      }
-    };
-    const getInitialIndex = () => {
-      if (props.tabId) {
-        const valueIndex = props.data.findIndex(
-          ({ title, id: value = title }) => codeTabStore.value[props.tabId] === value
+    }, I = () => {
+      if (t.tabId) {
+        const a = t.data.findIndex(
+          ({ title: e, id: l = e }) => v.value[t.tabId] === l
         );
-        if (valueIndex !== -1) return valueIndex;
+        if (a !== -1) return a;
       }
-      return props.active;
+      return t.active;
     };
-    onMounted(() => {
-      activeIndex.value = getInitialIndex();
-      watch(
-        () => codeTabStore.value[props.tabId],
-        (newValue, oldValue) => {
-          if (props.tabId && newValue !== oldValue) {
-            const index = props.data.findIndex(
-              ({ title, id: value = title }) => value === newValue
+    return S(() => {
+      d.value = I(), h(
+        () => v.value[t.tabId],
+        (a, e) => {
+          if (t.tabId && a !== e) {
+            const l = t.data.findIndex(
+              ({ title: u, id: y = u }) => y === a
             );
-            if (index !== -1) activeIndex.value = index;
+            l !== -1 && (d.value = l);
           }
         }
       );
-    });
-    return () => props.data.length ? h("div", { class: "vft-md-code-tabs" }, [
-      h(
+    }), () => t.data.length ? c("div", { class: "vft-md-code-tabs" }, [
+      c(
         "div",
         { class: "code-tabs-nav", role: "tablist" },
-        props.data.map(({ title }, index) => {
-          const isActive = index === activeIndex.value;
-          return h(
+        t.data.map(({ title: a }, e) => {
+          const l = e === d.value;
+          return c(
             "button",
             {
-              ref: (element) => {
-                if (element)
-                  tabRefs.value[index] = element;
+              ref: (u) => {
+                u && (i.value[e] = u);
               },
-              class: ["code-tabs-nav-tab", { active: isActive }],
+              class: ["code-tabs-nav-tab", { active: l }],
               role: "tab",
-              "aria-controls": `codetab-${props.id}-${index}`,
-              "aria-selected": isActive,
+              "aria-controls": `codetab-${t.id}-${e}`,
+              "aria-selected": l,
               onClick: () => {
-                activeIndex.value = index;
-                updateStore();
+                d.value = e, r();
               },
-              onKeydown: (event) => keyboardHandler(event, index)
+              onKeydown: (u) => s(u, e)
             },
-            title
+            a
           );
         })
       ),
-      props.data.map(({ title, id: value = title }, index) => {
-        const isActive = index === activeIndex.value;
-        return h(
+      t.data.map(({ title: a, id: e = a }, l) => {
+        const u = l === d.value;
+        return c(
           "div",
           {
-            class: ["code-tab", { active: isActive }],
-            id: `codetab-${props.id}-${index}`,
+            class: ["code-tab", { active: u }],
+            id: `codetab-${t.id}-${l}`,
             role: "tabpanel",
-            "aria-expanded": isActive
+            "aria-expanded": u
           },
-          slots[`tab${index}`]?.({ title, value, isActive })
+          o[`tab${l}`]?.({ title: a, value: e, isActive: u })
         );
       })
     ]) : null;
   }
 });
 export {
-  MdCodeTabs as default
+  C as default
 };