@rettangoli/ui 0.1.31 → 1.0.0-rc1

package/src/components/tabs/tabs.store.js

@@ -1,16 +1,19 @@
 export const createInitialState = () => Object.freeze({});
 
-const blacklistedAttrs = ['id', 'class', 'style', 'slot'];
+const blacklistedProps = ["id", "class", "style", "slot", "items", "selectedTab"];
 
-const stringifyAttrs = (attrs) => {
-  return Object.entries(attrs).filter(([key]) => !blacklistedAttrs.includes(key)).map(([key, value]) => `${key}=${value}`).join(' ');
-}
+const stringifyProps = (props = {}) => {
+  return Object.entries(props)
+    .filter(([key]) => !blacklistedProps.includes(key))
+    .map(([key, value]) => `${key}=${value}`)
+    .join(" ");
+};
 
-export const selectViewData = ({ state, props, attrs }) => {
-  const containerAttrString = stringifyAttrs(attrs);
+export const selectViewData = ({ props }) => {
+  const containerAttrString = stringifyProps(props);
 
   const items = props.items || [];
-  const selectedTab = attrs['selected-tab'];
+  const selectedTab = props.selectedTab;
 
   // Mark selected tab with styling
   const itemsWithSelection = items.map(item => ({
@@ -24,6 +27,6 @@ export const selectViewData = ({ state, props, attrs }) => {
   return {
     containerAttrString,
     items: itemsWithSelection,
-    selectedTab
+    selectedTab,
   };
-}
+};

package/src/components/tabs/tabs.view.yaml

@@ -1,66 +1,10 @@
-elementName: rtgl-tabs
-
-viewDataSchema:
-  type: object
-  properties:
-    containerAttrString:
-      type: string
-    items:
-      type: array
-      items:
-        type: object
-        properties:
-          label:
-            type: string
-          id:
-            type: string
-          isSelected:
-            type: boolean
-          bgColor:
-            type: string
-          textColor:
-            type: string
-          borderColor:
-            type: string
-    selectedTab:
-      type: string
-
-propsSchema:
-  type: object
-  properties:
-    items:
-      type: array
-      items:
-        type: object
-        properties:
-          label:
-            type: string
-          id:
-            type: string
-          testId:
-            type: string
-
-attrsSchema:
-  type: object
-  properties:
-    selected-tab:
-      type: string
-
 refs:
-  tab-*:
+  tab*:
     eventListeners:
       click:
         handler: handleClickItem
-
-events:
-  item-click:
-    type: object
-    properties:
-      id:
-        type: string
-
 template:
   - rtgl-view d=h g=sm bgc=mu p=sm br=lg ${containerAttrString}:
-    - $for item in items:
-        - rtgl-view#tab-${item.id} data-id=${item.id} cur=p bgc=${item.bgColor} bw=xs bc=${item.borderColor} pv=md ph=lg br=lg data-testid=${item.testId}:
-          - rtgl-text s=sm c=${item.textColor}: "${item.label}"
+      - $for item, i in items:
+          - rtgl-view#tab${i} data-id=${item.id} cur=pointer bgc=${item.bgColor} bw=xs bc=${item.borderColor} pv=md ph=lg br=lg data-testid=${item.testId}:
+              - rtgl-text s=sm c=${item.textColor}: ${item.label}

package/src/components/tooltip/tooltip.schema.yaml

@@ -0,0 +1,18 @@
+componentName: rtgl-tooltip
+propsSchema:
+  type: object
+  properties:
+    open:
+      type: string
+    x:
+      type: string
+    'y':
+      type: string
+    place:
+      type: string
+    content:
+      type: string
+events: []
+methods:
+  type: object
+  properties: {}

package/src/components/tooltip/tooltip.store.js

@@ -1,12 +1,12 @@
 export const createInitialState = () => Object.freeze({
 });
 
-export const selectViewData = ({ attrs }) => {
+export const selectViewData = ({ props }) => {
   return {
-    open: !!attrs.open,
-    x: attrs.x || 0,
-    y: attrs.y || 0,
-    placement: attrs.placement || 'top',
-    content: attrs.content || ''
+    open: !!props.open,
+    x: props.x || 0,
+    y: props.y || 0,
+    place: props.place || 't',
+    content: props.content || ''
   };
-}
+}

package/src/components/tooltip/tooltip.view.yaml

@@ -1,23 +1,5 @@
-elementName: rtgl-tooltip
-
-viewDataSchema:
-  type: object
-
-attrsSchema:
-  type: object
-  properties:
-    open:
-      type: string
-    x:
-      type: string
-    y:
-      type: string
-    placement:
-      type: string
-    content:
-      type: string
-
 template:
-  - rtgl-popover#popover ?open=${open} x=${x} y=${y} placement=${placement} no-overlay:
-      - rtgl-view slot=content bgc=background bc=border br=md p=sm ah=c av=c:
-          - rtgl-text ta=c s=sm c=foreground: ${content}
+  - rtgl-popover#popover ?open=${open} x=${x} y=${y} place=${place} no-overlay:
+      - rtgl-view slot=content bgc=bg bc=bo br=md p=sm ah=c av=c:
+          - rtgl-text ta=c s=sm c=fg: ${content}
+refs: {}

package/src/components/waveform/waveform.handlers.js

@@ -1,18 +1,18 @@
 export const handleAfterMount = async (deps) => {
-  const { props, store, render, getRefIds, } = deps;
+  const { props, store, render, refs } = deps;
   const { waveformData } = props;
 
-  store.setWaveformData(waveformData);
+  store.setWaveformData({ data: waveformData });
   render();
 
-  const canvas = getRefIds().canvas?.elm;
+  const canvas = refs.canvas;
   if (canvas) {
     renderWaveform(waveformData, canvas);
   }
 };
 
 export const handleOnUpdate = async (deps, payload) => {
-  const { store, render, getRefIds, props } = deps;
+  const { store, render, refs, props } = deps;
   const { waveformData } = props;
 
   if (!waveformData) {
@@ -20,10 +20,10 @@ export const handleOnUpdate = async (deps, payload) => {
     return;
   }
 
-  store.setWaveformData(waveformData);
+  store.setWaveformData({ data: waveformData });
   render();
 
-  const canvas = getRefIds().canvas?.elm;
+  const canvas = refs.canvas;
   if (canvas) {
     renderWaveform(waveformData, canvas);
   }

package/src/components/waveform/waveform.schema.yaml

@@ -0,0 +1,25 @@
+componentName: rtgl-waveform
+propsSchema:
+  type: object
+  properties:
+    w:
+      type: string
+      description: Width of the waveform visualizer
+      default: '250'
+    h:
+      type: string
+      description: Height of the waveform visualizer
+      default: '150'
+    cur:
+      type: string
+      description: cursor
+    waveformData:
+      type: object
+      description: File ID of the waveform data in object storage
+    isLoading:
+      type: boolean
+      description: Whether the waveform data is currently being loaded
+events: []
+methods:
+  type: object
+  properties: {}

package/src/components/waveform/waveform.store.js

@@ -2,16 +2,16 @@ export const createInitialState = () => Object.freeze({
   waveformData: null,
 });
 
-export const setWaveformData = (state, data) => {
-  state.waveformData = data;
+export const setWaveformData = ({ state }, payload = {}) => {
+  state.waveformData = payload.data;
 };
 
-export const selectViewData = ({ state, attrs, props }) => {
+export const selectViewData = ({ state, props }) => {
   return {
     isLoading: props.isLoading,
-    w: attrs.w || "250",
-    h: attrs.h || "150",
-    cur: attrs.cur,
+    w: props.w || "250",
+    h: props.h || "150",
+    cur: props.cur,
     waveformData: props.waveformData,
   };
 };

package/src/components/waveform/waveform.view.yaml

@@ -1,38 +1,10 @@
-elementName: rtgl-waveform
-
-attrsSchema:
-  type: object
-  properties:
-    w:
-      type: string
-      description: Width of the waveform visualizer
-      default: '250'
-    h:
-      type: string
-      description: Height of the waveform visualizer
-      default: '150'
-    cur:
-      type: string
-      description: cursor
-
-propsSchema:
-  type: object
-  properties:
-    waveformData:
-      type: object
-      description: File ID of the waveform data in object storage
-    isLoading:
-      type: boolean
-      description: Whether the waveform data is currently being loaded
-
 refs:
   canvas:
     selector: canvas
-
 template:
-  - rtgl-view w=f h=f pos=rel w=${w} h=${h} cur=${cur}:
-    - $if isLoading:
-        - rtgl-view w=f h=f av=c ah=c:
-          - rtgl-text c=mu-fg: ...
-      $else:
-        - 'canvas#canvas style="width:100%; height:100%;"':
+  - rtgl-view pos=rel w=${w} h=${h} cur=${cur}:
+      - $if isLoading:
+          - rtgl-view w=f h=f av=c ah=c:
+              - rtgl-text c=mu-fg: ...
+        $else:
+          - canvas#canvas style="width:100%; height:100%;": null

package/src/deps/createGlobalUI.js

@@ -98,7 +98,7 @@ const createGlobalUI = (globalUIElement) => {
      * @param {Array<Object>} options.items - Array of dropdown menu items (required)
      * @param {number} options.x - X coordinate position (required)
      * @param {number} options.y - Y coordinate position (required)
-     * @param {string} [options.placement] - Dropdown menu placement (default: "bottom-start")
+     * @param {string} [options.place] - Dropdown menu place token (default: "bs")
      * @returns {Promise<Object|null>} Promise that resolves with clicked item info or null if closed without selection
      * @returns {Object} [result.index] - Index of the clicked item
      * @returns {Object} [result.item] - The clicked item object
@@ -130,4 +130,4 @@ const createGlobalUI = (globalUIElement) => {
   };
 }
 
-export default createGlobalUI;
+export default createGlobalUI;