@teammodlr/ui-kit 1.0.6 → 2.0.0

package/src/examples/cards/sidebar.vue

@@ -0,0 +1,263 @@
+<template>
+    <div class="bg">
+        <div class="sidebar">
+            <div class="item">
+                <label class="label">
+                    Align
+                </label>
+                <MRadioButtonGroup name="align" v-model="form.align" block size="sm">
+                    <MRadioButton icon id="start">
+                        <svg
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path d="M8 13H14V17H8V13Z" fill="currentColor" fill-opacity="0.5"/>
+                            <path d="M6 6H4V18H6V6Z" fill="currentColor"/>
+                            <path d="M20 7H8V11H20V7Z" fill="currentColor"/>
+                        </svg>
+                    </MRadioButton>
+                    <MRadioButton icon id="center">
+                        <svg
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path d="M9 13H15V17H9V13Z" fill="currentColor" fill-opacity="0.5"/>
+                            <path d="M6 7H18V11H6V7Z" fill="currentColor"/>
+                        </svg>
+                    </MRadioButton>
+                    <MRadioButton icon id="end">
+                        <svg
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                    fill-rule="evenodd"
+                                    clip-rule="evenodd"
+                                    d="M15.9991 13.0039L9.99907 12.9911L9.99054 16.9911L15.9905 17.0039L15.9991 13.0039Z"
+                                    fill="currentColor"
+                                    fill-opacity="0.5"
+                            />
+                            <path
+                                    fill-rule="evenodd"
+                                    clip-rule="evenodd"
+                                    d="M19.978 18.0021L20.0036 6.00214L18.0036 5.99788L17.978 17.9979L19.978 18.0021Z"
+                                    fill="currentColor"
+                            />
+                            <path
+                                    fill-rule="evenodd"
+                                    clip-rule="evenodd"
+                                    d="M3.9964 10.9851L15.9964 11.0107L16.0049 7.0107L4.00493 6.98512L3.9964 10.9851Z"
+                                    fill="currentColor"
+                            />
+                        </svg>
+                    </MRadioButton>
+                </MRadioButtonGroup>
+            </div>
+
+            <div class="item">
+                <label class="label">
+                    Justify
+                </label>
+                <MRadioButtonGroup name="align" v-model="form.justify" block size="sm">
+                    <MRadioButton icon id="start">
+                        <svg
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path d="M8 13H14V17H8V13Z" fill="currentColor" fill-opacity="0.5"/>
+                            <path d="M6 6H4V18H6V6Z" fill="currentColor"/>
+                            <path d="M20 7H8V11H20V7Z" fill="currentColor"/>
+                        </svg>
+                    </MRadioButton>
+                    <MRadioButton icon id="center">
+                        <svg
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path d="M9 13H15V17H9V13Z" fill="currentColor" fill-opacity="0.5"/>
+                            <path d="M6 7H18V11H6V7Z" fill="currentColor"/>
+                        </svg>
+                    </MRadioButton>
+                    <MRadioButton icon id="end">
+                        <svg
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                    fill-rule="evenodd"
+                                    clip-rule="evenodd"
+                                    d="M15.9991 13.0039L9.99907 12.9911L9.99054 16.9911L15.9905 17.0039L15.9991 13.0039Z"
+                                    fill="currentColor"
+                                    fill-opacity="0.5"
+                            />
+                            <path
+                                    fill-rule="evenodd"
+                                    clip-rule="evenodd"
+                                    d="M19.978 18.0021L20.0036 6.00214L18.0036 5.99788L17.978 17.9979L19.978 18.0021Z"
+                                    fill="currentColor"
+                            />
+                            <path
+                                    fill-rule="evenodd"
+                                    clip-rule="evenodd"
+                                    d="M3.9964 10.9851L15.9964 11.0107L16.0049 7.0107L4.00493 6.98512L3.9964 10.9851Z"
+                                    fill="currentColor"
+                            />
+                        </svg>
+                    </MRadioButton>
+                </MRadioButtonGroup>
+            </div>
+
+            <div class="grid">
+                <div class="item">
+                    <label class="label">
+                        Width
+                    </label>
+                    <MInput type="text" v-model="form.width" size="sm" block>
+                        <template #icon-right>
+                            <span style="font-size: 11px">px</span>
+                        </template>
+                    </MInput>
+                </div>
+                <div class="item">
+                    <label class="label">
+                        Height
+                    </label>
+                    <MInput type="text" v-model="form.height" size="sm" block>
+                        <template #icon-right>
+                            <span style="font-size: 11px">px</span>
+                        </template>
+                    </MInput>
+                </div>
+
+                <div class="item">
+                    <label class="label">
+                        Min Width
+                    </label>
+                    <MInput type="text" v-model="form.minWidth" size="sm" block>
+                        <template #icon-right>
+                            <span style="font-size: 11px">px</span>
+                        </template>
+                    </MInput>
+                </div>
+
+                <div class="item">
+                    <label class="label">
+                        Min Height
+                    </label>
+                    <MInput type="text" v-model="form.minHeight" size="sm" block>
+                        <template #icon-right>
+                            <span style="font-size: 11px">px</span>
+                        </template>
+                    </MInput>
+                </div>
+            </div>
+
+            <div class="item">
+                <label class="label">
+                    Background
+                </label>
+                <MColorPicker v-model="form.backgroundColor"/>
+            </div>
+
+            <div class="item">
+                <label class="label">
+                    Color
+                </label>
+                <MColorPicker v-model="form.color"/>
+            </div>
+        </div>
+
+        <div style="padding: 10px">
+            {{ form }}
+            <div style="display: flex;" :style="computedStyle">
+                Hi
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {computed, reactive} from "vue";
+import {MRadioButtonGroup} from "../../components";
+import MRadioButton from "@/components/radiobutton/RadioButton.vue";
+import MColorPicker from "@/components/colorpicker/ColorPicker.vue";
+import MInput from "@/components/input/Input.vue";
+
+const form = reactive({
+    align: "start",
+    justify: "start",
+    width: 100,
+    height: 100,
+    minWidth: 0,
+    minHeight: 0,
+    color: "#000000",
+    backgroundColor: "#FF0000"
+})
+
+const computedStyle = computed(() => {
+    return {
+        width: form.width ? `${form.width}px` : "auto",
+        height: form.height ? `${form.height}px` : "auto",
+        minWidth: form.minWidth ? `${form.minWidth}px` : "auto",
+        minHeight: form.minHeight ? `${form.minHeight}px` : "auto",
+        color: form.color,
+        backgroundColor: form.backgroundColor,
+        alignItems: form.align,
+        justifyContent: form.justify
+    }
+})
+
+</script>
+
+<style scoped>
+.bg {
+    display: flex;
+}
+
+.sidebar {
+    width: 350px;
+    height: 500px;
+    border-right: 1px solid #e5e5e5;
+    padding: 5px 10px;
+    flex-shrink: 0;
+}
+
+.item {
+    display: grid;
+    grid-template-columns: 70px 1fr;
+    grid-gap: 10px;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 5px 20px;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.label {
+    font-size: 13px;
+    font-weight: 500;
+}
+</style>

package/src/index.ts

@@ -1,4 +1,4 @@
-import './css/index.css';
+// import './css/index.css';
 export * from './components';
 export { default as createUI } from './create';
 export { default } from './install';

package/src/styles/theme.css.ts

@@ -0,0 +1,149 @@
+import {createGlobalTheme, globalStyle, styleVariants} from '@vanilla-extract/css';
+import {fonts} from "./typography.css";
+
+export const spaceScale = {
+    '0': '0px',
+    '0.5': '2px',
+    '1': '4px',
+    '1.5': '6px',
+    '2': '8px',
+    '2.5': '10px',
+    '3': '12px',
+    '3.5': '14px',
+    '4': '16px',
+    '5': '18px',
+};
+
+export const marginVariants = styleVariants(spaceScale, (space) => ({
+    margin: space
+}));
+
+export const borderRadiusScale = {
+    'none': '0px',
+    'xsmall': '1px',
+    'small': '2px',
+    'default': '4px',
+    'medium': '6px',
+    'large': '8px',
+    'xlarge': '12px',
+    'full': '9999px',
+};
+
+export const borderRadiusVariants = styleVariants(borderRadiusScale, (borderRadius) => ({
+    borderRadius: borderRadius
+}));
+
+export const fontSizeScale = {
+    'base': '14px',
+    'xsmall': '10px',
+    'small': '12px',
+    'large': '16px',
+    'xlarge': '18px',
+    'xxlarge': '20px',
+};
+
+export const fontSizeVariants = styleVariants(fontSizeScale, (fontSize) => ({
+    fontSize: fontSize
+}));
+
+export const shadows = {
+    'sm': '0px 3px 6px 1px rgb(154 161 171 / 15%)',
+    'md': '0px 4px 10px 1px rgb(154 161 171 / 20%)',
+    'lg': '0px 7px 14px 1px rgb(154 161 171 / 23%)'
+}
+
+export const shadowVariants = styleVariants(shadows, (shadow) => ({
+    boxShadow: shadow
+}));
+
+export const transitions = {
+    'default': 'cubic-bezier(0.4, 0, 0.2, 1)',
+}
+
+export const transitionsVariants = styleVariants(transitions, (transition) => ({
+    transition: transition
+}));
+
+export const themeVars = createGlobalTheme(':root', {
+    color: {
+        gray: {
+            50: 'hsl(0,0%,98%)',
+            100: 'hsl(0,0%,96.1%)',
+            150: 'hsl(0,0%,94.9%)',
+            200: 'hsl(0,0%,89.8%)',
+            300: 'hsl(0,0%,83.1%)',
+            400: 'hsl(0,0%,63.9%)',
+            500: 'hsl(0,0%,45.1%)',
+            600: 'hsl(0,0%,32.2%)',
+            700: 'hsl(0,0%,25.1%)',
+            800: 'hsl(0,0%,14.9%)',
+            900: 'hsl(0,0%,9%)',
+        },
+        blue: {
+            50: 'hsl(214,100%,96.9%)',
+            100: 'hsl(214,94.6%,92.7%)',
+            200: 'hsl(213,96.9%,87.3%)',
+            300: 'hsl(212,96.4%,78.4%)',
+            400: 'hsl(213,93.9%,67.8%)',
+            500: 'hsl(217,91.2%,59.8%)',
+            600: 'hsl(221,83.2%,53.3%)',
+            700: 'hsl(224,76.3%,48%)',
+            800: 'hsl(226,70.7%,40.2%)',
+            900: 'hsl(224,64.3%,32.9%)',
+        },
+        amber: {
+            50: 'hsl(48,100%,96.1%)',
+            100: 'hsl(48,96.5%,88.8%)',
+            200: 'hsl(48,96.6%,76.7%)',
+            300: 'hsl(46,96.7%,64.5%)',
+            400: 'hsl(43,96.4%,56.3%)',
+            500: 'hsl(38,92.1%,50.2%)',
+            600: 'hsl(32,94.6%,43.7%)',
+            700: 'hsl(26,90.5%,37.1%)',
+            800: 'hsl(23,82.5%,31.4%)',
+            900: 'hsl(22,77.8%,26.5%)',
+        },
+        red: {
+            50: 'hsl(0,85.7%,97.3%)',
+            100: 'hsl(0,93.3%,94.1%)',
+            200: 'hsl(0,96.3%,89.4%)',
+            300: 'hsl(0,93.5%,81.8%)',
+            400: 'hsl(0,90.6%,70.8%)',
+            500: 'hsl(0,84.2%,60.2%)',
+            600: 'hsl(0,72.2%,50.6%)',
+            700: 'hsl(0,73.7%,41.8%)',
+            800: 'hsl(0,70%,35.3%)',
+            900: 'hsl(0,62.8%,30.6%)',
+        },
+        green: {
+            50: 'hsl(152,81%,95.9%)',
+            100: 'hsl(149,80.4%,90%)',
+            200: 'hsl(152,76%,80.4%)',
+            300: 'hsl(156,71.6%,66.9%)',
+            400: 'hsl(158,64.4%,51.6%)',
+            500: 'hsl(160,84.1%,39.4%)',
+            600: 'hsl(161,93.5%,30.4%)',
+            700: 'hsl(163,93.5%,24.3%)',
+            800: 'hsl(163,88.1%,19.8%)',
+            900: 'hsl(164,85.7%,16.5%)',
+        },
+        primary: 'hsl(217,91.2%,59.8%)',
+    },
+    space: spaceScale,
+    fontSize: fontSizeScale,
+    shadow: shadows,
+    transition: transitions,
+    rounded: borderRadiusScale,
+});
+
+globalStyle("*", {
+    boxSizing: 'border-box',
+});
+
+globalStyle("html, body", {
+    fontFamily: fonts.INTER.name,
+});
+
+globalStyle("strong, h1, h2, h3, h4, h5, h6", {
+    fontVariationSettings: `"wght" ${fonts.INTER.wghts[500]}`,
+});

package/src/styles/typography.css.ts

@@ -0,0 +1,91 @@
+import type { FontMetrics } from "@capsizecss/core";
+import interFontMetrics from "@capsizecss/metrics/inter";
+import { createTextStyle } from "@capsizecss/vanilla-extract";
+import { style } from "@vanilla-extract/css";
+
+interface Meta {
+    fallback: string;
+    file: string;
+    format: string;
+    metrics: FontMetrics;
+    name: string;
+    wghtRange: string;
+    wghts: {
+        [key: string]: number;
+    };
+}
+
+type FontFamilyId = "INTER";
+
+type Fonts = Record<FontFamilyId, Meta>;
+
+const FONT_DIR = `/fonts`;
+
+export const fonts: Fonts = {
+    INTER: {
+        fallback: `sans-serif`,
+        file: ``,
+        format: `truetype-variations`,
+        metrics: interFontMetrics,
+        name: `Inter`,
+        wghtRange: `100 900`,
+        wghts: {
+            "400": 400,
+            "500": 500,
+            "600": 600,
+            "700": 700,
+        },
+    },
+};
+
+// https://type-scale.com
+// Major Third
+// base: 16
+const typeScale = {
+    s: 12.8,
+    m: 16,
+    l: 20,
+    xl: 25,
+};
+
+interface Props {
+    id: FontFamilyId;
+    leading: number;
+    size: number;
+}
+
+function calcFontCss({ id, leading, size }: Props) {
+    return style([
+        createTextStyle({
+            fontMetrics: fonts[id].metrics,
+            fontSize: size,
+            leading,
+        }),
+        {
+            fontFamily: `"${fonts[id].name}", ${fonts[id].fallback}`,
+        },
+    ]);
+}
+
+export const fontStyles = {
+    INTER_SMALL: calcFontCss({
+        id: "INTER",
+        leading: 16.5,
+        size: typeScale.s,
+    }),
+    INTER_MED: calcFontCss({
+        id: "INTER",
+        leading: 21,
+        size: typeScale.m,
+    }),
+    INTER_LARGE: calcFontCss({
+        id: "INTER",
+        leading: 25,
+        size: typeScale.l,
+    }),
+    INTER_XLARGE: calcFontCss({
+        id: "INTER",
+        leading: 32,
+        size: typeScale.xl,
+    }),
+};

package/src/types/props.ts

@@ -1,3 +1,5 @@
 export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 export type Color = 'white' | 'black' | 'blue' | 'green' | 'red' | 'yellow' | 'gray';
+
+export type Variant = 'default' | 'tertiary' | 'primary' | 'success' | 'warning' | 'error';

package/lib/components/breadcrumbitem/index.d.ts

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

package/src/components/avatar/Avatar.css

@@ -1,69 +0,0 @@
-.m-avatar {
-    --avatar-height: 40px;
-    --avatar-width: 40px;
-    --avatar-font-size: 13px;
-    --avatar-border-radius: 4px;
-    width: var(--avatar-width);
-    height: var(--avatar-height);
-    font-size: var(--avatar-font-size);
-    position: relative;
-    display: inline-flex;
-    background-color: var(--gray-200);
-    color: var(--gray-400);
-    overflow: hidden;
-    white-space: nowrap;
-    vertical-align: middle;
-    justify-content: center;
-    align-items: center;
-    box-sizing: content-box;
-    border-radius: var(--avatar-border-radius);
-    font-weight: 600;
-    user-select: none;
-}
-
-.m-avatar img {
-    width: 100%;
-    height: 100%;
-}
-
-.m-avatar--circle {
-    --avatar-border-radius: 50%;
-}
-
-.m-avatar--rounded {
-    --avatar-border-radius: 4px;
-}
-
-.m-avatar--square {
-    --avatar-border-radius: 0;
-}
-
-.m-avatar--xs {
-    --avatar-height: 24px;
-    --avatar-width: 24px;
-    --avatar-font-size: 11px;
-}
-
-.m-avatar--sm {
-    --avatar-height: 32px;
-    --avatar-width: 32px;
-    --avatar-font-size: 12px;
-}
-
-.m-avatar--md {
-    --avatar-height: 40px;
-    --avatar-width: 40px;
-    --avatar-font-size: 13px;
-}
-
-.m-avatar--lg {
-    --avatar-height: 48px;
-    --avatar-width: 48px;
-    --avatar-font-size: 16px;
-}
-
-.m-avatar--xl {
-    --avatar-height: 56px;
-    --avatar-width: 56px;
-    --avatar-font-size: 17px;
-}

package/src/components/breadcrumbitem/BreadcrumbItem.vue

@@ -1,66 +0,0 @@
-<template>
-    <li class="m-breadcrumbs__item">
-        <a tabindex="0" @click="handleClick" class="m-breadcrumbs__link">
-            <slot>{{ label }}</slot>
-        </a>
-        <span class="m-breadcrumbs__item-separator" role="separator">
-            {{ separator }}
-        </span>
-    </li>
-</template>
-  
-<script lang="ts">
-import {
-    defineComponent, ref, reactive, watch, inject, onBeforeUnmount
-} from "vue";
-
-interface BreadcrumbItemState {
-    label: string | number;
-}
-
-export default defineComponent({
-    name: 'BreadcrumbItem',
-    props: {
-        label: {
-            type: [String, Number],
-            default: null
-        }
-    },
-    setup(props) {
-        const breadcrumbState = inject("breadcrumb");
-
-        const label = ref(props.label);
-        const separator = ref("/");
-
-        watch(
-            () => props.label,
-            value => {
-                label.value = value;
-                // @ts-ignore
-                breadcrumbState?.refreshItems()
-            }
-        )
-
-        if (breadcrumbState) {
-            const state: BreadcrumbItemState = reactive({
-                label: label
-            })
-
-            // @ts-ignore
-            watch(() => breadcrumbState.separator, value => separator.value = value, { immediate: true });
-
-            onBeforeUnmount(() => { });
-        }
-
-        const handleClick = () => { };
-
-        return {
-            label,
-            separator,
-
-            handleClick
-        }
-    }
-})
-</script>
-  

package/src/components/breadcrumbitem/index.ts

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

package/src/components/button/examples/colors-secondary.vue

@@ -1,8 +0,0 @@
-<template>
-    <MButton secondary>Default</MButton><br/><br/>
-    <MButton color="gray" secondary>Gray</MButton><br/><br/>
-    <MButton color="blue" secondary>Blue</MButton><br/><br/>
-    <MButton color="green" secondary>Green</MButton><br/><br/>
-    <MButton color="red" secondary>Red</MButton><br/><br/>
-    <MButton color="yellow" secondary>Yellow</MButton><br/><br/>
-</template>

package/src/components/button/examples/colors.vue

@@ -1,8 +0,0 @@
-<template>
-    <MButton>Default</MButton><br/><br/>
-    <MButton color="gray">Gray</MButton><br/><br/>
-    <MButton color="blue">Blue</MButton><br/><br/>
-    <MButton color="green">Green</MButton><br/><br/>
-    <MButton color="red">Red</MButton><br/><br/>
-    <MButton color="yellow">Yellow</MButton><br/><br/>
-</template>