@scalar/api-client 2.38.4 → 2.39.1

package/dist/v2/features/search/helpers/create-search-index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-search-index.js","names":[],"sources":["../../../../../src/v2/features/search/helpers/create-search-index.ts"],"sourcesContent":["import { getResolvedRef } from '@scalar/workspace-store/helpers/get-resolved-ref'\nimport type { TraversedEntry } from '@scalar/workspace-store/schemas/navigation'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\n\nimport type { FuseData } from '@/v2/features/search/types'\n\n/**\n * Create a search index from a list of entries.\n */\nexport function createSearchIndex(documents: OpenApiDocument[]): FuseData[] {\n  const index: FuseData[] = []\n\n  /**\n   * Recursively processes entries and their children to build the search index.\n   */\n  function processEntries(entriesToProcess: TraversedEntry[], document?: OpenApiDocument): void {\n    entriesToProcess.forEach((entry) => {\n      addEntryToIndex(entry, index, document)\n\n      // Recursively process children if they exist\n      if ('children' in entry && entry.children) {\n        processEntries(entry.children, document)\n      }\n    })\n  }\n\n  documents?.forEach((document) => processEntries(document['x-scalar-navigation']?.children ?? [], document))\n\n  return index\n}\n\n/**\n * Adds a single entry to the search index, handling all entry types recursively.\n */\nfunction addEntryToIndex(entry: TraversedEntry, index: FuseData[], document?: OpenApiDocument): void {\n  // Operation\n  if (entry.type === 'operation') {\n    const operation = getResolvedRef(document?.paths?.[entry.path]?.[entry.method]) ?? {}\n\n    index.push({\n      type: 'operation',\n      title: entry.title,\n      id: entry.id,\n      description: operation.description || '',\n      method: entry.method,\n      path: entry.path,\n      operationId: operation.operationId,\n      entry,\n      documentName: document?.info.title ?? '',\n    })\n\n    return\n  }\n\n  if (entry.type === 'tag' && entry.isGroup === false) {\n    index.push({\n      id: entry.id,\n      title: entry.title,\n      description: entry.description || '',\n      type: 'tag',\n      entry,\n      documentName: document?.info.title ?? '',\n    })\n\n    return\n  }\n\n  // Tag group\n  if (entry.type === 'tag' && entry.isGroup === true) {\n    index.push({\n      id: entry.id,\n      title: entry.title,\n      description: 'Tag Group',\n      type: 'tag',\n      entry,\n      documentName: document?.info.title ?? '',\n    })\n\n    return\n  }\n\n  // Headings from info.description\n  if (entry.type === 'text') {\n    index.push({\n      id: entry.id,\n      type: 'heading',\n      title: entry.title ?? '',\n      description: 'Heading',\n      entry,\n      documentName: document?.info.title ?? '',\n    })\n\n    return\n  }\n}\n"],"mappings":";;;;;AASA,SAAgB,kBAAkB,WAA0C;CAC1E,MAAM,QAAoB,EAAE;;;;CAK5B,SAAS,eAAe,kBAAoC,UAAkC;AAC5F,mBAAiB,SAAS,UAAU;AAClC,mBAAgB,OAAO,OAAO,SAAS;AAGvC,OAAI,cAAc,SAAS,MAAM,SAC/B,gBAAe,MAAM,UAAU,SAAS;IAE1C;;AAGJ,YAAW,SAAS,aAAa,eAAe,SAAS,wBAAwB,YAAY,EAAE,EAAE,SAAS,CAAC;AAE3G,QAAO;;;;;AAMT,SAAS,gBAAgB,OAAuB,OAAmB,UAAkC;AAEnG,KAAI,MAAM,SAAS,aAAa;EAC9B,MAAM,YAAY,eAAe,UAAU,QAAQ,MAAM,QAAQ,MAAM,QAAQ,IAAI,EAAE;AAErF,QAAM,KAAK;GACT,MAAM;GACN,OAAO,MAAM;GACb,IAAI,MAAM;GACV,aAAa,UAAU,eAAe;GACtC,QAAQ,MAAM;GACd,MAAM,MAAM;GACZ,aAAa,UAAU;GACvB;GACA,cAAc,UAAU,KAAK,SAAS;GACvC,CAAC;AAEF;;AAGF,KAAI,MAAM,SAAS,SAAS,MAAM,YAAY,OAAO;AACnD,QAAM,KAAK;GACT,IAAI,MAAM;GACV,OAAO,MAAM;GACb,aAAa,MAAM,eAAe;GAClC,MAAM;GACN;GACA,cAAc,UAAU,KAAK,SAAS;GACvC,CAAC;AAEF;;AAIF,KAAI,MAAM,SAAS,SAAS,MAAM,YAAY,MAAM;AAClD,QAAM,KAAK;GACT,IAAI,MAAM;GACV,OAAO,MAAM;GACb,aAAa;GACb,MAAM;GACN;GACA,cAAc,UAAU,KAAK,SAAS;GACvC,CAAC;AAEF;;AAIF,KAAI,MAAM,SAAS,QAAQ;AACzB,QAAM,KAAK;GACT,IAAI,MAAM;GACV,MAAM;GACN,OAAO,MAAM,SAAS;GACtB,aAAa;GACb;GACA,cAAc,UAAU,KAAK,SAAS;GACvC,CAAC;AAEF"}

package/dist/v2/features/search/hooks/use-search-index.js

@@ -0,0 +1,31 @@
+import { createFuseInstance } from "../helpers/create-fuse-instance.js";
+import { createSearchIndex } from "../helpers/create-search-index.js";
+import { computed, ref, toValue } from "vue";
+//#region src/v2/features/search/hooks/use-search-index.ts
+var MAX_SEARCH_RESULTS = 25;
+/**
+* Creates the search index from multiple OpenAPI documents
+*/
+var useSearchIndex = (documents) => {
+	/** When the document changes we replace the search index */
+	const fuse = computed(() => {
+		const instance = createFuseInstance();
+		instance.setCollection(createSearchIndex(toValue(documents)));
+		return instance;
+	});
+	const query = ref("");
+	return {
+		results: computed(() => {
+			if (query.value.length !== 0) return fuse.value.search(query.value, { limit: MAX_SEARCH_RESULTS }).flatMap((result) => {
+				if (result.item.entry.type !== "operation") return [];
+				return result.item.entry;
+			});
+			return null;
+		}),
+		query
+	};
+};
+//#endregion
+export { useSearchIndex };
+
+//# sourceMappingURL=use-search-index.js.map

package/dist/v2/features/search/hooks/use-search-index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-search-index.js","names":[],"sources":["../../../../../src/v2/features/search/hooks/use-search-index.ts"],"sourcesContent":["import type { Item } from '@scalar/sidebar'\nimport type { OpenApiDocument } from '@scalar/workspace-store/schemas/v3.1/strict/openapi-document'\nimport { type MaybeRefOrGetter, computed, ref, toValue } from 'vue'\n\nimport { createFuseInstance } from '../helpers/create-fuse-instance'\nimport { createSearchIndex } from '../helpers/create-search-index'\n\nconst MAX_SEARCH_RESULTS = 25\n\n/**\n * Creates the search index from multiple OpenAPI documents\n */\nexport const useSearchIndex = (documents: MaybeRefOrGetter<OpenApiDocument[]>) => {\n  /** When the document changes we replace the search index */\n  const fuse = computed(() => {\n    const instance = createFuseInstance()\n    instance.setCollection(createSearchIndex(toValue(documents)))\n    return instance\n  })\n\n  const query = ref<string>('')\n\n  const results = computed<Item[] | null>(() => {\n    if (query.value.length !== 0) {\n      const fuseResults = fuse.value.search(query.value, {\n        limit: MAX_SEARCH_RESULTS,\n      })\n\n      // Lets only show operations for now to match previous behavior\n      return fuseResults.flatMap((result) => {\n        if (result.item.entry.type !== 'operation') {\n          return []\n        }\n\n        return result.item.entry\n      })\n    }\n\n    return null\n  })\n\n  return {\n    results,\n    query,\n  }\n}\n"],"mappings":";;;;AAOA,IAAM,qBAAqB;;;;AAK3B,IAAa,kBAAkB,cAAmD;;CAEhF,MAAM,OAAO,eAAe;EAC1B,MAAM,WAAW,oBAAoB;AACrC,WAAS,cAAc,kBAAkB,QAAQ,UAAU,CAAC,CAAC;AAC7D,SAAO;GACP;CAEF,MAAM,QAAQ,IAAY,GAAG;AAqB7B,QAAO;EACL,SApBc,eAA8B;AAC5C,OAAI,MAAM,MAAM,WAAW,EAMzB,QALoB,KAAK,MAAM,OAAO,MAAM,OAAO,EACjD,OAAO,oBACR,CAAC,CAGiB,SAAS,WAAW;AACrC,QAAI,OAAO,KAAK,MAAM,SAAS,YAC7B,QAAO,EAAE;AAGX,WAAO,OAAO,KAAK;KACnB;AAGJ,UAAO;IACP;EAIA;EACD"}

package/dist/v2/features/search/index.d.ts

@@ -1,2 +1,2 @@
-export { useSearchIndex } from './hooks/use-search-index';
+export { useSearchIndex } from './hooks/use-search-index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/v2/features/search/index.js

@@ -1,2 +1,2 @@
-import { t as useSearchIndex } from "../../../search-CmsQQkjn.js";
+import { useSearchIndex } from "./hooks/use-search-index.js";
 export { useSearchIndex };

package/dist/v2/features/settings/CollectionSettings.vue.d.ts

@@ -9,15 +9,19 @@ type __VLS_Props = {
     activeThemeSlug?: string;
     /** Currently active color mode */
     colorMode: ColorMode;
+    /** Whether telemetry is enabled */
+    telemetry?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:colorMode": (value: ColorMode) => any;
     "update:proxyUrl": (value: string | null) => any;
     "update:themeSlug": (value: string | undefined) => any;
+    "update:telemetry": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:colorMode"?: ((value: ColorMode) => any) | undefined;
     "onUpdate:proxyUrl"?: ((value: string | null) => any) | undefined;
     "onUpdate:themeSlug"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:telemetry"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/v2/features/settings/CollectionSettings.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionSettings.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/settings/CollectionSettings.vue"],"names":[],"mappings":"AAkTA,OAAO,EAIL,KAAK,KAAK,EAEX,MAAM,gBAAgB,CAAA;AASvB,KAAK,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;AAE5C,KAAK,WAAW,GAAG;IACjB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,KAAK,EAAE,CAAA;IACtB,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kCAAkC;IAClC,SAAS,EAAE,SAAS,CAAA;CACrB,CAAC;AAgnBF,QAAA,MAAM,YAAY;;;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"CollectionSettings.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/settings/CollectionSettings.vue"],"names":[],"mappings":"AAkVA,OAAO,EAIL,KAAK,KAAK,EAEX,MAAM,gBAAgB,CAAA;AASvB,KAAK,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;AAE5C,KAAK,WAAW,GAAG;IACjB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,KAAK,EAAE,CAAA;IACtB,gCAAgC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kCAAkC;IAClC,SAAS,EAAE,SAAS,CAAA;IACpB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAC;AAgqBF,QAAA,MAAM,YAAY;;;;;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/v2/features/settings/CollectionSettings.vue.js

@@ -0,0 +1,7 @@
+import CollectionSettings_vue_vue_type_script_setup_true_lang_default from "./CollectionSettings.vue.script.js";
+//#region src/v2/features/settings/CollectionSettings.vue
+var CollectionSettings_default = CollectionSettings_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CollectionSettings_default as default };
+
+//# sourceMappingURL=CollectionSettings.vue.js.map

package/dist/v2/features/settings/CollectionSettings.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionSettings.vue.js","names":[],"sources":["../../../../src/v2/features/settings/CollectionSettings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  cva,\n  cx,\n  ScalarButton,\n  ScalarIcon,\n  ScalarToggleInput,\n} from '@scalar/components'\nimport {\n  presets,\n  themeLabels,\n  type IntegrationThemeId,\n  type Theme,\n  type ThemeId,\n} from '@scalar/themes'\nimport { computed } from 'vue'\n\nimport IntegrationLogo from '@/components/ImportCollection/IntegrationLogo.vue'\n\nimport Appearance from './components/Appearance.vue'\nimport Section from './components/Section.vue'\nimport { getThemeColors } from './helpers/get-theme-colors'\n\ntype ColorMode = 'system' | 'light' | 'dark'\n\nconst {\n  activeProxyUrl,\n  customThemes = [],\n  activeThemeSlug,\n  colorMode,\n  telemetry,\n} = defineProps<{\n  /** Currently active proxy URL, when set to null means no proxy */\n  activeProxyUrl?: string | null\n  /** Custom themes available to the team */\n  customThemes?: Theme[]\n  /** Currently active theme ID */\n  activeThemeSlug?: string\n  /** Currently active color mode */\n  colorMode: ColorMode\n  /** Whether telemetry is enabled */\n  telemetry?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:proxyUrl', value: string | null): void\n  (e: 'update:themeSlug', value: string | undefined): void\n  (e: 'update:colorMode', value: ColorMode): void\n  (e: 'update:telemetry', value: boolean): void\n}>()\n\nconst DEFAULT_PROXY_URL = 'https://proxy.scalar.com'\n\nconst THEME_IDS: Exclude<ThemeId, IntegrationThemeId>[] = [\n  'none',\n  'default',\n  'alternate',\n  'purple',\n  'solarized',\n  'saturn',\n  'kepler',\n]\n\nconst INTEGRATION_THEME_IDS: IntegrationThemeId[] = ['elysiajs', 'fastify']\n\nconst defaultThemes = THEME_IDS.map((themeId) => {\n  if (themeId === 'none') {\n    return {\n      slug: themeId,\n      name: 'None',\n      description: 'No theme',\n      theme: '',\n    }\n  }\n  return presets[themeId]\n})\n\nconst integrationThemes = INTEGRATION_THEME_IDS.map((themeId) => ({\n  slug: themeId,\n  name: themeLabels[themeId],\n  description: themeLabels[themeId],\n  theme: '',\n}))\n\nconst customThemeSlugs = computed(\n  () => new Set(customThemes.map((theme) => theme.slug)),\n)\n\nconst buttonStyles = cva({\n  base: 'w-full shadow-none text-c-1 justify-start pl-2 gap-2 border',\n  variants: {\n    active: {\n      true: 'bg-primary text-c-1 hover:bg-inherit',\n      false: 'bg-b-1 hover:bg-b-2',\n    },\n  },\n})\n\n/**\n * Determines if the \"None\" theme should be selected.\n * This happens when no theme is selected, or when the selected theme does not exist.\n */\nconst isNoneThemeSelected = computed(() => {\n  if (activeThemeSlug === undefined || activeThemeSlug === 'none') {\n    return true\n  }\n\n  const isValidTheme =\n    customThemeSlugs.value.has(activeThemeSlug) ||\n    defaultThemes.some((theme) => theme.slug === activeThemeSlug) ||\n    integrationThemes.some((theme) => theme.slug === activeThemeSlug)\n\n  return !isValidTheme\n})\n\nconst isNoneTheme = (themeId: string): boolean => themeId === 'none'\n\nconst isThemeActive = (themeSlug: string): boolean => {\n  return (\n    activeThemeSlug === themeSlug ||\n    (isNoneTheme(themeSlug) && isNoneThemeSelected.value)\n  )\n}\n\nconst checkmarkClasses = (isActive: boolean) =>\n  cx(\n    'flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1',\n    isActive && 'bg-c-accent text-b-1 border-transparent',\n  )\n</script>\n<template>\n  <div class=\"flex flex-col gap-10\">\n    <!-- Proxy -->\n    <Section>\n      <template #title>CORS Proxy</template>\n      <template #description>\n        Browsers block cross-origin requests for security. We provide a public\n        proxy to\n        <a\n          class=\"hover:text-c-1 underline underline-offset-2\"\n          href=\"https://en.wikipedia.org/wiki/Cross-origin_resource_sharing\"\n          target=\"_blank\"\n          >bypass CORS issues</a\n        >\n        . Check the\n        <a\n          class=\"hover:text-c-1 underline underline-offset-2\"\n          href=\"https://github.com/scalar/scalar/tree/main/projects/proxy-scalar-com\"\n          target=\"_blank\"\n          >source code on GitHub</a\n        >\n        .\n      </template>\n\n      <div class=\"flex flex-col gap-2\">\n        <ScalarButton\n          :class=\"\n            cx(\n              buttonStyles({\n                active: activeProxyUrl === DEFAULT_PROXY_URL,\n              }),\n            )\n          \"\n          @click=\"emit('update:proxyUrl', DEFAULT_PROXY_URL)\">\n          <div :class=\"checkmarkClasses(activeProxyUrl === DEFAULT_PROXY_URL)\">\n            <ScalarIcon\n              v-if=\"activeProxyUrl === DEFAULT_PROXY_URL\"\n              icon=\"Checkmark\"\n              size=\"xs\"\n              thickness=\"3.5\" />\n          </div>\n          Use proxy.scalar.com (default)\n        </ScalarButton>\n\n        <ScalarButton\n          :class=\"cx(buttonStyles({ active: !activeProxyUrl }))\"\n          @click=\"emit('update:proxyUrl', null)\">\n          <div :class=\"checkmarkClasses(!activeProxyUrl)\">\n            <ScalarIcon\n              v-if=\"!activeProxyUrl\"\n              icon=\"Checkmark\"\n              size=\"xs\"\n              thickness=\"3.5\" />\n          </div>\n          Skip the proxy\n        </ScalarButton>\n      </div>\n    </Section>\n\n    <!-- Themes -->\n    <Section>\n      <template #title>Themes</template>\n      <template #description>\n        We've got a whole rainbow of themes for you to play with:\n      </template>\n\n      <div class=\"grid grid-cols-2 gap-2\">\n        <ScalarButton\n          v-for=\"theme in defaultThemes\"\n          :key=\"theme.slug\"\n          :class=\"cx(buttonStyles({ active: isThemeActive(theme.slug) }))\"\n          @click=\"\n            emit(\n              'update:themeSlug',\n              isNoneTheme(theme.slug) ? undefined : theme.slug,\n            )\n          \">\n          <div class=\"flex items-center gap-2\">\n            <div :class=\"checkmarkClasses(isThemeActive(theme.slug))\">\n              <ScalarIcon\n                v-if=\"isThemeActive(theme.slug)\"\n                icon=\"Checkmark\"\n                size=\"xs\"\n                thickness=\"3.5\" />\n            </div>\n            {{ theme.name }}\n          </div>\n          <div class=\"flex items-center gap-1\">\n            <span\n              class=\"border-c-3 -mr-3 inline-block h-5 w-5 rounded-full\"\n              :style=\"{\n                backgroundColor: getThemeColors(theme.slug).light,\n              }\" />\n            <span\n              class=\"border-c-3 -mr-3 inline-block h-5 w-5 rounded-full\"\n              :style=\"{\n                backgroundColor: getThemeColors(theme.slug).dark,\n              }\" />\n            <span\n              class=\"border-c-3 inline-block h-5 w-5 rounded-full\"\n              :style=\"{\n                backgroundColor: getThemeColors(theme.slug).accent,\n              }\" />\n          </div>\n        </ScalarButton>\n      </div>\n    </Section>\n\n    <!-- Frameworks -->\n    <Section>\n      <template #title>Framework Themes</template>\n      <template #description>\n        Are you a real fan? Show your support by using your favorite framework's\n        theme!\n      </template>\n\n      <div class=\"grid grid-cols-2 gap-2\">\n        <ScalarButton\n          v-for=\"theme in integrationThemes\"\n          :key=\"theme.slug\"\n          :class=\"cx(buttonStyles({ active: activeThemeSlug === theme.slug }))\"\n          @click=\"emit('update:themeSlug', theme.slug)\">\n          <div class=\"flex items-center gap-2\">\n            <div :class=\"checkmarkClasses(activeThemeSlug === theme.slug)\">\n              <ScalarIcon\n                v-if=\"activeThemeSlug === theme.slug\"\n                icon=\"Checkmark\"\n                size=\"xs\"\n                thickness=\"3.5\" />\n            </div>\n            {{ theme.name }}\n          </div>\n          <div class=\"flex items-center gap-1\">\n            <div class=\"size-7 rounded-xl\">\n              <IntegrationLogo :integration=\"theme.slug\" />\n            </div>\n          </div>\n        </ScalarButton>\n      </div>\n    </Section>\n\n    <!-- Custom Themes -->\n    <Section v-if=\"customThemes.length > 0\">\n      <template #title> Custom Themes </template>\n      <template #description>\n        Team defined themes are available to all workspaces in the team.\n      </template>\n\n      <div class=\"grid grid-cols-2 gap-2\">\n        <ScalarButton\n          v-for=\"theme in customThemes\"\n          :key=\"theme.slug\"\n          :class=\"cx(buttonStyles({ active: activeThemeSlug === theme.slug }))\"\n          @click=\"emit('update:themeSlug', theme.slug)\">\n          <div class=\"flex items-center gap-2\">\n            <div :class=\"checkmarkClasses(activeThemeSlug === theme.slug)\">\n              <ScalarIcon\n                v-if=\"activeThemeSlug === theme.slug\"\n                icon=\"Checkmark\"\n                size=\"xs\"\n                thickness=\"3.5\" />\n            </div>\n            {{ theme.name }}\n          </div>\n        </ScalarButton>\n      </div>\n    </Section>\n\n    <!-- Appearance -->\n    <Section>\n      <template #title>Appearance</template>\n      <template #description>\n        Choose between light, dark, or system-based appearance for your\n        workspace.\n      </template>\n\n      <Appearance\n        :colorMode=\"colorMode\"\n        @update:colorMode=\"(value) => emit('update:colorMode', value)\" />\n    </Section>\n\n    <!-- Telemetry -->\n    <Section>\n      <template #title>Telemetry</template>\n      <template #description>\n        Help us improve Scalar by sending usage data.\n      </template>\n\n      <ScalarToggleInput\n        :modelValue=\"telemetry\"\n        @update:modelValue=\"\n          (value) => emit('update:telemetry', value ?? false)\n        \">\n        Enable telemetry\n      </ScalarToggleInput>\n    </Section>\n  </div>\n</template>\n"],"mappings":""}

package/dist/v2/features/settings/CollectionSettings.vue.script.js

@@ -0,0 +1,229 @@
+import IntegrationLogo_default from "../../../components/ImportCollection/IntegrationLogo.vue.js";
+import Section_default from "./components/Section.vue.js";
+import Appearance_default from "./components/Appearance.vue.js";
+import { getThemeColors } from "./helpers/get-theme-colors.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import { ScalarButton, ScalarIcon, ScalarToggleInput, cva, cx } from "@scalar/components";
+import { presets, themeLabels } from "@scalar/themes";
+//#region src/v2/features/settings/CollectionSettings.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-col gap-10" };
+var _hoisted_2 = { class: "flex flex-col gap-2" };
+var _hoisted_3 = { class: "grid grid-cols-2 gap-2" };
+var _hoisted_4 = { class: "flex items-center gap-2" };
+var _hoisted_5 = { class: "flex items-center gap-1" };
+var _hoisted_6 = { class: "grid grid-cols-2 gap-2" };
+var _hoisted_7 = { class: "flex items-center gap-2" };
+var _hoisted_8 = { class: "flex items-center gap-1" };
+var _hoisted_9 = { class: "size-7 rounded-xl" };
+var _hoisted_10 = { class: "grid grid-cols-2 gap-2" };
+var _hoisted_11 = { class: "flex items-center gap-2" };
+var DEFAULT_PROXY_URL = "https://proxy.scalar.com";
+var CollectionSettings_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "CollectionSettings",
+	props: {
+		activeProxyUrl: {},
+		customThemes: { default: () => [] },
+		activeThemeSlug: {},
+		colorMode: {},
+		telemetry: { type: Boolean }
+	},
+	emits: [
+		"update:proxyUrl",
+		"update:themeSlug",
+		"update:colorMode",
+		"update:telemetry"
+	],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const THEME_IDS = [
+			"none",
+			"default",
+			"alternate",
+			"purple",
+			"solarized",
+			"saturn",
+			"kepler"
+		];
+		const INTEGRATION_THEME_IDS = ["elysiajs", "fastify"];
+		const defaultThemes = THEME_IDS.map((themeId) => {
+			if (themeId === "none") return {
+				slug: themeId,
+				name: "None",
+				description: "No theme",
+				theme: ""
+			};
+			return presets[themeId];
+		});
+		const integrationThemes = INTEGRATION_THEME_IDS.map((themeId) => ({
+			slug: themeId,
+			name: themeLabels[themeId],
+			description: themeLabels[themeId],
+			theme: ""
+		}));
+		const customThemeSlugs = computed(() => new Set(__props.customThemes.map((theme) => theme.slug)));
+		const buttonStyles = cva({
+			base: "w-full shadow-none text-c-1 justify-start pl-2 gap-2 border",
+			variants: { active: {
+				true: "bg-primary text-c-1 hover:bg-inherit",
+				false: "bg-b-1 hover:bg-b-2"
+			} }
+		});
+		/**
+		* Determines if the "None" theme should be selected.
+		* This happens when no theme is selected, or when the selected theme does not exist.
+		*/
+		const isNoneThemeSelected = computed(() => {
+			if (__props.activeThemeSlug === void 0 || __props.activeThemeSlug === "none") return true;
+			return !(customThemeSlugs.value.has(__props.activeThemeSlug) || defaultThemes.some((theme) => theme.slug === __props.activeThemeSlug) || integrationThemes.some((theme) => theme.slug === __props.activeThemeSlug));
+		});
+		const isNoneTheme = (themeId) => themeId === "none";
+		const isThemeActive = (themeSlug) => {
+			return __props.activeThemeSlug === themeSlug || isNoneTheme(themeSlug) && isNoneThemeSelected.value;
+		};
+		const checkmarkClasses = (isActive) => cx("flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", isActive && "bg-c-accent text-b-1 border-transparent");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createVNode(Section_default, null, {
+					title: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("CORS Proxy", -1)])]),
+					description: withCtx(() => [..._cache[5] || (_cache[5] = [
+						createTextVNode(" Browsers block cross-origin requests for security. We provide a public proxy to ", -1),
+						createElementVNode("a", {
+							class: "hover:text-c-1 underline underline-offset-2",
+							href: "https://en.wikipedia.org/wiki/Cross-origin_resource_sharing",
+							target: "_blank"
+						}, "bypass CORS issues", -1),
+						createTextVNode(" . Check the ", -1),
+						createElementVNode("a", {
+							class: "hover:text-c-1 underline underline-offset-2",
+							href: "https://github.com/scalar/scalar/tree/main/projects/proxy-scalar-com",
+							target: "_blank"
+						}, "source code on GitHub", -1),
+						createTextVNode(" . ", -1)
+					])]),
+					default: withCtx(() => [createElementVNode("div", _hoisted_2, [createVNode(unref(ScalarButton), {
+						class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: __props.activeProxyUrl === DEFAULT_PROXY_URL }))),
+						onClick: _cache[0] || (_cache[0] = ($event) => emit("update:proxyUrl", DEFAULT_PROXY_URL))
+					}, {
+						default: withCtx(() => [createElementVNode("div", { class: normalizeClass(checkmarkClasses(__props.activeProxyUrl === DEFAULT_PROXY_URL)) }, [__props.activeProxyUrl === DEFAULT_PROXY_URL ? (openBlock(), createBlock(unref(ScalarIcon), {
+							key: 0,
+							icon: "Checkmark",
+							size: "xs",
+							thickness: "3.5"
+						})) : createCommentVNode("", true)], 2), _cache[6] || (_cache[6] = createTextVNode(" Use proxy.scalar.com (default) ", -1))]),
+						_: 1
+					}, 8, ["class"]), createVNode(unref(ScalarButton), {
+						class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: !__props.activeProxyUrl }))),
+						onClick: _cache[1] || (_cache[1] = ($event) => emit("update:proxyUrl", null))
+					}, {
+						default: withCtx(() => [createElementVNode("div", { class: normalizeClass(checkmarkClasses(!__props.activeProxyUrl)) }, [!__props.activeProxyUrl ? (openBlock(), createBlock(unref(ScalarIcon), {
+							key: 0,
+							icon: "Checkmark",
+							size: "xs",
+							thickness: "3.5"
+						})) : createCommentVNode("", true)], 2), _cache[7] || (_cache[7] = createTextVNode(" Skip the proxy ", -1))]),
+						_: 1
+					}, 8, ["class"])])]),
+					_: 1
+				}),
+				createVNode(Section_default, null, {
+					title: withCtx(() => [..._cache[8] || (_cache[8] = [createTextVNode("Themes", -1)])]),
+					description: withCtx(() => [..._cache[9] || (_cache[9] = [createTextVNode(" We've got a whole rainbow of themes for you to play with: ", -1)])]),
+					default: withCtx(() => [createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(defaultThemes), (theme) => {
+						return openBlock(), createBlock(unref(ScalarButton), {
+							key: theme.slug,
+							class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: isThemeActive(theme.slug) }))),
+							onClick: ($event) => emit("update:themeSlug", isNoneTheme(theme.slug) ? void 0 : theme.slug)
+						}, {
+							default: withCtx(() => [createElementVNode("div", _hoisted_4, [createElementVNode("div", { class: normalizeClass(checkmarkClasses(isThemeActive(theme.slug))) }, [isThemeActive(theme.slug) ? (openBlock(), createBlock(unref(ScalarIcon), {
+								key: 0,
+								icon: "Checkmark",
+								size: "xs",
+								thickness: "3.5"
+							})) : createCommentVNode("", true)], 2), createTextVNode(" " + toDisplayString(theme.name), 1)]), createElementVNode("div", _hoisted_5, [
+								createElementVNode("span", {
+									class: "border-c-3 -mr-3 inline-block h-5 w-5 rounded-full",
+									style: normalizeStyle({ backgroundColor: unref(getThemeColors)(theme.slug).light })
+								}, null, 4),
+								createElementVNode("span", {
+									class: "border-c-3 -mr-3 inline-block h-5 w-5 rounded-full",
+									style: normalizeStyle({ backgroundColor: unref(getThemeColors)(theme.slug).dark })
+								}, null, 4),
+								createElementVNode("span", {
+									class: "border-c-3 inline-block h-5 w-5 rounded-full",
+									style: normalizeStyle({ backgroundColor: unref(getThemeColors)(theme.slug).accent })
+								}, null, 4)
+							])]),
+							_: 2
+						}, 1032, ["class", "onClick"]);
+					}), 128))])]),
+					_: 1
+				}),
+				createVNode(Section_default, null, {
+					title: withCtx(() => [..._cache[10] || (_cache[10] = [createTextVNode("Framework Themes", -1)])]),
+					description: withCtx(() => [..._cache[11] || (_cache[11] = [createTextVNode(" Are you a real fan? Show your support by using your favorite framework's theme! ", -1)])]),
+					default: withCtx(() => [createElementVNode("div", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(integrationThemes), (theme) => {
+						return openBlock(), createBlock(unref(ScalarButton), {
+							key: theme.slug,
+							class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: __props.activeThemeSlug === theme.slug }))),
+							onClick: ($event) => emit("update:themeSlug", theme.slug)
+						}, {
+							default: withCtx(() => [createElementVNode("div", _hoisted_7, [createElementVNode("div", { class: normalizeClass(checkmarkClasses(__props.activeThemeSlug === theme.slug)) }, [__props.activeThemeSlug === theme.slug ? (openBlock(), createBlock(unref(ScalarIcon), {
+								key: 0,
+								icon: "Checkmark",
+								size: "xs",
+								thickness: "3.5"
+							})) : createCommentVNode("", true)], 2), createTextVNode(" " + toDisplayString(theme.name), 1)]), createElementVNode("div", _hoisted_8, [createElementVNode("div", _hoisted_9, [createVNode(IntegrationLogo_default, { integration: theme.slug }, null, 8, ["integration"])])])]),
+							_: 2
+						}, 1032, ["class", "onClick"]);
+					}), 128))])]),
+					_: 1
+				}),
+				__props.customThemes.length > 0 ? (openBlock(), createBlock(Section_default, { key: 0 }, {
+					title: withCtx(() => [..._cache[12] || (_cache[12] = [createTextVNode(" Custom Themes ", -1)])]),
+					description: withCtx(() => [..._cache[13] || (_cache[13] = [createTextVNode(" Team defined themes are available to all workspaces in the team. ", -1)])]),
+					default: withCtx(() => [createElementVNode("div", _hoisted_10, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.customThemes, (theme) => {
+						return openBlock(), createBlock(unref(ScalarButton), {
+							key: theme.slug,
+							class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: __props.activeThemeSlug === theme.slug }))),
+							onClick: ($event) => emit("update:themeSlug", theme.slug)
+						}, {
+							default: withCtx(() => [createElementVNode("div", _hoisted_11, [createElementVNode("div", { class: normalizeClass(checkmarkClasses(__props.activeThemeSlug === theme.slug)) }, [__props.activeThemeSlug === theme.slug ? (openBlock(), createBlock(unref(ScalarIcon), {
+								key: 0,
+								icon: "Checkmark",
+								size: "xs",
+								thickness: "3.5"
+							})) : createCommentVNode("", true)], 2), createTextVNode(" " + toDisplayString(theme.name), 1)])]),
+							_: 2
+						}, 1032, ["class", "onClick"]);
+					}), 128))])]),
+					_: 1
+				})) : createCommentVNode("", true),
+				createVNode(Section_default, null, {
+					title: withCtx(() => [..._cache[14] || (_cache[14] = [createTextVNode("Appearance", -1)])]),
+					description: withCtx(() => [..._cache[15] || (_cache[15] = [createTextVNode(" Choose between light, dark, or system-based appearance for your workspace. ", -1)])]),
+					default: withCtx(() => [createVNode(Appearance_default, {
+						colorMode: __props.colorMode,
+						"onUpdate:colorMode": _cache[2] || (_cache[2] = (value) => emit("update:colorMode", value))
+					}, null, 8, ["colorMode"])]),
+					_: 1
+				}),
+				createVNode(Section_default, null, {
+					title: withCtx(() => [..._cache[16] || (_cache[16] = [createTextVNode("Telemetry", -1)])]),
+					description: withCtx(() => [..._cache[17] || (_cache[17] = [createTextVNode(" Help us improve Scalar by sending usage data. ", -1)])]),
+					default: withCtx(() => [createVNode(unref(ScalarToggleInput), {
+						modelValue: __props.telemetry,
+						"onUpdate:modelValue": _cache[3] || (_cache[3] = (value) => emit("update:telemetry", value ?? false))
+					}, {
+						default: withCtx(() => [..._cache[18] || (_cache[18] = [createTextVNode(" Enable telemetry ", -1)])]),
+						_: 1
+					}, 8, ["modelValue"])]),
+					_: 1
+				})
+			]);
+		};
+	}
+});
+//#endregion
+export { CollectionSettings_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=CollectionSettings.vue.script.js.map

package/dist/v2/features/settings/CollectionSettings.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionSettings.vue.script.js","names":[],"sources":["../../../../src/v2/features/settings/CollectionSettings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  cva,\n  cx,\n  ScalarButton,\n  ScalarIcon,\n  ScalarToggleInput,\n} from '@scalar/components'\nimport {\n  presets,\n  themeLabels,\n  type IntegrationThemeId,\n  type Theme,\n  type ThemeId,\n} from '@scalar/themes'\nimport { computed } from 'vue'\n\nimport IntegrationLogo from '@/components/ImportCollection/IntegrationLogo.vue'\n\nimport Appearance from './components/Appearance.vue'\nimport Section from './components/Section.vue'\nimport { getThemeColors } from './helpers/get-theme-colors'\n\ntype ColorMode = 'system' | 'light' | 'dark'\n\nconst {\n  activeProxyUrl,\n  customThemes = [],\n  activeThemeSlug,\n  colorMode,\n  telemetry,\n} = defineProps<{\n  /** Currently active proxy URL, when set to null means no proxy */\n  activeProxyUrl?: string | null\n  /** Custom themes available to the team */\n  customThemes?: Theme[]\n  /** Currently active theme ID */\n  activeThemeSlug?: string\n  /** Currently active color mode */\n  colorMode: ColorMode\n  /** Whether telemetry is enabled */\n  telemetry?: boolean\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:proxyUrl', value: string | null): void\n  (e: 'update:themeSlug', value: string | undefined): void\n  (e: 'update:colorMode', value: ColorMode): void\n  (e: 'update:telemetry', value: boolean): void\n}>()\n\nconst DEFAULT_PROXY_URL = 'https://proxy.scalar.com'\n\nconst THEME_IDS: Exclude<ThemeId, IntegrationThemeId>[] = [\n  'none',\n  'default',\n  'alternate',\n  'purple',\n  'solarized',\n  'saturn',\n  'kepler',\n]\n\nconst INTEGRATION_THEME_IDS: IntegrationThemeId[] = ['elysiajs', 'fastify']\n\nconst defaultThemes = THEME_IDS.map((themeId) => {\n  if (themeId === 'none') {\n    return {\n      slug: themeId,\n      name: 'None',\n      description: 'No theme',\n      theme: '',\n    }\n  }\n  return presets[themeId]\n})\n\nconst integrationThemes = INTEGRATION_THEME_IDS.map((themeId) => ({\n  slug: themeId,\n  name: themeLabels[themeId],\n  description: themeLabels[themeId],\n  theme: '',\n}))\n\nconst customThemeSlugs = computed(\n  () => new Set(customThemes.map((theme) => theme.slug)),\n)\n\nconst buttonStyles = cva({\n  base: 'w-full shadow-none text-c-1 justify-start pl-2 gap-2 border',\n  variants: {\n    active: {\n      true: 'bg-primary text-c-1 hover:bg-inherit',\n      false: 'bg-b-1 hover:bg-b-2',\n    },\n  },\n})\n\n/**\n * Determines if the \"None\" theme should be selected.\n * This happens when no theme is selected, or when the selected theme does not exist.\n */\nconst isNoneThemeSelected = computed(() => {\n  if (activeThemeSlug === undefined || activeThemeSlug === 'none') {\n    return true\n  }\n\n  const isValidTheme =\n    customThemeSlugs.value.has(activeThemeSlug) ||\n    defaultThemes.some((theme) => theme.slug === activeThemeSlug) ||\n    integrationThemes.some((theme) => theme.slug === activeThemeSlug)\n\n  return !isValidTheme\n})\n\nconst isNoneTheme = (themeId: string): boolean => themeId === 'none'\n\nconst isThemeActive = (themeSlug: string): boolean => {\n  return (\n    activeThemeSlug === themeSlug ||\n    (isNoneTheme(themeSlug) && isNoneThemeSelected.value)\n  )\n}\n\nconst checkmarkClasses = (isActive: boolean) =>\n  cx(\n    'flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1',\n    isActive && 'bg-c-accent text-b-1 border-transparent',\n  )\n</script>\n<template>\n  <div class=\"flex flex-col gap-10\">\n    <!-- Proxy -->\n    <Section>\n      <template #title>CORS Proxy</template>\n      <template #description>\n        Browsers block cross-origin requests for security. We provide a public\n        proxy to\n        <a\n          class=\"hover:text-c-1 underline underline-offset-2\"\n          href=\"https://en.wikipedia.org/wiki/Cross-origin_resource_sharing\"\n          target=\"_blank\"\n          >bypass CORS issues</a\n        >\n        . Check the\n        <a\n          class=\"hover:text-c-1 underline underline-offset-2\"\n          href=\"https://github.com/scalar/scalar/tree/main/projects/proxy-scalar-com\"\n          target=\"_blank\"\n          >source code on GitHub</a\n        >\n        .\n      </template>\n\n      <div class=\"flex flex-col gap-2\">\n        <ScalarButton\n          :class=\"\n            cx(\n              buttonStyles({\n                active: activeProxyUrl === DEFAULT_PROXY_URL,\n              }),\n            )\n          \"\n          @click=\"emit('update:proxyUrl', DEFAULT_PROXY_URL)\">\n          <div :class=\"checkmarkClasses(activeProxyUrl === DEFAULT_PROXY_URL)\">\n            <ScalarIcon\n              v-if=\"activeProxyUrl === DEFAULT_PROXY_URL\"\n              icon=\"Checkmark\"\n              size=\"xs\"\n              thickness=\"3.5\" />\n          </div>\n          Use proxy.scalar.com (default)\n        </ScalarButton>\n\n        <ScalarButton\n          :class=\"cx(buttonStyles({ active: !activeProxyUrl }))\"\n          @click=\"emit('update:proxyUrl', null)\">\n          <div :class=\"checkmarkClasses(!activeProxyUrl)\">\n            <ScalarIcon\n              v-if=\"!activeProxyUrl\"\n              icon=\"Checkmark\"\n              size=\"xs\"\n              thickness=\"3.5\" />\n          </div>\n          Skip the proxy\n        </ScalarButton>\n      </div>\n    </Section>\n\n    <!-- Themes -->\n    <Section>\n      <template #title>Themes</template>\n      <template #description>\n        We've got a whole rainbow of themes for you to play with:\n      </template>\n\n      <div class=\"grid grid-cols-2 gap-2\">\n        <ScalarButton\n          v-for=\"theme in defaultThemes\"\n          :key=\"theme.slug\"\n          :class=\"cx(buttonStyles({ active: isThemeActive(theme.slug) }))\"\n          @click=\"\n            emit(\n              'update:themeSlug',\n              isNoneTheme(theme.slug) ? undefined : theme.slug,\n            )\n          \">\n          <div class=\"flex items-center gap-2\">\n            <div :class=\"checkmarkClasses(isThemeActive(theme.slug))\">\n              <ScalarIcon\n                v-if=\"isThemeActive(theme.slug)\"\n                icon=\"Checkmark\"\n                size=\"xs\"\n                thickness=\"3.5\" />\n            </div>\n            {{ theme.name }}\n          </div>\n          <div class=\"flex items-center gap-1\">\n            <span\n              class=\"border-c-3 -mr-3 inline-block h-5 w-5 rounded-full\"\n              :style=\"{\n                backgroundColor: getThemeColors(theme.slug).light,\n              }\" />\n            <span\n              class=\"border-c-3 -mr-3 inline-block h-5 w-5 rounded-full\"\n              :style=\"{\n                backgroundColor: getThemeColors(theme.slug).dark,\n              }\" />\n            <span\n              class=\"border-c-3 inline-block h-5 w-5 rounded-full\"\n              :style=\"{\n                backgroundColor: getThemeColors(theme.slug).accent,\n              }\" />\n          </div>\n        </ScalarButton>\n      </div>\n    </Section>\n\n    <!-- Frameworks -->\n    <Section>\n      <template #title>Framework Themes</template>\n      <template #description>\n        Are you a real fan? Show your support by using your favorite framework's\n        theme!\n      </template>\n\n      <div class=\"grid grid-cols-2 gap-2\">\n        <ScalarButton\n          v-for=\"theme in integrationThemes\"\n          :key=\"theme.slug\"\n          :class=\"cx(buttonStyles({ active: activeThemeSlug === theme.slug }))\"\n          @click=\"emit('update:themeSlug', theme.slug)\">\n          <div class=\"flex items-center gap-2\">\n            <div :class=\"checkmarkClasses(activeThemeSlug === theme.slug)\">\n              <ScalarIcon\n                v-if=\"activeThemeSlug === theme.slug\"\n                icon=\"Checkmark\"\n                size=\"xs\"\n                thickness=\"3.5\" />\n            </div>\n            {{ theme.name }}\n          </div>\n          <div class=\"flex items-center gap-1\">\n            <div class=\"size-7 rounded-xl\">\n              <IntegrationLogo :integration=\"theme.slug\" />\n            </div>\n          </div>\n        </ScalarButton>\n      </div>\n    </Section>\n\n    <!-- Custom Themes -->\n    <Section v-if=\"customThemes.length > 0\">\n      <template #title> Custom Themes </template>\n      <template #description>\n        Team defined themes are available to all workspaces in the team.\n      </template>\n\n      <div class=\"grid grid-cols-2 gap-2\">\n        <ScalarButton\n          v-for=\"theme in customThemes\"\n          :key=\"theme.slug\"\n          :class=\"cx(buttonStyles({ active: activeThemeSlug === theme.slug }))\"\n          @click=\"emit('update:themeSlug', theme.slug)\">\n          <div class=\"flex items-center gap-2\">\n            <div :class=\"checkmarkClasses(activeThemeSlug === theme.slug)\">\n              <ScalarIcon\n                v-if=\"activeThemeSlug === theme.slug\"\n                icon=\"Checkmark\"\n                size=\"xs\"\n                thickness=\"3.5\" />\n            </div>\n            {{ theme.name }}\n          </div>\n        </ScalarButton>\n      </div>\n    </Section>\n\n    <!-- Appearance -->\n    <Section>\n      <template #title>Appearance</template>\n      <template #description>\n        Choose between light, dark, or system-based appearance for your\n        workspace.\n      </template>\n\n      <Appearance\n        :colorMode=\"colorMode\"\n        @update:colorMode=\"(value) => emit('update:colorMode', value)\" />\n    </Section>\n\n    <!-- Telemetry -->\n    <Section>\n      <template #title>Telemetry</template>\n      <template #description>\n        Help us improve Scalar by sending usage data.\n      </template>\n\n      <ScalarToggleInput\n        :modelValue=\"telemetry\"\n        @update:modelValue=\"\n          (value) => emit('update:telemetry', value ?? false)\n        \">\n        Enable telemetry\n      </ScalarToggleInput>\n    </Section>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/v2/features/settings/DocumentSettings.vue.js

@@ -0,0 +1,7 @@
+import DocumentSettings_vue_vue_type_script_setup_true_lang_default from "./DocumentSettings.vue.script.js";
+//#region src/v2/features/settings/DocumentSettings.vue
+var DocumentSettings_default = DocumentSettings_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { DocumentSettings_default as default };
+
+//# sourceMappingURL=DocumentSettings.vue.js.map

package/dist/v2/features/settings/DocumentSettings.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentSettings.vue.js","names":[],"sources":["../../../../src/v2/features/settings/DocumentSettings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarIcon,\n  ScalarModal,\n  ScalarToggle,\n  useModal,\n} from '@scalar/components'\n\nimport DeleteSidebarListElement from '@/components/Sidebar/Actions/DeleteSidebarListElement.vue'\n\nimport Section from './components/Section.vue'\n\nconst {\n  documentUrl,\n  watchMode,\n  title,\n  isDraftDocument = false,\n} = defineProps<{\n  /** Document source url if available */\n  documentUrl?: string\n  /** Watch mode status if also document url is provided */\n  watchMode?: boolean\n  /** Document title */\n  title: string\n  /** Whether the document is a draft document */\n  isDraftDocument?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Delete current document */\n  (e: 'delete:document'): void\n  /** Update watch mode status */\n  (e: 'update:watchMode', value: boolean): void\n}>()\n\nconst deleteModal = useModal()\n\n/**\n * Handles the delete button click.\n * Prevents opening the modal if the document is a draft.\n */\nconst handleDeleteClick = () => {\n  if (isDraftDocument) {\n    return\n  }\n  deleteModal.show()\n}\n\nconst handleDocumentDelete = () => {\n  emit('delete:document')\n  deleteModal.hide()\n}\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-12\">\n    <Section>\n      <template #title>Features</template>\n      <!-- Watch Mode -->\n      <div class=\"bg-b-2 rounded-lg border text-sm\">\n        <div\n          class=\"bg-b-1 flex items-center justify-between gap-4 rounded-t-lg p-3\">\n          <div>\n            <h4>Watch Mode</h4>\n            <p class=\"text-c-2 mt-1\">\n              When enabled, the OpenAPI document will be polled for changes. The\n              collection will be updated automatically.\n            </p>\n          </div>\n          <ScalarToggle\n            class=\"w-4\"\n            :disabled=\"!documentUrl\"\n            :modelValue=\"watchMode ?? false\"\n            @update:modelValue=\"(value) => emit('update:watchMode', value)\" />\n        </div>\n        <div\n          class=\"text-c-1 flex items-center overflow-x-auto border-t py-1.5 whitespace-nowrap\">\n          <div class=\"flex items-center\">\n            <template v-if=\"documentUrl\">\n              <span class=\"bg-b-2 sticky left-0 pr-2 pl-3\">Source</span>\n              <a\n                class=\"text-c-2 group rounded pr-3 no-underline hover:underline\"\n                :href=\"documentUrl\"\n                target=\"_blank\">\n                {{ documentUrl }}\n                <ScalarIcon\n                  class=\"ml-1 hidden w-2.5 group-hover:inline\"\n                  icon=\"ExternalLink\" />\n              </a>\n            </template>\n            <template v-else>\n              <ScalarIcon\n                class=\"text-c-2 mr-2 ml-3 w-4\"\n                icon=\"NotAllowed\"\n                size=\"sm\" />\n              <span class=\"text-c-2 pr-3\">\n                No URL configured. Try importing an OpenAPI document from an\n                URL.\n              </span>\n            </template>\n          </div>\n        </div>\n      </div>\n    </Section>\n\n    <!-- Danger Zone -->\n    <Section>\n      <template #title>Danger Zone</template>\n      <div\n        class=\"flex items-center justify-between rounded-lg border p-3 text-sm\">\n        <div>\n          <h4>Delete Collection</h4>\n          <p class=\"text-c-2 mt-1\">\n            Be careful, my friend. Once deleted, there is no way to recover the\n            collection.\n          </p>\n        </div>\n        <!-- user can not delete draft documents -->\n        <ScalarButton\n          :disabled=\"isDraftDocument\"\n          size=\"sm\"\n          variant=\"danger\"\n          @click=\"handleDeleteClick\">\n          Delete Collection\n        </ScalarButton>\n      </div>\n    </Section>\n  </div>\n  <!-- Delete Modal -->\n  <ScalarModal\n    :size=\"'xxs'\"\n    :state=\"deleteModal\"\n    :title=\"`Delete ${title}`\">\n    <DeleteSidebarListElement\n      :variableName=\"title ?? ''\"\n      warningMessage=\"This action cannot be undone.\"\n      @close=\"deleteModal.hide()\"\n      @delete=\"handleDocumentDelete\" />\n  </ScalarModal>\n</template>\n"],"mappings":""}

package/dist/v2/features/settings/DocumentSettings.vue.script.js

@@ -0,0 +1,92 @@
+import DeleteSidebarListElement_default from "../../../components/Sidebar/Actions/DeleteSidebarListElement.vue.js";
+import Section_default from "./components/Section.vue.js";
+import { Fragment, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { ScalarButton, ScalarIcon, ScalarModal, ScalarToggle, useModal } from "@scalar/components";
+//#region src/v2/features/settings/DocumentSettings.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-col gap-12" };
+var _hoisted_2 = { class: "bg-b-2 rounded-lg border text-sm" };
+var _hoisted_3 = { class: "bg-b-1 flex items-center justify-between gap-4 rounded-t-lg p-3" };
+var _hoisted_4 = { class: "text-c-1 flex items-center overflow-x-auto border-t py-1.5 whitespace-nowrap" };
+var _hoisted_5 = { class: "flex items-center" };
+var _hoisted_6 = ["href"];
+var _hoisted_7 = { class: "flex items-center justify-between rounded-lg border p-3 text-sm" };
+var DocumentSettings_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "DocumentSettings",
+	props: {
+		documentUrl: {},
+		watchMode: { type: Boolean },
+		title: {},
+		isDraftDocument: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["delete:document", "update:watchMode"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const deleteModal = useModal();
+		/**
+		* Handles the delete button click.
+		* Prevents opening the modal if the document is a draft.
+		*/
+		const handleDeleteClick = () => {
+			if (__props.isDraftDocument) return;
+			deleteModal.show();
+		};
+		const handleDocumentDelete = () => {
+			emit("delete:document");
+			deleteModal.hide();
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", _hoisted_1, [createVNode(Section_default, null, {
+				title: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("Features", -1)])]),
+				default: withCtx(() => [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [_cache[3] || (_cache[3] = createElementVNode("div", null, [createElementVNode("h4", null, "Watch Mode"), createElementVNode("p", { class: "text-c-2 mt-1" }, " When enabled, the OpenAPI document will be polled for changes. The collection will be updated automatically. ")], -1)), createVNode(unref(ScalarToggle), {
+					class: "w-4",
+					disabled: !__props.documentUrl,
+					modelValue: __props.watchMode ?? false,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => emit("update:watchMode", value))
+				}, null, 8, ["disabled", "modelValue"])]), createElementVNode("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [__props.documentUrl ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[4] || (_cache[4] = createElementVNode("span", { class: "bg-b-2 sticky left-0 pr-2 pl-3" }, "Source", -1)), createElementVNode("a", {
+					class: "text-c-2 group rounded pr-3 no-underline hover:underline",
+					href: __props.documentUrl,
+					target: "_blank"
+				}, [createTextVNode(toDisplayString(__props.documentUrl) + " ", 1), createVNode(unref(ScalarIcon), {
+					class: "ml-1 hidden w-2.5 group-hover:inline",
+					icon: "ExternalLink"
+				})], 8, _hoisted_6)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createVNode(unref(ScalarIcon), {
+					class: "text-c-2 mr-2 ml-3 w-4",
+					icon: "NotAllowed",
+					size: "sm"
+				}), _cache[5] || (_cache[5] = createElementVNode("span", { class: "text-c-2 pr-3" }, " No URL configured. Try importing an OpenAPI document from an URL. ", -1))], 64))])])])]),
+				_: 1
+			}), createVNode(Section_default, null, {
+				title: withCtx(() => [..._cache[6] || (_cache[6] = [createTextVNode("Danger Zone", -1)])]),
+				default: withCtx(() => [createElementVNode("div", _hoisted_7, [_cache[8] || (_cache[8] = createElementVNode("div", null, [createElementVNode("h4", null, "Delete Collection"), createElementVNode("p", { class: "text-c-2 mt-1" }, " Be careful, my friend. Once deleted, there is no way to recover the collection. ")], -1)), createVNode(unref(ScalarButton), {
+					disabled: __props.isDraftDocument,
+					size: "sm",
+					variant: "danger",
+					onClick: handleDeleteClick
+				}, {
+					default: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode(" Delete Collection ", -1)])]),
+					_: 1
+				}, 8, ["disabled"])])]),
+				_: 1
+			})]), createVNode(unref(ScalarModal), {
+				size: "xxs",
+				state: unref(deleteModal),
+				title: `Delete ${__props.title}`
+			}, {
+				default: withCtx(() => [createVNode(DeleteSidebarListElement_default, {
+					variableName: __props.title ?? "",
+					warningMessage: "This action cannot be undone.",
+					onClose: _cache[1] || (_cache[1] = ($event) => unref(deleteModal).hide()),
+					onDelete: handleDocumentDelete
+				}, null, 8, ["variableName"])]),
+				_: 1
+			}, 8, ["state", "title"])], 64);
+		};
+	}
+});
+//#endregion
+export { DocumentSettings_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DocumentSettings.vue.script.js.map

package/dist/v2/features/settings/DocumentSettings.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentSettings.vue.script.js","names":[],"sources":["../../../../src/v2/features/settings/DocumentSettings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  ScalarButton,\n  ScalarIcon,\n  ScalarModal,\n  ScalarToggle,\n  useModal,\n} from '@scalar/components'\n\nimport DeleteSidebarListElement from '@/components/Sidebar/Actions/DeleteSidebarListElement.vue'\n\nimport Section from './components/Section.vue'\n\nconst {\n  documentUrl,\n  watchMode,\n  title,\n  isDraftDocument = false,\n} = defineProps<{\n  /** Document source url if available */\n  documentUrl?: string\n  /** Watch mode status if also document url is provided */\n  watchMode?: boolean\n  /** Document title */\n  title: string\n  /** Whether the document is a draft document */\n  isDraftDocument?: boolean\n}>()\n\nconst emit = defineEmits<{\n  /** Delete current document */\n  (e: 'delete:document'): void\n  /** Update watch mode status */\n  (e: 'update:watchMode', value: boolean): void\n}>()\n\nconst deleteModal = useModal()\n\n/**\n * Handles the delete button click.\n * Prevents opening the modal if the document is a draft.\n */\nconst handleDeleteClick = () => {\n  if (isDraftDocument) {\n    return\n  }\n  deleteModal.show()\n}\n\nconst handleDocumentDelete = () => {\n  emit('delete:document')\n  deleteModal.hide()\n}\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-12\">\n    <Section>\n      <template #title>Features</template>\n      <!-- Watch Mode -->\n      <div class=\"bg-b-2 rounded-lg border text-sm\">\n        <div\n          class=\"bg-b-1 flex items-center justify-between gap-4 rounded-t-lg p-3\">\n          <div>\n            <h4>Watch Mode</h4>\n            <p class=\"text-c-2 mt-1\">\n              When enabled, the OpenAPI document will be polled for changes. The\n              collection will be updated automatically.\n            </p>\n          </div>\n          <ScalarToggle\n            class=\"w-4\"\n            :disabled=\"!documentUrl\"\n            :modelValue=\"watchMode ?? false\"\n            @update:modelValue=\"(value) => emit('update:watchMode', value)\" />\n        </div>\n        <div\n          class=\"text-c-1 flex items-center overflow-x-auto border-t py-1.5 whitespace-nowrap\">\n          <div class=\"flex items-center\">\n            <template v-if=\"documentUrl\">\n              <span class=\"bg-b-2 sticky left-0 pr-2 pl-3\">Source</span>\n              <a\n                class=\"text-c-2 group rounded pr-3 no-underline hover:underline\"\n                :href=\"documentUrl\"\n                target=\"_blank\">\n                {{ documentUrl }}\n                <ScalarIcon\n                  class=\"ml-1 hidden w-2.5 group-hover:inline\"\n                  icon=\"ExternalLink\" />\n              </a>\n            </template>\n            <template v-else>\n              <ScalarIcon\n                class=\"text-c-2 mr-2 ml-3 w-4\"\n                icon=\"NotAllowed\"\n                size=\"sm\" />\n              <span class=\"text-c-2 pr-3\">\n                No URL configured. Try importing an OpenAPI document from an\n                URL.\n              </span>\n            </template>\n          </div>\n        </div>\n      </div>\n    </Section>\n\n    <!-- Danger Zone -->\n    <Section>\n      <template #title>Danger Zone</template>\n      <div\n        class=\"flex items-center justify-between rounded-lg border p-3 text-sm\">\n        <div>\n          <h4>Delete Collection</h4>\n          <p class=\"text-c-2 mt-1\">\n            Be careful, my friend. Once deleted, there is no way to recover the\n            collection.\n          </p>\n        </div>\n        <!-- user can not delete draft documents -->\n        <ScalarButton\n          :disabled=\"isDraftDocument\"\n          size=\"sm\"\n          variant=\"danger\"\n          @click=\"handleDeleteClick\">\n          Delete Collection\n        </ScalarButton>\n      </div>\n    </Section>\n  </div>\n  <!-- Delete Modal -->\n  <ScalarModal\n    :size=\"'xxs'\"\n    :state=\"deleteModal\"\n    :title=\"`Delete ${title}`\">\n    <DeleteSidebarListElement\n      :variableName=\"title ?? ''\"\n      warningMessage=\"This action cannot be undone.\"\n      @close=\"deleteModal.hide()\"\n      @delete=\"handleDocumentDelete\" />\n  </ScalarModal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,OAAO;EAOb,MAAM,cAAc,UAAS;;;;;EAM7B,MAAM,0BAA0B;AAC9B,OAAI,QAAA,gBACF;AAEF,eAAY,MAAK;;EAGnB,MAAM,6BAA6B;AACjC,QAAK,kBAAiB;AACtB,eAAY,MAAK;;;2DAKjB,mBAwEM,OAxEN,YAwEM,CAvEJ,YA+CU,iBAAA,MAAA;IA9CG,OAAK,cAAS,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAR,YAAQ,GAAA,CAAA,EAAA,CAAA;2BA6CnB,CA3CN,mBA2CM,OA3CN,YA2CM,CA1CJ,mBAcM,OAdN,YAcM,CAAA,OAAA,OAAA,OAAA,KAZJ,mBAMM,OAAA,MAAA,CALJ,mBAAmB,MAAA,MAAf,aAAU,EACd,mBAGI,KAAA,EAHD,OAAM,iBAAe,EAAC,iHAGzB,CAAA,EAAA,GAAA,GAEF,YAIoE,MAAA,aAAA,EAAA;KAHlE,OAAM;KACL,UAAQ,CAAG,QAAA;KACX,YAAY,QAAA,aAAS;KACrB,uBAAiB,OAAA,OAAA,OAAA,MAAG,UAAU,KAAI,oBAAqB,MAAK;+CAEjE,mBA0BM,OA1BN,YA0BM,CAxBJ,mBAuBM,OAvBN,YAuBM,CAtBY,QAAA,eAAA,WAAA,EAAhB,mBAWW,UAAA,EAAA,KAAA,GAAA,EAAA,CAAA,OAAA,OAAA,OAAA,KAVT,mBAA0D,QAAA,EAApD,OAAM,kCAAgC,EAAC,UAAM,GAAA,GACnD,mBAQI,KAAA;KAPF,OAAM;KACL,MAAM,QAAA;KACP,QAAO;wCACJ,QAAA,YAAW,GAAG,KACjB,EAAA,EAAA,YAEwB,MAAA,WAAA,EAAA;KADtB,OAAM;KACN,MAAK;+CAGX,mBASW,UAAA,EAAA,KAAA,GAAA,EAAA,CART,YAGc,MAAA,WAAA,EAAA;KAFZ,OAAM;KACN,MAAK;KACL,MAAK;kCACP,mBAGO,QAAA,EAHD,OAAM,iBAAe,EAAC,uEAG5B,GAAA,EAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;OAQV,YAoBU,iBAAA,MAAA;IAnBG,OAAK,cAAY,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAAX,eAAW,GAAA,CAAA,EAAA,CAAA;2BAkBtB,CAjBN,mBAiBM,OAjBN,YAiBM,CAAA,OAAA,OAAA,OAAA,KAfJ,mBAMM,OAAA,MAAA,CALJ,mBAA0B,MAAA,MAAtB,oBAAiB,EACrB,mBAGI,KAAA,EAHD,OAAM,iBAAe,EAAC,oFAGzB,CAAA,EAAA,GAAA,GAGF,YAMe,MAAA,aAAA,EAAA;KALZ,UAAU,QAAA;KACX,MAAK;KACL,SAAQ;KACP,SAAO;;4BAEV,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAAA,gBAF6B,uBAE7B,GAAA,CAAA,EAAA,CAAA;;;;SAKN,YASc,MAAA,YAAA,EAAA;IARX,MAAM;IACN,OAAO,MAAA,YAAW;IAClB,OAAK,UAAY,QAAA;;2BAKiB,CAJnC,YAImC,kCAAA;KAHhC,cAAc,QAAA,SAAK;KACpB,gBAAe;KACd,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,YAAW,CAAC,MAAI;KACvB,UAAQ"}

package/dist/v2/features/settings/components/Appearance.vue.js

@@ -0,0 +1,7 @@
+import Appearance_vue_vue_type_script_setup_true_lang_default from "./Appearance.vue.script.js";
+//#region src/v2/features/settings/components/Appearance.vue
+var Appearance_default = Appearance_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Appearance_default as default };
+
+//# sourceMappingURL=Appearance.vue.js.map

package/dist/v2/features/settings/components/Appearance.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Appearance.vue.js","names":[],"sources":["../../../../../src/v2/features/settings/components/Appearance.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { cva, cx, ScalarButton, ScalarIcon } from '@scalar/components'\n\ndefineProps<{\n  colorMode: 'system' | 'light' | 'dark'\n}>()\n\nconst emit = defineEmits<{\n  (e: 'update:colorMode', value: 'system' | 'light' | 'dark'): void\n}>()\n\nconst buttonStyles = cva({\n  base: 'w-full shadow-none text-c-1 justify-start pl-2 gap-2 border',\n  variants: {\n    active: {\n      true: 'bg-primary text-c-1 hover:bg-inherit',\n      false: 'bg-b-1 hover:bg-b-2',\n    },\n  },\n})\n</script>\n<template>\n  <div class=\"flex flex-col gap-2\">\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'system' }))\"\n      @click=\"emit('update:colorMode', 'system')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'system',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'system'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      System Preference (default)\n    </ScalarButton>\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'light' }))\"\n      @click=\"emit('update:colorMode', 'light')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'light',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'light'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      Light Mode Always\n    </ScalarButton>\n    <ScalarButton\n      :class=\"cx(buttonStyles({ active: colorMode === 'dark' }))\"\n      @click=\"emit('update:colorMode', 'dark')\">\n      <div\n        class=\"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1\"\n        :class=\"{\n          'bg-c-accent text-b-1 border-transparent': colorMode === 'dark',\n        }\">\n        <ScalarIcon\n          v-if=\"colorMode === 'dark'\"\n          icon=\"Checkmark\"\n          size=\"xs\"\n          thickness=\"3.5\" />\n      </div>\n      Dark Mode Always\n    </ScalarButton>\n  </div>\n</template>\n"],"mappings":""}

package/dist/v2/features/settings/components/Appearance.vue.script.js

@@ -0,0 +1,63 @@
+import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, unref, withCtx } from "vue";
+import { ScalarButton, ScalarIcon, cva, cx } from "@scalar/components";
+//#region src/v2/features/settings/components/Appearance.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex flex-col gap-2" };
+var Appearance_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Appearance",
+	props: { colorMode: {} },
+	emits: ["update:colorMode"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const buttonStyles = cva({
+			base: "w-full shadow-none text-c-1 justify-start pl-2 gap-2 border",
+			variants: { active: {
+				true: "bg-primary text-c-1 hover:bg-inherit",
+				false: "bg-b-1 hover:bg-b-2"
+			} }
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createVNode(unref(ScalarButton), {
+					class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: __props.colorMode === "system" }))),
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("update:colorMode", "system"))
+				}, {
+					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", { "bg-c-accent text-b-1 border-transparent": __props.colorMode === "system" }]) }, [__props.colorMode === "system" ? (openBlock(), createBlock(unref(ScalarIcon), {
+						key: 0,
+						icon: "Checkmark",
+						size: "xs",
+						thickness: "3.5"
+					})) : createCommentVNode("", true)], 2), _cache[3] || (_cache[3] = createTextVNode(" System Preference (default) ", -1))]),
+					_: 1
+				}, 8, ["class"]),
+				createVNode(unref(ScalarButton), {
+					class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: __props.colorMode === "light" }))),
+					onClick: _cache[1] || (_cache[1] = ($event) => emit("update:colorMode", "light"))
+				}, {
+					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", { "bg-c-accent text-b-1 border-transparent": __props.colorMode === "light" }]) }, [__props.colorMode === "light" ? (openBlock(), createBlock(unref(ScalarIcon), {
+						key: 0,
+						icon: "Checkmark",
+						size: "xs",
+						thickness: "3.5"
+					})) : createCommentVNode("", true)], 2), _cache[4] || (_cache[4] = createTextVNode(" Light Mode Always ", -1))]),
+					_: 1
+				}, 8, ["class"]),
+				createVNode(unref(ScalarButton), {
+					class: normalizeClass(unref(cx)(unref(buttonStyles)({ active: __props.colorMode === "dark" }))),
+					onClick: _cache[2] || (_cache[2] = ($event) => emit("update:colorMode", "dark"))
+				}, {
+					default: withCtx(() => [createElementVNode("div", { class: normalizeClass(["flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] p-1", { "bg-c-accent text-b-1 border-transparent": __props.colorMode === "dark" }]) }, [__props.colorMode === "dark" ? (openBlock(), createBlock(unref(ScalarIcon), {
+						key: 0,
+						icon: "Checkmark",
+						size: "xs",
+						thickness: "3.5"
+					})) : createCommentVNode("", true)], 2), _cache[5] || (_cache[5] = createTextVNode(" Dark Mode Always ", -1))]),
+					_: 1
+				}, 8, ["class"])
+			]);
+		};
+	}
+});
+//#endregion
+export { Appearance_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Appearance.vue.script.js.map