renusify 2.3.1 → 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/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/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.1",
+  "version": "2.3.2",
   "description": "Vue3 Framework",
   "keywords": [
     "vuejs",

package/tools/icons.js

@@ -23,5 +23,7 @@ export let Icons = {
     'attachment': '<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.5 18A5.5 5.5 0 0 1 2 12.5A5.5 5.5 0 0 1 7.5 7H18a4 4 0 0 1 4 4a4 4 0 0 1-4 4H9.5A2.5 2.5 0 0 1 7 12.5A2.5 2.5 0 0 1 9.5 10H17v1.5H9.5a1 1 0 0 0-1 1a1 1 0 0 0 1 1H18a2.5 2.5 0 0 0 2.5-2.5A2.5 2.5 0 0 0 18 8.5H7.5a4 4 0 0 0-4 4a4 4 0 0 0 4 4H17V18H7.5Z"/></svg>',
     'send': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m2 21l21-9L2 3v7l15 2l-15 2v7Z"/></svg>',
     'sticker': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M5.5 2C3.56 2 2 3.56 2 5.5v13C2 20.44 3.56 22 5.5 22H16l6-6V5.5C22 3.56 20.44 2 18.5 2h-13m.25 2h12.5A1.75 1.75 0 0 1 20 5.75V15h-1.5c-1.94 0-3.5 1.56-3.5 3.5V20H5.75A1.75 1.75 0 0 1 4 18.25V5.75A1.75 1.75 0 0 1 5.75 4m8.69 2.77c-.16 0-.32.02-.47.06c-.94.26-1.47 1.22-1.23 2.17c.05.15.12.3.21.44l3.23-.88c0-.17-.02-.34-.06-.51c-.21-.75-.9-1.28-1.68-1.28M8.17 8.5c-.17 0-.32 0-.47.05c-.93.26-1.48 1.22-1.23 2.15c.03.16.12.3.21.46l3.23-.88c0-.17-.02-.34-.06-.5A1.72 1.72 0 0 0 8.17 8.5m8.55 2.76l-9.13 2.51a5.266 5.266 0 0 0 5.36 1.64a5.273 5.273 0 0 0 3.77-4.15Z"/></svg>',
-    'search': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5Z"/></svg>'
+    'search': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5Z"/></svg>',
+    '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>',
+    '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>'
 }