npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

smoo

v0.0.17

Published

Simple Modal or Outlet

Downloads

54

Readme

Hold your horses!

Build status NPM version Known Vulnerabilities

<script>
  import { Fence, Search } from 'smoo';

  let users = [
    { id: 1, name: 'Juanito Hace', value: '[email protected]' },
    { id: 2, name: 'Carlangas Marca', value: '[email protected]' },
  ];

  let members = [];
  let visible = false;

  function open() {
    visible = true;
  }
  function close() {
    visible = false;
  }
</script>

<Fence modal bind:visible on:cancel={close}>
  <h1>It works.</h1>
  <Search multiple data={users} bind:value={members} />
  <pre>Got: {JSON.stringify(members)}</pre>
</Fence>

<button on:click={open}>Open modal</button>

How it works?

smoo lets you place any kind of markup or components inside a <div role="dialog">...</div>, it also brings to you many other useful components, you'll see below.

Components

We have a Fence component, i.e. a thing you need to guard your cows...

<Fence {id} {class} {loading} {modal} {visible} {autofocus} on:submit on:cancel />

This is a <form /> wrapper that handle various effects:

  • Allows you to subscribe to any connection status and block its content while loading...
  • All focusable inputs found during onMount(...) will be traped an cycled back and forth
  • When rendered as a modal-overlay, it can be canceled with the ESC key or clicking outside
  • It can setup autofocus on the first input-element found inside the inner <form /> wrapper (js only)

Before submitting HTML5 validation will run, if it's valid a submit event will be triggered. The cancel event is fired when you click outside the modal, or press the ESC key to close the modal.

Available props:

  • {id} — Used id for the inner <form /> element
  • {class} — Used class for the inner <form /> element
  • {loading} — Its presence will protect the UI with pointer-events:none
  • {modal} — Its presence will render the inner <form /> in a modal-overlay
  • {noform} — It disables the <form /> render, use the main slot instead
  • {visible} — Its value is used to toggle the render of the entire custom-element
  • {autofocus} — Its presence enables focus() on the first input-element found

Available slots:

  • before — Renders before the <form /> tag
  • after — Renders after the <form /> tag

Add the nofocus or data-nofocus attribute to any element to skip autofocus on it (useful for close-icons, etc.).

<Search {id} {pk} {keys} {data} {value} {class} {label} {disabled} {multiple} {autoclose} {placeholder} on:change />

This is an <input type="search" /> wrapper that handle various effects:

  • It is fully accessible through the keyboard, e.g.
    • you can press ESC to clear search
    • on items, press ESC to focus back to the input
  • It allows you to customize the data-source used and the render options
  • The search input fires their input, focus and blur events, while the dropdown fires open and close events.

It uses checkboxes or radios to enable selection through the keyboard, once values are choosen a change event is fired with the current selection. You can use CSS to hide those inputs and render the items by using :focus and :checked selectors.

Available props:

  • {id} — Used id for the inner <input /> element
  • {pk} — Property to identify each item from data list, default is id
  • {keys} — Properties to filter-out when searching for values, default are ['name', 'value']
  • {data} — Used data-source to retrieve items when searching, it must be an Array
  • {value} — This is an Array of selected ids from the data-source, can be bound
  • {class} — Used class for the inner <input /> element
  • {label} — Property used to print a human-readable value from each rendered item
  • {nofilter} — its presence will disable the filtering over the passed data-source
  • {disabled} — It just disables the <input /> field, while disabled options are hidden
  • {multiple} — Enable multiple selection of values (checkbox vs radio), disabled by default
  • {autoclose} — Close the dropdown on click-selection, it should not work with multiple options, disabled by default
  • {fallback} — This message is shown when no results are found while searching
  • {placeholder} — Custom placeholder for the <input /> field

Available slots:

  • before — Renders before the <input /> tag
  • after — Renders before the <input /> tag
  • item — Renders each value, use let:item to access its props
  • empty — Renders when no values where found in the data-source

If you like, place an icon like <svg slot="before">...</svg> and it will be positioned inside the <input /> on its left. Later you can use CSS to customize this through the [role=search] selector.