Category: javascript

I wanted to have the ability to download a csv file stored in s3 from a browser, so I wrote the following code using FileSaver.js.

import { saveAs } from 'file-saver';
  
const downloadUrl = () => {
    saveAs(
      'https://-----s3 url--- ',
      'filename'
    )
  }

<button onClick={downloadUrl}>click to download</button>

It works in chrome and firebox, but only in safari on Mac, the file is not downloaded and the page just transitions.
And there is garbled text.

In order to solve this problem
I tried other methods like the following, but they did not work.

  <a
      href='https://-----s3 url--- '
      download
              >
      click to download
   </a>

Is there a better way to figure out this problem?

Thank you.

I am using vuetify with vuejs to add a sidebar to my web app using the <v-navigation-drawer> component. Everything works as expected, however, when I click outside the sidebar component, I get a warning about mutating state (the drawer variable). The warning does not happen if I close the sidebar by using the button that I have added to it. You can see the warning here:
warning regarding state

You can see my code here:

// sidebar.vue

<template>
  <v-navigation-drawer
    v-if="li"
    v-model="drawer"
    clipped="clipped"
    app
    height="100vh"
    floating
    disable-route-watcher
    fixed
    temporary
  >
    <v-list-item class="px-2">
      <v-list-item-avatar>
        <v-img src="/assets/logo.svg" contain alt="logo"></v-img>
        <!-- <v-icon>mdi-account</v-icon> -->
      </v-list-item-avatar>
      <v-list-item-title>{{ username }}</v-list-item-title>
      <v-btn icon @click.stop="toggleDrawer">
        <v-icon>mdi-chevron-left</v-icon>
      </v-btn>
    </v-list-item>
    <v-divider></v-divider>
    <v-list dense>
      <v-list-item
        v-for="item in items"
        :key="item.title"
        link
        @click="changeRoute(item.route)"
      >
        <v-list-item-icon>
          <v-icon>{{ item.icon }}</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
    <v-spacer></v-spacer>
    <v-list dense style="position: absolute; bottom: 0; width: 100%">
      <v-list-item @click="logout">
        <v-list-item-icon>
          <v-icon>mdi-logout-variant </v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>Sign out</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
      <v-list-item @click="toggleDarkMode">
        <v-list-item-icon>
          <v-icon>mdi-theme-light-dark </v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>{{ darkModeButtonText }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from "vue-property-decorator";

@Component
export default class Sidebar extends Vue {
  @Prop() li!: boolean; // li = Logged In
  @Prop() username!: string;
  @Prop() darkModeButtonText!: string;
  @Prop() darkModeState!: boolean;
  @Prop() drawer!: boolean;
  @Prop() clipped!: boolean;

  @Emit("toggleDarkMode")
  toggleDarkMode() {
    return;
  }

  @Emit("logout")
  logout() {
    console.log(""); // method needs something in to avoid prettier rules, doesn't need to do anything, just emits
  }

  @Emit("toggleDrawer")
  toggleDrawer() {
    return;
  }

  changeRoute(newPath: string) {
    if (this.$route.path !== newPath) {
      this.$router.push(newPath);
    }
    return;
  }

  data() {
    return {
      items: [
        {
          title: "New Assessment",
          icon: "mdi-molecule-co2",
          route: "/assessment",
        },
        { title: "Home", icon: "mdi-home", route: "/landing" },
        { title: "About", icon: "mdi-information-outline", route: "/about" },
      ],
    };
  }
}
</script>

The drawer variables is defined in data() in the parent component of sidebar.vue and I’m using @Emit to change the variable state (the toggleDrawer() function).

Is there anything obviously wrong that I’m doing? I was following the examples HERE

I should mention I’m new to vuejs and vuetify.

Thanks in advance.

I have over 20 years experience in PHP programming, started and tried to learn Node Js in almost half year, but still not yet understanding how to use it…

I saw many samples on learning Node Js with ExpressJs, which is a framework can be served a website/app on a port (e.g. 3000). But, would there a way working without ExpressJs? I tried to upload that files directly to server, but it turned out loading index.html, not index.js

I also tried to call it as Module in my existing html file, but while calling ‘import’ it fire an error

Relative module specifiers must start with “./”, “../” or “/”.

Since I don’t want to separate main site (:80) and node js (:3000) to different sites, how can I get it work together? Do I need to rewrite whole the existing website (in PHP) to node js and map :3000 to :80 for that?

Is it a general way most node js app running?

Thanks so much.

react native app If I want to launch amazon prime video application from my application but the app is already installed my mobile? how can I launch android or IOS mobile .

I need a function that can calculate the visible area of ​​an element that is currently visible on the screen without the part hidden by overflow: scroll, position: absolute etc.

That is, the result of this function getVisiblePart(el) will be Visible Rect is: {x: 10, y: 20, height: 50, width: 700}

Background of the question:
The need for such a function is due to a feature of the W3C specification for working with webdriver: https://w3c.github.io/webdriver/webdriver-spec.html#element-interactability

An element’s in-view centre point is the centre point of the area of the first DOM client rectangle that is inside the viewport.

Frameworks like selenoid/selenide for e2e tests use the w3c principle to calculate the center of the visible element to move the cursor to it, while allowing you to specify an offset. The main problem is to find out the actual size of the visible area of ​​the element at the moment, in order to calculate the correct offsets, for example, to calculate the upper left border.

The solution to this problem for selenoid/selenide would be:

Selenide.actions().moveToElement(el, getVisiblePart(el).width / -2, getVisiblePart(el).height / -2)

I have read a lot of similar topics, for example:

• How can I tell if a DOM element is visible in the current viewport? (it only answers the question whether the element has been seen or not)
• How to check if element is visible after scrolling? (same)
• Is it possible to programmatically determine whether W3C action commands are used? (close but no working answer)

All answers either give a boolean whether the element is visible, or fail to take into account that the element may be partially hidden overflow: scroll

Real Example with scrolls (I need to find visible blue rect position with any scroll position):

.a {
  height: 250px;
  overflow: scroll;
  padding-top: 100px;
  background: yellow;
}
.b {
  height: 500px;
  overflow: scroll;
}
.c {
  height: 1000px;
  background: blue;
}
#target {
  border: 2px dashed red;
  position: absolute;
  pointer-events: none;
  transform: translate(-1px,-1px); /*because of border*/
}

<div class="a">
  <div class="b">
    <div class="c" />
  </div>
</div>
<div id="target" />

In answer to this question, I have already partially solved this problem, achieved the result I needed using Intersection Observer API, but I do not consider this solution to be good, at least because it is not synchronous with when the function is called and on the issue of cross-browser compatibility.

This is my first post here and I need help with one homework task, that I cant solve. The task is in the loops section.

Problem 4. Smaller, greater or equal?
Write a program that reads from the console a sequence of n integer numbers and returns these numbers on a single line with the correct sign (<, > or =) between the numbers.

I guess we should do some for to rotate n times and compare the numbers, but I can’t figure out the code. Please share some tips for solving the task.

I learning javascript, react, and i tried to count from 10 to 0, but somehow the timer only run to 9, i thought setInterval run every n time we set (n can be 1000ms, 2000ms…)

Here is the code

import "./styles.css";
import React, { useState } from "react";
export default function App() {
  const [time, setTime] = useState(10);

  const startCountDown = () => {
    const countdown = setInterval(() => {
      setTime(time - 1);
    }, 1000);
    if (time === 0) {
      clearInterval(countdown);
    }
  };

  return (
    <div>
      <button
        onClick={() => {
          startCountDown();
        }}
      >
        Start countdown
      </button>
      <div>{time}</div>
    </div>
  );
}

Here is the code:
https://codesandbox.io/s/class-component-ujc9s?file=/src/App.tsx:0-506

Please explain for this, i’m so confuse, thank you

in my simple form, I use this simple client-side validation.
The validation start when I press SUBMIT (change style input and span of form).

How can I validate the input even when the user fills in the field without going through the SUBMIT?

STYLE

<style>
.msc-login-form-input {
    display: flex;
}
.msc-login-form-input.success > input {
  color: #3F4254;
  background-color: #ffffff;
}
.msc-login-form-input.errore > input {
    background-color: #4d40ff;
    color: #ffffff;    
}
.msc-login-form-input.errore > input::-webkit-input-placeholder {
  color: #ffffff;
}
.msc-login-form-input.errore > input:-ms-input-placeholder {
  color: #ffffff;
}
.msc-login-form-input.errore > input::placeholder {
  color: #ffffff;
}
.msc-login-form-input > span {
    width: 35px;
    background-color: rgba(0,0,0,0.05);
    min-height: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
}
.msc-login-form-input > span::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "f100";
}
.msc-login-form-input.success > span::before {
  content: "f00c";
    color:#FF1493;
}
.msc-login-form-input.errore > span::before {
  content: "f00d";
    color:#4d40ff;
}
</style>

HTML and JS
This script checks the internal elements of the form. If, when I click on SUBMIT the fields are empty, then, it highlights the inputs with different styles and loads me different icons in the SPANs tag.

<form id="signinform" method="post" action="#" class="wp-user-form" autocomplete="off">
  <div class="msc-login-form-input">
    <input type="text" name="log" value="" id="user_login" placeholder="prova" required/>
    <span></span> </div>
  <div class="msc-login-form-input">
    <input type="password" name="pwd" value="" id="user_pass" placeholder="prova" required/>
    <span></span> </div>
  <div class="msc-login-form-input-sendh">
    <input type="submit" id="submit-login" name="submit-login" value="Submit" class="user-submit" />
  </div>
<script>
// ___________________________________________________________________
// validate contact form
const myform = document.getElementById('signinform');
myform.noValidate = true;

// custom form validation
myform.addEventListener('submit', validateForm);

// stop submission of valid form for demo
myform.addEventListener('submit', e => {
  
  e.preventDefault();

  const fd = new FormData(e.target);
  for (const [name, value] of fd.entries()) {
    console.log(name + ': ' + value);
  }
  
});


// form validation
function validateForm(e) {

  const
    form = e.target,
    field = Array.from(form.elements);
  
  // reset fields
  field.forEach(i => {
    i.parentElement.classList.remove('errore');
    i.parentElement.classList.add('success');
  });
  
  if (!form.checkValidity()) {

    // form is invalid - cancel submit
    e.preventDefault();
    e.stopImmediatePropagation();

    // apply invalid class
    field.forEach(i => {

      if (!i.checkValidity()) {

        // field is invalid - add class
        i.parentElement.classList.add('errore');
        i.parentElement.classList.remove('success');
      }
    });
  }
}
</script>
</form>

Thanks

I want to make a slider with a scrollable right-justified image and text like in the image, how can I do this? https://prnt.sc/26mtj6v

I am in the process of building a telemetry parser. The way the telemetry data is set up is it includes a ascii trigger byte, 1-8 ascii data bytes and “>” as the terminator byte. One of the trigger bytes is a backslash “” (why they chose to include the back slash character as one of the triggers is beyond me).

Here is an example of the raw telemetry data:

{040>@2>#0010>~AB---->( 0213>-001>?079>! 212>=KM6ZFL>01>?079>! 212>=KM6ZFL>
{045>@2>#0014>~AB---->( 0072>-001>?079>! 212>=KM6ZFL>
{046>@4>#0016>~AB---->( 0033>-001>?079>! 212>=KM6ZFL>
{043>@5>#0022>~1B---->(-0029> 004>%04679>^0660>[025>?079>! 209>=KM6ZFL>

Telemetry data format specification

I Have built some code to separate the data but as soon as I process the data the backslash has been striped

function telemetryParser(data) {
  TelemetryData = data.split(">");
  console.log(TelemetryData);
  for (var i = 0; i < TelemetryData.length; i++) {
    triggerParser(TelemetryData[i])
  }
  // return altitude;
}

function triggerParser(data){

  const triggers = ["#", "{","<","(","\","@","~","!","=","?","%","^","["]
  const element = ["flightTime","Altitude100","altitude","velocity","acceleration","flightPhase","channelStatus","temperature","callSign","voltage","apogee","maxVolocity","maxAcceleration"]
  for (var j = 0; j < triggers.length; j++) {
    if (data.split(triggers[j])[1]) {
      console.log(element[j] +":"+ data.split(triggers[j])[1] )
    }
  }

}

Result:

telemetryParser("{040>@2>#0010>~AB---->( 0213>-001>?079>! 212>=KM6ZFL>01>?079>! 212>=KM6ZFL>")

parser.js:3 (14) ['{040', '@2', '#0010', '~AB----', '( 0213', '-001', '?079', '! 212', '=KM6ZFL', '01', '?079', '! 212', '=KM6ZFL', '']0: "{040"1: "@2"2: "#0010"3: "~AB----"4: "( 0213"5: "-001"6: "?079"7: "! 212"8: "=KM6ZFL"9: "01"10: "?079"11: "! 212"12: "=KM6ZFL"13: ""length: 14[[Prototype]]: Array(0)
parser.js:26 Altitude100:040
parser.js:26 flightPhase:2
parser.js:26 flightTime:0010
parser.js:26 channelStatus:AB----
parser.js:26 velocity: 0213
(expecting acceleration: -001 here)
parser.js:26 voltage:079
parser.js:26 temperature: 212
parser.js:26 callSign:KM6ZFL
parser.js:26 voltage:079
parser.js:26 temperature: 212
parser.js:26 callSign:KM6ZFL
undefined

How would I keep or change the backslash so I don’t lose track of the data as the back slash is the only way I have to identify the data?

The following JavaScript code will work in both Safari and Chrome, but with different results.
I would like to know why this is happening.

<script>
class Bar {
    'use strict';
    baz() {
        return new Promise((resolve) => {
            resolve();
        }).then(() => {
            return [2];
        });
    }
}
new class {
    'use strict';
    #foo = 1;
    constructor() {
        console.log(this.#foo); // 1
        (new Bar()).baz()
            .then((res) => {
                console.log(res);   // [2]
                console.log(this.#foo); // 1
                [this.#foo] = res;
                console.log(this.#foo); //*** Chrome: 2, Safari: 1 ***
            });
    }
}
</script>

Note that if you declare #foo as foo instead of private static methods, the final result will be 2 for both.

Chrome 97.0.4692.99
Safari 15.3 (17612.4.9.1.5)
macOS Monterey Ver. 12.2
MacBook Air (M1,2020)

I wrote this code to generate XML .keylayout files according to the docs:

const ANSI = {
  esc: 53,
  f1: 122,
  f2: 120,
  f3: 99,
  f4: 118,
  f5: 96,
  f6: 97,
  f7: 98,
  f8: 100,
  f9: 101,
  f10: 109,
  f11: 103,
  f12: 111,
  f13: 105,
  f14: 107,
  f15: 113,
  '`': 10,
  1: 18,
  2: 19,
  3: 20,
  4: 21,
  5: 23,
  6: 22,
  7: 26,
  8: 28,
  9: 25,
  0: 29,
  '-': 27,
  '=': 24,
  delete: 51,
  tab: 48,
  q: 12,
  w: 13,
  e: 14,
  r: 15,
  t: 17,
  y: 16,
  u: 32,
  i: 34,
  o: 31,
  p: 35,
  '[': 33,
  ']': 30,
  '|': 42,
  a: 0,
  s: 1,
  d: 2,
  f: 3,
  g: 5,
  h: 4,
  j: 38,
  k: 40,
  l: 37,
  ';': 41,
  "'": 39,
  'return': 36,
  z: 6,
  x: 7,
  c: 8,
  v: 9,
  b: 11,
  n: 45,
  m: 46,
  ',': 43,
  '.': 47,
  '/': 44,
}

const STANDARDS = {
  ANSI
}

generate.ANSI = 'ANSI'
generate.JIS = 'JIS'
generate.ISO = 'ISO'

function generate({
  name,
  keyboards = []
}) {
  const xml = []
  xml.push(`<?xml version="1.1" encoding="UTF-8"?>`)
  xml.push(`<!DOCTYPE keyboard SYSTEM "file://localhost/System/Library/DTDs/KeyboardLayout.dtd">`)
  xml.push(`<keyboard group="126" id="0" name="${name}" maxout="2">`)
  xml.push(`  <layouts>`)
  xml.push(`    <layout first="0" last="17" mapSet="ANSI" modifiers="mod"/>`)
  xml.push(`    <layout first="18" last="18" mapSet="JIS" modifiers="mod"/>`)
  xml.push(`    <layout first="21" last="23" mapSet="JIS" modifiers="mod"/>`)
  xml.push(`    <layout first="30" last="30" mapSet="JIS" modifiers="mod"/>`)
  xml.push(`    <layout first="33" last="33" mapSet="JIS" modifiers="mod"/>`)
  xml.push(`    <layout first="36" last="36" mapSet="JIS" modifiers="mod"/>`)
  xml.push(`    <layout first="194" last="194" mapSet="JIS" modifiers="mod"/>`)
  xml.push(`    <layout first="197" last="197" mapSet="JIS" modifiers="mod"/>`)
  xml.push(`    <layout first="200" last="201" mapSet="JIS" modifiers="mod"/>`)
  xml.push(`    <layout first="206" last="207" mapSet="JIS" modifiers="mod"/>`)
  xml.push(`  </layouts>`)

  xml.push(`  <modifierMap id="mod" defaultIndex="0">`)
  keyboards.forEach(keyboard => {
    keyboard.configurations.forEach((config, i) => {
      const keys = []
      if (config.shift) {
        keys.push(`anyShift${config.shift === 'optional' ? '?' : ''}`)
      }
      if (config.option) {
        keys.push(`anyOption${config.option === 'optional' ? '?' : ''}`)
      }
      if (config.caps) {
        keys.push(`caps${config.caps === 'optional' ? '?' : ''}`)
      }
      if (config.control) {
        keys.push(`control${config.control === 'optional' ? '?' : ''}`)
      }
      xml.push(`    <keyMapSelect mapIndex="${i}">`)
      xml.push(`      <modifier keys="${keys.join(' ')}"/>`)
      xml.push(`    </keyMapSelect>`)
    })
  })

  xml.push(`  </modifierMap>`)

  const actions = []

  keyboards.forEach(keyboard => {
    xml.push(`  <keyMapSet id="${keyboard.standard}">`)
    keyboard.configurations.forEach((config, i) => {
      xml.push(`    <keyMap index="${i}">`)
      config.bindings.forEach(binding => {
        if (binding.sequence.length > 1) {
          const [start, ...shifts] = binding.sequence
          const code = STANDARDS[keyboard.standard][start]

          xml.push(`      <key code="${code}" action="${i}_${shifts[0]}"/>`)
          const action = []
          action.push(`    <action id="${i}_${shifts[0]}">`)
          action.push(`      <when state="none" next="${shifts[0]}" />`)
          while (shifts.length - 1) {
            action.push(`      <when state="${shifts[0]}" next="${shifts[1]}" />`)
            shifts.shift()
          }
          action.push(`      <when state="${shifts[0]}" output="${binding.result}" />`)
          action.push(`    </action>`)
          actions.push(...action)
        } else {
          const code = STANDARDS[keyboard.standard][binding.sequence[0]]
          xml.push(`      <key code="${code}" output="${binding.result}"/>`)
        }
      })
      xml.push(`    </keyMap>`)
    })
    xml.push(`  </keyMapSet>`)
  })

  if (actions.length) {
    xml.push(`  <actions>`)
    xml.push(...actions)
    xml.push(`  </actions>`)
  }

  xml.push(`</keyboard>`)

  return xml.join('n')
}

const string = generate({
  name: 'MyLang',
  keyboards: [
    {
      standard: generate.ANSI,
      configurations: [
        {
          control: true,
          bindings: [
            {
              sequence: ['e'],
              result: 'e'
            },
            {
              sequence: ['`', 'e'],
              result: 'é'
            }
          ]
        }
      ]
    }
  ]
})

console.log(string)

With this specific input, it outputs:

<?xml version="1.1" encoding="UTF-8"?>
<!DOCTYPE keyboard SYSTEM "file://localhost/System/Library/DTDs/KeyboardLayout.dtd">
<keyboard group="126" id="0" name="MyLang" maxout="2">
  <layouts>
    <layout first="0" last="17" mapSet="ANSI" modifiers="mod"/>
    <layout first="18" last="18" mapSet="JIS" modifiers="mod"/>
    <layout first="21" last="23" mapSet="JIS" modifiers="mod"/>
    <layout first="30" last="30" mapSet="JIS" modifiers="mod"/>
    <layout first="33" last="33" mapSet="JIS" modifiers="mod"/>
    <layout first="36" last="36" mapSet="JIS" modifiers="mod"/>
    <layout first="194" last="194" mapSet="JIS" modifiers="mod"/>
    <layout first="197" last="197" mapSet="JIS" modifiers="mod"/>
    <layout first="200" last="201" mapSet="JIS" modifiers="mod"/>
    <layout first="206" last="207" mapSet="JIS" modifiers="mod"/>
  </layouts>
  <modifierMap id="mod" defaultIndex="0">
    <keyMapSelect mapIndex="0">
      <modifier keys="control"/>
    </keyMapSelect>
  </modifierMap>
  <keyMapSet id="ANSI">
    <keyMap index="0">
      <key code="14" output="e"/>
      <key code="10" action="0_e"/>
    </keyMap>
  </keyMapSet>
  <actions>
    <action id="0_e">
      <when state="none" next="e" />
      <when state="e" output="é" />
    </action>
  </actions>
</keyboard>

My question is around how the “actions state machine” works, if I have it right. What do I need to change about my state machine implementation?

I have two prime-ng multi-select which are dependent on one another.

<div class="input-field-class">
    <label class="custom-label">Phase of Development</label>
    <p-multiSelect defaultLabel="Select Phase" [options]="listPhase" optionLabel="label" [(ngModel)]="selectedPhases"
      (ngModelChange)="filterProfiles($event)"></p-multiSelect>
  </div>
  <div class="input-field-class">
    <label class="custom-label">Related activity</label>
    <p-multiSelect defaultLabel="Select Activity" [options]="activityList" optionLabel="label" [(ngModel)]="selectedActivities"
      (ngModelChange)="filterProfiles($event)"></p-multiSelect>
  </div>

Component Code is:

filterProfile() {
let selectedPhasesById = [];
let selectedActivitiesById = [];
let activitiesByPhases;

if (this.selectedPhases.length > 0) {
  selectedPhasesById = this.selectedPhases.map(c => c.id);
  activitiesByPhases = this.selectedPhases.map(item => {
    return this.listActivityByPhases[item.label].map(function(c) {
      return {label: c.name, value: c.name, id: c.id};
    });
 });
 
 activitiesByPhases = _.flattenDeep(activitiesByPhases);
 this.activityList = [...activitiesByPhases];
} else {
  this.activityList = [];
}
if (this.selectedActivities.length > 0) {
  selectedActivitiesById = this.selectedActivities.map(c => c.id);
}

return {selectedPhasesById, selectedActivitiesById};

}

Whenever I select two values in Phases dropdown, its corresponding values are displayed in Activities dropdown. User can select the value.
But, when I de-select one value in Phases dropdown, then the Activities dropdown label(Select Activity) is not displayed. But there are values in its drop-down.
Dont know what I am doing wrong here.

I have a button which when user click on it, phone numbers will be appear slowly.

Here is the HTML Codes:

<span id="show-phone-numbers" href="#tab4" data-bs-toggle="tab" class="btn btn-success">
   <i class="fe fe-phone-call"></i> Show Phone Number
</span> 

<div class="media margin-top-20" id="phone-number-section" style="display:none">
    <div class="media-body text-center">

         <a href="tel:00000000">
             <p class="btn btn-outline-primary">
                  <i class="fe fe-phone-call"></i>    somephonenumber
             </p>
         </a>
                                                    

         <a href="tel:00000000">
             <p class="btn btn-outline-primary">
                  <i class="fe fe-phone-call"></i>    somephonenumber
             </p>
         </a>
                                                
     </div>
</div>

And here is the scripts:

$("#show-phone-numbers").on("click",function(){
    $("#phone-number-section").toggle("slow");
});

The problem is when I click on the “Show Phone Number” button, I get this error in the console:

enter image description here

And (bootstrap-rtl.js:1031:35) is the code below:

children(element, selector) {
  return [].concat(...element.children).filter(child => child.matches(selector));
},

I did search about the error but I couldn’t find a way which help me to handle this error.

I am using Vuedraggable Component which has a Element.

It gets draggable when click + move the mouse across the screen. After releasing the click from the mouse, I want to get a X,Y coordination where we release the mouse move position.

Here is my sample code,

<draggable class="dragArea list-group" :list="list1" @change="log">
    <div
      v-for="element in list1"
      :key="element.name"
      class="list-group-item"
    >
      <button class="button button--line" @change="down" @click="up">
        {{ element.name }}
      </button>
    </div>
  </draggable>

  import draggable from 'vuedraggable';
  
  export default {
       name: 'test',
       data: () => {
            return {
                list1: [{ name: 'Signature Draggable', id: 1 }],
            }
       },
       methods: {
              down(e) {
                    console.log('>>>>>>>>>>>>>>>>1111121');
                    e.target.offsetLeft - e.clientX, e.target.offsetTop - e.clientY;
              },
             up(event) {
                    console.log('###############1111121');
             }
       }

Kindly help me to get the X,Y Coordination.