@chakra-ui/c-icon - npm Package Compare versions

Comparing version 1.0.0-alpha.12 to 1.0.0-alpha.13

dist/chakra-ui-c-icon.cjs.dev.js

@@ -7,5 +7,7 @@ 'use strict';
 var vueSystem = require('@chakra-ui/vue-system');
+var vueUtils = require('@chakra-ui/vue-utils');
+var utils = require('@chakra-ui/utils');
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -23,6 +25,9 @@ var source = arguments[i];
   };
-
   return _extends.apply(this, arguments);
 }
 
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
 var fallbackIcon = {
@@ -33,45 +38,78 @@ path: "\n    <g stroke=\"currentColor\" strokeWidth=\"1.5\">\n      <path\n        strokeLinecap=\"round\"\n        fill=\"none\"\n        d=\"M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25\"\n      />\n      <path\n        fill=\"currentColor\"\n        strokeLinecap=\"round\"\n        d=\"M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0\"\n      />\n      <circle fill=\"none\" strokeMiterlimit=\"10\" cx=\"12\" cy=\"12\" r=\"11.25\" />\n    </g>\n  ",
 var iconProps = {
-  as: {
-    type: [Object, String],
-    "default": "svg"
-  },
-  name: {
-    type: [String]
-  },
-  size: {
-    type: [String],
-    "default": "1em"
-  }
+  as: "svg",
+  size: "1em"
 };
+var _iconProps = {
+  as: vueUtils.SNAO,
+  size: vueUtils.SNAO,
+  name: String
+};
 var CIcon = vue.defineComponent({
-  props: iconProps,
-  setup: function setup(props, _ref) {
+  name: "CIcon",
+  props: _iconProps,
+  setup: function setup(_props, _ref) {
     var slots = _ref.slots,
         attrs = _ref.attrs;
+    var props = vue.computed(function () {
+      return utils.mergeWith({}, iconProps, _props);
+    });
     var icons = vue.inject("$chakraIcons");
     var icon = vue.computed(function () {
-      return (icons == null ? void 0 : icons[props == null ? void 0 : props.name]) || fallbackIcon;
+      var _props$value;
+
+      return (icons == null ? void 0 : icons[(_props$value = props.value) == null ? void 0 : _props$value.name]) || fallbackIcon;
     });
+    var hasDefaultSlot = vue.computed(function () {
+      var _slots$default;
+
+      return slots == null ? void 0 : slots["default"] == null ? void 0 : (_slots$default = slots["default"]()) == null ? void 0 : _slots$default.length;
+    });
     var vnodeProps = vue.computed(function () {
-      return {
-        w: props.size,
-        h: props.size,
+      return _extends({
+        w: props.value.size,
+        h: props.value.size,
         display: "inline-block",
         lineHeight: "1em",
         flexShrink: 0,
-        color: "currentColor",
-        innerHTML: icon.value.path,
+        color: "currentColor"
+      }, !hasDefaultSlot.value && {
+        innerHTML: icon.value.path
+      }, {
         focusable: false,
         viewBox: icon.value.viewBox || fallbackIcon.viewBox
-      };
+      });
     });
     return function () {
-      return vue.h(vueSystem.chakra(props.as, {
-        label: "icon"
-      }), _extends({}, icon.value.attrs || {}, vnodeProps.value, attrs), slots);
+      return vue.createVNode(vueSystem.chakra.svg, vue.mergeProps({
+        "as": props.value.as,
+        "__label": "icon"
+      }, icon.value.attrs || {}, vnodeProps.value, attrs), _isSlot(slots) ? slots : {
+        "default": function _default() {
+          return [slots];
+        }
+      });
     };
   }
 });
+function createIconComponent(name) {
+  var componentName = vueUtils.camelCase(name);
+  var iconComponent = vue.defineComponent(function (props, _ref2) {
+    var slots = _ref2.slots,
+        attrs = _ref2.attrs;
+    return function () {
+      return vue.createVNode(CIcon, vue.mergeProps({
+        "name": name
+      }, props, attrs), _isSlot(slots) ? slots : {
+        "default": function _default() {
+          return [slots];
+        }
+      });
+    };
+  });
+  iconComponent.name = componentName;
+  return iconComponent;
+}
 
 exports.CIcon = CIcon;
+exports.createIconComponent = createIconComponent;
 exports.iconProps = iconProps;

dist/chakra-ui-c-icon.cjs.prod.js

@@ -7,5 +7,7 @@ 'use strict';
 var vueSystem = require('@chakra-ui/vue-system');
+var vueUtils = require('@chakra-ui/vue-utils');
+var utils = require('@chakra-ui/utils');
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -23,6 +25,9 @@ var source = arguments[i];
   };
-
   return _extends.apply(this, arguments);
 }
 
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
 var fallbackIcon = {
@@ -33,45 +38,78 @@ path: "\n    <g stroke=\"currentColor\" strokeWidth=\"1.5\">\n      <path\n        strokeLinecap=\"round\"\n        fill=\"none\"\n        d=\"M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25\"\n      />\n      <path\n        fill=\"currentColor\"\n        strokeLinecap=\"round\"\n        d=\"M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0\"\n      />\n      <circle fill=\"none\" strokeMiterlimit=\"10\" cx=\"12\" cy=\"12\" r=\"11.25\" />\n    </g>\n  ",
 var iconProps = {
-  as: {
-    type: [Object, String],
-    "default": "svg"
-  },
-  name: {
-    type: [String]
-  },
-  size: {
-    type: [String],
-    "default": "1em"
-  }
+  as: "svg",
+  size: "1em"
 };
+var _iconProps = {
+  as: vueUtils.SNAO,
+  size: vueUtils.SNAO,
+  name: String
+};
 var CIcon = vue.defineComponent({
-  props: iconProps,
-  setup: function setup(props, _ref) {
+  name: "CIcon",
+  props: _iconProps,
+  setup: function setup(_props, _ref) {
     var slots = _ref.slots,
         attrs = _ref.attrs;
+    var props = vue.computed(function () {
+      return utils.mergeWith({}, iconProps, _props);
+    });
     var icons = vue.inject("$chakraIcons");
     var icon = vue.computed(function () {
-      return (icons == null ? void 0 : icons[props == null ? void 0 : props.name]) || fallbackIcon;
+      var _props$value;
+
+      return (icons == null ? void 0 : icons[(_props$value = props.value) == null ? void 0 : _props$value.name]) || fallbackIcon;
     });
+    var hasDefaultSlot = vue.computed(function () {
+      var _slots$default;
+
+      return slots == null ? void 0 : slots["default"] == null ? void 0 : (_slots$default = slots["default"]()) == null ? void 0 : _slots$default.length;
+    });
     var vnodeProps = vue.computed(function () {
-      return {
-        w: props.size,
-        h: props.size,
+      return _extends({
+        w: props.value.size,
+        h: props.value.size,
         display: "inline-block",
         lineHeight: "1em",
         flexShrink: 0,
-        color: "currentColor",
-        innerHTML: icon.value.path,
+        color: "currentColor"
+      }, !hasDefaultSlot.value && {
+        innerHTML: icon.value.path
+      }, {
         focusable: false,
         viewBox: icon.value.viewBox || fallbackIcon.viewBox
-      };
+      });
     });
     return function () {
-      return vue.h(vueSystem.chakra(props.as, {
-        label: "icon"
-      }), _extends({}, icon.value.attrs || {}, vnodeProps.value, attrs), slots);
+      return vue.createVNode(vueSystem.chakra.svg, vue.mergeProps({
+        "as": props.value.as,
+        "__label": "icon"
+      }, icon.value.attrs || {}, vnodeProps.value, attrs), _isSlot(slots) ? slots : {
+        "default": function _default() {
+          return [slots];
+        }
+      });
     };
   }
 });
+function createIconComponent(name) {
+  var componentName = vueUtils.camelCase(name);
+  var iconComponent = vue.defineComponent(function (props, _ref2) {
+    var slots = _ref2.slots,
+        attrs = _ref2.attrs;
+    return function () {
+      return vue.createVNode(CIcon, vue.mergeProps({
+        "name": name
+      }, props, attrs), _isSlot(slots) ? slots : {
+        "default": function _default() {
+          return [slots];
+        }
+      });
+    };
+  });
+  iconComponent.name = componentName;
+  return iconComponent;
+}
 
 exports.CIcon = CIcon;
+exports.createIconComponent = createIconComponent;
 exports.iconProps = iconProps;

dist/chakra-ui-c-icon.esm.js

@@ -1,6 +0,8 @@
-import { defineComponent, inject, computed, h } from 'vue';
+import { defineComponent, computed, inject, createVNode, mergeProps, isVNode } from 'vue';
 import { chakra } from '@chakra-ui/vue-system';
+import { SNAO, camelCase } from '@chakra-ui/vue-utils';
+import { mergeWith } from '@chakra-ui/utils';
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -18,6 +20,9 @@ var source = arguments[i];
   };
-
   return _extends.apply(this, arguments);
 }
 
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+
 var fallbackIcon = {
@@ -28,44 +33,76 @@ path: "\n    <g stroke=\"currentColor\" strokeWidth=\"1.5\">\n      <path\n        strokeLinecap=\"round\"\n        fill=\"none\"\n        d=\"M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25\"\n      />\n      <path\n        fill=\"currentColor\"\n        strokeLinecap=\"round\"\n        d=\"M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0\"\n      />\n      <circle fill=\"none\" strokeMiterlimit=\"10\" cx=\"12\" cy=\"12\" r=\"11.25\" />\n    </g>\n  ",
 var iconProps = {
-  as: {
-    type: [Object, String],
-    "default": "svg"
-  },
-  name: {
-    type: [String]
-  },
-  size: {
-    type: [String],
-    "default": "1em"
-  }
+  as: "svg",
+  size: "1em"
 };
+var _iconProps = {
+  as: SNAO,
+  size: SNAO,
+  name: String
+};
 var CIcon = defineComponent({
-  props: iconProps,
-  setup: function setup(props, _ref) {
+  name: "CIcon",
+  props: _iconProps,
+  setup: function setup(_props, _ref) {
     var slots = _ref.slots,
         attrs = _ref.attrs;
+    var props = computed(function () {
+      return mergeWith({}, iconProps, _props);
+    });
     var icons = inject("$chakraIcons");
     var icon = computed(function () {
-      return (icons == null ? void 0 : icons[props == null ? void 0 : props.name]) || fallbackIcon;
+      var _props$value;
+
+      return (icons == null ? void 0 : icons[(_props$value = props.value) == null ? void 0 : _props$value.name]) || fallbackIcon;
     });
+    var hasDefaultSlot = computed(function () {
+      var _slots$default;
+
+      return slots == null ? void 0 : slots["default"] == null ? void 0 : (_slots$default = slots["default"]()) == null ? void 0 : _slots$default.length;
+    });
     var vnodeProps = computed(function () {
-      return {
-        w: props.size,
-        h: props.size,
+      return _extends({
+        w: props.value.size,
+        h: props.value.size,
         display: "inline-block",
         lineHeight: "1em",
         flexShrink: 0,
-        color: "currentColor",
-        innerHTML: icon.value.path,
+        color: "currentColor"
+      }, !hasDefaultSlot.value && {
+        innerHTML: icon.value.path
+      }, {
         focusable: false,
         viewBox: icon.value.viewBox || fallbackIcon.viewBox
-      };
+      });
     });
     return function () {
-      return h(chakra(props.as, {
-        label: "icon"
-      }), _extends({}, icon.value.attrs || {}, vnodeProps.value, attrs), slots);
+      return createVNode(chakra.svg, mergeProps({
+        "as": props.value.as,
+        "__label": "icon"
+      }, icon.value.attrs || {}, vnodeProps.value, attrs), _isSlot(slots) ? slots : {
+        "default": function _default() {
+          return [slots];
+        }
+      });
     };
   }
 });
+function createIconComponent(name) {
+  var componentName = camelCase(name);
+  var iconComponent = defineComponent(function (props, _ref2) {
+    var slots = _ref2.slots,
+        attrs = _ref2.attrs;
+    return function () {
+      return createVNode(CIcon, mergeProps({
+        "name": name
+      }, props, attrs), _isSlot(slots) ? slots : {
+        "default": function _default() {
+          return [slots];
+        }
+      });
+    };
+  });
+  iconComponent.name = componentName;
+  return iconComponent;
+}
 
-export { CIcon, iconProps };
+export { CIcon, createIconComponent, iconProps };

package.json

 {
   "name": "@chakra-ui/c-icon",
   "description": "Chakra UI Vue | A component to display icons in the browser component",
-  "version": "1.0.0-alpha.12",
+  "version": "1.0.0-alpha.13",
   "main": "dist/chakra-ui-c-icon.cjs.js",
@@ -27,6 +27,8 @@ "module": "dist/chakra-ui-c-icon.esm.js",
   "dependencies": {
-    "@chakra-ui/vue-system": "0.1.0-alpha.12"
+    "@chakra-ui/utils": "2.0.12",
+    "@chakra-ui/vue-system": "1.0.0-alpha.13",
+    "@chakra-ui/vue-utils": "1.0.0-alpha.14"
   },
   "devDependencies": {
-    "vue": "^3.2.29"
+    "vue": "^3.2.37"
   },
@@ -33,0 +35,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

495270

increased by3598.53%

Lines of code

2971

increased by1038.31%

Worsened metrics

Dependency count

4

increased by100%

Dependency changes

• + Added@chakra-ui/utils@2.0.12

• + Added@chakra-ui/vue-utils@1.0.0-alpha.14

• + Added@chakra-ui/c-color-mode@1.0.0-alpha.13(transitive)

• + Added@chakra-ui/styled-system@2.12.1(transitive)

• + Added@chakra-ui/utils@2.0.122.2.3(transitive)

• + Added@chakra-ui/vue-styled@0.0.0-alpha.4(transitive)

• + Added@chakra-ui/vue-system@1.0.0-alpha.13(transitive)

• + Added@chakra-ui/vue-utils@1.0.0-alpha.14(transitive)

• + Added@emotion/weak-memoize@0.2.5(transitive)

• + Added@types/lodash.camelcase@4.3.9(transitive)

• + Added@types/lodash.memoize@4.1.9(transitive)

• + Added@types/lodash.mergewith@4.6.9(transitive)

• + Addedclsx@1.2.1(transitive)

• + Addedlodash.memoize@4.1.2(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedreact@18.3.1(transitive)

• - Removed@chakra-ui/c-color-mode@0.1.0-alpha.10(transitive)

• - Removed@chakra-ui/styled-system@1.19.0(transitive)

• - Removed@chakra-ui/utils@1.10.4(transitive)

• - Removed@chakra-ui/vue-system@0.1.0-alpha.12(transitive)

• - Removed@chakra-ui/vue-utils@0.1.0-alpha.12(transitive)

• - Removedcsstype@3.0.9(transitive)

• Updated@chakra-ui/vue-system@1.0.0-alpha.13