vue-devui 1.0.0-rc.9 → 1.0.0

package/button/index.es.js

@@ -19,9 +19,6 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps, ref, h, render, inject, withDirectives, resolveDirective, provide, toRef } from "vue";
-function isUrl(value) {
-  return /^((http|https):)?\/\//.test(value);
-}
 const DEFAULT_PREFIX = "icon";
 const iconProps = {
   name: {
@@ -44,6 +41,17 @@ const iconProps = {
   classPrefix: {
     type: String,
     default: DEFAULT_PREFIX
+  },
+  operable: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  rotate: {
+    type: [Number, String]
   }
 };
 const svgIconProps = {
@@ -114,51 +122,107 @@ var svgIcon = defineComponent({
     };
   }
 });
+function isUrl(value) {
+  return /^((http|https):)?\/\//.test(value);
+}
+function useIconDom(props, ctx) {
+  const {
+    component,
+    name,
+    size,
+    color,
+    classPrefix,
+    rotate
+  } = toRefs(props);
+  const ns = useNamespace("icon");
+  const iconSize = computed(() => {
+    return typeof size.value === "number" ? `${size.value}px` : size.value;
+  });
+  const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
+  const imgIconDom = () => {
+    return createVNode("img", mergeProps({
+      "src": name.value,
+      "alt": name.value.split("/")[name.value.split("/").length - 1],
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        width: iconSize.value || "",
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`,
+        verticalAlign: "middle"
+      }
+    }, ctx.attrs), null);
+  };
+  const svgIconDom = () => {
+    return createVNode(IconComponent, mergeProps({
+      "name": name.value,
+      "color": color.value,
+      "size": iconSize.value,
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const fontIconDom = () => {
+    const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
+    return createVNode("i", mergeProps({
+      "class": [classPrefix.value, fontIconClass, (rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        fontSize: iconSize.value,
+        color: color.value,
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const iconDom = () => {
+    return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
+  };
+  return {
+    iconDom
+  };
+}
 var Icon = defineComponent({
   name: "DIcon",
   props: iconProps,
-  setup(props, {
-    attrs
-  }) {
+  emits: ["click"],
+  setup(props, ctx) {
     const {
-      component,
-      name,
-      size,
-      color,
-      classPrefix
+      disabled,
+      operable
     } = toRefs(props);
-    const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
-    const iconSize = computed(() => {
-      return typeof size.value === "number" ? `${size.value}px` : size.value;
-    });
-    const svgIconDom = () => {
-      return createVNode(IconComponent, mergeProps({
-        "name": name.value,
-        "color": color.value,
-        "size": iconSize.value
-      }, attrs), null);
-    };
-    const imgIconDom = () => {
-      return createVNode("img", mergeProps({
-        "src": name.value,
-        "alt": name.value.split("/")[name.value.split("/").length - 1],
-        "style": {
-          width: iconSize.value || ""
-        }
-      }, attrs), null);
+    const {
+      iconDom
+    } = useIconDom(props, ctx);
+    const ns = useNamespace("icon");
+    const wrapClassed = computed(() => ({
+      [ns.e("container")]: true,
+      [ns.m("disabled")]: disabled.value,
+      [ns.m("operable")]: operable.value
+    }));
+    const onClick = (e) => {
+      if (disabled.value) {
+        return;
+      }
+      ctx.emit("click", e);
     };
-    const fontIconDom = () => {
-      const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
-      return createVNode("i", mergeProps({
-        "class": [classPrefix.value, fontIconClass],
-        "style": {
-          fontSize: iconSize.value,
-          color: color.value
-        }
-      }, attrs), null);
+    return () => {
+      var _a, _b, _c, _d;
+      return createVNode("div", {
+        "class": wrapClassed.value,
+        "onClick": onClick
+      }, [(_b = (_a = ctx.slots).prefix) == null ? void 0 : _b.call(_a), iconDom(), (_d = (_c = ctx.slots).suffix) == null ? void 0 : _d.call(_c)]);
     };
+  }
+});
+var iconGroup = "";
+defineComponent({
+  name: "DIconGroup",
+  setup(_, ctx) {
+    const ns = useNamespace("icon-group");
     return () => {
-      return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
+      var _a, _b;
+      return createVNode("div", {
+        "class": ns.b()
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
     };
   }
 });