@zeedhi/teknisa-components-vuetify 1.114.0 → 3.0.0

package/.package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@zeedhi/teknisa-components-vuetify",
+  "version": "3.0.0",
+  "description": "Teknisa Components based on Vuetify",
+  "author": "Zeedhi <zeedhi@teknisa.com>",
+  "license": "ISC",
+  "main": "src/index.ts",
+  "module": "dist/teknisa-vuetify.js",
+  "typings": "types/index.d.ts",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rollup -c && npm run build:scss",
+    "build:scss": "rollup -c rollup.scss.config.js",
+    "docs": "typedoc --out docs src/",
+    "lint": "eslint . --ext .ts --fix",
+    "watch": "rollup -cw"
+  },
+  "dependencies": {
+    "lodash.clonedeep": "4.5.*",
+    "lodash.debounce": "4.0.*",
+    "lodash.merge": "4.6.*",
+    "sortablejs": "1.15.*",
+    "@zeedhi/vuetify": "^3.0.0",
+    "@zeedhi/teknisa-components-common": "^3.0.0",
+    "@zeedhi/zd-user-info-common": "^3.0.0",
+    "@zeedhi/zd-user-info-vue": "^3.0.0",
+    "vue": "^3.0.0",
+    "vuetify": "~3.9.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-typescript": "^11.1.1",
+    "rollup-plugin-vue": "^6.0.0",
+    "@types/jest": "26.0.*",
+    "@types/lodash.clonedeep": "4.5.*",
+    "@types/lodash.debounce": "4.0.*",
+    "@types/lodash.merge": "4.6.*",
+    "@types/sortablejs": "1.15.*",
+    "ts-jest": "26.5.*"
+  },
+  "gitHead": "072b436661242806245a2e5906466b1e800760bd"
+}

package/dist/teknisa-vuetify.css

@@ -0,0 +1 @@
+.tek-breadcrumb-header .v-breadcrumbs-item{padding:0}.tek-breadcrumb-header .tek-breadcrumb-header-title-col{display:flex;padding-top:5px;padding-left:0}.tek-breadcrumb-header .tek-breadcrumb-header-title-col .tek-breadcrumb-header-slot-right{margin-left:auto}.tek-breadcrumb-header .zd-breadcrumbs{padding:0;font-size:var(--zd-font-body2-size)}.tek-breadcrumb-header .zd-breadcrumbs .v-breadcrumbs__item--disabled{color:#667080}.tek-breadcrumb-header .zd-text{color:#667080}.tek-breadcrumb-header .zd-text.tek-breadcrumb-header-title{font-size:32px;font-weight:bold;line-height:35px;margin-bottom:10px}.tek-breadcrumb-header .zd-text>p{margin:0}

package/dist/teknisa-vuetify.js

@@ -0,0 +1,119 @@
+import { Icons } from '@zeedhi/common';
+import ZdUserInfoComponent from '@zeedhi/zd-user-info-vue';
+import { BreadcrumbHeader } from '@zeedhi/teknisa-components-common';
+import { defineComponent, resolveComponent, openBlock, createElementBlock, createVNode, mergeProps, withCtx, normalizeProps, guardReactiveProps, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, createCommentVNode, renderSlot } from 'vue';
+import { ZdComponentRenderProps, useCreateInstance } from '@zeedhi/vuetify';
+
+const TekBreadcrumbHeaderProps$1 = Object.assign(Object.assign({}, ZdComponentRenderProps), { title: {
+        type: String,
+        default: '',
+    }, breadcrumb: {
+        type: Object,
+        default: {},
+    }, rightSlot: {
+        type: Array,
+        default: () => [],
+    } });
+const breadcrumbHeaderComponent$1 = defineComponent({
+    props: TekBreadcrumbHeaderProps$1,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, BreadcrumbHeader);
+        return {
+            instance,
+            root,
+        };
+    },
+});
+
+const _hoisted_1 = ["id"];
+const _hoisted_2 = { class: "tek-breadcrumb-header-slot-right" };
+const _hoisted_3 = { key: 0 };
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_zd_breadcrumbs = resolveComponent("zd-breadcrumbs");
+  const _component_zd_text = resolveComponent("zd-text");
+  const _component_v_col = resolveComponent("v-col");
+
+  return (openBlock(), createElementBlock("div", {
+    id: _ctx.instance.name,
+    class: "tek-breadcrumb-header"
+  }, [
+    createVNode(_component_zd_breadcrumbs, mergeProps(_ctx.instance.breadcrumb, {
+      theme: _ctx.instance.theme
+    }), null, 16 /* FULL_PROPS */, ["theme"]),
+    createVNode(_component_v_col, {
+      class: "tek-breadcrumb-header-title-col",
+      cols: "12"
+    }, {
+      default: withCtx(() => [
+        createVNode(_component_zd_text, normalizeProps(guardReactiveProps({
+          name: `${_ctx.instance.name}-title`,
+          cssClass: 'tek-breadcrumb-header-title',
+          text: _ctx.$t(_ctx.instance.title),
+        })), null, 16 /* FULL_PROPS */),
+        createElementVNode("span", _hoisted_2, [
+          (_ctx.instance.rightSlot.length)
+            ? (openBlock(), createElementBlock("span", _hoisted_3, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.instance.rightSlot, (child, index) => {
+                  return (openBlock(), createBlock(resolveDynamicComponent(child.component), mergeProps({ ref_for: true }, child, { key: index }), null, 16 /* FULL_PROPS */))
+                }), 128 /* KEYED_FRAGMENT */))
+              ]))
+            : createCommentVNode("v-if", true),
+          renderSlot(_ctx.$slots, "rightSlot")
+        ])
+      ]),
+      _: 3 /* FORWARDED */
+    })
+  ], 8 /* PROPS */, _hoisted_1))
+}
+
+breadcrumbHeaderComponent$1.render = render;
+breadcrumbHeaderComponent$1.__file = "src/components/tek-breadcrumb-header/TekBreadcrumbHeader.vue";
+
+const TekBreadcrumbHeaderProps = Object.assign(Object.assign({}, ZdComponentRenderProps), { title: {
+        type: String,
+        default: '',
+    }, breadcrumb: {
+        type: Object,
+        default: {},
+    }, rightSlot: {
+        type: Array,
+        default: () => [],
+    } });
+const breadcrumbHeaderComponent = defineComponent({
+    props: TekBreadcrumbHeaderProps,
+    inheritAttrs: false,
+    setup(props, ctx) {
+        const { instance, root } = useCreateInstance(props, ctx, BreadcrumbHeader);
+        return {
+            instance,
+            root,
+        };
+    },
+});
+
+const components = {
+    TekBreadcrumbHeader: breadcrumbHeaderComponent$1,
+};
+
+Icons.addIcons({
+    add: 'mdi-plus-box',
+    delete: 'mdi-trash-can-outline',
+    refresh: 'mdi-refresh',
+    more: 'mdi-dots-vertical',
+    filter: 'mdi-filter',
+    confirmLayout: 'mdi-check',
+    updateLayout: 'mdi-square-edit-outline',
+    layout: 'mdi-table-star',
+});
+const TeknisaComponents = {
+    install(app) {
+        Object.keys(components).forEach((id) => {
+            app.component(id, components[id]);
+        });
+        app.component('ZdUserInfo', ZdUserInfoComponent);
+    },
+};
+
+export { breadcrumbHeaderComponent as TekBreadcrumbHeader, TeknisaComponents as default };

package/environments.json

@@ -0,0 +1,16 @@
+{
+  "development": {
+    "dependencies": {
+      "@zeedhi/vuetify": "file:../../../zeedhi-vue/packages/vuetify",
+      "@zeedhi/zd-user-info-common": "file:../../../userinfo/packages/common",
+      "@zeedhi/zd-user-info-vue": "file:../../../userinfo/packages/vue"
+    }
+  },
+  "production": {
+    "dependencies": {
+      "@zeedhi/vuetify": "^3.0.0",
+      "@zeedhi/zd-user-info-common": "^3.0.0",
+      "@zeedhi/zd-user-info-vue": "^3.0.0"
+    }
+  }
+}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@zeedhi/teknisa-components-vuetify",
-  "version": "1.114.0",
+  "version": "3.0.0",
   "description": "Teknisa Components based on Vuetify",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
-  "main": "dist/tek-components-vuetify.umd.js",
-  "module": "dist/tek-components-vuetify.esm.js",
+  "main": "src/index.ts",
+  "module": "dist/teknisa-vuetify.js",
   "typings": "types/index.d.ts",
+  "type": "module",
   "publishConfig": {
     "access": "public"
   },
@@ -18,31 +19,31 @@
     "watch": "rollup -cw"
   },
   "dependencies": {
-    "@zeedhi/zd-drag-grid-common": "<=1.0.6",
-    "@zeedhi/zd-drag-grid-vue": "<=1.0.6",
-    "@zeedhi/zd-user-info-common": "^1.3.2",
-    "@zeedhi/zd-user-info-vue": "^1.3.2",
+    "@zeedhi/teknisa-components-common": "^3.0.0",
+    "@zeedhi/vuetify": "^3.0.0",
+    "@zeedhi/zd-user-info-common": "^3.0.0",
+    "@zeedhi/zd-user-info-vue": "^3.0.0",
     "lodash.clonedeep": "4.5.*",
     "lodash.debounce": "4.0.*",
     "lodash.merge": "4.6.*",
     "sortablejs": "1.15.*",
-    "vue-class-component": "7.2.*",
-    "vue-property-decorator": "9.1.*",
-    "vuedraggable": "^2.24.3"
+    "vue": "^3.0.0",
+    "vuetify": "~3.9.0"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-typescript": "^11.1.1",
     "@types/jest": "26.0.*",
     "@types/lodash.clonedeep": "4.5.*",
     "@types/lodash.debounce": "4.0.*",
     "@types/lodash.merge": "4.6.*",
     "@types/sortablejs": "1.15.*",
-    "@vue/test-utils": "1.3.*",
+    "rollup-plugin-vue": "^6.0.0",
     "ts-jest": "26.5.*"
   },
-  "peerDependencies": {
-    "@zeedhi/teknisa-components-common": "^1.97.0",
-    "vue": "2.7.*",
-    "vuetify": "2.6.*"
-  },
-  "gitHead": "e17c5b68aa70bce1f5114e0094289b29343d9288"
+  "gitHead": "8f96c641dd2a27edfd63eadf165843c9499d32b0",
+  "env": {
+    "NODE_ENV": "production"
+  }
 }

package/src/components/index.ts

@@ -0,0 +1,16 @@
+import type { App, DefineComponent } from 'vue';
+import type { IDictionary } from '@zeedhi/core';
+
+import TekBreadcrumbHeader from './tek-breadcrumb-header/TekBreadcrumbHeader.vue';
+
+export * from './tek-breadcrumb-header/TekBreadcrumbHeader';
+
+export const components: IDictionary<DefineComponent<any, any, any>> = {
+  TekBreadcrumbHeader,
+};
+
+export function RegisterComponents(app: App) {
+	for (const name in components) {
+		app.component(name, components[name]);
+	}
+}

package/src/components/public.ts

@@ -0,0 +1,45 @@
+import TekBreadcrumbHeader from './tek-breadcrumb-header/TekBreadcrumbHeader';
+// import TekCardTitle from './tek-card-title/TekCardTitle';
+// import TekCrudAddButton from './crud/TekCrudAddButton';
+// import TekCrudCancelButton from './crud/TekCrudCancelButton';
+// import TekCrudDeleteButton from './crud/TekCrudDeleteButton';
+// import TekCrudForm from './crud/TekCrudForm';
+// import TekCrudSaveButton from './crud/TekCrudSaveButton';
+// import TekGrid from './tek-grid/TekGrid';
+// import TekGridCellIdentation from './tek-grid/subcomponents/TekGridCellIdentation';
+// import TekGridHeaderIndentation from './tek-grid/subcomponents/TekGridHeaderIndentation';
+// import TekGridColumnFilter from './tek-grid/subcomponents/TekGridColumnFilter';
+// import TekDragGrid from './tek-drag-grid/TekDragGrid';
+// import TekGridColumnsButton from './tek-grid/TekGridColumnsButton';
+// import TekGridFilterButton from './tek-grid/TekGridFilterButton';
+// import TekGridLayoutOptions from './tek-grid/TekGridLayoutOptions';
+// import TekImage from './tek-image/TekImage';
+// import TekIterableComponentRender from './tek-iterable-component-render/TekIterableComponentRender';
+// import TekProductCard from './tek-product-card/TekProductCard';
+// import TekTreeGrid from './tek-tree-grid/TekTreeGrid';
+// import TekUserInfo from './tek-user-info/TekUserInfo';
+// import TekUserInfoList from './tek-user-info/TekUserInfoList';
+
+export {
+  TekBreadcrumbHeader,
+  // TekCardTitle,
+  // TekCrudAddButton,
+  // TekCrudCancelButton,
+  // TekCrudDeleteButton,
+  // TekCrudForm,
+  // TekCrudSaveButton,
+  // TekGrid,
+  // TekGridCellIdentation,
+  // TekGridHeaderIndentation,
+  // TekGridColumnFilter,
+  // TekDragGrid,
+  // TekGridColumnsButton,
+  // TekGridFilterButton,
+  // TekGridLayoutOptions,
+  // TekImage,
+  // TekProductCard,
+  // TekIterableComponentRender,
+  // TekTreeGrid,
+  // TekUserInfo,
+  // TekUserInfoList,
+};

package/src/components/tek-breadcrumb-header/TekBreadcrumbHeader.ts

@@ -0,0 +1,34 @@
+import { BreadcrumbHeader } from '@zeedhi/teknisa-components-common';
+import { defineComponent } from 'vue';
+import { useCreateInstance, ZdComponentRenderProps } from '@zeedhi/vuetify';
+
+export const TekBreadcrumbHeaderProps = {
+	...ZdComponentRenderProps,
+	title: {
+		type: String,
+		default: '',
+	},
+	breadcrumb: {
+		type: Object,
+		default: {},
+	},
+	rightSlot: {
+		type: Array,
+		default: () => [],
+	},
+};
+
+const breadcrumbHeaderComponent = defineComponent({
+	props: TekBreadcrumbHeaderProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<BreadcrumbHeader>(props, ctx, BreadcrumbHeader);
+
+		return {
+			instance,
+			root,
+		};
+	},
+});
+
+export default breadcrumbHeaderComponent;

package/src/components/tek-breadcrumb-header/TekBreadcrumbHeader.vue

@@ -0,0 +1,75 @@
+<template>
+  <div
+    :id="instance.name"
+    class="tek-breadcrumb-header">
+    <zd-breadcrumbs
+      v-bind="instance.breadcrumb"
+      :theme="instance.theme"
+    />
+    <v-col class="tek-breadcrumb-header-title-col" cols="12">
+      <zd-text
+        v-bind="{
+          name: `${instance.name}-title`,
+          cssClass: 'tek-breadcrumb-header-title',
+          text: $t(instance.title),
+        }"
+      />
+      <span class="tek-breadcrumb-header-slot-right" >
+        <span v-if="instance.rightSlot.length">
+          <component
+            v-for="(child, index) in instance.rightSlot"
+            v-bind="child"
+            :is="child.component"
+            :key="index"
+            >
+          </component>
+        </span>
+        <slot name="rightSlot"></slot>
+      </span>
+    </v-col>
+  </div>
+</template>
+
+<script lang="ts" src="./TekBreadcrumbHeader.ts"></script>
+
+<style lang="scss">
+.tek-breadcrumb-header {
+  .v-breadcrumbs-item {
+    padding: 0;
+  }
+
+  .tek-breadcrumb-header-title-col {
+    display: flex;
+    padding-top: 5px;
+    padding-left: 0;
+
+    .tek-breadcrumb-header-slot-right {
+      margin-left: auto;
+    }
+  }
+
+  .zd-breadcrumbs {
+    padding: 0;
+    font-size: var(--zd-font-body2-size);
+
+    .v-breadcrumbs__item--disabled {
+      color: #667080;
+    }
+  }
+
+  .zd-text {
+    color: #667080;
+
+    &.tek-breadcrumb-header-title {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 35px;
+      margin-bottom: 10px;
+    }
+
+    > p {
+      margin: 0;
+    }
+  }
+}
+</style>

package/src/index.ts

@@ -0,0 +1,29 @@
+/* eslint-disable max-len */
+import type { App } from 'vue';
+import { Icons } from '@zeedhi/common';
+import ZdUserInfoComponent from '@zeedhi/zd-user-info-vue';
+import { components } from './components';
+
+Icons.addIcons({
+  add: 'mdi-plus-box',
+  delete: 'mdi-trash-can-outline',
+  refresh: 'mdi-refresh',
+  more: 'mdi-dots-vertical',
+  filter: 'mdi-filter',
+  confirmLayout: 'mdi-check',
+  updateLayout: 'mdi-square-edit-outline',
+  layout: 'mdi-table-star',
+});
+
+const TeknisaComponents = {
+  install(app: App): void {
+    Object.keys(components).forEach((id) => {
+      app.component(id, components[id]);
+    });
+
+    app.component('ZdUserInfo', ZdUserInfoComponent);
+  },
+};
+
+export default TeknisaComponents;
+export * from './components/public';

package/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+
+	const component: DefineComponent<object, object, any>;
+	export default component;
+}

package/types/components/index.d.ts

@@ -1,3 +1,5 @@
-import { VueConstructor } from 'vue';
-import { IDictionary } from '@zeedhi/core';
-export declare const components: IDictionary<VueConstructor>;
+import type { App, DefineComponent } from 'vue';
+import type { IDictionary } from '@zeedhi/core';
+export * from './tek-breadcrumb-header/TekBreadcrumbHeader';
+export declare const components: IDictionary<DefineComponent<any, any, any>>;
+export declare function RegisterComponents(app: App): void;

package/types/components/public.d.ts

@@ -1,22 +1,2 @@
 import TekBreadcrumbHeader from './tek-breadcrumb-header/TekBreadcrumbHeader';
-import TekCardTitle from './tek-card-title/TekCardTitle';
-import TekCrudAddButton from './crud/TekCrudAddButton';
-import TekCrudCancelButton from './crud/TekCrudCancelButton';
-import TekCrudDeleteButton from './crud/TekCrudDeleteButton';
-import TekCrudForm from './crud/TekCrudForm';
-import TekCrudSaveButton from './crud/TekCrudSaveButton';
-import TekGrid from './tek-grid/TekGrid';
-import TekGridCellIdentation from './tek-grid/subcomponents/TekGridCellIdentation';
-import TekGridHeaderIndentation from './tek-grid/subcomponents/TekGridHeaderIndentation';
-import TekGridColumnFilter from './tek-grid/subcomponents/TekGridColumnFilter';
-import TekDragGrid from './tek-drag-grid/TekDragGrid';
-import TekGridColumnsButton from './tek-grid/TekGridColumnsButton';
-import TekGridFilterButton from './tek-grid/TekGridFilterButton';
-import TekGridLayoutOptions from './tek-grid/TekGridLayoutOptions';
-import TekImage from './tek-image/TekImage';
-import TekIterableComponentRender from './tek-iterable-component-render/TekIterableComponentRender';
-import TekProductCard from './tek-product-card/TekProductCard';
-import TekTreeGrid from './tek-tree-grid/TekTreeGrid';
-import TekUserInfo from './tek-user-info/TekUserInfo';
-import TekUserInfoList from './tek-user-info/TekUserInfoList';
-export { TekBreadcrumbHeader, TekCardTitle, TekCrudAddButton, TekCrudCancelButton, TekCrudDeleteButton, TekCrudForm, TekCrudSaveButton, TekGrid, TekGridCellIdentation, TekGridHeaderIndentation, TekGridColumnFilter, TekDragGrid, TekGridColumnsButton, TekGridFilterButton, TekGridLayoutOptions, TekImage, TekProductCard, TekIterableComponentRender, TekTreeGrid, TekUserInfo, TekUserInfoList, };
+export { TekBreadcrumbHeader, };