@stackonward/cli 0.0.1 → 1.0.0

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

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import { onBeforeUnmount, watch } from "vue";
+
+interface Props {
+  modelValue: boolean;
+  title?: string;
+  description?: string;
+  closeLabel?: string;
+  dismissible?: boolean;
+  showHandle?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  closeLabel: "Close",
+  dismissible: true,
+  showHandle: true,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  close: [];
+}>();
+
+let previousOverflow = "";
+
+function close(): void {
+  emit("update:modelValue", false);
+  emit("close");
+}
+
+function handleOverlayClick(): void {
+  if (props.dismissible) close();
+}
+
+function handleKeydown(event: KeyboardEvent): void {
+  if (event.key === "Escape" && props.dismissible) close();
+}
+
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (!import.meta.client) return;
+    if (open) {
+      previousOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      document.addEventListener("keydown", handleKeydown);
+      return;
+    }
+    document.body.style.overflow = previousOverflow;
+    document.removeEventListener("keydown", handleKeydown);
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => {
+  if (!import.meta.client) return;
+  document.body.style.overflow = previousOverflow;
+  document.removeEventListener("keydown", handleKeydown);
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="bottom-sheet-fade">
+      <div v-if="modelValue" class="bottom-sheet" role="presentation">
+        <button class="bottom-sheet__overlay" aria-label="Close sheet" @click="handleOverlayClick" />
+        <section class="bottom-sheet__panel" role="dialog" aria-modal="true" :aria-label="title">
+          <div v-if="showHandle" class="bottom-sheet__handle" aria-hidden="true" />
+          <header v-if="title || description || $slots.header" class="bottom-sheet__header">
+            <slot name="header">
+              <div class="bottom-sheet__heading">
+                <h2 v-if="title">{{ title }}</h2>
+                <p v-if="description">{{ description }}</p>
+              </div>
+            </slot>
+            <button
+              v-if="dismissible"
+              type="button"
+              class="bottom-sheet__close"
+              :aria-label="closeLabel"
+              @click="close"
+            >
+              ×
+            </button>
+          </header>
+          <div class="bottom-sheet__body">
+            <slot />
+          </div>
+          <footer v-if="$slots.footer" class="bottom-sheet__footer">
+            <slot name="footer" />
+          </footer>
+        </section>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.bottom-sheet {
+  position: fixed;
+  inset: 0;
+  z-index: 70;
+}
+
+.bottom-sheet__overlay {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgb(15 23 42 / 0.48);
+}
+
+.bottom-sheet__panel {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  max-height: min(86dvh, 720px);
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid #d7dee8;
+  border-bottom: 0;
+  border-radius: 18px 18px 0 0;
+  background: #fff;
+  box-shadow: 0 -24px 80px rgb(15 23 42 / 0.22);
+  padding-bottom: max(0px, env(safe-area-inset-bottom));
+}
+
+.bottom-sheet__handle {
+  width: 44px;
+  height: 4px;
+  margin: 10px auto 0;
+  border-radius: 999px;
+  background: #cbd5e1;
+}
+
+.bottom-sheet__header,
+.bottom-sheet__footer {
+  flex: none;
+  border-color: #e2e8f0;
+}
+
+.bottom-sheet__header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 14px 18px;
+}
+
+.bottom-sheet__heading {
+  min-width: 0;
+  flex: 1;
+}
+
+.bottom-sheet__heading h2,
+.bottom-sheet__heading p {
+  margin: 0;
+}
+
+.bottom-sheet__heading h2 {
+  font-size: 16px;
+}
+
+.bottom-sheet__heading p {
+  margin-top: 4px;
+  color: #64748b;
+  font-size: 14px;
+}
+
+.bottom-sheet__close {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  background: #f1f5f9;
+  color: #334155;
+  cursor: pointer;
+  font-size: 24px;
+  line-height: 1;
+}
+
+.bottom-sheet__body {
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  padding: 18px;
+  -webkit-overflow-scrolling: touch;
+}
+
+.bottom-sheet__footer {
+  border-top: 1px solid #e2e8f0;
+  padding: 14px 18px max(14px, env(safe-area-inset-bottom));
+}
+
+.bottom-sheet-fade-enter-active,
+.bottom-sheet-fade-leave-active {
+  transition: opacity 180ms ease;
+}
+
+.bottom-sheet-fade-enter-active .bottom-sheet__panel,
+.bottom-sheet-fade-leave-active .bottom-sheet__panel {
+  transition: transform 180ms ease;
+}
+
+.bottom-sheet-fade-enter-from,
+.bottom-sheet-fade-leave-to {
+  opacity: 0;
+}
+
+.bottom-sheet-fade-enter-from .bottom-sheet__panel,
+.bottom-sheet-fade-leave-to .bottom-sheet__panel {
+  transform: translateY(24px);
+}
+</style>

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

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+interface Props {
+  variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  loading?: boolean;
+  type?: "button" | "submit" | "reset";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: "primary",
+  size: "md",
+  disabled: false,
+  loading: false,
+  type: "button",
+});
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+}>();
+
+const handleClick = (event: MouseEvent) => {
+  if (!props.disabled && !props.loading) {
+    emit("click", event);
+  }
+};
+</script>
+
+<template>
+  <button
+    :type="type"
+    :disabled="disabled || loading"
+    :class="[
+      'btn',
+      `btn-${variant}`,
+      `btn-${size}`,
+      { 'btn-loading': loading, 'btn-disabled': disabled },
+    ]"
+    @click="handleClick"
+  >
+    <span v-if="loading" class="btn-spinner" />
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-weight: 500;
+  border-radius: 0.5rem;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+}
+
+/* Sizes */
+.btn-sm {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.btn-md {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+}
+
+.btn-lg {
+  padding: 0.75rem 1.5rem;
+  font-size: 1.125rem;
+}
+
+/* Variants */
+.btn-primary {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background-color: #2563eb;
+}
+
+.btn-secondary {
+  background-color: #6b7280;
+  color: white;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background-color: #4b5563;
+}
+
+.btn-outline {
+  background-color: transparent;
+  border-color: #d1d5db;
+  color: #374151;
+}
+
+.btn-outline:hover:not(:disabled) {
+  background-color: #f3f4f6;
+}
+
+.btn-ghost {
+  background-color: transparent;
+  color: #374151;
+}
+
+.btn-ghost:hover:not(:disabled) {
+  background-color: #f3f4f6;
+}
+
+.btn-danger {
+  background-color: #ef4444;
+  color: white;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background-color: #dc2626;
+}
+
+/* States */
+.btn-disabled,
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-loading {
+  position: relative;
+  color: transparent;
+}
+
+.btn-spinner {
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.75s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

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

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+interface Props {
+  padding?: "none" | "sm" | "md" | "lg";
+  shadow?: "none" | "sm" | "md" | "lg";
+  border?: boolean;
+  hoverable?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  padding: "md",
+  shadow: "sm",
+  border: true,
+  hoverable: false,
+});
+</script>
+
+<template>
+  <div
+    :class="[
+      'card',
+      `card-padding-${padding}`,
+      `card-shadow-${shadow}`,
+      { 'card-border': border, 'card-hoverable': hoverable },
+    ]"
+  >
+    <div v-if="$slots.header" class="card-header">
+      <slot name="header" />
+    </div>
+    <div class="card-body">
+      <slot />
+    </div>
+    <div v-if="$slots.footer" class="card-footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  background-color: white;
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+
+.card-border {
+  border: 1px solid #e5e7eb;
+}
+
+/* Padding */
+.card-padding-none .card-body {
+  padding: 0;
+}
+
+.card-padding-sm .card-body {
+  padding: 0.75rem;
+}
+
+.card-padding-md .card-body {
+  padding: 1.25rem;
+}
+
+.card-padding-lg .card-body {
+  padding: 2rem;
+}
+
+/* Shadow */
+.card-shadow-none {
+  box-shadow: none;
+}
+
+.card-shadow-sm {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.card-shadow-md {
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.card-shadow-lg {
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* Hoverable */
+.card-hoverable {
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.card-hoverable:hover {
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  transform: translateY(-2px);
+}
+
+/* Header & Footer */
+.card-header {
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.card-footer {
+  padding: 1rem 1.25rem;
+  border-top: 1px solid #e5e7eb;
+  background-color: #f9fafb;
+}
+</style>

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

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  modelValue?: string;
+  type?: "text" | "email" | "password" | "number" | "tel" | "url";
+  placeholder?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  error?: string;
+  label?: string;
+  hint?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: "",
+  type: "text",
+  placeholder: "",
+  disabled: false,
+  readonly: false,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+  focus: [event: FocusEvent];
+  blur: [event: FocusEvent];
+}>();
+
+const inputValue = computed({
+  get: () => props.modelValue,
+  set: (value: string) => emit("update:modelValue", value),
+});
+
+const hasError = computed(() => !!props.error);
+</script>
+
+<template>
+  <div class="input-wrapper">
+    <label v-if="label" class="input-label">{{ label }}</label>
+    <input
+      v-model="inputValue"
+      :type="type"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :class="['input', { 'input-error': hasError, 'input-disabled': disabled }]"
+      @focus="emit('focus', $event)"
+      @blur="emit('blur', $event)"
+    />
+    <p v-if="error" class="input-error-text">{{ error }}</p>
+    <p v-else-if="hint" class="input-hint">{{ hint }}</p>
+  </div>
+</template>
+
+<style scoped>
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.input-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.input {
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  background-color: white;
+  transition: all 0.2s ease;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.input::placeholder {
+  color: #9ca3af;
+}
+
+.input-error {
+  border-color: #ef4444;
+}
+
+.input-error:focus {
+  border-color: #ef4444;
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+.input-disabled {
+  background-color: #f3f4f6;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.input-error-text {
+  font-size: 0.75rem;
+  color: #ef4444;
+  margin: 0;
+}
+
+.input-hint {
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin: 0;
+}
+</style>