shared-ritm 1.2.89 → 1.2.91

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

@@ -1,247 +1,246 @@
-<template>
-  <q-dialog
-    :model-value="modelValue"
-    :position="'right'"
-    :class="$style['sheet-dialog']"
-    :persistent="persistent"
-    no-shake
-    no-esc-dismiss
-    full-height
-    full-width
-    @update:model-value="emit('update:modelValue', $event)"
-  >
-    <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, useSlots, withDefaults } from 'vue'
-import { QDialog } from 'quasar'
-
-interface DialogProps {
-  modelValue: boolean
-  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>(), {
-  modelValue: false,
-  title: '',
-  tabsTitle: '',
-  width: '1200px',
-  type: 'details',
-  loading: false,
-  tabs: () => [],
-  tabId: '',
-  sidebarWidth: '',
-  persistent: false,
-})
-
-const emit = defineEmits(['update:modelValue', 'update:tabId', 'close', 'before-hide'])
-
-const slots = useSlots()
-
-const currTabId = computed({
-  get() {
-    return props.tabs?.find(t => t.id === props.tabId)?.title
-  },
-  set(value) {
-    const id = props.tabs?.find(t => t.title === value)?.id
-    emit('update:tabId', id)
-  },
-})
-</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>
+<template>
+  <q-dialog
+    :model-value="modelValue"
+    :position="'right'"
+    :class="$style['sheet-dialog']"
+    :persistent="persistent"
+    no-shake
+    no-esc-dismiss
+    full-height
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <div v-if="loading" class="custom-wrapper" :style="{ width }">
+      <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" :style="{ width }">
+      <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, useSlots, withDefaults } from 'vue'
+import { QDialog } from 'quasar'
+
+interface DialogProps {
+  modelValue: boolean
+  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>(), {
+  modelValue: false,
+  title: '',
+  tabsTitle: '',
+  width: '1200px',
+  type: 'details',
+  loading: false,
+  tabs: () => [],
+  tabId: '',
+  sidebarWidth: '',
+  persistent: false,
+})
+
+const emit = defineEmits(['update:modelValue', 'update:tabId', 'close', 'before-hide'])
+
+const slots = useSlots()
+
+const currTabId = computed({
+  get() {
+    return props.tabs?.find(t => t.id === props.tabId)?.title
+  },
+  set(value) {
+    const id = props.tabs?.find(t => t.title === value)?.id
+    emit('update:tabId', id)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.custom-wrapper {
+  max-width: unset;
+  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;
+  max-width: unset;
+}
+
+.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) {
+    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>