vxe-pc-ui 0.0.2 → 0.2.0

package/lib/checkbox/src/group.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _globalStore = _interopRequireDefault(require("../../ui/src/globalStore"));
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _checkbox = _interopRequireDefault(require("./checkbox"));
+var _size = require("../../hooks/size");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = (0, _vue.defineComponent)({
+  name: 'VxeCheckboxGroup',
+  props: {
+    modelValue: Array,
+    options: Array,
+    optionProps: Object,
+    disabled: Boolean,
+    max: {
+      type: [String, Number],
+      default: null
+    },
+    size: {
+      type: String,
+      default: () => _globalStore.default.checkboxGroup.size || _globalStore.default.size
+    }
+  },
+  emits: ['update:modelValue', 'change'],
+  setup(props, context) {
+    const {
+      slots,
+      emit
+    } = context;
+    const $xeform = (0, _vue.inject)('$xeForm', null);
+    const formItemInfo = (0, _vue.inject)('xeFormItemInfo', null);
+    const xID = _xeUtils.default.uniqueId();
+    const computeIsMaximize = (0, _vue.computed)(() => {
+      const {
+        modelValue,
+        max
+      } = props;
+      if (max) {
+        return (modelValue ? modelValue.length : 0) >= _xeUtils.default.toNumber(max);
+      }
+      return false;
+    });
+    const computePropsOpts = (0, _vue.computed)(() => {
+      return props.optionProps || {};
+    });
+    const computeLabelField = (0, _vue.computed)(() => {
+      const propsOpts = computePropsOpts.value;
+      return propsOpts.label || 'label';
+    });
+    const computeValueField = (0, _vue.computed)(() => {
+      const propsOpts = computePropsOpts.value;
+      return propsOpts.value || 'value';
+    });
+    const computeDisabledField = (0, _vue.computed)(() => {
+      const propsOpts = computePropsOpts.value;
+      return propsOpts.disabled || 'disabled';
+    });
+    const computeMaps = {
+      computeIsMaximize
+    };
+    const $xecheckboxgroup = {
+      xID,
+      props,
+      context,
+      getComputeMaps: () => computeMaps
+    };
+    (0, _size.useSize)(props);
+    const checkboxGroupMethods = {
+      dispatchEvent(type, params, evnt) {
+        emit(type, Object.assign({
+          $checkboxGroup: $xecheckboxgroup,
+          $event: evnt
+        }, params));
+      }
+    };
+    const checkboxGroupPrivateMethods = {
+      handleChecked(params, evnt) {
+        const {
+          checked,
+          label
+        } = params;
+        const checklist = props.modelValue || [];
+        const checkIndex = checklist.indexOf(label);
+        if (checked) {
+          if (checkIndex === -1) {
+            checklist.push(label);
+          }
+        } else {
+          checklist.splice(checkIndex, 1);
+        }
+        emit('update:modelValue', checklist);
+        $xecheckboxgroup.dispatchEvent('change', Object.assign({
+          checklist
+        }, params), evnt);
+        // 自动更新校验状态
+        if ($xeform && formItemInfo) {
+          $xeform.triggerItemEvent(evnt, formItemInfo.itemConfig.field, checklist);
+        }
+      }
+    };
+    Object.assign($xecheckboxgroup, checkboxGroupMethods, checkboxGroupPrivateMethods);
+    const renderVN = () => {
+      const {
+        options
+      } = props;
+      const defaultSlot = slots.default;
+      const valueField = computeValueField.value;
+      const labelField = computeLabelField.value;
+      const disabledField = computeDisabledField.value;
+      return (0, _vue.h)('div', {
+        class: 'vxe-checkbox-group'
+      }, defaultSlot ? defaultSlot({}) : options ? options.map(item => {
+        return (0, _vue.h)(_checkbox.default, {
+          label: item[valueField],
+          content: item[labelField],
+          disabled: item[disabledField]
+        });
+      }) : []);
+    };
+    $xecheckboxgroup.renderVN = renderVN;
+    (0, _vue.provide)('$xecheckboxgroup', $xecheckboxgroup);
+    return renderVN;
+  }
+});

package/lib/checkbox/src/group.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_globalStore=_interopRequireDefault(require("../../ui/src/globalStore")),_xeUtils=_interopRequireDefault(require("xe-utils")),_checkbox=_interopRequireDefault(require("./checkbox")),_size=require("../../hooks/size");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeCheckboxGroup",props:{modelValue:Array,options:Array,optionProps:Object,disabled:Boolean,max:{type:[String,Number],default:null},size:{type:String,default:()=>_globalStore.default.checkboxGroup.size||_globalStore.default.size}},emits:["update:modelValue","change"],setup(a,e){const{slots:r,emit:i}=e,n=(0,_vue.inject)("$xeForm",null),s=(0,_vue.inject)("xeFormItemInfo",null);var t=_xeUtils.default.uniqueId(),u=(0,_vue.computed)(()=>{var{modelValue:e,max:t}=a;return!!t&&(e?e.length:0)>=_xeUtils.default.toNumber(t)});const l=(0,_vue.computed)(()=>a.optionProps||{}),d=(0,_vue.computed)(()=>{return l.value.label||"label"}),c=(0,_vue.computed)(()=>{return l.value.value||"value"}),p=(0,_vue.computed)(()=>{return l.value.disabled||"disabled"}),o={computeIsMaximize:u},v={xID:t,props:a,context:e,getComputeMaps:()=>o};(0,_size.useSize)(a);Object.assign(v,{dispatchEvent(e,t,u){i(e,Object.assign({$checkboxGroup:v,$event:u},t))}},{handleChecked(e,t){var{checked:u,label:l}=e,o=a.modelValue||[],r=o.indexOf(l);u?-1===r&&o.push(l):o.splice(r,1),i("update:modelValue",o),v.dispatchEvent("change",Object.assign({checklist:o},e),t),n&&s&&n.triggerItemEvent(t,s.itemConfig.field,o)}});u=()=>{var e=a["options"],t=r.default;const u=c.value,l=d.value,o=p.value;return(0,_vue.h)("div",{class:"vxe-checkbox-group"},t?t({}):e?e.map(e=>(0,_vue.h)(_checkbox.default,{label:e[u],content:e[l],disabled:e[o]})):[])};return v.renderVN=u,(0,_vue.provide)("$xecheckboxgroup",v),u}});

package/lib/checkbox/style/style.css

@@ -0,0 +1,107 @@
+/*checkbox-group*/
+.vxe-checkbox-group {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+}
+
+/*checkbox*/
+.vxe-checkbox {
+  display: inline-block;
+  vertical-align: middle;
+  white-space: nowrap;
+  line-height: 1;
+}
+.vxe-checkbox .vxe-checkbox--icon {
+  font-size: 1.34em;
+}
+.vxe-checkbox .vxe-checkbox--icon {
+  color: var(--vxe-ui-input-border-color);
+  vertical-align: middle;
+  font-weight: 700;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.vxe-checkbox.is--checked, .vxe-checkbox.is--indeterminate {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-checkbox.is--checked .vxe-checkbox--icon, .vxe-checkbox.is--indeterminate .vxe-checkbox--icon {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-checkbox:not(.is--disabled) {
+  cursor: pointer;
+}
+.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-checkbox.is--hidden {
+  cursor: default;
+}
+.vxe-checkbox.is--disabled {
+  color: var(--vxe-ui-font-disabled-color);
+  cursor: not-allowed;
+}
+.vxe-checkbox.is--disabled .vxe-checkbox--icon {
+  color: var(--vxe-ui-input-disabled-color);
+}
+.vxe-checkbox .vxe-checkbox--label {
+  padding-left: 0.5em;
+  vertical-align: middle;
+}
+.vxe-checkbox + .vxe-checkbox {
+  margin-left: 10px;
+}
+.vxe-checkbox > input[type=checkbox] {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+.vxe-checkbox.is--indeterminate > input:not(:checked) + .vxe-checkbox--icon {
+  color: var(--vxe-primary-color);
+}
+.vxe-checkbox:not(.is--disabled) > input:focus + .vxe-checkbox--icon {
+  color: var(--vxe-primary-color);
+  box-shadow: 0 0 0.2em 0 var(--vxe-primary-color);
+}
+.vxe-checkbox:not(.is--disabled):hover > input + .vxe-checkbox--icon {
+  border-color: var(--vxe-primary-color);
+}
+.vxe-checkbox.is--disabled {
+  cursor: not-allowed;
+}
+.vxe-checkbox.is--disabled > input + .vxe-checkbox--icon {
+  color: var(--vxe-ui-input-disabled-color);
+}
+.vxe-checkbox.is--disabled > input + .vxe-checkbox--icon + .vxe-checkbox--label {
+  color: var(--vxe-font-disabled-color);
+}
+.vxe-checkbox.is--disabled > input:checked + .vxe-checkbox--icon {
+  color: var(--vxe-ui-input-disabled-color);
+}
+.vxe-checkbox .vxe-checkbox--label {
+  padding-left: 0.5em;
+  vertical-align: middle;
+  display: inline-block;
+  max-width: 50em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vxe-checkbox {
+  font-size: var(--vxe-font-size);
+}
+.vxe-checkbox.size--medium {
+  font-size: var(--vxe-font-size-medium);
+}
+.vxe-checkbox.size--small {
+  font-size: var(--vxe-font-size-small);
+}
+.vxe-checkbox.size--mini {
+  font-size: var(--vxe-font-size-mini);
+}

package/lib/checkbox/style/style.min.css

@@ -0,0 +1 @@
+.vxe-checkbox-group{display:inline-block;vertical-align:middle;line-height:1}.vxe-checkbox{display:inline-block;vertical-align:middle;white-space:nowrap;line-height:1}.vxe-checkbox .vxe-checkbox--icon{font-size:1.34em}.vxe-checkbox .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-checkbox.is--checked,.vxe-checkbox.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-checkbox.is--checked .vxe-checkbox--icon,.vxe-checkbox.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-checkbox:not(.is--disabled){cursor:pointer}.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-checkbox.is--hidden{cursor:default}.vxe-checkbox.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-checkbox.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-checkbox .vxe-checkbox--label{padding-left:.5em;vertical-align:middle}.vxe-checkbox+.vxe-checkbox{margin-left:10px}.vxe-checkbox>input[type=checkbox]{position:absolute;width:0;height:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.vxe-checkbox.is--indeterminate>input:not(:checked)+.vxe-checkbox--icon{color:var(--vxe-primary-color)}.vxe-checkbox:not(.is--disabled)>input:focus+.vxe-checkbox--icon{color:var(--vxe-primary-color);box-shadow:0 0 .2em 0 var(--vxe-primary-color)}.vxe-checkbox:not(.is--disabled):hover>input+.vxe-checkbox--icon{border-color:var(--vxe-primary-color)}.vxe-checkbox.is--disabled{cursor:not-allowed}.vxe-checkbox.is--disabled>input+.vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-checkbox.is--disabled>input+.vxe-checkbox--icon+.vxe-checkbox--label{color:var(--vxe-font-disabled-color)}.vxe-checkbox.is--disabled>input:checked+.vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-checkbox .vxe-checkbox--label{padding-left:.5em;vertical-align:middle;display:inline-block;max-width:50em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-checkbox{font-size:var(--vxe-font-size)}.vxe-checkbox.size--medium{font-size:var(--vxe-font-size-medium)}.vxe-checkbox.size--small{font-size:var(--vxe-font-size-small)}.vxe-checkbox.size--mini{font-size:var(--vxe-font-size-mini)}

package/lib/checkbox-group/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VxeCheckboxGroup = exports.CheckboxGroup = void 0;
+var _group = _interopRequireDefault(require("../checkbox/src/group"));
+var _dynamics = require("../dynamics");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const VxeCheckboxGroup = exports.VxeCheckboxGroup = Object.assign(_group.default, {
+  install(app) {
+    app.component(_group.default.name, _group.default);
+  }
+});
+const CheckboxGroup = exports.CheckboxGroup = VxeCheckboxGroup;
+_dynamics.dynamicApp.component(_group.default.name, _group.default);
+var _default = exports.default = VxeCheckboxGroup;

package/lib/checkbox-group/index.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.VxeCheckboxGroup=exports.CheckboxGroup=void 0;var _group=_interopRequireDefault(require("../checkbox/src/group")),_dynamics=require("../dynamics");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VxeCheckboxGroup=exports.VxeCheckboxGroup=Object.assign(_group.default,{install(e){e.component(_group.default.name,_group.default)}}),CheckboxGroup=exports.CheckboxGroup=VxeCheckboxGroup;_dynamics.dynamicApp.component(_group.default.name,_group.default);var _default=exports.default=VxeCheckboxGroup;

package/lib/col/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Col = void 0;
-var _col = _interopRequireDefault(require("./src/col"));
+var _col = _interopRequireDefault(require("../row/src/col"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const VxeCol = Object.assign({}, _col.default, {
   install(app) {

package/lib/col/index.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Col=void 0;var _col=_interopRequireDefault(require("./src/col"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VxeCol=Object.assign({},_col.default,{install(e){e.component(_col.default.name,_col.default)}}),Col=exports.Col=VxeCol;var _default=exports.default=VxeCol;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Col=void 0;var _col=_interopRequireDefault(require("../row/src/col"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VxeCol=Object.assign({},_col.default,{install(e){e.component(_col.default.name,_col.default)}}),Col=exports.Col=VxeCol;var _default=exports.default=VxeCol;