@caipira/tamandua 0.0.2 → 0.0.5

package/components/IconButton/IconButton.vue

@@ -1,168 +0,0 @@
-<script lang="ts" setup>
-import {
-    ButtonType,
-    ElementSize,
-    ElementShape,
-    Icon as EIcon,
-    ElementVariant,
-} from "@/enums/ui";
-
-import uiService from "@/services/ui";
-import { computed, ref, getCurrentInstance } from "vue";
-
-import Icon from "@/components/Icon/Icon.vue";
-
-export type ButtonProps = {
-    to?: any;
-    icon: `${EIcon}`;
-    href?: string;
-    type?: `${ButtonType}`;
-    size?: `${ElementSize}`;
-    label?: string;
-    shape?: `${ElementShape}`;
-    target?: string;
-    variant?: `${ElementVariant}`;
-    multiple?: boolean;
-    isOutline?: boolean;
-    isDisabled?: boolean;
-    injectStyle?: { icon: string };
-    disableStyle?: boolean;
-};
-
-defineOptions({ name: "TIconButton" });
-
-const props = withDefaults(defineProps<ButtonProps>(), {
-    href: "",
-    type: ButtonType.BUTTON,
-    size: ElementSize.DEFAULT,
-    label: "",
-    shape: ElementShape.ROUNDED,
-    target: undefined,
-    variant: ElementVariant.DEFAULT,
-    multiple: false,
-    isOutline: false,
-    isDisabled: false,
-    injectStyle: () => ({ icon: "" }),
-    disableStyle: false,
-});
-
-const emit = defineEmits<{
-    (e: "upload", val: FileList): void;
-}>();
-
-const instance = getCurrentInstance();
-const fileInput = ref<HTMLInputElement>();
-const iconReference = ref<InstanceType<typeof Icon> | null>(null);
-
-const link = computed<string | undefined>(() => {
-    return props.href ? props.href : undefined;
-});
-
-const shadowType = computed<string | undefined>(() => {
-    switch (props.type) {
-        case ButtonType.LINK:
-            return undefined;
-        case ButtonType.FILE:
-            return "button";
-        default:
-            return props.type;
-    }
-});
-
-const value = computed<string | undefined>(() => {
-    return props.type === ButtonType.SUBMIT ? props.label : undefined;
-});
-
-const element = computed<string>(() => {
-    switch (props.type) {
-        case ButtonType.SUBMIT:
-            return "input";
-        case ButtonType.LINK:
-            return "a";
-        case ButtonType.ROUTER_LINK:
-            return "router-link";
-        default:
-            return "button";
-    }
-});
-
-const onClick = (e: MouseEvent): void => {
-    if (instance && uiService.isPopoverActivator(instance)) {
-        uiService.onPopoverActivatorClick(e, instance);
-    }
-
-    if (props.type === ButtonType.SUBMIT) {
-        e.preventDefault();
-    }
-
-    if (props.type === ButtonType.FILE) {
-        fileInput.value?.click();
-    }
-};
-
-const onFileChange = (e: Event) => {
-    e.stopPropagation();
-
-    const element: HTMLInputElement = e.target as HTMLInputElement;
-    const files: FileList | null = element.files;
-
-    if (!files || !files.length) {
-        return;
-    }
-
-    emit("upload", files);
-};
-
-defineExpose({ iconReference });
-</script>
-
-<template>
-    <component
-        :is="element"
-        :type="shadowType"
-        :href="link"
-        :value="value"
-        :to="props.to"
-        :disabled="props.isDisabled"
-        :target="props.target"
-        :class="{
-            'opacity-50': props.isDisabled,
-
-            // Padding
-            'px-1 py-0':
-                !props.disableStyle && props.size === ElementSize.EXTRA_SMALL,
-            'px-1': !props.disableStyle && props.size === ElementSize.SMALL,
-            'px-4 py-2 h-10':
-                !props.disableStyle && props.size === ElementSize.DEFAULT,
-
-            // Shape
-            'rounded-full': props.shape === ElementShape.CIRCLE,
-            'input-roundness': props.shape === ElementShape.ROUNDED,
-
-            // Cursor
-            'cursor-pointer': !props.isDisabled,
-            'cursor-not-allowed': props.isDisabled,
-        }"
-        class="input-outline inline-flex items-center justify-center"
-        role="button"
-        @click="onClick"
-    >
-        <slot />
-        <t-icon
-            ref="iconReference"
-            :size="props.size"
-            :icon="props.icon"
-            :class="{
-                [props.injectStyle.icon]: true,
-            }"
-        />
-        <input
-            v-if="props.type === 'file'"
-            :multiple="props.multiple"
-            @change="onFileChange"
-            type="file"
-            ref="fileInput"
-            class="hidden"
-        />
-    </component>
-</template>

package/components/IconButton/index.ts

@@ -1,12 +0,0 @@
-import type { App, Plugin } from "vue";
-import registerComponent from "@/plugins/register-component";
-
-import IconButton from "./IconButton.vue";
-
-export default {
-    install(app: App) {
-        registerComponent(app, IconButton);
-    },
-} as Plugin;
-
-export { IconButton };

package/components/InputAvatar/InputAvatar.vue

@@ -1,63 +0,0 @@
-<script lang="ts" setup>
-import { ref, watch } from "vue";
-
-defineOptions({ name: "TInputAvatar" });
-
-const props = defineProps<{
-    modelValue?: File | string;
-}>();
-
-const emit = defineEmits<{
-    (e: "update:modelValue", val: File): void;
-}>();
-
-const src = ref<string>();
-const value = ref<FileList>();
-
-const onChangeAvatar = async (event: Event): Promise<void> => {
-    const target = event.target as HTMLInputElement;
-    const files = target.files as FileList;
-
-    src.value = URL.createObjectURL(files[0]);
-
-    emit("update:modelValue", files[0]);
-};
-
-watch(
-    () => props.modelValue,
-    (newValue) => {
-        if (typeof newValue === "string") {
-            src.value = newValue;
-        }
-    },
-    { immediate: true },
-);
-</script>
-
-<template>
-    <div class="relative h-40 w-40">
-        <t-avatar
-            size="xl"
-            :image="src"
-            icon="account"
-            class="text-white"
-        />
-        <label
-            for="file"
-            class="absolute transform bottom-1 right-2"
-        >
-            <t-icon
-                icon="camera"
-                size="lg"
-                class="rounded-full cursor-pointer p-2 color-caipira-primary-inverted bg-caipira-primary"
-            />
-        </label>
-        <input
-            id="file"
-            :value="value"
-            type="file"
-            class="hidden"
-            @change="onChangeAvatar"
-        />
-    </div>
-</template>

package/components/InputAvatar/index.ts

@@ -1,12 +0,0 @@
-import type { App, Plugin } from "vue";
-import registerComponent from "@/plugins/register-component";
-
-import InputAvatar from "./InputAvatar.vue";
-
-export default {
-    install(app: App) {
-        registerComponent(app, InputAvatar);
-    },
-} as Plugin;
-
-export { InputAvatar };

package/components/InputCheckbox/InputCheckbox.vue

@@ -1,77 +0,0 @@
-<script lang="ts" setup>
-import { ref, watch, inject } from "vue";
-
-defineOptions({ name: "TInputCheckbox" });
-
-const props = withDefaults(
-    defineProps<{
-        key?: string;
-        disabled?: boolean;
-        modelValue?: boolean;
-        isIndeterminate?: boolean;
-        initializeValue?: boolean;
-    }>(),
-    {
-        key: "checkbox",
-        disabled: false,
-        isIndeterminate: false,
-        initializeValue: false,
-    },
-);
-
-/**
- * "update:model-value" is emitted whenever the model value changes, even if that change
- * was triggered by the component itself, and the "input" event is emitted only when the
- * user interacts with the component.
- */
-const emit = defineEmits<{
-    "update:model-value": [boolean];
-    input: [boolean];
-}>();
-
-const name = inject("id", "");
-const checked = ref<boolean | undefined>(false);
-const formStyle = inject("formStyle", { label: "", input: "" });
-
-const onInput = () => {
-    const value = !checked.value;
-
-    /**
-     * Always emit "update:model-value" first, so that we can safely check the model value
-     * in the input event handler.
-     */
-    emit("update:model-value", value);
-    emit("input", value);
-};
-
-watch(
-    () => props.modelValue,
-    (newValue?: boolean | undefined) => {
-        if (props.initializeValue && typeof newValue === "undefined") {
-            emit("update:model-value", false);
-        }
-
-        checked.value = newValue;
-    },
-    { immediate: true },
-);
-</script>
-
-<template>
-    <div
-        :class="{
-            [formStyle.label]: true,
-        }"
-    >
-        <input
-            v-model="checked"
-            v-bind="$attrs"
-            type="checkbox"
-            class="form-checkbox relative w-5 h-5 border input-border input-roundness color-caipira-primary-inverted bg-caipira-primary checked:bg-caipira-primary-inverted cursor-pointer input-outline"
-            :indeterminate="props.isIndeterminate"
-            :id="name"
-            :disabled="disabled"
-            @input="onInput"
-        />
-    </div>
-</template>

package/components/InputCheckbox/index.ts

@@ -1,12 +0,0 @@
-import type { App, Plugin } from "vue";
-import registerComponent from "@/plugins/register-component";
-
-import InputCheckbox from "./InputCheckbox.vue";
-
-export default {
-    install(app: App) {
-        registerComponent(app, InputCheckbox);
-    },
-} as Plugin;
-
-export { InputCheckbox };

package/components/InputColor/InputColor.vue

@@ -1,54 +0,0 @@
-<script lang="ts" setup>
-import { inject, ref, watch } from "vue";
-
-defineOptions({ name: "TInputColor" });
-
-const props = withDefaults(
-    defineProps<{
-        disabled?: boolean;
-        modelValue?: string;
-        disableStyle?: boolean;
-    }>(),
-    {
-        disabled: false,
-        disableStyle: false,
-    },
-);
-
-const emit = defineEmits<{
-    (e: "update:modelValue", val: string): void;
-}>();
-
-const color = ref<string>("");
-const formStyle = inject("formStyle", { label: "", input: "" });
-
-const onChange = ({ target }: Event) => {
-    const value = (target as HTMLInputElement).value;
-
-    if (!value) {
-        return;
-    }
-
-    emit("update:modelValue", value);
-};
-
-watch(
-    () => props.modelValue,
-    (value?: string) => {
-        if (value && value !== color.value) {
-            color.value = value;
-        }
-    },
-    { immediate: true },
-);
-</script>
-
-<template>
-    <input
-        type="color"
-        class="h-10 border-0 input-bg-color input-text-color input-outline input-roundnes input-roundness w-12"
-        :value="color"
-        :disabled="props.disabled"
-        @input="onChange"
-    />
-</template>

package/components/InputColor/index.ts

@@ -1,12 +0,0 @@
-import type { App, Plugin } from "vue";
-import registerComponent from "@/plugins/register-component";
-
-import InputColor from "./InputColor.vue";
-
-export default {
-    install(app: App) {
-        registerComponent(app, InputColor);
-    },
-} as Plugin;
-
-export { InputColor };

package/components/InputDate/InputDate.story.ts

@@ -1,15 +0,0 @@
-export default {
-    title: "Form/Date",
-};
-
-const Template1 = (args: any) => ({
-    setup() {
-        return { args };
-    },
-    template: `<t-input-date v-model="args.value" />`,
-});
-
-const Default: any = Template1.bind({});
-Default.args = { value: "1996-10-06" };
-
-export { Default };