Skip to content

Commit

Permalink
Missing V4 FloatLabel Implementations and Docs [Fixed #303]
Browse files Browse the repository at this point in the history
  • Loading branch information
atakantepe committed Sep 16, 2024
1 parent 13b264e commit 39d6825
Show file tree
Hide file tree
Showing 21 changed files with 208 additions and 145 deletions.
4 changes: 2 additions & 2 deletions doc/cascadeselect/FloatLabelDoc.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
</DocSectionText>
<div class="card flex justify-center">
<FloatLabel>
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
<label for="cs-city">City</label>
<CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" />
<label for="cs-city">Select a City</label>
</FloatLabel>
</div>
<DocSectionCode :code="code" />
Expand Down
12 changes: 6 additions & 6 deletions pages/autocomplete/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ import AccessibilityDoc from '@/doc/autocomplete/AccessibilityDoc.vue';
import BasicDoc from '@/doc/autocomplete/BasicDoc.vue';
import DisabledDoc from '@/doc/autocomplete/DisabledDoc.vue';
import DropdownDoc from '@/doc/autocomplete/DropdownDoc.vue';
import FloatLabelDoc from '@/doc/autocomplete/FloatLabelDoc.vue';
import ForceSelectionDoc from '@/doc/autocomplete/ForceSelectionDoc.vue';
import GroupDoc from '@/doc/autocomplete/GroupDoc.vue';
import ImportDoc from '@/doc/autocomplete/ImportDoc.vue';
import InvalidDoc from '@/doc/autocomplete/InvalidDoc.vue';
import MultipleDoc from '@/doc/autocomplete/MultipleDoc.vue';
import ObjectsDoc from '@/doc/autocomplete/ObjectsDoc.vue';
// import FloatLabelDoc from '@/doc/autocomplete/FloatLabelDoc.vue';
// import FilledDoc from '@/doc/autocomplete/FilledDoc.vue';
import TemplateDoc from '@/doc/autocomplete/TemplateDoc.vue';
import VirtualScrollDoc from '@/doc/autocomplete/VirtualScrollDoc.vue';
Expand Down Expand Up @@ -75,11 +75,11 @@ export default {
label: 'Multiple',
component: MultipleDoc
},
// {
// id: 'floatlabel',
// label: 'Float Label',
// component: FloatLabelDoc
// },
{
id: 'floatlabel',
label: 'Float Label',
component: FloatLabelDoc
},
// {
// id: 'filled',
// label: 'Filled',
Expand Down
12 changes: 6 additions & 6 deletions pages/cascadeselect/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@
import AccessibilityDoc from '@/doc/cascadeselect/AccessibilityDoc.vue';
import BasicDoc from '@/doc/cascadeselect/BasicDoc.vue';
import DisabledDoc from '@/doc/cascadeselect/DisabledDoc.vue';
import FloatLabelDoc from '@/doc/cascadeselect/FloatLabelDoc.vue';
import ImportDoc from '@/doc/cascadeselect/ImportDoc.vue';
import InvalidDoc from '@/doc/cascadeselect/InvalidDoc.vue';
import LoadingStateDoc from '@/doc/cascadeselect/LoadingStateDoc.vue';
import TemplateDoc from '@/doc/cascadeselect/TemplateDoc.vue';
export default {
data() {
return {
Expand All @@ -43,11 +43,11 @@ export default {
label: 'Loading State',
component: LoadingStateDoc
},
// {
// id: 'floatlabel',
// label: 'Float Label',
// component: FloatLabelDoc
// },
{
id: 'floatlabel',
label: 'Float Label',
component: FloatLabelDoc
},
// {
// id: 'filled',
// label: 'Filled',
Expand Down
11 changes: 6 additions & 5 deletions pages/datepicker/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import DateTemplateDoc from '@/doc/datepicker/DateTemplateDoc.vue';
import DisabledDoc from '@/doc/datepicker/DisabledDoc.vue';
// import FilledDoc from '@/doc/datepicker/FilledDoc.vue';
// import FloatLabelDoc from '@/doc/datepicker/FloatLabelDoc.vue';
import FloatLabelDoc from '@/doc/datepicker/FloatLabelDoc.vue';
import FormatDoc from '@/doc/datepicker/FormatDoc.vue';
import IconDoc from '@/doc/datepicker/IconDoc.vue';
import ImportDoc from '@/doc/datepicker/ImportDoc.vue';
Expand Down Expand Up @@ -103,11 +104,11 @@ export default {
label: 'Inline',
component: InlineDoc
},
// {
// id: 'floatlabel',
// label: 'Float Label',
// component: FloatLabelDoc
// },
{
id: 'floatlabel',
label: 'Float Label',
component: FloatLabelDoc
},
// {
// id: 'filled',
// label: 'Filled',
Expand Down
11 changes: 6 additions & 5 deletions pages/inputmask/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
import AccessibilityDoc from '@/doc/inputmask/AccessibilityDoc.vue';
import BasicDoc from '@/doc/inputmask/BasicDoc.vue';
import DisabledDoc from '@/doc/inputmask/DisabledDoc.vue';
import FloatLabelDoc from '@/doc/inputmask/FloatLabelDoc.vue';
import ImportDoc from '@/doc/inputmask/ImportDoc.vue';
import InvalidDoc from '@/doc/inputmask/InvalidDoc.vue';
import MaskDoc from '@/doc/inputmask/MaskDoc.vue';
Expand Down Expand Up @@ -49,11 +50,11 @@ export default {
label: 'SlotChar',
component: SlotCharDoc
},
// {
// id: 'floatlabel',
// label: 'Float Label',
// component: FloatLabelDoc
// },
{
id: 'floatlabel',
label: 'Float Label',
component: FloatLabelDoc
},
// {
// id: 'filled',
// label: 'Filled',
Expand Down
11 changes: 6 additions & 5 deletions pages/inputnumber/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import LocaleDoc from '@/doc/inputnumber/LocaleDoc.vue';
import NumeralsDoc from '@/doc/inputnumber/NumeralsDoc.vue';
import PrefixSuffixDoc from '@/doc/inputnumber/PrefixSuffixDoc.vue';
import VerticalDoc from '@/doc/inputnumber/VerticalDoc.vue';
import FloatLabelDoc from '../../doc/inputnumber/FloatLabelDoc.vue';
import InvalidDoc from '../../doc/inputnumber/InvalidDoc.vue';
export default {
Expand Down Expand Up @@ -53,11 +54,11 @@ export default {
label: 'Vertical',
component: VerticalDoc
},
// {
// id: 'floatlabel',
// label: 'Float Label',
// component: FloatLabelDoc
// },
{
id: 'floatlabel',
label: 'Float Label',
component: FloatLabelDoc
},
// {
// id: 'filled',
// label: 'Filled',
Expand Down
12 changes: 6 additions & 6 deletions pages/multiselect/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@ import ChipsDoc from '@/doc/multiselect/ChipsDoc.vue';
import DisabledDoc from '@/doc/multiselect/DisabledDoc.vue';
import FilledDoc from '@/doc/multiselect/FilledDoc.vue';
import FilterDoc from '@/doc/multiselect/FilterDoc.vue';
import FloatLabelDoc from '@/doc/multiselect/FloatLabelDoc.vue';
import GroupDoc from '@/doc/multiselect/GroupDoc.vue';
import ImportDoc from '@/doc/multiselect/ImportDoc.vue';
import InvalidDoc from '@/doc/multiselect/InvalidDoc.vue';
import LoadingStateDoc from '@/doc/multiselect/LoadingStateDoc.vue';
import TemplateDoc from '@/doc/multiselect/TemplateDoc.vue';
import VirtualScrollDoc from '@/doc/multiselect/VirtualScrollDoc.vue';
export default {
data() {
return {
Expand Down Expand Up @@ -68,11 +68,11 @@ export default {
label: 'VirtualScroll',
component: VirtualScrollDoc
},
// {
// id: 'floatlabel',
// label: 'Float Label',
// component: FloatLabelDoc
// },
{
id: 'floatlabel',
label: 'Float Label',
component: FloatLabelDoc
},
{
id: 'filled',
label: 'Filled',
Expand Down
11 changes: 6 additions & 5 deletions pages/textarea/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import AccessibilityDoc from '@/doc/textarea/AccessibilityDoc.vue';
import AutoResizeDoc from '@/doc/textarea/AutoResizeDoc.vue';
import BasicDoc from '@/doc/textarea/BasicDoc.vue';
import DisabledDoc from '@/doc/textarea/DisabledDoc.vue';
import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc.vue';
import ImportDoc from '@/doc/textarea/ImportDoc.vue';
import InvalidDoc from '@/doc/textarea/InvalidDoc.vue';
Expand All @@ -37,11 +38,11 @@ export default {
label: 'Auto Resize',
component: AutoResizeDoc
},
// {
// id: 'floatlabel',
// label: 'Float Label',
// component: FloatLabelDoc
// },
{
id: 'floatlabel',
label: 'Float Label',
component: FloatLabelDoc
},
// {
// id: 'filled',
// label: 'Filled',
Expand Down
11 changes: 6 additions & 5 deletions pages/treeselect/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/treeselect/AccessibilityDoc.vue';
import BasicDoc from '@/doc/treeselect/BasicDoc.vue';
import CheckboxDoc from '@/doc/treeselect/CheckboxDoc.vue';
import DisabledDoc from '@/doc/treeselect/DisabledDoc.vue';
import FloatLabelDoc from '@/doc/treeselect/FloatLabelDoc.vue';
import ImportDoc from '@/doc/treeselect/ImportDoc.vue';
import InvalidDoc from '@/doc/treeselect/InvalidDoc.vue';
import MultipleDoc from '@/doc/treeselect/MultipleDoc.vue';
Expand Down Expand Up @@ -35,11 +36,11 @@ export default {
label: 'Checkbox',
component: CheckboxDoc
},
// {
// id: 'float-label',
// label: 'Float Label',
// component: FloatLabelDoc
// },
{
id: 'float-label',
label: 'Float Label',
component: FloatLabelDoc
},
// {
// id: 'filled',
// label: 'Filled',
Expand Down
30 changes: 19 additions & 11 deletions presets/aura/cascadeselect/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,34 +36,42 @@ export default {
{ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
]
}),
label: ({ props }) => ({
label: ({ props, parent }) => ({
class: [
// Font
'leading-none',
//Font
'leading-[normal]',

// Display
'block',
'flex-auto',

// Flex & Alignment
'flex flex-auto',
// Color and Background
'bg-transparent',
'border-0',
{ 'text-surface-800 dark:text-white/80': props.modelValue != undefined, 'text-surface-400 dark:text-surface-500': props.modelValue == undefined },
{
'placeholder:text-transparent dark:placeholder:text-transparent': parent.instance?.$name == 'FloatLabel',
'!text-transparent dark:!text-transparent': (parent.instance?.$name == 'FloatLabel' && props.modelValue == null) || props.modelValue?.length == 0
},

// Sizing and Spacing
'w-[1%]',
'py-2 px-3',
{ 'pr-7': props.showClear },

//Shape
'rounded-none',

// Color and Background
'bg-transparent',
'border-0',
{ 'text-surface-800 dark:text-white/80': props.modelValue, 'text-surface-400 dark:text-surface-500': !props.modelValue },
'placeholder:text-surface-400 dark:placeholder:text-surface-500',

// Transitions
'transition',
'duration-200',

// States
'focus:outline-none focus:shadow-none',

// Filled State *for FloatLabel
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null },

// Misc
'relative',
'cursor-pointer',
Expand Down
8 changes: 6 additions & 2 deletions presets/aura/floatlabel/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,18 @@ export default {
// 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',

// Position for all labels except those following textarea
'[&>:not(textarea)~label]:top-1/2 [&>:not(textarea)~label]:-translate-y-1/2 ',

// Position for labels following textareas
'[&>textarea~label]:top-4',

// Focus Label Appearance
'[&>*:last-child]:has-[:focus]:-top-3',
'[&>*:last-child]:has-[:focus]:text-sm',
Expand Down
64 changes: 34 additions & 30 deletions presets/aura/inputmask/index.js
Original file line number Diff line number Diff line change
@@ -1,39 +1,43 @@
export default {
root: ({ context, props, parent }) => ({
class: [
// Font
'leading-none',
pcinputtext: {
root: ({ context, props, parent }) => ({
class: [
// Font
'leading-none',

// Spacing
'm-0 py-2 px-3',
// Spacing
'm-0 py-2 px-3',

// 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 },
// Colors
'text-surface-800 dark:text-white/80',
{ 'bg-surface-0 dark:bg-surface-950': !context.disabled },

'border',
{ 'border-surface-300 dark:border-surface-700': !props.invalid },
'border',
{ 'border-surface-300 dark:border-surface-700': !props.invalid },

// Invalid State
'invalid:focus:ring-red-200',
'invalid:hover:border-red-500',
{ 'border-red-500 dark:border-red-400': props.invalid },
// Invalid State
'invalid:focus:ring-red-200',
'invalid:hover:border-red-500',
{ 'border-red-500 dark:border-red-400': props.invalid },

// 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
},
// 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
},

// Filled State *for FloatLabel
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },
// Filled State *for FloatLabel
{
filled: (parent.instance?.$name == 'FloatLabel' && context.filled) || (parent.instance?.$parentInstance?.$name == 'FloatLabel' && parent.props.modelValue !== null && parent.props.modelValue?.length !== 0)
},
parent.instance?.$name == 'FloatLabel' || parent.instance?.$parentInstance?.$name == 'FloatLabel' ? 'placeholder:text-transparent dark:placeholder:text-transparent' : 'placeholder:text-surface-400 dark:placeholder:text-surface-500',

// Misc
'rounded-md',
'appearance-none',
'transition-colors duration-200'
]
})
// Misc
'rounded-md',
'appearance-none',
'transition-colors duration-200'
]
})
}
};
Loading

0 comments on commit 39d6825

Please sign in to comment.