@medyll/idae-slotui-svelte 0.3.0

package/dist/controls/textfield/types.js

@@ -0,0 +1,23 @@
+import { demoerArgs } from '../../base/demoer/demoer.utils.js';
+import { tallPreset, uiPresets } from '../../types/index.js';
+export const TextFieldDemoValues = {
+    icon: {
+        type: 'icon',
+        values: ['search', undefined]
+    },
+    endIcon: {
+        type: 'icon',
+        values: ['search', undefined]
+    },
+    width: {
+        type: 'width'
+    },
+    tall: {
+        type: 'tall',
+        default: tallPreset.default
+    },
+    transparent: {
+        type: 'boolean'
+    }
+};
+export let { parameters, componentArgs } = demoerArgs(TextFieldDemoValues);

package/dist/csss/README.svelte

@@ -0,0 +1,118 @@
+
+<h1>About css stuff</h1>
+<ul>
+<li>
+<h2>It’s about css</h2>
+<p>It’s about css and the way some revolutions did save the world.<br>
+It’s not about suffering, it’s about emancipation, because being static is always a first start.<br>
+And it’s about css. And a bit about Tailwind. Because tailwind did save us.</p>
+<h4>lovy Granny</h4>
+<p>To learn me the little cssSheet redbook, my grandMa did the basis. She was born in 1480 and did work since her 14s at the W3C, her job was to set normes a normal way. She was a bit of a monster, but she was right.</p>
+<h4>complexity</h4>
+<p>And she was right with the method: keeping me with a clou transperçant my feet while repeating the declinations of cssRules was the way to make me strong. The feeling of css needs the knowledge of pain.</p>
+<h4>complexity and strength</h4>
+<p>Because if it’s complex, you’re strong!</p>
+</li>
+<li>
+<h2>It’s not about Tailwind</h2>
+<p>But i kept having some secrets toughs : but what if the word was organized an organized way ?</p>
+<p><strong>questions</strong> : i know that a property which randomly target the outer or the inner of the concerned element is savagely cool, but what if not ? what if top was a position ? what if i want to setup the left and the right of the same border declaration ? what if verbosity was not the goal ? may i dream or did i dream ?<br>
+<strong>answers</strong> : Because there were no problems, i decided to seek for a solution. And i did reach severals.</p>
+<h3>utility classes are right</h3>
+<p>Around 2005, i did my first utility css monster. Based on php, acronym of “best language ever”, it made me the king of velocity. Year and babies after, a non impressioné colleague asked me a simple question :</p>
+<h3>Tailwind is right</h3>
+<p>He asked: do you know things about <strong>Tailwind</strong> ? Do you know it has a wild css coverage and a lot of pretty babies ?</p>
+<ul>
+<li>
+<h4>Humanity is a pretty monster</h4>
+<p>He revealed me also the existence of a “reseau social”, called Twitter, so i headed to it and it was a 5 elements Lilo thing, the lagrimas revelation time. The humanity is seeking for a solution while css detonations do craters with border-radius-top-left properties. And people are fighting in their textual multi-verse, yelling to each others that tailwind is a master so why do you yell ?</p>
+</li>
+<li>
+<h4>Tailwind is unsinkable</h4>
+<p>Humanity is a pretty and a monster, and css are born in this humanity nest. css is eradicating humanity and Tailwind is the anchor which prevents the word to sink. Working without utility classes is a time consuming task, obvious leading to the nearest of a delirium tremens : reporting this is not an information, this is a therapy.</p>
+</li>
+<li>
+<h4>Css is a time traveling iceberg</h4>
+<p>But the fact is, Tailwind is the unsinkable boat, and css is the iceberg. Utility classes are a must, so why the anger ? Aren’t we safe from the iceberg ? Each time we approach it, we defeat the risk with a re-implementation time loop, UnoCss being my favorite one.</p>
+</li>
+</ul>
+</li>
+<li>
+<h2>It’s a about the void</h2>
+<blockquote>
+<p>There is no solution.</p>
+</blockquote>
+<p>There are no solutions.<br>
+The socle is the problem, here is the void:</p>
+<pre class="language-css">{@html `<code class="language-css"><span class="token selector">::void</span> <span class="token punctuation">&#123;</span>
+	<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token comment">/* a flow */</span>
+	<span class="token property">width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token comment">/* a size */</span>
+	<span class="token property">top</span><span class="token punctuation">:</span> -50px<span class="token punctuation">;</span> <span class="token comment">/* a position */</span>
+	<span class="token property">margin</span><span class="token punctuation">:</span> -50px 20px<span class="token punctuation">;</span> <span class="token comment">/* a position! **/</span>
+	<span class="token property">gap</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token comment">/* a margin */</span>
+	<span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token comment">/* a gap */</span>
+	<span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span> <span class="token comment">/* a flow */</span>
+	<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token comment">/* a state */</span>
+	<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token comment">/* Inhaltsausrichtung ? */</span>
+	<span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token comment">/* a color */</span>
+	<span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token comment">/* a color */</span>
+<span class="token punctuation">&#125;</span></code>`}</pre>
+</li>
+<li>
+<h2>It’s about this time loop</h2>
+<p>Organization with Tailwind or other utility classes is mandatory for readability and maintainability. Because if you claim never going back to the code, then you’ll have to admit the existence of fear.<br>
+What is the point ?<br>
+We love Tailwind, <strong>Unocss</strong> or others because they are shorteners. You think, you write, bam !<br>
+Let’s get it with some words :</p>
+<h4>from tailwind utility verb</h4>
+<p>Bringing back the shortness to the ‘\<style>’ tag is a meeting point : shortness and seeming near standards. Here, categorization means readability and <strong>predictability</strong>.</p>
+<p>This could be the only way, this is mine since epoch:</p>
+<pre class="language-scss">{@html `<code class="language-scss"><span class="token selector">input </span><span class="token punctuation">&#123;</span>
+	<span class="token property">--at-apply</span><span class="token punctuation">:</span> padding gap<span class="token punctuation">;</span>
+	<span class="token property">--at-apply</span><span class="token punctuation">:</span> width height<span class="token punctuation">;</span>
+	<span class="token property">--at-apply</span><span class="token punctuation">:</span> left top right bottom margin<span class="token punctuation">;</span>
+	<span class="token property">--at-apply</span><span class="token punctuation">:</span> border shadow radius<span class="token punctuation">;</span>
+	<span class="token property">--at-apply</span><span class="token punctuation">:</span> color bg<span class="token punctuation">;</span>
+	<span class="token comment">// avoid using the bloated part of those magic libs</span>
+	<span class="token selector"><span class="token parent important">&amp;</span>:hover </span><span class="token punctuation">&#123;</span>
+		<span class="token property">--at-apply</span><span class="token punctuation">:</span> color bg<span class="token punctuation">;</span>
+	<span class="token punctuation">&#125;</span>
+<span class="token punctuation">&#125;</span></code>`}</pre>
+<h4>to semantic css words</h4>
+<p>right, bottom, top and left are a position. and collide with position being a property.<br>
+width and height are a size, a dimension, they should stick together.<br>
+margin and padding seem friends, but concern the outer vs the inner of the element.<br>
+utility needs semantics :</p>
+<pre class="language-css">{@html `<code class="language-css"><span class="token selector">input</span> <span class="token punctuation">&#123;</span>
+	<span class="token property">margin</span><span class="token punctuation">:</span> padding gap<span class="token punctuation">;</span>
+	<span class="token property">size</span><span class="token punctuation">:</span> width height<span class="token punctuation">;</span>
+	<span class="token property">position</span><span class="token punctuation">:</span> left top right bottom margin<span class="token punctuation">;</span>
+	<span class="token property">box</span><span class="token punctuation">:</span> border shadow radius<span class="token punctuation">;</span>
+	<span class="token property">theme</span><span class="token punctuation">:</span> color bg<span class="token punctuation">;</span>
+<span class="token punctuation">&#125;</span></code>`}</pre>
+</li>
+<li>
+<h2>It’s about hoping</h2>
+<blockquote>
+<p>hoping is having hope, but actively.</p>
+</blockquote>
+<p>To implement this i need :</p>
+<ul>
+<li>a rule set: to decide the verbs</li>
+<li>a model: to ensure strict rules</li>
+<li>a parser : to walk trough the model</li>
+<li>a transformer : to render back the rules.</li>
+</ul>
+<p>the needed mental strength :</p>
+<ul>
+<li>a guide: bringing active solidity</li>
+<li>a hole: there are some glitches to ditch in it, some properties to abandon, sadness to have</li>
+<li>a goal: the browser is not the goal, could it be ?</li>
+</ul>
+<p>Let’s start with something else : the guide to ensure consistency</p>
+<pre class="language-typescript">{@html `<code class="language-typescript"><span class="token comment">/**  cssGuideTransform :
+ * transform the model to a ts declaration file and an associated class methods.
+ */</span>
+<span class="token keyword">function</span> <span class="token function">cssGuideTransform</span><span class="token punctuation">(</span>modelSheet<span class="token operator">:</span> Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">></span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span></code>`}</pre>
+</li>
+</ul>

package/dist/csss/csss.d.ts

@@ -0,0 +1,81 @@
+import postcss from 'postcss';
+type all = string | number;
+type top = string | number;
+type bottom = string | number;
+type left = string | number;
+type right = string | number;
+type cssProp = CSSPropertyRule;
+export interface OpCssF {
+    outer: {
+        display: 'flex' | 'grid' | string;
+        flow: 'absolute' | 'fixed' | 'static' | 'relative' | string | 'inherit' | 'initial' | 'unset';
+        pos: 'left' | 'right' | 'top' | 'bottom' | string;
+        margin: [all] | [top, bottom] | [top, bottom, left, right];
+    };
+    animate: {
+        all: 'all' | 'none' | cssProp;
+        duration: string;
+        timing: string;
+        delay: string;
+    };
+    box: {
+        border: [all] | [top, bottom] | [left, right] | [top, bottom, left, right];
+        shadow: [string, string?, string?, string?];
+        /**  Radius of the element   */
+        radius: [string, string?, string?, string?];
+        /**  Opacity of the element  from 0.0 to 1.0 */
+        opacity: string | number;
+    };
+    size: {
+        width: [string, string?, string?];
+        height: [string, string?, string?];
+        ratio: [string, string?];
+    };
+    typo: {
+        font: string;
+        size: string;
+        style: 'bold' | 'italic' | 'normal' | string;
+        underline: 'none' | 'dotted' | 'dashed' | 'solid' | 'double' | 'wavy' | string;
+        shadow: [string, string?, string?, string?];
+    };
+    color: {
+        text: string;
+        bg: string;
+    };
+    gutter: {
+        gap: string;
+        padding: string;
+    };
+}
+export declare class Op {
+    outer(decl: postcss.Declaration): {
+        display: (value: OpCssF["outer"]["display"]) => void;
+        flow: (value: OpCssF["outer"]["flow"]) => void;
+        pos: (value: OpCssF["outer"]["pos"]) => void;
+        margin: (value: OpCssF["outer"]["margin"]) => void;
+    };
+    box(decl: postcss.Declaration): {
+        border: (value: OpCssF["box"]["border"]) => void;
+        shadow: (value: OpCssF["box"]["shadow"]) => void;
+        radius: (value: OpCssF["box"]["radius"]) => void;
+    };
+    size(decl: postcss.Declaration): {
+        width: (value: string, min: string, max: string) => void;
+        height: (value: string, min: string, max: string) => void;
+        ratio: (unit: string, quot: string) => void;
+    };
+    color(decl: postcss.Declaration): {
+        text: (value: string) => void;
+        bg: (value: string) => void;
+    };
+    margin(decl: postcss.Declaration): {
+        gap: (value: string) => void;
+        padding: (value: string) => void;
+    };
+    typo(decl: postcss.Declaration): {
+        font: (value: string) => void;
+        size: (value: string) => void;
+        style: (value: string) => void;
+    };
+}
+export {};

package/dist/csss/csss.js

@@ -0,0 +1,101 @@
+import postcss from 'postcss';
+// Étape 1 : Ajouter des propriétés personnalisées
+const myPlugin = (root) => {
+    root.walkDecls((decl) => {
+        console.log(`Propriété : ${decl.prop}`);
+        console.log(`Valeur : ${decl.value}`);
+        console.log(`Important : ${decl.important}`);
+        console.log(`Source : ligne ${decl?.source?.start?.line}, colonne ${decl.source?.start?.column}`);
+        // Ajoute un préfixe à toutes les propriétés
+        decl.prop = 'my-prefix-' + decl.prop;
+        // decl?.parent.append({ prop: 'my-prefix-' + decl.prop, value: decl.value });
+    });
+};
+const nodeType = ['all', 'top', 'bottom', 'left', 'right'];
+const objModel = {
+    outer: {
+        display: ['flex', 'grid', 'string'],
+        flow: ['absolute', 'fixed', 'static', 'relative', 'string', 'inherit', 'initial', 'unset'],
+        pos: ['left', 'right', 'top', 'bottom', 'string'],
+        margin: ['all', ['top', 'bottom'], ['top', 'bottom', 'left', 'right']]
+    }
+};
+export class Op {
+    outer(decl) {
+        return {
+            display: (value) => { },
+            flow: (value) => { },
+            pos: (value) => { },
+            margin: (value) => { }
+        };
+    }
+    box(decl) {
+        return {
+            border: (value) => { },
+            shadow: (value) => { },
+            radius: (value) => { }
+        };
+    }
+    size(decl) {
+        return {
+            width: (value, min, max) => { },
+            height: (value, min, max) => { },
+            ratio: (unit, quot) => { }
+        };
+    }
+    color(decl) {
+        return {
+            text: (value) => { },
+            bg: (value) => { }
+        };
+    }
+    margin(decl) {
+        return {
+            gap: (value) => { },
+            padding: (value) => { }
+        };
+    }
+    typo(decl) {
+        return {
+            font: (value) => { },
+            size: (value) => { },
+            style: (value) => { }
+        };
+    }
+}
+/* const processor = postcss([myPlugin]);
+
+processor.process('a { color: black; }').then((result) => {
+    console.log(result.css);
+}); */
+class cssGuide {
+    static generateTsInterfaceAndClass(objModel, types) {
+        // Helper function to convert array values to TypeScript union types
+        const toUnionType = (arr) => {
+            return arr
+                .map((item) => (Array.isArray(item) ? `[${item.join(', ')}]` : `'${item}'`))
+                .join(' | ');
+        };
+        let interfaces = 'export interface OpCssF {\n';
+        let classMethods = 'export class Op {\n';
+        for (const [outerKey, value] of Object.entries(objModel)) {
+            interfaces += `  ${outerKey}: {\n`;
+            classMethods += `  ${outerKey}(decl: postcss.Declaration) {\n    return {\n`;
+            for (const [key, val] of Object.entries(value)) {
+                if (Array.isArray(val)) {
+                    // Convert array to TypeScript union type
+                    interfaces += `    ${key}: ${toUnionType(val)};\n`;
+                    classMethods += `      ${key}: (value: OpCssF['${outerKey}']['${key}']) => {},\n`;
+                }
+            }
+            interfaces += '  };\n';
+            classMethods += '    };\n  }\n';
+        }
+        interfaces += '}\n';
+        classMethods += '}\n';
+        return { interfaces, classMethods };
+    }
+}
+/* const { interfaces, classMethods } = cssGuide.generateTsInterfaceAndClass(objModel, nodeType);
+console.log(interfaces);
+console.log(classMethods); */

package/dist/csss/csss.scss

@@ -0,0 +1,8 @@
+@import "../styles/slotui-mixins.scss";
+
+:global {
+    * {
+        @include ui-variants;
+        border: 1px solid red;
+    }
+}

package/dist/data/dataList/DataList.demo.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">import DataList from "./DataList.svelte";
+import DataListRow from "./DataListRow.svelte";
+import DataListCell from "./DataListCell.svelte";
+import DataListHead from "./DataListHead.svelte";
+import ComponentDemo from "../../base/demoer/DemoerComponent.svelte";
+import Demoer from "../../base/demoer/Demoer.svelte";
+import { parameters, componentArgs } from "./types.js";
+import DemoPage from "../../base/demoer/DemoPage.svelte";
+let data = [...Array(50)].map((caches, index) => {
+  return {
+    id: index,
+    index,
+    name: "name " + index,
+    lastName: "lastName " + index,
+    group: "group-" + getRandomInt(7),
+    groupByArrayObjectKey: [
+      { name: "nested" + getRandomInt(4) },
+      { name: "nested" + getRandomInt(4) }
+    ],
+    groupByObjectKey: { group: "group-" + getRandomInt(4) }
+  };
+});
+let columns = {
+  index: { field: "index" },
+  name: { field: "name", width: "90px" },
+  group: { field: "group" },
+  lastName: {
+    field: "lastName",
+    getter: (data2) => {
+      return data2.lastName + " - getter";
+    }
+  }
+};
+function getRandomInt(max) {
+  return Math.floor(Math.random() * max);
+}
+let isOpen = false;
+</script>
+
+<ComponentDemo
+	component="DataList"
+	cite="Those who call they tables are the same who name stones as chairs. Reality is above : datalist
+is a datalist table <br /> B. Franklin, 1854"
+>
+	<DemoPage title="red">
+		<div class="flex-v gap-medium">
+			<h5>Automatique datalist, without columns definitions</h5>
+			<div class="what pos-rel pad">
+				<Demoer {parameters} {componentArgs}>
+					{#snippet children({ activeParams })}
+						<DataList style="height:150px;width:350px;overflow:auto;" {...activeParams}>
+							{#snippet dataListHead()}
+								<DataListHead>
+									<DataListCell field="index">index</DataListCell>
+									<DataListCell field="name">name</DataListCell>
+									<DataListCell field="lastName">lastName</DataListCell>
+								</DataListHead>
+							{/snippet}
+						</DataList>
+					{/snippet}
+				</Demoer>
+			</div>
+			<h5>With columns definitions</h5>
+			<div class="what pos-rel pad">
+				<Demoer {parameters} componentArgs={{ ...componentArgs, columns }}>
+					{#snippet children({ activeParams })}
+						<DataList
+							style="max-height:250px;overflow:auto;width:450px;"
+							{...activeParams as DataListProps}
+						>
+							{#snippet dataListHead()}
+								<DataListHead>
+									<DataListCell field="index">index</DataListCell>
+									<DataListCell field="name">name</DataListCell>
+									<DataListCell field="group">group</DataListCell>
+									<DataListCell field="lastName">lastName</DataListCell>
+								</DataListHead>
+							{/snippet}
+						</DataList>
+					{/snippet}
+				</Demoer>
+			</div>
+			<h5>With a unique cell</h5>
+			<div class="what pos-rel pad">
+				<Demoer {parameters} componentArgs={{ ...componentArgs, columns }}>
+					{#snippet children({ activeParams })}
+						<DataList
+							style="max-height:250px;overflow:auto;width:450px;"
+							{...activeParams as DataListProps}
+						>
+							{#snippet dataListHead()}
+								<DataListHead>
+									<DataListCell field="index">index</DataListCell>
+									<DataListCell field="name">name</DataListCell>
+									<DataListCell field="group">group</DataListCell>
+									<DataListCell field="lastName">lastName</DataListCell>
+								</DataListHead>
+							{/snippet}
+							{#snippet dataListCell({ fieldValue, fieldName })}
+								<DataListCell field={fieldName}>
+									{fieldValue}
+								</DataListCell>
+							{/snippet}
+						</DataList>
+					{/snippet}
+				</Demoer>
+			</div>
+			<!-- <h5>Automatique datalist slotted</h5>
+		<div style="height:350px;width:350px;" class="what   pos-rel overflow-hidden">
+			<DataList {data} on:datalist:click={() => {}}>
+				{#snippet dataListHead()}
+							<DataListHead>
+								<DataListCell field="index">index</DataListCell>
+								<DataListCell field="name">name</DataListCell> 
+								<DataListCell field="lastName">lastName</DataListCell>
+							</DataListHead>
+			</DataList>
+		</div> -->
+			<h5>Full snippet datalist</h5>
+			<div style="height:350px;" class="what pos-rel overflow-auto">
+				<DataList {data} style="height:100%;overflow:auto;">
+					{#snippet dataListHead()}
+						<DataListHead>
+							<DataListCell field="index" style="width:50px;">index</DataListCell>
+							<DataListCell field="name" style="width:50px;">name</DataListCell>
+							<DataListCell noWrap={true} field="lastName" style="width:100px;overflow:hidden"
+								>lastName 50%</DataListCell
+							>
+						</DataListHead>
+					{/snippet}
+					{#snippet children({ item })}
+						<DataListRow data={item}>
+							<DataListCell>{item.index}</DataListCell>
+							<DataListCell>{item.name}</DataListCell>
+							<DataListCell>121512</DataListCell>
+						</DataListRow>
+					{/snippet}
+				</DataList>
+			</div>
+		</div>
+	</DemoPage>
+</ComponentDemo>
+
+<style>.what {
+  background-color: var(--sld-color-background);
+  color: var(--sld-color-foreground);
+}</style>

package/dist/data/dataList/DataList.demo.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type DataListProps_ = typeof __propDef.props;
+export { DataListProps_ as DataListProps };
+export type DataListEvents = typeof __propDef.events;
+export type DataListSlots = typeof __propDef.slots;
+export default class DataList extends SvelteComponent<DataListProps_, DataListEvents, DataListSlots> {
+}

package/dist/data/dataList/DataList.preview.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">import DataList from "./DataList.svelte";
+import DataListCell from "./DataListCell.svelte";
+import DataListHead from "./DataListHead.svelte";
+let data = [...Array(200)].map((caches, index) => {
+  return { index, name: "name " + index, otherName: "otherName " + index };
+});
+</script>
+
+<div style="height:350px;width:450px;" class="what pos-rel overflow-hidden pad-1">
+	<DataList {data}>
+		{#snippet dataListHead()}
+			<DataListHead>
+				<DataListCell field="index">index</DataListCell>
+				<DataListCell field="name">name</DataListCell>
+				<DataListCell field="otherName" style="flex:1">otherName</DataListCell>
+			</DataListHead>
+		{/snippet}
+	</DataList>
+</div>
+
+<style>.what {
+  background-color: var(--sld-color-background);
+  color: var(--sld-color-foreground);
+}</style>

package/dist/data/dataList/DataList.preview.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DataListProps = typeof __propDef.props;
+export type DataListEvents = typeof __propDef.events;
+export type DataListSlots = typeof __propDef.slots;
+export default class DataList extends SvelteComponent<DataListProps, DataListEvents, DataListSlots> {
+}
+export {};