vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

InputText starter

tailwindcss-presets
tugcekucukoglu 2024-07-01 15:17:54 +03:00
parent 7db48b6a5c
commit 586d0443f6
7 changed files with 112 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/showcase/layouts/AppConfigurator.vue
View File

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

7
packages/primevue/src/inputtext/InputText.vue
View File

@ -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 === '';
}
}
};

28
packages/tailwindcss-presets/src/aura/floatlabel/index.ts Normal file
View File

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

8
packages/tailwindcss-presets/src/aura/index.ts
View File

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

22
packages/tailwindcss-presets/src/aura/inputgroup/index.ts Normal file
View File

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

30
packages/tailwindcss-presets/src/aura/inputgroupaddon/index.ts Normal file
View File

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

28
packages/tailwindcss-presets/src/aura/inputtext/index.ts
View File

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