@teammodlr/ui-kit 2.0.4 → 2.0.7

package/src/components/table/TableHead.vue

@@ -1,11 +1,11 @@
 <template>
-    <th>
+    <th :style="computedStyles">
         <slot />
     </th>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { computed, defineComponent } from "vue";
 
 export default defineComponent({
     name: "TableHead",
@@ -16,6 +16,30 @@ export default defineComponent({
         sortable: {
             type: Boolean,
             default: false
+        },
+        width: {
+            type: [Number, String]
+        },
+    },
+    setup(props) {
+
+        const computedWidth = computed(() => {
+            if (isNaN(Number(props.width))) {
+                return props.width;
+            }
+
+            return `${props.width}px`;
+        });
+
+        const computedStyles = computed(() => {
+            // if string is passed, return it
+            return {
+                width: computedWidth.value
+            }            
+        });
+
+        return {
+            computedStyles
         }
     }
 });

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

@@ -12,6 +12,10 @@
                 Edit - {{ item.name }}
             </MButton>
         </template>
+
+        <template #empty>
+            Nothing here
+        </template>
     </MTable>
 </template>
 

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

@@ -0,0 +1,44 @@
+<template>
+    <MTable 
+        :headers="headers"
+        :items="items"
+    >
+        <template #actions="{ item }">
+            <MButton
+                color="blue"
+                secondary
+                size="sm"
+            >
+                Edit - {{ item.name }}
+            </MButton>
+        </template>
+
+        <template #empty>
+            Nothing here
+        </template>
+    </MTable>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { TableHeadItem } from "../types";
+
+let headers = ref<TableHeadItem[]>([
+    {
+        name: "Name",
+        key: "name",
+        width: 500
+    },
+    {
+        name: "Age",
+        key: "age",
+    },
+    {
+        name: "Actions",
+        key: "actions",
+        align: "right"
+    }
+]);
+
+let items = ref([]);
+</script>

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

@@ -1,7 +1,7 @@
 import MTable from "../Table.vue";
 import MButton from "../../button/Button.vue";
 import {
-    MTableBasic
+    MTableBasic, MTableEmpty
 } from "./index";
 
 import {
@@ -17,3 +17,4 @@ export default {
 }
 
 export const Basic = createStory(MTableBasic);
+export const Empty = createStory(MTableEmpty);

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

@@ -1 +1,2 @@
 export { default as MTableBasic } from './basic.vue';
+export { default as MTableEmpty } from './empty.vue';

package/src/components/tooltip/Tooltip.vue

@@ -1,6 +1,7 @@
 <template>
     <span
         v-bind="$attrs"
+        style="display: inline-flex"
         @mouseenter="() => { isOpen = true }"
         @mouseleave="() => { isOpen = false }"
         ref="wrapper"
@@ -69,13 +70,13 @@ export default defineComponent({
         const offset = computed(() => {
             switch(placement.value) {
                 case 'top':
-                    return [0, 8];
+                    return [8, 0];
                 case 'bottom':
-                    return [0, -8];
+                    return [-8, 0];
                 case 'left':
-                    return [8, 0];
+                    return [0, 8];
                 case 'right':
-                    return [-8, 0];
+                    return [0, 8];
             }
         });
 
@@ -109,7 +110,8 @@ export default defineComponent({
             transferTo,
             isOpen,
             computedClasses,
-            zIndex
+            zIndex,
+            style
         }
     }
 })

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

@@ -1,7 +1,7 @@
 import MTooltip from "../Tooltip.vue";
 import MButton from "@/components/button/Button.vue";
 import {
-    MTooltipBasic
+    MTooltipBasic, MTooltipPlacement
 } from "./index";
 
 import {
@@ -19,3 +19,4 @@ export default {
 }
 
 export const Basic = createStory(MTooltipBasic);
+export const Placement = createStory(MTooltipPlacement);

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

@@ -1 +1,2 @@
 export { default as MTooltipBasic } from "./basic.vue";
+export { default as MTooltipPlacement } from "./placement.vue";

package/src/components/tooltip/examples/placement.vue

@@ -0,0 +1,9 @@
+<template>
+    <div style="padding: 200px;">
+        <MTooltip text="Hello World" placement="top">
+            <div style="width: 100px; height: 50px; background: red;">
+
+            </div>
+        </MTooltip>
+    </div>
+</template>

package/src/components/tooltip/style/Tooltip.css.ts

@@ -1,4 +1,4 @@
-import {createVar, style} from '@vanilla-extract/css';
+import {createVar, globalKeyframes, style} from '@vanilla-extract/css';
 import { themeVars } from "../../../styles/theme.css";
 
 
@@ -7,6 +7,15 @@ export const vars = {
     color: createVar(),
 }
 
+export const wrapper = style({
+    position: 'relative',
+    display: 'inline-flex'
+});
+
+export const container = style({
+    zIndex: 50,
+});
+
 export const tooltip = style({
     vars: {
         [vars.backgroundColor]: themeVars.color.gray[900],
@@ -14,6 +23,7 @@ export const tooltip = style({
     },
     zIndex: 50,
     transition: 'opacity 0.3s, ease',
+    position: 'fixed',
     fontSize: "13px",
     fontWeight: 'normal',
     color: vars.color,
@@ -46,3 +56,36 @@ export const reverse = style({
         [vars.color]: themeVars.color.gray[900],
     }
 });
+
+const fadeOutAnimation = "fade-out-animation";
+globalKeyframes(fadeOutAnimation, {
+    'from': {
+        opacity: 1,
+    },
+    'to': {
+        opacity: 0,
+    }
+});
+
+const fadeInAnimation = "fade-in-animation";
+globalKeyframes(fadeInAnimation, {
+    '0%': {
+        opacity: 0,
+    },
+    '100%': {
+        opacity: 1,
+    }
+});
+
+export const fadeEnter = style({
+    animationName: fadeInAnimation,
+    animationDuration: '0.125s',
+    animationTimingFunction: 'ease-in-out',
+    transition: themeVars.transition.default,
+})
+
+export const fadeLeave = style({
+    animationName: fadeOutAnimation,
+    animationDuration: '0.2s',
+    animationTimingFunction: 'ease-in-out',
+})

package/src/composables/useInput.ts

@@ -104,9 +104,9 @@ export const useInput = (props: any, { focus, emit, withListeners = true }: {
         validate,
         setError,
         //@ts-ignore
-        formDisabled: form.disabled.value,
+        formDisabled: form?.disabled.value || false,
         //@ts-ignore
-        formLoading: form.loading.value
+        formLoading: form?.loading.value || false,
     }
 };
 

package/src/composables/usePopper.ts

@@ -80,7 +80,7 @@ export function usePopper(initialOptions: UsePopperOptions) {
             phase: 'afterWrite',
             fn({ state }) {
                 const origin = setPopperDropOrigin(state.placement);
-
+                
                 if (origin) {
                     state.elements.popper.style.transformOrigin = origin;
                 }

package/src/composables/usePopperV2.ts

@@ -0,0 +1,89 @@
+import { ref, onMounted, watchEffect, unref } from 'vue'
+import type { Ref } from 'vue'
+import { popperGenerator, defaultModifiers } from '@popperjs/core/lib/popper-lite'
+import type { Instance, VirtualElement } from '@popperjs/core'
+import flip from '@popperjs/core/lib/modifiers/flip'
+import offset from '@popperjs/core/lib/modifiers/offset'
+import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow'
+import computeStyles from '@popperjs/core/lib/modifiers/computeStyles'
+import eventListeners from '@popperjs/core/lib/modifiers/eventListeners'
+import type { PopperOptions } from 'src/types/popper'
+import { unrefElement } from '@vueuse/core'
+import type { MaybeElement } from '@vueuse/core'
+
+export const createPopper = popperGenerator({
+    defaultModifiers: [
+        ...defaultModifiers,
+        offset,
+        flip,
+        preventOverflow,
+        computeStyles,
+        eventListeners
+    ]
+})
+
+export function usePopper ({
+    locked = false,
+    overflowPadding = 8,
+    offsetDistance = 8,
+    offsetSkid = 0,
+    gpuAcceleration = true,
+    adaptive = true,
+    scroll = true,
+    resize = true,
+    placement,
+    strategy
+  }: PopperOptions, virtualReference?: Ref<Element | VirtualElement>) {
+    const reference = ref<MaybeElement>(null)
+    const popper = ref<MaybeElement>(null)
+    const instance = ref<Instance | null>(null)
+  
+    onMounted(() => {
+      watchEffect((onInvalidate) => {
+        if (!popper.value) { return }
+        if (!reference.value && !virtualReference?.value) { return }
+  
+        const popperEl = unrefElement(popper)
+        const referenceEl = virtualReference?.value || unrefElement(reference)
+  
+        // if (!(referenceEl instanceof HTMLElement)) { return }
+        if (!(popperEl instanceof HTMLElement)) { return }
+        if (!referenceEl) { return }
+  
+        instance.value = createPopper(referenceEl, popperEl, {
+          placement,
+          strategy,
+          modifiers: [{
+            name: 'flip',
+            enabled: !locked
+          }, {
+            name: 'preventOverflow',
+            options: {
+              padding: overflowPadding
+            }
+          }, {
+            name: 'offset',
+            options: {
+              offset: [offsetSkid, offsetDistance]
+            }
+          }, {
+            name: 'computeStyles',
+            options: {
+              adaptive,
+              gpuAcceleration
+            }
+          }, {
+            name: 'eventListeners',
+            options: {
+              scroll,
+              resize
+            }
+          }]
+        })
+  
+        onInvalidate(instance.value.destroy)
+      })
+    })
+  
+    return [reference, popper, instance] as const
+  }

package/src/examples/cards/cards.stories.ts

@@ -1,9 +1,9 @@
 import Sidebar from "./sidebar.vue";
-import {createStory} from "../../../__storybook__";
+import {createStory} from "../../__storybook__";
 
 export default {
     component: Sidebar,
     title: 'Examples/Cards/Sidebar'
 }
 
-export const Basic = createStory(Sidebar);
+export const Basic = createStory(Sidebar);

package/src/types/popper.d.ts

@@ -0,0 +1,14 @@
+import type { Placement, PositioningStrategy } from '@popperjs/core'
+
+export interface PopperOptions {
+  locked?: boolean
+  overflowPadding?: number
+  offsetDistance?: number
+  offsetSkid?: number
+  placement?: Placement
+  strategy?: PositioningStrategy
+  gpuAcceleration?: boolean
+  adaptive?: boolean
+  scroll?: boolean
+  resize?: boolean
+}

package/src/components/table/Table.css

@@ -1,45 +0,0 @@
-.m-table__wrapper {
-    width: 100%;
-    overflow-x: auto;
-}
-
-.m-table {
-    --table-cell-padding: 10px 15px;
-    border-collapse: collapse;
-    width: 100%;
-}
-
-.m-table thead tr {
-
-}
-
-.m-table thead tr th {
-    padding: var(--table-cell-padding);
-    text-align: left;
-    font-weight: 500;
-    background-color: var(--gray-150);
-    white-space: nowrap;
-    color: var(--gray-700);
-    font-size: 14px;
-    line-height: 15px;
-}
-
-.m-table tbody tr:first-child td {
-    border-top: none;
-}
-
-.m-table tbody tr td {
-    padding: var(--table-cell-padding);
-    border-top: 1px solid var(--gray-150);
-    font-size: 15px;
-    line-height: 15px;
-    vertical-align: middle;
-}
-
-.m-table.m-table--striped tbody tr:nth-child(even) td {
-    background-color: var(--gray-50);
-}
-
-.m-table.m-table--hover tbody tr:hover td {
-    background-color: var(--gray-50);
-}