Skip to content

Commit ff73e22

Browse files
cab-mikeecab-mikee
committed
chore: wip
1 parent b07023b commit ff73e22

26 files changed

+1111
-1
lines changed

‎storage/framework/core/components/combobox/src/components/Styling.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ async function handleCopyCode() {
4848
<div class="mt-5">
4949
<p class="my-3 text-base">
5050
Each component exposes information about its current state via <a class="text-blue-500" href="https://vuejs.org/guide/essentials/slots.html#slot-props" target="_blank">slot props</a> that you can use to conditionally apply different styles or render different content.
51-
51+
<br /><br />
5252
For example, the <code><b>ComboboxOption</b></code> component exposes an <code><b>active</b></code> state, which tells you if the item is currently focused via the mouse or keyboard.
5353
</p>
5454

‎storage/framework/core/components/radio-group/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Vue 3 + Vite
2+
3+
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4+
5+
## Recommended IDE Setup
6+
7+
- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur

‎storage/framework/core/components/radio-group/components.d.ts

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/* eslint-disable */
2+
// @ts-nocheck
3+
// Generated by unplugin-vue-components
4+
// Read more: https://github.com/vuejs/core/pull/3399
5+
export {}
6+
7+
/* prettier-ignore */
8+
declare module 'vue' {
9+
export interface GlobalComponents {
10+
'Carbon:cafe': typeof import('~icons/carbon/cafe')['default']
11+
'Carbon:logoTwitter': typeof import('~icons/carbon/logo-twitter')['default']
12+
CheckIcon: typeof import('./src/components/icons/CheckIcon.vue')['default']
13+
CloseIcon: typeof import('./src/components/icons/CloseIcon.vue')['default']
14+
CopyIcon: typeof import('./src/components/icons/CopyIcon.vue')['default']
15+
ErrorIcon: typeof import('./src/components/icons/ErrorIcon.vue')['default']
16+
Example: typeof import('./src/components/Example.vue')['default']
17+
Expand: typeof import('./src/components/Expand.vue')['default']
18+
Footer: typeof import('./src/components/Footer.vue')['default']
19+
HeadlessToast: typeof import('./src/components/HeadlessToast.vue')['default']
20+
HeadlessToastWithProps: typeof import('./src/components/HeadlessToastWithProps.vue')['default']
21+
Hero: typeof import('./src/components/Hero.vue')['default']
22+
InfoIcon: typeof import('./src/components/icons/InfoIcon.vue')['default']
23+
Installation: typeof import('./src/components/Installation.vue')['default']
24+
Loader: typeof import('./src/components/icons/Loader.vue')['default']
25+
'Mdi:heart': typeof import('~icons/mdi/heart')['default']
26+
Others: typeof import('./src/components/Others.vue')['default']
27+
Position: typeof import('./src/components/Position.vue')['default']
28+
RouterLink: typeof import('vue-router')['RouterLink']
29+
RouterView: typeof import('vue-router')['RouterView']
30+
Starport: typeof import('vue-starport')['Starport']
31+
StarportCarrier: typeof import('vue-starport')['StarportCarrier']
32+
Styles: typeof import('./src/components/Styles.vue')['default']
33+
Styling: typeof import('./src/components/Styling.vue')['default']
34+
SuccessIcon: typeof import('./src/components/icons/SuccessIcon.vue')['default']
35+
Theming: typeof import('./src/components/Theming.vue')['default']
36+
Toast: typeof import('./src/components/Toast.vue')['default']
37+
Toaster: typeof import('./src/components/Toaster.vue')['default']
38+
Types: typeof import('./src/components/Types.vue')['default']
39+
Usage: typeof import('./src/components/Usage.vue')['default']
40+
WarningIcon: typeof import('./src/components/icons/WarningIcon.vue')['default']
41+
}
42+
}

‎storage/framework/core/components/radio-group/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/assest/stacks.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Stacks</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="./src/main.ts"></script>
12+
</body>
13+
</html>

‎storage/framework/core/components/radio-group/package.json

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
{
2+
"name": "@stacksjs/radio-group",
3+
"type": "module",
4+
"version": "0.68.2",
5+
"description": "A modern radio group component.",
6+
"author": "Chris Breuer",
7+
"contributors": [
8+
"Chris Breuer <chris@stacksjs.org>"
9+
],
10+
"license": "MIT",
11+
"funding": "https://github.com/sponsors/chrisbbreuer",
12+
"homepage": "https://github.com/stacksjs/stacks/tree/main/storage/framework/core/components/radio-group#readme",
13+
"repository": {
14+
"type": "git",
15+
"url": "git+https://github.com/stacksjs/stacks.git",
16+
"directory": "./storage/framework/core/components/radio-group"
17+
},
18+
"bugs": {
19+
"url": "https://github.com/stacksjs/stacks/issues"
20+
},
21+
"keywords": [
22+
"radiogroup",
23+
"components",
24+
"library",
25+
"stacks"
26+
],
27+
"sideEffects": [
28+
"**/*.css"
29+
],
30+
"exports": {
31+
".": {
32+
"types": "./dist/index.d.ts",
33+
"import": "./dist/index.js"
34+
},
35+
"./*": {
36+
"import": "./dist/*"
37+
}
38+
},
39+
"files": [
40+
"README.md",
41+
"dist",
42+
"src"
43+
],
44+
"scripts": {
45+
"dev": "bunx --bun vite",
46+
"build": "bunx --bun vite build --mode lib",
47+
"build:demo": "bunx --bun vite build",
48+
"build:types": "bunx --bun vue-tsc -p tsconfig.build.json && api-extractor run",
49+
"preview": "bunx --bun vite preview",
50+
"prepublishOnly": "bun run build"
51+
},
52+
"dependencies": {
53+
"@headlessui/vue": "^1.7.23",
54+
"@stacksjs/ui": "workspace:*",
55+
"highlight.js": "^11.10.0",
56+
"vue": "^3.5.12"
57+
},
58+
"devDependencies": {
59+
"@iconify-json/heroicons": "^1.2.1",
60+
"@microsoft/api-extractor": "^7.47.11",
61+
"@stacksjs/alias": "workspace:*",
62+
"@stacksjs/development": "workspace:*",
63+
"@types/clean-css": "^4.2.11",
64+
"@vue/tsconfig": "^0.5.1",
65+
"clean-css": "^5.3.3",
66+
"unocss": "0.61.0",
67+
"unplugin-icons": "^0.19.3"
68+
}
69+
}

‎storage/framework/core/components/radio-group/public/stacks.svg

Lines changed: 1 addition & 0 deletions
Loading

‎storage/framework/core/components/radio-group/src/App.vue

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<script lang="ts" setup>
2+
import Footer from './components/Footer.vue'
3+
import Hero from './components/Hero.vue'
4+
import Installation from './components/Installation.vue'
5+
import Styling from './components/Styling.vue'
6+
import Example from './components/Example.vue'
7+
import { useSEOHeader } from './composables/useSEOHeader'
8+
9+
useSEOHeader()
10+
</script>
11+
12+
<template>
13+
<div class="dropdown-wrapper bg-neutral-100/66 px-4 dark:bg-neutral-900">
14+
<div class="relative mx-auto max-w-full container sm:max-w-2xl">
15+
<header class="flex-center flex-col py-20">
16+
<Hero />
17+
</header>
18+
19+
<main
20+
class="text-primary grid grid-cols-1 gap-8 pb-20 text-xs 2xl:text-sm"
21+
>
22+
<Installation />
23+
<Usage />
24+
<Example />
25+
<Styling />
26+
</main>
27+
<Footer />
28+
</div>
29+
</div>
30+
</template>
31+
32+
<style scoped>
33+
.dropdown-wrapper {
34+
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
35+
Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
36+
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
37+
}
38+
39+
button {
40+
border: 0px solid #000;
41+
}
42+
</style>

‎storage/framework/core/components/radio-group/src/assets/stacks.svg

Lines changed: 1 addition & 0 deletions
Loading

‎storage/framework/core/components/radio-group/src/components/Example.vue

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<script lang="ts" setup>
2+
import { ref } from 'vue'
3+
import { RadioGroup, RadioGroupOption, RadioGroupLabel } from '../components'
4+
5+
const plans = [
6+
{
7+
name: 'Startup',
8+
ram: '12GB',
9+
cpus: '6 CPUs',
10+
disk: '160 GB SSD disk',
11+
},
12+
{
13+
name: 'Business',
14+
ram: '16GB',
15+
cpus: '8 CPUs',
16+
disk: '512 GB SSD disk',
17+
},
18+
{
19+
name: 'Enterprise',
20+
ram: '32GB',
21+
cpus: '12 CPUs',
22+
disk: '1024 GB SSD disk',
23+
},
24+
]
25+
26+
const selected = ref(plans[0])
27+
</script>
28+
29+
30+
<template>
31+
<section id="example">
32+
<div class="w-full px-4 pt-5">
33+
<div class="mx-auto w-full max-w-md">
34+
<RadioGroup v-model="selected">
35+
<RadioGroupLabel class="sr-only">Server size</RadioGroupLabel>
36+
<div class="space-y-2">
37+
<RadioGroupOption
38+
as="template"
39+
v-for="plan in plans"
40+
:key="plan.name"
41+
:value="plan"
42+
v-slot="{ active, checked }"
43+
>
44+
<div
45+
:class="[
46+
active
47+
? 'ring-2 ring-white/60 ring-offset-2 ring-offset-sky-300'
48+
: '',
49+
checked ? 'bg-sky-900/75 text-white ' : 'bg-white ',
50+
]"
51+
class="relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none"
52+
>
53+
<div class="flex w-full items-center justify-between">
54+
<div class="flex items-center">
55+
<div class="text-sm">
56+
<RadioGroupLabel
57+
as="p"
58+
:class="checked ? 'text-white' : 'text-gray-900'"
59+
class="font-medium"
60+
>
61+
{{ plan.name }}
62+
</RadioGroupLabel>
63+
<RadioGroupDescription
64+
as="span"
65+
:class="checked ? 'text-sky-100' : 'text-gray-500'"
66+
class="inline"
67+
>
68+
<span> {{ plan.ram }}/{{ plan.cpus }}</span>
69+
<span aria-hidden="true"> &middot; </span>
70+
<span>{{ plan.disk }}</span>
71+
</RadioGroupDescription>
72+
</div>
73+
</div>
74+
<div v-show="checked" class="shrink-0 text-white">
75+
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none">
76+
<circle
77+
cx="12"
78+
cy="12"
79+
r="12"
80+
fill="#fff"
81+
fill-opacity="0.2"
82+
/>
83+
<path
84+
d="M7 13l3 3 7-7"
85+
stroke="#fff"
86+
stroke-width="1.5"
87+
stroke-linecap="round"
88+
stroke-linejoin="round"
89+
/>
90+
</svg>
91+
</div>
92+
</div>
93+
</div>
94+
</RadioGroupOption>
95+
</div>
96+
</RadioGroup>
97+
</div>
98+
</div>
99+
</section>
100+
</template>

‎storage/framework/core/components/radio-group/src/components/Footer.vue

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<footer
3+
class="flex-center text-primary mt-16 w-full pb-4"
4+
text="slate-900 dark:slate-300 opacity-60"
5+
>
6+
<div class="copyright flex flex-col items-center justify-center">
7+
<p>
8+
With 💙 by
9+
<a class="text-neon" href="https://github.com/chrisbbreuer">
10+
@chrisbbreuer
11+
</a>
12+
&
13+
<a class="text-neon" href="https://github.com/stacksjs/stacks">
14+
@stacksjs
15+
</a>
16+
<span> © {{ new Date().getFullYear() }}</span>
17+
</p>
18+
<div class="mt-2 flex flex-col items-center sm:flex-row space-x-1 space-y-2 sm:space-y-0">
19+
<div class="flex items-center space-x-1">
20+
<carbon:logo-twitter class="text-emerald-500" />
21+
<span>
22+
<a
23+
href="https://twitter.com/chrisbbreuer"
24+
class="text-neon"
25+
target="_blank"
26+
>
27+
Follow me on Twitter
28+
</a>
29+
</span>
30+
</div>
31+
32+
<span class="hidden px-2 text-emerald-300 sm:block">|</span>
33+
34+
<div class="flex items-center space-x-1">
35+
<carbon:cafe class="text-emerald-500" />
36+
<span>
37+
<a
38+
href="https://www.buymeacoffee.com/xlbd"
39+
target="_blank"
40+
class="text-neon"
41+
>
42+
Buy me a coffee
43+
</a>
44+
</span>
45+
</div>
46+
<span class="hidden px-2 text-emerald-300 sm:block">|</span>
47+
<div class="flex items-center space-x-1">
48+
<mdi:heart class="text-emerald-500" />
49+
<span>
50+
<a
51+
href="https://github.com/sponsors/chrisbbreuer"
52+
target="_blank"
53+
class="text-neon"
54+
>
55+
Sponsor me on GitHub
56+
</a>
57+
</span>
58+
</div>
59+
</div>
60+
</div>
61+
</footer>
62+
</template>

0 commit comments

Comments
 (0)