@medyll/idae-slotui-svelte 0.3.0

package/dist/navigation/tabs/types.js

@@ -0,0 +1,45 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+const tabsDemoValues = {
+    activeTabCode: {
+        type: 'string',
+        values: ['tab1', 'tab2', 'tab3', 'tab4', 'tab5']
+    },
+    orientation: {
+        type: 'orientation',
+        default: 'vertical'
+    },
+    items: {
+        type: 'array',
+        values: [],
+        default: [
+            {
+                label: 'Tab 1',
+                code: 'tab1',
+                secondary: 'Secondary 1',
+                withContent: 'Content 1 : withContent'
+            },
+            {
+                label: 'Tab 2',
+                code: 'tab2',
+                secondary: 'Secondary 2'
+            },
+            {
+                label: 'Tab 3',
+                code: 'tab3',
+                secondary: 'Secondary 3'
+            },
+            {
+                label: 'Tab 4',
+                code: 'tab4',
+                secondary: 'Secondary 4'
+            },
+            {
+                label: 'Tab 5',
+                code: 'tab5',
+                secondary: 'Secondary 5'
+            }
+        ],
+        private: true
+    }
+};
+export const { parameters, componentArgs } = demoerArgs(tabsDemoValues);

package/dist/styles/slotui-mixins.scss

@@ -0,0 +1,161 @@
+@import "./slotui-presets.scss";
+
+@mixin ui-variants {
+    &[variant*="square"],
+    &[square="true"],
+    &.square {
+        aspect-ratio: 1/1 !important;
+        height: auto;
+    }
+
+    &[variant*="rounded"],
+    &[rounded="true"],
+    &.rounded {
+        border-radius: 50%;
+    }
+}
+
+@mixin ui-ellipsises-presets {
+    --preset-ellipsis-line: #{$presets-ellipsis-line-default};
+
+    &[ellipsis],
+    &.ellipsis {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    @for $i from 1 through 5 {
+        &.ellipsis-line-#{$i} {
+            display: -webkit-box;
+            -webkit-line-clamp: #{$i};
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: normal;
+            --preset-ellipsis-line: #{$i};
+        }
+    }
+}
+
+@mixin ui-transition {
+    transition: all 0.2s ease;
+}
+@mixin ui-tall-presets {
+    & {
+        --preset-tall: var(--sld-tall-small);
+        min-height: var(--preset-tall-small);
+        height: var(--preset-tall-small);
+    }
+
+    @each $preset, $value in $preset-tall-list {
+        & {
+            &[tall="#{$preset}"],
+            &.tall-#{$preset} {
+                min-height: var(--sld-tall-#{$preset}) !important;
+            }
+        }
+    }
+}
+
+@mixin ui-width-presets {
+    --preset-width: var(--sld-width-small);
+    width: var(--preset-width-small);
+    & {
+        --preset-width: var(--sld-width-small);
+        width: var(--preset-width-small);
+        min-width: var(--preset-width-small);
+    }
+
+    @each $preset, $value in $preset-width-list {
+        &[width="#{$preset}"],
+        &.width-#{$preset} {
+            --preset-width: var(--sld-width-#{$preset});
+            width: var(--sld-width-#{$preset}) !important;
+        }
+    }
+}
+
+@mixin ui-gutter-presets {
+    --preset-gutter: var(--sld-gutter-default);
+
+    @each $preset, $value in $preset-gutter-list {
+        & :global([gutter="#{$preset}"]),
+        & :global(.gutter-#{$preset}) {
+            padding: var(--sld-gutter-#{$preset});
+            gap: var(--sld-gutter-#{$preset});
+            --preset-gutter: var(--sld-gutter-#{$preset});
+        }
+    }
+}
+
+@mixin ui-pad-presets {
+    --preset-pad: var(--sld-pad-default);
+
+    @each $preset, $value in $preset-pad-list {
+        &:global([pad="#{$preset}"]),
+        &:global(.pad-#{$preset}) {
+            padding: var(--sld-pad-#{$preset});
+            --preset-pad: var(--sld-pad-#{$preset});
+        }
+    }
+}
+
+@mixin ui-radius-presets {
+    --preset-radius: var(--sld-radius-default);
+
+    @each $preset, $value in $preset-radius-list {
+        &:global([radius="#{$preset}"]),
+        &:global(.radius-#{$preset}) {
+            border-radius: var(--sld-radius-#{$preset});
+            --preset-radius: var(--sld-radius-#{$preset});
+        }
+    }
+}
+
+@mixin elevation() {
+    @each $level in 0 through 5 {
+        &.elevation-#{$level},
+        &[elevation-#{$level}] {
+            box-shadow: var(--sld-elevation-#{$level});
+        }
+    }
+}
+
+@mixin data-hover {
+    &:hover {
+        border-color: var(--sld-hover-border-color);
+        background-color: var(--sld-background-disabled);
+    }
+}
+
+@mixin data-selected {
+    &.selected,
+    &[aria-selected="true"],
+    &[data-selected="true"] {
+        border-color: none; //var(--sld-selected-border-color);
+        background-color: var(--sld-selected-background-color, var(--sld-color-background-darken-mid));
+        box-shadow: var(--sld-selected-shadow);
+        .listItemChip,
+        .menuItemChip {
+            position: absolute;
+            min-height: 16px;
+            height: 50%;
+            width: 3px;
+            background-color: var(--sld-color-primary);
+            border-radius: var(--sld-radius-med);
+            left: 0;
+            border: 1px solid var(--sld-color-primary-alpha-mid);
+        }
+    }
+}
+
+@mixin flex($direction: row, $align-items: flex-start) {
+    display: flex;
+    flex-direction: $direction;
+    align-items: $align-items;
+}
+
+@mixin flex-main {
+    flex: 1 1 0;
+}

package/dist/styles/slotui-presets.scss

@@ -0,0 +1,56 @@
+$vendor: "sld";
+
+$presets-ellipsis-line-default: 1;
+
+$preset-width-list: (
+    tiny: 2rem,
+    mini: 3rem,
+    small: 10rem,
+    med: 14rem,
+    kind: 20rem,
+    full: 100%,
+    auto: auto,
+    default: 10rem
+);
+
+$preset-tall-list: (
+    tiny: 1rem,
+    mini: 1.5rem,
+    small: 2.5rem,
+    med: 3.5rem,
+    kind: 4rem,
+    auto: auto,
+    default: 2.5rem
+);
+
+$preset-gutter-list: (
+    tiny: 0.25rem,
+    mini: 0.5rem,
+    small: 1rem,
+    med: 2rem,
+    kind: 3rem,
+    default: 1rem
+);
+
+$preset-gap-list: (
+    tiny: 0.25rem,
+    mini: 0.4rem,
+    small: 0.5rem,
+    med: 1rem,
+    large: 1.5rem,
+    default: 0.5rem
+);
+
+$preset-pad-list: (
+    tiny: 0.25rem,
+    small: 0.5rem,
+    med: 1rem,
+    large: 1.5rem
+);
+
+$preset-radius-list: (
+    tiny: 2px,
+    small: 4px,
+    med: 8px,
+    large: 16px
+);