@webitel/ui-sdk 26.4.44 → 26.4.45

package/src/components/wt-table-column-select/wt-table-column-select.vue

@@ -27,6 +27,7 @@
 				</wt-input-text>
         <div class="wt-table-column-select__popup-list-wrap">
           <ul
+						v-if="changeableDraft.length"
             :class="{
               'wt-table-column-select__popup-list--md':
                 changeableDraft.length > 10 && changeableDraft.length <= 20,
@@ -48,6 +49,11 @@
               />
             </li>
           </ul>
+					<wt-empty 
+						v-else
+						:image="darkMode ? EmptyImageDark : EmptyImageLight"
+						:title="$t('webitelUI.empty.text.filters')"
+					/>
         </div>
       </template>
       <template #actions>
@@ -65,98 +71,92 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import deepCopy from 'deep-copy';
+import { computed, inject, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-export default {
-	name: 'WtTableColumnSelect',
+import EmptyImageDark from './_internals/assets/empty-dark.svg';
+import EmptyImageLight from './_internals/assets/empty-light.svg';
 
-	model: {
-		prop: 'headers',
-		event: 'change',
-	},
-	/**
-	 * @emits {Array} change - Fires when headers are changed. Emits mutated headers
-	 */
-	props: {
-		/**
-		 * Each header should have following schema: { value: String, show: Boolean, text: String }
-		 * @type {Array}
-		 * @required
-		 * @model headers
-		 */
-		headers: {
-			type: Array,
-			required: true,
-			description:
-				'Each header should have following schema: { value: String, show: Boolean, text: String }',
-		},
-		/**
-		 * Header values to exclude from selection
-		 * @type {Array}
-		 * @default []
-		 */
-		staticHeaders: {
-			type: Array,
-			default: () => [],
-			description: 'Header values to exclude from selection',
-		},
-	},
-	emits: [
-		'change',
-	],
-	data: () => ({
-		draft: [], // headers draft
-		search: '',
-		isColumnSelectPopup: false,
-	}),
-	computed: {
-		changeableDraft() {
-			return this.draft
-				.filter(
-					(header) =>
-						!this.staticHeaders.includes(header.value) &&
-						this.shownColLabel(header)
-							?.toLowerCase()
-							.includes(this.search?.toLowerCase()),
-				)
-				.sort((a, b) => {
-					return this.shownColLabel(a)?.localeCompare(this.shownColLabel(b));
-					// sorting headers for alphabet just in popup
-				});
-		},
-	},
+interface Header {
+	value: string;
+	show: boolean;
+	text?: string;
+	locale?: string | string[];
+}
 
-	watch: {
-		isColumnSelectPopup: {
-			handler() {
-				this.fillHeadersDraft();
-			},
-		},
-	},
-	methods: {
-		shownColLabel({ text, locale }) {
-			if (!text && locale)
-				return typeof locale === 'string'
-					? this.$t(locale)
-					: this.$t(...locale);
-			return text;
-		},
-		openPopup() {
-			this.isColumnSelectPopup = true;
-		},
-		close() {
-			this.isColumnSelectPopup = false;
-		},
-		fillHeadersDraft() {
-			this.draft = deepCopy(this.headers);
-		},
-		setShownColumns() {
-			this.$emit('change', this.draft);
-			this.close();
-		},
+const props = withDefaults(
+	defineProps<{
+		headers: Header[];
+		staticHeaders?: string[];
+	}>(),
+	{
+		staticHeaders: () => [],
 	},
-};
+);
+
+const emit = defineEmits<{
+	change: [
+		headers: Header[],
+	];
+}>();
+
+const { t } = useI18n();
+
+const darkMode = inject('darkMode');
+
+const draft = ref<Header[]>([]);
+const search = ref('');
+const isColumnSelectPopup = ref(false);
+
+function shownColLabel({ text, locale }: Header): string | undefined {
+	if (!text && locale)
+		return typeof locale === 'string'
+			? t(locale)
+			: t(
+					...(locale as [
+						string,
+						...unknown[],
+					]),
+				);
+	return text;
+}
+
+const changeableDraft = computed(() =>
+	draft.value
+		.filter(
+			(header) =>
+				!props.staticHeaders.includes(header.value) &&
+				shownColLabel(header)
+					?.toLowerCase()
+					.includes(search.value?.toLowerCase()),
+		)
+		.sort(
+			(a, b) => shownColLabel(a)?.localeCompare(shownColLabel(b) ?? '') ?? 0,
+		),
+);
+
+function fillHeadersDraft() {
+	draft.value = deepCopy(props.headers);
+}
+
+function openPopup() {
+	isColumnSelectPopup.value = true;
+}
+
+function close() {
+	isColumnSelectPopup.value = false;
+}
+
+function setShownColumns() {
+	emit('change', draft.value);
+	close();
+}
+
+watch(isColumnSelectPopup, () => {
+	fillHeadersDraft();
+});
 </script>
 
 <style scoped>
@@ -171,6 +171,7 @@ export default {
 
 .wt-table-column-select__popup-list-wrap {
   height: 400px;
+	display: flex;
 }
 
 .wt-table-column-select__popup-list {

package/types/components/wt-table-column-select/wt-table-column-select.vue.d.ts

@@ -1,48 +1,19 @@
+interface Header {
+    value: string;
+    show: boolean;
+    text?: string;
+    locale?: string | string[];
+}
+type __VLS_Props = {
+    headers: Header[];
+    staticHeaders?: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (headers: Header[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: (headers: Header[]) => any;
+}>, {
+    staticHeaders: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    /**
-     * Each header should have following schema: { value: String, show: Boolean, text: String }
-     * @type {Array}
-     * @required
-     * @model headers
-     */
-    headers: any[];
-    /**
-     * Header values to exclude from selection
-     * @type {Array}
-     * @default []
-     */
-    staticHeaders: any[];
-}>, {}, {
-    draft: any[];
-    search: string;
-    isColumnSelectPopup: boolean;
-}, {
-    changeableDraft(): any[];
-}, {
-    shownColLabel({ text, locale }: {
-        text: any;
-        locale: any;
-    }): any;
-    openPopup(): void;
-    close(): void;
-    fillHeadersDraft(): void;
-    setShownColumns(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * Each header should have following schema: { value: String, show: Boolean, text: String }
-     * @type {Array}
-     * @required
-     * @model headers
-     */
-    headers: any[];
-    /**
-     * Header values to exclude from selection
-     * @type {Array}
-     * @default []
-     */
-    staticHeaders: any[];
-}>> & Readonly<{
-    onChange?: (...args: any[]) => any;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/wt-table-column-select-DkQQoIZ9.js

@@ -1,150 +0,0 @@
-import { d as v } from "./index-jfDB0xqJ.js";
-import { resolveComponent as n, resolveDirective as S, createElementBlock as c, openBlock as r, withDirectives as k, createVNode as s, withCtx as a, createTextVNode as i, toDisplayString as p, createElementVNode as h, normalizeClass as D, Fragment as y, renderList as L, withModifiers as P } from "vue";
-import { _ as H } from "./install-DvgWn7E6.js";
-const U = {
-  name: "WtTableColumnSelect",
-  model: {
-    prop: "headers",
-    event: "change"
-  },
-  /**
-   * @emits {Array} change - Fires when headers are changed. Emits mutated headers
-   */
-  props: {
-    /**
-     * Each header should have following schema: { value: String, show: Boolean, text: String }
-     * @type {Array}
-     * @required
-     * @model headers
-     */
-    headers: {
-      type: Array,
-      required: !0,
-      description: "Each header should have following schema: { value: String, show: Boolean, text: String }"
-    },
-    /**
-     * Header values to exclude from selection
-     * @type {Array}
-     * @default []
-     */
-    staticHeaders: {
-      type: Array,
-      default: () => [],
-      description: "Header values to exclude from selection"
-    }
-  },
-  emits: [
-    "change"
-  ],
-  data: () => ({
-    draft: [],
-    // headers draft
-    search: "",
-    isColumnSelectPopup: !1
-  }),
-  computed: {
-    changeableDraft() {
-      return this.draft.filter(
-        (e) => !this.staticHeaders.includes(e.value) && this.shownColLabel(e)?.toLowerCase().includes(this.search?.toLowerCase())
-      ).sort((e, t) => this.shownColLabel(e)?.localeCompare(this.shownColLabel(t)));
-    }
-  },
-  watch: {
-    isColumnSelectPopup: {
-      handler() {
-        this.fillHeadersDraft();
-      }
-    }
-  },
-  methods: {
-    shownColLabel({ text: e, locale: t }) {
-      return !e && t ? typeof t == "string" ? this.$t(t) : this.$t(...t) : e;
-    },
-    openPopup() {
-      this.isColumnSelectPopup = !0;
-    },
-    close() {
-      this.isColumnSelectPopup = !1;
-    },
-    fillHeadersDraft() {
-      this.draft = v(this.headers);
-    },
-    setShownColumns() {
-      this.$emit("change", this.draft), this.close();
-    }
-  }
-}, x = { class: "wt-table-column-select" }, V = { class: "wt-table-column-select__popup-list-wrap" }, B = ["onClickCapture"];
-function E(e, t, I, N, T, l) {
-  const m = n("wt-icon-btn"), _ = n("wt-icon"), w = n("wt-input-text"), f = n("wt-checkbox"), u = n("wt-button"), C = n("wt-popup"), b = S("tooltip");
-  return r(), c("div", x, [
-    k(s(m, {
-      icon: "column-select",
-      onClick: l.openPopup
-    }, null, 8, ["onClick"]), [
-      [b, e.$t("webitelUI.tableColumnSelect.title")]
-    ]),
-    s(C, {
-      shown: e.isColumnSelectPopup,
-      class: "wt-table-column-select__popup",
-      onClose: l.close
-    }, {
-      title: a(() => [
-        i(p(e.$t("webitelUI.tableColumnSelect.title")), 1)
-      ]),
-      main: a(() => [
-        s(w, {
-          class: "wt-table-column-select__popup-search",
-          "model-value": e.search,
-          "onUpdate:modelValue": t[0] || (t[0] = (o) => e.search = o)
-        }, {
-          prefix: a(() => [
-            s(_, { icon: "search" })
-          ]),
-          _: 1
-        }, 8, ["model-value"]),
-        h("div", V, [
-          h("ul", {
-            class: D([{
-              "wt-table-column-select__popup-list--md": l.changeableDraft.length > 10 && l.changeableDraft.length <= 20,
-              "wt-table-column-select__popup-list--lg": l.changeableDraft.length > 20
-            }, "wt-table-column-select__popup-list"])
-          }, [
-            (r(!0), c(y, null, L(l.changeableDraft, (o, g) => (r(), c("li", {
-              key: g,
-              class: "wt-table-column-select__popup-item",
-              onClickCapture: P((d) => o.show = !o.show, ["prevent"])
-            }, [
-              s(f, {
-                label: l.shownColLabel(o),
-                selected: o.show,
-                "onUpdate:selected": (d) => o.show = d
-              }, null, 8, ["label", "selected", "onUpdate:selected"])
-            ], 40, B))), 128))
-          ], 2)
-        ])
-      ]),
-      actions: a(() => [
-        s(u, { onClick: l.setShownColumns }, {
-          default: a(() => [
-            i(p(e.$t("reusable.add")), 1)
-          ], void 0, !0),
-          _: 1
-        }, 8, ["onClick"]),
-        s(u, {
-          color: "secondary",
-          onClick: l.close
-        }, {
-          default: a(() => [
-            i(p(e.$t("reusable.cancel")), 1)
-          ], void 0, !0),
-          _: 1
-        }, 8, ["onClick"])
-      ]),
-      _: 1
-    }, 8, ["shown", "onClose"])
-  ]);
-}
-const z = /* @__PURE__ */ H(U, [["render", E], ["__scopeId", "data-v-1a2815ed"]]);
-export {
-  z as default
-};