shared-ritm 1.3.38 → 1.3.40

package/src/common/app-icon/AppIcon.vue

@@ -1,108 +1,108 @@
-<template>
-  <component :is="sideBarIcon" :tag="tag" :class="[$style['app-icon']]" />
-</template>
-
-<script setup lang="ts">
-import ProjectsIcon from '@/icons/sidebar/projects-icon.vue'
-import RepairsIcon from '@/icons/sidebar/repairs-icon.vue'
-import InstrumentHistoryIcon from '@/icons/sidebar/instrument-history-icon.vue'
-import RepairObjectIcon from '@/icons/sidebar/repair-object-icon.vue'
-import StatusHistoryIcon from '@/icons/sidebar/status-history-icon.vue'
-import SettingIcon from '@/icons/header/SettingIcon.vue'
-import PassIcon from '@/icons/sidebar/pass-icon.vue'
-import AssignModuleIcon from '@/icons/sidebar/assign-module-icon.vue'
-import UsersIcon from '@/icons/sidebar/users-icon.vue'
-import UserIcon from '@/icons/sidebar/user-icon.vue'
-import WorkzonesIcon from '@/icons/sidebar/workzones-icon.vue'
-import LogoutIcon from '@/icons/sidebar/logout-icon.vue'
-import LogoIcon from '@/icons/sidebar/logo-icon.vue'
-import TasksIcon from '@/icons/sidebar/tasks-icon.vue'
-import InstrumentsIcon from '@/icons/sidebar/instruments-icon.vue'
-import OrderIcon from '@/icons/sidebar/order-icon.vue'
-import ModulesIcon from '@/icons/sidebar/modules-icon.vue'
-import NotificationsIcon from '@/icons/sidebar/notifications-icon.vue'
-import VideozonesIcon from '@/icons/sidebar/videozones-icon.vue'
-import InstrumentWorkZoneIcon from '@/icons/sidebar/instrument-work-zone-icon.vue'
-import WorkshopIcon from '@/icons/sidebar/workshop-icon.vue'
-import WarehousesIcon from '@/icons/sidebar/warehouses-icon.vue'
-import TeamsIcon from '@/icons/sidebar/teams-icon.vue'
-import RolesIcon from '@/icons/sidebar/roles-icon.vue'
-import PositionsIcon from '@/icons/sidebar/positions-icon.vue'
-import PersonIcon from '@/icons/header/PersonIcon.vue'
-import InstrumentOrderIcon from '@/icons/sidebar/instrument-order-icon.vue'
-import PreorderIcon from '@/icons/sidebar/preorder-icon.vue'
-import VideowallIcon from '@/icons/sidebar/videowall-icon.vue'
-import VideosourcesIcon from '@/icons/sidebar/videosources-icon.vue'
-import Tasks_tasksIcon from '@/icons/sidebar/tasks_tasks-icon.vue'
-import Tasks_todayIcon from '@/icons/sidebar/tasks_today-icon.vue'
-import ArrowFrameIcon from '@/icons/components/arrow-frame-icon.vue'
-
-import { computed, defineProps } from 'vue'
-
-interface Props {
-  size?: string | undefined
-  tag?: string | undefined
-  name: string
-  color?: string | undefined
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  tag: '',
-  name: '',
-})
-
-function toPascalCase(str: string): string {
-  if (!str) return ''
-  return str
-    .split('-')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-    .join('')
-}
-const sideBarIcon = computed(
-  () =>
-    ({
-      ProjectsIcon,
-      RepairsIcon,
-      RepairObjectIcon,
-      InstrumentHistoryIcon,
-      StatusHistoryIcon,
-      SettingIcon,
-      PassIcon,
-      AssignModuleIcon,
-      UsersIcon,
-      UserIcon,
-      WorkzonesIcon,
-      LogoutIcon,
-      LogoIcon,
-      TasksIcon,
-      InstrumentsIcon,
-      OrderIcon,
-      ModulesIcon,
-      NotificationsIcon,
-      VideozonesIcon,
-      InstrumentWorkZoneIcon,
-      WorkshopIcon,
-      WarehousesIcon,
-      TeamsIcon,
-      RolesIcon,
-      PositionsIcon,
-      PersonIcon,
-      InstrumentOrderIcon,
-      PreorderIcon,
-      VideowallIcon,
-      VideosourcesIcon,
-      Tasks_tasksIcon,
-      Tasks_todayIcon,
-      ArrowFrameIcon,
-    }[toPascalCase(props.name)]),
-)
-</script>
-
-<style module lang="scss">
-.app-icon {
-  stroke: v-bind(color);
-  fill: none;
-  width: v-bind(size);
-  height: v-bind(size);
-}
-</style>
+<template>
+  <component :is="sideBarIcon" :tag="tag" :class="[$style['app-icon']]" />
+</template>
+
+<script setup lang="ts">
+import ProjectsIcon from '@/icons/sidebar/projects-icon.vue'
+import RepairsIcon from '@/icons/sidebar/repairs-icon.vue'
+import InstrumentHistoryIcon from '@/icons/sidebar/instrument-history-icon.vue'
+import RepairObjectIcon from '@/icons/sidebar/repair-object-icon.vue'
+import StatusHistoryIcon from '@/icons/sidebar/status-history-icon.vue'
+import SettingIcon from '@/icons/header/SettingIcon.vue'
+import PassIcon from '@/icons/sidebar/pass-icon.vue'
+import AssignModuleIcon from '@/icons/sidebar/assign-module-icon.vue'
+import UsersIcon from '@/icons/sidebar/users-icon.vue'
+import UserIcon from '@/icons/sidebar/user-icon.vue'
+import WorkzonesIcon from '@/icons/sidebar/workzones-icon.vue'
+import LogoutIcon from '@/icons/sidebar/logout-icon.vue'
+import LogoIcon from '@/icons/sidebar/logo-icon.vue'
+import TasksIcon from '@/icons/sidebar/tasks-icon.vue'
+import InstrumentsIcon from '@/icons/sidebar/instruments-icon.vue'
+import OrderIcon from '@/icons/sidebar/order-icon.vue'
+import ModulesIcon from '@/icons/sidebar/modules-icon.vue'
+import NotificationsIcon from '@/icons/sidebar/notifications-icon.vue'
+import VideozonesIcon from '@/icons/sidebar/videozones-icon.vue'
+import InstrumentWorkZoneIcon from '@/icons/sidebar/instrument-work-zone-icon.vue'
+import WorkshopIcon from '@/icons/sidebar/workshop-icon.vue'
+import WarehousesIcon from '@/icons/sidebar/warehouses-icon.vue'
+import TeamsIcon from '@/icons/sidebar/teams-icon.vue'
+import RolesIcon from '@/icons/sidebar/roles-icon.vue'
+import PositionsIcon from '@/icons/sidebar/positions-icon.vue'
+import PersonIcon from '@/icons/header/PersonIcon.vue'
+import InstrumentOrderIcon from '@/icons/sidebar/instrument-order-icon.vue'
+import PreorderIcon from '@/icons/sidebar/preorder-icon.vue'
+import VideowallIcon from '@/icons/sidebar/videowall-icon.vue'
+import VideosourcesIcon from '@/icons/sidebar/videosources-icon.vue'
+import Tasks_tasksIcon from '@/icons/sidebar/tasks_tasks-icon.vue'
+import Tasks_todayIcon from '@/icons/sidebar/tasks_today-icon.vue'
+import ArrowFrameIcon from '@/icons/components/arrow-frame-icon.vue'
+
+import { computed, defineProps } from 'vue'
+
+interface Props {
+  size?: string | undefined
+  tag?: string | undefined
+  name: string
+  color?: string | undefined
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: '',
+  name: '',
+})
+
+function toPascalCase(str: string): string {
+  if (!str) return ''
+  return str
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join('')
+}
+const sideBarIcon = computed(
+  () =>
+    ({
+      ProjectsIcon,
+      RepairsIcon,
+      RepairObjectIcon,
+      InstrumentHistoryIcon,
+      StatusHistoryIcon,
+      SettingIcon,
+      PassIcon,
+      AssignModuleIcon,
+      UsersIcon,
+      UserIcon,
+      WorkzonesIcon,
+      LogoutIcon,
+      LogoIcon,
+      TasksIcon,
+      InstrumentsIcon,
+      OrderIcon,
+      ModulesIcon,
+      NotificationsIcon,
+      VideozonesIcon,
+      InstrumentWorkZoneIcon,
+      WorkshopIcon,
+      WarehousesIcon,
+      TeamsIcon,
+      RolesIcon,
+      PositionsIcon,
+      PersonIcon,
+      InstrumentOrderIcon,
+      PreorderIcon,
+      VideowallIcon,
+      VideosourcesIcon,
+      Tasks_tasksIcon,
+      Tasks_todayIcon,
+      ArrowFrameIcon,
+    })[toPascalCase(props.name)],
+)
+</script>
+
+<style module lang="scss">
+.app-icon {
+  stroke: v-bind(color);
+  fill: none;
+  width: v-bind(size);
+  height: v-bind(size);
+}
+</style>

package/src/common/app-icon/Icon.stories.ts

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AppIcon from '@/common/app-icon/AppIcon.vue'
+import { quasarColorOpts } from '@/configs/storybook'
+
+const ICON_NAMES = [
+  'projects',
+  'repairs',
+  'instrument-history',
+  'repair-object',
+  'status-history',
+  'setting',
+  'pass',
+  'assign-module',
+  'users',
+  'user',
+  'workzones',
+  'logout',
+  'logo',
+  'tasks',
+  'instruments',
+  'order',
+  'modules',
+  'notifications',
+  'videozones',
+  'instrument-work-zone',
+  'workshop',
+  'warehouses',
+  'teams',
+  'roles',
+  'positions',
+  'person',
+  'instrument-order',
+  'preorder',
+  'videowall',
+  'videosources',
+  'tasks-tasks',
+  'tasks-today',
+  'arrow-frame',
+] as const
+
+const meta: Meta<typeof AppIcon> = {
+  title: 'Components/AppIcon',
+  component: AppIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    name: {
+      control: 'select',
+      options: ICON_NAMES,
+      description: 'Название иконки.',
+    },
+    size: {
+      control: 'text',
+      description: 'Размер иконки (CSS-значение: например, "24px", "1.5em", "100%").',
+    },
+    color: {
+      control: 'select',
+      options: quasarColorOpts,
+      description: 'Цвет иконки из палитры Quasar.',
+    },
+    tag: {
+      control: 'text',
+      description: 'HTML-тег, в который будет обёрнута иконка (например, "span", "div").',
+    },
+  },
+  args: {
+    name: 'user',
+    size: '24px',
+    color: 'primary',
+    tag: '',
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof AppIcon>
+
+export const Default: Story = { args: { name: 'person-icon' } }
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { AppIcon },
+    template: `
+        <div style="display: flex; gap: 24px; align-items: center; flex-wrap: wrap;">
+          <AppIcon name="person-icon" size="16px" color="primary" />
+          <AppIcon name="person-icon" size="24px" color="primary" />
+          <AppIcon name="person-icon" size="32px" color="primary" />
+          <AppIcon name="person-icon" size="48px" color="primary" />
+        </div>
+    `,
+  }),
+}

package/src/common/app-input/Input.stories.ts

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AppInput from '@/common/app-input/AppInput.vue'
+
+const meta: Meta<typeof AppInput> = {
+  title: 'Components/AppInput',
+  component: AppInput,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      table: { category: 'Используется' },
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Текст-подсказка внутри поля.',
+      table: { category: 'Используется' },
+    },
+    type: {
+      control: 'select',
+      options: ['text', 'password', 'number', 'email', 'search', 'tel', 'date', 'url'],
+      description: 'Тип HTML-инпута.',
+      table: { category: 'Используется' },
+    },
+
+    width: {
+      control: 'text',
+      description: 'Ширина поля (CSS-значение, например "300px", "100%").',
+      table: { disable: true },
+    },
+    height: {
+      control: 'text',
+      description: 'Высота поля (например, "48px").',
+      table: { category: 'Используется' },
+    },
+    borderRadius: {
+      control: 'text',
+      description: 'Скругление углов (например, "8px").',
+      table: { disable: true },
+    },
+    borderWidth: {
+      control: 'text',
+      description: 'Толщина границы (например, "1px").',
+      table: { disable: true },
+    },
+
+    disabled: {
+      control: 'boolean',
+      description: 'Отключает поле ввода.',
+      table: { category: 'Используется' },
+    },
+    readonly: {
+      control: 'boolean',
+      description: 'Делает поле доступным только для чтения.',
+      table: { category: 'Используется' },
+    },
+    field: {
+      control: 'boolean',
+      description: 'Делает поле доступным только для чтения.',
+      table: { category: 'Используется' },
+    },
+    required: {
+      control: 'boolean',
+      description: 'Добавляет визуальный признак обязательного поля (стиль --required).',
+      table: { disable: true },
+    },
+
+    withArrow: {
+      control: 'boolean',
+      description: 'Для type="number": показывать ли стрелки вверх/вниз.',
+      table: { disable: true },
+    },
+    mask: { control: 'text', table: { disable: true } },
+    debounce: { control: 'number', table: { disable: true } },
+    datePicker: { table: { disable: true } },
+    timePicker: { table: { disable: true } },
+    withIcon: { table: { disable: true } },
+    withButton: { table: { disable: true } },
+    rules: { description: 'Правила для валидации.', table: { category: 'Используется' } },
+    borderColor: { table: { disable: true } },
+    name: { table: { disable: true } },
+    label: { table: { disable: true } },
+    hint: { table: { disable: true } },
+  },
+  args: {
+    modelValue: '',
+    placeholder: 'Введите значение...',
+    type: 'text',
+    height: '48px',
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof AppInput>
+
+export const Default: Story = {}
+
+export const InputTypes: Story = {
+  render: () => ({
+    components: { AppInput },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <AppInput v-model="textValue" placeholder="Текст" type="text" />
+        <AppInput v-model="passwordValue" placeholder="Пароль" type="password" />
+        <AppInput v-model="emailValue" placeholder="Email" type="email" />
+        <AppInput v-model="telValue" placeholder="Телефон" type="tel" />
+        <AppInput v-model="numValue" placeholder="Число" type="number"/>
+      </div>
+    `,
+    data() {
+      return {
+        textValue: '',
+        passwordValue: '',
+        emailValue: '',
+        telValue: '',
+        numValue: 0,
+      }
+    },
+  }),
+}
+
+export const States: Story = {
+  render: () => ({
+    components: { AppInput },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <AppInput v-model="activeValue" placeholder="Активное" />
+        <AppInput v-model="disabledValue" :disabled="true" />
+        <AppInput v-model="readonlyValue" :readonly="true" />
+      </div>
+    `,
+    data() {
+      return {
+        activeValue: '',
+        disabledValue: 'недоступно',
+        readonlyValue: 'только чтение',
+      }
+    },
+  }),
+}
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { AppInput },
+    template: `
+      <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: end;">
+        <AppInput v-model="val1" placeholder="40px" height="40px" width="180px" />
+        <AppInput v-model="val2" placeholder="48px" height="48px" width="200px" />
+        <AppInput v-model="val3" placeholder="60px" height="60px" width="220px" border-radius="12px" />
+      </div>
+    `,
+    data() {
+      return {
+        val1: '',
+        val2: '',
+        val3: '',
+      }
+    },
+  }),
+}