zoeissleeping/vueless
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Zoe
2023-05-30 15:04:51 -05:00
commit 539805dacb
20 changed files with 14788 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
pages/index.vue Normal file
View File

@@ -0,0 +1,203 @@
<script setup>
const volume = ref(25);
const airplaneMode = ref(false);
const toggle = ref(false);
const group = ref('center');
const burgerIngredients = ref(['tomato', 'cheese']);
</script>
<template>
<div class="presentation">
<div class="container">
<button class="vl-button">
Button
</button>
</div>
<div class="container">
<Transition>
<VlDropdown>
<button>
Button
</button>
<button>
Button
</button>
<button>
Button
</button>
</VlDropdown>
</Transition>
</div>
<div class="container">
<div>
{{ group }}
<VlToggleGroup v-model="group" type="single" :defaultValue="group" aria-label="Text alignment">
<VlToggleGroupItem aria-label="Left aligned" value="left">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h10M4 18h14" />
</svg>
</VlToggleGroupItem>
<VlToggleGroupItem aria-label="Center aligned" value="center">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M8 12h8M6 18h12" />
</svg>
</VlToggleGroupItem>
<VlToggleGroupItem aria-label="Right aligned" value="right">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16m-10 6h10M6 18h14" />
</svg>
</VlToggleGroupItem>
</VlToggleGroup>
</div>
<div>
{{ burgerIngredients }}
<VlToggleGroup v-model="burgerIngredients" type="multiple" :defaultValue="burgerIngredients" aria-label="Burger ingredients">
<VlToggleGroupItem aria-label="Cheese" value="cheese">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M4.519 20.008L21 20v-3.5a2 2 0 1 1 0-4V9H4.278" />
<path
d="m21 9l-9.385-4.992c-2.512.12-4.758 1.42-6.327 3.425C3.865 9.253 3 11.654 3 14.287c0 2.117.56 4.085 1.519 5.721M15 13v.01M8 13v.01M11 16v.01" />
</g>
</svg>
</VlToggleGroupItem>
<VlToggleGroupItem aria-label="Tomato" value="tomato">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 48 48">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
<path
d="M24 44c11.046 0 20-7.387 20-16.5c0-6.442-4.475-11.799-11-14.516L29.5 14.5L30 20l-6.5-2l-6.5 2v-5.5l-3-1.516C8.022 15.837 4 21.393 4 27.5C4 36.613 12.954 44 24 44Z" />
<path
d="m23.5 4l3.809 5.117L36 9.91l-6.337 4.573L31.5 21l-8-3l-8 3l1.837-6.517L11 9.91l8.691-.793L23.5 4Z" />
</g>
</svg>
</VlToggleGroupItem>
<VlToggleGroupItem aria-label="Onions" value="onion">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32">
<path fill="currentColor"
d="M12.74 2.458c0-1.333 1.658-1.981 2.553-.959l1.182 1.354L17.657 1.5c.895-1.023 2.553-.375 2.553.958v1.83c0 .738.44 1.405 1.136 1.712c4.464 1.892 7.604 6.325 7.604 11.488c0 6.076-4.349 11.146-10.11 12.25v.01c0 .69-.56 1.25-1.25 1.25h-2.16c-.69 0-1.25-.56-1.25-1.25v-.005C8.458 28.632 4 23.438 4 17.478c0-5.166 3.143-9.589 7.608-11.48a1.86 1.86 0 0 0 1.132-1.7v-1.84Zm2 1.449v.39a3.86 3.86 0 0 1-2.346 3.54l-.004.002c-.184.077-.364.16-.542.248c-1.96 2.085-3.118 5.341-3.118 8.84c0 5.31 2.645 9.753 6.153 10.805c-1.346-2.014-2.063-6.514-2.063-10.814c0-3.76.5-7.21 1.37-9.44l.75.29c-.82 2.11-1.31 5.53-1.31 9.15c0 3.03.33 5.88.94 8.02c.552 1.949 1.2 2.82 1.69 3.022c.147.003.295.003.441 0c.489-.203 1.137-1.074 1.689-3.022c.6-2.14.94-4.98.94-8.02c0-3.61-.49-7.03-1.31-9.15l.75-.29c.87 2.24 1.37 5.68 1.37 9.44c-.007 4.3-.72 8.801-2.064 10.814c3.508-1.05 6.154-5.494 6.154-10.804c0-3.495-1.155-6.746-3.109-8.832a10.358 10.358 0 0 0-.56-.257l-.012-.005a3.874 3.874 0 0 1-2.339-3.546v-.381l-.635.726a1.456 1.456 0 0 1-2.186.016l-.006-.007l-.643-.735ZM9.67 9.52A10.437 10.437 0 0 0 6 17.478c0 3.797 2.18 7.24 5.335 9.08c-.365-.372-.71-.786-1.035-1.24c-1.61-2.25-2.49-5.23-2.49-8.39c0-2.728.67-5.326 1.86-7.407Zm11.817 17.167a10.474 10.474 0 0 0 5.463-9.2c0-3.176-1.416-6.025-3.649-7.947c1.184 2.078 1.849 4.668 1.849 7.387c0 3.16-.88 6.14-2.49 8.39a10.42 10.42 0 0 1-1.173 1.37Z" />
</svg>
</VlToggleGroupItem>
</VlToggleGroup>
</div>
</div>
<div class="container">
<div style="display: flex; gap: 6px 0; flex-direction: column;">
<div style="display: flex;">
<label for="airplane-mode" style=" margin-right: 8px;">Airplane mode</label>
<VlToggleSwitch :checked="airplaneMode" v-model="airplaneMode" id="airplane-mode" />
</div>
<div style="display: flex;">
<label for="wifi" style=" margin-right: 8px;">Wifi</label>
<VlToggleSwitch :checked="!airplaneMode" :disabled="(airplaneMode) ? true : false" id="wifi" />
</div>
</div>
</div>
<div class="container">
<div>
<label for="Volume">Volume: {{ volume }}</label>
<VlSlider :value="volume" v-model="volume" id="Volume" :step="1" :max="100" />
</div>
<VlSlider label="Volume" :step="1" :min="0" :max="10" />
<VlSlider label="Volume" :value="1" :min="0" :max="9" :step="3" />
</div>
<div class="container">
<VlAccordion type="single" defaultValue="item-1">
<VlAccordionItem value="item-1">
<VlAccordionTrigger>
Section 1
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m6 9l6 6l6-6" />
</svg>
</VlAccordionTrigger>
<VlAccordionContent>
Content for section 1
</VlAccordionContent>
</VlAccordionItem>
<VlAccordionItem value="item-2">
<VlAccordionTrigger>
Section 2
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m6 9l6 6l6-6" />
</svg>
</VlAccordionTrigger>
<VlAccordionContent>
Content for section 2
</VlAccordionContent>
</VlAccordionItem>
<VlAccordionItem value="item-3">
<VlAccordionTrigger>
Section 3
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m6 9l6 6l6-6" />
</svg>
</VlAccordionTrigger>
<VlAccordionContent>
Content for section 3
</VlAccordionContent>
</VlAccordionItem>
<VlAccordionItem value="item-4">
<VlAccordionTrigger>
Section 4
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m6 9l6 6l6-6" />
</svg>
</VlAccordionTrigger>
<VlAccordionContent>
Content for section 4
</VlAccordionContent>
</VlAccordionItem>
</VlAccordion>
</div>
<div class="container">
<div>
{{ toggle }}
<VlToggle v-model="toggle" aria-label="Toggle italic">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5h6M7 19h6m1-14l-4 14" />
</svg>
</VlToggle>
</div>
</div>
</div>
</template>
<style scoped>
.presentation {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
min-height: calc(100vh - 24px);
}
.container {
position: relative;
overflow: hidden;
display: grid;
place-items: center;
width: 420px;
height: 275px;
background: #121314;
border-radius: 12px;
border: 1px solid #232425;
box-shadow: 0px 0px 12px #00000012;
}</style>