@mptw/skylens-ui 1.4.95 → 1.4.96

package/components/SLCheckbox.vue

@@ -2,13 +2,11 @@
 .checkbox(:class='[checkboxClass, { inactive: !interactive }]')
   input(
     type='checkbox',
-    :id='uid',
     :checked='isChecked',
     :value='value',
     :disabled='disabled',
-    @change='onChanged'
   )
-  label(:for='uid', :class='{ "is-check-some": isCheckSome }')
+  label(:class='{ "is-check-some": isCheckSome }', @click='onClickedLabel')
     SLIcon.icon-square(:icon='falseIcon')
     SLIcon.icon-check-square(:icon='trueIcon')
     SLIcon.icon-minus-square(icon='minus-square')
@@ -18,6 +16,7 @@
 
 <script lang="ts">
 import { isEqual } from "lodash-es";
+import type IInputOption from "~ui/interface/IInputOption";
 import { getUID } from "~ui/utils";
 
 export default defineComponent({
@@ -69,10 +68,18 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    options: {
+      type: Array as PropType<IInputOption[] | undefined>,
+      default: () => undefined,
+    },
+    lastCheckValue: {
+      type: [Number, String, Boolean, Object],
+      default: null,
+    },
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", 'update:lastCheckValue'],
   setup(props, { emit }) {
-    const { size, disabled, modelValue, trueValue, falseValue, value } =
+    const { size, disabled, modelValue, trueValue, falseValue, value, options, lastCheckValue } =
       toRefs(props);
     const uid = ref<string | undefined>(undefined);
 
@@ -94,29 +101,42 @@ export default defineComponent({
       return modelValue.value === trueValue.value;
     });
 
-    function onChanged(e: Event) {
+    function onClickedLabel(e: MouseEvent) {
       if (disabled.value) {
         return;
       }
 
-      const isChecked = (e.target as HTMLInputElement).checked;
-
       if (Array.isArray(modelValue.value)) {
-        let newValue = [...modelValue.value];
-
-        if (isChecked) {
-          newValue.push(value.value);
+        const valueSet: Set<any> = new Set(modelValue.value);
+
+        const lastCheckIndex = lastCheckValue.value === null || lastCheckValue.value === undefined || !options.value ? -1 : options.value.findIndex((o) => isEqual(o.value, lastCheckValue.value));
+        const currentCheckIndex = options.value?.findIndex((o) => isEqual(o.value, value.value)) || -1;
+
+        if (!options.value || lastCheckIndex === -1 || lastCheckIndex === currentCheckIndex || !e.shiftKey) {
+          if (isChecked.value) {
+            valueSet.delete(value.value);
+            emit("update:lastCheckValue", null);
+          } else {
+            valueSet.add(value.value);
+            emit('update:lastCheckValue', value.value);
+          }
         } else {
-          newValue = newValue.filter((v) => v !== value.value);
+          emit("update:lastCheckValue", null);
+          const start = lastCheckIndex < currentCheckIndex ? lastCheckIndex : currentCheckIndex;
+          const end = lastCheckIndex < currentCheckIndex ? currentCheckIndex : lastCheckIndex;
+          options.value.slice(start, end + 1).forEach((o) => {
+            if (o.disabled) return;
+            valueSet.add(o.value);
+          });
         }
-
-        emit("update:modelValue", newValue);
-      } else {
-        emit(
-          "update:modelValue",
-          isChecked ? trueValue.value : falseValue.value
-        );
+        emit("update:modelValue", Array.from(valueSet.values()));
+        return;
       }
+
+      emit(
+        "update:modelValue",
+        isChecked ? trueValue.value : falseValue.value
+      );
     }
 
     onMounted(() => {
@@ -127,7 +147,7 @@ export default defineComponent({
       uid,
       checkboxClass,
       isChecked,
-      onChanged,
+      onClickedLabel,
     };
   },
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.4.95",
+  "version": "1.4.96",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",