removeAll method

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-selectpage",
   "description": "SelectPage for Vue, a select items components provides the list of items with pagination",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "author": "TerryZ <terry5@foxmail.com>",
   "type": "module",
   "files": [

src/SelectPageList.js

@@ -36,7 +36,6 @@ export default defineComponent({
     const core = ref(null)
 
     return () => {
-      console.log('attrs', attrs);
       const elementOption = {
         selected: selectedItems,
         disabled: props.disabled,

src/components/CircleButton.js

@@ -5,8 +5,6 @@ export default {
   props: {
     size: { type: String, default: '' },
     disabled: { type: Boolean, default: false },
-    bgColor: { type: String, default: 'transparent' },
-    hoverBgColor: { type: String, default: '#f1f1f1' }
   },
   setup (props, { slots }) {
     const backgroundColor = ref('')
@@ -18,19 +16,12 @@ export default {
     }))
     const styles = computed(() => ({
       'font-size': props.fontSize,
-      'background-color': props.disabled ? 'transparent' : backgroundColor.value
     }))
 
     return () => {
       const option = {
         class: ['sp-circle-btn', classes.value],
         style: styles.value,
-        onMouseenter () {
-          backgroundColor.value = props.hoverBgColor
-        },
-        onMouseleave () {
-          backgroundColor.value = props.bgColor
-        }
       }
       return h('div', option, slots.default && slots.default())
     }

src/core/data.js

@@ -48,7 +48,8 @@ export function selectPageProps () {
      */
     width: { type: [String, Number], default: undefined },
     /** debounce delay when typing, in milliseconds */
-    debounce: { type: Number, default: 300 }
+    debounce: { type: Number, default: 300 },
+    fetchDataOnMount: { type: Boolean, default: false }
   }
 }
 
@@ -174,7 +175,8 @@ export function useData (props, emit) {
   watch(() => props.modelValue, fetchSelectedData)
 
   onMounted(() => {
-    fetchData()
+      fetchData()
+
     if (!isEmptyArray(props.modelValue)) {
       fetchSelectedData()
     }

src/icons/IconChevronDown.vue

@@ -1,15 +1,13 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    fill="currentColor"
-    class="sp-icon bi bi-chevron-down"
-    viewBox="0 0 16 16"
+  <svg xmlns="http://www.w3.org/2000/svg"
+       width="16"
+       height="16"
+       fill="currentColor"
+       class="sp-icon bi bi-chevron-down"
+       viewBox="0 0 15 8"
   >
-    <path
-      fill-rule="evenodd"
-      d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
-    />
+    <path d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"></path>
   </svg>
 </template>
+<script setup lang="ts">
+</script>

src/icons/IconClose.vue

@@ -5,8 +5,9 @@
     height="16"
     fill="currentColor"
     class="sp-icon bi bi-x-lg"
-    viewBox="0 0 16 16"
+    viewBox="0 0 12 10"
   >
-    <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
+    <path
+      d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"></path>
   </svg>
 </template>

src/language.js

@@ -32,7 +32,7 @@ export const languages = {
     prev: 'Previous page',
     first: 'First page',
     last: 'Last page',
-    pageInfo: `Page ${LANG_PAGE_NUMBER} of ${LANG_PAGE_COUNT} (${LANG_ROW_COUNT} records)`,
+    pageInfo: `${LANG_PAGE_NUMBER} - ${LANG_PAGE_COUNT} / ${LANG_ROW_COUNT}`,
     notFound: 'Data not found',
     clear: 'Clear content',
     clearAll: 'Clear all selected',
@@ -116,7 +116,7 @@ export const languages = {
     prev: 'Назад',
     first: 'В начало',
     last: 'В конец',
-    pageInfo: `Стр. ${LANG_PAGE_NUMBER}/${LANG_PAGE_COUNT} (всего - ${LANG_ROW_COUNT})`,
+    pageInfo: `${LANG_PAGE_NUMBER} - ${LANG_PAGE_COUNT} / ${LANG_ROW_COUNT}`,
     notFound: 'Нет данных',
     clear: 'Очистить',
     clearAll: 'Очистить выбранное',

src/styles/common.sass

@@ -53,12 +53,12 @@
   justify-content: center
   align-items: center
   cursor: pointer
-  color: #aaa
+  color: #ff9393
   // background-color: transparent
   transition: all .3s ease
   border-radius: 50%
   &:hover
-    color: black
+    color: #fd6b6b
     // background-color: #f1f1f1
   // .sp-circle-btn.sp-circle-btn-disabled
   &#{&}--disabled,

src/styles/pagination.sass

@@ -11,7 +11,6 @@
     // color: #bbb
     color: rgba(0, 0, 0, 0.3)
     font-size: 14px
-    font-weight: 600
     margin-right: 10px
   .sp-page-control
     padding: 0

src/styles/trigger.sass

@@ -1,9 +1,10 @@
 .sp-trigger-container
   display: flex
   align-items: center
+  min-height: 31px
   justify-content: space-between
   flex-grow: 1
-  padding: 6px 12px 6px 6px
+  padding: 2px 5px 2px 2px
   background-color: white
   border: 1px solid #ddd
   border-radius: .3rem
@@ -34,7 +35,7 @@
     transition: transform .2s ease
     margin-left: .5rem
     font-size: 1rem
-    color: #666
+    color: #a7a7a7
   &.sp-opened
     box-shadow: 3px 2px 6px rgba(0, 0, 0, 0.3)
     border: 1px solid #666
@@ -59,19 +60,18 @@
         line-height: 1.143
         color: #666
     &.sp-chips
-      gap: .5rem
+      gap: 2px
     .sp-chip
-      border-radius: .3rem
-      background-color: #eee
-      color: #666
+      font-size: 15px
+      border-radius: 4px
+      background-color: #ebeef2
+      border-color: #ebeef2
+      color: #333
       display: inline-flex
       align-items: center
-      padding: 5px 7px
+      padding: 2px 2px 2px 5px
       transition: all .2s ease
       &--body
         display: inline-flex
-        line-height: 1.143
+        line-height: 1.4
         margin-right: 5px
-      &:hover
-        background-color: #f7f7f7
-        color: black