katecms 0.0.0-stage → 1.0.0-beta.1

package/src/runtime/internal/parts/InputControl.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import type { Field } from '@katecms/core'
+
+type ControlField = Partial<Pick<
+  Extract<Field, { type: 'text' }>,
+  'placeholder' | 'prepend' | 'append' | 'required'
+>>
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<{
+  fieldKey: string
+  field?: ControlField
+  type?: string
+  numeric?: boolean
+}>(), {
+  field: () => ({}),
+  type: 'text',
+  numeric: false,
+})
+
+const model = defineModel<string | number | null>()
+
+const rootClass = 'katecms-input-control'
+
+function onInput(event: Event) {
+  const value = (event.target as HTMLInputElement).value
+  model.value = props.numeric ? (value === '' ? null : Number(value)) : value
+}
+</script>
+
+<template>
+  <div :class="[rootClass, `${rootClass}--type-${type}`]">
+    <KateCmsFieldAddon
+      :field="field"
+      position="prepend"
+    />
+    <input
+      :id="fieldKey"
+      :value="model"
+      :type="type"
+      :name="fieldKey"
+      :placeholder="field?.placeholder || undefined"
+      :required="!!field?.required"
+      :class="[
+        `${rootClass}__input`,
+        `${rootClass}__input--type-${type}`,
+        { [`${rootClass}__input--is-prepend`]: field?.prepend },
+        { [`${rootClass}__input--is-append`]: field?.append || $slots.append },
+      ]"
+      v-bind="$attrs"
+      @input="onInput"
+    >
+    <slot name="append" />
+    <KateCmsFieldAddon
+      :field="field"
+      position="append"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use "../../assets/styles" as *;
+
+$root: '.katecms-input-control';
+
+#{$root} {
+  display: flex;
+  position: relative;
+
+  &--type-range {
+    :deep(.katecms-field-addon) {
+      border: 1px solid $color-border;
+      border-radius: $border-radius-inter;
+    }
+
+    :deep(.katecms-field-addon--prepend) {
+      margin-right: math-rem(10);
+    }
+
+    :deep(.katecms-field-addon--append) {
+      margin-left: math-rem(10);
+    }
+  }
+
+  &__input {
+    height: math-rem(38);
+    border: 1px solid $color-border;
+    border-radius: $border-radius;
+    padding: 0 math-rem(10);
+    color: $color-ink;
+    background-color: $color-surface;
+    font-size: math-rem(14);
+    flex-basis: 0;
+    flex-grow: 1;
+    max-width: 100%;
+    margin: 0;
+
+    @include placeholder($color-muted);
+
+    &--is-prepend {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &--is-append {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &--type-range {
+      $track-h: 6px;
+      $thumb-size: 14px;
+
+      @mixin range-track {
+        height: $track-h;
+        background: $color-border;
+        border: 0;
+        border-radius: 999px;
+      }
+
+      @mixin range-thumb {
+        width: $thumb-size;
+        height: $thumb-size;
+        background: $color-accent;
+        border: 2px solid $color-surface;
+        border-radius: 50%;
+        box-shadow: $shadow-sm;
+        cursor: pointer;
+      }
+
+      height: $thumb-size;
+      padding: 0;
+      background: transparent;
+      cursor: pointer;
+      -webkit-appearance: none;
+      appearance: none;
+      display: block;
+      border: 0;
+      border-radius: 0;
+      align-self: flex-end;
+      margin: math-rem(24) 0 0;
+
+      &:focus {
+        outline: none;
+      }
+
+      &::-webkit-slider-runnable-track {
+        @include range-track;
+      }
+
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        margin-top: calc((#{$track-h} - #{$thumb-size}) / 2);
+
+        @include range-thumb;
+      }
+
+      &:focus::-webkit-slider-thumb {
+        box-shadow: 0 0 0 2px color-alpha($color-accent, 0.4);
+      }
+
+      &::-moz-range-track {
+        @include range-track;
+      }
+
+      &::-moz-range-progress {
+        height: $track-h;
+        background: $color-accent;
+        border-radius: 999px;
+      }
+
+      &::-moz-range-thumb {
+        @include range-thumb;
+      }
+
+      &:focus::-moz-range-thumb {
+        box-shadow: 0 0 0 2px color-alpha($color-accent, 0.4);
+      }
+    }
+
+    &:focus {
+      outline: none;
+      border-color: $color-accent;
+    }
+  }
+}
+</style>

package/src/runtime/internal/ui/UiButton.vue

@@ -0,0 +1,274 @@
+<script setup lang="ts">
+import { computed, useAttrs, useTemplateRef } from 'vue'
+
+const rootClass = 'katecms-btn'
+
+
+type ButtonLink = {
+  url?: string
+  title?: string
+  target?: string
+}
+
+const props = withDefaults(defineProps<{
+  link?: ButtonLink | string
+  variant?: string | string[]
+  tag?: string
+  active?: boolean
+}>(), {
+  link: () => ({}),
+  variant: '',
+  tag: 'a',
+  active: false,
+})
+
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
+const variants = computed(() => {
+  const value = props.variant
+  const list = Array.isArray(value) ? value : [value]
+  return list.filter(v => typeof v === 'string' && v.trim().length > 0)
+})
+
+function attrDisabled(value: unknown): boolean {
+  return value !== undefined && value !== false && value !== null && value !== 'false'
+}
+
+const isDisabled = computed(() => attrDisabled(attrs.disabled))
+
+const classBtn = computed(() => [
+  rootClass,
+  ...variants.value.map(v => `${rootClass}--${v}`),
+  props.tag === 'a' && isDisabled.value ? `${rootClass}--disabled` : '',
+  props.active ? `${rootClass}--active` : '',
+].filter(Boolean))
+
+const linkObj = computed<ButtonLink>(() => {
+  if (typeof props.link === 'string') {
+    return { url: props.link, title: '', target: '' }
+  }
+  return props.link ?? {}
+})
+
+const title = computed(() => linkObj.value.title?.trim() || '')
+
+const finalAttrs = computed(() => {
+  const next: Record<string, unknown> = { ...attrs }
+
+  if (props.tag === 'a') {
+    delete next.disabled
+    next.to = linkObj.value.url || ''
+    next.target = linkObj.value.target === '_blank' ? '_blank' : null
+    if (isDisabled.value) {
+      next['aria-disabled'] = 'true'
+      next.tabindex = -1
+    }
+  }
+  else if (props.tag === 'button') {
+    next.type = attrs.type ?? 'button'
+  }
+
+  const ariaLabel = attrs['aria-label']
+  next['aria-label'] = (typeof ariaLabel === 'string' && ariaLabel.trim())
+    || linkObj.value.title?.trim()
+    || 'Button'
+
+  if (props.tag === 'span') {
+    next.role = 'button'
+  }
+
+  next.class = attrs.class ? [classBtn.value, attrs.class] : classBtn.value
+
+  return next
+})
+
+const hasLink = computed(() => props.tag === 'a' && !!linkObj.value.url)
+
+function onLinkClick(event: MouseEvent) {
+  if (!isDisabled.value) {
+    return
+  }
+  event.preventDefault()
+  event.stopImmediatePropagation()
+}
+
+const buttonEl = useTemplateRef<HTMLElement>('buttonEl')
+
+defineExpose({ buttonEl })
+</script>
+
+<template>
+  <NuxtLink
+    v-if="hasLink"
+    ref="buttonEl"
+    v-bind="finalAttrs"
+    @click="onLinkClick"
+  >
+    <slot>{{ title }}</slot>
+  </NuxtLink>
+  <component
+    :is="tag"
+    v-else-if="tag !== 'a'"
+    ref="buttonEl"
+    v-bind="finalAttrs"
+  >
+    <slot>{{ title }}</slot>
+  </component>
+</template>
+
+<style scoped lang="scss">
+@use "../../assets/styles" as *;
+
+$root: '.katecms-btn';
+
+#{$root} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin: 0;
+  border: 1px solid transparent;
+  border-radius: $border-radius-inter;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1;
+  height: math-rem(38);
+  padding: 0 math-rem(16);
+  font-size: math-rem(14);
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  transition:
+    background-color .3s ease,
+    border-color .3s ease,
+    color .3s ease,
+    box-shadow .3s ease;
+
+  &:focus {
+    outline: 0;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid color-alpha($color-accent, .4);
+    outline-offset: 2px;
+  }
+
+  &:active:not(:disabled):not(#{$root}--disabled) {
+    transform: translateY(1px);
+  }
+
+  &:disabled,
+  &--disabled {
+    background: $color-border !important;
+    color: $color-muted !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+    cursor: not-allowed;
+    transform: none !important;
+  }
+
+  &--small {
+    height: math-rem(32);
+    padding: 0 math-rem(12);
+    font-size: math-rem(13);
+
+    svg,
+    :deep(svg) {
+      display: block;
+      width: math-rem(18);
+      height: math-rem(18) !important;
+      object-fit: contain;
+      object-position: center;
+    }
+  }
+
+  &:not(#{$root}--small) {
+    svg,
+    :deep(svg) {
+      display: block;
+      width: math-rem(20);
+      height: math-rem(20) !important;
+      object-fit: contain;
+      object-position: center;
+    }
+  }
+
+  &:not(#{$root}--secondary):not(#{$root}--tertiary):not(#{$root}--red) {
+    background: $color-accent;
+    color: $color-on-accent;
+    box-shadow: $shadow-sm, 0 4px 12px rgba(47, 111, 237, .18);
+
+    &:hover:not(:disabled):not(#{$root}--disabled),
+    &#{$root}--active:not(:disabled):not(#{$root}--disabled) {
+      background: $color-accent-hover;
+    }
+  }
+
+  &--secondary {
+    background: $color-surface;
+    color: $color-ink;
+    border-color: $color-border;
+
+    &:hover:not(:disabled):not(#{$root}--disabled) {
+      background: $color-bg;
+    }
+
+    &#{$root}--active:not(:disabled):not(#{$root}--disabled) {
+      background: $color-accent-wash;
+      border-color: $color-accent;
+      color: $color-accent;
+    }
+  }
+
+  &--tertiary {
+    background: transparent;
+    color: $color-muted;
+    padding: 0 math-rem(10);
+
+    &:hover:not(:disabled):not(#{$root}--disabled) {
+      background: $color-accent-wash;
+    }
+
+    &#{$root}--active:not(:disabled):not(#{$root}--disabled) {
+      background: $color-accent-wash;
+      color: $color-accent;
+    }
+  }
+
+  &--red {
+    background: $color-surface;
+    color: $color-danger;
+    border-color: $color-danger;
+
+    &:hover:not(:disabled):not(#{$root}--disabled),
+    &#{$root}--active:not(:disabled):not(#{$root}--disabled) {
+      background: $color-danger-bg;
+    }
+
+    &:focus-visible {
+      outline-color: color-alpha($color-danger, .4);
+    }
+  }
+
+  &--icon {
+    width: math-rem(38);
+    padding: 0 !important;
+
+    &#{$root}--small {
+      width: math-rem(32);
+    }
+  }
+
+  &--full {
+    display: flex;
+    width: 100%;
+  }
+}
+</style>