@medyll/cssfabric 0.1.12 → 0.2.2

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}

package/src/components/docs/Docs.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import cssfabric from '../../lib/scripts/cssfabric';
+  import utils from '../../lib/scripts/utils';
+  import {htmlUtils} from '../../utils';
+  import 'svelte-highlight/styles/github.css';
+
+  export let module      = '';
+  const moduleAttributes = cssfabric.getModuleDocsAttributes(module);
+
+  //$: console.log({module, moduleAttributes});
+
+  let toParseKeys =
+        ['keys',
+         'levels',
+         'levelsDeclin',
+         'levelsLinked',
+         'classNames'];
+
+  function tre(part: any) {
+    
+    // if object, if array !!!
+    // console.log(part)
+    let out: any,
+        levelValues: any;
+    
+    if (part && !Array.isArray(part) && typeof (part === 'object')) {
+
+
+      out = Object.keys(part).map((levelKey) => {
+        let levelValue = part[levelKey];
+
+        if (Array.isArray(levelValue)) {
+          levelValues = levelValue.map(x => `<div class="marg-r-4 w-2-min">${x}</div>`).join('');
+        }
+        
+        return `<div class="flex flex-h">
+                               <div class="color-gray-600 w-small marg-r-1 border-b pad">${levelKey} </div>
+                                              <div class="flex flex-h flex-wrap marg-l-2 pad ">${levelValues}</div>
+                                                             </div>`;
+      }).join('');
+    } else {
+      
+      switch (utils.isArrayOfTypes(part)) {
+        case 'strings':
+        case 'numbers':
+          out = `<div class="flex flex-h flex-wrap gap-tiny">` + part.map((x: string) => `<div class="pad">${x}</div>`).join('') + `</div>`;
+          break;
+        case 'arrays':
+          out = part.map((x: string[]) => x.join('')).map((x: any) => htmlUtils.enclose(x)).join('');
+          break;
+        
+      }
+    }
+
+    return out;
+  }
+</script>
+
+<svelte:head>
+    <title>{module} cssfabric documentation</title>
+</svelte:head>
+
+<div>
+
+    <!--{@debug moduleAttributes}-->
+    {#each Object.entries(moduleAttributes) as [moduleAttribute, moduleAttributeModel]}
+
+        <div class={"pad-b-8"}>
+            <div class={"flex-h flex-inline border-b  theme-border-primary align-middle cell-spacing marg-b-1"}>
+                <label>{moduleAttributeModel.tag}</label>
+                <div class={"text-400"}>{moduleAttribute}</div>
+            </div>
+            <div class={"color-gray-500 marg-b-2 pad-l-8 "}>
+                <div class={"dsp-inline pad-all-2"}>
+                    {moduleAttributeModel.about}
+                </div>
+            </div>
+            <div class={"cell-spacing flex-main"}>
+                {#each toParseKeys as keyToParse}
+                    {#if moduleAttributeModel?.[keyToParse]}
+                        <div class={"flex marg-b-4"}>
+                            <div class={"w-8 pad-l-4 border-l-4 text-900"}>
+                                {keyToParse}:
+                            </div>
+                            <!--<div>
+                                <HighlightAuto  code={'tre(moduleAttributeModel?.[keyToParse])'} />
+                            </div>-->
+                            <div class={"marg-l-4"}>
+                                {@html tre(moduleAttributeModel?.[keyToParse])}
+                            </div>
+                        </div>
+                    {/if}
+                {/each}
+            </div>
+        </div>
+    {/each}
+</div>

package/src/components/docs/DocsClassNames.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+
+  import cssfabric from '../../lib/scripts/cssfabric';
+
+  export let module;
+  const moduleAttributes = cssfabric.getModuleDocsAttributes(module);
+
+</script>
+
+<div>
+    <div class={"flex-v flex-items-end pad-r-4"}>
+        <div class={"txt-800 border-b dsp-inline"}>
+            cssfabric classnames
+        </div>
+        <div class={"txt-gray-300 marg-b-1"}>
+            generated classnames
+        </div>
+    </div>
+    <div class={"pad"}>
+        {#each Object.keys(moduleAttributes) as moduleAttribute  }
+            <div>
+                <h4 class={"pad-tb"}>{moduleAttribute}</h4>
+                <div class={"text-gray-400 pad-tb"}>
+                    {`- cssfabric expressions list for  css ${moduleAttribute} rules`}
+                </div>
+                <div class={"marg-b-8"}>
+                    {#each cssfabric.getModuleClassNames.getModuleTagClassNames({module, moduleAttribute}) as className}
+                        <div class={""}>.{className}</div>
+                    {/each}
+                </div>
+            </div>
+        {/each}
+    </div>
+</div>

package/src/components/docs/DocsDemo.svelte

@@ -0,0 +1,84 @@
+<script lang='ts'>
+
+
+  import cssfabric from '../../lib/scripts/cssfabric';
+  import ProxyDsp from '../demo/proxy/ProxyDsp.svelte';
+
+  export let module      = '';
+  const moduleAttributes = cssfabric.getModuleDocsAttributes(module);
+
+  let out;
+
+  function proxyDsp(val: any, moduleAttribute: any, moduleRule: string = 'default') {
+    if (Array.isArray(val)) {
+      return DspArray(val, moduleAttribute, moduleRule);
+    } else {
+      return dspObject(val, moduleAttribute, moduleRule);
+    }
+  }
+
+  function DspArray(val: any[], moduleAttribute: any, moduleRule: any) {
+    return `<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"}>
+                ` + val.map((className, y) => {
+        /*return <DemoElement moduleAttribute={moduleAttribute} moduleRule={moduleRule}
+         cssFabricClassName={className}>
+         [{moduleAttribute}] .{class}
+         </DemoElement>*/
+    }) + `
+            </div>
+        </div>`;
+  }
+
+  function dspObject(val: Record<string, any>, moduleAttribute: any, moduleRule: any) {
+    return `<div>` +
+           Object.keys(val).map((moduleRule) => {
+             return `<div>
+                    <h5 class={"pad-2 pad-r-8 dsp-block-inline border-b"}>${moduleRule}</h5>
+                    <div class={"marg-l-4"}>` +
+                    proxyDsp(val[moduleRule], moduleAttribute, moduleRule)
+                    + `</div>
+                </div>`;
+           })
+           + `</div>`;
+  }
+
+</script>
+<div>
+    <!--<div class={"flex-v flex-items-end pad-r-8"}>
+      <div class={"txt-800 border-b dsp-inline"}>
+      cssfabric classnames
+      </div>
+      <div class={"txt-gray-300 marg-b-4"}>
+      generated examples
+      </div>
+      </div> -->
+
+    <div class="pad-8">
+
+        {#each Object.entries(moduleAttributes) as [moduleAttribute, moduleAttributeValues] }
+
+            <div class={"w-sm-full"}>
+                <h4 class={"border-l-2 pad-l-2"}>module {moduleAttribute}</h4>
+                <div class={"marg-l-4 text-gray-400 pad-tb"}>
+                    {`- cssfabric demo for  css ${moduleAttribute} rules`}
+                </div>
+                <div class={"marg-b-4 marg-l-4"}>
+                    {#each [cssfabric.getModuleTagDebug({module, moduleAttribute})] as moduleDebug }
+                        {#each Object.entries(moduleDebug) as [tag, debugTag]}
+                            <div>
+                                <h5>- {tag}</h5>
+                                <div class={' marg-l-4'}>
+                                    <ProxyDsp val={debugTag} {moduleAttribute}/>
+                                </div>
+                            </div>
+                        {/each}
+                    {/each}
+                </div>
+            </div>
+        {/each}
+
+        })
+    </div>
+</div>