independer-design-system 1.2.0

package/dist/runtime/components/Form/Radio.vue

@@ -0,0 +1,112 @@
+<template>
+  <label
+    class="radio group flex py-3 cursor-pointer"
+    :for="id"
+  >
+    <input
+      :id="id"
+      :ref="name"
+      class="sr-only peer"
+      type="radio"
+      :name="name"
+      :value="value"
+      :checked="value === modelValue || checked"
+      :disabled="disabled"
+      @change="emit('update:modelValue', $event.target.value)"
+      @focus="emit('focus', $event)"
+    >
+    <div
+      class="
+        radio-icon
+        relative
+        block
+        w-6
+        h-6
+        mr-2
+        border border-grey
+        rounded-xl
+        transition-all
+        ease-out
+        shrink-0
+        bg-white
+        hover:border-grey-dark
+        group-hover:border-grey-dark
+        peer-focus:border-green peer-focus:ring-4
+        ring-green/40
+        peer-checked:border-green
+        peer-checked:hover:border-green-dark
+        group-hover:peer-checked:border-green-dark
+        group-hover:peer-checked:after:bg-green-dark
+        peer-checked:after:absolute
+        peer-checked:after:content-['']
+        peer-checked:after:w-3
+        peer-checked:after:h-3
+        peer-checked:after:mt-[0.3125rem]
+        peer-checked:after:ml-[0.3125rem]
+        peer-checked:after:rounded-xl
+        peer-checked:after:transition-all
+        peer-checked:after:bg-green
+        peer-disabled:bg-grey-light
+        peer-disabled:border-grey
+        peer-disabled:after:bg-grey
+        peer-disabled:cursor-not-allowed
+        peer-disabled:hover:border-grey
+        peer-disabled:hover:after:bg-grey
+      "
+    />
+
+    <div class="flex flex-col w-full">
+      <div
+        class="flex"
+        :class="{ 'flex-col tablet:flex-row': price }"
+      >
+        <span :class="{ 'text-grey-dark': disabled }">{{ label }}</span>
+
+        <Icon
+          v-if="tooltip"
+          name="eva:info-outline"
+          class="ml-2 cursor-pointer text-grey-dark"
+        />
+
+        <IndPill
+          v-if="advice"
+          :label="adviceLabel"
+        />
+
+        <div
+          v-if="number"
+          class="ml-auto text-grey-dark"
+        >{{ number }}</div>
+        <div
+          v-if="price && value === modelValue"
+          class="ml-0 tablet:ml-auto text-grey-dark"
+        >{{ price }}</div>
+      </div>
+
+      <slot />
+    </div>
+  </label>
+</template>
+
+<script setup>
+const emit = defineEmits(["update:modelValue", "focus"]);
+defineProps({
+  id: String,
+  name: String,
+  label: String,
+  value: [String, Boolean],
+  modelValue: [String, Boolean],
+  checked: Boolean,
+  disabled: Boolean,
+  advice: Boolean,
+  adviceLabel: String,
+  tooltip: Boolean,
+  number: String,
+  price: String,
+  semibold: Boolean
+});
+</script>
+
+<style>
+@reference "../../assets/style.css";.radio:focus,.radio:hover{@apply border-grey}
+</style>

package/dist/runtime/components/Form/Radio.vue.d.ts

@@ -0,0 +1,50 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: StringConstructor;
+    name: StringConstructor;
+    label: StringConstructor;
+    value: (StringConstructor | BooleanConstructor)[];
+    modelValue: (StringConstructor | BooleanConstructor)[];
+    checked: BooleanConstructor;
+    disabled: BooleanConstructor;
+    advice: BooleanConstructor;
+    adviceLabel: StringConstructor;
+    tooltip: BooleanConstructor;
+    number: StringConstructor;
+    price: StringConstructor;
+    semibold: BooleanConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    focus: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: StringConstructor;
+    name: StringConstructor;
+    label: StringConstructor;
+    value: (StringConstructor | BooleanConstructor)[];
+    modelValue: (StringConstructor | BooleanConstructor)[];
+    checked: BooleanConstructor;
+    disabled: BooleanConstructor;
+    advice: BooleanConstructor;
+    adviceLabel: StringConstructor;
+    tooltip: BooleanConstructor;
+    number: StringConstructor;
+    price: StringConstructor;
+    semibold: BooleanConstructor;
+}>> & Readonly<{
+    onFocus?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    checked: boolean;
+    advice: boolean;
+    tooltip: boolean;
+    semibold: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};

package/dist/runtime/components/Form/Row.d.vue.ts

@@ -0,0 +1,31 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    last: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    grid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    last: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    grid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    grid: boolean;
+    last: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};

package/dist/runtime/components/Form/Row.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    class=""
+    :class="[margin, grid]"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+defineOptions({
+  name: "IndFormRow"
+});
+const props = defineProps({
+  last: {
+    type: Boolean,
+    default: false
+  },
+  grid: {
+    type: Boolean,
+    default: false
+  }
+});
+const margin = computed(() => {
+  return {
+    "mb-6": !props.last,
+    "!mb-0": props.last
+  };
+});
+const grid = computed(() => {
+  return {
+    "": !props.grid,
+    "grid grid-cols-2 gap-4 desktop:grid-cols-4 desktop:gap-6": props.grid
+  };
+});
+</script>

package/dist/runtime/components/Form/Row.vue.d.ts

@@ -0,0 +1,31 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    last: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    grid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    last: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    grid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    grid: boolean;
+    last: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};

package/dist/runtime/components/Form/Select.d.vue.ts

@@ -0,0 +1,45 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: StringConstructor;
+    label: StringConstructor;
+    options: ArrayConstructor;
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    labelClasses: StringConstructor;
+    leadingIcon: StringConstructor;
+    defaultOption: {
+        type: StringConstructor;
+        default: string;
+    };
+    error: StringConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: StringConstructor;
+    label: StringConstructor;
+    options: ArrayConstructor;
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    labelClasses: StringConstructor;
+    leadingIcon: StringConstructor;
+    defaultOption: {
+        type: StringConstructor;
+        default: string;
+    };
+    error: StringConstructor;
+}>> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    modelValue: string;
+    defaultOption: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/Form/Select.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <IndFormLabel
+      v-if="label"
+      :name="name"
+      :label="label"
+      :label-classes="labelClasses"
+    />
+    <div class="relative">
+      <Icon
+        v-if="leadingIcon"
+        :name="leadingIcon"
+        class="absolute ml-3 mt-3 text-grey-darker"
+      />
+
+      <select
+        :id="name"
+        class="
+          block
+          py-[0.6875rem]
+          px-3
+          w-full
+          bg-white
+          border border-grey
+          rounded-lg
+          transition-all
+          ease-out
+          hover:border-grey-dark
+          focus:border-purple focus:ring-1 focus:outline-none
+          ring-purple
+          appearance-none
+          disabled:bg-grey-light disabled:hover:border-grey
+        "
+        :name="name"
+        :disabled="disabled"
+        :value="modelValue"
+        :class="{ 'border-red-800': error, 'pl-10': leadingIcon }"
+        @change="emit('update:modelValue', $event.target.value)"
+        @blur="emit('blur', $event)"
+      >
+        <option
+          disabled
+          value=""
+        >
+          {{ defaultOption }}
+        </option>
+
+        <option
+          v-for="option in options"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+
+      <Icon
+        name="eva:arrow-ios-downward-outline"
+        class="absolute bottom-3 right-3 pointer-events-none text-purple"
+      />
+    </div>
+    <div
+      v-if="error"
+      class="mt-1 text-red-800"
+    >
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(["update:modelValue", "blur"]);
+defineProps({
+  name: String,
+  label: String,
+  options: Array,
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  disabled: Boolean,
+  labelClasses: String,
+  leadingIcon: String,
+  defaultOption: {
+    type: String,
+    default: "Kies"
+  },
+  error: String
+});
+</script>

package/dist/runtime/components/Form/Select.vue.d.ts

@@ -0,0 +1,45 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: StringConstructor;
+    label: StringConstructor;
+    options: ArrayConstructor;
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    labelClasses: StringConstructor;
+    leadingIcon: StringConstructor;
+    defaultOption: {
+        type: StringConstructor;
+        default: string;
+    };
+    error: StringConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: StringConstructor;
+    label: StringConstructor;
+    options: ArrayConstructor;
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    labelClasses: StringConstructor;
+    leadingIcon: StringConstructor;
+    defaultOption: {
+        type: StringConstructor;
+        default: string;
+    };
+    error: StringConstructor;
+}>> & Readonly<{
+    onBlur?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    modelValue: string;
+    defaultOption: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/Form/Tabs.d.vue.ts

@@ -0,0 +1,38 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: StringConstructor;
+    name: StringConstructor;
+    label: StringConstructor;
+    value: StringConstructor;
+    inputmode: StringConstructor;
+    pattern: StringConstructor;
+    checked: BooleanConstructor;
+    disabled: BooleanConstructor;
+    advice: BooleanConstructor;
+    options: ArrayConstructor;
+    modelValue: StringConstructor;
+    largeTitle: BooleanConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: StringConstructor;
+    name: StringConstructor;
+    label: StringConstructor;
+    value: StringConstructor;
+    inputmode: StringConstructor;
+    pattern: StringConstructor;
+    checked: BooleanConstructor;
+    disabled: BooleanConstructor;
+    advice: BooleanConstructor;
+    options: ArrayConstructor;
+    modelValue: StringConstructor;
+    largeTitle: BooleanConstructor;
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    checked: boolean;
+    advice: boolean;
+    largeTitle: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/Form/Tabs.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="flex gap-1 p-1 bg-white border border-grey rounded-lg hover:border-grey-dark transition-all">
+    <label
+      v-for="option in options"
+      :key="option.id || option.value"
+      class="relative flex w-1/2 cursor-pointer"
+      :for="option.id"
+    >
+      <input
+        :id="option.id"
+        :ref="option.name"
+        class="sr-only peer"
+        type="radio"
+        :name="option.name"
+        :value="option.value"
+        :checked="option.value === modelValue"
+        :disabled="option.disabled"
+        @change="emit('update:modelValue', $event.target.value)"
+      >
+      <div
+        class="
+        relative
+        flex
+        w-full
+        p-2
+        px-1
+        rounded
+        transition-all
+        ease-out
+        duration-500
+        bg-white
+        peer-focus:border-purple peer-focus:ring-1
+        ring-purple
+        peer-checked:bg-purple
+        peer-checked:!text-white
+        peer-disabled:bg-white
+        peer-disabled:!text-grey-dark
+        peer-disabled:cursor-not-allowed
+        peer-disabled:hover:bg-white
+        peer-checked:hover:bg-purple
+        hover:bg-black/20
+        "
+      >
+        <div class="w-full text-center">
+          <div
+            class="tab font-semibold"
+            :class="{ ' tablet:text-xl': largeTitle }"
+          >{{ option.label }}</div>
+          <div
+            v-if="option.description"
+            class="text-sm"
+          >{{ option.description }}</div>
+        </div>
+      </div>
+    </label>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(["update:modelValue"]);
+defineProps({
+  id: String,
+  name: String,
+  label: String,
+  value: String,
+  inputmode: String,
+  pattern: String,
+  checked: Boolean,
+  disabled: Boolean,
+  advice: Boolean,
+  options: Array,
+  modelValue: String,
+  largeTitle: Boolean
+});
+</script>

package/dist/runtime/components/Form/Tabs.vue.d.ts

@@ -0,0 +1,38 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: StringConstructor;
+    name: StringConstructor;
+    label: StringConstructor;
+    value: StringConstructor;
+    inputmode: StringConstructor;
+    pattern: StringConstructor;
+    checked: BooleanConstructor;
+    disabled: BooleanConstructor;
+    advice: BooleanConstructor;
+    options: ArrayConstructor;
+    modelValue: StringConstructor;
+    largeTitle: BooleanConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: StringConstructor;
+    name: StringConstructor;
+    label: StringConstructor;
+    value: StringConstructor;
+    inputmode: StringConstructor;
+    pattern: StringConstructor;
+    checked: BooleanConstructor;
+    disabled: BooleanConstructor;
+    advice: BooleanConstructor;
+    options: ArrayConstructor;
+    modelValue: StringConstructor;
+    largeTitle: BooleanConstructor;
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    checked: boolean;
+    advice: boolean;
+    largeTitle: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/Form/Textarea.d.vue.ts

@@ -0,0 +1,83 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: StringConstructor;
+    label: StringConstructor;
+    type: StringConstructor;
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: (StringConstructor | NumberConstructor)[];
+    inputmode: StringConstructor;
+    pattern: StringConstructor;
+    min: StringConstructor;
+    autocomplete: StringConstructor;
+    leadingIcon: StringConstructor;
+    trailingIcon: StringConstructor;
+    disabled: BooleanConstructor;
+    steps: BooleanConstructor;
+    description: StringConstructor;
+    descriptionTop: StringConstructor;
+    placeholder: StringConstructor;
+    labelClasses: StringConstructor;
+    error: StringConstructor;
+    mask: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: string;
+    };
+    rows: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (...args: any[]) => void;
+    blur: (...args: any[]) => void;
+    focus: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+    "step-up": (...args: any[]) => void;
+    "step-down": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: StringConstructor;
+    label: StringConstructor;
+    type: StringConstructor;
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: (StringConstructor | NumberConstructor)[];
+    inputmode: StringConstructor;
+    pattern: StringConstructor;
+    min: StringConstructor;
+    autocomplete: StringConstructor;
+    leadingIcon: StringConstructor;
+    trailingIcon: StringConstructor;
+    disabled: BooleanConstructor;
+    steps: BooleanConstructor;
+    description: StringConstructor;
+    descriptionTop: StringConstructor;
+    placeholder: StringConstructor;
+    labelClasses: StringConstructor;
+    error: StringConstructor;
+    mask: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: string;
+    };
+    rows: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>> & Readonly<{
+    onInput?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onFocus?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onStep-up"?: ((...args: any[]) => any) | undefined;
+    "onStep-down"?: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    mask: string | Record<string, any>;
+    tooltip: boolean;
+    steps: boolean;
+    rows: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;