@invopop/popui 0.0.104 → 0.1.1

package/dist/BaseDropdown.svelte

@@ -1,33 +1,52 @@
-<script>import { offset, flip, shift, size } from "svelte-floating-ui/dom";
-import { createFloatingActions } from "svelte-floating-ui";
-import { clickOutside } from "./clickOutside.js";
-import { portal } from "svelte-portal";
-export let isOpen = false;
-export let fullWidth = false;
-export let placement = "bottom-end";
-export let matchParentWidth = false;
-const middleware = [offset(6), flip(), shift()];
-if (matchParentWidth) {
-  middleware.push(
-    size({
-      apply({ rects, elements }) {
-        Object.assign(elements.floating.style, {
-          minWidth: `${rects.reference.width}px`,
-          maxWidth: `${rects.reference.width}px`
-        });
-      }
-    })
-  );
-}
-const [floatingRef, floatingContent] = createFloatingActions({
-  strategy: "absolute",
-  placement,
-  middleware
-});
-let closedFromClickOutside = false;
-export const toggle = () => {
-  isOpen = !isOpen;
-};
+<script lang="ts">
+  import { offset, flip, shift, size } from 'svelte-floating-ui/dom'
+  import { createFloatingActions } from 'svelte-floating-ui'
+  import { clickOutside } from './clickOutside.js'
+  import { portal } from 'svelte-portal'
+  import type { BaseDropdownProps } from './types.js'
+
+  let {
+    isOpen = $bindable(false),
+    fullWidth = false,
+    placement = 'bottom-end',
+    matchParentWidth = false,
+    trigger,
+    children,
+    ...rest
+  }: BaseDropdownProps = $props()
+
+  const middleware = [offset(6), flip(), shift()]
+
+  if (matchParentWidth) {
+    middleware.push(
+      size({
+        apply({ rects, elements }) {
+          Object.assign(elements.floating.style, {
+            minWidth: `${rects.reference.width}px`,
+            maxWidth: `${rects.reference.width}px`
+          })
+        }
+      })
+    )
+  }
+
+  const [floatingRef, floatingContent] = createFloatingActions({
+    strategy: 'absolute',
+    placement,
+    middleware
+  })
+
+  let closedFromClickOutside = $state(false)
+
+  export const toggle = () => {
+    isOpen = !isOpen
+  }
+
+  function handleClick(event: MouseEvent) {
+    event.stopPropagation()
+    if (closedFromClickOutside) return
+    isOpen = !isOpen
+  }
 </script>
 
 <div class="inline-flex" class:w-full={fullWidth} role="menu">
@@ -35,13 +54,10 @@ export const toggle = () => {
     class="text-left"
     class:w-full={fullWidth}
     use:floatingRef
-    {...$$restProps}
-    on:click|stopPropagation={async () => {
-      if (closedFromClickOutside) return
-      isOpen = !isOpen
-    }}
+    {...rest}
+    onclick={handleClick}
   >
-    <slot name="trigger" />
+    {@render trigger?.()}
   </button>
   {#if isOpen}
     <div
@@ -49,7 +65,7 @@ export const toggle = () => {
       use:portal
       use:floatingContent
       use:clickOutside
-      on:click_outside={() => {
+      onclick_outside={() => {
         closedFromClickOutside = true
         setTimeout(() => {
           closedFromClickOutside = false
@@ -57,7 +73,7 @@ export const toggle = () => {
         isOpen = false
       }}
     >
-      <slot />
+      {@render children?.()}
     </div>
   {/if}
 </div>

package/dist/BaseDropdown.svelte.d.ts

@@ -1,26 +1,6 @@
-import { SvelteComponent } from "svelte";
-import { type Placement } from 'svelte-floating-ui/dom';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        isOpen?: boolean | undefined;
-        fullWidth?: boolean | undefined;
-        placement?: Placement | undefined;
-        matchParentWidth?: boolean | undefined;
-        toggle?: (() => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        trigger: {};
-        default: {};
-    };
-};
-export type BaseDropdownProps = typeof __propDef.props;
-export type BaseDropdownEvents = typeof __propDef.events;
-export type BaseDropdownSlots = typeof __propDef.slots;
-export default class BaseDropdown extends SvelteComponent<BaseDropdownProps, BaseDropdownEvents, BaseDropdownSlots> {
-    get toggle(): () => void;
-}
-export {};
+import type { BaseDropdownProps } from './types.js';
+declare const BaseDropdown: import("svelte").Component<BaseDropdownProps, {
+    toggle: () => void;
+}, "isOpen">;
+type BaseDropdown = ReturnType<typeof BaseDropdown>;
+export default BaseDropdown;

package/dist/BaseFlag.svelte

@@ -1,7 +1,9 @@
-<script>export let country = "";
-export let width = 12;
-$:
-  iso = country.toLowerCase();
+<script lang="ts">
+  import type { BaseFlagProps } from './types'
+
+  let { country = '', width = 12 }: BaseFlagProps = $props()
+
+  let iso = $derived(country.toLowerCase())
 </script>
 
 <!-- https://github.com/HatScripts/circle-flags -->

package/dist/BaseFlag.svelte.d.ts

@@ -1,17 +1,4 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        country?: string | undefined;
-        width?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type BaseFlagProps = typeof __propDef.props;
-export type BaseFlagEvents = typeof __propDef.events;
-export type BaseFlagSlots = typeof __propDef.slots;
-export default class BaseFlag extends SvelteComponent<BaseFlagProps, BaseFlagEvents, BaseFlagSlots> {
-}
-export {};
+import type { BaseFlagProps } from './types';
+declare const BaseFlag: import("svelte").Component<BaseFlagProps, {}, "">;
+type BaseFlag = ReturnType<typeof BaseFlag>;
+export default BaseFlag;