diff --git a/src/assets/scss/_utilities.scss b/src/assets/scss/_utilities.scss index 2e308f145d..c74d0cabfb 100755 --- a/src/assets/scss/_utilities.scss +++ b/src/assets/scss/_utilities.scss @@ -326,6 +326,81 @@ } } +// Extends /////////////// +%shadow { + text-shadow: 0 0 20px rgba(0, 0, 0, 0.8); +} + + +%no-ul-list { + list-style-type: none; + padding: 0; + margin: 0; + + >li { + display: inline-block; + list-style-type: none; + margin: 0; + } +} + +%container { + margin: 0 $gutter; + position: relative; + + @include breakpoint(page-container) { + max-width: 81.875em; + margin: 0 auto; + } +} + +// Font Smoothing /////////////// +%font-smoothing-on { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +%font-smoothing-off { + -webkit-font-smoothing: auto; + -moz-osx-font-smoothing: auto; +} + +// utility classes + +%uids-component--center { + @include center(both); + display: block; + text-align: center; +} + +%uids-component--flex-center { + @include center(both); + flex-flow: column nowrap; + text-align: center; + + @include breakpoint(sm) { + padding: 1.5rem 0; + } +} + +%uids-component--left { + text-align: left; + @include center(both); +} + +%uids-component--flex-left { + flex-flow: column nowrap; + text-align: left; + width: 100%; + padding: 1.5rem 0; +} + + +/***************** + buttons should be moved into their own file and only imported + in button.vue, psuedobutton.vue, and card.vue +******************/ + // Buttons @mixin bttn { @@ -419,71 +494,6 @@ } } -// Extends /////////////// -%shadow { - text-shadow: 0 0 20px rgba(0, 0, 0, 0.8); -} - - -%no-ul-list { - list-style-type: none; - padding: 0; - margin: 0; - - >li { - display: inline-block; - list-style-type: none; - margin: 0; - } -} - -%container { - margin: 0 $gutter; - position: relative; - - @include breakpoint(page-container) { - max-width: 81.875em; - margin: 0 auto; - } -} - -// Font Smoothing /////////////// -%font-smoothing-on { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -%font-smoothing-off { - -webkit-font-smoothing: auto; - -moz-osx-font-smoothing: auto; -} - -// utility classes - -%uids-component--center { - @include center(both); - display: block; - text-align: center; -} - -%uids-component--flex-center { - @include center(both); - flex-flow: column nowrap; - text-align: center; - - @include breakpoint(sm) { - padding: 1.5rem 0; - } -} - -%uids-component--left { - text-align: left; - @include center(both); -} - -%uids-component--flex-left { - flex-flow: column nowrap; - text-align: left; - width: 100%; - padding: 1.5rem 0; -} +/**************** +end of buttons +****************/ diff --git a/src/components/alert/Alert.vue b/src/components/alert/Alert.vue index 38c973a12c..3fd3537412 100644 --- a/src/components/alert/Alert.vue +++ b/src/components/alert/Alert.vue @@ -1,5 +1,4 @@ + + + + diff --git a/src/components/grid/GridItem.vue b/src/components/grid/GridItem.vue index cef05de133..a117abf5b4 100644 --- a/src/components/grid/GridItem.vue +++ b/src/components/grid/GridItem.vue @@ -1,9 +1,13 @@ + + - + diff --git a/src/components/headline/Headline.vue b/src/components/headline/Headline.vue index 6574549a0d..c0bc4f05c2 100644 --- a/src/components/headline/Headline.vue +++ b/src/components/headline/Headline.vue @@ -42,3 +42,8 @@ const getClasses = computed(() => ({ + + diff --git a/src/components/inline/Figure.vue b/src/components/inline/Figure.vue index 5b828d3d9e..8282c62fdd 100644 --- a/src/components/inline/Figure.vue +++ b/src/components/inline/Figure.vue @@ -26,3 +26,6 @@ const classes = computed(() => {
Erika Ernst
+ diff --git a/src/components/logo/Logo.vue b/src/components/logo/Logo.vue index 65528e550a..2e07e83eee 100644 --- a/src/components/logo/Logo.vue +++ b/src/components/logo/Logo.vue @@ -28,3 +28,6 @@ const props = defineProps({ + diff --git a/src/components/media/Media.vue b/src/components/media/Media.vue index 68e2ec7fd3..3994cae47a 100644 --- a/src/components/media/Media.vue +++ b/src/components/media/Media.vue @@ -61,3 +61,7 @@ const classes = computed(() => { + + diff --git a/src/components/stub/Stub.vue b/src/components/stub/Stub.vue index 847d3ee881..2dcb88ad5d 100644 --- a/src/components/stub/Stub.vue +++ b/src/components/stub/Stub.vue @@ -44,3 +44,7 @@ const V3_COMPONENT_PATH = 'components/detail/'; + + diff --git a/src/main.ts b/src/main.ts index 01433bca2a..6670d523d0 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,4 +1,151 @@ -import { createApp } from 'vue' -import App from './App.vue' +import { defineCustomElement } from 'vue'; -createApp(App).mount('#app') +/*** + * only needed if creating a web app, not standalone components + * import { createApp } from 'vue' + * import App from './App.vue' + */ + +// import the elements we are producting +import Alert from './components/alert/Alert.vue'; +import Banner from './components/banner/Banner.vue'; +import BrandBar from './components/brand-bar/BrandBar.vue'; +import Button from './components/button/Button.vue'; +import Callout from './components/callout/Callout.vue'; +import Card from './components/card/Card.vue'; +import Cta from './components/cta/Cta.vue'; +import Grid from './components/grid/Grid.vue'; +import Headline from './components/headline/Headline.vue'; +import Logo from './components/logo/Logo.vue'; +import Media from './components/media/Media.vue'; + +// create the elements +const AlertElement = defineCustomElement(Alert); +const BannerElement = defineCustomElement(Banner); +const BrandBarElement = defineCustomElement(BrandBar); +const ButtonElement = defineCustomElement(Button); +const CalloutElement = defineCustomElement(Callout); +const CardElement = defineCustomElement(Card); +const CtaElement = defineCustomElement(Cta); +const GridElement = defineCustomElement(Grid); +const HeadlineElement = defineCustomElement(Headline); +const LogoElement = defineCustomElement(Logo); +const MediaElement = defineCustomElement(Media); + +// finally register the elements +customElements.define('uids-alert', AlertElement); +customElements.define('uids-banner', BannerElement); +customElements.define('uids-brandbar', BrandBarElement); +customElements.define('uids-button', ButtonElement); +customElements.define('uids-callout', CalloutElement); +customElements.define('uids-card', CardElement); +customElements.define('uids-cta', CtaElement); +customElements.define('uids-grid', GridElement); +customElements.define('uids-headline', HeadlineElement); +customElements.define('uids-logo', LogoElement); +customElements.define('uids-media', MediaElement); + +function loader(): void { + const ceRegistry = window.customElements + if (ceRegistry !== null) { + if (typeof (ceRegistry.get('uids-alert')) === 'undefined') { + ceRegistry.define('uids-alert', AlertElement); + } + if (typeof (ceRegistry.get('uids-banner')) === 'undefined') { + ceRegistry.define('uids-banner', BannerElement); + } + if (typeof (ceRegistry.get('uids-brandbar')) === 'undefined') { + ceRegistry.define('uids-brandbar', BrandBarElement); + } + if (typeof (ceRegistry.get('uids-button')) === 'undefined') { + ceRegistry.define('uids-button', ButtonElement); + } + if (typeof (ceRegistry.get('uids-callout')) === 'undefined') { + ceRegistry.define('uids-callout', CalloutElement); + } + if (typeof (ceRegistry.get('uids-card')) === 'undefined') { + ceRegistry.define('uids-card', CardElement); + } + if (typeof (ceRegistry.get('uids-cta')) === 'undefined') { + ceRegistry.define('uids-cta', CtaElement); + } + if (typeof (ceRegistry.get('uids-grid')) === 'undefined') { + ceRegistry.define('uids-grid', GridElement); + } + if (typeof (ceRegistry.get('uids-headline')) === 'undefined') { + ceRegistry.define('uids-headline', HeadlineElement); + } + if (typeof (ceRegistry.get('uids-logo')) === 'undefined') { + ceRegistry.define('uids-logo', LogoElement); + } + if (typeof (ceRegistry.get('uids-media')) === 'undefined') { + ceRegistry.define('uids-media', MediaElement); + } + } + console.log('window ceRegistry is now:', ceRegistry); +} +console.log('running loader'); +loader(); +// needed to import typings for each element +declare module 'vue' { + export interface GlobalComponents { + 'AlertElement': typeof AlertElement, + 'BannerElement': typeof BannerElement, + 'BrandBarElement': typeof BrandBarElement, + 'ButtonElement': typeof ButtonElement, + 'CalloutElement': typeof CalloutElement, + 'CardElement': typeof CardElement, + 'CtaElement': typeof CtaElement, + 'GridElement': typeof GridElement, + 'HeadlineElement': typeof HeadlineElement, + 'LogoElement': typeof LogoElement, + 'MediaElement': typeof MediaElement + } +} + +export { + loader, + Alert, + Banner, + BrandBar, + Button, + Callout, + Card, + Cta, + Grid, + Headline, + Logo, + Media, + AlertElement, + BannerElement, + BrandBarElement, + ButtonElement, + CalloutElement, + CardElement, + CtaElement, + GridElement, + HeadlineElement, + LogoElement, + MediaElement +} + + +/*** + * following are not currently implemented + + import Accordion from './components/accordion/Accordion.vue'; + import Background from './components/background/Background.vue'; + import Badge from './components/badge/Badge.vue'; + import Blockquote from './components/blockquote/Blockquote.vue'; + import Footer from './components/footer/Footer.vue'; + import Icons from './components/icons/Icons.vue'; + import Inline from './components/inline/Inline.vue'; + import Slider from './components/slider/Slider.vue'; + import Stat from './components/stat/Stat.vue'; + import Stub from './components/stub/Stub.vue'; + import Tables from './components/tables/Tables.vue'; + import Tabs from './components/tabs/Tabs.vue'; + */ + +// no need to create the app in index.html +// createApp(App).mount('#app') diff --git a/vite.config.ts b/vite.config.ts index ad15b9a0f3..833499a6ac 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,32 +1,43 @@ -import { fileURLToPath, URL } from 'url' - -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import path from 'path' +import { fileURLToPath, URL } from 'url'; +import { defineConfig } from 'vite'; +import vue from '@vitejs/plugin-vue'; +import dts from "vite-plugin-dts"; +import path from 'path'; // https://vitejs.dev/config/ export default defineConfig({ + define: { 'process.env.NODE_ENV': '"production"' }, // need so built js files can run anywhere + assetsInclude: [ + './package.json', // needed for package management + ], build: { lib: { - entry: path.resolve(__dirname, "src/index.ts"), + entry: "./src/main.ts", + // entry: path.resolve(__dirname, "src/index.ts"), name: "UIDS", fileName: (format) => `uids.${format}.js`, }, rollupOptions: { - external: ['vue'], - output: { - // Provide global variables to use in the UMD build - // for externalized deps - globals: { - vue: 'Vue' - }, + // external: ['vue'], + input: { + main: path.resolve(__dirname, 'src/main.ts'), }, + // output: { + // // Provide global variables to use in the UMD build + // // for externalized deps + // globals: { + // vue: 'Vue' + // }, + // }, }, }, - plugins: [vue()], + plugins: [ + vue({customElement: true} ), + dts() + ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }, }, -}) +});