fabienb4 / meteor-autoform-semantic-ui Goto Github PK

Hello, I'm getting the following error coming from this package. Any idea what could be causing this?

TypeError: this.$(this.firstNode).checkbox is not a function. (In 'this.$(this.firstNode).checkbox(this.data.atts.settings)', 'this.$(this.firstNode).checkbox' is undefined)

Thanks,
Kris

Doesn't seem to play well with arrays. I have objects called Parameters that are in array in my schema. The buttons to add or delete are scrunched up.

Also I already had semantic installed before adding your package (official atmosphere package). Before and after adding your package it looked about the same (i think the form expanded to window size, but I think that was it).

Thanks,

Hey there, @fabienb4

I think I've found another glitch...
I'm trying to use Autoform's afFieldValueIs helper (http://autoform.meteor.com/fieldvalues) but it seems to only work with pure Autoform fields... If I test it with a field that is a Semantic UI dropdown it doesn't work...

In other words, in the following cenario "Hello" won't show, but if I change it to a regular Autoform input field, it will:

{{> afQuickField name='my-semantic-ui-dropdown-field' options=myOptions}}
{{#if afFieldValueIs name='my-semantic-ui-dropdown-field' value='a-value-from-semantic-ui-dropdown'}}
        <div>Hello</div>
{{/if}}

Hi all,
I have the following scheme:

uf.attachSchema(new SimpleSchema({
    codigo: {
        type: String,
        label: "Código"
    },
    unidad: {
        type: String,
        label: "Unidad"
    },
    propietarios: {
        type: Array,
        optional: true
    },
    'propietarios.$':{
        type: Object
    },
    'propietarios.$.nombre':{
        type: String
    },
    'propietarios.$.mail':{
        type: String,
        regEx: SimpleSchema.RegEx.Email
    }
}));

The problem is that the group of PROPIETARIOS does not 100% of the screen. How I can fix or change this class?

This is how it shows:

This is how it should show:

In the HTML template I use:

        <div class="ui container">
            {{#autoForm collection="uf" id="UfPropietariosForm" doc=uf type="update" template="semanticUI" fields="propietarios"}}
                {{> afQuickFields}}
                <div class="ui right aligned container">
                    <div class="actions">
                        <button type="submit" class="ui blue submit button">Confirmar</button>
                        <button type="button" class="ui cancel button">Cancelar</button>
                    </div>
                </div>
            {{/autoForm}}
        </div>

Regards
Daniel

is it possible to display validation error message in prompt label ?

Hi, the validation messages don't seem to be appearing on my quickform:

{{> quickForm schema="Schema" id="inputForm" template="semanticUI"}}

The inputs turn red and are working fine when validation fails, but I don't see the messages that are supposed to appear when validation fails. I'm using the semantic:ui (the LESS version) if that makes a difference. Thanks!

Hi, can be label for clear button passed as arguments or removed?

Hi, I'm using this package and have noticed a peculiar behavior with the default javascript select. When I say want to edit an existing object and set the object referenced in the autoform's 'doc'. My prompt field (e.g. Select One) doesn't change. However, if I click on the field, the expected value is selected in the list.

How about supporting: http://semantic-ui.com/elements/input.html#labeled?

I've tried the following:

        <div class='ui right labeled input'>
            {{> afQuickField type='number' name='when.value' label=false min=0}}

            <div class='ui basic label'>years</div>
        </div>

But due the generated code for afQuickField, it looks broken:

Thanks a lot!

Could you example for using the search dropdown like select2?

country: {
        type: String,
        optional: true,
        autoform: {
            type: "...............",
            options: function () {
                items = [
                    {value: "A", label: "A", icon: "bz flag"},
                    {value: "B", label: "B", icon: "bz flag"}
                    //... more
                ];

                return items;
            }
        }
    },

Hi, I tried adding a leftLabel to a field and got the following:

<div class="ui labeled fluid input field required">   
      <label for="Y5WfHhnv2Cj2QQBr3">       
          Min raise amount       
      </label>

      <div class="ui label">$</div>

    <input type="number" name="minRaiseAmount" leftlabel="$" id="Y5WfHhnv2Cj2QQBr3" required="" data-schema-key="minRaiseAmount" max="2000000" min="50000">

  </div>

In reviewing the SUI docs, it looks like the 'ui labeled input' class needs to wrap the input and any pre or post labels as well as the input. The 'normal' field tag should go outside of that div but inside the normal 'field' div.

I can try tackling this via a pull request.

This might not actually be an issue (or it might just be an issue with autoform) but, in our project (haven't tested it outside of the project yet). But it seems like the code below doesn't work when you create a schema that only exists on the front-end.

Meteor.startup(() => {
  AutoForm.setDefaultTemplate("semanticUI");
});

take this quickform for example

{{> quickForm 
            schema=addressSchema
            id="addressForm"
            type="method"
            meteormethod="addAddress"
            myCustomAttribute=getAttr
}}

helper

Template.addressForm.helpers({
    'getAttr': function(){
        return {some: 'data'};
    }
});

I usually add a custom attribute for help in the form hooks. It works fine when using only the autoform package but when using the this package I'm not able to pass object. returning a string works but upon returning object I get the following error in console and the form doesn't load at all.

Uncaught Error: Unexpected object in htmljs in toText: [object Object]

I am a new for Sematic UI.
I want to use date, dateTime, dateRange picker in Sematic UI.
Have any plugin?, please help me.

Hello, thanks for all your plugins :)

I might be missing something, but how do I listen to events on a Semantic UI dropdown?

I have a {{> afQuickField name='myField' options=myOptions}} but since it gets converted to a bunch of div's and hidden elements, how do I listen to the changes in the Dropdown?

Thank you!

Hi!
I have trouble with new select item. I can see dropdown items but they are not clickable.

Here is a sample of my code:

Schema:

Status:  {
        type: String,
        allowedValues: function() {
            return _device_status_list;
        },
        optional: true,
        autoform: {
            options: function() {
                var _array = [];
                _.each(_device_status_list, function(status) {
                    var obj = {
                        value: status,
                        label: TAPi18n.__('device_status_' + status)                        
                    };
                    _array.push(obj);
                });
                return _array;
            },
            type: "select"
        }
    },

Simplified form:

<template name="test">
    {{#autoForm
        id="editDeviceForm1" 
        schema=DeviceSchema.Device
        type="insert"
        collection=Devices
    }}
        {{> afQuickField name='Status'}}
    {{/autoForm}}
</template>

When first loading a page or doing a hard refresh on a page with a form associated with a document, the select inputs won't properly update to the values of the document.

I suspect the problem is linked to the fact that Semantic-UI hijacks some of the update/change events.

I don't have much time to investigate at the moment, any ideas appreciated!
#33 #37

First of all, great update to 0.6.1 – very nice cleanup, much appreciated.

One thing that happened though, is that dropdowns that do not have search or fullTextSearch enabled, no longer appear as square form elements. Without the Semantic UI selection class, they don't get the rectangular box around them.

If this was intended, I think a asSelection parameter might be in order.

The change that caused this issue to popup is here. Here is a screenshot of before:

Before, a non-search-enabled dropdown would look like this:

However, now they simply look like this:

I am using the latest semantic 2.1 and receiving an error message when I use a select or checkbox. It might be caused by something else in my code. Not really sure.
Here is the message I receive when I add a dropdown.
TypeError: $(...).find(...).dropdown is not a function

If I change select.js code from this:
Template.afSelect_semanticUI.onRendered(function() { $(this.firstNode).find(".ui.dropdown").dropdown({ fullTextSearch: this.data.atts.fullTextSearch || false }); });

to this (added this. to beginning of second line) :
Template.afSelect_semanticUI.onRendered(function() { this.$(this.firstNode).find(".ui.dropdown").dropdown({ fullTextSearch: this.data.atts.fullTextSearch || false }); });

it fixes the trouble. Also in checkbox changing this code:

Template.afCheckbox_semanticUI.onRendered(function() { $(this.firstNode).checkbox(); });

to this:

Template.afCheckbox_semanticUI.onRendered(function() { this.$(this.firstNode).checkbox(); });
fixes it.

Not sure if this is caused by some other trouble in my code or because of the new 2.1 semantic. Anyway the above fixes the error for me. It may also exist in other semantic components than dropbox and checkbox but those are the only 2 I have needed to check.

Anyway thanks for the great plugin.

Hello!

I'm currently trying to style on of my forms probably. Unfortunately, I can't get a field of an ArrayField to use the fancy javascript version of the semantic ui working.

In other fields it is working great, but it seems it is not working inside an ArrayField.

Do I do something wrong or is it a bug/limitation?

Hi I'm having an issue that appears to be similar to this one: #42

 </div>
        {{> afQuickField name="flip"  checkboxType="toggle"}}

        <hr/>
        {{#if afFieldValueIs name="flip" value="true"}}
        ....

After checking the 'flip' field, the html, etc in the {{#if afFieldValueIs }} block is not being displayed. I tried the trick of deleting the .custom.semantic.json but that doesn't seem to have fixed the problem for me.

If using a select-radio for a field inside an array of fields, autoform default to "plain" template.

HTML outputs:

select-radio field:

<div class="grouped fields" data-schema-key="category">
      <div class="field">
        <div class="ui radio checkbox checked">
          <input type="radio" value="1" name="category" id="YnoKcH7TQokpxLnt6">
          <label>1</label>
        </div>
      </div>
      <div class="field">
        <div class="ui radio checkbox">
          <input type="radio" value="2" name="category" id="YnoKcH7TQokpxLnt6">
          <label>2</label>
        </div>
      </div>
      <div class="field">
        <div class="ui radio checkbox">
          <input type="radio" value="3" name="category" id="YnoKcH7TQokpxLnt6">
          <label>3</label>
        </div>
      </div>
  </div>

select-radio field inside an array of fields:

<div class="af-radio-group" data-schema-key="categories.0.type">
    <div><label><input type="radio" value="1" name="categories.0.type" id="ThtzByDbciAChSaBs"> 1</label></div>
    <div><label><input type="radio" value="2" name="categories.0.type" id="ThtzByDbciAChSaBs"> 2</label></div>
    <div><label><input type="radio" value="3" name="categories.0.type" id="ThtzByDbciAChSaBs"> 3</label></div>
</div>

Hello @fabienb4, Thanks for your work in this.

There's a new version of autoform (6.2.0) but I can't cleanly upgrade to it until you upgrade this one accordingly. Here's the error message I got while trying to force that upgrade:

error: Potentially incompatible change required to top-level dependency: aldeed:autoform 5.8.1, was 6.2.0.
Constraints on package "aldeed:autoform":
* aldeed:[email protected] <- fabienb4:autoform-semantic-ui 0.9.3

Hi,

after updating from 0.5.0 to 0.7.2 I experienced the following issue:

When the value of a select control (Semantic dropdown) has changed, the Autoform formValues would not be reactively updated.

I traced the error down to the select control not emitting change events on the hidden input control to which Autoform is listening.

I added an onChange hook to the dropdown as follows, which fixed the problem:

Template.afSelect_semanticUI.onRendered(function() {
    var inputControl = this.$('[data-schema-key]');
  this.$(this.firstNode).dropdown(_.extend({
        fullTextSearch:         this.data.atts.fullTextSearch || false,
        allowAdditions:         this.data.atts.allowAdditions || false,
        maxSelections:          this.data.atts.maxSelections || false,
    allowCategorySelection: this.data.atts.allowCategorySelection || false,
        useLabels:              this.data.atts.useLabels === false ? false : true,
        onChange: function (event) { inputControl.trigger('change',{ target: inputControl }); }
    }, this.data.atts.settings));
});

Have I missed out something or is that a bug? If yes, I would send a pull request...

Now you cant set custom attribute, options array elements have only value and label ...

When using the #autoForm option with afQuickField, boolean values render as plain checkboxes.

{{#autoForm collection="Posts" id="postForm" type="insert"}}
  {{> afQuickField name='boolField'}}
{{/autoForm}}

renders as

<input type="checkbox" value="true" name="boolField" id="BX57oMALTWTzXQdZj" data-schema-key="boolField">

I noticed that for boolean values the checkbox doesn't work without manually initializing it in javascript.
Ex:

Template.name.onRendered(function(){
  $('.ui.checkbox').checkbox();
});

It would be nice if this was either done automatically or was included in the documentation.

Hello, thank you very much for your plugin.
Is there a way to put two field on the same line? (like when using semantic "two fields")
Cheers,

Schema like

logo: {
        type: String,
        label: 'Logo',
        autoform: {
            afFieldInput: {
                type: 'cfs-file',
                collection: 'images',
                accept: 'image/*'
            },
            afFormGroup: {
                'formgroup-class': 'inline'
            }
        }
    }

generates an empty input field

@METEOR1.2

<div class="ui segment">
      {{#autoForm id="commentForm" type="insert" collection=Collections.Comments template="semanticUI"}}
        <div class="ui attached segment">
        {{> afQuickField name="rating" placeholder="Rate this chapter" useLabels=false}}
        {{> afQuickField name="text" useLabels=false search=true}}
        </div>
        <div class="ui two bottom attached buttons">
          <button type="submit" class="ui positive button">Submit</button>
          <button type="reset" class="ui negative button">Reset</button>
        </div>
      {{/autoForm}}
    </div>

I have a route to an autoform that is using afSelect_semanticUI. When this route is loaded (page load -- entering the URL in the address bar), it always displays default text -- in other words the value of {{this.atts.placeholder}}. This is regardless of whether a value is already set.

Now, if the same route is loaded differently; using FlowRouter.go() or loaded within a modal (no page refresh), this is not a problem, and if values exist -- it displays the proper values.

The submit button in a {{> quickForm}} renders like this:

<button type="submit" class="btn btn-primary">Submit</button>

It should have the class "ui button" instead.

Hey @fabienb4 looks like the flag icons are not working.

My example:

                { label: __('english-usa'), value: 'en', icon: 'us flag' },
                { label: __('portuguese-brazil'), value: 'pt', icon: 'br flag' },

And it renders:

Seems like it's always rendering the first flag (Andorra / ad) in the sprite or something like that.

For reference: http://semantic-ui.com/elements/flag.html