@zeedhi/vuetify 1.112.0 → 3.0.1

package/src/components/zd-checkbox-multiple/ZdCheckboxMultiple.vue

@@ -0,0 +1,146 @@
+<template>
+  <div
+    ref="root"
+    :id="instance.name"
+    v-show="instance.isVisible"
+    :class="[
+      instance.cssClass,
+      'zd-checkbox-multiple',
+      {
+        'zd-input-required': instance.validations.required,
+      }
+    ]"
+  >
+    <div class="zd-checkbox-label">{{ $t(instance.label) }}</div>
+    <div
+      :class="{
+        'zd-checkbox-horizontal': !instance.vertical,
+        'zd-checkbox-vertical': instance.vertical
+      }"
+      :style="[
+        {
+          '--checkbox-horizontal-columns':
+            instance.columns > 0
+              ? `repeat(${instance.columns}, 1fr)`
+              : 'repeat(auto-fit, minmax(220px, 1fr))',
+        },
+        $styleObject(instance.cssStyle),
+      ]"
+    >
+      <v-checkbox
+        v-for="row in instance.datasource?.data"
+        :key="row[instance.dataValue]"
+        v-model="instance.value"
+        :class="[{ 'zd-no-helper': !instance.showHelper }]"
+        @change="change"
+        :tabindex="instance.tabStop ? '' : '-1'"
+        v-bind="{
+          disabled: instance.disabled,
+          'hide-details': instance.showHelper,
+          hint: instance.hint,
+          theme:instance.theme,
+          'persistent-hint': instance.persistentHint,
+          readonly: instance.readonly,
+          color: instance.color,
+          label: row[$t(instance.dataLabel)],
+          value: instance.returnObject ? row : row[instance.dataValue],
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./ZdCheckboxMultiple.ts"></script>
+
+<style lang="scss">
+.zd-checkbox-multiple {
+  .zd-checkbox-label {
+    font-size: var(--zd-font-body1-size);
+    font-weight: var(--zd-font-body1-weight);
+    padding: 0 0 var(--spacing-2);
+    color: var(--zd-font-color);
+    align-items: flex-start;
+    display: flex;
+  }
+
+  .zd-checkbox-vertical {
+    display: flex;
+    flex-direction: column;
+    gap: 0px;
+    width: 100%;
+  }
+
+  .zd-checkbox-horizontal {
+    display: grid;
+    grid-template-columns: var(--checkbox-horizontal-columns);
+    gap: 16px;
+    width: 100%;
+
+    > * {
+      min-width: 64px;
+      overflow: visible;
+    }
+  }
+
+  .v-label {
+    font-weight: var(--zd-font-body1-weight);
+    color: var(--zd-font-color);
+    font-size: var(--zd-font-body1-size);
+    white-space: normal;
+    line-height: normal;
+  }
+
+  .v-input--selection-controls {
+    padding: 0;
+    margin: 0;
+
+    .v-input__control {
+      .v-messages {
+        display: none;
+      }
+
+      .v-input__slot {
+        margin: 0 10px 0 0;
+        display: flex;
+        align-items: center;
+
+        &:hover {
+          .v-input--selection-controls__ripple::before {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  .v-selection-control .v-label {
+    white-space: normal;
+    word-break: normal;
+    height: 50%;
+    opacity: 1;
+  }
+
+  .v-input--density-default {
+    --v-input-control-height: 0px;
+    --v-input-padding-top: 2px;
+  }
+
+  .v-selection-control--density-default {
+    --v-selection-control-size: 25px;
+  }
+
+  &.zd-no-label {
+    .v-label {
+      display: none;
+    }
+  }
+
+  &.zd-no-helper {
+    .v-input__control {
+      .v-messages {
+        display: none;
+      }
+    }
+  }
+}
+</style>

package/src/components/zd-chip/ZdChip.ts

@@ -0,0 +1,96 @@
+import { Chip } from '@zeedhi/common';
+import { SetupContext, computed, defineComponent } from 'vue';
+import { ZdButtonProps } from '../zd-button/ZdButton';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+
+export const ZdChipProps = {
+	...ZdButtonProps,
+
+	active: {
+		type: [Boolean, String],
+		default: true,
+	},
+	activeClass: {
+		type: String,
+		default: '',
+	},
+	closable: {
+		type: [Boolean, String],
+		default: false,
+	},
+	closeIcon: {
+		type: String,
+		default: 'delete',
+	},
+	draggable: {
+		type: [Boolean, String],
+		default: false,
+	},
+	link: {
+		type: [Boolean, String],
+		default: false,
+	},
+	outlined: {
+		type: [Boolean, String],
+		default: false,
+	},
+	ripple: {
+		type: [Boolean, String],
+		default: true,
+	},
+	round: {
+		type: [Boolean, String],
+		default: true,
+	},
+	xLarge: {
+		type: [Boolean, String],
+		default: false,
+	},
+	xSmall: {
+		type: [Boolean, String],
+		default: false,
+	},
+	value: {
+		type: [Boolean, String],
+		default: false,
+	},
+};
+
+const chipComponent = defineComponent({
+	name: 'ZdChip',
+	props: ZdChipProps,
+	inheritAttrs: false,
+
+	setup(props, ctx: SetupContext) {
+		const { instance, root } = useCreateInstance<Chip>(props, ctx, Chip);
+		const { blur, focus, click, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		const variant = computed(() => {
+			if (instance.outlined) return 'outlined';
+			if (instance.link) return 'text';
+			return 'flat';
+		});
+
+		const size = computed(() => {
+			if (instance.xLarge) return 'x-large';
+			if (instance.xSmall) return 'x-small';
+			if (instance.large) return 'large';
+			if (instance.small) return 'small';
+			return undefined;
+		});
+
+		return {
+			mouseenter,
+			mouseleave,
+			click,
+			focus,
+			blur,
+			variant,
+			size,
+			instance,
+			root,
+		};
+	},
+});
+
+export default chipComponent;

package/src/components/zd-chip/ZdChip.vue

@@ -0,0 +1,131 @@
+<template>
+  <v-chip
+    ref="root"
+    :id="instance.name"
+    :class="[
+      instance.cssClass,
+      {
+        'zd-chip--icon': instance.iconName,
+        'zd-chip--reverse': instance.reverse,
+        'cursor-pointer': (instance.link || !!click) && !instance.disabled,
+      },
+    ]"
+    :ripple="!instance.disabled && instance.ripple"
+    :closable="instance.closable"
+    :name="instance.name"
+    @click="click($event)"
+    @focus="focus($event)"
+    @blur="blur($event)"
+    @mouseenter="mouseenter($event)"
+    @mouseleave="mouseleave($event)"
+    :rounded="instance.round"
+    :value="instance.value"
+    :size="size"
+    :variant="variant"
+    :border="instance.border"
+    :elevation="instance.elevation"
+    :width="instance.width"
+    v-bind="{
+      active: instance.active,
+      activeClass: instance.activeClass,
+      close: instance.closable,
+      closeIcon: $getIcon(instance.closeIcon),
+      color: instance.color,
+      theme: instance.theme,
+      disabled: instance.disabled,
+      draggable: instance.draggable,
+      href: instance.href,
+      icon: instance.icon,
+      label: !instance.round,
+      left: instance.left,
+      right: instance.right,
+      target: instance.target,
+      to: instance.to,
+    }"
+  >
+    <v-icon v-if="instance.iconName">{{ $getIcon(instance.iconName) }}</v-icon>
+
+    <span v-if="instance.label" class="zd-chip__label">
+      {{ $t(instance.label) }}
+    </span>
+
+    <slot></slot>
+  </v-chip>
+</template>
+
+<script lang="ts" src="./ZdChip.ts"></script>
+
+<style lang="scss">
+.v-chip {
+  &:not(.zd-chip--reverse) {
+    .zd-chip__label {
+      margin: 0;
+
+      &:not(:first-child) {
+        margin-left: var(--spacing-2);
+      }
+
+      &:not(:last-child) {
+        margin-right: var(--spacing-2);
+      }
+    }
+  }
+
+  &.zd-chip--reverse {
+    flex-direction: row-reverse;
+
+    .zd-chip__label {
+      margin: 0;
+
+      &:not(:first-child) {
+        margin-right: var(--spacing-2);
+      }
+
+      &:not(:last-child) {
+        margin-left: var(--spacing-2);
+      }
+    }
+
+    .v-chip__close.v-icon,
+    .v-avatar {
+      order: 0;
+      margin-right: var(--spacing-2);
+    }
+
+    .v-icon:not(.v-chip__close) {
+      order: 2;
+      margin-right: 4px !important;
+    }
+
+    .v-chip__close {
+      margin-inline-start: 4px;
+      margin-inline-end: 6px;
+    }
+
+    .v-icon--end {
+      margin-inline-start: 6px;
+      margin-inline-end: 4px;
+    }
+  }
+
+  &.v-chip--size-default {
+    height: auto;
+    padding: 6px var(--spacing-2);
+    font-size: 12px;
+    line-height: normal;
+
+    .v-chip__close.v-icon {
+      &.v-icon--right,
+      &.v-icon--left {
+        margin: 0;
+      }
+    }
+  }
+}
+
+.v-chip.v-chip--size-default .v-icon--end,
+.v-chip.v-chip--size-default .v-chip__close {
+  margin-inline-start: 6px !important;
+  margin-inline-end: 4px !important;
+}
+</style>

package/src/components/zd-code-viewer/ZdCodeViewer.ts

@@ -0,0 +1,65 @@
+import { CodeViewer } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { useTheme } from 'vuetify';
+import { HeightProps, WidthProps } from '../../propsMixins';
+import { buildProps } from '../../utils';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+import { Prism } from './prism';
+
+export const ZdCodeViewerProps = buildProps({
+	...ZdComponentRenderProps,
+	...HeightProps,
+	...WidthProps,
+	copyIcon: {
+		type: String,
+		default: 'content-copy',
+	},
+	language: {
+		type: String,
+		default: 'ts',
+	},
+	showLineNumbers: {
+		type: [Boolean, String],
+		default: true,
+	},
+	staticCode: {
+		type: [Object, String, Array<string>],
+		default: '',
+	},
+});
+
+const codeViewerComponent = defineComponent({
+	props: ZdCodeViewerProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<CodeViewer>(props, ctx, CodeViewer);
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		const highlight = (code: string, language: string) =>
+			Prism.highlight(code, Prism.languages[props.language], language);
+
+		instance.setViewHighlight(highlight);
+
+		const theme = useTheme();
+
+		const getThemeClass = () => {
+			return `theme--${instance.theme || theme.global.name.value}`;
+		};
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+			highlight,
+			getThemeClass,
+		};
+	},
+});
+
+export default codeViewerComponent;

package/src/components/zd-code-viewer/ZdCodeViewer.vue

@@ -0,0 +1,187 @@
+<template>
+  <div
+    ref="root"
+    :id="instance.name"
+    v-show="instance.isVisible"
+    @click="click($event)"
+    @mouseenter="mouseenter($event)"
+    @mouseleave="mouseleave($event)"
+    :class="[
+      'zd-code-viewer',
+      instance.cssClass,
+      getThemeClass(),
+    ]"
+    :style="{
+      height: $formatSize(instance.height),
+      width: $formatSize(instance.width),
+      maxHeight: $formatSize(instance.maxHeight),
+      minHeight: $formatSize(instance.minHeight),
+      maxWidth: $formatSize(instance.maxWidth),
+      minWidth: $formatSize(instance.minWidth),
+      ...$styleObject(instance.cssStyle),
+    }"
+  >
+    <div class="zd-code-viewer-container" :class="{ 'line-numbers': instance.showLineNumbers }">
+      <div class="zd-code-viewer-line-numbers" aria-hidden="true" v-if="instance.showLineNumbers">
+        <div class="zd-code-viewer-line-number token comment" v-for="line in instance.lineNumbersCount" :key="line">{{line}}</div>
+      </div>
+
+      <div class="zd-code-viewer-code">
+        <pre
+          v-html="$sanitize(instance.getHighlightedCode())"
+          :class="`language-${instance.language}`"
+          spellCheck="false"
+          autocapitalize="off"
+          autocomplete="off"
+          autocorrect="off"
+          data-gramm="false"
+        ></pre>
+      </div>
+    </div>
+
+    <span class="zd-code-viewer-clipboard-button">
+      <v-tooltip bottom>
+        <template v-slot:activator="{ props }">
+          <v-icon v-bind="props" @click="instance.copyToClipboard()">
+            {{ $getIcon(instance.copyIcon) }}
+          </v-icon>
+        </template>
+        <span>{{ $t(instance.tooltipText) }}</span>
+      </v-tooltip>
+    </span>
+  </div>
+</template>
+
+<script lang="ts" src="./ZdCodeViewer.ts"></script>
+
+<style lang="scss">
+.zd-code-viewer {
+  position: relative;
+  display: flex;
+  overflow: auto;
+
+  &-clipboard-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: rgba(var(--v-theme-grey-lighten-5));
+    opacity: 0;
+    transition: 0.3s all ease-in;
+
+    .v-icon {
+      color: rgba(var(--v-theme-grey));
+      font-size: 18px;
+    }
+  }
+
+  &:hover {
+    .zd-code-viewer-clipboard-button {
+      opacity: 1;
+    }
+  }
+
+  &-container {
+    position: relative;
+    background-color: rgba(var(--v-theme-grey-lighten-5));
+    min-height: 45px;
+    display: flex;
+    border: solid var(--regular) rgba(var(--v-theme-grey-lighten-5));
+    overflow: auto;
+    width: 100%;
+
+    &.line-numbers {
+      background: linear-gradient(to right, rgba(var(--v-theme-grey-lighten-4)), rgba(var(--v-theme-grey-lighten-4)) 40px, rgba(var(--v-theme-grey-lighten-5)) 40px, rgba(var(--v-theme-grey-lighten-5)));
+    }
+
+    &:focus-within {
+      border: solid var(--regular) var(--v-primary-base);
+    }
+
+    .zd-code-viewer-line-numbers {
+      min-height: 45px;
+      width: 40px;
+      flex-shrink: 0;
+      margin-top: 0;
+      font-size: 0.9em;
+      padding: 10px 3px;
+      font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+      background: rgba(var(--v-theme-grey-lighten-4));
+      color: var(--zd-font-color);
+      position: sticky;
+      left: 0;
+      display: flex;
+      flex-direction: column;
+      height: fit-content;
+
+      .zd-code-viewer-line-number {
+        text-align: right;
+        white-space: nowrap;
+      }
+    }
+
+    pre {
+      padding: 10px;
+      margin: 0;
+      background: transparent;
+      -moz-tab-size: 4;
+      -ms-flex-positive: 2;
+      -o-tab-size: 4;
+      -webkit-box-flex: 2;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      flex-grow: 2;
+      outline: none;
+      tab-size: 4;
+      font-weight: 500;
+      font-size: 0.9em;
+      font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+      overflow: hidden;
+      color: var(--zd-font-color);
+    }
+  }
+
+  &.theme--dark {
+    .zd-code-viewer-clipboard-button {
+      background-color: #383838;
+
+      .v-icon {
+        color: rgba(var(--v-theme-grey-lighten-4));
+        font-size: 18px;
+      }
+    }
+
+    .zd-code-viewer-container {
+      border: solid var(--regular) rgba(var(--v-theme-grey-darken-3));
+      background: #383838;
+
+      .zd-code-viewer-line-numbers {
+        background: rgba(var(--v-theme-grey-darken-3));
+        color: rgba(var(--v-theme-grey-lighten-4));
+      }
+
+      pre {
+        text-shadow: 0 1px #2c2c2c;
+        span{
+          &.token{
+            &.property, &.tag, &.boolean, &.number, &.constant, &.symbol, &.deleted {
+                color: #ff6fd3;
+            }
+            &.atrule, &.attr-value, &.keyword {
+              color: #00acf6;
+            }
+            &.function, &.class-name {
+                color: #ff7692;
+            }
+            &.selector, &.attr-name, &.string, &.char, &.builtin, &.inserted {
+              color: #77b300;
+            }
+            &.operator{
+              background: none;
+          }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/zd-code-viewer/prism.ts

@@ -0,0 +1,15 @@
+import Prism from 'prismjs';
+import 'prismjs/components/prism-bash.min';
+import 'prismjs/components/prism-docker.min';
+import 'prismjs/components/prism-groovy.min';
+import 'prismjs/components/prism-java.min';
+import 'prismjs/components/prism-json.min';
+import 'prismjs/components/prism-jsonp.min';
+import 'prismjs/components/prism-kotlin.min';
+import 'prismjs/components/prism-sql.min';
+import 'prismjs/components/prism-typescript.min';
+import 'prismjs/components/prism-yaml.min';
+import 'prismjs/themes/prism.css';
+
+export { Prism };
+export * from 'prismjs';

package/src/components/zd-col/ZdCol.ts

@@ -0,0 +1,50 @@
+import { Col } from '@zeedhi/common';
+import { defineComponent } from 'vue';
+import { HeightProps, WidthProps } from '../../propsMixins';
+import { buildProps } from '../../utils';
+import { useCreateInstance, useGetMethods } from '../zd-component/ZdComponent';
+import { ZdComponentRenderProps } from '../zd-component/ZdComponentRender';
+
+export const ZdColProps = buildProps({
+	...ZdComponentRenderProps,
+	...HeightProps,
+	...WidthProps,
+	cols: {
+		type: [String, Number],
+		default: '12',
+	},
+	sm: {
+		type: [String, Number],
+	},
+	md: {
+		type: [String, Number],
+	},
+	lg: {
+		type: [String, Number],
+	},
+	xl: {
+		type: [String, Number],
+	},
+});
+
+const colComponent = defineComponent({
+	props: ZdColProps,
+	inheritAttrs: false,
+	setup(props, ctx) {
+		const { instance, root } = useCreateInstance<Col>(props, ctx, Col);
+
+		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
+
+		return {
+			instance,
+			root,
+			click,
+			focus,
+			blur,
+			mouseenter,
+			mouseleave,
+		};
+	},
+});
+
+export default colComponent;