feat(input): add radio (#62)

README.md

@@ -361,6 +361,35 @@ a = "a";
 ```
 ````
 
+<a name="markup_radio" href="#markup_radio">#</a> **radio**
+
+Render a `<ratio>`.
+
+```ts
+type Options = {
+  /**
+   * @description The label for the input.
+   */
+  label: string;
+  /**
+   * @description The options for select.
+   * @default []
+   */
+  options: { labels: string[]; values: (string | number)[] }[];
+  /**
+   * @description Hide the code by default with false value.
+   * @default false
+   */
+  pin?: boolean;
+};
+```
+
+````markdown
+```js | radio "options: { labels: ['A', 'B', 'C'], values: ['a', 'b', 'c'] }"
+a = "a";
+```
+````
+
 <a name="markup_table" href="#markup_table">#</a> **table**
 
 Render an array of objects into a table.

packages/genji-notebook/demo/docs/test5.md

@@ -111,7 +111,15 @@ inputSelect = "a";
 ```
 
 ```js
-`selected: ${inputSelect}`;
+`select: ${inputSelect}`;
+```
+
+```js | radio "options: { labels: ['A', 'B', 'C'], values: ['a', 'b', 'c'] }"
+inputRatio = "a";
+```
+
+```js
+`ratio: ${inputRatio}`;
 ```
 
 ## Table

packages/genji-notebook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "genji-notebook",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Interactive JavaScript Notebook.",
   "bin": "bin/genji.js",
   "repository": {

packages/genji-notebook/public/$genji_components/output.js

@@ -7,6 +7,7 @@ export function createInput(options, output, $emit) {
     number: createNumberInput,
     range: createRangeInput,
     select: createSelectInput,
+    radio: createRadioInput,
   };
   const inputFactory = registry[outputType] || createBasicInput;
   return inputFactory(options, value, $emit);
@@ -81,7 +82,13 @@ function isNumeric(options) {
 
 function isOnChange(options) {
   const { outputType } = options;
-  return outputType === "select";
+  switch (outputType) {
+    case "select":
+    case "radio":
+      return true;
+    default:
+      return false;
+  }
 }
 
 function isColor(options) {
@@ -94,7 +101,8 @@ function createBasicInput(
   value,
   $emit,
   slot = '<input :type="type" :value="value"></input>',
-  defaults = {}
+  defaults = {},
+  valueOf = valueOfInput
 ) {
   const { outputType, name, label = name, ...rest } = options;
   const input = fromVue({
@@ -114,7 +122,7 @@ function createBasicInput(
     }),
   });
   const createOnInput = () => (e) => {
-    const { value } = e.target;
+    const value = valueOf(e);
     const v = isNumeric(options) ? +value : value;
     $emit("updateValue", options.id, v);
     if (input.$oninput) input.$oninput(e);
@@ -156,6 +164,28 @@ function createSelectInput(options, value, $emit) {
   return node;
 }
 
+function createRadioInput(options, value, $emit) {
+  const { name } = options;
+  const template = `<label v-for="label, index in options.labels" >
+    {{label}}
+    <input type="radio" name="${name}" :checked="index === 0 ? true: false" :id="options.values[index]"/>
+    &ensp;
+  </label>`;
+  const defaults = {
+    options: [],
+  };
+  const valueOf = (e) => e.target.id;
+  const node = createBasicInput(
+    options,
+    value,
+    $emit,
+    template,
+    defaults,
+    valueOf
+  );
+  return node;
+}
+
 function stringify(output) {
   const withFunction = (_, v) => (typeof v === "function" ? `${v}` : v);
   return JSON.stringify(output, withFunction)
@@ -164,6 +194,10 @@ function stringify(output) {
     .replaceAll("\\'", "'");
 }
 
+function valueOfInput(e) {
+  return e.target.value;
+}
+
 function valueOf(options, output) {
   if (output === null) return output;
   if (output === undefined) return undefined;