@wwtdev/bsds-components-vue3 3.2.2 → 3.2.3

package/README.md

@@ -1,200 +1,3 @@
-# BSDS Components Library
-
-## Installation & Usage
-
-```bash
-npm install --save @wwtdev/bsds-components-vue3
-```
-
-### Vue App Setup
-
-Add the following to your `main.js` file to import styles:
-
-```javascript
-/* Blue Steel Styles
- @wwtdev/bsds-css and @wwtdev/bsds-icons-vue3
- will be installed as dependencies of this package
-*/
-import '@wwtdev/bsds-components-vue3/components.css'
-import '@wwtdev/bsds-icons-vue3/lib/style.css' // see note below re ^2.0.6
-
-```
-
-**Note** that the CSS framework is _included_ in `@wwtdev/bsds-components-vue3/components.css`, along with a few additional styles needed for the Vue components.  This means that you do not need to import `@wwtdev/bsds-css/dist/wwt-bsds.min.css` separately.*
-
-*Starting from v2.0.6, the icon styles are also included in `@wwtdev/bsds-components-vue3/components.css`.  This means that you do not need to import `@wwtdev/bsds-icons-vue3/lib/style.css` separately, either.
-
-**If you're using Tailwind in your project,** see additional instructions below.
-
-#### Migration from v1
-1. Remove the `@wwtdev/bsds-components` package, as this Vue 3 package no longer depends on a base web component library.
-2. This package no longer provides or requires a Vue plugin, so remove any imports / logic related to that.
-3. These components no longer render custom element tags (e.g., `<bs-input-field>` is now `<div data-component="bs-input-field">`), so if you have any CSS rules or DOM-related logic that relied on the previous version's custom element tag selectors, you'll need to update those accordingly.
-
-
-### Nuxt App Setup
-
-Add the following to your `nuxt.config.js` file to import styles:
-
-```javascript
-export default defineNuxtConfig({
-  ...
-  css: [
-    '@wwtdev/bsds-components-vue3/components.css',
-    '@wwtdev/bsds-icons-vue3/lib/style.css'
-  ],
-  ...
-})
-```
-
-### Usage
-```javascript
-<script setup>
-import { BsButton } from '@wwtdev/bsds-components-vue3'
-import { BsIconCaretRight } from '@wwtdev/bsds-icons-vue3'
-</script>
-
-<template>
-  <div>
-    <BsButton>Hello World!</BsButton>
-    <BsIconCaretRight />
-  </div>
-</template>
-```
-
-### Usage with Tailwind
-
-If you're using Tailwind in your project, you'll need to take additional steps as follows:
-
-### 1. Add the WWT Preset to the Tailwind config.
-
-For new projects, we recommend that you use the provided config file as a [**preset**](https://tailwindcss.com/docs/presets).  When setting up the `tailwind.config.js` file, import the WWT preset from the CSS Framework package.  Note that `wwt-bsds-preset.js` sets `config.corePlugins.preflight: false` by default; we do this to apply our style resets instead of the Tailwind resets.
-
-```javascript
-/* tailwind.config.js */
-
-module.exports = {
-  presets: [require('@wwtdev/bsds-css/dist/wwt-bsds-preset.js')]
-};
-```
-
-While the foregoing setup is our recommended method, we have still put in effort to ensure that `wwt-bsds-preset.js` works as a [**base configuration**](https://tailwindcss.com/docs/configuration) in conjunction with the tailwind defaults and reset as well.  So this _should_ still work as an alternative if needed, though it is not the focus/priority of our project:
-
-```javascript
-/* tailwind.config.js */
-
-const wwtConfig = require('@wwtdev/bsds-css/dist/wwt-bsds-preset.js')
-module.exports = {
-  ...wwtConfig,
-  corePlugins: { preflight: false }
-};
-```
-
-
-### 2. Tailwind CSS Directives
-
-To prevent conflicts with our CSS Framework, only include the `base` and `utilities` directives.
-
-Since our CSS has its own reset and default styles, we prevent Tailwind's `base` reset styles from loading, via a setting in our WWT Preset. The only styles that will be used from `base` are Tailwind CSS variables, which are needed in order to ensure all Tailwind classes work as expected.
-
-```css
-/* src/styles/tailwind.css */
-
-@tailwind base;
-@tailwind utilities;
-```
-
-Once you have completed the Tailwind installation steps, you can use the classes generated from the preset.
-
-### 3. App setup w/ Tailwind and BSDS Styles
-
-Vue example:
-
-```javascript
-/* src/main.js */
-
-// Blue Steel Styles
-import '@wwtdev/bsds-components-vue3/components.css'
-import '@wwtdev/bsds-icons-vue3/lib/style.css' // separate icon styles not needed from v2.0.6
-
-// TW
-import './styles/tailwind.css'
-
-```
-
-Nuxt example:
-
-```javascript
-/* nuxt.config.js */
-
-export default defineNuxtConfig({
-  ...
-  css: [
-    '@wwtdev/bsds-components-vue3/components.css',
-    '@wwtdev/bsds-icons-vue3/lib/style.css', // separate icon styles not needed from v2.0.6
-    '~/assets/styles/tailwind.css',
-  ]
-})
-
-```
-
-#### Using CSS Layers with Tailwind
-
-You can optionally leverage native CSS `@layer` to ensure TW utilities will always trump the component styles for easier overrides.
-
-```css
-/* src/styles/index.css (or wherever your app styles live) */
-
-@layer app-base, external, app, utils;
-
-/* -- BASE -- */
-@import "@wwtdev/bsds-components-vue3/components.css" layer(app-base);
-
-/* -- EXTERNAL: any external stylesheets, e.g. from other 3d party libs -- */
-@import "some-other-pkg/dist/style.css" layer(external);
-
-/* -- APP / INTERNAL STYLES, e.g. your site's base styles --
-   All .vue <style> code will automatically be added to this layer (see "vueWrapCssWithLayerPlugin" in vite.config.js)
-*/
-@import "some-content.css" layer(app);
-
-/* -- UTILITY CLASSES --
-  Due to how native CSS @layer works, and our defined layer order at the top of this file, utility classes will always trump any other styles in the app (as long as those styles are in one of our defined layers)
-*/
-
-@layer utils {
-  @tailwind base;
-  @tailwind utilities;
-}
-
-```
-
-And then in your vite config:
-
-```javascript
-/* vite.config.js */
-
-// We'll need a plugin to pick up styles from our app's Vue SFCs and add them to the app layer
-const vueWrapCssWithLayerPlugin = {
-  name: 'vue-wrap-css-with-layer',
-  transform(code, id) {
-    // if not a .vue <style> block, do nothing
-    if (!/vue&type=style/.test(id)) return
-
-    // wrap the <style> code in our "app" css layer (ensures utility classes always trump other styles, see index.css)
-    return { code: `@layer app { ${code} }`, map: null }
-  }
-}
-
-export default defineConfig({
-  plugins: [ ...yourOtherPlugins, vueWrapCssWithLayerPlugin ],
-  /*
-    *** other configs **
-  */
-})
-```
-
-### 4. Dark Mode-compatible "semantic" color utilities
-
-We've extended the TW theme with color utilities that will automatically adjust when using dark mode.  These classes require the CSS custom properties defined in the global stylesheet (`wwt-bsds.css`).  If you're not bringing that stylesheet in, either disregard these classes or manually include the properties from [tokens.css](https://github.com/wwt-custom-apps/wwt-blue-steel/blob/main/packages/css-framework/src/styles/tokens.css) and [global.css](https://github.com/wwt-custom-apps/wwt-blue-steel/blob/main/packages/css-framework/src/styles/global.css) in your project.
+# BSDS Vue 3 Components
 
+Vue 3 component library for the [Blue Steel Design System](https://design.apps.wwt.com), built and maintained by [WWT](https://www.wwt.com). The library provides accessible, themeable components that implement WWT's brand design language on top of the [`@wwtdev/bsds-css`](https://www.npmjs.com/package/@wwtdev/bsds-css) framework.