cisse-vue-ui 0.1.0

package/dist/SearchInput.vue_vue_type_script_setup_true_lang-DjT2qdcp.js

@@ -0,0 +1,235 @@
+import { defineComponent, createElementBlock, openBlock, renderSlot, createTextVNode, toDisplayString, mergeModels, useModel, withDirectives, mergeProps, vModelDynamic, createCommentVNode, Fragment, renderList, vModelSelect, computed, normalizeStyle, createBlock, withCtx, createVNode, createElementVNode, unref } from "vue";
+import { Icon } from "@iconify/vue";
+const _hoisted_1$5 = ["data-error", "for"];
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "FormLabel",
+  props: {
+    error: { type: [String, Boolean] },
+    htmlFor: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("label", {
+        "data-error": !!__props.error,
+        for: __props.htmlFor ?? "",
+        class: "block text-sm font-medium text-gray-700 data-[error=true]:text-red-500 dark:text-gray-300"
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 8, _hoisted_1$5);
+    };
+  }
+});
+const _hoisted_1$4 = ["data-error"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "FormHelp",
+  props: {
+    error: { type: Boolean },
+    text: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("p", {
+        "data-error": __props.error,
+        class: "mt-2 text-sm text-gray-400 peer-invalid:visible data-[error=true]:text-red-500 dark:text-gray-500"
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createTextVNode(toDisplayString(__props.text ?? ""), 1)
+        ])
+      ], 8, _hoisted_1$4);
+    };
+  }
+});
+const _hoisted_1$3 = ["id", "disabled", "name", "placeholder", "type"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "FormInput",
+  props: /* @__PURE__ */ mergeModels({
+    type: { default: "text" },
+    value: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    id: {},
+    name: {}
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const modelValue = useModel(__props, "modelValue");
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("input", mergeProps({
+        id: __props.id ?? __props.name ?? "",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+        disabled: __props.disabled,
+        name: __props.name ?? "",
+        placeholder: __props.placeholder,
+        type: __props.type,
+        class: "mt-1 block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-gray-800 placeholder-slate-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-slate-700 focus:ring-1 focus:ring-slate-700 focus:outline-none focus:invalid:border-pink-500 focus:invalid:ring-pink-500 disabled:border-slate-200 disabled:bg-slate-50 disabled:text-gray-500 disabled:shadow-none dark:border-slate-700 dark:bg-black dark:text-gray-200 dark:placeholder-slate-600 dark:focus:border-slate-300 dark:focus:ring-slate-300 dark:disabled:border-slate-800 dark:disabled:bg-slate-950 dark:disabled:text-gray-500"
+      }, _ctx.$attrs), null, 16, _hoisted_1$3)), [
+        [vModelDynamic, modelValue.value]
+      ]);
+    };
+  }
+});
+const _hoisted_1$2 = ["id", "disabled", "name"];
+const _hoisted_2$1 = {
+  key: 0,
+  value: null,
+  disabled: ""
+};
+const _hoisted_3 = ["value"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "FormSelect",
+  props: /* @__PURE__ */ mergeModels({
+    options: {},
+    type: {},
+    value: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    id: {},
+    name: {}
+  }, {
+    "modelValue": { type: [String, Number, Boolean, null] },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const modelValue = useModel(__props, "modelValue");
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("select", mergeProps({
+        id: __props.id ?? __props.name ?? "",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+        disabled: __props.disabled,
+        name: __props.name ?? "",
+        class: "mt-1 block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-gray-800 placeholder-slate-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-slate-700 focus:ring-1 focus:ring-slate-700 focus:outline-none focus:invalid:border-pink-500 focus:invalid:ring-pink-500 disabled:border-slate-200 disabled:bg-slate-50 disabled:text-gray-500 disabled:shadow-none dark:border-slate-700 dark:bg-black dark:text-gray-200 dark:placeholder-slate-600 dark:focus:border-slate-300 dark:focus:ring-slate-300 dark:disabled:border-slate-800 dark:disabled:bg-slate-950 dark:disabled:text-gray-500"
+      }, _ctx.$attrs), [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          __props.placeholder ? (openBlock(), createElementBlock("option", _hoisted_2$1, toDisplayString(__props.placeholder), 1)) : createCommentVNode("", true),
+          (openBlock(true), createElementBlock(Fragment, null, renderList((__props.options ?? []).filter((el) => !el.hidden), (option) => {
+            return openBlock(), createElementBlock("option", {
+              key: String(option.value),
+              value: option.value
+            }, toDisplayString(option.label), 9, _hoisted_3);
+          }), 128))
+        ])
+      ], 16, _hoisted_1$2)), [
+        [vModelSelect, modelValue.value]
+      ]);
+    };
+  }
+});
+const _hoisted_1$1 = ["hidden"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "FormGroup",
+  props: /* @__PURE__ */ mergeModels({
+    label: {},
+    cols: { default: 6 },
+    hidden: { type: Boolean },
+    error: { type: [String, Boolean] },
+    type: {},
+    value: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    id: {},
+    name: {},
+    options: {}
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const computedCols = computed(() => `span ${props.cols} / span ${props.cols}`);
+    const isSelect = computed(() => props.type === "select");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({ gridColumn: computedCols.value }),
+        hidden: __props.hidden
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          renderSlot(_ctx.$slots, "label", {}, () => [
+            __props.label ? (openBlock(), createBlock(_sfc_main$5, {
+              key: 0,
+              "html-for": __props.id ?? __props.name,
+              error: __props.error
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(__props.label), 1)
+              ]),
+              _: 1
+            }, 8, ["html-for", "error"])) : createCommentVNode("", true)
+          ]),
+          renderSlot(_ctx.$slots, "input", {}, () => [
+            isSelect.value ? (openBlock(), createBlock(_sfc_main$2, mergeProps({
+              key: 0,
+              modelValue: modelValue.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event)
+            }, { ..._ctx.$attrs, ..._ctx.$props }), null, 16, ["modelValue"])) : (openBlock(), createBlock(_sfc_main$3, mergeProps({
+              key: 1,
+              modelValue: modelValue.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => modelValue.value = $event)
+            }, { ..._ctx.$attrs, ..._ctx.$props }), null, 16, ["modelValue"]))
+          ]),
+          __props.error && typeof __props.error === "string" ? (openBlock(), createBlock(_sfc_main$4, {
+            key: 0,
+            error: true
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.error), 1)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ])
+      ], 12, _hoisted_1$1);
+    };
+  }
+});
+const _hoisted_1 = { class: "relative" };
+const _hoisted_2 = ["disabled", "placeholder", "value"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SearchInput",
+  props: {
+    modelValue: {},
+    placeholder: { default: "Search..." },
+    icon: { default: "lucide:search" },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const handleInput = (event) => {
+      const target = event.target;
+      emit("update:modelValue", target.value);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(Icon), {
+          icon: __props.icon,
+          class: "absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-gray-400"
+        }, null, 8, ["icon"]),
+        createElementVNode("input", {
+          disabled: __props.disabled,
+          placeholder: __props.placeholder,
+          value: __props.modelValue,
+          class: "focus:border-primary focus:ring-primary w-full rounded-lg border border-gray-300 bg-white py-2 pr-4 pl-10 text-gray-900 placeholder-gray-400 transition-colors disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500",
+          type: "text",
+          onInput: handleInput
+        }, null, 40, _hoisted_2)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main$5 as _,
+  _sfc_main$4 as a,
+  _sfc_main$3 as b,
+  _sfc_main$2 as c,
+  _sfc_main$1 as d,
+  _sfc_main as e
+};
+//# sourceMappingURL=SearchInput.vue_vue_type_script_setup_true_lang-DjT2qdcp.js.map

package/dist/SearchInput.vue_vue_type_script_setup_true_lang-DjT2qdcp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.vue_vue_type_script_setup_true_lang-DjT2qdcp.js","sources":["../src/components/form/FormLabel.vue","../src/components/form/FormHelp.vue","../src/components/form/FormInput.vue","../src/components/form/FormSelect.vue","../src/components/form/FormGroup.vue","../src/components/form/SearchInput.vue"],"sourcesContent":["<script lang=\"ts\" setup>\ndefineProps<{\n  error?: string | boolean\n  htmlFor?: string\n}>()\n</script>\n\n<template>\n  <label\n    :data-error=\"!!error\"\n    :for=\"htmlFor ?? ''\"\n    class=\"block text-sm font-medium text-gray-700 data-[error=true]:text-red-500 dark:text-gray-300\"\n  >\n    <slot />\n  </label>\n</template>\n","<script lang=\"ts\" setup>\ndefineProps<{\n  error?: boolean\n  text?: string\n}>()\n</script>\n\n<template>\n  <p\n    :data-error=\"error\"\n    class=\"mt-2 text-sm text-gray-400 peer-invalid:visible data-[error=true]:text-red-500 dark:text-gray-500\"\n  >\n    <slot>{{ text ?? '' }}</slot>\n  </p>\n</template>\n","<script lang=\"ts\" setup>\nimport type { InputProps } from '@/types'\n\nwithDefaults(defineProps<InputProps>(), {\n  type: 'text',\n})\n\nconst modelValue = defineModel<string>()\n</script>\n\n<template>\n  <input\n    :id=\"id ?? name ?? ''\"\n    v-model=\"modelValue\"\n    :disabled=\"disabled\"\n    :name=\"name ?? ''\"\n    :placeholder=\"placeholder\"\n    :type=\"type\"\n    class=\"mt-1 block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-gray-800 placeholder-slate-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-slate-700 focus:ring-1 focus:ring-slate-700 focus:outline-none focus:invalid:border-pink-500 focus:invalid:ring-pink-500 disabled:border-slate-200 disabled:bg-slate-50 disabled:text-gray-500 disabled:shadow-none dark:border-slate-700 dark:bg-black dark:text-gray-200 dark:placeholder-slate-600 dark:focus:border-slate-300 dark:focus:ring-slate-300 dark:disabled:border-slate-800 dark:disabled:bg-slate-950 dark:disabled:text-gray-500\"\n    v-bind=\"$attrs\"\n  />\n</template>\n","<script lang=\"ts\" setup>\nimport type { SelectProps, SelectOption } from '@/types'\n\ndefineProps<SelectProps>()\n\nconst modelValue = defineModel<string | number | boolean | null>()\n</script>\n\n<template>\n  <select\n    :id=\"id ?? name ?? ''\"\n    v-model=\"modelValue\"\n    :disabled=\"disabled\"\n    :name=\"name ?? ''\"\n    class=\"mt-1 block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-gray-800 placeholder-slate-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-slate-700 focus:ring-1 focus:ring-slate-700 focus:outline-none focus:invalid:border-pink-500 focus:invalid:ring-pink-500 disabled:border-slate-200 disabled:bg-slate-50 disabled:text-gray-500 disabled:shadow-none dark:border-slate-700 dark:bg-black dark:text-gray-200 dark:placeholder-slate-600 dark:focus:border-slate-300 dark:focus:ring-slate-300 dark:disabled:border-slate-800 dark:disabled:bg-slate-950 dark:disabled:text-gray-500\"\n    v-bind=\"$attrs\"\n  >\n    <slot>\n      <option v-if=\"placeholder\" :value=\"null\" disabled>\n        {{ placeholder }}\n      </option>\n\n      <option\n        v-for=\"option in (options ?? []).filter((el: SelectOption) => !el.hidden)\"\n        :key=\"String(option.value)\"\n        :value=\"option.value\"\n      >\n        {{ option.label }}\n      </option>\n    </slot>\n  </select>\n</template>\n","<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport type { FormGroupProps } from '@/types'\nimport FormLabel from './FormLabel.vue'\nimport FormInput from './FormInput.vue'\nimport FormSelect from './FormSelect.vue'\nimport FormHelp from './FormHelp.vue'\n\nconst props = withDefaults(defineProps<FormGroupProps>(), {\n  cols: 6,\n})\n\nconst modelValue = defineModel()\n\nconst computedCols = computed(() => `span ${props.cols} / span ${props.cols}`)\n\nconst isSelect = computed(() => props.type === 'select')\n</script>\n\n<template>\n  <div :style=\"{ gridColumn: computedCols }\" :hidden=\"hidden\">\n    <slot>\n      <slot name=\"label\">\n        <FormLabel v-if=\"label\" :html-for=\"id ?? name\" :error=\"error\">\n          {{ label }}\n        </FormLabel>\n      </slot>\n\n      <slot name=\"input\">\n        <FormSelect\n          v-if=\"isSelect\"\n          v-model=\"modelValue\"\n          v-bind=\"{ ...$attrs, ...$props }\"\n        />\n        <FormInput\n          v-else\n          v-model=\"modelValue\"\n          v-bind=\"{ ...$attrs, ...$props }\"\n        />\n      </slot>\n\n      <FormHelp v-if=\"error && typeof error === 'string'\" :error=\"true\">\n        {{ error }}\n      </FormHelp>\n    </slot>\n  </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { Icon } from '@iconify/vue'\n\nconst {\n  placeholder = 'Search...',\n  icon = 'lucide:search',\n  disabled = false,\n} = defineProps<{\n  modelValue?: string\n  placeholder?: string\n  icon?: string\n  disabled?: boolean\n}>()\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n}>()\n\nconst handleInput = (event: Event) => {\n  const target = event.target as HTMLInputElement\n  emit('update:modelValue', target.value)\n}\n</script>\n\n<template>\n  <div class=\"relative\">\n    <Icon :icon=\"icon\" class=\"absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-gray-400\" />\n    <input\n      :disabled=\"disabled\"\n      :placeholder=\"placeholder\"\n      :value=\"modelValue\"\n      class=\"focus:border-primary focus:ring-primary w-full rounded-lg border border-gray-300 bg-white py-2 pr-4 pl-10 text-gray-900 placeholder-gray-400 transition-colors disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500\"\n      type=\"text\"\n      @input=\"handleInput\"\n    />\n  </div>\n</template>\n"],"names":["_createElementBlock","_renderSlot","_useModel","_withDirectives","_openBlock","_mergeProps","$attrs","_hoisted_1","_hoisted_2","_toDisplayString","_Fragment","_renderList","_createBlock","FormLabel","FormSelect","$props","FormInput","FormHelp","_createVNode","_unref","_createElementVNode"],"mappings":"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"}