@saooti/octopus-sdk 40.2.19 → 41.0.0

package/src/components/display/accessibility/AccessibilityModal.vue

@@ -1,13 +1,13 @@
 <template>
   <ClassicModalInBody
     id-modal="accessibility-modal"
-    :title-modal="$t('Transcript Accessibility')"
+    :title-modal="t('Transcript Accessibility')"
     @close="closePopup"
   >
     <template #body>
       <div class="d-flex gap-3 flex-wrap mb-3">
         <div class="d-flex flex-nowrap align-items-center flex-grow-1">
-          <div class="form-label me-3">{{ $t('Choose background color') }}</div>
+          <div class="form-label me-3">{{ t('Choose background color') }}</div>
           <VSwatches
             v-model:model-value="background"
             class="c-hand"
@@ -19,7 +19,7 @@
           />
         </div>
         <div class="d-flex flex-nowrap align-items-center flex-grow-1">
-          <div class="form-label me-3">{{ $t('Choose text color') }}</div> 
+          <div class="form-label me-3">{{ t('Choose text color') }}</div> 
           <VSwatches
             v-model:model-value="color"
             class="c-hand"
@@ -33,98 +33,86 @@
       </div>
 
       <div class="d-flex align-items-center flex-nowrap mb-3">
-        <label class="form-label me-3" for="accessibility-font-size">{{ $t('Font size') }}</label> 
+        <label class="form-label me-3" for="accessibility-font-size">{{ t('Font size') }}</label> 
         <button class="btn me-3" :disabled="isMinSize" @click="decreaseFontSize"><FormatFontSizeDecreaseIcon :size="44"/></button>
         <button class="btn" :disabled="isMaxSize" @click="increaseFontSize"><FormatFontSizeIncreaseIcon :size="44"/></button>
       </div>
     
-      <div class="form-label mt-3">{{ $t('Preview') }}</div>
+      <div class="form-label mt-3">{{ t('Preview') }}</div>
       <div class="border p-2 mb-3" :style="stylePreview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
     </template>
     <template #footer>
       <button class="btn m-1" @click="closePopup">
-        {{ $t("No") }}
+        {{ t("No") }}
       </button>
       <button
         class="btn btn-primary m-1"
         @click="saveData"
       >
-        {{ $t("Save") }}
+        {{ t("Save") }}
       </button>
     </template>
   </ClassicModalInBody>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { VSwatches } from "vue3-swatches";
 import "vue3-swatches/dist/style.css";
 import FormatFontSizeIncreaseIcon from "vue-material-design-icons/FormatFontSizeIncrease.vue";
 import FormatFontSizeDecreaseIcon from "vue-material-design-icons/FormatFontSizeDecrease.vue";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { computed, defineAsyncComponent, onBeforeMount, ref } from "vue";
+import { useI18n } from "vue-i18n";
 const ClassicModalInBody = defineAsyncComponent(
   () => import("../../misc/modal/ClassicModalInBody.vue"),
 );
-export default defineComponent({
-  name: "AccessibilityModal",
 
-  components: {
-    ClassicModalInBody,
-    FormatFontSizeIncreaseIcon,
-    FormatFontSizeDecreaseIcon,
-    VSwatches
-  },
+//Emits
+const emit = defineEmits(["close", "save"]);
 
-  emits: ["close", "save"],
-  data() {
-    return {
-      fontSize :16 as number,
-      background: "white" as string,
-      color: "black" as string,
-    };
-  },
-  computed:{
-    isMaxSize(){
-      return this.fontSize>=30;
-    },
-    isMinSize(){
-      return this.fontSize<=16;
-    },
-    stylePreview(){
-      return 'font-size:'+this.fontSize+'px; background:'+this.background+'; color:'+this.color;
-    }
-  },
-  created(){
-    this.initAccessibility();
-  },
-  methods: {
-    initAccessibility(){
-      const actualFontSize = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-font-size');
-      this.fontSize = isNaN(parseInt(actualFontSize.slice(0, -2), 10)) ? 16 :parseInt(actualFontSize.slice(0, -2), 10);
-      this.background = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-background');
-      this.color = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-color');
-    },
-    closePopup() {
-      this.$emit("close");
-    },
-    decreaseFontSize(){
-      if(!this.isMinSize){
-        this.fontSize -=2;
-      }
-    },
-    increaseFontSize(){
-      if(!this.isMaxSize){
-        this.fontSize +=2;
-      }
-    },
-    saveData(){
-      this.$emit('save', {
-        fontSize: this.fontSize,
-        background: this.background,
-        color: this.color,
-      });
-    }
-  },
-});
+//Data 
+const fontSize = ref(16);
+const background = ref("white");
+const color = ref("black");
+
+
+//Composables
+const { t } = useI18n();
+
+
+//Computed
+const isMaxSize = computed(() => fontSize.value>=30);
+const isMinSize = computed(() => fontSize.value<=16);
+const stylePreview = computed(() => 'font-size:'+fontSize.value+'px; background:'+background.value+'; color:'+color.value);
+
+onBeforeMount(()=>initAccessibility())
+
+//Methods
+function initAccessibility(){
+  const actualFontSize = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-font-size');
+  fontSize.value = isNaN(parseInt(actualFontSize.slice(0, -2), 10)) ? 16 :parseInt(actualFontSize.slice(0, -2), 10);
+  background.value = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-background');
+  color.value = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-color');
+}
+function closePopup() {
+  emit("close");
+}
+function decreaseFontSize(){
+  if(!isMinSize.value){
+    fontSize.value -=2;
+  }
+}
+function increaseFontSize(){
+  if(!isMaxSize.value){
+    fontSize.value +=2;
+  }
+}
+function saveData(){
+  emit('save', {
+    fontSize: fontSize.value,
+    background: background.value,
+    color: color.value,
+  });
+}
 </script>
 <style lang="scss">
 .octopus-app #accessibility-modal .octopus-modal-body{

package/src/components/display/categories/CategoryChooser.vue

@@ -5,14 +5,15 @@
     :option-chosen="model"
     option-label="name"
     :display-label="displayLabel"
-    :label="label ?? $t('By category')"
+    :label="label ?? t('By category')"
     :text-danger="textDanger"
-    :placeholder="$t('Type string to filter by categories')"
+    :placeholder="t('Type string to filter by categories')"
     :max-element="maxElement"
     :in-modal="inModal"
     :multiple="multiple"
     :min-search-length="1"
     :width="width"
+    :height="height"
     :is-disabled="isDisabled"
     :no-deselect="noDeselect"
     :display-required="displayRequired"
@@ -21,158 +22,156 @@
   />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useGeneralStore } from "../../../stores/GeneralStore";
-import { mapState } from "pinia";
 import ClassicMultiselect from "../../form/ClassicMultiselect.vue";
 import { Category } from "@/stores/class/general/category";
-import { defineComponent } from "vue";
-export default defineComponent({
-  components: {
-    ClassicMultiselect,
-  },
-  props: {
-    defaultanswer: { default: "", type: String },
-    width: { default: "100%", type: String },
-    multiple: { default: false, type: Boolean },
-    isDisabled: { default: false, type: Boolean },
-    initCategories: {
-      default: undefined,
-      type: Array as () => Array<Category>,
-    },
-    displayAllCategories: { default: false, type: Boolean },
-    categorySelected: { default: undefined, type: Number },
-    categorySelectedArray: {
-      default: undefined,
-      type: Array as () => Array<number>,
-    },
-    inModal: { default: false, type: Boolean },
-    noDeselect: { default: true, type: Boolean },
-    label:{default: undefined, type: String },
-    displayLabel: { default: false, type: Boolean },
-    textDanger :{ default: undefined, type: String },
-    displayRequired: { default: false, type: Boolean },
+import { computed, onMounted, Ref, ref, useTemplateRef, watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+//Props 
+const props = defineProps({
+  defaultanswer: { default: "", type: String },
+  width: { default: "100%", type: String },
+  height: { default: undefined, type: String },
+  multiple: { default: false, type: Boolean },
+  isDisabled: { default: false, type: Boolean },
+  initCategories: {
+    default: undefined,
+    type: Array as () => Array<Category>,
   },
-  emits: [
-    "update:categorySelected",
-    "update:categorySelectedArray",
-    "selected",
-  ],
-  data() {
-    return {
-      maxElement: 50 as number,
-      category: undefined as Category | undefined,
-      categoryForArray: [] as Array<Category> | undefined,
-    };
+  displayAllCategories: { default: false, type: Boolean },
+  categorySelected: { default: undefined, type: Number },
+  categorySelectedArray: {
+    default: undefined,
+    type: Array as () => Array<number>,
   },
+  inModal: { default: false, type: Boolean },
+  noDeselect: { default: true, type: Boolean },
+  label:{default: undefined, type: String },
+  displayLabel: { default: false, type: Boolean },
+  textDanger :{ default: undefined, type: String },
+  displayRequired: { default: false, type: Boolean },
+})
 
-  computed: {
-    ...mapState(useGeneralStore, ["storedCategories"]),
-    categoriesChosen(): Array<Category> {
-      if (this.initCategories) {
-        return this.initCategories;
-      }
-      return this.storedCategories;
-    },
-    categoriesOrdered(): Array<Category> {
-      let allCategoriesOrdered = this.categoriesChosen.toSorted(
-        (a: Category, b: Category) => (a.name > b.name ? 1 : -1),
-      );
-      if (!this.displayAllCategories) {
-        allCategoriesOrdered = allCategoriesOrdered.filter((c: Category) => {
-          return c.podcastCount;
-        });
-      }
-      if (this.getDefaultCategory) {
-        allCategoriesOrdered.unshift(this.getDefaultCategory);
-      }
-      return allCategoriesOrdered;
-    },
-    getDefaultCategory(): Category | undefined {
-      if ("" === this.defaultanswer) {
-        return undefined;
-      }
-      return { id: 0, name: this.defaultanswer };
-    },
-    idClassicMultiselect(): string {
-      if (this.multiple) return "categoryChooser" + this.multiple;
-      return "categoryChooser";
-    },
+//Emits
+const emit = defineEmits([
+  "update:categorySelected",
+  "update:categorySelectedArray",
+  "selected"
+]);
 
-    model: {
-      get(): Category | Array<Category> | undefined {
-        return this.multiple ? this.categoryForArray : this.category;
-      },
-      set(value: Category | Array<Category> | undefined): void {
-        if (!this.multiple) {
-          this.category = value as Category | undefined;
-          return;
-        }
-        this.categoryForArray = value as Array<Category> | undefined;
-      },
-    },
-  },
-  watch: {
-    categorySelected: {
-      immediate: true,
-      handler() {
-        if (this.categorySelected) {
-          this.initCategorySelected();
-        } else {
-          this.category = this.getDefaultCategory;
-        }
-      },
-    },
-  },
 
-  mounted() {
-    this.initCategoryArray();
+//Data 
+const maxElement = ref(50);
+const category: Ref<Category | undefined> = ref(undefined);
+const categoryForArray: Ref<Array<Category> | undefined> = ref([]);
+const selectCategoryRef=useTemplateRef('selectCategory');
+
+//Composables
+const { t } = useI18n();
+const generalStore = useGeneralStore();
+
+
+//Computed
+const categoriesChosen = computed(() => {
+  if (props.initCategories) {
+    return props.initCategories;
+  }
+  return generalStore.storedCategories;
+});
+const categoriesOrdered = computed(() => {
+  let allCategoriesOrdered = categoriesChosen.value.toSorted(
+    (a: Category, b: Category) => (a.name > b.name ? 1 : -1),
+  );
+  if (!props.displayAllCategories) {
+    allCategoriesOrdered = allCategoriesOrdered.filter((c: Category) => {
+      return c.podcastCount;
+    });
+  }
+  if (getDefaultCategory.value) {
+    allCategoriesOrdered.unshift(getDefaultCategory.value);
+  }
+  return allCategoriesOrdered;
+});
+const getDefaultCategory = computed(() => {
+  if ("" === props.defaultanswer) {
+    return undefined;
+  }
+  return { id: 0, name: props.defaultanswer };
+});
+const idClassicMultiselect = computed(() => {
+  if (props.multiple) return "categoryChooser" + props.multiple;
+  return "categoryChooser";
+});
+const model = computed({
+  get(): Category | Array<Category> | undefined {
+    return props.multiple ? categoryForArray.value :category.value;
   },
-  methods: {
-    async onSearchCategory(query?: string): Promise<void> {
-      let categories = this.categoriesOrdered;
-      if (query) {
-        categories = categories.filter((item: Category) => {
-          return item.name.toUpperCase().includes(query.toUpperCase());
-        });
-      }
-      (
-        this.$refs.selectCategory as InstanceType<typeof ClassicMultiselect>
-      ).afterSearch(categories, categories.length);
-    },
-    onCategorySelected(category: Category | Array<Category>): void {
-      if (undefined !== this.categorySelected) {
-        this.$emit("update:categorySelected", (category as Category).id);
-      } else if (undefined !== this.categorySelectedArray) {
-        const idsArray: Array<number> = [];
-        (category as Array<Category>).forEach((el: Category) => {
-          idsArray.push(el.id);
-        });
-        this.$emit("update:categorySelectedArray", idsArray);
-      } else {
-        this.$emit("selected", category);
-      }
-    },
-    initCategorySelected(): void {
-      this.category =
-        this.categoriesChosen.find((el: Category) => {
-          return el.id === this.categorySelected;
-        }) ?? this.getDefaultCategory;
-    },
-    initCategoryArray(): void {
-      if (!this.categoryForArray || !this.categorySelectedArray) {
-        return;
-      }
-      this.categoryForArray.length = 0;
-      this.categorySelectedArray.forEach((element: number) => {
-        const item = this.categoriesChosen.find((el: Category) => {
-          return el.id === element;
-        });
-        if (this.categoryForArray && item) {
-          this.categoryForArray.push(item);
-        }
-      });
-    },
+  set(value: Category | Array<Category> | undefined): void {
+    if (!props.multiple) {
+      category.value = value as Category | undefined;
+      return;
+    }
+    categoryForArray.value = value as Array<Category> | undefined;
   },
 });
+
+
+//Watch
+watch(()=>props.categorySelected, async () => {
+  if (props.categorySelected) {
+    initCategorySelected();
+  } else {
+    category.value = getDefaultCategory.value;
+  }
+}, {immediate: true});
+
+
+onMounted(()=>initCategoryArray())
+
+
+//Methods
+async function onSearchCategory(query?: string): Promise<void> {
+  let categories = categoriesOrdered.value;
+  if (query) {
+    categories = categories.filter((item: Category) => {
+      return item.name.toUpperCase().includes(query.toUpperCase());
+    });
+  }
+  (selectCategoryRef?.value as InstanceType<typeof ClassicMultiselect>).afterSearch(categories, categories.length);
+}
+function onCategorySelected(category: Category | Array<Category>): void {
+  if (undefined !== props.categorySelected) {
+    emit("update:categorySelected", (category as Category).id);
+  } else if (undefined !== props.categorySelectedArray) {
+    const idsArray: Array<number> = [];
+    (category as Array<Category>).forEach((el: Category) => {
+      idsArray.push(el.id);
+    });
+    emit("update:categorySelectedArray", idsArray);
+  } else {
+    emit("selected", category);
+  }
+}
+function initCategorySelected(): void {
+  category.value =
+    categoriesChosen.value.find((el: Category) => {
+      return el.id === props.categorySelected;
+    }) ?? getDefaultCategory.value;
+}
+function initCategoryArray(): void {
+  if (!categoryForArray.value || !props.categorySelectedArray) {
+    return;
+  }
+  categoryForArray.value.length = 0;
+  props.categorySelectedArray.forEach((element: number) => {
+    const item = categoriesChosen.value.find((el: Category) => {
+      return el.id === element;
+    });
+    if (categoryForArray.value && item) {
+      categoryForArray.value.push(item);
+    }
+  });
+}
 </script>