@stackonward/cli 0.0.1 → 1.0.1

package/dist/resources/components/vue/media/FileUpload.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import {
+  validateImageFile,
+  validateVideoFile,
+  type FileValidationError,
+  type ImageValidationConfig,
+  type VideoValidationConfig,
+} from "@stackonward/file";
+
+interface Props {
+  modelValue?: File[];
+  accept?: string;
+  multiple?: boolean;
+  disabled?: boolean;
+  label?: string;
+  helperText?: string;
+  kind?: "file" | "image" | "video";
+  imageValidation?: ImageValidationConfig;
+  videoValidation?: VideoValidationConfig;
+  maxFiles?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  accept: undefined,
+  multiple: false,
+  disabled: false,
+  label: "Upload files",
+  helperText: undefined,
+  kind: "file",
+  imageValidation: undefined,
+  videoValidation: undefined,
+  maxFiles: undefined,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [files: File[]];
+  change: [files: File[]];
+  error: [error: FileValidationError | { code: "TOO_MANY_FILES"; maxFiles: number }];
+}>();
+
+const inputRef = ref<HTMLInputElement | null>(null);
+const dragging = ref(false);
+const selectedFiles = computed(() => props.modelValue);
+
+async function validateFile(file: File): Promise<boolean> {
+  if (props.kind === "image") {
+    const result = await validateImageFile(file, props.imageValidation);
+    if (!result.valid) emit("error", result.error);
+    return result.valid;
+  }
+  if (props.kind === "video") {
+    const result = await validateVideoFile(file, props.videoValidation);
+    if (!result.valid) emit("error", result.error);
+    return result.valid;
+  }
+  return true;
+}
+
+async function commitFiles(files: File[]): Promise<void> {
+  const next = props.multiple ? [...selectedFiles.value, ...files] : files.slice(0, 1);
+  if (props.maxFiles && next.length > props.maxFiles) {
+    emit("error", { code: "TOO_MANY_FILES", maxFiles: props.maxFiles });
+    return;
+  }
+
+  const validFiles: File[] = [];
+  for (const file of next) {
+    if (await validateFile(file)) validFiles.push(file);
+  }
+
+  emit("update:modelValue", validFiles);
+  emit("change", validFiles);
+}
+
+function handleInput(event: Event): void {
+  const files = Array.from((event.target as HTMLInputElement).files ?? []);
+  void commitFiles(files);
+}
+
+function handleDrop(event: DragEvent): void {
+  dragging.value = false;
+  if (props.disabled) return;
+  const files = Array.from(event.dataTransfer?.files ?? []);
+  void commitFiles(files);
+}
+
+function removeFile(index: number): void {
+  const next = selectedFiles.value.filter((_, itemIndex) => itemIndex !== index);
+  emit("update:modelValue", next);
+  emit("change", next);
+}
+
+function openPicker(): void {
+  if (!props.disabled) inputRef.value?.click();
+}
+</script>
+
+<template>
+  <div class="file-upload">
+    <button
+      type="button"
+      class="file-upload__dropzone"
+      :class="{ 'file-upload__dropzone--dragging': dragging }"
+      :disabled="disabled"
+      @click="openPicker"
+      @dragenter.prevent="dragging = true"
+      @dragover.prevent="dragging = true"
+      @dragleave.prevent="dragging = false"
+      @drop.prevent="handleDrop"
+    >
+      <span class="file-upload__title">{{ label }}</span>
+      <span v-if="helperText" class="file-upload__helper">{{ helperText }}</span>
+    </button>
+
+    <input
+      ref="inputRef"
+      class="file-upload__input"
+      type="file"
+      :accept="accept"
+      :multiple="multiple"
+      :disabled="disabled"
+      @change="handleInput"
+    />
+
+    <ul v-if="selectedFiles.length" class="file-upload__list">
+      <li v-for="(file, index) in selectedFiles" :key="`${file.name}:${file.size}:${index}`">
+        <span>{{ file.name }}</span>
+        <small>{{ Math.ceil(file.size / 1024) }} KB</small>
+        <button type="button" aria-label="Remove file" @click="removeFile(index)">×</button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.file-upload {
+  display: grid;
+  gap: 12px;
+}
+
+.file-upload__dropzone {
+  display: grid;
+  min-height: 150px;
+  place-items: center;
+  gap: 8px;
+  border: 1px dashed #94a3b8;
+  border-radius: 10px;
+  background: #f8fafc;
+  color: #334155;
+  cursor: pointer;
+  padding: 20px;
+  text-align: center;
+}
+
+.file-upload__dropzone:hover,
+.file-upload__dropzone--dragging {
+  border-color: #2563eb;
+  background: #eff6ff;
+}
+
+.file-upload__dropzone:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.file-upload__title {
+  font-weight: 700;
+}
+
+.file-upload__helper {
+  color: #64748b;
+  font-size: 14px;
+}
+
+.file-upload__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.file-upload__list {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.file-upload__list li {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #fff;
+  padding: 8px 10px;
+}
+
+.file-upload__list span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-upload__list small {
+  color: #64748b;
+}
+
+.file-upload__list button {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  background: #f1f5f9;
+  color: #334155;
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+}
+</style>

package/dist/resources/components/vue/media/VideoPlayer.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useVideoPlayer } from "@stackonward/composables";
+
+interface Props {
+  src: string;
+  poster?: string;
+  title?: string;
+  autoplay?: boolean;
+  muted?: boolean;
+  loop?: boolean;
+  controls?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  poster: undefined,
+  title: "Video",
+  autoplay: false,
+  muted: false,
+  loop: false,
+  controls: true,
+});
+
+const player = useVideoPlayer({
+  autoplay: props.autoplay,
+  muted: props.muted,
+  loop: props.loop,
+  controls: props.controls,
+});
+
+const progressValue = computed(() => Math.round(player.state.progress * 100));
+
+function setContainerElement(element: Element | null): void {
+  player.containerElement.value = element instanceof HTMLElement ? element : null;
+}
+
+function setVideoElement(element: Element | null): void {
+  player.videoElement.value = element instanceof HTMLVideoElement ? element : null;
+}
+
+function formatTime(seconds: number): string {
+  if (!Number.isFinite(seconds)) return "0:00";
+  const minutes = Math.floor(seconds / 60);
+  const remaining = Math.floor(seconds % 60)
+    .toString()
+    .padStart(2, "0");
+  return `${minutes}:${remaining}`;
+}
+</script>
+
+<template>
+  <figure :ref="setContainerElement" class="video-player">
+    <video
+      :ref="setVideoElement"
+      class="video-player__media"
+      :src="src"
+      :poster="poster"
+      :title="title"
+      :autoplay="autoplay"
+      :muted="muted"
+      :loop="loop"
+      playsinline
+      preload="metadata"
+    />
+
+    <figcaption class="video-player__controls">
+      <button type="button" class="video-player__button" @click="player.togglePlay">
+        {{ player.state.playing ? "Pause" : "Play" }}
+      </button>
+      <div class="video-player__progress" aria-label="Playback progress">
+        <span :style="{ width: `${progressValue}%` }" />
+      </div>
+      <span class="video-player__time">
+        {{ formatTime(player.state.currentTime) }} / {{ formatTime(player.state.duration) }}
+      </span>
+      <button type="button" class="video-player__button" @click="player.toggleMute">
+        {{ player.state.muted ? "Unmute" : "Mute" }}
+      </button>
+      <button type="button" class="video-player__button" @click="player.toggleFullscreen">
+        Fullscreen
+      </button>
+    </figcaption>
+  </figure>
+</template>
+
+<style scoped>
+.video-player {
+  position: relative;
+  display: grid;
+  overflow: hidden;
+  border-radius: 10px;
+  background: #0f172a;
+  color: #fff;
+}
+
+.video-player__media {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: #0f172a;
+  object-fit: contain;
+}
+
+.video-player__controls {
+  display: grid;
+  grid-template-columns: auto minmax(80px, 1fr) auto auto auto;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  background: rgb(15 23 42 / 0.92);
+}
+
+.video-player__button {
+  min-height: 34px;
+  border: 1px solid rgb(255 255 255 / 0.18);
+  border-radius: 7px;
+  background: rgb(255 255 255 / 0.1);
+  color: #fff;
+  cursor: pointer;
+  padding: 0 10px;
+}
+
+.video-player__button:hover {
+  background: rgb(255 255 255 / 0.18);
+}
+
+.video-player__progress {
+  height: 8px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgb(255 255 255 / 0.2);
+}
+
+.video-player__progress span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: #38bdf8;
+}
+
+.video-player__time {
+  color: #cbd5e1;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+@media (max-width: 680px) {
+  .video-player__controls {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .video-player__progress,
+  .video-player__time {
+    grid-column: 1 / -1;
+  }
+}
+</style>

package/dist/resources/components/vue/ui/AppImage.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+
+interface SourceDefinition {
+  srcset: string;
+  type?: string;
+  media?: string;
+  sizes?: string;
+}
+
+interface Props {
+  src: string;
+  alt: string;
+  width?: number | string;
+  height?: number | string;
+  loading?: "lazy" | "eager";
+  decoding?: "async" | "sync" | "auto";
+  fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+  position?: string;
+  aspectRatio?: string;
+  placeholder?: string;
+  sources?: SourceDefinition[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: "lazy",
+  decoding: "async",
+  fit: "cover",
+  position: "center",
+  aspectRatio: undefined,
+  placeholder: undefined,
+  sources: () => [],
+});
+
+const emit = defineEmits<{
+  load: [event: Event];
+  error: [event: Event];
+}>();
+
+const loaded = ref(false);
+const failed = ref(false);
+
+watch(
+  () => props.src,
+  () => {
+    loaded.value = false;
+    failed.value = false;
+  },
+);
+
+const rootStyle = computed(() => ({
+  aspectRatio: props.aspectRatio,
+}));
+
+const imageStyle = computed(() => ({
+  objectFit: props.fit,
+  objectPosition: props.position,
+}));
+
+function handleLoad(event: Event): void {
+  loaded.value = true;
+  emit("load", event);
+}
+
+function handleError(event: Event): void {
+  failed.value = true;
+  emit("error", event);
+}
+</script>
+
+<template>
+  <span
+    class="app-image"
+    :class="{ 'app-image--loaded': loaded, 'app-image--failed': failed }"
+    :style="rootStyle"
+  >
+    <picture v-if="!failed">
+      <source
+        v-for="source in sources"
+        :key="`${source.media || ''}:${source.type || ''}:${source.srcset}`"
+        :srcset="source.srcset"
+        :type="source.type"
+        :media="source.media"
+        :sizes="source.sizes"
+      />
+      <img
+        :src="src"
+        :alt="alt"
+        :width="width"
+        :height="height"
+        :loading="loading"
+        :decoding="decoding"
+        :style="imageStyle"
+        @load="handleLoad"
+        @error="handleError"
+      />
+    </picture>
+    <span v-if="placeholder && !loaded && !failed" class="app-image__placeholder">
+      {{ placeholder }}
+    </span>
+    <span v-if="failed" class="app-image__fallback" role="img" :aria-label="alt">
+      {{ placeholder || alt }}
+    </span>
+  </span>
+</template>
+
+<style scoped>
+.app-image {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  background: #eef2f7;
+  color: #64748b;
+}
+
+.app-image,
+.app-image picture,
+.app-image img {
+  width: 100%;
+  height: 100%;
+}
+
+.app-image picture,
+.app-image img {
+  display: block;
+}
+
+.app-image img {
+  opacity: 0;
+  transition: opacity 180ms ease;
+}
+
+.app-image--loaded img {
+  opacity: 1;
+}
+
+.app-image__placeholder,
+.app-image__fallback {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 12px;
+  text-align: center;
+  font-size: 14px;
+}
+</style>