mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

v0.12.0

Browse source
This commit is contained in:
Eric Liu 2020-09-13 14:05:51 -07:00
commit d250a0c3cc
16 changed files with 167 additions and 155 deletions
Download patch file Download diff file Expand all files Collapse all files

15
CHANGELOG.md
View file

@ -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))

2
COMPONENT_INDEX.md
View file

@ -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)

12
README.md
View file

@ -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

2
docs/README.md
View file

@ -78,4 +78,4 @@ Build and deploy the app:
yarn build
ibmcloud target --cf
ibmcloud cf push
```
```

5
docs/cypress/integration/Button.js
View file

@ -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");

2
docs/cypress/plugins/index.js
View file

@ -18,4 +18,4 @@
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
}
};

113
docs/src/service-worker.js
View file

@ -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;
}
})
);
});

2
examples/rollup-typescript/README.md
View file

@ -20,4 +20,4 @@ Starts the app in development mode.
### `yarn build`
Builds the app for production.
Builds the app for production.

2
examples/rollup/README.md
View file

@ -20,4 +20,4 @@ Starts the app in development mode.
### `yarn build`
Builds the app for production.
Builds the app for production.

2
examples/routify/README.md
View file

@ -20,4 +20,4 @@ Starts the app in development mode.
### `yarn build`
Builds the app for production.
Builds the app for production.

2
examples/sapper/README.md
View file

@ -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).

113
examples/sapper/src/service-worker.js
View file

@ -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;
}
})
);
});

2
examples/webpack/README.md
View file

@ -20,4 +20,4 @@ Starts the app in development mode.
### `yarn build`
Builds the app for production.
Builds the app for production.

2
package.json
View file

@ -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",

42
src/UIShell/searchStore.js
View file

@ -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;

4
types/index.d.ts vendored
View file

@ -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 {