@vc-shell/framework 1.0.53 → 1.0.56

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

@@ -6,7 +6,10 @@
       class="tw-text-[color:var(--label-required-color)] tw-ml-1"
       >*</span
     >
-    <span v-if="$slots['tooltip']" class="tw-grow tw-basis-0 tw-ml-1">
+    <span
+      v-if="$slots['tooltip']"
+      class="tw-grow tw-basis-0 tw-ml-1"
+    >
       <VcIcon
         class="tw-text-[color:var(--label-tooltip-color)]"
         :icon="tooltipIcon"
@@ -27,10 +30,13 @@
 <script lang="ts" setup>
 import { VcIcon } from "./../../../components";
 import { ref } from "vue";
-import { VcLabelProps } from "./vc-label-model";
 
-withDefaults(defineProps<VcLabelProps>(), {
-  required: false,
+export interface Props {
+  required?: boolean;
+  tooltipIcon?: string;
+}
+
+withDefaults(defineProps<Props>(), {
   tooltipIcon: "fas fa-info-circle",
 });
 

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcLinkProps } from "./vc-link-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Link from "./vc-link.vue";
-export const VcLink: ComponentConstructor<
-  ComponentPublicInstance<VcLinkProps>
-> = Link;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcLinkSlots = {
+  default?: () => VNode[];
+};
+
+export const VcLink: GlobalComponentConstructor<typeof Link, VcLinkSlots> = Link;

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

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

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcLoadingProps } from "./vc-loading-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Loading from "./vc-loading.vue";
-export const VcLoading: ComponentConstructor<
-  ComponentPublicInstance<VcLoadingProps>
-> = Loading;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcLoadingSlots = {
+  default?: () => VNode[];
+};
+
+export const VcLoading: GlobalComponentConstructor<typeof Loading, VcLoadingSlots> = Loading;

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

@@ -2,17 +2,14 @@
   <div
     class="tw-absolute tw-items-center tw-justify-center tw-flex-col tw-z-[9998] tw-hidden tw-w-full tw-h-full tw-box-border"
     :class="{
-      '!tw-flex tw-backdrop-blur-[3px] tw-bg-[rgba(255, 255, 255, 0.5)]':
-        active,
+      '!tw-flex tw-backdrop-blur-[3px] tw-bg-[rgba(255, 255, 255, 0.5)]': active,
     }"
   >
     <div class="tw-relative tw-w-[142px] tw-h-[40px] tw-z-[1]">
       <span
         class="tw-absolute tw-w-4 tw-h-4 tw-top-[12px] tw-left-[15px] tw-bg-[#319ed4] tw-rounded-full tw-translate-x-0 tw-animate-loadingMarker"
       ></span>
-      <div
-        class="tw-translate-x-0 tw-mt-3 tw-ml-[31px] tw-animate-loadingMarkers"
-      >
+      <div class="tw-translate-x-0 tw-mt-3 tw-ml-[31px] tw-animate-loadingMarkers">
         <span
           class="tw-block tw-float-left tw-w-4 tw-h-4 tw-bg-[#319ed4] tw-rounded-full tw-ml-4"
           v-for="item in 3"
@@ -24,9 +21,9 @@
 </template>
 
 <script lang="ts" setup>
-import { VcLoadingProps } from "./vc-loading-model";
+export interface Props {
+  active?: boolean;
+}
 
-withDefaults(defineProps<VcLoadingProps>(), {
-  active: false,
-});
+defineProps<Props>();
 </script>

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcProgressProps } from "./vc-progress-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Progress from "./vc-progress.vue";
-export const VcProgress: ComponentConstructor<
-  ComponentPublicInstance<VcProgressProps>
-> = Progress;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcProgressSlots = {
+  default?: () => VNode[];
+};
+
+export const VcProgress: GlobalComponentConstructor<typeof Progress, VcProgressSlots> = Progress;

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,12 @@
 </template>
 
 <script lang="ts" setup>
-import { VcProgressProps } from "./vc-progress-model";
+export interface Props {
+  value?: number;
+  variant?: "default" | "striped";
+}
 
-withDefaults(defineProps<VcProgressProps>(), {
+withDefaults(defineProps<Props>(), {
   value: 0,
   variant: "default",
 });
@@ -43,14 +46,8 @@ withDefaults(defineProps<VcProgressProps>(), {
 .vc-progress {
   &.striped {
     .vc-progress__value {
-      background: linear-gradient(
-            45deg,
-            transparent 50%,
-            #acd2f2 50%,
-            #acd2f2 75%,
-            transparent 75%
-          )
-          left/30px 30px repeat-x,
+      background: linear-gradient(45deg, transparent 50%, #acd2f2 50%, #acd2f2 75%, transparent 75%) left/30px 30px
+          repeat-x,
         #e1f0fe;
       animation: change 1s linear infinite;
     }

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

@@ -1,2 +1,9 @@
+import { VNode } from "vue";
 import Row from "./vc-row.vue";
-export const VcRow = Row;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcRowSlots = {
+  default?: () => VNode[];
+};
+
+export const VcRow: GlobalComponentConstructor<typeof Row, VcRowSlots> = Row;

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcStatusProps } from "./vc-status-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Status from "./vc-status.vue";
-export const VcStatus: ComponentConstructor<
-    ComponentPublicInstance<VcStatusProps>
-> = Status;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcStatusSlots = {
+  default?: () => VNode[];
+};
+
+export const VcStatus: GlobalComponentConstructor<typeof Status, VcStatusSlots> = Status;

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

@@ -1,23 +1,22 @@
 <template>
   <div
     class="vc-status"
-    :class="[
-      `vc-status_${variant}`,
-      { 'vc-status_outline': outline },
-      { 'vc-status_extended': extend },
-    ]"
+    :class="[`vc-status_${variant}`, { 'vc-status_outline': outline }, { 'vc-status_extended': extend }]"
   >
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { VcStatusProps } from "./vc-status-model";
+export interface Props {
+  variant?: "info" | "warning" | "danger" | "success" | "light-danger";
+  outline?: boolean;
+  extend?: boolean;
+}
 
-withDefaults(defineProps<VcStatusProps>(), {
+withDefaults(defineProps<Props>(), {
   variant: "info",
   outline: true,
-  extend: false,
 });
 </script>
 

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcStatusIconProps } from "./vc-status-icon-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import StatusIcon from "./vc-status-icon.vue";
-export const VcStatusIcon: ComponentConstructor<
-  ComponentPublicInstance<VcStatusIconProps>
-> = StatusIcon;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcStatusIconSlots = {
+  default?: () => VNode[];
+};
+
+export const VcStatusIcon: GlobalComponentConstructor<typeof StatusIcon, VcStatusIconSlots> = StatusIcon;

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

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

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcSwitchProps } from "./vc-switch-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
 import Switch from "./vc-switch.vue";
-export const VcSwitch: ComponentConstructor<
-    ComponentPublicInstance<VcSwitchProps>
-> = Switch;
+
+export type VcSwitchSlots = {
+  default?: () => VNode[];
+};
+
+export const VcSwitch: GlobalComponentConstructor<typeof Switch, VcSwitchSlots> = Switch;

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

@@ -1,7 +1,11 @@
 <template>
   <div>
     <!-- Switch label -->
-    <VcLabel v-if="label" class="tw-mb-2" :required="required">
+    <VcLabel
+      v-if="label"
+      class="tw-mb-2"
+      :required="required"
+    >
       <span>{{ label }}</span>
     </VcLabel>
     <div class="tw-relative tw-inline-block tw-w-[54px] tw-h-[18px]">
@@ -15,7 +19,10 @@
         />
         <span class="vc-switch__slider"></span>
       </label>
-      <VcHint class="tw-mt-2 tw-w-max" v-if="tooltip">
+      <VcHint
+        class="tw-mt-2 tw-w-max"
+        v-if="tooltip"
+      >
         {{ tooltip }}
       </VcHint>
     </div>
@@ -23,18 +30,23 @@
 </template>
 
 <script lang="ts" setup>
-import { VcSwitchProps } 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;
+}
 
-withDefaults(defineProps<VcSwitchProps>(), {
-  modelValue: false,
-  disabled: false,
-  tooltip: "",
-  required: false,
-});
+defineProps<Props>();
 
-const emit = defineEmits(["update:modelValue"]);
+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,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcWidgetProps } from "./vc-widget-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Widget from "./vc-widget.vue";
-export const VcWidget: ComponentConstructor<
-  ComponentPublicInstance<VcWidgetProps>
-> = Widget;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcWidgetSlots = {
+  default?: () => VNode[];
+}
+
+export const VcWidget: GlobalComponentConstructor<typeof Widget, VcWidgetSlots> = Widget;

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

@@ -10,18 +10,36 @@
       :icon="icon"
       size="xxl"
     ></VcIcon>
-    <div v-if="title" class="vc-widget__title">{{ title }}</div>
-    <div v-if="value !== undefined" class="vc-widget__value">{{ value }}</div>
+    <div
+      v-if="title"
+      class="vc-widget__title"
+    >
+      {{ title }}
+    </div>
+    <div
+      v-if="value !== undefined"
+      class="vc-widget__value"
+    >
+      {{ value }}
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { VcWidgetProps } 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<Props>();
 
-const props = withDefaults(defineProps<VcWidgetProps>(), {
-  disabled: false,
-});
-const emit = defineEmits(["click"]);
+const emit = defineEmits<Emits>();
 
 function onClick() {
   if (!props.disabled) {

package/ui/components/index.ts

@@ -1,43 +1,44 @@
 /* Atoms */
-export { VcBadge } from "./atoms/vc-badge";
-export {VcButton } from "./atoms/vc-button";
-export { VcCard } from "./atoms/vc-card";
-export { VcCheckbox } from "./atoms/vc-checkbox";
-export { VcCol } from "./atoms/vc-col";
-export { VcContainer } from "./atoms/vc-container";
-export { VcHint } from "./atoms/vc-hint";
-export { VcIcon } from "./atoms/vc-icon";
-export { VcInfoRow } from "./atoms/vc-info-row";
-export { VcImage } from "./atoms/vc-image";
-export { VcLabel } from "./atoms/vc-label";
-export { VcLink } from "./atoms/vc-link";
-export { VcLoading } from "./atoms/vc-loading";
-export { VcProgress } from "./atoms/vc-progress";
-export { VcRow } from "./atoms/vc-row";
-export { VcStatus } from "./atoms/vc-status";
-export { VcStatusIcon } from "./atoms/vc-status-icon";
-export { VcSwitch } from "./atoms/vc-switch";
-export { VcWidget } from "./atoms/vc-widget";
+export * from "./atoms/vc-badge";
+export * from "./atoms/vc-button";
+export * from "./atoms/vc-card";
+export * from "./atoms/vc-checkbox";
+export * from "./atoms/vc-col";
+export * from "./atoms/vc-container";
+export * from "./atoms/vc-hint";
+export * from "./atoms/vc-icon";
+export * from "./atoms/vc-info-row";
+export * from "./atoms/vc-image";
+export * from "./atoms/vc-label";
+export * from "./atoms/vc-link";
+export * from "./atoms/vc-loading";
+export * from "./atoms/vc-progress";
+export * from "./atoms/vc-row";
+export * from "./atoms/vc-status";
+export * from "./atoms/vc-status-icon";
+export * from "./atoms/vc-switch";
+export * from "./atoms/vc-widget";
 
 /* Molecules */
-export { VcBreadcrumbs } from "./molecules/vc-breadcrumbs";
-export { VcEditor } from "./molecules/vc-editor";
-export { VcForm } from "./molecules/vc-form";
-export { VcFileUpload } from "./molecules/vc-file-upload";
-export { VcInput } from "./molecules/vc-input";
-export { VcInputCurrency } from "./molecules/vc-input-currency";
-export { VcNotification } from "./molecules/vc-notification";
-export { VcPagination } from "./molecules/vc-pagination";
-export { VcRating } from "./molecules/vc-rating";
-export { VcSelect } from "./molecules/vc-select";
-export { VcSlider } from "./molecules/vc-slider";
-export { VcTextarea } from "./molecules/vc-textarea";
+export * from "./molecules/vc-breadcrumbs";
+export * from "./molecules/vc-code-editor";
+export * from "./molecules/vc-editor";
+export * from "./molecules/vc-form";
+export * from "./molecules/vc-file-upload";
+export * from "./molecules/vc-input";
+export * from "./molecules/vc-input-currency";
+export * from "./molecules/vc-notification";
+export * from "./molecules/vc-pagination";
+export * from "./molecules/vc-rating";
+export * from "./molecules/vc-select";
+export * from "./molecules/vc-slider";
+export * from "./molecules/vc-textarea";
 
 /* Organisms */
-export { VcApp } from "./organisms/vc-app";
-export { VcBlade } from "./organisms/vc-blade";
-export { VcDynamicProperty } from "./organisms/vc-dynamic-property";
-export { VcGallery } from "./organisms/vc-gallery";
-export { VcLoginForm } from "./organisms/vc-login-form";
-export { VcPopup } from "./organisms/vc-popup";
-export { VcTable } from "./organisms/vc-table";
+export * from "./organisms/vc-app";
+export * from "./organisms/vc-blade";
+export * from "./organisms/vc-dynamic-property";
+export * from "./organisms/vc-gallery";
+export * from "./organisms/vc-login-form";
+export * from "./organisms/vc-popup";
+export * from "./organisms/vc-table";

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcBreadcrumbsProps } from "./vc-breadcrumbs-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Breadcrumbs from "./vc-breadcrumbs.vue";
-export const VcBreadcrumbs: ComponentConstructor<
-  ComponentPublicInstance<VcBreadcrumbsProps>
-> = Breadcrumbs;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcBreadcrumbsSlots = {
+  default?: () => VNode[];
+};
+
+export const VcBreadcrumbs: GlobalComponentConstructor<typeof Breadcrumbs, VcBreadcrumbsSlots> = Breadcrumbs;

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

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="items" class="tw-flex tw-items-center tw-flex-nowrap">
+  <div
+    v-if="items"
+    class="tw-flex tw-items-center tw-flex-nowrap"
+  >
     <VcBreadcrumbsItem
       v-for="(item, i) in items"
       :key="item.id"
@@ -11,9 +14,18 @@
 
 <script lang="ts" setup>
 import VcBreadcrumbsItem from "./_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue";
-import { VcBreadcrumbsProps } from "./vc-breadcrumbs-model";
 
-withDefaults(defineProps<VcBreadcrumbsProps>(), {
+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,9 @@
+import { VNode } from "vue";
+import CodeEditor from "./vc-code-editor.vue";
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcCodeEditorSlots = {
+  error?: () => VNode[];
+};
+
+export const VcCodeEditor: GlobalComponentConstructor<typeof CodeEditor, VcCodeEditorSlots> = CodeEditor;

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>