init vue structure and improve folder filter types

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    ["es2015", { "modules": false }]
+  ]
+}

.gitignore

@@ -9,3 +9,5 @@ tests/bootstrap-config.php
 .settings
 vendor
 src/vendor
+node_modules
+npm-debug.log

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "tainacan",
+  "description": "Tainacan",
+  "author": "Eduardo <eduardo.humberto1992@gmail.com>",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+  },
+  "dependencies": {
+    "bootstrap": "^3.3.7",
+    "vue": "^2.0.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.0.0",
+    "babel-loader": "^6.0.0",
+    "babel-preset-es2015": "^6.0.0",
+    "cross-env": "^3.0.0",
+    "css-loader": "^0.25.0",
+    "file-loader": "^0.9.0",
+    "vue-loader": "^9.7.0",
+    "vue-custom-element": "^1.0.13",
+    "webpack": "2.1.0-beta.25",
+    "webpack-dev-server": "2.1.0-beta.0"
+  }
+}

src/classes/field-types/class-tainacan-relationship.php

@@ -1,24 +0,0 @@
-<?php
-
-namespace Tainacan\Field_Types;
-
-defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
-
-/**
- * Class TainacanFieldType
- */
-class Relationship extends Field_Type {
-
-    function __construct(){
-        parent::set_primitive_type('');
-    }
-
-    /**
-     * @param $metadata
-     * @return string
-     */
-
-    public function render( $metadata ){
-        return '<tainacan-relationship name="'.$metadata->get_name().'"></tainacan-relationship>';
-    }
-}

src/classes/field-types/relationship/class-tainacan-relationship.php

@@ -0,0 +1,66 @@
+<?php
+
+namespace Tainacan\Field_Types;
+
+defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
+
+/**
+ * Class TainacanFieldType
+ */
+class Relationship extends Field_Type {
+
+
+    public $collections;
+    public $search_metadata;
+    public $avoid_selected_items;
+    public $inverse;
+
+    function __construct(){
+        parent::set_primitive_type('');
+    }
+
+    /**
+     * get the collections that the metadata type is related
+     *
+     * @return mixed
+     */
+    public function get_collections(){
+       return $this->collections;
+    }
+
+    /**
+     * get the metadata to search items
+     *
+     * @return mixed
+     */
+    public function get_search_metadata(){
+        return $this->search_metadata;
+    }
+
+    /**
+     * avoid selected items
+     *
+     * @return mixed
+     */
+    public function get_avoid_selected_items(){
+        return $this->avoid_selected_items;
+    }
+
+    /**
+     * verify inverse metadata
+     *
+     * @return mixed
+     */
+    public function get_inverse(){
+        return $this->inverse;
+    }
+
+    /**
+     * @param $metadata
+     * @return string
+     */
+
+    public function render( $metadata ){
+        return '<tainacan-relationship name="'.$metadata->get_name().'"></tainacan-relationship>';
+    }
+}

src/classes/field-types/selectbox/class-tainacan-selectbox.php

@@ -9,10 +9,21 @@ defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
  */
 class Selectbox extends Field_Type {
 
+    public $term_root;
+
     function __construct(){
         parent::set_primitive_type('');
     }
 
+    /**
+     * get the term root to mount the type
+     *
+     * @return mixed
+     */
+    public function get_term_root(){
+        return $this->term_root;
+    }
+
     /**
      * @param $metadata
      * @return string

src/classes/field-types/text/Text.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="component">
+        <p>{{ name }}</p>
+        <input type="text">
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            name: { type: String }
+        }
+    }
+</script>
+
+<style scoped>
+    input[type="text"] {
+        display: block;
+        margin: 0;
+        width: 100%;
+        border-radius: 6px;
+        font-family: sans-serif;
+        font-size: 18px;
+        appearance: none;
+        box-shadow: none;
+        color:green;
+    }
+    input[type="text"]:focus {
+        outline: none;
+    }
+</style>

src/classes/field-types/textarea/Textarea.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="component">
+        <p>{{ name }}</p>
+        <textarea cols="30" rows="10"></textarea>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            name: { type: String }
+        }
+    }
+</script>
+
+<style scoped>
+    textarea {
+        display: block;
+        margin: 0;
+        width: 100%;
+        border-radius: 6px;
+        font-family: sans-serif;
+        font-size: 18px;
+        appearance: none;
+        box-shadow: none;
+        color:green;
+    }
+    textarea:focus {
+        outline: none;
+    }
+</style>

src/classes/tainacan-creator.php

@@ -39,6 +39,10 @@ function tainacan_autoload($class_name){
         $dir = strtolower(CLASSES_DIR.implode(DIRECTORY_SEPARATOR, array_slice($class_path, 1, count($class_path) -2) )).'/';
         $dir = str_replace('_', '-', $dir);
 
+        if( in_array('Field_Types', $class_path) ){
+            $dir.= strtolower(str_replace('_', '-' , $class_name)).'/';
+        }
+
         $file = $dir . 'class-tainacan-'. strtolower(str_replace('_', '-' , $class_name)) . '.php';
 
         if(file_exists($file)) {

src/js/main.js

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+// include vue-custom-element plugin to Vue
+import VueCustomElement from 'vue-custom-element';
+
+Vue.use(VueCustomElement);
+
+import Text from '../classes/field-types/text/Text.vue';
+import Textarea from '../classes/field-types/textarea/Textarea.vue';
+
+Vue.customElement('tainacan-text', Text);
+Vue.customElement('tainacan-textarea', Textarea);

webpack.config.js

@@ -0,0 +1,64 @@
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+    entry: './src/js/main.js',
+    output: {
+        path: path.resolve(__dirname, './src/assets/'),
+        publicPath: './src/assets/',
+        filename: 'web-components.js'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.vue$/,
+                loader: 'vue',
+                options: {
+                    // vue-loader options go here
+                }
+            },
+            {
+                test: /\.js$/,
+                loader: 'babel',
+                exclude: /node_modules/
+            },
+            {
+                test: /\.(png|jpg|gif|svg)$/,
+                loader: 'file',
+                options: {
+                    name: '[name].[ext]?[hash]'
+                }
+            }
+        ]
+    },
+    resolve: {
+        alias: {
+            'vue$': 'vue/dist/vue'
+        }
+    },
+    devServer: {
+        historyApiFallback: true,
+        noInfo: true
+    },
+    devtool: '#eval-source-map'
+}
+
+if (process.env.NODE_ENV === 'production') {
+    module.exports.devtool = '#source-map'
+    // http://vue-loader.vuejs.org/en/workflow/production.html
+    module.exports.plugins = (module.exports.plugins || []).concat([
+        new webpack.DefinePlugin({
+            'process.env': {
+                NODE_ENV: '"production"'
+            }
+        }),
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            minimize: true
+        })
+    ])
+}