@saasicat/ui-vue 0.2.0

package/src/components/FeatureGate.vue

@@ -0,0 +1,56 @@
+<template>
+    <template v-if="visible">
+        <slot />
+    </template>
+    <template v-else>
+        <slot name="fallback" />
+    </template>
+</template>
+
+<script setup lang="ts">
+// FeatureGate — declarative show/hide component based on Entitlement.
+//
+// Usage:
+//
+// ```vue
+// <FeatureGate feature="DMS">
+//     <DmsLink />
+// </FeatureGate>
+//
+// <FeatureGate :feature="['DMS', 'STORAGE_PRO']">
+//     <Hochladen />
+//     <template #fallback>
+//         <UpgradeHinweis />
+//     </template>
+// </FeatureGate>
+// ```
+//
+// Multiple features → logical OR (as soon as **one** is in the plan, the
+// default slot is rendered). Identical to `@RequireFeature(...)` in the backend.
+//
+// Prerequisite: `provideEntitlement(app, ent)` in the app bootstrap. Without a
+// provider the component renders the default slot (fail-open in dev mode,
+// console warning). Apps that want stricter behavior set
+// `strictMode: true` in the provider — then `useInjectedEntitlement` throws
+// instead of returning `null`. (Strict mode comes later; currently default = lenient.)
+
+import { computed } from 'vue';
+import { useInjectedEntitlement } from '../entitlement-provider.js';
+
+interface Props {
+    /** A single FeatureKey or several as a logical OR. */
+    feature: string | readonly string[];
+}
+
+const props = defineProps<Props>();
+const ent = useInjectedEntitlement();
+
+const visible = computed<boolean>(() => {
+    if (!ent) {
+        // No provider — dev fallback: render.
+        return true;
+    }
+    const required = Array.isArray(props.feature) ? props.feature : [props.feature];
+    return required.some((f) => ent.hasFeature(f));
+});
+</script>

package/src/components/KpiCard.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="kpi" :style="{ borderTopColor: accent }">
+        <div class="kpi__head">
+            <q-icon :name="icon" size="20px" :style="{ color: accent }" />
+            <span class="kpi__label">{{ label }}</span>
+        </div>
+        <div class="kpi__value">{{ value }}</div>
+        <slot name="footer" />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Generic KPI card with icon, label, value and optional footer slot.
+// Accent color via `accent` prop (CSS color).
+
+defineProps<{
+    label: string;
+    value: string | number;
+    icon: string;
+    accent?: string;
+}>();
+</script>
+
+<style scoped>
+.kpi {
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-top-width: 3px;
+    border-radius: 14px;
+    padding: 16px 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.kpi__head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.kpi__label {
+    font-size: 11px;
+    color: #64748b;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 700;
+}
+.kpi__value {
+    font-size: 24px;
+    font-weight: 800;
+    color: #0f172a;
+    line-height: 1.1;
+}
+</style>

package/src/components/KvBlock.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="kv">
+        <div class="kv__label">{{ label }}</div>
+        <div class="kv__value">{{ value }}</div>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Generic key-value display block. Used on detail pages and
+// everywhere a label/value pair should be rendered in a consistent
+// style.
+
+defineProps<{ label: string; value: string }>();
+</script>
+
+<style scoped>
+.kv {
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 10px;
+    padding: 10px 12px;
+}
+.kv__label {
+    color: #64748b;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 700;
+}
+.kv__value {
+    font-size: 14px;
+    font-weight: 600;
+    color: #0f172a;
+    margin-top: 4px;
+}
+</style>