From: Mark Otto Date: Thu, 12 Mar 2026 17:03:51 +0000 (-0700) Subject: Add VCP to build and docs guides (#42157) X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=f9628025d35d1be8b25ffe5431758e7e85dfa678;p=thirdparty%2Fbootstrap.git Add VCP to build and docs guides (#42157) * Add VCP to build and docsguides * fix --- diff --git a/README.md b/README.md index 6e2c6c695c..5d0885df54 100644 --- a/README.md +++ b/README.md @@ -115,7 +115,7 @@ Within the download you’ll find the following directories and files, logically ``` -We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Floating UI](https://floating-ui.com/). All CSS files work for both LTR and RTL layouts thanks to logical properties—simply set `dir="rtl"` on your HTML element. +We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://web.dev/articles/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Floating UI](https://floating-ui.com/) and [Vanilla Calendar Pro](https://vanilla-calendar.pro/). All CSS files work for both LTR and RTL layouts thanks to logical properties—simply set `dir="rtl"` on your HTML element. ## Bugs and feature requests diff --git a/build/generate-sri.mjs b/build/generate-sri.mjs index c3d76667b7..ab9409ab55 100644 --- a/build/generate-sri.mjs +++ b/build/generate-sri.mjs @@ -40,6 +40,10 @@ const files = [ { file: 'node_modules/@floating-ui/dom/dist/floating-ui.dom.umd.min.js', configPropertyName: 'floating_ui_hash' + }, + { + file: 'node_modules/vanilla-calendar-pro/index.js', + configPropertyName: 'vanilla_calendar_pro_hash' } ] diff --git a/build/rollup.config.mjs b/build/rollup.config.mjs index 3483557f99..a8da028e98 100644 --- a/build/rollup.config.mjs +++ b/build/rollup.config.mjs @@ -12,7 +12,7 @@ const BUNDLE = process.env.BUNDLE === 'true' const ESM = process.env.ESM === 'true' let destinationFile = `bootstrap${ESM ? '.esm' : ''}` -const external = ['@floating-ui/dom'] +const external = ['@floating-ui/dom', 'vanilla-calendar-pro'] const plugins = [ babel({ // Only transpile our source code @@ -22,14 +22,16 @@ const plugins = [ }) ] const globals = { - '@floating-ui/dom': 'FloatingUIDOM' + '@floating-ui/dom': 'FloatingUIDOM', + 'vanilla-calendar-pro': 'VanillaCalendarPro' } if (BUNDLE) { destinationFile += '.bundle' - // Remove last entry in external array to bundle Floating UI - external.pop() + // Remove all entries in external array to bundle Floating UI and Vanilla Calendar Pro + external.length = 0 delete globals['@floating-ui/dom'] + delete globals['vanilla-calendar-pro'] plugins.push( replace({ 'process.env.NODE_ENV': '"production"', diff --git a/config.yml b/config.yml index 2715816227..506fae1f54 100644 --- a/config.yml +++ b/config.yml @@ -43,6 +43,9 @@ cdn: floating_ui: "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.0/dist/floating-ui.dom.umd.min.js" floating_ui_hash: "sha384-R7p1RqabZNhI+RdPNIzTouzd/LBVorZ0Tn3ApcogSOk+HF3o+P0HIenrUw/n0MOj" floating_ui_esm: "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.0/dist/floating-ui.dom.esm.min.js" + vanilla_calendar_pro: "https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@3.1.0/index.js" + vanilla_calendar_pro_hash: "sha384-uufJjV19/4zCvBe4t3zJFWdYpBIrAC78Ef5NN2i4VjmTowSYuAx+m56vF6ccI4V3" + vanilla_calendar_pro_esm: "https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@3.1.0/index.mjs" anchors: min: 2 diff --git a/package.json b/package.json index 7bcb0c5723..60fa15a04d 100644 --- a/package.json +++ b/package.json @@ -202,13 +202,15 @@ "shim": { "js/bootstrap": { "deps": [ - "@floating-ui/dom" + "@floating-ui/dom", + "vanilla-calendar-pro" ] } }, "dependencies": {}, "peerDependencies": { - "@floating-ui/dom": "^1.7.0" + "@floating-ui/dom": "^1.7.0", + "vanilla-calendar-pro": "^3.1.0" } }, "overrides": { diff --git a/site/data/plugins.yml b/site/data/plugins.yml index 3077d3a36c..d4c56257df 100644 --- a/site/data/plugins.yml +++ b/site/data/plugins.yml @@ -14,6 +14,10 @@ description: Expand and collapse areas of content, or create accordions. link: components/collapse/ +- name: Datepicker + description: Add date selection to form inputs. Built on Vanilla Calendar Pro. + link: forms/datepicker/ + - name: Dialog description: Add flexible and responsive dialogs to your project. link: components/dialog/ diff --git a/site/src/content/docs/customize/optimize.mdx b/site/src/content/docs/customize/optimize.mdx index 195f2e3ba8..6e92ee0d6e 100644 --- a/site/src/content/docs/customize/optimize.mdx +++ b/site/src/content/docs/customize/optimize.mdx @@ -14,7 +14,7 @@ If you’re not using a component, comment it out or delete it entirely. For exa ## Lean JavaScript -Bootstrap’s JavaScript includes every component in our primary dist files (`bootstrap.js` and `bootstrap.min.js`), and even our primary dependency (Floating UI) with our bundle files (`bootstrap.bundle.js` and `bootstrap.bundle.min.js`). While you’re customizing via Sass, be sure to remove related JavaScript. +Bootstrap’s JavaScript includes every component in our primary dist files (`bootstrap.js` and `bootstrap.min.js`), and even our primary dependencies (Floating UI and Vanilla Calendar Pro) with our bundle files (`bootstrap.bundle.js` and `bootstrap.bundle.min.js`). While you’re customizing via Sass, be sure to remove related JavaScript. For instance, assuming you’re using your own JavaScript bundler like Webpack, Parcel, or Vite, you’d only import the JavaScript you plan on using. In the example below, we show how to just include our dialog JavaScript: @@ -35,7 +35,7 @@ import 'bootstrap/js/dist/dialog'; // import 'bootstrap/js/dist/tooltip'; ``` -This way, you’re not including any JavaScript you don’t intend to use for components like buttons, carousels, and tooltips. If you’re importing dropdowns, tooltips or popovers, be sure to list the Floating UI dependency in your `package.json` file. +This way, you’re not including any JavaScript you don’t intend to use for components like buttons, carousels, and tooltips. If you’re importing dropdowns, tooltips or popovers, be sure to list the Floating UI dependency in your `package.json` file. If you’re using the datepicker, be sure to also list the Vanilla Calendar Pro dependency. **Heads up!** Files in `bootstrap/js/dist` use the **default export**. To use them, do the following: diff --git a/site/src/content/docs/customize/rtl.mdx b/site/src/content/docs/customize/rtl.mdx index 74ca2b505e..45be8c8bc6 100644 --- a/site/src/content/docs/customize/rtl.mdx +++ b/site/src/content/docs/customize/rtl.mdx @@ -89,12 +89,13 @@ Here's a modified RTL starter template: - + - + diff --git a/site/src/content/docs/getting-started/install.mdx b/site/src/content/docs/getting-started/install.mdx index 19b0eae953..13136ee19d 100644 --- a/site/src/content/docs/getting-started/install.mdx +++ b/site/src/content/docs/getting-started/install.mdx @@ -83,10 +83,11 @@ Here are our primary CDN links for CSS and JavaScript: ``` -If you’re using our compiled JavaScript and prefer to include Floating UI separately, add Floating UI before our JS, via a CDN preferably. +If you’re using our compiled JavaScript and prefer to include Floating UI and Vanilla Calendar Pro separately, add them before our JS, via a CDN preferably. ```html + ``` @@ -94,7 +95,7 @@ If you’re using our compiled JavaScript and prefer to include Floating UI sepa | File type | URL | | --- | --- | | CSS | [`[[config:cdn.css]]`]([[config:cdn.css]]) | -| JS (with Floating UI) | [`[[config:cdn.js_bundle]]`]([[config:cdn.js_bundle]]) | +| JS bundle (with Floating UI and Vanilla Calendar Pro) | [`[[config:cdn.js_bundle]]`]([[config:cdn.js_bundle]]) | ### Using CDNs @@ -130,7 +131,7 @@ You can also do the old fashioned thing and download Bootstrap manually. Choose | Type | Description | Link | | --- | --- | --- | -| Distribution files | Ready-to-use compiled and minified CSS and JavaScript files. Doesn't include documentation, source files, or dependencies like Floating UI. | Download | +| Distribution files | Ready-to-use compiled and minified CSS and JavaScript files. Doesn't include documentation, source files, or dependencies like Floating UI and Vanilla Calendar Pro. | Download | | Source files | Sass, JavaScript, and documentation files for compiling with your own asset pipeline. Requires [Sass compiler]([[docsref:/guides/contribute#sass]]), [Autoprefixer](https://github.com/postcss/autoprefixer), and a JavaScript bundler like [Rollup](https://rollupjs.org/) or [Webpack](https://webpack.js.org/). | Download | diff --git a/site/src/content/docs/getting-started/javascript.mdx b/site/src/content/docs/getting-started/javascript.mdx index 031540337a..8d6becc31d 100644 --- a/site/src/content/docs/getting-started/javascript.mdx +++ b/site/src/content/docs/getting-started/javascript.mdx @@ -6,13 +6,14 @@ toc: true ## JS components -Curious which components explicitly require our JavaScript and Floating UI? +Curious which components explicitly require our JavaScript and Floating UI or Vanilla Calendar Pro? - Accordions for extending our Collapse plugin - Alerts for dismissing - Buttons for toggling states and checkbox/radio functionality - Carousel for all slide behaviors, controls, and indicators - Collapse for toggling visibility of content +- Datepicker for date selection (also requires [Vanilla Calendar Pro](https://vanilla-calendar.pro/)) - Dropdowns for displaying and positioning (also requires [Floating UI](https://floating-ui.com/)) - Modals for displaying, positioning, and scroll behavior - Navbar for extending our Collapse and Offcanvas plugins to implement responsive behaviors @@ -59,19 +60,21 @@ We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootst ``` -Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. [Read more about JS modules in the browser.](https://v8.dev/features/modules#specifiers) That’s why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. However, this is further complicated by our Floating UI dependency, which imports Floating UI into our JavaScript like so: +Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. [Read more about JS modules in the browser.](https://v8.dev/features/modules#specifiers) That’s why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. However, this is further complicated by our Floating UI and Vanilla Calendar Pro dependencies, which are imported into our JavaScript like so: ```js import * as Popper from "@floating-ui/dom" +import { Calendar } from "vanilla-calendar-pro" ``` If you try this as-is, you’ll see an error in the console like the following: ```text Uncaught TypeError: Failed to resolve module specifier "@floating-ui/dom". Relative references must start with either "/", "./", or "../". +Uncaught TypeError: Failed to resolve module specifier "vanilla-calendar-pro". Relative references must start with either "/", "./", or "../". ``` -To fix this, you can use an `importmap` to resolve the arbitrary module names to complete paths. If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap`, you’ll need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) project. Here’s how it works for Bootstrap and Floating UI: +To fix this, you can use an `importmap` to resolve the arbitrary module names to complete paths. If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap`, you’ll need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) project. Here’s how it works for Bootstrap, Floating UI, and Vanilla Calendar Pro: ```html @@ -91,6 +94,7 @@ To fix this, you can use an `importmap` to resolve the arbitrary module names to { "imports": { "@floating-ui/dom": "[[config:cdn.floating_ui_esm]]", + "vanilla-calendar-pro": "[[config:cdn.vanilla_calendar_pro_esm]]", "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@[[config:current_version]]/dist/js/bootstrap.esm.min.js" } } @@ -108,7 +112,7 @@ To fix this, you can use an `importmap` to resolve the arbitrary module names to Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. -Our dropdowns, popovers, and tooltips also depend on [Floating UI](https://floating-ui.com/). +Our dropdowns, popovers, and tooltips also depend on [Floating UI](https://floating-ui.com/). Our datepicker also depends on [Vanilla Calendar Pro](https://vanilla-calendar.pro/). ## Data attributes diff --git a/site/src/content/docs/guides/npm.mdx b/site/src/content/docs/guides/npm.mdx index ff823a7b1c..6d34726969 100644 --- a/site/src/content/docs/guides/npm.mdx +++ b/site/src/content/docs/guides/npm.mdx @@ -26,10 +26,10 @@ We’re building a npm project with Bootstrap from scratch, so there are some pr npm init -y ``` -2. **Install Bootstrap.** Now we can install Bootstrap. We’ll also install Floating UI since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Floating UI here. +2. **Install Bootstrap.** Now we can install Bootstrap. We’ll also install Floating UI and Vanilla Calendar Pro since some of our components depend on them. If you don’t plan on using dropdowns, popovers, or tooltips, you can omit Floating UI. If you don’t plan on using the datepicker, you can omit Vanilla Calendar Pro. ```sh - npm i --save bootstrap @floating-ui/dom + npm i --save bootstrap @floating-ui/dom vanilla-calendar-pro ``` 3. **Install additional dependencies.** In addition to Bootstrap, we need a few more dependencies to compile and post-process our CSS. Sass compiles our source `.scss` files into CSS, and Autoprefixer and PostCSS handle browser compatibility. We install the `postcss-cli` package so we can run PostCSS from the command line. diff --git a/site/src/content/docs/guides/parcel.mdx b/site/src/content/docs/guides/parcel.mdx index 6f90b1d824..3b20cc8f21 100644 --- a/site/src/content/docs/guides/parcel.mdx +++ b/site/src/content/docs/guides/parcel.mdx @@ -32,10 +32,10 @@ We’re building a Parcel project with Bootstrap from scratch, so there are some npm i --save-dev parcel ``` -3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Floating UI here. +3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI and Vanilla Calendar Pro since some of our components depend on them. If you don’t plan on using dropdowns, popovers, or tooltips, you can omit Floating UI. If you don’t plan on using the datepicker, you can omit Vanilla Calendar Pro. ```sh - npm i --save bootstrap @floating-ui/dom + npm i --save bootstrap @floating-ui/dom vanilla-calendar-pro ``` Now that we have all the necessary dependencies installed, we can get to work creating the project files and importing Bootstrap. @@ -130,7 +130,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss` *You can also import our stylesheets individually if you want. [Read our Sass import docs]([[docsref:/customize/sass#importing]]) for details.* -2. **Import Bootstrap’s JS.** Add the following to `src/js/main.js` to import all of Bootstrap’s JS. Floating UI will be imported automatically through Bootstrap. +2. **Import Bootstrap’s JS.** Add the following to `src/js/main.js` to import all of Bootstrap’s JS. Floating UI and Vanilla Calendar Pro will be imported automatically through Bootstrap. ```js // Import all of Bootstrap’s JS diff --git a/site/src/content/docs/guides/quickstart.mdx b/site/src/content/docs/guides/quickstart.mdx index 0af7c56c90..ad9c11975c 100644 --- a/site/src/content/docs/guides/quickstart.mdx +++ b/site/src/content/docs/guides/quickstart.mdx @@ -25,7 +25,7 @@ Get started using Bootstrap in seconds by including our production-ready CSS and ``` -2. **Include Bootstrap’s CSS and JS.** Place the `` tag in the `` for our CSS, and the ` + ``` diff --git a/site/src/content/docs/guides/vite.mdx b/site/src/content/docs/guides/vite.mdx index 5bc72b2dd8..2cf4e2e108 100644 --- a/site/src/content/docs/guides/vite.mdx +++ b/site/src/content/docs/guides/vite.mdx @@ -32,10 +32,10 @@ We’re building a Vite project with Bootstrap from scratch, so there are some p npm i --save-dev vite ``` -3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Floating UI here. +3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI and Vanilla Calendar Pro since some of our components depend on them. If you don’t plan on using dropdowns, popovers, or tooltips, you can omit Floating UI. If you don’t plan on using the datepicker, you can omit Vanilla Calendar Pro. ```sh - npm i --save bootstrap @floating-ui/dom + npm i --save bootstrap @floating-ui/dom vanilla-calendar-pro ``` 4. **Install additional dependency.** In addition to Vite and Bootstrap, we need another dependency (Sass) to properly import and bundle Bootstrap’s CSS. @@ -148,7 +148,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s *You can also import our stylesheets individually if you want. [Read our Sass import docs]([[docsref:/customize/sass#importing]]) for details.* -2. **Next we load the CSS and import Bootstrap’s JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap’s JS. Floating UI will be imported automatically through Bootstrap. +2. **Next we load the CSS and import Bootstrap’s JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap’s JS. Floating UI and Vanilla Calendar Pro will be imported automatically through Bootstrap. ```js // Import our custom CSS diff --git a/site/src/content/docs/guides/webpack.mdx b/site/src/content/docs/guides/webpack.mdx index 937d666a65..89395206db 100644 --- a/site/src/content/docs/guides/webpack.mdx +++ b/site/src/content/docs/guides/webpack.mdx @@ -32,10 +32,10 @@ We’re building a Webpack project with Bootstrap from scratch, so there are som npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin ``` -3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don’t plan on using those components, you can omit Floating UI here. +3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Floating UI and Vanilla Calendar Pro since some of our components depend on them. If you don’t plan on using dropdowns, popovers, or tooltips, you can omit Floating UI. If you don’t plan on using the datepicker, you can omit Vanilla Calendar Pro. ```sh - npm i --save bootstrap @floating-ui/dom + npm i --save bootstrap @floating-ui/dom vanilla-calendar-pro ``` 4. **Install additional dependencies.** In addition to Webpack and Bootstrap, we need a few more dependencies to properly import and bundle Bootstrap’s CSS and JS with Webpack. These include Sass, some loaders, and Autoprefixer. @@ -221,7 +221,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first *You can also import our stylesheets individually if you want. [Read our Sass import docs]([[docsref:/customize/sass#importing]]) for details.* -3. **Next we load the CSS and import Bootstrap’s JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap’s JS. Floating UI will be imported automatically through Bootstrap. +3. **Next we load the CSS and import Bootstrap’s JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap’s JS. Floating UI and Vanilla Calendar Pro will be imported automatically through Bootstrap. ```js // Import our custom CSS diff --git a/site/src/libs/config.ts b/site/src/libs/config.ts index 0c5b252e8c..38d29d213c 100644 --- a/site/src/libs/config.ts +++ b/site/src/libs/config.ts @@ -29,7 +29,10 @@ const configSchema = z.object({ js_bundle_hash: z.string(), floating_ui: z.string().url(), floating_ui_esm: z.string().url(), - floating_ui_hash: z.string() + floating_ui_hash: z.string(), + vanilla_calendar_pro: z.string().url(), + vanilla_calendar_pro_esm: z.string().url(), + vanilla_calendar_pro_hash: z.string() }), current_version: zVersionSemver, current_ruby_version: zVersionSemver, diff --git a/site/src/libs/data.ts b/site/src/libs/data.ts index fb75fb938b..59f5911d26 100644 --- a/site/src/libs/data.ts +++ b/site/src/libs/data.ts @@ -67,7 +67,7 @@ const dataDefinitions = { plugins: z .object({ description: z.string(), - link: z.string().startsWith('components/'), + link: z.string().regex(/^(components|forms)\//), name: z.string() }) .array(),