Skip to content

Commit 21a8cfb

Browse files
nandi95nandi95
authored
feat 0.17.0 (#484)
## Style * style(button-toggle): added `small` prop * style(pagination): added `small` prop * style(input): added `small` prop * style(textarea): added `small` prop * style(select): added `small` prop * style(file-input): added `small` prop and small inconsistency fixes ## Refactor * refactor(select): simplify decision block ## Testing * test(select)!: update selector ## Fix * fix(file-input): disable file dropping when disabled ## Chore * chore(deps-dev): updated dependencies * chore: increment version ## Build * build: fix argument for manual running of web type builder
1 parent 08a7554 commit 21a8cfb

File tree

19 files changed

+622
-518
lines changed

19 files changed

+622
-518
lines changed

‎package-lock.json

Lines changed: 440 additions & 440 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@karnama/vueish",
3-
"version": "0.16.0",
3+
"version": "0.17.0",
44
"files": [
55
"dist",
66
"types"

‎src/components/button-toggle/Demo.vue

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
label="Large"
88
name="large"
99
class="mb-6" />
10+
<UICheckbox v-model="small"
11+
label="Small"
12+
name="small"
13+
class="mb-6" />
1014
<UICheckbox v-model="multi"
1115
label="Multi select"
1216
name="multi"
@@ -22,6 +26,7 @@
2226
<UIButtonToggle v-model="selected"
2327
:options="options"
2428
:large="large"
29+
:small="small"
2530
:multi="multi"
2631
theme="blue"
2732
:clearable="clearable"
@@ -33,6 +38,7 @@
3338
<UIButtonToggle v-model="selectedSlotted"
3439
:options="slottedOptions"
3540
:large="large"
41+
:small="small"
3642
:multi="multi"
3743
theme="blue"
3844
:clearable="clearable"
@@ -72,6 +78,7 @@ export default defineComponent({
7278
const selectedSlotted = ref(null);
7379
const disabled = ref(false);
7480
const large = ref(false);
81+
const small = ref(false);
7582
const multi = ref(false);
7683
const clearable = ref(false);
7784
@@ -83,7 +90,8 @@ export default defineComponent({
8390
disabled,
8491
large,
8592
multi,
86-
clearable
93+
clearable,
94+
small
8795
};
8896
}
8997
});

‎src/components/button-toggle/UIButtonToggle.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
:theme="option.theme || theme"
77
:outline="!checked"
88
:large="large"
9+
:small="small"
910
v-bind="$attrs"
1011
:disabled="disabled"
1112
class="border"
@@ -27,7 +28,7 @@
2728
import { defineComponent, watch } from 'vue';
2829
import type { PropType } from 'vue';
2930
import UIButtonGroup, { props } from 'components/button-group/UIButtonGroup.vue';
30-
import { large, theme, disabled, clearable } from '@/shared-props';
31+
import { large, theme, disabled, clearable, small } from '@/shared-props';
3132
import { useVModel } from 'composables/reactivity';
3233
import UIButton from 'components/button/UIButton.vue';
3334
import { isEqual, uniq } from 'lodash-es';
@@ -67,6 +68,7 @@ export default defineComponent({
6768
clearable,
6869
disabled,
6970
large,
71+
small,
7072
theme,
7173
...props
7274
},

‎src/components/file-input/Demo.vue

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
<UICheckbox v-model="large"
44
name="large"
55
label="Large Style" />
6+
<UICheckbox v-model="small"
7+
name="small"
8+
label="Small Style" />
69
<UICheckbox v-model="loading"
710
name="loading"
811
label="Loading" />
@@ -15,15 +18,18 @@
1518
<div class="space-y-10">
1619
<UIFileInput v-model="file"
1720
:large="large"
21+
:small="small"
1822
:error="error"
1923
:loading="loading"
24+
placeholder="File input"
2025
clearable
2126
name="file-input"
2227
label="Default file input" />
2328

2429
<UIFileInput v-model="file"
2530
name="file-input"
2631
:large="large"
32+
:small="small"
2733
:error="error"
2834
:loading="loading"
2935
disabled
@@ -32,6 +38,7 @@
3238
<UIFileInput v-model="file2"
3339
name="file-input"
3440
:large="large"
41+
:small="small"
3542
:error="error"
3643
:loading="loading"
3744
multiple
@@ -41,6 +48,7 @@
4148
<UIFileInput v-model="file2"
4249
name="file-input"
4350
:large="large"
51+
:small="small"
4452
:error="error"
4553
:loading="loading"
4654
:display-name-func="displayName"
@@ -65,6 +73,7 @@ export default defineComponent({
6573
const large = ref(false);
6674
const error = ref('');
6775
const loading = ref(false);
76+
const small = ref(false);
6877
6978
const displayName = (files: MaybeArray<File> | null) => {
7079
if (!files) return '';
@@ -80,7 +89,8 @@ export default defineComponent({
8089
displayName,
8190
large,
8291
error,
83-
loading
92+
loading,
93+
small
8494
};
8595
}
8696
});

‎src/components/file-input/UIFileInput.vue

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
'bg-gray-200 dark:!bg-gray-700 cursor-not-allowed': disabled,
2020
'cursor-pointer': !disabled,
2121
'focus-within:border-blue-400 dark:focus-within:border-blue-500':!(error || $slots.error) && !disabled,
22-
'border-red-700 dark:!border-red-500': error || $slots.error
22+
'border-red-700 dark:!border-red-500': error || $slots.error,
23+
'border-blue-400 dark:border-blue-500': isDraggedOver && !disabled
2324
}"
2425
:tabindex="disabled ? -1 : 0"
2526
:style="$attrs.style"
@@ -35,8 +36,9 @@
3536
:accept="acceptedMimes"
3637
v-bind="omit($attrs, ['class', 'style'])"
3738
@change="addFiles">
38-
<div class="flex items-center flex-wrap w-full" :class="{ 'justify-center' : displayName }">
39+
<div class="flex items-center justify-between w-full" :class="{ 'justify-b' : displayName }">
3940
<UIButton :large="large"
41+
:small="small"
4042
:disabled="disabled"
4143
theme="default"
4244
title="Choose a file"
@@ -46,10 +48,22 @@
4648
</slot>
4749
</UIButton>
4850

49-
<template v-if="displayName">
50-
<div class="truncate text-color py-2 px-4 flex-1 select-none break-words value-text"
51-
:class="[ large ? 'ml-4' : 'ml-2' ]"
51+
<div class="flex items-center justify-between grow">
52+
<div v-if="displayName"
53+
class="truncate text-color p-3.5 ml-2 select-none break-words value-text grow"
54+
:class="{
55+
'px-7 py-5': large,
56+
'p-2 ml-0': small,
57+
}"
5258
v-html="displayName" />
59+
<template v-else>
60+
<slot name="placeholder">
61+
<p class="text-color-muted p-3.5 ml-2 grow"
62+
:class="{ 'px-7 py-5': large, 'p-2 ml-0': small }">
63+
{{ placeholder }}
64+
</p>
65+
</slot>
66+
</template>
5367

5468
<UIFadeTransition duration-out="duration-100" duration-in="duration-100">
5569
<span v-if="disabled"
@@ -63,13 +77,13 @@
6377
:class="{ 'mr-5': large }" />
6478

6579
<button v-else-if="clearable && displayName"
66-
class="clear-icon h-5 w-5 mr-2 cursor-pointer mx-auto text-color-muted shrink-0"
80+
class="clear-icon h-5 w-5 mr-2 mx-auto text-color-muted"
6781
:aria-controls="$attrs.id ?? name"
6882
aria-roledescription="clear"
6983
@click.stop="$emit('update:modelValue', null)"
7084
v-html="clearIcon" />
7185
</UIFadeTransition>
72-
</template>
86+
</div>
7387
</div>
7488
</div>
7589

@@ -96,7 +110,9 @@ import {
96110
positiveOptionalNumber,
97111
error,
98112
large,
99-
loading
113+
loading,
114+
small,
115+
placeholder
100116
} from '@/shared-props';
101117
import { omit } from 'lodash-es';
102118
import { getIcon } from '@/helpers';
@@ -151,11 +167,11 @@ export default defineComponent({
151167
maxFiles: positiveOptionalNumber,
152168
153169
/**
154-
* Override files preview output.
170+
* Override files preview output. It returns the string or html to render.
155171
*/
156172
displayNameFunc: {
157-
default: null,
158-
type: Function as PropType<(file: MaybeArray<File> | null) => string>
173+
type: Function as PropType<(file: MaybeArray<File> | null) => string>,
174+
default: null
159175
},
160176
161177
/**
@@ -175,7 +191,9 @@ export default defineComponent({
175191
disabled,
176192
large,
177193
error,
178-
loading
194+
loading,
195+
small,
196+
placeholder
179197
},
180198
181199
emits: {
@@ -211,6 +229,8 @@ export default defineComponent({
211229
const addFiles = (event: DragEvent | InputEvent) => {
212230
isDraggedOver.value = false;
213231
232+
if (props.disabled) return;
233+
214234
const fileList: FileList = event instanceof DragEvent
215235
? event.dataTransfer!.files
216236
: (event.target as HTMLInputElement).files!;
@@ -229,7 +249,7 @@ export default defineComponent({
229249
}
230250
231251
if (props.maxSize) {
232-
const tooBigFiles = files.filter(file => file.size > props.maxSize);
252+
const tooBigFiles = files.filter(file => file.size > props.maxSize!);
233253
234254
ctx.emit('validationError',
235255
{
@@ -238,7 +258,7 @@ export default defineComponent({
238258
} as FileError
239259
);
240260
241-
files = files.filter(file => file.size <= props.maxSize);
261+
files = files.filter(file => file.size <= props.maxSize!);
242262
}
243263
244264
if (props.multiple && props.maxFiles && files.length > props.maxFiles) {

0 commit comments

Comments
 (0)