independer-design-system 1.2.0

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

@@ -0,0 +1,46 @@
+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)[];
+    checked: BooleanConstructor;
+    advice: BooleanConstructor;
+    tooltip: BooleanConstructor;
+    labelClasses: StringConstructor;
+    disabled: BooleanConstructor;
+    modelValue: BooleanConstructor;
+    number: StringConstructor;
+}>, {}, {}, {}, {}, 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)[];
+    checked: BooleanConstructor;
+    advice: BooleanConstructor;
+    tooltip: BooleanConstructor;
+    labelClasses: StringConstructor;
+    disabled: BooleanConstructor;
+    modelValue: BooleanConstructor;
+    number: StringConstructor;
+}>> & Readonly<{
+    onFocus?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    checked: boolean;
+    advice: boolean;
+    tooltip: boolean;
+    modelValue: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};

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

@@ -0,0 +1,93 @@
+<template>
+  <label
+    class="checkbox group flex gap-2 py-3 cursor-pointer"
+    :for="id"
+  >
+    <input
+      :id="id"
+      :ref="name"
+      class="sr-only peer"
+      type="checkbox"
+      :name="name"
+      :value="value"
+      :disabled="disabled"
+      :checked="modelValue || checked"
+      @change="emit('update:modelValue', $event.target.checked)"
+      @focus="emit('focus', $event)"
+    >
+    <div class="checkbox-icon" />
+
+    <div class="flex flex-col w-full">
+      <div class="flex">
+        <span :class="[{ 'font-semibold': slotPassed }, labelClasses]">{{ label }}</span>
+
+        <Icon
+          v-if="tooltip"
+          name="eva:info-outline"
+          class="ml-2 cursor-pointer text-grey-dark"
+        />
+
+        <IndPill v-if="advice" />
+
+        <div
+          v-if="number"
+          class="ml-auto text-grey-dark"
+        >{{ number }}</div>
+      </div>
+
+      <slot />
+    </div>
+  </label>
+</template>
+
+<script setup>
+import { useSlots } from "vue";
+defineOptions({
+  name: "IndFormCheckbox"
+});
+const emit = defineEmits(["update:modelValue", "focus"]);
+defineProps({
+  id: String,
+  name: String,
+  label: String,
+  value: [String, Boolean],
+  checked: Boolean,
+  advice: Boolean,
+  tooltip: Boolean,
+  labelClasses: String,
+  disabled: Boolean,
+  modelValue: Boolean,
+  number: String
+});
+const slots = useSlots();
+const slotPassed = !!slots.default;
+</script>
+
+<style>
+@reference "../../assets/style.css";.checkbox-icon{@apply relative
+        block
+        w-6
+        h-6
+        shrink-0
+        border border-grey
+        rounded
+        transition-all
+        ease-out
+        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
+        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-disabled:bg-grey-light
+        peer-disabled:border-grey
+        peer-disabled:hover:border-grey}.checkbox-icon:after{background:url(../../assets/images/checkbox.svg) no-repeat 50%;background-size:contain}
+</style>

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

@@ -0,0 +1,46 @@
+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)[];
+    checked: BooleanConstructor;
+    advice: BooleanConstructor;
+    tooltip: BooleanConstructor;
+    labelClasses: StringConstructor;
+    disabled: BooleanConstructor;
+    modelValue: BooleanConstructor;
+    number: StringConstructor;
+}>, {}, {}, {}, {}, 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)[];
+    checked: BooleanConstructor;
+    advice: BooleanConstructor;
+    tooltip: BooleanConstructor;
+    labelClasses: StringConstructor;
+    disabled: BooleanConstructor;
+    modelValue: BooleanConstructor;
+    number: StringConstructor;
+}>> & Readonly<{
+    onFocus?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    checked: boolean;
+    advice: boolean;
+    tooltip: boolean;
+    modelValue: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};

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

@@ -0,0 +1,65 @@
+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;
+}>, {}, {}, {}, {}, 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;
+}>> & 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;
+    tooltip: boolean;
+    steps: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <IndFormLabel
+      v-if="label"
+      :name="name"
+      :description="descriptionTop"
+      :label="label"
+      :label-classes="labelClasses"
+      :tooltip="tooltip"
+    />
+
+    <div class="relative">
+      <Icon
+        v-if="leadingIcon"
+        :name="leadingIcon"
+        class="absolute ml-3 mt-3"
+      />
+
+      <Icon
+        v-if="trailingIcon"
+        :name="trailingIcon"
+        class="absolute right-0 mr-3 mt-3 text-purple"
+      />
+
+      <div
+        v-if="steps"
+        class="flex gap-2 absolute right-0 mr-3 mt-3"
+      >
+        <button
+          class="text-purple hover:text-purple-dark"
+          @click.prevent="stepDown"
+        >
+          <Icon name="eva:minus-circle-outline" />
+        </button>
+
+        <button
+          class="text-purple hover:text-purple-dark"
+          @click.prevent="stepUp"
+        >
+          <Icon name="eva:plus-circle-outline" />
+        </button>
+      </div>
+
+      <input
+        :id="name"
+        :ref="name"
+        class="
+          block
+          h-12
+          py-[0.6875rem]
+          px-3
+          border border-grey
+          rounded-lg
+          w-full
+          transition-all
+          ease-out
+          bg-white
+          hover:border-grey-dark
+          outline-none
+          appearance-none
+          disabled:bg-grey-light
+          disabled:border-grey
+          disabled:cursor-not-allowed
+        "
+        :class="{ 'border-red-800': error, 'pl-10': leadingIcon, 'pr-12': trailingIcon, 'pr-20': steps }"
+        :type="type"
+        :name="name"
+        :value="modelValue"
+        :inputmode="inputmode"
+        :pattern="pattern"
+        :min="min"
+        :autocomplete="autocomplete"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        @input="emit('update:modelValue', $event.target.value)"
+        @blur="emit('blur', $event)"
+        @focus="emit('focus', $event)"
+      >
+    </div>
+
+    <div
+      v-if="error"
+      class="mt-1 text-red-800"
+    >
+      {{ error }}
+    </div>
+    <div
+      v-if="description"
+      class="mt-2 text-grey-dark"
+    >
+      {{ description }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(["update:modelValue", "input", "blur", "focus", "step-up", "step-down"]);
+defineProps({
+  name: String,
+  label: String,
+  type: String,
+  tooltip: {
+    type: Boolean,
+    default: false
+  },
+  modelValue: [String, Number],
+  inputmode: String,
+  pattern: String,
+  min: String,
+  autocomplete: String,
+  leadingIcon: String,
+  trailingIcon: String,
+  disabled: Boolean,
+  steps: Boolean,
+  description: String,
+  descriptionTop: String,
+  placeholder: String,
+  labelClasses: String,
+  error: String
+});
+const stepUp = () => {
+  emit("step-up");
+};
+const stepDown = () => {
+  emit("step-down");
+};
+</script>
+
+<style scoped>
+input[type=date]::-webkit-calendar-picker-indicator{display:none}
+</style>

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

@@ -0,0 +1,65 @@
+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;
+}>, {}, {}, {}, {}, 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;
+}>> & 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;
+    tooltip: boolean;
+    steps: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,51 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    description: {
+        type: StringConstructor;
+        required: false;
+    };
+    name: {
+        type: StringConstructor;
+        required: false;
+    };
+    labelClasses: {
+        type: StringConstructor;
+        required: false;
+    };
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    tooltip: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    description: {
+        type: StringConstructor;
+        required: false;
+    };
+    name: {
+        type: StringConstructor;
+        required: false;
+    };
+    labelClasses: {
+        type: StringConstructor;
+        required: false;
+    };
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onTooltip?: ((...args: any[]) => any) | undefined;
+}>, {
+    tooltip: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,44 @@
+<template>
+  <label
+    class="block mb-1 font-semibold"
+    :class="labelClasses"
+    :for="name"
+  >
+    <div class="inline-flex gap-2">{{ label }} <Icon
+      v-if="tooltip"
+      name="eva:info-outline"
+      class="inline-block! text-grey-dark cursor-pointer hover:text-grey-darkest"
+      @click="emit('tooltip')"
+    /></div>
+    <div
+      v-if="description"
+      class="font-normal text-grey-dark"
+    >{{ description }}</div>
+  </label>
+</template>
+
+<script setup>
+const emit = defineEmits(["tooltip"]);
+defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+  description: {
+    type: String,
+    required: false
+  },
+  name: {
+    type: String,
+    required: false
+  },
+  labelClasses: {
+    type: String,
+    required: false
+  },
+  tooltip: {
+    type: Boolean,
+    default: false
+  }
+});
+</script>

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

@@ -0,0 +1,51 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    description: {
+        type: StringConstructor;
+        required: false;
+    };
+    name: {
+        type: StringConstructor;
+        required: false;
+    };
+    labelClasses: {
+        type: StringConstructor;
+        required: false;
+    };
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    tooltip: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    description: {
+        type: StringConstructor;
+        required: false;
+    };
+    name: {
+        type: StringConstructor;
+        required: false;
+    };
+    labelClasses: {
+        type: StringConstructor;
+        required: false;
+    };
+    tooltip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onTooltip?: ((...args: any[]) => any) | undefined;
+}>, {
+    tooltip: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/Form/Radio.d.vue.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;
+};