shared-ritm 1.3.38 → 1.3.39

package/src/common/app-layout/components/AppLayoutHeader.vue

@@ -1,273 +1,289 @@
-<template>
-  <q-header :class="[$style.header, { [$style[`header-full`]]: fullWidth }]">
-    <q-toolbar :class="$style.toolbar">
-      <h1>{{ pageTitle }}</h1>
-      <div :class="$style['action-buttons']">
-        <div v-if="settingsMenuItems?.find(x => x.name === 'root-on' && x.isShow)" :class="$style['root-mode']">
-          <h1>Включен Root-режим</h1>
-        </div>
-
-        <div :class="$style['person']" @click="clickProfile">
-          <app-icon name="person-icon" />
-          <div :class="$style['person__info']">
-            <p style="font-weight: 700; font-size: 14px">{{ shortName }}</p>
-            <p style="font-weight: 300; font-size: 12px">{{ positionName }}</p>
-          </div>
-        </div>
-        <div :class="$style['action-wrapper']">
-          <!--          <q-btn :class="$style['notification']" flat padding="sm" :ripple="false" @click="clickNotification">-->
-          <!--            <app-icon color="white" size="28px" name="notifications-icon" />-->
-          <!--          </q-btn>-->
-          <q-separator color="white" vertical size="1px" />
-          <q-btn
-            ref="refMenuSettings"
-            flat
-            padding="sm"
-            :ripple="false"
-            :class="[$style['settings'], { [$style['settings__open']]: isSettingsOpened }]"
-            @click="openSettingsMenu"
-          >
-            <app-icon size="28px" name="setting-icon" />
-            <q-menu max-height="160px" :offset="[-18, 4]" :class="$style['settings-menu']">
-              <q-list v-for="item in settingsMenuItems" :key="item.name" :class="$style['settings-menu__list']">
-                <q-item
-                  v-show="item.isShow"
-                  v-close-popup
-                  :class="$style['settings-menu__item']"
-                  clickable
-                  @click="clickSettingsMenuItem(item)"
-                  >{{ item.label }}</q-item
-                >
-              </q-list>
-            </q-menu>
-          </q-btn>
-        </div>
-
-        <!--        <app-button icon="person" text-color="black" :label="shortName" rounded :class="$style['button-person']" />-->
-      </div>
-    </q-toolbar>
-  </q-header>
-</template>
-
-<script lang="ts" setup>
-import { computed, defineProps, ref, withDefaults } from 'vue'
-import { onClickOutside } from '@vueuse/core'
-import AppIcon from '@/common/app-icon/AppIcon.vue'
-
-interface Props {
-  userData: any
-  fullWidth?: boolean
-  pageTitle?: string
-  settingsMenuItems?: { label: string; name: string; isShow: boolean }[]
-}
-
-const emits = defineEmits(['clickSettingsMenuItem', 'clickNotification', 'clickProfile'])
-
-const props = withDefaults(defineProps<Props>(), {
-  pageTitle: '',
-})
-
-const refMenuSettings = ref(null)
-const isSettingsOpened = ref(false)
-
-// const settingsMenuItems = ref([
-//   { label: 'Поиск инструментов', name: 'instrument-search', isShow: true },
-//   { label: 'Мониторинг оборудования', name: 'equipment-monitoring', isShow: true },
-//   { label: 'Root-режим выключен', name: 'root-off', isShow: true },
-//   { label: 'Root-режим включен', name: 'root-on', isShow: false },
-// ])
-
-const shortName = computed(() => {
-  if (!props.userData?.full_name) return ''
-
-  const [lastName, name, patronymic] = props.userData.full_name.split(' ')
-
-  const mainPart = `${lastName} ${name}`
-
-  if (!patronymic) return mainPart
-
-  return `${mainPart} ${patronymic[0]}.`
-})
-
-const positionName = computed(() => props.userData?.positions?.[0]?.display_name)
-
-const openSettingsMenu = () => {
-  return (isSettingsOpened.value = !isSettingsOpened.value)
-}
-
-const clickProfile = () => emits('clickProfile')
-const clickSettingsMenuItem = (item: any) => emits('clickSettingsMenuItem', item.name)
-const clickNotification = () => emits('clickNotification')
-
-onClickOutside(refMenuSettings, () => (isSettingsOpened.value = false))
-</script>
-
-<style lang="scss" module>
-.header {
-  height: 100px;
-  background: transparent;
-  margin: 0 auto;
-  max-width: 1300px;
-}
-.header-full {
-  max-width: 100%;
-  padding-right: 30px;
-  padding-left: 30px;
-}
-.toolbar {
-  padding: 0;
-  min-height: 100%;
-  h1 {
-    font-weight: 600;
-    font-size: 28px;
-    line-height: 100%;
-    font-family: Montserrat, sans-serif;
-  }
-}
-
-.header-search {
-  width: 412px;
-  font-size: 16px;
-}
-
-.action-buttons {
-  flex: 1;
-  position: relative;
-  display: flex;
-  align-items: center;
-  column-gap: 16px;
-  justify-content: end;
-}
-
-.button {
-  padding: 12px;
-  background: white;
-  transition: all 0.3s ease, color 0.3s ease;
-}
-
-.button-person {
-  padding: 10px 14px;
-  background: white;
-}
-
-.root-mode {
-  display: flex;
-  align-items: center;
-  background-color: red;
-  padding: 14px;
-  border-radius: 10px;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
-  cursor: pointer;
-  user-select: none;
-  h1 {
-    font-size: 16px;
-    font-weight: 600;
-    font-family: 'Nunito Sans', sans-serif;
-  }
-  &:active {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 4px 4px rgba(0, 0, 0, 0.2), 0 6px 2px -5px rgba(0, 0, 0, 0.2);
-  }
-}
-
-.person {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 20px 12px;
-  height: 44px;
-  border-radius: 10px;
-  cursor: pointer;
-  background-color: white;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
-  transition: all 0.3s ease;
-  &__info {
-    display: flex;
-    flex-direction: column;
-    user-select: none;
-    p {
-      line-height: 1.2;
-      margin: 0;
-      padding: 0;
-      font-family: 'Nunito Sans', sans-serif;
-      color: rgb(63, 140, 255);
-    }
-  }
-  &:hover {
-    background-color: #e1e0e0;
-    transform: scale(1.01);
-  }
-  &:active {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 4px 4px rgba(0, 0, 0, 0.2), 0 6px 2px -5px rgba(0, 0, 0, 0.2);
-  }
-}
-
-.notification {
-  cursor: pointer;
-  transition: transform 0.3s ease;
-  &:hover {
-    transform: scale(1.1);
-  }
-  :global(.q-focus-helper) {
-    display: none;
-  }
-}
-
-.settings {
-  cursor: pointer;
-  transition: transform 0.3s ease;
-  &__open {
-    transform: rotate(90deg);
-  }
-  :global(.q-focus-helper) {
-    display: none;
-  }
-}
-
-.settings-menu {
-  min-width: 210px;
-  border-radius: 8px;
-  &__list {
-    min-width: 210px;
-  }
-  &__item {
-    align-items: center;
-    font-family: 'Nunito Sans', sans-serif;
-    color: rgb(63, 140, 255);
-  }
-}
-
-.action-wrapper {
-  height: 32px;
-  justify-content: space-between;
-  align-items: center;
-  display: flex;
-  gap: 12px;
-}
-
-@media (max-width: 1440px) {
-  .header {
-    height: 100px;
-    background: transparent;
-    margin: 0 auto;
-  }
-  .header-search {
-    width: 343px;
-    font-size: 16px;
-  }
-  .action-buttons {
-    position: relative;
-    display: flex;
-    align-items: center;
-    column-gap: 8px;
-  }
-  .button {
-    padding: 10px;
-    background: white;
-    transition: all 0.3s ease, color 0.3s ease;
-  }
-  .button-person {
-    padding: 8px 10px;
-    background: white;
-  }
-}
-</style>
+<template>
+  <q-header :class="[$style.header, { [$style[`header-full`]]: fullWidth }]">
+    <q-toolbar :class="$style.toolbar">
+      <h1>{{ pageTitle }}</h1>
+      <div :class="$style['action-buttons']">
+        <div v-if="settingsMenuItems?.find(x => x.name === 'root-on' && x.isShow)" :class="$style['root-mode']">
+          <h1>Включен Root-режим</h1>
+        </div>
+
+        <div :class="$style['person']" @click="clickProfile">
+          <app-icon name="person-icon" />
+          <div :class="$style['person__info']">
+            <p style="font-weight: 700; font-size: 14px">{{ shortName }}</p>
+            <p style="font-weight: 300; font-size: 12px">{{ positionName }}</p>
+          </div>
+        </div>
+        <div :class="$style['action-wrapper']">
+          <!--          <q-btn :class="$style['notification']" flat padding="sm" :ripple="false" @click="clickNotification">-->
+          <!--            <app-icon color="white" size="28px" name="notifications-icon" />-->
+          <!--          </q-btn>-->
+          <q-separator color="white" vertical size="1px" />
+          <q-btn
+            ref="refMenuSettings"
+            flat
+            padding="sm"
+            :ripple="false"
+            :class="[$style['settings'], { [$style['settings__open']]: isSettingsOpened }]"
+            @click="openSettingsMenu"
+          >
+            <app-icon size="28px" name="setting-icon" />
+            <q-menu max-height="160px" :offset="[-18, 4]" :class="$style['settings-menu']">
+              <q-list v-for="item in settingsMenuItems" :key="item.name" :class="$style['settings-menu__list']">
+                <q-item
+                  v-show="item.isShow"
+                  v-close-popup
+                  :class="$style['settings-menu__item']"
+                  clickable
+                  @click="clickSettingsMenuItem(item)"
+                  >{{ item.label }}</q-item
+                >
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </div>
+
+        <!--        <app-button icon="person" text-color="black" :label="shortName" rounded :class="$style['button-person']" />-->
+      </div>
+    </q-toolbar>
+  </q-header>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineProps, ref, withDefaults } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+import AppIcon from '@/common/app-icon/AppIcon.vue'
+
+interface Props {
+  userData: any
+  fullWidth?: boolean
+  pageTitle?: string
+  settingsMenuItems?: { label: string; name: string; isShow: boolean }[]
+}
+
+const emits = defineEmits(['clickSettingsMenuItem', 'clickNotification', 'clickProfile'])
+
+const props = withDefaults(defineProps<Props>(), {
+  pageTitle: '',
+})
+
+const refMenuSettings = ref(null)
+const isSettingsOpened = ref(false)
+
+// const settingsMenuItems = ref([
+//   { label: 'Поиск инструментов', name: 'instrument-search', isShow: true },
+//   { label: 'Мониторинг оборудования', name: 'equipment-monitoring', isShow: true },
+//   { label: 'Root-режим выключен', name: 'root-off', isShow: true },
+//   { label: 'Root-режим включен', name: 'root-on', isShow: false },
+// ])
+
+const shortName = computed(() => {
+  if (!props.userData?.full_name) return ''
+
+  const [lastName, name, patronymic] = props.userData.full_name.split(' ')
+
+  const mainPart = `${lastName} ${name}`
+
+  if (!patronymic) return mainPart
+
+  return `${mainPart} ${patronymic[0]}.`
+})
+
+const positionName = computed(() => props.userData?.positions?.[0]?.display_name)
+
+const openSettingsMenu = () => {
+  return (isSettingsOpened.value = !isSettingsOpened.value)
+}
+
+const clickProfile = () => emits('clickProfile')
+const clickSettingsMenuItem = (item: any) => emits('clickSettingsMenuItem', item.name)
+const clickNotification = () => emits('clickNotification')
+
+onClickOutside(refMenuSettings, () => (isSettingsOpened.value = false))
+</script>
+
+<style lang="scss" module>
+.header {
+  height: 100px;
+  background: transparent;
+  margin: 0 auto;
+  max-width: 1300px;
+}
+.header-full {
+  max-width: 100%;
+  padding-right: 30px;
+  padding-left: 30px;
+}
+.toolbar {
+  padding: 0;
+  min-height: 100%;
+  h1 {
+    font-weight: 600;
+    font-size: 28px;
+    line-height: 100%;
+    font-family: Montserrat, sans-serif;
+  }
+}
+
+.header-search {
+  width: 412px;
+  font-size: 16px;
+}
+
+.action-buttons {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+  column-gap: 16px;
+  justify-content: end;
+}
+
+.button {
+  padding: 12px;
+  background: white;
+  transition:
+    all 0.3s ease,
+    color 0.3s ease;
+}
+
+.button-person {
+  padding: 10px 14px;
+  background: white;
+}
+
+.root-mode {
+  display: flex;
+  align-items: center;
+  background-color: red;
+  padding: 14px;
+  border-radius: 10px;
+  box-shadow:
+    0 1px 5px rgba(0, 0, 0, 0.2),
+    0 2px 2px rgba(0, 0, 0, 0.14),
+    0 3px 1px -2px rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  user-select: none;
+  h1 {
+    font-size: 16px;
+    font-weight: 600;
+    font-family: 'Nunito Sans', sans-serif;
+  }
+  &:active {
+    box-shadow:
+      0 2px 8px rgba(0, 0, 0, 0.3),
+      0 4px 4px rgba(0, 0, 0, 0.2),
+      0 6px 2px -5px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.person {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 20px 12px;
+  height: 44px;
+  border-radius: 10px;
+  cursor: pointer;
+  background-color: white;
+  box-shadow:
+    0 1px 5px rgba(0, 0, 0, 0.2),
+    0 2px 2px rgba(0, 0, 0, 0.14),
+    0 3px 1px -2px rgba(0, 0, 0, 0.12);
+  transition: all 0.3s ease;
+  &__info {
+    display: flex;
+    flex-direction: column;
+    user-select: none;
+    p {
+      line-height: 1.2;
+      margin: 0;
+      padding: 0;
+      font-family: 'Nunito Sans', sans-serif;
+      color: rgb(63, 140, 255);
+    }
+  }
+  &:hover {
+    background-color: #e1e0e0;
+    transform: scale(1.01);
+  }
+  &:active {
+    box-shadow:
+      0 2px 8px rgba(0, 0, 0, 0.3),
+      0 4px 4px rgba(0, 0, 0, 0.2),
+      0 6px 2px -5px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.notification {
+  cursor: pointer;
+  transition: transform 0.3s ease;
+  &:hover {
+    transform: scale(1.1);
+  }
+  :global(.q-focus-helper) {
+    display: none;
+  }
+}
+
+.settings {
+  cursor: pointer;
+  transition: transform 0.3s ease;
+  &__open {
+    transform: rotate(90deg);
+  }
+  :global(.q-focus-helper) {
+    display: none;
+  }
+}
+
+.settings-menu {
+  min-width: 210px;
+  border-radius: 8px;
+  &__list {
+    min-width: 210px;
+  }
+  &__item {
+    align-items: center;
+    font-family: 'Nunito Sans', sans-serif;
+    color: rgb(63, 140, 255);
+  }
+}
+
+.action-wrapper {
+  height: 32px;
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+  gap: 12px;
+}
+
+@media (max-width: 1440px) {
+  .header {
+    height: 100px;
+    background: transparent;
+    margin: 0 auto;
+  }
+  .header-search {
+    width: 343px;
+    font-size: 16px;
+  }
+  .action-buttons {
+    position: relative;
+    display: flex;
+    align-items: center;
+    column-gap: 8px;
+  }
+  .button {
+    padding: 10px;
+    background: white;
+    transition:
+      all 0.3s ease,
+      color 0.3s ease;
+  }
+  .button-person {
+    padding: 8px 10px;
+    background: white;
+  }
+}
+</style>

package/src/common/app-loader/Loader.stories.ts

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AppLoader from '@/common/app-loader/index.vue'
+
+const meta: Meta<typeof AppLoader> = {
+  title: 'Components/AppLoader',
+  component: AppLoader,
+  tags: ['autodocs'],
+  argTypes: {
+    loading: {
+      control: 'boolean',
+      description: 'Показывать ли спиннер',
+    },
+    backdrop: {
+      control: 'boolean',
+      description: 'Показывать затемнение фона при загрузке',
+      table: { disable: true },
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Размер спиннера',
+    },
+    thickness: {
+      control: 'number',
+      description: 'Толщина линии спиннера (в px)',
+    },
+  },
+  args: {
+    loading: true,
+    backdrop: false,
+    size: 'md',
+    thickness: 2,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof AppLoader>
+
+export const GlobalLoader: Story = {
+  render: args => ({
+    components: { AppLoader },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="position: relative; height: 300px;">
+        <app-loader v-bind="args" />
+
+        <h2>Контент страницы</h2>
+      </div>
+    `,
+  }),
+  args: {
+    loading: true,
+    backdrop: true,
+    size: 'lg',
+  },
+}
+
+export const Size: Story = {
+  render: () => ({
+    components: { AppLoader },
+    template: `
+      <div style="display: flex; flex-wrap: wrap; gap: 32px; padding: 24px; background: white;">
+        <div style="text-align: center; width: 100px; height: 100px; position: relative; border: 1px solid #eee; border-radius: 8px;">
+          <app-loader :loading="true" size="xs" />
+          <div style="margin-top: 8px; font-size: 12px; color: #666;">xs</div>
+        </div>
+        <div style="text-align: center; width: 100px; height: 100px; position: relative; border: 1px solid #eee; border-radius: 8px;">
+          <app-loader :loading="true" size="sm" />
+          <div style="margin-top: 8px; font-size: 12px; color: #666;">sm</div>
+        </div>
+        <div style="text-align: center; width: 100px; height: 100px; position: relative; border: 1px solid #eee; border-radius: 8px;">
+          <app-loader :loading="true" size="md" />
+          <div style="margin-top: 8px; font-size: 12px; color: #666;">md</div>
+        </div>
+        <div style="text-align: center; width: 100px; height: 100px; position: relative; border: 1px solid #eee; border-radius: 8px;">
+          <app-loader :loading="true" size="lg" />
+          <div style="margin-top: 8px; font-size: 12px; color: #666;">lg</div>
+        </div>
+        <div style="text-align: center; width: 100px; height: 100px; position: relative; border: 1px solid #eee; border-radius: 8px;">
+          <app-loader :loading="true" size="xl" />
+          <div style="margin-top: 8px; font-size: 12px; color: #666;">xl</div>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const Thickness: Story = {
+  render: () => ({
+    components: { AppLoader },
+    template: `
+      <div style="display: flex; flex-wrap: wrap; gap: 32px; padding: 24px; background: white;">
+        <div style="text-align: center; width: 120px; height: 120px; position: relative; border: 1px solid #eee; border-radius: 8px;">
+          <app-loader :loading="true" size="lg" :thickness="1" />
+          <div style="margin-top: 8px; font-size: 12px; color: #666;">thickness=1</div>
+        </div>
+        <div style="text-align: center; width: 120px; height: 120px; position: relative; border: 1px solid #eee; border-radius: 8px;">
+          <app-loader :loading="true" size="lg" :thickness="2" />
+          <div style="margin-top: 8px; font-size: 12px; color: #666;">thickness=2</div>
+        </div>
+        <div style="text-align: center; width: 120px; height: 120px; position: relative; border: 1px solid #eee; border-radius: 8px;">
+          <app-loader :loading="true" size="lg" :thickness="3" />
+          <div style="margin-top: 8px; font-size: 12px; color: #666;">thickness=3</div>
+        </div>
+        <div style="text-align: center; width: 120px; height: 120px; position: relative; border: 1px solid #eee; border-radius: 8px;">
+          <app-loader :loading="true" size="lg" :thickness="5" />
+          <div style="margin-top: 8px; font-size: 12px; color: #666;">thickness=5</div>
+        </div>
+      </div>
+    `,
+  }),
+}