Vuetify draggable v-treeview Component

vuetify-draggable-treeview

Drag and drop v-treeview (Vuetify Treeview) component.

Live Demo

v-treeview

Installation

yarn add vuetify-draggable-treeview
// @NOTE: This component requires vue, vuetify, vuedraggable as peerDependency.
yarn add vuedraggable

Setup

import VuetifyDraggableTreeview from 'vuetify-draggable-treeview'
Vue.use(VuetifyDraggableTreeview)

// or manually import
VuetifyDraggableTreeview

export default Vue.extend({
  components: {
    VuetifyDraggableTreeview
  }
})

Usage

Basic Example

<template>
<v-draggable-treeview
  group="test"
  v-model="items"
></v-draggable-treeview>
</template>

<script>
export default {
  data() {
    return {
      items: [{ id: 1, name: "hoge", children: [{ id:11, name: "hoge-child1" }] }]
    }
  }
}
</script>

Drag and drop only in children.

<template>
<v-draggable-treeview
  v-model="items"
></v-draggable-treeview>
</template>

<script>
export default {
  data() {
    return {
      items: [{ id: 1, name: "hoge", children: [{ id:11, name: "hoge-child1" }] }]
    }
  }
}
</script>

Using slot

<template>
<v-draggable-treeview v-model="items" group="hoge">
  <template v-slot:prepend="{ item }">
    <v-icon>mdi-file</v-icon>
  </template>
  <template v-slot:label="{ item }">
    <span class="primary--text">{{ item.name }}</span>
  </template>
  <template v-slot:append="{ item }">
    <template
            v-if="item.children != null && item.children.length > 0"
    >
      has {{ item.children.length }} children
    </template>
  </template>
</v-draggable-treeview>
</template>

<script>
export default {
  data() {
    return {
      items: [{ id: 1, name: "hoge", children: [{ id:11, name: "hoge-child1" }] }]
    }
  }
}
</script>

API

Currently, this component dose not support all original v-treeview component’s props, slots, event.

Props

Name Type Default Description
value Object [] items for treeview. item-key, item-text, item-children are not customizable currently. value can be like { id: 1, name: "test", children: []} .
group string null group name for vuedraggable. If this props not provided, drag and drop are enabled only in children.

Events

Name Value Description
input array Emits the array of selected items when this value changes

Slots

Name Props Description
append { item: any, open: boolean } Appends content after label
label { item: any, open: boolean } Label content
prepend { item: any, open: boolean } Prepends content before label

Download Details:

Author: suusan2go

Live Demo: https://v-draggable-treeview.netlify.app/

GitHub: https://github.com/suusan2go/vuetify-draggable-treeview

#vuejs #javascript #vue #vue-js

What is GEEK

Buddha Community

Vuetify draggable v-treeview Component

Vuetify draggable v-treeview Component

vuetify-draggable-treeview

Drag and drop v-treeview (Vuetify Treeview) component.

Live Demo

v-treeview

Installation

yarn add vuetify-draggable-treeview
// @NOTE: This component requires vue, vuetify, vuedraggable as peerDependency.
yarn add vuedraggable

Setup

import VuetifyDraggableTreeview from 'vuetify-draggable-treeview'
Vue.use(VuetifyDraggableTreeview)

// or manually import
VuetifyDraggableTreeview

export default Vue.extend({
  components: {
    VuetifyDraggableTreeview
  }
})

Usage

Basic Example

<template>
<v-draggable-treeview
  group="test"
  v-model="items"
></v-draggable-treeview>
</template>

<script>
export default {
  data() {
    return {
      items: [{ id: 1, name: "hoge", children: [{ id:11, name: "hoge-child1" }] }]
    }
  }
}
</script>

Drag and drop only in children.

<template>
<v-draggable-treeview
  v-model="items"
></v-draggable-treeview>
</template>

<script>
export default {
  data() {
    return {
      items: [{ id: 1, name: "hoge", children: [{ id:11, name: "hoge-child1" }] }]
    }
  }
}
</script>

Using slot

<template>
<v-draggable-treeview v-model="items" group="hoge">
  <template v-slot:prepend="{ item }">
    <v-icon>mdi-file</v-icon>
  </template>
  <template v-slot:label="{ item }">
    <span class="primary--text">{{ item.name }}</span>
  </template>
  <template v-slot:append="{ item }">
    <template
            v-if="item.children != null && item.children.length > 0"
    >
      has {{ item.children.length }} children
    </template>
  </template>
</v-draggable-treeview>
</template>

<script>
export default {
  data() {
    return {
      items: [{ id: 1, name: "hoge", children: [{ id:11, name: "hoge-child1" }] }]
    }
  }
}
</script>

API

Currently, this component dose not support all original v-treeview component’s props, slots, event.

Props

Name Type Default Description
value Object [] items for treeview. item-key, item-text, item-children are not customizable currently. value can be like { id: 1, name: "test", children: []} .
group string null group name for vuedraggable. If this props not provided, drag and drop are enabled only in children.

Events

Name Value Description
input array Emits the array of selected items when this value changes

Slots

Name Props Description
append { item: any, open: boolean } Appends content after label
label { item: any, open: boolean } Label content
prepend { item: any, open: boolean } Prepends content before label

Download Details:

Author: suusan2go

Live Demo: https://v-draggable-treeview.netlify.app/

GitHub: https://github.com/suusan2go/vuetify-draggable-treeview

#vuejs #javascript #vue #vue-js

Juana  O'Keefe

Juana O'Keefe

1599975360

Create an Easy Custom React Hook for Dragging Components

In 2003, noted technologist Murphy Lee presaged our current state of modular component based web applications when he asked:

Wat da hook gon be?

Though adamant that he himself had neither need nor want of hooks, many of the problems web developers face today cannot be solved simply with tracks in the background, their headphones loud and a blunt going round and they gonna rip.

Since the introduction of Hooks in late 2018, they have become a vital part of the React ecosystem, and no wonder, they’re great.

But what is a hook?

A hook can be many things.

Basic hooks provided by React allow you to use stateful logic and lifecycle functions in function components, which prior to their introduction was only available in class based components. There are hooks that allow you to chain callbacks, memoize functions and objects and communicate directly with a ref to the DOM.

And that’s only the hooks provided out of the box by React. Where hooks _really _start to shine is when you build them out. There’s a good chance that any piece of lower level logic you want to reuse can be expressed as a custom hook. The React community knows this and has created many custom hooks that you can use right now.

#components #hooks #react #draggable #react native

How to create a Responsive E-Grocery Website System with Vuetify.JS Vue.JS

In this tutorial we'll learn How to create a Responsive E-Grocery Website System ( web design ).
- Vuetify JS and Vue JS
- Using  Javascript | HTML - CSS 
- Card & Div & Button & Image & Toggle & Grid
- Navbar & Footer & Section
- Material design icons and Font Awsome icons
----------------------- Commande ----------------------------------
vue create egrocery
cd egrocery
vue add vuetify
npm install material-design-icons-iconfont -D
npm install @fortawesome/fontawesome-free -D
npm run serve
#vue #vuetify #egrocery
-------------------------WebSite------------------------------------
https://vuetifyjs.com/en/
https://vuejs.org/

Subscribe: https://www.youtube.com/channel/UClbUBqDWE3kzIHaAQ8IOYuQ/featured 

#vue #vuetify 

Google Maps Draggable Marker Get Coordinates

In this blog post, you will learn how to create google maps draggable marker using Google Maps Javascript API v3, and when you drag the marker position then get coordinates (latitude and longitude) of that location where you place the marker.

How to make a marker draggable?

To allow users to drag a marker to a different location on the map, set the draggable attribute to true in the marker options.

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Place a draggable marker on the map
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable:true,
    title:"Drag me!"
});

#google maps api #javascript #draggable marker google maps v3 example #google maps draggable marker #google maps draggable marker get coordinates

Extending Vue.js Components

What’s the best way to “extend” a Vue component, i.e. use one component as the basis for other components?

Doing this could save you from duplicating code, making your components quicker to develop and easier to maintain.

There are a number of APIs and patterns that Vue offers for this, and you’ll need to choose the right one depending both on your goals and personal taste.

In this article, I’ll give you an overview of the different options to help you choose the best and most suitable for your scenario.

Do you really need to extend your component?

Keep in mind that all methods of extending components can add complexity and verbosity to your code, and in some cases, additional performance overhead.

So before you decide to extend a component, it’s a good idea to first check if there are simpler design patterns that can achieve what you want.

The following component design patterns can often be sufficient substitutes for extending a component:

  • Props-driven template logic
  • Slots
  • JavaScript utility functions

Let’s do our due diligence by briefly reviewing these.

Props-driven template logic

The easiest way to make a component multi-use, and thus avoid extending it, is to provide a prop which drives conditional logic in the template.

In the following example, we use a prop type for this purpose.

<template>
  <div class="wrapper">
    <div v-if="type === 'a'">...</div>
    <div v-else-if="type === 'b'">...</div>
    <!--etc etc-->
  </div>
</template>
<script>
export default {
  props: { type: String },
  ...
}
</script>

A parent can then declare this component and use the prop to get the variation required.

<template>
  <MyVersatileComponent type="a" />
  <MyVersatileComponent type="b" />
</template>

Here are two indicators that you’ve either hit the limits of this pattern or are misusing it:

  1. The component composition model makes an app scalable by breaking down the state and logic into atomic parts. If you have too many variations in the one component (a “mega component”) you’ll find it won’t be readable or maintainable.
  2. Props and template logic are intended to make a component dynamic but come at a runtime resource cost. It’s an anti-pattern if you’re using this mechanism to solve a code composition problem at runtime.

Slots

Another way to make a component versatile without extending it is to allow the parent component to set custom content within the child using slots.

<template>
  <div class="wrapper">
    <h3>Common markup</div>
    <slot />
  </div>
</template>
<template>
  <MyVersatileComponent>
    <h4>Inserting into the slot</h4>
  </MyVersatileComponent>
</template>

Renders as:

<div class="wrapper">
  <h3>Common markup</div>
  <h4>Inserting into the slot</h4>
</div>

A potential limitation of this pattern is that the elements in the slot belong to the parent’s context, which may not be a natural way of dividing your logic and state.

Scoped slots can bring more flexibility, and we’ll explore these more in the section on renderless components.

JavaScript utility functions

If you only need to reuse standalone functions across your components, you can simply extract these into JavaScript modules without any need to use an extending pattern.

JavaScript’s module system is a very flexible and robust way of sharing code, so you should lean on it where possible.

export default function () {
  ...
}
import MyUtilityFunction from "./MyUtilityFunction";
export default {
  methods: {
    MyUtilityFunction
  }
}

#vue.js #components #composition api #renderless components #vue