renusify 2.0.4 → 2.1.0

package/components/codeEditor/index.vue

@@ -1,240 +1,247 @@
 <template>
-  <div :class="`${$r.prefix}code-editor`">
-    <div class="code-action text-right">
-      <r-btn
-          class="color-white-text"
-          icon
-          text
-          @click.prevent="$helper.copy($refs.codeView.innerText)"
-      >
-        <r-icon v-html="$r.icons.copy"></r-icon>
-      </r-btn>
-      <r-btn
-          class="color-white-text"
-          icon
-          text
-          @click.prevent="pretty"
-      >
-        P
-      </r-btn>
-      <r-btn v-if="show === 'code' && runnable" class="color-white-text" text @click.prevent="show = 'run'">
-        run
-        <r-icon v-html="$r.icons.play" exact></r-icon>
-      </r-btn>
-      <r-btn v-if="show === 'run'" class="color-white-text" text @click.prevent="show = 'code'">
-        <r-icon v-html="$r.icons.code_tags" exact></r-icon>
-      </r-btn>
-    </div>
-    <div v-if="show === 'run' && runnable" class="code-compile">
-      <r-code-editor-run
-          :id="id"
-          :script="scr"
-          :style="sty"
-          :template="temp"
-      ></r-code-editor-run>
-    </div>
-    <div v-show="show !== 'run'" ref="codeView" class="code-wrapper">
-      <div>
-        <span v-show="templateShow" class="color-green">&lt;template&gt;</span>
-        <highlight-html ref="h-html" v-model="temp"></highlight-html>
-        <span v-show="templateShow" class="color-green">&lt;/template&gt;</span>
-      </div>
-      <div>
+    <div :class="`${$r.prefix}code-editor`">
+        <div class="code-action text-right">
+            <r-btn
+                class="color-white-text"
+                icon
+                text
+                @click.prevent="$helper.copy($refs.codeView.innerText)"
+            >
+                <r-icon v-html="$r.icons.copy"></r-icon>
+            </r-btn>
+            <r-btn
+                class="color-white-text"
+                icon
+                text
+                @click.prevent="pretty"
+            >
+                P
+            </r-btn>
+            <r-btn v-if="show === 'code' && runnable" class="color-white-text" text @click.prevent="show = 'run'">
+                run
+                <r-icon v-html="$r.icons.play" exact></r-icon>
+            </r-btn>
+            <r-btn v-if="show === 'run'" class="color-white-text" text @click.prevent="show = 'code'">
+                <r-icon v-html="$r.icons.code_tags" exact></r-icon>
+            </r-btn>
+        </div>
+        <div v-if="show === 'run' && runnable" class="code-compile">
+            <r-code-editor-run
+                :id="id"
+                :script="scr"
+                :style="sty"
+                :template="temp"
+            ></r-code-editor-run>
+        </div>
+        <div v-show="show !== 'run'" ref="codeView" class="code-wrapper">
+            <div>
+                <span v-show="templateShow" class="color-green">&lt;template&gt;</span>
+                <highlight-html ref="h-html" v-model="temp"></highlight-html>
+                <span v-show="templateShow" class="color-green">&lt;/template&gt;</span>
+            </div>
+            <div>
         <span v-show="scriptShow" class="color-orange"
         >&lt;script&gt;<br/>export default {</span
         >
-        <highlight-script ref="h-js" v-model="scr"></highlight-script>
-        <span v-show="scriptShow" class="color-orange">}<br/>&lt;script&gt;</span>
-      </div>
-      <div>
+                <highlight-script ref="h-js" v-model="scr"></highlight-script>
+                <span v-show="scriptShow" class="color-orange">}<br/>&lt;script&gt;</span>
+            </div>
+            <div>
         <span v-show="styleShow" class="color-orange"
         >&lt;style lang<span class="color-green">="css"</span>&gt;</span
         >
-        <highlight-css ref="h-css" v-model="sty"></highlight-css>
-        <span v-show="styleShow" class="color-orange">&lt;style&gt;</span>
-      </div>
+                <highlight-css ref="h-css" v-model="sty"></highlight-css>
+                <span v-show="styleShow" class="color-orange">&lt;style&gt;</span>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import RCodeEditorRun from "./run";
-import highlightHtml from "./highlightHtml";
-import HighlightScript from "./highlightJs";
-import HighlightCss from "./highlightCss";
+import {defineAsyncComponent} from 'vue'
 
 export default {
-  name: "r-code-editor",
-  components: {HighlightCss, HighlightScript, highlightHtml, RCodeEditorRun},
-  props: {
-    runnable: Boolean,
-    templateShow: {type: Boolean, default: true},
-    scriptShow: {type: Boolean, default: true},
-    styleShow: {type: Boolean, default: true},
-    template: String,
-    script: String,
-    style: String,
-  },
-  emits: ["update:template", "update:script", "update:style"],
-  data() {
-    return {
-      show: "code",
-      code: "",
-      edited: false,
-      temp: this.template,
-      scr: this.script,
-      sty: this.style,
-      id: this.$helper.uniqueId(),
-    };
-  },
-  created() {
-    if (!this.$r.icons.play) {
-      this.$r.icons.play =
-          '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M8 5.14v14l11-7l-11-7Z"/></svg>';
-    }
-    if (!this.$r.icons.code_tags) {
-      this.$r.icons.code_tags =
-          '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m14.6 16.6l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6l-1.4-1.4m-5.2 0L4.8 12l4.6-4.6L8 6l-6 6l6 6l1.4-1.4Z"/></svg>';
-    }
-  },
-  watch: {
-    template: function (n) {
-      this.temp = n
+    name: "r-code-editor",
+    components: {
+        HighlightCss: defineAsyncComponent(() =>
+            import("./highlightCss")
+        ), HighlightScript: defineAsyncComponent(() =>
+            import("./highlightJs")
+        ), highlightHtml: defineAsyncComponent(() =>
+            import("./highlightHtml")
+        ), RCodeEditorRun: defineAsyncComponent(() =>
+            import("./run")
+        )
     },
-    script: function (n) {
-      this.scr = n
+    props: {
+        runnable: Boolean,
+        templateShow: {type: Boolean, default: true},
+        scriptShow: {type: Boolean, default: true},
+        styleShow: {type: Boolean, default: true},
+        template: String,
+        script: String,
+        style: String,
     },
-    style: function (n) {
-      this.sty = n
+    emits: ["update:template", "update:script", "update:style"],
+    data() {
+        return {
+            show: "code",
+            code: "",
+            edited: false,
+            temp: this.template,
+            scr: this.script,
+            sty: this.style,
+            id: this.$helper.uniqueId(),
+        };
     },
-    temp: function () {
-      this.$emit("update:template", this.temp);
+    created() {
+        if (!this.$r.icons.play) {
+            this.$r.icons.play =
+                '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M8 5.14v14l11-7l-11-7Z"/></svg>';
+        }
+        if (!this.$r.icons.code_tags) {
+            this.$r.icons.code_tags =
+                '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="m14.6 16.6l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6l-1.4-1.4m-5.2 0L4.8 12l4.6-4.6L8 6l-6 6l6 6l1.4-1.4Z"/></svg>';
+        }
     },
-    scr: function () {
-      this.$emit("update:script", this.scr);
+    watch: {
+        template: function (n) {
+            this.temp = n
+        },
+        script: function (n) {
+            this.scr = n
+        },
+        style: function (n) {
+            this.sty = n
+        },
+        temp: function () {
+            this.$emit("update:template", this.temp);
+        },
+        scr: function () {
+            this.$emit("update:script", this.scr);
+        },
+        sty: function () {
+            this.$emit("update:style", this.sty);
+        },
     },
-    sty: function () {
-      this.$emit("update:style", this.sty);
+    methods: {
+        pretty() {
+            this.temp = this.$refs["h-html"].pretty_html(this.temp)
+            this.scr = this.$refs["h-js"].pretty_js(this.scr)
+            this.sty = this.$refs["h-css"].pretty_js(this.sty)
+        }
     },
-  },
-  methods: {
-    pretty() {
-      this.temp = this.$refs["h-html"].pretty_html(this.temp)
-      this.scr = this.$refs["h-js"].pretty_js(this.scr)
-      this.sty = this.$refs["h-css"].pretty_js(this.sty)
-    }
-  },
 };
 </script>
 
 <style lang="scss">
-@import "~renusify/style/include";
+@import "../../style/include";
 
 .#{$prefix}code-editor {
-  position: relative;
-  white-space: break-spaces;
-  caret-color: white;
-  background-color: #15212e;
-  color: #fff;
-  padding: 10px;
-  font-size: 14px;
-
-  .code-script,
-  .code-template {
-    padding: 0 20px;
-  }
-
-  .code-wrapper {
-    direction: ltr;
-    text-align: left;
+    position: relative;
+    white-space: break-spaces;
+    caret-color: white;
+    background-color: #15212e;
+    color: #fff;
     padding: 10px;
-  }
+    font-size: 14px;
 
-  .code-compile {
-    background-color: #fafafa;
-    min-height: 300px;
-    padding: 10px;
-    margin: 0 -10px -10px -10px;
-    color: black;
-  }
+    .code-script,
+    .code-template {
+        padding: 0 20px;
+    }
 
-  .color-func {
-    color: #db92e3;
-  }
+    .code-wrapper {
+        direction: ltr;
+        text-align: left;
+        padding: 10px;
+    }
 
-  .color-func2 {
-    color: #deca10;
-  }
+    .code-compile {
+        background-color: #fafafa;
+        min-height: 300px;
+        padding: 10px;
+        margin: 0 -10px -10px -10px;
+        color: black;
+    }
 
-  .color-orange {
-    color: orange;
-  }
+    .color-func {
+        color: #db92e3;
+    }
 
-  .color-green {
-    color: #0cde27;
-  }
+    .color-func2 {
+        color: #deca10;
+    }
 
-  .color-blue {
-    color: #3bb7ee;
-  }
+    .color-orange {
+        color: orange;
+    }
+
+    .color-green {
+        color: #0cde27;
+    }
 
-  .color-number {
-    color: #7ad5ff;
-  }
+    .color-blue {
+        color: #3bb7ee;
+    }
 
-  .color-purple {
-    color: #d2a8ee;
-  }
+    .color-number {
+        color: #7ad5ff;
+    }
 
-  .color-comment {
-    color: #898d8c;
-  }
+    .color-purple {
+        color: #d2a8ee;
+    }
 
-  .code-editor-highlight {
-    position: relative;
-    margin: -12px 0;
-
-    .text-preview {
-      white-space: pre-wrap;
-      word-break: keep-all;
-      overflow-wrap: break-word;
-      min-height: 40px;
-      font-size: 14px;
-      letter-spacing: 2px;
-      line-height: 20px;
-      margin: 0;
-      border: 0;
-      padding: 12px;
+    .color-comment {
+        color: #898d8c;
     }
 
-    textarea {
-      &::selection {
-        background-color: #fafafa;
-        -webkit-text-fill-color: #000;
-        color: #000;
-      }
-
-      padding: 12px;
-      margin: 0;
-      border: 0;
-      font-size: 14px;
-      letter-spacing: 2px;
-      line-height: 20px;
-      -webkit-font-smoothing: antialiased;
-      -webkit-text-fill-color: transparent;
-      outline: none;
-      width: 100%;
-      height: 100%;
-      min-height: 40px;
-      white-space: pre-wrap;
-      word-break: keep-all;
-      overflow-wrap: break-word;
-      position: absolute;
-      top: 0;
-      left: 0;
-      resize: none;
-      overflow: hidden;
+    .code-editor-highlight {
+        position: relative;
+        margin: -12px 0;
+
+        .text-preview {
+            white-space: pre-wrap;
+            word-break: keep-all;
+            overflow-wrap: break-word;
+            min-height: 40px;
+            font-size: 14px;
+            letter-spacing: 2px;
+            line-height: 20px;
+            margin: 0;
+            border: 0;
+            padding: 12px;
+        }
+
+        textarea {
+            &::selection {
+                background-color: #fafafa;
+                -webkit-text-fill-color: #000;
+                color: #000;
+            }
+
+            padding: 12px;
+            margin: 0;
+            border: 0;
+            font-size: 14px;
+            letter-spacing: 2px;
+            line-height: 20px;
+            -webkit-font-smoothing: antialiased;
+            -webkit-text-fill-color: transparent;
+            outline: none;
+            width: 100%;
+            height: 100%;
+            min-height: 40px;
+            white-space: pre-wrap;
+            word-break: keep-all;
+            overflow-wrap: break-word;
+            position: absolute;
+            top: 0;
+            left: 0;
+            resize: none;
+            overflow: hidden;
+        }
     }
-  }
 }
 </style>

package/components/confirm/index.js

@@ -0,0 +1,10 @@
+export * as rConfirm from './index.vue'
+export * as l_Btn from '../button/index.js'
+export * as l_modal from '../modal/index.js'
+export * as l_card from '../card/index.js'
+export * as l_container from '../container/index.js'
+export * as l_row from '../container/row.js'
+export * as l_col from '../container/col.js'
+export * as l_divider from '../container/divider.js'
+export * as l_form from '../form/index.js'
+export * as l_textInput from '../form/textInput/index.js'

package/components/container/col.js

@@ -0,0 +1 @@
+export * as rCol from './col.vue'

package/components/container/divider.js

@@ -0,0 +1 @@
+export * as rDivider from './divider.vue'

package/components/container/index.js

@@ -0,0 +1 @@
+export * as rContainer from './index.vue'

package/components/container/row.js

@@ -0,0 +1 @@
+export * as rRow from './row.vue'

package/components/container/spacer.js

@@ -0,0 +1 @@
+export * as rSpacer from './spacer.vue'

package/components/content/index.js

@@ -0,0 +1 @@
+export * as rContent from './index.vue'

package/components/countdown/index.js

@@ -0,0 +1 @@
+export * as rContDown from './index.vue'

package/components/cropper/index.js

@@ -0,0 +1,3 @@
+export * as rCropper from './index.vue'
+
+export * as d_touch from '../../directive/touch/index.js'

package/components/cropper/index.vue

@@ -292,7 +292,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "~renusify/style/include";
+@import "../../style/include";
 
 .#{$prefix}cropper {
   width: 300px;

package/components/float/index.js

@@ -0,0 +1 @@
+export * as rFloat from './index.vue'

package/components/form/addressInput/index.js

@@ -0,0 +1,4 @@
+export * as rFloat from './index.vue'
+export * as l_TextInput from '../textInput/index.js'
+export * as l_TextArea from '../textArea/index.js'
+export * as l_select from '../selectInput/index.js'

package/components/form/camInput/index.js

@@ -0,0 +1,4 @@
+export * as rCamInput from './index.vue'
+export * as l_Input from '../input/index.js'
+export * as l_btn from '../../button/index.js'
+export * as l_icon from '../../icon/index.js'

package/components/form/{camInput.vue → camInput/index.vue}

@@ -351,7 +351,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "~renusify/style/include";
+@import "../../../style/include";
 
 .#{$prefix}cam-input {
   video {

package/components/form/checkInput/index.js

@@ -0,0 +1,4 @@
+export * as rCheckInput from './index.vue'
+export * as l_Input from '../input/index.js'
+export * as l_btn from '../../button/index.js'
+export * as l_icon from '../../icon/index.js'

package/components/form/{check-input.vue → checkInput/index.vue}

@@ -96,7 +96,7 @@ emits:['update:modelValue','data'],
 
 </script>
 <style lang="scss">
-@import "../../style/include";
+@import "../../../style/include";
 
 .#{$prefix}check-input {
   .check-input-container {

package/components/form/checkboxInput/index.js

@@ -0,0 +1,3 @@
+export * as rCheckboxInput from './index.vue'
+export * as l_Input from '../input/index.js'
+export * as l_icon from '../../icon/index.js'

package/components/form/{checkbox.vue → checkboxInput/index.vue}

@@ -65,7 +65,7 @@ emits:['update:modelValue'],
 
 </script>
 <style lang="scss">
-@import "../../style/include";
+@import "../../../style/include";
 
 .#{$prefix}checkbox {
   width: 100%;

package/components/form/colorInput/index.js

@@ -0,0 +1,7 @@
+export * as rColorInput from './index.vue'
+
+export * as l_input from '../input/index.js'
+export * as l_modal from '../../modal/index.js'
+export * as l_btn from '../../button/index.js'
+export * as l_icon from '../../icon/index.js'
+export * as d_touch from '../../../directive/touch/index.js'

package/components/form/{colorPicker → colorInput}/index.vue

@@ -16,11 +16,11 @@
   </r-input>
 </template>
 <script>
-import Picker from "./picker";
+import {defineAsyncComponent} from 'vue'
 
 export default {
   name: 'r-color-picker',
-  components: {Picker},
+  components: {Picker:defineAsyncComponent(()=>import('./picker.vue'))},
   props: {
     modelValue: String,
     format: {type: String, default: 'rgba'}

package/components/form/{colorPicker → colorInput}/picker.vue

@@ -51,19 +51,15 @@
 </template>
 
 <script>
+import {defineAsyncComponent} from 'vue'
 import {color} from './mixin'
 
-import Saturation from './Saturation.vue'
-import Hue from './Hue.vue'
-import Alpha from './Alpha.vue'
-import Preview from './Preview.vue'
-
 export default {
   components: {
-    Saturation,
-    Hue,
-    Alpha,
-    Preview
+    Saturation:defineAsyncComponent(()=>import('./Saturation.vue')),
+    Hue:defineAsyncComponent(()=>import('./Hue.vue')),
+    Alpha:defineAsyncComponent(()=>import('./Alpha.vue')),
+    Preview:defineAsyncComponent(()=>import('./Preview.vue'))
   },
   mixins: [color],
   props: {

package/components/form/dateInput/index.js

@@ -0,0 +1,8 @@
+export * as rDateInput from './index.vue'
+export * as l_input from '../input/index.js'
+export * as l_btn from '../../button/index.js'
+export * as l_icon from '../../icon/index.js'
+export * as l_modal from '../../modal/index.js'
+export * as l_container from '../../container/index.js'
+export * as l_row from '../../container/row.js'
+export * as l_col from '../../container/col.js'