add readme template
This commit is contained in:
parent
8f515bdf18
commit
eee7accba1
12
README.md
12
README.md
|
|
@ -0,0 +1,12 @@
|
||||||
|
# Radix Vue
|
||||||
|
|
||||||
|
## Why can't vue have nice things?
|
||||||
|
|
||||||
|
An unofficial vue port of Radix Primitives.
|
||||||
|
An accessible, unstyled and customisable UI Library for building top quality design systems.
|
||||||
|
|
||||||
|
## Goals
|
||||||
|
-
|
||||||
|
|
||||||
|
## Authors
|
||||||
|
-
|
||||||
|
|
@ -1,8 +1 @@
|
||||||
{
|
{}
|
||||||
"devDependencies": {
|
|
||||||
"@iconify/vue": "^4.1.1"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@morev/vue-transitions": "^2.3.6"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -11,9 +11,11 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@headlessui-float/vue": "^0.11.2",
|
"@headlessui-float/vue": "^0.11.2",
|
||||||
"@headlessui/vue": "^1.7.14",
|
"@headlessui/vue": "^1.7.14",
|
||||||
|
"@morev/vue-transitions": "^2.3.6",
|
||||||
"vue": "^3.2.47"
|
"vue": "^3.2.47"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@iconify/vue": "^4.1.1",
|
||||||
"@vitejs/plugin-vue": "^4.1.0",
|
"@vitejs/plugin-vue": "^4.1.0",
|
||||||
"autoprefixer": "^10.4.14",
|
"autoprefixer": "^10.4.14",
|
||||||
"postcss": "^8.4.24",
|
"postcss": "^8.4.24",
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed } from "vue";
|
import { ref } from "vue";
|
||||||
import {
|
import {
|
||||||
Accordion,
|
Accordion,
|
||||||
AccordionTrigger,
|
AccordionTrigger,
|
||||||
|
|
@ -41,10 +41,9 @@ import {
|
||||||
CollapsibleContent,
|
CollapsibleContent,
|
||||||
} from "./components/Collapsible";
|
} from "./components/Collapsible";
|
||||||
import { Select, SelectContent, SelectItem, SelectLabel, SelectTrigger } from "./components/Select";
|
import { Select, SelectContent, SelectItem, SelectLabel, SelectTrigger } from "./components/Select";
|
||||||
import { Float } from "@headlessui-float/vue";
|
|
||||||
import { Popover, PopoverContent, PopoverTrigger } from "./components/Popover";
|
import { Popover, PopoverContent, PopoverTrigger } from "./components/Popover";
|
||||||
import { Separator } from "./components/Separator";
|
import { Separator } from "./components/Separator";
|
||||||
import { Tooltip, TooltipContent, TooltipTrigger } from "./components/Tooltip";
|
import { Tooltip, TooltipTrigger } from "./components/Tooltip";
|
||||||
import { RadioGroup, RadioGroupItem } from "./components/RadioGroup";
|
import { RadioGroup, RadioGroupItem } from "./components/RadioGroup";
|
||||||
|
|
||||||
const alertDialogIsOpen = ref(false);
|
const alertDialogIsOpen = ref(false);
|
||||||
|
|
@ -53,7 +52,6 @@ const enabled = ref(false);
|
||||||
const checkboxEnabled = ref(false);
|
const checkboxEnabled = ref(false);
|
||||||
const checkboxEnabled2 = ref(false);
|
const checkboxEnabled2 = ref(false);
|
||||||
const toggleEnabled = ref(false);
|
const toggleEnabled = ref(false);
|
||||||
const collapsibleIsOpen = ref(false);
|
|
||||||
|
|
||||||
const people = [
|
const people = [
|
||||||
{ id: 1, name: "Durward Reynolds", unavailable: false },
|
{ id: 1, name: "Durward Reynolds", unavailable: false },
|
||||||
|
|
@ -64,15 +62,6 @@ const people = [
|
||||||
];
|
];
|
||||||
const selectedPerson = ref(people[0]);
|
const selectedPerson = ref(people[0]);
|
||||||
|
|
||||||
const people2 = [
|
|
||||||
"Durward Reynolds",
|
|
||||||
"Kenton Towne",
|
|
||||||
"Therese Wunsch",
|
|
||||||
"Benedict Kessler",
|
|
||||||
"Katelyn Rohan",
|
|
||||||
];
|
|
||||||
const selectedPerson2 = ref(people2[0]);
|
|
||||||
|
|
||||||
const radioOptions = [
|
const radioOptions = [
|
||||||
"Default",
|
"Default",
|
||||||
"Comfortable",
|
"Comfortable",
|
||||||
|
|
@ -80,15 +69,6 @@ const radioOptions = [
|
||||||
];
|
];
|
||||||
|
|
||||||
const radioValue = ref(radioOptions[0]);
|
const radioValue = ref(radioOptions[0]);
|
||||||
const query = ref("");
|
|
||||||
|
|
||||||
const filteredPeople = computed(() =>
|
|
||||||
query.value === ""
|
|
||||||
? people
|
|
||||||
: people.filter((person) => {
|
|
||||||
return person.toLowerCase().includes(query.value.toLowerCase());
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
const components = [
|
const components = [
|
||||||
"Accordion",
|
"Accordion",
|
||||||
|
|
@ -342,13 +322,13 @@ const components = [
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Scroll Area"></InternalCard>
|
<InternalCard title="Scroll Area"></InternalCard>
|
||||||
<InternalCard title="Select">
|
<InternalCard title="Select">
|
||||||
<Select v-model="selectedPerson">
|
<Select v-model="selectedPerson.id">
|
||||||
<SelectTrigger class="w-[210px]">
|
<SelectTrigger class="w-[210px]">
|
||||||
{{ selectedPerson.name }}
|
{{ selectedPerson.name }}
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectLabel>Fruits</SelectLabel>
|
<SelectLabel>Fruits</SelectLabel>
|
||||||
<SelectItem v-for="person in people" :key="person.id" :value="person"
|
<SelectItem v-for="person in people" :key="person.id" :value="person.id"
|
||||||
:disabled="person.unavailable">{{ person.name }}</SelectItem>
|
:disabled="person.unavailable">{{ person.name }}</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ import { ref, computed } from 'vue'
|
||||||
import { RadioGroup } from '@headlessui/vue';
|
import { RadioGroup } from '@headlessui/vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
modelValue: Boolean
|
modelValue: String
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue', 'close'])
|
const emit = defineEmits(['update:modelValue', 'close'])
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@ import { Listbox } from "@headlessui/vue";
|
||||||
import { Float } from "@headlessui-float/vue";
|
import { Float } from "@headlessui-float/vue";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
modelValue: Boolean,
|
modelValue: Number,
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(["update:modelValue", "close"]);
|
const emit = defineEmits(["update:modelValue", "close"]);
|
||||||
|
|
|
||||||
2
packages/radix-vue/src/index.ts
Normal file
2
packages/radix-vue/src/index.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
export * from './components/Combobox'
|
||||||
|
export * from './components/Dialog'
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
"module": "ESNext",
|
"module": "ESNext",
|
||||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
|
"allowJs": true,
|
||||||
|
|
||||||
/* Bundler mode */
|
/* Bundler mode */
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
|
|
@ -15,7 +16,7 @@
|
||||||
"jsx": "preserve",
|
"jsx": "preserve",
|
||||||
|
|
||||||
/* Linting */
|
/* Linting */
|
||||||
"strict": true,
|
"strict": false,
|
||||||
"noUnusedLocals": true,
|
"noUnusedLocals": true,
|
||||||
"noUnusedParameters": true,
|
"noUnusedParameters": true,
|
||||||
"noFallthroughCasesInSwitch": true
|
"noFallthroughCasesInSwitch": true
|
||||||
|
|
|
||||||
1226
pnpm-lock.yaml
1226
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user