@teammodlr/ui-kit 1.0.7 → 2.0.0

package/src/components/input/Input.vue

@@ -1,37 +1,38 @@
 <template>
-    <div :class="wrapperComputedClasses" ref="container">
-        <label v-if="label" :for="id" class="m-input__label" :id="`${id}-label`">
+    <div ref="container" :class="computedContainerClasses">
+        <label v-if="label" :for="id" :id="`${id}-label`" :class="style.label">
             {{ label }}
         </label>
+        <div v-if="description" :class="style.description">
+            {{ description }}
+        </div>
         
-        <div :class="inputComputedClasses">
-            <div v-if="hasPrefix" class="m-input__prefix">
-                <slot name="prefix" />
+        <div :class="wrapperComputedClasses">
+            <div v-if="hasLeftIcon" :class="style.leftIcon">
+                <slot name="icon-left" />
             </div>
             <input 
-                ref="input"
+                ref="element"
                 :id="id"  
                 :type="inputType" 
                 :placeholder="placeholder"
                 :name="name" 
                 :value="modelValue || ''"
                 :readonly="readonly"
-                v-on="listeners"
+                v-on="inputListeners"
+                :class="inputComputedClasses"
                 v-bind="$attrs"
                 :disabled="disabled || loading"
                 :aria-disabled="disabled ? 'true' : 'false'"
                 :aria-labelledby="`${id}-label`"
             />
-            <div v-if="hasSuffix" class="m-input__suffix">
-                <slot name="suffix" />
+            <div v-if="hasRightIcon" :class="style.rightIcon">
+                <slot name="icon-right" />
             </div>
         </div>
-        <p v-if="help && !inputError" class="m-input__help">
-            {{ help }}
-        </p>
-        <p v-else-if="inputError" class="m-input__error">
+        <div v-if="inputError" :class="style.errorMessage">
             {{ inputError }}
-        </p>
+        </div>
     </div>
 </template>
 
@@ -43,13 +44,17 @@ import {
     ref,
     computed,
     toRef,
+    defineExpose
 } from "vue";
 import { useInput } from "../../composables/useInput";
+import { useInteractive } from "../../composables/useInteractive";
+import * as style from './style';
+
 export default defineComponent({
     name: 'MInput',
-    emits: useInput.emits(),
     props: {
         ...useInput.props(),
+        ...useInteractive.props(),
         label: {
             type: String
         },
@@ -60,7 +65,7 @@ export default defineComponent({
         type: {
             type: String,
             default: 'text',
-            validator: (value: string) => ['text', 'password', 'number', 'email'].includes(value)
+            validator: (value: string) => ['text', 'password', 'number', 'email', 'date', 'datetime'].includes(value)
         },
         placeholder: {
             type: String,
@@ -78,18 +83,28 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
-        help: {
+        description: {
             type: String,
             default: ''
-        }
+        },
+        block: {
+            type: Boolean,
+            default: false
+        },
+        error: {
+            type: String,
+            default: ''
+        },
     },
+    emits: useInput.emits(),
     setup(props, { slots, emit }) {
-        const focus = () =>  {};
+        const element = ref<HTMLInputElement|null>(null);
+        const { focus, blur } = useInteractive(element);
         const {
             id,
             insideForm,
             reset,
-            listeners,
+            inputListeners,
             validate,
             setError,
             formError,
@@ -97,13 +112,11 @@ export default defineComponent({
             formLoading
         } = useInput(props, { focus, emit });
 
-        const input = ref<HTMLInputElement>();
-        const focused = ref(false);
         const showPassword = ref(false);
         const name = toRef(props, 'name');
 
-        const hasPrefix = computed(() => !!(slots.prefix));
-        const hasSuffix = computed(() => !!(slots.suffix));
+        const hasLeftIcon = computed(() => !!(slots['icon-left']));
+        const hasRightIcon = computed(() => !!(slots['icon-right']));
         const disabled = computed(() => formDisabled || props.disabled);
         const loading = computed(() => formLoading || props.loading);
 
@@ -117,31 +130,51 @@ export default defineComponent({
         });
 
         const readonly = computed(() => (props.loading || props.readonly));
-        
+
+        const computedContainerClasses = computed(() => {
+            return [
+                {
+                    [style.block]: props.block,
+                }
+            ]
+        });
+
         const wrapperComputedClasses = computed(() => {
             return [
-                'm-input__container',
+                style.wrapper,
                 {
-                    'm-form__input': insideForm
+                    [style.block]: props.block,
                 }
             ]
         });
 
         const inputComputedClasses = computed(() => {
             return [
-                'm-input',
-                `m-input--${props.size}`,
+                style.base,
+                style.size[props.size],
                 {
-                    'm-input--disabled': disabled.value || loading.value,
-                    'm-input--readonly': readonly.value,
-                    'm-input--focused': focused.value,
-                    'm-input--error': inputError.value,
-                    'm-input--prefix': hasPrefix.value,
-                    'm-input--suffix': hasSuffix.value,
-                    'm-input--loading': props.loading,
-                    'm-input--password': props.type === 'password'
+                    [style.block]: props.block,
+                    [style.disabled]: disabled.value || loading.value,
+                    [style.error]: inputError.value,
+                    [style.hasLeftIcon]: hasLeftIcon.value,
+                    [style.hasRightIcon]: hasRightIcon.value,
                 }
-            ]
+            ];
+
+            // return [
+            //     'm-input',
+            //     `m-input--${props.size}`,
+            //     {
+            //         'm-input--disabled': disabled.value || loading.value,
+            //         'm-input--readonly': readonly.value,
+            //         'm-input--focused': focused.value,
+            //         'm-input--error': inputError.value,
+            //         'm-input--icon-left': hasLeftIcon.value,
+            //         'm-input--icon-right': hasRightIcon.value,
+            //         'm-input--loading': props.loading,
+            //         'm-input--password': props.type === 'password'
+            //     }
+            // ]
         });
 
         const inputError = computed(() => {
@@ -152,7 +185,13 @@ export default defineComponent({
             emit('update:modelValue', '');
         };
 
+        defineExpose({
+            focus,
+            blur,
+        })
+
         return {
+            element,
             id,
             inputType,
             disabled,
@@ -160,16 +199,19 @@ export default defineComponent({
             readonly,
             inputComputedClasses,
             wrapperComputedClasses,
+            computedContainerClasses,
             name,
-            hasPrefix,
-            hasSuffix,
+            hasLeftIcon,
+            hasRightIcon,
             inputError,
+            style,
 
             onClear,
-            focus,
             validate,
             setError,
-            listeners
+            focus,
+            blur,
+            inputListeners
         }
     }
 })

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

@@ -1,7 +1,8 @@
 <template>
-    <MInput 
+    <MInput
         label="Email"
         name="email"
         placeholder="Email Address"
+        autofocus
         />
 </template>

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

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

package/src/components/input/examples/prefix.vue

@@ -1,7 +1,9 @@
 <template>
     <MInput placeholder="Brad Veryard" name="name">
-        <template #prefix>
-            Prefix
+        <template #icon-left>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 20px; height: 20px;">
+                <path stroke-linecap="round" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
+            </svg>
         </template>
     </MInput>
 </template>

package/src/components/input/examples/suffix.vue

@@ -1,7 +1,9 @@
 <template>
     <MInput placeholder="Brad Veryard" name="name">
-        <template #suffix>
-            Suffix
+        <template #icon-right>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 20px; height: 20px;">
+            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
+            </svg>
         </template>
     </MInput>
 </template>

package/src/components/input/style/Input.css.ts

@@ -0,0 +1,221 @@
+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',
+    sm: '30px',
+    md: '38px',
+    lg: '42px',
+    xl: '48px',
+};
+
+const borderRadiuses = {
+    xs: '2px',
+    sm: '3px',
+    md: '4px',
+    lg: '6px',
+    xl: '8px',
+};
+
+export const vars = {
+    height: createVar(),
+    radius: createVar(),
+    paddingX: createVar(),
+    paddingY: createVar(),
+    borderColor: createVar(),
+    backgroundColor: createVar(),
+    color: createVar(),
+    cursor: createVar(),
+}
+
+export const wrapper = style({
+    position: 'relative'
+});
+
+export const base = style({
+    vars: {
+        [vars.height]: sizes.md,
+        [vars.radius]: borderRadiuses.md,
+        [vars.paddingX]: themeVars.space[2],
+        [vars.paddingY]: themeVars.space[0.5],
+        [vars.borderColor]: themeVars.color.gray[300],
+        [vars.color]: themeVars.color.gray[600],
+        [vars.backgroundColor]: '#FFFFFF',
+        [vars.cursor]: 'text',
+    },
+    height: vars.height,
+    minHeight: vars.height,
+    width: '100%',
+    borderRadius: vars.radius,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: vars.borderColor,
+    padding: `${vars.paddingY} ${vars.paddingX}`,
+    fontSize: themeVars.fontSize.base,
+    display: 'block',
+    textAlign: 'left',
+    appearance: 'none',
+    lineHeight: vars.height,
+    boxSizing: 'border-box',
+    resize: 'none',
+    boxShadow: 'none',
+    color: vars.color,
+    transition: `color .3s ${themeVars.transition.default},
+        background-color .3s ${themeVars.transition.default},
+        box-shadow .3s ${themeVars.transition.default},
+        border-color .3s ${themeVars.transition.default}`,
+    ':hover': {
+        vars: {
+            [vars.borderColor]: themeVars.color.blue[400],
+        }
+    },
+    ':focus': {
+        vars: {
+            [vars.borderColor]: themeVars.color.blue[500],
+        },
+        outline: 'none',
+        boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`,
+    }
+});
+
+export const size = styleVariants({
+    xs: {
+        vars: {
+            [vars.height]: sizes.xs,
+            [vars.radius]: borderRadiuses.xs,
+            [vars.paddingX]: themeVars.space[1],
+        },
+        fontSize: themeVars.fontSize.small,
+    },
+    sm: {
+        vars: {
+            [vars.height]: sizes.sm,
+            [vars.radius]: borderRadiuses.sm,
+            [vars.paddingX]: themeVars.space[1.5],
+        },
+        fontSize: themeVars.fontSize.small,
+    },
+    md: {
+        vars: {
+            [vars.height]: sizes.md,
+            [vars.radius]: borderRadiuses.md
+        },
+    },
+    lg: {
+        vars: {
+            [vars.height]: sizes.lg,
+            [vars.radius]: borderRadiuses.lg,
+            [vars.paddingX]: themeVars.space[2.5],
+        },
+        fontSize: themeVars.fontSize.large,
+    },
+    xl: {
+        vars: {
+            [vars.height]: sizes.xl,
+            [vars.radius]: borderRadiuses.xl,
+            [vars.paddingX]: themeVars.space[3],
+        },
+        fontSize: themeVars.fontSize.large,
+    },
+});
+
+export const block = style({
+    width: '100%',
+});
+
+export const disabled = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.gray[200],
+        [vars.color]: themeVars.color.gray[500],
+        [vars.backgroundColor]: themeVars.color.gray[50],
+        [vars.cursor]: 'not-allowed',
+    },
+    ':focus': {
+        boxShadow: 'none',
+    },
+    ':hover': {
+        cursor: 'not-allowed',
+    }
+});
+
+export const label = style({
+    fontVariationSettings: `"wght" ${fonts.INTER.wghts[500]}`,
+    display: 'inline-block',
+    fontSize: themeVars.fontSize.base,
+    wordBreak: 'break-word',
+    cursor: 'pointer',
+    marginBottom: themeVars.space[1],
+});
+
+export const description = style({
+    display: 'block',
+    textDecoration: 'none',
+    fontSize: themeVars.fontSize.base,
+    color: themeVars.color.gray[600],
+    lineHeight: themeVars.fontSize.large,
+    wordBreak: 'break-word',
+    marginBottom: themeVars.space[1.5],
+});
+
+export const errorMessage = style({
+    display: 'block',
+    textDecoration: 'none',
+    fontSize: themeVars.fontSize.base,
+    color: themeVars.color.red[600],
+    wordBreak: 'break-word',
+    marginTop: themeVars.space[1.5],
+});
+
+export const error = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.red[500],
+    },
+    ':hover': {
+        vars: {
+            [vars.borderColor]: themeVars.color.red[500],
+        }
+    },
+    ':focus': {
+        boxShadow: `0 0 0 2px ${themeVars.color.red[200]}`,
+        vars: {
+            [vars.borderColor]: themeVars.color.red[500],
+        }
+    },
+});
+
+export const leftIcon = style({
+    pointerEvents: 'none',
+    position: 'absolute',
+    zIndex: 1,
+    left: 0,
+    top: 0,
+    bottom: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: "2.25rem",
+    color: themeVars.color.gray[400],
+});
+
+export const hasLeftIcon = style({
+    paddingLeft: "2.25rem",
+});
+
+export const rightIcon = style({
+    pointerEvents: 'none',
+    position: 'absolute',
+    zIndex: 1,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: "2.25rem",
+    color: themeVars.color.gray[400],
+});
+
+export const hasRightIcon = style({
+    paddingRight: "2.25rem",
+});

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

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

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

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

package/src/components/messageprovider/Message.vue

@@ -1,8 +1,29 @@
 <template>
-    <div 
-        v-if="show"
-        class="m-message__wrapper"
-    >
+    <div v-if="show" :class="classes">
+        <span :class="iconClasses">
+            <svg v-if="variant == 'info'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd"
+                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+                    clip-rule="evenodd" />
+            </svg>
+
+            <svg v-else-if="variant == 'success'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
+            </svg>
+
+            <svg v-else-if="variant == 'warning'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+            </svg>
+
+            <svg v-else-if="variant == 'error'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+            </svg>
+
+            <svg v-else-if="variant == 'loading'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z" clip-rule="evenodd" />
+            </svg>
+        </span>
+
         <div class="m-message">
             {{ content }}
         </div>
@@ -10,8 +31,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue';
+import { defineComponent, onMounted, ref, computed, watch } from 'vue';
 import type { PropType } from 'vue';
+import * as style from './style';
+
+type Variant = 'info' | 'success' | 'warning' | 'error' | 'default' | 'loading'
 
 export default defineComponent({
     name: 'MMessage',
@@ -28,6 +52,10 @@ export default defineComponent({
             type: String,
             default: 'default'
         },
+        variant: {
+            type: String as PropType<Variant>,
+            default: 'default'
+        },
         timeout: {
             type: Number,
             default: 10000
@@ -67,9 +95,28 @@ export default defineComponent({
             }
         }
 
+        const classes = computed(() => {
+            return [
+                style.base,
+                [style.variant[props.variant]]
+            ]
+        })
+
+        const iconClasses = computed(() => {
+            return [
+                style.icon
+            ]
+        })
+
+        watch(() => props.timeout, () => {
+            setHideTimeout();
+        })
+
         return {
             show: showRef,
             hide,
+            classes,
+            iconClasses
         }
     }
 })

package/src/components/messageprovider/MessageProvider.css

@@ -21,16 +21,3 @@
     display: flex;
     align-items: center;
 }
-
-.m-message {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    padding: 10px 20px;
-    border-radius: 3px;
-    flex-wrap: nowrap;
-    max-width: 720px;
-    color: var(--gray-700);
-    background-color: var(--white);
-    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-}

package/src/components/messageprovider/MessageProvider.vue

@@ -2,13 +2,11 @@
     <slot />
     <template v-if="messageList.length">
         <Teleport :to="teleportTo ?? 'body'">
-            <div :class="[
-                `m-message-provider__container`,
-                `m-message-provider__container--${placement}`
-            ]">
+            <div :class="classes">
                 <MMessage v-for="message in messageList" 
                     :key="message.key" 
                     :internalKey="message.key"
+                    :variant="message.type"
                     :content="message.content" 
                     :timeout="message.timeout ?? timeout"
                     ref="messageRefs" 
@@ -25,12 +23,14 @@ import {
     reactive,
     Teleport,
     defineComponent,
-    provide
+    provide,
+computed
 } from 'vue';
-import type { MessageType, MessageReactive, MessageOptions, MessageApiInjection, ContentType } from './types';
+import type { MessageType, MessageReactive, MessageOptions, MessageApiInjection, ContentType, MessagePlacement } from './types';
 import type { PropType } from 'vue';
 import MMessage from './Message.vue';
 import { useCachedUid } from '../../composables/useCachedUid';
+import * as style from './style';
 
 export type MessageProviderInst = MessageApiInjection;
 
@@ -54,14 +54,7 @@ export default defineComponent({
             default: 'body'
         },
         placement: {
-            type: String as PropType<
-                | 'top'
-                | 'top-left'
-                | 'top-right'
-                | 'bottom'
-                | 'bottom-left'
-                | 'bottom-right'
-            >,
+            type: String as PropType<MessagePlacement>,
             default: 'top'
         },
         timeout: {
@@ -129,13 +122,22 @@ export default defineComponent({
             delete messageRefs.value[key];
         }
 
+        const classes = computed(() => {
+            return [
+                style.wrapper,
+                // @ts-ignore
+                [style.placement[props.placement]]
+            ]
+        });
+
         return Object.assign(
             {
                 messageRefs,
                 messageList: messageListRef,
-                onInternalAfterLeave
+                onInternalAfterLeave,
+                classes
             },
-            api
+            api,
         )
     }
 });