renusify 1.0.6 → 1.0.8

package/components/chat/index.vue

@@ -1,119 +1,114 @@
 <template>
-    <div :class="$r.prefix+'chat'">
-        <div class="chat-header" v-if="title">{{title}}</div>
-        <message-list ref="msgList" @see="$emit('see', $event)" :messages="msgs" :myself="myself"
-                      :participants="participants"
-                      :newMsg="newMsg"
-                      :hideBottomBtn="hideBottomBtn"
-        >
-        </message-list>
-        <r-chat-input v-if="!hideSend"
-                      @update:model-value="onMsgSubmit"
-                      :send-by-enter="sendByEnter"
-                      :maxLenMsg="maxLenMsg"
-                      :placeholder="placeholder"
-                      :uploadLink="uploadLink"
-                      :maxFileSize="maxFileSize"
-                      :canFile="canFile"
-        ></r-chat-input>
-    </div>
+  <div :class="$r.prefix+'chat'">
+    <div class="chat-header" v-if="title">{{ title }}</div>
+    <message-list ref="msgList" @see="$emit('see', $event)" :messages="msgs" :myself="myself"
+                  :participants="participants"
+                  :newMsg="newMsg"
+                  :hideBottomBtn="hideBottomBtn"
+    >
+    </message-list>
+    <r-chat-input v-if="!hideSend"
+                  @update:model-value="onMsgSubmit"
+                  :send-by-enter="sendByEnter"
+                  :maxLenMsg="maxLenMsg"
+                  :placeholder="placeholder"
+                  :uploadLink="uploadLink"
+                  :maxFileSize="maxFileSize"
+                  :canFile="canFile"
+    ></r-chat-input>
+  </div>
 </template>
 <script>
-    import MessageList from "./MessageList";
-    import RChatInput from "./chatInput";
+import MessageList from "./MessageList";
+import RChatInput from "./chatInput";
 
-    export default {
-        name: 'r-chat',
-        components: {RChatInput, MessageList},
-        props: {
-            sendByEnter: Boolean,
-            placeholder: {type: String, default: 'type here'},
-            hideBottomBtn: Boolean,
-            hideSend: Boolean,
-            maxLenMsg: {type: Number, default: 200},
-            newMsg: {
-                type: Object, default: () => {
-                    return {
-                        num: 0,
-                        first_id: null
-                    }
-                }
-            },
-            participants: {
-                type: Object,
-                required: true
-            },
-            messages: {
-                type: Array,
-                required: true
-            },
-            myself: {
-                type: Object,
-                required: true
-            },
-            title: String,
-            canFile: Boolean,
-            maxFileSize: {type:Number,default:1024*1024},
-            uploadLink: {
-                type: String,
-                default:'/storage/chat'
-            },
-        },
-        data() {
-            return {
-                timeout_id: null
-            }
-        },
-        computed: {
-            msgs() {
-                let res = []
-                this.messages.forEach((msg, i) => {
-                    let m = Object.assign({}, msg)
-                    delete m.user_id
-                    if (res[res.length - 1] && msg.user_id === res[res.length - 1].user_id) {
-                        res[res.length - 1]['list'].push(m)
-                    } else {
-                        res.push({
-                            '_id': i,
-                            'user_id': msg.user_id,
-                            'list': [m]
-                        })
-                    }
-                })
-                return res
-            }
-        },
-        methods: {
-            onMsgSubmit: function (message) {
-                let d=message
-                 d.id= this.$helper.uniqueId(16)
-                 d.created_at= new Date()
+export default {
+  name: 'r-chat',
+  components: {RChatInput, MessageList},
+  props: {
+    sendByEnter: Boolean,
+    placeholder: {type: String, default: 'type here'},
+    hideBottomBtn: Boolean,
+    hideSend: Boolean,
+    maxLenMsg: {type: Number, default: 200},
+    newMsg: {
+      type: Object, default: () => {
+        return {
+          num: 0,
+          first_id: null
+        }
+      }
+    },
+    participants: {
+      type: Object,
+      required: true
+    },
+    messages: {
+      type: Array,
+      required: true
+    },
+    myself: {
+      type: Object,
+      required: true
+    },
+    title: String,
+    canFile: Boolean,
+    maxFileSize: {type: Number, default: 1024 * 1024},
+    uploadLink: {
+      type: String,
+      default: '/storage/chat'
+    },
+  },
+  data() {
+    return {
+      timeout_id: null
+    }
+  },
+  computed: {
+    msgs() {
+      let res = []
+      this.messages.forEach((msg, i) => {
+        let m = Object.assign({}, msg)
+        delete m.user_id
+        if (res[res.length - 1] && msg.user_id === res[res.length - 1].user_id) {
+          res[res.length - 1]['list'].push(m)
+        } else {
+          res.push({
+            '_id': i,
+            'user_id': msg.user_id,
+            'list': [m]
+          })
+        }
+      })
+      return res
+    }
+  },
+  methods: {
+    onMsgSubmit: function (message) {
+      let d = message
+      d.id = this.$helper.uniqueId(16)
+      d.created_at = new Date()
 
-                this.$emit("msg-submit", d)
-                clearTimeout(this.timeout_id)
-                this.timeout_id = setTimeout(() => {
-                    this.$refs.msgList.goToBottom()
-                }, 100)
-            }
-        },
+      this.$emit("msg-submit", d)
+      clearTimeout(this.timeout_id)
+      this.timeout_id = setTimeout(() => {
+        this.$refs.msgList.goToBottom()
+      }, 100)
     }
+  },
+}
 </script>
 <style lang="scss">
-    @import "../../style/include";
+@import "../../style/include";
 
-    .#{$prefix}chat {
-        position: relative;
-        display: flex;
-        width: 100%;
-        height: 100%;
-        flex-direction: column;
-        align-items: stretch;
-        overflow: hidden;
-        @include light() {
-            background: var(--color-background-two-light);
-        }
-        @include dark() {
-            background: var(--color-background-two-dark);
-        }
-    }
+.#{$prefix}chat {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: stretch;
+  overflow: hidden;
+  background: var(--color-background-two);
+}
 </style>

package/components/chip/style.scss

@@ -1,4 +1,5 @@
 @import "renusify/style/_include.scss";
+
 $chip-avatar-size: 24px !default;
 $chip-close-size: 18px !default;
 $chip-icon-margin-after: 8px !default;
@@ -16,26 +17,26 @@ $chip-transition-duration: 0.28s !default;
 $chip-transition-fn: map-get($transition, 'fast-out-slow-in') !default;
 $icon-outlined-border-width: thin !default;
 $icon-sizes: (
-  'x-small': (
-    'font-size': 10,
-    'height': 16
-  ),
-  'small': (
-    'font-size': 12,
-    'height': 24
-  ),
-  'default': (
-    'font-size': 14,
-    'height': 32
-  ),
-  'large': (
-    'font-size': 16,
-    'height': 54
-  ),
-  'x-large': (
-    'font-size': 18,
-    'height': 66
-  )
+        'x-small': (
+                'font-size': 10,
+                'height': 16
+        ),
+        'small': (
+                'font-size': 12,
+                'height': 24
+        ),
+        'default': (
+                'font-size': 14,
+                'height': 32
+        ),
+        'large': (
+                'font-size': 16,
+                'height': 54
+        ),
+        'x-large': (
+                'font-size': 18,
+                'height': 66
+        )
 ) !default;
 
 
@@ -53,19 +54,12 @@ $icon-sizes: (
   transition-timing-function: $chip-transition-fn;
   vertical-align: middle;
 
-  @include light() {
-    border-color: var(--color-divider-light);
-    color:var(--color-text-primary-light);
-    &:not(.chip-active) {
-    background:var(--color-chips-light);
-  }
-  }
-  @include dark() {
-    border-color: var(--color-divider-dark);
-    color:var(--color-text-primary-dark);
-    &:not(.chip-active) {
-    background:var(--color-chips-dark);
-  }
+
+  border-color: var(--color-divider);
+  color: var(--color-text-primary);
+
+  &:not(.chip-active) {
+    background: #e0e0e0;
   }
 
   @include states();

package/components/container/style.scss

@@ -1,4 +1,5 @@
 @import "renusify/style/_include.scss";
+
 .#{$prefix}container {
   max-width: 100%;
   padding: $container-padding-x;
@@ -32,11 +33,11 @@
   }
 
   &-dense {
-    margin-right: div($form-grid-gutter , -2);
-    margin-left: div($form-grid-gutter ,-2) ;
+    margin-right: div($form-grid-gutter, -2);
+    margin-left: div($form-grid-gutter, -2);
 
     .col {
-      padding:div($form-grid-gutter , 2) !important;
+      padding: div($form-grid-gutter, 2) !important;
     }
   }
 }
@@ -68,18 +69,15 @@ $divider-inset-margin: 72px !default;
   height: 0px;
   max-height: 0px;
   transition: inherit;
-  @include dark(){
-    border-top: solid thin var(--color-divider-dark)
-  }
-  @include light(){
-    border-top: solid thin var(--color-divider-light)
-  }
+
+  border-top: solid thin var(--color-divider);
+
   &.divider-inset:not(.divider-vertical) {
     max-width: calc(100% - #{$divider-inset-margin});
 
-      margin-left: $divider-inset-margin;
+    margin-left: $divider-inset-margin;
 
-      margin-right: $divider-inset-margin;
+    margin-right: $divider-inset-margin;
 
   }
 

package/components/form/camInput.vue

@@ -344,7 +344,7 @@ export default {
 
 .#{$prefix}cam-input {
   video {
-    border: 1px solid var(--color-border-light);
+    border: 1px solid var(--color-border);
   }
 
   .self-view {

package/components/form/checkbox.vue

@@ -16,141 +16,135 @@
                                v-html="$r.icons.check" exact></r-icon>
                    </transition>
             </span>
-                <span class="ms-2 color-primary-text" @click="emit">
+        <span class="ms-2 color-primary-text" @click="emit">
                 <span class="color-error-text" v-if="isRequired">*</span>
-                {{label}}
+                {{ label }}
             </span>
-            </div>
-        </template>
-    </r-input>
+      </div>
+    </template>
+  </r-input>
 </template>
 <script>
-    export default {
-        name: 'r-checkbox',
-        props: {
-          label: String,
-          readonly: Boolean,
-          rounded: Boolean,
-          modelValue: Boolean,
-          size: {
-            type: String,
-            default: 'default',
-            validator: function (value) {
-              return ['x-small', 'small', 'default', 'large', 'x-large'].indexOf(value) !== -1
-            }
-          },
-        },
-
-        data() {
-            return {
-                lazyValue: this.modelValue
-            }
-        },
-        watch: {
-            modelValue() {
-                this.lazyValue = this.modelValue
-            }
-        },
-        methods: {
-            emit() {
-                if (this.readonly) {
-                    return
-                }
-
-              this.lazyValue = (!this.lazyValue) ? !this.lazyValue : false
-              this.$emit('update:modelValue', this.lazyValue)
-            }
-        }
+export default {
+  name: 'r-checkbox',
+  props: {
+    label: String,
+    readonly: Boolean,
+    rounded: Boolean,
+    modelValue: Boolean,
+    size: {
+      type: String,
+      default: 'default',
+      validator: function (value) {
+        return ['x-small', 'small', 'default', 'large', 'x-large'].indexOf(value) !== -1
+      }
+    },
+  },
+
+  data() {
+    return {
+      lazyValue: this.modelValue
+    }
+  },
+  watch: {
+    modelValue() {
+      this.lazyValue = this.modelValue
     }
+  },
+  methods: {
+    emit() {
+      if (this.readonly) {
+        return
+      }
+
+      this.lazyValue = (!this.lazyValue) ? !this.lazyValue : false
+      this.$emit('update:modelValue', this.lazyValue)
+    }
+  }
+}
 
 </script>
 <style lang="scss">
-    @import "../../style/include";
-
-    .#{$prefix}checkbox {
-        width: 100%;
-        cursor: pointer;
-        @include light() {
-            .checkbox-input {
-              border: 1px solid var(--color-border-light)
-            }
-        }
-      @include dark() {
-        .checkbox-input {
-          border: 1px solid var(--color-border-dark)
-        }
+@import "../../style/include";
+
+.#{$prefix}checkbox {
+  width: 100%;
+  cursor: pointer;
+
+  .checkbox-input {
+    border: 1px solid var(--color-border)
+  }
+
+  .#{$prefix}icon {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .checkbox-input {
+    text-align: center;
+    border-radius: 4px;
+    transition: .3s all ease-in-out;
+
+    &.x-small {
+      width: 17px;
+      height: 17px;
+
+      svg {
+        width: 12px;
+        height: 12px;
+      }
+    }
+
+    &.small {
+      width: 20px;
+      height: 20px;
+
+      svg {
+        width: 15px;
+        height: 15px;
       }
+    }
+
+    &.default {
+      width: 22px;
+      height: 22px;
 
-      .#{$prefix}icon {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+      svg {
+        width: 17px;
+        height: 17px;
       }
+    }
+
+    &.large {
+      width: 25px;
+      height: 25px;
 
-      .checkbox-input {
-        text-align: center;
-        border-radius: 4px;
-        transition: .3s all ease-in-out;
-
-        &.x-small {
-          width: 17px;
-          height: 17px;
-
-          svg {
-            width: 12px;
-            height: 12px;
-          }
-        }
-
-        &.small {
-          width: 20px;
-          height: 20px;
-
-          svg {
-            width: 15px;
-            height: 15px;
-          }
-        }
-
-        &.default {
-          width: 22px;
-          height: 22px;
-
-          svg {
-            width: 17px;
-            height: 17px;
-          }
-        }
-
-        &.large {
-          width: 25px;
-          height: 25px;
-
-          svg {
-            width: 20px;
-            height: 20px;
-          }
-        }
-
-        &.x-large {
-          width: 30px;
-          height: 30px;
-
-          svg {
-            width: 25px;
-            height: 25px;
-          }
-        }
+      svg {
+        width: 20px;
+        height: 20px;
       }
+    }
 
-        &.checkbox-readonly {
-            pointer-events: none;
-        }
+    &.x-large {
+      width: 30px;
+      height: 30px;
 
-        .checkbox-select {
-            background-color: currentColor;
-        }
+      svg {
+        width: 25px;
+        height: 25px;
+      }
     }
+  }
+
+  &.checkbox-readonly {
+    pointer-events: none;
+  }
+
+  .checkbox-select {
+    background-color: currentColor;
+  }
+}
 </style>

package/components/form/colorPicker/picker.vue

@@ -168,13 +168,8 @@ export default {
   border-radius: 4px;
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
   z-index: 1;
-  @include light() {
-    background: #f7f8f9;
-  }
 
-  @include dark() {
-    background: #1d2024;
-  }
+  background: #f7f8f9;
 
   canvas {
     vertical-align: top;
@@ -214,25 +209,15 @@ export default {
       direction: ltr;
     }
 
-    @include light() {
-      .name {
-        color: #999;
-        background: #e7e8e9;
-      }
-      .value {
-        color: #666;
-        background: #eceef0;
-      }
+
+    .name {
+      color: #999;
+      background: #e7e8e9;
     }
-    @include dark() {
-      .name {
-        color: #999;
-        background: #252930;
-      }
-      .value {
-        color: #fff;
-        background: #2e333a;
-      }
+
+    .value {
+      color: #666;
+      background: #eceef0;
     }
   }
 }