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

package/utils/theme.ts

@@ -1,7 +1,7 @@
 import { cloneDeep, merge } from "lodash-es";
 
-import { vuelessConfig } from "./ui.ts";
-import { isCSR, setCookie } from "./helper.ts";
+import { vuelessConfig } from "./ui";
+import { isCSR, setCookie } from "./helper";
 
 import {
   PX_IN_REM,
@@ -33,7 +33,7 @@ import {
   TEXT_DECREMENT,
   DISABLED_OPACITY,
   DEFAULT_DISABLED_OPACITY,
-} from "../constants.js";
+} from "../constants";
 
 import type {
   NeutralColors,
@@ -43,8 +43,8 @@ import type {
   ThemeConfigOutline,
   ThemeConfigRounding,
   VuelessCssVariables,
-} from "../types.ts";
-import { ColorMode } from "../types.ts";
+} from "../types";
+import { ColorMode } from "../types";
 
 declare interface RootCSSVariableOptions {
   primary: PrimaryColors | string;
@@ -314,10 +314,10 @@ function getText(text?: ThemeConfig["text"]) {
   };
 
   const mergedText = {
-    xs: runtimeText.xs === undefined ? textXs : definedText.xs,
-    sm: runtimeText.sm === undefined ? textSm : definedText.sm,
-    md: runtimeText.md === undefined ? textMd : definedText.md,
-    lg: runtimeText.lg === undefined ? textLg : definedText.lg,
+    xs: runtimeText.xs === undefined && globalText.xs === undefined ? textXs : definedText.xs,
+    sm: runtimeText.sm === undefined && globalText.sm === undefined ? textSm : definedText.sm,
+    md: runtimeText.md === undefined && globalText.md === undefined ? textMd : definedText.md,
+    lg: runtimeText.lg === undefined && globalText.lg === undefined ? textLg : definedText.lg,
   };
 
   if (isCSR && text) {
@@ -346,8 +346,8 @@ function getOutlines(outline?: ThemeConfig["outline"]) {
     lg: `vl-${OUTLINE}-lg`,
   };
 
-  const runtimeOutline = primitiveToObject(outline) as ThemeConfigText;
-  const globalOutline = primitiveToObject(vuelessConfig.outline) as ThemeConfigText;
+  const runtimeOutline = primitiveToObject(outline) as ThemeConfigOutline;
+  const globalOutline = primitiveToObject(vuelessConfig.outline) as ThemeConfigOutline;
 
   const outlineMd = Math.max(0, Number(runtimeOutline.md ?? globalOutline.md ?? DEFAULT_OUTLINE));
   const outlineSm = Math.max(0, outlineMd - OUTLINE_DECREMENT);
@@ -363,11 +363,13 @@ function getOutlines(outline?: ThemeConfig["outline"]) {
     lg: Math.max(0, Number(runtimeOutline.lg ?? getStored(storageKey.lg) ?? globalOutline.lg ?? 0)),
   };
 
+  /* eslint-disable prettier/prettier */
   const mergedOutline = {
-    sm: runtimeOutline.sm === undefined ? outlineSm : definedOutline.sm,
-    md: runtimeOutline.md === undefined ? outlineMd : definedOutline.md,
-    lg: runtimeOutline.lg === undefined ? outlineLg : definedOutline.lg,
+    sm: runtimeOutline.sm === undefined && globalOutline.sm === undefined ? outlineSm : definedOutline.sm,
+    md: runtimeOutline.md === undefined && globalOutline.md === undefined ? outlineMd : definedOutline.md,
+    lg: runtimeOutline.lg === undefined && globalOutline.lg === undefined ? outlineLg : definedOutline.lg,
   };
+  /* eslint-enable prettier/prettier */
 
   if (isCSR && outline) {
     setCookie(storageKey.sm, String(mergedOutline.sm));
@@ -419,13 +421,13 @@ function getRoundings(rounding?: ThemeConfig["rounding"]) {
     md: Math.max(0, Number(runtimeRounding.md ?? getStored(storageKey.md) ?? globalRounding.md ?? 0)),
     lg: Math.max(0, Number(runtimeRounding.lg ?? getStored(storageKey.lg) ?? globalRounding.lg ?? 0)),
   };
-  /* eslint-enable prettier/prettier */
 
   const mergedRounding = {
-    sm: runtimeRounding.sm === undefined ? roundingSm : definedRounding.sm,
-    md: runtimeRounding.md === undefined ? roundingMd : definedRounding.md,
-    lg: runtimeRounding.lg === undefined ? roundingLg : definedRounding.lg,
+    sm: runtimeRounding.sm === undefined && globalRounding.sm === undefined ? roundingSm : definedRounding.sm,
+    md: runtimeRounding.md === undefined && globalRounding.md === undefined ? roundingMd : definedRounding.md,
+    lg: runtimeRounding.lg === undefined && globalRounding.lg === undefined ? roundingLg : definedRounding.lg,
   };
+  /* eslint-enable prettier/prettier */
 
   if (isCSR && rounding) {
     setCookie(storageKey.sm, String(mergedRounding.sm));

package/utils/ui.ts

@@ -2,12 +2,18 @@ import { merge } from "lodash-es";
 import { defineConfig } from "cva";
 import { extendTailwindMerge } from "tailwind-merge";
 
-import { isCSR } from "./helper.ts";
-import { createGetMergedConfig } from "./node/mergeConfigs.js";
-import { COMPONENT_NAME as U_ICON } from "../ui.image-icon/constants.ts";
-import { ICON_NON_PROPS_DEFAULTS, TAILWIND_MERGE_EXTENSION } from "../constants.js";
-
-import type { Config, Defaults, UnknownObject, ComponentNames } from "../types.ts";
+import { isCSR, isSSR } from "./helper";
+import { createGetMergedConfig } from "./node/mergeConfigs";
+import { COMPONENT_NAME as U_ICON } from "../ui.image-icon/constants";
+import {
+  JAVASCRIPT_EXT,
+  TYPESCRIPT_EXT,
+  VUELESS_CONFIG_FILE_NAME,
+  TAILWIND_MERGE_EXTENSION,
+  ICON_NON_PROPS_DEFAULTS,
+} from "../constants";
+
+import type { Config, ComponentDefaults, UnknownObject, ComponentNames } from "../types";
 
 interface MergedConfigOptions {
   defaultConfig: unknown;
@@ -33,13 +39,32 @@ export function setVuelessConfig(config?: Config) {
 if (isCSR) {
   vuelessConfig =
     Object.values(
-      import.meta.glob(["/vueless.config.{js,ts}", "/**/vueless.config.{js,ts}"], {
+      import.meta.glob(["/vueless.config.{js,ts}"], {
         eager: true,
         import: "default",
       }),
     )[0] || {};
 }
 
+if (isSSR) {
+  /* Load Tailwind config from the project root in IIFE (no top-level await). */
+  (async () => {
+    try {
+      vuelessConfig = (
+        await import(/* @vite-ignore */ `/${VUELESS_CONFIG_FILE_NAME}${JAVASCRIPT_EXT}`)
+      ).default;
+
+      if (!vuelessConfig) {
+        vuelessConfig = (
+          await import(/* @vite-ignore */ `/${VUELESS_CONFIG_FILE_NAME}${TYPESCRIPT_EXT}`)
+        ).default;
+      }
+    } catch {
+      vuelessConfig = {} as Config;
+    }
+  })();
+}
+
 /**
  * Extend twMerge (tailwind merge) by vueless and user config:
  */
@@ -79,7 +104,7 @@ export function getDefaults<Props, Config>(defaultConfig: Config, name: Componen
   const componentDefaults = (defaultConfig as UnknownObject).defaults || {};
   const globalDefaults = vuelessConfig.components?.[name]?.defaults || {};
 
-  const defaults = merge({}, componentDefaults, globalDefaults) as Props & Defaults;
+  const defaults = merge({}, componentDefaults, globalDefaults) as Props & ComponentDefaults;
 
   /* Remove non a props defaults. */
   for (const key in defaults) {

package/{directives/clickOutside → v.click-outside}/storybook/docs.mdx

@@ -1,6 +1,6 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
+import { Meta, Title, Subtitle, Description, Controls, Stories } from "@storybook/addon-docs/blocks";
 
-import * as stories from "./stories.ts";
+import * as stories from "./stories";
 
 <Meta of={stories} />
 <Title of={stories} />

package/{directives/clickOutside → v.click-outside}/storybook/stories.ts

@@ -2,11 +2,11 @@ import type { Meta, StoryFn } from "@storybook/vue3-vite";
 
 import { ref, computed, onMounted, useTemplateRef } from "vue";
 
-import UAlert from "../../../ui.text-alert/UAlert.vue";
-import UButton from "../../../ui.button/UButton.vue";
-import UCalendar from "../../../ui.form-calendar/UCalendar.vue";
-import clickOutside from "../vClickOutside.ts";
-import type { ClickCallback } from "../types.ts";
+import UAlert from "../../ui.text-alert/UAlert.vue";
+import UButton from "../../ui.button/UButton.vue";
+import UCalendar from "../../ui.form-calendar/UCalendar.vue";
+import clickOutside from "../vClickOutside";
+import type { ClickCallback } from "../types";
 
 /**
  * The `v-click-outside` directive. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/directives/clickOutside)

package/{directives/clickOutside → v.click-outside}/vClickOutside.ts

@@ -8,7 +8,7 @@ import type {
   ClickOutsideTargetElement,
   DirectiveBindingCallback,
   DirectiveBindingOptions,
-} from "./types.ts";
+} from "./types";
 
 function isElement(element: EventTarget | null) {
   return element instanceof HTMLElement || element instanceof SVGElement;

package/v.tooltip/storybook/docs.mdx

@@ -0,0 +1,47 @@
+import { Meta, Title, Subtitle, Description, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
+
+import * as stories from "./stories";
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Theme Configuration
+You can use the default `vueless` theme or create your own [custom one](https://atomiks.github.io/tippyjs/v6/themes/) via the global Vueless config:
+
+<Source code={`
+  directives: {
+    tooltip: {
+      theme: "custom",
+    },
+  },
+`} language="jsx" dark />
+
+## Customizing Styles
+To customize the default `vueless` or your own custom theme, simply update your CSS as shown below:
+
+<Source code={`
+  .tippy-box[data-theme~="custom"] {
+    background-color: var(--vl-neutral-accented);
+    color: var(--vl-text-inverted);
+  }
+  
+  .tippy-box[data-theme~="custom"][data-placement^="top"] > .tippy-arrow:before {
+    border-top-color: var(--vl-neutral-accented);
+  }
+  
+  .tippy-box[data-theme~="custom"][data-placement^="bottom"] > .tippy-arrow:before {
+    border-bottom-color: var(--vl-neutral-accented);
+  }
+  
+  .tippy-box[data-theme~="custom"][data-placement^="left"] > .tippy-arrow:before {
+    border-left-color: var(--vl-neutral-accented);
+  }
+  
+  .tippy-box[data-theme~="custom"][data-placement^="right"] > .tippy-arrow:before {
+    border-right-color: var(--vl-neutral-accented);
+  }
+`} language="jsx" dark />

package/{directives/tooltip → v.tooltip}/storybook/stories.ts

@@ -1,11 +1,8 @@
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 
-import UIcon from "../../../ui.image-icon/UIcon.vue";
-import UCol from "../../../ui.container-col/UCol.vue";
-import UAlert from "../../../ui.text-alert/UAlert.vue";
-import ULink from "../../../ui.button-link/ULink.vue";
-import UText from "../../../ui.text-block/UText.vue";
-import tooltip from "../vTooltip.ts";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import tooltip from "../vTooltip";
 
 import type { Props } from "tippy.js";
 
@@ -35,7 +32,7 @@ const DefaultTemplate: StoryFn<VTooltipArgs> = (args: VTooltipArgs) => ({
 });
 
 const TooltipSettingsTemplate: StoryFn<VTooltipArgs> = (args: VTooltipArgs) => ({
-  components: { UIcon, UCol, UAlert, ULink, UText },
+  components: { UIcon, UCol },
   directives: { tooltip },
   setup() {
     return { args };
@@ -45,7 +42,13 @@ const TooltipSettingsTemplate: StoryFn<VTooltipArgs> = (args: VTooltipArgs) => (
       <UIcon
         interactive
         name="sentiment_satisfied"
-        v-tooltip="{ content: '<b>Tooltip</b>', placement: 'bottom', allowHTML: true }"
+        v-tooltip="{
+          content: '<b>Tooltip</b>',
+          placement: 'bottom',
+          allowHTML: true,
+          hideOnClick: true,
+          trigger: 'click'
+        }"
       />
     </UCol>
   `,
@@ -60,9 +63,9 @@ TooltipSettings.parameters = {
   docs: {
     description: {
       story: `
-This story demonstrates how to pass custom options to the v-tooltip directive,
-including HTML content and tooltip placement. For more settings,
-refer to the <a href="https://atomiks.github.io/tippyjs/v6/all-props/" target="_blank" class="!no-underline">Tippy.js documentation</a>.
+This example shows how to configure the \`v-tooltip\` directive with custom options,
+including HTML content, specific placement, click-triggered display, and persistent visibility after a click.
+For a full list of available settings, refer to the <a href="https://atomiks.github.io/tippyjs/v6/all-props/" target="_blank" class="!no-underline">Tippy.js documentation</a>.
       `,
     },
   },

package/{directives/tooltip → v.tooltip}/vTooltip.ts

@@ -1,26 +1,21 @@
 import tippy from "tippy.js";
 import { merge } from "lodash-es";
 
-import { vuelessConfig } from "../../utils/ui.ts";
-import { isCSR, isSSR } from "../../utils/helper.ts";
+import { vuelessConfig } from "../utils/ui";
+import { isCSR, isSSR } from "../utils/helper";
 
 import type { DefaultProps, Instance as TippyInstance, Props as TippyProps } from "tippy.js";
-import type {
-  TippyTargetElement,
-  DirectiveBindingContent,
-  DirectiveBindingProps,
-} from "./types.ts";
+import type { TippyTargetElement, DirectiveBindingContent, DirectiveBindingProps } from "./types";
 
 let settings: Partial<DefaultProps> = {};
 
 if (isCSR) {
   import("tippy.js/dist/tippy.css");
-  import("tippy.js/themes/light.css");
   import("tippy.js/animations/shift-away.css");
 
   const defaultSettings = {
     arrow: true,
-    theme: "light",
+    theme: "vueless",
     animation: "shift-away",
   };
 

package/directives/index.js

@@ -1,7 +0,0 @@
-/**
- * The file should have `.js` extension to allow import from the folder without adding `/index.ts` in the end.
- * Vite doesn't recognize `.ts` files without extension.
- */
-
-export { default as vTooltip } from "./tooltip/vTooltip.ts";
-export { default as vClickOutside } from "./clickOutside/vClickOutside.ts";

package/directives/tooltip/storybook/docs.mdx

@@ -1,10 +0,0 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
-
-import * as stories from "./stories.ts";
-
-<Meta of={stories} />
-<Title of={stories} />
-<Subtitle of={stories} />
-<Description of={stories} />
-<Controls of={stories.Default} />
-<Stories of={stories} />

package/utils/node/dynamicStories.js

@@ -1,62 +0,0 @@
-import path from "node:path";
-import { cwd } from "node:process";
-import { existsSync, promises as fsPromises } from "node:fs";
-
-import { vuelessConfig } from "./vuelessConfig.js";
-import { COMPONENTS } from "../../constants.js";
-
-const STORYBOOK_DIR = "storybook";
-
-export async function hideHiddenStories(srcDir) {
-  for await (const [componentName, componentDir] of Object.entries(COMPONENTS)) {
-    const componentGlobalConfig = vuelessConfig.components?.[componentName];
-    const isHiddenStories = componentGlobalConfig && componentGlobalConfig.storybook === false;
-
-    if (isHiddenStories) {
-      await hideComponentStories(path.join(cwd(), srcDir, componentDir, STORYBOOK_DIR));
-    }
-  }
-}
-
-export async function showHiddenStories(srcDir) {
-  for await (const componentDir of Object.values(COMPONENTS)) {
-    await showComponentStories(path.join(cwd(), srcDir, componentDir, STORYBOOK_DIR));
-  }
-}
-
-async function hideComponentStories(storybookPath) {
-  if (existsSync(storybookPath)) {
-    const storyFiles = await fsPromises.readdir(storybookPath);
-    const visibleFiles = storyFiles.filter((storybookFile) => !storybookFile.includes("hidden"));
-
-    await Promise.all(
-      visibleFiles.map((storybookFile) => {
-        const [fileName, extension] = storybookFile.split(".");
-
-        return fsPromises.rename(
-          path.join(storybookPath, storybookFile),
-          path.join(storybookPath, `${fileName}_hidden.${extension}`),
-        );
-      }),
-    );
-  }
-}
-
-async function showComponentStories(storybookPath) {
-  if (existsSync(storybookPath)) {
-    const storyFiles = await fsPromises.readdir(storybookPath);
-    const hiddenFiles = storyFiles.filter((storybookFile) => storybookFile.includes("hidden"));
-
-    await Promise.all(
-      hiddenFiles.map((storybookFile) => {
-        const [fileName, extension] = storybookFile.split(".");
-        const [originalFileName] = fileName.split("_");
-
-        return fsPromises.rename(
-          path.join(storybookPath, storybookFile),
-          path.join(storybookPath, `${originalFileName}.${extension}`),
-        );
-      }),
-    );
-  }
-}

package/utils/tailwindConfig.ts

@@ -1,36 +0,0 @@
-import { isSSR, isCSR } from "./helper.ts";
-
-import type { Config } from "tailwindcss";
-
-/**
- * Load Tailwind config from the project root.
- * Both for server and client side renderings.
- * IIFE for SSR is used to prevent top level await issue.
- */
-export let tailwindConfig: Config;
-
-if (isSSR) {
-  /* Load Tailwind config from the project root in IIFE (no top-level await). */
-  (async () => {
-    try {
-      const filePath = `${process.cwd()}/tailwind.config`;
-
-      tailwindConfig = (await import(/* @vite-ignore */ `${filePath}.js`)).default;
-
-      if (!tailwindConfig) {
-        tailwindConfig = (await import(/* @vite-ignore */ `${filePath}.ts`)).default;
-      }
-    } catch {
-      tailwindConfig = {} as Config;
-    }
-  })();
-}
-
-if (isCSR) {
-  tailwindConfig = Object.values(
-    import.meta.glob(["/tailwind.config.{js,ts}", "/**/tailwind.config.{js,ts}"], {
-      eager: true,
-      import: "default",
-    }),
-  )[0] as Config;
-}