Skip to content

Commit

Permalink
refactor: add demo before code for ui components
Browse files Browse the repository at this point in the history
  • Loading branch information
@KabinKhandThakuri
KabinKhandThakuri committed Jan 9, 2025
1 parent 727dad5 commit a2d97e8
Show file tree
Hide file tree
Showing 22 changed files with 848 additions and 841 deletions.
120 changes: 60 additions & 60 deletions apps/demo/src/views/UI/badge/Index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
<h2>{{ $t("ui.badge.usage.basic") }}</h2>

<div class="section-content">
<BadgeComponent :label="$t('ui.badge.label.basic')" />

<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;template&gt;
Expand All @@ -21,15 +23,15 @@
&lt;/script&gt;
</SshPre>
<!-- eslint-enable -->

<BadgeComponent :label="$t('ui.badge.label.basic')" />
</div>
</section>

<section>
<h2>{{ $t("ui.badge.usage.withI18n") }}</h2>

<div class="section-content">
<BadgeComponent :label="$t('ui.badge.label.addedIn')" />

<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;template&gt;
Expand All @@ -44,15 +46,15 @@
&lt;/script&gt;
</SshPre>
<!-- eslint-enable -->

<BadgeComponent :label="$t('ui.badge.label.addedIn')" />
</div>
</section>

<section>
<h2>{{ $t("ui.badge.usage.rounded") }}</h2>

<div class="section-content">
<BadgeComponent :label="$t('ui.badge.label.rounded')" rounded />

<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;template&gt;
Expand All @@ -64,32 +66,13 @@
&lt;/script&gt;
</SshPre>
<!-- eslint-enable -->

<BadgeComponent :label="$t('ui.badge.label.rounded')" rounded />
</div>
</section>

<section>
<h2>{{ $t("ui.badge.usage.severity") }}</h2>

<div class="section-content">
<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;template&gt;
&lt;Badge label="Primary" severity="primary" /&gt;
&lt;Badge label="Secondary" severity="secondary" /&gt;
&lt;Badge label="Alternate" severity="alternate" /&gt;
&lt;Badge label="Success" severity="success" /&gt;
&lt;Badge label="Danger" severity="danger" /&gt;
&lt;Badge label="Warning" severity="warning" /&gt;
&lt;/template&gt;

&lt;script setup lang="ts"&gt;
import { Badge } from "@dzangolab/vue3-ui";
&lt;/script&gt;
</SshPre>
<!-- eslint-enable -->

<div class="container">
<BadgeComponent
:label="$t('ui.badge.label.primary')"
Expand All @@ -116,50 +99,54 @@
severity="warning"
/>
</div>
</div>
</section>

<section>
<h2>{{ $t("ui.badge.usage.icon") }}</h2>

<div class="section-content">
<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;template&gt;
&lt;Badge icon-left="pi pi-thumbs-up" /&gt;
&lt;Badge icon-right="pi pi-thumbs-down" /&gt;
&lt;Badge label="Primary" severity="primary" /&gt;
&lt;Badge label="Secondary" severity="secondary" /&gt;
&lt;Badge label="Alternate" severity="alternate" /&gt;
&lt;Badge label="Success" severity="success" /&gt;
&lt;Badge label="Danger" severity="danger" /&gt;
&lt;Badge label="Warning" severity="warning" /&gt;
&lt;/template&gt;

&lt;script setup lang="ts"&gt;
import { Badge } from "@dzangolab/vue3-ui";
&lt;/script&gt;
</SshPre>
<!-- eslint-enable -->

<div class="container">
<BadgeComponent icon-left="pi pi-thumbs-up" />
<BadgeComponent icon-right="pi pi-thumbs-down" />
</div>
</div>
</section>

<section>
<h2>{{ $t("ui.badge.usage.iconPackage") }}</h2>
<h2>{{ $t("ui.badge.usage.icon") }}</h2>

<div class="section-content">
<div class="container">
<BadgeComponent icon-left="pi pi-thumbs-up" />
<BadgeComponent icon-right="pi pi-thumbs-down" />
</div>

<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;template&gt;
&lt;Badge label="Locked" icon-left="pi pi-lock" /&gt;
&lt;Badge label="Unlocked" icon-right="fa-solid fa-lock-open" severity="success /&gt;
&lt;Badge icon-left="pi pi-thumbs-up" /&gt;
&lt;Badge icon-right="pi pi-thumbs-down" /&gt;
&lt;/template&gt;

&lt;script setup lang="ts"&gt;
import { Badge } from "@dzangolab/vue3-ui";
&lt;/script&gt;
</SshPre>
<!-- eslint-enable -->
</div>
</section>

<section>
<h2>{{ $t("ui.badge.usage.iconPackage") }}</h2>

<div class="section-content">
<div class="container">
<BadgeComponent
:label="$t('ui.badge.label.locked')"
Expand All @@ -172,26 +159,26 @@
severity="success"
/>
</div>
</div>
</section>

<section>
<h2>{{ $t("ui.badge.usage.iconAndLabel") }}</h2>

<div class="section-content">
<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;template&gt;
&lt;Badge label="Locked" icon-left="pi pi-lock" /&gt;
&lt;Badge label="Unlocked" icon-right="pi pi-lock-open" severity="success /&gt;
&lt;Badge label="Unlocked" icon-right="fa-solid fa-lock-open" severity="success /&gt;
&lt;/template&gt;

&lt;script setup lang="ts"&gt;
import { Badge } from "@dzangolab/vue3-ui";
&lt;/script&gt;
</SshPre>
<!-- eslint-enable -->
</div>
</section>

<section>
<h2>{{ $t("ui.badge.usage.iconAndLabel") }}</h2>

<div class="section-content">
<div class="container">
<BadgeComponent
:label="$t('ui.badge.label.locked')"
Expand All @@ -204,13 +191,40 @@
severity="success"
/>
</div>

<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;template&gt;
&lt;Badge label="Locked" icon-left="pi pi-lock" /&gt;
&lt;Badge label="Unlocked" icon-right="pi pi-lock-open" severity="success /&gt;
&lt;/template&gt;

&lt;script setup lang="ts"&gt;
import { Badge } from "@dzangolab/vue3-ui";
&lt;/script&gt;
</SshPre>
<!-- eslint-enable -->
</div>
</section>

<section>
<h2>{{ $t("ui.badge.usage.iconElement") }}</h2>

<div class="section-content">
<div class="container">
<BadgeComponent :label="$t('ui.badge.label.correct')">
<template #iconLeft>
<i class="pi pi-check" />
</template>
</BadgeComponent>

<BadgeComponent :label="$t('ui.badge.label.wrong')" severity="danger">
<template #iconRight>
<i class="pi pi-times" />
</template>
</BadgeComponent>
</div>

<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;template&gt;
Expand All @@ -232,20 +246,6 @@
&lt;/script&gt;
</SshPre>
<!-- eslint-enable -->

<div class="container">
<BadgeComponent :label="$t('ui.badge.label.correct')">
<template #iconLeft>
<i class="pi pi-check" />
</template>
</BadgeComponent>

<BadgeComponent :label="$t('ui.badge.label.wrong')" severity="danger">
<template #iconRight>
<i class="pi pi-times" />
</template>
</BadgeComponent>
</div>
</div>
</section>
</UiPage>
Expand Down
Loading

0 comments on commit a2d97e8

Please sign in to comment.