@scalar/api-client 2.38.4 → 2.39.0

package/dist/v2/components/code-input/code-variable-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-variable-widget.js","names":[],"sources":["../../../../src/v2/components/code-input/code-variable-widget.ts"],"sourcesContent":["import { ScalarTooltip } from '@scalar/components'\nimport { REGEX } from '@scalar/helpers/regex/regex-helpers'\nimport {\n  Decoration,\n  type DecorationSet,\n  EditorView,\n  RangeSetBuilder,\n  ViewPlugin,\n  type ViewUpdate,\n  WidgetType,\n} from '@scalar/use-codemirror'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { createApp, defineComponent, h } from 'vue'\n\n/**\n * Displays the value of a variable of the active environment in a pill.\n * Uses Vue for tooltip functionality.\n */\nclass PillWidget extends WidgetType {\n  private app: any\n  private readonly pillColor: string\n  private readonly variableInfo: { value: string; hasValue: boolean }\n\n  constructor(\n    private readonly variableName: string,\n    environment: XScalarEnvironment | undefined,\n  ) {\n    super()\n    this.pillColor = environment?.color || 'var(--scalar-color-1)'\n\n    // Look up the variable value directly from the environment\n    const variable = environment?.variables?.find((v) => v.name === variableName)\n    const value = variable ? (typeof variable.value === 'string' ? variable.value : variable.value?.default) : undefined\n    this.variableInfo = {\n      value: value || 'No value',\n      hasValue: Boolean(value),\n    }\n  }\n\n  toDOM(): HTMLElement {\n    const span = document.createElement('span')\n    span.className = 'cm-pill'\n    span.textContent = this.variableName\n\n    // Set styles once during creation instead of on every render\n    span.style.setProperty('--tw-bg-base', this.pillColor)\n    span.style.opacity = this.variableInfo.hasValue ? '1' : '0.5'\n\n    // Create tooltip component with pre-computed values\n    const tooltipComponent = defineComponent({\n      render: () => {\n        const tooltipTrigger = h('div', { class: 'flex items-center gap-1 whitespace-nowrap' }, [\n          h('span', this.variableName),\n        ])\n\n        return h(\n          ScalarTooltip,\n          {\n            content: this.variableInfo.value,\n            delay: 0,\n            placement: 'bottom',\n            offset: 6,\n          },\n          {\n            default: () => tooltipTrigger,\n          },\n        )\n      },\n    })\n\n    this.app = createApp(tooltipComponent)\n    this.app.mount(span)\n\n    return span\n  }\n\n  override destroy(): void {\n    if (this.app) {\n      this.app.unmount()\n      this.app = null\n    }\n  }\n\n  override eq(other: WidgetType): boolean {\n    // Two widgets are equal if they represent the same variable.\n    // This allows CodeMirror to reuse widgets instead of recreating them.\n    return (\n      other instanceof PillWidget &&\n      other.variableName === this.variableName &&\n      other.pillColor === this.pillColor &&\n      other.variableInfo.value === this.variableInfo.value &&\n      other.variableInfo.hasValue === this.variableInfo.hasValue\n    )\n  }\n\n  override ignoreEvent(): boolean {\n    return false\n  }\n}\n\n/**\n * Styles the active environment variable pill.\n * This plugin creates decorations for environment variables in the editor.\n */\nexport const pillPlugin = (props: { environment: XScalarEnvironment | undefined; isReadOnly: boolean | undefined }) =>\n  ViewPlugin.fromClass(\n    class {\n      decorations: DecorationSet\n      lastEnvironment: XScalarEnvironment | undefined\n\n      constructor(view: EditorView) {\n        this.lastEnvironment = props.environment\n        this.decorations = this.buildDecorations(view)\n      }\n\n      update(update: ViewUpdate): void {\n        // Rebuild decorations if environment changed\n        if (props.environment !== this.lastEnvironment) {\n          this.lastEnvironment = props.environment\n          this.decorations = this.buildDecorations(update.view)\n          return\n        }\n\n        // Only rebuild decorations if document or viewport changed\n        if (update.docChanged || update.viewportChanged) {\n          this.decorations = this.buildDecorations(update.view)\n        }\n      }\n\n      buildDecorations(view: EditorView): DecorationSet {\n        const builder = new RangeSetBuilder<Decoration>()\n\n        for (const { from, to } of view.visibleRanges) {\n          const text = view.state.doc.sliceString(from, to)\n\n          // Create a new regex instance to ensure lastIndex is reset\n          const regex = new RegExp(REGEX.VARIABLES.source, REGEX.VARIABLES.flags)\n          let match: RegExpExecArray | null\n\n          while ((match = regex.exec(text)) !== null) {\n            const start = from + match.index\n            const end = start + match[0].length\n            const variableName = match[1] ?? ''\n\n            // Skip decorations that span line breaks as CodeMirror does not allow them\n            const matchedText = view.state.doc.sliceString(start, end)\n            if (matchedText.includes('\\n')) {\n              continue\n            }\n\n            builder.add(\n              start,\n              end,\n              Decoration.widget({\n                widget: new PillWidget(variableName, props.environment),\n                side: 1,\n              }),\n            )\n          }\n        }\n\n        return builder.finish()\n      }\n    },\n    {\n      decorations: (v) => v.decorations,\n    },\n  )\n\n/**\n * Custom backspace handler for the editor.\n * Handles special cases like removing entire variable syntax and clearing all content.\n */\nexport const backspaceCommand = EditorView.domEventHandlers({\n  keydown(event, view): boolean {\n    if (event.key !== 'Backspace') {\n      return false\n    }\n\n    const { state } = view\n    const { from, to } = state.selection.main\n\n    // When selecting all content and pressing backspace,\n    // prevent breaking line content addition on pill removal\n    if (from === 0 && to === state.doc.length) {\n      view.dispatch({\n        changes: { from: 0, to: state.doc.length },\n        selection: { anchor: 0 },\n      })\n      event.preventDefault()\n      return true\n    }\n\n    // When cursor is after a variable closing bracket (}}),\n    // remove the entire closing syntax at once\n    if (from === to && from >= 2) {\n      const before = state.doc.sliceString(from - 2, from)\n      if (before === '}}') {\n        view.dispatch({\n          changes: { from: from - 2, to: from },\n          selection: { anchor: from - 2 },\n        })\n        event.preventDefault()\n        return true\n      }\n    }\n\n    return false\n  },\n})\n"],"mappings":"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"}

package/dist/v2/components/code-input/index.d.ts

@@ -1,2 +1,2 @@
-export { default as CodeInput } from './CodeInput.vue';
+export { default as CodeInput } from './CodeInput.vue.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/v2/components/code-input/index.js

@@ -1,2 +1,2 @@
-import { t as CodeInput_default } from "../../../code-input-iq-moLxi.js";
+import CodeInput_default from "./CodeInput.vue.js";
 export { CodeInput_default as CodeInput };

package/dist/v2/components/context-menu/ContextMenu.vue.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    align?: 'start' | 'center' | 'end';
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    sideOffset?: number;
+    disabled?: boolean;
+    triggerClass?: string;
+};
+declare var __VLS_14: {}, __VLS_34: {};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_14) => any;
+} & {
+    content?: (props: typeof __VLS_34) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+    align: "start" | "center" | "end";
+    side: "top" | "right" | "bottom" | "left";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=ContextMenu.vue.d.ts.map

package/dist/v2/components/context-menu/ContextMenu.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/context-menu/ContextMenu.vue"],"names":[],"mappings":"AA0EA,KAAK,WAAW,GAAG;IACf,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAC;AAmHJ,QAAA,IAAI,QAAQ,IAAW,EAAE,QAAQ,IAAY,CAAE;AAC/C,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU;cA7HD,OAAO;WAHV,OAAO,GAAG,QAAQ,GAAG,KAAK;UAC3B,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM;6EAkI5C,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/v2/components/context-menu/ContextMenu.vue.js

@@ -0,0 +1,8 @@
+import ContextMenu_vue_vue_type_script_setup_true_lang_default from "./ContextMenu.vue.script.js";
+/* empty css                          */
+//#region src/v2/components/context-menu/ContextMenu.vue
+var ContextMenu_default = ContextMenu_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ContextMenu_default as default };
+
+//# sourceMappingURL=ContextMenu.vue.js.map

package/dist/v2/components/context-menu/ContextMenu.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.vue.js","names":[],"sources":["../../../../src/v2/components/context-menu/ContextMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuPortal,\n  ContextMenuRoot,\n  ContextMenuTrigger,\n} from 'radix-vue'\n\nconst props = withDefaults(\n  defineProps<{\n    align?: 'start' | 'center' | 'end'\n    side?: 'top' | 'right' | 'bottom' | 'left'\n    sideOffset?: number\n    disabled?: boolean\n    triggerClass?: string\n  }>(),\n  {\n    side: 'bottom',\n    align: 'center',\n    disabled: false,\n  },\n)\n</script>\n\n<template>\n  <ContextMenuRoot>\n    <ContextMenuTrigger\n      :class=\"triggerClass\"\n      :disabled=\"props.disabled\">\n      <slot name=\"trigger\" />\n    </ContextMenuTrigger>\n    <ContextMenuPortal>\n      <ContextMenuContent\n        :align=\"props.align\"\n        class=\"scalar-api-client-context-menu\"\n        :side=\"props.side\"\n        :sideOffset=\"props.sideOffset\">\n        <ContextMenuItem>\n          <slot name=\"content\" />\n        </ContextMenuItem>\n      </ContextMenuContent>\n    </ContextMenuPortal>\n  </ContextMenuRoot>\n</template>\n\n<style>\n@reference \"@/style.css\";\n\n/**\n * The content wrapper (data-radix-popper-content-wrapper) creates\n * a new stacking context, so we need to override the z-index there.\n * We need to target our own context menu class to keep the styles from\n * leaking out and affecting other Radix UI components.\n */\n[data-radix-popper-content-wrapper]:has(.scalar-api-client-context-menu) {\n  /**\n   * We have to use important because Radix UI sets the z-index in a style\n   * attribute on the content wrapper.\n   */\n  @apply z-context!;\n}\n</style>\n"],"mappings":""}

package/dist/v2/components/context-menu/ContextMenu.vue.script.js

@@ -0,0 +1,53 @@
+import { createBlock, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, unref, withCtx } from "vue";
+import { ContextMenuContent, ContextMenuItem, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from "radix-vue";
+//#region src/v2/components/context-menu/ContextMenu.vue?vue&type=script&setup=true&lang.ts
+var ContextMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ContextMenu",
+	props: {
+		align: { default: "center" },
+		side: { default: "bottom" },
+		sideOffset: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		triggerClass: {}
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ContextMenuRoot), null, {
+				default: withCtx(() => [createVNode(unref(ContextMenuTrigger), {
+					class: normalizeClass(__props.triggerClass),
+					disabled: props.disabled
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "trigger")]),
+					_: 3
+				}, 8, ["class", "disabled"]), createVNode(unref(ContextMenuPortal), null, {
+					default: withCtx(() => [createVNode(unref(ContextMenuContent), {
+						align: props.align,
+						class: "scalar-api-client-context-menu",
+						side: props.side,
+						sideOffset: props.sideOffset
+					}, {
+						default: withCtx(() => [createVNode(unref(ContextMenuItem), null, {
+							default: withCtx(() => [renderSlot(_ctx.$slots, "content")]),
+							_: 3
+						})]),
+						_: 3
+					}, 8, [
+						"align",
+						"side",
+						"sideOffset"
+					])]),
+					_: 3
+				})]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { ContextMenu_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=ContextMenu.vue.script.js.map

package/dist/v2/components/context-menu/ContextMenu.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.vue.script.js","names":[],"sources":["../../../../src/v2/components/context-menu/ContextMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuPortal,\n  ContextMenuRoot,\n  ContextMenuTrigger,\n} from 'radix-vue'\n\nconst props = withDefaults(\n  defineProps<{\n    align?: 'start' | 'center' | 'end'\n    side?: 'top' | 'right' | 'bottom' | 'left'\n    sideOffset?: number\n    disabled?: boolean\n    triggerClass?: string\n  }>(),\n  {\n    side: 'bottom',\n    align: 'center',\n    disabled: false,\n  },\n)\n</script>\n\n<template>\n  <ContextMenuRoot>\n    <ContextMenuTrigger\n      :class=\"triggerClass\"\n      :disabled=\"props.disabled\">\n      <slot name=\"trigger\" />\n    </ContextMenuTrigger>\n    <ContextMenuPortal>\n      <ContextMenuContent\n        :align=\"props.align\"\n        class=\"scalar-api-client-context-menu\"\n        :side=\"props.side\"\n        :sideOffset=\"props.sideOffset\">\n        <ContextMenuItem>\n          <slot name=\"content\" />\n        </ContextMenuItem>\n      </ContextMenuContent>\n    </ContextMenuPortal>\n  </ContextMenuRoot>\n</template>\n\n<style>\n@reference \"@/style.css\";\n\n/**\n * The content wrapper (data-radix-popper-content-wrapper) creates\n * a new stacking context, so we need to override the z-index there.\n * We need to target our own context menu class to keep the styles from\n * leaking out and affecting other Radix UI components.\n */\n[data-radix-popper-content-wrapper]:has(.scalar-api-client-context-menu) {\n  /**\n   * We have to use important because Radix UI sets the z-index in a style\n   * attribute on the content wrapper.\n   */\n  @apply z-context!;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;EASA,MAAM,QAAQ;;uBAiBZ,YAiBkB,MAAA,gBAAA,EAAA,MAAA;2BAZK,CAJrB,YAIqB,MAAA,mBAAA,EAAA;KAHlB,OAAK,eAAE,QAAA,aAAY;KACnB,UAAU,MAAM;;4BACM,CAAvB,WAAuB,KAAA,QAAA,UAAA,CAAA,CAAA;;kCAEzB,YAUoB,MAAA,kBAAA,EAAA,MAAA;4BADG,CARrB,YAQqB,MAAA,mBAAA,EAAA;MAPlB,OAAO,MAAM;MACd,OAAM;MACL,MAAM,MAAM;MACZ,YAAY,MAAM;;6BAGD,CAFlB,YAEkB,MAAA,gBAAA,EAAA,MAAA;8BADO,CAAvB,WAAuB,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/v2/components/context-menu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ContextMenu } from './ContextMenu.vue.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/v2/components/context-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/context-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/v2/components/context-menu/index.js

@@ -0,0 +1,2 @@
+import ContextMenu_default from "./ContextMenu.vue.js";
+export { ContextMenu_default as ContextMenu };

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

@@ -0,0 +1,7 @@
+import DataTable_vue_vue_type_script_setup_true_lang_default from "./DataTable.vue.script.js";
+//#region src/v2/components/data-table/DataTable.vue
+var DataTable_default = DataTable_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DataTable_default as default };
+
+//# sourceMappingURL=DataTable.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.vue.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/components'\n\ndefineProps<{\n  columns: (string | undefined)[]\n  /** Scroll horizontally */\n  scroll?: boolean\n  /** Presentational table */\n  presentational?: boolean\n}>()\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        scroll ? 'overflow-x-auto custom-scroll' : 'overflow-visible',\n        'scalar-data-table',\n      )\n    \">\n    <table\n      class=\"mb-0 grid min-h-8 auto-rows-auto\"\n      :class=\"{ 'w-max min-w-full': scroll }\"\n      :role=\"presentational ? 'presentation' : 'table'\"\n      :style=\"{\n        gridTemplateColumns: columns.map((col) => col || '1fr').join(' '),\n      }\">\n      <caption\n        v-if=\"$slots.caption\"\n        class=\"sr-only\">\n        <slot name=\"caption\" />\n      </caption>\n      <slot />\n    </table>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,30 @@
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, renderSlot, unref } from "vue";
+import { useBindCx } from "@scalar/components";
+//#region src/v2/components/data-table/DataTable.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role"];
+var _hoisted_2 = {
+	key: 0,
+	class: "sr-only"
+};
+var DataTable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "DataTable",
+	props: {
+		columns: {},
+		scroll: { type: Boolean },
+		presentational: { type: Boolean }
+	},
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(cx)(__props.scroll ? "overflow-x-auto custom-scroll" : "overflow-visible", "scalar-data-table"))), [createElementVNode("table", {
+				class: normalizeClass(["mb-0 grid min-h-8 auto-rows-auto", { "w-max min-w-full": __props.scroll }]),
+				role: __props.presentational ? "presentation" : "table",
+				style: normalizeStyle({ gridTemplateColumns: __props.columns.map((col) => col || "1fr").join(" ") })
+			}, [_ctx.$slots.caption ? (openBlock(), createElementBlock("caption", _hoisted_2, [renderSlot(_ctx.$slots, "caption")])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")], 14, _hoisted_1)], 16);
+		};
+	}
+});
+//#endregion
+export { DataTable_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DataTable.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.vue.script.js","names":["$slots"],"sources":["../../../../src/v2/components/data-table/DataTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/components'\n\ndefineProps<{\n  columns: (string | undefined)[]\n  /** Scroll horizontally */\n  scroll?: boolean\n  /** Presentational table */\n  presentational?: boolean\n}>()\nconst { cx } = useBindCx()\n</script>\n<template>\n  <div\n    v-bind=\"\n      cx(\n        scroll ? 'overflow-x-auto custom-scroll' : 'overflow-visible',\n        'scalar-data-table',\n      )\n    \">\n    <table\n      class=\"mb-0 grid min-h-8 auto-rows-auto\"\n      :class=\"{ 'w-max min-w-full': scroll }\"\n      :role=\"presentational ? 'presentation' : 'table'\"\n      :style=\"{\n        gridTemplateColumns: columns.map((col) => col || '1fr').join(' '),\n      }\">\n      <caption\n        v-if=\"$slots.caption\"\n        class=\"sr-only\">\n        <slot name=\"caption\" />\n      </caption>\n      <slot />\n    </table>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAUA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAqBM,OAAA,eAAA,mBApBW,MAAA,GAAE,CAAU,QAAA,SAAM,kCAAA,oBAAA,oBAAA,CAAA,CAAA,EAAA,CAMjC,mBAaQ,SAAA;IAZN,OAAK,eAAA,CAAC,oCAAkC,EAAA,oBACV,QAAA,QAAM,CAAA,CAAA;IACnC,MAAM,QAAA,iBAAc,iBAAA;IACpB,OAAK,eAAA,EAAA,qBAAiC,QAAA,QAAQ,KAAK,QAAQ,OAAG,MAAA,CAAW,KAAI,IAAA,EAAA,CAAA;OAItEA,KAAAA,OAAO,WAAA,WAAA,EADf,mBAIU,WAJV,YAIU,CADR,WAAuB,KAAA,QAAA,UAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,EAEzB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,IAAA,WAAA,CAAA,EAAA,GAAA"}

package/dist/v2/components/data-table/DataTableCell.vue.js

@@ -0,0 +1,7 @@
+import DataTableCell_vue_vue_type_script_setup_true_lang_default from "./DataTableCell.vue.script.js";
+//#region src/v2/components/data-table/DataTableCell.vue
+var DataTableCell_default = DataTableCell_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DataTableCell_default as default };
+
+//# sourceMappingURL=DataTableCell.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableCell.vue.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTableCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/components'\nimport type { Component } from 'vue'\n\nwithDefaults(\n  defineProps<{\n    is?: string | Component\n  }>(),\n  { is: 'td' },\n)\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"\n      cx(\n        'box-content max-h-8 min-h-8 min-w-8 border-l-0 border-t border-b-0 border-r flex text-base/5 last:border-r-0 group-last:border-b-transparent p-0 m-0 relative',\n      )\n    \"\n    class=\"group-[.alert]:bg-b-alert group-[.error]:bg-b-danger\">\n    <slot />\n  </component>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,21 @@
+import { createBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, unref, withCtx } from "vue";
+import { useBindCx } from "@scalar/components";
+//#region src/v2/components/data-table/DataTableCell.vue?vue&type=script&setup=true&lang.ts
+var DataTableCell_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "DataTableCell",
+	props: { is: { default: "td" } },
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.is), mergeProps(unref(cx)("box-content max-h-8 min-h-8 min-w-8 border-l-0 border-t border-b-0 border-r flex text-base/5 last:border-r-0 group-last:border-b-transparent p-0 m-0 relative"), { class: "group-[.alert]:bg-b-alert group-[.error]:bg-b-danger" }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { DataTableCell_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DataTableCell.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableCell.vue.script.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTableCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/components'\nimport type { Component } from 'vue'\n\nwithDefaults(\n  defineProps<{\n    is?: string | Component\n  }>(),\n  { is: 'td' },\n)\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"\n      cx(\n        'box-content max-h-8 min-h-8 min-w-8 border-l-0 border-t border-b-0 border-r flex text-base/5 last:border-r-0 group-last:border-b-transparent p-0 m-0 relative',\n      )\n    \"\n    class=\"group-[.alert]:bg-b-alert group-[.error]:bg-b-danger\">\n    <slot />\n  </component>\n</template>\n"],"mappings":";;;;;;;;EAYA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,YASY,wBARL,QAAA,GAAE,EADT,WAEiB,MAAA,GAAE,CAAA,gKAAA,EAAA,EAKjB,OAAM,wDAAsD,CAAA,EAAA;2BACpD,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/v2/components/data-table/DataTableCheckbox.vue.js

@@ -0,0 +1,7 @@
+import DataTableCheckbox_vue_vue_type_script_setup_true_lang_default from "./DataTableCheckbox.vue.script.js";
+//#region src/v2/components/data-table/DataTableCheckbox.vue
+var DataTableCheckbox_default = DataTableCheckbox_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DataTableCheckbox_default as default };
+
+//# sourceMappingURL=DataTableCheckbox.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableCheckbox.vue.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTableCheckbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, ScalarIcon } from '@scalar/components'\n\nimport DataTableCell from './DataTableCell.vue'\n\nwithDefaults(\n  defineProps<{\n    modelValue: boolean\n    disabled?: boolean\n    align?: 'left' | 'center'\n  }>(),\n  {\n    align: 'center',\n  },\n)\n\ndefineEmits<{\n  (e: 'update:modelValue', v: boolean): void\n}>()\n\nconst variants = cva({\n  base: 'w-8 h-8 flex items-center justify-center text-b-2 peer-checked:text-c-1 pointer-events-none absolute',\n  variants: {\n    align: {\n      left: 'left-0',\n      center: 'centered',\n    },\n  },\n})\n</script>\n<template>\n  <DataTableCell class=\"group/cell relative flex min-w-8\">\n    <input\n      :checked=\"modelValue\"\n      class=\"peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-default\"\n      :disabled=\"Boolean(disabled)\"\n      type=\"checkbox\"\n      @change=\"(e: any) => $emit('update:modelValue', e.target.checked)\" />\n    <div :class=\"variants({ align })\">\n      <div\n        class=\"absolute m-auto size-3/4 rounded border-[1px] opacity-0\"\n        :class=\"\n          !disabled &&\n          'group-has-[:focus-visible]/cell:border-c-accent group-hover:opacity-100 group-has-[:focus-visible]/cell:opacity-100'\n        \" />\n      <ScalarIcon\n        icon=\"Checkmark\"\n        size=\"xs\"\n        thickness=\"2.5\" />\n    </div>\n  </DataTableCell>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,43 @@
+import DataTableCell_default from "./DataTableCell.vue.js";
+import { createBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, unref, withCtx } from "vue";
+import { ScalarIcon, cva } from "@scalar/components";
+//#region src/v2/components/data-table/DataTableCheckbox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["checked", "disabled"];
+var DataTableCheckbox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "DataTableCheckbox",
+	props: {
+		modelValue: { type: Boolean },
+		disabled: { type: Boolean },
+		align: { default: "center" }
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const variants = cva({
+			base: "w-8 h-8 flex items-center justify-center text-b-2 peer-checked:text-c-1 pointer-events-none absolute",
+			variants: { align: {
+				left: "left-0",
+				center: "centered"
+			} }
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(DataTableCell_default, { class: "group/cell relative flex min-w-8" }, {
+				default: withCtx(() => [createElementVNode("input", {
+					checked: __props.modelValue,
+					class: "peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-default",
+					disabled: Boolean(__props.disabled),
+					type: "checkbox",
+					onChange: _cache[0] || (_cache[0] = (e) => _ctx.$emit("update:modelValue", e.target.checked))
+				}, null, 40, _hoisted_1), createElementVNode("div", { class: normalizeClass(unref(variants)({ align: __props.align })) }, [createElementVNode("div", { class: normalizeClass(["absolute m-auto size-3/4 rounded border-[1px] opacity-0", !__props.disabled && "group-has-[:focus-visible]/cell:border-c-accent group-hover:opacity-100 group-has-[:focus-visible]/cell:opacity-100"]) }, null, 2), createVNode(unref(ScalarIcon), {
+					icon: "Checkmark",
+					size: "xs",
+					thickness: "2.5"
+				})], 2)]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { DataTableCheckbox_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DataTableCheckbox.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableCheckbox.vue.script.js","names":["$emit"],"sources":["../../../../src/v2/components/data-table/DataTableCheckbox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, ScalarIcon } from '@scalar/components'\n\nimport DataTableCell from './DataTableCell.vue'\n\nwithDefaults(\n  defineProps<{\n    modelValue: boolean\n    disabled?: boolean\n    align?: 'left' | 'center'\n  }>(),\n  {\n    align: 'center',\n  },\n)\n\ndefineEmits<{\n  (e: 'update:modelValue', v: boolean): void\n}>()\n\nconst variants = cva({\n  base: 'w-8 h-8 flex items-center justify-center text-b-2 peer-checked:text-c-1 pointer-events-none absolute',\n  variants: {\n    align: {\n      left: 'left-0',\n      center: 'centered',\n    },\n  },\n})\n</script>\n<template>\n  <DataTableCell class=\"group/cell relative flex min-w-8\">\n    <input\n      :checked=\"modelValue\"\n      class=\"peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-default\"\n      :disabled=\"Boolean(disabled)\"\n      type=\"checkbox\"\n      @change=\"(e: any) => $emit('update:modelValue', e.target.checked)\" />\n    <div :class=\"variants({ align })\">\n      <div\n        class=\"absolute m-auto size-3/4 rounded border-[1px] opacity-0\"\n        :class=\"\n          !disabled &&\n          'group-has-[:focus-visible]/cell:border-c-accent group-hover:opacity-100 group-has-[:focus-visible]/cell:opacity-100'\n        \" />\n      <ScalarIcon\n        icon=\"Checkmark\"\n        size=\"xs\"\n        thickness=\"2.5\" />\n    </div>\n  </DataTableCell>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAoBA,MAAM,WAAW,IAAI;GACnB,MAAM;GACN,UAAU,EACR,OAAO;IACL,MAAM;IACN,QAAQ;IACT,EACF;GACF,CAAA;;uBAGC,YAmBgB,uBAAA,EAnBD,OAAM,oCAAkC,EAAA;2BAMkB,CALvE,mBAKuE,SAAA;KAJpE,SAAS,QAAA;KACV,OAAM;KACL,UAAU,QAAQ,QAAA,SAAQ;KAC3B,MAAK;KACJ,UAAM,OAAA,OAAA,OAAA,MAAG,MAAWA,KAAAA,MAAK,qBAAsB,EAAE,OAAO,QAAO;8BAClE,mBAWM,OAAA,EAXA,OAAK,eAAE,MAAA,SAAQ,CAAA,EAAA,OAAG,QAAA,OAAK,CAAA,CAAA,EAAA,EAAA,CAC3B,mBAKM,OAAA,EAJJ,OAAK,eAAA,CAAC,2DAAA,CACc,QAAA,YAAA,sHAAA,CAAA,EAAA,EAAA,MAAA,EAAA,EAItB,YAGoB,MAAA,WAAA,EAAA;KAFlB,MAAK;KACL,MAAK;KACL,WAAU"}

package/dist/v2/components/data-table/DataTableHeader.vue.js

@@ -0,0 +1,7 @@
+import DataTableHeader_vue_vue_type_script_setup_true_lang_default from "./DataTableHeader.vue.script.js";
+//#region src/v2/components/data-table/DataTableHeader.vue
+var DataTableHeader_default = DataTableHeader_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DataTableHeader_default as default };
+
+//# sourceMappingURL=DataTableHeader.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableHeader.vue.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTableHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/components'\n\nimport DataTableCell from './DataTableCell.vue'\n\nconst { cx } = useBindCx()\n</script>\n<template>\n  <DataTableCell\n    is=\"th\"\n    v-bind=\"cx('items-center font-medium px-2 min-w-0 -outline-offset-1')\">\n    <slot />\n  </DataTableCell>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,20 @@
+import DataTableCell_default from "./DataTableCell.vue.js";
+import { createBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { useBindCx } from "@scalar/components";
+//#region src/v2/components/data-table/DataTableHeader.vue?vue&type=script&setup=true&lang.ts
+var DataTableHeader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "DataTableHeader",
+	setup(__props) {
+		const { cx } = useBindCx();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(DataTableCell_default, mergeProps({ is: "th" }, unref(cx)("items-center font-medium px-2 min-w-0 -outline-offset-1")), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { DataTableHeader_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DataTableHeader.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableHeader.vue.script.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTableHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/components'\n\nimport DataTableCell from './DataTableCell.vue'\n\nconst { cx } = useBindCx()\n</script>\n<template>\n  <DataTableCell\n    is=\"th\"\n    v-bind=\"cx('items-center font-medium px-2 min-w-0 -outline-offset-1')\">\n    <slot />\n  </DataTableCell>\n</template>\n"],"mappings":";;;;;;;EAKA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,YAIgB,uBAJhB,WAIgB,EAHd,IAAG,MAAI,EACC,MAAA,GAAE,CAAA,0DAAA,CAAA,EAAA;2BACF,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/v2/components/data-table/DataTableInput.vue.js

@@ -0,0 +1,9 @@
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+import DataTableInput_vue_vue_type_script_setup_true_lang_default from "./DataTableInput.vue.script.js";
+/* empty css                             */
+//#region src/v2/components/data-table/DataTableInput.vue
+var DataTableInput_default = /* @__PURE__ */ _plugin_vue_export_helper_default(DataTableInput_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-3157c3c7"]]);
+//#endregion
+export { DataTableInput_default as default };
+
+//# sourceMappingURL=DataTableInput.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableInput.vue.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTableInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components'\nimport { ScalarIconEye, ScalarIconEyeSlash, ScalarIconX } from '@scalar/icons'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed, ref, useTemplateRef } from 'vue'\n\nimport type { VueClassProp } from '@/types/vue'\nimport { CodeInput } from '@/v2/components/code-input'\n\nimport DataTableCell from './DataTableCell.vue'\nimport DataTableInputSelect from './DataTableInputSelect.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    id?: string\n    type?: string | undefined\n    /** Class for the wrapping cell because attrs is bound to the input */\n    containerClass?: VueClassProp | undefined\n    required?: boolean\n    modelValue: string\n    /** Allows adding a custom value to the enum dropdown, defaults to true */\n    canAddCustomEnumValue?: boolean\n    readOnly?: boolean\n    enum?: string[]\n    min?: number\n    max?: number\n    environment: XScalarEnvironment\n    description?: string | undefined\n    lineWrapping?: boolean\n  }>(),\n  {\n    canAddCustomEnumValue: true,\n    required: false,\n    readOnly: false,\n    lineWrapping: false,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: string | number): void\n  (e: 'inputFocus'): void\n  (e: 'inputBlur'): void\n  (e: 'selectVariable', value: string): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst mask = ref(true)\nconst interactingWithDropdown = ref(false)\nconst codeInput = useTemplateRef('codeInput')\n\nconst handleBlur = () => !interactingWithDropdown.value && emit('inputBlur')\n\nconst inputType = computed(() =>\n  props.type === 'password' ? 'text' : (props.type ?? 'text'),\n)\n\n// If not an enum nor read only, focus the code input\nconst handleLabelClick = () => {\n  if (!props.enum?.length && !props.readOnly) {\n    codeInput.value?.focus()\n  }\n}\n</script>\n<template>\n  <DataTableCell\n    class=\"relative flex\"\n    :class=\"containerClass\">\n    <div\n      v-if=\"$slots.default\"\n      class=\"text-c-1 flex items-center pr-0 pl-3\"\n      :for=\"id ?? ''\"\n      @click=\"handleLabelClick\">\n      <slot />:\n    </div>\n    <div class=\"relative flex min-w-0 flex-1\">\n      <template v-if=\"props.enum && props.enum.length\">\n        <DataTableInputSelect\n          :canAddCustomValue=\"props.canAddCustomEnumValue\"\n          :modelValue=\"props.modelValue\"\n          :value=\"props.enum\"\n          @update:modelValue=\"emit('update:modelValue', $event)\" />\n      </template>\n      <template v-else>\n        <input\n          v-if=\"mask && type === 'password'\"\n          v-bind=\"id ? { ...$attrs, id: id } : $attrs\"\n          autocomplete=\"off\"\n          class=\"text-c-1 disabled:text-c-2 peer w-full min-w-0 border-none px-2 py-1.25 -outline-offset-1\"\n          :class=\"{ 'scalar-password-input': type === 'password' }\"\n          data-1p-ignore\n          :readOnly=\"readOnly\"\n          spellcheck=\"false\"\n          :type=\"inputType\"\n          :value=\"modelValue\"\n          @input=\"\n            emit(\n              'update:modelValue',\n              ($event.target as HTMLInputElement).value ?? '',\n            )\n          \" />\n        <CodeInput\n          v-else\n          v-bind=\"$attrs\"\n          :id=\"id\"\n          ref=\"codeInput\"\n          class=\"text-c-1 disabled:text-c-2 peer w-full min-w-0 border-none -outline-offset-1\"\n          :class=\"[\n            type === 'password' && description && 'pr-12',\n            description && 'pr-8',\n            type === 'password' && 'scalar-password-input',\n          ]\"\n          :description=\"description\"\n          disableCloseBrackets\n          disableTabIndent\n          :environment=\"environment\"\n          :lineWrapping=\"Boolean(lineWrapping)\"\n          :max=\"max\"\n          :min=\"min\"\n          :modelValue=\"modelValue ?? ''\"\n          :readOnly=\"readOnly\"\n          :required=\"Boolean(required)\"\n          spellcheck=\"false\"\n          :type=\"inputType\"\n          @blur=\"handleBlur\"\n          @focus=\"emit('inputFocus')\"\n          @update:modelValue=\"(value) => emit('update:modelValue', value)\" />\n      </template>\n    </div>\n    <div\n      v-if=\"$slots.warning\"\n      class=\"centered-y text-orange absolute right-7 text-xs\">\n      <slot name=\"warning\" />\n    </div>\n    <slot name=\"icon\" />\n    <!-- Clear -->\n    <ScalarIconButton\n      v-if=\"modelValue\"\n      class=\"-ml-.25 h-6 w-6 self-center p-1.25\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Value\"\n      @click=\"emit('update:modelValue', '')\" />\n    <!-- Toggle Visibility -->\n    <ScalarIconButton\n      v-if=\"type === 'password'\"\n      class=\"-ml-.5 mr-1.25 h-6 w-6 self-center p-1.25\"\n      data-testid=\"data-table-password-toggle\"\n      :icon=\"mask ? ScalarIconEye : ScalarIconEyeSlash\"\n      :label=\"mask ? 'Show Password' : 'Hide Password'\"\n      @click=\"mask = !mask\" />\n  </DataTableCell>\n</template>\n\n<style scoped>\n:deep(.cm-editor) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n  width: 100%;\n}\n:deep(.cm-content):has(.cm-pill) {\n  padding: 5px 8px;\n}\n:deep(.cm-content .cm-pill:not(:last-of-type)) {\n  margin-right: 0.5px;\n}\n:deep(.cm-content .cm-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n:deep(.cm-line) {\n  overflow: hidden;\n  padding: 0;\n  text-overflow: ellipsis;\n  word-break: break-word;\n}\n.required::after {\n  content: 'Required';\n}\n/* Tailwind placeholder is busted */\ninput::placeholder {\n  color: var(--scalar-color-3);\n}\n/* we want our inputs to look like a password input but not be one */\n.scalar-password-input {\n  text-security: disc;\n  -webkit-text-security: disc;\n  -moz-text-security: disc;\n}\n</style>\n"],"mappings":""}

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

@@ -0,0 +1,160 @@
+import DataTableInputSelect_default from "./DataTableInputSelect.vue.js";
+import CodeInput_default from "../code-input/CodeInput.vue.js";
+import DataTableCell_default from "./DataTableCell.vue.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderSlot, unref, useTemplateRef, withCtx } from "vue";
+import { ScalarIconButton } from "@scalar/components";
+import { ScalarIconEye, ScalarIconEyeSlash, ScalarIconX } from "@scalar/icons";
+//#region src/v2/components/data-table/DataTableInput.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["for"];
+var _hoisted_2 = { class: "relative flex min-w-0 flex-1" };
+var _hoisted_3 = [
+	"readOnly",
+	"type",
+	"value"
+];
+var _hoisted_4 = {
+	key: 1,
+	class: "centered-y text-orange absolute right-7 text-xs"
+};
+var DataTableInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "DataTableInput",
+	props: {
+		id: {},
+		type: {},
+		containerClass: {},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		modelValue: {},
+		canAddCustomEnumValue: {
+			type: Boolean,
+			default: true
+		},
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
+		enum: {},
+		min: {},
+		max: {},
+		environment: {},
+		description: {},
+		lineWrapping: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"inputFocus",
+		"inputBlur",
+		"selectVariable"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const mask = ref(true);
+		const interactingWithDropdown = ref(false);
+		const codeInput = useTemplateRef("codeInput");
+		const handleBlur = () => !interactingWithDropdown.value && emit("inputBlur");
+		const inputType = computed(() => props.type === "password" ? "text" : props.type ?? "text");
+		const handleLabelClick = () => {
+			if (!props.enum?.length && !props.readOnly) codeInput.value?.focus();
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(DataTableCell_default, { class: normalizeClass(["relative flex", __props.containerClass]) }, {
+				default: withCtx(() => [
+					_ctx.$slots.default ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: "text-c-1 flex items-center pr-0 pl-3",
+						for: __props.id ?? "",
+						onClick: handleLabelClick
+					}, [renderSlot(_ctx.$slots, "default", {}, void 0, true), _cache[6] || (_cache[6] = createTextVNode(": ", -1))], 8, _hoisted_1)) : createCommentVNode("", true),
+					createElementVNode("div", _hoisted_2, [props.enum && props.enum.length ? (openBlock(), createBlock(DataTableInputSelect_default, {
+						key: 0,
+						canAddCustomValue: props.canAddCustomEnumValue,
+						modelValue: props.modelValue,
+						value: props.enum,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event))
+					}, null, 8, [
+						"canAddCustomValue",
+						"modelValue",
+						"value"
+					])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [mask.value && __props.type === "password" ? (openBlock(), createElementBlock("input", mergeProps({ key: 0 }, __props.id ? {
+						..._ctx.$attrs,
+						id: __props.id
+					} : _ctx.$attrs, {
+						autocomplete: "off",
+						class: ["text-c-1 disabled:text-c-2 peer w-full min-w-0 border-none px-2 py-1.25 -outline-offset-1", { "scalar-password-input": __props.type === "password" }],
+						"data-1p-ignore": "",
+						readOnly: __props.readOnly,
+						spellcheck: "false",
+						type: inputType.value,
+						value: __props.modelValue,
+						onInput: _cache[1] || (_cache[1] = ($event) => emit("update:modelValue", $event.target.value ?? ""))
+					}), null, 16, _hoisted_3)) : (openBlock(), createBlock(unref(CodeInput_default), mergeProps({ key: 1 }, _ctx.$attrs, {
+						id: __props.id,
+						ref_key: "codeInput",
+						ref: codeInput,
+						class: ["text-c-1 disabled:text-c-2 peer w-full min-w-0 border-none -outline-offset-1", [
+							__props.type === "password" && __props.description && "pr-12",
+							__props.description && "pr-8",
+							__props.type === "password" && "scalar-password-input"
+						]],
+						description: __props.description,
+						disableCloseBrackets: "",
+						disableTabIndent: "",
+						environment: __props.environment,
+						lineWrapping: Boolean(__props.lineWrapping),
+						max: __props.max,
+						min: __props.min,
+						modelValue: __props.modelValue ?? "",
+						readOnly: __props.readOnly,
+						required: Boolean(__props.required),
+						spellcheck: "false",
+						type: inputType.value,
+						onBlur: handleBlur,
+						onFocus: _cache[2] || (_cache[2] = ($event) => emit("inputFocus")),
+						"onUpdate:modelValue": _cache[3] || (_cache[3] = (value) => emit("update:modelValue", value))
+					}), null, 16, [
+						"id",
+						"class",
+						"description",
+						"environment",
+						"lineWrapping",
+						"max",
+						"min",
+						"modelValue",
+						"readOnly",
+						"required",
+						"type"
+					]))], 64))]),
+					_ctx.$slots.warning ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "warning", {}, void 0, true)])) : createCommentVNode("", true),
+					renderSlot(_ctx.$slots, "icon", {}, void 0, true),
+					__props.modelValue ? (openBlock(), createBlock(unref(ScalarIconButton), {
+						key: 2,
+						class: "-ml-.25 h-6 w-6 self-center p-1.25",
+						icon: unref(ScalarIconX),
+						label: "Clear Value",
+						onClick: _cache[4] || (_cache[4] = ($event) => emit("update:modelValue", ""))
+					}, null, 8, ["icon"])) : createCommentVNode("", true),
+					__props.type === "password" ? (openBlock(), createBlock(unref(ScalarIconButton), {
+						key: 3,
+						class: "-ml-.5 mr-1.25 h-6 w-6 self-center p-1.25",
+						"data-testid": "data-table-password-toggle",
+						icon: mask.value ? unref(ScalarIconEye) : unref(ScalarIconEyeSlash),
+						label: mask.value ? "Show Password" : "Hide Password",
+						onClick: _cache[5] || (_cache[5] = ($event) => mask.value = !mask.value)
+					}, null, 8, ["icon", "label"])) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 8, ["class"]);
+		};
+	}
+});
+//#endregion
+export { DataTableInput_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DataTableInput.vue.script.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableInput.vue.script.js","names":["$slots","$attrs"],"sources":["../../../../src/v2/components/data-table/DataTableInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ScalarIconButton } from '@scalar/components'\nimport { ScalarIconEye, ScalarIconEyeSlash, ScalarIconX } from '@scalar/icons'\nimport type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments'\nimport { computed, ref, useTemplateRef } from 'vue'\n\nimport type { VueClassProp } from '@/types/vue'\nimport { CodeInput } from '@/v2/components/code-input'\n\nimport DataTableCell from './DataTableCell.vue'\nimport DataTableInputSelect from './DataTableInputSelect.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    id?: string\n    type?: string | undefined\n    /** Class for the wrapping cell because attrs is bound to the input */\n    containerClass?: VueClassProp | undefined\n    required?: boolean\n    modelValue: string\n    /** Allows adding a custom value to the enum dropdown, defaults to true */\n    canAddCustomEnumValue?: boolean\n    readOnly?: boolean\n    enum?: string[]\n    min?: number\n    max?: number\n    environment: XScalarEnvironment\n    description?: string | undefined\n    lineWrapping?: boolean\n  }>(),\n  {\n    canAddCustomEnumValue: true,\n    required: false,\n    readOnly: false,\n    lineWrapping: false,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: string | number): void\n  (e: 'inputFocus'): void\n  (e: 'inputBlur'): void\n  (e: 'selectVariable', value: string): void\n}>()\n\ndefineOptions({ inheritAttrs: false })\n\nconst mask = ref(true)\nconst interactingWithDropdown = ref(false)\nconst codeInput = useTemplateRef('codeInput')\n\nconst handleBlur = () => !interactingWithDropdown.value && emit('inputBlur')\n\nconst inputType = computed(() =>\n  props.type === 'password' ? 'text' : (props.type ?? 'text'),\n)\n\n// If not an enum nor read only, focus the code input\nconst handleLabelClick = () => {\n  if (!props.enum?.length && !props.readOnly) {\n    codeInput.value?.focus()\n  }\n}\n</script>\n<template>\n  <DataTableCell\n    class=\"relative flex\"\n    :class=\"containerClass\">\n    <div\n      v-if=\"$slots.default\"\n      class=\"text-c-1 flex items-center pr-0 pl-3\"\n      :for=\"id ?? ''\"\n      @click=\"handleLabelClick\">\n      <slot />:\n    </div>\n    <div class=\"relative flex min-w-0 flex-1\">\n      <template v-if=\"props.enum && props.enum.length\">\n        <DataTableInputSelect\n          :canAddCustomValue=\"props.canAddCustomEnumValue\"\n          :modelValue=\"props.modelValue\"\n          :value=\"props.enum\"\n          @update:modelValue=\"emit('update:modelValue', $event)\" />\n      </template>\n      <template v-else>\n        <input\n          v-if=\"mask && type === 'password'\"\n          v-bind=\"id ? { ...$attrs, id: id } : $attrs\"\n          autocomplete=\"off\"\n          class=\"text-c-1 disabled:text-c-2 peer w-full min-w-0 border-none px-2 py-1.25 -outline-offset-1\"\n          :class=\"{ 'scalar-password-input': type === 'password' }\"\n          data-1p-ignore\n          :readOnly=\"readOnly\"\n          spellcheck=\"false\"\n          :type=\"inputType\"\n          :value=\"modelValue\"\n          @input=\"\n            emit(\n              'update:modelValue',\n              ($event.target as HTMLInputElement).value ?? '',\n            )\n          \" />\n        <CodeInput\n          v-else\n          v-bind=\"$attrs\"\n          :id=\"id\"\n          ref=\"codeInput\"\n          class=\"text-c-1 disabled:text-c-2 peer w-full min-w-0 border-none -outline-offset-1\"\n          :class=\"[\n            type === 'password' && description && 'pr-12',\n            description && 'pr-8',\n            type === 'password' && 'scalar-password-input',\n          ]\"\n          :description=\"description\"\n          disableCloseBrackets\n          disableTabIndent\n          :environment=\"environment\"\n          :lineWrapping=\"Boolean(lineWrapping)\"\n          :max=\"max\"\n          :min=\"min\"\n          :modelValue=\"modelValue ?? ''\"\n          :readOnly=\"readOnly\"\n          :required=\"Boolean(required)\"\n          spellcheck=\"false\"\n          :type=\"inputType\"\n          @blur=\"handleBlur\"\n          @focus=\"emit('inputFocus')\"\n          @update:modelValue=\"(value) => emit('update:modelValue', value)\" />\n      </template>\n    </div>\n    <div\n      v-if=\"$slots.warning\"\n      class=\"centered-y text-orange absolute right-7 text-xs\">\n      <slot name=\"warning\" />\n    </div>\n    <slot name=\"icon\" />\n    <!-- Clear -->\n    <ScalarIconButton\n      v-if=\"modelValue\"\n      class=\"-ml-.25 h-6 w-6 self-center p-1.25\"\n      :icon=\"ScalarIconX\"\n      label=\"Clear Value\"\n      @click=\"emit('update:modelValue', '')\" />\n    <!-- Toggle Visibility -->\n    <ScalarIconButton\n      v-if=\"type === 'password'\"\n      class=\"-ml-.5 mr-1.25 h-6 w-6 self-center p-1.25\"\n      data-testid=\"data-table-password-toggle\"\n      :icon=\"mask ? ScalarIconEye : ScalarIconEyeSlash\"\n      :label=\"mask ? 'Show Password' : 'Hide Password'\"\n      @click=\"mask = !mask\" />\n  </DataTableCell>\n</template>\n\n<style scoped>\n:deep(.cm-editor) {\n  padding: 0;\n}\n:deep(.cm-content) {\n  align-items: center;\n  background-color: transparent;\n  display: flex;\n  font-family: var(--scalar-font);\n  font-size: var(--scalar-small);\n  padding: 5px 8px;\n  width: 100%;\n}\n:deep(.cm-content):has(.cm-pill) {\n  padding: 5px 8px;\n}\n:deep(.cm-content .cm-pill:not(:last-of-type)) {\n  margin-right: 0.5px;\n}\n:deep(.cm-content .cm-pill:not(:first-of-type)) {\n  margin-left: 0.5px;\n}\n:deep(.cm-line) {\n  overflow: hidden;\n  padding: 0;\n  text-overflow: ellipsis;\n  word-break: break-word;\n}\n.required::after {\n  content: 'Required';\n}\n/* Tailwind placeholder is busted */\ninput::placeholder {\n  color: var(--scalar-color-3);\n}\n/* we want our inputs to look like a password input but not be one */\n.scalar-password-input {\n  text-security: disc;\n  -webkit-text-security: disc;\n  -moz-text-security: disc;\n}\n</style>\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import type { CodeInputModelValue } from '../../../v2/components/code-input/CodeInput.vue';
+import type { CodeInputModelValue } from '../../../v2/components/code-input/CodeInput.vue.js';
 type __VLS_Props = {
     modelValue: CodeInputModelValue;
     value?: string[];

package/dist/v2/components/data-table/DataTableInputSelect.vue.js

@@ -0,0 +1,7 @@
+import DataTableInputSelect_vue_vue_type_script_setup_true_lang_default from "./DataTableInputSelect.vue.script.js";
+//#region src/v2/components/data-table/DataTableInputSelect.vue
+var DataTableInputSelect_default = DataTableInputSelect_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DataTableInputSelect_default as default };
+
+//# sourceMappingURL=DataTableInputSelect.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableInputSelect.vue.js","names":[],"sources":["../../../../src/v2/components/data-table/DataTableInputSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarComboboxMultiselect,\n  ScalarDropdown,\n  ScalarDropdownDivider,\n  ScalarDropdownItem,\n  ScalarIcon,\n} from '@scalar/components'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport type { CodeInputModelValue } from '@/v2/components/code-input/CodeInput.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: CodeInputModelValue\n    value?: string[]\n    default?: CodeInputModelValue | undefined\n    canAddCustomValue?: boolean\n    type?: string | undefined\n  }>(),\n  { canAddCustomValue: true },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', v: string): void\n}>()\n\nconst options = computed(() => props.value ?? [])\nconst addingCustomValue = ref(false)\nconst customValue = ref('')\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nwatch(customValue, (newValue) => {\n  emit('update:modelValue', newValue)\n})\n\nconst updateSelected = (value: string) => {\n  emit('update:modelValue', value)\n  addingCustomValue.value = false\n}\n\nconst addCustomValue = () => {\n  if (customValue.value.trim()) {\n    updateSelected(customValue.value)\n  }\n}\n\nconst handleBlur = () => {\n  if (!customValue.value.trim()) {\n    emit('update:modelValue', '')\n  }\n  addingCustomValue.value = false\n}\n\nconst isSelected = (value: string) => {\n  return props.modelValue.toString() === value\n}\n\nwatch(addingCustomValue, (newValue) => {\n  if (newValue) {\n    nextTick(() => {\n      inputRef.value?.focus()\n    })\n  }\n})\n\nconst initialValue = computed(() => {\n  return props.modelValue !== undefined ? props.modelValue : props.default\n})\n\n/** Options for the array type */\nconst arrayOptions = computed(() =>\n  options.value.map((option) => {\n    const id = option.toString()\n    return { id: id, label: id, value: id }\n  }),\n)\n\n/** Filter the options by what is selected */\nconst selectedArrayOptions = computed(() => {\n  const selectedValues = new Set(props.modelValue.toString().split(','))\n  return arrayOptions.value.filter((option) => selectedValues.has(option.id))\n})\n\n/** Update the model value when the selected options change */\nconst updateSelectedOptions = (selectedOptions: any) => {\n  const selectedValues = selectedOptions.map((option: any) => option.value)\n  emit('update:modelValue', selectedValues.join(','))\n}\n</script>\n\n<template>\n  <div\n    class=\"group-[.alert]:outline-orange group-[.error]:outline-red w-full pr-10 -outline-offset-1 has-[:focus-visible]:rounded-[4px] has-[:focus-visible]:outline\">\n    <template v-if=\"type === 'array'\">\n      <ScalarComboboxMultiselect\n        :modelValue=\"selectedArrayOptions\"\n        :options=\"arrayOptions\"\n        @update:modelValue=\"updateSelectedOptions\">\n        <ScalarButton\n          class=\"custom-scroll h-full justify-start gap-1.5 px-2 py-1.5 pr-6 font-normal outline-none\"\n          fullWidth\n          variant=\"ghost\">\n          <span class=\"text-c-1 whitespace-nowrap\">{{\n            selectedArrayOptions.length > 0\n              ? selectedArrayOptions.map((option) => option.label).join(', ')\n              : 'Select a value'\n          }}</span>\n          <ScalarIcon\n            class=\"min-w-4\"\n            icon=\"ChevronDown\"\n            size=\"md\" />\n        </ScalarButton>\n      </ScalarComboboxMultiselect>\n    </template>\n    <template v-else-if=\"addingCustomValue\">\n      <input\n        ref=\"inputRef\"\n        v-model=\"customValue\"\n        class=\"text-c-1 w-full min-w-0 border-none px-2 py-1.5 outline-none\"\n        placeholder=\"Value\"\n        type=\"text\"\n        @blur=\"handleBlur\"\n        @keyup.enter=\"addCustomValue\" />\n    </template>\n    <template v-else>\n      <ScalarDropdown\n        resize\n        :value=\"initialValue\">\n        <ScalarButton\n          class=\"size-full justify-start gap-1.5 overflow-auto px-2 py-1.5 font-normal whitespace-nowrap outline-none\"\n          variant=\"ghost\">\n          <span class=\"text-c-1 overflow-hidden text-ellipsis\">{{\n            initialValue ?? 'Select a value'\n          }}</span>\n          <ScalarIcon\n            icon=\"ChevronDown\"\n            size=\"md\" />\n        </ScalarButton>\n        <template #items>\n          <ScalarDropdownItem\n            v-for=\"option in options\"\n            :key=\"option\"\n            class=\"group/item flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap\"\n            :value=\"option\"\n            @click=\"updateSelected(option)\">\n            <div\n              class=\"flex h-4 w-4 items-center justify-center rounded-full p-[3px]\"\n              :class=\"\n                isSelected(option)\n                  ? 'bg-c-accent text-b-1'\n                  : 'shadow-border text-transparent'\n              \">\n              <ScalarIcon\n                class=\"size-2.5\"\n                icon=\"Checkmark\"\n                thickness=\"3\" />\n            </div>\n            <span class=\"overflow-hidden text-ellipsis\">{{ option }}</span>\n          </ScalarDropdownItem>\n          <template v-if=\"canAddCustomValue\">\n            <ScalarDropdownDivider v-if=\"options.length\" />\n            <ScalarDropdownItem\n              class=\"flex items-center gap-1.5\"\n              @click=\"addingCustomValue = true\">\n              <div class=\"flex h-4 w-4 items-center justify-center\">\n                <ScalarIcon\n                  icon=\"Add\"\n                  size=\"sm\" />\n              </div>\n              <span>Add value</span>\n            </ScalarDropdownItem>\n          </template>\n        </template>\n      </ScalarDropdown>\n    </template>\n  </div>\n</template>\n"],"mappings":""}