@descope/web-components-ui 0.0.1

package/src/components/descope-button/ButtonClass.js

@@ -0,0 +1,163 @@
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  componentNameValidationMixin,
+} from '../../mixins';
+import { IconClass } from '../descope-icon/IconClass';
+import { clickableMixin } from './clickableMixin';
+
+export const componentName = getComponentName('button');
+
+const resetStyles = `
+	:host {
+		display: inline-block;
+		box-sizing: border-box;
+	}
+	vaadin-button::before,
+	vaadin-button::after {
+		opacity: 0;
+	}
+	vaadin-button {
+		margin: 0;
+		min-width: 0;
+		width: 100%;
+		height: auto;
+		box-shadow: none;
+	}
+	vaadin-button::part(label) {
+		padding: 0;
+    width: 100%;
+	}
+	vaadin-button::part(prefix) {
+		margin-left: 0;
+		margin-right: 0;
+	}
+`;
+
+const iconStyles = `
+	vaadin-button::part(prefix),
+	vaadin-button::part(label) {
+		display: flex;
+		align-items: center;
+	}
+`;
+
+const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
+
+const { host, label, slottedIcon } = {
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  slottedIcon: { selector: () => '::slotted(descope-icon)' },
+};
+
+let loadingIndicatorStyles;
+
+export const ButtonClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { property: 'width' },
+      hostHeight: { property: 'height' },
+      hostDirection: { ...host, property: 'direction' },
+      fontSize: {},
+      fontFamily: {},
+
+      cursor: {},
+      backgroundColor: {},
+
+      outlineOffset: {},
+      outlineColor: {},
+      outlineStyle: {},
+      outlineWidth: {},
+
+      borderRadius: {},
+      borderColor: {},
+      borderStyle: {},
+      borderWidth: {},
+
+      verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
+      horizontalPadding: [
+        { property: 'padding-right', fallback: '0.875em' },
+        { property: 'padding-left', fallback: '0.875em' },
+      ],
+
+      labelTextColor: { property: 'color' },
+      iconColor: {
+        selector: () => `::slotted(*)`,
+        property: IconClass.cssVarList.fill,
+      },
+      labelTextDecoration: { ...label, property: 'text-decoration' },
+      labelSpacing: { ...label, property: 'gap' },
+      textAlign: { ...label, property: 'justify-content', fallback: 'center' },
+
+      iconSize: [
+        { ...slottedIcon, property: 'width' },
+        { ...slottedIcon, property: 'height' },
+      ],
+    },
+  }),
+  clickableMixin,
+  draggableMixin,
+  componentNameValidationMixin
+)(
+  createProxy({
+    slots: ['', 'prefix', 'label', 'suffix'],
+    wrappedEleName: 'vaadin-button',
+    style: () => `
+			${resetStyles}
+			${iconStyles}
+			${loadingIndicatorStyles}
+			${editorOverrides}
+			:host {
+				padding: calc(var(${ButtonClass.cssVarList.outlineWidth}) + var(${ButtonClass.cssVarList.outlineOffset}));
+			}
+      :host([full-width="true"]) {
+        width: var(${ButtonClass.cssVarList.hostWidth});
+      }
+			vaadin-button {
+				height: calc(var(${ButtonClass.cssVarList.hostHeight}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
+			}
+			[square="true"]:not([full-width="true"]) {
+				width: calc(var(${ButtonClass.cssVarList.hostWidth}) - var(${ButtonClass.cssVarList.outlineWidth}) - var(${ButtonClass.cssVarList.outlineOffset}));
+        padding: 0;
+			}
+		`,
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
+);
+
+const { color, fontSize } = ButtonClass.cssVarList;
+loadingIndicatorStyles = `
+	@keyframes spin {
+		0% { -webkit-transform: rotate(0deg); }
+		100% { -webkit-transform: rotate(360deg); }
+	}
+	:host([loading="true"]) ::before {
+		animation: spin 2s linear infinite;
+		position: absolute;
+		content: '';
+		z-index: 1;
+		box-sizing: border-box;
+		border-radius: 50%;
+		border-bottom-color: transparent;
+		border-left-color: transparent;
+		border-style: solid;
+		color: var(${color});
+		top: calc(50% - (var(${fontSize}) / 2));
+		left: calc(50% - (var(${fontSize}) / 2));
+		border-width: calc(var(${fontSize}) / 10);
+		width: var(${fontSize});
+		height: var(${fontSize});
+	}
+	:host([disabled="true"]),
+	:host([loading="true"]) {
+		pointer-events: none;
+	}
+	:host([loading="true"])::part(prefix),
+	:host([loading="true"])::part(label) {
+		visibility: hidden;
+	}
+`;

package/src/components/descope-button/clickableMixin.js

@@ -0,0 +1,10 @@
+export const clickableMixin = (superclass) =>
+  class ClickableMixinClass extends superclass {
+    get isLoading() {
+      return this.getAttribute('loading') === 'true';
+    }
+
+    click() {
+      this.isLoading || super.click();
+    }
+  };

package/src/components/descope-button/index.js

@@ -0,0 +1,6 @@
+import '@vaadin/button';
+import { componentName, ButtonClass } from './ButtonClass';
+
+customElements.define(componentName, ButtonClass);
+
+export { ButtonClass };

package/src/components/descope-code-snippet/CodeSnippetClass.js

@@ -0,0 +1,238 @@
+import hljs from 'highlight.js';
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { compose } from '../../helpers';
+import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { decode, tpl } from './helpers';
+
+export const componentName = getComponentName('code-snippet');
+
+class CodeSnippet extends createBaseClass({ componentName, baseSelector: ':host > code' }) {
+  static get observedAttributes() {
+    return ['lang', 'inline'];
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <style>
+      :host {
+        display: inline-block;
+        width: 100%;
+      }
+      code {
+        display: block;
+        width: 100%;
+        min-height: 1em;
+        overflow-x: scroll;
+        overflow-y: scroll;
+      }
+      pre {
+        margin: 0;
+      }
+    </style>
+    <code class="hljs"></code>
+    `;
+  }
+
+  init() {
+    super.init?.();
+
+    this.lang = this.getAttribute('lang');
+    this.isInline = this.getAttribute('inline') === 'true';
+
+    observeChildren(this, this.#renderSnippet.bind(this));
+  }
+
+  get contentNode() {
+    return this.shadowRoot.querySelector(this.baseSelector);
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (oldValue !== newValue) {
+      if (attrName === 'inline') {
+        this.isInline = newValue;
+      }
+
+      if (attrName === 'lang') {
+        this.lang = newValue;
+      }
+
+      this.#renderSnippet();
+    }
+  }
+
+  #renderSnippet() {
+    const sanitized = decode(this.textContent);
+    const language = this.lang;
+
+    if (!language) {
+      this.contentNode.textContent = sanitized;
+      return;
+    }
+
+    const { value: highlighted } = hljs.highlight(sanitized, { language });
+
+    this.contentNode.innerHTML = tpl(highlighted, this.isInline);
+  }
+}
+
+const {
+  root,
+  docTag,
+  keyword,
+  metaKeyword,
+  templateTag,
+  templateVariable,
+  type,
+  variableLanguage,
+  title,
+  titleClass,
+  titleClassInherited,
+  titleFunction,
+  attr,
+  attribute,
+  literal,
+  meta,
+  number,
+  operator,
+  variable,
+  selectorAttr,
+  selectorClass,
+  selectorId,
+  regexp,
+  string,
+  metaString,
+  builtIn,
+  symbol,
+  comment,
+  code,
+  formula,
+  name,
+  quote,
+  selectorTag,
+  selectorPseudo,
+  subst,
+  section,
+  bullet,
+  emphasis,
+  strong,
+  addition,
+  deletion,
+  charEscape,
+  link,
+  params,
+  property,
+  punctuation,
+  tag,
+} = {
+  root: { selector: () => '.hljs' },
+  docTag: { selector: () => '.hljs-doctag' },
+  keyword: { selector: () => '.hljs-keyword' },
+  metaKeyword: { selector: () => '.hljs-meta .hljs-keyword' },
+  templateTag: { selector: () => '.hljs-template-tag' },
+  templateVariable: { selector: () => '.hljs-template-variable' },
+  type: { selector: () => '.hljs-type' },
+  variableLanguage: { selector: () => '.hljs-variable.language' },
+  title: { selector: () => '.hljs-title' },
+  titleClass: { selector: () => '.hljs-title.class_' },
+  titleClassInherited: { selector: () => '.hljs-title.class_.inherited__' },
+  titleFunction: { selector: () => '.hljs-title.function_' },
+  attr: { selector: () => '.hljs-attr' },
+  attribute: { selector: () => '.hljs-attribute' },
+  literal: { selector: () => '.hljs-literal' },
+  meta: { selector: () => '.hljs-meta' },
+  number: { selector: () => '.hljs-number' },
+  operator: { selector: () => '.hljs-operator' },
+  variable: { selector: () => '.hljs-variable' },
+  selectorAttr: { selector: () => '.hljs-selector-attr' },
+  selectorClass: { selector: () => '.hljs-selector-class' },
+  selectorId: { selector: () => '.hljs-selector-id' },
+  regexp: { selector: () => '.hljs-regexp' },
+  string: { selector: () => '.hljs-string' },
+  metaString: { selector: () => '.hljs-meta .hljs-string' },
+  builtIn: { selector: () => '.hljs-built_in' },
+  symbol: { selector: () => '.hljs-symbol' },
+  comment: { selector: () => '.hljs-comment' },
+  code: { selector: () => '.hljs-code' },
+  formula: { selector: () => '.hljs-formula' },
+  name: { selector: () => '.hljs-name' },
+  quote: { selector: () => '.hljs-quote' },
+  selectorTag: { selector: () => '.hljs-selector-tag' },
+  selectorPseudo: { selector: () => '.hljs-selector-pseudo' },
+  subst: { selector: () => '.hljs-subst' },
+  section: { selector: () => '.hljs-section' },
+  bullet: { selector: () => '.hljs-bullet' },
+  emphasis: { selector: () => '.hljs-emphasis' },
+  strong: { selector: () => '.hljs-strong' },
+  addition: { selector: () => '.hljs-addition' },
+  deletion: { selector: () => '.hljs-deletion' },
+  charEscape: { selector: () => '.hljs-char.escape' },
+  link: { selector: () => '.hljs-link' },
+  params: { selector: () => '.hljs-params' },
+  property: { selector: () => '.hljs-property' },
+  punctuation: { selector: () => '.hljs-punctuation' },
+  tag: { selector: () => '.hljs-tag' },
+};
+
+export const CodeSnippetClass = compose(
+  createStyleMixin({
+    mappings: {
+      rootBgColor: { ...root, property: 'background-color' },
+      rootTextColor: { ...root, property: 'color' },
+      docTagTextColor: { ...docTag, property: 'color' },
+      keywordTextColor: { ...keyword, property: 'color' },
+      metaKeywordTextColor: { ...metaKeyword, property: 'color' },
+      templateTagTextColor: { ...templateTag, property: 'color' },
+      templateVariableTextColor: { ...templateVariable, property: 'color' },
+      typeTextColor: { ...type, property: 'color' },
+      variableLanguageTextColor: { ...variableLanguage, property: 'color' },
+      titleTextColor: { ...title, property: 'color' },
+      titleClassTextColor: { ...titleClass, property: 'color' },
+      titleClassInheritedTextColor: { ...titleClassInherited, property: 'color' },
+      titleFunctionTextColor: { ...titleFunction, property: 'color' },
+      attrTextColor: { ...attr, property: 'color' },
+      attributeTextColor: { ...attribute, property: 'color' },
+      literalTextColor: { ...literal, property: 'color' },
+      metaTextColor: { ...meta, property: 'color' },
+      numberTextColor: { ...number, property: 'color' },
+      operatorTextColor: { ...operator, property: 'color' },
+      variableTextColor: { ...variable, property: 'color' },
+      selectorAttrTextColor: { ...selectorAttr, property: 'color' },
+      selectorClassTextColor: { ...selectorClass, property: 'color' },
+      selectorIdTextColor: { ...selectorId, property: 'color' },
+      regexpTextColor: { ...regexp, property: 'color' },
+      stringTextColor: { ...string, property: 'color' },
+      metaStringTextColor: { ...metaString, property: 'color' },
+      builtInTextColor: { ...builtIn, property: 'color' },
+      symbolTextColor: { ...symbol, property: 'color' },
+      commentTextColor: { ...comment, property: 'color' },
+      codeTextColor: { ...code, property: 'color' },
+      formulaTextColor: { ...formula, property: 'color' },
+      nameTextColor: { ...name, property: 'color' },
+      quoteTextColor: { ...quote, property: 'color' },
+      selectorTagTextColor: { ...selectorTag, property: 'color' },
+      selectorPseudoTextColor: { ...selectorPseudo, property: 'color' },
+      substTextColor: { ...subst, property: 'color' },
+      sectionTextColor: { ...section, property: 'color' },
+      bulletTextColor: { ...bullet, property: 'color' },
+      emphasisTextColor: { ...emphasis, property: 'color' },
+      strongTextColor: { ...strong, property: 'color' },
+      additionTextColor: { ...addition, property: 'color' },
+      additionBgColor: { ...addition, property: 'background-color' },
+      deletionTextColor: { ...deletion, property: 'color' },
+      deletionBgColor: { ...deletion, property: 'background-color' },
+      charEscapeTextColor: { ...charEscape, property: 'color' },
+      linkTextColor: { ...link, property: 'color' },
+      paramsTextColor: { ...params, property: 'color' },
+      propertyTextColor: { ...property, property: 'color' },
+      punctuationTextColor: { ...punctuation, property: 'color' },
+      tagTextColor: { ...tag, property: 'color' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(CodeSnippet);

package/src/components/descope-code-snippet/helpers.js

@@ -0,0 +1,9 @@
+export const decode = (input) => {
+  const txt = document.createElement('textarea');
+  txt.innerHTML = input;
+  return txt.value;
+};
+
+export const tpl = (input, inline) => {
+  return inline ? input : `<pre>${input}</pre>`;
+};

package/src/components/descope-code-snippet/index.js

@@ -0,0 +1,5 @@
+import { componentName, CodeSnippetClass } from './CodeSnippetClass';
+
+customElements.define(componentName, CodeSnippetClass);
+
+export { CodeSnippetClass };