package com.axellience.vuegwtexamples.client.examples.simplerender;

import com.axellience.vuegwt.client.component.HasRender;
import com.axellience.vuegwt.client.Vue;
import com.axellience.vuegwt.client.jsnative.jstypes.JsArray;
import com.axellience.vuegwt.client.vnode.VNode;
import com.axellience.vuegwt.client.vnode.VNodeData;
import com.axellience.vuegwt.client.vnode.builder.VNodeBuilder;
import com.axellience.vuegwt.jsr69.component.annotations.Component;
import com.axellience.vuegwt.jsr69.component.annotations.Prop;
import com.google.gwt.regexp.shared.RegExp;
import jsinterop.annotations.JsMethod;
import jsinterop.annotations.JsProperty;

/**
 * @author Adrien Baron
 */
@Component(hasTemplate = false)
public class AnchoredHeadingComponent extends Vue implements HasRender
{
    @JsProperty private static RegExp camelCasePattern = RegExp.compile("([a-z])([A-Z]+)", "g");

    @JsProperty
    @Prop(required = true)
    private Integer level;

    @Override
    public void created() {}

    @Override
    public VNode render(VNodeBuilder builder)
    {
        String text =
            getChildrenTextContent(this.$slots().get("default")).trim().replaceAll(" ", "-");

        String headingId = camelCasePattern.replace(text, "$1-$2").toLowerCase();

        return builder.el("h" + this.level,
            builder.el("a",
                VNodeData.get().attr("name", headingId).attr("href", "#" + headingId),
                this.$slots().get("default")));
    }

    @JsMethod
    private String getChildrenTextContent(JsArray<VNode> children)
    {
        return children.map(child ->
        {
            if (child.getChildren() != null && child.getChildren().length > 0)
                return getChildrenTextContent(child.getChildren());
            return child.getText();
        }).join("");
    }
}

@@ -102,27 +102,11 @@
 ent.
-component.HasRender
+Vue
 ;%0Aim
@@ -131,35 +131,51 @@
 e.vuegwt.client.
-Vue
+component.HasRender
 ;%0Aimport com.axe
@@ -598,55 +598,12 @@
 s.Js
-Method;%0Aimport jsinterop.annotations.JsProperty
+Type
 ;%0A%0A/
@@ -633,16 +633,24 @@
 ron%0A */%0A
+@JsType%0A
 @Compone
@@ -754,20 +754,8 @@
     
-@JsProperty 
 priv
@@ -836,24 +836,8 @@
 );%0A%0A
-    @JsProperty%0A
     
@@ -858,28 +858,23 @@
  = true)
-%0A    private
+ public
  Integer
@@ -1410,22 +1410,8 @@
  %7D%0A%0A
-    @JsMethod%0A
     

Use @JsType on AnchoredHeadingComponent