add readme template

This commit is contained in:
Khairul Haaziq 2023-06-23 16:53:32 +08:00
parent 8f515bdf18
commit eee7accba1
10 changed files with 829 additions and 1303 deletions

View File

@ -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
-

View File

@ -1,8 +1 @@
{ {}
"devDependencies": {
"@iconify/vue": "^4.1.1"
},
"dependencies": {
"@morev/vue-transitions": "^2.3.6"
}
}

View File

@ -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

View File

@ -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>

View File

@ -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'])

View File

@ -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"]);

View File

@ -0,0 +1,2 @@
export * from './components/Combobox'
export * from './components/Dialog'

View File

@ -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

File diff suppressed because it is too large Load Diff