/admin-one-vue-tailwind-master/index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.png">
<title>Admin One - Vue.js 3 Tailwind dashboard template</title>
<meta name="description" content="Admin One - free Vue.js 3 Tailwind dashboard">
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>```
# `/admin-one-vue-tailwind-master/src/App.vue`
```vue
<script setup>
import { RouterView } from "vue-router";
</script>
<template>
<RouterView />
</template>
/admin-one-vue-tailwind-master/src/main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import "./css/main.css";
/* Create Vue app */
createApp(App).use(router).mount("#app");
<script setup>
import { computed } from "vue";
const props = defineProps({
name: {
type: String,
required: true,
},
type: {
type: String,
default: "checkbox",
validator: (value) => ["checkbox", "radio", "switch"].includes(value),
},
label: {
type: String,
default: null,
},
modelValue: {
type: [Array, String, Number, Boolean],
default: null,
},
inputValue: {
type: [String, Number, Boolean],
required: true,
},
});
const emit = defineEmits(["update:modelValue"]);
const computedValue = computed({
get: () => props.modelValue,
set: (value) => {
emit("update:modelValue", value);
},
});
const inputType = computed(() =>
props.type === "radio" ? "radio" : "checkbox"
);
</script>
<template>
<label :class="type">
<input
v-model="computedValue"
:type="inputType"
:name="name"
:value="inputValue"
/>
<span class="check" />
<span class="pl-2">{{ label }}</span>
</label>
</template>
<script setup>
import { computed } from "vue";
import FormCheckRadio from "@/components/FormCheckRadio.vue";
/* <FormCheckRadioGroup
v-model="customElementsForm.checkbox"
name="sample-checkbox"
:options="checkOptions"
@update:model-value="updateCheckState"
/> */
const props = defineProps({
options: {
type: Object,
default: () => {},
},
name: {
type: String,
required: true,
},
type: {
type: String,
default: "checkbox",
validator: (value) => ["checkbox", "radio", "switch"].includes(value),
},
isColumn: Boolean,
modelValue: {
type: [Array, String, Number, Boolean],
default: null,
},
});
console.log(props.modelValue);
const emit = defineEmits(["update:modelValue"]);
const computedValue = computed({
get: () => props.modelValue,
set: (value) => {
emit("update:modelValue", value);
},
});
</script>
<template>
<div
class="flex justify-start flex-wrap -mb-3"
:class="{ 'flex-col': isColumn }"
>
<FormCheckRadio
v-for="(value, key) in options"
:key="key"
v-model="computedValue"
:type="type"
:name="name"
:input-value="key"
:label="value"
class="mr-6 mb-3 last:mr-0"
/>
</div>
</template>
<script setup>
import { reactive } from "vue";
import FormCheckRadioGroup from "@/components/FormCheckRadioGroup.vue";
const checkOptions = {
lorem: "Lorem",
ipsum: "Ipsum",
dolore: "Dolore",
};
const customElementsForm = reactive({
checkbox: ["lorem"],
radio: "one",
switch: ["one"],
});
const updateCheckState = (e) => {
console.log(e);
};
const updateRadioState = (e) => {
console.log(e);
};
const updateSwitchState = (e) => {
console.log(e);
};
</script>
<template>
<div class="flex">
<!--
_circle.css
@layer components {
.circle {
@apply bg-pink-300 ml-2 mt-2 rounded-full w-10 h-10
}
.pill {
@apply bg-red-300 ml-2 mt-2 rounded-full w-20 h-10
}
}
-->
<div class="bg-green-300 ml-2 mt-2 rounded-full w-10 h-10"></div>
<div class="bg-green-300 ml-2 mt-2 rounded-full w-10 h-10"></div>
<div class="bg-green-300 ml-2 mt-2 rounded-full w-10 h-10"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="pill"></div>
<div class="pill"></div>
<div class="pill"></div>
</div>
<FormCheckRadioGroup
v-model="customElementsForm.checkbox"
name="sample-checkbox"
:options="checkOptions"
@update:model-value="updateCheckState"
/>
<FormCheckRadioGroup
v-model="customElementsForm.radio"
name="sample-radio"
type="radio"
:options="{ one: 'One', two: 'Two' }"
@update:model-value="updateRadioState"
/>
<FormCheckRadioGroup
v-model="customElementsForm.switch"
name="sample-switch"
type="switch"
:options="{ one: 'One', two: 'Two' }"
@update:model-value="updateSwitchState"
/>
</template>
/admin-one-vue-tailwind-master/src/router/index.js
import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
{
meta: {
title: "Home",
},
path: "/",
redirect: "/forms",
},
{
meta: {
title: "Forms",
},
path: "/forms",
name: "forms",
component: () => import("@/views/FormsView.vue"),
},
];
const router = createRouter({
history: createWebHashHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
return savedPosition || { top: 0 };
},
});
export default router;
