eztech-core-components 1.0.0

package/comps/CoreCkeditor.vue

@@ -0,0 +1,324 @@
+<template>
+  <ckeditor
+    v-if="visible"
+    v-model="modelValue"
+    :config="editorConfig"
+    :editor-url="editorUrl"
+    @blur="onEditorBlur"
+  />
+</template>
+<script>
+// https://ckeditor.com/latest/samples/toolbarconfigurator/#basic
+import { mapGetters } from 'vuex'
+export default {
+  name: 'CoreCkeditor',
+  props: {
+    value: { type: String, default: '' },
+    isSimple: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    pageSize: { type: String, default: 'A4' },
+    isPdf: { type: Boolean, default: false },
+    height: { type: Number, default: null },
+    pagePaddingLeft: { type: String, default: '20mm' },
+    pagePaddingRight: { type: String, default: '20mm' },
+    pagePaddingTop: { type: String, default: '10mm' },
+    pagePaddingBottom: { type: String, default: '10mm' },
+    writingMode: { type: String, default: 'horizontal-tb' }
+  },
+  data () {
+    return {
+      visible: true,
+      timeout: 0,
+      a4Widthpx: '794px',
+      a5Widthpx: '561px',
+      conclusion: {
+        paddingLeft: '20mm',
+        paddingRight: '25pt'
+      }
+    }
+  },
+  computed: {
+    bodyTableStyle () {
+      if (this.writingMode === 'horizontal-tb') {
+        return `table {
+          border-collapse: collapse;
+          max-width: 100%;
+        }`
+      } else {
+        return `table {
+          border-collapse: collapse;
+          max-height: 100%;
+        }`
+      }
+    },
+    bodyFontDefaultSize () {
+      if (this.writingMode === 'horizontal-tb') {
+        return '11'
+      }
+      return '10'
+    },
+    bodyFontNames () {
+      if (this.writingMode === 'horizontal-tb') {
+        return 'Arial; Times New Roman'
+      }
+      return 'MongolianScript; \'Mongolian Baiti\'; Arial; Times New Roman'
+    },
+    bodyFontDefault () {
+      if (this.writingMode === 'horizontal-tb') {
+        return 'Arial'
+      }
+      return 'MongolianScript'
+    },
+    bodyFontFamily () {
+      if (this.writingMode === 'horizontal-tb') {
+        return 'Arial'
+      }
+      return 'MongolianScript, \'Mongolian Baiti\', Arial'
+    },
+    htmlPadding () {
+      if (this.writingMode === 'horizontal-tb') {
+        return 'padding-top: 20px; padding-bottom: 20px;'
+      }
+      return 'padding-left: 20px; padding-right: 20px;'
+    },
+    bodyMargin () {
+      if (this.writingMode === 'horizontal-tb') {
+        return 'margin-top: 20px; margin-bottom: 20px;'
+      }
+      return 'margin-left: 20px; margin-right: 20px;'
+    },
+    bodyPadding () {
+      if (this.writingMode === 'horizontal-tb') {
+        return `padding-top: ${this.pagePaddingTop};
+          padding-bottom: ${this.pagePaddingBottom};
+          padding-left: ${this.pagePaddingLeft};
+          padding-right: ${this.pagePaddingRight};`
+      }
+      return `padding-left: ${this.pagePaddingTop};
+          padding-right: ${this.pagePaddingBottom};
+          padding-top: ${this.pagePaddingLeft};
+          padding-bottom: ${this.pagePaddingRight};`
+    },
+    htmlHeight () {
+      if (this.writingMode === 'horizontal-tb') {
+        return ''
+      }
+      return 'height: 820px; overflow:auto;'
+    },
+    bodyHeight () {
+      if (this.writingMode === 'horizontal-tb') {
+        return 'auto'
+      } else {
+        return this.pageSize === 'A4' ? this.a4Widthpx : this.a5Widthpx
+      }
+    },
+    bodyWidth () {
+      if (this.writingMode === 'horizontal-tb') {
+        return this.pageSize === 'A4' ? this.a4Widthpx : this.a5Widthpx
+      } else {
+        return 'auto'
+      }
+    },
+    bodyMaxWidth () {
+      if (this.writingMode === 'horizontal-tb') {
+        return this.pageSize === 'A4' ? this.a4Widthpx : this.a5Widthpx
+      } else {
+        return 'auto'
+      }
+    },
+    bodyMinWidth () {
+      if (this.writingMode === 'horizontal-tb') {
+        return this.pageSize === 'A4' ? this.a4Widthpx : this.a5Widthpx
+      } else {
+        return '500px'
+      }
+    },
+    bodyMaxHeight () {
+      if (this.writingMode === 'horizontal-tb') {
+        return 'auto'
+      } else {
+        return this.pageSize === 'A4' ? this.a4Widthpx : this.a5Widthpx
+      }
+    },
+    bodyMinHeight () {
+      if (this.writingMode === 'horizontal-tb') {
+        return '300px'
+      } else {
+        return this.pageSize === 'A4' ? this.a4Widthpx : this.a5Widthpx
+      }
+    },
+    bodyLineheightDefault () {
+      if (this.writingMode === 'horizontal-tb') {
+        return '1.15'
+      }
+      return '1.75'
+    },
+    ...mapGetters('settings', ['env']),
+    editorUrl () {
+      return `${this.env.routerBase}/ckeditor/ckeditor.js`
+    },
+    editorConfig () {
+      const config = {
+        language: 'mn',
+        height: this.height,
+        // tabSpaces: 8,
+        readOnly: this.readonly || this.disabled,
+        toolbarCanCollapse: false,
+        autoGrow_onStartup: true,
+        autoGrow_minHeight: 400, // Optional: Set a minimum height
+        autoGrow_maxHeight: 1000, // Optional: Set a maximum height
+        autoGrow_bottomSpace: 50, // Optional: Add space at the bottom
+        allowedContent: true,
+        disallowedContent: 'script; *[on*]',
+        extraAllowedContent: [
+          'p', 'a', 'img', 'strong', 'span', 'div',
+          'em', 'ol', 'ul', 'li',
+          'table', 'tr', 'td', 'thead', 'tbody', 'th',
+          'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+          'sup', 's', 'u', 'blockquote', 'br', 'hr'
+        ].join(' '),
+        contentsCss: [
+          '/ckeditor/ckcontent.css',
+          'data:text/css;charset=utf-8,' +
+          (this.isSimple
+            ? encodeURIComponent(`
+              html {
+                background-color: ${this.disabled ? '#FFFFFF' : '#f9fbfd'};
+              }
+              body {
+                font-family: ${this.bodyFontFamily};
+                font-size: ${this.bodyFontDefaultSize}pt;
+              }
+            `)
+            : encodeURIComponent(`
+            html {
+              background-color: #f9fbfd;
+              /* display: flex; */
+              /* justify-content: center; */
+              /* box-sizing: border-box !important; */
+              /* ${this.htmlPadding} */
+              /* ${this.htmlHeight} */
+            }
+            body {
+              font-family: ${this.bodyFontFamily};
+              font-size: ${this.bodyFontDefaultSize}pt;
+              color: #222222;
+              line-height: ${this.bodyLineheightDefault};
+              background: white;
+              /* border: 1px solid #c7c7c7; */
+              /* outline: 1px solid #c7c7c7; */
+              height: ${this.bodyHeight} !important;
+              width: ${this.bodyWidth} !important;
+              min-width: ${this.bodyMinWidth} !important;
+              max-width: ${this.bodyMaxWidth} !important;
+              min-height: ${this.bodyMinHeight} !important;
+              max-height: ${this.bodyMaxHeight} !important;
+              /* margin: 0px !important; */
+              box-sizing: border-box !important;
+              writing-mode: ${this.writingMode};
+              ${this.bodyPadding}
+              margin: 0.5cm auto;
+              border-radius: 5px;
+              border: 1px #D3D3D3 solid;
+              box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+            }
+            ${this.bodyTableStyle}
+            th, td {
+              padding-top: 1px;
+              padding-bottom: 2px;
+              padding-left: 4px;
+              padding-right: 4px;
+            }
+          `))
+        ],
+        resize_enabled: false,
+        extraPlugins: 'lineheight,clipboard,simage,table,pagebreak,justify,textindent,uploadimage',
+        removePlugins: 'elementspath, easyimage, cloudservices, exportpdf, iframe, flash, sourcearea',
+        uiColor: '#FFFFFF',
+        font_defaultLabel: this.bodyFontDefault,
+        fontSize_defaultLabel: this.bodyFontDefaultSize,
+        line_height: '1;1.15;1.2;1.5;1.75;2;2.5;3',
+        lineheight_defaultLabel: this.bodyLineheightDefault,
+        font_names: this.bodyFontNames,
+        fontSize_sizes: '8/8pt;9/9pt;10/10pt;11/11pt;12/12pt;14/14pt;16/16pt;18/18pt;20/20pt;24/24pt;26/26pt;28/28pt;36/36pt;48/48pt;72/72pt',
+        table: {
+          contentToolbar: [
+            'tableColumn', 'tableRow', 'mergeTableCells',
+            'tableProperties', 'tableCellProperties'
+          ],
+          defaultTableAttributes: {
+            border: '1'
+          },
+          defaultTableCellAttributes: {
+            width: '100px'
+          }
+        },
+        coreStyles_bold: { element: 'b', overrides: 'strong' },
+        toolbar: [],
+        imageUploadURL: '/api/file/upload/ckeditor?upload=1',
+        filebrowserUploadUrl: '/api/file/upload/ckeditor?upload=1',
+        filebrowserUploadMethod: 'form'
+      }
+      if (this.isSimple) {
+        config.toolbar = [
+          { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
+          { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] }
+        ]
+      } else {
+        config.toolbar = [
+          { name: 'clipboard', items: ['Undo', 'Redo'] },
+          { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'] },
+          { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
+          { name: 'insert', items: ['Table', 'Image', 'HorizontalRule', 'SpecialChar', 'UploadFile'] },
+          { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize', 'lineheight'] },
+          { name: 'colors', items: ['TextColor', 'BGColor'] },
+          { name: 'tools', items: ['Maximize', 'PageBreak'] },
+          { name: 'links', items: ['Link', 'Unlink'] }
+        ]
+      }
+      // config.toolbar = [
+      //   { name: 'clipboard', items: ['Undo', 'Redo'] },
+      //   { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'] },
+      //   { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
+      //   { name: 'insert', items: ['Table', 'Image', 'HorizontalRule', 'SpecialChar', 'UploadFile'] },
+      //   { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize', 'lineheight'] },
+      //   { name: 'colors', items: ['TextColor', 'BGColor'] },
+      //   { name: 'tools', items: ['Maximize', 'PageBreak'] },
+      //   { name: 'document', items: ['NewPage', 'Preview', '-', 'Templates'] },
+      //   { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
+      //   { name: 'editing', items: ['Scayt'] }
+      // ]
+      return config
+    },
+    modelValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        const newVal = val?.replace(/[\u200B\u00A0\u200E\u200F]/g, ' ')
+        if (val && (val.trim().endsWith('</ol>') || val.trim().endsWith('</ul>'))) {
+          this.$emit('input', newVal + '<p></p>')
+        } else {
+          this.$emit('input', newVal)
+        }
+      }
+    }
+  },
+  watch: {
+    // pageSize () {
+    //   const that = this
+    //   that.visible = false
+    //   clearTimeout(that.timeout)
+    //   that.timeout = setTimeout(() => {
+    //     that.visible = true
+    //   }, 200)
+    // }
+  },
+  methods: {
+    onEditorBlur ($event) {
+      this.$emit('blur', $event)
+    }
+  }
+}
+</script>

package/comps/CoreColorPicker.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="flex gap-2">
+    <el-color-picker
+      v-model="modelValue"
+      :disabled="col.disabled"
+      :size="size"
+    />
+    <el-input
+      v-model="modelValue"
+      :disabled="col.disabled"
+      :size="size"
+      placeholder="Өнгө сонгоно уу"
+    />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    disabled: { type: Boolean, default: false },
+    placeholder: { type: String, default: 'Өнгө сонгоно уу' },
+    size: { type: String, default: null },
+    value: { type: String, default: null }
+  },
+  computed: {
+    modelValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

package/comps/CoreContextMenu.vue

@@ -0,0 +1,81 @@
+<template>
+  <div
+    v-show="visible"
+    ref="menu"
+    :style="{ top: `${position.y}px`, left: `${position.x}px` }"
+    class="fixed shadow-lg z-50 bg-white rounded-lg text-corePrimaryText text-base min-w-48"
+    @contextmenu.prevent=""
+  >
+    <div
+      v-for="(item, index) in items"
+      :key="index"
+      :class="['px-2 cursor-pointer py-1 hover:bg-coreBgHover flex flex-row gap-2 items-center first:rounded-t-lg last:rounded-b-lg', {
+        'justify-center border-t': ['DELETE', 'REMOVE'].includes(item.code)
+      }]"
+      @click.prevent.stop="handleMenuClick(item)"
+    >
+      <i :class="[item.icon || 'el-icon-check', 'text-coreSecondaryText']" />
+      {{ item.name }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      visible: false,
+      position: { x: 0, y: 0 },
+      items: []
+    }
+  },
+  methods: {
+    showMenu (items, event) {
+      this.items = items
+      // Get viewport dimensions
+      const viewportWidth = window.innerWidth
+      const viewportHeight = window.innerHeight
+
+      // Menu dimensions (measured dynamically)
+      const menuWidth = this.$refs.menu.offsetWidth || 150 // Fallback to a default width
+      const menuHeight = this.$refs.menu.offsetHeight || 150 // Fallback to a default height
+      let posX = event.clientX
+      let posY = event.clientY
+      if (posX + menuWidth > viewportWidth) {
+        posX = viewportWidth - menuWidth - 10 // 10px padding
+      }
+      if (posY + menuHeight > viewportHeight) {
+        posY = viewportHeight - menuHeight - 10 // 10px padding
+      }
+      this.position = { x: posX, y: posY }
+      this.visible = true
+      document.addEventListener('click', this.handleOutsideClick)
+    },
+    hideMenu () {
+      this.visible = false
+      document.removeEventListener('click', this.handleOutsideClick)
+    },
+    handleMenuClick (menuItem) {
+      this.$emit('menu-click', menuItem)
+      this.hideMenu()
+    },
+    handleOutsideClick (event) {
+      if (!this.$refs.menu?.contains(event.target)) {
+        this.hideMenu()
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.context-menu {
+  position: fixed;
+  z-index: 9999;
+  background: #fff;
+  border: 1px solid #ddd;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  min-width: 150px;
+}
+</style>

package/comps/CoreDate.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="relative">
+    <el-date-picker
+      v-model="modelValue"
+      :size="size"
+      :disabled="disabled"
+      :type="type"
+      :format="format"
+      :value-format="valueFormat"
+      class="w-full"
+      :picker-options="pickerOptions"
+      @change="($event) => $emit('change', $event)"
+    />
+    <div v-if="col_field" class="absolute -bottom-4 text-xs font-medium text-coreSecondaryText">
+      {{ diffDays }}
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { get } from 'lodash'
+import { getStringDate, diffBusinessDays } from '../utils/data-helper'
+export default {
+  name: 'CoreDate',
+  props: {
+    parentTemp: { type: Object, default: () => { return null } },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: null },
+    value: { type: [Date, String, Array], default: null },
+    format: { type: String, default: 'yyyy-MM-dd' },
+    valueFormat: { type: String, default: 'yyyy-MM-dd' },
+    col_field: { type: String, default: '' },
+    pickerOptions: { type: Object, default: () => { return null } },
+    type: { type: String, default: 'date' }
+  },
+  computed: {
+    ...mapGetters(['holidays']),
+    modelValue: {
+      get () {
+        return getStringDate(this.value)
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    },
+    diffDays () {
+      const startDateField = this.col_field?.replace('end_date', 'start_date')
+      const startDateVal = get(this.parentTemp, startDateField)
+      if (startDateVal && this.value) {
+        return diffBusinessDays(startDateVal, this.value, this.holidays) + ' ажлын өдөр байна.'
+      }
+      return ''
+    }
+  }
+}
+</script>

package/comps/CoreDateRange.vue

@@ -0,0 +1,34 @@
+<template>
+  <el-date-picker
+    v-model="modelValue"
+    :size="size"
+    :disabled="disabled"
+    type="daterange"
+    :format="format"
+    :value-format="valueFormat"
+    class="w-full"
+  />
+</template>
+<script>
+// import { getStringDate } from '../utils/data-helper'
+export default {
+  name: 'CoreDateRange',
+  props: {
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: null },
+    value: { type: [Date, String, Array], default: null },
+    format: { type: String, default: 'yyyy-MM-dd' },
+    valueFormat: { type: String, default: 'yyyy-MM-dd' }
+  },
+  computed: {
+    modelValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

package/comps/CoreDatetime.vue

@@ -0,0 +1,34 @@
+<template>
+  <el-date-picker
+    v-model="modelValue"
+    :size="size"
+    :disabled="disabled"
+    type="datetime"
+    :format="format"
+    :value-format="valueFormat"
+    class="w-full"
+  />
+</template>
+<script>
+import { getStringDatetime } from '../utils/data-helper'
+export default {
+  name: 'CoreDateTime',
+  props: {
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: null },
+    value: { type: [Date, String], default: null },
+    format: { type: String, default: 'yyyy-MM-dd HH:mm' },
+    valueFormat: { type: String, default: 'yyyy-MM-dd HH:mm' }
+  },
+  computed: {
+    modelValue: {
+      get () {
+        return getStringDatetime(this.value)
+      },
+      set (val) {
+        this.$emit('input', val)
+      }
+    }
+  }
+}
+</script>

package/comps/CoreDeepLink.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-input id="IdOfTextToCopy" :value="env.baseDeepLink + value" disabled>
+    <el-button slot="append" icon="el-icon-document-copy" @click="handleCopy" />
+  </el-input>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import { getUnicodeName } from '../utils/helpers'
+export default {
+  props: {
+    temp: {
+      type: Object,
+      default: () => { return null }
+    },
+    value: {
+      type: String,
+      default: null
+    },
+    trigger_fields: {
+      type: String,
+      default: null
+    }
+  },
+  computed: {
+    ...mapGetters(['env'])
+  },
+  watch: {
+    temp: {
+      handler (newVal) {
+        if (newVal[this.trigger_fields]) {
+          this.$emit('input', getUnicodeName(newVal[this.trigger_fields].toString().trim().toLowerCase().replace(new RegExp(' ', 'g'), '_').replace(new RegExp('-', 'g'), '_')).trim())
+        } else {
+          this.$emit('input', '')
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    async handleCopy () {
+      try {
+        await navigator.clipboard.writeText(this.env.baseDeepLink + this.value)
+        this.$showSuccess('Амжилттай хууллаа.')
+      } catch (err) {
+        const copyGfGText = document.getElementById('IdOfTextToCopy')
+        copyGfGText.select()
+        document.execCommand('copy')
+        // this.$showWarning('Хуулахад алдаа гарлаа.')
+      }
+    }
+  }
+}
+</script>

package/comps/CoreDurationJustified.vue

@@ -0,0 +1,23 @@
+<template>
+  <span>{{ durationText }}</span>
+</template>
+<script>
+export default {
+  name: 'CoreDurationJustified',
+  props: {
+    value: { type: Number, default: 0 }
+  },
+  computed: {
+    durationText () {
+      if (!this.value) {
+        return ''
+      }
+      const duration = this.$moment.duration(this.value, 'days')
+      const years = Math.floor(duration.asYears())
+      const months = Math.floor(duration.subtract(this.$moment.duration(years, 'years')).asMonths())
+      const daysLeft = Math.floor(duration.subtract(this.$moment.duration(months, 'months')).asDays())
+      return `${years} жил ${months} сар ${daysLeft} хоног`
+    }
+  }
+}
+</script>