Merge remote-tracking branch 'origin/new-docs' into cf-pages

unovue · Jul 22, 2023 · e4b1ac5 · e4b1ac5
2 parents e1587f7 + e76faad
commit e4b1ac5
Show file tree

Hide file tree

Showing 25 changed files with 157 additions and 279 deletions.
diff --git a/docs/.vitepress/cache/deps/_metadata.json b/docs/.vitepress/cache/deps/_metadata.json
@@ -1,29 +1,29 @@
 {
-  "hash": "c9421c46",
-  "browserHash": "3caa4d75",
+  "hash": "fb9ec932",
+  "browserHash": "1aae1a08",
   "optimized": {
     "vue": {
       "src": "../../../node_modules/.pnpm/[email protected]/node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "39d19562",
+      "fileHash": "16afe6c6",
       "needsInterop": false
     },
     "vitepress > @vue/devtools-api": {
       "src": "../../../node_modules/.pnpm/@[email protected]/node_modules/@vue/devtools-api/lib/esm/index.js",
       "file": "vitepress___@vue_devtools-api.js",
-      "fileHash": "0b1f86b7",
+      "fileHash": "5302887d",
       "needsInterop": false
     },
     "@iconify/vue": {
       "src": "../../../node_modules/.pnpm/@[email protected][email protected]/node_modules/@iconify/vue/dist/iconify.mjs",
       "file": "@iconify_vue.js",
-      "fileHash": "f60d2935",
+      "fileHash": "52a1759b",
       "needsInterop": false
     },
     "radix-vue": {
       "src": "../../../node_modules/.pnpm/[email protected][email protected]/node_modules/radix-vue/dist/index.js",
       "file": "radix-vue.js",
-      "fileHash": "dcf06ad3",
+      "fileHash": "645c8d31",
       "needsInterop": false
     }
   },

diff --git a/docs/.vitepress/components/HomePage.vue b/docs/.vitepress/components/HomePage.vue
@@ -5,7 +5,7 @@ import Contributors from "./Contributors.vue";
 </script>
 
 <template>
-  <div class="content px-[64px]">
+  <div class="content px-6 sm:px-[48px] lg:px-[64px]">
     <div class="mx-auto w-full container max-w-[1152px]">
       <main class="w-full">
         <div class="vp-doc flex flex-col items-center mt-10">
@@ -17,7 +17,7 @@ import Contributors from "./Contributors.vue";
           <p class="text-lg max-w-200 text-center leading-7">
             <Contributors />
             <br />
-            <a href="https://chat.vitest.dev" rel="noopener noreferrer">Join the community</a> and get involved!
+            <a href="https://chat.radix-vue.com" rel="noopener noreferrer">Join the community</a> and get involved!
           </p>
         </div>
       </main>

diff --git a/docs/.vitepress/components/HomePageDemo.vue b/docs/.vitepress/components/HomePageDemo.vue
@@ -3,9 +3,9 @@ import Demos from "../../components/Demos.vue";
 </script>
 
 <template>
-  <div class="mt-24 content px-[64px]">
+  <div class="mt-12 md:mt-24 content px-6 sm:px-[48px] lg:px-[64px]">
     <div class="mx-auto w-full container max-w-[1152px]">
-      <Demos class="grid lg:grid-cols-2 gap-12 lg:gap-6" />
+      <Demos class="grid w-auto lg:grid-cols-2 gap-6 md:gap-12 lg:gap-6" />
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -48,10 +48,8 @@ export default defineConfig({
   lastUpdated: true,
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
-    nav: [
-      { text: "Home", link: "/" },
-      { text: "Demo", link: "/#demo" },
-    ],
+    nav: [{ text: "Home", link: "/" }],
+    logo: "/logo.svg",
 
     sidebar: sidebar(),
 

diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
@@ -43,10 +43,10 @@
 
 :root {
   --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #14b8a6 30%, #22c55e);
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #11b981 30%, #6ff4cc);
 
-  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
-  --vp-home-hero-image-filter: blur(40px);
+  --vp-home-hero-image-background-image: linear-gradient(180deg, #8600c5 0%, #00f0ff 100%);
+  --vp-home-hero-image-filter: blur(50px);
 }
 
 @media (min-width: 640px) {
@@ -121,3 +121,13 @@
 li > span {
   @apply text-[15px] md:text-base;
 }
+
+.image-bg {
+  @apply scale-75 !transform !-translate-x-1/2 !-translate-y-1/2;
+}
+
+.custom-justify-center:before,
+.custom-justify-center:after {
+  content: "";
+  flex: 1;
+}
diff --git a/docs/assets/css/tailwind.css b/docs/assets/css/tailwind.css
diff --git a/docs/components/DemoContainer.vue b/docs/components/DemoContainer.vue
@@ -6,16 +6,16 @@ defineProps<{
 </script>
 
 <template>
-  <div>
+  <div class="w-full" :class="{ 'overflow-x-auto': title === 'toolbar' }">
     <a
-      class="capitalize text-lg font-semibold mb-2 ml-2 inline-flex items-center group"
+      class="capitalize md:text-lg font-semibold mb-2 ml-2 inline-flex items-center group"
       :href="`/components/${title?.replace(' ', '-')}.html`"
       >{{ title }}
 
       <Icon icon="ic-round-arrow-forward" class="ml-2 group-focus:ml-3 group-hover:ml-3 transition-[margin]"></Icon>
     </a>
     <div
-      class="p-10 min-h-[256px] lg:h-[400px] bg-gradient-to-br rounded-xl from-teal9 to-green9 w-full relative items-center justify-center flex"
+      class="custom-justify-center p-4 md:p-10 min-h-[256px] lg:h-[400px] bg-gradient-to-br rounded-xl from-teal9 to-green9 w-full relative items-center flex overflow-x-auto"
     >
       <slot />
     </div>

diff --git a/docs/components/HeroContainer.vue b/docs/components/HeroContainer.vue
@@ -1,7 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  overflow?: boolean;
+}>();
+</script>
+
 <template>
   <div class="relative text-[15px] text-black">
-    <div class="bg-gradient-to-br rounded-t-lg from-teal9 to-green9 w-full relative items-center justify-center flex">
-      <div class="w-full max-w-[700px] flex flex-col items-center justify-center py-[100px]">
+    <div
+      class="bg-gradient-to-br p-4 rounded-t-lg from-teal9 to-green9 w-full relative items-center justify-center flex"
+      :class="{ 'overflow-x-auto': overflow }"
+    >
+      <div class="w-full max-w-[700px] flex items-center py-12 sm:py-[100px] custom-justify-center z-10">
         <slot />
       </div>
     </div>
@@ -18,7 +27,8 @@
   margin-top: 0 !important;
 }
 
-:deep(button:focus), :deep(button:focus-visible) {
+:deep(button:focus),
+:deep(button:focus-visible) {
   outline: 0;
 }
 

diff --git a/docs/components/demo/Accordion/index.vue b/docs/components/demo/Accordion/index.vue
@@ -1,57 +1,49 @@
 <script setup lang="ts">
-import {
-  AccordionRoot,
-  AccordionItem,
-  AccordionHeader,
-  AccordionTrigger,
-  AccordionContent,
-} from "radix-vue";
+import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent } from "radix-vue";
 import { Icon } from "@iconify/vue";
 
 const accordionItems = [
   {
     value: "item-1",
     title: "Is it accessible?",
-    content: "Yes. It adheres to the WAI-ARIA design pattern."
+    content: "Yes. It adheres to the WAI-ARIA design pattern.",
   },
   {
     value: "item-2",
     title: "Is it unstyled?",
-    content: "Yes. It's unstyled by default, giving you freedom over the look and feel."
+    content: "Yes. It's unstyled by default, giving you freedom over the look and feel.",
   },
   {
     value: "item-3",
     title: "Can it be animated?",
-    content: "Yes! You can use the transition prop to configure the animation."
-  }
-]
+    content: "Yes! You can use the transition prop to configure the animation.",
+  },
+];
 </script>
 
 <template>
   <AccordionRoot
-    class="bg-mauve6 w-[300px] rounded-md shadow-[0_2px_10px] shadow-black/5"
+    class="bg-mauve6 sm:w-[300px] rounded-md shadow-[0_2px_10px] shadow-black/5"
     default-value="'item-1'"
     type="single"
     :collapsible="true"
   >
     <template v-for="item in accordionItems" :key="item.value">
-    <AccordionItem class="accordion-item" :value="item.value">
-      <AccordionHeader class="flex">
-        <AccordionTrigger class="accordion-trigger group"
-          ><span>{{item.title}}</span>
-          <Icon
-            icon="radix-icons:chevron-down"
-            class="text-green10 ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
-            aria-hidden
-          />
-        </AccordionTrigger>
-      </AccordionHeader>
-      <AccordionContent
-        class="accordion-content"
-      >
-        <div class="px-5 py-4">{{item.content}}</div>
-      </AccordionContent>
-    </AccordionItem>
+      <AccordionItem class="accordion-item" :value="item.value">
+        <AccordionHeader class="flex">
+          <AccordionTrigger class="accordion-trigger group"
+            ><span>{{ item.title }}</span>
+            <Icon
+              icon="radix-icons:chevron-down"
+              class="text-green10 ease-[cubic-bezier(0.87,_0,_0.13,_1)] transition-transform duration-300 group-data-[state=open]:rotate-180"
+              aria-hidden
+            />
+          </AccordionTrigger>
+        </AccordionHeader>
+        <AccordionContent class="accordion-content">
+          <div class="px-5 py-4">{{ item.content }}</div>
+        </AccordionContent>
+      </AccordionItem>
     </template>
   </AccordionRoot>
 </template>

diff --git a/docs/components/demo/AspectRatio/index.vue b/docs/components/demo/AspectRatio/index.vue
@@ -3,11 +3,13 @@ import { AspectRatio } from "radix-vue";
 </script>
 
 <template>
-  <div class="shadow-blackA7 w-[300px] overflow-hidden rounded-md shadow-[0_2px_10px]">
+  <div class="shadow-blackA7 w-full sm:w-[300px] overflow-hidden rounded-md shadow-[0_2px_10px]">
     <AspectRatio :ratio="16 / 9">
-      <img class="h-full w-full object-cover"
+      <img
+        class="h-full w-full object-cover"
         src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
-        alt="Landscape photograph by Tobias Tullius" />
+        alt="Landscape photograph by Tobias Tullius"
+      />
     </AspectRatio>
   </div>
 </template>
diff --git a/docs/components/demo/Collapsible/index.vue b/docs/components/demo/Collapsible/index.vue
@@ -9,14 +9,14 @@ const open = ref(false);
 </script>
 
 <template>
-  <CollapsibleRoot class="w-[300px]" v-model:open="rootOpen" :disabled="rootDisabled">
+  <CollapsibleRoot class="sm:w-[300px]" v-model:open="rootOpen" :disabled="rootDisabled">
     <div style="display: flex; align-items: center; justify-content: space-between">
       <span class="text-white text-[15px] leading-[25px]"> @peduarte starred 3 repos </span>
       <CollapsibleTrigger
         class="cursor-default rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-grass11 shadow-[0_2px_10px] shadow-blackA7 outline-none data-[state=closed]:bg-white data-[state=open]:bg-green3 hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black"
       >
-          <Icon v-if="rootOpen" icon="radix-icons:cross-2" class="h-3.5 w-3.5" />
-          <Icon v-else icon="radix-icons:row-spacing" class="h-3.5 w-3.5" />
+        <Icon v-if="rootOpen" icon="radix-icons:cross-2" class="h-3.5 w-3.5" />
+        <Icon v-else icon="radix-icons:row-spacing" class="h-3.5 w-3.5" />
       </CollapsibleTrigger>
     </div>
 

diff --git a/docs/components/demo/ContextMenu/index.vue b/docs/components/demo/ContextMenu/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import { ref } from 'vue'
+import { Icon } from "@iconify/vue";
+import { ref } from "vue";
 import {
   ContextMenuCheckboxItem,
   ContextMenuContent,
@@ -15,27 +15,25 @@ import {
   ContextMenuTrigger,
   ContextMenuSub,
   ContextMenuSubContent,
-  ContextMenuSubTrigger
-} from 'radix-vue'
+  ContextMenuSubTrigger,
+} from "radix-vue";
 
-const checkboxOne = ref(false)
-const checkboxTwo = ref(false)
-const person = ref('pedro')
+const checkboxOne = ref(false);
+const checkboxTwo = ref(false);
+const person = ref("pedro");
 
 function handleClick() {
-  alert('hello!')
+  alert("hello!");
 }
 </script>
 
 <template>
   <ContextMenuRoot>
     <ContextMenuTrigger
       as-child
-      class="block border-2 border-white border-dashed text-white rounded text-[15px] select-none py-[45px] w-[300px] text-center"
+      class="block border-2 border-white border-dashed text-white rounded text-[15px] select-none py-[45px] w-full sm:w-[300px] text-center"
     >
-    <span>
-      Right click here.
-    </span>
+      <span> Right click here. </span>
     </ContextMenuTrigger>
 
     <ContextMenuPortal>
@@ -297,9 +295,7 @@ function handleClick() {
         </ContextMenuCheckboxItem>
         <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
 
-        <ContextMenuLabel class="pl-[25px] text-xs leading-[25px] text-mauve11">
-          People
-        </ContextMenuLabel>
+        <ContextMenuLabel class="pl-[25px] text-xs leading-[25px] text-mauve11"> People </ContextMenuLabel>
         <ContextMenuRadioGroup v-model="person">
           <ContextMenuRadioItem
             class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"

diff --git a/docs/components/demo/Progress/index.vue b/docs/components/demo/Progress/index.vue
@@ -5,16 +5,20 @@ import { ProgressRoot, ProgressIndicator } from "radix-vue";
 const progressValue = ref(10);
 
 onMounted(() => {
-  const timer = setTimeout(() => progressValue.value = 66, 500);
+  const timer = setTimeout(() => (progressValue.value = 66), 500);
   return () => clearTimeout(timer);
-})
+});
 </script>
 
 <template>
-  <ProgressRoot class="relative overflow-hidden bg-blackA9 rounded-full w-[300px] h-[25px]"
-    style="transform: translateZ(0)" v-model="progressValue">
+  <ProgressRoot
+    class="relative overflow-hidden bg-blackA9 rounded-full w-full sm:w-[300px] h-4 sm:h-5"
+    style="transform: translateZ(0)"
+    v-model="progressValue"
+  >
     <ProgressIndicator
-      class="bg-white w-full h-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
-      :style="`transform: translateX(-${100 - progressValue}%)`" />
+      class="bg-white rounded-full w-full h-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
+      :style="`transform: translateX(-${100 - progressValue}%)`"
+    />
   </ProgressRoot>
 </template>
diff --git a/docs/components/demo/Tabs/index.vue b/docs/components/demo/Tabs/index.vue
@@ -3,7 +3,7 @@ import { TabsRoot, TabsList, TabsTrigger, TabsContent } from "radix-vue";
 </script>
 
 <template>
-  <TabsRoot class="flex flex-col w-[300px] shadow-[0_2px_10px] shadow-blackA4" default-value="tab1">
+  <TabsRoot class="flex flex-col w-full sm:w-[300px] shadow-[0_2px_10px] shadow-blackA4" default-value="tab1">
     <TabsList class="shrink-0 flex border-b border-mauve6" aria-label="Manage your account">
       <TabsTrigger
         class="bg-white px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-mauve11 select-none first:rounded-tl-md last:rounded-tr-md hover:text-grass11 data-[state=active]:text-grass11 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black outline-none cursor-default"