vue-devui 1.0.0-alpha.1 → 1.0.0-alpha.10

package/tag/index.es.js

@@ -0,0 +1,156 @@
+import { computed, defineComponent, toRefs, watch, onUnmounted, createVNode, resolveComponent } from "vue";
+const tagProps = {
+  type: {
+    type: String,
+    default: ""
+  },
+  color: {
+    type: String,
+    default: ""
+  },
+  titleContent: {
+    type: String,
+    default: ""
+  },
+  checked: {
+    type: Boolean,
+    default: false
+  },
+  deletable: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: "xs"
+  }
+};
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+function useClass(props) {
+  const ns = useNamespace("tag");
+  return computed(() => {
+    const { type, color, deletable } = props;
+    return `${ns.e("item")} ${ns.m(type || (color ? "colorful" : "") || "default")} ${deletable ? ns.m("deletable") : ""} ${ns.m(props.size)}`;
+  });
+}
+function useColor(props) {
+  return computed(() => {
+    const { color, type } = props;
+    const typeMap = {
+      primary: "var(--devui-primary, #5e7ce0)",
+      success: "var(--devui-success, #50d4ab)",
+      warning: "var(--devui-warning, #fac20a)",
+      danger: "var(--devui-danger, #f66f6a)"
+    };
+    const colorMap = {
+      "blue-w98": "#3383ff",
+      "aqua-w98": "#39afcc",
+      "olivine-w98": "#2fa898",
+      "green-w98": "#4eb15e",
+      "yellow-w98": "#b08d1a",
+      "orange-w98": "#d47f35",
+      "red-w98": "#f66f6a",
+      "pink-w98": "#f3689a",
+      "purple-w98": "#a97af8"
+    };
+    if (!color && type) {
+      return typeMap[type];
+    }
+    const themeColor = colorMap[color] || color;
+    return themeColor;
+  });
+}
+var tag = "";
+var Tag = defineComponent({
+  name: "DTag",
+  props: tagProps,
+  emits: ["click", "tagDelete", "checkedChange"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const ns = useNamespace("tag");
+    const {
+      type,
+      color,
+      checked,
+      titleContent,
+      deletable
+    } = toRefs(props);
+    const tagClass = useClass(props);
+    const themeColor = useColor(props);
+    const tagTitle = titleContent.value || "";
+    const isDefaultTag = () => !type.value && !color.value;
+    const handleClick = (e) => {
+      emit("click", e);
+    };
+    const handleDelete = (e) => {
+      e.stopPropagation();
+      emit("tagDelete", e);
+    };
+    const closeIconEl = () => {
+      return deletable.value ? createVNode("a", {
+        "class": "remove-button",
+        "onClick": handleDelete
+      }, [isDefaultTag() ? createVNode(resolveComponent("d-icon"), {
+        "size": "12px",
+        "name": "error-o",
+        "color": "#adb0b8"
+      }, null) : createVNode(resolveComponent("d-icon"), {
+        "size": "12px",
+        "name": "close",
+        "color": themeColor.value
+      }, null)]) : null;
+    };
+    const unWatch = watch(checked, (newVal) => {
+      emit("checkedChange", newVal);
+    });
+    onUnmounted(() => unWatch());
+    return () => {
+      var _a;
+      return createVNode("div", {
+        "class": ns.b(),
+        "onClick": handleClick
+      }, [createVNode("span", {
+        "class": tagClass.value,
+        "style": {
+          display: "block",
+          color: checked.value ? "#fff" : themeColor.value,
+          backgroundColor: checked.value ? themeColor.value : !color.value ? "" : "var(--devui-base-bg, #ffffff)"
+        },
+        "title": tagTitle
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots), closeIconEl()])]);
+    };
+  }
+});
+var index = {
+  title: "Tag \u6807\u7B7E",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "100%",
+  install(app) {
+    app.component(Tag.name, Tag);
+  }
+};
+export { Tag, index as default, tagProps };

package/tag/index.umd.js

@@ -0,0 +1 @@
+(function(c,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis!="undefined"?globalThis:c||self,e(c.index={},c.Vue))})(this,function(c,e){"use strict";const m={type:{type:String,default:""},color:{type:String,default:""},titleContent:{type:String,default:""},checked:{type:Boolean,default:!1},deletable:{type:Boolean,default:!1},size:{type:String,default:"xs"}};function s(n,t,a){let o=n;return t&&(o+=`__${t}`),a&&(o+=`--${a}`),o}function v(n,t=!1){const a=t?`.devui-${n}`:`devui-${n}`;return{b:()=>s(a),e:l=>l?s(a,l):"",m:l=>l?s(a,"",l):"",em:(l,f)=>l&&f?s(a,l,f):""}}function y(n){const t=v("tag");return e.computed(()=>{const{type:a,color:o,deletable:u}=n;return`${t.e("item")} ${t.m(a||(o?"colorful":"")||"default")} ${u?t.m("deletable"):""} ${t.m(n.size)}`})}function b(n){return e.computed(()=>{const{color:t,type:a}=n,o={primary:"var(--devui-primary, #5e7ce0)",success:"var(--devui-success, #50d4ab)",warning:"var(--devui-warning, #fac20a)",danger:"var(--devui-danger, #f66f6a)"},u={"blue-w98":"#3383ff","aqua-w98":"#39afcc","olivine-w98":"#2fa898","green-w98":"#4eb15e","yellow-w98":"#b08d1a","orange-w98":"#d47f35","red-w98":"#f66f6a","pink-w98":"#f3689a","purple-w98":"#a97af8"};return!t&&a?o[a]:u[t]||t})}var V="",p=e.defineComponent({name:"DTag",props:m,emits:["click","tagDelete","checkedChange"],setup(n,{slots:t,emit:a}){const o=v("tag"),{type:u,color:i,checked:d,titleContent:l,deletable:f}=e.toRefs(n),h=y(n),g=b(n),w=l.value||"",k=()=>!u.value&&!i.value,T=r=>{a("click",r)},$=r=>{r.stopPropagation(),a("tagDelete",r)},N=()=>f.value?e.createVNode("a",{class:"remove-button",onClick:$},[k()?e.createVNode(e.resolveComponent("d-icon"),{size:"12px",name:"error-o",color:"#adb0b8"},null):e.createVNode(e.resolveComponent("d-icon"),{size:"12px",name:"close",color:g.value},null)]):null,S=e.watch(d,r=>{a("checkedChange",r)});return e.onUnmounted(()=>S()),()=>{var r;return e.createVNode("div",{class:o.b(),onClick:T},[e.createVNode("span",{class:h.value,style:{display:"block",color:d.value?"#fff":g.value,backgroundColor:d.value?g.value:i.value?"var(--devui-base-bg, #ffffff)":""},title:w},[(r=t.default)==null?void 0:r.call(t),N()])])}}}),C={title:"Tag \u6807\u7B7E",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(n){n.component(p.name,p)}};c.Tag=p,c.default=C,c.tagProps=m,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/tag/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "tag",
+  "version": "0.0.0",
+  "main": "index.umd.js",
+  "module": "index.es.js",
+  "style": "style.css"
+}

package/tag/style.css

@@ -0,0 +1 @@
+@charset "UTF-8";.devui-tag{display:inline-block;margin:4px}.devui-tag .devui-tag__item{display:block;position:relative;padding:0 8px;height:20px;border:1px solid;border-radius:var(--devui-border-radius, 4px);font-size:var(--devui-font-size, 14px);line-height:20px;cursor:default}.devui-tag .devui-tag__item.devui-tag--default{border:0;color:var(--devui-text, #252b3a);background-color:var(--devui-default-bg, #f7f8fa)}.devui-tag .devui-tag__item.devui-tag--primary{color:var(--devui-primary, #5e7ce0);background-color:var(--devui-primary-bg, #f2f5fc)}.devui-tag .devui-tag__item.devui-tag--success{color:var(--devui-success, #50d4ab);background-color:var(--devui-success-bg, #edfff9)}.devui-tag .devui-tag__item.devui-tag--warning{color:var(--devui-warning, #fac20a);background-color:var(--devui-warning-bg, #fff3e8)}.devui-tag .devui-tag__item.devui-tag--danger{color:var(--devui-danger, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}.devui-tag .devui-tag__item.devui-tag--colorful{background-color:#fff}.devui-tag .devui-tag__item.devui-tag--deletable{padding-right:32px}.devui-tag .devui-tag__item.devui-tag--lg{font-size:var(--devui-font-size-lg, 14px);height:32px;line-height:30px}.devui-tag .devui-tag__item.devui-tag--md{font-size:var(--devui-font-size-lg, 14px);height:28px;line-height:26px}.devui-tag .devui-tag__item.devui-tag--sm{font-size:var(--devui-font-size-sm, 12px);height:24px;line-height:22px}.devui-tag .devui-tag__item.devui-tag--xs{font-size:var(--devui-font-size-sm, 12px);height:20px;line-height:18px}.devui-tag .remove-button{display:inline-block;margin-left:12px;font-size:var(--devui-font-size-icon, 16px);cursor:pointer;width:12px;height:12px;line-height:12px;border-radius:50%;text-align:center;position:absolute;top:50%;transform:translateY(-50%)}.devui-tag .remove-button i{vertical-align:0}

package/textarea/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;