@vc-shell/framework 1.0.54 → 1.0.57

package/ui/components/atoms/vc-container/index.ts

@@ -1,8 +1,10 @@
-import { ComponentPublicInstance } from "vue";
-import { VcContainerEmits, VcContainerProps } from "./vc-container-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import Container from "./vc-container.vue";
-export const VcContainer: ComponentConstructor<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ComponentPublicInstance<VcContainerProps, any, any, any, any, VcContainerEmits>
-> = Container;
+import { VNode } from "vue";
+import _Container from "./vc-container.vue";
+
+export const VcContainer = _Container as typeof _Container & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
+};

package/ui/components/atoms/vc-container/vc-container.vue

@@ -36,11 +36,20 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, computed, nextTick } from "vue";
-import { containerProps, containerEmits } from "./vc-container-model";
 
-const props = defineProps(containerProps);
+export interface Props {
+  shadow?: boolean;
+  noPadding?: boolean;
+  usePtr?: boolean;
+}
+
+export interface Emits {
+  (event: "scroll:ptr"): void;
+}
+
+const props = defineProps<Props>();
 
-const emit = defineEmits(containerEmits);
+const emit = defineEmits<Emits>();
 
 const component = ref<HTMLElement>();
 const scroll = ref(false);

package/ui/components/atoms/vc-hint/index.ts

@@ -1,2 +1,10 @@
-import Hint from "./vc-hint.vue";
-export const VcHint = Hint;
+import _Hint from "./vc-hint.vue";
+import { VNode } from "vue";
+
+export const VcHint = _Hint as typeof _Hint & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
+};

package/ui/components/atoms/vc-icon/index.ts

@@ -1,5 +1,3 @@
-import { ComponentPublicInstance } from "vue";
-import { VcIconProps } from "./vc-icon-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import Icon from "./vc-icon.vue";
-export const VcIcon: ComponentConstructor<ComponentPublicInstance<VcIconProps>> = Icon;
+import _Icon from "./vc-icon.vue";
+
+export const VcIcon = _Icon as typeof _Icon;

package/ui/components/atoms/vc-icon/vc-icon.vue

@@ -3,9 +3,15 @@
 </template>
 
 <script lang="ts" setup>
-import { iconProps } from "./vc-icon-model";
+export interface Props {
+  icon?: string;
+  size?: "xs" | "s" | "m" | "l" | "xl" | "xxl";
+}
 
-defineProps(iconProps);
+withDefaults(defineProps<Props>(), {
+  icon: "fas fa-square-full",
+  size: "m",
+});
 </script>
 
 <style lang="scss">

package/ui/components/atoms/vc-image/index.ts

@@ -1,7 +1,3 @@
-import { ComponentPublicInstance } from "vue";
-import { VcImageEmits, VcImageProps } from "./vc-image-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import Image from "./vc-image.vue";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const VcImage: ComponentConstructor<ComponentPublicInstance<VcImageProps, any, any, any, any, VcImageEmits>> =
-  Image;
+import _Image from "./vc-image.vue";
+
+export const VcImage = _Image as typeof _Image;

package/ui/components/atoms/vc-image/vc-image.vue

@@ -31,11 +31,28 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import { imageProps, imageEmits } from "./vc-image-model";
 
-const props = defineProps(imageProps);
+export interface Props {
+  aspect?: string;
+  rounded?: boolean;
+  bordered?: boolean;
+  clickable?: boolean;
+  src: string;
+  size?: "auto" | "1x1" | "16x9" | "4x3" | "3x2" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
+  background?: "cover" | "contain" | "auto";
+}
+
+export interface Emits {
+  (event: "click"): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  aspect: "1x1",
+  size: "auto",
+  background: "cover",
+});
 
-const emit = defineEmits(imageEmits);
+const emit = defineEmits<Emits>();
 
 const imageHandler = computed(() => {
   if (props.src) {

package/ui/components/atoms/vc-info-row/index.ts

@@ -1,5 +1,3 @@
-import { ComponentPublicInstance } from "vue";
-import { VcInfoRowProps } from "./vc-info-row-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import InfoRow from "./vc-info-row.vue";
-export const VcInfoRow: ComponentConstructor<ComponentPublicInstance<VcInfoRowProps>> = InfoRow;
+import _InfoRow from "./vc-info-row.vue";
+
+export const VcInfoRow = _InfoRow as typeof _InfoRow;

package/ui/components/atoms/vc-info-row/vc-info-row.vue

@@ -26,7 +26,15 @@
 
 <script lang="ts" setup>
 import { VcLabel, VcRow, VcCol } from "./../../../components";
-import { infoRowProps } from "./vc-info-row-model";
 
-defineProps(infoRowProps);
+export interface Props {
+  label?: string;
+  value?: string;
+  tooltip?: string;
+  type?: "default" | "email";
+}
+
+withDefaults(defineProps<Props>(), {
+  type: "default",
+});
 </script>

package/ui/components/atoms/vc-label/index.ts

@@ -1,5 +1,11 @@
-import { ComponentPublicInstance } from "vue";
-import { VcLabelProps } from "./vc-label-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import Label from "./vc-label.vue";
-export const VcLabel: ComponentConstructor<ComponentPublicInstance<VcLabelProps>> = Label;
+import _Label from "./vc-label.vue";
+import { VNode } from "vue";
+
+export const VcLabel = _Label as typeof _Label & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+      tooltip: () => VNode[];
+    };
+  };
+};

package/ui/components/atoms/vc-label/vc-label.vue

@@ -30,9 +30,15 @@
 <script lang="ts" setup>
 import { VcIcon } from "./../../../components";
 import { ref } from "vue";
-import { labelProps } from "./vc-label-model";
 
-defineProps(labelProps);
+export interface Props {
+  required?: boolean;
+  tooltipIcon?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  tooltipIcon: "fas fa-info-circle",
+});
 
 const tooltipVisible = ref(false);
 </script>

package/ui/components/atoms/vc-link/index.ts

@@ -1,6 +1,10 @@
-import { ComponentPublicInstance } from "vue";
-import { VcLinkEmits, VcLinkProps } from "./vc-link-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import Link from "./vc-link.vue";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const VcLink: ComponentConstructor<ComponentPublicInstance<VcLinkProps, any, any, any, any, VcLinkEmits>> = Link;
+import { VNode } from "vue";
+import _Link from "./vc-link.vue";
+
+export const VcLink = _Link as typeof _Link & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
+};

package/ui/components/atoms/vc-link/vc-link.vue

@@ -13,10 +13,18 @@
 </template>
 
 <script lang="ts" setup>
-import { linkEmits, linkProps } from "./vc-link-model";
+export interface Props {
+  active?: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+export interface Emits {
+  (event: "click"): void;
+}
 
-const props = defineProps(linkProps);
-const emit = defineEmits(linkEmits);
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
 
 function onClick(): void {
   if (!props.disabled) {

package/ui/components/atoms/vc-loading/index.ts

@@ -1,5 +1,3 @@
-import { ComponentPublicInstance } from "vue";
-import { VcLoadingProps } from "./vc-loading-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import Loading from "./vc-loading.vue";
-export const VcLoading: ComponentConstructor<ComponentPublicInstance<VcLoadingProps>> = Loading;
+import _Loading from "./vc-loading.vue";
+
+export const VcLoading = _Loading as typeof _Loading;

package/ui/components/atoms/vc-loading/vc-loading.vue

@@ -21,7 +21,9 @@
 </template>
 
 <script lang="ts" setup>
-import { loadingProps } from "./vc-loading-model";
+export interface Props {
+  active?: boolean;
+}
 
-defineProps(loadingProps);
+defineProps<Props>();
 </script>

package/ui/components/atoms/vc-progress/index.ts

@@ -1,5 +1,10 @@
-import { ComponentPublicInstance } from "vue";
-import { VcProgressProps } from "./vc-progress-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import Progress from "./vc-progress.vue";
-export const VcProgress: ComponentConstructor<ComponentPublicInstance<VcProgressProps>> = Progress;
+import { VNode } from "vue";
+import _Progress from "./vc-progress.vue";
+
+export const VcProgress = _Progress as typeof _Progress & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
+};

package/ui/components/atoms/vc-progress/vc-progress.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="[
-      'vc-progress tw-border tw-border-[length:var(--progressbar-border-width)] tw-border-[color:var(--progressbar-border-color)] tw-rounded-[var(--progressbar-border-radius)] tw-h-[var(--progressbar-height)] tw-transition  tw-duration-200 tw-box-border tw-bg-[color:var(--progressbar-background-color)]',
+      'vc-progress tw-border-[length:var(--progressbar-border-width)] tw-border-[color:var(--progressbar-border-color)] tw-rounded-[var(--progressbar-border-radius)] tw-h-[var(--progressbar-height)] tw-transition  tw-duration-200 tw-box-border tw-bg-[color:var(--progressbar-background-color)]',
       variant,
     ]"
   >
@@ -13,9 +13,15 @@
 </template>
 
 <script lang="ts" setup>
-import { progressProps } from "./vc-progress-model";
+export interface Props {
+  value?: number;
+  variant?: "default" | "striped";
+}
 
-defineProps(progressProps);
+withDefaults(defineProps<Props>(), {
+  value: 0,
+  variant: "default",
+});
 </script>
 
 <style lang="scss">

package/ui/components/atoms/vc-row/index.ts

@@ -1,2 +1,10 @@
-import Row from "./vc-row.vue";
-export const VcRow = Row;
+import { VNode } from "vue";
+import _Row from "./vc-row.vue";
+
+export const VcRow = _Row as typeof _Row & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
+};

package/ui/components/atoms/vc-status/index.ts

@@ -1,5 +1,10 @@
-import { ComponentPublicInstance } from "vue";
-import { VcStatusProps } from "./vc-status-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import Status from "./vc-status.vue";
-export const VcStatus: ComponentConstructor<ComponentPublicInstance<VcStatusProps>> = Status;
+import { VNode } from "vue";
+import _Status from "./vc-status.vue";
+
+export const VcStatus = _Status as typeof _Status & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
+};

package/ui/components/atoms/vc-status/vc-status.vue

@@ -8,9 +8,16 @@
 </template>
 
 <script lang="ts" setup>
-import { statusProps } from "./vc-status-model";
+export interface Props {
+  variant?: "info" | "warning" | "danger" | "success" | "light-danger";
+  outline?: boolean;
+  extend?: boolean;
+}
 
-defineProps(statusProps);
+withDefaults(defineProps<Props>(), {
+  variant: "info",
+  outline: true,
+});
 </script>
 
 <style lang="scss">

package/ui/components/atoms/vc-status-icon/index.ts

@@ -1,5 +1,3 @@
-import { ComponentPublicInstance } from "vue";
-import { VcStatusIconProps } from "./vc-status-icon-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import StatusIcon from "./vc-status-icon.vue";
-export const VcStatusIcon: ComponentConstructor<ComponentPublicInstance<VcStatusIconProps>> = StatusIcon;
+import _StatusIcon from "./vc-status-icon.vue";
+
+export const VcStatusIcon = _StatusIcon as typeof _StatusIcon;

package/ui/components/atoms/vc-status-icon/vc-status-icon.vue

@@ -17,7 +17,9 @@
 
 <script lang="ts" setup>
 import { VcIcon } from "./../../../components";
-import { statusIconProps } from "./vc-status-icon-model";
+export interface Props {
+  status?: boolean;
+}
 
-defineProps(statusIconProps);
+defineProps<Props>();
 </script>

package/ui/components/atoms/vc-switch/index.ts

@@ -1,7 +1,3 @@
-import { ComponentPublicInstance } from "vue";
-import { VcSwitchEmits, VcSwitchProps } from "./vc-switch-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import Switch from "./vc-switch.vue";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const VcSwitch: ComponentConstructor<ComponentPublicInstance<VcSwitchProps, any, any, any, any, VcSwitchEmits>> =
-  Switch;
+import _Switch from "./vc-switch.vue";
+
+export const VcSwitch = _Switch as typeof _Switch;

package/ui/components/atoms/vc-switch/vc-switch.vue

@@ -30,13 +30,23 @@
 </template>
 
 <script lang="ts" setup>
-import { switchEmits, switchProps } from "./vc-switch-model";
+export interface Props {
+  modelValue: boolean;
+  disabled?: boolean;
+  tooltip?: string;
+  required?: boolean;
+  label?: string;
+}
+
+export interface Emits {
+  (event: "update:modelValue", value: boolean): void;
+}
 
-defineProps(switchProps);
+defineProps<Props>();
 
-const emit = defineEmits(switchEmits);
+const emit = defineEmits<Emits>();
 
-function onInput(e: InputEvent) {
+function onInput(e: Event) {
   const newValue = (e.target as HTMLInputElement).checked;
   emit("update:modelValue", newValue);
 }

package/ui/components/atoms/vc-widget/index.ts

@@ -1,7 +1,3 @@
-import { ComponentPublicInstance } from "vue";
-import { VcWidgetEmits, VcWidgetProps } from "./vc-widget-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import Widget from "./vc-widget.vue";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const VcWidget: ComponentConstructor<ComponentPublicInstance<VcWidgetProps, any, any, any, any, VcWidgetEmits>> =
-  Widget;
+import _Widget from "./vc-widget.vue";
+
+export const VcWidget = _Widget as typeof _Widget;

package/ui/components/atoms/vc-widget/vc-widget.vue

@@ -26,11 +26,20 @@
 </template>
 
 <script lang="ts" setup>
-import { widgetEmits, widgetProps } from "./vc-widget-model";
+export interface Props {
+  icon?: string;
+  title?: string;
+  value?: string | number;
+  disabled?: boolean;
+}
+
+export interface Emits {
+  (event: "click"): void;
+}
 
-const props = defineProps(widgetProps);
+const props = defineProps<Props>();
 
-const emit = defineEmits(widgetEmits);
+const emit = defineEmits<Emits>();
 
 function onClick() {
   if (!props.disabled) {

package/ui/components/index.ts

@@ -21,6 +21,7 @@ export { VcWidget } from "./atoms/vc-widget";
 
 /* Molecules */
 export { VcBreadcrumbs } from "./molecules/vc-breadcrumbs";
+export { VcCodeEditor } from "./molecules/vc-code-editor";
 export { VcEditor } from "./molecules/vc-editor";
 export { VcForm } from "./molecules/vc-form";
 export { VcFileUpload } from "./molecules/vc-file-upload";

package/ui/components/molecules/vc-breadcrumbs/index.ts

@@ -1,5 +1,3 @@
-import { ComponentPublicInstance } from "vue";
-import { VcBreadcrumbsProps } from "./vc-breadcrumbs-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import Breadcrumbs from "./vc-breadcrumbs.vue";
-export const VcBreadcrumbs: ComponentConstructor<ComponentPublicInstance<VcBreadcrumbsProps>> = Breadcrumbs;
+import _Breadcrumbs from "./vc-breadcrumbs.vue";
+
+export const VcBreadcrumbs = _Breadcrumbs as typeof _Breadcrumbs;

package/ui/components/molecules/vc-breadcrumbs/vc-breadcrumbs.vue

@@ -14,7 +14,18 @@
 
 <script lang="ts" setup>
 import VcBreadcrumbsItem from "./_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue";
-import { breadcrumbsProps } from "./vc-breadcrumbs-model";
 
-defineProps(breadcrumbsProps);
+export interface Props {
+  items?: {
+    current: boolean;
+    icon: string;
+    title: string;
+    clickHandler: () => void;
+    id: string;
+  }[];
+}
+
+withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
 </script>

package/ui/components/molecules/vc-code-editor/index.ts

@@ -0,0 +1,10 @@
+import { VNode } from "vue";
+import _CodeEditor from "./vc-code-editor.vue";
+
+export const VcCodeEditor = _CodeEditor as typeof _CodeEditor & {
+  new (): {
+    $slots: {
+      error: () => VNode[];
+    };
+  };
+};

package/ui/components/molecules/vc-code-editor/vc-code-editor.vue

@@ -0,0 +1,103 @@
+<template>
+  <div
+    class="vc-editor"
+    :class="[
+      {
+        'vc-code-editor_error': errorMessage,
+        'vc-code-editor_disabled': disabled,
+      },
+    ]"
+  >
+    <!-- Editor label -->
+    <VcLabel
+      v-if="label"
+      class="tw-mb-2"
+      :required="required"
+    >
+      <span>{{ label }}</span>
+      <template
+        v-if="tooltip"
+        v-slot:tooltip
+        >{{ tooltip }}</template
+      >
+    </VcLabel>
+
+    <!-- Editor field -->
+    <v-ace-editor
+      class="tw-border tw-border-solid tw-border-[color:var(--code-editor-border-color)] tw-rounded-[var(--code-editor-border-radius)] tw-h-[200px]"
+      v-model:value="content"
+      lang="html"
+      theme="chrome"
+      @input="onInput"
+    />
+    <slot
+      v-if="errorMessage"
+      name="error"
+    >
+      <VcHint class="vc-code-editor__error">
+        {{ errorMessage }}
+      </VcHint>
+    </slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VAceEditor } from "vue3-ace-editor";
+import "ace-builds/src-noconflict/mode-html";
+import "ace-builds/src-noconflict/theme-chrome";
+import { ref, unref, watch } from "vue";
+
+export interface Props {
+  placeholder?: string;
+  modelValue?: string | number | Date;
+  required?: boolean;
+  disabled?: boolean;
+  label?: string;
+  tooltip?: string;
+  name?: string;
+  errorMessage?: string;
+}
+
+export interface Emits {
+  (event: "update:modelValue", value: string | number | Date | null | undefined): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  name: "Field",
+});
+
+const emit = defineEmits<Emits>();
+const content = ref();
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    let init = unref(value);
+    emit("update:modelValue", init);
+  }
+);
+
+function onInput() {
+  emit("update:modelValue", content.value);
+}
+</script>
+
+<style lang="scss">
+:root {
+  --code-editor-border-radius: 3px;
+  --code-editor-border-color: #d3dbe9;
+  --code-editor-border-color-error: #f14e4e;
+  --code-editor-placeholder-color: #a5a5a5;
+}
+
+.vc-code-editor {
+  &__error {
+    @apply tw-text-[color:var(--editor-border-color-error)] tw-mt-1;
+  }
+
+  &_error .ace_editor {
+    @apply tw-border tw-border-solid tw-border-[color:var(--editor-border-color-error)];
+  }
+}
+</style>

package/ui/components/molecules/vc-editor/index.ts

@@ -1,7 +1,10 @@
-import { ComponentPublicInstance } from "vue";
-import { VcEditorEmits, VcEditorProps } from "./vc-editor-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import Editor from "./vc-editor.vue";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const VcEditor: ComponentConstructor<ComponentPublicInstance<VcEditorProps, any, any, any, any, VcEditorEmits>> =
-  Editor;
+import { VNode } from "vue";
+import _Editor from "./vc-editor.vue";
+
+export const VcEditor = _Editor as typeof _Editor & {
+  new (): {
+    $slots: {
+      error: () => VNode[];
+    };
+  };
+};