@ldmjs/ui 1.0.0-dev-6 → 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.d.ts

@@ -1,11 +1,11 @@
-import * as vue from 'vue';
+import { ldmuiOptions } from './types/options'
 
 declare const defaults: Record<string, unknown>;
 declare function getAliases(components: Record<string, unknown>): Record<string, unknown>;
 declare function isDefined(value: unknown): boolean;
 
 declare const ldmui: {
-  install(vue: vue.App, options?: Record<string, unknown>): void;
+  install(vue: any, options?: ldmuiOptions): void;
 }
 
 export default ldmui;

package/dist/index.js

@@ -2043,6 +2043,234 @@ 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=09fbefbf&ts=true
+
+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_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 }) => [
+                    (0,external_vue_.withDirectives)(((0,external_vue_.openBlock)(), (0,external_vue_.createBlock)(_component_square_button, (0,external_vue_.mergeProps)(props, {
+                        id: item.id,
+                        color: _ctx.modelValue === index ? 'primary' : 'grey',
+                        variant: _ctx.modelValue === index ? 'outlined' : 'text',
+                        class: { 'ml-1': index > 0 },
+                        onClick: ($event) => (_ctx.emitUpdate(index))
+                    }), {
+                        default: (0,external_vue_.withCtx)(() => [
+                            (0,external_vue_.createVNode)(_component_ld_icon, {
+                                icon: item.icon,
+                                color: _ctx.modelValue === index ? 'primary' : 'grey'
+                            }, null, 8 /* PROPS */, ["icon", "color"])
+                        ]),
+                        _: 2 /* DYNAMIC */
+                    }, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["id", "color", "variant", "class", "onClick"])), [
+                        [_directive_active, _ctx.modelValue === index]
+                    ])
+                ]),
+                default: (0,external_vue_.withCtx)(() => [
+                    (0,external_vue_.createTextVNode)(),
+                    (0,external_vue_.createElementVNode)("span", null, (0,external_vue_.toDisplayString)(item.tooltip), 1 /* TEXT */)
+                ]),
+                _: 2 /* DYNAMIC */
+            }, 1024 /* DYNAMIC_SLOTS */));
+        }), 256 /* UNKEYED_FRAGMENT */))
+    ]));
+}
+
+;// 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) {
+    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_toggle_buttonsvue_type_script_lang_ts_external_metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var _a;
+
+let ToggleButtonsComponent = class ToggleButtonsComponent extends external_vue_property_decorator_.Vue {
+    emitUpdate(value) {
+        this.$emit('update:model-value', value);
+    }
+};
+ld_toggle_buttonsvue_type_script_lang_ts_external_decorate([
+    (0,external_vue_property_decorator_.Prop)(),
+    ld_toggle_buttonsvue_type_script_lang_ts_external_metadata("design:type", Number)
+], ToggleButtonsComponent.prototype, "modelValue", void 0);
+ld_toggle_buttonsvue_type_script_lang_ts_external_decorate([
+    (0,external_vue_property_decorator_.Prop)(),
+    ld_toggle_buttonsvue_type_script_lang_ts_external_metadata("design:type", typeof (_a = typeof Array !== "undefined" && Array) === "function" ? _a : Object)
+], ToggleButtonsComponent.prototype, "items", void 0);
+ToggleButtonsComponent = ld_toggle_buttonsvue_type_script_lang_ts_external_decorate([
+    (0,external_vue_property_decorator_.Options)({
+        emits: ['update:model-value'],
+    })
+], ToggleButtonsComponent);
+/* harmony default export */ const ld_toggle_buttonsvue_type_script_lang_ts_external = (ToggleButtonsComponent);
+
+;// CONCATENATED MODULE: ./src/ld-toggle-buttons/ld-toggle-buttons.ts?vue&type=script&lang=ts&external
+ 
+;// CONCATENATED MODULE: ./src/ld-toggle-buttons/ld-toggle-buttons.vue
+
+
+
+
+;
+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
+
+function ld_toggle_buttons_reg(vue, options) {
+    vue.component(options?.aliases?.['ld-toggle-buttons'] ? options.aliases['ld-toggle-buttons'] : 'ld-toggle-buttons', ld_toggle_buttons);
+}
+/* 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',
@@ -2110,12 +2338,16 @@ const ActiveDirectiveOptions = {
 
 
 
+
+
 const ldmuiPlugin = {
     install(vue, options) {
         src_ld_icon(vue, options);
         src_ld_loader(vue, options);
         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

@@ -0,0 +1,27 @@
+export interface ldmuiOptions {
+  aliases?: {
+    'ld-button'?: string;
+    'ld-icon'?: string;
+    'ld-splitter'?: string;
+    'ld-loader'?: string;
+    'ld-toggle-buttons'?: string;
+    'ld-breadcrumbs'?: string;
+  },
+  LdIcon?: {
+    path: string;
+    map: {
+      icons: Array<[string, string]>;
+    }
+  },
+  LdBtn?: {
+    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-6",
+  "version": "1.0.0-dev-8",
   "description": "ldm ui",
   "main": "dist/index.js",
   "engines": {
@@ -29,11 +29,6 @@
   "files": [
     "dist/"
   ],
-  "dependencies": {
-    "lodash-es": "4.17.21",
-    "vue": "3.4.21",
-    "vuetify": "3.5.9"
-  },
   "devDependencies": {
     "@types/eslint": "^8",
     "@types/lodash-es": "^4",
@@ -43,6 +38,7 @@
     "css-loader": "6.8.1",
     "eslint": "8.56.0",
     "html-webpack-plugin": "5.6.0",
+    "lodash-es": "4.17.21",
     "material-design-icons-iconfont": "^6.7.0",
     "node-sass": "9.0.0",
     "postcss-loader": "7.3.3",
@@ -52,10 +48,12 @@
     "terser-webpack-plugin": "5.3.10",
     "ts-loader": "9.5.1",
     "typescript": "4.9.5",
+    "vue": "3.4.21",
     "vue-class-component": "8.0.0-rc.1",
     "vue-eslint-parser": "9.4.2",
     "vue-loader": "17.3.1",
     "vue-property-decorator": "10.0.0-rc.3",
+    "vuetify": "3.5.9",
     "webpack": "5.90.2",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",