@scalar/api-client 3.20.0 → 3.21.1

package/dist/v2/blocks/scalar-address-bar-block/components/AddressBar.vue.script.js

@@ -11,7 +11,7 @@ import AddressBarHistory_default from "./AddressBarHistory.vue.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, toDisplayString, unref, useId, useTemplateRef, watch, withCtx, withKeys } from "vue";
 import { ScalarButton } from "@scalar/components/button";
 import { ScalarIconCopy, ScalarIconWarningCircle } from "@scalar/icons";
-import { REQUEST_METHODS } from "@scalar/helpers/http/http-info";
+import { getHttpMethodInfo } from "@scalar/helpers/http/http-info";
 import { ScalarIcon } from "@scalar/components/icon";
 import { EditorView } from "@scalar/use-codemirror";
 import { getSelector } from "@scalar/helpers/dom/get-selector";
@@ -87,7 +87,7 @@ var AddressBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		const addressBarScrollMargins = EditorView.scrollMargins.of(() => ({ right: 24 }));
 		/** Animated background transform for the loading indicator */
 		const style = computed(() => ({
-			backgroundColor: `color-mix(in srgb, transparent 90%, ${REQUEST_METHODS[__props.method].colorVar})`,
+			backgroundColor: `color-mix(in srgb, transparent 90%, ${getHttpMethodInfo(__props.method).colorVar})`,
 			transform: `translate3d(-${percentage.value}%,0,0)`
 		}));
 		/** Whether there is a path or method conflict */

package/dist/v2/blocks/scalar-address-bar-block/components/AddressBar.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressBar.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-address-bar-block/components/AddressBar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * AddressBar component\n * This component is used to display the address bar for the operation block\n * It is used to display the path, method, server, and history for the operation\n */\nexport default {\n  name: 'AddressBar',\n}\nexport type AddressBarProps = {\n  /** An external example must finish loading before sending. */\n  executionDisabled?: boolean\n  /** Current request path */\n  path: string\n  /** Current request method */\n  method: HttpMethodType\n  /** Whether the request target belongs to an OpenAPI webhook. */\n  isWebhook?: boolean\n  /** Openapi document slug */\n  documentSlug: string\n  /** Currently selected example key for the current operation */\n  exampleKey: string\n  /** Currently selected server */\n  server: ServerObject | null\n  /** Server list available for operation/document */\n  servers: ServerObject[]\n  /** List of request history */\n  history: History[]\n  /** Client layout */\n  layout: ClientLayout\n  /** Event bus */\n  eventBus: WorkspaceEventBus\n  /** Environment */\n  environment: XScalarEnvironment\n  /** Meta information for the server */\n  serverMeta: ServerMeta\n}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { getSelector } from '@scalar/helpers/dom/get-selector'\nimport { REQUEST_METHODS } from '@scalar/helpers/http/http-info'\nimport type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { extractServerFromPath } from '@scalar/helpers/url/extract-server-from-path'\nimport { ScalarIconCopy, ScalarIconWarningCircle } from '@scalar/icons'\nimport { EditorView } from '@scalar/use-codemirror'\nimport type {\n  ApiReferenceEvents,\n  ServerMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useId,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { HttpMethod } from '@/components/HttpMethod'\nimport { getOperationExampleKey } from '@/v2/blocks/operation-block/helpers/response-cache'\nimport { isPlaceholderPath } from '@/v2/blocks/scalar-address-bar-block/helpers/is-placeholder-path'\nimport { refocusBlurTarget } from '@/v2/blocks/scalar-address-bar-block/helpers/refocus-blur-target'\nimport { useLoadingAnimation } from '@/v2/blocks/scalar-address-bar-block/hooks/use-loading-animation'\nimport { usePathMasking } from '@/v2/blocks/scalar-address-bar-block/hooks/use-path-masking'\nimport { CodeInput } from '@/v2/components/code-input'\nimport { ServerDropdown } from '@/v2/components/server'\nimport { useLocalization } from '@/v2/features/localization'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport AddressBarHistory, { type History } from './AddressBarHistory.vue'\n\nconst {\n  path,\n  method,\n  layout,\n  eventBus,\n  exampleKey,\n  documentSlug,\n  server,\n  servers,\n  environment,\n  serverMeta,\n  isWebhook = false,\n} = defineProps<AddressBarProps>()\n\nconst emit = defineEmits<{\n  /** Execute the current operation example */\n  (e: 'execute'): void\n  /** Select a request history item by index */\n  (e: 'select:history:item', payload: { index: number }): void\n  /** Update the full destination URL used to deliver a webhook. */\n  (e: 'update:webhook-url', url: string): void\n}>()\n\nconst { translate } = useLocalization()\n\n// ───────────────────────────────────────────────────────────────────\n// Template refs & reactive state\n// ───────────────────────────────────────────────────────────────────\n\nconst id = useId()\nconst sendButtonRef = useTemplateRef('sendButtonRef')\nconst mobileSendButtonRef = useTemplateRef('mobileSendButtonRef')\nconst addressBarRef = useTemplateRef('addressBarRef')\n\nconst { percentage, startLoading, stopLoading, isLoading } =\n  useLoadingAnimation()\n\nconst pathConflict = ref<string | null>(null)\nconst methodConflict = ref<HttpMethodType | null>(null)\nconst tabbedOut = ref(false)\nconst isServerDropdownOpen = ref(false)\nconst isHistoryDropdownOpen = ref(false)\n\n// ───────────────────────────────────────────────────────────────────\n// Derived state\n// ───────────────────────────────────────────────────────────────────\n\n/** Keeps the cursor visible past the fade-right overlay while typing */\nconst addressBarScrollMargins = EditorView.scrollMargins.of(() => ({\n  right: 24,\n}))\n\n/** Animated background transform for the loading indicator */\nconst style = computed(() => ({\n  backgroundColor: `color-mix(in srgb, transparent 90%, ${REQUEST_METHODS[method].colorVar})`,\n  transform: `translate3d(-${percentage.value}%,0,0)`,\n}))\n\n/** Whether there is a path or method conflict */\nconst hasConflict = computed(() => methodConflict.value || pathConflict.value)\n\n/**\n * Placeholder for the path field.\n *\n * Webhooks have no server to prefix the path, so the field doubles as the full\n * destination URL. Hint that a complete URL (including the host) is expected,\n * rather than a bare path.\n */\nconst pathPlaceholder = computed(() => {\n  if (server) {\n    return ''\n  }\n  return isWebhook\n    ? translate('apiClient.addressBar.webhookUrlPlaceholder')\n    : translate('apiClient.addressBar.urlPlaceholder')\n})\n\n/** Whether either dropdown (server or history) is open */\nconst isDropdownOpen = computed(\n  () => isServerDropdownOpen.value || isHistoryDropdownOpen.value,\n)\n\n/** Uniquely identifies the currently selected operation + example */\nconst uniqueKey = computed(() =>\n  getOperationExampleKey(method, path, exampleKey, documentSlug),\n)\n\n/** Clear conflict state when switching to a different operation */\nwatch(uniqueKey, () => {\n  pathConflict.value = null\n  methodConflict.value = null\n})\n\n// ───────────────────────────────────────────────────────────────────\n// Focus helpers\n// ───────────────────────────────────────────────────────────────────\n\nconst handleFocusSendButton = (): void => {\n  const desktop = sendButtonRef.value?.$el\n  const mobile = mobileSendButtonRef.value?.$el\n\n  // Focus whichever send button is currently visible\n  if (desktop && desktop.offsetParent !== null) {\n    desktop.focus()\n  } else {\n    mobile?.focus()\n  }\n}\n\nconst handleFocusAddressBar = (\n  payload: ApiReferenceEvents['ui:focus:address-bar'],\n): void => {\n  // On non-desktop layouts, if already focused we let the browser handle the\n  // native behavior (e.g. selecting the browser's own address bar).\n  if (addressBarRef.value?.isFocused && layout !== 'desktop') {\n    return\n  }\n\n  addressBarRef.value?.focus('end')\n\n  if (payload && 'clear' in payload && payload.clear) {\n    addressBarRef.value?.setCodeMirrorContent('')\n  }\n\n  if (payload && 'event' in payload) {\n    payload.event.preventDefault()\n  }\n}\n\n// ───────────────────────────────────────────────────────────────────\n// Path masking\n//\n// Drafts on `/` and auto-generated `/_scalar_temp...` paths are internal\n// placeholders — the address bar focuses and clears on mount and on\n// navigation so the user sees a blank prompt instead of the internal\n// path. The deferred mask only clears when CodeMirror still contains that\n// placeholder path, so a user edit that lands before the frame is preserved.\n// ───────────────────────────────────────────────────────────────────\n\nusePathMasking({\n  isReady: () => addressBarRef.value?.codeMirror,\n  operationKey: () => uniqueKey.value,\n  shouldMask: () => isPlaceholderPath(path, documentSlug),\n  // Defer to the next frame so focus() runs after click-handler side\n  // effects that move focus (e.g. a dropdown refocusing its trigger),\n  // which would otherwise blur our input and emit a spurious path\n  // update against the now-empty value.\n  onMask: () =>\n    requestAnimationFrame(() => {\n      const editorContent =\n        addressBarRef.value?.codeMirror?.state.doc.toString()\n\n      if (editorContent && editorContent !== path) {\n        return\n      }\n\n      handleFocusAddressBar({ clear: true })\n    }),\n})\n\n// ───────────────────────────────────────────────────────────────────\n// Server extraction\n// ───────────────────────────────────────────────────────────────────\n\n/** If the path contains a server URL, extract it and select or add that server */\nconst extractAndSelectServer = (targetPath: string): string => {\n  const extracted = extractServerFromPath(targetPath)\n  if (!extracted) {\n    return targetPath\n  }\n\n  const [url, remainingPath] = extracted\n\n  // Server is already selected — nothing to do\n  if (url === server?.url) {\n    return remainingPath\n  }\n\n  const matchingServer = servers.find((s) => s.url === url)\n  if (matchingServer) {\n    eventBus.emit('server:update:selected', { url, meta: serverMeta })\n  } else {\n    eventBus.emit('server:add:server', {\n      url,\n      select: true,\n      meta: { type: 'operation', path, method },\n    })\n  }\n\n  return remainingPath\n}\n\n// ───────────────────────────────────────────────────────────────────\n// Path / method updates\n// ───────────────────────────────────────────────────────────────────\n\nconst normalizePath = (value: string): string =>\n  value.startsWith('/') ? value : `/${value}`\n\n/** Emit a path/method update and reconcile conflicts + cursor state on the result */\nconst emitPathMethodUpdate = (\n  targetMethod: HttpMethodType,\n  targetPath: string,\n  blurTargetSelector: string | null = null,\n): void => {\n  if (isWebhook) {\n    // A webhook has no OpenAPI server, so the field holds the full destination\n    // URL. Keep exactly what the user entered — do not split it into an invisible\n    // server plus a leftover path, and do not force a leading slash. That split\n    // is what made a typed URL collapse to a stray \"/\" on blur.\n    const webhookUrl = targetPath.trim()\n    addressBarRef.value?.setCodeMirrorContent(webhookUrl)\n    emit('update:webhook-url', webhookUrl)\n    methodConflict.value = null\n    pathConflict.value = null\n    nextTick(() => refocusBlurTarget(blurTargetSelector))\n    return\n  }\n\n  const extractedPath = extractAndSelectServer(targetPath)\n  const normalizedPath = normalizePath(extractedPath)\n\n  // Keep CodeMirror in sync so a conflict does not leave a stale value on screen\n  addressBarRef.value?.setCodeMirrorContent(normalizedPath)\n\n  eventBus.emit('operation:update:pathMethod', {\n    meta: { method, path },\n    blurTargetSelector,\n    payload: { method: targetMethod, path: normalizedPath },\n    callback: (status, returnedSelector) => {\n      if (status === 'success' || status === 'no-change') {\n        methodConflict.value = null\n        pathConflict.value = null\n      } else if (status === 'conflict') {\n        if (targetMethod !== method) {\n          methodConflict.value = targetMethod\n        }\n        if (normalizedPath !== path) {\n          pathConflict.value = normalizedPath\n        }\n\n        return\n      }\n\n      // Edge case: pasting a full URL extracts the server but leaves the path\n      // unchanged. CodeMirror still shows the full URL, so force it back to\n      // just the path.\n      const mirrorContent = addressBarRef.value?.codeMirrorRef?.textContent\n      if (\n        status === 'no-change' &&\n        mirrorContent &&\n        mirrorContent !== extractedPath\n      ) {\n        addressBarRef.value?.setCodeMirrorContent(extractedPath)\n      }\n\n      nextTick(() => refocusBlurTarget(returnedSelector))\n    },\n  })\n}\n\n/** Change the operation's method, preferring the conflicting path if present */\nconst handleMethodChange = (newMethod: HttpMethodType): void =>\n  emitPathMethodUpdate(newMethod, pathConflict.value ?? path)\n\n/**\n * Save the path on blur and replay the click that caused the blur (so e.g. a\n * click on the Send button still fires after the async update resolves).\n *\n * Tab-outs do not replay — tabbing to a button should not trigger its click\n * (`tabbedOut` is set on `@keydown.tab`).\n *\n * Programmatic focus moves also do not replay. On first navigation into a\n * draft operation, `usePathMasking` focuses and clears the address bar while\n * `ScalarSidebarNestedItems` focuses the drilled-in Back button in\n * `nextTick`. That steals focus from CodeMirror, fires blur with a\n * `relatedTarget` (the Back button), and without a guard we would treat it\n * like a user click: capture the selector, then `refocusBlurTarget` would\n * synthesize `.click()` on Back and navigate away.\n *\n * `FocusEvent.sourceCapabilities` is null when no input device caused the\n * focus change (e.g. `element.focus()`). A real pointer click sets it on the\n * blur that precedes the click, so we still replay Send and other buttons.\n */\nconst handlePathBlur = (newPath: string, event: FocusEvent): void => {\n  const relatedTarget =\n    event.relatedTarget instanceof Element ? event.relatedTarget : null\n  const blurTargetSelector =\n    tabbedOut.value ||\n    ('sourceCapabilities' in event && event.sourceCapabilities === null)\n      ? null\n      : getSelector(relatedTarget)\n  tabbedOut.value = false\n\n  emitPathMethodUpdate(\n    methodConflict.value ?? method,\n    newPath,\n    blurTargetSelector,\n  )\n}\n\n/** Save the path on Enter and trigger the Send button after the update resolves */\nconst handlePathSubmit = (\n  newPath: string,\n  event: KeyboardEvent | FocusEvent,\n): void => {\n  // Prevent the global hotkey listener from also handling this Enter press\n  event.stopPropagation()\n\n  emitPathMethodUpdate(\n    methodConflict.value ?? method,\n    newPath,\n    '[data-addressbar-action=\"send\"]',\n  )\n}\n\n/** Unset the server when backspace is pressed on an empty path */\nconst handlePathBackspace = (event: KeyboardEvent): void => {\n  if (event.target instanceof HTMLElement && event.target.innerText === '\\n') {\n    // A webhook has no server to unset; its full URL lives in the field itself.\n    if (isWebhook) {\n      return\n    }\n    eventBus.emit('server:update:selected', { url: '', meta: serverMeta })\n  }\n}\n\nconst handleServerSelect = (\n  payload: ApiReferenceEvents['server:update:selected'],\n): void => {\n  eventBus.emit('server:update:selected', payload)\n}\n\nconst handleServerVariable = (\n  payload: ApiReferenceEvents['server:update:variables'],\n): void => {\n  eventBus.emit('server:update:variables', payload)\n}\n\n/** Address bar copy is handled in OperationBlock (same URL as Send). */\nconst requestCopyUrl = (): void => {\n  eventBus.emit('copy-url:address-bar')\n}\n\n// ───────────────────────────────────────────────────────────────────\n// Navigation\n// ───────────────────────────────────────────────────────────────────\n\nconst navigateToServersPage = (): void => {\n  if (serverMeta.type === 'operation') {\n    eventBus.emit('ui:navigate', {\n      page: 'operation',\n      path: 'servers',\n      operationPath: serverMeta.path,\n      method: serverMeta.method,\n    })\n    return\n  }\n\n  eventBus.emit('ui:navigate', { page: 'document', path: 'servers' })\n}\n\n// ───────────────────────────────────────────────────────────────────\n// Lifecycle\n// ───────────────────────────────────────────────────────────────────\n\nconst unsubscribes: Array<() => void> = []\n\nonMounted(() => {\n  unsubscribes.push(\n    eventBus.on('ui:focus:address-bar', handleFocusAddressBar),\n    eventBus.on('ui:focus:send-button', handleFocusSendButton),\n    eventBus.on('hooks:on:request:sent', startLoading),\n    eventBus.on('hooks:on:request:complete', stopLoading),\n  )\n})\n\nonBeforeUnmount(() => {\n  for (const unsubscribe of unsubscribes) {\n    unsubscribe()\n  }\n\n  // Prevents the loading animation from continuing after unmount\n  stopLoading()\n})\n\ndefineExpose({\n  methodConflict,\n  pathConflict,\n})\n</script>\n<template>\n  <!--\n    Address bar.\n\n    The wide-container layout matches the original single-row bar:\n    `[Method | URL | Copy | History | Send]`. When the surrounding\n    `@container` drops below `@3xl` the bar collapses to\n    `[URL | History]` and a second row appears beneath it with a\n    duplicate `Method`, `Copy`, and `Send` so the URL gets the full\n    container width while every action stays on the same line as the\n    send button.\n  -->\n  <div\n    class=\"order-last flex h-auto w-full max-w-3xl grow-3 flex-wrap items-stretch [--scalar-address-bar-height:32px] @3xl:order-0 @3xl:flex-nowrap\">\n    <!-- Address Bar -->\n    <div\n      :id=\"id\"\n      class=\"address-bar-bg-states text-xxs group relative flex h-(--scalar-address-bar-height) w-full flex-1 flex-row items-stretch rounded-lg p-0.75\"\n      :class=\"{\n        'outline-c-danger outline': hasConflict,\n        'rounded-b-none': isDropdownOpen,\n      }\">\n      <div\n        class=\"pointer-events-none absolute top-0 left-0 block h-full w-full overflow-hidden rounded-lg border\"\n        :class=\"{\n          'rounded-b-none': isDropdownOpen,\n        }\">\n        <div\n          class=\"absolute top-0 left-0 h-full w-full\"\n          :style />\n      </div>\n\n      <!--\n        Method, Copy, and Send are hidden in mobile mode (container\n        narrower than `@3xl`) and the duplicate buttons in the trailing\n        mobile actions row take over at that point.\n      -->\n      <div class=\"hidden @3xl:flex\">\n        <HttpMethod\n          :isEditable=\"layout !== 'modal' && !isWebhook\"\n          isSquare\n          :method=\"methodConflict ?? method\"\n          teleport\n          @change=\"handleMethodChange\" />\n      </div>\n\n      <div\n        class=\"scroll-timeline-x scroll-timeline-x-hidden relative flex w-full bg-blend-normal\"\n        dir=\"ltr\">\n        <!-- Servers -->\n        <ServerDropdown\n          v-if=\"servers.length\"\n          :layout=\"isWebhook ? 'modal' : layout\"\n          :meta=\"serverMeta\"\n          :server=\"server\"\n          :servers=\"servers\"\n          :target=\"id\"\n          @update:open=\"(value) => (isServerDropdownOpen = value)\"\n          @update:selectedServer=\"handleServerSelect\"\n          @update:servers=\"navigateToServersPage\"\n          @update:variable=\"handleServerVariable\" />\n\n        <!-- Path + URL + env vars -->\n        <CodeInput\n          ref=\"addressBarRef\"\n          alwaysEmitChange\n          :aria-label=\"translate('apiClient.addressBar.path')\"\n          class=\"ml-1 min-w-fit pl-px outline-none\"\n          disableCloseBrackets\n          :disabled=\"layout === 'modal' && !isWebhook\"\n          disableEnter\n          disableTabIndent\n          :emitOnBlur=\"false\"\n          :environment=\"environment\"\n          :extensions=\"[addressBarScrollMargins]\"\n          importCurl\n          :layout=\"layout\"\n          :modelValue=\"path\"\n          :placeholder=\"pathPlaceholder\"\n          server\n          @blur=\"handlePathBlur\"\n          @keydown.delete=\"handlePathBackspace\"\n          @keydown.tab=\"tabbedOut = true\"\n          @submit=\"handlePathSubmit\" />\n      </div>\n\n      <!-- Copy url button -->\n      <ScalarButton\n        class=\"hover:bg-b-3 mx-1 hidden @3xl:flex\"\n        size=\"xs\"\n        variant=\"ghost\"\n        @click=\"requestCopyUrl\">\n        <ScalarIconCopy />\n        <span class=\"sr-only\">{{\n          translate('apiClient.addressBar.copyUrl')\n        }}</span>\n      </ScalarButton>\n\n      <AddressBarHistory\n        :history=\"history\"\n        :target=\"id\"\n        @select:history:item=\"(payload) => emit('select:history:item', payload)\"\n        @update:open=\"(value) => (isHistoryDropdownOpen = value)\" />\n      <!-- Error message -->\n      <div\n        v-if=\"hasConflict\"\n        class=\"z-context absolute inset-x-0 top-[calc(100%+4px)] flex flex-col items-center rounded px-6\">\n        <div\n          class=\"text-c-danger bg-b-danger border-c-danger flex items-center gap-1 rounded border p-1\">\n          <ScalarIconWarningCircle size=\"sm\" />\n          <div class=\"min-w-0 flex-1\">\n            {{\n              translate('apiClient.addressBar.duplicateRequest', {\n                method: (methodConflict ?? method).toUpperCase(),\n                path: pathConflict ?? path,\n              })\n            }}\n          </div>\n        </div>\n      </div>\n\n      <ScalarButton\n        ref=\"sendButtonRef\"\n        class=\"relative hidden h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold @3xl:flex\"\n        data-addressbar-action=\"send\"\n        :disabled=\"isLoading || executionDisabled\"\n        @click=\"emit('execute')\">\n        <span\n          aria-hidden=\"true\"\n          class=\"inline-flex items-center gap-1\">\n          <ScalarIcon\n            class=\"relative shrink-0 fill-current\"\n            icon=\"Play\"\n            size=\"xs\" />\n          <span class=\"text-xxs flex\">{{\n            translate('apiClient.addressBar.send')\n          }}</span>\n        </span>\n        <span class=\"sr-only\"\n          >{{\n            translate('apiClient.addressBar.sendRequest', {\n              method,\n              url: `${server?.url ?? ''}${path}`,\n            })\n          }}\n        </span>\n      </ScalarButton>\n    </div>\n\n    <!--\n      Mobile actions row. Visible by default and hidden once the\n      container reaches `@3xl`, where the duplicate Method / Copy /\n      Send buttons move back into the bar itself.\n    -->\n    <div\n      class=\"mt-2 flex h-(--scalar-address-bar-height) w-full items-stretch gap-1 @3xl:hidden\">\n      <HttpMethod\n        :isEditable=\"layout !== 'modal' && !isWebhook\"\n        isSquare\n        :method=\"methodConflict ?? method\"\n        teleport\n        @change=\"handleMethodChange\" />\n      <ScalarButton\n        class=\"hover:bg-b-3 ml-auto\"\n        size=\"xs\"\n        variant=\"ghost\"\n        @click=\"requestCopyUrl\">\n        <ScalarIconCopy />\n        <span class=\"sr-only\">{{\n          translate('apiClient.addressBar.copyUrl')\n        }}</span>\n      </ScalarButton>\n      <ScalarButton\n        ref=\"mobileSendButtonRef\"\n        class=\"relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold\"\n        data-addressbar-action=\"send\"\n        :disabled=\"isLoading || executionDisabled\"\n        @click=\"emit('execute')\">\n        <span\n          aria-hidden=\"true\"\n          class=\"inline-flex items-center gap-1\">\n          <ScalarIcon\n            class=\"relative shrink-0 fill-current\"\n            icon=\"Play\"\n            size=\"xs\" />\n          <span class=\"text-xxs\">{{\n            translate('apiClient.addressBar.send')\n          }}</span>\n        </span>\n        <span class=\"sr-only\"\n          >{{\n            translate('apiClient.addressBar.sendRequest', {\n              method,\n              url: `${server?.url ?? ''}${path}`,\n            })\n          }}\n        </span>\n      </ScalarButton>\n    </div>\n  </div>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  width: 100%;\n}\n:deep(.cm-line) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  padding: 0;\n  display: flex;\n  align-items: center;\n  font-size: var(--scalar-small);\n}\n.scroll-timeline-x {\n  -ms-overflow-style: none;\n  /* Fade the URL at the viewport edges. Mask lives on the scrollport (this\n     element) rather than on `.cm-scroller`, whose width follows the URL's\n     full content and pushes the right edge off-screen when overflowing. */\n  mask-image: linear-gradient(\n    to right,\n    transparent 0,\n    black 6px,\n    black calc(100% - 24px),\n    transparent 100%\n  );\n}\n.scroll-timeline-x-hidden {\n  overflow-x: auto;\n}\n.scroll-timeline-x-hidden :deep(.cm-scroller) {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  padding-right: 20px;\n  overflow: auto;\n}\n.scroll-timeline-x-hidden::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.scroll-timeline-x-hidden :deep(.cm-scroller::-webkit-scrollbar) {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.scroll-timeline-x-address {\n  line-height: 27px;\n  scrollbar-width: none; /* Firefox */\n}\n/* make clickable are to left of send button */\n.scroll-timeline-x-address:after {\n  content: '';\n  position: absolute;\n  height: 100%;\n  width: 24px;\n  right: 0;\n  cursor: text;\n}\n\n.address-bar-bg-states {\n  --scalar-address-bar-bg: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  background: var(--scalar-address-bar-bg);\n}\n.address-bar-bg-states:has(.cm-focused) {\n  --scalar-address-bar-bg: var(--scalar-background-1);\n  border-color: var(--scalar-border-color);\n  outline-width: 1px;\n  outline-style: solid;\n}\n.address-bar-bg-states:has(.cm-focused) .fade-left,\n.address-bar-bg-states:has(.cm-focused) .fade-right {\n  --scalar-address-bar-bg: var(--scalar-background-1);\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"AddressBar.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-address-bar-block/components/AddressBar.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * AddressBar component\n * This component is used to display the address bar for the operation block\n * It is used to display the path, method, server, and history for the operation\n */\nexport default {\n  name: 'AddressBar',\n}\nexport type AddressBarProps = {\n  /** An external example must finish loading before sending. */\n  executionDisabled?: boolean\n  /** Current request path */\n  path: string\n  /** Current request method */\n  method: string\n  /** Whether the request target belongs to an OpenAPI webhook. */\n  isWebhook?: boolean\n  /** Openapi document slug */\n  documentSlug: string\n  /** Currently selected example key for the current operation */\n  exampleKey: string\n  /** Currently selected server */\n  server: ServerObject | null\n  /** Server list available for operation/document */\n  servers: ServerObject[]\n  /** List of request history */\n  history: History[]\n  /** Client layout */\n  layout: ClientLayout\n  /** Event bus */\n  eventBus: WorkspaceEventBus\n  /** Environment */\n  environment: XScalarEnvironment\n  /** Meta information for the server */\n  serverMeta: ServerMeta\n}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { getSelector } from '@scalar/helpers/dom/get-selector'\nimport { getHttpMethodInfo } from '@scalar/helpers/http/http-info'\nimport { extractServerFromPath } from '@scalar/helpers/url/extract-server-from-path'\nimport { ScalarIconCopy, ScalarIconWarningCircle } from '@scalar/icons'\nimport { EditorView } from '@scalar/use-codemirror'\nimport type {\n  ApiReferenceEvents,\n  ServerMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport type { ServerObject } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useId,\n  useTemplateRef,\n  watch,\n} from 'vue'\n\nimport { HttpMethod } from '@/components/HttpMethod'\nimport { getOperationExampleKey } from '@/v2/blocks/operation-block/helpers/response-cache'\nimport { isPlaceholderPath } from '@/v2/blocks/scalar-address-bar-block/helpers/is-placeholder-path'\nimport { refocusBlurTarget } from '@/v2/blocks/scalar-address-bar-block/helpers/refocus-blur-target'\nimport { useLoadingAnimation } from '@/v2/blocks/scalar-address-bar-block/hooks/use-loading-animation'\nimport { usePathMasking } from '@/v2/blocks/scalar-address-bar-block/hooks/use-path-masking'\nimport { CodeInput } from '@/v2/components/code-input'\nimport { ServerDropdown } from '@/v2/components/server'\nimport { useLocalization } from '@/v2/features/localization'\nimport type { ClientLayout } from '@/v2/types/layout'\n\nimport AddressBarHistory, { type History } from './AddressBarHistory.vue'\n\nconst {\n  path,\n  method,\n  layout,\n  eventBus,\n  exampleKey,\n  documentSlug,\n  server,\n  servers,\n  environment,\n  serverMeta,\n  isWebhook = false,\n} = defineProps<AddressBarProps>()\n\nconst emit = defineEmits<{\n  /** Execute the current operation example */\n  (e: 'execute'): void\n  /** Select a request history item by index */\n  (e: 'select:history:item', payload: { index: number }): void\n  /** Update the full destination URL used to deliver a webhook. */\n  (e: 'update:webhook-url', url: string): void\n}>()\n\nconst { translate } = useLocalization()\n\n// ───────────────────────────────────────────────────────────────────\n// Template refs & reactive state\n// ───────────────────────────────────────────────────────────────────\n\nconst id = useId()\nconst sendButtonRef = useTemplateRef('sendButtonRef')\nconst mobileSendButtonRef = useTemplateRef('mobileSendButtonRef')\nconst addressBarRef = useTemplateRef('addressBarRef')\n\nconst { percentage, startLoading, stopLoading, isLoading } =\n  useLoadingAnimation()\n\nconst pathConflict = ref<string | null>(null)\nconst methodConflict = ref<string | null>(null)\nconst tabbedOut = ref(false)\nconst isServerDropdownOpen = ref(false)\nconst isHistoryDropdownOpen = ref(false)\n\n// ───────────────────────────────────────────────────────────────────\n// Derived state\n// ───────────────────────────────────────────────────────────────────\n\n/** Keeps the cursor visible past the fade-right overlay while typing */\nconst addressBarScrollMargins = EditorView.scrollMargins.of(() => ({\n  right: 24,\n}))\n\n/** Animated background transform for the loading indicator */\nconst style = computed(() => ({\n  backgroundColor: `color-mix(in srgb, transparent 90%, ${getHttpMethodInfo(method).colorVar})`,\n  transform: `translate3d(-${percentage.value}%,0,0)`,\n}))\n\n/** Whether there is a path or method conflict */\nconst hasConflict = computed(() => methodConflict.value || pathConflict.value)\n\n/**\n * Placeholder for the path field.\n *\n * Webhooks have no server to prefix the path, so the field doubles as the full\n * destination URL. Hint that a complete URL (including the host) is expected,\n * rather than a bare path.\n */\nconst pathPlaceholder = computed(() => {\n  if (server) {\n    return ''\n  }\n  return isWebhook\n    ? translate('apiClient.addressBar.webhookUrlPlaceholder')\n    : translate('apiClient.addressBar.urlPlaceholder')\n})\n\n/** Whether either dropdown (server or history) is open */\nconst isDropdownOpen = computed(\n  () => isServerDropdownOpen.value || isHistoryDropdownOpen.value,\n)\n\n/** Uniquely identifies the currently selected operation + example */\nconst uniqueKey = computed(() =>\n  getOperationExampleKey(method, path, exampleKey, documentSlug),\n)\n\n/** Clear conflict state when switching to a different operation */\nwatch(uniqueKey, () => {\n  pathConflict.value = null\n  methodConflict.value = null\n})\n\n// ───────────────────────────────────────────────────────────────────\n// Focus helpers\n// ───────────────────────────────────────────────────────────────────\n\nconst handleFocusSendButton = (): void => {\n  const desktop = sendButtonRef.value?.$el\n  const mobile = mobileSendButtonRef.value?.$el\n\n  // Focus whichever send button is currently visible\n  if (desktop && desktop.offsetParent !== null) {\n    desktop.focus()\n  } else {\n    mobile?.focus()\n  }\n}\n\nconst handleFocusAddressBar = (\n  payload: ApiReferenceEvents['ui:focus:address-bar'],\n): void => {\n  // On non-desktop layouts, if already focused we let the browser handle the\n  // native behavior (e.g. selecting the browser's own address bar).\n  if (addressBarRef.value?.isFocused && layout !== 'desktop') {\n    return\n  }\n\n  addressBarRef.value?.focus('end')\n\n  if (payload && 'clear' in payload && payload.clear) {\n    addressBarRef.value?.setCodeMirrorContent('')\n  }\n\n  if (payload && 'event' in payload) {\n    payload.event.preventDefault()\n  }\n}\n\n// ───────────────────────────────────────────────────────────────────\n// Path masking\n//\n// Drafts on `/` and auto-generated `/_scalar_temp...` paths are internal\n// placeholders — the address bar focuses and clears on mount and on\n// navigation so the user sees a blank prompt instead of the internal\n// path. The deferred mask only clears when CodeMirror still contains that\n// placeholder path, so a user edit that lands before the frame is preserved.\n// ───────────────────────────────────────────────────────────────────\n\nusePathMasking({\n  isReady: () => addressBarRef.value?.codeMirror,\n  operationKey: () => uniqueKey.value,\n  shouldMask: () => isPlaceholderPath(path, documentSlug),\n  // Defer to the next frame so focus() runs after click-handler side\n  // effects that move focus (e.g. a dropdown refocusing its trigger),\n  // which would otherwise blur our input and emit a spurious path\n  // update against the now-empty value.\n  onMask: () =>\n    requestAnimationFrame(() => {\n      const editorContent =\n        addressBarRef.value?.codeMirror?.state.doc.toString()\n\n      if (editorContent && editorContent !== path) {\n        return\n      }\n\n      handleFocusAddressBar({ clear: true })\n    }),\n})\n\n// ───────────────────────────────────────────────────────────────────\n// Server extraction\n// ───────────────────────────────────────────────────────────────────\n\n/** If the path contains a server URL, extract it and select or add that server */\nconst extractAndSelectServer = (targetPath: string): string => {\n  const extracted = extractServerFromPath(targetPath)\n  if (!extracted) {\n    return targetPath\n  }\n\n  const [url, remainingPath] = extracted\n\n  // Server is already selected — nothing to do\n  if (url === server?.url) {\n    return remainingPath\n  }\n\n  const matchingServer = servers.find((s) => s.url === url)\n  if (matchingServer) {\n    eventBus.emit('server:update:selected', { url, meta: serverMeta })\n  } else {\n    eventBus.emit('server:add:server', {\n      url,\n      select: true,\n      meta: { type: 'operation', path, method },\n    })\n  }\n\n  return remainingPath\n}\n\n// ───────────────────────────────────────────────────────────────────\n// Path / method updates\n// ───────────────────────────────────────────────────────────────────\n\nconst normalizePath = (value: string): string =>\n  value.startsWith('/') ? value : `/${value}`\n\n/** Emit a path/method update and reconcile conflicts + cursor state on the result */\nconst emitPathMethodUpdate = (\n  targetMethod: string,\n  targetPath: string,\n  blurTargetSelector: string | null = null,\n): void => {\n  if (isWebhook) {\n    // A webhook has no OpenAPI server, so the field holds the full destination\n    // URL. Keep exactly what the user entered — do not split it into an invisible\n    // server plus a leftover path, and do not force a leading slash. That split\n    // is what made a typed URL collapse to a stray \"/\" on blur.\n    const webhookUrl = targetPath.trim()\n    addressBarRef.value?.setCodeMirrorContent(webhookUrl)\n    emit('update:webhook-url', webhookUrl)\n    methodConflict.value = null\n    pathConflict.value = null\n    nextTick(() => refocusBlurTarget(blurTargetSelector))\n    return\n  }\n\n  const extractedPath = extractAndSelectServer(targetPath)\n  const normalizedPath = normalizePath(extractedPath)\n\n  // Keep CodeMirror in sync so a conflict does not leave a stale value on screen\n  addressBarRef.value?.setCodeMirrorContent(normalizedPath)\n\n  eventBus.emit('operation:update:pathMethod', {\n    meta: { method, path },\n    blurTargetSelector,\n    payload: { method: targetMethod, path: normalizedPath },\n    callback: (status, returnedSelector) => {\n      if (status === 'success' || status === 'no-change') {\n        methodConflict.value = null\n        pathConflict.value = null\n      } else if (status === 'conflict') {\n        if (targetMethod !== method) {\n          methodConflict.value = targetMethod\n        }\n        if (normalizedPath !== path) {\n          pathConflict.value = normalizedPath\n        }\n\n        return\n      }\n\n      // Edge case: pasting a full URL extracts the server but leaves the path\n      // unchanged. CodeMirror still shows the full URL, so force it back to\n      // just the path.\n      const mirrorContent = addressBarRef.value?.codeMirrorRef?.textContent\n      if (\n        status === 'no-change' &&\n        mirrorContent &&\n        mirrorContent !== extractedPath\n      ) {\n        addressBarRef.value?.setCodeMirrorContent(extractedPath)\n      }\n\n      nextTick(() => refocusBlurTarget(returnedSelector))\n    },\n  })\n}\n\n/** Change the operation's method, preferring the conflicting path if present */\nconst handleMethodChange = (newMethod: string): void =>\n  emitPathMethodUpdate(newMethod, pathConflict.value ?? path)\n\n/**\n * Save the path on blur and replay the click that caused the blur (so e.g. a\n * click on the Send button still fires after the async update resolves).\n *\n * Tab-outs do not replay — tabbing to a button should not trigger its click\n * (`tabbedOut` is set on `@keydown.tab`).\n *\n * Programmatic focus moves also do not replay. On first navigation into a\n * draft operation, `usePathMasking` focuses and clears the address bar while\n * `ScalarSidebarNestedItems` focuses the drilled-in Back button in\n * `nextTick`. That steals focus from CodeMirror, fires blur with a\n * `relatedTarget` (the Back button), and without a guard we would treat it\n * like a user click: capture the selector, then `refocusBlurTarget` would\n * synthesize `.click()` on Back and navigate away.\n *\n * `FocusEvent.sourceCapabilities` is null when no input device caused the\n * focus change (e.g. `element.focus()`). A real pointer click sets it on the\n * blur that precedes the click, so we still replay Send and other buttons.\n */\nconst handlePathBlur = (newPath: string, event: FocusEvent): void => {\n  const relatedTarget =\n    event.relatedTarget instanceof Element ? event.relatedTarget : null\n  const blurTargetSelector =\n    tabbedOut.value ||\n    ('sourceCapabilities' in event && event.sourceCapabilities === null)\n      ? null\n      : getSelector(relatedTarget)\n  tabbedOut.value = false\n\n  emitPathMethodUpdate(\n    methodConflict.value ?? method,\n    newPath,\n    blurTargetSelector,\n  )\n}\n\n/** Save the path on Enter and trigger the Send button after the update resolves */\nconst handlePathSubmit = (\n  newPath: string,\n  event: KeyboardEvent | FocusEvent,\n): void => {\n  // Prevent the global hotkey listener from also handling this Enter press\n  event.stopPropagation()\n\n  emitPathMethodUpdate(\n    methodConflict.value ?? method,\n    newPath,\n    '[data-addressbar-action=\"send\"]',\n  )\n}\n\n/** Unset the server when backspace is pressed on an empty path */\nconst handlePathBackspace = (event: KeyboardEvent): void => {\n  if (event.target instanceof HTMLElement && event.target.innerText === '\\n') {\n    // A webhook has no server to unset; its full URL lives in the field itself.\n    if (isWebhook) {\n      return\n    }\n    eventBus.emit('server:update:selected', { url: '', meta: serverMeta })\n  }\n}\n\nconst handleServerSelect = (\n  payload: ApiReferenceEvents['server:update:selected'],\n): void => {\n  eventBus.emit('server:update:selected', payload)\n}\n\nconst handleServerVariable = (\n  payload: ApiReferenceEvents['server:update:variables'],\n): void => {\n  eventBus.emit('server:update:variables', payload)\n}\n\n/** Address bar copy is handled in OperationBlock (same URL as Send). */\nconst requestCopyUrl = (): void => {\n  eventBus.emit('copy-url:address-bar')\n}\n\n// ───────────────────────────────────────────────────────────────────\n// Navigation\n// ───────────────────────────────────────────────────────────────────\n\nconst navigateToServersPage = (): void => {\n  if (serverMeta.type === 'operation') {\n    eventBus.emit('ui:navigate', {\n      page: 'operation',\n      path: 'servers',\n      operationPath: serverMeta.path,\n      method: serverMeta.method,\n    })\n    return\n  }\n\n  eventBus.emit('ui:navigate', { page: 'document', path: 'servers' })\n}\n\n// ───────────────────────────────────────────────────────────────────\n// Lifecycle\n// ───────────────────────────────────────────────────────────────────\n\nconst unsubscribes: Array<() => void> = []\n\nonMounted(() => {\n  unsubscribes.push(\n    eventBus.on('ui:focus:address-bar', handleFocusAddressBar),\n    eventBus.on('ui:focus:send-button', handleFocusSendButton),\n    eventBus.on('hooks:on:request:sent', startLoading),\n    eventBus.on('hooks:on:request:complete', stopLoading),\n  )\n})\n\nonBeforeUnmount(() => {\n  for (const unsubscribe of unsubscribes) {\n    unsubscribe()\n  }\n\n  // Prevents the loading animation from continuing after unmount\n  stopLoading()\n})\n\ndefineExpose({\n  methodConflict,\n  pathConflict,\n})\n</script>\n<template>\n  <!--\n    Address bar.\n\n    The wide-container layout matches the original single-row bar:\n    `[Method | URL | Copy | History | Send]`. When the surrounding\n    `@container` drops below `@3xl` the bar collapses to\n    `[URL | History]` and a second row appears beneath it with a\n    duplicate `Method`, `Copy`, and `Send` so the URL gets the full\n    container width while every action stays on the same line as the\n    send button.\n  -->\n  <div\n    class=\"order-last flex h-auto w-full max-w-3xl grow-3 flex-wrap items-stretch [--scalar-address-bar-height:32px] @3xl:order-0 @3xl:flex-nowrap\">\n    <!-- Address Bar -->\n    <div\n      :id=\"id\"\n      class=\"address-bar-bg-states text-xxs group relative flex h-(--scalar-address-bar-height) w-full flex-1 flex-row items-stretch rounded-lg p-0.75\"\n      :class=\"{\n        'outline-c-danger outline': hasConflict,\n        'rounded-b-none': isDropdownOpen,\n      }\">\n      <div\n        class=\"pointer-events-none absolute top-0 left-0 block h-full w-full overflow-hidden rounded-lg border\"\n        :class=\"{\n          'rounded-b-none': isDropdownOpen,\n        }\">\n        <div\n          class=\"absolute top-0 left-0 h-full w-full\"\n          :style />\n      </div>\n\n      <!--\n        Method, Copy, and Send are hidden in mobile mode (container\n        narrower than `@3xl`) and the duplicate buttons in the trailing\n        mobile actions row take over at that point.\n      -->\n      <div class=\"hidden @3xl:flex\">\n        <HttpMethod\n          :isEditable=\"layout !== 'modal' && !isWebhook\"\n          isSquare\n          :method=\"methodConflict ?? method\"\n          teleport\n          @change=\"handleMethodChange\" />\n      </div>\n\n      <div\n        class=\"scroll-timeline-x scroll-timeline-x-hidden relative flex w-full bg-blend-normal\"\n        dir=\"ltr\">\n        <!-- Servers -->\n        <ServerDropdown\n          v-if=\"servers.length\"\n          :layout=\"isWebhook ? 'modal' : layout\"\n          :meta=\"serverMeta\"\n          :server=\"server\"\n          :servers=\"servers\"\n          :target=\"id\"\n          @update:open=\"(value) => (isServerDropdownOpen = value)\"\n          @update:selectedServer=\"handleServerSelect\"\n          @update:servers=\"navigateToServersPage\"\n          @update:variable=\"handleServerVariable\" />\n\n        <!-- Path + URL + env vars -->\n        <CodeInput\n          ref=\"addressBarRef\"\n          alwaysEmitChange\n          :aria-label=\"translate('apiClient.addressBar.path')\"\n          class=\"ml-1 min-w-fit pl-px outline-none\"\n          disableCloseBrackets\n          :disabled=\"layout === 'modal' && !isWebhook\"\n          disableEnter\n          disableTabIndent\n          :emitOnBlur=\"false\"\n          :environment=\"environment\"\n          :extensions=\"[addressBarScrollMargins]\"\n          importCurl\n          :layout=\"layout\"\n          :modelValue=\"path\"\n          :placeholder=\"pathPlaceholder\"\n          server\n          @blur=\"handlePathBlur\"\n          @keydown.delete=\"handlePathBackspace\"\n          @keydown.tab=\"tabbedOut = true\"\n          @submit=\"handlePathSubmit\" />\n      </div>\n\n      <!-- Copy url button -->\n      <ScalarButton\n        class=\"hover:bg-b-3 mx-1 hidden @3xl:flex\"\n        size=\"xs\"\n        variant=\"ghost\"\n        @click=\"requestCopyUrl\">\n        <ScalarIconCopy />\n        <span class=\"sr-only\">{{\n          translate('apiClient.addressBar.copyUrl')\n        }}</span>\n      </ScalarButton>\n\n      <AddressBarHistory\n        :history=\"history\"\n        :target=\"id\"\n        @select:history:item=\"(payload) => emit('select:history:item', payload)\"\n        @update:open=\"(value) => (isHistoryDropdownOpen = value)\" />\n      <!-- Error message -->\n      <div\n        v-if=\"hasConflict\"\n        class=\"z-context absolute inset-x-0 top-[calc(100%+4px)] flex flex-col items-center rounded px-6\">\n        <div\n          class=\"text-c-danger bg-b-danger border-c-danger flex items-center gap-1 rounded border p-1\">\n          <ScalarIconWarningCircle size=\"sm\" />\n          <div class=\"min-w-0 flex-1\">\n            {{\n              translate('apiClient.addressBar.duplicateRequest', {\n                method: (methodConflict ?? method).toUpperCase(),\n                path: pathConflict ?? path,\n              })\n            }}\n          </div>\n        </div>\n      </div>\n\n      <ScalarButton\n        ref=\"sendButtonRef\"\n        class=\"relative hidden h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold @3xl:flex\"\n        data-addressbar-action=\"send\"\n        :disabled=\"isLoading || executionDisabled\"\n        @click=\"emit('execute')\">\n        <span\n          aria-hidden=\"true\"\n          class=\"inline-flex items-center gap-1\">\n          <ScalarIcon\n            class=\"relative shrink-0 fill-current\"\n            icon=\"Play\"\n            size=\"xs\" />\n          <span class=\"text-xxs flex\">{{\n            translate('apiClient.addressBar.send')\n          }}</span>\n        </span>\n        <span class=\"sr-only\"\n          >{{\n            translate('apiClient.addressBar.sendRequest', {\n              method,\n              url: `${server?.url ?? ''}${path}`,\n            })\n          }}\n        </span>\n      </ScalarButton>\n    </div>\n\n    <!--\n      Mobile actions row. Visible by default and hidden once the\n      container reaches `@3xl`, where the duplicate Method / Copy /\n      Send buttons move back into the bar itself.\n    -->\n    <div\n      class=\"mt-2 flex h-(--scalar-address-bar-height) w-full items-stretch gap-1 @3xl:hidden\">\n      <HttpMethod\n        :isEditable=\"layout !== 'modal' && !isWebhook\"\n        isSquare\n        :method=\"methodConflict ?? method\"\n        teleport\n        @change=\"handleMethodChange\" />\n      <ScalarButton\n        class=\"hover:bg-b-3 ml-auto\"\n        size=\"xs\"\n        variant=\"ghost\"\n        @click=\"requestCopyUrl\">\n        <ScalarIconCopy />\n        <span class=\"sr-only\">{{\n          translate('apiClient.addressBar.copyUrl')\n        }}</span>\n      </ScalarButton>\n      <ScalarButton\n        ref=\"mobileSendButtonRef\"\n        class=\"relative h-auto shrink-0 overflow-hidden py-1 pr-2.5 pl-2 font-bold\"\n        data-addressbar-action=\"send\"\n        :disabled=\"isLoading || executionDisabled\"\n        @click=\"emit('execute')\">\n        <span\n          aria-hidden=\"true\"\n          class=\"inline-flex items-center gap-1\">\n          <ScalarIcon\n            class=\"relative shrink-0 fill-current\"\n            icon=\"Play\"\n            size=\"xs\" />\n          <span class=\"text-xxs\">{{\n            translate('apiClient.addressBar.send')\n          }}</span>\n        </span>\n        <span class=\"sr-only\"\n          >{{\n            translate('apiClient.addressBar.sendRequest', {\n              method,\n              url: `${server?.url ?? ''}${path}`,\n            })\n          }}\n        </span>\n      </ScalarButton>\n    </div>\n  </div>\n</template>\n<style scoped>\n:deep(.cm-editor) {\n  height: 100%;\n  outline: none;\n  width: 100%;\n}\n:deep(.cm-line) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  padding: 0;\n  display: flex;\n  align-items: center;\n  font-size: var(--scalar-small);\n}\n.scroll-timeline-x {\n  -ms-overflow-style: none;\n  /* Fade the URL at the viewport edges. Mask lives on the scrollport (this\n     element) rather than on `.cm-scroller`, whose width follows the URL's\n     full content and pushes the right edge off-screen when overflowing. */\n  mask-image: linear-gradient(\n    to right,\n    transparent 0,\n    black 6px,\n    black calc(100% - 24px),\n    transparent 100%\n  );\n}\n.scroll-timeline-x-hidden {\n  overflow-x: auto;\n}\n.scroll-timeline-x-hidden :deep(.cm-scroller) {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  padding-right: 20px;\n  overflow: auto;\n}\n.scroll-timeline-x-hidden::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.scroll-timeline-x-hidden :deep(.cm-scroller::-webkit-scrollbar) {\n  width: 0;\n  height: 0;\n  display: none;\n}\n.scroll-timeline-x-address {\n  line-height: 27px;\n  scrollbar-width: none; /* Firefox */\n}\n/* make clickable are to left of send button */\n.scroll-timeline-x-address:after {\n  content: '';\n  position: absolute;\n  height: 100%;\n  width: 24px;\n  right: 0;\n  cursor: text;\n}\n\n.address-bar-bg-states {\n  --scalar-address-bar-bg: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  background: var(--scalar-address-bar-bg);\n}\n.address-bar-bg-states:has(.cm-focused) {\n  --scalar-address-bar-bg: var(--scalar-background-1);\n  border-color: var(--scalar-border-color);\n  outline-width: 1px;\n  outline-style: solid;\n}\n.address-bar-bg-states:has(.cm-focused) .fade-left,\n.address-bar-bg-states:has(.cm-focused) .fade-right {\n  --scalar-address-bar-bg: var(--scalar-background-1);\n}\n</style>\n"],"mappings":"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"}

package/dist/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue.d.ts

@@ -1,4 +1,3 @@
-import type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods';
 type __VLS_Props = {
     /** The id of the target to use for the popover (e.g. address bar) */
     target: string;
@@ -6,7 +5,7 @@ type __VLS_Props = {
     history: History[];
 };
 export type History = {
-    method: HttpMethodType;
+    method: string;
     path: string;
     duration: number;
     status: number;

package/dist/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddressBarHistory.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue"],"names":[],"mappings":"AA0HA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAA;AASrF,KAAK,WAAW,GAAG;IACjB,qEAAqE;IACrE,MAAM,EAAE,MAAM,CAAA;IACd,wCAAwC;IACxC,OAAO,EAAE,OAAO,EAAE,CAAA;CACnB,CAAC;AAcF,MAAM,MAAM,OAAO,GAAG;IACpB,MAAM,EAAE,cAAc,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAsRD,QAAA,MAAM,YAAY;;;eAnS6B,MAAM;;;;;eAAN,MAAM;;kFAsSnD,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"AddressBarHistory.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue"],"names":[],"mappings":"AAiIA,KAAK,WAAW,GAAG;IACjB,qEAAqE;IACrE,MAAM,EAAE,MAAM,CAAA;IACd,wCAAwC;IACxC,OAAO,EAAE,OAAO,EAAE,CAAA;CACnB,CAAC;AAcF,MAAM,MAAM,OAAO,GAAG;IACpB,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAsRD,QAAA,MAAM,YAAY;;;eAnS6B,MAAM;;;;;eAAN,MAAM;;kFAsSnD,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue.js

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../../../_virtual/_plugin-vue_
 import AddressBarHistory_vue_vue_type_script_setup_true_lang_default from "./AddressBarHistory.vue.script.js";
 /* empty css                                */
 //#region src/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue
-var AddressBarHistory_default = /*#__PURE__*/ _plugin_vue_export_helper_default(AddressBarHistory_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-36f5ec26"]]);
+var AddressBarHistory_default = /*#__PURE__*/ _plugin_vue_export_helper_default(AddressBarHistory_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a54819b1"]]);
 //#endregion
 export { AddressBarHistory_default as default };
 

package/dist/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressBarHistory.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'\nimport {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n} from '@scalar/components/floating'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { formatMilliseconds } from '@scalar/helpers/formatters/format-milliseconds'\nimport type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { httpStatusCodes } from '@scalar/helpers/http/http-status-codes'\n\nimport { HttpMethod } from '@/components/HttpMethod'\nimport ValueEmitter from '@/v2/components/layout/ValueEmitter.vue'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport { getStatusCodeColor } from './httpStatusCodeColors'\n\nconst { target } = defineProps<{\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n  /** List of all request history items */\n  history: History[]\n}>()\n\nconst emits = defineEmits<{\n  /** Select a request history item by index */\n  (e: 'select:history:item', payload: { index: number }): void\n  /** Update the open state of the history popover */\n  (e: 'update:open', value: boolean): void\n}>()\n\nconst { translate } = useLocalization()\n\nexport type History = {\n  method: HttpMethodType\n  path: string\n  duration: number\n  status: number\n}\n</script>\n<template>\n  <Menu\n    v-slot=\"{ open }\"\n    as=\"div\">\n    <!-- Emit the slot value back out the parent -->\n    <ValueEmitter\n      :value=\"open\"\n      @change=\"(value) => emits('update:open', value)\"\n      @unmount=\"emits('update:open', false)\" />\n\n    <ScalarFloating\n      :offset=\"0\"\n      resize\n      :target=\"target\">\n      <!-- History -->\n      <MenuButton\n        v-if=\"history.length\"\n        class=\"address-bar-history-button text-c-3 focus:text-c-1 relative mr-1 rounded-lg p-1.5\">\n        <ScalarIcon\n          icon=\"History\"\n          size=\"sm\"\n          thickness=\"2.25\" />\n        <span class=\"sr-only\">{{\n          translate('apiClient.addressBarHistory.requestHistory')\n        }}</span>\n      </MenuButton>\n      <!-- History shadow and placement-->\n      <template\n        v-if=\"open\"\n        #floating=\"{ width }\">\n        <!-- History Item -->\n        <MenuItems\n          class=\"custom-scroll grid max-h-[inherit] grid-cols-[44px_1fr_repeat(3,auto)] items-center p-0.75\"\n          static\n          :style=\"{ width }\">\n          <MenuItem\n            v-for=\"(entry, index) in history\"\n            :key=\"index\"\n            as=\"button\"\n            class=\"font-code ui-active:*:bg-b-2 text-c-2 contents text-sm font-medium *:flex *:h-8 *:cursor-pointer *:items-center *:rounded-none *:px-1.5 *:first:rounded-l *:last:rounded-r\"\n            :value=\"index\"\n            @click=\"emits('select:history:item', { index })\">\n            <HttpMethod\n              class=\"text-[11px]\"\n              :method=\"entry.method\" />\n            <div class=\"min-w-0\">\n              <div class=\"text-c-1 min-w-0 truncate\">\n                {{ entry.path }}\n              </div>\n            </div>\n            <div>{{ formatMilliseconds(entry.duration) }}</div>\n            <div :class=\"[getStatusCodeColor(entry.status).color]\">\n              {{ entry.status }}\n            </div>\n            <div>\n              {{ httpStatusCodes[entry.status]?.name }}\n            </div>\n          </MenuItem>\n        </MenuItems>\n        <ScalarFloatingBackdrop class=\"inset-x-px rounded-none rounded-b-lg\" />\n      </template>\n    </ScalarFloating>\n  </Menu>\n</template>\n<style scoped>\n.address-bar-history-button:hover {\n  background: var(--scalar-background-3);\n}\n.address-bar-history-button:focus-within {\n  background: var(--scalar-background-2);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"AddressBarHistory.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'\nimport {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n} from '@scalar/components/floating'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { formatMilliseconds } from '@scalar/helpers/formatters/format-milliseconds'\nimport { httpStatusCodes } from '@scalar/helpers/http/http-status-codes'\n\nimport { HttpMethod } from '@/components/HttpMethod'\nimport ValueEmitter from '@/v2/components/layout/ValueEmitter.vue'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport { getStatusCodeColor } from './httpStatusCodeColors'\n\nconst { target } = defineProps<{\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n  /** List of all request history items */\n  history: History[]\n}>()\n\nconst emits = defineEmits<{\n  /** Select a request history item by index */\n  (e: 'select:history:item', payload: { index: number }): void\n  /** Update the open state of the history popover */\n  (e: 'update:open', value: boolean): void\n}>()\n\nconst { translate } = useLocalization()\n\nexport type History = {\n  method: string\n  path: string\n  duration: number\n  status: number\n}\n</script>\n<template>\n  <Menu\n    v-slot=\"{ open }\"\n    as=\"div\">\n    <!-- Emit the slot value back out the parent -->\n    <ValueEmitter\n      :value=\"open\"\n      @change=\"(value) => emits('update:open', value)\"\n      @unmount=\"emits('update:open', false)\" />\n\n    <ScalarFloating\n      :offset=\"0\"\n      resize\n      :target=\"target\">\n      <!-- History -->\n      <MenuButton\n        v-if=\"history.length\"\n        class=\"address-bar-history-button text-c-3 focus:text-c-1 relative mr-1 rounded-lg p-1.5\">\n        <ScalarIcon\n          icon=\"History\"\n          size=\"sm\"\n          thickness=\"2.25\" />\n        <span class=\"sr-only\">{{\n          translate('apiClient.addressBarHistory.requestHistory')\n        }}</span>\n      </MenuButton>\n      <!-- History shadow and placement-->\n      <template\n        v-if=\"open\"\n        #floating=\"{ width }\">\n        <!-- History Item -->\n        <MenuItems\n          class=\"custom-scroll grid max-h-[inherit] grid-cols-[44px_1fr_repeat(3,auto)] items-center p-0.75\"\n          static\n          :style=\"{ width }\">\n          <MenuItem\n            v-for=\"(entry, index) in history\"\n            :key=\"index\"\n            as=\"button\"\n            class=\"font-code ui-active:*:bg-b-2 text-c-2 contents text-sm font-medium *:flex *:h-8 *:cursor-pointer *:items-center *:rounded-none *:px-1.5 *:first:rounded-l *:last:rounded-r\"\n            :value=\"index\"\n            @click=\"emits('select:history:item', { index })\">\n            <HttpMethod\n              class=\"text-[11px]\"\n              :method=\"entry.method\" />\n            <div class=\"min-w-0\">\n              <div class=\"text-c-1 min-w-0 truncate\">\n                {{ entry.path }}\n              </div>\n            </div>\n            <div>{{ formatMilliseconds(entry.duration) }}</div>\n            <div :class=\"[getStatusCodeColor(entry.status).color]\">\n              {{ entry.status }}\n            </div>\n            <div>\n              {{ httpStatusCodes[entry.status]?.name }}\n            </div>\n          </MenuItem>\n        </MenuItems>\n        <ScalarFloatingBackdrop class=\"inset-x-px rounded-none rounded-b-lg\" />\n      </template>\n    </ScalarFloating>\n  </Menu>\n</template>\n<style scoped>\n.address-bar-history-button:hover {\n  background: var(--scalar-background-3);\n}\n.address-bar-history-button:focus-within {\n  background: var(--scalar-background-2);\n}\n</style>\n"],"mappings":""}

package/dist/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressBarHistory.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'\nimport {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n} from '@scalar/components/floating'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { formatMilliseconds } from '@scalar/helpers/formatters/format-milliseconds'\nimport type { HttpMethod as HttpMethodType } from '@scalar/helpers/http/http-methods'\nimport { httpStatusCodes } from '@scalar/helpers/http/http-status-codes'\n\nimport { HttpMethod } from '@/components/HttpMethod'\nimport ValueEmitter from '@/v2/components/layout/ValueEmitter.vue'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport { getStatusCodeColor } from './httpStatusCodeColors'\n\nconst { target } = defineProps<{\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n  /** List of all request history items */\n  history: History[]\n}>()\n\nconst emits = defineEmits<{\n  /** Select a request history item by index */\n  (e: 'select:history:item', payload: { index: number }): void\n  /** Update the open state of the history popover */\n  (e: 'update:open', value: boolean): void\n}>()\n\nconst { translate } = useLocalization()\n\nexport type History = {\n  method: HttpMethodType\n  path: string\n  duration: number\n  status: number\n}\n</script>\n<template>\n  <Menu\n    v-slot=\"{ open }\"\n    as=\"div\">\n    <!-- Emit the slot value back out the parent -->\n    <ValueEmitter\n      :value=\"open\"\n      @change=\"(value) => emits('update:open', value)\"\n      @unmount=\"emits('update:open', false)\" />\n\n    <ScalarFloating\n      :offset=\"0\"\n      resize\n      :target=\"target\">\n      <!-- History -->\n      <MenuButton\n        v-if=\"history.length\"\n        class=\"address-bar-history-button text-c-3 focus:text-c-1 relative mr-1 rounded-lg p-1.5\">\n        <ScalarIcon\n          icon=\"History\"\n          size=\"sm\"\n          thickness=\"2.25\" />\n        <span class=\"sr-only\">{{\n          translate('apiClient.addressBarHistory.requestHistory')\n        }}</span>\n      </MenuButton>\n      <!-- History shadow and placement-->\n      <template\n        v-if=\"open\"\n        #floating=\"{ width }\">\n        <!-- History Item -->\n        <MenuItems\n          class=\"custom-scroll grid max-h-[inherit] grid-cols-[44px_1fr_repeat(3,auto)] items-center p-0.75\"\n          static\n          :style=\"{ width }\">\n          <MenuItem\n            v-for=\"(entry, index) in history\"\n            :key=\"index\"\n            as=\"button\"\n            class=\"font-code ui-active:*:bg-b-2 text-c-2 contents text-sm font-medium *:flex *:h-8 *:cursor-pointer *:items-center *:rounded-none *:px-1.5 *:first:rounded-l *:last:rounded-r\"\n            :value=\"index\"\n            @click=\"emits('select:history:item', { index })\">\n            <HttpMethod\n              class=\"text-[11px]\"\n              :method=\"entry.method\" />\n            <div class=\"min-w-0\">\n              <div class=\"text-c-1 min-w-0 truncate\">\n                {{ entry.path }}\n              </div>\n            </div>\n            <div>{{ formatMilliseconds(entry.duration) }}</div>\n            <div :class=\"[getStatusCodeColor(entry.status).color]\">\n              {{ entry.status }}\n            </div>\n            <div>\n              {{ httpStatusCodes[entry.status]?.name }}\n            </div>\n          </MenuItem>\n        </MenuItems>\n        <ScalarFloatingBackdrop class=\"inset-x-px rounded-none rounded-b-lg\" />\n      </template>\n    </ScalarFloating>\n  </Menu>\n</template>\n<style scoped>\n.address-bar-history-button:hover {\n  background: var(--scalar-background-3);\n}\n.address-bar-history-button:focus-within {\n  background: var(--scalar-background-2);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAwBA,MAAM,QAAQ;EAOd,MAAM,EAAE,cAAc,gBAAgB;;uBAUpC,YA6DO,MAAA,IAAA,GAAA,EA3DL,IAAG,MAAK,GAAA;sBAKmC,EANjC,WAAI,CAGd,YAG2C,sBAAA;KAFxC,OAAO;KACP,UAAM,OAAA,OAAA,OAAA,MAAG,UAAU,MAAK,eAAgB,KAAK;KAC7C,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,MAAK,eAAA,KAAA;4BAEjB,YAmDiB,MAAA,cAAA,GAAA;KAlDd,QAAQ;KACT,QAAA;KACC,QAAQ,QAAA;;4BAYI,CATL,QAAA,QAAQ,UAAA,UAAA,GADhB,YAUa,MAAA,UAAA,GAAA;;MARX,OAAM;;6BAIe,CAHrB,YAGqB,MAAA,UAAA,GAAA;OAFnB,MAAK;OACL,MAAK;OACL,WAAU;UACZ,mBAES,QAFT,YAES,gBADP,MAAA,SAAA,CAAS,CAAA,4CAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;;;QAKL,OAAA;WACL;kBA6BW,EA7BC,YAAK,CAElB,YA2BY,MAAA,SAAA,GAAA;MA1BV,OAAM;MACN,QAAA;MACC,OAAK,eAAA,EAAI,MAAK,CAAA;;6BAEoB,EAAA,UAAA,IAAA,GADnC,mBAsBW,UAAA,MAAA,WArBgB,QAAA,UAAjB,OAAO,UAAK;2BADtB,YAsBW,MAAA,QAAA,GAAA;QApBR,KAAK;QACN,IAAG;QACH,OAAM;QACL,OAAO;QACP,UAAK,WAAE,MAAK,uBAAA,EAA0B,MAAK,CAAA;;+BAGjB;SAF3B,YAE2B,MAAA,kBAAA,GAAA;UADzB,OAAM;UACL,QAAQ,MAAM;;SACjB,mBAIM,OAJN,YAIM,CAHJ,mBAEM,OAFN,YAEM,gBADD,MAAM,IAAI,GAAA,CAAA,CAAA,CAAA;SAGjB,mBAAmD,OAAA,MAAA,gBAA3C,MAAA,kBAAA,CAAkB,CAAC,MAAM,QAAQ,CAAA,GAAA,CAAA;SACzC,mBAEM,OAAA,EAFA,OAAK,eAAA,CAAG,MAAA,kBAAA,CAAkB,CAAC,MAAM,MAAM,CAAA,CAAE,KAAK,CAAA,EAAA,GAAA,gBAC/C,MAAM,MAAM,GAAA,CAAA;SAEjB,mBAEM,OAAA,MAAA,gBADD,MAAA,eAAA,CAAe,CAAC,MAAM,OAAM,EAAG,IAAI,GAAA,CAAA;;;;;;uBAI5C,YAAuE,MAAA,sBAAA,GAAA,EAA/C,OAAM,uCAAsC,CAAA,CAAA,CAAA"}
+{"version":3,"file":"AddressBarHistory.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-address-bar-block/components/AddressBarHistory.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'\nimport {\n  ScalarFloating,\n  ScalarFloatingBackdrop,\n} from '@scalar/components/floating'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { formatMilliseconds } from '@scalar/helpers/formatters/format-milliseconds'\nimport { httpStatusCodes } from '@scalar/helpers/http/http-status-codes'\n\nimport { HttpMethod } from '@/components/HttpMethod'\nimport ValueEmitter from '@/v2/components/layout/ValueEmitter.vue'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport { getStatusCodeColor } from './httpStatusCodeColors'\n\nconst { target } = defineProps<{\n  /** The id of the target to use for the popover (e.g. address bar) */\n  target: string\n  /** List of all request history items */\n  history: History[]\n}>()\n\nconst emits = defineEmits<{\n  /** Select a request history item by index */\n  (e: 'select:history:item', payload: { index: number }): void\n  /** Update the open state of the history popover */\n  (e: 'update:open', value: boolean): void\n}>()\n\nconst { translate } = useLocalization()\n\nexport type History = {\n  method: string\n  path: string\n  duration: number\n  status: number\n}\n</script>\n<template>\n  <Menu\n    v-slot=\"{ open }\"\n    as=\"div\">\n    <!-- Emit the slot value back out the parent -->\n    <ValueEmitter\n      :value=\"open\"\n      @change=\"(value) => emits('update:open', value)\"\n      @unmount=\"emits('update:open', false)\" />\n\n    <ScalarFloating\n      :offset=\"0\"\n      resize\n      :target=\"target\">\n      <!-- History -->\n      <MenuButton\n        v-if=\"history.length\"\n        class=\"address-bar-history-button text-c-3 focus:text-c-1 relative mr-1 rounded-lg p-1.5\">\n        <ScalarIcon\n          icon=\"History\"\n          size=\"sm\"\n          thickness=\"2.25\" />\n        <span class=\"sr-only\">{{\n          translate('apiClient.addressBarHistory.requestHistory')\n        }}</span>\n      </MenuButton>\n      <!-- History shadow and placement-->\n      <template\n        v-if=\"open\"\n        #floating=\"{ width }\">\n        <!-- History Item -->\n        <MenuItems\n          class=\"custom-scroll grid max-h-[inherit] grid-cols-[44px_1fr_repeat(3,auto)] items-center p-0.75\"\n          static\n          :style=\"{ width }\">\n          <MenuItem\n            v-for=\"(entry, index) in history\"\n            :key=\"index\"\n            as=\"button\"\n            class=\"font-code ui-active:*:bg-b-2 text-c-2 contents text-sm font-medium *:flex *:h-8 *:cursor-pointer *:items-center *:rounded-none *:px-1.5 *:first:rounded-l *:last:rounded-r\"\n            :value=\"index\"\n            @click=\"emits('select:history:item', { index })\">\n            <HttpMethod\n              class=\"text-[11px]\"\n              :method=\"entry.method\" />\n            <div class=\"min-w-0\">\n              <div class=\"text-c-1 min-w-0 truncate\">\n                {{ entry.path }}\n              </div>\n            </div>\n            <div>{{ formatMilliseconds(entry.duration) }}</div>\n            <div :class=\"[getStatusCodeColor(entry.status).color]\">\n              {{ entry.status }}\n            </div>\n            <div>\n              {{ httpStatusCodes[entry.status]?.name }}\n            </div>\n          </MenuItem>\n        </MenuItems>\n        <ScalarFloatingBackdrop class=\"inset-x-px rounded-none rounded-b-lg\" />\n      </template>\n    </ScalarFloating>\n  </Menu>\n</template>\n<style scoped>\n.address-bar-history-button:hover {\n  background: var(--scalar-background-3);\n}\n.address-bar-history-button:focus-within {\n  background: var(--scalar-background-2);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ;EAOd,MAAM,EAAE,cAAc,gBAAgB;;uBAUpC,YA6DO,MAAA,IAAA,GAAA,EA3DL,IAAG,MAAK,GAAA;sBAKmC,EANjC,WAAI,CAGd,YAG2C,sBAAA;KAFxC,OAAO;KACP,UAAM,OAAA,OAAA,OAAA,MAAG,UAAU,MAAK,eAAgB,KAAK;KAC7C,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,MAAK,eAAA,KAAA;4BAEjB,YAmDiB,MAAA,cAAA,GAAA;KAlDd,QAAQ;KACT,QAAA;KACC,QAAQ,QAAA;;4BAYI,CATL,QAAA,QAAQ,UAAA,UAAA,GADhB,YAUa,MAAA,UAAA,GAAA;;MARX,OAAM;;6BAIe,CAHrB,YAGqB,MAAA,UAAA,GAAA;OAFnB,MAAK;OACL,MAAK;OACL,WAAU;UACZ,mBAES,QAFT,YAES,gBADP,MAAA,SAAA,CAAS,CAAA,4CAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;;;QAKL,OAAA;WACL;kBA6BW,EA7BC,YAAK,CAElB,YA2BY,MAAA,SAAA,GAAA;MA1BV,OAAM;MACN,QAAA;MACC,OAAK,eAAA,EAAI,MAAK,CAAA;;6BAEoB,EAAA,UAAA,IAAA,GADnC,mBAsBW,UAAA,MAAA,WArBgB,QAAA,UAAjB,OAAO,UAAK;2BADtB,YAsBW,MAAA,QAAA,GAAA;QApBR,KAAK;QACN,IAAG;QACH,OAAM;QACL,OAAO;QACP,UAAK,WAAE,MAAK,uBAAA,EAA0B,MAAK,CAAA;;+BAGjB;SAF3B,YAE2B,MAAA,kBAAA,GAAA;UADzB,OAAM;UACL,QAAQ,MAAM;;SACjB,mBAIM,OAJN,YAIM,CAHJ,mBAEM,OAFN,YAEM,gBADD,MAAM,IAAI,GAAA,CAAA,CAAA,CAAA;SAGjB,mBAAmD,OAAA,MAAA,gBAA3C,MAAA,kBAAA,CAAkB,CAAC,MAAM,QAAQ,CAAA,GAAA,CAAA;SACzC,mBAEM,OAAA,EAFA,OAAK,eAAA,CAAG,MAAA,kBAAA,CAAkB,CAAC,MAAM,MAAM,CAAA,CAAE,KAAK,CAAA,EAAA,GAAA,gBAC/C,MAAM,MAAM,GAAA,CAAA;SAEjB,mBAEM,OAAA,MAAA,gBADD,MAAA,eAAA,CAAe,CAAC,MAAM,OAAM,EAAG,IAAI,GAAA,CAAA;;;;;;uBAI5C,YAAuE,MAAA,sBAAA,GAAA,EAA/C,OAAM,uCAAsC,CAAA,CAAA,CAAA"}

package/dist/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OAuthScopesInput.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue"],"names":[],"mappings":"AAqYA,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EACjB,MAAM,8DAA8D,CAAA;AAYrE,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,MAAM,gBAAgB,CAAA;IAChC,IAAI,EAAE,SAAS,CAAA;IACf,cAAc,EAAE,MAAM,EAAE,CAAA;CACzB,CAAC;AAyvBF,QAAA,MAAM,YAAY;;iBAlvBM,MAAM,EAAE;gBAAU,MAAM;mBAAa,OAAO;;;;;;;;;;;;;;;;;iBAA5C,MAAM,EAAE;gBAAU,MAAM;mBAAa,OAAO;;;;;;;;;;;;;;;kFAqvBlE,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"OAuthScopesInput.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue"],"names":[],"mappings":"AA+YA,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EACjB,MAAM,8DAA8D,CAAA;AAYrE,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,MAAM,gBAAgB,CAAA;IAChC,IAAI,EAAE,SAAS,CAAA;IACf,cAAc,EAAE,MAAM,EAAE,CAAA;CACzB,CAAC;AA+vBF,QAAA,MAAM,YAAY;;iBAxvBM,MAAM,EAAE;gBAAU,MAAM;mBAAa,OAAO;;;;;;;;;;;;;;;;;iBAA5C,MAAM,EAAE;gBAAU,MAAM;mBAAa,OAAO;;;;;;;;;;;;;;;kFA2vBlE,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"OAuthScopesInput.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { useModal } from '@scalar/components/modal'\nimport { ScalarSearchInput } from '@scalar/components/search-input'\nimport { ScalarIconPencilSimple, ScalarIconTrash } from '@scalar/icons'\nimport type { ApiReferenceEvents } from '@scalar/workspace-store/events'\nimport type {\n  OAuthFlow,\n  OAuthFlowsObject,\n} from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport {\n  DataTableCell,\n  DataTableCheckbox,\n  DataTableRow,\n} from '@/v2/components/data-table'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport OAuthScopesAddModal from './OAuthScopesAddModal.vue'\n\nconst { selectedScopes, flow, flowType } = defineProps<{\n  flowType: keyof OAuthFlowsObject\n  flow: OAuthFlow\n  selectedScopes: string[]\n}>()\n\nconst emits = defineEmits<{\n  (\n    e: 'update:selectedScopes',\n    payload: { scopes?: string[]; scope?: string; selected?: boolean },\n  ): void\n  (\n    e: 'upsert:scope',\n    payload: Omit<ApiReferenceEvents['auth:upsert:scopes'], 'name'>,\n  ): void\n  (\n    e: 'delete:scope',\n    payload: Omit<ApiReferenceEvents['auth:delete:scopes'], 'name'>,\n  ): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst searchQuery = ref('')\n\n/**\n * The scope currently being edited, used to switch the shared modal into edit mode.\n * Null means the modal is in \"add\" mode.\n */\nconst editingScope = ref<{ name: string; description: string } | null>(null)\n\n/** List of all available scopes */\nconst scopes = computed(() =>\n  Object.entries(flow?.scopes ?? {}).map(([key, val]) => ({\n    id: key,\n    label: key,\n    description: val,\n  })),\n)\n\nconst scopeCount = computed(() => Object.keys(flow?.scopes ?? {}).length)\n\n/** Search is only useful once the list is long enough to scan */\nconst showScopeSearch = computed(() => scopeCount.value >= 10)\n\nconst filteredScopes = computed(() => {\n  const query = showScopeSearch.value ? searchQuery.value : ''\n  if (!query) {\n    return scopes.value\n  }\n\n  const regex = new RegExp(\n    query\n      .split('')\n      .map((c) => c.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'))\n      .join('.*'),\n    'i',\n  )\n\n  return scopes.value.filter(({ label, description }) =>\n    regex.test(`${label} ${description}`),\n  )\n})\n\nconst hasScopes = computed(() => Object.keys(flow?.scopes ?? {}).length > 0)\n\nconst allScopesSelected = computed(\n  () => selectedScopes.length === Object.keys(flow?.scopes ?? {}).length,\n)\n\nconst setScope = (scopeKey: string, checked: boolean) => {\n  // Emit a single-scope toggle rather than a freshly computed list. The store applies it\n  // against the currently selected scopes, so two quick clicks cannot overwrite each other\n  // with a list computed from a prop that has not updated yet.\n  emits('update:selectedScopes', { scope: scopeKey, selected: checked })\n}\n\n/** Select all scopes */\nconst selectAllScopes = () =>\n  emits('update:selectedScopes', { scopes: Object.keys(flow?.scopes ?? {}) })\n\n/** Deselect all scopes */\nconst deselectAllScopes = () => emits('update:selectedScopes', { scopes: [] })\n\nconst scopeFormModal = useModal()\n\n/**\n * Forces the Disclosure to remount with `defaultOpen` set so the panel auto-expands\n * the moment a brand-new scope is added. Bumping this counter is paired with toggling\n * `expandOnNextMount` so the remount opens the panel, then reverts to the default\n * closed-on-mount behavior for any future unrelated remounts (e.g. collapse on empty).\n *\n * The Disclosure `:key` is only this counter — not a separate `hasScopes` segment — so\n * adding the first scope does not remount twice (empty prefix → with-scopes prefix),\n * which would reopen with `defaultOpen=false` and collapse the panel right when rows appear.\n */\nconst remountKey = ref(0)\nconst expandOnNextMount = ref(false)\n\nwatch(hasScopes, (has, had) => {\n  if (had && !has) {\n    expandOnNextMount.value = false\n    remountKey.value += 1\n  }\n})\n\n/** Open the modal in \"add new scope\" mode */\nconst openAddScopeModal = () => {\n  editingScope.value = null\n  scopeFormModal.show()\n}\n\n/** Open the modal in \"edit scope\" mode prefilled with the chosen row */\nconst openEditScopeModal = (scope: { id: string; description: string }) => {\n  editingScope.value = {\n    name: scope.id,\n    description: scope.description ?? '',\n  }\n  scopeFormModal.show()\n}\n\n/**\n * Submit handler shared by Add Scope and Edit Scope. For renames, the `upsertScope` mutator on\n * the workspace store rewrites the selection state in place, so the component does not need to\n * emit a follow-up `update:selectedScopes`.\n *\n * When adding a brand-new scope (no `oldName`), the payload sets `enable: true` so the\n * `upsertScope` mutator also adds the new scope to any selection requirement that references\n * this scheme. The Disclosure is then remounted with `defaultOpen=true` so the user\n * immediately sees (and sees selected) the scope they just added.\n */\nconst handleScopeFormSubmit = async (payload: {\n  name: string\n  description: string\n  oldName?: string\n}) => {\n  const isAdd = !payload.oldName\n\n  emits('upsert:scope', {\n    scope: payload.name,\n    description: payload.description,\n    flowType,\n    ...(payload.oldName ? { oldScope: payload.oldName } : {}),\n    ...(isAdd ? { enable: true } : {}),\n  })\n\n  if (!isAdd) {\n    return\n  }\n\n  expandOnNextMount.value = true\n  remountKey.value += 1\n  // Reset after the remount so subsequent unrelated remounts (e.g. when the last\n  // scope is deleted) still default to a closed panel.\n  await nextTick()\n  expandOnNextMount.value = false\n}\n\n/**\n * Remove the scope from the flow. Selection cleanup (dropping the deleted key from any\n * currently-selected scopes) is handled by the `deleteScope` mutator on the workspace store,\n * so the component does not need to emit a follow-up `update:selectedScopes` here.\n */\nconst handleDeleteScope = (scopeKey: string) => {\n  emits('delete:scope', { scope: scopeKey, flowType })\n}\n</script>\n\n<template>\n  <DataTableCell class=\"h-auto !max-h-[initial] min-h-8 items-center\">\n    <div class=\"flex h-fit w-full\">\n      <div class=\"text-c-1 h-full items-center\"></div>\n      <Disclosure\n        :key=\"remountKey\"\n        as=\"div\"\n        class=\"bl flex w-full flex-col\"\n        :defaultOpen=\"expandOnNextMount\">\n        <!--\n          Keep Add Scope (and other actions) outside the summary DisclosureButton.\n          When there are no scopes the summary control is disabled; a native disabled\n          button blocks pointer events for all descendants, which would make Add Scope unusable.\n        -->\n        <div\n          class=\"group/scopes-accordion flex h-auto min-h-8 items-center gap-1.5 pr-2.25 pl-3 text-left\">\n          <DisclosureButton\n            :class=\"[\n              'min-w-0 flex-1 text-left',\n              hasScopes ? 'hover:text-c-1 cursor-pointer' : 'cursor-default',\n              (selectedScopes.length || 0) > 0 ? 'text-c-1' : 'text-c-3',\n            ]\"\n            :disabled=\"!hasScopes\">\n            <template v-if=\"hasScopes\">\n              {{\n                translate('apiClient.oauthScopesInput.selectedScopes', {\n                  count: selectedScopes.length,\n                  total: Object.keys(flow?.scopes ?? {}).length,\n                })\n              }}\n            </template>\n            <template v-else>\n              {{ translate('apiClient.oauthScopesInput.noScopesDefined') }}\n            </template>\n          </DisclosureButton>\n\n          <div class=\"flex shrink-0 items-center gap-1.75\">\n            <!-- Add new scope -->\n            <ScalarButton\n              class=\"pr-0.75 pl-1 transition-none\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click.stop=\"openAddScopeModal\">\n              {{ translate('apiClient.oauthScopesInput.addScope') }}\n            </ScalarButton>\n\n            <!-- Deselect All -->\n            <ScalarButton\n              v-if=\"hasScopes && allScopesSelected\"\n              class=\"pr-0.75 pl-1 transition-none\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click.stop=\"deselectAllScopes\">\n              {{ translate('apiClient.oauthScopesInput.deselectAll') }}\n            </ScalarButton>\n\n            <!-- Select All -->\n            <ScalarButton\n              v-if=\"hasScopes && !allScopesSelected\"\n              class=\"pr-0.75 pl-1 transition-none\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click.stop=\"selectAllScopes\">\n              {{ translate('apiClient.oauthScopesInput.selectAll') }}\n            </ScalarButton>\n\n            <DisclosureButton\n              v-if=\"hasScopes\"\n              v-slot=\"{ open }\"\n              class=\"text-c-3 hover:text-c-2 -m-0.5 flex shrink-0 items-center justify-center rounded p-0.5 focus-visible:outline-offset-2\">\n              <ScalarIcon\n                class=\"group-hover/scopes-accordion:text-c-2\"\n                :icon=\"open ? 'ChevronDown' : 'ChevronRight'\"\n                size=\"md\" />\n            </DisclosureButton>\n          </div>\n        </div>\n        <!-- Scopes List -->\n        <DisclosurePanel as=\"template\">\n          <div>\n            <ScalarSearchInput\n              v-if=\"showScopeSearch\"\n              v-model=\"searchQuery\"\n              class=\"flex items-center text-xs\" />\n            <table\n              class=\"grid max-h-40 auto-rows-auto overflow-x-hidden overflow-y-auto\"\n              :style=\"{ gridTemplateColumns: '1fr auto' }\">\n              <DataTableRow\n                v-for=\"{ id, label, description } in filteredScopes\"\n                :key=\"id\"\n                class=\"text-c-2 group/scope-row\"\n                @click=\"setScope(id, !selectedScopes.includes(id))\">\n                <DataTableCell\n                  class=\"box-border flex !max-h-[initial] w-full min-w-0 cursor-pointer items-stretch overflow-hidden px-0 py-0\">\n                  <!-- Text scrolls horizontally; action rail stays fixed -->\n                  <div\n                    class=\"no-scrollbar text-c-2 group-hover/scope-row:text-c-1 flex min-h-8 min-w-0 flex-1 items-center gap-1 overflow-x-auto px-3 py-1.5 pr-20 text-xs text-nowrap\">\n                    <span class=\"font-code shrink-0 text-xs\">{{ label }}</span>\n                    <template v-if=\"String(description ?? '').trim()\">\n                      <span class=\"shrink-0\">&ndash;</span>\n                      <span class=\"whitespace-nowrap\">{{ description }}</span>\n                    </template>\n                  </div>\n                  <div\n                    class=\"oauth-scope-row-action-rail absolute top-0 right-0 z-[1] flex h-full min-w-[4.5rem] items-center justify-end gap-0.5 py-1 pr-2 pl-4 opacity-0 transition-opacity group-focus-within/scope-row:opacity-100 group-hover/scope-row:opacity-100\"\n                    @click.stop>\n                    <ScalarIconButton\n                      :icon=\"ScalarIconPencilSimple\"\n                      :label=\"\n                        translate('apiClient.oauthScopesInput.editScope', {\n                          name: label,\n                        })\n                      \"\n                      size=\"sm\"\n                      @click.stop=\"\n                        openEditScopeModal({\n                          id,\n                          description: description ?? '',\n                        })\n                      \" />\n                    <ScalarIconButton\n                      :icon=\"ScalarIconTrash\"\n                      :label=\"\n                        translate('apiClient.oauthScopesInput.deleteScope', {\n                          name: label,\n                        })\n                      \"\n                      size=\"sm\"\n                      @click.stop=\"handleDeleteScope(id)\" />\n                  </div>\n                </DataTableCell>\n                <!--\n                  Stop the click here so it does not also bubble to the row's `@click`\n                  toggle. The checkbox already drives the change via `@update:modelValue`;\n                  letting the row fire too would toggle the scope a second time.\n                -->\n                <DataTableCheckbox\n                  :ariaLabel=\"\n                    translate('apiClient.oauthScopesInput.selectScope', {\n                      name: label,\n                    })\n                  \"\n                  :modelValue=\"selectedScopes.includes(id)\"\n                  @click.stop\n                  @update:modelValue=\"setScope(id, $event)\" />\n              </DataTableRow>\n            </table>\n          </div>\n        </DisclosurePanel>\n      </Disclosure>\n    </div>\n\n    <!-- Shared add/edit scope modal -->\n    <OAuthScopesAddModal\n      :scope=\"editingScope\"\n      :scopes=\"Object.keys(flow.scopes ?? {})\"\n      :state=\"scopeFormModal\"\n      @submit=\"handleScopeFormSubmit\" />\n  </DataTableCell>\n</template>\n\n<style>\n/* Matches AddressBar.vue `.address-bar-bg-states` / `.fade-right` (header URL input). */\n.oauth-scope-row-action-rail {\n  --oauth-scope-row-rail-bg: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  background: linear-gradient(\n    90deg,\n    color-mix(in srgb, var(--oauth-scope-row-rail-bg), transparent 100%) 0%,\n    color-mix(in srgb, var(--oauth-scope-row-rail-bg), transparent 20%) 30%,\n    var(--oauth-scope-row-rail-bg) 100%\n  );\n}\n\n.no-scrollbar::-webkit-scrollbar {\n  display: none;\n}\n\n.no-scrollbar {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"OAuthScopesInput.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { useModal } from '@scalar/components/modal'\nimport { ScalarSearchInput } from '@scalar/components/search-input'\nimport { ScalarIconPencilSimple, ScalarIconTrash } from '@scalar/icons'\nimport type { ApiReferenceEvents } from '@scalar/workspace-store/events'\nimport type {\n  OAuthFlow,\n  OAuthFlowsObject,\n} from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport {\n  DataTableCell,\n  DataTableCheckbox,\n  DataTableRow,\n} from '@/v2/components/data-table'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport OAuthScopesAddModal from './OAuthScopesAddModal.vue'\n\nconst { selectedScopes, flow, flowType } = defineProps<{\n  flowType: keyof OAuthFlowsObject\n  flow: OAuthFlow\n  selectedScopes: string[]\n}>()\n\nconst emits = defineEmits<{\n  (\n    e: 'update:selectedScopes',\n    payload: { scopes?: string[]; scope?: string; selected?: boolean },\n  ): void\n  (\n    e: 'upsert:scope',\n    payload: Omit<ApiReferenceEvents['auth:upsert:scopes'], 'name'>,\n  ): void\n  (\n    e: 'delete:scope',\n    payload: Omit<ApiReferenceEvents['auth:delete:scopes'], 'name'>,\n  ): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst searchQuery = ref('')\n\n/**\n * The scope currently being edited, used to switch the shared modal into edit mode.\n * Null means the modal is in \"add\" mode.\n */\nconst editingScope = ref<{ name: string; description: string } | null>(null)\n\n/** List of all available scopes */\nconst scopes = computed(() =>\n  Object.entries(flow?.scopes ?? {}).map(([key, val]) => ({\n    id: key,\n    label: key,\n    description: val,\n  })),\n)\n\nconst scopeCount = computed(() => Object.keys(flow?.scopes ?? {}).length)\n\n/** Search is only useful once the list is long enough to scan */\nconst showScopeSearch = computed(() => scopeCount.value >= 10)\n\nconst filteredScopes = computed(() => {\n  const query = showScopeSearch.value ? searchQuery.value : ''\n  if (!query) {\n    return scopes.value\n  }\n\n  const regex = new RegExp(\n    query\n      .split('')\n      .map((c) => c.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'))\n      .join('.*'),\n    'i',\n  )\n\n  return scopes.value.filter(({ label, description }) =>\n    regex.test(`${label} ${description}`),\n  )\n})\n\nconst hasScopes = computed(() => Object.keys(flow?.scopes ?? {}).length > 0)\n\nconst allScopesSelected = computed(\n  () => selectedScopes.length === Object.keys(flow?.scopes ?? {}).length,\n)\n\nconst setScope = (scopeKey: string, checked: boolean) => {\n  // Emit a single-scope toggle rather than a freshly computed list. The store applies it\n  // against the currently selected scopes, so two quick clicks cannot overwrite each other\n  // with a list computed from a prop that has not updated yet.\n  emits('update:selectedScopes', { scope: scopeKey, selected: checked })\n}\n\n/** Select all scopes */\nconst selectAllScopes = () =>\n  emits('update:selectedScopes', { scopes: Object.keys(flow?.scopes ?? {}) })\n\n/** Deselect all scopes */\nconst deselectAllScopes = () => emits('update:selectedScopes', { scopes: [] })\n\nconst scopeFormModal = useModal()\n\n/**\n * Forces the Disclosure to remount with `defaultOpen` set so the panel auto-expands\n * the moment a brand-new scope is added. Bumping this counter is paired with toggling\n * `expandOnNextMount` so the remount opens the panel, then reverts to the default\n * closed-on-mount behavior for any future unrelated remounts (e.g. collapse on empty).\n *\n * The Disclosure `:key` is only this counter — not a separate `hasScopes` segment — so\n * adding the first scope does not remount twice (empty prefix → with-scopes prefix),\n * which would reopen with `defaultOpen=false` and collapse the panel right when rows appear.\n */\nconst remountKey = ref(0)\nconst expandOnNextMount = ref(false)\n\nwatch(hasScopes, (has, had) => {\n  if (had && !has) {\n    expandOnNextMount.value = false\n    remountKey.value += 1\n  }\n})\n\n/** Open the modal in \"add new scope\" mode */\nconst openAddScopeModal = () => {\n  editingScope.value = null\n  scopeFormModal.show()\n}\n\n/** Open the modal in \"edit scope\" mode prefilled with the chosen row */\nconst openEditScopeModal = (scope: { id: string; description: string }) => {\n  editingScope.value = {\n    name: scope.id,\n    description: scope.description ?? '',\n  }\n  scopeFormModal.show()\n}\n\n/**\n * Submit handler shared by Add Scope and Edit Scope. For renames, the `upsertScope` mutator on\n * the workspace store rewrites the selection state in place, so the component does not need to\n * emit a follow-up `update:selectedScopes`.\n *\n * When adding a brand-new scope (no `oldName`), the payload sets `enable: true` so the\n * `upsertScope` mutator also adds the new scope to any selection requirement that references\n * this scheme. The Disclosure is then remounted with `defaultOpen=true` so the user\n * immediately sees (and sees selected) the scope they just added.\n */\nconst handleScopeFormSubmit = async (payload: {\n  name: string\n  description: string\n  oldName?: string\n}) => {\n  const isAdd = !payload.oldName\n\n  emits('upsert:scope', {\n    scope: payload.name,\n    description: payload.description,\n    flowType,\n    ...(payload.oldName ? { oldScope: payload.oldName } : {}),\n    ...(isAdd ? { enable: true } : {}),\n  })\n\n  if (!isAdd) {\n    return\n  }\n\n  expandOnNextMount.value = true\n  remountKey.value += 1\n  // Reset after the remount so subsequent unrelated remounts (e.g. when the last\n  // scope is deleted) still default to a closed panel.\n  await nextTick()\n  expandOnNextMount.value = false\n}\n\n/**\n * Remove the scope from the flow. Selection cleanup (dropping the deleted key from any\n * currently-selected scopes) is handled by the `deleteScope` mutator on the workspace store,\n * so the component does not need to emit a follow-up `update:selectedScopes` here.\n */\nconst handleDeleteScope = (scopeKey: string) => {\n  emits('delete:scope', { scope: scopeKey, flowType })\n}\n</script>\n\n<template>\n  <DataTableCell class=\"h-auto !max-h-[initial] min-h-8 items-center\">\n    <div class=\"flex h-fit w-full\">\n      <div class=\"text-c-1 h-full items-center\"></div>\n      <Disclosure\n        :key=\"remountKey\"\n        as=\"div\"\n        class=\"bl flex w-full flex-col\"\n        :defaultOpen=\"expandOnNextMount\">\n        <!--\n          Keep Add Scope (and other actions) outside the summary DisclosureButton.\n          When there are no scopes the summary control is disabled; a native disabled\n          button blocks pointer events for all descendants, which would make Add Scope unusable.\n        -->\n        <div\n          class=\"group/scopes-accordion flex h-auto min-h-8 items-center gap-1.5 pr-2.25 pl-3 text-left\">\n          <DisclosureButton\n            :class=\"[\n              'min-w-0 flex-1 text-left',\n              hasScopes ? 'hover:text-c-1 cursor-pointer' : 'cursor-default',\n              (selectedScopes.length || 0) > 0 ? 'text-c-1' : 'text-c-3',\n            ]\"\n            :disabled=\"!hasScopes\">\n            <template v-if=\"hasScopes\">\n              {{\n                translate('apiClient.oauthScopesInput.selectedScopes', {\n                  count: selectedScopes.length,\n                  total: Object.keys(flow?.scopes ?? {}).length,\n                })\n              }}\n            </template>\n            <template v-else>\n              {{ translate('apiClient.oauthScopesInput.noScopesDefined') }}\n            </template>\n          </DisclosureButton>\n\n          <div class=\"flex shrink-0 items-center gap-1.75\">\n            <!-- Add new scope -->\n            <ScalarButton\n              class=\"pr-0.75 pl-1 transition-none\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click.stop=\"openAddScopeModal\">\n              {{ translate('apiClient.oauthScopesInput.addScope') }}\n            </ScalarButton>\n\n            <!-- Deselect All -->\n            <ScalarButton\n              v-if=\"hasScopes && allScopesSelected\"\n              class=\"pr-0.75 pl-1 transition-none\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click.stop=\"deselectAllScopes\">\n              {{ translate('apiClient.oauthScopesInput.deselectAll') }}\n            </ScalarButton>\n\n            <!-- Select All -->\n            <ScalarButton\n              v-if=\"hasScopes && !allScopesSelected\"\n              class=\"pr-0.75 pl-1 transition-none\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click.stop=\"selectAllScopes\">\n              {{ translate('apiClient.oauthScopesInput.selectAll') }}\n            </ScalarButton>\n\n            <DisclosureButton\n              v-if=\"hasScopes\"\n              v-slot=\"{ open }\"\n              class=\"text-c-3 hover:text-c-2 -m-0.5 flex shrink-0 items-center justify-center rounded p-0.5 focus-visible:outline-offset-2\">\n              <ScalarIcon\n                class=\"group-hover/scopes-accordion:text-c-2\"\n                :icon=\"open ? 'ChevronDown' : 'ChevronRight'\"\n                size=\"md\" />\n            </DisclosureButton>\n          </div>\n        </div>\n        <!-- Scopes List -->\n        <DisclosurePanel as=\"template\">\n          <div>\n            <ScalarSearchInput\n              v-if=\"showScopeSearch\"\n              v-model=\"searchQuery\"\n              class=\"flex items-center text-xs\" />\n            <table\n              class=\"grid max-h-40 auto-rows-auto overflow-x-hidden overflow-y-auto\"\n              :style=\"{ gridTemplateColumns: '1fr auto' }\">\n              <!--\n                The HTML parser inserts a `tbody` around rows that sit directly under a `table`,\n                so the rows are wrapped in one here to keep server-rendered markup hydratable.\n                `contents` keeps it out of the table's grid, the same way the rows lay\n                themselves out.\n              -->\n              <tbody class=\"contents\">\n                <DataTableRow\n                  v-for=\"{ id, label, description } in filteredScopes\"\n                  :key=\"id\"\n                  class=\"text-c-2 group/scope-row\"\n                  @click=\"setScope(id, !selectedScopes.includes(id))\">\n                  <DataTableCell\n                    class=\"box-border flex !max-h-[initial] w-full min-w-0 cursor-pointer items-stretch overflow-hidden px-0 py-0\">\n                    <!-- Text scrolls horizontally; action rail stays fixed -->\n                    <div\n                      class=\"no-scrollbar text-c-2 group-hover/scope-row:text-c-1 flex min-h-8 min-w-0 flex-1 items-center gap-1 overflow-x-auto px-3 py-1.5 pr-20 text-xs text-nowrap\">\n                      <span class=\"font-code shrink-0 text-xs\">{{\n                        label\n                      }}</span>\n                      <template v-if=\"String(description ?? '').trim()\">\n                        <span class=\"shrink-0\">&ndash;</span>\n                        <span class=\"whitespace-nowrap\">{{ description }}</span>\n                      </template>\n                    </div>\n                    <div\n                      class=\"oauth-scope-row-action-rail absolute top-0 right-0 z-[1] flex h-full min-w-[4.5rem] items-center justify-end gap-0.5 py-1 pr-2 pl-4 opacity-0 transition-opacity group-focus-within/scope-row:opacity-100 group-hover/scope-row:opacity-100\"\n                      @click.stop>\n                      <ScalarIconButton\n                        :icon=\"ScalarIconPencilSimple\"\n                        :label=\"\n                          translate('apiClient.oauthScopesInput.editScope', {\n                            name: label,\n                          })\n                        \"\n                        size=\"sm\"\n                        @click.stop=\"\n                          openEditScopeModal({\n                            id,\n                            description: description ?? '',\n                          })\n                        \" />\n                      <ScalarIconButton\n                        :icon=\"ScalarIconTrash\"\n                        :label=\"\n                          translate('apiClient.oauthScopesInput.deleteScope', {\n                            name: label,\n                          })\n                        \"\n                        size=\"sm\"\n                        @click.stop=\"handleDeleteScope(id)\" />\n                    </div>\n                  </DataTableCell>\n                  <!--\n                  Stop the click here so it does not also bubble to the row's `@click`\n                  toggle. The checkbox already drives the change via `@update:modelValue`;\n                  letting the row fire too would toggle the scope a second time.\n                -->\n                  <DataTableCheckbox\n                    :ariaLabel=\"\n                      translate('apiClient.oauthScopesInput.selectScope', {\n                        name: label,\n                      })\n                    \"\n                    :modelValue=\"selectedScopes.includes(id)\"\n                    @click.stop\n                    @update:modelValue=\"setScope(id, $event)\" />\n                </DataTableRow>\n              </tbody>\n            </table>\n          </div>\n        </DisclosurePanel>\n      </Disclosure>\n    </div>\n\n    <!-- Shared add/edit scope modal -->\n    <OAuthScopesAddModal\n      :scope=\"editingScope\"\n      :scopes=\"Object.keys(flow.scopes ?? {})\"\n      :state=\"scopeFormModal\"\n      @submit=\"handleScopeFormSubmit\" />\n  </DataTableCell>\n</template>\n\n<style>\n/* Matches AddressBar.vue `.address-bar-bg-states` / `.fade-right` (header URL input). */\n.oauth-scope-row-action-rail {\n  --oauth-scope-row-rail-bg: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  background: linear-gradient(\n    90deg,\n    color-mix(in srgb, var(--oauth-scope-row-rail-bg), transparent 100%) 0%,\n    color-mix(in srgb, var(--oauth-scope-row-rail-bg), transparent 20%) 30%,\n    var(--oauth-scope-row-rail-bg) 100%\n  );\n}\n\n.no-scrollbar::-webkit-scrollbar {\n  display: none;\n}\n\n.no-scrollbar {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n</style>\n"],"mappings":""}

package/dist/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue.script.js

@@ -19,9 +19,10 @@ var _hoisted_4 = {
 	class: "grid max-h-40 auto-rows-auto overflow-x-hidden overflow-y-auto",
 	style: { gridTemplateColumns: "1fr auto" }
 };
-var _hoisted_5 = { class: "no-scrollbar text-c-2 group-hover/scope-row:text-c-1 flex min-h-8 min-w-0 flex-1 items-center gap-1 overflow-x-auto px-3 py-1.5 pr-20 text-xs text-nowrap" };
-var _hoisted_6 = { class: "font-code shrink-0 text-xs" };
-var _hoisted_7 = { class: "whitespace-nowrap" };
+var _hoisted_5 = { class: "contents" };
+var _hoisted_6 = { class: "no-scrollbar text-c-2 group-hover/scope-row:text-c-1 flex min-h-8 min-w-0 flex-1 items-center gap-1 overflow-x-auto px-3 py-1.5 pr-20 text-xs text-nowrap" };
+var _hoisted_7 = { class: "font-code shrink-0 text-xs" };
+var _hoisted_8 = { class: "whitespace-nowrap" };
 var OAuthScopesInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "OAuthScopesInput",
 	props: {
@@ -206,14 +207,14 @@ var OAuthScopesInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 							modelValue: searchQuery.value,
 							"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
 							class: "flex items-center text-xs"
-						}, null, 8, ["modelValue"])) : createCommentVNode("", true), createElementVNode("table", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredScopes.value, ({ id, label, description }) => {
+						}, null, 8, ["modelValue"])) : createCommentVNode("", true), createElementVNode("table", _hoisted_4, [createElementVNode("tbody", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredScopes.value, ({ id, label, description }) => {
 							return openBlock(), createBlock(unref(DataTableRow_default), {
 								key: id,
 								class: "text-c-2 group/scope-row",
 								onClick: ($event) => setScope(id, !__props.selectedScopes.includes(id))
 							}, {
 								default: withCtx(() => [createVNode(unref(DataTableCell_default), { class: "box-border flex !max-h-[initial] w-full min-w-0 cursor-pointer items-stretch overflow-hidden px-0 py-0" }, {
-									default: withCtx(() => [createElementVNode("div", _hoisted_5, [createElementVNode("span", _hoisted_6, toDisplayString(label), 1), String(description ?? "").trim() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[3] || (_cache[3] = createElementVNode("span", { class: "shrink-0" }, "–", -1)), createElementVNode("span", _hoisted_7, toDisplayString(description), 1)], 64)) : createCommentVNode("", true)]), createElementVNode("div", {
+									default: withCtx(() => [createElementVNode("div", _hoisted_6, [createElementVNode("span", _hoisted_7, toDisplayString(label), 1), String(description ?? "").trim() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[3] || (_cache[3] = createElementVNode("span", { class: "shrink-0" }, "–", -1)), createElementVNode("span", _hoisted_8, toDisplayString(description), 1)], 64)) : createCommentVNode("", true)]), createElementVNode("div", {
 										class: "oauth-scope-row-action-rail absolute top-0 right-0 z-[1] flex h-full min-w-[4.5rem] items-center justify-end gap-0.5 py-1 pr-2 pl-4 opacity-0 transition-opacity group-focus-within/scope-row:opacity-100 group-hover/scope-row:opacity-100",
 										onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
 									}, [createVNode(unref(ScalarIconButton), {
@@ -251,7 +252,7 @@ var OAuthScopesInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 								])]),
 								_: 2
 							}, 1032, ["onClick"]);
-						}), 128))])])]),
+						}), 128))])])])]),
 						_: 1
 					})]),
 					_: 1

package/dist/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"OAuthScopesInput.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { useModal } from '@scalar/components/modal'\nimport { ScalarSearchInput } from '@scalar/components/search-input'\nimport { ScalarIconPencilSimple, ScalarIconTrash } from '@scalar/icons'\nimport type { ApiReferenceEvents } from '@scalar/workspace-store/events'\nimport type {\n  OAuthFlow,\n  OAuthFlowsObject,\n} from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport {\n  DataTableCell,\n  DataTableCheckbox,\n  DataTableRow,\n} from '@/v2/components/data-table'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport OAuthScopesAddModal from './OAuthScopesAddModal.vue'\n\nconst { selectedScopes, flow, flowType } = defineProps<{\n  flowType: keyof OAuthFlowsObject\n  flow: OAuthFlow\n  selectedScopes: string[]\n}>()\n\nconst emits = defineEmits<{\n  (\n    e: 'update:selectedScopes',\n    payload: { scopes?: string[]; scope?: string; selected?: boolean },\n  ): void\n  (\n    e: 'upsert:scope',\n    payload: Omit<ApiReferenceEvents['auth:upsert:scopes'], 'name'>,\n  ): void\n  (\n    e: 'delete:scope',\n    payload: Omit<ApiReferenceEvents['auth:delete:scopes'], 'name'>,\n  ): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst searchQuery = ref('')\n\n/**\n * The scope currently being edited, used to switch the shared modal into edit mode.\n * Null means the modal is in \"add\" mode.\n */\nconst editingScope = ref<{ name: string; description: string } | null>(null)\n\n/** List of all available scopes */\nconst scopes = computed(() =>\n  Object.entries(flow?.scopes ?? {}).map(([key, val]) => ({\n    id: key,\n    label: key,\n    description: val,\n  })),\n)\n\nconst scopeCount = computed(() => Object.keys(flow?.scopes ?? {}).length)\n\n/** Search is only useful once the list is long enough to scan */\nconst showScopeSearch = computed(() => scopeCount.value >= 10)\n\nconst filteredScopes = computed(() => {\n  const query = showScopeSearch.value ? searchQuery.value : ''\n  if (!query) {\n    return scopes.value\n  }\n\n  const regex = new RegExp(\n    query\n      .split('')\n      .map((c) => c.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'))\n      .join('.*'),\n    'i',\n  )\n\n  return scopes.value.filter(({ label, description }) =>\n    regex.test(`${label} ${description}`),\n  )\n})\n\nconst hasScopes = computed(() => Object.keys(flow?.scopes ?? {}).length > 0)\n\nconst allScopesSelected = computed(\n  () => selectedScopes.length === Object.keys(flow?.scopes ?? {}).length,\n)\n\nconst setScope = (scopeKey: string, checked: boolean) => {\n  // Emit a single-scope toggle rather than a freshly computed list. The store applies it\n  // against the currently selected scopes, so two quick clicks cannot overwrite each other\n  // with a list computed from a prop that has not updated yet.\n  emits('update:selectedScopes', { scope: scopeKey, selected: checked })\n}\n\n/** Select all scopes */\nconst selectAllScopes = () =>\n  emits('update:selectedScopes', { scopes: Object.keys(flow?.scopes ?? {}) })\n\n/** Deselect all scopes */\nconst deselectAllScopes = () => emits('update:selectedScopes', { scopes: [] })\n\nconst scopeFormModal = useModal()\n\n/**\n * Forces the Disclosure to remount with `defaultOpen` set so the panel auto-expands\n * the moment a brand-new scope is added. Bumping this counter is paired with toggling\n * `expandOnNextMount` so the remount opens the panel, then reverts to the default\n * closed-on-mount behavior for any future unrelated remounts (e.g. collapse on empty).\n *\n * The Disclosure `:key` is only this counter — not a separate `hasScopes` segment — so\n * adding the first scope does not remount twice (empty prefix → with-scopes prefix),\n * which would reopen with `defaultOpen=false` and collapse the panel right when rows appear.\n */\nconst remountKey = ref(0)\nconst expandOnNextMount = ref(false)\n\nwatch(hasScopes, (has, had) => {\n  if (had && !has) {\n    expandOnNextMount.value = false\n    remountKey.value += 1\n  }\n})\n\n/** Open the modal in \"add new scope\" mode */\nconst openAddScopeModal = () => {\n  editingScope.value = null\n  scopeFormModal.show()\n}\n\n/** Open the modal in \"edit scope\" mode prefilled with the chosen row */\nconst openEditScopeModal = (scope: { id: string; description: string }) => {\n  editingScope.value = {\n    name: scope.id,\n    description: scope.description ?? '',\n  }\n  scopeFormModal.show()\n}\n\n/**\n * Submit handler shared by Add Scope and Edit Scope. For renames, the `upsertScope` mutator on\n * the workspace store rewrites the selection state in place, so the component does not need to\n * emit a follow-up `update:selectedScopes`.\n *\n * When adding a brand-new scope (no `oldName`), the payload sets `enable: true` so the\n * `upsertScope` mutator also adds the new scope to any selection requirement that references\n * this scheme. The Disclosure is then remounted with `defaultOpen=true` so the user\n * immediately sees (and sees selected) the scope they just added.\n */\nconst handleScopeFormSubmit = async (payload: {\n  name: string\n  description: string\n  oldName?: string\n}) => {\n  const isAdd = !payload.oldName\n\n  emits('upsert:scope', {\n    scope: payload.name,\n    description: payload.description,\n    flowType,\n    ...(payload.oldName ? { oldScope: payload.oldName } : {}),\n    ...(isAdd ? { enable: true } : {}),\n  })\n\n  if (!isAdd) {\n    return\n  }\n\n  expandOnNextMount.value = true\n  remountKey.value += 1\n  // Reset after the remount so subsequent unrelated remounts (e.g. when the last\n  // scope is deleted) still default to a closed panel.\n  await nextTick()\n  expandOnNextMount.value = false\n}\n\n/**\n * Remove the scope from the flow. Selection cleanup (dropping the deleted key from any\n * currently-selected scopes) is handled by the `deleteScope` mutator on the workspace store,\n * so the component does not need to emit a follow-up `update:selectedScopes` here.\n */\nconst handleDeleteScope = (scopeKey: string) => {\n  emits('delete:scope', { scope: scopeKey, flowType })\n}\n</script>\n\n<template>\n  <DataTableCell class=\"h-auto !max-h-[initial] min-h-8 items-center\">\n    <div class=\"flex h-fit w-full\">\n      <div class=\"text-c-1 h-full items-center\"></div>\n      <Disclosure\n        :key=\"remountKey\"\n        as=\"div\"\n        class=\"bl flex w-full flex-col\"\n        :defaultOpen=\"expandOnNextMount\">\n        <!--\n          Keep Add Scope (and other actions) outside the summary DisclosureButton.\n          When there are no scopes the summary control is disabled; a native disabled\n          button blocks pointer events for all descendants, which would make Add Scope unusable.\n        -->\n        <div\n          class=\"group/scopes-accordion flex h-auto min-h-8 items-center gap-1.5 pr-2.25 pl-3 text-left\">\n          <DisclosureButton\n            :class=\"[\n              'min-w-0 flex-1 text-left',\n              hasScopes ? 'hover:text-c-1 cursor-pointer' : 'cursor-default',\n              (selectedScopes.length || 0) > 0 ? 'text-c-1' : 'text-c-3',\n            ]\"\n            :disabled=\"!hasScopes\">\n            <template v-if=\"hasScopes\">\n              {{\n                translate('apiClient.oauthScopesInput.selectedScopes', {\n                  count: selectedScopes.length,\n                  total: Object.keys(flow?.scopes ?? {}).length,\n                })\n              }}\n            </template>\n            <template v-else>\n              {{ translate('apiClient.oauthScopesInput.noScopesDefined') }}\n            </template>\n          </DisclosureButton>\n\n          <div class=\"flex shrink-0 items-center gap-1.75\">\n            <!-- Add new scope -->\n            <ScalarButton\n              class=\"pr-0.75 pl-1 transition-none\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click.stop=\"openAddScopeModal\">\n              {{ translate('apiClient.oauthScopesInput.addScope') }}\n            </ScalarButton>\n\n            <!-- Deselect All -->\n            <ScalarButton\n              v-if=\"hasScopes && allScopesSelected\"\n              class=\"pr-0.75 pl-1 transition-none\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click.stop=\"deselectAllScopes\">\n              {{ translate('apiClient.oauthScopesInput.deselectAll') }}\n            </ScalarButton>\n\n            <!-- Select All -->\n            <ScalarButton\n              v-if=\"hasScopes && !allScopesSelected\"\n              class=\"pr-0.75 pl-1 transition-none\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click.stop=\"selectAllScopes\">\n              {{ translate('apiClient.oauthScopesInput.selectAll') }}\n            </ScalarButton>\n\n            <DisclosureButton\n              v-if=\"hasScopes\"\n              v-slot=\"{ open }\"\n              class=\"text-c-3 hover:text-c-2 -m-0.5 flex shrink-0 items-center justify-center rounded p-0.5 focus-visible:outline-offset-2\">\n              <ScalarIcon\n                class=\"group-hover/scopes-accordion:text-c-2\"\n                :icon=\"open ? 'ChevronDown' : 'ChevronRight'\"\n                size=\"md\" />\n            </DisclosureButton>\n          </div>\n        </div>\n        <!-- Scopes List -->\n        <DisclosurePanel as=\"template\">\n          <div>\n            <ScalarSearchInput\n              v-if=\"showScopeSearch\"\n              v-model=\"searchQuery\"\n              class=\"flex items-center text-xs\" />\n            <table\n              class=\"grid max-h-40 auto-rows-auto overflow-x-hidden overflow-y-auto\"\n              :style=\"{ gridTemplateColumns: '1fr auto' }\">\n              <DataTableRow\n                v-for=\"{ id, label, description } in filteredScopes\"\n                :key=\"id\"\n                class=\"text-c-2 group/scope-row\"\n                @click=\"setScope(id, !selectedScopes.includes(id))\">\n                <DataTableCell\n                  class=\"box-border flex !max-h-[initial] w-full min-w-0 cursor-pointer items-stretch overflow-hidden px-0 py-0\">\n                  <!-- Text scrolls horizontally; action rail stays fixed -->\n                  <div\n                    class=\"no-scrollbar text-c-2 group-hover/scope-row:text-c-1 flex min-h-8 min-w-0 flex-1 items-center gap-1 overflow-x-auto px-3 py-1.5 pr-20 text-xs text-nowrap\">\n                    <span class=\"font-code shrink-0 text-xs\">{{ label }}</span>\n                    <template v-if=\"String(description ?? '').trim()\">\n                      <span class=\"shrink-0\">&ndash;</span>\n                      <span class=\"whitespace-nowrap\">{{ description }}</span>\n                    </template>\n                  </div>\n                  <div\n                    class=\"oauth-scope-row-action-rail absolute top-0 right-0 z-[1] flex h-full min-w-[4.5rem] items-center justify-end gap-0.5 py-1 pr-2 pl-4 opacity-0 transition-opacity group-focus-within/scope-row:opacity-100 group-hover/scope-row:opacity-100\"\n                    @click.stop>\n                    <ScalarIconButton\n                      :icon=\"ScalarIconPencilSimple\"\n                      :label=\"\n                        translate('apiClient.oauthScopesInput.editScope', {\n                          name: label,\n                        })\n                      \"\n                      size=\"sm\"\n                      @click.stop=\"\n                        openEditScopeModal({\n                          id,\n                          description: description ?? '',\n                        })\n                      \" />\n                    <ScalarIconButton\n                      :icon=\"ScalarIconTrash\"\n                      :label=\"\n                        translate('apiClient.oauthScopesInput.deleteScope', {\n                          name: label,\n                        })\n                      \"\n                      size=\"sm\"\n                      @click.stop=\"handleDeleteScope(id)\" />\n                  </div>\n                </DataTableCell>\n                <!--\n                  Stop the click here so it does not also bubble to the row's `@click`\n                  toggle. The checkbox already drives the change via `@update:modelValue`;\n                  letting the row fire too would toggle the scope a second time.\n                -->\n                <DataTableCheckbox\n                  :ariaLabel=\"\n                    translate('apiClient.oauthScopesInput.selectScope', {\n                      name: label,\n                    })\n                  \"\n                  :modelValue=\"selectedScopes.includes(id)\"\n                  @click.stop\n                  @update:modelValue=\"setScope(id, $event)\" />\n              </DataTableRow>\n            </table>\n          </div>\n        </DisclosurePanel>\n      </Disclosure>\n    </div>\n\n    <!-- Shared add/edit scope modal -->\n    <OAuthScopesAddModal\n      :scope=\"editingScope\"\n      :scopes=\"Object.keys(flow.scopes ?? {})\"\n      :state=\"scopeFormModal\"\n      @submit=\"handleScopeFormSubmit\" />\n  </DataTableCell>\n</template>\n\n<style>\n/* Matches AddressBar.vue `.address-bar-bg-states` / `.fade-right` (header URL input). */\n.oauth-scope-row-action-rail {\n  --oauth-scope-row-rail-bg: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  background: linear-gradient(\n    90deg,\n    color-mix(in srgb, var(--oauth-scope-row-rail-bg), transparent 100%) 0%,\n    color-mix(in srgb, var(--oauth-scope-row-rail-bg), transparent 20%) 30%,\n    var(--oauth-scope-row-rail-bg) 100%\n  );\n}\n\n.no-scrollbar::-webkit-scrollbar {\n  display: none;\n}\n\n.no-scrollbar {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"OAuthScopesInput.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OAuthScopesInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'\nimport { ScalarButton } from '@scalar/components/button'\nimport { ScalarIcon } from '@scalar/components/icon'\nimport { ScalarIconButton } from '@scalar/components/icon-button'\nimport { useModal } from '@scalar/components/modal'\nimport { ScalarSearchInput } from '@scalar/components/search-input'\nimport { ScalarIconPencilSimple, ScalarIconTrash } from '@scalar/icons'\nimport type { ApiReferenceEvents } from '@scalar/workspace-store/events'\nimport type {\n  OAuthFlow,\n  OAuthFlowsObject,\n} from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport {\n  DataTableCell,\n  DataTableCheckbox,\n  DataTableRow,\n} from '@/v2/components/data-table'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport OAuthScopesAddModal from './OAuthScopesAddModal.vue'\n\nconst { selectedScopes, flow, flowType } = defineProps<{\n  flowType: keyof OAuthFlowsObject\n  flow: OAuthFlow\n  selectedScopes: string[]\n}>()\n\nconst emits = defineEmits<{\n  (\n    e: 'update:selectedScopes',\n    payload: { scopes?: string[]; scope?: string; selected?: boolean },\n  ): void\n  (\n    e: 'upsert:scope',\n    payload: Omit<ApiReferenceEvents['auth:upsert:scopes'], 'name'>,\n  ): void\n  (\n    e: 'delete:scope',\n    payload: Omit<ApiReferenceEvents['auth:delete:scopes'], 'name'>,\n  ): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst searchQuery = ref('')\n\n/**\n * The scope currently being edited, used to switch the shared modal into edit mode.\n * Null means the modal is in \"add\" mode.\n */\nconst editingScope = ref<{ name: string; description: string } | null>(null)\n\n/** List of all available scopes */\nconst scopes = computed(() =>\n  Object.entries(flow?.scopes ?? {}).map(([key, val]) => ({\n    id: key,\n    label: key,\n    description: val,\n  })),\n)\n\nconst scopeCount = computed(() => Object.keys(flow?.scopes ?? {}).length)\n\n/** Search is only useful once the list is long enough to scan */\nconst showScopeSearch = computed(() => scopeCount.value >= 10)\n\nconst filteredScopes = computed(() => {\n  const query = showScopeSearch.value ? searchQuery.value : ''\n  if (!query) {\n    return scopes.value\n  }\n\n  const regex = new RegExp(\n    query\n      .split('')\n      .map((c) => c.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'))\n      .join('.*'),\n    'i',\n  )\n\n  return scopes.value.filter(({ label, description }) =>\n    regex.test(`${label} ${description}`),\n  )\n})\n\nconst hasScopes = computed(() => Object.keys(flow?.scopes ?? {}).length > 0)\n\nconst allScopesSelected = computed(\n  () => selectedScopes.length === Object.keys(flow?.scopes ?? {}).length,\n)\n\nconst setScope = (scopeKey: string, checked: boolean) => {\n  // Emit a single-scope toggle rather than a freshly computed list. The store applies it\n  // against the currently selected scopes, so two quick clicks cannot overwrite each other\n  // with a list computed from a prop that has not updated yet.\n  emits('update:selectedScopes', { scope: scopeKey, selected: checked })\n}\n\n/** Select all scopes */\nconst selectAllScopes = () =>\n  emits('update:selectedScopes', { scopes: Object.keys(flow?.scopes ?? {}) })\n\n/** Deselect all scopes */\nconst deselectAllScopes = () => emits('update:selectedScopes', { scopes: [] })\n\nconst scopeFormModal = useModal()\n\n/**\n * Forces the Disclosure to remount with `defaultOpen` set so the panel auto-expands\n * the moment a brand-new scope is added. Bumping this counter is paired with toggling\n * `expandOnNextMount` so the remount opens the panel, then reverts to the default\n * closed-on-mount behavior for any future unrelated remounts (e.g. collapse on empty).\n *\n * The Disclosure `:key` is only this counter — not a separate `hasScopes` segment — so\n * adding the first scope does not remount twice (empty prefix → with-scopes prefix),\n * which would reopen with `defaultOpen=false` and collapse the panel right when rows appear.\n */\nconst remountKey = ref(0)\nconst expandOnNextMount = ref(false)\n\nwatch(hasScopes, (has, had) => {\n  if (had && !has) {\n    expandOnNextMount.value = false\n    remountKey.value += 1\n  }\n})\n\n/** Open the modal in \"add new scope\" mode */\nconst openAddScopeModal = () => {\n  editingScope.value = null\n  scopeFormModal.show()\n}\n\n/** Open the modal in \"edit scope\" mode prefilled with the chosen row */\nconst openEditScopeModal = (scope: { id: string; description: string }) => {\n  editingScope.value = {\n    name: scope.id,\n    description: scope.description ?? '',\n  }\n  scopeFormModal.show()\n}\n\n/**\n * Submit handler shared by Add Scope and Edit Scope. For renames, the `upsertScope` mutator on\n * the workspace store rewrites the selection state in place, so the component does not need to\n * emit a follow-up `update:selectedScopes`.\n *\n * When adding a brand-new scope (no `oldName`), the payload sets `enable: true` so the\n * `upsertScope` mutator also adds the new scope to any selection requirement that references\n * this scheme. The Disclosure is then remounted with `defaultOpen=true` so the user\n * immediately sees (and sees selected) the scope they just added.\n */\nconst handleScopeFormSubmit = async (payload: {\n  name: string\n  description: string\n  oldName?: string\n}) => {\n  const isAdd = !payload.oldName\n\n  emits('upsert:scope', {\n    scope: payload.name,\n    description: payload.description,\n    flowType,\n    ...(payload.oldName ? { oldScope: payload.oldName } : {}),\n    ...(isAdd ? { enable: true } : {}),\n  })\n\n  if (!isAdd) {\n    return\n  }\n\n  expandOnNextMount.value = true\n  remountKey.value += 1\n  // Reset after the remount so subsequent unrelated remounts (e.g. when the last\n  // scope is deleted) still default to a closed panel.\n  await nextTick()\n  expandOnNextMount.value = false\n}\n\n/**\n * Remove the scope from the flow. Selection cleanup (dropping the deleted key from any\n * currently-selected scopes) is handled by the `deleteScope` mutator on the workspace store,\n * so the component does not need to emit a follow-up `update:selectedScopes` here.\n */\nconst handleDeleteScope = (scopeKey: string) => {\n  emits('delete:scope', { scope: scopeKey, flowType })\n}\n</script>\n\n<template>\n  <DataTableCell class=\"h-auto !max-h-[initial] min-h-8 items-center\">\n    <div class=\"flex h-fit w-full\">\n      <div class=\"text-c-1 h-full items-center\"></div>\n      <Disclosure\n        :key=\"remountKey\"\n        as=\"div\"\n        class=\"bl flex w-full flex-col\"\n        :defaultOpen=\"expandOnNextMount\">\n        <!--\n          Keep Add Scope (and other actions) outside the summary DisclosureButton.\n          When there are no scopes the summary control is disabled; a native disabled\n          button blocks pointer events for all descendants, which would make Add Scope unusable.\n        -->\n        <div\n          class=\"group/scopes-accordion flex h-auto min-h-8 items-center gap-1.5 pr-2.25 pl-3 text-left\">\n          <DisclosureButton\n            :class=\"[\n              'min-w-0 flex-1 text-left',\n              hasScopes ? 'hover:text-c-1 cursor-pointer' : 'cursor-default',\n              (selectedScopes.length || 0) > 0 ? 'text-c-1' : 'text-c-3',\n            ]\"\n            :disabled=\"!hasScopes\">\n            <template v-if=\"hasScopes\">\n              {{\n                translate('apiClient.oauthScopesInput.selectedScopes', {\n                  count: selectedScopes.length,\n                  total: Object.keys(flow?.scopes ?? {}).length,\n                })\n              }}\n            </template>\n            <template v-else>\n              {{ translate('apiClient.oauthScopesInput.noScopesDefined') }}\n            </template>\n          </DisclosureButton>\n\n          <div class=\"flex shrink-0 items-center gap-1.75\">\n            <!-- Add new scope -->\n            <ScalarButton\n              class=\"pr-0.75 pl-1 transition-none\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click.stop=\"openAddScopeModal\">\n              {{ translate('apiClient.oauthScopesInput.addScope') }}\n            </ScalarButton>\n\n            <!-- Deselect All -->\n            <ScalarButton\n              v-if=\"hasScopes && allScopesSelected\"\n              class=\"pr-0.75 pl-1 transition-none\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click.stop=\"deselectAllScopes\">\n              {{ translate('apiClient.oauthScopesInput.deselectAll') }}\n            </ScalarButton>\n\n            <!-- Select All -->\n            <ScalarButton\n              v-if=\"hasScopes && !allScopesSelected\"\n              class=\"pr-0.75 pl-1 transition-none\"\n              size=\"sm\"\n              variant=\"ghost\"\n              @click.stop=\"selectAllScopes\">\n              {{ translate('apiClient.oauthScopesInput.selectAll') }}\n            </ScalarButton>\n\n            <DisclosureButton\n              v-if=\"hasScopes\"\n              v-slot=\"{ open }\"\n              class=\"text-c-3 hover:text-c-2 -m-0.5 flex shrink-0 items-center justify-center rounded p-0.5 focus-visible:outline-offset-2\">\n              <ScalarIcon\n                class=\"group-hover/scopes-accordion:text-c-2\"\n                :icon=\"open ? 'ChevronDown' : 'ChevronRight'\"\n                size=\"md\" />\n            </DisclosureButton>\n          </div>\n        </div>\n        <!-- Scopes List -->\n        <DisclosurePanel as=\"template\">\n          <div>\n            <ScalarSearchInput\n              v-if=\"showScopeSearch\"\n              v-model=\"searchQuery\"\n              class=\"flex items-center text-xs\" />\n            <table\n              class=\"grid max-h-40 auto-rows-auto overflow-x-hidden overflow-y-auto\"\n              :style=\"{ gridTemplateColumns: '1fr auto' }\">\n              <!--\n                The HTML parser inserts a `tbody` around rows that sit directly under a `table`,\n                so the rows are wrapped in one here to keep server-rendered markup hydratable.\n                `contents` keeps it out of the table's grid, the same way the rows lay\n                themselves out.\n              -->\n              <tbody class=\"contents\">\n                <DataTableRow\n                  v-for=\"{ id, label, description } in filteredScopes\"\n                  :key=\"id\"\n                  class=\"text-c-2 group/scope-row\"\n                  @click=\"setScope(id, !selectedScopes.includes(id))\">\n                  <DataTableCell\n                    class=\"box-border flex !max-h-[initial] w-full min-w-0 cursor-pointer items-stretch overflow-hidden px-0 py-0\">\n                    <!-- Text scrolls horizontally; action rail stays fixed -->\n                    <div\n                      class=\"no-scrollbar text-c-2 group-hover/scope-row:text-c-1 flex min-h-8 min-w-0 flex-1 items-center gap-1 overflow-x-auto px-3 py-1.5 pr-20 text-xs text-nowrap\">\n                      <span class=\"font-code shrink-0 text-xs\">{{\n                        label\n                      }}</span>\n                      <template v-if=\"String(description ?? '').trim()\">\n                        <span class=\"shrink-0\">&ndash;</span>\n                        <span class=\"whitespace-nowrap\">{{ description }}</span>\n                      </template>\n                    </div>\n                    <div\n                      class=\"oauth-scope-row-action-rail absolute top-0 right-0 z-[1] flex h-full min-w-[4.5rem] items-center justify-end gap-0.5 py-1 pr-2 pl-4 opacity-0 transition-opacity group-focus-within/scope-row:opacity-100 group-hover/scope-row:opacity-100\"\n                      @click.stop>\n                      <ScalarIconButton\n                        :icon=\"ScalarIconPencilSimple\"\n                        :label=\"\n                          translate('apiClient.oauthScopesInput.editScope', {\n                            name: label,\n                          })\n                        \"\n                        size=\"sm\"\n                        @click.stop=\"\n                          openEditScopeModal({\n                            id,\n                            description: description ?? '',\n                          })\n                        \" />\n                      <ScalarIconButton\n                        :icon=\"ScalarIconTrash\"\n                        :label=\"\n                          translate('apiClient.oauthScopesInput.deleteScope', {\n                            name: label,\n                          })\n                        \"\n                        size=\"sm\"\n                        @click.stop=\"handleDeleteScope(id)\" />\n                    </div>\n                  </DataTableCell>\n                  <!--\n                  Stop the click here so it does not also bubble to the row's `@click`\n                  toggle. The checkbox already drives the change via `@update:modelValue`;\n                  letting the row fire too would toggle the scope a second time.\n                -->\n                  <DataTableCheckbox\n                    :ariaLabel=\"\n                      translate('apiClient.oauthScopesInput.selectScope', {\n                        name: label,\n                      })\n                    \"\n                    :modelValue=\"selectedScopes.includes(id)\"\n                    @click.stop\n                    @update:modelValue=\"setScope(id, $event)\" />\n                </DataTableRow>\n              </tbody>\n            </table>\n          </div>\n        </DisclosurePanel>\n      </Disclosure>\n    </div>\n\n    <!-- Shared add/edit scope modal -->\n    <OAuthScopesAddModal\n      :scope=\"editingScope\"\n      :scopes=\"Object.keys(flow.scopes ?? {})\"\n      :state=\"scopeFormModal\"\n      @submit=\"handleScopeFormSubmit\" />\n  </DataTableCell>\n</template>\n\n<style>\n/* Matches AddressBar.vue `.address-bar-bg-states` / `.fade-right` (header URL input). */\n.oauth-scope-row-action-rail {\n  --oauth-scope-row-rail-bg: color-mix(\n    in srgb,\n    var(--scalar-background-1),\n    var(--scalar-background-2)\n  );\n  background: linear-gradient(\n    90deg,\n    color-mix(in srgb, var(--oauth-scope-row-rail-bg), transparent 100%) 0%,\n    color-mix(in srgb, var(--oauth-scope-row-rail-bg), transparent 20%) 30%,\n    var(--oauth-scope-row-rail-bg) 100%\n  );\n}\n\n.no-scrollbar::-webkit-scrollbar {\n  display: none;\n}\n\n.no-scrollbar {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n</style>\n"],"mappings":"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"}

package/dist/v2/components/data-table/DataTable.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/data-table/DataTable.vue"],"names":[],"mappings":"AAyCA,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAA;IAC/B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAC;AAsDF,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"DataTable.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/data-table/DataTable.vue"],"names":[],"mappings":"AAgDA,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAA;IAC/B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAC;AA0DF,QAAA,IAAI,OAAO,IAAU,EAAE,OAAO,IAAW,CAAE;AAC3C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/v2/components/data-table/DataTable.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.vue.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineProps<{\n  columns: (string | undefined)[]\n  /** Scroll horizontally */\n  scroll?: boolean\n  /** Presentational table */\n  presentational?: boolean\n}>()\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        scroll ? 'overflow-x-auto custom-scroll' : 'overflow-visible',\n        'scalar-data-table',\n      )\n    \">\n    <table\n      class=\"mb-0 grid min-h-8 auto-rows-auto\"\n      :class=\"{ 'w-max min-w-full': scroll }\"\n      :role=\"presentational ? 'presentation' : 'table'\"\n      :style=\"{\n        gridTemplateColumns: columns.map((col) => col || '1fr').join(' '),\n      }\">\n      <caption\n        v-if=\"$slots.caption\"\n        class=\"sr-only\">\n        <slot name=\"caption\" />\n      </caption>\n      <slot />\n    </table>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DataTable.vue.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineProps<{\n  columns: (string | undefined)[]\n  /** Scroll horizontally */\n  scroll?: boolean\n  /** Presentational table */\n  presentational?: boolean\n}>()\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        scroll ? 'overflow-x-auto custom-scroll' : 'overflow-visible',\n        'scalar-data-table',\n      )\n    \">\n    <table\n      class=\"mb-0 grid min-h-8 auto-rows-auto\"\n      :class=\"{ 'w-max min-w-full': scroll }\"\n      :role=\"presentational ? 'presentation' : 'table'\"\n      :style=\"{\n        gridTemplateColumns: columns.map((col) => col || '1fr').join(' '),\n      }\">\n      <caption\n        v-if=\"$slots.caption\"\n        class=\"sr-only\">\n        <slot name=\"caption\" />\n      </caption>\n      <!--\n        The HTML parser inserts a `tbody` around rows that sit directly under a `table`, so the\n        rows are wrapped in one here to keep server-rendered markup hydratable. `contents` keeps\n        it out of the table's grid, the same way the rows lay themselves out.\n      -->\n      <tbody class=\"contents\">\n        <slot />\n      </tbody>\n    </table>\n  </div>\n</template>\n"],"mappings":""}

package/dist/v2/components/data-table/DataTable.vue.script.js

@@ -6,6 +6,7 @@ var _hoisted_2 = {
 	key: 0,
 	class: "sr-only"
 };
+var _hoisted_3 = { class: "contents" };
 var DataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "DataTable",
 	props: {
@@ -20,7 +21,7 @@ var DataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				class: normalizeClass(["mb-0 grid min-h-8 auto-rows-auto", { "w-max min-w-full": __props.scroll }]),
 				role: __props.presentational ? "presentation" : "table",
 				style: normalizeStyle({ gridTemplateColumns: __props.columns.map((col) => col || "1fr").join(" ") })
-			}, [_ctx.$slots.caption ? (openBlock(), createElementBlock("caption", _hoisted_2, [renderSlot(_ctx.$slots, "caption")])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 14, _hoisted_1)], 16);
+			}, [_ctx.$slots.caption ? (openBlock(), createElementBlock("caption", _hoisted_2, [renderSlot(_ctx.$slots, "caption")])) : createCommentVNode("", true), createElementVNode("tbody", _hoisted_3, [renderSlot(_ctx.$slots, "default")])], 14, _hoisted_1)], 16);
 		};
 	}
 });

package/dist/v2/components/data-table/DataTable.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.vue.script.js","names":["$slots"],"sources":["../../../../src/v2/components/data-table/DataTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineProps<{\n  columns: (string | undefined)[]\n  /** Scroll horizontally */\n  scroll?: boolean\n  /** Presentational table */\n  presentational?: boolean\n}>()\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        scroll ? 'overflow-x-auto custom-scroll' : 'overflow-visible',\n        'scalar-data-table',\n      )\n    \">\n    <table\n      class=\"mb-0 grid min-h-8 auto-rows-auto\"\n      :class=\"{ 'w-max min-w-full': scroll }\"\n      :role=\"presentational ? 'presentation' : 'table'\"\n      :style=\"{\n        gridTemplateColumns: columns.map((col) => col || '1fr').join(' '),\n      }\">\n      <caption\n        v-if=\"$slots.caption\"\n        class=\"sr-only\">\n        <slot name=\"caption\" />\n      </caption>\n      <slot />\n    </table>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAUA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAqBM,OAAA,eAAA,mBApBW,MAAA,EAAA,CAAE,CAAU,QAAA,SAAM,kCAAA,oBAAA,mBAAA,CAAA,CAAA,GAAA,CAMjC,mBAaQ,SAAA;IAZN,OAAK,eAAA,CAAC,oCAAkC,EAAA,oBACV,QAAA,OAAM,CAAA,CAAA;IACnC,MAAM,QAAA,iBAAc,iBAAA;IACpB,OAAK,eAAA,EAAA,qBAAiC,QAAA,QAAQ,KAAK,QAAQ,OAAG,KAAA,CAAA,CAAW,KAAI,GAAA,EAAA,CAAA;OAItEA,KAAAA,OAAO,WAAA,UAAA,GADf,mBAIU,WAJV,YAIU,CADR,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAEzB,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA,CAAA,GAAA,EAAA"}
+{"version":3,"file":"DataTable.vue.script.js","names":["$slots"],"sources":["../../../../src/v2/components/data-table/DataTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineProps<{\n  columns: (string | undefined)[]\n  /** Scroll horizontally */\n  scroll?: boolean\n  /** Presentational table */\n  presentational?: boolean\n}>()\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        scroll ? 'overflow-x-auto custom-scroll' : 'overflow-visible',\n        'scalar-data-table',\n      )\n    \">\n    <table\n      class=\"mb-0 grid min-h-8 auto-rows-auto\"\n      :class=\"{ 'w-max min-w-full': scroll }\"\n      :role=\"presentational ? 'presentation' : 'table'\"\n      :style=\"{\n        gridTemplateColumns: columns.map((col) => col || '1fr').join(' '),\n      }\">\n      <caption\n        v-if=\"$slots.caption\"\n        class=\"sr-only\">\n        <slot name=\"caption\" />\n      </caption>\n      <!--\n        The HTML parser inserts a `tbody` around rows that sit directly under a `table`, so the\n        rows are wrapped in one here to keep server-rendered markup hydratable. `contents` keeps\n        it out of the table's grid, the same way the rows lay themselves out.\n      -->\n      <tbody class=\"contents\">\n        <slot />\n      </tbody>\n    </table>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAUA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBA4BM,OAAA,eAAA,mBA3BW,MAAA,EAAA,CAAE,CAAU,QAAA,SAAM,kCAAA,oBAAA,mBAAA,CAAA,CAAA,GAAA,CAMjC,mBAoBQ,SAAA;IAnBN,OAAK,eAAA,CAAC,oCAAkC,EAAA,oBACV,QAAA,OAAM,CAAA,CAAA;IACnC,MAAM,QAAA,iBAAc,iBAAA;IACpB,OAAK,eAAA,EAAA,qBAAiC,QAAA,QAAQ,KAAK,QAAQ,OAAG,KAAA,CAAA,CAAW,KAAI,GAAA,EAAA,CAAA;OAItEA,KAAAA,OAAO,WAAA,UAAA,GADf,mBAIU,WAJV,YAIU,CADR,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAOzB,mBAEQ,SAFR,YAEQ,CADN,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,IAAA,UAAA,CAAA,GAAA,EAAA"}

package/dist/v2/constants.js

@@ -1,6 +1,6 @@
 //#region src/v2/constants.ts
 /** The version number taken from the package.json. Consumers can override at build time via define (e.g. OVERRIDE_PACKAGE_VERSION: JSON.stringify('1.2.3')). */
-var APP_VERSION = typeof OVERRIDE_PACKAGE_VERSION !== "undefined" ? OVERRIDE_PACKAGE_VERSION : "3.20.0";
+var APP_VERSION = typeof OVERRIDE_PACKAGE_VERSION !== "undefined" ? OVERRIDE_PACKAGE_VERSION : "3.21.1";
 //#endregion
 export { APP_VERSION };