diff --git a/CHANGELOG.md b/CHANGELOG.md index 5fed58d6..6ea2d638 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Selectable/expandable `DataTable` +## [0.12.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.12.0) - 2020-09-13 + +**Features** + +- css: ship precompiled CSS StyleSheets for each Carbon theme (70e0875) + +**Documentation** + +- examples: add example set-ups using popular bundlers/frameworks +- update README guidance on consuming the library + ## [0.11.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.11.0) - 2020-09-05 **Features** @@ -21,7 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - UI Shell: add Close/AppSwitcher as default icons for `HeaderAction` component (5f62cde) - ButtonSet: add `stacked` prop (c8e0a59) -- Link: set `rel` attribute to "noopener noreferrer" if `target` is "_blank" (4b7d254) +- Link: set `rel` attribute to "noopener noreferrer" if `target` is "\_blank" (4b7d254) **Fixes** @@ -123,7 +134,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [0.8.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.8.0) - 2020-07-19 -- use $$restProps API (requires Svelte version >=3.20) +- use \$\$restProps API (requires Svelte version >=3.20) - upgrade `carbon-icons-svelte` to version >=10.13.0 - use svelte class:{value} API instead of `cx` - add ref prop to "interactive" components like text inputs, anchor links... ([Issue #196](https://github.com/IBM/carbon-components-svelte/issues/196)) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 24aa6fd1..73d52ed3 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,6 +1,6 @@ # Component Index -> 144 components exported from carbon-components-svelte 0.11.0 +> 144 components exported from carbon-components-svelte 0.12.0 - Accordion - [AccordionSkeleton](#accordionskeleton) diff --git a/README.md b/README.md index 30a70ade..281a4405 100644 --- a/README.md +++ b/README.md @@ -21,12 +21,12 @@ The quickest way to get started is to customize a template from the [examples](e Example set-ups demonstrate usage with popular application bundlers and frameworks. They feature a mix of Singe-page Applications (SPA), Server-side rendering (SSR) and statically exported approaches. -- **[rollup](examples/rollup/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup) -- **[rollup-typescript](examples/rollup-typescript/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup) with TypeScript support -- **[routify](examples/routify/)**: SPA + static export using [Routify](https://github.com/roxiness/routify) -- **[sapper](examples/sapper/)**: SSR + static export using [Sapper](https://github.com/sveltejs/sapper) -- **[svite](examples/svite/)**: SPA developed with Svite, bundled with [Rollup](https://github.com/rollup/rollup) -- **[webpack](examples/webpack/)**: SPA bundled with [webpack](https://github.com/webpack/webpack) +- **[examples/rollup](examples/rollup/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup) +- **[examples/rollup-typescript](examples/rollup-typescript/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup) with TypeScript support +- **[examples/routify](examples/routify/)**: SPA + static export using [Routify](https://github.com/roxiness/routify) +- **[examples/sapper](examples/sapper/)**: SSR + static export using [Sapper](https://github.com/sveltejs/sapper) +- **[examples/svite](examples/svite/)**: SPA developed with Svite, bundled with [Rollup](https://github.com/rollup/rollup) +- **[examples/webpack](examples/webpack/)**: SPA bundled with [webpack](https://github.com/webpack/webpack) ### Scaffolding diff --git a/docs/README.md b/docs/README.md index db0e8dec..17070bf7 100644 --- a/docs/README.md +++ b/docs/README.md @@ -78,4 +78,4 @@ Build and deploy the app: yarn build ibmcloud target --cf ibmcloud cf push -``` \ No newline at end of file +``` diff --git a/docs/cypress/integration/Button.js b/docs/cypress/integration/Button.js index 22a2ad09..03fb4fee 100644 --- a/docs/cypress/integration/Button.js +++ b/docs/cypress/integration/Button.js @@ -4,10 +4,7 @@ describe("Button", () => { }); it("clicks", () => { - cy.get(".bx--btn--primary") - .first() - .as("btn") - .contains("Primary button"); + cy.get(".bx--btn--primary").first().as("btn").contains("Primary button"); cy.get("@btn").trigger("click"); cy.get("@log").should("be.calledWith", "click"); diff --git a/docs/cypress/plugins/index.js b/docs/cypress/plugins/index.js index aa9918d2..8dd144a6 100644 --- a/docs/cypress/plugins/index.js +++ b/docs/cypress/plugins/index.js @@ -18,4 +18,4 @@ module.exports = (on, config) => { // `on` is used to hook into various events Cypress emits // `config` is the resolved Cypress config -} +}; diff --git a/docs/src/service-worker.js b/docs/src/service-worker.js index 2289a556..d9e46c1f 100644 --- a/docs/src/service-worker.js +++ b/docs/src/service-worker.js @@ -1,4 +1,4 @@ -import { timestamp, files, shell, routes } from '@sapper/service-worker'; +import { timestamp, files, shell, routes } from "@sapper/service-worker"; const ASSETS = `cache${timestamp}`; @@ -7,76 +7,79 @@ const ASSETS = `cache${timestamp}`; const to_cache = shell.concat(files); const cached = new Set(to_cache); -self.addEventListener('install', event => { - event.waitUntil( - caches - .open(ASSETS) - .then(cache => cache.addAll(to_cache)) - .then(() => { - self.skipWaiting(); - }) - ); +self.addEventListener("install", (event) => { + event.waitUntil( + caches + .open(ASSETS) + .then((cache) => cache.addAll(to_cache)) + .then(() => { + self.skipWaiting(); + }) + ); }); -self.addEventListener('activate', event => { - event.waitUntil( - caches.keys().then(async keys => { - // delete old caches - for (const key of keys) { - if (key !== ASSETS) await caches.delete(key); - } +self.addEventListener("activate", (event) => { + event.waitUntil( + caches.keys().then(async (keys) => { + // delete old caches + for (const key of keys) { + if (key !== ASSETS) await caches.delete(key); + } - self.clients.claim(); - }) - ); + self.clients.claim(); + }) + ); }); -self.addEventListener('fetch', event => { - if (event.request.method !== 'GET' || event.request.headers.has('range')) return; +self.addEventListener("fetch", (event) => { + if (event.request.method !== "GET" || event.request.headers.has("range")) + return; - const url = new URL(event.request.url); + const url = new URL(event.request.url); - // don't try to handle e.g. data: URIs - if (!url.protocol.startsWith('http')) return; + // don't try to handle e.g. data: URIs + if (!url.protocol.startsWith("http")) return; - // ignore dev server requests - if (url.hostname === self.location.hostname && url.port !== self.location.port) return; + // ignore dev server requests + if ( + url.hostname === self.location.hostname && + url.port !== self.location.port + ) + return; - // always serve static files and bundler-generated assets from cache - if (url.host === self.location.host && cached.has(url.pathname)) { - event.respondWith(caches.match(event.request)); - return; - } + // always serve static files and bundler-generated assets from cache + if (url.host === self.location.host && cached.has(url.pathname)) { + event.respondWith(caches.match(event.request)); + return; + } - // for pages, you might want to serve a shell `service-worker-index.html` file, - // which Sapper has generated for you. It's not right for every - // app, but if it's right for yours then uncomment this section - /* + // for pages, you might want to serve a shell `service-worker-index.html` file, + // which Sapper has generated for you. It's not right for every + // app, but if it's right for yours then uncomment this section + /* if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) { event.respondWith(caches.match('/service-worker-index.html')); return; } */ - if (event.request.cache === 'only-if-cached') return; + if (event.request.cache === "only-if-cached") return; - // for everything else, try the network first, falling back to - // cache if the user is offline. (If the pages never change, you - // might prefer a cache-first approach to a network-first one.) - event.respondWith( - caches - .open(`offline${timestamp}`) - .then(async cache => { - try { - const response = await fetch(event.request); - cache.put(event.request, response.clone()); - return response; - } catch(err) { - const response = await cache.match(event.request); - if (response) return response; + // for everything else, try the network first, falling back to + // cache if the user is offline. (If the pages never change, you + // might prefer a cache-first approach to a network-first one.) + event.respondWith( + caches.open(`offline${timestamp}`).then(async (cache) => { + try { + const response = await fetch(event.request); + cache.put(event.request, response.clone()); + return response; + } catch (err) { + const response = await cache.match(event.request); + if (response) return response; - throw err; - } - }) - ); + throw err; + } + }) + ); }); diff --git a/examples/rollup-typescript/README.md b/examples/rollup-typescript/README.md index 770cbb4d..73f24e2d 100644 --- a/examples/rollup-typescript/README.md +++ b/examples/rollup-typescript/README.md @@ -20,4 +20,4 @@ Starts the app in development mode. ### `yarn build` -Builds the app for production. \ No newline at end of file +Builds the app for production. diff --git a/examples/rollup/README.md b/examples/rollup/README.md index a7ff6dd8..78576ca7 100644 --- a/examples/rollup/README.md +++ b/examples/rollup/README.md @@ -20,4 +20,4 @@ Starts the app in development mode. ### `yarn build` -Builds the app for production. \ No newline at end of file +Builds the app for production. diff --git a/examples/routify/README.md b/examples/routify/README.md index 21a44e98..3a8a24e9 100644 --- a/examples/routify/README.md +++ b/examples/routify/README.md @@ -20,4 +20,4 @@ Starts the app in development mode. ### `yarn build` -Builds the app for production. \ No newline at end of file +Builds the app for production. diff --git a/examples/sapper/README.md b/examples/sapper/README.md index 9df1635a..ca097fea 100644 --- a/examples/sapper/README.md +++ b/examples/sapper/README.md @@ -29,5 +29,3 @@ Builds the app for production and statically exports the app. ### `yarn start` Runs the app in production (`yarn build` must be run first). - - diff --git a/examples/sapper/src/service-worker.js b/examples/sapper/src/service-worker.js index 2289a556..d9e46c1f 100644 --- a/examples/sapper/src/service-worker.js +++ b/examples/sapper/src/service-worker.js @@ -1,4 +1,4 @@ -import { timestamp, files, shell, routes } from '@sapper/service-worker'; +import { timestamp, files, shell, routes } from "@sapper/service-worker"; const ASSETS = `cache${timestamp}`; @@ -7,76 +7,79 @@ const ASSETS = `cache${timestamp}`; const to_cache = shell.concat(files); const cached = new Set(to_cache); -self.addEventListener('install', event => { - event.waitUntil( - caches - .open(ASSETS) - .then(cache => cache.addAll(to_cache)) - .then(() => { - self.skipWaiting(); - }) - ); +self.addEventListener("install", (event) => { + event.waitUntil( + caches + .open(ASSETS) + .then((cache) => cache.addAll(to_cache)) + .then(() => { + self.skipWaiting(); + }) + ); }); -self.addEventListener('activate', event => { - event.waitUntil( - caches.keys().then(async keys => { - // delete old caches - for (const key of keys) { - if (key !== ASSETS) await caches.delete(key); - } +self.addEventListener("activate", (event) => { + event.waitUntil( + caches.keys().then(async (keys) => { + // delete old caches + for (const key of keys) { + if (key !== ASSETS) await caches.delete(key); + } - self.clients.claim(); - }) - ); + self.clients.claim(); + }) + ); }); -self.addEventListener('fetch', event => { - if (event.request.method !== 'GET' || event.request.headers.has('range')) return; +self.addEventListener("fetch", (event) => { + if (event.request.method !== "GET" || event.request.headers.has("range")) + return; - const url = new URL(event.request.url); + const url = new URL(event.request.url); - // don't try to handle e.g. data: URIs - if (!url.protocol.startsWith('http')) return; + // don't try to handle e.g. data: URIs + if (!url.protocol.startsWith("http")) return; - // ignore dev server requests - if (url.hostname === self.location.hostname && url.port !== self.location.port) return; + // ignore dev server requests + if ( + url.hostname === self.location.hostname && + url.port !== self.location.port + ) + return; - // always serve static files and bundler-generated assets from cache - if (url.host === self.location.host && cached.has(url.pathname)) { - event.respondWith(caches.match(event.request)); - return; - } + // always serve static files and bundler-generated assets from cache + if (url.host === self.location.host && cached.has(url.pathname)) { + event.respondWith(caches.match(event.request)); + return; + } - // for pages, you might want to serve a shell `service-worker-index.html` file, - // which Sapper has generated for you. It's not right for every - // app, but if it's right for yours then uncomment this section - /* + // for pages, you might want to serve a shell `service-worker-index.html` file, + // which Sapper has generated for you. It's not right for every + // app, but if it's right for yours then uncomment this section + /* if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) { event.respondWith(caches.match('/service-worker-index.html')); return; } */ - if (event.request.cache === 'only-if-cached') return; + if (event.request.cache === "only-if-cached") return; - // for everything else, try the network first, falling back to - // cache if the user is offline. (If the pages never change, you - // might prefer a cache-first approach to a network-first one.) - event.respondWith( - caches - .open(`offline${timestamp}`) - .then(async cache => { - try { - const response = await fetch(event.request); - cache.put(event.request, response.clone()); - return response; - } catch(err) { - const response = await cache.match(event.request); - if (response) return response; + // for everything else, try the network first, falling back to + // cache if the user is offline. (If the pages never change, you + // might prefer a cache-first approach to a network-first one.) + event.respondWith( + caches.open(`offline${timestamp}`).then(async (cache) => { + try { + const response = await fetch(event.request); + cache.put(event.request, response.clone()); + return response; + } catch (err) { + const response = await cache.match(event.request); + if (response) return response; - throw err; - } - }) - ); + throw err; + } + }) + ); }); diff --git a/examples/webpack/README.md b/examples/webpack/README.md index 6c3a2619..2a063757 100644 --- a/examples/webpack/README.md +++ b/examples/webpack/README.md @@ -20,4 +20,4 @@ Starts the app in development mode. ### `yarn build` -Builds the app for production. \ No newline at end of file +Builds the app for production. diff --git a/package.json b/package.json index 4d5dc3aa..8f44528a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "carbon-components-svelte", - "version": "0.11.0", + "version": "0.12.0", "license": "Apache-2.0", "description": "Svelte implementation of the Carbon Design System", "svelte": "./src/index.js", diff --git a/src/UIShell/searchStore.js b/src/UIShell/searchStore.js index b9d06656..c013bbfa 100644 --- a/src/UIShell/searchStore.js +++ b/src/UIShell/searchStore.js @@ -1,41 +1,41 @@ -import { writable } from 'svelte/store'; +import { writable } from "svelte/store"; const data = [ { - href: '#', - title: 'Test title search 1', - menu: 'Test menu 1', - description: 'This is a description for seach #1' + href: "#", + title: "Test title search 1", + menu: "Test menu 1", + description: "This is a description for seach #1", }, { - href: '#', - title: 'Changing text to simulate search', - menu: 'Test menu 2', - description: 'This is a description for seach #2' + href: "#", + title: "Changing text to simulate search", + menu: "Test menu 2", + description: "This is a description for seach #2", }, { - href: '#', - title: 'More testing texts', - menu: 'Test menu 3', - description: 'This is a description for seach #3' + href: "#", + title: "More testing texts", + menu: "Test menu 3", + description: "This is a description for seach #3", }, { - href: '#', - title: 'We can find here another test text', - menu: 'Test menu 4', - description: 'This is a description for seach #4' - } + href: "#", + title: "We can find here another test text", + menu: "Test menu 4", + description: "This is a description for seach #4", + }, ]; const globalStore = writable(undefined); const store = { subscribe: globalStore.subscribe, - search: searchString => { + search: (searchString) => { if (searchString.length > 1) { let resultSearch = []; - data.forEach(item => { + data.forEach((item) => { if (item.title.toLowerCase().includes(searchString.toLowerCase())) { resultSearch.push(item); } @@ -52,7 +52,7 @@ const store = { }, clear: () => { globalStore.set(undefined); - } + }, }; export default store; diff --git a/types/index.d.ts b/types/index.d.ts index 80edd15a..5ac039c6 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for carbon-components-svelte 0.11.0 +// Type definitions for carbon-components-svelte 0.12.0 // Project: https://github.com/IBM/carbon-components-svelte export class CarbonSvelteComponent { @@ -1484,7 +1484,7 @@ export class Grid extends CarbonSvelteComponent { noGutterRight?: boolean; }; - $$slot_def: { default: { } }; + $$slot_def: { default: {} }; } export class Header extends CarbonSvelteComponent {