vitepress 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/client/theme-default/components/VPSponsors.vue

@@ -1,37 +1,38 @@
-<script setup lang="ts">
-import type { GridSize } from '../composables/sponsor-grid'
-import type { Sponsor } from './VPSponsorsGrid.vue'
-import { computed } from 'vue'
-import VPSponsorsGrid from './VPSponsorsGrid.vue'
-
-export interface Sponsors {
-  tier?: string
-  size?: GridSize
-  items: Sponsor[]
-}
-interface Props {
-  mode?: 'normal' | 'aside'
-  tier?: string
-  size?: GridSize
-  data: Sponsors[] | Sponsor[]
-}
-const props = withDefaults(defineProps<Props>(), {
-  mode: 'normal'
-})
-
+<script setup>
+import { computed } from "vue";
+import VPSponsorsGrid from "./VPSponsorsGrid.vue";
+const props = defineProps({
+	mode: {
+		type: String,
+		required: false,
+		default: "normal"
+	},
+	tier: {
+		type: String,
+		required: false
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	data: {
+		type: Array,
+		required: true
+	}
+});
 const sponsors = computed(() => {
-  const isSponsors = props.data.some((s) => {
-    return 'items' in s
-  })
-
-  if (isSponsors) {
-    return props.data as Sponsors[]
-  }
-
-  return [
-    { tier: props.tier, size: props.size, items: props.data as Sponsor[] }
-  ]
-})
+	const isSponsors = props.data.some((s) => {
+		return "items" in s;
+	});
+	if (isSponsors) {
+		return props.data;
+	}
+	return [{
+		tier: props.tier,
+		size: props.size,
+		items: props.data
+	}];
+});
 </script>
 
 <template>

package/dist/client/theme-default/components/VPSponsorsGrid.d.vue.ts

@@ -0,0 +1,15 @@
+import type { GridSize } from '../composables/sponsor-grid.js';
+export interface Sponsor {
+    name: string;
+    img: string;
+    url: string;
+}
+interface Props {
+    size?: GridSize;
+    data: Sponsor[];
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: GridSize;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/client/theme-default/components/VPSponsorsGrid.vue

@@ -1,29 +1,27 @@
-<script setup lang="ts">
-import type { GridSize } from '../composables/sponsor-grid'
-import { ref } from 'vue'
-import { useSponsorsGrid } from '../composables/sponsor-grid'
-
-export interface Sponsor {
-  name: string
-  img: string
-  url: string
-}
-interface Props {
-  size?: GridSize
-  data: Sponsor[]
-}
-const props = withDefaults(defineProps<Props>(), {
-  size: 'medium'
-})
-
-const el = ref(null)
-
-useSponsorsGrid({ el, size: props.size })
+<script setup>
+import { useTemplateRef } from "vue";
+import { useSponsorsGrid } from "../composables/sponsor-grid";
+const props = defineProps({
+	size: {
+		type: String,
+		required: false,
+		default: "medium"
+	},
+	data: {
+		type: Array,
+		required: true
+	}
+});
+const el = useTemplateRef("el");
+useSponsorsGrid({
+	el,
+	size: props.size
+});
 </script>
 
 <template>
-  <div class="VPSponsorsGrid vp-sponsor-grid" :class="[size]" ref="el">
-    <div
+  <ul class="VPSponsorsGrid vp-sponsor-grid" :class="[size]" ref="el">
+    <li
       v-for="sponsor in data"
       :key="sponsor.name"
       class="vp-sponsor-grid-item"
@@ -35,7 +33,6 @@ useSponsorsGrid({ el, size: props.size })
         rel="sponsored noopener"
       >
         <article class="vp-sponsor-grid-box">
-          <h4 class="visually-hidden">{{ sponsor.name }}</h4>
           <img
             class="vp-sponsor-grid-image"
             :src="sponsor.img"
@@ -43,6 +40,6 @@ useSponsorsGrid({ el, size: props.size })
           />
         </article>
       </a>
-    </div>
-  </div>
+    </li>
+  </ul>
 </template>

package/dist/client/theme-default/components/VPSwitch.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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;
+    };
+};

package/dist/client/theme-default/components/VPSwitch.vue

@@ -11,10 +11,10 @@
 <style scoped>
 .VPSwitch {
   position: relative;
-  border-radius: 11px;
+  border-radius: 0.6875rem;
   display: block;
-  width: 40px;
-  height: 22px;
+  width: 2.5rem;
+  height: 1.375rem;
   flex-shrink: 0;
   border: 1px solid var(--vp-input-border-color);
   background-color: var(--vp-input-switch-bg-color);
@@ -28,10 +28,9 @@
 .check {
   position: absolute;
   top: 1px;
-  /*rtl:ignore*/
-  left: 1px;
-  width: 18px;
-  height: 18px;
+  inset-inline-start: 1px;
+  width: 1.125rem;
+  height: 1.125rem;
   border-radius: 50%;
   background-color: var(--vp-c-neutral-inverse);
   box-shadow: var(--vp-shadow-1);
@@ -41,18 +40,18 @@
 .icon {
   position: relative;
   display: block;
-  width: 18px;
-  height: 18px;
+  width: 1.125rem;
+  height: 1.125rem;
   border-radius: 50%;
   overflow: hidden;
 }
 
 .icon :deep([class^='vpi-']) {
   position: absolute;
-  top: 3px;
-  left: 3px;
-  width: 12px;
-  height: 12px;
+  top: 0.1875rem;
+  inset-inline-start: 0.1875rem;
+  width: 0.75rem;
+  height: 0.75rem;
   color: var(--vp-c-text-2);
 }
 

package/dist/client/theme-default/components/VPSwitchAppearance.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/client/theme-default/components/VPSwitchAppearance.vue

@@ -1,32 +1,28 @@
-<script lang="ts" setup>
-import { inject, ref, watchPostEffect } from 'vue'
-import { useData } from '../composables/data'
-import VPSwitch from './VPSwitch.vue'
-
-const { isDark, theme } = useData()
-
-const toggleAppearance = inject('toggle-appearance', () => {
-  isDark.value = !isDark.value
-})
-
-const switchTitle = ref('')
-
+<script setup>
+import { inject, ref, watchPostEffect } from "vue";
+import { useData } from "../composables/data";
+import VPSwitch from "./VPSwitch.vue";
+const { isDark, theme } = useData();
+const toggleAppearance = inject("toggle-appearance", () => {
+	isDark.value = !isDark.value;
+});
+const switchTitle = ref("");
 watchPostEffect(() => {
-  switchTitle.value = isDark.value
-    ? theme.value.lightModeSwitchTitle || 'Switch to light theme'
-    : theme.value.darkModeSwitchTitle || 'Switch to dark theme'
-})
+	switchTitle.value = isDark.value ? theme.value.lightModeSwitchTitle || "Switch to light theme" : theme.value.darkModeSwitchTitle || "Switch to dark theme";
+});
 </script>
 
 <template>
+  <!-- stable name + aria-checked state; the title stays the action hint -->
   <VPSwitch
     :title="switchTitle"
     class="VPSwitchAppearance"
+    :aria-label="theme.darkModeSwitchLabel || 'Appearance'"
     :aria-checked="isDark"
     @click="toggleAppearance"
   >
-    <span class="vpi-sun sun" />
-    <span class="vpi-moon moon" />
+    <span class="vpi-sun sun" aria-hidden="true" />
+    <span class="vpi-moon moon" aria-hidden="true" />
   </VPSwitch>
 </template>
 
@@ -48,7 +44,6 @@ watchPostEffect(() => {
 }
 
 .dark .VPSwitchAppearance :deep(.check) {
-  /*rtl:ignore*/
-  transform: translateX(18px);
+  transform: translateX(calc(1.125rem * var(--vp-direction-multiplier)));
 }
 </style>

package/dist/client/theme-default/components/VPTeamMembers.d.vue.ts

@@ -0,0 +1,10 @@
+import type { DefaultTheme } from 'vitepress/theme';
+interface Props {
+    size?: 'small' | 'medium';
+    members: DefaultTheme.TeamMember[];
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: "small" | "medium";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/client/theme-default/components/VPTeamMembers.vue

@@ -1,66 +1,93 @@
-<script setup lang="ts">
-import type { DefaultTheme } from 'vitepress/theme'
-import { computed } from 'vue'
-import VPTeamMembersItem from './VPTeamMembersItem.vue'
-
-interface Props {
-  size?: 'small' | 'medium'
-  members: DefaultTheme.TeamMember[]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 'medium'
-})
-
-const classes = computed(() => [props.size, `count-${props.members.length}`])
+<script setup>
+import VPTeamMembersItem from "./VPTeamMembersItem.vue";
+const props = defineProps({
+	size: {
+		type: String,
+		required: false,
+		default: "medium"
+	},
+	members: {
+		type: Array,
+		required: true
+	}
+});
 </script>
 
 <template>
-  <div class="VPTeamMembers" :class="classes">
-    <div class="container">
-      <div v-for="member in members" :key="member.name" class="item">
-        <VPTeamMembersItem :size="size" :member="member" />
-      </div>
-    </div>
+  <div class="VPTeamMembers" :class="[size, `count-${members.length}`]">
+    <ul class="container">
+      <li v-for="member in members" :key="member.name" class="item">
+        <VPTeamMembersItem :size :member />
+      </li>
+    </ul>
   </div>
 </template>
 
 <style scoped>
 .VPTeamMembers.small .container {
-  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
 }
 
 .VPTeamMembers.small.count-1 .container {
-  max-width: 276px;
+  max-width: 17.25rem;
 }
 .VPTeamMembers.small.count-2 .container {
-  max-width: calc(276px * 2 + 24px);
+  max-width: calc(17.25rem * 2 + 1.5rem);
 }
 .VPTeamMembers.small.count-3 .container {
-  max-width: calc(276px * 3 + 24px * 2);
+  max-width: calc(17.25rem * 3 + 1.5rem * 2);
 }
 
 .VPTeamMembers.medium .container {
-  grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
 }
 
-@media (min-width: 375px) {
+@media (min-width: 23.4375rem) {
   .VPTeamMembers.medium .container {
-    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
   }
 }
 
 .VPTeamMembers.medium.count-1 .container {
-  max-width: 368px;
+  max-width: 23rem;
 }
 .VPTeamMembers.medium.count-2 .container {
-  max-width: calc(368px * 2 + 24px);
+  max-width: calc(23rem * 2 + 1.5rem);
 }
 
 .container {
   display: grid;
-  gap: 24px;
+  gap: 1.5rem;
+  margin: 0 auto;
+  max-width: 72rem;
+}
+
+/* Reset styles from vp-doc if used in markdown */
+.vp-doc .VPTeamMembers .container {
+  list-style: none;
   margin: 0 auto;
-  max-width: 1152px;
+  padding: 0;
+}
+.vp-doc .VPTeamMembers .item {
+  margin: 0;
+  padding: 0;
+}
+.vp-doc .VPTeamMembers :deep(.org),
+.vp-doc .VPTeamMembers :deep(.sp-link) {
+  text-decoration: none;
+}
+
+/* Sizing for doc pages, where the content area is narrow (excludes home content) */
+.vp-doc:not(.VPHomeContent) .VPTeamMembers {
+  margin-top: 1.5rem;
+}
+.vp-doc:not(.VPHomeContent) .VPTeamMembers.small.count-1 .container,
+.vp-doc:not(.VPHomeContent) .VPTeamMembers.medium.count-1 .container {
+  margin: 0;
+  max-width: calc((100% - 1.5rem) / 2);
+}
+.vp-doc:not(.VPHomeContent) .VPTeamMembers.small.count-2 .container,
+.vp-doc:not(.VPHomeContent) .VPTeamMembers.small.count-3 .container {
+  max-width: 100%;
 }
 </style>

package/dist/client/theme-default/components/VPTeamMembersItem.d.vue.ts

@@ -0,0 +1,10 @@
+import type { DefaultTheme } from 'vitepress/theme';
+interface Props {
+    size?: 'small' | 'medium';
+    member: DefaultTheme.TeamMember;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: "small" | "medium";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;