@medyll/idae-slotui-svelte 0.3.0

package/dist/utils/stylesheet/StyleSheet.svelte

@@ -0,0 +1,403 @@
+<script lang="ts">import {} from "./types.js";
+import { configCssVars, toContainerQuery } from "./utils.js";
+let { breakpoints, showSelectors } = $props();
+function castToCssProps(breakpoints2) {
+  if (!breakpoints2) return "";
+  let cssProps = "";
+  for (let key in breakpoints2) {
+    cssProps += `--${key}: ${breakpoints2[key]};`;
+  }
+  return cssProps;
+}
+</script>
+
+<svelte:head>
+	{castToCssProps(breakpoints)}
+	<style id="idae-slotui-stylesheet"> 
+ :root {
+  --container-item: container-item;
+  --on-container: on-container;
+  --than: than;
+  --show-selector: show;
+  --hide-selector: hide; 
+}
+:root {
+  --bkp-xs: var(--breakpoint-xs, 320px);
+  --bkp-sm: var(--breakpoint-sm, 480px);
+  --bkp-md: var(--breakpoint-md, 640px);
+  --bkp-lg: var(--breakpoint-lg, 960px);
+  --bkp-xl: var(--breakpoint-xl, 1280px);
+  --bkp-xxl: var(--breakpoint-xxl, 1920px);
+  --bkp-xxxl: var(--breakpoint-xxxl, 1440px);
+}
+@media (min-width: var(--bkp-xs)) {
+  [hide-more-xs],
+  [breakpoints*=hide-more-xs],
+  .hide-more-xs {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (min-width: var(--bkp-xs)) {
+  [show-more-xs],
+  [breakpoints*=show-more-xs],
+  .show-more-xs {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (max-width: calc(var(--bkp-xs) - 1px)) {
+  [hide-less-xs],
+  [breakpoints*=hide-less-xs],
+  .hide-less-xs {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (max-width: calc(var(--bkp-xs) - 1px)) {
+  [show-less-xs],
+  [breakpoints*=show-less-xs],
+  .show-less-xs {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (min-width: var(--bkp-sm)) {
+  [hide-more-sm],
+  [breakpoints*=hide-more-sm],
+  .hide-more-sm {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (min-width: var(--bkp-sm)) {
+  [show-more-sm],
+  [breakpoints*=show-more-sm],
+  .show-more-sm {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (max-width: calc(var(--bkp-sm) - 1px)) {
+  [hide-less-sm],
+  [breakpoints*=hide-less-sm],
+  .hide-less-sm {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (max-width: calc(var(--bkp-sm) - 1px)) {
+  [show-less-sm],
+  [breakpoints*=show-less-sm],
+  .show-less-sm {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (min-width: var(--bkp-md)) {
+  [hide-more-md],
+  [breakpoints*=hide-more-md],
+  .hide-more-md {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (min-width: var(--bkp-md)) {
+  [show-more-md],
+  [breakpoints*=show-more-md],
+  .show-more-md {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (max-width: calc(var(--bkp-md) - 1px)) {
+  [hide-less-md],
+  [breakpoints*=hide-less-md],
+  .hide-less-md {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (max-width: calc(var(--bkp-md) - 1px)) {
+  [show-less-md],
+  [breakpoints*=show-less-md],
+  .show-less-md {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (min-width: var(--bkp-lg)) {
+  [hide-more-lg],
+  [breakpoints*=hide-more-lg],
+  .hide-more-lg {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (min-width: var(--bkp-lg)) {
+  [show-more-lg],
+  [breakpoints*=show-more-lg],
+  .show-more-lg {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (max-width: calc(var(--bkp-lg) - 1px)) {
+  [hide-less-lg],
+  [breakpoints*=hide-less-lg],
+  .hide-less-lg {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (max-width: calc(var(--bkp-lg) - 1px)) {
+  [show-less-lg],
+  [breakpoints*=show-less-lg],
+  .show-less-lg {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (min-width: var(--bkp-xl)) {
+  [hide-more-xl],
+  [breakpoints*=hide-more-xl],
+  .hide-more-xl {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (min-width: var(--bkp-xl)) {
+  [show-more-xl],
+  [breakpoints*=show-more-xl],
+  .show-more-xl {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (max-width: calc(var(--bkp-xl) - 1px)) {
+  [hide-less-xl],
+  [breakpoints*=hide-less-xl],
+  .hide-less-xl {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (max-width: calc(var(--bkp-xl) - 1px)) {
+  [show-less-xl],
+  [breakpoints*=show-less-xl],
+  .show-less-xl {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (min-width: var(--bkp-xxl)) {
+  [hide-more-xxl],
+  [breakpoints*=hide-more-xxl],
+  .hide-more-xxl {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (min-width: var(--bkp-xxl)) {
+  [show-more-xxl],
+  [breakpoints*=show-more-xxl],
+  .show-more-xxl {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (max-width: calc(var(--bkp-xxl) - 1px)) {
+  [hide-less-xxl],
+  [breakpoints*=hide-less-xxl],
+  .hide-less-xxl {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (max-width: calc(var(--bkp-xxl) - 1px)) {
+  [show-less-xxl],
+  [breakpoints*=show-less-xxl],
+  .show-less-xxl {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (min-width: var(--bkp-xxxl)) {
+  [hide-more-xxxl],
+  [breakpoints*=hide-more-xxxl],
+  .hide-more-xxxl {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (min-width: var(--bkp-xxxl)) {
+  [show-more-xxxl],
+  [breakpoints*=show-more-xxxl],
+  .show-more-xxxl {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+@media (max-width: calc(var(--bkp-xxxl) - 1px)) {
+  [hide-less-xxxl],
+  [breakpoints*=hide-less-xxxl],
+  .hide-less-xxxl {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@media (max-width: calc(var(--bkp-xxxl) - 1px)) {
+  [show-less-xxxl],
+  [breakpoints*=show-less-xxxl],
+  .show-less-xxxl {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+  }
+}
+:global([container-inline]),
+:global([container="inline"]),
+:global(.container-inline) {
+  container-type: inline-size;
+}
+:global([container-size]),
+:global([container="size"]),
+:global(.container-size) {
+  container-type: size;
+}
+:global([container-normal]),
+:global([container="normal"]),
+:global(.container-normal) {
+  container-type: normal;
+}
+@container (max-width: var(--hide-on-container-width-more-than)) {
+  :global(.container-item-hide-max-width) {
+    color: red;
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@container (max-width: var(--hide-on-container-width-more-than)) {
+  .container-item-hide-min-width {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@container (min-height: var(--hide-on-container-height-less-than)) {
+  .container-item-hide-max-height {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}
+@container (max-width: var(--hide-on-container-height-more-than)) {
+  .container-item-hide-min-height {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+  }
+}</style>
+</svelte:head>
+
+{#if showSelectors}
+	{castToCssProps(breakpoints)}ss
+	<pre>
+        {JSON.stringify(configCssVars, undefined, ' ')}
+    </pre>
+	<pre>
+        {JSON.stringify(toContainerQuery('hideMaxWidth', '115px'), undefined, ' ')}
+    </pre>
+{/if}

package/dist/utils/stylesheet/StyleSheet.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import { type SlotUiStyleSheet } from './types.js';
+declare const __propDef: {
+    props: SlotUiStyleSheet;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StyleSheetProps = typeof __propDef.props;
+export type StyleSheetEvents = typeof __propDef.events;
+export type StyleSheetSlots = typeof __propDef.slots;
+export default class StyleSheet extends SvelteComponent<StyleSheetProps, StyleSheetEvents, StyleSheetSlots> {
+}
+export {};

package/dist/utils/stylesheet/containerConfig.css

@@ -0,0 +1,8 @@
+ 
+ :root {
+  --container-item: container-item;
+  --on-container: on-container;
+  --than: than;
+  --show-selector: show;
+  --hide-selector: hide; 
+}

package/dist/utils/stylesheet/stylesheet.scss

@@ -0,0 +1,147 @@
+@use "sass:map";
+@import "./containerConfig.css";
+
+$breakpoints: (
+    "xs": var(--breakpoint-xs, 320px),
+    "sm": var(--breakpoint-sm, 480px),
+    "md": var(--breakpoint-md, 640px),
+    "lg": var(--breakpoint-lg, 960px),
+    "xl": var(--breakpoint-xl, 1280px),
+    "xxl": var(--breakpoint-xxl, 1920px),
+    "xxxl": var(--breakpoint-xxxl, 1440px)
+);
+
+$breakpoint-name: "bkp";
+
+$containerItem: "container-item"; //var(--container-item, "container-item");
+$onContainer: var(--on-container, "on-container");
+$than: "than"; // var(--than, "than");
+$showSelector: var(--show, "show");
+$hideSelector: var(--hide, "hide");
+
+@debug ($containerItem);
+:root {
+    @each $name, $size in $breakpoints {
+        --#{$breakpoint-name}-#{$name}: #{$size};
+    }
+}
+
+@mixin hidden {
+    content-visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+    visibility: hidden;
+}
+
+@mixin visible {
+    content-visibility: auto;
+    opacity: 1;
+    position: static;
+    z-index: auto;
+    visibility: visible;
+}
+
+@function generate-visibility-classes($breakpoints) {
+    $result: ();
+    @each $name, $size in $breakpoints {
+        $result: map-merge(
+            $result,
+            (
+                "hide-more-#{$name}": (
+                    min-width: var(--#{$breakpoint-name}-#{$name}),
+                    class: hidden
+                ),
+                "show-more-#{$name}": (
+                    min-width: var(--#{$breakpoint-name}-#{$name}),
+                    class: visible
+                ),
+                "hide-less-#{$name}": (
+                    max-width: calc(var(--#{$breakpoint-name}-#{$name}) - 1px),
+                    class: hidden
+                ),
+                "show-less-#{$name}": (
+                    max-width: calc(var(--#{$breakpoint-name}-#{$name}) - 1px),
+                    class: visible
+                )
+            )
+        );
+    }
+    @return $result;
+}
+
+// this mixin uses the @container pseudo-class to generate container queries
+// it is used to hide/show elements based on the container width
+// it uses css properties --hide-on-container-width-less-than and --hide-on-container-more-more-than and
+@mixin generate-container-queries() {
+    @container (max-width: var(--hide-on-container-width-more-#{than})) {
+        :global(.#{$containerItem}-hide-max-width) {
+            color: red;
+            @include hidden;
+        }
+    }
+    @container (max-width: var(--hide-on-container-width-more-#{than})) {
+        .#{$containerItem}-hide-min-width {
+            @include hidden;
+        }
+    }
+    @container (min-height: var(--hide-on-container-height-less-#{than})) {
+        .#{$containerItem}-hide-max-height {
+            @include hidden;
+        }
+    }
+    @container (max-width: var(--hide-on-container-height-more-#{than})) {
+        .#{$containerItem}-hide-min-height {
+            @include hidden;
+        }
+    }
+}
+
+$visibility-classes: generate-visibility-classes($breakpoints);
+
+@each $breakp, $props in $visibility-classes {
+    @if map-has-key($props, "min-width") {
+        @media (min-width: #{map-get($props, 'min-width')}) {
+            [#{$breakp}],
+            [breakpoints*="#{$breakp}"],
+            .#{$breakp} {
+                @if map-get($props, "class") == hidden {
+                    @include hidden;
+                } @else if map-get($props, "class") == visible {
+                    @include visible;
+                }
+            }
+        }
+    } @else if map-has-key($props, "max-width") {
+        @media (max-width: #{map-get($props, 'max-width')}) {
+            [#{$breakp}],
+            [breakpoints*="#{$breakp}"],
+            .#{$breakp} {
+                @if map-get($props, "class") == hidden {
+                    @include hidden;
+                } @else if map-get($props, "class") == visible {
+                    @include visible;
+                }
+            }
+        }
+    }
+}
+
+:global([container-inline]),
+:global([container="inline"]),
+:global(.container-inline) {
+    container-type: inline-size;
+}
+
+:global([container-size]),
+:global([container="size"]),
+:global(.container-size) {
+    container-type: size;
+}
+
+:global([container-normal]),
+:global([container="normal"]),
+:global(.container-normal) {
+    container-type: normal;
+}
+@include generate-container-queries;

package/dist/utils/stylesheet/types.d.ts

@@ -0,0 +1,10 @@
+export type BreakPoints = Record<BreakPointName, BreakPointValue>;
+export type BreakPointName = string;
+export type BreakPointValue = string;
+export type BreakPointsKeys = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
+export type BeakPointsUnits = 'px' | 'em' | 'rem' | 'vw' | 'vh' | 'vmin' | 'vmax';
+export type BreakPointRule = Record<`--bkp-${BreakPointsKeys}`, `${string}${BeakPointsUnits}`>;
+export interface SlotUiStyleSheet extends Partial<BreakPointRule> {
+    breakpoints?: BreakPoints;
+    showSelectors?: boolean;
+}

package/dist/utils/stylesheet/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/stylesheet/utils.d.ts

@@ -0,0 +1,14 @@
+export declare const configCssVars: Record<string, string>;
+export type ContainerQueryConfig = typeof configCssVars;
+export declare const containerQueryConfig: ContainerQueryConfig;
+export declare function parseCSSVariables(cssContent: string): Record<string, string>;
+export declare const containerQueryProps: {
+    readonly hideMaxWidth: "hide-max-width";
+    readonly hideMinWidth: "hide-min-width";
+    readonly hideMaxHeight: "hide-max-height";
+    readonly hideMinHeight: "hide-min-height";
+};
+export declare function toContainerQuery(attribute: keyof typeof containerQueryProps, value?: string, config?: Record<string, string>): {
+    class: string;
+    style: string | undefined;
+} | null;

package/dist/utils/stylesheet/utils.js

@@ -0,0 +1,42 @@
+import sharedConfigCss from './containerConfig.css?raw';
+export const configCssVars = parseCSSVariables(sharedConfigCss);
+export const containerQueryConfig = {
+    ...configCssVars,
+    containerItem: 'container-item',
+    onContainer: 'on-container',
+    hideSelector: 'hide',
+    showSelector: 'show',
+    more: 'more',
+    than: 'than'
+};
+export function parseCSSVariables(cssContent) {
+    const variables = {};
+    const regex = /--([^:]+):\s*([^;]+);/g;
+    let match;
+    while ((match = regex.exec(cssContent)) !== null) {
+        const [, name, value] = match;
+        variables[name.trim()] = value.trim();
+    }
+    return variables;
+}
+export const containerQueryProps = {
+    hideMaxWidth: 'hide-max-width',
+    hideMinWidth: 'hide-min-width',
+    hideMaxHeight: 'hide-max-height',
+    hideMinHeight: 'hide-min-height'
+};
+export function toContainerQuery(attribute, value, config = containerQueryConfig) {
+    let castAttribute = containerQueryProps[attribute];
+    const regexPattern = new RegExp(`^${config.containerItem}-(${config.showSelector}|${config.hideSelector})-(max|min)-(width|height)$`);
+    const match = `${config.containerItem}-${castAttribute}`.match(regexPattern);
+    if (match) {
+        const [, showHide, maxMin, dimension] = match;
+        const isMax = maxMin === 'max';
+        const cssVariable = `--${showHide}-${config.onContainer}-${dimension}-${isMax ? `${config.more}-${config.than}` : `${config.less}-${config.than}`}`;
+        return {
+            class: `${config.containerItem}-${castAttribute}`, // add class to element
+            style: value ? `${cssVariable}: ${value};` : undefined // add style to element
+        };
+    }
+    return null;
+}

package/dist/utils/uses/autofocus/autofocus.d.ts

@@ -0,0 +1 @@
+export declare function autofocus(node: HTMLElement): void;

package/dist/utils/uses/autofocus/autofocus.js

@@ -0,0 +1,3 @@
+export function autofocus(node) {
+    node.focus();
+}

package/dist/utils/uses/clickAway/clickAway.d.ts

@@ -0,0 +1,9 @@
+type ClickAwayProps = {
+    parent?: HTMLElement | string;
+    action?: () => void;
+    disabled?: boolean;
+};
+export declare function clickAway(node: HTMLElement, props: ClickAwayProps): {
+    destroy(): void;
+};
+export {};

package/dist/utils/uses/clickAway/clickAway.js

@@ -0,0 +1,26 @@
+export function clickAway(node, props) {
+    const { action, disabled } = props;
+    // treat outside click
+    document.addEventListener('click', doEvent, true);
+    function doEvent(event) {
+        const bounds = node.getBoundingClientRect();
+        let inner = event.pageX > bounds.left &&
+            event.pageX < bounds.right &&
+            event.pageY > bounds.top &&
+            event.pageY < bounds.bottom;
+        // console.log(inner)
+        if (!disabled) {
+            if (action && !inner) {
+                action();
+                const event = new CustomEvent('clickAway', { bubbles: true });
+                node?.dispatchEvent(event);
+                document.removeEventListener('click', doEvent, true);
+            }
+        }
+    }
+    return {
+        destroy() {
+            document.removeEventListener('click', doEvent, true);
+        }
+    };
+}

package/dist/utils/uses/draggabler.d.ts

@@ -0,0 +1,8 @@
+interface DraggableProps {
+    disabled?: boolean;
+}
+export declare function draggebler(node: HTMLElement, props: DraggableProps): {
+    update(props: DraggableProps): void;
+    destroy(): void;
+};
+export {};