@teammodlr/ui-kit 2.0.29 → 2.0.30

package/src/components/{toggle → switch}/examples/basic.vue

@@ -1,9 +1,9 @@
-<template>
-    <MToggle v-model="checked" label="Test" />
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const checked = ref(false);
-</script>
+<template>
+    <MSwitch v-model="checked" label="Test" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const checked = ref(false);
+</script>

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

@@ -0,0 +1,20 @@
+import MSwitch from "../Switch.vue";
+import {
+    MSwitchBasic,
+    MSwitchSlot
+} from "./index";
+
+import {
+    createStory, sizeArgType, colorArgType
+} from "../../../__storybook__";
+
+export default {
+    component: MSwitch,
+    title: 'Components/Switch',
+    argTypes: {
+        ...sizeArgType()
+    }
+}
+
+export const Basic = createStory(MSwitchBasic);
+export const Slot = createStory(MSwitchSlot);

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

@@ -0,0 +1,3 @@
+export { default as MSwitchBasic } from './basic.vue';
+export { default as MSwitchSlot } from './slot.vue';
+

package/src/components/{toggle → switch}/examples/slot.vue

@@ -1,11 +1,11 @@
-<template>
-    <MToggle v-model="checked">
-        Weapon
-    </MToggle>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const checked = ref(false);
-</script>
+<template>
+    <MToggle v-model="checked">
+        Weapon
+    </MToggle>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const checked = ref(false);
+</script>

package/src/components/switch/style/Switch.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]: themeVars.color.gray[300],
+        [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/switch/style/index.ts

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

package/src/components/tab/Tab.css

@@ -1,113 +1,113 @@
-.m-tab-group {
-    --tabs-gap: 14px;
-    --tabs-background: transparent;
-    --tabs-border-radius: 0;
-    --tabs-padding: 0;
-    --tabs-border: 1px solid var(--gray-200);
-
-    --tab-background: var(transparent);
-    --tab-color: var(--gray-600);
-    --tab-font-size: 15px;
-    --tab-padding: 12px 8px;
-    --tab-border-radius: 0px;
-    --tab-font-weight: 500;
-    --tab-box-shadow: none;
-}
-
-.m-tab-group__tabs {
-    background: var(--tabs-background);
-    border-radius: var(--tabs-border-radius);
-    position: relative;
-    border-bottom: var(--tabs-border);
-    display: flex;
-    min-width: 100%;
-    width: fit-content;
-    list-style: none;
-    padding: var(--tabs-padding);
-    margin: 0;
-    gap: var(--tabs-gap);
-}
-
-.m-tab-group__tabs .m-tab {
-
-}
-
-.m-tab-group__tabs .m-tab .m-tabs__button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: var(--tab-font-size);
-    font-weight: var(--tab-font-weight);
-    color: var(--tab-color);
-    background-color: var(--tab-background);
-    padding: var(--tab-padding);
-    border-radius: var(--tab-border-radius);
-    box-shadow: var(--tab-box-shadow);
-    cursor: pointer;
-    transition: all 0.2s ease-in-out; 
-    border: none;  
-}
-
-.m-tab-group__tabs .m-tab:not(.m-tab--disabled) .m-tabs__button:hover {
-    --tab-background: var(transparent);
-    --tab-color: var(--blue);
-}
-
-.m-tab-group__tabs .m-tab.m-tab--active .m-tabs__button {
-    --tab-background: var(--white);
-    --tab-color: var(--blue);
-    --tab-box-shadow: inset 0px -2px 0px var(--blue);
-}
-
-.m-tab-group__tabs .m-tab.m-tab--disabled .m-tabs__button {
-    --tab-color: var(--gray-400);
-    cursor: not-allowed;
-}
-
-.m-tab-group.m-tab-group--xs {
-    --tabs-background: transparent;
-    --tabs-border-radius: 0;
-    --tabs-padding: 0;
-    --tabs-gap: 8px;
-
-    --tab-font-size: 12px;
-    --tab-padding: 10px 6px;
-}
-
-.m-tab-group.m-tab-group--sm {
-    --tabs-background: transparent;
-    --tabs-border-radius: 0;
-    --tabs-padding: 0;
-    --tabs-gap: 10px;
-    
-    --tab-font-size: 13px;
-    --tab-padding: 13px 6px;
-}
-
-.m-tab-group.m-tab-group--lg {
-    --tabs-background: transparent;
-    --tabs-border-radius: 0;
-    --tabs-padding: 0;
-
-    --tab-font-size: 16px;
-    --tab-padding: 20px 12px;
-}
-
-.m-tab-group.m-tab-group--xl {
-    --tabs-background: transparent;
-    --tabs-border-radius: 0;
-    --tabs-padding: 0;
-
-    --tab-font-size: 18px;
-    --tab-padding: 24px 16px;
-}
-
-.m-tab-group.m-tab-group--vertical {
-    flex-direction: column;
-}
-
-.m-tab-group.m-tab-group--vertical .m-tab-group__tabs {
-    flex-direction: column;
-    gap: 0;
-    width: 200px;
-}
+.m-tab-group {
+    --tabs-gap: 14px;
+    --tabs-background: transparent;
+    --tabs-border-radius: 0;
+    --tabs-padding: 0;
+    --tabs-border: 1px solid var(--gray-200);
+
+    --tab-background: var(transparent);
+    --tab-color: var(--gray-600);
+    --tab-font-size: 15px;
+    --tab-padding: 12px 8px;
+    --tab-border-radius: 0px;
+    --tab-font-weight: 500;
+    --tab-box-shadow: none;
+}
+
+.m-tab-group__tabs {
+    background: var(--tabs-background);
+    border-radius: var(--tabs-border-radius);
+    position: relative;
+    border-bottom: var(--tabs-border);
+    display: flex;
+    min-width: 100%;
+    width: fit-content;
+    list-style: none;
+    padding: var(--tabs-padding);
+    margin: 0;
+    gap: var(--tabs-gap);
+}
+
+.m-tab-group__tabs .m-tab {
+
+}
+
+.m-tab-group__tabs .m-tab .m-tabs__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--tab-font-size);
+    font-weight: var(--tab-font-weight);
+    color: var(--tab-color);
+    background-color: var(--tab-background);
+    padding: var(--tab-padding);
+    border-radius: var(--tab-border-radius);
+    box-shadow: var(--tab-box-shadow);
+    cursor: pointer;
+    transition: all 0.2s ease-in-out; 
+    border: none;  
+}
+
+.m-tab-group__tabs .m-tab:not(.m-tab--disabled) .m-tabs__button:hover {
+    --tab-background: var(transparent);
+    --tab-color: var(--blue);
+}
+
+.m-tab-group__tabs .m-tab.m-tab--active .m-tabs__button {
+    --tab-background: var(--white);
+    --tab-color: var(--blue);
+    --tab-box-shadow: inset 0px -2px 0px var(--blue);
+}
+
+.m-tab-group__tabs .m-tab.m-tab--disabled .m-tabs__button {
+    --tab-color: var(--gray-400);
+    cursor: not-allowed;
+}
+
+.m-tab-group.m-tab-group--xs {
+    --tabs-background: transparent;
+    --tabs-border-radius: 0;
+    --tabs-padding: 0;
+    --tabs-gap: 8px;
+
+    --tab-font-size: 12px;
+    --tab-padding: 10px 6px;
+}
+
+.m-tab-group.m-tab-group--sm {
+    --tabs-background: transparent;
+    --tabs-border-radius: 0;
+    --tabs-padding: 0;
+    --tabs-gap: 10px;
+    
+    --tab-font-size: 13px;
+    --tab-padding: 13px 6px;
+}
+
+.m-tab-group.m-tab-group--lg {
+    --tabs-background: transparent;
+    --tabs-border-radius: 0;
+    --tabs-padding: 0;
+
+    --tab-font-size: 16px;
+    --tab-padding: 20px 12px;
+}
+
+.m-tab-group.m-tab-group--xl {
+    --tabs-background: transparent;
+    --tabs-border-radius: 0;
+    --tabs-padding: 0;
+
+    --tab-font-size: 18px;
+    --tab-padding: 24px 16px;
+}
+
+.m-tab-group.m-tab-group--vertical {
+    flex-direction: column;
+}
+
+.m-tab-group.m-tab-group--vertical .m-tab-group__tabs {
+    flex-direction: column;
+    gap: 0;
+    width: 200px;
+}

package/src/components/tab/Tab.vue

@@ -1,98 +1,98 @@
-<template>
-    <li
-        :data-value="computedValue"
-        :class="computedTabWrapperClasses"
-    >
-        <button
-            role="button"
-            type="button"
-            ref="tabRef"
-            :class="computedTabClasses"
-            @click.prevent="handleClick"
-            :disabled="disabled"
-        >
-            <slot 
-                name="tab"
-                :label="label"
-                :value="value"
-            >
-                {{ computedLabel }}
-            </slot>
-
-            <teleport v-if="selected && teleportTo" :to="teleportTo">
-                <slot />
-            </teleport>
-        </button>
-    </li>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, inject, onMounted, reactive, ref } from 'vue';
-
-export default defineComponent({
-    name: "Tab",
-    props: {
-        value: {
-            type: [String, Number]
-        },
-        label: {
-            type: String,
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        }
-    },
-    setup(props, { emit }) {
-        const computedValue = computed(() => props.value);
-        const computedLabel = computed(() => props.label || props.value);
-        const tabRef = ref<HTMLElement | null>(null);
-        const teleportTo = ref(null);
-
-        const tabs = inject("tabs", {
-            tabsContentRef: ref(null),
-            selectTab: (tab: string | number) => {},
-            state: reactive({
-                active: ""
-            })
-        });
-
-        const computedTabWrapperClasses = computed(() => {
-            return {
-                'm-tab': true,
-                'm-tab--active': selected.value,
-                'm-tab--disabled': props.disabled
-            }
-        });
-
-        const computedTabClasses = computed(() => {
-            return {
-                'm-tabs__button': true,
-            }
-        });
-
-        const selected = computed(() => {
-            return tabs.state.active === computedValue.value;
-        });
-
-        function handleClick() {
-            tabs.selectTab(computedValue.value!);
-        }
-
-        onMounted(() => {
-            teleportTo.value = tabs.tabsContentRef.value;
-        });
-
-        return {
-            computedValue,
-            computedLabel,
-            tabRef,
-            computedTabWrapperClasses,
-            computedTabClasses,
-            handleClick,
-            selected,
-            teleportTo
-        }
-    }
-})
-</script>
+<template>
+    <li
+        :data-value="computedValue"
+        :class="computedTabWrapperClasses"
+    >
+        <button
+            role="button"
+            type="button"
+            ref="tabRef"
+            :class="computedTabClasses"
+            @click.prevent="handleClick"
+            :disabled="disabled"
+        >
+            <slot 
+                name="tab"
+                :label="label"
+                :value="value"
+            >
+                {{ computedLabel }}
+            </slot>
+
+            <teleport v-if="selected && teleportTo" :to="teleportTo">
+                <slot />
+            </teleport>
+        </button>
+    </li>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, onMounted, reactive, ref } from 'vue';
+
+export default defineComponent({
+    name: "Tab",
+    props: {
+        value: {
+            type: [String, Number]
+        },
+        label: {
+            type: String,
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props, { emit }) {
+        const computedValue = computed(() => props.value);
+        const computedLabel = computed(() => props.label || props.value);
+        const tabRef = ref<HTMLElement | null>(null);
+        const teleportTo = ref(null);
+
+        const tabs = inject("tabs", {
+            tabsContentRef: ref(null),
+            selectTab: (tab: string | number) => {},
+            state: reactive({
+                active: ""
+            })
+        });
+
+        const computedTabWrapperClasses = computed(() => {
+            return {
+                'm-tab': true,
+                'm-tab--active': selected.value,
+                'm-tab--disabled': props.disabled
+            }
+        });
+
+        const computedTabClasses = computed(() => {
+            return {
+                'm-tabs__button': true,
+            }
+        });
+
+        const selected = computed(() => {
+            return tabs.state.active === computedValue.value;
+        });
+
+        function handleClick() {
+            tabs.selectTab(computedValue.value!);
+        }
+
+        onMounted(() => {
+            teleportTo.value = tabs.tabsContentRef.value;
+        });
+
+        return {
+            computedValue,
+            computedLabel,
+            tabRef,
+            computedTabWrapperClasses,
+            computedTabClasses,
+            handleClick,
+            selected,
+            teleportTo
+        }
+    }
+})
+</script>