webcake-ui-kit 1.3.12 → 1.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.3.12",
+  "version": "1.3.14",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",

package/src/components/select/Select.vue

@@ -106,15 +106,13 @@
           />
         </slot>
         <slot v-if="showEmpty" name="empty">
-          <Empty description="No data">
-            <template #media>
-              <div class="select-empty">
-                <img
-                  src="https://content.pancake.vn/web-media-262/2e/2a/0c/96/c2b58ae9f06c4dc2a3b83016e56d5b4132ff40637862ba23435e43a0-w:224-h:224-l:3927-t:image/png.png"
-                />
-              </div>
-            </template>
-          </Empty>
+          <div class="ui-select__empty">
+            <img
+              src="https://content.pancake.vn/web-media-262/2e/2a/0c/96/c2b58ae9f06c4dc2a3b83016e56d5b4132ff40637862ba23435e43a0-w:224-h:224-l:3927-t:image/png.png"
+              alt=""
+            />
+            <span>{{ emptyText }}</span>
+          </div>
         </slot>
         <div v-if="hasContentFooter()">
           <slot name="contentFooter"></slot>
@@ -142,12 +140,11 @@ import Menu from '../menu/Menu.vue'
 import SelectOption from '../select-option/SelectOption.vue'
 import Spinner from '../spinner/Spinner.vue'
 import Tag from '../tag/Tag.vue'
-import Empty from '../empty/Empty.vue'
 
 export default {
   name: 'Select',
 
-  components: { Menu, SelectOption, Spinner, WkiChevronDown, Tag, Empty },
+  components: { Menu, SelectOption, Spinner, WkiChevronDown, Tag },
 
   provide() {
     return { select: this }
@@ -242,6 +239,10 @@ export default {
     placement: {
       type: String,
       default: 'bottom-start'
+    },
+    emptyText: {
+      type: String,
+      default: 'Chưa có dữ liệu'
     }
   },
 

package/src/components/select/select.css

@@ -258,20 +258,29 @@
 
 .ui-select__columns > .ui-select__list {
   flex: 1 1 0;
-  min-width: 160px;
 }
 
 .ui-select__columns > .ui-select__list + .ui-select__list {
   border-left: 1px solid var(--border-primary);
 }
 
-.ui-select__list ::v-deep .select-empty {
-  height: 100px;
-  width: 100px;
+.ui-select__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 12px;
 }
 
-.ui-select__list ::v-deep .select-empty img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.ui-select__empty img {
+  width: 56px;
+  height: 56px;
+  object-fit: contain;
+}
+
+.ui-select__empty span {
+  font-family: var(--font-family-body);
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--muted-fg);
 }