mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
breaking: remove deprecated props and components (#1191)
This commit is contained in:
metonym
GitHub
parent
ea7c0d446e
commit
21714d0e3a
55 changed files with 127 additions and 1823 deletions
|
|
@ -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,13 +1,6 @@
|
|||
<script>
|
||||
/**
|
||||
* Specify the ARIA label for the nav
|
||||
* @deprecated use "aria-label" instead
|
||||
* @type {string}
|
||||
*/
|
||||
export let ariaLabel = undefined;
|
||||
|
||||
$: props = {
|
||||
"aria-label": ariaLabel || $$props["aria-label"],
|
||||
"aria-label": $$props["aria-label"],
|
||||
"aria-labelledby": $$props["aria-labelledby"],
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue