@webitel/ui-sdk 26.4.34 → 26.4.36

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.4.34",
+	"version": "26.4.36",
 	"private": false,
 	"scripts": {
 		"make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run biome:format:all || true) && npm run publish-lib",

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

@@ -15,6 +15,16 @@
         {{ $t('webitelUI.tableColumnSelect.title') }}
       </template>
       <template #main>
+				<wt-input-text
+					class="wt-table-column-select__popup-search"
+					v-model:model-value="search"
+				>
+					<template #prefix>
+						<wt-icon
+							icon="search"
+						/>
+					</template>
+				</wt-input-text>
         <div class="wt-table-column-select__popup-list-wrap">
           <ul
             :class="{
@@ -97,12 +107,17 @@ export default {
 	],
 	data: () => ({
 		draft: [], // headers draft
+		search: '',
 		isColumnSelectPopup: false,
 	}),
 	computed: {
 		changeableDraft() {
 			return this.draft
-				.filter((header) => !this.staticHeaders.includes(header.value))
+				.filter(
+					(header) =>
+						!this.staticHeaders.includes(header.value) &&
+						this.shownColLabel(header)?.toLowerCase().includes(this.search),
+				)
 				.sort((a, b) => {
 					return this.shownColLabel(a)?.localeCompare(this.shownColLabel(b));
 					// sorting headers for alphabet just in popup
@@ -148,6 +163,10 @@ export default {
   text-align: center;
 }
 
+.wt-table-column-select__popup-search {
+	margin-bottom: var(--spacing-xs);
+}
+
 .wt-table-column-select__popup-list-wrap {
   max-height: 400px;
 }
@@ -182,6 +201,6 @@ export default {
   display: flex;
   align-items: center;
   margin-right: var(--spacing-sm);
-  margin-bottom: var(--spacing-sm);
+  margin-bottom: var(--spacing-xs);
 }
 </style>

package/src/components/wt-vidstack-player/components/panels/video-display-panel/video-display-panel.vue

@@ -24,8 +24,7 @@
       />
       <toggle-button
         v-if="!props.hideExpand"
-        primary-icon="expand"
-        secondary-icon="collapse"
+        :icon="toggleIcon"
         color="on-dark"
         @toggle="handlePlayerSize"
       />
@@ -41,6 +40,7 @@
 
 <script setup lang="ts">
 import {
+	computed,
 	defineEmits,
 	defineProps,
 	inject,
@@ -58,6 +58,10 @@ import ToggleButton from '../../toggle-button.vue';
 const { size, fullscreen, changeSize } =
 	inject<WtVidstackPlayerSizeProvider>('size');
 
+const toggleIcon = computed(() =>
+	size.value === ComponentSize.SM ? 'expand' : 'collapse',
+);
+
 const props = defineProps<{
 	title?: string;
 	username?: string;

package/src/components/wt-vidstack-player/components/toggle-button.vue

@@ -1,52 +1,31 @@
 <template>
-  <media-toggle-button
-    ref="toggleButton"
+  <div
     class="toggle-button"
-    :disabled="props.disabled"
     @click="setToggleState"
   >
     <wt-icon-btn
-      :icon="props.primaryIcon"
+      :icon="props.icon"
       :color="props.color"
       :disabled="props.disabled"
-      class="toggle-button__primary"
     />
-    <wt-icon-btn
-      :icon="props.secondaryIcon"
-      :color="props.color"
-      :disabled="props.disabled"
-      class="toggle-button__secondary"
-    />
-  </media-toggle-button>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { defineEmits, defineProps, type Ref, useTemplateRef } from 'vue';
-
 import WtIconBtn from '../../wt-icon-btn/wt-icon-btn.vue';
 
 const props = defineProps<{
-	primaryIcon: string;
-	secondaryIcon: string;
+	icon: string;
 	color?: string;
 	disabled?: boolean;
 }>();
 
-const toggleButton = useTemplateRef('toggleButton') as Ref<HTMLElement>;
-
 const emit = defineEmits<{
-	toggle: [
-		value: boolean,
-	];
+	toggle: [];
 }>();
 
 const setToggleState = () => {
 	if (props.disabled) return;
-	emit('toggle', toggleButton.value.pressed);
+	emit('toggle');
 };
 </script>
-
-<style  scoped>.toggle-button[data-pressed] .toggle-button__primary,
-.toggle-button:not([data-pressed]) .toggle-button__secondary {
-display: none;
-}</style>

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

@@ -16,6 +16,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     staticHeaders: any[];
 }>, {}, {
     draft: any[];
+    search: string;
     isColumnSelectPopup: boolean;
 }, {
     changeableDraft(): any[];

package/types/components/wt-vidstack-player/components/toggle-button.vue.d.ts

@@ -1,13 +1,12 @@
 type __VLS_Props = {
-    primaryIcon: string;
-    secondaryIcon: string;
+    icon: string;
     color?: string;
     disabled?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    toggle: (value: boolean) => any;
+    toggle: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onToggle?: (value: boolean) => any;
+    onToggle?: () => any;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,137 +0,0 @@
-import { d as C } from "./index-7wsN-YZu.js";
-import { resolveComponent as a, resolveDirective as g, createElementBlock as c, openBlock as r, withDirectives as v, createVNode as s, withCtx as n, createTextVNode as i, toDisplayString as p, createElementVNode as h, normalizeClass as S, Fragment as k, renderList as D, withModifiers as y } from "vue";
-import { _ as P } from "./install-D_goYtnz.js";
-const H = {
-  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
-    isColumnSelectPopup: !1
-  }),
-  computed: {
-    changeableDraft() {
-      return this.draft.filter((e) => !this.staticHeaders.includes(e.value)).sort((e, l) => this.shownColLabel(e)?.localeCompare(this.shownColLabel(l)));
-    }
-  },
-  watch: {
-    isColumnSelectPopup: {
-      handler() {
-        this.fillHeadersDraft();
-      }
-    }
-  },
-  methods: {
-    shownColLabel({ text: e, locale: l }) {
-      return !e && l ? typeof l == "string" ? this.$t(l) : this.$t(...l) : e;
-    },
-    openPopup() {
-      this.isColumnSelectPopup = !0;
-    },
-    close() {
-      this.isColumnSelectPopup = !1;
-    },
-    fillHeadersDraft() {
-      this.draft = C(this.headers);
-    },
-    setShownColumns() {
-      this.$emit("change", this.draft), this.close();
-    }
-  }
-}, L = { class: "wt-table-column-select" }, U = { class: "wt-table-column-select__popup-list-wrap" }, x = ["onClickCapture"];
-function B(e, l, E, I, N, t) {
-  const m = a("wt-icon-btn"), _ = a("wt-checkbox"), u = a("wt-button"), w = a("wt-popup"), f = g("tooltip");
-  return r(), c("div", L, [
-    v(s(m, {
-      icon: "column-select",
-      onClick: t.openPopup
-    }, null, 8, ["onClick"]), [
-      [f, e.$t("webitelUI.tableColumnSelect.title")]
-    ]),
-    s(w, {
-      shown: e.isColumnSelectPopup,
-      class: "wt-table-column-select__popup",
-      onClose: t.close
-    }, {
-      title: n(() => [
-        i(p(e.$t("webitelUI.tableColumnSelect.title")), 1)
-      ]),
-      main: n(() => [
-        h("div", U, [
-          h("ul", {
-            class: S([{
-              "wt-table-column-select__popup-list--md": t.changeableDraft.length > 10 && t.changeableDraft.length <= 20,
-              "wt-table-column-select__popup-list--lg": t.changeableDraft.length > 20
-            }, "wt-table-column-select__popup-list"])
-          }, [
-            (r(!0), c(k, null, D(t.changeableDraft, (o, b) => (r(), c("li", {
-              key: b,
-              class: "wt-table-column-select__popup-item",
-              onClickCapture: y((d) => o.show = !o.show, ["prevent"])
-            }, [
-              s(_, {
-                label: t.shownColLabel(o),
-                selected: o.show,
-                "onUpdate:selected": (d) => o.show = d
-              }, null, 8, ["label", "selected", "onUpdate:selected"])
-            ], 40, x))), 128))
-          ], 2)
-        ])
-      ]),
-      actions: n(() => [
-        s(u, { onClick: t.setShownColumns }, {
-          default: n(() => [
-            i(p(e.$t("reusable.add")), 1)
-          ], void 0, !0),
-          _: 1
-        }, 8, ["onClick"]),
-        s(u, {
-          color: "secondary",
-          onClick: t.close
-        }, {
-          default: n(() => [
-            i(p(e.$t("reusable.cancel")), 1)
-          ], void 0, !0),
-          _: 1
-        }, 8, ["onClick"])
-      ]),
-      _: 1
-    }, 8, ["shown", "onClose"])
-  ]);
-}
-const A = /* @__PURE__ */ P(H, [["render", B], ["__scopeId", "data-v-405c9158"]]);
-export {
-  A as default
-};