@kubex/zinc 0.0.3 → 1.0.0

package/components/MaxWidth/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "@kubex/zn-max-width",
-  "version": "0.0.1",
-  "repository": "git@github.com:kubex/zinc",
-  "author": "Brooke Bryan <brooke@bajb.net>",
-  "license": "MIT",
-  "main": "ts/Component.ts",
-  "files": [
-    "scss/",
-    "ts/"
-  ],
-  "dependencies": {
-    "lit": "2.0.0-rc.4"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^20.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
-    "@rollup/plugin-typescript": "^8.2.5",
-    "npm-run-all": "^4.1.5",
-    "postcss": "^8.2.10",
-    "postcss-import": "^14.0.2",
-    "rollup": "^2.44.0",
-    "rollup-plugin-postcss": "^4.0.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.32.10",
-    "tslib": "^2.2.0",
-    "typescript": "^4.2.4"
-  },
-  "scripts": {
-    "build": "rollup -c",
-    "watch": "rollup -c -w"
-  }
-}

package/components/MaxWidth/php/composer.json

@@ -1,25 +0,0 @@
-{
-  "name": "kubex/zinc-components-max-width",
-  "description": "Kubex Fusion MaxWidth",
-  "license": "MIT",
-  "authors": [
-    {
-      "name": "Brooke Bryan",
-      "email": "brooke@bajb.net"
-    }
-  ],
-  "require": {
-    "php": ">=7.4",
-    "packaged/safehtml": "~2.2"
-  },
-  "autoload": {
-    "psr-4": {
-      "Kubex\\Zinc\\Components\\MaxWidth\\": "src"
-    }
-  },
-  "autoload-dev": {
-    "psr-4": {
-      "Kubex\\ZincTests\\Components\\MaxWidth\\": "tests"
-    }
-  }
-}

package/components/MaxWidth/php/src/MaxWidth.php

@@ -1,32 +0,0 @@
-<?php
-namespace Kubex\Zinc\Components\MaxWidth;
-
-use Packaged\SafeHtml\ISafeHtmlProducer;
-use Packaged\SafeHtml\SafeHtml;
-
-class MaxWidth implements ISafeHtmlProducer
-{
-
-  /**
-   * @var int
-   */
-  protected $_size;
-
-  public function setSize(int $size): self
-  {
-    $this->_size = $size;
-    return $this;
-  }
-
-  public function size(): int
-  {
-    return $this->_size;
-  }
-
-  public function produceSafeHTML(): SafeHtml
-  {
-    return new SafeHtml(
-      sprintf('<zn-max-width width="%d"></zn-max-width>', $this->_size)
-    );
-  }
-}

package/components/MaxWidth/rollup.config.js

@@ -1,32 +0,0 @@
-import resolve from '@rollup/plugin-node-resolve';
-import typescript from '@rollup/plugin-typescript';
-import {terser} from 'rollup-plugin-terser';
-import commonjs from '@rollup/plugin-commonjs';
-import postcss from 'rollup-plugin-postcss';
-import AtImport from 'postcss-import';
-
-const component = {
-  input:   'ts/Component.ts',
-  output:  {
-    dir:            'dist',
-    format:         'iife',
-    entryFileNames: 'zn-max-width.js',
-    sourcemap:      false,
-  },
-  plugins: [
-    resolve({browser: true, preferBuiltins: false}),
-    typescript(),
-    commonjs(),
-    postcss(
-      {
-        plugins:   [AtImport()],
-        inject:    false,
-        extract:   false,
-        minimize:  true,
-        sourceMap: false,
-      }),
-    terser(),
-  ],
-};
-
-export default [component];

package/components/MaxWidth/scss/Styles.scss

@@ -1,13 +0,0 @@
-:root {
-  --max-width: 1024;
-}
-
-:host {
-  display: flex;
-  justify-content: center;
-}
-
-.container {
-  width: 100%;
-  max-width: calc(var(--max-width) + 0px);
-}

package/components/MaxWidth/ts/Component.ts

@@ -1,27 +0,0 @@
-import {html, LitElement, unsafeCSS} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
-// @ts-ignore
-import styles from '../scss/Styles.scss';
-
-@customElement('zn-max-width')
-export class ZincMaxWidth extends LitElement {
-    static styles = unsafeCSS(styles);
-
-    @property({reflect: true})
-    width = 1024
-
-    attributeChangedCallback(name: string, _old: string | null, value: string | null) {
-        super.attributeChangedCallback(name, _old, value);
-        if (Number(value) < 1) {
-            this.width = Number(_old)
-        }
-        this.style.setProperty('--max-width', this.width + "px")
-    }
-
-    render() {
-        return html`
-          <div class="container">
-            <slot></slot>
-          </div>`;
-    }
-}

package/components/MaxWidth/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES6",
-    "experimentalDecorators": true,
-    "moduleResolution": "Node"
-  }
-}

package/components/roadmap.md

@@ -1,4 +0,0 @@
-- Progress
-- Rating
-- Loading
-- 

package/layout/components/Columns/demo/demo.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Zinc-Blank Demo</title>
-</head>
-<body>
-
-<zn-cols>
-  <div slot="col-1">Col 1</div>
-  <div slot="col-2">Col 2</div>
-  <div slot="col-3">Col 3</div>
-</zn-cols>
-<script src="../../dist/zn-layout.js" type="text/javascript"></script>
-</body>
-</html>

package/layout/components/Columns/ts/Component.ts

@@ -1,59 +0,0 @@
-import {html, LitElement, unsafeCSS} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
-// @ts-ignore
-import styles from '../scss/Styles.scss';
-// @ts-ignore
-import layoutStyles from '../../../scss/layout.scss';
-
-@customElement('zn-cols')
-export class ZincColumns extends LitElement {
-    static get styles() {
-        return [unsafeCSS(layoutStyles), unsafeCSS(styles)];
-    }
-
-    @property()
-    layout = "2,1"
-
-    render() {
-        switch (this.layout) {
-            case "2,1":
-                return html`
-                  <div
-                    class="grid grid-cols-1 gap-6 p-3 sm:p-6 lg:grid-flow-col-dense lg:grid-cols-3">
-                    <div class="lg:col-start-1 lg:col-span-2">
-                      <slot name="col1"></slot>
-                    </div>
-                    <div class="lg:col-start-3 lg:col-span-1">
-                      <slot name="col2"></slot>
-                    </div>
-                  </div>
-                `;
-            case "1,2":
-                return html`
-                  <div
-                    class="grid grid-cols-1 gap-6 p-3 sm:p-6 lg:grid-flow-col-dense lg:grid-cols-3">
-                    <div class="lg:col-start-1 lg:col-span-1">
-                      <slot name="col1"></slot>
-                    </div>
-                    <div class="lg:col-start-2 lg:col-span-2">
-                      <slot name="col2"></slot>
-                    </div>
-                  </div>
-                `;
-            case "1,1,1":
-                return html`
-                  <div
-                    class="grid grid-cols-1 gap-6 p-3 sm:p-6 lg:grid-flow-col-dense lg:grid-cols-3">
-                    <div class="lg:col-start-1 lg:col-span-1">
-                      <slot name="col1"></slot>
-                    </div>
-                    <div class="lg:col-start-2 lg:col-span-1">
-                      <slot name="col2"></slot>
-                    </div>
-                    <div class="lg:col-start-3 lg:col-span-1">
-                      <slot name="col3"></slot>
-                    </div>
-                  </div>`;
-        }
-    }
-}

package/layout/demo/index.html

@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Zinc-Layout Demo</title>
-  <link rel="stylesheet" href="../dist/zn-layout.css"/>
-  <script src="../dist/zn-layout.js" type="text/javascript"></script>
-</head>
-<body>
-<app-container>
-  <zn-cols>
-    <div slot="col1">Col 1</div>
-    <div slot="col2">Col 2</div>
-  </zn-cols>
-  <zn-cols layout="1,2">
-    <div slot="col1">Col 1</div>
-    <div slot="col2">Col 2</div>
-  </zn-cols>
-  <zn-cols layout="1,1,1">
-    <div slot="col1">Col 1</div>
-    <div slot="col2">Col 2</div>
-    <div slot="col3">Col 3</div>
-  </zn-cols>
-</app-container>
-</body>
-</html>