@maz-ui/mcp 4.0.0-beta.26

package/docs/src/demo/DemoAuthPage.vue

@@ -0,0 +1,178 @@
+<script lang="ts" setup>
+import type { ComponentPublicInstance } from 'vue'
+import { useFormField, useFormValidator, useToast } from 'maz-ui/composables'
+import MazDialog from 'maz-ui/src/components/MazDialog.vue'
+import { boolean, email, nonEmpty, pipe, string } from 'valibot'
+import { ref } from 'vue'
+
+const toast = useToast()
+
+// Form data
+const twoFactorCode = ref('')
+const isLoading = ref(false)
+const hasError = ref(false)
+const errorMessage = ref('')
+const showSuccessDialog = ref(false)
+const step = ref(1)
+
+const { model, errorMessages, handleSubmit } = useFormValidator({
+  schema: {
+    email: pipe(string('Email is required'), nonEmpty('Email is required'), email('Email is invalid')),
+    password: pipe(string('Password is required'), nonEmpty('Password is required')),
+    rememberMe: boolean(),
+  },
+  options: { mode: 'progressive' },
+})
+
+const emailRef = ref<ComponentPublicInstance>()
+const passwordRef = ref<ComponentPublicInstance>()
+
+useFormField('email', { ref: emailRef })
+useFormField('password', { ref: passwordRef })
+
+// Methods
+function forgotPassword() {
+  toast.info('Reset password link sent to your email')
+}
+
+function goToRegister() {
+  toast.info('Registration feature coming soon!')
+}
+
+async function resendCode() {
+  isLoading.value = true
+  await new Promise(resolve => setTimeout(resolve, 1000))
+  isLoading.value = false
+  toast.success('New code sent to your email')
+}
+
+async function verifyCode() {
+  if (twoFactorCode.value.length !== 4) {
+    hasError.value = true
+    errorMessage.value = 'Please enter a valid code'
+    return
+  }
+
+  isLoading.value = true
+  await new Promise(resolve => setTimeout(resolve, 1000))
+  isLoading.value = false
+  showSuccessDialog.value = true
+}
+
+const onSubmit = handleSubmit(() => {
+  step.value = 2
+})
+</script>
+
+<template>
+  <div class="vp-raw maz-flex">
+    <div class="maz-hidden maz-flex-1 maz-flex-col maz-gap-2 maz-bg-contrast maz-p-6 maz-flex-center tab-m:maz-flex">
+      <MazIcon src="/img/logo.svg" size="6rem" style="width: auto;" />
+
+      <p class="maz-text-center maz-text-sm maz-text-contrast-foreground">
+        Standalone components and tools library for Vue & Nuxt
+      </p>
+    </div>
+    <div class="maz-flex maz-flex-1 maz-items-center maz-py-6 maz-pr-0">
+      <MazStepper v-model="step" auto-validate-steps>
+        <template #title-1>
+          Sign In
+        </template>
+        <template #subtitle-1>
+          Welcome back!
+        </template>
+        <template #content-1>
+          <form novalidate class="maz-space-y-4" @submit.prevent="onSubmit">
+            <MazInput
+              ref="emailRef"
+              v-model="model.email"
+              top-label="Email"
+              type="email"
+              required
+              autocomplete="email"
+              :error="!!errorMessages.email"
+              :hint="errorMessages.email"
+              placeholder="john.doe@example.com"
+              left-icon="envelope"
+              block
+            />
+
+            <MazInput
+              ref="passwordRef"
+              v-model="model.password"
+              top-label="Password"
+              type="password"
+              placeholder="********"
+              required
+              autocomplete="off"
+              :error="!!errorMessages.password"
+              :hint="errorMessages.password"
+              left-icon="lock-closed"
+              block
+            />
+
+            <div class="maz-flex maz-items-center maz-justify-between">
+              <MazCheckbox v-model="model.rememberMe" color="contrast">
+                Remember me
+              </MazCheckbox>
+
+              <MazLink color="contrast" href="#" @click.prevent="forgotPassword">
+                Forgot password?
+              </MazLink>
+            </div>
+
+            <MazBtn type="submit" color="contrast" block :loading="isLoading">
+              Sign In
+            </MazBtn>
+
+            <div class="maz-text-center maz-text-muted">
+              Don't have an account?
+              <MazLink color="contrast" href="#" @click.prevent="goToRegister">
+                Register
+              </MazLink>
+            </div>
+          </form>
+        </template>
+
+        <template #title-2>
+          Two Factor Auth
+        </template>
+        <template #subtitle-2>
+          Enter the code sent to your email
+        </template>
+        <template #content-2="{ previousStep }">
+          <div class="maz-space-y-4">
+            <MazInputCode
+              v-model="twoFactorCode"
+              length="6"
+              :error="hasError"
+              :hint="errorMessage"
+            />
+
+            <div class="maz-flex maz-gap-4">
+              <MazBtn color="secondary" block @click="previousStep">
+                Back
+              </MazBtn>
+              <MazBtn color="contrast" block :loading="isLoading" @click="verifyCode">
+                Verify
+              </MazBtn>
+            </div>
+
+            <MazBtn color="contrast" outlined block @click="resendCode">
+              Resend code
+            </MazBtn>
+          </div>
+        </template>
+      </MazStepper>
+    </div>
+
+    <MazDialog v-model="showSuccessDialog" title="Welcome back!">
+      <p>You have successfully signed in.</p>
+      <template #footer="{ close }">
+        <MazBtn color="contrast" @click="close">
+          Continue
+        </MazBtn>
+      </template>
+    </MazDialog>
+  </div>
+</template>

package/docs/src/demo/DemoDashboardPage.vue

@@ -0,0 +1,298 @@
+<script lang="ts" setup>
+import dataLabels from 'chartjs-plugin-datalabels'
+import { ref } from 'vue'
+
+const { delay = 100 } = defineProps<{
+  delay?: number
+}>()
+
+const selectedPeriod = ref('last_7_days')
+const selectedCategories = ref(['sales', 'customers', 'orders'])
+const dateRange = ref({
+  start: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
+  end: new Date().toISOString(),
+})
+const salesTarget = ref(75)
+
+// Chart data
+const salesData = {
+  type: 'line',
+  plugins: [dataLabels],
+  data: {
+    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    datasets: [
+      {
+        label: 'Sales',
+        data: [3100, 4200, 2900, 5600, 4900, 6100, 5900],
+        borderColor: 'rgb(28 209 161)',
+        tension: 0.4,
+        fill: false,
+      },
+      {
+        label: 'Orders',
+        data: [410, 520, 340, 690, 590, 780, 710],
+        borderColor: '#1e90ff',
+        tension: 0.4,
+        fill: false,
+      },
+    ],
+  },
+  options: {
+    plugins: {
+      datalabels: {
+        display: false,
+      },
+    },
+  },
+}
+
+// Table data
+const orders = ref([
+  { id: 1, customer: 'John Doe', product: 'Premium Headphones', amount: 169.99, status: 'completed', date: '2024-03-18' },
+  { id: 2, customer: 'Jane Smith', product: 'Wireless Speaker', amount: 89.99, status: 'pending', date: '2024-03-18' },
+  { id: 3, customer: 'Mike Johnson', product: 'Smart Watch', amount: 299.99, status: 'processing', date: '2024-03-17' },
+  { id: 4, customer: 'Sarah Wilson', product: 'Laptop Stand', amount: 49.99, status: 'completed', date: '2024-03-17' },
+  { id: 5, customer: 'Tom Brown', product: 'USB-C Hub', amount: 79.99, status: 'completed', date: '2024-03-16' },
+])
+
+const tableHeaders = [
+  { label: 'Order ID', key: 'id', sortable: true },
+  { label: 'Customer', key: 'customer', sortable: true },
+  { label: 'Product', key: 'product', sortable: true },
+  { label: 'Amount', key: 'amount', sortable: true },
+  { label: 'Status', key: 'status', sortable: true },
+  { label: 'Date', key: 'date', sortable: true },
+]
+</script>
+
+<template>
+  <div class="vp-raw maz-p-4">
+    <!-- Filters Section -->
+    <div class="maz-mb-4 maz-flex maz-flex-wrap maz-gap-4">
+      <MazSelect
+        v-model="selectedPeriod"
+        :options="[
+          { label: 'Last 7 Days', value: 'last_7_days' },
+          { label: 'Last 30 Days', value: 'last_30_days' },
+          { label: 'Last 90 Days', value: 'last_90_days' },
+          { label: 'Custom Range', value: 'custom' },
+        ]"
+        label="Time Period"
+        class="maz-w-48"
+      />
+
+      <MazSelect
+        v-model="selectedCategories"
+        :options="[
+          { label: 'Sales', value: 'sales' },
+          { label: 'Customers', value: 'customers' },
+          { label: 'Orders', value: 'orders' },
+          { label: 'Products', value: 'products' },
+        ]"
+        label="Categories"
+        multiple
+        class="maz-w-64"
+      />
+
+      <MazDatePicker
+        v-model="dateRange"
+        range
+        label="Date Range"
+        class="maz-w-64"
+        locale="en-US"
+        picker-position="bottom-end"
+        :input-date-style="{
+          dateStyle: 'medium',
+        }"
+        double
+      />
+    </div>
+
+    <!-- Stats Cards -->
+    <div class="maz-mb-4 maz-grid maz-grid-cols-1 maz-gap-4 sm:maz-grid-cols-2 lg:maz-grid-cols-4">
+      <MazCard bordered :elevation="false" block>
+        <div class="maz-flex maz-items-center maz-gap-4">
+          <MazCircularProgressBar
+            :percentage="85"
+            color="success"
+            size="3rem"
+            :delay
+            :once="false"
+          />
+          <div class="maz-truncate">
+            <div class="maz-text-xl maz-font-bold">
+              <MazAnimatedCounter
+                :delay
+                :count="28945"
+                prefix="$"
+                separator=","
+                :once="false"
+              />
+            </div>
+            <div class="maz-truncate maz-text-sm maz-text-muted">
+              Total Revenue
+            </div>
+          </div>
+        </div>
+      </MazCard>
+
+      <MazCard bordered :elevation="false" block>
+        <div class="maz-flex maz-items-center maz-gap-4">
+          <MazCircularProgressBar
+            :percentage="65"
+            color="info"
+            size="3rem"
+            :delay
+            :once="false"
+          />
+          <div class="maz-truncate">
+            <div class="maz-text-xl maz-font-bold">
+              <MazAnimatedCounter
+                :delay
+                :count="384"
+                separator=","
+                :once="false"
+              />
+            </div>
+            <div class="maz-truncate maz-text-sm maz-text-muted">
+              New Orders
+            </div>
+          </div>
+        </div>
+      </MazCard>
+
+      <MazCard bordered :elevation="false" block>
+        <div class="maz-flex maz-items-center maz-gap-4">
+          <MazCircularProgressBar
+            :percentage="92"
+            color="warning"
+            size="3rem"
+            :delay
+            :once="false"
+          />
+          <div class="maz-truncate">
+            <div class="maz-text-xl maz-font-bold">
+              <MazAnimatedCounter
+                :delay
+                :count="1482"
+                separator=","
+                :once="false"
+              />
+            </div>
+            <div class="maz-truncate maz-text-sm maz-text-muted">
+              Active Customers
+            </div>
+          </div>
+        </div>
+      </MazCard>
+
+      <MazCard bordered :elevation="false" block>
+        <div class="maz-flex maz-items-center maz-gap-4">
+          <MazCircularProgressBar
+            :percentage="78"
+            color="destructive"
+            size="3rem"
+            :delay
+            :once="false"
+          />
+          <div class="maz-truncate">
+            <div class="maz-text-xl maz-font-bold">
+              <MazAnimatedCounter
+                :delay
+                :count="94"
+                suffix="%"
+                :once="false"
+              />
+            </div>
+            <div class="maz-truncate maz-text-sm maz-text-muted">
+              Customer Satisfaction
+            </div>
+          </div>
+        </div>
+      </MazCard>
+    </div>
+
+    <!-- Orders Table -->
+    <MazTable
+      :headers="tableHeaders"
+      :rows="orders"
+      search
+      title="Recent Orders"
+      sortable
+      hoverable
+      input-size="sm"
+      pagination
+      selectable
+    >
+      <template #cell-amount="{ value }">
+        <span class="maz-font-semibold">
+          ${{ value }}
+        </span>
+      </template>
+      <template #cell-status="{ value }">
+        <MazBadge
+          :color="value === 'completed' ? 'success' : value === 'processing' ? 'warning' : 'info'"
+        >
+          {{ value }}
+        </MazBadge>
+      </template>
+    </MazTable>
+
+    <!-- Charts Section -->
+    <div class="maz-mt-4 maz-grid maz-grid-cols-1 maz-gap-4 lg:maz-grid-cols-2">
+      <MazCard bordered :elevation="false" block>
+        <template #title>
+          <h3 class="maz-text-lg maz-font-semibold">
+            Sales Overview
+          </h3>
+        </template>
+        <MazChart v-bind="salesData" height="125" />
+      </MazCard>
+
+      <MazCard bordered :elevation="false" block>
+        <template #title>
+          <div class="maz-flex maz-w-full maz-items-center maz-justify-between">
+            <h3 class="maz-text-lg maz-font-semibold">
+              Sales Target
+            </h3>
+            <span class="maz-text-xl maz-font-bold maz-text-success">
+              {{ salesTarget }}%
+            </span>
+          </div>
+        </template>
+        <div class="maz-flex maz-h-full maz-flex-col maz-justify-between maz-gap-4">
+          <div>
+            <MazSlider
+              v-model="salesTarget"
+              :min="0"
+              :max="100"
+              color="success"
+            />
+            <div class="maz-mt-4 maz-text-center maz-text-sm maz-text-muted">
+              Drag the slider to adjust sales target
+            </div>
+          </div>
+
+          <div class="maz-mt-4 maz-flex maz-items-center maz-justify-between">
+            <div>
+              <p class="maz-font-medium">
+                Monthly Target
+              </p>
+              <p class="maz-text-sm maz-text-muted">
+                ${{ (1000 * salesTarget).toLocaleString() }}
+              </p>
+            </div>
+            <div>
+              <p class="maz-font-medium">
+                Achieved
+              </p>
+              <p class="maz-text-sm maz-text-success">
+                $50,000
+              </p>
+            </div>
+          </div>
+        </div>
+      </MazCard>
+    </div>
+  </div>
+</template>

package/docs/src/demo/DemoProductPage.vue

@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const selectedColor = ref('black')
+const quantity = ref(1)
+const selectedTasks = ref([])
+const price = ref(100)
+</script>
+
+<template>
+  <div class="vp-raw maz-mx-auto maz-max-w-7xl maz-p-4">
+    <div class="maz-grid maz-grid-cols-1 maz-gap-8 md:maz-grid-cols-2">
+      <div>
+        <MazGallery
+          :images="[
+            'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800',
+            'https://images.unsplash.com/photo-1487215078519-e21cc028cb29?w=800',
+            'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=800',
+            'https://images.unsplash.com/photo-1607294846590-fd005d7973e8?w=800',
+          ]"
+          :height="false"
+          :displayed-count="2"
+          class="maz-mb-6 maz-h-64"
+        />
+
+        <div class="maz-mb-6">
+          <h2 class="maz-mb-2 maz-text-xl maz-font-semibold">
+            Description
+          </h2>
+          <p class="maz-text-muted">
+            Experience premium sound quality with our wireless headphones. Featuring advanced noise cancellation,
+            long battery life and premium materials for ultimate comfort.
+          </p>
+        </div>
+
+        <MazCard block :elevation="false" bordered>
+          <template #title>
+            <h3 class="maz-text-lg maz-font-semibold">
+              Technical Specs
+            </h3>
+          </template>
+          <div class="maz-space-y-2">
+            <div class="maz-flex maz-justify-between">
+              <span>Driver Size</span>
+              <span>40mm</span>
+            </div>
+            <div class="maz-flex maz-justify-between">
+              <span>Frequency Response</span>
+              <span>20Hz - 20kHz</span>
+            </div>
+            <div class="maz-flex maz-justify-between">
+              <span>Impedance</span>
+              <span>32 Ohm</span>
+            </div>
+          </div>
+        </MazCard>
+      </div>
+      <div class="maz-space-y-6">
+        <h1 class="maz-text-3xl maz-font-bold">
+          Premium Headphones
+        </h1>
+
+        <div class="maz-text-3xl maz-font-bold">
+          169,99€
+        </div>
+
+        <hr class="maz-my-4 maz-border-t maz-border-divider">
+
+        <div>
+          <h2 class="maz-mb-2 maz-text-xl maz-font-semibold">
+            Color
+          </h2>
+          <MazSelect
+            v-model="selectedColor"
+            :options="[
+              { label: 'Black', value: 'black' },
+              { label: 'White', value: 'white' },
+              { label: 'Rose Gold', value: 'rose-gold' },
+            ]"
+            label="Color"
+            class="maz-flex-1"
+            block
+          />
+        </div>
+
+        <div>
+          <h2 class="maz-mb-2 maz-text-xl maz-font-semibold">
+            Choose options
+          </h2>
+
+          <MazChecklist
+            v-model="selectedTasks"
+            :search="false"
+            :items="[
+              { label: 'Active Noise Cancellation', value: 'anc' },
+              { label: '40h Battery Life', value: 'battery' },
+              { label: 'Premium Audio Drivers', value: 'audio' },
+              { label: 'Bluetooth 5.0', value: 'bluetooth' },
+            ]"
+            readonly
+          />
+        </div>
+
+        <div class="maz-flex maz-flex-col maz-gap-4 lap-s:maz-flex-row">
+          <MazInputPrice
+            v-model="price"
+            label="Price"
+            :min="1"
+            :step="1"
+            :text-center="false"
+            class="maz-flex-1"
+          />
+
+          <MazBtn color="contrast" outlined class="maz-flex-1" right-icon="shopping-cart">
+            Make an offer
+          </MazBtn>
+        </div>
+        <div class="maz-flex maz-flex-col maz-gap-4 lap-s:maz-flex-row">
+          <MazInputNumber
+            v-model="quantity"
+            label="Quantity"
+            :min="1"
+            :step="1"
+            :text-center="false"
+            class="maz-flex-1"
+          />
+
+          <MazBtn color="contrast" class="maz-flex-1" right-icon="shopping-cart">
+            Add to Cart
+          </MazBtn>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>