- add search components: vs-result.vue, vs-input.vue, facet-category.vue

- add search models
- add opensans font
- add bulma css framework
- add axios, rxjs, vue-property-decorator
- npm updates

src/components/face-category/FacetCategory.ts

@@ -0,0 +1,60 @@
+import { FacetItem } from "@/models/headers";
+import { FilterItem } from "@/models/solr";
+import { Options, Vue } from "vue-class-component";
+import { Prop, Emit } from "vue-property-decorator";
+// import FilterItem from '../models/filter-item';
+
+@Options({
+    name: "FacetCategory",
+})
+export default class FacetCategory extends Vue {
+    ITEMS_PER_FILTER = 2;
+    bar = "";
+    collapsed = true;
+
+    @Prop()
+    facetItems!: Array<FacetItem>;
+
+    @Prop([String])
+    filterName!: string;
+
+    get alias(): string {
+        return this.filterName == "datatype" ? "doctype" : this.filterName;
+    }
+
+    // get filterItems(): Array<FilterItem> {
+    //     return this.data;
+    // }
+
+    get overflowing(): boolean {
+        //ko.observable(self.filterItems().length - self.activeFilterItems().length > ITEMS_PER_FILTER);
+        return this.facetItems.length > this.ITEMS_PER_FILTER;
+    }
+
+    get uncollapseLabelText(): string {
+        if (this.collapsed == true) {
+            // return myLabels.viewer.sidePanel.more; //"More results";
+            return "More results";
+        } else {
+            // return myLabels.viewer.sidePanel.collapse; //"Collapse";
+            return "Collapse";
+        }
+    }
+
+    toggle(): void {
+        if (this.collapsed == true) {
+            this.collapsed = false;
+        } else if (this.collapsed == false) {
+            this.collapsed = true;
+            //list.children("li:gt(4)").hide();
+        }
+    }
+
+    @Emit("filter")
+    activateItem(filterItem: FacetItem): FacetItem {
+        filterItem.category = this.alias;
+        filterItem.active = true;
+        // this.$emit("filter", filterItem);
+        return filterItem;
+    }
+}

src/components/face-category/facet-category.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="panel panel-default">
+        <!-- <h3 class="panel-title filterViewModelName">{{ filterName }}</h3> -->
+        <div class="panel-heading">
+            <h3 class="panel-title titlecase filterViewModelName">{{ filterName }}</h3>
+        </div>
+        <div class="panel-body">
+            <!-- e.g.language -->
+            <ul class="filter-items list-unstyled" v-bind:class="{ limited: facetItems.length > 1 && collapsed }">
+                <li v-for="(item, index) in facetItems" :key="index" class="list-group-item titlecase">
+                    <!-- <span :class="item.Active ? 'disabled' : ''" @click.prevent="activateItem(item)">{{ item.val }} ({{ item.count }}) </span> -->
+                    <span @click.prevent="activateItem(item)">{{ item.val }} ({{ item.count }}) </span>
+                </li>
+            </ul>
+            <ul class="overflowing" v-if="overflowing == true">
+                <li>
+                    <span @click="toggle()">{{ uncollapseLabelText }}</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import FacetCategory from "./FacetCategory";
+export default FacetCategory;
+</script>
+
+<style scoped>
+/* local styles */
+.disabled {
+    /* color: #EBEBE4; */
+    color: lightgray;
+    pointer-events: none;
+    text-decoration: line-through;
+}
+
+.overflowing {
+    color: #444444;
+    list-style: none;
+    z-index: 999;
+}
+
+.overflowing span {
+    color: #444444;
+    font-style: italic;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.filter-items.limited li:nth-of-type(1n + 3) {
+    display: none;
+}
+
+ul.filter-items li span {
+    cursor: pointer;
+    /* color:#ffffff;
+text-decoration: none;
+font-weight: bold;
+font-size: 16px; */
+}
+</style>