prabhuignoto / smart-tagz Goto Github PK

I want to dynamically update my source array, but in the tests, I did looks like the :source isn't reactive or I'm missing something?

I am trying have the smart-tagz input area get focus when the component is being displayed (via v-if). With the following code snippets, the console.log shows the component was found but the cursor doesn't go to the input area:

<script setup lang="ts">
[snip]
const editTags = (photoId: number, event: any) => {
  editing.value = photoId
  const element = document.getElementById('tagEditor');
  console.log(element)
  if (element) {
    element.focus();
  }
}
[snip]
</script>
<template>
[snip]
            <smart-tagz
                v-if="editing == photo['photo_id']"
                id="tagEditor"
                :on-changed="tagChanged"
                editable
                inputPlaceholder="Enter tags ..."
                :allowPaste="{delimiter: ','}"
                :allowDuplicates="false"
                :maxTags="20"
                :defaultTags="photo['tags']"
                :class-names="{
                  tag_name: 'tag_name_custom'
                }"
              />
[snip]
</template>

In the log output of element I can drill down into tagEditor. Is the input area something I can/should explicitly address in the .focus()?

Hi!, thanks for sharing!

I try with your work in ts...
I have this error:

smart-tagz.esm.js:4 Uncaught (in promise) SyntaxError: Invalid regular expression: /^c++$/: Nothing to repeat at new RegExp (<anonymous>)

Trying to add a tag: c++ throws me an error, also unable to select c++ from sources

i have an array name defaultData , i tried to do sth like :default-tags = "defaultData" , i noticed that it read the array into default-tags , but the tagsData doesnt read the data

When trying to import the css file like the documentation suggests:

import "smart-tagz/dist/smart-tagz.css";

The import fails and the file is not found. Upon inspecting the node_modules directory, the css file is not there, instead the only css file is in the assets/ directory, called output-{hash}.css

Downgrading to version 0.3.2 fixed this for me

When I use smart-tagz in the form of elementPlus, adding a tag with the Enter key will replace the previous tag. My code:

<el-form
:label-position="labelPosition"
label-width="100px"
:model="formLabelAlign"

<el-form-item label="Tag">
  <smart-tagz
input-placeholder="Select Countries ..."
:default-tags="['United Kingdom', 'Uruguay', 'Uzbekistan', 'Venezuela', 'Vietnam', 'Virgin Islands (US)', 'Yemen', 'Zambia', 'Zimbabwe']"

/>

How to reproduce
Paste the following text on the codesandbox
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue massa accumsan accumsan fringilla. Fusce tempor, ipsum non mollis pellentesque, lorem mauris posuere sapien, lacinia placerat metus enim et nulla. Donec lacinia purus vel blandit dictum. Quisque gravida dictum sagittis. Curabitur vitae nulla magna. Integer fringilla nisi eget tellus laoreet dignissim vitae eget est. Vestibulum facilisis ultrices magna, sit amet convallis neque scelerisque id. Nulla accumsan velit sit amet vestibulum condimentum. Proin vel lorem id ipsum convallis porta non sed enim. Nunc faucibus odio scelerisque tortor interdum hendrerit. Sed consequat nisi non eleifend sodales.

It throws the following error:

TypeError:
Cannot read property 'delimiter' of null
Proxy.handlePaste
https://pd32g.csb.app/node_modules/smart-tagz/dist/smart-tagz.esm.js:527:72
e.tagsData.length.e.maxTags.e.readOnly.onPaste.n.<computed>.n.<computed>
https://pd32g.csb.app/node_modules/smart-tagz/dist/smart-tagz.esm.js:611:49
    at callWithErrorHandling (https://pd32g.csb.app/node_modules/
vue/runtime-core/dist/runtime-core.esm-bundler.js:801:18
    at callWithAsyncErrorHandling (https://pd32g.csb.app/node_modules/
vue/runtime-core/dist/runtime-core.esm-bundler.js:809:17
    at HTMLInputElement.invoker (https://pd32g.csb.app/node_modules/
vue/runtime-dom/dist/runtime-dom.esm-bundler.js:346:56

I have this function which will tell me every time any smart-tagz changes:

function tagChanged(result: string[]) {
  console.log('tags changed: ' + result)
}

I have many smart-tagz on the page. How do I determine which one caused the change? I tried passing additional arguments in the tagChanged call but had no success and am not clear if that is the path to take.

Let me know how to accomplish this.

Hi, i'm new with vue but i tried to use your component and I don't understand how I can get data when I add a new tag.
can you explain how we can do that please ?

I expect this is a general html/css question so please feel free to give general pointers.

Ideally I want to make the tags smaller but starting with color changing. I have this in my .vue file but nothing changes in the <smart-tagz> in the template:

<style scoped>
.smart-tagz {
  color: green;
  background-color: orange;
}
</style>

What am I missing?

Excellent library, but I cannot for the life of me figure out how to access the tags that are created. There seem to be no examples in the documentation or examples where the tags are exposed to the external application.

I figured I could write something like <smart-tagz v-model="tags" /> and this would update my application's local tags variable, but this doesn't seem to be the case. Looking through the source code, I cannot figure out what prop (if any) exposes the tag contents.

Could you provide an example of how to get a two-way binding with an external tags array?

Hello,

We've tried to activate or update your repository on Depfu and couldn't find any supported dependency files. If we were to guess, we would say that this is not actually a project Depfu supports and has probably been activated by error.

Monorepos

Please note that Depfu currently only searches for your dependency files in the root folder. We do support monorepos and non-root files, but don't auto-detect them. If that's the case with this repo, please send us a quick email with the folder you want Depfu to work on and we'll set it up right away!

How to deactivate the project

• Go to the Settings page of either your own account or the organization you've used
• Go to "Installed Integrations"
• Click the "Configure" button on the Depfu integration
• Remove this repo (prabhuignoto/smart-tagz) from the list of accessible repos.

Please note that using the "All Repositories" setting doesn't make a lot of sense with Depfu.

If you think that this is a mistake

Please let us know by sending an email to [email protected].

This is an automated issue by Depfu. You're getting it because someone configured Depfu to automatically update dependencies on this project.

I thought on-changed was an event so I made this:

:on-changed="tagsChanged(locale, $event)"

then I realized the on-changed is a prop...

I would need an event with tags value, so I can handle value changes according to locale..

Thank you in advance

Do we have more options for the styling props other than the mentioned ones here?
<smart-tagz class="form-control keyword-input" input-placeholder="Search For Keywords" :on-changed="handleChangeTag" :theme="{ primary: '#f1f5f9', background: '#bdbdbd', tagTextColor: '#000', }" />
Currently, we have only these 3 styling props.

<smart-tagz
    input-placeholder="Enter names ..."
    editable
    :default-tags="names_list"
    :on-changed="updateNames"
    @keypress.enter.prevent
    @click.prevent
/>

also added a button to add names

<button @click.prevent="addNewName" >TEST</button>

names_list is just an [] declared in the data section.

with the handler being

methods: {
    addAltName() {
        this.names_list.push("TEST NAME")
    },
}

When I press TEST.....the list updates, but smart-tagz does not show any changes.

Did I miss something here?

In this function handleAddTag, tagsCreated.value is incrementing event there is no value entered.

Hi,
thanks for making the library it seems nice and easy to use, other than this one hiccup

I am creating a site to store properties and want tags with them using Vue.js 3

If loading a new property i have a list of autocomplete entries to select from prefilled into :sources="existingtags" this gets set after the page is loaded in the created() method

if loading an existing entry I have the same list of autocomplete entries and a potential list of 0-many already selected tags into :defaultTags="selectedtags"

This doesn't seem to work at all, I can add items through the gui from the list of autocomplete entries though

When trying to upsert(insert or update) i try to retrieve the list of currently selected items using this.selectedtags which is always empty

Can you tell me what I'm doing wrong here? as it seems to be basic functionality to be able to set and retrieve existing tags, I did see a similar issue where it was suggested to use onChanged event but I need the existing values when no change is detected as well as they could change something else on the form I still need the current tag values when onChanged wouldn't have triggered and I need to be able to manually in code set the current values that are selected

I'm using the component implementation, below is a simplified version of the code with just the smart-tags content

<template>
    <div class="col-10">
        <div class='col-9' id='add-property-example'>
            <h3>New Property</h3>
            <form id="add-a-property">
                <label for="tags">Tags</label>
                <smart-tagz 
                    @keypress.enter.prevent 
                    @click.prevent 
                     autosuggest
                     editable
                     inputPlaceholder="Select features ..." 
                     :allowPaste="{delimiter: ','}" 
                     :allowDuplicates="false" 
                     :defaultTags="selectedtags"
                     :sources="existingtags"
                     :maxTags="20" 
                     :theme="{
                        primary: '#545454',
                        background: '#bdbdbd',
                        tagTextColor: '#fff',
                     }" />
                <button type='button' class='btn btn-warning save-property' @click='upsertProperty'>Save</button>
            </form>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import { SmartTagz } from "smart-tagz";
import "smart-tagz/dist/smart-tagz.css";

export default {
  name: 'main',
  components: {
    SmartTagz,
  },  
  data() {
        return {
            existingtags: [],
            selectedtags: []
        }
    }
  },
  created() {
    this.getAvailableTags();
  },
    methods: {
      getAvailableTags() {     
        axios.get('house/includes/server_processing.php?attributes=true').then((response) => {
            console.log("Main: "+response);
            for (let i = 0; i < response.data.length; ++i)
            {
                var item = response.data[i];
                this.existingtags.push(item.name);
            }            
        }).catch(function(error) {
            // handle error
            console.log(error);
        });
    },
        addNewHouse() {
            console.log("Main: add new house");
            this.selectedtags = [];
        },
        removeProperty(id) {
            this.deleteHouse(id);
            this.emitter.emit("deleteHouse", id);
        },
        openHouse(id) {
            if (id > 0) {
                console.log("Main: open house for id " + id);
                axios.get('house/includes/server_processing.php?houseid=' + id).then((response) => {
                    console.log("Main: "+response);
                    if (response.data != null) {                       
                        this.selectedtags = response.data.tags ?? [];
                    }                    
                }).catch(function(error) {
                    // handle error
                    console.log("Main: "+error);
                });
            }
        },
        upsertProperty() {
            if (isEmpty(this.name) == false) {
                var data = {                    
                    tags: this.selectedtags?.join(",") ?? [],
                };
                axios.post('house/includes/server_processing.php?upsertproperty=true', data).then((response) => {
                    if (response.data.saved == true) {
                        console.log("Main: House saved, refreshing left nav and hiding house form");
                        
                       console.log("Main: Update property list in left nav now");
                    }
                    console.log("Main: "+response);
                }).catch(function(error) {
                    // handle error
                    console.log("Main: "+error);
                });
            }
        },
        tagsOnChanged(tags) {
            console.log("Main: tags changed " + tags);
        }
    }
}
</script>

Thanks for any help

I am trying to reset all the tags written on the samrt-tagz input. However, even though I set the defautl-tags to an empty array I cannot do so.
here is the codesandbox for the problem I am facing.