mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 02:41:05 +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
|
|
@ -25,12 +25,6 @@
|
|||
*/
|
||||
export let isSelected = false;
|
||||
|
||||
/**
|
||||
* Set to `true` for the icon-only variant
|
||||
* @deprecated inferred using the $$slots API
|
||||
*/
|
||||
export let hasIconOnly = false;
|
||||
|
||||
/**
|
||||
* Specify the icon to render
|
||||
* @type {typeof import("svelte").SvelteComponent}
|
||||
|
|
@ -44,8 +38,8 @@
|
|||
export let iconDescription = undefined;
|
||||
|
||||
/**
|
||||
* Set the alignment of the tooltip relative to the icon
|
||||
* `hasIconOnly` must be set to `true`
|
||||
* Set the alignment of the tooltip relative to the icon.
|
||||
* Only applies to icon-only buttons
|
||||
* @type {"start" | "center" | "end"}
|
||||
*/
|
||||
export let tooltipAlignment = "center";
|
||||
|
|
|
|||
|
|
@ -10,12 +10,6 @@
|
|||
* @type {"default" | "field" | "small" | "lg" | "xl"}
|
||||
*/
|
||||
export let size = "default";
|
||||
|
||||
/**
|
||||
* @deprecated this prop will be removed in the next major release
|
||||
* Use size="small" instead
|
||||
*/
|
||||
export let small = false;
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
|
|
@ -27,7 +21,7 @@
|
|||
class:bx--skeleton="{true}"
|
||||
class:bx--btn="{true}"
|
||||
class:bx--btn--field="{size === 'field'}"
|
||||
class:bx--btn--sm="{size === 'small' || small}"
|
||||
class:bx--btn--sm="{size === 'small'}"
|
||||
class:bx--btn--lg="{size === 'lg'}"
|
||||
class:bx--btn--xl="{size === 'xl'}"
|
||||
{...$$restProps}
|
||||
|
|
@ -43,7 +37,7 @@
|
|||
class:bx--skeleton="{true}"
|
||||
class:bx--btn="{true}"
|
||||
class:bx--btn--field="{size === 'field'}"
|
||||
class:bx--btn--sm="{size === 'small' || small}"
|
||||
class:bx--btn--sm="{size === 'small'}"
|
||||
class:bx--btn--lg="{size === 'lg'}"
|
||||
class:bx--btn--xl="{size === 'xl'}"
|
||||
{...$$restProps}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,6 @@
|
|||
/** Set the selected index of the switch item */
|
||||
export let selectedIndex = 0;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable the light variant
|
||||
* @deprecated
|
||||
*/
|
||||
export let light = false;
|
||||
|
||||
/**
|
||||
* Specify the size of the content switcher
|
||||
* @type {"sm" | "xl"}
|
||||
|
|
@ -67,7 +61,6 @@
|
|||
<div
|
||||
role="tablist"
|
||||
class:bx--content-switcher="{true}"
|
||||
class:bx--content-switcher--light="{light}"
|
||||
class:bx--content-switcher--sm="{size === 'sm'}"
|
||||
class:bx--content-switcher--xl="{size === 'xl'}"
|
||||
{...$$restProps}
|
||||
|
|
|
|||
|
|
@ -11,12 +11,6 @@
|
|||
/** Set to `true` to use static width */
|
||||
export let useStaticWidth = false;
|
||||
|
||||
/**
|
||||
* Set to `true` for the bordered variant
|
||||
* @deprecated this prop will be removed in the next major release
|
||||
*/
|
||||
export let shouldShowBorder = false;
|
||||
|
||||
/** Set to `true` for the sortable variant */
|
||||
export let sortable = false;
|
||||
|
||||
|
|
@ -35,7 +29,6 @@
|
|||
class:bx--data-table--sort="{sortable}"
|
||||
class:bx--data-table--zebra="{zebra}"
|
||||
class:bx--data-table--static="{useStaticWidth}"
|
||||
class:bx--data-table--no-border="{!shouldShowBorder}"
|
||||
class:bx--data-table--sticky-header="{stickyHeader}"
|
||||
>
|
||||
<slot />
|
||||
|
|
@ -51,7 +44,6 @@
|
|||
class:bx--data-table--sort="{sortable}"
|
||||
class:bx--data-table--zebra="{zebra}"
|
||||
class:bx--data-table--static="{useStaticWidth}"
|
||||
class:bx--data-table--no-border="{!shouldShowBorder}"
|
||||
class:bx--data-table--sticky-header="{stickyHeader}"
|
||||
{...$$restProps}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -39,12 +39,6 @@
|
|||
/** Set to `true` for the input to be read-only */
|
||||
export let readonly = false;
|
||||
|
||||
/**
|
||||
* Set to `true` to enable the mobile variant
|
||||
* @deprecated
|
||||
*/
|
||||
export let mobile = false;
|
||||
|
||||
/** Set to `true` to allow for an empty value */
|
||||
export let allowEmpty = false;
|
||||
|
||||
|
|
@ -174,158 +168,90 @@
|
|||
class:bx--number--light="{light}"
|
||||
class:bx--number--nolabel="{hideLabel}"
|
||||
class:bx--number--nosteppers="{hideSteppers}"
|
||||
class:bx--number--mobile="{mobile}"
|
||||
class="{size && `bx--number--${size}`}"
|
||||
>
|
||||
{#if mobile}
|
||||
{#if $$slots.label || label}
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--label--disabled="{disabled}"
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
>
|
||||
<slot name="label">{label}</slot>
|
||||
</label>
|
||||
{/if}
|
||||
<div
|
||||
class:bx--number__input-wrapper="{true}"
|
||||
class:bx--number__input-wrapper--warning="{!invalid && warn}"
|
||||
{#if $$slots.label || label}
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--label--disabled="{disabled}"
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
title="{decrementLabel}"
|
||||
aria-label="{decrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:down-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(-1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Subtract16 class="down-icon" />
|
||||
</button>
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
type="number"
|
||||
pattern="[0-9]*"
|
||||
aria-label="{label ? undefined : ariaLabel}"
|
||||
disabled="{disabled}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
max="{max}"
|
||||
min="{min}"
|
||||
step="{step}"
|
||||
value="{value ?? ''}"
|
||||
readonly="{readonly}"
|
||||
{...$$restProps}
|
||||
on:change="{onChange}"
|
||||
on:input="{onInput}"
|
||||
on:focus
|
||||
on:blur
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
title="{incrementLabel}"
|
||||
aria-label="{incrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:up-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Add16 class="up-icon" />
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
{#if $$slots.label || label}
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--label--disabled="{disabled}"
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
>
|
||||
<slot name="label">{label}</slot>
|
||||
</label>
|
||||
{/if}
|
||||
<div
|
||||
class:bx--number__input-wrapper="{true}"
|
||||
class:bx--number__input-wrapper--warning="{!invalid && warn}"
|
||||
>
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
type="number"
|
||||
pattern="[0-9]*"
|
||||
aria-describedby="{errorId}"
|
||||
data-invalid="{invalid || undefined}"
|
||||
aria-invalid="{invalid || undefined}"
|
||||
aria-label="{label ? undefined : ariaLabel}"
|
||||
disabled="{disabled}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
max="{max}"
|
||||
min="{min}"
|
||||
step="{step}"
|
||||
value="{value ?? ''}"
|
||||
readonly="{readonly}"
|
||||
{...$$restProps}
|
||||
on:change="{onChange}"
|
||||
on:input="{onInput}"
|
||||
on:focus
|
||||
on:blur
|
||||
/>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--number__invalid" />
|
||||
{/if}
|
||||
{#if !invalid && warn}
|
||||
<WarningAltFilled16
|
||||
class="bx--number__invalid bx--number__invalid--warning"
|
||||
/>
|
||||
{/if}
|
||||
{#if readonly}
|
||||
<EditOff16 class="bx--text-input__readonly-icon" />
|
||||
{/if}
|
||||
{#if !hideSteppers}
|
||||
<div class:bx--number__controls="{true}">
|
||||
<button
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
title="{decrementLabel || iconDescription}"
|
||||
aria-label="{decrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:down-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(-1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Subtract16 class="down-icon" />
|
||||
</button>
|
||||
<div class:bx--number__rule-divider="{true}"></div>
|
||||
<button
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
title="{incrementLabel || iconDescription}"
|
||||
aria-label="{incrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:up-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Add16 class="up-icon" />
|
||||
</button>
|
||||
<div class:bx--number__rule-divider="{true}"></div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<slot name="label">{label}</slot>
|
||||
</label>
|
||||
{/if}
|
||||
<div
|
||||
class:bx--number__input-wrapper="{true}"
|
||||
class:bx--number__input-wrapper--warning="{!invalid && warn}"
|
||||
>
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
type="number"
|
||||
pattern="[0-9]*"
|
||||
aria-describedby="{errorId}"
|
||||
data-invalid="{invalid || undefined}"
|
||||
aria-invalid="{invalid || undefined}"
|
||||
aria-label="{label ? undefined : ariaLabel}"
|
||||
disabled="{disabled}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
max="{max}"
|
||||
min="{min}"
|
||||
step="{step}"
|
||||
value="{value ?? ''}"
|
||||
readonly="{readonly}"
|
||||
{...$$restProps}
|
||||
on:change="{onChange}"
|
||||
on:input="{onInput}"
|
||||
on:focus
|
||||
on:blur
|
||||
/>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--number__invalid" />
|
||||
{/if}
|
||||
{#if !invalid && warn}
|
||||
<WarningAltFilled16
|
||||
class="bx--number__invalid bx--number__invalid--warning"
|
||||
/>
|
||||
{/if}
|
||||
{#if readonly}
|
||||
<EditOff16 class="bx--text-input__readonly-icon" />
|
||||
{/if}
|
||||
{#if !hideSteppers}
|
||||
<div class:bx--number__controls="{true}">
|
||||
<button
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
title="{decrementLabel || iconDescription}"
|
||||
aria-label="{decrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:down-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(-1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Subtract16 class="down-icon" />
|
||||
</button>
|
||||
<div class:bx--number__rule-divider="{true}"></div>
|
||||
<button
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
title="{incrementLabel || iconDescription}"
|
||||
aria-label="{incrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:up-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(1);
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
>
|
||||
<Add16 class="up-icon" />
|
||||
</button>
|
||||
<div class:bx--number__rule-divider="{true}"></div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if !error && !warn && helperText}
|
||||
<div
|
||||
class:bx--form__helper-text="{true}"
|
||||
|
|
@ -343,4 +269,4 @@
|
|||
<div id="{errorId}" class:bx--form-requirement="{true}">{warnText}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -158,7 +158,6 @@
|
|||
</span>
|
||||
{/if}
|
||||
<Button
|
||||
hasIconOnly
|
||||
kind="ghost"
|
||||
tooltipAlignment="center"
|
||||
tooltipPosition="top"
|
||||
|
|
@ -174,7 +173,6 @@
|
|||
}}"
|
||||
/>
|
||||
<Button
|
||||
hasIconOnly
|
||||
kind="ghost"
|
||||
tooltipAlignment="end"
|
||||
tooltipPosition="top"
|
||||
|
|
|
|||
|
|
@ -71,7 +71,6 @@
|
|||
<ul class:bx--pagination-nav__list="{true}">
|
||||
<li class:bx--pagination-nav__list-item="{true}">
|
||||
<Button
|
||||
hasIconOnly
|
||||
kind="ghost"
|
||||
tooltipAlignment="center"
|
||||
tooltipPosition="bottom"
|
||||
|
|
@ -129,7 +128,6 @@
|
|||
{/if}
|
||||
<li class:bx--pagination-nav__list-item="{true}">
|
||||
<Button
|
||||
hasIconOnly
|
||||
kind="ghost"
|
||||
tooltipAlignment="center"
|
||||
tooltipPosition="bottom"
|
||||
|
|
|
|||
|
|
@ -10,12 +10,6 @@
|
|||
*/
|
||||
export let value = "";
|
||||
|
||||
/**
|
||||
* @deprecated this prop will be removed in the next major release
|
||||
* Use size="sm" instead
|
||||
*/
|
||||
export let small = false;
|
||||
|
||||
/**
|
||||
* Specify the size of the search input
|
||||
* @type {"sm" | "lg" | "xl"}
|
||||
|
|
@ -86,7 +80,6 @@
|
|||
|
||||
{#if skeleton}
|
||||
<SearchSkeleton
|
||||
small="{small}"
|
||||
size="{size}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
|
|
@ -101,7 +94,7 @@
|
|||
class:bx--search="{true}"
|
||||
class:bx--search--light="{light}"
|
||||
class:bx--search--disabled="{disabled}"
|
||||
class:bx--search--sm="{size === 'sm' || small}"
|
||||
class:bx--search--sm="{size === 'sm'}"
|
||||
class:bx--search--lg="{size === 'lg'}"
|
||||
class:bx--search--xl="{size === 'xl'}"
|
||||
class:bx--search--expandable="{expandable}"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
<script>
|
||||
/**
|
||||
* @deprecated this prop will be removed in the next major release
|
||||
* Set to `true` to use the small variant
|
||||
*/
|
||||
export let small = false;
|
||||
|
||||
/**
|
||||
* Specify the size of the search input
|
||||
* @type {"sm" | "lg" | "xl"}
|
||||
|
|
@ -15,7 +9,7 @@
|
|||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--search--sm="{size === 'sm' || small}"
|
||||
class:bx--search--sm="{size === 'sm'}"
|
||||
class:bx--search--lg="{size === 'lg'}"
|
||||
class:bx--search--xl="{size === 'xl'}"
|
||||
{...$$restProps}
|
||||
|
|
|
|||
|
|
@ -5,12 +5,6 @@
|
|||
*/
|
||||
export let selected = undefined;
|
||||
|
||||
/**
|
||||
* Set to `true` to use the bordered variant
|
||||
* @deprecated
|
||||
*/
|
||||
export let border = false;
|
||||
|
||||
/** Set to `true` to use the condensed variant */
|
||||
export let condensed = false;
|
||||
|
||||
|
|
@ -41,7 +35,6 @@
|
|||
<div
|
||||
role="table"
|
||||
class:bx--structured-list="{true}"
|
||||
class:bx--structured-list--border="{border}"
|
||||
class:bx--structured-list--selection="{selection}"
|
||||
class:bx--structured-list--condensed="{condensed}"
|
||||
class:bx--structured-list--flush="{flush}"
|
||||
|
|
|
|||
|
|
@ -1,16 +1,12 @@
|
|||
<script>
|
||||
/** Specify the number of rows */
|
||||
export let rows = 5;
|
||||
|
||||
/** Set to `true` to use the bordered variant */
|
||||
export let border = false;
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--structured-list="{true}"
|
||||
class:bx--structured-list--border="{border}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -14,12 +14,6 @@
|
|||
/** Specify the label text */
|
||||
export let labelText = "";
|
||||
|
||||
/**
|
||||
* @deprecated The `hideLabel` prop for `TimePickerSelect` is no longer needed and has been deprecated. It will be removed in the next major release.
|
||||
* Set to `false` to show the label text
|
||||
*/
|
||||
export let hideLabel = true;
|
||||
|
||||
/** Set an id for the select element */
|
||||
export let id = "ccs-" + Math.random().toString(36);
|
||||
|
||||
|
|
@ -58,9 +52,8 @@
|
|||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
class:bx--visually-hidden="{true}"
|
||||
>
|
||||
<!-- TODO: set to always be `true` after `hideLabel` is deprecated -->
|
||||
<slot name="labelText">
|
||||
{labelText}
|
||||
</slot>
|
||||
|
|
|
|||
|
|
@ -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,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;
|
||||
|
|
@ -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