solid-ui 2.4.22-c76aca59 → 2.4.22-e9979419

package/README.md

@@ -7,13 +7,26 @@ User Interface widgets and utilities for Solid (solid-ui)
 These are HTML5 widgets which connect to a solid store. Building blocks for solid-based apps.
 Vanilla JS.  Includes large widgets like chat, table, matrix, form fields, and small widgets.
 
+See [Solid-Ui Storybook](http://solidos.github.io/solid-ui/examples/storybook/) for SolidUI widgets.
+See [Solid-UI API](https://solidos.github.io/solid-ui/Documentation/api/) for SolidUI functions.
+See [Forms introduction](./Documentation/FormsReadme.md) for UI vocabulary implementation.
+
+Table of content:
+- Getting started(#getting-started)
+- Further documentation(#further-ocumentation)
+
+
 ## Getting started
+
+Contributions of bug fixes and new functionality, documentation, and tests are
+always appreciated.
+
 ### In npm-based projects
 When including solid-ui in an npm-based project, you can use it with:
 
 ```js
-  import { ns, rdf,  acl, aclControl, authn, create, dom, icons, log, matrix, media,
-  messageArea, infiniteMessageArea, pad, preferences, store, style, table, tabs, utils, widgets, versionInfo
+  import { ns, rdf,  acl, aclControl, create, dom, icons, log, matrix, media,
+  messageArea, infiniteMessageArea, pad, preferences, style, table, tabs, utils, widgets, versionInfo
 } from 'solid-ui'
 
 ```
@@ -23,10 +36,8 @@ Clone this repo, and in the repo root run:
 * `npm install`
 * `npm run build`
 
-This will generate a `lib/` folder containing, among other artifacts, `lib/webpack-bundle.js`.
-Now run `npx serve` and go to http://localhost:5000/examples/ with your browser to see some examples.
-See the ['examples' folder](https://github.com/solidos/solid-ui/tree/examples/examples) for the
-source code of those examples.
+This will generate a `dist/` folder containing, among other artifacts, `dist/main.js`.
+Now run `npx serve` and go to http://localhost:3000/Documentation/ with your browser to see some examples.
 
 While viewing one of those examples, you can open the web console in your browser and for instance
 try how you can create a button:
@@ -44,56 +55,7 @@ const chat = UI.infiniteMessageArea(document, store, UI.rdf.namedNode(chatChanne
 document.body.appendChild(chat)
 ```
 
-Or a full ACL Control Box:
-```js
-const exampleFolder = 'https://example-user.inrupt.net/public/public-control/'
-const aclControlBox = UI.aclControl.ACLControlBox5(UI.rdf.namedNode(exampleFolder), { dom: document }, '', store)
-document.body.appendChild(aclControlBox)
-```
-
-
-## Documentation
-- [talk presentation](https://solidos.github.io/solid-ui/Documentation/talks/FormsTalk.html)
-- API https://solidos.github.io/solid-ui/Documentation/api/ for the API documentation.
-- The UI components are presented in a [storybook](http://solidos.github.io/solid-ui/examples/storybook/).
-
-## Overview
-This has been a place to put any functionality from solid views which has been generalized to be usable in other views.
-
-- Authentication UI: manage the user's logged in/out state.
-- Discovery: finding the user's stuff, and leaving records of new things
-- Preferences: UI for managing a user's preferences with two axes of defaults
-- An Access Control List widget for Solid ACL system
-- Acess Control Logic
-- Create a new object from modules/extensions which have registered their ability to create things
-
-- A [form system](https://solidos.github.io/solid-ui/Documentation/forms-intro.html): Forms are defined in RDF, and create/edit RDF data, including form definitions
-- A collection of shortcut namespace objects for a selection of relevant RDF vocabularies.
-- Small atomic widgets (buttons etc) of which the others are constructed.
-- An error message panel
-
-Some of the larger controls include:
-
-- A chat widget: add discussion to any object. Infinite scroll, embedded images, social reactions, etc etc
-- A people picker widget for choosing a set of people or an existing group
-- A general purpose table display with built-in faceted browsing
-- A two-dimentional matrix of editable live data that extends in both dimensions.
-- A notepad of shared notes for real-time collaboration
-- Drag and drop code for linking things and uploading files
-- A set of tabs for holding other widgets and arbitrary UI elements
-
-The typical style of the widgets is to know what data it has been derived from,
-allow users to edit it, and to automatically sync with data as it changes in the future.
-To see how these are used, see the panes which use them within the data browser.
-
-The level of support for this varies.
-
-See also: [A short introduction to the Form system](https://solidos.github.io/solid-ui/Documentation/forms-intro.html)
-
-Contributions of bug fixes and new functionality, documentation, and tests are
-always appreciated.
-
-## Development
+### Development new components
 
 When developing a component in solid-ui you can test it in isolation using storybook
 
@@ -104,5 +66,8 @@ npm run storybook
 
 If there is no story for the component yet, add a new one to `./src/stories`.
 
-When you want to test the component within a solid-pane, you can use the [development mode of solid-panes](https://github.com/solidos/solid-panes#development) or
- [mashlib-dev](https://github.com/solidos/mashlib-dev).
+When you want to test the component within a solid-pane, you can use the [development mode of solid-panes](https://github.com/solidos/solid-panes#development).
+ 
+## Further documentation
+
+- [Some code know-how](https://github.com/SolidOS/solidos/wiki/2.-Solid-UI-know-how)

package/dist/main.js

@@ -15192,11 +15192,11 @@ Object.defineProperty(exports, "__esModule", ({
 }));
 exports.versionInfo = void 0;
 var versionInfo = {
-  buildTime: '2022-05-06T16:51:17Z',
-  commit: 'c76aca592b65d7a8c0f48525e4bbf1ea926f1f06',
+  buildTime: '2022-05-12T13:56:21Z',
+  commit: 'e9979419998be0b4557e73d16f1552f70b7889fd',
   npmInfo: {
     'solid-ui': '2.4.22',
-    npm: '6.14.16',
+    npm: '6.14.17',
     ares: '1.18.1',
     brotli: '1.0.9',
     cldr: '40.0',
@@ -15205,12 +15205,12 @@ var versionInfo = {
     modules: '83',
     napi: '8',
     nghttp2: '1.42.0',
-    node: '14.19.1',
+    node: '14.19.2',
     openssl: '1.1.1n',
     tz: '2021a3',
     unicode: '14.0',
     uv: '1.42.0',
-    v8: '8.4.371.23-node.85',
+    v8: '8.4.371.23-node.87',
     zlib: '1.2.11'
   }
 };
@@ -16280,6 +16280,7 @@ function openHrefInOutlineMode(e) {
 
   if (dom.outlineManager) {
     // @@ TODO Remove the use of document as a global object
+    // TODO fix dependency cycle to solid-panes by calling outlineManager
     ;
     dom.outlineManager.GotoSubject(_solidLogic.store.sym(uri), true, undefined, true, undefined);
   } else if (window && window.panes && window.panes.getOutliner) {
@@ -16407,6 +16408,7 @@ function linkButton(dom, object) {
   b.textContent = 'Goto ' + utils.label(object);
   b.addEventListener('click', function (_event) {
     // b.parentNode.removeChild(b)
+    // TODO fix dependency cycle to solid-panes by calling outlineManager
     ;
     dom.outlineManager.GotoSubject(object, true, undefined, true, undefined);
   }, true);
@@ -17262,10 +17264,11 @@ _fieldFunction.field[ns.ui('Form').uri] = _fieldFunction.field[ns.ui('Group').ur
 
   if (already[key]) {
     // been there done that
-    box.appendChild(dom.createTextNode('Group: see above ' + key));
-    var plist = [$rdf.st(subject, ns.owl('sameAs'), subject)]; // @@ need prev subject
+    box.appendChild(dom.createTextNode('Group: see above ' + key)); // TODO fix dependency cycle to solid-panes by calling outlineManager
+    // const plist = [$rdf.st(subject, ns.owl('sameAs'), subject)] // @@ need prev subject
+    // dom.outlineManager.appendPropertyTRs(box, plist)
+    // dom.appendChild(plist)
 
-    dom.outlineManager.appendPropertyTRs(box, plist);
     return box;
   }
 
@@ -17694,7 +17697,7 @@ _fieldFunction.field[ns.ui('Multiple').uri] = function (dom, container, already,
     // delete button and move buttons
 
     if (kb.updater.editable(dataDoc.uri)) {
-      buttons.deleteButtonWithCheck(dom, subField, utils.label(property), deleteThisItem);
+      buttons.deleteButtonWithCheck(dom, subField, multipleUIlabel, deleteThisItem);
 
       if (ordered) {
         // Add controsl in a frame
@@ -17745,7 +17748,7 @@ _fieldFunction.field[ns.ui('Multiple').uri] = function (dom, container, already,
 
         var _shim = dom.createElement('div');
 
-        _shim.appendChild(subField); // Subfield has its own laytout
+        _shim.appendChild(subField); // Subfield has its own layout
 
 
         frame.appendChild(_shim);
@@ -17794,6 +17797,8 @@ _fieldFunction.field[ns.ui('Multiple').uri] = function (dom, container, already,
     return shim;
   }
 
+  var multipleUIlabel = kb.any(form, ui('label'));
+  if (!multipleUIlabel) multipleUIlabel = utils.label(property);
   var min = kb.any(form, ui('min')); // This is the minimum number -- default 0
 
   min = min ? 0 + min.value : 0;
@@ -17834,10 +17839,9 @@ _fieldFunction.field[ns.ui('Multiple').uri] = function (dom, container, already,
     img.setAttribute('src', plusIconURI); //  plus sign
 
     img.setAttribute('style', 'margin: 0.2em; width: 1.5em; height:1.5em');
-    img.title = 'Click to add one or more ' + utils.predicateLabel(property, reverse);
-    var prompt = tail.appendChild(dom.createElement('span'));
-    prompt.textContent = (values.length === 0 ? 'Add one or more ' : 'Add more ') + utils.predicateLabel(property, reverse); // utils.label(property)
-
+    img.title = 'Click to add another ' + multipleUIlabel;
+    var prompt = dom.createElement('span');
+    prompt.textContent = (values.length === 0 ? 'Add another ' : 'Add ') + multipleUIlabel;
     tail.addEventListener('click', /*#__PURE__*/function () {
       var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5(_eventNotUsed) {
         return _regenerator["default"].wrap(function _callee5$(_context5) {
@@ -17859,6 +17863,7 @@ _fieldFunction.field[ns.ui('Multiple').uri] = function (dom, container, already,
         return _ref3.apply(this, arguments);
       };
     }(), true);
+    tail.appendChild(prompt);
   }
 
   function createListIfNecessary() {
@@ -18133,23 +18138,28 @@ _fieldFunction.field[ns.ui('Classifier').uri] = function (dom, container, alread
  ** -- radio buttons
  ** -- auto-complete typing
  **
- ** Todo: Deal with multiple.  Maybe merge with multiple code.
+ ** TODO: according to ontology ui:choice can also have ns.ui('default') - this is not implemented yet
  */
 
 
 _fieldFunction.field[ns.ui('Choice').uri] = function (dom, container, already, subject, form, dataDoc, callbackFunction) {
   var ui = ns.ui;
   var kb = _solidLogic.store;
-  var multiple = false;
   var formDoc = form.doc ? form.doc() : null; // @@ if blank no way to know
 
+  var uiMultipleInUse = false; // this signals to ui:choice that it is part of a ui:multiple
+
+  var multiSelect = false;
   var p;
-  var box = dom.createElement('div'); // Set flexDirection column?
+  var box = dom.createElement('div');
+  box.setAttribute('class', 'choiceBox'); // Set flexDirection column?
 
   if (container) container.appendChild(box);
   var lhs = dom.createElement('div');
+  lhs.setAttribute('class', 'formFieldName choiceBox-label');
   box.appendChild(lhs);
   var rhs = dom.createElement('div');
+  rhs.setAttribute('class', 'formFieldValue choiceBox-selectBox');
   box.appendChild(rhs);
   var property = kb.any(form, ui('property'));
 
@@ -18158,26 +18168,38 @@ _fieldFunction.field[ns.ui('Choice').uri] = function (dom, container, already, s
   }
 
   lhs.appendChild((0, _basic.fieldLabel)(dom, property, form));
+  var uiFrom = kb.any(form, ui('from'));
+
+  if (!uiFrom) {
+    return (0, _error.errorMessageBlock)(dom, "No 'from' for Choice: " + form);
+  }
+
   var subForm = kb.any(form, ui('use')); // Optional
 
   var follow = kb.anyJS(form, ui('follow'), null, formDoc); // data doc moves to new subject?
 
   var possible = [];
   var possibleProperties;
-  var firstSelectOptionText = '* Select from ' + utils.label(subject, true) + ' *';
+  var firstSelectOptionText = '* Select for ' + utils.label(subject, true) + ' *'; // if we do NOT have a container it means it is a ui:Multiple
+  // only important for the first option text in select
+
+  if (!container) {
+    uiMultipleInUse = true;
+    firstSelectOptionText = utils.label(subject, true);
+  }
+
+  if (subject.termType === 'BlankNode') {
+    firstSelectOptionText = '* Select for ' + utils.label(property) + ' *';
+  }
+
   var opts = {
     form: form,
     subForm: subForm,
-    multiple: multiple,
+    multiSelect: multiSelect,
     firstSelectOptionText: firstSelectOptionText,
+    uiMultipleInUse: uiMultipleInUse,
     disambiguate: false
   };
-  var uiFrom = kb.any(form, ui('from'));
-
-  if (!uiFrom) {
-    return (0, _error.errorMessageBlock)(dom, "No 'from' for Choice: " + form);
-  }
-
   possible = kb.each(undefined, ns.rdf('type'), uiFrom, formDoc);
 
   for (var x in kb.findMembersNT(uiFrom)) {
@@ -18220,7 +18242,7 @@ _fieldFunction.field[ns.ui('Choice').uri] = function (dom, container, already, s
     opts.disambiguate = true;
   }
 
-  var sortedPossible = sortByLabel(possible); // TODO: this checks for any occurance regardles if it is set to true or false
+  var sortedPossible = sortByLabel(possible); // TODO: this checks for any occurrence, regardless of true or false setting
 
   if (kb.any(form, ui('canMintNew'))) {
     opts.mint = '* Create new *'; // @@ could be better
@@ -18461,7 +18483,8 @@ function promptForNew(dom, kb, subject, predicate, theClass, form, dataDoc, call
       b.setAttribute('type', 'button');
       b.setAttribute('style', 'float: right;');
       b.innerHTML = 'Goto ' + utils.label(theClass);
-      b.addEventListener('click', function (_e) {
+      b.addEventListener('click', // TODO fix dependency cycle to solid-panes by calling outlineManager
+      function (_e) {
         dom.outlineManager.GotoSubject(theClass, true, undefined, true, undefined);
       }, false);
       return box;
@@ -18596,9 +18619,10 @@ function makeDescription(dom, kb, subject, predicate, dataDoc, callbackFunction)
 // @param subject - a term, the subject of the statement(s) being edited.
 // @param predicate - a term, the predicate of the statement(s) being edited
 // @param possible - a list of terms, the possible value the object can take
-// @param options.multiple - Boolean - Whether more than one at a time is allowed
+// @param options.multiSelect - Boolean - Whether more than one at a time is allowed
 // @param options.firstSelectOptionText - a string to be displayed as the
-//                        option for none selected (for non multiple)
+//                        option for none selected (for non multiSelect)
+// @param options.uiMultipleInUse - signals that the ui:choise is used with a ui:multiple
 // @param options.mint - User may create thing if this sent to the prompt string eg "New foo"
 // @param options.subForm - If mint, then the form to be used for minting the new thing
 // @param dataDoc - The web document being edited
@@ -18664,7 +18688,7 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
       var opt = select.options[_i];
 
       if (opt.selected && opt.AJAR_mint) {
-        // not sure if this if is used because I cannot find mintClass
+        // not sure if this 'if' is used because I cannot find mintClass
         if (options.mintClass) {
           var thisForm = promptForNew(dom, kb, subject, predicate, options.mintClass, null, dataDoc, function (ok, body) {
             if (!ok) {
@@ -18680,7 +18704,7 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
         }
 
         is.push($rdf.st(subject, predicate, kb.sym(newObject), dataDoc));
-        if (uiFrom) is.push($rdf.st(newObject, ns.rdf('type'), kb.sym(uiFrom), dataDoc)); // not sure if this if is used because I cannot find mintStatementsFun
+        if (uiFrom) is.push($rdf.st(newObject, ns.rdf('type'), kb.sym(uiFrom), dataDoc)); // not sure if this 'if' is used because I cannot find mintStatementsFun
 
         if (options.mintStatementsFun) {
           is = is.concat(options.mintStatementsFun(newObject));
@@ -18722,19 +18746,21 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
         kb.updater.update(ds, is, function (uri, success, errorBody) {
           actual = getActual(); // refresh
 
-          if (!success) return select.parentNode.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating data in select: ' + errorBody));
-          if (callbackFunction) callbackFunction(success, {
-            widget: 'select',
-            event: 'new'
-          });
+          if (!success) select.parentNode.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating select: ' + errorBody));
+        });
+        if (callbackFunction) callbackFunction(ok, {
+          widget: 'select',
+          event: 'new'
         });
-      } else return select.parentNode.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating data in field of select: ' + body));
+      } else {
+        select.parentNode.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating data in field of select: ' + body));
+      }
     });
   };
 
   var select = dom.createElement('select');
   select.setAttribute('style', style.formSelectSTyle);
-  if (options.multiple) select.setAttribute('multiple', 'true');
+  if (options.multiSelect) select.setAttribute('multiSelect', 'true');
   select.currentURI = null;
 
   select.refresh = function () {
@@ -18785,13 +18811,13 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
     select.insertBefore(mint, select.firstChild);
   }
 
-  if (!select.currentURI && !options.multiple) {
+  if (!select.currentURI && options.uiMultipleInUse) {
     var prompt = dom.createElement('option');
     prompt.appendChild(dom.createTextNode(options.firstSelectOptionText));
-    prompt.selected = true;
     prompt.disabled = true;
     prompt.value = true;
     prompt.hidden = true;
+    prompt.selected = true;
     select.insertBefore(prompt, select.firstChild);
   }
 
@@ -18811,11 +18837,11 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
 function makeSelectForCategory(dom, kb, subject, category, dataDoc, callbackFunction) {
   var du = kb.any(category, ns.owl('disjointUnionOf'));
   var subs;
-  var multiple = false;
+  var multiSelect = false;
 
   if (!du) {
     subs = kb.each(undefined, ns.rdfs('subClassOf'), category);
-    multiple = true;
+    multiSelect = true;
   } else {
     subs = du.elements;
   }
@@ -18823,15 +18849,15 @@ function makeSelectForCategory(dom, kb, subject, category, dataDoc, callbackFunc
   log.debug('Select list length ' + subs.length);
 
   if (subs.length === 0) {
-    return (0, _error.errorMessageBlock)(dom, "Can't do " + (multiple ? 'multiple ' : '') + 'selector with no subclasses of category: ' + category);
+    return (0, _error.errorMessageBlock)(dom, "Can't do " + (multiSelect ? 'multiple ' : '') + 'selector with no subclasses of category: ' + category);
   }
 
   if (subs.length === 1) {
-    return (0, _error.errorMessageBlock)(dom, "Can't do " + (multiple ? 'multiple ' : '') + 'selector with only 1 subclass of category: ' + category + ':' + subs[1]);
+    return (0, _error.errorMessageBlock)(dom, "Can't do " + (multiSelect ? 'multiple ' : '') + 'selector with only 1 subclass of category: ' + category + ':' + subs[1]);
   }
 
   return makeSelectForOptions(dom, kb, subject, ns.rdf('type'), subs, null, {
-    multiple: multiple
+    multiSelect: multiSelect
   }, dataDoc, callbackFunction);
 }
 /** Make SELECT element to select subclasses recurively