shared-ritm 1.2.79 → 1.2.81

package/src/common/app-sheet-new/AppSheetNew.vue

@@ -0,0 +1,255 @@
+<template>
+  <q-dialog
+    ref="DialogRef"
+    :model-value="true"
+    :position="'right'"
+    :class="$style['sheet-dialog']"
+    :persistent="persistent"
+    no-shake
+    no-esc-dismiss
+    full-height
+    full-width
+    @before-hide="emit('before-hide')"
+  >
+    <div v-if="loading" class="custom-wrapper">
+      <div class="loader">
+        <q-spinner-audio v-if="loading" class="loader-spinner" size="md" :thickness="3" color="primary" />
+      </div>
+    </div>
+    <div v-else class="wrapper">
+      <div v-if="tabs?.length" class="sidebar" :class="{ noTitle: !tabsTitle }" :style="{ width: sidebarWidth }">
+        <h5 v-if="tabsTitle">{{ tabsTitle }}</h5>
+        <q-tabs
+          v-model="currTabId"
+          vertical
+          align="justify"
+          inline-label
+          class="tabs"
+          dense
+          active-class="active-tab"
+          no-caps
+        >
+          <q-tab
+            v-for="tab in tabs"
+            :key="tab.id"
+            :class="$style['tab']"
+            :name="tab.title"
+            icon="radio_button_unchecked"
+            :label="tab.title"
+          />
+        </q-tabs>
+      </div>
+
+      <div class="content">
+        <div v-if="title" class="content-header">
+          <h2 class="ellipsis" :title="title">{{ title }}</h2>
+          <q-btn v-close-popup="!persistent" dense flat icon="close" @click="emit('close')" />
+        </div>
+
+        <slot />
+
+        <div v-if="'actions' in slots" class="app-sheet-actions">
+          <slot name="actions" />
+        </div>
+      </div>
+    </div>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, Ref, useSlots, withDefaults } from 'vue'
+import { QDialog } from 'quasar'
+
+interface DialogProps {
+  dialogRef: Ref<QDialog | undefined, QDialog | undefined>
+  loading?: boolean
+  title?: string
+  tabsTitle?: string
+  width?: string
+  type?: 'details' | 'custom'
+  tabs?: { id: string | number; title?: string }[]
+  tabId?: string
+  sidebarWidth?: string
+  persistent?: boolean
+}
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  title: '',
+  tabsTitle: '',
+  width: '1200px',
+  type: 'details',
+  loading: false,
+  tabs: () => [],
+  tabId: '',
+  sidebarWidth: '',
+  persistent: false,
+})
+
+const emit = defineEmits(['update:dialogRef', 'update:tabId', 'close', 'before-hide'])
+
+const slots = useSlots()
+
+const DialogRef = computed({
+  get() {
+    return props.dialogRef
+  },
+  set(value) {
+    emit('update:dialogRef', value)
+  },
+})
+
+const currTabId = computed({
+  get() {
+    return props.tabId
+  },
+  set(value) {
+    emit('update:tabId', value)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.custom-wrapper {
+  width: v-bind(width);
+  background-color: white;
+}
+
+.loader {
+  min-width: 976px;
+
+  &-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 4;
+  }
+}
+
+.wrapper {
+  display: flex;
+  overflow: hidden;
+  font-family: 'NunitoSansFont', sans-serif;
+  color: #3f414d;
+}
+
+.sidebar {
+  max-width: 25vw;
+  flex: none;
+  padding: 2rem 0 2rem 2rem;
+  background-color: #f4f9fd;
+
+  &.noTitle {
+    padding: 0 0 2rem 2rem;
+  }
+
+  h5 {
+    font-size: 24px;
+    font-weight: 700;
+    padding-right: 2rem;
+  }
+
+  .tabs {
+    color: #b9c0c7;
+    transition-duration: 0.1s;
+    margin: 16px 0;
+  }
+
+  .active-tab {
+    color: #3f8cff;
+  }
+}
+
+.content {
+  background-color: #fff;
+  height: 100vh;
+  width: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 1rem;
+    border-bottom: 1px solid var(--g-grey-100);
+    overflow: hidden;
+
+    h2 {
+      font-size: 32px;
+      font-weight: 700;
+    }
+  }
+}
+
+.app-sheet-actions {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  border-top: 1px solid var(--g-grey-100);
+}
+</style>
+
+<style lang="scss" module>
+.sheet-dialog {
+  :global(.q-dialog__inner) {
+    width: v-bind(width);
+    max-width: 95vw;
+  }
+
+  :global(.q-dialog__inner--minimized) {
+    padding: 0;
+  }
+}
+
+.tab {
+  padding: 0 !important;
+
+  :global(.q-focus-helper) {
+    display: none !important;
+  }
+  :global(.q-ripple) {
+    display: none !important;
+  }
+  :global(.q-tab__content) {
+    width: 100%;
+    justify-content: left;
+    margin: 10px 0;
+    padding-right: 2rem;
+
+    :global(.q-tab__label) {
+      font-size: 18px;
+      font-family: NunitoSansFont, sans-serif;
+    }
+    :global(.q-tab__icon) {
+      font-size: 33px;
+      width: 33px;
+      height: 33px;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -23px;
+      left: 15px;
+      height: 26px;
+      border: 1px solid #b9c0c7;
+    }
+  }
+}
+
+.tab:last-child {
+  :global(.q-tab__content) {
+    &::after {
+      display: none;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.app-sheet-actions {
+  button {
+    border-radius: 8px;
+  }
+}
+</style>

package/src/common/app-sidebar/components/SidebarMenuItem.vue

@@ -1,148 +1,148 @@
-<template>
-  <q-expansion-item
-    v-if="item.items"
-    :model-value="isRouteActive(item) && expand"
-    header-class="text-purple"
-    :class="[$style['menu-item'], { 'expansion-item-active': isRouteActive(item) && minify }]"
-    :data-test="`sidebar-expansion-item-${(item.name || 'unnamed').toLowerCase().replace(/\s+/g, '-')}`"
-    @update:model-value="expand = $event"
-  >
-    <template #header>
-      <q-tooltip
-        v-if="minify"
-        :delay="100"
-        transition-show="jump-right"
-        transition-hide="jump-left"
-        anchor="center right"
-        self="center left"
-      >
-        {{ item.label }}
-      </q-tooltip>
-
-      <q-item-section v-if="item.icon" avatar>
-        <app-icon :name="item.icon" color="white" size="24px" />
-      </q-item-section>
-
-      <q-item-section :class="$style['menu-item__label']">{{ item.label }}</q-item-section>
-    </template>
-
-    <sidebar-menu-item
-      v-for="(subItem, index) in item.items"
-      :key="index"
-      :item="subItem"
-      :main="main"
-      :is-route-active="isRouteActive"
-    />
-  </q-expansion-item>
-  <q-item
-    v-else-if="item.name !== 'sign-out'"
-    v-ripple
-    :class="$style['menu-item']"
-    :active="isRouteActive(item)"
-    active-class="menu-active"
-    clickable
-    :to="main ? item.to : ''"
-    :data-test="`sidebar-item-${item.name.toLowerCase().replace(/\s+/g, '-')}`"
-    @click="goToRoute(item.to)"
-  >
-    <q-item-section v-if="item.icon" avatar>
-      <app-icon :name="item.icon" color="white" size="24px" />
-    </q-item-section>
-
-    <q-item-section :class="$style['menu-item__label']">
-      <p>{{ item.label }}</p>
-    </q-item-section>
-    <q-tooltip
-      :delay="100"
-      transition-show="jump-right"
-      transition-hide="jump-left"
-      anchor="center right"
-      self="center left"
-    >
-      {{ item.label }}
-    </q-tooltip>
-  </q-item>
-</template>
-
-<script lang="ts" setup>
-import { defineProps, ref } from 'vue'
-import AppIcon from '@/common/app-icon/AppIcon.vue'
-
-interface Props {
-  minify?: boolean
-  main: boolean
-  isRouteActive: (item: any) => boolean
-  item: {
-    name: string
-    label: string
-    icon: string
-    href: string
-    to: string
-    items: any[]
-  }
-}
-
-const emits = defineEmits(['goToRoute'])
-const props = defineProps<Props>()
-
-const expand = ref(true)
-
-const goToRoute = (to: string) => {
-  if (!props.main) window.location.href = to
-}
-</script>
-
-<style lang="scss" scoped>
-.expansion-item-active {
-  background: rgba(243, 249, 253, 0.1);
-  border-radius: 10px;
-}
-</style>
-
-<style lang="scss" module>
-.menu-item {
-  margin: 0 8px;
-  &:global(.menu-active) {
-    border-radius: 10px;
-    background: rgba(243, 249, 253, 0.1);
-  }
-  :global(.q-item__section--avatar) {
-    min-width: 24px;
-    padding-right: 14px;
-  }
-
-  :global(.q-expansion-item__content .q-item) {
-    padding-left: 20px;
-  }
-  :global(.q-item__section--main ~ .q-item__section--side) {
-    color: white;
-  }
-  &__label {
-    color: #fff;
-    font-family: 'Nunito Sans', sans-serif;
-    font-size: 16px;
-    font-weight: 300;
-    p {
-      display: inline-block;
-      max-width: 160px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin: 0;
-    }
-  }
-}
-
-@media (max-width: 1440px) {
-  .menu-item {
-    margin: 0 4px;
-    :global(.q-item__section--avatar) {
-      min-width: 24px;
-      padding-right: 10px;
-    }
-    &__label {
-      font-size: 14px;
-    }
-  }
-}
-</style>
+<template>
+  <q-expansion-item
+    v-if="item.items"
+    :model-value="isRouteActive(item) && expand"
+    header-class="text-purple"
+    :class="[$style['menu-item'], { 'expansion-item-active': isRouteActive(item) && minify }]"
+    :data-test="`sidebar-expansion-item-${(item.name || 'unnamed').toLowerCase().replace(/\s+/g, '-')}`"
+    @update:model-value="expand = $event"
+  >
+    <template #header>
+      <q-tooltip
+        v-if="minify"
+        :delay="100"
+        transition-show="jump-right"
+        transition-hide="jump-left"
+        anchor="center right"
+        self="center left"
+      >
+        {{ item.label }}
+      </q-tooltip>
+
+      <q-item-section v-if="item.icon" avatar>
+        <app-icon :name="item.icon" color="white" size="24px" />
+      </q-item-section>
+
+      <q-item-section :class="$style['menu-item__label']">{{ item.label }}</q-item-section>
+    </template>
+
+    <sidebar-menu-item
+      v-for="(subItem, index) in item.items"
+      :key="index"
+      :item="subItem"
+      :main="main"
+      :is-route-active="isRouteActive"
+    />
+  </q-expansion-item>
+  <q-item
+    v-else-if="item.name !== 'sign-out'"
+    v-ripple
+    :class="$style['menu-item']"
+    :active="isRouteActive(item)"
+    active-class="menu-active"
+    clickable
+    :to="main ? item.to : ''"
+    :data-test="`sidebar-item-${item.name.toLowerCase().replace(/\s+/g, '-')}`"
+    @click="goToRoute(item.to)"
+  >
+    <q-item-section v-if="item.icon" avatar>
+      <app-icon :name="item.icon" color="white" size="24px" />
+    </q-item-section>
+
+    <q-item-section :class="$style['menu-item__label']">
+      <p>{{ item.label }}</p>
+    </q-item-section>
+    <q-tooltip
+      :delay="100"
+      transition-show="jump-right"
+      transition-hide="jump-left"
+      anchor="center right"
+      self="center left"
+    >
+      {{ item.label }}
+    </q-tooltip>
+  </q-item>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, ref } from 'vue'
+import AppIcon from '@/common/app-icon/AppIcon.vue'
+
+interface Props {
+  minify?: boolean
+  main: boolean
+  isRouteActive: (item: any) => boolean
+  item: {
+    name: string
+    label: string
+    icon: string
+    href: string
+    to: string
+    items: any[]
+  }
+}
+
+const emits = defineEmits(['goToRoute'])
+const props = defineProps<Props>()
+
+const expand = ref(true)
+
+const goToRoute = (to: string) => {
+  if (!props.main) window.location.href = to
+}
+</script>
+
+<style lang="scss" scoped>
+.expansion-item-active {
+  background: rgba(243, 249, 253, 0.1);
+  border-radius: 10px;
+}
+</style>
+
+<style lang="scss" module>
+.menu-item {
+  margin: 0 8px;
+  &:global(.menu-active) {
+    border-radius: 10px;
+    background: rgba(243, 249, 253, 0.1);
+  }
+  :global(.q-item__section--avatar) {
+    min-width: 24px;
+    padding-right: 14px;
+  }
+
+  :global(.q-expansion-item__content .q-item) {
+    padding-left: 20px;
+  }
+  :global(.q-item__section--main ~ .q-item__section--side) {
+    color: white;
+  }
+  &__label {
+    color: #fff;
+    font-family: 'Nunito Sans', sans-serif;
+    font-size: 16px;
+    font-weight: 300;
+    p {
+      display: inline-block;
+      max-width: 160px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin: 0;
+    }
+  }
+}
+
+@media (max-width: 1440px) {
+  .menu-item {
+    margin: 0 4px;
+    :global(.q-item__section--avatar) {
+      min-width: 24px;
+      padding-right: 10px;
+    }
+    &__label {
+      font-size: 14px;
+    }
+  }
+}
+</style>