Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@sap-devx/inquirer-gui

Package Overview
Dependencies
Maintainers
3
Versions
76
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@sap-devx/inquirer-gui

Inquirer Graphical User Interface

  • 0.8.0
  • Source
  • npm
  • Socket score

Version published
Maintainers
3
Created
Source

CircleCI Coverage Status Language grade: JavaScript Commitizen friendly GitHub license REUSE status dependentbot

Inquirer GUI

alt text

Description

inquirer-gui is a UI component that displays Inquirer.js-compliant questions in an interactive HTML form.

Requirements

  • node.js version 10 or higher.

Installation and Usage

There are several use-cases for the consuming inquirer-gui component:

  • You can use it in another Vue application or in a non-Vue application
  • You can use it in a browser or in Visual Studio Code
  • You can provide the questions in the frontend or in the backend (providing questions in the backend implies more flexibility in composing questions)

We provide examples for some of the above use-cases.

First, clone this directory:

git clone https://github.com/SAP/inquirer-gui

Run in Browser (Frontend Questions)

Use the provided sample-app:

npm install
cd sample-app
npm install
npm run serve

This will run the web server on localhost on an available port. Open the provided link in the browser.

Run in Browser (Backend Questions)

Use the provided sample-app and websocket-server:

npm install
cd websocket-server
npm install

If using Visual Studio Code, run the WebSocket Server debug configuration. This will start the sample WebSocket server that listens for requests on port 8081.

cd sample-app
npm install
npm run serve

This will run the web server on localhost on an available port. Open the provided link in the browser.

Usage

If writing a Vue application, simply add the following line to your <template> tag:

   <Form ref="form" :questions="questions" @answered="onAnswered" />

The questions property is an inquirer.js-compliant array of questions. E.g.:

[
  {
    type: "input",
    name: "name",
    message: "Your name (frontend)",
    default: "Joe",
    validate: function (input) {
      if (input.length >= 2) {
        return true;
      } else {
            return "Name must be at least 2 characters long";
      }
    }
  }
]

The answered event is fired when any answer is changed:

  • The first parameter to the event handler, answers, contains all answers.
  • The second parameter, issues, can be used to, for example, enable or disable a Next button.

Custom form elements

inquirer-gui provides built-in form elements for all built-in inquirer.js question types:

  • list, rawlist
  • expand
  • checkbox
  • confirm
  • input (number, password and input)
  • editor

inquirer-gui supports custom form elements via its plugin mechanism (see more here).

Creating a custom form element

A form element plugin is a javascript object with this structure:

{
  questionType: '<inquirer-question-type>';
  component: <MyVueComponent>;
}

Where questionType is the string provided in the question's type property, and component is a Vue component that renders questions of the given type.

There is example of a custom form element in the /sample-plugin folder. It is defined as a Vue plugin and was published as @sap-devx/inquirer-gui-date-plugin on npm.

Consuming a custom form element

Consume a custom form element as a Vue plugin using the Vue.use() method. The plugin is returned in the method's options parameter. For example, refer to /sample-app/src/App.vue:

import DatePlugin from "@sap-devx/inquirer-gui-date-plugin";

const options = {};
// use the Vue plugin
Vue.use(DatePlugin, options);
// register the inquirer-gui plugin with your form instance
form.registerPlugin(options.plugin);

How to obtain support

To get more help, support and information please open a github issue.

Contributing

Contributing information can be found in the CONTRIBUTING.md file.

FAQs

Package last updated on 18 Jul 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc