vft 0.0.374 → 0.0.375

package/lib/components/logo/logo.vue2.cjs

@@ -1 +1,56 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("@vft/router");require("@vueuse/core");require("@vft/utils");require("../config-provider/hooks/use-global-config.cjs");require("lodash-es");const c=require("../../hooks/use-namespace/index.cjs");require("../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../hooks/use-z-index/index.cjs");const m=["src"],g=e.defineComponent({name:"vft-logo"}),d=e.defineComponent({...g,props:{title:{},logo:{},jumpPath:{}},setup(o){const t=c.useNamespace("logo"),n=e.computed(()=>[t.b()]),s=e.getCurrentInstance().appContext.config.globalProperties.$router,{go:l}=a.useRouterHelper(s);function i(){o.jumpPath&&l(o.jumpPath)}const u=e.computed(()=>o.jumpPath?{}:t.cssVarBlock({cursor:"inital"}));return(r,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(n.value),onClick:i,style:e.normalizeStyle(u.value)},[e.createElementVNode("img",{class:e.normalizeClass(e.unref(t).e("img")),src:r.logo,alt:""},null,10,m),e.createElementVNode("div",{class:e.normalizeClass(e.unref(t).e("title"))},e.toDisplayString(r.title),3)],6))}});exports.default=d;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const router = require("@vft/router");
+require("@vueuse/core");
+require("@vft/utils");
+require("../config-provider/hooks/use-global-config.cjs");
+require("lodash-es");
+const index = require("../../hooks/use-namespace/index.cjs");
+require("../../hooks/use-model-toggle/index.cjs");
+require("@popperjs/core");
+require("../../hooks/use-z-index/index.cjs");
+const _hoisted_1 = ["src"];
+const __default__ = vue.defineComponent({
+  name: "vft-logo"
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: {
+    title: {},
+    logo: {},
+    jumpPath: {}
+  },
+  setup(__props) {
+    const ns = index.useNamespace("logo");
+    const getLogoClass = vue.computed(() => [ns.b()]);
+    const instance = vue.getCurrentInstance();
+    const _router = instance.appContext.config.globalProperties.$router;
+    const { go } = router.useRouterHelper(_router);
+    function onClickLogo() {
+      if (__props.jumpPath) {
+        go(__props.jumpPath);
+      }
+    }
+    const logoVars = vue.computed(
+      () => __props.jumpPath ? {} : ns.cssVarBlock({ cursor: "inital" })
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(getLogoClass.value),
+        onClick: onClickLogo,
+        style: vue.normalizeStyle(logoVars.value)
+      }, [
+        vue.createElementVNode("img", {
+          class: vue.normalizeClass(vue.unref(ns).e("img")),
+          src: _ctx.logo,
+          alt: ""
+        }, null, 10, _hoisted_1),
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(vue.unref(ns).e("title"))
+        }, vue.toDisplayString(_ctx.title), 3)
+      ], 6);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/logo/style/css.cjs

@@ -1 +1,3 @@
-"use strict";require("vft/theme-style/base.css");require("vft/theme-style/vft-logo.css");
+"use strict";
+require("vft/theme-style/base.css");
+require("vft/theme-style/vft-logo.css");

package/lib/components/logo/style/index.cjs

@@ -1 +1,3 @@
-"use strict";require("vft/theme-style/src/base.scss");require("vft/theme-style/src/logo.scss");
+"use strict";
+require("vft/theme-style/src/base.scss");
+require("vft/theme-style/src/logo.scss");

package/lib/components/main/style/css.cjs

@@ -1 +1,3 @@
-"use strict";require("vft/theme-style/base.css");require("vft/theme-style/vft-main.css");
+"use strict";
+require("vft/theme-style/base.css");
+require("vft/theme-style/vft-main.css");

package/lib/components/main/style/index.cjs

@@ -1 +1,3 @@
-"use strict";require("vft/theme-style/src/base.scss");require("vft/theme-style/src/main.scss");
+"use strict";
+require("vft/theme-style/src/base.scss");
+require("vft/theme-style/src/main.scss");

package/lib/components/md-code-demo/code-demo/code.cjs

@@ -1,4 +1,112 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./utils.cjs"),C=e=>{const o=Object.keys(e),t={html:[],js:[],css:[],isLegal:!1};return["html","js","css"].forEach(s=>{const r=o.filter(n=>c.preProcessorConfig[s].types.includes(n));if(r.length){const n=r[0];t[s]=[e[n].replace(/^\n|\n$/g,""),c.preProcessorConfig[s].map[n]||n]}}),t.isLegal=(!t.html.length||t.html[1]==="none")&&(!t.js.length||t.js[1]==="none")&&(!t.css.length||t.css[1]==="none"),t},g=e=>e.replace(/<br \/>/g,"<br>").replace(/<((\S+)[^<]*?)\s+\/>/g,"<$1></$2>"),m=e=>`<div id="app">
-${g(e)}
-</div>`,$=e=>`${e.replace("export default ","const $reactApp = ").replace(/App\.__style__(\s*)=(\s*)`([\s\S]*)?`/,"")};
-ReactDOM.createRoot(document.getElementById("app")).render(React.createElement($reactApp))`,w=e=>e.replace(/export\s+default\s*\{([\s\S]*)\n*\}\s*;?$/u,"Vue.createApp({$1}).mount('#app')").replace(/export\s+default\s*define(Async)?Component\s*\(\s*\{([\s\S]*)\n*\}\s*\)\s*;?$/u,"Vue.createApp({$1}).mount('#app')").trim(),p=e=>`(function(exports){var module={};module.exports=exports;${e};return module.exports.__esModule?module.exports.default:module.exports;})({})`,S=(e,o)=>{const t=c.getConfig(o),s=e.js[0]||"";return{...t,html:g(e.html[0]||""),js:s,css:e.css[0]||"",isLegal:e.isLegal,getScript:()=>t.useBabel?window.Babel.transform(s,{presets:["es2015"]})?.code||"":s}},b=(e,o)=>{const t=c.getConfig(o),s=e.html[0]||"",r=/<template>([\s\S]+)<\/template>/u.exec(s),n=/<script(\s*lang=(['"])(.*?)\2)?>([\s\S]+)<\/script>/u.exec(s),a=/<style(\s*lang=(['"])(.*?)\2)?\s*(?:scoped)?>([\s\S]+)<\/style>/u.exec(s),i=r?r[1].replace(/^\n|\n$/g,""):"",[l="",d=""]=n?[n[4].replace(/^\n|\n$/g,""),n[3]]:[],[f="",u=""]=a?[a[4].replace(/^\n|\n$/g,""),a[3]]:[],j=d===""&&(u===""||u==="css");return{...t,html:m(i),js:w(l),css:f,isLegal:j,jsLib:[t.vue,...t.jsLib],getScript:()=>{const h=o.useBabel?window.Babel?.transform(l,{presets:["es2015"]})?.code||"":l.replace(/export\s+default/u,"return");return`const app=window.document.createElement('div');document.firstElementChild.appendChild(app);const appOptions=${p(h)};appOptions.template=\`${i.replace("`",'\\`"')}\`;window.Vue.createApp(appOptions).mount(app);`}}},x=(e,o)=>{const t=c.getConfig(o);return{...t,html:m(""),js:$(e.js[0]||""),css:e.css[0]||(e.js[0]?e.js[0].replace(/App\.__style__\s*=\s*`([\s\S]*)?`/,"$1").trim():""),isLegal:e.isLegal,jsLib:[t.react,t.reactDOM,...t.jsLib],jsx:!0,getScript:()=>{const s=window.Babel?.transform(e.js[0]||"",{presets:["es2015","react"]})?.code||"";return`window.ReactDOM.createRoot(document.firstElementChild).render(window.React.createElement(${p(s)}))`}}};exports.getCode=C;exports.getNormalCode=S;exports.getReactCode=x;exports.getVueCode=b;exports.wrapper=p;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils = require("./utils.cjs");
+const getCode = (code) => {
+  const languages = Object.keys(code);
+  const result = {
+    html: [],
+    js: [],
+    css: [],
+    isLegal: false
+  };
+  ["html", "js", "css"].forEach((type) => {
+    const match = languages.filter(
+      (language) => utils.preProcessorConfig[type].types.includes(language)
+    );
+    if (match.length) {
+      const language = match[0];
+      result[type] = [
+        code[language].replace(/^\n|\n$/g, ""),
+        utils.preProcessorConfig[type].map[language] || language
+      ];
+    }
+  });
+  result.isLegal = (!result.html.length || result.html[1] === "none") && (!result.js.length || result.js[1] === "none") && (!result.css.length || result.css[1] === "none");
+  return result;
+};
+const handleHTML = (html) => html.replace(/<br \/>/g, "<br>").replace(/<((\S+)[^<]*?)\s+\/>/g, "<$1></$2>");
+const getHtmlTemplate = (html) => `<div id="app">
+${handleHTML(html)}
+</div>`;
+const getReactTemplate = (code) => `${code.replace("export default ", "const $reactApp = ").replace(
+  /App\.__style__(\s*)=(\s*)`([\s\S]*)?`/,
+  ""
+)};
+ReactDOM.createRoot(document.getElementById("app")).render(React.createElement($reactApp))`;
+const getVueJsTemplate = (js) => js.replace(
+  /export\s+default\s*\{([\s\S]*)\n*\}\s*;?$/u,
+  "Vue.createApp({$1}).mount('#app')"
+).replace(
+  /export\s+default\s*define(Async)?Component\s*\(\s*\{([\s\S]*)\n*\}\s*\)\s*;?$/u,
+  "Vue.createApp({$1}).mount('#app')"
+).trim();
+const wrapper = (scriptStr) => `(function(exports){var module={};module.exports=exports;${scriptStr};return module.exports.__esModule?module.exports.default:module.exports;})({})`;
+const getNormalCode = (code, config) => {
+  const codeConfig = utils.getConfig(config);
+  const js = code.js[0] || "";
+  return {
+    ...codeConfig,
+    html: handleHTML(code.html[0] || ""),
+    js,
+    css: code.css[0] || "",
+    isLegal: code.isLegal,
+    getScript: () => codeConfig.useBabel ? window.Babel.transform(js, { presets: ["es2015"] })?.code || "" : js
+  };
+};
+const getVueCode = (code, config) => {
+  const codeConfig = utils.getConfig(config);
+  const vueTemplate = code.html[0] || "";
+  const htmlBlock = /<template>([\s\S]+)<\/template>/u.exec(vueTemplate);
+  const jsBlock = /<script(\s*lang=(['"])(.*?)\2)?>([\s\S]+)<\/script>/u.exec(
+    vueTemplate
+  );
+  const cssBlock = /<style(\s*lang=(['"])(.*?)\2)?\s*(?:scoped)?>([\s\S]+)<\/style>/u.exec(
+    vueTemplate
+  );
+  const html = htmlBlock ? htmlBlock[1].replace(/^\n|\n$/g, "") : "";
+  const [js = "", jsLang = ""] = jsBlock ? [jsBlock[4].replace(/^\n|\n$/g, ""), jsBlock[3]] : [];
+  const [css = "", cssLang = ""] = cssBlock ? [cssBlock[4].replace(/^\n|\n$/g, ""), cssBlock[3]] : [];
+  const isLegal = jsLang === "" && (cssLang === "" || cssLang === "css");
+  return {
+    ...codeConfig,
+    html: getHtmlTemplate(html),
+    js: getVueJsTemplate(js),
+    css,
+    isLegal,
+    jsLib: [codeConfig.vue, ...codeConfig.jsLib],
+    getScript: () => {
+      const scriptStr = config.useBabel ? window.Babel?.transform(js, { presets: ["es2015"] })?.code || "" : js.replace(/export\s+default/u, "return");
+      return `const app=window.document.createElement('div');document.firstElementChild.appendChild(app);const appOptions=${wrapper(
+        scriptStr
+      )};appOptions.template=\`${html.replace(
+        "`",
+        '\\`"'
+      )}\`;window.Vue.createApp(appOptions).mount(app);`;
+    }
+  };
+};
+const getReactCode = (code, config) => {
+  const codeConfig = utils.getConfig(config);
+  return {
+    ...codeConfig,
+    html: getHtmlTemplate(""),
+    js: getReactTemplate(code.js[0] || ""),
+    css: code.css[0] || (code.js[0] ? code.js[0].replace(/App\.__style__\s*=\s*`([\s\S]*)?`/, "$1").trim() : ""),
+    isLegal: code.isLegal,
+    jsLib: [codeConfig.react, codeConfig.reactDOM, ...codeConfig.jsLib],
+    jsx: true,
+    getScript: () => {
+      const scriptStr = window.Babel?.transform(code.js[0] || "", {
+        presets: ["es2015", "react"]
+      })?.code || "";
+      return `window.ReactDOM.createRoot(document.firstElementChild).render(window.React.createElement(${wrapper(
+        scriptStr
+      )}))`;
+    }
+  };
+};
+exports.getCode = getCode;
+exports.getNormalCode = getNormalCode;
+exports.getReactCode = getReactCode;
+exports.getVueCode = getVueCode;
+exports.wrapper = wrapper;

package/lib/components/md-code-demo/code-demo/index.cjs

@@ -1 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./utils.cjs");exports.getConfig=t.getConfig;exports.h=t.h;exports.injectCSS=t.injectCSS;exports.injectScript=t.injectScript;exports.loadScript=t.loadScript;exports.options=t.options;exports.preProcessorConfig=t.preProcessorConfig;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils = require("./utils.cjs");
+exports.getConfig = utils.getConfig;
+exports.h = utils.h;
+exports.injectCSS = utils.injectCSS;
+exports.injectScript = utils.injectScript;
+exports.loadScript = utils.loadScript;
+exports.options = utils.options;
+exports.preProcessorConfig = utils.preProcessorConfig;

package/lib/components/md-code-demo/code-demo/loadScript.cjs

@@ -1 +1,18 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./utils.cjs"),e={},o=a=>Promise.all([l.loadScript(e,a.babel),l.loadScript(e,a.react),l.loadScript(e,a.reactDOM)]),r=a=>{const t=[l.loadScript(e,a.vue)];return a.useBabel&&t.push(l.loadScript(e,a.babel)),Promise.all(t)},s=a=>a.useBabel?l.loadScript(e,a.babel):Promise.resolve();exports.loadNormal=s;exports.loadReact=o;exports.loadVue=r;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils = require("./utils.cjs");
+const state = {};
+const loadReact = (code) => Promise.all([
+  utils.loadScript(state, code.babel),
+  utils.loadScript(state, code.react),
+  utils.loadScript(state, code.reactDOM)
+]);
+const loadVue = (code) => {
+  const promises = [utils.loadScript(state, code.vue)];
+  if (code.useBabel) promises.push(utils.loadScript(state, code.babel));
+  return Promise.all(promises);
+};
+const loadNormal = (code) => code.useBabel ? utils.loadScript(state, code.babel) : Promise.resolve();
+exports.loadNormal = loadNormal;
+exports.loadReact = loadReact;
+exports.loadVue = loadVue;

package/lib/components/md-code-demo/code-demo/utils.cjs

@@ -1,2 +1,120 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p={useBabel:!1,jsLib:[],cssLib:[],codepenLayout:"left",codepenEditors:"101",babel:"https://unpkg.com/@babel/standalone/babel.min.js",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"},n=p,d={html:{types:["html","slim","haml","md","markdown","vue"],map:{html:"none",vue:"none",md:"markdown"}},js:{types:["js","javascript","coffee","coffeescript","ts","typescript","ls","livescript"],map:{js:"none",javascript:"none",coffee:"coffeescript",ls:"livescript",ts:"typescript"}},css:{types:["css","less","sass","scss","stylus","styl"],map:{css:"none",styl:"stylus"}}},r=(s,t,c)=>{const o=document.createElement(s);return t&&Object.keys(t).forEach(e=>{if(e.indexOf("data"))o[e]=t[e];else{const i=e.replace("data","");o.dataset[i]=t[e]}}),c&&c.forEach(e=>{o.appendChild(e)}),o},a=s=>({...n,...s,jsLib:Array.from(new Set([...n.jsLib||[],...s.jsLib||[]])),cssLib:Array.from(new Set([...n.cssLib||[],...s.cssLib||[]]))}),l=(s,t)=>{if(s[t]!==void 0)return s[t];const c=new Promise(o=>{const e=document.createElement("script");e.src=t,document.querySelector("body")?.appendChild(e),e.onload=()=>{o()}});return s[t]=c,c},m=(s,t)=>{if(t.css&&Array.from(s.childNodes).every(c=>c.nodeName!=="STYLE")){const c=r("style",{innerHTML:t.css});s.appendChild(c)}},u=(s,t,c)=>{const o=c.getScript();if(o&&Array.from(t.childNodes).every(e=>e.nodeName!=="SCRIPT")){const e=document.createElement("script");e.appendChild(document.createTextNode(`{const document=window.document.querySelector('#${s} .code-demo-container').shadowRoot;
-${o}}`)),t.appendChild(e)}};exports.getConfig=a;exports.h=r;exports.injectCSS=m;exports.injectScript=u;exports.loadScript=l;exports.options=n;exports.preProcessorConfig=d;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const CODE_DEMO_OPTIONS = {
+  useBabel: false,
+  jsLib: [],
+  cssLib: [],
+  codepenLayout: "left",
+  codepenEditors: "101",
+  babel: "https://unpkg.com/@babel/standalone/babel.min.js",
+  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 = {
+  html: {
+    types: ["html", "slim", "haml", "md", "markdown", "vue"],
+    map: {
+      html: "none",
+      vue: "none",
+      md: "markdown"
+    }
+  },
+  js: {
+    types: [
+      "js",
+      "javascript",
+      "coffee",
+      "coffeescript",
+      "ts",
+      "typescript",
+      "ls",
+      "livescript"
+    ],
+    map: {
+      js: "none",
+      javascript: "none",
+      coffee: "coffeescript",
+      ls: "livescript",
+      ts: "typescript"
+    }
+  },
+  css: {
+    types: ["css", "less", "sass", "scss", "stylus", "styl"],
+    map: {
+      css: "none",
+      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,
+  jsLib: Array.from(
+    /* @__PURE__ */ new Set([...options.jsLib || [], ...config.jsLib || []])
+  ),
+  cssLib: Array.from(
+    /* @__PURE__ */ new Set([...options.cssLib || [], ...config.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();
+    };
+  });
+  state[link] = loadEvent;
+  return loadEvent;
+};
+const injectCSS = (shadowRoot, code) => {
+  if (code.css && // style not injected
+  Array.from(shadowRoot.childNodes).every(
+    (element) => element.nodeName !== "STYLE"
+  )) {
+    const style = h("style", { innerHTML: code.css });
+    shadowRoot.appendChild(style);
+  }
+};
+const injectScript = (id, shadowRoot, code) => {
+  const scriptText = code.getScript();
+  if (scriptText && // style not injected
+  Array.from(shadowRoot.childNodes).every(
+    (element) => element.nodeName !== "SCRIPT"
+  )) {
+    const script = document.createElement("script");
+    script.appendChild(
+      document.createTextNode(
+        // here we are fixing `document` variable back to shadowDOM
+        `{const document=window.document.querySelector('#${id} .code-demo-container').shadowRoot;
+${scriptText}}`
+      )
+    );
+    shadowRoot.appendChild(script);
+  }
+};
+exports.getConfig = getConfig;
+exports.h = h;
+exports.injectCSS = injectCSS;
+exports.injectScript = injectScript;
+exports.loadScript = loadScript;
+exports.options = options;
+exports.preProcessorConfig = preProcessorConfig;

package/lib/components/md-code-demo/index.cjs

@@ -1 +1,12 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("@vueuse/core");require("@vft/utils");require("../config-provider/hooks/use-global-config.cjs");require("vue");const r=require("../../utils/vue/install.cjs");require("lodash-es");const t=require("./md-code-demo.cjs"),e=r.withInstall(t.default);exports.VftMdCodeDemo=e;exports.default=e;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+require("@vueuse/core");
+require("@vft/utils");
+require("../config-provider/hooks/use-global-config.cjs");
+require("vue");
+const install = require("../../utils/vue/install.cjs");
+require("lodash-es");
+const mdCodeDemo = require("./md-code-demo.cjs");
+const VftMdCodeDemo = install.withInstall(mdCodeDemo.default);
+exports.VftMdCodeDemo = VftMdCodeDemo;
+exports.default = VftMdCodeDemo;

package/lib/components/md-code-demo/md-code-demo.cjs

@@ -1 +1,262 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const j=require("../icon/index.cjs"),S=require("../loading/directive.cjs");require("@vft/utils");require("@vueuse/core");require("../config-provider/hooks/use-global-config.cjs");const e=require("vue");require("lodash-es");require("../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../hooks/use-z-index/index.cjs");const u=require("./code-demo/code.cjs"),h=require("./code-demo/loadScript.cjs"),d=require("./utils.cjs"),q=800,C=e.defineComponent({name:"VftMdCodeDemo",props:{id:{type:String,required:!0},type:{type:String,default:"normal"},title:{type:String,default:""},config:{type:String,default:""},code:{type:String,required:!0}},setup(a,{slots:y}){const o=e.ref(!1),m=e.ref(),f=e.ref(),n=e.ref("0"),i=e.ref(!1),s=e.computed(()=>JSON.parse(a.config?d.atou(a.config):"{}")),l=e.computed(()=>{const r=JSON.parse(d.atou(a.code));return u.getCode(r)}),t=e.computed(()=>a.type==="react"?u.getReactCode(l.value,s.value):a.type==="vue"?u.getVueCode(l.value,s.value):u.getNormalCode(l.value,s.value)),g=e.computed(()=>t.value.isLegal),c=(r=!1)=>{const v=m.value.attachShadow({mode:"open"}),p=document.createElement("div");p.classList.add("code-demo-app"),v.appendChild(p),g.value?(r&&(p.innerHTML=t.value.html),d.injectCSS(v,t.value),d.injectScript(a.id,v,t.value),n.value="0"):n.value="auto",i.value=!0},b=()=>{switch(a.type){case"react":return h.loadReact(t.value).then(()=>c());case"vue":return h.loadVue(t.value).then(()=>c());default:return h.loadNormal(t.value).then(()=>c(!0))}};return e.onMounted(()=>{setTimeout(()=>{b()},q)}),()=>e.withDirectives(e.h("div",{class:"vft-md-code-demo",id:a.id},[e.h("div",{class:"code-demo-header"},[t.value.isLegal?e.h("button",{class:["toggle-button",o.value?"down":"right"],onClick:()=>{n.value=o.value?"0":`${f.value.clientHeight+13.8}px`,o.value=!o.value}}):null,a.title?e.h("span",{class:"title"},decodeURIComponent(a.title)):null,e.h("div",{style:{display:"flex"}},[t.value.isLegal&&t.value.jsfiddle!==!1?e.h("form",{class:"code-demo-jsfiddle",target:"_blank",action:"https://jsfiddle.net/api/post/library/pure/",method:"post"},[e.h("input",{type:"hidden",name:"html",value:t.value.html}),e.h("input",{type:"hidden",name:"js",value:t.value.js}),e.h("input",{type:"hidden",name:"css",value:t.value.css}),e.h("input",{type:"hidden",name:"wrap",value:"1"}),e.h("input",{type:"hidden",name:"panel_js",value:"3"}),e.h("input",{type:"hidden",name:"resources",value:[...t.value.cssLib,...t.value.jsLib].join(",")}),e.h("button",{type:"submit","aria-label":"JSFiddle","data-balloon-pos":"up"},e.h(j.VftIcon,{icon:"icon-jsfiddle",class:"jsfiddle-button"}))]):null,!t.value.isLegal||t.value.codepen!==!1?e.h("form",{class:"code-demo-codepen",target:"_blank",action:"https://codepen.io/pen/define",method:"post"},[e.h("input",{type:"hidden",name:"data",value:JSON.stringify({html:t.value.html,js:t.value.js,css:t.value.css,js_external:t.value.jsLib.join(";"),css_external:t.value.cssLib.join(";"),layout:t.value.codepenLayout,html_pre_processor:l.value?l.value.html[1]:"none",js_pre_processor:l.value?l.value.js[1]:t.value.jsx?"babel":"none",css_pre_processor:l.value?l.value.css[1]:"none",editors:t.value.codepenEditors})}),e.h("button",{type:"submit","aria-label":"Codepen","data-balloon-pos":"up"},e.h(Icon,{icon:"icon-codepen",class:"codepen-button"}))]):null])]),e.h("div",{ref:m,class:"code-demo-container",style:{display:g.value&&i.value?"block":"none"}}),e.h("div",{class:"code-demo-code-wrapper",style:{height:n.value}},e.h("div",{ref:f,class:"code-demo-codes"},y.default?.()))]),[[S.vLoading,!i.value]])}});exports.default=C;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const index = require("../icon/index.cjs");
+const directive = require("../loading/directive.cjs");
+require("@vft/utils");
+require("@vueuse/core");
+require("../config-provider/hooks/use-global-config.cjs");
+const vue = require("vue");
+require("lodash-es");
+require("../../hooks/use-model-toggle/index.cjs");
+require("@popperjs/core");
+require("../../hooks/use-z-index/index.cjs");
+const code = require("./code-demo/code.cjs");
+const loadScript = require("./code-demo/loadScript.cjs");
+const utils = require("./utils.cjs");
+const MARKDOWN_ENHANCE_DELAY = 800;
+const MdCodeDemo = vue.defineComponent({
+  name: "VftMdCodeDemo",
+  props: {
+    /**
+     * Code demo id
+     *
+     * 代码演示 id
+     */
+    id: {
+      type: String,
+      required: true
+    },
+    /**
+     * Code demo type
+     *
+     * 代码演示类型
+     */
+    type: {
+      type: String,
+      default: "normal"
+    },
+    /**
+     * Code demo title
+     *
+     * 代码演示标题
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Code demo config
+     *
+     * 代码演示配置
+     */
+    config: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Code demo code content
+     *
+     * 代码演示代码内容
+     */
+    code: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props, { slots }) {
+    const isExpanded = vue.ref(false);
+    const demoWrapper = vue.ref();
+    const codeContainer = vue.ref();
+    const height = vue.ref("0");
+    const loaded = vue.ref(false);
+    const config = vue.computed(
+      () => JSON.parse(props.config ? utils.atou(props.config) : "{}")
+    );
+    const codeType = vue.computed(() => {
+      const codeConfig = JSON.parse(utils.atou(props.code));
+      return code.getCode(codeConfig);
+    });
+    const code$1 = vue.computed(
+      () => props.type === "react" ? code.getReactCode(codeType.value, config.value) : props.type === "vue" ? code.getVueCode(codeType.value, config.value) : code.getNormalCode(codeType.value, config.value)
+    );
+    const isLegal = vue.computed(() => code$1.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$1.value.html;
+        utils.injectCSS(shadowRoot, code$1.value);
+        utils.injectScript(props.id, shadowRoot, code$1.value);
+        height.value = "0";
+      } else height.value = "auto";
+      loaded.value = true;
+    };
+    const loadDemo = () => {
+      switch (props.type) {
+        case "react": {
+          return loadScript.loadReact(code$1.value).then(() => initDom());
+        }
+        case "vue": {
+          return loadScript.loadVue(code$1.value).then(() => initDom());
+        }
+        default: {
+          return loadScript.loadNormal(code$1.value).then(() => initDom(true));
+        }
+      }
+    };
+    vue.onMounted(() => {
+      setTimeout(() => {
+        void loadDemo();
+      }, MARKDOWN_ENHANCE_DELAY);
+    });
+    return () => vue.withDirectives(
+      vue.h("div", { class: "vft-md-code-demo", id: props.id }, [
+        // loaded.value ? null : h(Icon, { class: 'loading', icon: 'icon-icomoon-free:spinner2' }),
+        vue.h("div", { class: "code-demo-header" }, [
+          code$1.value.isLegal ? vue.h("button", {
+            class: ["toggle-button", isExpanded.value ? "down" : "right"],
+            onClick: () => {
+              height.value = isExpanded.value ? "0" : `${codeContainer.value.clientHeight + 13.8}px`;
+              isExpanded.value = !isExpanded.value;
+            }
+          }) : null,
+          props.title ? vue.h("span", { class: "title" }, decodeURIComponent(props.title)) : null,
+          vue.h(
+            "div",
+            {
+              style: { display: "flex" }
+            },
+            [
+              code$1.value.isLegal && code$1.value.jsfiddle !== false ? vue.h(
+                "form",
+                {
+                  class: "code-demo-jsfiddle",
+                  target: "_blank",
+                  action: "https://jsfiddle.net/api/post/library/pure/",
+                  method: "post"
+                },
+                [
+                  vue.h("input", {
+                    type: "hidden",
+                    name: "html",
+                    value: code$1.value.html
+                  }),
+                  vue.h("input", {
+                    type: "hidden",
+                    name: "js",
+                    value: code$1.value.js
+                  }),
+                  vue.h("input", {
+                    type: "hidden",
+                    name: "css",
+                    value: code$1.value.css
+                  }),
+                  vue.h("input", {
+                    type: "hidden",
+                    name: "wrap",
+                    value: "1"
+                  }),
+                  vue.h("input", {
+                    type: "hidden",
+                    name: "panel_js",
+                    value: "3"
+                  }),
+                  vue.h("input", {
+                    type: "hidden",
+                    name: "resources",
+                    value: [
+                      ...code$1.value.cssLib,
+                      ...code$1.value.jsLib
+                    ].join(",")
+                  }),
+                  vue.h(
+                    "button",
+                    {
+                      type: "submit",
+                      "aria-label": "JSFiddle",
+                      "data-balloon-pos": "up"
+                    },
+                    vue.h(index.VftIcon, {
+                      icon: "icon-jsfiddle",
+                      class: "jsfiddle-button"
+                    })
+                  )
+                ]
+              ) : null,
+              !code$1.value.isLegal || code$1.value.codepen !== false ? vue.h(
+                "form",
+                {
+                  class: "code-demo-codepen",
+                  target: "_blank",
+                  action: "https://codepen.io/pen/define",
+                  method: "post"
+                },
+                [
+                  vue.h("input", {
+                    type: "hidden",
+                    name: "data",
+                    value: JSON.stringify({
+                      html: code$1.value.html,
+                      js: code$1.value.js,
+                      css: code$1.value.css,
+                      // eslint-disable-next-line @typescript-eslint/naming-convention
+                      js_external: code$1.value.jsLib.join(";"),
+                      // eslint-disable-next-line @typescript-eslint/naming-convention
+                      css_external: code$1.value.cssLib.join(";"),
+                      layout: code$1.value.codepenLayout,
+                      // eslint-disable-next-line @typescript-eslint/naming-convention
+                      html_pre_processor: codeType.value ? codeType.value.html[1] : "none",
+                      // eslint-disable-next-line @typescript-eslint/naming-convention
+                      js_pre_processor: codeType.value ? codeType.value.js[1] : code$1.value.jsx ? "babel" : "none",
+                      // eslint-disable-next-line @typescript-eslint/naming-convention
+                      css_pre_processor: codeType.value ? codeType.value.css[1] : "none",
+                      editors: code$1.value.codepenEditors
+                    })
+                  }),
+                  vue.h(
+                    "button",
+                    {
+                      type: "submit",
+                      "aria-label": "Codepen",
+                      "data-balloon-pos": "up"
+                    },
+                    vue.h(Icon, {
+                      icon: "icon-codepen",
+                      class: "codepen-button"
+                    })
+                  )
+                ]
+              ) : null
+            ]
+          )
+        ]),
+        vue.h("div", {
+          ref: demoWrapper,
+          class: "code-demo-container",
+          style: {
+            display: isLegal.value && loaded.value ? "block" : "none"
+          }
+        }),
+        vue.h(
+          "div",
+          {
+            class: "code-demo-code-wrapper",
+            style: { height: height.value }
+          },
+          vue.h(
+            "div",
+            {
+              ref: codeContainer,
+              class: "code-demo-codes"
+            },
+            slots["default"]?.()
+          )
+        )
+      ]),
+      [[directive.vLoading, !loaded.value]]
+    );
+  }
+});
+exports.default = MdCodeDemo;

package/lib/components/md-code-demo/style/css.cjs

@@ -1 +1,3 @@
-"use strict";require("vft/theme-style/base.css");require("vft/theme-style/vft-md-code-demo.css");
+"use strict";
+require("vft/theme-style/base.css");
+require("vft/theme-style/vft-md-code-demo.css");

package/lib/components/md-code-demo/style/index.cjs

@@ -1 +1,3 @@
-"use strict";require("vft/theme-style/src/base.scss");require("vft/theme-style/src/md-code-demo.scss");
+"use strict";
+require("vft/theme-style/src/base.scss");
+require("vft/theme-style/src/md-code-demo.scss");