@saooti/octopus-sdk 40.2.19 → 41.0.1-SNAPSHOT

package/src/components/form/ClassicCheckbox.vue

@@ -9,7 +9,7 @@
         :title="displayLabel ? '' : label"
         :data-selenium="selenium"
         :tabindex="isSwitch ? '-1' : '0'"
-        @input="$emit('update:textInit', !textInit)"
+        @input="emit('update:textInit', !textInit)"
         @click="emitClickAction"
       />
       <button
@@ -29,39 +29,35 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "ClassicCheckbox",
+<script setup lang="ts">
+//Props 
+const props = defineProps({
+  idCheckbox: { default: "", type: String },
+  label: { default: "", type: String },
+  isDisabled: { default: false, type: Boolean },
+  textInit: { default: false, type: Boolean },
+  isSwitch: { default: false, type: Boolean },
+  displayLabel: { default: true, type: Boolean },
+  classLabel: { default: "", type: String },
+  selenium: { default: "", type: String },
+})
 
-  props: {
-    idCheckbox: { default: "", type: String },
-    label: { default: "", type: String },
-    isDisabled: { default: false, type: Boolean },
-    textInit: { default: false, type: Boolean },
-    isSwitch: { default: false, type: Boolean },
-    displayLabel: { default: true, type: Boolean },
-    classLabel: { default: "", type: String },
-    selenium: { default: "", type: String },
-  },
-  emits: ["update:textInit", "clickAction"],
-  methods: {
-    emitClickAction(): void {
-      this.$emit("clickAction");
-    },
-    clickSlider() {
-      if (!this.isDisabled) {
-        this.$emit("update:textInit", !this.textInit);
-        this.emitClickAction();
-      }
-    },
-  },
-});
+//Emits
+const emit = defineEmits(["update:textInit", "clickAction"]);
+
+//Methods
+function emitClickAction(): void {
+  emit("clickAction");
+}
+function clickSlider() {
+  if (!props.isDisabled) {
+    emit("update:textInit", !props.textInit);
+    emitClickAction();
+  }
+}
 </script>
 
 <style lang="scss">
-
-
 .octopus-app {
   .octopus-form-switch {
     position: relative;

package/src/components/form/ClassicContentEditable.vue

@@ -10,40 +10,44 @@
   />
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "ClassicContentEditable",
-  props: {
-    tag: { default: "span", type: String },
-    modelValue: { default: "", type: String },
-    placeholder: { default: "", type: String },
-  },
-  emits: ["update:modelValue"],
-  watch: {
-    modelValue() {
-      if ((this.$refs.element as HTMLElement).innerText !== this.modelValue) {
-        this.updateContent(this.modelValue);
-      }
-    },
-  },
-  mounted() {
-    this.updateContent(this.modelValue);
-  },
-  methods: {
-    updateContent(newcontent: string) {
-      (this.$refs.element as HTMLElement).innerText = newcontent;
-    },
-    emitUpdate() {
-      if (null !== (this.$refs.element as HTMLElement)) {
-        this.$emit(
-          "update:modelValue",
-          (this.$refs.element as HTMLElement).innerText,
-        );
-      }
-    },
-  },
+<script setup lang="ts">
+import { onMounted, useTemplateRef, watch } from 'vue';
+
+
+//Props 
+const props = defineProps({
+  tag: { default: "span", type: String },
+  modelValue: { default: "", type: String },
+  placeholder: { default: "", type: String },
+})
+
+//Emits
+const emit = defineEmits(["update:modelValue"]);
+
+//Data
+const elementRef = useTemplateRef('element');
+
+//Watch
+watch(()=>props.modelValue, () => {
+  const element = elementRef?.value as HTMLElement;
+  if (element.innerText !== props.modelValue) {
+    updateContent(props.modelValue);
+  }
 });
+
+onMounted(()=>updateContent(props.modelValue))
+
+//Methods
+function updateContent(newcontent: string) {
+  const element = elementRef?.value as HTMLElement;
+  element.innerText = newcontent;
+}
+function emitUpdate() {
+  const element = elementRef?.value as HTMLElement;
+  if (null !== element) {
+    emit( "update:modelValue",element.innerText);
+  }
+}
 </script>
 <style lang="scss">
 

package/src/components/form/ClassicCopyButton.vue

@@ -14,52 +14,48 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import SnackBar from "../misc/SnackBar.vue";
 import displayHelper from "../../helper/displayHelper";
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "ClassicCopyButton",
+import { computed, ref, useTemplateRef } from "vue";
+import { useI18n } from "vue-i18n";
 
-  components: {
-    SnackBar,
-  },
 
-  props: {
-    text: { default: undefined, type: String },
-    textAfterCopy: { default: undefined, type: String },
-    dataToCopy: { default: undefined, type: String },
-    snackbarText: { default: undefined, type: String },
-    classBtn: { default: "btn btn-primary w-fit-content my-3", type: String },
-  },
-  data() {
-    return {
-      hasBeenCopied: false as boolean,
-      lazyLoadingSnackbar: false as boolean,
-    };
-  },
-  computed:{
-    textDisplayed(){
-      return this.hasBeenCopied ? this.textAfterCopy : this.text;
-    }
-  },
-  methods: {
-    onCopyCode(callback: () => void){
-      displayHelper.onCopyCode(this.dataToCopy??"", callback);
-    },
-    afterCopy(): void {
-      this.hasBeenCopied = true;
-      if (!this.lazyLoadingSnackbar) {
-        this.lazyLoadingSnackbar = true;
-        setTimeout(() => {
-          this.afterCopy();
-        }, 500);
-      } else {
-        (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
-          this.snackbarText ?? this.$t("Data in clipboard"),
-        );
-      }
-    },
-  },
-});
+//Props 
+const props = defineProps({
+  text: { default: undefined, type: String },
+  textAfterCopy: { default: undefined, type: String },
+  dataToCopy: { default: undefined, type: String },
+  snackbarText: { default: undefined, type: String },
+  classBtn: { default: "btn btn-primary w-fit-content my-3", type: String },
+})
+
+//Data 
+const hasBeenCopied = ref(false);
+const lazyLoadingSnackbar = ref(false);
+const snackBarRef = useTemplateRef('snackbar');
+
+
+//Composables
+const { t } = useI18n();
+
+
+//Computed
+const textDisplayed = computed(() => hasBeenCopied.value ? props.textAfterCopy : props.text);
+
+//Methods
+function onCopyCode(callback: () => void){
+  displayHelper.onCopyCode(props.dataToCopy??"", callback);
+}
+function afterCopy(): void {
+  hasBeenCopied.value = true;
+  if (!lazyLoadingSnackbar.value) {
+    lazyLoadingSnackbar.value = true;
+    setTimeout(() => {
+      afterCopy();
+    }, 500);
+  } else {
+    (snackBarRef?.value as InstanceType<typeof SnackBar>).open(props.snackbarText ?? t("Data in clipboard"));
+  }
+}
 </script>

package/src/components/form/ClassicDatePicker.vue

@@ -15,7 +15,7 @@
       :text-input="true"
       :readonly="readonly"
       :teleport="useTeleport"
-      :locale="formatLocale"
+      :locale="locale"
       :format="format"
       :auto-apply="true"
       :enable-seconds="displaySeconds"
@@ -38,128 +38,128 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ClockOutlineIcon from "vue-material-design-icons/ClockOutline.vue";
 import dayjs from "dayjs";
 import VueDatePicker from "@vuepic/vue-datepicker";
-import { defineComponent } from "vue";
-export default defineComponent({
-  components: {
-    VueDatePicker,
-    ClockOutlineIcon,
-  },
-  props: {
-    id:{ default: undefined, type: String },
-    time: {
-      default: undefined,
-      type: Object as () => { hours: number; minutes: number; seconds: number },
-    },
-    date: { default: undefined, type: Date },
-    range: { default: undefined, type: Array as () => Array<Date> },
-    isMaxDate: { default: false, type: Boolean },
-    dateLimit: { default: undefined, type: Date },
-    isMinDate: { default: false, type: Boolean },
-    columnNumber: { default: 1, type: Number },
-    displaySeconds: { default: false, type: Boolean },
-    displayTimePicker: { default: true, type: Boolean },
-    isTimePicker: { default: false, type: Boolean },
-    useTeleport: { default: false, type: Boolean },
-    templateClass: { default: undefined, type: String },
-    readonly: { default: false, type: Boolean },
-    maxTime: {
-      default: null,
-      type: Object as () => {
-        hours?: number | string;
-        minutes?: number | string;
-        seconds?: number | string;
-      },
-    },
-    forceFormat: { default: undefined, type: String },
-    monthPicker: { default: false, type: Boolean },
-    customPosition: { default: null, type: Function },
-    isInline: { default: false, type: Boolean },
-    timePickerInline: { default: false, type: Boolean },
-    label: { default: undefined, type: String },
-    displayLabel: { default: false, type: Boolean },
-  },
+import { computed, useTemplateRef } from "vue";
+import { useI18n } from "vue-i18n";
 
-  emits: ["updateDate", "update:date"],
-  data() {
-    return {};
+//Props 
+const props = defineProps({
+  id:{ default: undefined, type: String },
+  time: {
+    default: undefined,
+    type: Object as () => { hours: number; minutes: number; seconds: number },
   },
-  computed: {
-    ariaLabels() {
-      return {
-        input: this.date ? this.formatDate(this.date) : undefined,
-        day: (value: { value: Date }) => {
-          return this.formatDate(value.value);
-        },
-      };
-    },
-    modelVal() {
-      if (this.time) {
-        return this.time;
-      }
-      if (this.range) {
-        return this.range;
-      }
-      if (this.date && this.monthPicker) {
-        return {
-          month: this.date.getMonth(),
-          year: this.date.getFullYear(),
-        };
-      }
-      return this.date;
-    },
-    formatLocale() {
-      return this.$i18n.locale;
-    },
-    format() {
-      if (this.forceFormat) {
-        return this.forceFormat;
-      }
-      if (this.monthPicker) {
-        return "MM/yyyy";
-      }
-      let timeString = "";
-      if (this.displayTimePicker || this.isTimePicker) {
-        timeString = "HH:mm";
-        if (this.displaySeconds) {
-          timeString = "HH:mm:ss";
-        }
-      }
-      const dayString = this.isTimePicker
-        ? timeString
-        : "dd/MM/yyyy " + timeString;
-      return this.range ? dayString + " - " + dayString : dayString;
-    },
-    now(): Date {
-      if (this.dateLimit) {
-        return this.dateLimit;
-      }
-      return dayjs().toDate();
+  date: { default: undefined, type: Date },
+  range: { default: undefined, type: Array as () => Array<Date> },
+  isMaxDate: { default: false, type: Boolean },
+  dateLimit: { default: undefined, type: Date },
+  isMinDate: { default: false, type: Boolean },
+  columnNumber: { default: 1, type: Number },
+  displaySeconds: { default: false, type: Boolean },
+  displayTimePicker: { default: true, type: Boolean },
+  isTimePicker: { default: false, type: Boolean },
+  useTeleport: { default: false, type: Boolean },
+  templateClass: { default: undefined, type: String },
+  readonly: { default: false, type: Boolean },
+  maxTime: {
+    default: null,
+    type: Object as () => {
+      hours?: number | string;
+      minutes?: number | string;
+      seconds?: number | string;
     },
   },
-  methods: {
-    updateValue(date: Date) {
-      if (!this.isInline) {
-        this.$refs.divContainer?.focus();
-      }
-      this.$emit("updateDate", date);
-    },
-    formatDate(value: Date): string {
-      const realMonth = value.getMonth() + 1;
-      return (
-        value.getDate() +
-        "/" +
-        (realMonth < 10 ? "0" : "") +
-        realMonth +
-        "/" +
-        value.getFullYear()
-      );
+  forceFormat: { default: undefined, type: String },
+  monthPicker: { default: false, type: Boolean },
+  customPosition: { default: null, type: Function },
+  isInline: { default: false, type: Boolean },
+  timePickerInline: { default: false, type: Boolean },
+  label: { default: undefined, type: String },
+  displayLabel: { default: false, type: Boolean },
+})
+
+//Emits
+const emit = defineEmits(["updateDate", "update:date"]);
+
+//Data
+const divContainerRef = useTemplateRef('divContainer');
+
+//Composables
+const {locale} = useI18n();
+
+//Computed
+const ariaLabels = computed(() => {
+  return {
+    input: props.date ? formatDate(props.date) : undefined,
+    day: (value: { value: Date }) => {
+      return formatDate(value.value);
     },
-  },
+  };
+});
+const modelVal = computed(() => {
+  if (props.time) {
+    return props.time;
+  }
+  if (props.range) {
+    return props.range;
+  }
+  if (props.date && props.monthPicker) {
+    return {
+      month: props.date.getMonth(),
+      year: props.date.getFullYear(),
+    };
+  }
+  return props.date;
+});
+const format = computed(() => {
+  if (props.forceFormat) {
+    return props.forceFormat;
+  }
+  if (props.monthPicker) {
+    return "MM/yyyy";
+  }
+  let timeString = "";
+  if (props.displayTimePicker || props.isTimePicker) {
+    timeString = "HH:mm";
+    if (props.displaySeconds) {
+      timeString = "HH:mm:ss";
+    }
+  }
+  const dayString = props.isTimePicker
+    ? timeString
+    : "dd/MM/yyyy " + timeString;
+  return props.range ? dayString + " - " + dayString : dayString;
+});
+const now = computed(() => {
+  if (props.dateLimit) {
+    return props.dateLimit;
+  }
+  return dayjs().toDate();
 });
+
+
+//Methods
+function updateValue(date: Date) {
+  if (!props.isInline) {
+    (divContainerRef?.value as HTMLElement)?.focus();
+  }
+  emit("updateDate", date);
+}
+
+function formatDate(value: Date): string {
+  const realMonth = value.getMonth() + 1;
+  return (
+    value.getDate() +
+    "/" +
+    (realMonth < 10 ? "0" : "") +
+    realMonth +
+    "/" +
+    value.getFullYear()
+  );
+}
 </script>
 <style lang="scss">
 @use "@vuepic/vue-datepicker/dist/main.css";

package/src/components/form/ClassicEmojiPicker.vue

@@ -4,7 +4,7 @@
       :id="'emoji-picker-dropdown'+id"
       ref="emojiButton"
       class="btn btn-transparent d-flex align-items-center justify-content-center"
-      :title="$t('Pick your emoji')"
+      :title="t('Pick your emoji')"
     >
       <EmoticonExcitedOutlineIcon :size="34" />
     </button>
@@ -19,46 +19,38 @@
     >
       <Picker
         :data="emojiIndex"
-        :title="$t('Pick your emoji')"
+        :title="t('Pick your emoji')"
         emoji="point_up"
-        @select="$emit('emojiSelected', $event.native)"
+        @select="emit('emojiSelected', $event.native)"
       />
     </ClassicPopover>
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {useResizePhone} from "../composable/useResizePhone";
 import EmoticonExcitedOutlineIcon from "vue-material-design-icons/EmoticonExcitedOutline.vue";
 import ClassicPopover from "../misc/ClassicPopover.vue";
 import data from "emoji-mart-vue-fast/data/all.json";
 import "emoji-mart-vue-fast/css/emoji-mart.css";
 import { Picker, EmojiIndex } from "emoji-mart-vue-fast/src";
+import { useI18n } from "vue-i18n";
+
+//Props 
+defineProps({
+  popoverRelativeClass: { default: undefined, type: String },
+  isTopPosition: { default: false, type: Boolean },
+  id: { default: "", type: String },
+})
+
+//Emits
+const emit = defineEmits(["emojiSelected"]);
+
+//Data 
 const emojiIndex = new EmojiIndex(data);
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "ClassicEmojiPicker",
-  components: {
-    Picker,
-    ClassicPopover,
-    EmoticonExcitedOutlineIcon,
-  },
-  props: {
-    popoverRelativeClass: { default: undefined, type: String },
-    isTopPosition: { default: false, type: Boolean },
-    id: { default: "", type: String },
-  },
-  emits: ["emojiSelected"],
-  setup(){
-    const { isPhone } = useResizePhone();
-    return { isPhone }
-  },
 
-  data() {
-    return {
-      emojiIndex: emojiIndex,
-    };
-  },
-});
+//Composables
+const { t } = useI18n();
+const { isPhone } = useResizePhone();
 </script>