@privyid/persona 0.3.0 → 0.5.0

package/dist/components/input/Input.vue

@@ -1,53 +1,148 @@
 <template>
-  <input
-    v-model="value"
-    :disabled="disabled"
-    :readonly="readonly"
-    data-testid="input"
-    class="input">
+  <div
+    class="input"
+    data-testid="input-container">
+    <slot name="prepend" />
+    <input
+      v-model="model"
+      class="input__form"
+      data-testid="input"
+      :disabled="disabled"
+      :readonly="readonly"
+      :class="classNames"
+      v-bind="$attrs">
+    <IconClear
+      v-show="(clearable && model)"
+      class="input__clear"
+      data-testid="input-clear"
+      @click="clear" />
+    <slot name="append" />
+  </div>
 </template>
 
 <script>
-import { defineComponent } from "vue-demi";
-import { useVModel } from "./use-input";
+import {
+  computed,
+  defineComponent
+} from "vue-demi";
+import { useVModel } from ".";
+import IconClear from "@carbon/icons-vue/lib/close--filled/16";
 export default defineComponent({
+  components: { IconClear },
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: [String, Number],
       default: ""
     },
-    disabled: { type: Boolean },
-    readonly: { type: Boolean }
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    error: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    }
   },
   models: {
     prop: "modelValue",
     event: "update:modelValue"
   },
-  emits: ["update:modelValue"],
-  setup(props) {
-    const value = useVModel(props);
-    return { value };
+  emits: ["update:modelValue", "clear"],
+  setup(props, { emit }) {
+    const model = useVModel(props);
+    const classNames = computed(() => {
+      const result = [];
+      if (props.size)
+        result.push(`input--${props.size}`);
+      if (props.disabled)
+        result.push("input--disabled");
+      if (props.readonly)
+        result.push("input--readonly");
+      if (props.error)
+        result.push("input--error", "state--error");
+      if (props.clearable)
+        result.push("input--clearable");
+      return result;
+    });
+    function clear() {
+      if (!props.disabled && !props.readonly)
+        model.value = "";
+      emit("clear");
+    }
+    return {
+      classNames,
+      model,
+      clear
+    };
   }
 });
 </script>
 
 <style lang="postcss">
 .input {
-  @apply px-3 py-2 rounded-sm border border-secondary-25 border-solid placeholder:text-subtext-75 w-full outline-none bg-white;
+  @apply w-full relative bg-default;
+
+  &__form {
+    @apply py-[10px] px-3 text-base relative rounded border border-solid border-muted hover:border-subtle placeholder:text-muted w-full outline-none ;
+
+    &:disabled,
+    &--disabled,
+    .state--disabled & {
+      @apply bg-muted border-muted pointer-events-none text-muted;
+    }
+
+    &:focus {
+      @apply border-subtle ring-4 ring-subtle/10 z-[1];
+    }
+  }
 
-  &:disabled,
-  &--disabled {
-    @apply opacity-50 pointer-events-none;
+  &--xs {
+    @apply text-xs px-3 py-2;
   }
 
-  &:focus {
-    @apply border-secondary-75 ring ring-secondary-25 ring-opacity-30;
+  &--sm {
+    @apply px-3 py-2;
   }
 
-  &[type="number"] {
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      @apply appearance-none m-0;
+  &--md {
+    @apply px-3 py-3;
+  }
+
+  &--lg {
+    @apply px-3 py-4;
+  }
+
+  .state--error &__form,
+  &--error {
+    @apply border-danger-emphasis hover:border-danger-emphasis;
+
+    &:focus {
+      @apply ring-danger border-danger-emphasis;
+    }
+  }
+
+  .input__clear {
+    @apply cursor-pointer hover:text-danger z-1;
+  }
+
+  &--clearable {
+    @apply pr-9;
+
+    + .input__clear {
+      @apply absolute right-3 top-1/2 -translate-y-1/2;
     }
   }
 }

package/dist/components/input/Input.vue.d.ts

@@ -1,32 +1,68 @@
+import { PropType } from 'vue-demi';
+import { SizeVariant } from '../button';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
         type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
     disabled: {
         type: BooleanConstructor;
+        default: boolean;
     };
     readonly: {
         type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
     };
 }, {
-    value: import("vue-demi").Ref<string | number>;
-}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    classNames: import("vue-demi").ComputedRef<string[]>;
+    model: import("vue-demi").Ref<string | number>;
+    clear: () => void;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "clear")[], "update:modelValue" | "clear", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
         type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
     disabled: {
         type: BooleanConstructor;
+        default: boolean;
     };
     readonly: {
         type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
     };
 }>> & {
     "onUpdate:modelValue"?: (...args: any[]) => any;
+    onClear?: (...args: any[]) => any;
 }, {
+    error: boolean;
+    size: SizeVariant;
     disabled: boolean;
     modelValue: string | number;
     readonly: boolean;
+    clearable: boolean;
 }>;
 export default _default;

package/dist/components/input-file/InputFile.vue

@@ -0,0 +1,171 @@
+<template>
+  <p-dropzone
+    ref="dropzone"
+    v-model="model"
+    class="input-file"
+    :class="classNames"
+    :model-modifiers="modelModifiers"
+    :multiple="multiple"
+    :maxlength="maxlength"
+    :accept="accept"
+    :disabled="disabled"
+    :readonly="readonly"
+    :clear-on-cancel="clearOnCancel">
+    <template #default="{ browse, rawModel }">
+      <p-input-group
+        :disabled="disabled"
+        :error="error"
+        :size="size">
+        <p-input-group-addon>
+          <p-button
+            :disabled="disabled"
+            :readonly="readonly"
+            @click="browse">
+            {{ browseLabel }}
+          </p-button>
+        </p-input-group-addon>
+        <p-input
+          readonly
+          :model-value="getFileNames(rawModel)"
+          :placeholder="placeholder" />
+      </p-input-group>
+    </template>
+  </p-dropzone>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent
+} from "vue-demi";
+import { useVModel } from "../input";
+import pDropzone from "../dropzone/Dropzone.vue";
+import pInput from "../input/Input.vue";
+import pInputGroup from "../input-group/InputGroup.vue";
+import pInputGroupAddon from "../input-group/InputGroupAddon.vue";
+import pButton from "../button/Button.vue";
+export default defineComponent({
+  components: {
+    pDropzone,
+    pInput,
+    pInputGroup,
+    pInputGroupAddon,
+    pButton
+  },
+  props: {
+    modelValue: {
+      type: [
+        globalThis.File,
+        Array,
+        String
+      ],
+      default: void 0
+    },
+    modelModifiers: {
+      type: Object,
+      default: () => ({})
+    },
+    multiple: {
+      type: [Boolean, String],
+      default: false
+    },
+    maxlength: {
+      type: [Number, String],
+      default: void 0
+    },
+    accept: {
+      type: String,
+      default: ""
+    },
+    clearOnCancel: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: "No file chosen"
+    },
+    browseLabel: {
+      type: String,
+      default: "Choose file"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    error: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: "md"
+    }
+  },
+  setup(props) {
+    const model = useVModel(props);
+    const classNames = computed(() => {
+      const result = [];
+      if (props.readonly)
+        result.push("input-file--readonly");
+      if (props.disabled)
+        result.push("input-file--disabled");
+      if (props.error)
+        result.push("input-file--error");
+      return result;
+    });
+    function getFileNames(files) {
+      return Array.isArray(files) ? files.map((file) => file.name).join(", ") : files?.name ?? "";
+    }
+    return {
+      model,
+      classNames,
+      getFileNames
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.input-file {
+  > .input-group > .input-group__addon {
+    @apply p-1;
+
+    > .btn {
+      @apply py-0 px-3 h-full items-center;
+    }
+  }
+
+  &--disabled,
+  &:disabled {
+    .input-group__addon,
+    .input-group .input__form {
+      @apply bg-muted border-muted text-muted;
+    }
+  }
+
+  &:hover {
+    .input-group__addon,
+    .input-group .input__form {
+      @apply border-subtle;
+    }
+  }
+
+  &&--disabled {
+    > .input-group > .input-group__addon > .btn {
+      @apply opacity-100;
+    }
+  }
+
+  &&--error {
+    .input-group__addon,
+    .input-group .input__form {
+      @apply border-danger-emphasis;
+    }
+  }
+}
+</style>

package/dist/components/input-file/InputFile.vue.d.ts

@@ -0,0 +1,120 @@
+import { PropType } from 'vue-demi';
+import { ModelModifier, MultipleType } from '../dropzone';
+import { SizeVariant } from '../button';
+declare const _default: import("vue-demi").DefineComponent<{
+    modelValue: {
+        type: PropType<string | string[] | File | File[]>;
+        default: any;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    multiple: {
+        type: PropType<boolean | MultipleType>;
+        default: boolean;
+    };
+    maxlength: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: any;
+    };
+    accept: {
+        type: StringConstructor;
+        default: string;
+    };
+    clearOnCancel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    browseLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+}, {
+    model: import("vue-demi").Ref<string | string[] | File | File[]>;
+    classNames: import("vue-demi").ComputedRef<string[]>;
+    getFileNames: (files: Array<globalThis.File> | globalThis.File) => string;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    modelValue: {
+        type: PropType<string | string[] | File | File[]>;
+        default: any;
+    };
+    modelModifiers: {
+        type: PropType<ModelModifier>;
+        default: () => ModelModifier;
+    };
+    multiple: {
+        type: PropType<boolean | MultipleType>;
+        default: boolean;
+    };
+    maxlength: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: any;
+    };
+    accept: {
+        type: StringConstructor;
+        default: string;
+    };
+    clearOnCancel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    browseLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+}>>, {
+    error: boolean;
+    size: SizeVariant;
+    disabled: boolean;
+    modelValue: string | string[] | File | File[];
+    readonly: boolean;
+    modelModifiers: ModelModifier;
+    multiple: boolean | MultipleType;
+    placeholder: string;
+    accept: string;
+    maxlength: string | number;
+    clearOnCancel: boolean;
+    browseLabel: string;
+}>;
+export default _default;

package/dist/components/input-group/InputGroup.vue

@@ -0,0 +1,131 @@
+<template>
+  <div
+    class="input-group"
+    data-testid="input-group"
+    :class="classNames">
+    <slot />
+  </div>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent
+} from "vue-demi";
+export default defineComponent({
+  props: {
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    error: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const classNames = computed(() => {
+      const result = [];
+      if (props.size)
+        result.push(`input-group--${props.size}`);
+      if (props.disabled)
+        result.push("input-group--disabled", "state--disabled");
+      if (props.readonly)
+        result.push("input-group--readonly");
+      if (props.error)
+        result.push("input-group--error", "state--error");
+      return result;
+    });
+    return { classNames };
+  }
+});
+</script>
+
+<style lang="postcss">
+.input-group {
+  @apply flex w-full;
+
+  > .input-group__addon:not(:first-child),
+  > .input:not(:first-child) > .input__form,
+  > .select:not(:first-child) > .input > .input__form {
+    @apply rounded-l-none border-l-0;
+  }
+
+  > .input-group__addon:not(:last-child),
+  > .input:not(:last-child) > .input__form,
+  > .select:not(:last-child) > .input > .input__form {
+    @apply rounded-r-none border-r-0;
+
+  }
+
+  .input,
+  .select > .input {
+    > .input__form {
+      &:focus,
+      &:hover {
+        @apply border-r border-l;
+      }
+    }
+  }
+
+  > .btn:not(:first-child) {
+    @apply rounded-l-none;
+  }
+
+  > .btn:not(:last-child) {
+    @apply rounded-r-none;
+  }
+
+  &__addon {
+    @apply flex-shrink-0;
+  }
+
+  &&--xs {
+    .input > .input__form {
+      @apply text-xs px-3 py-2;
+    }
+
+    .btn {
+      @apply px-2 py-1 gap-1 text-sm;
+    }
+  }
+
+  &&--sm {
+    .input > .input__form {
+      @apply px-3 py-2;
+    }
+
+    .btn {
+      @apply px-4 py-2 gap-2 text-base;
+    }
+  }
+
+  &&--md {
+    .input > .input__form {
+      @apply px-3 py-3;
+    }
+
+    .btn {
+      @apply px-5 py-3 gap-3 text-base;
+    }
+  }
+
+  &&--lg {
+    .input > .input__form {
+      @apply px-3 py-4;
+    }
+
+    .btn {
+      @apply px-8 py-4 gap-4 text-base;
+    }
+  }
+}
+</style>

package/dist/components/input-group/InputGroup.vue.d.ts

@@ -0,0 +1,45 @@
+import { PropType } from 'vue-demi';
+import { SizeVariant } from '../button';
+declare const _default: import("vue-demi").DefineComponent<{
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    classNames: import("vue-demi").ComputedRef<string[]>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    size: {
+        type: PropType<SizeVariant>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    error: boolean;
+    size: SizeVariant;
+    disabled: boolean;
+    readonly: boolean;
+}>;
+export default _default;