Skip to content

0.1.7 - External Web Components, Slots, Styling API, Lifecycles Support, Temple CSS & Temple UI

Latest
Latest
Compare
Choose a tag to compare
@cblanquera cblanquera released this 27 Sep 05:08
0.1.7
7230699

What's New?

  • Importing External Components
  • Slots, Light & Shadow Mode Templates
  • Programmatic Styling API
  • Observed Attributes Lifecycle
  • ElementInternals Lifecycle
  • Temple CSS
  • Temple UI

Importing External Components

You can now import any web components found on the web. This will add to your bundle script automatically.

<link rel="import" type="external" href="@shoelace-style/shoelace/dist/components/button/button.js" />
<link rel="import" type="external" href="@shoelace-style/shoelace/dist/components/alert/alert.component.js" name="sl-alert" />

<sl-button>Button</sl-button>
<sl-alert open>
  This is a standard alert. You can customize its content and even the icon.
</sl-alert>

Slots, Light & Shadow Mode Templates

If you use styles, Temple components naturally enable shadow mode. Shadow mode ignores styles defined outside the component and cannot be used natively in forms. There is now a way to expose HTML to the DOM while working in shadow mode using slots. Let's look at the following example.

<style>
  div {
    padding: 10px;
  }
  ::slotted(button) {
    cursor: pointer;
    text-align: center;
  }
</style>
<template type="light">
  <button>Hello</button>
</template>
<template type="shadow">
  <div><slot></slot></div>
</template>

In the example above, since we added styles, then shadow mode is turned on by default. We use the template tag to designate which markup to expose to the DOM and which to hide and we used native <slot> to marry both sides. You can read more about slots here and the ::slotted css selector here.

Programmatic Styling API

We added an API to allow developers to programmatically add styles.

<script>
  import StyleSet from '@ossph/temple/dist/style/StyleSet';
  //override default styles
  const styles = new StyleSet();
  this.styles = () => styles.toString();
  //now add some styles
  styles.add(':host', 'padding', '5px 10px');
</script>

Observed Attributes Lifecycle

Temple components can now listen when its attributes are changed, added, removed, or replaced. Read this background on
Lifecycle Callbacks. This is how you can take advantage of this lifecycle.

<script observe="name,value">
  import type { AttributeChangeEvent } from '@ossph/temple/dist/types';

  this.on('attributechange', ((e: AttributeChangeEvent)) => {
    const { action, name, value, target } = e.detail;
    switch (action) {
      case 'add':
      case 'update':
      case 'remove':
    }
  });
</script>

ElementInternals Lifecycle

A way to allow components to fully participate in HTML forms. It provides utilities for working with these elements in the same way you would work with any standard HTML form element. Read this background on ElementInternals. This is how you can take advantage of this lifecycle.

<script form>
  this.setFormValue('hello');
</script>

Temple CSS

Temple CSS is still in development.

Temple CSS is like TailwindCSS.

  • Definitely not as complete as TailwindCSS. If you need really advance atomic styles, maybe Tailwind is more suited.
  • More pattern and expression driven than fixed definitions. This makes styling faster, because you don't have to refer to a reference web page for every style when starting out.
  • Highly pluggable into any front end library and extendable by design.
  • Uses pixels (px) be default. Where as p-10 is padding: 10px.
  • You can still use other measurements:
    • p-10p means padding: 10%
    • p-10e means padding: 0.1em
    • p-10r means padding: 0.1rem
  • There is no limit to styles that use measurements:
    • m-100000 means margin: 100000px
    • m--100000 means margin: -100000px
  • Mobile responsive strategy is desktop first vs mobile first.
    • This means you style for desktop resolutions first, then add responsive styles when moving to smaller screens.
    • Prefix xs to xl4 for mobile responsive styles. ie sm-p-10
  • Pseudo :before and :after can be prefixed
    • ex. before-p-10 means .before-p-10::before { padding: 10px; }
    • ex. lg-after-p-10means media (max-width: 960px ) { .lg-before-p-10::before { padding: 10px; }}

More documentation to follow.

Temple UI

A turn key set of pre-defined components in order to use Temple right out of the box. Over 70 elements have been defined including the following.

  • Alert
  • Badge
  • Breadcrumbs
  • Button
  • Icon
  • Loader
  • Notify (Toast)
  • Pager (Pagination)
  • Panel Layout
  • Progress Bar
  • Tab
  • Table Layout
  • Tooltip
  • Checkbox Field
  • Color Field
  • Country Dropdown
  • Currency Dropdown
  • Date Field
  • Datetime Field
  • Code Editor
  • File Uploader
  • File List Uploader
  • Input Field
  • Markdown Editor
  • Input Mask Field
  • Metadata Field
  • Number Field
  • Password Field
  • Radio Field
  • Range Field
  • Rating Field
  • Select Dropdown
  • Slug Field
  • Switch Field
  • Tag Field
  • Textarea Field
  • Text List Field
  • Time Field
  • WYSIWYG

More documentation to follow.

Change Log

Full Changelog: 0.1.6...0.1.7

Assets 2
Loading