Skip to content

Commit aa24d3b

Browse files
jd-solankijd-solanki
authored
feat: improve slot content in base-input (#71)
1 parent aaf5af1 commit aa24d3b

File tree

5 files changed

+54
-21
lines changed

5 files changed

+54
-21
lines changed

‎packages/anu-vue/src/components/base-input/ABaseInput.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ export const ABaseInput = defineComponent({
2121
disabled,
2222
readonly,
2323
},
24-
setup(props, { attrs, slots, expose }) {
24+
emits: ['click:inputWrapper'],
25+
setup(props, { attrs, slots, expose, emit }) {
2526
const spacing = useSpacing(toRef(props, 'spacing'))
2627
const iconTransition = 'transition duration-150 ease -in'
2728
const elementId = attrs.id || props.label ? `a-input-${attrs.id || props.label}-${Math.random().toString(36).slice(2, 7)}` : undefined
@@ -56,9 +57,9 @@ export const ABaseInput = defineComponent({
5657
}
5758

5859
{/* SECTION Input wrapper */}
59-
<div class={[
60+
<div onClick={() => { emit('click:inputWrapper') }} class={[
6061
`${props.error ? 'border-danger' : 'focus-within:border-primary'}`,
61-
'a-base-input-input-wrapper relative i:focus-within:text-primary items-center border border-solid border-a-border w-full',
62+
'a-base-input-input-wrapper cursor-text em:spacing:px-4 spacing:gap-x-2 relative i:focus-within:text-primary items-center border border-solid border-a-border w-full',
6263
props.inputWrapperClasses,
6364
]}>
6465

@@ -75,7 +76,7 @@ export const ABaseInput = defineComponent({
7576
{slots.default?.({
7677
...attrs,
7778
class: [
78-
'a-base-input-child w-full h-full absolute inset-0 rounded-inherit bg-transparent',
79+
'a-base-input-child w-full h-full inset-0 rounded-inherit bg-transparent',
7980
slots['prepend-inner'] || props.prependInnerIcon ? 'a-base-input-w-prepend-inner' : 'a-base-input-wo-prepend-inner',
8081
slots['append-inner'] || props.appendInnerIcon ? 'a-base-input-w-append-inner' : 'a-base-input-wo-append-inner',
8182
],

‎packages/anu-vue/src/components/input/AInput.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { PropType } from 'vue'
2-
import { defineComponent } from 'vue'
2+
import { defineComponent, ref } from 'vue'
33
import { ABaseInput, useBaseInputProp } from '@/components/base-input'
44

55
export const AInput = defineComponent({
@@ -17,6 +17,8 @@ export const AInput = defineComponent({
1717
},
1818
emits: ['input', 'update:modelValue'],
1919
setup(props, { slots, emit, attrs }) {
20+
const input = ref<HTMLInputElement>()
21+
2022
const isInputTypeFile = attrs.type && attrs.type === 'file'
2123

2224
const handleChange = (e: InputEvent) => {
@@ -25,14 +27,18 @@ export const AInput = defineComponent({
2527
emit('update:modelValue', val)
2628
}
2729

28-
return () => <ABaseInput disabled={props.disabled} readonly={props.readonly} {...attrs}>
30+
const handleInputWrapperClick = () => {
31+
input.value?.focus()
32+
}
33+
34+
return () => <ABaseInput onClick:inputWrapper={handleInputWrapperClick} class={isInputTypeFile && 'a-input-type-file'} disabled={props.disabled} readonly={props.readonly} {...attrs}>
2935
{{
3036
// Recursively pass down slots
3137
...slots,
3238
default: (slotProps: any) => <input
3339
{...slotProps}
40+
ref={input}
3441
value={props.modelValue}
35-
class={isInputTypeFile && 'a-input-type-file'}
3642
onInput={handleChange}
3743
/>,
3844
}}

‎packages/anu-vue/src/components/textarea/ATextarea.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { defineComponent } from 'vue'
1+
import { defineComponent, ref } from 'vue'
22
import { ABaseInput, useBaseInputProp } from '@/components/base-input'
33

44
export const ATextarea = defineComponent({
@@ -23,12 +23,19 @@ export const ATextarea = defineComponent({
2323
...useBaseInputProp(),
2424
},
2525
setup(props, { slots, emit, attrs }) {
26-
return () => <ABaseInput disabled={props.disabled} readonly={props.readonly} {...attrs} inputWrapperClasses={['min-h-32', props.height]}>
26+
const textarea = ref<HTMLTextAreaElement>()
27+
28+
const handleInputWrapperClick = () => {
29+
textarea.value?.focus()
30+
}
31+
32+
return () => <ABaseInput onClick:inputWrapper={handleInputWrapperClick} disabled={props.disabled} readonly={props.readonly} {...attrs} inputWrapperClasses={['min-h-32', props.height]}>
2733
{{
2834
// Recursively pass down slots
2935
...slots,
3036
default: (slotProps: any) =>
3137
<textarea
38+
ref={textarea}
3239
{...slotProps}
3340
value={props.modelValue}
3441
onInput={(event: Event) => emit('update:modelValue', (event.target as HTMLInputElement).value)}

‎packages/anu-vue/src/presets/theme-default/index.ts

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -61,22 +61,25 @@ const themeShortcuts: Exclude<Preset['shortcuts'], undefined> = [
6161
'a-badge-bordered': 'outline em:spacing:outline-width-[0.166666666666667em] outline-[hsl(var(--a-layer))]',
6262

6363
// 👉 Base Input
64-
'a-base-input-root': 'spacing:min-w-[181px] em:spacing:gap-y-1',
64+
'a-base-input-root': 'em:spacing:gap-y-1',
6565
'a-base-input-input-container': 'i:em:w-6 i:em:h-6 em:spacing:gap-x-3',
66-
'a-base-input-input-wrapper': 'transition duration-250 ease-out flex i:em:w-5 i:em:h-5 em:spacing:gap-x-2 em:spacing:h-12 em:spacing:rounded-lg',
66+
'a-base-input-input-wrapper': 'transition duration-250 ease-out flex i:em:w-5 i:em:h-5 em:spacing:h-12 em:spacing:rounded-lg',
6767

68-
'a-base-input-prepend-inner-icon': 'em:spacing:ml-3 z-1',
69-
'a-base-input-append-inner-icon': 'em:spacing:me-3',
68+
'a-base-input-prepend-inner-icon': 'z-1',
7069

71-
'a-base-input-w-prepend-inner': 'em:spacing:pl-10',
72-
'a-base-input-wo-prepend-inner': 'em:spacing:pl-4',
73-
'a-base-input-w-append-inner': 'em:spacing:pr-10',
74-
'a-base-input-wo-append-inner': 'em:spacing:pr-4',
70+
// 'a-base-input-append-inner-icon': '',
71+
72+
// 'a-base-input-w-prepend-inner': 'em:spacing:pl-10',
73+
// 'a-base-input-wo-prepend-inner': 'em:spacing:pl-4',
74+
// 'a-base-input-w-append-inner': 'em:spacing:pr-10',
75+
// 'a-base-input-wo-append-inner': 'em:spacing:pr-4',
7576

7677
// ℹ️ We have to add important before `bg-` because textarea has `bg-transparent` class
77-
'a-base-input-disabled': '!all-[.a-base-input-child]-bg-[hsla(var(--a-base-color),0.12)] opacity-50',
78+
'a-base-input-disabled': '!all-[.a-base-input-input-wrapper]-bg-[hsla(var(--a-base-color),0.12)] opacity-50',
7879
'a-base-input-interactive': 'all-[.a-base-input-child]-placeholder:transition all-[.a-base-input-child]-placeholder:duration-250 all-[.a-base-input-child]-placeholder:ease all-[.a-base-input-child:focus]-placeholder-translate-x-1',
7980

81+
// 'a-base-input-child': 'autofill-bg-transparent',
82+
8083
// 👉 Button
8184
'a-btn': 'em:spacing:px-4 font-medium em:spacing:rounded-lg em:spacing:gap-x-2 em:spacing:h-10 focus-visible:ring-2 ring-offset-2',
8285
'a-btn-icon-only': 'font-medium em:spacing:rounded-lg em:spacing:h-10 em:spacing:w-10 i:em:text-lg focus-visible:ring-2 ring-offset-2',
@@ -108,7 +111,7 @@ const themeShortcuts: Exclude<Preset['shortcuts'], undefined> = [
108111
'a-drawer': 'shadow-2xl z-[53] !rounded-none',
109112

110113
// 👉 Input
111-
'a-input-type-file': 'file:rounded-lg file:border-none file:mr-4 file:px-4 file:py-3 file:text-gray-500 file:rounded-r-none file:bg-[hsla(var(--a-base-color),0.05)] !px-0',
114+
'a-input-type-file': 'all-[.a-base-input-child]-file:(rounded-lg border-none mr-4 px-4 py-3 text-gray-500 rounded-r-none bg-[hsla(var(--a-base-color),0.05)]) !all-[.a-base-input-input-wrapper]-px-0',
112115

113116
// 👉 List
114117
'a-list': 'em:spacing:rounded-lg em:spacing:my-2',
@@ -154,7 +157,7 @@ const themeShortcuts: Exclude<Preset['shortcuts'], undefined> = [
154157
'a-table-footer-next-page-btn': '!rounded-full',
155158

156159
// 👉 Textarea
157-
'a-textarea': 'em:spacing:py-4',
160+
'a-textarea': 'em:spacing:py-4 overflow-x-hidden',
158161

159162
// !SECTION Components
160163
},

‎packages/anu-vue/src/presets/theme-default/scss/index.scss

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@import '@unocss/reset/tailwind.css';
22

3+
$body-color: hsla(var(--a-base-color), 0.68);
4+
35
:root {
46
--a-base-color: 0, 10%, 20%;
57
--a-layer: 0, 0%, 100%;
@@ -79,7 +81,7 @@
7981
// 👉 Typography
8082

8183
html, body {
82-
color: hsla(var(--a-base-color), 0.68);
84+
color: $body-color;
8385

8486
// Disable mobile tap blue color
8587
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
@@ -122,3 +124,17 @@ textarea {
122124
outline: none;
123125
}
124126
}
127+
128+
// ℹ️ Remove autocomplete styles
129+
input:-webkit-autofill,
130+
input:-webkit-autofill:hover,
131+
input:-webkit-autofill:focus,
132+
textarea:-webkit-autofill,
133+
textarea:-webkit-autofill:hover,
134+
textarea:-webkit-autofill:focus,
135+
select:-webkit-autofill,
136+
select:-webkit-autofill:hover,
137+
select:-webkit-autofill:focus {
138+
-webkit-text-fill-color: $body-color;
139+
transition: background-color 5000s ease-in-out 0s;
140+
}

0 commit comments

Comments
 (0)