renusify 2.5.2 → 3.0.0

package/components/codeEditor/useCodeFormatter.js

@@ -0,0 +1,150 @@
+export function useCodeFormatter() {
+    const pretty_html = (text) => {
+        if (!text) {
+            return ''
+        }
+        text = text.trim()
+        text = text.replace(/ +(?= )/g, '');
+        text = text.replace(/[\r\n\t]/g, '');
+        let r = ''
+        text = text.split('<')
+        let numopen = 0
+        text.forEach((line) => {
+            if (line) {
+                const end = line.startsWith('/')
+                if (end) {
+                    numopen -= 1
+                }
+                r += '\t'.repeat(numopen) + '<' + line + '\n'
+                if (!end) {
+                    numopen += 1
+                }
+            }
+        })
+        r = r.replace(/<([^/].*)>+[\r\n\t]+<\//g, '<$1></');
+        return r
+    }
+
+    const pretty_js = (text) => {
+        if (!text) {
+            return ''
+        }
+        text = text.trim()
+        text = text.replace(/ +(?= )/g, '');
+        text = text.replace(/[\r\n\t]/g, '');
+        text = text.replace(/([,;{(\[])+[\s]/g, '$1');
+        let r = ''
+        text = text.split('')
+        let numopen = 0
+        const textLength = text.length
+        let inBracket = 0
+        let inprantez = 0
+        for (let i = 0; i < textLength; i++) {
+            const c = text[i]
+            const last = i > 0 ? text[i - 1] : ''
+            const next = i < textLength - 1 ? text[i + 1] : ''
+
+            if (c === '(') {
+                inprantez += 1
+            }
+            if (c === ')') {
+                inprantez -= 1
+            }
+            if (c === '[') {
+                inBracket += 1
+            }
+            if (c === ']') {
+                inBracket -= 1
+            }
+            if (c === '}') {
+                numopen -= 1
+            }
+            if (numopen < 0) {
+                numopen = 0
+            }
+            r += c
+            if (c === '}' && next !== ',' && next !== ';' && next !== '}' && next !== ')') {
+                r += '\n' + '\t'.repeat(numopen)
+            }
+            if (c === ',' && (!inprantez && !inBracket) && next !== '}') {
+                r += '\n' + '\t'.repeat(numopen)
+            }
+            if (c === ';' && next !== '}') {
+                r += '\n' + '\t'.repeat(numopen)
+            }
+            if (next === '}' && c !== '{' && numopen > 0) {
+                r += '\n' + '\t'.repeat(numopen - 1)
+            }
+
+            if (c === '{') {
+                numopen += 1
+                if (next !== '}') {
+                    r += '\n' + '\t'.repeat(numopen)
+                }
+            }
+        }
+        r = r.replace(/\t /g, '\t');
+        r = r.replace(/^\s*\n/gm, '');
+        return r
+    }
+
+    const setTab = (event) => {
+        if (event.key === "'" || event.key === '"' || event.key === '`') {
+            const end = event.target.selectionEnd;
+            event.preventDefault()
+            document.execCommand('insertText', false, event.key.repeat(2));
+            event.target.selectionEnd = end + 1;
+            return false;
+        }
+        if (event.key === "{") {
+            const end = event.target.selectionEnd;
+            event.preventDefault()
+            document.execCommand('insertText', false, '{}');
+            event.target.selectionEnd = end + 1;
+            return false;
+        }
+        if (event.key === "(") {
+            const end = event.target.selectionEnd;
+            event.preventDefault()
+            document.execCommand('insertText', false, '()');
+            event.target.selectionEnd = end + 1;
+            return false;
+        }
+        if (event.key === "[") {
+            const end = event.target.selectionEnd;
+            event.preventDefault()
+            document.execCommand('insertText', false, '[]');
+            event.target.selectionEnd = end + 1;
+            return false;
+        }
+        if (event.keyCode === 9) {
+            event.preventDefault()
+            document.execCommand('insertText', false, '\t');
+            return false;
+        }
+        if (event.keyCode === 13) {
+            event.preventDefault()
+            let n = event.target.value.substr(0, event.target.selectionStart).split('\n')
+            n = n[n.length - 1].split('\t')
+
+            let w = ''
+            for (let i = 0; i < n.length; i++) {
+                if (n[i] === '') {
+                    w += '\t'
+                } else {
+                    break
+                }
+            }
+
+            document.execCommand('insertText', false, '\n' + w);
+            return false;
+        }
+        return true
+    }
+
+    return {
+        pretty_html,
+        pretty_js,
+        setTab
+    }
+}

package/components/confirm/index.vue

@@ -1,88 +1,147 @@
 <template>
   <r-modal :model-value="modelValue" no-close-btn>
-      <r-container class="container-fluid">
-        <r-row>
-          <r-col class="col-12 text-center">
-             <h2 class="title-1">
-               {{ title || $t('confirm_title', 'renusify') }}
-             </h2>
-            <r-divider class="my-3 color-warning"></r-divider>
-          </r-col>
-          <r-col class="col-12">
-            {{text||$t('confirm_body','renusify')}}
-          </r-col>
-          <r-col class="col-12 mb-2 pt-0" v-if="hard">
-            <r-form v-model="valid">
-              <r-text-input :label="$t(['confirm_code',[inputKey]],'renusify')"
-                            :rules="['required','match:'+inputKey]"
-                            v-model.number="inputVal"></r-text-input>
-            </r-form>
-          </r-col>
-        </r-row>
-        <r-row class="h-end no-gutters">
-          <r-btn :loading="this.loading"
-                 @click.stop="cancel"
-                 class="color-error-text mx-1"
-                 outlined
-                 rounded
-                 v-if="!this.loading">
-            {{cancelText||$t('cancel','renusify')}}
-          </r-btn>
-          <r-btn :disabled="hard&&!valid"
-                 :loading="this.loading"
-                 @click.stop="confirm"
-                 class="color-success-text"
-                 outlined
-                 rounded>{{confirmText||$t('accept','renusify')}}
-          </r-btn>
-        </r-row>
-      </r-container>
+    <r-container class="container-fluid">
+      <r-row>
+        <r-col class="col-12 text-center">
+          <h2 class="title-1">
+            {{ title || $t('confirm_title', 'renusify') }}
+          </h2>
+          <r-divider class="my-3 color-warning"></r-divider>
+        </r-col>
+        <r-col class="col-12">
+          {{ text || $t('confirm_body', 'renusify') }}
+        </r-col>
+        <r-col class="col-12 mb-2 pt-0" v-if="hard">
+          <r-form v-model="valid">
+            <r-text-input :label="$t(['confirm_code',[inputKey]],'renusify')"
+                          :rules="['required','match:'+inputKey]"
+                          v-model.number="inputVal"></r-text-input>
+          </r-form>
+        </r-col>
+      </r-row>
+      <r-row class="h-end no-gutters">
+        <r-btn :loading="this.loading"
+               @click.stop="cancel"
+               class="color-error-text mx-1"
+               outlined
+               rounded
+               v-if="!this.loading">
+          {{ cancelText || $t('cancel', 'renusify') }}
+        </r-btn>
+        <r-btn :disabled="hard&&!valid"
+               :loading="this.loading"
+               @click.stop="confirm"
+               class="color-success-text"
+               outlined
+               rounded>{{ confirmText || $t('accept', 'renusify') }}
+        </r-btn>
+      </r-row>
+    </r-container>
   </r-modal>
 </template>
 
-<script>
-export default {
-  name: 'r-confirm',
-  props: {
-    title: String,
-    text: String,
-    cancelText: String,
-    confirmText: String,
-    modelValue: Boolean,
-    hard: Boolean
-  },
-  emits:['accept','cancel'],
-  data () {
-    return {
-      valid: false,
-      inputVal: null,
-      inputKey: null,
-      loading: false
-    }
-  },
-  watch: {
-    modelValue: function () {
-      this.resetState()
-    }
-  },
-  methods: {
-    resetState () {
-      this.inputKey = this.$helper.randomInt(10, 99)
-      this.inputVal = null
-      this.loading = false
-    },
-    confirm () {
-      if (this.hard && (this.inputKey !== this.inputVal)) {
-        this.cancel()
-      } else {
-        this.loading = true
-        this.$emit('accept')
-      }
-    },
-    cancel () {
-      this.loading = true
-      this.$emit('cancel')
-    }
+<script setup>
+import {ref, watch, inject} from 'vue'
+
+const props = defineProps({
+  /**
+   * Dialog title text
+   * @type {String}
+   */
+  title: String,
+
+  /**
+   * Dialog message text
+   * @type {String}
+   */
+  text: String,
+
+  /**
+   * Cancel button text
+   * @type {String}
+   */
+  cancelText: String,
+
+  /**
+   * Confirm button text
+   * @type {String}
+   */
+  confirmText: String,
+
+  /**
+   * Controls dialog visibility
+   * @type {Boolean}
+   */
+  modelValue: Boolean,
+
+  /**
+   * Enables hard confirmation requiring user to type a verification code
+   * @type {Boolean}
+   */
+  hard: Boolean
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when user confirms the dialog
+   */
+  'accept',
+
+  /**
+   * Emitted when user cancels the dialog
+   */
+  'cancel',
+
+  /**
+   * Emitted when dialog visibility should be updated
+   * @param {Boolean} value - New visibility state
+   */
+  'update:modelValue'
+])
+
+const $helper = inject('renusify').$helper
+
+const valid = ref(false)
+const inputVal = ref(null)
+const inputKey = ref(null)
+const loading = ref(false)
+
+/**
+ * Resets dialog state to initial values
+ */
+const resetState = () => {
+  inputKey.value = $helper?.randomInt(10, 99) || Math.floor(Math.random() * 90) + 10
+  inputVal.value = null
+  loading.value = false
+}
+
+/**
+ * Handles confirmation action
+ */
+const confirm = () => {
+  if (props.hard && (inputKey.value !== inputVal.value)) {
+    cancel()
+  } else {
+    loading.value = true
+    emit('accept')
+  }
+}
+
+/**
+ * Handles cancellation action
+ */
+const cancel = () => {
+  loading.value = true
+  emit('cancel')
+}
+
+watch(() => props.modelValue, (newValue) => {
+  if (newValue) {
+    resetState()
   }
+})
+
+if (props.modelValue) {
+  resetState()
 }
 </script>

package/components/container/col.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="col">
+    <!-- Default slot for column content
+     @example <div class="color-info">column</div>
+     -->
     <slot></slot>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'r-col'
-}
+<script setup>
+
 </script>

package/components/container/divider.vue

@@ -2,24 +2,33 @@
   <hr :class="classes"/>
 </template>
 
-<script>
-export default {
-  name: 'r-divider',
-  props: {
-    inset: Boolean,
-    vertical: Boolean
-  },
-  computed: {
-    classes () {
-      let c = this.$r.prefix+'divider'
-      if (this.inset) {
-        c += ' divider-inset'
-      }
-      if (this.vertical) {
-        c += ' divider-vertical'
-      }
-      return c
-    }
+<script setup>
+import {computed, inject} from 'vue'
+
+const props = defineProps({
+  /**
+   * Adds inset padding to the divider
+   * @type {Boolean}
+   */
+  inset: Boolean,
+
+  /**
+   * Makes the divider vertical instead of horizontal
+   * @type {Boolean}
+   */
+  vertical: Boolean
+})
+
+const $r = inject('renusify').$r
+
+const classes = computed(() => {
+  let c = [$r.prefix + 'divider']
+  if (props.inset) {
+    c.push('divider-inset')
+  }
+  if (props.vertical) {
+    c.push('divider-vertical')
   }
-}
+  return c
+})
 </script>

package/components/container/index.vue

@@ -1,24 +1,43 @@
 <template>
   <div :class="classes">
+    <!-- Default slot for container content
+     @example
+     <r-row>
+      <r-col class="col-4"> col-1</r-col>
+      <r-col class="col-4"> col-2</r-col>
+      <r-col class="col-4"> col-3</r-col>
+     </r-row>
+      -->
     <slot></slot>
   </div>
 </template>
 
-<script>
+<script setup>
+import {computed, inject} from 'vue'
 import './style.scss'
 
-export default {
-  name: 'r-container',
-  props: {
-    fullWidth: Boolean,
-    fill: Boolean
-  },
-  computed:{
-    classes(){
-      let a={'container-fluid':this.fullWidth,'fill':this.fill}
-      a[`${this.$r.prefix}container`]=true
-      return a
-    }
+const props = defineProps({
+  /**
+   * Makes container full width (fluid)
+   * @type {Boolean}
+   */
+  fullWidth: Boolean,
+
+  /**
+   * Makes container fill available height
+   * @type {Boolean}
+   */
+  fill: Boolean
+})
+
+const {$r} = inject('renusify')
+
+const classes = computed(() => {
+  const prefix = $r.prefix || 'r-'
+  return {
+    'container-fluid': props.fullWidth,
+    'fill': props.fill,
+    [`${prefix}container`]: true
   }
-}
-</script>
+})
+</script>

package/components/container/row.vue

@@ -1,16 +1,33 @@
 <template>
   <section :class="{'row-dense':dense,'no-gutters':noGutters,'row-grid':grid}" class="row">
+    <!-- Default slot for row content
+     @example
+     <r-col class="col-4"> col-1</r-col>
+     <r-col class="col-4"> col-2</r-col>
+     <r-col class="col-4"> col-3</r-col>
+     -->
     <slot></slot>
   </section>
 </template>
 
-<script>
-export default {
-  name: 'r-row',
-  props:{
-    dense:Boolean,
-    grid: Boolean,
-    noGutters:Boolean
-  }
-}
+<script setup>
+defineProps({
+  /**
+   * Reduces spacing between grid items
+   * @type {Boolean}
+   */
+  dense: Boolean,
+
+  /**
+   * Enables grid layout mode
+   * @type {Boolean}
+   */
+  grid: Boolean,
+
+  /**
+   * Removes gutters (padding) between grid items
+   * @type {Boolean}
+   */
+  noGutters: Boolean
+})
 </script>

package/components/container/spacer.vue

@@ -1,11 +1,9 @@
 <template>
   <div class="flex-grow-1">
+    <!-- Default slot for spacer content -->
     <slot></slot>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'r-spacer'
-}
+<script setup>
 </script>

package/components/container/style.scss

@@ -45,6 +45,9 @@
 
   &.row-grid {
     overflow: hidden;
+    margin-right: 0;
+    margin-left: 0;
+    border: 1px solid var(--color-border-low);
   }
 
   &.row-grid .col {

package/components/content/index.vue

@@ -1,58 +1,75 @@
 <template>
-  <main :class="{[$r.prefix+'content']:true,
-  'flipped':flipped,
-  'moved':moved,
-  'below-header':belowHeader}" :style="{'--belowHeader':belowHeader}">
+  <main :class="{
+            [$r.prefix+'content']:true,
+            'flipped':flipped,
+            'moved':moved,
+            'below-header':belowHeader
+        }"
+        :style="{'--belowHeader':belowHeader}">
+    <!-- Default slot for main content
+    @example
+    <r-container>
+       <r-row>
+         <r-col class="col-4"> col-1</r-col>
+         <r-col class="col-4"> col-2</r-col>
+         <r-col class="col-4"> col-3</r-col>
+       </r-row>
+    </r-container>
+    -->
     <slot></slot>
   </main>
 </template>
 
-<script>
+<script setup>
+defineProps({
+  /**
+   * Adds content below the header
+   * @type {String}
+   */
+  belowHeader: String,
 
-export default {
-  name: 'r-content',
-  props: {
-    belowHeader: String,
-    flipped: Boolean,
-    moved: Boolean
-  }
-}
+  /**
+   * Flips the component orientation
+   * @type {Boolean}
+   */
+  flipped: Boolean,
+
+  /**
+   * Moves the component position
+   * @type {Boolean}
+   */
+  moved: Boolean
+})
 </script>
 
 <style lang="scss">
 @use "sass:map";
-@use "../../style/variables/base";
-@use "../../style/mixins";
+@use "../../style" as *;
 
 
-.#{base.$prefix}content {
-  --belowHeader: #{base.$toolbar-height};
+.#{$prefix}content {
+  --belowHeader: 80px;
   width: 100%;
   max-width: 100%;
-  transition: 0.2s map.get(base.$transition, 'fast-out-slow-in');
+  transition: 0.2s map.get($transition, 'fast-out-slow-in');
   position: relative;
-  @include mixins.firefox() {
-    @media print {
-      display: block
-    }
-  }
 
   &.flipped {
-    @include mixins.rtl() {
-      padding-right: base.$navbar-width;
+    @include rtl() {
+      padding-right: 300px;
     }
-    @include mixins.ltr() {
-      padding-left: base.$navbar-width;
+    @include ltr() {
+      padding-left: 300px;
     }
   }
 
   &.moved {
-    width: calc(100% + #{base.$navbar-width});
-    @include mixins.rtl() {
-      margin-right: base.$navbar-width;
+    width: calc(100% + 300px);
+    @include rtl() {
+      margin-right: 300px;
     }
-    @include mixins.ltr() {
-      margin-left: base.$navbar-width;
+    @include ltr() {
+      margin-left: 300px;
     }
   }