@zairakai/vue-components 1.1.0

package/src/Medias/Source.vue

@@ -0,0 +1,33 @@
+<script setup>
+  import { computed } from 'vue'
+
+  defineOptions({
+    name: 'MediaSource',
+  })
+
+  const props = defineProps({
+    src: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+    sizes: String,
+    media: String,
+    srcset: String,
+  })
+
+  const sourceProps = computed(() => ({
+    src: props.src,
+    type: props.type,
+    sizes: props.sizes,
+    media: props.media,
+    srcset: props.srcset,
+  }))
+</script>
+
+<template>
+  <source v-bind="sourceProps" />
+</template>

package/src/Medias/Track.vue

@@ -0,0 +1,33 @@
+<script setup>
+  import { computed } from 'vue'
+
+  defineOptions({
+    name: 'MediaTrack',
+  })
+
+  const props = defineProps({
+    src: {
+      type: String,
+      required: true,
+    },
+    label: String,
+    default: {
+      type: Boolean,
+      default: false,
+    },
+    kind: String,
+    srclang: String,
+  })
+
+  const trackProps = computed(() => ({
+    src: props.src,
+    label: props.label,
+    default: props.default,
+    kind: props.kind,
+    srclang: props.srclang,
+  }))
+</script>
+
+<template>
+  <track v-bind="trackProps" />
+</template>

package/src/Medias/Video.vue

@@ -0,0 +1,75 @@
+<script setup>
+  import { computed } from 'vue'
+
+  import MediaSource from '@medias/Source.vue'
+  import MediaTrack from '@medias/Track.vue'
+
+  defineOptions({
+    name: 'MediaVideo',
+  })
+
+  const props = defineProps({
+    id: String,
+    class: String,
+    controls: {
+      type: Boolean,
+      default: true,
+    },
+    autoplay: {
+      type: Boolean,
+      default: false,
+    },
+    loop: {
+      type: Boolean,
+      default: false,
+    },
+    muted: {
+      type: Boolean,
+      default: false,
+    },
+    width: String,
+    height: String,
+    poster: String,
+    preload: String,
+    sources: {
+      type: Array,
+      required: true,
+    },
+    tracks: {
+      type: Array,
+      default: () => [],
+    },
+  })
+
+  const videoProps = computed(() => ({
+    id: props.id,
+    class: props.class,
+    controls: props.controls,
+    autoplay: props.autoplay,
+    loop: props.loop,
+    muted: props.muted,
+    width: props.width,
+    height: props.height,
+    poster: props.poster,
+    preload: props.preload,
+  }))
+</script>
+
+<template>
+  <video v-bind="videoProps">
+    <MediaSource
+      v-for="(source, index) in sources"
+      :key="index"
+      v-bind="source"
+    />
+
+    <template v-if="tracks.length">
+      <MediaTrack
+        v-for="(track, index) in tracks"
+        :key="index"
+        v-bind="track"
+      />
+    </template>
+    Your browser does not support the video tag.
+  </video>
+</template>

package/src/Medias/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Media Components
+ * Components for media content (images, videos, audio, etc.)
+ */
+
+export { default as MediaAudio } from './Audio.vue'
+export { default as MediaCanvas } from './Canvas.vue'
+export { default as MediaFigcaption } from './Figcaption.vue'
+export { default as MediaFigure } from './Figure.vue'
+export { default as MediaIframe } from './Iframe.vue'
+export { default as MediaImage } from './Image.vue'
+export { default as MediaObject } from './Object.vue'
+export { default as MediaSource } from './Source.vue'
+export { default as MediaTrack } from './Track.vue'
+export { default as MediaVideo } from './Video.vue'

package/src/index.ts

@@ -0,0 +1,41 @@
+/**
+ * @zairakai/npm-vue-components
+ * Collection of reusable Vue 3 components
+ */
+
+import type { App, Plugin } from 'vue'
+
+// Export all components by category
+export * from './Content/index.js'
+export * from './Form/index.js'
+export * from './Layout/index.js'
+export * from './Medias/index.js'
+
+// Plugin installation options
+export interface VueComponentsOptions {
+  prefix?: string
+}
+
+// Vue plugin for easy installation
+const VueComponentsPlugin: Plugin = {
+  install(app: App, options: VueComponentsOptions = {}) {
+    // Import all components dynamically
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const components = import.meta.glob<{ default: any }>('./**/*.vue', {
+      eager: true,
+    })
+
+    for (const path in components) {
+      const component = components[path]
+      const name = (component.default.name ?? path.split('/').pop()?.replace('.vue', '') ?? '') as string
+
+      if (options.prefix) {
+        app.component(`${options.prefix}${name}`, component.default)
+      } else {
+        app.component(name, component.default)
+      }
+    }
+  },
+}
+
+export default VueComponentsPlugin

package/src/vue-shims.d.ts

@@ -0,0 +1,17 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+// Vite module declarations
+interface ImportMetaEnv {
+  readonly NODE_ENV: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  glob<T = any>(pattern: string, options?: { eager?: boolean }): Record<string, T>
+}