shared-ritm 1.3.129 → 1.3.131

package/src/common/app-button/Button.stories.ts

@@ -1,369 +1,369 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import AppButton from '@/common/app-button/AppButton.vue'
-import { quasarColorOpts } from '@/configs/storybook'
-
-const meta: Meta<typeof AppButton> = {
-  title: 'Components/AppButton',
-  component: AppButton,
-  tags: ['autodocs'],
-  argTypes: {
-    color: {
-      control: 'select',
-      options: quasarColorOpts,
-      description: 'Фоновый цвет кнопки. Используйте имена из палитры Quasar.',
-      table: { category: '🎨 Цвета' },
-    },
-    textColor: {
-      control: 'select',
-      options: quasarColorOpts,
-      description: 'Цвет текста, обводки и иконок внутри кнопки.',
-      table: { category: '🎨 Цвета' },
-    },
-    badgeColor: {
-      control: 'select',
-      options: quasarColorOpts,
-      description: 'Цвет бейджа (метки) поверх кнопки.',
-      table: { category: '🎨 Цвета' },
-    },
-
-    size: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Стандартный размер кнопки от Quasar.',
-      table: { category: '📏 Размеры' },
-    },
-    width: {
-      control: 'text',
-      description: 'Ширина кнопки (CSS-значение: например, "200px", "100%", "auto").',
-      table: { category: '📏 Размеры' },
-    },
-    height: {
-      control: 'text',
-      description: 'Высота кнопки (CSS-значение: например, "40px", "auto").',
-      table: { category: '📏 Размеры' },
-    },
-    padding: {
-      control: 'text',
-      description: 'Внутренние отступы кнопки (например, "8px 16px").',
-      table: { category: '📏 Размеры' },
-    },
-    dense: {
-      control: 'boolean',
-      description: 'Уменьшает внутренние отступы (стандартный проп Quasar).',
-      table: { category: '📏 Размеры' },
-    },
-    stretch: {
-      control: 'boolean',
-      description: 'Растягивает содержимое по высоте кнопки.',
-      table: { category: '📏 Размеры' },
-    },
-
-    disable: {
-      control: 'boolean',
-      description: 'Отключает кнопку. Может быть функцией, возвращающей boolean.',
-      table: { category: '⚡ Состояния' },
-    },
-    loading: {
-      control: 'boolean',
-      description: 'Показывает индикатор загрузки и блокирует взаимодействие.',
-      table: { category: '⚡ Состояния' },
-    },
-    percentage: {
-      control: 'number',
-      description: 'Значение прогресса (для кнопок с индикатором загрузки).',
-      table: { category: '⚡ Состояния' },
-    },
-    darkPercentage: {
-      control: 'boolean',
-      description: 'Использует тёмный цвет для индикатора прогресса.',
-      table: { category: '⚡ Состояния' },
-    },
-
-    label: {
-      control: 'text',
-      description: 'Текст кнопки.',
-      table: { category: '🔤 Текст' },
-    },
-    uppercase: {
-      control: 'boolean',
-      description: 'Преобразует текст в верхний регистр.',
-      table: { category: '🔤 Текст' },
-    },
-    wrap: {
-      control: 'boolean',
-      description: 'Разрешает перенос текста на новую строку при нехватке места.',
-      table: { category: '🔤 Текст' },
-    },
-    tooltip: {
-      control: 'text',
-      description: 'Текст всплывающей подсказки при наведении.',
-      table: { category: '🔤 Текст' },
-    },
-    badge: {
-      control: 'text',
-      description: 'Текст или число в бейдже. Пустая строка или true — показывает бейдж без текста.',
-      table: { category: '🔤 Текст' },
-    },
-    badgeInline: {
-      control: 'boolean',
-      description: 'Если true — бейдж отображается внутри кнопки.',
-      table: { category: '🔤 Текст' },
-    },
-
-    icon: {
-      control: 'text',
-      description: 'Имя иконки слева от текста.',
-      table: { category: '🖼️ Иконки' },
-    },
-    iconRight: {
-      control: 'text',
-      description: 'Имя иконки справа от текста.',
-      table: { category: '🖼️ Иконки' },
-    },
-
-    to: {
-      control: 'text',
-      description: 'Путь для vue-router (делает кнопку ссылкой).',
-      table: { category: '🔗 Навигация' },
-    },
-    href: {
-      control: 'text',
-      description: 'URL для внешней ссылки (рендерит `<a>`).',
-      table: { category: '🔗 Навигация' },
-    },
-    target: {
-      control: 'text',
-      description: 'Атрибут target для ссылки.',
-      table: { category: '🔗 Навигация' },
-    },
-    replace: {
-      control: 'boolean',
-      description: 'Если true — заменяет текущую запись в истории роутера (при использовании `to`).',
-      table: { category: '🔗 Навигация' },
-    },
-
-    rounded: {
-      control: 'boolean',
-      description: 'Скруглённые углы.',
-      table: { category: '🔘 Скругления' },
-    },
-    borderRadius: {
-      control: 'text',
-      description: 'Скругление при включённом rounded.',
-      table: { category: '🔘 Скругления' },
-    },
-    round: {
-      control: 'boolean',
-      description: 'Делает кнопку полностью круглой.',
-      table: { category: '🔘 Скругления' },
-    },
-    square: {
-      control: 'boolean',
-      description: 'Прямые углы (без скругления).',
-      table: { category: '🔘 Скругления' },
-    },
-
-    outline: {
-      control: 'boolean',
-      description: 'Кнопка с рамкой и прозрачным фоном.',
-    },
-    flat: {
-      control: 'boolean',
-      description: 'Плоская кнопка без тени и фона.',
-    },
-    unelevated: {
-      control: 'boolean',
-      description: 'Кнопка без тени.',
-    },
-    push: {
-      control: 'boolean',
-      description: 'Эффект "нажатия" при клике (вдавленная тень).',
-    },
-    glossy: {
-      control: 'boolean',
-      description: 'Добавляет глянцевый эффект.',
-    },
-    fab: {
-      control: 'boolean',
-      description: 'Floating Action Button — круглая кнопка с иконкой.',
-    },
-    fabMini: {
-      control: 'boolean',
-      description: 'Мини-версия FAB.',
-    },
-
-    align: {
-      control: 'select',
-      options: ['left', 'right', 'center', 'around', 'between', 'evenly'],
-      description:
-        'Выравнивание содержимого (иконка + текст) внутри кнопки. Работает при фиксированной/растянутой ширине.',
-    },
-    ripple: {
-      control: 'boolean',
-      description: 'Эффект волны при клике.',
-    },
-    tabindex: {
-      control: 'number',
-      description: 'Порядок фокуса при навигации с клавиатуры.',
-    },
-    stack: {
-      control: 'boolean',
-      description: 'Располагает контент в несколько строк.',
-    },
-    borderWidth: {
-      control: 'text',
-      description: 'Толщина обводки (для outline).',
-    },
-    noCaps: {
-      table: { disable: true },
-    },
-    noWrap: {
-      table: { disable: true },
-    },
-    small: {
-      table: { disable: true },
-    },
-    xSmall: {
-      table: { disable: true },
-    },
-    large: {
-      table: { disable: true },
-    },
-    fullWidth: {
-      table: { disable: true },
-    },
-    borderColor: {
-      table: { disable: true },
-    },
-    largeIcon: {
-      table: { disable: true },
-    },
-    link: {
-      table: { disable: true },
-    },
-  },
-  args: {
-    label: 'Button',
-    color: 'primary',
-    textColor: 'white',
-  },
-}
-
-export default meta
-
-type Story = StoryObj<typeof AppButton>
-
-export const Primary: Story = { args: { label: 'Кнопка' } }
-
-export const Size: Story = {
-  render: () => ({
-    components: { AppButton },
-    template: `
-        <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
-          <AppButton size="xs" label="XS" color="primary" text-color="white" />
-          <AppButton size="sm" label="SM" color="primary" text-color="white" />
-          <AppButton size="md" label="MD" color="primary" text-color="white" />
-          <AppButton size="lg" label="LG" color="primary" text-color="white" />
-          <AppButton size="xl" label="XL" color="primary" text-color="white" />
-          <AppButton width="200px" label="width 200px" color="primary" text-color="white" />
-          <AppButton height="100px" label="height 100px" color="primary" text-color="white" />
-        </div>
-    `,
-  }),
-}
-
-export const Icon: Story = {
-  render: () => ({
-    components: { AppButton },
-    template: `
-        <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
-          <AppButton icon="mail" label="mail" color="primary" text-color="white" />
-          <AppButton icon="arrow_back" label="icon + iconRight" icon-right="arrow_forward" color="primary" text-color="white" />
-          <AppButton icon-right="arrow_forward" label="iconRight" color="primary" text-color="white" />
-          <AppButton icon="settings" color="primary" text-color="white" />
-        </div>
-    `,
-  }),
-}
-
-export const Badge: Story = {
-  render: () => ({
-    components: { AppButton },
-    template: `
-        <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
-          <AppButton :badge="true" label="true" color="primary" text-color="white" />
-          <AppButton badge="badge" badge-color="red" label="badge" color="primary" text-color="white" />
-          <AppButton badge="3" badge-color="red" badge-inline label="inline" color="primary" text-color="white" />
-        </div>
-    `,
-  }),
-}
-
-export const Align: Story = {
-  render: () => ({
-    components: { AppButton },
-    template: `
-        <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
-          <AppButton icon="arrow_back" width="200px" align="center" label="center" color="primary" text-color="white" />
-          <AppButton width="200px" align="center" label="center" color="primary" text-color="white" />
-          <AppButton icon="arrow_back" width="200px" align="left" label="left" color="primary" text-color="white" />
-          <AppButton width="200px" align="left" label="left" color="primary" text-color="white" />
-          <AppButton icon="arrow_back" width="200px" align="right" label="right" color="primary" text-color="white" />
-          <AppButton width="200px" align="right" label="right" color="primary" text-color="white" />
-          <AppButton icon="arrow_back" width="200px" align="around" label="around" color="primary" text-color="white" />
-          <AppButton width="200px" align="around" label="around" color="primary" text-color="white" />
-          <AppButton icon="arrow_back" width="200px" align="evenly" label="evenly" color="primary" text-color="white" />
-          <AppButton width="200px" align="evenly" label="evenly" color="primary" text-color="white" />
-        </div>
-    `,
-  }),
-}
-
-export const Spacing: Story = {
-  render: () => ({
-    components: { AppButton },
-    template: `
-        <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
-          <AppButton icon="mail" fab label="fab" color="primary" text-color="white" />
-          <AppButton icon="mail" fab-mini label="fab-mini" color="primary" text-color="white" />
-          <AppButton dense label="dense" color="primary" text-color="white" />
-          <AppButton padding="20px" label="padding 20px" color="primary" text-color="white" />
-        </div>
-    `,
-  }),
-}
-
-export const Rounding: Story = {
-  render: () => ({
-    components: { AppButton },
-    template: `
-        <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
-          <AppButton square label="square" color="primary" text-color="white" />
-          <AppButton rounded label="rounded" color="primary" text-color="white" />
-          <AppButton rounded border-radius="20px" label="rounded 20px" color="primary" text-color="white" />
-          <AppButton round label="round" color="primary" text-color="white" />
-        </div>
-    `,
-  }),
-}
-
-export const Other: Story = {
-  render: () => ({
-    components: { AppButton },
-    template: `
-        <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
-          <AppButton outline label="outline" text-color="primary" />
-          <AppButton outline borderWidth="5px" label="borderWidth 5px" text-color="primary"  />
-          <AppButton flat label="flat" text-color="primary"  />
-          <AppButton unelevated label="unelevated" color="primary" text-color="white" />
-          <AppButton push label="push" color="primary" text-color="white" />
-          <AppButton glossy label="glossy" color="primary" text-color="white" />
-          <AppButton loading label="Загрузка..." color="primary" text-color="white" />
-          <AppButton tooltip="Подсказка" label="tooltip" color="primary" text-color="white" />
-          <AppButton disable label="disable" color="primary" text-color="white" />
-          <AppButton width="100px" wrap  label="wrap + width 100px" color="primary" text-color="white" />
-          <AppButton stack icon="mail" icon-right="settings" badge="123" badge-color="red" badge-inline  label="stack" color="primary" text-color="white" />
-        </div>
-    `,
-  }),
-}
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AppButton from '@/common/app-button/AppButton.vue'
+import { quasarColorOpts } from '@/configs/storybook'
+
+const meta: Meta<typeof AppButton> = {
+  title: 'Components/AppButton',
+  component: AppButton,
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: quasarColorOpts,
+      description: 'Фоновый цвет кнопки. Используйте имена из палитры Quasar.',
+      table: { category: '🎨 Цвета' },
+    },
+    textColor: {
+      control: 'select',
+      options: quasarColorOpts,
+      description: 'Цвет текста, обводки и иконок внутри кнопки.',
+      table: { category: '🎨 Цвета' },
+    },
+    badgeColor: {
+      control: 'select',
+      options: quasarColorOpts,
+      description: 'Цвет бейджа (метки) поверх кнопки.',
+      table: { category: '🎨 Цвета' },
+    },
+
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Стандартный размер кнопки от Quasar.',
+      table: { category: '📏 Размеры' },
+    },
+    width: {
+      control: 'text',
+      description: 'Ширина кнопки (CSS-значение: например, "200px", "100%", "auto").',
+      table: { category: '📏 Размеры' },
+    },
+    height: {
+      control: 'text',
+      description: 'Высота кнопки (CSS-значение: например, "40px", "auto").',
+      table: { category: '📏 Размеры' },
+    },
+    padding: {
+      control: 'text',
+      description: 'Внутренние отступы кнопки (например, "8px 16px").',
+      table: { category: '📏 Размеры' },
+    },
+    dense: {
+      control: 'boolean',
+      description: 'Уменьшает внутренние отступы (стандартный проп Quasar).',
+      table: { category: '📏 Размеры' },
+    },
+    stretch: {
+      control: 'boolean',
+      description: 'Растягивает содержимое по высоте кнопки.',
+      table: { category: '📏 Размеры' },
+    },
+
+    disable: {
+      control: 'boolean',
+      description: 'Отключает кнопку. Может быть функцией, возвращающей boolean.',
+      table: { category: '⚡ Состояния' },
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Показывает индикатор загрузки и блокирует взаимодействие.',
+      table: { category: '⚡ Состояния' },
+    },
+    percentage: {
+      control: 'number',
+      description: 'Значение прогресса (для кнопок с индикатором загрузки).',
+      table: { category: '⚡ Состояния' },
+    },
+    darkPercentage: {
+      control: 'boolean',
+      description: 'Использует тёмный цвет для индикатора прогресса.',
+      table: { category: '⚡ Состояния' },
+    },
+
+    label: {
+      control: 'text',
+      description: 'Текст кнопки.',
+      table: { category: '🔤 Текст' },
+    },
+    uppercase: {
+      control: 'boolean',
+      description: 'Преобразует текст в верхний регистр.',
+      table: { category: '🔤 Текст' },
+    },
+    wrap: {
+      control: 'boolean',
+      description: 'Разрешает перенос текста на новую строку при нехватке места.',
+      table: { category: '🔤 Текст' },
+    },
+    tooltip: {
+      control: 'text',
+      description: 'Текст всплывающей подсказки при наведении.',
+      table: { category: '🔤 Текст' },
+    },
+    badge: {
+      control: 'text',
+      description: 'Текст или число в бейдже. Пустая строка или true — показывает бейдж без текста.',
+      table: { category: '🔤 Текст' },
+    },
+    badgeInline: {
+      control: 'boolean',
+      description: 'Если true — бейдж отображается внутри кнопки.',
+      table: { category: '🔤 Текст' },
+    },
+
+    icon: {
+      control: 'text',
+      description: 'Имя иконки слева от текста.',
+      table: { category: '🖼️ Иконки' },
+    },
+    iconRight: {
+      control: 'text',
+      description: 'Имя иконки справа от текста.',
+      table: { category: '🖼️ Иконки' },
+    },
+
+    to: {
+      control: 'text',
+      description: 'Путь для vue-router (делает кнопку ссылкой).',
+      table: { category: '🔗 Навигация' },
+    },
+    href: {
+      control: 'text',
+      description: 'URL для внешней ссылки (рендерит `<a>`).',
+      table: { category: '🔗 Навигация' },
+    },
+    target: {
+      control: 'text',
+      description: 'Атрибут target для ссылки.',
+      table: { category: '🔗 Навигация' },
+    },
+    replace: {
+      control: 'boolean',
+      description: 'Если true — заменяет текущую запись в истории роутера (при использовании `to`).',
+      table: { category: '🔗 Навигация' },
+    },
+
+    rounded: {
+      control: 'boolean',
+      description: 'Скруглённые углы.',
+      table: { category: '🔘 Скругления' },
+    },
+    borderRadius: {
+      control: 'text',
+      description: 'Скругление при включённом rounded.',
+      table: { category: '🔘 Скругления' },
+    },
+    round: {
+      control: 'boolean',
+      description: 'Делает кнопку полностью круглой.',
+      table: { category: '🔘 Скругления' },
+    },
+    square: {
+      control: 'boolean',
+      description: 'Прямые углы (без скругления).',
+      table: { category: '🔘 Скругления' },
+    },
+
+    outline: {
+      control: 'boolean',
+      description: 'Кнопка с рамкой и прозрачным фоном.',
+    },
+    flat: {
+      control: 'boolean',
+      description: 'Плоская кнопка без тени и фона.',
+    },
+    unelevated: {
+      control: 'boolean',
+      description: 'Кнопка без тени.',
+    },
+    push: {
+      control: 'boolean',
+      description: 'Эффект "нажатия" при клике (вдавленная тень).',
+    },
+    glossy: {
+      control: 'boolean',
+      description: 'Добавляет глянцевый эффект.',
+    },
+    fab: {
+      control: 'boolean',
+      description: 'Floating Action Button — круглая кнопка с иконкой.',
+    },
+    fabMini: {
+      control: 'boolean',
+      description: 'Мини-версия FAB.',
+    },
+
+    align: {
+      control: 'select',
+      options: ['left', 'right', 'center', 'around', 'between', 'evenly'],
+      description:
+        'Выравнивание содержимого (иконка + текст) внутри кнопки. Работает при фиксированной/растянутой ширине.',
+    },
+    ripple: {
+      control: 'boolean',
+      description: 'Эффект волны при клике.',
+    },
+    tabindex: {
+      control: 'number',
+      description: 'Порядок фокуса при навигации с клавиатуры.',
+    },
+    stack: {
+      control: 'boolean',
+      description: 'Располагает контент в несколько строк.',
+    },
+    borderWidth: {
+      control: 'text',
+      description: 'Толщина обводки (для outline).',
+    },
+    noCaps: {
+      table: { disable: true },
+    },
+    noWrap: {
+      table: { disable: true },
+    },
+    small: {
+      table: { disable: true },
+    },
+    xSmall: {
+      table: { disable: true },
+    },
+    large: {
+      table: { disable: true },
+    },
+    fullWidth: {
+      table: { disable: true },
+    },
+    borderColor: {
+      table: { disable: true },
+    },
+    largeIcon: {
+      table: { disable: true },
+    },
+    link: {
+      table: { disable: true },
+    },
+  },
+  args: {
+    label: 'Button',
+    color: 'primary',
+    textColor: 'white',
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof AppButton>
+
+export const Primary: Story = { args: { label: 'Кнопка' } }
+
+export const Size: Story = {
+  render: () => ({
+    components: { AppButton },
+    template: `
+        <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
+          <AppButton size="xs" label="XS" color="primary" text-color="white" />
+          <AppButton size="sm" label="SM" color="primary" text-color="white" />
+          <AppButton size="md" label="MD" color="primary" text-color="white" />
+          <AppButton size="lg" label="LG" color="primary" text-color="white" />
+          <AppButton size="xl" label="XL" color="primary" text-color="white" />
+          <AppButton width="200px" label="width 200px" color="primary" text-color="white" />
+          <AppButton height="100px" label="height 100px" color="primary" text-color="white" />
+        </div>
+    `,
+  }),
+}
+
+export const Icon: Story = {
+  render: () => ({
+    components: { AppButton },
+    template: `
+        <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
+          <AppButton icon="mail" label="mail" color="primary" text-color="white" />
+          <AppButton icon="arrow_back" label="icon + iconRight" icon-right="arrow_forward" color="primary" text-color="white" />
+          <AppButton icon-right="arrow_forward" label="iconRight" color="primary" text-color="white" />
+          <AppButton icon="settings" color="primary" text-color="white" />
+        </div>
+    `,
+  }),
+}
+
+export const Badge: Story = {
+  render: () => ({
+    components: { AppButton },
+    template: `
+        <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
+          <AppButton :badge="true" label="true" color="primary" text-color="white" />
+          <AppButton badge="badge" badge-color="red" label="badge" color="primary" text-color="white" />
+          <AppButton badge="3" badge-color="red" badge-inline label="inline" color="primary" text-color="white" />
+        </div>
+    `,
+  }),
+}
+
+export const Align: Story = {
+  render: () => ({
+    components: { AppButton },
+    template: `
+        <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
+          <AppButton icon="arrow_back" width="200px" align="center" label="center" color="primary" text-color="white" />
+          <AppButton width="200px" align="center" label="center" color="primary" text-color="white" />
+          <AppButton icon="arrow_back" width="200px" align="left" label="left" color="primary" text-color="white" />
+          <AppButton width="200px" align="left" label="left" color="primary" text-color="white" />
+          <AppButton icon="arrow_back" width="200px" align="right" label="right" color="primary" text-color="white" />
+          <AppButton width="200px" align="right" label="right" color="primary" text-color="white" />
+          <AppButton icon="arrow_back" width="200px" align="around" label="around" color="primary" text-color="white" />
+          <AppButton width="200px" align="around" label="around" color="primary" text-color="white" />
+          <AppButton icon="arrow_back" width="200px" align="evenly" label="evenly" color="primary" text-color="white" />
+          <AppButton width="200px" align="evenly" label="evenly" color="primary" text-color="white" />
+        </div>
+    `,
+  }),
+}
+
+export const Spacing: Story = {
+  render: () => ({
+    components: { AppButton },
+    template: `
+        <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
+          <AppButton icon="mail" fab label="fab" color="primary" text-color="white" />
+          <AppButton icon="mail" fab-mini label="fab-mini" color="primary" text-color="white" />
+          <AppButton dense label="dense" color="primary" text-color="white" />
+          <AppButton padding="20px" label="padding 20px" color="primary" text-color="white" />
+        </div>
+    `,
+  }),
+}
+
+export const Rounding: Story = {
+  render: () => ({
+    components: { AppButton },
+    template: `
+        <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
+          <AppButton square label="square" color="primary" text-color="white" />
+          <AppButton rounded label="rounded" color="primary" text-color="white" />
+          <AppButton rounded border-radius="20px" label="rounded 20px" color="primary" text-color="white" />
+          <AppButton round label="round" color="primary" text-color="white" />
+        </div>
+    `,
+  }),
+}
+
+export const Other: Story = {
+  render: () => ({
+    components: { AppButton },
+    template: `
+        <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
+          <AppButton outline label="outline" text-color="primary" />
+          <AppButton outline borderWidth="5px" label="borderWidth 5px" text-color="primary"  />
+          <AppButton flat label="flat" text-color="primary"  />
+          <AppButton unelevated label="unelevated" color="primary" text-color="white" />
+          <AppButton push label="push" color="primary" text-color="white" />
+          <AppButton glossy label="glossy" color="primary" text-color="white" />
+          <AppButton loading label="Загрузка..." color="primary" text-color="white" />
+          <AppButton tooltip="Подсказка" label="tooltip" color="primary" text-color="white" />
+          <AppButton disable label="disable" color="primary" text-color="white" />
+          <AppButton width="100px" wrap  label="wrap + width 100px" color="primary" text-color="white" />
+          <AppButton stack icon="mail" icon-right="settings" badge="123" badge-color="red" badge-inline  label="stack" color="primary" text-color="white" />
+        </div>
+    `,
+  }),
+}