@descope/web-components-ui 1.0.35 → 1.0.36

package/src/componentsHelpers/createStyleMixin/index.js

@@ -1,22 +1,58 @@
+import { getCssVarName, kebabCaseJoin } from '../../helpers';
 import { createStyle, createCssVarsList } from './helpers';
 
 export const createStyleMixin = ({  mappings = {} }) => (superclass) => {
+  const styleAttributes = Object.keys(mappings).map(key => kebabCaseJoin('st', key))
   return class CustomStyleMixinClass extends superclass {
+    static get observedAttributes() {
+      const superAttrs = superclass.observedAttributes || []
+      return [...superAttrs, ...styleAttributes]
+    }
+
     static get cssVarList() {
       return createCssVarsList(superclass.componentName, mappings)
     }
-  
+
+    #styleEle = null;
+
     constructor() {
       super();
 
       this.#createComponentStyle()
+      this.#createAttrOverrideStyle()
+    }
+
+    #createAttrOverrideStyle() {
+      this.#styleEle = document.createElement('style');
+      this.#styleEle.id = 'style-mixin-overrides'
+
+      this.#styleEle.innerText = '* {}'
+      this.shadowRoot.prepend(this.#styleEle);
+    }
+
+    #updateAttrOverrideStyle(attrName, value) {
+      const style = this.#styleEle.sheet.cssRules[0].style;
+      const varName = getCssVarName(superclass.componentName, attrName.replace(/^st-/, ''))
+
+      if (value)
+        style.setProperty(varName, value)
+      else
+        style.removeProperty(varName)
     }
 
     #createComponentStyle() {
       const themeStyle = document.createElement('style');
-      themeStyle.id = 'style-mixin'
-      themeStyle.innerHTML = createStyle(this.componentName, this.wrappedComponentName, mappings)
+      themeStyle.id = 'style-mixin-component'
+      themeStyle.innerHTML = createStyle(superclass.componentName, baseSelector, mappings)
       this.shadowRoot.prepend(themeStyle);
     }
+
+    attributeChangedCallback(attrName, oldValue, newValue) {
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+      if (styleAttributes.includes(attrName)) {
+        this.#updateAttrOverrideStyle(attrName, newValue)
+      }
+    }
   }
 }

package/src/componentsHelpers/draggableMixin.js

@@ -12,7 +12,7 @@ export const draggableMixin = (superclass) =>
       super();
 
       this.#styleEle = document.createElement('style');
-      this.#styleEle.innerText = `${this.wrappedComponentName} { cursor: inherit }`;
+      this.#styleEle.innerText = `${this.baseSelector} { cursor: inherit }`;
     }
 
     #handleDraggableStyle(isDraggable) {
@@ -24,7 +24,7 @@ export const draggableMixin = (superclass) =>
     }
 
     attributeChangedCallback(attrName, oldValue, newValue) {
-      super.attributeChangedCallback(attrName, oldValue, newValue);
+      super.attributeChangedCallback?.(attrName, oldValue, newValue);
       if (attrName === 'draggable') {
         this.#handleDraggableStyle(newValue === 'true')
       }

package/src/componentsHelpers/index.js

@@ -9,3 +9,4 @@ export { createStyleMixin } from './createStyleMixin'
 export { draggableMixin } from './draggableMixin'
 export { createProxy } from './createProxy'
 export { inputMixin } from './inputMixin'
+export { componentNameValidationMixin } from './componentNameValidationMixin'

package/src/componentsHelpers/inputMixin.js

@@ -22,7 +22,7 @@ export const inputMixin = (superclass) =>
     }
 
     connectedCallback() {
-      super.connectedCallback();
+      super.connectedCallback?.();
 
       // vaadin does not expose all those validation attributes so we need to take it from the input
       // https://github.com/vaadin/web-components/issues/1177

package/src/helpers.js

@@ -5,4 +5,4 @@ export const kebabCase = str => str
 
 export const kebabCaseJoin = (...args) => kebabCase(args.join('-'))
 
-export const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`
+export const getCssVarName = (...args) => `--${kebabCaseJoin(...args.filter(arg => !!arg))}`

package/src/index.umd.js

@@ -1,6 +1,9 @@
-const components = import.meta.webpackContext('./components', { recursive: true, regExp: /.js$/, mode: 'lazy', chunkName: '[request]', prefetch: true });
+const components = import.meta.webpackContext('./components', { recursive: true, regExp: /index.js$/, mode: 'lazy', chunkName: '[request]', prefetch: true });
+
+// all components must be in a folder with the component name, and have an index.js file
+// e.g. ./descope-button/index.js
 module.exports = components.keys().reduce((acc, key) => {
-  const componentName = key.replace(/.*?([^\/]+)\.js$/, '$1')
+  const componentName = key.replace(/.*?([^\/]+)\/index\.js$/, '$1')
   acc[componentName] = () => components(key)
 
   return acc;

package/src/theme/components/button.js

@@ -1,7 +1,9 @@
 import globals from "../globals";
-import { getThemeRefs } from "../../themeHelpers";
+import { getThemeRefs, createHelperVars } from "../../themeHelpers";
+import Button, { componentName } from "../../components/descope-button/Button";
 
 const globalRefs = getThemeRefs(globals);
+const vars = Button.cssVarList
 
 const mode = {
 	primary: {
@@ -16,69 +18,68 @@ const mode = {
 	surface: globalRefs.colors.surface,
 }
 
-const colorRef = getThemeRefs(mode.primary, 'button')
+const [helperTheme, helperRefs] = createHelperVars({ mode }, componentName)
 
 const button = {
-	borderRadius: globalRefs.radius.lg,
-	cursor: 'pointer',
-	
+	...helperTheme,
+	[vars.borderRadius]: globalRefs.radius.lg,
+	[vars.cursor]: 'pointer',
+
 	size: {
 		xs: {
-			height: '10px',
-			fontSize: '10px',
-			padding: `0 ${globalRefs.spacing.xs}`
+			[vars.height]: '10px',
+			[vars.fontSize]: '10px',
+			[vars.padding]: `0 ${globalRefs.spacing.xs}`
 		},
 		sm: {
-			height: '20px',
-			fontSize: '10px',
-			padding: `0 ${globalRefs.spacing.sm}`
+			[vars.height]: '20px',
+			[vars.fontSize]: '10px',
+			[vars.padding]: `0 ${globalRefs.spacing.sm}`
 		},
 		md: {
-			height: '30px',
-			fontSize: '14px',
-			padding: `0 ${globalRefs.spacing.md}`
+			[vars.height]: '30px',
+			[vars.fontSize]: '14px',
+			[vars.padding]: `0 ${globalRefs.spacing.md}`
 		},
 		lg: {
-			height: '40px',
-			fontSize: '20px',
-			padding: `0 ${globalRefs.spacing.lg}`
+			[vars.height]: '40px',
+			[vars.fontSize]: '20px',
+			[vars.padding]: `0 ${globalRefs.spacing.lg}`
 		},
 		xl: {
-			height: '50px',
-			fontSize: '25px',
-			padding: `0 ${globalRefs.spacing.xl}`
+			[vars.height]: '50px',
+			[vars.fontSize]: '25px',
+			[vars.padding]: `0 ${globalRefs.spacing.xl}`
 		},
 	},
 
-	_fullwidth: {
-		width: '100%'
+	_fullWidth: {
+		[vars.width]: '100%'
 	},
 
-	mode,
-
 	variant: {
 		contained: {
-			color: colorRef.contrast,
-			backgroundColor: colorRef.main,
+			[vars.color]: helperRefs.contrast,
+			[vars.backgroundColor]: helperRefs.main,
 			_hover: {
-				backgroundColor: colorRef.dark,
+				[vars.backgroundColor]: helperRefs.dark,
 			},
 		},
 		outline: {
-			color: colorRef.main,
-			borderColor: colorRef.main,
-			borderWidth: '2px',
-			borderStyle: 'solid',
+			[vars.color]: helperRefs.main,
+			[vars.borderColor]: helperRefs.main,
+			[vars.borderWidth]: '2px',
+			[vars.borderStyle]: 'solid',
 			_hover: {
-				color: colorRef.dark,
-				borderColor: colorRef.dark,
+				[vars.color]: helperRefs.dark,
+				[vars.borderColor]: helperRefs.dark,
 				_error: {
-					color: 'red',
+					[vars.color]: 'red',
 				}
 			}
 		},
 		link: {
-			color: colorRef.main,
+			[vars.color]: helperRefs.main,
 		},
 	}
 };

package/src/theme/components/container.js

@@ -0,0 +1,94 @@
+import globals from "../globals";
+import { getThemeRefs, createHelperVars } from "../../themeHelpers";
+import Container from "../../components/descope-container/Container";
+
+const globalRefs = getThemeRefs(globals);
+
+const vars = Container.cssVarList
+
+const verticalAlignment = {
+	start: { verticalAlignment: 'start' },
+	center: { verticalAlignment: 'center' },
+	end: { verticalAlignment: 'end' },
+}
+
+const horizontalAlignment = {
+	start: { horizontalAlignment: 'start' },
+	center: { horizontalAlignment: 'center' },
+	end: { horizontalAlignment: 'end' },
+}
+
+const [helperTheme, helperVars, helperRefs] =
+	createHelperVars({ verticalAlignment, horizontalAlignment }, 'container')
+
+const container = {
+	...helperTheme,
+	[vars.display]: 'flex',
+	verticalPadding: {
+		sm: { [vars.verticalPadding]: '5px' },
+		md: { [vars.verticalPadding]: '10px' },
+		lg: { [vars.verticalPadding]: '20px' },
+	},
+	horizontalPadding: {
+		sm: { [vars.horizontalPadding]: '5px' },
+		md: { [vars.horizontalPadding]: '10px' },
+		lg: { [vars.horizontalPadding]: '20px' },
+	},
+	direction: {
+		row: {
+			[vars.flexDirection]: 'row',
+			[vars.alignItems]: helperRefs.verticalAlignment,
+			[vars.justifyContent]: helperRefs.horizontalAlignment,
+			horizontalAlignment: {
+				spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
+			}
+		},
+
+		column: {
+			[vars.flexDirection]: 'column',
+			[vars.alignItems]: helperRefs.horizontalAlignment,
+			[vars.justifyContent]: helperRefs.verticalAlignment,
+			verticalAlignment: {
+				spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
+			}
+		},
+	},
+
+	spaceBetween: {
+		sm: {
+			[vars.gap]: '10px'
+		},
+		md: {
+			[vars.gap]: '20px'
+		},
+		lg: {
+			[vars.gap]: '30px'
+		}
+	},
+
+	shadow: {
+		sm: { 
+			[vars.boxShadow]: `${globalRefs.shadow.size.sm} ${globalRefs.shadow.color}` 
+		},		
+		md: { 
+			[vars.boxShadow]: `${globalRefs.shadow.size.md} ${globalRefs.shadow.color}` 
+		},		
+		lg: { 
+			[vars.boxShadow]: `${globalRefs.shadow.size.lg} ${globalRefs.shadow.color}` 
+		},
+	},
+
+	borderRadius: {
+		sm: { 
+			[vars.borderRadius]: globalRefs.radius.sm
+		},
+		md: { 
+			[vars.borderRadius]: globalRefs.radius.md
+		},
+		lg: { 
+			[vars.borderRadius]: globalRefs.radius.lg
+		},
+	}
+};
+
+export default container;

package/src/theme/components/index.js

@@ -1,7 +1,9 @@
 import button  from './button';
 import textField  from './textField';
+import container  from './container';
 
 export default {
     button,
-    textField
+    textField,
+    container
 }

package/src/theme/components/textField.js

@@ -1,47 +1,50 @@
 import globals from "../globals";
 import { getThemeRefs } from "../../themeHelpers";
+import TextField from '../../components/descope-text-field/TextField';
 
 const globalRefs = getThemeRefs(globals);
 
+const vars = TextField.cssVarList;
+
 const textField = {
-  borderRadius: globalRefs.radius.lg,
-  color: globalRefs.colors.surface.contrast,
-  backgroundColor: globalRefs.colors.surface.light,
-  borderWidth: globalRefs.border.small,
-  borderStyle: 'solid',
-  borderColor: globalRefs.colors.surface.dark,
-  labelColor: globalRefs.colors.surface.contrast,
-  placeholderColor: globalRefs.colors.surface.dark,
+  [vars.borderRadius]: globalRefs.radius.lg,
+  [vars.color]: globalRefs.colors.surface.contrast,
+  [vars.backgroundColor]: globalRefs.colors.surface.light,
+  [vars.borderWidth]: globalRefs.border.small,
+  [vars.borderStyle]: 'solid',
+  [vars.borderColor]: globalRefs.colors.surface.dark,
+  [vars.labelColor]: globalRefs.colors.surface.contrast,
+  [vars.placeholderColor]: globalRefs.colors.surface.dark,
   _invalid: {
-    backgroundColor: globalRefs.colors.error.light,
-    borderColor: globalRefs.colors.error.dark,
+    [vars.backgroundColor]: globalRefs.colors.error.light,
+    [vars.borderColor]: globalRefs.colors.error.dark,
   },
 
   size: {
     sm: {
-      height: '20px',
-      fontSize: '10px',
-      padding: `0 ${globalRefs.spacing.xs}`
+      [vars.height]: '20px',
+      [vars.fontSize]: '10px',
+      [vars.padding]: `0 ${globalRefs.spacing.xs}`
     },
     md: {
-      height: '30px',
-      fontSize: '14px',
-      padding: `0 ${globalRefs.spacing.sm}`
+      [vars.height]: '30px',
+      [vars.fontSize]: '14px',
+      [vars.padding]: `0 ${globalRefs.spacing.sm}`
     },
     lg: {
-      height: '40px',
-      fontSize: '20px',
-      padding: `0 ${globalRefs.spacing.sm}`
+      [vars.height]: '40px',
+      [vars.fontSize]: '20px',
+      [vars.padding]: `0 ${globalRefs.spacing.sm}`
     },
     xl: {
-      height: '50px',
-      fontSize: '25px',
-      padding: `0 ${globalRefs.spacing.md}`
+      [vars.height]: '50px',
+      [vars.fontSize]: '25px',
+      [vars.padding]: `0 ${globalRefs.spacing.md}`
     },
   },
 
-  _fullwidth: {
-    width: '100%'
+  _fullWidth: {
+    [vars.width]: '100%'
   },
 };
 

package/src/theme/globals.js

@@ -53,6 +53,8 @@ const shadow = {
 	color: colors.primary.main,
 	size: {
 		sm: `0 0 10px`,
+		md: `0 0 20px`,
+		lg: `0 0 30px`,
 	},
 };
 

package/src/theme/index.js

@@ -1,4 +1,4 @@
 import globals from "./globals"
 import components from './components';
 
-export default { globals, components }
+export default { globals, components }

package/src/themeHelpers/index.js

@@ -1,7 +1,7 @@
 import merge from "lodash.merge";
 import set from "lodash.set";
 import { DESCOPE_PREFIX } from "../constants";
-import { getCssVarName } from "../helpers";
+import { getCssVarName, kebabCase } from "../helpers";
 import { getComponentName } from "../componentsHelpers";
 
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path)
@@ -43,7 +43,7 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 		// starts with underscore -> attribute selector
 
 		const attrsSelector = restPath.reduce((acc, section, idx) => {
-			if (section.startsWith('_')) return acc += `[${section.replace(/^_/, '')}]`;
+			if (section.startsWith('_')) return acc += `[${kebabCase(section.replace(/^_/, ''))}]`;
 
 			const nextSection = restPath[idx + 1];
 
@@ -52,14 +52,14 @@ const componentsThemeToStyleObj = (componentsTheme) =>
 				return acc;
 			}
 
-			return acc += `[${section}="${restPath.splice(idx + 1, 1).join('')}"]`;
+			return acc += `[${kebabCase(section)}="${restPath.splice(idx + 1, 1).join('')}"]`;
 		}, '');
 
 		let selector = `${getComponentName(component)}${attrsSelector}`
 
 		return {
 			[selector]: {
-				[getVarName([component, property])]: val
+				[property]: val
 			}
 		}
 	});
@@ -73,4 +73,22 @@ export const componentsThemeToStyle = (componentsTheme, themeName = '') =>
 export const themeToStyle = ({ globals, components }, themeName) => `
 ${globalsThemeToStyle(globals, themeName)}
 ${componentsThemeToStyle(components, themeName)}
-`
+`
+
+const useVar = varName => `var(${varName})`
+
+export const createHelperVars = (theme, prefix) => {
+	const res = transformTheme(theme, [], (path, value) => {
+		const modifiedPath = [...path];
+		const property = modifiedPath.splice(-1)
+		const varName = getCssVarName(prefix, property)
+
+		const vars = { [property]: varName }
+		const theme = set({}, [...modifiedPath, varName], value)
+		const useVars = { [property]: useVar(varName) }
+
+		return { theme, useVars, vars }
+	})
+
+	return [res.theme, res.useVars, res.vars]
+};

package/dist/umd/146.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[146],{3097:(e,t,s)=>{s.d(t,{D:()=>r});const o=(e,t,s)=>{t(...Array.from(e.attributes).map((e=>e.name))),new MutationObserver((e=>{for(const o of e)"attributes"!==o.type||s.includes(o.attributeName)||t(o.attributeName)})).observe(e,{attributes:!0})},n=(e,t)=>(...s)=>{s.forEach((s=>{const o=e.getAttribute(s);null!==o?t.getAttribute(s)!==o&&t.setAttribute(s,o):t.removeAttribute(s)}))},r=({componentName:e,wrappedEleName:t,slots:s=[],style:r,excludeAttrsSync:a=[]})=>{const i=`\n\t\t${r?`<style id="create-proxy">${r}</style>`:""}\n\t\t<${t}>\n\t\t<slot></slot>\n\t\t${s.map((e=>`<slot name="${e}" slot="${e}"></slot>`)).join("")}\n\t\t</${t}>\n\t`;class l extends HTMLElement{static get componentName(){return e}constructor(){super().attachShadow({mode:"open"}).innerHTML=i,this.hostElement=this.shadowRoot.host,this.componentName=this.hostElement.tagName.toLowerCase(),this.wrappedComponentName=t}#e(){if(this.componentName!==e)throw Error(`component name mismatch, expected "${e}", current "${actualComponentName}"`)}connectedCallback(){var e,s,r;this.shadowRoot.isConnected&&(this.#e(),this.proxyElement=this.shadowRoot.querySelector(t),this.setAttribute("tabindex","0"),this.onfocus=e=>{this.proxyElement.focus()},this.proxyElement.onkeydown=e=>{e.shiftKey&&9===e.keyCode&&(this.removeAttribute("tabindex"),setTimeout((()=>this.setAttribute("tabindex","0")),0))},this.mouseoverCbRef=()=>{this.proxyElement.setAttribute("hover",""),this.proxyElement.addEventListener("mouseleave",(()=>this.proxyElement.removeAttribute("hover")),{once:!0})},this.proxyElement.addEventListener("mouseover",this.mouseoverCbRef),this.addEventListener=this.proxyElement.addEventListener,e=this.proxyElement,s=this.hostElement,r=a,o(e,n(e,s),r),o(s,n(s,e),r))}disconnectedCallback(){this.proxyElement.removeEventListener("mouseover",this.mouseoverCbRef)}attributeChangedCallback(){this.proxyElement}}return l}},2089:(e,t,s)=>{s.d(t,{e:()=>o});const o=e=>class extends e{#t=null;static get observedAttributes(){return[...e.observedAttributes||[],"draggable"]}constructor(){super(),this.#t=document.createElement("style"),this.#t.innerText=`${this.wrappedComponentName} { cursor: inherit }`}#s(e){e?this.shadowRoot.appendChild(this.#t):this.#t.remove()}attributeChangedCallback(e,t,s){super.attributeChangedCallback(e,t,s),"draggable"===e&&this.#s("true"===s)}}},2788:(e,t,s)=>{s.d(t,{qC:()=>r,iY:()=>n});var o=s(6225);const n=e=>(0,o.E3)("descope",e),r=(...e)=>t=>e.reduceRight(((e,t)=>t(e)),t)},6225:(e,t,s)=>{s.d(t,{E3:()=>n,GL:()=>o,Tk:()=>r});const o=e=>e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),n=(...e)=>o(e.join("-")),r=(...e)=>`--${n(...e)}`}}]);

package/dist/umd/descope-button-js.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[155],{3146:(e,t,o)=>{o.r(t),o.d(t,{Button:()=>l}),o(729);var r=o(2788),n=o(9893),s=o(2089),a=o(3097),d=o(3535);const i=(0,r.iY)("button"),l=(0,r.qC)((0,n.y)({mappings:{backgroundColor:{},borderRadius:{},color:{selector:"::part(label)"},borderColor:{},borderStyle:{},borderWidth:{},fontSize:{},height:{},width:(0,d.zy)({}),cursor:{},padding:{}}}),s.e)((0,a.D)({slots:["prefix","suffix"],wrappedEleName:"vaadin-button",style:"vaadin-button::part(label) { pointer-events: none; }",excludeAttrsSync:["tabindex"],componentName:i}));customElements.define(i,l)}}]);

package/dist/umd/descope-date-picker-js.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[938],{3450:(e,s,a)=>{a.r(s),a.d(s,{DatePicker:()=>n}),a(3054);var c=a(2788),p=a(2089),t=a(3097);const i=(0,c.iY)("date-picker"),n=(0,c.qC)(p.e)((0,t.D)({componentName:i,slots:["prefix","suffix"],wrappedEleName:"vaadin-date-picker",style:""}));customElements.define(i,n)}}]);

package/dist/umd/descope-text-field-js.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[117],{2320:(t,e,i)=>{i.r(e),i.d(e,{TextField:()=>d}),i(6221);var r=i(2788),l=i(9893),s=i(2089),a=i(3097);const o=(0,r.iY)("text-field"),d=(0,r.qC)((0,l.y)({mappings:{placeholderColor:{selector:"> input:placeholder-shown",property:"color"},color:{},borderColor:{selector:"::part(input-field)"},borderWidth:{selector:"::part(input-field)"},borderStyle:{selector:"::part(input-field)"},borderRadius:{selector:"::part(input-field)"},boxShadow:{selector:"::part(input-field)"},height:{selector:"::part(input-field)"},padding:{selector:"::part(input-field)"},backgroundColor:{selector:"::part(input-field)"},labelColor:{selector:"::part(label)",property:"color"}}}),s.e,(t=>class extends t{static get formAssociated(){return!0}#t;constructor(){super(),this.#t=this.attachInternals(),this.hasAttribute("tabindex")||this.setAttribute("tabindex",0)}formAssociatedCallback(){this.setValidity?.()}connectedCallback(){super.connectedCallback();const t=this.proxyElement.querySelector("input");if(!t)throw Error("no input was found");this.checkValidity=()=>t.checkValidity(),this.reportValidity=()=>t.reportValidity(),this.validity=t.validity,this.setValidity=()=>{this.#t.setValidity(t.validity,t.validationMessage)},t.oninput=()=>{this.value=t.value,this.setValidity()}}}))((0,a.D)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:"",excludeAttrsSync:["tabindex"],componentName:o}));customElements.define(o,d)}}]);