shared-ritm 1.3.68 → 1.3.69

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

@@ -1,26 +1,33 @@
 <template>
-  <q-checkbox v-model="value" :class="$style['app-checkbox']" />
+  <q-checkbox v-bind="$props" v-model="model" :class="$style['app-checkbox']" />
 </template>
+
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, defineProps } from 'vue'
+import { colors, QCheckboxProps } from 'quasar'
 
-interface Props {
-  modelValue: any
+type Props = {
+  borderRadius?: string
+  borderColor?: string
+  borderWidth?: string
 }
 
-const props = defineProps<Props>()
-const emit = defineEmits(['update:modelValue', 'number'])
-
-const value = computed({
-  get: () => props.modelValue,
-  set: (newValue: any) => emit('update:modelValue', newValue),
+const props = withDefaults(defineProps<QCheckboxProps & Props>(), {
+  borderRadius: '6px',
+  borderColor: 'white',
+  borderWidth: '2px',
 })
+
+const model = defineModel<any>()
+
+const qBorderColor = computed(() => colors.getPaletteColor(props.borderColor))
 </script>
 <style module lang="scss">
 .app-checkbox {
   :global(.q-checkbox__bg) {
-    border-radius: 6px;
-    border-color: white;
+    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,60 +1,252 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import AppCheckbox from '@/common/app-checkbox/AppCheckbox.vue'
-
-const meta: Meta<typeof AppCheckbox> = {
-  title: 'Components/AppCheckbox',
-  component: AppCheckbox,
-  tags: ['autodocs'],
-  args: {
-    modelValue: true,
-  },
-}
-
-export default meta
-
-type Story = StoryObj<typeof AppCheckbox>
-
-export const Default: Story = {}
-
-export const States: Story = {
-  render: () => ({
-    components: { AppCheckbox },
-    template: `
-        <div style="display: flex; flex-direction: column; gap: 12px; background-color: #F4F9FD">
-          <label style="display: flex; align-items: center; gap: 8px;">
-            <AppCheckbox :model-value="true" />
-            Выбран
-          </label>
-          <label style="display: flex; align-items: center; gap: 8px;">
-            <AppCheckbox :model-value="false" />
-            Не выбран
-          </label>
-          <label style="display: flex; align-items: center; gap: 8px; opacity: 0.6;">
-            <AppCheckbox :model-value="true" disable />
-            Выбран + disabled
-          </label>
-          <label style="display: flex; align-items: center; gap: 8px; opacity: 0.6;">
-            <AppCheckbox :model-value="false" disable />
-            Не выбран + disabled
-          </label>
-        </div>
-    `,
-  }),
-}
-
-export const WithBinding: Story = {
-  render: () => ({
-    components: { AppCheckbox },
-    template: `
-        <div>
-          <AppCheckbox v-model="toggleState" />
-          <span>Значение: {{ toggleState ? 'включено' : 'выключено' }}</span>
-        </div>
-    `,
-    data() {
-      return {
-        toggleState: true,
-      }
-    },
-  }),
-}
+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'],
+      }
+    },
+  }),
+}

package/src/common/app-date-picker/DatePicker.stories.ts

@@ -1,66 +1,66 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import DatePicker from '@/common/app-date-picker/AppDatePicker.vue'
-
-const meta: Meta<typeof DatePicker> = {
-  title: 'Components/DatePicker',
-  component: DatePicker,
-  tags: ['autodocs'],
-  argTypes: {
-    label: {
-      control: 'text',
-    },
-    modelValue: {
-      control: 'text',
-      description: 'Выбранная дата в формате YYYY-MM-DD.',
-    },
-    disabled: {
-      control: 'boolean',
-    },
-    disableRuleDates: {
-      control: 'text',
-      description: 'Минимальная дата в формате YYYY-MM-DD. Если не указана — ограничение "не раньше сегодня".',
-    },
-  },
-  args: {
-    label: 'Дата начала',
-    modelValue: '',
-    disabled: false,
-    disableRuleDates: '',
-  },
-}
-
-export default meta
-
-type Story = StoryObj<typeof DatePicker>
-
-export const Default: Story = {}
-
-export const States: Story = {
-  render: () => ({
-    components: { DatePicker },
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 20px;">
-        <div>
-          <DatePicker v-model="date1" label="Не ранее сегодня" />
-        </div>
-        <div>
-          <DatePicker v-model="date2" label="С 01.01.2026" disable-rule-dates="2026-01-01" />
-        </div>
-        <div>
-          <DatePicker v-model="disabledDate" label="Отключён" :disabled="true" />
-        </div>
-        <div>
-          <DatePicker v-model="selectedDate" label="С датой" />
-        </div>
-      </div>
-    `,
-    data() {
-      return {
-        date1: '',
-        date2: '',
-        disabledDate: '',
-        selectedDate: '2025-12-25',
-      }
-    },
-  }),
-}
+import type { Meta, StoryObj } from '@storybook/vue3'
+import DatePicker from '@/common/app-date-picker/AppDatePicker.vue'
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    modelValue: {
+      control: 'text',
+      description: 'Выбранная дата в формате YYYY-MM-DD.',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    disableRuleDates: {
+      control: 'text',
+      description: 'Минимальная дата в формате YYYY-MM-DD. Если не указана — ограничение "не раньше сегодня".',
+    },
+  },
+  args: {
+    label: 'Дата начала',
+    modelValue: '',
+    disabled: false,
+    disableRuleDates: '',
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof DatePicker>
+
+export const Default: Story = {}
+
+export const States: Story = {
+  render: () => ({
+    components: { DatePicker },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 20px;">
+        <div>
+          <DatePicker v-model="date1" label="Не ранее сегодня" />
+        </div>
+        <div>
+          <DatePicker v-model="date2" label="С 01.01.2026" disable-rule-dates="2026-01-01" />
+        </div>
+        <div>
+          <DatePicker v-model="disabledDate" label="Отключён" :disabled="true" />
+        </div>
+        <div>
+          <DatePicker v-model="selectedDate" label="С датой" />
+        </div>
+      </div>
+    `,
+    data() {
+      return {
+        date1: '',
+        date2: '',
+        disabledDate: '',
+        selectedDate: '2025-12-25',
+      }
+    },
+  }),
+}