@nuxt/ui 0.4.0 → 2.8.0

package/dist/runtime/composables/useTimer.mjs

@@ -0,0 +1,51 @@
+import { ref, computed } from "vue-demi";
+import { useTimestamp } from "@vueuse/core";
+export function useTimer(cb, interval, options) {
+  let timer = null;
+  const { pause: tPause, resume: tResume, timestamp } = useTimestamp({ ...options || {}, controls: true });
+  const startTime = ref(null);
+  const remaining = computed(() => {
+    if (!startTime.value) {
+      return 0;
+    }
+    return interval - (timestamp.value - startTime.value);
+  });
+  function set(...args) {
+    timer = setTimeout(() => {
+      timer = null;
+      startTime.value = null;
+      cb(...args);
+    }, remaining.value);
+  }
+  function clear() {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  }
+  function start() {
+    startTime.value = Date.now();
+    set();
+  }
+  function stop() {
+    clear();
+    tPause();
+  }
+  function pause() {
+    clear();
+    tPause();
+  }
+  function resume() {
+    set();
+    tResume();
+    startTime.value = (startTime.value || 0) + (Date.now() - timestamp.value);
+  }
+  start();
+  return {
+    start,
+    stop,
+    pause,
+    resume,
+    remaining
+  };
+}

package/dist/runtime/composables/useToast.d.ts

@@ -0,0 +1,18 @@
+import type { Notification } from '../types/notification';
+export declare function useToast(): {
+    add: (notification: Partial<Notification>) => {
+        id: string;
+        title?: string | undefined;
+        description?: string | undefined;
+        icon?: string | undefined;
+        avatar?: import("../types/avatar").Avatar | undefined;
+        closeButton?: import("../types/button").Button | undefined;
+        timeout?: number | undefined;
+        actions?: import("../types/notification").NotificationAction[] | undefined;
+        click?: Function | undefined;
+        callback?: Function | undefined;
+        color?: string | undefined;
+        ui?: any;
+    };
+    remove: (id: string) => void;
+};

package/dist/runtime/composables/useToast.mjs

@@ -0,0 +1,22 @@
+import { useState } from "#imports";
+export function useToast() {
+  const notifications = useState("notifications", () => []);
+  function add(notification) {
+    const body = {
+      id: (/* @__PURE__ */ new Date()).getTime().toString(),
+      ...notification
+    };
+    const index = notifications.value.findIndex((n) => n.id === body.id);
+    if (index === -1) {
+      notifications.value.push(body);
+    }
+    return body;
+  }
+  function remove(id) {
+    notifications.value = notifications.value.filter((n) => n.id !== id);
+  }
+  return {
+    add,
+    remove
+  };
+}

package/dist/runtime/plugins/colors.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugins/colors.mjs

@@ -0,0 +1,46 @@
+import { computed } from "vue";
+import { hexToRgb } from "../utils/index.mjs";
+import { defineNuxtPlugin, useAppConfig, useNuxtApp, useHead } from "#imports";
+import colors from "#tailwind-config/theme/colors";
+export default defineNuxtPlugin(() => {
+  const appConfig = useAppConfig();
+  const nuxtApp = useNuxtApp();
+  const root = computed(() => {
+    const primary = colors[appConfig.ui.primary];
+    const gray = colors[appConfig.ui.gray];
+    if (!primary) {
+      console.warn(`[@nuxt/ui] Primary color '${appConfig.ui.primary}' not found in Tailwind config`);
+    }
+    if (!gray) {
+      console.warn(`[@nuxt/ui] Gray color '${appConfig.ui.gray}' not found in Tailwind config`);
+    }
+    return `:root {
+${Object.entries(primary || colors.green).map(([key, value]) => `--color-primary-${key}: ${hexToRgb(value)};`).join("\n")}
+--color-primary-DEFAULT: var(--color-primary-500);
+
+${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}: ${hexToRgb(value)};`).join("\n")}
+}
+
+.dark {
+  --color-primary-DEFAULT: var(--color-primary-400);
+}
+`;
+  });
+  const headData = {
+    style: [{
+      innerHTML: () => root.value,
+      tagPriority: -2,
+      id: "nuxt-ui-colors"
+    }]
+  };
+  if (process.client && nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {
+    const style = document.createElement("style");
+    style.innerHTML = root.value;
+    style.setAttribute("data-nuxt-ui-colors", "");
+    document.head.appendChild(style);
+    headData.script = [{
+      innerHTML: "document.head.removeChild(document.querySelector('[data-nuxt-ui-colors]'))"
+    }];
+  }
+  useHead(headData);
+});

package/dist/runtime/types/accordion.d.ts

@@ -0,0 +1,9 @@
+import type { Button } from './button'
+
+export interface AccordionItem extends Button {
+  slot?: string
+  disabled?: boolean
+  content?: string
+  defaultOpen?: boolean
+  closeOthers?: boolean
+}

package/dist/runtime/types/avatar.d.ts

@@ -0,0 +1,9 @@
+export interface Avatar {
+  src?: string | boolean
+  alt?: string
+  text?: string
+  size?: string
+  chipColor?: string
+  chipVariant?: string
+  chipPosition?: string
+}

package/dist/runtime/types/button.d.ts

@@ -0,0 +1,23 @@
+import type { Link } from './link'
+
+export interface Button extends Link {
+  type?: string
+  block?: boolean
+  label?: string
+  loading?: boolean
+  disabled?: boolean
+  padded?: boolean
+  size?: string
+  color?: string
+  variant?: string
+  icon?: string
+  loadingIcon?: string
+  leadingIcon?: string
+  trailingIcon?: string
+  trailing?: boolean
+  leading?: boolean
+  to?: string | object
+  target?: string
+  square?: boolean
+  truncate?: boolean
+}

package/dist/runtime/types/clipboard.d.ts

@@ -0,0 +1,3 @@
+export interface ClipboardPlugin {
+  copy: (text: string, success?: { title?: string, description?: string }, failure?: { title?: string, description?: string }) => void
+}

package/dist/runtime/types/command-palette.d.ts

@@ -0,0 +1,26 @@
+import type { FuseSortFunctionMatch, FuseSortFunctionMatchList } from 'fuse.js'
+import type { Avatar } from './avatar'
+
+export interface Command {
+  id: string | number
+  prefix?: string
+  suffix?: string
+  icon?: string
+  iconClass?: string
+  avatar?: Avatar
+  chip?: string
+  disabled?: boolean
+  shortcuts?: string[]
+  group?: string
+  score?: number
+  matches?: (FuseSortFunctionMatch | FuseSortFunctionMatchList)[]
+  [key: string]: any
+}
+
+export interface Group {
+  key: string
+  active?: string
+  inactive?: string
+  commands: Command[]
+  [key: string]: any
+}

package/dist/runtime/types/dropdown.d.ts

@@ -0,0 +1,13 @@
+import type { Link } from './link'
+import type { Avatar } from './avatar'
+
+export interface DropdownItem extends Link {
+  label: string
+  slot?: string
+  icon?: string
+  iconClass?: string
+  avatar?: Avatar
+  shortcuts?: string[]
+  disabled?: boolean
+  click?: Function
+}

package/dist/runtime/types/form.d.ts

@@ -0,0 +1,21 @@
+export interface FormError {
+  path: string
+  message: string
+}
+
+export interface Form<T> {
+  validate(path?: string, opts: { silent?: boolean } = { silent: false }): Promise<T>
+  clear(path?: string): void
+  errors: Ref<FormError[]>
+  setErrors(errs: FormError[], path?: string): void
+  getErrors(path?: string): FormError[]
+}
+
+export type FormSubmitEvent<T> = SubmitEvent & { data: T }
+
+export type FormEventType = 'blur' | 'input' | 'change' | 'submit'
+
+export interface FormEvent {
+  type: FormEventType
+  path: string
+}

package/dist/runtime/types/index.d.ts

@@ -0,0 +1,12 @@
+export * from './accordion'
+export * from './avatar'
+export * from './button'
+export * from './clipboard'
+export * from './command-palette'
+export * from './dropdown'
+export * from './form'
+export * from './link'
+export * from './notification'
+export * from './popper'
+export * from './tabs'
+export * from './vertical-navigation'

package/dist/runtime/types/link.d.ts

@@ -0,0 +1,8 @@
+import type { NuxtLinkProps } from '#app'
+
+export interface Link extends NuxtLinkProps {
+  exact?: boolean
+  exactQuery?: boolean
+  exactMatch?: boolean
+  inactiveClass?: string
+}

package/dist/runtime/types/notification.d.ts

@@ -0,0 +1,22 @@
+import type { Avatar } from './avatar'
+import type { Button } from './button'
+import appConfig from '#build/app.config'
+
+export interface NotificationAction extends Button {
+  click?: Function
+}
+
+export interface Notification {
+  id: string
+  title: string
+  description?: string
+  icon?: string
+  avatar?: Avatar
+  closeButton?: Button
+  timeout: number
+  actions?: NotificationAction[]
+  click?: Function
+  callback?: Function
+  color?: string
+  ui?: Partial<typeof appConfig.ui.notification>
+}

package/dist/runtime/types/popper.d.ts

@@ -0,0 +1,14 @@
+import type { Placement, PositioningStrategy } from '@popperjs/core'
+
+export interface PopperOptions {
+  locked?: boolean
+  overflowPadding?: number
+  offsetDistance?: number
+  offsetSkid?: number
+  placement?: Placement
+  strategy?: PositioningStrategy
+  gpuAcceleration?: boolean
+  adaptive?: boolean
+  scroll?: boolean
+  resize?: boolean
+}

package/dist/runtime/types/tabs.d.ts

@@ -0,0 +1,6 @@
+export interface TabItem {
+  label: string
+  slot?: string
+  disabled?: boolean
+  content?: string
+}

package/dist/runtime/types/vertical-navigation.d.ts

@@ -0,0 +1,11 @@
+import type { Link } from './link'
+import type { Avatar } from './avatar'
+
+export interface VerticalNavigationLink extends Link {
+  label: string
+  icon?: string
+  iconClass?: string
+  avatar?: Avatar
+  click?: Function
+  badge?: string | number
+}

package/dist/runtime/ui.css

@@ -0,0 +1,13 @@
+.dark {
+  color-scheme: dark;
+}
+
+a:focus-visible {
+  @apply outline-primary;
+}
+
+::selection { @apply bg-primary/40; }
+
+select {
+  background-image: none;
+}

package/dist/runtime/utils/StateEmitter.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import("vue").DefineComponent<{
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "open")[], "close" | "open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
+}, {
+    open: boolean;
+}, {}>;
+export default _default;

package/dist/runtime/utils/StateEmitter.mjs

@@ -0,0 +1,21 @@
+import { watch, defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    open: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["open", "close"],
+  setup(props, { emit }) {
+    watch(() => props.open, (value) => {
+      if (value) {
+        emit("open");
+      } else {
+        emit("close");
+      }
+    });
+    return () => {
+    };
+  }
+});

package/dist/runtime/utils/index.d.ts

@@ -0,0 +1,11 @@
+export declare const defuTwMerge: <Source extends {
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+}, Defaults extends ({
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} | (number | boolean | any[] | Record<never, any> | null | undefined))[]>(source: Source, ...defaults: Defaults) => import("defu").Defu<Source, Defaults>;
+export declare const hexToRgb: (hex: string) => string | null;
+export declare const getSlotsChildren: (slots: any) => any;

package/dist/runtime/utils/index.mjs

@@ -0,0 +1,33 @@
+import { createDefu } from "defu";
+import { twMerge } from "tailwind-merge";
+export const defuTwMerge = createDefu((obj, key, value) => {
+  if (typeof obj[key] === "string" && typeof value === "string" && obj[key] && value) {
+    obj[key] = twMerge(obj[key], value);
+    return true;
+  }
+});
+export const hexToRgb = (hex) => {
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, function(_, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? `${parseInt(result[1], 16)} ${parseInt(result[2], 16)} ${parseInt(result[3], 16)}` : null;
+};
+export const getSlotsChildren = (slots) => {
+  let children = slots.default?.();
+  if (children.length) {
+    children = children.flatMap((c) => {
+      if (typeof c.type === "symbol") {
+        if (typeof c.children === "string") {
+          return;
+        }
+        return c.children;
+      } else if (c.type.name === "ContentSlot") {
+        return c.ctx.slots.default?.();
+      }
+      return c;
+    }).filter(Boolean);
+  }
+  return children;
+};

package/dist/types.d.mts

@@ -0,0 +1,15 @@
+
+import { ModuleOptions } from './module'
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ['ui']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['ui']?: ModuleOptions }
+}
+
+declare module 'nuxt/schema' {
+  interface NuxtConfig { ['ui']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['ui']?: ModuleOptions }
+}
+
+
+export { ModuleOptions, default } from './module'

package/dist/types.d.ts

@@ -0,0 +1,15 @@
+
+import { ModuleOptions } from './module'
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ['ui']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['ui']?: ModuleOptions }
+}
+
+declare module 'nuxt/schema' {
+  interface NuxtConfig { ['ui']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['ui']?: ModuleOptions }
+}
+
+
+export { ModuleOptions, default } from './module'

package/package.json

@@ -1,56 +1,73 @@
 {
   "name": "@nuxt/ui",
-  "version": "0.4.0",
+  "version": "2.8.0",
+  "repository": "https://github.com/nuxt/ui",
   "license": "MIT",
-  "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/nuxt.mjs",
-      "require": "./nuxt.cjs"
-    },
-    "./nuxt": {
-      "import": "./dist/nuxt.mjs",
-      "require": "./nuxt.cjs"
-    },
-    "./unocss": {
-      "import": "./dist/unocss.mjs"
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
     }
   },
-  "main": "./dist/nuxt.mjs",
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
   "files": [
-    "dist",
-    "*.cjs"
+    "dist"
   ],
+  "engines": {
+    "node": ">=v16.20.2"
+  },
   "scripts": {
-    "build": "unbuild",
-    "dev": "nuxi dev playground",
-    "lint": "eslint . --ext .vue,.ts",
-    "prepack": "npm run build",
-    "playground:build": "nuxi build playground"
+    "build": "nuxt-module-build",
+    "prepack": "pnpm build",
+    "dev": "nuxi dev docs",
+    "play": "nuxi dev playground",
+    "build:docs": "nuxi generate docs",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "nuxi typecheck",
+    "prepare": "nuxi prepare docs",
+    "release": "release-it"
   },
   "dependencies": {
-    "@iconify-json/carbon": "^1.1.13",
-    "@nuxt/kit": "^3.0.0",
-    "@nuxtjs/color-mode": "^3.2.0",
-    "@unocss/core": "^0.48.2",
-    "@unocss/nuxt": "^0.48.2",
-    "@unocss/preset-attributify": "^0.48.2",
-    "@unocss/preset-icons": "^0.48.2",
-    "@unocss/preset-mini": "^0.48.2",
-    "@unocss/reset": "^0.48.2",
-    "@vueuse/core": "^9.10.0",
-    "@vueuse/integrations": "^9.10.0",
-    "@vueuse/nuxt": "^9.10.0",
-    "defu": "^6.1.1",
-    "focus-trap": "^7.2.0",
-    "unocss": "^0.48.2"
+    "@egoist/tailwindcss-icons": "^1.1.0",
+    "@headlessui/vue": "^1.7.16",
+    "@iconify-json/heroicons": "^1.1.12",
+    "@nuxt/kit": "^3.7.1",
+    "@nuxtjs/color-mode": "^3.3.0",
+    "@nuxtjs/tailwindcss": "^6.8.0",
+    "@popperjs/core": "^2.11.8",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/forms": "^0.5.6",
+    "@tailwindcss/typography": "^0.5.10",
+    "@vueuse/core": "^10.4.1",
+    "@vueuse/integrations": "^10.4.1",
+    "@vueuse/math": "^10.4.1",
+    "defu": "^6.1.2",
+    "fuse.js": "^6.6.2",
+    "lodash-es": "^4.17.21",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss": "^3.3.3"
   },
   "devDependencies": {
-    "nuxt": "^3.0.0",
-    "unbuild": "^1.0.2"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@nuxt/eslint-config": "^0.2.0",
+    "@nuxt/module-builder": "^0.5.1",
+    "@release-it/conventional-changelog": "^7.0.1",
+    "eslint": "^8.48.0",
+    "joi": "^17.10.1",
+    "nuxt": "^3.7.1",
+    "release-it": "^16.1.5",
+    "typescript": "^5.2.2",
+    "unbuild": "^2.0.0",
+    "vue-tsc": "^1.8.10",
+    "yup": "^1.2.0",
+    "zod": "^3.22.2",
+    "valibot": "^0.13.1"
   },
-  "gitHead": "15c58aff5280f43ab3e0567a697e4ec3399c0954"
+  "pnpm": {
+    "patchedDependencies": {
+      "nuxt-component-meta@0.5.3": "patches/nuxt-component-meta@0.5.3.patch"
+    }
+  }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 Nuxt Project
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/assets/styles.css

@@ -1,14 +0,0 @@
-:root {
-  --nui-c-context: 125,125,125;
-}
-
-html {
-  background-color: white;
-}
-
-html.dark {
-  color-scheme: dark;
-  background-color: #222;
-  color: white;
-}
-

package/dist/components/NButton.vue

@@ -1,19 +0,0 @@
-<template>
-  <Component
-    :is="to ? 'a' : 'button'"
-    :href="to"
-    class="n-button n-transition n-button-base hover:n-button-hover active:n-button-active focus-visible:n-focus-base n-disabled:n-disabled"
-  >
-    <slot name="icon">
-      <NIcon v-if="icon" :icon="icon" class="n-button-icon" />
-    </slot>
-    <slot />
-  </Component>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  to?: string
-  icon?: string
-}>()
-</script>

package/dist/components/NCard.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="n-card n-card-base">
-    <slot />
-  </div>
-</template>