renusify 1.2.0 → 1.2.2

package/components/app/style.scss

@@ -33,6 +33,7 @@
     max-width: 100%;
     width: 100%;
     position: relative;
+    overflow-x: hidden;
   }
 
 }

package/components/bar/scss/toolbar.scss

@@ -81,7 +81,7 @@
   .toolbar-items {
     display: flex;
     height: inherit;
-    align-items: flex-end;
+    align-items: center;
   }
 
   .menu-title {

package/components/chat/MessageList.vue

@@ -8,35 +8,35 @@
     </div>
     <transition name="scale" v-if="!hideBottomBtn">
         <r-btn v-if="!is_bottom" fab class="go-buttom" :label="newMsg.num" @click.prevent="goTo(newMsg.first_id)">
-            <r-icon v-html="$r.icons.chevron_left"></r-icon>
+            <r-icon v-html="$r.icons.chevron_down"></r-icon>
         </r-btn>
     </transition>
 </template>
 
 <script>
-    import RChatMsg from "./chatMsg";
+import RChatMsg from "./chatMsg";
 
-    export default {
-        components: {
-            RChatMsg
-        },
-        emits: ["see"],
-        props: {
-            newMsg: {
-                type: Object, default: () => {
-                    return {
-                        num: 0,
-                        first_id: null
-                    }
-                }
-            },
-            hideBottomBtn: Boolean,
-            messages: {type: Array,},
-            myself: {type: Object},
-            participants: {type: Object}
-        },
-        data() {
-            return {
+export default {
+  components: {
+    RChatMsg
+  },
+  emits: ["see"],
+  props: {
+    newMsg: {
+      type: Object, default: () => {
+        return {
+          num: 0,
+          first_id: null
+        }
+      }
+    },
+    hideBottomBtn: Boolean,
+    messages: {type: Array,},
+    myself: {type: Object},
+    participants: {type: Object}
+  },
+  data() {
+    return {
                 timeout_id: null,
                 timeout_scroll: null,
                 is_bottom: false

package/components/codeEditor/run.vue

@@ -10,74 +10,17 @@ export default {
     template: String,
     script: String
   },
-  methods: {
-    strToObj2(str) {
-      str = str.trim()
-      str = this.$helper.replacer(str, "\n", '')
-      str = this.$helper.replacer(str, "\r", '')
-      let open = 0
-      let pre = 0
-      let to = 0
-      let items = []
-      const s = str
-      s.split('').forEach((c, i) => {
-        to++
-        if (c === '{') {
-          open++
-        }
-        if (c === '}') {
-          open--
-        }
-        if (open === 0 && c === ',') {
-          items.push(str.substr(pre, to - 1))
-          pre = i + 1
-          to = 0
-        }
-      })
-      items.push(str.substr(pre, str.length))
-      return items
-    },
-    strToObj(str) {
-      str = str.trim()
-      if (str.substr(0, 1) === '{') {
-        str = str.substr(1, str.length - 2)
-      }
-      let res = {}
-      this.strToObj2(str).forEach((item) => {
-        item = item.trim()
-        const f = item.indexOf('(')
-        const o = item.indexOf(':')
-
-        if ((f > 0 && f < o) || o < 0) {
-          res[item.substr(0, f)] = eval("(" + 'function ' + item + ")");
-        } else {
-
-          item = [item.substr(0, o).trim(), item.substr(o, item.length).replace(':', '').trim()]
-          if (item[1].substr(0, 1) === '{') {
-            res[item[0]] = this.strToObj(item[1])
-          } else {
-            res[item[0]] = eval(item[1])
-          }
-
-        }
-      })
-
-      return res
-    },
-  },
   computed: {
     page() {
       let temp = this.template || ''
       let scr = this.script || 'name:"test"'
-
       scr = this.$helper.replacer(scr, '&lt;', '<')
       scr = this.$helper.replacer(scr, '&gt;', '>')
-
       return defineAsyncComponent(() =>
           new Promise((resolve, reject) => {
             resolve({
               template: temp,
-              ...this.strToObj(scr)
+              ...eval('Object({' + scr + '})')
             })
           }))
     }

package/components/container/style.scss

@@ -1,7 +1,6 @@
 @import "renusify/style/_include.scss";
 
 .#{$prefix}container {
-  max-width: 100%;
   padding: $container-padding-x;
   margin-right: auto;
   margin-left: auto;
@@ -9,7 +8,8 @@
   @include make-container-max-widths;
 
   &.container-fluid {
-    max-width: 100%
+    max-width: 100%;
+    width: 100%;
   }
 
   &.fill {

package/components/cropper/index.vue

@@ -0,0 +1,321 @@
+<template>
+  <div :class="$r.prefix + 'cropper'">
+    <div v-if="show && allWPH.length > 1">
+      <r-chip
+          v-for="(item, i) in allWPH"
+          :key="i"
+          :class="{ 'color-one-text': item === currentWPH }"
+          class="me-1 mb-1 cursor-pointer"
+          label
+          outlined
+          @click.prevent="changeWPH(item)"
+      >{{ item }}
+      </r-chip
+      >
+    </div>
+    <div
+        v-if="show"
+        ref="imageBox"
+        v-touch="{
+        start: moveStart,
+        move: setPosition,
+      }"
+        class="image-box"
+    >
+      <div ref="thumbBox" class="thumb-box"></div>
+    </div>
+    <div class="action d-flex">
+      <template v-if="show">
+        <r-btn @click="getCrop">{{ $t("crop", "renusify") }}</r-btn>
+        <r-spacer></r-spacer>
+        <r-btn icon tile @click.prevent="zoomIn()">+</r-btn>
+        <r-btn icon tile @click.prevent="zoomOut()">-</r-btn>
+      </template>
+
+      <input
+          v-if="!show && selectImg"
+          ref="file"
+          accept="image/*"
+          type="file"
+          @change="select_img"
+      />
+    </div>
+    <img
+        v-if="showCropped && cropped"
+        :height="height"
+        :src="cropped"
+        :width="width"
+        alt="cropped"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "r-cropper",
+  props: {
+    wPH: {type: [Number, String, Array], default: 1},
+    imgSrc: [String, Blob],
+    maxWidth: Number,
+    showCropped: Boolean,
+    getBlob: Boolean,
+    selectImg: {type: Boolean, default: true},
+  },
+  data() {
+    return {
+      show: false,
+      cropped: null,
+      width: null,
+      height: null,
+      state: {},
+      ratio: 1,
+      image: new Image(),
+      currentWPH: null,
+    };
+  },
+  mounted() {
+    this.width = 280;
+    this.height = 280;
+    this.currentWPH = this.allWPH[0];
+    if (this.currentWPH > 1) {
+      this.height = this.width / this.currentWPH;
+    } else {
+      this.width = this.height * this.currentWPH;
+    }
+    if (typeof this.imgSrc === "string") {
+      this.crop(this.imgSrc);
+    } else {
+      const that = this;
+      const reader = new FileReader();
+      reader.onload = function (e) {
+        that.crop(e.target.result);
+      };
+
+      reader.readAsDataURL(this.imgSrc);
+    }
+  },
+  computed: {
+    allWPH() {
+      const is_array = Array.isArray(this.wPH);
+      let wPH = [];
+      if (is_array) {
+        this.wPH.forEach((item) => {
+          item = item.toString().split("/");
+          if (item.length === 2) {
+            wPH.push(
+                parseFloat((parseFloat(item[0]) / parseFloat(item[1])).toFixed(4))
+            );
+          } else {
+            wPH.push(parseFloat(parseFloat(item[0]).toFixed(4)));
+          }
+        });
+      } else {
+        if (typeof this.wPH === "string") {
+          let item = this.wPH;
+          item = item.split("/");
+          if (item.length === 2) {
+            wPH.push(
+                parseFloat((parseFloat(item[0]) / parseFloat(item[1])).toFixed(4))
+            );
+          } else {
+            wPH.push(parseFloat(parseFloat(item[0]).toFixed(4)));
+          }
+        } else {
+          wPH.push(parseFloat(parseFloat(this.wPH).toFixed(4)));
+        }
+      }
+      return wPH;
+    },
+  },
+  methods: {
+    getCrop() {
+      this.cropped = this.getDataURL();
+      if (this.getBlob) {
+        this.$emit("cropped", this.get_blob());
+      }
+
+      this.show = false;
+    },
+    changeWPH(e) {
+      this.currentWPH = e;
+      this.width = 280;
+      this.height = 280;
+      if (this.currentWPH > 1) {
+        this.height = this.width / this.currentWPH;
+      } else {
+        this.width = this.height * this.currentWPH;
+      }
+      let thumbBox = this.$refs.thumbBox;
+      thumbBox.style.width = this.width + "px";
+      thumbBox.style.height = this.height + "px";
+    },
+    moveStart() {
+      let el = this.$refs.imageBox;
+      let bg = el.style.backgroundPosition.split(" ");
+      this.state.x = parseInt(bg[0]);
+      this.state.y = parseInt(bg[1]);
+    },
+    setPosition(e) {
+      let el = this.$refs.imageBox;
+
+      let bgX = e.goX + this.state.x;
+      let bgY = e.goY + this.state.y;
+
+      el.style.backgroundPosition = bgX + "px " + bgY + "px";
+    },
+    select_img(e) {
+      const that = this;
+      const reader = new FileReader();
+      reader.onload = function (e) {
+        that.crop(e.target.result);
+      };
+
+      this.$emit("orginal", e.target.files[0]);
+      reader.readAsDataURL(e.target.files[0]);
+    },
+    getDataURL() {
+      let el = this.$refs.imageBox;
+      let thumbBox = this.$refs.thumbBox;
+      let width = thumbBox.clientWidth,
+          height = thumbBox.clientHeight,
+          canvas = document.createElement("canvas"),
+          dim = el.style.backgroundPosition.split(" "),
+          size = el.style.backgroundSize.split(" "),
+          dx = parseInt(dim[0]) - el.clientWidth / 2 + width / 2 + 1,
+          dy = parseInt(dim[1]) - el.clientHeight / 2 + height / 2 + 1,
+          dw = parseInt(size[0]),
+          dh = parseInt(size[1]),
+          sh = parseInt(this.image.height),
+          sw = parseInt(this.image.width);
+
+      let n = 0;
+      if (dw >= 280) {
+        n = Math.abs((sw / dw) * dx * 2);
+      }
+      canvas.width = sw - n;
+      if (this.maxWidth && canvas.width > this.maxWidth) {
+        canvas.width = this.maxWidth;
+      }
+      canvas.height = canvas.width / this.currentWPH;
+      while (
+          parseFloat((canvas.width / canvas.height).toFixed(4)) !==
+          this.currentWPH
+          ) {
+        canvas.width -= 1;
+        canvas.height = canvas.width / this.currentWPH;
+        if (canvas.width < 1) {
+          break;
+        }
+      }
+      let context = canvas.getContext("2d");
+      context.drawImage(
+          this.image,
+          0,
+          0,
+          sw,
+          sh,
+          (dx * canvas.width) / width,
+          (dy * canvas.height) / height,
+          (dw * canvas.width) / width,
+          (dh * canvas.height) / height
+      );
+      return canvas.toDataURL("image/png");
+    },
+    get_blob() {
+      let imageData = this.getDataURL();
+      let b64 = imageData.replace("data:image/png;base64,", "");
+      let binary = atob(b64);
+      let array = [];
+      for (let i = 0; i < binary.length; i++) {
+        array.push(binary.charCodeAt(i));
+      }
+      let b = new Blob([new Uint8Array(array)], {
+        type: "image/png",
+      });
+      b.name = "file.png";
+      return b;
+    },
+    zoomIn() {
+      this.ratio += 0.01;
+      this.setBackground();
+    },
+    zoomOut() {
+      this.ratio -= 0.01;
+      this.setBackground();
+    },
+    setBackground() {
+      let el = this.$refs.imageBox;
+      let w = parseInt(this.image.width) * this.ratio;
+      let h = parseInt(this.image.height) * this.ratio;
+
+      let pw = (el.clientWidth - w) / 2;
+      let ph = (el.clientHeight - h) / 2;
+
+      el.setAttribute(
+          "style",
+          "background-image: url(" +
+          this.image.src +
+          "); " +
+          "background-size: " +
+          w +
+          "px " +
+          h +
+          "px; " +
+          "background-position: " +
+          pw +
+          "px " +
+          ph +
+          "px; " +
+          "background-repeat: no-repeat"
+      );
+    },
+    crop(img) {
+      this.show = true;
+      this.cropped = null;
+      setTimeout(() => {
+        const that = this;
+        let thumbBox = this.$refs.thumbBox;
+        thumbBox.style.width = this.width + "px";
+        thumbBox.style.height = this.height + "px";
+
+        this.image.onload = function () {
+          that.ratio = parseInt(that.width) / that.image.width;
+          that.setBackground();
+        };
+        this.image.src = img;
+      }, 100);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+
+.#{$prefix}cropper {
+  width: 300px;
+
+  .image-box {
+    position: relative;
+    height: 300px;
+    width: 300px;
+    border: 1px solid #aaa;
+    overflow: hidden;
+    background: #fff no-repeat;
+    cursor: move;
+  }
+
+  .thumb-box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 200px;
+    height: 200px;
+    transform: translate(-50%, -50%);
+    box-sizing: border-box;
+    border: 1px solid rgb(130, 130, 130);
+    box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.4);
+    background: none repeat scroll 0 0 transparent;
+  }
+}
+</style>

package/components/form/fileUploader/file.js

@@ -15,7 +15,11 @@ export default {
         addFile() {
             this.CancelTokenSource = this.$axios.CancelToken.source()
             this.file = this.$refs.file.files[0]
-            this.checkSave()
+            if (!this.wPH) {
+                this.checkSave()
+            } else {
+                this.showCrop = true
+            }
             this.showAdd = false
         },
         pickFile() {
@@ -97,7 +101,7 @@ export default {
         saveImage() {
             this.imageStatus = 'inProgress'
             let fileData = new FormData()
-            fileData.append('file', this.file)
+            fileData.append('file', this.file, this.file.name)
             let headers = this.headers
             if (!headers) {
                 headers = {}
@@ -140,4 +144,4 @@ export default {
             )
         },
     }
-}
+}

package/components/form/fileUploader/single.vue

@@ -14,7 +14,7 @@
         >
           {{ `% ${uploadPercentage}` }}
         </r-progress-circle>
-        <r-btn :href="'/'+fileLink" class="image-copy" icon>
+        <r-btn :href="'/'+fileLink" class="image-copy" icon target="_blank">
           <r-icon v-html="$r.icons.eye"></r-icon>
         </r-btn>
         <img v-if="isImg()" :class="`image ${imageStatus} `" :src="getUrl(file)">
@@ -40,6 +40,12 @@
            type="file"
            v-if="showFile"
     >
+    <r-modal v-model="showCrop" maxWidth="300px">
+      <r-card>
+        <r-cropper v-if="wPH&&file" :imgSrc="file" :selectImg="false" :w-p-h="wPH" get-blob showCropped
+                   @cropped="file=$event,checkSave()"></r-cropper>
+      </r-card>
+    </r-modal>
   </div>
 </template>
 
@@ -70,11 +76,12 @@ export default {
     },
     metaRequired: Boolean
   },
-  emits:['file-link','select'],
+  emits: ['file-link', 'select'],
   data() {
     return {
       showAdd: true,
       showFile: true,
+      showCrop: false,
       metaList: {}
     }
   },

package/components/formCreator/index.vue

@@ -1,11 +1,12 @@
 <template>
   <r-card v-if="!autoSend" class="overflow-auto">
     <r-container>
-      <h1 class="title">{{ title }}</h1>
+      <h1 v-if="title" class="title">{{ title }}</h1>
       <r-form ref="form" v-model="valid" @submit.prevent="save">
         <r-row>
           <template :key="key" v-for="(item,key) in options">
-            <r-col class="col-12" v-if="item['formInput']!==false&&iff(options[key])">
+            <r-col v-if="item['formInput']!==false&&iff(options[key])"
+                   :class="options[key]['r-col']?options[key]['r-col']:'col-12'">
               <component
                   :is="'r-'+item['type']"
                   :label="$t(key)"
@@ -147,7 +148,7 @@ export default {
     getAttr(data) {
       let res = {}
       for (let i in data) {
-        if (this.$helper.hasKey(data, i) && !['formInput', 'sortable', 'type', 'tableShow', 'priority', '$if'].includes(i)) {
+        if (this.$helper.hasKey(data, i) && !['formInput', 'sortable', 'type', 'tableShow', 'priority', '$if', 'r-col'].includes(i)) {
           if (i === '$bind') {
             data[i].forEach((item) => {
               res[item[0]] = this.editedItem[item[1]]

package/components/img/index.vue

@@ -22,6 +22,7 @@
 </template>
 <script>
 import SvgImg from "./svgImg";
+
 export default {
   name: 'r-img',
   components: {SvgImg},
@@ -83,7 +84,7 @@ export default {
         return null
       }
       let res = this.src
-      if (!(res.startsWith('/') || res.startsWith('http://') || res.startsWith('https://'))) {
+      if (!(res.startsWith('/') || res.startsWith('http://') || res.startsWith('https://') || res.startsWith('data:image/'))) {
         res = '/' + res
       }
       if (this.src.search('[?]') === -1) {

package/components/index.js

@@ -42,6 +42,7 @@ const list = {
     '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': {
@@ -56,7 +57,7 @@ const list = {
     },
     'r-file-input': {
         'p': 'form/fileUploader/index.vue',
-        'c': ['r-input', 'r-row', 'r-btn', 'r-icon', 'r-progress-circle', 'r-text-input'],
+        'c': ['r-input', 'r-row', 'r-btn', 'r-icon', 'r-progress-circle', 'r-text-input', 'r-cropper'],
         'd': []
     },
     'r-tel-input': {
@@ -141,7 +142,7 @@ const list = {
     'r-progress-line': {'p': 'progress/line.vue', 'c': [], 'd': []},
     'r-search-box': {
         'p': 'searchBox/index.vue',
-        'c': ['r-input', 'r-progress-line', 'r-card', 'r-list', 'r-btn', 'r-icon'],
+        'c': ['r-progress-line', 'r-card', 'r-list', 'r-btn', 'r-icon', 'r-select'],
         'd': ['click-outside']
     },
     'r-skeleton': {'p': 'skeleton/index.vue', 'c': [], 'd': []},

package/components/searchBox/index.vue

@@ -1,75 +1,99 @@
 <template>
-  <div :class="$r.prefix+'search-container'">
-    <template v-if="!closable||show">
-      <div class="search-input" v-click-outside="handleclose">
-        <r-input :active="active"
-                 :icon="$r.icons.search"
-                 @icon="show=false"
-                 v-bind="$attrs"
-                 :class="{'z-important':open}"
-                 :modelValue="lazyValue"
-                 :input-control-class="[inputControlClass,{'search-active-border':open}]">
-          <input :autofocus="autofocus"
-                 type="text"
-                 @focusin="active=true"
-                 @focusout="active=false"
-                 @input="handle"
-                 :value="lazyValue"
-                 autocomplete="no"
-          />
-          <r-progress-line v-if="loading" color="color-two" class="w-full"></r-progress-line>
-        </r-input>
-        <r-card v-if="open&&(list.length>0||!loading)"
-                class="card-select  z-important"
-                :class="{'card-tile':$attrs.tile!==undefined&&$attrs.tile!==false,'to-top':openToTop}"
+  <div :class="$r.prefix + 'search-box'">
+    <template v-if="!closable || show">
+      <div
+          v-click-outside="handleclose"
+          :class="[inputClass, { 'z-important search-open': open }]"
+          class="search-input"
+      >
+        <span v-if="categories" class="w-30">
+          <r-select-input
+              v-model="category"
+              :items="categories"
+              class="mt-0"
+              disable-search
+              first-select
+              hide
+              justValue
+          ></r-select-input>
+        </span>
+        <span
+            :class="{ 'w-70': categories, 'w-full': !categories }"
+            class="d-flex v-center"
         >
-          <r-list v-if="list.length>0"
-                  :items="list"
-                  @update:modelValue="listInput">
-            <template v-slot="props">
-              <slot :item="props.item">
-                <div class="list-title">{{ props.item['name'] }}</div>
-              </slot>
-            </template>
-          </r-list>
-          <div v-else-if="!loading" class="py-5">
-            {{ notFoundMsg }}
-          </div>
-        </r-card>
+          <input
+              :placeholder="label"
+              :value="lazyValue"
+              autocomplete="no"
+              class="flex-grow-1"
+              type="text"
+              @focusin="active = true"
+              @focusout="active = false"
+              @input="handle"
+          />
+          <r-icon v-html="$r.icons.search"></r-icon>
+        </span>
       </div>
+      <r-card
+          v-if="open"
+          :class="{
+          'card-tile': $attrs.tile !== undefined && $attrs.tile !== false,
+          'to-top': openToTop,
+        }"
+          class="card-search z-important"
+      >
+        <r-progress-line
+            v-if="loading"
+            class="w-full"
+            color="color-two"
+        ></r-progress-line>
+        <r-list
+            v-if="list.length > 0"
+            :items="list"
+            @update:modelValue="listInput"
+        >
+          <template v-slot="props">
+            <slot :item="props.item">
+              <div class="list-title">{{ props.item["name"] }}</div>
+            </slot>
+          </template>
+        </r-list>
+        <div v-else-if="!loading" class="py-5">
+          {{ notFoundMsg }}
+        </div>
+      </r-card>
       <transition name="fade" v-if="!noOverlay">
         <div v-if="open" class="search-shadow"></div>
       </transition>
     </template>
-    <r-btn v-else icon class="mt-5" @click="show=!show">
+    <r-btn v-else class="mt-5" icon @click="show = !show">
       <r-icon v-html="$r.icons.search"></r-icon>
     </r-btn>
   </div>
 </template>
 <script>
-
 export default {
-  name: 'r-search-box',
-  inheritAttrs: false,
+  name: "r-search-box",
   props: {
     closable: Boolean,
     notFoundMsg: {
       type: String,
-      default: "Can't Find Anything :("
+      default: "Can't Find Anything :(",
     },
+    label: String,
     url: String,
+    inputClass: String,
     query: {
       type: String,
-      default: 'search'
+      default: "search",
     },
-    inputControlClass: [String, Object, Array],
     modelValue: [String, Number],
-    autofocus: Boolean,
     noOverlay: Boolean,
     openToTop: Boolean,
-    headers: Object
+    categories: Array,
+    headers: Object,
   },
-emits:['update:modelValue','select'],
+  emits: ["update:modelValue", "select"],
   data() {
     return {
       show: false,
@@ -78,57 +102,63 @@ emits:['update:modelValue','select'],
       active: false,
       open: false,
       idSet: null,
-      list: []
-    }
+      category: null,
+      list: [],
+    };
   },
   watch: {
     modelValue() {
-      this.lazyValue = this.modelValue
-    }
+      this.lazyValue = this.modelValue;
+    },
   },
   methods: {
     handleclose() {
-      this.open = false
+      this.open = false;
     },
     get() {
       if (this.url) {
-        this.loading = true
-        this.$axios.get(this.url, {
-          params: {
-            [this.query]: this.lazyValue
-          },
-          headers: this.headers
-        }).then(({data}) => {
-          this.list = data
-          this.loading = false
-          this.open = true
-        }, (e) => {
-          this.loading = false
-        })
+        this.loading = true;
+        this.$axios
+            .get(this.url, {
+              params: {
+                [this.query]: this.lazyValue,
+                category: this.category,
+              },
+              headers: this.headers,
+            })
+            .then(
+                ({data}) => {
+                  this.list = data;
+                  this.loading = false;
+                  this.open = true;
+                },
+                () => {
+                  this.loading = false;
+                }
+            );
       }
     },
     handle(e) {
-      this.lazyValue = e.target.value
-      this.open = true
-      this.loading = true
-      clearTimeout(this.idSet)
+      this.lazyValue = e.target.value;
+      this.open = true;
+      this.loading = true;
+      clearTimeout(this.idSet);
       this.idSet = setTimeout(() => {
-        this.$emit('update:modelValue', this.lazyValue)
-        this.get()
-      }, 1000)
+        this.$emit("update:modelValue", this.lazyValue);
+        this.get();
+      }, 1000);
     },
     listInput(e) {
-      this.$emit('select', e)
-      this.open = false
-    }
-  }
-}
-
+      this.$emit("select", e);
+      this.open = false;
+    },
+  },
+};
 </script>
 <style lang="scss">
-@import '../../style/include';
+@import "~renusify/style/include";
 
-.#{$prefix}search-container {
+.#{$prefix}search-box {
   position: relative;
 
   .to-top {
@@ -136,35 +166,75 @@ emits:['update:modelValue','select'],
   }
 
   .search-input {
+    display: flex;
+    align-items: center;
+    border: solid 1px var(--color-border);
+    color: var(--color-text-primary);
+    position: relative;
+    border-radius: map-get($borders, "md");
+
     .sheet {
       transition: 0.5s all ease;
     }
+  }
 
-    .card-select {
-      position: absolute;
-      left: 0;
-      width: 100%;
-      overflow-y: auto;
-      max-height: 300px;
+  .search-open {
+    border-bottom-left-radius: 0px !important;
+    border-bottom-right-radius: 0px !important;
+  }
 
-      &:not(.card-tile) {
-        border-radius: 0 0 20px 20px;
-      }
-    }
+  input {
+    outline: none;
+    line-height: 20px;
+    padding: 12px;
+    max-width: 100%;
+    min-width: 0px;
+    caret-color: var(--color-text-primary);
+  }
 
-    .search-active-border:not(.input-tile) {
-      border-radius: 20px 20px 0 0;
-    }
+  .card-search {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    overflow-y: auto;
+    max-height: 300px;
+    border-radius: 0 0 map-get($borders, "md") map-get($borders, "md");
   }
 
   .search-shadow {
     position: fixed;
     width: 100vw;
     height: 100vh;
-    z-index: map_get($z-index, 'medium');
+    z-index: map_get($z-index, "medium");
     top: 0;
     left: 0;
     backdrop-filter: blur(3px) grayscale(30%);
   }
+
+  .#{$prefix}select-container {
+    .input-control {
+      border-radius: 0;
+      min-height: 30px;
+      @include ltr() {
+        border-right: 1px solid var(--color-border) !important;
+      }
+
+      @include rtl() {
+        border-left: 1px solid var(--color-border) !important;
+      }
+    }
+
+    .card-select {
+      top: -6px;
+      border-radius: map-get($borders, "md");
+      @include ltr() {
+        border-top-right-radius: 0 !important;
+      }
+
+      @include rtl() {
+        border-top-left-radius: 0 !important;
+      }
+    }
+  }
 }
 </style>

package/package.json

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

package/style/colors.scss

@@ -73,7 +73,7 @@ $colorsList: (
 @each $color_name, $color_value in $colorMain {
   .color-#{$color_name} {
     @include background-color(var(--color-#{$color_name}), true);
-    @include text-color(var(--color-#{$color_name}-text),true);
+    @include text-color(var(--color-#{$color_name}-text));
   }
   .color-#{$color_name}-text {
     @include text-color(var(--color-#{$color_name}), true);

package/style/variables/utilities.scss

@@ -100,6 +100,7 @@ $utilities: map-merge(
                                         center: center,
                                         space-between: space-between,
                                         space-around: space-around,
+                                        space-evenly: space-evenly,
                                 )
                         ),
                         "align-items": (