@teammodlr/ui-kit 2.0.24 → 2.0.27

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,22 +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);
+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,2 +1,2 @@
-export { default as MRadioButtonGroupBasic } from './basic.vue';
-
+export { default as MRadioButtonGroupBasic } from './basic.vue';
+

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

@@ -1,37 +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,
+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/symbol.ts

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