shared-ritm 1.3.92 → 1.3.94

package/src/common/app-checkbox/AppCheckbox.vue

@@ -1,31 +1,31 @@
-<template>
-  <q-checkbox v-bind="$props" :class="$style['app-checkbox']" />
-</template>
-
-<script setup lang="ts">
-import { computed, defineProps } from 'vue'
-import { colors, QCheckboxProps } from 'quasar'
-
-type Props = {
-  borderRadius?: string
-  borderColor?: string
-  borderWidth?: string
-}
-
-const props = withDefaults(defineProps<QCheckboxProps & Props>(), {
-  borderRadius: '6px',
-  borderColor: 'white',
-  borderWidth: '2px',
-})
-
-const qBorderColor = computed(() => colors.getPaletteColor(props.borderColor))
-</script>
-<style module lang="scss">
-.app-checkbox {
-  :global(.q-checkbox__bg) {
-    border-radius: v-bind(borderRadius);
-    border-color: v-bind(qBorderColor);
-    border-width: v-bind(borderWidth);
-  }
-}
-</style>
+<template>
+  <q-checkbox v-bind="$props" :class="$style['app-checkbox']" />
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps } from 'vue'
+import { colors, QCheckboxProps } from 'quasar'
+
+type Props = {
+  borderRadius?: string
+  borderColor?: string
+  borderWidth?: string
+}
+
+const props = withDefaults(defineProps<QCheckboxProps & Props>(), {
+  borderRadius: '6px',
+  borderColor: 'white',
+  borderWidth: '2px',
+})
+
+const qBorderColor = computed(() => colors.getPaletteColor(props.borderColor))
+</script>
+<style module lang="scss">
+.app-checkbox {
+  :global(.q-checkbox__bg) {
+    border-radius: v-bind(borderRadius);
+    border-color: v-bind(qBorderColor);
+    border-width: v-bind(borderWidth);
+  }
+}
+</style>

package/src/common/app-checkbox/Checkbox.stories.ts

@@ -1,252 +1,252 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import AppCheckbox from '@/common/app-checkbox/AppCheckbox.vue'
-import { quasarColorOpts } from '@/configs/storybook'
-
-const meta: Meta<typeof AppCheckbox> = {
-  title: 'Components/AppCheckbox',
-  component: AppCheckbox,
-  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)',
-    },
-    borderColor: {
-      control: 'select',
-      options: quasarColorOpts,
-    },
-    borderRadius: {
-      control: 'text',
-    },
-    borderWidth: {
-      control: 'text',
-    },
-    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, если выкл',
-    },
-    checkedIcon: {
-      control: 'text',
-      description: 'Иконка для вкл',
-      table: { category: 'icon' },
-    },
-    uncheckedIcon: {
-      control: 'text',
-      description: 'Иконка для выкл',
-      table: { category: 'icon' },
-    },
-    indeterminateIcon: {
-      control: 'text',
-      description: 'Иконка для неопределенного состояния',
-      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',
-    size: 'md',
-    dark: false,
-    dense: false,
-    toggleIndeterminate: false,
-    toggleOrder: 'ft',
-    val: '',
-    checkedIcon: '',
-    uncheckedIcon: '',
-    indeterminateIcon: '',
-    borderRadius: '6px',
-    borderColor: 'primary',
-    borderWidth: '2px',
-  },
-}
-
-export default meta
-
-type Story = StoryObj<typeof AppCheckbox>
-
-export const Default: Story = {}
-
-export const States: Story = {
-  render: () => ({
-    components: { AppCheckbox },
-    template: `
-      <div class="column content-start bg-teal-2 rounded-borders">
-      <AppCheckbox label="Включён" :model-value="true" />
-      <AppCheckbox  label="Выключен left label" :model-value="false" left-label />
-      <AppCheckbox label="indeterminate" :model-value="null" indeterminate-value/>
-      <AppCheckbox  label="Включён + отключён" :model-value="true" disable />
-      <AppCheckbox  label="Выключен + отключён" :model-value="false" disable />
-      </div>
-    `,
-  }),
-}
-
-export const Sizes: Story = {
-  render: () => ({
-    components: { AppCheckbox },
-    template: `
-      <div class="bg-teal-2 rounded-borders">
-      <AppCheckbox size="xs" v-model="toggleState" val="xs" label="Size 'xs'" />
-      <AppCheckbox size="sm" v-model="toggleState" val="sm" label="Size 'sm'" />
-      <AppCheckbox size="md" v-model="toggleState" val="md" label="Size 'md'" />
-      <AppCheckbox size="lg" v-model="toggleState" val="lg" label="Size 'lg'" />
-      <AppCheckbox size="xl" v-model="toggleState" val="xl" label="Size 'xl'" />
-      <AppCheckbox size="150px" v-model="toggleState" val="150px" label="Size '150px'" />
-      </div>
-    `,
-    data() {
-      return {
-        toggleState: true,
-      }
-    },
-  }),
-}
-
-export const Colors: Story = {
-  render: () => ({
-    components: { AppCheckbox },
-    template: `
-      <div class="bg-teal-2 rounded-borders">
-      <AppCheckbox v-model="toggleState" label="red" color="red"/>
-      <AppCheckbox v-model="toggleState" label="red keep color" color="red" keep-color />
-      <AppCheckbox v-model="toggleState" label="yellow" color="yellow" />
-      <AppCheckbox v-model="toggleState" label="yellow keep color" color="yellow" keep-color />
-      <AppCheckbox v-model="toggleState" label="green" color="green" />
-      <AppCheckbox v-model="toggleState" label="green keep color" color="green" keep-color />
-      </div>
-    `,
-    data() {
-      return {
-        toggleState: true,
-      }
-    },
-  }),
-}
-
-export const DarkBg: Story = {
-  render: () => ({
-    components: { AppCheckbox },
-    template: `
-      <div class="bg-secondary rounded-borders">
-        <AppCheckbox v-model="toggleState" label="red" dark class="text-white" color="red" />
-        <AppCheckbox v-model="toggleState" label="red keep color" dark keep-color class="text-white" color="red" />
-        <AppCheckbox v-model="toggleState" label="yellow" dark class="text-white" color="yellow" />
-        <AppCheckbox v-model="toggleState" label="yellow keep color" dark keep-color class="text-white" color="yellow" />
-        <AppCheckbox v-model="toggleState" label="green" dark class="text-white" color="green" />
-        <AppCheckbox 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: { AppCheckbox },
-    template: `
-        <AppCheckbox 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: { AppCheckbox },
-    template: `
-      <div class="bg-teal-2 rounded-borders">
-        <AppCheckbox color="blue" label="Blue" v-model="selection" val="blue" />
-        <AppCheckbox color="yellow" label="Yellow" v-model="selection" val="yellow" />
-        <AppCheckbox color="green" label="Green" v-model="selection" val="green" />
-        <AppCheckbox color="red" label="Red" v-model="selection" val="red" />
-        <div>
-          Model: {{selection}}
-        </div>
-      </div>  
-    `,
-    data() {
-      return {
-        selection: ['yellow', 'red'],
-      }
-    },
-  }),
-}
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AppCheckbox from '@/common/app-checkbox/AppCheckbox.vue'
+import { quasarColorOpts } from '@/configs/storybook'
+
+const meta: Meta<typeof AppCheckbox> = {
+  title: 'Components/AppCheckbox',
+  component: AppCheckbox,
+  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)',
+    },
+    borderColor: {
+      control: 'select',
+      options: quasarColorOpts,
+    },
+    borderRadius: {
+      control: 'text',
+    },
+    borderWidth: {
+      control: 'text',
+    },
+    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, если выкл',
+    },
+    checkedIcon: {
+      control: 'text',
+      description: 'Иконка для вкл',
+      table: { category: 'icon' },
+    },
+    uncheckedIcon: {
+      control: 'text',
+      description: 'Иконка для выкл',
+      table: { category: 'icon' },
+    },
+    indeterminateIcon: {
+      control: 'text',
+      description: 'Иконка для неопределенного состояния',
+      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',
+    size: 'md',
+    dark: false,
+    dense: false,
+    toggleIndeterminate: false,
+    toggleOrder: 'ft',
+    val: '',
+    checkedIcon: '',
+    uncheckedIcon: '',
+    indeterminateIcon: '',
+    borderRadius: '6px',
+    borderColor: 'primary',
+    borderWidth: '2px',
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof AppCheckbox>
+
+export const Default: Story = {}
+
+export const States: Story = {
+  render: () => ({
+    components: { AppCheckbox },
+    template: `
+      <div class="column content-start bg-teal-2 rounded-borders">
+      <AppCheckbox label="Включён" :model-value="true" />
+      <AppCheckbox  label="Выключен left label" :model-value="false" left-label />
+      <AppCheckbox label="indeterminate" :model-value="null" indeterminate-value/>
+      <AppCheckbox  label="Включён + отключён" :model-value="true" disable />
+      <AppCheckbox  label="Выключен + отключён" :model-value="false" disable />
+      </div>
+    `,
+  }),
+}
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { AppCheckbox },
+    template: `
+      <div class="bg-teal-2 rounded-borders">
+      <AppCheckbox size="xs" v-model="toggleState" val="xs" label="Size 'xs'" />
+      <AppCheckbox size="sm" v-model="toggleState" val="sm" label="Size 'sm'" />
+      <AppCheckbox size="md" v-model="toggleState" val="md" label="Size 'md'" />
+      <AppCheckbox size="lg" v-model="toggleState" val="lg" label="Size 'lg'" />
+      <AppCheckbox size="xl" v-model="toggleState" val="xl" label="Size 'xl'" />
+      <AppCheckbox size="150px" v-model="toggleState" val="150px" label="Size '150px'" />
+      </div>
+    `,
+    data() {
+      return {
+        toggleState: true,
+      }
+    },
+  }),
+}
+
+export const Colors: Story = {
+  render: () => ({
+    components: { AppCheckbox },
+    template: `
+      <div class="bg-teal-2 rounded-borders">
+      <AppCheckbox v-model="toggleState" label="red" color="red"/>
+      <AppCheckbox v-model="toggleState" label="red keep color" color="red" keep-color />
+      <AppCheckbox v-model="toggleState" label="yellow" color="yellow" />
+      <AppCheckbox v-model="toggleState" label="yellow keep color" color="yellow" keep-color />
+      <AppCheckbox v-model="toggleState" label="green" color="green" />
+      <AppCheckbox v-model="toggleState" label="green keep color" color="green" keep-color />
+      </div>
+    `,
+    data() {
+      return {
+        toggleState: true,
+      }
+    },
+  }),
+}
+
+export const DarkBg: Story = {
+  render: () => ({
+    components: { AppCheckbox },
+    template: `
+      <div class="bg-secondary rounded-borders">
+        <AppCheckbox v-model="toggleState" label="red" dark class="text-white" color="red" />
+        <AppCheckbox v-model="toggleState" label="red keep color" dark keep-color class="text-white" color="red" />
+        <AppCheckbox v-model="toggleState" label="yellow" dark class="text-white" color="yellow" />
+        <AppCheckbox v-model="toggleState" label="yellow keep color" dark keep-color class="text-white" color="yellow" />
+        <AppCheckbox v-model="toggleState" label="green" dark class="text-white" color="green" />
+        <AppCheckbox 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: { AppCheckbox },
+    template: `
+        <AppCheckbox 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: { AppCheckbox },
+    template: `
+      <div class="bg-teal-2 rounded-borders">
+        <AppCheckbox color="blue" label="Blue" v-model="selection" val="blue" />
+        <AppCheckbox color="yellow" label="Yellow" v-model="selection" val="yellow" />
+        <AppCheckbox color="green" label="Green" v-model="selection" val="green" />
+        <AppCheckbox color="red" label="Red" v-model="selection" val="red" />
+        <div>
+          Model: {{selection}}
+        </div>
+      </div>  
+    `,
+    data() {
+      return {
+        selection: ['yellow', 'red'],
+      }
+    },
+  }),
+}