@ldmjs/ui 1.0.0-dev-7 → 1.0.0-dev-8

package/README.md

@@ -139,6 +139,67 @@ const vuetify = createVuetify({
 </ld-splitter>
 ```
 
+## #ld-toggle-buttons
+
+### use toggle buttons
+
+```html
+<ld-toggle-btn
+  v-model="toggleModel"
+  :items="toggleItems"
+/>
+```
+
+```js
+toggleItems = [
+  {
+    id: 0,
+    tooltip: 'user',
+    icon: 'user',
+  },
+  {
+    id: 1,
+    tooltip: 'group',
+    icon: 'group',
+  }
+]
+```
+
+## #ld-breadcrumbs
+
+### use breadcrumbs
+
+```js
+appComponent.use(ldmui, {
+  LdBreadcrumbs: {
+    home: { // setup route for home page
+      name: 'home',
+      path: '/'
+    }
+  }
+```
+
+```html
+<ld-breadcrumbs :breadcrumbs="items" />
+```
+
+```js
+const items = [
+  {
+    text: 'Документы',
+    route: {
+      path: '/documents'
+    }
+  },
+  {
+    text: 'Входящая корреспонденция',
+    route: {
+      path: '/documents/123456'
+    }
+  }
+]
+```
+
 # Utilities
 
  - isDefined

package/dist/index.js

@@ -2043,18 +2043,15 @@ function ld_splitter_reg(vue, options) {
 }
 /* harmony default export */ const src_ld_splitter = (ld_splitter_reg);
 
-;// CONCATENATED MODULE: ./node_modules/ts-loader/index.js??clonedRuleSet-1.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ld-toggle-buttons/ld-toggle-buttons.vue?vue&type=template&id=2b80b384&ts=true
+;// CONCATENATED MODULE: ./node_modules/ts-loader/index.js??clonedRuleSet-1.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ld-toggle-buttons/ld-toggle-buttons.vue?vue&type=template&id=09fbefbf&ts=true
 
-const ld_toggle_buttonsvue_type_template_id_2b80b384_ts_true_hoisted_1 = {
-    class: "d-flex align-center",
-    style: { "grid-template-columns": "repeat(var(--input-height))" }
-};
-function ld_toggle_buttonsvue_type_template_id_2b80b384_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
+const ld_toggle_buttonsvue_type_template_id_09fbefbf_ts_true_hoisted_1 = { class: "d-flex align-center" };
+function ld_toggle_buttonsvue_type_template_id_09fbefbf_ts_true_render(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_ld_icon = (0,external_vue_.resolveComponent)("ld-icon");
     const _component_square_button = (0,external_vue_.resolveComponent)("square-button");
     const _component_v_tooltip = (0,external_vue_.resolveComponent)("v-tooltip");
     const _directive_active = (0,external_vue_.resolveDirective)("active");
-    return ((0,external_vue_.openBlock)(), (0,external_vue_.createElementBlock)("div", ld_toggle_buttonsvue_type_template_id_2b80b384_ts_true_hoisted_1, [
+    return ((0,external_vue_.openBlock)(), (0,external_vue_.createElementBlock)("div", ld_toggle_buttonsvue_type_template_id_09fbefbf_ts_true_hoisted_1, [
         ((0,external_vue_.openBlock)(true), (0,external_vue_.createElementBlock)(external_vue_.Fragment, null, (0,external_vue_.renderList)(_ctx.items, (item, index) => {
             return ((0,external_vue_.openBlock)(), (0,external_vue_.createBlock)(_component_v_tooltip, null, {
                 activator: (0,external_vue_.withCtx)(({ props }) => [
@@ -2086,7 +2083,7 @@ function ld_toggle_buttonsvue_type_template_id_2b80b384_ts_true_render(_ctx, _ca
     ]));
 }
 
-;// CONCATENATED MODULE: ./src/ld-toggle-buttons/ld-toggle-buttons.vue?vue&type=template&id=2b80b384&ts=true
+;// CONCATENATED MODULE: ./src/ld-toggle-buttons/ld-toggle-buttons.vue?vue&type=template&id=09fbefbf&ts=true
 
 ;// CONCATENATED MODULE: ./node_modules/ts-loader/index.js??clonedRuleSet-1.use[0]!./src/ld-toggle-buttons/ld-toggle-buttons.ts?vue&type=script&lang=ts&external
 var ld_toggle_buttonsvue_type_script_lang_ts_external_decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -2128,7 +2125,7 @@ ToggleButtonsComponent = ld_toggle_buttonsvue_type_script_lang_ts_external_decor
 
 
 ;
-const ld_toggle_buttons_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ld_toggle_buttonsvue_type_script_lang_ts_external, [['render',ld_toggle_buttonsvue_type_template_id_2b80b384_ts_true_render]])
+const ld_toggle_buttons_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(ld_toggle_buttonsvue_type_script_lang_ts_external, [['render',ld_toggle_buttonsvue_type_template_id_09fbefbf_ts_true_render]])
 
 /* harmony default export */ const ld_toggle_buttons = (ld_toggle_buttons_exports_);
 ;// CONCATENATED MODULE: ./src/ld-toggle-buttons/index.ts
@@ -2138,6 +2135,142 @@ function ld_toggle_buttons_reg(vue, options) {
 }
 /* harmony default export */ const src_ld_toggle_buttons = (ld_toggle_buttons_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-breadcrumbs/ld-breadcrumbs.vue?vue&type=template&id=c811912a
+
+
+const ld_breadcrumbsvue_type_template_id_c811912a_hoisted_1 = ["onClick"]
+const ld_breadcrumbsvue_type_template_id_c811912a_hoisted_2 = { key: 0 }
+
+function ld_breadcrumbsvue_type_template_id_c811912a_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ld_icon = (0,external_vue_.resolveComponent)("ld-icon")
+  const _component_square_button = (0,external_vue_.resolveComponent)("square-button")
+  const _component_v_breadcrumbs = (0,external_vue_.resolveComponent)("v-breadcrumbs")
+
+  return ((0,external_vue_.openBlock)(), (0,external_vue_.createBlock)(_component_v_breadcrumbs, {
+    divider: "/",
+    items: _ctx.items
+  }, {
+    title: (0,external_vue_.withCtx)(({ item }) => [
+      (item.text === 'home')
+        ? ((0,external_vue_.openBlock)(), (0,external_vue_.createBlock)(_component_square_button, {
+            key: 0,
+            class: "mr-2",
+            onClick: _ctx.goHome
+          }, {
+            default: (0,external_vue_.withCtx)(() => [
+              (0,external_vue_.createVNode)(_component_ld_icon, null, {
+                default: (0,external_vue_.withCtx)(() => [
+                  (0,external_vue_.createTextVNode)("home")
+                ]),
+                _: 1 /* STABLE */
+              })
+            ]),
+            _: 1 /* STABLE */
+          }, 8 /* PROPS */, ["onClick"]))
+        : ((0,external_vue_.openBlock)(), (0,external_vue_.createElementBlock)("div", {
+            key: 1,
+            onClick: $event => (_ctx.go(item))
+          }, [
+            (0,external_vue_.createElementVNode)("span", null, (0,external_vue_.toDisplayString)(item.text), 1 /* TEXT */),
+            (0,external_vue_.createTextVNode)(),
+            (item.remark)
+              ? ((0,external_vue_.openBlock)(), (0,external_vue_.createElementBlock)("span", ld_breadcrumbsvue_type_template_id_c811912a_hoisted_2, "(" + (0,external_vue_.toDisplayString)(item.remark) + ")", 1 /* TEXT */))
+              : (0,external_vue_.createCommentVNode)("v-if", true)
+          ], 8 /* PROPS */, ld_breadcrumbsvue_type_template_id_c811912a_hoisted_1))
+    ]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["items"]))
+}
+;// CONCATENATED MODULE: ./src/ld-breadcrumbs/ld-breadcrumbs.vue?vue&type=template&id=c811912a
+
+;// CONCATENATED MODULE: ./node_modules/ts-loader/index.js??clonedRuleSet-1.use[0]!./src/ld-breadcrumbs/ld-breadcrumbs.ts?vue&type=script&lang=js&external
+var ld_breadcrumbsvue_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_breadcrumbsvue_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);
+};
+var ld_breadcrumbsvue_type_script_lang_js_external_a;
+
+class BreadcrumbsComponent extends external_vue_property_decorator_.Vue {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+    }
+    onBreadcrumbsChanged() {
+        if (this.breadcrumbs && this.breadcrumbs.length) {
+            this.items = [
+                ...this.breadcrumbs.map((item, index) => {
+                    item.disabled = index === this.breadcrumbs.length - 1;
+                    return item;
+                })
+            ];
+            if (this.items[0].text !== 'home') {
+                this.items.unshift({
+                    text: 'home',
+                    route: {}
+                });
+            }
+        }
+    }
+    goHome() {
+        this.go({
+            route: this.home || { path: '/' },
+        });
+    }
+    go(item) {
+        if (!this.$router) {
+            /* eslint-disable no-console */
+            console.log('Router is undefined');
+            return;
+        }
+        if (item.route) {
+            this.$router.push(item.route);
+        }
+    }
+}
+ld_breadcrumbsvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Prop)(),
+    ld_breadcrumbsvue_type_script_lang_js_external_metadata("design:type", typeof (ld_breadcrumbsvue_type_script_lang_js_external_a = typeof Array !== "undefined" && Array) === "function" ? ld_breadcrumbsvue_type_script_lang_js_external_a : Object)
+], BreadcrumbsComponent.prototype, "breadcrumbs", void 0);
+ld_breadcrumbsvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Prop)({ default: null }),
+    ld_breadcrumbsvue_type_script_lang_js_external_metadata("design:type", Object)
+], BreadcrumbsComponent.prototype, "home", void 0);
+ld_breadcrumbsvue_type_script_lang_js_external_decorate([
+    (0,external_vue_property_decorator_.Watch)('breadcrumbs', { immediate: true }),
+    ld_breadcrumbsvue_type_script_lang_js_external_metadata("design:type", Function),
+    ld_breadcrumbsvue_type_script_lang_js_external_metadata("design:paramtypes", []),
+    ld_breadcrumbsvue_type_script_lang_js_external_metadata("design:returntype", void 0)
+], BreadcrumbsComponent.prototype, "onBreadcrumbsChanged", null);
+
+;// CONCATENATED MODULE: ./src/ld-breadcrumbs/ld-breadcrumbs.ts?vue&type=script&lang=js&external
+ 
+;// CONCATENATED MODULE: ./src/ld-breadcrumbs/ld-breadcrumbs.vue
+
+
+
+
+;
+const ld_breadcrumbs_exports_ = /*#__PURE__*/(0,exportHelper/* default */.A)(BreadcrumbsComponent, [['render',ld_breadcrumbsvue_type_template_id_c811912a_render]])
+
+/* harmony default export */ const ld_breadcrumbs = (ld_breadcrumbs_exports_);
+;// CONCATENATED MODULE: ./src/ld-breadcrumbs/index.ts
+
+function ld_breadcrumbs_reg(vue, options) {
+    ld_breadcrumbs.props = {
+        ...ld_breadcrumbs.props,
+        home: {
+            default: options?.LdBreadcrumbs?.home ? options?.LdBreadcrumbs?.home : null
+        }
+    };
+    vue.component(options?.aliases?.['ld-breadcrumbs'] ? options.aliases['ld-breadcrumbs'] : 'ld-breadcrumbs', ld_breadcrumbs);
+}
+/* harmony default export */ const src_ld_breadcrumbs = (ld_breadcrumbs_reg);
+
 ;// CONCATENATED MODULE: ./src/vuetify.ts
 const aliases = {
     SmallButton: 'VBtn',
@@ -2206,6 +2339,7 @@ const ActiveDirectiveOptions = {
 
 
 
+
 const ldmuiPlugin = {
     install(vue, options) {
         src_ld_icon(vue, options);
@@ -2213,6 +2347,7 @@ const ldmuiPlugin = {
         src_ld_button(vue, options);
         src_ld_splitter(vue, options);
         src_ld_toggle_buttons(vue, options);
+        src_ld_breadcrumbs(vue, options);
         vue.config.globalProperties.$utils = {
             isDefined: isDefined
         };

package/dist/scss/_breadcrumbs.scss

@@ -0,0 +1,48 @@
+body {
+  .v-breadcrumbs {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding: 0;
+    width: fit-content;
+
+    & li {
+      color: var(--grey) !important;
+      font-size: var(--font-size) !important;
+      overflow: hidden;
+
+
+      &.v-breadcrumbs-item {
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+        display: block !important;
+        cursor: pointer !important;
+        padding: 0;
+
+        & a {
+          color: inherit !important;
+        }
+
+        &[text="home"] {
+          & + .v-breadcrumbs-divider {
+            display: none;
+          }
+        }
+
+        &:last-child {
+          font-weight: bold !important;
+          color: var(--text) !important;
+        }
+      }
+
+      &.v-breadcrumbs-divider {
+        padding: 0 4px;
+      }
+    }
+
+    .v-breadcrumbs-item--disabled {
+      opacity: 1 !important;
+    }
+  }
+}

package/dist/scss/index.scss

@@ -2,3 +2,4 @@
 @import 'variables';
 @import 'buttons';
 @import 'chip';
+@import 'breadcrumbs';

package/dist/types/breadcrumbs.d.ts

@@ -0,0 +1,22 @@
+export interface IDictionary<TValue> {
+  [index: string]: TValue;
+}
+
+export interface IRoute {
+  path?: string;
+  name?: string;
+  hash?: string;
+  query?: IDictionary<string | Array<string>>;
+  params?: RouteParams;
+  fullPath?: string;
+  redirectedFrom?: string;
+  meta?: { transition?: symbol; state?: symbol };
+}
+
+export interface IBreadcrumbsItem {
+  text?: string;
+  remark?: string;
+  route: IRoute;
+  disabled?: boolean;
+  data?: unknown;
+}

package/dist/types/options.d.ts

@@ -5,6 +5,7 @@ export interface ldmuiOptions {
     'ld-splitter'?: string;
     'ld-loader'?: string;
     'ld-toggle-buttons'?: string;
+    'ld-breadcrumbs'?: string;
   },
   LdIcon?: {
     path: string;
@@ -16,5 +17,11 @@ export interface ldmuiOptions {
     isMobile: string;
     isTablet: string;
     isDesktop: string;
+  },
+  LdBreadcrumbs?: {
+    home: {
+      name: string;
+      path: string;
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldmjs/ui",
-  "version": "1.0.0-dev-7",
+  "version": "1.0.0-dev-8",
   "description": "ldm ui",
   "main": "dist/index.js",
   "engines": {