milk-lib 0.0.15 → 0.0.17

package/README.md

@@ -6,5 +6,16 @@ Sveltekit library, powered by [`sv`](https://npmjs.com/package/sv).
 - Sync ButtonMilk and TextInputMilk css variables with global theme
 
 ## Roadmap
-- TextInput
-- Control
++ TextInput Milk
++ TextInput Box
++ Command
+
+- Alert Dialog
+- Accordion
+- Sheet
+- Menu
+- Card
+- Checkbox
+- Select
+- Dialogs
+- Icons

package/dist/components/Command/Command.types.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import { type Writable } from 'svelte/store';
+export interface ICommandRootProps {
+    classNames?: string;
+    children: Snippet;
+    maxHeight?: number;
+}
+export interface ICommandListProps {
+    children: Snippet;
+}
+export interface ICommandGroupProps {
+    heading?: string;
+    children: Snippet;
+}
+export interface ICommandItemProps {
+    disabled?: boolean;
+    onClick?: (e: MouseEvent | null) => void;
+    children: Snippet;
+}
+export type CommandItemEntry = {
+    el: HTMLElement;
+    id: symbol;
+    disabled?: boolean;
+};
+export interface ICommandItems {
+    items: Writable<CommandItemEntry[]>;
+    activeItemId: Writable<symbol>;
+    searchQuery: Writable<string>;
+}

package/dist/components/Command/Command.types.js

@@ -0,0 +1 @@
+import {} from 'svelte/store';

package/dist/components/Command/Command.utils.d.ts

@@ -0,0 +1,9 @@
+import type { CommandItemEntry } from './Command.types';
+export declare function sortItemsByDOMPosition(list: {
+    el: HTMLElement;
+    id: symbol;
+}[]): {
+    el: HTMLElement;
+    id: symbol;
+}[];
+export declare function addItemSorted(list: CommandItemEntry[], entry: CommandItemEntry): CommandItemEntry[];

package/dist/components/Command/Command.utils.js

@@ -0,0 +1,8 @@
+export function sortItemsByDOMPosition(list) {
+    return list.slice().sort((a, b) => a.el.compareDocumentPosition(b.el) & Node.DOCUMENT_POSITION_FOLLOWING
+        ? -1
+        : 1);
+}
+export function addItemSorted(list, entry) {
+    return sortItemsByDOMPosition([...list, entry]);
+}

package/dist/components/Command/CommandGroup.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import type { ICommandGroupProps } from './Command.types';
+  let { heading, children } : ICommandGroupProps = $props();
+
+  let commandGroupItemsVisibility = writable<Record<symbol, boolean>>({});
+  setContext('command-group-visibility', { commandGroupItemsVisibility });
+  let allFalse = $derived(Object.getOwnPropertySymbols($commandGroupItemsVisibility)
+        .every(sym => $commandGroupItemsVisibility[sym] === false));
+
+
+
+</script>
+
+
+
+<div class="CommandGroup" class:hidden={allFalse} >
+  {#if heading}
+    <div class="CommandGroup-heading">{heading}</div>
+  {/if}
+  {@render children()}
+</div>
+
+
+
+<style>.CommandGroup {
+  padding: var(--group-padding-y) var(--group-padding-x);
+  border-bottom: 1px solid var(--border-color);
+}
+.CommandGroup.hidden {
+  display: none;
+}
+.CommandGroup:last-of-type {
+  border-bottom: none;
+  padding: 0 var(--group-padding-x);
+}
+
+.CommandGroup .CommandGroup-heading {
+  padding: var(--padding-y) var(--padding-x);
+  color: var(--group-heading-color);
+  font-size: 0.875em;
+}</style>

package/dist/components/Command/CommandGroup.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ICommandGroupProps } from './Command.types';
+declare const CommandGroup: import("svelte").Component<ICommandGroupProps, {}, "">;
+type CommandGroup = ReturnType<typeof CommandGroup>;
+export default CommandGroup;

package/dist/components/Command/CommandInput.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { TextInputBlock } from '../..';
+  import type { ITextInputBlockProps } from '../TextInputBlock/TextInputBlock.types';
+  import { Search2LineSystem } from 'svelte-remix';
+  import { getContext } from 'svelte';
+  import { type Writable } from 'svelte/store';
+
+  const { searchQuery } = getContext<{ searchQuery: Writable<string> }>('command-items');
+
+  let value = $state('');
+
+  function onInput(e: Event) {
+    searchQuery.set(value.toLowerCase().trim());
+  }
+
+  interface ICommandInputProps extends ITextInputBlockProps {
+    autoFocus?: boolean;
+    visible?: boolean;
+    placeholder?: string;
+  }
+
+  let { autoFocus, visible=true, placeholder, ...rest }: ICommandInputProps = $props();
+
+</script>
+
+
+<div class={`CommandInput ${visible ? 'visible' : ''}`}>
+  <TextInputBlock
+    readonly={!visible}
+    {autoFocus} 
+    size='lg' 
+    {placeholder}
+    variant="text"
+    onKeyUp={onInput} 
+    bind:value type="text"
+    {...rest}
+  >
+    {#snippet prefix()}
+      <Search2LineSystem size="1em"/>
+    {/snippet}
+  </TextInputBlock>
+</div>
+
+
+<style>.CommandInput {
+  --border-color: var(--line-base);
+  margin-bottom: 0.25rem;
+}
+
+.CommandInput {
+  border-bottom: 1px solid var(--border-color);
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+}
+.CommandInput.visible {
+  opacity: 1;
+  position: relative;
+  z-index: 0;
+}</style>

package/dist/components/Command/CommandInput.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ITextInputBlockProps } from '../TextInputBlock/TextInputBlock.types';
+interface ICommandInputProps extends ITextInputBlockProps {
+    autoFocus?: boolean;
+    visible?: boolean;
+    placeholder?: string;
+}
+declare const CommandInput: import("svelte").Component<ICommandInputProps, {}, "">;
+type CommandInput = ReturnType<typeof CommandInput>;
+export default CommandInput;

package/dist/components/Command/CommandItem.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { getContext, onMount, onDestroy } from 'svelte';
+  import { derived, type Writable } from 'svelte/store';
+  import type { ICommandItemProps, ICommandItems } from './Command.types';
+  import { addItemSorted } from './Command.utils';
+
+  let { disabled, onClick, children } : ICommandItemProps = $props();
+  let el: HTMLElement;
+  const itemId = Symbol();
+  let textContent = $state('');
+  let shouldShow = $state(true);
+  const { items, activeItemId, searchQuery }: ICommandItems = getContext('command-items');
+  const { commandGroupItemsVisibility }: { commandGroupItemsVisibility: Writable<Record<symbol, boolean>>} = getContext('command-group-visibility');
+
+  // Определяем нужно ли отображать элемент согласно searchQueryshad
+  $effect(() => {
+    textContent = el?.textContent?.toLowerCase().trim() || '';
+    shouldShow = !$searchQuery || textContent.includes($searchQuery);
+    // Этот блок передает в группу объект со значениями [id]: visible (для каждого CommandItem)
+    commandGroupItemsVisibility.update((recs) => ({ ...recs, [itemId]: shouldShow }));
+  });
+
+  onMount(() => {
+    // Добавляем элемент в Root state
+    items.update(list => addItemSorted(list, { el, id: itemId, disabled: !!disabled }));
+  });
+
+  onDestroy(() => {
+    // Непонятно нахрена это здесь. Это обновляет Root state зачем-то
+    items.update(list => list.filter(item => item.id !== itemId));
+  });
+
+  // Вычисляем активный это элемент или нет
+  const isActive = derived(activeItemId, $itemId => $itemId === itemId);
+
+  function handleClick(e: MouseEvent) {
+    if (disabled) return;
+    activeItemId.set(itemId);
+    onClick?.(e);
+  }
+
+  // Это не тестировалось еще TODO: to test
+  $effect(() => {
+    if ($isActive) {
+      el.scrollIntoView({ block: 'nearest' });
+    }
+  });
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    let key = (e.key);
+    if (key === 'Enter') {
+      onClick?.(null);
+    }
+  }
+  
+</script>
+
+<div 
+  bind:this={el}
+  onclick={handleClick}
+  onkeydown={handleKeyDown}
+  class={`CommandItem ${disabled ? 'disabled' : ''}`} 
+  class:active={$isActive}
+  class:hidden={!shouldShow}
+  role="option" 
+  tabindex="-1"
+  aria-selected={$isActive}
+  data-command-item 
+  data-selected
+>
+  {@render children()}
+</div>
+
+<style>.CommandItem {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: var(--padding-y) var(--padding-x);
+  gap: var(--inner-gap);
+  cursor: pointer;
+  border-radius: var(--item-border-radius);
+  transition: background 0.3s ease-in-out;
+}
+.CommandItem.hidden {
+  display: none;
+}
+.CommandItem:focus-visible, .CommandItem:focus-within {
+  outline: none;
+}
+.CommandItem.active {
+  background: var(--item-active);
+}
+.CommandItem.active:not(.disabled):hover {
+  background: var(--item-active);
+}
+.CommandItem.disabled {
+  opacity: var(--opacity-item-disabled);
+  cursor: not-allowed;
+}
+.CommandItem:not(.disabled):hover {
+  background: var(--item-hover);
+}</style>

package/dist/components/Command/CommandItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ICommandItemProps } from './Command.types';
+declare const CommandItem: import("svelte").Component<ICommandItemProps, {}, "">;
+type CommandItem = ReturnType<typeof CommandItem>;
+export default CommandItem;

package/dist/components/Command/CommandList.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { ICommandListProps } from './Command.types';
+  let { children } : ICommandListProps = $props();
+</script>
+
+<div class="CommandList" role="listbox">
+  {@render children()}
+</div>
+
+<style>.CommandList {
+  display: flex;
+  flex-direction: column;
+}</style>

package/dist/components/Command/CommandList.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ICommandListProps } from './Command.types';
+declare const CommandList: import("svelte").Component<ICommandListProps, {}, "">;
+type CommandList = ReturnType<typeof CommandList>;
+export default CommandList;

package/dist/components/Command/CommandRoot.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { writable, get } from 'svelte/store';
+  import type { ICommandRootProps, CommandItemEntry, ICommandItems } from './Command.types';
+
+  let { classNames, maxHeight, children }: ICommandRootProps = $props();
+
+  let rootEl: HTMLDivElement;
+  const items = writable<CommandItemEntry[]>([]);
+  let visibleItems = $derived($items.filter(i => {
+    const text = i.el.textContent?.toLowerCase() || '';
+    return text.includes($searchQuery);
+  }));
+  const activeItemId = writable<symbol>();
+  const searchQuery = writable('');
+  setContext<ICommandItems>('command-items', {
+    items,          // список всех зарегистрированных children CommandItem
+    activeItemId,   // ID текущего выбранного
+    searchQuery     // строка поиска
+  });
+
+  function handleKeydown(e: KeyboardEvent) {
+
+    if (!visibleItems.length) return;
+
+    const index = visibleItems.findIndex(i => i.id === get(activeItemId));
+    const currentIndex = index === -1 ? 0 : index;
+
+    const findNext = (start: number) => {
+      for (let i = start + 1; i < visibleItems.length; i++) {
+        if (!visibleItems[i].disabled) return i;
+      }
+      return currentIndex;
+    };
+
+    const findPrev = (start: number) => {
+      for (let i = start - 1; i >= 0; i--) {
+        if (!visibleItems[i].disabled) return i;
+      }
+      return currentIndex;
+    };
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      const next = findNext(currentIndex);
+      activeItemId.set(visibleItems[next].id);
+
+    }
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      const prev = findPrev(currentIndex);
+      activeItemId.set(visibleItems[prev].id);
+    }
+
+    if (e.key === 'Enter') {
+    const id = get(activeItemId);
+    const current = get(items).find(item => item.id === id);
+    if (current && current.el && !current.disabled) {
+      current.el.click(); // Имитируем клик по активному CommandItem
+    }
+  }
+  }
+  
+</script>
+
+<div
+  class={`CommandRoot ${classNames}`}
+  bind:this={rootEl}
+  tabindex="0"
+  onkeydown={handleKeydown}
+  role="listbox"
+  style={`${maxHeight ? `max-height: ${maxHeight}px; overflow-y: auto;` : ''}`}
+>
+  {@render children()}
+</div>
+
+<style>.CommandRoot {
+  --border-color: var(--line-base);
+  --border-color-focus: var(--line-control-100);
+  --background-color: var(--bg-base);
+  --outter-padding: 4px;
+  --border-radius: var(--border-radius-panel);
+  --font-size: 1em;
+  --padding-y: 7px;
+  --padding-x: 12px;
+  --inner-gap: 7px;
+  --item-hover: var(--bg-base-100);
+  --item-active: var(--bg-base-200);
+  --item-border-radius: var(--border-radius-button);
+  --opacity-item-disabled: 0.6;
+  --group-heading-color: var(--text-base-muted);
+  --group-padding-y: 0;
+  --group-padding-x: 0;
+}
+
+.CommandRoot {
+  padding: var(--outter-padding);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  font-size: var(--font-size);
+  background: var(--background-color);
+}
+.CommandRoot:focus-visible, .CommandRoot:focus-within {
+  outline: none;
+  border-color: var(--line-control-100);
+}</style>

package/dist/components/Command/CommandRoot.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ICommandRootProps } from './Command.types';
+declare const CommandRoot: import("svelte").Component<ICommandRootProps, {}, "">;
+type CommandRoot = ReturnType<typeof CommandRoot>;
+export default CommandRoot;

package/dist/components/Command/index.d.ts

@@ -0,0 +1,6 @@
+export { default as CommandRoot } from './CommandRoot.svelte';
+export { default as CommandInput } from './CommandInput.svelte';
+export { default as CommandList } from './CommandList.svelte';
+export { default as CommandGroup } from './CommandGroup.svelte';
+export { default as CommandItem } from './CommandItem.svelte';
+export * from './Command.types';

package/dist/components/Command/index.js

@@ -0,0 +1,6 @@
+export { default as CommandRoot } from './CommandRoot.svelte';
+export { default as CommandInput } from './CommandInput.svelte';
+export { default as CommandList } from './CommandList.svelte';
+export { default as CommandGroup } from './CommandGroup.svelte';
+export { default as CommandItem } from './CommandItem.svelte';
+export * from './Command.types';

package/dist/components/TextInput/TextInput.svelte

@@ -23,6 +23,7 @@
     ariaHasPopup,
     ariaExpanded,
     ariaControls,
+    dataVariant,
     ...rest
   }: ITextInputProps = $props();
 
@@ -61,6 +62,7 @@
   aria-haspopup={ariaHasPopup}
   aria-expanded={ariaExpanded}
   aria-controls={ariaControls}
+  {...(dataVariant ? { 'data-variant': dataVariant } : {})}
   {...rest}
 />
 

package/dist/components/TextInput/TextInput.types.d.ts

@@ -25,6 +25,7 @@ export interface ITextInputProps {
     ariaHasPopup?: "dialog" | "menu" | "listbox" | "tree" | "grid" | null | undefined;
     ariaExpanded?: boolean;
     ariaControls?: string;
+    dataVariant?: string;
 }
 export type ITextInputMessageVariant = 'default' | 'error';
 export interface ITextInputMessageProps {

package/dist/components/TextInputBlock/TextInputBlock.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { TextInputMilk, type TextInputInstance } from '../..';
+  import type { ITextInputBlockProps } from './TextInputBlock.types';
+  import { CloseCircleFillSystem } from 'svelte-remix';
+
+  let {
+    prefix,
+    suffix,
+    disabled,
+    value = $bindable(),
+    placeholder,
+    variant = 'contained',
+    onClear,
+    pseudoFocus,
+    ...rest
+  }: ITextInputBlockProps = $props();
+
+  // Calculate suffix and prefix width
+  let prefixEl = $state<HTMLDivElement | null>(null);
+  let prefixWidth = $derived(prefixEl?.getBoundingClientRect().width || 0);
+
+  let suffixEl = $state<HTMLDivElement | null>(null);
+  let suffixWidth = $derived<number>(suffixEl?.getBoundingClientRect().width || 0);
+
+  // Прокидываем фокус примитива
+  let textInputRef: TextInputInstance;
+  export const focus = () => textInputRef.focus();
+
+  const handleClear = () => {
+    value = "";
+    textInputRef.focus();
+    onClear?.();
+  }
+
+</script>
+
+<div class="TextInputBlock">
+  {#if prefix}
+    <div class="prefix" bind:this={prefixEl}>
+      {@render prefix()}
+    </div>
+  {/if}
+  
+  <TextInputMilk
+    placeholder={prefix ? (prefixWidth !== 0 ? placeholder : '') : placeholder}
+    {variant}
+    {disabled}
+    bind:this={textInputRef}
+    style={`
+      ${prefix ? `padding-left: ${prefixWidth + 4}px; padding-right: ${suffixWidth + 4}px;` : ``}
+      ${pseudoFocus ? `border-color: var(--border-color-focus)` : ``}
+    `}
+    bind:value
+    {...rest}
+  />
+
+
+  {#if onClear && !disabled && value !== ''}
+    <!-- I deliberately excluded this button from tabindex -->
+    <button tabindex="-1" type="button" class="clear-value" style={`right: ${suffixWidth + 12}px;`} onmouseup={handleClear}>
+      <CloseCircleFillSystem size="1em" />
+    </button>
+  {/if}
+
+  {#if suffix}
+    <div class="suffix" bind:this={suffixEl}>
+      {@render suffix()}
+    </div>
+  {/if}
+</div>
+
+<style>.TextInputBlock {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+.TextInputBlock .prefix, .TextInputBlock .suffix {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.TextInputBlock .prefix {
+  left: 0;
+  padding-left: 0.75em;
+}
+.TextInputBlock .suffix {
+  right: 0;
+  padding-right: 0.75em;
+}
+.TextInputBlock .clear-value {
+  position: absolute;
+  z-index: 1;
+  top: 4px;
+  bottom: 4px;
+  height: calc(100% - 8px);
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 0 4px;
+}
+.TextInputBlock .clear-value:focus {
+  outline: none;
+  background-color: #EDEEF0;
+  border-color: #D3D5DC;
+}</style>

package/dist/components/TextInputBlock/TextInputBlock.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { ITextInputBlockProps } from './TextInputBlock.types';
+declare const TextInputBlock: import("svelte").Component<ITextInputBlockProps, {
+    focus: () => void;
+}, "value">;
+type TextInputBlock = ReturnType<typeof TextInputBlock>;
+export default TextInputBlock;

package/dist/components/TextInputBlock/TextInputBlock.types.d.ts

@@ -0,0 +1,8 @@
+import type { ITextInputMilkProps } from '../..';
+import type { Snippet } from 'svelte';
+export interface ITextInputBlockProps extends ITextInputMilkProps {
+    prefix?: Snippet;
+    suffix?: Snippet;
+    onClear?: () => void;
+    pseudoFocus?: boolean;
+}

package/dist/components/TextInputBlock/TextInputBlock.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/TextInputBlock/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TextInputBlock } from './TextInputBlock.svelte';
+export * from './TextInputBlock.types';

package/dist/components/TextInputBlock/index.js

@@ -0,0 +1,2 @@
+export { default as TextInputBlock } from './TextInputBlock.svelte';
+export * from './TextInputBlock.types';

package/dist/components/TextInputMilk/TextInputMilk.scss

@@ -1,4 +1,4 @@
-.TextInput.TextInput-sm {
+.TextInput.TextInput-sm[data-variant="milk"] {
   --padding-y: 5px;
   --padding-x: 5px;
   --font-size: var(--font-size-sm);
@@ -6,7 +6,7 @@
   --border-radius: var(--border-radius-button-sm);
 }
 
-.TextInput.TextInput-md {
+.TextInput.TextInput-md[data-variant="milk"] {
   --padding-y: 5px;
   --padding-x: 6px;
   --font-size: var(--font-size-md);
@@ -14,7 +14,7 @@
   --border-radius: var(--border-radius-button);
 }
 
-.TextInput.TextInput-lg {
+.TextInput.TextInput-lg[data-variant="milk"] {
   --padding-y: 7px;
   --padding-x: 12px;
   --font-size: var(--font-size-lg);
@@ -22,7 +22,7 @@
   --border-radius: var(--border-radius-button);
 }
 
-.TextInput.TextInput-text {
+.TextInput.TextInput-text[data-variant="milk"] {
   --padding-x: 0px;
   --border-radius: 0;
   --border-width: 0px;
@@ -30,7 +30,7 @@
   --border-color: transparent;
   --border-color-focus: transparent;
 }
-.TextInput.TextInput-underlined {
+.TextInput.TextInput-underlined[data-variant="milk"] {
   --padding-x: 0px;
 
   --border-radius: 0;
@@ -76,6 +76,6 @@
   --border-left-width-invalid: 0px;
   --border-right-width-invalid: 0px;
 }
-.TextInput.TextInput-contained {
+.TextInput.TextInput-contained[data-variant="milk"] {
   // Default
 }

package/dist/components/TextInputMilk/TextInputMilk.svelte

@@ -35,5 +35,6 @@
   bind:value
   bind:this={textInputRef}
   {classNames}
+  dataVariant='milk'
   {...rest}
 />

package/dist/components/index.d.ts

@@ -6,6 +6,8 @@ export * from './ThemeProvider';
 export * from './Button';
 export * from './ButtonMilk';
 export * from './Badge';
+export * from './Label';
 export * from './TextInput';
 export * from './TextInputMilk';
-export * from './Label';
+export * from './TextInputBlock';
+export * from './Command';

package/dist/components/index.js

@@ -6,6 +6,8 @@ export * from './ThemeProvider';
 export * from './Button';
 export * from './ButtonMilk';
 export * from './Badge';
+export * from './Label';
 export * from './TextInput';
 export * from './TextInputMilk';
-export * from './Label';
+export * from './TextInputBlock';
+export * from './Command';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "milk-lib",
 	"license": "MIT",
-	"version": "0.0.15",
+	"version": "0.0.17",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",