@scalar/api-client 3.19.3 → 3.21.0

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

@@ -1 +1 @@
-{"version":3,"file":"OAuthScopesAddModal.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OAuthScopesAddModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport {\n  CommandActionForm,\n  CommandActionInput,\n} from '@/v2/features/command-palette'\n\nconst {\n  state,\n  scopes,\n  scope = null,\n} = defineProps<{\n  state: ModalState\n  /** Existing scope names on the flow, used to prevent duplicates */\n  scopes: string[]\n  /**\n   * When provided, the modal switches to \"edit\" mode and is prefilled with this scope.\n   * The original name is retained so the consumer can rename it.\n   */\n  scope?: { name: string; description: string } | null\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (\n    event: 'submit',\n    scopeData: {\n      name: string\n      description: string\n      /** The original name on the flow, only set when editing an existing scope */\n      oldName?: string\n    },\n  ): void\n}>()\n\nconst isEditMode = computed(() => scope !== null)\nconst title = computed(() => (isEditMode.value ? 'Edit Scope' : 'Add Scope'))\nconst submitLabel = computed(() => (isEditMode.value ? 'Save' : 'Add Scope'))\n\nconst scopeData = ref({\n  name: '',\n  description: '',\n})\n\n/**\n * Tracks whether the user has interacted with the name field so we can defer the\n * \"name is required\" hint until after the first edit, rather than on initial render.\n */\nconst hasTouchedName = ref(false)\n\nwatch(\n  () => scopeData.value.name,\n  () => {\n    hasTouchedName.value = true\n  },\n)\n\nconst trimmedName = computed(() => scopeData.value.name.trim())\n\n/**\n * Whether the chosen name collides with an existing scope on the flow.\n * In edit mode we allow keeping the original name unchanged.\n */\nconst isDuplicateName = computed(() => {\n  if (!trimmedName.value) {\n    return false\n  }\n  if (isEditMode.value && trimmedName.value === scope?.name) {\n    return false\n  }\n  return scopes.includes(trimmedName.value)\n})\n\n/** Human readable validation message rendered inline in the modal */\nconst validationError = computed<string | null>(() => {\n  if (isDuplicateName.value) {\n    return `A scope named \"${trimmedName.value}\" already exists.`\n  }\n  if (hasTouchedName.value && !trimmedName.value) {\n    return 'Scope name is required.'\n  }\n  return null\n})\n\nconst isSubmitDisabled = computed(\n  () => !trimmedName.value || isDuplicateName.value,\n)\n\nconst handleSubmit = () => {\n  if (isSubmitDisabled.value) {\n    return\n  }\n\n  emit('submit', {\n    name: trimmedName.value,\n    description: scopeData.value.description,\n    ...(isEditMode.value && scope ? { oldName: scope.name } : {}),\n  })\n  state.hide()\n}\n\nwatch(\n  () => state.open,\n  (isOpen) => {\n    if (!isOpen) {\n      return\n    }\n\n    scopeData.value = scope\n      ? { name: scope.name, description: scope.description }\n      : { name: '', description: '' }\n    // Clearing `name` schedules the `scopeData.name` watcher, which sets\n    // `hasTouchedName` back to true in the same flush. Defer the reset so it\n    // runs after that watcher and reopening add mode does not show a false\n    // \"Scope name is required\" error.\n    void nextTick(() => {\n      hasTouchedName.value = false\n    })\n  },\n)\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"overflow-y-auto\"\n    size=\"xs\"\n    :state=\"state\"\n    :title=\"title\">\n    <CommandActionForm\n      :disabled=\"isSubmitDisabled\"\n      @cancel=\"emit('cancel')\"\n      @submit=\"handleSubmit\">\n      <!-- Name -->\n      <div class=\"flex min-h-8 items-start gap-2 text-sm\">\n        Name:\n        <CommandActionInput\n          v-model=\"scopeData.name\"\n          autofocus\n          class=\"field-sizing-content !p-0\"\n          placeholder=\"read:user\" />\n      </div>\n\n      <!-- Description -->\n      <div class=\"flex min-h-8 items-start gap-2 text-sm\">\n        Description:\n        <CommandActionInput\n          v-model=\"scopeData.description\"\n          :autofocus=\"false\"\n          class=\"field-sizing-content !p-0\"\n          placeholder=\"Read user data\" />\n      </div>\n\n      <!-- Inline validation error -->\n      <div\n        v-if=\"validationError\"\n        class=\"text-red text-xs\"\n        role=\"alert\">\n        {{ validationError }}\n      </div>\n\n      <template #submit>{{ submitLabel }}</template>\n    </CommandActionForm>\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAwBA,MAAM,OAAO;EAab,MAAM,aAAa,eAAe,QAAA,UAAU,IAAI;EAChD,MAAM,QAAQ,eAAgB,WAAW,QAAQ,eAAe,WAAY;EAC5E,MAAM,cAAc,eAAgB,WAAW,QAAQ,SAAS,WAAY;EAE5E,MAAM,YAAY,IAAI;GACpB,MAAM;GACN,aAAa;EACf,CAAC;;;;;EAMD,MAAM,iBAAiB,IAAI,KAAK;EAEhC,YACQ,UAAU,MAAM,YAChB;GACJ,eAAe,QAAQ;EACzB,CACF;EAEA,MAAM,cAAc,eAAe,UAAU,MAAM,KAAK,KAAK,CAAC;;;;;EAM9D,MAAM,kBAAkB,eAAe;GACrC,IAAI,CAAC,YAAY,OACf,OAAO;GAET,IAAI,WAAW,SAAS,YAAY,UAAU,QAAA,OAAO,MACnD,OAAO;GAET,OAAO,QAAA,OAAO,SAAS,YAAY,KAAK;EAC1C,CAAC;;EAGD,MAAM,kBAAkB,eAA8B;GACpD,IAAI,gBAAgB,OAClB,OAAO,kBAAkB,YAAY,MAAM;GAE7C,IAAI,eAAe,SAAS,CAAC,YAAY,OACvC,OAAO;GAET,OAAO;EACT,CAAC;EAED,MAAM,mBAAmB,eACjB,CAAC,YAAY,SAAS,gBAAgB,KAC9C;EAEA,MAAM,qBAAqB;GACzB,IAAI,iBAAiB,OACnB;GAGF,KAAK,UAAU;IACb,MAAM,YAAY;IAClB,aAAa,UAAU,MAAM;IAC7B,GAAI,WAAW,SAAS,QAAA,QAAQ,EAAE,SAAS,QAAA,MAAM,KAAK,IAAI,CAAC;GAC7D,CAAC;GACD,QAAA,MAAM,KAAK;EACb;EAEA,YACQ,QAAA,MAAM,OACX,WAAW;GACV,IAAI,CAAC,QACH;GAGF,UAAU,QAAQ,QAAA,QACd;IAAE,MAAM,QAAA,MAAM;IAAM,aAAa,QAAA,MAAM;GAAY,IACnD;IAAE,MAAM;IAAI,aAAa;GAAG;GAKhC,eAAoB;IAClB,eAAe,QAAQ;GACzB,CAAC;EACH,CACF;;uBAIE,YAuCc,MAAA,WAAA,GAAA;IAtCZ,WAAU;IACV,MAAK;IACJ,OAAO,QAAA;IACP,OAAO,MAAA;;2BAkCY,CAjCpB,YAiCoB,MAAA,yBAAA,GAAA;KAhCjB,UAAU,iBAAA;KACV,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;KACZ,UAAQ;;KA6BE,QAAM,cAAkB,CAAA,gBAAA,gBAAd,YAAA,KAAW,GAAA,CAAA,CAAA,CAAA;4BApB1B;MAPN,mBAOM,OAPN,YAOM,CAAA,OAAA,OAAA,OAAA,KAAA,gBAP8C,WAElD,EAAA,IAAA,YAI4B,MAAA,0BAAA,GAAA;mBAHjB,UAAA,MAAU;8EAAV,MAAU,OAAI;OACvB,WAAA;OACA,OAAM;OACN,aAAY;;MAIhB,mBAOM,OAPN,YAOM,CAAA,OAAA,OAAA,OAAA,KAAA,gBAP8C,kBAElD,EAAA,IAAA,YAIiC,MAAA,0BAAA,GAAA;mBAHtB,UAAA,MAAU;8EAAV,MAAU,cAAW;OAC7B,WAAW;OACZ,OAAM;OACN,aAAY;;MAKR,gBAAA,SAAA,UAAA,GADR,mBAKM,OALN,YAKM,gBADD,gBAAA,KAAe,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}
+{"version":3,"file":"OAuthScopesAddModal.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OAuthScopesAddModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarModal, type ModalState } from '@scalar/components/modal'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport {\n  CommandActionForm,\n  CommandActionInput,\n} from '@/v2/features/command-palette'\nimport { useLocalization } from '@/v2/features/localization'\n\nconst {\n  state,\n  scopes,\n  scope = null,\n} = defineProps<{\n  state: ModalState\n  /** Existing scope names on the flow, used to prevent duplicates */\n  scopes: string[]\n  /**\n   * When provided, the modal switches to \"edit\" mode and is prefilled with this scope.\n   * The original name is retained so the consumer can rename it.\n   */\n  scope?: { name: string; description: string } | null\n}>()\n\nconst emit = defineEmits<{\n  (event: 'cancel'): void\n  (\n    event: 'submit',\n    scopeData: {\n      name: string\n      description: string\n      /** The original name on the flow, only set when editing an existing scope */\n      oldName?: string\n    },\n  ): void\n}>()\n\nconst { translate } = useLocalization()\n\nconst isEditMode = computed(() => scope !== null)\nconst title = computed(() =>\n  isEditMode.value\n    ? translate('apiClient.oauthScopesAddModal.edit')\n    : translate('apiClient.oauthScopesAddModal.add'),\n)\nconst submitLabel = computed(() =>\n  isEditMode.value\n    ? translate('apiClient.oauthScopesAddModal.save')\n    : translate('apiClient.oauthScopesAddModal.add'),\n)\n\nconst scopeData = ref({\n  name: '',\n  description: '',\n})\n\n/**\n * Tracks whether the user has interacted with the name field so we can defer the\n * \"name is required\" hint until after the first edit, rather than on initial render.\n */\nconst hasTouchedName = ref(false)\n\nwatch(\n  () => scopeData.value.name,\n  () => {\n    hasTouchedName.value = true\n  },\n)\n\nconst trimmedName = computed(() => scopeData.value.name.trim())\n\n/**\n * Whether the chosen name collides with an existing scope on the flow.\n * In edit mode we allow keeping the original name unchanged.\n */\nconst isDuplicateName = computed(() => {\n  if (!trimmedName.value) {\n    return false\n  }\n  if (isEditMode.value && trimmedName.value === scope?.name) {\n    return false\n  }\n  return scopes.includes(trimmedName.value)\n})\n\n/** Human readable validation message rendered inline in the modal */\nconst validationError = computed<string | null>(() => {\n  if (isDuplicateName.value) {\n    return translate('apiClient.oauthScopesAddModal.duplicate', {\n      name: trimmedName.value,\n    })\n  }\n  if (hasTouchedName.value && !trimmedName.value) {\n    return translate('apiClient.oauthScopesAddModal.required')\n  }\n  return null\n})\n\nconst isSubmitDisabled = computed(\n  () => !trimmedName.value || isDuplicateName.value,\n)\n\nconst handleSubmit = () => {\n  if (isSubmitDisabled.value) {\n    return\n  }\n\n  emit('submit', {\n    name: trimmedName.value,\n    description: scopeData.value.description,\n    ...(isEditMode.value && scope ? { oldName: scope.name } : {}),\n  })\n  state.hide()\n}\n\nwatch(\n  () => state.open,\n  (isOpen) => {\n    if (!isOpen) {\n      return\n    }\n\n    scopeData.value = scope\n      ? { name: scope.name, description: scope.description }\n      : { name: '', description: '' }\n    // Clearing `name` schedules the `scopeData.name` watcher, which sets\n    // `hasTouchedName` back to true in the same flush. Defer the reset so it\n    // runs after that watcher and reopening add mode does not show a false\n    // \"Scope name is required\" error.\n    void nextTick(() => {\n      hasTouchedName.value = false\n    })\n  },\n)\n</script>\n\n<template>\n  <ScalarModal\n    bodyClass=\"overflow-y-auto\"\n    size=\"xs\"\n    :state=\"state\"\n    :title=\"title\">\n    <CommandActionForm\n      :disabled=\"isSubmitDisabled\"\n      @cancel=\"emit('cancel')\"\n      @submit=\"handleSubmit\">\n      <!-- Name -->\n      <div class=\"flex min-h-8 items-start gap-2 text-sm\">\n        {{ translate('apiClient.oauthScopesAddModal.name')\n        }}<CommandActionInput\n          v-model=\"scopeData.name\"\n          autofocus\n          class=\"field-sizing-content !p-0\"\n          placeholder=\"read:user\" />\n      </div>\n\n      <!-- Description -->\n      <div class=\"flex min-h-8 items-start gap-2 text-sm\">\n        {{ translate('apiClient.oauthScopesAddModal.description')\n        }}<CommandActionInput\n          v-model=\"scopeData.description\"\n          :autofocus=\"false\"\n          class=\"field-sizing-content !p-0\"\n          :placeholder=\"\n            translate('apiClient.oauthScopesAddModal.readUserData')\n          \" />\n      </div>\n\n      <!-- Inline validation error -->\n      <div\n        v-if=\"validationError\"\n        class=\"text-red text-xs\"\n        role=\"alert\">\n        {{ validationError }}\n      </div>\n\n      <template #submit>{{ submitLabel }}</template>\n    </CommandActionForm>\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAyBA,MAAM,OAAO;EAab,MAAM,EAAE,cAAc,gBAAgB;EAEtC,MAAM,aAAa,eAAe,QAAA,UAAU,IAAI;EAChD,MAAM,QAAQ,eACZ,WAAW,QACP,UAAU,oCAAoC,IAC9C,UAAU,mCAAmC,CACnD;EACA,MAAM,cAAc,eAClB,WAAW,QACP,UAAU,oCAAoC,IAC9C,UAAU,mCAAmC,CACnD;EAEA,MAAM,YAAY,IAAI;GACpB,MAAM;GACN,aAAa;EACf,CAAC;;;;;EAMD,MAAM,iBAAiB,IAAI,KAAK;EAEhC,YACQ,UAAU,MAAM,YAChB;GACJ,eAAe,QAAQ;EACzB,CACF;EAEA,MAAM,cAAc,eAAe,UAAU,MAAM,KAAK,KAAK,CAAC;;;;;EAM9D,MAAM,kBAAkB,eAAe;GACrC,IAAI,CAAC,YAAY,OACf,OAAO;GAET,IAAI,WAAW,SAAS,YAAY,UAAU,QAAA,OAAO,MACnD,OAAO;GAET,OAAO,QAAA,OAAO,SAAS,YAAY,KAAK;EAC1C,CAAC;;EAGD,MAAM,kBAAkB,eAA8B;GACpD,IAAI,gBAAgB,OAClB,OAAO,UAAU,2CAA2C,EAC1D,MAAM,YAAY,MACpB,CAAC;GAEH,IAAI,eAAe,SAAS,CAAC,YAAY,OACvC,OAAO,UAAU,wCAAwC;GAE3D,OAAO;EACT,CAAC;EAED,MAAM,mBAAmB,eACjB,CAAC,YAAY,SAAS,gBAAgB,KAC9C;EAEA,MAAM,qBAAqB;GACzB,IAAI,iBAAiB,OACnB;GAGF,KAAK,UAAU;IACb,MAAM,YAAY;IAClB,aAAa,UAAU,MAAM;IAC7B,GAAI,WAAW,SAAS,QAAA,QAAQ,EAAE,SAAS,QAAA,MAAM,KAAK,IAAI,CAAC;GAC7D,CAAC;GACD,QAAA,MAAM,KAAK;EACb;EAEA,YACQ,QAAA,MAAM,OACX,WAAW;GACV,IAAI,CAAC,QACH;GAGF,UAAU,QAAQ,QAAA,QACd;IAAE,MAAM,QAAA,MAAM;IAAM,aAAa,QAAA,MAAM;GAAY,IACnD;IAAE,MAAM;IAAI,aAAa;GAAG;GAKhC,eAAoB;IAClB,eAAe,QAAQ;GACzB,CAAC;EACH,CACF;;uBAIE,YAyCc,MAAA,WAAA,GAAA;IAxCZ,WAAU;IACV,MAAK;IACJ,OAAO,QAAA;IACP,OAAO,MAAA;;2BAoCY,CAnCpB,YAmCoB,MAAA,yBAAA,GAAA;KAlCjB,UAAU,iBAAA;KACV,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;KACZ,UAAQ;;KA+BE,QAAM,cAAkB,CAAA,gBAAA,gBAAd,YAAA,KAAW,GAAA,CAAA,CAAA,CAAA;4BAtB1B;MAPN,mBAOM,OAPN,YAOM,CAAA,gBAAA,gBAND,MAAA,SAAA,CAAS,CAAA,oCAAA,CAAA,GAAA,CAAA,GACV,YAI0B,MAAA,0BAAA,GAAA;mBAHjB,UAAA,MAAU;8EAAV,MAAU,OAAI;OACvB,WAAA;OACA,OAAM;OACN,aAAY;;MAIhB,mBASM,OATN,YASM,CAAA,gBAAA,gBARD,MAAA,SAAA,CAAS,CAAA,2CAAA,CAAA,GAAA,CAAA,GACV,YAMI,MAAA,0BAAA,GAAA;mBALK,UAAA,MAAU;8EAAV,MAAU,cAAW;OAC7B,WAAW;OACZ,OAAM;OACL,aAA0B,MAAA,SAAA,CAAS,CAAA,4CAAA;;MAOhC,gBAAA,SAAA,UAAA,GADR,mBAKM,OALN,YAKM,gBADD,gBAAA,KAAe,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

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":"AAiXA,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EACjB,MAAM,8DAA8D,CAAA;AAWrE,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,MAAM,gBAAgB,CAAA;IAChC,IAAI,EAAE,SAAS,CAAA;IACf,cAAc,EAAE,MAAM,EAAE,CAAA;CACzB,CAAC;AAstBF,QAAA,MAAM,YAAY;;iBA/sBM,MAAM,EAAE;gBAAU,MAAM;mBAAa,OAAO;;;;;;;;;;;;;;;;;iBAA5C,MAAM,EAAE;gBAAU,MAAM;mBAAa,OAAO;;;;;;;;;;;;;;;kFAktBlE,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'\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 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              Scopes Selected\n              {{ selectedScopes.length || 0 }} /\n              {{ Object.keys(flow?.scopes ?? {}).length || 0 }}\n            </template>\n            <template v-else> No Scopes Defined </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              Add Scope\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              Deselect All\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              Select All\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=\"`Edit ${label}`\"\n                      size=\"sm\"\n                      @click.stop=\"\n                        openEditScopeModal({\n                          id,\n                          description: description ?? '',\n                        })\n                      \" />\n                    <ScalarIconButton\n                      :icon=\"ScalarIconTrash\"\n                      :label=\"`Delete ${label}`\"\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=\"`Select ${label} scope`\"\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

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../../features/localization/index.js";
 import DataTableCell_default from "../../../components/data-table/DataTableCell.vue.js";
 import DataTableCheckbox_default from "../../../components/data-table/DataTableCheckbox.vue.js";
 import DataTableRow_default from "../../../components/data-table/DataTableRow.vue.js";
@@ -18,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: {
@@ -35,6 +37,7 @@ var OAuthScopesInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	],
 	setup(__props, { emit: __emit }) {
 		const emits = __emit;
+		const { translate } = useLocalization();
 		const searchQuery = ref("");
 		/**
 		* The scope currently being edited, used to switch the shared modal into edit mode.
@@ -138,7 +141,7 @@ var OAuthScopesInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		};
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(DataTableCell_default), { class: "h-auto !max-h-[initial] min-h-8 items-center" }, {
-				default: withCtx(() => [createElementVNode("div", _hoisted_1, [_cache[7] || (_cache[7] = createElementVNode("div", { class: "text-c-1 h-full items-center" }, null, -1)), (openBlock(), createBlock(unref(Disclosure), {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [_cache[4] || (_cache[4] = createElementVNode("div", { class: "text-c-1 h-full items-center" }, null, -1)), (openBlock(), createBlock(unref(Disclosure), {
 					key: remountKey.value,
 					as: "div",
 					class: "bl flex w-full flex-col",
@@ -152,7 +155,10 @@ var OAuthScopesInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 						]),
 						disabled: !hasScopes.value
 					}, {
-						default: withCtx(() => [hasScopes.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(" Scopes Selected " + toDisplayString(__props.selectedScopes.length || 0) + " / " + toDisplayString(Object.keys(__props.flow?.scopes ?? {}).length || 0), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(" No Scopes Defined ")], 64))]),
+						default: withCtx(() => [hasScopes.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(unref(translate)("apiClient.oauthScopesInput.selectedScopes", {
+							count: __props.selectedScopes.length,
+							total: Object.keys(__props.flow?.scopes ?? {}).length
+						})), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(unref(translate)("apiClient.oauthScopesInput.noScopesDefined")), 1)], 64))]),
 						_: 1
 					}, 8, ["class", "disabled"]), createElementVNode("div", _hoisted_3, [
 						createVNode(unref(ScalarButton), {
@@ -161,7 +167,7 @@ var OAuthScopesInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 							variant: "ghost",
 							onClick: withModifiers(openAddScopeModal, ["stop"])
 						}, {
-							default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode(" Add Scope ", -1)])]),
+							default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("apiClient.oauthScopesInput.addScope")), 1)]),
 							_: 1
 						}),
 						hasScopes.value && allScopesSelected.value ? (openBlock(), createBlock(unref(ScalarButton), {
@@ -171,7 +177,7 @@ var OAuthScopesInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 							variant: "ghost",
 							onClick: withModifiers(deselectAllScopes, ["stop"])
 						}, {
-							default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode(" Deselect All ", -1)])]),
+							default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("apiClient.oauthScopesInput.deselectAll")), 1)]),
 							_: 1
 						})) : createCommentVNode("", true),
 						hasScopes.value && !allScopesSelected.value ? (openBlock(), createBlock(unref(ScalarButton), {
@@ -181,7 +187,7 @@ var OAuthScopesInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 							variant: "ghost",
 							onClick: withModifiers(selectAllScopes, ["stop"])
 						}, {
-							default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode(" Select All ", -1)])]),
+							default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("apiClient.oauthScopesInput.selectAll")), 1)]),
 							_: 1
 						})) : createCommentVNode("", true),
 						hasScopes.value ? (openBlock(), createBlock(unref(DisclosureButton), {
@@ -201,19 +207,19 @@ 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[6] || (_cache[6] = 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), {
 										icon: unref(ScalarIconPencilSimple),
-										label: `Edit ${label}`,
+										label: unref(translate)("apiClient.oauthScopesInput.editScope", { name: label }),
 										size: "sm",
 										onClick: withModifiers(($event) => openEditScopeModal({
 											id,
@@ -225,7 +231,7 @@ var OAuthScopesInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 										"onClick"
 									]), createVNode(unref(ScalarIconButton), {
 										icon: unref(ScalarIconTrash),
-										label: `Delete ${label}`,
+										label: unref(translate)("apiClient.oauthScopesInput.deleteScope", { name: label }),
 										size: "sm",
 										onClick: withModifiers(($event) => handleDeleteScope(id), ["stop"])
 									}, null, 8, [
@@ -235,7 +241,7 @@ var OAuthScopesInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 									])])]),
 									_: 2
 								}, 1024), createVNode(unref(DataTableCheckbox_default), {
-									ariaLabel: `Select ${label} scope`,
+									ariaLabel: unref(translate)("apiClient.oauthScopesInput.selectScope", { name: label }),
 									modelValue: __props.selectedScopes.includes(id),
 									onClick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"])),
 									"onUpdate:modelValue": ($event) => setScope(id, $event)
@@ -246,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'\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 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              Scopes Selected\n              {{ selectedScopes.length || 0 }} /\n              {{ Object.keys(flow?.scopes ?? {}).length || 0 }}\n            </template>\n            <template v-else> No Scopes Defined </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              Add Scope\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              Deselect All\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              Select All\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=\"`Edit ${label}`\"\n                      size=\"sm\"\n                      @click.stop=\"\n                        openEditScopeModal({\n                          id,\n                          description: description ?? '',\n                        })\n                      \" />\n                    <ScalarIconButton\n                      :icon=\"ScalarIconTrash\"\n                      :label=\"`Delete ${label}`\"\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=\"`Select ${label} scope`\"\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/blocks/scalar-auth-selector-block/components/OpenIDConnect.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OpenIDConnect.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OpenIDConnect.vue"],"names":[],"mappings":"AAyHA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AACnH,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,8DAA8D,CAAA;AAEvG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kDAAkD,CAAA;AAOnF,KAAK,WAAW,GAAG;IACjB,wCAAwC;IACxC,WAAW,EAAE,kBAAkB,CAAA;IAC/B,2CAA2C;IAC3C,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,kCAAkC;IAClC,oBAAoB,EAAE,MAAM,MAAM,GAAG,KAAK,CAAA;IAC1C,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,4BAA4B;IAC5B,MAAM,EAAE,mBAAmB,CAAA;IAC3B,kFAAkF;IAClF,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAC;AAoLF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"OpenIDConnect.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OpenIDConnect.vue"],"names":[],"mappings":"AA6HA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AACnH,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,8DAA8D,CAAA;AAEvG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kDAAkD,CAAA;AAQnF,KAAK,WAAW,GAAG;IACjB,wCAAwC;IACxC,WAAW,EAAE,kBAAkB,CAAA;IAC/B,2CAA2C;IAC3C,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,kCAAkC;IAClC,oBAAoB,EAAE,MAAM,MAAM,GAAG,KAAK,CAAA;IAC1C,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,4BAA4B;IAC5B,MAAM,EAAE,mBAAmB,CAAA;IAC3B,kFAAkF;IAClF,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAC;AA0LF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1 +1 @@
-{"version":3,"file":"OpenIDConnect.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OpenIDConnect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { useLoadingState } from '@scalar/components/loading'\nimport { useToasts } from '@scalar/use-toasts'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { type OpenIdConnectObject } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\n\nimport type { CustomFetch } from '@/v2/blocks/operation-block/helpers/send-request'\nimport { fetchOpenIDConnectDiscovery } from '@/v2/blocks/scalar-auth-selector-block/helpers/fetch-openid-connect-discovery'\nimport { openIDDiscoveryToFlows } from '@/v2/blocks/scalar-auth-selector-block/helpers/openid-discovery-to-flows'\nimport { DataTableRow } from '@/v2/components/data-table'\n\nimport RequestAuthDataTableInput from './RequestAuthDataTableInput.vue'\n\nconst {\n  environment,\n  eventBus,\n  getStaticBorderClass,\n  name,\n  scheme,\n  proxyUrl,\n  customFetch,\n} = defineProps<{\n  /** Current environment configuration */\n  environment: XScalarEnvironment\n  /** Event bus for authentication updates */\n  eventBus: WorkspaceEventBus\n  /** Get the static border class */\n  getStaticBorderClass: () => string | false\n  /** Name of the security scheme */\n  name: string\n  /** Proxy URL */\n  proxyUrl: string\n  /** OpenID Connect scheme */\n  scheme: OpenIdConnectObject\n  /** Optional fetch override (IPC-backed on desktop) used for discovery requests */\n  customFetch?: CustomFetch\n}>()\n\nconst loader = useLoadingState()\nconst { toast } = useToasts()\n\n/**\n * Fetches the OpenID Connect discovery document and triggers authorization\n */\nconst handleOpenIdConnect = async (): Promise<void> => {\n  if (loader.isLoading || !scheme.openIdConnectUrl) {\n    return\n  }\n\n  loader.start()\n  const [error, _discovery] = await fetchOpenIDConnectDiscovery(\n    scheme.openIdConnectUrl,\n    proxyUrl,\n    customFetch,\n  )\n  await loader.clear()\n\n  // Toast for error\n  if (error) {\n    console.error(error)\n    toast(\n      error?.message ?? 'Failed to fetch OpenID Connect configuration',\n      'error',\n    )\n    return\n  }\n\n  /** Set the newly discovered params in the secret store */\n  const openIdConnect = openIDDiscoveryToFlows(_discovery)\n  eventBus.emit('auth:update:security-scheme-secrets', {\n    payload: openIdConnect,\n    name,\n    overwrite: true,\n  })\n}\n\nconst handleUpdateOpenIdConnectUrl = (value: string): void =>\n  eventBus.emit('auth:update:security-scheme', {\n    payload: {\n      type: 'openIdConnect',\n      openIdConnectUrl: value,\n    },\n    name,\n  })\n</script>\n\n<template>\n  <DataTableRow>\n    <RequestAuthDataTableInput\n      :containerClass=\"getStaticBorderClass()\"\n      :environment\n      :modelValue=\"scheme.openIdConnectUrl\"\n      placeholder=\"https://example.com/.well-known/openid-configuration\"\n      required\n      @update:modelValue=\"handleUpdateOpenIdConnectUrl\">\n      Discovery URL\n    </RequestAuthDataTableInput>\n  </DataTableRow>\n\n  <DataTableRow class=\"min-w-full\">\n    <div class=\"flex h-8 w-full items-center justify-end border-t\">\n      <ScalarButton\n        class=\"mr-0.75 p-0 px-2 py-0.5\"\n        :disabled=\"!scheme.openIdConnectUrl\"\n        :loader\n        size=\"sm\"\n        variant=\"outlined\"\n        @click=\"handleOpenIdConnect\">\n        Fetch Configuration\n      </ScalarButton>\n    </div>\n  </DataTableRow>\n</template>\n"],"mappings":""}
+{"version":3,"file":"OpenIDConnect.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OpenIDConnect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { useLoadingState } from '@scalar/components/loading'\nimport { useToasts } from '@scalar/use-toasts'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { type OpenIdConnectObject } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\n\nimport type { CustomFetch } from '@/v2/blocks/operation-block/helpers/send-request'\nimport { fetchOpenIDConnectDiscovery } from '@/v2/blocks/scalar-auth-selector-block/helpers/fetch-openid-connect-discovery'\nimport { openIDDiscoveryToFlows } from '@/v2/blocks/scalar-auth-selector-block/helpers/openid-discovery-to-flows'\nimport { DataTableRow } from '@/v2/components/data-table'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport RequestAuthDataTableInput from './RequestAuthDataTableInput.vue'\n\nconst {\n  environment,\n  eventBus,\n  getStaticBorderClass,\n  name,\n  scheme,\n  proxyUrl,\n  customFetch,\n} = defineProps<{\n  /** Current environment configuration */\n  environment: XScalarEnvironment\n  /** Event bus for authentication updates */\n  eventBus: WorkspaceEventBus\n  /** Get the static border class */\n  getStaticBorderClass: () => string | false\n  /** Name of the security scheme */\n  name: string\n  /** Proxy URL */\n  proxyUrl: string\n  /** OpenID Connect scheme */\n  scheme: OpenIdConnectObject\n  /** Optional fetch override (IPC-backed on desktop) used for discovery requests */\n  customFetch?: CustomFetch\n}>()\n\nconst { translate } = useLocalization()\n\nconst loader = useLoadingState()\nconst { toast } = useToasts()\n\n/**\n * Fetches the OpenID Connect discovery document and triggers authorization\n */\nconst handleOpenIdConnect = async (): Promise<void> => {\n  if (loader.isLoading || !scheme.openIdConnectUrl) {\n    return\n  }\n\n  loader.start()\n  const [error, _discovery] = await fetchOpenIDConnectDiscovery(\n    scheme.openIdConnectUrl,\n    proxyUrl,\n    customFetch,\n  )\n  await loader.clear()\n\n  // Toast for error\n  if (error) {\n    console.error(error)\n    toast(\n      error?.message ??\n        translate('apiClient.openIdConnect.failedToFetchConfiguration'),\n      'error',\n    )\n    return\n  }\n\n  /** Set the newly discovered params in the secret store */\n  const openIdConnect = openIDDiscoveryToFlows(_discovery)\n  eventBus.emit('auth:update:security-scheme-secrets', {\n    payload: openIdConnect,\n    name,\n    overwrite: true,\n  })\n}\n\nconst handleUpdateOpenIdConnectUrl = (value: string): void =>\n  eventBus.emit('auth:update:security-scheme', {\n    payload: {\n      type: 'openIdConnect',\n      openIdConnectUrl: value,\n    },\n    name,\n  })\n</script>\n\n<template>\n  <DataTableRow>\n    <RequestAuthDataTableInput\n      :containerClass=\"getStaticBorderClass()\"\n      :environment\n      :modelValue=\"scheme.openIdConnectUrl\"\n      placeholder=\"https://example.com/.well-known/openid-configuration\"\n      required\n      @update:modelValue=\"handleUpdateOpenIdConnectUrl\">\n      {{ translate('apiClient.openIdConnect.discoveryUrl') }}\n    </RequestAuthDataTableInput>\n  </DataTableRow>\n\n  <DataTableRow class=\"min-w-full\">\n    <div class=\"flex h-8 w-full items-center justify-end border-t\">\n      <ScalarButton\n        class=\"mr-0.75 p-0 px-2 py-0.5\"\n        :disabled=\"!scheme.openIdConnectUrl\"\n        :loader\n        size=\"sm\"\n        variant=\"outlined\"\n        @click=\"handleOpenIdConnect\">\n        {{ translate('apiClient.openIdConnect.fetchConfiguration') }}\n      </ScalarButton>\n    </div>\n  </DataTableRow>\n</template>\n"],"mappings":""}

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

@@ -1,8 +1,9 @@
+import { useLocalization } from "../../../features/localization/index.js";
 import DataTableRow_default from "../../../components/data-table/DataTableRow.vue.js";
 import RequestAuthDataTableInput_default from "./RequestAuthDataTableInput.vue.js";
 import { fetchOpenIDConnectDiscovery } from "../helpers/fetch-openid-connect-discovery.js";
 import { openIDDiscoveryToFlows } from "../helpers/openid-discovery-to-flows.js";
-import { Fragment, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, unref, withCtx } from "vue";
+import { Fragment, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
 import { ScalarButton } from "@scalar/components/button";
 import { useToasts } from "@scalar/use-toasts";
 import { useLoadingState } from "@scalar/components/loading";
@@ -20,6 +21,7 @@ var OpenIDConnect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		customFetch: {}
 	},
 	setup(__props) {
+		const { translate } = useLocalization();
 		const loader = useLoadingState();
 		const { toast } = useToasts();
 		/**
@@ -32,7 +34,7 @@ var OpenIDConnect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			await loader.clear();
 			if (error) {
 				console.error(error);
-				toast(error?.message ?? "Failed to fetch OpenID Connect configuration", "error");
+				toast(error?.message ?? translate("apiClient.openIdConnect.failedToFetchConfiguration"), "error");
 				return;
 			}
 			/** Set the newly discovered params in the secret store */
@@ -60,7 +62,7 @@ var OpenIDConnect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					required: "",
 					"onUpdate:modelValue": handleUpdateOpenIdConnectUrl
 				}, {
-					default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode(" Discovery URL ", -1)])]),
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("apiClient.openIdConnect.discoveryUrl")), 1)]),
 					_: 1
 				}, 8, [
 					"containerClass",
@@ -77,7 +79,7 @@ var OpenIDConnect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					variant: "outlined",
 					onClick: handleOpenIdConnect
 				}, {
-					default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode(" Fetch Configuration ", -1)])]),
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("apiClient.openIdConnect.fetchConfiguration")), 1)]),
 					_: 1
 				}, 8, ["disabled", "loader"])])]),
 				_: 1

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

@@ -1 +1 @@
-{"version":3,"file":"OpenIDConnect.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OpenIDConnect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { useLoadingState } from '@scalar/components/loading'\nimport { useToasts } from '@scalar/use-toasts'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { type OpenIdConnectObject } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\n\nimport type { CustomFetch } from '@/v2/blocks/operation-block/helpers/send-request'\nimport { fetchOpenIDConnectDiscovery } from '@/v2/blocks/scalar-auth-selector-block/helpers/fetch-openid-connect-discovery'\nimport { openIDDiscoveryToFlows } from '@/v2/blocks/scalar-auth-selector-block/helpers/openid-discovery-to-flows'\nimport { DataTableRow } from '@/v2/components/data-table'\n\nimport RequestAuthDataTableInput from './RequestAuthDataTableInput.vue'\n\nconst {\n  environment,\n  eventBus,\n  getStaticBorderClass,\n  name,\n  scheme,\n  proxyUrl,\n  customFetch,\n} = defineProps<{\n  /** Current environment configuration */\n  environment: XScalarEnvironment\n  /** Event bus for authentication updates */\n  eventBus: WorkspaceEventBus\n  /** Get the static border class */\n  getStaticBorderClass: () => string | false\n  /** Name of the security scheme */\n  name: string\n  /** Proxy URL */\n  proxyUrl: string\n  /** OpenID Connect scheme */\n  scheme: OpenIdConnectObject\n  /** Optional fetch override (IPC-backed on desktop) used for discovery requests */\n  customFetch?: CustomFetch\n}>()\n\nconst loader = useLoadingState()\nconst { toast } = useToasts()\n\n/**\n * Fetches the OpenID Connect discovery document and triggers authorization\n */\nconst handleOpenIdConnect = async (): Promise<void> => {\n  if (loader.isLoading || !scheme.openIdConnectUrl) {\n    return\n  }\n\n  loader.start()\n  const [error, _discovery] = await fetchOpenIDConnectDiscovery(\n    scheme.openIdConnectUrl,\n    proxyUrl,\n    customFetch,\n  )\n  await loader.clear()\n\n  // Toast for error\n  if (error) {\n    console.error(error)\n    toast(\n      error?.message ?? 'Failed to fetch OpenID Connect configuration',\n      'error',\n    )\n    return\n  }\n\n  /** Set the newly discovered params in the secret store */\n  const openIdConnect = openIDDiscoveryToFlows(_discovery)\n  eventBus.emit('auth:update:security-scheme-secrets', {\n    payload: openIdConnect,\n    name,\n    overwrite: true,\n  })\n}\n\nconst handleUpdateOpenIdConnectUrl = (value: string): void =>\n  eventBus.emit('auth:update:security-scheme', {\n    payload: {\n      type: 'openIdConnect',\n      openIdConnectUrl: value,\n    },\n    name,\n  })\n</script>\n\n<template>\n  <DataTableRow>\n    <RequestAuthDataTableInput\n      :containerClass=\"getStaticBorderClass()\"\n      :environment\n      :modelValue=\"scheme.openIdConnectUrl\"\n      placeholder=\"https://example.com/.well-known/openid-configuration\"\n      required\n      @update:modelValue=\"handleUpdateOpenIdConnectUrl\">\n      Discovery URL\n    </RequestAuthDataTableInput>\n  </DataTableRow>\n\n  <DataTableRow class=\"min-w-full\">\n    <div class=\"flex h-8 w-full items-center justify-end border-t\">\n      <ScalarButton\n        class=\"mr-0.75 p-0 px-2 py-0.5\"\n        :disabled=\"!scheme.openIdConnectUrl\"\n        :loader\n        size=\"sm\"\n        variant=\"outlined\"\n        @click=\"handleOpenIdConnect\">\n        Fetch Configuration\n      </ScalarButton>\n    </div>\n  </DataTableRow>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAwCA,MAAM,SAAS,gBAAgB;EAC/B,MAAM,EAAE,UAAU,UAAU;;;;EAK5B,MAAM,sBAAsB,YAA2B;GACrD,IAAI,OAAO,aAAa,CAAC,QAAA,OAAO,kBAC9B;GAGF,OAAO,MAAM;GACb,MAAM,CAAC,OAAO,cAAc,MAAM,4BAChC,QAAA,OAAO,kBACP,QAAA,UACA,QAAA,WACF;GACA,MAAM,OAAO,MAAM;GAGnB,IAAI,OAAO;IACT,QAAQ,MAAM,KAAK;IACnB,MACE,OAAO,WAAW,gDAClB,OACF;IACA;GACF;;GAGA,MAAM,gBAAgB,uBAAuB,UAAU;GACvD,QAAA,SAAS,KAAK,uCAAuC;IACnD,SAAS;IACT,MAAG,QAAA;IACH,WAAW;GACb,CAAC;EACH;EAEA,MAAM,gCAAgC,UACpC,QAAA,SAAS,KAAK,+BAA+B;GAC3C,SAAS;IACP,MAAM;IACN,kBAAkB;GACpB;GACA,MAAG,QAAA;EACL,CAAC;;2DAID,YAUe,MAAA,oBAAA,GAAA,MAAA;2BADe,CAR5B,YAQ4B,mCAAA;KAPzB,gBAAgB,QAAA,qBAAoB;KACpC,aAAA,QAAA;KACA,YAAY,QAAA,OAAO;KACpB,aAAY;KACZ,UAAA;KACC,uBAAmB;;4BAEtB,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAFoD,mBAEpD,EAAA,CAAA,EAAA,CAAA;;;;;;;;OAGF,YAYe,MAAA,oBAAA,GAAA,EAZD,OAAM,aAAY,GAAA;2BAWxB,CAVN,mBAUM,OAVN,YAUM,CATJ,YAQe,MAAA,YAAA,GAAA;KAPb,OAAM;KACL,UAAQ,CAAG,QAAA,OAAO;KAClB,QAAA,MAAA,MAAA;KACD,MAAK;KACL,SAAQ;KACP,SAAO;;4BAEV,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAF+B,yBAE/B,EAAA,CAAA,EAAA,CAAA"}
+{"version":3,"file":"OpenIDConnect.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/OpenIDConnect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarButton } from '@scalar/components/button'\nimport { useLoadingState } from '@scalar/components/loading'\nimport { useToasts } from '@scalar/use-toasts'\nimport type { WorkspaceEventBus } from '@scalar/workspace-store/events'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { type OpenIdConnectObject } from '@scalar/workspace-store/schemas/v3.2/strict/openapi-document'\n\nimport type { CustomFetch } from '@/v2/blocks/operation-block/helpers/send-request'\nimport { fetchOpenIDConnectDiscovery } from '@/v2/blocks/scalar-auth-selector-block/helpers/fetch-openid-connect-discovery'\nimport { openIDDiscoveryToFlows } from '@/v2/blocks/scalar-auth-selector-block/helpers/openid-discovery-to-flows'\nimport { DataTableRow } from '@/v2/components/data-table'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport RequestAuthDataTableInput from './RequestAuthDataTableInput.vue'\n\nconst {\n  environment,\n  eventBus,\n  getStaticBorderClass,\n  name,\n  scheme,\n  proxyUrl,\n  customFetch,\n} = defineProps<{\n  /** Current environment configuration */\n  environment: XScalarEnvironment\n  /** Event bus for authentication updates */\n  eventBus: WorkspaceEventBus\n  /** Get the static border class */\n  getStaticBorderClass: () => string | false\n  /** Name of the security scheme */\n  name: string\n  /** Proxy URL */\n  proxyUrl: string\n  /** OpenID Connect scheme */\n  scheme: OpenIdConnectObject\n  /** Optional fetch override (IPC-backed on desktop) used for discovery requests */\n  customFetch?: CustomFetch\n}>()\n\nconst { translate } = useLocalization()\n\nconst loader = useLoadingState()\nconst { toast } = useToasts()\n\n/**\n * Fetches the OpenID Connect discovery document and triggers authorization\n */\nconst handleOpenIdConnect = async (): Promise<void> => {\n  if (loader.isLoading || !scheme.openIdConnectUrl) {\n    return\n  }\n\n  loader.start()\n  const [error, _discovery] = await fetchOpenIDConnectDiscovery(\n    scheme.openIdConnectUrl,\n    proxyUrl,\n    customFetch,\n  )\n  await loader.clear()\n\n  // Toast for error\n  if (error) {\n    console.error(error)\n    toast(\n      error?.message ??\n        translate('apiClient.openIdConnect.failedToFetchConfiguration'),\n      'error',\n    )\n    return\n  }\n\n  /** Set the newly discovered params in the secret store */\n  const openIdConnect = openIDDiscoveryToFlows(_discovery)\n  eventBus.emit('auth:update:security-scheme-secrets', {\n    payload: openIdConnect,\n    name,\n    overwrite: true,\n  })\n}\n\nconst handleUpdateOpenIdConnectUrl = (value: string): void =>\n  eventBus.emit('auth:update:security-scheme', {\n    payload: {\n      type: 'openIdConnect',\n      openIdConnectUrl: value,\n    },\n    name,\n  })\n</script>\n\n<template>\n  <DataTableRow>\n    <RequestAuthDataTableInput\n      :containerClass=\"getStaticBorderClass()\"\n      :environment\n      :modelValue=\"scheme.openIdConnectUrl\"\n      placeholder=\"https://example.com/.well-known/openid-configuration\"\n      required\n      @update:modelValue=\"handleUpdateOpenIdConnectUrl\">\n      {{ translate('apiClient.openIdConnect.discoveryUrl') }}\n    </RequestAuthDataTableInput>\n  </DataTableRow>\n\n  <DataTableRow class=\"min-w-full\">\n    <div class=\"flex h-8 w-full items-center justify-end border-t\">\n      <ScalarButton\n        class=\"mr-0.75 p-0 px-2 py-0.5\"\n        :disabled=\"!scheme.openIdConnectUrl\"\n        :loader\n        size=\"sm\"\n        variant=\"outlined\"\n        @click=\"handleOpenIdConnect\">\n        {{ translate('apiClient.openIdConnect.fetchConfiguration') }}\n      </ScalarButton>\n    </div>\n  </DataTableRow>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAyCA,MAAM,EAAE,cAAc,gBAAgB;EAEtC,MAAM,SAAS,gBAAgB;EAC/B,MAAM,EAAE,UAAU,UAAU;;;;EAK5B,MAAM,sBAAsB,YAA2B;GACrD,IAAI,OAAO,aAAa,CAAC,QAAA,OAAO,kBAC9B;GAGF,OAAO,MAAM;GACb,MAAM,CAAC,OAAO,cAAc,MAAM,4BAChC,QAAA,OAAO,kBACP,QAAA,UACA,QAAA,WACF;GACA,MAAM,OAAO,MAAM;GAGnB,IAAI,OAAO;IACT,QAAQ,MAAM,KAAK;IACnB,MACE,OAAO,WACL,UAAU,oDAAoD,GAChE,OACF;IACA;GACF;;GAGA,MAAM,gBAAgB,uBAAuB,UAAU;GACvD,QAAA,SAAS,KAAK,uCAAuC;IACnD,SAAS;IACT,MAAG,QAAA;IACH,WAAW;GACb,CAAC;EACH;EAEA,MAAM,gCAAgC,UACpC,QAAA,SAAS,KAAK,+BAA+B;GAC3C,SAAS;IACP,MAAM;IACN,kBAAkB;GACpB;GACA,MAAG,QAAA;EACL,CAAC;;2DAID,YAUe,MAAA,oBAAA,GAAA,MAAA;2BADe,CAR5B,YAQ4B,mCAAA;KAPzB,gBAAgB,QAAA,qBAAoB;KACpC,aAAA,QAAA;KACA,YAAY,QAAA,OAAO;KACpB,aAAY;KACZ,UAAA;KACC,uBAAmB;;4BACmC,CAAA,gBAAA,gBAApD,MAAA,SAAA,CAAS,CAAA,sCAAA,CAAA,GAAA,CAAA,CAAA,CAAA;;;;;;;;OAIhB,YAYe,MAAA,oBAAA,GAAA,EAZD,OAAM,aAAY,GAAA;2BAWxB,CAVN,mBAUM,OAVN,YAUM,CATJ,YAQe,MAAA,YAAA,GAAA;KAPb,OAAM;KACL,UAAQ,CAAG,QAAA,OAAO;KAClB,QAAA,MAAA,MAAA;KACD,MAAK;KACL,SAAQ;KACP,SAAO;;4BACqD,CAAA,gBAAA,gBAA1D,MAAA,SAAA,CAAS,CAAA,4CAAA,CAAA,GAAA,CAAA,CAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"RequestAuthDataTable.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/RequestAuthDataTable.vue"],"names":[],"mappings":"AAkKA,OAAO,KAAK,EAEV,QAAQ,EACR,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAA;AACpF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AACnH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAA;AAGhG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8DAA8D,CAAA;AACjG,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAA;AAK1G,KAAK,WAAW,GAAG;IACjB,4CAA4C;IAC5C,WAAW,EAAE,kBAAkB,CAAA;IAC/B,mEAAmE;IACnE,QAAQ,EAAE,OAAO,CAAA;IACjB,8CAA8C;IAC9C,qBAAqB,EAAE,oBAAoB,EAAE,CAAA;IAC7C,uDAAuD;IACvD,eAAe,EAAE,MAAM,CAAA;IACvB,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,0CAA0C;IAC1C,eAAe,EAAE,qBAAqB,CAAA;IACtC,mCAAmC;IACnC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,2CAA2C;IAC3C,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,0CAA0C;IAC1C,IAAI,EAAE,QAAQ,CAAA;IACd,uDAAuD;IACvD,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;CACtC,CAAC;AA6PF,QAAA,MAAM,YAAY;;oPAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"RequestAuthDataTable.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/RequestAuthDataTable.vue"],"names":[],"mappings":"AAqKA,OAAO,KAAK,EAEV,QAAQ,EACR,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAA;AACpF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AACnH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8DAA8D,CAAA;AAGhG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8DAA8D,CAAA;AACjG,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gEAAgE,CAAA;AAM1G,KAAK,WAAW,GAAG;IACjB,4CAA4C;IAC5C,WAAW,EAAE,kBAAkB,CAAA;IAC/B,mEAAmE;IACnE,QAAQ,EAAE,OAAO,CAAA;IACjB,8CAA8C;IAC9C,qBAAqB,EAAE,oBAAoB,EAAE,CAAA;IAC7C,uDAAuD;IACvD,eAAe,EAAE,MAAM,CAAA;IACvB,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,0CAA0C;IAC1C,eAAe,EAAE,qBAAqB,CAAA;IACtC,mCAAmC;IACnC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,2CAA2C;IAC3C,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,0CAA0C;IAC1C,IAAI,EAAE,QAAQ,CAAA;IACd,uDAAuD;IACvD,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;CACtC,CAAC;AAiQF,QAAA,MAAM,YAAY;;oPAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1 +1 @@
-{"version":3,"file":"RequestAuthDataTable.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/RequestAuthDataTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  ApiReferenceEvents,\n  AuthMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { MergedSecuritySchemes } from '@scalar/workspace-store/request-example'\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 { computed } from 'vue'\n\nimport type { OAuth2Options } from '@/v2/blocks/scalar-auth-selector-block/components/OAuth2.vue'\nimport type { SecuritySchemeOption } from '@/v2/blocks/scalar-auth-selector-block/helpers/security-scheme'\nimport { DataTable } from '@/v2/components/data-table'\n\nimport RequestAuthTab from './RequestAuthTab.vue'\n\nconst {\n  environment,\n  isStatic,\n  selectedSchemeOptions,\n  activeAuthIndex,\n  securitySchemes = {},\n  server,\n  eventBus,\n  meta,\n  options,\n  documentType,\n} = defineProps<{\n  /** The current environment configuration */\n  environment: XScalarEnvironment\n  /** Controls border display for static (non-collapsible) layouts */\n  isStatic: boolean\n  /** Available authentication scheme options */\n  selectedSchemeOptions: SecuritySchemeOption[]\n  /** Index of the currently active authentication tab */\n  activeAuthIndex: number\n  /** Proxy URL */\n  proxyUrl: string\n  /** OpenAPI security scheme definitions */\n  securitySchemes: MergedSecuritySchemes\n  /** Current server configuration */\n  server: ServerObject | null\n  /** Event bus for authentication updates */\n  eventBus: WorkspaceEventBus\n  /** Metadata for authentication context */\n  meta: AuthMeta\n  /**  Any config options required for the OAuth2 flow */\n  options?: OAuth2Options\n  /** Type of the document the schemes belong to, forwarded to the auth tab */\n  documentType?: 'openapi' | 'asyncapi'\n}>()\n\n/** Currently selected authentication scheme based on the active tab index */\nconst activeScheme = computed<SecuritySchemeOption | undefined>(\n  () => selectedSchemeOptions[activeAuthIndex],\n)\n\n/**\n * Whether to display multiple authentication tabs.\n * Only shows tabs when there are 2 or more schemes available.\n */\nconst shouldShowTabs = computed<boolean>(() => selectedSchemeOptions.length > 1)\n\n/** Handles authentication tab selection */\nconst handleTabChange = (index: number) =>\n  eventBus.emit('auth:update:active-index', {\n    index,\n    meta,\n  })\n\n/** Handles updates to OAuth scope selection */\nconst handleScopesUpdate = (\n  params: Omit<ApiReferenceEvents['auth:update:selected-scopes'], 'meta'>,\n): void =>\n  eventBus.emit('auth:update:selected-scopes', {\n    ...params,\n    meta,\n  })\n\n/** Handles scope-definition upserts (add / rename / description change) */\nconst handleScopeUpsert = (\n  params: ApiReferenceEvents['auth:upsert:scopes'],\n): void => eventBus.emit('auth:upsert:scopes', params)\n\n/** Handles scope-definition deletes */\nconst handleScopeDelete = (\n  params: ApiReferenceEvents['auth:delete:scopes'],\n): void => eventBus.emit('auth:delete:scopes', params)\n\n/** Determines if a tab is currently active */\nconst isTabActive = (index: number): boolean => activeAuthIndex === index\n\n/** Expose the active scheme for parent component access */\ndefineExpose({\n  activeScheme,\n})\n</script>\n\n<template>\n  <form @submit.prevent>\n    <!-- Authentication Tabs -->\n    <div\n      v-if=\"shouldShowTabs\"\n      class=\"box-content flex flex-wrap gap-x-2.5 overflow-hidden border-x border-t px-3\"\n      :class=\"{ 'border-x-0': !isStatic }\"\n      data-testid=\"auth-tabs\">\n      <div\n        v-for=\"(option, index) in selectedSchemeOptions\"\n        :key=\"option.id\"\n        class=\"relative z-1 -mb-[var(--scalar-border-width)] flex h-8\">\n        <button\n          class=\"floating-bg relative cursor-pointer border-b border-transparent py-1 text-sm font-medium transition-colors\"\n          :class=\"isTabActive(index) ? 'text-c-1' : 'text-c-3'\"\n          type=\"button\"\n          @click=\"handleTabChange(index)\">\n          <span class=\"relative z-10 font-medium whitespace-nowrap\">\n            {{ option.label }}\n          </span>\n        </button>\n\n        <!-- Active Tab Indicator -->\n        <div\n          v-if=\"isTabActive(index)\"\n          class=\"absolute inset-x-1 bottom-[var(--scalar-border-width)] left-1/2 z-1 h-px w-full -translate-x-1/2 bg-current\" />\n      </div>\n    </div>\n\n    <!-- Active Authentication Scheme Content -->\n    <DataTable\n      v-if=\"activeScheme\"\n      class=\"flex-1\"\n      :class=\"{ 'bg-b-1 rounded-b-lg border-x border-b': isStatic }\"\n      :columns=\"['']\"\n      presentational>\n      <RequestAuthTab\n        :documentType\n        :environment\n        :eventBus\n        :isStatic\n        :options\n        :proxyUrl\n        :securitySchemes\n        :selectedSecuritySchemas=\"activeScheme.value\"\n        :server\n        @delete:scope=\"handleScopeDelete\"\n        @update:selectedScopes=\"handleScopesUpdate\"\n        @upsert:scope=\"handleScopeUpsert\" />\n    </DataTable>\n\n    <!-- Empty State -->\n    <div\n      v-else\n      class=\"bg-b-1 text-c-3 flex min-h-16 items-center justify-center border-t px-4 text-sm\"\n      :class=\"{ 'min-h-[calc(4rem+0.5px)] rounded-b-lg border': isStatic }\">\n      No authentication selected\n    </div>\n  </form>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RequestAuthDataTable.vue.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/RequestAuthDataTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  ApiReferenceEvents,\n  AuthMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { MergedSecuritySchemes } from '@scalar/workspace-store/request-example'\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 { computed } from 'vue'\n\nimport type { OAuth2Options } from '@/v2/blocks/scalar-auth-selector-block/components/OAuth2.vue'\nimport type { SecuritySchemeOption } from '@/v2/blocks/scalar-auth-selector-block/helpers/security-scheme'\nimport { DataTable } from '@/v2/components/data-table'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport RequestAuthTab from './RequestAuthTab.vue'\n\nconst {\n  environment,\n  isStatic,\n  selectedSchemeOptions,\n  activeAuthIndex,\n  securitySchemes = {},\n  server,\n  eventBus,\n  meta,\n  options,\n  documentType,\n} = defineProps<{\n  /** The current environment configuration */\n  environment: XScalarEnvironment\n  /** Controls border display for static (non-collapsible) layouts */\n  isStatic: boolean\n  /** Available authentication scheme options */\n  selectedSchemeOptions: SecuritySchemeOption[]\n  /** Index of the currently active authentication tab */\n  activeAuthIndex: number\n  /** Proxy URL */\n  proxyUrl: string\n  /** OpenAPI security scheme definitions */\n  securitySchemes: MergedSecuritySchemes\n  /** Current server configuration */\n  server: ServerObject | null\n  /** Event bus for authentication updates */\n  eventBus: WorkspaceEventBus\n  /** Metadata for authentication context */\n  meta: AuthMeta\n  /**  Any config options required for the OAuth2 flow */\n  options?: OAuth2Options\n  /** Type of the document the schemes belong to, forwarded to the auth tab */\n  documentType?: 'openapi' | 'asyncapi'\n}>()\n\nconst { translate } = useLocalization()\n\n/** Currently selected authentication scheme based on the active tab index */\nconst activeScheme = computed<SecuritySchemeOption | undefined>(\n  () => selectedSchemeOptions[activeAuthIndex],\n)\n\n/**\n * Whether to display multiple authentication tabs.\n * Only shows tabs when there are 2 or more schemes available.\n */\nconst shouldShowTabs = computed<boolean>(() => selectedSchemeOptions.length > 1)\n\n/** Handles authentication tab selection */\nconst handleTabChange = (index: number) =>\n  eventBus.emit('auth:update:active-index', {\n    index,\n    meta,\n  })\n\n/** Handles updates to OAuth scope selection */\nconst handleScopesUpdate = (\n  params: Omit<ApiReferenceEvents['auth:update:selected-scopes'], 'meta'>,\n): void =>\n  eventBus.emit('auth:update:selected-scopes', {\n    ...params,\n    meta,\n  })\n\n/** Handles scope-definition upserts (add / rename / description change) */\nconst handleScopeUpsert = (\n  params: ApiReferenceEvents['auth:upsert:scopes'],\n): void => eventBus.emit('auth:upsert:scopes', params)\n\n/** Handles scope-definition deletes */\nconst handleScopeDelete = (\n  params: ApiReferenceEvents['auth:delete:scopes'],\n): void => eventBus.emit('auth:delete:scopes', params)\n\n/** Determines if a tab is currently active */\nconst isTabActive = (index: number): boolean => activeAuthIndex === index\n\n/** Expose the active scheme for parent component access */\ndefineExpose({\n  activeScheme,\n})\n</script>\n\n<template>\n  <form @submit.prevent>\n    <!-- Authentication Tabs -->\n    <div\n      v-if=\"shouldShowTabs\"\n      class=\"box-content flex flex-wrap gap-x-2.5 overflow-hidden border-x border-t px-3\"\n      :class=\"{ 'border-x-0': !isStatic }\"\n      data-testid=\"auth-tabs\">\n      <div\n        v-for=\"(option, index) in selectedSchemeOptions\"\n        :key=\"option.id\"\n        class=\"relative z-1 -mb-[var(--scalar-border-width)] flex h-8\">\n        <button\n          class=\"floating-bg relative cursor-pointer border-b border-transparent py-1 text-sm font-medium transition-colors\"\n          :class=\"isTabActive(index) ? 'text-c-1' : 'text-c-3'\"\n          type=\"button\"\n          @click=\"handleTabChange(index)\">\n          <span class=\"relative z-10 font-medium whitespace-nowrap\">\n            {{ option.label }}\n          </span>\n        </button>\n\n        <!-- Active Tab Indicator -->\n        <div\n          v-if=\"isTabActive(index)\"\n          class=\"absolute inset-x-1 bottom-[var(--scalar-border-width)] left-1/2 z-1 h-px w-full -translate-x-1/2 bg-current\" />\n      </div>\n    </div>\n\n    <!-- Active Authentication Scheme Content -->\n    <DataTable\n      v-if=\"activeScheme\"\n      class=\"flex-1\"\n      :class=\"{ 'bg-b-1 rounded-b-lg border-x border-b': isStatic }\"\n      :columns=\"['']\"\n      presentational>\n      <RequestAuthTab\n        :documentType\n        :environment\n        :eventBus\n        :isStatic\n        :options\n        :proxyUrl\n        :securitySchemes\n        :selectedSecuritySchemas=\"activeScheme.value\"\n        :server\n        @delete:scope=\"handleScopeDelete\"\n        @update:selectedScopes=\"handleScopesUpdate\"\n        @upsert:scope=\"handleScopeUpsert\" />\n    </DataTable>\n\n    <!-- Empty State -->\n    <div\n      v-else\n      class=\"bg-b-1 text-c-3 flex min-h-16 items-center justify-center border-t px-4 text-sm\"\n      :class=\"{ 'min-h-[calc(4rem+0.5px)] rounded-b-lg border': isStatic }\">\n      {{ translate('apiClient.requestAuthDataTable.noauthenticationSelected') }}\n    </div>\n  </form>\n</template>\n"],"mappings":""}

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

@@ -1,3 +1,4 @@
+import { useLocalization } from "../../../features/localization/index.js";
 import DataTable_default from "../../../components/data-table/DataTable.vue.js";
 import RequestAuthTab_default from "./RequestAuthTab.vue.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, toDisplayString, unref, withCtx, withModifiers } from "vue";
@@ -24,6 +25,7 @@ var RequestAuthDataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 		documentType: {}
 	},
 	setup(__props, { expose: __expose }) {
+		const { translate } = useLocalization();
 		/** Currently selected authentication scheme based on the active tab index */
 		const activeScheme = computed(() => __props.selectedSchemeOptions[__props.activeAuthIndex]);
 		/**
@@ -97,7 +99,7 @@ var RequestAuthDataTable_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 			}, 8, ["class"])) : (openBlock(), createElementBlock("div", {
 				key: 2,
 				class: normalizeClass(["bg-b-1 text-c-3 flex min-h-16 items-center justify-center border-t px-4 text-sm", { "min-h-[calc(4rem+0.5px)] rounded-b-lg border": __props.isStatic }])
-			}, " No authentication selected ", 2))], 32);
+			}, toDisplayString(unref(translate)("apiClient.requestAuthDataTable.noauthenticationSelected")), 3))], 32);
 		};
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"RequestAuthDataTable.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/RequestAuthDataTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  ApiReferenceEvents,\n  AuthMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { MergedSecuritySchemes } from '@scalar/workspace-store/request-example'\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 { computed } from 'vue'\n\nimport type { OAuth2Options } from '@/v2/blocks/scalar-auth-selector-block/components/OAuth2.vue'\nimport type { SecuritySchemeOption } from '@/v2/blocks/scalar-auth-selector-block/helpers/security-scheme'\nimport { DataTable } from '@/v2/components/data-table'\n\nimport RequestAuthTab from './RequestAuthTab.vue'\n\nconst {\n  environment,\n  isStatic,\n  selectedSchemeOptions,\n  activeAuthIndex,\n  securitySchemes = {},\n  server,\n  eventBus,\n  meta,\n  options,\n  documentType,\n} = defineProps<{\n  /** The current environment configuration */\n  environment: XScalarEnvironment\n  /** Controls border display for static (non-collapsible) layouts */\n  isStatic: boolean\n  /** Available authentication scheme options */\n  selectedSchemeOptions: SecuritySchemeOption[]\n  /** Index of the currently active authentication tab */\n  activeAuthIndex: number\n  /** Proxy URL */\n  proxyUrl: string\n  /** OpenAPI security scheme definitions */\n  securitySchemes: MergedSecuritySchemes\n  /** Current server configuration */\n  server: ServerObject | null\n  /** Event bus for authentication updates */\n  eventBus: WorkspaceEventBus\n  /** Metadata for authentication context */\n  meta: AuthMeta\n  /**  Any config options required for the OAuth2 flow */\n  options?: OAuth2Options\n  /** Type of the document the schemes belong to, forwarded to the auth tab */\n  documentType?: 'openapi' | 'asyncapi'\n}>()\n\n/** Currently selected authentication scheme based on the active tab index */\nconst activeScheme = computed<SecuritySchemeOption | undefined>(\n  () => selectedSchemeOptions[activeAuthIndex],\n)\n\n/**\n * Whether to display multiple authentication tabs.\n * Only shows tabs when there are 2 or more schemes available.\n */\nconst shouldShowTabs = computed<boolean>(() => selectedSchemeOptions.length > 1)\n\n/** Handles authentication tab selection */\nconst handleTabChange = (index: number) =>\n  eventBus.emit('auth:update:active-index', {\n    index,\n    meta,\n  })\n\n/** Handles updates to OAuth scope selection */\nconst handleScopesUpdate = (\n  params: Omit<ApiReferenceEvents['auth:update:selected-scopes'], 'meta'>,\n): void =>\n  eventBus.emit('auth:update:selected-scopes', {\n    ...params,\n    meta,\n  })\n\n/** Handles scope-definition upserts (add / rename / description change) */\nconst handleScopeUpsert = (\n  params: ApiReferenceEvents['auth:upsert:scopes'],\n): void => eventBus.emit('auth:upsert:scopes', params)\n\n/** Handles scope-definition deletes */\nconst handleScopeDelete = (\n  params: ApiReferenceEvents['auth:delete:scopes'],\n): void => eventBus.emit('auth:delete:scopes', params)\n\n/** Determines if a tab is currently active */\nconst isTabActive = (index: number): boolean => activeAuthIndex === index\n\n/** Expose the active scheme for parent component access */\ndefineExpose({\n  activeScheme,\n})\n</script>\n\n<template>\n  <form @submit.prevent>\n    <!-- Authentication Tabs -->\n    <div\n      v-if=\"shouldShowTabs\"\n      class=\"box-content flex flex-wrap gap-x-2.5 overflow-hidden border-x border-t px-3\"\n      :class=\"{ 'border-x-0': !isStatic }\"\n      data-testid=\"auth-tabs\">\n      <div\n        v-for=\"(option, index) in selectedSchemeOptions\"\n        :key=\"option.id\"\n        class=\"relative z-1 -mb-[var(--scalar-border-width)] flex h-8\">\n        <button\n          class=\"floating-bg relative cursor-pointer border-b border-transparent py-1 text-sm font-medium transition-colors\"\n          :class=\"isTabActive(index) ? 'text-c-1' : 'text-c-3'\"\n          type=\"button\"\n          @click=\"handleTabChange(index)\">\n          <span class=\"relative z-10 font-medium whitespace-nowrap\">\n            {{ option.label }}\n          </span>\n        </button>\n\n        <!-- Active Tab Indicator -->\n        <div\n          v-if=\"isTabActive(index)\"\n          class=\"absolute inset-x-1 bottom-[var(--scalar-border-width)] left-1/2 z-1 h-px w-full -translate-x-1/2 bg-current\" />\n      </div>\n    </div>\n\n    <!-- Active Authentication Scheme Content -->\n    <DataTable\n      v-if=\"activeScheme\"\n      class=\"flex-1\"\n      :class=\"{ 'bg-b-1 rounded-b-lg border-x border-b': isStatic }\"\n      :columns=\"['']\"\n      presentational>\n      <RequestAuthTab\n        :documentType\n        :environment\n        :eventBus\n        :isStatic\n        :options\n        :proxyUrl\n        :securitySchemes\n        :selectedSecuritySchemas=\"activeScheme.value\"\n        :server\n        @delete:scope=\"handleScopeDelete\"\n        @update:selectedScopes=\"handleScopesUpdate\"\n        @upsert:scope=\"handleScopeUpsert\" />\n    </DataTable>\n\n    <!-- Empty State -->\n    <div\n      v-else\n      class=\"bg-b-1 text-c-3 flex min-h-16 items-center justify-center border-t px-4 text-sm\"\n      :class=\"{ 'min-h-[calc(4rem+0.5px)] rounded-b-lg border': isStatic }\">\n      No authentication selected\n    </div>\n  </form>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDA,MAAM,eAAe,eACb,QAAA,sBAAsB,QAAA,gBAC9B;;;;;EAMA,MAAM,iBAAiB,eAAwB,QAAA,sBAAsB,SAAS,CAAC;;EAG/E,MAAM,mBAAmB,UACvB,QAAA,SAAS,KAAK,4BAA4B;GACxC;GACA,MAAG,QAAA;EACL,CAAC;;EAGH,MAAM,sBACJ,WAEA,QAAA,SAAS,KAAK,+BAA+B;GAC3C,GAAG;GACH,MAAG,QAAA;EACL,CAAC;;EAGH,MAAM,qBACJ,WACS,QAAA,SAAS,KAAK,sBAAsB,MAAM;;EAGrD,MAAM,qBACJ,WACS,QAAA,SAAS,KAAK,sBAAsB,MAAM;;EAGrD,MAAM,eAAe,UAA2B,QAAA,oBAAoB;;EAGpE,SAAa,EACX,aACF,CAAC;;uBAIC,mBAyDO,QAAA,EAzDA,UAAM,OAAA,OAAA,OAAA,KAAA,oBAAP,CAAA,GAAe,CAAA,SAAA,CAAA,GAAA,GAAA,CAGX,eAAA,SAAA,UAAA,GADR,mBAwBM,OAAA;;IAtBJ,OAAK,eAAA,CAAC,+EAA6E,EAAA,cAAA,CAC1D,QAAA,SAAQ,CAAA,CAAA;IACjC,eAAY;yBACZ,mBAkBM,UAAA,MAAA,WAjBsB,QAAA,wBAAlB,QAAQ,UAAK;wBADvB,mBAkBM,OAAA;KAhBH,KAAK,OAAO;KACb,OAAM;QACN,mBAQS,UAAA;KAPP,OAAK,eAAA,CAAC,8GACE,YAAY,KAAK,IAAA,aAAA,UAAA,CAAA;KACzB,MAAK;KACJ,UAAK,WAAE,gBAAgB,KAAK;QAC7B,mBAEO,QAFP,YAEO,gBADF,OAAO,KAAK,GAAA,CAAA,CAAA,GAAA,IAAA,UAAA,GAMX,YAAY,KAAK,KAAA,UAAA,GADzB,mBAEwH,OAFxH,UAEwH,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA;mDAMpH,aAAA,SAAA,UAAA,GADR,YAmBY,MAAA,iBAAA,GAAA;;IAjBV,OAAK,eAAA,CAAC,UAAQ,EAAA,yCACqC,QAAA,SAAQ,CAAA,CAAA;IAC1D,SAAS,CAAA,EAAA;IACV,gBAAA;;2BAasC,CAZtC,YAYsC,wBAAA;KAXnC,cAAA,QAAA;KACA,aAAA,QAAA;KACA,UAAA,QAAA;KACA,UAAA,QAAA;KACA,SAAA,QAAA;KACA,UAAA,QAAA;KACA,iBAAA,QAAA;KACA,yBAAyB,aAAA,MAAa;KACtC,QAAA,QAAA;KACA,kBAAc;KACd,2BAAuB;KACvB,kBAAc;;;;;;;;;;;;;qCAInB,mBAKM,OAAA;;IAHJ,OAAK,eAAA,CAAC,mFAAiF,EAAA,gDAC7B,QAAA,SAAQ,CAAA,CAAA;MAAI,gCAExE,CAAA,EAAA,GAAA,EAAA"}
+{"version":3,"file":"RequestAuthDataTable.vue.script.js","names":[],"sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/RequestAuthDataTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  ApiReferenceEvents,\n  AuthMeta,\n  WorkspaceEventBus,\n} from '@scalar/workspace-store/events'\nimport type { MergedSecuritySchemes } from '@scalar/workspace-store/request-example'\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 { computed } from 'vue'\n\nimport type { OAuth2Options } from '@/v2/blocks/scalar-auth-selector-block/components/OAuth2.vue'\nimport type { SecuritySchemeOption } from '@/v2/blocks/scalar-auth-selector-block/helpers/security-scheme'\nimport { DataTable } from '@/v2/components/data-table'\nimport { useLocalization } from '@/v2/features/localization'\n\nimport RequestAuthTab from './RequestAuthTab.vue'\n\nconst {\n  environment,\n  isStatic,\n  selectedSchemeOptions,\n  activeAuthIndex,\n  securitySchemes = {},\n  server,\n  eventBus,\n  meta,\n  options,\n  documentType,\n} = defineProps<{\n  /** The current environment configuration */\n  environment: XScalarEnvironment\n  /** Controls border display for static (non-collapsible) layouts */\n  isStatic: boolean\n  /** Available authentication scheme options */\n  selectedSchemeOptions: SecuritySchemeOption[]\n  /** Index of the currently active authentication tab */\n  activeAuthIndex: number\n  /** Proxy URL */\n  proxyUrl: string\n  /** OpenAPI security scheme definitions */\n  securitySchemes: MergedSecuritySchemes\n  /** Current server configuration */\n  server: ServerObject | null\n  /** Event bus for authentication updates */\n  eventBus: WorkspaceEventBus\n  /** Metadata for authentication context */\n  meta: AuthMeta\n  /**  Any config options required for the OAuth2 flow */\n  options?: OAuth2Options\n  /** Type of the document the schemes belong to, forwarded to the auth tab */\n  documentType?: 'openapi' | 'asyncapi'\n}>()\n\nconst { translate } = useLocalization()\n\n/** Currently selected authentication scheme based on the active tab index */\nconst activeScheme = computed<SecuritySchemeOption | undefined>(\n  () => selectedSchemeOptions[activeAuthIndex],\n)\n\n/**\n * Whether to display multiple authentication tabs.\n * Only shows tabs when there are 2 or more schemes available.\n */\nconst shouldShowTabs = computed<boolean>(() => selectedSchemeOptions.length > 1)\n\n/** Handles authentication tab selection */\nconst handleTabChange = (index: number) =>\n  eventBus.emit('auth:update:active-index', {\n    index,\n    meta,\n  })\n\n/** Handles updates to OAuth scope selection */\nconst handleScopesUpdate = (\n  params: Omit<ApiReferenceEvents['auth:update:selected-scopes'], 'meta'>,\n): void =>\n  eventBus.emit('auth:update:selected-scopes', {\n    ...params,\n    meta,\n  })\n\n/** Handles scope-definition upserts (add / rename / description change) */\nconst handleScopeUpsert = (\n  params: ApiReferenceEvents['auth:upsert:scopes'],\n): void => eventBus.emit('auth:upsert:scopes', params)\n\n/** Handles scope-definition deletes */\nconst handleScopeDelete = (\n  params: ApiReferenceEvents['auth:delete:scopes'],\n): void => eventBus.emit('auth:delete:scopes', params)\n\n/** Determines if a tab is currently active */\nconst isTabActive = (index: number): boolean => activeAuthIndex === index\n\n/** Expose the active scheme for parent component access */\ndefineExpose({\n  activeScheme,\n})\n</script>\n\n<template>\n  <form @submit.prevent>\n    <!-- Authentication Tabs -->\n    <div\n      v-if=\"shouldShowTabs\"\n      class=\"box-content flex flex-wrap gap-x-2.5 overflow-hidden border-x border-t px-3\"\n      :class=\"{ 'border-x-0': !isStatic }\"\n      data-testid=\"auth-tabs\">\n      <div\n        v-for=\"(option, index) in selectedSchemeOptions\"\n        :key=\"option.id\"\n        class=\"relative z-1 -mb-[var(--scalar-border-width)] flex h-8\">\n        <button\n          class=\"floating-bg relative cursor-pointer border-b border-transparent py-1 text-sm font-medium transition-colors\"\n          :class=\"isTabActive(index) ? 'text-c-1' : 'text-c-3'\"\n          type=\"button\"\n          @click=\"handleTabChange(index)\">\n          <span class=\"relative z-10 font-medium whitespace-nowrap\">\n            {{ option.label }}\n          </span>\n        </button>\n\n        <!-- Active Tab Indicator -->\n        <div\n          v-if=\"isTabActive(index)\"\n          class=\"absolute inset-x-1 bottom-[var(--scalar-border-width)] left-1/2 z-1 h-px w-full -translate-x-1/2 bg-current\" />\n      </div>\n    </div>\n\n    <!-- Active Authentication Scheme Content -->\n    <DataTable\n      v-if=\"activeScheme\"\n      class=\"flex-1\"\n      :class=\"{ 'bg-b-1 rounded-b-lg border-x border-b': isStatic }\"\n      :columns=\"['']\"\n      presentational>\n      <RequestAuthTab\n        :documentType\n        :environment\n        :eventBus\n        :isStatic\n        :options\n        :proxyUrl\n        :securitySchemes\n        :selectedSecuritySchemas=\"activeScheme.value\"\n        :server\n        @delete:scope=\"handleScopeDelete\"\n        @update:selectedScopes=\"handleScopesUpdate\"\n        @upsert:scope=\"handleScopeUpsert\" />\n    </DataTable>\n\n    <!-- Empty State -->\n    <div\n      v-else\n      class=\"bg-b-1 text-c-3 flex min-h-16 items-center justify-center border-t px-4 text-sm\"\n      :class=\"{ 'min-h-[calc(4rem+0.5px)] rounded-b-lg border': isStatic }\">\n      {{ translate('apiClient.requestAuthDataTable.noauthenticationSelected') }}\n    </div>\n  </form>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDA,MAAM,EAAE,cAAc,gBAAgB;;EAGtC,MAAM,eAAe,eACb,QAAA,sBAAsB,QAAA,gBAC9B;;;;;EAMA,MAAM,iBAAiB,eAAwB,QAAA,sBAAsB,SAAS,CAAC;;EAG/E,MAAM,mBAAmB,UACvB,QAAA,SAAS,KAAK,4BAA4B;GACxC;GACA,MAAG,QAAA;EACL,CAAC;;EAGH,MAAM,sBACJ,WAEA,QAAA,SAAS,KAAK,+BAA+B;GAC3C,GAAG;GACH,MAAG,QAAA;EACL,CAAC;;EAGH,MAAM,qBACJ,WACS,QAAA,SAAS,KAAK,sBAAsB,MAAM;;EAGrD,MAAM,qBACJ,WACS,QAAA,SAAS,KAAK,sBAAsB,MAAM;;EAGrD,MAAM,eAAe,UAA2B,QAAA,oBAAoB;;EAGpE,SAAa,EACX,aACF,CAAC;;uBAIC,mBAyDO,QAAA,EAzDA,UAAM,OAAA,OAAA,OAAA,KAAA,oBAAP,CAAA,GAAe,CAAA,SAAA,CAAA,GAAA,GAAA,CAGX,eAAA,SAAA,UAAA,GADR,mBAwBM,OAAA;;IAtBJ,OAAK,eAAA,CAAC,+EAA6E,EAAA,cAAA,CAC1D,QAAA,SAAQ,CAAA,CAAA;IACjC,eAAY;yBACZ,mBAkBM,UAAA,MAAA,WAjBsB,QAAA,wBAAlB,QAAQ,UAAK;wBADvB,mBAkBM,OAAA;KAhBH,KAAK,OAAO;KACb,OAAM;QACN,mBAQS,UAAA;KAPP,OAAK,eAAA,CAAC,8GACE,YAAY,KAAK,IAAA,aAAA,UAAA,CAAA;KACzB,MAAK;KACJ,UAAK,WAAE,gBAAgB,KAAK;QAC7B,mBAEO,QAFP,YAEO,gBADF,OAAO,KAAK,GAAA,CAAA,CAAA,GAAA,IAAA,UAAA,GAMX,YAAY,KAAK,KAAA,UAAA,GADzB,mBAEwH,OAFxH,UAEwH,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA;mDAMpH,aAAA,SAAA,UAAA,GADR,YAmBY,MAAA,iBAAA,GAAA;;IAjBV,OAAK,eAAA,CAAC,UAAQ,EAAA,yCACqC,QAAA,SAAQ,CAAA,CAAA;IAC1D,SAAS,CAAA,EAAA;IACV,gBAAA;;2BAasC,CAZtC,YAYsC,wBAAA;KAXnC,cAAA,QAAA;KACA,aAAA,QAAA;KACA,UAAA,QAAA;KACA,UAAA,QAAA;KACA,SAAA,QAAA;KACA,UAAA,QAAA;KACA,iBAAA,QAAA;KACA,yBAAyB,aAAA,MAAa;KACtC,QAAA,QAAA;KACA,kBAAc;KACd,2BAAuB;KACvB,kBAAc;;;;;;;;;;;;;qCAInB,mBAKM,OAAA;;IAHJ,OAAK,eAAA,CAAC,mFAAiF,EAAA,gDAC7B,QAAA,SAAQ,CAAA,CAAA;sBAC/D,MAAA,SAAA,CAAS,CAAA,yDAAA,CAAA,GAAA,CAAA,EAAA,GAAA,EAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"RequestAuthTab.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/RequestAuthTab.vue"],"names":[],"mappings":"AA0rBA,OAAO,KAAK,EAEV,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AAEvC,OAAO,EAEL,KAAK,qBAAqB,EAG3B,MAAM,yCAAyC,CAAA;AAChD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAEnH,OAAO,KAAK,EAEV,yBAAyB,EACzB,YAAY,EACb,MAAM,8DAA8D,CAAA;AAgBrE,OAAe,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAA;AAazD,KAAK,WAAW,GAAG;IACjB,wCAAwC;IACxC,WAAW,EAAE,kBAAkB,CAAA;IAC/B,yFAAyF;IACzF,QAAQ,EAAE,OAAO,CAAA;IACjB,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,+BAA+B;IAC/B,uBAAuB,EAAE,yBAAyB,CAAA;IAClD,oGAAoG;IACpG,eAAe,EAAE,qBAAqB,CAAA;IACtC,mCAAmC;IACnC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,2CAA2C;IAC3C,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,uDAAuD;IACvD,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,yFAAyF;IACzF,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;CACtC,CAAC;AAwtCF,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"RequestAuthTab.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/blocks/scalar-auth-selector-block/components/RequestAuthTab.vue"],"names":[],"mappings":"AAqtBA,OAAO,KAAK,EAEV,iBAAiB,EAClB,MAAM,gCAAgC,CAAA;AAEvC,OAAO,EAEL,KAAK,qBAAqB,EAG3B,MAAM,yCAAyC,CAAA;AAChD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AAEnH,OAAO,KAAK,EAEV,yBAAyB,EACzB,YAAY,EACb,MAAM,8DAA8D,CAAA;AAiBrE,OAAe,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAA;AAKzD,KAAK,WAAW,GAAG;IACjB,wCAAwC;IACxC,WAAW,EAAE,kBAAkB,CAAA;IAC/B,yFAAyF;IACzF,QAAQ,EAAE,OAAO,CAAA;IACjB,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,+BAA+B;IAC/B,uBAAuB,EAAE,yBAAyB,CAAA;IAClD,oGAAoG;IACpG,eAAe,EAAE,qBAAqB,CAAA;IACtC,mCAAmC;IACnC,MAAM,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,2CAA2C;IAC3C,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,uDAAuD;IACvD,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,yFAAyF;IACzF,YAAY,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;CACtC,CAAC;AAgxCF,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}