"use strict";(self.webpackChunknocobase=self.webpackChunknocobase||[]).push([[8408,95],{10095:function(s,n,e){e.r(n),e.d(n,{JSBlockRunJSContext:function(){return a}});var t=e(72004),r=e.n(t),l=e(12444),u=e.n(l),_=e(31996),c=e.n(_),i=e(26037),d=e.n(i),m=e(67946),a=function(p){c()(o,p);var b=d()(o);function o(){return u()(this,o),b.apply(this,arguments)}return r()(o)}(m.Uo);a.define({label:"RunJS context",properties:{element:{description:`ElementProxy instance providing a safe DOM container.
      Supports innerHTML, append, and other DOM manipulation methods.
      Use this to render content in the JS block.`,detail:"ElementProxy",properties:{innerHTML:"Set or read the HTML content of the container element."}},record:`Current record data object (read-only).
      Available when the JS block is within a data block or detail view context.`,value:"Current value of the field or component, if available in the current context.",React:"React library",antd:"Ant Design library"},methods:{onRefReady:`Wait for container DOM element to be ready before executing callback.
      Parameters: (ref: React.RefObject, callback: (element: HTMLElement) => void, timeout?: number) => void
      Example: ctx.onRefReady(ctx.ref, (el) => { el.innerHTML = "Ready!" })`,requireAsync:"Load external library: `const lib = await ctx.requireAsync(url)`",importAsync:"Dynamically import an ESM module by URL: `const mod = await ctx.importAsync(url)`.\nNote: if the module has only a default export, ctx.importAsync returns that default value directly (no `.default`)."}}),a.define({label:"RunJS \u4E0A\u4E0B\u6587",properties:{element:{description:"ElementProxy\uFF0C\u5B89\u5168\u7684 DOM \u5BB9\u5668\uFF0C\u652F\u6301 innerHTML/append \u7B49",detail:"ElementProxy",properties:{innerHTML:"\u8BFB\u53D6\u6216\u8BBE\u7F6E\u5BB9\u5668\u7684 HTML \u5185\u5BB9"}},record:"\u5F53\u524D\u8BB0\u5F55\uFF08\u53EA\u8BFB\uFF0C\u7528\u4E8E\u6570\u636E\u533A\u5757/\u8BE6\u60C5\u7B49\u573A\u666F\uFF09",value:"\u5F53\u524D\u503C\uFF08\u82E5\u5B58\u5728\uFF09",React:"React \u5E93",antd:"Ant Design \u5E93"},methods:{onRefReady:"\u5BB9\u5668 ref \u5C31\u7EEA\u56DE\u8C03\uFF1A\n```js\nctx.onRefReady(ctx.ref, el => { /* ... */ })\n```",requireAsync:"\u52A0\u8F7D\u5916\u90E8\u5E93\uFF1A`const lib = await ctx.requireAsync(url)`",importAsync:"\u6309 URL \u52A8\u6001\u5BFC\u5165 ESM \u6A21\u5757\uFF1A`const mod = await ctx.importAsync(url)`\u3002\n\u6CE8\u610F\uFF1A\u5F53\u6A21\u5757\u53EA\u6709 default \u4E00\u4E2A\u5BFC\u51FA\u65F6\uFF0Cctx.importAsync \u4F1A\u76F4\u63A5\u8FD4\u56DE default \u503C\uFF08\u65E0\u9700\u518D\u5199 `.default`\uFF09\u3002"}},{locale:"zh-CN"})},98408:function(s,n,e){e.r(n);var t=e(10095),r={contexts:[t.JSBlockRunJSContext],prefix:"sn-jsb-vue",label:"Embed Vue component",description:"Use ctx.importAsync to load Vue 3 ESM build and render a reactive widget",locales:{"zh-CN":{label:"\u5D4C\u5165 Vue \u7EC4\u4EF6",description:"\u901A\u8FC7 ctx.importAsync \u52A0\u8F7D Vue 3 ESM \u6784\u5EFA\u5E76\u6E32\u67D3\u4EA4\u4E92\u7EC4\u4EF6"}},content:`
const mountNode = document.createElement('div');
mountNode.style.padding = '16px';
mountNode.style.background = '#fff';
mountNode.style.borderRadius = '8px';
const target = document.createElement('div');
target.className = 'nb-vue-counter';
mountNode.appendChild(target);
ctx.render(mountNode);

async function bootstrap() {
  const mod = await ctx.importAsync('vue@3.4.27/dist/vue.runtime.esm-browser.js');
  const createApp = mod?.createApp;
  const ref = mod?.ref;
  const h = mod?.h;
  if (typeof createApp !== 'function' || typeof ref !== 'function' || typeof h !== 'function') {
    throw new Error('Vue ESM module not available');
  }

  const Counter = {
    setup() {
      const count = ref(0);
      const increase = () => {
        count.value += 1;
      };
      const openPopup = async () => {
        const popupUid = ctx.model?.uid ? ctx.model.uid + '-popup' : 'vue-popup';
        await ctx.openView(popupUid, {
          mode: 'drawer',
          title: ctx.t('Hello from Vue'),
          params: {
            fromVue: true,
            triggerCount: count.value,
          },
        });
      };
      return () =>
        h(
          'div',
          { style: 'display:flex;align-items:center;gap:12px;' },
          [
            h(
              'button',
              {
                style:
                  'padding:6px 12px;border:1px solid #fa8c16;background:#fa8c16;color:#fff;border-radius:4px;cursor:pointer;',
                onClick: increase,
              },
              ctx.t('Increase'),
            ),
            h(
              'button',
              {
                style:
                  'padding:6px 12px;border:1px solid #1677ff;background:#1677ff;color:#fff;border-radius:4px;cursor:pointer;',
                onClick: openPopup,
              },
              ctx.t('Open popup'),
            ),
            h(
              'span',
              null,
              ctx.t('Current count') + ': ' + count.value,
            ),
          ],
        );
    },
  };

  const app = createApp(Counter);
  app.mount(target);
}

bootstrap().catch((error) => {
  console.error('[RunJS] failed to mount Vue counter', error);
  mountNode.innerHTML = '<div style="color:#c00;">' + (error?.message || ctx.t('Vue initialization failed')) + '</div>';
});
`};n.default=r}}]);
