framework7 8.0.0-beta.7 → 8.0.0-beta.9

package/modules/component/component-class.js

@@ -6,6 +6,118 @@ import { id as generateId, merge, eventNameToColonCase, deleteProps } from '../.
 import vdom from './vdom.js';
 import patch from './patch.js';
 import $jsx from './$jsx.js';
+
+/* eslint-disable no-shadow */
+/* eslint-disable no-return-assign */
+/* eslint-disable no-plusplus */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-sequences */
+const types = [{
+  name: 'array',
+  init: i => i,
+  type: i => [i].find(Array.isArray),
+  update: (i, o) => [o].filter(Array.isArray).find(() => (i.length = 0, i.push(...o))),
+  insert: function (i, x, o) {
+    if (o === void 0) {
+      o = [];
+    }
+    return i.splice(Math.max(x, 0), 0, ...[o].flat());
+  },
+  replace: function (i, x, o) {
+    if (o === void 0) {
+      o = [];
+    }
+    return i.splice(Math.max(x, 0), Math.min(++x, 1), ...[o].flat());
+  },
+  append: function (i, o) {
+    if (o === void 0) {
+      o = [];
+    }
+    return i.push(...[o].flat());
+  },
+  prepend: function (i, o) {
+    if (o === void 0) {
+      o = [];
+    }
+    return i.unshift(...[o].flat());
+  },
+  swap: (i, a, b) => {
+    [i[a], i[b]] = [i[b], i[a]];
+  },
+  fromTo: function (i, a, b) {
+    if (b === void 0) {
+      b = a;
+    }
+    return i.splice(Math.max(b, 0), 0, ...i.splice(Math.max(a, 0), 1));
+  },
+  remove: function (i, o, a) {
+    if (a === void 0) {
+      a = i.map((_, x) => x);
+    }
+    return [o].flat().filter(i => a.includes(i)).sort((a, b) => b - a).forEach(x => i.splice(x, 1));
+  },
+  clear: i => i.length = 0
+}, {
+  name: 'object',
+  init: i => i,
+  type: i => [i].filter(i => [i !== null, i !== undefined].every(i => i)).find(i => Object.getPrototypeOf(i) === Object.prototype),
+  update: (i, o) => Object.assign(i, o),
+  insert: () => {},
+  replace: () => {},
+  append: () => {},
+  prepend: () => {},
+  swap: () => ({}),
+  // N/A
+  fromTo: () => ({}),
+  // N/A
+  remove: (i, o) => [o].flat().forEach(k => delete i[k]),
+  clear: i => Object.keys(i).forEach(k => delete i[k])
+}, {
+  name: 'atoms',
+  type: () => true,
+  init: function (i, o) {
+    if (o === void 0) {
+      o = {};
+    }
+    return Object.defineProperty(o, 'value', {
+      get: () => i,
+      set: v => {
+        // eslint-disable-next-line
+        i = v;
+      }
+    }), o;
+  },
+  update: function (i, v) {
+    if (v === void 0) {
+      v = i.value;
+    }
+    i.value = v;
+  },
+  insert: () => ({}),
+  // N/A
+  replace: () => ({}),
+  // N/A
+  append: () => ({}),
+  // N/A
+  prepend: () => ({}),
+  // N/A
+  swap: () => ({}),
+  // N/A
+  fromTo: () => ({}),
+  // N/A
+  remove: () => ({}),
+  // N/A
+  clear: i => {
+    i.value = undefined;
+  }
+}];
+
+/* eslint-enable no-shadow */
+/* eslint-enable no-return-assign */
+/* eslint-enable no-plusplus */
+/* eslint-enable no-param-reassign */
+/* eslint-enable no-sequences */
+
 class Component {
   constructor(app, component, props, _temp) {
     if (props === void 0) {
@@ -150,6 +262,66 @@ class Component {
     });
     return $store;
   }
+
+  /* eslint-disable no-sequences */
+  getUseState() {
+    var _this = this;
+    return o => {
+      const obj = [o].reduce(function (t, _i, _x, _a, i) {
+        if (i === void 0) {
+          i = t.init(_i);
+        }
+        return {
+          state: i,
+          update: v => (t.update(i, v), _this.update()),
+          remove: v => (t.remove(i, v), _this.update()),
+          clear: () => (t.clear(i), _this.update()),
+          insert: (x, v) => (t.insert(i, x, v), _this.update()),
+          replace: (x, v) => (t.replace(i, x, v), _this.update()),
+          append: v => (t.append(i, v), _this.update()),
+          prepend: v => (t.prepend(i, v), _this.update()),
+          swap: (a, b) => (t.swap(i, a, b), _this.update()),
+          fromTo: (a, b) => (t.fromTo(i, a, b), _this.update()),
+          method: function (f) {
+            if (f === void 0) {
+              f = () => ({});
+            }
+            return f(i), _this.update();
+          },
+          async: function (f) {
+            if (f === void 0) {
+              f = () => Promise.reject(i);
+            }
+            return f(i).then(() => _this.update());
+          }
+        };
+      }, types.find(i => i.type(o)));
+      obj.length = 12;
+      obj[Symbol.iterator] = function Iterate() {
+        const values = Object.values(this);
+        values.splice(values.indexOf(12), 1);
+        let index = 0;
+        return {
+          next() {
+            if (index < values.length) {
+              const val = values[index];
+              index += 1;
+              return {
+                value: val,
+                done: false
+              };
+            }
+            return {
+              done: true
+            };
+          }
+        };
+      };
+      return obj;
+    };
+  }
+  /* eslint-enable no-sequences */
+
   getComponentContext(includeHooks) {
     const ctx = {
       $f7route: this.context.f7route,
@@ -165,7 +337,8 @@ class Component {
       $emit: this.emit.bind(this),
       $store: this.getComponentStore(),
       $ref: this.getComponentRef(),
-      $el: {}
+      $el: {},
+      $useState: this.getUseState()
     };
     Object.defineProperty(ctx.$el, 'value', {
       get: () => {

package/modules/component/component.d.ts

@@ -34,6 +34,22 @@ export interface ComponentContext {
   /** Create reactive variable */
   $ref: (initialValue: any) => { value: any };
 
+  /** Create reactive state */
+  $useState: (initialValue: any) => {
+    state: any;
+    update: (value: any) => void;
+    remove: (pos: any) => void;
+    clear: () => void;
+    insert: (pos: any, value: any) => void;
+    replace: (pos: any, value: any) => void;
+    append: (value: any) => void;
+    prepend: (value: any) => void;
+    swap: (a: any, b: any) => void;
+    fromTo: (a: any, b: any) => void;
+    method: (f: any) => void;
+    async: (f: any) => void;
+  };
+
   /** Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.  */
   $tick: (callback?: () => void) => Promise<any>;
   /** Update/rerender component when state/data changed  */

package/modules/component/parse-component.js

@@ -46,6 +46,7 @@ function parseComponent(componentString) {
           var $update = $$ctx.$update;
           var $store = $$ctx.$store;
           var $ref = $$ctx.$ref;
+          var $useState = $$ctx.$useState;
 
           return $h\`${template}\`
         }

package/modules/touch/touch.js

@@ -454,11 +454,11 @@ export default {
       tapHoldPreventClicks: true,
       // Active State
       activeState: true,
-      activeStateElements: 'a, button, label, span, .actions-button, .stepper-button, .stepper-button-plus, .stepper-button-minus, .card-expandable, .menu-item, .link, .item-link, .accordion-item-toggle',
+      activeStateElements: 'a, button, label, span, .actions-button, .stepper-button, .stepper-button-plus, .stepper-button-minus, .card-expandable, .link, .item-link, .accordion-item-toggle',
       activeStateOnMouseMove: false,
       mdTouchRipple: true,
       iosTouchRipple: false,
-      touchRippleElements: '.ripple, .link, .item-link, .list label.item-content, .list-button, .links-list a, .button, button, .input-clear-button, .dialog-button, .tab-link, .item-radio, .item-checkbox, .actions-button, .searchbar-disable-button, .fab a, .checkbox, .radio, .data-table .sortable-cell:not(.input-cell), .notification-close-button, .stepper-button, .stepper-button-minus, .stepper-button-plus, .menu-item-content, .list.accordion-list .accordion-item-toggle',
+      touchRippleElements: '.ripple, .link, .item-link, .list label.item-content, .list-button, .links-list a, .button, button, .input-clear-button, .dialog-button, .tab-link, .item-radio, .item-checkbox, .actions-button, .searchbar-disable-button, .fab a, .checkbox, .radio, .data-table .sortable-cell:not(.input-cell), .notification-close-button, .stepper-button, .stepper-button-minus, .stepper-button-plus, .list.accordion-list .accordion-item-toggle',
       touchRippleInsetElements: '.ripple-inset, .icon-only, .searchbar-disable-button, .input-clear-button, .notification-close-button, .md .navbar .link.back'
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7",
-  "version": "8.0.0-beta.7",
+  "version": "8.0.0-beta.9",
   "description": "Full featured mobile HTML framework for building iOS & Android apps",
   "type": "module",
   "exports": {
@@ -436,5 +436,5 @@
     "ssr-window": "^4.0.2",
     "swiper": "^9.1.1"
   },
-  "releaseDate": "March 27, 2023"
+  "releaseDate": "March 31, 2023"
 }