@threekit-tools/treble 0.0.34-codepen-0 → 0.0.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/Swatch/index.d.ts +1 -0
  2. package/dist/components/Swatch/index.js +5 -5
  3. package/dist/components/Swatch/swatch.styles.d.ts +1 -0
  4. package/dist/components/Swatch/swatch.styles.js +3 -3
  5. package/dist/utils.js +24 -22
  6. package/package.json +1 -1
package/dist/components/Swatch/index.d.ts CHANGED
@@ -5,6 +5,7 @@ export interface ISwatch extends IFormComponentProps<IOption> {
5
5
  showThumbnail?: boolean;
6
6
  showPrice?: boolean;
7
7
  showDescription?: boolean;
8
+ size?: string;
8
9
  }
9
10
  export declare const Swatch: {
10
11
  (props: ISwatch): JSX.Element;
package/dist/components/Swatch/index.js CHANGED
@@ -24,13 +24,13 @@ var SwatchInfo = function (props) {
24
24
  react_1.default.createElement("div", null))));
25
25
  };
26
26
  var Thumbnail = function (props) {
27
- var imageUrl = props.imageUrl, color = props.color, name = props.name, shape = props.shape, className = props.className;
27
+ var imageUrl = props.imageUrl, color = props.color, name = props.name, shape = props.shape, size = props.size, className = props.className;
28
28
  if (!imageUrl && !color)
29
29
  return react_1.default.createElement("div", null);
30
- return (react_1.default.createElement(swatch_styles_1.OptionThumbnail, { className: "".concat(className, " option-thumbnail"), color: color, shape: shape }, imageUrl ? react_1.default.createElement("img", { src: imageUrl, alt: name || '' }) : react_1.default.createElement("span", null)));
30
+ return (react_1.default.createElement(swatch_styles_1.OptionThumbnail, { className: "".concat(className, " option-thumbnail"), color: color, shape: shape, size: size }, imageUrl ? react_1.default.createElement("img", { src: imageUrl, alt: name || '' }) : react_1.default.createElement("span", null)));
31
31
  };
32
32
  var Swatch = function (props) {
33
- var _a = Object.assign({ shape: 'round' }, props), title = _a.title, shape = _a.shape, description = _a.description, options = _a.options, value = _a.value, onClick = _a.onClick, customClassName = _a.className, showThumbnail = _a.showThumbnail, showPrice = _a.showPrice, showDescription = _a.showDescription;
33
+ var _a = Object.assign({ shape: 'round', size: '60px' }, props), title = _a.title, shape = _a.shape, description = _a.description, options = _a.options, value = _a.value, onClick = _a.onClick, customClassName = _a.className, showThumbnail = _a.showThumbnail, showPrice = _a.showPrice, showDescription = _a.showDescription, size = _a.size;
34
34
  var cls = (0, utils_1.generateInputClassName)('swatch', customClassName, title);
35
35
  return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, { className: cls },
36
36
  react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
@@ -45,9 +45,9 @@ var Swatch = function (props) {
45
45
  }), imageUrl = _a.imageUrl, color = _a.color, name = _a.name, description = _a.description, price = _a.price, optionValue = _a.optionValue;
46
46
  var selected = value === optionValue;
47
47
  var clsOpt = "".concat(cls, "-option option-").concat(i, " ").concat(optionValue).concat(selected ? ' selected' : '');
48
- return (react_1.default.createElement(swatch_styles_1.OptionWrapper, { key: i, onClick: function () { return onClick && onClick(optionValue); }, selected: selected, className: clsOpt, shape: shape },
48
+ return (react_1.default.createElement(swatch_styles_1.OptionWrapper, { key: i, onClick: function () { return onClick && onClick(optionValue); }, selected: selected, className: clsOpt, shape: shape, size: size },
49
49
  react_1.default.createElement("div", null,
50
- react_1.default.createElement(Thumbnail, { imageUrl: imageUrl, color: color, shape: shape, className: clsOpt })),
50
+ react_1.default.createElement(Thumbnail, { imageUrl: imageUrl, color: color, shape: shape, className: clsOpt, size: size })),
51
51
  react_1.default.createElement(SwatchInfo, { title: name, price: price, description: description })));
52
52
  }))));
53
53
  };
package/dist/components/Swatch/swatch.styles.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  interface IOption {
2
2
  shape?: string;
3
+ size?: string;
3
4
  }
4
5
  interface IOptionWrapper extends IOption {
5
6
  selected: boolean;
package/dist/components/Swatch/swatch.styles.js CHANGED
@@ -10,16 +10,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.OptionWrapper = exports.SwatchInfoWrapper = exports.OptionThumbnail = exports.OptionWrapperStyles = exports.SwatchWrapper = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  exports.SwatchWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n\n & > div {\n margin-bottom: 5px;\n }\n\n & > div:not(:last-child) {\n margin-right: 5px;\n }\n"], ["\n width: 100%;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n\n & > div {\n margin-bottom: 5px;\n }\n\n & > div:not(:last-child) {\n margin-right: 5px;\n }\n"])));
13
- exports.OptionWrapperStyles = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 60px;\n width: 60px;\n border-radius: ", ";\n\n & > div:first-child {\n height: 60px;\n width: 60px;\n border-radius: ", ";\n border: 2px solid\n ", ";\n\n padding: 2px;\n\n cursor: pointer;\n transition: all 0.3s;\n\n &:hover {\n ", "\n }\n }\n"], ["\n height: 60px;\n width: 60px;\n border-radius: ", ";\n\n & > div:first-child {\n height: 60px;\n width: 60px;\n border-radius: ", ";\n border: 2px solid\n ", ";\n\n padding: 2px;\n\n cursor: pointer;\n transition: all 0.3s;\n\n &:hover {\n ", "\n }\n }\n"])), function (props) {
13
+ exports.OptionWrapperStyles = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n\n & > div:first-child {\n height: ", ";\n width: ", ";\n border-radius: ", ";\n border: 2px solid\n ", ";\n\n padding: 2px;\n\n cursor: pointer;\n transition: all 0.3s;\n\n &:hover {\n ", "\n }\n }\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n\n & > div:first-child {\n height: ", ";\n width: ", ";\n border-radius: ", ";\n border: 2px solid\n ", ";\n\n padding: 2px;\n\n cursor: pointer;\n transition: all 0.3s;\n\n &:hover {\n ", "\n }\n }\n"])), function (props) { return props.size || '60px'; }, function (props) { return props.size || '60px'; }, function (props) {
14
14
  return props.shape === 'round' ? '50%' : props.theme.borderRadius;
15
- }, function (props) {
15
+ }, function (props) { return props.size || '60px'; }, function (props) { return props.size || '60px'; }, function (props) {
16
16
  return props.shape === 'round' ? '50%' : props.theme.borderRadius;
17
17
  }, function (props) { return (props.selected ? props.theme.primaryColor : '#00000000'); }, function (props) {
18
18
  return props.selected
19
19
  ? ''
20
20
  : "border: 2px solid ".concat(props.theme.primaryColor, "55;");
21
21
  });
22
- exports.OptionThumbnail = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 52px;\n width: 52px;\n text-align: center;\n display: block;\n\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n img {\n height: 100%;\n width: auto;\n object-fit: cover;\n }\n"], ["\n height: 52px;\n width: 52px;\n text-align: center;\n display: block;\n\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n img {\n height: 100%;\n width: auto;\n object-fit: cover;\n }\n"])), function (props) {
22
+ exports.OptionThumbnail = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n text-align: center;\n display: block;\n\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n img {\n height: 100%;\n width: auto;\n object-fit: cover;\n }\n"], ["\n height: ", ";\n width: ", ";\n text-align: center;\n display: block;\n\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n img {\n height: 100%;\n width: auto;\n object-fit: cover;\n }\n"])), function (props) { return (props.size ? "calc(".concat(props.size, " - 8px)") : '52px'); }, function (props) { return (props.size ? "calc(".concat(props.size, " - 8px)") : '52px'); }, function (props) {
23
23
  return props.shape === 'round' ? '50%' : props.theme.borderRadius;
24
24
  }, function (props) { return (props.color ? "background: ".concat(props.color, ";") : ''); });
25
25
  exports.SwatchInfoWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: max-content;\n position: relative;\n top: -100%;\n left: 50%;\n transform: translateX(-50%) translateY(-100%);\n padding-bottom: 4px;\n color: white;\n font-family: ", ";\n\n display: none;\n\n & > div:nth-child(1) {\n background: rgba(0, 0, 0, 0.6);\n padding: 4px 6px;\n border-radius: ", ";\n max-width: 250px;\n }\n\n & > div:nth-child(2) {\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n\n & > div {\n width: 0;\n height: 0;\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n\n border-top: 8px solid rgba(0, 0, 0, 0.6);\n\n overflow: hidden;\n pointer-events: none;\n }\n }\n"], ["\n width: max-content;\n position: relative;\n top: -100%;\n left: 50%;\n transform: translateX(-50%) translateY(-100%);\n padding-bottom: 4px;\n color: white;\n font-family: ", ";\n\n display: none;\n\n & > div:nth-child(1) {\n background: rgba(0, 0, 0, 0.6);\n padding: 4px 6px;\n border-radius: ", ";\n max-width: 250px;\n }\n\n & > div:nth-child(2) {\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n\n & > div {\n width: 0;\n height: 0;\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n\n border-top: 8px solid rgba(0, 0, 0, 0.6);\n\n overflow: hidden;\n pointer-events: none;\n }\n }\n"])), function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.borderRadius; });
package/dist/utils.js CHANGED
@@ -351,28 +351,30 @@ var isUuid = function (str) {
351
351
  exports.isUuid = isUuid;
352
352
  var loadTrebleConfig = function () {
353
353
  var config = {};
354
+ try {
355
+ var project = require("/threekit.config.js").default;
356
+ if (project)
357
+ config.project = project;
358
+ }
359
+ catch (e) {
360
+ console.log(e);
361
+ }
362
+ try {
363
+ var player = require('/.treble/player.config.js').default;
364
+ if (player)
365
+ config.player = player;
366
+ }
367
+ catch (e) {
368
+ console.log(e);
369
+ }
370
+ try {
371
+ var treble = require('/.treble/treble.config.js').default;
372
+ if (treble)
373
+ config.treble = treble;
374
+ }
375
+ catch (e) {
376
+ console.log(e);
377
+ }
354
378
  return config;
355
379
  };
356
380
  exports.loadTrebleConfig = loadTrebleConfig;
357
- // export const loadTrebleConfig = () => {
358
- // let config: Partial<ITrebleConfig> = {};
359
- // try {
360
- // const project = require(`/threekit.config.js`).default;
361
- // if (project) config.project = project;
362
- // } catch (e) {
363
- // console.log(e);
364
- // }
365
- // try {
366
- // const player = require('/.treble/player.config.js').default;
367
- // if (player) config.player = player;
368
- // } catch (e) {
369
- // console.log(e);
370
- // }
371
- // try {
372
- // const treble = require('/.treble/treble.config.js').default;
373
- // if (treble) config.treble = treble;
374
- // } catch (e) {
375
- // console.log(e);
376
- // }
377
- // return config;
378
- // };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threekit-tools/treble",
3
- "version": "0.0.34-codepen-0",
3
+ "version": "0.0.37",
4
4
  "author": "Amaan Saeed",
5
5
  "license": "MIT",
6
6
  "files": [