@quvel-kit/core 1.1.0

package/dist/components/Inputs/BaseInput.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import type { ZodSchema } from 'zod/v4';
+import { useQuvel } from '@quvel-kit/core/composables';
+
+/**
+ * Props - Only custom props, everything else forwarded via $attrs
+ */
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  schema: {
+    type: Object as () => ZodSchema<string> | undefined,
+    default: undefined,
+  },
+  rules: {
+    type: Array as () => ((val: string) => true | string)[],
+    default: () => [],
+  },
+});
+
+/**
+ * Emits
+ */
+const emits = defineEmits(['update:modelValue']);
+
+/**
+ * Services
+ */
+const { validation } = useQuvel();
+
+/**
+ * Computed Property for Model Binding
+ */
+const inputValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emits('update:modelValue', value),
+});
+
+/**
+ * Computed Property for Validation Rules
+ * - If `schema` is provided, use Zod v4 validation with built-in locales
+ * - Otherwise, use the provided `rules` array
+ */
+const computedRules = computed(() => {
+  return props.schema
+      ? [validation.createInputRule(props.schema)]
+      : props.rules;
+});
+</script>
+
+<template>
+  <q-input
+    v-model="inputValue"
+    v-bind="$attrs"
+    lazy-rules
+    outlined
+    :rules="computedRules"
+  >
+    <!-- Forward all QInput slots -->
+    <template v-if="$slots.prepend" #prepend>
+      <slot name="prepend" />
+    </template>
+    <template v-if="$slots.append" #append>
+      <slot name="append" />
+    </template>
+    <template v-if="$slots.before" #before>
+      <slot name="before" />
+    </template>
+    <template v-if="$slots.after" #after>
+      <slot name="after" />
+    </template>
+    <template v-if="$slots.error" #error>
+      <slot name="error" />
+    </template>
+    <template v-if="$slots.hint" #hint>
+      <slot name="hint" />
+    </template>
+    <template v-if="$slots.counter" #counter>
+      <slot name="counter" />
+    </template>
+    <template v-if="$slots.loading" #loading>
+      <slot name="loading" />
+    </template>
+  </q-input>
+</template>

package/dist/components/Misc/ClientOnly.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { useClient } from '@quvel-kit/core/composables';
+
+/**
+ * ClientOnly component
+ *
+ * Renders its slot content only on the client-side after hydration.
+ * Prevents hydration mismatches for components that rely on browser-only APIs.
+ */
+
+const { isClient } = useClient();
+</script>
+
+<template>
+  <template v-if="isClient">
+    <slot />
+  </template>
+
+  <template v-else>
+    <slot name="fallback" />
+  </template>
+</template>

package/dist/components/Transitions/FadeInOut.vue

@@ -0,0 +1,9 @@
+<template>
+  <transition
+    appear
+    enter-active-class="animated fadeInUp"
+    leave-active-class="animated fadeOutDown"
+  >
+    <slot></slot>
+  </transition>
+</template>

package/dist/components/Transitions/SlowExpand.vue

@@ -0,0 +1,13 @@
+<template>
+  <!--
+    This transition gives a "growing" effect to the parent container.
+    A great use case is dynamic form fields on a vertical form. The form doesn't
+    just flash into its new size, offering a more aesthetically pleasing effect.
+  -->
+  <transition
+    name="slow-expand"
+    appear
+  >
+    <slot />
+  </transition>
+</template>