@sveltia/ui 0.33.1 → 0.34.0

package/dist/components/text-field/search-bar.svelte

@@ -22,6 +22,7 @@
    * @property {string} [value] Input value.
    * @property {Snippet} [searchIcon] Search icon slot content.
    * @property {Snippet} [closeIcon] Close icon slot content.
+   * @property {() => void} [onClear] Callback invoked when the clear button is clicked.
    */
 
   /**
@@ -40,6 +41,7 @@
     children,
     searchIcon,
     closeIcon,
+    onClear,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
@@ -98,11 +100,7 @@
       onclick={() => {
         value = '';
         inputElement?.focus();
-        globalThis.requestIdleCallback(() => {
-          inputElement?.dispatchEvent(new KeyboardEvent('input'));
-          inputElement?.dispatchEvent(new KeyboardEvent('keypress'));
-          inputElement?.dispatchEvent(new KeyboardEvent('change'));
-        });
+        onClear?.();
       }}
     >
       {#snippet startIcon()}

package/dist/components/text-field/search-bar.svelte.d.ts

@@ -24,6 +24,10 @@ declare const SearchBar: import("svelte").Component<TextInputProps & import("../
      * Close icon slot content.
      */
     closeIcon?: Snippet<[]> | undefined;
+    /**
+     * Callback invoked when the clear button is clicked.
+     */
+    onClear?: (() => void) | undefined;
 } & Record<string, any>, {
     focus: () => void;
 }, "value">;
@@ -40,6 +44,10 @@ type Props = {
      * Close icon slot content.
      */
     closeIcon?: Snippet<[]> | undefined;
+    /**
+     * Callback invoked when the clear button is clicked.
+     */
+    onClear?: (() => void) | undefined;
 };
 import type { TextInputProps } from '../../typedefs';
 import type { InputEventHandlers } from '../../typedefs';

package/dist/components/text-field/secret-input.svelte

@@ -0,0 +1,142 @@
+<!--
+  @component
+  Similar to `PasswordInput`, but it doesn’t use `type="password"` to hide the input value. Instead,
+  it relies on CSS to visually conceal the input to prevent password managers from prompting to save
+  the password.
+  @see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-text-security
+-->
+<script>
+  import { _ } from 'svelte-i18n';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
+  import TextInput from './text-input.svelte';
+
+  /**
+   * @import { Snippet } from 'svelte';
+   * @import { CommonEventHandlers, InputEventHandlers, TextInputProps } from '../../typedefs';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {string} [value] Input value.
+   * @property {Snippet} [visibilityIcon] Visibility icon slot content.
+   */
+
+  /**
+   * @type {TextInputProps & CommonEventHandlers & InputEventHandlers & Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    value = $bindable(),
+    flex = false,
+    monospace = true,
+    class: className,
+    hidden = false,
+    disabled = false,
+    readonly = false,
+    required = false,
+    invalid = false,
+    children,
+    visibilityIcon,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  const id = $props.id();
+
+  /**
+   * Reference to the `<input>` element.
+   * @type {HTMLInputElement | undefined}
+   */
+  let inputElement = $state();
+  let show = $state(false);
+</script>
+
+<div
+  role="none"
+  class="sui secret-input {className}"
+  class:flex
+  class:disabled
+  class:readonly
+  class:show
+  {hidden}
+>
+  <TextInput
+    bind:element={inputElement}
+    {...restProps}
+    {id}
+    bind:value
+    spellcheck="false"
+    {flex}
+    {monospace}
+    {hidden}
+    {disabled}
+    {readonly}
+    {required}
+    {invalid}
+  />
+  <Button
+    iconic
+    disabled={disabled || readonly}
+    pressed={show}
+    aria-label={$_(show ? '_sui.secret_input.hide_secret' : '_sui.secret_input.show_secret')}
+    aria-controls={id}
+    onclick={() => {
+      show = !show;
+    }}
+  >
+    {#snippet startIcon()}
+      {#if visibilityIcon}
+        {@render visibilityIcon()}
+      {:else}
+        <Icon name={show ? 'visibility_off' : 'visibility'} />
+      {/if}
+    {/snippet}
+  </Button>
+</div>
+
+<style>.secret-input {
+  display: inline-flex;
+  align-items: center;
+  margin: var(--sui-focus-ring-width);
+  min-width: var(--sui-textbox-singleline-min-width);
+}
+.secret-input.flex {
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: stretch;
+  min-width: 0;
+}
+.secret-input.show :global(input) {
+  -webkit-text-security: none;
+}
+.secret-input :global(.text-input) {
+  flex: auto;
+  margin: 0 !important;
+  width: 0;
+  min-width: 0 !important;
+}
+.secret-input :global(input) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  -webkit-text-security: disc;
+}
+.secret-input :global(button) {
+  flex: none;
+  margin-block: 0;
+  margin-inline-start: -1px;
+  margin-inline-end: 0;
+  border-width: 1px;
+  border-color: var(--sui-textbox-border-color);
+  width: var(--sui-textbox-height);
+  aspect-ratio: 1/1;
+}
+.secret-input :global(button:last-child) {
+  border-start-start-radius: 0;
+  border-start-end-radius: 4px;
+  border-end-end-radius: 4px;
+  border-end-start-radius: 0;
+}
+.secret-input :global(button) :global(.icon) {
+  font-size: var(--sui-font-size-xx-large);
+}</style>

package/dist/components/text-field/secret-input.svelte.d.ts

@@ -0,0 +1,34 @@
+export default SecretInput;
+type SecretInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<TextInputProps & KeyboardEventHandlers & MouseEventHandlers & FocusEventHandlers & DragEventHandlers & InputEventHandlers & Props & Record<string, any>>): void;
+};
+/**
+ * Similar to `PasswordInput`, but it doesn’t use `type="password"` to hide the input value. Instead,
+ * it relies on CSS to visually conceal the input to prevent password managers from prompting to save
+ * the password.
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-text-security
+ */
+declare const SecretInput: import("svelte").Component<TextInputProps & import("../../typedefs").KeyboardEventHandlers & import("../../typedefs").MouseEventHandlers & import("../../typedefs").FocusEventHandlers & import("../../typedefs").DragEventHandlers & InputEventHandlers & {
+    /**
+     * Input value.
+     */
+    value?: string | undefined;
+    /**
+     * Visibility icon slot content.
+     */
+    visibilityIcon?: Snippet<[]> | undefined;
+} & Record<string, any>, {}, "value">;
+type Props = {
+    /**
+     * Input value.
+     */
+    value?: string | undefined;
+    /**
+     * Visibility icon slot content.
+     */
+    visibilityIcon?: Snippet<[]> | undefined;
+};
+import type { TextInputProps } from '../../typedefs';
+import type { InputEventHandlers } from '../../typedefs';
+import type { Snippet } from 'svelte';

package/dist/index.d.ts

@@ -67,6 +67,7 @@ export { default as TextEditor } from "./components/text-editor/text-editor.svel
 export { default as NumberInput } from "./components/text-field/number-input.svelte";
 export { default as PasswordInput } from "./components/text-field/password-input.svelte";
 export { default as SearchBar } from "./components/text-field/search-bar.svelte";
+export { default as SecretInput } from "./components/text-field/secret-input.svelte";
 export { default as TextArea } from "./components/text-field/text-area.svelte";
 export { default as TextInput } from "./components/text-field/text-input.svelte";
 export { default as Toast } from "./components/toast/toast.svelte";

package/dist/index.js

@@ -71,6 +71,7 @@ export { default as TextEditor } from './components/text-editor/text-editor.svel
 export { default as NumberInput } from './components/text-field/number-input.svelte';
 export { default as PasswordInput } from './components/text-field/password-input.svelte';
 export { default as SearchBar } from './components/text-field/search-bar.svelte';
+export { default as SecretInput } from './components/text-field/secret-input.svelte';
 export { default as TextArea } from './components/text-field/text-area.svelte';
 export { default as TextInput } from './components/text-field/text-input.svelte';
 export { default as Toast } from './components/toast/toast.svelte';

package/dist/locales/en.d.ts

@@ -35,6 +35,10 @@ export namespace strings {
         let show_password: string;
         let hide_password: string;
     }
+    namespace secret_input {
+        let show_secret: string;
+        let hide_secret: string;
+    }
     namespace select_tags {
         let selected_options: string;
         let remove_x: string;

package/dist/locales/en.js

@@ -35,6 +35,10 @@ export const strings = {
     show_password: 'Show Password',
     hide_password: 'Hide Password',
   },
+  secret_input: {
+    show_secret: 'Show Secret',
+    hide_secret: 'Hide Secret',
+  },
   select_tags: {
     selected_options: 'Selected options',
     remove_x: 'Remove {name}',

package/dist/locales/ja.d.ts

@@ -35,6 +35,10 @@ export namespace strings {
         let show_password: string;
         let hide_password: string;
     }
+    namespace secret_input {
+        let show_secret: string;
+        let hide_secret: string;
+    }
     namespace select_tags {
         let selected_options: string;
         let remove_x: string;

package/dist/locales/ja.js

@@ -35,6 +35,10 @@ export const strings = {
     show_password: 'パスワードを表示',
     hide_password: 'パスワードを隠す',
   },
+  secret_input: {
+    show_secret: 'シークレットを表示',
+    hide_secret: 'シークレットを隠す',
+  },
   select_tags: {
     selected_options: '選択済みのオプション',
     remove_x: '{name} を削除',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.33.1",
+  "version": "0.34.0",
   "license": "MIT",
   "type": "module",
   "repository": {