bennypowers / mixins

Useful mixins for custom-element authors

@pwrs/mixins

Useful mixins for custom-element authors.

SelectMixin

Manages the state of a [multi-]select element, e.g. a dropdown or a data table.

class SelectElement extends SelectMixin(LitElement) {
  static allowedChildren = ['select-item']
}

  <select-element>
    <select-item></select-item>
    <select-item></select-item>
    <select-item></select-item>
  </select-element>

See SelectMixin README

FireMixin

<fire-element></fire-element>

<script defer async>
  document.querySelector("fire-element")
    .addEventListener('😛', e => console.log(e.detail));

  customElements.define('fire-element',
    class FireElement extends FireMixin(HTMLElement) {
      connectedCallback() {
        this.fire('😛', 'Haha!');
      }
    });

</script>

logs: Haha!;

See FireMixin README

mixins's Issues

Update to lit 2

diff --git a/node_modules/@pwrs/mixins/select/select-mixin.ts b/node_modules/@pwrs/mixins/select/select-mixin.ts
index ddff56b..4c28d9b 100644
--- a/node_modules/@pwrs/mixins/select/select-mixin.ts
+++ b/node_modules/@pwrs/mixins/select/select-mixin.ts
@@ -1,6 +1,6 @@
-import type { Constructor, PropertyValues, LitElement } from 'lit-element';
+import type { PropertyValues, ReactiveElement } from 'lit';
 import { dedupeMixin } from '@open-wc/dedupe-mixin'
-import { property, query } from 'lit-element';
+import { property, query } from 'lit/decorators.js';
 
 import { propOr } from '../lib/propOr';
 import { not } from '../lib/logic';
@@ -12,6 +12,10 @@ import { FireMixin, FireMixinElement } from '../fire/fire-mixin';
 import { matches, isFocusedOrActive } from '../lib/dom';
 import { elem } from '../lib/pointfree';
 
+type Constructor<T = {}> = {
+  new (...args: any[]): T
+}
+
 type SlotchangeEvent = Event & { target: HTMLSlotElement };
 
 export interface Item extends HTMLElement {
@@ -22,7 +26,7 @@ export interface SelectMixinElementClassType {
   allowedChildren: string[]|RegExp;
 }
 
-export interface SelectMixinElement extends LitElement {
+export interface SelectMixinElement extends ReactiveElement {
   itemsMutationObserver: MutationObserver;
 
   _items: Item[];
@@ -250,7 +254,7 @@ const SelectedIndexConverter = {
 }
 
 export const SelectMixin = dedupeMixin(
-  function SelectMixin<TBase extends Constructor<LitElement>>(superclass: TBase): TBase & Constructor<SelectMixinElement & FireMixinElement> & SelectMixinElementClassType {
+  function SelectMixin<TBase extends Constructor<ReactiveElement>>(superclass: TBase): TBase & Constructor<SelectMixinElement & FireMixinElement> & SelectMixinElementClassType {
   /**
     * Provides methods and properties for a selecting element.
     *

This issue body was partially generated by patch-package.

CI/CD

probably github actions and semantic release. can use stripe-elements as a template