@nuxt/ui 2.17.0 → 2.18.1

package/dist/module.json

@@ -1,8 +1,12 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.17.0",
+  "version": "2.18.1",
   "configKey": "ui",
   "compatibility": {
-    "nuxt": "^3.10.0"
+    "nuxt": ">=3.10.0"
+  },
+  "builder": {
+    "@nuxt/module-builder": "0.8.1",
+    "unbuild": "2.0.0"
   }
 }

package/dist/module.mjs

@@ -2,8 +2,7 @@ import { createRequire } from 'node:module';
 import { addTemplate, useNuxt, installModule, createResolver, defineNuxtModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
 import { join } from 'pathe';
 import { defu } from 'defu';
-import { kebabCase } from 'scule';
-import defaultColors$1 from 'tailwindcss/colors.js';
+import { setGlobalColors } from '../dist/runtime/utils/colors.js';
 
 
 
@@ -15,7 +14,7 @@ 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.17.0";
+const version = "2.18.1";
 
 function createTemplates(nuxt = useNuxt()) {
   const template = addTemplate({
@@ -34,68 +33,6 @@ function createTemplates(nuxt = useNuxt()) {
   });
 }
 
-function omit(object, keysToOmit) {
-  const result = { ...object };
-  for (const key of keysToOmit) {
-    delete result[key];
-  }
-  return result;
-}
-
-const colorsToExclude = [
-  "inherit",
-  "transparent",
-  "current",
-  "white",
-  "black",
-  "slate",
-  "gray",
-  "zinc",
-  "neutral",
-  "stone",
-  "cool"
-];
-const excludeColors = (colors) => {
-  return Object.entries(omit(colors, colorsToExclude)).filter(([, value]) => typeof value === "object").map(([key]) => kebabCase(key));
-};
-const setGlobalColors = (theme) => {
-  const globalColors = {
-    ...theme.colors || defaultColors$1,
-    ...theme.extend?.colors
-  };
-  globalColors.primary = theme.extend.colors.primary = {
-    50: "rgb(var(--color-primary-50) / <alpha-value>)",
-    100: "rgb(var(--color-primary-100) / <alpha-value>)",
-    200: "rgb(var(--color-primary-200) / <alpha-value>)",
-    300: "rgb(var(--color-primary-300) / <alpha-value>)",
-    400: "rgb(var(--color-primary-400) / <alpha-value>)",
-    500: "rgb(var(--color-primary-500) / <alpha-value>)",
-    600: "rgb(var(--color-primary-600) / <alpha-value>)",
-    700: "rgb(var(--color-primary-700) / <alpha-value>)",
-    800: "rgb(var(--color-primary-800) / <alpha-value>)",
-    900: "rgb(var(--color-primary-900) / <alpha-value>)",
-    950: "rgb(var(--color-primary-950) / <alpha-value>)",
-    DEFAULT: "rgb(var(--color-primary-DEFAULT) / <alpha-value>)"
-  };
-  if (globalColors.gray) {
-    globalColors.cool = theme.extend.colors.cool = defaultColors$1.gray;
-  }
-  globalColors.gray = theme.extend.colors.gray = {
-    50: "rgb(var(--color-gray-50) / <alpha-value>)",
-    100: "rgb(var(--color-gray-100) / <alpha-value>)",
-    200: "rgb(var(--color-gray-200) / <alpha-value>)",
-    300: "rgb(var(--color-gray-300) / <alpha-value>)",
-    400: "rgb(var(--color-gray-400) / <alpha-value>)",
-    500: "rgb(var(--color-gray-500) / <alpha-value>)",
-    600: "rgb(var(--color-gray-600) / <alpha-value>)",
-    700: "rgb(var(--color-gray-700) / <alpha-value>)",
-    800: "rgb(var(--color-gray-800) / <alpha-value>)",
-    900: "rgb(var(--color-gray-900) / <alpha-value>)",
-    950: "rgb(var(--color-gray-950) / <alpha-value>)"
-  };
-  return excludeColors(globalColors);
-};
-
 async function installTailwind(moduleOptions, nuxt = useNuxt(), resolve = createResolver(import.meta.url).resolve) {
   const runtimeDir = resolve("./runtime");
   nuxt.hook("tailwindcss:config", function(tailwindConfig) {
@@ -116,7 +53,6 @@ async function installTailwind(moduleOptions, nuxt = useNuxt(), resolve = create
     getContents: ({ nuxt: nuxt2 }) => `
       const { defaultExtractor: createDefaultExtractor } = require('tailwindcss/lib/lib/defaultExtractor.js')
       const { customSafelistExtractor, generateSafelist } = require(${JSON.stringify(resolve(runtimeDir, "utils", "colors"))})
-      const { iconsPlugin, getIconCollections } = require('@egoist/tailwindcss-icons')
 
       const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
 
@@ -126,8 +62,7 @@ async function installTailwind(moduleOptions, nuxt = useNuxt(), resolve = create
           require('@tailwindcss/aspect-ratio'),
           require('@tailwindcss/typography'),
           require('@tailwindcss/container-queries'),
-          require('@headlessui/tailwindcss'),
-          iconsPlugin(${Array.isArray(moduleOptions.icons) || moduleOptions.icons === "all" ? `{ collections: getIconCollections(${JSON.stringify(moduleOptions.icons)}) }` : typeof moduleOptions.icons === "object" ? JSON.stringify(moduleOptions.icons) : {}})
+          require('@headlessui/tailwindcss')
         ],
         content: {
           files: [
@@ -159,6 +94,7 @@ async function installTailwind(moduleOptions, nuxt = useNuxt(), resolve = create
       configTemplate.dst,
       join(nuxt.options.rootDir, "tailwind.config")
     ]
+    // @ts-expect-error - `@nuxtjs/tailwindcss` not installed yet
   }, nuxt.options.tailwindcss));
 }
 
@@ -175,12 +111,11 @@ const module = defineNuxtModule({
     version,
     configKey: "ui",
     compatibility: {
-      nuxt: "^3.10.0"
+      nuxt: ">=3.10.0"
     }
   },
   defaults: {
     prefix: "U",
-    icons: ["heroicons"],
     safelistColors: ["primary"],
     disableGlobalStyles: false
   },
@@ -194,7 +129,7 @@ const module = defineNuxtModule({
       nuxt.options.css.push(resolve(runtimeDir, "ui.css"));
     }
     createTemplates(nuxt);
-    await installModule("nuxt-icon");
+    await installModule("@nuxt/icon");
     await installModule("@nuxtjs/color-mode", { classSuffix: "" });
     await installTailwind(options, nuxt, resolve);
     addPlugin({

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

@@ -12,6 +12,10 @@
             <UCheckbox :model-value="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" v-bind="ui.default.checkbox" aria-label="Select all" @change="onChange" />
           </th>
 
+          <th v-if="$slots.expand" scope="col" :class="ui.tr.base">
+            <span class="sr-only">Expand</span>
+          </th>
+
           <th
             v-for="(column, index) in columns"
             :key="index"
@@ -66,17 +70,39 @@
         </tr>
 
         <template v-else>
-          <tr v-for="(row, index) in rows" :key="index" :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)">
-            <td v-if="modelValue" :class="ui.checkbox.padding">
-              <UCheckbox v-model="selected" :value="row" v-bind="ui.default.checkbox" aria-label="Select row" @click.stop />
-            </td>
+          <template v-for="(row, index) in rows" :key="index">
+            <tr :class="[ui.tr.base, isSelected(row) && ui.tr.selected, $attrs.onSelect && ui.tr.active, row?.class]" @click="() => onSelect(row)">
+              <td v-if="modelValue" :class="ui.checkbox.padding">
+                <UCheckbox v-model="selected" :value="row" v-bind="ui.default.checkbox" aria-label="Select row" @click.stop />
+              </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, row[column.key]?.class]">
-              <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)">
-                {{ getRowData(row, column.key) }}
-              </slot>
-            </td>
-          </tr>
+              <td
+                v-if="$slots.expand"
+                :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size]"
+              >
+                <UButton
+                  v-bind="{ ...(ui.default.expandButton || {}), ...expandButton }"
+                  :ui="{ icon: { base: [ui.expand.icon, openedRows.includes(index) && 'rotate-180'] } }"
+                  @click="toggleOpened(index)"
+                />
+              </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]">
+                <slot :name="`${column.key}-data`" :column="column" :row="row" :index="index" :get-row-data="(defaultValue) => getRowData(row, column.key, defaultValue)">
+                  {{ getRowData(row, column.key) }}
+                </slot>
+              </td>
+            </tr>
+            <tr v-if="openedRows.includes(index)">
+              <td colspan="100%">
+                <slot
+                  name="expand"
+                  :row="row"
+                  :index="index"
+                />
+              </td>
+            </tr>
+          </template>
         </template>
       </tbody>
     </table>
@@ -84,7 +110,7 @@
 </template>
 
 <script>
-import { computed, defineComponent, toRaw, toRef } from "vue";
+import { ref, computed, defineComponent, toRaw, toRef } from "vue";
 import { upperFirst } from "scule";
 import { defu } from "defu";
 import { useVModel } from "@vueuse/core";
@@ -159,6 +185,10 @@ export default defineComponent({
       type: String,
       default: () => config.default.sortDescIcon
     },
+    expandButton: {
+      type: Object,
+      default: () => config.default.expandButton
+    },
     loading: {
       type: Boolean,
       default: false
@@ -193,6 +223,7 @@ export default defineComponent({
     const { ui, attrs } = useUI("table", toRef(props, "ui"), config, toRef(props, "class"));
     const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false, class: void 0, sort: defaultSort })));
     const sort = useVModel(props, "sort", emit, { passive: true, defaultValue: defu({}, props.sort, { column: null, direction: "asc" }) });
+    const openedRows = ref([]);
     const savedSort = { column: sort.value.column, direction: null };
     const rows = computed(() => {
       if (!sort.value?.column || props.sortMode === "manual") {
@@ -216,13 +247,11 @@ export default defineComponent({
     });
     const indeterminate = computed(() => selected.value && selected.value.length > 0 && selected.value.length < props.rows.length);
     const emptyState = computed(() => {
-      if (props.emptyState === null)
-        return null;
+      if (props.emptyState === null) return null;
       return { ...ui.value.default.emptyState, ...props.emptyState };
     });
     const loadingState = computed(() => {
-      if (props.loadingState === null)
-        return null;
+      if (props.loadingState === null) return null;
       return { ...ui.value.default.loadingState, ...props.loadingState };
     });
     function compare(a, z) {
@@ -274,6 +303,13 @@ export default defineComponent({
     function getRowData(row, rowKey, defaultValue = "") {
       return get(row, rowKey, defaultValue);
     }
+    function toggleOpened(index) {
+      if (openedRows.value.includes(index)) {
+        openedRows.value = openedRows.value.filter((i) => i !== index);
+      } else {
+        openedRows.value.push(index);
+      }
+    }
     function getAriaSort(column) {
       if (!column.sortable) {
         return void 0;
@@ -305,11 +341,13 @@ export default defineComponent({
       emptyState,
       // eslint-disable-next-line vue/no-dupe-keys
       loadingState,
+      openedRows,
       isSelected,
       onSort,
       onSelect,
       onChange,
       getRowData,
+      toggleOpened,
       getAriaSort
     };
   }