Nagging Penguin Matriarchs

    @marklogic-community/grove-vue-core-components

    0.2.4 • Public • Published

    MarkLogic Grove Vue Core Components

    This library includes diverse search ui components. The library is part of the MarkLogic Grove project, but could work in any Vue application.

    QuickStart SearchQueryBuilder

    First, add the @marklogic-community/grove-vue-core-components dependency via npm. (In a Grove Project, you will want to do this inside the ui directory, if not already included out of the box.)

    npm install --save @marklogic-community/grove-vue-core-components
    

    Then, in your Vue application, import the components you wish to use, and register them either globally or inside the component where you use it:

    // Either add this to ui/src/main.js to add it globally:
    import { searchquerybuilder } from '@marklogic-community/grove-vue-core-components';
    Vue.component(searchquerybuilder.SearchQueryBuilder.name, searchquerybuilder.SearchQueryBuilder);
    
    // Or do this in a Vue page/component to add it there only:
    import { searchquerybuilder } from '@marklogic-community/grove-vue-core-components';
    
    export default {
      ...,
      components: {
        ...,
        SearchQueryBuilder: searchquerybuilder.SearchQueryBuilder
      },
      methods: {
        apply(query) {
          console.log(query);
        }
      }
      ...
    };

    After that you can start using the directly, which could look for example like this:

                <search-query-builder :apply="apply"></search-query-builder>

    QuickStart mlTreeFacet

    First, add the @marklogic-community/grove-vue-core-components dependency via npm. (In a Grove Project, you will want to do this inside the ui directory, if not already included out of the box.)

    npm install --save @marklogic-community/grove-vue-core-components
    

    Then, in your Vue application, import the components you wish to use, and register them either globally or inside the component where you use it:

    // Either add this to ui/src/main.js to add it globally:
    import { mlTreeFacet } from '@marklogic-community/grove-vue-core-components';
    Vue.component(mlTreeFacet.mlTreeFacet.name, mlTreeFacet.mlTreeFacet);
    
    // Or do this in a Vue page/component to add it there only:
    import { mlTreeFacet } from '@marklogic-community/grove-vue-core-components';
    
    export default {
      ...,
      components: {
        ...,
        mlTreeFacet: mlTreeFacet.mlTreeFacet
      },
      data() {
        return {
          ...,
          nodes: {},
          topNodes: [],
      },
      ...
    };

    After that you can start using the directly, which could look for example like this:

                <ml-tree-facet
                  v-if="facet.name === 'MyTreeFacet'"
                  :facet="facet"
                  :nodes="nodes"
                  :start-ids="topNodes"
                  :toggle="toggleFacet"
                  :negate="toggleNegatedFacet"
                ></ml-tree-facet>

    To hook it up with the backend:

    Download a copy of OntologyApi.js from https://github.com/marklogic-community/grove-vue-core-components/tree/master/src, and drop it into ui/src/api/

    Import this api client into the SearchPage:

    import OntologyApi from '@/api/OntologyApi.js';

    And hook it up with loading of the page:

     created() {
        if (this.isLoggedIn) {
          ...
          let self = this;
          OntologyApi.getHierarchy('MyHierarchy').then(response => {
            self.nodes = response.response.concepts;
            self.topNodes = response.response.topConcepts;
          });

    Install

    npm i @marklogic-community/grove-vue-core-components

    DownloadsWeekly Downloads

    22

    Version

    0.2.4

    License

    Apache-2.0

    Unpacked Size

    327 kB

    Total Files

    29

    Last publish

    Collaborators

    • marklogic-comm
    • ralmodiel
    • paxtonhare
    • rjrudin
    • grtjn
    • dalaidunc