quasar-ui-sellmate-ui-kit 3.0.3 → 3.0.4

package/src/components/SSelectSearch.vue

@@ -1,261 +1,261 @@
-<template>
-  <q-select
-    outlined
-    dense
-    options-dense
-    :dropdown-icon="selectDownArrowIcon"
-    :popup-content-class="['s-select-search-opts', popupContentClass].join(' ')"
-    emit-value
-    map-options
-    :option-label="optionLabel"
-    :option-value="optionValue"
-    class="s-select-search"
-    :options="filteredOptions"
-    :menu-offset="[0, 4]"
-    menu-self="top left"
-    menu-anchor="bottom start"
-    no-error-icon
-    hide-bottom-space
-  >
-    <template v-slot:before-options>
-      <div class="search-input-form-container">
-        <form class="select-search-input-form">
-          <q-icon :name="searchIcon" size="20px" />
-          <input
-            v-model="search"
-            autofocus
-            class="select-search-input"
-            :placeholder="searchPlaceholder"
-            @input="
-              data => {
-                onSearch(data.target.value);
-              }
-            "
-          />
-        </form>
-      </div>
-    </template>
-
-    <template v-slot:no-option>
-      <div class="search-input-form-container">
-        <form class="select-search-input-form">
-          <q-icon :name="searchIcon" size="20px" />
-          <input
-            v-model="search"
-            autofocus
-            class="select-search-input"
-            :placeholder="searchPlaceholder"
-            @input="
-              data => {
-                onSearch(data.target.value);
-              }
-            "
-          />
-        </form>
-      </div>
-      <q-item class="s-select-no-option">
-        <q-item-section class="text-grey">{{ noData }}</q-item-section>
-      </q-item>
-    </template>
-
-    <template v-slot:option="scope">
-      <q-item v-bind="scope.itemProps">
-        <select-item :item="filteredOptions[scope.index].label" />
-      </q-item>
-    </template>
-  </q-select>
-</template>
-
-<script>
-  import { defineComponent, ref } from 'vue';
-  import { QSelect, QItem, debounce } from 'quasar';
-  import { selectDownArrowIcon, searchIcon } from '../assets/icons.js';
-  import SelectItem from './SelelctItem.vue';
-
-  export default defineComponent({
-    name: 'SSelect',
-    components: {
-      QSelect,
-      QItem,
-
-      SelectItem,
-    },
-    props: {
-      searchPlaceholder: String,
-      options: Array,
-      optionLabel: {
-        type: [String, Function],
-        default: 'label',
-      },
-      optionValue: {
-        type: String,
-        default: 'value',
-      },
-      noData: {
-        type: String,
-        default: '데이터 없음',
-      },
-      popupContentClass: {
-        default: () => '',
-        type: String,
-      },
-    },
-    setup(props) {
-      const filteredOptions = ref(props.options);
-      const search = ref('');
-
-      const onSearch = debounce(val => {
-        if (val === '') {
-          filteredOptions.value = props.options;
-        } else {
-          filteredOptions.value = props.options.filter(
-            v => (v[props.optionLabel] || v).indexOf(val) > -1,
-          );
-        }
-      }, 200);
-
-      return {
-        selectDownArrowIcon,
-        searchIcon,
-        search,
-        onSearch,
-        filteredOptions,
-      };
-    },
-  });
-</script>
-
-<style lang="scss">
-  @import '../css/quasar.variables.scss';
-  @import '../css/extends.scss';
-
-  .s-select-search {
-    @extend %select;
-
-    .q-field__prepend {
-      background-color: $Grey_Lighten-5;
-      height: auto;
-      border-right: 1px solid $Grey_Lighten-1;
-      padding: $button-padding-sm;
-
-      .include-label {
-        font-size: $default-font;
-        font-weight: $default-font-weight;
-        color: $Grey_Darken-4;
-      }
-    }
-  }
-
-  .s-select-search-opts {
-    padding: 0;
-
-    .s-select-no-option {
-      padding: $select-menu-padding;
-    }
-
-    @extend %select-menu-list;
-
-    .group-title {
-      opacity: 1 !important;
-      background: $Grey_Lighten-5 !important;
-      border: none;
-      border-top: 1px solid $Grey_Lighten-3;
-
-      .q-item__section {
-        .q-item__label {
-          color: $Grey_Darken-4 !important;
-        }
-      }
-    }
-
-    .group-option {
-      padding: 4px 12px 4px 20px !important;
-
-      &.disabled {
-        color: $Grey_Lighten-1 !important;
-        background: white !important;
-        border: none !important;
-      }
-    }
-
-    .q-item:not(.group-option) {
-      padding: 4px 12px;
-    }
-
-    .select-search-input {
-      margin: 4px;
-
-      .q-field__inner {
-        height: $default-height;
-
-        .q-field__control {
-          padding: 0;
-          min-height: 0;
-          height: $default-height;
-
-          &-container {
-            .q-field__native {
-              font-size: $default-font;
-              color: $Grey_Darken-5;
-            }
-
-            input::placeholder {
-              color: $Grey_Lighten-1;
-            }
-          }
-
-          .q-field__prepend {
-            height: 28px;
-            padding: 4px 8px;
-          }
-        }
-      }
-    }
-  }
-
-  .search-input-form-container {
-    padding: 4px;
-    .select-search-input-form {
-      height: 28px;
-      display: flex;
-      align-items: center;
-      padding-left: 8px;
-      position: relative;
-      border-radius: 2px;
-      border: 1px solid $Grey_Lighten-1;
-      background-color: white;
-      position: sticky;
-      top: 0;
-      z-index: 1;
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        pointer-events: none;
-        border: 1px solid transparent;
-        border-radius: inherit;
-      }
-
-      &:hover,
-      &:focus-within {
-        &::after {
-          border-color: #0075ff;
-          box-shadow: 0 0 4px #0075ff;
-          transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-      }
-
-      .select-search-input {
-        font-size: 12px;
-        margin-left: 8px;
-        flex-grow: 1;
-        border: none;
-        outline: none;
-      }
-    }
-  }
-</style>
+<template>
+  <q-select
+    outlined
+    dense
+    options-dense
+    :dropdown-icon="selectDownArrowIcon"
+    :popup-content-class="['s-select-search-opts', popupContentClass].join(' ')"
+    emit-value
+    map-options
+    :option-label="optionLabel"
+    :option-value="optionValue"
+    class="s-select-search"
+    :options="filteredOptions"
+    :menu-offset="[0, 4]"
+    menu-self="top left"
+    menu-anchor="bottom start"
+    no-error-icon
+    hide-bottom-space
+  >
+    <template v-slot:before-options>
+      <div class="search-input-form-container">
+        <form class="select-search-input-form">
+          <q-icon :name="searchIcon" size="20px" />
+          <input
+            v-model="search"
+            autofocus
+            class="select-search-input"
+            :placeholder="searchPlaceholder"
+            @input="
+              data => {
+                onSearch(data.target.value);
+              }
+            "
+          />
+        </form>
+      </div>
+    </template>
+
+    <template v-slot:no-option>
+      <div class="search-input-form-container">
+        <form class="select-search-input-form">
+          <q-icon :name="searchIcon" size="20px" />
+          <input
+            v-model="search"
+            autofocus
+            class="select-search-input"
+            :placeholder="searchPlaceholder"
+            @input="
+              data => {
+                onSearch(data.target.value);
+              }
+            "
+          />
+        </form>
+      </div>
+      <q-item class="s-select-no-option">
+        <q-item-section class="text-grey">{{ noData }}</q-item-section>
+      </q-item>
+    </template>
+
+    <template v-slot:option="scope">
+      <q-item v-bind="scope.itemProps">
+        <select-item :item="filteredOptions[scope.index].label" />
+      </q-item>
+    </template>
+  </q-select>
+</template>
+
+<script>
+  import { defineComponent, ref } from 'vue';
+  import { QSelect, QItem, debounce } from 'quasar';
+  import { selectDownArrowIcon, searchIcon } from '../assets/icons.js';
+  import SelectItem from './SelelctItem.vue';
+
+  export default defineComponent({
+    name: 'SSelect',
+    components: {
+      QSelect,
+      QItem,
+
+      SelectItem,
+    },
+    props: {
+      searchPlaceholder: String,
+      options: Array,
+      optionLabel: {
+        type: [String, Function],
+        default: 'label',
+      },
+      optionValue: {
+        type: String,
+        default: 'value',
+      },
+      noData: {
+        type: String,
+        default: '데이터 없음',
+      },
+      popupContentClass: {
+        default: () => '',
+        type: String,
+      },
+    },
+    setup(props) {
+      const filteredOptions = ref(props.options);
+      const search = ref('');
+
+      const onSearch = debounce(val => {
+        if (val === '') {
+          filteredOptions.value = props.options;
+        } else {
+          filteredOptions.value = props.options.filter(
+            v => (v[props.optionLabel] || v).indexOf(val) > -1,
+          );
+        }
+      }, 200);
+
+      return {
+        selectDownArrowIcon,
+        searchIcon,
+        search,
+        onSearch,
+        filteredOptions,
+      };
+    },
+  });
+</script>
+
+<style lang="scss">
+  @import '../css/quasar.variables.scss';
+  @import '../css/extends.scss';
+
+  .s-select-search {
+    @extend %select;
+
+    .q-field__prepend {
+      background-color: $Grey_Lighten-5;
+      height: auto;
+      border-right: 1px solid $Grey_Lighten-1;
+      padding: $button-padding-sm;
+
+      .include-label {
+        font-size: $default-font;
+        font-weight: $default-font-weight;
+        color: $Grey_Darken-4;
+      }
+    }
+  }
+
+  .s-select-search-opts {
+    padding: 0;
+
+    .s-select-no-option {
+      padding: $select-menu-padding;
+    }
+
+    @extend %select-menu-list;
+
+    .group-title {
+      opacity: 1 !important;
+      background: $Grey_Lighten-5 !important;
+      border: none;
+      border-top: 1px solid $Grey_Lighten-3;
+
+      .q-item__section {
+        .q-item__label {
+          color: $Grey_Darken-4 !important;
+        }
+      }
+    }
+
+    .group-option {
+      padding: 4px 12px 4px 20px !important;
+
+      &.disabled {
+        color: $Grey_Lighten-1 !important;
+        background: white !important;
+        border: none !important;
+      }
+    }
+
+    .q-item:not(.group-option) {
+      padding: 4px 12px;
+    }
+
+    .select-search-input {
+      margin: 4px;
+
+      .q-field__inner {
+        height: $default-height;
+
+        .q-field__control {
+          padding: 0;
+          min-height: 0;
+          height: $default-height;
+
+          &-container {
+            .q-field__native {
+              font-size: $default-font;
+              color: $Grey_Darken-5;
+            }
+
+            input::placeholder {
+              color: $Grey_Lighten-1;
+            }
+          }
+
+          .q-field__prepend {
+            height: 28px;
+            padding: 4px 8px;
+          }
+        }
+      }
+    }
+  }
+
+  .search-input-form-container {
+    padding: 4px;
+    .select-search-input-form {
+      height: 28px;
+      display: flex;
+      align-items: center;
+      padding-left: 8px;
+      position: relative;
+      border-radius: 2px;
+      border: 1px solid $Grey_Lighten-1;
+      background-color: white;
+      position: sticky;
+      top: 0;
+      z-index: 1;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        pointer-events: none;
+        border: 1px solid transparent;
+        border-radius: inherit;
+      }
+
+      &:hover,
+      &:focus-within {
+        &::after {
+          border-color: #0075ff;
+          box-shadow: 0 0 4px #0075ff;
+          transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+      }
+
+      .select-search-input {
+        font-size: 12px;
+        margin-left: 8px;
+        flex-grow: 1;
+        border: none;
+        outline: none;
+      }
+    }
+  }
+</style>