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

presentation-components

v3.2.6

Published

The Augmented.js Next - Presentation Components Module.

Downloads

40

Readme

presentation-components

Augmented.js Presentation Simple Components Module

API

Table of Contents

Article

Extends DecoratorView

An article class for setting up a 'page' Supported options are:

Parameters

  • options object Options to pass to the constructor

Examples

const article = new Presentation.Component.Article(
                { "el": "#mount", "header": "html", "footerEl": "#foot" });

header

Header property

Parameters

  • header

Properties

footer

Footer for the article

Parameters

  • footer

Properties

body

The body content of the card (supports HTML)

Parameters

  • body

Properties

sections

The section array

Parameters

  • sections

Properties

addSection

Add a section object to the article

Parameters

  • section object a section object

Examples

Section Object format:
{
  "id" "something",
  "body" "html",
  "class" "something"
}

clearSections

Clear the sections

render

render - render the article

Card

Extends DecoratorView

A card view - simple panel/dialog-like panel

Parameters

  • options

style

body property - the body of the card

Parameters

  • style

style

style property - the style

Parameters

  • style

body

The body content of the card (supports HTML)

Parameters

  • body

render

render - render the card

remove

remove

Footer

Extends DecoratorView

A Footer Component

Parameters

  • options

body

The body content of the card (supports HTML)

Parameters

  • body

render

render - render the footer

Header

Extends DecoratorView

A Header Component

Parameters

  • options

title

Parameters

  • title

Properties

subTitle

Parameters

  • subTitle

Properties

  • subTitle string A subTitle property

render

render - render the header

remove

Remove the Header

Returns object Returns the view context ('this')

Manager

Extends Mediator

A Component Manager or Mediator

Parameters

  • options

Meta

  • deprecated: Use Mediator

manageComponent

Manages a component (colleague)

Parameters

  • component View A component or view to manage

unmanageComponent

Unmanages a component (colleague)

Parameters

  • component View A component or view to manage

SelectBox

Extends DecoratorView

A SelectBox

Parameters

  • options (optional, default {})

render

Render the SelectBox

Returns object Returns the view context ('this')

remove

remove

addOption

Adds an option to the select

Parameters

  • label string label of the option
  • value string value of the option
  • selected boolean selected or not

Examples

addOption({"dog", 0, true});