@plasmicpkgs/plasmic-keen-slider 0.0.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Latipov Abdukhamid
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+Plasmic components and registration calls for Keen slider

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import registerComponent, { CodeComponentMeta } from "@plasmicapp/host/registerComponent";
+import React from "react";
+import { KeenSliderOptions } from "keen-slider";
+interface KeenSliderProps extends KeenSliderOptions {
+}
+export declare const sliderMeta: CodeComponentMeta<KeenSliderProps>;
+export declare const SliderWrapper: React.ForwardRefExoticComponent<KeenSliderProps & {
+    className?: string | undefined;
+    editingSlide?: number | undefined;
+    children?: any;
+    setControlContextData?: ((data: {
+        editingSlide: number | undefined;
+    }) => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare function registerSlider(loader?: {
+    registerComponent: typeof registerComponent;
+}, customSliderMeta?: CodeComponentMeta<KeenSliderOptions>): void;
+export {};

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./plasmic-keen-slider.cjs.production.min.js')
+} else {
+  module.exports = require('./plasmic-keen-slider.cjs.development.js')
+}

package/dist/plasmic-keen-slider.cjs.development.js

@@ -0,0 +1,320 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var registerComponent = _interopDefault(require('@plasmicapp/host/registerComponent'));
+var antd = require('antd');
+var React = require('react');
+var React__default = _interopDefault(React);
+var react = require('keen-slider/react');
+var composeRefs = _interopDefault(require('@seznam/compose-react-refs'));
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+var _excluded = ["editingSlide", "children", "className", "setControlContextData"];
+var Option = antd.Select.Option;
+var ResizePlugin = function ResizePlugin(slider) {
+  var observer = new ResizeObserver(function () {
+    slider.update();
+  });
+  slider.on("created", function () {
+    observer.observe(slider.container);
+  });
+  slider.on("destroyed", function () {
+    observer.unobserve(slider.container);
+  });
+};
+function CurrentSlideDropdown(_ref) {
+  var _componentProps$editi, _componentProps$child;
+  var componentProps = _ref.componentProps,
+    studioOps = _ref.studioOps;
+  var editingSlide = (_componentProps$editi = componentProps.editingSlide) != null ? _componentProps$editi : 0;
+  var slidesCnt = (_componentProps$child = componentProps.children.length) != null ? _componentProps$child : componentProps.children.type === "img" ? 1 : 0;
+  var options = Array.from({
+    length: slidesCnt
+  }, function (_, i) {
+    return i;
+  }).map(function (i) {
+    return React__default.createElement(Option, {
+      value: i.toString()
+    }, "Slide ", i + 1);
+  });
+  var handleChange = function handleChange(value) {
+    var slideIdx = Number(value);
+    studioOps.updateProps({
+      editingSlide: slideIdx % slidesCnt
+    });
+  };
+  return React__default.createElement("div", {
+    style: {
+      width: "100%",
+      display: "flex",
+      flexDirection: "row",
+      gap: "10px",
+      justifyContent: "space-between"
+    }
+  }, React__default.createElement("div", null, "Current slide:"), React__default.createElement(antd.Select, {
+    defaultValue: editingSlide.toString(),
+    style: {
+      width: "100%"
+    },
+    onChange: handleChange,
+    value: editingSlide.toString()
+  }, options));
+}
+function NavigateSlides(_ref2) {
+  var _componentProps$editi2;
+  var componentProps = _ref2.componentProps,
+    studioOps = _ref2.studioOps;
+  var slidesCnt = componentProps.children.length;
+  var editingSlide = (_componentProps$editi2 = componentProps.editingSlide) != null ? _componentProps$editi2 : 0;
+  return React__default.createElement("div", {
+    style: {
+      width: "100%",
+      display: "flex",
+      flexDirection: "row",
+      gap: "10px",
+      justifyContent: "space-between"
+    }
+  }, React__default.createElement(antd.Button, {
+    style: {
+      width: "100%"
+    },
+    onClick: function onClick() {
+      var prevSlide = (editingSlide - 1 + slidesCnt) % slidesCnt;
+      studioOps.updateProps({
+        editingSlide: prevSlide
+      });
+    }
+  }, "Prev slide"), React__default.createElement(antd.Button, {
+    style: {
+      width: "100%"
+    },
+    onClick: function onClick() {
+      var nextSlide = (editingSlide + 1) % slidesCnt;
+      studioOps.updateProps({
+        editingSlide: nextSlide
+      });
+    }
+  }, "Next slide"));
+}
+function OutlineMessage() {
+  return React__default.createElement("div", null, "* To re-arrange slides, use the Outline panel");
+}
+var sliderMeta = {
+  name: "hostless-slider",
+  displayName: "Slider",
+  importName: "Slider",
+  importPath: "keen-slider",
+  actions: [{
+    type: "custom-action",
+    control: CurrentSlideDropdown
+  }, {
+    type: "custom-action",
+    control: NavigateSlides
+  }, {
+    type: "button-action",
+    label: "Append new slide",
+    onClick: function onClick(_ref3) {
+      var componentProps = _ref3.componentProps,
+        studioOps = _ref3.studioOps;
+      var slidesCnt = componentProps.children.length;
+      studioOps.appendToSlot({
+        type: "img",
+        src: ""
+      }, "children");
+      studioOps.updateProps({
+        editingSlide: slidesCnt
+      });
+    }
+  }, {
+    type: "button-action",
+    label: "Delete current slide",
+    onClick: function onClick(_ref4) {
+      var _contextData$editingS;
+      var componentProps = _ref4.componentProps,
+        contextData = _ref4.contextData,
+        studioOps = _ref4.studioOps;
+      var editingSlide = (_contextData$editingS = contextData.editingSlide) != null ? _contextData$editingS : 0;
+      studioOps.removeFromSlotAt(editingSlide, "children");
+      var slidesCnt = componentProps.children.length - 1;
+      studioOps.updateProps({
+        editingSlide: (editingSlide - 1 + slidesCnt) % slidesCnt
+      });
+    }
+  }, {
+    type: "custom-action",
+    control: OutlineMessage
+  }],
+  props: {
+    children: {
+      type: "slot",
+      defaultValue: /*#__PURE__*/[0, 1, 2].map(function (i) {
+        return {
+          type: "vbox",
+          children: {
+            type: "img",
+            src: "https://static1.plasmic.app/components/react-slick/slide" + (i + 1) + ".png",
+            styles: {
+              maxWidth: "100%"
+            }
+          }
+        };
+      })
+    },
+    editingSlide: {
+      displayName: "Currently edited slide",
+      type: "number",
+      description: "Switch to the specified slide (first is 0). Only affects the editor, not the final page.",
+      defaultValueHint: 0,
+      editOnly: true,
+      hidden: function hidden() {
+        return true;
+      }
+    },
+    disabled: {
+      displayName: "Disabled",
+      type: "boolean",
+      description: "Disable or enable slider",
+      defaultValueHint: false
+    },
+    drag: {
+      displayName: "Drag",
+      type: "boolean",
+      description: "Enables or disables mouse and touch control",
+      defaultValueHint: true
+    },
+    dragSpeed: {
+      displayName: "Drag Speed",
+      type: "number",
+      description: "Set the speed that is applied to the slider when dragging it.",
+      defaultValueHint: 1
+    },
+    initial: {
+      displayName: "Initial slide",
+      type: "number",
+      description: "Sets the index of initially visible slide",
+      defaultValueHint: 1
+    },
+    loop: {
+      displayName: "Loop",
+      type: "boolean",
+      description: "Enable or disables carousel/loop functionality of the slider",
+      defaultValueHint: false
+    },
+    mode: {
+      displayName: "Carousel mode",
+      type: "choice",
+      options: ["snap", "free", "free-snap"],
+      description: "Sets the animation that is applied after a drag ends",
+      defaultValueHint: "snap"
+    },
+    renderMode: {
+      displayName: "Render mode",
+      type: "choice",
+      options: ["precision", "performance", "custom"],
+      description: "It is possible that the render performance of the browser slows down, if you have slides with some complexity in markup and CSS. To counteract this problem, you can set this option to 'performance'. If you want to create your own renderer, you can set this options to 'custom'. Default is 'precision'.",
+      defaultValueHint: "precision"
+    },
+    rtl: {
+      displayName: "Reverse",
+      type: "boolean",
+      description: "Reverses the slide order",
+      defaultValueHint: false
+    },
+    rubberband: {
+      displayName: "Rubberband ",
+      type: "boolean",
+      description: "Enables or disables rubberband behavior for dragging and animation after a drag.",
+      defaultValueHint: true
+    },
+    slides: {
+      displayName: "Number of slides",
+      type: "number",
+      description: "Specifies number of slider "
+    },
+    vertical: {
+      displayName: "Vertical",
+      type: "boolean",
+      description: "Vertical slide mode",
+      defaultValueHint: false,
+      helpText: "(Note: The height of the container must be defined if vertical is true)"
+    }
+  },
+  defaultStyles: {
+    width: "stretch",
+    maxWidth: "100%",
+    flexDirection: "column"
+  }
+};
+var SliderWrapper = /*#__PURE__*/React.forwardRef(function SliderWrapper_(_ref5, userRef) {
+  var editingSlide = _ref5.editingSlide,
+    children = _ref5.children,
+    className = _ref5.className,
+    setControlContextData = _ref5.setControlContextData,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded);
+  setControlContextData == null ? void 0 : setControlContextData({
+    editingSlide: editingSlide
+  });
+  var _useKeenSlider = react.useKeenSlider(_extends({}, props), [ResizePlugin]),
+    sliderRef = _useKeenSlider[0],
+    instanceRef = _useKeenSlider[1];
+  React.useEffect(function () {
+    if (editingSlide !== undefined) {
+      instanceRef.current.moveToIdx(editingSlide);
+    }
+  }, [editingSlide]);
+  return React__default.createElement("div", {
+    className: className
+  }, React__default.createElement("div", Object.assign({
+    ref: composeRefs(sliderRef, userRef),
+    className: "keen-slider"
+  }, props, {
+    style: {
+      height: "100%"
+    }
+  }), React__default.Children.map(children, function (child) {
+    return React__default.cloneElement(child, {
+      className: "keen-slider__slide " + className
+    });
+  }), children));
+});
+function registerSlider(loader, customSliderMeta) {
+  if (loader) {
+    loader.registerComponent(SliderWrapper, customSliderMeta != null ? customSliderMeta : sliderMeta);
+  } else {
+    registerComponent(SliderWrapper, customSliderMeta != null ? customSliderMeta : sliderMeta);
+  }
+}
+
+exports.SliderWrapper = SliderWrapper;
+exports.registerSlider = registerSlider;
+exports.sliderMeta = sliderMeta;
+//# sourceMappingURL=plasmic-keen-slider.cjs.development.js.map

package/dist/plasmic-keen-slider.cjs.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plasmic-keen-slider.cjs.development.js","sources":["../src/index.tsx"],"sourcesContent":["import registerComponent, {\n  ActionProps,\n  CodeComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport { Button, Select } from \"antd\";\nimport React, { forwardRef, Ref, useEffect } from \"react\";\nimport { useKeenSlider, KeenSliderPlugin } from \"keen-slider/react\";\nimport composeRefs from \"@seznam/compose-react-refs\";\nimport { KeenSliderOptions } from \"keen-slider\";\n\nconst { Option } = Select;\n\nconst ResizePlugin: KeenSliderPlugin = (slider) => {\n  const observer = new ResizeObserver(function () {\n    slider.update();\n  });\n\n  slider.on(\"created\", () => {\n    observer.observe(slider.container);\n  });\n  slider.on(\"destroyed\", () => {\n    observer.unobserve(slider.container);\n  });\n};\n\nfunction CurrentSlideDropdown({ componentProps, studioOps }: ActionProps<any>) {\n  const editingSlide = componentProps.editingSlide ?? 0;\n  const slidesCnt =\n    componentProps.children.length ??\n    (componentProps.children.type === \"img\" ? 1 : 0);\n\n  const options = Array.from({ length: slidesCnt }, (_, i) => i).map((i) => {\n    return <Option value={i.toString()}>Slide {i + 1}</Option>;\n  });\n\n  const handleChange = (value: string) => {\n    const slideIdx = Number(value);\n    studioOps.updateProps({ editingSlide: slideIdx % slidesCnt });\n  };\n\n  return (\n    <div\n      style={{\n        width: \"100%\",\n        display: \"flex\",\n        flexDirection: \"row\",\n        gap: \"10px\",\n        justifyContent: \"space-between\",\n      }}\n    >\n      <div>Current slide:</div>\n      <Select\n        defaultValue={editingSlide.toString()}\n        style={{ width: \"100%\" }}\n        onChange={handleChange}\n        value={editingSlide.toString()}\n      >\n        {options}\n      </Select>\n    </div>\n  );\n}\n\nfunction NavigateSlides({ componentProps, studioOps }: ActionProps<any>) {\n  const slidesCnt = componentProps.children.length;\n  const editingSlide = componentProps.editingSlide ?? 0;\n\n  return (\n    <div\n      style={{\n        width: \"100%\",\n        display: \"flex\",\n        flexDirection: \"row\",\n        gap: \"10px\",\n        justifyContent: \"space-between\",\n      }}\n    >\n      <Button\n        style={{ width: \"100%\" }}\n        onClick={() => {\n          const prevSlide = (editingSlide - 1 + slidesCnt) % slidesCnt;\n          studioOps.updateProps({ editingSlide: prevSlide });\n        }}\n      >\n        Prev slide\n      </Button>\n      <Button\n        style={{ width: \"100%\" }}\n        onClick={() => {\n          const nextSlide = (editingSlide + 1) % slidesCnt;\n          studioOps.updateProps({ editingSlide: nextSlide });\n        }}\n      >\n        Next slide\n      </Button>\n    </div>\n  );\n}\n\nfunction OutlineMessage() {\n  return <div>* To re-arrange slides, use the Outline panel</div>;\n}\n\ninterface KeenSliderProps extends KeenSliderOptions {}\n\nexport const sliderMeta: CodeComponentMeta<KeenSliderProps> = {\n  name: \"hostless-slider\",\n  displayName: \"Slider\",\n  importName: \"Slider\",\n  importPath: \"keen-slider\",\n  actions: [\n    {\n      type: \"custom-action\",\n      control: CurrentSlideDropdown,\n    },\n    {\n      type: \"custom-action\",\n      control: NavigateSlides,\n    },\n    {\n      type: \"button-action\",\n      label: \"Append new slide\",\n      onClick: ({ componentProps, studioOps }: ActionProps<any>) => {\n        const slidesCnt = componentProps.children.length;\n        studioOps.appendToSlot(\n          {\n            type: \"img\",\n            src: \"\",\n          },\n          \"children\"\n        );\n        studioOps.updateProps({ editingSlide: slidesCnt });\n      },\n    },\n    {\n      type: \"button-action\",\n      label: \"Delete current slide\",\n      onClick: ({\n        componentProps,\n        contextData,\n        studioOps,\n      }: ActionProps<any>) => {\n        const editingSlide = contextData.editingSlide ?? 0;\n        studioOps.removeFromSlotAt(editingSlide, \"children\");\n        const slidesCnt = componentProps.children.length - 1;\n        studioOps.updateProps({\n          editingSlide: (editingSlide - 1 + slidesCnt) % slidesCnt,\n        });\n      },\n    },\n    {\n      type: \"custom-action\",\n      control: OutlineMessage,\n    },\n  ],\n  props: {\n    children: {\n      type: \"slot\",\n      defaultValue: [0, 1, 2].map((i) => ({\n        type: \"vbox\",\n        children: {\n          type: \"img\",\n          src:\n            \"https://static1.plasmic.app/components/react-slick/slide\" +\n            (i + 1) +\n            \".png\",\n          styles: {\n            maxWidth: \"100%\",\n          },\n        },\n      })),\n    },\n    editingSlide: {\n      displayName: \"Currently edited slide\",\n      type: \"number\",\n      description:\n        \"Switch to the specified slide (first is 0). Only affects the editor, not the final page.\",\n      defaultValueHint: 0,\n      editOnly: true,\n      hidden: () => true,\n    },\n    disabled: {\n      displayName: \"Disabled\",\n      type: \"boolean\",\n      description: \"Disable or enable slider\",\n      defaultValueHint: false,\n    },\n    drag: {\n      displayName: \"Drag\",\n      type: \"boolean\",\n      description: \"Enables or disables mouse and touch control\",\n      defaultValueHint: true,\n    },\n    dragSpeed: {\n      displayName: \"Drag Speed\",\n      type: \"number\",\n      description:\n        \"Set the speed that is applied to the slider when dragging it.\",\n      defaultValueHint: 1,\n    },\n    initial: {\n      displayName: \"Initial slide\",\n      type: \"number\",\n      description: \"Sets the index of initially visible slide\",\n      defaultValueHint: 1,\n    },\n    loop: {\n      displayName: \"Loop\",\n      type: \"boolean\",\n      description:\n        \"Enable or disables carousel/loop functionality of the slider\",\n      defaultValueHint: false,\n    },\n\n    mode: {\n      displayName: \"Carousel mode\",\n      type: \"choice\",\n      options: [\"snap\", \"free\", \"free-snap\"],\n      description: \"Sets the animation that is applied after a drag ends\",\n      defaultValueHint: \"snap\",\n    },\n    renderMode: {\n      displayName: \"Render mode\",\n      type: \"choice\",\n      options: [\"precision\", \"performance\", \"custom\"],\n      description:\n        \"It is possible that the render performance of the browser slows down, if you have slides with some complexity in markup and CSS. To counteract this problem, you can set this option to 'performance'. If you want to create your own renderer, you can set this options to 'custom'. Default is 'precision'.\",\n      defaultValueHint: \"precision\",\n    },\n    rtl: {\n      displayName: \"Reverse\",\n      type: \"boolean\",\n      description: \"Reverses the slide order\",\n      defaultValueHint: false,\n    },\n\n    rubberband: {\n      displayName: \"Rubberband \",\n      type: \"boolean\",\n      description:\n        \"Enables or disables rubberband behavior for dragging and animation after a drag.\",\n      defaultValueHint: true,\n    },\n    slides: {\n      displayName: \"Number of slides\",\n      type: \"number\",\n      description: \"Specifies number of slider \",\n    },\n\n    vertical: {\n      displayName: \"Vertical\",\n      type: \"boolean\",\n      description: \"Vertical slide mode\",\n      defaultValueHint: false,\n      helpText:\n        \"(Note: The height of the container must be defined if vertical is true)\",\n    },\n  },\n\n  defaultStyles: {\n    width: \"stretch\",\n    maxWidth: \"100%\",\n    flexDirection: \"column\",\n  },\n};\n\nexport const SliderWrapper = forwardRef(function SliderWrapper_(\n  {\n    editingSlide,\n    children,\n\n    className,\n    setControlContextData,\n    ...props\n  }: KeenSliderProps & {\n    className?: string;\n    editingSlide?: number;\n    children?: any;\n    setControlContextData?: (data: {\n      editingSlide: number | undefined;\n    }) => void;\n  },\n  userRef?: Ref<HTMLDivElement>\n) {\n  setControlContextData?.({ editingSlide: editingSlide });\n  const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(\n    {\n      ...props,\n    },\n    [ResizePlugin]\n  );\n\n  useEffect(() => {\n    if (editingSlide !== undefined) {\n      instanceRef.current!.moveToIdx(editingSlide);\n    }\n  }, [editingSlide]);\n\n  return (\n    <div className={className}>\n      <div\n        ref={composeRefs(sliderRef, userRef)}\n        className=\"keen-slider\"\n        {...props}\n        style={{ height: \"100%\" }}\n      >\n        {React.Children.map(children, (child) =>\n          React.cloneElement(child, {\n            className: `keen-slider__slide ${className}`,\n          })\n        )}\n        {children}\n      </div>\n    </div>\n  );\n});\n\nexport function registerSlider(\n  loader?: { registerComponent: typeof registerComponent },\n  customSliderMeta?: CodeComponentMeta<KeenSliderOptions>\n) {\n  if (loader) {\n    loader.registerComponent(SliderWrapper, customSliderMeta ?? sliderMeta);\n  } else {\n    registerComponent(SliderWrapper, customSliderMeta ?? sliderMeta);\n  }\n}\n"],"names":["Option","Select","ResizePlugin","slider","observer","ResizeObserver","update","on","observe","container","unobserve","CurrentSlideDropdown","componentProps","studioOps","editingSlide","slidesCnt","children","length","type","options","Array","from","_","i","map","React","value","toString","handleChange","slideIdx","Number","updateProps","style","width","display","flexDirection","gap","justifyContent","defaultValue","onChange","NavigateSlides","Button","onClick","prevSlide","nextSlide","OutlineMessage","sliderMeta","name","displayName","importName","importPath","actions","control","label","appendToSlot","src","contextData","removeFromSlotAt","props","styles","maxWidth","description","defaultValueHint","editOnly","hidden","disabled","drag","dragSpeed","initial","loop","mode","renderMode","rtl","rubberband","slides","vertical","helpText","defaultStyles","SliderWrapper","forwardRef","SliderWrapper_","userRef","className","setControlContextData","useKeenSlider","sliderRef","instanceRef","useEffect","undefined","current","moveToIdx","ref","composeRefs","height","Children","child","cloneElement","registerSlider","loader","customSliderMeta","registerComponent"],"mappings":"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"}

package/dist/plasmic-keen-slider.cjs.production.min.js

@@ -0,0 +1,2 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("@plasmicapp/host/registerComponent")),i=require("antd"),n=require("react"),r=e(n),l=require("keen-slider/react"),o=e(require("@seznam/compose-react-refs"));function a(){return(a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e}).apply(this,arguments)}var s=["editingSlide","children","className","setControlContextData"],d=i.Select.Option,c=function(e){var t=new ResizeObserver((function(){e.update()}));e.on("created",(function(){t.observe(e.container)})),e.on("destroyed",(function(){t.unobserve(e.container)}))},p={name:"hostless-slider",displayName:"Slider",importName:"Slider",importPath:"keen-slider",actions:[{type:"custom-action",control:function(e){var t,n,l=e.componentProps,o=e.studioOps,a=null!=(t=l.editingSlide)?t:0,s=null!=(n=l.children.length)?n:"img"===l.children.type?1:0,c=Array.from({length:s},(function(e,t){return t})).map((function(e){return r.createElement(d,{value:e.toString()},"Slide ",e+1)}));return r.createElement("div",{style:{width:"100%",display:"flex",flexDirection:"row",gap:"10px",justifyContent:"space-between"}},r.createElement("div",null,"Current slide:"),r.createElement(i.Select,{defaultValue:a.toString(),style:{width:"100%"},onChange:function(e){var t=Number(e);o.updateProps({editingSlide:t%s})},value:a.toString()},c))}},{type:"custom-action",control:function(e){var t,n=e.componentProps,l=e.studioOps,o=n.children.length,a=null!=(t=n.editingSlide)?t:0;return r.createElement("div",{style:{width:"100%",display:"flex",flexDirection:"row",gap:"10px",justifyContent:"space-between"}},r.createElement(i.Button,{style:{width:"100%"},onClick:function(){l.updateProps({editingSlide:(a-1+o)%o})}},"Prev slide"),r.createElement(i.Button,{style:{width:"100%"},onClick:function(){l.updateProps({editingSlide:(a+1)%o})}},"Next slide"))}},{type:"button-action",label:"Append new slide",onClick:function(e){var t=e.studioOps,i=e.componentProps.children.length;t.appendToSlot({type:"img",src:""},"children"),t.updateProps({editingSlide:i})}},{type:"button-action",label:"Delete current slide",onClick:function(e){var t,i=e.componentProps,n=e.studioOps,r=null!=(t=e.contextData.editingSlide)?t:0;n.removeFromSlotAt(r,"children");var l=i.children.length-1;n.updateProps({editingSlide:(r-1+l)%l})}},{type:"custom-action",control:function(){return r.createElement("div",null,"* To re-arrange slides, use the Outline panel")}}],props:{children:{type:"slot",defaultValue:[0,1,2].map((function(e){return{type:"vbox",children:{type:"img",src:"https://static1.plasmic.app/components/react-slick/slide"+(e+1)+".png",styles:{maxWidth:"100%"}}}}))},editingSlide:{displayName:"Currently edited slide",type:"number",description:"Switch to the specified slide (first is 0). Only affects the editor, not the final page.",defaultValueHint:0,editOnly:!0,hidden:function(){return!0}},disabled:{displayName:"Disabled",type:"boolean",description:"Disable or enable slider",defaultValueHint:!1},drag:{displayName:"Drag",type:"boolean",description:"Enables or disables mouse and touch control",defaultValueHint:!0},dragSpeed:{displayName:"Drag Speed",type:"number",description:"Set the speed that is applied to the slider when dragging it.",defaultValueHint:1},initial:{displayName:"Initial slide",type:"number",description:"Sets the index of initially visible slide",defaultValueHint:1},loop:{displayName:"Loop",type:"boolean",description:"Enable or disables carousel/loop functionality of the slider",defaultValueHint:!1},mode:{displayName:"Carousel mode",type:"choice",options:["snap","free","free-snap"],description:"Sets the animation that is applied after a drag ends",defaultValueHint:"snap"},renderMode:{displayName:"Render mode",type:"choice",options:["precision","performance","custom"],description:"It is possible that the render performance of the browser slows down, if you have slides with some complexity in markup and CSS. To counteract this problem, you can set this option to 'performance'. If you want to create your own renderer, you can set this options to 'custom'. Default is 'precision'.",defaultValueHint:"precision"},rtl:{displayName:"Reverse",type:"boolean",description:"Reverses the slide order",defaultValueHint:!1},rubberband:{displayName:"Rubberband ",type:"boolean",description:"Enables or disables rubberband behavior for dragging and animation after a drag.",defaultValueHint:!0},slides:{displayName:"Number of slides",type:"number",description:"Specifies number of slider "},vertical:{displayName:"Vertical",type:"boolean",description:"Vertical slide mode",defaultValueHint:!1,helpText:"(Note: The height of the container must be defined if vertical is true)"}},defaultStyles:{width:"stretch",maxWidth:"100%",flexDirection:"column"}},u=n.forwardRef((function(e,t){var i=e.editingSlide,d=e.children,p=e.className,u=e.setControlContextData,f=function(e,t){if(null==e)return{};var i,n,r={},l=Object.keys(e);for(n=0;n<l.length;n++)t.indexOf(i=l[n])>=0||(r[i]=e[i]);return r}(e,s);null==u||u({editingSlide:i});var m=l.useKeenSlider(a({},f),[c]),h=m[0],y=m[1];return n.useEffect((function(){void 0!==i&&y.current.moveToIdx(i)}),[i]),r.createElement("div",{className:p},r.createElement("div",Object.assign({ref:o(h,t),className:"keen-slider"},f,{style:{height:"100%"}}),r.Children.map(d,(function(e){return r.cloneElement(e,{className:"keen-slider__slide "+p})})),d))}));exports.SliderWrapper=u,exports.registerSlider=function(e,i){e?e.registerComponent(u,null!=i?i:p):t(u,null!=i?i:p)},exports.sliderMeta=p;
+//# sourceMappingURL=plasmic-keen-slider.cjs.production.min.js.map

package/dist/plasmic-keen-slider.cjs.production.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plasmic-keen-slider.cjs.production.min.js","sources":["../src/index.tsx"],"sourcesContent":["import registerComponent, {\n  ActionProps,\n  CodeComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport { Button, Select } from \"antd\";\nimport React, { forwardRef, Ref, useEffect } from \"react\";\nimport { useKeenSlider, KeenSliderPlugin } from \"keen-slider/react\";\nimport composeRefs from \"@seznam/compose-react-refs\";\nimport { KeenSliderOptions } from \"keen-slider\";\n\nconst { Option } = Select;\n\nconst ResizePlugin: KeenSliderPlugin = (slider) => {\n  const observer = new ResizeObserver(function () {\n    slider.update();\n  });\n\n  slider.on(\"created\", () => {\n    observer.observe(slider.container);\n  });\n  slider.on(\"destroyed\", () => {\n    observer.unobserve(slider.container);\n  });\n};\n\nfunction CurrentSlideDropdown({ componentProps, studioOps }: ActionProps<any>) {\n  const editingSlide = componentProps.editingSlide ?? 0;\n  const slidesCnt =\n    componentProps.children.length ??\n    (componentProps.children.type === \"img\" ? 1 : 0);\n\n  const options = Array.from({ length: slidesCnt }, (_, i) => i).map((i) => {\n    return <Option value={i.toString()}>Slide {i + 1}</Option>;\n  });\n\n  const handleChange = (value: string) => {\n    const slideIdx = Number(value);\n    studioOps.updateProps({ editingSlide: slideIdx % slidesCnt });\n  };\n\n  return (\n    <div\n      style={{\n        width: \"100%\",\n        display: \"flex\",\n        flexDirection: \"row\",\n        gap: \"10px\",\n        justifyContent: \"space-between\",\n      }}\n    >\n      <div>Current slide:</div>\n      <Select\n        defaultValue={editingSlide.toString()}\n        style={{ width: \"100%\" }}\n        onChange={handleChange}\n        value={editingSlide.toString()}\n      >\n        {options}\n      </Select>\n    </div>\n  );\n}\n\nfunction NavigateSlides({ componentProps, studioOps }: ActionProps<any>) {\n  const slidesCnt = componentProps.children.length;\n  const editingSlide = componentProps.editingSlide ?? 0;\n\n  return (\n    <div\n      style={{\n        width: \"100%\",\n        display: \"flex\",\n        flexDirection: \"row\",\n        gap: \"10px\",\n        justifyContent: \"space-between\",\n      }}\n    >\n      <Button\n        style={{ width: \"100%\" }}\n        onClick={() => {\n          const prevSlide = (editingSlide - 1 + slidesCnt) % slidesCnt;\n          studioOps.updateProps({ editingSlide: prevSlide });\n        }}\n      >\n        Prev slide\n      </Button>\n      <Button\n        style={{ width: \"100%\" }}\n        onClick={() => {\n          const nextSlide = (editingSlide + 1) % slidesCnt;\n          studioOps.updateProps({ editingSlide: nextSlide });\n        }}\n      >\n        Next slide\n      </Button>\n    </div>\n  );\n}\n\nfunction OutlineMessage() {\n  return <div>* To re-arrange slides, use the Outline panel</div>;\n}\n\ninterface KeenSliderProps extends KeenSliderOptions {}\n\nexport const sliderMeta: CodeComponentMeta<KeenSliderProps> = {\n  name: \"hostless-slider\",\n  displayName: \"Slider\",\n  importName: \"Slider\",\n  importPath: \"keen-slider\",\n  actions: [\n    {\n      type: \"custom-action\",\n      control: CurrentSlideDropdown,\n    },\n    {\n      type: \"custom-action\",\n      control: NavigateSlides,\n    },\n    {\n      type: \"button-action\",\n      label: \"Append new slide\",\n      onClick: ({ componentProps, studioOps }: ActionProps<any>) => {\n        const slidesCnt = componentProps.children.length;\n        studioOps.appendToSlot(\n          {\n            type: \"img\",\n            src: \"\",\n          },\n          \"children\"\n        );\n        studioOps.updateProps({ editingSlide: slidesCnt });\n      },\n    },\n    {\n      type: \"button-action\",\n      label: \"Delete current slide\",\n      onClick: ({\n        componentProps,\n        contextData,\n        studioOps,\n      }: ActionProps<any>) => {\n        const editingSlide = contextData.editingSlide ?? 0;\n        studioOps.removeFromSlotAt(editingSlide, \"children\");\n        const slidesCnt = componentProps.children.length - 1;\n        studioOps.updateProps({\n          editingSlide: (editingSlide - 1 + slidesCnt) % slidesCnt,\n        });\n      },\n    },\n    {\n      type: \"custom-action\",\n      control: OutlineMessage,\n    },\n  ],\n  props: {\n    children: {\n      type: \"slot\",\n      defaultValue: [0, 1, 2].map((i) => ({\n        type: \"vbox\",\n        children: {\n          type: \"img\",\n          src:\n            \"https://static1.plasmic.app/components/react-slick/slide\" +\n            (i + 1) +\n            \".png\",\n          styles: {\n            maxWidth: \"100%\",\n          },\n        },\n      })),\n    },\n    editingSlide: {\n      displayName: \"Currently edited slide\",\n      type: \"number\",\n      description:\n        \"Switch to the specified slide (first is 0). Only affects the editor, not the final page.\",\n      defaultValueHint: 0,\n      editOnly: true,\n      hidden: () => true,\n    },\n    disabled: {\n      displayName: \"Disabled\",\n      type: \"boolean\",\n      description: \"Disable or enable slider\",\n      defaultValueHint: false,\n    },\n    drag: {\n      displayName: \"Drag\",\n      type: \"boolean\",\n      description: \"Enables or disables mouse and touch control\",\n      defaultValueHint: true,\n    },\n    dragSpeed: {\n      displayName: \"Drag Speed\",\n      type: \"number\",\n      description:\n        \"Set the speed that is applied to the slider when dragging it.\",\n      defaultValueHint: 1,\n    },\n    initial: {\n      displayName: \"Initial slide\",\n      type: \"number\",\n      description: \"Sets the index of initially visible slide\",\n      defaultValueHint: 1,\n    },\n    loop: {\n      displayName: \"Loop\",\n      type: \"boolean\",\n      description:\n        \"Enable or disables carousel/loop functionality of the slider\",\n      defaultValueHint: false,\n    },\n\n    mode: {\n      displayName: \"Carousel mode\",\n      type: \"choice\",\n      options: [\"snap\", \"free\", \"free-snap\"],\n      description: \"Sets the animation that is applied after a drag ends\",\n      defaultValueHint: \"snap\",\n    },\n    renderMode: {\n      displayName: \"Render mode\",\n      type: \"choice\",\n      options: [\"precision\", \"performance\", \"custom\"],\n      description:\n        \"It is possible that the render performance of the browser slows down, if you have slides with some complexity in markup and CSS. To counteract this problem, you can set this option to 'performance'. If you want to create your own renderer, you can set this options to 'custom'. Default is 'precision'.\",\n      defaultValueHint: \"precision\",\n    },\n    rtl: {\n      displayName: \"Reverse\",\n      type: \"boolean\",\n      description: \"Reverses the slide order\",\n      defaultValueHint: false,\n    },\n\n    rubberband: {\n      displayName: \"Rubberband \",\n      type: \"boolean\",\n      description:\n        \"Enables or disables rubberband behavior for dragging and animation after a drag.\",\n      defaultValueHint: true,\n    },\n    slides: {\n      displayName: \"Number of slides\",\n      type: \"number\",\n      description: \"Specifies number of slider \",\n    },\n\n    vertical: {\n      displayName: \"Vertical\",\n      type: \"boolean\",\n      description: \"Vertical slide mode\",\n      defaultValueHint: false,\n      helpText:\n        \"(Note: The height of the container must be defined if vertical is true)\",\n    },\n  },\n\n  defaultStyles: {\n    width: \"stretch\",\n    maxWidth: \"100%\",\n    flexDirection: \"column\",\n  },\n};\n\nexport const SliderWrapper = forwardRef(function SliderWrapper_(\n  {\n    editingSlide,\n    children,\n\n    className,\n    setControlContextData,\n    ...props\n  }: KeenSliderProps & {\n    className?: string;\n    editingSlide?: number;\n    children?: any;\n    setControlContextData?: (data: {\n      editingSlide: number | undefined;\n    }) => void;\n  },\n  userRef?: Ref<HTMLDivElement>\n) {\n  setControlContextData?.({ editingSlide: editingSlide });\n  const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(\n    {\n      ...props,\n    },\n    [ResizePlugin]\n  );\n\n  useEffect(() => {\n    if (editingSlide !== undefined) {\n      instanceRef.current!.moveToIdx(editingSlide);\n    }\n  }, [editingSlide]);\n\n  return (\n    <div className={className}>\n      <div\n        ref={composeRefs(sliderRef, userRef)}\n        className=\"keen-slider\"\n        {...props}\n        style={{ height: \"100%\" }}\n      >\n        {React.Children.map(children, (child) =>\n          React.cloneElement(child, {\n            className: `keen-slider__slide ${className}`,\n          })\n        )}\n        {children}\n      </div>\n    </div>\n  );\n});\n\nexport function registerSlider(\n  loader?: { registerComponent: typeof registerComponent },\n  customSliderMeta?: CodeComponentMeta<KeenSliderOptions>\n) {\n  if (loader) {\n    loader.registerComponent(SliderWrapper, customSliderMeta ?? sliderMeta);\n  } else {\n    registerComponent(SliderWrapper, customSliderMeta ?? sliderMeta);\n  }\n}\n"],"names":["Option","Select","ResizePlugin","slider","observer","ResizeObserver","update","on","observe","container","unobserve","sliderMeta","name","displayName","importName","importPath","actions","type","control","componentProps","studioOps","editingSlide","slidesCnt","children","length","options","Array","from","_","i","map","React","value","toString","style","width","display","flexDirection","gap","justifyContent","defaultValue","onChange","slideIdx","Number","updateProps","Button","onClick","label","appendToSlot","src","contextData","removeFromSlotAt","props","styles","maxWidth","description","defaultValueHint","editOnly","hidden","disabled","drag","dragSpeed","initial","loop","mode","renderMode","rtl","rubberband","slides","vertical","helpText","defaultStyles","SliderWrapper","forwardRef","userRef","className","setControlContextData","useKeenSlider","sliderRef","instanceRef","useEffect","undefined","current","moveToIdx","ref","composeRefs","height","Children","child","cloneElement","loader","customSliderMeta","registerComponent"],"mappings":"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"}

package/dist/plasmic-keen-slider.esm.js

@@ -0,0 +1,311 @@
+import registerComponent from '@plasmicapp/host/registerComponent';
+import { Select, Button } from 'antd';
+import React, { forwardRef, useEffect } from 'react';
+import { useKeenSlider } from 'keen-slider/react';
+import composeRefs from '@seznam/compose-react-refs';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+var _excluded = ["editingSlide", "children", "className", "setControlContextData"];
+var Option = Select.Option;
+var ResizePlugin = function ResizePlugin(slider) {
+  var observer = new ResizeObserver(function () {
+    slider.update();
+  });
+  slider.on("created", function () {
+    observer.observe(slider.container);
+  });
+  slider.on("destroyed", function () {
+    observer.unobserve(slider.container);
+  });
+};
+function CurrentSlideDropdown(_ref) {
+  var _componentProps$editi, _componentProps$child;
+  var componentProps = _ref.componentProps,
+    studioOps = _ref.studioOps;
+  var editingSlide = (_componentProps$editi = componentProps.editingSlide) != null ? _componentProps$editi : 0;
+  var slidesCnt = (_componentProps$child = componentProps.children.length) != null ? _componentProps$child : componentProps.children.type === "img" ? 1 : 0;
+  var options = Array.from({
+    length: slidesCnt
+  }, function (_, i) {
+    return i;
+  }).map(function (i) {
+    return React.createElement(Option, {
+      value: i.toString()
+    }, "Slide ", i + 1);
+  });
+  var handleChange = function handleChange(value) {
+    var slideIdx = Number(value);
+    studioOps.updateProps({
+      editingSlide: slideIdx % slidesCnt
+    });
+  };
+  return React.createElement("div", {
+    style: {
+      width: "100%",
+      display: "flex",
+      flexDirection: "row",
+      gap: "10px",
+      justifyContent: "space-between"
+    }
+  }, React.createElement("div", null, "Current slide:"), React.createElement(Select, {
+    defaultValue: editingSlide.toString(),
+    style: {
+      width: "100%"
+    },
+    onChange: handleChange,
+    value: editingSlide.toString()
+  }, options));
+}
+function NavigateSlides(_ref2) {
+  var _componentProps$editi2;
+  var componentProps = _ref2.componentProps,
+    studioOps = _ref2.studioOps;
+  var slidesCnt = componentProps.children.length;
+  var editingSlide = (_componentProps$editi2 = componentProps.editingSlide) != null ? _componentProps$editi2 : 0;
+  return React.createElement("div", {
+    style: {
+      width: "100%",
+      display: "flex",
+      flexDirection: "row",
+      gap: "10px",
+      justifyContent: "space-between"
+    }
+  }, React.createElement(Button, {
+    style: {
+      width: "100%"
+    },
+    onClick: function onClick() {
+      var prevSlide = (editingSlide - 1 + slidesCnt) % slidesCnt;
+      studioOps.updateProps({
+        editingSlide: prevSlide
+      });
+    }
+  }, "Prev slide"), React.createElement(Button, {
+    style: {
+      width: "100%"
+    },
+    onClick: function onClick() {
+      var nextSlide = (editingSlide + 1) % slidesCnt;
+      studioOps.updateProps({
+        editingSlide: nextSlide
+      });
+    }
+  }, "Next slide"));
+}
+function OutlineMessage() {
+  return React.createElement("div", null, "* To re-arrange slides, use the Outline panel");
+}
+var sliderMeta = {
+  name: "hostless-slider",
+  displayName: "Slider",
+  importName: "Slider",
+  importPath: "keen-slider",
+  actions: [{
+    type: "custom-action",
+    control: CurrentSlideDropdown
+  }, {
+    type: "custom-action",
+    control: NavigateSlides
+  }, {
+    type: "button-action",
+    label: "Append new slide",
+    onClick: function onClick(_ref3) {
+      var componentProps = _ref3.componentProps,
+        studioOps = _ref3.studioOps;
+      var slidesCnt = componentProps.children.length;
+      studioOps.appendToSlot({
+        type: "img",
+        src: ""
+      }, "children");
+      studioOps.updateProps({
+        editingSlide: slidesCnt
+      });
+    }
+  }, {
+    type: "button-action",
+    label: "Delete current slide",
+    onClick: function onClick(_ref4) {
+      var _contextData$editingS;
+      var componentProps = _ref4.componentProps,
+        contextData = _ref4.contextData,
+        studioOps = _ref4.studioOps;
+      var editingSlide = (_contextData$editingS = contextData.editingSlide) != null ? _contextData$editingS : 0;
+      studioOps.removeFromSlotAt(editingSlide, "children");
+      var slidesCnt = componentProps.children.length - 1;
+      studioOps.updateProps({
+        editingSlide: (editingSlide - 1 + slidesCnt) % slidesCnt
+      });
+    }
+  }, {
+    type: "custom-action",
+    control: OutlineMessage
+  }],
+  props: {
+    children: {
+      type: "slot",
+      defaultValue: /*#__PURE__*/[0, 1, 2].map(function (i) {
+        return {
+          type: "vbox",
+          children: {
+            type: "img",
+            src: "https://static1.plasmic.app/components/react-slick/slide" + (i + 1) + ".png",
+            styles: {
+              maxWidth: "100%"
+            }
+          }
+        };
+      })
+    },
+    editingSlide: {
+      displayName: "Currently edited slide",
+      type: "number",
+      description: "Switch to the specified slide (first is 0). Only affects the editor, not the final page.",
+      defaultValueHint: 0,
+      editOnly: true,
+      hidden: function hidden() {
+        return true;
+      }
+    },
+    disabled: {
+      displayName: "Disabled",
+      type: "boolean",
+      description: "Disable or enable slider",
+      defaultValueHint: false
+    },
+    drag: {
+      displayName: "Drag",
+      type: "boolean",
+      description: "Enables or disables mouse and touch control",
+      defaultValueHint: true
+    },
+    dragSpeed: {
+      displayName: "Drag Speed",
+      type: "number",
+      description: "Set the speed that is applied to the slider when dragging it.",
+      defaultValueHint: 1
+    },
+    initial: {
+      displayName: "Initial slide",
+      type: "number",
+      description: "Sets the index of initially visible slide",
+      defaultValueHint: 1
+    },
+    loop: {
+      displayName: "Loop",
+      type: "boolean",
+      description: "Enable or disables carousel/loop functionality of the slider",
+      defaultValueHint: false
+    },
+    mode: {
+      displayName: "Carousel mode",
+      type: "choice",
+      options: ["snap", "free", "free-snap"],
+      description: "Sets the animation that is applied after a drag ends",
+      defaultValueHint: "snap"
+    },
+    renderMode: {
+      displayName: "Render mode",
+      type: "choice",
+      options: ["precision", "performance", "custom"],
+      description: "It is possible that the render performance of the browser slows down, if you have slides with some complexity in markup and CSS. To counteract this problem, you can set this option to 'performance'. If you want to create your own renderer, you can set this options to 'custom'. Default is 'precision'.",
+      defaultValueHint: "precision"
+    },
+    rtl: {
+      displayName: "Reverse",
+      type: "boolean",
+      description: "Reverses the slide order",
+      defaultValueHint: false
+    },
+    rubberband: {
+      displayName: "Rubberband ",
+      type: "boolean",
+      description: "Enables or disables rubberband behavior for dragging and animation after a drag.",
+      defaultValueHint: true
+    },
+    slides: {
+      displayName: "Number of slides",
+      type: "number",
+      description: "Specifies number of slider "
+    },
+    vertical: {
+      displayName: "Vertical",
+      type: "boolean",
+      description: "Vertical slide mode",
+      defaultValueHint: false,
+      helpText: "(Note: The height of the container must be defined if vertical is true)"
+    }
+  },
+  defaultStyles: {
+    width: "stretch",
+    maxWidth: "100%",
+    flexDirection: "column"
+  }
+};
+var SliderWrapper = /*#__PURE__*/forwardRef(function SliderWrapper_(_ref5, userRef) {
+  var editingSlide = _ref5.editingSlide,
+    children = _ref5.children,
+    className = _ref5.className,
+    setControlContextData = _ref5.setControlContextData,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded);
+  setControlContextData == null ? void 0 : setControlContextData({
+    editingSlide: editingSlide
+  });
+  var _useKeenSlider = useKeenSlider(_extends({}, props), [ResizePlugin]),
+    sliderRef = _useKeenSlider[0],
+    instanceRef = _useKeenSlider[1];
+  useEffect(function () {
+    if (editingSlide !== undefined) {
+      instanceRef.current.moveToIdx(editingSlide);
+    }
+  }, [editingSlide]);
+  return React.createElement("div", {
+    className: className
+  }, React.createElement("div", Object.assign({
+    ref: composeRefs(sliderRef, userRef),
+    className: "keen-slider"
+  }, props, {
+    style: {
+      height: "100%"
+    }
+  }), React.Children.map(children, function (child) {
+    return React.cloneElement(child, {
+      className: "keen-slider__slide " + className
+    });
+  }), children));
+});
+function registerSlider(loader, customSliderMeta) {
+  if (loader) {
+    loader.registerComponent(SliderWrapper, customSliderMeta != null ? customSliderMeta : sliderMeta);
+  } else {
+    registerComponent(SliderWrapper, customSliderMeta != null ? customSliderMeta : sliderMeta);
+  }
+}
+
+export { SliderWrapper, registerSlider, sliderMeta };
+//# sourceMappingURL=plasmic-keen-slider.esm.js.map

package/dist/plasmic-keen-slider.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plasmic-keen-slider.esm.js","sources":["../src/index.tsx"],"sourcesContent":["import registerComponent, {\n  ActionProps,\n  CodeComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport { Button, Select } from \"antd\";\nimport React, { forwardRef, Ref, useEffect } from \"react\";\nimport { useKeenSlider, KeenSliderPlugin } from \"keen-slider/react\";\nimport composeRefs from \"@seznam/compose-react-refs\";\nimport { KeenSliderOptions } from \"keen-slider\";\n\nconst { Option } = Select;\n\nconst ResizePlugin: KeenSliderPlugin = (slider) => {\n  const observer = new ResizeObserver(function () {\n    slider.update();\n  });\n\n  slider.on(\"created\", () => {\n    observer.observe(slider.container);\n  });\n  slider.on(\"destroyed\", () => {\n    observer.unobserve(slider.container);\n  });\n};\n\nfunction CurrentSlideDropdown({ componentProps, studioOps }: ActionProps<any>) {\n  const editingSlide = componentProps.editingSlide ?? 0;\n  const slidesCnt =\n    componentProps.children.length ??\n    (componentProps.children.type === \"img\" ? 1 : 0);\n\n  const options = Array.from({ length: slidesCnt }, (_, i) => i).map((i) => {\n    return <Option value={i.toString()}>Slide {i + 1}</Option>;\n  });\n\n  const handleChange = (value: string) => {\n    const slideIdx = Number(value);\n    studioOps.updateProps({ editingSlide: slideIdx % slidesCnt });\n  };\n\n  return (\n    <div\n      style={{\n        width: \"100%\",\n        display: \"flex\",\n        flexDirection: \"row\",\n        gap: \"10px\",\n        justifyContent: \"space-between\",\n      }}\n    >\n      <div>Current slide:</div>\n      <Select\n        defaultValue={editingSlide.toString()}\n        style={{ width: \"100%\" }}\n        onChange={handleChange}\n        value={editingSlide.toString()}\n      >\n        {options}\n      </Select>\n    </div>\n  );\n}\n\nfunction NavigateSlides({ componentProps, studioOps }: ActionProps<any>) {\n  const slidesCnt = componentProps.children.length;\n  const editingSlide = componentProps.editingSlide ?? 0;\n\n  return (\n    <div\n      style={{\n        width: \"100%\",\n        display: \"flex\",\n        flexDirection: \"row\",\n        gap: \"10px\",\n        justifyContent: \"space-between\",\n      }}\n    >\n      <Button\n        style={{ width: \"100%\" }}\n        onClick={() => {\n          const prevSlide = (editingSlide - 1 + slidesCnt) % slidesCnt;\n          studioOps.updateProps({ editingSlide: prevSlide });\n        }}\n      >\n        Prev slide\n      </Button>\n      <Button\n        style={{ width: \"100%\" }}\n        onClick={() => {\n          const nextSlide = (editingSlide + 1) % slidesCnt;\n          studioOps.updateProps({ editingSlide: nextSlide });\n        }}\n      >\n        Next slide\n      </Button>\n    </div>\n  );\n}\n\nfunction OutlineMessage() {\n  return <div>* To re-arrange slides, use the Outline panel</div>;\n}\n\ninterface KeenSliderProps extends KeenSliderOptions {}\n\nexport const sliderMeta: CodeComponentMeta<KeenSliderProps> = {\n  name: \"hostless-slider\",\n  displayName: \"Slider\",\n  importName: \"Slider\",\n  importPath: \"keen-slider\",\n  actions: [\n    {\n      type: \"custom-action\",\n      control: CurrentSlideDropdown,\n    },\n    {\n      type: \"custom-action\",\n      control: NavigateSlides,\n    },\n    {\n      type: \"button-action\",\n      label: \"Append new slide\",\n      onClick: ({ componentProps, studioOps }: ActionProps<any>) => {\n        const slidesCnt = componentProps.children.length;\n        studioOps.appendToSlot(\n          {\n            type: \"img\",\n            src: \"\",\n          },\n          \"children\"\n        );\n        studioOps.updateProps({ editingSlide: slidesCnt });\n      },\n    },\n    {\n      type: \"button-action\",\n      label: \"Delete current slide\",\n      onClick: ({\n        componentProps,\n        contextData,\n        studioOps,\n      }: ActionProps<any>) => {\n        const editingSlide = contextData.editingSlide ?? 0;\n        studioOps.removeFromSlotAt(editingSlide, \"children\");\n        const slidesCnt = componentProps.children.length - 1;\n        studioOps.updateProps({\n          editingSlide: (editingSlide - 1 + slidesCnt) % slidesCnt,\n        });\n      },\n    },\n    {\n      type: \"custom-action\",\n      control: OutlineMessage,\n    },\n  ],\n  props: {\n    children: {\n      type: \"slot\",\n      defaultValue: [0, 1, 2].map((i) => ({\n        type: \"vbox\",\n        children: {\n          type: \"img\",\n          src:\n            \"https://static1.plasmic.app/components/react-slick/slide\" +\n            (i + 1) +\n            \".png\",\n          styles: {\n            maxWidth: \"100%\",\n          },\n        },\n      })),\n    },\n    editingSlide: {\n      displayName: \"Currently edited slide\",\n      type: \"number\",\n      description:\n        \"Switch to the specified slide (first is 0). Only affects the editor, not the final page.\",\n      defaultValueHint: 0,\n      editOnly: true,\n      hidden: () => true,\n    },\n    disabled: {\n      displayName: \"Disabled\",\n      type: \"boolean\",\n      description: \"Disable or enable slider\",\n      defaultValueHint: false,\n    },\n    drag: {\n      displayName: \"Drag\",\n      type: \"boolean\",\n      description: \"Enables or disables mouse and touch control\",\n      defaultValueHint: true,\n    },\n    dragSpeed: {\n      displayName: \"Drag Speed\",\n      type: \"number\",\n      description:\n        \"Set the speed that is applied to the slider when dragging it.\",\n      defaultValueHint: 1,\n    },\n    initial: {\n      displayName: \"Initial slide\",\n      type: \"number\",\n      description: \"Sets the index of initially visible slide\",\n      defaultValueHint: 1,\n    },\n    loop: {\n      displayName: \"Loop\",\n      type: \"boolean\",\n      description:\n        \"Enable or disables carousel/loop functionality of the slider\",\n      defaultValueHint: false,\n    },\n\n    mode: {\n      displayName: \"Carousel mode\",\n      type: \"choice\",\n      options: [\"snap\", \"free\", \"free-snap\"],\n      description: \"Sets the animation that is applied after a drag ends\",\n      defaultValueHint: \"snap\",\n    },\n    renderMode: {\n      displayName: \"Render mode\",\n      type: \"choice\",\n      options: [\"precision\", \"performance\", \"custom\"],\n      description:\n        \"It is possible that the render performance of the browser slows down, if you have slides with some complexity in markup and CSS. To counteract this problem, you can set this option to 'performance'. If you want to create your own renderer, you can set this options to 'custom'. Default is 'precision'.\",\n      defaultValueHint: \"precision\",\n    },\n    rtl: {\n      displayName: \"Reverse\",\n      type: \"boolean\",\n      description: \"Reverses the slide order\",\n      defaultValueHint: false,\n    },\n\n    rubberband: {\n      displayName: \"Rubberband \",\n      type: \"boolean\",\n      description:\n        \"Enables or disables rubberband behavior for dragging and animation after a drag.\",\n      defaultValueHint: true,\n    },\n    slides: {\n      displayName: \"Number of slides\",\n      type: \"number\",\n      description: \"Specifies number of slider \",\n    },\n\n    vertical: {\n      displayName: \"Vertical\",\n      type: \"boolean\",\n      description: \"Vertical slide mode\",\n      defaultValueHint: false,\n      helpText:\n        \"(Note: The height of the container must be defined if vertical is true)\",\n    },\n  },\n\n  defaultStyles: {\n    width: \"stretch\",\n    maxWidth: \"100%\",\n    flexDirection: \"column\",\n  },\n};\n\nexport const SliderWrapper = forwardRef(function SliderWrapper_(\n  {\n    editingSlide,\n    children,\n\n    className,\n    setControlContextData,\n    ...props\n  }: KeenSliderProps & {\n    className?: string;\n    editingSlide?: number;\n    children?: any;\n    setControlContextData?: (data: {\n      editingSlide: number | undefined;\n    }) => void;\n  },\n  userRef?: Ref<HTMLDivElement>\n) {\n  setControlContextData?.({ editingSlide: editingSlide });\n  const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(\n    {\n      ...props,\n    },\n    [ResizePlugin]\n  );\n\n  useEffect(() => {\n    if (editingSlide !== undefined) {\n      instanceRef.current!.moveToIdx(editingSlide);\n    }\n  }, [editingSlide]);\n\n  return (\n    <div className={className}>\n      <div\n        ref={composeRefs(sliderRef, userRef)}\n        className=\"keen-slider\"\n        {...props}\n        style={{ height: \"100%\" }}\n      >\n        {React.Children.map(children, (child) =>\n          React.cloneElement(child, {\n            className: `keen-slider__slide ${className}`,\n          })\n        )}\n        {children}\n      </div>\n    </div>\n  );\n});\n\nexport function registerSlider(\n  loader?: { registerComponent: typeof registerComponent },\n  customSliderMeta?: CodeComponentMeta<KeenSliderOptions>\n) {\n  if (loader) {\n    loader.registerComponent(SliderWrapper, customSliderMeta ?? sliderMeta);\n  } else {\n    registerComponent(SliderWrapper, customSliderMeta ?? sliderMeta);\n  }\n}\n"],"names":["Option","Select","ResizePlugin","slider","observer","ResizeObserver","update","on","observe","container","unobserve","CurrentSlideDropdown","componentProps","studioOps","editingSlide","slidesCnt","children","length","type","options","Array","from","_","i","map","React","value","toString","handleChange","slideIdx","Number","updateProps","style","width","display","flexDirection","gap","justifyContent","defaultValue","onChange","NavigateSlides","Button","onClick","prevSlide","nextSlide","OutlineMessage","sliderMeta","name","displayName","importName","importPath","actions","control","label","appendToSlot","src","contextData","removeFromSlotAt","props","styles","maxWidth","description","defaultValueHint","editOnly","hidden","disabled","drag","dragSpeed","initial","loop","mode","renderMode","rtl","rubberband","slides","vertical","helpText","defaultStyles","SliderWrapper","forwardRef","SliderWrapper_","userRef","className","setControlContextData","useKeenSlider","sliderRef","instanceRef","useEffect","undefined","current","moveToIdx","ref","composeRefs","height","Children","child","cloneElement","registerSlider","loader","customSliderMeta","registerComponent"],"mappings":"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"}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@plasmicpkgs/plasmic-keen-slider",
+  "version": "0.0.4",
+  "description": "Plasmic Keen slider components.",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "module": "dist/plasmic-keen-slider.esm.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "yarn --cwd=../.. test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepare": "if-env PREPARE_NO_BUILD=true || yarn build",
+    "size": "size-limit",
+    "analyze": "size-limit --why"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "size-limit": [
+    {
+      "path": "dist/plasmic-keen-slider.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/plasmic-keen-slider.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "devDependencies": {
+    "@plasmicapp/host": "1.0.161",
+    "@size-limit/preset-small-lib": "^7.0.8",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@types/resize-observer-browser": "^0.1.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "size-limit": "^7.0.8",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.3.1"
+  },
+  "dependencies": {
+    "@seznam/compose-react-refs": "^1.0.6",
+    "antd": "^5.8.4",
+    "keen-slider": "^6.8.6"
+  },
+  "gitHead": "10ab82db81f1654102ff8ed100c5ee16c61465e0"
+}