@nuxt/ui 2.21.0 → 2.22.0

package/README.md

@@ -1,4 +1,4 @@
-[![nuxt-ui.png](https://volta.s3.fr-par.scw.cloud/nuxt_ui_social_card_531d133fa2.png)](https://ui.nuxt.com)
+[![nuxt-ui.png](https://volta.s3.fr-par.scw.cloud/nuxt_ui_social_card_531d133fa2.png)](https://ui2.nuxt.com)
 
 # Nuxt UI
 
@@ -22,27 +22,32 @@ Its goal is to provide everything related to UI when building a Nuxt app. This i
 - Fully typed
 - [Figma Kit](https://www.figma.com/community/file/1436401057300493073)
 
-Read more on [ui.nuxt.com](https://ui.nuxt.com)
+Read more on [ui2.nuxt.com](https://ui2.nuxt.com)
 
 ## Installation
 
 ```bash
-npx nuxi@latest module add ui
+# npm
+npm install @nuxt/ui@2
+# yarn
+yarn add @nuxt/ui@2
+# pnpm
+pnpm add @nuxt/ui@2
+# bun
+bun add @nuxt/ui@2
 ```
 
-If you want latest updates, please use `@nuxt/ui-edge` in your `package.json`:
+Next, register the `@nuxt/ui` module in your `nuxt.config.ts`:
 
-```json
-{
-  "devDependencies": {
-    "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
-  }
-}
+```ts
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui']
+})
 ```
 
 ## Documentation
 
-Visit https://ui.nuxt.com to explore the documentation.
+Visit https://ui2.nuxt.com to explore the documentation.
 
 ## Credits
 
@@ -59,15 +64,15 @@ Visit https://ui.nuxt.com to explore the documentation.
 Thank you for considering contributing to Nuxt UI. Here are a few ways you can get involved:
 
 - Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
-- Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/getting-started/contributing) to share your suggestions.
+- Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui2.nuxt.com/getting-started/contributing) to share your suggestions.
 
 ## Local Development
 
-Follow the docs to [Set up your local development environment](https://ui.nuxt.com/getting-started/contributing#_2-local-development-setup) and contribute.
+Follow the docs to [Set up your local development environment](https://ui2.nuxt.com/getting-started/contributing#_2-local-development-setup) and contribute.
 
 ## License
 
-Licensed under the [MIT license](https://github.com/nuxt/ui/blob/dev/LICENSE.md).
+Licensed under the [MIT license](https://github.com/nuxt/ui/blob/v2/LICENSE.md).
 
 <!-- Badges -->
 [npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D

package/dist/module.d.mts

@@ -25,6 +25,10 @@ interface ModuleOptions {
      * @default false
      */
     global?: boolean;
+    /**
+     * @default true
+     */
+    colorMode?: boolean;
     safelistColors?: string[];
     /**
      * Disables the global css styles added by the module.
@@ -33,4 +37,5 @@ interface ModuleOptions {
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -1,12 +1,12 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "configKey": "ui",
   "compatibility": {
     "nuxt": ">=3.10.0"
   },
   "builder": {
-    "@nuxt/module-builder": "0.8.4",
-    "unbuild": "2.0.0"
+    "@nuxt/module-builder": "1.0.1",
+    "unbuild": "3.5.0"
   }
 }

package/dist/module.mjs

@@ -1,20 +1,11 @@
 import { createRequire } from 'node:module';
-import { addTemplate, useNuxt, installModule, createResolver, defineNuxtModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { useNuxt, addTemplate, createResolver, installModule, defineNuxtModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
 import { join } from 'pathe';
 import { defu } from 'defu';
 import { setGlobalColors } from '../dist/runtime/utils/colors.js';
 
-
-
-// -- Unbuild CommonJS Shims --
-import __cjs_url__ from 'url';
-import __cjs_path__ from 'path';
-import __cjs_mod__ from 'module';
-const __filename = __cjs_url__.fileURLToPath(import.meta.url);
-const __dirname = __cjs_path__.dirname(__filename);
-const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@nuxt/ui";
-const version = "2.21.0";
+const version = "2.22.0";
 
 function createTemplates(nuxt = useNuxt()) {
   const template = addTemplate({
@@ -129,6 +120,7 @@ const module = defineNuxtModule({
   },
   defaults: {
     prefix: "U",
+    colorMode: true,
     safelistColors: ["primary"],
     disableGlobalStyles: false
   },
@@ -143,7 +135,9 @@ const module = defineNuxtModule({
     }
     createTemplates(nuxt);
     await installModule("@nuxt/icon");
-    await installModule("@nuxtjs/color-mode", { classSuffix: "" });
+    if (options.colorMode) {
+      await installModule("@nuxtjs/color-mode", { classSuffix: "" });
+    }
     await installTailwind(options, nuxt, resolve);
     addPlugin({
       src: resolve(runtimeDir, "plugins", "colors")

package/dist/runtime/components/data/Table.vue

@@ -31,8 +31,8 @@
             <slot v-else :name="`${column.key}-header`" :column="column" :sort="sort" :on-sort="onSort">
               <UButton
                 v-if="column.sortable"
-                v-bind="{ ...(ui.default.sortButton || {}), ...sortButton }"
-                :icon="(!sort.column || sort.column !== column.key) ? (sortButton.icon || ui.default.sortButton.icon) : sort.direction === 'asc' ? sortAscIcon : sortDescIcon"
+                v-bind="{ ...ui.default.sortButton || {}, ...sortButton }"
+                :icon="!sort.column || sort.column !== column.key ? sortButton.icon || ui.default.sortButton.icon : sort.direction === 'asc' ? sortAscIcon : sortDescIcon"
                 :label="column[columnAttribute]"
                 @click="onSort(column)"
               />
@@ -43,7 +43,7 @@
 
         <tr v-if="loading && progress">
           <td :colspan="0" :class="ui.progress.wrapper">
-            <UProgress v-bind="{ ...(ui.default.progress || {}), ...progress }" size="2xs" />
+            <UProgress v-bind="{ ...ui.default.progress || {}, ...progress }" size="2xs" />
           </td>
         </tr>
       </thead>
@@ -87,24 +87,26 @@
                 <UButton
                   v-else
                   :disabled="row.disabledExpand"
-                  v-bind="{ ...(ui.default.expandButton || {}), ...expandButton }"
+                  v-bind="{ ...ui.default.expandButton || {}, ...expandButton }"
                   :ui="{ icon: { base: [ui.expand.icon, isExpanded(row) && 'rotate-180'].join(' ') } }"
                   @click.capture.stop="toggleOpened(row)"
                 />
               </td>
               <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, column?.rowClass, row[column.key]?.class, column.key === 'select' && ui.checkbox.padding]">
-                <slot v-if="modelValue && column.key === 'select' " name="select-data" :checked="isSelected(row)" :change="(ev: boolean) => onChangeCheckbox(ev, row)">
-                  <UCheckbox
-                    :model-value="isSelected(row)"
-                    v-bind="ui.default.checkbox"
-                    aria-label="Select row"
-                    @change="onChangeCheckbox($event, row)"
-                  />
-                </slot>
-
+                <!-- This is a workaround: Since the @change event doesn't bubble up naturally, we need to wrap it in another element and use @click.capture.stop to simulate event bubbling behavior -->
+                <span v-if="modelValue && column.key === 'select'" @click.capture.stop="() => {
+}">
+                  <slot name="select-data" :checked="isSelected(row)" :change="(ev) => onChangeCheckbox(ev, row)">
+                    <UCheckbox
+                      :model-value="isSelected(row)"
+                      v-bind="ui.default.checkbox"
+                      aria-label="Select row"
+                      @change="onChangeCheckbox($event, row)"
+                    />
+                  </slot>
+                </span>
                 <slot
                   v-else
-                  :key="retriggerSlot"
                   :name="`${column.key}-data`"
                   :column="column"
                   :row="row"
@@ -132,11 +134,11 @@
 </template>
 
 <script>
-import { computed, defineComponent, ref, toRaw, toRef, watch } from "vue";
+import { computed, defineComponent, toRaw, toRef } from "vue";
 import { upperFirst } from "scule";
 import { defu } from "defu";
 import { useVModel } from "@vueuse/core";
-import { isEqual } from "ohash";
+import { isEqual } from "ohash/utils";
 import UIcon from "../elements/Icon.vue";
 import UButton from "../elements/Button.vue";
 import UProgress from "../elements/Progress.vue";
@@ -289,7 +291,6 @@ export default defineComponent({
         row: null
       })
     });
-    const retriggerSlot = ref(null);
     const savedSort = { column: sort.value.column, direction: null };
     const rows = computed(() => {
       if (!sort.value?.column || props.sortMode === "manual") {
@@ -422,11 +423,6 @@ export default defineComponent({
       }
       return void 0;
     }
-    watch(rows, () => {
-      retriggerSlot.value = /* @__PURE__ */ new Date();
-    }, {
-      deep: true
-    });
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
@@ -453,8 +449,7 @@ export default defineComponent({
       getRowData,
       toggleOpened,
       getAriaSort,
-      isExpanded,
-      retriggerSlot
+      isExpanded
     };
   }
 });