@teammodlr/ui-kit 1.0.7 → 2.0.0

package/src/components/radio/style/Checkbox.css.ts

@@ -0,0 +1,132 @@
+import {createVar, globalKeyframes, globalStyle, style, styleVariants} from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+import { fonts} from "../../../styles/typography.css";
+
+const sizes = {
+    xs: '16px',
+    sm: '18px',
+    md: '20px',
+    lg: '22px',
+    xl: '24px',
+};
+
+export const vars = {
+    height: createVar(),
+    radius: createVar(),
+    backgroundColor: createVar(),
+    borderColor: createVar(),
+    color: createVar()
+}
+
+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 checkmark = style({
+    position: "absolute",
+    width: `calc(${vars.height} - 2px)`,
+    height: `calc(${vars.height} - 2px)`,
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    color: "white",
+});
+
+export const checkbox = style({
+    vars: {
+        [vars.height]: sizes.md,
+        [vars.radius]: themeVars.rounded.full,
+        [vars.backgroundColor]: 'white',
+        [vars.borderColor]: themeVars.color.gray[300],
+        [vars.color]: themeVars.color.gray[600],
+    },
+    position: "relative",
+    width: vars.height,
+    height: vars.height,
+    borderRadius: vars.radius,
+    backgroundColor: vars.backgroundColor,
+    border: `1px solid ${vars.borderColor}`,
+    color: vars.color,
+    cursor: 'pointer',
+    transition: `all 0.125s ${themeVars.transition.default}`
+});
+
+export const checked = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.blue[500],
+        [vars.backgroundColor]: themeVars.color.blue[500],
+    },
+    selectors: {
+        ['&:after']: {
+            content: '',
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: `calc(${vars.height} - 10px)`,
+            height: `calc(${vars.height} - 10px)`,
+            borderRadius: themeVars.rounded.full,
+            backgroundColor: "#FFF"
+        }
+    }
+});
+
+export const disabled = style({
+    opacity: 0.5,
+    cursor: 'not-allowed',
+});
+
+export const indeterminate = style({
+    vars: {
+        [vars.borderColor]: themeVars.color.blue[500],
+        [vars.backgroundColor]: themeVars.color.blue[500],
+    }
+});
+
+export const label = style({
+    marginLeft: themeVars.space['0.5'],
+    fontVariationSettings: `"wght" ${fonts.INTER.wghts[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,
+        },
+    },
+});
+

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

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

package/src/components/radiobutton/RadioButton.vue

@@ -0,0 +1,131 @@
+<template>
+    <label :class="computedClasses" :disabled="disabled" @click="handleClick" v-bind="$attrs" :aria-selected="selected" :aria-disabled="disabled">
+        <input type="radio" :class="computedRadioClasses" :name="name" :value="id" :disabled="disabled">
+        <span>
+            <slot />
+        </span>
+    </label>
+</template>
+
+<script lang="ts">
+import type {PropType} from "vue";
+import {computed, defineComponent, defineExpose, inject, ref} from "vue";
+import type {Size} from "../../types/props";
+import * as style from "./style";
+import {useInteractive} from "../../composables/useInteractive";
+import {useInput} from "../../composables/useInput";
+import {RADIO_BUTTON_GROUP_STATE} from "../radiobuttongroup/symbol";
+
+export default defineComponent({
+    name: "MRadioButton",
+    props: {
+        ...useInput.props(),
+        ...useInteractive.props(),
+        id: {
+            type: [String, Number],
+            required: true
+        },
+        type: {
+            type: String,
+            default: 'button',
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        icon: {
+            type: Boolean,
+            default: false
+        },
+        onClick: {
+            type: Function as PropType<(e: MouseEvent) => void>,
+            default: () => {
+            }
+        }
+    },
+    emits: ['update:modelValue'],
+    setup(props, {emit}) {
+        const radioRef = ref<HTMLElement | null>(null);
+        const parentState = inject(RADIO_BUTTON_GROUP_STATE, null);
+        const value = computed(() => {
+            return parentState?.modelValue;
+        });
+        const sizeValue = computed<Size>(() => {
+            return parentState?.size || props.size;
+        });
+
+        const name = computed(() => {
+            return parentState?.name;
+        });
+
+        const {focus, blur} = useInteractive(radioRef);
+
+        const {
+            id,
+            insideForm,
+            reset,
+            validate,
+            setError,
+            formError,
+            formDisabled,
+            formLoading,
+            inputListeners
+        } = useInput(props, {focus, emit});
+
+        const selected = computed(() => {
+            // @ts-ignore
+            return value.value === props.id;
+        });
+
+        const computedClasses = computed(() => {
+            return [
+                style.base,
+                [style.size[sizeValue.value]],
+                {
+                    [style.icon]: props.icon,
+                    [style.variant.default]: !selected.value,
+                    [style.variant.active]: selected.value,
+                }
+            ]
+        });
+
+        const computedRadioClasses = computed(() => {
+            return [
+                style.radio
+            ]
+        });
+
+        const handleClick = (e: MouseEvent): void => {
+            if (props.disabled) {
+                e.preventDefault();
+                return;
+            }
+
+            // @ts-ignore
+            parentState.doUpdateValue(props.id);
+            props.onClick(e);
+        };
+
+        defineExpose({
+            focus,
+            blur,
+        })
+
+        return {
+            radioRef,
+            computedClasses,
+            handleClick,
+            selected,
+            value,
+            name,
+            focus,
+            blur,
+            computedRadioClasses
+        }
+    }
+})
+</script>

package/src/components/radiobutton/style/RadioButton.css.ts

@@ -0,0 +1,185 @@
+import {createVar, globalStyle, style, styleVariants} from "@vanilla-extract/css";
+import {themeVars} from "../../../styles/theme.css";
+import {fonts} from "../../../styles/typography.css";
+
+const sizes = {
+    xs: '22px',
+    sm: '28px',
+    md: '36px',
+    lg: '40px',
+    xl: '45px',
+};
+
+const borderRadiuses = {
+    xs: '2px',
+    sm: '3px',
+    md: '4px',
+    lg: '6px',
+    xl: '8px',
+};
+
+const padding = {
+    xs: `0 ${themeVars.space[1]}`,
+    sm: `0 ${themeVars.space[2]}`,
+    md: `0 ${themeVars.space[3]}`,
+    lg: `0 ${themeVars.space[3]}`,
+    xl: `0 ${themeVars.space[4]}`,
+}
+
+export const vars = {
+    height: createVar(),
+    radius: createVar(),
+    padding: createVar(),
+    backgroundColor: createVar(),
+    borderColor: createVar(),
+    boxShadowColor: createVar(),
+    color: createVar(),
+}
+
+export const base = style({
+    vars: {
+        [vars.borderColor]: "transparent",
+    },
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    fontSize: themeVars.fontSize.base,
+    fontVariationSettings: `"wght" ${fonts.INTER.wghts[500]}`,
+    maxWidth: '100%',
+    width: 'auto',
+    position: 'relative',
+    textAlign: 'center',
+    textDecoration: 'none',
+    verticalAlign: 'middle',
+    whiteSpace: 'nowrap',
+    justifyContent: 'center',
+    height: vars.height,
+    lineHeight: vars.height,
+    borderRadius: vars.radius,
+    padding: vars.padding,
+    zIndex: "auto",
+    backgroundColor: vars.backgroundColor,
+    border: `1px solid ${vars.borderColor}`,
+    color: vars.color,
+    transition: `color .3s ${themeVars.transition.default},
+        background-color .3s ${themeVars.transition.default},
+        box-shadow .3s ${themeVars.transition.default},
+        border-color .3s ${themeVars.transition.default}`,
+    fontFamily: 'inherit',
+    ':hover': {
+        cursor: 'pointer',
+    },
+    ':focus': {
+        outline: 'none',
+    }
+});
+
+export const variant = styleVariants({
+    active: {
+        vars: {
+            [vars.backgroundColor]: "white",
+            [vars.color]: themeVars.color.blue[500],
+            [vars.boxShadowColor]: themeVars.color.gray[900],
+            [vars.borderColor]: themeVars.color.gray[200],
+        },
+        boxShadow: `0 .5px 0px 4px rgba(0, 0, 0, 0.01)`,
+        ':hover': {
+            vars: {
+                [vars.color]: themeVars.color.blue[600],
+            },
+        },
+        ':focus': {
+            vars: {
+                [vars.color]: themeVars.color.blue[500],
+            }
+        }
+    },
+    default: {
+        vars: {
+            [vars.color]: themeVars.color.gray[400],
+            [vars.backgroundColor]: 'transparent',
+            [vars.boxShadowColor]: themeVars.color.blue[500],
+            [vars.borderColor]: "transparent",
+        },
+        ':hover': {
+            vars: {
+                [vars.color]: themeVars.color.blue[400],
+            },
+        },
+        ':focus': {
+            vars: {
+                [vars.color]: themeVars.color.blue[400],
+            }
+        }
+    }
+});
+
+export const size = styleVariants({
+    xs: {
+        vars: {
+            [vars.height]: sizes.xs,
+            [vars.radius]: borderRadiuses.xs,
+            [vars.padding]: padding.xs,
+        },
+        fontSize: themeVars.fontSize.small,
+    },
+    sm: {
+        vars: {
+            [vars.height]: sizes.sm,
+            [vars.radius]: borderRadiuses.sm,
+            [vars.padding]: padding.sm,
+        },
+        fontSize: themeVars.fontSize.small,
+    },
+    md: {
+        vars: {
+            [vars.height]: sizes.md,
+            [vars.radius]: borderRadiuses.md,
+            [vars.padding]: padding.md,
+        },
+    },
+    lg: {
+        vars: {
+            [vars.height]: sizes.lg,
+            [vars.radius]: borderRadiuses.lg,
+            [vars.padding]: padding.lg,
+        },
+        fontSize: themeVars.fontSize.large,
+    },
+    xl: {
+        vars: {
+            [vars.height]: sizes.xl,
+            [vars.radius]: borderRadiuses.xl,
+            [vars.padding]: padding.xl,
+        },
+        fontSize: themeVars.fontSize.large,
+    },
+});
+
+export const icon = style({
+    display: 'flex',
+    flexGrow: 0,
+    flexShrink: 0,
+    fontSize: 0,
+    lineHeight: 0,
+    userSelect: 'none'
+});
+
+globalStyle(`${icon} > svg`, {
+    overflow: 'hidden',
+    pointerEvents: 'none',
+    maxWidth: '100%',
+    maxHeight: '100%',
+    verticalAlign: 'middle'
+});
+
+export const radio = style({
+    pointerEvents: "none",
+    position: "absolute",
+    border: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    opacity: 0
+})

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

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

package/src/components/radiobuttongroup/RadioButtonGroup.vue

@@ -0,0 +1,75 @@
+<template>
+    <div
+        :class="computedClasses"
+    >
+        <slot/>
+    </div>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, type PropType, provide, reactive, toRef} from "vue";
+import type {Size} from '../../types/props';
+import * as style from "./style";
+import type {RadioButtonGroupState} from "./symbol";
+import {RADIO_BUTTON_GROUP_STATE} from "./symbol";
+
+export default defineComponent({
+    name: "MRadioButtonGroup",
+    props: {
+        modelValue: {
+            type: [String, Number],
+            default: ""
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        },
+        name: {
+            type: String,
+            required: true
+        },
+        block: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['update:modelValue'],
+    setup(props, {emit}) {
+
+        function doUpdateValue (value: string | number) {
+            emit('update:modelValue', value)
+        }
+
+        const selectedValue = computed({
+            get() {
+                return props.modelValue;
+            },
+            set(value) {
+                doUpdateValue(value);
+            }
+        });
+
+        const state: RadioButtonGroupState = reactive({
+            size: toRef(props, 'size'),
+            name: toRef(props, 'name'),
+            modelValue: selectedValue,
+            doUpdateValue
+        });
+
+        provide(RADIO_BUTTON_GROUP_STATE, state);
+
+        const computedClasses = computed(() => {
+            return [
+                style.base,
+                {
+                    [style.block]: props.block
+                }
+            ]
+        })
+
+        return {
+            computedClasses
+        }
+    }
+});
+</script>

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

@@ -0,0 +1,17 @@
+<template>
+    <MRadioButtonGroup v-model="value" size="sm" name="text-align">
+        <MRadioButton icon id="left-align">
+            <svg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 10h14M3 6h18M3 18h14M3 14h18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+        </MRadioButton>
+        <MRadioButton icon id="center-align">
+            <svg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 6h18M3 14h18M6 10h12M6 18h12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+        </MRadioButton>
+        <MRadioButton icon id="right-align">
+            <svg width="24px" height="24px" stroke-width="2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 10h14M3 6h18M7 18h14M3 14h18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+        </MRadioButton>
+    </MRadioButtonGroup>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const value = ref("left-align");
+</script>

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

@@ -0,0 +1,22 @@
+import MRadioButtonGroup from "../RadioButtonGroup.vue";
+import MRadioButton from "../../radiobutton/RadioButton.vue";
+import {
+    MRadioButtonGroupBasic,
+} from "./index";
+
+import {
+    createStory, sizeArgType, colorArgType
+} from "../../../__storybook__";
+
+export default {
+    component: MRadioButtonGroup,
+    subcomponents: {
+        MRadioButton
+    },
+    title: 'Components/Radio Button Group',
+    argTypes: {
+        ...sizeArgType(),
+    }
+}
+
+export const Basic = createStory(MRadioButtonGroupBasic);

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

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

package/src/components/radiobuttongroup/style/RadioButtonGroup.css.ts

@@ -0,0 +1,37 @@
+import {createVar, globalStyle, style} from "@vanilla-extract/css";
+import {base as button} from "../../radiobutton/style/RadioButton.css";
+import {themeVars} from "../../../styles/theme.css";
+
+const vars = {
+    padding: createVar(),
+    borderRadius: createVar(),
+    gap: createVar()
+}
+
+export const base = style({
+    vars: {
+        [vars.padding]: themeVars.space[1],
+        [vars.borderRadius]: themeVars.rounded.default,
+        [vars.gap]: themeVars.space[1],
+    },
+    display: "inline-flex",
+    position: "relative",
+    flexWrap: "nowrap",
+    backgroundColor: themeVars.color.gray[100],
+    padding: vars.padding,
+    borderRadius: vars.borderRadius,
+    gap: vars.gap,
+});
+
+export const vertical = style({
+    flexDirection: "column",
+});
+
+export const block = style({
+    display: "flex",
+    alignItems: "stretch",
+});
+
+globalStyle(`${base}${block} > ${button}`, {
+    flex: 1,
+});

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

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

package/src/components/radiobuttongroup/symbol.ts

@@ -0,0 +1,11 @@
+import type {InjectionKey} from "vue";
+import type {Size} from "../../types/props";
+
+export interface RadioButtonGroupState {
+    size: Size,
+    name: string,
+    modelValue: string | number,
+    doUpdateValue: (value: string | number) => void
+}
+
+export const RADIO_BUTTON_GROUP_STATE: InjectionKey<RadioButtonGroupState> = Symbol('RADIO_BUTTON_GROUP_STATE');