@teammodlr/ui-kit 1.0.4 → 1.0.6

package/src/components/image/examples/index.ts

@@ -0,0 +1 @@
+export { default as MImageBasic } from './basic.vue';

package/src/components/index.ts

@@ -0,0 +1,27 @@
+export { default as MButton } from './button/Button.vue';
+export { default as MButtonGroup } from './buttongroup/ButtonGroup.vue';
+export { default as MForm } from './form/Form.vue';
+export { default as MInput } from './input/Input.vue';
+export { default as MSelect } from './select/Select.vue';
+export { default as MCheckbox } from './checkbox/Checkbox.vue';
+export { default as MBreadcrumb } from './breadcrumb/Breadcrumb.vue';
+export { default as MBreadcrumbItem } from './breadcrumbitem/BreadcrumbItem.vue';
+// export { default as MVirtualScroll } from './virtualscroll/VirtualScroll.vue';
+export { default as MAvatar } from './avatar/Avatar.vue';
+export { default as MAvatarGroup } from './avatargroup/AvatarGroup.vue';
+export { default as MImage } from './image/Image.vue';
+export { default as MSkeleton } from './skeleton/Skeleton.vue';
+export { default as MLink } from './link/Link.vue';
+export { default as MTooltip } from './tooltip/Tooltip.vue';
+export { default as MTabGroup } from './tab/TabGroup.vue';
+export { default as MTab } from './tab/Tab.vue';
+export { default as MTable } from './table/Table.vue';
+export { default as MTableBody } from './table/TableBody.vue';
+export { default as MTableCell } from './table/TableCell.vue';
+export { default as MTableHead } from './table/TableHead.vue';
+export { default as MTableHeadRow } from './table/TableHeadRow.vue';
+export { default as MTableRow } from './table/TableRow.vue';
+export { default as MDropdown } from './dropdown/Dropdown.vue';
+export { default as MDropdownWrapper } from './dropdown/DropdownWrapper.vue';
+export { default as MDropdownList } from './dropdown/DropdownList.vue';
+export { default as MDropdownItem } from './dropdown/DropdownItem.vue';

package/src/components/input/Input.css

@@ -0,0 +1,173 @@
+.m-input__container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.m-input {
+    --input-height: 40px;
+    --input-padding: 0 8px;
+    --input-font-size: 15px;
+    --input-border-radius: 4px;
+    --input-clear-size: 1.2rem;
+    --input-background-color: var(--white);
+    --input-border-color: var(--gray-200);
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    height: var(--input-height);
+    font-size: var(--input-font-size);
+    background-color: var(--input-background-color);
+    border: 1px solid var(--input-border-color);
+    box-shadow: none;
+    border-radius: var(--input-border-radius);
+    outline: 0;
+    cursor: text;
+    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-input.m-input--disabled {
+    --input-border-color: var(--gray-300);
+    --input-background-color: var(--gray-100);
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.m-input.m-input--disabled input {
+    cursor: not-allowed;
+}
+
+.m-input:not(.m-input--disabled):focus-within {
+    --input-border-color: var(--blue);
+    box-shadow: 0 0 0 2px var(--blue-outline);
+}
+
+.m-input:not(.m-input--disabled):not(:focus-within):hover {
+    --input-border-color: var(--gray-400);
+}
+
+.m-input input {
+    flex: 1 0 0;
+    min-width: 0;
+    height: 100%;
+    padding: var(--input-padding);
+    font-size: inherit;
+    color: var(--gray-600);
+    background-color: transparent;
+    border: 0;
+    outline: 0;
+    border-radius: var(--input-border-radius);
+}
+
+.m-input__clearable {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 6px;
+}
+
+.m-input .m-input__clearable i.m-icon--close {
+    cursor: pointer;
+    width: var(--input-clear-size);
+    height: var(--input-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-input .m-input__clearable i.m-icon--close:hover {
+    color: var(--gray-500);
+    background-color: var(--gray-150);
+}
+
+.m-input 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-input--xs {
+    --input-height: 32px;
+    --input-padding: 0 8px;
+    --input-font-size: 13px;
+    --input-border-radius: 4px;
+    --input-clear-size: 1.2rem;
+}
+
+.m-input--sm {
+    --input-height: 36px;
+    --input-padding: 0 8px;
+    --input-font-size: 14px;
+    --input-border-radius: 4px;
+    --input-clear-size: 1.2rem;
+}
+
+.m-input--md {
+    --input-height: 40px;
+    --input-padding: 0 8px;
+    --input-font-size: 15px;
+    --input-border-radius: 4px;
+    --input-clear-size: 1.2rem;
+}
+
+.m-input--lg {
+    --input-height: 42px;
+    --input-padding: 0 8px;
+    --input-font-size: 16px;
+    --input-border-radius: 4px;
+    --input-clear-size: 1.2rem;
+}
+
+.m-input--xl {
+    --input-height: 46px;
+    --input-padding: 0 8px;
+    --input-font-size: 18px;
+    --input-border-radius: 6px;
+    --input-clear-size: 1.2rem;
+}
+
+.m-input__label {
+    margin-bottom: 5px;
+    color: var(--gray-600);
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.m-input__help {
+    margin-top: 4px;
+    color: var(--gray-500);
+    font-size: 15px;
+    font-weight: 400;
+}
+
+.m-input__error {
+    margin: 4px 0 8px 0;
+    color: var(--red);
+    font-size: 15px;
+    font-weight: 400;
+}
+
+.m-form .m-form__input {
+    margin-bottom: 16px;
+}
+
+.m-form .m-form__input .m-input__error {
+    margin: 4px 0 0 0;
+}
+

package/src/components/input/Input.vue

@@ -0,0 +1,176 @@
+<template>
+    <div :class="wrapperComputedClasses" ref="container">
+        <label v-if="label" :for="id" class="m-input__label" :id="`${id}-label`">
+            {{ label }}
+        </label>
+        
+        <div :class="inputComputedClasses">
+            <div v-if="hasPrefix" class="m-input__prefix">
+                <slot name="prefix" />
+            </div>
+            <input 
+                ref="input"
+                :id="id"  
+                :type="inputType" 
+                :placeholder="placeholder"
+                :name="name" 
+                :value="modelValue || ''"
+                :readonly="readonly"
+                v-on="listeners"
+                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>
+        </div>
+        <p v-if="help && !inputError" class="m-input__help">
+            {{ help }}
+        </p>
+        <p v-else-if="inputError" class="m-input__error">
+            {{ inputError }}
+        </p>
+    </div>
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import type { Size } from "../../types/props";
+import {
+    defineComponent,
+    ref,
+    computed,
+    toRef,
+} from "vue";
+import { useInput } from "../../composables/useInput";
+export default defineComponent({
+    name: 'MInput',
+    emits: useInput.emits(),
+    props: {
+        ...useInput.props(),
+        label: {
+            type: String
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md',
+        },
+        type: {
+            type: String,
+            default: 'text',
+            validator: (value: string) => ['text', 'password', 'number'].includes(value)
+        },
+        placeholder: {
+            type: String,
+            default: ''
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        help: {
+            type: String,
+            default: ''
+        }
+    },
+    setup(props, { slots, emit }) {
+        const focus = () =>  {};
+        const {
+            id,
+            insideForm,
+            reset,
+            listeners,
+            validate,
+            setError,
+            formError,
+            formDisabled,
+            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 disabled = computed(() => formDisabled || props.disabled);
+        const loading = computed(() => formLoading || props.loading);
+
+        const inputType = computed(() => {
+            const type = props.type;
+            if (type === 'password') {
+                return showPassword.value ? 'text' : 'password';
+            }
+
+            return type;
+        });
+
+        const readonly = computed(() => (props.loading || props.readonly));
+        
+        const wrapperComputedClasses = computed(() => {
+            return [
+                'm-input__container',
+                {
+                    'm-form__input': insideForm
+                }
+            ]
+        });
+
+        const inputComputedClasses = computed(() => {
+            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--prefix': hasPrefix.value,
+                    'm-input--suffix': hasSuffix.value,
+                    'm-input--loading': props.loading,
+                    'm-input--password': props.type === 'password'
+                }
+            ]
+        });
+
+        const inputError = computed(() => {
+            return formError.value || props.error;
+        });
+
+        const onClear = () => {
+            emit('update:modelValue', '');
+        };
+
+        return {
+            id,
+            inputType,
+            disabled,
+            loading,
+            readonly,
+            inputComputedClasses,
+            wrapperComputedClasses,
+            name,
+            hasPrefix,
+            hasSuffix,
+            inputError,
+
+            onClear,
+            focus,
+            validate,
+            setError,
+            listeners
+        }
+    }
+})
+</script>

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

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

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

@@ -0,0 +1,24 @@
+import MInput from "../Input.vue";
+import {
+    MInputBasic,
+    MInputSuffix,
+    MInputPrefix,
+    MInputSizes
+} from "./index";
+
+import {
+    createStory, sizeArgType
+} from "@/__storybook__";
+
+export default {
+    component: MInput,
+    title: 'Components/Input',
+    argTypes: {
+        ...sizeArgType()
+    }
+}
+
+export const Basic = createStory(MInputBasic);
+export const Suffix = createStory(MInputSuffix);
+export const Prefix = createStory(MInputPrefix);
+export const Sizes = createStory(MInputSizes);

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

@@ -0,0 +1,4 @@
+export { default as MInputBasic } from './basic.vue';
+export { default as MInputSuffix } from './suffix.vue';
+export { default as MInputPrefix } from './prefix.vue';
+export { default as MInputSizes } from './sizes.vue';

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

@@ -0,0 +1,7 @@
+<template>
+    <MInput placeholder="Brad Veryard" name="name">
+        <template #prefix>
+            Prefix
+        </template>
+    </MInput>
+</template>

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

@@ -0,0 +1,9 @@
+<template>
+    <div>
+        <MInput clearable name="field_one" size="xs" /><br /><br />
+        <MInput clearable name="field_two" size="sm" /><br /><br />
+        <MInput clearable name="field_three" /><br /><br />
+        <MInput clearable name="field_four" size="lg" /><br /><br />
+        <MInput clearable name="field_five" size="xl" /><br /><br />
+    </div>
+</template>

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

@@ -0,0 +1,7 @@
+<template>
+    <MInput placeholder="Brad Veryard" name="name">
+        <template #suffix>
+            Suffix
+        </template>
+    </MInput>
+</template>

package/src/components/link/Link.css

@@ -0,0 +1,147 @@
+.m-link {
+    --link-color: var(--blue);
+    --link-color-hover: var(--blue-hover);
+    --link-color-focus: var(--blue-focus);
+    --link-color-visited: var(--blue-focus);
+    color: var(--link-color);
+    text-decoration: none;
+    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.m-link--underline {
+    text-decoration: underline;
+}
+
+.m-link--block {
+    display: flex;
+}
+
+.m-link:visited {
+    color: var(--link-color-visited);
+}
+
+.m-link:hover {
+    color: var(--link-color-hover);
+    text-decoration: underline;
+}
+
+.m-link:focus,
+.m-link:active {
+    color: var(--link-color-focus);
+}
+
+.m-link--blue {
+    --link-color: var(--blue);
+    --link-color-hover: var(--blue-hover);
+    --link-color-focus: var(--blue-focus);
+    --link-color-visited: var(--blue-focus);
+}
+
+.m-link--blue:visited {
+    --link-color: var(--blue);
+    --link-color-hover: var(--blue-hover);
+    --link-color-focus: var(--blue-focus);
+    --link-color-visited: var(--blue-focus);
+}
+
+.m-link--blue:hover {
+    --link-color: var(--blue-hover);
+    --link-color-hover: var(--blue-hover);
+    --link-color-focus: var(--blue-focus);
+    --link-color-visited: var(--blue-focus);
+}
+
+.m-link--blue:focus,
+.m-link--blue:active {
+    --link-color: var(--blue-focus);
+    --link-color-hover: var(--blue-focus);
+    --link-color-focus: var(--blue-focus);
+    --link-color-visited: var(--blue-focus);
+}
+
+.m-link--green {
+    --link-color: var(--green);
+    --link-color-hover: var(--green-hover);
+    --link-color-focus: var(--green-focus);
+    --link-color-visited: var(--green-focus);
+}
+
+.m-link--green:visited {
+    --link-color: var(--green);
+    --link-color-hover: var(--green-hover);
+    --link-color-focus: var(--green-focus);
+    --link-color-visited: var(--green-focus);
+}
+
+.m-link--green:hover {
+    --link-color: var(--green-hover);
+    --link-color-hover: var(--green-hover);
+    --link-color-focus: var(--green-focus);
+    --link-color-visited: var(--green-focus);
+}
+
+.m-link--green:focus,
+.m-link--green:active {
+    --link-color: var(--green-focus);
+    --link-color-hover: var(--green-focus);
+    --link-color-focus: var(--green-focus);
+    --link-color-visited: var(--green-focus);
+}
+
+.m-link--red {
+    --link-color: var(--red);
+    --link-color-hover: var(--red-hover);
+    --link-color-focus: var(--red-focus);
+    --link-color-visited: var(--red-focus);
+}
+
+.m-link--red:visited {
+    --link-color: var(--red);
+    --link-color-hover: var(--red-hover);
+    --link-color-focus: var(--red-focus);
+    --link-color-visited: var(--red-focus);
+}
+
+.m-link--red:hover {
+    --link-color: var(--red-hover);
+    --link-color-hover: var(--red-hover);
+    --link-color-focus: var(--red-focus);
+    --link-color-visited: var(--red-focus);
+}
+
+.m-link--red:focus,
+.m-link--red:active {
+    --link-color: var(--red-focus);
+    --link-color-hover: var(--red-focus);
+    --link-color-focus: var(--red-focus);
+    --link-color-visited: var(--red-focus);
+}
+
+.m-link--yellow {
+    --link-color: var(--yellow);
+    --link-color-hover: var(--yellow-hover);
+    --link-color-focus: var(--yellow-focus);
+    --link-color-visited: var(--yellow-focus);
+}
+
+.m-link--yellow:visited {
+    --link-color: var(--yellow);
+    --link-color-hover: var(--yellow-hover);
+    --link-color-focus: var(--yellow-focus);
+    --link-color-visited: var(--yellow-focus);
+}
+
+.m-link--yellow:hover {
+    --link-color: var(--yellow-hover);
+    --link-color-hover: var(--yellow-hover);
+    --link-color-focus: var(--yellow-focus);
+    --link-color-visited: var(--yellow-focus);
+}
+
+.m-link--yellow:focus,
+.m-link--yellow:active {
+    --link-color: var(--yellow-focus);
+    --link-color-hover: var(--yellow-focus);
+    --link-color-focus: var(--yellow-focus);
+    --link-color-visited: var(--yellow-focus);
+}

package/src/components/link/Link.vue

@@ -0,0 +1,54 @@
+<template>
+    <component :is="tag" :to="to" :class="computedClasses" :disabled="disabled">
+        <slot />
+    </component>
+</template>
+  
+<script lang="ts">
+import type { Color } from "../../types/props";
+import { computed, defineComponent, type PropType } from "vue";
+
+export default defineComponent({
+    name: "MLink",
+    props: {
+        color: {
+            type: String as PropType<Color>
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        block: {
+            type: Boolean,
+            default: false
+        },
+        underline: {
+            type: Boolean,
+            default: false
+        },
+        to: [String, Object]
+    },
+    setup(props) {
+        const computedClasses = computed(() => {
+            return [
+                'm-link',
+                {
+                    [`m-link--${props.color}`]: props.color,
+                    'm-link--underline': props.underline,
+                    'm-link--block': props.block,
+                    'm-link--disabled': props.disabled,
+                    'm-link--external': tag.value === 'a'
+                }
+            ]
+        });
+
+        const tag = computed(() => (props.to ? 'router-link' : 'a'));
+
+        return {
+            computedClasses,
+            tag
+        }
+    }
+})
+</script>
+  

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

@@ -0,0 +1,3 @@
+<template>
+    <MLink href="https://www.google.com">Google</MLink>
+</template>

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

@@ -0,0 +1,20 @@
+import MLink from "../Link.vue";
+
+import {
+    MLinkBasic
+} from "./index";
+
+import {
+    createStory,
+    colorArgType
+} from "@/__storybook__";
+
+export default {
+    component: MLink,
+    title: 'Components/Link',
+    argTypes: {
+        ...colorArgType()
+    }
+}
+
+export const Basic = createStory(MLinkBasic);

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

@@ -0,0 +1 @@
+export { default as MLinkBasic } from './basic.vue';