Skip to content
WIP: Port widgets out of scaife-skeleton
JavaScript Vue CSS HTML
Branch: master
Clone or download

README.md

Scaife Widgets

npm version github actions

Component library for building applications in the Scaife Viewer ecosystem.

Citizens

Everything is a component in the Vue sense but we try to distinguish between:

  1. Components - stateless, presentation-only components
  2. Widgets - stateful, Vuex-backed components
  3. Stores - Vuex state stores

Getting Started

$ npm install @scaife-viewer/scaife-widgets

Import components and widgets like so:

import {
  // components
  HelloWorld,
  Icon,
  Metadata,
  Paginator,
  TextSize,
  TextWidth,
  // widgets
  TextSizeWidget,
  TextWidthWidget,
  PassageAncestorsWidget,
  PassageChildrenWidget,
  PassageReferenceWidget
} from "@scaife-viewer/scaife-widgets";

Import css like so:

<style src='@scaife-viewer/scaife-widgets/dist/scaife-widgets.css'></style>

Import utils like so:

import { URN } from "@scaife-viewer/scaife-widgets";

Import constants like so:

import WIDGETS_NS from "@scaife-viewer/scaife-widgets";

Import and initialize the store like so:

import Vue from "vue";
import Vuex from "vuex";
import App from "./App.vue";
import { scaifeWidgets } from "@scaife-viewer/scaife-widgets";

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    [scaifeWidgets.namespace]: scaifeWidgets.store
  }
});

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  store
}).$mount("#app");

See _example/sample for more examples.

TextSizeWidget and TextWidthWidget

The TextSizeWidget and TextWidthWidget widgets must be coupled with a "reader" component along with the appropriate class: text-${textSize} or text-width-${textWidth}, respectively.

Example:

<template>
  <div
    class="reader"
    :class="[`text-${textSize}`, `text-width-${textWidth}`]"
  >
    <!-- reader here -->
  </div>
</template>

Development

Project setup:

$ npm install

Compile and minify for production:

$ npm run build

Run unit tests:

$ npm run test

Lint:

$ npm run lint

Develop scaife-widgets in parallel with a Scaife Viewer front end:

Within the scaife-widgets repo root directory:

$ yarn link # @@@ resolve npm / yarn difference between projects
$ npm run watch

Within the Scaife Viewer front end directory:

$ yarn link "@scaife-viewer/scaife-widgets"
$ yarn serve

The watch script will re-build scaife-widgets when changes are made.

Since the module has been linked via yarn link, the front end's serve script will detect the changes and recompile the front end.

To revert to the canonical scaife-widgets installation within the Scaife Viewer front end:

yarn unlink "scaife-viewer/scaife-widgets"
yarn install --force
You can’t perform that action at this time.