renusify 2.0.4 → 2.1.0

package/components/index.js

@@ -1,204 +1,113 @@
-const list = {
-    'r-app': {'p': 'app/index.vue', 'c': ['r-btn', 'r-icon', 'r-spacer'], 'd': []},
-    'r-notify': {'p': 'notify/index.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
-    'r-avatar': {'p': 'avatar/index.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
-    'r-toolbar': {
-        'p': 'bar/toolbar/index.vue',
-        'c': ['r-container', 'r-spacer', 'r-search-box', 'r-img', 'r-icon', 'r-btn', 'r-divider'],
-        'd': []
-    },
-    'r-bottom-navigation': {'p': 'bar/bottomNav.vue', 'c': [], 'd': []},
-    'r-bottom-navigation-circle': {'p': 'bar/bottomNavigationCircle.vue', 'c': ['r-icon'], 'd': []},
-    'r-breadcrumbs': {'p': 'breadcrumb/index.vue', 'c': ['r-icon'], 'd': []},
-    'r-btn': {'p': 'button/index.vue', 'c': ['r-progress-circle'], 'd': ['ripple']},
-    'r-btn-confirm': {'p': 'button/buttonConfirm.vue', 'c': ['r-btn', 'r-confirm'], 'd': []},
-    'r-btn-group': {
-        'p': 'button/buttonGroup.vue',
-        'c': ['r-btn', 'r-icon', 'r-card', 'r-list'],
-        'd': ['click-outside']
-    },
-    'r-calendar': {
-        'p': 'calendar/index.vue',
-        'c': ['r-container', 'r-row', 'r-col', 'r-btn', 'r-icon', 'r-modal', 'r-card'],
-        'd': []
-    },
-    'r-card': {'p': 'card/index.vue', 'c': [], 'd': ['ripple']},
-    'r-chart': {'p': 'chart/chart.vue', 'c': [], 'd': []},
-    'r-world-map': {'p': 'chart/worldMap.vue', 'c': ['r-float'], 'd': []},
-    'r-chat': {
-        'p': 'chat/index.vue',
-        'c': ['r-btn', 'r-icon', 'r-progress-circle', 'r-img'],
-        'd': ['intersect', 'scroll']
-    },
-    'r-chip': {'p': 'chip/index.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
-    'r-code-editor': {'p': 'codeEditor/index.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
-    'r-confirm': {
-        'p': 'confirm/index.vue',
-        'c': ['r-modal', 'r-card', 'r-container', 'r-row', 'r-col', 'r-divider', 'r-form', 'r-text-input', 'r-btn'],
-        'd': []
-    },
-    'r-container': {'p': 'container/index.vue', 'c': [], 'd': []},
-    'r-row': {'p': 'container/row.vue', 'c': [], 'd': []},
-    'r-col': {'p': 'container/col.vue', 'c': [], 'd': []},
-    'r-spacer': {'p': 'container/spacer.vue', 'c': [], 'd': []},
-    'r-divider': {'p': 'container/divider.vue', 'c': [], 'd': []},
-    'r-content': {'p': 'content/index.vue', 'c': [], 'd': []},
-    'r-count-down': {'p': 'countdown/index.vue', 'c': [], 'd': []},
-    'r-cropper': {'p': 'cropper/index.vue', 'c': [], 'd': ['touch']},
-    'r-float': {'p': 'float/index.vue', 'c': [], 'd': []},
-    'r-form': {'p': 'form/form.vue', 'c': [], 'd': []},
-    'r-color-input': {
-        'p': 'form/colorPicker/index.vue',
-        'c': ['r-input', 'r-modal', 'r-btn', 'r-icon'],
-        'd': ['touch']
-    },
-    'r-date-input': {
-        'p': 'form/datePicker/index.vue',
-        'c': ['r-input', 'r-modal', 'r-container', 'r-row', 'r-col', 'r-btn', 'r-icon'],
-        'd': []
-    },
-    'r-file-input': {
-        'p': 'form/fileUploader/index.vue',
-        'c': ['r-input', 'r-row', 'r-btn', 'r-icon', 'r-progress-circle', 'r-text-input', 'r-cropper'],
-        'd': []
-    },
-    'r-tel-input': {
-        'p': 'form/inputTel/index.vue',
-        'c': ['r-modal', 'r-card', 'r-text-input', 'r-list', 'r-spacer', 'r-btn'],
-        'd': []
-    },
-    'r-json-input': {
-        'p': 'form/json/index.vue',
-        'c': ['r-btn', 'r-icon', 'r-text-input', 'r-select-input', 'r-number-input', 'r-switch-input'],
-        'd': []
-    },
-    'r-text-editor': {
-        'p': 'form/text-editor/index.vue',
-        'c': ['r-container', 'r-row', 'r-col', 'r-btn-group', 'r-btn',
-            'r-icon', 'r-select-input', 'r-input', 'r-img', 'r-modal',
-            'r-form', 'r-file-input', 'r-text-input', 'r-switch-input', 'r-number-input'],
-        'd': []
-    },
-    'r-text-editor-preview': {'p': 'form/text-editor/preview.vue', 'c': [], 'd': []},
-    'r-time-input': {'p': 'form/timepicker/index.vue', 'c': ['r-input', 'r-modal', 'r-card', 'r-btn'], 'd': []},
-    'r-time-range-input': {'p': 'form/timepicker/range.vue', 'c': ['r-input', 'r-modal', 'r-card', 'r-btn'], 'd': []},
-    'r-unique-input': {'p': 'form/unique/index.vue', 'c': ['r-text-input'], 'd': []},
-    'r-address-input': {'p': 'form/address.vue', 'c': ['r-select-input', 'r-text-area', 'r-text-input'], 'd': []},
-    'r-cam-input': {'p': 'form/camInput', 'c': ['r-input', 'r-btn', 'r-icon'], 'd': []},
-    'r-check-input': {'p': 'form/check-input.vue', 'c': ['r-input', 'r-btn', 'r-icon'], 'd': []},
-    'r-checkbox-input': {'p': 'form/checkbox.vue', 'c': ['r-input', 'r-icon'], 'd': []},
-    'r-group-input': {
-        'p': 'form/group-input.vue',
-        'c': ['r-btn', 'r-icon'],
-        'd': []
-    },
-    'r-input': {'p': 'form/input.vue', 'c': ['r-icon'], 'd': []},
-    'r-mask-input': {'p': 'form/mask-input.vue', 'c': ['r-input'], 'd': ['mask']},
-    'r-number-input': {'p': 'form/number.vue', 'c': ['r-input', 'r-btn', 'r-icon'], 'd': []},
-    'r-password-input': {'p': 'form/password.vue', 'c': ['r-input', 'r-icon'], 'd': []},
-    'r-radio-input': {'p': 'form/radioInput.vue', 'c': ['r-input', 'r-icon'], 'd': []},
-    'r-range-input': {'p': 'form/range.vue', 'c': ['r-input'], 'd': ['touch']},
-    'r-rating-input': {'p': 'form/rating.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
-    'r-select-input': {
-        'p': 'form/select.vue',
-        'c': ['r-input', 'r-chip', 'r-progress-line', 'r-card', 'r-list', 'r-icon'],
-        'd': ['click-outside']
-    },
-    'r-switch-input': {'p': 'form/switch.vue', 'c': ['r-input'], 'd': []},
-    'r-text-area': {'p': 'form/text-area.vue', 'c': ['r-input'], 'd': []},
-    'r-text-input': {'p': 'form/text-input.vue', 'c': ['r-input'], 'd': []},
-    'r-unit-input': {'p': 'form/unit-input.vue', 'c': ['r-input', 'r-select-input'], 'd': []},
-    'r-form-creator': {
-        'p': 'formCreator/index.vue',
-        'c': ['r-card', 'r-container', 'r-message', 'r-form', 'r-row', 'r-col', 'r-btn'],
-        'd': []
-    },
-    'r-html2pdf': {'p': 'html2pdf/index.vue', 'c': ['r-btn', 'r-icon', 'r-html2pdf-page-break'], 'd': []},
-    'r-html2pdf-page-break': {'p': 'html2pdf/pageBreak.vue', 'c': [], 'd': []},
-    'r-icon': {'p': 'icon/index.vue', 'c': [], 'd': []},
-    'r-img': {'p': 'img/index.vue', 'c': [], 'd': ['intersect']},
-    'r-infinite-div': {
-        'p': 'infinite/div.vue',
-        'c': ['r-container', 'r-row', 'r-col', 'r-progress-line'],
-        'd': ['scroll']
-    },
-    'r-infinite-page': {'p': 'infinite/page.vue', 'c': ['r-progress-line'], 'd': ['scroll']},
-    'r-infinite-box': {
-        'p': 'infinite/index.vue',
-        'c': ['r-card', 'r-container', 'r-row', 'r-col', 'r-switch-input', 'r-infinite-div'],
-        'd': []
-    },
-    'r-list': {'p': 'list/index.vue', 'c': ['r-icon'], 'd': ['ripple']},
-    'r-map': {'p': 'map/index.vue', 'c': ['r-search-box', 'r-btn', 'r-icon', 'r-confirm'], 'd': []},
-    'r-map-select': {'p': 'map/select.vue', 'c': ['r-map'], 'd': []},
-    'r-map-route': {
-        'p': 'map/route.vue',
-        'c': ['r-container', 'r-row', 'r-col', 'r-map', 'r-divider', 'r-spacer', 'r-btn', 'r-icon'],
-        'd': []
-    },
-    'r-menu': {'p': 'menu/index.vue', 'c': ['r-btn', 'r-icon', 'r-card'], 'd': ['click-outside']},
-    'r-message': {'p': 'message/index.vue', 'c': ['r-container', 'r-row', 'r-col'], 'd': []},
-    'r-meta': {'p': 'meta/index.js', 'c': [], 'd': []},
-    'r-modal': {'p': 'modal/index.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
-    'r-progress-circle': {'p': 'progress/circle.vue', 'c': [], 'd': []},
-    'r-progress-line': {'p': 'progress/line.vue', 'c': [], 'd': []},
-    'r-search-box': {
-        'p': 'searchBox/index.vue',
-        'c': ['r-progress-line', 'r-card', 'r-list', 'r-btn', 'r-icon', 'r-select-input'],
-        'd': ['click-outside']
-    },
-    'r-slider': {'p': 'slider/index.vue', 'c': ['r-progress-line', 'r-btn', 'r-icon'], 'd': ['touch']},
-    'r-swiper': {'p': 'swiper/index.vue', 'c': [], 'd': ['touch']},
-    'r-table': {
-        'p': 'table/index.vue',
-        'c': ['r-btn', 'r-icon', 'r-switch-input', 'r-progress-line', 'r-modal', 'r-card', 'r-container', 'r-row', 'r-col'],
-        'd': ['sortable']
-    },
-    'r-table-crud': {
-        'p': 'table/crud/index.vue',
-        'c': ['r-card', 'r-modal', 'r-form-creator', 'r-json-input', 'r-divider', 'r-number-input', 'r-btn', 'r-table', 'r-icon',
-            'r-time-ago', 'r-switch-input', 'r-confirm', 'r-container', 'r-row', 'r-col', 'r-text-input', 'r-select-input', 'r-date-input',
-            'r-progress-line'],
-        'd': []
-    },
-    'r-tabs': {'p': 'tabs/index.vue', 'c': ['r-btn', 'r-icon'], 'd': []},
-    'r-time-ago': {'p': 'timeAgo/index.vue', 'c': [], 'd': []},
-    'r-timeline': {'p': 'timeline/index.vue', 'c': ['r-container', 'r-row', 'r-col'], 'd': []},
-    'r-tour': {'p': 'tour/index.vue', 'c': ['r-container', 'r-spacer', 'r-btn'], 'd': []},
-    'r-tree': {
-        'p': 'tree/index.vue',
-        'c': ['r-container', 'r-row', 'r-col', 'r-select-input', 'r-float', 'r-tree-element'],
-        'd': []
-    },
-    'r-tree-element': {'p': 'tree/tree-element.vue', 'c': ['r-container', 'r-row', 'r-col', 'r-btn', 'r-icon'], 'd': []}
-}
+export * as rApp from './app/index.js'
+export * as rAvatar from './avatar/index.js'
+export * as rToolbar from './bar/toolbar/index.js'
+export * as rBottomNavigation from './bar/bottomNav.js'
+export * as rBottomNavigationCircle from './bar/bottomNavigationCircle.js'
+export * as rBreadcrumbs from './breadcrumb/index.js'
+export * as rBtn from './button/index.js'
+export * as rBtnConfirm from './button/buttonConfirm.js'
+export * as rCalendar from './calendar/index.js'
+export * as rCard from './card/index.js'
+export * as rChart from './chart/chart.js'
+export * as rChartMap from './chart/worldMap.js'
+export * as rChat from './chat/index.js'
+export * as rChip from './chip/index.js'
+export * as rCodeEditor from './codeEditor/index.js'
+export * as rConfirm from './confirm/index.js'
+export * as rContainer from './container/index.js'
+export * as rRow from './container/row.js'
+export * as rCol from './container/col.js'
+export * as rSpacer from './container/spacer.js'
+export * as rDivider from './container/divider.js'
+export * as rContent from './content/index.js'
+export * as rCountDown from './countdown/index.js'
+export * as rCropper from './cropper/index.js'
+export * as rFloat from './float/index.js'
+export * as rForm from './form/index.js'
+export * as rColorInput from './form/colorInput/index.js'
+export * as rDateInput from './form/dateInput/index.js'
+export * as rFileInput from './form/fileInput/index.js'
+export * as rTelInput from './form/telInput/index.js'
+export * as rJsonInput from './form/jsonInput/index.js'
+export * as rTextEditor from './form/text-editor/index.js'
+export * as rTextEditorPreview from './form/text-editor/preview.js'
+export * as rTimeInput from './form/timeInput/index.js'
+export * as rTimeRangeInput from './form/timeInput/range.js'
+export * as rUniqueInput from './form/uniqueInput/index.js'
+export * as rAddressInput from './form/addressInput/index.js'
+export * as rCamInput from './form/camInput/index.js'
+export * as rCheckInput from './form/checkInput/index.js'
+export * as rCheckboxInput from './form/checkboxInput/index.js'
+export * as rGroupInput from './form/groupInput/index.js'
+export * as rInput from './form/input/index.js'
+export * as rMaskInput from './form/maskInput/index.js'
+export * as rNumberInput from './form/numberInput/index.js'
+export * as rPasswprdInput from './form/passwordInput/index.js'
+export * as rRadioInput from './form/radioInput/index.js'
+export * as rRangeInput from './form/rangeInput/index.js'
+export * as rRatingInput from './form/ratingInput/index.js'
+export * as rSelectInput from './form/selectInput/index.js'
+export * as rSwitchInput from './form/switchInput/index.js'
+export * as rTextArea from './form/textArea/index.js'
+export * as rTextInput from './form/textInput/index.js'
+export * as rUnitInput from './form/unitInput/index.js'
+export * as rFormCreator from './formCreator/index.js'
+export * as rHtml2pdf from './html2pdf/index.js'
+export * as rHtml2pdfPageBreak from './html2pdf/pageBreak.js'
+export * as rIcon from './icon/index.js'
+export * as rImg from './img/index.js'
+export * as rInfiniteDiv from './infinite/div.js'
+export * as rInfinitePage from './infinite/page.js'
+export * as rInfiniteBox from './infinite/index.js'
+export * as rList from './list/index.js'
+export * as rMap from './map/index.js'
+export * as rMapSelect from './map/select.js'
+export * as rMapRoute from './map/route.js'
+export * as rMenu from './menu/index.js'
+export * as rMessage from './message/index.js'
+export * as rMeta from './meta/index.js'
+export * as rModal from './modal/index.js'
+export * as rNestable from './nestable/index.js'
+export * as rNotify from './notify/index.js'
+export * as rProgressCircle from './progress/circle.js'
+export * as rProgressLine from './progress/line.js'
+export * as rSearchBox from './searchBox/index.js'
+export * as rSlider from './slider/index.js'
+export * as rSwiper from './swiper/index.js'
+export * as rTable from './table/index.js'
+export * as rTableCrud from './table/crud/index.js'
+export * as rTabs from './tabs/index.js'
+export * as rTimeAgo from './timeAgo/index.js'
+export * as rTimeline from './timeline/index.js'
+export * as rTour from './tour/index.js'
+export * as rTree from './tree/index.js'
 
 export const register = (app, components) => {
     let d = {}
     let s = {}
     const setup = (ls) => {
-        ls.forEach((c) => {
+        for (const name in ls) {
             try {
-                if (!s[c]) {
-                    app.component(c, require('./' + list[c]['p']).default)
-                    list[c]['d'].forEach((i) => {
-                        d[i] = true
-                    })
-                    setup(list[c]['c'])
-                    s[c] = true
+                for (const arrayKey in ls[name]) {
+                    const cc=ls[name][arrayKey]
+                    if(arrayKey.startsWith('d_')){
+                        d[arrayKey.substring(2)]=cc
+                    }
+                    else if(arrayKey.startsWith('l_')){
+                        setup({[arrayKey.substring(2)]:cc})
+                    }
+                    else if (!s[arrayKey]) {
+                        app.component(arrayKey,cc.default)
+                        s[arrayKey] = true
+                    }
                 }
+
             } catch (e) {
                 console.error('component not found', c, e)
             }
-        })
-    }
-    if (components.length === 0) {
-        setup(Object.keys(list))
-    } else {
-        if (!components.includes('r-app')) {
-            setup(['r-app'])
         }
-        setup(components)
     }
-    return Object.keys(d)
+
+    setup(components)
+    return d
 }

package/components/infinite/div.js

@@ -0,0 +1,6 @@
+export * as rInfiniteDiv from './div.vue'
+export * as l_container from '../container/index.js'
+export * as l_row from '../container/row.js'
+export * as l_col from '../container/col.js'
+export * as l_line from '../progress/line.js'
+export * as d_scroll from '../../directive/scroll/index.js'

package/components/infinite/index.js

@@ -0,0 +1,7 @@
+export * as rInfiniteBox from './index.vue'
+export * as l_div from './div.js'
+export * as l_card from '../card/index.js'
+export * as l_container from '../container/index.js'
+export * as l_row from '../container/row.js'
+export * as l_col from '../container/col.js'
+export * as l_switch from '../form/switchInput/index.js'

package/components/infinite/page.js

@@ -0,0 +1,3 @@
+export * as rInfinitePage from './page.vue'
+export * as l_line from '../progress/line.js'
+export * as d_scroll from '../../directive/scroll/index.js'

package/components/list/index.js

@@ -0,0 +1,3 @@
+export * as rList from './index.vue'
+export * as l_icon from '../icon/index.js'
+export * as d_ripple from '../../directive/ripple/index.js'

package/components/map/index.js

@@ -0,0 +1,5 @@
+export * as rMap from './index.vue'
+export * as l_search from '../searchBox/index.js'
+export * as l_btn from '../button/index.js'
+export * as l_icon from '../icon/index.js'
+export * as l_confirm from '../confirm/index.js'

package/components/map/index.vue

@@ -98,8 +98,8 @@ export default {
       this.$r.icons.crosshairs_gps = '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 8a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m-8.95 5H1v-2h2.05C3.5 6.83 6.83 3.5 11 3.05V1h2v2.05c4.17.45 7.5 3.78 7.95 7.95H23v2h-2.05c-.45 4.17-3.78 7.5-7.95 7.95V23h-2v-2.05C6.83 20.5 3.5 17.17 3.05 13M12 5a7 7 0 0 0-7 7a7 7 0 0 0 7 7a7 7 0 0 0 7-7a7 7 0 0 0-7-7Z"/></svg>'
     }
   },
-  async beforeMount() {
-    await this.add();
+  mounted() {
+    this.add();
   },
   watch: {
     modelValue: function (n, o) {
@@ -300,18 +300,19 @@ export default {
           break;
       }
     },
-    async add() {
+    add() {
       import('./leaflet.css')
-      await import('./leaflet')
-      this.L = global.L
-      this.run();
+      import('./leaflet').then(()=>{
+        this.L = global.L
+        this.run();
+      })
     },
   }
 };
 </script>
 
 <style lang="scss">
-@import "~renusify/style/include";
+@import "../../style/include";
 
 .#{$prefix}map {
   position: relative;

package/components/map/route.js

@@ -0,0 +1,9 @@
+export * as rMapRoute from './route.vue'
+export * as l_map from './index.js'
+export * as l_container from '../container/index.js'
+export * as l_row from '../container/row.js'
+export * as l_col from '../container/col.js'
+export * as l_divider from '../container/divider.js'
+export * as l_spacer from '../container/spacer.js'
+export * as l_btn from '../button/index.js'
+export * as l_icon from '../icon/index.js'

package/components/map/route.vue

@@ -565,7 +565,7 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "~renusify/style/include";
+@import "../../style/include";
 
 .#{$prefix}map-route {
   display: flex;

package/components/map/select.js

@@ -0,0 +1,2 @@
+export * as rMapSelect from './select.vue'
+export * as l_map from './index.js'

package/components/menu/index.js

@@ -0,0 +1,5 @@
+export * as rMenu from './index.vue'
+export * as l_btn from '../button/index.js'
+export * as l_icon from '../icon/index.js'
+export * as l_card from '../card/index.js'
+export * as d_clickOutside from '../../directive/clickOutSide/index.js'

package/components/message/index.js

@@ -0,0 +1,4 @@
+export * as rMessage from './index.vue'
+export * as l_c from '../container/index.js'
+export * as l_r from '../container/row.js'
+export * as l_co from '../container/col.js'

package/components/meta/index.js

@@ -1,5 +1,5 @@
 //https://github.com/troxler/headful/blob/master/src/headful.js
-export default {
+export const rMeta= {
     name: "r-meta",
     created(){
         this.build()

package/components/modal/index.js

@@ -0,0 +1,3 @@
+export * as rModal from './index.vue'
+export * as l_icon from '../icon/index.js'
+export * as l_btn from '../button/index.js'

package/components/modal/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <teleport :to="`.${$r.prefix}app`">
+  <teleport v-if="show" :to="`.${$r.prefix}app`">
     <div v-if="modelValue&&!noOverlay" :class="{
       [`${$r.prefix}modal-overlay`]:true
     }"></div>
@@ -64,7 +64,8 @@ export default {
   data() {
     return {
       state: null,
-      run_animate: false
+      run_animate: false,
+      show: false,
     }
   },
   created() {
@@ -74,6 +75,9 @@ export default {
         this.$emit('update:modelValue', true)
       }
     }
+    setTimeout(()=>{
+      this.show=true
+    },10)
   },
   watch: {
     '$route': function (n) {

package/components/modal/style.scss

@@ -6,6 +6,7 @@
   position: fixed;
   left: 0;
   right: 0;
+  top:0;
   z-index: map_get($z-index, 'important');
   background-color: var(--color-overlay);
   backdrop-filter: blur(3px) grayscale(30%);

package/components/nestable/NestableItem.vue

@@ -0,0 +1,163 @@
+<template>
+  <div
+      :class="itemClasses"
+      class="nestable-handle"
+      draggable="true"
+      @dragstart="dragstart"
+      @touchend="touchend"
+      @touchmove="touchmove"
+      @touchstart="dragstart"
+  >
+    <div
+        class="nestable-item-content"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave"
+        @mousemove="onMouseMove"
+    >
+      <r-btn-confirm
+          v-if="editable"
+          class="color-error-text"
+          icon
+          text
+          @click="del(item)"
+      >
+        <r-icon v-html="$r.icons.delete"></r-icon>
+      </r-btn-confirm>
+      <slot :item="item"></slot>
+    </div>
+
+    <div v-if="hasChildren" class="nestable-list ms-5">
+      <template
+          v-for="(child, childIndex) in item[childrenProp]"
+          :key="childIndex"
+      >
+        <NestableItem
+            :childrenProp="childrenProp"
+            :dragItem="dragItem"
+            :index="childIndex"
+            :item="child"
+            :key-prop="keyProp"
+            is-child
+            @delete="$emit('delete', $event)"
+            @drag-start="$emit('drag-start', $event)"
+            @touch-move="$emit('touch-move', $event)"
+            @mouse-enter="$emit('mouse-enter', $event)"
+            @drag-end="$emit('drag-end', $event)"
+        >
+          <template v-slot="{ item }">
+            <r-btn-confirm
+                v-if="editable"
+                class="color-error-text"
+                icon
+                text
+                @click="del(item)"
+            >
+              <r-icon v-html="$r.icons.delete"></r-icon>
+            </r-btn-confirm>
+            <slot :item="item" itemscope></slot>
+          </template>
+        </NestableItem>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NestableItem",
+  props: {
+    editable: Boolean,
+    keyProp: String,
+    item: {
+      type: Object,
+      required: true,
+      default: () => ({}),
+    },
+    index: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    isChild: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    childrenProp: String,
+    dragItem: Object,
+  },
+  data() {
+    return {
+      breakPoint: null,
+      moveDown: false,
+    };
+  },
+
+  computed: {
+    isDragging() {
+      return (
+          this.dragItem && this.dragItem[this.keyProp] === this.item[this.keyProp]
+      );
+    },
+
+    hasChildren() {
+      return (
+          this.item[this.childrenProp] && this.item[this.childrenProp].length > 0
+      );
+    },
+
+    itemClasses() {
+      const isDragging = this.isDragging ? ["is-dragging"] : [];
+
+      return [
+        "nestable-item",
+        `nestable-item-${this.item[this.keyProp]}`,
+        ...isDragging,
+      ];
+    },
+  },
+
+  methods: {
+    del(item) {
+      this.$emit("delete", item);
+    },
+    dragstart(event) {
+      this.$emit("drag-start", [event, this.item]);
+    },
+    touchend(event) {
+      this.$emit("drag-end", event);
+    },
+    touchmove(event) {
+      this.$emit("touch-move", event);
+    },
+    onMouseEnter(event) {
+      if (!this.dragItem) return;
+
+      if (!event.movementY) {
+        return this.sendNotification(event);
+      }
+
+      this.moveDown = event.movementY > 0;
+
+      this.breakPoint = event.target.getBoundingClientRect().height / 2;
+    },
+    onMouseLeave() {
+      this.breakPoint = null;
+    },
+    onMouseMove(event) {
+      if (!this.breakPoint) return;
+
+      const delta = event.offsetY - this.breakPoint;
+
+      if (this.moveDown && delta < this.breakPoint / 4) return;
+      if (!this.moveDown && delta > -this.breakPoint / 4) return;
+
+      this.sendNotification(event);
+    },
+    sendNotification(event) {
+      this.breakPoint = null;
+      this.$emit("mouse-enter", [event, this.item]);
+    },
+  },
+};
+</script>