@mozaic-ds/vue 0.20.0-beta.0 → 0.20.0-beta.3

package/src/components/listbox/MListBox.vue

@@ -1,17 +1,13 @@
 <template>
   <ul
-    v-if="state.selectableItems.length > 0"
+    v-if="items.length > 0"
     ref="listbox"
     role="listbox"
-    class="mc-listbox mc-listbox--multi"
+    class="mc-listbox"
     aria-labelledby="listbox"
-    :class="{ 'is-open': open }"
+    :class="{ 'is-open': open, 'mc-listbox--multi': multiple }"
   >
-    <li
-      v-for="item in state.selectableItems"
-      :key="item[dataKeyExpr]"
-      class="mc-listbox__item"
-    >
+    <li v-for="item in selectableItems" :key="item.id" class="mc-listbox__item">
       <slot name="item" :item="item">
         <label
           :for="`checkbox-dropdown-${item[dataKeyExpr]}-${uuid}`"
@@ -19,32 +15,36 @@
           >{{ item[dataTextExpr] }}
         </label>
       </slot>
-      <m-checkbox
+      <!-- <m-checkbox
+          v-if="multiple"
+          :id="`checkbox-dropdown-${item.id}`"
+          v-model="selectableItems.find((elem) => elem.id === item.id).selected"
+          class="mc-listbox__input"
+          @change="updateList(item.id, item.text, !item.selected, $e)"
+        /> -->
+      <input
         :id="`checkbox-dropdown-${item[dataKeyExpr]}-${uuid}`"
+        ref="input"
+        v-model="localValue"
+        class="mc-checkbox__input mc-listbox__input"
         :class="{ hideCheckbox: !multiple }"
-        class="mc-listbox__input"
-        :checked="updateModelValue(true, item)"
-        @update:modelValue="(v) => updateList(v, item[dataValueExpr])"
+        type="checkbox"
+        :value="item.value"
+        @change="onChange"
       />
     </li>
   </ul>
-  <div v-else class="mc-listbox__empty">
+  <div v-else class="mc-list-box__empty">
     {{ emptySearchLabel }}
   </div>
 </template>
 
 <script>
-import Vue from 'vue';
-import VueCompositionAPI from '@vue/composition-api';
-Vue.use(VueCompositionAPI);
-import { reactive, watch, ref } from '@vue/composition-api';
-import MCheckbox from '../checkbox/MCheckbox.vue';
-
 export default {
   name: 'MListbox',
 
-  components: {
-    MCheckbox,
+  model: {
+    event: 'change',
   },
 
   props: {
@@ -80,73 +80,203 @@ export default {
       type: String,
       default: 'text',
     },
-    modelValue: {
-      type: Array,
-      default: () => [],
+    value: {
+      type: [Array, String],
+      default: undefined,
     },
   },
 
-  emits: ['update:itemSelected', 'close-list-box', 'update:modelValue'],
-
-  setup(props, { emit }) {
-    const listbox = ref(null);
-
-    let uuid = Math.random();
-
-    const state = reactive({
-      selectableItems: props.items,
+  data() {
+    return {
+      selectableItems: null,
+      localValue: [],
       selected: [],
-    });
+      uuid: null,
+      inputBaseId: 'listboxInput',
+    };
+  },
 
-    const updateList = (checked, value) => {
-      if (!props.multiple) {
-        emit('update:modelValue', [{ value }]);
-        emit('close-list-box');
-        return;
-      }
+  watch: {
+    items: {
+      handler: function (val) {
+        this.selectableItems = val;
+      },
+      immediate: true,
+    },
+    value: {
+      handler: function (value) {
+        this.localValue = value;
+      },
+      immediate: true,
+    },
+    localValue: {
+      handler: function (localValue) {
+        const inputs = this.$refs.input;
+        if (!this.multiple && inputs) {
+          const selectedValue = Array.from(localValue);
 
-      if (checked) {
-        state.selected = [...state.selected, { [props.dataValueExpr]: value }];
-      } else {
-        state.selected = state.selected.filter(
-          (item) => item[props.dataValueExpr] !== value
-        );
-      }
-      emit('update:modelValue', state.selected);
-    };
+          inputs.forEach(function (input) {
+            const listItem = input.closest('.mc-listbox__item');
 
-    const updateModelValue = (checked, value) => {
-      state.selected = props.modelValue;
-      if (state.selected) {
-        return (
-          state.selected.filter(
-            (item) => item[props.dataValueExpr] === value[props.dataValueExpr]
-          ).length > 0
-        );
-      } else {
-        return undefined;
-      }
-    };
+            if (input.value == selectedValue[0]) {
+              listItem.classList.add('is-checked');
+            } else {
+              listItem.classList.remove('is-checked');
+            }
+          });
+        }
+      },
+      immediate: true,
+    },
+  },
+
+  mounted() {
+    this.uuid = Math.random();
+  },
 
-    watch(
-      () => props.items,
-      (nextItems) => {
-        state.selectableItems = nextItems;
+  methods: {
+    onChange() {
+      if (!this.multiple) {
+        const currentValue = this.localValue;
+        this.localValue = [];
+        this.localValue = currentValue.slice(-1);
       }
-    );
 
-    return {
-      listbox,
-      uuid,
-      state,
-      updateList,
-      updateModelValue,
-    };
+      this.$emit('change', this.localValue);
+    },
   },
 };
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.listbox';
+@import 'settings-tools/all-settings';
+
+.mc-listbox {
+  $parent: get-parent-selector(&);
+
+  @include unstyle-list();
+
+  background-color: $color-grey-000;
+  border: 1px solid $color-grey-600;
+  border-radius: 3px;
+  position: absolute;
+  overflow-y: auto;
+  margin-top: 5px;
+  margin-bottom: 0;
+  // max-height: 13.5rem;
+  // min-width: 18rem;
+  opacity: 0;
+  visibility: hidden;
+  width: 100%;
+
+  &.is-open {
+    opacity: 1;
+    visibility: visible;
+    z-index: 11;
+  }
+
+  &::-webkit-scrollbar {
+    background-color: $color-grey-100;
+    width: $mu025;
+
+    &-thumb {
+      background: $color-grey-600;
+    }
+  }
+
+  &__item {
+    align-items: center;
+    display: flex;
+    gap: $mu050;
+    min-height: $mu300;
+    padding-left: $mu075;
+    padding-right: $mu075;
+    position: relative;
+    justify-content: space-between;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid $color-grey-300;
+    }
+
+    &:hover {
+      background-color: $color-grey-100;
+      box-shadow: inset 9px 0 0 -7px $color-grey-900;
+    }
+  }
+
+  &__flag,
+  &__icon {
+    width: $mu200;
+    height: $mu200;
+  }
+
+  &__flag {
+    @include set-font-scale('07', 'm');
+
+    text-align: center;
+  }
+
+  &__empty {
+    align-items: center;
+    border: 1px solid $color-grey-600;
+    border-radius: get-border-radius('m');
+    padding: $mu100 $mu050;
+  }
+
+  &__label {
+    cursor: pointer;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+    }
+  }
+
+  &__input {
+    position: absolute;
+    right: $mu075;
+  }
+
+  .is-focus {
+    background-color: $color-grey-100;
+    box-shadow: inset 9px 0 0 -7px $color-grey-900;
+  }
+
+  .is-disabled {
+    cursor: not-allowed;
+    box-shadow: none;
+    background-color: $color-grey-200;
+    color: $color-grey-600;
+    pointer-events: none;
+  }
+
+  &--left {
+    right: 0;
+    transform: translateX(-100%);
+  }
+
+  &:not(.mc-listbox--multi) {
+    .is-checked {
+      background-size: $mu150;
+      background-image: url(inline-icons(
+        'notification-available-24',
+        $color-grey-900
+      ));
+      background-repeat: no-repeat;
+      background-position: right $mu075 center;
+    }
+
+    #{$parent} {
+      &__input {
+        @include visually-hidden();
+      }
+    }
+  }
+}
+
+.hideCheckbox {
+  opacity: 0;
+}
 </style>

package/src/components/ratingstars/MStarsInput.vue

@@ -19,6 +19,7 @@
         :value="rateId"
         class="mc-stars-input__radio"
         :required="required"
+        @click="$emit('star-clicked', index + 1)"
       />
 
       <label