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
karnama · Jul 13, 2022 · 21a8cfb · 21a8cfb
1 parent 08a7554
commit 21a8cfb
Show file tree

Hide file tree

Showing 19 changed files with 622 additions and 518 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@karnama/vueish",
-    "version": "0.16.0",
+    "version": "0.17.0",
     "files": [
         "dist",
         "types"

diff --git a/src/components/button-toggle/Demo.vue b/src/components/button-toggle/Demo.vue
@@ -7,6 +7,10 @@
                 label="Large"
                 name="large"
                 class="mb-6" />
+    <UICheckbox v-model="small"
+                label="Small"
+                name="small"
+                class="mb-6" />
     <UICheckbox v-model="multi"
                 label="Multi select"
                 name="multi"
@@ -22,6 +26,7 @@
     <UIButtonToggle v-model="selected"
                     :options="options"
                     :large="large"
+                    :small="small"
                     :multi="multi"
                     theme="blue"
                     :clearable="clearable"
@@ -33,6 +38,7 @@
     <UIButtonToggle v-model="selectedSlotted"
                     :options="slottedOptions"
                     :large="large"
+                    :small="small"
                     :multi="multi"
                     theme="blue"
                     :clearable="clearable"
@@ -72,6 +78,7 @@ export default defineComponent({
         const selectedSlotted = ref(null);
         const disabled = ref(false);
         const large = ref(false);
+        const small = ref(false);
         const multi = ref(false);
         const clearable = ref(false);
 
@@ -83,7 +90,8 @@ export default defineComponent({
             disabled,
             large,
             multi,
-            clearable
+            clearable,
+            small
         };
     }
 });

diff --git a/src/components/button-toggle/UIButtonToggle.vue b/src/components/button-toggle/UIButtonToggle.vue
@@ -6,6 +6,7 @@
                   :theme="option.theme || theme"
                   :outline="!checked"
                   :large="large"
+                  :small="small"
                   v-bind="$attrs"
                   :disabled="disabled"
                   class="border"
@@ -27,7 +28,7 @@
 import { defineComponent, watch } from 'vue';
 import type { PropType } from 'vue';
 import UIButtonGroup, { props } from 'components/button-group/UIButtonGroup.vue';
-import { large, theme, disabled, clearable } from '@/shared-props';
+import { large, theme, disabled, clearable, small } from '@/shared-props';
 import { useVModel } from 'composables/reactivity';
 import UIButton from 'components/button/UIButton.vue';
 import { isEqual, uniq } from 'lodash-es';
@@ -67,6 +68,7 @@ export default defineComponent({
         clearable,
         disabled,
         large,
+        small,
         theme,
         ...props
     },

diff --git a/src/components/file-input/Demo.vue b/src/components/file-input/Demo.vue
@@ -3,6 +3,9 @@
         <UICheckbox v-model="large"
                     name="large"
                     label="Large Style" />
+        <UICheckbox v-model="small"
+                    name="small"
+                    label="Small Style" />
         <UICheckbox v-model="loading"
                     name="loading"
                     label="Loading" />
@@ -15,15 +18,18 @@
     <div class="space-y-10">
         <UIFileInput v-model="file"
                      :large="large"
+                     :small="small"
                      :error="error"
                      :loading="loading"
+                     placeholder="File input"
                      clearable
                      name="file-input"
                      label="Default file input" />
 
         <UIFileInput v-model="file"
                      name="file-input"
                      :large="large"
+                     :small="small"
                      :error="error"
                      :loading="loading"
                      disabled
@@ -32,6 +38,7 @@
         <UIFileInput v-model="file2"
                      name="file-input"
                      :large="large"
+                     :small="small"
                      :error="error"
                      :loading="loading"
                      multiple
@@ -41,6 +48,7 @@
         <UIFileInput v-model="file2"
                      name="file-input"
                      :large="large"
+                     :small="small"
                      :error="error"
                      :loading="loading"
                      :display-name-func="displayName"
@@ -65,6 +73,7 @@ export default defineComponent({
         const large = ref(false);
         const error = ref('');
         const loading = ref(false);
+        const small = ref(false);
 
         const displayName = (files: MaybeArray<File> | null) => {
             if (!files) return '';
@@ -80,7 +89,8 @@ export default defineComponent({
             displayName,
             large,
             error,
-            loading
+            loading,
+            small
         };
     }
 });

diff --git a/src/components/file-input/UIFileInput.vue b/src/components/file-input/UIFileInput.vue
@@ -19,7 +19,8 @@
                  'bg-gray-200 dark:!bg-gray-700 cursor-not-allowed': disabled,
                  'cursor-pointer': !disabled,
                  'focus-within:border-blue-400 dark:focus-within:border-blue-500':!(error || $slots.error) && !disabled,
-                 'border-red-700 dark:!border-red-500': error || $slots.error
+                 'border-red-700 dark:!border-red-500': error || $slots.error,
+                 'border-blue-400 dark:border-blue-500': isDraggedOver && !disabled
              }"
              :tabindex="disabled ? -1 : 0"
              :style="$attrs.style"
@@ -35,8 +36,9 @@
                    :accept="acceptedMimes"
                    v-bind="omit($attrs, ['class', 'style'])"
                    @change="addFiles">
-            <div class="flex items-center flex-wrap w-full" :class="{ 'justify-center' : displayName }">
+            <div class="flex items-center justify-between w-full" :class="{ 'justify-b' : displayName }">
                 <UIButton :large="large"
+                          :small="small"
                           :disabled="disabled"
                           theme="default"
                           title="Choose a file"
@@ -46,10 +48,22 @@
                     </slot>
                 </UIButton>
 
-                <template v-if="displayName">
-                    <div class="truncate text-color py-2 px-4 flex-1 select-none break-words value-text"
-                         :class="[ large ? 'ml-4' : 'ml-2' ]"
+                <div class="flex items-center justify-between grow">
+                    <div v-if="displayName"
+                         class="truncate text-color p-3.5 ml-2 select-none break-words value-text grow"
+                         :class="{
+                             'px-7 py-5': large,
+                             'p-2 ml-0': small,
+                         }"
                          v-html="displayName" />
+                    <template v-else>
+                        <slot name="placeholder">
+                            <p class="text-color-muted p-3.5 ml-2 grow"
+                               :class="{ 'px-7 py-5': large, 'p-2 ml-0': small }">
+                                {{ placeholder }}
+                            </p>
+                        </slot>
+                    </template>
 
                     <UIFadeTransition duration-out="duration-100" duration-in="duration-100">
                         <span v-if="disabled"
@@ -63,13 +77,13 @@
                                          :class="{ 'mr-5': large }" />
 
                         <button v-else-if="clearable && displayName"
-                                class="clear-icon h-5 w-5 mr-2 cursor-pointer mx-auto text-color-muted shrink-0"
+                                class="clear-icon h-5 w-5 mr-2 mx-auto text-color-muted"
                                 :aria-controls="$attrs.id ?? name"
                                 aria-roledescription="clear"
                                 @click.stop="$emit('update:modelValue', null)"
                                 v-html="clearIcon" />
                     </UIFadeTransition>
-                </template>
+                </div>
             </div>
         </div>
 
@@ -96,7 +110,9 @@ import {
     positiveOptionalNumber,
     error,
     large,
-    loading
+    loading,
+    small,
+    placeholder
 } from '@/shared-props';
 import { omit } from 'lodash-es';
 import { getIcon } from '@/helpers';
@@ -151,11 +167,11 @@ export default defineComponent({
         maxFiles: positiveOptionalNumber,
 
         /**
-         * Override files preview output.
+         * Override files preview output. It returns the string or html to render.
          */
         displayNameFunc: {
-            default: null,
-            type: Function as PropType<(file: MaybeArray<File> | null) => string>
+            type: Function as PropType<(file: MaybeArray<File> | null) => string>,
+            default: null
         },
 
         /**
@@ -175,7 +191,9 @@ export default defineComponent({
         disabled,
         large,
         error,
-        loading
+        loading,
+        small,
+        placeholder
     },
 
     emits: {
@@ -211,6 +229,8 @@ export default defineComponent({
         const addFiles = (event: DragEvent | InputEvent) => {
             isDraggedOver.value = false;
 
+            if (props.disabled) return;
+
             const fileList: FileList = event instanceof DragEvent
                 ? event.dataTransfer!.files
                 : (event.target as HTMLInputElement).files!;
@@ -229,7 +249,7 @@ export default defineComponent({
             }
 
             if (props.maxSize) {
-                const tooBigFiles = files.filter(file => file.size > props.maxSize);
+                const tooBigFiles = files.filter(file => file.size > props.maxSize!);
 
                 ctx.emit('validationError',
                     {
@@ -238,7 +258,7 @@ export default defineComponent({
                     } as FileError
                 );
 
-                files = files.filter(file => file.size <= props.maxSize);
+                files = files.filter(file => file.size <= props.maxSize!);
             }
 
             if (props.multiple && props.maxFiles && files.length > props.maxFiles) {