evui 3.3.36 → 3.3.39

package/src/components/checkbox/Checkbox.vue

@@ -1,200 +1,200 @@
-<template>
-  <label
-    class="ev-checkbox"
-    :class="[
-      { disabled, },
-      { checked, },
-    ]"
-  >
-    <input
-      ref="checkbox"
-      v-model="mv"
-      type="checkbox"
-      class="ev-checkbox-input"
-      :disabled="disabled"
-      :value="label"
-      :readonly="readonly"
-      @change="changeMv"
-    />
-    <span class="ev-checkbox-label">
-      <template v-if="$slots.default">
-        <slot />
-      </template>
-      <template v-else>
-        {{ label }}
-      </template>
-    </span>
-  </label>
-</template>
-
-<script>
-import { ref, computed, watch, nextTick, inject } from 'vue';
-
-export default {
-  name: 'EvCheckbox',
-  props: {
-    modelValue: {
-      type: [String, Number, Boolean, Symbol, Array],
-      default: false,
-    },
-    label: {
-      type: [String, Number, Boolean, Symbol],
-      default: null,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    indeterminate: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: {
-    'update:modelValue': null,
-    'update:indeterminate': [Boolean],
-    change: null,
-  },
-  setup(props, { emit }) {
-    /**
-     * checkbox Ref
-     */
-    const checkbox = ref(null);
-
-    /**
-     * checkbox의 modelView 값
-     * checkbox group 컴포넌트를 사용하는 경우 Provide('EvCheckboxGroupMv')가 실행
-     * checkbox group 컴포넌트가 없는 경우 2nd argument 실행
-     *   - checkbox html5 indeterminate attribute 여부에 따라 v-model:indeterminate값을 update
-     *   - Vue3의 v-model:attr 방식은 Vue2의 :attr.sync와 동일 (사용방식이 변경)
-     */
-    const mv = inject(
-      'EvCheckboxGroupMv',
-      computed({
-        get: () => props.modelValue,
-        set: (val) => {
-          if (val && !checkbox.value.indeterminate) {
-            emit('update:indeterminate', false);
-          }
-          emit('update:modelValue', val);
-        },
-      }),
-    );
-
-    /**
-     * mv에 해당 값이 포함 또는 동일한지에 따라 check여부가 결정
-     * return {Boolean}
-     */
-    const refLabel = computed(() => props.label);
-    const checked = computed(() => {
-      if (Array.isArray(mv.value)) {
-        return mv.value.includes(refLabel.value);
-      }
-      return mv.value;
-    });
-
-    /**
-     * 해당 컴포넌트를 '직접' 클릭하여 변경했을 때 실행되는 메소드
-     * checkbox group을 사용하는 경우 Provide('EvCheckboxGroupChange')가 실행
-     * checkbox group을 사용하지 않는 경우 2nd argument 실행
-     */
-    const changeMv = inject(
-      'EvCheckboxGroupChange',
-      async (e) => {
-        await nextTick();
-        emit('change', mv.value, e);
-      },
-    );
-
-    /**
-     * props의 indeterminate 값을 감시하여
-     * checkbox element의 indeterminate attribute에 값 적용
-     */
-    watch(
-      () => props.indeterminate,
-      (val) => { checkbox.value.indeterminate = val; },
-    );
-
-    return {
-      mv,
-      checkbox,
-      checked,
-      changeMv,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-@import '../../style/index.scss';
-
-.ev-checkbox {
-  margin-right: 30px;
-  cursor: pointer;
-  user-select: none;
-  &-label {
-    padding-left: 5px;
-  }
-  &-input {
-    cursor: pointer;
-  }
-}
-
-@include state('disabled') {
-  .ev-checkbox-label {
-    @include evThemify() {
-      color: evThemed('disabled');
-    }
-  }
-  .ev-checkbox-input,
-  .ev-checkbox-label {
-    cursor: not-allowed !important;
-  }
-}
-@include state('type-button') {
-  .ev-checkbox {
-    display: inline-block;
-    padding: 0;
-    margin: 0;
-    text-align: center;
-
-    @include evThemify() {
-      border: 1px solid evThemed('border-base');
-      border-left: 0;
-    }
-    &:first-child {
-      border-radius: $default-radius 0 0 $default-radius;
-
-      @include evThemify() {
-        border-left: 1px solid evThemed('border-base');
-      }
-    }
-    &:last-child {
-      border-radius: 0 $default-radius $default-radius 0;
-    }
-    &.checked {
-      color: $color-white;
-
-      @include evThemify() {
-        background-color: evThemed('primary');
-      }
-    }
-    &.disabled.checked {
-      @include evThemify() {
-        background-color: rgba(evThemed('border-base'), 0.5);
-      }
-    }
-  }
-  .ev-checkbox-input {
-    @include visible-hide();
-  }
-  .ev-checkbox-label {
-    display: inline-block;
-    padding: 7px 12px;
-  }
-}
-</style>
+<template>
+  <label
+    class="ev-checkbox"
+    :class="[
+      { disabled, },
+      { checked, },
+    ]"
+  >
+    <input
+      ref="checkbox"
+      v-model="mv"
+      type="checkbox"
+      class="ev-checkbox-input"
+      :disabled="disabled"
+      :value="label"
+      :readonly="readonly"
+      @change="changeMv"
+    />
+    <span class="ev-checkbox-label">
+      <template v-if="$slots.default">
+        <slot />
+      </template>
+      <template v-else>
+        {{ label }}
+      </template>
+    </span>
+  </label>
+</template>
+
+<script>
+import { ref, computed, watch, nextTick, inject } from 'vue';
+
+export default {
+  name: 'EvCheckbox',
+  props: {
+    modelValue: {
+      type: [String, Number, Boolean, Symbol, Array],
+      default: false,
+    },
+    label: {
+      type: [String, Number, Boolean, Symbol],
+      default: null,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    indeterminate: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: {
+    'update:modelValue': null,
+    'update:indeterminate': [Boolean],
+    change: null,
+  },
+  setup(props, { emit }) {
+    /**
+     * checkbox Ref
+     */
+    const checkbox = ref(null);
+
+    /**
+     * checkbox의 modelView 값
+     * checkbox group 컴포넌트를 사용하는 경우 Provide('EvCheckboxGroupMv')가 실행
+     * checkbox group 컴포넌트가 없는 경우 2nd argument 실행
+     *   - checkbox html5 indeterminate attribute 여부에 따라 v-model:indeterminate값을 update
+     *   - Vue3의 v-model:attr 방식은 Vue2의 :attr.sync와 동일 (사용방식이 변경)
+     */
+    const mv = inject(
+      'EvCheckboxGroupMv',
+      computed({
+        get: () => props.modelValue,
+        set: (val) => {
+          if (val && !checkbox.value.indeterminate) {
+            emit('update:indeterminate', false);
+          }
+          emit('update:modelValue', val);
+        },
+      }),
+    );
+
+    /**
+     * mv에 해당 값이 포함 또는 동일한지에 따라 check여부가 결정
+     * return {Boolean}
+     */
+    const refLabel = computed(() => props.label);
+    const checked = computed(() => {
+      if (Array.isArray(mv.value)) {
+        return mv.value.includes(refLabel.value);
+      }
+      return mv.value;
+    });
+
+    /**
+     * 해당 컴포넌트를 '직접' 클릭하여 변경했을 때 실행되는 메소드
+     * checkbox group을 사용하는 경우 Provide('EvCheckboxGroupChange')가 실행
+     * checkbox group을 사용하지 않는 경우 2nd argument 실행
+     */
+    const changeMv = inject(
+      'EvCheckboxGroupChange',
+      async (e) => {
+        await nextTick();
+        emit('change', mv.value, e);
+      },
+    );
+
+    /**
+     * props의 indeterminate 값을 감시하여
+     * checkbox element의 indeterminate attribute에 값 적용
+     */
+    watch(
+      () => props.indeterminate,
+      (val) => { checkbox.value.indeterminate = val; },
+    );
+
+    return {
+      mv,
+      checkbox,
+      checked,
+      changeMv,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../style/index.scss';
+
+.ev-checkbox {
+  margin-right: 30px;
+  cursor: pointer;
+  user-select: none;
+  &-label {
+    padding-left: 5px;
+  }
+  &-input {
+    cursor: pointer;
+  }
+}
+
+@include state('disabled') {
+  .ev-checkbox-label {
+    @include evThemify() {
+      color: evThemed('disabled');
+    }
+  }
+  .ev-checkbox-input,
+  .ev-checkbox-label {
+    cursor: not-allowed !important;
+  }
+}
+@include state('type-button') {
+  .ev-checkbox {
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+
+    @include evThemify() {
+      border: 1px solid evThemed('border-base');
+      border-left: 0;
+    }
+    &:first-child {
+      border-radius: $default-radius 0 0 $default-radius;
+
+      @include evThemify() {
+        border-left: 1px solid evThemed('border-base');
+      }
+    }
+    &:last-child {
+      border-radius: 0 $default-radius $default-radius 0;
+    }
+    &.checked {
+      color: $color-white;
+
+      @include evThemify() {
+        background-color: evThemed('primary');
+      }
+    }
+    &.disabled.checked {
+      @include evThemify() {
+        background-color: rgba(evThemed('border-base'), 0.5);
+      }
+    }
+  }
+  .ev-checkbox-input {
+    @include visible-hide();
+  }
+  .ev-checkbox-label {
+    display: inline-block;
+    padding: 7px 12px;
+  }
+}
+</style>

package/src/components/checkbox/index.js

@@ -1,7 +1,7 @@
-import EvCheckbox from './Checkbox';
-
-EvCheckbox.install = (app) => {
-  app.component(EvCheckbox.name, EvCheckbox);
-};
-
-export default EvCheckbox;
+import EvCheckbox from './Checkbox';
+
+EvCheckbox.install = (app) => {
+  app.component(EvCheckbox.name, EvCheckbox);
+};
+
+export default EvCheckbox;

package/src/components/checkboxGroup/CheckboxGroup.vue

@@ -1,44 +1,44 @@
-<template>
-  <div
-    class="ev-checkbox-group"
-    :class="{ 'type-button': type === 'button' }"
-    role="group"
-  >
-    <slot />
-  </div>
-</template>
-
-<script>
-import { computed, nextTick, provide } from 'vue';
-
-export default {
-  name: 'EvCheckboxGroup',
-  props: {
-    modelValue: {
-      type: Array,
-      default: () => [],
-    },
-    type: {
-      type: String,
-      default: 'checkbox',
-    },
-  },
-  emits: {
-    'update:modelValue': null,
-    change: null,
-  },
-  setup(props, { emit }) {
-    const mv = computed({
-      get: () => props.modelValue,
-      set: labels => emit('update:modelValue', labels),
-    });
-    provide('EvCheckboxGroupMv', mv);
-
-    const change = async (e) => {
-      await nextTick();
-      emit('change', mv.value, e);
-    };
-    provide('EvCheckboxGroupChange', change);
-  },
-};
-</script>
+<template>
+  <div
+    class="ev-checkbox-group"
+    :class="{ 'type-button': type === 'button' }"
+    role="group"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+import { computed, nextTick, provide } from 'vue';
+
+export default {
+  name: 'EvCheckboxGroup',
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => [],
+    },
+    type: {
+      type: String,
+      default: 'checkbox',
+    },
+  },
+  emits: {
+    'update:modelValue': null,
+    change: null,
+  },
+  setup(props, { emit }) {
+    const mv = computed({
+      get: () => props.modelValue,
+      set: labels => emit('update:modelValue', labels),
+    });
+    provide('EvCheckboxGroupMv', mv);
+
+    const change = async (e) => {
+      await nextTick();
+      emit('change', mv.value, e);
+    };
+    provide('EvCheckboxGroupChange', change);
+  },
+};
+</script>

package/src/components/checkboxGroup/index.js

@@ -1,7 +1,7 @@
-import EvCheckboxGroup from './CheckboxGroup';
-
-EvCheckboxGroup.install = (app) => {
-  app.component(EvCheckboxGroup.name, EvCheckboxGroup);
-};
-
-export default EvCheckboxGroup;
+import EvCheckboxGroup from './CheckboxGroup';
+
+EvCheckboxGroup.install = (app) => {
+  app.component(EvCheckboxGroup.name, EvCheckboxGroup);
+};
+
+export default EvCheckboxGroup;

package/src/components/contextMenu/ContextMenu.vue

@@ -1,80 +1,80 @@
-<template>
-  <template v-if="isShow && items.length">
-    <teleport to="#ev-context-menu-modal">
-      <menu-list
-        ref="rootMenuList"
-        v-model:isShow="isShow"
-        v-clickoutside="hide"
-        :class="customClass"
-        :items="items"
-        :style="menuStyle"
-        :comp="comp"
-      />
-    </teleport>
-  </template>
-</template>
-
-<script>
-import { onBeforeMount } from 'vue';
-import { clickoutside } from '@/directives/clickoutside';
-import MenuList from './MenuList';
-import { useModel, usePosition } from './uses';
-
-export default {
-  name: 'EvContextMenu',
-  directives: {
-    clickoutside,
-  },
-  components: {
-    MenuList,
-  },
-  props: {
-    items: {
-      type: Array,
-      default: () => [],
-      validator: (list) => {
-        if (list.some(v => v.children !== undefined && !Array.isArray(v.children))) {
-          console.warn('[EVUI][ContextMenu] children attribute must be \'Array\' type.');
-          return false;
-        } else if (list.some(v => v.click !== undefined && typeof v.click !== 'function')) {
-          console.warn('[EVUI][ContextMenu] click attribute must be \'Function\' type.');
-          return false;
-        }
-        return true;
-      },
-    },
-    customClass: {
-      type: String,
-      default: '',
-    },
-  },
-  setup() {
-    const {
-      comp,
-      initWrapperDiv,
-    } = useModel();
-
-    const {
-      isShow,
-      rootMenuList,
-      menuStyle,
-      show,
-      hide,
-    } = usePosition();
-
-    onBeforeMount(() => initWrapperDiv());
-
-    return {
-      isShow,
-      rootMenuList,
-      menuStyle,
-      comp,
-      show,
-      hide,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-</style>
+<template>
+  <template v-if="isShow && items.length">
+    <teleport to="#ev-context-menu-modal">
+      <menu-list
+        ref="rootMenuList"
+        v-model:isShow="isShow"
+        v-clickoutside="hide"
+        :class="customClass"
+        :items="items"
+        :style="menuStyle"
+        :comp="comp"
+      />
+    </teleport>
+  </template>
+</template>
+
+<script>
+import { onBeforeMount } from 'vue';
+import { clickoutside } from '@/directives/clickoutside';
+import MenuList from './MenuList';
+import { useModel, usePosition } from './uses';
+
+export default {
+  name: 'EvContextMenu',
+  directives: {
+    clickoutside,
+  },
+  components: {
+    MenuList,
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+      validator: (list) => {
+        if (list.some(v => v.children !== undefined && !Array.isArray(v.children))) {
+          console.warn('[EVUI][ContextMenu] children attribute must be \'Array\' type.');
+          return false;
+        } else if (list.some(v => v.click !== undefined && typeof v.click !== 'function')) {
+          console.warn('[EVUI][ContextMenu] click attribute must be \'Function\' type.');
+          return false;
+        }
+        return true;
+      },
+    },
+    customClass: {
+      type: String,
+      default: '',
+    },
+  },
+  setup() {
+    const {
+      comp,
+      initWrapperDiv,
+    } = useModel();
+
+    const {
+      isShow,
+      rootMenuList,
+      menuStyle,
+      show,
+      hide,
+    } = usePosition();
+
+    onBeforeMount(() => initWrapperDiv());
+
+    return {
+      isShow,
+      rootMenuList,
+      menuStyle,
+      comp,
+      show,
+      hide,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+</style>