webcake-ui-kit 1.0.0 → 1.0.1

package/src/components/dialog/Dialog.vue

@@ -0,0 +1,355 @@
+<template>
+  <div v-if="hasOpened" v-show="isVisible" class="ui-dialog-root" :style="rootStyle">
+    <transition name="ui-dialog-fade">
+      <div v-if="isOpen && mask" class="ui-dialog-mask" :style="maskStyle"></div>
+    </transition>
+    <transition name="ui-dialog-zoom" appear @after-leave="onAfterLeave">
+      <div
+        v-if="isOpen"
+        ref="wrap"
+        class="ui-dialog-wrap"
+        :class="wrapCls"
+        tabindex="-1"
+        role="dialog"
+        aria-modal="true"
+        @mousedown.self="onWrapMousedown"
+        @mouseup.self="onWrapMouseup"
+        @keydown.esc="onEscape"
+      >
+        <div class="ui-dialog-content" :style="contentStyle">
+          <div :class="['ui-dialog', isFullscreen && 'ui-dialog--fullscreen']">
+            <div v-if="showHeader" :class="['ui-dialog-header', headerDivider && 'ui-dialog-header--divided']">
+              <div class="ui-dialog-header__row">
+                <slot name="header">
+                  <div v-if="hasTitle" class="ui-dialog-header__content">
+                    <div class="ui-dialog-header__title">
+                      <slot name="title">{{ title }}</slot>
+                    </div>
+                    <div v-if="hasSubText" class="ui-dialog-header__sub-text">
+                      <slot name="sub-text">{{ subText }}</slot>
+                    </div>
+                  </div>
+                  <div v-else class="ui-dialog-header__content ui-dialog-header__content--empty"></div>
+                </slot>
+
+                <div class="ui-dialog-header__actions">
+                  <button
+                    v-if="minimizable"
+                    type="button"
+                    class="ui-dialog-header__icon-btn"
+                    :aria-label="minimized ? 'Restore' : 'Minimize'"
+                    @click="toggleMinimize"
+                  >
+                    <svg
+                      v-if="!minimized"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      aria-hidden="true"
+                    >
+                      <path d="M5 10h10" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
+                    </svg>
+                    <svg v-else viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                      <rect x="4" y="5" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.75" />
+                    </svg>
+                  </button>
+                  <button
+                    v-if="fullscreen"
+                    type="button"
+                    class="ui-dialog-header__icon-btn"
+                    :aria-label="isFullscreen ? 'Exit fullscreen' : 'Fullscreen'"
+                    @click="toggleFullscreen"
+                  >
+                    <svg
+                      v-if="!isFullscreen"
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="1.75"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="lucide lucide-expand-icon lucide-expand"
+                    >
+                      <path d="m15 15 6 6" />
+                      <path d="m15 9 6-6" />
+                      <path d="M21 16v5h-5" />
+                      <path d="M21 8V3h-5" />
+                      <path d="M3 16v5h5" />
+                      <path d="m3 21 6-6" />
+                      <path d="M3 8V3h5" />
+                      <path d="M9 9 3 3" />
+                    </svg>
+                    <svg
+                      v-else
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="1.75"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="lucide lucide-shrink-icon lucide-shrink"
+                    >
+                      <path d="m15 15 6 6m-6-6v4.8m0-4.8h4.8" />
+                      <path d="M9 19.8V15m0 0H4.2M9 15l-6 6" />
+                      <path d="M15 4.2V9m0 0h4.8M15 9l6-6" />
+                      <path d="M9 4.2V9m0 0H4.2M9 9 3 3" />
+                    </svg>
+                  </button>
+                  <button
+                    v-if="closable"
+                    type="button"
+                    class="ui-dialog-header__icon-btn"
+                    aria-label="Close"
+                    @click="handleCancel"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                      <path
+                        d="M14.4841 4.48408C14.7688 4.19932 15.2312 4.19932 15.516 4.48408C15.8007 4.76883 15.8007 5.23122 15.516 5.51598L11.0319 10L15.516 14.4841C15.8007 14.7688 15.8007 15.2312 15.516 15.516C15.2312 15.8007 14.7688 15.8007 14.4841 15.516L10 11.0319L5.51598 15.516C5.23122 15.8007 4.76883 15.8007 4.48408 15.516C4.19932 15.2312 4.19932 14.7688 4.48408 14.4841L8.96813 10L4.48408 5.51598C4.19932 5.23122 4.19932 4.76883 4.48408 4.48408C4.76883 4.19932 5.23122 4.19932 5.51598 4.48408L10 8.96813L14.4841 4.48408Z"
+                        fill="#171717"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div v-show="!minimized" class="ui-dialog-body">
+              <slot />
+            </div>
+
+            <div
+              v-if="footer && !minimized"
+              :class="[
+                'ui-dialog-footer',
+                `ui-dialog-footer--align-${footerAlign}`,
+                footerDivider && 'ui-dialog-footer--divided'
+              ]"
+            >
+              <div class="ui-dialog-footer__inner">
+                <slot name="footer">
+                  <Button :variant="cancelVariant" @click="handleCancel">{{ cancelText }}</Button>
+                  <Button :variant="okVariant" :loading="confirmLoading" @click="handleOk">{{ okText }}</Button>
+                </slot>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import Button from '../button/Button.vue'
+
+export default {
+  name: 'Dialog',
+  components: { Button },
+  model: { prop: 'open', event: 'change' },
+  props: {
+    open: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: undefined },
+    title: { type: String, default: '' },
+    subText: { type: String, default: '' },
+    closable: { type: Boolean, default: true },
+    showHeader: { type: Boolean, default: true },
+    headerDivider: { type: Boolean, default: true },
+    footer: { type: Boolean, default: true },
+    footerAlign: {
+      type: String,
+      default: 'right',
+      validator: v => ['right', 'fill'].includes(v)
+    },
+    footerDivider: { type: Boolean, default: true },
+    okText: { type: String, default: 'OK' },
+    cancelText: { type: String, default: 'Cancel' },
+    okVariant: { type: String, default: 'primary' },
+    cancelVariant: { type: String, default: 'outline' },
+    confirmLoading: { type: Boolean, default: false },
+    width: { type: [Number, String], default: '' },
+    centered: { type: Boolean, default: false },
+    mask: { type: Boolean, default: true },
+    maskClosable: { type: Boolean, default: true },
+    keyboard: { type: Boolean, default: true },
+    zIndex: { type: [Number, String], default: 1000 },
+    minimizable: { type: Boolean, default: false },
+    fullscreen: { type: Boolean, default: false },
+    blur: { type: [Boolean, Number, String], default: false }
+  },
+  emits: ['change', 'update:modelValue', 'ok', 'cancel', 'after-close'],
+  data() {
+    return {
+      hasOpened: false,
+      isVisible: false,
+      minimized: false,
+      isFullscreen: false
+    }
+  },
+  computed: {
+    isOpen() {
+      return this.modelValue !== undefined ? this.modelValue : this.open
+    },
+    rootStyle() {
+      return { zIndex: this.zIndex }
+    },
+    maskStyle() {
+      if (!this.blur) return {}
+      const val =
+        this.blur === true
+          ? '8px'
+          : typeof this.blur === 'number' || !isNaN(Number(this.blur))
+            ? `${this.blur}px`
+            : this.blur
+      return { backdropFilter: `blur(${val})`, WebkitBackdropFilter: `blur(${val})` }
+    },
+    contentStyle() {
+      if (this.isFullscreen) return {}
+      if (!this.width) return {}
+      const w = typeof this.width === 'number' || !isNaN(Number(this.width)) ? `${this.width}px` : this.width
+      return { width: w }
+    },
+    wrapCls() {
+      return [
+        this.centered && !this.isFullscreen ? 'ui-dialog-wrap--centered' : null,
+        this.isFullscreen ? 'ui-dialog-wrap--fullscreen' : null
+      ].filter(Boolean)
+    },
+    hasTitleSlot() {
+      return !!this.$slots['title']
+    },
+    hasTitle() {
+      return !!this.title || this.hasTitleSlot
+    },
+    hasSubTextSlot() {
+      return !!this.$slots['sub-text']
+    },
+    hasSubText() {
+      return !!this.subText || this.hasSubTextSlot
+    },
+    hasHeaderActions() {
+      return this.minimizable || this.fullscreen || !!this.$slots['header-actions']
+    }
+  },
+  watch: {
+    isOpen: {
+      handler(v) {
+        if (v) {
+          this.isVisible = true
+          this.onOpen()
+        } else {
+          this.minimized = false
+          this.isFullscreen = false
+          this.onClose()
+        }
+      }
+    }
+  },
+  mounted() {
+    this._prevFocus = null
+    this._prevOverflow = ''
+    this._prevPadding = ''
+    //Đẩy dialog ra ngoài body
+    if (typeof document !== 'undefined' && this.$el && this.$el.parentNode !== document.body) {
+      document.body.appendChild(this.$el)
+    }
+    if (typeof this.$on === 'function') {
+      // eslint-disable-next-line vue/no-deprecated-events-api
+      this.$on('hook:beforeDestroy', this.cleanup)
+    }
+    if (this.isOpen) {
+      this.isVisible = true
+      this.onOpen()
+    }
+  },
+  beforeUnmount() {
+    this.cleanup()
+  },
+  methods: {
+    setOpen(v) {
+      this.$emit('change', v)
+      this.$emit('update:modelValue', v)
+    },
+    handleOk(e) {
+      this.$emit('ok', e)
+    },
+    handleCancel(e) {
+      this.$emit('cancel', e)
+      this.setOpen(false)
+    },
+    onWrapMousedown(e) {
+      this._mousedownOnWrap = true
+    },
+    onWrapMouseup(e) {
+      if (this.maskClosable && this._mousedownOnWrap) {
+        this.handleCancel(e)
+      }
+      this._mousedownOnWrap = false
+    },
+    onEscape(e) {
+      if (this.keyboard) this.handleCancel(e)
+    },
+    toggleMinimize() {
+      this.minimized = !this.minimized
+      if (this.minimized) this.isFullscreen = false
+    },
+    toggleFullscreen() {
+      this.isFullscreen = !this.isFullscreen
+      if (this.isFullscreen) this.minimized = false
+    },
+    onOpen() {
+      this.hasOpened = true
+      this.lockBody()
+      if (typeof document !== 'undefined') {
+        this._prevFocus = document.activeElement
+      }
+      this.$nextTick(() => {
+        if (this.$refs.wrap && this.$refs.wrap.focus) {
+          this.$refs.wrap.focus()
+        }
+      })
+    },
+    onClose() {
+      this.unlockBody()
+      if (this._prevFocus && typeof this._prevFocus.focus === 'function') {
+        this._prevFocus.focus()
+      }
+      this._prevFocus = null
+    },
+    onAfterLeave() {
+      if (!this.isOpen) {
+        this.isVisible = false
+      }
+      this.$emit('after-close')
+    },
+    lockBody() {
+      if (typeof document === 'undefined' || typeof window === 'undefined') return
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
+      this._prevOverflow = document.body.style.overflow
+      this._prevPadding = document.body.style.paddingRight
+      document.body.style.overflow = 'hidden'
+      if (scrollbarWidth > 0) {
+        document.body.style.paddingRight = `${scrollbarWidth}px`
+      }
+    },
+    unlockBody() {
+      if (typeof document === 'undefined') return
+      document.body.style.overflow = this._prevOverflow || ''
+      document.body.style.paddingRight = this._prevPadding || ''
+    },
+    cleanup() {
+      this.unlockBody()
+      if (this.$el && this.$el.parentNode === document.body) {
+        document.body.removeChild(this.$el)
+      }
+    }
+  }
+}
+</script>
+
+<style src="./dialog.css" scoped></style>

package/src/components/dialog/dialog.css

@@ -0,0 +1,255 @@
+/* ── overlay ──────────────────────────────────────────────────────────── */
+.ui-dialog-root {
+  position: fixed;
+  inset: 0;
+}
+
+.ui-dialog-mask {
+  position: absolute;
+  inset: 0;
+  background: var(--backdrop);
+}
+
+.ui-dialog-wrap {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: auto;
+  outline: none;
+  padding: 100px 16px 16px;
+  -webkit-overflow-scrolling: touch;
+}
+
+.ui-dialog-wrap {
+  padding: 24px;
+}
+
+@media (max-width: 767px) {
+  .ui-dialog-wrap {
+    padding: 8px;
+  }
+}
+
+.ui-dialog-wrap--centered {
+  justify-content: center;
+  padding: 16px;
+}
+
+.ui-dialog-wrap--fullscreen {
+  padding: 0;
+  overflow: hidden;
+  align-items: stretch;
+}
+
+.ui-dialog-content {
+  flex-shrink: 0;
+  pointer-events: auto;
+}
+
+.ui-dialog-wrap--fullscreen .ui-dialog-content {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+
+/* ── shell ────────────────────────────────────────────────────────────── */
+.ui-dialog {
+  display: flex;
+  flex-direction: column;
+  background: var(--card);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--rounded-xl);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+  max-height: 100%; /* Allow internal scrolling if content is taller than wrapper */
+}
+
+.ui-dialog-content {
+  width: min(640px, calc(100vw - 32px));
+}
+
+@media (max-width: 767px) {
+  .ui-dialog-content {
+    width: min(320px, calc(100vw - 32px));
+  }
+}
+
+.ui-dialog--fullscreen {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+}
+
+/* ── header ───────────────────────────────────────────────────────────── */
+.ui-dialog-header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  min-height: 56px;
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: transparent;
+  flex-shrink: 0;
+}
+
+.ui-dialog-header--divided {
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.ui-dialog-header__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  width: 100%;
+}
+
+.ui-dialog-header__content {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-2xs);
+  min-width: 0;
+}
+
+.ui-dialog-header__content--breadcrumb {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-2xs);
+}
+
+.ui-dialog-header__content--empty {
+  flex: 1 1 0;
+}
+
+.ui-dialog-header__title {
+  width: 100%;
+  font-family: var(--heading-4-font-family);
+  font-size: var(--heading-4-font-size);
+  line-height: var(--heading-4-line-height);
+  letter-spacing: var(--heading-4-letter-spacing);
+  font-weight: var(--heading-4-font-weight);
+  color: var(--primary-fg);
+}
+
+.ui-dialog-header__sub-text {
+  width: 100%;
+  font-family: var(--paragraph-small-font-family);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  letter-spacing: var(--paragraph-small-letter-spacing);
+  font-weight: var(--paragraph-font-weight);
+  color: var(--muted-fg);
+}
+
+.ui-dialog-header__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-shrink: 0;
+}
+
+.ui-dialog-header__icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: 32px;
+  min-height: 32px;
+  padding: var(--spacing-6);
+  margin: 0;
+  background: var(--ghost);
+  color: var(--primary-fg);
+  border: 0;
+  border-radius: var(--rounded-xl);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.ui-dialog-header__icon-btn svg {
+  display: block;
+  width: 20px;
+  height: 20px;
+}
+
+.ui-dialog-header__icon-btn:hover {
+  background: var(--ghost-hover);
+}
+
+.ui-dialog-header__icon-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus-ring);
+}
+
+/* ── body ─────────────────────────────────────────────────────────────── */
+.ui-dialog-body {
+  padding: var(--spacing-md);
+  font-family: var(--paragraph-small-font-family);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  color: var(--secondary-fg);
+  overflow-y: auto;
+  flex: 1 1 auto;
+}
+
+/* ── footer ───────────────────────────────────────────────────────────── */
+.ui-dialog-footer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: var(--spacing-md);
+  background: var(--accent-0);
+}
+
+.ui-dialog-footer--divided {
+  border-top: 1px solid var(--border-primary);
+}
+
+.ui-dialog-footer__inner {
+  width: 100%;
+  gap: var(--spacing-xs);
+}
+
+.ui-dialog-footer--align-right .ui-dialog-footer__inner {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.ui-dialog-footer--align-fill .ui-dialog-footer__inner {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+/* ── transitions ──────────────────────────────────────────────────────── */
+.ui-dialog-fade-enter-active,
+.ui-dialog-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.ui-dialog-fade-enter,
+.ui-dialog-fade-enter-from,
+.ui-dialog-fade-leave-to {
+  opacity: 0;
+}
+
+.ui-dialog-zoom-enter-active,
+.ui-dialog-zoom-leave-active {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+.ui-dialog-zoom-enter,
+.ui-dialog-zoom-enter-from,
+.ui-dialog-zoom-leave-to {
+  opacity: 0;
+  transform: scale(0.96);
+}

package/src/components/divider/Divider.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    class="ui-divider"
+    :class="['ui-divider--' + direction, 'ui-divider--spacing-' + spacing]"
+    role="separator"
+    :aria-orientation="direction"
+  />
+</template>
+
+<script>
+export default {
+  name: 'Divider',
+
+  props: {
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator: function (v) {
+        return ['horizontal', 'vertical'].indexOf(v) !== -1
+      }
+    },
+    spacing: {
+      type: String,
+      default: 'none',
+      validator: function (v) {
+        return ['none', 'regular', 'spacious'].indexOf(v) !== -1
+      }
+    }
+  },
+
+  emits: []
+}
+</script>
+
+<style src="./divider.css" scoped></style>

package/src/components/divider/divider.css

@@ -0,0 +1,38 @@
+.ui-divider {
+  flex-shrink: 0;
+  background-color: var(--border-primary);
+}
+
+/* Horizontal */
+.ui-divider--horizontal {
+  display: block;
+  width: 100%;
+  height: 1px;
+}
+
+.ui-divider--horizontal.ui-divider--spacing-regular {
+  margin-top: var(--spacing-2xs);
+  margin-bottom: var(--spacing-2xs);
+}
+
+.ui-divider--horizontal.ui-divider--spacing-spacious {
+  margin-top: var(--spacing-7p5);
+  margin-bottom: var(--spacing-7p5);
+}
+
+/* Vertical */
+.ui-divider--vertical {
+  display: inline-block;
+  width: 1px;
+  align-self: stretch;
+}
+
+.ui-divider--vertical.ui-divider--spacing-regular {
+  margin-left: var(--spacing-2xs);
+  margin-right: var(--spacing-2xs);
+}
+
+.ui-divider--vertical.ui-divider--spacing-spacious {
+  margin-left: var(--spacing-7p5);
+  margin-right: var(--spacing-7p5);
+}