How to use slim-js - 10 common examples

To help you get started, we’ve selected a few slim-js examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ShavitCohen / redux-frmework-agnostic-technique / implementations / slimjs / src / app / app.js View on Github external
import '../helpers/shady-css.js'

// Slimjs directives (i.e. repeat, if, etc.)
import 'slim-js/directives/all.js'

// import custom elements
import './components/header.js'
import './components/show-card.js'
import './components/show-info.js'
import './components/cast-memeber.js'

import AppTemplate from './app.template.html';


// application root custom element
@tag('awesome-app')
@template(AppTemplate)
@useShadow(true)
class App extends Slim {

  cleanupCards () {
    this.findAll('show-card').forEach(card => card.removeAttribute('selected'));
  }

  clear () {
    this.shows = [];
  }

  selectShow ({target: card}) {
    this.cleanupCards();
    card.setAttribute('selected', '');
    store.dispatch(searchActions.tvShowSelected(card.show));
github ShavitCohen / redux-frmework-agnostic-technique / implementations / slimjs / src / app / app.js View on Github external
// Slimjs directives (i.e. repeat, if, etc.)
import 'slim-js/directives/all.js'

// import custom elements
import './components/header.js'
import './components/show-card.js'
import './components/show-info.js'
import './components/cast-memeber.js'

import AppTemplate from './app.template.html';


// application root custom element
@tag('awesome-app')
@template(AppTemplate)
@useShadow(true)
class App extends Slim {

  cleanupCards () {
    this.findAll('show-card').forEach(card => card.removeAttribute('selected'));
  }

  clear () {
    this.shows = [];
  }

  selectShow ({target: card}) {
    this.cleanupCards();
    card.setAttribute('selected', '');
    store.dispatch(searchActions.tvShowSelected(card.show));
    this.leftTransform = 25 - card.offsetLeft;
github ShavitCohen / redux-frmework-agnostic-technique / implementations / slimjs / src / app / app.js View on Github external
// Slimjs directives (i.e. repeat, if, etc.)
import 'slim-js/directives/all.js'

// import custom elements
import './components/header.js'
import './components/show-card.js'
import './components/show-info.js'
import './components/cast-memeber.js'

import AppTemplate from './app.template.html';


// application root custom element
@tag('awesome-app')
@template(AppTemplate)
@useShadow(true)
class App extends Slim {

  cleanupCards () {
    this.findAll('show-card').forEach(card => card.removeAttribute('selected'));
  }

  clear () {
    this.shows = [];
  }

  selectShow ({target: card}) {
    this.cleanupCards();
    card.setAttribute('selected', '');
    store.dispatch(searchActions.tvShowSelected(card.show));
    this.leftTransform = 25 - card.offsetLeft;
    this.topTransform = 15 - card.offsetTop;
github ShavitCohen / redux-frmework-agnostic-technique / implementations / slimjs / src / app / components / show-card.js View on Github external
import { tag, template, useShadow } from "slim-js/Decorators";

@tag('show-card')
@template(/*html*/`
<style>
  :host-context([has-selection]) {
    opacity: 0.06;
    pointer-events: none;
    filter: blur(3px);
  }
  :host([selected]) {
    opacity: 1;
    filter: blur(0);
  }
  :host {
    display: inline-flex;
    background-color: white;
    color: black;
    padding: 1rem;</style>
github dmitry-korolev / remeal / src / plugins / overlay.js View on Github external
import { Slim } from 'slim-js'
import { tag, template, useShadow } from 'slim-js/Decorators'
import { throttle } from '../control/utils/throttle'
import { calculateCircle } from '../helpers/calculateCircle'

@tag('pointer-overlay')
@useShadow(true)
@template(`
<style>
  div {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 9999;
  }
  
  path {
    fill: rgba(0, 0, 0, 0.5);
    fill-rule: evenodd;</style>
github ShavitCohen / redux-frmework-agnostic-technique / implementations / slimjs / src / app / components / header.js View on Github external
import { tag, template, useShadow } from "slim-js/Decorators";
import { Slim } from "slim-js";

import { searchActions, store } from 'redux-logic-layer';
import { debounce } from "../../helpers/debounce";

@tag('app-header')
@template(/*html*/`
<style>
  :host {
    line-height: 1.2;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--accent-color);
    color: var(--header-text-color);
    letter-spacing: 0.08rem;
    padding: 0 1rem 0 1rem;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.5);
    position: sticky;
    top: 0;
  }
</style>
github ShavitCohen / redux-frmework-agnostic-technique / implementations / slimjs / src / app / components / show-info.js View on Github external
import { tag, template, useShadow } from "slim-js/Decorators";

import { store, showInfoActions } from 'redux-logic-layer';
import { connect } from "../store/connect";

@tag('show-info')
@template(/*html*/`
<style>
  :host {
    transform: translate3d(150px, 0, 0);
    padding-right: 2rem;
    color: #444;
    transition: 850ms cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 0;
  }
  :host-context([has-selection]) {
    transform: translate3d(0px, 0, 0);
    color: #efefef;
    opacity: 1;
  }
  a:visited, a:hover, a {
    color: inherit;</style>
github ShavitCohen / redux-frmework-agnostic-technique / implementations / slimjs / src / app / components / header.js View on Github external
import { tag, template, useShadow } from "slim-js/Decorators";
import { Slim } from "slim-js";

import { searchActions, store } from 'redux-logic-layer';
import { debounce } from "../../helpers/debounce";

@tag('app-header')
@template(/*html*/`
<style>
  :host {
    line-height: 1.2;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--accent-color);
    color: var(--header-text-color);
    letter-spacing: 0.08rem;
    padding: 0 1rem 0 1rem;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.5);
    position: sticky;
    top: 0;
  }

  :host * {</style>
github dmitry-korolev / remeal / src / plugins / overlay.js View on Github external
import { Slim } from 'slim-js'
import { tag, template, useShadow } from 'slim-js/Decorators'
import { throttle } from '../control/utils/throttle'
import { calculateCircle } from '../helpers/calculateCircle'

@tag('pointer-overlay')
@useShadow(true)
@template(`
<style>
  div {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 9999;
  }
  
  path {
    fill: rgba(0, 0, 0, 0.5);
    fill-rule: evenodd;
    stroke: none;
    opacity: 0;</style>
github ShavitCohen / redux-frmework-agnostic-technique / implementations / slimjs / src / app / components / show-info.js View on Github external
import { tag, template, useShadow } from "slim-js/Decorators";

import { store, showInfoActions } from 'redux-logic-layer';
import { connect } from "../store/connect";

@tag('show-info')
@template(/*html*/`
<style>
  :host {
    transform: translate3d(150px, 0, 0);
    padding-right: 2rem;
    color: #444;
    transition: 850ms cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 0;
  }
  :host-context([has-selection]) {
    transform: translate3d(0px, 0, 0);
    color: #efefef;
    opacity: 1;
  }
  a:visited, a:hover, a {
    color: inherit;
    text-decoration: none;</style>

slim-js

Superpower Web Components

MIT
Latest version published 2 years ago

Package Health Score

54 / 100
Full package analysis