@teammodlr/ui-kit 2.3.12 → 2.3.14

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

@@ -1,189 +1,189 @@
-import {
-    createVar,
-    globalStyle,
-    style,
-    styleVariants
-} from '@vanilla-extract/css';
-import { themeVars } from '../../../styles/theme.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,
-    fontWeight: '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
-});
+import {
+    createVar,
+    globalStyle,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.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,
+    fontWeight: '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

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

package/src/components/radiobuttongroup/RadioButtonGroup.vue

@@ -1,75 +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
-        }
-    }
-});
+<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

@@ -1,17 +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");
+<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

@@ -1,18 +1,18 @@
-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);
+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

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