shared-ritm 1.2.46 → 1.2.48

package/src/common/app-table/components/TableSearch.vue

@@ -1,78 +1,78 @@
-<script setup lang="ts">
-import { defineProps, defineEmits, ref, watch } from 'vue'
-
-const props = defineProps<{
-  modelValue: string
-  placeholder: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-  (e: 'search', value: string): void
-}>()
-
-const input = ref(props.modelValue)
-let debounceTimer: ReturnType<typeof setTimeout>
-
-watch(
-  () => props.modelValue,
-  val => {
-    input.value = val
-  },
-)
-
-watch(input, val => {
-  emit('update:modelValue', val)
-  clearTimeout(debounceTimer)
-  debounceTimer = setTimeout(() => {
-    emit('search', val)
-  }, 400)
-})
-
-const clearInput = () => {
-  input.value = ''
-  emit('search', '')
-}
-</script>
-
-<template>
-  <q-input v-model="input" :placeholder="placeholder" dense outlined>
-    <template v-if="input" #append>
-      <q-icon name="✕" class="cursor-pointer" @click.stop="clearInput" />
-    </template>
-  </q-input>
-</template>
-
-<style scoped lang="scss">
-.q-field {
-  background: #fff;
-  border-radius: 4px;
-  outline: none;
-  border-color: #f2f7fb;
-
-  ::v-deep(.q-field__control) {
-    height: 52px;
-    display: flex;
-    align-items: center;
-  }
-
-  ::v-deep(.q-field__native) {
-    font-family: NunitoSansFont, sans-serif;
-    color: #1d425d;
-    padding-left: 8px;
-  }
-
-  ::v-deep(.q-field__native::placeholder) {
-    color: rgba(184, 184, 184, 0.87);
-  }
-
-  ::v-deep(.q-icon.cursor-pointer) {
-    color: #1d425d;
-    font-size: 20px;
-    line-height: 15px;
-  }
-  ::v-deep(.q-field__control:hover:before) {
-    border-color: #3f8cff;
-  }
-}
-</style>
+<script setup lang="ts">
+import { defineProps, defineEmits, ref, watch } from 'vue'
+
+const props = defineProps<{
+  modelValue: string
+  placeholder: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'search', value: string): void
+}>()
+
+const input = ref(props.modelValue)
+let debounceTimer: ReturnType<typeof setTimeout>
+
+watch(
+  () => props.modelValue,
+  val => {
+    input.value = val
+  },
+)
+
+watch(input, val => {
+  emit('update:modelValue', val)
+  clearTimeout(debounceTimer)
+  debounceTimer = setTimeout(() => {
+    emit('search', val)
+  }, 400)
+})
+
+const clearInput = () => {
+  input.value = ''
+  emit('search', '')
+}
+</script>
+
+<template>
+  <q-input v-model="input" :placeholder="placeholder" dense outlined>
+    <template v-if="input" #append>
+      <q-icon name="✕" class="cursor-pointer" @click.stop="clearInput" />
+    </template>
+  </q-input>
+</template>
+
+<style scoped lang="scss">
+.q-field {
+  background: #fff;
+  border-radius: 4px;
+  outline: none;
+  border-color: #f2f7fb;
+
+  ::v-deep(.q-field__control) {
+    height: 52px;
+    display: flex;
+    align-items: center;
+  }
+
+  ::v-deep(.q-field__native) {
+    font-family: NunitoSansFont, sans-serif;
+    color: #1d425d;
+    padding-left: 8px;
+  }
+
+  ::v-deep(.q-field__native::placeholder) {
+    color: rgba(184, 184, 184, 0.87);
+  }
+
+  ::v-deep(.q-icon.cursor-pointer) {
+    color: #1d425d;
+    font-size: 20px;
+    line-height: 15px;
+  }
+  ::v-deep(.q-field__control:hover:before) {
+    border-color: #3f8cff;
+  }
+}
+</style>

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

@@ -1,43 +1,43 @@
-import { ref, watch, onMounted } from 'vue'
-
-export function useBaseTable(model: any) {
-  const search = ref('')
-  const currentPage = ref(1)
-  const loading = ref(false)
-
-  const loadTable = async (searchVal = '', pageVal = 1) => {
-    loading.value = true
-    try {
-      await model.initialize({ search: searchVal, page: pageVal })
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const handleSearch = async (val: string) => {
-    currentPage.value = 1
-    await loadTable(val, currentPage.value)
-  }
-
-  const handlePageChange = async (page: number) => {
-    currentPage.value = page
-    await loadTable(search.value, page)
-  }
-
-  watch(
-    () => model.columnFilters.value,
-    () => loadTable(search.value, currentPage.value),
-    { deep: true },
-  )
-
-  onMounted(() => loadTable())
-
-  return {
-    search,
-    currentPage,
-    loading,
-    handleSearch,
-    handlePageChange,
-    loadTable,
-  }
-}
+import { ref, watch, onMounted } from 'vue'
+
+export function useBaseTable(model: any) {
+  const search = ref('')
+  const currentPage = ref(1)
+  const loading = ref(false)
+
+  const loadTable = async (searchVal = '', pageVal = 1) => {
+    loading.value = true
+    try {
+      await model.initialize({ search: searchVal, page: pageVal })
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const handleSearch = async (val: string) => {
+    currentPage.value = 1
+    await loadTable(val, currentPage.value)
+  }
+
+  const handlePageChange = async (page: number) => {
+    currentPage.value = page
+    await loadTable(search.value, page)
+  }
+
+  watch(
+    () => model.columnFilters.value,
+    () => loadTable(search.value, currentPage.value),
+    { deep: true },
+  )
+
+  onMounted(() => loadTable())
+
+  return {
+    search,
+    currentPage,
+    loading,
+    handleSearch,
+    handlePageChange,
+    loadTable,
+  }
+}

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

@@ -1,38 +1,38 @@
-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: true,
-      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: true,
+      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,93 +1,93 @@
-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) {
-        result[col.name] = Array.isArray(filter)
-          ? options.filter(opt => filter.includes(opt.name)).map(opt => opt.id)
-          : options.filter(opt => opt.name === filter).map(opt => opt.id)
-      }
-    }
-    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) {
+        result[col.name] = Array.isArray(filter)
+          ? options.filter(opt => filter.includes(opt.name)).map(opt => opt.id)
+          : options.filter(opt => opt.name === filter).map(opt => opt.id)
+      }
+    }
+    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,23 +1,23 @@
-<template>
-  <div>
-    <q-toggle v-model="value" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface Props {
-  modelValue: any
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits(['update:modelValue', 'number'])
-
-const value = computed({
-  get: () => props.modelValue,
-  set: (newValue: any) => emit('update:modelValue', newValue),
-})
-</script>
-
-<style module lang="scss"></style>
+<template>
+  <div>
+    <q-toggle v-model="value" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue: any
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue', 'number'])
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (newValue: any) => emit('update:modelValue', newValue),
+})
+</script>
+
+<style module lang="scss"></style>

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

@@ -1,28 +1,28 @@
-<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/global.d.ts

@@ -1 +1 @@
-declare module 'shared-ritm'
+declare module 'shared-ritm'

package/src/icons/components/arrow-down-icon.vue

@@ -1,25 +1,25 @@
-<script>
-export default {
-  name: 'ArrowDownIcon',
-}
-</script>
-
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <path
-      d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
-      stroke="#3F8CFF"
-      stroke-width="1.5"
-      stroke-miterlimit="10"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M15.53 10.74L12 14.26L8.47003 10.74"
-      stroke="#3F8CFF"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg>
-</template>
+<script>
+export default {
+  name: 'ArrowDownIcon',
+}
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path
+      d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z"
+      stroke="#3F8CFF"
+      stroke-width="1.5"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15.53 10.74L12 14.26L8.47003 10.74"
+      stroke="#3F8CFF"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>