shared-ritm 1.3.67 → 1.3.69

package/src/common/app-table/controllers/useColumnSelector.ts

@@ -1,45 +1,45 @@
-import { computed, ref } from 'vue'
-
-export interface ColumnConfig {
-  name: string
-  label: string
-  [key: string]: any
-}
-
-export function useColumnSelector(allColumns: ColumnConfig[], fixedColumnNames: string[] = []) {
-  const selectedColumnNames = ref<string[]>([...new Set([...fixedColumnNames, ...allColumns.map(col => col.name)])])
-
-  const visibleColumns = computed(() => allColumns.filter(col => selectedColumnNames.value.includes(col.name)))
-
-  function openColumnSelectorDialog($q: any) {
-    $q.dialog({
-      title: 'Выберите колонки',
-      options: {
-        type: 'checkbox',
-        model: [...selectedColumnNames.value],
-        items: allColumns.map(col => ({
-          label: col.label,
-          value: col.name,
-          disable: fixedColumnNames.includes(col.name),
-        })),
-      },
-      cancel: {
-        label: 'Отмена',
-        'data-test': 'cancel-button',
-      },
-      ok: {
-        label: 'Ок',
-        'data-test': 'ok-button',
-      },
-      persistent: true,
-    }).onOk((val: string[]) => {
-      selectedColumnNames.value = Array.from(new Set([...val, ...fixedColumnNames]))
-    })
-  }
-
-  return {
-    selectedColumnNames,
-    visibleColumns,
-    openColumnSelectorDialog,
-  }
-}
+import { computed, ref } from 'vue'
+
+export interface ColumnConfig {
+  name: string
+  label: string
+  [key: string]: any
+}
+
+export function useColumnSelector(allColumns: ColumnConfig[], fixedColumnNames: string[] = []) {
+  const selectedColumnNames = ref<string[]>([...new Set([...fixedColumnNames, ...allColumns.map(col => col.name)])])
+
+  const visibleColumns = computed(() => allColumns.filter(col => selectedColumnNames.value.includes(col.name)))
+
+  function openColumnSelectorDialog($q: any) {
+    $q.dialog({
+      title: 'Выберите колонки',
+      options: {
+        type: 'checkbox',
+        model: [...selectedColumnNames.value],
+        items: allColumns.map(col => ({
+          label: col.label,
+          value: col.name,
+          disable: fixedColumnNames.includes(col.name),
+        })),
+      },
+      cancel: {
+        label: 'Отмена',
+        'data-test': 'cancel-button',
+      },
+      ok: {
+        label: 'Ок',
+        'data-test': 'ok-button',
+      },
+      persistent: true,
+    }).onOk((val: string[]) => {
+      selectedColumnNames.value = Array.from(new Set([...val, ...fixedColumnNames]))
+    })
+  }
+
+  return {
+    selectedColumnNames,
+    visibleColumns,
+    openColumnSelectorDialog,
+  }
+}

package/src/common/app-table/controllers/useTableModel.ts

@@ -1,97 +1,97 @@
-import { Ref, computed, ref } from 'vue'
-
-export interface TableColumn {
-  name: string
-  label: string
-  style?: string
-  headerStyle?: string
-  field?: string | ((row: any) => any)
-  sortable?: boolean
-  filterType?: 'single' | 'multi' | null
-  align?: 'left' | 'center' | 'right'
-  badge?: {
-    true?: string
-    false?: string
-    colorTrue?: string
-    colorFalse?: string
-  }
-  format?: (val: any) => any
-  html?: boolean
-}
-
-export interface FilterOption {
-  id: string
-  name: string
-}
-
-export interface TableModel<T = any> {
-  columns: TableColumn[]
-  rows: T[] | Ref<T[]>
-  filtersOptions?: Ref<Record<string, FilterOption[]>>
-}
-
-export const useTableModel = <T = any>(model: TableModel<T>) => {
-  const columnFilters = ref<Record<string, string | string[] | undefined>>({})
-  const filterMenus = ref<Record<string, boolean>>({})
-
-  model.columns.forEach(({ name, filterType }) => {
-    if (filterType) {
-      columnFilters.value[name] = filterType === 'multi' ? [] : undefined
-      filterMenus.value[name] = false
-    }
-  })
-
-  const resolvedRows = computed(() => (Array.isArray(model.rows) ? model.rows : model.rows.value))
-
-  const toggleFilterValue = (colName: string, value: string) => {
-    const col = model.columns.find(c => c.name === colName)
-    if (col?.filterType === 'multi') {
-      const current = columnFilters.value[colName] as string[]
-      const index = current.indexOf(value)
-      index > -1 ? current.splice(index, 1) : current.push(value)
-      columnFilters.value[colName] = [...current]
-    } else {
-      columnFilters.value[colName] = value
-      filterMenus.value[colName] = false
-    }
-  }
-
-  const selectedFilters = computed(() => {
-    const result: Record<string, string[]> = {}
-    for (const col of model.columns) {
-      const filter = columnFilters.value[col.name]
-      const options = model.filtersOptions?.value[col.name] || []
-
-      if (filter) {
-        let selectedIds: string[] = []
-        if (Array.isArray(filter)) {
-          selectedIds = options.filter(opt => filter.includes(opt.name)).map(opt => opt.id)
-        } else {
-          selectedIds = options.filter(opt => opt.name === filter).map(opt => opt.id)
-        }
-        result[col.name] = Array.from(new Set(selectedIds))
-      }
-    }
-    return result
-  })
-
-  const clearFilter = (colName: string) => {
-    const col = model.columns.find(c => c.name === colName)
-    columnFilters.value[colName] = col?.filterType === 'multi' ? [] : undefined
-  }
-
-  const openFilterMenu = (colName: string, isOpen: boolean) => {
-    filterMenus.value[colName] = isOpen
-  }
-
-  return {
-    rows: resolvedRows,
-    columns: computed(() => model.columns),
-    columnFilters,
-    filterMenus,
-    toggleFilterValue,
-    clearFilter,
-    openFilterMenu,
-    selectedFilters,
-  }
-}
+import { Ref, computed, ref } from 'vue'
+
+export interface TableColumn {
+  name: string
+  label: string
+  style?: string
+  headerStyle?: string
+  field?: string | ((row: any) => any)
+  sortable?: boolean
+  filterType?: 'single' | 'multi' | null
+  align?: 'left' | 'center' | 'right'
+  badge?: {
+    true?: string
+    false?: string
+    colorTrue?: string
+    colorFalse?: string
+  }
+  format?: (val: any) => any
+  html?: boolean
+}
+
+export interface FilterOption {
+  id: string
+  name: string
+}
+
+export interface TableModel<T = any> {
+  columns: TableColumn[]
+  rows: T[] | Ref<T[]>
+  filtersOptions?: Ref<Record<string, FilterOption[]>>
+}
+
+export const useTableModel = <T = any>(model: TableModel<T>) => {
+  const columnFilters = ref<Record<string, string | string[] | undefined>>({})
+  const filterMenus = ref<Record<string, boolean>>({})
+
+  model.columns.forEach(({ name, filterType }) => {
+    if (filterType) {
+      columnFilters.value[name] = filterType === 'multi' ? [] : undefined
+      filterMenus.value[name] = false
+    }
+  })
+
+  const resolvedRows = computed(() => (Array.isArray(model.rows) ? model.rows : model.rows.value))
+
+  const toggleFilterValue = (colName: string, value: string) => {
+    const col = model.columns.find(c => c.name === colName)
+    if (col?.filterType === 'multi') {
+      const current = columnFilters.value[colName] as string[]
+      const index = current.indexOf(value)
+      index > -1 ? current.splice(index, 1) : current.push(value)
+      columnFilters.value[colName] = [...current]
+    } else {
+      columnFilters.value[colName] = value
+      filterMenus.value[colName] = false
+    }
+  }
+
+  const selectedFilters = computed(() => {
+    const result: Record<string, string[]> = {}
+    for (const col of model.columns) {
+      const filter = columnFilters.value[col.name]
+      const options = model.filtersOptions?.value[col.name] || []
+
+      if (filter) {
+        let selectedIds: string[] = []
+        if (Array.isArray(filter)) {
+          selectedIds = options.filter(opt => filter.includes(opt.name)).map(opt => opt.id)
+        } else {
+          selectedIds = options.filter(opt => opt.name === filter).map(opt => opt.id)
+        }
+        result[col.name] = Array.from(new Set(selectedIds))
+      }
+    }
+    return result
+  })
+
+  const clearFilter = (colName: string) => {
+    const col = model.columns.find(c => c.name === colName)
+    columnFilters.value[colName] = col?.filterType === 'multi' ? [] : undefined
+  }
+
+  const openFilterMenu = (colName: string, isOpen: boolean) => {
+    filterMenus.value[colName] = isOpen
+  }
+
+  return {
+    rows: resolvedRows,
+    columns: computed(() => model.columns),
+    columnFilters,
+    filterMenus,
+    toggleFilterValue,
+    clearFilter,
+    openFilterMenu,
+    selectedFilters,
+  }
+}

package/src/common/app-toggle/AppToggle.vue

@@ -1,24 +1,14 @@
 <template>
   <div>
-    <q-toggle v-model="value" :disable="disable" />
+    <q-toggle v-bind="$props" v-model="model" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, defineProps, defineEmits } from 'vue'
+import { defineProps } from 'vue'
+import { QToggleProps } from 'quasar'
 
-interface Props {
-  modelValue: any
-  disable?: boolean
-}
+defineProps<QToggleProps>()
 
-const props = defineProps<Props>()
-const emit = defineEmits(['update:modelValue', 'number'])
-
-const value = computed({
-  get: () => props.modelValue,
-  set: (newValue: any) => emit('update:modelValue', newValue),
-})
+const model = defineModel<any>()
 </script>
-
-<style module lang="scss"></style>

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

@@ -1,69 +1,245 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import AppToggle from '@/common/app-toggle/AppToggle.vue'
-
-const meta: Meta<typeof AppToggle> = {
-  title: 'Components/AppToggle',
-  component: AppToggle,
-  tags: ['autodocs'],
-  argTypes: {
-    modelValue: {
-      control: 'boolean',
-    },
-    disable: {
-      control: 'boolean',
-    },
-  },
-  args: {
-    modelValue: false,
-    disable: false,
-  },
-}
-
-export default meta
-
-type Story = StoryObj<typeof AppToggle>
-
-export const Default: Story = {}
-
-export const States: Story = {
-  render: () => ({
-    components: { AppToggle },
-    template: `
-        <div style="display: flex; flex-direction: column; gap: 12px;">
-          <label style="display: flex; align-items: center; gap: 12px;">
-            <AppToggle :model-value="true" />
-            Включён
-          </label>
-          <label style="display: flex; align-items: center; gap: 12px;">
-            <AppToggle :model-value="false" />
-            Выключен
-          </label>
-          <label style="display: flex; align-items: center; gap: 12px; opacity: 0.6;">
-            <AppToggle :model-value="true" :disable="true" />
-            Включён + отключён
-          </label>
-          <label style="display: flex; align-items: center; gap: 12px; opacity: 0.6;">
-            <AppToggle :model-value="false" :disable="true" />
-            Выключен + отключён
-          </label>
-        </div>
-    `,
-  }),
-}
-
-export const WithBinding: Story = {
-  render: () => ({
-    components: { AppToggle },
-    template: `
-        <div style="display: flex; align-items: center; gap: 16px;">
-          <AppToggle v-model="toggleState" />
-          <span>Значение: {{ toggleState ? 'включено' : 'выключено' }}</span>
-        </div>
-    `,
-    data() {
-      return {
-        toggleState: true,
-      }
-    },
-  }),
-}
+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'],
+      }
+    },
+  }),
+}