@privyid/persona 0.3.0

package/dist/components/filterbar/Filterbar.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="filterbar">
+    <template
+      v-for="item in pinnedItems"
+      :key="item.key">
+      <slot :name="`cell(${item.key})`">
+        <component
+          :is="item.type"
+          class="filterbar__item"
+          :schema="item"
+          :model-value="getValue(item.key)"
+          v-bind="item"
+          @update:model-value="setValue(item.key, $event)" />
+      </slot>
+    </template>
+    <Button
+      variant="link"
+      @click="reset">
+      Reset
+    </Button>
+  </div>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent
+} from "vue-demi";
+import Dropdown from "../dropdown/Dropdown.vue";
+import Button from "../button/Button.vue";
+import Select from "./pinned/Select.vue";
+import Toggle from "./pinned/Toggle.vue";
+import Multiselect from "./pinned/Multiselect.vue";
+import Date from "./pinned/Date.vue";
+import { useVModel } from "../input/use-input";
+export default defineComponent({
+  components: {
+    Button,
+    Dropdown,
+    Date,
+    Select,
+    Multiselect,
+    Toggle
+  },
+  props: {
+    schema: {
+      type: Array,
+      default: () => []
+    },
+    modelValue: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const model = useVModel(props);
+    const pinnedItems = computed(() => {
+      return props.schema.filter((item) => {
+        return item.pinned !== false;
+      });
+    });
+    function getValue(key) {
+      return model.value[key];
+    }
+    function setValue(key, value) {
+      model.value = { ...model.value, [key]: value };
+    }
+    function reset() {
+      model.value = Object.fromEntries(props.schema.map((i) => [i.key, i.default]));
+    }
+    return {
+      model,
+      pinnedItems,
+      getValue,
+      setValue,
+      reset
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.filterbar {
+  @apply flex gap-2;
+
+  &__item {
+    &.filterbar--active {
+      &.btn--input,
+      & .dropdown__activator.btn--input {
+        @apply bg-body-100 text-white;
+      }
+    }
+  }
+}
+</style>

package/dist/components/filterbar/Filterbar.vue.d.ts

@@ -0,0 +1,33 @@
+import { PropType } from 'vue-demi';
+import { FilterItem } from './use-filterbar';
+declare const _default: import("vue-demi").DefineComponent<{
+    schema: {
+        type: PropType<FilterItem[]>;
+        default: () => any[];
+    };
+    modelValue: {
+        type: PropType<Record<string, unknown>>;
+        default: () => {};
+    };
+}, {
+    model: import("vue-demi").Ref<Record<string, unknown>>;
+    pinnedItems: import("vue-demi").ComputedRef<FilterItem[]>;
+    getValue: (key: string) => unknown;
+    setValue: (key: string, value: unknown) => void;
+    reset: () => void;
+}, 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<{
+    schema: {
+        type: PropType<FilterItem[]>;
+        default: () => any[];
+    };
+    modelValue: {
+        type: PropType<Record<string, unknown>>;
+        default: () => {};
+    };
+}>> & {
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {
+    modelValue: Record<string, unknown>;
+    schema: FilterItem[];
+}>;
+export default _default;

package/dist/components/filterbar/pinned/Date.vue

@@ -0,0 +1,99 @@
+<template>
+  <Dropdown
+    v-model="isOpen"
+    variant="input"
+    class="filterbar__date"
+    :class="{'filterbar--active': !!value }"
+    caret>
+    <template #button-content>
+      {{ value ? value : schema.label }}
+    </template>
+    <Caption
+      class="px-3 py-2"
+      bold>
+      {{ schema.label }}
+    </Caption>
+
+    <Calendar
+      v-model="model"
+      :min="min"
+      :max="max"
+      :mode="mode"
+      @change="close" />
+  </Dropdown>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent,
+  ref
+} from "vue-demi";
+import Caption from "../../caption/Caption.vue";
+import Calendar from "../../calendar/Calendar.vue";
+import Dropdown from "../../dropdown/Dropdown.vue";
+import { useVModel } from "../../input/use-input";
+import { isDate, format as formatDate } from "date-fns";
+export default defineComponent({
+  components: {
+    Caption,
+    Dropdown,
+    Calendar
+  },
+  props: {
+    schema: {
+      type: Object,
+      required: true
+    },
+    modelValue: {
+      type: Date,
+      default: void 0
+    },
+    format: {
+      type: String,
+      default: "dd/MM/yyyy"
+    },
+    max: {
+      type: Date,
+      default: void 0
+    },
+    min: {
+      type: Date,
+      default: void 0
+    },
+    mode: {
+      type: String,
+      default: "date"
+    }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const isOpen = ref(false);
+    const model = useVModel(props);
+    const value = computed(() => {
+      return isDate(model.value) ? formatDate(model.value, props.format) : "";
+    });
+    function close() {
+      isOpen.value = false;
+    }
+    return {
+      model,
+      value,
+      isOpen,
+      close
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.filterbar__date {
+  > .dropdown__menu {
+    @apply min-w-max max-h-min;
+  }
+}
+</style>

package/dist/components/filterbar/pinned/Date.vue.d.ts

@@ -0,0 +1,67 @@
+import { PropType } from 'vue-demi';
+import { FilterDate } from '../use-filterbar';
+declare const _default: import("vue-demi").DefineComponent<{
+    schema: {
+        type: PropType<FilterDate>;
+        required: true;
+    };
+    modelValue: {
+        type: DateConstructor;
+        default: any;
+    };
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: {
+        type: DateConstructor;
+        default: any;
+    };
+    min: {
+        type: DateConstructor;
+        default: any;
+    };
+    mode: {
+        type: PropType<"date" | "month" | "year">;
+        default: string;
+    };
+}, {
+    model: import("vue-demi").Ref<Date>;
+    value: import("vue-demi").ComputedRef<string>;
+    isOpen: import("vue-demi").Ref<boolean>;
+    close: () => void;
+}, 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<{
+    schema: {
+        type: PropType<FilterDate>;
+        required: true;
+    };
+    modelValue: {
+        type: DateConstructor;
+        default: any;
+    };
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: {
+        type: DateConstructor;
+        default: any;
+    };
+    min: {
+        type: DateConstructor;
+        default: any;
+    };
+    mode: {
+        type: PropType<"date" | "month" | "year">;
+        default: string;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {
+    min: Date;
+    max: Date;
+    modelValue: Date;
+    mode: "date" | "month" | "year";
+    format: string;
+}>;
+export default _default;

package/dist/components/filterbar/pinned/Multiselect.vue

@@ -0,0 +1,109 @@
+<template>
+  <Dropdown
+    v-model="isOpen"
+    variant="input"
+    class="filterbar__multiselect-badge"
+    :class="{'filterbar--active': selected.length > 0 }"
+    caret>
+    <template #button-content>
+      <template v-if="selected.length > 1">
+        {{ schema.label }}:
+        <Badge class="filterbar__multiselect-badge">
+          {{ selected.length }}
+        </Badge>
+      </template>
+      <template v-else-if="selected.length === 1">
+        {{ selected.at(0).text }}
+      </template>
+      <template v-else>
+        {{ schema.label }}
+      </template>
+    </template>
+
+    <Caption
+      class="px-3 py-2"
+      bold>
+      {{ schema.label }}
+    </Caption>
+    <template
+      v-for="(item, i) in items"
+      :key="i">
+      <Checkbox
+        v-model="model"
+        apperance="option"
+        :value="item.value">
+        {{ item.text }}
+      </Checkbox>
+    </template>
+  </Dropdown>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent,
+  ref
+} from "vue-demi";
+import Badge from "../../badge/Badge.vue";
+import Caption from "../../caption/Caption.vue";
+import Dropdown from "../../dropdown/Dropdown.vue";
+import Checkbox from "../../checkbox/Checkbox.vue";
+import { useOptionsProp } from "../../select/adapter/adapter";
+import { useVModel } from "../../input/use-input";
+import { isEqual } from "../../utils/value";
+export default defineComponent({
+  components: {
+    Badge,
+    Caption,
+    Dropdown,
+    Checkbox
+  },
+  props: {
+    schema: {
+      type: Object,
+      required: true
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    modelValue: {
+      type: Array,
+      default: () => []
+    }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const items = useOptionsProp(props);
+    const isOpen = ref(false);
+    const model = useVModel(props);
+    const selected = computed(() => {
+      return items.value.filter((item) => {
+        return Array.isArray(model.value) && model.value.some((v) => isEqual(item.value, v));
+      });
+    });
+    function close() {
+      isOpen.value = false;
+    }
+    return {
+      model,
+      items,
+      isOpen,
+      selected,
+      close
+    };
+  }
+});
+</script>
+
+<style lang="postcss">
+.filterbar__multiselect {
+  &-badge.badge--primary {
+    @apply bg-white bg-opacity-20;
+  }
+}
+</style>

package/dist/components/filterbar/pinned/Multiselect.vue.d.ts

@@ -0,0 +1,42 @@
+import { PropType } from 'vue-demi';
+import { FilterSelect } from '../use-filterbar';
+import { SelectItem } from '../../select/use-select';
+declare const _default: import("vue-demi").DefineComponent<{
+    schema: {
+        type: PropType<FilterSelect>;
+        required: true;
+    };
+    options: {
+        type: PropType<string[] | SelectItem[]>;
+        default: () => any[];
+    };
+    modelValue: {
+        type: ArrayConstructor;
+        default: () => any[];
+    };
+}, {
+    model: import("vue-demi").Ref<unknown[]>;
+    items: import("vue-demi").ComputedRef<SelectItem[]>;
+    isOpen: import("vue-demi").Ref<boolean>;
+    selected: import("vue-demi").ComputedRef<SelectItem[]>;
+    close: () => void;
+}, 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<{
+    schema: {
+        type: PropType<FilterSelect>;
+        required: true;
+    };
+    options: {
+        type: PropType<string[] | SelectItem[]>;
+        default: () => any[];
+    };
+    modelValue: {
+        type: ArrayConstructor;
+        default: () => any[];
+    };
+}>> & {
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {
+    modelValue: unknown[];
+    options: string[] | SelectItem[];
+}>;
+export default _default;

package/dist/components/filterbar/pinned/Select.vue

@@ -0,0 +1,95 @@
+<template>
+  <Dropdown
+    v-model="isOpen"
+    variant="input"
+    class="filterbar__select"
+    :class="{'filterbar--active': selected !== undefined }"
+    caret>
+    <template #button-content>
+      {{ selected ? selected.text : schema.label }}
+    </template>
+    <Caption
+      class="px-3 py-2"
+      bold>
+      {{ schema.label }}
+    </Caption>
+    <template
+      v-for="(item, i) in items"
+      :key="i">
+      <Radio
+        v-model="model"
+        apperance="option"
+        :value="item.value"
+        @click="close">
+        {{ item.text }}
+      </Radio>
+    </template>
+  </Dropdown>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent,
+  ref
+} from "vue-demi";
+import Caption from "../../caption/Caption.vue";
+import Dropdown from "../../dropdown/Dropdown.vue";
+import Radio from "../../radio/Radio.vue";
+import { useOptionsProp } from "../../select/adapter/adapter";
+import { useVModel } from "../../input/use-input";
+import { isEqual } from "../../utils/value";
+export default defineComponent({
+  components: {
+    Caption,
+    Dropdown,
+    Radio
+  },
+  props: {
+    schema: {
+      type: Object,
+      required: true
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    modelValue: {
+      type: [
+        String,
+        Number,
+        Boolean,
+        Array,
+        Object,
+        Date
+      ],
+      default: void 0
+    }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const items = useOptionsProp(props);
+    const isOpen = ref(false);
+    const model = useVModel(props);
+    const selected = computed(() => {
+      return items.value.find((item) => {
+        return isEqual(item.value, model.value);
+      });
+    });
+    function close() {
+      isOpen.value = false;
+    }
+    return {
+      model,
+      items,
+      isOpen,
+      selected,
+      close
+    };
+  }
+});
+</script>

package/dist/components/filterbar/pinned/Select.vue.d.ts

@@ -0,0 +1,42 @@
+import { PropType } from 'vue-demi';
+import { FilterSelect } from '../use-filterbar';
+import { SelectItem } from '../../select/use-select';
+declare const _default: import("vue-demi").DefineComponent<{
+    schema: {
+        type: PropType<FilterSelect>;
+        required: true;
+    };
+    options: {
+        type: PropType<string[] | SelectItem[]>;
+        default: () => any[];
+    };
+    modelValue: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        default: any;
+    };
+}, {
+    model: import("vue-demi").Ref<string | number | boolean | unknown[] | Record<string, any> | Date>;
+    items: import("vue-demi").ComputedRef<SelectItem[]>;
+    isOpen: import("vue-demi").Ref<boolean>;
+    selected: import("vue-demi").ComputedRef<SelectItem>;
+    close: () => void;
+}, 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<{
+    schema: {
+        type: PropType<FilterSelect>;
+        required: true;
+    };
+    options: {
+        type: PropType<string[] | SelectItem[]>;
+        default: () => any[];
+    };
+    modelValue: {
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor | BooleanConstructor | DateConstructor | NumberConstructor)[];
+        default: any;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {
+    modelValue: string | number | boolean | unknown[] | Record<string, any> | Date;
+    options: string[] | SelectItem[];
+}>;
+export default _default;

package/dist/components/filterbar/pinned/Toggle.vue

@@ -0,0 +1,76 @@
+<template>
+  <Button
+    class="filterbar__item filterbar--pinned"
+    variant="input"
+    :class="{ 'filterbar--active': model }"
+    @click="toggle">
+    {{ schema.label }}
+  </Button>
+</template>
+
+<script>
+import { defineComponent } from "vue-demi";
+import Button from "../../button/Button.vue";
+import { useVModel } from "../../checkbox/use-checkbox";
+export default defineComponent({
+  components: { Button },
+  props: {
+    schema: {
+      type: Object,
+      required: true
+    },
+    modelValue: {
+      type: [
+        String,
+        Number,
+        Boolean,
+        Array,
+        Object,
+        Date
+      ],
+      default: false
+    },
+    value: {
+      type: [
+        String,
+        Number,
+        Boolean,
+        Array,
+        Object,
+        Date
+      ],
+      default: true
+    },
+    uncheckedValue: {
+      type: [
+        String,
+        Number,
+        Boolean,
+        Array,
+        Object,
+        Date
+      ],
+      default: false
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    }
+  },
+  models: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props) {
+    const model = useVModel(props);
+    function toggle() {
+      model.value = !model.value;
+    }
+    return {
+      model,
+      toggle
+    };
+  }
+});
+</script>