rework of code extandable display + remove dependancy on ionicons + README & example

2026-06-17 19:21:24 +03:00 · 2018-09-18 00:13:39 +02:00
parent c29fa5680d
commit 65917b48a0
24 changed files with 6466 additions and 4069 deletions
@@ -1,27 +1,72 @@
-import Vue from 'vue';
-import JsonViewer from '../lib';
-import './css/ionicons.css';
+import Vue from 'vue'
+import JsonViewer from '../lib'
+
+Vue.use(JsonViewer)

 new Vue({
-    el: '#app',
-    data() {
-        return {
-            jsonData: {
-                name: [
-                  {key: 2},
-                  {key: 'hello word'},
-                ],
-                val: {
-                  c: function() {},
-                  b: 'a',
-                  a: 'hello word',
-                  asd2: 1,
-                  asd: false,
-                  foo: null,
-                  bar: undefined
-                }
-              }
-        }
-    },
-    components: {JsonViewer}
+  el: '#app',
+  data() {
+    return {
+      jsonData: {
+        total: 25,
+        limit: 10,
+        skip: 0,
+        links: {
+          previous: undefined,
+          next: function () {},
+        },
+        data: [
+          {
+            id: '5968fcad629fa84ab65a5247',
+            firstname: 'Ada',
+            lastname: 'Lovelace',
+            awards: null,
+            known: [
+              'mathematics',
+              'computing'
+            ],
+            position: {
+              lat: 44.563836,
+              lng: 6.495139
+            },
+            description: `Augusta Ada King, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer,
+            chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer,
+            the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation,
+            and published the first algorithm intended to be carried out by such a machine.
+            As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.`,
+            bornAt: '1815-12-10T00:00:00.000Z',
+            diedAt: '1852-11-27T00:00:00.000Z'
+          }, {
+            id: '5968fcad629fa84ab65a5246',
+            firstname: 'Grace',
+            lastname: 'Hopper',
+            awards: [
+              'Defense Distinguished Service Medal',
+              'Legion of Merit',
+              'Meritorious Service Medal',
+              'American Campaign Medal',
+              'World War II Victory Medal',
+              'National Defense Service Medal',
+              'Armed Forces Reserve Medal',
+              'Naval Reserve Medal',
+              'Presidential Medal of Freedom'
+            ],
+            known: null,
+            position: {
+              lat: 43.614624,
+              lng: 3.879995
+            },
+            description: `Grace Brewster Murray Hopper (née Murray; December 9, 1906 – January 1, 1992)
+            was an American computer scientist and United States Navy rear admiral.
+            One of the first programmers of the Harvard Mark I computer,
+            she was a pioneer of computer programming who invented one of the first compiler related tools.
+            She popularized the idea of machine-independent programming languages, which led to the development of COBOL,
+            an early high-level programming language still in use today.`,
+            bornAt: '1815-12-10T00:00:00.000Z',
+            diedAt: '1852-11-27T00:00:00.000Z'
+          }
+        ]
+      }
+    }
+  }
 })
@@ -1,22 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>examples</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>vue-json-viewer - example</title>
 </head>
 <body>
-    <div id="app">
-        <json-viewer :value="jsonData"></json-viewer>
-        <hr />
-        <json-viewer
-          :value="jsonData"
-          icon-prefix="ion"
-          boxed
-          sort
-          show-copy
-          show-bigger></json-viewer>
-    </div>
+  <div id="app">
+    <json-viewer :value="jsonData"></json-viewer>
+
+    <hr />
+
+    <json-viewer
+      :value="jsonData"
+      :expand-depth=5
+      copyable
+      boxed
+      sort></json-viewer>
+  </div>
 </body>
 </html>