refactor lib: clean directories + clean options + add theming capabilities + remove usage of ionicon (for arrows)

2026-06-11 18:02:29 +03:00 · 2018-09-17 20:41:26 +02:00
parent 9d914ff252
commit c29fa5680d
28 changed files with 11956 additions and 6453 deletions
@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import JsonViewer from '../lib';
+import './css/ionicons.css';
+
+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}
+})
@@ -0,0 +1,66 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    entry: './example/app.js',
+    output: {
+        path: path.join(__dirname, '../dist'),
+        filename: 'main.js'
+    },
+    devtool: 'cheap-module-source-map',
+    devServer: {
+        port: 8081
+    },
+    resolve: {
+        extensions: ['.js', '.vue'],
+        alias: {
+            vue$: 'vue/dist/vue.esm.js'
+        },
+        modules: [
+            path.join(__dirname, '../'),
+            'node_modules'
+        ]
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                loader: 'babel-loader',
+                exclude: /node_modules/
+            },
+            {
+                test: /\.css$/,
+                use: ['vue-style-loader', 'css-loader', 'autoprefixer-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+                loader: 'url-loader',
+                options: {
+                    limit: 10000,
+                    name: 'img/[name].[ext]'
+                }
+            },
+            {
+                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+                loader: 'url-loader',
+                options: {
+                    limit: 10000,
+                    name: 'fonts/[name].[ext]'
+                }
+            },
+            {
+                test: /\.vue$/,
+                use: [{
+                    loader: 'vue-loader'
+                }]
+            }
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            filename: 'index.html',
+            template: './example/index.html',
+            inject: true
+        }),
+    ]
+}
@@ -0,0 +1,22 @@
+<!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>
+</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>
+</body>
+</html>