flameresttable 1.0.106 → 1.0.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flameresttable",
-  "version": "1.0.106",
+  "version": "1.0.108",
   "main": "./src/plugin.ts",
   "repository": {
     "type": "git",
@@ -12,37 +12,39 @@
     "dev": "vite"
   },
   "dependencies": {
-    "@vuepic/vue-datepicker": "^7.4.1",
+    "@vuepic/vue-datepicker": "^11.0.1",
     "flamerest": "^1.0.109",
     "lodash-es": "^4.17.21",
-    "pinia": "^2.2.6",
+    "pinia": "^2.3.0",
     "pug": "github:FlameArt/pug-tailwind-only",
     "pug-lexer": "github:FlameArt/pug-lexer-only",
-    "sass": "^1.81.0",
-    "vue": "^3.3.7",
-    "vue-router": "^4.4.5",
-    "vue-select": "^4.0.0-beta.6"
+    "sass": "^1.83.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "vue-select": "^4.0.0-beta.6",
+    "vuetify": "^3.7.6",
+    "vuetify-pro-tiptap": "^2.5.7"
   },
   "devDependencies": {
-    "@heroicons/vue": "^2.1.5",
+    "@heroicons/vue": "^2.2.0",
     "@types/lodash-es": "^4.17.12",
     "@types/lodash.merge": "^4.6.9",
-    "@types/node": "20.8.9",
+    "@types/node": "22.10.5",
     "@types/vue-select": "^3.16.8",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "@vitejs/plugin-vue": "^4.6.2",
+    "@typescript-eslint/eslint-plugin": "^8.19.1",
+    "@typescript-eslint/parser": "^8.19.1",
+    "@vitejs/plugin-vue": "^5.2.1",
     "@volar/vue-language-plugin-pug": "^1.6.5",
-    "@vue/compiler-sfc": "^3.3.7",
+    "@vue/compiler-sfc": "^3.5.13",
     "autoprefixer": "^10.4.20",
-    "eslint": "^8.57.1",
-    "eslint-plugin-vue": "^8.7.1",
+    "eslint": "^9.18.0",
+    "eslint-plugin-vue": "^9.32.0",
     "postcss": "^8.4.49",
-    "postcss-import": "^14.1.0",
-    "tailwindcss": "^3.4.15",
-    "typescript": "^5.6.3",
-    "vite": "^4.5.5",
-    "vue-tsc": "^1.8.27",
+    "postcss-import": "^16.1.0",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.7",
+    "vue-tsc": "^2.2.0",
     "vue-universal-modal": "^1.1.4"
   },
   "rules": {}

package/src/App.vue

@@ -6,6 +6,7 @@ import Model from '@models/Testtable';
 import TableOpts from './Table/TableOpts';
 import Relatedtable from '@models/Relatedtable';
 import SubRow from './pages/SubRow.vue';
+import { useTheme } from 'vuetify'
 
 const store = storeFile(), router = useRouter(), route = useRoute();
 
@@ -23,7 +24,7 @@ onMounted(() => {
 const TableComponent = ref<InstanceType<typeof Table>>();
 const opts = new TableOpts;
 
-opts.set('name', { title: 'Название' });
+opts.set('name', { title: 'Название', Popup:{popupType: 'text'} });
 opts.set('dt1', { title: 'Дата 1' });
 opts.set('dt2', { title: 'Дата 2' });
 opts.set('id', { title: 'ID', Selector: { model: Relatedtable }, Filter: { isShow: true, type: 'selector', selector: { multiselect: true, mode: 'vertical' } } });
@@ -38,6 +39,7 @@ opts.set("name", {
   Popup: { isShow: true }
 });
 
+const theme = useTheme()
 
 opts.addVirtual('test', { title: 'test title', Table: { isShow: true, } })
 opts.addVirtual('date', { title: 'dt', Filter: { isShow: true, type: 'number' }, Table: { isShow: true, } })

package/src/Table/FlameTable.ts

@@ -447,6 +447,8 @@ export default class FlameTable<T> {
       if (findedIdx !== -1) {
         this.Rows.rows[findedIdx] = reactive(res.data as any);
         this.RowsParams[columns[indexKey]].previousAttributes = res.data;
+
+        // TODO: тут можно очищать Event в columns.Popup, что бы он не пересохранял при повторном сохранении
       }
     }
 

package/src/Table/Table.vue

@@ -40,7 +40,7 @@
               !==
               '' ?
               column.Table.title : column.title !== '' ? column.title :
-                column.name }}</span>
+              column.name }}</span>
           </div>
           <div v-if="opts.Edit.can" class="table-cell  w-[93px] border-r border-r-slate-100 px-2">
             <button class="bg-green-600 invisible">
@@ -129,8 +129,7 @@
             <div class="text-xs text-slate-400">{{ Table.columns[column].Popup.desc }}</div>
           </div>
 
-          <div
-            v-if="Table.columns[column].Popup.popupType === 'string' || Table.columns[column].Popup.popupType === 'text'"
+          <div v-if="Table.columns[column].Popup.popupType === 'string'"
             class="flex-1 mr-5 w-full flex flex-col self-stretch">
             <input v-model="Table.columns[column].Popup.model"
               class="h-full self-stretch py-1 px-2 w-full outline-none border border-slate-100" type="text"
@@ -149,7 +148,7 @@
               <option v-for="(selectorVal, selectorKey) in Table.columns[column].Popup.Selector.values"
                 :key="'sel_' + selectorKey"
                 :value="getSelector(Table.columns[column].Popup.Selector.values, selectorKey, selectorVal)[1]">{{
-                  getSelector(Table.columns[column].Popup.Selector.values, selectorKey, selectorVal)[0] }}</option>
+                getSelector(Table.columns[column].Popup.Selector.values, selectorKey, selectorVal)[0] }}</option>
             </select>
           </div>
 
@@ -198,8 +197,22 @@
             </label>
           </div>
 
+          <div class="flex-1 mr-5 w-full flex flex-col self-stretch"
+            v-if="Table.columns[column].Popup.popupType === 'text'">
+            <EditorPopup :value="Table.columns[column].Popup.model" @save="PopupTextSaved" :column="column" :title="Table.columns[column].Popup.title ?? column">
+
+            </EditorPopup>
+          </div>
+
+          <!-- ОШИБКИ СОХРАНЕНИЯ -->
+          <div class="mx-2 my-1 text-red-600" v-if="(typeof popupErrors[column]!== 'undefined')">{{ popupErrors[column]
+            }}</div>
+
         </label>
 
+        <div class="text-red-600 mx-2 my-1" v-if="(typeof popupErrors['globalErrorStack']!== 'undefined')">{{
+          popupErrors['globalErrorStack'] }}</div>
+
         <!-- КНОПКИ СОХРАНЕНИЯ-->
         <div class="flex w-full mt-3 mb-2 justify-between items-center">
           <div v-show="$props.opts?.Add.can"
@@ -226,6 +239,7 @@ import { XCircleIcon } from '@icons/24/solid'
 import { computed } from '@vue/reactivity';
 import { Column, IColumn } from './Columns';
 import { defineComponent } from 'vue';
+
 import TableOpts from './TableOpts';
 import FlameTable from './FlameTable';
 import ModalVue from './../components/default/Modal.vue';
@@ -238,10 +252,11 @@ import '@vuepic/vue-datepicker/dist/main.css';
 import { isNumber } from 'lodash';
 import 'vue-select/dist/vue-select.css';
 import TableTasksPanel from './TableTasksPanel.vue';
-
+import EditorPopup from '../components/editor/EditorPopup.vue';
+import { title } from 'process';
 
 export default defineComponent({
-  components: { ModalVue, Paginator, Datepicker, TableFilters, TableTasksPanel },
+  components: { ModalVue, Paginator, Datepicker, TableFilters, TableTasksPanel, EditorPopup },
   props: {
     rows: {
       default: [] as Array<any>,
@@ -265,6 +280,9 @@ export default defineComponent({
 
     const ColumnNames = Object.keys(Table.model as any);
 
+    // Ошибки сохранения
+    let popupErrors: {[key:string]:string} = reactive({});
+
     // Добавляем событие скролла
 
     /**
@@ -308,8 +326,21 @@ export default defineComponent({
         else {
           await Table.save()
         }
+        popupErrors={};
+      }
+      catch (ex: any) { 
+
+        for (const keyx in popupErrors) 
+          delete popupErrors[keyx];
+        
+        if(typeof ex.stack !== 'undefined' && typeof ex.message !== 'undefined') {
+          popupErrors.globalErrorStack = ex.message;
+        }
+        else
+          Object.assign(popupErrors, ex);
+
+        return; 
       }
-      catch (Ex) { return; }
 
       FlameTableModal.value?.close();
 
@@ -380,6 +411,10 @@ export default defineComponent({
       return Table.RowsParams[row[primaryKey]].collapsed
     }
 
+    const PopupTextSaved = (txt: string, column: string)=> {
+      Table.columns[column].Popup.model = txt;
+    }
+
     const MainTableElement = ref();
 
 
@@ -397,7 +432,12 @@ export default defineComponent({
       primaryKey,
       columnClick,
       isRowCollapsed,
-      MainTableElement
+      MainTableElement,
+
+      // TODO: проверить
+      popupErrors,
+
+      PopupTextSaved
     }
 
   },

package/src/components/default/Modal.vue

@@ -3,7 +3,7 @@
 // УНИВЕРСАЛЬНОЕ МОДАЛЬНОЕ ОКНО
   Позволяет вызывать себя через show() и close()
 
-CustomModal.overall(v-model="isShow" :close="close" style="z-index: 999999;")
+CustomModal.overall(v-model="isShow" :close="close" style="z-index: 999;")
 
   // Этот слот для замены самого окна
   slot

package/src/components/editor/EditorPopup.vue

@@ -0,0 +1,104 @@
+<template>
+  <v-dialog class="z-[9999999]" v-model="state.dialog" max-width="400" persistent>
+    <div class="text-slate-500">
+    </div>
+    <template v-slot:activator="{ props: activatorProps }">
+      <v-btn v-bind="activatorProps">
+        Изменить
+      </v-btn>
+    </template>
+
+    <v-card prepend-icon="mdi-map-marker" :title="'Изменить: ' + $props.title">
+
+      <VuetifyTiptap ref="VuetifyTiptapRef" v-model="state.data" />
+
+
+      <template v-slot:actions>
+        <v-spacer></v-spacer>
+
+        <v-btn @click="state.dialog = false">
+          Отмена
+        </v-btn>
+
+        <v-btn @click="saveButton()">
+          Сохранить
+        </v-btn>
+      </template>
+    </v-card>
+  </v-dialog>
+
+
+</template>
+
+<script lang="ts">
+import { onMounted, reactive, ref, defineProps, defineEmits, nextTick, defineComponent } from '@vue/runtime-core'; import type { Ref } from 'vue'; import { storeFile } from "@/store"; import { useRoute, useRouter } from 'vue-router'; import REST from "flamerest";
+import { vuetifyProTipTap } from './TextEditor'
+// Иконки
+import { } from '@icons/24/solid'
+
+export default defineComponent({
+
+  name: 'EditorPopup',
+
+  components: { vuetifyProTipTap },
+
+  props: {
+    title: {
+      type: String,
+      default: "",
+      required: false
+    },
+    column: {
+      type: String,
+      default: "",
+      required: true
+    },
+    value: {
+      type: String,
+      default: "",
+      required: true
+    },
+    closeButton: {
+      type: String,
+      default: "",
+      required: false
+    },
+  },
+
+  emits: [
+    'save'
+  ],
+
+  setup(props, { emit }) {
+
+    // Глобальное хранилище, роуты, локали
+    const store = storeFile(), router = useRouter(), route = useRoute();
+
+    // Входящие данные компонента
+    //const emit = defineEmits(['save'])
+
+    // Локальное состояние компонента
+    const state = reactive({
+      data: "",
+      dialog: false
+    })
+
+    const saveButton = () => {
+      state.dialog = false;
+      emit('save', state.data, props.column);
+    }
+
+    state.data = props.value;
+
+    return {
+      state,
+      store,
+      saveButton
+    }
+  },
+
+})
+
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/editor/LinkDialog.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { Editor } from '@tiptap/vue-3'
+import { computed, ref, watch, withDefaults, defineProps } from 'vue'
+import { locale } from 'vuetify-pro-tiptap'
+
+interface LinkAttrs {
+   href?: string
+   target?: '_self' | '_blank'
+   rel?: string
+}
+
+interface Props {
+   value?: string
+   target?: '_self' | '_blank'
+   rel?: string
+   editor: Editor
+   destroy?: () => void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+   value: undefined,
+   target: '_blank',
+   rel: undefined,
+   destroy: undefined
+})
+
+const generateLinkAttrs = (): LinkAttrs => ({
+   href: '',
+   target: '_blank',
+   rel: ''
+})
+
+const attrs = ref(generateLinkAttrs())
+
+const dialog = ref<boolean>(false)
+
+const isDisabled = computed(() => {
+   const { href, target, rel } = attrs.value
+   if (!href) return true
+
+   return props.value === href && props.target === target && props.rel === rel
+})
+
+function apply() {
+   const { href, target, rel } = attrs.value
+
+   if (href) {
+      props.editor.chain().focus().extendMarkRange('link').setLink({ href, target, rel }).run()
+   }
+   close()
+}
+
+function close() {
+   dialog.value = false
+   attrs.value = generateLinkAttrs()
+
+   setTimeout(() => props.destroy?.(), 300)
+}
+
+watch(dialog, val => {
+   if (!val) return
+
+   attrs.value = {
+      href: props.value,
+      target: props.target,
+      rel: props.rel
+   }
+})
+</script>
+
+<template>
+   <VDialog v-model="dialog" max-width="400" activator="parent" @click:outside="close">
+      <VCard>
+         <VToolbar class="px-6" density="compact">
+            <span class="headline">{{ locale.message[locale.lang]['editor.link.dialog.title'] }}</span>
+
+            <VSpacer />
+
+            <VBtn class="mx-0" icon @click="close">
+               <VIcon icon="$close" />
+            </VBtn>
+         </VToolbar>
+
+         <VCardText>
+            <div>This is a custom dialog component;</div>
+
+            <div>please use the <strong>dialogComponent</strong> parameter.</div>
+
+            <VTextField v-model="attrs.href" :label="locale.message[locale.lang]['editor.link.dialog.link']"
+               autofocus />
+
+            <VTextField v-model="attrs.rel" :label="locale.message[locale.lang]['editor.link.dialog.rel']"
+               hide-details />
+
+            <VCheckbox v-model="attrs.target" :label="locale.message[locale.lang]['editor.link.dialog.openInNewTab']"
+               color="primary" false-value="_self" true-value="_blank" hide-details />
+         </VCardText>
+
+         <VCardActions>
+            <VBtn :disabled="isDisabled" @click="apply">
+               {{ locale.message[locale.lang]['editor.link.dialog.button.apply'] }}
+            </VBtn>
+         </VCardActions>
+      </VCard>
+   </VDialog>
+</template>

package/src/components/editor/SelectImage.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed, unref, watch, withDefaults, defineProps, defineEmits } from 'vue'
+
+interface SelectImageProps {
+  modelValue?: Record<string, string>
+  upload?: (file: File) => Promise<string> // vue warn
+  t: (path: string) => string // vue warn
+}
+
+interface SelectImageEmits {
+  (event: 'update:modelValue', form?: Record<string, string>): void
+}
+
+const props = withDefaults(defineProps<SelectImageProps>(), {
+  modelValue: () => ({}),
+  upload: undefined
+})
+
+const emits = defineEmits<SelectImageEmits>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: val => {
+    emits('update:modelValue', val)
+  }
+})
+
+const items = [
+  { alt: 'Test 1', src: 'https://picsum.photos/1920/1080.webp?t=1' },
+  { alt: 'Test 2', src: 'https://picsum.photos/1920/1080.webp?t=2' },
+  { alt: 'Test 3', src: 'https://picsum.photos/1920/1080.webp?t=3' }
+]
+
+watch(
+  () => unref(form).src,
+  val => {
+    const find = items.find(k => k.src === val)
+    if (find) {
+      form.value.alt = find.alt
+    }
+  }
+)
+</script>
+
+<template>
+  <VAlert class="mb-4" type="info" text="Select tab is custom component" />
+
+  <VSelect v-model="form.src" label="Select Image" :items="items" item-value="src" item-title="alt" />
+
+  <VTextField v-model="form.alt" label="Alt" />
+
+  <VCheckbox v-model="form.lockAspectRatio" label="Lock original aspect ratio" />
+</template>

package/src/components/editor/TextEditor.ts

@@ -0,0 +1,129 @@
+import { NODE_TYPE_MENU } from './TextEditorConstants.js'
+import { markRaw } from 'vue'
+import {
+   BaseKit,
+   Blockquote,
+   Bold,
+   BulletList,
+   Clear,
+   Code,
+   CodeBlock,
+   Color,
+   createVuetifyProTipTap,
+   defaultBubbleList,
+   FontFamily,
+   FontSize,
+   Fullscreen,
+   Heading,
+   Highlight,
+   History,
+   HorizontalRule,
+   Image,
+   Indent,
+   Italic,
+   Link,
+   MarkdownTheme,
+   OrderedList,
+   Strike,
+   SubAndSuperScript,
+   Table,
+   TaskList,
+   TextAlign,
+   Underline,
+   Video,
+   VuetifyTiptap,
+   VuetifyViewer
+} from 'vuetify-pro-tiptap'
+import LinkDialog from './LinkDialog.vue'
+
+import SelectImage from './SelectImage.vue'
+/*
+ * @Date: 2023-05-11 22:14:19
+ * @LastEditors: yikoyu 2282373181@qq.com
+ * @LastEditTime: 2023-06-13 20:39:47
+ * @FilePath: \vuetify-pro-tiptap\examples\tiptap.ts
+ */
+import 'vuetify-pro-tiptap/styles/editor.css'
+
+import 'vuetify-pro-tiptap/styles/markdown.css'
+import './styles/github.scss'
+
+import './styles/maidragon.scss'
+
+export const vuetifyProTipTap = createVuetifyProTipTap({
+   lang: 'ru',
+   markdownTheme: 'github',
+   components: {
+      VuetifyTiptap,
+      VuetifyViewer
+   },
+   extensions: [
+      BaseKit.configure({
+         placeholder: {
+            placeholder: 'Enter some text...'
+         },
+         /*
+         bubble: {
+            // default config
+            list: {
+               ...NODE_TYPE_MENU
+            },
+            defaultBubbleList: editor => {
+               // You can customize the bubble menu here
+               return defaultBubbleList(editor) // default customize bubble list
+            }
+         }*/
+      }),
+      Bold,
+      Italic,
+      Underline,
+      Strike,
+      Code.configure({ divider: true }),
+      Heading,
+      TextAlign,
+      FontFamily,
+      FontSize,
+      Color,
+      Highlight.configure({ divider: true }),
+      SubAndSuperScript.configure({ divider: true }),
+      Clear.configure({ divider: true }),
+      BulletList,
+      OrderedList,
+      TaskList,
+      Indent.configure({ divider: true }),
+      Link.configure({
+         dialogComponent: () => LinkDialog
+      }),
+      Image.configure({
+         imageTabs: [{ name: 'SELECT', component: markRaw(SelectImage) }],
+         width: 500,
+         // hiddenTabs: ['upload'],
+         upload(file: File) {
+            const url = URL.createObjectURL(file)
+            console.log('mock upload api :>> ', url)
+            return Promise.resolve(url)
+         }
+      }),
+      Video,
+      Table.configure({ divider: true }),
+      Blockquote,
+      HorizontalRule,
+      CodeBlock.configure({ divider: true }),
+      History.configure({ divider: true }),
+      MarkdownTheme.configure({
+         markdownThemes: [
+            {
+               title: 'Github',
+               value: 'github'
+            },
+            {
+               title: 'Maidragon',
+               value: 'maidragon'
+            }
+         ]
+      }),
+      Fullscreen.configure({
+         useWindow: true
+      })
+   ]
+})