renusify 2.5.2 → 3.0.1

package/components/table/style.scss

@@ -1,338 +0,0 @@
-@use "sass:map";
-@use "../../style/variables/base";
-@use "../../style/mixins";
-
-$data-table-thin-header-height: 38px !default;
-$data-table-thin-row-height: 32px !default;
-$data-table-regular-row-height: 42px !default;
-$data-table-regular-header-height: 38px !default;
-
-.#{base.$prefix}table {
-  position: relative;
-
-  .table-wrapper {
-    background-color: var(--color-sheet-container-lowest);
-    color: var(--color-on-sheet);
-  }
-
-  .table-svg-path {
-    fill: var(--color-sheet);
-  }
-
-  .table-editable-icon {
-    background-color: var(--color-sheet);
-    color: var(--color-on-sheet);
-  }
-
-  &.table-fixed-header {
-    thead th {
-      box-shadow: inset 0 -2px var(--color-border)
-    }
-  }
-
-  thead {
-    tr {
-      &:last-child th {
-        border-bottom: 1px solid var(--color-border)
-      }
-
-      th {
-        background-color: var(--color-sheet);
-        color: var(--color-on-sheet)
-      }
-    }
-  }
-
-  &.table-fixed-first-columns {
-    tr {
-      th:first-child {
-        background: var(--color-sheet);
-        color: var(--color-on-sheet)
-      }
-
-      td:first-child {
-        background: var(--color-sheet);
-        color: var(--color-on-sheet)
-      }
-
-      &:hover {
-        td:first-child {
-          background: var(--color-sheet-container);
-          color: var(--color-on-sheet)
-        }
-      }
-    }
-  }
-
-  &.table-stripped {
-    tbody {
-      tr:nth-child(2n):not(:hover) {
-        td {
-          background: var(--color-sheet-container-low)
-        }
-      }
-    }
-  }
-
-  tbody {
-    tr {
-      &:active {
-        background: var(--color-sheet-container)
-      }
-
-      &:hover {
-        background: var(--color-sheet-container)
-      }
-    }
-
-    tr:not(:last-child) {
-      td {
-        border-bottom: 1px solid var(--color-border)
-      }
-    }
-  }
-
-  &.table-bordered .table-wrapper {
-    border: 1px solid var(--color-border);
-    border-collapse: collapse;
-  }
-
-  .table-wrapper {
-    border-radius: map.get(base.$borders, 'lg');
-    overflow: hidden;
-  }
-
-  table {
-    width: 100%;
-    border-spacing: 0;
-    border-collapse: collapse;
-  }
-
-  td, th {
-    padding: 0 16px;
-    @include mixins.ltr() {
-      text-align: left
-    }
-    @include mixins.rtl() {
-      text-align: right
-    }
-  }
-
-  th {
-    user-select: none;
-    font-size: 14px;
-    font-weight: bold;
-    height: $data-table-regular-header-height;
-
-  }
-
-  td {
-    font-size: 14px;
-    font-weight: normal;
-    height: $data-table-regular-row-height;
-  }
-
-  &.row-thin {
-    th {
-      font-size: 12px;
-      height: $data-table-thin-header-height;
-
-    }
-
-    td {
-      font-size: 12px;
-      height: $data-table-thin-row-height
-    }
-  }
-
-  .table-container {
-    overflow-x: auto
-  }
-
-  &.table-fixed-header {
-    .table-container {
-      overflow-y: auto;
-      max-height: 85vh;
-    }
-
-    thead {
-      th {
-        border-bottom: 0px !important;
-        position: sticky;
-        top: 0;
-        z-index: 2;
-
-        tr:nth-child(2) {
-          th {
-            top: $data-table-regular-header-height
-          }
-        }
-      }
-    }
-  }
-
-  &.table-fixed-first-columns {
-    tr {
-      position: relative;
-
-      th:first-child {
-        min-width: 300px !important;
-        position: sticky;
-        width: 300px;
-        @include mixins.rtl() {
-          right: 0;
-        }
-        @include mixins.ltr() {
-          left: 0;
-        }
-        z-index: map.get(base.$z-index, 'medium');
-      }
-
-      td:first-child {
-        position: sticky;
-        width: 300px;
-        @include mixins.rtl() {
-          right: 0;
-        }
-        @include mixins.ltr() {
-          left: 0;
-        }
-        height: auto;
-        z-index: map.get(base.$z-index, 'low');
-      }
-    }
-  }
-
-  &.table-sortable {
-    th {
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-
-  &.table-editable {
-    .table-editable-icon {
-      cursor: pointer;
-      border-radius: 20px 20px 0 0;
-      border: none;
-      min-width: 25px !important;
-      padding-top: 8px;
-      height: 30px !important;
-    }
-
-    .table-wrapper {
-      @include mixins.rtl() {
-        border-top-left-radius: 0;
-      }
-      @include mixins.ltr() {
-        border-top-right-radius: 0;
-      }
-    }
-
-    .table-svg {
-      @include mixins.ltr() {
-        transform: rotateY(180deg);
-      }
-    }
-  }
-
-  .sort-desc {
-    transform: rotate(180deg) !important;
-  }
-
-  tr, td, td > * {
-    transition: height .4s ease-in-out;
-  }
-
-  td > * {
-    overflow-y: hidden;
-    overflow-x: auto;
-  }
-
-  .tr-hidden {
-    overflow: hidden;
-  }
-
-  .table-row-enter-active, .table-row-leave-active {
-    transition: height .3s linear;
-    line-height: 0;
-  }
-
-  .table-row-enter-from {
-    td {
-      height: 0;
-      line-height: 0;
-      overflow: hidden;
-    }
-  }
-
-  .table-row-leave-to {
-    td {
-      height: 0;
-      line-height: 0;
-      overflow: hidden;
-
-    }
-  }
-
-  .table-row-move {
-    transition: transform .3s ease-in-out;
-  }
-}
-
-.#{base.$prefix}table-manage {
-  white-space: nowrap;
-
-  .table-checkbox {
-    width: 17px;
-    height: 17px;
-  }
-
-  .manage-footer {
-    .btn-page {
-      color: var(--color-on-sheet);
-      border: solid 1px var(--color-sheet-low);
-      background-color: var(--color-sheet-container);
-    }
-  }
-
-  th {
-    position: relative;
-    transition: 0.2s;
-
-    .icon-hidden {
-      visibility: hidden;
-    }
-
-    &.header-sortable:hover {
-      cursor: pointer;
-
-      .icon-hidden {
-        visibility: visible;
-      }
-    }
-  }
-
-  td {
-    max-width: 130px !important;
-    overflow: auto;
-  }
-
-  .manage-footer {
-    .btn-page {
-      border-radius: 30px;
-      padding: 2px;
-    }
-
-    .per-page {
-      width: 80px;
-    }
-
-    .input-page {
-      outline: none;
-      width: 20px;
-
-    }
-  }
-}

package/components/tabs/index.js

@@ -1,3 +0,0 @@
-export * as rTabs from './index.vue'
-export * as l_btn from '../button/index.js'
-export * as l_icon from '../icon/index.js'

package/components/tabs/index.vue

@@ -1,151 +0,0 @@
-<template>
-  <div :class="$r.prefix+'tabs'">
-    <div ref="tabs" :class="[wrapperClass]" class="tabs-wrap">
-      <button
-          v-for="tab in items"
-          :key="tab.title"
-          :ref="tab.value.toString()"
-          :class="[
-        { 'tabs__item_active' : tab.value === modelValue,
-        [tabActiveClass]:tab.value === modelValue },
-        tabClass,
-      ]"
-          :disabled="tab.disabled || false"
-          class="tabs__item"
-          type="button"
-          @click.prevent="handleClick(tab.value)"
-      >
-        <slot :item="tab">{{ tab.title }}</slot>
-      </button>
-      <div
-          :class="lineClass"
-          :style="{ width: `${activeLineWidth}px`, transform: `translateX(${activeLineOffset}px)` }"
-          class="tabs__active-line"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'r-tabs',
-  props: {
-    modelValue: {
-      type: [String, Number, Boolean]
-    },
-    items: {
-      type: Array,
-      required: true
-    },
-    wrapperClass: {
-      type: String,
-      required: false
-    },
-    tabClass: {
-      type: String,
-      required: false
-    },
-    tabActiveClass: {
-      type: String,
-      default: ''
-    },
-    lineClass: {
-      type: String,
-      required: false
-    },
-    autoScrollToView: Boolean
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      activeLineWidth: 0,
-      activeLineOffset: 0
-    }
-  },
-  mounted() {
-    setTimeout(() => {
-      if (this.modelValue) {
-        this.moveActiveLine(this.modelValue.toString())
-      }
-    }, 100)
-  },
-  watch: {
-    modelValue(newCurrentTab, o) {
-      if (o === newCurrentTab) return
-      setTimeout(() => {
-        this.moveActiveLine(newCurrentTab)
-      }, 100)
-    }
-  },
-
-  methods: {
-    handleClick(value) {
-      this.$emit('update:modelValue', value)
-      this.moveActiveLine(value.toString())
-    },
-    moveActiveLine(newValue) {
-      if (!this.modelValue) return
-      if (!this.$refs[newValue]) return
-      let element = this.$refs[newValue][0] || this.$refs[newValue]
-      this.activeLineWidth = element.clientWidth
-      this.activeLineOffset = element.offsetLeft
-      if (this.autoScrollToView) {
-        element.scrollIntoView()
-      }
-    }
-  }
-}
-</script>
-<style lang="scss">
-@use "../../style/variables/base";
-
-.#{base.$prefix}tabs {
-  max-width: 100%;
-  display: flex;
-  flex-direction: row;
-
-  .tabs-wrap {
-    position: relative;
-    margin: 0 auto;
-    white-space: nowrap;
-    width: 100%;
-    overflow: auto;
-
-    scroll-behavior: smooth;
-  }
-
-  .tabs__active-line {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 2px;
-    background-color: currentColor;
-    transition: transform 0.4s ease, width 0.4s ease;
-  }
-
-  .tabs__item {
-    display: inline-block;
-    margin: 0 5px;
-    padding: 10px;
-    padding-bottom: 8px;
-    text-decoration: none;
-    border: none;
-    background-color: transparent;
-    border-bottom: 2px solid transparent;
-    cursor: pointer;
-    transition: all 0.25s;
-    color: inherit;
-
-    &:focus {
-      outline: none;
-    }
-
-    &:first-child {
-      margin-left: 0;
-    }
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-}
-</style>

package/components/timeline/index.js

@@ -1,6 +0,0 @@
-export * as rTimeline from './index.vue'
-
-
-export * as l_container from '../container/index.js'
-export * as l_row from '../container/row.js'
-export * as l_col from '../container/col.js'

package/components/timeline/index.vue

@@ -1,76 +0,0 @@
-<template>
-  <r-container :class="`${$r.prefix}timeline`" full-width>
-    <r-row v-for="(item,i) in items" :key="i" class="timeline-item" no-gutters>
-      <r-col v-if="$r.breakpoint.mdAndUp" class="md-5">
-        <slot :item="item" :k="i" name="back"></slot>
-      </r-col>
-      <r-col class="col-2 md-2">
-        <slot :item="item" :k="i" name="counter">
-          <div class="d-flex h-center v-center h-full">
-            <div class="timeline-counter color-one d-flex h-center v-center">{{ i + 1 }}</div>
-          </div>
-        </slot>
-      </r-col>
-      <r-col class="col-10 md-5">
-        <slot :item="item" :k="i">{{ item }}</slot>
-      </r-col>
-    </r-row>
-  </r-container>
-</template>
-<script>
-export default {
-  name: "rTimeline",
-  props: {
-    items: {
-      type: Array
-    }
-  }
-}
-</script>
-<style lang="scss">
-@use "sass:math";
-@use "../../style/variables/base";
-@use "../../style/mixins";
-@use "../../style/mixins/container" as mixins2;
-
-.#{base.$prefix}timeline {
-  .timeline-item {
-    position: relative;
-    padding: 30px 0;
-
-    &:not(:last-child):before {
-      content: '';
-      width: 1px;
-      height: 40%;
-      border-right: 2px solid var(--color-border);
-      position: absolute;
-      bottom: -20%;
-      z-index: 0;
-      @include mixins.rtl() {
-        right: math.percentage(math.div(1, base.$grid-columns));
-      }
-      @include mixins.ltr() {
-        left: math.percentage(math.div(1, base.$grid-columns));
-      }
-    }
-
-    @include mixins2.media-breakpoint-up('md') {
-      &:nth-child(2n) {
-        flex-direction: row-reverse;
-      }
-      &:not(:last-child):before {
-        left: 50% !important;
-        right: unset !important;
-      }
-    }
-
-  }
-
-  .timeline-counter {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    z-index: 1;
-  }
-}
-</style>

package/directive/resize/index.js

@@ -1,30 +0,0 @@
-function mounted (el, binding) {
-  const callback = binding.value
-  const options = binding.options || {
-    passive: true
-  }
-  window.addEventListener('resize', callback, options)
-  el._onResize = {
-    callback,
-    options
-  }
-
-  if (!binding.modifiers || !binding.modifiers.quiet) {
-    callback()
-  }
-}
-
-function unmounted (el) {
-  if (!el._onResize) return
-  const {
-    callback,
-    options
-  } = el._onResize
-  window.removeEventListener('resize', callback, options)
-  delete el._onResize
-}
-
-export default {
-    mounted,
-    unmounted
-}

package/directive/skeleton/index.js

@@ -1,27 +0,0 @@
-import "./style.scss";
-
-function mounted(el, binding) {
-  let data = binding.value;
-  if (!data.loading) {
-    el.classList.add("r-skeleton");
-  }
-}
-
-function updated(el, binding) {
-  if (binding.value === binding.oldValue) {
-    return null;
-  }
-
-  unmounted(el);
-  mounted(el, binding);
-}
-
-function unmounted(el) {
-  el.classList.remove("r-skeleton");
-}
-
-export default {
-  mounted,
-  updated,
-  unmounted,
-};

package/directive/skeleton/style.scss

@@ -1,37 +0,0 @@
-.r-skeleton {
-  * {
-    opacity: 0 !important;
-  }
-
-  & {
-    -webkit-text-fill-color: transparent !important;
-    background-color: rgba(0, 0, 0, 0.12) !important;
-    overflow: hidden !important;
-    position: relative !important;
-  }
-;
-
-  &:after {
-    animation: skeletonloading 1.5s infinite;
-    content: "";
-    height: 100%;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform: translateX(-100%);
-    z-index: 1;
-    background: linear-gradient(
-                    90deg,
-                    hsla(0, 0%, 100%, 0),
-                    hsla(0, 0%, 100%, 0.3),
-                    hsla(0, 0%, 100%, 0)
-    );
-  }
-
-  @keyframes skeletonloading {
-    100% {
-      transform: translateX(100%);
-    }
-  }
-}