@vc-shell/framework 1.0.39 → 1.0.40

package/ui/components/molecules/vc-input/vc-input-model.ts

@@ -0,0 +1,150 @@
+import { VNode } from "vue";
+
+export interface VcInputProps {
+  /**
+   * Model of the component; Use with a listener for 'update:model-value' event OR use v-model directive
+   */
+  modelValue?: string | number | Date | null;
+  /**
+   * Input label text
+   */
+  label?: string | undefined;
+  /**
+   * Input placeholder text
+   */
+  placeholder?: string | undefined;
+  /**
+   * Input type
+   * Default value: text
+   */
+  type?:
+    | "text"
+    | "password"
+    | "email"
+    | "tel"
+    | "number"
+    | "url"
+    | "time"
+    | "date"
+    | "datetime-local"
+    | undefined;
+  /**
+   * Input description (hint) text below input component
+   */
+  hint?: string | undefined;
+  /**
+   * Appends clearable icon when a value is set;
+   * When clicked, model becomes null
+   */
+  clearable?: boolean | undefined;
+  /**
+   * Prefix
+   */
+  prefix?: string | undefined;
+  /**
+   * Suffix
+   */
+  suffix?: string | undefined;
+  /**
+   * Used to specify the name of the control; If not specified, it takes the value 'Field'
+   */
+  name?: string | undefined;
+  /**
+   * Signals the user a process is in progress by displaying a spinner
+   */
+  loading?: boolean | undefined;
+  /**
+   * Debounce amount (in milliseconds) when updating model
+   */
+  debounce?: string | number | undefined;
+  /**
+   * Put component in disabled mode
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Focus field on initial component render
+   */
+  autofocus?: boolean | undefined;
+  /**
+   * Does field have validation errors?
+   */
+  error?: boolean | undefined;
+  /**
+   * Validation error message (gets displayed only if 'error' is set to 'true')
+   */
+  errorMessage?: string | undefined;
+  /**
+   * Specify a max length of model
+   * Default value: 1024
+   */
+  maxlength?: string | number | undefined;
+  /**
+   * Input tooltip information
+   */
+  tooltip?: string | undefined;
+  /**
+   * Input required state
+   */
+  required?: boolean | undefined;
+}
+export interface VcInputEmits {
+  /**
+   * Emitted when the component needs to change the model; Is also used by v-model
+   * @param event Emitted event name
+   * @param value New model value
+   */
+  (event: "update:modelValue", value: string | number | Date | null): void;
+}
+export interface VcInputSlots {
+  /**
+   * Slot for controls
+   * @param scope
+   */
+  control: (scope: {
+    /**
+     * Field is editable
+     */
+    editable: boolean;
+    /**
+     * Field has focus
+     */
+    focused: boolean;
+    /**
+     * Field's value
+     */
+    modelValue: string | number | Date | null;
+    /**
+     * Function that emits an @input event in the context of the field
+     * @param value Value to be emitted
+     */
+    emitValue: (value: string | number | Date | null) => void;
+    /**
+     * Field placeholder text
+     */
+    placeholder?: string | undefined;
+  }) => VNode[];
+  /**
+   * Prepend outer field
+   */
+  prepend: () => VNode[];
+  /**
+   * Prepend inner field
+   */
+  "prepend-inner": () => VNode[];
+  /**
+   * Append to inner field
+   */
+  "append-inner": () => VNode[];
+  /**
+   * Append outer field
+   */
+  append: () => VNode[];
+  /**
+   * Slot for errors
+   */
+  error: () => VNode[];
+  /**
+   * Slot for hint text
+   */
+  hint: () => VNode[];
+}

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

@@ -0,0 +1,324 @@
+<template>
+  <div
+    class="vc-input"
+    :class="[
+      `vc-input_${type}`,
+      {
+        'vc-input_clearable': clearable,
+        'vc-input_error': error,
+        'vc-input_disabled': disabled,
+        'tw-pb-[20px]': error || hint,
+      },
+    ]"
+  >
+    <!-- Input label -->
+    <VcLabel v-if="label" class="tw-mb-2" :required="required">
+      <span>{{ label }}</span>
+      <template v-if="tooltip" v-slot:tooltip>{{ tooltip }}</template>
+    </VcLabel>
+
+    <div class="tw-flex tw-flex-nowrap tw-items-start">
+      <div class="tw-relative tw-flex tw-flex-auto tw-text-left">
+        <div
+          class="tw-flex tw-items-center tw-flex-nowrap tw-pr-3"
+          v-if="$slots['prepend']"
+        >
+          <slot name="prepend"></slot>
+        </div>
+        <div
+          class="tw-flex tw-flex-col tw-flex-nowrap tw-flex-auto tw-relative"
+        >
+          <div class="vc-input__field-wrapper">
+            <div class="tw-flex tw-flex-nowrap tw-flex-auto tw-h-full">
+              <div
+                class="tw-flex tw-items-center tw-flex-nowrap tw-pr-3"
+                v-if="$slots['prepend-inner']"
+              >
+                <slot name="prepend-inner"></slot>
+              </div>
+              <div class="vc-input__field">
+                <div
+                  class="tw-flex tw-items-center tw-flex-wrap tw-pr-3 tw-pointer-events-none"
+                  v-if="prefix"
+                >
+                  {{ prefix }}
+                </div>
+                <slot
+                  name="control"
+                  :editable="disabled"
+                  :focused="autofocus"
+                  :modelValue="temp"
+                  :emitValue="emitValue"
+                  :placeholder="placeholder"
+                >
+                  <input
+                    :placeholder="placeholder"
+                    :type="internalType"
+                    v-model="temp"
+                    :disabled="disabled"
+                    @input="onInput"
+                    ref="inputRef"
+                    :name="name"
+                    :maxlength="maxlength"
+                    :autofocus="autofocus"
+                    :max="maxDate"
+                    class="vc-input__input"
+                  />
+                </slot>
+                <div
+                  class="tw-flex tw-items-center tw-flex-wrap tw-pl-3 tw-pointer-events-none"
+                  v-if="suffix"
+                >
+                  {{ suffix }}
+                </div>
+                <div
+                  v-if="
+                    clearable && modelValue && !disabled && type !== 'password'
+                  "
+                  class="vc-input__clear"
+                  @click="onReset"
+                >
+                  <VcIcon size="s" icon="fas fa-times"></VcIcon>
+                </div>
+
+                <div
+                  class="vc-input__showhide"
+                  v-if="type === 'password' && internalType === 'password'"
+                  @click="internalType = 'text'"
+                >
+                  <VcIcon size="s" icon="fas fa-eye-slash"></VcIcon>
+                </div>
+
+                <div
+                  class="vc-input__showhide"
+                  v-if="type === 'password' && internalType === 'text'"
+                  @click="internalType = 'password'"
+                >
+                  <VcIcon size="s" icon="fas fa-eye"></VcIcon>
+                </div>
+              </div>
+
+              <div
+                class="tw-flex tw-items-center tw-flex-nowrap tw-pl-3"
+                v-if="$slots['append-inner']"
+              >
+                <slot name="append-inner"></slot>
+              </div>
+              <div
+                class="tw-flex tw-items-center tw-flex-nowrap tw-pl-3"
+                v-if="loading"
+              >
+                <VcIcon
+                  icon="fas fa-spinner tw-animate-spin"
+                  class="tw-text-[var(--input-clear-color)]"
+                  size="m"
+                ></VcIcon>
+              </div>
+            </div>
+          </div>
+          <div
+            class="tw-absolute tw-translate-y-full tw-left-0 tw-right-0 tw-bottom-0 tw-min-h-[20px]"
+          >
+            <Transition name="slide-up" mode="out-in">
+              <div v-if="error">
+                <slot name="error">
+                  <VcHint class="vc-input__error" v-if="errorMessage">
+                    {{ errorMessage }}
+                  </VcHint>
+                </slot>
+              </div>
+              <div v-else>
+                <slot name="hint">
+                  <VcHint class="vc-input__desc" v-if="hint">
+                    {{ hint }}
+                  </VcHint>
+                </slot>
+              </div>
+            </Transition>
+          </div>
+        </div>
+
+        <div
+          class="tw-flex tw-items-center tw-flex-nowrap tw-pl-3"
+          v-if="$slots['append']"
+        >
+          <slot name="append"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, unref, watch } from "vue";
+import { VcInputProps, VcInputEmits } from "./vc-input-model";
+
+const props = withDefaults(defineProps<VcInputProps>(), {
+  modelValue: null,
+  clearable: false,
+  required: false,
+  disabled: false,
+  type: "text",
+  name: "Field",
+  maxlength: "1024",
+});
+
+const emit = defineEmits<VcInputEmits>();
+
+let emitTimer;
+let emitValueFn;
+const temp = ref();
+const inputRef = ref();
+
+const internalType = ref(unref(props.type));
+
+const maxDate = computed(() => props.type === "date" && "9999-12-31");
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (temp.value !== props.modelValue) {
+      temp.value = props.modelValue;
+    }
+  },
+  { immediate: true }
+);
+
+// Handle input event and emit changes
+function onInput(e: Event) {
+  if (!e || !e.target) {
+    return;
+  }
+
+  const newValue = (e.target as HTMLInputElement).value;
+  emitValue(newValue);
+}
+
+function emitValue(val) {
+  emitValueFn = () => {
+    if (props.modelValue !== val) {
+      emit("update:modelValue", val);
+    }
+    emitValueFn = undefined;
+  };
+
+  if (props.debounce !== undefined) {
+    clearTimeout(emitTimer);
+    emitTimer = setTimeout(emitValueFn, +props.debounce);
+  } else {
+    emitValueFn();
+  }
+}
+
+// Handle input event to properly reset value and emit changes
+function onReset() {
+  temp.value = null;
+  emit("update:modelValue", null);
+}
+</script>
+
+<style lang="scss">
+:root {
+  --input-height: 38px;
+  --input-border-radius: 3px;
+  --input-border-color: #d3dbe9;
+  --input-border-color-error: #f14e4e;
+  --input-background-color: #ffffff;
+  --input-placeholder-color: #a5a5a5;
+  --input-clear-color: #43b0e6;
+  --input-clear-color-hover: #319ed4;
+}
+
+.vc-input {
+  @apply tw-overflow-hidden;
+
+  &_date,
+  &_datetime-local {
+    .vc-app_mobile & {
+      @apply tw-max-w-full;
+    }
+  }
+
+  &__field-wrapper {
+    @apply tw-px-3 tw-relative tw-flex tw-flex-nowrap tw-w-full tw-outline-none tw-h-[var(--input-height)] tw-min-w-0 tw-box-border tw-grow tw-border tw-border-solid tw-border-[color:var(--input-border-color)] tw-rounded-[var(--input-border-radius)] tw-bg-[color:var(--input-background-color)];
+  }
+
+  &_error &__field-wrapper {
+    @apply tw-border tw-border-solid tw-border-[color:var(--input-border-color-error)];
+  }
+
+  &__error {
+    @apply tw-mt-1 [--hint-color:var(--input-border-color-error)];
+  }
+
+  &__desc {
+    @apply tw-text-[color:var(--input-placeholder-color)] tw-mt-1 tw-break-words tw-p-0;
+  }
+
+  &__input {
+    &:-webkit-autofill,
+    &:-webkit-autofill:focus {
+      transition: background-color 600000s 0s, color 600000s 0s;
+    }
+    &[data-autocompleted] {
+      background-color: transparent !important;
+    }
+  }
+
+  &__field {
+    @apply tw-w-auto tw-min-w-0 tw-max-w-full tw-relative tw-flex tw-flex-row tw-flex-auto tw-flex-nowrap [height:inherit];
+    input {
+      @apply tw-border-none tw-outline-none tw-h-full tw-min-w-0 tw-w-full tw-box-border tw-grow;
+
+      &::-webkit-input-placeholder {
+        @apply tw-text-[color:var(--input-placeholder-color)];
+      }
+
+      &::-moz-placeholder {
+        @apply tw-text-[color:var(--input-placeholder-color)];
+      }
+
+      &::-ms-placeholder {
+        @apply tw-text-[color:var(--input-placeholder-color)];
+      }
+
+      &::placeholder {
+        @apply tw-text-[color:var(--input-placeholder-color)];
+      }
+
+      &::-ms-reveal,
+      &::-ms-clear {
+        @apply tw-hidden;
+      }
+    }
+  }
+
+  &__clear {
+    @apply tw-cursor-pointer tw-text-[color:var(--input-clear-color)] hover:tw-text-[color:var(--input-clear-color-hover)] tw-flex tw-items-center tw-pl-3;
+  }
+
+  &__showhide {
+    @apply tw-cursor-pointer tw-text-[color:var(--input-placeholder-color)] hover:tw-text-[color:var(--input-clear-color-hover)] tw-pl-3 tw-flex tw-items-center;
+  }
+
+  &_disabled &__field-wrapper,
+  &_disabled &__field {
+    @apply tw-bg-[#fafafa] tw-text-[#424242];
+  }
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.25s ease-out;
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(5px);
+}
+
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-5px);
+}
+</style>

package/ui/components/molecules/vc-input-currency/index.ts

@@ -0,0 +1,8 @@
+import { ComponentPublicInstance } from "vue";
+import { VcInputCurrencyProps } from "./vc-input-currency-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import InputCurrency from "./vc-input-currency.vue";
+
+export const VcInputCurrency: ComponentConstructor<
+  ComponentPublicInstance<VcInputCurrencyProps>
+> = InputCurrency;

package/ui/components/molecules/vc-input-currency/vc-input-currency-model.ts

@@ -0,0 +1,128 @@
+import { VNode } from "vue";
+
+export type OptionProp =
+  | ((option: string | Record<string, unknown>) => string)
+  | string
+  | undefined;
+
+export interface VcInputCurrencyProps {
+  /**
+   * Model of the currency component; Use with a listener for 'update:price' event OR use v-model:price directive
+   */
+  modelValue?: string | number | Date | null;
+  /**
+   * Input label text
+   */
+  label?: string | undefined;
+  /**
+   * Input placeholder text
+   */
+  placeholder?: string | undefined;
+  /**
+   * Input description (hint) text below input component
+   */
+  hint?: string | undefined;
+  /**
+   * Appends clearable icon when a value is set;
+   * When clicked, model becomes null
+   */
+  clearable?: boolean | undefined;
+  /**
+   * Prefix
+   */
+  prefix?: string | undefined;
+  /**
+   * Suffix
+   */
+  suffix?: string | undefined;
+  /**
+   * Used to specify the name of the control; If not specified, it takes the value 'Field'
+   */
+  name?: string | undefined;
+  /**
+   * Signals the user a process is in progress by displaying a spinner
+   */
+  loading?: boolean | undefined;
+  /**
+   * Debounce amount (in milliseconds) for search input
+   * Default: 0
+   */
+  debounce?: string | number | undefined;
+  /**
+   * Put component in disabled mode
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Focus field on initial component render
+   */
+  autofocus?: boolean | undefined;
+  /**
+   * Does field have validation errors?
+   */
+  error?: boolean | undefined;
+  /**
+   * Validation error message (gets displayed only if 'error' is set to 'true')
+   */
+  errorMessage?: string | undefined;
+  /**
+   * Specify a max length of model
+   * Default value: 1024
+   */
+  maxlength?: string | number | undefined;
+  /**
+   * Input tooltip information
+   */
+  tooltip?: string | undefined;
+  /**
+   * Input required state
+   */
+  required?: boolean | undefined;
+  /**
+   * Option label
+   */
+  option?: string | undefined;
+  /**
+   * Available options that the user can select from.
+   * Default value: []
+   */
+  options?: any[] | undefined;
+  /**
+   * Property of option which holds the 'value'
+   * Default value: id
+   * @param option The current option being processed
+   * @returns Value of the current option
+   */
+  optionValue?: OptionProp;
+  /**
+   * Property of option which holds the 'label'
+   * Default value: title
+   * @param option The current option being processed
+   * @returns Label of the current option
+   */
+  optionLabel?: OptionProp;
+}
+export interface VcInputCurrencyEmits {
+  /**
+   * Emitted when the component needs to change the model; Is also used by v-model
+   * @param event Emitted event name
+   * @param value New model value
+   */
+  (event: "update:modelValue", value: string | number | null): void;
+  /**
+   * Emitted when the component needs to change the options model; Is also used by v-model:option
+   * @param event Emitted event name
+   * @param value New model value
+   */
+  (event: "update:option", value: string | number | null): void;
+}
+export interface VcInputCurrencySlots {
+  /**
+   * Slot for custom dropdown open handler
+   */
+  button: (scope: {
+    /**
+     * Dropdown open/close handler
+     */
+    toggleHandler: () => void;
+  }) => VNode[];
+}

package/ui/components/molecules/vc-input-currency/vc-input-currency.vue

@@ -0,0 +1,86 @@
+<template>
+  <VcSelect
+    :options="options"
+    :option-label="optionLabel"
+    :option-value="optionValue"
+    :searchable="true"
+    :autofocus="true"
+    :debounce="debounce"
+    :label="label"
+    :required="required"
+    :model-value="option"
+    @update:modelValue="$emit('update:option', $event)"
+  >
+    <template v-slot:control="{ toggleHandler }">
+      <VcInput
+        :placeholder="placeholder"
+        :model-value="modelValue"
+        :hint="hint"
+        :clearable="clearable"
+        :prefix="prefix"
+        :suffix="suffix"
+        :name="name"
+        :loading="loading"
+        :disabled="disabled"
+        :autofocus="autofocus"
+        :error="error"
+        :error-message="errorMessage"
+        :maxlength="maxlength"
+        :tooltip="tooltip"
+        class="tw-w-full"
+        @update:modelValue="$emit('update:modelValue', +$event)"
+      >
+        <template v-slot:append-inner>
+          <slot name="button" :toggleHandler="toggleHandler">
+            <button
+              class="tw-text-[#43b0e6] tw-not-italic tw-font-medium tw-text-[13px] tw-leading-[20px] tw-cursor-pointer"
+              @click.stop.prevent="toggleHandler"
+            >
+              {{ option }}
+            </button>
+          </slot>
+        </template>
+        <template v-slot:control="{ placeholder }">
+          <input type="text" ref="inputRef" :placeholder="placeholder" />
+        </template>
+      </VcInput>
+    </template>
+  </VcSelect>
+</template>
+
+<script lang="ts" setup>
+import {
+  VcInputCurrencyEmits,
+  VcInputCurrencyProps,
+} from "./vc-input-currency-model";
+import { useCurrencyInput, CurrencyDisplay } from "vue-currency-input";
+import { watch } from "vue";
+
+const props = withDefaults(defineProps<VcInputCurrencyProps>(), {
+  debounce: 0,
+});
+
+defineEmits<VcInputCurrencyEmits>();
+
+const { inputRef, setOptions } = useCurrencyInput({
+  locale: navigator.language,
+  currency: props.option || "USD",
+  autoSign: false,
+  currencyDisplay: CurrencyDisplay.hidden,
+  hideGroupingSeparatorOnFocus: false,
+});
+
+// Change currency settings
+watch(
+  () => props.option,
+  (newVal) => {
+    setOptions({
+      locale: navigator.language,
+      currency: newVal,
+      autoSign: false,
+      currencyDisplay: CurrencyDisplay.hidden,
+      hideGroupingSeparatorOnFocus: false,
+    });
+  }
+);
+</script>