Skip to content

Commit

Permalink
Updated: NumberInput compononent variant code for documentation.
Browse files Browse the repository at this point in the history
  • Loading branch information
@moshiur01
moshiur01 committed Dec 4, 2024
1 parent 748c0fd commit 48a9522
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 39 deletions.
20 changes: 11 additions & 9 deletions components/content/docs/components/numberInput/DefaultNumberInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,16 @@ const inputValue = ref(0);

<template>
<CodeHighlightWithPreview :code="DefaultNumberInputCode">
<NumberInput>
<NumberInputButton>
<PhosphorIconMinus :size="16" />
</NumberInputButton>
<NumberInputBox v-model="inputValue" />
<NumberInputButton>
<PhosphorIconPlus :size="16" />
</NumberInputButton>
</NumberInput>
<div class="flex items-center justify-center">
<NumberInput class="w-full">
<NumberInputButton>
<PhosphorIconMinus :size="16" />
</NumberInputButton>
<NumberInputBox v-model="inputValue" />
<NumberInputButton>
<PhosphorIconPlus :size="16" />
</NumberInputButton>
</NumberInput>
</div>
</CodeHighlightWithPreview>
</template>
32 changes: 17 additions & 15 deletions components/content/docs/components/numberInput/NumberInputWithLabel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,22 @@ const inputValue = ref(20);

<template>
<CodeHighlightWithPreview :code="NumberInputWithLabelCode">
<fieldset class="space-y-1">
<Label>Choose Number</Label>
<NumberInput>
<NumberInputButton>
<PhosphorIconMinus :size="16" />
</NumberInputButton>
<NumberInputBox v-model="inputValue" />
<NumberInputButton>
<PhosphorIconPlus :size="16" />
</NumberInputButton>
</NumberInput>
<p class="text-body-4 font-normal text-metal-600 dark:text-metal-300">
Number Must be between 1 to 100
</p>
</fieldset>
<div class="flex w-full items-center justify-center">
<div class="w-full max-w-sm space-y-1">
<Label>Choose Number</Label>
<NumberInput>
<NumberInputButton>
<PhosphorIconMinus :size="16" />
</NumberInputButton>
<NumberInputBox v-model="inputValue" />
<NumberInputButton>
<PhosphorIconPlus :size="16" />
</NumberInputButton>
</NumberInput>
<p class="text-body-4 font-normal text-metal-600 dark:text-metal-300">
Number Must be between 1 to 100
</p>
</div>
</div>
</CodeHighlightWithPreview>
</template>
32 changes: 17 additions & 15 deletions components/content/docs/components/numberInput/NumberInputWithState.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,22 @@ const decrementNum = () => {

<template>
<CodeHighlightWithPreview :code="NumberInputWithStateCode">
<fieldset class="space-y-1">
<Label>Choose Number</Label>
<NumberInput>
<NumberInputButton :disabled="num === 0" @click="decrementNum">
<PhosphorIconMinus :size="16" />
</NumberInputButton>
<NumberInputBox v-model="num" :min="0" :max="100" />
<NumberInputButton :disabled="num === 100" @click="incrementNum">
<PhosphorIconPlus :size="16" />
</NumberInputButton>
</NumberInput>
<p class="text-body-4 font-normal text-metal-600 dark:text-metal-300">
Number Must be between 1 to 100
</p>
</fieldset>
<div class="flex w-full items-center justify-center">
<div class="w-full max-w-sm space-y-1">
<Label>Choose Number</Label>
<NumberInput>
<NumberInputButton :disabled="num === 0" @click="decrementNum">
<PhosphorIconMinus :size="16" />
</NumberInputButton>
<NumberInputBox v-model="num" />
<NumberInputButton :disabled="num === 100" @click="incrementNum">
<PhosphorIconPlus :size="16" />
</NumberInputButton>
</NumberInput>
<p class="text-body-4 font-normal text-metal-600 dark:text-metal-300">
Number Must be between 1 to 100
</p>
</div>
</div>
</CodeHighlightWithPreview>
</template>

0 comments on commit 48a9522

Please sign in to comment.