@invopop/popui 0.0.104 → 0.1.1

package/dist/DrawerContext.svelte

@@ -1,34 +1,45 @@
-<script>import DrawerContextItem from "./DrawerContextItem.svelte";
-import { createEventDispatcher } from "svelte";
-import DrawerContextSeparator from "./DrawerContextSeparator.svelte";
-const dispatch = createEventDispatcher();
-export let items = [];
-export let multiple = false;
-export let widthClass = "w-60";
-$:
-  selectedItems = items.filter((i) => i.selected);
-$:
-  dispatch("selected", selectedItems);
-function updateItem(event) {
-  const item = event.detail;
-  items = items.map((i) => {
-    if (i.value === item.value)
-      return item;
-    return i;
-  });
-}
+<script lang="ts">
+  import type { DrawerContextProps, DrawerOption } from './types.ts'
+  import DrawerContextItem from './DrawerContextItem.svelte'
+  import InputSearch from './InputSearch.svelte'
+  import DrawerContextSeparator from './DrawerContextSeparator.svelte'
+
+  let {
+    items = $bindable([]),
+    multiple = false,
+    searchable = false,
+    widthClass = 'w-60',
+    onclick,
+    onselect
+  }: DrawerContextProps = $props()
+
+  let selectedItems = $derived(items.filter((i) => i.selected))
+  $effect(() => {
+    onselect?.(selectedItems)
+  })
+
+  function updateItem(item: DrawerOption) {
+    items = items.map((i) => {
+      if (i.value === item.value) return item
+      return i
+    })
+  }
 </script>
 
 <div
-  class="{widthClass} border border-neutral-200 py-1 rounded-2xl shadow-lg space-y-0.5 bg-white max-h-80 overflow-y-auto"
+  class="{widthClass} border border-neutral-200 py-1 rounded-md shadow-lg space-y-0.5 bg-white max-h-80 overflow-y-auto"
 >
-  <slot />
+  {#if searchable}
+    <div class="px-2 mt-2 mb-1">
+      <InputSearch placeholder="Search" />
+    </div>
+  {/if}
   <ul class="space-y-0.5 max-h-80 overflow-y-auto">
     {#each items as item}
       {#if item.separator}
         <DrawerContextSeparator />
       {:else}
-        <DrawerContextItem {item} {multiple} on:click on:change={updateItem} />
+        <DrawerContextItem {item} {multiple} {onclick} onchange={updateItem} />
       {/if}
     {/each}
   </ul>

package/dist/DrawerContext.svelte.d.ts

@@ -1,24 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { DrawerOption } from './types.ts';
-declare const __propDef: {
-    props: {
-        items?: DrawerOption[] | undefined;
-        multiple?: boolean | undefined;
-        widthClass?: string | undefined;
-    };
-    events: {
-        click: CustomEvent<any>;
-        selected: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type DrawerContextProps = typeof __propDef.props;
-export type DrawerContextEvents = typeof __propDef.events;
-export type DrawerContextSlots = typeof __propDef.slots;
-export default class DrawerContext extends SvelteComponent<DrawerContextProps, DrawerContextEvents, DrawerContextSlots> {
-}
-export {};
+import type { DrawerContextProps } from './types.ts';
+declare const DrawerContext: import("svelte").Component<DrawerContextProps, {}, "items">;
+type DrawerContext = ReturnType<typeof DrawerContext>;
+export default DrawerContext;

package/dist/DrawerContextItem.svelte

@@ -1,61 +1,74 @@
-<script>import InputCheckbox from "./InputCheckbox.svelte";
-import { Icon } from "@steeze-ui/svelte-icon";
-import { createEventDispatcher, onMount } from "svelte";
-import { Tick } from "@invopop/ui-icons";
-import ProfileAvatar from "./ProfileAvatar.svelte";
-import clsx from "clsx";
-import BaseFlag from "./BaseFlag.svelte";
-import { getCountryName } from "./helpers.js";
-import TagStatus from "./TagStatus.svelte";
-const dispatch = createEventDispatcher();
-export let multiple = false;
-export let item;
-export let scrollIfSelected = false;
-export let workspace = false;
-let el;
-$:
-  hasIcon = item.icon || workspace;
-$:
-  styles = clsx(
-    { "py-1 space-x-3": workspace },
-    { "py-1.5 space-x-1.5": !workspace },
-    { "pl-1.5": hasIcon },
-    { "pl-2": !hasIcon },
-    { "bg-workspace-accent-100": item.selected && !multiple },
-    { "group-hover:bg-neutral-100": !item.selected && !item.disabled || multiple }
-  );
-$:
-  labelStyles = clsx(
-    { "text-danger-500": item.destructive },
-    { "text-neutral-800": !item.destructive },
-    { "tracking-tight max-w-[200px]": workspace },
-    { "tracking-normal": !workspace }
-  );
-$:
-  title = item.label.length > 25 ? item.label : void 0;
-onMount(() => {
-  if (!scrollIfSelected)
-    return;
-  if (item.selected) {
-    el.scrollIntoView();
+<script lang="ts">
+  import type { DrawerContextItemProps } from './types.ts'
+  import InputCheckbox from './InputCheckbox.svelte'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { onMount } from 'svelte'
+  import { Success, Tick } from '@invopop/ui-icons'
+  import ProfileAvatar from './ProfileAvatar.svelte'
+  import clsx from 'clsx'
+  import BaseFlag from './BaseFlag.svelte'
+  import { getCountryName } from './helpers.js'
+  import TagStatus from './TagStatus.svelte'
+
+  let {
+    multiple = false,
+    item = $bindable(),
+    scrollIfSelected = false,
+    workspace = false,
+    onchange,
+    onclick
+  }: DrawerContextItemProps = $props()
+
+  let el: HTMLElement | undefined = $state()
+
+  let hasIcon = $derived(item.icon || workspace)
+
+  let styles = $derived(
+    clsx(
+      { 'py-1 space-x-3': workspace },
+      { 'py-1.5 space-x-1.5': !workspace },
+      { 'pl-1.5': !hasIcon },
+      { 'pl-2': hasIcon },
+      { 'bg-workspace-accent-100': item.selected && !multiple },
+      { 'group-hover:bg-neutral-100': (!item.selected && !item.disabled) || multiple }
+    )
+  )
+  let labelStyles = $derived(
+    clsx(
+      { 'text-danger-500': item.destructive },
+      { 'text-neutral-800': !item.destructive },
+      { 'tracking-tight max-w-[200px]': workspace },
+      { 'tracking-normal': !workspace }
+    )
+  )
+  let title = $derived(item.label.length > 25 ? item.label : undefined)
+
+  onMount(() => {
+    if (!scrollIfSelected) return
+
+    if (item.selected) {
+      el?.scrollIntoView()
+    }
+  })
+
+  function handleClick(event: MouseEvent) {
+    event.stopPropagation()
+    if (multiple) {
+      item.selected = !item.selected
+      onchange?.(item)
+    } else {
+      onclick?.(item.value)
+    }
   }
-});
 </script>
 
 <button
   bind:this={el}
   class="w-full px-1 py-0.5 disabled:opacity-30 group"
   disabled={item.disabled}
-  on:click|stopPropagation={() => {
-    if (multiple) {
-      item.selected = !item.selected
-      dispatch('change', item)
-    } else {
-      dispatch('click', item.value)
-    }
-  }}
+  onclick={handleClick}
 >
-  <div class="{styles} rounded pr-1.5 flex items-center justify-start w-full">
+  <div class="{styles} rounded pr-2 flex items-center justify-start w-full">
     {#if workspace}
       <ProfileAvatar name={item.label} picture={item.picture} large />
     {:else if item.icon}
@@ -77,23 +90,23 @@ onMount(() => {
       {#if item.country}
         <span class="flex space-x-1 items-center">
           <BaseFlag country={item.country} width={10} />
-          <span class="text-sm text-neutral-500 tracking-normal">
-            {getCountryName(item.country)}
-          </span>
+          <span class="text-sm text-neutral-500 tracking-normal"
+            >{getCountryName(item.country)}</span
+          >
         </span>
       {/if}
     </div>
     {#if multiple}
       <InputCheckbox
         bind:checked={item.selected}
-        on:change={() => {
-          dispatch('change', item)
+        onchange={() => {
+          onchange?.(item)
         }}
       />
     {:else if item.selected}
-      <Icon src={Tick} class="w-5 h-5 text-workspace-accent" />
+      <Icon src={Success} class="w-4 h-4 text-workspace-accent" />
     {:else if item.rightIcon}
-      <Icon src={item.rightIcon} class="w-5 h-5 text-neutral-400" />
+      <Icon src={item.rightIcon} class="w-4 h-4 text-neutral-400" />
     {/if}
   </div>
 </button>

package/dist/DrawerContextItem.svelte.d.ts

@@ -1,23 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { DrawerOption } from './types.ts';
-declare const __propDef: {
-    props: {
-        multiple?: boolean | undefined;
-        item: DrawerOption;
-        scrollIfSelected?: boolean | undefined;
-        workspace?: boolean | undefined;
-    };
-    events: {
-        change: CustomEvent<any>;
-        click: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DrawerContextItemProps = typeof __propDef.props;
-export type DrawerContextItemEvents = typeof __propDef.events;
-export type DrawerContextItemSlots = typeof __propDef.slots;
-export default class DrawerContextItem extends SvelteComponent<DrawerContextItemProps, DrawerContextItemEvents, DrawerContextItemSlots> {
-}
-export {};
+import type { DrawerContextItemProps } from './types.ts';
+declare const DrawerContextItem: import("svelte").Component<DrawerContextItemProps, {}, "item">;
+type DrawerContextItem = ReturnType<typeof DrawerContextItem>;
+export default DrawerContextItem;

package/dist/DrawerContextSeparator.svelte

@@ -1 +1 @@
-<li class="bg-neutral-100 h-px w-full" />
+<li class="bg-neutral-100 h-px w-full"></li>

package/dist/DrawerContextSeparator.svelte.d.ts

@@ -1,23 +1,26 @@
-/** @typedef {typeof __propDef.props}  DrawerContextSeparatorProps */
-/** @typedef {typeof __propDef.events}  DrawerContextSeparatorEvents */
-/** @typedef {typeof __propDef.slots}  DrawerContextSeparatorSlots */
-export default class DrawerContextSeparator extends SvelteComponent<{
+export default DrawerContextSeparator;
+type DrawerContextSeparator = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type DrawerContextSeparatorProps = typeof __propDef.props;
-export type DrawerContextSeparatorEvents = typeof __propDef.events;
-export type DrawerContextSeparatorSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const DrawerContextSeparator: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/DrawerContextWorkspace.svelte

@@ -1,37 +1,36 @@
-<script>import DrawerContextItem from "./DrawerContextItem.svelte";
-import { Icon } from "@steeze-ui/svelte-icon";
-import { AddCircle, ExternalLink, Workspace } from "@invopop/ui-icons";
-import { createEventDispatcher } from "svelte";
-import BaseCounter from "./BaseCounter.svelte";
-import EmptyStateIcon from "./EmptyStateIcon.svelte";
-import { slide } from "svelte/transition";
-import { ChevronRight } from "@steeze-ui/heroicons";
-export let items = [];
-export let multiple = false;
-const dispatch = createEventDispatcher();
-let liveOpen = false;
-let sandboxOpen = false;
-$:
-  liveItems = items.filter((i) => !i.sandbox);
-$:
-  sandboxItems = items.filter((i) => i.sandbox);
-$:
-  selectedItem = items.find((i) => i.selected);
-$:
-  if (selectedItem) {
-    if (selectedItem.sandbox) {
-      sandboxOpen = true;
-    } else {
-      liveOpen = true;
+<script lang="ts">
+  import type { DrawerContextWorkspaceProps } from './types.ts'
+  import DrawerContextItem from './DrawerContextItem.svelte'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { AddCircle, ExternalLink, Workspace } from '@invopop/ui-icons'
+  import BaseCounter from './BaseCounter.svelte'
+  import EmptyStateIcon from './EmptyStateIcon.svelte'
+  import { slide } from 'svelte/transition'
+  import { ChevronRight } from '@steeze-ui/heroicons'
+
+  let { items = [], multiple = false, onclick }: DrawerContextWorkspaceProps = $props()
+  let liveOpen = $state(false)
+  let sandboxOpen = $state(false)
+  let liveItems = $derived(items.filter((i) => !i.sandbox))
+  let sandboxItems = $derived(items.filter((i) => i.sandbox))
+  let selectedItem = $derived(items.find((i) => i.selected))
+
+  $effect(() => {
+    if (selectedItem) {
+      if (selectedItem.sandbox) {
+        sandboxOpen = true
+      } else {
+        liveOpen = true
+      }
     }
-  }
+  })
 </script>
 
 <div class="w-[300px] border border-neutral-200 rounded-md shadow-lg bg-white">
   <div class="max-h-[550px] overflow-hidden rounded-t-md">
     <button
       class="flex items-center justify-between bg-neutral-50 border-b border-neutral-200 rounded-t-sm h-9 py-2 pl-2.5 pr-3 text-base font-medium text-neutral-800 w-full"
-      on:click={() => {
+      onclick={() => {
         if (liveOpen) return
         liveOpen = true
         sandboxOpen = false
@@ -61,7 +60,7 @@ $:
         {/if}
         <ul class="p-1 space-y-1">
           {#each liveItems as item}
-            <DrawerContextItem {item} {multiple} workspace on:click />
+            <DrawerContextItem {item} {multiple} workspace {onclick} />
           {/each}
         </ul>
       </div>
@@ -69,7 +68,7 @@ $:
     <button
       class="flex items-center justify-between bg-neutral-50 border-b border-neutral-200 h-9 py-2 pl-2.5 pr-3 text-base font-medium text-neutral-800 w-full"
       class:border-t={liveOpen}
-      on:click={() => {
+      onclick={() => {
         if (sandboxOpen) return
         sandboxOpen = true
         liveOpen = false
@@ -99,7 +98,7 @@ $:
         {/if}
         <ul class="p-1 space-y-1">
           {#each sandboxItems as item}
-            <DrawerContextItem {item} {multiple} workspace on:click />
+            <DrawerContextItem {item} {multiple} workspace {onclick} />
           {/each}
         </ul>
       </div>
@@ -110,8 +109,8 @@ $:
     <li class="pl-1.5 py-1.5 pr-2 hover:bg-neutral-100 rounded-sm">
       <button
         class="flex items-center justify-between w-full"
-        on:click={() => {
-          dispatch('click', 'add')
+        onclick={() => {
+          onclick?.('add')
         }}
       >
         <div class="flex items-center space-x-1.5">

package/dist/DrawerContextWorkspace.svelte.d.ts

@@ -1,20 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { DrawerOption } from './types.ts';
-declare const __propDef: {
-    props: {
-        items?: DrawerOption[] | undefined;
-        multiple?: boolean | undefined;
-    };
-    events: {
-        click: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DrawerContextWorkspaceProps = typeof __propDef.props;
-export type DrawerContextWorkspaceEvents = typeof __propDef.events;
-export type DrawerContextWorkspaceSlots = typeof __propDef.slots;
-export default class DrawerContextWorkspace extends SvelteComponent<DrawerContextWorkspaceProps, DrawerContextWorkspaceEvents, DrawerContextWorkspaceSlots> {
-}
-export {};
+import type { DrawerContextWorkspaceProps } from './types.ts';
+declare const DrawerContextWorkspace: import("svelte").Component<DrawerContextWorkspaceProps, {}, "">;
+type DrawerContextWorkspace = ReturnType<typeof DrawerContextWorkspace>;
+export default DrawerContextWorkspace;

package/dist/DropdownSelect.svelte

@@ -1,87 +1,99 @@
-<script>import isEqual from "lodash/isEqual.js";
-import { Icon } from "@steeze-ui/svelte-icon";
-import { createEventDispatcher } from "svelte";
-import { resolveIcon } from "./helpers.js";
-import BaseDropdown from "./BaseDropdown.svelte";
-import DrawerContext from "./DrawerContext.svelte";
-import clsx from "clsx";
-import TagStatus from "./TagStatus.svelte";
-const dispatch = createEventDispatcher();
-export let value = "";
-export let icon = void 0;
-export let iconTheme = "default";
-export let options = [];
-export let placeholder = "";
-export let multiple = false;
-export let fullWidth = false;
-export let widthClass = "min-w-[160px] max-w-[420px]";
-let selectDropdown;
-let resolvedIcon;
-let isOpen = false;
-$: {
-  resolveIcon(icon).then((icon2) => {
-    resolvedIcon = icon2;
-  });
-}
-$:
-  items = options.map((o) => ({
-    ...o,
-    selected: multiple ? Boolean(value.find((v) => v.value === o.value)) : o.value === value
-  }));
-$:
-  selectedItems = items.filter((i) => i.selected);
-$:
-  selectedColor = !multiple && items.find((i) => i.selected)?.color;
-$:
-  selectedIcon = !multiple && items.find((i) => i.selected)?.icon;
-$:
-  selectedIconColor = !multiple && items.find((i) => i.selected)?.iconClass || "text-neutral-500";
-$:
-  selectedLabel = `${selectedItems[0]?.label || ""}${selectedItems.length > 1 ? " and more..." : ""}` || placeholder;
-$:
-  styles = clsx({
-    "shadow-active border-workspace-accent hover:border-workspace-accent": isOpen
-  });
-function handleClick(e) {
-  value = e.detail;
-  dispatch("selected", value);
-  if (multiple)
-    return;
-  selectDropdown.toggle();
-}
-function handleSelected(e) {
-  if (!multiple)
-    return;
-  if (isEqual(value, e.detail))
-    return;
-  value = e.detail;
-}
+<script lang="ts">
+  import isEqual from 'lodash-es/isEqual'
+  import type { AnyProp, DrawerOption, DropdownSelectProps } from './types.ts'
+  import { Icon, type IconSource } from '@steeze-ui/svelte-icon'
+  import BaseDropdown from './BaseDropdown.svelte'
+  import DrawerContext from './DrawerContext.svelte'
+  import clsx from 'clsx'
+  import TagStatus from './TagStatus.svelte'
+  import { resolveIcon } from './helpers.js'
+
+  let {
+    value = $bindable(''),
+    icon = undefined,
+    iconTheme = 'default',
+    options = [],
+    placeholder = '',
+    multiple = false,
+    fullWidth = false,
+    widthClass = 'min-w-[160px] max-w-[420px]',
+    onSelect
+  }: DropdownSelectProps = $props()
+
+  let selectDropdown: BaseDropdown | undefined = $state()
+  let resolvedIcon: IconSource | undefined = $state()
+  let isOpen = $state(false)
+
+  $effect(() => {
+    resolveIcon(icon).then((res) => (resolvedIcon = res))
+  })
+
+  let items = $derived(
+    options.map((o) => ({
+      ...o,
+      selected: multiple
+        ? Boolean((value as DrawerOption[]).find((v) => v.value === o.value))
+        : o.value === value
+    }))
+  )
+
+  let selectedItems = $derived(items.filter((i) => i.selected))
+  let selectedColor = $derived(!multiple && items.find((i) => i.selected)?.color)
+  let selectedIcon = $derived(!multiple && items.find((i) => i.selected)?.icon)
+  let selectedIconColor = $derived(
+    (!multiple && items.find((i) => i.selected)?.iconClass) || 'text-neutral-500'
+  )
+  let selectedLabel = $derived(
+    `${selectedItems[0]?.label || ''}${selectedItems.length > 1 ? ' and more...' : ''}` ||
+      placeholder
+  )
+
+  let styles = $derived(
+    clsx({
+      'shadow-active border-workspace-accent hover:border-workspace-accent': isOpen,
+      'border-neutral-100': !isOpen
+    })
+  )
+
+  function handleClick(val: AnyProp) {
+    value = val
+
+    onSelect?.(value)
+
+    if (multiple) return
+
+    selectDropdown?.toggle()
+  }
+
+  function handleSelected(val: AnyProp) {
+    if (!multiple) return
+
+    // Avoid re-firing watcher
+    if (isEqual(value, val)) return
+
+    value = val
+  }
 </script>
 
 <BaseDropdown bind:isOpen placement="bottom-start" {fullWidth} bind:this={selectDropdown}>
-  <div
-    class="{styles} dropdown-select max-w-[420px] flex items-center border hover:border-neutral-300 rounded-md py-1.25 pl-2 gap-1 bg-white whitespace-nowrap"
-    slot="trigger"
-  >
-    {#if selectedColor}
-      <TagStatus dot status={selectedColor} />
-    {:else if selectedIcon}
-      <Icon src={selectedIcon} {iconTheme} class="{selectedIconColor} h-4 w-4 flex-shrink-0" />
-    {:else if resolvedIcon}
-      <Icon src={resolvedIcon} {iconTheme} class="h-4 w-4 text-neutral-500 flex-shrink-0" />
-    {/if}
-
-    <span class="w-full pr-8 text-neutral-800 placeholder-neutral-800 text-base truncate">
-      {selectedLabel}
-    </span>
-  </div>
-  <DrawerContext
-    {widthClass}
-    {multiple}
-    {items}
-    on:click={handleClick}
-    on:selected={handleSelected}
-  />
+  {#snippet trigger()}
+    <div
+      class="{styles} dropdown-select max-w-[420px] flex items-center border hover:border-neutral-300 rounded-md py-1.25 pl-2 gap-1 bg-white whitespace-nowrap"
+    >
+      {#if selectedColor}
+        <TagStatus dot status={selectedColor} />
+      {:else if selectedIcon}
+        <Icon src={selectedIcon} {iconTheme} class="{selectedIconColor} h-4 w-4 flex-shrink-0" />
+      {:else if resolvedIcon}
+        <Icon src={resolvedIcon} {iconTheme} class="h-4 w-4 text-neutral-500 flex-shrink-0" />
+      {/if}
+
+      <span class="w-full pr-8 text-neutral-800 placeholder-neutral-800 text-base truncate">
+        {selectedLabel}
+      </span>
+    </div>
+  {/snippet}
+  <DrawerContext {widthClass} {multiple} {items} onclick={handleClick} onselect={handleSelected} />
 </BaseDropdown>
 
 <style>