Components

Signed-off-by: Olga Bulat <obulat@gmail.com>
WordPress · Jan 18, 2024 · d1527ef · d1527ef
1 parent 01391ac
commit d1527ef
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 56 deletions.
diff --git a/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue b/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue
@@ -2,12 +2,12 @@
   <div class="full-track w-full">
     <div class="relative border-b border-dark-charcoal-20">
       <span
-        v-if="currentTime > 0"
+        v-if="props.currentTime > 0"
         class="pointer-events-none absolute left-0 hidden h-full w-4 bg-yellow md:block lg:w-10"
         aria-hidden
       />
       <span
-        v-if="status === 'played'"
+        v-if="props.status === 'played'"
         class="pointer-events-none absolute right-0 hidden h-full w-4 bg-yellow md:block lg:w-10"
         aria-hidden
       />
@@ -74,66 +74,29 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
+<script lang="ts" setup>
+import { computed } from "vue"
 
 import type { AudioDetail } from "~/types/media"
-import { timeFmt } from "~/utils/time-fmt"
 import { audioFeatures, AudioSize, AudioStatus } from "~/constants/audio"
 
 import { useFeatureFlagStore } from "~/stores/feature-flag"
-import { useProviderStore } from "~/stores/provider"
 
 import VLink from "~/components/VLink.vue"
 import VGetMediaButton from "~/components/VMediaInfo/VGetMediaButton.vue"
 import VMediaInfo from "~/components/VMediaInfo/VMediaInfo.vue"
 
-export default defineComponent({
-  name: "VFullLayout",
-  components: { VMediaInfo, VGetMediaButton, VLink },
-  props: {
-    audio: {
-      type: Object as PropType<AudioDetail>,
-      required: true,
-    },
-    size: {
-      type: String as PropType<AudioSize>,
-    },
-    status: {
-      type: String as PropType<AudioStatus>,
-    },
-    currentTime: {
-      type: Number,
-      required: true,
-    },
-  },
-  setup(props) {
-    const isSmall = computed(() => props.size === "s")
+const props = defineProps<{
+  audio: AudioDetail
+  size?: AudioSize
+  status?: AudioStatus
+  currentTime: number
+}>()
 
-    const featureFlagStore = useFeatureFlagStore()
-    const additionalSearchViews = computed(() =>
-      featureFlagStore.isOn("additional_search_views")
-    )
-
-    const providerStore = useProviderStore()
-    const sourceName = computed(() => {
-      return providerStore.getProviderName(
-        props.audio.source ?? props.audio.provider,
-        "audio"
-      )
-    })
-
-    return {
-      timeFmt,
-
-      isSmall,
-      audioFeatures,
-      sourceName,
-
-      additionalSearchViews,
-    }
-  },
-})
+const featureFlagStore = useFeatureFlagStore()
+const additionalSearchViews = computed(() =>
+  featureFlagStore.isOn("additional_search_views")
+)
 </script>
 
 <style>

diff --git a/frontend/src/components/VInputField/VInputField.vue b/frontend/src/components/VInputField/VInputField.vue
@@ -17,6 +17,7 @@
       :id="fieldId"
       v-bind="nonClassAttrs"
       ref="inputEl"
+      :placeholder="placeholder"
       :type="type"
       class="ms-4 h-full w-full appearance-none rounded-none bg-tx text-2xl font-semibold leading-none placeholder-dark-charcoal-70 focus:outline-none md:text-base"
       :value="modelValue"
@@ -30,7 +31,13 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, defineComponent, PropType } from "vue"
+import {
+  ref,
+  computed,
+  defineComponent,
+  PropType,
+  InputTypeHTMLAttribute,
+} from "vue"
 
 import { defineEvent } from "~/types/emits"
 
@@ -91,8 +98,14 @@ export default defineComponent({
       required: true,
       validator: (v: string) => Object.keys(FIELD_SIZES).includes(v),
     },
+    placeholder: {
+      type: String,
+    },
+    type: {
+      type: String as PropType<InputTypeHTMLAttribute>,
+      default: "text",
+    },
   },
-  // using non-native event name to ensure the two are not mixed
   emits: {
     "update:modelValue": defineEvent<[string]>(),
   },
@@ -104,8 +117,6 @@ export default defineComponent({
       inputEl.value?.focus()
     }
 
-    const type = typeof attrs["type"] === "string" ? attrs["type"] : "text"
-
     const updateModelValue = (event: Event) => {
       emit("update:modelValue", (event.target as HTMLInputElement).value)
     }
@@ -123,7 +134,6 @@ export default defineComponent({
       focusInput,
 
       emit,
-      type,
 
       sizeClass,
       nonClassAttrs,