@zeedhi/vuetify 1.112.0 → 3.0.0

package/src/components/zd-switch/ZdSwitch.vue

@@ -0,0 +1,65 @@
+<template>
+  <span
+    :id="instance.name"
+  >
+    <v-switch
+      ref="root"
+      v-show="instance.isVisible"
+      v-model="instance.displayValue"
+      validate-on="blur"
+      :name="instance.name"
+      :color="instance.color"
+      :inset="instance.inset"
+      :class="[
+        instance.cssClass,
+        'zd-switch',
+        {
+          'zd-no-helper': !instance.showHelper,
+          'zd-no-label': !instance.showLabel,
+          'zd-input-required': instance.validations.required,
+        },
+      ]"
+      :style="{
+        ...$styleObject(instance.cssStyle),
+        }"
+      :tabindex="instance.tabStop ? '' : '-1'"
+      @click="click($event)"
+      @mouseenter="mouseenter($event)"
+      @mouseleave="mouseleave($event)"
+      @focus="focus($event)"
+      @blur="blur($event)"
+      @update:model-value="switchChange($event)"
+      v-bind="{
+        theme: instance.theme,
+        disabled: instance.disabled,
+        label: instance.showLabel ? $t(instance.label) : undefined,
+        readonly: instance.readonly,
+        falseValue: instance.falseValue,
+        trueValue: instance.trueValue,
+        density: 'compact',
+        hideDetails: true
+      }"
+    ></v-switch>
+  </span>
+</template>
+<script lang="ts" src="./ZdSwitch.ts"></script>
+
+<style lang="scss">
+.zd-switch {
+  margin: 0;
+  padding: 3px 0 0 8px;
+
+  .v-label {
+    font-weight: var(--zd-font-body1-weight);
+    color: var(--zd-font-color);
+    font-size: var(--zd-font-body1-size);
+    height: auto;
+  }
+
+  &.zd-no-label {
+    .v-label {
+      display: none;
+    }
+  }
+}
+</style>

package/src/components/zd-table/ZdTable.ts

@@ -0,0 +1,47 @@
+import { Table } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { HeightProps } from '../../propsMixins';
+import { buildProps } from '../../utils';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdIterableProps } from '../zd-iterable/ZdIterable';
+
+export const ZdTableProps = buildProps({
+	...ZdIterableProps,
+	...HeightProps,
+	caption: {
+		type: [String, Object],
+		default() {
+			return {};
+		},
+	},
+	fillWidth: {
+		type: [String, Boolean],
+		default: false,
+	},
+	showTableHead: {
+		type: [String, Boolean],
+		default: true,
+	},
+});
+
+const tableComponent = defineComponent({
+	props: ZdTableProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Table>(props, ctx, Table);
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+		};
+	},
+});
+
+export default tableComponent;

package/src/components/zd-table/ZdTable.vue

@@ -0,0 +1,84 @@
+<template>
+  <div
+    class="zd-table-container"
+    :style="{
+      height: $formatSize(instance.height),
+      maxHeight: $formatSize(instance.maxHeight),
+      minHeight: $formatSize(instance.minHeight),
+    }"
+  >
+    <table
+      :id="instance.name"
+      v-show="instance.isVisible"
+      :class="[
+        instance.cssClass,
+        'zd-table',
+        {
+          'zd-table-fill-width': instance.fillWidth,
+        },
+      ]"
+      :style="$styleObject(instance.cssStyle)"
+    >
+      <caption
+        v-if="instance.caption.isVisible"
+        :class="['zd-table-caption', `text-${instance.caption.align}`]">
+        {{ $t(instance.caption.label) }}
+      </caption>
+      <thead v-if="instance.showTableHead">
+        <tr>
+          <template v-for="(column, index) in instance.columns">
+            <th
+              v-if="column.isVisible"
+              :class="[`text-${column.align}`]"
+              :key="index">
+              {{ $t(column.label) }}
+            </th>
+          </template>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row in instance.datasource.data" :key="row[instance.datasource.uniqueKey]">
+          <template v-for="(column, index) in instance.columns">
+            <td
+              v-if="column.isVisible"
+              v-html="$sanitize(column.formatter(row[column.name]))"
+              :key="index"
+              :class="[`text-${column.align}`]"
+              :style="`min-width: ${column.minWidth}; max-width: ${column.maxWidth};`">
+            </td>
+          </template>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts" src="./ZdTable.ts"></script>
+
+<style lang="scss">
+.zd-table-container {
+  overflow: auto;
+}
+
+.zd-table {
+  &-fill-width {
+    width: 100%;
+  }
+
+  &-caption {
+    border: var(--regular) solid #dedede;
+    border-bottom: 0;
+    padding: 12px;
+  }
+}
+
+table.zd-table, .zd-table tr, .zd-table td {
+  border-collapse: collapse;
+}
+
+table.zd-table, .zd-table tr, .zd-table td, .zd-table th {
+  border: var(--regular) solid #dedede;
+  padding: 12px;
+  vertical-align: top;
+}
+</style>

package/src/components/zd-tabs/ZdTab.ts

@@ -0,0 +1,100 @@
+import { Tab } from '@zeedhi/common';
+import { Event } from '@zeedhi/core';
+import { defineComponent } from 'vue';
+import { useDensity } from '../../composables';
+import { buildProps } from '../../utils';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+
+export const ZdTabProps = buildProps({
+	...ZdComponentRenderProps,
+	disabled: {
+		type: [Boolean, String],
+		default: false,
+	},
+	index: {
+		type: [Number, String],
+	},
+	tabTitle: {
+		type: [String],
+	},
+	tabName: {
+		type: [String],
+	},
+	color: {
+		type: [String],
+		default: 'primary',
+	},
+	dense: {
+		type: [Boolean],
+		default: true,
+	},
+	direction: {
+		type: [String],
+		default: 'horizontal',
+	},
+	fixed: {
+		type: [Boolean, String],
+		default: false,
+	},
+	iconName: {
+		type: [Boolean, String, Number],
+		default: false,
+	},
+	rounded: {
+		type: [Boolean, String],
+		default: false,
+	},
+	selectedClass: {
+		type: [String],
+		default: 'zd-tab--selected',
+	},
+	value: {
+		type: [Object, String],
+	},
+	variant: {
+		type: [String],
+		default: 'text',
+	},
+	width: {
+		type: [Number, String],
+	},
+});
+
+/**
+ * Tabs component
+ */
+const tabComponent = defineComponent({
+	props: ZdTabProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Tab>(props, ctx, Tab);
+		const { density } = useDensity({ instance });
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		const clickTab = (event: Event) => {
+			ctx.emit('click', event);
+		};
+
+		const keydown = (event: Event) => {
+			ctx.emit('keydown', event);
+		};
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+			// methods
+			clickTab,
+			keydown,
+			density,
+		};
+	},
+});
+
+export default tabComponent;

package/src/components/zd-tabs/ZdTab.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-tab
+    :id="instance.name"
+    v-show="instance.isVisible"
+    :class="['zd-tabs-tab', instance.cssClass]"
+    :style="$styleObject(instance.cssStyle)"
+    :name="instance.tabName"
+    :key="instance.index"
+    :disabled="instance.disabled"
+    :theme="instance.theme"
+    :color="instance.color"
+    :density="density"
+    :direction="instance.direction"
+    :fixed="instance.fixed"
+    :iconName="instance.iconName"
+    :rounded="instance.rounded"
+    :selected-class="'v-tab--selected '+instance.selectedClass"
+    :value="instance.value"
+    :variant="instance.variant"
+    :width="instance.width"
+    @click="clickTab($event)"
+    @keydown="keydown($event)"
+  >
+    <span class="zd-tabs-tab-text">
+      {{ $t(instance.tabTitle) }}
+    </span>
+  </v-tab>
+</template>
+
+<script lang="ts" src="./ZdTab.ts"></script>
+
+<style lang="scss" scoped>
+.zd-tabs {
+  &-tab,
+  &-tab:before {
+    border-radius: var(--border) var(--border) 0 0;
+  }
+
+  &-tab {
+    height: auto;
+    min-width: calc(2 * var(--spacing-4));
+
+    &-text {
+      text-transform: none;
+      font-size: var(--zd-font-body1-size);
+      line-height: 15px;
+      margin-bottom: 1px;
+    }
+  }
+}
+</style>

package/src/components/zd-tabs/ZdTabItem.ts

@@ -0,0 +1,20 @@
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+
+export const ZdTabItemProps = buildProps({
+	...ZdComponentRenderProps,
+	index: {
+		type: [Number],
+	},
+	lazyLoad: {
+		type: [Boolean],
+	},
+});
+
+const tabItemComponent = defineComponent({
+	props: ZdTabItemProps,
+	inheritAttrs: false,
+});
+
+export default tabItemComponent;

package/src/components/zd-tabs/ZdTabItem.vue

@@ -0,0 +1,40 @@
+<template>
+    <v-window-item
+      class="zd-tabs-tab-item"
+      v-show="isVisible"
+      :value="index"
+    >
+      <v-container fluid>
+        <component
+          v-for="(child, index) in children"
+          v-bind="child"
+          :key="index"
+          :is="child.component"
+        >
+        </component>
+        <slot></slot>
+      </v-container>
+    </v-window-item>
+</template>
+
+<script lang="ts" src="./ZdTabItem.ts"></script>
+
+<style lang="scss" scoped>
+.zd-tabs {
+  &-tab-item {
+    transition: none;
+
+    > .v-container {
+      padding: 0;
+    }
+  }
+
+  .zd-tabs-tab-item {
+    height: 100%;
+
+    .container{
+      height: 100%;
+    }
+  }
+}
+</style>

package/src/components/zd-tabs/ZdTabs.ts

@@ -0,0 +1,92 @@
+import { Tabs } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { useDensity } from '../../composables';
+import { HeightProps } from '../../propsMixins/heightProps';
+import { buildProps } from '../../utils';
+import { getRootElement, useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+
+export const ZdTabsProps = buildProps({
+	...ZdComponentRenderProps,
+	...HeightProps,
+	activeTab: {
+		type: [Number, String],
+		default: 0,
+	},
+	tabs: {
+		type: [Array],
+		default: () => [],
+	},
+	color: {
+		type: [String],
+		default: 'primary',
+	},
+	backgroudColor: {
+		type: [String],
+		default: undefined,
+	},
+	density: {
+		type: [String],
+		default: 'compact',
+	},
+	direction: {
+		type: [String],
+		default: 'horizontal',
+	},
+	disabled: {
+		type: [Boolean, String],
+		default: false,
+	},
+	grow: {
+		type: [Boolean, String],
+		default: false,
+	},
+	max: {
+		type: [Number, String],
+	},
+});
+
+/**
+ * Tabs component
+ */
+const tabsComponent = defineComponent({
+	props: ZdTabsProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Tabs>(props, ctx, Tabs);
+		const { density } = useDensity({ instance });
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		const change = (event: Event) => {
+			const rootElement = getRootElement(root);
+			instance.change(event, rootElement.value);
+		};
+
+		const keydown = (event: Event, index: number) => {
+			const rootElement = getRootElement(root);
+			instance.beforeChange(event, index, rootElement.value);
+		};
+
+		const clickTab = (event: Event, index: number) => {
+			const rootElement = getRootElement(root);
+			instance.beforeChange(event, index, rootElement.value);
+		};
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+			clickTab,
+			keydown,
+			change,
+			density,
+		};
+	},
+});
+
+export default tabsComponent;

package/src/components/zd-tabs/ZdTabs.vue

@@ -0,0 +1,124 @@
+<template>
+  <div  
+    ref="root"
+    :id="instance.name"
+    v-show="instance.isVisible"
+    :class="['zd-tabs', instance.cssClass]"
+    :name="instance.name"
+    :style="{
+      height: instance.height,
+      maxHeight: instance.maxHeight,
+      minHeight:instance.minHeight,
+    }"
+  >
+    <v-tabs
+      v-model="instance.activeTab"
+      show-arrows
+      @change="change($event)"
+      :theme="instance.theme"
+      :color="instance.color"
+      :bg-color="instance.backgroudColor"
+      :density="density"
+      :direction="instance.direction"
+      :disabled="instance.disabled"
+      :grow="instance.grow"
+      :max="instance.max"
+    >
+      <zd-tab
+        v-for="(tab, index) in instance.tabs " :key="index"
+        v-bind="{
+          key: index,
+          name: instance.name+'-tab-'+index,
+          disabled: tab.disabled,
+          cssClass: tab.cssClass,
+          cssStyle: tab.cssStyle,
+          tabName: tab.name,
+          index: index,
+          isVisible: tab.isVisible,
+          tabTitle: tab.tabTitle,
+          theme: tab.theme,
+          color: tab.color,
+          dense: tab.dense || instance.dense,
+          direction: tab.direction,
+          fixed: tab.fixed,
+          iconName: tab.iconName,
+          rounded: tab.rounded,
+          selectedClass: tab.selectedClass,
+          value: tab.value,
+          variant:tab.variant,
+          width: tab.width,
+        }"
+        @click="clickTab($event, index)"
+        @keydown="keydown($event, index)"
+      >
+      </zd-tab>
+    </v-tabs>
+    
+    <v-window
+      v-model="instance.activeTab"
+    >
+        <zd-tab-item
+          v-for="(tab, index) in instance.tabs"
+          v-show="tab.isVisible && index === instance.activeTab"
+          :key="index"
+          :value="index"
+          :children ="tab.children"
+          v-bind ="{
+            index: index,
+            name: instance.name+'-tab-item-'+index,
+            lazyLoad: tab.lazyLoad,
+          }"
+        >
+        </zd-tab-item>
+      <slot name="tabItems"></slot>
+    </v-window>
+  </div>
+</template>
+
+<script lang="ts" src="./ZdTabs.ts"></script>
+
+<style lang="scss" scoped>
+.zd-tabs {
+  display: flex;
+  flex-direction: column;
+
+  .v-tabs-bar {
+    height: auto;
+
+    .v-tabs-slider-wrapper {
+      bottom: -1px;
+    }
+  }
+
+  .v-slide-group__container {
+    border-bottom: solid 1px #BDBDBD;
+  }
+
+  .v-tabs {
+    margin-bottom: var(--spacing-4);
+
+    .v-slide-group__next,
+    .v-slide-group__prev {
+      flex-basis: 30px;
+      min-width: 30px;
+
+      .v-icon {
+        font-size: 18px;
+      }
+    }
+  }
+
+  .v-tabs{
+    flex-grow: 0;
+  }
+
+  .v-tabs-items {
+    flex-grow: 1;
+    overflow-y: auto;
+
+    .v-window__container {
+      height:100% !important;
+    }
+  }
+}
+</style>

package/src/components/zd-tag/ZdTag.ts

@@ -0,0 +1,39 @@
+import { Tag } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { buildProps } from '../../utils';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+
+export const ZdTagProps = buildProps({
+	...ZdComponentRenderProps,
+	name: {
+		type: String,
+		required: false,
+	},
+	tag: {
+		type: String,
+		required: true,
+	},
+});
+
+const tagComponent = defineComponent({
+	props: ZdTagProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Tag>(props, ctx, Tag);
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+		};
+	},
+});
+
+export default tagComponent;

package/src/components/zd-tag/ZdTag.vue

@@ -0,0 +1,27 @@
+<template>
+  <component
+    :id="instance.name"
+    ref="root"
+    @click="click($event)"
+    @mouseenter="mouseenter($event)"
+    @mouseleave="mouseleave($event)"
+    v-show="instance.isVisible"
+    :class="instance.cssClass"
+    :name="instance.name"
+    :style="$styleObject(instance.cssStyle)"
+    :is="instance.tag"
+    :theme="instance.theme"
+  >
+    <component
+      v-for="child in instance.children"
+      v-bind="child"
+      :key="child.name"
+      :is="child.component"
+      :theme="child.theme"
+      :parent="instance"
+    >
+    </component>
+    <slot></slot>
+  </component>
+</template>
+<script lang="ts" src="./ZdTag.ts"></script>