InputText starter
tugcekucukoglu
parent
7db48b6a5c
commit
586d0443f6
|
|
@ -1,6 +1,11 @@
|
|||
<template>
|
||||
<div class="config-panel hidden">
|
||||
<div class="config-panel-content">
|
||||
<div class="config-panel-settings">
|
||||
<span class="config-panel-label">Tailwind - Aura</span>
|
||||
<SelectButton v-model="mode" @update:modelValue="onTailwindChange" :options="modeOptions" :unselectable="false" />
|
||||
</div>
|
||||
<div class="border-0 border-b border-surface-200" />
|
||||
<div class="config-panel-colors">
|
||||
<span class="config-panel-label">Primary</span>
|
||||
<div>
|
||||
|
|
@ -33,10 +38,6 @@
|
|||
<span class="config-panel-label">Presets</span>
|
||||
<SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presets" :unselectable="false" />
|
||||
</div>
|
||||
<div class="config-panel-settings">
|
||||
<span class="config-panel-label">Tailwind - Aura</span>
|
||||
<ToggleSwitch :modelValue="tailwindActive" @update:modelValue="onTailwindChange" />
|
||||
</div>
|
||||
<div class="config-panel-settings">
|
||||
<span class="config-panel-label">Ripple</span>
|
||||
<ToggleSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
|
||||
|
|
@ -115,7 +116,9 @@ export default {
|
|||
name: 'ocean',
|
||||
palette: { 0: '#ffffff', 50: '#fbfcfc', 100: '#F7F9F8', 200: '#EFF3F2', 300: '#DADEDD', 400: '#B1B7B6', 500: '#828787', 600: '#5F7274', 700: '#415B61', 800: '#29444E', 900: '#183240', 950: '#0c1920' }
|
||||
}
|
||||
]
|
||||
],
|
||||
mode: 'Styled',
|
||||
modeOptions: ['Styled', 'Unstyled']
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -272,8 +275,8 @@ export default {
|
|||
this.$primevue.config.ripple = value;
|
||||
},
|
||||
onTailwindChange(value) {
|
||||
this.$primevue.config.unstyled = value;
|
||||
this.$primevue.config.pt = value ? TailwindAura : undefined;
|
||||
this.$primevue.config.unstyled = value !== 'Styled';
|
||||
this.$primevue.config.pt = value !== 'Styled' ? TailwindAura : undefined;
|
||||
},
|
||||
onPresetChange(value) {
|
||||
this.$appState.preset = value;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<input type="text" :class="cx('root')" :value="modelValue" :aria-invalid="invalid || undefined" @input="onInput" v-bind="getPTOptions('root')" />
|
||||
<input type="text" :class="cx('root')" :value="modelValue" :aria-invalid="invalid" :data-pc-disabled="isDisabled" :data-pc-filled="filled" :data-pc-invalid="invalid" @input="onInput" v-bind="getPTOptions('root')" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -17,7 +17,7 @@ export default {
|
|||
return _ptm(key, {
|
||||
context: {
|
||||
filled: this.filled,
|
||||
disabled: this.$attrs.disabled || this.$attrs.disabled === ''
|
||||
disabled: this.isDisabled
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -28,6 +28,9 @@ export default {
|
|||
computed: {
|
||||
filled() {
|
||||
return this.modelValue != null && this.modelValue.toString().length > 0;
|
||||
},
|
||||
isDisabled() {
|
||||
return this.$attrs.disabled || this.$attrs.disabled === '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
import type { FloatLabelPassThroughOptions } from 'primevue/floatlabel';
|
||||
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
'block relative',
|
||||
|
||||
// Base Label Appearance
|
||||
'[&>*:last-child]:text-surface-900/60 dark:[&>*:last-child]:text-white/60',
|
||||
'[&>*:last-child]:absolute',
|
||||
'[&>*:last-child]:top-1/2',
|
||||
'[&>*:last-child]:-translate-y-1/2',
|
||||
'[&>*:last-child]:left-3',
|
||||
'[&>*:last-child]:pointer-events-none',
|
||||
'[&>*:last-child]:transition-all',
|
||||
'[&>*:last-child]:duration-200',
|
||||
'[&>*:last-child]:ease',
|
||||
|
||||
// Focus Label Appearance
|
||||
'[&>*:last-child]:has-[:focus]:-top-3',
|
||||
'[&>*:last-child]:has-[:focus]:text-sm',
|
||||
|
||||
// Filled Input Label Appearance
|
||||
'[&>*:last-child]:has-[data-pc-filled=true]:-top-3',
|
||||
'[&>*:last-child]:has-[data-pc-filled=true]:text-sm'
|
||||
]
|
||||
}
|
||||
} as FloatLabelPassThroughOptions;
|
||||
|
|
@ -1,9 +1,15 @@
|
|||
import type { PrimeVuePTOptions } from 'primevue/config';
|
||||
import floatlabel from './floatlabel';
|
||||
import global from './global';
|
||||
import inputgroup from './inputgroup';
|
||||
import inputgroupaddon from './inputgroupaddon';
|
||||
import inputtext from './inputtext';
|
||||
|
||||
export default {
|
||||
global,
|
||||
directives: {},
|
||||
inputtext
|
||||
inputtext,
|
||||
floatlabel,
|
||||
inputgroup,
|
||||
inputgroupaddon
|
||||
} as PrimeVuePTOptions;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
import type { InputGroupPassThroughOptions } from 'primevue/inputgroup';
|
||||
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
//GRoup
|
||||
// 'group/inputgroup',
|
||||
'flex items-stretch w-full',
|
||||
'[&>[data-pc-name=inputtext]]:flex-1',
|
||||
'[&>[data-pc-name=inputtext]]:w-[1%]',
|
||||
'[&>[data-pc-name=inputtext]]:-ml-px',
|
||||
'[&>[data-pc-name=inputtext]]:rounded-none',
|
||||
'[&>[data-pc-name=inputtext]]:border-0',
|
||||
'[&>[data-pc-name=inputtext]]:border-y',
|
||||
'[&>[data-pc-name=inputtext]]:border-l',
|
||||
'[&>*:first-child]:has-[[data-pc-name=inputtext]]:ml-0',
|
||||
'[&>*:first-child]:has-[[data-pc-name=inputtext]]:rounded-l-md',
|
||||
'[&>*:last-child]:has-[[data-pc-name=inputtext]]:border-r',
|
||||
'[&>*:last-child]:has-[[data-pc-name=inputtext]]:rounded-r-md'
|
||||
]
|
||||
}
|
||||
} as InputGroupPassThroughOptions;
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import type { InputGroupAddonPassThroughOptions } from 'primevue/inputgroupaddon';
|
||||
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
// Flex
|
||||
'flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'first:rounded-l-md',
|
||||
'last:rounded-r-md',
|
||||
'border-y',
|
||||
|
||||
'last:border-r',
|
||||
'border-l',
|
||||
'border-r-0',
|
||||
|
||||
// Space
|
||||
'p-2',
|
||||
|
||||
// Size
|
||||
'min-w-[2.5rem]',
|
||||
|
||||
// Color
|
||||
'bg-transparent dark:bg-surface-900',
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'border-surface-300 dark:border-surface-700'
|
||||
]
|
||||
}
|
||||
} as InputGroupAddonPassThroughOptions;
|
||||
|
|
@ -6,9 +6,6 @@ export default {
|
|||
// Font
|
||||
'leading-none',
|
||||
|
||||
// Flex
|
||||
{ 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
{
|
||||
|
|
@ -18,32 +15,27 @@ export default {
|
|||
},
|
||||
|
||||
// Shape
|
||||
{ 'rounded-md': parent.instance.$name !== 'InputGroup' },
|
||||
{ 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
|
||||
{ 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
|
||||
{ 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons },
|
||||
'rounded-md',
|
||||
|
||||
// Colors
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
||||
{ 'bg-surface-0 dark:bg-surface-950': !context.disabled },
|
||||
'border',
|
||||
{ 'border-surface-300 dark:border-surface-700': !props.invalid },
|
||||
'data-[pc-disabled=false]:bg-surface-0 dark:data-[pc-disabled=false]:bg-surface-950',
|
||||
'data-[pc-invalid=false]:border-surface-300 dark:data-[pc-invalid=false]:border-surface-700',
|
||||
|
||||
// Invalid State
|
||||
'invalid:focus:ring-red-200',
|
||||
'invalid:hover:border-red-500',
|
||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
||||
'data-[pc-invalid=true]:focus:ring-red-200',
|
||||
'data-[pc-invalid=true]:hover:border-red-500',
|
||||
'data-[pc-invalid=true]:border-red-500 dark:data-[pc-invalid=true]:border-red-400',
|
||||
|
||||
// States
|
||||
{
|
||||
'hover:border-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
|
||||
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
|
||||
},
|
||||
'data-[pc-disabled=false]:hover:border-surface-400 dark:data-[pc-disabled=false]:hover:border-surface-600',
|
||||
'data-[pc-disabled=false]:focus:outline-none data-[pc-disabled=false]:focus:outline-offset-0 data-[pc-disabled=false]:focus:ring-1 data-[pc-disabled=false]:focus:ring-primary-500 dark:data-[pc-disabled=false]:focus:ring-primary-400 data-[pc-disabled=false]:focus:z-10',
|
||||
'data-[pc-disabled=true]:bg-surface-200 dark:data-[pc-disabled=true]:bg-surface-700 data-[pc-disabled=true]:select-none data-[pc-disabled=true]:pointer-events-none data-[pc-disabled=true]:cursor-default',
|
||||
|
||||
// Filled State *for FloatLabel
|
||||
{ filled: parent.instance?.$name == 'FloatLabel' && context.filled },
|
||||
// { filled: parent.instance?.$name == 'FloatLabel' && context.filled },
|
||||
|
||||
// Misc
|
||||
'appearance-none',
|
||||
|
|
|
|||
Loading…
Reference in New Issue