@teammodlr/ui-kit 2.1.3 → 2.1.5

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

@@ -1,6 +1,5 @@
 import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
 import { themeVars } from "../../../styles/theme.css";
-import { fonts } from "../../../styles/typography.css";
 
 const sizes = {
     xs: '26px',
@@ -48,7 +47,6 @@ export const base = style({
         [vars.backgroundColor]: '#FFFFFF',
         [vars.cursor]: 'text',
     },
-    height: vars.height,
     minHeight: vars.height,
     width: '100%',
     borderRadius: vars.radius,
@@ -88,6 +86,8 @@ export const selectedTags = style({
     flexWrap: 'wrap',
     alignItems: 'center',
     gap: themeVars.space[1],
+    paddingTop: themeVars.space[1.5],
+    paddingBottom: themeVars.space[1.5],
 });
 
 export const block = style({
@@ -200,6 +200,8 @@ export const search = style({
     position: 'sticky',
     top: 0,
     zIndex: 1,
+    borderBottom: `1px solid ${themeVars.color.gray[200]}`,
+    display: 'flex',
 });
 
 export const searchInput = style({
@@ -208,8 +210,8 @@ export const searchInput = style({
     outline: 'none',
     width: '100%',
     fontSize: themeVars.fontSize.base,
-    borderBottom: `1px solid ${themeVars.color.gray[200]}`,
     color: themeVars.color.gray[800],
+    flexShrink: 1
 });
 
 export const options = style({
@@ -237,6 +239,7 @@ export const option = style({
     transition: "background-color 0.05s ease-in-out",
     backgroundColor: vars.optionBackgroundColor,
     borderRadius: borderRadiuses.md,
+    userSelect: "none",
     ':hover': {
         vars: {
             [vars.optionColor]: themeVars.color.gray[800],
@@ -245,6 +248,7 @@ export const option = style({
     }
 });
 
+
 export const optionFocused = style({
     vars: {
         [vars.optionColor]: themeVars.color.gray[800],
@@ -259,18 +263,85 @@ export const optionFocused = style({
 });
 
 export const optionSelected = style({
-    vars: {
-        [vars.optionColor]: themeVars.color.blue[50],
-        [vars.optionBackgroundColor]: themeVars.color.blue[500],
-    },
+    // vars: {
+    //     [vars.optionColor]: themeVars.color.blue[50],
+    //     [vars.optionBackgroundColor]: themeVars.color.blue[500],
+    // },
+    // ':hover': {
+    //     vars: {
+    //         [vars.optionColor]: themeVars.color.blue[50],
+    //         [vars.optionBackgroundColor]: themeVars.color.blue[600],
+    //     },
+    // }
+});
+
+export const optionLabel = style({
+
+});
+
+export const checkAll = style({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: themeVars.space[5],
+    margin: `0 ${themeVars.space[2]}`,
+    flexShrink: 0,
+    flex: 1
+});
+
+export const checkAllButton = style({
+    flexShrink: 0,
+    alignItems: 'center',
+    cursor: 'pointer',
+    justifyContent: 'center',
+    marginLeft: themeVars.space[2.5],
+    width: themeVars.space[6],
+    height: themeVars.space[6],
+    borderRadius: borderRadiuses.md,
+    color: themeVars.color.blue[500],
+    border: `2px solid ${themeVars.color.gray[200]}`,
+    padding: 0,
+    background: 'none',
+    outline: 'none',
     ':hover': {
-        vars: {
-            [vars.optionColor]: themeVars.color.blue[50],
-            [vars.optionBackgroundColor]: themeVars.color.blue[600],
-        },
+        borderColor: themeVars.color.gray[300],
+    }
+});
+
+export const checkAllButtonActive = style({
+    border: `1px solid ${themeVars.color.blue[500]}`,
+    background: themeVars.color.blue[500],
+    color: 'white',
+    ':hover': {
+        borderColor: themeVars.color.blue[600],
+        background: themeVars.color.blue[600],
     }
 });
 
+globalStyle(`${checkAllButtonActive} > svg`, {
+    position: 'relative',
+    top: '1px',
+    width: themeVars.space[4],
+    height: themeVars.space[4],
+    color: 'white'
+});
+
+export const optionIcon = style({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: themeVars.space[5],
+    marginLeft: '-2px'
+});
+
+globalStyle(`${optionIcon} > svg`, {
+    position: 'relative',
+    top: '1px',
+    width: themeVars.space[5],
+    height: themeVars.space[5],
+    color: themeVars.color.blue[500],
+});
+
 export const noResults = style({
     padding: `${themeVars.space[2]} 0`,
     display: 'flex',
@@ -283,3 +354,12 @@ export const noResults = style({
     color: themeVars.color.gray[500],
     fontSize: themeVars.fontSize.small,
 });
+
+export const clearable = style({
+    width: themeVars.space[4],
+    height: themeVars.space[4],
+    position: 'absolute',
+    right: themeVars.space[2],
+    top: '0',
+    display: 'flex',
+})

package/src/components/tag/style/Tag.css.ts

@@ -1,6 +1,5 @@
 import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
 import { themeVars } from "../../../styles/theme.css";
-import { fonts } from "../../../styles/typography.css";
 
 const sizes = {
     xs: '18px',

package/src/components/transfer/Transfer.vue

@@ -85,7 +85,7 @@ export default defineComponent({
         modelValue: {
             type: Array,
             default: () => []
-        },
+        }
     },
     setup(props, { emit }) {
         const wrapper = ref<HTMLElement | null>(null);
@@ -98,6 +98,7 @@ export default defineComponent({
 
             const sourceData = computed(() =>
                 props.options.filter((option: any) => !props.modelValue.includes(option[props.optionKey]))
+                .sort((a: any, b: any) => a[props.optionLabel].localeCompare(b[props.optionLabel]))
             );
 
             const targetData = computed(() => {
@@ -141,4 +142,4 @@ export default defineComponent({
         }
     }
 })
-</script>
+</script>

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

@@ -10,7 +10,7 @@
 import { ref } from 'vue';
 
 function createOptions () {
-    return Array.from({ length: 100 }).map((_,index) => ({
+    return Array.from({ length: 8 }).map((_,index) => ({
         label: 'Option ' + index,
         value: index,
     }))
@@ -18,4 +18,4 @@ function createOptions () {
 
 const options = ref(createOptions());
 const selected = ref([1, 2, 3, 4, 5]);
-</script>
+</script>

package/src/components/transfer/style/Transfer.css.ts

@@ -1,4 +1,4 @@
-import { createVar, style, styleVariants } from "@vanilla-extract/css";
+import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
 import { themeVars } from "../../../styles/theme.css";
 
 export const vars = {
@@ -24,19 +24,30 @@ export const list = style({
     height: "inherit",
     display: "flex",
     flexDirection: "column",
-    overflow: "auto"
+    overflow: "auto",
+    borderRight: `1px solid ${themeVars.color.gray[200]}`,
 });
 
+
+// lastchild of list in wrapper
+globalStyle(`${wrapper} > ${list}:last-child`, {
+    borderRight: "none"
+})
+
 export const listHeader = style({
     minHeight: "40px",
     boxSizing: "border-box",
     display: "flex",
+    flexShrink: 0,
     padding: `${themeVars.space["4"]}`,
     alignItems: "center",
     position: "sticky",
     top: 0,
     backgroundColor: "#FFF",
+    color: themeVars.color.gray[900],
     zIndex: 1,
+    fontWeight: 500,
+    borderBottom: `1px solid ${themeVars.color.gray[200]}`
 });
 
 export const listBody = style({
@@ -59,10 +70,11 @@ export const transferItem = style({
     minHeight: "35px",
     display: "flex",
     alignItems: "center",
-    color: themeVars.color.font.default,
+    color: themeVars.color.gray[800],
     cursor: "pointer",
+    fontSize: themeVars.fontSize.base,
     userSelect: "none",
     ':hover': {
         backgroundColor: themeVars.color.gray[150]
     }
-})
+})

package/src/styles/theme.css.ts

@@ -1,5 +1,4 @@
 import {createGlobalTheme, globalStyle, styleVariants} from '@vanilla-extract/css';
-import {fonts} from "./typography.css";
 
 export const spaceScale = {
     '0': '0px',
@@ -12,6 +11,9 @@ export const spaceScale = {
     '3.5': '14px',
     '4': '16px',
     '5': '18px',
+    '6': '20px',
+    '7': '24px',
+    '8': '28px',
 };
 
 export const marginVariants = styleVariants(spaceScale, (space) => ({

package/lib/styles/typography.css.d.ts

@@ -1,22 +0,0 @@
-import type { FontMetrics } from "@capsizecss/core";
-interface Meta {
-    fallback: string;
-    file: string;
-    format: string;
-    metrics: FontMetrics;
-    name: string;
-    wghtRange: string;
-    wghts: {
-        [key: string]: number;
-    };
-}
-type FontFamilyId = "INTER";
-type Fonts = Record<FontFamilyId, Meta>;
-export declare const fonts: Fonts;
-export declare const fontStyles: {
-    INTER_SMALL: string;
-    INTER_MED: string;
-    INTER_LARGE: string;
-    INTER_XLARGE: string;
-};
-export {};

package/src/styles/typography.css.ts

@@ -1,91 +0,0 @@
-import type { FontMetrics } from "@capsizecss/core";
-import interFontMetrics from "@capsizecss/metrics/inter";
-import { createTextStyle } from "@capsizecss/vanilla-extract";
-import { style } from "@vanilla-extract/css";
-
-interface Meta {
-    fallback: string;
-    file: string;
-    format: string;
-    metrics: FontMetrics;
-    name: string;
-    wghtRange: string;
-    wghts: {
-        [key: string]: number;
-    };
-}
-
-type FontFamilyId = "INTER";
-
-type Fonts = Record<FontFamilyId, Meta>;
-
-const FONT_DIR = `/fonts`;
-
-export const fonts: Fonts = {
-    INTER: {
-        fallback: `sans-serif`,
-        file: ``,
-        format: `truetype-variations`,
-        metrics: interFontMetrics,
-        name: `Inter`,
-        wghtRange: `100 900`,
-        wghts: {
-            "400": 400,
-            "500": 500,
-            "600": 600,
-            "700": 700,
-        },
-    },
-};
-
-// https://type-scale.com
-// Major Third
-// base: 16
-const typeScale = {
-    s: 12.8,
-    m: 16,
-    l: 20,
-    xl: 25,
-};
-
-interface Props {
-    id: FontFamilyId;
-    leading: number;
-    size: number;
-}
-
-function calcFontCss({ id, leading, size }: Props) {
-    return style([
-        createTextStyle({
-            fontMetrics: fonts[id].metrics,
-            fontSize: size,
-            leading,
-        }),
-        {
-            fontFamily: `"${fonts[id].name}", ${fonts[id].fallback}`,
-        },
-    ]);
-}
-
-export const fontStyles = {
-    INTER_SMALL: calcFontCss({
-        id: "INTER",
-        leading: 16.5,
-        size: typeScale.s,
-    }),
-    INTER_MED: calcFontCss({
-        id: "INTER",
-        leading: 21,
-        size: typeScale.m,
-    }),
-    INTER_LARGE: calcFontCss({
-        id: "INTER",
-        leading: 25,
-        size: typeScale.l,
-    }),
-    INTER_XLARGE: calcFontCss({
-        id: "INTER",
-        leading: 32,
-        size: typeScale.xl,
-    }),
-};