katecms 0.0.0-stage → 1.0.0-beta.1

package/dist/runtime/internal/ui/UiNotice.vue

@@ -0,0 +1,253 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, watch } from "vue";
+const DEFAULT_TIMEOUT_MS = 4e3;
+const props = defineProps({
+  variant: { type: String, required: false, default: "success" },
+  message: { type: String, required: false, default: "" },
+  placement: { type: String, required: false, default: "fixed" },
+  timeout: { type: [Number, Boolean], required: false, default: DEFAULT_TIMEOUT_MS },
+  closable: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["close"]);
+const rootClass = "katecms-notice";
+const isFixed = computed(() => props.placement === "fixed");
+const live = computed(() => props.variant === "danger" ? "assertive" : "polite");
+const timeoutMs = computed(() => {
+  if (!isFixed.value || props.timeout === false) {
+    return 0;
+  }
+  const ms = Number(props.timeout);
+  if (!Number.isFinite(ms) || ms <= 0) {
+    return 0;
+  }
+  return ms;
+});
+let timer;
+function clearTimer() {
+  if (timer) {
+    clearTimeout(timer);
+    timer = void 0;
+  }
+}
+function startTimer() {
+  clearTimer();
+  if (timeoutMs.value <= 0) {
+    return;
+  }
+  timer = setTimeout(() => emit("close"), timeoutMs.value);
+}
+onMounted(startTimer);
+watch(timeoutMs, startTimer);
+onBeforeUnmount(clearTimer);
+</script>
+
+<template>
+  <Teleport
+    to="body"
+    :disabled="!isFixed"
+  >
+    <div
+      :class="[rootClass, `${rootClass}--${variant}`, `${rootClass}--${placement}`]"
+      role="status"
+      :aria-live="live"
+    >
+      <div
+        :class="`${rootClass}__icon`"
+        aria-hidden="true"
+      >
+        <svg
+          v-if="variant === 'success'"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+          <path d="M8 12.5l2.5 2.5 5.5-6" />
+        </svg>
+        <svg
+          v-else-if="variant === 'info'"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+          <path d="M12 11v6" />
+          <path d="M12 8h.01" />
+        </svg>
+        <svg
+          v-else-if="variant === 'warning'"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+          <path d="M12 9v4" />
+          <path d="M12 17h.01" />
+        </svg>
+        <svg
+          v-else
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+          <path d="M15 9l-6 6" />
+          <path d="M9 9l6 6" />
+        </svg>
+      </div>
+      <div :class="`${rootClass}__text`">
+        <slot>{{ message }}</slot>
+      </div>
+      <button
+        v-if="closable"
+        type="button"
+        :class="`${rootClass}__close`"
+        aria-label="Close"
+        @click="emit('close')"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 640 640"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            d="M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z"
+          />
+        </svg>
+      </button>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+body#katecms-body .katecms-notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem 0.75rem 0.75rem 0.875rem;
+  border: 1px solid;
+  border-radius: var(--katecms-border-radius);
+  font-size: 0.875rem;
+  line-height: 1.45;
+}
+body#katecms-body .katecms-notice--fixed {
+  position: fixed;
+  bottom: 0.75rem;
+  right: 1rem;
+  z-index: 10000;
+  width: min(22.5rem, 100vw - 2rem);
+  box-shadow: var(--katecms-shadow-md);
+}
+body#katecms-body .katecms-notice--static {
+  position: static;
+  width: 100%;
+}
+body#katecms-body .katecms-notice--success {
+  background: var(--katecms-color-success-bg);
+  border-color: var(--katecms-color-success);
+  color: var(--katecms-color-success);
+}
+body#katecms-body .katecms-notice--info {
+  background: var(--katecms-color-info-bg);
+  border-color: var(--katecms-color-info);
+  color: var(--katecms-color-info);
+}
+body#katecms-body .katecms-notice--warning {
+  background: var(--katecms-color-warning-bg);
+  border-color: var(--katecms-color-warning);
+  color: var(--katecms-color-warning);
+}
+body#katecms-body .katecms-notice--danger {
+  background: var(--katecms-color-danger-bg);
+  border-color: var(--katecms-color-danger);
+  color: var(--katecms-color-danger);
+}
+body#katecms-body .katecms-notice__icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  margin-top: 0.0625rem;
+}
+body#katecms-body .katecms-notice__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+}
+body#katecms-body .katecms-notice__text {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin: 0;
+  min-width: 0;
+  font-weight: 600;
+  align-self: center;
+}
+body#katecms-body .katecms-notice__text :deep(div) {
+  margin: 0;
+}
+body#katecms-body .katecms-notice__close {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--katecms-border-radius-inter);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+body#katecms-body .katecms-notice__close svg {
+  display: block;
+  width: 14px;
+  height: 14px;
+  max-width: none;
+}
+body#katecms-body .katecms-notice__close:hover {
+  background: rgba(20, 26, 42, 0.06);
+}
+body#katecms-body .katecms-notice__close:focus {
+  outline: none;
+}
+body#katecms-body .katecms-notice__close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 1px;
+}
+</style>

package/dist/runtime/internal/ui/UiNotice.vue.d.ts

@@ -0,0 +1,40 @@
+type UiNoticeVariant = 'success' | 'info' | 'warning' | 'danger';
+type UiNoticePlacement = 'fixed' | 'static';
+type __VLS_Props = {
+    variant?: UiNoticeVariant;
+    message?: string;
+    /** Overlay toast (`fixed`) or in-flow banner (`static`). */
+    placement?: UiNoticePlacement;
+    /**
+     * Autoclose delay in ms. Applies only to `fixed`.
+     * `0` or `false` disables the timer.
+     */
+    timeout?: number | false;
+    /** When `false`, the close button is hidden. */
+    closable?: boolean;
+};
+declare const __VLS_template: () => {
+    __VLS_Slots: {
+        default?: (props: {}) => any;
+    };
+};
+type __VLS_Slots = ReturnType<typeof __VLS_template>['__VLS_Slots'];
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    message: string;
+    timeout: number | false;
+    placement: UiNoticePlacement;
+    variant: UiNoticeVariant;
+    closable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/internal/ui/UiSelect.d.vue.ts

@@ -0,0 +1,61 @@
+import type { SelectChoice, SelectModelValue } from '@katecms/core';
+type __VLS_Props = {
+    id?: string;
+    name?: string;
+    choices?: SelectChoice[];
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    selectedOptImage?: boolean;
+    selectedOptClearable?: boolean;
+    optionIcon?: boolean;
+    search?: boolean;
+    searchClearable?: boolean;
+    searchPlaceholder?: string;
+    maxHeight?: number | string;
+    multiple?: boolean;
+    min?: number;
+    max?: number;
+    allowCustomChoices?: boolean;
+    ariaLabel?: string;
+    noResultsText?: string;
+    addOptionText?: string;
+};
+declare function closeDropdown(): void;
+declare function openDropdown(): void;
+type __VLS_ModelProps = {
+    modelValue?: SelectModelValue;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    selectElement: import("vue").Ref<HTMLSelectElement | null, HTMLSelectElement | null>;
+    openDropdown: typeof openDropdown;
+    closeDropdown: typeof closeDropdown;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: SelectModelValue | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SelectModelValue | undefined) => any) | undefined;
+}>, {
+    search: boolean;
+    name: string;
+    id: string;
+    multiple: boolean;
+    placeholder: string;
+    required: boolean;
+    min: number;
+    max: number;
+    maxHeight: string | number;
+    choices: SelectChoice[];
+    allowCustomChoices: boolean;
+    searchPlaceholder: string;
+    disabled: boolean;
+    searchClearable: boolean;
+    selectedOptClearable: boolean;
+    noResultsText: string;
+    addOptionText: string;
+    selectedOptImage: boolean;
+    optionIcon: boolean;
+    ariaLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;