@spectric/ui 0.0.4 → 0.0.6

package/dist/style.css

@@ -0,0 +1 @@
+spectric-input{--input-color: var(--spectric-input-color, #f4f4f4);--border-radius: var(--spectric-border-radius, .4em);--input-bottom: var(--spectric-input-bottom, var(--spectric-button-primary, #a8a8a8));--input-bottom-focused: var(--primary, #1ea7fd);--text-on-color: var(--spectric-text-on-color, #ffffff);--text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);--text-placeholder: rgba(22, 22, 22, .4);--text-primary: var(--spectric-text-primary, #161616);--text-secondary: var(--spectric-text-secondary, #525252)}spectric-input .inputWrapper{color:var(--text-secondary)}spectric-input .inputWrapper input{box-sizing:border-box;margin:0;vertical-align:baseline;font-size:.875rem;font-weight:400;line-height:1.28572;letter-spacing:.16px;outline:transparent solid 2px;outline-offset:-2px;border:none;padding:0 1rem;background-color:var(--input-color);color:var(--text-primary, #161616);font-family:inherit;inline-size:100%;block-size:2.5rem}spectric-input .inputWrapper .inputContainer:active:after,spectric-input .inputContainer:focus-within:after{border-bottom-color:var(--input-bottom-focused);width:calc(100% - 5px);transition:width .4s ease-in-out}spectric-input .inputWrapper input:read-only{background-color:transparent;border-bottom-color:var(--border-disabled)}spectric-input .inputContainer{position:relative;border-radius:var(--border-radius);overflow:hidden}spectric-input .inputContainer:after{content:"";width:0px;transition:background-color .4s cubic-bezier(.2,0,.38,.9),border-bottom-color .4s cubic-bezier(.2,0,.38,.9);border-bottom-color:var(--input-bottom);border-bottom-style:solid;border-bottom-width:1px;position:absolute;left:2.5px;bottom:0}spectric-input #helper-text{height:18px}spectric-input spectric-button{position:absolute;right:4px;bottom:3px}spectric-query{font-family:monospace}spectric-query .autocomplete{color:var(--spectric-text-primary, #161616);border-radius:0em 0em var(--spectric-border-radius, .4em) var(--spectric-border-radius, .4em);background-color:var(--spectric-background, #ffffff);border:1px solid var(--spectric-background-hover, rgba(141, 141, 141, .12));max-height:300px;border-top:0px;margin:-18px 0 0;position:fixed;top:anchor(bottom);justify-self:anchor-center;text-align:center}spectric-query .autocomplete .optiontype{float:left;max-width:10px}spectric-query .autocomplete .label{position:absolute;right:0}spectric-query .autocomplete .option.active,spectric-query .autocomplete .option:hover{background-color:var(--spectric-background-hover, rgba(141, 141, 141, .12));border-bottom:1px solid var(--primary, #1ea7fd)}spectric-query .autocomplete .option{border-bottom:1px solid transparent;padding:8px}.query-bar-date-quick-select{display:flex;justify-content:space-evenly}

package/dist/utils/debounce.d.ts

@@ -0,0 +1,2 @@
+export declare const debounce: (func: Function, wait: number) => (...args: any[]) => void;
+export declare const debounceAnimation: (func: Function) => (...args: any[]) => void;

package/dist/utils/spread.d.ts

@@ -0,0 +1,32 @@
+import { Part } from 'lit';
+import { AsyncDirective } from 'lit/async-directive.js';
+/**
+ * Usage:
+ *    import { html, render } from 'lit';
+ *    import { spreadProps } from '@open-wc/lit-helpers';
+ *
+ *    render(
+ *      html`
+ *        <div
+ *          ${spreadProps({
+ *              prop1: 'prop1',
+ *              prop2: ['Prop', '2'],
+ *              prop3: {
+ *                  prop: 3,
+ *              }
+ *          })}
+ *        ></div>
+ *      `,
+ *      document.body,
+ *    );
+ */
+export declare class SpreadPropsDirective extends AsyncDirective {
+    host: EventTarget | object | Element;
+    element: Element;
+    prevData: any;
+    render(_spreadData: any): symbol;
+    update(part: Part, [spreadData]: Parameters<this['render']>): void;
+    apply(data: any): void;
+    groom(data: any): void;
+}
+export declare const spreadProps: (_spreadData: any) => import('lit-html/directive.js').DirectiveResult<typeof SpreadPropsDirective>;

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@spectric/ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
+  "files": [
+    "dist/*",
+    "src/*",
+    "README.MD"
+  ],
   "scripts": {
     "build": "tsc && vite build",
     "start": "storybook dev -p 6006",

package/src/components/query_bar/QueryBar.ts

@@ -52,6 +52,11 @@ export interface IQueryProps {
    * Callback that will provide values for specific fields
    */
   getValuesForField: (field: string, text: string) => Promise<string[]>;
+
+  /**
+   * Input placeholder
+   */
+  placeholder: string;
 }
 type LabelValue = {
   label?: string;
@@ -85,6 +90,8 @@ const DateOperators: Record<string, LabelValue> = Object.fromEntries(Object.entr
 @customElement('spectric-query')
 export class SpectricQuery extends LitElement implements IQueryProps {
   private uuid: string;
+  @property({ type: String, reflect: true })
+  placeholder: string = "";
   constructor() {
     super()
     this.uuid = crypto.randomUUID()
@@ -226,6 +233,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
                     }}>${v}</a>`)}
                     </div>
                   <spectric-input variant="datetime-local" @change=${(e: any) => {
+
                         if (!e.target) {
                           return
                         }
@@ -265,8 +273,13 @@ export class SpectricQuery extends LitElement implements IQueryProps {
     }
     this.completions = completions
     if (this.completions.length && this._autocomplete) {
-      let { width } = this._input.getBoundingClientRect();
+      let { width, left, bottom } = this._input.getBoundingClientRect();
       this._autocomplete.showPopover();
+      //Older firefox doesn't support anchor positions using css properties so manually position here
+      if (!("anchorName" in document.documentElement.style)) {
+        this._autocomplete.style.left = `${left + 3.75}px`
+        this._autocomplete.style.top = `${bottom}px`
+      }
       this._autocomplete.style.width = `${width - 15}px`;
     }
   }
@@ -340,7 +353,7 @@ export class SpectricQuery extends LitElement implements IQueryProps {
   }
   protected render() {
     return html`
-      <spectric-input style=${`anchor-name:--${this.uuid};`} autocomplete="off" @input=${this._parseQuery} @keydown=${this._handleArrows}></spectric-input>
+      <spectric-input .placeholder=${this.placeholder} style=${`anchor-name:--${this.uuid};`} autocomplete="off" @input=${this._parseQuery} @keydown=${this._handleArrows} @change=${(e: Event) => e.stopPropagation()}></spectric-input>
       <div class="autocomplete" popover style=${`position-anchor: --${this.uuid};`}>
       ${this.completions.map((option: Completion, index) =>
       html`<div @click=${() => {

package/.gitlab-ci.yml

@@ -1,28 +0,0 @@
-stages:         
-  - publish
-  - pages
-
-publish:      
-  image: node:20.15.1
-  stage: publish
-  only:
-    - tags
-  script:
-    - npm install
-    - echo '//${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=${CI_JOB_TOKEN}'>.npmrc
-    - echo '//${CI_SERVER_HOST}/api/v4/groups/${CI_PROJECT_NAMESPACE_ID}/-/packages/npm/:_authToken=<token>'>>.npmrc
-    - echo '//${CI_SERVER_HOST}/api/v4/packages/npm/:_authToken=${CI_JOB_TOKEN}'>>.npmrc
-    - npm run build
-    - npm publish
-
-pages:
-  image: node:20.15.1
-  stage: pages
-  only:
-    - tags
-  script:
-    - npm install
-    - npm run storybook:build
-  artifacts:
-    paths:
-      - public

package/.nvmrc

@@ -1 +0,0 @@
-20.15.1

package/.storybook/analyze.sh

@@ -1,4 +0,0 @@
-#!/bin/bash
-npx web-component-analyzer src --outFiles .storybook/build/custom-elements-next.json
-cmp -s  .storybook/build/custom-elements.json .storybook/build/custom-elements-next.json || mv .storybook/build/custom-elements-next.json .storybook/build/custom-elements.json
-npx web-component-analyzer src -f vscode --outFiles dist/vscode-custom-elements.json

package/.storybook/main.ts

@@ -1,55 +0,0 @@
-import type { StorybookConfig } from "@storybook/web-components-vite";
-import run from "vite-plugin-run";
-import execa from 'execa';
-import { version } from '../package.json';
-const config: StorybookConfig = {
-  managerHead: (headHtmlContent) => {
-    console.log(headHtmlContent)
-    const style = `
-    <style>
-    .sidebar-header {
-        margin-bottom: 36px;
-        position: relative;
-    }
-    .sidebar-header div:first-of-type {
-        display: none;
-    }
-    .sidebar-header::before {
-        content: 'Spectric UI ${version}';
-        font-size: 20px;
-        color: #5C6870;
-        font-weight: normal;
-    }
-    </style>
-    `;
-    return `${headHtmlContent}\n${style}`;
-  },
-  stories: [{
-    // 👇 Sets the directory containing your stories
-    directory: '../src/stories/',
-    // 👇 Storybook will load all files that match this glob
-    files: '*.stories.*',
-    // 👇 Used when generating automatic titles for your stories.
-    titlePrefix: 'Spectric UI Components',
-  }],
-  addons: ["@storybook/addon-essentials", "@chromatic-com/storybook"],
-  framework: {
-    name: "@storybook/web-components-vite",
-    options: {
-    },
-  },
-  async viteFinal(config, options) {
-    //analyze webcomponent and if the json output is different move it into place this will cause storybook to reload the fresh info
-    config.plugins?.push(
-      run(
-        {
-          silent: false,
-          name: 'Create webcomponent json',
-          run: ['.storybook/analyze.sh'],
-          pattern: ['**/*.ts'],
-        },
-      ))
-    return config;
-  },
-};
-export default config;

package/.storybook/preview.ts

@@ -1,42 +0,0 @@
-import type { Preview } from "@storybook/web-components";
-import { addons } from '@storybook/manager-api';
-import { setCustomElementsManifest } from '@storybook/web-components';
-import customElements from './build/custom-elements.json';
-customElements.tags.forEach(tag => {
-  if (tag.properties) {
-    let stylesindex = tag.properties.findIndex(e => e.name == "styles")
-    if (stylesindex != -1) {
-      tag.properties.splice(stylesindex, 1)
-    }
-  }
-})
-setCustomElementsManifest(customElements);
-
-import { create } from '@storybook/theming/create';
-import { version } from '../package.json';
-
-const theme = create({
-  base: "light",
-  // Typography
-  fontBase: "'Helvetica Neue', Arial, sans-serif",
-  fontCode: "Menlo, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace",
-  brandTitle: `Spectric UI ${version}`,
-  brandImage: "https://static.wixstatic.com/media/bb8de2_d075320863814eeb9c954fcc57ce2822%7Emv2.png/v1/fill/w_192%2Ch_192%2Clg_1%2Cusm_0.66_1.00_0.01/bb8de2_d075320863814eeb9c954fcc57ce2822%7Emv2.png",
-  brandUrl: 'https://gitlab.spectric.com/web/spectric-ui',
-});
-addons.setConfig({
-  theme
-});
-const preview: Preview = {
-  parameters: {
-    docs: { canvas: { layout: "padded" }, theme: theme },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/.vscode/extensions.json

@@ -1,5 +0,0 @@
-{
-    "recommendations": [
-        "runem.lit-plugin"
-    ]
-}

package/.vscode/settings.json

@@ -1,41 +0,0 @@
-{
-    "editor.formatOnSave": true,
-    "javascript.format.enable": true,
-    "typescript.format.enable": true,
-    "javascript.format.insertSpaceAfterCommaDelimiter": true,
-    "javascript.format.insertSpaceAfterConstructor": false,
-    "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
-    "javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": true,
-    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": true,
-    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
-    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
-    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
-    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
-    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
-    "javascript.format.insertSpaceAfterSemicolonInForStatements": true,
-    "javascript.format.insertSpaceBeforeAndAfterBinaryOperators": true,
-    "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
-    "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
-    "javascript.format.placeOpenBraceOnNewLineForFunctions": false,
-    "javascript.format.semicolons": "ignore",
-    "typescript.format.indentSwitchCase": true,
-    "typescript.format.insertSpaceAfterCommaDelimiter": true,
-    "typescript.format.insertSpaceAfterConstructor": false,
-    "typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
-    "typescript.format.insertSpaceAfterKeywordsInControlFlowStatements": true,
-    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": true,
-    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
-    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
-    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
-    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
-    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
-    "typescript.format.insertSpaceAfterSemicolonInForStatements": true,
-    "typescript.format.insertSpaceAfterTypeAssertion": false,
-    "typescript.format.insertSpaceBeforeAndAfterBinaryOperators": true,
-    "typescript.format.insertSpaceBeforeFunctionParenthesis": false,
-    "typescript.format.placeOpenBraceOnNewLineForControlBlocks": false,
-    "typescript.format.placeOpenBraceOnNewLineForFunctions": false,
-    "typescript.format.semicolons": "ignore",
-    "typescript.tsserver.enableTracing": false,
-    "typescript.tsserver.log": "off"
-}

package/test/__init__.py

@@ -1,9 +0,0 @@
-from test.elastic import ElasticPersistance
-from typing import Generic,TypeVar,Any
-T = TypeVar("T",callable)
-
-config = {"type":"elastic","host":"elastic"}
-def get_persistance(locator:str,cls:T):
-    if config['type'] == "elastic":
-        return ElasticPersistance[T]({**config,"index":locator},cls)
-    raise ValueError("unknown persistance type")

package/test/elastic.py

@@ -1,9 +0,0 @@
-from test.interface import T, IPersistance
-class ElasticPersistance(IPersistance[T]):
-    def __init__(self,config,cls:T):
-        self.model = cls
-        self.config = config
-    def get_one_by_id(self,id) -> T|None:
-        data = {}
-        return self.model(**data)
-    

package/test/interface.py

@@ -1,16 +0,0 @@
-from typing import Generic,TypeVar,Any
-
-from test import T
-
-class IPersistance(Generic[T]):
-    def __init__(self,config:Any,cls:T):
-        """
-        init function
-        """
-        pass
-    def get_one_by_id(self,id:str) -> T|None:
-        """
-        gets data from database
-        """
-        pass
-

package/tsconfig.json

@@ -1,29 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2021",
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "module": "ESNext",
-    "lib": ["ES2021", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "Bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "sourceMap": true,
-    "declaration": false,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-    },
-  "include": ["src"],
-  "exclude": ["src/stories","**/*test*"],
-  "declaration": true,
-  "pretty":false
-}

package/vite.config.js

@@ -1,34 +0,0 @@
-import path from 'path'
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
-import run from "vite-plugin-run";
-// add dts() to the plugins array
-//plugins: [react(), dts()],
-export default defineConfig({
-  plugins:[dts({ tsconfigPath: './tsconfig.json' }),      run(
-        {
-          silent:false,
-          name: 'Create vscode webcomponent json',
-          run: ['npx', 'web-component-analyzer', 'src', '-f', 'vscode', '--outFiles','dist/custom-elements.json'],
-        },
-      )],
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, 'src'),
-      name: 'Spectric-UI',
-      fileName: (format) => `index.${format}.js`
-    },
-    rollupOptions: {
-      // make sure to externalize deps that shouldn't be bundled
-      // into your library
-      //external: ['vue'],
-      output: {
-        // Provide global variables to use in the UMD build
-        // for externalized deps
-        // globals: {
-        //   vue: 'Vue'
-        // }
-      }
-    }
-  }
-})