renusify 2.3.0 → 2.3.2

package/components/form/dateInput/month.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="d-flex flex-wrap">
-    <r-btn v-for="i in 12"
+    <r-btn v-for="i in ls"
            :key="i"
            outlined
            class="w-30 ma-2"
-           :class="{'color-one-text':i+p===modelValue}"
-           @click.prevent="emit(i+p)">
+           :class="{'color-one':i===modelValue}"
+           @click.prevent="emit(i)">
       {{
-        $d(new Date(year, i + p, 1, 0, timezoneOffset), 'month', locale)
+      $d(new Date(year, i, 1, 0, timezoneOffset), 'month', locale)
       }}
     </r-btn>
   </div>
@@ -22,17 +22,41 @@ export default {
     month: Number,
     year: Number
   },
-  emits:['update:modelValue'],
+  emits: ['update:modelValue'],
   data() {
     return {
-      p: 0
+      ls: []
     }
   },
   beforeMount() {
-    const c = this.$d(new Date(this.year, 1, 1, 0, this.timezoneOffset), 'me', this.locale)
-    if (c > 1) {
-      this.p = (1 - c)
+    const year = this.$d(new Date(this.year, this.month, 5, 0, this.timezoneOffset), 'ye', this.locale)
+    let ls = []
+    let first = 0
+    let n = 0
+    while (true) {
+      n++
+      if (n > 100) {
+        break
+      }
+      const y = this.$d(new Date(this.year, first, 5, 0, this.timezoneOffset), 'ye', this.locale)
+      const m = parseInt(this.$d(new Date(this.year, first, 5, 0, this.timezoneOffset), 'me', this.locale))
+      if (y === year && m === 1) {
+        break
+      }
+      if (y > year) {
+        first--
+      } else if (y < year) {
+        first++
+      } else if (m > 1) {
+        first--
+      } else {
+        first++
+      }
     }
+    for (let i = 0; i < 12; i++) {
+      ls.push(first + i)
+    }
+    this.ls = ls
   },
   methods: {
     emit(n) {

package/components/form/dateInput/year.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="d-flex flex-wrap">
-    <r-btn v-for="i in 12"
+  <div class="date-picker-year d-flex flex-wrap">
+    <r-btn v-for="i in 200"
            :key="i"
            class="w-30 ma-2"
-           :class="{'color-one-text':modelValue+i-6===modelValue}"
+           :class="{'color-one year-select':modelValue+i-100===modelValue}"
            outlined
-           @click.prevent="emit(modelValue+i-6)">
+           @click.prevent="emit(modelValue+i-100)">
       {{
-        $d(new Date(modelValue + i - 6, 1, 1, 0, timezoneOffset), 'year', locale)
+      $d(new Date(modelValue + i - 100, month, 5, 0, timezoneOffset), 'year', locale)
       }}
     </r-btn>
   </div>
@@ -22,10 +22,16 @@ export default {
     month: Number
   },
   emits:['update:modelValue'],
+  mounted() {
+    let el = document.querySelector('.year-select')
+    if (el) {
+      el.scrollIntoView(true)
+    }
+  },
   methods: {
     emit(n) {
-      this.$emit('update:modelValue', n)
+      this.$emit('update:modelValue', n - this.modelValue)
     }
   }
 }
-</script>
+</script>

package/components/form/groupInput/index.js

@@ -1,4 +1,5 @@
 export * as rGroupInput from './index.vue'
 
 export * as l_btn from '../../button/index.js'
-export * as l_icon from '../../icon/index.js'
+export * as l_icon from '../../icon/index.js'
+export * as d_sortable from '../../../directive/sortable/index.js'

package/components/form/groupInput/index.vue

@@ -4,6 +4,7 @@
            hide>
     <div class="w-full">
       <span v-if="label" class="group-input-label">{{ label }}</span>
+      <div :key="key" v-sortable="{grab:'.grab-btn-group-input',end:end}">
       <div class="group-holder" v-for="(item,i) in modelValue" :key="i">
         <div class="group-slot">
           <slot :item="item" :index="i" :disableDel="disDel">
@@ -17,18 +18,15 @@
         </slot>
       </div>
         <div class="group-action">
-          <r-btn icon text>
-            <r-icon v-html="$r.icons.chevron_up" :class="{'icon-disabled':i===0}" @click.prevent="up(i)"></r-icon>
-          </r-btn>
-          <r-btn icon text>
-            <r-icon v-html="$r.icons.chevron_down" :class="{'icon-disabled':i===modelValue.length-1}"
-                    @click.prevent="down(i)"></r-icon>
+          <r-btn icon text class="grab-btn-group-input">
+            <r-icon v-html="$r.icons.drag"></r-icon>
           </r-btn>
           <r-btn v-if="!disableItems.includes(itemKey?item[itemKey]:'')" icon text @click.prevent="del(i)">
             <r-icon v-html="$r.icons.delete" class="color-error-text"></r-icon>
           </r-btn>
         </div>
       </div>
+      </div>
       <div class="mt-5" :class="addBtnClass">
         <transition name="scale">
           <r-btn v-if="show_add" class="color-success" icon @click.prevent="add">
@@ -55,6 +53,7 @@ export default {
   emits:['update:modelValue','add','delete'],
   data() {
     return {
+      key: 0,
       disabledDel: {}
     }
   },
@@ -71,6 +70,14 @@ export default {
     }
   },
   methods: {
+    end(e) {
+      let a = []
+      for (let i = 0; i < e.length; i++) {
+        a.push(this.modelValue[parseInt(e[i])])
+      }
+      this.$emit('update:modelValue', a)
+      this.key++
+    },
     t(k) {
       if (this.translate) {
         return this.$t(k)
@@ -104,32 +111,6 @@ export default {
       this.$emit('delete', i)
       this.$emit('update:modelValue', a)
     },
-    up(i) {
-      if (i === 0) {
-        return
-      }
-      let a = this.modelValue || []
-      a = this.array_move(a, i, i - 1)
-      this.$emit('update:modelValue', a)
-    },
-    down(i) {
-      if (i === this.modelValue.length - 1) {
-        return
-      }
-      let a = this.modelValue || []
-      a = this.array_move(a, i, i + 1)
-      this.$emit('update:modelValue', a)
-    },
-    array_move(arr, old_index, new_index) {
-      if (new_index >= arr.length) {
-        let k = new_index - arr.length + 1;
-        while (k--) {
-          arr.push(undefined);
-        }
-      }
-      arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
-      return arr;
-    }
   }
 }
 </script>

package/components/form/jsonInput/index.vue

@@ -29,7 +29,7 @@
               :label="keyLabel||$t('key','renusify')"
               :tile="tile"
               class="w-30 pe-1"></r-text-input>
-          <div class="w-20" v-if="!valueType">
+          <div v-if="!valueType" class="w-20">
             <r-select-input v-model="info.type"
                             :items="['text','number','boolean','json','array']"
                             :tile="tile"
@@ -41,15 +41,15 @@
                             @update:model-value="info.value=null"></r-select-input>
           </div>
           <r-text-input v-if="info.type==='text'"
-                        :tile="tile"
+                        v-model="info.value"
                         :label="valueLabel||$t('value','renusify')"
-                        v-model="info.value"></r-text-input>
+                        :tile="tile"></r-text-input>
           <r-number-input v-else-if="info.type==='number'"
-                          :tile="tile"
-                          v-model="info.value" :label="valueLabel||$t('value','renusify')"></r-number-input>
+                          v-model="info.value"
+                          :label="valueLabel||$t('value','renusify')" :tile="tile"></r-number-input>
           <r-switch-input v-else-if="info.type==='boolean'"
-                          :tile="tile"
-                          v-model="info.value" :label="valueLabel||$t('value','renusify')"></r-switch-input>
+                          v-model="info.value"
+                          :label="valueLabel||$t('value','renusify')" :tile="tile"></r-switch-input>
           <r-btn :rounded="!c_tile" class="ms-1 color-success" @click.prevent="add">{{ $t('add', 'renusify') }}</r-btn>
         </slot>
       </div>

package/components/form/switchInput/index.vue

@@ -94,7 +94,7 @@ emits:['update:modelValue','change'],
     height: 20px;
     border-radius: 50%;
     background-color: #cdcbcb;
-    transition: .3s map.get(base.$transition,'fast-in-fast-out');
+    transition: .3s map.get(base.$transition, 'fast-in-fast-out');
     @include mixins.rtl() {
       right: 0;
     }

package/components/map/index.vue

@@ -302,7 +302,7 @@ export default {
     },
     add() {
       import('./leaflet.css')
-      import('./leaflet.js').then(()=>{
+      import('./leaflet.js').then(() => {
         this.L = global.L
         this.run();
       })

package/components/notify/index.vue

@@ -13,14 +13,14 @@
       {{ $t('clear', 'renusify') }}
     </r-btn>
     <notification v-for="item in list" :key="item.id"
-                  :pos="left?'left':'right'"
+                  :content="item.content"
                   :permanent="item.permanent"
+                  :pos="left?'left':'right'"
                   :status="`color-${item.status}`"
-                  :width="item.width"
                   :timeout="item.timeout"
-                  :content="item.content"
-                  @click.prevent="handle(item.on_click)"
-                  @hide="hideChild(item.id,item.on_close)">
+                  :width="item.width"
+                  @hide="hideChild(item.id,item.on_close)"
+                  @click.prevent="handle(item.on_click)">
 
       <slot :data="item">
         {{ item }}
@@ -118,7 +118,7 @@ export default {
   }
 }
 </script>
-<style lang="scss" >
+<style lang="scss">
 @use "sass:map";
 @use "../../style/variables/base";
 

package/components/table/crud/index.vue

@@ -24,7 +24,8 @@
              class="mb-5">
           <template v-if="item['formInput']!==false">
 
-            <r-json-input v-if="item['type']==='file-uploader'" v-model="copyItem['d'][key]" :label="$t(key,'renusify')"
+            <r-json-input v-if="item['type']==='file-uploader'" v-model="copyItem['d'][key]"
+                          :label="$t(key,'renusify')"
                           baseArray></r-json-input>
             <component
                 :is="item['type']"
@@ -60,37 +61,44 @@
                    @a-search="(a_search=$event),(searching())"></manage-header>
     <div v-if="card" class="d-flex overflow-x-auto">
       <div class="d-flex">
-        <r-card v-for="(item,i) in table.data" :key="i" :class="{'br-lg':!$r.inputs.tile}" class="pa-3 me-3"
+        <r-card v-for="(item,i) in table.data" :key="i" :class="{'br-lg':!$r.inputs.tile}"
+                class="pa-3 me-3"
                 style="width: 300px">
-          <div v-for="(h,j) in headerTable" :key="i+'-'+j" class="d-flex text-no-wrap overflow-x-auto">
-            <slot :data="item" :header="h" name="card">
-              <div v-if="h['option']['type']==='r-date-input' && item[h['value']]!==undefined" class="py-2">
-                {{ h['text'] }}: {{ $d(new Date(item[h['value']]), h['option']['format'] || 'short') }}
-              </div>
-              <div
-                  v-else-if="h['option']['type']==='r-time-ago' && item[h['value']]!==undefined" class="py-2">
-                {{ h['text'] }}:
-                <r-time-ago :time="item[h['value']]"></r-time-ago>
-              </div>
-              <div v-else-if="h['option']['type']==='r-switch-input'" class="d-flex py-2">
-                {{ h['text'] }}:
-                <r-switch-input
-                    :modelValue="item[h['value']]"
-                    :readonly="h['option']['formInput']===false"
-                    class="mt-0"
-                    @update:modelValue="h['option']['formInput']!==false?editItem(item,true,h['value']):''"
-                ></r-switch-input>
-              </div>
-              <div v-else-if="h['option']['type'] === 'r-number-input'" class="py-2">
-                {{ h['text'] }}: {{ $n(item[h["value"]]) }}
-              </div>
-              <div v-else-if="h['option']['type']!=='action'" class="py-2">
-                {{ h['text'] }}: {{
+          <div v-for="(h,j) in headerTable" :key="i+'-'+j"
+               class="d-flex text-no-wrap overflow-x-auto">
+            <slot :editItem="editItem" :item="item" :value="h" :name="'td-'+h.value">
+              <slot :editItem="editItem" :item="item" :value="h" name="card">
+                <div v-if="h['option']['type']==='r-date-input' && item[h['value']]!==undefined"
+                     class="py-2">
+                  {{ h['text'] }}:
+                  {{ $d(new Date(item[h['value']]), h['option']['format'] || 'short') }}
+                </div>
+                <div
+                    v-else-if="h['option']['type']==='r-time-ago' && item[h['value']]!==undefined"
+                    class="py-2">
+                  {{ h['text'] }}:
+                  <r-time-ago :time="item[h['value']]"></r-time-ago>
+                </div>
+                <div v-else-if="h['option']['type']==='r-switch-input'" class="d-flex py-2">
+                  {{ h['text'] }}:
+                  <r-switch-input
+                      :modelValue="item[h['value']]"
+                      :readonly="h['option']['formInput']===false"
+                      class="mt-0"
+                      @update:modelValue="h['option']['formInput']!==false?editItem(item,true,h['value']):''"
+                  ></r-switch-input>
+                </div>
+                <div v-else-if="h['option']['type'] === 'r-number-input'" class="py-2">
+                  {{ h['text'] }}: {{ $n(item[h['value']]) }}
+                </div>
+                <div v-else-if="h['option']['type']!=='action'" class="py-2">
+                  {{ h['text'] }}: {{
                   h['value'] in cast ?
-                      $helper.ifHas(item, '', h['value'], cast[h['value']])
-                      : item[h['value']]
-                }}
-              </div>
+                  $helper.ifHas(item, '', h['value'], cast[h['value']])
+                  : item[h['value']]
+                  }}
+                </div>
+              </slot>
             </slot>
             <div v-if="h['option']['type']==='action'" class="w-full text-end">
               <r-divider class="mt-3"></r-divider>
@@ -102,7 +110,8 @@
                      icon text @click.prevent="deleteItem(item)">
                 <r-icon v-html="$r.icons.delete"></r-icon>
               </r-btn>
-              <r-btn v-for="(val,index) in actions" :key="index" :class="`color-${val.color}-text`" class="mx-0" icon
+              <r-btn v-for="(val,index) in actions" :key="index" :class="`color-${val.color}-text`"
+                     class="mx-0" icon
                      text @click.prevent="$emit(val.name,item)">
                 <r-icon exact v-html="val.icon"></r-icon>
               </r-btn>
@@ -111,7 +120,8 @@
         </r-card>
       </div>
     </div>
-    <r-table v-else :headers="headerTable" :items="table.data" :key-item="itemId" :responsive="responsive"
+    <r-table v-else :headers="headerTable" :items="table.data" :key-item="itemId"
+             :responsive="responsive"
              transition="table-row">
       <template v-slot:header="{header}">
         <th v-for="(item,key) in header"
@@ -157,33 +167,37 @@
                    icon text @click.prevent="props.open(props.key)">
               <r-icon v-html="props.opened!==props.key?$r.icons.plus:$r.icons.minus"></r-icon>
             </r-btn>
-            <slot :editItem="editItem" :item="props.item" :value="value" name="cell">
-              <div
-                  v-if="value['option']['type']==='r-date-input' && props.item[value['value']]!==undefined">
-                {{ $d(new Date(props.item[value['value']]), value['option']['format'] || 'short') }}
-              </div>
-              <div
-                  v-else-if="value['option']['type']==='r-time-ago' && props.item[value['value']]!==undefined">
-                <r-time-ago :time="props.item[value['value']]"></r-time-ago>
-              </div>
-              <div v-else-if="value['option']['type']==='r-switch-input'">
-                <r-switch-input
-                    :modelValue="props.item[value['value']]"
-                    :readonly="value['option']['formInput']===false"
-                    class="mt-0"
-                    @update:modelValue="value['option']['formInput']!==false?editItem(props.item,true,value['value']):''"
-                ></r-switch-input>
-              </div>
-              <div v-else-if="value['option']['type'] === 'r-number-input'">
-                {{ $n(props.item[value["value"]]) }}
-              </div>
-              <div v-else-if="value['option']['type']!=='action'">
-                {{
+            <slot :editItem="editItem" :item="props.item" :value="value" :name="'td-'+value.value">
+              <slot :editItem="editItem" :item="props.item" :value="value" name="cell">
+                <div
+                    v-if="value['option']['type']==='r-date-input' && props.item[value['value']]!==undefined">
+                  {{
+                  $d(new Date(props.item[value['value']]), value['option']['format'] || 'short')
+                  }}
+                </div>
+                <div
+                    v-else-if="value['option']['type']==='r-time-ago' && props.item[value['value']]!==undefined">
+                  <r-time-ago :time="props.item[value['value']]"></r-time-ago>
+                </div>
+                <div v-else-if="value['option']['type']==='r-switch-input'">
+                  <r-switch-input
+                      :modelValue="props.item[value['value']]"
+                      :readonly="value['option']['formInput']===false"
+                      class="mt-0"
+                      @update:modelValue="value['option']['formInput']!==false?editItem(props.item,true,value['value']):''"
+                  ></r-switch-input>
+                </div>
+                <div v-else-if="value['option']['type'] === 'r-number-input'">
+                  {{ $n(props.item[value['value']]) }}
+                </div>
+                <div v-else-if="value['option']['type']!=='action'">
+                  {{
                   value['value'] in cast ?
-                      $helper.ifHas(props.item, '', value['value'], cast[value['value']])
-                      : props.item[value['value']]
-                }}
-              </div>
+                  $helper.ifHas(props.item, '', value['value'], cast[value['value']])
+                  : props.item[value['value']]
+                  }}
+                </div>
+              </slot>
             </slot>
             <div v-if="value['option']['type']==='action'">
               <r-btn v-if="!disableUpdate" class="mx-0 color-success-text"
@@ -194,7 +208,8 @@
                      icon text @click.prevent="deleteItem(props.item)">
                 <r-icon v-html="$r.icons.delete"></r-icon>
               </r-btn>
-              <r-btn v-for="(val,index) in actions" :key="index" :class="`color-${val.color}-text`" class="mx-0" icon
+              <r-btn v-for="(val,index) in actions" :key="index" :class="`color-${val.color}-text`"
+                     class="mx-0" icon
                      text @click.prevent="$emit(val.name,props.item)">
                 <r-icon exact v-html="val.icon"></r-icon>
               </r-btn>
@@ -204,7 +219,8 @@
       </template>
 
     </r-table>
-    <manage-footer v-model:page="page" v-model:per-page="itemsPerPage" :total="table.total"></manage-footer>
+    <manage-footer v-model:page="page" v-model:per-page="itemsPerPage"
+                   :total="table.total"></manage-footer>
     <r-confirm
         v-model="showConfirm"
         hard
@@ -221,9 +237,9 @@ export default {
   name: 'r-table-crud',
   components: {
     ManageHeader: defineAsyncComponent(() =>
-        import("./header.vue")
+        import('./header.vue')
     ), ManageFooter: defineAsyncComponent(() =>
-        import("./footer.vue")
+        import('./footer.vue')
     )
   },
   props: {
@@ -260,7 +276,7 @@ export default {
     disableDelete: Boolean,
     disableUpdate: Boolean,
     mcud: String,
-    itemId: {type: String, default: "_id"},
+    itemId: {type: String, default: '_id'},
     headers: Object
   },
   emits: ['actions'],
@@ -532,9 +548,9 @@ export default {
         let all = []
         if (this.mcud) {
           all.push({
-            option: {type: "mcud", sortable: false, formInput: false, priority: 10},
-            text: "action",
-            value: "action"
+            option: {type: 'mcud', sortable: false, formInput: false, priority: 10},
+            text: 'action',
+            value: 'action'
           })
         }
         all = all.concat(data.headers)

package/components/table/index.vue

@@ -43,6 +43,7 @@
                   <slot :key="key" :item="item" :open="open" :opened="opened" :show="show" :th="th"
                         name="row">
                     <td v-for="(value,k) in th" :key="`${key}- ${k}`">
+                      <slot :item="item" :value="value" :name="'td-'+value.value">
                       <div>
                         <r-btn v-if="show(k)"
                                icon text @click.prevent="open(key)">
@@ -51,6 +52,7 @@
                         </r-btn>
                         {{ item[value.value] }}
                       </div>
+                      </slot>
                     </td>
                   </slot>
                 </tr>
@@ -72,6 +74,7 @@
   </div>
   <r-modal v-if="editable" v-model="showModal">
     <div
+        :key="key"
         v-sortable="{
             items: cols,
             end: store_db,
@@ -120,6 +123,7 @@ export default {
   },
   data() {
     return {
+      key: 0,
       showTable: true,
       opened: null,
       sortKey: null,
@@ -132,14 +136,6 @@ export default {
       cols: []
     }
   },
-  created() {
-    if (!this.$r.icons.setting) {
-      this.$r.icons.setting = '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M19.14 12.94c.04-.3.06-.61.06-.94c0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6s3.6 1.62 3.6 3.6s-1.62 3.6-3.6 3.6z"/></svg>'
-    }
-    if (!this.$r.icons.drag) {
-      this.$r.icons.drag = '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M7 19v-2h2v2H7m4 0v-2h2v2h-2m4 0v-2h2v2h-2m-8-4v-2h2v2H7m4 0v-2h2v2h-2m4 0v-2h2v2h-2m-8-4V9h2v2H7m4 0V9h2v2h-2m4 0V9h2v2h-2M7 7V5h2v2H7m4 0V5h2v2h-2m4 0V5h2v2h-2Z"/></svg>'
-    }
-  },
   watch: {
     items: {
       immediate: true,
@@ -225,6 +221,7 @@ export default {
     },
     store_db(data) {
       this.$storage.set('table_' + this.hash_key, data)
+      this.key++
       this.check_hidden()
       if (this.responsive) {
         this.build()

package/components/timeline/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <r-container full-width :class="`${$r.prefix}timeline`">
-    <r-row no-gutters class="timeline-item" v-for="(item,i) in items" :key="i">
-      <r-col class="md-5" v-if="$r.breakpoint.mdAndUp">
-        <slot name="back" :item="item" :k="i"></slot>
+  <r-container :class="`${$r.prefix}timeline`" full-width>
+    <r-row v-for="(item,i) in items" :key="i" class="timeline-item" no-gutters>
+      <r-col v-if="$r.breakpoint.mdAndUp" class="md-5">
+        <slot :item="item" :k="i" name="back"></slot>
       </r-col>
       <r-col class="col-2 md-2">
-        <slot name="counter" :item="item" :k="i">
+        <slot :item="item" :k="i" name="counter">
           <div class="d-flex h-center v-center h-full">
             <div class="timeline-counter color-one d-flex h-center v-center">{{ i + 1 }}</div>
           </div>

package/components/tree/index.vue

@@ -125,12 +125,12 @@ $distance: 20px;
     height: 100%;
 
     &.tree-searchable {
-        .#{base.$prefix}float {
+      .#{base.$prefix}float {
             height: calc(100% - 70px)
         }
     }
 
-    .#{base.$prefix}float {
+  .#{base.$prefix}float {
         direction: ltr;
     }
 

package/directive/skeleton/style.scss

@@ -3,11 +3,13 @@
     opacity: 0 !important;
   }
 
-  -webkit-text-fill-color: transparent !important;
-
-  background-color: rgba(0, 0, 0, 0.12) !important;
-  overflow: hidden !important;
-  position: relative !important;
+  & {
+    -webkit-text-fill-color: transparent !important;
+    background-color: rgba(0, 0, 0, 0.12) !important;
+    overflow: hidden !important;
+    position: relative !important;
+  }
+;
 
   &:after {
     animation: skeletonloading 1.5s infinite;

package/directive/sortable/index.js

@@ -43,9 +43,7 @@ function mousestart(e, wrapper) {
     wrapper.el.insertBefore(holder, targetEl);
     wrapper.holder = holder
 
-    const y = event.y || event.pageY
-
-    targetEl.style.top = y - targetEl.clientHeight / 2 + "px";
+    targetEl.style.top = targetEl.offsetTop - targetEl.clientHeight / 2 + "px";
     targetEl.style.width = targetEl.clientWidth + "px";
     targetEl.classList.add("on-drag");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "renusify",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Vue3 Framework",
   "keywords": [
     "vuejs",