Initial commit
This commit is contained in:
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<AppTextField
|
||||
label="Regular"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<AppTextField
|
||||
placeholder="Placeholder Text"
|
||||
label="Regular"
|
||||
clearable
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,32 @@
|
||||
<script setup>
|
||||
const title = ref('Preliminary report')
|
||||
const description = ref('California is a state in the western United States')
|
||||
const rules = [v => v.length <= 25 || 'Max 25 characters']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="title"
|
||||
:rules="rules"
|
||||
counter="25"
|
||||
placeholder="Placeholder Text"
|
||||
hint="This field uses counter prop"
|
||||
label="Regular"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="description"
|
||||
:rules="rules"
|
||||
counter
|
||||
maxlength="25"
|
||||
placeholder="Placeholder Text"
|
||||
hint="This field uses maxlength attribute"
|
||||
label="Limit exceeded"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<AppTextField
|
||||
color="success"
|
||||
label="First name"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<AppTextField
|
||||
label="Compact"
|
||||
density="compact"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,39 @@
|
||||
<script setup>
|
||||
const message = ref('Hey!')
|
||||
const marker = ref(true)
|
||||
const iconIndex = ref(0)
|
||||
|
||||
const toggleMarker = () => {
|
||||
marker.value = !marker.value
|
||||
}
|
||||
|
||||
const clearMessage = () => {
|
||||
message.value = ''
|
||||
}
|
||||
|
||||
const resetIcon = () => {
|
||||
iconIndex.value = 0
|
||||
}
|
||||
|
||||
const sendMessage = () => {
|
||||
resetIcon()
|
||||
clearMessage()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppTextField
|
||||
v-model="message"
|
||||
clearable
|
||||
type="text"
|
||||
label="Message"
|
||||
color="primary"
|
||||
placeholder="Hey!!"
|
||||
clear-icon="tabler-circle-x"
|
||||
:append-icon="message ? $vuetify.locale.isRtl ? 'tabler-arrow-big-left-lines' : 'tabler-arrow-big-right-lines' : 'tabler-microphone'"
|
||||
:append-inner-icon="marker ? 'tabler-map-pin' : 'tabler-map-pin-off'"
|
||||
@click:append-inner="toggleMarker"
|
||||
@click:append="sendMessage"
|
||||
@click:clear="clearMessage"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,103 @@
|
||||
<script setup>
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
|
||||
const message = ref('Hey!')
|
||||
const loading = ref(false)
|
||||
|
||||
const clickMe = () => {
|
||||
loading.value = true
|
||||
message.value = 'Wait for it...'
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
message.value = 'You\'ve clicked me!'
|
||||
}, 2000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppTextField
|
||||
v-model="message"
|
||||
clearable
|
||||
label="Message"
|
||||
placeholder="Hey!!"
|
||||
type="text"
|
||||
class="textfield-demo-icon-slot"
|
||||
>
|
||||
<!-- Prepend -->
|
||||
<template #prepend>
|
||||
<VTooltip location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<VIcon
|
||||
v-bind="props"
|
||||
icon="tabler-help"
|
||||
/>
|
||||
</template>
|
||||
I'm a tooltip
|
||||
</VTooltip>
|
||||
</template>
|
||||
|
||||
<!-- AppendInner -->
|
||||
<template #append-inner>
|
||||
<VFadeTransition leave-absolute>
|
||||
<VProgressCircular
|
||||
v-if="loading"
|
||||
color="primary"
|
||||
width="3"
|
||||
size="24"
|
||||
indeterminate
|
||||
/>
|
||||
|
||||
<VNodeRenderer
|
||||
v-else
|
||||
class="text-2xl"
|
||||
:nodes="themeConfig.app.logo"
|
||||
/>
|
||||
</VFadeTransition>
|
||||
</template>
|
||||
|
||||
<!-- Append -->
|
||||
<template #append>
|
||||
<VBtn
|
||||
:icon="$vuetify.display.smAndDown"
|
||||
@click="clickMe"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-viewfinder"
|
||||
color="#fff"
|
||||
size="22"
|
||||
/>
|
||||
<span
|
||||
v-if="$vuetify.display.mdAndUp"
|
||||
class="ms-3"
|
||||
>Click me</span>
|
||||
</VBtn>
|
||||
</template>
|
||||
</AppTextField>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .textfield-demo-icon-slot {
|
||||
// :deep(.v-input) {
|
||||
// align-content: center;
|
||||
|
||||
// .v-input__prepend,
|
||||
// .v-input__append {
|
||||
// padding-block-start: 0 !important;
|
||||
// }
|
||||
|
||||
// .v-input__prepend {
|
||||
// align-items: center;
|
||||
// }
|
||||
|
||||
// .v-field__append-inner .v-progress-circular svg {
|
||||
// block-size: 1.3em;
|
||||
// inline-size: 1.3em;
|
||||
// }
|
||||
|
||||
// .v-field__append-inner svg {
|
||||
// margin-block-start: 0.1rem;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
label="Prepend"
|
||||
prepend-icon="tabler-map-pin"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
label="Prepend Inner"
|
||||
prepend-inner-icon="tabler-map-pin"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
label="Append"
|
||||
append-icon="tabler-map-pin"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
label="Append Inner"
|
||||
append-inner-icon="tabler-map-pin"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<AppTextField>
|
||||
<template #label>
|
||||
What about <strong>icon</strong> here?
|
||||
<VIcon icon="tabler-file-search" />
|
||||
</template>
|
||||
</AppTextField>
|
||||
</template>
|
||||
@@ -0,0 +1,50 @@
|
||||
<script setup>
|
||||
const show1 = ref(false)
|
||||
const show2 = ref(true)
|
||||
const password = ref('Password')
|
||||
const confirmPassword = ref('wqfasds')
|
||||
|
||||
const rules = {
|
||||
required: value => !!value || 'Required.',
|
||||
min: v => v.length >= 8 || 'Min 8 characters',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="password"
|
||||
:append-inner-icon="show1 ? 'tabler-eye-off' : 'tabler-eye' "
|
||||
:rules="[rules.required, rules.min]"
|
||||
:type="show1 ? 'text' : 'password'"
|
||||
name="input-10-1"
|
||||
label="Normal with hint text"
|
||||
hint="At least 8 characters"
|
||||
placeholder="············"
|
||||
counter
|
||||
@click:append-inner="show1 = !show1"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="confirmPassword"
|
||||
:rules="[rules.required, rules.min]"
|
||||
:append-inner-icon="show2 ? 'tabler-eye-off' : 'tabler-eye' "
|
||||
:type="show2 ? 'text' : 'password'"
|
||||
name="input-10-2"
|
||||
placeholder="············"
|
||||
label="Visible"
|
||||
hint="At least 8 characters"
|
||||
@click:append-inner="show2 = !show2"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup>
|
||||
const amount = ref(10.05)
|
||||
const weight = ref(28.02)
|
||||
const email = ref('example')
|
||||
const time = ref('04:56')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="amount"
|
||||
label="Amount"
|
||||
prefix="$"
|
||||
type="number"
|
||||
placeholder="10.05"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="weight"
|
||||
label="Weight"
|
||||
suffix="lbs"
|
||||
type="number"
|
||||
placeholder="28.02"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="email"
|
||||
label="Email address"
|
||||
suffix="@gmail.com"
|
||||
placeholder="example"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="time"
|
||||
label="Label Text"
|
||||
type="time"
|
||||
suffix="PST"
|
||||
placeholder="04:56"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<AppTextField
|
||||
label="Regular"
|
||||
placeholder="Placeholder Text"
|
||||
single-line
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol>
|
||||
<AppTextField
|
||||
label="Disabled"
|
||||
placeholder="Placeholder Text"
|
||||
disabled
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
placeholder="Placeholder Text"
|
||||
label="Readonly"
|
||||
readonly
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -0,0 +1,14 @@
|
||||
<script setup>
|
||||
const email = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm>
|
||||
<AppTextField
|
||||
v-model="email"
|
||||
:rules="[requiredValidator, emailValidator]"
|
||||
placeholder="johnedoe@email.com"
|
||||
label="E-mail"
|
||||
/>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Outlined"
|
||||
variant="outlined"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Filled"
|
||||
variant="filled"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Solo"
|
||||
variant="solo"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Plain"
|
||||
variant="plain"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Underlined"
|
||||
variant="underlined"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
@@ -0,0 +1,903 @@
|
||||
export const basic = { ts: `<template>
|
||||
<AppTextField
|
||||
label="Regular"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<AppTextField
|
||||
label="Regular"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const clearable = { ts: `<template>
|
||||
<AppTextField
|
||||
placeholder="Placeholder Text"
|
||||
label="Regular"
|
||||
clearable
|
||||
/>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<AppTextField
|
||||
placeholder="Placeholder Text"
|
||||
label="Regular"
|
||||
clearable
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const counter = { ts: `<script lang="ts" setup>
|
||||
const title = ref('Preliminary report')
|
||||
const description = ref('California is a state in the western United States')
|
||||
const rules = [(v: string) => v.length <= 25 || 'Max 25 characters']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="title"
|
||||
:rules="rules"
|
||||
counter="25"
|
||||
placeholder="Placeholder Text"
|
||||
hint="This field uses counter prop"
|
||||
label="Regular"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="description"
|
||||
:rules="rules"
|
||||
counter
|
||||
maxlength="25"
|
||||
placeholder="Placeholder Text"
|
||||
hint="This field uses maxlength attribute"
|
||||
label="Limit exceeded"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const title = ref('Preliminary report')
|
||||
const description = ref('California is a state in the western United States')
|
||||
const rules = [v => v.length <= 25 || 'Max 25 characters']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="title"
|
||||
:rules="rules"
|
||||
counter="25"
|
||||
placeholder="Placeholder Text"
|
||||
hint="This field uses counter prop"
|
||||
label="Regular"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="description"
|
||||
:rules="rules"
|
||||
counter
|
||||
maxlength="25"
|
||||
placeholder="Placeholder Text"
|
||||
hint="This field uses maxlength attribute"
|
||||
label="Limit exceeded"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const customColors = { ts: `<template>
|
||||
<AppTextField
|
||||
color="success"
|
||||
label="First name"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<AppTextField
|
||||
color="success"
|
||||
label="First name"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const density = { ts: `<template>
|
||||
<AppTextField
|
||||
label="Compact"
|
||||
density="compact"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<AppTextField
|
||||
label="Compact"
|
||||
density="compact"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const iconEvents = { ts: `<script lang="ts" setup>
|
||||
const message = ref('Hey!')
|
||||
const marker = ref(true)
|
||||
const iconIndex = ref(0)
|
||||
|
||||
const toggleMarker = () => {
|
||||
marker.value = !marker.value
|
||||
}
|
||||
|
||||
const clearMessage = () => {
|
||||
message.value = ''
|
||||
}
|
||||
|
||||
const resetIcon = () => {
|
||||
iconIndex.value = 0
|
||||
}
|
||||
|
||||
const sendMessage = () => {
|
||||
resetIcon()
|
||||
clearMessage()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppTextField
|
||||
v-model="message"
|
||||
clearable
|
||||
type="text"
|
||||
label="Message"
|
||||
color="primary"
|
||||
placeholder="Hey!!"
|
||||
clear-icon="tabler-circle-x"
|
||||
:append-icon="message ? $vuetify.locale.isRtl ? 'tabler-arrow-big-left-lines' : 'tabler-arrow-big-right-lines' : 'tabler-microphone'"
|
||||
:append-inner-icon="marker ? 'tabler-map-pin' : 'tabler-map-pin-off'"
|
||||
@click:append-inner="toggleMarker"
|
||||
@click:append="sendMessage"
|
||||
@click:clear="clearMessage"
|
||||
/>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const message = ref('Hey!')
|
||||
const marker = ref(true)
|
||||
const iconIndex = ref(0)
|
||||
|
||||
const toggleMarker = () => {
|
||||
marker.value = !marker.value
|
||||
}
|
||||
|
||||
const clearMessage = () => {
|
||||
message.value = ''
|
||||
}
|
||||
|
||||
const resetIcon = () => {
|
||||
iconIndex.value = 0
|
||||
}
|
||||
|
||||
const sendMessage = () => {
|
||||
resetIcon()
|
||||
clearMessage()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppTextField
|
||||
v-model="message"
|
||||
clearable
|
||||
type="text"
|
||||
label="Message"
|
||||
color="primary"
|
||||
placeholder="Hey!!"
|
||||
clear-icon="tabler-circle-x"
|
||||
:append-icon="message ? $vuetify.locale.isRtl ? 'tabler-arrow-big-left-lines' : 'tabler-arrow-big-right-lines' : 'tabler-microphone'"
|
||||
:append-inner-icon="marker ? 'tabler-map-pin' : 'tabler-map-pin-off'"
|
||||
@click:append-inner="toggleMarker"
|
||||
@click:append="sendMessage"
|
||||
@click:clear="clearMessage"
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const iconSlots = { ts: `<script setup lang="ts">
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
|
||||
const message = ref('Hey!')
|
||||
const loading = ref(false)
|
||||
|
||||
const clickMe = () => {
|
||||
loading.value = true
|
||||
message.value = 'Wait for it...'
|
||||
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
message.value = 'You\'ve clicked me!'
|
||||
}, 2000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppTextField
|
||||
v-model="message"
|
||||
clearable
|
||||
label="Message"
|
||||
placeholder="Hey!!"
|
||||
type="text"
|
||||
class="textfield-demo-icon-slot"
|
||||
>
|
||||
<!-- Prepend -->
|
||||
<template #prepend>
|
||||
<VTooltip location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<VIcon
|
||||
v-bind="props"
|
||||
icon="tabler-help"
|
||||
/>
|
||||
</template>
|
||||
I'm a tooltip
|
||||
</VTooltip>
|
||||
</template>
|
||||
|
||||
<!-- AppendInner -->
|
||||
<template #append-inner>
|
||||
<VFadeTransition leave-absolute>
|
||||
<VProgressCircular
|
||||
v-if="loading"
|
||||
color="primary"
|
||||
width="3"
|
||||
size="24"
|
||||
indeterminate
|
||||
/>
|
||||
|
||||
<VNodeRenderer
|
||||
v-else
|
||||
class="text-2xl"
|
||||
:nodes="themeConfig.app.logo"
|
||||
/>
|
||||
</VFadeTransition>
|
||||
</template>
|
||||
|
||||
<!-- Append -->
|
||||
<template #append>
|
||||
<VBtn
|
||||
:icon="$vuetify.display.smAndDown"
|
||||
@click="clickMe"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-viewfinder"
|
||||
color="#fff"
|
||||
size="22"
|
||||
/>
|
||||
<span
|
||||
v-if="$vuetify.display.mdAndUp"
|
||||
class="ms-3"
|
||||
>Click me</span>
|
||||
</VBtn>
|
||||
</template>
|
||||
</AppTextField>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .textfield-demo-icon-slot {
|
||||
// :deep(.v-input) {
|
||||
// align-content: center;
|
||||
|
||||
// .v-input__prepend,
|
||||
// .v-input__append {
|
||||
// padding-block-start: 0 !important;
|
||||
// }
|
||||
|
||||
// .v-input__prepend {
|
||||
// align-items: center;
|
||||
// }
|
||||
|
||||
// .v-field__append-inner .v-progress-circular svg {
|
||||
// block-size: 1.3em;
|
||||
// inline-size: 1.3em;
|
||||
// }
|
||||
|
||||
// .v-field__append-inner svg {
|
||||
// margin-block-start: 0.1rem;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
`, js: `<script setup>
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
|
||||
const message = ref('Hey!')
|
||||
const loading = ref(false)
|
||||
|
||||
const clickMe = () => {
|
||||
loading.value = true
|
||||
message.value = 'Wait for it...'
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
message.value = 'You\'ve clicked me!'
|
||||
}, 2000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppTextField
|
||||
v-model="message"
|
||||
clearable
|
||||
label="Message"
|
||||
placeholder="Hey!!"
|
||||
type="text"
|
||||
class="textfield-demo-icon-slot"
|
||||
>
|
||||
<!-- Prepend -->
|
||||
<template #prepend>
|
||||
<VTooltip location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<VIcon
|
||||
v-bind="props"
|
||||
icon="tabler-help"
|
||||
/>
|
||||
</template>
|
||||
I'm a tooltip
|
||||
</VTooltip>
|
||||
</template>
|
||||
|
||||
<!-- AppendInner -->
|
||||
<template #append-inner>
|
||||
<VFadeTransition leave-absolute>
|
||||
<VProgressCircular
|
||||
v-if="loading"
|
||||
color="primary"
|
||||
width="3"
|
||||
size="24"
|
||||
indeterminate
|
||||
/>
|
||||
|
||||
<VNodeRenderer
|
||||
v-else
|
||||
class="text-2xl"
|
||||
:nodes="themeConfig.app.logo"
|
||||
/>
|
||||
</VFadeTransition>
|
||||
</template>
|
||||
|
||||
<!-- Append -->
|
||||
<template #append>
|
||||
<VBtn
|
||||
:icon="$vuetify.display.smAndDown"
|
||||
@click="clickMe"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-viewfinder"
|
||||
color="#fff"
|
||||
size="22"
|
||||
/>
|
||||
<span
|
||||
v-if="$vuetify.display.mdAndUp"
|
||||
class="ms-3"
|
||||
>Click me</span>
|
||||
</VBtn>
|
||||
</template>
|
||||
</AppTextField>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// .textfield-demo-icon-slot {
|
||||
// :deep(.v-input) {
|
||||
// align-content: center;
|
||||
|
||||
// .v-input__prepend,
|
||||
// .v-input__append {
|
||||
// padding-block-start: 0 !important;
|
||||
// }
|
||||
|
||||
// .v-input__prepend {
|
||||
// align-items: center;
|
||||
// }
|
||||
|
||||
// .v-field__append-inner .v-progress-circular svg {
|
||||
// block-size: 1.3em;
|
||||
// inline-size: 1.3em;
|
||||
// }
|
||||
|
||||
// .v-field__append-inner svg {
|
||||
// margin-block-start: 0.1rem;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
` }
|
||||
|
||||
export const icons = { ts: `<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
label="Prepend"
|
||||
prepend-icon="tabler-map-pin"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
label="Prepend Inner"
|
||||
prepend-inner-icon="tabler-map-pin"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
label="Append"
|
||||
append-icon="tabler-map-pin"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
label="Append Inner"
|
||||
append-inner-icon="tabler-map-pin"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
label="Prepend"
|
||||
prepend-icon="tabler-map-pin"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
label="Prepend Inner"
|
||||
prepend-inner-icon="tabler-map-pin"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
label="Append"
|
||||
append-icon="tabler-map-pin"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
label="Append Inner"
|
||||
append-inner-icon="tabler-map-pin"
|
||||
placeholder="Placeholder Text"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const labelSlot = { ts: `<template>
|
||||
<AppTextField>
|
||||
<template #label>
|
||||
What about <strong>icon</strong> here?
|
||||
<VIcon icon="tabler-file-search" />
|
||||
</template>
|
||||
</AppTextField>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<AppTextField>
|
||||
<template #label>
|
||||
What about <strong>icon</strong> here?
|
||||
<VIcon icon="tabler-file-search" />
|
||||
</template>
|
||||
</AppTextField>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const passwordInput = { ts: `<script lang="ts" setup>
|
||||
const show1 = ref(false)
|
||||
const show2 = ref(true)
|
||||
const password = ref('Password')
|
||||
const confirmPassword = ref('wqfasds')
|
||||
|
||||
const rules = {
|
||||
required: (value: string) => !!value || 'Required.',
|
||||
min: (v: string) => v.length >= 8 || 'Min 8 characters',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="password"
|
||||
:append-inner-icon="show1 ? 'tabler-eye-off' : 'tabler-eye' "
|
||||
:rules="[rules.required, rules.min]"
|
||||
:type="show1 ? 'text' : 'password'"
|
||||
name="input-10-1"
|
||||
label="Normal with hint text"
|
||||
hint="At least 8 characters"
|
||||
placeholder="············"
|
||||
counter
|
||||
@click:append-inner="show1 = !show1"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="confirmPassword"
|
||||
:rules="[rules.required, rules.min]"
|
||||
:append-inner-icon="show2 ? 'tabler-eye-off' : 'tabler-eye' "
|
||||
:type="show2 ? 'text' : 'password'"
|
||||
name="input-10-2"
|
||||
placeholder="············"
|
||||
label="Visible"
|
||||
hint="At least 8 characters"
|
||||
@click:append-inner="show2 = !show2"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const show1 = ref(false)
|
||||
const show2 = ref(true)
|
||||
const password = ref('Password')
|
||||
const confirmPassword = ref('wqfasds')
|
||||
|
||||
const rules = {
|
||||
required: value => !!value || 'Required.',
|
||||
min: v => v.length >= 8 || 'Min 8 characters',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="password"
|
||||
:append-inner-icon="show1 ? 'tabler-eye-off' : 'tabler-eye' "
|
||||
:rules="[rules.required, rules.min]"
|
||||
:type="show1 ? 'text' : 'password'"
|
||||
name="input-10-1"
|
||||
label="Normal with hint text"
|
||||
hint="At least 8 characters"
|
||||
placeholder="············"
|
||||
counter
|
||||
@click:append-inner="show1 = !show1"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="confirmPassword"
|
||||
:rules="[rules.required, rules.min]"
|
||||
:append-inner-icon="show2 ? 'tabler-eye-off' : 'tabler-eye' "
|
||||
:type="show2 ? 'text' : 'password'"
|
||||
name="input-10-2"
|
||||
placeholder="············"
|
||||
label="Visible"
|
||||
hint="At least 8 characters"
|
||||
@click:append-inner="show2 = !show2"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const prefixesAndSuffixes = { ts: `<script setup lang="ts">
|
||||
const amount = ref(10.05)
|
||||
const weight = ref(28.02)
|
||||
const email = ref('example')
|
||||
const time = ref('04:56')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="amount"
|
||||
label="Amount"
|
||||
prefix="$"
|
||||
type="number"
|
||||
placeholder="10.05"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="weight"
|
||||
label="Weight"
|
||||
suffix="lbs"
|
||||
type="number"
|
||||
placeholder="28.02"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="email"
|
||||
label="Email address"
|
||||
suffix="@gmail.com"
|
||||
placeholder="example"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="time"
|
||||
label="Label Text"
|
||||
type="time"
|
||||
suffix="PST"
|
||||
placeholder="04:56"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const amount = ref(10.05)
|
||||
const weight = ref(28.02)
|
||||
const email = ref('example')
|
||||
const time = ref('04:56')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="amount"
|
||||
label="Amount"
|
||||
prefix="$"
|
||||
type="number"
|
||||
placeholder="10.05"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="weight"
|
||||
label="Weight"
|
||||
suffix="lbs"
|
||||
type="number"
|
||||
placeholder="28.02"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="email"
|
||||
label="Email address"
|
||||
suffix="@gmail.com"
|
||||
placeholder="example"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
v-model="time"
|
||||
label="Label Text"
|
||||
type="time"
|
||||
suffix="PST"
|
||||
placeholder="04:56"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const singleLine = { ts: `<template>
|
||||
<AppTextField
|
||||
label="Regular"
|
||||
placeholder="Placeholder Text"
|
||||
single-line
|
||||
/>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<AppTextField
|
||||
label="Regular"
|
||||
placeholder="Placeholder Text"
|
||||
single-line
|
||||
/>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const state = { ts: `<template>
|
||||
<VRow>
|
||||
<VCol>
|
||||
<AppTextField
|
||||
label="Disabled"
|
||||
placeholder="Placeholder Text"
|
||||
disabled
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
placeholder="Placeholder Text"
|
||||
label="Readonly"
|
||||
readonly
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VRow>
|
||||
<VCol>
|
||||
<AppTextField
|
||||
label="Disabled"
|
||||
placeholder="Placeholder Text"
|
||||
disabled
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
placeholder="Placeholder Text"
|
||||
label="Readonly"
|
||||
readonly
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const validation = { ts: `<script lang="ts" setup>
|
||||
const email = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm>
|
||||
<AppTextField
|
||||
v-model="email"
|
||||
:rules="[requiredValidator, emailValidator]"
|
||||
placeholder="johnedoe@email.com"
|
||||
label="E-mail"
|
||||
/>
|
||||
</VForm>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
const email = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm>
|
||||
<AppTextField
|
||||
v-model="email"
|
||||
:rules="[requiredValidator, emailValidator]"
|
||||
placeholder="johnedoe@email.com"
|
||||
label="E-mail"
|
||||
/>
|
||||
</VForm>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const variant = { ts: `<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Outlined"
|
||||
variant="outlined"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Filled"
|
||||
variant="filled"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Solo"
|
||||
variant="solo"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Plain"
|
||||
variant="plain"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Underlined"
|
||||
variant="underlined"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
`, js: `<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Outlined"
|
||||
variant="outlined"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Filled"
|
||||
variant="filled"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Solo"
|
||||
variant="solo"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Plain"
|
||||
variant="plain"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Underlined"
|
||||
variant="underlined"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
` }
|
||||
|
||||
Reference in New Issue
Block a user