@zeedhi/vuetify 1.112.0 → 3.0.1

package/src/styles/_zd-input.scss

@@ -0,0 +1,206 @@
+.zd-input {
+  &:focus-within{
+    .v-icon{
+      color: var(--input-color);
+      opacity: 1;
+    }
+
+    .v-field {
+      border-color: var(--input-color);
+    }
+
+    label {
+      color: var(--input-color);
+    }
+  }
+
+  .v-field {
+    border: solid var(--regular) #bdbdbd;
+    border-radius: var(--border) !important;
+    margin-bottom: 2px;
+    height: auto;
+    box-shadow: unset;
+
+    .v-field__clearable {
+      .v-icon {
+        font-size: var(--icon-size-small);
+      }
+    }
+  }
+
+  &.v-input {
+    .v-input__control {
+      >.v-field {
+        .v-select__slot {
+          height: 100%;
+        }
+
+        input,
+        .v-select__selection {
+          padding: 9px 7px 10px 7px;
+          line-height: 15px;
+          max-height: none;
+          min-height: unset;
+        }
+
+        &:before,
+        &:after {
+          content: none;
+        }
+
+        label {
+          visibility: unset;
+          top: calc(-10px - var(--spacing-2));
+          max-width: 100%;
+          transform: none;
+          font-size: var(--zd-font-body1-size);
+          left: 0 !important;
+          line-height: 15px;
+          height: auto;
+          font-weight: var(--zd-font-body1-weight);
+          margin-inline-start: 0px;
+        }
+
+        input,
+        textarea {
+          font-size: var(--zd-font-body1-size);
+          font-weight: var(--zd-font-body1-weight);
+          color: var(--zd-font-color);
+          cursor: text;
+        }
+
+        .v-field__clearable {
+          .v-icon {
+            opacity: 0;
+          }
+        }
+
+        .v-field__field label:nth-child(2){
+          display: none;
+        }
+      }
+    }
+
+    >.v-input__details {
+      min-height: 13px;
+
+      >.v-messages {
+        font-size: 11px;
+        min-height: 13px;
+      }
+    }
+
+
+    &--is-disabled {
+      >.v-input__control {
+        >.v-field {
+          border: solid var(--regular) #ddd;
+
+          label,
+          input {
+            opacity: 0.5;
+          }
+        }
+      }
+    }
+
+    &.zd-no-label {
+      padding-top: 0;
+      margin: 0;
+    }
+
+    &.zd-no-border {
+      >.v-input__control {
+        >.v-field {
+          border: none;
+        }
+      }
+    }
+
+    &.zd-no-helper {
+      >.v-input__control {
+        >.v-field {
+          margin-bottom: 0;
+        }
+
+      }
+
+      >.v-input__details {
+        display: none;
+      }
+    }
+
+    &.zd-dense {
+      >.v-input__control {
+        >.v-field {
+          height: auto;
+
+          input,
+          .v-select__selection {
+            padding: 3px 7px 4px 7px;
+            line-height: 15px;
+          }
+        }
+      }
+
+      >.v-input__details {
+        min-height: 11px;
+
+        .v-messages {
+          min-height: 11px;
+
+          .v-messages__message {
+            line-height: 1;
+          }
+        }
+      }
+
+      .v-field {
+
+        &__prepend-outer,
+        &__append-outer {
+          margin-top: 0;
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    &:hover,
+    &.v-input--is-focused {
+      >.v-input__control {
+        >.v-field {
+          .v-field__clearable {
+            .v-icon {
+              opacity: 1;
+            }
+          }
+        }
+      }
+
+      .v-field {
+        &__prepend-outer {
+          margin-right: var(--spacing-1);
+        }
+
+        &__append-outer {
+          margin-left: var(--spacing-1);
+        }
+      }
+    }
+  }
+
+  &.error--text {
+    &.v-input {
+      >.v-input__control {
+        >.v-field {
+          border: solid var(--regular) var(--v-error-base);
+        }
+      }
+    }
+  }
+}
+
+/* Class to make inputs without label be correctly align inside forms with inputs */
+.zd-form-input-align {
+  margin-top: var(--spacing-5) !important;
+}

package/src/styles/index.scss

@@ -0,0 +1,37 @@
+@import 'moon-design-system';
+@import 'zd-input';
+
+* {
+  letter-spacing: unset !important;
+  outline-color: var(--v-primary-base);
+  scrollbar-width: thin;
+}
+
+main.v-main {
+  transition: none;
+  height: 100vh;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--zd-scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--zd-scrollbar-thumb);
+  border-radius: 5px;
+}
+
+:root {
+  --v-primary-base: rgb(var(--v-theme-primary));
+  --v-error-base: rgb(var(--v-theme-error));
+  --v-warning-base: rgb(var(--v-theme-warning));
+  --v-info-base: rgb(var(--v-theme-info));
+  --v-success-base: rgb(var(--v-theme-success));
+  --v-anchor-base: rgb(var(--v-theme-anchor));
+  --zd-font-color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+}

package/src/styles/moon-design-system.css

@@ -0,0 +1,31 @@
+:root {
+  --regular:1px;
+  --thick:2px;
+  --dashed:1px;
+  --font-family:Roboto;
+  --border:4px;
+  --border-tile:0px;
+  --border-circle:100000000px;
+  --shadow-1:0px 1px 3px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.12), 0px 0px 2px rgba(0, 0, 0, 0.14);
+  --shadow-2:0px 1px 5px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
+  --shadow-3:0px 1px 8px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 3px 3px rgba(0, 0, 0, 0.14);
+  --shadow-4:0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
+  --shadow-5:0px 3px 5px rgba(0, 0, 0, 0.2), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 6px 10px rgba(0, 0, 0, 0.14);
+  --shadow-6:0px 4px 5px rgba(0, 0, 0, 0.2), 0px 3px 14px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.14);
+  --shadow-7:0px 5px 6px rgba(0, 0, 0, 0.2), 0px 3px 16px rgba(0, 0, 0, 0.12), 0px 9px 12px rgba(0, 0, 0, 0.14);
+  --shadow-8:0px 7px 8px rgba(0, 0, 0, 0.2), 0px 5px 22px rgba(0, 0, 0, 0.12), 0px 12px 17px rgba(0, 0, 0, 0.14);
+  --shadow-9:0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14);
+  --shadow-10:0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14);
+  --icon-size-small:1rem;
+  --icon-size:1.5rem;
+  --icon-size-large:2rem;
+  --spacing-1:0.25rem;
+  --spacing-2:0.5rem;
+  --spacing-3:0.75rem;
+  --spacing-4:1rem;
+  --spacing-5:1.25rem;
+  --spacing-6:2rem;
+  --spacing-7:2.5rem;
+  --spacing-8:3.75rem;
+  --spacing-9:4.5rem;
+}

package/src/utils/buildProps.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsOptions } from 'vue';
+
+export function buildProps<T extends ComponentPropsOptions>(props: T) {
+	return props;
+}

package/src/utils/fillHeight.ts

@@ -0,0 +1,17 @@
+export function setFillHeight(element: HTMLElement) {
+	const parent = element.parentElement;
+	if (parent) {
+		parent.style.display = 'flex';
+		parent.style.flexFlow = 'column';
+		// TODO: re-factory this forEach for better performance
+		Array.from(parent.children).forEach((child) => {
+			const childElement = child as HTMLElement;
+			if (childElement === element) {
+				(childElement as HTMLElement).style.flex = '1 1 0';
+				(childElement as HTMLElement).style.overflowY = 'auto';
+			} else {
+				(childElement as HTMLElement).style.flex = '0 0 auto';
+			}
+		});
+	}
+}

package/src/utils/icons/icons.ts

@@ -0,0 +1,36 @@
+import { IDictionary } from '@zeedhi/core';
+import { defineComponent } from 'vue';
+
+export class IconRenderer {
+	private static icons: IDictionary<string> = {};
+
+	private static getIconHtml(iconName: string, vuetify: any) {
+		const IconRender = {
+			props: ['iconName'],
+			template: '<v-icon>{{ $getIcon(iconName) }}</v-icon>',
+		};
+
+		// create component constructor
+		const IconRenderCtor = defineComponent({
+			extends: IconRender,
+			// Component options...
+		});
+
+		const instance = new IconRenderCtor({
+			vuetify,
+			propsData: {
+				iconName,
+			},
+		});
+
+		return instance.$el.outerHTML;
+	}
+
+	public static getIcon(iconName: string, vuetify: any) {
+		if (!IconRenderer.icons[iconName]) {
+			IconRenderer.icons[iconName] = IconRenderer.getIconHtml(iconName, vuetify);
+		}
+
+		return IconRenderer.icons[iconName];
+	}
+}

package/src/utils/index.ts

@@ -0,0 +1,7 @@
+export * from './icons/icons';
+export * from './logger/logger';
+export * from './plugins';
+export * from './fillHeight';
+export * from './mergeDictionaries';
+export * from './isArrayOperation';
+export * from './buildProps';

package/src/utils/isArrayOperation.ts

@@ -0,0 +1,5 @@
+const isArrayOperation = (operation: string) => {
+	return ['IN', 'NOT_IN', 'BETWEEN'].includes(operation);
+};
+
+export { isArrayOperation };

package/src/utils/logger/logger.ts

@@ -0,0 +1,7 @@
+export class Logger {
+	static warn(...args: any[]) {
+		if (process.env.NODE_ENV === 'development') {
+			console.warn('[Zeedhi Vue warn]:', ...args);
+		}
+	}
+}

package/src/utils/mergeDictionaries.ts

@@ -0,0 +1,27 @@
+type Result = Record<string, any[]>;
+
+const mergeDictionaries = (dictArray: Record<string, any[]>[]): Result => {
+	const result: Result = {};
+
+	dictArray.forEach((dict) => {
+		for (const key in dict) {
+			if (Object.prototype.hasOwnProperty.call(dict, key)) {
+				// Initialize array if key doesn't exist
+				if (!result[key]) {
+					result[key] = [];
+				}
+
+				// Add the value(s) to the array
+				if (Array.isArray(dict[key])) {
+					result[key].push(...dict[key]);
+				} else {
+					result[key].push(dict[key]);
+				}
+			}
+		}
+	});
+
+	return result;
+};
+
+export { mergeDictionaries };

package/src/utils/plugins/formatSizePlugin.ts

@@ -0,0 +1,6 @@
+export default function formatSizePlugin(value: string | number) {
+	if (!Number.isNaN(Number(value))) {
+		return `${value}px`;
+	}
+	return value;
+}

package/src/utils/plugins/getIconPlugin.ts

@@ -0,0 +1,12 @@
+import { Icons } from '@zeedhi/common';
+import camelcase from 'lodash.camelcase';
+import kebabcase from 'lodash.kebabcase';
+
+export default function getIconPlugin(name?: string) {
+	if (!name) return '';
+
+	const camelizedName = camelcase(name);
+	const kebabName = kebabcase(name);
+	const icons = Icons.getIcons();
+	return icons[kebabName] || icons[camelizedName] || name;
+}

package/src/utils/plugins/index.ts

@@ -0,0 +1,5 @@
+import formatSizePlugin from './formatSizePlugin';
+import getIconPlugin from './getIconPlugin';
+import styleObjectPlugin from './styleObjectPlugin';
+
+export { formatSizePlugin, getIconPlugin, styleObjectPlugin };

package/src/utils/plugins/plugins.d.ts

@@ -0,0 +1,12 @@
+import { ComponentCustomProperties } from 'vue';
+import formatSizePlugin from './formatSizePlugin';
+import getIconPlugin from './getIconPlugin';
+import styleObjectPlugin from './styleObjectPlugin';
+
+declare module '@vue/runtime-core' {
+	interface ComponentCustomProperties {
+		$getIcon: typeof getIconPlugin;
+		$formatSize: typeof formatSizePlugin;
+		$styleObject: typeof styleObjectPlugin;
+	}
+}

package/src/utils/plugins/styleObjectPlugin.ts

@@ -0,0 +1,13 @@
+export default function styleObjectPlugin(style: any) {
+	if (!style || typeof style !== 'string') return style;
+
+	const objectStyle: any = {};
+	const attributes = style.split(';');
+	for (let i = 0; i < attributes.length; i += 1) {
+		if (attributes[i]) {
+			const entry = attributes[i].split(':');
+			objectStyle[entry.splice(0, 1)[0].trim()] = entry.join(':').trim();
+		}
+	}
+	return objectStyle;
+}

package/types/components/index.d.ts

@@ -1,3 +1,88 @@
-import { VueConstructor } from 'vue';
 import { IDictionary } from '@zeedhi/core';
-export declare const components: IDictionary<VueConstructor>;
+import { App, DefineComponent } from 'vue';
+export * from './zd-component/ZdComponent';
+export * from './zd-component/ZdComponentRender';
+export * from './zd-chip/ZdChip';
+export * from './zd-alert/ZdAlert';
+export * from './zd-activator-wrapper/ZdActivatorWrapper';
+export * from './zd-breadcrumbs/ZdBreadcrumbs';
+export * from './zd-badge/ZdBadge';
+export * from './zd-button/ZdButton';
+export * from './zd-button-group/ZdButtonGroup';
+export * from './zd-card/ZdCard';
+export * from './zd-carousel/ZdCarousel';
+export * from './zd-checkbox/ZdCheckbox';
+export * from './zd-code-viewer/ZdCodeViewer';
+export * from './zd-col/ZdCol';
+export * from './zd-container/ZdContainer';
+export * from './zd-date-input/ZdDateInput';
+export * from './zd-divider/ZdDivider';
+export * from './zd-form/ZdForm';
+export * from './zd-footer/ZdFooter';
+export * from './zd-frame-page/ZdFramePage';
+export * from './zd-frame/ZdFrame';
+export * from './zd-header/ZdHeader';
+export * from './zd-icon/ZdIcon';
+export * from './zd-image/ZdImage';
+export * from './zd-iterable/ZdIterable';
+export * from './zd-layout/ZdLayout';
+export * from './zd-main/ZdMain';
+export * from './zd-menu/ZdMenu';
+export * from './zd-menu/ZdMenuButton';
+export * from './zd-menu/ZdMenuGroup';
+export * from './zd-menu/ZdMenuLink';
+export * from './zd-menu/ZdMenuSeparator';
+export * from './zd-radio/ZdRadio';
+export * from './zd-row/ZdRow';
+export * from './zd-table/ZdTable';
+export * from './zd-tabs/ZdTab';
+export * from './zd-tabs/ZdTabItem';
+export * from './zd-tabs/ZdTabs';
+export * from './zd-tag/ZdTag';
+export * from './zd-text/ZdText';
+export * from './zd-input/ZdInput';
+export * from './zd-text-input/ZdTextInput';
+export * from './zd-loading/ZdLoading';
+export * from './zd-login/ZdLogin';
+export * from './zd-login/ZdLoginButton';
+export * from './zd-switch/ZdSwitch';
+export * from './zd-textarea/ZdTextarea';
+export * from './zd-tooltip/ZdTooltip';
+export * from './zd-dropdown/ZdDropdown';
+export * from './zd-select/ZdSelect';
+export * from './zd-select-multiple/ZdSelectMultiple';
+export * from './zd-dialog/ZdDialog';
+export * from './zd-password/ZdPassword';
+export * from './zd-modal/ZdModal';
+export * from './zd-modal/ZdModalCloseButton';
+export * from './zd-number-input/ZdNumberInput';
+export * from './zd-list/ZdList';
+export * from './zd-list/ZdListItem';
+export * from './zd-grid/ZdGrid';
+export * from './zd-collapse-card/ZdCollapseCard';
+export * from './zd-grid-editable/ZdGridEditable';
+export * from './zd-iterable/zd-iterable-columns-button/ZdIterableColumnsButton';
+export * from './tek-grid/TekGrid';
+export * from './tek-grid/columns-button/TekGridColumnsButton';
+export * from './tek-grid/filter-button/TekGridFilterButton';
+export * from './tek-grid/layout-options/TekGridLayoutOptions';
+export * from './tek-grid/column-header/TekGridHeaderRow';
+export * from './tek-grid/column-filter/TekGridColumnFilter';
+export * from './tek-grid/row/TekGridGroupRow';
+export * from './tek-grid/indentation/TekGridIndentation';
+export * from './tek-grid/row/TekGridFooterRow';
+export * from './zd-progress/ZdProgress';
+export * from './zd-svg-map/ZdSvgMap';
+export * from './zd-checkbox-multiple/ZdCheckboxMultiple';
+export * from './zd-master-detail/ZdMasterDetail';
+export * from './zd-currency/ZdCurrency';
+export * from './zd-time/ZdTime';
+export * from './zd-month/ZdMonth';
+export * from './zd-tree/ZdTree';
+export * from './zd-tree/ZdTreeCheckbox';
+export * from './zd-tree/ZdTreeAfterTitle';
+export * from './zd-increment/ZdIncrement';
+export * from './zd-currency/ZdCurrency';
+export * from './zd-month/ZdMonth';
+export declare const components: IDictionary<DefineComponent<object, object, any>>;
+export declare function RegisterComponents(app: App): void;