mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-20 12:23:02 +00:00
breaking: remove deprecated components
This commit is contained in:
Eric Liu
parent
ba7eeda763
commit
ba0ed0b594
12 changed files with 0 additions and 525 deletions
|
|
@ -1,41 +0,0 @@
|
|||
<script>
|
||||
/**
|
||||
* @extends {"./IconSkeleton.svelte"} IconSkeletonProps
|
||||
* @restProps {svg}
|
||||
*/
|
||||
|
||||
/**
|
||||
* Specify the icon to render
|
||||
* @type {typeof import("svelte").SvelteComponent}
|
||||
*/
|
||||
export let render = undefined;
|
||||
|
||||
/** Set to `true` to display the skeleton state */
|
||||
export let skeleton = false;
|
||||
|
||||
import IconSkeleton from "./IconSkeleton.svelte";
|
||||
</script>
|
||||
|
||||
<!-- @component
|
||||
@deprecated This component is deprecated.
|
||||
Use icons from "carbon-icons-svelte" instead.
|
||||
-->
|
||||
|
||||
{#if skeleton}
|
||||
<IconSkeleton
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
/>
|
||||
{:else}
|
||||
<svelte:component
|
||||
this="{render}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
/>
|
||||
{/if}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<script>
|
||||
/** Set the size of the icon */
|
||||
export let size = 16;
|
||||
</script>
|
||||
|
||||
<!-- @component
|
||||
@deprecated This component is deprecated.
|
||||
-->
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class:bx--icon--skeleton="{true}"
|
||||
{...$$restProps}
|
||||
style="{$$restProps.style}; width: {size}px; height: {size}px"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
></div>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export { default as Icon } from "./Icon.svelte";
|
||||
export { default as IconSkeleton } from "./IconSkeleton.svelte";
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<script>
|
||||
/**
|
||||
* Set the type of notification
|
||||
* @type {"toast" | "inline"}
|
||||
*/
|
||||
export let notificationType = "toast";
|
||||
|
||||
/** Specify the title text */
|
||||
export let title = "Title";
|
||||
|
||||
/** Specify the subtitle text */
|
||||
export let subtitle = "";
|
||||
|
||||
/** Specify the caption text */
|
||||
export let caption = "Caption";
|
||||
</script>
|
||||
|
||||
<!-- @component
|
||||
@deprecated This component is deprecated.
|
||||
-->
|
||||
|
||||
{#if notificationType === "toast"}
|
||||
<div class:bx--toast-notification__details="{true}">
|
||||
<h3 class:bx--toast-notification__title="{true}">{title}</h3>
|
||||
<div class:bx--toast-notification__subtitle="{true}">{subtitle}</div>
|
||||
<div class:bx--toast-notification__caption="{true}">{caption}</div>
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if notificationType === "inline"}
|
||||
<div class:bx--inline-notification__text-wrapper="{true}">
|
||||
<p class:bx--inline-notification__title="{true}">{title}</p>
|
||||
<div class:bx--inline-notification__subtitle="{true}">{subtitle}</div>
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -3,4 +3,3 @@ export { default as InlineNotification } from "./InlineNotification.svelte";
|
|||
export { default as NotificationActionButton } from "./NotificationActionButton.svelte";
|
||||
export { default as NotificationButton } from "./NotificationButton.svelte";
|
||||
export { default as NotificationIcon } from "./NotificationIcon.svelte";
|
||||
export { default as NotificationTextDetails } from "./NotificationTextDetails.svelte";
|
||||
|
|
|
|||
|
|
@ -1,86 +0,0 @@
|
|||
<script>
|
||||
/** Set to `true` to toggle the checkbox input */
|
||||
export let toggled = false;
|
||||
|
||||
/** Set to `true` to disable checkbox input */
|
||||
export let disabled = false;
|
||||
|
||||
/** Specify the label for the untoggled state */
|
||||
export let labelA = "Off";
|
||||
|
||||
/** Specify the label for the toggled state */
|
||||
export let labelB = "On";
|
||||
|
||||
/** Specify the label text */
|
||||
export let labelText = "";
|
||||
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
/**
|
||||
* Specify a name attribute for the checkbox input
|
||||
* @type {string}
|
||||
*/
|
||||
export let name = undefined;
|
||||
</script>
|
||||
|
||||
<!-- @component
|
||||
@deprecated This component is deprecated.
|
||||
Use`<Toggle size="sm" />` instead.
|
||||
-->
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class:bx--form-item="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked="{toggled}"
|
||||
disabled="{disabled}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
class:bx--toggle-input="{true}"
|
||||
class:bx--toggle-input--small="{true}"
|
||||
on:change
|
||||
on:change="{() => {
|
||||
toggled = !toggled;
|
||||
}}"
|
||||
on:keyup
|
||||
on:keyup="{(e) => {
|
||||
if (e.key === ' ' || e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
toggled = !toggled;
|
||||
}
|
||||
}}"
|
||||
on:focus
|
||||
on:blur
|
||||
/>
|
||||
<label
|
||||
aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle'}"
|
||||
for="{id}"
|
||||
class:bx--toggle-input__label="{true}"
|
||||
>
|
||||
{labelText}
|
||||
<span class:bx--toggle__switch="{true}">
|
||||
<svg
|
||||
width="6"
|
||||
height="5"
|
||||
viewBox="0 0 6 5"
|
||||
class:bx--toggle__check="{true}"
|
||||
>
|
||||
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path>
|
||||
</svg>
|
||||
<span aria-hidden="true" class:bx--toggle__text--off="{true}">
|
||||
{labelA}
|
||||
</span>
|
||||
<span aria-hidden="true" class:bx--toggle__text--on="{true}"
|
||||
>{labelB}</span
|
||||
>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<script>
|
||||
/** Specify the label text */
|
||||
export let labelText = "";
|
||||
|
||||
/** Set an id for the input element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
</script>
|
||||
|
||||
<!-- @component
|
||||
@deprecated This component is deprecated.
|
||||
Use`<ToggleSkeleton size="sm" />` instead.
|
||||
-->
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class:bx--form-item="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="{id}"
|
||||
class:bx--toggle="{true}"
|
||||
class:bx--toggle--small="{true}"
|
||||
class:bx--skeleton="{true}"
|
||||
/>
|
||||
<label
|
||||
aria-label="{labelText
|
||||
? undefined
|
||||
: $$props['aria-label'] || 'Toggle is loading'}"
|
||||
class:bx--toggle__label="{true}"
|
||||
class:bx--skeleton="{true}"
|
||||
for="{id}"
|
||||
>
|
||||
{#if labelText}
|
||||
<span class:bx--toggle__label-text="{true}">{labelText}</span>
|
||||
{/if}
|
||||
<span class:bx--toggle__appearance="{true}">
|
||||
<svg
|
||||
class:bx--toggle__check="{true}"
|
||||
width="6"
|
||||
height="5"
|
||||
viewBox="0 0 6 5"
|
||||
>
|
||||
<path
|
||||
d="M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export { default as ToggleSmall } from "./ToggleSmall.svelte";
|
||||
export { default as ToggleSmallSkeleton } from "./ToggleSmallSkeleton.svelte";
|
||||
|
|
@ -1,220 +0,0 @@
|
|||
<script>
|
||||
/**
|
||||
* @event {{ action: "search"; textInput: string; }} inputSearch
|
||||
*/
|
||||
|
||||
/** Set to `true` to focus the search */
|
||||
export let searchIsActive = false;
|
||||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import Close20 from "../../icons/Close20.svelte";
|
||||
import Search20 from "../../icons/Search20.svelte";
|
||||
import searchStore from "../searchStore";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let searchTabIndex = "0";
|
||||
let closeTabIndex = "-1";
|
||||
let elInput = undefined;
|
||||
let elTypeSearch = undefined;
|
||||
let isSearchFocus = false;
|
||||
|
||||
function dispatchInputs(event) {
|
||||
const params = {
|
||||
action: "search",
|
||||
textInput: event.target.value,
|
||||
};
|
||||
|
||||
dispatch("inputSearch", params);
|
||||
}
|
||||
|
||||
$: if (!searchIsActive) {
|
||||
if (elInput) {
|
||||
elInput.value = "";
|
||||
}
|
||||
searchStore.clear();
|
||||
}
|
||||
$: if (searchIsActive) {
|
||||
searchTabIndex = "-1";
|
||||
closeTabIndex = "0";
|
||||
} else {
|
||||
searchTabIndex = "0";
|
||||
closeTabIndex = "-1";
|
||||
}
|
||||
$: if (isSearchFocus) {
|
||||
elInput.focus();
|
||||
}
|
||||
$: showResults = $searchStore ? true : false;
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
on:mouseup="{({ target }) => {
|
||||
if (target && elTypeSearch) {
|
||||
if (!elTypeSearch.contains(target)) {
|
||||
searchIsActive = false;
|
||||
isSearchFocus = false;
|
||||
}
|
||||
}
|
||||
}}"
|
||||
/>
|
||||
|
||||
<!-- @component
|
||||
@deprecated
|
||||
This component is deprecated. Use `HeaderSearch` instead.
|
||||
-->
|
||||
<div
|
||||
bind:this="{elTypeSearch}"
|
||||
role="search"
|
||||
class="search-wrapper"
|
||||
class:search-wrapper-hidden="{!searchIsActive}"
|
||||
class:search-focus="{isSearchFocus || searchIsActive}"
|
||||
>
|
||||
<div
|
||||
id="right-panel-action-search"
|
||||
class="search-wrapper-2"
|
||||
role="combobox"
|
||||
aria-expanded="{searchIsActive}"
|
||||
>
|
||||
<button
|
||||
tabindex="{searchTabIndex}"
|
||||
aria-label="Search"
|
||||
class:bx--header__action="{true}"
|
||||
class:btn-search="{true}"
|
||||
class:btn-search-disabled="{searchIsActive}"
|
||||
on:click="{() => {
|
||||
isSearchFocus = true;
|
||||
searchIsActive = true;
|
||||
dispatch('focusInputSearch');
|
||||
}}"
|
||||
type="button"
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
searchIsActive = !searchIsActive;
|
||||
}
|
||||
}}"
|
||||
>
|
||||
<svelte:component this="{Search20}" title="Search" tabindex="0" />
|
||||
</button>
|
||||
<input
|
||||
bind:this="{elInput}"
|
||||
id="input-search-field"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
tabindex="{closeTabIndex}"
|
||||
class="input-search"
|
||||
class:input-hidden="{!searchIsActive}"
|
||||
placeholder="Search"
|
||||
on:focus="{() => dispatch('focusInputSearch')}"
|
||||
on:focusout="{() => dispatch('focusOutInputSearch')}"
|
||||
on:input="{dispatchInputs}"
|
||||
/>
|
||||
<button
|
||||
id="right-panel-close-search"
|
||||
tabindex="{closeTabIndex}"
|
||||
class:bx--header__action="{true}"
|
||||
class:btn-clear="{true}"
|
||||
class:btn-clear-hidden="{!searchIsActive}"
|
||||
type="button"
|
||||
aria-label="Clear search"
|
||||
on:click="{() => {
|
||||
isSearchFocus = false;
|
||||
searchIsActive = false;
|
||||
searchStore.clear();
|
||||
}}"
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
searchIsActive = !searchIsActive;
|
||||
}
|
||||
}}"
|
||||
>
|
||||
<svelte:component this="{Close20}" title="Close" tabindex="0" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
max-width: 28rem;
|
||||
width: 100%;
|
||||
margin-left: 0.5rem;
|
||||
height: 3rem;
|
||||
background-color: #393939;
|
||||
color: #fff;
|
||||
transition: max-width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
|
||||
background 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
|
||||
.search-wrapper-hidden {
|
||||
max-width: 3rem;
|
||||
background-color: #161616;
|
||||
}
|
||||
|
||||
.search-focus {
|
||||
outline: 2px solid #fff;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.search-wrapper-2 {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
border-bottom: 1px solid #393939;
|
||||
}
|
||||
|
||||
.btn-search {
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
opacity: 1;
|
||||
transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
|
||||
opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
|
||||
.btn-search-disabled {
|
||||
border: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.input-search {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.375rem;
|
||||
letter-spacing: 0;
|
||||
color: #fff;
|
||||
caret-color: #fff;
|
||||
background-color: initial;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
padding: 0;
|
||||
transition: opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
|
||||
.input-hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-clear {
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
|
||||
opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
|
||||
.btn-clear:hover {
|
||||
background-color: #4c4c4c;
|
||||
}
|
||||
|
||||
.btn-clear-hidden {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
export { default as Header } from "./GlobalHeader/Header.svelte";
|
||||
export { default as HeaderAction } from "./GlobalHeader/HeaderAction.svelte";
|
||||
export { default as HeaderActionLink } from "./GlobalHeader/HeaderActionLink.svelte";
|
||||
export { default as HeaderActionSearch } from "./GlobalHeader/HeaderActionSearch.svelte";
|
||||
export { default as HeaderNav } from "./GlobalHeader/HeaderNav.svelte";
|
||||
export { default as HeaderNavItem } from "./GlobalHeader/HeaderNavItem.svelte";
|
||||
export { default as HeaderNavMenu } from "./GlobalHeader/HeaderNavMenu.svelte";
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
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: "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: "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) => {
|
||||
if (searchString.length > 1) {
|
||||
let resultSearch = [];
|
||||
|
||||
data.forEach((item) => {
|
||||
if (item.title.toLowerCase().includes(searchString.toLowerCase())) {
|
||||
resultSearch.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
if (resultSearch.length > 0) {
|
||||
globalStore.set(resultSearch);
|
||||
} else {
|
||||
globalStore.set(undefined);
|
||||
}
|
||||
} else {
|
||||
globalStore.set(undefined);
|
||||
}
|
||||
},
|
||||
clear: () => {
|
||||
globalStore.set(undefined);
|
||||
},
|
||||
};
|
||||
|
||||
export default store;
|
||||
|
|
@ -54,7 +54,6 @@ export { FormGroup } from "./FormGroup";
|
|||
export { FormItem } from "./FormItem";
|
||||
export { FormLabel } from "./FormLabel";
|
||||
export { Grid, Row, Column } from "./Grid";
|
||||
export { Icon, IconSkeleton } from "./Icon";
|
||||
export { ImageLoader } from "./ImageLoader";
|
||||
export { InlineLoading } from "./InlineLoading";
|
||||
export { Link, OutboundLink } from "./Link";
|
||||
|
|
@ -77,7 +76,6 @@ export {
|
|||
NotificationActionButton,
|
||||
NotificationButton,
|
||||
NotificationIcon,
|
||||
NotificationTextDetails,
|
||||
} from "./Notification";
|
||||
export { NumberInput, NumberInputSkeleton } from "./NumberInput";
|
||||
export { OrderedList } from "./OrderedList";
|
||||
|
|
@ -123,7 +121,6 @@ export {
|
|||
} from "./Tile";
|
||||
export { TimePicker, TimePickerSelect } from "./TimePicker";
|
||||
export { Toggle, ToggleSkeleton } from "./Toggle";
|
||||
export { ToggleSmall, ToggleSmallSkeleton } from "./ToggleSmall";
|
||||
export { Tooltip, TooltipFooter } from "./Tooltip";
|
||||
export { TooltipDefinition } from "./TooltipDefinition";
|
||||
export { TooltipIcon } from "./TooltipIcon";
|
||||
|
|
@ -133,7 +130,6 @@ export {
|
|||
Header,
|
||||
HeaderAction,
|
||||
HeaderActionLink,
|
||||
HeaderActionSearch,
|
||||
HeaderNav,
|
||||
HeaderNavItem,
|
||||
HeaderNavMenu,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue