renusify 2.5.1 → 3.0.0

package/style/variables/utilities.scss

@@ -5,70 +5,23 @@ $utilities: () !default;
 $utilities: map.merge(
                 (
                   // Display utilities
-                        "overflow": (
-                                property: overflow,
-                                values: auto hidden visible,
-                        ),
-                        "overflow-x": (
-                                property: overflow-x,
-                                values: auto hidden
-                        ),
-                        "overflow-y": (
-                                property: overflow-y,
-                                values: auto hidden
-                        ),
                         "display": (
-                                responsive: true,
                                 print: true,
                                 property: display,
                                 class: d,
                                 values: none inline inline-block block table table-row table-cell flex inline-flex
                         ),
-                        "float": (
-                                responsive: true,
-                                print: true,
-                                property: float,
-                                class: float,
-                                values: none left right
-                        ),
-                        "float-start-ltr": (
-                                responsive: true,
-                                property: (ltr: float),
-                                class: float,
-                                values: ('start':left)
-                        ),
-                        "float-start-rtl": (
-                                responsive: true,
-                                property: (rtl: float),
-                                class: float,
-                                values: ('start':right)
-                        ),
-                        "float-end-ltr": (
-                                responsive: true,
-                                property: (ltr: float),
-                                class: float,
-                                values: ('end':right)
-                        ),
-                        "float-end-rtl": (
-                                responsive: true,
-                                property: (rtl: float),
-                                class: float,
-                                values: ('end':left)
-                        ),
                   // Flex utilities
                         "flex": (
-                                responsive: true,
                                 property: flex,
                                 values: (fill: 1 1 auto)
                         ),
                         "flex-direction": (
-                                responsive: true,
                                 property: flex-direction,
                                 class: flex,
                                 values: row column row-reverse column-reverse
                         ),
                         "flex-grow": (
-                                responsive: true,
                                 property: flex-grow,
                                 class: flex,
                                 values: (
@@ -77,7 +30,6 @@ $utilities: map.merge(
                                 )
                         ),
                         "flex-shrink": (
-                                responsive: true,
                                 property: flex-shrink,
                                 class: flex,
                                 values: (
@@ -86,13 +38,11 @@ $utilities: map.merge(
                                 )
                         ),
                         "flex-wrap": (
-                                responsive: true,
                                 property: flex-wrap,
                                 class: flex,
                                 values: wrap nowrap wrap-reverse
                         ),
                         "justify-content": (
-                                responsive: true,
                                 property: justify-content,
                                 class: h,
                                 values: (
@@ -105,7 +55,6 @@ $utilities: map.merge(
                                 )
                         ),
                         "align-items": (
-                                responsive: true,
                                 property: align-items,
                                 class: v,
                                 values: (
@@ -116,232 +65,103 @@ $utilities: map.merge(
                                         stretch: stretch,
                                 )
                         ),
-                        "align-content": (
-                                responsive: true,
-                                property: align-content,
-                                class: v-content,
-                                values: (
-                                        start: flex-start,
-                                        end: flex-end,
-                                        center: center,
-                                        space-between: space-between,
-                                        space-around: space-around,
-                                        stretch: stretch,
-                                )
-                        ),
-                        "align-self": (
-                                responsive: true,
-                                property: align-self,
-                                class: v-self,
-                                values: (
-                                        auto: auto,
-                                        start: flex-start,
-                                        end: flex-end,
-                                        center: center,
-                                        baseline: baseline,
-                                        stretch: stretch,
-                                )
-                        ),
                         "rounded": (
-                                responsive: true,
                                 property: border-radius,
                                 class: br,
                                 values: base.$borders
                         ),
-                        "rounded-top-left": (
-                                responsive: true,
-                                property: border-top-left-radius,
-                                class: br-tl,
-                                values: base.$borders
-                        ),
-                        "rounded-top-right": (
-                                responsive: true,
-                                property: border-top-right-radius,
-                                class: br-tr,
-                                values: base.$borders
-                        ),
-                        "rounded-bottom-right": (
-                                responsive: true,
-                                property: border-bottom-right-radius,
-                                class: br-br,
-                                values: base.$borders
-                        ),
-                        "rounded-bottom-left": (
-                                responsive: true,
-                                property: border-bottom-left-radius,
-                                class: br-bl,
-                                values: base.$borders
-                        ),
                   // Margin utilities
                         "margin": (
-                                responsive: true,
                                 property: margin,
                                 class: ma,
                                 values: map.merge(base.$spacers, (auto: auto))
                         ),
                         "margin-x": (
-                                responsive: true,
                                 property: margin-right margin-left,
                                 class: mx,
                                 values: map.merge(base.$spacers, (auto: auto))
                         ),
                         "margin-y": (
-                                responsive: true,
                                 property: margin-top margin-bottom,
                                 class: my,
                                 values: map.merge(base.$spacers, (auto: auto))
                         ),
                         "margin-top": (
-                                responsive: true,
                                 property: margin-top,
                                 class: mt,
                                 values: map.merge(base.$spacers, (auto: auto))
                         ),
                         "margin-right": (
-                                responsive: true,
                                 property: margin-right,
                                 class: mr,
                                 values: map.merge(base.$spacers, (auto: auto))
                         ),
                         "margin-bottom": (
-                                responsive: true,
                                 property: margin-bottom,
                                 class: mb,
                                 values: map.merge(base.$spacers, (auto: auto))
                         ),
                         "margin-left": (
-                                responsive: true,
                                 property: margin-left,
                                 class: ml,
                                 values: map.merge(base.$spacers, (auto: auto))
                         ),
                         "margin-start": (
-                                responsive: true,
                                 property: (ltr: margin-left, rtl: margin-right),
                                 class: ms,
                                 values: map.merge(base.$spacers, (auto: auto))
                         ),
                         "margin-end": (
-                                responsive: true,
                                 property: (ltr: margin-right, rtl: margin-left),
                                 class: me,
                                 values: map.merge(base.$spacers, (auto: auto))
                         ),
-                  // Negative margin utilities
-                        "negative-margin": (
-                                responsive: true,
-                                property: margin,
-                                class: ma,
-                                values: base.$negative-spacers
-                        ),
-                        "negative-margin-x": (
-                                responsive: true,
-                                property: margin-right margin-left,
-                                class: mx,
-                                values: base.$negative-spacers
-                        ),
-                        "negative-margin-y": (
-                                responsive: true,
-                                property: margin-top margin-bottom,
-                                class: my,
-                                values: base.$negative-spacers
-                        ),
-                        "negative-margin-top": (
-                                responsive: true,
-                                property: margin-top,
-                                class: mt,
-                                values: base.$negative-spacers
-                        ),
-                        "negative-margin-right": (
-                                responsive: true,
-                                property: margin-right,
-                                class: mr,
-                                values: base.$negative-spacers
-                        ),
-                        "negative-margin-bottom": (
-                                responsive: true,
-                                property: margin-bottom,
-                                class: mb,
-                                values: base.$negative-spacers
-                        ),
-                        "negative-margin-left": (
-                                responsive: true,
-                                property: margin-left,
-                                class: ml,
-                                values: base.$negative-spacers
-                        ),
-                        "negative-margin-start": (
-                                responsive: true,
-                                property: (ltr: margin-left, rtl: margin-right),
-                                class: ms,
-                                values: base.$negative-spacers
-                        ),
-                        "negative-margin-end": (
-                                responsive: true,
-                                property: (ltr: margin-right, rtl: margin-left),
-                                class: me,
-                                values: base.$negative-spacers
-                        ),
                   // Padding utilities
                         "padding": (
-                                responsive: true,
                                 property: padding,
                                 class: pa,
                                 values: base.$spacers
                         ),
                         "padding-x": (
-                                responsive: true,
                                 property: padding-right padding-left,
                                 class: px,
                                 values: base.$spacers
                         ),
                         "padding-y": (
-                                responsive: true,
                                 property: padding-top padding-bottom,
                                 class: py,
                                 values: base.$spacers
                         ),
                         "padding-top": (
-                                responsive: true,
                                 property: padding-top,
                                 class: pt,
                                 values: base.$spacers
                         ),
                         "padding-right": (
-                                responsive: true,
                                 property: padding-right,
                                 class: pr,
                                 values: base.$spacers
                         ),
                         "padding-bottom": (
-                                responsive: true,
                                 property: padding-bottom,
                                 class: pb,
                                 values: base.$spacers
                         ),
                         "padding-left": (
-                                responsive: true,
                                 property: padding-left,
                                 class: pl,
                                 values: base.$spacers
                         ),
                         "padding-start": (
-                                responsive: true,
                                 property: (ltr: padding-left, rtl: padding-right),
                                 class: ps,
                                 values: base.$spacers
                         ),
                         "padding-end": (
-                                responsive: true,
                                 property: (ltr: padding-right, rtl: padding-left),
                                 class: pe,
                                 values: base.$spacers
                         ),
-                        "position": (
-                                property: position,
-                                class: position,
-                                values: relative absolute fixed sticky
-                        ),
                   // Text
                         "text-align": (
                                 property: text-align,

package/tools/helper.js

@@ -134,14 +134,6 @@ export function searchArray(arr, key, value) {
     return false;
 }
 
-export function replacer(string = null, find = ' ', replace = '-') {
-    if (!string) {
-        return string;
-    }
-
-    return string.toString().split(find).join(replace);
-}
-
 export function ifHas(object = null, rtrn = false, ...childs) {
     let o;
     if (!object) {

package/tools/icons.js

@@ -25,5 +25,10 @@ export let Icons = {
     'sticker': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M5.5 2C3.56 2 2 3.56 2 5.5v13C2 20.44 3.56 22 5.5 22H16l6-6V5.5C22 3.56 20.44 2 18.5 2h-13m.25 2h12.5A1.75 1.75 0 0 1 20 5.75V15h-1.5c-1.94 0-3.5 1.56-3.5 3.5V20H5.75A1.75 1.75 0 0 1 4 18.25V5.75A1.75 1.75 0 0 1 5.75 4m8.69 2.77c-.16 0-.32.02-.47.06c-.94.26-1.47 1.22-1.23 2.17c.05.15.12.3.21.44l3.23-.88c0-.17-.02-.34-.06-.51c-.21-.75-.9-1.28-1.68-1.28M8.17 8.5c-.17 0-.32 0-.47.05c-.93.26-1.48 1.22-1.23 2.15c.03.16.12.3.21.46l3.23-.88c0-.17-.02-.34-.06-.5A1.72 1.72 0 0 0 8.17 8.5m8.55 2.76l-9.13 2.51a5.266 5.266 0 0 0 5.36 1.64a5.273 5.273 0 0 0 3.77-4.15Z"/></svg>',
     'search': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5Z"/></svg>',
     'drag': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M7 19v-2h2v2H7m4 0v-2h2v2h-2m4 0v-2h2v2h-2m-8-4v-2h2v2H7m4 0v-2h2v2h-2m4 0v-2h2v2h-2m-8-4V9h2v2H7m4 0V9h2v2h-2m4 0V9h2v2h-2M7 7V5h2v2H7m4 0V5h2v2h-2m4 0V5h2v2h-2Z"/></svg>',
-    'setting': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M19.14 12.94c.04-.3.06-.61.06-.94c0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6s3.6 1.62 3.6 3.6s-1.62 3.6-3.6 3.6z"/></svg>'
+    'setting': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M19.14 12.94c.04-.3.06-.61.06-.94c0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6s3.6 1.62 3.6 3.6s-1.62 3.6-3.6 3.6z"/></svg>',
+    'star': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21L12 17.27Z"/></svg>',
+    'gps': '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M12 8a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m-8.95 5H1v-2h2.05C3.5 6.83 6.83 3.5 11 3.05V1h2v2.05c4.17.45 7.5 3.78 7.95 7.95H23v2h-2.05c-.45 4.17-3.78 7.5-7.95 7.95V23h-2v-2.05C6.83 20.5 3.5 17.17 3.05 13M12 5a7 7 0 0 0-7 7a7 7 0 0 0 7 7a7 7 0 0 0 7-7a7 7 0 0 0-7-7Z"/></svg>',
+    'map_marker': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 6.5A2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5A2.5 2.5 0 0 1 9.5 9A2.5 2.5 0 0 1 12 6.5M12 2a7 7 0 0 1 7 7c0 5.25-7 13-7 13S5 14.25 5 9a7 7 0 0 1 7-7m0 2a5 5 0 0 0-5 5c0 1 0 3 5 9.71C17 12 17 10 17 9a5 5 0 0 0-5-5Z"/></svg>',
+    '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>',
+    '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>'
 }

package/tools/root.js

@@ -0,0 +1,71 @@
+import {computed, ref} from 'vue'
+
+export function useRootable(props, attrs) {
+    const isActive = ref(false)
+
+    const classes = computed(() => {
+        const classes = {}
+        if (props.to) return classes
+        if (props.activeClass) classes[props.activeClass] = isActive.value
+        return classes
+    })
+
+    const isClickable = computed(() => {
+        if (props.disabled) return false
+        return Boolean(isLink.value || 'tabindex' in attrs)
+    })
+
+    const isLink = computed(() => {
+        return props.to || props.href || props.link
+    })
+
+    const route = computed(() => {
+        return generateRouteLink()
+    })
+
+    const generateRouteLink = () => {
+        let tag
+        const data = {
+            attrs: {
+                tabindex: 'tabindex' in attrs ? attrs.tabindex : undefined
+            },
+            props: {},
+            class: classes.value,
+            ref: 'link'
+        }
+
+        if (isClickable.value) {
+            if (props.to) {
+                const activeClass = props.activeClass
+                const exactActiveClass = props.exactActiveClass || activeClass
+
+                tag = 'router-link'
+                Object.assign(data.props, {
+                    to: props.to,
+                    activeClass,
+                    exactActiveClass
+                })
+            } else {
+                tag = (props.href && 'a') || props.tag || 'span'
+                if (tag === 'a' && props.href) data.attrs.href = props.href
+            }
+            if (props.target) data.attrs.target = props.target
+        } else {
+            tag = props.tag || 'span'
+        }
+
+        return {
+            tag,
+            data
+        }
+    }
+
+    return {
+        isActive,
+        classes,
+        isClickable,
+        isLink,
+        route,
+        generateRouteLink
+    }
+}

package/components/app/style.scss

@@ -1,41 +0,0 @@
-@use '../../style/style';
-@use "../../style/variables/base";
-@use "../../style/mixins";
-
-.#{base.$prefix}app {
-  display: flex;
-
-  background: var(--color-sheet);
-  color: var(--color-on-sheet);
-
-
-  &.app-rtl {
-    direction: rtl;
-    text-align: right;
-  }
-
-  &.app-ltr {
-    direction: ltr;
-    text-align: left;
-  }
-
-  .app-wrap {
-    max-width: 100%;
-    width: 100%;
-  }
-
-}
-
-// Firefox overrides
-@include mixins.firefox() {
-  @media print {
-    .#{base.$prefix}app {
-      display: block;
-
-      &-wrap {
-        display: block
-      }
-    }
-  }
-}
-

package/components/app/toast/style.scss

@@ -1,20 +0,0 @@
-@use "sass:map";
-@use "../../../style/variables/base";
-
-.#{base.$prefix}toast {
-  max-width: 500px;
-  width: 95vw;
-  position: fixed;
-  bottom: 15px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: map.get(base.$z-index, 'veryImportant');
-
-  .toast-content {
-    padding: 15px;
-    display: flex;
-    align-items: center;
-  }
-}
-
-

package/components/avatar/style.scss

@@ -1,32 +0,0 @@
-@use "../../style/variables/base";
-
-.#{base.$prefix}avatar {
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-  text-align: center;
-  align-items: center;
-
-  .avatar-content {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    line-height: normal;
-    position: relative;
-    overflow: hidden;
-    border: 3px solid;
-  }
-
-  &.avatar-tile {
-    .avatar-content {
-      border-radius: 0
-    }
-  }
-
-  .avatar-edit {
-    position: absolute;
-    bottom: 15px;
-    right: 15px;
-    z-index: 1;
-  }
-}

package/components/bar/bottomNav.js

@@ -1 +0,0 @@
-export * as rBottomNavigation from './bottomNav.vue'

package/components/bar/bottomNav.vue

@@ -1,28 +0,0 @@
-<template>
-  <nav :class="classes">
-    <slot></slot>
-  </nav>
-</template>
-
-<script>
-import './scss/bottomNav.scss'
-
-export default {
-  name: 'r-bottomNav',
-  props: {
-    fixed: Boolean,
-    grow: Boolean
-  },
-  computed:{
-    classes(){
-      let a={
-    'elevation-md':true,
-    'bottom-navigation-fixed':this.fixed,
-    'bottom-navigation-grow':this.grow
-  }
-  a[`${this.$r.prefix}bottom-navigation`]=true
-  return a
-    }
-  }
-}
-</script>

package/components/bar/bottomNavigationCircle.js

@@ -1,2 +0,0 @@
-export * as rBottomNavigationCircle from './bottomNavigationCircle.vue'
-export * as l_icon from '../icon/index.js'

package/components/bar/bottomNavigationCircle.vue

@@ -1,99 +0,0 @@
-<template>
-  <nav :class="`${$r.prefix}bottom-navigation-circle`">
-    <router-link
-        :to="item.to"
-        class="navigation-item"
-        v-for="(item, i) in items"
-        :key="i"
-    >
-      <div class="navigation-item-icon">
-        <slot name="icon" :item="item">
-          <r-icon v-html="item.icon"></r-icon>
-        </slot>
-      </div>
-      <div class="navigation-item-text">
-        <slot name="name" :item="item">{{ item.name }}</slot>
-      </div>
-    </router-link>
-  </nav>
-</template>
-
-<script>
-export default {
-  name: "rBottomNavigationCircle",
-  props: {
-    items: Object
-  },
-  data() {
-    return {};
-  }
-};
-</script>
-
-<style lang="scss">
-@use "sass:map";
-@use "../../style/variables/base";
-@use "../../style/mixins";
-
-.#{base.$prefix}bottom-navigation-circle {
-  position: fixed;
-  bottom: 0;
-  display: flex;
-  left: 0;
-  justify-content: center;
-  width: 100%;
-  height: 56px;
-  z-index: map.get(base.$z-index, "default");
-  background-color: var(--color-sheet);
-  color: var(--color-on-sheet);
-
-  @include mixins.typography(base.$headings, 'body-3');
-
-  .navigation-item {
-    width: 100%;
-    max-width: 100%;
-    text-align: center;
-    position: relative;
-
-    &-text {
-      position: absolute;
-      bottom: 10px;
-      left: 0;
-      right: 0;
-    }
-
-    &-icon {
-      transition: 0.3s all ease-in-out;
-      position: absolute;
-      bottom: 12px;
-      left: 0;
-      right: 0;
-      width: 50px;
-      height: 50px;
-      margin-left: auto;
-      margin-right: auto;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  .router-link-exact-active {
-    color: var(--color-one);
-    .navigation-item-icon {
-      transition: 0.3s all ease-in-out;
-      bottom: 31px;
-      background-color: var(--color-one);
-      border-radius: 50%;
-      padding: 12px;
-      width: 50px;
-      height: 50px;
-      border: 3px solid var(--color-on-one);
-
-      .#{base.$prefix}icon {
-        color: var(--color-on-one);
-      }
-    }
-  }
-}
-</style>