goblin-gadgets 3.2.2 → 3.2.3

package/widgets/slider-xy/props.js

@@ -1,87 +1,87 @@
-import {types} from 'goblin-gadgets/types/types.js';
-
-export default [
-  // Aspect.
-  {
-    name: 'value',
-    group: 'aspect',
-    type: types.string,
-    description: 'Values XY between 0 and 100 (by example "50;0").',
-  },
-  {
-    name: 'marginSize',
-    group: 'aspect',
-    type: types.enum(['', 'zero', 'small', 'default', 'large']),
-  },
-  {
-    name: 'marginStyle',
-    group: 'aspect',
-    type: types.enum(['', 'none', 'shadow']),
-  },
-  {
-    name: 'cabSize',
-    group: 'aspect',
-    type: types.enum(['', 'small', 'default', 'large']),
-  },
-  {
-    name: 'hue',
-    group: 'aspect',
-    type: types.number,
-    min: 0,
-    max: 360,
-  },
-  {
-    name: 'disabled',
-    group: 'aspect',
-    type: types.bool,
-  },
-  {
-    name: 'draggingScale',
-    group: 'aspect',
-    type: types.number,
-  },
-
-  // Layout.
-  {
-    name: 'grow',
-    group: 'layout',
-    type: types.grow,
-  },
-  {
-    name: 'width',
-    group: 'layout',
-    type: types.pixel,
-    min: 0,
-    max: 1000,
-  },
-  {
-    name: 'height',
-    group: 'layout',
-    type: types.pixel,
-    min: 0,
-    max: 1000,
-  },
-
-  // Function.
-  {
-    name: 'onChange',
-    group: 'function',
-    type: types.function,
-  },
-
-  // Functionality.
-  {
-    name: 'changeMode',
-    group: 'functionality',
-    type: types.enum(['blur', 'throttled', 'immediate', 'passthrough']),
-    description:
-      "'blur': onChange is called only on blur.\n'throttled': onChange is called on blur and every X ms (see 'throttleDelay').\n'immediate': onChange is called on each key press.\n'passthrough': value and onChange are directly given to the underlying input.",
-  },
-  {
-    name: 'throttleDelay',
-    group: 'functionality',
-    type: types.number,
-    min: 0,
-    max: 10000,
-  },
-];
+import {types} from 'goblin-gadgets/types/types.js';
+
+export default [
+  // Aspect.
+  {
+    name: 'value',
+    group: 'aspect',
+    type: types.string,
+    description: 'Values XY between 0 and 100 (by example "50;0").',
+  },
+  {
+    name: 'marginSize',
+    group: 'aspect',
+    type: types.enum(['', 'zero', 'small', 'default', 'large']),
+  },
+  {
+    name: 'marginStyle',
+    group: 'aspect',
+    type: types.enum(['', 'none', 'shadow']),
+  },
+  {
+    name: 'cabSize',
+    group: 'aspect',
+    type: types.enum(['', 'small', 'default', 'large']),
+  },
+  {
+    name: 'hue',
+    group: 'aspect',
+    type: types.number,
+    min: 0,
+    max: 360,
+  },
+  {
+    name: 'disabled',
+    group: 'aspect',
+    type: types.bool,
+  },
+  {
+    name: 'draggingScale',
+    group: 'aspect',
+    type: types.number,
+  },
+
+  // Layout.
+  {
+    name: 'grow',
+    group: 'layout',
+    type: types.grow,
+  },
+  {
+    name: 'width',
+    group: 'layout',
+    type: types.pixel,
+    min: 0,
+    max: 1000,
+  },
+  {
+    name: 'height',
+    group: 'layout',
+    type: types.pixel,
+    min: 0,
+    max: 1000,
+  },
+
+  // Function.
+  {
+    name: 'onChange',
+    group: 'function',
+    type: types.function,
+  },
+
+  // Functionality.
+  {
+    name: 'changeMode',
+    group: 'functionality',
+    type: types.enum(['blur', 'throttled', 'immediate', 'passthrough']),
+    description:
+      "'blur': onChange is called only on blur.\n'throttled': onChange is called on blur and every X ms (see 'throttleDelay').\n'immediate': onChange is called on each key press.\n'passthrough': value and onChange are directly given to the underlying input.",
+  },
+  {
+    name: 'throttleDelay',
+    group: 'functionality',
+    type: types.number,
+    min: 0,
+    max: 10000,
+  },
+];

package/widgets/slider-xy/scenarios.js

@@ -1,19 +1,19 @@
-export default [
-  {
-    name: 'default',
-    props: {
-      width: '200px',
-      height: '200px',
-      cabSize: 'default',
-      marginSize: 'small',
-      marginStyle: 'none',
-      draggingScale: 1,
-      hue: 50,
-      value: '75;95',
-    },
-  },
-  {
-    name: 'empty',
-    props: {},
-  },
-];
+export default [
+  {
+    name: 'default',
+    props: {
+      width: '200px',
+      height: '200px',
+      cabSize: 'default',
+      marginSize: 'small',
+      marginStyle: 'none',
+      draggingScale: 1,
+      hue: 50,
+      value: '75;95',
+    },
+  },
+  {
+    name: 'empty',
+    props: {},
+  },
+];

package/widgets/slider-xy/styles.js

@@ -1,102 +1,102 @@
-import {Unit} from 'goblin-theme';
-const px = Unit.toPx;
-
-/******************************************************************************/
-
-export const propNames = [
-  'disabled',
-  'grow',
-  'width',
-  'height',
-  'cabSize',
-  'marginSize',
-  'marginStyle',
-  'draggingScale',
-];
-
-export default function styles(theme, props) {
-  const {
-    disabled,
-    grow,
-    width,
-    height,
-    cabSize = 'default',
-    marginSize = 'default',
-    marginStyle = 'shadow',
-    draggingScale = 1,
-  } = props;
-
-  const isDark = theme.colors.isDarkTheme;
-
-  const cabThickness = {
-    default: 14,
-    large: 18,
-  }[cabSize];
-
-  const insideMargin = {
-    zero: 0,
-    small: 8,
-    default: 12,
-    large: 20,
-  }[marginSize];
-
-  const sliderXY = {
-    position: 'relative',
-    flexGrow: grow,
-    width: width,
-    height: height,
-    opacity: disabled ? 0.4 : 1,
-    transform: 'scale(1)',
-    transition: '0.3s ease-out',
-    cursor: disabled ? null : 'pointer',
-  };
-
-  const sliderXYdragging = {
-    ...sliderXY,
-    transform: `scale(${draggingScale})`,
-  };
-
-  if (marginSize !== 'zero' && marginStyle === 'shadow') {
-    sliderXY.borderRadius = px(insideMargin);
-    sliderXY.boxShadow = isDark
-      ? '#444 0px -2px 2px inset'
-      : '#bbb 0px 2px 5px inset';
-  }
-
-  const inside = {
-    position: 'absolute',
-    left: px(insideMargin),
-    right: px(insideMargin),
-    bottom: px(insideMargin),
-    top: px(insideMargin),
-    display: 'flex',
-    flexDirection: 'row',
-  };
-
-  const cab = {
-    position: 'absolute',
-    width: px(cabThickness),
-    height: px(cabThickness),
-    borderRadius: px(cabThickness / 2),
-    background: 'white',
-    boxShadow: '0px 3px 4px 0px rgba(0,0,0,0.6)',
-  };
-
-  const cabDragging = {
-    ...cab,
-    width: px(cabThickness / 2),
-    height: px(cabThickness / 2),
-  };
-
-  /******************************************************************************/
-
-  return {
-    sliderXY,
-    sliderXYdragging,
-    inside,
-    cab,
-    cabDragging,
-  };
-}
-
-/******************************************************************************/
+import {Unit} from 'goblin-theme';
+const px = Unit.toPx;
+
+/******************************************************************************/
+
+export const propNames = [
+  'disabled',
+  'grow',
+  'width',
+  'height',
+  'cabSize',
+  'marginSize',
+  'marginStyle',
+  'draggingScale',
+];
+
+export default function styles(theme, props) {
+  const {
+    disabled,
+    grow,
+    width,
+    height,
+    cabSize = 'default',
+    marginSize = 'default',
+    marginStyle = 'shadow',
+    draggingScale = 1,
+  } = props;
+
+  const isDark = theme.colors.isDarkTheme;
+
+  const cabThickness = {
+    default: 14,
+    large: 18,
+  }[cabSize];
+
+  const insideMargin = {
+    zero: 0,
+    small: 8,
+    default: 12,
+    large: 20,
+  }[marginSize];
+
+  const sliderXY = {
+    position: 'relative',
+    flexGrow: grow,
+    width: width,
+    height: height,
+    opacity: disabled ? 0.4 : 1,
+    transform: 'scale(1)',
+    transition: '0.3s ease-out',
+    cursor: disabled ? null : 'pointer',
+  };
+
+  const sliderXYdragging = {
+    ...sliderXY,
+    transform: `scale(${draggingScale})`,
+  };
+
+  if (marginSize !== 'zero' && marginStyle === 'shadow') {
+    sliderXY.borderRadius = px(insideMargin);
+    sliderXY.boxShadow = isDark
+      ? '#444 0px -2px 2px inset'
+      : '#bbb 0px 2px 5px inset';
+  }
+
+  const inside = {
+    position: 'absolute',
+    left: px(insideMargin),
+    right: px(insideMargin),
+    bottom: px(insideMargin),
+    top: px(insideMargin),
+    display: 'flex',
+    flexDirection: 'row',
+  };
+
+  const cab = {
+    position: 'absolute',
+    width: px(cabThickness),
+    height: px(cabThickness),
+    borderRadius: px(cabThickness / 2),
+    background: 'white',
+    boxShadow: '0px 3px 4px 0px rgba(0,0,0,0.6)',
+  };
+
+  const cabDragging = {
+    ...cab,
+    width: px(cabThickness / 2),
+    height: px(cabThickness / 2),
+  };
+
+  /******************************************************************************/
+
+  return {
+    sliderXY,
+    sliderXYdragging,
+    inside,
+    cab,
+    cabDragging,
+  };
+}
+
+/******************************************************************************/