framework7 6.3.4 → 7.0.0-beta.3

package/cjs/components/color-picker/modules/hsb-sliders.js

@@ -1,206 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _dom = _interopRequireDefault(require("../../../shared/dom7"));
-
-var _utils = require("../../../shared/utils");
-
-var _$jsx = _interopRequireDefault(require("../../../shared/$jsx"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/** @jsx $jsx */
-var _default = {
-  render: function render(self) {
-    var _self$params = self.params,
-        sliderLabel = _self$params.sliderLabel,
-        sliderValue = _self$params.sliderValue,
-        sliderValueEditable = _self$params.sliderValueEditable,
-        hueLabelText = _self$params.hueLabelText,
-        saturationLabelText = _self$params.saturationLabelText,
-        brightnessLabelText = _self$params.brightnessLabelText;
-    return (0, _$jsx.default)("div", {
-      class: "color-picker-module color-picker-module-hsb-sliders"
-    }, (0, _$jsx.default)("div", {
-      class: "color-picker-slider-wrap"
-    }, sliderLabel && (0, _$jsx.default)("div", {
-      class: "color-picker-slider-label"
-    }, hueLabelText), (0, _$jsx.default)("div", {
-      class: "range-slider color-picker-slider color-picker-slider-hue"
-    }), sliderValue && (0, _$jsx.default)("div", {
-      class: "color-picker-slider-value"
-    }, sliderValueEditable ? (0, _$jsx.default)("input", {
-      type: "number",
-      step: "0.1",
-      min: "0",
-      max: "360",
-      class: "color-picker-value-hue",
-      "data-color-index": "0"
-    }) : (0, _$jsx.default)("span", {
-      class: "color-picker-value-hue"
-    }))), (0, _$jsx.default)("div", {
-      class: "color-picker-slider-wrap"
-    }, sliderLabel && (0, _$jsx.default)("div", {
-      class: "color-picker-slider-label"
-    }, saturationLabelText), (0, _$jsx.default)("div", {
-      class: "range-slider color-picker-slider color-picker-slider-saturation"
-    }), sliderValue && (0, _$jsx.default)("div", {
-      class: "color-picker-slider-value"
-    }, sliderValueEditable ? (0, _$jsx.default)("input", {
-      type: "number",
-      step: "0.1",
-      min: "0",
-      max: "100",
-      class: "color-picker-value-saturation",
-      "data-color-index": "1"
-    }) : (0, _$jsx.default)("span", {
-      class: "color-picker-value-saturation"
-    }))), (0, _$jsx.default)("div", {
-      class: "color-picker-slider-wrap"
-    }, sliderLabel && (0, _$jsx.default)("div", {
-      class: "color-picker-slider-label"
-    }, brightnessLabelText), (0, _$jsx.default)("div", {
-      class: "range-slider color-picker-slider color-picker-slider-brightness"
-    }), sliderValue && (0, _$jsx.default)("div", {
-      class: "color-picker-slider-value"
-    }, sliderValueEditable ? (0, _$jsx.default)("input", {
-      type: "number",
-      step: "0.1",
-      min: "0",
-      max: "100",
-      class: "color-picker-value-brightness",
-      "data-color-index": "2"
-    }) : (0, _$jsx.default)("span", {
-      class: "color-picker-value-brightness"
-    }))));
-  },
-  init: function init(self) {
-    self.hueRangeSlider = self.app.range.create({
-      el: self.$el.find('.color-picker-slider-hue'),
-      min: 0,
-      max: 360,
-      step: 0.1,
-      value: 0,
-      on: {
-        change: function change(range, value) {
-          self.setValue({
-            hue: value
-          });
-        }
-      }
-    });
-    self.saturationRangeSlider = self.app.range.create({
-      el: self.$el.find('.color-picker-slider-saturation'),
-      min: 0,
-      max: 1,
-      step: 0.001,
-      value: 0,
-      on: {
-        change: function change(range, value) {
-          var s = Math.floor(value * 1000) / 1000;
-          self.setValue({
-            hsb: [self.value.hsb[0], s, self.value.hsb[2]]
-          });
-        }
-      }
-    });
-    self.brightnessRangeSlider = self.app.range.create({
-      el: self.$el.find('.color-picker-slider-brightness'),
-      min: 0,
-      max: 1,
-      step: 0.001,
-      value: 0,
-      on: {
-        change: function change(range, value) {
-          var b = Math.floor(value * 1000) / 1000;
-          self.setValue({
-            hsb: [self.value.hsb[0], self.value.hsb[1], b]
-          });
-        }
-      }
-    });
-
-    function handleInputChange(e) {
-      var hsb = [].concat(self.value.hsb);
-      var index = parseInt((0, _dom.default)(e.target).attr('data-color-index'), 10);
-      var value = parseFloat(e.target.value);
-
-      if (Number.isNaN(value)) {
-        e.target.value = hsb[index];
-        return;
-      }
-
-      if (index === 0) {
-        value = Math.max(0, Math.min(360, value));
-      } else {
-        value = Math.max(0, Math.min(100, value)) / 100;
-      }
-
-      hsb[index] = value;
-      self.setValue({
-        hsb: hsb
-      });
-    }
-
-    self.$el.on('change', '.color-picker-module-hsb-sliders input', handleInputChange);
-
-    self.destroyHsbSlidersEvents = function destroyHsbSlidersEvents() {
-      self.$el.off('change', '.color-picker-module-hsb-sliders input', handleInputChange);
-    };
-  },
-  update: function update(self) {
-    var app = self.app,
-        value = self.value;
-    var _self$params2 = self.params,
-        sliderValue = _self$params2.sliderValue,
-        sliderValueEditable = _self$params2.sliderValueEditable;
-    var hsb = value.hsb,
-        hue = value.hue;
-    self.hueRangeSlider.value = hue;
-    self.saturationRangeSlider.value = hsb[1];
-    self.brightnessRangeSlider.value = hsb[2];
-    self.hueRangeSlider.layout();
-    self.saturationRangeSlider.layout();
-    self.brightnessRangeSlider.layout();
-    var hslCurrent = (0, _utils.colorHsbToHsl)(hsb[0], hsb[1], 1);
-    var hslLeft = (0, _utils.colorHsbToHsl)(hsb[0], 0, 1);
-    var hslRight = (0, _utils.colorHsbToHsl)(hsb[0], 1, 1);
-    var brightness = hsb[2];
-    self.hueRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', "hsl(" + hue + ", 100%, 50%)");
-    self.saturationRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', "hsl(" + hslCurrent[0] + ", " + hslCurrent[1] * 100 + "%, " + hslCurrent[2] * 100 + "%)");
-    self.brightnessRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', "rgb(" + brightness * 255 + ", " + brightness * 255 + ", " + brightness * 255 + ")");
-    self.saturationRangeSlider.$el.find('.range-bar').css('background-image', "linear-gradient(" + (app.rtl ? 'to left' : 'to right') + ", hsl(" + hslLeft[0] + ", " + hslLeft[1] * 100 + "%, " + hslLeft[2] * 100 + "%), hsl(" + hslRight[0] + ", " + hslRight[1] * 100 + "%, " + hslRight[2] * 100 + "%))");
-
-    if (sliderValue && sliderValueEditable) {
-      self.$el.find('input.color-picker-value-hue').val("" + hue);
-      self.$el.find('input.color-picker-value-saturation').val("" + hsb[1] * 1000 / 10);
-      self.$el.find('input.color-picker-value-brightness').val("" + hsb[2] * 1000 / 10);
-    } else if (sliderValue) {
-      self.$el.find('span.color-picker-value-hue').text("" + hue);
-      self.$el.find('span.color-picker-value-saturation').text("" + hsb[1] * 1000 / 10);
-      self.$el.find('span.color-picker-value-brightness').text("" + hsb[2] * 1000 / 10);
-    }
-  },
-  destroy: function destroy(self) {
-    if (self.hueRangeSlider && self.hueRangeSlider.destroy) {
-      self.hueRangeSlider.destroy();
-    }
-
-    if (self.saturationRangeSlider && self.saturationRangeSlider.destroy) {
-      self.saturationRangeSlider.destroy();
-    }
-
-    if (self.brightnessRangeSlider && self.brightnessRangeSlider.destroy) {
-      self.brightnessRangeSlider.destroy();
-    }
-
-    delete self.hueRangeSlider;
-    delete self.saturationRangeSlider;
-    delete self.brightnessRangeSlider;
-    if (self.destroyHsbSlidersEvents) self.destroyHsbSlidersEvents();
-    delete self.destroyHsbSlidersEvents;
-  }
-};
-exports.default = _default;

package/cjs/components/color-picker/modules/hue-slider.js

@@ -1,78 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _$jsx = _interopRequireDefault(require("../../../shared/$jsx"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/** @jsx $jsx */
-var _default = {
-  render: function render(self) {
-    var _self$params = self.params,
-        sliderLabel = _self$params.sliderLabel,
-        sliderValue = _self$params.sliderValue,
-        sliderValueEditable = _self$params.sliderValueEditable,
-        hueLabelText = _self$params.hueLabelText;
-    return (0, _$jsx.default)("div", {
-      class: "color-picker-module color-picker-module-hue-slider"
-    }, (0, _$jsx.default)("div", {
-      class: "color-picker-slider-wrap"
-    }, sliderLabel && (0, _$jsx.default)("div", {
-      class: "color-picker-slider-label"
-    }, hueLabelText), (0, _$jsx.default)("div", {
-      class: "range-slider color-picker-slider color-picker-slider-hue"
-    }), sliderValue && (0, _$jsx.default)("div", {
-      class: "color-picker-slider-value"
-    }, sliderValueEditable ? (0, _$jsx.default)("input", {
-      type: "number",
-      step: "0.1",
-      min: "0",
-      max: "360",
-      class: "color-picker-value-hue"
-    }) : (0, _$jsx.default)("span", {
-      class: "color-picker-value-hue"
-    }))));
-  },
-  init: function init(self) {
-    self.hueRangeSlider = self.app.range.create({
-      el: self.$el.find('.color-picker-slider-hue'),
-      min: 0,
-      max: 360,
-      step: 0.1,
-      value: 0,
-      on: {
-        change: function change(range, value) {
-          self.setValue({
-            hue: value
-          });
-        }
-      }
-    });
-  },
-  update: function update(self) {
-    var value = self.value;
-    var _self$params2 = self.params,
-        sliderValue = _self$params2.sliderValue,
-        sliderValueEditable = _self$params2.sliderValueEditable;
-    var hue = value.hue;
-    self.hueRangeSlider.value = hue;
-    self.hueRangeSlider.layout();
-    self.hueRangeSlider.$el[0].style.setProperty('--f7-range-knob-color', "hsl(" + hue + ", 100%, 50%)");
-
-    if (sliderValue && sliderValueEditable) {
-      self.$el.find('input.color-picker-value-hue').val("" + hue);
-    } else if (sliderValue) {
-      self.$el.find('span.color-picker-value-hue').text("" + hue);
-    }
-  },
-  destroy: function destroy(self) {
-    if (self.hueRangeSlider && self.hueRangeSlider.destroy) {
-      self.hueRangeSlider.destroy();
-    }
-
-    delete self.hueRangeSlider;
-  }
-};
-exports.default = _default;

package/cjs/components/color-picker/modules/initial-current-colors.js

@@ -1,54 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _$jsx = _interopRequireDefault(require("../../../shared/$jsx"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/** @jsx $jsx */
-var _default = {
-  render: function render() {
-    return (0, _$jsx.default)("div", {
-      class: "color-picker-module color-picker-module-initial-current-colors"
-    }, (0, _$jsx.default)("div", {
-      class: "color-picker-initial-current-colors"
-    }, (0, _$jsx.default)("div", {
-      class: "color-picker-initial-color"
-    }), (0, _$jsx.default)("div", {
-      class: "color-picker-current-color"
-    })));
-  },
-  init: function init(self) {
-    function handleInitialColorClick() {
-      if (self.initialValue) {
-        var _self$initialValue = self.initialValue,
-            hex = _self$initialValue.hex,
-            alpha = _self$initialValue.alpha;
-        self.setValue({
-          hex: hex,
-          alpha: alpha
-        });
-      }
-    }
-
-    self.$el.on('click', '.color-picker-initial-color', handleInitialColorClick);
-
-    self.destroyInitialCurrentEvents = function destroyInitialCurrentEvents() {
-      self.$el.off('click', '.color-picker-initial-color', handleInitialColorClick);
-    };
-  },
-  update: function update(self) {
-    self.$el.find('.color-picker-module-initial-current-colors .color-picker-initial-color').css('background-color', self.initialValue.hex);
-    self.$el.find('.color-picker-module-initial-current-colors .color-picker-current-color').css('background-color', self.value.hex);
-  },
-  destroy: function destroy(self) {
-    if (self.destroyInitialCurrentEvents) {
-      self.destroyInitialCurrentEvents();
-    }
-
-    delete self.destroyInitialCurrentEvents;
-  }
-};
-exports.default = _default;

package/cjs/components/color-picker/modules/palette.js

@@ -1,61 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _dom = _interopRequireDefault(require("../../../shared/dom7"));
-
-var _$jsx = _interopRequireDefault(require("../../../shared/$jsx"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/* eslint indent: ["off"] */
-
-/** @jsx $jsx */
-var _default = {
-  render: function render(self) {
-    return (0, _$jsx.default)("div", {
-      class: "color-picker-module color-picker-module-palette"
-    }, (0, _$jsx.default)("div", {
-      class: "color-picker-palette"
-    }, self.params.palette.map(function (p) {
-      if (Array.isArray(p)) {
-        var row = '<div class="color-picker-palette-row">'; // prettier-ignore
-
-        row += p.map(function (c) {
-          return "\n                <div class=\"color-picker-palette-value\" data-palette-color=\"" + c + "\" style=\"background-color: " + c + "\"></div>\n              ";
-        }).join('');
-        row += '</div>';
-        return row;
-      }
-
-      return (0, _$jsx.default)("div", {
-        class: "color-picker-palette-value",
-        "data-palette-color": p,
-        style: "background-color: " + p
-      });
-    })));
-  },
-  init: function init(self) {
-    function handlePaletteClick(e) {
-      var hex = (0, _dom.default)(e.target).attr('data-palette-color');
-      self.setValue({
-        hex: hex
-      });
-    }
-
-    self.$el.on('click', '.color-picker-module-palette .color-picker-palette-value', handlePaletteClick);
-
-    self.destroyPaletteEvents = function destroyPaletteEvents() {
-      self.$el.off('click', '.color-picker-module-hex input', handlePaletteClick);
-    };
-  },
-  destroy: function destroy(self) {
-    if (self.destroyPaletteEvents) {
-      self.destroyPaletteEvents();
-    }
-
-    delete self.destroyPaletteEvents;
-  }
-};
-exports.default = _default;

package/cjs/components/color-picker/modules/rgb-bars.js

@@ -1,196 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _dom = _interopRequireDefault(require("../../../shared/dom7"));
-
-var _$jsx = _interopRequireDefault(require("../../../shared/$jsx"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/** @jsx $jsx */
-var _default = {
-  render: function render(self) {
-    var _self$params = self.params,
-        barLabel = _self$params.barLabel,
-        barValue = _self$params.barValue,
-        barValueEditable = _self$params.barValueEditable,
-        redLabelText = _self$params.redLabelText,
-        greenLabelText = _self$params.greenLabelText,
-        blueLabelText = _self$params.blueLabelText;
-    return (0, _$jsx.default)("div", {
-      class: "color-picker-module color-picker-module-rgb-bars"
-    }, (0, _$jsx.default)("div", {
-      class: "color-picker-bar-wrap"
-    }, barLabel && (0, _$jsx.default)("div", {
-      class: "color-picker-bar-label"
-    }, redLabelText), (0, _$jsx.default)("div", {
-      class: "range-slider color-picker-bar color-picker-bar-red"
-    }), barValue && (0, _$jsx.default)("div", {
-      class: "color-picker-bar-value"
-    }, barValueEditable ? (0, _$jsx.default)("input", {
-      type: "number",
-      step: "1",
-      min: "0",
-      max: "255",
-      class: "color-picker-value-bar-red",
-      "data-color-index": "0"
-    }) : (0, _$jsx.default)("span", {
-      class: "color-picker-value-bar-red"
-    }))), (0, _$jsx.default)("div", {
-      class: "color-picker-bar-wrap"
-    }, barLabel && (0, _$jsx.default)("div", {
-      class: "color-picker-bar-label"
-    }, greenLabelText), (0, _$jsx.default)("div", {
-      class: "range-slider color-picker-bar color-picker-bar-green"
-    }), barValue && (0, _$jsx.default)("div", {
-      class: "color-picker-bar-value"
-    }, barValueEditable ? (0, _$jsx.default)("input", {
-      type: "number",
-      step: "1",
-      min: "0",
-      max: "255",
-      class: "color-picker-value-bar-green",
-      "data-color-index": "1"
-    }) : (0, _$jsx.default)("span", {
-      class: "color-picker-value-bar-green"
-    }))), (0, _$jsx.default)("div", {
-      class: "color-picker-bar-wrap"
-    }, barLabel && (0, _$jsx.default)("div", {
-      class: "color-picker-bar-label"
-    }, blueLabelText), (0, _$jsx.default)("div", {
-      class: "range-slider color-picker-bar color-picker-bar-blue"
-    }), barValue && (0, _$jsx.default)("div", {
-      class: "color-picker-bar-value"
-    }, barValueEditable ? (0, _$jsx.default)("input", {
-      type: "number",
-      step: "1",
-      min: "0",
-      max: "255",
-      class: "color-picker-value-bar-blue",
-      "data-color-index": "2"
-    }) : (0, _$jsx.default)("span", {
-      class: "color-picker-value-bar-blue"
-    }))));
-  },
-  init: function init(self) {
-    self.redBar = self.app.range.create({
-      el: self.$el.find('.color-picker-bar-red'),
-      min: 0,
-      max: 255,
-      step: 1,
-      value: 0,
-      vertical: true,
-      on: {
-        change: function change(range, value) {
-          self.setValue({
-            rgb: [value, self.value.rgb[1], self.value.rgb[2]]
-          });
-        }
-      }
-    });
-    self.greenBar = self.app.range.create({
-      el: self.$el.find('.color-picker-bar-green'),
-      min: 0,
-      max: 255,
-      step: 1,
-      value: 0,
-      vertical: true,
-      on: {
-        change: function change(range, value) {
-          self.setValue({
-            rgb: [self.value.rgb[0], value, self.value.rgb[2]]
-          });
-        }
-      }
-    });
-    self.blueBar = self.app.range.create({
-      el: self.$el.find('.color-picker-bar-blue'),
-      min: 0,
-      max: 255,
-      step: 1,
-      value: 0,
-      vertical: true,
-      on: {
-        change: function change(range, value) {
-          self.setValue({
-            rgb: [self.value.rgb[0], self.value.rgb[1], value]
-          });
-        }
-      }
-    });
-
-    function handleInputChange(e) {
-      var rgb = [].concat(self.value.rgb);
-      var index = parseInt((0, _dom.default)(e.target).attr('data-color-index'), 10);
-      var value = parseInt(e.target.value, 10);
-
-      if (Number.isNaN(value)) {
-        e.target.value = rgb[index];
-        return;
-      }
-
-      value = Math.max(0, Math.min(255, value));
-      rgb[index] = value;
-      self.setValue({
-        rgb: rgb
-      });
-    }
-
-    self.$el.on('change', '.color-picker-module-rgb-bars input', handleInputChange);
-
-    self.destroyRgbBarsEvents = function destroyRgbBarsEvents() {
-      self.$el.off('change', '.color-picker-module-rgb-bars input', handleInputChange);
-    };
-  },
-  update: function update(self) {
-    var value = self.value,
-        redBar = self.redBar,
-        greenBar = self.greenBar,
-        blueBar = self.blueBar;
-    var _self$params2 = self.params,
-        barValue = _self$params2.barValue,
-        barValueEditable = _self$params2.barValueEditable;
-    var rgb = value.rgb;
-    redBar.value = rgb[0];
-    greenBar.value = rgb[1];
-    blueBar.value = rgb[2];
-    redBar.layout();
-    greenBar.layout();
-    blueBar.layout();
-    redBar.$el.find('.range-bar').css('background-image', "linear-gradient(to top, rgb(0, " + rgb[1] + ", " + rgb[2] + "), rgb(255, " + rgb[1] + ", " + rgb[2] + "))");
-    greenBar.$el.find('.range-bar').css('background-image', "linear-gradient(to top, rgb(" + rgb[0] + ", 0, " + rgb[2] + "), rgb(" + rgb[0] + ", 255, " + rgb[2] + "))");
-    blueBar.$el.find('.range-bar').css('background-image', "linear-gradient(to top, rgb(" + rgb[0] + ", " + rgb[1] + ", 0), rgb(" + rgb[0] + ", " + rgb[1] + ", 255))");
-
-    if (barValue && barValueEditable) {
-      self.$el.find('input.color-picker-value-bar-red').val(rgb[0]);
-      self.$el.find('input.color-picker-value-bar-green').val(rgb[1]);
-      self.$el.find('input.color-picker-value-bar-blue').val(rgb[2]);
-    } else if (barValue) {
-      self.$el.find('span.color-picker-value-bar-red').text(rgb[0]);
-      self.$el.find('span.color-picker-value-bar-green').text(rgb[1]);
-      self.$el.find('span.color-picker-value-bar-blue').text(rgb[2]);
-    }
-  },
-  destroy: function destroy(self) {
-    if (self.redBar && self.redBar.destroy) {
-      self.redBar.destroy();
-    }
-
-    if (self.greenBar && self.greenBar.destroy) {
-      self.greenBar.destroy();
-    }
-
-    if (self.blueBar && self.blueBar.destroy) {
-      self.blueBar.destroy();
-    }
-
-    delete self.redBar;
-    delete self.greenBar;
-    delete self.blueBar;
-    if (self.destroyRgbBarsEvents) self.destroyRgbBarsEvents();
-    delete self.destroyRgbBarsEvents;
-  }
-};
-exports.default = _default;