@invopop/popui 0.0.108 → 0.1.2

package/dist/InputText.svelte

@@ -1,46 +1,62 @@
-<script>import clsx from "clsx";
-import { createEventDispatcher, onMount } from "svelte";
-import InputLabel from "./InputLabel.svelte";
-import { dispatchWcEvent } from "./wcdispatch.js";
-import InputError from "./InputError.svelte";
-export let id = Math.random().toString(36).slice(2, 7);
-export let label = "";
-export let placeholder = "";
-export let errorText = "";
-export let disabled = false;
-export let value = "";
-export let focusOnLoad = false;
-let inputEl;
-let timer;
-const dispatch = createEventDispatcher();
-const debounce = (target) => {
-  clearTimeout(timer);
-  timer = setTimeout(() => {
-    dispatch("input", target.value);
-    dispatchWcEvent(target, "input", target.value);
-  }, 750);
-};
-$:
-  inputStyles = clsx(
-    { "pointer-events-none bg-neutral-50": disabled },
-    {
-      "text-danger-500 border-danger-400 outline-danger-400": errorText
-    },
-    {
-      "border-neutral-200 hover:border-neutral-300 text-neutral-800 outline-none caret-workspace-accent focus:border-workspace-accent focus:shadow-active": !errorText
-    }
-  );
-function handleInput(event) {
-  if (event instanceof CustomEvent)
-    return;
-  const target = event.target;
-  debounce(target);
-}
-onMount(() => {
-  if (!focusOnLoad)
-    return;
-  inputEl.focus();
-});
+<script lang="ts">
+  import clsx from 'clsx'
+  import { onMount } from 'svelte'
+  import InputLabel from './InputLabel.svelte'
+  import InputError from './InputError.svelte'
+  import type { InputTextProps } from './types'
+
+  let {
+    id = Math.random().toString(36).slice(2, 7),
+    label = '',
+    placeholder = '',
+    errorText = '',
+    disabled = false,
+    value = $bindable(''),
+    focusOnLoad = false,
+    oninput,
+    onkeydown,
+    onfocus,
+    onblur,
+    ...rest
+  }: InputTextProps = $props()
+
+  let inputEl: HTMLInputElement | undefined = $state()
+  let timer: ReturnType<typeof setTimeout>
+
+  const debounce = (target: HTMLInputElement) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      oninput?.(target.value)
+    }, 750)
+  }
+
+  let inputStyles = $derived(
+    clsx(
+      { 'pointer-events-none bg-neutral-50': disabled },
+      {
+        'text-danger-500 border-danger-400 outline-danger-400': errorText
+      },
+      {
+        'border-neutral-200 hover:border-neutral-300 text-neutral-800 outline-none caret-workspace-accent focus:border-workspace-accent focus:shadow-active':
+          !errorText
+      }
+    )
+  )
+
+  function handleInput(event: unknown) {
+    // If event is not a native event we skip the dispatch to avoid infinite loop
+    if (event instanceof CustomEvent) return
+
+    const target = (event as PointerEvent).target as HTMLInputElement
+
+    debounce(target)
+  }
+
+  onMount(() => {
+    if (!focusOnLoad) return
+
+    inputEl?.focus()
+  })
 </script>
 
 {#if label}
@@ -54,11 +70,11 @@ onMount(() => {
   class="{inputStyles} py-1.5 px-2.5 border w-full rounded-md placeholder:text-neutral-500 text-base tracking-tight"
   {placeholder}
   readonly={disabled}
-  {...$$restProps}
-  on:input={handleInput}
-  on:focus
-  on:blur
-  on:keydown
+  {...rest}
+  oninput={handleInput}
+  {onfocus}
+  {onblur}
+  {onkeydown}
 />
 {#if errorText}
   <InputError {errorText} />

package/dist/InputText.svelte.d.ts

@@ -1,28 +1,4 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        id?: string | undefined;
-        label?: string | undefined;
-        placeholder?: string | undefined;
-        errorText?: string | undefined;
-        disabled?: boolean | undefined;
-        value?: string | number | undefined;
-        focusOnLoad?: boolean | undefined;
-    };
-    events: {
-        focus: FocusEvent;
-        blur: FocusEvent;
-        keydown: KeyboardEvent;
-        input: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type InputTextProps = typeof __propDef.props;
-export type InputTextEvents = typeof __propDef.events;
-export type InputTextSlots = typeof __propDef.slots;
-export default class InputText extends SvelteComponent<InputTextProps, InputTextEvents, InputTextSlots> {
-}
-export {};
+import type { InputTextProps } from './types';
+declare const InputText: import("svelte").Component<InputTextProps, {}, "value">;
+type InputText = ReturnType<typeof InputText>;
+export default InputText;

package/dist/InputTextarea.svelte

@@ -1,29 +1,38 @@
-<script>import { createEventDispatcher } from "svelte";
-import InputLabel from "./InputLabel.svelte";
-import InputError from "./InputError.svelte";
-import clsx from "clsx";
-const dispatch = createEventDispatcher();
-export let id = Math.random().toString(36).slice(2, 7);
-export let label = "";
-export let placeholder = "";
-export let errorText = "";
-export let disabled = false;
-export let value = "";
-export let rows = 4;
-$:
-  inputStyles = clsx(
-    { "pointer-events-none bg-neutral-50": disabled },
-    {
-      "text-danger-500 border-danger-400 outline-danger-400": errorText
-    },
-    {
-      "border-neutral-200 hover:border-neutral-300 text-neutral-800 outline-none caret-workspace-accent focus:border-workspace-accent focus:shadow-active": !errorText
-    }
-  );
-function handleInput(event) {
-  value = event.target.value;
-  dispatch("input", value);
-}
+<script lang="ts">
+  import InputLabel from './InputLabel.svelte'
+  import InputError from './InputError.svelte'
+  import clsx from 'clsx'
+  import type { InputTextareaProps } from './types'
+
+  let {
+    id = Math.random().toString(36).slice(2, 7),
+    label = '',
+    placeholder = '',
+    errorText = '',
+    disabled = false,
+    value = $bindable(''),
+    rows = 4,
+    oninput,
+    ...rest
+  }: InputTextareaProps = $props()
+
+  let inputStyles = $derived(
+    clsx(
+      { 'pointer-events-none bg-neutral-50': disabled },
+      {
+        'text-danger-500 border-danger-400 outline-danger-400': errorText
+      },
+      {
+        'border-neutral-200 hover:border-neutral-300 text-neutral-800 outline-none caret-workspace-accent focus:border-workspace-accent focus:shadow-active':
+          !errorText
+      }
+    )
+  )
+
+  function handleInput(event: Event) {
+    value = (event.target as HTMLInputElement).value
+    oninput?.(value)
+  }
 </script>
 
 <InputLabel {id} {label} />
@@ -34,9 +43,9 @@ function handleInput(event) {
   class="{inputStyles} py-1.5 px-3 border w-full rounded placeholder-neutral-500 text-base tracking-tight"
   {disabled}
   {rows}
-  {...$$restProps}
-  on:input={handleInput}
-/>
+  {...rest}
+  oninput={handleInput}
+></textarea>
 
 {#if errorText}
   <InputError {errorText} />

package/dist/InputTextarea.svelte.d.ts

@@ -1,25 +1,4 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        id?: string | undefined;
-        label?: string | undefined;
-        placeholder?: string | undefined;
-        errorText?: string | undefined;
-        disabled?: boolean | undefined;
-        value?: string | number | undefined;
-        rows?: number | undefined;
-    };
-    events: {
-        input: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type InputTextareaProps = typeof __propDef.props;
-export type InputTextareaEvents = typeof __propDef.events;
-export type InputTextareaSlots = typeof __propDef.slots;
-export default class InputTextarea extends SvelteComponent<InputTextareaProps, InputTextareaEvents, InputTextareaSlots> {
-}
-export {};
+import type { InputTextareaProps } from './types';
+declare const InputTextarea: import("svelte").Component<InputTextareaProps, {}, "value">;
+type InputTextarea = ReturnType<typeof InputTextarea>;
+export default InputTextarea;

package/dist/InputToggle.svelte

@@ -1,32 +1,39 @@
-<script>import clsx from "clsx";
-import { createEventDispatcher } from "svelte";
-import { createSwitch } from "svelte-headlessui";
-import { dispatchWcEvent } from "./wcdispatch.js";
-const dispatch = createEventDispatcher();
-const sw = createSwitch({ label: "Set Preference" });
-let rootEl;
-export let id = Math.random().toString(36).slice(2, 7);
-export let checked = false;
-export let label = "";
-$:
-  $sw.checked = checked;
-$:
-  togleStyles = clsx({ "bg-gray-200": !$sw.checked }, { "bg-workspace-accent": $sw.checked });
-function handleChange() {
-  checked = $sw.checked;
-  dispatch("change", $sw.checked);
-  dispatchWcEvent(rootEl, "change", $sw.checked);
-}
+<script lang="ts">
+  import clsx from 'clsx'
+  import { createSwitch } from 'svelte-headlessui'
+  import type { InputToggleProps } from './types'
+  const sw = createSwitch({ label: 'Set Preference' })
+
+  let {
+    id = Math.random().toString(36).slice(2, 7),
+    label = '',
+    checked = $bindable(false),
+    onchange
+  }: InputToggleProps = $props()
+
+  $effect(() => {
+    $sw.checked = checked
+  })
+
+  let togleStyles = $derived(
+    clsx({ 'bg-gray-200': !$sw.checked }, { 'bg-workspace-accent': $sw.checked })
+  )
+
+  function handleChange() {
+    onchange?.($sw.checked)
+    checked = $sw.checked
+  }
 </script>
 
-<label bind:this={rootEl} class="flex w-full items-center justify-between space-x-2">
+<label for={id} class="flex w-full items-center justify-between space-x-2">
   {#if label}
     <span class="text-base text-neutral-500">{label}</span>
   {/if}
   <button
+    {id}
     class="{togleStyles} relative inline-flex h-5 w-8 flex-shrink-0 cursor-pointer rounded-md border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-0 focus:ring-offset-0"
     use:sw.toggle
-    on:click={handleChange}
+    onclick={handleChange}
   >
     <span class="sr-only">Use setting</span>
     <span
@@ -34,6 +41,6 @@ function handleChange() {
       class="{$sw.checked
         ? 'translate-x-3'
         : 'translate-x-0'} pointer-events-none inline-block h-4 w-4 transform rounded bg-white shadow ring-0 transition duration-200 ease-in-out"
-    />
+    ></span>
   </button>
 </label>

package/dist/InputToggle.svelte.d.ts

@@ -1,20 +1,4 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        id?: string | undefined;
-        checked?: boolean | undefined;
-        label?: string | undefined;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type InputToggleProps = typeof __propDef.props;
-export type InputToggleEvents = typeof __propDef.events;
-export type InputToggleSlots = typeof __propDef.slots;
-export default class InputToggle extends SvelteComponent<InputToggleProps, InputToggleEvents, InputToggleSlots> {
-}
-export {};
+import type { InputToggleProps } from './types';
+declare const InputToggle: import("svelte").Component<InputToggleProps, {}, "checked">;
+type InputToggle = ReturnType<typeof InputToggle>;
+export default InputToggle;

package/dist/MenuItem.svelte

@@ -1,99 +1,110 @@
-<script>import { flip, shift, offset } from "svelte-floating-ui/dom";
-import { createFloatingActions } from "svelte-floating-ui";
-import clsx from "clsx";
-import { Icon } from "@steeze-ui/svelte-icon";
-import { ChevronDown, ChevronRight } from "@invopop/ui-icons";
-import { FolderL } from "@invopop/ui-icons";
-import { createEventDispatcher } from "svelte";
-import { resolveIcon } from "./helpers.js";
-import DrawerContext from "./DrawerContext.svelte";
-const [floatingRef, floatingContent] = createFloatingActions({
-  strategy: "absolute",
-  placement: "bottom-start",
-  middleware: [offset(-4), flip(), shift()]
-});
-export let label = "";
-export let url = "";
-export let isFolderItem = false;
-export let collapsable = false;
-export let open = false;
-export let active = false;
-export let collapsedSidebar = false;
-export let iconTheme = "default";
-export let icon = void 0;
-export let children = void 0;
-let resolvedIcon;
-let hovered = false;
-let highlight = false;
-let leaveHoverTimeout = null;
-const dispatch = createEventDispatcher();
-$: {
-  resolveIcon(icon).then((icon2) => {
-    resolvedIcon = icon2;
-  });
-}
-$:
-  itemStyles = clsx(
-    { "text-white font-medium": !isFolderItem },
-    { "text-white-40": isFolderItem && !active },
-    { "bg-white-10": active },
-    { "border border-transparent hover:border-white-5 group p-2": collapsedSidebar },
-    { "w-full px-2 py-1.5": !collapsedSidebar },
-    {
-      "bg-white-10 border-white-5 text-white": active
-    },
-    { "hover:bg-white-5 focus:bg-white-10": !active }
-  );
-$:
-  iconStyles = clsx({ "group-hover:text-white": collapsedSidebar });
-$:
-  wrapperStyles = clsx({
-    "ml-4 border-l border-white-10 pl-2 pt-0.5 relative": isFolderItem
-  });
-$:
-  items = [
+<script lang="ts">
+  import MenuItem from './MenuItem.svelte'
+  import { flip, shift, offset } from 'svelte-floating-ui/dom'
+  import { createFloatingActions } from 'svelte-floating-ui'
+  import clsx from 'clsx'
+  import type { MenuItemProps, DrawerOption, AnyProp } from './types.ts'
+  import { Icon, type IconSource } from '@steeze-ui/svelte-icon'
+  import { ChevronDown, ChevronRight } from '@invopop/ui-icons'
+  import { FolderL } from '@invopop/ui-icons'
+  import { resolveIcon } from './helpers.js'
+  import DrawerContext from './DrawerContext.svelte'
+
+  const [floatingRef, floatingContent] = createFloatingActions({
+    strategy: 'absolute',
+    placement: 'bottom-start',
+    middleware: [offset(-4), flip(), shift()]
+  })
+
+  let {
+    label = '',
+    url = '',
+    isFolderItem = false,
+    collapsable = false,
+    open = $bindable(false),
+    active = false,
+    collapsedSidebar = false,
+    iconTheme = 'default',
+    icon = undefined,
+    children = undefined,
+    onclick
+  }: MenuItemProps = $props()
+
+  let resolvedIcon: IconSource | undefined = $state()
+  let hovered = $state(false)
+  let highlight = $state(false)
+  let leaveHoverTimeout: ReturnType<typeof setTimeout> | null = null
+  let itemStyles = $derived(
+    clsx(
+      { 'text-white font-medium': !isFolderItem },
+      { 'text-white-40': isFolderItem && !active },
+      { 'bg-white-10': active },
+      { 'border border-transparent hover:border-white-5 group p-2': collapsedSidebar },
+      { 'w-full px-2 py-1.5': !collapsedSidebar },
+      {
+        'bg-white-10 border-white-5 text-white': active
+      },
+      { 'hover:bg-white-5 focus:bg-white-10': !active }
+    )
+  )
+  let iconStyles = $derived(clsx({ 'group-hover:text-white': collapsedSidebar }))
+  let wrapperStyles = $derived(
+    clsx({
+      'ml-4 border-l border-white-10 pl-2 pt-0.5 relative': isFolderItem
+    })
+  )
+  let items = $derived([
     { label, value: url, selected: active, icon: resolvedIcon },
     ...(children || []).map((c) => ({
-      label: c.label || "",
-      value: c.url || "",
+      label: c.label || '',
+      value: c.url || '',
       selected: c.active,
       icon: FolderL
     }))
-  ];
-function handleClick() {
-  if (!url && collapsable) {
-    open = !open;
+  ] as DrawerOption[])
+
+  $effect(() => {
+    resolveIcon(icon).then((res) => (resolvedIcon = res))
+  })
+
+  function handleClick() {
+    if (!url && collapsable) {
+      open = !open
+    }
+
+    onclick?.(url)
   }
-  dispatch("click", url);
-}
-function handleClickChild(event) {
-  hovered = false;
-  dispatch("click", event.detail);
-}
-function handleHover() {
-  highlight = true;
-  if (leaveHoverTimeout) {
-    clearTimeout(leaveHoverTimeout);
+
+  function handleClickChild(value: AnyProp) {
+    hovered = false
+    onclick?.(value as string)
+  }
+
+  function handleHover() {
+    highlight = true
+    if (leaveHoverTimeout) {
+      clearTimeout(leaveHoverTimeout)
+    }
+    hovered = true
+  }
+
+  function handleBlur() {
+    highlight = false
+    leaveHoverTimeout = setTimeout(() => {
+      hovered = false
+    }, 200)
   }
-  hovered = true;
-}
-function handleBlur() {
-  highlight = false;
-  leaveHoverTimeout = setTimeout(() => {
-    hovered = false;
-  }, 200);
-}
 </script>
 
 <div class={wrapperStyles}>
   {#if isFolderItem && (highlight || active)}
-    <div class="border-l border-white h-3 w-px absolute top-[14px] left-0 -m-px" />
+    <div class="border-l border-white h-3 w-px absolute top-[14px] left-0 -m-px"></div>
   {/if}
   <button
     use:floatingRef
-    on:mouseenter={handleHover}
-    on:mouseleave={handleBlur}
-    on:click={handleClick}
+    onmouseenter={handleHover}
+    onmouseleave={handleBlur}
+    onclick={handleClick}
     title={label}
     class="{itemStyles} text-base border border-transparent flex items-center justify-between hover:text-white focus:text-white rounded-md"
   >
@@ -107,7 +118,8 @@ function handleBlur() {
     </span>
     {#if collapsable && !collapsedSidebar}
       <button
-        on:click|stopPropagation={() => {
+        onclick={(e) => {
+          e.stopPropagation()
           open = !open
         }}
       >
@@ -121,18 +133,18 @@ function handleBlur() {
         <div
           use:floatingContent
           role="contentinfo"
-          on:mouseenter={handleHover}
-          on:mouseleave={handleBlur}
+          onmouseenter={handleHover}
+          onmouseleave={handleBlur}
           class="pt-4 z-30"
         >
-          <DrawerContext on:click={handleClickChild} {items} />
+          <DrawerContext onclick={handleClickChild} {items} />
         </div>
       {/if}
     {:else if open || !collapsable}
       <ul>
         {#each children as child}
           <li>
-            <svelte:self {...child} isFolderItem on:click />
+            <MenuItem {...child} isFolderItem {onclick} />
           </li>
         {/each}
       </ul>

package/dist/MenuItem.svelte.d.ts

@@ -1,29 +1,5 @@
-import { SvelteComponent } from "svelte";
-import type { IconTheme, MenuItemProps } from './types.ts';
-import { type IconSource } from '@steeze-ui/svelte-icon';
-declare const __propDef: {
-    props: {
-        label?: string | undefined;
-        url?: string | undefined;
-        isFolderItem?: boolean | undefined;
-        collapsable?: boolean | undefined;
-        open?: boolean | undefined;
-        active?: boolean | undefined;
-        collapsedSidebar?: boolean | undefined;
-        iconTheme?: IconTheme | undefined;
-        icon?: IconSource | string | undefined;
-        children?: MenuItemProps[] | undefined;
-    };
-    events: {
-        click: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type MenuItemProps_ = typeof __propDef.props;
-export { MenuItemProps_ as MenuItemProps };
-export type MenuItemEvents = typeof __propDef.events;
-export type MenuItemSlots = typeof __propDef.slots;
-export default class MenuItem extends SvelteComponent<MenuItemProps, MenuItemEvents, MenuItemSlots> {
-}
+import MenuItem from './MenuItem.svelte';
+import type { MenuItemProps } from './types.ts';
+declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "open">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;