Merge pull request #10 from howard-tzw/feat/css-variables

v0.0.7

Author: howard-tzw

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.7](https://github.com/howard-tzw/vue3-select/compare/v0.0.6...v0.0.7) (2023-06-21)
+
+
+### Features
+
+* export no-drop and dropdown-menu padding style in css variables ([242c814](https://github.com/howard-tzw/vue3-select/commit/242c814e8d98e080eff2dae82f1cde4b599b5d84))
+
+
+### Style Updates
+
+* export .vs__dropdown-option--selected ([2118d83](https://github.com/howard-tzw/vue3-select/commit/2118d83ce49e43e79db499981c223e5a4bff79ff))
+
 ### [0.0.6](https://github.com/howard-tzw/vue3-select/compare/v0.0.5...v0.0.6) (2023-06-05)
 
 

README.md

@@ -8,6 +8,10 @@ New documentation specific to vue3-select will be available soon as the project
 
 ## Documentation
 
+New in vue3-select
+
+- **[CSS variables](https://github.com/howard-tzw/vue3-select/blob/main/src/css/global/variables.css)**
+
 Complete documentation and examples available at https://vue-select.org.
 
 - **[API Documentation](https://vue-select.org)**

bower.json

@@ -29,5 +29,5 @@
     "test",
     "tests"
   ],
-  "version": "0.0.6"
+  "version": "0.0.7"
 }

dev/BaseSelect.vue

@@ -22,14 +22,7 @@ const borderRadius = computed(() => {
   return props.square ? '8px' : '30px'
 })
 
-/**
- * @feat noDrop 為 true 時的樣式
- */
 const attrs = useAttrs()
-const noDropBackgroundColor = computed(() =>
-  attrs['no-drop'] ? '#f7f7f7' : '#fff'
-)
-const noDropCursor = computed(() => (attrs['no-drop'] ? 'default' : 'pointer'))
 
 /**
  * @feat 將選擇的選項名稱加上粗體
@@ -45,7 +38,6 @@ function selectedOptionNameClass(name: string) {
 <template>
   <div>
     <v-select
-      class="cursor-auto"
       v-bind="$attrs"
       :clearable="false"
       :searchable="searchable"
@@ -70,7 +62,6 @@ function selectedOptionNameClass(name: string) {
 :deep(.vs__dropdown-toggle) {
   border-radius: v-bind(borderRadius); // 欄位外匡
   box-shadow: var(--input-shadow); // 欄位陰影
-  background-color: v-bind(noDropBackgroundColor); // 欄位背景色
 }
 
 // vs__selected-options 調整左側間隔
@@ -90,19 +81,6 @@ function selectedOptionNameClass(name: string) {
   display: none;
 }
 
-// vs__search
-:deep(.vs__dropdown-toggle .vs__selected-options input.vs__search) {
-}
-
-// ============== no-drop 為 true 時的樣式 ==============
-:deep(.vs--unsearchable .vs__dropdown-toggle) {
-  cursor: v-bind(noDropCursor);
-}
-
-:deep(.vs--unsearchable:not(.vs--disabled) .vs__search) {
-  cursor: v-bind(noDropCursor);
-}
-
 .option--scroll {
   white-space: nowrap;
   overflow-x: auto;

dev/app.vue

@@ -23,6 +23,44 @@
       <h2 class="title">BaseSelect</h2>
       <BaseSelect v-model="selectedOption" :options="baseSelectOptions" />
     </div>
+
+    <div class="section">
+      <h2 class="title">BaseSelect</h2>
+      <ul>
+        <li>no-drop: true</li>
+      </ul>
+      <BaseSelect
+        v-model="selectedOption"
+        :options="baseSelectOptions"
+        no-drop
+      />
+    </div>
+
+    <div class="section">
+      <h2 class="title">BaseSelect</h2>
+      <ul>
+        <li>disabled: true</li>
+      </ul>
+      <BaseSelect
+        v-model="selectedOption"
+        :options="baseSelectOptions"
+        disabled
+      />
+    </div>
+
+    <div class="section">
+      <h2 class="title">BaseSelect</h2>
+      <ul>
+        <li>no-drop: true</li>
+        <li>disabled: true</li>
+      </ul>
+      <BaseSelect
+        v-model="selectedOption"
+        :options="baseSelectOptions"
+        no-drop
+        disabled
+      />
+    </div>
   </div>
 </template>
 
@@ -46,7 +84,7 @@ const selectedOption = ref()
 
 setTimeout(() => {
   selectedOption.value = baseSelectOptions.value[0]
-}, 3000)
+}, 500)
 </script>
 
 <style lang="scss">
@@ -55,6 +93,7 @@ body {
   margin: 0;
   height: 1000px;
   font-family: -apple-system, sans-serif;
+  background-color: #fafafa;
 }
 
 .title {

dev/index.css

@@ -6,6 +6,17 @@
   --input-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05);
   --input-border-color: rgba(60, 60, 60, 0.26);
 
-  /* easy-data-table 是如何讓 css vars 能夠在 component 內定義的？ */
+  /* vs__dropdown-toggle */
+  --vs-height: 36px;
+  --vs-bg-color: #fff;
+  --vs-state-no-drop-bg: red;
+  --vs-state-disabled-bg: rgb(248, 248, 248);
+
+  /* .vs__dropdown-menu */
+  --vs-dropdown-options-gap: 2px;
+  --vs-dropdown-padding: 5px;
+
+  /* dropdown option */
   --vs-dropdown-option--active-bg: black;
+  --vs-dropdown-option--selected-bg: gray;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-select",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "A maintained fork of vue-select for Vue 3",
   "author": "Jeff Sagal <[email protected]>, Howard Chen <[email protected]>",
   "homepage": "https://vue-select.org",

src/components/Select.vue

@@ -853,6 +853,7 @@ export default {
         'vs--unsearchable': !this.searchable,
         'vs--loading': this.mutableLoading,
         'vs--disabled': this.disabled,
+        'vs--no-drop': this.noDrop,
       }
     },
 

src/css/global/states.css

@@ -10,20 +10,32 @@
  */
 
 :root {
-    --vs-disabled-bg: var(--vs-state-disabled-bg);
-    --vs-disabled-color: var(--vs-state-disabled-color);
-    --vs-disabled-cursor: var(--vs-state-disabled-cursor);
+  --vs-disabled-bg: var(--vs-state-disabled-bg);
+  --vs-disabled-color: var(--vs-state-disabled-color);
+  --vs-disabled-cursor: var(--vs-state-disabled-cursor);
 }
 
+.vs--no-drop {
+  .vs__dropdown-toggle,
+  .vs__clear,
+  .vs__search,
+  .vs__selected,
+  .vs__open-indicator {
+    background-color: var(--vs-state-no-drop-bg);
+    cursor: var(--vs-state-no-drop-cursor);
+  }
+}
+
+/* If both "no-drop" and "disabled" are enabled simultaneously, .vs--disabled will overwrite .vs--no-drop */
 .vs--disabled {
-    .vs__dropdown-toggle,
-    .vs__clear,
-    .vs__search,
-    .vs__selected,
-    .vs__open-indicator {
-        cursor: var(--vs-disabled-cursor);
-        background-color: var(--vs-disabled-bg);
-    }
+  .vs__dropdown-toggle,
+  .vs__clear,
+  .vs__search,
+  .vs__selected,
+  .vs__open-indicator {
+    background-color: var(--vs-disabled-bg);
+    cursor: var(--vs-disabled-cursor);
+  }
 }
 
 /*
@@ -35,21 +47,21 @@
  */
 
 .v-select[dir='rtl'] {
-    .vs__actions {
-        padding: 0 3px 0 6px;
-    }
-
-    .vs__clear {
-        margin-left: 6px;
-        margin-right: 0;
-    }
-
-    .vs__deselect {
-        margin-left: 0;
-        margin-right: 2px;
-    }
-
-    .vs__dropdown-menu {
-        text-align: right;
-    }
+  .vs__actions {
+    padding: 0 3px 0 6px;
+  }
+
+  .vs__clear {
+    margin-left: 6px;
+    margin-right: 0;
+  }
+
+  .vs__deselect {
+    margin-left: 0;
+    margin-right: 2px;
+  }
+
+  .vs__dropdown-menu {
+    text-align: right;
+  }
 }

src/css/global/variables.css

@@ -4,17 +4,23 @@
   --vs-colors--dark: #333;
   --vs-colors--darkest: rgba(0, 0, 0, 0.15);
 
+  /* Font */
+  --vs-font-size: 1rem;
+  --vs-line-height: 1.4;
+
+  /* vs__dropdown-toggle */
   --vs-height: 36px;
+  --vs-bg-color: inherit;
 
   /* Search Input */
   --vs-search-input-color: inherit;
   --vs-search-input-placeholder-color: inherit;
 
-  /* Font */
-  --vs-font-size: 1rem;
-  --vs-line-height: 1.4;
+  /* State - No drop */
+  --vs-state-no-drop-bg: inherit;
+  --vs-state-no-drop-cursor: default;
 
-  /* Disabled State */
+  /* State - Disabled */
   --vs-state-disabled-bg: rgb(248, 248, 248);
   --vs-state-disabled-color: var(--vs-colors--light);
   --vs-state-disabled-controls-color: var(--vs-colors--light);
@@ -41,7 +47,7 @@
   --vs-selected-border-style: var(--vs-border-style);
   --vs-selected-border-width: var(--vs-border-width);
 
-  /* Dropdown */
+  /* Dropdown Menu */
   --vs-dropdown-bg: #fff;
   --vs-dropdown-color: inherit;
   --vs-dropdown-z-index: 1000;
@@ -51,16 +57,19 @@
   --vs-dropdown-overflow-x: auto;
   --vs-dropdown-overflow-y: auto;
   --vs-dropdown-border-radius: 4px;
-  --vs-dropdown-options-gap: 5px;
+  --vs-dropdown-options-gap: 2px;
+  --vs-dropdown-padding: 5px;
 
-  /* Dropdown Options */
+  /* Dropdown Option */
   --vs-dropdown-option-color: var(--vs-dropdown-color);
   --vs-dropdown-option-padding: 5px 15px;
   --vs-dropdown-option-border-radius: var(--vs-border-radius);
 
   /* Option */
   --vs-dropdown-option--active-bg: #5897fb;
   --vs-dropdown-option--active-color: #fff;
+  --vs-dropdown-option--selected-bg: #5897fb;
+  --vs-dropdown-option--selected-color: #fff;
 
   /* Deselect State */
   --vs-dropdown-option--deselect-bg: #fb5858;

src/css/modules/dropdown-menu.css

@@ -14,7 +14,7 @@
   top: calc(100% - var(--vs-border-width));
   left: 0;
   z-index: var(--vs-dropdown-z-index);
-  padding: 5px;
+  padding: var(--vs-dropdown-padding);
   margin: 0;
   margin-top: 5px;
   overflow: var(--vs-dropdown-overflow-x) var(--vs-dropdown-overflow-y);
@@ -49,6 +49,12 @@
   color: var(--vs-dropdown-option--active-color);
 }
 
+/* should be after .vs__dropdown-option--highlight to cover */
+.vs__dropdown-option--selected {
+  background: var(--vs-dropdown-option--selected-bg);
+  color: var(--vs-dropdown-option--selected-color);
+}
+
 .vs__dropdown-option--deselect {
   background: var(--vs-dropdown-option--deselect-bg);
   color: var(--vs-dropdown-option--deselect-color);

src/css/modules/dropdown-toggle.css

@@ -18,7 +18,7 @@
   white-space: normal;
 
   appearance: none;
-  background: none;
+  background: var(--vs-bg-color);
   border: var(--vs-border-width) var(--vs-border-style) var(--vs-border-color);
   border-radius: var(--vs-border-radius);
 }

src/css/modules/search-input.css

@@ -54,7 +54,7 @@
   .vs__search {
     opacity: 1;
   }
-  &:not(.vs--disabled) .vs__search {
+  &:not(.vs--disabled, .vs--no-drop) .vs__search {
     cursor: pointer;
   }
 }