@volverjs/ui-vue 0.0.10-beta.15 → 0.0.10-beta.17

package/dist/components/VvIcon/index.d.ts

@@ -1,69 +1,41 @@
-import type { PropType } from 'vue';
 import type { IconifyIconOnLoad, IconifyRenderMode } from '@iconify/vue';
 export declare enum IconPrefix {
     simple = "simple",
     normal = "normal",
     detailed = "detailed"
 }
-export declare const VvIconProps: {
-    /**
-     * Color
-     */
-    color: StringConstructor;
-    /**
-     * Width
-     */
-    width: {
-        type: (StringConstructor | NumberConstructor)[];
-    };
-    /**
-     * Height
-     */
-    height: {
-        type: (StringConstructor | NumberConstructor)[];
-    };
+export type VvIconProps = {
     /**
      * Icon name
      * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
      * https://docs.iconify.design/api/providers.html#provider-in-icon-name
      */
-    name: {
-        type: StringConstructor;
-        required: boolean;
-    };
+    name: string;
+    color?: string;
+    width?: string | number;
+    height?: string | number;
     /**
-     * By default 'vv'
      * If custom collection is not added with "addCollection" DS class method, this prop could not be used
      * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
      */
-    provider: {
-        type: StringConstructor;
-    };
+    provider?: string;
     /**
+     * @default 'normal'
      * The name of icon set.
      * Icon default options prefix: simple | normal | detailed
      */
-    prefix: {
-        type: PropType<string>;
-        default: string;
-    };
+    prefix?: IconPrefix | string;
     /**
      * Url remote SVG icon
      */
-    src: StringConstructor;
-    /**
-     * Horizontal flip
-     */
-    horizontalFlip: BooleanConstructor;
-    /**
-     * Vertical flip
-     */
-    verticalFlip: BooleanConstructor;
+    src?: string;
+    horizontalFlip?: boolean;
+    verticalFlip?: boolean;
     /**
      * String alternative to "horizontalFlip" and "verticalFlip".
      * Example: https://docs.iconify.design/icon-components/vue/transform.html
      */
-    flip: StringConstructor;
+    flip?: string;
     /**
      * Icon render mode
      * 'style' = 'bg' or 'mask', depending on icon content
@@ -72,30 +44,31 @@ export declare const VvIconProps: {
      * 'svg' = svg
      * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
      */
-    mode: PropType<IconifyRenderMode>;
+    mode?: IconifyRenderMode;
     /**
      * Toggles inline or block mode
      * Example https://docs.iconify.design/icon-components/vue/inline.html
      */
-    inline: BooleanConstructor;
+    inline?: boolean;
     /**
      * rotates icon
      * Example https://docs.iconify.design/icon-components/vue/transform.html
      */
-    rotate: (StringConstructor | NumberConstructor)[];
+    rotate?: number | string;
     /**
      * A callback that is called when icon data has been loaded
      */
-    onLoad: PropType<IconifyIconOnLoad>;
+    onLoad?: IconifyIconOnLoad;
     /**
      * SVG icon string
      */
-    svg: StringConstructor;
+    svg?: string;
     /**
      * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
      * @values string | string[]
      */
-    modifiers: {
-        type: PropType<string | string[]>;
-    };
+    modifiers?: string | string[];
+};
+export declare const VvIconPropsDefaults: {
+    prefix: IconPrefix;
 };

package/dist/components/VvInputFile/VvInputFile.es.js

@@ -1,100 +1,10 @@
-import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, resolveDynamicComponent, withCtx, renderSlot, createTextVNode, toDisplayString, toRef, useAttrs, useSlots, createElementBlock, Fragment, isRef, h, onBeforeUnmount, normalizeClass, withModifiers, createVNode, createElementVNode, renderList, createSlots, normalizeProps, guardReactiveProps } from "vue";
+import { inject, computed, unref, defineComponent, mergeDefaults, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, resolveDynamicComponent, withCtx, renderSlot, createTextVNode, toDisplayString, toRef, useAttrs, useSlots, createElementBlock, Fragment, isRef, h, onBeforeUnmount, normalizeClass, withModifiers, createVNode, createElementVNode, renderList, createSlots, normalizeProps, guardReactiveProps } from "vue";
 import { useVModel } from "@vueuse/core";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
 import { uid } from "uid";
-const VvIconProps = {
-  /**
-   * Color
-   */
-  color: String,
-  /**
-   * Width
-   */
-  width: {
-    type: [String, Number]
-  },
-  /**
-   * Height
-   */
-  height: {
-    type: [String, Number]
-  },
-  /**
-   * Icon name
-   * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
-   * https://docs.iconify.design/api/providers.html#provider-in-icon-name
-   */
-  name: {
-    type: String,
-    required: true
-  },
-  /**
-   * By default 'vv'
-   * If custom collection is not added with "addCollection" DS class method, this prop could not be used
-   * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
-   */
-  provider: {
-    type: String
-  },
-  /**
-   * The name of icon set.
-   * Icon default options prefix: simple | normal | detailed
-   */
-  prefix: {
-    type: String,
-    default: "normal"
-  },
-  /**
-   * Url remote SVG icon
-   */
-  src: String,
-  /**
-   * Horizontal flip
-   */
-  horizontalFlip: Boolean,
-  /**
-   * Vertical flip
-   */
-  verticalFlip: Boolean,
-  /**
-   * String alternative to "horizontalFlip" and "verticalFlip".
-   * Example: https://docs.iconify.design/icon-components/vue/transform.html
-   */
-  flip: String,
-  /**
-   * Icon render mode
-   * 'style' = 'bg' or 'mask', depending on icon content
-   * 'bg' = span with style using `background`
-   * 'mask' = span with style using `mask`
-   * 'svg' = svg
-   * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
-   */
-  mode: String,
-  /**
-   * Toggles inline or block mode
-   * Example https://docs.iconify.design/icon-components/vue/inline.html
-   */
-  inline: Boolean,
-  /**
-   * rotates icon
-   * Example https://docs.iconify.design/icon-components/vue/transform.html
-   */
-  rotate: [Number, String],
-  /**
-   * A callback that is called when icon data has been loaded
-   */
-  onLoad: Function,
-  /**
-   * SVG icon string
-   */
-  svg: String,
-  /**
-   * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
-   * @values string | string[]
-   */
-  modifiers: {
-    type: [String, Array]
-  }
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
 };
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
@@ -183,7 +93,24 @@ const __default__$3 = {
 };
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...__default__$3,
-  props: VvIconProps,
+  props: mergeDefaults({
+    name: {},
+    color: {},
+    width: {},
+    height: {},
+    provider: {},
+    prefix: {},
+    src: {},
+    horizontalFlip: { type: Boolean },
+    verticalFlip: { type: Boolean },
+    flip: {},
+    mode: {},
+    inline: { type: Boolean },
+    rotate: {},
+    onLoad: { type: Function },
+    svg: {},
+    modifiers: {}
+  }, VvIconPropsDefaults),
   setup(__props) {
     const props = __props;
     const hasRotate = computed(() => {
@@ -291,6 +218,7 @@ const LinkProps = {
    */
   target: {
     type: String,
+    default: void 0,
     validator: (value) => Object.values(AnchorTarget).includes(value)
   },
   /**
@@ -305,27 +233,33 @@ const ValidProps = {
   /**
    * Valid status
    */
-  valid: Boolean,
+  valid: { type: Boolean, default: false },
   /**
    * Valid label
    */
-  validLabel: [String, Array]
+  validLabel: { type: [String, Array], default: void 0 }
 };
 const InvalidProps = {
   /**
    * Invalid status
    */
-  invalid: Boolean,
+  invalid: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Invalid label
    */
-  invalidLabel: [String, Array]
+  invalidLabel: { type: [String, Array], default: void 0 }
 };
 const LoadingProps = {
   /**
    * Loading status
    */
-  loading: Boolean,
+  loading: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Loading label
    */
@@ -338,47 +272,68 @@ const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
-  disabled: Boolean
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 };
 const ActiveProps = {
   /**
    * Whether the item is active
    */
-  active: Boolean
+  active: {
+    type: Boolean,
+    default: false
+  }
 };
 const CurrentProps = {
   /**
    * Whether the item is current
    */
-  current: Boolean
+  current: {
+    type: Boolean,
+    default: false
+  }
 };
 const PressedProps = {
   /**
    * Whether the item is pressed
    */
-  pressed: Boolean
+  pressed: {
+    type: Boolean,
+    default: false
+  }
 };
 const LabelProps = {
   /**
    * The item label
    */
-  label: [String, Number]
+  label: {
+    type: [String, Number],
+    default: void 0
+  }
 };
 const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
-  modifiers: [String, Array]
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
 };
 const HintProps = {
   hintLabel: { type: String, default: "" }
 };
-({
+const IconProps = {
   /**
    * VvIcon name or props
    * @see VVIcon
    */
-  icon: { type: [String, Object] },
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
    * VvIcon position
    */
@@ -387,7 +342,7 @@ const HintProps = {
     default: Position.before,
     validation: (value) => Object.values(Position).includes(value)
   }
-});
+};
 const UnselectableProps = {
   /**
    * If true the input will be unselectable
@@ -422,7 +377,8 @@ const IdProps = {
    * Dropdown show / hide transition name
    */
   transitionName: {
-    type: String
+    type: String,
+    default: void 0
   },
   /**
    * Offset of the dropdown from the trigger
@@ -490,7 +446,8 @@ const IdProps = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
 });
 const ActionProps = {
@@ -774,10 +731,7 @@ const VvButtonProps = {
   ...ModifiersProps,
   ...UnselectableProps,
   ...LoadingProps,
-  /**
-   * Button icon
-   */
-  icon: [String, Object],
+  ...IconProps,
   /**
    * Button icon position
    */
@@ -872,6 +826,41 @@ function useGroupProps(props, emit) {
   };
 }
 const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
+function useComponentIcon(icon, iconPosition) {
+  const hasIcon = computed(() => {
+    if (typeof (icon == null ? void 0 : icon.value) === "string") {
+      return { name: icon == null ? void 0 : icon.value };
+    }
+    return icon == null ? void 0 : icon.value;
+  });
+  const hasIconBefore = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.before ? hasIcon.value : void 0
+  );
+  const hasIconAfter = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.after ? hasIcon.value : void 0
+  );
+  const hasIconLeft = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.left ? hasIcon.value : void 0
+  );
+  const hasIconRight = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.right ? hasIcon.value : void 0
+  );
+  const hasIconTop = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.top ? hasIcon.value : void 0
+  );
+  const hasIconBottom = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.bottom ? hasIcon.value : void 0
+  );
+  return {
+    hasIcon,
+    hasIconLeft,
+    hasIconRight,
+    hasIconTop,
+    hasIconBottom,
+    hasIconBefore,
+    hasIconAfter
+  };
+}
 const _hoisted_1$1 = {
   key: 1,
   class: "vv-button__label"
@@ -934,9 +923,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         )
       }))
     );
-    const hasIconProps = computed(
-      () => typeof (icon == null ? void 0 : icon.value) === "string" ? { name: icon == null ? void 0 : icon.value } : icon == null ? void 0 : icon.value
-    );
+    const { hasIcon } = useComponentIcon(icon);
     const toggleValue = computed(() => {
       return props.value !== void 0 ? props.value : name.value;
     });
@@ -999,12 +986,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               { key: 1 },
               [
                 renderSlot(_ctx.$slots, "before"),
-                unref(icon) ? (openBlock(), createBlock(
+                unref(hasIcon) ? (openBlock(), createBlock(
                   _sfc_main$3,
-                  mergeProps({
-                    key: 0,
-                    class: "vv-button__icon"
-                  }, unref(hasIconProps)),
+                  mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-button__icon" }),
                   null,
                   16
                   /* FULL_PROPS */
@@ -1231,9 +1215,11 @@ const _hoisted_4 = ["src", "alt"];
 const _hoisted_5 = { class: "vv-input-file__wrapper" };
 const _hoisted_6 = ["id", "placeholder", "aria-describedby", "aria-invalid", "aria-errormessage", "multiple", "accept", "name"];
 const _hoisted_7 = { class: "vv-input-file__list" };
-const _hoisted_8 = { class: "vv-input-file__item-name" };
-const _hoisted_9 = { class: "vv-input-file__item-info" };
-const _hoisted_10 = ["onClick"];
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = { class: "vv-input-file__item-name cursor-pointer" };
+const _hoisted_11 = { class: "vv-input-file__item-info" };
+const _hoisted_12 = ["onClick"];
 const __default__ = {
   name: "VvInputFile"
 };
@@ -1356,14 +1342,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       toReturn.splice(index, 1);
       localModelValue.value = toReturn;
     };
+    const currentFileIndex = ref(0);
     const previewSrc = computed(() => {
       if (files.value.length === 0) {
         return;
       }
-      if (files.value[0] instanceof File) {
-        return URL.createObjectURL(files.value[0]);
+      if (files.value[currentFileIndex.value] instanceof File) {
+        return URL.createObjectURL(
+          files.value[currentFileIndex.value]
+        );
       }
-      return files.value[0].url;
+      return files.value[currentFileIndex.value].url;
     });
     onBeforeUnmount(() => {
       if (previewSrc.value) {
@@ -1376,6 +1365,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return Math.floor(size / 1024);
     };
+    const onClickDownloadFile = (file) => {
+      const link = document.createElement("a");
+      if (file instanceof File) {
+        link.href = URL.createObjectURL(file);
+      } else if (file.url) {
+        link.href = file.url;
+      }
+      link.setAttribute("download", file.name);
+      document.body.appendChild(link);
+      link.click();
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         "div",
@@ -1405,14 +1405,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: normalizeClass([{
                   "absolute top-8 right-8": previewSrc.value
                 }, "z-1"]),
-                icon: !previewSrc.value ? "image" : "edit",
+                icon: !previewSrc.value ? "image" : isMultiple.value ? "add" : "edit",
                 onClick: withModifiers(onClick, ["stop"])
               }, null, 8, ["label", "class", "icon", "onClick"]),
               createElementVNode("picture", _hoisted_3, [
                 previewSrc.value ? (openBlock(), createElementBlock("img", {
                   key: 0,
                   src: previewSrc.value,
-                  alt: files.value[0].name
+                  alt: files.value[currentFileIndex.value].name
                 }, null, 8, _hoisted_4)) : createCommentVNode("v-if", true)
               ])
             ])
@@ -1448,22 +1448,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               renderList(files.value, (file, index) => {
                 return openBlock(), createElementBlock("li", {
                   key: index,
-                  class: "vv-input-file__item"
+                  class: "vv-input-file__item",
+                  onClick: withModifiers(($event) => currentFileIndex.value = index, ["stop"])
                 }, [
-                  createVNode(_sfc_main$3, {
-                    class: "vv-input-file__item-icon",
-                    name: "akar-icons:file"
-                  }),
+                  createElementVNode("button", {
+                    type: "button",
+                    class: "vv-input-file__item-icon cursor-pointer",
+                    title: "Download",
+                    "aria-label": "download-file",
+                    onClick: withModifiers(($event) => onClickDownloadFile(file), ["stop"])
+                  }, [
+                    createVNode(_sfc_main$3, { name: "download" })
+                  ], 8, _hoisted_9),
                   createElementVNode(
                     "div",
-                    _hoisted_8,
+                    _hoisted_10,
                     toDisplayString(file.name),
                     1
                     /* TEXT */
                   ),
                   createElementVNode(
                     "small",
-                    _hoisted_9,
+                    _hoisted_11,
                     toDisplayString(sizeInKiB(file.size)) + " KB ",
                     1
                     /* TEXT */
@@ -1474,8 +1480,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     title: "Remove",
                     "aria-label": "remove-file",
                     onClick: withModifiers(($event) => onClickRemoveFile(index), ["stop"])
-                  }, null, 8, _hoisted_10)
-                ]);
+                  }, null, 8, _hoisted_12)
+                ], 8, _hoisted_8);
               }),
               128
               /* KEYED_FRAGMENT */