admins-components 9.0.82 → 9.0.83

package/dist/admins-components70.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components70.js","names":[],"sources":["../src/components/data-table/DataTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type {\n  LayoutMode,\n  DataListConfig,\n  DataListSettings,\n  DataTableSettings,\n  DataCardsSettings,\n  Column,\n  Sort,\n  Action,\n  ActionGroup,\n  FilterConfig,\n  FilterValue,\n} from '@/types/data-list'\n\nexport {\n  dataTableSettingsDefaults,\n  dataCardsSettingsDefaults,\n  dataListSettingsDefaults,\n} from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, onMounted, watch, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { Column, DataListConfig, DataTableSettings, Sort } from '@/types/data-list'\nimport Loader from '@/components/Loader.vue'\nimport DataCell from './DataCell.vue'\nimport DataListActions from './DataListActions.vue'\n\ntype SortDirection = 'asc' | 'desc'\n\nconst props = withDefaults(\n  defineProps<{\n    config: DataListConfig\n    items: Record<string, unknown>[]\n    settings?: DataTableSettings\n    loading?: boolean\n    initialSort?: { key: string; direction: SortDirection } | null\n  }>(),\n  {\n    settings: () => ({ ...dataTableSettingsDefaults }),\n    loading: false,\n    initialSort: null,\n  },\n)\n\nconst emit = defineEmits<{\n  'selection-change': [selected: unknown[]]\n  'sort-change': [sort: { key: string; direction: SortDirection }]\n}>()\n\n//const CHARACTER_BREAKPOINT = 20\n\nconst activeSort = ref<{\n  key: string\n  direction: SortDirection\n} | null>(null)\n\nconst tableWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n  () => props.loading,\n  async (isLoading) => {\n    if (isLoading) {\n      await nextTick()\n      tableWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n    }\n  },\n)\n\nconst {\n  selectedKeys,\n  allSelected,\n  toggle: toggleRow,\n  toggleAll,\n} = useSelection(\n  () => props.items,\n  () => props.config.selectableAttr,\n  (s) => emit('selection-change', s),\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nfunction getSortConfig(col: Column): Sort | null {\n  if (!col.sort) return null\n  return typeof col.sort === 'boolean' ? null : col.sort\n}\n\nfunction isSortable(col: Column): boolean {\n  return !!col.sort\n}\n\nfunction handleSort(col: Column) {\n  const key = col.property\n  const direction: SortDirection =\n    activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n  activeSort.value = { key, direction }\n  getSortConfig(col)?.callback?.(key, direction)\n\n  emit('sort-change', { key, direction })\n}\n\nfunction applyInitialSort(sort: { key: string; direction: SortDirection } | null | undefined) {\n  if (!sort) {\n    if (activeSort.value !== null) activeSort.value = null\n    return\n  }\n  const col = props.config.columns.find((c) => c.property === sort.key)\n  if (!col) return\n  if (activeSort.value?.key === sort.key && activeSort.value.direction === sort.direction) return\n  activeSort.value = { key: sort.key, direction: sort.direction }\n  getSortConfig(col)?.callback?.(sort.key, sort.direction)\n  emit('sort-change', { key: sort.key, direction: sort.direction })\n}\n\nonMounted(() => applyInitialSort(props.initialSort))\nwatch(\n  () => props.initialSort,\n  (s) => {\n    if (!s) {\n      if (activeSort.value !== null) activeSort.value = null\n      return\n    }\n    const col = props.config.columns.find((c) => c.property === s.key)\n    if (!col) return\n    if (activeSort.value?.key === s.key && activeSort.value.direction === s.direction) return\n    activeSort.value = { key: s.key, direction: s.direction }\n  },\n)\n</script>\n\n<template>\n  <div\n    ref=\"tableWrapperRef\"\n    class=\"ac-component c-table-wrapper list-table-view\"\n    :class=\"{ 'is-loading': loading }\"\n  >\n    <!-- :style=\"{ '--action-count': config.actions?.length ?? 0 }\" -->\n    <table class=\"c-table\" :class=\"{ 'is-compact': settings.compact }\">\n      <thead>\n        <tr>\n          <th v-if=\"config.selectableAttr\">\n            <Checkbox :model-value=\"allSelected\" @update:model-value=\"toggleAll\" />\n          </th>\n\n          <th\n            v-for=\"col in visibleColumns\"\n            :key=\"col.property\"\n            :class=\"[\n              {\n                'c-sortable': isSortable(col),\n                'c-sortable--sorted': activeSort?.key === col.property,\n                'primary-col': col.primary,\n              },\n              col.headerClass,\n            ]\"\n            :title=\"isSortable(col) ? `Sorrendezés ${col.label} alapján` : undefined\"\n            @click=\"isSortable(col) ? handleSort(col) : undefined\"\n          >\n            {{ !col.hideHeader ? col.label : '' }}\n\n            <span\n              v-if=\"isSortable(col)\"\n              class=\"c-sort-icon fa-solid\"\n              :class=\"{\n                'fa-sort': activeSort?.key !== col.property,\n                'fa-sort-down': activeSort?.key === col.property && activeSort.direction === 'desc',\n                'fa-sort-up': activeSort?.key === col.property && activeSort.direction === 'asc',\n                'c-sort-icon--active': activeSort?.key === col.property,\n                'is-asc': activeSort?.key === col.property && activeSort.direction === 'asc',\n                'is-desc': activeSort?.key === col.property && activeSort.direction === 'desc',\n              }\"\n            ></span>\n          </th>\n\n          <th v-if=\"config.actions\" class=\"c-actions-header\">\n            {{ config.actionHeader ?? '' }}\n          </th>\n        </tr>\n      </thead>\n\n      <tbody v-if=\"!loading || items.length > 0\">\n        <tr\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :class=\"{\n            'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n            'is-striped': settings.striped && index % 2 === 1,\n          }\"\n        >\n          <td v-if=\"config.selectableAttr\" class=\"pointer\" @click.stop=\"toggleRow(item)\">\n            <Checkbox\n              :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n              @update:model-value=\"toggleRow(item)\"\n              @click.stop\n            />\n          </td>\n\n          <td\n            v-for=\"col in visibleColumns\"\n            :key=\"col.property\"\n            class=\"c-table__cell\"\n            :class=\"[\n              col.class,\n              { 'primary-col': col.primary },\n              /* { 'is-nowrap': String(getColumnValue(item, col) ?? '').length < CHARACTER_BREAKPOINT}, */\n            ]\"\n          >\n            <slot :name=\"`cell:${col.property}`\" :item=\"item\" :col=\"col\">\n              <DataCell :item=\"item\" :col=\"col\" :copy=\"!col.hideCopyToClipboard\" />\n            </slot>\n          </td>\n\n          <td v-if=\"config.actions\" class=\"c-actions-cell\">\n            <slot\n              v-if=\"$slots.actions\"\n              name=\"actions\"\n              :item=\"item\"\n              :index=\"index\"\n              :actions=\"config.actions\"\n            />\n            <div v-else class=\"c-actions-wrap\">\n              <DataListActions :actions=\"config.actions\" :item=\"item\" />\n            </div>\n          </td>\n        </tr>\n      </tbody>\n      <tbody v-else>\n        <tr class=\"c-table__loading-row\">\n          <td\n            :colspan=\"\n              visibleColumns.length + (config.selectableAttr ? 1 : 0) + (config.actions ? 1 : 0)\n            \"\n            class=\"c-table__loading-cell\"\n          >\n            <div class=\"c-table__loading-wrap\">\n              <Loader :loading=\"true\" size=\"2.5rem\" />\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <div v-if=\"loading && items.length > 0\" class=\"c-table__backdrop\" aria-hidden=\"true\">\n      <Loader :loading=\"true\" size=\"2.5rem\" />\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-table.scss\"></style>\n"],"mappings":""}
+{"version":3,"file":"admins-components70.js","names":[],"sources":["../src/components/data-table/DataTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type {\n  LayoutMode,\n  DataListConfig,\n  DataListSettings,\n  DataTableSettings,\n  DataCardsSettings,\n  Column,\n  Sort,\n  Action,\n  ActionGroup,\n  FilterConfig,\n  FilterValue,\n} from '@/types/data-list'\n\nexport {\n  dataTableSettingsDefaults,\n  dataCardsSettingsDefaults,\n  dataListSettingsDefaults,\n} from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, onMounted, watch, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { Column, DataListConfig, DataTableSettings, Sort } from '@/types/data-list'\nimport Loader from '@/components/Loader.vue'\nimport DataCell from './DataCell.vue'\nimport DataListActions from './DataListActions.vue'\n\ntype SortDirection = 'asc' | 'desc'\n\nconst props = withDefaults(\n  defineProps<{\n    config: DataListConfig\n    items: Record<string, unknown>[]\n    settings?: DataTableSettings\n    loading?: boolean\n    initialSort?: { key: string; direction: SortDirection } | null\n  }>(),\n  {\n    settings: () => ({ ...dataTableSettingsDefaults }),\n    loading: false,\n    initialSort: null,\n  },\n)\n\nconst emit = defineEmits<{\n  'selection-change': [selected: unknown[]]\n  'sort-change': [sort: { key: string; direction: SortDirection }]\n}>()\n\n//const CHARACTER_BREAKPOINT = 20\n\nconst activeSort = ref<{\n  key: string\n  direction: SortDirection\n} | null>(null)\n\nconst tableWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n  () => props.loading,\n  async (isLoading) => {\n    if (isLoading) {\n      await nextTick()\n      tableWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n    }\n  },\n)\n\nconst {\n  selectedKeys,\n  allSelected,\n  toggle: toggleRow,\n  toggleAll,\n} = useSelection(\n  () => props.items,\n  () => props.config.selectableAttr,\n  (s) => emit('selection-change', s),\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nfunction getSortConfig(col: Column): Sort | null {\n  if (!col.sort) return null\n  return typeof col.sort === 'boolean' ? null : col.sort\n}\n\nfunction isSortable(col: Column): boolean {\n  return !!col.sort\n}\n\nfunction handleSort(col: Column) {\n  const key = col.property\n  const direction: SortDirection =\n    activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n  activeSort.value = { key, direction }\n  getSortConfig(col)?.callback?.(key, direction)\n\n  emit('sort-change', { key, direction })\n}\n\nfunction applyInitialSort(sort: { key: string; direction: SortDirection } | null | undefined) {\n  if (!sort) {\n    if (activeSort.value !== null) activeSort.value = null\n    return\n  }\n  const col = props.config.columns.find((c) => c.property === sort.key)\n  if (!col) return\n  if (activeSort.value?.key === sort.key && activeSort.value.direction === sort.direction) return\n  activeSort.value = { key: sort.key, direction: sort.direction }\n  getSortConfig(col)?.callback?.(sort.key, sort.direction)\n  emit('sort-change', { key: sort.key, direction: sort.direction })\n}\n\nonMounted(() => applyInitialSort(props.initialSort))\nwatch(\n  () => props.initialSort,\n  (s) => {\n    if (!s) {\n      if (activeSort.value !== null) activeSort.value = null\n      return\n    }\n    const col = props.config.columns.find((c) => c.property === s.key)\n    if (!col) return\n    if (activeSort.value?.key === s.key && activeSort.value.direction === s.direction) return\n    activeSort.value = { key: s.key, direction: s.direction }\n  },\n)\n</script>\n\n<template>\n  <div\n    ref=\"tableWrapperRef\"\n    class=\"ac-component c-table-wrapper list-table-view\"\n    :class=\"{ 'is-loading': loading }\"\n  >\n    <!-- :style=\"{ '--action-count': config.actions?.length ?? 0 }\" -->\n    <table class=\"c-table\" :class=\"{ 'is-compact': settings.compact }\">\n      <thead>\n        <tr>\n          <th v-if=\"config.selectableAttr\">\n            <Checkbox :model-value=\"allSelected\" @update:model-value=\"toggleAll\" />\n          </th>\n\n          <th\n            v-for=\"col in visibleColumns\"\n            :key=\"col.property\"\n            :class=\"[\n              {\n                'c-sortable': isSortable(col),\n                'c-sortable--sorted': activeSort?.key === col.property,\n                'primary-col': col.primary,\n              },\n              col.headerClass,\n            ]\"\n            :title=\"isSortable(col) ? `Sorrendezés ${col.label} alapján` : undefined\"\n            @click=\"isSortable(col) ? handleSort(col) : undefined\"\n          >\n            {{ !col.hideHeader ? col.label : '' }}\n\n            <span\n              v-if=\"isSortable(col)\"\n              class=\"c-sort-icon fa-solid\"\n              :class=\"{\n                'fa-sort': activeSort?.key !== col.property,\n                'fa-sort-down': activeSort?.key === col.property && activeSort.direction === 'desc',\n                'fa-sort-up': activeSort?.key === col.property && activeSort.direction === 'asc',\n                'c-sort-icon--active': activeSort?.key === col.property,\n                'is-asc': activeSort?.key === col.property && activeSort.direction === 'asc',\n                'is-desc': activeSort?.key === col.property && activeSort.direction === 'desc',\n              }\"\n            ></span>\n          </th>\n\n          <th v-if=\"config.actions\" class=\"c-actions-header\">\n            {{ config.actionHeader ?? '' }}\n          </th>\n        </tr>\n      </thead>\n\n      <tbody v-if=\"!loading || items.length > 0\">\n        <tr\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :class=\"{\n            'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n            'is-striped': settings.striped && index % 2 === 1,\n            'pointer': config.selectableAttr,\n          }\"\n          @click=\"config.selectableAttr ? toggleRow(item) : undefined\"\n        >\n          <td v-if=\"config.selectableAttr\" class=\"pointer\" @click.stop=\"toggleRow(item)\">\n            <Checkbox\n              :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n              @update:model-value=\"toggleRow(item)\"\n              @click.stop\n            />\n          </td>\n\n          <td\n            v-for=\"col in visibleColumns\"\n            :key=\"col.property\"\n            class=\"c-table__cell\"\n            :class=\"[\n              col.class,\n              { 'primary-col': col.primary },\n              /* { 'is-nowrap': String(getColumnValue(item, col) ?? '').length < CHARACTER_BREAKPOINT}, */\n            ]\"\n          >\n            <slot :name=\"`cell:${col.property}`\" :item=\"item\" :col=\"col\">\n              <DataCell :item=\"item\" :col=\"col\" :copy=\"!col.hideCopyToClipboard\" />\n            </slot>\n          </td>\n\n          <td v-if=\"config.actions\" class=\"c-actions-cell\" @click.stop>\n            <slot\n              v-if=\"$slots.actions\"\n              name=\"actions\"\n              :item=\"item\"\n              :index=\"index\"\n              :actions=\"config.actions\"\n            />\n            <div v-else class=\"c-actions-wrap\">\n              <DataListActions :actions=\"config.actions\" :item=\"item\" />\n            </div>\n          </td>\n        </tr>\n      </tbody>\n      <tbody v-else>\n        <tr class=\"c-table__loading-row\">\n          <td\n            :colspan=\"\n              visibleColumns.length + (config.selectableAttr ? 1 : 0) + (config.actions ? 1 : 0)\n            \"\n            class=\"c-table__loading-cell\"\n          >\n            <div class=\"c-table__loading-wrap\">\n              <Loader :loading=\"true\" size=\"2.5rem\" />\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <div v-if=\"loading && items.length > 0\" class=\"c-table__backdrop\" aria-hidden=\"true\">\n      <Loader :loading=\"true\" size=\"2.5rem\" />\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-table.scss\"></style>\n"],"mappings":""}

package/dist/src/components/Modal.vue.d.ts

@@ -9,6 +9,8 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<ModalP
 }, string, import('vue').PublicProps, Readonly<ModalProps> & Readonly<{
     onClose?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    header?: (props: {}) => any;
+} & {
     default?: (props: {}) => any;
 } & {
     footer?: (props: {}) => any;

package/dist/test.html

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="hu">
+<head>
+  <meta charset="UTF-8" />
+  <title>search-posts-widget standalone test</title>
+  <style>
+    body { font-family: system-ui, sans-serif; margin: 2rem; }
+    #log {
+      margin-top: 1rem;
+      padding: 1rem;
+      background: #f4f4f4;
+      border: 1px solid #ddd;
+      font-family: monospace;
+      white-space: pre-wrap;
+      font-size: 12px;
+      max-height: 300px;
+      overflow-y: auto;
+    }
+    dialog {
+      padding: 0;
+      border: 1px solid #999;
+      border-radius: 8px;
+      width: 90vw;
+      height: 80vh;
+    }
+    dialog::backdrop { background: rgba(0,0,0,0.4); }
+  </style>
+</head>
+<body>
+  <h1>search-posts-widget standalone test</h1>
+
+  <p>
+    Bundle:
+    <select id="bundle-version">
+      <option value="1.0.181">1.0.181</option>
+      <option value="1.0.188" selected>1.0.188</option>
+    </select>
+    <button id="reload">Reload bundle</button>
+  </p>
+
+  <p>
+    <strong>apiurl:</strong>
+    <input id="apiurl" style="width: 360px" value="http://172.22.0.15:8080" />
+    <br />
+    <strong>environment:</strong>
+    <input id="environment" value="dev" />
+    <br />
+    <strong>id (causationid):</strong>
+    <input id="causationid" value="test-1" />
+    <br />
+    <strong>searchurl:</strong>
+    <input id="searchurl" style="width: 360px" value="" />
+  </p>
+
+  <button id="open-selector">Open selector</button>
+  <button id="open-non-selector">Open non-selector</button>
+
+  <dialog id="dialog">
+    <search-posts-widget
+      id="widget"
+      selector="true"
+      environment="dev"
+      id="causationid"
+      apiurl="http://172.22.0.15:8080"
+      searchurl=""
+    ></search-posts-widget>
+  </dialog>
+
+  <h3>Console log</h3>
+  <div id="log"></div>
+
+  <script>
+    const log = (msg, data) => {
+      const el = document.getElementById('log')
+      const line = document.createElement('div')
+      line.textContent = `[${new Date().toISOString()}] ${msg}` +
+        (data !== undefined ? ' ' + JSON.stringify(data) : '')
+      el.appendChild(line)
+      console.log(msg, data ?? '')
+    }
+
+    window.addEventListener('error', (e) => log('ERROR', { msg: e.message, file: e.filename, line: e.lineno }))
+    window.addEventListener('unhandledrejection', (e) => log('UNHANDLED REJECTION', { reason: String(e.reason) }))
+
+    const widgetScriptId = 'search-posts-widget-script'
+    const CDN_BASE = 'https://cdn.hvg.hu/search-posts-widget'
+
+    function loadBundle(version) {
+      return new Promise((resolve, reject) => {
+        const existing = document.getElementById(widgetScriptId)
+        if (existing) existing.remove()
+        if (customElements.get('search-posts-widget')) {
+          // Force re-registration by re-defining on a new class
+          // (customElements.define cannot be called twice for the same name,
+          //  but since the script reassigns via const, we just reload.)
+        }
+        const s = document.createElement('script')
+        s.id = widgetScriptId
+        //s.src = `${CDN_BASE}/${version}/search-posts-widget.umd.js`
+        s.src = '/widget/dist/search-posts-widget.umd.js'
+        s.onload = () => resolve(version)
+        s.onerror = () => reject(new Error(`Failed to load ${version}`))
+        document.head.appendChild(s)
+      })
+    }
+
+    function applyAttrs() {
+      const w = document.getElementById('widget')
+      w.setAttribute('apiurl', document.getElementById('apiurl').value)
+      w.setAttribute('environment', document.getElementById('environment').value)
+      w.setAttribute('id', document.getElementById('causationid').value)
+      w.setAttribute('searchurl', document.getElementById('searchurl').value)
+      log('widget attrs', {
+        apiurl: w.getAttribute('apiurl'),
+        environment: w.getAttribute('environment'),
+        id: w.getAttribute('id'),
+        searchurl: w.getAttribute('searchurl'),
+        selector: w.getAttribute('selector'),
+      })
+    }
+
+    function openWidget(selector) {
+      const w = document.getElementById('widget')
+      w.setAttribute('selector', selector ? 'true' : 'false')
+      applyAttrs()
+      // Re-create the element so the new selector prop takes effect
+      const fresh = w.cloneNode(true)
+      w.replaceWith(fresh)
+      document.getElementById('dialog').showModal()
+      // v1.0.188 needs open() to display selector content
+      try {
+        console.log('fresh element before open:', fresh)
+        fresh.open?.()
+        log('called open()', { hasOpen: typeof fresh.open === 'function' })
+      } catch (e) {
+        log('open() threw', { error: String(e) })
+      }
+    }
+
+    document.getElementById('reload').addEventListener('click', async () => {
+      const v = document.getElementById('bundle-version').value
+      try {
+        await loadBundle(v)
+        log('bundle loaded', { version: v, defined: !!customElements.get('search-posts-widget') })
+      } catch (e) {
+        log('bundle load failed', { error: String(e) })
+      }
+    })
+
+    document.getElementById('open-selector').addEventListener('click', () => openWidget(true))
+    document.getElementById('open-non-selector').addEventListener('click', () => openWidget(false))
+
+    window.addEventListener('search_posts_selected', (e) => {
+      log('search_posts_selected', e.detail)
+    })
+
+    // Initial load of selected version
+    loadBundle(document.getElementById('bundle-version').value)
+      .then((v) => log('initial bundle loaded', { version: v, defined: !!customElements.get('search-posts-widget') }))
+      .catch((e) => log('initial bundle failed', { error: String(e) }))
+  </script>
+</body>
+</html>

package/dist/test81.html

@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="hu">
+<head>
+  <meta charset="UTF-8" />
+  <title>search-posts-widget standalone test</title>
+  <style>
+    body { font-family: system-ui, sans-serif; margin: 2rem; }
+    #log {
+      margin-top: 1rem;
+      padding: 1rem;
+      background: #f4f4f4;
+      border: 1px solid #ddd;
+      font-family: monospace;
+      white-space: pre-wrap;
+      font-size: 12px;
+      max-height: 300px;
+      overflow-y: auto;
+    }
+    dialog {
+      padding: 0;
+      border: 1px solid #999;
+      border-radius: 8px;
+      width: 90vw;
+      height: 80vh;
+    }
+    dialog::backdrop { background: rgba(0,0,0,0.4); }
+  </style>
+</head>
+<body>
+  <h1>search-posts-widget standalone test</h1>
+
+  <p>
+    Bundle:
+    <select id="bundle-version">
+      <option value="1.0.181" selected>1.0.181</option>
+      <option value="1.0.188" >1.0.188</option>
+    </select>
+    <button id="reload">Reload bundle</button>
+  </p>
+
+  <p>
+    <strong>apiurl:</strong>
+    <input id="apiurl" style="width: 360px" value="http://172.22.0.15:8080" />
+    <br />
+    <strong>environment:</strong>
+    <input id="environment" value="dev" />
+    <br />
+    <strong>id (causationid):</strong>
+    <input id="causationid" value="test-causation-1" />
+    <br />
+    <strong>searchurl:</strong>
+    <input id="searchurl" style="width: 360px" value="" />
+  </p>
+
+  <button id="open-selector">Open selector</button>
+  <button id="open-non-selector">Open non-selector</button>
+
+  <dialog id="dialog">
+    <search-posts-widget
+      id="widget"
+      selector="true"
+      environment="dev"
+      id="causationid"
+      apiurl="http://172.22.0.15:8080"
+      searchurl=""
+    ></search-posts-widget>
+  </dialog>
+
+  <h3>Console log</h3>
+  <div id="log"></div>
+
+  <script>
+    const log = (msg, data) => {
+      const el = document.getElementById('log')
+      const line = document.createElement('div')
+      line.textContent = `[${new Date().toISOString()}] ${msg}` +
+        (data !== undefined ? ' ' + JSON.stringify(data) : '')
+      el.appendChild(line)
+      console.log(msg, data ?? '')
+    }
+
+    window.addEventListener('error', (e) => log('ERROR', { msg: e.message, file: e.filename, line: e.lineno }))
+    window.addEventListener('unhandledrejection', (e) => log('UNHANDLED REJECTION', { reason: String(e.reason) }))
+
+    const widgetScriptId = 'search-posts-widget-script'
+    const CDN_BASE = 'https://cdn.hvg.hu/search-posts-widget'
+
+    function loadBundle(version) {
+      return new Promise((resolve, reject) => {
+        const existing = document.getElementById(widgetScriptId)
+        if (existing) existing.remove()
+        if (customElements.get('search-posts-widget')) {
+          // Force re-registration by re-defining on a new class
+          // (customElements.define cannot be called twice for the same name,
+          //  but since the script reassigns via const, we just reload.)
+        }
+        const s = document.createElement('script')
+        s.id = widgetScriptId
+        s.src = `${CDN_BASE}/${version}/search-posts-widget.umd.js`
+        s.onload = () => resolve(version)
+        s.onerror = () => reject(new Error(`Failed to load ${version}`))
+        document.head.appendChild(s)
+      })
+    }
+
+    function applyAttrs() {
+      const w = document.getElementById('widget')
+      w.setAttribute('apiurl', document.getElementById('apiurl').value)
+      w.setAttribute('environment', document.getElementById('environment').value)
+      w.setAttribute('id', document.getElementById('causationid').value)
+      w.setAttribute('searchurl', document.getElementById('searchurl').value)
+      log('widget attrs', {
+        apiurl: w.getAttribute('apiurl'),
+        environment: w.getAttribute('environment'),
+        id: w.getAttribute('id'),
+        searchurl: w.getAttribute('searchurl'),
+        selector: w.getAttribute('selector'),
+      })
+    }
+
+    function openWidget(selector) {
+      const w = document.getElementById('widget')
+      w.setAttribute('selector', selector ? 'true' : 'false')
+      applyAttrs()
+      // Re-create the element so the new selector prop takes effect
+      const fresh = w.cloneNode(true)
+      w.replaceWith(fresh)
+      document.getElementById('dialog').showModal()
+      // v1.0.188 needs open() to display selector content
+      try {
+        fresh.open?.()
+        log('called open()', { hasOpen: typeof fresh.open === 'function' })
+      } catch (e) {
+        log('open() threw', { error: String(e) })
+      }
+    }
+
+    document.getElementById('reload').addEventListener('click', async () => {
+      const v = document.getElementById('bundle-version').value
+      try {
+        await loadBundle(v)
+        log('bundle loaded', { version: v, defined: !!customElements.get('search-posts-widget') })
+      } catch (e) {
+        log('bundle load failed', { error: String(e) })
+      }
+    })
+
+    document.getElementById('open-selector').addEventListener('click', () => openWidget(true))
+    document.getElementById('open-non-selector').addEventListener('click', () => openWidget(false))
+
+    window.addEventListener('search_posts_selected', (e) => {
+      log('search_posts_selected', e.detail)
+    })
+
+    // Initial load of selected version
+    loadBundle(document.getElementById('bundle-version').value)
+      .then((v) => log('initial bundle loaded', { version: v, defined: !!customElements.get('search-posts-widget') }))
+      .catch((e) => log('initial bundle failed', { error: String(e) }))
+  </script>
+</body>
+</html>

package/dist/vueformelements/ArticlePickerElement.vue_vue_type_style_index_0_scoped_0afb93e7_lang.css

@@ -0,0 +1 @@
+.article-picker-container[data-v-0afb93e7]{flex-direction:column;gap:1rem;display:flex}.article-picker-section[data-v-0afb93e7]{flex-direction:column;gap:.375rem;display:flex}.article-picker-ids[data-v-0afb93e7]{gap:.5rem;width:100%;display:flex}.article-picker-id-field[data-v-0afb93e7]{flex-direction:column;flex:1;gap:.375rem;display:flex}.article-picker-image[data-v-0afb93e7]{border-radius:var(--ac-field-border-radius);object-fit:cover;max-width:100%;height:200px}.article-picker-no-image[data-v-0afb93e7]{padding:var(--ac-input-padding);color:var(--neutral-500);font-size:var(--ac-field-font-size)}.article-picker-buttons[data-v-0afb93e7]{gap:.5rem;width:100%;display:flex}.article-picker-image-modal[data-v-0afb93e7]{width:90vw;max-width:1200px;height:80vh}.article-picker-image-modal[data-v-0afb93e7] .c-modal-body,.article-picker-article-modal[data-v-0afb93e7] .c-modal-body{padding:0}.article-picker-article-modal[data-v-0afb93e7]{width:95vw;max-width:1600px;height:90vh}.article-picker-modal-header-actions[data-v-0afb93e7]{align-items:center;gap:.5rem;margin-left:auto;display:flex}