vueless 1.1.1-beta.6 → 1.1.1-beta.60

package/index.ts

@@ -1,27 +1,44 @@
 /* eslint-disable prettier/prettier */
-import { createLocale, LocaleSymbol } from "./composables/useLocale.ts";
-import { createLoaderOverlay, LoaderOverlaySymbol } from "./ui.loader-overlay/useLoaderOverlay.ts";
-import { createLoaderProgress, LoaderProgressSymbol } from "./ui.loader-progress/useLoaderProgress.ts";
-import { setTheme } from "./utils/theme.ts";
-import { setVuelessConfig } from "./utils/ui.ts";
+import { createLocale, LocaleSymbol } from "./composables/useLocale";
+import { createLoaderOverlay, LoaderOverlaySymbol } from "./ui.loader-overlay/useLoaderOverlay";
+import { createLoaderProgress, LoaderProgressSymbol } from "./ui.loader-progress/useLoaderProgress";
+import { setTheme } from "./utils/theme";
+import { setVuelessConfig } from "./utils/ui";
 
 import type { App } from "vue"
 import type { CreateVuelessOptions } from "./types.ts"
 
-export { setTheme, cssVar } from "./utils/theme.ts";
-export { cx, cva, compose, getDefaults } from "./utils/ui.ts";
-export { getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook.ts";
-export { isSSR, isCSR, getRandomId, setTitle, createDebounce, hasSlotContent } from "./utils/helper.ts";
-export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform.ts";
-export { createVueI18nAdapter } from "./adapter.locale/vue-i18n.ts";
-export { createVuelessAdapter } from "./adapter.locale/vueless.ts";
-export { default as defaultEnLocale } from "./adapter.locale/locales/en.ts";
-export { default as useUI } from "./composables/useUI.ts";
-export { useLocale } from "./composables/useLocale.ts";
-export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress.ts";
-export { loaderProgressOn, loaderProgressOff } from "./ui.loader-progress/utilLoaderProgress.ts";
-export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay.ts";
-export { loaderOverlayOn, loaderOverlayOff } from "./ui.loader-overlay/utilLoaderOverlay.ts";
+/* utils */
+export {
+  isSSR,
+  isCSR,
+  setTitle,
+  getRandomId,
+  getCookie,
+  setCookie,
+  deleteCookie,
+  createDebounce,
+  hasSlotContent
+} from "./utils/helper";
+export { getStored, setTheme, cssVar } from "./utils/theme";
+export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
+export { cx, cva, compose, getDefaults, setVuelessConfig, setColor, vuelessConfig } from "./utils/ui";
+export { getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
+/* adapters */
+export { default as defaultEnLocale } from "./adapter.locale/locales/en";
+export { createVuelessAdapter } from "./adapter.locale/vueless";
+export { createVueI18nAdapter } from "./adapter.locale/vue-i18n";
+/* composables */
+export { useLocale } from "./composables/useLocale";
+export { default as useUI } from "./composables/useUI";
+export { useDarkMode } from "./composables/useDarkMode";
+export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress";
+export { useMutationObserver } from "./composables/useMutationObserver";
+/* loaders */
+export { loaderProgressOn, loaderProgressOff } from "./ui.loader-progress/utilLoaderProgress";
+export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
+export { loaderOverlayOn, loaderOverlayOff } from "./ui.loader-overlay/utilLoaderOverlay";
+/* notifications */
 export {
   notify,
   notifySuccess,
@@ -30,9 +47,130 @@ export {
   clearNotifications,
   setDelayedNotify,
   getDelayedNotify,
-} from "./ui.text-notify/utilNotify.ts";
+} from "./ui.text-notify/utilNotify";
+export { NotificationType, NotificationPosition, NotificationDuration } from "./ui.text-notify/constants";
+/* directives */
+export { default as vTooltip }  from "./v.tooltip/vTooltip";
+export { default as vClickOutside }  from "./v.click-outside/vClickOutside";
+/* components */
+/* Buttons & Links */
+export { default as UButton } from "./ui.button/UButton.vue";
+export { default as ULink } from "./ui.button-link/ULink.vue";
+export { default as UToggle } from "./ui.button-toggle/UToggle.vue";
+/* Dropdowns */
+export { default as UDropdownButton } from "./ui.dropdown-button/UDropdownButton.vue";
+export { default as UDropdownBadge } from "./ui.dropdown-badge/UDropdownBadge.vue";
+export { default as UDropdownLink } from "./ui.dropdown-link/UDropdownLink.vue";
+/* Form Inputs & Controls */
+export { default as UInput } from "./ui.form-input/UInput.vue";
+export { default as UInputFile } from "./ui.form-input-file/UInputFile.vue";
+export { default as UInputNumber } from "./ui.form-input-number/UInputNumber.vue";
+export { default as UInputCounter } from "./ui.form-input-counter/UInputCounter.vue";
+export { default as UInputPassword } from "./ui.form-input-password/UInputPassword.vue";
+export { default as UInputRating } from "./ui.form-input-rating/UInputRating.vue";
+export { default as UInputSearch } from "./ui.form-input-search/UInputSearch.vue";
+export { default as UTextarea } from "./ui.form-textarea/UTextarea.vue";
+export { default as USelect } from "./ui.form-select/USelect.vue";
+export { default as UListbox } from "./ui.form-listbox/UListbox.vue";
+export { default as UCheckbox } from "./ui.form-checkbox/UCheckbox.vue";
+export { default as UCheckboxGroup } from "./ui.form-checkbox-group/UCheckboxGroup.vue";
+export { default as UCheckboxMultiState } from "./ui.form-checkbox-multi-state/UCheckboxMultiState.vue";
+export { default as USwitch } from "./ui.form-switch/USwitch.vue";
+export { default as URadio } from "./ui.form-radio/URadio.vue";
+export { default as URadioGroup } from "./ui.form-radio-group/URadioGroup.vue";
+export { default as UCalendar } from "./ui.form-calendar/UCalendar.vue";
+export { default as UDatePicker } from "./ui.form-date-picker/UDatePicker.vue";
+export { default as UDatePickerRange } from "./ui.form-date-picker-range/UDatePickerRange.vue";
+export { default as UColorPicker } from "./ui.form-color-picker/UColorPicker.vue";
+export { default as ULabel } from "./ui.form-label/ULabel.vue";
+/* Text & Content */
+export { default as UHeader } from "./ui.text-header/UHeader.vue";
+export { default as UText } from "./ui.text-block/UText.vue";
+export { default as UAlert } from "./ui.text-alert/UAlert.vue";
+export { default as UNotify } from "./ui.text-notify/UNotify.vue";
+export { default as UNumber } from "./ui.text-number/UNumber.vue";
+export { default as UFile } from "./ui.text-file/UFile.vue";
+export { default as UFiles } from "./ui.text-files/UFiles.vue";
+export { default as UEmpty } from "./ui.text-empty/UEmpty.vue";
+export { default as UBadge } from "./ui.text-badge/UBadge.vue";
+/* Containers */
+export { default as UDivider } from "./ui.container-divider/UDivider.vue";
+export { default as UCol } from "./ui.container-col/UCol.vue";
+export { default as URow } from "./ui.container-row/URow.vue";
+export { default as UGroup } from "./ui.container-group/UGroup.vue";
+export { default as UGroups } from "./ui.container-groups/UGroups.vue";
+export { default as UAccordion } from "./ui.container-accordion/UAccordion.vue";
+export { default as UCard } from "./ui.container-card/UCard.vue";
+export { default as UModal } from "./ui.container-modal/UModal.vue";
+export { default as UModalConfirm } from "./ui.container-modal-confirm/UModalConfirm.vue";
+export { default as UPage } from "./ui.container-page/UPage.vue";
+/* Images and Icons */
+export { default as UIcon } from "./ui.image-icon/UIcon.vue";
+export { default as UAvatar } from "./ui.image-avatar/UAvatar.vue";
+/* Data */
+export { default as UTable } from "./ui.data-table/UTable.vue";
+export { default as UDataList } from "./ui.data-list/UDataList.vue";
+/* Navigation */
+export { default as UTab } from "./ui.navigation-tab/UTab.vue";
+export { default as UTabs } from "./ui.navigation-tabs/UTabs.vue";
+export { default as UProgress } from "./ui.navigation-progress/UProgress.vue";
+export { default as UPagination } from "./ui.navigation-pagination/UPagination.vue";
+export { default as UBreadcrumbs } from "./ui.navigation-breadcrumbs/UBreadcrumbs.vue";
+/* Loaders and Skeletons */
+export { default as ULoader } from "./ui.loader/ULoader.vue";
+export { default as ULoaderProgress } from "./ui.loader-progress/ULoaderProgress.vue";
+export { default as ULoaderOverlay } from "./ui.loader-overlay/ULoaderOverlay.vue";
+export { default as USkeleton } from "./ui.skeleton/USkeleton.vue";
+export { default as USkeletonText } from "./ui.skeleton-text/USkeletonText.vue";
+export { default as USkeletonInput } from "./ui.skeleton-input/USkeletonInput.vue";
+export { default as USkeletonChoice } from "./ui.skeleton-choice/USkeletonChoice.vue";
+/* Other */
+export { default as UDot } from "./ui.other-dot/UDot.vue";
+export { default as UChip } from "./ui.other-chip/UChip.vue";
+export { default as UThemeColorToggle } from "./ui.other-theme-color-toggle/UThemeColorToggle.vue";
 /* eslint-enable prettier/prettier */
 
+/* types */
+export type {
+  /* Core configuration types */
+  Config,
+  ThemeConfig,
+  ThemeConfigText,
+  ThemeConfigRounding,
+  ThemeConfigOutline,
+  NestedComponent,
+  ComponentConfig,
+  ComponentDefaults,
+  CreateVuelessOptions,
+  /* Color and theme types */
+  StateColors,
+  PrimaryColors,
+  NeutralColors,
+  VuelessCssVariables,
+  /* Component and Directive types */
+  Directives,
+  Components,
+  ComponentNames,
+  /* Utility types */
+  UnknownType,
+  UnknownArray,
+  UnknownObject,
+  CVACompoundVariants,
+  CVA,
+  /* Vue component utility types */
+  ComponentType,
+  ComponentProps,
+  ComponentSlots,
+  ComponentEmit,
+  ComponentExposed,
+  /* Locale types */
+  LocaleOptions,
+  LocaleInstance,
+  LocaleMessages,
+} from "./types";
+/* Export enums directly (not as types) */
+export { ColorMode } from "./types";
+
 export function createVueless(options: CreateVuelessOptions = {}) {
   const i18n = createLocale(options.i18n);
   const loaderOverlay = createLoaderOverlay();

package/modules.d.ts

@@ -0,0 +1,33 @@
+declare module "*.svg?url" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.svg?raw" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.svg?component" {
+  import type { DefineComponent, SVGAttributes } from "vue";
+  const component: DefineComponent<SVGAttributes> | undefined;
+  export default component;
+}
+
+declare module "*.svg?skipsvgo" {
+  import type { DefineComponent, SVGAttributes } from "vue";
+  const component: DefineComponent<SVGAttributes> | undefined;
+  export default component;
+}
+
+declare module "virtual:vueless/icons" {
+  import type { UnknownArray } from "./types";
+  export const cachedIcons: UnknownArray;
+}
+
+/* Fake minimal types just to suppress errors */
+declare module "virtual:vueless/vue-i18n" {
+  import type { UnknownObject } from "./types";
+  export type I18n = UnknownObject;
+  export type VueMessageType = UnknownObject;
+}

package/package.json

@@ -1,30 +1,28 @@
 {
   "name": "vueless",
-  "version": "1.1.1-beta.6",
+  "version": "1.1.1-beta.60",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
-  "style": "tailwind.css",
-  "main": "index.ts",
-  "type": "module",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "pre:start": "npx node .scripts/icons",
     "dev:docs": "storybook dev -p 6006 --docs --no-open",
     "dev": "storybook dev -p 6006 --no-open",
     "build": "storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
     "ts:check": "vue-tsc --build --force",
-    "release:prepare": "npm run pre:start && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/ && npx node .scripts/writeLocales",
+    "release:icons": "npx node .scripts/icons",
+    "release:types": "rm -f ./node_modules/.tmp/tsconfig.app.tsbuildinfo && npx tsc --project tsconfig.build.json",
+    "release:prepare": "npm run release:icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/ && npx node .scripts/writeLocales && npm run release:types",
     "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
     "release:patch": "release-it patch --ci --npm.publish --git.tag --github.release",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
     "release:major": "release-it major --ci --npm.publish --git.tag --github.release",
-    "lint": "eslint --no-fix src/ .storybook/",
-    "lint:fix": "eslint --fix src/ .storybook/",
+    "lint": "eslint --no-fix src/ test/ .storybook/ .vueless/",
+    "lint:fix": "eslint --fix src/ test/ .storybook/ .vueless/",
     "lint:ci": "eslint --no-fix --max-warnings=0",
     "test": "vitest",
     "test:ci": "vitest --run"
@@ -35,6 +33,7 @@
   "dependencies": {
     "@tailwindcss/postcss": "^4.1.11",
     "@tailwindcss/vite": "^4.1.11",
+    "@types/lodash-es": "^4.17.12",
     "cva": "^1.0.0-beta.4",
     "lodash-es": "^4.17.21",
     "svgo": "^4.0.0",
@@ -49,7 +48,6 @@
     "@release-it/bumper": "^7.0.5",
     "@tsconfig/node20": "^20.1.6",
     "@types/jsdom": "^21.1.7",
-    "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.1.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitest/eslint-plugin": "^1.3.4",
@@ -69,10 +67,35 @@
     "vite": "^7.0.6",
     "vitest": "^3.2.4",
     "vue": "^3.5.18",
-    "vue-i18n": "^11.1.11",
     "vue-router": "^4.5.1",
     "vue-tsc": "^3.0.4"
   },
+  "sideEffects": false,
+  "style": "tailwind.css",
+  "types": "index.d.ts",
+  "main": "index.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./index.ts",
+      "types": "./index.d.ts",
+      "style": "./tailwind.css"
+    },
+    "./v.*": "./v.*",
+    "./ui.*": "./ui.*",
+    "./utils/*": "./utils/*",
+    "./utils/node/*": "./utils/node/*",
+    "./composables/*": "./composables/*",
+    "./constants": "./constants.js",
+    "./constants.js": "./constants.js",
+    "./plugin-vite": "./plugin-vite.js",
+    "./plugin-vite.js": "./plugin-vite.js",
+    "./tailwind.css": "./tailwind.css",
+    "./types": "./types.ts",
+    "./modules": {
+      "types": "./modules.d.ts"
+    }
+  },
   "resolutions": {
     "jackspeak": "2.3.6"
   },

package/plugin-vite.d.ts

@@ -5,7 +5,7 @@ declare function Vueless(options?: {
   env?: string;
   debug?: boolean;
   include?: string[];
-  mirrorCacheDir?: string;
+  basePath?: string;
   svgoConfig?: Config;
   svgo?: boolean;
   defaultImport?: "url" | "raw" | "component";
@@ -24,30 +24,3 @@ declare module "vueless/plugin-vite" {
 declare module "vueless/plugin-vite.js" {
   export { Vueless, UnpluginComponents, TailwindCSS };
 }
-
-declare module "*.svg?component" {
-  import type { FunctionalComponent, SVGAttributes } from "vue";
-  const component: FunctionalComponent<SVGAttributes>;
-  export default component;
-}
-
-declare module "*.svg?url" {
-  const src: string;
-  export default src;
-}
-
-declare module "*.svg?raw" {
-  const content: string;
-  export default content;
-}
-
-declare module "*.svg?skipsvgo" {
-  import type { FunctionalComponent, SVGAttributes } from "vue";
-  const component: FunctionalComponent<SVGAttributes>;
-  export default component;
-}
-
-declare module "virtual:vueless/icons" {
-  import type { UnknownArray } from "./types.ts";
-  export const cachedIcons: UnknownArray;
-}

package/plugin-vite.js

@@ -20,7 +20,6 @@ import { createTailwindSafelist, clearTailwindSafelist } from "./utils/node/tail
 import { componentResolver, directiveResolver } from "./utils/node/vuelessResolver.js";
 import { setCustomPropTypes, removeCustomPropTypes } from "./utils/node/dynamicProps.js";
 import { buildWebTypes } from "./utils/node/webTypes.js";
-import { hideHiddenStories, showHiddenStories } from "./utils/node/dynamicStories.js";
 import {
   getNuxtDirs,
   getVueDirs,
@@ -61,7 +60,7 @@ export const UnpluginComponents = (options) =>
   – Loads SVG images as a Vue component.
  */
 export const Vueless = function (options = {}) {
-  const { debug, env, include, mirrorCacheDir } = options;
+  const { debug, env, include, basePath } = options;
 
   const isInternalEnv = env === INTERNAL_ENV;
   const isStorybookEnv = env === STORYBOOK_ENV;
@@ -81,12 +80,11 @@ export const Vueless = function (options = {}) {
   /* if server stopped by developer (Ctrl+C) */
   process.on("SIGINT", async () => {
     if (isInternalEnv || isStorybookEnv) {
-      await showHiddenStories(vuelessSrcDir);
       await removeCustomPropTypes(vuelessSrcDir);
     }
 
     /* remove cached icons */
-    await removeIconsCache(mirrorCacheDir);
+    await removeIconsCache(basePath);
 
     /* clear tailwind safelist */
     await clearTailwindSafelist(debug);
@@ -97,16 +95,6 @@ export const Vueless = function (options = {}) {
     process.exit(DEFAULT_EXIT_CODE);
   });
 
-  /* cache vueless built-in and project icons */
-  async function prepareIcons() {
-    await removeIconsCache(mirrorCacheDir);
-    await createIconsCache({ env, debug, targetFiles });
-
-    if (isNuxtModuleEnv) {
-      await copyIconsCache(mirrorCacheDir);
-    }
-  }
-
   return {
     name: "vite-plugin-vue-vueless",
     enforce: "pre",
@@ -116,33 +104,50 @@ export const Vueless = function (options = {}) {
         "process.env": {},
       },
       optimizeDeps: {
-        include: ["vueless/directives/**/*.ts"],
+        include: isInternalEnv
+          ? []
+          : [
+              "vueless",
+              "vueless/types",
+              "vueless/constants",
+              "vueless/constants.js",
+              "vueless/v.tooltip/vTooltip.ts",
+              "vueless/v.click-outside/vClickOutside.ts",
+            ],
       },
     }),
 
-    configResolved: async () => {
+    configResolved: async (config) => {
       if (!isNuxtModuleEnv) {
+        /* auto import user configs */
+        await autoImportUserConfigs();
+
         /* merge and cache component configs. */
         await cacheMergedConfigs(vuelessSrcDir);
       }
 
-      if (!isInternalEnv) {
-        await autoImportUserConfigs();
-      }
-
       await buildWebTypes(vuelessSrcDir);
       await setCustomPropTypes(vuelessSrcDir);
 
-      if (isInternalEnv || isStorybookEnv) {
-        await showHiddenStories(vuelessSrcDir);
-        await hideHiddenStories(vuelessSrcDir);
-      }
-
       /* collect used in project colors for tailwind safelist */
       await createTailwindSafelist({ env, srcDir: vuelessSrcDir, targetFiles, debug });
 
       /* cache vueless built-in and project icons */
-      await prepareIcons();
+      await removeIconsCache(basePath);
+      await createIconsCache({ env, debug, targetFiles });
+
+      if (isNuxtModuleEnv) {
+        await copyIconsCache(basePath);
+      }
+
+      /* suppress rollup warnings */
+      const originalOnWarn = config.build.rollupOptions.onwarn;
+
+      config.build.rollupOptions.onwarn = (warning, warn) => {
+        // eslint-disable-next-line prettier/prettier
+        if (warning.code === "SOURCEMAP_BROKEN" && warning.plugin === "@tailwindcss/vite:generate:build") return;
+        originalOnWarn ? originalOnWarn(warning, warn) : warn(warning);
+      };
     },
 
     /* update icons cache in dev env */
@@ -168,7 +173,7 @@ export const Vueless = function (options = {}) {
         await createIconsCache({ env, debug, targetFiles: [file] });
 
         if (isNuxtModuleEnv) {
-          await copyIconsCache(mirrorCacheDir);
+          await copyIconsCache(basePath);
         }
 
         reloadServerOnIconsCacheUpdate(server);
@@ -195,7 +200,7 @@ export const Vueless = function (options = {}) {
 
     /* remove cached icons */
     buildEnd: async () => {
-      await removeIconsCache(mirrorCacheDir);
+      await removeIconsCache(basePath);
     },
   };
 };

package/tailwind.css

@@ -131,3 +131,28 @@
   outline-style: var(--tw-outline-style);
   outline-width: var(--vl-outline-lg);
 }
+
+/* ------ Tippy.js Vueless default theme ------ */
+.tippy-box[data-theme~="vueless"] {
+  background-color: var(--vl-bg-inverted);
+  color: var(--vl-text-inverted);
+}
+
+.tippy-box[data-theme~="vueless"][data-placement^="top"] > .tippy-arrow:before {
+  border-top-color: var(--vl-bg-inverted);
+}
+
+.tippy-box[data-theme~="vueless"][data-placement^="bottom"] > .tippy-arrow:before {
+  border-bottom-color: var(--vl-bg-inverted);
+}
+
+.tippy-box[data-theme~="vueless"][data-placement^="left"] > .tippy-arrow:before {
+  border-left-color: var(--vl-bg-inverted);
+}
+
+.tippy-box[data-theme~="vueless"][data-placement^="right"] > .tippy-arrow:before {
+  border-right-color: var(--vl-bg-inverted);
+}
+
+
+