@saooti/octopus-sdk 36.0.24 → 36.0.26

package/index.ts

@@ -65,6 +65,7 @@ export const getClassicDatePicker = () => import("./src/components/form/ClassicD
 export const getPaginate = () => import("./src/components/display/list/Paginate.vue");
 export const getListPaginate = () => import("./src/components/display/list/ListPaginate.vue");
 export const getClassicMultiselect = () => import("./src/components/form/ClassicMultiselect.vue");
+export const getClassicInputText = () => import("./src/components/form/ClassicInputText.vue");
 
 //mixins
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "36.0.24",
+  "version": "36.0.26",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -18,6 +18,10 @@
   "dependencies": {
     "@popperjs/core": "^2.11.7",
     "@saooti/octopus-api": "^0.34.3",
+    "@tiptap/extension-link": "^2.0.3",
+    "@tiptap/extension-underline": "^2.0.3",
+    "@tiptap/starter-kit": "^2.0.3",
+    "@tiptap/vue-3": "^2.0.3",
     "@vue/cli": "^5.0.8",
     "@vue/compat": "^3.3.2",
     "autoprefixer": "^10.4.14",

package/src/assets/bootstrap.scss

@@ -42,7 +42,7 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
     }
 	}
 	.big-h2{
-		font-size: 1.7rem;
+		font-size: 1.5rem;
 		@media (max-width: 500px){
       font-size: 1.1rem;
     }
@@ -148,7 +148,7 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 					}
 					&:disabled{
 							background-color: #cccccc;
-							border: black;
+							border: 1px solid black;
 							cursor: default;
 							color: gray !important;
 					}

package/src/assets/form.scss

@@ -2,6 +2,20 @@
 	.octopus-form-item{
 		min-height: 1.44rem;
 	}
+	.form-label {
+		display: block;
+		line-height: 1.2rem;
+		padding: 0.5rem 0 0;
+		color: black;
+		font-weight: bold;
+		margin-bottom: 0.5rem;
+	}
+	.counter-align-right{
+		flex-grow: 1;
+		text-align: right;
+		font-size: 0.7em;
+		margin-bottom: 0;
+	}	
 	select {
 		background: white !important;
 		outline-color: transparent !important;

package/src/components/form/ClassicInputText.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="d-flex flex-column classic-input-text">
+    <div class="d-flex">
+      <label
+        class="form-label"
+        :for="inputId"
+        :class="displayLabel?'':'d-none'"
+      >{{ label }}</label>
+      <template v-if="popover">
+        <span
+          :id="'popover'+inputId"
+          role="button"
+          class="saooti-help m-0"
+          tabindex="0"
+          :title="$t('Help')"
+        />
+        <Popover
+          :target="'popover'+inputId"
+        >
+          <!-- eslint-disable vue/no-v-html -->
+          <div
+            v-html="popover"
+          />
+          <!-- eslint-enable -->
+        </Popover>
+      </template>
+    </div>
+    <input
+      v-if="!isWysiwyg && !isTextarea"
+      :id="inputId"
+      v-model="textValue"
+      type="text"
+      class="form-input"
+      :placeholder="placeholder"
+      :data-selenium="dataSelenium"
+      :data-value="textValue"
+      :maxlength="inputMaxLengthField"
+      :readonly="readonly?'readonly':undefined"
+      :class="{
+        'border border-danger':forceError || (isError && (undefined!==textValue ||canBeNull)),
+      }"
+      :disabled="isDisable"
+    >
+    <textarea
+      v-else-if="isTextarea"
+      :id="inputId"
+      v-model="textValue"
+      :data-selenium="dataSelenium"
+      :placeholder="placeholder"
+      :readonly="readonly?'readonly':undefined"
+      class="form-input"
+      :class="{
+        'border border-danger':forceError ||(isError && (undefined!==textValue ||canBeNull))
+      }"
+      :disabled="isDisable"
+    />
+    <Wysiwyg
+      v-else
+      v-model:content="textValue"
+      :error-description="forceError || (isError && (undefined!==textValue ||canBeNull))"
+      :is-disabled="isDisable"
+    />
+    <div class="d-flex justify-content-between">
+      <div
+        v-if="isWysiwyg"
+        class="h6"
+      >
+        {{ $t('Characters number calculated over HTML code') }}
+      </div>
+      <div
+        v-else-if="''!==indicText"
+        class="text-indic"
+      >
+        {{ indicText }}
+      </div>
+      <div
+        v-else-if="forceError|| (isError && (undefined!==textValue ||canBeNull))"
+        class="text-danger"
+      >
+        {{ errorText }}
+      </div>
+      <p
+        v-if="0!==maxLength"
+        class="counter-align-right"
+        :class="{ 'text-danger': !valueLengthValid }"
+      >
+        {{ countValue + ' / ' + maxLength }}
+      </p>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineAsyncComponent, defineComponent } from 'vue';
+const Popover = defineAsyncComponent(
+  () => import('../misc/Popover.vue')
+);
+const Wysiwyg = defineAsyncComponent(
+  () => import('./Wysiwyg.vue')
+);
+export default defineComponent({
+	components: {
+    Wysiwyg,
+    Popover
+  },
+  props: {
+    inputId: { default: "", type: String },
+		label: { default: "", type: String },
+		textInit: { default: undefined, type: String },
+		maxLength: { default: 0, type: Number },
+		errorText: { default: "", type: String },
+    isTextarea: {default: false, type: Boolean},
+		isWysiwyg: {default: false, type: Boolean},
+		regex: {default : undefined, type: RegExp},
+		canBeNull : {default: false, type: Boolean},
+		inputMaxLengthField : {default: undefined, type: Number},
+		errorVariable: {default: true, type:Boolean},
+    isDisable: {default: false, type: Boolean},
+    indicText:{ default: "", type: String },
+    dataSelenium:{ default: "", type: String },
+    placeholder:{ default: "", type: String },
+    popover: {default: undefined, type:String},
+    readonly: {default: false, type: Boolean},
+    forceError: {default: false, type: Boolean},
+    displayLabel:{default: true, type: Boolean},
+  },
+  emits: ['update:textInit', 'update:errorVariable'],
+	data() {
+    return {
+      textValue: undefined as string|undefined,
+		}
+	},
+  computed: {
+		isError(): boolean{
+			return !this.valueTrimValid || !this.valueLengthValid || !this.valueRegexValid;
+		},
+    countValue(): number {
+      if(this.textValue){
+        return this.textValue.length;
+      }
+      return 0;
+    },
+    valueTrimValid(): boolean {
+			if(!this.canBeNull){
+        if(!this.textValue){
+          return false;
+        }
+				return 0 !== this.textValue.trim().length;
+			}
+			return true;
+    },
+    valueLengthValid(): boolean {
+			if(0===this.maxLength){return true}
+      return this.maxLength >= this.countValue;
+    },
+		valueRegexValid(): boolean {
+      if (this.regex !== undefined) {
+        if(!this.textValue || ""===this.textValue){
+          if(this.canBeNull){
+            return true;
+          }
+          return false;
+        }
+        return this.textValue.match(this.regex) !== null;
+      }
+      return true;
+    },
+  },
+  watch: {
+		isError(){
+			this.$emit('update:errorVariable', this.isError);
+		},
+    textValue(){
+			if(this.textInit !== this.textValue){
+				this.$emit('update:textInit', this.textValue)
+			}
+		},
+		textInit(){
+			if(this.textInit !== this.textValue){
+				this.textValue =this.textInit;
+			}
+		}
+  },
+	mounted(){
+		this.textValue = this.textInit;
+    if(this.errorVariable !== this.isError){
+      this.$emit('update:errorVariable', this.isError);
+    }
+	}
+});
+</script>
+<style lang="scss">
+.octopus-app .classic-input-text{
+  .text-indic{
+    font-style: italic;
+    font-size: 0.7rem;
+    color: #666;
+  }
+  textarea{
+		height: auto;
+		min-height: 120px;
+	}
+}
+</style>

package/src/components/form/ClassicMultiselect.vue

@@ -183,7 +183,9 @@ import vSelect from "vue-select";
   }
   .multiselect-white{
     --vs-selected-color: white;
+    --vs-selected-bg: transparent;
     --vs-dropdown-bg: black;
+    --vs-controls-color:white;
     .vs__actions path{
       fill: white;
     }

package/src/components/form/Wysiwyg.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="wysiwyg-editor">
+    <div
+      v-if="editor"
+      class="editor-menubar"
+    >
+      <button
+        title="Bold"
+        data-selenium="Bold"
+        :class="{ 'is-active': editor.isActive('bold') }"
+        @click="editor.chain().focus().toggleBold().run()"
+      >
+        <svg>
+          <path
+            transform="translate(8, 8)"
+            d="M17.194 10.962A6.271 6.271 0 0012.844.248H4.3a1.25 1.25 0 000 2.5h1.013a.25.25 0 01.25.25V21a.25.25 0 01-.25.25H4.3a1.25 1.25 0 100 2.5h9.963a6.742 6.742 0 002.93-12.786zm-4.35-8.214a3.762 3.762 0 010 7.523H8.313a.25.25 0 01-.25-.25V3a.25.25 0 01.25-.25zm1.42 18.5H8.313a.25.25 0 01-.25-.25v-7.977a.25.25 0 01.25-.25h5.951a4.239 4.239 0 010 8.477z"
+          />
+        </svg>
+      </button>
+      <button
+        title="Italic"
+        data-selenium="Italic"
+        :class="{ 'is-active': editor.isActive('italic') }"
+        @click="editor.chain().focus().toggleItalic().run()"
+      >
+        <svg>
+          <path
+            transform="translate(8, 8)"
+            d="M22.5.248h-7.637a1.25 1.25 0 000 2.5h1.086a.25.25 0 01.211.384L4.78 21.017a.5.5 0 01-.422.231H1.5a1.25 1.25 0 000 2.5h7.637a1.25 1.25 0 000-2.5H8.051a.25.25 0 01-.211-.384L19.22 2.98a.5.5 0 01.422-.232H22.5a1.25 1.25 0 000-2.5z"
+          />
+        </svg>
+      </button>
+      <button
+        title="Underline"
+        data-selenium="Underline"
+        :class="{ 'is-active': editor.isActive('underline') }"
+        @click="editor.chain().focus().toggleUnderline().run()"
+      >
+        <svg>
+          <path
+            transform="translate(8, 8)"
+            d="M22.5 21.248h-21a1.25 1.25 0 000 2.5h21a1.25 1.25 0 000-2.5zM1.978 2.748h1.363a.25.25 0 01.25.25v8.523a8.409 8.409 0 0016.818 0V3a.25.25 0 01.25-.25h1.363a1.25 1.25 0 000-2.5H16.3a1.25 1.25 0 000 2.5h1.363a.25.25 0 01.25.25v8.523a5.909 5.909 0 01-11.818 0V3a.25.25 0 01.25-.25H7.7a1.25 1.25 0 100-2.5H1.978a1.25 1.25 0 000 2.5z"
+          />
+        </svg>
+      </button>
+      <button
+        title="Link"
+        data-selenium="Link"
+        :class="{ 'is-active': editor.isActive('link') }"
+        @click="setLink"
+      >
+        <svg viewBox="0 0 24 24" fill="none">
+          <path transform="translate(2, 2)scale(0.8)" d="M7.7574 10.5858L4.92897 13.4142C3.7574 14.5858 3.7574 16.4853 4.92897 17.6569L6.34319 19.0711C7.51476 20.2427 9.41425 20.2427 10.5858 19.0711L13.4143 16.2427M9.87873 14.1214L14.1214 9.87873M10.5858 7.7574L13.4142 4.92897C14.5858 3.7574 16.4853 3.7574 17.6569 4.92897L19.0711 6.34319C20.2427 7.51476 20.2427 9.41425 19.0711 10.5858L16.2427 13.4143" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+      <button @click="editor.chain().focus().unsetLink().run()" :disabled="!editor.isActive('link')">
+        <svg viewBox="0 0 24 24" fill="none">
+          <path transform="translate(2, 2)scale(0.8)" d="M7.05029 11.2929L4.92897 13.4142C3.7574 14.5858 3.7574 16.4853 4.92897 17.6568L6.34319 19.0711C7.51476 20.2426 9.41425 20.2426 10.5858 19.0711L12.7071 16.9497M5.00004 5L19 19" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path transform="translate(2, 2)scale(0.8)" fill-rule="evenodd" clip-rule="evenodd" d="M11.8358 10.75L9.17156 13.4142C8.78103 13.8048 8.78103 14.4379 9.17156 14.8284C9.56208 15.219 10.1952 15.219 10.5858 14.8284L13.25 12.1642L11.8358 10.75ZM17.4926 13.5785L16.0784 12.1643L16.2426 12L17.6568 10.5858L18.3639 9.87872C19.145 9.09767 19.145 7.83134 18.3639 7.05029L16.9497 5.63608C16.1687 4.85503 14.9024 4.85503 14.1213 5.63608L13.4142 6.34319L12 7.7574L11.8358 7.92161L10.4216 6.5074L10.5858 6.34319L12 4.92897L12.7071 4.22187C14.2692 2.65977 16.8019 2.65977 18.3639 4.22187L19.7782 5.63608C21.3403 7.19818 21.3403 9.73084 19.7782 11.2929L19.0711 12L17.6568 13.4143L17.4926 13.5785ZM13.25 9.33581L13.4142 9.1716C13.8047 8.78107 14.4379 8.78107 14.8284 9.1716C15.2189 9.56212 15.2189 10.1953 14.8284 10.5858L14.6642 10.75L13.25 9.33581Z" fill="#000000"/>
+        </svg>
+      </button>
+      <button
+        title="Heading3"
+        data-selenium="Heading3"
+        :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
+        @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+      >
+        H3
+      </button>
+      <button
+        title="Heading4"
+        data-selenium="Heading4"
+        :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
+        @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
+      >
+        H4
+      </button>
+      <button
+        title="UnorderedList"
+        data-selenium="UnorderedList"
+        class="saooti-ul"
+        :class="{ 'is-active': editor.isActive('bulletList') }"
+        @click="editor.chain().focus().toggleBulletList().run()"
+      >
+        <svg>
+          <circle
+            transform="translate(8, 8)"
+            cx="2.5"
+            cy="3.998"
+            r="2.5"
+          />
+          <path
+            transform="translate(8, 8)"
+            d="M8.5 5H23a1 1 0 000-2H8.5a1 1 0 000 2z"
+          />
+          <circle
+            transform="translate(8, 8)"
+            cx="2.5"
+            cy="11.998"
+            r="2.5"
+          />
+          <path
+            transform="translate(8, 8)"
+            d="M23 11H8.5a1 1 0 000 2H23a1 1 0 000-2z"
+          />
+          <circle
+            transform="translate(8, 8)"
+            cx="2.5"
+            cy="19.998"
+            r="2.5"
+          />
+          <path
+            transform="translate(8, 8)"
+            d="M23 19H8.5a1 1 0 000 2H23a1 1 0 000-2z"
+          />
+        </svg>
+      </button>
+      <button
+        title="List"
+        data-selenium="List"
+        :class="{ 'is-active': editor.isActive('orderedList') }"
+        @click="editor.chain().focus().toggleOrderedList().run()"
+      >
+        <svg>
+          <path
+            transform="translate(8, 8)"
+            d="M7.75 4.5h15a1 1 0 000-2h-15a1 1 0 000 2zm15 6.5h-15a1 1 0 100 2h15a1 1 0 000-2zm0 8.5h-15a1 1 0 000 2h15a1 1 0 000-2zM2.212 17.248a2 2 0 00-1.933 1.484.75.75 0 101.45.386.5.5 0 11.483.63.75.75 0 100 1.5.5.5 0 11-.482.635.75.75 0 10-1.445.4 2 2 0 103.589-1.648.251.251 0 010-.278 2 2 0 00-1.662-3.111zm2.038-6.5a2 2 0 00-4 0 .75.75 0 001.5 0 .5.5 0 011 0 1.031 1.031 0 01-.227.645L.414 14.029A.75.75 0 001 15.248h2.5a.75.75 0 000-1.5h-.419a.249.249 0 01-.195-.406L3.7 12.33a2.544 2.544 0 00.55-1.582zM4 5.248h-.25A.25.25 0 013.5 5V1.623A1.377 1.377 0 002.125.248H1.5a.75.75 0 000 1.5h.25A.25.25 0 012 2v3a.25.25 0 01-.25.25H1.5a.75.75 0 000 1.5H4a.75.75 0 000-1.5z"
+          />
+        </svg>
+      </button>
+      <button
+        title="Display HTML"
+        data-selenium="Display-HTML"
+        class="html-button"
+        :class="{ 'is-active': isHtmlDisplay }"
+        @click="isHtmlDisplay = !isHtmlDisplay"
+      >
+        HTML
+      </button>
+    </div>
+    <editor-content
+      v-if="!isHtmlDisplay"
+      class="form-input html-wysiwyg-content"
+      :class="{ 'border border-danger': errorDescription, 'disabled':isDisabled }"
+      :editor="editor"
+    />
+    <pre
+      v-else
+      class="form-input"
+      :class="{ 'border border-danger': errorDescription, 'disabled':isDisabled }"
+    ><code>{{ html }}</code></pre>
+  </div>
+</template>
+
+<script lang="ts">
+import { EditorContent, Editor } from '@tiptap/vue-3';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import Link from '@tiptap/extension-link';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  components: {
+    EditorContent,
+  },
+
+  props: {
+    content: { default: undefined, type: String },
+    errorDescription: { default: false, type: Boolean },
+    isDisabled: { default: false, type: Boolean },
+  },
+  emits: ['update:content'],
+  data() {
+    return {
+      isHtmlDisplay: false as boolean,
+      html: this.content as string,
+      editor: null as Editor|null,
+    };
+  },
+  watch: {
+    content(): void {
+      if(this.content===this.html){return;}
+      this.initContent();
+    },
+    isDisabled(): void {
+      if(this.editor){
+        this.editor.setOptions({
+          editable: true !== this.isDisabled,
+        });
+      }
+    },
+  },
+
+  mounted(){
+    this.editor = new Editor({
+        extensions: [StarterKit, Underline, 
+        Link.configure({
+          openOnClick: false,
+        })],
+        content: '',
+        editable: true !== this.isDisabled,
+        onUpdate: this.updateHtml,
+    });
+    this.initContent();
+  },
+  beforeUnmount() {
+    if(this.editor){
+    this.editor.destroy();
+    }
+  },
+
+  methods: {
+    initContent(): void {
+      if (undefined !== this.content && this.editor && !this.editor.isFocused) {
+        this.editor.commands.setContent(this.content);
+        this.html = this.editor.getHTML();
+      }
+    },
+    updateHtml(): void {
+      if(this.editor){
+        this.html = this.editor.getHTML();
+        this.$emit('update:content', this.html);
+      }
+    },
+    setLink() {
+      if(!this.editor){return;}
+      const previousUrl = this.editor.getAttributes('link').href;
+      const url = window.prompt('URL', previousUrl)
+      if(!url) {
+        return;
+      }
+      if(""===url) {
+        this.editor
+          .chain()
+          .focus()
+          .extendMarkRange('link')
+          .unsetLink()
+          .run()
+        return;
+      }
+      this.editor
+        .chain()
+        .focus()
+        .extendMarkRange('link')
+        .setLink({ href: url })
+        .run();
+    },
+  },
+});
+</script>
+<style lang="scss">
+@import '@scss/_variables.scss';
+.octopus-app{
+.wysiwyg-editor {
+  .form-input {
+    height: 200px;
+    display: flex;
+  }
+  pre {
+    background: #ddd;
+    margin: 0;
+  }
+  code {
+    display: block;
+    white-space: pre-wrap;
+    width: 0;
+    flex-grow: 1;
+  }
+  .editor-menubar {
+    display: flex;
+    padding: 0.2rem;
+    flex-wrap: wrap;
+    button {
+      width: 40px;
+      height: 40px;
+      background: $octopus-secondary-color;
+      border-width: 0;
+      border-radius: $octopus-borderradius;
+      margin: 0.2rem;
+      padding: 0;
+      font-size: 1.1rem;
+      font-weight: 600;
+      &:hover,
+      &.is-active {
+        background: $primaryColorTransparent;
+      }
+    }
+    .html-button {
+      font-size: 12px;
+    }
+    svg {
+      width: 40px;
+      height: 40px;
+    }
+  }
+  .ProseMirror {
+    width: 0;
+    flex-grow: 1;
+    overflow: auto;
+  }
+}
+}
+</style>

package/src/locale/de.ts

@@ -326,4 +326,5 @@ export default{
   "No programming":"Nicht programmieren",
   'Canal name image': 'Kanalbild {name}',
   "Show animated wave":"Animierte Welle anzeigen",
+  'Characters number calculated over HTML code':"Die Zeichenzahl wird mit dem HTML-Code ermittelt, der mit diesem Editor erstellt wurde. Über den HTML-Button können Sie diesen Code einsehen.",
 }

package/src/locale/en.ts

@@ -333,4 +333,5 @@ export default{
   "No programming":"No programming",
   'Canal name image': 'Channel image {name}',
   "Show animated wave":"Show animated wave",
+  'Characters number calculated over HTML code':'The number of characters is calculated from the HTML code generated by this editor. You can see this code using the "html" button.',
 };

package/src/locale/es.ts

@@ -326,4 +326,5 @@ export default{
   "No programming":"No programa",
   'Canal name image': 'Imagen del canal {name}',
   "Show animated wave":"Mostrar onda animada",
+  'Characters number calculated over HTML code':'El número de caracteres se calcula a partir del código HTML generado por este editor. Puedes visualizar este código pulsando en «html».',
 }

package/src/locale/fr.ts

@@ -333,4 +333,5 @@ export default{
   "No programming":"Aucune programmation",
   'Canal name image': 'Image du canal {name}',
   "Show animated wave":"Afficher la vague animée",
+  'Characters number calculated over HTML code':'Le nombre de caractères est calculé à partir du code HTML généré par cet éditeur. Vous pouvez voir ce code grâce au bouton "html".',
 };

package/src/locale/it.ts

@@ -323,4 +323,5 @@ export default{
     "No programming":"Non programmazione",
     'Canal name image': 'Immagine del canale {name}',
     "Show animated wave":"Mostra onda animata",
+    'Characters number calculated over HTML code':'Il numero di caratteri è calcolato dal codice HTML generato da questo editor. È possibile visualizzare il codice cliccando su "html".',
   };

package/src/locale/sl.ts

@@ -282,7 +282,7 @@ export default{
   'Podcast to validate': 'Podkasti, ki jih je treba potrditi',
   'Change locale': 'Spremenite jezik',
   'Refresh': 'Osveži',
-  'See associated article':"Read the article",
+  'See associated article':"Preberi članek",
   "Display associated article": "Prikaži povezan vir",
   "Copy this page URL": "Kopiraj povezavo",
   "Custom version": "Prilagojena različica",
@@ -326,4 +326,5 @@ export default{
   "No programming":"Ne programiranje",
   'Canal name image': 'Slika kanala {name}',
   "Show animated wave":"Prikaži animirani val",
+  'Characters number calculated over HTML code':'Število znakov se izračuna iz kode HTML, ki jo ustvari ta urejevalnik. Ogledate si jo lahko s klikom na gumb „html“.',
 }