rettangoli-ui 0.1.0-rc2 → 0.1.0-rc3

package/src/components/navbar/navbar.store.js

@@ -0,0 +1,46 @@
+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 = ({ state, props, attrs }) => {
+  console.log('attrs', {
+    attrs,
+    entries: Object.entries(attrs)
+  })
+
+  const attrsStart = attrs.start ? JSON.parse(decodeURIComponent(attrs.start)) : props.start;
+
+  const containerAttrString = stringifyAttrs(attrs);
+  const start = attrsStart || {
+    label: '',
+    // href: undefined,
+    // path: undefined,
+    image: {
+      src: '',
+      width: 32,
+      height: 32,
+      alt: ''
+    }
+  }
+  // start.hasImage = start.image && start.image.src;
+  // start.hasHref = !!start.href;
+  return {
+    containerAttrString,
+    start
+  };
+}
+
+export const selectPath = ({ props }) => {
+  return props.start.path;
+}
+
+export const setState = (state) => {
+  // do doSomething
+}
+
+
+

package/src/components/navbar/navbar.view.yaml

@@ -0,0 +1,74 @@
+elementName: rtgl-navbar
+
+viewDataSchema:
+  type: object
+  properties:
+    containerAttrString:
+      type: string
+    start:
+      type: object
+      properties:
+        label:
+          type: string
+        href:
+          type: string
+        image:
+          type: object
+          properties:
+            src:
+              type: string
+        hasImage:
+          type: boolean
+        hasHref:
+          type: boolean
+
+propsSchema:
+  type: object
+  properties:
+    start:
+      type: object
+      properties:
+        label:
+          type: string
+        href:
+          type: string
+        image:
+          type: object
+          properties:
+            src:
+              type: string
+
+refs:
+  start:
+    eventListeners:
+      click:
+        handler: handleClickStart
+
+events:
+  clickStart:
+    type: object
+    properties:
+      path:
+        type: string
+
+anchors:
+  - &image
+    - rtgl-text s=lg: "${start.label}"
+    - $if start.image && start.image.src:
+        - rtgl-image w=${start.image.width} h=${start.image.height} src=${start.image.src} alt=${start.image.alt}:
+
+template:
+  - rtgl-view bgc=bg d=h h=48 av=c w=f ${containerAttrString}:
+    - $if start.href:
+        - a href=${start.href}:
+          - rtgl-view d=h av=c g=lg g=md:
+            - *image
+      $elif start.path:
+        - rtgl-view#start d=h av=c g=lg g=md cur=p:
+          - *image
+      $else:
+        - rtgl-view d=h av=c g=lg g=md:
+          - *image
+    - rtgl-view flex=1:
+    - rtgl-view d=h av=c g=lg:
+      - slot name=right:

package/src/components/pageOutline/pageOutline.handlers.js

@@ -0,0 +1,69 @@
+
+
+/**
+ * 
+ * @param {*} headingElements 
+ * @param {*} deps 
+ */
+const updateToLatestCurrentId = (headingElements, deps) => {
+  const { store, render } = deps;
+
+  let currentHeadingId;
+  let closestTopPosition = -Infinity;
+  
+  headingElements.forEach((heading) => {
+    const rect = heading.getBoundingClientRect();
+    
+    if (rect.top <= 20) {
+      if (rect.top > closestTopPosition) {
+        closestTopPosition = rect.top;
+        currentHeadingId = heading.id;
+      }
+    }
+  });
+  
+  if (currentHeadingId && currentHeadingId !== store.selectCurrentId()) {
+    store.setCurrentId(currentHeadingId);
+    render();
+  }
+};
+
+const startListening = (contentContainer, deps) => {
+  const { store, render } = deps;
+  
+  // Extract headings
+  const headings = contentContainer.querySelectorAll("rtgl-text[id]");
+  const headingElements = Array.from(headings);
+  
+  const items = headingElements.map((heading) => ({
+    id: heading.id,
+    href: `#${heading.id}`,
+    title: heading.textContent
+  }));
+  
+  store.setItems(items);
+  updateToLatestCurrentId(headingElements, deps);
+  render();
+
+  const boundCheckCurrentHeading = updateToLatestCurrentId.bind(this, headingElements, deps);
+  
+  // Add scroll listener to the content container
+  contentContainer.addEventListener("scroll", boundCheckCurrentHeading, {
+    passive: true,
+  });
+
+  return () => {
+    contentContainer.removeEventListener("scroll", boundCheckCurrentHeading);
+  }
+};
+
+export const handleOnMount = (deps) => {
+  const { attrs } = deps;
+  requestAnimationFrame(() => {
+    const targetElement = document.getElementById(attrs['target-id'])
+    const stopListening = startListening(targetElement, deps)
+    return () => {
+      stopListening();
+    }
+  })
+}

package/src/components/pageOutline/pageOutline.store.js

@@ -0,0 +1,40 @@
+export const INITIAL_STATE = Object.freeze({
+  items: [],
+  currentId: null,
+  contentContainer: null
+});
+
+export const toViewData = ({ state }) => {
+  return {
+    items: state.items.map((item) => {
+      return {
+        ...item,
+        c: item.id === state.currentId ? 'fg' : 'mu-fg'
+      }
+    }),
+    currentId: state.currentId
+  };
+}
+
+export const selectState = ({ state }) => {
+  return state;
+}
+
+export const selectCurrentId = ({ state }) => {
+  return state.currentId;
+}
+
+export const setItems = (state, items) => {
+  state.items = items;
+}
+
+export const setCurrentId = (state, id) => {
+  state.currentId = id;
+}
+
+export const setContentContainer = (state, container) => {
+  state.contentContainer = container;
+}
+
+
+

package/src/components/pageOutline/pageOutline.view.yaml

@@ -0,0 +1,34 @@
+elementName: rtgl-page-outline
+
+viewDataSchema:
+  type: object
+  properties:
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          slug:
+            type: string
+          title:
+            type: string
+    selectedSlug:
+      type: string
+      nullable: true
+
+propsSchema:
+  type: object
+  properties: {}
+
+refs: {}
+
+events:
+  onItemClick:
+    type: object
+
+template:
+  - rtgl-view h=f w=272:
+    - rtgl-view w=f g=sm mt=xl:
+      - $for item, i in items:
+        - rtgl-view pv=xs av=c href=${item.href}:
+          - rtgl-text s=sm c=${item.c} h-c=fg: ${item.title}

package/src/components/popover/popover.handlers.js

@@ -0,0 +1,17 @@
+export const handleClickOverlay = (e, deps) => {
+  const { props, dispatchEvent, store, render } = deps;
+  if (props.isOpen !== undefined) {
+    dispatchEvent(new CustomEvent('closePopover'));
+    return;
+  }
+  store.setClose();
+  render();
+}
+
+export const open = (payload, deps) => {
+  const { position } = payload;
+  const { store, render } = deps;
+  store.setOpen(position);
+  render();
+}
+

package/src/components/popover/popover.store.js

@@ -0,0 +1,37 @@
+export const INITIAL_STATE = Object.freeze({
+  isOpen: false,
+  position: {
+    x: 0,
+    y: 0
+  },
+});
+
+export const toViewData = ({ state, props }) => {
+  if (props.isOpen !== undefined) {
+    return {
+      isOpen: props.isOpen,
+      position: {
+        x: 0,
+        y: 0
+      }
+    }
+  }
+  return {
+    isOpen: state.isOpen,
+    position: state.position,
+  };
+}
+
+export const selectState = ({ state }) => {
+  return state;
+}
+
+export const setOpen = (state, position) => {
+  state.isOpen = true;
+  state.position = position;
+}
+
+export const setClose = (state) => {
+  state.isOpen = false;
+  state.position = { x: 0, y: 0 };
+}

package/src/components/popover/popover.view.yaml

@@ -0,0 +1,50 @@
+elementName: rtgl-popover
+
+viewDataSchema:
+  type: object
+  properties:
+    isOpen:
+      type: boolean
+    position:
+      type: object
+      properties:
+        x:
+          type: number
+        y:
+          type: number
+    placement:
+      type: string
+
+propsSchema:
+  type: object
+  properties:
+    placement:
+      type: string
+      default: bottom
+    isOpen:
+      type: boolean
+
+refs:
+  popoverOverlay:
+    eventListeners:
+      click:
+        handler: handleClickOverlay
+
+styles:
+  '@keyframes popover-in':
+    from:
+      opacity: 0
+      transform: scale(0.95)
+    to:
+      opacity: 1
+      transform: scale(1)
+
+  '#popoverContainer':
+    animation: popover-in 150ms cubic-bezier(0.16, 1, 0.3, 1)
+    transform-origin: top
+
+template:
+  - $if isOpen:
+    - rtgl-view#popoverOverlay pos=fix cor=full:
+    - 'rtgl-view#popoverContainer pos=fix style="left: ${position.x}px; top: ${position.y}px;" id=floatingElement bw=xs p=md bgc=bg':
+      - slot name=content:

package/src/components/select/select.handlers.js

@@ -0,0 +1,15 @@
+
+export const handleOnMount = (deps) => {
+}
+
+export const handleButtonClick = (e, deps) => {
+  const { store, render, getRefIds } = deps;
+  const refIds = getRefIds();
+  refIds.popover.elm.transformedHandlers.open({
+    position: {
+      x: e.clientX,
+      y: e.clientY
+    }
+  });
+
+}

package/src/components/select/select.store.js

@@ -0,0 +1,25 @@
+export const INITIAL_STATE = Object.freeze({
+  isOpen: false,
+});
+
+export const toViewData = ({ state, props }) => {
+  return {
+    isOpen: state.isOpen,
+    options: props.options || []
+  };
+}
+
+export const selectState = ({ state }) => {
+  return state;
+}
+
+export const setOpen = (state) => {
+  state.open = true;
+}
+
+export const setState = (state) => {
+  // do doSomething
+}
+
+
+

package/src/components/select/select.view.yaml

@@ -0,0 +1,38 @@
+elementName: rtgl-select
+
+viewDataSchema:
+  type: object
+
+propsSchema:
+  type: object
+  properties:
+    options:
+    items:
+      type: array
+      items:
+        type: object
+        properties:
+          id:
+            type: string
+          lalbel:
+            type: string
+          value:
+            type: any
+
+refs:
+  select-button:
+    eventListeners:
+      click:
+        handler: handleButtonClick
+  popover: {}
+
+
+events: {}
+
+template:
+  - rtgl-button#select-button v=ol: Placeholder
+  - rtgl-popover#popover:
+    - rtgl-view wh=300 g=xs slot=content:
+      - $for option, i in options:
+        - rtgl-view w=f h-bgc=mu ph=lg pv=md cur=p br=md:
+          - rtgl-text: ${option.label}

package/src/components/sidebar/sidebar.handlers.js

@@ -0,0 +1,36 @@
+export const handleHeaderClick = (e, deps) => {
+  const { store, dispatchEvent } = deps;
+
+  let path;
+
+  const header = store.selectHeader();
+
+  if (e.currentTarget.id === 'header-label') {
+    path = header.labelPath;
+  } else if (e.currentTarget.id === 'header-image') {
+    path = header.image.path;
+  } else if (e.currentTarget.id === 'header') {
+    path = header.path;
+  }
+
+  dispatchEvent(new CustomEvent('headerClick', {
+    detail: {
+      path
+    },
+    bubbles: true,
+    composed: true
+  }));
+}
+
+export const handleItemClick = (e, deps) => {
+  const { store, dispatchEvent } = deps;
+  const id = e.currentTarget.id.replace('item-', '');
+  const item = store.selectItem(id);
+  dispatchEvent(new CustomEvent('itemClick', {
+    detail: {
+      item,
+    },
+    bubbles: true,
+    composed: true
+  }));
+}

package/src/components/sidebar/sidebar.store.js

@@ -0,0 +1,125 @@
+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(' ');
+}
+
+function flattenItems(items) {
+  let result = [];
+
+  for (const item of items) {
+    // Add the parent item if it's not just a group label
+    result.push({
+      id: item.id || item.href || item.path,
+      title: item.title,
+      href: item.href,
+      type: item.type || 'item',
+      icon: item.icon,
+      hrefAttr: item.href ? `href=${item.href}` : '',
+    });
+
+    // Add child items if they exist
+    if (item.items && Array.isArray(item.items)) {
+      for (const subItem of item.items) {
+        result.push({
+          id: subItem.id || subItem.href || subItem.path,
+          title: subItem.title,
+          href: subItem.href,
+          type: subItem.type || 'item',
+          icon: subItem.icon,
+          hrefAttr: subItem.href ? `href=${subItem.href}` : '',
+        });
+      }
+    }
+  }
+
+  return result;
+}
+
+export const toViewData = ({ state, props, attrs }) => {
+  const attrsHeader = attrs.header ? JSON.parse(decodeURIComponent(attrs.header)) : props.header;
+  const attrsItems = attrs.items ? JSON.parse(decodeURIComponent(attrs.items)) : props.items;
+
+  const containerAttrString = stringifyAttrs(attrs);
+  const mode = attrs.mode || 'full';
+  const header = attrsHeader || {
+    label: '',
+    path: '',
+    image: {
+      src: '',
+      alt: '',
+      width: 0,
+      height: 0,
+    },
+  };
+
+  const items = attrsItems ? flattenItems(attrsItems) : [];
+
+  // Computed values based on mode
+  const sidebarWidth = mode === 'full' ? 272 : 64;
+  const headerAlign = mode === 'full' ? 'fs' : 'c';
+  const itemAlign = mode === 'full' ? 'fs' : 'c';
+  const headerPadding = mode === 'full' ? 'lg' : 'sm';
+  const itemPadding = mode === 'full' ? 'md' : 'sm';
+  const itemHeight = mode === 'shrunk-lg' ? 48 : 40;
+  const iconSize = mode === 'shrunk-lg' ? 28 : 20;
+  const firstLetterSize = mode === 'shrunk-lg' ? 'md' : 'sm';
+  const showLabels = mode === 'full';
+  const showGroupLabels = mode === 'full';
+  
+  // For items with icons in full mode, we need left alignment within the container
+  // but the container itself should use flex-start alignment
+  const itemContentAlign = mode === 'full' ? 'fs' : 'c';
+  
+  // Item container alignment - only set for shrunk modes, leave default for full mode
+  const itemAlignAttr = mode === 'full' ? '' : `ah=${itemAlign}`;
+  
+  // Item width - for shrunk modes, make it square to constrain the highlight
+  const itemWidth = mode === 'full' ? 'f' : itemHeight;
+  
+  // Header width - should match item width for alignment
+  const headerWidth = itemWidth;
+
+  return {
+    containerAttrString,
+    mode,
+    header,
+    items,
+    sidebarWidth,
+    headerAlign,
+    itemAlign,
+    headerPadding,
+    itemPadding,
+    itemHeight,
+    iconSize,
+    firstLetterSize,
+    showLabels,
+    showGroupLabels,
+    itemContentAlign,
+    itemAlignAttr,
+    itemWidth,
+    headerWidth
+  };
+}
+
+export const selectHeader = ({ state, props, attrs }) => {
+  const attrsHeader = attrs.header ? JSON.parse(decodeURIComponent(attrs.header)) : props.header;
+  return attrsHeader;
+}
+
+export const selectActiveItem = ({ state, props }) => {
+  const items = props.items ? flattenItems(props.items) : [];
+  return items.find(item => item.active);
+}
+
+export const selectItem = ({ state, props, attrs }, id) => {
+  const attrsItems = attrs.items ? JSON.parse(decodeURIComponent(attrs.items)) : props.items;
+  const items = attrsItems ? flattenItems(attrsItems) : [];
+  return items.find(item => item.id === id);
+}
+
+export const setState = (state) => {
+  // State management if needed
+}