A collection of everyday web-components and libraries.

Related tags

Learning resource packages libraries web-components
Overview

Ambiki packages

A collection of everyday web-components and libraries.

Used in production at ambiki.com

Collections within the repository

  • Custom elements

  • Packages

    • combobox - Extend your autocomplete and command palette using the Combobox, which provides robust keyboard navigation and accessibility out of the box.

Contributing

Contributions, issues, and pull requests are welcome! Please read CONTRIBUTING.md first.

License

MIT

Comments
  • release auto-complete-element@1.0.0

    release [email protected]

    Added

    • Fetch options remotely with the src attribute

      <auto-complete for="users" multiple src="/users">
  <input type="text" class="form-control" />
  <ul id="users" hidden></ul>
</auto-complete>

      This makes a request to /users?q=query endpoint with query being the search term. Search param can be changed by setting a param attribute on the auto-complete element

    • Users can update or watch for value attribute changes. Single-select auto-complete element sets a stringified object whereas multi-select sets a stringified array of objects

      <auto-complete value='{ "id": "1", "value": "Some value" }'>
  <!-- markup -->
</auto-complete>

    • Support for initially selected options

      • Single

        <auto-complete value='{ "id": "1", "value": "Some value" }'>
  <!-- markup -->
</auto-complete>

      • Multiple

        <auto-complete multiple value='[{ "id": "1", "value": "Some value" }, { "id": "2", "value": "Another value" }]'>
  <!-- markup -->
</auto-complete>

    Changed

    • Renamed auto-complete:selected event to auto-complete:commit
    • Renamed auto-complete:reset event to auto-complete:clear
    • Renamed data-autocomplete-reset attribute to data-autocomplete-clear
    auto-complete 
    opened by abeidahmed 0
  • bump combobox@1.1.0

    bump [email protected]

    Fixed

    • setActive function cannot find the option when option is a node

    Changed

    • setInitialAttributesOnOptions API takes an array of selected option ids (string[])
    • All selected options are unselected when combobox is stopped
    combobox 
    opened by abeidahmed 0
  • feat: autocomplete with network request

    feat: autocomplete with network request

    Added

    • Fetch options remotely with the src attribute

      <auto-complete for="users" multiple src="/users">
  <input type="text" class="form-control" />
  <ul id="users" hidden></ul>
</auto-complete>

      This makes a request to /users?q=query endpoint with query being the search term. Search param can be changed by setting a param attribute on the auto-complete element

    • Users can update or watch for value attribute changes. Single-select auto-complete element sets a stringified object whereas multi-select sets a stringified array of objects

      <auto-complete value='{ "id": "1", "value": "Some value" }'>
  <!-- markup -->
</auto-complete>

    • Support for initially selected options

      • Single

        <auto-complete value='{ "id": "1", "value": "Some value" }'>
  <!-- markup -->
</auto-complete>

      • Multiple

        <auto-complete multiple value='[{ "id": "1", "value": "Some value" }, { "id": "2", "value": "Another value" }]'>
  <!-- markup -->
</auto-complete>

    Changed

    • Renamed auto-complete:selected event to auto-complete:commit
    • Renamed auto-complete:reset event to auto-complete:clear
    • Renamed data-autocomplete-reset attribute to data-autocomplete-clear
    auto-complete combobox 
    opened by abeidahmed 0
  • release 0.3.0

    release 0.3.0

    Added

    • Support max attribute for multi-select

    Changed

    • Make activateFirstOption API public

    Fixed

    • Auto complete does not close when clicking outside on Firefox
    • data-empty not added after opening when list is empty
    auto-complete 
    opened by abeidahmed 0
  • combobox@1.0.0

    [email protected]

    [1.0.0] - 2022-11-11

    Added

    • Support max option for multi-select

    Changed

    • isMultiple renamed to multiple 
      new Combobox(input, list, { multiple: true });
    combobox 
    opened by abeidahmed 0
  • feat: add max attribute

    feat: add max attribute

    Autocomplete changes

    Added

    • Support max attribute for multi-select

    Combobox changes

    Added

    • Support max option for multi-select

    Changed

    • isMultiple renamed to multiple 
      new Combobox(input, list, { multiple: true });
    auto-complete combobox 
    opened by abeidahmed 0
  • fix: auto-complete does not close when clicking outside

    fix: auto-complete does not close when clicking outside

    Description

    The issue existed on Firefox. The fix was to wait for the nextTick before focusing on the input field.

    Video

    https://user-images.githubusercontent.com/50948617/201291813-a2507f2b-a1f2-4cf2-88d3-8efe84cab3aa.mp4

    fixes #18

    auto-complete 
    opened by abeidahmed 0
Releases(packages/combobox/1.1.0)

  • packages/combobox/1.1.0(Nov 24, 2022)

    [1.1.0] - 2022-11-24

    Fixed

    • setActive function cannot find the option when option is a node

    Changed

    • setInitialAttributesOnOptions API takes an array of selected option ids (string[])
    • All selected options are unselected when combobox is stopped
    Source code(tar.gz)
    Source code(zip)

  • custom-elements/auto-complete-element/1.0.0(Nov 24, 2022)

    [1.0.0] - 2022-11-24

    Added

    • Fetch options remotely with the src attribute

      <auto-complete for="users" multiple src="/users">
  <input type="text" class="form-control" />
  <ul id="users" hidden></ul>
</auto-complete>

      This makes a request to /users?q=query endpoint with query being the search term. Search param can be changed by setting a param attribute on the auto-complete element

    • Users can update or watch for value attribute changes. Single-select auto-complete element sets a stringified object whereas multi-select sets a stringified array of objects

      <auto-complete value='{ "id": "1", "value": "Some value" }'>
  <!-- markup -->
</auto-complete>

    • Support for initially selected options

      • Single

        <auto-complete value='{ "id": "1", "value": "Some value" }'>
  <!-- markup -->
</auto-complete>

      • Multiple

        <auto-complete multiple value='[{ "id": "1", "value": "Some value" }, { "id": "2", "value": "Another value" }]'>
  <!-- markup -->
</auto-complete>

    Changed

    • Renamed auto-complete:selected event to auto-complete:commit
    • Renamed auto-complete:reset event to auto-complete:clear
    • Renamed data-autocomplete-reset attribute to data-autocomplete-clear
    Source code(tar.gz)
    Source code(zip)

  • packages/combobox/1.0.0(Nov 11, 2022)

    [1.0.0] - 2022-11-11

    Added

    • Support max option for multi-select

    Changed

    • isMultiple renamed to multiple 
      new Combobox(input, list, { multiple: true });
    Source code(tar.gz)
    Source code(zip)

  • custom-elements/auto-complete-element/0.3.0(Nov 11, 2022)

    [0.3.0] - 2022-11-11

    Added

    • Support max attribute for multi-select

    Changed

    • Make activateFirstOption API public

    Fixed

    • Auto complete does not close when clicking outside on Firefox
    • data-empty not added after opening when list is empty
    Source code(tar.gz)
    Source code(zip)
Owner
Ambiki
Therapy. Simplified.
Ambiki
GitHub
Big Chief is a website where you find and share everyday cooking inspiration. Discover recipes, cooks, videos, and how-tos based on the food you love.

Big Chief Big Chief is a website where you find and share everyday cooking inspiration. Discover recipes, cooks, videos, and how-tos based on the food

AVLESSI Matchoudi 7 Jun 1, 2022
Updog is an open-source social media webapp intended to allow everyday people to share their thoughts in a welcoming community.

SE701-Updog Updog is an open-source social media webapp intended to allow everyday people to share their thoughts in a welcoming community. This proje

SE 701 Team 2 UoA 14 Apr 18, 2022
Simple "everyday CRUD" Postgres queries with perfect TypeScript types

Crudely Typed Simple "everyday CRUD" Postgres queries with perfect TypeScript types. Zero dependencies. Designed to work with pg-to-ts and node-postgr

Dan Vanderkam 26 Dec 26, 2022
100 Days of Code is a self improvement tool, where you make a commitment to solve 1 coding problem everyday for the next 100 days.

100 Days of Code is a self-improvement tool, where you make a commitment to solve 1 coding problem everyday for the next 100 days. This repository includes a range of tasks, lessons, resources, and challenges on various programming languages to help improve programming skills.

Tarleton Computer Society 7 Dec 14, 2022
4WEB is a collection & creation of codebase, frameworks, libraries and various resources dedicated to web development 📦🌐

?? Vous pouvez également contribuer à ajouter/créer votre propre collection dans ce référentiel ... Table des matières ?? Codebase ?? NPM packages ??

Raja Rakotonirina 5 Nov 14, 2022
4Web is a collection&creation of codebase, frameworks, libraries dedicated to web development 📦

?? You can also contribute to add / create your own collection in this repository Collection name Description ?? blinke

Raja Rakotonirina 5 Nov 14, 2022
🐢 A collection of awesome browser-side JavaScript libraries, resources and shiny things.

Awesome JavaScript A collection of awesome browser-side JavaScript libraries, resources and shiny things. Awesome JavaScript Package Managers Componen

chencheng (云谦) 29.6k Dec 29, 2022
A collection of scripts to build offline documentation for your favourite frameworks/libraries. Simply search, copy/paste the commands and enjoy.

Offline-docs A collection of scripts to build offline documentation for your favourite frameworks/libraries. Simply search, copy/paste the commands an

Naveen Namani 37 Dec 24, 2022
SaseulJS is a collection of libraries that allow developers to interact with a local or remote SASEUL node using HTTP.

SaseulJS - SASEUL Javascript API Library Getting Started SaseulJS is a collection of libraries that allow developers to interact with a local or remot

SASEUL 11 Sep 14, 2022
NiftyKit's Web Components Collection

NiftyKit Web Components NiftyKit's Web Components Collection Installation Install via npm npm install @niftykit/components Import via CDN <script type

NIFTYKIT, INC. 5 Feb 21, 2022
Obsidian-Snippet-collection - A collection of snippet to customize obsidian

This repo is a collection of CSS snippets for Obsidian.md. To install them on PC

Mara 110 Dec 22, 2022
Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).

spring-easing NPM | Github | Docs | Licence Quick and easy spring animations. Works with other animation libraries (gsap, animejs, @okikio/animate, mo

Okiki Ojo 34 Dec 14, 2022
Cornerstone is a set of JavaScript libraries that can be used to build web-based medical imaging applications.

Cornerstone is a set of JavaScript libraries that can be used to build web-based medical imaging applications. It provides a framework to build radiology applications such as the OHIF Viewer.

cornerstone.js 141 Dec 22, 2022
A collection of handmade, professional and dazzling CSS components. ✨

CSS Components Library — Endless collection. Made with ♥ by Eluda for the AWS Amplify hackathon. About the app CSS Components is an online collection

Eluda 1 Oct 1, 2022
A collection of A-Frame components

Fern A-Frame Components Collection This is a collection of A-Frame components. Check the individual components for their usages and corresponding exam

Noeri Huisman 16 Dec 12, 2022
DripUI a collection of free Tailwind CSS components to bootstrap your new apps, projects or landing sites!

DripUI - Tailwind Components DripUI is an amazing collection of free UI components to help you develop projects faster and easier. The most elegant co

Dan 24 Nov 27, 2022
Shield is a development framework for circom developers. The core reason is to provide libraries, plugins, and testing tools to ensure code quality and security.

SHIELD Shield is a development framework for circom developers but we plan it to other languages such as CAIRO, SNARKYJS etc. The core reason is to pr

Xord 41 Dec 22, 2022
An ongoing curated list of frameworks, books, articles, talks, screencasts, recordings, libraries, learning tutorials and shiny resources about Javascript Development.

Javascript Frameworks Development Welcome to the world of Javascript Frameworks. An ongoing curated list of frameworks, books, articles, talks, screen

Paul Veillard 3 Jul 31, 2022
Twitter Text Libraries. This code is used at Twitter to tokenize and parse text to meet the expectations for what can be used on the platform.

twitter-text This repository is a collection of libraries and conformance tests to standardize parsing of Tweet text. It synchronizes development, tes

Twitter 2.9k Jan 8, 2023