shared-ritm 1.2.56 → 1.2.58

package/dist/types/utils/helpers.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Сравнивает два значения на глубокое равенство.
+ * Поддерживает массивы, объекты и примитивы.
+ */
+export declare function isEqual(a: any, b: any): boolean;
+/**
+ * Нормализует значение:
+ * - Если передан массив объектов, возвращает массив `.value` или сам объект.
+ * - Если передан объект, возвращает `.value` или сам объект.
+ * - Если примитив — возвращает без изменений.
+ */
+export declare function normalizeValue(val: any): any;
+/**
+ * Генерирует UUID v4.
+ * Используется для идентификаторов временных сущностей.
+ */
+export declare function uuidv4(): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shared-ritm",
-  "version": "1.2.56",
+  "version": "1.2.58",
   "private": false,
   "files": [
     "dist",

package/src/common/app-input/AppInput.vue

@@ -5,6 +5,7 @@
     standout
     outlined
     dense
+    :rules="rules"
     :type="inputType"
     autocomplete="h87h58g7h8hd"
     :readonly="readonly || field"

package/src/common/app-table/AppTable.vue

@@ -1,64 +1,3 @@
-<script setup lang="ts">
-import { defineProps, defineEmits, ref, computed, watch } from 'vue'
-import type { Ref } from 'vue'
-import FilterIcon from '@/icons/components/table-filter-icon.vue'
-
-interface FilterOption {
-  id: string
-  name: string
-}
-
-interface TableEmits {
-  'toggle-filter-value': [colName: string, value: string]
-  'clear-filter': [colName: string]
-  'open-filter-menu': [colName: string, isOpen: boolean]
-  'row-click': [row: Record<string, any>]
-  'update:selectedRows': [rows: any[]]
-}
-
-const emit = defineEmits<TableEmits>()
-
-const props = defineProps<{
-  rows: Ref<any[]>
-  columns: any[]
-  columnFilters: Ref<Record<string, string | string[] | undefined>>
-  filterMenus: Ref<Record<string, boolean>>
-  filtersOptions: Record<string, FilterOption[]>
-  meta: Ref<{ currentPage: number; perPage: number }>
-  enableMultiSelect?: boolean
-  selectedRows: any[]
-}>()
-
-const localSearches = ref<Record<string, string>>({})
-
-const filteredOptions = computed(() => {
-  const result: Record<string, FilterOption[]> = {}
-  for (const col of props.columns) {
-    const search = localSearches.value[col.name]?.toLowerCase() || ''
-    const options = props.filtersOptions[col.name] || []
-    result[col.name] = options.filter(opt => opt.name.toLowerCase().includes(search))
-  }
-  return result
-})
-const selected = ref<any[]>([])
-
-watch(
-  () => props.selectedRows,
-  val => {
-    selected.value = val
-  },
-  { immediate: true },
-)
-
-watch(
-  selected,
-  val => {
-    emit('update:selectedRows', val)
-  },
-  { deep: true },
-)
-</script>
-
 <template>
   <q-page class="flex flex-col" style="min-height: 100%">
     <q-table
@@ -175,7 +114,65 @@ watch(
     </q-table>
   </q-page>
 </template>
+<script setup lang="ts">
+import { defineProps, defineEmits, ref, computed, watch } from 'vue'
+import type { Ref } from 'vue'
+import FilterIcon from '@/icons/components/table-filter-icon.vue'
+
+interface FilterOption {
+  id: string
+  name: string
+}
+
+interface TableEmits {
+  'toggle-filter-value': [colName: string, value: string]
+  'clear-filter': [colName: string]
+  'open-filter-menu': [colName: string, isOpen: boolean]
+  'row-click': [row: Record<string, any>]
+  'update:selectedRows': [rows: any[]] // синтаксис defineEmits для эмита с именованными параметрами
+}
+
+const props = defineProps<{
+  rows: Ref<any[]>
+  columns: any[]
+  columnFilters: Ref<Record<string, string | string[] | undefined>>
+  filterMenus: Ref<Record<string, boolean>>
+  filtersOptions: Record<string, FilterOption[]>
+  meta: Ref<{ currentPage: number; perPage: number }>
+  enableMultiSelect?: boolean
+  selectedRows: any[]
+}>()
+const emit = defineEmits<TableEmits>()
 
+const localSearches = ref<Record<string, string>>({})
+const selected = ref<any[]>([])
+
+const filteredOptions = computed(() => {
+  const result: Record<string, FilterOption[]> = {}
+  for (const col of props.columns) {
+    const search = localSearches.value[col.name]?.toLowerCase() || ''
+    const options = props.filtersOptions[col.name] || []
+    result[col.name] = options.filter(opt => opt.name.toLowerCase().includes(search))
+  }
+  return result
+})
+
+watch(
+  () => props.selectedRows,
+  val => {
+    selected.value = val
+  },
+  { immediate: true },
+)
+
+watch(
+  selected,
+  val => {
+    emit('update:selectedRows', val)
+  },
+  { deep: true },
+)
+</script>
 <style scoped lang="scss">
 .cursor-pointer {
   cursor: pointer;

package/src/common/app-table/AppTableLayout.vue

@@ -1,27 +1,3 @@
-<script setup lang="ts">
-import AppTable from './AppTable.vue'
-import AppTablePagination from '../app-table/components/TablePagination.vue'
-import AppTableSearch from '../app-table/components/TableSearch.vue'
-import { defineProps, defineEmits } from 'vue'
-
-const emit = defineEmits<{
-  'update:selectedRows': [rows: any[]]
-}>()
-const props = defineProps<{
-  search: string
-  loading: boolean
-  currentPage: number
-  totalPages: number
-  tableProps: any
-  tableEvents: any
-  onSearch: (val: string) => void
-  onPageChange: (page: number) => void
-  actionsSlot?: boolean
-  modalSlot?: boolean
-  selectedRows: any[]
-}>()
-</script>
-
 <template>
   <div class="table-layout">
     <div class="table-controls">
@@ -55,7 +31,29 @@ const props = defineProps<{
     <slot v-if="modalSlot" name="modal" />
   </div>
 </template>
+<script setup lang="ts">
+import AppTable from './AppTable.vue'
+import AppTablePagination from '../app-table/components/TablePagination.vue'
+import AppTableSearch from '../app-table/components/TableSearch.vue'
+import { defineProps, defineEmits } from 'vue'
 
+const props = defineProps<{
+  search: string
+  loading: boolean
+  currentPage: number
+  totalPages: number
+  tableProps: any
+  tableEvents: any
+  onSearch: (val: string) => void
+  onPageChange: (page: number) => void
+  actionsSlot?: boolean
+  modalSlot?: boolean
+  selectedRows: any[]
+}>()
+const emit = defineEmits<{
+  'update:selectedRows': [rows: any[]]
+}>()
+</script>
 <style scoped lang="scss">
 .table-layout {
   height: calc(100vh - 100px);

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

@@ -1,154 +1,3 @@
-<script setup lang="ts">
-import { ref, watch, defineProps, defineEmits, nextTick, computed } from 'vue'
-import AppModalSelect from '../components/ModalSelect.vue'
-import { useQuasar } from 'quasar'
-import { notificationSettings } from '@/utils/notification'
-
-const $q = useQuasar()
-
-type ModalMode = 'view' | 'edit' | 'create'
-type FieldType = 'text' | 'select'
-
-interface FieldOption {
-  label: string
-  value: string
-}
-
-interface FieldSchema {
-  key: string
-  label: string
-  type: FieldType
-  rules?: ((val: any) => boolean | string)[]
-  options?: FieldOption[]
-  placeholder?: string
-  onSearch?: (val: string) => void
-  onScroll?: () => void
-  loading?: boolean
-}
-
-const props = defineProps<{
-  modelValue: boolean
-  title: string
-  mode: ModalMode
-  fields: FieldSchema[]
-  initialData?: Record<string, any>
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', val: boolean): void
-  (e: 'submit', data: Record<string, any>): void
-  (e: 'edit'): void
-  (e: 'delete'): void
-}>()
-
-const formData = ref<Record<string, any>>({})
-const formRef = ref()
-
-watch(
-  () => props.modelValue,
-  val => {
-    if (val) {
-      formData.value = { ...(props.initialData ?? {}) }
-    }
-  },
-  { immediate: true },
-)
-function isEqual(a: any, b: any): boolean {
-  if (Array.isArray(a) && Array.isArray(b)) {
-    if (a.length !== b.length) return false
-    return a.every((item, i) => isEqual(item, b[i]))
-  }
-  if (typeof a === 'object' && typeof b === 'object') {
-    return JSON.stringify(a) === JSON.stringify(b)
-  }
-  return a === b
-}
-
-function normalizeValue(val: any): any {
-  if (Array.isArray(val)) {
-    return val.map(v => (typeof v === 'object' && v !== null ? v.value ?? v : v))
-  }
-  return typeof val === 'object' && val !== null ? val.value ?? val : val
-}
-
-function submit() {
-  formRef.value?.validate().then(ok => {
-    if (!ok) return
-
-    const changed: Record<string, any> = {}
-
-    for (const field of props.fields) {
-      const key = field.key
-      const current = formData.value[key]
-      const initial = props.initialData?.[key]
-
-      const normalizedCurrent = field.type === 'select' ? normalizeValue(current) : current
-      const normalizedInitial = field.type === 'select' ? normalizeValue(initial) : initial
-
-      if (!isEqual(normalizedCurrent, normalizedInitial)) {
-        changed[key] = normalizedCurrent
-      }
-    }
-
-    emit('submit', changed)
-  })
-}
-
-function handleClear(key: string) {
-  const field = props.fields.find(f => f.key === key)
-  formData.value[key] = field?.type === 'select' ? [] : ''
-
-  nextTick(() => {
-    formRef.value?.validate()
-  })
-}
-const isSubmitDisabled = computed(() => {
-  if (props.mode === 'view') return false
-
-  const hasEmptyRequired = props.fields.some(field => {
-    const isRequired = field.rules?.some(rule => rule('') !== true)
-    const val = formData.value[field.key]
-    const normalized = normalizeValue(val)
-
-    const empty =
-      normalized === null ||
-      normalized === undefined ||
-      (typeof normalized === 'string' && normalized.trim() === '') ||
-      (Array.isArray(normalized) && normalized.length === 0)
-
-    return isRequired && empty
-  })
-
-  if (hasEmptyRequired) return true
-
-  const hasChanges = props.fields.some(field => {
-    const key = field.key
-    const current = normalizeValue(formData.value[key])
-    const initial = normalizeValue(props.initialData?.[key])
-    return !isEqual(current, initial)
-  })
-
-  return !hasChanges
-})
-function uuidv4() {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    const r = (Math.random() * 16) | 0
-    const v = c === 'x' ? r : (r & 0x3) | 0x8
-    return v.toString(16)
-  })
-}
-
-function generateUuid() {
-  formData.value.uuid = uuidv4()
-}
-function copyToClipboard(text: string) {
-  navigator.clipboard.writeText(text).then(() => {
-    $q.notify(notificationSettings('success', 'UUID скопирован'))
-  })
-}
-const filteredOptions = ref<Record<string, FieldOption[]>>({})
-</script>
-
 <template>
   <q-dialog :model-value="modelValue" @update:model-value="val => emit('update:modelValue', val)">
     <q-card style="min-width: 700px">
@@ -243,6 +92,129 @@ const filteredOptions = ref<Record<string, FieldOption[]>>({})
     </q-card>
   </q-dialog>
 </template>
+
+<script setup lang="ts">
+import { ref, watch, defineProps, defineEmits, nextTick, computed } from 'vue'
+import { useQuasar } from 'quasar'
+import AppModalSelect from '../components/ModalSelect.vue'
+import { notificationSettings } from '@/utils/notification'
+import { isEqual, normalizeValue, uuidv4 } from '@/utils/helpers'
+
+type ModalMode = 'view' | 'edit' | 'create'
+type FieldType = 'text' | 'select'
+
+interface FieldOption {
+  label: string
+  value: string
+}
+interface FieldSchema {
+  key: string
+  label: string
+  type: FieldType
+  rules?: ((val: any) => boolean | string)[]
+  options?: FieldOption[]
+  placeholder?: string
+  onSearch?: (val: string) => void
+  onScroll?: () => void
+  loading?: boolean
+}
+
+const props = defineProps<{
+  modelValue: boolean
+  title: string
+  mode: ModalMode
+  fields: FieldSchema[]
+  initialData?: Record<string, any>
+}>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean): void
+  (e: 'submit', data: Record<string, any>): void
+  (e: 'edit'): void
+  (e: 'delete'): void
+}>()
+
+const $q = useQuasar()
+const formRef = ref()
+const formData = ref<Record<string, any>>({})
+const filteredOptions = ref<Record<string, FieldOption[]>>({})
+const isSubmitDisabled = computed(() => {
+  if (props.mode === 'view') return false
+
+  const hasEmptyRequired = props.fields.some(field => {
+    const isRequired = field.rules?.some(rule => rule('') !== true)
+    const val = formData.value[field.key]
+    const normalized = normalizeValue(val)
+
+    const empty =
+      normalized === null ||
+      normalized === undefined ||
+      (typeof normalized === 'string' && normalized.trim() === '') ||
+      (Array.isArray(normalized) && normalized.length === 0)
+
+    return isRequired && empty
+  })
+
+  if (hasEmptyRequired) return true
+
+  const hasChanges = props.fields.some(field => {
+    const key = field.key
+    const current = normalizeValue(formData.value[key])
+    const initial = normalizeValue(props.initialData?.[key])
+    return !isEqual(current, initial)
+  })
+
+  return !hasChanges
+})
+function submit() {
+  formRef.value?.validate().then(ok => {
+    if (!ok) return
+
+    const changed: Record<string, any> = {}
+
+    for (const field of props.fields) {
+      const key = field.key
+      const current = formData.value[key]
+      const initial = props.initialData?.[key]
+
+      const normalizedCurrent = field.type === 'select' ? normalizeValue(current) : current
+      const normalizedInitial = field.type === 'select' ? normalizeValue(initial) : initial
+
+      if (!isEqual(normalizedCurrent, normalizedInitial)) {
+        changed[key] = normalizedCurrent
+      }
+    }
+
+    emit('submit', changed)
+  })
+}
+function handleClear(key: string) {
+  const field = props.fields.find(f => f.key === key)
+  formData.value[key] = field?.type === 'select' ? [] : ''
+
+  nextTick(() => {
+    formRef.value?.validate()
+  })
+}
+function generateUuid() {
+  formData.value.uuid = uuidv4()
+}
+function copyToClipboard(text: string) {
+  navigator.clipboard.writeText(text).then(() => {
+    $q.notify(notificationSettings('success', 'UUID скопирован'))
+  })
+}
+
+watch(
+  () => props.modelValue,
+  val => {
+    if (val) {
+      formData.value = { ...(props.initialData ?? {}) }
+    }
+  },
+  { immediate: true },
+)
+</script>
+
 <style lang="scss">
 .custom-select-menu {
   max-height: 250px !important;

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

@@ -1,3 +1,27 @@
+<template>
+  <div class="table-pagination">
+    <button class="arrow-button" :disabled="modelValue <= 1" @click="prevPage">
+      <q-icon name="mdi-chevron-left" :color="modelValue <= 1 ? 'grey-4' : 'primary'" />
+    </button>
+
+    <div class="pages">
+      <button
+        v-for="page in pageArray"
+        :key="page"
+        class="page-button"
+        :class="{ selected: page === modelValue, ellipsis: page === '...' }"
+        :disabled="page === modelValue || page === '...'"
+        @click="changePage(page)"
+      >
+        {{ page }}
+      </button>
+    </div>
+
+    <button class="arrow-button" :disabled="modelValue >= totalPages" @click="nextPage">
+      <q-icon name="mdi-chevron-right" :color="modelValue >= totalPages ? 'grey-4' : 'primary'" />
+    </button>
+  </div>
+</template>
 <script setup lang="ts">
 import { computed } from 'vue'
 import { defineProps, defineEmits } from 'vue'
@@ -70,31 +94,6 @@ function nextPage() {
 }
 </script>
 
-<template>
-  <div class="table-pagination">
-    <button class="arrow-button" :disabled="modelValue <= 1" @click="prevPage">
-      <q-icon name="mdi-chevron-left" :color="modelValue <= 1 ? 'grey-4' : 'primary'" />
-    </button>
-
-    <div class="pages">
-      <button
-        v-for="page in pageArray"
-        :key="page"
-        class="page-button"
-        :class="{ selected: page === modelValue, ellipsis: page === '...' }"
-        :disabled="page === modelValue || page === '...'"
-        @click="changePage(page)"
-      >
-        {{ page }}
-      </button>
-    </div>
-
-    <button class="arrow-button" :disabled="modelValue >= totalPages" @click="nextPage">
-      <q-icon name="mdi-chevron-right" :color="modelValue >= totalPages ? 'grey-4' : 'primary'" />
-    </button>
-  </div>
-</template>
-
 <style scoped lang="scss">
 .pages {
   display: flex;

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

@@ -1,3 +1,11 @@
+<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>
+
 <script setup lang="ts">
 import { defineProps, defineEmits, ref, watch } from 'vue'
 
@@ -13,7 +21,10 @@ const emit = defineEmits<{
 
 const input = ref(props.modelValue)
 let debounceTimer: ReturnType<typeof setTimeout>
-
+const clearInput = () => {
+  input.value = ''
+  emit('search', '')
+}
 watch(
   () => props.modelValue,
   val => {
@@ -28,21 +39,8 @@ watch(input, val => {
     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;

package/src/utils/helpers.ts

@@ -0,0 +1,39 @@
+/**
+ * Сравнивает два значения на глубокое равенство.
+ * Поддерживает массивы, объекты и примитивы.
+ */
+export function isEqual(a: any, b: any): boolean {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false
+    return a.every((item, i) => isEqual(item, b[i]))
+  }
+  if (typeof a === 'object' && typeof b === 'object') {
+    return JSON.stringify(a) === JSON.stringify(b)
+  }
+  return a === b
+}
+
+/**
+ * Нормализует значение:
+ * - Если передан массив объектов, возвращает массив `.value` или сам объект.
+ * - Если передан объект, возвращает `.value` или сам объект.
+ * - Если примитив — возвращает без изменений.
+ */
+export function normalizeValue(val: any): any {
+  if (Array.isArray(val)) {
+    return val.map(v => (typeof v === 'object' && v !== null ? v.value ?? v : v))
+  }
+  return typeof val === 'object' && val !== null ? val.value ?? val : val
+}
+
+/**
+ * Генерирует UUID v4.
+ * Используется для идентификаторов временных сущностей.
+ */
+export function uuidv4(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0
+    const v = c === 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}