@rettangoli/ui 0.1.2-rc3 → 0.1.2-rc30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "0.1.2-rc3",
+  "version": "0.1.2-rc30",
   "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-rc12",
     "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

@@ -180,6 +180,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 = (e, deps) => {
+  const { dispatchEvent } = deps;
+  const id = e.currentTarget.dataset.id;
+  dispatchEvent(new CustomEvent('item-click', {
+    detail: {
+      id
+    }
+  }));
+}

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

@@ -0,0 +1,29 @@
+export const INITIAL_STATE = 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 toViewData = ({ 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 = (e, deps) => {
   const { dispatchEvent } = deps;
-  dispatchEvent(new CustomEvent('click-overlay'));
+  dispatchEvent(new CustomEvent('close'));
 }
 
 export const handleClickMenuItem = (e, deps) => {
   const { dispatchEvent } = deps;
   const index = parseInt(e.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

@@ -2,24 +2,12 @@
 export const INITIAL_STATE = Object.freeze({
 });
 
-export const toViewData = ({ state, props }) => {
+export const toViewData = ({ 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,13 +1,25 @@
-export const handleOnMount = (deps) => {
+export const handleBeforeMount = (deps) => {
   const { store, props } = deps;
-  store.setDefaultValues(props.defaultValues);
+  store.setFormValues(props.defaultValues);
 };
 
-const dispatchFormChange = (fieldName, fieldValue, formValues, dispatchEvent) => {
+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", {
       detail: {
-        fieldName,
+        name,
         fieldValue,
         formValues,
       },
@@ -29,51 +41,187 @@ export const handleActionClick = (e, deps) => {
 };
 
 export const handleInputChange = (e, deps) => {
-  const { store, dispatchEvent } = deps;
-  const id = e.currentTarget.id.replace("input-", "");
+  const { store, dispatchEvent, props } = deps;
+  const name = e.currentTarget.id.replace("input-", "");
+  // TODO fix double event
+  if (name && e.detail.value !== undefined) {
+    store.setFormFieldValue({
+      name: name,
+      value: e.detail.value,
+      props,
+    });
+    dispatchFormChange(
+      name,
+      e.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
+  }
+};
+
+export const handlePopoverInputChange = (e, deps) => {
+  const { store, dispatchEvent, props } = deps;
+  const name = e.currentTarget.id.replace("popover-input-", "");
   // TODO fix double event
-  if (id && e.detail.value !== undefined) {
+  if (name && e.detail.value !== undefined) {
     store.setFormFieldValue({
-      // TODO user field name instead of id
-      fieldName: id,
+      name: name,
       value: e.detail.value,
+      props,
     });
-    dispatchFormChange(id, e.detail.value, store.selectFormValues(), dispatchEvent);
+    dispatchFormChange(
+      name,
+      e.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
   }
 };
 
 export const handleSelectChange = (e, deps) => {
-  const { store, dispatchEvent } = deps;
-  const id = e.currentTarget.id.replace("select-", "");
-  if (id && e.detail.selectedValue !== undefined) {
+  const { store, dispatchEvent, render, props } = deps;
+  const name = e.currentTarget.id.replace("select-", "");
+  if (name && e.detail.selectedValue !== undefined) {
     store.setFormFieldValue({
-      fieldName: id,
+      name: name,
       value: e.detail.selectedValue,
+      props,
     });
-    dispatchFormChange(id, e.detail.selectedValue, store.selectFormValues(), dispatchEvent);
+    dispatchFormChange(
+      name,
+      e.detail.selectedValue,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
+    render();
   }
 };
 
 export const handleColorPickerChange = (e, deps) => {
-  const { store, dispatchEvent } = deps;
-  const id = e.currentTarget.id.replace("colorpicker-", "");
-  if (id && e.detail.value !== undefined) {
+  const { store, dispatchEvent, props } = deps;
+  const name = e.currentTarget.id.replace("colorpicker-", "");
+  if (name && e.detail.value !== undefined) {
     store.setFormFieldValue({
-      fieldName: id,
+      name: name,
       value: e.detail.value,
+      props,
     });
-    dispatchFormChange(id, e.detail.value, store.selectFormValues(), dispatchEvent);
+    dispatchFormChange(
+      name,
+      e.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
   }
 };
 
 export const handleSliderChange = (e, deps) => {
-  const { store, dispatchEvent } = deps;
-  const id = e.currentTarget.id.replace("slider-", "");
-  if (id && e.detail.value !== undefined) {
+  const { store, dispatchEvent, props } = deps;
+  const name = e.currentTarget.id.replace("slider-", "");
+  if (name && e.detail.value !== undefined) {
     store.setFormFieldValue({
-      fieldName: id,
+      name: name,
       value: e.detail.value,
+      props,
+    });
+    dispatchFormChange(
+      name,
+      e.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
+  }
+};
+
+export const handleSliderInputChange = (e, deps) => {
+  const { store, dispatchEvent, props } = deps;
+  const name = e.currentTarget.id.replace("slider-input-", "");
+  if (name && e.detail.value !== undefined) {
+    store.setFormFieldValue({
+      name: name,
+      value: e.detail.value,
+      props,
+    });
+    dispatchFormChange(
+      name,
+      e.detail.value,
+      store.selectFormValues(),
+      dispatchEvent,
+    );
+  }
+};
+
+export const handleImageClick = (e, deps) => {
+  if (e.type === "contextmenu") {
+    e.preventDefault();
+  }
+  const { dispatchEvent } = deps;
+  const name = e.currentTarget.id.replace("image-", "");
+  dispatchEvent(
+    new CustomEvent("extra-event", {
+      detail: {
+        name: name,
+        x: e.clientX,
+        y: e.clientY,
+        trigger: e.type,
+      },
+    }),
+  );
+};
+
+export const handleWaveformClick = (e, deps) => {
+  if (e.type === "contextmenu") {
+    e.preventDefault();
+  }
+  const { dispatchEvent } = deps;
+  const name = e.currentTarget.id.replace("waveform-", "");
+  dispatchEvent(
+    new CustomEvent("extra-event", {
+      detail: {
+        name: name,
+        x: e.clientX,
+        y: e.clientY,
+        trigger: e.type,
+      },
+    }),
+  );
+};
+
+export const handleSelectAddOption = (e, deps) => {
+  const { store, dispatchEvent } = deps;
+  const name = e.currentTarget.id.replace("select-", "");
+  dispatchEvent(
+    new CustomEvent("action-click", {
+      detail: {
+        actionId: 'select-options-add',
+        name: name,
+        formValues: store.selectFormValues(),
+      },
+    }),
+  );
+};
+
+export const handleTooltipMouseEnter = (e, deps) => {
+  const { store, render, props } = deps;
+  const fieldName = e.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 = e.currentTarget.getBoundingClientRect();
+    store.showTooltip({
+      x: rect.left + rect.width / 2,
+      y: rect.top - 8,
+      content: field.tooltip.content
     });
-    dispatchFormChange(id, e.detail.value, store.selectFormValues(), dispatchEvent);
+    render();
   }
 };
+
+export const handleTooltipMouseLeave = (e, deps) => {
+  const { store, render } = deps;
+  store.hideTooltip();
+  render();
+};