-
-
Notifications
You must be signed in to change notification settings - Fork 216
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
369 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| <script setup lang="ts"> | ||
| import { ref } from 'vue' | ||
| import { Icon } from '@iconify/vue' | ||
| import { ListboxContent, ListboxItem, ListboxRoot } from 'reka-ui' | ||
| const states = [ | ||
| 'California', | ||
| 'Illinois', | ||
| 'Maryland', | ||
| 'Texas', | ||
| 'Florida', | ||
| 'Colorado', | ||
| 'Connecticut ', | ||
| ] | ||
| const list1 = ref<string[]>([...states]) | ||
| const list2 = ref<string[]>([]) | ||
| const selectedList1 = ref([]) | ||
| const selectedList2 = ref([]) | ||
| const searchValue1 = ref([]) | ||
| const searchValue2 = ref([]) | ||
| function transferAction(action: '1to2' | '2to1') { | ||
| const [fromList, toList, selectedList] = action === '1to2' | ||
| ? [list1, list2, selectedList1] | ||
| : [list2, list1, selectedList2] | ||
| fromList.value = fromList.value.filter(item => !selectedList.value.includes(item)) | ||
| toList.value.push(...selectedList.value) | ||
| selectedList.value = [] | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="text-foreground flex items-center "> | ||
| <ListboxRoot | ||
| v-model="selectedList1" | ||
| class="bg-card rounded-lg border border-muted w-48" | ||
| multiple | ||
| > | ||
| <div class="px-3 py-2"> | ||
| <h2 class="text-muted-foreground text-xs font-semibold"> | ||
| List 1 | ||
| </h2> | ||
| </div> | ||
|
|
||
| <ListboxContent class="h-44 overflow-auto p-1 border-t border-muted"> | ||
| <ListboxItem | ||
| v-for="item in list1" | ||
| :key="item" | ||
| :value="item" | ||
| class="text-sm px-2 py-1 cursor-default data-[state=checked]:bg-green9 data-[state=checked]:text-white rounded select-none" | ||
| > | ||
| {{ item }} | ||
| </ListboxItem> | ||
| </ListboxContent> | ||
| </ListboxRoot> | ||
|
|
||
| <div class="flex mx-2 gap-2"> | ||
| <button | ||
| class="w-8 h-8 text-lg border border-muted flex items-center justify-center rounded bg-card hover:bg-muted disabled:opacity-50" | ||
| :disabled="!selectedList2.length" | ||
| @click="transferAction('2to1')" | ||
| > | ||
| <Icon icon="lucide:chevron-left" /> | ||
| </button> | ||
| <button | ||
| class="w-8 h-8 text-lg border border-muted flex items-center justify-center rounded bg-card hover:bg-muted disabled:opacity-50" | ||
| :disabled="!selectedList1.length" | ||
| @click="transferAction('1to2')" | ||
| > | ||
| <Icon icon="lucide:chevron-right" /> | ||
| </button> | ||
| </div> | ||
|
|
||
| <ListboxRoot | ||
| v-model="selectedList2" | ||
| class="bg-card rounded-lg border border-muted w-48" | ||
| multiple | ||
| > | ||
| <div class="px-3 py-2"> | ||
| <h2 class="text-muted-foreground text-xs font-semibold"> | ||
| List 2 | ||
| </h2> | ||
| </div> | ||
|
|
||
| <ListboxContent class="h-44 overflow-auto p-1 border-t border-muted"> | ||
| <ListboxItem | ||
| v-for="item in list2" | ||
| :key="item" | ||
| :value="item" | ||
| class="text-sm px-2 py-1 cursor-default data-[state=checked]:bg-green9 data-[state=checked]:text-white rounded select-none" | ||
| > | ||
| {{ item }} | ||
| </ListboxItem> | ||
| </ListboxContent> | ||
| </ListboxRoot> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| <script setup lang="ts"> | ||
| import { computed, onMounted, ref } from 'vue' | ||
| import { ProgressIndicator, ProgressRoot } from 'reka-ui' | ||
| const RADIUS = 45 | ||
| const circumference = 2 * Math.PI * RADIUS | ||
| const progress = ref(0) | ||
| const dashOffset = computed(() => | ||
| (progress.value / 100) * circumference, | ||
| ) | ||
| const trackPath = computed(() => { | ||
| const r = RADIUS | ||
| return ` | ||
| M 50 50 | ||
| m 0 -${r} | ||
| a ${r} ${r} 0 1 1 0 ${r * 2} | ||
| a ${r} ${r} 0 1 1 0 -${r * 2} | ||
| ` | ||
| }) | ||
| onMounted(() => { | ||
| setInterval(() => { | ||
| if (progress.value < 100) { | ||
| progress.value += 10 | ||
| } | ||
| else { | ||
| progress.value = 0 | ||
| } | ||
| }, 1000) | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="relative w-40 h-40"> | ||
| <ProgressRoot | ||
| v-model="progress" | ||
| as-child | ||
| > | ||
| <svg | ||
| class="w-full h-full" | ||
| viewBox="0 0 100 100" | ||
| > | ||
| <!-- Background circle --> | ||
| <path | ||
| :d="trackPath" | ||
| class="fill-none stroke-muted stroke-[6px]" | ||
| /> | ||
| <!-- Progress circle --> | ||
| <ProgressIndicator as-child> | ||
| <path | ||
| :d="trackPath" | ||
| class="fill-none stroke-primary stroke-[6px] transition-[stroke-dasharray,opacity] duration-700 data-[value='0']:opacity-0" | ||
| :style="{ | ||
| 'stroke-linecap': 'round', | ||
| 'stroke-dasharray': `${dashOffset}px, ${circumference}px`, | ||
| 'stroke-dashoffset': '0px', | ||
| }" | ||
| /> | ||
| </ProgressIndicator> | ||
| </svg> | ||
| <div class="absolute inset-0 flex items-center justify-center"> | ||
| <span class="text-lg font-bold text-foreground">{{ progress }}%</span> | ||
| </div> | ||
| </ProgressRoot> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <script setup lang="ts"> | ||
| import { ref } from 'vue' | ||
| import { NumberFieldInput, NumberFieldRoot, SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'reka-ui' | ||
| const sliderValue = ref([20, 50]) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="w-[200px] flex flex-col"> | ||
| <SliderRoot | ||
| v-model="sliderValue" | ||
| class="relative flex items-center select-none touch-none h-5" | ||
| :max="100" | ||
| :step="1" | ||
| > | ||
| <SliderTrack class="bg-blackA10 relative grow rounded-full h-[3px]"> | ||
| <SliderRange class="absolute bg-white rounded-full h-full" /> | ||
| </SliderTrack> | ||
| <SliderThumb | ||
| v-for="thumb in sliderValue.length" | ||
| :key="thumb" | ||
| class="block w-5 h-5 bg-white shadow-[0_2px_10px] shadow-blackA7 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA8" | ||
| aria-label="Volume" | ||
| /> | ||
| </SliderRoot> | ||
|
|
||
| <div class="mt-2 flex items-center justify-between"> | ||
| <NumberFieldRoot | ||
| v-model="sliderValue[0]" | ||
| :max="sliderValue[1]" | ||
| > | ||
| <NumberFieldInput class="bg-card border border-muted rounded text-foreground text-xs py-1.5 font-semibold w-12 text-center" /> | ||
| </NumberFieldRoot> | ||
| <NumberFieldRoot | ||
| v-model="sliderValue[1]" | ||
| :min="sliderValue[0]" | ||
| > | ||
| <NumberFieldInput class="bg-card border border-muted rounded text-foreground text-xs py-1.5 font-semibold w-12 text-center" /> | ||
| </NumberFieldRoot> | ||
| </div> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| <script setup lang="ts"> | ||
| import { ref } from 'vue' | ||
| import { SliderRange, SliderRoot, SliderThumb, SliderTrack, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui' | ||
| const sliderValue = ref([50]) | ||
| </script> | ||
|
|
||
| <template> | ||
| <TooltipProvider :delay-duration="0"> | ||
| <SliderRoot | ||
| v-model="sliderValue" | ||
| class="relative flex items-center select-none touch-none w-[200px] h-5" | ||
| :max="100" | ||
| :step="1" | ||
| > | ||
| <SliderTrack class="bg-blackA10 relative grow rounded-full h-[3px]"> | ||
| <SliderRange class="absolute bg-white rounded-full h-full" /> | ||
| </SliderTrack> | ||
|
|
||
| <TooltipRoot disable-closing-trigger> | ||
| <TooltipTrigger as-child> | ||
| <SliderThumb | ||
| class="block w-5 h-5 bg-white shadow-[0_2px_10px] shadow-blackA7 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA8" | ||
| aria-label="Volume" | ||
| /> | ||
| </TooltipTrigger> | ||
|
|
||
| <TooltipPortal> | ||
| <TooltipContent | ||
| class="bg-card px-2 py-1 rounded text-foreground text-xs font-semibold border border-muted" | ||
| :side-offset="6" | ||
| > | ||
| {{ sliderValue[0] }} | ||
| </TooltipContent> | ||
| </TooltipPortal> | ||
| </TooltipRoot> | ||
| </SliderRoot> | ||
| </TooltipProvider> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| --- | ||
| title: Listbox Transfer | ||
| tags: | ||
| - Listbox | ||
| --- | ||
|
|
||
| # Listbox Transfer | ||
|
|
||
| <Description> | ||
|
|
||
| Render a Transfer component with Listbox. | ||
|
|
||
| </Description> | ||
|
|
||
| <Tags /> | ||
|
|
||
| <ComponentPreview type="example" name="ListboxTransfer" /> | ||
|
|
||
| <ExampleSection> | ||
|
|
||
| ### Listbox Transfer | ||
|
|
||
| </ExampleSection> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| --- | ||
| title: Circular Progress | ||
| tags: | ||
| - Progress | ||
| --- | ||
|
|
||
| # Circular Progress | ||
|
|
||
| <Description> | ||
|
|
||
| Rendering progress bar as a Circular Progress. | ||
|
|
||
| </Description> | ||
|
|
||
| <Tags /> | ||
|
|
||
| <ComponentPreview type="example" name="ProgressCircular" /> | ||
|
|
||
| <ExampleSection> | ||
|
|
||
| ### Circular Progress | ||
|
|
||
| </ExampleSection> |
Oops, something went wrong.