shared-ritm 1.2.52 → 1.2.53

package/package.json

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

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

@@ -3,6 +3,7 @@
     {{ label }}
     <span v-if="rules?.length && isShowRequired" class="required">*</span>
   </label>
+
   <q-select
     ref="select"
     v-model="selected"
@@ -51,7 +52,20 @@
     </template>
 
     <template #no-option>
-      <q-item>{{ emptyText }}</q-item>
+      <div class="q-pa-sm">
+        <q-item>
+          <q-item-section class="wrapper-empty-text">
+            {{ emptyText }}
+            <button
+              v-if="allowCreate && internalSearch && internalSearch.trim()"
+              class="add-new-items"
+              @click="handleCreateFromSearch"
+            >
+              Добавить
+            </button>
+          </q-item-section>
+        </q-item>
+      </div>
     </template>
 
     <template #option="scope">
@@ -67,7 +81,6 @@
 
 <script setup lang="ts">
 import { computed, defineEmits, defineProps, ref, Ref } from 'vue'
-
 type Option = Record<string, any>
 
 interface AppQSelectProps {
@@ -82,6 +95,7 @@ interface AppQSelectProps {
   loading?: boolean
   isShowRequired?: boolean
   isDisabled?: boolean
+  allowCreate?: boolean
   isSearch?: boolean
   showChip?: boolean
   chipColor?: string
@@ -93,10 +107,11 @@ interface AppQSelectProps {
 }
 
 const props = defineProps<AppQSelectProps>()
-const emit = defineEmits(['update:modelValue', 'update:scroll', 'update:search', 'clear'])
+const emit = defineEmits(['update:modelValue', 'update:scroll', 'update:search', 'clear', 'create'])
 
 const select = ref({})
 const lcText: Ref<string> = ref('')
+const internalSearch = ref('')
 
 const selected = computed({
   get() {
@@ -115,7 +130,12 @@ function handleClear() {
 }
 
 const filteredOptions = computed(() => {
-  const baseOptions = props.options.filter(x => x[props?.optionLabel || 'label'].toLowerCase().includes(lcText.value))
+  const labelKey = props.optionLabel || 'label'
+
+  const baseOptions = props.options.filter(x => {
+    const label = x[labelKey]
+    return typeof label === 'string' && label.toLowerCase().includes(lcText.value)
+  })
 
   if (props.loading) {
     return [
@@ -131,11 +151,27 @@ const filteredOptions = computed(() => {
   return baseOptions
 })
 
+function handleCreateFromSearch() {
+  const labelKey = props.optionLabel || 'label'
+  const valueKey = props.optionValue || 'value'
+
+  const trimmed = internalSearch.value?.trim()
+  if (!trimmed) return
+
+  const newOption = {
+    [labelKey]: trimmed,
+    [valueKey]: trimmed,
+  }
+  emit('create', newOption)
+  handleClear()
+}
+
 function filterFn(val: string, update: (cb: () => void) => void) {
   debouncedFilter(val, update)
 }
 
 const debouncedFilter = debounce((val: string, update: (cb: () => void) => void) => {
+  internalSearch.value = val
   emit('update:search', val)
   update(() => {
     lcText.value = val.toLowerCase()
@@ -151,10 +187,8 @@ function onScroll({ to, ref: qSelectRef }) {
 
 function debounce<T>(fn: T, ms) {
   let timeoutId
-
   return function (...args) {
     clearTimeout(timeoutId)
-
     return new Promise(resolve => {
       timeoutId = setTimeout(() => {
         resolve(fn(...args))
@@ -165,6 +199,21 @@ function debounce<T>(fn: T, ms) {
 </script>
 
 <style lang="scss" scoped>
+.wrapper-empty-text {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  .add-new-items {
+    background: #3f8cff;
+    color: #fff;
+    outline: none;
+    border: none;
+    border-radius: 4px;
+    padding: 5px 10px;
+    cursor: pointer;
+  }
+}
 .field-label {
   font-size: 14px;
   font-weight: 700;