@teammodlr/ui-kit 1.0.6 → 2.0.0

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

@@ -1,13 +1,14 @@
 import MButtonGroup from "../ButtonGroup.vue";
 import MButton from "../../button/Button.vue";
 import {
-    MButtonGroupBasic
+    MButtonGroupBasic,
+    MButtonGroupIconGroup
 } from "./index";
 
 import {
     createStory,
     sizeArgType
-} from "@/__storybook__";
+} from "../../../__storybook__";
 
 export default {
     component: MButtonGroup,
@@ -19,3 +20,4 @@ export default {
 }
 
 export const Basic = createStory(MButtonGroupBasic);
+export const IconGroup = createStory(MButtonGroupIconGroup);

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

@@ -1 +1,2 @@
 export { default as MButtonGroupBasic } from './basic.vue';
+export { default as MButtonGroupIconGroup } from './icon-group.vue';

package/src/components/buttongroup/style/ButtonGroup.css.ts

@@ -0,0 +1,40 @@
+import {globalStyle, style} from "@vanilla-extract/css";
+import {base as button} from "../../button/style/Button.css";
+import {border as buttonBorder} from "../../button/style/Button.css";
+import {borderState} from "../../button/style/Button.css";
+
+export const base = style({
+    display: "inline-flex",
+    position: "relative",
+    flexWrap: "nowrap",
+});
+
+globalStyle(`${base} > ${button}:first-child:not(:last-child)`, {
+    marginRight: 0,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+});
+
+globalStyle(`${base} > ${button}:not(:first-child):not(:last-child)`, {
+    marginLeft: 0,
+    borderRadius: 0,
+    marginRight: 0,
+});
+
+globalStyle(`${base} > ${button}:not(:first-child) ${buttonBorder}`, {
+    borderLeftWidth: 0,
+});
+
+globalStyle(`${base} > ${button}:last-child:not(:first-child)`, {
+    marginLeft: 0,
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
+});
+
+globalStyle(`${base} > ${button}:not(:first-child) ${borderState}`, {
+    left: '-1px'
+});
+
+export const vertical = style({
+    flexDirection: "column",
+});

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

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

package/src/components/buttongroup/symbol.ts

@@ -0,0 +1,8 @@
+import type {InjectionKey} from "vue";
+import type {Size} from "../../types/props";
+
+export interface ButtonGroupState {
+    size: Size
+}
+
+export const BUTTON_GROUP_STATE: InjectionKey<ButtonGroupState> = Symbol('BUTTON_GROUP_STATE');

package/src/components/checkbox/Checkbox.vue

@@ -1,7 +1,6 @@
 <template>
-    <div ref="checkboxRef" :class="wrapperComputedClasses">
-        <div :class="checkboxComputedClass" @click.prevent="toggle">
-            <input 
+    <label :class="style.base" @click.prevent="toggle">
+        <input
                 v-model="checked"
                 type="checkbox"
                 :aria-checked="checked ? 'true' : 'false'"
@@ -10,33 +9,47 @@
                 :disabled="disabled || loading"
                 :name="name"
                 :id="id"
-                />
-            <span></span>
-            <div class="m-checkbox__label" :id="`${id}-label`">
-                <template v-if="hasSlot">
-                    <slot />
-                </template>
-                <template v-else>
-                    {{ label }}
-                </template>
-            </div>
-        </div>
-        <p v-if="inputError" class="m-input__error">
-            {{ inputError }}
-        </p>
-    </div>
+                :class="style.input"
+                v-bind="$attrs"
+                v-on="inputListeners"
+        />
+        <span :class="classes">
+            <svg v-if="checked && !indeterminate" :class="style.checkmark" xmlns="http://www.w3.org/2000/svg"
+                 fill="none" viewBox="0 0 24 24" width="24" height="24" focusable="false"><path fill="currentColor"
+                                                                                                fill-rule="evenodd"
+                                                                                                d="m21.042 6.855-11.34 11.17-6.398-7.178L5.096 9.25l4.72 5.294 9.542-9.399 1.684 1.71z"
+                                                                                                clip-rule="evenodd"></path></svg>
+            <svg v-if="indeterminate && !checked" :class="style.checkmark" xmlns="http://www.w3.org/2000/svg"
+                 fill="none" viewBox="0 0 24 24" width="24" height="24" focusable="false"><path fill="currentColor"
+                                                                                                fill-rule="evenodd"
+                                                                                                d="M21.3 13.2H2.8v-2.4h18.5v2.4z"
+                                                                                                clip-rule="evenodd"></path></svg>
+        </span>
+        <span :class="style.label" :id="`${id}-label`">
+            <template v-if="hasSlot">
+                <slot/>
+            </template>
+            <template v-else>
+                {{ label }}
+            </template>
+        </span>
+
+    </label>
 </template>
 
 <script lang="ts">
-import { defineComponent, toRef, ref, type PropType, watch, computed } from 'vue';
-import { useInput } from '../../composables/useInput';
-import type { Size, Color } from '../../types/props';
+import {computed, defineComponent, defineExpose, type PropType, ref, toRef, watch} from 'vue';
+import {useInput} from '../../composables/useInput';
+import {useInteractive} from "../../composables/useInteractive";
+import type {Size} from '../../types/props';
+import * as style from './style';
 
 export default defineComponent({
     name: "Checkbox",
     emits: useInput.emits(),
     props: {
         ...useInput.props(),
+        ...useInteractive.props(),
         label: {
             type: String
         },
@@ -44,10 +57,6 @@ export default defineComponent({
             type: String as PropType<Size>,
             default: 'md',
         },
-        color: {
-            type: String as PropType<Color>,
-            default: 'blue',
-        },
         disabled: {
             type: Boolean,
             default: false
@@ -55,10 +64,16 @@ export default defineComponent({
         loading: {
             type: Boolean,
             default: false
-        }
+        },
+        indeterminate: {
+            type: Boolean,
+            default: false
+        },
     },
-    setup(props, { slots, emit }) {
-        const focus = () => { };
+    setup(props, {slots, emit}) {
+        const checkboxRef = ref<HTMLElement | null>(null);
+
+        const {focus, blur} = useInteractive(checkboxRef);
 
         const {
             id,
@@ -68,53 +83,53 @@ export default defineComponent({
             setError,
             formError,
             formDisabled,
-            formLoading
-        } = useInput(props, { focus, emit, withListeners: false });
+            formLoading,
+            inputListeners
+        } = useInput(props, {focus, emit});
 
-        const disabled = computed(() => formDisabled || props.disabled);
-        const loading = computed(() => formLoading || props.loading);
+        const disabled = computed(() => formDisabled || props.disabled || props.loading);
         const name = toRef(props, 'name');
         const checked = ref(false);
-        const checkboxRef = ref<HTMLElement | null>(null);
         const hasSlot = computed(() => !!(slots.default));
 
-        const wrapperComputedClasses = computed(() => {
+        const classes = computed(() => {
             return [
-                'm-checkbox__container',
+                style.checkbox,
+                [style.size[props.size]],
                 {
-                    'm-form__input': insideForm
+                    [style.disabled]: disabled.value,
+                    [style.checked]: checked.value,
+                    [style.indeterminate]: props.indeterminate,
                 }
             ]
         });
 
-        const checkboxComputedClass = computed(() => {
-            return {
-                'm-checkbox': true,
-                'm-checkbox--checked': checked.value,
-                'm-checkbox--disabled': disabled.value || loading.value,
-                'm-checkbox--error': formError.value,
-                [`m-checkbox--${props.size}`]: true,
-                [`m-checkbox--${props.color}`]: true,
-            }
-        });
-
         const inputError = computed(() => {
             return formError.value || props.error;
         });
 
         watch(() => props.modelValue, (value) => {
             checked.value = !!value;
-        }, { immediate: true });
+        }, {immediate: true});
 
         watch(() => checked.value, (value) => {
             emit('update:modelValue', value);
         });
 
         function toggle() {
-            if (disabled.value) return;
+            if (disabled.value) {
+                return;
+            }
+            if (props.indeterminate) {
+                return;
+            }
             checked.value = !checked.value;
         }
 
+        defineExpose({
+            focus,
+            blur,
+        })
 
         return {
             id,
@@ -124,16 +139,17 @@ export default defineComponent({
             validate,
             setError,
             disabled,
-            loading,
             name,
             checked,
             checkboxRef,
             inputError,
             toggle,
-
-            wrapperComputedClasses,
-            checkboxComputedClass,
-            hasSlot
+            style,
+            classes,
+            hasSlot,
+            inputListeners,
+            focus,
+            blur
         }
     }
 })

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

@@ -6,7 +6,7 @@ import {
 
 import {
     createStory, sizeArgType, colorArgType
-} from "@/__storybook__";
+} from "../../../__storybook__";
 
 export default {
     component: MCheckbox,

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

@@ -0,0 +1,127 @@
+import {createVar, 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]: '4px',
+        [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: '""',
+        }
+    }
+});
+
+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,
+        },
+    },
+});
+
+globalStyle(`${base} ${input}:focus + ${checkbox}`, {
+    boxShadow: `0 0 0 2px ${themeVars.color.blue[100]}`,
+});

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

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