Skip to content

Latest commit

 

History

History
107 lines (70 loc) · 2.23 KB

README.md

File metadata and controls

107 lines (70 loc) · 2.23 KB

Description

Store JS files used by both frontend and backend

  • Use ESM to avoid using webpack for compilation on frontend
  • For backend refer to NodeJS document on how to use ESM in NodeJS (To Elaborate)

Running Script

To run the script use...

node <filename.js>

node csv-utils.js --input-type=module

HTML Custom Elements / Web Components

Useful aliasing for web components

// browser may already have these $ / $$...
const $ = (selector, el = document) => el.querySelector(selector);
const $$ = (selector, el = document) => el.querySelectorAll(selector);

Element.prototype.on = Element.prototype.addEventListener;
// TODO: how to auto unload event listener?

Custom Element (Web Component) Samples

Signature Pad

A component for capturing signature using canvas (component name: vcxwc-sign-pad)

Component file location sign-pad.js

Example Usage in https://github.com/es-labs/vue-antd-template file location src/apps/web-sample/views/Demo/DemoSignPad.vue

Features

  • handle attibutes and properties
  • pass in json attributes as string for canvas context settings
  • css variables
  • handle events
  • interactive with vuejs v-model

Customizable Styles

vcxwc-sign-pad {
  --vcxwc-sign-pad-background-color: #faa;
}

Attributes

  • width
  • height
  • context2d: 2D drawing context settings
  • value (v-model used here, input event is created)

Web Cam

A component for capturing image using webcam (component name: vcxwc-web-cam)

Component file location web-cam.js

Example Usage in https://github.com/es-labs/vue-antd-template file location src/apps/web-sample/views/Demo/DemoWebCam.vue

Features

  • shadowDOM and litDOM
    • css variables
  • shadowDOM
    • slots
    • slotted css and slot styles
    • slot events
    • use to include other css files e.g. bulma, bootstrap
    • interactive with vuejs v-on

CSS Variables

vcxwc-web-cam {
  --vcxwc-web-cam-top: 5%;
  --vcxwc-web-cam-right: 5%;
}

Attributes

  • width
  • height

Slots

  • button-snap
  • button-unsnap

Event Emitted

  • snap

TODO - Using web component inside a web component - its possible