@teammodlr/ui-kit 2.0.2 → 2.0.4

package/src/components/select/Select.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="selectRef" tabindex="0"  @focus="focusSelect" @blur="open = false" style="outline: none">
+    <div ref="selectRef" tabindex="-1">
         <label v-if="label" :for="id" :class="style.label" :id="`${id}-label`">
             {{ label }}
         </label>
@@ -7,51 +7,52 @@
             {{ description }}
         </div>
 
-        <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="selectComputedClasses">
-                    <template v-if="multiple && Array.isArray(selected) && selected.length > 0">
-                        <MTag
+        <div :class="computedWrapperClasses" v-on="inputListeners" :id="id" ref="container"
+             :aria-disabled="disabled ? 'true' : 'false'" :aria-labelledby="`${id}-label`" tabindex="0"
+             @focusin="focusSelect" @focusout="open = false">
+
+            <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="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="style.options">
-                                <div v-for="(option, index) in computedOptions" :key="index" ref="optionsRef"
-                                    :class="{
+                    >
+                        {{ 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="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="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" 
-                                    @hover="selectedIndex = index">
-                                    {{ option.label }}
-                                </div>
+                                    }"
+                                 @click="option.onClick"
+                                 @hover="selectedIndex = index">
+                                {{ option.label }}
                             </div>
                         </div>
-                    </Transition>
-                </Teleport>
-            </div>
+                    </div>
+                </Transition>
+            </Teleport>
         </div>
         <div v-if="inputError" :class="style.errorMessage">
             {{ inputError }}
@@ -60,10 +61,10 @@
 </template>
 
 <script lang="ts">
-import { useInput } from "../../composables/useInput";
-import { usePopper, type Placement } from "../../composables/usePopper";
-import type { Size } from "../../types/props";
-import { onClickOutside, useEventListener } from '@vueuse/core';
+import {useInput} from "../../composables/useInput";
+import {usePopper, type Placement} from "../../composables/usePopper";
+import type {Size} from "../../types/props";
+import {onClickOutside, useEventListener} from '@vueuse/core';
 import {
     computed,
     defineComponent,
@@ -71,9 +72,10 @@ import {
     ref,
     watch,
     watchEffect,
+    defineExpose,
     type PropType
 } from "vue";
-import { MInput, MTag } from "..";
+import {MInput, MTag} from "..";
 import * as style from "./style";
 import {useInteractive} from "../../composables/useInteractive";
 
@@ -142,21 +144,23 @@ export default defineComponent({
         MInput,
         MTag
     },
-    setup(props, { emit }) {
-        const container = ref<HTMLElement|null>(null);
+    setup(props, {emit}) {
+        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 focused = ref<boolean>(false);
         const search = ref<string>('');
         const placement = ref<Placement>("bottom-start");
         const transfer = ref(false);
         const width = ref<number>(0);
         const keyboardNavigation = ref<boolean>(false);
 
-        const { focus, blur } = useInteractive(container);
+
+        const {focus, blur} = useInteractive(container);
         // TODO: Add debounce on keyboard movement (hover flicks it back up)
         const {
             id,
@@ -165,9 +169,9 @@ export default defineComponent({
             formError,
             formDisabled,
             formLoading
-        } = useInput(props, { focus, emit, withListeners: false });
+        } = useInput(props, {focus, emit, withListeners: false});
 
-        const { popper } = usePopper({
+        const {popper} = usePopper({
             placement,
             transfer,
             reference: container,
@@ -234,7 +238,7 @@ export default defineComponent({
                     } else {
                         active = selected.value === value;
                     }
-                
+
                     return {
                         value: value,
                         label: option[props.optionLabel],
@@ -428,11 +432,21 @@ export default defineComponent({
             ]
         });
 
+        const computedWrapperClasses = computed(() => {
+            return [
+                style.wrapper,
+                {
+                    [style.focused]: focused.value,
+                }
+            ]
+        });
+
         const selectComputedClasses = computed(() => {
             return [
                 style.base,
                 {
                     [style.selectedTags]: props.multiple,
+                    [style.focused]: open.value,
                     // [`m-select--${props.size}`]: props.size,
                     'm-select--disabled': disabled.value || loading.value,
                     'm-select--focused': open.value,
@@ -455,8 +469,8 @@ export default defineComponent({
         useEventListener(searchRef, 'keydown', handleKeyDown)
 
         onClickOutside(container, () => {
-            open.value = false;   
-        }, { ignore: [searchRef, popper] });
+            open.value = false;
+        }, {ignore: [searchRef, popper]});
 
         watchEffect(() => {
             if (container.value && open.value) {
@@ -469,7 +483,7 @@ export default defineComponent({
                 return;
             }
             if (typeof index !== 'undefined' && optionsRef.value) {
-                optionsRef.value[index].scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                optionsRef.value[index].scrollIntoView({block: 'nearest', inline: 'nearest'});
             }
         })
 
@@ -478,7 +492,7 @@ export default defineComponent({
                 if (value && optionsRef.value) {
                     const index = computedOptions.value.findIndex((i) => i.value === selected.value);
                     if (index !== -1) {
-                        optionsRef.value[index].scrollIntoView({ block: 'center', inline: 'nearest' });
+                        optionsRef.value[index].scrollIntoView({block: 'center', inline: 'nearest'});
                         selectedIndex.value = index;
                     }
                 }
@@ -527,6 +541,7 @@ export default defineComponent({
 
             containerComputedClasses,
             selectComputedClasses,
+            computedWrapperClasses,
             computedConsistentWidth,
 
             getSelectedLabel,
@@ -535,7 +550,8 @@ export default defineComponent({
             inputError,
             transitionName,
             inputListeners,
-            style
+            style,
+            focused
         }
     }
 });

package/src/components/select/style/Select.css.ts

@@ -1,5 +1,6 @@
-import {createVar, style} from "@vanilla-extract/css";
-import {themeVars} from "../../../styles/theme.css";
+import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+import { fonts } from "../../../styles/typography.css";
 
 const sizes = {
     xs: '26px',
@@ -152,6 +153,13 @@ export const error = style({
     },
 });
 
+export const focused = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.blue[500],
+    },
+    boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`
+});
+
 export const rightIcon = style({
     pointerEvents: 'none',
     position: 'absolute',

package/src/components/table/Table.vue

@@ -10,6 +10,7 @@
                     v-for="(header, index) in headers"
                     :key="index"
                     :width="header.width"
+                    :style="{ textAlign: header.align} "
                 >
                     {{ header.name }}
                 </TableHead>
@@ -22,6 +23,7 @@
                     <TableCell
                         v-for="(header, index) in headers"
                         :key="index"
+                        :style="{ textAlign: header.align} "
                     >
                         <slot :name="header.key" :item="item">
                             {{//@ts-ignore
@@ -42,6 +44,7 @@ import TableHead from './TableHead.vue';
 import TableBody from './TableBody.vue';
 import TableRow from './TableRow.vue';
 import TableCell from './TableCell.vue';
+import * as style from "./style";
 
 export default defineComponent({
     name: "Table",
@@ -81,6 +84,7 @@ export default defineComponent({
 
         const wrapperComputedClasses = computed(() => {
             return [
+                style.wrapper,
                 'm-table__wrapper',
                 {
                     'm-table__wrapper--loading': props.loading
@@ -90,11 +94,10 @@ export default defineComponent({
 
         const tableComputedClasses = computed(() => {
             return [
-                'm-table',
+                style.table,
                 {
-                    'm-table--loading': props.loading,
-                    'm-table--striped': props.striped,
-                    'm-table--hover': props.hover
+                    [style.hoverable]: props.hover,
+                    [style.striped]: props.striped,
                 }
             ]
         });

package/src/components/table/TableCell.vue

@@ -1,5 +1,5 @@
 <template>
-    <td>
+    <td >
         <slot />
     </td>
 </template>

package/src/components/table/examples/basic.vue

@@ -2,7 +2,6 @@
     <MTable 
         :headers="headers"
         :items="items"
-        striped
     >
         <template #actions="{ item }">
             <MButton
@@ -32,7 +31,8 @@ let headers = ref<TableHeadItem[]>([
     },
     {
         name: "Actions",
-        key: "actions"
+        key: "actions",
+        align: "right"
     }
 ]);
 

package/src/components/table/style/Table.css.ts

@@ -0,0 +1,81 @@
+import { createVar, globalKeyframes, globalStyle, style, styleVariants } from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+
+export const wrapper = style({
+    width: "100%",
+    overflow: "auto",
+});
+
+const vars = {
+    headerHeight: createVar(),
+    cellPadding: createVar(),
+    fontSize: createVar()
+}
+
+export const table = style({
+    vars: {
+        [vars.headerHeight]: "44px",
+        [vars.cellPadding]: "8px 14px",
+        [vars.fontSize]: themeVars.fontSize.base,
+    },
+    width: "100%",
+    borderCollapse: "collapse",
+    fontSize: vars.fontSize
+});
+
+export const hoverable = style({});
+export const striped = style({});
+
+globalStyle(`${striped} tbody tr:nth-child(even)`, {
+    backgroundColor: themeVars.color.gray[50],
+});
+
+globalStyle(`${table} tbody:before`, {
+    content:"@",
+    display:"block",
+    lineHeight:"5px",
+    textIndent:"-99999px"
+});
+
+globalStyle(`${table} th`, {
+    height: vars.headerHeight,
+    padding: vars.cellPadding,
+    textAlign: "left",
+    backgroundColor: themeVars.color.gray[100],
+    color: themeVars.color.gray[600],
+    fontWeight: 500,
+    fontSize: themeVars.fontSize.base,
+    marginBottom: "5px"
+});
+
+// round first and last cells
+globalStyle(`${table} th:first-child`, {
+    borderTopLeftRadius: themeVars.rounded.medium,
+    borderBottomLeftRadius: themeVars.rounded.medium,
+});
+
+globalStyle(`${table} th:last-child`, {
+    borderTopRightRadius: themeVars.rounded.medium,
+    borderBottomRightRadius: themeVars.rounded.medium,
+});
+
+globalStyle(`${table} td:first-child`, {
+    borderTopLeftRadius: themeVars.rounded.medium,
+    borderBottomLeftRadius: themeVars.rounded.medium,
+});
+
+globalStyle(`${table} td:last-child`, {
+    borderTopRightRadius: themeVars.rounded.medium,
+    borderBottomRightRadius: themeVars.rounded.medium,
+});
+
+globalStyle(`${table} td`, {
+    padding: vars.cellPadding,
+    textAlign: "left",
+    color: themeVars.color.gray[900],
+    fontWeight: 400,
+});
+
+globalStyle(`${hoverable} tr:hover td`, {
+    backgroundColor: themeVars.color.gray[50],
+});

package/src/components/table/style/index.ts

@@ -0,0 +1 @@
+export * from './Table.css';

package/src/components/table/types/index.ts

@@ -2,4 +2,5 @@ export type TableHeadItem = {
     key: string;
     name?: string;
     width?: string | number;
+    align?: 'left' | 'center' | 'right';
 }

package/src/composables/useInput.ts

@@ -2,6 +2,7 @@
 import type { PropType } from 'vue';
 import { ref, watch, inject, computed, onMounted, onUnmounted } from 'vue';
 import { useCachedUid } from './useCachedUid';
+import {FORM_STATE} from "../components/form/symbol";
 
 export interface FormInput {
     focus: () => void;
@@ -24,13 +25,7 @@ export const useInput = (props: any, { focus, emit, withListeners = true }: {
     watch(() => props.error, (value) => formError.value = value);
     watch(() => props.name, (value) => name.value = value);
 
-    const form = inject('m-form', {
-        add: (inputName: string, methods: FormInput) => {},
-        remove: (inputName: string) => {},
-        insideForm: false,
-        disabled: false,
-        loading: false
-    });
+    const form = inject(FORM_STATE, null);
 
     const reset = () => {
         formError.value = '';
@@ -86,7 +81,7 @@ export const useInput = (props: any, { focus, emit, withListeners = true }: {
     }) : {};
 
     onMounted(() => {
-        form.add(_name.value,
+        form?.add(_name.value,
             focus,
             // @ts-ignore
             validate,
@@ -96,14 +91,14 @@ export const useInput = (props: any, { focus, emit, withListeners = true }: {
     })
 
     onUnmounted(() => {
-        form.remove(_name.value);
+        form?.remove(_name.value);
     });
 
     return {
         id,
         isFirstValidation,
         formError,
-        insideForm: form.insideForm,
+        insideForm: form?.insideForm ?? false,
         inputListeners,
         reset,
         validate,