@vc-shell/framework 1.0.52 → 1.0.54

package/ui/components/organisms/vc-blade/_internal/vc-blade-header/vc-blade-header.vue

@@ -2,16 +2,21 @@
   <div
     class="tw-shrink-0 tw-h-[var(--blade-header-height)] tw-bg-[color:var(--blade-header-background-color)] tw-flex tw-items-center tw-py-0 tw-px-4 tw-border-solid tw-border-b tw-border-b-[color:#eaedf3]"
   >
-    <div v-if="icon" class="tw-text-[color:var(--blade-header-icon-color)] tw-mr-3">
-      <VcIcon :icon="icon" size="xxl"></VcIcon>
+    <div
+      v-if="icon"
+      class="tw-text-[color:var(--blade-header-icon-color)] tw-mr-3"
+    >
+      <VcIcon
+        :icon="icon"
+        size="xxl"
+      ></VcIcon>
     </div>
 
     <div class="tw-overflow-hidden tw-grow tw-basis-0">
       <div
         class="tw-text-[color:var(--blade-header-title-color)] tw-text-lg tw-truncate"
         :class="{
-          '!tw-text-[length:var(--blade-header-title-font-size)] tw-font-medium':
-            !subtitle,
+          '!tw-text-[length:var(--blade-header-title-font-size)] tw-font-medium': !subtitle,
         }"
       >
         {{ title }}
@@ -28,17 +33,30 @@
       <slot name="actions"></slot>
     </div>
 
-    <div v-if="!$isMobile.value" class= "tw-flex tw-items-center">
+    <div
+      v-if="!$isMobile.value"
+      class="tw-flex tw-items-center"
+    >
       <template v-if="expandable">
         <div
           v-if="expanded"
           class="tw-text-[color:var(--blade-header-button-color)] tw-ml-4 tw-cursor-pointer hover:tw-text-[color:var(--blade-header-button-color-hover)]"
           @click="onCollapse"
         >
-          <VcIcon icon="fas fa-window-minimize" size="s"></VcIcon>
+          <VcIcon
+            icon="fas fa-window-minimize"
+            size="s"
+          ></VcIcon>
         </div>
-        <div v-else class="vc-blade-header__button" @click="onExpand">
-          <VcIcon icon="fas fa-window-maximize" size="s"></VcIcon>
+        <div
+          v-else
+          class="vc-blade-header__button"
+          @click="onExpand"
+        >
+          <VcIcon
+            icon="fas fa-window-maximize"
+            size="s"
+          ></VcIcon>
         </div>
       </template>
       <div
@@ -53,38 +71,20 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "@/ui/components";
-
-const props = defineProps({
-  expandable: {
-    type: Boolean,
-    default: false,
-  },
-
-  expanded: {
-    type: Boolean,
-    default: false,
-  },
-
-  closable: {
-    type: Boolean,
-    default: false,
-  },
-
-  title: {
-    type: String,
-    default: undefined,
-  },
-
-  subtitle: {
-    type: String,
-    default: undefined,
-  },
-
-  icon: {
-    type: String,
-    default: undefined,
-  },
+import { VcIcon } from "./../../../../../../ui/components";
+
+export interface Props {
+  expandable?: boolean | undefined;
+  expanded?: boolean | undefined;
+  closable?: boolean | undefined;
+  title?: string | undefined;
+  subtitle?: string | undefined;
+  icon?: string | undefined;
+}
+const props = withDefaults(defineProps<Props>(), {
+  expandable: false,
+  expanded: false,
+  closable: false,
 });
 
 const emit = defineEmits(["close", "expand", "collapse"]);

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue

@@ -6,13 +6,19 @@
     :title="title as string"
   >
     <div ref="dropButtonRef">
-      <div class="vc-blade-toolbar-button__wrap" ref="bladeDropToggle">
+      <div
+        class="vc-blade-toolbar-button__wrap"
+        ref="bladeDropToggle"
+      >
         <VcIcon
           class="vc-blade-toolbar-button__icon"
           :icon="icon as string"
           size="m"
         ></VcIcon>
-        <div v-if="isExpanded" class="vc-blade-toolbar-button__title">
+        <div
+          v-if="isExpanded"
+          class="vc-blade-toolbar-button__title"
+        >
           {{ title }}
         </div>
       </div>
@@ -49,12 +55,18 @@ export default defineComponent({
 </script>
 
 <script lang="ts" setup>
-import { VcIcon } from "@/ui/components";
+import { VcIcon } from "./../../../../../../../components";
 import { createPopper, Instance } from "@popperjs/core";
-import { IBladeDropdownItem, IBladeToolbar } from "@/core/types";
+import { IBladeDropdownItem } from "./../../../../../../../../core/types";
 
-export interface Props extends IBladeToolbar {
+export interface Props {
   isExpanded: boolean;
+  icon?: string | (() => string);
+  title?: string | unknown;
+  bladeOptions?: Record<string, unknown>;
+  disabled?: boolean;
+  dropdownItems?: { id: number; title: string; icon?: string; clickHandler?(): void }[];
+  clickHandler?(): void;
 }
 
 export interface Emits {
@@ -140,15 +152,9 @@ function handleDropItemClick(item: IBladeDropdownItem) {
   --blade-toolbar-button-icon-color-hover: #257fad;
   --blade-toolbar-button-icon-color-disabled: #d2d4d7;
 
-  --blade-toolbar-button-background-color: var(
-    --blade-toolbar-background-color
-  );
-  --blade-toolbar-button-background-color-hover: var(
-    --blade-toolbar-background-color
-  );
-  --blade-toolbar-button-background-color-disabled: var(
-    --blade-toolbar-background-color
-  );
+  --blade-toolbar-button-background-color: var(--blade-toolbar-background-color);
+  --blade-toolbar-button-background-color-hover: var(--blade-toolbar-background-color);
+  --blade-toolbar-button-background-color-disabled: var(--blade-toolbar-background-color);
 }
 
 .vc-blade-toolbar-button {

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/vc-blade-toolbar.vue

@@ -4,14 +4,20 @@
     class="tw-h-[var(--blade-toolbar-height)] tw-bg-[color:var(--blade-toolbar-background-color)] tw-border-b-[color:#eaedf3] tw-border-solid tw-border-b tw-flex tw-box-border tw-w-full tw-content-center tw-items-stretch tw-shrink-0"
     :class="{ '!tw-h-[var(--blade-toolbar-height-expanded)]': isExpanded }"
   >
-    <div
-      class="tw-grow tw-basis-0 tw-flex tw-content-start tw-items-center tw-overflow-x-auto tw-px-2"
-    >
-      <template v-for="item in items" :key="item.id">
+    <div class="tw-grow tw-basis-0 tw-flex tw-content-start tw-items-center tw-overflow-x-auto tw-px-2">
+      <template
+        v-for="item in items"
+        :key="item.id"
+      >
         <VcBladeToolbarButton
           v-if="item.isVisible === undefined || item.isVisible"
-          v-bind="item"
           :isExpanded="isExpanded"
+          :icon="item.icon"
+          :title="item.title"
+          :bladeOptions="item.bladeOptions"
+          :disabled="item.disabled as boolean"
+          :dropdownItems="item.dropdownItems"
+          :clickHandler="item.clickHandler"
         />
       </template>
     </div>
@@ -24,7 +30,7 @@
 </template>
 
 <script lang="ts" setup>
-import { IBladeToolbar } from "@/core/types";
+import { IBladeToolbar } from "./../../../../../../core/types";
 import { ref } from "vue";
 import VcBladeToolbarButton from "./_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue";
 
@@ -38,18 +44,14 @@ const props = withDefaults(defineProps<Props>(), {
 
 const isExpanded = ref(true);
 try {
-  isExpanded.value =
-    localStorage.getItem("VC_BLADE_TOOLBAR_IS_EXPANDED") === "true";
+  isExpanded.value = localStorage.getItem("VC_BLADE_TOOLBAR_IS_EXPANDED") === "true";
 } catch (err) {
   isExpanded.value = true;
 }
 
 function toggleToolbar() {
   isExpanded.value = !isExpanded.value;
-  localStorage.setItem(
-    "VC_BLADE_TOOLBAR_IS_EXPANDED",
-    isExpanded.value.toString()
-  );
+  localStorage.setItem("VC_BLADE_TOOLBAR_IS_EXPANDED", isExpanded.value.toString());
 }
 
 function isToolbarVisible() {

package/ui/components/organisms/vc-blade/index.ts

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcBladeEmits, VcBladeProps } from "./vc-blade-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import Blade from "./vc-blade.vue";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const VcBlade: ComponentConstructor<ComponentPublicInstance<VcBladeProps, any, any, any, any, VcBladeEmits>> =
+  Blade;

package/ui/components/organisms/vc-blade/vc-blade-model.ts

@@ -0,0 +1,37 @@
+import { IBladeToolbar } from "./../../../../core/types";
+import { PropType, VNode } from "vue";
+import { ExtractTypes } from "./../../../types/ts-helpers";
+
+export const bladeProps = {
+  icon: String,
+  title: String,
+  subtitle: String,
+  width: {
+    type: [Number, String],
+    default: "30%",
+  },
+  expanded: {
+    type: Boolean,
+    default: false,
+  },
+  closable: {
+    type: Boolean,
+    default: true,
+  },
+  toolbarItems: {
+    type: Array as PropType<IBladeToolbar[]>,
+    default: () => [],
+  },
+};
+
+export const bladeEmits = {
+  close: () => true,
+};
+
+export type VcBladeProps = ExtractTypes<typeof bladeProps>;
+export type VcBladeEmits = typeof bladeEmits;
+
+export interface VcBladeSlots {
+  actions: () => VNode[];
+  default: () => VNode[];
+}

package/ui/components/organisms/vc-blade/vc-blade.stories.ts

@@ -19,8 +19,7 @@ const Template: Story = (args) => ({
   setup() {
     return { args };
   },
-  template:
-    '<vc-blade v-bind="args"><div class="p-4">Blade Contents</div></vc-blade>',
+  template: '<vc-blade v-bind="args"><div class="p-4">Blade Contents</div></vc-blade>',
 });
 
 export const Blade = Template.bind({});

package/ui/components/organisms/vc-blade/vc-blade.vue

@@ -2,10 +2,7 @@
   <div
     class="vc-blade tw-relative tw-flex tw-shrink-0 tw-flex-col tw-bg-[color:var(--blade-background-color)] tw-rounded-[var(--blade-border-radius)] tw-shadow-[2px_2px_8px_rgba(126,142,157,0.14)] tw-my-4 tw-mx-2 tw-overflow-hidden tw-transition-[width] tw-duration-200"
     :style="{ width: typeof width === 'number' ? `${width}px` : width }"
-    :class="[
-      $attrs.class,
-      { '!tw-w-full !tw-shrink': $isMobile.value || expanded },
-    ]"
+    :class="[$attrs.class, { '!tw-w-full !tw-shrink': $isMobile.value || expanded }]"
   >
     <!-- Init blade header -->
     <VcBladeHeader
@@ -18,20 +15,26 @@
       :subtitle="subtitle"
       @close="$emit('close')"
     >
-      <template v-slot:actions v-if="$slots['actions']">
+      <template
+        v-slot:actions
+        v-if="$slots['actions']"
+      >
         <slot name="actions"></slot>
       </template>
     </VcBladeHeader>
 
     <!-- Set up blade toolbar -->
-    <VcBladeToolbar class="tw-shrink-0" :items="toolbarItems"></VcBladeToolbar>
+    <VcBladeToolbar
+      class="tw-shrink-0"
+      :items="toolbarItems"
+    ></VcBladeToolbar>
 
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent } from "vue";
 
 export default defineComponent({
   inheritAttrs: false,
@@ -41,41 +44,11 @@ export default defineComponent({
 <script lang="ts" setup>
 import VcBladeHeader from "./_internal/vc-blade-header/vc-blade-header.vue";
 import VcBladeToolbar from "./_internal/vc-blade-toolbar/vc-blade-toolbar.vue";
-import { IBladeToolbar } from "@/core/types";
-
-defineProps({
-  icon: {
-    type: String,
-  },
-
-  title: {
-    type: String,
-  },
-
-  subtitle: {
-    type: String,
-  },
+import { bladeEmits, bladeProps } from "./vc-blade-model";
 
-  width: {
-    type: [Number, String],
-    default: "30%",
-  },
+defineProps(bladeProps);
 
-  expanded: {
-    type: Boolean,
-    default: false,
-  },
-
-  closable: {
-    type: Boolean,
-    default: true,
-  },
-
-  toolbarItems: {
-    type: Array as PropType<IBladeToolbar[]>,
-    default: () => [],
-  },
-});
+defineEmits(bladeEmits);
 </script>
 
 <style lang="scss">

package/ui/components/organisms/vc-dynamic-property/index.ts

@@ -0,0 +1,5 @@
+import { ComponentPublicInstance } from "vue";
+import { VcDynamicPropertyProps } from "./vc-dynamic-property-model";
+import { ComponentConstructor } from "./../../../types/ts-helpers";
+import DynamicProperty from "./vc-dynamic-property.vue";
+export const VcDynamicProperty: ComponentConstructor<ComponentPublicInstance<VcDynamicPropertyProps>> = DynamicProperty;

package/ui/components/organisms/vc-dynamic-property/vc-dynamic-property-model.ts

@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ExtractTypes } from "./../../../types/ts-helpers";
+import { VNode, PropType } from "vue";
+
+export const dynamicPropertyProps = {
+  property: Object as PropType<{
+    [x: string]: any;
+    displayNames?: { languageCode: string; name: string }[];
+    name?: string | undefined;
+    dictionary?: string | undefined;
+    isDictionary?: string | undefined;
+    multivalue?: string | undefined;
+    displayName?: string | undefined;
+    defaultValue?: string | undefined;
+    valueType?: "ShortText" | "Number" | "Integer" | "DateTime" | "LongText" | "Boolean" | "Html" | undefined;
+    values?: any | undefined;
+    required?: boolean | undefined;
+    isRequired?: boolean | undefined;
+    validationRule?:
+      | {
+          charCountMin?: string;
+          charCountMax?: string;
+          regExp?: string;
+        }
+      | undefined;
+  }>,
+  dictionaries: Object as PropType<Record<string, any>>,
+  getter: Function as PropType<
+    (
+      property: Record<string, any>,
+      isDictionary?: boolean
+    ) => Record<string, any> | string | number | boolean | Date | undefined
+  >,
+  optionsGetter: Function as PropType<
+    (property: Record<string, any>, keyword?: string) => Promise<any[] | undefined> | any[]
+  >,
+  setter: Function as PropType<
+    (
+      property: Record<string, any>,
+      value: Record<string, any> | string | number | boolean,
+      dictionary?: any[]
+    ) => void | undefined
+  >,
+  culture: {
+    type: String,
+    default: "en-US",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type VcDynamicPropertyProps = ExtractTypes<typeof dynamicPropertyProps>;
+
+export interface VcDynamicPropertySlots {
+  default: () => VNode[];
+}