Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update dashboard

Browse Source
This commit is contained in:
Cagatay Civici
2024-07-29 16:48:03 +03:00
parent 0e3130d2a6
commit 7c7cc7ce70
10 changed files with 122 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/layout/_main.scss
View File

@@ -1,7 +1,3 @@
* {
box-sizing: border-box;
}
html {
height: 100%;
font-size: 14px;

2
src/assets/layout/_utils.scss
View File

@@ -9,7 +9,7 @@
background: var(--surface-card);
padding: 2rem;
margin-bottom: 2rem;
box-shadow: var(--card-shadow);
border: 1px solid var(--surface-border);
border-radius: var(--content-border-radius);
&:last-child {

1
src/assets/layout/variables/_common.scss
View File

@@ -9,7 +9,6 @@
--surface-overlay: var(--p-overlay-popover-background);
--transition-duration: var(--p-transition-duration);
--maskbg: var(--p-mask-background);
--card-shadow: var(--p-card-shadow);
--content-border-radius: var(--p-content-border-radius);
--layout-section-transition-duration: 0.2s;
--element-transition-duration: var(--p-transition-duration);

25
src/layout/AppMenu.vue
View File

@@ -13,8 +13,6 @@ const model = ref([
items: [
{ label: 'Form Layout', icon: 'pi pi-fw pi-id-card', to: '/uikit/formlayout' },
{ label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/uikit/input' },
{ label: 'Float Label', icon: 'pi pi-fw pi-bookmark', to: '/uikit/floatlabel' },
{ label: 'Invalid State', icon: 'pi pi-fw pi-exclamation-circle', to: '/uikit/invalidstate' },
{ label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/uikit/button', class: 'rotated-icon' },
{ label: 'Table', icon: 'pi pi-fw pi-table', to: '/uikit/table' },
{ label: 'List', icon: 'pi pi-fw pi-list', to: '/uikit/list' },
@@ -29,13 +27,6 @@ const model = ref([
{ label: 'Misc', icon: 'pi pi-fw pi-circle', to: '/uikit/misc' }
]
},
{
label: 'Prime Blocks',
items: [
{ label: 'Free Blocks', icon: 'pi pi-fw pi-eye', to: '/blocks', badge: 'NEW' },
{ label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: 'https://www.primefaces.org/primeblocks-vue', target: '_blank' }
]
},
{
label: 'Utilities',
items: [
@@ -148,22 +139,11 @@ const model = ref([
icon: 'pi pi-fw pi-question',
to: '/documentation'
},
{
label: 'Figma',
url: 'https://www.dropbox.com/scl/fi/bhfwymnk8wu0g5530ceas/sakai-2023.fig?rlkey=u0c8n6xgn44db9t4zkd1brr3l&dl=0',
icon: 'pi pi-fw pi-pencil',
target: '_blank'
},
{
label: 'View Source',
icon: 'pi pi-fw pi-search',
url: 'https://github.com/primefaces/sakai-vue',
target: '_blank'
},
{
label: 'Nuxt Version',
url: 'https://github.com/primefaces/sakai-nuxt',
icon: 'pi pi-fw pi-star'
}
]
}
@@ -176,11 +156,6 @@ const model = ref([
<app-menu-item v-if="!item.separator" :item="item" :index="i"></app-menu-item>
<li v-if="item.separator" class="menu-separator"></li>
</template>
<li>
<a href="https://www.primefaces.org/primeblocks-vue/#/" target="_blank">
<img src="/layout/images/banner-primeblocks.png" alt="Prime Blocks" class="w-full mt-4" />
</a>
</li>
</ul>
</template>

4
src/layout/composables/layout.js
View File

@@ -56,5 +56,7 @@ export function useLayout() {
const isDarkTheme = computed(() => layoutConfig.darkTheme);
return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem, toggleDarkMode, setPrimary, setSurface, setPreset };
const getPrimary = computed(() => layoutConfig.primary);
return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), onMenuToggle, isSidebarActive, isDarkTheme, getPrimary, setActiveMenuItem, toggleDarkMode, setPrimary, setSurface, setPreset };
}

12
src/router/index.js
View File

@@ -1,5 +1,5 @@
import { createRouter, createWebHistory } from 'vue-router';
import AppLayout from '@/layout/AppLayout.vue';
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
@@ -23,16 +23,6 @@ const router = createRouter({
name: 'input',
component: () => import('@/views/uikit/InputDoc.vue')
},
{
path: '/uikit/floatlabel',
name: 'floatlabel',
component: () => import('@/views/uikit/FloatLabelDoc.vue')
},
{
path: '/uikit/invalidstate',
name: 'invalidstate',
component: () => import('@/views/uikit/InvalidStateDoc.vue')
},
{
path: '/uikit/button',
name: 'button',

252
src/views/Dashboard.vue
View File

@@ -1,187 +1,178 @@
<script setup>
import { onMounted, reactive, ref, watch } from 'vue';
import { ProductService } from '@/service/ProductService';
import { useLayout } from '@/layout/composables/layout';
import { ProductService } from '@/service/ProductService';
import { onMounted, ref, watch } from 'vue';
const { isDarkTheme } = useLayout();
const { getPrimary, isDarkTheme } = useLayout();
const products = ref(null);
const lineData = reactive({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: '#2f4860',
borderColor: '#2f4860',
tension: 0.4
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
backgroundColor: '#00bb7e',
borderColor: '#00bb7e',
tension: 0.4
}
]
});
const chartData = ref(null);
const chartOptions = ref(null);
const items = ref([
{ label: 'Add New', icon: 'pi pi-fw pi-plus' },
{ label: 'Remove', icon: 'pi pi-fw pi-minus' }
]);
const lineOptions = ref(null);
onMounted(() => {
ProductService.getProductsSmall().then((data) => (products.value = data));
chartData.value = setChartData();
chartOptions.value = setChartOptions();
});
function setChartData() {
const documentStyle = getComputedStyle(document.documentElement);
return {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [
{
type: 'bar',
label: 'Personal Wallet',
backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-400') + ' 100%, #fff)',
data: [4000, 10000, 15000, 4000],
barThickness: 32
},
{
type: 'bar',
label: 'Corporate Wallet',
backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-300') + ' 100%, transparent)',
data: [2100, 8400, 2400, 7500],
barThickness: 32
},
{
type: 'bar',
label: 'Investment Wallet',
backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-200') + ' 100%, transparent)',
data: [4100, 5200, 3400, 7400],
borderRadius: {
topLeft: 8,
topRight: 8
},
borderSkipped: true,
barThickness: 32
}
]
};
}
function setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement);
const borderColor = documentStyle.getPropertyValue('--surface-border');
const textMutedColor = documentStyle.getPropertyValue('--text-color-secondary');
return {
maintainAspectRatio: false,
aspectRatio: 0.8,
scales: {
x: {
stacked: true,
ticks: {
color: textMutedColor
},
grid: {
color: 'transparent',
borderColor: 'transparent'
}
},
y: {
stacked: true,
ticks: {
color: textMutedColor
},
grid: {
color: borderColor,
borderColor: 'transparent',
drawTicks: false
}
}
}
};
}
const formatCurrency = (value) => {
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
};
const applyLightTheme = () => {
lineOptions.value = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
},
scales: {
x: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
},
y: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef'
}
}
}
};
};
const applyDarkTheme = () => {
lineOptions.value = {
plugins: {
legend: {
labels: {
color: '#ebedef'
}
}
},
scales: {
x: {
ticks: {
color: '#ebedef'
},
grid: {
color: 'rgba(160, 167, 181, .3)'
}
},
y: {
ticks: {
color: '#ebedef'
},
grid: {
color: 'rgba(160, 167, 181, .3)'
}
}
}
};
};
watch(isDarkTheme, () => {
chartData.value = setChartData();
chartOptions.value = setChartOptions();
});
watch(
isDarkTheme,
(val) => {
if (val) {
applyDarkTheme();
} else {
applyLightTheme();
}
},
{ immediate: true }
);
watch(getPrimary, () => {
chartData.value = setChartData();
chartOptions.value = setChartOptions();
});
</script>
<template>
<div class="grid grid-cols-12 gap-4">
<div class="grid grid-cols-12 gap-8">
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
<div class="card mb-0">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Orders</span>
<span class="block text-muted-color font-medium mb-4">Orders</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
</div>
<div class="flex items-center justify-center bg-blue-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">24 new </span>
<span class="text-surface-500 dark:text-surface-300">since last visit</span>
<span class="text-primary font-medium">24 new </span>
<span class="text-muted-color">since last visit</span>
</div>
</div>
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
<div class="card mb-0">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Revenue</span>
<span class="block text-muted-color font-medium mb-4">Revenue</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
</div>
<div class="flex items-center justify-center bg-orange-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">%52+ </span>
<span class="text-surface-500 dark:text-surface-300">since last week</span>
<span class="text-primary font-medium">%52+ </span>
<span class="text-muted-color">since last week</span>
</div>
</div>
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
<div class="card mb-0">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Customers</span>
<span class="block text-muted-color font-medium mb-4">Customers</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
</div>
<div class="flex items-center justify-center bg-cyan-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">520 </span>
<span class="text-surface-500 dark:text-surface-300">newly registered</span>
<span class="text-primary font-medium">520 </span>
<span class="text-muted-color">newly registered</span>
</div>
</div>
<div class="col-span-12 lg:col-span-6 xl:col-span-3">
<div class="card mb-0">
<div class="flex justify-between mb-4">
<div>
<span class="block text-surface-500 dark:text-surface-300 font-medium mb-4">Comments</span>
<span class="block text-muted-color font-medium mb-4">Comments</span>
<div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
</div>
<div class="flex items-center justify-center bg-purple-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
<i class="pi pi-comment text-purple-500 text-xl"></i>
</div>
</div>
<span class="text-green-500 font-medium">85 </span>
<span class="text-surface-500 dark:text-surface-300">responded</span>
<span class="text-primary font-medium">85 </span>
<span class="text-muted-color">responded</span>
</div>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card">
<h5>Recent Sales</h5>
<div class="font-semibold text-xl mb-4">Recent Sales</div>
<DataTable :value="products" :rows="5" :paginator="true" responsiveLayout="scroll">
<Column style="width: 15%">
<template #header> Image </template>
<Column style="width: 15%" header="Image">
<template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50" class="shadow" />
</template>
@@ -192,8 +183,7 @@ watch(
{{ formatCurrency(slotProps.data.price) }}
</template>
</Column>
<Column style="width: 15%">
<template #header> View </template>
<Column style="width: 15%" header="View">
<template #body>
<Button icon="pi pi-search" type="button" class="p-button-text"></Button>
</template>
@@ -202,7 +192,7 @@ watch(
</div>
<div class="card">
<div class="flex justify-between items-center mb-8">
<h5>Best Selling Products</h5>
<div class="font-semibold text-xl mb-4">Best Selling Products</div>
<div>
<Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu2.toggle($event)"></Button>
<Menu ref="menu2" :popup="true" :model="items"></Menu>
@@ -212,7 +202,7 @@ watch(
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
<div>
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Space T-Shirt</span>
<div class="mt-1 text-surface-600 dark:text-surface-200">Clothing</div>
<div class="mt-1 text-muted-color">Clothing</div>
</div>
<div class="mt-2 md:mt-0 flex items-center">
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
@@ -224,7 +214,7 @@ watch(
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
<div>
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Portal Sticker</span>
<div class="mt-1 text-surface-600 dark:text-surface-200">Accessories</div>
<div class="mt-1 text-muted-color">Accessories</div>
</div>
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
@@ -236,7 +226,7 @@ watch(
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
<div>
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Supernova Sticker</span>
<div class="mt-1 text-surface-600 dark:text-surface-200">Accessories</div>
<div class="mt-1 text-muted-color">Accessories</div>
</div>
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
@@ -248,19 +238,19 @@ watch(
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
<div>
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Wonders Notebook</span>
<div class="mt-1 text-surface-600 dark:text-surface-200">Office</div>
<div class="mt-1 text-muted-color">Office</div>
</div>
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
<div class="bg-green-500 h-full" style="width: 35%"></div>
</div>
<span class="text-green-500 ml-4 font-medium">%35</span>
<span class="text-primary ml-4 font-medium">%35</span>
</div>
</li>
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
<div>
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Mat Black Case</span>
<div class="mt-1 text-surface-600 dark:text-surface-200">Accessories</div>
<div class="mt-1 text-muted-color">Accessories</div>
</div>
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
@@ -272,7 +262,7 @@ watch(
<li class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
<div>
<span class="text-surface-900 dark:text-surface-0 font-medium mr-2 mb-1 md:mb-0">Robots T-Shirt</span>
<div class="mt-1 text-surface-600 dark:text-surface-200">Clothing</div>
<div class="mt-1 text-muted-color">Clothing</div>
</div>
<div class="mt-2 md:mt-0 ml-0 md:ml-20 flex items-center">
<div class="bg-surface-300 dark:bg-surface-500 rounded-border overflow-hidden w-40 lg:w-24" style="height: 8px">
@@ -286,19 +276,19 @@ watch(
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card">
<h5>Sales Overview</h5>
<Chart type="line" :data="lineData" :options="lineOptions" />
<div class="font-semibold text-xl mb-4">Sales Overview</div>
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-80" />
</div>
<div class="card">
<div class="flex items-center justify-between mb-6">
<h5>Notifications</h5>
<div class="font-semibold text-xl mb-4">Notifications</div>
<div>
<Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu1.toggle($event)"></Button>
<Menu ref="menu1" :popup="true" :model="items"></Menu>
</div>
</div>
<span class="block text-surface-600 dark:text-surface-200 font-medium mb-4">TODAY</span>
<span class="block text-muted-color font-medium mb-4">TODAY</span>
<ul class="p-0 mx-0 mt-0 mb-6 list-none">
<li class="flex items-center py-2 border-b border-surface">
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0">
@@ -317,7 +307,7 @@ watch(
</li>
</ul>
<span class="block text-surface-600 dark:text-surface-200 font-medium mb-4">YESTERDAY</span>
<span class="block text-muted-color font-medium mb-4">YESTERDAY</span>
<ul class="p-0 m-0 list-none">
<li class="flex items-center py-2 border-b border-surface">
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0">
@@ -339,18 +329,6 @@ watch(
</li>
</ul>
</div>
<div
class="px-6 py-8 shadow flex flex-col md:flex-row md:items-center justify-between mb-4"
style="border-radius: 1rem; background: linear-gradient(0deg, rgba(0, 123, 255, 0.5), rgba(0, 123, 255, 0.5)), linear-gradient(92.54deg, #1c80cf 47.88%, #ffffff 100.01%)"
>
<div>
<div class="text-blue-100 font-medium text-xl mt-2 mb-4">TAKE THE NEXT STEP</div>
<div class="text-white font-medium text-5xl">Try PrimeBlocks</div>
</div>
<div class="mt-6 mr-auto md:mt-0 md:mr-0">
<a href="https://www.primefaces.org/primeblocks-vue" class="p-button font-bold px-8 py-4 p-button-warning p-button-rounded p-button-raised"> Get Started </a>
</div>
</div>
</div>
</div>
</template>

103
src/views/uikit/FloatLabelDoc.vue
View File

@@ -1,103 +0,0 @@
<script setup>
import { ref, onMounted } from 'vue';
import { CountryService } from '@/service/CountryService';
const countries = ref([]);
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
const filteredCountries = ref(null);
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
const value4 = ref(null);
const value5 = ref(null);
const value6 = ref(null);
const value7 = ref(null);
const value8 = ref(null);
const value9 = ref(null);
const value10 = ref(null);
onMounted(() => {
CountryService.getCountries().then((data) => (countries.value = data));
});
const searchCountry = (event) => {
//in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
const filtered = [];
const query = event.query;
for (let i = 0; i < countries.value.length; i++) {
const country = countries.value[i];
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
filtered.push(country);
}
}
filteredCountries.value = filtered;
};
</script>
<template>
<Fluid class="card">
<h5>Float Label</h5>
<div class="flex flex-col md:flex-row gap-6">
<FloatLabel class="md:w-1/3">
<InputText type="text" id="inputtext" v-model="value1" />
<label for="inputtext">InputText</label>
</FloatLabel>
<FloatLabel class="md:w-1/3">
<AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" inputClass="w-full" />
<label for="autocomplete">AutoComplete</label>
</FloatLabel>
<FloatLabel class="md:w-1/3">
<DatePicker inputId="calendar" v-model="value3" />
<label for="calendar">DatePicker</label>
</FloatLabel>
</div>
<div class="flex flex-col md:flex-row gap-6 mt-6">
<FloatLabel class="md:w-1/3">
<AutoComplete inputId="chips" v-model="value4" multiple :typeahead="false" />
<label for="chips">Chips</label>
</FloatLabel>
<FloatLabel class="md:w-1/3">
<InputMask id="inputmask" mask="99/99/9999" v-model="value5" fluid />
<label for="inputmask">InputMask</label>
</FloatLabel>
<FloatLabel class="md:w-1/3">
<InputNumber id="inputnumber" v-model="value6" />
<label for="inputnumber">InputNumber</label>
</FloatLabel>
</div>
<div class="flex flex-col md:flex-row gap-6 mt-6">
<InputGroup class="md:!w-1/3">
<InputGroupAddon>
<i class="pi pi-user"></i>
</InputGroupAddon>
<FloatLabel>
<InputText type="text" id="inputgroup" v-model="value7" />
<label for="inputgroup">InputGroup</label>
</FloatLabel>
</InputGroup>
<FloatLabel class="md:w-1/3">
<Select id="dropdown" :options="cities" v-model="value8" optionLabel="name" class="w-full" />
<label for="dropdown">Select</label>
</FloatLabel>
<FloatLabel class="md:w-1/3">
<MultiSelect id="multiselect" :options="cities" v-model="value9" optionLabel="name" :filter="false" />
<label for="multiselect">MultiSelect</label>
</FloatLabel>
</div>
<div class="flex flex-col md:flex-row gap-6 mt-6">
<FloatLabel class="md:w-1/3">
<Textarea inputId="textarea" rows="3" cols="30" v-model="value10" />
<label for="textarea">Textarea</label>
</FloatLabel>
</div>
</Fluid>
</template>

4
src/views/uikit/InputDoc.vue
View File

@@ -1,7 +1,7 @@
<script setup>
import { ref, onMounted } from 'vue';
import { CountryService } from '@/service/CountryService';
import { NodeService } from '@/service/NodeService';
import { onMounted, ref } from 'vue';
const floatValue = ref(null);
const autoValue = ref(null);
@@ -78,7 +78,7 @@ const searchCountry = (event) => {
<Fluid class="flex flex-col md:flex-row gap-6">
<div class="md:w-1/2">
<div class="card flex flex-col gap-4">
<h5>InputText</h5>
<div class="font-semibold text-xl mb-4">InputText</div>
<div class="flex flex-col md:flex-row gap-4">
<InputText type="text" placeholder="Default" />
<InputText type="text" placeholder="Disabled" :disabled="true" />

93
src/views/uikit/InvalidStateDoc.vue
View File

@@ -1,93 +0,0 @@
<script setup>
import { ref, onMounted } from 'vue';
import { CountryService } from '@/service/CountryService';
const countries = ref(null);
const filteredCountries = ref(null);
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
const value4 = ref(null);
const value5 = ref(null);
const value6 = ref(null);
const value7 = ref(null);
const value8 = ref(null);
const value9 = ref(null);
const value10 = ref(null);
const cities = ref([
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
]);
onMounted(() => {
CountryService.getCountries().then((data) => {
countries.value = data;
});
});
const searchCountry = (event) => {
setTimeout(() => {
if (!event.query.trim().length) {
filteredCountries.value = [...countries];
} else {
filteredCountries.value = countries.value.filter((country) => {
return country.name.toLowerCase().startsWith(event.query.toLowerCase());
});
}
}, 250);
};
</script>
<template>
<Fluid class="card">
<h5>Invalid State</h5>
<div class="flex flex-col md:flex-row gap-6">
<div class="md:w-1/2">
<div class="flex flex-col gap-2">
<label for="inputtext">InputText</label>
<InputText id="inputtext" type="text" v-model="value1" invalid />
</div>
<div class="flex flex-col gap-2">
<label for="autocomplete">AutoComplete</label>
<AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" invalid inputClass="w-full" />
</div>
<div class="flex flex-col gap-2">
<label for="calendar">DatePicker</label>
<DatePicker id="calendar" v-model="value3" invalid :showIcon="true" />
</div>
<div class="flex flex-col gap-2">
<label for="chips">Chips</label>
<AutoComplete id="chips" v-model="value4" invalid multiple :typeahead="false" />
</div>
<div class="flex flex-col gap-2">
<label for="password">Password</label>
<Password id="password" v-model="value10" invalid />
</div>
</div>
<div class="md:w-1/2">
<div class="flex flex-col gap-2">
<label for="inputmask">InputMask</label>
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" invalid />
</div>
<div class="flex flex-col gap-2">
<label for="inputnumber">InputNumber</label>
<InputNumber id="inputnumber" v-model="value6" invalid />
</div>
<div class="flex flex-col gap-2"></div>
<label for="dropdown">Select</label>
<Select id="dropdown" v-model="value7" :options="cities" optionLabel="name" invalid />
<div class="flex flex-col gap-2">
<label for="multiselect">MultiSelect</label>
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" invalid />
</div>
<div class="flex flex-col gap-2">
<label for="textarea">Textarea</label>
<Textarea id="textarea" v-model="value9" rows="3" invalid />
</div>
</div>
</div>
</Fluid>
</template>