@teammodlr/ui-kit 3.0.0-beta.22 → 3.0.0-beta.24

package/src/components/select/examples/fill.vue

@@ -0,0 +1,52 @@
+<template>
+    <div style="display: grid; grid-template-columns: 120px 1fr 1fr; border: 1px solid #e5e7eb;">
+        <div style="padding: 6px 8px; font-size: 13px; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; background: #f9fafb; font-weight: 500;">Row 1</div>
+        <div style="height: 36px; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;">
+            <MSelect size="xs" v-model="row1Status" :options="statusOptions" fill no-border />
+        </div>
+        <div style="height: 36px; border-bottom: 1px solid #e5e7eb;">
+            <MSelect size="xs" v-model="row1Priority" :options="priorityOptions" fill no-border />
+        </div>
+
+        <div style="padding: 6px 8px; font-size: 13px; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; background: #f9fafb; font-weight: 500;">Row 2</div>
+        <div style="height: 36px; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;">
+            <MSelect size="xs" v-model="row2Status" :options="statusOptions" fill no-border />
+        </div>
+        <div style="height: 36px; border-bottom: 1px solid #e5e7eb;">
+            <MSelect size="xs" v-model="row2Priority" :options="priorityOptions" fill no-border />
+        </div>
+
+        <div style="padding: 6px 8px; font-size: 13px; border-right: 1px solid #e5e7eb; background: #f9fafb; font-weight: 500;">Row 3</div>
+        <div style="height: 36px; border-right: 1px solid #e5e7eb;">
+            <MSelect size="xs" v-model="row3Status" :options="statusOptions" fill no-border />
+        </div>
+        <div style="height: 36px;">
+            <MSelect size="xs" v-model="row3Priority" :options="priorityOptions" fill no-border />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const statusOptions = [
+    { value: 'todo', label: 'To Do' },
+    { value: 'in_progress', label: 'In Progress' },
+    { value: 'in_review', label: 'In Review' },
+    { value: 'done', label: 'Done' }
+];
+
+const priorityOptions = [
+    { value: 'low', label: 'Low' },
+    { value: 'medium', label: 'Medium' },
+    { value: 'high', label: 'High' },
+    { value: 'critical', label: 'Critical' }
+];
+
+const row1Status = ref('in_progress');
+const row1Priority = ref('high');
+const row2Status = ref('todo');
+const row2Priority = ref('medium');
+const row3Status = ref('done');
+const row3Priority = ref('low');
+</script>

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

@@ -1,5 +1,5 @@
 import MSelect from '../Select.vue';
-import { MSelectBasic, MSelectSearchable, MSelectMultiple } from './index';
+import { MSelectBasic, MSelectSearchable, MSelectMultiple, MSelectFill } from './index';
 
 import { createStory, sizeArgType } from '../../../__storybook__';
 
@@ -14,3 +14,4 @@ export default {
 export const Basic = createStory(MSelectBasic);
 export const Searchable = createStory(MSelectSearchable);
 export const Multiple = createStory(MSelectMultiple);
+export const Fill = createStory(MSelectFill);

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

@@ -1,3 +1,4 @@
 export { default as MSelectBasic } from './basic.vue';
 export { default as MSelectSearchable } from './searchable.vue';
 export { default as MSelectMultiple } from './multiple.vue';
+export { default as MSelectFill } from './fill.vue';

package/src/components/select/style/Select.css.ts

@@ -6,7 +6,7 @@ import {
 } from '@vanilla-extract/css';
 import { themeVars } from '../../../styles/theme.css';
 
-const sizes = {
+const heights = {
     xs: '26px',
     sm: '30px',
     md: '38px',
@@ -42,7 +42,7 @@ export const wrapper = style({
 
 export const base = style({
     vars: {
-        [vars.height]: sizes.md,
+        [vars.height]: heights.md,
         [vars.radius]: borderRadiuses.md,
         [vars.paddingX]: themeVars.space[2],
         [vars.paddingY]: themeVars.space[0],
@@ -371,12 +371,104 @@ export const arrow = style({
     height: themeVars.space[4],
     position: 'absolute',
     right: themeVars.space[3],
-    top: themeVars.space[3],
+    top: '50%',
+    transform: 'translateY(-50%)',
     display: 'flex',
     color: themeVars.color.gray[500],
     transition: 'transform 0.3s ease',
 });
 
 export const arrowOpen = style({
-    transform: 'rotate(180deg)',
+    transform: 'translateY(-50%) rotate(180deg)',
 })
+
+export const fillRoot = style({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: '100%'
+});
+
+export const fill = style({
+    flexGrow: 1,
+    width: '100%',
+    minHeight: 0
+});
+
+export const sizes = styleVariants({
+    xs: {
+        vars: {
+            [vars.height]: heights.xs,
+            [vars.radius]: borderRadiuses.xs,
+            [vars.paddingX]: themeVars.space[1]
+        },
+        fontSize: themeVars.fontSize.small
+    },
+    sm: {
+        vars: {
+            [vars.height]: heights.sm,
+            [vars.radius]: borderRadiuses.sm,
+            [vars.paddingX]: themeVars.space[1.5]
+        },
+        fontSize: themeVars.fontSize.small
+    },
+    md: {
+        vars: {
+            [vars.height]: heights.md,
+            [vars.radius]: borderRadiuses.md
+        }
+    },
+    lg: {
+        vars: {
+            [vars.height]: heights.lg,
+            [vars.radius]: borderRadiuses.lg,
+            [vars.paddingX]: themeVars.space[2.5]
+        },
+        fontSize: themeVars.fontSize.large
+    },
+    xl: {
+        vars: {
+            [vars.height]: heights.xl,
+            [vars.radius]: borderRadiuses.xl,
+            [vars.paddingX]: themeVars.space[3]
+        },
+        fontSize: themeVars.fontSize.large
+    }
+});
+
+export const fillBase = style({
+    minHeight: 'unset',
+    height: '100%',
+    lineHeight: 'normal',
+    display: 'flex',
+    alignItems: 'center',
+    overflow: 'hidden',
+    paddingRight: '2rem'
+});
+
+export const fillLabel = style({
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    flex: 1,
+    minWidth: 0
+});
+
+export const noBorder = style({
+    vars: {
+        [vars.borderColor]: 'transparent'
+    },
+    borderRadius: 0,
+    boxShadow: 'none',
+    ':hover': {
+        vars: {
+            [vars.borderColor]: 'transparent'
+        }
+    },
+    ':focus': {
+        vars: {
+            [vars.borderColor]: 'transparent'
+        },
+        boxShadow: 'none'
+    }
+});