0.0.1 • Published 3 years ago

miljodir-components v0.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

\

This webcomponent follows the open-wc recommendation.

Installation

npm i miljodir-wc

Usage

<script type="module">
  import 'miljodir-wc/miljodir-wc.js';
</script>

<miljodir-wc></miljodir-wc>

Linting with ESLint, Prettier, and Types

To scan the project for linting errors, run

npm run lint

You can lint with ESLint and Prettier individually as well

npm run lint:eslint
npm run lint:prettier

To automatically fix many linting errors, run

npm run format

You can format using ESLint and Prettier individually as well

npm run format:eslint
npm run format:prettier

Testing with Web Test Runner

To run the suite of Web Test Runner tests, run

npm run test

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

npm run test:watch

Demoing with Storybook

To run a local instance of Storybook for your component, run

npm run storybook

To build a production version of Storybook, run

npm run storybook:build

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo with web-dev-server

npm start

To run a local development server that serves the basic demo located in demo/index.html

Developer tools

Support for LIT html, LIT css, and LIT analyzer:

Support for markdown:

SVG preview:

Overview of Web components

Global setup

Setup needed on the host website:

  • include Sofia Pro and Open Sans fonts. Check related licenses for more info.

    For example:

<link href="https://fonts.cdnfonts.com/css/sofia-pro" rel="stylesheet" type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet">

Global functionaity available for all the components

  • keyboard navigation

Accordion

Accordion Card (md-accordion-card)

  • Attributes:

    • header: String
    • expanded: Boolean
    • status: 'done' | 'error' | 'warning' | 'default'
    • static: Boolean
    • destroyOnHidden: Boolean

  • Enhancements:

Accordion List (md-accordion-list)

  • Attributes:
    • multiPanel: Boolean
  • Events:
    • headerClicked
  • Enhancements:

Button (md-button)

  • Attributes
    • disabled: Boolean
  • Classes:
    • primary | secondary
    • add-field
    • fit-container
  • Events:
    • click
  • Methods:
    • click

Checkbox (md-checkbox)

  • Attributes:
    • label: String
    • hideBox: Boolean
  • Events:
    • change
  • Enhancements:

CheckboxGroup

  • Attributes:
  • Events:
  • Enhancements:

Context menu

ContextMenu

  • Attributes: None, only slots
  • Events: None
  • Enhancements: Extend/Inherit from dialog class

ContextMenuItem

  • Attributes: None, only named slots (icon and text)
  • Events: click
  • Enhancements:

DataGrid (md-data-grid)

  • Attributes:
  • Events:
  • Enhancements:

DownloadFile (md-download-file)

  • Attributes:
    • value (*): String
    • disabled: Boolean
    • size: Integer (bytes)
    • filename: String
    • canDelete: Boolean (default: true)
  • Events:
    • click
    • delete

FormField (md-form-field)

  • Attributes:
    • for: String
    • tooltip: String
    • label: String
    • required: Boolean
  • Events:
  • Enhancements:

Header

  • Attributes:

    • title: String
    • user: Object
      • name: String
      • company: String
    • languages: List\
    • selectedlanguage: String

  • Events:

    • logout
    • login
    • languageSelect\

Icon

  • List of icon tags:
    • md-icon-arrow-down
    • md-icon-arrow-up
    • md-icon-checkmark
    • md-icon-close
    • md-icon-comment
    • md-icon-cross
    • md-icon-delete
    • md-icon-doc
    • md-icon-download
    • md-icon-info
    • md-icon-plus
    • md-icon-question
    • md-icon-spinner
    • md-icon-sub-menu
    • md-icon-trash-bin
    • md-icon-upload
    • md-icon-warning
    • ...
  • Attributes:
    • inactive
  • Classes:
    • Color:
      • success
      • warning
      • error
    • Size:
      • size-xl
      • size-l
      • size-m
      • size-s
    • Utils
      • pointer

IconSpinner

InfoBox (md-info-box)

  • Attributes: None, slot=text content
  • Events: None
  • Enhancements:

LeftMenu (md-left-menu)

  • Attributes:
  • Events:
  • Enhancements:

Map (md-map)

  • Attributes:
    • latitude: number
    • longitude: number
  • Events:
  • Enhancements:

ModalForm (md-modal)

  • Attributes:
    • open: Boolean
    • error: Boolean
  • Classes:
    • size-xl | size-l | size-m | size-s | size-xs
  • Events:
    • close
  • SlotComponents:
    • (md-modal-title)
    • (md-modal-content)
    • (md-modal-buttons)
  • Enhancements:

PageTitle (md-page-title)

  • Attributes:
    • value (*): String
  • Events:
  • Enhancements:

Paragraph (md-paragraph)

  • Attributes:
    • value: String
  • Events:
  • Enhancements:

Popover (md-popover)

  • Attributes:
    • anchor: String
    • placement: String ('auto' is preferable)
  • Events:
    • closed
  • Enhancements:

Radio

RadioButton

  • Attributes:
    • checked: Boolean
    • tabindex: number
  • Events:
  • Enhancements:

RadioGroup

  • Attributes:
  • Events:
    • input
  • Enhancements:

SectionBar (md-section-bar)

  • Attributes:
    • items (*): Array\
    • value: String | null
    • disabled: Boolean (default: false)
  • Events:
    • input: Event (fired every time the value of the element changes)
  • Enhancements:
  • Requirements:
    • It needs also the import of md-section-bar-item

SectionBarItem (md-section-bar-item)

  • Attributes:
    • item (*): Item { key, text, complete }
    • active: Boolean (default: false)
    • first: Boolean (default: false)
    • disabled: Boolean (default: false)
  • Events:
    • click: Event
  • Enhancements:

Select

  • Attributes:
    • items: Array
    • showChips: Boolean
    • status: 'Idle' | 'Loading' | 'Error'
    • customSearch: Boolean
    • multiple: Boolean
    • active: Boolean
    • placeholder: String
    • invalid: String
  • Events:
  • Enhancements:

Table

  • Building a table via Web Components is not in scope. See table readme for more info.

TextArea

  • Attributes:
    • resize: Boolean
    • rows: number
  • Events:
    • input
    • change
  • Enhancements:

TextAreaFile

  • Attributes:
  • Events:
  • Enhancements:

TextField

  • Attributes:
    • readOnly: Boolean
    • disabled: Boolean
    • invalid: String
    • placeholder: String
    • required: Boolean
    • debounce: Integer // ms - TODO: disabled
  • Events:
    • input | change (ref. input event) (sende begge events. input for automatisering av Angular Reactive forms. change fordi det er en mer vanlig event å lytte til)

TileButton

  • Slots

    • ikon

  • Attributes:

    • title: String
    • description: String

TimePicker

  • Attributes:
  • Events:
  • Enhancements:

Toggle (md-toggle)

  • Attributes:
    • disabled: Boolean
    • checked: Boolean
  • Events:
    • click: Event
  • Methods:
    • click

Tooltip

  • Attributes:
    • anchor: String
    • placement: String ('auto' is preferable)
  • Events:
    • closed
  • Enhancements:

Upload

  • Attributes:
    • text: String
    • accept: String (empty string or a list of file extensions, example .jpg,.jpeg,.pdf)
    • disabled: Boolean
    • files: Array\
    • uploadedBytes: Integer (the client must provide this value to update the progressbar. When this value is greater or equal the files size, the form is dismissed)
  • Events:
    • change (the user want to start the upload and a progressbar is shown)
    • abort (the user want to abort the upload)
@a11y/focus-trap@popperjs/core@web/test-runner-junit-reporterchai-as-promisedleafletleaflet.utmlit-elementlit-htmltypescript-debounce-decorator
0.0.1

3 years ago