@ldmjs/ui 1.0.0-dev-10 → 1.0.0-dev-11

package/dist/calendar.js

@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("vue"));
+		module.exports = factory(require("vue"), require("vue-screen-utils"));
 	else if(typeof define === 'function' && define.amd)
-		define(["vue"], factory);
+		define(["vue", "vue-screen-utils"], factory);
 	else if(typeof exports === 'object')
-		exports["ldmui"] = factory(require("vue"));
+		exports["ldmui"] = factory(require("vue"), require("vue-screen-utils"));
 	else
-		root["ldmui"] = factory(root["vue"]);
-})(self, (__WEBPACK_EXTERNAL_MODULE__2380__) => {
+		root["ldmui"] = factory(root["vue"], root["vue-screen-utils"]);
+})(self, (__WEBPACK_EXTERNAL_MODULE__2380__, __WEBPACK_EXTERNAL_MODULE__4135__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -5968,6 +5968,14 @@ exports.A = (sfc, props) => {
 "use strict";
 module.exports = __WEBPACK_EXTERNAL_MODULE__2380__;
 
+/***/ }),
+
+/***/ 4135:
+/***/ ((module) => {
+
+"use strict";
+module.exports = __WEBPACK_EXTERNAL_MODULE__4135__;
+
 /***/ })
 
 /******/ 	});
@@ -10005,277 +10013,8 @@ const handleWatcher = (watcher, handler) => {
     handler();
 };
 
-;// CONCATENATED MODULE: ./node_modules/vue-screen-utils/dist/index.mjs
-
-
-function windowExists() {
-    return typeof window !== 'undefined';
-}
-function windowHasFeature(feature) {
-    return windowExists() && feature in window;
-}
-
-function useMediaQuery(query, callback) {
-    let mediaQuery;
-    const matches = ref(false);
-    function listener(ev) {
-        if (callback)
-            callback(ev);
-        matches.value = ev.matches;
-    }
-    function cleanup() {
-        if (mediaQuery) {
-            mediaQuery.removeEventListener('change', listener);
-            mediaQuery = undefined;
-        }
-    }
-    function setup(newQuery = query) {
-        cleanup();
-        if (windowHasFeature('matchMedia') && newQuery) {
-            mediaQuery = window.matchMedia(newQuery);
-            mediaQuery.addEventListener('change', listener);
-            matches.value = mediaQuery.matches;
-        }
-    }
-    onMounted(() => setup());
-    onUnmounted(() => cleanup());
-    return { matches, setup, cleanup };
-}
-
-function useResizeObserver(target, callback, options = {}) {
-    let observer;
-    const rect = ref();
-    const listener = (...args) => {
-        if (callback)
-            callback(...args);
-        const entry = args[0][0];
-        rect.value = entry.contentRect;
-    };
-    const stopObserver = () => {
-        if (observer) {
-            observer.disconnect();
-            observer = undefined;
-        }
-    };
-    const stopWatch = watch(() => target.value, (elOrComp) => {
-        stopObserver();
-        if (windowHasFeature('ResizeObserver') && elOrComp) {
-            observer = new ResizeObserver(listener);
-            observer.observe(elOrComp.$el ?? elOrComp, options);
-        }
-    }, { immediate: true, flush: 'post' });
-    const cleanup = () => {
-        stopObserver();
-        stopWatch();
-    };
-    onUnmounted(() => cleanup());
-    return { rect, cleanup };
-}
-
-function useDarkMode(config) {
-    const isDark = (0,external_vue_.ref)(false);
-    const displayMode = (0,external_vue_.computed)(() => (isDark.value ? 'dark' : 'light'));
-    let mediaQuery;
-    let mutationObserver;
-    function mqListener(ev) {
-        isDark.value = ev.matches;
-    }
-    function setupSystem() {
-        if (windowHasFeature('matchMedia')) {
-            mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-            mediaQuery.addEventListener('change', mqListener);
-            isDark.value = mediaQuery.matches;
-        }
-    }
-    function moListener() {
-        const { selector = ':root', darkClass = 'dark' } = config.value;
-        const el = document.querySelector(selector);
-        isDark.value = el.classList.contains(darkClass);
-    }
-    function setupClass(config) {
-        const { selector = ':root', darkClass = 'dark' } = config;
-        if (windowExists() && selector && darkClass) {
-            const el = document.querySelector(selector);
-            if (el) {
-                mutationObserver = new MutationObserver(moListener);
-                mutationObserver.observe(el, {
-                    attributes: true,
-                    attributeFilter: ['class'],
-                });
-                isDark.value = el.classList.contains(darkClass);
-            }
-        }
-    }
-    function setup() {
-        stopObservers();
-        const type = typeof config.value;
-        if (type === 'string' && config.value.toLowerCase() === 'system') {
-            setupSystem();
-        }
-        else if (type === 'object') {
-            setupClass(config.value);
-        }
-        else {
-            isDark.value = !!config.value;
-        }
-    }
-    const stopWatch = (0,external_vue_.watch)(() => config.value, () => setup(), {
-        immediate: true,
-    });
-    function stopObservers() {
-        if (mediaQuery) {
-            mediaQuery.removeEventListener('change', mqListener);
-            mediaQuery = undefined;
-        }
-        if (mutationObserver) {
-            mutationObserver.disconnect();
-            mutationObserver = undefined;
-        }
-    }
-    function cleanup() {
-        stopObservers();
-        stopWatch();
-    }
-    (0,external_vue_.onUnmounted)(() => cleanup());
-    return {
-        isDark,
-        displayMode,
-        cleanup,
-    };
-}
-
-function resolveValue({ 'min-width': _minWidth, min = _minWidth, max, raw } = {}) {
-    return { min, max, raw };
-}
-/**
- * A function that normalizes the various forms that the screens object can be
- * provided in.
- *
- * Input(s):
- *   - ['100px', '200px'] // Raw strings
- *   - { sm: '100px', md: '200px' } // Object with string values
- *   - { sm: { min: '100px' }, md: { max: '100px' } } // Object with object values
- *   - { sm: [{ min: '100px' }, { max: '200px' }] } // Object with object array (multiple values)
- *
- * Output(s):
- *   - [{ name: 'sm', values: [{ min: '100px', max: '200px' }] }] // List of objects, that contains multiple values
- */
-function normalizeScreens(screens, root = true) {
-    if (Array.isArray(screens)) {
-        return screens.map((screen) => {
-            if (root && Array.isArray(screen)) {
-                throw new Error('The tuple syntax is not supported for `screens`.');
-            }
-            if (typeof screen === 'string') {
-                return { name: screen.toString(), values: [{ min: screen, max: undefined }] };
-            }
-            let [name, options] = screen;
-            name = name.toString();
-            if (typeof options === 'string') {
-                return { name, values: [{ min: options, max: undefined }] };
-            }
-            if (Array.isArray(options)) {
-                return { name, values: options.map((option) => resolveValue(option)) };
-            }
-            return { name, values: [resolveValue(options)] };
-        });
-    }
-    return normalizeScreens(Object.entries(screens ?? {}), false);
-}
-
-// This function gratuitously borrowed from TailwindCSS
-// https://github.com/tailwindcss/tailwindcss/blob/master/src/util/buildMediaQuery.js
-function buildMediaQuery(screenValues) {
-    return screenValues
-        .map((sv) => {
-        if (sv.raw !== undefined)
-            return sv.raw;
-        return [sv.min && `(min-width: ${sv.min})`, sv.max && `(max-width: ${sv.max})`].filter(Boolean).join(' and ');
-    })
-        .join(', ');
-}
-
-var defaultScreens = {
-    xs: '0px',
-    sm: '640px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1280px',
-};
-
-const defaultInjectKey = '$screens';
-function initScreens(screens) {
-    const state = (0,external_vue_.reactive)({
-        screens: normalizeScreens(screens || defaultScreens),
-        queries: {},
-        matches: {},
-        hasSetup: false,
-    });
-    function refreshMatches() {
-        Object.entries(state.queries).forEach(([key, query]) => {
-            state.matches[key] = query.matches;
-        });
-    }
-    function mapList(config) {
-        return (0,external_vue_.computed)(() => Object.keys(state.matches)
-            .filter((key) => state.matches[key] === true && config.hasOwnProperty(key))
-            .map((key) => config[key]));
-    }
-    const list = (0,external_vue_.computed)(() => Object.keys(state.matches).filter((k) => state.matches[k]));
-    function mapCurrent(config, def) {
-        return (0,external_vue_.computed)(() => {
-            const curr = current.value;
-            if (curr && config.hasOwnProperty(curr))
-                return config[curr];
-            return def;
-        });
-    }
-    const current = (0,external_vue_.computed)(() => {
-        const arr = list.value;
-        if (arr.length)
-            return arr[arr.length - 1];
-        return '';
-    });
-    function cleanup() {
-        Object.values(state.queries).forEach((query) => query.removeEventListener('change', refreshMatches));
-        state.queries = {};
-        state.matches = {};
-    }
-    if (!state.hasSetup && windowHasFeature('matchMedia')) {
-        cleanup();
-        state.queries = state.screens.reduce((result, { name, values }) => {
-            const mediaQuery = window.matchMedia(buildMediaQuery(values));
-            mediaQuery.addEventListener('change', refreshMatches);
-            result[name] = mediaQuery;
-            return result;
-        }, {});
-        refreshMatches();
-        state.hasSetup = true;
-    }
-    return { matches: state.matches, list, mapList, current, mapCurrent, cleanup };
-}
-
-function useScreens(screens, opts) {
-    const s = initScreens(screens);
-    provide(opts?.injectKey || defaultInjectKey, s);
-    onUnmounted(() => s.cleanup());
-    return s;
-}
-
-const dist_plugin = {
-    install: (app, screens, opts) => {
-        const s = initScreens(screens);
-        const key = opts?.injectKey || defaultInjectKey;
-        // Inject a globally available screens object method
-        app.config.globalProperties[key] = s;
-        // Provide screens object
-        app.provide(key, s);
-    },
-};
-
-
-//# sourceMappingURL=index.mjs.map
-
+// EXTERNAL MODULE: external "vue-screen-utils"
+var external_vue_screen_utils_ = __webpack_require__(4135);
 ;// CONCATENATED MODULE: ./src/lib/v-calendar/src/utils/glyph.ts
 
 const targetProps = ['base', 'start', 'end', 'startEnd'];
@@ -10569,7 +10308,7 @@ function createBase(props) {
     // #region Computed
     const color = (0,external_vue_.computed)(() => props.color ?? '');
     const isDark = (0,external_vue_.computed)(() => props.isDark ?? false);
-    const { displayMode } = useDarkMode(isDark);
+    const { displayMode } = (0,external_vue_screen_utils_.useDarkMode)(isDark);
     const theme = (0,external_vue_.computed)(() => new Theme(color.value));
     const locale = (0,external_vue_.computed)(() => {
         // Return the locale prop if it is an instance of the Locale class

package/dist/css/main.css

@@ -8,3 +8,5 @@
 
 .ld-datepicker[data-v-2278e290]{min-width:100%;max-width:100%;width:100%;height:100%;font-size:inherit !important;display:flex}.ld-datepicker.column[data-v-2278e290]{flex-flow:column nowrap}.ld-datepicker-validate[data-v-2278e290]{overflow:hidden;height:20px}.custom-time-picker[data-v-2278e290]{max-width:var(--date-time-width);border-radius:var(--border-radius);background-color:var(--white);font-size:inherit !important}.custom-time-picker-validate[data-v-2278e290]{overflow:hidden;height:20px}.date-input[data-v-2278e290]{padding-left:5px;width:100%;font-size:var(--font-size)}.time-input[data-v-2278e290]{width:100%;padding-left:5px;font-size:var(--font-size)}.time-input-btn[data-v-2278e290]{padding-right:5px}.dt-col[data-v-2278e290]{max-width:110px}.time-selector[data-v-2278e290]{display:flex;flex-wrap:wrap;max-width:186px;padding:3px}.time-selector>span[data-v-2278e290]{display:inline-block;width:100%;text-align:center;font-family:'Roboto';font-size:var(--font-size-2);font-weight:700}.time-selector .v-btn[data-v-2278e290]{width:30px !important;height:30px !important;max-width:30px !important;max-height:30px !important;min-width:30px !important;min-height:30px !important;margin:3px}[data-v-2278e290]  .vc-popover-content-wrapper{position:fixed !important}[data-v-2278e290]  .v-input--is-disabled input{color:var(--text) !important}[data-v-2278e290]  .vc-popover-content{border-color:var(--grey-l-5)}[data-v-2278e290]  .vc-title span{color:var(--text);font-size:var(--font-size-2);font-weight:600;font-family:'Roboto'}[data-v-2278e290]  .vc-arrow{color:var(--grey)}[data-v-2278e290]  .vc-weekday{color:var(--grey-l-2);font-size:var(--font-size);font-weight:600;font-family:'Roboto'}[data-v-2278e290]  .vc-day-content{color:var(--text);font-size:var(--font-size);font-weight:400;font-family:'Roboto'}[data-v-2278e290]  .vc-day-content.vc-disabled{color:var(--grey-l-2) !important}[data-v-2278e290]  .vc-day-content.vc-highlight-content-solid{color:var(--white) !important;font-weight:600 !important}
 
+.ld-tabs[data-v-d17ec18e]{margin-left:0;display:flex;height:100%;width:100%;overflow-y:auto}.ld-tabs .header-text[data-v-d17ec18e]{font-size:var(--font-size-2)}.ld-tabs-mobile[data-v-d17ec18e]{height:100%}.ld-tabs .body[data-v-d17ec18e]{display:flex;flex-flow:column nowrap;max-width:100%;width:100%;height:100%;justify-content:space-between;padding-top:3px}.ld-tabs .vertical-body[data-v-d17ec18e]{display:flex;flex-flow:column nowrap;width:calc(100% - 44px) !important;height:100%}.v-window[data-v-d17ec18e]{background-color:var(--white);box-shadow:1px 0 var(--grey-l-5),-1px 0 0 var(--grey-l-5);overflow-y:auto;height:100%;width:100%}.vertical-window.v-window[data-v-d17ec18e]{padding:10px 12px;border-bottom:1px solid var(--grey-l-5);border-right:1px solid var(--grey-l-5);border-top:1px solid var(--grey-l-5)}[data-v-d17ec18e]  .ld-tabs .v-tab{background-color:transparent}[data-v-d17ec18e]  .ld-tabs .v-slide-group-item--active{background-color:var(--white)}[data-v-d17ec18e]  .v-window.mobile .tg-field .v-row .v-col{flex:1 0 0 !important}[data-v-d17ec18e]  .v-window.mobile .tg-field .text-viewer-wrapper .v-col{flex:1 0 0 !important}[data-v-d17ec18e]  .vertical-tab .v-tab{justify-content:flex-start;border:1px solid var(--grey-l-5);border-radius:0 !important;text-transform:none !important;width:100%;min-width:auto !important}[data-v-d17ec18e]  .vertical-tab .v-tab:last-child{border-bottom:1px solid var(--grey-l-5) !important}[data-v-d17ec18e]  .vertical-tab .v-slide-group__content{flex-flow:column nowrap;height:100% !important;width:100% !important}[data-v-d17ec18e]  .vertical-tab .v-slide-group__content .v-btn__content{text-overflow:ellipsis;display:inline-flex;justify-content:flex-start;gap:4px;white-space:nowrap;overflow:hidden}[data-v-d17ec18e]  .v-tab{height:var(--ld-tab-height) !important;display:flex !important;text-transform:uppercase !important;border-bottom:none !important;padding:0 12px !important;font-size:var(--font-size);color:var(--text) !important;background-color:var(--white);letter-spacing:0 !important}[data-v-d17ec18e]  .v-tab.v-slide-group-item--active{border-right-color:transparent}[data-v-d17ec18e]  .v-slide-group-item--active .v-btn__content{font-weight:bold;color:var(--primary) !important}[data-v-d17ec18e]  .v-btn:hover::before{background-color:inherit}[data-v-d17ec18e]  .v-slide-group--vertical{border-color:var(--grey-l-5);border:1px}[data-v-d17ec18e]  .v-slide-group--vertical .v-tab__slider{width:0px}[data-v-d17ec18e]  .v-tabs-bar{flex:none;height:fit-content;height:-moz-max-content;max-height:fit-content;max-height:-moz-max-content;z-index:1}[data-v-d17ec18e]  .v-window-item{height:100%}[data-v-d17ec18e]  .ld-tabs-mobile.hide-tabs .v-tab{display:none !important}[data-v-d17ec18e]  .ld-tabs-mobile.hide-body .v-slide-group{width:100% !important}[data-v-d17ec18e]  .ld-tabs-mobile.hide-body .v-window{display:none !important}[data-v-d17ec18e]  .v-tabs-mobile .v-slide-group__content .v-btn__content{display:block !important}
+

package/dist/index.js

@@ -3944,6 +3944,404 @@ function ld_datepicker_reg(vue, options) {
 }
 /* harmony default export */ const src_ld_datepicker = (ld_datepicker_reg);
 
+;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ld-tab/ld-tab.vue?vue&type=template&id=66af7dd2
+
+
+const ld_tabvue_type_template_id_66af7dd2_hoisted_1 = { class: "text-crop" }
+
+function ld_tabvue_type_template_id_66af7dd2_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_v_tab = (0,external_vue_.resolveComponent)("v-tab")
+  const _component_v_window_item = (0,external_vue_.resolveComponent)("v-window-item")
+
+  return (!_ctx.onlyWindows)
+    ? ((0,external_vue_.openBlock)(), (0,external_vue_.createBlock)(_component_v_tab, (0,external_vue_.mergeProps)({
+        key: 0,
+        color: "primary"
+      }, _ctx.$props, {
+        key: `${_ctx.index}-v-tab`
+      }), {
+        default: (0,external_vue_.withCtx)(() => [
+          (0,external_vue_.createElementVNode)("span", ld_tabvue_type_template_id_66af7dd2_hoisted_1, (0,external_vue_.toDisplayString)(_ctx.heading), 1),
+          (0,external_vue_.createTextVNode)(),
+          (0,external_vue_.renderSlot)(_ctx.$slots, "icon")
+        ]),
+        _: 3
+      }, 16))
+    : ((0,external_vue_.openBlock)(), (0,external_vue_.createBlock)(_component_v_window_item, (0,external_vue_.mergeProps)({ key: 1 }, _ctx.$props, {
+        key: `${_ctx.index}-v-window`,
+        value: _ctx.index
+      }), {
+        default: (0,external_vue_.withCtx)(() => [
+          (0,external_vue_.renderSlot)(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["value"]))
+}
+;// CONCATENATED MODULE: ./src/ld-tab/ld-tab.vue?vue&type=template&id=66af7dd2
+
+;// CONCATENATED MODULE: ./node_modules/ts-loader/index.js??clonedRuleSet-1.use[0]!./src/ld-tab/ld-tab.ts?vue&type=script&lang=js&external
+var ld_tabvue_type_script_lang_js_external_decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ld_tabvue_type_script_lang_js_external_metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+
+
+let LdTabComponent = class LdTabComponent extends external_vue_class_component_.Vue {
+    get onlyWindows() {
+        return this.$parent.$options.name === 'VWindow';
+    }
+};
+ld_tabvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Prop)({ type: String, default: null }),
+    ld_tabvue_type_script_lang_js_external_metadata("design:type", String)
+], LdTabComponent.prototype, "index", void 0);
+ld_tabvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Prop)({ type: String, default: null }),
+    ld_tabvue_type_script_lang_js_external_metadata("design:type", String)
+], LdTabComponent.prototype, "heading", void 0);
+ld_tabvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Prop)({ type: Boolean, default: false }),
+    ld_tabvue_type_script_lang_js_external_metadata("design:type", Boolean)
+], LdTabComponent.prototype, "disabled", void 0);
+ld_tabvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Prop)({ type: String, default: undefined }),
+    ld_tabvue_type_script_lang_js_external_metadata("design:type", String)
+], LdTabComponent.prototype, "activeClass", void 0);
+ld_tabvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Prop)({ type: Boolean, default: false }),
+    ld_tabvue_type_script_lang_js_external_metadata("design:type", Boolean)
+], LdTabComponent.prototype, "lazy", void 0);
+LdTabComponent = ld_tabvue_type_script_lang_js_external_decorate([
+    (0,external_vue_class_component_.Options)({
+        name: 'ld-tab',
+    })
+], LdTabComponent);
+/* harmony default export */ const ld_tabvue_type_script_lang_js_external = (LdTabComponent);
+;
+
+;// CONCATENATED MODULE: ./src/ld-tab/ld-tab.ts?vue&type=script&lang=js&external
+ 
+;// CONCATENATED MODULE: ./src/ld-tab/ld-tab.vue
+
+
+
+
+;
+const ld_tab_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ld_tabvue_type_script_lang_js_external, [['render',ld_tabvue_type_template_id_66af7dd2_render]])
+
+/* harmony default export */ const ld_tab = (ld_tab_exports_);
+;// CONCATENATED MODULE: ./src/ld-tab/index.ts
+
+function ld_tab_reg(vue, options) {
+    vue.component(options.aliases['ld-tab'], ld_tab);
+}
+/* harmony default export */ const src_ld_tab = (ld_tab_reg);
+
+;// CONCATENATED MODULE: ./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ld-tabs/ld-tabs.vue?vue&type=template&id=d17ec18e&scoped=true
+
+
+const ld_tabsvue_type_template_id_d17ec18e_scoped_true_withScopeId = n => (_pushScopeId("data-v-d17ec18e"),n=n(),_popScopeId(),n)
+const ld_tabsvue_type_template_id_d17ec18e_scoped_true_hoisted_1 = { class: "d-flex flex-column h-100" }
+const ld_tabsvue_type_template_id_d17ec18e_scoped_true_hoisted_2 = {
+  class: "d-flex align-center justify-end",
+  style: {"height":"var(--ld-tab-height)"}
+}
+const ld_tabsvue_type_template_id_d17ec18e_scoped_true_hoisted_3 = {
+  key: 0,
+  class: "header-text flex-1-1 px-4 font-weight-bold"
+}
+
+function ld_tabsvue_type_template_id_d17ec18e_scoped_true_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_square_button = (0,external_vue_.resolveComponent)("square-button")
+  const _component_v_tooltip = (0,external_vue_.resolveComponent)("v-tooltip")
+  const _component_v_tabs = (0,external_vue_.resolveComponent)("v-tabs")
+  const _component_v_window = (0,external_vue_.resolveComponent)("v-window")
+  const _component_v_row = (0,external_vue_.resolveComponent)("v-row")
+
+  return ((0,external_vue_.openBlock)(), (0,external_vue_.createElementBlock)("div", ld_tabsvue_type_template_id_d17ec18e_scoped_true_hoisted_1, [
+    (0,external_vue_.createVNode)(_component_v_row, {
+      "no-gutters": "",
+      class: (0,external_vue_.normalizeClass)([{ 'ld-tabs-mobile': _ctx.isMobileGlobal && _ctx.vertical, 'hide-tabs': !_ctx.isTabsVisibled, 'hide-body': _ctx.isTabsVisibled }, "ld-tabs"])
+    }, {
+      default: (0,external_vue_.withCtx)(() => [
+        (0,external_vue_.createElementVNode)("div", {
+          class: (0,external_vue_.normalizeClass)(["d-flex h-100 w-100 overflow-hidden", { 'flex-1-1': _ctx.vertical, 'flex-column': !_ctx.vertical }])
+        }, [
+          (0,external_vue_.createVNode)(_component_v_tabs, {
+            modelValue: _ctx.active,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((_ctx.active) = $event)),
+            direction: _ctx.vertical ? 'vertical' : 'horizontal',
+            ref: "tabsListRef",
+            class: (0,external_vue_.normalizeClass)({
+            'v-tabs-mobile': _ctx.isMobileGlobal,
+            mobile: _ctx.isMobileGlobal,
+            'flex-shrink-0': true,
+            'vertical-tab': _ctx.vertical,
+          })
+          }, {
+            default: (0,external_vue_.withCtx)(() => [
+              (_ctx.vertical)
+                ? ((0,external_vue_.openBlock)(), (0,external_vue_.createElementBlock)("div", {
+                    key: 0,
+                    class: (0,external_vue_.normalizeClass)({ 'w-100': !_ctx.isMobileGlobal, 'tab-mobile': _ctx.isMobileGlobal })
+                  }, [
+                    (0,external_vue_.createElementVNode)("div", ld_tabsvue_type_template_id_d17ec18e_scoped_true_hoisted_2, [
+                      (_ctx.isTabsVisibled)
+                        ? ((0,external_vue_.openBlock)(), (0,external_vue_.createElementBlock)("p", ld_tabsvue_type_template_id_d17ec18e_scoped_true_hoisted_3, (0,external_vue_.toDisplayString)(_ctx.header), 1))
+                        : (0,external_vue_.createCommentVNode)("", true),
+                      (0,external_vue_.createTextVNode)(),
+                      (0,external_vue_.createVNode)(_component_v_tooltip, { location: "bottom" }, {
+                        activator: (0,external_vue_.withCtx)(({ props }) => [
+                          (0,external_vue_.createVNode)(_component_square_button, (0,external_vue_.mergeProps)(props, {
+                            class: "mr-2",
+                            variant: "text",
+                            onClick: _ctx.toggleCollapse
+                          }), {
+                            default: (0,external_vue_.withCtx)(() => [
+                              (_ctx.isTabsVisibled)
+                                ? ((0,external_vue_.openBlock)(), (0,external_vue_.createBlock)((0,external_vue_.resolveDynamicComponent)(_ctx.$ldmui.options.aliases['ld-icon']), {
+                                    key: 0,
+                                    color: "grey",
+                                    icon: "keyboard_arrow_left"
+                                  }))
+                                : ((0,external_vue_.openBlock)(), (0,external_vue_.createBlock)((0,external_vue_.resolveDynamicComponent)(_ctx.$ldmui.options.aliases['ld-icon']), {
+                                    key: 1,
+                                    color: "grey",
+                                    icon: "keyboard_arrow_right"
+                                  }))
+                            ]),
+                            _: 2
+                          }, 1040, ["onClick"])
+                        ]),
+                        default: (0,external_vue_.withCtx)(() => [
+                          (0,external_vue_.createTextVNode)(),
+                          (0,external_vue_.createElementVNode)("span", null, (0,external_vue_.toDisplayString)(_ctx.isTabsVisibled ? 'Скрыть вкладки' : 'Показать вкладки'), 1)
+                        ]),
+                        _: 1
+                      })
+                    ])
+                  ], 2))
+                : (0,external_vue_.createCommentVNode)("", true),
+              (0,external_vue_.createTextVNode)(),
+              (0,external_vue_.renderSlot)(_ctx.$slots, "default", {}, undefined, true),
+              (0,external_vue_.createTextVNode)(),
+              (0,external_vue_.renderSlot)(_ctx.$slots, "tabs-footer", {}, undefined, true)
+            ]),
+            _: 3
+          }, 8, ["modelValue", "direction", "class"]),
+          (0,external_vue_.createTextVNode)(),
+          (_ctx.isBodyVisibled)
+            ? ((0,external_vue_.openBlock)(), (0,external_vue_.createBlock)(_component_v_window, {
+                key: 0,
+                class: (0,external_vue_.normalizeClass)(["h-100", { mobile: _ctx.isMobileGlobal, 'vertical-window': _ctx.vertical }]),
+                style: (0,external_vue_.normalizeStyle)({
+            'border': _ctx.isTabsVisibled ? 'unset' : '1px solid var(--grey-l-5)'
+          }),
+                "model-value": _ctx.active
+              }, {
+                default: (0,external_vue_.withCtx)(() => [
+                  (0,external_vue_.renderSlot)(_ctx.$slots, "default", {}, undefined, true)
+                ]),
+                _: 3
+              }, 8, ["class", "style", "model-value"]))
+            : (0,external_vue_.createCommentVNode)("", true)
+        ], 2)
+      ]),
+      _: 3
+    }, 8, ["class"]),
+    (0,external_vue_.createTextVNode)(),
+    (0,external_vue_.renderSlot)(_ctx.$slots, "footer", {}, undefined, true)
+  ]))
+}
+;// CONCATENATED MODULE: ./src/ld-tabs/ld-tabs.vue?vue&type=template&id=d17ec18e&scoped=true
+
+;// CONCATENATED MODULE: ./node_modules/ts-loader/index.js??clonedRuleSet-1.use[0]!./src/ld-tabs/ld-tabs.ts?vue&type=script&lang=js&external
+var ld_tabsvue_type_script_lang_js_external_decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ld_tabsvue_type_script_lang_js_external_metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+// import { IActionContext } from 'app/application/actions/action.interface';
+// import { ContentType } from 'app/domain/models/settings/view.settings';
+
+
+
+let LdTabsComponent = class LdTabsComponent extends (0,external_vue_property_decorator_.mixins)(ViewportMixin) {
+    constructor() {
+        super(...arguments);
+        this.active = -1;
+        this.isTabsVisibled = true;
+        this.isBodyVisibled = true;
+        this.styleCleaned = false;
+    }
+    emitChangeStep(value) {
+        return value;
+    }
+    emitUpdateModelValue(value) {
+        return value;
+    }
+    onValueChanged(newVal, oldVal) {
+        if (newVal === oldVal) {
+            return;
+        }
+        this.active = newVal;
+    }
+    onIsActiveChanged() {
+        if (this.isActive || this.isActive === 0) {
+            this.active = this.isActive;
+        }
+    }
+    onActiveChanged() {
+        if (this.isMobileGlobal && this.isTabsVisibled) {
+            this.isTabsVisibled = false;
+        }
+        this.emitChangeStep(this.active);
+        this.emitUpdateModelValue(this.active);
+    }
+    onMobileChanged() {
+        if (this.isMobileGlobal) {
+            this.isBodyVisibled = true;
+            this.isTabsVisibled = false;
+        }
+        else {
+            this.isTabsVisibled = true;
+        }
+    }
+    mounted() {
+        if (this.isMobileGlobal) {
+            this.$refs.tabsListRef.$el.style = 'width: 44px !important';
+        }
+    }
+    toggleCollapse() {
+        this.isTabsVisibled = !this.isTabsVisibled;
+        if (!this.$refs.tabsListRef) {
+            return;
+        }
+        if (this.isTabsVisibled) {
+            this.$refs.tabsListRef.$el.style = '';
+            return;
+        }
+        if (this.isMobileGlobal) {
+            this.$refs.tabsListRef.$el.style = 'width: 44px !important';
+            return;
+        }
+        this.$refs.tabsListRef.$el.style = 'width: 60px !important';
+    }
+    onClick() {
+        this.onActiveChanged();
+    }
+    get isBtnVisibled() {
+        if (!this.isMobileGlobal) {
+            return this.vertical;
+        }
+        if (this.vertical) {
+            return this.isBodyVisibled;
+        }
+        return false;
+    }
+};
+ld_tabsvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Prop)(),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:type", Number)
+], LdTabsComponent.prototype, "modelValue", void 0);
+ld_tabsvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Prop)(),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:type", Number)
+], LdTabsComponent.prototype, "isActive", void 0);
+ld_tabsvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Prop)({ default: true }),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:type", Boolean)
+], LdTabsComponent.prototype, "vertical", void 0);
+ld_tabsvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Prop)(),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:type", Boolean)
+], LdTabsComponent.prototype, "dark", void 0);
+ld_tabsvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Prop)(),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:type", Number)
+], LdTabsComponent.prototype, "value", void 0);
+ld_tabsvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Prop)({ default: '' }),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:type", String)
+], LdTabsComponent.prototype, "header", void 0);
+ld_tabsvue_type_script_lang_js_external_decorate([
+    Emit('change-step'),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:type", Function),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:paramtypes", [Number]),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:returntype", void 0)
+], LdTabsComponent.prototype, "emitChangeStep", null);
+ld_tabsvue_type_script_lang_js_external_decorate([
+    Emit('update:model-value'),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:type", Function),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:paramtypes", [Number]),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:returntype", void 0)
+], LdTabsComponent.prototype, "emitUpdateModelValue", null);
+ld_tabsvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Watch)('modelValue', { immediate: true }),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:type", Function),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:paramtypes", [Number, Number]),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:returntype", void 0)
+], LdTabsComponent.prototype, "onValueChanged", null);
+ld_tabsvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Watch)('isActive', { immediate: true }),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:type", Function),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:paramtypes", []),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:returntype", void 0)
+], LdTabsComponent.prototype, "onIsActiveChanged", null);
+ld_tabsvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Watch)('active'),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:type", Function),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:paramtypes", []),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:returntype", void 0)
+], LdTabsComponent.prototype, "onActiveChanged", null);
+ld_tabsvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Watch)('isMobileGlobal', { immediate: true }),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:type", Function),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:paramtypes", []),
+    ld_tabsvue_type_script_lang_js_external_metadata("design:returntype", void 0)
+], LdTabsComponent.prototype, "onMobileChanged", null);
+LdTabsComponent = ld_tabsvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Options)({
+        inheritAttrs: false,
+    })
+], LdTabsComponent);
+/* harmony default export */ const ld_tabsvue_type_script_lang_js_external = (LdTabsComponent);
+
+;// CONCATENATED MODULE: ./src/ld-tabs/ld-tabs.ts?vue&type=script&lang=js&external
+ 
+;// CONCATENATED MODULE: ./src/ld-tabs/ld-tabs.vue
+
+
+
+
+;
+
+
+const ld_tabs_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ld_tabsvue_type_script_lang_js_external, [['render',ld_tabsvue_type_template_id_d17ec18e_scoped_true_render],['__scopeId',"data-v-d17ec18e"]])
+
+/* harmony default export */ const ld_tabs = (ld_tabs_exports_);
+;// CONCATENATED MODULE: ./src/ld-tabs/index.ts
+
+function ld_tabs_reg(vue, options) {
+    ld_tabs.props = {
+        ...ld_tabs.props,
+        header: {
+            default: options.LdTabs?.header
+        }
+    };
+    vue.component(options.aliases['ld-tabs'], ld_tabs);
+}
+/* harmony default export */ const src_ld_tabs = (ld_tabs_reg);
+
 ;// CONCATENATED MODULE: ./src/utils/delay.ts
 async function delay(timeout) {
     return new Promise(resolve => setTimeout(() => resolve(), timeout));
@@ -4046,6 +4444,8 @@ const ActiveDirectiveOptions = {
 
 
 
+
+
 const ldmuiPlugin = {
     install(vue, options) {
         if (!options) {
@@ -4061,6 +4461,8 @@ const ldmuiPlugin = {
             'ld-breadcrumbs': options.aliases?.['ld-breadcrumbs'] ?? 'ld-breadcrumbs',
             'ld-edit-text': options.aliases?.['ld-edit-text'] ?? 'ld-edit-text',
             'ld-datepicker': options.aliases?.['ld-datepicker'] ?? 'ld-datepicker',
+            'ld-tab': options.aliases?.['ld-tab'] ?? 'ld-tab',
+            'ld-tabs': options.aliases?.['ld-tabs'] ?? 'ld-tabs',
         };
         vue.config.globalProperties.$utils = {
             isDefined: isDefined,
@@ -4080,6 +4482,8 @@ const ldmuiPlugin = {
         src_ld_breadcrumbs(vue, options);
         src_ld_edit_text(vue, options);
         src_ld_datepicker(vue, options);
+        src_ld_tab(vue, options);
+        src_ld_tabs(vue, options);
     },
 };
 /* harmony default export */ const src = (ldmuiPlugin);

package/dist/scss/_variables.scss

@@ -3,10 +3,13 @@ $input-height: 28px !default; // высота атомарного элемен
 $border-radius: 4px !default; // радиус скругления атомарного элемента ui
 $chip-height: 20px !default; // высота элемента chip
 
+$ld-tab-height: $input-height + 10px; // высота элемента ld-tab
+
 :root {
   --font-size: #{$font-size};
   --font-size-2: #{calc(var(--font-size) + 2px)};
   --input-height: #{$input-height};
   --border-radius: #{$border-radius};
   --chip-height: #{$chip-height};
+  --ld-tab-height: #{$ld-tab-height};
 }

package/dist/types/options.d.ts

@@ -8,6 +8,8 @@ export interface ldmuiOptions {
     'ld-breadcrumbs'?: string;
     'ld-edit-text'?: string;
     'ld-datepicker'?: string;
+    'ld-tab'?: string;
+    'ld-tabs'?: string;
   },
   viewport?: {
     isMobile: string;
@@ -26,5 +28,8 @@ export interface ldmuiOptions {
       name: string;
       path: string;
     }
+  },
+  LdTabs?: {
+    header: string;
   }
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@ldmjs/ui",
-  "version": "1.0.0-dev-10",
+  "version": "1.0.0-dev-11",
   "description": "ldm ui",
-  "main": "dist/index.сjs",
+  "main": "dist/index.js",
   "engines": {
     "node": ">=16",
     "npm": ">=8"
@@ -10,7 +10,7 @@
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack serve --config config/webpack.config.dev.js --progress --profile",
     "build": "cross-env NODE_ENV=production webpack --config config/webpack.config.build.js --stats-error-details",
-    "serve": "webpack serve --config config/webpack.config.serve.js --progress --profile",
+    "serve": "cross-env NODE_ENV=development webpack serve --config config/webpack.config.serve.js --progress --profile",
     "test": "jest --runInBand --no-cache",
     "pub": "node config/publish.js && npm publish --access=public"
   },