windly-ui 1.0.2 → 1.0.4

package/dist/runtime/components/Radio.vue

@@ -0,0 +1,222 @@
+<script setup>
+defineOptions({
+  name: "UIRadio"
+});
+import { computed } from "vue";
+const props = defineProps({
+  modelValue: { type: [String, Number, Boolean], required: false, default: "" },
+  value: { type: [String, Number, Boolean], required: true },
+  label: { type: String, required: true },
+  id: { type: String, required: false, default: void 0 },
+  name: { type: String, required: false, default: "" },
+  hint: { type: String, required: false, default: "" },
+  icon: { type: String, required: false, default: "" },
+  disable: { type: Boolean, required: false, default: false },
+  color: { type: String, required: false, default: "blue-500" },
+  size: { type: String, required: false, default: "md" },
+  rounded: { type: String, required: false, default: "full" },
+  flat: { type: Boolean, required: false, default: false },
+  bordered: { type: Boolean, required: false, default: true },
+  borderColor: { type: String, required: false, default: "gray-300" },
+  labelPosition: { type: String, required: false, default: "right" }
+});
+const emit = defineEmits(["update:modelValue"]);
+const isHex = (val) => {
+  return val.startsWith("#") || val.startsWith("rgb") || val.startsWith("hsl");
+};
+const isChecked = computed(
+  () => props.modelValue === props.value
+);
+const sizeClasses = computed(
+  () => {
+    switch (props.size) {
+      case "sm":
+        return {
+          radio: "w-4 h-4",
+          icon: "text-sm"
+        };
+      case "lg":
+        return {
+          radio: "w-6 h-6",
+          icon: "text-lg"
+        };
+      case "md":
+      default:
+        return {
+          radio: "w-5 h-5",
+          icon: "text-base"
+        };
+    }
+  }
+);
+const roundedClass = computed(
+  () => {
+    const map = {
+      none: "rounded-none",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      full: "rounded-full"
+    };
+    return map[props.rounded];
+  }
+);
+const labelPositionClass = computed(() => {
+  const map = {
+    top: "flex-col-reverse",
+    bottom: "flex-col",
+    left: "flex-row-reverse",
+    right: "flex-row"
+  };
+  return map[props.labelPosition];
+});
+const radioClasses = computed(
+  () => [
+    "inline-flex items-center justify-center border-2 transition-all duration-200 bg-white dark:bg-gray-900",
+    sizeClasses.value.radio,
+    roundedClass.value,
+    props.flat ? "shadow-none" : "shadow-sm",
+    props.disable ? "opacity-50" : "",
+    props.bordered && !isHex(
+      props.borderColor
+    ) ? `border-${props.borderColor}` : "",
+    isChecked.value && !isHex(props.color) ? `border-${props.color} text-${props.color}` : "",
+    !isChecked.value ? "border-gray-300" : ""
+  ]
+);
+const radioStyle = computed(
+  () => {
+    const style = {};
+    if (props.bordered && isHex(
+      props.borderColor
+    )) {
+      style.borderColor = props.borderColor;
+    }
+    if (isChecked.value && isHex(props.color)) {
+      style.borderColor = props.color;
+      style.color = props.color;
+    }
+    return style;
+  }
+);
+const iconClasses = computed(
+  () => [
+    "material-icons transition-opacity duration-200",
+    sizeClasses.value.icon,
+    isChecked.value ? "opacity-100" : "opacity-0",
+    !isHex(props.color) ? `text-${props.color}` : ""
+  ]
+);
+const iconStyle = computed(
+  () => {
+    const style = {};
+    if (isHex(props.color)) {
+      style.color = props.color;
+    }
+    return style;
+  }
+);
+const toggle = () => {
+  if (props.disable)
+    return;
+  emit(
+    "update:modelValue",
+    props.value
+  );
+};
+</script>
+
+<template>
+  <div
+    class="radio-container flex items-center"
+  >
+    <input
+      :id="id"
+      type="radio"
+      :name="name"
+      :value="value"
+      :checked="
+  isChecked
+"
+      :disabled="
+  disable
+"
+      class="sr-only"
+      @change="toggle"
+    >
+
+    <label
+      :for="id"
+      tabindex="0"
+      role="radio"
+      :aria-checked="
+  isChecked
+"
+      :aria-disabled="
+  disable
+"
+      :class="[
+  'flex items-center cursor-pointer select-none',
+  labelPositionClass,
+  {
+    'opacity-50 pointer-events-none': disable
+  }
+]"
+      @click.prevent="
+  toggle
+"
+      @keydown.enter.prevent="
+  toggle
+"
+      @keydown.space.prevent="
+  toggle
+"
+    >
+      <!-- Radio -->
+      <span
+        :class="
+  radioClasses
+"
+        :style="
+  radioStyle
+"
+      >
+        <i
+          v-if="
+  icon && isChecked
+"
+          :class="
+  iconClasses
+"
+          :style="
+  iconStyle
+"
+        >
+          {{ icon }}
+        </i>
+        <span
+          v-else
+          class="block m-auto rounded-full"
+          :class="
+  [
+    !isHex(props.color) && isChecked ? `bg-${props.color}` : '',
+    size === 'sm' ? 'w-2 h-2' : size === 'lg' ? 'w-3 h-3' : 'w-2.5 h-2.5'
+  ]
+"
+          :style="isHex(props.color) ? { backgroundColor: props.color } : {}"
+        />
+      </span>
+
+      <!-- Label -->
+      <span
+        class="mx-2 font-medium text-gray-700 dark:text-gray-300"
+      >
+        {{ label }}
+      </span>
+    </label>
+  </div>
+</template>
+
+<style scoped>
+.radio-container{-webkit-user-select:none;-moz-user-select:none;user-select:none}
+</style>

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

@@ -0,0 +1,41 @@
+type LabelPosition = 'top' | 'bottom' | 'left' | 'right';
+type RadioSize = 'sm' | 'md' | 'lg';
+type Rounded = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type __VLS_Props = {
+    modelValue?: string | number | boolean;
+    value: string | number | boolean;
+    label: string;
+    id?: string;
+    name?: string;
+    hint?: string;
+    icon?: string;
+    disable?: boolean;
+    color?: string;
+    size?: RadioSize;
+    rounded?: Rounded;
+    flat?: boolean;
+    bordered?: boolean;
+    borderColor?: string;
+    labelPosition?: LabelPosition;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | number | boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
+}>, {
+    modelValue: string | number | boolean;
+    name: string;
+    disable: boolean;
+    color: string;
+    rounded: Rounded;
+    size: RadioSize;
+    borderColor: string;
+    icon: string;
+    flat: boolean;
+    id: string;
+    bordered: boolean;
+    hint: string;
+    labelPosition: LabelPosition;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ScrollArea.d.vue.ts

@@ -0,0 +1,79 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    horizontal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideScrollbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    horizontal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideScrollbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    horizontal: boolean;
+    vertical: boolean;
+    width: string;
+    maxWidth: string;
+    height: string;
+    maxHeight: string;
+    hideScrollbar: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ScrollArea.vue

@@ -0,0 +1,36 @@
+<script setup>
+defineOptions({
+  inheritAttrs: false
+});
+import { computed } from "vue";
+const props = defineProps({
+  width: { type: String, default: "100%" },
+  height: { type: String, default: "300px" },
+  maxWidth: { type: String, default: "" },
+  maxHeight: { type: String, default: "" },
+  horizontal: { type: Boolean, default: false },
+  vertical: { type: Boolean, default: true },
+  hideScrollbar: { type: Boolean, default: false }
+});
+const scrollStyle = computed(() => ({
+  width: props.width,
+  height: props.height,
+  maxWidth: props.maxWidth || void 0,
+  maxHeight: props.maxHeight || void 0
+}));
+const scrollClass = computed(() => [
+  props.vertical ? "overflow-y-auto" : "overflow-y-hidden",
+  props.horizontal ? "overflow-x-auto" : "overflow-x-hidden",
+  props.hideScrollbar ? "scrollbar-hide" : ""
+]);
+</script>
+
+<template>
+  <div
+    :class="scrollClass"
+    :style="scrollStyle"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/ScrollArea.vue.d.ts

@@ -0,0 +1,79 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    horizontal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideScrollbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    maxHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    horizontal: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideScrollbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    horizontal: boolean;
+    vertical: boolean;
+    width: string;
+    maxWidth: string;
+    height: string;
+    maxHeight: string;
+    hideScrollbar: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,51 @@
+interface SelectOption {
+    text: string;
+    value: string | number | boolean;
+}
+type Rounded = "none" | "sm" | "md" | "lg" | "xl" | "full";
+type Size = "sm" | "md" | "lg";
+type __VLS_Props = {
+    modelValue?: string | number | boolean;
+    label?: string;
+    hint?: string;
+    placeholder?: string;
+    filter?: boolean;
+    size?: Size;
+    color?: string;
+    rounded?: Rounded;
+    dense?: boolean;
+    width?: string;
+    outlined?: boolean;
+    borderless?: boolean;
+    flat?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    id?: string;
+    options: SelectOption[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | number | boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | boolean) => any) | undefined;
+}>, {
+    modelValue: string | number | boolean;
+    disabled: boolean;
+    dense: boolean;
+    label: string;
+    filter: boolean;
+    required: boolean;
+    color: string;
+    rounded: Rounded;
+    size: Size;
+    flat: boolean;
+    id: string;
+    placeholder: string;
+    width: string;
+    readonly: boolean;
+    hint: string;
+    outlined: boolean;
+    borderless: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;