@teammodlr/ui-kit 1.0.7 → 2.0.0

package/src/components/select/Select.css

@@ -1,226 +0,0 @@
-.m-select__container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-
-.m-select__container:focus {
-    outline: none;
-}
-
-.m-select {
-    --select-height: 40px;
-    --select-padding: 0 8px;
-    --select-font-size: 15px;
-    --select-border-radius: 4px;
-    --select-clear-size: 1.2rem;
-    --select-background-color: var(--white);
-    --select-border-color: var(--gray-200);
-
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    height: var(--select-height);
-    font-size: var(--select-font-size);
-    background-color: var(--select-background-color);
-    border: 1px solid var(--select-border-color);
-    box-shadow: none;
-    border-radius: var(--select-border-radius);
-    outline: 0;
-    cursor: text;
-    width: 100%;
-    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.m-select:not(.m-select--disabled):not(.m-select--focused):hover {
-    --select-border-color: var(--gray-400);
-}
-
-.m-select:not(.m-select--disabled):focus,
-.m-select:not(.m-select--disabled):focus-within,
-.m-select:not(.m-select--disabled).m-select--focused {
-    --select-border-color: var(--blue);
-    box-shadow: 0 0 0 2px var(--blue-outline);
-    outline: none;
-}
-
-.m-select.m-select--disabled {
-    --select-border-color: var(--gray-300);
-    --select-background-color: var(--gray-100);
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-.m-select__clearable {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 6px;
-}
-
-.m-select .m-select__clearable i.m-icon--close {
-    cursor: pointer;
-    width: var(--select-clear-size);
-    height: var(--select-clear-size);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 100%;
-    color: var(--gray-500);
-    background-color: transparent;
-    transition: background-color .125s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.m-select .m-select__clearable i.m-icon--close:hover {
-    color: var(--gray-500);
-    background-color: var(--gray-150);
-}
-
-.m-select i.m-icon--close::before {
-    --close-icon-size: 16px;
-    background-color: currentColor;
-    content: "";
-    width: var(--close-icon-size);
-    height: var(--close-icon-size);
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-5 h-5'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z' /%3E%3C/svg%3E%0A");
-    -webkit-mask-position: center center;
-    mask-position: center center;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    -webkit-mask-size: var(--close-icon-size) var(--close-icon-size);
-    mask-size: var(--close-icon-size) var(--close-icon-size);
-}
-
-.m-select--xs {
-    --select-height: 32px;
-    --select-padding: 0 8px;
-    --select-font-size: 13px;
-    --select-border-radius: 4px;
-    --select-clear-size: 1.2rem;
-}
-
-.m-select--sm {
-    --select-height: 36px;
-    --select-padding: 0 8px;
-    --select-font-size: 14px;
-    --select-border-radius: 4px;
-    --select-clear-size: 1.2rem;
-}
-
-.m-select--md {
-    --select-height: 40px;
-    --select-padding: 0 8px;
-    --select-font-size: 15px;
-    --select-border-radius: 4px;
-    --select-clear-size: 1.2rem;
-}
-
-.m-select--lg {
-    --select-height: 42px;
-    --select-padding: 0 8px;
-    --select-font-size: 16px;
-    --select-border-radius: 4px;
-    --select-clear-size: 1.2rem;
-}
-
-.m-select--xl {
-    --select-height: 46px;
-    --select-padding: 0 8px;
-    --select-font-size: 18px;
-    --select-border-radius: 6px;
-    --select-clear-size: 1.2rem;
-}
-
-.m-select__label {
-    margin-bottom: 5px;
-    color: var(--gray-600);
-    font-size: 15px;
-    font-weight: 600;
-}
-
-.m-select__input {
-    padding: var(--select-padding);
-    font-size: 15px;
-    color: var(--gray-600);
-}
-
-.m-select__help {
-    margin-top: 4px;
-    color: var(--gray-500);
-    font-size: 15px;
-    font-weight: 400;
-}
-
-.m-select__error {
-    margin: 4px 0 8px 0;
-    color: var(--red);
-    font-size: 15px;
-    font-weight: 400;
-}
-
-.m-form .m-select__form {
-    margin-bottom: 16px;
-}
-
-.m-form .m-select__form .m-select__error {
-    margin: 4px 0 0 0;
-}
-
-.m-select__dropdown {
-    z-index: 100;
-    max-height: 400px;
-    min-width: 200px;
-    overflow-y: auto;
-    border-radius: 4px;
-    background-color: var(--white);
-    box-shadow: 0 0 0 1px var(--gray-200), 0 4px 8px 0 rgba(0, 0, 0, 0.1);
-    display: flex;
-    flex-direction: column;
-}
-
-.m-select__dropdown[data-popper-placement^="bottom-"] {
-    margin-top: 5px!important;
-}
-
-.m-select__dropdown[data-popper-placement^="top-"] {
-    margin-bottom: 5px!important;
-}
-
-.m-select__search {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    background-color: var(--white);
-    padding: 6px 6px 0;
-}
-
-.m-select__options {
-    padding: 4px 0;
-}
-
-.m-select__option {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 8px;
-    margin: 0 4px;
-    font-size: 15px;
-    color: var(--gray-600);
-    cursor: pointer;
-    transition: background-color .125s cubic-bezier(0.4, 0, 0.2, 1);
-    border-radius: 4px;
-}
-
-.m-select__option--selected {
-    color: var(--blue)!important;
-}
-
-.m-select__option--focused {
-    background-color: var(--gray-100);
-}
-
-.m-select__placeholder-text {
-    color: var(--gray-500);
-}

package/src/components/select/Select.vue

@@ -1,43 +1,50 @@
 <template>
-    <div :class="containerComputedClasses" ref="selectRef" tabindex="0">
-        <label v-if="label" :for="id" class="m-select__label" v-on="listeners" :id="`${id}-label`">
+    <div ref="selectRef" tabindex="0"  @focus="focusSelect" @blur="open = false" style="outline: none">
+        <label v-if="label" :for="id" :class="style.label" :id="`${id}-label`">
             {{ label }}
         </label>
+        <div v-if="description" :class="style.description">
+            {{ description }}
+        </div>
 
-        <div :class="selectComputedClasses" :id="id" ref="container" @click="openSelect" :aria-disabled="disabled ? 'true' : 'false'" :aria-labelledby="`${id}-label`">
+        <div :class="style.wrapper" v-on="inputListeners" :id="id" ref="container" @click="openSelect" :aria-disabled="disabled ? 'true' : 'false'" :aria-labelledby="`${id}-label`" tabindex="0">
             <div class="m-select__wrapper">
-                <div class="m-select__input">
-                    <div class="m-select__input-wrapper">
-                        <template v-if="multiple && Array.isArray(selected) && selected.length > 0">
-                            <span 
-                                v-for="value in selected"
-                                :key="value"
-                                class="m-select__tag">
-                                {{ getSelectedLabel(value) }}
-                            </span>
-                        </template>
-                        <template v-else-if="!multiple && selected">
-                            {{ getSelectedLabel(selected) }}
-                        </template>
-                        <template v-else>
-                            <span class="m-select__placeholder-text">{{ placeholder }}</span>
-                        </template>
-                    </div>
+                
+                <div :class="selectComputedClasses">
+                    <template v-if="multiple && Array.isArray(selected) && selected.length > 0">
+                        <MTag
+                            v-for="value in selected"
+                            :key="value"
+                            :closeable="true"
+                            @close="removeSelected(value)"
+                            :size="size"
+                            >
+                            {{ getSelectedLabel(value) }}
+                        </MTag>
+                    </template>
+                    <template v-else-if="!multiple && selected">
+                        {{ getSelectedLabel(selected) }}
+                    </template>
+                    <template v-else>
+                        <div :class="style.placeholder">{{ placeholder }}</div>
+                    </template>
                 </div>
+                
                 <Teleport :to="'body'">
                     <Transition :name="transitionName">
-                        <div class="m-select__dropdown" v-if="open" ref="popper" :style="computedConsistentWidth" :aria-hidden="open ? 'false' : 'true'">
-                            <div v-if="searchable" class="m-select__search">
+                        <div :class="style.menu" v-if="isOpen" ref="popper" :style="computedConsistentWidth" :aria-hidden="isOpen ? 'false' : 'true'">
+                            <div v-if="searchable" :class="style.search">
                                 <MInput v-model="search" placeholder="Search" size="sm" ref="searchRef" />
                             </div>
-                            <div class="m-select__options">
-                                <div v-for="option, index in computedOptions" :key="index" ref="optionsRef"
-                                    class="m-select__option" :class="{
-                                        'm-select__option--selected': option.active,
-                                        'm-select__option--focused': selectedIndex === index
+                            <div :class="style.options">
+                                <div v-for="(option, index) in computedOptions" :key="index" ref="optionsRef"
+                                    :class="{
+                                        [style.option]: true,
+                                        [style.optionSelected]: option.active,
+                                        [style.optionFocused]: selectedIndex === index
                                     }" 
                                     @click="option.onClick" 
-                                    @mouseover="selectedIndex = index">
+                                    @hover="selectedIndex = index">
                                     {{ option.label }}
                                 </div>
                             </div>
@@ -46,9 +53,9 @@
                 </Teleport>
             </div>
         </div>
-        <p v-if="inputError" class="m-select__error">
+        <div v-if="inputError" :class="style.errorMessage">
             {{ inputError }}
-        </p>
+        </div>
     </div>
 </template>
 
@@ -64,15 +71,18 @@ import {
     ref,
     watch,
     watchEffect,
-    type PropType
+    type PropType, defineExpose
 } from "vue";
-import { MInput } from "..";
+import { MInput, MTag } from "..";
+import * as style from "./style";
+import {useInteractive} from "../../composables/useInteractive";
 
 export default defineComponent({
     name: 'MSelect',
     emits: useInput.emits(),
     props: {
         ...useInput.props(),
+        ...useInteractive.props(),
         label: {
             type: String
         },
@@ -96,7 +106,7 @@ export default defineComponent({
             type: String as PropType<Size>,
             default: 'md',
         },
-        help: {
+        description: {
             type: String,
             default: ''
         },
@@ -124,13 +134,20 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
+        error: {
+            type: String,
+        },
+    },
+    components: {
+        MInput,
+        MTag
     },
     setup(props, { emit }) {
-        const container = ref<HTMLDivElement>();
-        const wrapper = ref<HTMLDivElement>();
-        const optionsRef = ref<HTMLDivElement[]>();
-        const searchRef = ref<HTMLDivElement>();
-        const selectRef = ref<HTMLDivElement>();
+        const container = ref<HTMLElement|null>(null);
+        const wrapper = ref<HTMLElement>();
+        const optionsRef = ref<HTMLElement[]>();
+        const searchRef = ref<HTMLElement>();
+        const selectRef = ref<HTMLElement>();
         const selectedIndex = ref<number | undefined>(0);
         const open = ref<boolean>(false);
         const search = ref<string>('');
@@ -139,13 +156,12 @@ export default defineComponent({
         const width = ref<number>(0);
         const keyboardNavigation = ref<boolean>(false);
 
-        const focus = () => { };
-
+        const { focus, blur } = useInteractive(container);
         // TODO: Add debounce on keyboard movement (hover flicks it back up)
         const {
             id,
             insideForm,
-            listeners,
+            inputListeners,
             formError,
             formDisabled,
             formLoading
@@ -155,7 +171,8 @@ export default defineComponent({
             placement,
             transfer,
             reference: container,
-            wrapper
+            wrapper,
+            offset: [0, 5]
         });
 
         const disabled = computed(() => formDisabled || props.disabled);
@@ -217,14 +234,21 @@ export default defineComponent({
                     } else {
                         active = selected.value === value;
                     }
-
+                
                     return {
                         value: value,
                         label: option[props.optionLabel],
                         active: active,
                         onClick: () => handleOptionClick(value)
                     }
-                })
+                }).filter((option) => {
+                    if (props.multiple && Array.isArray(selected.value)) {
+                        // Filter out selected options
+                        return !selected.value.includes(option.value);
+                    }
+
+                    return true;
+                });
             }
 
             return props.options.map((option) => {
@@ -250,7 +274,14 @@ export default defineComponent({
                     active: active,
                     onClick: () => handleOptionClick(value)
                 }
-            })
+            }).filter((option) => {
+                if (props.multiple && Array.isArray(selected.value)) {
+                    // Filter out selected options
+                    return !selected.value.includes(option.value);
+                }
+
+                return true;
+            });
         });
 
         function openSelect() {
@@ -310,6 +341,20 @@ export default defineComponent({
             }
         }
 
+        function removeSelected(value: string | number) {
+            if (!props.multiple) {
+                return;
+            }
+
+            if (Array.isArray(selected.value)) {
+                const index = selected.value.indexOf(value);
+
+                if (index !== -1) {
+                    selected.value.splice(index, 1);
+                }
+            }
+        }
+
         function handleKeyDown(e: Event) {
             if (computedOptions.value.length === 0) {
                 return;
@@ -385,9 +430,10 @@ export default defineComponent({
 
         const selectComputedClasses = computed(() => {
             return [
-                'm-select',
+                style.base,
                 {
-                    [`m-select--${props.size}`]: props.size,
+                    [style.selectedTags]: props.multiple,
+                    // [`m-select--${props.size}`]: props.size,
                     'm-select--disabled': disabled.value || loading.value,
                     'm-select--focused': open.value,
                     'm-select--multiple': props.multiple,
@@ -445,14 +491,34 @@ export default defineComponent({
             return formError.value || props.error;
         });
 
+        const isOpen = computed(() => {
+            if (props.multiple && computedOptions.value.length == 0 && !search.value) {
+                return false;
+            }
+            return open.value;
+        });
+
+        const focusSelect = () => {
+            if (selectRef.value) {
+                openSelect();
+            }
+        }
+
+        defineExpose({
+            focus,
+            blur,
+        })
+
         return {
             container,
             optionsRef,
             searchRef,
             selectRef,
             popper,
+            focusSelect,
 
             id,
+            isOpen,
             open,
             selected,
             computedOptions,
@@ -465,9 +531,11 @@ export default defineComponent({
 
             getSelectedLabel,
             openSelect,
+            removeSelected,
             inputError,
             transitionName,
-            listeners
+            inputListeners,
+            style
         }
     }
 });

package/src/components/select/examples/index.stories.ts

@@ -7,7 +7,7 @@ import {
 
 import {
     createStory, sizeArgType
-} from "@/__storybook__";
+} from "../../../__storybook__";
 
 export default {
     component: MSelect,

package/src/components/select/examples/multiple.vue

@@ -7,13 +7,12 @@
         multiple
         searchable
         />
-        {{ value }}
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
 
-const options = Array.from({ length: 50 }, (_, i) => ({
+const options = Array.from({ length: 5 }, (_, i) => ({
     id: i,
     name: `Option ${i+1}`
 }));