Skip to content

Commit

Permalink
fix hero preview style
Browse files Browse the repository at this point in the history
  • Loading branch information
k11q committed Jul 16, 2023
2 parents aff2875 + 276f70f commit cce4a32
Show file tree
Hide file tree
Showing 12 changed files with 636 additions and 189 deletions.
21 changes: 20 additions & 1 deletion .github/workflows/build.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -47,4 +47,23 @@ jobs:
run: cd packages/radix-vue && npm install

- name: Lint
run: cd packages/radix-vue && npm run lint
run: cd packages/radix-vue && npm run lint

test:
needs: build
runs-on: ubuntu-latest

steps:
- name: Checkout repository
uses: actions/checkout@v2

- name: Setup Node.js environment
uses: actions/setup-node@v2
with:
node-version: 16

- name: Install dependencies
run: cd packages/radix-vue && npm install

- name: Test
run: cd packages/radix-vue && npm run test
4 changes: 2 additions & 2 deletions docs/components/HeroContainer.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="relative rounded-lg text-sm text-black">
<div class="bg-gradient-to-br from-teal9 to-green9 w-full relative items-center justify-center flex">
<div class="relative text-sm text-black">
<div class="bg-gradient-to-br rounded-t-lg from-teal9 to-green9 w-full relative items-center justify-center flex">
<div class="w-full max-w-[700px] flex flex-col items-center justify-center py-[100px]">
<slot />
</div>
Expand Down
5 changes: 3 additions & 2 deletions packages/radix-vue/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"type": "module",
"main": "./dist/index.umd.cjs",
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"typings": "./dist/index.d.ts",
"types": "./dist/index.d.ts",
"typings": "./dist/index.d.ts",
"exports": {
".": {
"require": "./dist/index.umd.cjs",
Expand Down Expand Up @@ -47,6 +47,7 @@
"@types/node": "^18.16.18",
"@vitejs/plugin-vue": "^4.2.3",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"@vitest/coverage-istanbul": "^0.33.0",
"@vue/eslint-config-prettier": "^7.1.0",
"@vue/eslint-config-typescript": "^11.0.3",
"@vue/test-utils": "^2.4.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/radix-vue/src/Switch/SwitchRoot.vue
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ provide<SwitchProvideValue>(SWITCH_INJECTION_KEY, {
});
function handleKeydown(e: KeyboardEvent) {
if (e.key === "Enter") {
if (e.key === "Enter" || e.keyCode === 32) {
toggleOpen();
}
}
Expand Down
63 changes: 63 additions & 0 deletions packages/radix-vue/src/Switch/__tests__/Switch.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { render, fireEvent, screen } from "@testing-library/vue";
import { describe, expect, test } from "vitest";
import Switch1 from "./Switch1.vue";

describe("test switch functionalities", () => {
test("thumb can render", async () => {
render(Switch1);
screen.getByTestId("thumb");
});

test("clicking thumb will toggle value", async () => {
render(Switch1);
const thumb = screen.getByTestId("thumb");
screen.getByText("unchecked");

await fireEvent.click(thumb);
screen.getByText("checked");

await fireEvent.click(thumb);
screen.getByText("unchecked");
});

test("keydown enter thumb will toggle value", async () => {
const { container } = render(Switch1);
screen.getByTestId("thumb");
const input = container.querySelector("input")!;
screen.getByText("unchecked");

await fireEvent.keyDown(input, { key: "Enter" });
screen.getByText("checked");

await fireEvent.keyDown(input, { key: "Enter" });
screen.getByText("unchecked");
});

test("keydown space thumb will toggle value", async () => {
const { container } = render(Switch1);
screen.getByTestId("thumb");
const input = container.querySelector("input")!;
screen.getByText("unchecked");

await fireEvent.keyDown(input, { keyCode: 32 });
screen.getByText("checked");

await fireEvent.keyDown(input, { keyCode: 32 });
screen.getByText("unchecked");
});

test("thumb has data state & reactive", async () => {
const { container } = render(Switch1);
const thumb = screen.getByTestId("thumb");
const input = container.querySelector("input")!;
screen.getByText("unchecked");

await fireEvent.keyDown(input, { keyCode: 32 });
screen.getByText("checked");
expect(thumb.dataset.state).toBe("checked");

await fireEvent.keyDown(input, { keyCode: 32 });
screen.getByText("unchecked");
expect(thumb.dataset.state).toBe("unchecked");
});
});
14 changes: 14 additions & 0 deletions packages/radix-vue/src/Switch/__tests__/Switch1.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<script setup>
import SwitchRoot from "../SwitchRoot.vue";
import SwitchThumb from "../SwitchThumb.vue";
import { ref } from "vue";
const checked = ref(false);
</script>

<template>
<p>{{ checked ? "checked" : "unchecked" }}</p>
<SwitchRoot v-model:open="checked" id="airplane-mode">
<SwitchThumb data-testId="thumb"></SwitchThumb>
</SwitchRoot>
</template>
202 changes: 202 additions & 0 deletions packages/radix-vue/src/index.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
import * as Radix from "./index";
import { expect, it } from "vitest";

it("should expose the correct components", () => {
expect(Object.keys(Radix)).toEqual([
// Accordion
"AccordionContent",
"AccordionHeader",
"AccordionItem",
"AccordionRoot",
"AccordionTrigger",

// Checkbox
"CheckboxIndicator",
"CheckboxRoot",

// Collapsible
"CollapsibleRoot",
"CollapsibleTrigger",
"CollapsibleContent",

// Switch
"SwitchRoot",
"SwitchThumb",

// Separator
"Separator",

// Label
"Label",

// Toggle
"Toggle",

// Toggle Group
"ToggleGroupRoot",
"ToggleGroupItem",

// AspectRatio
"AspectRatio",

// Tabs
"TabsRoot",
"TabsList",
"TabsContent",
"TabsTrigger",

// Slider
"SliderRoot",
"SliderThumb",
"SliderTrack",
"SliderRange",

// Radio Group
"RadioGroupRoot",
"RadioGroupItem",
"RadioGroupIndicator",

// Progress
"ProgressRoot",
"ProgressIndicator",

// Dialog
"DialogRoot",
"DialogTrigger",
"DialogContent",
"DialogClose",
"DialogPortal",
"DialogOverlay",
"DialogTitle",
"DialogDescription",

// Alert Dialog
"AlertDialogRoot",
"AlertDialogTrigger",
"AlertDialogContent",
"AlertDialogCancel",
"AlertDialogPortal",
"AlertDialogOverlay",
"AlertDialogTitle",
"AlertDialogDescription",
"AlertDialogAction",

// Toolbar
"ToolbarRoot",
"ToolbarButton",
"ToolbarLink",
"ToolbarToggleGroup",
"ToolbarToggleItem",
"ToolbarSeparator",

// Avatar
"AvatarRoot",
"AvatarImage",
"AvatarFallback",

// Tooltip
"TooltipArrow",
"TooltipContent",
"TooltipPortal",
"TooltipRoot",
"TooltipTrigger",

// Hover Card
"HoverCardArrow",
"HoverCardContent",
"HoverCardPortal",
"HoverCardRoot",
"HoverCardTrigger",

// Popover
"PopoverRoot",
"PopoverTrigger",
"PopoverPortal",
"PopoverContent",
"PopoverArrow",
"PopoverClose",

// Dropdown Menu
"DropdownMenuArrow",
"DropdownMenuContent",
"DropdownMenuGroup",
"DropdownMenuItem",
"DropdownMenuPortal",
"DropdownMenuRoot",
"DropdownMenuSeparator",
"DropdownMenuTrigger",
"DropdownMenuCheckboxItem",
"DropdownMenuItemIndicator",
"DropdownMenuLabel",
"DropdownMenuRadioGroup",
"DropdownMenuRadioItem",
"DropdownMenuSub",
"DropdownMenuSubContent",
"DropdownMenuSubTrigger",

// Context Menu
"ContextMenuArrow",
"ContextMenuContent",
"ContextMenuGroup",
"ContextMenuItem",
"ContextMenuPortal",
"ContextMenuRoot",
"ContextMenuSeparator",
"ContextMenuTrigger",
"ContextMenuCheckboxItem",
"ContextMenuItemIndicator",
"ContextMenuLabel",
"ContextMenuRadioGroup",
"ContextMenuRadioItem",
"ContextMenuSub",
"ContextMenuSubContent",
"ContextMenuSubTrigger",

// Select
"SelectArrow",
"SelectContent",
"SelectPortal",
"SelectRoot",
"SelectSeparator",
"SelectTrigger",
"SelectItemIndicator",
"SelectLabel",
"SelectGroup",
"SelectItem",

// Menubar
"MenubarArrow",
"MenubarContent",
"MenubarGroup",
"MenubarItem",
"MenubarPortal",
"MenubarRoot",
"MenubarSeparator",
"MenubarTrigger",
"MenubarCheckboxItem",
"MenubarItemIndicator",
"MenubarLabel",
"MenubarRadioGroup",
"MenubarRadioItem",
"MenubarSub",
"MenubarSubContent",
"MenubarSubTrigger",
"MenubarMenu",

// Navigation Menu
"NavigationMenuLink",
"NavigationMenuIndicator",
"NavigationMenuContent",
"NavigationMenuItem",
"NavigationMenuList",
"NavigationMenuRoot",
"NavigationMenuTrigger",
"NavigationMenuViewport",

// Scroll Area
"ScrollAreaRoot",
"ScrollAreaViewport",
"ScrollAreaScrollbar",
"ScrollAreaThumb",
]);
});
20 changes: 0 additions & 20 deletions packages/radix-vue/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,35 +1,15 @@
export {
AccordionContent,
AccordionHeader,
AccordionImpl,
type AccordionImplProps,
type AccordionImplProvideValue,
ACCORDION_IMPL_INJECTION_KEY,
AccordionImplMultiple,
type AccordionImplMultipleProps,
type AccordionMultipleProps,
type AccordionValueProvideValue,
type AccordionCollapsibleProvideValue,
ACCORDION_VALUE_INJECTION_KEY,
ACCORDION_COLLAPSIBLE_INJECTION_KEY,
AccordionImplSingle,
type AccordionImplSingleProps,
type AccordionSingleProps,
AccordionItem,
type AccordionItemProps,
type AccordionItemProvideValue,
ACCORDION_ITEM_INJECTION_KEY,
ACCORDION_KEYS,
AccordionRoot,
type AccordionRootProps,
AccordionTrigger,
} from "./Accordion";
export { CheckboxIndicator, CheckboxRoot } from "./Checkbox";
export {
CollapsibleRoot,
CollapsibleTrigger,
CollapsibleContent,
COLLAPSIBLE_INJECTION_KEY,
type CollapsibleProvideValue,
type CollapsibleRootProps,
} from "./Collapsible";
Expand Down
6 changes: 5 additions & 1 deletion packages/radix-vue/tsconfig.app.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@
"src/**/*.tsx",
"src/**/*.vue"
],
"exclude": ["src/**/__tests__/*"],
"exclude": [
"src/**/__tests__/*",
"**/*.test.ts",
"**/*.test.js",
],
"compilerOptions": {
"paths": {
"@/*": ["src/*"]
Expand Down
2 changes: 1 addition & 1 deletion packages/radix-vue/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"files": [],
"extends": ["./tsconfig.app.json"]
"extends": ["./tsconfig.app.json"],
}
Loading

0 comments on commit cce4a32

Please sign in to comment.