Products

[jqwidgetsdev]

Hi Svetoslav,

Ok yeah sorry for bothering you about something so small.

Thanks.

[jqwidgetsdev]

Thanks Svetoslav, your suggestion worked like a charm.

Best regards.

[jqwidgetsdev]

Hi Svetoslav,’

Thanks, yes your suggestion works like a charm.

Best regards.

[jqwidgetsdev]

Hi Svetoslav,

Ok, I see what you are doing, the event is of course firing now.
My example was indeed simple text, but what if the element value is HTML? Which element method should I then be using?

         {
            name: "settings",
            width: "auto",
            template: (element) => {
              console.log(element);
              element.<strong>innerHTML</strong> = <code><smart-button><i class='fa fa-cog' aria-hidden='true' title='Settings'></i></smart-button></code>;
              element.addEventListener("click", () => {
                console.log("click");
              });
            },
          },

Thanks.

[jqwidgetsdev]

Your example helped me a lot! Thanks Svetoslav.

[jqwidgetsdev]

Hi Svetoslav,

Feature request please.

Thanks.

[jqwidgetsdev]

Hi Svetoslav,

Thanks for the example, I understand it now.

BTW the reason I arrived at

form.submitOptions = {
            async: true,
            action: "<omitted>",
            target: "",
            method: "POST"
        };

is because of this https://www.htmlelements.com/docs/form-api/

submit( submitOptions?: any): void
Submits the form.

Arguments
submitOptions?any
Sets the submit options object. The object may have the following properties: async, action, target, method. async determines whether the form will be submitted asynchronously. action determines the submit url, method sets whether the submit is through 'GET' or 'POST'. target determines the submit target.

Maybe the documentation can be updated?

Best regards.

[jqwidgetsdev]

Hi Svetoslav,

Weird, I have used your suggestion, but the event still doesn’t get fired.

Also is there a typo in the event name?
toobarItemClick vs toolbarItemClick

Here is my code

<template>
  <div class="vue-root">
      <smart-editor id="editor"></smart-editor>

  </div>
</template>

<script setup>
import { onMounted } from "vue";
import "smart-webcomponents/source/styles/smart.default.css";
import "smart-webcomponents/source/modules/smart.editor.js";

window.Smart(
  "#editor",
  class {
    get properties() {
      return {
        //Properties
        toolbarItems: [
          {
            name: "settings",
            width: "auto",
            template: "settings"
          }
        ]
      };
    }
  }
);

onMounted(() => {
  const editor = document.getElementById('editor');
  console.log(editor);
  //editor.expandToolbar();

  editor.addEventListener('toobarItemClick', (event) => {
    const detail = event.detail;
    // const value = detail.value;

    console.log(detail)
  })
});

window.onload = function () {
}
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.smart-editor {
  width: 100%;
  height: 100%;
}

@media (max-width: 750px) {
  .smart-editor {
    width: 100%;
  }
}

.options {
  padding: 20px;
  background-color: rgba(191, 191, 191, 0.15);
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 260px;
}

@media (max-width: 750px) {
  .options {
    position: relative;
    top: 30px;
    width: 240px;
    margin: 0 auto;
  }
}

#app,
.vue-root {
  width: 100%;
  height: 100%;
}
</style>

Any suggestions? Thanks in advance.

[jqwidgetsdev]

Hi,

Yes I have seen the documentation. However, when I try this myself, console.log(editorItems); // returns []

Any pointers as to what I am doing wrong?

<template>
  <div class="vue-root">
      <smart-editor id="editor"></smart-editor>

  </div>
</template>

<script setup>
import { onMounted } from "vue";
import "smart-webcomponents/source/styles/smart.default.css";
import "smart-webcomponents/source/modules/smart.editor.js";

window.Smart(
  "#editor",
  class {
    get properties() {
      return {
        //Properties
        toolbarItems: [
          {
            name: "settings",
            width: "auto",
            template: "settings"
          }
        ]
      };
    }
  }
);

onMounted(() => {
  const editorItems = Array.from(document.querySelectorAll('smart-editor-toolbar-item'));
  console.log(editorItems); // returns []
  
  editorItems.forEach(item => {
      console.log(item);
  
      item.addEventListener('toolbarItemClick', (event) => {
         const detail = event.detail,
        //      originalEvent = detail.originalEvent,
        value = detail.value;

      console.log(value);
    })
  })
});
</script>

[jqwidgetsdev]

Hi Svetoslav,

Thanks, the slider shows as expected when the it’s outside a smart form group.
However, when the slider is in a smart form group then the slider appears malformed.

Is this a known issue?

[jqwidgetsdev]

Hi Svetoslav,

Yes, thanks your example helped me a lot.

Best regards.

[jqwidgetsdev]

Hi,

But I cannot chose both horizontal and vertical direction at the same time.
How can I use smart.sortable in a 2×2 grid like the jqwidgets example (https://www.jqwidgets.com/vue/vue-sortable/#https://www.jqwidgets.com/vue/vue-sortable/vue-sortable-displayastable.htm)?

Thanks in advance

[jqwidgetsdev]

I appreciate the example and nuance, thanks Svetoslav!

[jqwidgetsdev]

That won’t work for me. For a given smart-accordion-item I may have 2 sub items, for others 4 sub items.
The height of the sub item must be dynamic. Can you please show me?

• This reply was modified 2 years, 1 month ago by jqwidgetsdev.

[jqwidgetsdev]

For a 2×2 grid, what would the <smart-sortable mode= be?

[Author]

Posts