docs: add Opt/React/Vue/Svelte components

Author: skryukov

docs/.vitepress/theme/components/Opt.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useTabsSelectedState } from '../composables/useTabsSelectedState'
+
+const props = defineProps<{
+  v: string
+}>()
+
+// Use the shared tabs state system
+const acceptValues = ref(['Vue', 'React', 'Svelte 4', 'Svelte 5'])
+const sharedStateKey = ref('frameworks')
+
+const { selected } = useTabsSelectedState(acceptValues, sharedStateKey)
+
+const shouldShow = computed(() => {
+  if (!selected.value) return false
+
+  // Handle multiple values separated by pipe (|)
+  const values = props.v.split('|').map((v) => v.trim())
+  return values.includes(selected.value)
+})
+</script>
+
+<template>
+  <span v-if="shouldShow" class="opt-text">
+    <slot></slot>
+  </span>
+</template>
+
+<style scoped>
+.opt-text {
+  display: inline;
+}
+</style>

docs/.vitepress/theme/components/React.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Opt from './Opt.vue'
+</script>
+
+<template>
+  <Opt v="React">
+    <slot></slot>
+  </Opt>
+</template>

docs/.vitepress/theme/components/Svelte.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Opt from './Opt.vue'
+</script>
+
+<template>
+  <Opt v="Svelte 4|Svelte 5">
+    <slot></slot>
+  </Opt>
+</template>

docs/.vitepress/theme/components/Svelte4.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Opt from './Opt.vue'
+</script>
+
+<template>
+  <Opt v="Svelte 4">
+    <slot></slot>
+  </Opt>
+</template>

docs/.vitepress/theme/components/Svelte5.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Opt from './Opt.vue'
+</script>
+
+<template>
+  <Opt v="Svelte 5">
+    <slot></slot>
+  </Opt>
+</template>

docs/.vitepress/theme/components/Vue.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Opt from './Opt.vue'
+</script>
+
+<template>
+  <Opt v="Vue">
+    <slot></slot>
+  </Opt>
+</template>

docs/.vitepress/theme/components/index.ts

@@ -1,3 +1,9 @@
 import AvailableSince from './AvailableSince.vue'
+import Opt from './Opt.vue'
+import React from './React.vue'
+import Svelte from './Svelte.vue'
+import Svelte4 from './Svelte4.vue'
+import Svelte5 from './Svelte5.vue'
+import Vue from './Vue.vue'
 
-export { AvailableSince }
+export { AvailableSince, Opt, React, Svelte, Svelte4, Svelte5, Vue }

docs/.vitepress/theme/composables/useTabsSelectedState.ts

@@ -0,0 +1,78 @@
+import type { InjectionKey, Ref } from 'vue'
+import { computed, inject, onMounted, ref } from 'vue'
+
+type TabsSharedState = {
+  content?: TabsSharedStateContent
+}
+type TabsSharedStateContent = Record<string, string>
+
+// Use the same injection key as the original vitepress-plugin-tabs
+const injectionKey: InjectionKey<TabsSharedState> =
+  'vitepress:tabSharedState' as unknown as symbol
+const ls = typeof localStorage !== 'undefined' ? localStorage : null
+const localStorageKey = 'vitepress:tabsSharedState'
+
+const getLocalStorageValue = (): TabsSharedStateContent => {
+  const rawValue = ls?.getItem(localStorageKey)
+  if (rawValue) {
+    try {
+      return JSON.parse(rawValue)
+    } catch {}
+  }
+  return {}
+}
+
+export const useTabsSelectedState = <T extends string>(
+  acceptValues: Ref<T[]>,
+  sharedStateKey: Ref<string | undefined>,
+) => {
+  const sharedState = inject(injectionKey)
+  if (!sharedState) {
+    throw new Error(
+      '[vitepress-plugin-tabs] TabsSharedState should be injected',
+    )
+  }
+
+  onMounted(() => {
+    if (!sharedState.content) {
+      sharedState.content = getLocalStorageValue()
+    }
+  })
+
+  const nonSharedState = ref<T | undefined>()
+
+  const selected = computed({
+    get() {
+      const key = sharedStateKey.value
+      const acceptVals = acceptValues.value
+      if (key) {
+        const value = sharedState.content?.[key]
+        if (value && (acceptVals as string[]).includes(value)) {
+          return value as T
+        }
+      } else {
+        const nonSharedStateVal = nonSharedState.value
+        if (nonSharedStateVal) {
+          return nonSharedStateVal
+        }
+      }
+      return acceptVals[0]
+    },
+    set(v) {
+      const key = sharedStateKey.value
+      if (key) {
+        if (sharedState.content) {
+          sharedState.content[key] = v
+        }
+      } else {
+        nonSharedState.value = v
+      }
+    },
+  })
+
+  const select = (newValue: T) => {
+    selected.value = newValue
+  }
+
+  return { selected, select }
+}

docs/.vitepress/theme/index.ts

@@ -3,7 +3,15 @@ import type { Theme } from 'vitepress'
 import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
 import DefaultTheme from 'vitepress/theme'
 import { h } from 'vue'
-import { AvailableSince } from './components'
+import {
+  AvailableSince,
+  Opt,
+  React,
+  Svelte,
+  Svelte4,
+  Svelte5,
+  Vue,
+} from './components'
 import { setupFrameworksTabs } from './frameworksTabs'
 import './style.css'
 
@@ -17,6 +25,12 @@ export default {
   enhanceApp({ app, router, siteData }) {
     enhanceAppWithTabs(app)
     app.component('AvailableSince', AvailableSince)
+    app.component('Opt', Opt)
+    app.component('React', React)
+    app.component('Vue', Vue)
+    app.component('Svelte', Svelte)
+    app.component('Svelte4', Svelte4)
+    app.component('Svelte5', Svelte5)
   },
   setup() {
     setupFrameworksTabs()