shared-ritm 1.3.71 → 1.3.72

package/src/common/app-toggle/Toggle.stories.ts

@@ -1,245 +1,245 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import AppToggle from '@/common/app-toggle/AppToggle.vue'
-import { quasarColorOpts } from '@/configs/storybook'
-
-const meta: Meta<typeof AppToggle> = {
-  title: 'Components/AppToggle',
-  component: AppToggle,
-  tags: ['autodocs'],
-  argTypes: {
-    modelValue: {
-      control: 'text',
-      description: 'any | Array - required!',
-      table: { category: 'model' },
-    },
-    val: {
-      control: 'text',
-      description: 'any | Используется, если model - массив',
-      table: { category: 'model' },
-    },
-    trueValue: {
-      control: 'text',
-      description: 'any | Какое значение модели следует считать вкл',
-      table: { category: 'model' },
-    },
-    falseValue: {
-      control: 'text',
-      description: 'any | Какое значение модели следует считать выкл',
-      table: { category: 'model' },
-    },
-    indeterminateValue: {
-      control: 'text',
-      description: 'any | Какое значение модели следует считать неопределённым',
-      table: { category: 'model' },
-    },
-    disable: {
-      control: 'boolean',
-    },
-    name: {
-      control: 'text',
-    },
-    tabindex: {
-      control: 'text',
-      description: 'number | string',
-    },
-    label: {
-      control: 'text',
-    },
-    leftLabel: {
-      control: 'boolean',
-      description: 'Расположить текст слева от переключателя',
-    },
-    size: {
-      control: 'text',
-      description: 'CSS или quasar(xs|sm|md|lg|xl)',
-    },
-    dark: {
-      control: 'boolean',
-      description: 'Используется для темного фона, чтобы фон переключателя был светлее',
-    },
-    dense: {
-      control: 'boolean',
-    },
-    color: {
-      control: 'select',
-      options: quasarColorOpts,
-    },
-    toggleOrder: {
-      control: 'text',
-      description:
-        '"tf" | "ft". Порядок переключения состояний. t - true, f - false. Если toggle-indeterminate истинно, то порядок следующий: indet -> первое состояние -> второе состояние -> indet (и повторять), в противном случае: indet -> первое состояние -> второе состояние -> первое состояние -> второе состояние -> ...',
-    },
-    toggleIndeterminate: {
-      control: 'boolean',
-      description:
-        'При взаимодействии пользователя с компонентом исполюзуется не только вкл/выкл, а ещё и неопределенное состояние',
-    },
-    keepColor: {
-      control: 'boolean',
-      description: 'Следует ли сохранять значение color, если выкл',
-    },
-    icon: {
-      control: 'text',
-      description: 'Если передано "none", иконка не используется',
-      table: { category: 'icon' },
-    },
-    checkedIcon: {
-      control: 'text',
-      description: 'Иконка для вкл',
-      table: { category: 'icon' },
-    },
-    uncheckedIcon: {
-      control: 'text',
-      description: 'Иконка для выкл',
-      table: { category: 'icon' },
-    },
-    indeterminateIcon: {
-      control: 'text',
-      description: 'Иконка для неопределенного состояния',
-      table: { category: 'icon' },
-    },
-    iconColor: {
-      control: 'select',
-      options: quasarColorOpts,
-      description: 'Цвет иконки из палитры quasar(только для вкл)',
-      table: { category: 'icon' },
-    },
-  },
-  args: {
-    label: 'Toggle',
-    modelValue: 'on',
-    falseValue: 'off',
-    trueValue: 'on',
-    indeterminateValue: '',
-    disable: false,
-    name: 'toggler',
-    tabindex: '1',
-    leftLabel: false,
-    keepColor: false,
-    color: 'primary',
-    icon: 'none',
-    size: 'md',
-    dark: false,
-    dense: false,
-    toggleIndeterminate: false,
-    toggleOrder: 'ft',
-    val: '',
-    checkedIcon: 'none',
-    uncheckedIcon: 'none',
-    indeterminateIcon: 'none',
-  },
-}
-
-export default meta
-
-type Story = StoryObj<typeof AppToggle>
-
-export const Default: Story = {}
-
-export const States: Story = {
-  render: () => ({
-    components: { AppToggle },
-    template: `
-      <AppToggle label="Включён" :model-value="true" />
-      <AppToggle  label="Выключен left label" :model-value="false" left-label />
-      <AppToggle label="indeterminate" :model-value="null" indeterminate-value/>
-      <AppToggle  label="Включён + отключён" :model-value="true" disable />
-      <AppToggle  label="Выключен + отключён" :model-value="false" disable />
-    `,
-  }),
-}
-
-export const Sizes: Story = {
-  render: () => ({
-    components: { AppToggle },
-    template: `
-          <AppToggle size="xs" v-model="toggleState" val="xs" label="Size 'xs'" />
-          <AppToggle size="sm" v-model="toggleState" val="sm" label="Size 'sm'" />
-          <AppToggle size="md" v-model="toggleState" val="md" label="Size 'md'" />
-          <AppToggle size="lg" v-model="toggleState" val="lg" label="Size 'lg'" />
-          <AppToggle size="xl" v-model="toggleState" val="xl" label="Size 'xl'" />
-          <AppToggle size="150px" v-model="toggleState" val="150px" label="Size '150px'" />
-    `,
-    data() {
-      return {
-        toggleState: true,
-      }
-    },
-  }),
-}
-
-export const Colors: Story = {
-  render: () => ({
-    components: { AppToggle },
-    template: `
-      <AppToggle v-model="toggleState" label="red" color="red"/>
-      <AppToggle v-model="toggleState" label="red keep color" color="red" keep-color />
-      <AppToggle v-model="toggleState" label="yellow" color="yellow" />
-      <AppToggle v-model="toggleState" label="yellow keep color" color="yellow" keep-color />
-      <AppToggle v-model="toggleState" label="green" color="green" />
-      <AppToggle v-model="toggleState" label="green keep color" color="green" keep-color />
-    `,
-    data() {
-      return {
-        toggleState: true,
-      }
-    },
-  }),
-}
-
-export const DarkBg: Story = {
-  render: () => ({
-    components: { AppToggle },
-    template: `
-      <div class="bg-secondary rounded-borders">
-        <AppToggle v-model="toggleState" label="red" dark class="text-white" color="red" />
-        <AppToggle v-model="toggleState" label="red keep color" dark keep-color class="text-white" color="red" />
-        <AppToggle v-model="toggleState" label="yellow" dark class="text-white" color="yellow" />
-        <AppToggle v-model="toggleState" label="yellow keep color" dark keep-color class="text-white" color="yellow" />
-        <AppToggle v-model="toggleState" label="green" dark class="text-white" color="green" />
-        <AppToggle v-model="toggleState" label="green keep color" dark keep-color class="text-white" color="green" />
-      </div>
-    `,
-    data() {
-      return {
-        toggleState: true,
-      }
-    },
-  }),
-}
-
-export const Icons: Story = {
-  render: () => ({
-    components: { AppToggle },
-    template: `
-        <AppToggle v-model="toggleState" color="pink" icon="mail" label="Same Icon for each state" />
-        <AppToggle v-model="toggleState" color="orange" icon="alarm" label="Same Icon for each state" keep-color/>
-        <AppToggle v-model="toggleState" label="Different icon for each state" color="green" checked-icon="check" unchecked-icon="clear"/>
-    `,
-    data() {
-      return {
-        toggleState: true,
-      }
-    },
-  }),
-}
-
-export const ArrayModel: Story = {
-  render: () => ({
-    components: { AppToggle },
-    template: `
-        <AppToggle color="blue" label="Blue" v-model="selection" val="blue" />
-        <AppToggle color="yellow" label="Yellow" v-model="selection" val="yellow" />
-        <AppToggle color="green" label="Green" v-model="selection" val="green" />
-        <AppToggle color="red" label="Red" v-model="selection" val="red" />
-        <div>
-          Model: {{selection}}
-        </div>
-    `,
-    data() {
-      return {
-        selection: ['yellow', 'red'],
-      }
-    },
-  }),
-}
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AppToggle from '@/common/app-toggle/AppToggle.vue'
+import { quasarColorOpts } from '@/configs/storybook'
+
+const meta: Meta<typeof AppToggle> = {
+  title: 'Components/AppToggle',
+  component: AppToggle,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      description: 'any | Array - required!',
+      table: { category: 'model' },
+    },
+    val: {
+      control: 'text',
+      description: 'any | Используется, если model - массив',
+      table: { category: 'model' },
+    },
+    trueValue: {
+      control: 'text',
+      description: 'any | Какое значение модели следует считать вкл',
+      table: { category: 'model' },
+    },
+    falseValue: {
+      control: 'text',
+      description: 'any | Какое значение модели следует считать выкл',
+      table: { category: 'model' },
+    },
+    indeterminateValue: {
+      control: 'text',
+      description: 'any | Какое значение модели следует считать неопределённым',
+      table: { category: 'model' },
+    },
+    disable: {
+      control: 'boolean',
+    },
+    name: {
+      control: 'text',
+    },
+    tabindex: {
+      control: 'text',
+      description: 'number | string',
+    },
+    label: {
+      control: 'text',
+    },
+    leftLabel: {
+      control: 'boolean',
+      description: 'Расположить текст слева от переключателя',
+    },
+    size: {
+      control: 'text',
+      description: 'CSS или quasar(xs|sm|md|lg|xl)',
+    },
+    dark: {
+      control: 'boolean',
+      description: 'Используется для темного фона, чтобы фон переключателя был светлее',
+    },
+    dense: {
+      control: 'boolean',
+    },
+    color: {
+      control: 'select',
+      options: quasarColorOpts,
+    },
+    toggleOrder: {
+      control: 'text',
+      description:
+        '"tf" | "ft". Порядок переключения состояний. t - true, f - false. Если toggle-indeterminate истинно, то порядок следующий: indet -> первое состояние -> второе состояние -> indet (и повторять), в противном случае: indet -> первое состояние -> второе состояние -> первое состояние -> второе состояние -> ...',
+    },
+    toggleIndeterminate: {
+      control: 'boolean',
+      description:
+        'При взаимодействии пользователя с компонентом исполюзуется не только вкл/выкл, а ещё и неопределенное состояние',
+    },
+    keepColor: {
+      control: 'boolean',
+      description: 'Следует ли сохранять значение color, если выкл',
+    },
+    icon: {
+      control: 'text',
+      description: 'Если передано "none", иконка не используется',
+      table: { category: 'icon' },
+    },
+    checkedIcon: {
+      control: 'text',
+      description: 'Иконка для вкл',
+      table: { category: 'icon' },
+    },
+    uncheckedIcon: {
+      control: 'text',
+      description: 'Иконка для выкл',
+      table: { category: 'icon' },
+    },
+    indeterminateIcon: {
+      control: 'text',
+      description: 'Иконка для неопределенного состояния',
+      table: { category: 'icon' },
+    },
+    iconColor: {
+      control: 'select',
+      options: quasarColorOpts,
+      description: 'Цвет иконки из палитры quasar(только для вкл)',
+      table: { category: 'icon' },
+    },
+  },
+  args: {
+    label: 'Toggle',
+    modelValue: 'on',
+    falseValue: 'off',
+    trueValue: 'on',
+    indeterminateValue: '',
+    disable: false,
+    name: 'toggler',
+    tabindex: '1',
+    leftLabel: false,
+    keepColor: false,
+    color: 'primary',
+    icon: 'none',
+    size: 'md',
+    dark: false,
+    dense: false,
+    toggleIndeterminate: false,
+    toggleOrder: 'ft',
+    val: '',
+    checkedIcon: 'none',
+    uncheckedIcon: 'none',
+    indeterminateIcon: 'none',
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof AppToggle>
+
+export const Default: Story = {}
+
+export const States: Story = {
+  render: () => ({
+    components: { AppToggle },
+    template: `
+      <AppToggle label="Включён" :model-value="true" />
+      <AppToggle  label="Выключен left label" :model-value="false" left-label />
+      <AppToggle label="indeterminate" :model-value="null" indeterminate-value/>
+      <AppToggle  label="Включён + отключён" :model-value="true" disable />
+      <AppToggle  label="Выключен + отключён" :model-value="false" disable />
+    `,
+  }),
+}
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { AppToggle },
+    template: `
+          <AppToggle size="xs" v-model="toggleState" val="xs" label="Size 'xs'" />
+          <AppToggle size="sm" v-model="toggleState" val="sm" label="Size 'sm'" />
+          <AppToggle size="md" v-model="toggleState" val="md" label="Size 'md'" />
+          <AppToggle size="lg" v-model="toggleState" val="lg" label="Size 'lg'" />
+          <AppToggle size="xl" v-model="toggleState" val="xl" label="Size 'xl'" />
+          <AppToggle size="150px" v-model="toggleState" val="150px" label="Size '150px'" />
+    `,
+    data() {
+      return {
+        toggleState: true,
+      }
+    },
+  }),
+}
+
+export const Colors: Story = {
+  render: () => ({
+    components: { AppToggle },
+    template: `
+      <AppToggle v-model="toggleState" label="red" color="red"/>
+      <AppToggle v-model="toggleState" label="red keep color" color="red" keep-color />
+      <AppToggle v-model="toggleState" label="yellow" color="yellow" />
+      <AppToggle v-model="toggleState" label="yellow keep color" color="yellow" keep-color />
+      <AppToggle v-model="toggleState" label="green" color="green" />
+      <AppToggle v-model="toggleState" label="green keep color" color="green" keep-color />
+    `,
+    data() {
+      return {
+        toggleState: true,
+      }
+    },
+  }),
+}
+
+export const DarkBg: Story = {
+  render: () => ({
+    components: { AppToggle },
+    template: `
+      <div class="bg-secondary rounded-borders">
+        <AppToggle v-model="toggleState" label="red" dark class="text-white" color="red" />
+        <AppToggle v-model="toggleState" label="red keep color" dark keep-color class="text-white" color="red" />
+        <AppToggle v-model="toggleState" label="yellow" dark class="text-white" color="yellow" />
+        <AppToggle v-model="toggleState" label="yellow keep color" dark keep-color class="text-white" color="yellow" />
+        <AppToggle v-model="toggleState" label="green" dark class="text-white" color="green" />
+        <AppToggle v-model="toggleState" label="green keep color" dark keep-color class="text-white" color="green" />
+      </div>
+    `,
+    data() {
+      return {
+        toggleState: true,
+      }
+    },
+  }),
+}
+
+export const Icons: Story = {
+  render: () => ({
+    components: { AppToggle },
+    template: `
+        <AppToggle v-model="toggleState" color="pink" icon="mail" label="Same Icon for each state" />
+        <AppToggle v-model="toggleState" color="orange" icon="alarm" label="Same Icon for each state" keep-color/>
+        <AppToggle v-model="toggleState" label="Different icon for each state" color="green" checked-icon="check" unchecked-icon="clear"/>
+    `,
+    data() {
+      return {
+        toggleState: true,
+      }
+    },
+  }),
+}
+
+export const ArrayModel: Story = {
+  render: () => ({
+    components: { AppToggle },
+    template: `
+        <AppToggle color="blue" label="Blue" v-model="selection" val="blue" />
+        <AppToggle color="yellow" label="Yellow" v-model="selection" val="yellow" />
+        <AppToggle color="green" label="Green" v-model="selection" val="green" />
+        <AppToggle color="red" label="Red" v-model="selection" val="red" />
+        <div>
+          Model: {{selection}}
+        </div>
+    `,
+    data() {
+      return {
+        selection: ['yellow', 'red'],
+      }
+    },
+  }),
+}

package/src/common/app-wrapper/AppWrapper.vue

@@ -1,31 +1,31 @@
-<template>
-  <div class="app-wrapper">
-    <slot />
-  </div>
-</template>
-<script setup lang="ts"></script>
-<style scoped lang="scss">
-.app-wrapper {
-  width: 100%;
-  height: 100%;
-  margin: 20px 0 12px 0;
-  padding: 30px;
-  border-radius: 8px;
-  background: #fff;
-  outline: 4px solid #598dd5;
-  outline-offset: -3px;
-  box-shadow:
-    0px 4px 4px 0px rgba(0, 0, 0, 0.25),
-    0px 4px 4px 0px #c4d7f1 inset,
-    0px 0px 6.4px 3px rgba(31, 82, 159, 0.5),
-    0px 6px 58px 0px rgba(0, 49, 122, 0.1);
-}
-
-@media (max-width: 1440px) {
-  .app-wrapper {
-    margin: 10px 0;
-    padding: 14px;
-    border-radius: 8px;
-  }
-}
-</style>
+<template>
+  <div class="app-wrapper">
+    <slot />
+  </div>
+</template>
+<script setup lang="ts"></script>
+<style scoped lang="scss">
+.app-wrapper {
+  width: 100%;
+  height: 100%;
+  margin: 20px 0 12px 0;
+  padding: 30px;
+  border-radius: 8px;
+  background: #fff;
+  outline: 4px solid #598dd5;
+  outline-offset: -3px;
+  box-shadow:
+    0px 4px 4px 0px rgba(0, 0, 0, 0.25),
+    0px 4px 4px 0px #c4d7f1 inset,
+    0px 0px 6.4px 3px rgba(31, 82, 159, 0.5),
+    0px 6px 58px 0px rgba(0, 49, 122, 0.1);
+}
+
+@media (max-width: 1440px) {
+  .app-wrapper {
+    margin: 10px 0;
+    padding: 14px;
+    border-radius: 8px;
+  }
+}
+</style>

package/src/configs/storybook.ts

@@ -1,14 +1,14 @@
-export const quasarColorOpts = [
-  'primary',
-  'secondary',
-  'accent',
-  'positive',
-  'negative',
-  'info',
-  'warning',
-  'dark',
-  'light',
-  'faded',
-  'white',
-  'black',
-]
+export const quasarColorOpts = [
+  'primary',
+  'secondary',
+  'accent',
+  'positive',
+  'negative',
+  'info',
+  'warning',
+  'dark',
+  'light',
+  'faded',
+  'white',
+  'black',
+]