@saooti/octopus-sdk 40.2.19 → 41.0.0-SNAPSHOT

package/src/components/icons/PlayerFmIcon.vue

@@ -18,14 +18,11 @@
   </span>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "PlayerFmIcon",
-  props: {
-    size: { default: 24, type: Number },
-    title: { default: undefined, type: String },
-    fillColor: { default: "currentColor", type: String },
-  },
-});
+<script setup lang="ts">
+//Props 
+defineProps({
+  size: { default: 24, type: Number },
+  title: { default: undefined, type: String },
+  fillColor: { default: "currentColor", type: String },
+})
 </script>

package/src/components/icons/PocketCastIcon.vue

@@ -18,14 +18,11 @@
   </span>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "PocketCastIcon",
-  props: {
-    size: { default: 24, type: Number },
-    title: { default: undefined, type: String },
-    fillColor: { default: "currentColor", type: String },
-  },
-});
-</script>
+<script setup lang="ts">
+//Props 
+defineProps({
+  size: { default: 24, type: Number },
+  title: { default: undefined, type: String },
+  fillColor: { default: "currentColor", type: String },
+})
+</script>

package/src/components/icons/PodcastAddictIcon.vue

@@ -19,14 +19,11 @@
   </span>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "PodcastAddictIcon",
-  props: {
-    size: { default: 24, type: Number },
-    title: { default: undefined, type: String },
-    fillColor: { default: "currentColor", type: String },
-  },
-});
+<script setup lang="ts">
+//Props 
+defineProps({
+  size: { default: 24, type: Number },
+  title: { default: undefined, type: String },
+  fillColor: { default: "currentColor", type: String },
+})
 </script>

package/src/components/icons/RadiolineIcon.vue

@@ -19,14 +19,11 @@
   </span>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "RadiolineIcon",
-  props: {
-    size: { default: 24, type: Number },
-    title: { default: undefined, type: String },
-    fillColor: { default: "currentColor", type: String },
-  },
-});
-</script>
+<script setup lang="ts">
+//Props 
+defineProps({
+  size: { default: 24, type: Number },
+  title: { default: undefined, type: String },
+  fillColor: { default: "currentColor", type: String },
+})
+</script>

package/src/components/icons/TuninIcon.vue

@@ -18,14 +18,11 @@
   </span>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "TuninIcon",
-  props: {
-    size: { default: 24, type: Number },
-    title: { default: undefined, type: String },
-    fillColor: { default: "currentColor", type: String },
-  },
-});
-</script>
+<script setup lang="ts">
+//Props 
+defineProps({
+  size: { default: 24, type: Number },
+  title: { default: undefined, type: String },
+  fillColor: { default: "currentColor", type: String },
+})
+</script>

package/src/components/icons/XIcon.vue

@@ -18,14 +18,11 @@
   </span>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "XIcon",
-  props: {
-    size: { default: 24, type: Number },
-    title: { default: undefined, type: String },
-    fillColor: { default: "currentColor", type: String },
-  },
-});
+<script setup lang="ts">
+//Props 
+defineProps({
+  size: { default: 24, type: Number },
+  title: { default: undefined, type: String },
+  fillColor: { default: "currentColor", type: String },
+})
 </script>

package/src/components/misc/AcpmImage.vue

@@ -4,16 +4,15 @@
     height="44"
     class="acpm-image"
     src="/img/ACPM.webp"
-    :title="$t('Octopus is ACPM Podcast accredited')"
-    :alt="$t('Octopus is ACPM Podcast accredited')"
+    :title="t('Octopus is ACPM Podcast accredited')"
+    :alt="t('Octopus is ACPM Podcast accredited')"
   />
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "AcpmImage",
-});
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+//Composables
+const { t } = useI18n();
 </script>
 
 <style lang="scss">

package/src/components/misc/ClassicAccordion.vue

@@ -19,7 +19,8 @@
           height="30"
           class="img-accordion"
           :src="imageUrl"
-          role="presentation"
+          aria-hidden="true"
+        alt=""
           
         />
         <span class="flex-grow-1">{{ title }}</span>
@@ -33,42 +34,36 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ChevronDownIcon from "vue-material-design-icons/ChevronDown.vue";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { defineAsyncComponent, onMounted, ref, watch } from "vue";
 const AlertIcon = defineAsyncComponent(
   () => import("vue-material-design-icons/Alert.vue"),
 );
 
-export default defineComponent({
-  name: "ClassicAccordion",
-  components: {
-    ChevronDownIcon,
-    AlertIcon,
-  },
-  props: {
-    title: { default: "", type: String },
-    idComposer: { default: "", type: String },
-    isWarning: { default: false, type: Boolean },
-    imageUrl: { default: undefined, type: String },
-    displayAccordion: { default: true, type: Boolean },
-    initOpen: { default: false, type: Boolean },
-  },
-  emits: ["open"],
-  data() {
-    return {
-      isOpen: false as boolean,
-    };
-  },
-  watch: {
-    isOpen() {
-      this.$emit("open");
-    },
-  },
-  created() {
-    this.isOpen = this.initOpen;
-  },
+//Props
+const props = defineProps({
+  title: { default: "", type: String },
+  idComposer: { default: "", type: String },
+  isWarning: { default: false, type: Boolean },
+  imageUrl: { default: undefined, type: String },
+  displayAccordion: { default: true, type: Boolean },
+  initOpen: { default: false, type: Boolean },
 });
+
+//Emits
+const emit = defineEmits(["open"]);
+
+//Data
+const isOpen = ref(false);
+
+//Watch
+watch(isOpen, () => emit("open"));
+
+onMounted(()=>{
+  isOpen.value = props.initOpen;
+})
+
 </script>
 <style lang="scss">
 

package/src/components/misc/ClassicLazy.vue

@@ -4,10 +4,95 @@
     <slot v-else name="preview" />
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { useIntersectionObserver } from "@vueuse/core";
 import { ref, nextTick, watch } from "vue";
 
+//Props
+const props = defineProps({
+  renderOnIdle: Boolean,
+  unrender: Boolean,
+  minHeight: {type: Number,default: 0},
+  initRenderDelay: {type: Number, default: 0},
+  unrenderDelay: {type: Number,default: 10000},
+});
+
+//Emits
+const emit = defineEmits(["isRender"]);
+
+//Data
+const waitBeforeInit = ref(true);
+const shouldRender = ref(false);
+const targetEl = ref();
+let unrenderTimer: ReturnType<typeof setTimeout> | undefined;
+let renderTimer: ReturnType<typeof setTimeout> | undefined;
+
+//Composables
+const { pause, resume } = useIntersectionObserver(
+  targetEl,
+  ([{ isIntersecting }]) => {
+    if (waitBeforeInit.value) {
+      return;
+    }
+    if (isIntersecting) {
+      // perhaps the user re-scrolled to a component that was set to unrender. In that case stop the unrendering timer
+      clearTimeout(unrenderTimer);
+      // if we're dealing underndering lets add a waiting period of 200ms before rendering. If a component enters the viewport and also leaves it within 200ms it will not render at all. This saves work and improves performance when user scrolls very fast
+
+      renderTimer = setTimeout(
+        () => {
+          shouldRender.value = true;
+          emit("isRender", true);
+        },
+        props.unrender ? 200 : 0,
+      );
+      if (!props.unrender) {
+        pause();
+      }
+    } else if (props.unrender) {
+      // if the component was set to render, cancel that
+      clearTimeout(renderTimer);
+      unrenderTimer = setTimeout(() => {
+        shouldRender.value = false;
+        emit("isRender", false);
+      }, props.unrenderDelay);
+    }
+  },
+  {
+    rootMargin: "600px",
+  },
+);
+
+//Logic
+setTimeout(() => {
+  waitBeforeInit.value = false;
+}, props.initRenderDelay);
+if (props.renderOnIdle) {
+  onIdle(() => {
+    shouldRender.value = true;
+    emit("isRender", true);
+    if (!props.unrender) {
+      pause();
+    }
+  });
+}
+
+//Watch
+watch(
+  () => props.unrender,
+  (newValue) => {
+    if (newValue) {
+      clearTimeout(renderTimer);
+      unrenderTimer = setTimeout(() => {
+        shouldRender.value = false;
+        emit("isRender", false);
+        resume();
+      }, props.unrenderDelay);
+    }
+  },
+);
+
+//Methods
 function onIdle(cb = () => {}) {
   if ("requestIdleCallback" in window) {
     window.requestIdleCallback(cb);
@@ -17,93 +102,4 @@ function onIdle(cb = () => {}) {
     }, 300);
   }
 }
-
-export default {
-  props: {
-    renderOnIdle: Boolean,
-    unrender: Boolean,
-    minHeight: {
-      type: Number,
-      default: 0,
-    },
-    initRenderDelay: {
-      type: Number,
-      default: 0,
-    },
-    unrenderDelay: {
-      type: Number,
-      default: 10000,
-    },
-  },
-  emits: ["isRender"],
-  setup(props, context) {
-    const waitBeforeInit = ref(true);
-    const shouldRender = ref(false);
-    const targetEl = ref();
-    let unrenderTimer: ReturnType<typeof setTimeout> | undefined;
-    let renderTimer: ReturnType<typeof setTimeout> | undefined;
-    setTimeout(() => {
-      waitBeforeInit.value = false;
-    }, props.initRenderDelay);
-    const { pause, resume } = useIntersectionObserver(
-      targetEl,
-      ([{ isIntersecting }]) => {
-        if (waitBeforeInit.value) {
-          return;
-        }
-        if (isIntersecting) {
-          // perhaps the user re-scrolled to a component that was set to unrender. In that case stop the unrendering timer
-          clearTimeout(unrenderTimer);
-          // if we're dealing underndering lets add a waiting period of 200ms before rendering. If a component enters the viewport and also leaves it within 200ms it will not render at all. This saves work and improves performance when user scrolls very fast
-
-          renderTimer = setTimeout(
-            () => {
-              shouldRender.value = true;
-              context.emit("isRender", true);
-            },
-            props.unrender ? 200 : 0,
-          );
-          if (!props.unrender) {
-            pause();
-          }
-        } else if (props.unrender) {
-          // if the component was set to render, cancel that
-          clearTimeout(renderTimer);
-          unrenderTimer = setTimeout(() => {
-            shouldRender.value = false;
-            context.emit("isRender", false);
-          }, props.unrenderDelay);
-        }
-      },
-      {
-        rootMargin: "600px",
-      },
-    );
-
-    if (props.renderOnIdle) {
-      onIdle(() => {
-        shouldRender.value = true;
-        context.emit("isRender", true);
-        if (!props.unrender) {
-          pause();
-        }
-      });
-    }
-    watch(
-      () => props.unrender,
-      (newValue) => {
-        if (newValue) {
-          clearTimeout(renderTimer);
-          unrenderTimer = setTimeout(() => {
-            shouldRender.value = false;
-            context.emit("isRender", false);
-            resume();
-          }, props.unrenderDelay);
-        }
-      },
-    );
-
-    return { targetEl, shouldRender };
-  },
-};
 </script>

package/src/components/misc/ClassicNav.vue

@@ -2,14 +2,14 @@
   <ul class="octopus-nav" :class="light ? 'light' : ''">
     <li
       v-for="index in tabNumber"
-      v-show="hasSlot(index - 1)"
+      v-show="$slots[index - 1]"
       :key="index - 1"
       class="octopus-nav-item"
     >
       <button
         class="octopus-nav-link"
         :class="activeTab === index - 1 ? 'active' : ''"
-        @click="$emit('update:activeTab', index - 1)"
+        @click="emit('update:activeTab', index - 1)"
       >
         <slot :name="index - 1" />
       </button>
@@ -24,7 +24,7 @@
   >
     <div
       v-for="index in tabNumber"
-      v-show="hasSlot('tab' + (index - 1))"
+      v-show="$slots['tab' + (index - 1)]"
       :key="index - 1"
       class="octopus-tab-pane"
       :class="activeTab === index - 1 ? 'active' : ''"
@@ -34,23 +34,19 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-export default defineComponent({
-  name: "ClassicNav",
-  props: {
-    tabNumber: { default: 0, type: Number },
-    activeTab: { default: 0, type: Number },
-    transparent: { default: false, type: Boolean },
-    light: { default: false, type: Boolean },
-  },
-  emits: ["update:activeTab"],
-  methods: {
-    hasSlot(name = "default") {
-      return !!this.$slots[name];
-    },
-  },
-});
+<script setup lang="ts">
+
+//Props 
+defineProps({
+  tabNumber: { default: 0, type: Number },
+  activeTab: { default: 0, type: Number },
+  transparent: { default: false, type: Boolean },
+  light: { default: false, type: Boolean },
+})
+
+//Emits
+const emit = defineEmits(["update:activeTab"]);
+
 </script>
 
 <style lang="scss">