@medyll/cssfabric 0.2.0 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medyll/cssfabric",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "private": false,
   "bin": {
     "@medyll/cssfabric": "./bin/index.js"
@@ -9,6 +9,20 @@
     "type": "git",
     "url": "https://github.com/medyll/cssfabric.git"
   },
+  "scripts": {
+    "dev": "svelte-kit dev",
+    "build": "svelte-kit build",
+    "package": "svelte-kit package",
+    "preview": "svelte-kit preview",
+    "prepare": "svelte-kit sync",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "watch-all": "npm-run-all -p -r watch-sass",
+    "watch-sass": "gulp watchSass",
+    "watch-json": "gulp watchJson",
+    "watch-readme": "gulp watchReadme",
+    "css-build": "sass   src/cssfabric/modules/vars.scss css/mystyles.css"
+  },
   "dependencies": {
     "@lukeed/uuid": "^2.0.0",
     "cookie": "^0.4.1",
@@ -51,63 +65,5 @@
     "typescript": "~4.6.2",
     "webpack": "^5.36.2"
   },
-  "type": "module",
-  "exports": {
-    "./package.json": "./package.json",
-    "./init/importCssVars": "./init/importCssVars.js",
-    "./scripts/cssfabric": "./scripts/cssfabric.js",
-    "./scripts/cssfabricClassNames": "./scripts/cssfabricClassNames.js",
-    "./scripts": "./scripts/index.js",
-    "./scripts/utils": "./scripts/utils.js",
-    "./styles/animation/animation.css": "./styles/animation/animation.css",
-    "./styles/animation/animation.min.css": "./styles/animation/animation.min.css",
-    "./styles/base/base.css": "./styles/base/base.css",
-    "./styles/base/base.min.css": "./styles/base/base.min.css",
-    "./styles/box/box.css": "./styles/box/box.css",
-    "./styles/box/box.min.css": "./styles/box/box.min.css",
-    "./styles/box/box.responsive.css": "./styles/box/box.responsive.css",
-    "./styles/box/box.responsive.min.css": "./styles/box/box.responsive.min.css",
-    "./styles/color/color.css": "./styles/color/color.css",
-    "./styles/color/color.min.css": "./styles/color/color.min.css",
-    "./styles/color/color.responsive.css": "./styles/color/color.responsive.css",
-    "./styles/color/color.responsive.min.css": "./styles/color/color.responsive.min.css",
-    "./styles/cssfabric.css": "./styles/cssfabric.css",
-    "./styles/cssfabric.min.css": "./styles/cssfabric.min.css",
-    "./styles/cssfabric.responsive.css": "./styles/cssfabric.responsive.css",
-    "./styles/cssfabric.responsive.min.css": "./styles/cssfabric.responsive.min.css",
-    "./styles/flex/flex.css": "./styles/flex/flex.css",
-    "./styles/flex/flex.min.css": "./styles/flex/flex.min.css",
-    "./styles/flex/flex.responsive.css": "./styles/flex/flex.responsive.css",
-    "./styles/flex/flex.responsive.min.css": "./styles/flex/flex.responsive.min.css",
-    "./styles/grid/grid.css": "./styles/grid/grid.css",
-    "./styles/grid/grid.min.css": "./styles/grid/grid.min.css",
-    "./styles/grid/grid.responsive.css": "./styles/grid/grid.responsive.css",
-    "./styles/grid/grid.responsive.min.css": "./styles/grid/grid.responsive.min.css",
-    "./styles/menu/menu.css": "./styles/menu/menu.css",
-    "./styles/menu/menu.min.css": "./styles/menu/menu.min.css",
-    "./styles/menu/menu.responsive.css": "./styles/menu/menu.responsive.css",
-    "./styles/menu/menu.responsive.min.css": "./styles/menu/menu.responsive.min.css",
-    "./styles/overflow/overflow.css": "./styles/overflow/overflow.css",
-    "./styles/overflow/overflow.min.css": "./styles/overflow/overflow.min.css",
-    "./styles/overflow/overflow.responsive.css": "./styles/overflow/overflow.responsive.css",
-    "./styles/overflow/overflow.responsive.min.css": "./styles/overflow/overflow.responsive.min.css",
-    "./styles/scale/scale.css": "./styles/scale/scale.css",
-    "./styles/scale/scale.min.css": "./styles/scale/scale.min.css",
-    "./styles/scale/scale.responsive.css": "./styles/scale/scale.responsive.css",
-    "./styles/scale/scale.responsive.min.css": "./styles/scale/scale.responsive.min.css",
-    "./styles/table/table.css": "./styles/table/table.css",
-    "./styles/table/table.min.css": "./styles/table/table.min.css",
-    "./styles/table/table.responsive.css": "./styles/table/table.responsive.css",
-    "./styles/table/table.responsive.min.css": "./styles/table/table.responsive.min.css",
-    "./styles/text/text.css": "./styles/text/text.css",
-    "./styles/text/text.min.css": "./styles/text/text.min.css",
-    "./styles/text/text.responsive.css": "./styles/text/text.responsive.css",
-    "./styles/text/text.responsive.min.css": "./styles/text/text.responsive.min.css",
-    "./styles/theme/theme.css": "./styles/theme/theme.css",
-    "./styles/theme/theme.min.css": "./styles/theme/theme.min.css",
-    "./styles/vars.css": "./styles/vars.css",
-    "./styles/vars.min.css": "./styles/vars.min.css",
-    "./styles/zindex/zindex.css": "./styles/zindex/zindex.css",
-    "./styles/zindex/zindex.min.css": "./styles/zindex/zindex.min.css"
-  }
-}
+  "type": "module"
+}

package/src/app.css

@@ -0,0 +1,107 @@
+
+:root {
+	font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	--font-mono: 'Fira Mono', monospace;
+	--pure-white: #ffffff;
+	--primary-color: #b9c6d2;
+	--secondary-color: #d0dde9;
+	--tertiary-color: #edf0f8;
+	--accent-color: #ff3e00;
+	--heading-color: rgba(0, 0, 0, 0.7);
+	--text-color: #444444;
+	--background-without-opacity: rgba(255, 255, 255, 0.7);
+	--column-width: 42rem;
+	--column-margin-top: 4rem;
+}
+
+body {
+	min-height: 100vh;
+	font-size: 12px;
+	margin: 0;
+	background-color: var(--theme-color-background);
+	color: var(--theme-color-foreground);
+}
+
+body::before {
+	content: '';
+	width: 80vw;
+	height: 100vh;
+	position: absolute;
+	top: 0;
+	left: 10vw;
+	z-index: -1;
+	background: radial-gradient(
+		50% 50% at 50% 50%,
+		var(--pure-white) 0%,
+		rgba(255, 255, 255, 0) 100%
+	);
+	opacity: 0.05;
+}
+
+#svelte {
+	min-height: 100vh;
+}
+
+h1,
+h2,
+p {
+	font-weight: 400;
+	color: var(--heading-color);
+}
+
+p {
+	line-height: 1.5;
+}
+
+a {
+	color: var(--accent-color);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+h1 {
+	font-size: 2rem;
+	text-align: center;
+}
+
+h2 {
+	font-size: 1rem;
+}
+
+pre {
+	font-size: 16px;
+	font-family: var(--font-mono);
+	background-color: rgba(255, 255, 255, 0.45);
+	border-radius: 3px;
+	box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
+	padding: 0.5em;
+	overflow-x: auto;
+	color: var(--text-color);
+}
+
+input,
+button {
+	font-size: inherit;
+	font-family: inherit;
+}
+
+button:focus:not(:focus-visible) {
+	outline: none;
+}
+
+code {
+	color: var(--theme-color-foreground);
+	background-color: var(--theme-color-background-alpha-high);
+	padding: var(--box-density-1);
+	border-radius: var(--radius-small)
+}
+
+@media (min-width: 720px) {
+	h1 {
+		font-size: 2.4rem;
+	}
+}

package/src/app.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="@sveltejs/kit" />
+
+// See https://kit.svelte.dev/docs/types#the-app-namespace
+// for information about these interfaces
+declare namespace App {
+	interface Locals {
+		userid: string;
+	}
+
+	// interface Platform {}
+
+	// interface Session {}
+
+	// interface Stuff {}
+}

package/src/app.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="description" content="Svelte demo app" />
+		<link rel="icon" href="%svelte.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%svelte.head%
+	</head>
+	<body data-theme="dark">
+		<div>%svelte.body%</div>
+	</body>
+</html>

package/src/components/Header.svelte

@@ -0,0 +1,17 @@
+
+
+<script lang="ts">
+    export let title;
+    export let tag;
+    export let description;
+</script>
+
+<div class={"pad  flex-h flex-wrap flex-align-middle"}>
+    <div class={"flex-h items-center pad-l-2 flex-main"}>
+        <h2 class={"pad-all border-b "}>{title}</h2>
+        <h5 class={"pad-all text-gray-500  text-h4"}>
+            {tag}
+        </h5>
+    </div>
+    <p class={"pad   text-center marg-l border-l color-grey-400"}>{description}</p>
+</div>

package/src/components/HeaderSiteTitle.svelte

@@ -0,0 +1,12 @@
+
+<script lang="ts">
+    export let title: string;
+    export let title_tag: string;
+    export let description: string;
+</script>
+<div class={"flex-v items-center pad-lg  pad border-b pos-sticky"}>
+    <header class={"flex-h just-center items-center"}>
+        <h4 class={"pad-all text-shad"}><a href={"/"}>{title}</a></h4>
+        <h6 class={"pad-all self-start dsp-sm-none"}>{title_tag}</h6>
+    </header>
+</div>

package/src/components/InnerMenu.svelte

@@ -0,0 +1,27 @@
+
+
+<script lang="ts">
+
+import {fabricNavigation} from "../scripts/utils";
+
+export let action:string;
+export let module:string ;
+</script>
+
+<ul class={"menu-xl-h menu-v menu-small shad-8"}>
+    <li class={(action==='demo')? 'active':''}>
+        <a href={fabricNavigation.getModuleDemoPage(module)}>
+            <a>Demo</a>
+        </a>
+    </li>
+    <li class={(action==='classnames')? 'active':''}>
+        <a href={fabricNavigation.getModuleClassNamesPage(module)}>
+            <a>Classnames</a>
+        </a>
+    </li>
+    <li class={(action==='docs')? 'active':''}>
+        <a href={fabricNavigation.getModuleDocsPage(module)}>
+            <a>Docs</a>
+        </a>
+    </li>
+</ul>

package/src/components/SubHeader.svelte

@@ -0,0 +1,10 @@
+<article class={"pad flex-main"}>
+    <div class={"flex-h items-center"}>
+        <h3 class={"pad-tb"}>{$$props.title}</h3>
+    </div>
+    <div class={"flex-h pad-tb"}>
+        <article class={"marg-l-2 flex-main"}>
+            <slot></slot>
+        </article>
+    </div>
+</article>

package/src/components/SubHeaderH.svelte

@@ -0,0 +1,3 @@
+
+
+<div class={"flex-h flex-wrap"}><slot></slot></div>;

package/src/components/SubSubHeader.svelte

@@ -0,0 +1,22 @@
+
+<script lang="ts">
+    export let tag;
+    export let description;
+</script>
+<div class={"pad-all flex-main"}>
+    <div class={"flex-h items-center"}>
+        <div class={"w-4 text-center border-4"}>
+        </div>
+        <div>
+            <h4 class={"pad-all"}>{tag}</h4>
+            <p class={"pad-all"}>{description}</p>
+        </div>
+    </div>
+    <div class={"flex-h"}>
+        <div class={"w-4 text-center border-4"}>
+        </div>
+        <article class={"marg-l-8"}>
+            <slot></slot>
+        </article>
+    </div>
+</div>

package/src/components/demo/DemoElement.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+
+  import DemoElementColor from './elements/DemoElementColor.svelte';
+  import DemoElementBorderColor from './elements/DemoElementBorderColor.svelte';
+  import DemoElementMargin from './elements/DemoElementMargin.svelte';
+  import DemoElementPadding from './elements/DemoElementPadding.svelte';
+  import DemoElementBorder from './elements/DemoElementBorder.svelte';
+  import DemoElementGrid from './elements/DemoElementGrid.svelte';
+  import DemoElementScale from './elements/DemoElementScale.svelte';
+  import DemoElementText from './elements/DemoElementText.svelte';
+  import DemoElementTable from './elements/DemoElementTable.svelte';
+  import {onMount} from 'svelte';
+
+  interface IDemoElement {
+    module?: string;
+    cssFabricClassName?: any;
+    moduleAttribute?: any;
+    moduleRule?: any;
+    children?: any;
+  }
+
+  interface IDemoElementGridProps {
+    module?: string;
+    cssFabricClassName?: any;
+    moduleAttribute?: any;
+    moduleRule?: any;
+    children?: any;
+  }
+
+  export let moduleAttribute;
+  export let moduleRule;
+  export let cssFabricClassName;
+
+  onMount(async () => {
+    /*await sleep(1000); // simulate network delay
+    Thing = (await import('./Thing.svelte')).default;*/
+  });
+
+</script>
+
+{#if moduleAttribute === "color" }
+    <DemoElementColor {...$$props}/>
+
+{:else if moduleAttribute === "border-color" }
+    <DemoElementBorderColor {...$$props}/>
+
+{:else if ["background-color", "background-themed", "theme"].includes(moduleAttribute)    }
+    <DemoElementBorderColor {...$$props}/>
+{:else if moduleAttribute === "margin" }
+    <DemoElementMargin {...$$props}/>
+
+{:else if moduleAttribute === "padding" }
+    <DemoElementPadding {...$$props}/>
+
+{:else if moduleAttribute === "border" }
+    <DemoElementBorder {...$$props}/>
+
+{:else if moduleAttribute === "grid" }
+    <DemoElementGrid {...$$props}/>
+
+{:else if moduleAttribute === "scale" }
+    <DemoElementScale {...$$props}/>
+
+{:else if moduleAttribute === "table" }
+    <DemoElementTable {...$$props}/>
+{:else if ["text", "text-align", "text-shadow", "text-transform", "font-weight"].includes(moduleAttribute) }
+    <DemoElementText {...$$props}/>
+{:else}
+    <div class={cssFabricClassName + ' h-full'}>
+        {moduleAttribute} {cssFabricClassName}
+    </div>
+{/if}
+
+
+
+
+
+
+
+
+
+
+
+
+
+

package/src/components/demo/elements/DemoElementBackgroundColor.svelte

@@ -0,0 +1,7 @@
+const DemoElementBackgroundColor = (props: IDemoElementGridProps) => {
+    const {moduleAttribute, moduleRule, cssFabricClassName} = props;
+
+    return <div className={cssFabricClassName + ' w-sm-auto w-8 h-sm-2 h-8 pad-1 overflow-none border'}>
+    <div className={"text-ellipsis"}>{cssFabricClassName}</div>
+    </div>
+}

package/src/components/demo/elements/DemoElementBorder.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let moduleAttribute, moduleRule, cssFabricClassName;
+ 
+</script>
+
+      <div class={'w-16 h-4 pad-1 flex-h flex-align-middle flex-align-center'}>
+    <div class={cssFabricClassName + ''}>&nbsp;border&nbsp;</div>
+    </div> 

package/src/components/demo/elements/DemoElementBorderColor.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let moduleAttribute, moduleRule, cssFabricClassName;
+
+</script>
+
+<div class={'border-4 ' + cssFabricClassName + ' h-full w-16 pad'}>
+    .{cssFabricClassName}
+</div>

package/src/components/demo/elements/DemoElementColor.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+
+  export let moduleAttribute, moduleRule, cssFabricClassName;
+</script>
+
+<div class={cssFabricClassName + ' h-full pad'}>
+    this is so {cssFabricClassName}
+</div>

package/src/components/demo/elements/DemoElementGrid.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  export let moduleAttribute, moduleRule, cssFabricClassName;
+
+  const multiply = (factor: number) => {
+    return [...Array(factor)].map((x, i) => `<div class={'border marg pad w-4-min '}>&nbsp;{++i}&nbsp;</div>`);
+  };
+</script>
+
+
+const def =
+<div class={' w-48 pad-1 border-l-4 shad-4 marg-4'}>
+    <h6 class={"pad text-bold border-b"}>
+        {cssFabricClassName}
+    </h6>
+    <div class={"flex-h overflow-hidden cell-spacing"}>
+        <div class={"flex-main overflow-hidden"}>
+            <div class={"pad text-right"}>.flex-v</div>
+            <div class={'flex-v ' + cssFabricClassName + " h-8 overflow-hidden"}>
+                {multiply(12)}
+            </div>
+        </div>
+        <div class={"flex-main overflow-hidden  border-l"}>
+            <div class={"pad"}>.flex-h</div>
+            <div class={'flex-h ' + cssFabricClassName + " h-8 overflow-hidden"}>
+                {multiply(12)}
+            </div>
+        </div>
+    </div>
+</div>
+
+const forClassNames =
+<div class={'flex-h w-64 pad-1 h-16-min'}>
+    <div class={"w-mid border-r flex-v"}>
+        <div class={"pad"}>.flex-h</div>
+        <div class={'flex-main flex-h ' + cssFabricClassName + " h-8"}>
+            {multiply(6)}
+        </div>
+    </div>
+    <div class={"flex-v"}>
+        <div class={"pad"}>.flex-v</div>
+        <div class={'flex-main flex-v ' + cssFabricClassName + " h-8"}>
+            {multiply(3)}
+        </div>
+    </div>
+</div>
+
+<!--
+switch (moduleRule) {
+    case "classnames":
+    return <React.Fragment>{forClassNames}</React.Fragment>
+    default:
+    return <React.Fragment>{def}</React.Fragment>
+}-->

package/src/components/demo/elements/DemoElementMargin.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let moduleAttribute, moduleRule, cssFabricClassName;
+
+</script>
+
+      <div class={'w-16 h-2-min'}>
+    <div class={cssFabricClassName + ' border'}>&nbsp;{cssFabricClassName}&nbsp;</div>
+    </div> 

package/src/components/demo/elements/DemoElementPadding.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let moduleAttribute, moduleRule, cssFabricClassName;
+
+</script>
+
+<div class={'w-16 h-4-min pad-1 flex-h flex-align-middle flex-align-center'}>
+    <div class={cssFabricClassName + '    shad-8 border  '}>
+        <div class={' pad-lr-4   bg-themed-gray-100 '}>&nbsp;{cssFabricClassName}&nbsp;</div>
+    </div>
+</div>

package/src/components/demo/elements/DemoElementScale.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let moduleAttribute, moduleRule, cssFabricClassName;
+</script>
+
+    return <div class={'w-64 pad-1'}>
+    <div class={cssFabricClassName + ' border marg pad'}>
+    <div class={''}>&nbsp;&nbsp;</div>
+    </div>
+    </div>

package/src/components/demo/elements/DemoElementTable.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  export let moduleAttribute, moduleRule, cssFabricClassName;
+
+</script>
+
+
+<div class={"flex-h flex-wrap relative"}>
+    <div class={"h-16 w-64"}>
+        <div class={"h-full flex-v overflow-j relative"}>
+            <h5 class={"border-b-1 pad-tb-4"}>table : {cssFabricClassName}</h5>
+            <div class={"flex-main  overflow-auto marg-t-4"}>
+                <table class={"table tbl-layout  w-full tbl-" + cssFabricClassName}>
+                    <thead>
+                    <tr>
+                        <!--{[...Array(6)].map((name, val) => (
+                                <th>Title</th>
+                        ))}-->
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <!--{[...Array(30)].map((name, val) => (
+                        <tr key={val}>
+                            {[...Array(6)].map((name, val) => (
+                                    <td>{val + 1}</td>
+                            ))}
+                        </tr>
+                    ))}-->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+ 

package/src/components/demo/elements/DemoElementText.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let moduleAttribute, moduleRule, cssFabricClassName;
+</script>
+
+<div class={' pad-2 overflow-none scale-w-16'}>
+    <h6 class={'border-l-4 pad-l theme-border-primary-dark dsp-inline'}>.{cssFabricClassName}</h6>
+    <p class={cssFabricClassName + " text-ellipsis"}>Here is some {cssFabricClassName} text</p>
+    <p class={cssFabricClassName + " text-ellipsis"}>This {cssFabricClassName} text is from cssfabric a css sass
+        framework</p>
+</div>

package/src/components/demo/proxy/ProxyDsp.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import ProxyDspArray from "./ProxyDspArray.svelte";
+  import ProxyDspObject from "./ProxyDspObject.svelte";
+
+  export let val: any, moduleAttribute: any, moduleRule: string = 'default';
+</script>
+
+{#if Array.isArray(val)}
+    <ProxyDspArray {...$$props}/>
+{:else}
+    <ProxyDspObject  {...$$props}/>
+{/if}

package/src/components/demo/proxy/ProxyDspArray.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import DemoElement from "../DemoElement.svelte";
+
+    export let val: any[], moduleAttribute: any, moduleRule: any;
+</script>
+
+
+
+<div class={"marg-b-2"}>
+    <p class={"marg-b-2 pad-tb"}>cssfabric.{moduleRule} : {moduleAttribute} classnames for cssfabric</p>
+    <div class={"flex-h flex-wrap cell-spacing"}>
+        {#each val as className}
+            <DemoElement moduleAttribute={moduleAttribute} moduleRule={moduleRule}
+                         cssFabricClassName={className}>
+                [{moduleAttribute}] .{className}
+            </DemoElement>
+            {/each}
+    </div>
+</div>

package/src/components/demo/proxy/ProxyDspObject.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import ProxyDsp from "./ProxyDsp.svelte";
+
+  export let val: Record<string, any>, moduleAttribute: any, moduleRule: any;
+
+</script>
+
+{#each Object.keys(val) as moduleRule}
+
+    <div>
+        <h5 class={"pad-2 pad-r-8 dsp-block-inline border-b"}>{moduleRule}</h5>
+        <div class={"marg-l-4"}>
+            <ProxyDsp val={val[moduleRule]} {moduleAttribute} {moduleRule} />
+        </div>
+    </div>
+
+{/each}