pgo-uiux2 1.0.0

package/src/components/examples/SearchExample.vue

@@ -0,0 +1,322 @@
+<template>
+  <div class="p-6 max-w-4xl mx-auto space-y-8">
+    <h2 class="text-3xl font-bold text-gray-800 mb-6">Search Components</h2>
+
+    <Card title="Basic Search">
+      <div class="space-y-6">
+        <!-- Simple Search -->
+        <InputSearch
+          v-model="basicSearch"
+          label="Basic Search"
+          placeholder="Search..."
+          hint="Type to search"
+        />
+
+        <p class="text-sm text-gray-600">Selected: {{ basicSearch }}</p>
+      </div>
+    </Card>
+
+    <Card title="Search with Items">
+      <div class="space-y-6">
+        <!-- With Array of Strings -->
+        <InputSearch
+          v-model="selectedFruit"
+          label="Search Fruits"
+          :items="fruits"
+          placeholder="Search fruits..."
+          @select="handleFruitSelect"
+        />
+
+        <!-- With Array of Objects -->
+        <InputSearch
+          v-model="selectedUser"
+          label="Search Users"
+          :items="users"
+          item-text="name"
+          item-value="id"
+          :filter-keys="['name', 'email']"
+          placeholder="Search by name or email..."
+          return-object
+          @select="handleUserSelect"
+        >
+          <template #item="{ item }">
+            <div class="flex items-center gap-3">
+              <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
+                {{ item.name.charAt(0) }}
+              </div>
+              <div>
+                <div class="font-medium">{{ item.name }}</div>
+                <div class="text-xs text-muted-foreground">{{ item.email }}</div>
+              </div>
+            </div>
+          </template>
+        </InputSearch>
+
+        <div class="p-4 bg-gray-50 rounded">
+          <p class="text-sm font-medium">Selected User:</p>
+          <pre class="text-xs mt-2">{{ JSON.stringify(selectedUser, null, 2) }}</pre>
+        </div>
+      </div>
+    </Card>
+
+    <Card title="Search Variants">
+      <div class="space-y-6">
+        <!-- Default -->
+        <InputSearch
+          v-model="variantSearch"
+          label="Default"
+          :items="fruits"
+          variant="default"
+        />
+
+        <!-- Outlined -->
+        <InputSearch
+          v-model="variantSearch"
+          label="Outlined"
+          :items="fruits"
+          variant="outlined"
+        />
+
+        <!-- Filled -->
+        <InputSearch
+          v-model="variantSearch"
+          label="Filled"
+          :items="fruits"
+          variant="filled"
+        />
+      </div>
+    </Card>
+
+    <Card title="Sizes & Rounded">
+      <div class="space-y-6">
+        <!-- Small -->
+        <InputSearch
+          v-model="sizeSearch"
+          label="Small"
+          :items="fruits"
+          size="sm"
+          rounded="sm"
+        />
+
+        <!-- Medium (Default) -->
+        <InputSearch
+          v-model="sizeSearch"
+          label="Medium"
+          :items="fruits"
+          size="md"
+          rounded="md"
+        />
+
+        <!-- Large -->
+        <InputSearch
+          v-model="sizeSearch"
+          label="Large"
+          :items="fruits"
+          size="lg"
+          rounded="lg"
+        />
+
+        <!-- Full Rounded -->
+        <InputSearch
+          v-model="sizeSearch"
+          label="Full Rounded"
+          :items="fruits"
+          rounded="full"
+        />
+      </div>
+    </Card>
+
+    <Card title="Search Features">
+      <div class="space-y-6">
+        <!-- Loading State -->
+        <InputSearch
+          v-model="loadingSearch"
+          label="Loading State"
+          :items="fruits"
+          loading
+        />
+
+        <!-- Not Clearable -->
+        <InputSearch
+          v-model="noClearSearch"
+          label="Not Clearable"
+          :items="fruits"
+          :clearable="false"
+        />
+
+        <!-- Min Search Length -->
+        <InputSearch
+          v-model="minLengthSearch"
+          label="Min Search Length (3 characters)"
+          :items="fruits"
+          :min-search-length="3"
+          hint="Type at least 3 characters to search"
+        />
+
+        <!-- Custom Debounce -->
+        <InputSearch
+          v-model="debounceSearch"
+          label="Custom Debounce (1000ms)"
+          :items="fruits"
+          :debounce="1000"
+          hint="Results appear 1 second after typing"
+        />
+
+        <!-- Hide Prepend Icon -->
+        <InputSearch
+          v-model="noPrependSearch"
+          label="No Prepend Icon"
+          :items="fruits"
+          hide-prepend-icon
+        />
+      </div>
+    </Card>
+
+    <Card title="Custom Filter & Slots">
+      <div class="space-y-6">
+        <!-- Custom Filter -->
+        <InputSearch
+          v-model="customFilterSearch"
+          label="Custom Filter (Starts With)"
+          :items="countries"
+          :custom-filter="customFilter"
+          item-text="name"
+          item-value="code"
+        >
+          <template #item="{ item }">
+            <div class="flex items-center gap-2">
+              <span class="text-lg">{{ item.flag }}</span>
+              <span>{{ item.name }}</span>
+              <span class="text-xs text-muted-foreground">({{ item.code }})</span>
+            </div>
+          </template>
+        </InputSearch>
+
+        <!-- Custom No Data -->
+        <InputSearch
+          v-model="noDataSearch"
+          label="Custom No Data Message"
+          :items="[]"
+          placeholder="Search..."
+        >
+          <template #noData>
+            <div class="text-center py-4">
+              <div class="text-4xl mb-2">🔍</div>
+              <p class="text-sm text-muted-foreground">No results found</p>
+            </div>
+          </template>
+        </InputSearch>
+
+        <!-- Custom Loading -->
+        <InputSearch
+          v-model="customLoadingSearch"
+          label="Custom Loading Message"
+          :items="fruits"
+          loading
+        >
+          <template #loading>
+            <div class="flex items-center gap-2 justify-center py-2">
+              <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              <span>Searching our database...</span>
+            </div>
+          </template>
+        </InputSearch>
+      </div>
+    </Card>
+
+    <Card title="States">
+      <div class="space-y-6">
+        <!-- Disabled -->
+        <InputSearch
+          v-model="stateSearch"
+          label="Disabled"
+          :items="fruits"
+          disabled
+        />
+
+        <!-- Readonly -->
+        <InputSearch
+          v-model="stateSearch"
+          label="Readonly"
+          :items="fruits"
+          readonly
+        />
+
+        <!-- Error -->
+        <InputSearch
+          v-model="errorSearch"
+          label="With Error"
+          :items="fruits"
+          error="This field is required"
+        />
+      </div>
+    </Card>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Card from '../pgo/Card.vue'
+import Search from '../pgo/Search.vue'
+import InputSearch from '../pgo/InputSearch.vue'
+
+// Data
+const basicSearch = ref('')
+const selectedFruit = ref('')
+const selectedUser = ref(null)
+const variantSearch = ref('')
+const sizeSearch = ref('')
+const loadingSearch = ref('')
+const noClearSearch = ref('')
+const minLengthSearch = ref('')
+const debounceSearch = ref('')
+const noPrependSearch = ref('')
+const customFilterSearch = ref('')
+const noDataSearch = ref('')
+const customLoadingSearch = ref('')
+const stateSearch = ref('Apple')
+const errorSearch = ref('')
+
+const fruits = [
+  'Apple', 'Banana', 'Orange', 'Mango', 'Grapes', 
+  'Strawberry', 'Pineapple', 'Watermelon', 'Kiwi', 'Peach'
+]
+
+const users = [
+  { id: 1, name: 'John Doe', email: 'john@example.com' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
+  { id: 3, name: 'Bob Johnson', email: 'bob@example.com' },
+  { id: 4, name: 'Alice Williams', email: 'alice@example.com' },
+  { id: 5, name: 'Charlie Brown', email: 'charlie@example.com' },
+]
+
+const countries = [
+  { code: 'US', name: 'United States', flag: '🇺🇸' },
+  { code: 'UK', name: 'United Kingdom', flag: '🇬🇧' },
+  { code: 'CA', name: 'Canada', flag: '🇨🇦' },
+  { code: 'AU', name: 'Australia', flag: '🇦🇺' },
+  { code: 'DE', name: 'Germany', flag: '🇩🇪' },
+  { code: 'FR', name: 'France', flag: '🇫🇷' },
+  { code: 'JP', name: 'Japan', flag: '🇯🇵' },
+  { code: 'MV', name: 'Maldives', flag: '🇲🇻' },
+]
+
+// Custom filter function (starts with)
+const customFilter = (items, search) => {
+  return items.filter(item => 
+    item.name.toLowerCase().startsWith(search.toLowerCase())
+  )
+}
+
+// Event handlers
+const handleFruitSelect = (fruit) => {
+  console.log('Fruit selected:', fruit)
+}
+
+const handleUserSelect = (user) => {
+  console.log('User selected:', user)
+}
+</script>

package/src/components/examples/SelectExample.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="p-6 max-w-4xl mx-auto space-y-8">
+        <h2 class="text-3xl font-bold text-gray-800 mb-6">Select Components</h2>
+        <Card
+            title="Card title "
+            cardClass=" border-dashed"
+            rounded="xl"
+        >
+
+            <Select
+                v-model="selectedCountry"
+                :items="countries"
+                label="Select Country"
+                placeholder="Choose a country"
+                :multiple="true"
+
+                />
+            <Select
+                v-model="selectedCountry"
+                :items="countries"
+                label="Select Country"
+                placeholder="Choose a country"
+                labelTextSize="text-xl"
+                labelTextColor="text-secondary"
+                itemText="text"
+                itemValue="value"
+                padding="px-6 py-2"
+                rounded=""
+                header-bg="bg-primary-100"
+                header-bd="border-primary-200"
+
+                />
+            <template #footer>
+                <div class="flex justify-end gap-2 ">
+                    <Button variant="cancel" label="Cancel"></Button>
+                    <Button label="Save"></Button>
+                </div>
+            </template>
+        </Card>
+
+        <Card
+            title="Card Title 3"
+            margin="mx-8 my-4"
+            padding="px-4 py-2"
+            bg="bg-primary-50"
+            color="primary"
+            bd="border border-primary-200"
+            rounded="lg"
+            shadow="shadow-md"
+            header-bg="bg-primary-200"
+            header-bd="border-b border-primary-200"
+            header-text="text-primary"
+            footer-bg="bg-primary-100"
+            cardClass=""
+        >
+            <!-- <template #header>
+                <div class="flex justify-between items-center">
+                    <h3 class="text-lg font-thin">Card Title 2</h3>
+                    <button class="text-gray-500 hover:text-gray-700">×</button>
+                </div>
+            </template> -->
+
+                <Select
+                v-model="selectedCountry"
+                :items="countries"
+                label="Select Country"
+                placeholder="Choose a country"
+                labelTextSize="text-xl"
+                labelTextColor="text-secondary"
+                itemText="text"
+                itemValue="value"
+                padding="px-4 py-2"
+                rounded="lg"
+                header-bg="bg-primary-100"
+                header-bd="border-primary-200"
+
+                />
+                <Select
+                    v-model="selectedCountries"
+                    :items="countries"
+                    label="Select Multiple Countries"
+                    placeholder="Choose a country"
+                    labelTextSize="text-xl"
+                    labelTextColor="text-secondary"
+                    itemText="text"
+                    itemValue="value"
+                    padding="px-4 py-2"
+                    margin="mx-4 my-4"
+                    rounded="xl"
+                    header-bg="bg-primary-100"
+                    header-bd="border-primary-200"
+                    :multiple="true"
+                    :searchable="true"
+                    :dir="'rtl'"
+                />
+
+            <template #footer>
+                <div class="flex justify-end gap-2 ">
+                    <Button variant="cancel" label="Cancel"></Button>
+                    <Button label="Save"></Button>
+                </div>
+            </template>
+        </Card>
+    </div>
+</template>
+<script setup>
+    import { ref } from 'vue'
+    import Select from '../pgo/inputs/Select.vue'
+    import Card from '../pgo/Card.vue'
+    import Button from '../pgo/Button.vue'
+
+    const selectedCountry = ref(null)
+    const selectedCountries = ref([])
+
+    const countries = [
+      { value: 1, text: 'sdgsd' },
+      { value: 2, text: 'sdgdsg' },
+      { value: 3, text: 'sdgdsgds' }
+    ]
+    
+</script>

package/src/components/examples/StackedTableViewExample.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="p-6">
+    <StackedTableView
+      :data="items"
+      :columns="columns"
+      :filters="filters"
+      @view="onView"
+    />
+  </div>
+</template>
+
+<script setup>
+import StackedTableView from '../pgo/StackedTableView.vue'
+import { ref } from 'vue'
+
+const items = ref([
+  { id: 1, name: 'Alice', role: 'Admin', status: 'Active' },
+  { id: 2, name: 'Bob', role: 'User', status: 'Inactive' },
+  { id: 3, name: 'Charlie', role: 'User', status: 'Active' },
+  { id: 4, name: 'Dana', role: 'Manager', status: 'Active' },
+  { id: 5, name: 'Eva', role: 'Admin', status: 'Inactive' },
+])
+
+const columns = [
+  { key: 'name', label: 'Name' },
+  { key: 'role', label: 'Role' },
+  { key: 'status', label: 'Status' },
+]
+
+const filters = [
+  {
+    key: 'role',
+    label: 'Role',
+    options: [
+      { label: 'Admin', value: 'Admin' },
+      { label: 'Manager', value: 'Manager' },
+      { label: 'User', value: 'User' },
+    ],
+  },
+  {
+    key: 'status',
+    label: 'Status',
+    options: [
+      { label: 'Active', value: 'Active' },
+      { label: 'Inactive', value: 'Inactive' },
+    ],
+  },
+]
+
+function onView(item) {
+  alert('Viewing ' + item.name)
+}
+</script>