@adyen/bento-mcp 0.11.0 → 0.12.0

package/dist/main.js

@@ -3644,49 +3644,49 @@ var require_fast_uri = __commonJS({
       schemelessOptions.skipEscape = true;
       return serialize(resolved, schemelessOptions);
     }
-    function resolveComponent(base, relative, options, skipNormalization) {
+    function resolveComponent(base, relative2, options, skipNormalization) {
       const target = {};
       if (!skipNormalization) {
         base = parse3(serialize(base, options), options);
-        relative = parse3(serialize(relative, options), options);
+        relative2 = parse3(serialize(relative2, options), options);
       }
       options = options || {};
-      if (!options.tolerant && relative.scheme) {
-        target.scheme = relative.scheme;
-        target.userinfo = relative.userinfo;
-        target.host = relative.host;
-        target.port = relative.port;
-        target.path = removeDotSegments(relative.path || "");
-        target.query = relative.query;
+      if (!options.tolerant && relative2.scheme) {
+        target.scheme = relative2.scheme;
+        target.userinfo = relative2.userinfo;
+        target.host = relative2.host;
+        target.port = relative2.port;
+        target.path = removeDotSegments(relative2.path || "");
+        target.query = relative2.query;
       } else {
-        if (relative.userinfo !== void 0 || relative.host !== void 0 || relative.port !== void 0) {
-          target.userinfo = relative.userinfo;
-          target.host = relative.host;
-          target.port = relative.port;
-          target.path = removeDotSegments(relative.path || "");
-          target.query = relative.query;
+        if (relative2.userinfo !== void 0 || relative2.host !== void 0 || relative2.port !== void 0) {
+          target.userinfo = relative2.userinfo;
+          target.host = relative2.host;
+          target.port = relative2.port;
+          target.path = removeDotSegments(relative2.path || "");
+          target.query = relative2.query;
         } else {
-          if (!relative.path) {
+          if (!relative2.path) {
             target.path = base.path;
-            if (relative.query !== void 0) {
-              target.query = relative.query;
+            if (relative2.query !== void 0) {
+              target.query = relative2.query;
             } else {
               target.query = base.query;
             }
           } else {
-            if (relative.path[0] === "/") {
-              target.path = removeDotSegments(relative.path);
+            if (relative2.path[0] === "/") {
+              target.path = removeDotSegments(relative2.path);
             } else {
               if ((base.userinfo !== void 0 || base.host !== void 0 || base.port !== void 0) && !base.path) {
-                target.path = "/" + relative.path;
+                target.path = "/" + relative2.path;
               } else if (!base.path) {
-                target.path = relative.path;
+                target.path = relative2.path;
               } else {
-                target.path = base.path.slice(0, base.path.lastIndexOf("/") + 1) + relative.path;
+                target.path = base.path.slice(0, base.path.lastIndexOf("/") + 1) + relative2.path;
               }
               target.path = removeDotSegments(target.path);
             }
-            target.query = relative.query;
+            target.query = relative2.query;
           }
           target.userinfo = base.userinfo;
           target.host = base.host;
@@ -3694,7 +3694,7 @@ var require_fast_uri = __commonJS({
         }
         target.scheme = base.scheme;
       }
-      target.fragment = relative.fragment;
+      target.fragment = relative2.fragment;
       return target;
     }
     function equal(uriA, uriB, options) {
@@ -30179,10 +30179,22 @@ var StdioServerTransport = class {
 };
 
 // packages/mcp/src/get-file.ts
-import { readFileSync } from "node:fs";
-import { resolve } from "node:path";
+import { readdirSync, readFileSync } from "node:fs";
+import { isAbsolute, join, relative, resolve, sep } from "node:path";
+var assetsPath = resolve(import.meta.dirname, "assets");
+function resolveAssetPath(filePath) {
+  const absolutePath = resolve(assetsPath, filePath);
+  const relativePath = relative(assetsPath, absolutePath);
+  if (relativePath === ".." || relativePath.startsWith(`..${sep}`) || isAbsolute(relativePath)) {
+    return null;
+  }
+  return absolutePath;
+}
 function getFile(filePath) {
-  const absolutePath = resolve(import.meta.dirname, "assets", filePath);
+  const absolutePath = resolveAssetPath(filePath);
+  if (!absolutePath) {
+    return "Error: Access denied. Path is outside of assets directory.";
+  }
   try {
     return readFileSync(absolutePath, "utf-8");
   } catch (error48) {
@@ -30190,6 +30202,34 @@ function getFile(filePath) {
     return `Error: File ${filePath} does not exist. Details: ${error48 instanceof Error ? error48.message : String(error48)}`;
   }
 }
+function getFiles(directoryPath) {
+  const absoluteDirectoryPath = resolveAssetPath(directoryPath);
+  if (!absoluteDirectoryPath) {
+    console.error(`Access denied for directory path: ${directoryPath}`);
+    return [];
+  }
+  const files = [];
+  const walk = (currentPath) => {
+    for (const entry of readdirSync(currentPath, { withFileTypes: true })) {
+      const entryPath = join(currentPath, entry.name);
+      if (entry.isDirectory()) {
+        walk(entryPath);
+      } else {
+        files.push({
+          path: relative(absoluteDirectoryPath, entryPath),
+          content: readFileSync(entryPath, "utf-8")
+        });
+      }
+    }
+  };
+  try {
+    walk(absoluteDirectoryPath);
+    return files.sort((first, second) => first.path.localeCompare(second.path));
+  } catch (error48) {
+    console.error(`Error reading directory at ${absoluteDirectoryPath}:`, error48);
+    return [];
+  }
+}
 
 // packages/mcp/src/tools/get-all-components.ts
 function addGetAllComponents(server) {
@@ -30231,6 +30271,11 @@ function addGetComponent(server) {
       }
     },
     async ({ componentNames }) => {
+      const registryContent = getFile("components.json");
+      if (registryContent.startsWith("Error:")) {
+        return { content: [{ type: "text", text: registryContent }] };
+      }
+      const publicComponents = new Set(JSON.parse(registryContent));
       const output = [
         "I have retrieved the requested component context. For each component, I have provided four sections:",
         "1. **Documentation (.docs.mdx)**: Explains how to use the component, props, and design guidelines.",
@@ -30241,6 +30286,12 @@ function addGetComponent(server) {
       ];
       const basePath = "components";
       for (const component of componentNames) {
+        if (!publicComponents.has(component)) {
+          output.push(`# Component: ${component}
+
+Error: Component is not publicly exported by Bento.`);
+          continue;
+        }
         const docsContent = getFile(`${basePath}/${component}/${component}.docs.mdx`);
         const storiesContent = getFile(`${basePath}/${component}/${component}.stories.ts`);
         const vueContent = getFile(`${basePath}/${component}/${component}.vue`);
@@ -30330,18 +30381,72 @@ function addGetDocs(server) {
   );
 }
 
+// packages/mcp/src/data/color-alias-metadata.ts
+var colorAliasMetadata = {
+  source: "Bento color alias documentation",
+  groups: [
+    {
+      name: "background",
+      prefix: "--b-color-background-",
+      description: "Used as a background for containers and components (like cards, alerts)."
+    },
+    {
+      name: "label",
+      prefix: "--b-color-label-",
+      description: "Used for static text and icons."
+    },
+    {
+      name: "link",
+      prefix: "--b-color-link-",
+      description: "Used for different types of links."
+    },
+    {
+      name: "outline",
+      prefix: "--b-color-outline-",
+      description: "Used for static outlines of elements."
+    },
+    {
+      name: "separator",
+      prefix: "--b-color-separator-",
+      description: "Used for separators between elements like dividers or table borders."
+    },
+    {
+      name: "decorative",
+      prefix: "--b-color-decorative-",
+      description: "Used for decorative elements that don\u2019t have color contrast requirement."
+    },
+    {
+      name: "support",
+      prefix: "--b-color-support-",
+      description: "Support colors for miscellaneous elements."
+    }
+  ]
+};
+
 // packages/mcp/src/tools/get-design-tokens.ts
+function getColorAliasGroup(tokenName) {
+  return colorAliasMetadata.groups.find((group) => tokenName.startsWith(group.prefix));
+}
 function addGetDesignTokens(server) {
   server.registerTool(
     "get_design_tokens",
     {
       description: `
             Retrieves Bento Design Tokens (CSS variables).
-            Tokens are grouped by semantic categories (color, spacing, border, shadow, etc.).
-            Use this to find the correct CSS variables for styling.
+            Call this before choosing colors, spacing, typography, borders, shadows, or other themeable values.
+            The tokens are provided by @adyen/bento-design-tokens. Its generated CSS entry point is
+            @adyen/bento-design-tokens/dist/css/bento/variables.css.
+            Tokens are grouped by semantic categories (background, label, decorative, spacing, border, shadow, etc.)
+            and color alias groups include their documented descriptions.
+            Use alias tokens from this output. Do not use definition tokens directly.
+            Use only token names returned by this tool. Public foundation tokens such as spacers and border widths are
+            intentionally available.
+            If no suitable token exists, submit a design-token request instead of inventing a local value.
         `,
       inputSchema: {
-        searchQuery: zod_default.string().optional().describe('Optional search term to filter tokens (e.g., "critical", "spacer", "background")')
+        searchQuery: zod_default.string().optional().describe(
+          'Optional search term to filter tokens (e.g., "critical", "spacer", "background", "label", "decorative")'
+        )
       }
     },
     async ({ searchQuery }) => {
@@ -30358,7 +30463,7 @@ function addGetDesignTokens(server) {
           const value = match[2].trim();
           let category = "other";
           if (name.includes("-color-")) {
-            category = "color";
+            category = getColorAliasGroup(name)?.name ?? "color";
           } else if (name.includes("-spacer-")) {
             category = "spacing";
           } else if (name.includes("-border-")) {
@@ -30389,9 +30494,19 @@ function addGetDesignTokens(server) {
 
 `;
       }
+      output += "Token values come from @adyen/bento-design-tokens/dist/css/bento/variables.css. Use this package when including the token stylesheet in an application.\n\n";
+      output += `Color aliases follow the groups documented in ${colorAliasMetadata.source}.
+
+`;
       for (const [category, catTokens] of Object.entries(grouped)) {
         output += `## ${category.charAt(0).toUpperCase() + category.slice(1)}
 `;
+        const aliasGroup = colorAliasMetadata.groups.find((group) => group.name === category);
+        if (aliasGroup?.description) {
+          output += `${aliasGroup.description}
+
+`;
+        }
         for (const t of catTokens) {
           output += `- \`${t.name}\`: \`${t.value}\`
 `;
@@ -30533,15 +30648,92 @@ ${usage.map((f) => `- ${f}`).join("\n")}`
   );
 }
 
+// packages/mcp/src/tools/get-all-composables.ts
+function addGetAllComposables(server) {
+  server.registerTool(
+    "get_all_composables",
+    {
+      description: `
+            Retrieves the registry of composables publicly exported by Bento.
+            Use this to discover which composables are available before calling get_composable.
+            Returns:
+                str: A JSON array containing the public composable names.
+        `
+    },
+    () => ({
+      content: [{ type: "text", text: getFile("composables.json") }]
+    })
+  );
+}
+
+// packages/mcp/src/tools/get-composable.ts
+function addGetComposable(server) {
+  server.registerTool(
+    "get_composable",
+    {
+      description: `
+            Retrieves the documentation and TypeScript source for publicly exported Bento composables.
+
+            Args:
+                composableNames (Array<string>): A list of public composable names (e.g., ["use-bento-currency"]).
+
+            Returns:
+                str: A Markdown formatted string containing all available documentation, stories, implementation, and type files.
+        `,
+      inputSchema: {
+        composableNames: zod_default.array(zod_default.string()).describe("A list of public composable names")
+      }
+    },
+    async ({ composableNames }) => {
+      const registryContent = getFile("composables.json");
+      if (registryContent.startsWith("Error:")) {
+        return { content: [{ type: "text", text: registryContent }] };
+      }
+      const publicComposables = new Set(JSON.parse(registryContent));
+      const output = [];
+      for (const composableName of composableNames) {
+        if (!publicComposables.has(composableName)) {
+          output.push(
+            `# Composable: ${composableName}
+
+Error: Composable is not publicly exported by Bento.`
+          );
+          continue;
+        }
+        const files = getFiles(`composables/${composableName}`);
+        if (files.length === 0) {
+          throw new Error(`Unable to retrieve files for public composable: ${composableName}`);
+        }
+        output.push(
+          [
+            `# Composable: ${composableName}`,
+            ...files.map((file2) => {
+              const language = file2.path.endsWith(".mdx") ? "markdown" : file2.path.endsWith(".vue") ? "html" : "typescript";
+              return `## ${file2.path}
+
+\`\`\`${language}
+${file2.content}
+\`\`\``;
+            })
+          ].join("\n\n")
+        );
+      }
+      return {
+        content: [{ type: "text", text: output.join("\n\n---\n\n") }]
+      };
+    }
+  );
+}
+
 // packages/mcp/package.json
 var package_default = {
   name: "@adyen/bento-mcp",
   mcpName: "io.github.adyen/bento-mcp",
-  version: "0.11.0",
+  version: "0.12.0",
   type: "module",
   description: "A Model Context Protocol server implementation for Bento",
   license: "MIT",
-  packageManager: "pnpm@10.26.2",
+  packageManager: "pnpm@11.3.0",
   main: "dist/main.js",
   bin: {
     "bento-mcp": "dist/main.js",
@@ -30601,6 +30793,8 @@ async function main() {
   });
   addGetAllComponents(server);
   addGetComponent(server);
+  addGetAllComposables(server);
+  addGetComposable(server);
   addGetDeprecations(server);
   addGetDocs(server);
   addGetDesignTokens(server);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adyen/bento-mcp",
   "mcpName": "io.github.adyen/bento-mcp",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "type": "module",
   "description": "A Model Context Protocol server implementation for Bento",
   "license": "MIT",
@@ -45,7 +45,7 @@
   "devDependencies": {
     "@modelcontextprotocol/inspector": "0.22.0",
     "@playwright/test": "1.42.1",
-    "@nx/playwright": "22.4.0",
+    "@nx/playwright": "22.7.7",
     "@swc/core": "^1.15.11"
   },
   "scripts": {

package/dist/assets/components/internal/base-button/base-button.types.ts

@@ -1 +0,0 @@
-export enum BentoBaseButtonPropClass { DESTRUCTIVE = 'critical', ICON_ONLY = 'icon-only', } export enum BentoBaseButtonEvent { BLUR = 'blur', CLICK = 'click', FOCUS = 'focus', KEYDOWN_ESC = 'keydown.esc', } export enum BaseButtonType { BUTTON = 'button', RESET = 'reset', SUBMIT = 'submit', } 

package/dist/assets/components/internal/base-button/base-button.vue

@@ -1 +0,0 @@
-<template> <button ref="bentoBaseButtonRef" v-bind="$attrs" class="b-base-button" :class="conditionalClasses" :disabled="disabled" :type="type" :aria-expanded="ariaAttributes['aria-expanded']" @click="onClickButton" @focus="onFocusButton" @blur="onBlurButton" > <span v-if="hasSlot('iconLeft')" class="b-base-button__icon-left" data-testid="icon-button-left"> <slot name="iconLeft" /> </span> <bento-typography v-if="hasSlot('default')" el="span" variant="body" stronger class="b-base-button__label"> <slot /> </bento-typography> <span v-if="hasSlot('iconRight')" class="b-base-button__icon-right" data-testid="icon-button-right"> <slot name="iconRight" /> </span> </button> </template> <script lang="ts"> import { computed, defineComponent, type PropType, ref } from 'vue'; import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types'; import type { ButtonHTMLAttributes } from 'vue/types/jsx.d.ts'; import { BentoTypography } from '@/components/typography'; import { useHasSlot } from '@/composables'; import { type Booleanish } from '@/types/prop-types'; /** * Base button component to use as a base for all the various types of bento buttons. For internal use only. * * * @example * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button'; * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon'; * * export default { * components: { BaseButton, YourImportedIcon }, * props: { * text: * }, * template: ` * <base-button class="your-custom-button-styles" @click="onClick"> * <template #iconLeft><your-imported-icon></template> * Button text * <template #iconRight><your-imported-icon></template> * </base-button> * `, * emits: [BentoButtonEvent.CLICK], * setup: (prps, { emit }) => { * const onClick = value => emit(BaseButtonEvent.CLICK, value); * * return { * onClick, * }; * } * } */ export default defineComponent({ name: 'base-button', components: { BentoTypography }, props: { /** * Disables button functionality */ disabled: { type: Boolean, default: false, }, /** * Displays button as critical */ critical: { type: Boolean, default: false, }, /** * The default behavior of the button. * Possible values are: 'button', 'reset', 'submit' */ type: { type: String as PropType<ButtonHTMLAttributes['type']>, default: 'button', }, }, emits: [ BentoBaseButtonEvent.CLICK, BentoBaseButtonEvent.FOCUS, BentoBaseButtonEvent.BLUR, BentoBaseButtonEvent.KEYDOWN_ESC, ], setup(props, { slots, emit, attrs }) { const ariaAttributes = computed(() => ({ 'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish, })); const bentoBaseButtonRef = ref(null); const conditionalClasses = computed(() => ({ [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical, [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default, })); const onClickButton = (e: MouseEvent) => { if (!props.disabled) { emit(BentoBaseButtonEvent.CLICK, e); } else { e.preventDefault(); e.stopPropagation(); } }; const onFocusButton = (e: FocusEvent) => { emit(BentoBaseButtonEvent.FOCUS, e); }; const onBlurButton = (e: FocusEvent) => { emit(BentoBaseButtonEvent.BLUR, e); }; return { // Values ariaAttributes, conditionalClasses, // Methods onClickButton, onFocusButton, onBlurButton, hasSlot: useHasSlot(slots), // Refs bentoBaseButtonRef, }; }, }); </script> <style lang="scss" scoped src="./base-button.scss" /> 

package/dist/assets/components/internal/button-actions-with-menu/button-actions-with-menu.stories.ts

@@ -1 +0,0 @@
-import { BentoButtonActionsLayout } from '@/components/button'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { type Meta, type StoryObj } from '@storybook/vue'; import ButtonActionsWithMenu from './button-actions-with-menu.vue'; import ButtonActionsWithMenuDefault from './__tests__/button-actions-with-menu-default.vue?raw'; import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning'; export default { title: 'Button Actions with Menu', component: ButtonActionsWithMenu, argTypes: { layout: { options: Object.values(BentoButtonActionsLayout), mapping: BentoButtonActionsLayout, control: { type: 'select', }, }, }, } as Meta; type Story = StoryObj<typeof ButtonActionsWithMenu>; const DEFAULT_ACTIONS = [ { title: 'Primary', event: () => true, icon: MachineLearningIcon, }, { title: 'Secondary', icon: MachineLearningIcon, data: [ { text: 'Item 1', secondaryText: 'Text', handler: () => true, critical: true, icon: MachineLearningIcon, }, { text: 'Item 2', secondaryText: 'Text', handler: () => true, }, ], }, { title: 'Tertiary', event: () => true, data: [ { text: 'Item 1', secondaryText: 'Text', handler: () => true, critical: true, }, { text: 'Item 2', secondaryText: 'Text', handler: () => true, }, ], }, { title: 'Quarternary', event: () => true, }, ]; const DEFAULT_PROPS = { actions: DEFAULT_ACTIONS, displayedActions: 2, }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { ButtonActionsWithMenu, MachineLearningIcon }, props: Object.keys(argTypes), template: ` <button-actions-with-menu v-bind="args" /> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_PROPS }, parameters: storybookDocsParameter(ButtonActionsWithMenuDefault), }; 

package/dist/assets/components/internal/button-actions-with-menu/button-actions-with-menu.types.ts

@@ -1 +0,0 @@
-import type { BentoPopoverPositions } from '@/components/popover/popover.types'; import type { BentoButtonActionsList } from '@/components/button/components/button-actions/button-actions.types'; export interface ButtonActionsWithMenuProps { /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`. * * @see BentoButton for a list of all the other props supported by each button action. * * ``` * [{ * title: 'Primary', * event: () => { ... }, * icon: FourPeopleIcon, * link: { variant: 'default', external: true, to: 'https://www.adyen.com/' }, * }, { * title: 'Secondary', * event: () => { ... } * disabled: true, * variant: 'primary', * critical: true * }]" * ``` */ actions: BentoButtonActionsList; /** * Defines the layout in which the button actions is presented. * * */ actionsLayout?: string; /** * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component. */ disableResponsiveBehavior?: boolean; /** * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component. */ displayedActions?: number; /** * Set inverse color scheme to buttons and menu */ inverse?: boolean; /** * The min-width breakpoint to hide the button actions. * * For example, a value of 200 means that buttons will be hidden at <= 200px. * * Defaults to 0 i.e. it shows all buttons. */ hideDisplayedActionsBreakpoint?: number; /** * The position of where the menu should open. */ menuPosition?: BentoPopoverPositions | `${BentoPopoverPositions}`; } 

package/dist/assets/components/internal/button-actions-with-menu/button-actions-with-menu.vue

@@ -1 +0,0 @@
-<template> <div class="b-button-actions-with-menu"> <div ref="buttonActionsWithMenu" role="group" class="b-button-actions-with-menu__container-wrapper" :class="conditionalClasses" > <bento-button-actions :actions="computedActions" :inverse="inverse" :layout="actionsLayout" /> <bento-menu v-if="computedMenuActions.length" ref="menu" :data="computedMenuActions" :menu-position="menuPosition" /> </div> </div> </template> <script setup lang="ts"> import { BentoButtonActions } from '@/components/button'; import { type BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types'; import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys'; import BentoMenu from '@/components/menu/menu.vue'; import { computed, provide, ref, toRef } from 'vue'; import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys'; import { type ButtonActionsWithMenuProps } from './button-actions-with-menu.types'; import { useResponsiveActions } from './composables/use-responsive-actions'; const props = withDefaults(defineProps<ButtonActionsWithMenuProps>(), { actionsLayout: 'buttons-end', disableResponsiveBehavior: false, displayedActions: undefined, inverse: false, hideDisplayedActionsBreakpoint: 0, menuPosition: 'bottom-start', }); const inverseRef = toRef(props, 'inverse'); const buttonActionsWithMenu = ref<HTMLDivElement>(null); const menu = ref(null); const stackButtons = ref(false); const computedActions = computed(() => { const displayedActionsLimit = props.hideDisplayedActionsBreakpoint ? displayedActionsCount.value : props.displayedActions; return props.actions.slice(0, displayedActionsLimit); }); const computedMenuRef = computed(() => menu?.value?.$el); const { displayedActionsCount } = useResponsiveActions({ breakpoint: props.hideDisplayedActionsBreakpoint, container: buttonActionsWithMenu, defaultActionsCount: toRef(props, 'displayedActions'), offset: computedMenuRef, }); provide(MENU_INVERSE_INJECTION_KEY, inverseRef); if (!props.disableResponsiveBehavior) { provide(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, { buttonActionsWithMenu, menu, stackButtons }); } const conditionalClasses = computed(() => ({ [`b-button-actions-with-menu__container-wrapper--buttons-end`]: props.actionsLayout === 'buttons-end', [`b-button-actions-with-menu__container-wrapper--buttons-start`]: props.actionsLayout === 'buttons-start', [`b-button-actions-with-menu__container-wrapper--stacked-buttons`]: stackButtons.value, })); const computedMenuActions = computed(() => { if (displayedActionsCount.value === undefined || displayedActionsCount.value >= props.actions.length) { return []; } const actionsToProcess = props.actions.slice(displayedActionsCount.value, props.actions.length); return actionsToProcess.flatMap<BentoMenuItem>(action => { if (!action.data) { return { text: action.title, handler: () => action.event?.({} as Event), icon: action.icon, critical: action.critical, disabled: action.disabled, }; } return action.data; }); }); </script> <script lang="ts"> /** * An internal button actions component with the option to display some of the actions in a menu. * * @example * <button-actions-with-menu * :actions="[ * { * title: 'Primary', * event: () => { ... }, * icon: FourPeopleIcon, * link: { * variant: 'default', * external: true, * to: 'https://www.adyen.com/' * }, * }, * { * title: 'Secondary', * event: () => { ... } * disabled: true, * variant: BentoButtonVariant.PRIMARY, * critical: true * }]" * :displayedActions="2" * /> */ export default {}; </script> <style lang="scss" scoped src="./button-actions-with-menu.scss" /> 

package/dist/assets/components/internal/calendar/calendar.stories.ts

@@ -1 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/vue'; import { action } from '@storybook/addon-actions'; import { computed, reactive, ref } from 'vue'; import { CalendarEvent } from './calendar.types'; import { isVue2 } from 'vue-demi'; import Calendar from './calendar.vue'; import { subDays } from 'date-fns/subDays'; import { subMonths } from 'date-fns/subMonths'; import { addMonths } from 'date-fns/addMonths'; const meta: Meta = { title: 'Calendar', component: Calendar, argTypes: { // Props month: { name: 'month', defaultValue: undefined, description: 'Month of the year to be displayed in the calendar', control: 'date', }, value: { name: 'value', defaultValue: undefined, description: 'Date selected', control: { disable: true, }, }, // Funcs isDateDisabled: { name: 'isDateDisabled', defaultValue: '', description: 'Disables the dates that meet the criteria defined in the function.', table: { type: { summary: '(currentDate: Date) => boolean' } }, control: { disable: true }, }, // Events input: { name: 'input', defaultValue: '', description: 'Triggered when a date is selected', table: { type: { summary: '(selectedDate: Date) => void' } }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof Calendar>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { Calendar }, props: Object.keys(argTypes), template: ` <calendar v-bind="args" :value="currentValue" @input="onInputEvent" /> `, setup(props) { const args = isVue2 ? props : _args; const currentMonth = computed(() => new Date(args.month)); const currentValue = ref(new Date(args.value)); const onInputEvent = value => { action('input')(value); currentValue.value = value; }; return { // Values args, currentMonth, currentValue, // Events onInputEvent, }; }, }), args: { yearRange: { minYear: undefined, maxYear: undefined }, isRange: false, month: new Date(), value: (() => { const date = new Date(); date.setDate(date.getDate() + 1); return date; })(), numberOfMonths: 1, }, }; export const MonthVariant: Story = { render: (_args, { argTypes }) => ({ components: { Calendar }, props: Object.keys(argTypes), template: ` <calendar v-bind="args" variant="month" :value="currentValue" @input="onInputEvent" /> `, setup(props) { const args = isVue2 ? props : _args; const currentValue = ref(new Date(args.value)); const onInputEvent = value => { action('input')(value); currentValue.value = value; }; return { // Values args, currentValue, // Events onInputEvent, }; }, }), args: { yearRange: { minYear: undefined, maxYear: undefined }, isRange: false, year: new Date(), value: subMonths(new Date(), 1), max: addMonths(new Date(), 1), numberOfMonths: 1, }, }; export const Range: Story = { render: (_args, { argTypes }) => ({ components: { Calendar }, props: Object.keys(argTypes), template: ` <calendar v-bind="args" :value="currentValue" @input="onInputEvent" /> `, setup(props) { const args = isVue2 ? props : _args; const currentMonth = computed(() => new Date(args.month)); const currentValue = reactive({ startDate: null, endDate: null }); const onInputEvent = value => { action(CalendarEvent.INPUT)(value); currentValue.startDate = value.startDate; currentValue.endDate = value.endDate; }; return { // Values args, currentMonth, currentValue, // Events onInputEvent, }; }, }), args: { yearRange: { minYear: undefined, maxYear: undefined }, isRange: true, month: new Date(), min: subDays(new Date(), 8), max: new Date(), value: { startDate: undefined, endDate: undefined, }, }, }; 

package/dist/assets/components/internal/calendar/calendar.types.ts

@@ -1 +0,0 @@
-import { type Ref, type UnwrapNestedRefs } from 'vue'; import type { Day } from 'date-fns'; /** * Defines the first day of the week */ export enum CalendarFirstDayOfWeek { MONDAY = 1, SATURDAY = 6, SUNDAY = 0, } export type CalendarIsDateDisabled = (date: Date) => boolean; /** * Defines the position in which the calendar will be displayed */ export enum CalendarPosition { FIRST = 'first', LAST = 'last', MIDDLE = 'middle', UNIQUE = 'unique', } export type CalendarGranularityType = 'daily' | 'weekly' | 'monthly' | 'quarterly'; export interface CalendarGranularityConfig<T extends CalendarGranularityType = CalendarGranularityType> { type: T; earliest?: Date; latest?: Date; disabled?: boolean; maxRange?: number; } export interface CalendarRangeDateValue { startDate: Date; endDate: Date; granularity?: CalendarGranularityType; range?: string; } export type CalendarSingleDateValue = Date; export type CalendarValue = CalendarSingleDateValue | CalendarRangeDateValue; interface UseCalendarPaneProps { isDateDisabled?: (date: Date) => boolean; maxRange?: Ref<number>; selectedDate: Ref<CalendarValue>; granularity?: Ref<CalendarGranularityConfig>; firstDayOfWeek: Day; min?: Ref<Date>; max?: Ref<Date>; } export enum CalendarEvent { INPUT = 'input', START_DATE_SELECTED = 'start-date-selected', END_DATE_SELECTED = 'end-date-selected', } /** * Private types */ export enum CalendarVariant { DAY = 'day', MONTH = 'month', } export type UseCalendarPane = ( propRefs: UseCalendarPaneProps, emit ) => { internalValue: UnwrapNestedRefs<CalendarRangeDateValue>; onDateInput: (date: Date) => void; onMouseOver: (date: Date) => void; }; /** * Defines the range of selectable years in the calendar's year selector dropdown */ export interface CalendarYearRange { /** * The earliest selectable year (inclusive) */ minYear?: number; /** * The latest selectable year (inclusive) */ maxYear?: number; } export interface CalendarEmit { /** * Triggered when a date is selected */ (e: 'input', date: Date): void; /** * Triggered when the active day changes */ (e: 'changeDay', day: Date): void; /** * Triggered when navigating to the next month */ (e: 'nextMonth', month: number): void; /** * Triggered when navigating to the previous month */ (e: 'previousMonth', month: number): void; /** * Triggered when the mouse hovers over a date, used for range selection */ (e: 'mouseover', date: Date): void; } 

package/dist/assets/components/internal/calendar/calendar.vue

@@ -1 +0,0 @@
-<template> <div class="b-calendar" :class="conditionalClasses"> <component :is="calendarComponent" v-for="(_, index) in numberOfMonths" :ref="numberOfMonths === 1 ? 'calendarRef' : null" :key="`calendar-${index}`" :first-day-of-week="firstDayOfWeek" :is-date-disabled="isDateDisabled" :month="calculateOffsetMonth(index)" :year="calculateOffsetYear(index)" :position="calendarPosition(index)" :min="min" :max="max" :is-range="isRange" :start-date="internalValue.startDate" :end-date="internalValue.endDate" :granularity="granularity" :year-range="yearRange" @input="onDateInput" @mouseover="onMouseOver" @changeDay="onMouseOver" @nextMonth="calculateNextMonths" @previousMonth="calculatePreviousMonths" /> </div> </template> <script lang="ts"> import { computed, defineComponent, type PropType, ref, toRef, watch } from 'vue'; import CalendarMonth from './components/calendar-month/calendar-month.vue'; import CalendarYear from './components/calendar-year/calendar-year.vue'; import { CalendarEvent, CalendarFirstDayOfWeek, type CalendarGranularityConfig, type CalendarIsDateDisabled, CalendarPosition, type CalendarRangeDateValue, type CalendarValue, CalendarVariant, type CalendarYearRange, } from './calendar.types'; import { useSinglePane } from './composables/use-single-pane'; import { useRangePane } from './composables/use-range-pane'; import { addMonths } from 'date-fns/addMonths'; import { subMonths } from 'date-fns/subMonths'; import { addYears } from 'date-fns/addYears'; import { subYears } from 'date-fns/subYears'; /** * Handles the calendar logic to change visible months for Single calendar * and Range calendar, as well as the selection logic for range. * All the processing necessary for the calendar to select dates * * @example * import { Calendar } from '@/internal/bento-vue2'; * * export default { * components: { Calendar }, * template: ` * <calendar * :value="value" * :first-day-of-week="CalendarFirstDayOfWeek.Monday" * :is-date-disabled="(day: Date) => boolean" * :number-of-months="2" * is-range * @input="(selectedDate) => void" * @start-date-selected="(startDate: Date) => void" * @end-date-selected="(endDate: Date) => void" * /> * ` * } */ export default defineComponent({ name: 'calendar', components: { CalendarMonth, CalendarYear }, props: { /** * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday */ firstDayOfWeek: { type: Number as PropType<CalendarFirstDayOfWeek>, default: CalendarFirstDayOfWeek.MONDAY, validator: (value: CalendarFirstDayOfWeek) => Object.values(CalendarFirstDayOfWeek).includes(value), }, /** * The selected granularity configuration */ granularity: { type: Object as PropType<CalendarGranularityConfig>, default: null, }, /** * Indicate if a date should be disabled or not */ isDateDisabled: { type: Function as PropType<CalendarIsDateDisabled>, default: undefined }, /** * Enables the Date Range calendar */ isRange: { type: Boolean, default: false }, /** * Set a maximum number of dates to be selectable by the range. */ maxRange: { type: Number, default: null, validator: (value: number) => !value || value > 0 }, /** * Sets a minimum limit for selectable dates - dates before `min` will not be selectable */ min: { type: Date, default: null }, /** * Sets a maximum limit for selectable dates - dates after `max` will not be selectable */ max: { type: Date, default: null }, /** * Number of months rendered on pane */ numberOfMonths: { type: Number, default: 3, validator: (n: number) => n >= 1, }, /** * Upon opening date range picker, end date's month will be pre-selected. */ showEndDateOnOpen: { type: Boolean, default: false }, /** * Selected date. Can be a single Date or a CalendarRangeDate * instance that contains startDate and endDate attributes. */ value: { type: [Date, Object] as PropType<CalendarValue>, default: undefined }, /** * Default start date for the calendar pane */ defaultDisplayMonth: { type: String, default: null, validator: (value: string) => { // Checks for YYYY-MM-DD format const dateRegex = /^\d{4}-(0?[1-9]|1[012])(-(0?[1-9]|[12][0-9]|3[01]))?$/; const isValidDate = dateRegex.test(value); return isValidDate; }, }, /** * Range of years to be selectable from the year dropdown */ yearRange: { type: Object as PropType<CalendarYearRange>, default: () => ({}), }, /** * The type of calendar to display. Defaults to showing days. */ variant: { type: String as PropType<`${CalendarVariant}`>, default: 'day', validator: (value: string) => Object.values(CalendarVariant).includes(value as CalendarVariant), }, }, emit: [CalendarEvent.INPUT, CalendarEvent.START_DATE_SELECTED, CalendarEvent.END_DATE_SELECTED], setup(props, { emit }) { // Single date calendar ref const calendarRef = ref(null); // Use a duplicate of "month" to move back and // forth with the arrows. Maintained in sync with the prop "value" const baseDate = ref(); watch( () => props.value, () => { if (props.isRange) { baseDate.value = props?.showEndDateOnOpen && (props.value as CalendarRangeDateValue)?.endDate ? (props.value as CalendarRangeDateValue)?.endDate : (props.value as CalendarRangeDateValue)?.startDate || new Date(); } else { const defaultDate = props.defaultDisplayMonth && new Date(props.defaultDisplayMonth).getTime() ? new Date(props.defaultDisplayMonth) : new Date(); baseDate.value = (props.value as Date) || defaultDate; } }, { immediate: true, deep: true } ); const calendarComponent = computed(() => props.variant === CalendarVariant.MONTH ? CalendarYear : CalendarMonth ); const conditionalClasses = computed(() => ({ 'b-calendar__range': props.isRange, })); const { internalValue, onDateInput, onMouseOver } = props.isRange ? useRangePane( { selectedDate: toRef(props, 'value'), isDateDisabled: props.isDateDisabled as (date: Date) => boolean, maxRange: toRef(props, 'maxRange'), granularity: toRef(props, 'granularity'), firstDayOfWeek: props.firstDayOfWeek, min: toRef(props, 'min'), max: toRef(props, 'max'), }, emit ) : useSinglePane( { selectedDate: toRef(props, 'value'), firstDayOfWeek: props.firstDayOfWeek, }, emit ); /** * Calculate the current month calendar. * This is used to render/hide the Previous & Next buttons on each calendar. * @param calendarIndex - Number to offset the calendar position */ const calendarPosition = (calendarIndex: number): CalendarPosition => { if (props.numberOfMonths === 1) { return CalendarPosition.UNIQUE; } if (calendarIndex === 0) { return CalendarPosition.FIRST; } return calendarIndex === props.numberOfMonths - 1 ? CalendarPosition.LAST : CalendarPosition.MIDDLE; }; /** * Calculates in relation to the amount of months defined in "numberOfMonths" * which calendar month should be render starting from the first (leftmost) * rendered calendar. * If showEndDateOnOpen is set to true, the last pane should be the baseDate month i.e. the end date * @param offsetMonth - Amount of months to add after the first month was rendered */ const calculateOffsetMonth = computed(() => (offsetMonth: number) => { const monthOffset = props?.showEndDateOnOpen && props.isRange ? subMonths(baseDate.value, props.numberOfMonths - 1) : baseDate.value; return addMonths(monthOffset, offsetMonth); }); const calculateOffsetYear = computed(() => (offsetYear: number) => { const yearOffset = props?.showEndDateOnOpen ? subYears(baseDate.value, props.numberOfMonths - 1) : baseDate.value; return addYears(yearOffset, offsetYear); }); /** * By default shows the following month * Can skip multiple months by passing an additional param * Used for keyboard nav to be able to skip a year */ const calculateNextMonths = (amountOfMonths = 1) => { baseDate.value = addMonths(baseDate.value, amountOfMonths); }; /** * By default shows the previous month * Can skip multiple months by passing an additional param * Used for keyboard nav to be able to go back a year */ const calculatePreviousMonths = (amountOfMonths = 1) => { baseDate.value = subMonths(baseDate.value, amountOfMonths); }; return { // Refs calendarRef, // Values baseDate, calendarComponent, conditionalClasses, internalValue, // Methods calculateOffsetMonth, calculateOffsetYear, calendarPosition, // Events onDateInput, onMouseOver, calculateNextMonths, calculatePreviousMonths, }; }, }); </script> <style lang="scss" scoped src="./calendar.scss" /> 

package/dist/assets/components/internal/calendar/components/calendar-month/calendar-month.stories.ts

@@ -1 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/vue'; import { action } from '@storybook/addon-actions'; import { computed, ref } from 'vue'; import { CalendarFirstDayOfWeek } from '../../calendar.types'; import { isVue2 } from 'vue-demi'; import CalendarMonth from './calendar-month.vue'; const meta: Meta = { title: 'Calendar/Month', component: CalendarMonth, argTypes: { // Props month: { name: 'month', defaultValue: undefined, description: 'Month of the year to be displayed in the calendar', control: 'date', }, value: { name: 'value', defaultValue: undefined, description: 'Date selected', control: { disable: true, }, }, // Funcs isDateDisabled: { name: 'isDateDisabled', defaultValue: '', description: 'Disables the dates that meet the criteria defined in the function.', table: { type: { summary: '(currentDate: Date) => boolean' } }, control: { disable: true }, }, // Enum props firstDayOfWeek: { options: Object.keys(CalendarFirstDayOfWeek) .map(key => CalendarFirstDayOfWeek[key]) .filter(value => typeof value !== 'string') as Array<number>, control: { type: 'select', }, }, // Events input: { name: 'input', defaultValue: '', description: 'Triggered when a date is selected', table: { type: { summary: '(selectedDate: Date) => void' } }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof CalendarMonth>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { CalendarMonth }, props: Object.keys(argTypes), template: ` <calendar-month v-bind="args" /> `, setup(props) { const currentMonth = computed(() => new Date(props.month)); const currentValue = ref(new Date(props.value)); const onInputEvent = value => { action('input')(value); currentValue.value = value; }; return { args: isVue2 ? props : _args, // Values currentMonth, currentValue, // Events onInputEvent, }; }, }), args: { isRange: true, month: new Date(), startDate: (() => { const date = new Date(); date.setDate(date.getDate() - 6); return date; })(), endDate: (() => { const date = new Date(); date.setDate(date.getDate()); return date; })(), }, }; 

package/dist/assets/components/internal/calendar/components/calendar-month/calendar-month.types.ts

@@ -1 +0,0 @@
-import { type CalendarFirstDayOfWeek, type CalendarIsDateDisabled, type CalendarPosition, type CalendarYearRange, } from '../../calendar.types'; export interface CalendarMonthProps { /** * end of the selected range * @default null */ endDate?: Date; /** * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday * @default CalendarMonthFirstDayOfWeek.MONDAY, */ firstDayOfWeek?: CalendarFirstDayOfWeek; /** * Indicate if a date should be disabled or not * @default undefined */ isDateDisabled?: CalendarIsDateDisabled; /** * Indicates if the calendar is part of a range date picker or a sigle date picker * @default false */ isRange?: boolean; /** * Sets a maximum limit for selectable dates - dates after `max` will not be selectable * @default null */ max?: Date; /** * Sets a minimum limit for selectable dates - dates before `min` will not be selectable * @default null */ min?: Date; /** * Month of the year to be displayed in the calendar */ month: Date; /** * When rendering multiple calendars, this property allows to render the * Next and Previous calendar buttons to the right, left or not at all * depending on the position: Unique (only 1), First, Middle or Last * @default 'unique' */ position?: `${CalendarPosition}`; /** * start of the selected range * @default undefined */ startDate?: Date; /** * Range of years to be selectable from the year dropdown. * This is capped by the min & max properties (if present) * @default undefined */ yearRange?: CalendarYearRange; } 

package/dist/assets/components/internal/calendar/components/calendar-month/calendar-month.vue

@@ -1 +0,0 @@
-<template> <div v-bento-keyboard-navigation-directive class="b-calendar-month" v-on="listeners"> <div class="b-calendar-month__month-selector"> <!-- go to previous month --> <div class="b-calendar-month__previous"> <bento-button v-if="shouldShowPreviousMonthButton" variant="tertiary" @click="moveToPreviousMonth($event, true)" > <template #iconLeft> <chevron-left-icon :svg-title="t('previousMonth')" /> </template> </bento-button> </div> <div class="b-calendar-month__month-year-container"> <!-- Month name --> <bento-typography :id="monthLabelId" el="h2" variant="title" aria-live="polite"> {{ formattedMonthName }} <span class="b-calendar-month__visually-hidden">{{ baseDate.getFullYear() }}</span> </bento-typography> <!-- Year selector --> <calendar-year-selector :current-year="baseDate.getFullYear()" :year-range="yearRange" :min="min" :max="max" @update:year="onYearSelected" /> </div> <!-- go to next month --> <div class="b-calendar-month__next"> <bento-button v-if="shouldShowNextMonthButton" variant="tertiary" @click="moveToNextMonth($event, true)" > <template #iconLeft> <chevron-right-icon :svg-title="t('nextMonth')" /> </template> </bento-button> </div> </div> <table class="b-calendar-month__month-container" role="grid" :aria-labelledby="monthLabelId"> <thead> <tr class="b-calendar-month__week-header"> <th v-for="(dayOfWeekFormatted, index) in daysOfWeek" :key="index" class="b-calendar-month__day-of-week" scope="col" > <bento-typography class="b-calendar-month__day-of-week-font" el="span" variant="caption"> {{ dayOfWeekFormatted }} </bento-typography> </th> </tr> </thead> <tbody> <tr v-for="(week, index) in weeksOfMonth" :key="index"> <td v-if="index === 0 && week.length < 7" :colspan="7 - week.length"> </td> <calendar-month-day v-for="(day, dayIndex) in week" :ref="addDayRef(day)" :key="`calendar-day-${dayIndex}`" :day="day" :disabled="computedIsDateDisabled(day)" :selected="isSelectedDate(day)" :variant="dayVariant(day)" @click="onDayClicked" @mouseover="$emit('mouseover', day)" @keyup.up.native="$emit('changeDay', day)" @keyup.down.native="$emit('changeDay', day)" @keyup.left.native="$emit('changeDay', day)" @keyup.right.native="$emit('changeDay', day)" /> </tr> <template v-if="weeksOfMonth?.length < 6"> <tr v-for="n in 6 - weeksOfMonth?.length" :key="`calendar month filler row ${n}`"> <td aria-hidden="true" class="b-calendar-month__empty-cell-filler" :colspan="7"></td> </tr> </template> </tbody> </table> </div> </template> <script setup lang="ts"> import { computed, toRef } from 'vue'; import BentoButton from '@/components/button/button.vue'; import { CalendarYearSelector } from '../calendar-year-selector'; import { CalendarMonthDay, CalendarMonthDayVariant } from './components/calendar-month-day'; import { BentoTypography } from '@/components/typography'; import { useI18n } from '@/utils/ts/i18n'; import type { CalendarMonthProps } from './calendar-month.types'; import { generateUid } from '@/core/utils/ts'; import { BentoKeyboardNavigationDirective as vBentoKeyboardNavigationDirective } from '@/directives'; import { type CalendarEmit, CalendarFirstDayOfWeek } from '../../calendar.types'; import { useMoveCalendarDate } from './composables/move-calendar-date'; import { setDay } from 'date-fns/setDay'; import { startOfMonth } from 'date-fns/startOfMonth'; import { startOfDay } from 'date-fns/startOfDay'; import { isSameDay } from 'date-fns/isSameDay'; import { isWithinInterval } from 'date-fns/isWithinInterval'; import { getDateTimeFormatter } from '@/utils/ts/format-date'; import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left'; import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const emit = defineEmits<CalendarEmit>(); const props = withDefaults(defineProps<CalendarMonthProps>(), { endDate: null, firstDayOfWeek: CalendarFirstDayOfWeek.MONDAY, isDateDisabled: undefined, isRange: false, max: null, min: null, position: 'unique', startDate: undefined, yearRange: undefined, }); // Date formatter locale options const { locale, t } = useI18n<{ message: MessageSchema }>({ messages }); const monthLabelId = generateUid('bento-date-picker-month-label'); const computedIsDateDisabled = computed( () => (date: Date) => (props.min && date < props.min) || (props.max && date > props.max) || props.isDateDisabled?.(date) ); const { internalDate, baseDate, // Calendar refs addDayRef, // Day navigation moveToNextDay, moveToPreviousDay, moveToPreviousWeek, moveToNextWeek, moveToFirstDayOfWeek, moveToLastDayOfWeek, moveToPreviousMonth, moveToPreviousYear, moveToNextMonth, moveToNextYear, focusOnDate, showNextMonth, showPreviousMonth, } = useMoveCalendarDate( { currentSelectedDate: toRef(props, 'startDate'), month: toRef(props, 'month'), isDateDisabled: computedIsDateDisabled.value, firstDayOfWeek: props.firstDayOfWeek, }, emit ); /** * Default to Monday if the value passed in is not part of the defined Enum */ const fallbackFirstDayOfWeek = computed(() => Object.values(CalendarFirstDayOfWeek).includes(props.firstDayOfWeek) ? props.firstDayOfWeek : CalendarFirstDayOfWeek.MONDAY ); /** * Renders the previous month button if it's Unique or First calendar */ const shouldShowPreviousMonthButton = computed(() => ['first', 'unique'].includes(props.position)); /** * Renders the next month button if it's Unique or Last calendar */ const shouldShowNextMonthButton = computed(() => ['last', 'unique'].includes(props.position)); /** * Formats the month date to the name of the month */ const formattedMonthName = computed(() => getDateTimeFormatter(locale.value, { month: 'long' }).format(baseDate.value) ); /** * Navigates the calendar to the newly selected year, preserving the currently displayed month. * @param newYear The year selected from the dropdown */ const onYearSelected = (newYear: number) => { const currentYear = baseDate.value.getFullYear(); const diffYears = newYear - currentYear; const diffMonths = diffYears * 12; if (diffMonths > 0) { showNextMonth(diffMonths); } else if (diffMonths < 0) { showPreviousMonth(Math.abs(diffMonths)); } }; /** * Formats all the days of the week to their day name */ const daysOfWeek = computed(() => new Array(7).fill(new Date()).map((date, index) => { const dayOfWeekDate = setDay(date, fallbackFirstDayOfWeek.value + index); return getDateTimeFormatter(locale.value, { weekday: 'short' }).format(dayOfWeekDate); }) ); /** * Calculates all the weeks of the current "props.month" * and adds the respective day number to each column and week */ const weeksOfMonth = computed(() => { const weeks = []; const date = startOfMonth(props.month); let week = weeks[weeks.push([]) - 1]; while (date.getMonth() === props.month.getMonth()) { if (date.getDay() - fallbackFirstDayOfWeek.value === 0 && week.length > 0) { week = weeks[weeks.push([]) - 1]; } week.push(startOfDay(date)); date.setDate(date.getDate() + 1); } return weeks; }); const onDayClicked = (selectedDate: Date) => { emit('input', selectedDate); }; /** * Calculates the variation of the days selected. * For single select it's always SINGLE * For ranges: * - Start & End is the same: SINGLE * - Start: BEGINNING * - End: END * - Within the range: MIDDLE * @param day Current day */ const dayVariant = (day: Date) => { if (!props.isRange || isSameDay(props.startDate, props.endDate)) { return CalendarMonthDayVariant.SINGLE; } if (props.startDate && isSameDay(props.startDate, day)) { return CalendarMonthDayVariant.BEGINNING; } if (props.endDate && isSameDay(props.endDate, day)) { return CalendarMonthDayVariant.END; } if (props.startDate && props.endDate && isWithinInterval(day, { start: props.startDate, end: props.endDate })) { return CalendarMonthDayVariant.MIDDLE; } return undefined; }; /** * Checks every date in the calendar to see if it's selected. * @param day Current day in the calendar */ const isSelectedDate = (day: Date) => { // Single selection if (internalDate.value && isSameDay(internalDate.value, day) && !props.endDate) { return true; } // Range return ( props.startDate && props.endDate && isWithinInterval(day, { start: props.startDate, end: props.endDate }) ); }; const listeners = { 'keydown:arrow-right': moveToNextDay, 'keydown:arrow-left': moveToPreviousDay, 'keydown:arrow-up': moveToPreviousWeek, 'keydown:arrow-down': moveToNextWeek, 'keydown:home': moveToFirstDayOfWeek, 'keydown:end': moveToLastDayOfWeek, 'keydown:page-up': moveToPreviousMonth, 'keydown:shift-page-up': moveToPreviousYear, 'keydown:page-down': moveToNextMonth, 'keydown:shift-page-down': moveToNextYear, }; defineExpose({ focusOnDate, }); </script> <script lang="ts"> /** * CalendarMonth that displays all the days of a given month and allows * to move back and forth the visible month with the Next and Previous buttons * * @example * import { CalendarMonthMonth, CalendarMonthFirstDayOfWeek, CalendarPosition } from '@/internal/calendar'; * * export default { * components: { CalendarMonthMonth }, * template: ` * <calendar * :first-day-of-week="CalendarMonthFirstDayOfWeek.SUNDAY" * :is-date-disabled="(date: Date) => boolean" * :month="new Date()" * position="last" * is-range * :start-date="new Date()" * :end-date="new Date()" * @input="(selectedDate: Date) => void" * @mouseover="(event: Event) => void" * @nextMonth="() => void" * @previousMonth="() => void" * /> * ` * } */ export default { i18n: { messages }, name: 'calendar-month', }; </script> <style lang="scss" scoped src="./calendar-month.scss" /> 

package/dist/assets/components/internal/calendar/components/calendar-month/components/calendar-month-day/__test__/calendar-month-day-stub.vue

@@ -1 +0,0 @@
-<template> <table role="grid"> <tbody> <tr> <calendar-month-day v-bind="$props" :day="day" @click="day => $emit(CalendarMonthDayEvent.CLICK, day)" /> </tr> </tbody> </table> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { CalendarMonthDayEvent } from '../calendar-month-day.types'; import CalendarMonthDay from '../calendar-month-day.vue'; import { CalendarMonthDateProps } from '../calendar-month-day.props'; export default defineComponent({ components: { CalendarMonthDay }, props: CalendarMonthDateProps, setup() { return { // Enums CalendarMonthDayEvent, }; }, }); </script> 

package/dist/assets/components/internal/calendar/components/calendar-month/components/calendar-month-day/calendar-month-day.stories.ts

@@ -1 +0,0 @@
-import { action } from '@storybook/addon-actions'; import { CalendarMonthDayVariant } from './calendar-month-day.types'; import CalendarMonthDay from './calendar-month-day.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; const meta: Meta = { title: 'Calendar/Month/Day', component: CalendarMonthDay, argTypes: { // Funcs isDateDisabled: { name: 'isDateDisabled', defaultValue: '', description: 'Disables the dates that meet the criteria defined in the function.', table: { type: { summary: '(currentDate: Date) => boolean' } }, control: { disable: true }, }, // Events click: { name: 'click', defaultValue: '', description: 'Triggered when the day is clicked, allowing to detect what day was chosen', table: { type: { summary: '(selectedDay: Date) => void' } }, control: { disable: true }, }, // Enum props variant: { options: Object.values(CalendarMonthDayVariant), mapping: CalendarMonthDayVariant, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof CalendarMonthDay>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { CalendarMonthDay }, props: Object.keys(argTypes), template: ` <table> <tbody> <tr> <calendar-month-day v-bind="args" @click="clickedAction"/> </tr> </tbody> </table> `, setup(props) { const clickedAction = value => action('click')(value); return { args: isVue2 ? props : _args, // Events clickedAction, }; }, }), args: { selected: false, day: (() => { const date = new Date(); date.setDate(date.getDate() - 1); return date; })(), }, }; export const CurrentDay: Story = { ...Default, args: { day: new Date(), selected: false, }, }; 

package/dist/assets/components/internal/calendar/components/calendar-month/components/calendar-month-day/calendar-month-day.types.ts

@@ -1 +0,0 @@
-export enum CalendarMonthDayVariant { SINGLE = 'single', MIDDLE = 'middle', BEGINNING = 'beginning', END = 'end', } export enum CalendarMonthDayClass { // Variant SINGLE = CalendarMonthDayVariant.SINGLE, MIDDLE = CalendarMonthDayVariant.MIDDLE, BEGINNING = CalendarMonthDayVariant.BEGINNING, END = CalendarMonthDayVariant.END, // Selected SELECTED = 'selected', UNSELECTED = 'unselected', // Current day CURRENT_DAY = 'current-day', // Disabled DISABLED = 'disabled', } export enum CalendarMonthDayEvent { CLICK = 'click', MOUSE_OVER = 'mouseover', } 

package/dist/assets/components/internal/calendar/components/calendar-month/components/calendar-month-day/calendar-month-day.vue

@@ -1 +0,0 @@
-<template> <td class="b-calendar-month-day" :class="conditionalClasses" :tabindex="selected ? '0' : '-1'" :aria-selected="selected ? selected : undefined" :aria-disabled="disabled" :aria-current="isCurrentDay ? 'date' : undefined" :data-date="day.toDateString()" @click="e => onClick(e, day)" @mouseover="$emit(CalendarMonthDayEvent.MOUSE_OVER)" @keydown.space.enter="e => onClick(e, day)" > <div class="b-calendar-month-day__wrapper"> <bento-typography class="b-calendar-month-day__label" el="span" variant="body" strong> <time :datetime="dateTime">{{ formattedDate }}</time> </bento-typography> </div> </td> </template> <script lang="ts"> import { computed, defineComponent } from 'vue'; import { BentoTypography } from '../../../../../../typography'; import { CalendarMonthDayClass, CalendarMonthDayEvent, CalendarMonthDayVariant } from './calendar-month-day.types'; import { CalendarMonthDateProps } from './calendar-month-day.props'; import { getDateTimeFormatter } from '@/utils/ts/format-date'; import { useI18n } from '@/utils/ts/i18n'; /** * Handles the styles and states of the individual dates of the calendar. * * @example * import { CalendarMonthDay, CalendarMonthDayVariant } from './calendar-day'; * * export default { * components: { CalendarMonthDay }, * template: ` * <table> * <tbody> * <tr> * <calendar-day * :day="new Date()" * disabled * selected * :variant="CalendarMonthDayVariant.MIDDLE" * /> * </tr> * </tbody> * </table> * ` * } */ export default defineComponent({ name: 'calendar-month-day', components: { BentoTypography }, inheritAttrs: true, props: CalendarMonthDateProps, emits: [CalendarMonthDayEvent.CLICK, CalendarMonthDayEvent.MOUSE_OVER], setup(props, { emit }) { const { locale } = useI18n(undefined, true); const isCurrentDay = computed(() => { const today = new Date(); return ( props.day.getDate() === today.getDate() && props.day.getMonth() === today.getMonth() && props.day.getFullYear() === today.getFullYear() ); }); /** * Only get translated day part of the date */ const formattedDate = computed(() => { const formatter = getDateTimeFormatter(locale.value, { day: 'numeric' }); const parts = formatter.formatToParts(props.day); const dayPart = parts.find(part => part.type === 'day'); return dayPart?.value ?? ''; }); const dateTime = computed(() => (Number.isNaN(props.day.getTime()) ? undefined : props.day.toISOString())); const conditionalClasses = computed(() => ({ // Variants [`b-calendar-month-day--${CalendarMonthDayClass.BEGINNING}`]: props.variant === CalendarMonthDayVariant.BEGINNING, [`b-calendar-month-day--${CalendarMonthDayClass.MIDDLE}`]: props.variant === CalendarMonthDayVariant.MIDDLE, [`b-calendar-month-day--${CalendarMonthDayClass.END}`]: props.variant === CalendarMonthDayVariant.END, [`b-calendar-month-day--${CalendarMonthDayClass.SINGLE}`]: props.variant === CalendarMonthDayVariant.SINGLE, // Selected [`b-calendar-month-day--${CalendarMonthDayClass.UNSELECTED}`]: !props.selected, [`b-calendar-month-day--${CalendarMonthDayClass.SELECTED}`]: props.selected, // Current Day [`b-calendar-month-day--${CalendarMonthDayClass.CURRENT_DAY}`]: isCurrentDay.value, // Disabled [`b-calendar-month-day--${CalendarMonthDayClass.DISABLED}`]: props.disabled, })); const onClick = (e: MouseEvent | KeyboardEvent, selectedDay: Date) => { if (!props.disabled) { emit(CalendarMonthDayEvent.CLICK, selectedDay, props.day); } else { e.preventDefault(); e.stopPropagation(); } }; return { // Values conditionalClasses, isCurrentDay, formattedDate, dateTime, // Enums CalendarMonthDayEvent, // Events onClick, }; }, }); </script> <style lang="scss" scoped src="./calendar-month-day.scss" /> 

package/dist/assets/components/internal/calendar/components/calendar-month/composables/granular-min-max-date.types.ts

@@ -1 +0,0 @@
-import type { CalendarFirstDayOfWeek, CalendarGranularityConfig } from '../../../calendar.types'; export interface UseMinMaxDateProps { firstDayOfWeek: CalendarFirstDayOfWeek; min: Date; max: Date; } export type UseGranularMinMaxDate = (props: UseMinMaxDateProps) => { getGranularCalendarLimits: (granularity: CalendarGranularityConfig) => { min: Date; max: Date }; }; 

package/dist/assets/components/internal/calendar/components/calendar-year/calendar-year.types.ts

@@ -1 +0,0 @@
-import { type CalendarIsDateDisabled, type CalendarPosition, type CalendarYearRange } from '../../calendar.types'; export interface CalendarYearProps { /** * end of the selected range */ endDate?: Date; /** * Indicate if a date should be disabled or not */ isDateDisabled?: CalendarIsDateDisabled; /** * Indicates if the calendar is part of a range date picker or a single date picker */ isRange?: boolean; /** * Sets a minimum limit for selectable dates - dates before `min` will not be selectable */ min?: Date; /** * Sets a maximum limit for selectable dates - dates after `max` will not be selectable */ max?: Date; /** * Range of years to be selectable from the year dropdown */ yearRange?: CalendarYearRange; /** * When rendering multiple calendars, this property allows to render the * Next and Previous calendar buttons to the right, left or not at all * depending on the position: Unique (only 1), First, Middle or Last */ position?: CalendarPosition; /** * start of the selected range */ startDate?: Date; /** * Year to be displayed in the calendar */ year: Date; } 

package/dist/assets/components/internal/calendar/components/calendar-year/calendar-year.vue

@@ -1 +0,0 @@
-<template> <div v-bento-keyboard-navigation-directive class="b-calendar-year" v-on="listeners"> <div class="b-calendar-year__year-selector"> <!-- go to previous year --> <div class="b-calendar-year__previous"> <bento-button v-if="shouldShowPreviousYearButton" variant="tertiary" @click="moveToPreviousYear($event, true, 1)" > <template #iconLeft> <chevron-left-icon :svg-title="t('previousYear')" /> </template> </bento-button> </div> <!-- year --> <div class="b-calendar-year__year-label-container"> <!-- Year selector --> <calendar-year-selector :current-year="year.getFullYear()" :year-range="yearRange" :min="min" :max="max" @update:year="onYearSelected" /> </div> <!-- go to next year --> <div class="b-calendar-year__next"> <bento-button v-if="shouldShowNextYearButton" variant="tertiary" @click="moveToNextYear($event, true)"> <template #iconLeft> <chevron-right-icon :svg-title="t('nextYear')" /> </template> </bento-button> </div> </div> <table class="b-calendar-year__year-container" role="grid" :aria-labelledby="yearLabelId"> <tbody> <tr v-for="(row, index) in monthRows" :key="index"> <calendar-year-month v-for="(month, monthIndex) in row" :ref="addDayRef(month)" :key="`calendar-month-${monthIndex}`" :month="month" :disabled="isDateDisabled(month)" :selected="isSelectedDate(month)" :variant="monthVariant(month)" @click="onMonthClicked" @mouseover="emit('mouseover', month)" /> </tr> </tbody> </table> </div> </template> <script setup lang="ts"> import { computed, toRef } from 'vue'; import { isSameMonth } from 'date-fns/isSameMonth'; import { isWithinInterval } from 'date-fns/isWithinInterval'; import BentoButton from '@/components/button/button.vue'; import CalendarYearMonth from './components/calendar-year-month/calendar-year-month.vue'; import { CalendarYearSelector } from '../calendar-year-selector'; import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left'; import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right'; import { BentoKeyboardNavigationDirective as vBentoKeyboardNavigationDirective } from '@/directives'; import { generateUid } from '@/core/utils/ts'; import { useI18n } from '@/utils/ts/i18n'; import { useMoveCalendarDate } from '@/internal/calendar/components/calendar-month/composables/move-calendar-date'; import { type CalendarYearProps } from './calendar-year.types'; import { CalendarYearMonthVariant } from './components/calendar-year-month/calendar-year-month.types'; import { type CalendarEmit, CalendarPosition } from '../../calendar.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const yearLabelId = generateUid('bento-date-picker-year-label'); const props = withDefaults(defineProps<CalendarYearProps>(), { endDate: null, isDateDisabled: undefined, isRange: false, min: null, max: null, yearRange: undefined, position: CalendarPosition.UNIQUE, startDate: null, }); const emit = defineEmits<CalendarEmit>(); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const isDateDisabled = (date: Date) => (props.min && date < props.min) || (props.max && date > props.max) || props.isDateDisabled?.(date); /** * Renders the previous year button if it's Unique or First calendar */ const shouldShowPreviousYearButton = computed(() => (['first', 'unique'] as Array<CalendarPosition>).includes(props.position) ); /** * Renders the next year button if it's Unique or Last calendar */ const shouldShowNextYearButton = computed(() => (['last', 'unique'] as Array<CalendarPosition>).includes(props.position) ); const { internalDate, // Calendar refs addDayRef, // Day navigation moveToPreviousMonth, moveToPreviousYear, moveToNextMonth, moveToNextYear, moveToFirstMonthOfYear, moveToLastMonthOfYear, focusOnDate, } = useMoveCalendarDate( { currentSelectedDate: toRef(props, 'startDate'), month: toRef(props, 'year'), isDateDisabled, }, emit ); const onYearSelected = (newYear: number) => { const currentYear = props.year.getFullYear(); const diffYears = newYear - currentYear; if (diffYears > 0) { moveToNextYear(null, true, diffYears); } else if (diffYears < 0) { moveToPreviousYear(null, true, Math.abs(diffYears)); } }; /** * Calculates all the months of the current "props.month" * and adds the respective day number to each column and week */ const monthRows = computed(() => { const rows = []; let count = 0; for (let i = 0; i < 3; i++) { const innerArray = []; for (let j = 0; j < 4; j++) { innerArray.push(new Date(props.year.getFullYear(), count++, 1)); } rows.push(innerArray); } return rows; }); /** * Calculates the variation of the days selected. * For single select it's always SINGLE * For ranges: * - Start & End is the same: SINGLE * - Start: BEGINNING * - End: END * - Within the range: MIDDLE * @param {Date} day Current day */ const monthVariant = (day: Date) => { if (!props.isRange || isSameMonth(props.startDate, props.endDate)) { return CalendarYearMonthVariant.SINGLE; } if (props.startDate && isSameMonth(props.startDate, day)) { return CalendarYearMonthVariant.BEGINNING; } if (props.endDate && isSameMonth(props.endDate, day)) { return CalendarYearMonthVariant.END; } if (props.startDate && props.endDate && isWithinInterval(day, { start: props.startDate, end: props.endDate })) { return CalendarYearMonthVariant.MIDDLE; } return null; }; /** * Checks every date in the calendar to see if it's selected. * @param date Current date in the calendar */ const isSelectedDate = (date: Date) => { // Single selection if (internalDate.value && isSameMonth(internalDate.value, date)) { return true; } // Range return ( props.startDate && props.endDate && isWithinInterval(date, { start: props.startDate, end: props.endDate }) ); }; const onMonthClicked = (selectedDate: Date) => { emit('input', selectedDate); }; const listeners = !props.isRange ? { 'keydown:arrow-right': moveToNextMonth, 'keydown:arrow-left': moveToPreviousMonth, 'keydown:arrow-up': (ev: Event) => moveToPreviousMonth(ev, false, 4), 'keydown:arrow-down': (ev: Event) => moveToNextMonth(ev, false, 4), 'keydown:home': moveToFirstMonthOfYear, 'keydown:end': moveToLastMonthOfYear, 'keydown:page-up': moveToPreviousYear, 'keydown:page-down': moveToNextYear, } : {}; defineExpose({ focusOnDate }); </script> <script lang="ts"> /** * CalendarYear that displays all the months of a given year and allows * to move back and forth the visible year with the Next and Previous buttons * * @example * import { CalendarYear } from '@/internal/calendar'; * * export default { * components: { CalendarYear }, * template: ` * <calendar-year * :is-date-disabled="(date: Date) => boolean" * :year="new Date()" * is-range * :start-date="new Date()" * :end-date="new Date()" * @input="(selectedDate: Date) => void" * @mouseover="(event: Event) => void" * @nextMonth="() => void" * @previousMonth="() => void" * /> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./calendar-year.scss" /> 

package/dist/assets/components/internal/calendar/components/calendar-year/components/calendar-year-month/__test__/calendar-year-month-stub.vue

@@ -1 +0,0 @@
-<template> <table> <tbody> <tr> <calendar-year-month :month="month" :disabled="disabled" :selected="selected" :variant="variant" @click="date => $emit(CalendarYearMonthEvent.CLICK, date)" /> </tr> </tbody> </table> </template> <script setup lang="ts"> import { CalendarYearMonthEvent, type CalendarYearMonthProps } from '../calendar-year-month.types'; import CalendarYearMonth from '../calendar-year-month.vue'; defineProps<CalendarYearMonthProps>(); </script> 

package/dist/assets/components/internal/calendar/components/calendar-year/components/calendar-year-month/calendar-year-month.types.ts

@@ -1 +0,0 @@
-export interface CalendarYearMonthProps { /** * Date to be displayed as the calendar month. From 1st to 12th. */ month: Date; /** * Indicate if a date should be disabled or not */ disabled?: boolean; /** * Changes the state of the calendar month to selected. */ selected?: boolean; /** * When the month is selected, this indicates if the selection is a single month or part of a range. * If it's a range it can be at the beginning, middle or end of the selection. */ variant?: `${CalendarYearMonthVariant}`; } /** * Private types */ export enum CalendarYearMonthVariant { SINGLE = 'single', MIDDLE = 'middle', BEGINNING = 'beginning', END = 'end', } export enum CalendarYearMonthClass { // Variant SINGLE = CalendarYearMonthVariant.SINGLE, MIDDLE = CalendarYearMonthVariant.MIDDLE, BEGINNING = CalendarYearMonthVariant.BEGINNING, END = CalendarYearMonthVariant.END, // Selected SELECTED = 'selected', UNSELECTED = 'unselected', // Current month CURRENT_MONTH = 'current-month', // Disabled DISABLED = 'disabled', } export enum CalendarYearMonthEvent { CLICK = 'click', MOUSE_OVER = 'mouseover', } 

package/dist/assets/components/internal/calendar/components/calendar-year/components/calendar-year-month/calendar-year-month.vue

@@ -1 +0,0 @@
-<template> <td class="b-calendar-year-month" :class="conditionalClasses" :tabindex="selected ? '0' : '-1'" :aria-selected="selected ? selected : undefined" @click="e => onClick(e, month)" @mouseover="emit(CalendarYearMonthEvent.MOUSE_OVER)" @keydown.space.enter="e => onClick(e, month)" > <div class="b-calendar-year-month__wrapper"> <bento-date class="b-calendar-year-month__label" :date="month" :format="BentoDateFormat.SHORT_MONTH" /> </div> </td> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoDate, BentoDateFormat } from '@/components/date'; import { CalendarYearMonthClass, CalendarYearMonthEvent, type CalendarYearMonthProps, CalendarYearMonthVariant, } from './calendar-year-month.types'; const props = withDefaults(defineProps<CalendarYearMonthProps>(), { disabled: false, selected: false, variant: CalendarYearMonthVariant.SINGLE, }); const emit = defineEmits<{ (e: 'click', s: Date, d: Date); (e: 'mouseover'); }>(); const isCurrentMonth = computed(() => { const today = new Date(); return props.month.getMonth() === today.getMonth() && props.month.getFullYear() === today.getFullYear(); }); const conditionalClasses = computed(() => ({ // Variants [`b-calendar-year-month--${CalendarYearMonthClass.BEGINNING}`]: props.variant === CalendarYearMonthVariant.BEGINNING, [`b-calendar-year-month--${CalendarYearMonthClass.MIDDLE}`]: props.variant === CalendarYearMonthVariant.MIDDLE, [`b-calendar-year-month--${CalendarYearMonthClass.END}`]: props.variant === CalendarYearMonthVariant.END, [`b-calendar-year-month--${CalendarYearMonthClass.SINGLE}`]: props.variant === CalendarYearMonthVariant.SINGLE, // Selected [`b-calendar-year-month--${CalendarYearMonthClass.UNSELECTED}`]: !props.selected, [`b-calendar-year-month--${CalendarYearMonthClass.SELECTED}`]: props.selected, // Current month [`b-calendar-year-month--${CalendarYearMonthClass.CURRENT_MONTH}`]: isCurrentMonth.value, // Disabled [`b-calendar-year-month--${CalendarYearMonthClass.DISABLED}`]: props.disabled, })); const onClick = (e: MouseEvent | KeyboardEvent, selectedDay: Date) => { if (!props.disabled) { emit(CalendarYearMonthEvent.CLICK, selectedDay, props.month); } else { e.preventDefault(); e.stopPropagation(); } }; </script> <script lang="ts"> /** * Handles the styles and states of the individual months of the calendar. * * @example * import { CalendarYearMonth, CalendarYearMonthVariant } from './calendar-year-month'; * * export default { * components: { CalendarYearMonth }, * template: ` * <table> * <tbody> * <tr> * <calendar-year-month * :month="new Date()" * disabled * selected * :variant="CalendarYearMonthVariant.MIDDLE" * /> * </tr> * </tbody> * </table> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./calendar-year-month.scss" /> 

package/dist/assets/components/internal/calendar/components/calendar-year-selector/calendar-year-selector.types.ts

@@ -1 +0,0 @@
-import type { CalendarYearRange } from '../../calendar.types'; export interface CalendarYearSelectorProps { /** * The currently selected/displayed year */ currentYear: number; /** * Range of years to be selectable from the year dropdown * @default undefined */ yearRange?: CalendarYearRange; /** * Sets a maximum limit for selectable dates - dates after `max` will not be selectable * @default null */ max?: Date; /** * Sets a minimum limit for selectable dates - dates before `min` will not be selectable * @default null */ min?: Date; } 

package/dist/assets/components/internal/calendar/components/calendar-year-selector/calendar-year-selector.vue

@@ -1 +0,0 @@
-<template> <bento-dropdown :items="yearOptions" :aria-label="t('selectYear')" :model-value="currentYear" @update:model-value="onYearSelected" /> </template> <script setup lang="ts"> import { computed, provide } from 'vue'; import BentoDropdown from '@/components/dropdown/dropdown.vue'; import { useI18n } from '@/utils/ts/i18n'; import type { CalendarYearSelectorProps } from './calendar-year-selector.types'; import { DROPDOWN_SMALL_SIZE_INJECTION_KEY, DROPDOWN_UNDERLINE_STYLE_INJECTION_KEY, } from '@/components/dropdown/dropdown.keys'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const DEFAULT_YEAR_RANGE_OFFSET = 100; const props = withDefaults(defineProps<CalendarYearSelectorProps>(), { yearRange: undefined, max: undefined, min: undefined, }); const emit = defineEmits<{ (e: 'update:year', year: number): void; }>(); const { t } = useI18n<{ message: MessageSchema }>({ messages }); // Provide dropdown styles provide(DROPDOWN_SMALL_SIZE_INJECTION_KEY, true); provide(DROPDOWN_UNDERLINE_STYLE_INJECTION_KEY, true); /** * Computes the available year options for the calendar's year selector dropdown. * The selectable range is determined by the `yearRange` prop, which dictates how many * years in the past and future should be available, while respecting `min` and `max` date constraints. */ const yearOptions = computed(() => { // Use the system's current year as the anchor so the range doesn't shift during month navigation const systemCurrentYear = new Date().getFullYear(); let startYear = props.yearRange?.minYear ?? systemCurrentYear - DEFAULT_YEAR_RANGE_OFFSET; let endYear = props.yearRange?.maxYear ?? systemCurrentYear + DEFAULT_YEAR_RANGE_OFFSET; // Prevent the user from scrolling to years earlier than the minimum allowed date if (props.min && props.min.getFullYear() > startYear) { startYear = props.min.getFullYear(); } // Prevent the user from scrolling to years earlier than the maximum allowed date if (props.max && props.max.getFullYear() < endYear) { endYear = props.max.getFullYear(); } // Populate options array const optionsLength = Math.max(0, endYear - startYear + 1); return new Array(optionsLength).fill(0).map((_, index) => { const year = startYear + index; return { label: String(year), value: year }; }); }); const onYearSelected = (newYear: number) => { emit('update:year', newYear); }; </script> <script lang="ts"> /** * A standalone year selector dropdown for the calendar component. */ export default { i18n: { messages }, name: 'calendar-year-selector', }; </script> 

package/dist/assets/components/internal/calendar/composables/use-granularity-adjustments.types.ts

@@ -1 +0,0 @@
-import { type Day } from 'date-fns'; import type { CalendarGranularityConfig } from '../calendar.types'; /** Identifies one endpoint of a date range. */ export type BentoRangeEndpoint = 'start' | 'end'; /** Options for applying every date-range constraint in a consistent order. */ export interface BentoNormalizeRangeOptions { /** Requested start of the range. */ startDate: Date; /** Requested end of the range. */ endDate: Date; /** Endpoint that must stay unchanged if the range needs to be shortened. */ fixedEndpoint: BentoRangeEndpoint; /** Active granularity, including an optional granularity-specific maximum range. */ granularity?: CalendarGranularityConfig; /** Whether to expand the range to complete granularity units. */ alignToGranularity?: boolean; /** Maximum range used when the active granularity does not define one. */ fallbackMaxRange?: number; /** Earliest permitted date. */ min?: Date; /** Latest permitted date. */ max?: Date; } /** Date operations needed to measure and shorten a range in one granularity unit. */ export interface BentoGranularityClampConfig { /** Counts how many units the range spans. */ getCount: (end: Date, start: Date) => number; /** Moves a date backwards by the specified number of units. */ sub: (date: Date, amount: number) => Date; /** Moves a date forwards by the specified number of units. */ add: (date: Date, amount: number) => Date; } /** Functions that normalize complete ranges. */ export type UseGranularityAdjustments = (firstDayOfWeek: Day) => { normalizeRange: (options: BentoNormalizeRangeOptions) => { startDate: Date; endDate: Date }; };