renusify 2.2.5 → 2.3.0

package/components/form/camInput/index.vue

@@ -351,9 +351,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../../style/include";
+@use "../../../style/variables/base";
 
-.#{$prefix}cam-input {
+.#{base.$prefix}cam-input {
   video {
     border: 1px solid var(--color-border);
   }

package/components/form/checkInput/index.vue

@@ -96,9 +96,9 @@ emits:['update:modelValue','data'],
 
 </script>
 <style lang="scss">
-@import "../../../style/include";
+@use "../../../style/variables/base";
 
-.#{$prefix}check-input {
+.#{base.$prefix}check-input {
   .check-input-container {
     display: flex;
     width: 100%;

package/components/form/checkboxInput/index.vue

@@ -65,9 +65,10 @@ export default {
 
 </script>
 <style lang="scss">
-@import "../../../style/include";
+@use "sass:map";
+@use "../../../style/variables/base";
 
-.#{$prefix}checkbox {
+.#{base.$prefix}checkbox {
   width: 100%;
   cursor: pointer;
 
@@ -79,7 +80,7 @@ export default {
     border: 1px solid var(--color-on-sheet-low)
   }
 
-  .#{$prefix}icon {
+  .#{base.$prefix}icon {
     width: 100%;
     height: 100%;
     display: flex;
@@ -89,7 +90,7 @@ export default {
 
   .checkbox-input {
     text-align: center;
-    border-radius: map-get($borders, 'sm');
+    border-radius: map.get(base.$borders, 'sm');
     transition: .3s all ease-in-out;
 
     &.x-small {

package/components/form/colorInput/Alpha.vue

@@ -8,7 +8,7 @@
 
 <script>
 
-import {color} from "./mixin";
+import {color} from "./mixin.js";
 
 export default {
   props: {

package/components/form/colorInput/Preview.vue

@@ -2,7 +2,7 @@
   <canvas ref="canvas" :width="width" :height="height"/>
 </template>
 <script>
-import {color} from "./mixin";
+import {color} from "./mixin.js";
 
 export default {
   props: {

package/components/form/colorInput/Saturation.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import {color} from "./mixin";
+import {color} from "./mixin.js";
 
 export default {
   props: {

package/components/form/colorInput/index.vue

@@ -53,9 +53,9 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "../../../style/include";
+@use "../../../style/variables/base";
 
-.#{$prefix}color-picker {
+.#{base.$prefix}color-picker {
   .shower {
     width: 100%;
     height: 30px;

package/components/form/colorInput/picker.vue

@@ -52,14 +52,14 @@
 
 <script>
 import {defineAsyncComponent} from 'vue'
-import {color} from './mixin'
+import {color} from './mixin.js'
 
 export default {
   components: {
-    Saturation:defineAsyncComponent(()=>import('./Saturation.vue')),
-    Hue:defineAsyncComponent(()=>import('./Hue.vue')),
-    Alpha:defineAsyncComponent(()=>import('./Alpha.vue')),
-    Preview:defineAsyncComponent(()=>import('./Preview.vue'))
+    Saturation: defineAsyncComponent(() => import('./Saturation.vue')),
+    Hue: defineAsyncComponent(() => import('./Hue.vue')),
+    Alpha: defineAsyncComponent(() => import('./Alpha.vue')),
+    Preview: defineAsyncComponent(() => import('./Preview.vue'))
   },
   mixins: [color],
   props: {
@@ -68,7 +68,7 @@ export default {
       default: '#2F1DCC',
     }
   },
-  emits:['changeColor'],
+  emits: ['changeColor'],
   data() {
     return {
       r: 0,
@@ -158,11 +158,13 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../../style/include";
+@use "sass:map";
+@use "../../../style/variables/base";
+
 
 .color-box {
   padding: 10px;
-  border-radius: map-get($borders, 'sm');
+  border-radius: map.get(base.$borders, 'sm');
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
   z-index: 1;
 

package/components/form/dateInput/index.vue

@@ -372,9 +372,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../../style/include";
+@use "../../../style/variables/base";
 
-.#{$prefix}date-input {
+.#{base.$prefix}date-input {
     position: relative;
     display: inline-block;
     font-size: 10px;

package/components/form/fileInput/index.vue

@@ -120,6 +120,3 @@ export default {
 }
 </script>
 
-<style lang="scss">
-@import "../../../style/include";
-</style>

package/components/form/fileInput/single.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import file from "./file";
+import file from "./file.js";
 
 export default {
   name: 'inputFile',
@@ -128,9 +128,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../../style/include";
+@use "../../../style/variables/base";
 
-.#{$prefix}file-uploader {
+.#{base.$prefix}file-uploader {
   .image-card {
     position: relative;
     width: auto;

package/components/form/groupInput/index.vue

@@ -134,9 +134,10 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "../../../style/include";
+@use "../../../style/variables/base";
+@use "../../../style/mixins";
 
-.#{$prefix}group-input {
+.#{base.$prefix}group-input {
   .group-input-label {
     color: var(--color-on-sheet);
   }
@@ -146,10 +147,10 @@ export default {
     .group-action {
       position: absolute;
       top: 0;
-      @include ltr() {
+      @include mixins.ltr() {
         right: 0;
       }
-      @include rtl() {
+      @include mixins.rtl() {
         left: 0;
       }
     }

package/components/form/input/index.vue

@@ -284,10 +284,12 @@ export default {
 
 </script>
 <style lang="scss">
-@import '../../../style/include';
+@use "sass:map";
+@use "../../../style/variables/base";
+@use "../../../style/mixins";
 
 
-.#{$prefix}input-container {
+.#{base.$prefix}input-container {
   position: relative;
   align-items: flex-start;
   display: flex;
@@ -312,7 +314,7 @@ export default {
   }
 
   &:not(.input-disabled) {
-    .label, .#{$prefix}icon, .#{$prefix}btn {
+    .label, .#{base.$prefix}icon, .#{base.$prefix}btn {
       color: var(--color-on-sheet-low)
     }
   }
@@ -381,10 +383,10 @@ export default {
     .after-icon {
       position: absolute;
       cursor: pointer;
-      @include ltr() {
+      @include mixins.ltr() {
         right: 5px;
       }
-      @include rtl() {
+      @include mixins.rtl() {
         left: 5px;
       }
 
@@ -393,10 +395,10 @@ export default {
     .pre-icon {
       position: absolute;
       cursor: pointer;
-      @include ltr() {
+      @include mixins.ltr() {
         left: 5px;
       }
-      @include rtl() {
+      @include mixins.rtl() {
         right: 5px;
       }
 
@@ -404,12 +406,12 @@ export default {
 
     &:not(.input-tile) {
       padding: 0 16px;
-      border-radius: map-get($borders, 'xl');
+      border-radius: map.get(base.$borders, 'xl');
     }
 
     &.input-tile {
       padding: 0 8px;
-      border-radius: map-get($borders, 'sm');
+      border-radius: map.get(base.$borders, 'sm');
     }
   }
 
@@ -428,14 +430,14 @@ export default {
     position: absolute;
     z-index: 0;
     top: 8px;
-    transition: $primary-transition;
+    transition: base.$primary-transition;
 
-    @include ltr() {
+    @include mixins.ltr() {
       left: 15px;
       transform-origin: top left;
     }
 
-    @include rtl() {
+    @include mixins.rtl() {
       right: 15px;
       transform-origin: top right;
     }
@@ -443,36 +445,36 @@ export default {
 
   :not(.input-tile) {
     .label-active {
-      @include ltr() {
+      @include mixins.ltr() {
         transform: translateY(-27px) translateX(5px) scale(.9);
       }
-      @include rtl() {
+      @include mixins.rtl() {
         transform: translateY(-27px) translateX(-5px) scale(.9);
       }
-      transition: $primary-transition
+      transition: base.$primary-transition
     }
   }
 
   .label-fixed {
     transform: none !important;
     top: -20px !important;
-    @include ltr() {
+    @include mixins.ltr() {
       left: 0 !important;
     }
-    @include rtl() {
+    @include mixins.rtl() {
       right: 0 !important;
     }
   }
 
   .input-tile {
     .label-active {
-      @include ltr() {
+      @include mixins.ltr() {
         transform: translateY(-27px) translateX(-8px) scale(.9);
       }
-      @include rtl() {
+      @include mixins.rtl() {
         transform: translateY(-27px) translateX(8px) scale(.9);
       }
-      transition: $primary-transition
+      transition: base.$primary-transition
     }
   }
 
@@ -481,33 +483,33 @@ export default {
       border: solid 1px currentColor;
     }
 
-    .#{$prefix}icon, .#{$prefix}btn {
+    .#{base.$prefix}icon, .#{base.$prefix}btn {
       color: currentColor !important;
     }
 
     :not(.input-tile) {
       .label {
         color: currentColor !important;
-        @include ltr() {
+        @include mixins.ltr() {
           transform: translateY(-27px) translateX(5px) scale(.9);
         }
-        @include rtl() {
+        @include mixins.rtl() {
           transform: translateY(-27px) translateX(-5px) scale(.9);
         }
-        transition: $primary-transition
+        transition: base.$primary-transition
       }
     }
 
     .input-tile {
       .label {
         color: currentColor !important;
-        @include ltr() {
+        @include mixins.ltr() {
           transform: translateY(-27px) translateX(-8px) scale(.9);
         }
-        @include rtl() {
+        @include mixins.rtl() {
           transform: translateY(-27px) translateX(8px) scale(.9);
         }
-        transition: $primary-transition
+        transition: base.$primary-transition
       }
     }
   }
@@ -532,12 +534,12 @@ export default {
     }
   }
 
-  &.#{$prefix}text-area {
+  &.#{base.$prefix}text-area {
     .input-control {
       height: auto;
 
       &:not(.input-tile) {
-        border-radius: map-get($borders, 'xl');
+        border-radius: map.get(base.$borders, 'xl');
       }
     }
 

package/components/form/jsonInput/JsonView.vue

@@ -83,13 +83,14 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "../../../style/include";
+@use "../../../style/variables/base";
+@use "../../../style/mixins";
 
-.#{$prefix}json-view {
-  @include rtl() {
+.#{base.$prefix}json-view {
+  @include mixins.rtl() {
     border-right: 1px solid var(--color-sheet-low);
   }
-  @include ltr() {
+  @include mixins.ltr() {
     border-left: 1px solid var(--color-sheet-low);
   }
 }

package/components/form/jsonInput/index.vue

@@ -23,34 +23,34 @@
       </r-btn>
       <div v-else-if="show" class="d-flex v-baseline flex-wrap">
         <slot :add="add" :info="info">
-        <r-text-input
-            v-if="!is_array"
-            v-model="info.key"
-            :label="keyLabel||$t('key','renusify')"
-            :tile="tile"
-            class="w-30 pe-1"></r-text-input>
-        <div class="w-20" v-if="!valueType">
-          <r-select-input v-model="info.type"
-                          :items="['text','number','boolean','json','array']"
-                          :tile="tile"
-                          :translate="translate"
-                          class="me-1"
-                          disableSearch
-                          firstSelect
-                          just-value
-                          @update:model-value="info.value=null"></r-select-input>
-        </div>
-        <r-text-input v-if="info.type==='text'"
-                      :tile="tile"
-                      :label="valueLabel||$t('value','renusify')"
-                      v-model="info.value"></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>
-        <r-switch-input v-else-if="info.type==='boolean'"
+          <r-text-input
+              v-if="!is_array"
+              v-model="info.key"
+              :label="keyLabel||$t('key','renusify')"
+              :tile="tile"
+              class="w-30 pe-1"></r-text-input>
+          <div class="w-20" v-if="!valueType">
+            <r-select-input v-model="info.type"
+                            :items="['text','number','boolean','json','array']"
+                            :tile="tile"
+                            :translate="translate"
+                            class="me-1"
+                            disableSearch
+                            firstSelect
+                            just-value
+                            @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')"></r-switch-input>
-        <r-btn :rounded="!c_tile" class="ms-1 color-success" @click.prevent="add">{{ $t('add', 'renusify') }}</r-btn>
+                        :label="valueLabel||$t('value','renusify')"
+                        v-model="info.value"></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>
+          <r-switch-input v-else-if="info.type==='boolean'"
+                          :tile="tile"
+                          v-model="info.value" :label="valueLabel||$t('value','renusify')"></r-switch-input>
+          <r-btn :rounded="!c_tile" class="ms-1 color-success" @click.prevent="add">{{ $t('add', 'renusify') }}</r-btn>
         </slot>
       </div>
     </div>
@@ -71,11 +71,11 @@
 </template>
 <script>
 import {defineAsyncComponent} from 'vue'
-import mixin from '../../codeEditor/mixin'
+import mixin from '../../codeEditor/mixin.js'
 
 export default {
   name: 'r-json',
-  components: {JsonView:defineAsyncComponent(()=>import('./JsonView.vue'))},
+  components: {JsonView: defineAsyncComponent(() => import('./JsonView.vue'))},
   mixins: [mixin],
   props: {
     label: String,
@@ -213,18 +213,20 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "../../../style/include";
+@use "sass:map";
+@use "../../../style/variables/base";
+
 
-.#{$prefix}json-input {
+.#{base.$prefix}json-input {
   background: var(--color-sheet-container);
   padding: 5px;
 
   &.input-tile {
-    border-radius: map-get($borders, 'sm');
+    border-radius: map.get(base.$borders, 'sm');
   }
 
   &:not(.input-tile) {
-    border-radius: map-get($borders, 'xl');
+    border-radius: map.get(base.$borders, 'xl');
   }
 
   .input-control {

package/components/form/numberInput/index.vue

@@ -41,7 +41,7 @@ export default {
     },
     btnText: Boolean
   },
-  emits:['update:modelValue'],
+  emits: ['update:modelValue'],
   data() {
     return {
       number: this.setSplit(this.modelValue),
@@ -101,9 +101,12 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../../style/include";
+@use "sass:map";
+@use "../../../style/variables/base";
+@use "../../../style/mixins";
 
-.#{$prefix}add-btn {
+
+.#{base.$prefix}add-btn {
   position: relative;
 
   input::-webkit-outer-spin-button,
@@ -135,20 +138,20 @@ export default {
     height: 36px !important;
   }
 
-  .#{$prefix}input-container:not(.input-focused) {
+  .#{base.$prefix}input-container:not(.input-focused) {
     .label:not(.label-active) {
-      @include ltr() {
+      @include mixins.ltr() {
         margin-left: 24px;
       }
-      @include rtl() {
+      @include mixins.rtl() {
         margin-right: 24px;
       }
     }
   }
 
   .input-tile {
-    .#{$prefix}btn {
-      border-radius: map-get($borders, 'sm');
+    .#{base.$prefix}btn {
+      border-radius: map.get(base.$borders, 'sm');
     }
   }
 }

package/components/form/radioInput/index.vue

@@ -67,9 +67,11 @@ export default {
 
 </script>
 <style lang="scss">
-@import "../../../style/include";
+@use "sass:map";
+@use "../../../style/variables/base";
 
-.#{$prefix}radio-input {
+
+.#{base.$prefix}radio-input {
   width: 100%;
   cursor: pointer;
 
@@ -81,7 +83,7 @@ export default {
     border: 1px solid var(--color-on-sheet-low)
   }
 
-  .#{$prefix}icon {
+  .#{base.$prefix}icon {
     width: 20px;
     height: 20px;
   }
@@ -90,7 +92,7 @@ export default {
     text-align: center;
     width: 25px;
     height: 25px;
-    border-radius: map-get($borders, 'sm');
+    border-radius: map.get(base.$borders, 'sm');
     transition: .3s all ease-in-out;
   }
 

package/components/form/rangeInput/index.vue

@@ -209,9 +209,10 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "../../../style/include";
+@use "../../../style/variables/base";
+@use "../../../style/mixins";
 
-.#{$prefix}range {
+.#{base.$prefix}range {
   height: 30px;
   position: relative;
 
@@ -246,10 +247,10 @@ export default {
       &:hover {
         width: 16px;
         height: 16px;
-        @include rtl() {
+        @include mixins.rtl() {
           transform: translate(2px, -2px);
         }
-        @include ltr() {
+        @include mixins.ltr() {
           transform: translate(-2px, -2px);
         }
         border: 3px solid var(--color-one) !important;
@@ -274,10 +275,10 @@ export default {
       width: auto;
       height: 30px;
       min-width: 30px;
-      @include rtl() {
+      @include mixins.rtl() {
         transform: translateX(calc(50% - 5px));
       }
-      @include ltr() {
+      @include mixins.ltr() {
         transform: translateX(calc(-50% + 5px));
       }
     }
@@ -309,10 +310,10 @@ export default {
       &:hover {
         width: 16px;
         height: 16px;
-        @include rtl() {
+        @include mixins.rtl() {
           transform: translate(2px, -2px);
         }
-        @include ltr {
+        @include mixins.ltr() {
           transform: translate(-2px, -2px);
         }
         border: 3px solid var(--color-one) !important;
@@ -337,10 +338,10 @@ export default {
       width: auto;
       height: 30px;
       min-width: 30px;
-      @include rtl() {
+      @include mixins.rtl() {
         transform: translateX(calc(50% - 5px));
       }
-      @include ltr() {
+      @include mixins.ltr() {
         transform: translateX(calc(-50% + 5px));
       }
     }