added expand menu for enum

integrations/nuxt/src/runtime/components/nuxt-theme.css

@@ -1,6 +1,5 @@
 @import "@scalar/api-client/style.css";
 @import "@scalar/api-reference/style.css";
-
 .light-mode {
   --scalar-background-1: #fff;
   --scalar-background-2: #f8fafc;

integrations/nuxt/src/runtime/plugins/hydrateClient.js

@@ -0,0 +1,13 @@
+import { defineNuxtPlugin } from '#app'
+import { useHead } from '#imports'
+export default defineNuxtPlugin((_nuxtApp) => {
+  _nuxtApp.hook('app:rendered', ({ ssrContext }) => {
+    useHead({
+      script: [
+        {
+          children: `window.__SCALAR__ = ${JSON.stringify(ssrContext?.payload?.data ?? {})}`,
+        },
+      ],
+    })
+  })
+})

package.json

@@ -58,7 +58,7 @@
     "clean:nuxt": "shx rm -rf \"**/.nuxt\"",
     "clean:dist": "shx rm -rf \"**/dist\"",
     "clean:turbo": "shx rm -rf \"**/.turbo\"",
-    "dev": "turbo dev --concurrency=100% --filter './examples/*' --filter './integrations/*' --filter=@scalar/nuxt --filter=@scalar/draggable --filter @scalar/components --filter @scalar/api-client --filter @scalar/nextjs-openapi",
+    "dev": "turbo dev --concurrency=20 --filter './examples/*' --filter './integrations/*' --filter=@scalar/nuxt --filter=@scalar/draggable --filter @scalar/components --filter @scalar/api-client --filter @scalar/nextjs-openapi",
     "dev:client": "turbo dev --filter @scalar/api-client",
     "dev:client:desktop": "turbo dev --filter scalar-app",
     "dev:client:app": "turbo playground:app --filter @scalar/api-client",

packages/api-reference/src/components/Content/Schema/SchemaProperty.vue

@@ -114,21 +114,7 @@ const generatePropertyDescription = (property?: Record<string, any>) => {
 const getEnumFromValue = (value?: Record<string, any>): any[] | [] =>
   value?.enum || value?.items?.enum || []
 
-// These helpers manage how enum values are displayed:
-//
-// - For enums with 9 or fewer values, all values are shown.
-// - For enums with more than 9 values, only first 5 are shown initially.
-// - A “Show more” button reveals the remaining values.
-const hasLongEnumList = computed(
-  () => getEnumFromValue(optimizedValue.value).length > 9,
-)
-const initialEnumCount = computed(() => (hasLongEnumList.value ? 5 : 9))
-const visibleEnumValues = computed(() =>
-  getEnumFromValue(optimizedValue.value).slice(0, initialEnumCount.value),
-)
-const remainingEnumValues = computed(() =>
-  getEnumFromValue(optimizedValue.value).slice(initialEnumCount.value),
-)
+// Enum values are now displayed using the same Disclosure pattern as object properties
 
 /** Simplified composition with `null` type. */
 const optimizedValue = computed(() => optimizeValueForDisplay(props.value))
@@ -313,58 +299,53 @@ const shouldShowEnumDescriptions = computed(() => {
     <div
       v-if="getEnumFromValue(optimizedValue)?.length > 0 && !isDiscriminator"
       class="property-enum">
-      <template v-if="shouldShowEnumDescriptions">
-        <div class="property-list">
-          <div
-            v-for="enumValue in getEnumFromValue(optimizedValue)"
-            :key="enumValue"
-            class="property">
-            <div class="property-heading">
-              <div class="property-name">
-                {{ enumValue }}
+      <Disclosure
+        v-slot="{ open }"
+        :defaultOpen="false">
+        <div class="schema-properties">
+          <DisclosureButton
+            class="schema-card-title"
+            :class="{ 'schema-card-title--compact': true }">
+            <ScalarIcon
+              class="schema-card-title-icon"
+              :class="{ 'schema-card-title-icon--open': open }"
+              icon="Add"
+              size="sm" />
+            <template v-if="open"> Hide Enum Values </template>
+            <template v-else> Show Enum Values </template>
+          </DisclosureButton>
+          <DisclosurePanel
+            as="ul"
+            :static="false">
+            <li
+              v-for="enumValue in getEnumFromValue(optimizedValue)"
+              :key="enumValue"
+              class="property property--level-1">
+              <SchemaPropertyHeading
+                :value="{
+                  ...optimizedValue,
+                  example: enumValue,
+                  description:
+                    optimizedValue?.['x-enumDescriptions']?.[enumValue],
+                }"
+                :schemas="schemas"
+                :hideModelNames="hideModelNames">
+                <template #name>
+                  {{ enumValue }}
+                </template>
+              </SchemaPropertyHeading>
+              <div
+                v-if="optimizedValue?.['x-enumDescriptions']?.[enumValue]"
+                class="property-description">
+                <ScalarMarkdown
+                  :value="
+                    optimizedValue?.['x-enumDescriptions']?.[enumValue]
+                  " />
               </div>
-            </div>
-            <div class="property-description">
-              <ScalarMarkdown
-                :value="optimizedValue?.['x-enumDescriptions']?.[enumValue]" />
-            </div>
-          </div>
+            </li>
+          </DisclosurePanel>
         </div>
-      </template>
-      <template v-else>
-        <ul class="property-enum-values">
-          <li
-            v-for="enumValue in visibleEnumValues"
-            :key="enumValue"
-            class="property-enum-value">
-            <span class="property-enum-value-label">
-              {{ enumValue }}
-            </span>
-          </li>
-          <Disclosure
-            v-if="hasLongEnumList"
-            v-slot="{ open }">
-            <DisclosurePanel>
-              <li
-                v-for="enumValue in remainingEnumValues"
-                :key="enumValue"
-                class="property-enum-value">
-                <span class="property-enum-value-label">
-                  {{ enumValue }}
-                </span>
-              </li>
-            </DisclosurePanel>
-            <DisclosureButton class="enum-toggle-button">
-              <ScalarIcon
-                class="enum-toggle-button-icon"
-                :class="{ 'enum-toggle-button-icon--open': open }"
-                icon="Add"
-                size="sm" />
-              {{ open ? 'Hide values' : 'Show all values' }}
-            </DisclosureButton>
-          </Disclosure>
-        </ul>
-      </template>
+      </Disclosure>
     </div>
     <!-- Object -->
     <div
@@ -602,9 +583,13 @@ const shouldShowEnumDescriptions = computed(() => {
   background: var(--scalar-background-1);
   border-top: var(--scalar-border-width) solid currentColor;
 }
-.property-enum-values {
+.property-enum-container {
   margin-top: 8px;
+}
+
+.property-enum-values {
   list-style: none;
+  margin: 0;
 }
 
 .property-example {
@@ -636,24 +621,4 @@ const shouldShowEnumDescriptions = computed(() => {
   font-family: var(--scalar-font-code);
   font-weight: var(--scalar-semibold);
 }
-.enum-toggle-button {
-  align-items: center;
-  border: var(--scalar-border-width) solid var(--scalar-border-color);
-  border-radius: 13.5px;
-  cursor: pointer;
-  color: var(--scalar-color-2);
-  display: flex;
-  font-weight: var(--scalar-semibold);
-  gap: 4px;
-  margin-top: 8px;
-  padding: 6px 10px;
-  user-select: none;
-  white-space: nowrap;
-}
-.enum-toggle-button:hover {
-  color: var(--scalar-color-1);
-}
-.enum-toggle-button-icon--open {
-  transform: rotate(45deg);
-}
 </style>

packages/galaxy/src/documents/3.1.yaml

@@ -718,6 +718,12 @@ components:
             - ice_giant
             - dwarf
             - super_earth
+          x-enumDescriptions:
+            terrestrial: A rocky planet similar to Earth or Mars.
+            gas_giant: A massive planet composed mainly of hydrogen and helium, like Jupiter or Saturn.
+            ice_giant: A planet with a large core and icy mantle, such as Uranus or Neptune.
+            dwarf: A small planetary body that orbits the sun but has not cleared its orbit of debris, e.g., Pluto.
+            super_earth: A terrestrial planet larger than Earth but smaller than ice giants.
           examples:
             - terrestrial
         habitabilityIndex:
@@ -860,6 +866,10 @@ components:
             - moon
             - asteroid
             - comet
+          x-enumDescriptions:
+            moon: A natural satellite orbiting a planet.
+            asteroid: A small rocky body orbiting the Sun, mostly in the asteroid belt.
+            comet: A small icy body that releases gas and dust, forming a visible coma or tail when near the Sun.
           examples:
             - moon
         orbit:

packages/workspace-store/package.json

@@ -25,12 +25,12 @@
     "dev": "vite-node ./src/index.ts",
     "format": "scalar-format",
     "format:check": "scalar-format-check",
+    "generate-json-schemas": "vite-node ./scripts/generate-json-schemas.ts",
     "lint:check": "eslint .",
     "lint:fix": "eslint .  --fix",
     "test": "vitest",
     "types:build": "scalar-types-build",
-    "types:check": "scalar-types-check",
-    "generate-json-schemas": "vite-node ./scripts/generate-json-schemas.ts"
+    "types:check": "scalar-types-check"
   },
   "type": "module",
   "exports": {