EDMS/pages/dms/design-system.vue

<script setup>
import { ref } from 'vue';

const examples = ref({
  input: 'Sample text',
  select: 'option2',
  textarea: 'Sample textarea content',
  error: '',
  disabled: false
});

const selectOptions = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' }
];

const buttonVariants = ['primary', 'secondary', 'info', 'success', 'warning', 'danger'];
const buttonSizes = ['sm', 'md', 'lg'];
</script>

<template>
  <div class="design-system-page p-6">
    <LayoutsBreadcrumb />
    
    <rs-card>
      <template #header>
        <h1 class="text-2xl font-bold">🎨 DMS Design System</h1>
      </template>
      
      <template #body>
        <div class="space-y-8">
          
          <!-- Design Principles -->
          <section>
            <h2 class="text-xl font-semibold mb-4">Design Principles</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
              <rs-card>
                <template #body>
                  <h3 class="font-medium mb-2">🎯 Consistency</h3>
                  <p class="text-sm text-gray-600">All components follow the same design patterns and naming conventions</p>
                </template>
              </rs-card>
              <rs-card>
                <template #body>
                  <h3 class="font-medium mb-2">🔧 Modularity</h3>
                  <p class="text-sm text-gray-600">Components are reusable and can be composed together</p>
                </template>
              </rs-card>
              <rs-card>
                <template #body>
                  <h3 class="font-medium mb-2">🌙 Dark Mode</h3>
                  <p class="text-sm text-gray-600">All components support both light and dark themes</p>
                </template>
              </rs-card>
            </div>
          </section>

          <!-- Buttons -->
          <section>
            <h2 class="text-xl font-semibold mb-4">Buttons</h2>
            <div class="space-y-4">
              <div>
                <h3 class="font-medium mb-2">Variants</h3>
                <div class="flex flex-wrap gap-2">
                  <rs-button v-for="variant in buttonVariants" :key="variant" :variant="variant">
                    {{ variant.charAt(0).toUpperCase() + variant.slice(1) }}
                  </rs-button>
                </div>
              </div>
              
              <div>
                <h3 class="font-medium mb-2">Sizes</h3>
                <div class="flex flex-wrap gap-2 items-center">
                  <rs-button v-for="size in buttonSizes" :key="size" :size="size" variant="primary">
                    {{ size.toUpperCase() }}
                  </rs-button>
                </div>
              </div>
              
              <div>
                <h3 class="font-medium mb-2">States</h3>
                <div class="flex flex-wrap gap-2">
                  <rs-button variant="primary">Normal</rs-button>
                  <rs-button variant="primary" :disabled="true">Disabled</rs-button>
                </div>
              </div>
            </div>
          </section>

          <!-- Form Components -->
          <section>
            <h2 class="text-xl font-semibold mb-4">Form Components</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              
              <!-- Input -->
              <div>
                <h3 class="font-medium mb-3">Input Field</h3>
                <rs-input
                  v-model="examples.input"
                  label="Input Label"
                  placeholder="Enter text here..."
                  :required="true"
                />
                <rs-input
                  v-model="examples.input"
                  label="With Error"
                  placeholder="Enter text here..."
                  error="This field is required"
                />
                <rs-input
                  v-model="examples.input"
                  label="Disabled"
                  placeholder="Enter text here..."
                  :disabled="true"
                />
              </div>
              
              <!-- Select -->
              <div>
                <h3 class="font-medium mb-3">Select Dropdown</h3>
                <rs-select
                  v-model="examples.select"
                  :options="selectOptions"
                  label="Select Option"
                  placeholder="Choose an option"
                  :required="true"
                />
                <rs-select
                  v-model="examples.select"
                  :options="selectOptions"
                  label="Multiple Select"
                  :multiple="true"
                />
              </div>
              
              <!-- Textarea -->
              <div class="md:col-span-2">
                <h3 class="font-medium mb-3">Textarea</h3>
                <rs-textarea
                  v-model="examples.textarea"
                  label="Message"
                  placeholder="Enter your message..."
                  :rows="4"
                  :required="true"
                />
              </div>
              
            </div>
          </section>

          <!-- Cards -->
          <section>
            <h2 class="text-xl font-semibold mb-4">Cards</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
              <rs-card>
                <template #header>
                  Card with Header
                </template>
                <template #body>
                  This is a card with a header section.
                </template>
              </rs-card>
              
              <rs-card>
                <template #body>
                  This is a basic card with only body content.
                </template>
              </rs-card>
              
              <rs-card>
                <template #body>
                  This card has both body and footer.
                </template>
                <template #footer>
                  <rs-button size="sm" variant="primary">Action</rs-button>
                </template>
              </rs-card>
            </div>
          </section>

          <!-- Modals -->
          <section>
            <h2 class="text-xl font-semibold mb-4">Modals</h2>
            <p class="text-gray-600 mb-4">Modals should use RsModal component with standardized header, body, and footer structure.</p>
            <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg">
              <pre class="text-sm"><code>&lt;rs-modal :visible="showModal" @close="closeModal"&gt;
  &lt;template #header&gt;
    Modal Title
  &lt;/template&gt;
  &lt;template #body&gt;
    Modal content here
  &lt;/template&gt;
  &lt;template #footer&gt;
    &lt;rs-button variant="secondary"&gt;Cancel&lt;/rs-button&gt;
    &lt;rs-button variant="primary"&gt;Confirm&lt;/rs-button&gt;
  &lt;/template&gt;
&lt;/rs-modal&gt;</code></pre>
            </div>
          </section>

          <!-- Color System -->
          <section>
            <h2 class="text-xl font-semibold mb-4">Color System</h2>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
              <div class="text-center">
                <div class="w-full h-12 bg-primary rounded mb-2"></div>
                <span class="text-sm">Primary</span>
              </div>
              <div class="text-center">
                <div class="w-full h-12 bg-secondary rounded mb-2"></div>
                <span class="text-sm">Secondary</span>
              </div>
              <div class="text-center">
                <div class="w-full h-12 bg-info rounded mb-2"></div>
                <span class="text-sm">Info</span>
              </div>
              <div class="text-center">
                <div class="w-full h-12 bg-success rounded mb-2"></div>
                <span class="text-sm">Success</span>
              </div>
              <div class="text-center">
                <div class="w-full h-12 bg-warning rounded mb-2"></div>
                <span class="text-sm">Warning</span>
              </div>
              <div class="text-center">
                <div class="w-full h-12 bg-danger rounded mb-2"></div>
                <span class="text-sm">Danger</span>
              </div>
            </div>
          </section>

          <!-- Usage Guidelines -->
          <section>
            <h2 class="text-xl font-semibold mb-4">Usage Guidelines</h2>
            <div class="space-y-4">
              <rs-card>
                <template #body>
                  <h3 class="font-medium mb-2">✅ Do</h3>
                  <ul class="list-disc pl-6 space-y-1 text-sm">
                    <li>Use RsButton, RsInput, RsSelect, RsTextarea for all form elements</li>
                    <li>Use RsModal for all dialog components</li>
                    <li>Follow consistent spacing and sizing patterns</li>
                    <li>Use semantic variant names (primary, secondary, danger, etc.)</li>
                  </ul>
                </template>
              </rs-card>
              
              <rs-card>
                <template #body>
                  <h3 class="font-medium mb-2">❌ Don't</h3>
                  <ul class="list-disc pl-6 space-y-1 text-sm">
                    <li>Use manual button styling with px-4 py-2 classes</li>
                    <li>Create custom input styles without using Rs components</li>
                    <li>Use hardcoded colors instead of CSS variables</li>
                    <li>Mix different component styling approaches</li>
                  </ul>
                </template>
              </rs-card>
            </div>
          </section>

        </div>
      </template>
    </rs-card>
  </div>
</template>

<style scoped>
pre {
  overflow-x: auto;
}

code {
  color: rgb(var(--text-color));
}
</style>