@rettangoli/ui 0.1.2-rc8 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "0.1.2-rc8",
+  "version": "0.1.3",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",
@@ -9,7 +9,8 @@
     "src"
   ],
   "exports": {
-    ".": "./src/index.js"
+    ".": "./src/index.js",
+    "./cli": "./src/cli/index.js"
   },
   "module": "./src/index.js",
   "repository": {
@@ -48,10 +49,11 @@
   "homepage": "https://github.com/yuusoft-org/rettangoli#readme",
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
+    "@rettangoli/fe": "0.0.7-rc16",
     "commander": "^13.1.0",
+    "jempl": "0.1.4-rc1",
     "js-yaml": "^4.1.0",
     "liquidjs": "^10.21.0",
-    "@rettangoli/fe": "0.0.7-rc4",
     "snabbdom": "^3.6.2"
   }
 }

package/src/cli/buildSvg.js

@@ -0,0 +1,86 @@
+import { readFileSync, writeFileSync, readdirSync, statSync } from 'node:fs';
+import { join, basename } from 'node:path';
+
+function getAllSvgFiles(dir) {
+  const svgFiles = [];
+  
+  function traverse(currentDir) {
+    const files = readdirSync(currentDir);
+    
+    for (const file of files) {
+      const fullPath = join(currentDir, file);
+      const stats = statSync(fullPath);
+      
+      if (stats.isDirectory()) {
+        traverse(fullPath);
+      } else if (file.endsWith('.svg')) {
+        svgFiles.push(fullPath);
+      }
+    }
+  }
+  
+  traverse(dir);
+  return svgFiles;
+}
+
+function removeFrontmatter(content) {
+  // Look for a line containing only '---'
+  const lines = content.split('\n');
+  
+  for (let i = 0; i < lines.length; i++) {
+    if (lines[i].trim() === '---') {
+      // Found the separator, return everything after it
+      return lines.slice(i + 1).join('\n').trim();
+    }
+  }
+  
+  // No frontmatter separator found, return original content
+  return content;
+}
+
+const buildSvgIcons = (options) => {
+  const { dir, outfile } = options;
+  
+  if (!dir || !outfile) {
+    console.error('Error: Both dir and outfile options are required');
+    return;
+  }
+  
+  console.log(`Scanning for SVG files in: ${dir}`);
+  
+  const svgFiles = getAllSvgFiles(dir);
+  
+  if (svgFiles.length === 0) {
+    console.log('No SVG files found');
+    return;
+  }
+  
+  console.log(`Found ${svgFiles.length} SVG files`);
+  
+  const icons = {};
+  
+  for (const filePath of svgFiles) {
+    const fileName = basename(filePath, '.svg');
+    let content = readFileSync(filePath, 'utf8');
+    
+    content = removeFrontmatter(content);
+    
+    content = content.replace(/\n/g, ' ').replace(/\s+/g, ' ').trim();
+    
+    icons[fileName] = content;
+  }
+  
+  // Convert to custom format with single quotes for keys and backticks for values
+  const iconEntries = Object.entries(icons).map(([key, value]) => {
+    return `  '${key}': \`${value}\``;
+  });
+  
+  const output = `window.rtglIcons = {\n${iconEntries.join(',\n')}\n};`;
+  
+  writeFileSync(outfile, output);
+  
+  console.log(`SVG icons written to: ${outfile}`);
+  console.log(`Total icons: ${Object.keys(icons).length}`);
+};
+
+export default buildSvgIcons;

package/src/cli/index.js

@@ -0,0 +1 @@
+export { default as buildSvg } from './buildSvg.js';

package/src/common.js

@@ -159,14 +159,23 @@ const spacing = {
 
 function convertObjectToCssString(styleObject, selector = ':host') {
   let result = "";
-  for (const [size, mediaQuery] of Object.entries(mediaQueries)) {
+  // Process in correct order for max-width media queries: default first, then largest to smallest
+  const orderedSizes = ["default", "xl", "lg", "md", "sm"];
+  
+  for (const size of orderedSizes) {
+    const mediaQuery = mediaQueries[size];
+    if (!styleObject[size] || Object.keys(styleObject[size]).length === 0) {
+      continue;
+    }
+    
     if (size !== "default") {
       result += `${mediaQuery} {\n`;
     }
     let cssString = "";
     for (const [key, value] of Object.entries(styleObject[size])) {
       if (value !== undefined && value !== null) {
-        cssString += `${key}: ${value};\n`;
+        // Add !important to override imported styles
+        cssString += `${key}: ${value} !important;\n`;
       }
     }
     result += `${selector} {
@@ -180,6 +189,25 @@ function convertObjectToCssString(styleObject, selector = ':host') {
   return result;
 }
 
+// Deep equality helper for comparing values (including objects)
+export const deepEqual = (a, b) => {
+  if (a === b) return true;
+  if (a == null || b == null) return false;
+  if (typeof a !== 'object' || typeof b !== 'object') return false;
+  
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  
+  if (keysA.length !== keysB.length) return false;
+  
+  for (const key of keysA) {
+    if (!keysB.includes(key)) return false;
+    if (!deepEqual(a[key], b[key])) return false;
+  }
+  
+  return true;
+};
+
 export {
   css,
   generateCSS,

package/src/components/breadcrumb/breadcrumb.handlers.js

@@ -0,0 +1,9 @@
+export const handleClickItem = (deps, event) => {
+  const { dispatchEvent } = deps;
+  const id = event.currentTarget.dataset.id;
+  dispatchEvent(new CustomEvent('item-click', {
+    detail: {
+      id
+    }
+  }));
+}

package/src/components/breadcrumb/breadcrumb.store.js

@@ -0,0 +1,29 @@
+export const createInitialState = () => Object.freeze({});
+
+const blacklistedAttrs = ['id', 'class', 'style', 'slot'];
+
+const stringifyAttrs = (attrs) => {
+  return Object.entries(attrs).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
+}
+
+export const selectViewData = ({ props, attrs }) => {
+  const containerAttrString = stringifyAttrs(attrs);
+
+  const items = props.items || [];
+  const separator = props.separator || 'breadcrumb-arrow';
+
+  // Add separators between items, but not after the last one
+  const itemsWithSeparators = [];
+  items.forEach((item, index) => {
+    itemsWithSeparators.push(item);
+    if (index < items.length - 1) {
+      itemsWithSeparators.push({ isSeparator: true });
+    }
+  });
+
+  return {
+    containerAttrString,
+    items: itemsWithSeparators,
+    separator
+  };
+}

package/src/components/breadcrumb/breadcrumb.view.yaml

@@ -0,0 +1,64 @@
+elementName: rtgl-breadcrumb
+
+viewDataSchema:
+  type: object
+  properties:
+    containerAttrString:
+      type: string
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          label:
+            type: string
+          id:
+            type: string
+    separator:
+      type: string
+
+propsSchema:
+  type: object
+  properties:
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          label:
+            type: string
+          id:
+            type: string
+    separator:
+      type: string
+      default: "breadcrumb-arrow"
+
+refs:
+  item-*:
+    eventListeners:
+      click:
+        handler: handleClickItem
+events:
+  item-click:
+    type: object
+    properties:
+      item:
+        type: object
+        properties:
+          label:
+            type: string
+          id:
+            type: string
+      index:
+        type: number
+
+template:
+  - rtgl-view d=h av=c g=md p=sm ${containerAttrString}:
+    - $for item in items:
+        - $if item.isSeparator:
+            - rtgl-svg wh=16 svg=${separator} c=mu-fg:
+          $elif item.id:
+            - rtgl-view#item-${item.id} data-id=${item.id} cur=p:
+              - rtgl-text s=sm c=mu-fg: "${item.label}"
+          $else:
+            - rtgl-text s=sm c=mu-fg: "${item.label}"

package/src/components/dropdownMenu/dropdownMenu.handlers.js

@@ -1,18 +1,18 @@
 
-export const handleClickPopoverOverlay = (e, deps) => {
+export const handleClosePopover = (deps, event) => {
   const { dispatchEvent } = deps;
-  dispatchEvent(new CustomEvent('click-overlay'));
+  dispatchEvent(new CustomEvent('close'));
 }
 
-export const handleClickMenuItem = (e, deps) => {
+export const handleClickMenuItem = (deps, event) => {
   const { dispatchEvent } = deps;
-  const index = parseInt(e.currentTarget.id.replace('option-', ''));
+  const index = parseInt(event.currentTarget.id.replace('option-', ''));
   const item = deps.props.items[index];
-  
+
   dispatchEvent(new CustomEvent('click-item', {
     detail: {
       index,
       item
     }
   }));
-}
+}

package/src/components/dropdownMenu/dropdownMenu.store.js

@@ -1,25 +1,13 @@
 
-export const INITIAL_STATE = Object.freeze({
+export const createInitialState = () => Object.freeze({
 });
 
-export const toViewData = ({ state, props }) => {
+export const selectViewData = ({ props, attrs }) => {
   return {
     items: props.items || [],
-    isOpen: props.isOpen || false,
-    position: props.position || {
-      x: 0,
-      y: 0,
-    },
+    open: !!attrs.open,
+    x: attrs.x,
+    y: attrs.y,
+    placement: attrs.placement
   };
 }
-
-export const selectState = ({ state }) => {
-  return state;
-}
-
-export const setState = (state) => {
-  // do doSomething
-}
-
-
-

package/src/components/dropdownMenu/dropdownMenu.view.yaml

@@ -19,28 +19,31 @@ propsSchema:
               - label
               - item
               - separator
-    isOpen:
-      type: boolean
-    position:
-      type: object
-      properties:
-        x:
-          type: number
-        y:
-          type: number
+
+attrsSchema:
+  type: object
+  properties:
+    open:
+      type: string
+    x:
+      type: string
+    y:
+      type: string
+    placement:
+      type: string
 
 refs:
   popover:
     eventListeners:
-      click-overlay:
-        handler: handleClickPopoverOverlay
+      close:
+        handler: handleClosePopover
   option-*:
     eventListeners:
       click:
         handler: handleClickMenuItem
 
 template:
-  - rtgl-popover#popover .isOpen=isOpen .position=position:
+  - rtgl-popover#popover ?open=${open} x=${x} y=${y} placement=${placement}:
     - rtgl-view wh=300 g=xs slot=content bgc=background br=md:
       - $for item, i in items:
         - $if item.type == 'label':
@@ -51,4 +54,3 @@ template:
               - rtgl-text: ${item.label}
           $elif item.type == 'separator':
             - rtgl-view w=f h=1 ph=lg mv=md bgc=bo:
-            

package/src/components/form/form.handlers.js

@@ -1,8 +1,20 @@
-export const handleOnMount = (deps) => {
+export const handleBeforeMount = (deps) => {
   const { store, props } = deps;
   store.setFormValues(props.defaultValues);
 };
 
+export const handleOnUpdate = (changes, deps) => {
+  const { oldAttrs, newAttrs } = changes;
+  const { store, props, render } = deps;
+
+  if (oldAttrs?.key === newAttrs?.key) {
+    return;
+  }
+
+  store.setFormValues(props.defaultValues);
+  render();
+};
+
 const dispatchFormChange = (name, fieldValue, formValues, dispatchEvent) => {
   dispatchEvent(
     new CustomEvent("form-change", {
@@ -15,9 +27,9 @@ const dispatchFormChange = (name, fieldValue, formValues, dispatchEvent) => {
   );
 };
 
-export const handleActionClick = (e, deps) => {
+export const handleActionClick = (deps, event) => {
   const { store, dispatchEvent } = deps;
-  const id = e.currentTarget.id.replace("action-", "");
+  const id = event.currentTarget.id.replace("action-", "");
   dispatchEvent(
     new CustomEvent("action-click", {
       detail: {
@@ -28,63 +40,188 @@ export const handleActionClick = (e, deps) => {
   );
 };
 
-export const handleInputChange = (e, deps) => {
-  const { store, dispatchEvent } = deps;
-  const name = e.currentTarget.id.replace("input-", "");
+export const handleInputChange = (deps, event) => {
+  const { store, dispatchEvent, props } = deps;
+  const name = event.currentTarget.id.replace("input-", "");
   // TODO fix double event
-  if (name && e.detail.value !== undefined) {
+  if (name && event.detail.value !== undefined) {
     store.setFormFieldValue({
       name: name,
-      value: e.detail.value,
+      value: event.detail.value,
+      props,
     });
-    dispatchFormChange(name, e.detail.value, store.selectFormValues(), dispatchEvent);
+    dispatchFormChange(
+      name,
+      event.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
   }
 };
 
-export const handleSelectChange = (e, deps) => {
-  const { store, dispatchEvent } = deps;
-  const name = e.currentTarget.id.replace("select-", "");
-  if (name && e.detail.selectedValue !== undefined) {
+export const handlePopoverInputChange = (deps, event) => {
+  const { store, dispatchEvent, props } = deps;
+  const name = event.currentTarget.id.replace("popover-input-", "");
+  // TODO fix double event
+  if (name && event.detail.value !== undefined) {
     store.setFormFieldValue({
       name: name,
-      value: e.detail.selectedValue,
+      value: event.detail.value,
+      props,
     });
-    dispatchFormChange(name, e.detail.selectedValue, store.selectFormValues(), dispatchEvent);
+    dispatchFormChange(
+      name,
+      event.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
   }
 };
 
-export const handleColorPickerChange = (e, deps) => {
-  const { store, dispatchEvent } = deps;
-  const name = e.currentTarget.id.replace("colorpicker-", "");
-  if (name && e.detail.value !== undefined) {
+export const handleSelectChange = (deps, event) => {
+  const { store, dispatchEvent, render, props } = deps;
+  const name = event.currentTarget.id.replace("select-", "");
+  if (name && event.detail.selectedValue !== undefined) {
     store.setFormFieldValue({
       name: name,
-      value: e.detail.value,
+      value: event.detail.selectedValue,
+      props,
     });
-    dispatchFormChange(name, e.detail.value, store.selectFormValues(), dispatchEvent);
+    dispatchFormChange(
+      name,
+      event.detail.selectedValue,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
+    render();
   }
 };
 
-export const handleSliderChange = (e, deps) => {
-  const { store, dispatchEvent } = deps;
-  const name = e.currentTarget.id.replace("slider-", "");
-  if (name && e.detail.value !== undefined) {
+export const handleColorPickerChange = (deps, event) => {
+  const { store, dispatchEvent, props } = deps;
+  const name = event.currentTarget.id.replace("colorpicker-", "");
+  if (name && event.detail.value !== undefined) {
     store.setFormFieldValue({
       name: name,
-      value: e.detail.value,
+      value: event.detail.value,
+      props,
     });
-    dispatchFormChange(name, e.detail.value, store.selectFormValues(), dispatchEvent);
+    dispatchFormChange(
+      name,
+      event.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
   }
 };
 
-export const handleSliderInputChange = (e, deps) => {
-  const { store, dispatchEvent } = deps;
-  const name = e.currentTarget.id.replace("slider-input-", "");
-  if (name && e.detail.value !== undefined) {
+export const handleSliderChange = (deps, event) => {
+  const { store, dispatchEvent, props } = deps;
+  const name = event.currentTarget.id.replace("slider-", "");
+  if (name && event.detail.value !== undefined) {
+    store.setFormFieldValue({
+      name: name,
+      value: event.detail.value,
+      props,
+    });
+    dispatchFormChange(
+      name,
+      event.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
+  }
+};
+
+export const handleSliderInputChange = (deps, event) => {
+  const { store, dispatchEvent, props } = deps;
+  const name = event.currentTarget.id.replace("slider-input-", "");
+  if (name && event.detail.value !== undefined) {
     store.setFormFieldValue({
       name: name,
-      value: e.detail.value,
+      value: event.detail.value,
+      props,
+    });
+    dispatchFormChange(
+      name,
+      event.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
+  }
+};
+
+export const handleImageClick = (deps, event) => {
+  if (event.type === "contextmenu") {
+    event.preventDefault();
+  }
+  const { dispatchEvent } = deps;
+  const name = event.currentTarget.id.replace("image-", "");
+  dispatchEvent(
+    new CustomEvent("extra-event", {
+      detail: {
+        name: name,
+        x: event.clientX,
+        y: event.clientY,
+        trigger: event.type,
+      },
+    }),
+  );
+};
+
+export const handleWaveformClick = (deps, event) => {
+  if (event.type === "contextmenu") {
+    event.preventDefault();
+  }
+  const { dispatchEvent } = deps;
+  const name = event.currentTarget.id.replace("waveform-", "");
+  dispatchEvent(
+    new CustomEvent("extra-event", {
+      detail: {
+        name: name,
+        x: event.clientX,
+        y: event.clientY,
+        trigger: event.type,
+      },
+    }),
+  );
+};
+
+export const handleSelectAddOption = (deps, event) => {
+  const { store, dispatchEvent } = deps;
+  const name = event.currentTarget.id.replace("select-", "");
+  dispatchEvent(
+    new CustomEvent("action-click", {
+      detail: {
+        actionId: 'select-options-add',
+        name: name,
+        formValues: store.selectFormValues(),
+      },
+    }),
+  );
+};
+
+export const handleTooltipMouseEnter = (deps, event) => {
+  const { store, render, props } = deps;
+  const fieldName = event.currentTarget.id.replace('tooltip-icon-', '');
+
+  // Find the field with matching name to get tooltip content
+  const form = props.form;
+  const field = form.fields.find(f => f.name === fieldName);
+
+  if (field && field.tooltip) {
+    const rect = event.currentTarget.getBoundingClientRect();
+    store.showTooltip({
+      x: rect.left + rect.width / 2,
+      y: rect.top - 8,
+      content: field.tooltip.content
     });
-    dispatchFormChange(name, e.detail.value, store.selectFormValues(), dispatchEvent);
+    render();
   }
 };
+
+export const handleTooltipMouseLeave = (deps, event) => {
+  const { store, render } = deps;
+  store.hideTooltip();
+  render();
+};