@teammodlr/ui-kit 2.0.25 → 2.0.28

package/src/components/toggle/style/Toggle.css.ts

@@ -0,0 +1,136 @@
+import {
+  createVar,
+  globalStyle,
+  style,
+  styleVariants,
+} from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+
+const sizes = {
+  xs: "14px",
+  sm: "16px",
+  md: "18px",
+  lg: "20px",
+  xl: "22px",
+};
+
+const vars = {
+  offBackground: createVar(),
+  onBackground: createVar(),
+  handleBackground: createVar(),
+  height: createVar(),
+};
+
+export const toggle = style({
+  vars: {
+    [vars.height]: sizes.md,
+    [vars.offBackground]: "#f0f0f0",
+    [vars.onBackground]: themeVars.color.blue[500],
+    [vars.handleBackground]: "#fff",
+  },
+  outline: 0,
+  display: "block",
+  width: `calc(${vars.height} * 2)`,
+  minWidth: `calc(${vars.height} * 2)`,
+  height: `calc(${vars.height} + 2px)`,
+  position: "relative",
+  cursor: "pointer",
+  userSelect: "none",
+  borderRadius: "2em",
+  padding: "2px",
+  background: vars.offBackground,
+  transition: "all .4s ease",
+  selectors: {
+    ["&:after"]: {
+      position: "relative",
+      display: "block",
+      content: '""',
+      width: `calc(${vars.height} - 2px)`,
+      height: "100%",
+      left: 0,
+      borderRadius: "50%",
+      background: vars.handleBackground,
+      transition: "all .2s ease",
+    },
+    ["&:before"]: {
+      position: "relative",
+      content: '""',
+      width: "50%",
+      height: "100%",
+      display: "none",
+    },
+  },
+});
+
+export const checked = style({
+  vars: {
+    [vars.offBackground]: vars.onBackground,
+  },
+  selectors: {
+    ["&:after"]: {
+      left: "50%",
+    },
+  },
+});
+
+export const base = style({
+  position: "relative",
+  display: "inline-flex",
+  alignItems: "center",
+  cursor: "pointer",
+  gap: themeVars.space["1.5"],
+});
+
+export const input = style({
+  position: "absolute",
+  opacity: 0,
+  cursor: "pointer",
+});
+
+export const disabled = style({
+  opacity: 0.5,
+  cursor: "not-allowed",
+});
+
+export const label = style({
+  marginLeft: themeVars.space["0.5"],
+  fontWeight: "500",
+  display: "inline-block",
+  fontSize: themeVars.fontSize.base,
+  wordBreak: "break-word",
+  cursor: "pointer",
+});
+
+export const size = styleVariants({
+    xs: {
+        vars: {
+            [vars.height]: sizes.xs
+        }
+    },
+    sm: {
+        vars: {
+            [vars.height]: sizes.sm
+        }
+    },
+    md: {
+        vars: {
+            [vars.height]: sizes.md
+        },
+    },
+    lg: {
+        vars: {
+            [vars.height]: sizes.lg,
+        },
+    },
+    xl: {
+        vars: {
+            [vars.height]: sizes.xl,
+        },
+    },
+});
+
+globalStyle(`${base} ${input}:focus + ${toggle}`, {
+    vars: {        
+    },
+    boxShadow: `0 0 0 2px ${themeVars.color.blue[200]}`,
+});

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

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

package/src/components/tooltip/Tooltip.css

@@ -1,43 +1,43 @@
-.m-tooltip--wrapper {
-    position: relative;
-    display: inline-block;
-    cursor: pointer;
-}
-
-.m-tooltip {
-    box-sizing: border-box;
-}
-
-.m-tooltip.m-tooltip--reverse .m-tooltip--content {
-    background-color: rgba(255, 255, 255, 0.9);
-    color: #000;
-}
-
-.m-tooltip .m-tooltip--content {
-    transition: opacity 0.3s ease;
-    font-size: 12px;
-    font-weight: normal;
-    color: #fff;
-    background-color: rgba(0, 0, 0, 0.75);
-    border-radius: 4px;
-    padding: 5px 10px;
-    pointer-events: none;
-    width: max-content;
-    max-width: 300px;
-}
-
-.m-tooltip[data-popper-placement^=top] {
-    padding: 5px 0 14px;
-}
-
-.m-tooltip[data-popper-placement^=bottom] {
-    padding: 14px 0 5px;
-}
-
-.m-tooltip[data-popper-placement^=left] {
-    padding: 0 8px 0 5px;
-}
-
-.m-tooltip[data-popper-placement^=right] {
-    padding: 0 5px 0 8px;
-}
+.m-tooltip--wrapper {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.m-tooltip {
+    box-sizing: border-box;
+}
+
+.m-tooltip.m-tooltip--reverse .m-tooltip--content {
+    background-color: rgba(255, 255, 255, 0.9);
+    color: #000;
+}
+
+.m-tooltip .m-tooltip--content {
+    transition: opacity 0.3s ease;
+    font-size: 12px;
+    font-weight: normal;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.75);
+    border-radius: 4px;
+    padding: 5px 10px;
+    pointer-events: none;
+    width: max-content;
+    max-width: 300px;
+}
+
+.m-tooltip[data-popper-placement^=top] {
+    padding: 5px 0 14px;
+}
+
+.m-tooltip[data-popper-placement^=bottom] {
+    padding: 14px 0 5px;
+}
+
+.m-tooltip[data-popper-placement^=left] {
+    padding: 0 8px 0 5px;
+}
+
+.m-tooltip[data-popper-placement^=right] {
+    padding: 0 5px 0 8px;
+}

package/src/components/tooltip/Tooltip.vue

@@ -1,118 +1,118 @@
-<template>
-    <span
-        v-bind="$attrs"
-        style="display: inline-flex"
-        @mouseenter="() => { isOpen = true }"
-        @mouseleave="() => { isOpen = false }"
-        ref="wrapper"
-    >
-        <span ref="reference">
-            <slot />
-        </span>
-
-        <Teleport :to="transferTo">
-            <div role="tooltip" :class="computedClasses" ref="popper" v-if="isOpen" :style="{zIndex: zIndex}">
-                <slot
-                    :text="text"
-                    name="content"
-                >
-                    {{ text }}
-                </slot>
-            </div>
-        </Teleport>
-    </span>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, toRef, type PropType, computed, watch } from 'vue';
-import { type Placement, placementWhileList, usePopper } from "../../composables/usePopper";
-import * as style from "./style";
-import {useZIndex} from "../../composables/useZIndex";
-
-export default defineComponent({
-    name: "MTooltip",
-    props: {
-        text: {
-            type: String,
-            default: ""
-        },
-        placement: {
-            type: String as PropType<Placement>,
-            default: 'top',
-            validator: (value: Placement) => placementWhileList.includes(value)
-        },
-        transitionName: {
-            type: String,
-            default: 'scale'
-        },
-        reverse: {
-            type: Boolean,
-            default: false
-        },
-        transfer: {
-            type: Boolean,
-            default: false
-        },
-        zIndex: {
-            type: Number
-        }
-    },
-    setup(props) {
-        const {nextZIndex} = useZIndex();
-        const placement = toRef(props, 'placement');
-        // @ts-ignore
-        const transfer = toRef(props, 'transfer');
-        const wrapper = ref<HTMLElement | null>(null);
-        const reference = ref<HTMLElement | null>(null);
-        const isOpen = ref(false);
-        const zIndex = ref(props.zIndex ?? nextZIndex());
-
-        const offset = computed(() => {
-            switch(placement.value) {
-                case 'top':
-                    return [8, 0];
-                case 'bottom':
-                    return [-8, 0];
-                case 'left':
-                    return [0, 8];
-                case 'right':
-                    return [0, 8];
-            }
-        });
-
-        const { popper, transferTo, updatePopper } = usePopper({
-            placement,
-            transfer,
-            reference,
-            wrapper,
-            // @ts-ignore
-            offset: offset.value
-        });
-
-        const computedClasses = computed(() => {
-            return [
-                style.tooltip,
-                {
-                    [style.reverse]: props.reverse
-                }
-            ]
-        });
-
-        watch(() => isOpen.value, (value: boolean) => {
-            if (value) {
-                updatePopper();
-            }
-        });
-
-        return {
-            reference,
-            popper,
-            transferTo,
-            isOpen,
-            computedClasses,
-            zIndex,
-            style
-        }
-    }
-})
-</script>
+<template>
+    <span
+        v-bind="$attrs"
+        style="display: inline-flex"
+        @mouseenter="() => { isOpen = true }"
+        @mouseleave="() => { isOpen = false }"
+        ref="wrapper"
+    >
+        <span ref="reference">
+            <slot />
+        </span>
+
+        <Teleport :to="transferTo">
+            <div role="tooltip" :class="computedClasses" ref="popper" v-if="isOpen" :style="{zIndex: zIndex}">
+                <slot
+                    :text="text"
+                    name="content"
+                >
+                    {{ text }}
+                </slot>
+            </div>
+        </Teleport>
+    </span>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, toRef, type PropType, computed, watch } from 'vue';
+import { type Placement, placementWhileList, usePopper } from "../../composables/usePopper";
+import * as style from "./style";
+import {useZIndex} from "../../composables/useZIndex";
+
+export default defineComponent({
+    name: "MTooltip",
+    props: {
+        text: {
+            type: String,
+            default: ""
+        },
+        placement: {
+            type: String as PropType<Placement>,
+            default: 'top',
+            validator: (value: Placement) => placementWhileList.includes(value)
+        },
+        transitionName: {
+            type: String,
+            default: 'scale'
+        },
+        reverse: {
+            type: Boolean,
+            default: false
+        },
+        transfer: {
+            type: Boolean,
+            default: false
+        },
+        zIndex: {
+            type: Number
+        }
+    },
+    setup(props) {
+        const {nextZIndex} = useZIndex();
+        const placement = toRef(props, 'placement');
+        // @ts-ignore
+        const transfer = toRef(props, 'transfer');
+        const wrapper = ref<HTMLElement | null>(null);
+        const reference = ref<HTMLElement | null>(null);
+        const isOpen = ref(false);
+        const zIndex = ref(props.zIndex ?? nextZIndex());
+
+        const offset = computed(() => {
+            switch(placement.value) {
+                case 'top':
+                    return [8, 0];
+                case 'bottom':
+                    return [-8, 0];
+                case 'left':
+                    return [0, 8];
+                case 'right':
+                    return [0, 8];
+            }
+        });
+
+        const { popper, transferTo, updatePopper } = usePopper({
+            placement,
+            transfer,
+            reference,
+            wrapper,
+            // @ts-ignore
+            offset: offset.value
+        });
+
+        const computedClasses = computed(() => {
+            return [
+                style.tooltip,
+                {
+                    [style.reverse]: props.reverse
+                }
+            ]
+        });
+
+        watch(() => isOpen.value, (value: boolean) => {
+            if (value) {
+                updatePopper();
+            }
+        });
+
+        return {
+            reference,
+            popper,
+            transferTo,
+            isOpen,
+            computedClasses,
+            zIndex,
+            style
+        }
+    }
+})
+</script>

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

@@ -1,5 +1,5 @@
-<template>
-    <MTooltip text="Hello World">
-        <MButton>Top</MButton>
-    </MTooltip>
-</template>
+<template>
+    <MTooltip text="Hello World">
+        <MButton>Top</MButton>
+    </MTooltip>
+</template>

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

@@ -1,22 +1,22 @@
-import MTooltip from "../Tooltip.vue";
-import MButton from "@/components/button/Button.vue";
-import {
-    MTooltipBasic, MTooltipPlacement
-} from "./index";
-
-import {
-    createStory,
-    popperPositionArgType
-} from "../../../__storybook__";
-
-export default {
-    component: MTooltip,
-    subcomponents: { MButton },
-    title: 'Components/Tooltip',
-    argTypes: {
-        ...popperPositionArgType()
-    }
-}
-
-export const Basic = createStory(MTooltipBasic);
-export const Placement = createStory(MTooltipPlacement);
+import MTooltip from "../Tooltip.vue";
+import MButton from "@/components/button/Button.vue";
+import {
+    MTooltipBasic, MTooltipPlacement
+} from "./index";
+
+import {
+    createStory,
+    popperPositionArgType
+} from "../../../__storybook__";
+
+export default {
+    component: MTooltip,
+    subcomponents: { MButton },
+    title: 'Components/Tooltip',
+    argTypes: {
+        ...popperPositionArgType()
+    }
+}
+
+export const Basic = createStory(MTooltipBasic);
+export const Placement = createStory(MTooltipPlacement);

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

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

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

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