Merge branch 'dev' into dev

docs/components/HeaderLinks.vue

@@ -33,6 +33,7 @@
           target="_blank"
           color="gray"
           variant="ghost"
+          class="hidden lg:inline-flex"
           icon="i-simple-icons-twitter"
         />
 
@@ -41,6 +42,7 @@
           target="_blank"
           color="gray"
           variant="ghost"
+          class="hidden lg:inline-flex"
           icon="i-simple-icons-github"
         />
 

docs/components/docs/DocsFooter.vue

@@ -7,8 +7,34 @@
       </NuxtLink>
     </div>
 
-    <NuxtLink to="https://github.com/nuxtlabs/ui/releases" target="_blank">
-      <UBadge label="v2.4.0" />
-    </NuxtLink>
+    <div class="flex items-center gap-3 -my-1">
+      <div class="flex lg:hidden items-center gap-1.5">
+        <UButton
+          to="https://twitter.com/nuxtlabs"
+          target="_blank"
+          color="gray"
+          size="2xs"
+          variant="ghost"
+          icon="i-simple-icons-twitter"
+        />
+
+        <UButton
+          to="https://github.com/nuxtlabs/ui"
+          target="_blank"
+          color="gray"
+          size="2xs"
+          variant="ghost"
+          icon="i-simple-icons-github"
+        />
+      </div>
+
+      <NuxtLink :to="`https://github.com/nuxtlabs/ui/releases/tag/v${config.version}`" target="_blank">
+        <UBadge :label="`v${config.version}`" />
+      </NuxtLink>
+    </div>
   </footer>
 </template>
+
+<script setup lang="ts">
+const config = useRuntimeConfig().public
+</script>

docs/components/docs/DocsSearch.vue

@@ -1,6 +1,8 @@
 <template>
   <UModal
     v-model="isSearchModalOpen"
+    :overlay="!isXs"
+    :transition="!isXs"
     :ui="{
       padding: 'sm:p-4',
       rounded: 'sm:rounded-lg',
@@ -33,6 +35,9 @@ const navigation: Ref<NavItem[]> = inject('navigation')
 const router = useRouter()
 const { usingInput } = useShortcuts()
 const { isSearchModalOpen } = useDocs()
+const breakpoints = useBreakpoints({ mobile: 640 })
+
+const isXs = breakpoints.smaller('mobile')
 
 const commandPaletteRef = ref<HTMLElement & { query: Ref<string>, results: { item: Command }[] }>()
 

docs/content/1.getting-started/2.installation.md

@@ -85,6 +85,19 @@ Also, the extension won't work when writing classes in your `app.config.ts` by d
 }
 ```
 
+You can also add the following to your `settings.json` to enable IntelliSense when using the `ui` prop:
+
+```json [settings.json]
+{
+  "tailwindCSS.classAttributes": [
+    "class",
+    "className",
+    "ngClass",
+    "ui"
+  ]
+}
+```
+
 ## Options
 
 | Key                      | Default                | Description                                      |

docs/content/2.elements/5.accordion.md

@@ -2,7 +2,7 @@
 github: true
 description: Display togglable accordion panels.
 headlessui:
-  label: 'Accordion'
+  label: 'Disclosure'
   to: 'https://headlessui.com/vue/disclosure'
 navigation:
   badge: 'Edge'
@@ -16,6 +16,7 @@ Pass an array to the `items` prop of the Accordion component. Each item can have
 - `content` - The content to display in the panel by default.
 - `disabled` - Determines whether the item is disabled or not.
 - `defaultOpen` - Determines whether the item is initially open or closed.
+- `closeOthers` - Determines whether the item click close others or not. **It only works with multiple mode**.
 
 ::component-example
 #default
@@ -51,14 +52,14 @@ You can also pass any prop from the [Button](/elements/button) component directl
 ---
 baseProps:
   items:
-    - label: "1. What is NuxtLabs UI?"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    - label: "2. Getting Started"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    - label: "3. Theming"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    - label: "4. Components"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+    - label: '1. What is NuxtLabs UI?'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: '2. Getting Started'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: '3. Theming'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: '4. Components'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
 props:
   color: 'primary'
   variant: 'soft'
@@ -90,14 +91,14 @@ You can also set them to `null` to hide the icons.
 ---
 baseProps:
   items:
-    - label: "1. What is NuxtLabs UI?"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    - label: "2. Getting Started"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    - label: "3. Theming"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    - label: "4. Components"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+    - label: '1. What is NuxtLabs UI?'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: '2. Getting Started'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: '3. Theming'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: '4. Components'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
 props:
   openIcon: 'i-heroicons-plus'
   closeIcon: 'i-heroicons-minus'
@@ -107,26 +108,51 @@ excludedProps:
 ---
 ::
 
+### Multiple
+
+Use the `multiple` prop to to allow multiple elements to be opened at the same time.
+
+::component-card
+---
+baseProps:
+  items:
+    - label: 'What is NuxtLabs UI?'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: 'Getting Started'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: 'Theming'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: 'Components'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+props:
+  multiple: true
+excludedProps:
+  - defaultOpen
+---
+::
+
 ### Open
 
-Use the `default-open` prop to open all items by default.
+Use the `default-open` prop to open all items by default. Works better when the `multiple` prop is set to `true`.
 
 ::component-card
 ---
 baseProps:
   items:
-    - label: "What is NuxtLabs UI?"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    - label: "Getting Started"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    - label: "Theming"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    - label: "Components"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+    - label: 'What is NuxtLabs UI?'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: 'Getting Started'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: 'Theming'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: 'Components'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
 props:
   defaultOpen: true
+  multiple: true
 excludedProps:
   - defaultOpen
+  - multiple
 ---
 ::
 

docs/content/4.data/1.table.md

@@ -72,6 +72,7 @@ Use the `columns` prop to configure which columns to display. It's an array of o
 - `key` - The field to display from the row data.
 - `sortable` - Whether the column is sortable. Defaults to `false`.
 - `direction` - The sort direction to use on first click. Defaults to `asc`.
+- `class` - The class to apply to the column cells.
 
 ::component-example{class="grid"}
 ---

docs/nuxt.config.ts

@@ -1,6 +1,7 @@
 import ui from '../src/module'
 import { excludeColors } from '../src/colors'
 import colors from 'tailwindcss/colors'
+import pkg from '../package.json'
 
 export default defineNuxtConfig({
   // @ts-ignore
@@ -14,6 +15,11 @@ export default defineNuxtConfig({
     'nuxt-lodash',
     'nuxt-component-meta'
   ],
+  runtimeConfig: {
+    public: {
+      version: pkg.version
+    }
+  },
   content: {
     highlight: {
       theme: {

docs/pages/[...slug].vue

@@ -14,7 +14,7 @@
       <DocsFooter class="mt-16" />
     </div>
 
-    <DocsToc v-if="page.body?.toc" :toc="page.body.toc" class="lg:col-span-2" />
+    <DocsToc v-if="page.body?.toc" :toc="page.body.toc" class="lg:col-span-2 order-first lg:order-last" />
   </div>
   <div v-else class="flex-1 flex flex-col items-center justify-center">
     <div class="text-center">

package.json

@@ -40,33 +40,33 @@
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.9",
-    "@vueuse/core": "^10.2.0",
-    "@vueuse/integrations": "^10.2.0",
-    "@vueuse/math": "^10.2.0",
+    "@vueuse/core": "^10.2.1",
+    "@vueuse/integrations": "^10.2.1",
+    "@vueuse/math": "^10.2.1",
     "defu": "^6.1.2",
     "fuse.js": "^6.6.2",
     "lodash-es": "^4.17.21",
     "tailwindcss": "^3.3.2"
   },
   "devDependencies": {
-    "@iconify-json/simple-icons": "^1.1.58",
+    "@iconify-json/simple-icons": "^1.1.59",
     "@nuxt/content": "^2.7.0",
-    "@nuxt/devtools": "^0.6.4",
+    "@nuxt/devtools": "^0.6.6",
     "@nuxt/eslint-config": "^0.1.1",
     "@nuxt/module-builder": "^0.4.0",
     "@nuxthq/studio": "^0.13.2",
     "@nuxtjs/plausible": "^0.2.1",
     "@release-it/conventional-changelog": "^5.1.1",
     "@types/lodash-es": "^4.17.7",
-    "@types/node": "^20.3.2",
-    "@vueuse/nuxt": "^10.2.0",
-    "eslint": "^8.43.0",
+    "@types/node": "^20.3.3",
+    "@vueuse/nuxt": "^10.2.1",
+    "eslint": "^8.44.0",
     "nuxt": "^3.6.1",
     "nuxt-component-meta": "^0.5.3",
     "nuxt-lodash": "^2.5.0",
     "release-it": "^15.11.0",
     "unbuild": "^1.2.1",
     "v-calendar": "^3.0.3",
-    "vue-tsc": "^1.8.2"
+    "vue-tsc": "^1.8.3"
   }
 }