@webitel/ui-sdk 26.2.72 → 26.2.73

package/src/components/wt-expansion-panel/wt-expansion-panel.vue

@@ -1,14 +1,24 @@
 <template>
-  <div :class="[`wt-expansion-panel--${props.size}`]" class="wt-expansion-panel">
+  <div
+    :class="[`wt-expansion-panel--${props.size}`]"
+    class="wt-expansion-panel"
+  >
     <div
-:class="[props.size === 'sm' ? 'typo-subtitle-2' : 'typo-subtitle-1']" class="wt-expansion-panel-header"
-      tabindex="0" @click="toggle" @keypress.enter="toggle">
-      <slot name="title" />
+      :class="[props.size === 'sm' ? 'typo-subtitle-2' : 'typo-subtitle-1']"
+      class="wt-expansion-panel-header"
+      tabindex="0"
+      @click="toggle"
+      @keypress.enter="toggle"
+    >
+      <slot name="title"/>
+
       <div class="wt-expansion-panel-actions">
         <slot name="actions" v-bind="{ open, opened }" />
         <wt-icon
-:class="{ 'wt-expansion-panel-arrow--opened': opened }" class="wt-expansion-panel-arrow"
-          icon="arrow-right" />
+          :class="{ 'wt-expansion-panel-arrow--opened': opened }"
+          class="wt-expansion-panel-arrow"
+          icon="arrow-right"
+        />
       </div>
     </div>
     <wt-expand-transition v-show="opened">
@@ -19,9 +29,10 @@
   </div>
 </template>
 
-<script setup>
-import { ref, watch } from 'vue';
-
+<script setup lang="ts">
+import { toRef } from 'vue';
+import { useExpansion } from '../../composables/useExpansion/useExpansion';
+import { ComponentSize } from '../../enums';
 import WtExpandTransition from '../transitions/wt-expand-transition.vue';
 
 /**
@@ -34,63 +45,34 @@ import WtExpandTransition from '../transitions/wt-expand-transition.vue';
  * @slot-scope {function} open - Function to open the panel
  * @slot-scope {boolean} opened - Whether the panel is currently opened
  */
-const props = defineProps({
-	/**
-	 * Size of the expansion panel
-	 * @type {string}
-	 * @default 'md'
-	 * @options ['sm', 'md']
-	 */
-	size: {
-		type: String,
-		default: 'md',
-	},
-	/**
-	 * Whether the expansion panel is initially collapsed. Also, can force expansion state, if changed
-	 * @type {boolean}
-	 * @default false
-	 */
-	collapsed: {
-		type: Boolean,
-		default: false,
+const props = withDefaults(
+	defineProps<{
+		/**
+		 * Size of the expansion panel
+		 * @type {string}
+		 * @default 'md'
+		 * @options ['sm', 'md']
+		 */
+		size?: ComponentSize;
+		/**
+		 * Whether the expansion panel is initially collapsed. Also, can force expansion state, if changed
+		 * @type {boolean}
+		 * @default false
+		 */
+		collapsed?: boolean;
+	}>(),
+	{
+		size: ComponentSize.MD,
+		collapsed: false,
 	},
-});
-
-const emit = defineEmits([
-	'opened',
-	'closed',
-]);
-
-const opened = ref(!props.collapsed);
-
-function open() {
-	if (!opened.value) {
-		opened.value = true;
-		emit('opened');
-	}
-}
-
-function close() {
-	if (opened.value) {
-		opened.value = false;
-		emit('closed');
-	}
-}
+);
 
-function toggle() {
-	return opened.value ? close() : open();
-}
+const emit = defineEmits<{
+	opened: [];
+	closed: [];
+}>();
 
-watch(
-	() => props.collapsed,
-	(newVal) => {
-		if (newVal) {
-			close();
-		} else {
-			open();
-		}
-	},
-);
+const { opened, open, toggle } = useExpansion(toRef(props, 'collapsed'), emit);
 </script>
 
 <style scoped>
@@ -110,11 +92,6 @@ watch(
   color: var(--wt-expansion-panel-header-title-color);
 }
 
-.wt-expansion-panel-body {
-  background-color: var(--wt-expansion-panel-content-background-color);
-  color: var(--wt-expansion-panel-content-text-color);
-}
-
 .wt-expansion-panel-actions {
   display: flex;
   gap: var(--spacing-xs);
@@ -127,4 +104,10 @@ watch(
 .wt-expansion-panel-arrow--opened {
   transform: rotate(90deg);
 }
+
+.wt-expansion-panel-body {
+  background-color: var(--wt-expansion-panel-content-background-color);
+  color: var(--wt-expansion-panel-content-text-color);
+}
+
 </style>

package/src/composables/index.ts

@@ -4,6 +4,7 @@ export * from './useCard/useCardComponent';
 export * from './useCard/useCardTabs';
 export * from './useClose/useClose';
 export * from './useDestroyableSortable/useDestroyableSortable';
+export * from './useExpansion/useExpansion';
 export * from './useGalleriaFullscreen/useGalleriaFullscreen';
 export * from './useGalleriaMaskClick/useGalleriaMaskClick';
 export * from './useInputControl/useInputControl';

package/src/composables/useExpansion/useExpansion.ts

@@ -0,0 +1,34 @@
+import { type Ref, ref, watch } from 'vue';
+
+export function useExpansion(collapsed: Ref<boolean>, emit?) {
+	const opened = ref<boolean>(!collapsed.value);
+
+	function open(): void {
+		if (opened.value) return;
+
+		opened.value = true;
+		emit?.('opened');
+	}
+
+	function close(): void {
+		if (!opened.value) return;
+
+		opened.value = false;
+		emit?.('closed');
+	}
+
+	function toggle(): void {
+		opened.value ? close() : open();
+	}
+
+	watch(collapsed, (value) => {
+		value ? close() : open();
+	});
+
+	return {
+		opened,
+		open,
+		close,
+		toggle,
+	};
+}

package/types/components/wt-expansion-card/wt-expansion-card.vue.d.ts

@@ -0,0 +1,45 @@
+import { ComponentSize } from '../../enums';
+type __VLS_Props = {
+    /**
+     * Size of the expansion panel
+     * @type {string}
+     * @default 'md'
+     * @options ['sm', 'md']
+     */
+    size?: ComponentSize;
+    /**
+     * Whether the expansion panel is initially collapsed. Also, can force expansion state, if changed
+     * @type {boolean}
+     * @default false
+     */
+    collapsed?: boolean;
+};
+declare var __VLS_1: {}, __VLS_9: {}, __VLS_11: {
+    open: () => void;
+    opened: boolean;
+};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_9) => any;
+} & {
+    actions?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    opened: () => any;
+    closed: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpened?: () => any;
+    onClosed?: () => any;
+}>, {
+    size: ComponentSize;
+    collapsed: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/components/wt-expansion-panel/wt-expansion-panel.vue.d.ts

@@ -1,18 +1,55 @@
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-type __VLS_WithSlots<T, S> = T & (new () => {
-    $slots: S;
-});
-declare const __VLS_base: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-type __VLS_Slots = {
-    title?: (props: {}) => any;
+import { ComponentSize } from '../../enums';
+/**
+ * @emits {void} opened - Emitted when the expansion panel is opened
+ * @emits {void} closed - Emitted when the expansion panel is closed
+ *
+ * @slot default - Content of the expansion panel
+ * @slot title - Title of the expansion panel
+ * @slot actions - Actions of the expansion panel
+ * @slot-scope {function} open - Function to open the panel
+ * @slot-scope {boolean} opened - Whether the panel is currently opened
+ */
+type __VLS_Props = {
+    /**
+     * Size of the expansion panel
+     * @type {string}
+     * @default 'md'
+     * @options ['sm', 'md']
+     */
+    size?: ComponentSize;
+    /**
+     * Whether the expansion panel is initially collapsed. Also, can force expansion state, if changed
+     * @type {boolean}
+     * @default false
+     */
+    collapsed?: boolean;
+};
+declare var __VLS_1: {}, __VLS_3: {
+    open: () => void;
+    opened: boolean;
+}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_1) => any;
 } & {
-    actions?: (props: {
-        open: typeof open;
-        opened: boolean;
-    }) => any;
+    actions?: (props: typeof __VLS_3) => any;
 } & {
-    default?: (props: {}) => any;
+    default?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    opened: () => any;
+    closed: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpened?: () => any;
+    onClosed?: () => any;
+}>, {
+    size: ComponentSize;
+    collapsed: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
 };
-declare function open(): void;

package/types/components/wt-select/wt-select-v2.vue.d.ts

@@ -30,8 +30,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     input: (...args: any[]) => void;
     reset: (...args: any[]) => void;
-    "update:modelValue": (...args: any[]) => void;
     closed: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
     "search-change": (...args: any[]) => void;
     "custom-value": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -64,8 +64,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>> & Readonly<{
     onInput?: (...args: any[]) => any;
     onReset?: (...args: any[]) => any;
-    "onUpdate:modelValue"?: (...args: any[]) => any;
     onClosed?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
     "onSearch-change"?: (...args: any[]) => any;
     "onCustom-value"?: (...args: any[]) => any;
 }>, {

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

@@ -183,7 +183,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         tag(searchQuery: any, id: any): void;
         emitTagEvent(searchQuery: any, id: any): void;
     };
-}, import("vue").ComponentOptionsMixin, ("input" | "reset" | "update:modelValue" | "closed" | "search-change" | "custom-value")[], "input" | "reset" | "update:modelValue" | "closed" | "search-change" | "custom-value", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, ("input" | "reset" | "closed" | "update:modelValue" | "search-change" | "custom-value")[], "input" | "reset" | "closed" | "update:modelValue" | "search-change" | "custom-value", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     value: {};
     multiple: {
         type: BooleanConstructor;

package/types/composables/index.d.ts

@@ -11,3 +11,4 @@ export * from './useRepresentableAgentPauseCause/useRepresentableAgentPauseCause
 export * from './useTableColumnDrag/useTableColumnDrag';
 export * from './useValidate/useValidate';
 export * from './useWtTable/useWtTable';
+export * from './useExpansion/useExpansion';

package/types/composables/useExpansion/useExpansion.d.ts

@@ -0,0 +1,7 @@
+import { type Ref } from 'vue';
+export declare function useExpansion(collapsed: Ref<boolean>, emit?: any): {
+    opened: Ref<boolean, boolean>;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};

package/dist/wt-expansion-panel-cJWQaqAc.js

@@ -1,82 +0,0 @@
-import { ref as w, watch as m, resolveComponent as v, createElementBlock as _, openBlock as x, normalizeClass as s, createElementVNode as a, withDirectives as h, withKeys as y, renderSlot as l, createVNode as c, normalizeProps as g, guardReactiveProps as z, withCtx as b, vShow as C } from "vue";
-import { _ as E, W as $ } from "./install-UIKG1ERr.js";
-const k = { class: "wt-expansion-panel-actions" }, B = { class: "wt-expansion-panel-body" }, P = {
-  __name: "wt-expansion-panel",
-  props: {
-    /**
-     * Size of the expansion panel
-     * @type {string}
-     * @default 'md'
-     * @options ['sm', 'md']
-     */
-    size: {
-      type: String,
-      default: "md"
-    },
-    /**
-     * Whether the expansion panel is initially collapsed. Also, can force expansion state, if changed
-     * @type {boolean}
-     * @default false
-     */
-    collapsed: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    "opened",
-    "closed"
-  ],
-  setup(d, { emit: u }) {
-    const t = d, i = u, e = w(!t.collapsed);
-    function o() {
-      e.value || (e.value = !0, i("opened"));
-    }
-    function p() {
-      e.value && (e.value = !1, i("closed"));
-    }
-    function r() {
-      return e.value ? p() : o();
-    }
-    return m(
-      () => t.collapsed,
-      (n) => {
-        n ? p() : o();
-      }
-    ), (n, S) => {
-      const f = v("wt-icon");
-      return x(), _("div", {
-        class: s([[`wt-expansion-panel--${t.size}`], "wt-expansion-panel"])
-      }, [
-        a("div", {
-          class: s([[t.size === "sm" ? "typo-subtitle-2" : "typo-subtitle-1"], "wt-expansion-panel-header"]),
-          tabindex: "0",
-          onClick: r,
-          onKeypress: y(r, ["enter"])
-        }, [
-          l(n.$slots, "title", {}, void 0, !0),
-          a("div", k, [
-            l(n.$slots, "actions", g(z({ open: o, opened: e.value })), void 0, !0),
-            c(f, {
-              class: s([{ "wt-expansion-panel-arrow--opened": e.value }, "wt-expansion-panel-arrow"]),
-              icon: "arrow-right"
-            }, null, 8, ["class"])
-          ])
-        ], 34),
-        h(c($, null, {
-          default: b(() => [
-            a("div", B, [
-              l(n.$slots, "default", {}, void 0, !0)
-            ])
-          ], void 0, !0),
-          _: 3
-        }, 512), [
-          [C, e.value]
-        ])
-      ], 2);
-    };
-  }
-}, V = /* @__PURE__ */ E(P, [["__scopeId", "data-v-fa25d886"]]);
-export {
-  V as default
-};