diff --git a/dist/flightkit-v0.0.1/flightkit.js b/dist/flightkit-v0.0.1/flightkit.js index 4e3cdfb..e1829b8 100644 --- a/dist/flightkit-v0.0.1/flightkit.js +++ b/dist/flightkit-v0.0.1/flightkit.js @@ -690,1088 +690,1089 @@ ; } - function isFlightkitElement(tagName, flkTag) { - const compareTo = flkTag ? flkTag.toUpperCase() : 'FLK-'; - return tagName.toUpperCase().includes(compareTo); - } - - /** - * @returns top level flightkit element - */ - function returnEventWithTopLevelElement(event, flkTag) { - let { timeStamp, type, x, y } = event; - - let target = event.target; - do { - if (!target || target.tagName === 'HTML' || isFlightkitElement(target.tagName, flkTag)) { - if (target.tagName === 'HTML') { - target = null; - } - break; - } - else { - target = target.parentNode || target.parentElement; - } - } - while (!isFlightkitElement(target.tagName, flkTag)); /** check until we get the flightkit element */ - - return { - target, - timeStamp, - type, - x, - y - }; - } - - function returnDataSetValue(event, datasetName) { - let target = event.target; - let datasetValue = ''; - do { - if (target.dataset[datasetName]) { - datasetValue = target.dataset[datasetName]; - } - else { - target = target.parentNode; - } - } - while (!datasetValue); - - return datasetValue; + function isFlightkitElement(tagName, flkTag) { + const compareTo = flkTag ? flkTag.toUpperCase() : 'FLK-'; + return tagName.toUpperCase().includes(compareTo); + } + + /** + * @returns top level flightkit element + */ + function returnEventWithTopLevelElement(event, flkTag) { + let { timeStamp, type, x, y } = event; + + let target = event.target; + do { + if (!target || target.tagName === 'HTML' || isFlightkitElement(target.tagName, flkTag)) { + if (target.tagName === 'HTML') { + target = null; + } + break; + } + else { + target = target.parentNode || target.parentElement; + } + } + while (!isFlightkitElement(target.tagName, flkTag)); /** check until we get the flightkit element */ + + return { + target, + timeStamp, + type, + x, + y + }; + } + + function returnDataSetValue(event, datasetName) { + let target = event.target; + let datasetValue = ''; + do { + if (target.dataset[datasetName]) { + datasetValue = target.dataset[datasetName]; + } + else { + target = target.parentNode; + } + } + while (!datasetValue); + + return datasetValue; } - function uuidv4() { - const guid = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => - (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) - ); - /** This will be unique enough */ - const newGuid = guid.split('-')[0]; - - if (!window.$flightkitUUIDStore) { - window.$flightkitUUIDStore = []; - } - - /** verify to be absolutely sure ;) */ - if (window.$flightkitUUIDStore.some(guid => guid === newGuid)) { - return uuidv4(); - } - else { - window.$flightkitUUIDStore.push(newGuid); - return newGuid; - } + function uuidv4() { + const guid = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => + (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) + ); + /** This will be unique enough */ + const newGuid = guid.split('-')[0]; + + if (!window.$flightkitUUIDStore) { + window.$flightkitUUIDStore = []; + } + + /** verify to be absolutely sure ;) */ + if (window.$flightkitUUIDStore.some(guid => guid === newGuid)) { + return uuidv4(); + } + else { + window.$flightkitUUIDStore.push(newGuid); + return newGuid; + } } - class BaseComponent { - - constructor() { }; - - /** This is the 'custom component' */ - _topLevelClasses = []; - _events = []; - - generateId() { - return `flk-${uuidv4()}`; - } - - render(parentElement) { - if (!parentElement.component) throw new Error("Component is not assigned! Can't render"); - parentElement.id = parentElement.id ? parentElement.id : this.generateId(); /** prefixing with flk- because it can not start with a number */ - - /** now it works with vue style events */ - const eventsToAdd = this._getAllEventAttributes(parentElement); - - if (eventsToAdd) { - const selector = `#${parentElement.id}`; - - for (const event of eventsToAdd) { - const eventAttribute = `e-${event}`; - this.addEvent(selector, event, parentElement.getAttribute(eventAttribute)); - } - } - - const numberOfClasses = (Object.keys(parentElement.classList)).length; - - if (numberOfClasses) { - for (let clen = 0; clen < numberOfClasses; clen++) { - this._topLevelClasses.push(parentElement.classList[0]); - parentElement.classList.remove(parentElement.classList[0]); - } - parentElement.removeAttribute('class'); - } - - /** always passthrough top level classes */ - if (this._topLevelClasses.length) { - /** if we have multiple components, add the passthrough classes to the first one. */ - if (Array.isArray(parentElement.component)) { - parentElement.component[0].classList.add(...this._topLevelClasses); - } - else { - parentElement.component.classList.add(...this._topLevelClasses); - } - } - clearTimeout(this._renderTimer); - /** try to limit the amount of rendering */ - this.renderTimeout = setTimeout(() => { - clearTimeout(this._renderTimer); - this._assignToDom(parentElement, parentElement.component); - }, 10); - } - - addEvent(selector, eventType, callback) { - this._events.push({ selector, eventType, callback }); - } - - _getExternalCallback(fn) { - const callbackParts = fn.split('.'); - - let actualCallback = undefined; - - for (const cbPart of callbackParts) { - if (!actualCallback) { - actualCallback = window[cbPart]; - } - else { - actualCallback = actualCallback[cbPart]; - } - } - return actualCallback; - } - - _getAllEventAttributes(parentElement) { - const attributes = parentElement.attributes; - const eventAttributes = Array.from(attributes).filter(attr => attr.name.startsWith('e-')); - /** remove custom events, because these need to be bound specifically */ - return eventAttributes.map(attr => attr.name.slice(2)); - } - - _isFlightkitElement(tagName) { - return tagName.toUpperCase().includes('FLK-'); - } - - _outerEventHandler(event) { - const ftEvent = returnEventWithTopLevelElement(event); - ftEvent.contents = event.detail; - const callback = ftEvent.target.getAttribute(`e-${ftEvent.type}`); - const callbackParts = callback.split('.'); - - let actualCallback = undefined; - - for (const cbPart of callbackParts) { - if (!actualCallback) { - actualCallback = window[cbPart]; - } - else { - actualCallback = actualCallback[cbPart]; - } - } - event.preventDefault(); - event.stopPropagation(); - return actualCallback(ftEvent); - } - - _addEvents(parentElement) { - if (parentElement.isConnected) { - for (const eventToAdd of this._events) { - - let element = document.querySelector(eventToAdd.selector); - if (!element) { - continue; - } - /** check if it is a function (inner call) */ - if (typeof eventToAdd.callback == 'function') { - element.removeEventListener(eventToAdd.eventType, eventToAdd.callback); - element.addEventListener(eventToAdd.eventType, eventToAdd.callback); - } - else { - element.removeEventListener(eventToAdd.eventType, this._outerEventHandler); - element.addEventListener(eventToAdd.eventType, this._outerEventHandler); - } - } - } - } - - removeEvents() { - for (const eventToRemove of this._events) { - let element = document.querySelector(eventToRemove.selector); - - if (!element) { - continue; - } - - if (typeof eventToRemove.callback == 'function') { - element.removeEventListener(eventToRemove.eventType, eventToRemove.callback); - } - else { - element.removeEventListener(eventToRemove.eventType, this._outerEventHandler); - } - } - this._events = []; - } - - _assignToDom(parentElement, element) { - parentElement.innerHTML = ""; - - const elementsToAdd = Array.isArray(element) ? element : [element]; - - for(const HTMLElement of elementsToAdd) { - parentElement.append(HTMLElement); - } - - /** need to add timeout so it can be applied properly */ - const eventTimer = setTimeout(() => { - this._addEvents(parentElement); - clearTimeout(eventTimer); - }, 10); - } + class BaseComponent { + + constructor() { }; + + /** This is the 'custom component' */ + _topLevelClasses = []; + _events = []; + + generateId() { + return `flk-${uuidv4()}`; + } + + render(parentElement) { + if (!parentElement.component) throw new Error("Component is not assigned! Can't render"); + parentElement.id = parentElement.id ? parentElement.id : this.generateId(); /** prefixing with flk- because it can not start with a number */ + + /** now it works with vue style events */ + const eventsToAdd = this._getAllEventAttributes(parentElement); + + if (eventsToAdd) { + const selector = `#${parentElement.id}`; + + for (const event of eventsToAdd) { + const eventAttribute = `e-${event}`; + this.addEvent(selector, event, parentElement.getAttribute(eventAttribute)); + } + } + + const numberOfClasses = (Object.keys(parentElement.classList)).length; + + if (numberOfClasses) { + for (let clen = 0; clen < numberOfClasses; clen++) { + this._topLevelClasses.push(parentElement.classList[0]); + parentElement.classList.remove(parentElement.classList[0]); + } + parentElement.removeAttribute('class'); + } + + /** always passthrough top level classes */ + if (this._topLevelClasses.length) { + /** if we have multiple components, add the passthrough classes to the first one. */ + if (Array.isArray(parentElement.component)) { + parentElement.component[0].classList.add(...this._topLevelClasses); + } + else { + parentElement.component.classList.add(...this._topLevelClasses); + } + } + clearTimeout(this._renderTimer); + /** try to limit the amount of rendering */ + this.renderTimeout = setTimeout(() => { + clearTimeout(this._renderTimer); + this._assignToDom(parentElement, parentElement.component); + }, 10); + } + + addEvent(selector, eventType, callback) { + this._events.push({ selector, eventType, callback }); + } + + _getExternalCallback(fn) { + const callbackParts = fn.split('.'); + + let actualCallback = undefined; + + for (const cbPart of callbackParts) { + if (!actualCallback) { + actualCallback = window[cbPart]; + } + else { + actualCallback = actualCallback[cbPart]; + } + } + return actualCallback; + } + + _getAllEventAttributes(parentElement) { + const attributes = parentElement.attributes; + const eventAttributes = Array.from(attributes).filter(attr => attr.name.startsWith('e-')); + /** remove custom events, because these need to be bound specifically */ + return eventAttributes.map(attr => attr.name.slice(2)); + } + + _isFlightkitElement(tagName) { + return tagName.toUpperCase().includes('FLK-'); + } + + _outerEventHandler(event) { + const ftEvent = returnEventWithTopLevelElement(event); + ftEvent.contents = event.detail; + const callback = ftEvent.target.getAttribute(`e-${ftEvent.type}`); + const callbackParts = callback.split('.'); + + let actualCallback = undefined; + + for (const cbPart of callbackParts) { + if (!actualCallback) { + actualCallback = window[cbPart]; + } + else { + actualCallback = actualCallback[cbPart]; + } + } + event.preventDefault(); + event.stopPropagation(); + return actualCallback(ftEvent); + } + + _addEvents(parentElement) { + if (parentElement.isConnected) { + for (const eventToAdd of this._events) { + + let element = document.querySelector(eventToAdd.selector); + if (!element) { + continue; + } + /** check if it is a function (inner call) */ + if (typeof eventToAdd.callback == 'function') { + element.removeEventListener(eventToAdd.eventType, eventToAdd.callback); + element.addEventListener(eventToAdd.eventType, eventToAdd.callback); + } + else { + element.removeEventListener(eventToAdd.eventType, this._outerEventHandler); + element.addEventListener(eventToAdd.eventType, this._outerEventHandler); + } + } + } + } + + removeEvents() { + for (const eventToRemove of this._events) { + let element = document.querySelector(eventToRemove.selector); + + if (!element) { + continue; + } + + if (typeof eventToRemove.callback == 'function') { + element.removeEventListener(eventToRemove.eventType, eventToRemove.callback); + } + else { + element.removeEventListener(eventToRemove.eventType, this._outerEventHandler); + } + } + this._events = []; + } + + _assignToDom(parentElement, element) { + parentElement.innerHTML = ""; + + const elementsToAdd = Array.isArray(element) ? element : [element]; + + for(const HTMLElement of elementsToAdd) { + parentElement.append(HTMLElement); + } + + /** need to add timeout so it can be applied properly */ + const eventTimer = setTimeout(() => { + this._addEvents(parentElement); + clearTimeout(eventTimer); + }, 10); + } } - const sortAscendingIcon = ''; - const sortDescendingIcon = ''; - - const chevronDownIcon = ''; - const chevronUpIcon = ''; - function rehydrateSvg(svgString) { - const parser = new DOMParser(); - // Parse the SVG string - const parsedSvg = parser.parseFromString(svgString, "image/svg+xml"); - - // Extract the parsed SVG element - return parsedSvg.documentElement; + const sortAscendingIcon = ''; + const sortDescendingIcon = ''; + + const chevronDownIcon = ''; + const chevronUpIcon = ''; + function rehydrateSvg(svgString) { + const parser = new DOMParser(); + // Parse the SVG string + const parsedSvg = parser.parseFromString(svgString, "image/svg+xml"); + + // Extract the parsed SVG element + return parsedSvg.documentElement; } - class FlightkitTable extends HTMLElement { - base; - /** to render */ - component = null; - _contents = []; - _orderBy = []; - properties = new Set(); - _columnOrder = []; - _filter = ''; - _selectionProperty = ''; /** must be an unique property on the element to select on. */ - _selectedIds = new Set(); /** used to sync selections */ - uniqueEntriesByProperties = {}; - propertyLabelDictionary = {}; - - static get observedAttributes() { - return ['contents', 'columns', 'order', 'filter', 'selection-property']; - }; - - get columnOrder() { - return this._columnOrder.length ? this._columnOrder : this.properties; - } - - set columnOrder(newValue) { - let processedValue; - - switch (typeof newValue) { - case 'string': { - processedValue = newValue.split(','); - } - default: { - processedValue = newValue; - } - - } - this._columnOrder = processedValue; - } - - get contents() { - return this._contents; - } - - set contents(newValue) { - this.analyzeData(newValue); - this._contents = new JOQ(newValue); - } - - get orderBy() { - return this._orderBy; - } - set orderBy(newValue) { - /** if you add this from JavaScript, use correct syntax */ - if (Array.isArray(newValue)) { - this._orderBy = newValue; - } - else { - /** we have the following signature: "column|direction,column2|direction" */ - const orderToSet = newValue.split(','); - - const newOrder = []; - for (const order of orderToSet) { - const orderParts = order.split("|"); - const propertyName = orderParts[0]; - const direction = orderParts.length > 1 ? orderParts[1] : 'asc'; - - newOrder.push({ - propertyName, - direction - }); - } - this._orderBy = newOrder; - } - } - - get filter() { - return this._filter; - } - - set filter(newValue) { - this._filter = newValue.toString(); - } - - constructor() { - super(); - /** We can not inherit from this using extends, because of vue3 */ - this.base = new BaseComponent(); - this.setContents(this.getAttribute('contents')); - this.setColumnOrder(this.getAttribute('columns')); - this.filter = this.getAttribute('filter') || ''; - - const presetOrder = this.getAttribute('order'); - if (presetOrder) { - this.orderBy = presetOrder; - } - - const selectionProperty = this.getAttribute('selection-property'); - if (selectionProperty) { - this._selectionProperty = selectionProperty; - } - } - /** we only need this if we dont use get/set */ - attributeChangedCallback(name, oldValue, newValue) { - switch (name) { - case "contents": { - this.setContents(newValue); - break; - } - case "order": { - this.orderBy = newValue; - break; - } - case "filter": { - this.filter = newValue || ''; - break; - } - case "selection-property": { - this._selectionProperty = newValue; - break; - } - case "columns": { - this.setColumnOrder(newValue); - break; - } - } - /** in Vue3 this is not triggered. You need to set a :key property and handle that */ - this.createHtml(); - this.base.render(this); - } - - createHtml() { - const tableElement = document.createElement('table'); - - /** because of JOQ */ - if (this.orderBy.length) { - this.contents.sort(this.orderBy); - } - else { - /** reset if no order */ - this.contents.sort([]); - } - - if (this.filter.length) { - const filters = []; - - for (const property of this.columnOrder) { - filters.push({ - propertyName: property, - value: this.filter, - operator: 'like', - type: 'or', /** optional, defaults to "and" **/ - ignoreCase: true /** optional, defaults to "false" **/ - }); - } - this.contents.filter(filters); - } - else { - this.contents.filter([]); - } - - const tableHead = this.createHead(); - tableElement.append(tableHead); - - const data = this.contents.execute(); - const tableBody = this.createBody(data); - tableElement.append(tableBody); - - this.component = tableElement; - } - - connectedCallback() { - this.createHtml(); - this.base.render(this); - }; - disconnectedCallback() { - this.base.removeEvents(this); - } - - _updateCheckboxes(ftElement) { - const allSelectionCheckboxes = ftElement.querySelectorAll('.flk-selection-checkbox'); - const currentSelection = ftElement._selectedIds.size; - const maxSelection = ftElement.contents.execute().length; - const notAllSelected = currentSelection !== maxSelection; - const allSelected = currentSelection === maxSelection; - const hasSelection = currentSelection !== 0; - - for (const selectionCheckbox of allSelectionCheckboxes) { - /** we have the 'select all' in the header */ - if (!selectionCheckbox.dataset.objectId) { - if (hasSelection && notAllSelected) { - selectionCheckbox.indeterminate = true; - } - else if (hasSelection && allSelected) { - selectionCheckbox.indeterminate = false; - selectionCheckbox.setAttribute('checked', true); - } - else { - selectionCheckbox.indeterminate = false; - } - } - else { - const objectId = selectionCheckbox.dataset.objectId; - if (ftElement._selectedIds.has(objectId)) { - selectionCheckbox.checked = true; - } - else { - selectionCheckbox.checked = false; - } - } - } - } - - _emit(event, ftElement, detail) { - let selectEvent = new CustomEvent(event, { - detail, - bubbles: true, - cancelable: true - }); - ftElement.dispatchEvent(selectEvent); - } - - emitSelectAll(event) { - - /** check if the checkbox is checked or not */ - const isChecked = event.target.checked; - const flightkitEvent = returnEventWithTopLevelElement(event); - const ftElement = flightkitEvent.target; - ftElement._selectedIds = isChecked ? new Set( - ftElement.contents.execute() - .map(obj => obj[ftElement._selectionProperty])) : new Set(); - - const selection = isChecked ? ftElement.contents.execute() : []; - ftElement._emit('select', ftElement, { selection }); - ftElement._updateCheckboxes(ftElement); - } - - emitSelect(event) { - /** check if the checkbox is checked or not */ - const isChecked = event.target.checked; - const objectId = event.target.dataset.objectId; - const flightkitEvent = returnEventWithTopLevelElement(event); - const ftElement = flightkitEvent.target; - - if (isChecked) { - ftElement._selectedIds.add(objectId); - } - else { - ftElement._selectedIds.delete(objectId); - } - - const selectionProperty = ftElement._selectionProperty; - - const selection = ftElement.contents.execute().filter(obj => ftElement._selectedIds.has(obj[selectionProperty])); - ftElement._emit('select', ftElement, { selection }); - ftElement._updateCheckboxes(ftElement); - } - - sortData(event) { - const flightkitEvent = returnEventWithTopLevelElement(event); - const ftElement = flightkitEvent.target; - const column = returnDataSetValue(event, 'column'); - if (!column) return; - - const columnPresentIndex = ftElement._orderBy.findIndex(order => order.propertyName === column); - - /** it is present */ - if (columnPresentIndex > -1) { - const presentOrder = ftElement._orderBy[columnPresentIndex]; - - if (presentOrder.direction === 'asc') { - ftElement._orderBy[columnPresentIndex].direction = 'desc'; - } - else { - ftElement._orderBy.splice(columnPresentIndex, 1); - } - } - else { - /** add it */ - ftElement._orderBy.push({ propertyName: column, direction: 'asc' }); - } - ftElement.createHtml(); - ftElement.base.render(ftElement); - } - - setColumnOrder(newOrder) { - if (newOrder) { - this._columnOrder = Array.isArray(newOrder) ? newOrder : newOrder.split(','); - } - else { - this._columnOrder = []; - } - } - - analyzeData(value) { - /** reset */ - this.properties = new Set(); - const contentLength = value.length; - - for (let index = 0; index < contentLength; index++) { - const keys = Object.keys(value[index]); - - for (const key of keys) { - this.properties.add(key); - - if (!this.uniqueEntriesByProperties[key]) { - this.uniqueEntriesByProperties[key] = new Set(); - } - this.uniqueEntriesByProperties[key].add(value[index][key]); - } - } - } - - setContents(newValue) { - /** check if it came from an attibute callback, or directly set as property */ - const valueToSet = newValue || this.contents || []; - try { - - switch (typeof valueToSet) { - case 'string': { - this.contents = JSON.parse(valueToSet) || []; - } - case 'object': { - if (Array.isArray(valueToSet)) { - this.contents = valueToSet; - } - else { - this.contents = [valueToSet]; - } - } - } - } - catch (e) { - console.log(e); - } - } - - /** function to create HTML */ - convertJsonKeyToTitle(jsonKey) { - if (typeof jsonKey !== 'string') jsonKey = jsonKey.toString(); - if (this.propertyLabelDictionary[jsonKey]) return this.propertyLabelDictionary[jsonKey]; - - const result = jsonKey.replace(/([A-Z_])/g, ($1) => { - if ($1 === "_") return " "; - else return ` ${$1.toLowerCase()}`; - }); - const convertedKey = result.charAt(0).toUpperCase() + result.slice(1); - this.propertyLabelDictionary[jsonKey] = convertedKey; - return convertedKey; - } - - createSelectionCheckbox(data) { - const checkboxElement = document.createElement('input'); - checkboxElement.setAttribute('type', 'checkbox'); - checkboxElement.classList.add('flk-selection-checkbox'); - - if (data) { - checkboxElement.dataset.selected = data[this._selectionProperty]; - } - return checkboxElement; - } - - createRow(rowContent) { - const tableRow = document.createElement('tr'); - - if (this._selectionProperty.length) { - const tdSelector = document.createElement('td'); - const tdSelectorId = this.base.generateId(); /** to add the sort event */ - const selectCheckbox = this.createSelectionCheckbox(rowContent); - selectCheckbox.id = tdSelectorId; - selectCheckbox.dataset.objectId = rowContent[this._selectionProperty]; - - const objectId = rowContent[this._selectionProperty]; - if (this._selectedIds.has(objectId)) { - selectCheckbox.checked = true; - } - else { - selectCheckbox.checked = false; - } - - this.base.addEvent(`#${tdSelectorId}`, 'change', this.emitSelect); - tdSelector.append(selectCheckbox); - tableRow.append(tdSelector); - } - - for (const property of this.columnOrder) { - const tableCell = document.createElement('td'); - tableCell.innerText = rowContent[property]; - tableRow.append(tableCell); - } - return tableRow; - }; - - createBody(data) { - const tableBody = document.createElement('tbody'); - for (const rowContent of data) { - const tableRow = this.createRow(rowContent, null); - tableBody.append(tableRow); - } - return tableBody; - }; - - createHead() { - const tableHead = document.createElement('thead'); - const headerRow = document.createElement('tr'); - - headerRow.classList.add('cursor-pointer'); - if (this._selectionProperty.length) { - const thSelectAll = document.createElement('th'); - const thSelectAllId = this.base.generateId(); /** to add the sort event */ - const selectAllCheckbox = this.createSelectionCheckbox(); - selectAllCheckbox.id = thSelectAllId; - - /** handle a rerender of the table on thigs like sort or filter. */ - const maxSelection = this.contents.execute().length; - - if (this._selectedIds.size > 0 && this._selectedIds.size < maxSelection) { - selectAllCheckbox.indeterminate = true; - } - else if (this._selectedIds.size === maxSelection) { - selectAllCheckbox.checked = true; - } - - this.base.addEvent(`#${thSelectAllId}`, 'change', this.emitSelectAll); - thSelectAll.append(selectAllCheckbox); - headerRow.append(thSelectAll); - } - - for (const header of this.columnOrder) { - const thId = this.base.generateId(); /** to add the sort event */ - const thCell = document.createElement('th'); - thCell.id = thId; - thCell.dataset.column = header; - - const headerText = document.createElement('span'); - headerText.innerText = this.convertJsonKeyToTitle(header); - thCell.append(headerText); - this.base.addEvent(`#${thId}`, 'click', this.sortData); - - const orderProperties = this.orderBy.find(obp => obp.propertyName === header); - if (orderProperties) { - const iconElement = document.createElement('span'); - iconElement.innerHTML = orderProperties.direction === 'asc' ? sortAscendingIcon : sortDescendingIcon; - thCell.append(iconElement); - } - headerRow.append(thCell); - } - tableHead.append(headerRow); - return tableHead; - }; - - /** Needed for vanilla webcomponent and compatibility with Vue3 - * If I try to render this on setContents, Vue3 gives illegal operation. - */ - init() { - this.createHtml(); - this.base.render(this); - } + class FlightkitTable extends HTMLElement { + base; + /** to render */ + component = null; + _contents = []; + _orderBy = []; + properties = new Set(); + _columnOrder = []; + _filter = ''; + _selectionProperty = ''; /** must be an unique property on the element to select on. */ + _selectedIds = new Set(); /** used to sync selections */ + uniqueEntriesByProperties = {}; + propertyLabelDictionary = {}; + + static get observedAttributes() { + return ['contents', 'columns', 'order', 'filter', 'selection-property']; + }; + + get columnOrder() { + return this._columnOrder.length ? this._columnOrder : this.properties; + } + + set columnOrder(newValue) { + let processedValue; + + switch (typeof newValue) { + case 'string': { + processedValue = newValue.split(','); + } + default: { + processedValue = newValue; + } + + } + this._columnOrder = processedValue; + } + + get contents() { + return this._contents; + } + + set contents(newValue) { + this.analyzeData(newValue); + this._contents = new JOQ(newValue); + } + + get orderBy() { + return this._orderBy; + } + set orderBy(newValue) { + /** if you add this from JavaScript, use correct syntax */ + if (Array.isArray(newValue)) { + this._orderBy = newValue; + } + else { + /** we have the following signature: "column|direction,column2|direction" */ + const orderToSet = newValue.split(','); + + const newOrder = []; + for (const order of orderToSet) { + const orderParts = order.split("|"); + const propertyName = orderParts[0]; + const direction = orderParts.length > 1 ? orderParts[1] : 'asc'; + + newOrder.push({ + propertyName, + direction + }); + } + this._orderBy = newOrder; + } + } + + get filter() { + return this._filter; + } + + set filter(newValue) { + this._filter = newValue.toString(); + } + + constructor() { + super(); + /** We can not inherit from this using extends, because of vue3 */ + this.base = new BaseComponent(); + this.setContents(this.getAttribute('contents')); + this.setColumnOrder(this.getAttribute('columns')); + this.filter = this.getAttribute('filter') || ''; + + const presetOrder = this.getAttribute('order'); + if (presetOrder) { + this.orderBy = presetOrder; + } + + const selectionProperty = this.getAttribute('selection-property'); + if (selectionProperty) { + this._selectionProperty = selectionProperty; + } + } + /** we only need this if we dont use get/set */ + attributeChangedCallback(name, oldValue, newValue) { + switch (name) { + case "contents": { + this.setContents(newValue); + break; + } + case "order": { + this.orderBy = newValue; + break; + } + case "filter": { + this.filter = newValue || ''; + break; + } + case "selection-property": { + this._selectionProperty = newValue; + break; + } + case "columns": { + this.setColumnOrder(newValue); + break; + } + } + /** in Vue3 this is not triggered. You need to set a :key property and handle that */ + this.createHtml(); + this.base.render(this); + } + + createHtml() { + const tableElement = document.createElement('table'); + + /** because of JOQ */ + if (this.orderBy.length) { + this.contents.sort(this.orderBy); + } + else { + /** reset if no order */ + this.contents.sort([]); + } + + if (this.filter.length) { + const filters = []; + + for (const property of this.columnOrder) { + filters.push({ + propertyName: property, + value: this.filter, + operator: 'like', + type: 'or', /** optional, defaults to "and" **/ + ignoreCase: true /** optional, defaults to "false" **/ + }); + } + this.contents.filter(filters); + } + else { + this.contents.filter([]); + } + + const tableHead = this.createHead(); + tableElement.append(tableHead); + + const data = this.contents.execute(); + const tableBody = this.createBody(data); + tableElement.append(tableBody); + + this.component = tableElement; + } + + connectedCallback() { + this.createHtml(); + this.base.render(this); + }; + disconnectedCallback() { + this.base.removeEvents(this); + } + + _updateCheckboxes(ftElement) { + const allSelectionCheckboxes = ftElement.querySelectorAll('.flk-selection-checkbox'); + const currentSelection = ftElement._selectedIds.size; + const maxSelection = ftElement.contents.execute().length; + const notAllSelected = currentSelection !== maxSelection; + const allSelected = currentSelection === maxSelection; + const hasSelection = currentSelection !== 0; + + for (const selectionCheckbox of allSelectionCheckboxes) { + /** we have the 'select all' in the header */ + if (!selectionCheckbox.dataset.objectId) { + if (hasSelection && notAllSelected) { + selectionCheckbox.indeterminate = true; + } + else if (hasSelection && allSelected) { + selectionCheckbox.indeterminate = false; + selectionCheckbox.setAttribute('checked', true); + } + else { + selectionCheckbox.indeterminate = false; + } + } + else { + const objectId = selectionCheckbox.dataset.objectId; + if (ftElement._selectedIds.has(objectId)) { + selectionCheckbox.checked = true; + } + else { + selectionCheckbox.checked = false; + } + } + } + } + + _emit(event, ftElement, detail) { + let selectEvent = new CustomEvent(event, { + detail, + bubbles: true, + cancelable: true + }); + ftElement.dispatchEvent(selectEvent); + } + + emitSelectAll(event) { + + /** check if the checkbox is checked or not */ + const isChecked = event.target.checked; + const flightkitEvent = returnEventWithTopLevelElement(event); + const ftElement = flightkitEvent.target; + ftElement._selectedIds = isChecked ? new Set( + ftElement.contents.execute() + .map(obj => obj[ftElement._selectionProperty])) : new Set(); + + const selection = isChecked ? ftElement.contents.execute() : []; + ftElement._emit('select', ftElement, { selection }); + ftElement._updateCheckboxes(ftElement); + } + + emitSelect(event) { + /** check if the checkbox is checked or not */ + const isChecked = event.target.checked; + const objectId = event.target.dataset.objectId; + const flightkitEvent = returnEventWithTopLevelElement(event); + const ftElement = flightkitEvent.target; + + if (isChecked) { + ftElement._selectedIds.add(objectId); + } + else { + ftElement._selectedIds.delete(objectId); + } + + const selectionProperty = ftElement._selectionProperty; + + const selection = ftElement.contents.execute().filter(obj => ftElement._selectedIds.has(obj[selectionProperty])); + ftElement._emit('select', ftElement, { selection }); + ftElement._updateCheckboxes(ftElement); + } + + sortData(event) { + const flightkitEvent = returnEventWithTopLevelElement(event); + const ftElement = flightkitEvent.target; + const column = returnDataSetValue(event, 'column'); + if (!column) return; + + const columnPresentIndex = ftElement._orderBy.findIndex(order => order.propertyName === column); + + /** it is present */ + if (columnPresentIndex > -1) { + const presentOrder = ftElement._orderBy[columnPresentIndex]; + + if (presentOrder.direction === 'asc') { + ftElement._orderBy[columnPresentIndex].direction = 'desc'; + } + else { + ftElement._orderBy.splice(columnPresentIndex, 1); + } + } + else { + /** add it */ + ftElement._orderBy.push({ propertyName: column, direction: 'asc' }); + } + ftElement.createHtml(); + ftElement.base.render(ftElement); + } + + setColumnOrder(newOrder) { + if (newOrder) { + this._columnOrder = Array.isArray(newOrder) ? newOrder : newOrder.split(','); + } + else { + this._columnOrder = []; + } + } + + analyzeData(value) { + /** reset */ + this.properties = new Set(); + const contentLength = value.length; + + for (let index = 0; index < contentLength; index++) { + const keys = Object.keys(value[index]); + + for (const key of keys) { + this.properties.add(key); + + if (!this.uniqueEntriesByProperties[key]) { + this.uniqueEntriesByProperties[key] = new Set(); + } + this.uniqueEntriesByProperties[key].add(value[index][key]); + } + } + } + + setContents(newValue) { + /** check if it came from an attibute callback, or directly set as property */ + const valueToSet = newValue || this.contents || []; + try { + + switch (typeof valueToSet) { + case 'string': { + this.contents = JSON.parse(valueToSet) || []; + } + case 'object': { + if (Array.isArray(valueToSet)) { + this.contents = valueToSet; + } + else { + this.contents = [valueToSet]; + } + } + } + } + catch (e) { + console.log(e); + } + } + + /** function to create HTML */ + convertJsonKeyToTitle(jsonKey) { + if (typeof jsonKey !== 'string') jsonKey = jsonKey.toString(); + if (this.propertyLabelDictionary[jsonKey]) return this.propertyLabelDictionary[jsonKey]; + + const result = jsonKey.replace(/([A-Z_])/g, ($1) => { + if ($1 === "_") return " "; + else return ` ${$1.toLowerCase()}`; + }); + const convertedKey = result.charAt(0).toUpperCase() + result.slice(1); + this.propertyLabelDictionary[jsonKey] = convertedKey; + return convertedKey; + } + + createSelectionCheckbox(data) { + const checkboxElement = document.createElement('input'); + checkboxElement.setAttribute('type', 'checkbox'); + checkboxElement.classList.add('flk-selection-checkbox'); + + if (data) { + checkboxElement.dataset.selected = data[this._selectionProperty]; + } + return checkboxElement; + } + + createRow(rowContent) { + const tableRow = document.createElement('tr'); + + if (this._selectionProperty.length) { + const tdSelector = document.createElement('td'); + const tdSelectorId = this.base.generateId(); /** to add the sort event */ + const selectCheckbox = this.createSelectionCheckbox(rowContent); + selectCheckbox.id = tdSelectorId; + selectCheckbox.dataset.objectId = rowContent[this._selectionProperty]; + + const objectId = rowContent[this._selectionProperty]; + if (this._selectedIds.has(objectId)) { + selectCheckbox.checked = true; + } + else { + selectCheckbox.checked = false; + } + + this.base.addEvent(`#${tdSelectorId}`, 'change', this.emitSelect); + tdSelector.append(selectCheckbox); + tableRow.append(tdSelector); + } + + for (const property of this.columnOrder) { + const tableCell = document.createElement('td'); + tableCell.innerText = rowContent[property]; + tableRow.append(tableCell); + } + return tableRow; + }; + + createBody(data) { + const tableBody = document.createElement('tbody'); + for (const rowContent of data) { + const tableRow = this.createRow(rowContent, null); + tableBody.append(tableRow); + } + return tableBody; + }; + + createHead() { + const tableHead = document.createElement('thead'); + const headerRow = document.createElement('tr'); + + headerRow.classList.add('cursor-pointer'); + if (this._selectionProperty.length) { + const thSelectAll = document.createElement('th'); + const thSelectAllId = this.base.generateId(); /** to add the sort event */ + const selectAllCheckbox = this.createSelectionCheckbox(); + selectAllCheckbox.id = thSelectAllId; + + /** handle a rerender of the table on thigs like sort or filter. */ + const maxSelection = this.contents.execute().length; + + if (this._selectedIds.size > 0 && this._selectedIds.size < maxSelection) { + selectAllCheckbox.indeterminate = true; + } + else if (this._selectedIds.size === maxSelection) { + selectAllCheckbox.checked = true; + } + + this.base.addEvent(`#${thSelectAllId}`, 'change', this.emitSelectAll); + thSelectAll.append(selectAllCheckbox); + headerRow.append(thSelectAll); + } + + for (const header of this.columnOrder) { + const thId = this.base.generateId(); /** to add the sort event */ + const thCell = document.createElement('th'); + thCell.id = thId; + thCell.dataset.column = header; + + const headerText = document.createElement('span'); + headerText.innerText = this.convertJsonKeyToTitle(header); + thCell.append(headerText); + this.base.addEvent(`#${thId}`, 'click', this.sortData); + + const orderProperties = this.orderBy.find(obp => obp.propertyName === header); + if (orderProperties) { + const iconElement = document.createElement('span'); + iconElement.innerHTML = orderProperties.direction === 'asc' ? sortAscendingIcon : sortDescendingIcon; + thCell.append(iconElement); + } + headerRow.append(thCell); + } + tableHead.append(headerRow); + return tableHead; + }; + + /** Needed for vanilla webcomponent and compatibility with Vue3 + * If I try to render this on setContents, Vue3 gives illegal operation. + */ + init() { + this.createHtml(); + this.base.render(this); + } } - class FlightkitDraggable extends HTMLElement { - base; - componentId; - - constructor() { - super(); - this.base = new BaseComponent(); - } - - /** grab inner HTML from here */ - connectedCallback() { - let top = this.getAttribute('top'); - let left = this.getAttribute('left'); - let center = this.getAttribute('center'); - let zIndex = this.getAttribute('zIndex'); - - if (!this.id) { - this.id = this.base.generateId(); - } - - this.style.display = "block"; - this.style.position = "fixed"; - /** if center is available, it is an empty string */ - if (typeof center === 'string') { - this.style.top = top || "50%"; - this.style.left = "50%"; - this.style.transform = "translate(-50%, -50%)"; - } - else { - this.style.top = top || this.clientTop + "px"; - this.style.left = left || this.clientLeft + "px"; - } - - if (zIndex) { - this.style.zIndex = zIndex; - } - - /** id for the handle */ - this.componentId = this.getAttribute('handle'); - - const draggableElement = document.createElement('div'); - draggableElement.innerHTML = this.innerHTML; - this.component = draggableElement; - - /** events are added to base so they are disposed properly */ - const draggableId = `#${this.componentId || this.id}`; - this.base.addEvent(draggableId, 'mousedown', this._dragElement); - this.base.render(this); - }; - disconnectedCallback() { - this.base.removeEvents(this); - } - _dragElement(event) { - const topLevelEvent = returnEventWithTopLevelElement(event, 'flk-draggable'); - const element = topLevelEvent.target; - - let offsetX, offsetY; - - /** Function to handle the start of dragging */ - function handleDragStart(event) { - /** Calculate the offset from mouse to the top-left corner of the element */ - offsetX = event.clientX - element.offsetLeft; - offsetY = event.clientY - element.offsetTop; - } - - /** calculates the position **/ - function setPosition(event) { - const x = event.clientX - offsetX; - const y = event.clientY - offsetY; - - /** Set the position of the element */ - element.style.left = `${x}px`; - element.style.top = `${y}px`; - } - - function preventDefault(event) { - event.preventDefault(); - } - - function enableDrag() { - element.setAttribute('draggable', true); - element.addEventListener('dragstart', handleDragStart); - element.addEventListener('dragend', removeDrag); - - /** Prevent default behavior for certain events to enable dragging */ - document.addEventListener('dragover', preventDefault); - /** so that the cursor does not say can't drop */ - document.addEventListener('drop', setPosition); - } - function removeDrag() { - element.removeAttribute('draggable'); - - /** remove all the events */ - element.removeEventListener('dragstart', handleDragStart); - element.removeEventListener('dragend', removeDrag); - document.removeEventListener('dragover', preventDefault); - document.removeEventListener('drop', setPosition); - } - - /** initialize */ - enableDrag(); - } + class FlightkitDraggable extends HTMLElement { + base; + componentId; + + constructor() { + super(); + this.base = new BaseComponent(); + } + + /** grab inner HTML from here */ + connectedCallback() { + let top = this.getAttribute('top'); + let left = this.getAttribute('left'); + let center = this.getAttribute('center'); + let zIndex = this.getAttribute('zIndex'); + + if (!this.id) { + this.id = this.base.generateId(); + } + + this.style.display = "block"; + this.style.position = "fixed"; + /** if center is available, it is an empty string */ + if (typeof center === 'string') { + this.style.top = top || "50%"; + this.style.left = "50%"; + this.style.transform = "translate(-50%, -50%)"; + } + else { + this.style.top = top || this.clientTop + "px"; + this.style.left = left || this.clientLeft + "px"; + } + + if (zIndex) { + this.style.zIndex = zIndex; + } + + /** id for the handle */ + this.componentId = this.getAttribute('handle'); + + const draggableElement = document.createElement('div'); + draggableElement.innerHTML = this.innerHTML; + this.component = draggableElement; + + /** events are added to base so they are disposed properly */ + const draggableId = `#${this.componentId || this.id}`; + this.base.addEvent(draggableId, 'mousedown', this._dragElement); + this.base.render(this); + }; + disconnectedCallback() { + this.base.removeEvents(this); + } + _dragElement(event) { + const topLevelEvent = returnEventWithTopLevelElement(event, 'flk-draggable'); + const element = topLevelEvent.target; + + let offsetX, offsetY; + + /** Function to handle the start of dragging */ + function handleDragStart(event) { + /** Calculate the offset from mouse to the top-left corner of the element */ + offsetX = event.clientX - element.offsetLeft; + offsetY = event.clientY - element.offsetTop; + } + + /** calculates the position **/ + function setPosition(event) { + const x = event.clientX - offsetX; + const y = event.clientY - offsetY; + + /** Set the position of the element */ + element.style.left = `${x}px`; + element.style.top = `${y}px`; + } + + function preventDefault(event) { + event.preventDefault(); + } + + function enableDrag() { + element.setAttribute('draggable', true); + element.addEventListener('dragstart', handleDragStart); + element.addEventListener('dragend', removeDrag); + + /** Prevent default behavior for certain events to enable dragging */ + document.addEventListener('dragover', preventDefault); + /** so that the cursor does not say can't drop */ + document.addEventListener('drop', setPosition); + } + function removeDrag() { + element.removeAttribute('draggable'); + + /** remove all the events */ + element.removeEventListener('dragstart', handleDragStart); + element.removeEventListener('dragend', removeDrag); + document.removeEventListener('dragover', preventDefault); + document.removeEventListener('drop', setPosition); + } + + /** initialize */ + enableDrag(); + } } - class FlightkitModal extends HTMLElement { - _id; - base; - _draggableId; - constructor() { - super(); - this.base = new BaseComponent(); - } - - _emit(event, ftElement, detail) { - let selectEvent = new CustomEvent(event, { - detail, - bubbles: true, - cancelable: true - }); - ftElement.dispatchEvent(selectEvent); - } - - closeModal(event) { - /** have to do it twice, because of the use of flk-draggable. */ - const topLevelEvent = returnEventWithTopLevelElement(event, 'flk-modal'); - const modalElement = topLevelEvent.target; - - modalElement.classList.add('hidden'); - modalElement._emit('hide', modalElement, { hidden: true, id: modalElement.id }); - } - - openModal(reset = true) { - const draggable = document.getElementById(this._draggableId); - if (reset) { - draggable.style.top = "40%"; - draggable.style.left = "50%"; - } - this.classList.remove('hidden'); - } - - connectedCallback() { - - if (!this.id) { - this.id = this.base.generateId(); - } - const modalContainer = document.createElement('div'); - - /** used as handle */ - let windowHeaderId = this.base.generateId(); - - const flkDraggable = document.createElement('flk-draggable'); - this._draggableId = this.base.generateId(); - flkDraggable.id = this._draggableId; - flkDraggable.setAttribute('center', ''); - flkDraggable.setAttribute('top', '40%'); - flkDraggable.setAttribute('handle', windowHeaderId); - flkDraggable.setAttribute('zIndex', '1080'); - flkDraggable.classList.add('border', 'shadow-lg', 'bg-white'); - - const windowHeader = document.createElement('div'); - - const windowHeaderText = this.getAttribute('title'); - - if (windowHeaderText) { - const headerTextElement = document.createElement('span'); - headerTextElement.innerText = windowHeaderText; - headerTextElement.classList.add('ml-1', 'mr-auto'); - windowHeader.append(headerTextElement); - } - - windowHeader.id = windowHeaderId; - - const headerClass = this.getAttribute('header-class'); - let headerClassesToAdd = []; - if (headerClass) { - headerClassesToAdd = headerClassesToAdd.concat(headerClass.split(' ')); - } - else { - headerClassesToAdd.push('bg-gray-light'); - } - - windowHeader.classList.add(...headerClassesToAdd, 'border-bottom', 'row', 'justify-end'); - - const closeModalId = this.base.generateId(); - const closeModalButton = document.createElement('button'); - closeModalButton.classList.add('py-0', 'px-1', 'outline-hover', 'no-border', ...headerClassesToAdd); - closeModalButton.innerText = 'X'; - closeModalButton.id = closeModalId; - - windowHeader.append(closeModalButton); - flkDraggable.append(windowHeader); - - const userContentElement = document.createElement('div'); - userContentElement.innerHTML = this.innerHTML; - flkDraggable.append(userContentElement); - - modalContainer.append(flkDraggable); - this.component = modalContainer; - - this.base.addEvent(`#${closeModalId}`, 'click', this.closeModal); - this.base.render(this); - /** start hidden ofcourse. */ - this.classList.add('hidden'); - }; - - disconnectedCallback() { - this.base.removeEvents(this); - } + class FlightkitModal extends HTMLElement { + _id; + base; + _draggableId; + constructor() { + super(); + this.base = new BaseComponent(); + } + + _emit(event, ftElement, detail) { + let selectEvent = new CustomEvent(event, { + detail, + bubbles: true, + cancelable: true + }); + ftElement.dispatchEvent(selectEvent); + } + + closeModal(event) { + /** have to do it twice, because of the use of flk-draggable. */ + const topLevelEvent = returnEventWithTopLevelElement(event, 'flk-modal'); + const modalElement = topLevelEvent.target; + + modalElement.classList.add('hidden'); + modalElement._emit('hide', modalElement, { hidden: true, id: modalElement.id }); + } + + openModal(reset = true) { + const draggable = document.getElementById(this._draggableId); + if (reset) { + draggable.style.top = "40%"; + draggable.style.left = "50%"; + } + this.classList.remove('hidden'); + } + + connectedCallback() { + + if (!this.id) { + this.id = this.base.generateId(); + } + const modalContainer = document.createElement('div'); + + /** used as handle */ + let windowHeaderId = this.base.generateId(); + + const flkDraggable = document.createElement('flk-draggable'); + this._draggableId = this.base.generateId(); + flkDraggable.id = this._draggableId; + flkDraggable.setAttribute('center', ''); + flkDraggable.setAttribute('top', '40%'); + flkDraggable.setAttribute('handle', windowHeaderId); + flkDraggable.setAttribute('zIndex', '1080'); + flkDraggable.classList.add('border', 'shadow-lg', 'bg-white'); + flkDraggable.style.width = 'max-content'; /** fixes collapsing at the border. */ + + const windowHeader = document.createElement('div'); + + const windowHeaderText = this.getAttribute('title'); + + if (windowHeaderText) { + const headerTextElement = document.createElement('span'); + headerTextElement.innerText = windowHeaderText; + headerTextElement.classList.add('ml-1', 'mr-auto'); + windowHeader.append(headerTextElement); + } + + windowHeader.id = windowHeaderId; + + const headerClass = this.getAttribute('header-class'); + let headerClassesToAdd = []; + if (headerClass) { + headerClassesToAdd = headerClassesToAdd.concat(headerClass.split(' ')); + } + else { + headerClassesToAdd.push('bg-gray-light'); + } + + windowHeader.classList.add(...headerClassesToAdd, 'border-bottom', 'row', 'justify-end'); + + const closeModalId = this.base.generateId(); + const closeModalButton = document.createElement('button'); + closeModalButton.classList.add('py-0', 'px-1', 'outline-hover', 'no-border', ...headerClassesToAdd); + closeModalButton.innerText = 'X'; + closeModalButton.id = closeModalId; + + windowHeader.append(closeModalButton); + flkDraggable.append(windowHeader); + + const userContentElement = document.createElement('div'); + userContentElement.innerHTML = this.innerHTML; + flkDraggable.append(userContentElement); + + modalContainer.append(flkDraggable); + this.component = modalContainer; + + this.base.addEvent(`#${closeModalId}`, 'click', this.closeModal); + this.base.render(this); + /** start hidden ofcourse. */ + this.classList.add('hidden'); + }; + + disconnectedCallback() { + this.base.removeEvents(this); + } } - /** example component */ - - class FlightkitDropdown extends HTMLElement { - base; - _buttonId; - _drawerId; - _iconId; - - constructor() { - super(); - this.base = new BaseComponent(); - } - - /** grab inner HTML from here */ - connectedCallback() { - this.style.position = 'relative'; - this.style.display = 'flex'; /** fixes drawer positioning */ - this.style.width = 'fit-content'; /** fixes flex taking up 100% */ - this._buttonId = this.base.generateId(); - - const btnElement = document.createElement('button'); - btnElement.classList.add('row'); - btnElement.id = this._buttonId; - - const btnTextElement = document.createElement('span'); - btnTextElement.innerText = this.getAttribute('text'); - - this._iconId = this.base.generateId(); - - const iconElement = document.createElement('span'); - const closedIcon = rehydrateSvg(chevronDownIcon); - - const openIcon = rehydrateSvg(chevronUpIcon); - openIcon.classList.add('hidden'); - - iconElement.append(closedIcon, openIcon); - iconElement.id = this._iconId; - - btnElement.append(btnTextElement, iconElement); - - this._drawerId = this.base.generateId(); - const drawerElement = document.createElement('div'); - drawerElement.id = this._drawerId; - drawerElement.classList.add('shadow', 'inline-block', 'bg-white'); - drawerElement.style.position = 'absolute'; - drawerElement.style.zIndex = '1040'; - - /** a template tag will not be rendered. It will be nicer this way. */ - const templateElement = this.querySelector('template'); - - /**innerHTML works in vanilla, but firstChild due to Vue3.*/ - if (templateElement.innerHTML.length) { - drawerElement.innerHTML = templateElement.innerHTML; - } - else { - drawerElement.append(templateElement.firstChild); - } - - drawerElement.style.display = 'none'; - - /** set it to be rendered */ - this.component = [btnElement, drawerElement]; - - this.base.addEvent(`#${this._buttonId}`, 'click', this.toggleMenu); - - const bodyEl = document.querySelector('body'); - - if (bodyEl.getAttribute('flk-close-dropdown') !== '') { - bodyEl.setAttribute('flk-close-dropdown', ''); - bodyEl.addEventListener('click', this.closeAllDropdownButtons); - } - - this.base.render(this); - }; - disconnectedCallback() { - this.base.removeEvents(this); - const allDropdownButtons = document.querySelectorAll('flk-dropdown'); - - if (!allDropdownButtons || !allDropdownButtons.length) { - const bodyEl = document.querySelector('body'); - bodyEl.removeAttribute('flk-close-dropdown'); - bodyEl.removeEventListener('click', this.closeAllDropdownButtons); - } - } - - toggleMenu(event) { - const topLevelElement = returnEventWithTopLevelElement(event); - const ftElement = topLevelElement.target; - const drawerToToggleId = ftElement._drawerId; - const drawerToToggle = document.getElementById(drawerToToggleId); - - const drawerOpen = drawerToToggle.style.display !== 'none'; - drawerToToggle.style.display = drawerOpen ? 'none' : 'block'; - - const specifiedWidth = ftElement.getAttribute('drawer-width'); - const alignRight = typeof ftElement.getAttribute('right') === 'string'; - - if (alignRight) { - drawerToToggle.style.right = "0px"; - } - - drawerToToggle.style.top = ftElement.offsetHeight + "px"; - drawerToToggle.style.width = specifiedWidth || ftElement.offsetWidth + "px"; - - const iconToToggleId = ftElement._iconId; - const iconToToggle = document.getElementById(iconToToggleId); - - /** because I checked if the previous state was open then we close. - * So therefor we need to do the opposite, if it _was_ open, now its closed. - */ - - if (drawerOpen) { - iconToToggle.childNodes[0].classList.remove('hidden'); - iconToToggle.childNodes[1].classList.add('hidden'); - } - else { - iconToToggle.childNodes[0].classList.add('hidden'); - iconToToggle.childNodes[1].classList.remove('hidden'); - } } - - _closeDropdown() { - const drawerToToggleId = this._drawerId; - const drawerToToggle = document.getElementById(drawerToToggleId); - const drawerOpen = drawerToToggle.style.display !== 'none'; - - if (drawerOpen) { - const iconToToggleId = this._iconId; - const iconToToggle = document.getElementById(iconToToggleId); - - drawerToToggle.style.display = 'none'; - iconToToggle.childNodes[0].classList.remove('hidden'); - iconToToggle.childNodes[1].classList.add('hidden'); - } - } - - closeAllDropdownButtons(event) { - const topLevelElement = returnEventWithTopLevelElement(event, 'flk-dropdown'); - const ftElement = topLevelElement.target; - - const allDropdownButtons = document.querySelectorAll('flk-dropdown'); - - if (ftElement) { - for (const dropdownButton of allDropdownButtons) { - /**if you click on a dropdown. close the others */ - if (ftElement._buttonId !== dropdownButton._buttonId) { - const drawerToToggleId = dropdownButton._drawerId; - const drawerToToggle = document.getElementById(drawerToToggleId); - const drawerOpen = drawerToToggle.style.display !== 'none'; - - if (drawerOpen) { - dropdownButton._closeDropdown(); - } - } - } - } else { - /** close all dropdowns */ - for (const dropdownButton of allDropdownButtons) { - dropdownButton._closeDropdown(); - } - } - } + /** example component */ + + class FlightkitDropdown extends HTMLElement { + base; + _buttonId; + _drawerId; + _iconId; + + constructor() { + super(); + this.base = new BaseComponent(); + } + + /** grab inner HTML from here */ + connectedCallback() { + this.style.position = 'relative'; + this.style.display = 'flex'; /** fixes drawer positioning */ + this.style.width = 'fit-content'; /** fixes flex taking up 100% */ + this._buttonId = this.base.generateId(); + + const btnElement = document.createElement('button'); + btnElement.classList.add('row'); + btnElement.id = this._buttonId; + + const btnTextElement = document.createElement('span'); + btnTextElement.innerText = this.getAttribute('text'); + + this._iconId = this.base.generateId(); + + const iconElement = document.createElement('span'); + const closedIcon = rehydrateSvg(chevronDownIcon); + + const openIcon = rehydrateSvg(chevronUpIcon); + openIcon.classList.add('hidden'); + + iconElement.append(closedIcon, openIcon); + iconElement.id = this._iconId; + + btnElement.append(btnTextElement, iconElement); + + this._drawerId = this.base.generateId(); + const drawerElement = document.createElement('div'); + drawerElement.id = this._drawerId; + drawerElement.classList.add('shadow', 'inline-block', 'bg-white'); + drawerElement.style.position = 'absolute'; + drawerElement.style.zIndex = '1040'; + + /** a template tag will not be rendered. It will be nicer this way. */ + const templateElement = this.querySelector('template'); + + /**innerHTML works in vanilla, but firstChild due to Vue3.*/ + if (templateElement.innerHTML.length) { + drawerElement.innerHTML = templateElement.innerHTML; + } + else { + drawerElement.append(templateElement.firstChild); + } + + drawerElement.style.display = 'none'; + + /** set it to be rendered */ + this.component = [btnElement, drawerElement]; + + this.base.addEvent(`#${this._buttonId}`, 'click', this.toggleMenu); + + const bodyEl = document.querySelector('body'); + + if (bodyEl.getAttribute('flk-close-dropdown') !== '') { + bodyEl.setAttribute('flk-close-dropdown', ''); + bodyEl.addEventListener('click', this.closeAllDropdownButtons); + } + + this.base.render(this); + }; + disconnectedCallback() { + this.base.removeEvents(this); + const allDropdownButtons = document.querySelectorAll('flk-dropdown'); + + if (!allDropdownButtons || !allDropdownButtons.length) { + const bodyEl = document.querySelector('body'); + bodyEl.removeAttribute('flk-close-dropdown'); + bodyEl.removeEventListener('click', this.closeAllDropdownButtons); + } + } + + toggleMenu(event) { + const topLevelElement = returnEventWithTopLevelElement(event); + const ftElement = topLevelElement.target; + const drawerToToggleId = ftElement._drawerId; + const drawerToToggle = document.getElementById(drawerToToggleId); + + const drawerOpen = drawerToToggle.style.display !== 'none'; + drawerToToggle.style.display = drawerOpen ? 'none' : 'block'; + + const specifiedWidth = ftElement.getAttribute('drawer-width'); + const alignRight = typeof ftElement.getAttribute('right') === 'string'; + + if (alignRight) { + drawerToToggle.style.right = "0px"; + } + + drawerToToggle.style.top = ftElement.offsetHeight + "px"; + drawerToToggle.style.width = specifiedWidth || ftElement.offsetWidth + "px"; + + const iconToToggleId = ftElement._iconId; + const iconToToggle = document.getElementById(iconToToggleId); + + /** because I checked if the previous state was open then we close. + * So therefor we need to do the opposite, if it _was_ open, now its closed. + */ + + if (drawerOpen) { + iconToToggle.childNodes[0].classList.remove('hidden'); + iconToToggle.childNodes[1].classList.add('hidden'); + } + else { + iconToToggle.childNodes[0].classList.add('hidden'); + iconToToggle.childNodes[1].classList.remove('hidden'); + } } + + _closeDropdown() { + const drawerToToggleId = this._drawerId; + const drawerToToggle = document.getElementById(drawerToToggleId); + const drawerOpen = drawerToToggle.style.display !== 'none'; + + if (drawerOpen) { + const iconToToggleId = this._iconId; + const iconToToggle = document.getElementById(iconToToggleId); + + drawerToToggle.style.display = 'none'; + iconToToggle.childNodes[0].classList.remove('hidden'); + iconToToggle.childNodes[1].classList.add('hidden'); + } + } + + closeAllDropdownButtons(event) { + const topLevelElement = returnEventWithTopLevelElement(event, 'flk-dropdown'); + const ftElement = topLevelElement.target; + + const allDropdownButtons = document.querySelectorAll('flk-dropdown'); + + if (ftElement) { + for (const dropdownButton of allDropdownButtons) { + /**if you click on a dropdown. close the others */ + if (ftElement._buttonId !== dropdownButton._buttonId) { + const drawerToToggleId = dropdownButton._drawerId; + const drawerToToggle = document.getElementById(drawerToToggleId); + const drawerOpen = drawerToToggle.style.display !== 'none'; + + if (drawerOpen) { + dropdownButton._closeDropdown(); + } + } + } + } else { + /** close all dropdowns */ + for (const dropdownButton of allDropdownButtons) { + dropdownButton._closeDropdown(); + } + } + } } - customElements.define('flk-table', FlightkitTable); - customElements.define('flk-draggable', FlightkitDraggable); - customElements.define('flk-modal', FlightkitModal); + customElements.define('flk-table', FlightkitTable); + customElements.define('flk-draggable', FlightkitDraggable); + customElements.define('flk-modal', FlightkitModal); customElements.define('flk-dropdown', FlightkitDropdown); })(); diff --git a/dist/flightkit-v0.0.1/flightkit.min.js b/dist/flightkit-v0.0.1/flightkit.min.js index f8462f7..cb5917a 100644 --- a/dist/flightkit-v0.0.1/flightkit.min.js +++ b/dist/flightkit-v0.0.1/flightkit.min.js @@ -1 +1 @@ -!function(){"use strict";var a,l,g,e;(e=a=a||{}).Date="date",e.String="string",e.Float="float",e.Number="number",e.Array="array",e.Object="object",e.Bool="bool",e.Currency="currency",e.Undefined="undefined",e.Null="null";const c={date:/^(\d{1,4}-\d{1,4}-\d{1,4}(T)?)/gim,currency:/^[$|€]\s?[0-9]*(\.|,)?\d*(\.|,)?\d*/gim,float:/\d+[,|.]\d+[,|.]?\d*/gim,currencySign:/\$|€/gim,array:/^\s?[[].[^,]+[\]],?/gi,precision:/[-+$€,.]/gm,string:/[a-zA-Z]/gim},d=e=>{return null===e||"null"===e?a.Null:e||0===e||!1===e?null===new RegExp(c.date).exec(e)||isNaN(Date.parse(e))?new RegExp(c.currency).exec(e)?a.Currency:!new RegExp(c.string).exec(e)&&new RegExp(c.float).exec(e.toString())?a.Float:isNaN(e)&&0!==e?Array.isArray(e)?a.Array:"object"==typeof e?a.Object:a.String:a.Number:a.Date:a.Undefined},u=(t,e)=>{const r={value:void 0,type:e=e||d(t),currencySign:""};switch(r.type){case a.String:r.value=t.toString();break;case a.Float:case a.Currency:var s=(t=t.toString()).match(new RegExp(/(,)/gim)),n=t.match(new RegExp(/(\.)/gim));if(s)for(let e=1;e<=s.length;e++)t=e!==s.length||n?t.replace(",",""):t.replace(",",".");if(r.type===a.Currency){const i=new RegExp(c.currencySign);var o=i.exec(t);r.currencySign=null!==o?o[0]:"",t=t.replace(i,"")}r.value=parseFloat(t).toPrecision(12);break;case a.Number:r.value=Number(t);break;case a.Date:r.value=Date.parse(t);break;case a.Array:t.length?"object"==typeof t[0]?r.value=t.map(e=>JSON.stringify(e)).join(", "):r.value=t.join(", "):r.value="";break;case a.Object:r.value=t;break;case a.Undefined:r.value="";break;case a.Null:r.value=null}return r};function v(e,t){var r;let s;for(r of e.split("."))r=r.trim(),s?"object"!=typeof s||Array.isArray(s)||(s=s[r]):s=t[r];return s}const p=(e,t)=>tet<=e,b=(e,t)=>e<=t,w=(e,t,r)=>r?e.toLowerCase()==t.toLowerCase():e==t,k=(e,t)=>e===t,_=(e,t)=>e!=t,E=(e,t)=>e!==t,A=(e,t)=>null!=t&&"string"==typeof e&&0<=e.toLowerCase().indexOf(t.toString().toLowerCase()),L=(e,t)=>null!=t&&0<=e.toString().toLowerCase().indexOf(t.toString().toLowerCase()),x=(e,t)=>null!=t&&"string"==typeof e&&e.toLowerCase().indexOf(t.toString().toLowerCase())<0;function r(r,s){if(0===s.length)return r;{var n=r;const i=[],a=[];let e=[];for(const c of s)c.type&&c.type!==l.And?(e.length&&a.push(e),e=[c]):e.push(c);a.push(e);let t=[];for(const e of a)t=t.concat(I(n,e));t=[...new Set(t)];var o=n.length;for(let e=0;e":return p;case"<":return m;case">=":return f;case"<=":return b;case"is":case"==":return w;case"!is":case"!=":return _;case"===":return k;case"!==":return E;case"like":case"~":case"contains":return A;case"!contains":case"!like":case"!~":return x;default:return L}}(a.operator);if(!c(o,i,a.ignoreCase)){e=!1;break}}e&&r.push(s)}return r};function s(e,t){if(!t||0===t.length)return e;if(1{if(0===r.length)r=r.concat(i(n,e));else{for(const t of r)s=s.concat(i(t,e));r=s,s=[]}}),r}return i(e,t[0])}function i(e,t){const r=[],s=[];do{if(!e||0===e.length)break;var n=e.shift();if(!n)break;const i=n[t];var o=s.indexOf(i.toString());0<=o?r[o].push(n):(s.push(i.toString()),void 0!==r[s.length-1]?r[s.length-1].push(n):r.push([n]))}while(0{if(t){var r=e;const s={};for(const n of t){let e=r.map(e=>e[n].toString());const o=e.map(e=>d(e));o.some(e=>e===a.Float)?(e=e.map(e=>parseFloat(e)),s[n]=parseFloat(e.reduce((e,t)=>e+t).toFixed(2))):(e=e.map(e=>parseInt(e)),s[n]=e.reduce((e,t)=>e+t))}return s}return{}};class C{model;sortDetails=[];filterDetails=[];selection=[];groupByProperties=[];distinctProperties=[];concatenationToken=", ";constructor(e){this.model=JSON.parse(JSON.stringify(e))}sort(e){return this.sortDetails=e,this}orderBy(e,t){return this.sortDetails.push({propertyName:e,direction:t}),this}thenOrderBy(e,t){return this.orderBy(e,t)}filter(e){return Array.isArray(e)?this.filterDetails=e:this.filterDetails.push(e),this}where(e,t,r,s,n){return this.filterDetails.push({propertyName:e,operator:t,value:r,type:s,ignoreCase:n}),this}andWhere(e,t,r,s){return this.where(e,t,r,l.And,s),this}orWhere(e,t,r,s){return this.where(e,t,r,l.Or,s),this}group(e){return this.groupByProperties=e,this}groupBy(e){return this.groupByProperties.push(e),this}thenGroupBy(e){return this.groupByProperties.push(e),this}select(e){return Array.isArray(e)?this.selection=e:"*"!==e&&(this.selection=[e]),this}distinct(e,t){return t&&(this.concatenationToken=t),Array.isArray(e)?this.distinctProperties=e:e&&(this.distinctProperties=[e]),this}execute(){return s(function(t,r){if(0===r.length)return t;{var s=r;let e=[];for(const n of t){const o={};for(const i of s)o[i]=n[i];e.push(o)}return e}}(function(r,s,d){if(!s||!s.length)return r;const n=[],h=[];for(const m of r){const i={};let t="";for(const e of s){var u=v(e,m);i[e]=u,t+=u}if(!h.includes(t)){let e=r;for(const a of Object.keys(i))e=e.filter(e=>e[a]===i[a]);h.push(t),n.push(e)}}const t=[];for(const f of n){let e={};for(const c of f){var o,p=Object.keys(e);if(p.length)for(const l of p)s.includes(l)||(o=e[l],Array.isArray(o)?(o=c[l],Array.isArray(o)?e[l]=[...new Set(...e[l].concat(c[l]))]:e[l].includes(c[l])||e[l].push(c[l])):isNaN(e[l])&&isNaN(c[l])?e[l]!==c[l]&&(e[l]=[e[l],c[l]]):e[l]=e[l]+c[l]);else e=c}t.push(e)}return t.forEach(e=>{for(const t in e)Array.isArray(e[t])&&(e[t]=e[t].join(d))}),t}(n(r(JSON.parse(JSON.stringify(this.model)),this.filterDetails),this.sortDetails),this.distinctProperties,this.concatenationToken),this.selection),this.groupByProperties)}sum(e,t){e=Array.isArray(e)?e:[e];return o(t||this.model,e)}}function S(e,t){t=t?t.toUpperCase():"FLK-";return e.toUpperCase().includes(t)}function h(e,t){var{timeStamp:r,type:s,x:n,y:o}=e;let i=e.target;do{if(!i||"HTML"===i.tagName||S(i.tagName,t)){"HTML"===i.tagName&&(i=null);break}}while(i=i.parentNode||i.parentElement,!S(i.tagName,t));return{target:i,timeStamp:r,type:s,x:n,y:o}}class t{constructor(){}_topLevelClasses=[];_events=[];generateId(){return"flk-"+function e(){const t=([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,e=>(e^crypto.getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16)),r=t.split("-")[0];return window.$flightkitUUIDStore||(window.$flightkitUUIDStore=[]),window.$flightkitUUIDStore.some(e=>e===r)?e():(window.$flightkitUUIDStore.push(r),r)}()}render(t){if(!t.component)throw new Error("Component is not assigned! Can't render");t.id=t.id||this.generateId();var e=this._getAllEventAttributes(t);if(e){var r="#"+t.id;for(const o of e){var s="e-"+o;this.addEvent(r,o,t.getAttribute(s))}}var n=Object.keys(t.classList).length;if(n){for(let e=0;e{clearTimeout(this._renderTimer),this._assignToDom(t,t.component)},10)}addEvent(e,t,r){this._events.push({selector:e,eventType:t,callback:r})}_getExternalCallback(e){let t=void 0;for(const r of e.split("."))t=(t||window)[r];return t}_getAllEventAttributes(e){e=e.attributes;const t=Array.from(e).filter(e=>e.name.startsWith("e-"));return t.map(e=>e.name.slice(2))}_isFlightkitElement(e){return e.toUpperCase().includes("FLK-")}_outerEventHandler(e){const t=h(e),r=(t.contents=e.detail,t.target.getAttribute("e-"+t.type));let s=void 0;for(const n of r.split("."))s=(s||window)[n];return e.preventDefault(),e.stopPropagation(),s(t)}_addEvents(e){if(e.isConnected)for(const t of this._events){let e=document.querySelector(t.selector);e&&("function"==typeof t.callback?(e.removeEventListener(t.eventType,t.callback),e.addEventListener(t.eventType,t.callback)):(e.removeEventListener(t.eventType,this._outerEventHandler),e.addEventListener(t.eventType,this._outerEventHandler)))}}removeEvents(){for(const t of this._events){let e=document.querySelector(t.selector);e&&("function"==typeof t.callback?e.removeEventListener(t.eventType,t.callback):e.removeEventListener(t.eventType,this._outerEventHandler))}this._events=[]}_assignToDom(e,t){e.innerHTML="";for(const s of Array.isArray(t)?t:[t])e.append(s);const r=setTimeout(()=>{this._addEvents(e),clearTimeout(r)},10)}}function T(e){const t=new DOMParser;return t.parseFromString(e,"image/svg+xml").documentElement}class B extends HTMLElement{base;component=null;_contents=[];_orderBy=[];properties=new Set;_columnOrder=[];_filter="";_selectionProperty="";_selectedIds=new Set;uniqueEntriesByProperties={};propertyLabelDictionary={};static get observedAttributes(){return["contents","columns","order","filter","selection-property"]}get columnOrder(){return this._columnOrder.length?this._columnOrder:this.properties}set columnOrder(e){let t;"string"==typeof e&&(t=e.split(",")),t=e,this._columnOrder=t}get contents(){return this._contents}set contents(e){this.analyzeData(e),this._contents=new C(e)}get orderBy(){return this._orderBy}set orderBy(e){if(Array.isArray(e))this._orderBy=e;else{const s=[];for(const n of e.split(",")){var t=n.split("|"),r=t[0],t=1e[r._selectionProperty])):new Set;e=t?r.contents.execute():[];r._emit("select",r,{selection:e}),r._updateCheckboxes(r)}emitSelect(e){var t=e.target.checked,r=e.target.dataset.objectId;const s=h(e).target,n=(t?s._selectedIds.add(r):s._selectedIds.delete(r),s._selectionProperty);e=s.contents.execute().filter(e=>s._selectedIds.has(e[n]));s._emit("select",s,{selection:e}),s._updateCheckboxes(s)}sortData(e){const t=h(e).target,r=function(e,t){let r=e.target,s="";for(;r.dataset[t]?s=r.dataset[t]:r=r.parentNode,!s;);return s}(e,"column");r&&(-1<(e=t._orderBy.findIndex(e=>e.propertyName===r))?"asc"===t._orderBy[e].direction?t._orderBy[e].direction="desc":t._orderBy.splice(e,1):t._orderBy.push({propertyName:r,direction:"asc"}),t.createHtml(),t.base.render(t))}setColumnOrder(e){this._columnOrder=e?Array.isArray(e)?e:e.split(","):[]}analyzeData(t){this.properties=new Set;var r=t.length;for(let e=0;e"_"===e?" ":" "+e.toLowerCase());var r=t.charAt(0).toUpperCase()+t.slice(1);return this.propertyLabelDictionary[e]=r}createSelectionCheckbox(e){const t=document.createElement("input");return t.setAttribute("type","checkbox"),t.classList.add("flk-selection-checkbox"),e&&(t.dataset.selected=e[this._selectionProperty]),t}createRow(e){const t=document.createElement("tr");if(this._selectionProperty.length){const n=document.createElement("td");var r=this.base.generateId();const o=this.createSelectionCheckbox(e);o.id=r,o.dataset.objectId=e[this._selectionProperty];var s=e[this._selectionProperty];this._selectedIds.has(s)?o.checked=!0:o.checked=!1,this.base.addEvent("#"+r,"change",this.emitSelect),n.append(o),t.append(n)}for(const i of this.columnOrder){const a=document.createElement("td");a.innerText=e[i],t.append(a)}return t}createBody(e){const t=document.createElement("tbody");for(const s of e){var r=this.createRow(s,null);t.append(r)}return t}createHead(){const e=document.createElement("thead"),t=document.createElement("tr");if(t.classList.add("cursor-pointer"),this._selectionProperty.length){const n=document.createElement("th");var r=this.base.generateId();const o=this.createSelectionCheckbox();o.id=r;var d=this.contents.execute().length;0e.propertyName===i);if(s){const l=document.createElement("span");l.innerHTML="asc"===s.direction?'':'',a.append(l)}t.append(a)}return e.append(t),e}init(){this.createHtml(),this.base.render(this)}}class N extends HTMLElement{base;componentId;constructor(){super(),this.base=new t}connectedCallback(){var e=this.getAttribute("top"),t=this.getAttribute("left"),r=this.getAttribute("center"),s=this.getAttribute("zIndex");this.id||(this.id=this.base.generateId()),this.style.display="block",this.style.position="fixed","string"==typeof r?(this.style.top=e||"50%",this.style.left="50%",this.style.transform="translate(-50%, -50%)"):(this.style.top=e||this.clientTop+"px",this.style.left=t||this.clientLeft+"px"),s&&(this.style.zIndex=s),this.componentId=this.getAttribute("handle");const n=document.createElement("div");n.innerHTML=this.innerHTML,this.component=n;r="#"+(this.componentId||this.id);this.base.addEvent(r,"mousedown",this._dragElement),this.base.render(this)}disconnectedCallback(){this.base.removeEvents(this)}_dragElement(e){const r=h(e,"flk-draggable").target;let s,n;function t(e){s=e.clientX-r.offsetLeft,n=e.clientY-r.offsetTop}function o(e){var t=e.clientX-s,e=e.clientY-n;r.style.left=t+"px",r.style.top=e+"px"}function i(e){e.preventDefault()}function a(){r.removeAttribute("draggable"),r.removeEventListener("dragstart",t),r.removeEventListener("dragend",a),document.removeEventListener("dragover",i),document.removeEventListener("drop",o)}r.setAttribute("draggable",!0),r.addEventListener("dragstart",t),r.addEventListener("dragend",a),document.addEventListener("dragover",i),document.addEventListener("drop",o)}}class D extends HTMLElement{_id;base;_draggableId;constructor(){super(),this.base=new t}_emit(e,t,r){e=new CustomEvent(e,{detail:r,bubbles:!0,cancelable:!0});t.dispatchEvent(e)}closeModal(e){const t=h(e,"flk-modal").target;t.classList.add("hidden"),t._emit("hide",t,{hidden:!0,id:t.id})}openModal(e=!0){const t=document.getElementById(this._draggableId);e&&(t.style.top="40%",t.style.left="50%"),this.classList.remove("hidden")}connectedCallback(){this.id||(this.id=this.base.generateId());const e=document.createElement("div");var t=this.base.generateId();const r=document.createElement("flk-draggable"),s=(this._draggableId=this.base.generateId(),r.id=this._draggableId,r.setAttribute("center",""),r.setAttribute("top","40%"),r.setAttribute("handle",t),r.setAttribute("zIndex","1080"),r.classList.add("border","shadow-lg","bg-white"),document.createElement("div"));var n=this.getAttribute("title");if(n){const l=document.createElement("span");l.innerText=n,l.classList.add("ml-1","mr-auto"),s.append(l)}s.id=t;const o=this.getAttribute("header-class");let i=[];o?i=i.concat(o.split(" ")):i.push("bg-gray-light"),s.classList.add(...i,"border-bottom","row","justify-end");n=this.base.generateId();const a=document.createElement("button"),c=(a.classList.add("py-0","px-1","outline-hover","no-border",...i),a.innerText="X",a.id=n,s.append(a),r.append(s),document.createElement("div"));c.innerHTML=this.innerHTML,r.append(c),e.append(r),this.component=e,this.base.addEvent("#"+n,"click",this.closeModal),this.base.render(this),this.classList.add("hidden")}disconnectedCallback(){this.base.removeEvents(this)}}class O extends HTMLElement{base;_buttonId;_drawerId;_iconId;constructor(){super(),this.base=new t}connectedCallback(){this.style.position="relative",this.style.display="flex",this.style.width="fit-content",this._buttonId=this.base.generateId();const e=document.createElement("button"),t=(e.classList.add("row"),e.id=this._buttonId,document.createElement("span")),r=(t.innerText=this.getAttribute("text"),this._iconId=this.base.generateId(),document.createElement("span"));var s=T('');const n=T(''),o=(n.classList.add("hidden"),r.append(s,n),r.id=this._iconId,e.append(t,r),this._drawerId=this.base.generateId(),document.createElement("div"));o.id=this._drawerId,o.classList.add("shadow","inline-block","bg-white"),o.style.position="absolute",o.style.zIndex="1040";s=this.querySelector("template");s.innerHTML.length?o.innerHTML=s.innerHTML:o.append(s.firstChild),o.style.display="none",this.component=[e,o],this.base.addEvent("#"+this._buttonId,"click",this.toggleMenu);const i=document.querySelector("body");""!==i.getAttribute("flk-close-dropdown")&&(i.setAttribute("flk-close-dropdown",""),i.addEventListener("click",this.closeAllDropdownButtons)),this.base.render(this)}disconnectedCallback(){this.base.removeEvents(this);var e=document.querySelectorAll("flk-dropdown");if(!e||!e.length){const t=document.querySelector("body");t.removeAttribute("flk-close-dropdown"),t.removeEventListener("click",this.closeAllDropdownButtons)}}toggleMenu(e){const t=h(e).target;e=t._drawerId;const r=document.getElementById(e);var e="none"!==r.style.display,s=(r.style.display=e?"none":"block",t.getAttribute("drawer-width")),s=("string"==typeof t.getAttribute("right")&&(r.style.right="0px"),r.style.top=t.offsetHeight+"px",r.style.width=s||t.offsetWidth+"px",t._iconId);const n=document.getElementById(s);e?(n.childNodes[0].classList.remove("hidden"),n.childNodes[1].classList.add("hidden")):(n.childNodes[0].classList.add("hidden"),n.childNodes[1].classList.remove("hidden"))}_closeDropdown(){var e=this._drawerId;const t=document.getElementById(e);if("none"!==t.style.display){e=this._iconId;const r=document.getElementById(e);t.style.display="none",r.childNodes[0].classList.remove("hidden"),r.childNodes[1].classList.add("hidden")}}closeAllDropdownButtons(e){var t,r=h(e,"flk-dropdown").target,e=document.querySelectorAll("flk-dropdown");if(r)for(const s of e)r._buttonId!==s._buttonId&&(t=s._drawerId,"none"!==document.getElementById(t).style.display&&s._closeDropdown());else for(const n of e)n._closeDropdown()}}customElements.define("flk-table",B),customElements.define("flk-draggable",N),customElements.define("flk-modal",D),customElements.define("flk-dropdown",O)}(); \ No newline at end of file +!function(){"use strict";var a,l,g,e;(e=a=a||{}).Date="date",e.String="string",e.Float="float",e.Number="number",e.Array="array",e.Object="object",e.Bool="bool",e.Currency="currency",e.Undefined="undefined",e.Null="null";const c={date:/^(\d{1,4}-\d{1,4}-\d{1,4}(T)?)/gim,currency:/^[$|€]\s?[0-9]*(\.|,)?\d*(\.|,)?\d*/gim,float:/\d+[,|.]\d+[,|.]?\d*/gim,currencySign:/\$|€/gim,array:/^\s?[[].[^,]+[\]],?/gi,precision:/[-+$€,.]/gm,string:/[a-zA-Z]/gim},d=e=>{return null===e||"null"===e?a.Null:e||0===e||!1===e?null===new RegExp(c.date).exec(e)||isNaN(Date.parse(e))?new RegExp(c.currency).exec(e)?a.Currency:!new RegExp(c.string).exec(e)&&new RegExp(c.float).exec(e.toString())?a.Float:isNaN(e)&&0!==e?Array.isArray(e)?a.Array:"object"==typeof e?a.Object:a.String:a.Number:a.Date:a.Undefined},u=(t,e)=>{const r={value:void 0,type:e=e||d(t),currencySign:""};switch(r.type){case a.String:r.value=t.toString();break;case a.Float:case a.Currency:var s=(t=t.toString()).match(new RegExp(/(,)/gim)),n=t.match(new RegExp(/(\.)/gim));if(s)for(let e=1;e<=s.length;e++)t=e!==s.length||n?t.replace(",",""):t.replace(",",".");if(r.type===a.Currency){const i=new RegExp(c.currencySign);var o=i.exec(t);r.currencySign=null!==o?o[0]:"",t=t.replace(i,"")}r.value=parseFloat(t).toPrecision(12);break;case a.Number:r.value=Number(t);break;case a.Date:r.value=Date.parse(t);break;case a.Array:t.length?"object"==typeof t[0]?r.value=t.map(e=>JSON.stringify(e)).join(", "):r.value=t.join(", "):r.value="";break;case a.Object:r.value=t;break;case a.Undefined:r.value="";break;case a.Null:r.value=null}return r};function v(e,t){var r;let s;for(r of e.split("."))r=r.trim(),s?"object"!=typeof s||Array.isArray(s)||(s=s[r]):s=t[r];return s}const p=(e,t)=>tet<=e,b=(e,t)=>e<=t,w=(e,t,r)=>r?e.toLowerCase()==t.toLowerCase():e==t,k=(e,t)=>e===t,_=(e,t)=>e!=t,E=(e,t)=>e!==t,A=(e,t)=>null!=t&&"string"==typeof e&&0<=e.toLowerCase().indexOf(t.toString().toLowerCase()),L=(e,t)=>null!=t&&0<=e.toString().toLowerCase().indexOf(t.toString().toLowerCase()),x=(e,t)=>null!=t&&"string"==typeof e&&e.toLowerCase().indexOf(t.toString().toLowerCase())<0;function r(r,s){if(0===s.length)return r;{var n=r;const i=[],a=[];let e=[];for(const c of s)c.type&&c.type!==l.And?(e.length&&a.push(e),e=[c]):e.push(c);a.push(e);let t=[];for(const e of a)t=t.concat(I(n,e));t=[...new Set(t)];var o=n.length;for(let e=0;e":return p;case"<":return m;case">=":return f;case"<=":return b;case"is":case"==":return w;case"!is":case"!=":return _;case"===":return k;case"!==":return E;case"like":case"~":case"contains":return A;case"!contains":case"!like":case"!~":return x;default:return L}}(a.operator);if(!c(o,i,a.ignoreCase)){e=!1;break}}e&&r.push(s)}return r};function s(e,t){if(!t||0===t.length)return e;if(1{if(0===r.length)r=r.concat(i(n,e));else{for(const t of r)s=s.concat(i(t,e));r=s,s=[]}}),r}return i(e,t[0])}function i(e,t){const r=[],s=[];do{if(!e||0===e.length)break;var n=e.shift();if(!n)break;const i=n[t];var o=s.indexOf(i.toString());0<=o?r[o].push(n):(s.push(i.toString()),void 0!==r[s.length-1]?r[s.length-1].push(n):r.push([n]))}while(0{if(t){var r=e;const s={};for(const n of t){let e=r.map(e=>e[n].toString());const o=e.map(e=>d(e));o.some(e=>e===a.Float)?(e=e.map(e=>parseFloat(e)),s[n]=parseFloat(e.reduce((e,t)=>e+t).toFixed(2))):(e=e.map(e=>parseInt(e)),s[n]=e.reduce((e,t)=>e+t))}return s}return{}};class C{model;sortDetails=[];filterDetails=[];selection=[];groupByProperties=[];distinctProperties=[];concatenationToken=", ";constructor(e){this.model=JSON.parse(JSON.stringify(e))}sort(e){return this.sortDetails=e,this}orderBy(e,t){return this.sortDetails.push({propertyName:e,direction:t}),this}thenOrderBy(e,t){return this.orderBy(e,t)}filter(e){return Array.isArray(e)?this.filterDetails=e:this.filterDetails.push(e),this}where(e,t,r,s,n){return this.filterDetails.push({propertyName:e,operator:t,value:r,type:s,ignoreCase:n}),this}andWhere(e,t,r,s){return this.where(e,t,r,l.And,s),this}orWhere(e,t,r,s){return this.where(e,t,r,l.Or,s),this}group(e){return this.groupByProperties=e,this}groupBy(e){return this.groupByProperties.push(e),this}thenGroupBy(e){return this.groupByProperties.push(e),this}select(e){return Array.isArray(e)?this.selection=e:"*"!==e&&(this.selection=[e]),this}distinct(e,t){return t&&(this.concatenationToken=t),Array.isArray(e)?this.distinctProperties=e:e&&(this.distinctProperties=[e]),this}execute(){return s(function(t,r){if(0===r.length)return t;{var s=r;let e=[];for(const n of t){const o={};for(const i of s)o[i]=n[i];e.push(o)}return e}}(function(r,s,d){if(!s||!s.length)return r;const n=[],h=[];for(const m of r){const i={};let t="";for(const e of s){var u=v(e,m);i[e]=u,t+=u}if(!h.includes(t)){let e=r;for(const a of Object.keys(i))e=e.filter(e=>e[a]===i[a]);h.push(t),n.push(e)}}const t=[];for(const f of n){let e={};for(const c of f){var o,p=Object.keys(e);if(p.length)for(const l of p)s.includes(l)||(o=e[l],Array.isArray(o)?(o=c[l],Array.isArray(o)?e[l]=[...new Set(...e[l].concat(c[l]))]:e[l].includes(c[l])||e[l].push(c[l])):isNaN(e[l])&&isNaN(c[l])?e[l]!==c[l]&&(e[l]=[e[l],c[l]]):e[l]=e[l]+c[l]);else e=c}t.push(e)}return t.forEach(e=>{for(const t in e)Array.isArray(e[t])&&(e[t]=e[t].join(d))}),t}(n(r(JSON.parse(JSON.stringify(this.model)),this.filterDetails),this.sortDetails),this.distinctProperties,this.concatenationToken),this.selection),this.groupByProperties)}sum(e,t){e=Array.isArray(e)?e:[e];return o(t||this.model,e)}}function S(e,t){t=t?t.toUpperCase():"FLK-";return e.toUpperCase().includes(t)}function h(e,t){var{timeStamp:r,type:s,x:n,y:o}=e;let i=e.target;do{if(!i||"HTML"===i.tagName||S(i.tagName,t)){"HTML"===i.tagName&&(i=null);break}}while(i=i.parentNode||i.parentElement,!S(i.tagName,t));return{target:i,timeStamp:r,type:s,x:n,y:o}}class t{constructor(){}_topLevelClasses=[];_events=[];generateId(){return"flk-"+function e(){const t=([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,e=>(e^crypto.getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16)),r=t.split("-")[0];return window.$flightkitUUIDStore||(window.$flightkitUUIDStore=[]),window.$flightkitUUIDStore.some(e=>e===r)?e():(window.$flightkitUUIDStore.push(r),r)}()}render(t){if(!t.component)throw new Error("Component is not assigned! Can't render");t.id=t.id||this.generateId();var e=this._getAllEventAttributes(t);if(e){var r="#"+t.id;for(const o of e){var s="e-"+o;this.addEvent(r,o,t.getAttribute(s))}}var n=Object.keys(t.classList).length;if(n){for(let e=0;e{clearTimeout(this._renderTimer),this._assignToDom(t,t.component)},10)}addEvent(e,t,r){this._events.push({selector:e,eventType:t,callback:r})}_getExternalCallback(e){let t=void 0;for(const r of e.split("."))t=(t||window)[r];return t}_getAllEventAttributes(e){e=e.attributes;const t=Array.from(e).filter(e=>e.name.startsWith("e-"));return t.map(e=>e.name.slice(2))}_isFlightkitElement(e){return e.toUpperCase().includes("FLK-")}_outerEventHandler(e){const t=h(e),r=(t.contents=e.detail,t.target.getAttribute("e-"+t.type));let s=void 0;for(const n of r.split("."))s=(s||window)[n];return e.preventDefault(),e.stopPropagation(),s(t)}_addEvents(e){if(e.isConnected)for(const t of this._events){let e=document.querySelector(t.selector);e&&("function"==typeof t.callback?(e.removeEventListener(t.eventType,t.callback),e.addEventListener(t.eventType,t.callback)):(e.removeEventListener(t.eventType,this._outerEventHandler),e.addEventListener(t.eventType,this._outerEventHandler)))}}removeEvents(){for(const t of this._events){let e=document.querySelector(t.selector);e&&("function"==typeof t.callback?e.removeEventListener(t.eventType,t.callback):e.removeEventListener(t.eventType,this._outerEventHandler))}this._events=[]}_assignToDom(e,t){e.innerHTML="";for(const s of Array.isArray(t)?t:[t])e.append(s);const r=setTimeout(()=>{this._addEvents(e),clearTimeout(r)},10)}}function T(e){const t=new DOMParser;return t.parseFromString(e,"image/svg+xml").documentElement}class B extends HTMLElement{base;component=null;_contents=[];_orderBy=[];properties=new Set;_columnOrder=[];_filter="";_selectionProperty="";_selectedIds=new Set;uniqueEntriesByProperties={};propertyLabelDictionary={};static get observedAttributes(){return["contents","columns","order","filter","selection-property"]}get columnOrder(){return this._columnOrder.length?this._columnOrder:this.properties}set columnOrder(e){let t;"string"==typeof e&&(t=e.split(",")),t=e,this._columnOrder=t}get contents(){return this._contents}set contents(e){this.analyzeData(e),this._contents=new C(e)}get orderBy(){return this._orderBy}set orderBy(e){if(Array.isArray(e))this._orderBy=e;else{const s=[];for(const n of e.split(",")){var t=n.split("|"),r=t[0],t=1e[r._selectionProperty])):new Set;e=t?r.contents.execute():[];r._emit("select",r,{selection:e}),r._updateCheckboxes(r)}emitSelect(e){var t=e.target.checked,r=e.target.dataset.objectId;const s=h(e).target,n=(t?s._selectedIds.add(r):s._selectedIds.delete(r),s._selectionProperty);e=s.contents.execute().filter(e=>s._selectedIds.has(e[n]));s._emit("select",s,{selection:e}),s._updateCheckboxes(s)}sortData(e){const t=h(e).target,r=function(e,t){let r=e.target,s="";for(;r.dataset[t]?s=r.dataset[t]:r=r.parentNode,!s;);return s}(e,"column");r&&(-1<(e=t._orderBy.findIndex(e=>e.propertyName===r))?"asc"===t._orderBy[e].direction?t._orderBy[e].direction="desc":t._orderBy.splice(e,1):t._orderBy.push({propertyName:r,direction:"asc"}),t.createHtml(),t.base.render(t))}setColumnOrder(e){this._columnOrder=e?Array.isArray(e)?e:e.split(","):[]}analyzeData(t){this.properties=new Set;var r=t.length;for(let e=0;e"_"===e?" ":" "+e.toLowerCase());var r=t.charAt(0).toUpperCase()+t.slice(1);return this.propertyLabelDictionary[e]=r}createSelectionCheckbox(e){const t=document.createElement("input");return t.setAttribute("type","checkbox"),t.classList.add("flk-selection-checkbox"),e&&(t.dataset.selected=e[this._selectionProperty]),t}createRow(e){const t=document.createElement("tr");if(this._selectionProperty.length){const n=document.createElement("td");var r=this.base.generateId();const o=this.createSelectionCheckbox(e);o.id=r,o.dataset.objectId=e[this._selectionProperty];var s=e[this._selectionProperty];this._selectedIds.has(s)?o.checked=!0:o.checked=!1,this.base.addEvent("#"+r,"change",this.emitSelect),n.append(o),t.append(n)}for(const i of this.columnOrder){const a=document.createElement("td");a.innerText=e[i],t.append(a)}return t}createBody(e){const t=document.createElement("tbody");for(const s of e){var r=this.createRow(s,null);t.append(r)}return t}createHead(){const e=document.createElement("thead"),t=document.createElement("tr");if(t.classList.add("cursor-pointer"),this._selectionProperty.length){const n=document.createElement("th");var r=this.base.generateId();const o=this.createSelectionCheckbox();o.id=r;var d=this.contents.execute().length;0e.propertyName===i);if(s){const l=document.createElement("span");l.innerHTML="asc"===s.direction?'':'',a.append(l)}t.append(a)}return e.append(t),e}init(){this.createHtml(),this.base.render(this)}}class N extends HTMLElement{base;componentId;constructor(){super(),this.base=new t}connectedCallback(){var e=this.getAttribute("top"),t=this.getAttribute("left"),r=this.getAttribute("center"),s=this.getAttribute("zIndex");this.id||(this.id=this.base.generateId()),this.style.display="block",this.style.position="fixed","string"==typeof r?(this.style.top=e||"50%",this.style.left="50%",this.style.transform="translate(-50%, -50%)"):(this.style.top=e||this.clientTop+"px",this.style.left=t||this.clientLeft+"px"),s&&(this.style.zIndex=s),this.componentId=this.getAttribute("handle");const n=document.createElement("div");n.innerHTML=this.innerHTML,this.component=n;r="#"+(this.componentId||this.id);this.base.addEvent(r,"mousedown",this._dragElement),this.base.render(this)}disconnectedCallback(){this.base.removeEvents(this)}_dragElement(e){const r=h(e,"flk-draggable").target;let s,n;function t(e){s=e.clientX-r.offsetLeft,n=e.clientY-r.offsetTop}function o(e){var t=e.clientX-s,e=e.clientY-n;r.style.left=t+"px",r.style.top=e+"px"}function i(e){e.preventDefault()}function a(){r.removeAttribute("draggable"),r.removeEventListener("dragstart",t),r.removeEventListener("dragend",a),document.removeEventListener("dragover",i),document.removeEventListener("drop",o)}r.setAttribute("draggable",!0),r.addEventListener("dragstart",t),r.addEventListener("dragend",a),document.addEventListener("dragover",i),document.addEventListener("drop",o)}}class D extends HTMLElement{_id;base;_draggableId;constructor(){super(),this.base=new t}_emit(e,t,r){e=new CustomEvent(e,{detail:r,bubbles:!0,cancelable:!0});t.dispatchEvent(e)}closeModal(e){const t=h(e,"flk-modal").target;t.classList.add("hidden"),t._emit("hide",t,{hidden:!0,id:t.id})}openModal(e=!0){const t=document.getElementById(this._draggableId);e&&(t.style.top="40%",t.style.left="50%"),this.classList.remove("hidden")}connectedCallback(){this.id||(this.id=this.base.generateId());const e=document.createElement("div");var t=this.base.generateId();const r=document.createElement("flk-draggable"),s=(this._draggableId=this.base.generateId(),r.id=this._draggableId,r.setAttribute("center",""),r.setAttribute("top","40%"),r.setAttribute("handle",t),r.setAttribute("zIndex","1080"),r.classList.add("border","shadow-lg","bg-white"),r.style.width="max-content",document.createElement("div"));var n=this.getAttribute("title");if(n){const l=document.createElement("span");l.innerText=n,l.classList.add("ml-1","mr-auto"),s.append(l)}s.id=t;const o=this.getAttribute("header-class");let i=[];o?i=i.concat(o.split(" ")):i.push("bg-gray-light"),s.classList.add(...i,"border-bottom","row","justify-end");n=this.base.generateId();const a=document.createElement("button"),c=(a.classList.add("py-0","px-1","outline-hover","no-border",...i),a.innerText="X",a.id=n,s.append(a),r.append(s),document.createElement("div"));c.innerHTML=this.innerHTML,r.append(c),e.append(r),this.component=e,this.base.addEvent("#"+n,"click",this.closeModal),this.base.render(this),this.classList.add("hidden")}disconnectedCallback(){this.base.removeEvents(this)}}class O extends HTMLElement{base;_buttonId;_drawerId;_iconId;constructor(){super(),this.base=new t}connectedCallback(){this.style.position="relative",this.style.display="flex",this.style.width="fit-content",this._buttonId=this.base.generateId();const e=document.createElement("button"),t=(e.classList.add("row"),e.id=this._buttonId,document.createElement("span")),r=(t.innerText=this.getAttribute("text"),this._iconId=this.base.generateId(),document.createElement("span"));var s=T('');const n=T(''),o=(n.classList.add("hidden"),r.append(s,n),r.id=this._iconId,e.append(t,r),this._drawerId=this.base.generateId(),document.createElement("div"));o.id=this._drawerId,o.classList.add("shadow","inline-block","bg-white"),o.style.position="absolute",o.style.zIndex="1040";s=this.querySelector("template");s.innerHTML.length?o.innerHTML=s.innerHTML:o.append(s.firstChild),o.style.display="none",this.component=[e,o],this.base.addEvent("#"+this._buttonId,"click",this.toggleMenu);const i=document.querySelector("body");""!==i.getAttribute("flk-close-dropdown")&&(i.setAttribute("flk-close-dropdown",""),i.addEventListener("click",this.closeAllDropdownButtons)),this.base.render(this)}disconnectedCallback(){this.base.removeEvents(this);var e=document.querySelectorAll("flk-dropdown");if(!e||!e.length){const t=document.querySelector("body");t.removeAttribute("flk-close-dropdown"),t.removeEventListener("click",this.closeAllDropdownButtons)}}toggleMenu(e){const t=h(e).target;e=t._drawerId;const r=document.getElementById(e);var e="none"!==r.style.display,s=(r.style.display=e?"none":"block",t.getAttribute("drawer-width")),s=("string"==typeof t.getAttribute("right")&&(r.style.right="0px"),r.style.top=t.offsetHeight+"px",r.style.width=s||t.offsetWidth+"px",t._iconId);const n=document.getElementById(s);e?(n.childNodes[0].classList.remove("hidden"),n.childNodes[1].classList.add("hidden")):(n.childNodes[0].classList.add("hidden"),n.childNodes[1].classList.remove("hidden"))}_closeDropdown(){var e=this._drawerId;const t=document.getElementById(e);if("none"!==t.style.display){e=this._iconId;const r=document.getElementById(e);t.style.display="none",r.childNodes[0].classList.remove("hidden"),r.childNodes[1].classList.add("hidden")}}closeAllDropdownButtons(e){var t,r=h(e,"flk-dropdown").target,e=document.querySelectorAll("flk-dropdown");if(r)for(const s of e)r._buttonId!==s._buttonId&&(t=s._drawerId,"none"!==document.getElementById(t).style.display&&s._closeDropdown());else for(const n of e)n._closeDropdown()}}customElements.define("flk-table",B),customElements.define("flk-draggable",N),customElements.define("flk-modal",D),customElements.define("flk-dropdown",O)}(); \ No newline at end of file diff --git a/docs/assets/AvianCss-WgMyDadT.js b/docs/assets/AvianCss-WgMyDadT.js new file mode 100644 index 0000000..2ffed24 --- /dev/null +++ b/docs/assets/AvianCss-WgMyDadT.js @@ -0,0 +1 @@ +import{_ as u,o as c,c as n,a as t,w as l,b as a,u as o,R as e,d as s,p as r,e as m,f as p,g as f}from"./index-Z9theFxX.js";const i=_=>(r("data-v-d4d45caf"),_=_(),m(),_),g={class:"bg-white"},v=i(()=>s("div",{class:"column align-center gap-1 mb-3"},[s("img",{src:p,class:"avian-logo"}),s("h1",null,"Avian CSS")],-1)),b={class:"font-size-18"},y=i(()=>s("h2",null,"Base",-1)),w=i(()=>s("hr",null,null,-1)),x={class:"ml-0 mt-3 list-style-none"},I={class:"ml-1"},k={class:"ml-1"},B=i(()=>s("h3",{class:"mt-3"},"Layout",-1)),S=i(()=>s("hr",null,null,-1)),C={class:"ml-0 list-style-none"},N={class:"ml-1"},V={class:"ml-1"},A={class:"ml-1"},R={class:"ml-1"},L={class:"ml-1"},T=i(()=>s("h3",{class:"mt-3"},"Interactive",-1)),$=i(()=>s("hr",null,null,-1)),z={class:"ml-0 list-style-none"},D={class:"ml-1"},E={class:"ml-1"},F={class:"ml-1"},M=i(()=>s("h3",{class:"mt-3"},"Utilities",-1)),P=i(()=>s("hr",null,null,-1)),U={class:"ml-0 list-style-none"},j={class:"ml-1"},q={class:"ml-1"},G={class:"ml-1"},H={class:"ml-1"},J={class:"ml-1"},K={__name:"AvianNavigation",setup(_){return(d,h)=>(c(),n("section",g,[v,t(o(e),{to:"/",class:"block mb-2"},{default:l(()=>[a("Back to Ibiss ")]),_:1}),s("nav",b,[y,w,s("ul",x,[s("li",I,[t(o(e),{to:"/typography"},{default:l(()=>[a("Typography")]),_:1})]),s("li",k,[t(o(e),{to:"/variables"},{default:l(()=>[a("Variables")]),_:1})])]),B,S,s("ul",C,[s("li",N,[t(o(e),{to:"/table"},{default:l(()=>[a("Table")]),_:1})]),s("li",V,[t(o(e),{to:"/flex"},{default:l(()=>[a("Flex")]),_:1})]),s("li",A,[t(o(e),{to:"/margins-paddings"},{default:l(()=>[a("Margins and Paddings")]),_:1})]),s("li",R,[t(o(e),{to:"/responsive"},{default:l(()=>[a("Responsive hide/show")]),_:1})]),s("li",L,[t(o(e),{to:"/display-utilities"},{default:l(()=>[a("Display utilities")]),_:1})])]),T,$,s("ul",z,[s("li",D,[t(o(e),{to:"/buttons"},{default:l(()=>[a("Buttons")]),_:1})]),s("li",E,[t(o(e),{to:"/links"},{default:l(()=>[a("Links")]),_:1})]),s("li",F,[t(o(e),{to:"/inputs"},{default:l(()=>[a("Inputs")]),_:1})])]),M,P,s("ul",U,[s("li",j,[t(o(e),{to:"/icons"},{default:l(()=>[a("Icons")]),_:1})]),s("li",q,[t(o(e),{to:"/colors"},{default:l(()=>[a("Colors")]),_:1})]),s("li",G,[t(o(e),{to:"/borders"},{default:l(()=>[a("Borders")]),_:1})]),s("li",H,[t(o(e),{to:"/shadows"},{default:l(()=>[a("Shadows")]),_:1})]),s("li",J,[t(o(e),{to:"/cursors"},{default:l(()=>[a("Cursors")]),_:1})])])])]))}},O=u(K,[["__scopeId","data-v-d4d45caf"]]),Q={class:"row gap-3"},X={__name:"AvianCss",setup(_){return(d,h)=>(c(),n("main",Q,[t(O,{class:"navigation f-10 shadow py-1 px-2"}),t(o(f))]))}};export{X as default}; diff --git a/docs/assets/AvianCss-blN8168m.css b/docs/assets/AvianCss-blN8168m.css new file mode 100644 index 0000000..4af2745 --- /dev/null +++ b/docs/assets/AvianCss-blN8168m.css @@ -0,0 +1 @@ +.avian-logo[data-v-d4d45caf]{max-width:14rem;width:14rem}.router-link-exact-active[data-v-d4d45caf]{color:var(--color-on-contrast);max-width:fit-content;text-decoration:underline} diff --git a/docs/assets/AvianCss-ctZWULKB.css b/docs/assets/AvianCss-ctZWULKB.css deleted file mode 100644 index 4d2397c..0000000 --- a/docs/assets/AvianCss-ctZWULKB.css +++ /dev/null @@ -1 +0,0 @@ -.avian-logo[data-v-4518e27a]{max-width:14rem;width:14rem}.router-link-exact-active[data-v-4518e27a]{color:var(--color-on-contrast);max-width:fit-content;text-decoration:underline} diff --git a/docs/assets/AvianCss-hDeO_-KP.js b/docs/assets/AvianCss-hDeO_-KP.js deleted file mode 100644 index 63e95e0..0000000 --- a/docs/assets/AvianCss-hDeO_-KP.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as u,o as c,c as n,a as t,w as l,b as e,u as o,R as a,d as s,p as r,e as m,f as p,g as f}from"./index-9HWLB3Yh.js";const i=_=>(r("data-v-4518e27a"),_=_(),m(),_),g={class:"bg-white"},v=i(()=>s("div",{class:"column align-center gap-1 mb-3"},[s("img",{src:p,class:"avian-logo"}),s("h1",null,"Avian CSS")],-1)),b={class:"font-size-18"},y=i(()=>s("h2",null,"Base",-1)),w=i(()=>s("hr",null,null,-1)),x={class:"ml-0 mt-3 list-style-none"},I={class:"ml-1"},k={class:"ml-1"},B=i(()=>s("h3",{class:"mt-3"},"Layout",-1)),S=i(()=>s("hr",null,null,-1)),C={class:"ml-0 list-style-none"},N={class:"ml-1"},V={class:"ml-1"},A={class:"ml-1"},R={class:"ml-1"},L={class:"ml-1"},T=i(()=>s("h3",{class:"mt-3"},"Interactive",-1)),$=i(()=>s("hr",null,null,-1)),z={class:"ml-0 list-style-none"},D={class:"ml-1"},E={class:"ml-1"},F={class:"ml-1"},M=i(()=>s("h3",{class:"mt-3"},"Utilities",-1)),P=i(()=>s("hr",null,null,-1)),U={class:"ml-0 list-style-none"},j={class:"ml-1"},q={class:"ml-1"},G={class:"ml-1"},H={class:"ml-1"},J={class:"ml-1"},K={__name:"AvianNavigation",setup(_){return(d,h)=>(c(),n("section",g,[v,t(o(a),{to:"/",class:"block mb-2"},{default:l(()=>[e("Back to Ibiss ")]),_:1}),s("nav",b,[y,w,s("ul",x,[s("li",I,[t(o(a),{to:"/typography"},{default:l(()=>[e("Typography")]),_:1})]),s("li",k,[t(o(a),{to:"/variables"},{default:l(()=>[e("Variables")]),_:1})])]),B,S,s("ul",C,[s("li",N,[t(o(a),{to:"/table"},{default:l(()=>[e("Table")]),_:1})]),s("li",V,[t(o(a),{to:"/flex"},{default:l(()=>[e("Flex")]),_:1})]),s("li",A,[t(o(a),{to:"/margins-paddings"},{default:l(()=>[e("Margins and Paddings")]),_:1})]),s("li",R,[t(o(a),{to:"/responsive"},{default:l(()=>[e("Responsive hide/show")]),_:1})]),s("li",L,[t(o(a),{to:"/display-utilities"},{default:l(()=>[e("Display utilities")]),_:1})])]),T,$,s("ul",z,[s("li",D,[t(o(a),{to:"/buttons"},{default:l(()=>[e("Buttons")]),_:1})]),s("li",E,[t(o(a),{to:"/links"},{default:l(()=>[e("Links")]),_:1})]),s("li",F,[t(o(a),{to:"/inputs"},{default:l(()=>[e("Inputs")]),_:1})])]),M,P,s("ul",U,[s("li",j,[t(o(a),{to:"/icons"},{default:l(()=>[e("Icons")]),_:1})]),s("li",q,[t(o(a),{to:"/colors"},{default:l(()=>[e("Colors")]),_:1})]),s("li",G,[t(o(a),{to:"/borders"},{default:l(()=>[e("Borders")]),_:1})]),s("li",H,[t(o(a),{to:"/shadows"},{default:l(()=>[e("Shadows")]),_:1})]),s("li",J,[t(o(a),{to:"/cursors"},{default:l(()=>[e("Cursors")]),_:1})])])])]))}},O=u(K,[["__scopeId","data-v-4518e27a"]]),Q={class:"row gap-3"},X={__name:"AvianCss",setup(_){return(d,h)=>(c(),n("main",Q,[t(O,{class:"navigation f-10 shadow py-1 px-2"}),t(o(f))]))}};export{X as default}; diff --git a/docs/assets/Card-2OCnG6Eh.js b/docs/assets/Card-2OCnG6Eh.js new file mode 100644 index 0000000..2dcf1ca --- /dev/null +++ b/docs/assets/Card-2OCnG6Eh.js @@ -0,0 +1 @@ +import{_ as c,o as s,c as t,k as a}from"./index-Z9theFxX.js";const o={},r={class:"card shadow py-1 px-2 f-fill bg-white"};function n(e,d){return s(),t("article",r,[a(e.$slots,"default",{},void 0,!0)])}const l=c(o,[["render",n],["__scopeId","data-v-c86ba9c2"]]);export{l as C}; diff --git a/docs/assets/Card-8BPgi-a3.css b/docs/assets/Card-8BPgi-a3.css new file mode 100644 index 0000000..78caf3d --- /dev/null +++ b/docs/assets/Card-8BPgi-a3.css @@ -0,0 +1 @@ +.card[data-v-c86ba9c2]{min-height:100dvh;overflow-y:auto} diff --git a/docs/assets/Card-ptuzLIBJ.js b/docs/assets/Card-ptuzLIBJ.js deleted file mode 100644 index e5398f3..0000000 --- a/docs/assets/Card-ptuzLIBJ.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,o as t,c,k as o}from"./index-9HWLB3Yh.js";const r={},a={class:"card shadow py-1 px-2 f-fill bg-white"};function n(e,d){return t(),c("article",a,[o(e.$slots,"default",{},void 0,!0)])}const f=s(r,[["render",n],["__scopeId","data-v-87b5e8f1"]]);export{f as C}; diff --git a/docs/assets/Card-svrlbane.css b/docs/assets/Card-svrlbane.css deleted file mode 100644 index 1c0c4f6..0000000 --- a/docs/assets/Card-svrlbane.css +++ /dev/null @@ -1 +0,0 @@ -.card[data-v-87b5e8f1]{min-height:100dvh;overflow-y:auto} diff --git a/docs/assets/Flightkit-0QOFgep_.css b/docs/assets/Flightkit-0QOFgep_.css deleted file mode 100644 index 8ae7e8f..0000000 --- a/docs/assets/Flightkit-0QOFgep_.css +++ /dev/null @@ -1 +0,0 @@ -.flightkit-logo[data-v-3f5414d8]{max-width:14rem;width:14rem}.router-link-exact-active[data-v-3f5414d8]{color:var(--color-on-contrast);max-width:fit-content;text-decoration:underline} diff --git a/docs/assets/Flightkit-LgA7x4k0.css b/docs/assets/Flightkit-LgA7x4k0.css new file mode 100644 index 0000000..1d7c52b --- /dev/null +++ b/docs/assets/Flightkit-LgA7x4k0.css @@ -0,0 +1 @@ +.flightkit-logo[data-v-e109d7cd]{max-width:14rem;width:14rem}.router-link-exact-active[data-v-e109d7cd]{color:var(--color-on-contrast);max-width:fit-content;text-decoration:underline} diff --git a/docs/assets/Flightkit-UnFc9pvA.js b/docs/assets/Flightkit-mufvNbmj.js similarity index 84% rename from docs/assets/Flightkit-UnFc9pvA.js rename to docs/assets/Flightkit-mufvNbmj.js index e1637ba..3d74efd 100644 --- a/docs/assets/Flightkit-UnFc9pvA.js +++ b/docs/assets/Flightkit-mufvNbmj.js @@ -1 +1 @@ -import{_ as r,o as _,c as n,a as s,w as e,b as l,u as o,R as i,d as t,p,e as g,j as u,g as m}from"./index-9HWLB3Yh.js";const c=a=>(p("data-v-3f5414d8"),a=a(),g(),a),f={class:"bg-white"},k=c(()=>t("div",{class:"column align-center gap-1 mb-3 mt-1"},[t("img",{src:u,class:"flightkit-logo"}),t("h1",null,"Flightkit")],-1)),b={class:"font-size-18"},w=c(()=>t("h2",null,"Components",-1)),v=c(()=>t("hr",null,null,-1)),x={class:"ml-0 mt-3 list-style-none"},I={class:"ml-1"},N={class:"ml-1"},B={class:"ml-1"},F={class:"ml-1"},V={__name:"FlightkitNavigation",setup(a){return(d,h)=>(_(),n("section",f,[k,s(o(i),{to:"/",class:"block mb-2"},{default:e(()=>[l("Back to Ibiss ")]),_:1}),t("nav",b,[w,v,t("ul",x,[t("li",I,[s(o(i),{to:"/flightkit-table"},{default:e(()=>[l("Table")]),_:1})]),t("li",N,[s(o(i),{to:"/flightkit-draggable"},{default:e(()=>[l("Draggable")]),_:1})]),t("li",B,[s(o(i),{to:"/flightkit-modal"},{default:e(()=>[l("Modal")]),_:1})]),t("li",F,[s(o(i),{to:"/flightkit-dropdown"},{default:e(()=>[l("Dropdown")]),_:1})])])])]))}},R=r(V,[["__scopeId","data-v-3f5414d8"]]),S={class:"row gap-3"},C={__name:"Flightkit",setup(a){return(d,h)=>(_(),n("main",S,[s(R,{class:"navigation f-10 shadow py-1 px-2"}),s(o(m))]))}};export{C as default}; +import{_ as r,o as _,c as n,a as s,w as e,b as l,u as o,R as i,d as t,p,e as g,j as u,g as m}from"./index-Z9theFxX.js";const c=a=>(p("data-v-e109d7cd"),a=a(),g(),a),f={class:"bg-white"},k=c(()=>t("div",{class:"column align-center gap-1 mb-3 mt-1"},[t("img",{src:u,class:"flightkit-logo"}),t("h1",null,"Flightkit")],-1)),b={class:"font-size-18"},w=c(()=>t("h2",null,"Components",-1)),v=c(()=>t("hr",null,null,-1)),x={class:"ml-0 mt-3 list-style-none"},I={class:"ml-1"},N={class:"ml-1"},B={class:"ml-1"},F={class:"ml-1"},V={__name:"FlightkitNavigation",setup(a){return(d,h)=>(_(),n("section",f,[k,s(o(i),{to:"/",class:"block mb-2"},{default:e(()=>[l("Back to Ibiss ")]),_:1}),t("nav",b,[w,v,t("ul",x,[t("li",I,[s(o(i),{to:"/flightkit-table"},{default:e(()=>[l("Table")]),_:1})]),t("li",N,[s(o(i),{to:"/flightkit-draggable"},{default:e(()=>[l("Draggable")]),_:1})]),t("li",B,[s(o(i),{to:"/flightkit-modal"},{default:e(()=>[l("Modal")]),_:1})]),t("li",F,[s(o(i),{to:"/flightkit-dropdown"},{default:e(()=>[l("Dropdown")]),_:1})])])])]))}},R=r(V,[["__scopeId","data-v-e109d7cd"]]),S={class:"row gap-3"},C={__name:"Flightkit",setup(a){return(d,h)=>(_(),n("main",S,[s(R,{class:"navigation f-10 shadow py-1 px-2"}),s(o(m))]))}};export{C as default}; diff --git a/docs/assets/borders-QieI5GCO.js b/docs/assets/borders-b1eVlcgC.js similarity index 95% rename from docs/assets/borders-QieI5GCO.js rename to docs/assets/borders-b1eVlcgC.js index f6229e3..82b81eb 100644 --- a/docs/assets/borders-QieI5GCO.js +++ b/docs/assets/borders-b1eVlcgC.js @@ -1 +1 @@ -import{C as r}from"./Card-ptuzLIBJ.js";import{h as e,w as t,o as d,d as l}from"./index-9HWLB3Yh.js";const o=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Borders"),l("hr")]),l("section",null,[l("table",{class:"no-hover"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Result")])]),l("tbody",null,[l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Borders")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border ")]),l("td",null,[l("div",{class:"border p-1 px-2"},"Element with border")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-top ")]),l("td",null,[l("div",{class:"border-top p-1 px-2"},"Element with border-top")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-bottom ")]),l("td",null,[l("div",{class:"border-bottom p-1 px-2"},"Element with border-bottom")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-left ")]),l("td",null,[l("div",{class:"border-left p-1 px-2"},"Element with border-left")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-right ")]),l("td",null,[l("div",{class:"border-right p-1 px-2"},"Element with border-right")])]),l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Border colors")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-primary ")]),l("td",null,[l("div",{class:"border border-primary p-1 px-2"}," Element with border and border-primary ")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-accent ")]),l("td",null,[l("div",{class:"border border-accent p-1 px-2"}," Element with border and border-accent ")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-danger ")]),l("td",null,[l("div",{class:"border border-danger p-1 px-2"}," Element with border and border-danger ")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-success ")]),l("td",null,[l("div",{class:"border border-success p-1 px-2"}," Element with border and border-success ")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-black ")]),l("td",null,[l("div",{class:"border border-black p-1 px-2"},"Element with border and border-black")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-white ")]),l("td",null,[l("div",{class:"bg-black p-1"},[l("div",{class:"border border-white p-1"},"Element with border and border-white")])])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-light ")]),l("td",null,[l("div",{class:"border border-light p-1 px-2"},"Element with border and border-light")])])])])])],-1),b={__name:"borders",setup(n){return(a,s)=>(d(),e(r,{class:"column gap-5"},{default:t(()=>[o]),_:1}))}};export{b as default}; +import{C as r}from"./Card-2OCnG6Eh.js";import{h as e,w as t,o as d,d as l}from"./index-Z9theFxX.js";const o=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Borders"),l("hr")]),l("section",null,[l("table",{class:"no-hover"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Result")])]),l("tbody",null,[l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Borders")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border ")]),l("td",null,[l("div",{class:"border p-1 px-2"},"Element with border")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-top ")]),l("td",null,[l("div",{class:"border-top p-1 px-2"},"Element with border-top")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-bottom ")]),l("td",null,[l("div",{class:"border-bottom p-1 px-2"},"Element with border-bottom")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-left ")]),l("td",null,[l("div",{class:"border-left p-1 px-2"},"Element with border-left")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-right ")]),l("td",null,[l("div",{class:"border-right p-1 px-2"},"Element with border-right")])]),l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Border colors")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-primary ")]),l("td",null,[l("div",{class:"border border-primary p-1 px-2"}," Element with border and border-primary ")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-accent ")]),l("td",null,[l("div",{class:"border border-accent p-1 px-2"}," Element with border and border-accent ")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-danger ")]),l("td",null,[l("div",{class:"border border-danger p-1 px-2"}," Element with border and border-danger ")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-success ")]),l("td",null,[l("div",{class:"border border-success p-1 px-2"}," Element with border and border-success ")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-black ")]),l("td",null,[l("div",{class:"border border-black p-1 px-2"},"Element with border and border-black")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-white ")]),l("td",null,[l("div",{class:"bg-black p-1"},[l("div",{class:"border border-white p-1"},"Element with border and border-white")])])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"}," border-light ")]),l("td",null,[l("div",{class:"border border-light p-1 px-2"},"Element with border and border-light")])])])])])],-1),b={__name:"borders",setup(n){return(a,s)=>(d(),e(r,{class:"column gap-5"},{default:t(()=>[o]),_:1}))}};export{b as default}; diff --git a/docs/assets/buttons-3gnEpqPa.js b/docs/assets/buttons-uI-lYFxC.js similarity index 96% rename from docs/assets/buttons-3gnEpqPa.js rename to docs/assets/buttons-uI-lYFxC.js index 58b4fde..4a99db9 100644 --- a/docs/assets/buttons-3gnEpqPa.js +++ b/docs/assets/buttons-uI-lYFxC.js @@ -1,4 +1,4 @@ -import{C as n}from"./Card-ptuzLIBJ.js";import{i as o,h as s,w as l,o as e,d as t,t as a}from"./index-9HWLB3Yh.js";const r=t("header",null,[t("h1",{class:"mb-2"},"Buttons"),t("hr")],-1),i=t("section",{class:"body column gap-5"},[t("button",null,"A standard button"),t("button",{disabled:""},"A disabled standard button"),t("button",{class:"no-border"},"A button without a border"),t("button",{class:"no-border",disabled:""},"A disabled button without a border"),t("button",{class:"no-border outline-hover"},"A button with only an outline on hover"),t("button",{class:"no-border outline-hover",disabled:""}," A disabled button with only an outline on hover"),t("button",{class:"link"},"A link button"),t("button",{class:"link",disabled:""},"A disabled link button"),t("button",{class:"link accent"},"An accent colored link button"),t("button",{class:"link danger"},"A danger colored link button"),t("button",{class:"link accent",disabled:""},"A disabled colored link button"),t("button",{class:"primary"},"A button with primary color"),t("button",{class:"accent"},"A button with accent color"),t("button",{class:"contrast"},"A button with contrast color"),t("button",{class:"danger"},"A button with danger color"),t("button",{class:"danger",disabled:""},"A disabled colored button"),t("div",null,[t("p",{class:"mb-1"},"Icon button"),t("button",{class:"icon"},[t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-chevron-right"},[t("path",{d:"m9 18 6-6-6-6"})])])]),t("div",null,[t("p",{class:"mb-1"},"Disabled icon button"),t("button",{class:"icon",disabled:""},[t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-chevron-right"},[t("path",{d:"m9 18 6-6-6-6"})])])])],-1),u=` +import{C as n}from"./Card-2OCnG6Eh.js";import{i as o,h as s,w as l,o as e,d as t,t as a}from"./index-Z9theFxX.js";const r=t("header",null,[t("h1",{class:"mb-2"},"Buttons"),t("hr")],-1),i=t("section",{class:"body column gap-5"},[t("button",null,"A standard button"),t("button",{disabled:""},"A disabled standard button"),t("button",{class:"no-border"},"A button without a border"),t("button",{class:"no-border",disabled:""},"A disabled button without a border"),t("button",{class:"no-border outline-hover"},"A button with only an outline on hover"),t("button",{class:"no-border outline-hover",disabled:""}," A disabled button with only an outline on hover"),t("button",{class:"link"},"A link button"),t("button",{class:"link",disabled:""},"A disabled link button"),t("button",{class:"link accent"},"An accent colored link button"),t("button",{class:"link danger"},"A danger colored link button"),t("button",{class:"link accent",disabled:""},"A disabled colored link button"),t("button",{class:"primary"},"A button with primary color"),t("button",{class:"accent"},"A button with accent color"),t("button",{class:"contrast"},"A button with contrast color"),t("button",{class:"danger"},"A button with danger color"),t("button",{class:"danger",disabled:""},"A disabled colored button"),t("div",null,[t("p",{class:"mb-1"},"Icon button"),t("button",{class:"icon"},[t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-chevron-right"},[t("path",{d:"m9 18 6-6-6-6"})])])]),t("div",null,[t("p",{class:"mb-1"},"Disabled icon button"),t("button",{class:"icon",disabled:""},[t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-chevron-right"},[t("path",{d:"m9 18 6-6-6-6"})])])])],-1),u=` diff --git a/docs/assets/colors-JgMxzMEd.js b/docs/assets/colors-dq5Vqs6v.js similarity index 96% rename from docs/assets/colors-JgMxzMEd.js rename to docs/assets/colors-dq5Vqs6v.js index f09432e..03cc70f 100644 --- a/docs/assets/colors-JgMxzMEd.js +++ b/docs/assets/colors-dq5Vqs6v.js @@ -1 +1 @@ -import{C as t}from"./Card-ptuzLIBJ.js";import{h as a,w as n,o as s,d as l}from"./index-9HWLB3Yh.js";const c=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Colors"),l("hr")]),l("section",null,[l("table",{class:"no-hover"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Result")])]),l("tbody",null,[l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Background")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-gray-light")]),l("td",null,[l("div",{class:"bg-gray-light p-1 px-3"},"light grey background")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-gray ")]),l("td",null,[l("div",{class:"bg-gray p-1 px-3"},"grey background")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-gray-dark ")]),l("td",null,[l("div",{class:"bg-gray-dark p-1 px-3"},"dark grey background")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-black ")]),l("td",null,[l("div",{class:"bg-black p-1 px-3"},"black background with auto color adjustment")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-white ")]),l("td",null,[l("div",{class:"bg-white p-1 px-3"},"white background")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-primary ")]),l("td",null,[l("div",{class:"bg-primary p-1 px-3"},"primary background with auto color adjustment")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-accent ")]),l("td",null,[l("div",{class:"bg-accent p-1 px-3"},"accent background with auto color adjustment")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-danger ")]),l("td",null,[l("div",{class:"bg-danger p-1 px-3"},"danger background with auto color adjustment")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-error ")]),l("td",null,[l("div",{class:"bg-error p-1 px-3"},"error background with auto color adjustment")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-warning ")]),l("td",null,[l("div",{class:"bg-warning p-1 px-3"},"warning background with auto color adjustment")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-success ")]),l("td",null,[l("div",{class:"bg-success p-1 px-3"},"success background with auto color adjustment")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-transparent ")]),l("td",null,[l("div",{class:"bg-success"},[l("button",{class:"bg-transparent"}," A button with a transparent background, making it look green ")])])]),l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Text")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"text-black ")]),l("td",null,[l("div",{class:"bg-primary text-black p-1 px-3"},"black text")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"text-white ")]),l("td",null,[l("div",{class:"bg-black text-white p-1 px-3"},"white text")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"text-primary ")]),l("td",null,[l("div",{class:"text-primary p-1 px-3"},"primary text")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"text-accent ")]),l("td",null,[l("div",{class:"bg-black text-accent p-1 px-3"},"accent text")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"text-danger ")]),l("td",null,[l("div",{class:"bg-accent text-danger p-1 px-3"},"danger text")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"text-success ")]),l("td",null,[l("div",{class:"text-success p-1 px-3"},"success text")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"text-gray ")]),l("td",null,[l("div",{class:"text-gray p-1 px-3"},"grey text")])])])])])],-1),o={__name:"colors",setup(u){return(e,d)=>(s(),a(t,{class:"column gap-5"},{default:n(()=>[c]),_:1}))}};export{o as default}; +import{C as t}from"./Card-2OCnG6Eh.js";import{h as a,w as n,o as s,d as l}from"./index-Z9theFxX.js";const c=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Colors"),l("hr")]),l("section",null,[l("table",{class:"no-hover"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Result")])]),l("tbody",null,[l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Background")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-gray-light")]),l("td",null,[l("div",{class:"bg-gray-light p-1 px-3"},"light grey background")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-gray ")]),l("td",null,[l("div",{class:"bg-gray p-1 px-3"},"grey background")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-gray-dark ")]),l("td",null,[l("div",{class:"bg-gray-dark p-1 px-3"},"dark grey background")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-black ")]),l("td",null,[l("div",{class:"bg-black p-1 px-3"},"black background with auto color adjustment")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-white ")]),l("td",null,[l("div",{class:"bg-white p-1 px-3"},"white background")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-primary ")]),l("td",null,[l("div",{class:"bg-primary p-1 px-3"},"primary background with auto color adjustment")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-accent ")]),l("td",null,[l("div",{class:"bg-accent p-1 px-3"},"accent background with auto color adjustment")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-danger ")]),l("td",null,[l("div",{class:"bg-danger p-1 px-3"},"danger background with auto color adjustment")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-error ")]),l("td",null,[l("div",{class:"bg-error p-1 px-3"},"error background with auto color adjustment")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-warning ")]),l("td",null,[l("div",{class:"bg-warning p-1 px-3"},"warning background with auto color adjustment")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-success ")]),l("td",null,[l("div",{class:"bg-success p-1 px-3"},"success background with auto color adjustment")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"bg-transparent ")]),l("td",null,[l("div",{class:"bg-success"},[l("button",{class:"bg-transparent"}," A button with a transparent background, making it look green ")])])]),l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Text")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"text-black ")]),l("td",null,[l("div",{class:"bg-primary text-black p-1 px-3"},"black text")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"text-white ")]),l("td",null,[l("div",{class:"bg-black text-white p-1 px-3"},"white text")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"text-primary ")]),l("td",null,[l("div",{class:"text-primary p-1 px-3"},"primary text")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"text-accent ")]),l("td",null,[l("div",{class:"bg-black text-accent p-1 px-3"},"accent text")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"text-danger ")]),l("td",null,[l("div",{class:"bg-accent text-danger p-1 px-3"},"danger text")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"text-success ")]),l("td",null,[l("div",{class:"text-success p-1 px-3"},"success text")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"text-gray ")]),l("td",null,[l("div",{class:"text-gray p-1 px-3"},"grey text")])])])])])],-1),o={__name:"colors",setup(u){return(e,d)=>(s(),a(t,{class:"column gap-5"},{default:n(()=>[c]),_:1}))}};export{o as default}; diff --git a/docs/assets/cursors-YEC-ZQDz.js b/docs/assets/cursors-w9VjsKUQ.js similarity index 93% rename from docs/assets/cursors-YEC-ZQDz.js rename to docs/assets/cursors-w9VjsKUQ.js index 4e2825d..52aba08 100644 --- a/docs/assets/cursors-YEC-ZQDz.js +++ b/docs/assets/cursors-w9VjsKUQ.js @@ -1 +1 @@ -import{C as r}from"./Card-ptuzLIBJ.js";import{h as o,w as s,o as t,d as l}from"./index-9HWLB3Yh.js";const u=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Colors"),l("hr")]),l("section",null,[l("table",{class:"no-hover"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Result")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",{class:"language-html"},"cursor-not-allowed")]),l("td",null,[l("div",{class:"border p-1 px-3 cursor-not-allowed"},"Hover me, cursor turns to not allowed")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"cursor-pointer")]),l("td",null,[l("div",{class:"border p-1 px-3 cursor-pointer"},"Hover me, cursor turns to pointer")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"cursor-grab")]),l("td",null,[l("div",{class:"border p-1 px-3 cursor-grab"},"Hover me, cursor turns to grab")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"cursor-grabbing")]),l("td",null,[l("div",{class:"border p-1 px-3 cursor-grabbing"},"Hover me, cursor turns to grabbing")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"cursor-zoom-in")]),l("td",null,[l("div",{class:"border p-1 px-3 cursor-zoom-in"}," Hover me, cursor turns to magnifying glass [+] ")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"cursor-zoom-out")]),l("td",null,[l("div",{class:"border p-1 px-3 cursor-zoom-out"}," Hover me, cursor turns to magnifying glass [-] ")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"cursor-wait")]),l("td",null,[l("div",{class:"border p-1 px-3 cursor-wait"},"Hover me, cursor turns to spinner")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"cursor-help")]),l("td",null,[l("div",{class:"border p-1 px-3 cursor-help"},"Hover me, cursor turns to help icon")])])])])])],-1),g={__name:"cursors",setup(n){return(e,a)=>(t(),o(r,{class:"column gap-5"},{default:s(()=>[u]),_:1}))}};export{g as default}; +import{C as r}from"./Card-2OCnG6Eh.js";import{h as o,w as s,o as t,d as l}from"./index-Z9theFxX.js";const u=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Colors"),l("hr")]),l("section",null,[l("table",{class:"no-hover"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Result")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",{class:"language-html"},"cursor-not-allowed")]),l("td",null,[l("div",{class:"border p-1 px-3 cursor-not-allowed"},"Hover me, cursor turns to not allowed")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"cursor-pointer")]),l("td",null,[l("div",{class:"border p-1 px-3 cursor-pointer"},"Hover me, cursor turns to pointer")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"cursor-grab")]),l("td",null,[l("div",{class:"border p-1 px-3 cursor-grab"},"Hover me, cursor turns to grab")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"cursor-grabbing")]),l("td",null,[l("div",{class:"border p-1 px-3 cursor-grabbing"},"Hover me, cursor turns to grabbing")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"cursor-zoom-in")]),l("td",null,[l("div",{class:"border p-1 px-3 cursor-zoom-in"}," Hover me, cursor turns to magnifying glass [+] ")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"cursor-zoom-out")]),l("td",null,[l("div",{class:"border p-1 px-3 cursor-zoom-out"}," Hover me, cursor turns to magnifying glass [-] ")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"cursor-wait")]),l("td",null,[l("div",{class:"border p-1 px-3 cursor-wait"},"Hover me, cursor turns to spinner")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"cursor-help")]),l("td",null,[l("div",{class:"border p-1 px-3 cursor-help"},"Hover me, cursor turns to help icon")])])])])])],-1),g={__name:"cursors",setup(n){return(e,a)=>(t(),o(r,{class:"column gap-5"},{default:s(()=>[u]),_:1}))}};export{g as default}; diff --git a/docs/assets/display-utilities-ygjEOWnD.js b/docs/assets/display-utilities-xZJmg_Yo.js similarity index 91% rename from docs/assets/display-utilities-ygjEOWnD.js rename to docs/assets/display-utilities-xZJmg_Yo.js index 3f5e511..317b6f4 100644 --- a/docs/assets/display-utilities-ygjEOWnD.js +++ b/docs/assets/display-utilities-xZJmg_Yo.js @@ -1 +1 @@ -import{C as t}from"./Card-ptuzLIBJ.js";import{h as n,w as e,o,d as l}from"./index-9HWLB3Yh.js";const u=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Display utility classes"),l("hr")]),l("table",{class:"no-hover"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Description")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"no-scroll")]),l("td",null,"Sets overflow to hidden")]),l("tr",null,[l("td",null,[l("code",null,"text-no-wrap")]),l("td",null,"Sets whitespace to nowrap")]),l("tr",null,[l("td",null,[l("code",null,"text-normal")]),l("td",null,"Sets the font weight to normal")]),l("tr",null,[l("td",null,[l("code",null,"sticky")]),l("td",null,"Sets the current element to sticky with a z-index of 1000 and auto-height")]),l("tr",null,[l("td",null,[l("code",null,"inline-block")]),l("td",null,"Sets display to inline-block")]),l("tr",null,[l("td",null,[l("code",null,"inline-flex")]),l("td",null,"Sets display to inline-flex")]),l("tr",null,[l("td",null,[l("code",null,"block")]),l("td",null,"Sets display to block")]),l("tr",null,[l("td",null,[l("code",null,"fit-content")]),l("td",null,"Sets max width to fit-content")]),l("tr",null,[l("td",null,[l("code",null,"list-style-none")]),l("td",null,"Sets the elements list style to none")]),l("tr",null,[l("td",null,[l("code",null,"hidden")]),l("td",null,"Sets the elements display to none")])])])],-1),r={__name:"display-utilities",setup(s){return(d,i)=>(o(),n(t,{class:"column gap-5"},{default:e(()=>[u]),_:1}))}};export{r as default}; +import{C as t}from"./Card-2OCnG6Eh.js";import{h as n,w as e,o,d as l}from"./index-Z9theFxX.js";const u=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Display utility classes"),l("hr")]),l("table",{class:"no-hover"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Description")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"no-scroll")]),l("td",null,"Sets overflow to hidden")]),l("tr",null,[l("td",null,[l("code",null,"text-no-wrap")]),l("td",null,"Sets whitespace to nowrap")]),l("tr",null,[l("td",null,[l("code",null,"text-normal")]),l("td",null,"Sets the font weight to normal")]),l("tr",null,[l("td",null,[l("code",null,"sticky")]),l("td",null,"Sets the current element to sticky with a z-index of 1000 and auto-height")]),l("tr",null,[l("td",null,[l("code",null,"inline-block")]),l("td",null,"Sets display to inline-block")]),l("tr",null,[l("td",null,[l("code",null,"inline-flex")]),l("td",null,"Sets display to inline-flex")]),l("tr",null,[l("td",null,[l("code",null,"block")]),l("td",null,"Sets display to block")]),l("tr",null,[l("td",null,[l("code",null,"fit-content")]),l("td",null,"Sets max width to fit-content")]),l("tr",null,[l("td",null,[l("code",null,"list-style-none")]),l("td",null,"Sets the elements list style to none")]),l("tr",null,[l("td",null,[l("code",null,"hidden")]),l("td",null,"Sets the elements display to none")])])])],-1),r={__name:"display-utilities",setup(s){return(d,i)=>(o(),n(t,{class:"column gap-5"},{default:e(()=>[u]),_:1}))}};export{r as default}; diff --git a/docs/assets/flex-B4TN6Krl.js b/docs/assets/flex-lpaTbVbh.js similarity index 98% rename from docs/assets/flex-B4TN6Krl.js rename to docs/assets/flex-lpaTbVbh.js index 7067f6f..b516363 100644 --- a/docs/assets/flex-B4TN6Krl.js +++ b/docs/assets/flex-lpaTbVbh.js @@ -1 +1 @@ -import{C as t}from"./Card-ptuzLIBJ.js";import{h as n,w as u,o as s,d as l,b as e}from"./index-9HWLB3Yh.js";const a=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Flex layout classes"),l("hr")]),l("p",null,"Easy to use flex-box shortcuts with additional responsive classes."),l("section",{class:"column overflow-horizontal my-5 gap-5"},[l("section",null,[l("h3",null,"Flex container classes"),l("hr"),l("table",{class:"no-hover"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Result"),l("th",null,"Responsive")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"row")]),l("td",null,"Sets display to flex [row is default] and applies flex-wrap: wrap"),l("td",null,"-")]),l("tr",null,[l("td",null,[l("code",null,"column")]),l("td",null,"Sets display to flex and direction to column"),l("td",null,"-")]),l("tr",null,[l("td",null,[l("code",null,"no-wrap")]),l("td",null,"sets flex-wrap to nowrap"),l("td",null,"-")]),l("tr",null,[l("td",null,[l("code",null,"wrap-reverse")]),l("td",null,"Sets flex-wrap to reverse"),l("td",null,"-")]),l("tr",null,[l("td",null,[l("code",null,"row-reverse")]),l("td",null,"Sets flex-direction to row-reverse"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"column-reverse")]),l("td",null,"Sets flex-direction to column-reverse"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"gap-0")]),l("td",null," Which by default applies 0rem distance between elements [variable --distance-0] "),l("td",null,"-")]),l("tr",null,[l("td",null,[l("code",null,"gap-1")]),l("td",null," Which by default applies 0.5rem distance between elements [variable --distance-1] "),l("td",null,"-")]),l("tr",null,[l("td",null,[l("code",null,"gap-2")]),l("td",null," Which by default applies 1rem distance between elements [variable --distance-2] "),l("td",null,"-")]),l("tr",null,[l("td",null,[l("code",null,"gap-3")]),l("td",null," Which by default applies 1.5rem distance between elements [variable --distance-3] "),l("td",null,"-")]),l("tr",null,[l("td",null,[l("code",null,"gap-4")]),l("td",null," Which by default applies 2rem distance between elements [variable --distance-4] "),l("td",null,"-")]),l("tr",null,[l("td",null,[l("code",null,"gap-5")]),l("td",null," Which by default applies 2.5rem distance between elements [variable --distance-5] "),l("td",null,"-")])])])]),l("section",null,[l("h3",null,"Flex alignment classes"),l("hr"),l("table",{class:"no-hover"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Result")])]),l("tbody",null,[l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Alignment [row: y-axis, column: x-axis]")])]),l("tr",null,[l("td",null,[l("code",null,"align-start")]),l("td",null,"Aligns all items in the container to the start")]),l("tr",null,[l("td",null,[l("code",null,"align-center")]),l("td",null,"Aligns all items in the container to the center")]),l("tr",null,[l("td",null,[l("code",null,"align-end")]),l("td",null,"Aligns all items in the container to the end")]),l("tr",null,[l("td",null,[l("code",null,"align-stretch")]),l("td",null," Stretches items in the container to take up all available space [default flex behaviour] ")]),l("tr",null,[l("td",null,[l("code",null,"align-between")]),l("td",null,[e(" Aligns all items with evenly gaps in between without a gap in the beginning or end"),l("b",null,"*")])]),l("tr",null,[l("td",null,[l("code",null,"align-evenly")]),l("td",null,[e(" Aligns all items with evenly in the available space, also with even gaps in the beginning or end"),l("b",null,"*")])]),l("tr",null,[l("td",null,[l("code",null,"align-around")]),l("td",null,[e("Aligns all items with evenly in the available space"),l("b",null,"*")])]),l("tr",null,[l("td",null,[l("code",null,"self-align-start")]),l("td",null,"Aligns a flex-element to the start")]),l("tr",null,[l("td",null,[l("code",null,"self-align-center")]),l("td",null,"Aligns a flex-element to the center")]),l("tr",null,[l("td",null,[l("code",null,"self-align-end")]),l("td",null,"Aligns a flex-element to the end")]),l("tr",null,[l("td",null,[l("code",null,"self-align-stretch")]),l("td",null,"Stretches a flex-element to take up all available space")]),l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Alignment [row: x-axis, column: y-axis]")])]),l("tr",null,[l("td",null,[l("code",null,"justify-start")]),l("td",null,"Aligns all items in the container to the start")]),l("tr",null,[l("td",null,[l("code",null,"justify-center")]),l("td",null,"Aligns all items in the container to the center")]),l("tr",null,[l("td",null,[l("code",null,"justify-end")]),l("td",null,"Aligns all items in the container to the end")]),l("tr",null,[l("td",null,[l("code",null,"justify-between")]),l("td",null," Aligns all items with evenly gaps in between without a gap in the beginning or end ")]),l("tr",null,[l("td",null,[l("code",null,"justify-evenly")]),l("td",null," Aligns all items with evenly in the available space, also with even gaps in the beginning or end ")]),l("tr",null,[l("td",null,[l("code",null,"justify-around")]),l("td",null," Aligns all items with evenly in the available space, the gaps in the beginning or end are half the size ")])]),l("tfoot",null,[l("b",null,"*"),e(" only applies when wrap is applied and you have multiple lines. , only applies when wrap is applied and you have multiple lines. ")])])]),l("section",null,[l("header",null,[l("h3",null,"Flex height/width classes"),l("hr")]),l("p",null,[e(" The following classes can be used to set the width for row or height when column of a particular flex-element. "),l("small",{class:"block my-3"},[l("b",null,"NB. "),e("These do not work very well with tables, they do not adhere to these constraints")])]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Result"),l("th",null,"Responsive")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"f-100")]),l("td",null,"Sets flex grow to 1, flex shrink to 1 and flex-basis to 100%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-90")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 90%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-80")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 80%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-75")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 75%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-70")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 70%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-60")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 60%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-50")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 50%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-33")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 33.33%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-30")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 30%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-25")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 25%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-20")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 20%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-16")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 16.67%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-10")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 10%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-8")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 8.33%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-auto")]),l("td",null," Sets flex grow to 1, flex shrink to 1, flex-basis to auto, min-width to auto and max-width to fit-content "),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-fill")]),l("td",null," Sets flex to 1 and width 100% [use this one to let an element take the remaining space] "),l("td",null,".m* / .t* / .d*")])])])]),l("section",null,[l("header",null,[l("h3",null,"Flex prefixes"),l("hr")]),l("p",null,"Responsive prefixes that can be used which are applied on different screensizes."),l("table",{class:"table"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"415px"),l("th",null,"576px"),l("th",null,"768px"),l("th",null,"992px")])]),l("tbody",null,[l("tr",null,[l("td",null,".m*"),l("td",null,"X"),l("td",null,"X"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,".t*"),l("td",null,"-"),l("td",null,"-"),l("td",null,"X"),l("td",null,"X")])]),l("tfoot",null," Example: .mf-100 or .mrow-reverse etc. ")]),l("div",{class:"column my-5"},[l("span",{class:"mb-3"},"Resize the screen to see it in action:"),l("div",{class:"mobile bg-danger p-3"},"Currently the screen is: Mobile"),l("div",{class:"tablet bg-accent p-3"},"Currently the screen is: Tablet"),l("div",{class:"desktop bg-primary p-3"},"Currently the screen is: Desktop")]),l("div",{class:"row"},[l("div",{class:"bg-primary p-2 f-25 tf-50 mf-100"}," Default flex 25, tablet flex 50, mobile flex 100 "),l("div",{class:"bg-accent p-2 f-25 tf-50 mf-100"}," Default flex 25, tablet flex 50, mobile flex 100 "),l("div",{class:"bg-danger p-2 f-25 tf-50 mf-100"}," Default flex 25, tablet flex 50, mobile flex 100 "),l("div",{class:"bg-success p-2 f-25 tf-50 mf-100"}," Default flex 25, tablet flex 50, mobile flex 100 "),l("div",{class:"bg-warning p-2 f-100 tf-50 mf-100"}," Default flex 100, tablet flex 50, mobile flex 100 "),l("div",{class:"bg-error p-2 f-100 tf-50 mf-100"}," Default flex 100, tablet flex 50, mobile flex 100 ")]),l("div",{class:"row trow-reverse mrow-reverse"},[l("div",{class:"bg-primary p-2 f-50"},"First on desktop"),l("div",{class:"bg-success p-2 f-50"},"First on tablet and mobile")])])])],-1),f={__name:"flex",setup(d){return(i,o)=>(s(),n(t,{class:"column gap-5"},{default:u(()=>[a]),_:1}))}};export{f as default}; +import{C as t}from"./Card-2OCnG6Eh.js";import{h as n,w as u,o as s,d as l,b as e}from"./index-Z9theFxX.js";const a=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Flex layout classes"),l("hr")]),l("p",null,"Easy to use flex-box shortcuts with additional responsive classes."),l("section",{class:"column overflow-horizontal my-5 gap-5"},[l("section",null,[l("h3",null,"Flex container classes"),l("hr"),l("table",{class:"no-hover"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Result"),l("th",null,"Responsive")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"row")]),l("td",null,"Sets display to flex [row is default] and applies flex-wrap: wrap"),l("td",null,"-")]),l("tr",null,[l("td",null,[l("code",null,"column")]),l("td",null,"Sets display to flex and direction to column"),l("td",null,"-")]),l("tr",null,[l("td",null,[l("code",null,"no-wrap")]),l("td",null,"sets flex-wrap to nowrap"),l("td",null,"-")]),l("tr",null,[l("td",null,[l("code",null,"wrap-reverse")]),l("td",null,"Sets flex-wrap to reverse"),l("td",null,"-")]),l("tr",null,[l("td",null,[l("code",null,"row-reverse")]),l("td",null,"Sets flex-direction to row-reverse"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"column-reverse")]),l("td",null,"Sets flex-direction to column-reverse"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"gap-0")]),l("td",null," Which by default applies 0rem distance between elements [variable --distance-0] "),l("td",null,"-")]),l("tr",null,[l("td",null,[l("code",null,"gap-1")]),l("td",null," Which by default applies 0.5rem distance between elements [variable --distance-1] "),l("td",null,"-")]),l("tr",null,[l("td",null,[l("code",null,"gap-2")]),l("td",null," Which by default applies 1rem distance between elements [variable --distance-2] "),l("td",null,"-")]),l("tr",null,[l("td",null,[l("code",null,"gap-3")]),l("td",null," Which by default applies 1.5rem distance between elements [variable --distance-3] "),l("td",null,"-")]),l("tr",null,[l("td",null,[l("code",null,"gap-4")]),l("td",null," Which by default applies 2rem distance between elements [variable --distance-4] "),l("td",null,"-")]),l("tr",null,[l("td",null,[l("code",null,"gap-5")]),l("td",null," Which by default applies 2.5rem distance between elements [variable --distance-5] "),l("td",null,"-")])])])]),l("section",null,[l("h3",null,"Flex alignment classes"),l("hr"),l("table",{class:"no-hover"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Result")])]),l("tbody",null,[l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Alignment [row: y-axis, column: x-axis]")])]),l("tr",null,[l("td",null,[l("code",null,"align-start")]),l("td",null,"Aligns all items in the container to the start")]),l("tr",null,[l("td",null,[l("code",null,"align-center")]),l("td",null,"Aligns all items in the container to the center")]),l("tr",null,[l("td",null,[l("code",null,"align-end")]),l("td",null,"Aligns all items in the container to the end")]),l("tr",null,[l("td",null,[l("code",null,"align-stretch")]),l("td",null," Stretches items in the container to take up all available space [default flex behaviour] ")]),l("tr",null,[l("td",null,[l("code",null,"align-between")]),l("td",null,[e(" Aligns all items with evenly gaps in between without a gap in the beginning or end"),l("b",null,"*")])]),l("tr",null,[l("td",null,[l("code",null,"align-evenly")]),l("td",null,[e(" Aligns all items with evenly in the available space, also with even gaps in the beginning or end"),l("b",null,"*")])]),l("tr",null,[l("td",null,[l("code",null,"align-around")]),l("td",null,[e("Aligns all items with evenly in the available space"),l("b",null,"*")])]),l("tr",null,[l("td",null,[l("code",null,"self-align-start")]),l("td",null,"Aligns a flex-element to the start")]),l("tr",null,[l("td",null,[l("code",null,"self-align-center")]),l("td",null,"Aligns a flex-element to the center")]),l("tr",null,[l("td",null,[l("code",null,"self-align-end")]),l("td",null,"Aligns a flex-element to the end")]),l("tr",null,[l("td",null,[l("code",null,"self-align-stretch")]),l("td",null,"Stretches a flex-element to take up all available space")]),l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Alignment [row: x-axis, column: y-axis]")])]),l("tr",null,[l("td",null,[l("code",null,"justify-start")]),l("td",null,"Aligns all items in the container to the start")]),l("tr",null,[l("td",null,[l("code",null,"justify-center")]),l("td",null,"Aligns all items in the container to the center")]),l("tr",null,[l("td",null,[l("code",null,"justify-end")]),l("td",null,"Aligns all items in the container to the end")]),l("tr",null,[l("td",null,[l("code",null,"justify-between")]),l("td",null," Aligns all items with evenly gaps in between without a gap in the beginning or end ")]),l("tr",null,[l("td",null,[l("code",null,"justify-evenly")]),l("td",null," Aligns all items with evenly in the available space, also with even gaps in the beginning or end ")]),l("tr",null,[l("td",null,[l("code",null,"justify-around")]),l("td",null," Aligns all items with evenly in the available space, the gaps in the beginning or end are half the size ")])]),l("tfoot",null,[l("b",null,"*"),e(" only applies when wrap is applied and you have multiple lines. , only applies when wrap is applied and you have multiple lines. ")])])]),l("section",null,[l("header",null,[l("h3",null,"Flex height/width classes"),l("hr")]),l("p",null,[e(" The following classes can be used to set the width for row or height when column of a particular flex-element. "),l("small",{class:"block my-3"},[l("b",null,"NB. "),e("These do not work very well with tables, they do not adhere to these constraints")])]),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Result"),l("th",null,"Responsive")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"f-100")]),l("td",null,"Sets flex grow to 1, flex shrink to 1 and flex-basis to 100%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-90")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 90%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-80")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 80%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-75")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 75%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-70")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 70%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-60")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 60%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-50")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 50%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-33")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 33.33%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-30")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 30%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-25")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 25%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-20")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 20%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-16")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 16.67%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-10")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 10%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-8")]),l("td",null,"Sets flex grow to 0, flex shrink to 0 and flex-basis to 8.33%"),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-auto")]),l("td",null," Sets flex grow to 1, flex shrink to 1, flex-basis to auto, min-width to auto and max-width to fit-content "),l("td",null,".m* / .t* / .d*")]),l("tr",null,[l("td",null,[l("code",null,"f-fill")]),l("td",null," Sets flex to 1 and width 100% [use this one to let an element take the remaining space] "),l("td",null,".m* / .t* / .d*")])])])]),l("section",null,[l("header",null,[l("h3",null,"Flex prefixes"),l("hr")]),l("p",null,"Responsive prefixes that can be used which are applied on different screensizes."),l("table",{class:"table"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"415px"),l("th",null,"576px"),l("th",null,"768px"),l("th",null,"992px")])]),l("tbody",null,[l("tr",null,[l("td",null,".m*"),l("td",null,"X"),l("td",null,"X"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,".t*"),l("td",null,"-"),l("td",null,"-"),l("td",null,"X"),l("td",null,"X")])]),l("tfoot",null," Example: .mf-100 or .mrow-reverse etc. ")]),l("div",{class:"column my-5"},[l("span",{class:"mb-3"},"Resize the screen to see it in action:"),l("div",{class:"mobile bg-danger p-3"},"Currently the screen is: Mobile"),l("div",{class:"tablet bg-accent p-3"},"Currently the screen is: Tablet"),l("div",{class:"desktop bg-primary p-3"},"Currently the screen is: Desktop")]),l("div",{class:"row"},[l("div",{class:"bg-primary p-2 f-25 tf-50 mf-100"}," Default flex 25, tablet flex 50, mobile flex 100 "),l("div",{class:"bg-accent p-2 f-25 tf-50 mf-100"}," Default flex 25, tablet flex 50, mobile flex 100 "),l("div",{class:"bg-danger p-2 f-25 tf-50 mf-100"}," Default flex 25, tablet flex 50, mobile flex 100 "),l("div",{class:"bg-success p-2 f-25 tf-50 mf-100"}," Default flex 25, tablet flex 50, mobile flex 100 "),l("div",{class:"bg-warning p-2 f-100 tf-50 mf-100"}," Default flex 100, tablet flex 50, mobile flex 100 "),l("div",{class:"bg-error p-2 f-100 tf-50 mf-100"}," Default flex 100, tablet flex 50, mobile flex 100 ")]),l("div",{class:"row trow-reverse mrow-reverse"},[l("div",{class:"bg-primary p-2 f-50"},"First on desktop"),l("div",{class:"bg-success p-2 f-50"},"First on tablet and mobile")])])])],-1),f={__name:"flex",setup(d){return(i,o)=>(s(),n(t,{class:"column gap-5"},{default:u(()=>[a]),_:1}))}};export{f as default}; diff --git a/docs/assets/flightkit-draggable-C4d3H226.js b/docs/assets/flightkit-draggable-XzSxuq67.js similarity index 93% rename from docs/assets/flightkit-draggable-C4d3H226.js rename to docs/assets/flightkit-draggable-XzSxuq67.js index fd6bfa8..01c7f9a 100644 --- a/docs/assets/flightkit-draggable-C4d3H226.js +++ b/docs/assets/flightkit-draggable-XzSxuq67.js @@ -1 +1 @@ -import{C as e}from"./Card-ptuzLIBJ.js";import{i as n,h as a,w as o,o as d,d as t,b as l,t as u}from"./index-9HWLB3Yh.js";const s=t("header",null,[t("h1",{class:"mb-2"},"Flightkit Draggable"),t("hr")],-1),r=t("div",{class:"column gap-5"},[t("section",{class:"column gap-3"},[t("div",null,[t("h3",{class:"mb-2"},"Using the draggable"),t("hr"),t("table",{class:"property-table"},[t("thead",null,[t("tr",null,[t("th",null,"Attribute"),t("th",null,"Function"),t("th",null,"How to use")])]),t("tbody",null,[t("tr",null,[t("td",null,[t("code",null,'top=""')]),t("td",null,"Sets the top position of the element"),t("td",null,[l("You need to add digits and the unit. "),t("br"),t("b",null,"E.G."),l(' top="40%"')])]),t("tr",null,[t("td",null,[t("code",null,'left=""')]),t("td",null,"Sets the left position of the element"),t("td",null,[l("You need to add digits and the unit. "),t("br"),t("b",null,"E.G."),l(' left="50%"')])]),t("tr",null,[t("td",null,[t("code",null,'center=""')]),t("td",null,"Sets the draggable to the center."),t("td",null," Just adding the attribute is all you need. You can also override top / left if you want, by adding the attributes. ")]),t("tr",null,[t("td",null,[t("code",null,'zIndex=""')]),t("td",null,"Sets the zIndex of the draggable."),t("td",null,[l("it will set the element.style.zIndex to the number you provided. "),t("b",null,"E.G."),l(' zIndex="2000"')])]),t("tr",null,[t("td",null,[t("code",null,'handle="{YourId}"')]),t("td",null,"If you want to have a specific part of your draggable to enable drag."),t("td",null,"It will use the id as a selector for the drag event.")])])])])])],-1),i=" ",f={__name:"flightkit-draggable",setup(c){return n(()=>{Prism.highlightAll()}),(h,g)=>(d(),a(e,{class:"column gap-5"},{default:o(()=>[t("article",null,[s,t("div",{class:"mb-3"},[t("p",null,[l(" The component is "),t("code",null,u(i))])]),r])]),_:1}))}};export{f as default}; +import{C as e}from"./Card-2OCnG6Eh.js";import{i as n,h as a,w as o,o as d,d as t,b as l,t as u}from"./index-Z9theFxX.js";const s=t("header",null,[t("h1",{class:"mb-2"},"Flightkit Draggable"),t("hr")],-1),r=t("div",{class:"column gap-5"},[t("section",{class:"column gap-3"},[t("div",null,[t("h3",{class:"mb-2"},"Using the draggable"),t("hr"),t("table",{class:"property-table"},[t("thead",null,[t("tr",null,[t("th",null,"Attribute"),t("th",null,"Function"),t("th",null,"How to use")])]),t("tbody",null,[t("tr",null,[t("td",null,[t("code",null,'top=""')]),t("td",null,"Sets the top position of the element"),t("td",null,[l("You need to add digits and the unit. "),t("br"),t("b",null,"E.G."),l(' top="40%"')])]),t("tr",null,[t("td",null,[t("code",null,'left=""')]),t("td",null,"Sets the left position of the element"),t("td",null,[l("You need to add digits and the unit. "),t("br"),t("b",null,"E.G."),l(' left="50%"')])]),t("tr",null,[t("td",null,[t("code",null,'center=""')]),t("td",null,"Sets the draggable to the center."),t("td",null," Just adding the attribute is all you need. You can also override top / left if you want, by adding the attributes. ")]),t("tr",null,[t("td",null,[t("code",null,'zIndex=""')]),t("td",null,"Sets the zIndex of the draggable."),t("td",null,[l("it will set the element.style.zIndex to the number you provided. "),t("b",null,"E.G."),l(' zIndex="2000"')])]),t("tr",null,[t("td",null,[t("code",null,'handle="{YourId}"')]),t("td",null,"If you want to have a specific part of your draggable to enable drag."),t("td",null,"It will use the id as a selector for the drag event.")])])])])])],-1),i=" ",f={__name:"flightkit-draggable",setup(c){return n(()=>{Prism.highlightAll()}),(h,g)=>(d(),a(e,{class:"column gap-5"},{default:o(()=>[t("article",null,[s,t("div",{class:"mb-3"},[t("p",null,[l(" The component is "),t("code",null,u(i))])]),r])]),_:1}))}};export{f as default}; diff --git a/docs/assets/flightkit-dropdown-kjjHl9No.js b/docs/assets/flightkit-dropdown-iPX8F9z6.js similarity index 94% rename from docs/assets/flightkit-dropdown-kjjHl9No.js rename to docs/assets/flightkit-dropdown-iPX8F9z6.js index b806c1d..87ad494 100644 --- a/docs/assets/flightkit-dropdown-kjjHl9No.js +++ b/docs/assets/flightkit-dropdown-iPX8F9z6.js @@ -1,4 +1,4 @@ -import{C as n}from"./Card-ptuzLIBJ.js";import{i as o,h as s,w as a,o as d,d as t,b as l,t as e}from"./index-9HWLB3Yh.js";const r=t("header",null,[t("h1",{class:"mb-2"},"Flightkit Dropdown"),t("hr")],-1),i=t("h3",{class:"mb-2"},"Using the dropdown",-1),c=t("hr",null,null,-1),h=t("b",null,"E.G.",-1),p=t("table",{class:"property-table"},[t("thead",null,[t("tr",null,[t("th",null,"Attribute"),t("th",null,"Effect")])]),t("tbody",null,[t("tr",null,[t("td",null,[t("code",null,'text="My dropdown title"')]),t("td",null,"Text to show on the button.")]),t("tr",null,[t("td",null,[t("code",null,"right")]),t("td",null,"Aligns the dropdown drawer to the right (overflows to the left)")]),t("tr",null,[t("td",null,[t("code",null,'drawer-width="30rem"')]),t("td",null,"Customizes the drawer width, you need to implement the unit too.")])])],-1),u=t("section",null,[t("h3",{class:"mb-2"},"Using the dropdown"),t("hr"),t("div",{class:"row justify-between px-5"},[t("flk-dropdown",{class:"primary",text:"Left dropdown","drawer-width":"20rem"},[t("template",null,[t("div",{class:"p-2 border border-light"},"Dropdown on the left")])]),t("flk-dropdown",{text:"Right dropdown",right:""},[t("template",null,[t("div",{class:"p-5"},"Dropdown on the right")])])])],-1),m=t("h3",null,"Example",-1),w=t("hr",null,null,-1),_=" ",g="",b=` ",g="",b=`{Prism.highlightAll()});function n(){document.getElementById("foo").openModal()}return(g,_)=>(u(),s(o,{class:"column gap-5"},{default:d(()=>[l("article",null,[c,l("div",{class:"mb-3"},[l("p",{class:"column gap-2 align-start"},[e(" The component is "),l("code",null,t(p)),e(" Dependencies: "),l("code",null,t(f))])]),l("div",{class:"column gap-5"},[i,l("section",null,[h,r,l("button",{onClick:n},"Open modal"),m])])])]),_:1}))}};export{k as default}; +import{C as o}from"./Card-2OCnG6Eh.js";import{i as a,h as s,w as d,o as u,d as l,b as e,t}from"./index-Z9theFxX.js";const c=l("header",null,[l("h1",{class:"mb-2"},"Flightkit Modal"),l("hr")],-1),i=l("section",{class:"column gap-3"},[l("div",null,[l("h3",{class:"mb-2"},"Using the modal"),l("hr"),l("table",{class:"property-table mb-5"},[l("thead",null,[l("tr",null,[l("th",null,"Attribute"),l("th",null,"Function"),l("th",null,"How to use")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,'title=""')]),l("td",null,"Sets the title of the modal header"),l("td",null,[l("b",null,"E.G."),e(' title="my modal"')])]),l("tr",null,[l("td",null,[l("code",null,'header-class=""')]),l("td",null,"Adds classes to the header, add multiple with a space"),l("td",null,[l("b",null,"E.G."),e(' header-class="foo bar baz"')])])])]),l("span",{class:"inline-block mb-3"},[e(" When you have the element selected like "),l("code",null,"let myModal = document.getElementById('myModal')"),e(" you can use the following functions: ")]),l("table",{class:"property-table"},[l("thead",null,[l("tr",null,[l("th",null,"Function"),l("th",null,"Parameters / Events"),l("th",null,"Effect")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"myModal.openModal(reset = true)")]),l("td",null,[e(" If reset is "),l("i",null,"true"),e(" the modal will be reset to the center. If false it will appear where the user left it. ")]),l("td",null,"Shows the modal")]),l("tr",null,[l("td",null,[l("code",null,"myModal.closeModal()")]),l("td",null,[e(" Emits the event 'hide' with the "),l("code",null,"{ hidden: true, id: {id} }"),e(" parameters ")]),l("td",null,"Closes the modal")])])])])],-1),h=l("h3",{class:"mb-2"},"Using the modal",-1),r=l("hr",null,null,-1),m=l("flk-modal",{id:"foo",title:"My Modal"},[l("div",{class:"p-1"},[l("h1",null,"Modal title"),l("hr"),l("section",null,"Hello Modal!")])],-1),p=" ",f=" ",k={__name:"flightkit-modal",setup(b){a(()=>{Prism.highlightAll()});function n(){document.getElementById("foo").openModal()}return(g,_)=>(u(),s(o,{class:"column gap-5"},{default:d(()=>[l("article",null,[c,l("div",{class:"mb-3"},[l("p",{class:"column gap-2 align-start"},[e(" The component is "),l("code",null,t(p)),e(" Dependencies: "),l("code",null,t(f))])]),l("div",{class:"column gap-5"},[i,l("section",null,[h,r,l("button",{onClick:n},"Open modal"),m])])])]),_:1}))}};export{k as default}; diff --git a/docs/assets/flightkit-table-TTdG-HNF.js b/docs/assets/flightkit-table-KFKGJLsB.js similarity index 97% rename from docs/assets/flightkit-table-TTdG-HNF.js rename to docs/assets/flightkit-table-KFKGJLsB.js index 53c38eb..9d3d104 100644 --- a/docs/assets/flightkit-table-TTdG-HNF.js +++ b/docs/assets/flightkit-table-KFKGJLsB.js @@ -1,4 +1,4 @@ -import{C as h}from"./Card-ptuzLIBJ.js";import{i as _,r as l,h as b,w as p,o as c,d as e,b as t,t as a,c as f,u as r}from"./index-9HWLB3Yh.js";const d=[{scientific_name:"Ardea cinerea",common_name:"Grey heron"},{scientific_name:"Ardea herodias",common_name:"Great blue heron"},{scientific_name:"Ardea cocoi",common_name:"Cocoi heron"},{scientific_name:"Ardea pacifica",common_name:"White-necked heron"},{scientific_name:"Ardea melanocephala",common_name:"Black-headed heron"},{scientific_name:"Ardea humbloti",common_name:"Humblot's heron"},{scientific_name:"Ardea insignis",common_name:"White-bellied heron"},{scientific_name:"Ardea sumatrana",common_name:"Great-billed heron"},{scientific_name:"Ardea goliath",common_name:"Goliath heron"},{scientific_name:"Ardea purpurea",common_name:"Purple heron"},{scientific_name:"Ardea alba",common_name:"Great egret, great white heron"},{scientific_name:"Ardea brachyrhyncha",common_name:"Yellow-billed egret"},{scientific_name:"Ardea intermedia",common_name:"Medium egret"},{scientific_name:"Ardea plumifera",common_name:"Plumed egret"}],g=e("header",null,[e("h1",{class:"mb-2"},"Flightkit Table"),e("hr")],-1),v={class:"column gap-5"},y=e("h3",{class:"mb-2"},"Using the table as a vanilla webcomponent",-1),w=e("hr",null,null,-1),k=e("table",{class:"property-table"},[e("thead",null,[e("tr",null,[e("th",null,"Attribute"),e("th",null,"Function"),e("th",null,"How to use")])]),e("tbody",null,[e("tr",null,[e("td",null,[e("code",null,'contents=""')]),e("td",null,"Used to set an array of objects to be displayed"),e("td",null,[t(" Either stringify a JSON object, or use the "),e("code",null,"setContents()"),t(" on the element, like show above ")])]),e("tr",null,[e("td",null,[e("code",null,'columns=""')]),e("td",null,"Used to set which columns there needs to be displayed and the order."),e("td",null,[t(" A comma separated string with the property names. "),e("br"),e("b",null,"E.G."),t(' "scientific_name,common_name" ')])]),e("tr",null,[e("td",null,[e("code",null,'order=""')]),e("td",null," Used to set the ordering of the rows. You can always click on one or more headers to order the table "),e("td",null,[t(" A comma separated string with the property names a 'pipe': | and the ordering. Defaults to ascending."),e("br"),e("b",null,"E.G."),t(' "scientific_name|asc,common_name|desc" or "scientific_name,common_name" ')])]),e("tr",null,[e("td",null,[e("code",null,'filter=""')]),e("td",null,"Used to do a global search on the table."),e("td",null,[t(" a string that will be used to filter the table "),e("br"),e("b",null,"E.G."),t(' "cinerea" ')])]),e("tr",null,[e("td",null,[e("code",null,'selection-property=""')]),e("td",null," When it is assigned, it will use the value to be a unique identifier for creating a selection. It will render checkboxes at each table row and a select all on the table head "),e("td",null,[t(" a property name that has a unique value per row in a table. Emits the event 'select' on checkbox change. On the event parameter, there is a property "),e("i",null,"detail"),t(" which has a property "),e("i",null,"selection"),t(" with the objects you selected"),e("b",null,"E.G."),t(' selection-property="id" ')])]),e("tr",null,[e("td",null,[e("code",null,"e-{event}")]),e("td",null,"builtin event handling."),e("td",null,[t(" Will trigger on the event "),e("b",null,"E.G."),t(),e("code",null,'e-click="myFunction"'),t(" will trigger the global function myEvent when clicked. ")])])])],-1),A=e("h2",{class:"mb-2"},"Example table",-1),E=e("hr",null,null,-1),G={class:"column gap-3 mb-3"},x=e("i",null,[e("b",null,"With filter:")],-1),S=["filter","contents"],C={class:"column gap-3"},j=e("i",null,[e("b",null,"With selection-property:")],-1),B={class:"row justify-between"},T=["contents"],W=e("span",{class:"mr-5"},"Example function:",-1),N=e("code",{class:"language-javascript"}," function handleSelect(event) { console.log(event.detail.selection) } ",-1),U={class:"border p-5"},F={class:"language-javascript"},O=" ",D=`window.onload = () => { +import{C as h}from"./Card-2OCnG6Eh.js";import{i as _,r as l,h as b,w as p,o as c,d as e,b as t,t as a,c as f,u as r}from"./index-Z9theFxX.js";const d=[{scientific_name:"Ardea cinerea",common_name:"Grey heron"},{scientific_name:"Ardea herodias",common_name:"Great blue heron"},{scientific_name:"Ardea cocoi",common_name:"Cocoi heron"},{scientific_name:"Ardea pacifica",common_name:"White-necked heron"},{scientific_name:"Ardea melanocephala",common_name:"Black-headed heron"},{scientific_name:"Ardea humbloti",common_name:"Humblot's heron"},{scientific_name:"Ardea insignis",common_name:"White-bellied heron"},{scientific_name:"Ardea sumatrana",common_name:"Great-billed heron"},{scientific_name:"Ardea goliath",common_name:"Goliath heron"},{scientific_name:"Ardea purpurea",common_name:"Purple heron"},{scientific_name:"Ardea alba",common_name:"Great egret, great white heron"},{scientific_name:"Ardea brachyrhyncha",common_name:"Yellow-billed egret"},{scientific_name:"Ardea intermedia",common_name:"Medium egret"},{scientific_name:"Ardea plumifera",common_name:"Plumed egret"}],g=e("header",null,[e("h1",{class:"mb-2"},"Flightkit Table"),e("hr")],-1),v={class:"column gap-5"},y=e("h3",{class:"mb-2"},"Using the table as a vanilla webcomponent",-1),w=e("hr",null,null,-1),k=e("table",{class:"property-table"},[e("thead",null,[e("tr",null,[e("th",null,"Attribute"),e("th",null,"Function"),e("th",null,"How to use")])]),e("tbody",null,[e("tr",null,[e("td",null,[e("code",null,'contents=""')]),e("td",null,"Used to set an array of objects to be displayed"),e("td",null,[t(" Either stringify a JSON object, or use the "),e("code",null,"setContents()"),t(" on the element, like show above ")])]),e("tr",null,[e("td",null,[e("code",null,'columns=""')]),e("td",null,"Used to set which columns there needs to be displayed and the order."),e("td",null,[t(" A comma separated string with the property names. "),e("br"),e("b",null,"E.G."),t(' "scientific_name,common_name" ')])]),e("tr",null,[e("td",null,[e("code",null,'order=""')]),e("td",null," Used to set the ordering of the rows. You can always click on one or more headers to order the table "),e("td",null,[t(" A comma separated string with the property names a 'pipe': | and the ordering. Defaults to ascending."),e("br"),e("b",null,"E.G."),t(' "scientific_name|asc,common_name|desc" or "scientific_name,common_name" ')])]),e("tr",null,[e("td",null,[e("code",null,'filter=""')]),e("td",null,"Used to do a global search on the table."),e("td",null,[t(" a string that will be used to filter the table "),e("br"),e("b",null,"E.G."),t(' "cinerea" ')])]),e("tr",null,[e("td",null,[e("code",null,'selection-property=""')]),e("td",null," When it is assigned, it will use the value to be a unique identifier for creating a selection. It will render checkboxes at each table row and a select all on the table head "),e("td",null,[t(" a property name that has a unique value per row in a table. Emits the event 'select' on checkbox change. On the event parameter, there is a property "),e("i",null,"detail"),t(" which has a property "),e("i",null,"selection"),t(" with the objects you selected"),e("b",null,"E.G."),t(' selection-property="id" ')])]),e("tr",null,[e("td",null,[e("code",null,"e-{event}")]),e("td",null,"builtin event handling."),e("td",null,[t(" Will trigger on the event "),e("b",null,"E.G."),t(),e("code",null,'e-click="myFunction"'),t(" will trigger the global function myEvent when clicked. ")])])])],-1),A=e("h2",{class:"mb-2"},"Example table",-1),E=e("hr",null,null,-1),G={class:"column gap-3 mb-3"},x=e("i",null,[e("b",null,"With filter:")],-1),S=["filter","contents"],C={class:"column gap-3"},j=e("i",null,[e("b",null,"With selection-property:")],-1),B={class:"row justify-between"},T=["contents"],W=e("span",{class:"mr-5"},"Example function:",-1),N=e("code",{class:"language-javascript"}," function handleSelect(event) { console.log(event.detail.selection) } ",-1),U={class:"border p-5"},F={class:"language-javascript"},O=" ",D=`window.onload = () => { let ftTable = document.getElementById('ft-table'); ftTable.setContents(ardeaSet); ftTable.init(); diff --git a/docs/assets/icons-OcuTryEd.js b/docs/assets/icons-5NyxgMlK.js similarity index 97% rename from docs/assets/icons-OcuTryEd.js rename to docs/assets/icons-5NyxgMlK.js index 2ea8737..9fdfe5f 100644 --- a/docs/assets/icons-OcuTryEd.js +++ b/docs/assets/icons-5NyxgMlK.js @@ -1 +1 @@ -import{C as t}from"./Card-ptuzLIBJ.js";import{h as n,w as o,o as i,d as l,b as e}from"./index-9HWLB3Yh.js";const s=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Icons"),l("hr")]),l("p",null,[e(" For icons Avian CSS relies on "),l("a",{href:"https://lucide.dev/guide/",target:"_blank"},"Lucide"),e(". Here are classes which you can use to color icons. "),l("br"),l("small",null,"* you can also use any text coloring class")]),l("section",null,[l("table",{class:"no-hover"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Result")])]),l("tbody",null,[l("tr",null,[l("td",{colspan:"2"},"Color classes")]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"icon-gray")]),l("td",null,[l("div",{class:"pt-1 px-1 fit-content"},[l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-coffee icon-gray"},[l("path",{d:"M17 8h1a4 4 0 1 1 0 8h-1"}),l("path",{d:"M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"}),l("line",{x1:"6",x2:"6",y1:"2",y2:"4"}),l("line",{x1:"10",x2:"10",y1:"2",y2:"4"}),l("line",{x1:"14",x2:"14",y1:"2",y2:"4"})])])])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"icon-gray-dark")]),l("td",null,[l("div",{class:"pt-1 px-1 fit-content"},[l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-coffee icon-gray-dark"},[l("path",{d:"M17 8h1a4 4 0 1 1 0 8h-1"}),l("path",{d:"M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"}),l("line",{x1:"6",x2:"6",y1:"2",y2:"4"}),l("line",{x1:"10",x2:"10",y1:"2",y2:"4"}),l("line",{x1:"14",x2:"14",y1:"2",y2:"4"})])])])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"icon-primary")]),l("td",null,[l("div",{class:"pt-1 px-1 fit-content"},[l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-coffee icon-primary"},[l("path",{d:"M17 8h1a4 4 0 1 1 0 8h-1"}),l("path",{d:"M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"}),l("line",{x1:"6",x2:"6",y1:"2",y2:"4"}),l("line",{x1:"10",x2:"10",y1:"2",y2:"4"}),l("line",{x1:"14",x2:"14",y1:"2",y2:"4"})])])])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"icon-accent")]),l("td",null,[l("div",{class:"pt-1 px-1 fit-content"},[l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-coffee icon-accent"},[l("path",{d:"M17 8h1a4 4 0 1 1 0 8h-1"}),l("path",{d:"M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"}),l("line",{x1:"6",x2:"6",y1:"2",y2:"4"}),l("line",{x1:"10",x2:"10",y1:"2",y2:"4"}),l("line",{x1:"14",x2:"14",y1:"2",y2:"4"})])])])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"icon-danger")]),l("td",null,[l("div",{class:"pt-1 px-1 fit-content"},[l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-coffee icon-danger"},[l("path",{d:"M17 8h1a4 4 0 1 1 0 8h-1"}),l("path",{d:"M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"}),l("line",{x1:"6",x2:"6",y1:"2",y2:"4"}),l("line",{x1:"10",x2:"10",y1:"2",y2:"4"}),l("line",{x1:"14",x2:"14",y1:"2",y2:"4"})])])])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"icon-success")]),l("td",null,[l("div",{class:"pt-1 px-1 fit-content"},[l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-coffee icon-success"},[l("path",{d:"M17 8h1a4 4 0 1 1 0 8h-1"}),l("path",{d:"M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"}),l("line",{x1:"6",x2:"6",y1:"2",y2:"4"}),l("line",{x1:"10",x2:"10",y1:"2",y2:"4"}),l("line",{x1:"14",x2:"14",y1:"2",y2:"4"})])])])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"icon-black")]),l("td",null,[l("div",{class:"pt-1 px-1 fit-content"},[l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-coffee icon-black"},[l("path",{d:"M17 8h1a4 4 0 1 1 0 8h-1"}),l("path",{d:"M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"}),l("line",{x1:"6",x2:"6",y1:"2",y2:"4"}),l("line",{x1:"10",x2:"10",y1:"2",y2:"4"}),l("line",{x1:"14",x2:"14",y1:"2",y2:"4"})])])])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"icon-white")]),l("td",null,[l("div",{class:"bg-black pt-1 px-1 fit-content"},[l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-coffee icon-white"},[l("path",{d:"M17 8h1a4 4 0 1 1 0 8h-1"}),l("path",{d:"M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"}),l("line",{x1:"6",x2:"6",y1:"2",y2:"4"}),l("line",{x1:"10",x2:"10",y1:"2",y2:"4"}),l("line",{x1:"14",x2:"14",y1:"2",y2:"4"})])])])])])])])],-1),u={__name:"icons",setup(a){return(c,r)=>(i(),n(t,{class:"column gap-5"},{default:o(()=>[s]),_:1}))}};export{u as default}; +import{C as t}from"./Card-2OCnG6Eh.js";import{h as n,w as o,o as i,d as l,b as e}from"./index-Z9theFxX.js";const s=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Icons"),l("hr")]),l("p",null,[e(" For icons Avian CSS relies on "),l("a",{href:"https://lucide.dev/guide/",target:"_blank"},"Lucide"),e(". Here are classes which you can use to color icons. "),l("br"),l("small",null,"* you can also use any text coloring class")]),l("section",null,[l("table",{class:"no-hover"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Result")])]),l("tbody",null,[l("tr",null,[l("td",{colspan:"2"},"Color classes")]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"icon-gray")]),l("td",null,[l("div",{class:"pt-1 px-1 fit-content"},[l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-coffee icon-gray"},[l("path",{d:"M17 8h1a4 4 0 1 1 0 8h-1"}),l("path",{d:"M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"}),l("line",{x1:"6",x2:"6",y1:"2",y2:"4"}),l("line",{x1:"10",x2:"10",y1:"2",y2:"4"}),l("line",{x1:"14",x2:"14",y1:"2",y2:"4"})])])])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"icon-gray-dark")]),l("td",null,[l("div",{class:"pt-1 px-1 fit-content"},[l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-coffee icon-gray-dark"},[l("path",{d:"M17 8h1a4 4 0 1 1 0 8h-1"}),l("path",{d:"M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"}),l("line",{x1:"6",x2:"6",y1:"2",y2:"4"}),l("line",{x1:"10",x2:"10",y1:"2",y2:"4"}),l("line",{x1:"14",x2:"14",y1:"2",y2:"4"})])])])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"icon-primary")]),l("td",null,[l("div",{class:"pt-1 px-1 fit-content"},[l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-coffee icon-primary"},[l("path",{d:"M17 8h1a4 4 0 1 1 0 8h-1"}),l("path",{d:"M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"}),l("line",{x1:"6",x2:"6",y1:"2",y2:"4"}),l("line",{x1:"10",x2:"10",y1:"2",y2:"4"}),l("line",{x1:"14",x2:"14",y1:"2",y2:"4"})])])])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"icon-accent")]),l("td",null,[l("div",{class:"pt-1 px-1 fit-content"},[l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-coffee icon-accent"},[l("path",{d:"M17 8h1a4 4 0 1 1 0 8h-1"}),l("path",{d:"M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"}),l("line",{x1:"6",x2:"6",y1:"2",y2:"4"}),l("line",{x1:"10",x2:"10",y1:"2",y2:"4"}),l("line",{x1:"14",x2:"14",y1:"2",y2:"4"})])])])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"icon-danger")]),l("td",null,[l("div",{class:"pt-1 px-1 fit-content"},[l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-coffee icon-danger"},[l("path",{d:"M17 8h1a4 4 0 1 1 0 8h-1"}),l("path",{d:"M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"}),l("line",{x1:"6",x2:"6",y1:"2",y2:"4"}),l("line",{x1:"10",x2:"10",y1:"2",y2:"4"}),l("line",{x1:"14",x2:"14",y1:"2",y2:"4"})])])])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"icon-success")]),l("td",null,[l("div",{class:"pt-1 px-1 fit-content"},[l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-coffee icon-success"},[l("path",{d:"M17 8h1a4 4 0 1 1 0 8h-1"}),l("path",{d:"M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"}),l("line",{x1:"6",x2:"6",y1:"2",y2:"4"}),l("line",{x1:"10",x2:"10",y1:"2",y2:"4"}),l("line",{x1:"14",x2:"14",y1:"2",y2:"4"})])])])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"icon-black")]),l("td",null,[l("div",{class:"pt-1 px-1 fit-content"},[l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-coffee icon-black"},[l("path",{d:"M17 8h1a4 4 0 1 1 0 8h-1"}),l("path",{d:"M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"}),l("line",{x1:"6",x2:"6",y1:"2",y2:"4"}),l("line",{x1:"10",x2:"10",y1:"2",y2:"4"}),l("line",{x1:"14",x2:"14",y1:"2",y2:"4"})])])])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"icon-white")]),l("td",null,[l("div",{class:"bg-black pt-1 px-1 fit-content"},[l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"lucide lucide-coffee icon-white"},[l("path",{d:"M17 8h1a4 4 0 1 1 0 8h-1"}),l("path",{d:"M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"}),l("line",{x1:"6",x2:"6",y1:"2",y2:"4"}),l("line",{x1:"10",x2:"10",y1:"2",y2:"4"}),l("line",{x1:"14",x2:"14",y1:"2",y2:"4"})])])])])])])])],-1),u={__name:"icons",setup(a){return(c,r)=>(i(),n(t,{class:"column gap-5"},{default:o(()=>[s]),_:1}))}};export{u as default}; diff --git a/docs/assets/index-6i7skacZ.css b/docs/assets/index-MlhoI1p0.css similarity index 73% rename from docs/assets/index-6i7skacZ.css rename to docs/assets/index-MlhoI1p0.css index 0634e9d..23d6d53 100644 --- a/docs/assets/index-6i7skacZ.css +++ b/docs/assets/index-MlhoI1p0.css @@ -1 +1 @@ -code[class*=language-],pre[class*=language-]{word-wrap:normal;background:0 0;color:#000;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-align:left;text-shadow:0 1px #fff;white-space:pre;word-break:normal;word-spacing:normal}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{background:#b3d4fc;text-shadow:none}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{background:#b3d4fc;text-shadow:none}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{margin:.5em 0;overflow:auto;padding:1em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.1em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{background:#ffffff80;color:#9a6e3a}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}#app{height:100dvh}.ibiss-logo[data-v-998b1512]{width:8%}.avian-logo[data-v-998b1512],.flightkit-logo[data-v-998b1512]{height:80%}.image-container[data-v-998b1512]{border-top-left-radius:2rem;border-top-right-radius:2rem}.card[data-v-998b1512]{background:linear-gradient(to bottom right,#0078d44d,#0078d426);border-radius:2rem;height:35dvh;transition:transform 1s ease;width:28rem}.card a[data-v-998b1512]{text-decoration:none}.normal[data-v-998b1512]{color:var(--font-color)}.card[data-v-998b1512]:hover{border:1px solid var(--hr-color);transform:scale(1.1)}.card:hover a[data-v-998b1512]{text-decoration:none}.card-row[data-v-998b1512]{align-self:center}.card-row[data-v-998b1512],.link-card[data-v-998b1512]{height:100%}.index[data-v-998b1512]{height:100dvh}.navigation{min-height:100dvh;min-width:fit-content;padding-bottom:2rem} +code[class*=language-],pre[class*=language-]{word-wrap:normal;background:0 0;color:#000;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-align:left;text-shadow:0 1px #fff;white-space:pre;word-break:normal;word-spacing:normal}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{background:#b3d4fc;text-shadow:none}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{background:#b3d4fc;text-shadow:none}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{margin:.5em 0;overflow:auto;padding:1em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.1em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{background:#ffffff80;color:#9a6e3a}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}#app{height:100dvh}.ibiss-logo[data-v-177a07dd]{width:8%}.avian-logo[data-v-177a07dd],.flightkit-logo[data-v-177a07dd]{height:80%}.image-container[data-v-177a07dd]{border-top-left-radius:2rem;border-top-right-radius:2rem}.card[data-v-177a07dd]{background:linear-gradient(to bottom right,#0078d44d,#0078d426);border-radius:2rem;height:35dvh;transition:transform 1s ease;width:28rem}.card a[data-v-177a07dd]{text-decoration:none}.normal[data-v-177a07dd]{color:var(--font-color)}.card[data-v-177a07dd]:hover{border:1px solid var(--hr-color);transform:scale(1.1)}.card:hover a[data-v-177a07dd]{text-decoration:none}.card-row[data-v-177a07dd]{align-self:center}.card-row[data-v-177a07dd],.link-card[data-v-177a07dd]{height:100%}.index[data-v-177a07dd]{height:100dvh}.navigation{min-height:100dvh;min-width:fit-content;padding-bottom:2rem} diff --git a/docs/assets/index-I52BcQX4.js b/docs/assets/index-OflIefYM.js similarity index 81% rename from docs/assets/index-I52BcQX4.js rename to docs/assets/index-OflIefYM.js index f40c7b1..e1e1385 100644 --- a/docs/assets/index-I52BcQX4.js +++ b/docs/assets/index-OflIefYM.js @@ -1 +1 @@ -import{C as t}from"./Card-ptuzLIBJ.js";import{h as o,w as a,o as n,d as e}from"./index-9HWLB3Yh.js";const l=e("section",null,[e("h1",null,"Welcome!"),e("p",null," I have written these vanilla webcomponents to help with getting basic website and webapplication functionality with ease without any framework. ")],-1),s=e("section",null,[e("h2",null,"Goal"),e("p",null," My goal is to make the life of fullstack webapplication developers easier by providing a lot of things out-of-the-box so they can focus on the business logic and add value instantly. ")],-1),p={__name:"index",setup(i){return(c,r)=>(n(),o(t,{class:"column gap-5"},{default:a(()=>[l,s]),_:1}))}};export{p as default}; +import{C as t}from"./Card-2OCnG6Eh.js";import{h as o,w as a,o as n,d as e}from"./index-Z9theFxX.js";const l=e("section",null,[e("h1",null,"Welcome!"),e("p",null," I have written these vanilla webcomponents to help with getting basic website and webapplication functionality with ease without any framework. ")],-1),s=e("section",null,[e("h2",null,"Goal"),e("p",null," My goal is to make the life of fullstack webapplication developers easier by providing a lot of things out-of-the-box so they can focus on the business logic and add value instantly. ")],-1),p={__name:"index",setup(i){return(c,r)=>(n(),o(t,{class:"column gap-5"},{default:a(()=>[l,s]),_:1}))}};export{p as default}; diff --git a/docs/assets/index-9HWLB3Yh.js b/docs/assets/index-Z9theFxX.js similarity index 97% rename from docs/assets/index-9HWLB3Yh.js rename to docs/assets/index-Z9theFxX.js index 192caae..f446631 100644 --- a/docs/assets/index-9HWLB3Yh.js +++ b/docs/assets/index-Z9theFxX.js @@ -23,10 +23,10 @@ * vue-router v4.2.5 * (c) 2023 Eduardo San Martin Morote * @license MIT - */const pt=typeof window<"u";function sc(e){return e.__esModule||e[Symbol.toStringTag]==="Module"}const Q=Object.assign;function In(e,t){const n={};for(const s in t){const r=t[s];n[s]=Ne(r)?r.map(e):e(r)}return n}const Lt=()=>{},Ne=Array.isArray,rc=/\/$/,oc=e=>e.replace(rc,"");function Tn(e,t,n="/"){let s,r={},o="",i="";const a=t.indexOf("#");let c=t.indexOf("?");return a=0&&(c=-1),c>-1&&(s=t.slice(0,c),o=t.slice(c+1,a>-1?a:t.length),r=e(o)),a>-1&&(s=s||t.slice(0,a),i=t.slice(a,t.length)),s=ac(s??t,n),{fullPath:s+(o&&"?")+o+i,path:s,query:r,hash:i}}function ic(e,t){const n=t.query?e(t.query):"";return t.path+(n&&"?")+n+(t.hash||"")}function nr(e,t){return!t||!e.toLowerCase().startsWith(t.toLowerCase())?e:e.slice(t.length)||"/"}function lc(e,t,n){const s=t.matched.length-1,r=n.matched.length-1;return s>-1&&s===r&&At(t.matched[s],n.matched[r])&&xo(t.params,n.params)&&e(t.query)===e(n.query)&&t.hash===n.hash}function At(e,t){return(e.aliasOf||e)===(t.aliasOf||t)}function xo(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(const n in e)if(!cc(e[n],t[n]))return!1;return!0}function cc(e,t){return Ne(e)?sr(e,t):Ne(t)?sr(t,e):e===t}function sr(e,t){return Ne(t)?e.length===t.length&&e.every((n,s)=>n===t[s]):e.length===1&&e[0]===t}function ac(e,t){if(e.startsWith("/"))return e;if(!e)return t;const n=t.split("/"),s=e.split("/"),r=s[s.length-1];(r===".."||r===".")&&s.push("");let o=n.length-1,i,a;for(i=0;i1&&o--;else break;return n.slice(0,o).join("/")+"/"+s.slice(i-(i===s.length?1:0)).join("/")}var Vt;(function(e){e.pop="pop",e.push="push"})(Vt||(Vt={}));var Mt;(function(e){e.back="back",e.forward="forward",e.unknown=""})(Mt||(Mt={}));function uc(e){if(!e)if(pt){const t=document.querySelector("base");e=t&&t.getAttribute("href")||"/",e=e.replace(/^\w+:\/\/[^\/]+/,"")}else e="/";return e[0]!=="/"&&e[0]!=="#"&&(e="/"+e),oc(e)}const fc=/^[^#]+#/;function dc(e,t){return e.replace(fc,"#")+t}function hc(e,t){const n=document.documentElement.getBoundingClientRect(),s=e.getBoundingClientRect();return{behavior:t.behavior,left:s.left-n.left-(t.left||0),top:s.top-n.top-(t.top||0)}}const En=()=>({left:window.pageXOffset,top:window.pageYOffset});function pc(e){let t;if("el"in e){const n=e.el,s=typeof n=="string"&&n.startsWith("#"),r=typeof n=="string"?s?document.getElementById(n.slice(1)):document.querySelector(n):n;if(!r)return;t=hc(r,e)}else t=e;"scrollBehavior"in document.documentElement.style?window.scrollTo(t):window.scrollTo(t.left!=null?t.left:window.pageXOffset,t.top!=null?t.top:window.pageYOffset)}function rr(e,t){return(history.state?history.state.position-t:-1)+e}const Gn=new Map;function gc(e,t){Gn.set(e,t)}function mc(e){const t=Gn.get(e);return Gn.delete(e),t}let _c=()=>location.protocol+"//"+location.host;function wo(e,t){const{pathname:n,search:s,hash:r}=t,o=e.indexOf("#");if(o>-1){let a=r.includes(e.slice(o))?e.slice(o).length:1,c=r.slice(a);return c[0]!=="/"&&(c="/"+c),nr(c,"")}return nr(n,e)+s+r}function vc(e,t,n,s){let r=[],o=[],i=null;const a=({state:g})=>{const h=wo(e,location),m=n.value,E=t.value;let x=0;if(g){if(n.value=h,t.value=g,i&&i===m){i=null;return}x=E?g.position-E.position:0}else s(h);r.forEach(v=>{v(n.value,m,{delta:x,type:Vt.pop,direction:x?x>0?Mt.forward:Mt.back:Mt.unknown})})};function c(){i=n.value}function d(g){r.push(g);const h=()=>{const m=r.indexOf(g);m>-1&&r.splice(m,1)};return o.push(h),h}function f(){const{history:g}=window;g.state&&g.replaceState(Q({},g.state,{scroll:En()}),"")}function p(){for(const g of o)g();o=[],window.removeEventListener("popstate",a),window.removeEventListener("beforeunload",f)}return window.addEventListener("popstate",a),window.addEventListener("beforeunload",f,{passive:!0}),{pauseListeners:c,listen:d,destroy:p}}function or(e,t,n,s=!1,r=!1){return{back:e,current:t,forward:n,replaced:s,position:window.history.length,scroll:r?En():null}}function yc(e){const{history:t,location:n}=window,s={value:wo(e,n)},r={value:t.state};r.value||o(s.value,{back:null,current:s.value,forward:null,position:t.length-1,replaced:!0,scroll:null},!0);function o(c,d,f){const p=e.indexOf("#"),g=p>-1?(n.host&&document.querySelector("base")?e:e.slice(p))+c:_c()+e+c;try{t[f?"replaceState":"pushState"](d,"",g),r.value=d}catch(h){console.error(h),n[f?"replace":"assign"](g)}}function i(c,d){const f=Q({},t.state,or(r.value.back,c,r.value.forward,!0),d,{position:r.value.position});o(c,f,!0),s.value=c}function a(c,d){const f=Q({},r.value,t.state,{forward:c,scroll:En()});o(f.current,f,!0);const p=Q({},or(s.value,c,null),{position:f.position+1},d);o(c,p,!1),s.value=c}return{location:s,state:r,push:a,replace:i}}function bc(e){e=uc(e);const t=yc(e),n=vc(e,t.state,t.location,t.replace);function s(o,i=!0){i||n.pauseListeners(),history.go(o)}const r=Q({location:"",base:e,go:s,createHref:dc.bind(null,e)},t,n);return Object.defineProperty(r,"location",{enumerable:!0,get:()=>t.location.value}),Object.defineProperty(r,"state",{enumerable:!0,get:()=>t.state.value}),r}function Ec(e){return e=location.host?e||location.pathname+location.search:"",e.includes("#")||(e+="#"),bc(e)}function xc(e){return typeof e=="string"||e&&typeof e=="object"}function Ao(e){return typeof e=="string"||typeof e=="symbol"}const Je={path:"/",name:void 0,params:{},query:{},hash:"",fullPath:"/",matched:[],meta:{},redirectedFrom:void 0},Ro=Symbol("");var ir;(function(e){e[e.aborted=4]="aborted",e[e.cancelled=8]="cancelled",e[e.duplicated=16]="duplicated"})(ir||(ir={}));function Rt(e,t){return Q(new Error,{type:e,[Ro]:!0},t)}function Ke(e,t){return e instanceof Error&&Ro in e&&(t==null||!!(e.type&t))}const lr="[^/]+?",wc={sensitive:!1,strict:!1,start:!0,end:!0},Ac=/[.+*?^${}()[\]/\\]/g;function Rc(e,t){const n=Q({},wc,t),s=[];let r=n.start?"^":"";const o=[];for(const d of e){const f=d.length?[]:[90];n.strict&&!d.length&&(r+="/");for(let p=0;pt.length?t.length===1&&t[0]===80?1:-1:0}function Sc(e,t){let n=0;const s=e.score,r=t.score;for(;n0&&t[t.length-1]<0}const Oc={type:0,value:""},Cc=/[a-zA-Z0-9_]/;function Fc(e){if(!e)return[[]];if(e==="/")return[[Oc]];if(!e.startsWith("/"))throw new Error(`Invalid path "${e}"`);function t(h){throw new Error(`ERR (${n})/"${d}": ${h}`)}let n=0,s=n;const r=[];let o;function i(){o&&r.push(o),o=[]}let a=0,c,d="",f="";function p(){d&&(n===0?o.push({type:0,value:d}):n===1||n===2||n===3?(o.length>1&&(c==="*"||c==="+")&&t(`A repeatable param (${d}) must be alone in its segment. eg: '/:ids+.`),o.push({type:1,value:d,regexp:f,repeatable:c==="*"||c==="+",optional:c==="*"||c==="?"})):t("Invalid state to consume buffer"),d="")}function g(){d+=c}for(;a{i(O)}:Lt}function i(f){if(Ao(f)){const p=s.get(f);p&&(s.delete(f),n.splice(n.indexOf(p),1),p.children.forEach(i),p.alias.forEach(i))}else{const p=n.indexOf(f);p>-1&&(n.splice(p,1),f.record.name&&s.delete(f.record.name),f.children.forEach(i),f.alias.forEach(i))}}function a(){return n}function c(f){let p=0;for(;p=0&&(f.record.path!==n[p].record.path||!Po(f,n[p]));)p++;n.splice(p,0,f),f.record.name&&!ur(f)&&s.set(f.record.name,f)}function d(f,p){let g,h={},m,E;if("name"in f&&f.name){if(g=s.get(f.name),!g)throw Rt(1,{location:f});E=g.record.name,h=Q(ar(p.params,g.keys.filter(O=>!O.optional).map(O=>O.name)),f.params&&ar(f.params,g.keys.map(O=>O.name))),m=g.stringify(h)}else if("path"in f)m=f.path,g=n.find(O=>O.re.test(m)),g&&(h=g.parse(m),E=g.record.name);else{if(g=p.name?s.get(p.name):n.find(O=>O.re.test(p.path)),!g)throw Rt(1,{location:f,currentLocation:p});E=g.record.name,h=Q({},p.params,f.params),m=g.stringify(h)}const x=[];let v=g;for(;v;)x.unshift(v.record),v=v.parent;return{name:E,path:m,params:h,matched:x,meta:Lc(x)}}return e.forEach(f=>o(f)),{addRoute:o,resolve:d,removeRoute:i,getRoutes:a,getRecordMatcher:r}}function ar(e,t){const n={};for(const s of t)s in e&&(n[s]=e[s]);return n}function kc(e){return{path:e.path,redirect:e.redirect,name:e.name,meta:e.meta||{},aliasOf:void 0,beforeEnter:e.beforeEnter,props:$c(e),children:e.children||[],instances:{},leaveGuards:new Set,updateGuards:new Set,enterCallbacks:{},components:"components"in e?e.components||null:e.component&&{default:e.component}}}function $c(e){const t={},n=e.props||!1;if("component"in e)t.default=n;else for(const s in e.components)t[s]=typeof n=="object"?n[s]:n;return t}function ur(e){for(;e;){if(e.record.aliasOf)return!0;e=e.parent}return!1}function Lc(e){return e.reduce((t,n)=>Q(t,n.meta),{})}function fr(e,t){const n={};for(const s in e)n[s]=s in t?t[s]:e[s];return n}function Po(e,t){return t.children.some(n=>n===e||Po(e,n))}const So=/#/g,Mc=/&/g,jc=/\//g,Nc=/=/g,Dc=/\?/g,Oo=/\+/g,Hc=/%5B/g,Vc=/%5D/g,Co=/%5E/g,Bc=/%60/g,Fo=/%7B/g,Uc=/%7C/g,Io=/%7D/g,Kc=/%20/g;function ys(e){return encodeURI(""+e).replace(Uc,"|").replace(Hc,"[").replace(Vc,"]")}function zc(e){return ys(e).replace(Fo,"{").replace(Io,"}").replace(Co,"^")}function Yn(e){return ys(e).replace(Oo,"%2B").replace(Kc,"+").replace(So,"%23").replace(Mc,"%26").replace(Bc,"`").replace(Fo,"{").replace(Io,"}").replace(Co,"^")}function Wc(e){return Yn(e).replace(Nc,"%3D")}function qc(e){return ys(e).replace(So,"%23").replace(Dc,"%3F")}function Gc(e){return e==null?"":qc(e).replace(jc,"%2F")}function cn(e){try{return decodeURIComponent(""+e)}catch{}return""+e}function Yc(e){const t={};if(e===""||e==="?")return t;const s=(e[0]==="?"?e.slice(1):e).split("&");for(let r=0;ro&&Yn(o)):[s&&Yn(s)]).forEach(o=>{o!==void 0&&(t+=(t.length?"&":"")+n,o!=null&&(t+="="+o))})}return t}function Zc(e){const t={};for(const n in e){const s=e[n];s!==void 0&&(t[n]=Ne(s)?s.map(r=>r==null?null:""+r):s==null?s:""+s)}return t}const Qc=Symbol(""),hr=Symbol(""),bs=Symbol(""),To=Symbol(""),Zn=Symbol("");function Ft(){let e=[];function t(s){return e.push(s),()=>{const r=e.indexOf(s);r>-1&&e.splice(r,1)}}function n(){e=[]}return{add:t,list:()=>e.slice(),reset:n}}function nt(e,t,n,s,r){const o=s&&(s.enterCallbacks[r]=s.enterCallbacks[r]||[]);return()=>new Promise((i,a)=>{const c=p=>{p===!1?a(Rt(4,{from:n,to:t})):p instanceof Error?a(p):xc(p)?a(Rt(2,{from:t,to:p})):(o&&s.enterCallbacks[r]===o&&typeof p=="function"&&o.push(p),i())},d=e.call(s&&s.instances[r],t,n,c);let f=Promise.resolve(d);e.length<3&&(f=f.then(c)),f.catch(p=>a(p))})}function kn(e,t,n,s){const r=[];for(const o of e)for(const i in o.components){let a=o.components[i];if(!(t!=="beforeRouteEnter"&&!o.instances[i]))if(Jc(a)){const d=(a.__vccOpts||a)[t];d&&r.push(nt(d,n,s,o,i))}else{let c=a();r.push(()=>c.then(d=>{if(!d)return Promise.reject(new Error(`Couldn't resolve component "${i}" at "${o.path}"`));const f=sc(d)?d.default:d;o.components[i]=f;const g=(f.__vccOpts||f)[t];return g&&nt(g,n,s,o,i)()}))}}return r}function Jc(e){return typeof e=="object"||"displayName"in e||"props"in e||"__vccOpts"in e}function pr(e){const t=qe(bs),n=qe(To),s=Le(()=>t.resolve(We(e.to))),r=Le(()=>{const{matched:c}=s.value,{length:d}=c,f=c[d-1],p=n.matched;if(!f||!p.length)return-1;const g=p.findIndex(At.bind(null,f));if(g>-1)return g;const h=gr(c[d-2]);return d>1&&gr(f)===h&&p[p.length-1].path!==h?p.findIndex(At.bind(null,c[d-2])):g}),o=Le(()=>r.value>-1&&ta(n.params,s.value.params)),i=Le(()=>r.value>-1&&r.value===n.matched.length-1&&xo(n.params,s.value.params));function a(c={}){return ea(c)?t[We(e.replace)?"replace":"push"](We(e.to)).catch(Lt):Promise.resolve()}return{route:s,href:Le(()=>s.value.href),isActive:o,isExactActive:i,navigate:a}}const Xc=to({name:"RouterLink",compatConfig:{MODE:3},props:{to:{type:[String,Object],required:!0},replace:Boolean,activeClass:String,exactActiveClass:String,custom:Boolean,ariaCurrentValue:{type:String,default:"page"}},useLink:pr,setup(e,{slots:t}){const n=hn(pr(e)),{options:s}=qe(bs),r=Le(()=>({[mr(e.activeClass,s.linkActiveClass,"router-link-active")]:n.isActive,[mr(e.exactActiveClass,s.linkExactActiveClass,"router-link-exact-active")]:n.isExactActive}));return()=>{const o=t.default&&t.default(n);return e.custom?o:Eo("a",{"aria-current":n.isExactActive?e.ariaCurrentValue:null,href:n.href,onClick:n.navigate,class:r.value},o)}}}),Qn=Xc;function ea(e){if(!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)&&!e.defaultPrevented&&!(e.button!==void 0&&e.button!==0)){if(e.currentTarget&&e.currentTarget.getAttribute){const t=e.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(t))return}return e.preventDefault&&e.preventDefault(),!0}}function ta(e,t){for(const n in t){const s=t[n],r=e[n];if(typeof s=="string"){if(s!==r)return!1}else if(!Ne(r)||r.length!==s.length||s.some((o,i)=>o!==r[i]))return!1}return!0}function gr(e){return e?e.aliasOf?e.aliasOf.path:e.path:""}const mr=(e,t,n)=>e??t??n,na=to({name:"RouterView",inheritAttrs:!1,props:{name:{type:String,default:"default"},route:Object},compatConfig:{MODE:3},setup(e,{attrs:t,slots:n}){const s=qe(Zn),r=Le(()=>e.route||s.value),o=qe(hr,0),i=Le(()=>{let d=We(o);const{matched:f}=r.value;let p;for(;(p=f[d])&&!p.components;)d++;return d}),a=Le(()=>r.value.matched[i.value]);Jt(hr,Le(()=>i.value+1)),Jt(Qc,a),Jt(Zn,r);const c=Kr();return Qt(()=>[c.value,a.value,e.name],([d,f,p],[g,h,m])=>{f&&(f.instances[p]=d,h&&h!==f&&d&&d===g&&(f.leaveGuards.size||(f.leaveGuards=h.leaveGuards),f.updateGuards.size||(f.updateGuards=h.updateGuards))),d&&f&&(!h||!At(f,h)||!g)&&(f.enterCallbacks[p]||[]).forEach(E=>E(d))},{flush:"post"}),()=>{const d=r.value,f=e.name,p=a.value,g=p&&p.components[f];if(!g)return _r(n.default,{Component:g,route:d});const h=p.props[f],m=h?h===!0?d.params:typeof h=="function"?h(d):h:null,x=Eo(g,Q({},m,t,{onVnodeUnmounted:v=>{v.component.isUnmounted&&(p.instances[f]=null)},ref:c}));return _r(n.default,{Component:x,route:d})||x}}});function _r(e,t){if(!e)return null;const n=e(t);return n.length===1?n[0]:n}const ko=na;function sa(e){const t=Tc(e.routes,e),n=e.parseQuery||Yc,s=e.stringifyQuery||dr,r=e.history,o=Ft(),i=Ft(),a=Ft(),c=mi(Je);let d=Je;pt&&e.scrollBehavior&&"scrollRestoration"in history&&(history.scrollRestoration="manual");const f=In.bind(null,y=>""+y),p=In.bind(null,Gc),g=In.bind(null,cn);function h(y,T){let F,L;return Ao(y)?(F=t.getRecordMatcher(y),L=T):L=y,t.addRoute(L,F)}function m(y){const T=t.getRecordMatcher(y);T&&t.removeRoute(T)}function E(){return t.getRoutes().map(y=>y.record)}function x(y){return!!t.getRecordMatcher(y)}function v(y,T){if(T=Q({},T||c.value),typeof y=="string"){const u=Tn(n,y,T.path),_=t.resolve({path:u.path},T),w=r.createHref(u.fullPath);return Q(u,_,{params:g(_.params),hash:cn(u.hash),redirectedFrom:void 0,href:w})}let F;if("path"in y)F=Q({},y,{path:Tn(n,y.path,T.path).path});else{const u=Q({},y.params);for(const _ in u)u[_]==null&&delete u[_];F=Q({},y,{params:p(u)}),T.params=p(T.params)}const L=t.resolve(F,T),z=y.hash||"";L.params=f(g(L.params));const Z=ic(s,Q({},y,{hash:zc(z),path:L.path})),l=r.createHref(Z);return Q({fullPath:Z,hash:z,query:s===dr?Zc(y.query):y.query||{}},L,{redirectedFrom:void 0,href:l})}function O(y){return typeof y=="string"?Tn(n,y,c.value.path):Q({},y)}function R(y,T){if(d!==y)return Rt(8,{from:T,to:y})}function $(y){return ce(y)}function U(y){return $(Q(O(y),{replace:!0}))}function N(y){const T=y.matched[y.matched.length-1];if(T&&T.redirect){const{redirect:F}=T;let L=typeof F=="function"?F(y):F;return typeof L=="string"&&(L=L.includes("?")||L.includes("#")?L=O(L):{path:L},L.params={}),Q({query:y.query,hash:y.hash,params:"path"in L?{}:y.params},L)}}function ce(y,T){const F=d=v(y),L=c.value,z=y.state,Z=y.force,l=y.replace===!0,u=N(F);if(u)return ce(Q(O(u),{state:typeof u=="object"?Q({},z,u.state):z,force:Z,replace:l}),T||F);const _=F;_.redirectedFrom=T;let w;return!Z&&lc(s,L,F)&&(w=Rt(16,{to:_,from:L}),pe(L,L,!0,!1)),(w?Promise.resolve(w):he(_,L)).catch(b=>Ke(b)?Ke(b,2)?b:ae(b):W(b,_,L)).then(b=>{if(b){if(Ke(b,2))return ce(Q({replace:l},O(b.to),{state:typeof b.to=="object"?Q({},z,b.to.state):z,force:Z}),T||_)}else b=ue(_,L,!0,l,z);return be(_,L,b),b})}function se(y,T){const F=R(y,T);return F?Promise.reject(F):Promise.resolve()}function Re(y){const T=Ze.values().next().value;return T&&typeof T.runWithContext=="function"?T.runWithContext(y):y()}function he(y,T){let F;const[L,z,Z]=ra(y,T);F=kn(L.reverse(),"beforeRouteLeave",y,T);for(const u of L)u.leaveGuards.forEach(_=>{F.push(nt(_,y,T))});const l=se.bind(null,y,T);return F.push(l),ie(F).then(()=>{F=[];for(const u of o.list())F.push(nt(u,y,T));return F.push(l),ie(F)}).then(()=>{F=kn(z,"beforeRouteUpdate",y,T);for(const u of z)u.updateGuards.forEach(_=>{F.push(nt(_,y,T))});return F.push(l),ie(F)}).then(()=>{F=[];for(const u of Z)if(u.beforeEnter)if(Ne(u.beforeEnter))for(const _ of u.beforeEnter)F.push(nt(_,y,T));else F.push(nt(u.beforeEnter,y,T));return F.push(l),ie(F)}).then(()=>(y.matched.forEach(u=>u.enterCallbacks={}),F=kn(Z,"beforeRouteEnter",y,T),F.push(l),ie(F))).then(()=>{F=[];for(const u of i.list())F.push(nt(u,y,T));return F.push(l),ie(F)}).catch(u=>Ke(u,8)?u:Promise.reject(u))}function be(y,T,F){a.list().forEach(L=>Re(()=>L(y,T,F)))}function ue(y,T,F,L,z){const Z=R(y,T);if(Z)return Z;const l=T===Je,u=pt?history.state:{};F&&(L||l?r.replace(y.fullPath,Q({scroll:l&&u&&u.scroll},z)):r.push(y.fullPath,z)),c.value=y,pe(y,T,F,l),ae()}let Pe;function Ye(){Pe||(Pe=r.listen((y,T,F)=>{if(!Se.listening)return;const L=v(y),z=N(L);if(z){ce(Q(z,{replace:!0}),L).catch(Lt);return}d=L;const Z=c.value;pt&&gc(rr(Z.fullPath,F.delta),En()),he(L,Z).catch(l=>Ke(l,12)?l:Ke(l,2)?(ce(l.to,L).then(u=>{Ke(u,20)&&!F.delta&&F.type===Vt.pop&&r.go(-1,!1)}).catch(Lt),Promise.reject()):(F.delta&&r.go(-F.delta,!1),W(l,L,Z))).then(l=>{l=l||ue(L,Z,!1),l&&(F.delta&&!Ke(l,8)?r.go(-F.delta,!1):F.type===Vt.pop&&Ke(l,20)&&r.go(-1,!1)),be(L,Z,l)}).catch(Lt)}))}let Ue=Ft(),le=Ft(),Y;function W(y,T,F){ae(y);const L=le.list();return L.length?L.forEach(z=>z(y,T,F)):console.error(y),Promise.reject(y)}function X(){return Y&&c.value!==Je?Promise.resolve():new Promise((y,T)=>{Ue.add([y,T])})}function ae(y){return Y||(Y=!y,Ye(),Ue.list().forEach(([T,F])=>y?F(y):T()),Ue.reset()),y}function pe(y,T,F,L){const{scrollBehavior:z}=e;if(!pt||!z)return Promise.resolve();const Z=!F&&mc(rr(y.fullPath,0))||(L||!F)&&history.state&&history.state.scroll||null;return Gr().then(()=>z(y,T,Z)).then(l=>l&&pc(l)).catch(l=>W(l,y,T))}const ee=y=>r.go(y);let Ie;const Ze=new Set,Se={currentRoute:c,listening:!0,addRoute:h,removeRoute:m,hasRoute:x,getRoutes:E,resolve:v,options:e,push:$,replace:U,go:ee,back:()=>ee(-1),forward:()=>ee(1),beforeEach:o.add,beforeResolve:i.add,afterEach:a.add,onError:le.add,isReady:X,install(y){const T=this;y.component("RouterLink",Qn),y.component("RouterView",ko),y.config.globalProperties.$router=T,Object.defineProperty(y.config.globalProperties,"$route",{enumerable:!0,get:()=>We(c)}),pt&&!Ie&&c.value===Je&&(Ie=!0,$(r.location).catch(z=>{}));const F={};for(const z in Je)Object.defineProperty(F,z,{get:()=>c.value[z],enumerable:!0});y.provide(bs,T),y.provide(To,Dr(F)),y.provide(Zn,c);const L=y.unmount;Ze.add(y),y.unmount=function(){Ze.delete(y),Ze.size<1&&(d=Je,Pe&&Pe(),Pe=null,c.value=Je,Ie=!1,Y=!1),L()}}};function ie(y){return y.reduce((T,F)=>T.then(()=>Re(F)),Promise.resolve())}return Se}function ra(e,t){const n=[],s=[],r=[],o=Math.max(t.matched.length,e.matched.length);for(let i=0;iAt(d,a))?s.push(a):n.push(a));const c=e.matched[i];c&&(t.matched.find(d=>At(d,c))||r.push(c))}return[n,s,r]}const oa={__name:"App",setup(e){return(t,n)=>(ms(),_o(We(ko)))}},ia="modulepreload",la=function(e){return"/Ibiss/"+e},vr={},re=function(t,n,s){let r=Promise.resolve();if(n&&n.length>0){const o=document.getElementsByTagName("link");r=Promise.all(n.map(i=>{if(i=la(i),i in vr)return;vr[i]=!0;const a=i.endsWith(".css"),c=a?'[rel="stylesheet"]':"";if(!!s)for(let p=o.length-1;p>=0;p--){const g=o[p];if(g.href===i&&(!a||g.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${i}"]${c}`))return;const f=document.createElement("link");if(f.rel=a?"stylesheet":ia,a||(f.as="script",f.crossOrigin=""),f.href=i,document.head.appendChild(f),a)return new Promise((p,g)=>{f.addEventListener("load",p),f.addEventListener("error",()=>g(new Error(`Unable to preload CSS for ${i}`)))})}))}return r.then(()=>t()).catch(o=>{const i=new Event("vite:preloadError",{cancelable:!0});if(i.payload=o,window.dispatchEvent(i),!i.defaultPrevented)throw o})},ca="/Ibiss/ibiss.svg",aa="/Ibiss/aviancss.svg",ua="/Ibiss/flightkit.svg",fa=(e,t)=>{const n=e.__vccOpts||e;for(const[s,r]of t)n[s]=r;return n},Ut=e=>(Ri("data-v-998b1512"),e=e(),Pi(),e),da={class:"index column"},ha=Ut(()=>Fe("header",{class:"p-5 row align-center gap-5 border-bottom bg-white"},[Fe("img",{src:ca,class:"ibiss-logo"}),Fe("h1",null,"Ibiss UI Documentation")],-1)),pa={class:"card-row row justify-center align-center gap-5"},ga={class:"card shadow"},ma=Ut(()=>Fe("img",{src:aa,class:"avian-logo"},null,-1)),_a=Ut(()=>Fe("span",{class:"normal"},"Go to Avian CSS",-1)),va={class:"card shadow"},ya=Ut(()=>Fe("img",{src:ua,class:"flightkit-logo"},null,-1)),ba=Ut(()=>Fe("span",{class:"normal"},"Go to Flightkit Components",-1)),Ea={__name:"HomeView",setup(e){return(t,n)=>(ms(),pl("main",da,[ha,Fe("section",pa,[Fe("div",ga,[ye(We(Qn),{to:"/aviancss",class:"link-card column align-center justify-around"},{default:Hn(()=>[ma,_a]),_:1})]),Fe("div",va,[ye(We(Qn),{to:"/flightkit",class:"link-card column align-center justify-around p-2"},{default:Hn(()=>[ya,ba]),_:1})])])]))}},xa=fa(Ea,[["__scopeId","data-v-998b1512"]]),wa=sa({history:Ec(),routes:[{path:"/",name:"home",component:xa},{path:"/aviancss",name:"aviancss",component:()=>re(()=>import("./AvianCss-hDeO_-KP.js"),__vite__mapDeps([0,1])),children:[{path:"",name:"avian-index",component:()=>re(()=>import("./index-qO81NO9_.js"),__vite__mapDeps([2,3,4]))},{path:"/typography",name:"avian-typography",component:()=>re(()=>import("./typography-tbpTx10p.js"),__vite__mapDeps([5,3,4]))},{path:"/variables",name:"avian-variables",component:()=>re(()=>import("./variables-NwzhEZKM.js"),__vite__mapDeps([6,3,4]))},{path:"/buttons",name:"avian-buttons",component:()=>re(()=>import("./buttons-3gnEpqPa.js"),__vite__mapDeps([7,3,4,8]))},{path:"/links",name:"avian-links",component:()=>re(()=>import("./links-eb7vGPsB.js"),__vite__mapDeps([9,3,4,10]))},{path:"/inputs",name:"avian-inputs",component:()=>re(()=>import("./inputs-obWaPX35.js"),__vite__mapDeps([11,3,4,12]))},{path:"/responsive",name:"avian-responsive",component:()=>re(()=>import("./responsive-8aUMO2mS.js"),__vite__mapDeps([13,3,4]))},{path:"/display-utilities",name:"avian-display-utilities",component:()=>re(()=>import("./display-utilities-ygjEOWnD.js"),__vite__mapDeps([14,3,4]))},{path:"/flex",name:"avian-flex",component:()=>re(()=>import("./flex-B4TN6Krl.js"),__vite__mapDeps([15,3,4]))},{path:"/table",name:"avian-table",component:()=>re(()=>import("./table-sJVToksU.js"),__vite__mapDeps([16,3,4,17]))},{path:"/margins-paddings",name:"avian-margins-paddings",component:()=>re(()=>import("./margins-paddings-kqW9AJm8.js"),__vite__mapDeps([18,3,4]))},{path:"/icons",name:"avian-icons",component:()=>re(()=>import("./icons-OcuTryEd.js"),__vite__mapDeps([19,3,4]))},{path:"/colors",name:"avian-colors",component:()=>re(()=>import("./colors-JgMxzMEd.js"),__vite__mapDeps([20,3,4]))},{path:"/borders",name:"avian-borders",component:()=>re(()=>import("./borders-QieI5GCO.js"),__vite__mapDeps([21,3,4]))},{path:"/shadows",name:"avian-shadows",component:()=>re(()=>import("./shadows-VPsMomVp.js"),__vite__mapDeps([22,3,4]))},{path:"/cursors",name:"avian-cursors",component:()=>re(()=>import("./cursors-YEC-ZQDz.js"),__vite__mapDeps([23,3,4]))}]},{path:"/flightkit",name:"flightkit",component:()=>re(()=>import("./Flightkit-UnFc9pvA.js"),__vite__mapDeps([24,25])),children:[{path:"",name:"flightkit-index",component:()=>re(()=>import("./index-I52BcQX4.js"),__vite__mapDeps([26,3,4]))},{path:"/flightkit-table",name:"flightkit-table",component:()=>re(()=>import("./flightkit-table-TTdG-HNF.js"),__vite__mapDeps([27,3,4,28]))},{path:"/flightkit-draggable",name:"flightkit-draggable",component:()=>re(()=>import("./flightkit-draggable-C4d3H226.js"),__vite__mapDeps([29,3,4,30]))},{path:"/flightkit-modal",name:"flightkit-modal",component:()=>re(()=>import("./flightkit-modal-skgdbICb.js"),__vite__mapDeps([31,3,4,30]))},{path:"/flightkit-dropdown",name:"flightkit-dropdown",component:()=>re(()=>import("./flightkit-dropdown-kjjHl9No.js"),__vite__mapDeps([32,3,4,28]))}]}]}),Es=Ql(oa);Es.use(nc());Es.use(wa);Es.mount("#app");export{Qn as R,fa as _,ye as a,_l as b,pl as c,Fe as d,Pi as e,aa as f,ko as g,_o as h,Vi as i,ua as j,Ra as k,ms as o,Ri as p,Kr as r,Aa as t,We as u,Hn as w}; + */const pt=typeof window<"u";function sc(e){return e.__esModule||e[Symbol.toStringTag]==="Module"}const Q=Object.assign;function In(e,t){const n={};for(const s in t){const r=t[s];n[s]=Ne(r)?r.map(e):e(r)}return n}const Lt=()=>{},Ne=Array.isArray,rc=/\/$/,oc=e=>e.replace(rc,"");function Tn(e,t,n="/"){let s,r={},o="",i="";const a=t.indexOf("#");let c=t.indexOf("?");return a=0&&(c=-1),c>-1&&(s=t.slice(0,c),o=t.slice(c+1,a>-1?a:t.length),r=e(o)),a>-1&&(s=s||t.slice(0,a),i=t.slice(a,t.length)),s=ac(s??t,n),{fullPath:s+(o&&"?")+o+i,path:s,query:r,hash:i}}function ic(e,t){const n=t.query?e(t.query):"";return t.path+(n&&"?")+n+(t.hash||"")}function nr(e,t){return!t||!e.toLowerCase().startsWith(t.toLowerCase())?e:e.slice(t.length)||"/"}function lc(e,t,n){const s=t.matched.length-1,r=n.matched.length-1;return s>-1&&s===r&&At(t.matched[s],n.matched[r])&&xo(t.params,n.params)&&e(t.query)===e(n.query)&&t.hash===n.hash}function At(e,t){return(e.aliasOf||e)===(t.aliasOf||t)}function xo(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(const n in e)if(!cc(e[n],t[n]))return!1;return!0}function cc(e,t){return Ne(e)?sr(e,t):Ne(t)?sr(t,e):e===t}function sr(e,t){return Ne(t)?e.length===t.length&&e.every((n,s)=>n===t[s]):e.length===1&&e[0]===t}function ac(e,t){if(e.startsWith("/"))return e;if(!e)return t;const n=t.split("/"),s=e.split("/"),r=s[s.length-1];(r===".."||r===".")&&s.push("");let o=n.length-1,i,a;for(i=0;i1&&o--;else break;return n.slice(0,o).join("/")+"/"+s.slice(i-(i===s.length?1:0)).join("/")}var Vt;(function(e){e.pop="pop",e.push="push"})(Vt||(Vt={}));var Mt;(function(e){e.back="back",e.forward="forward",e.unknown=""})(Mt||(Mt={}));function uc(e){if(!e)if(pt){const t=document.querySelector("base");e=t&&t.getAttribute("href")||"/",e=e.replace(/^\w+:\/\/[^\/]+/,"")}else e="/";return e[0]!=="/"&&e[0]!=="#"&&(e="/"+e),oc(e)}const fc=/^[^#]+#/;function dc(e,t){return e.replace(fc,"#")+t}function hc(e,t){const n=document.documentElement.getBoundingClientRect(),s=e.getBoundingClientRect();return{behavior:t.behavior,left:s.left-n.left-(t.left||0),top:s.top-n.top-(t.top||0)}}const En=()=>({left:window.pageXOffset,top:window.pageYOffset});function pc(e){let t;if("el"in e){const n=e.el,s=typeof n=="string"&&n.startsWith("#"),r=typeof n=="string"?s?document.getElementById(n.slice(1)):document.querySelector(n):n;if(!r)return;t=hc(r,e)}else t=e;"scrollBehavior"in document.documentElement.style?window.scrollTo(t):window.scrollTo(t.left!=null?t.left:window.pageXOffset,t.top!=null?t.top:window.pageYOffset)}function rr(e,t){return(history.state?history.state.position-t:-1)+e}const Gn=new Map;function gc(e,t){Gn.set(e,t)}function mc(e){const t=Gn.get(e);return Gn.delete(e),t}let _c=()=>location.protocol+"//"+location.host;function wo(e,t){const{pathname:n,search:s,hash:r}=t,o=e.indexOf("#");if(o>-1){let a=r.includes(e.slice(o))?e.slice(o).length:1,c=r.slice(a);return c[0]!=="/"&&(c="/"+c),nr(c,"")}return nr(n,e)+s+r}function vc(e,t,n,s){let r=[],o=[],i=null;const a=({state:g})=>{const h=wo(e,location),m=n.value,E=t.value;let x=0;if(g){if(n.value=h,t.value=g,i&&i===m){i=null;return}x=E?g.position-E.position:0}else s(h);r.forEach(v=>{v(n.value,m,{delta:x,type:Vt.pop,direction:x?x>0?Mt.forward:Mt.back:Mt.unknown})})};function c(){i=n.value}function d(g){r.push(g);const h=()=>{const m=r.indexOf(g);m>-1&&r.splice(m,1)};return o.push(h),h}function f(){const{history:g}=window;g.state&&g.replaceState(Q({},g.state,{scroll:En()}),"")}function p(){for(const g of o)g();o=[],window.removeEventListener("popstate",a),window.removeEventListener("beforeunload",f)}return window.addEventListener("popstate",a),window.addEventListener("beforeunload",f,{passive:!0}),{pauseListeners:c,listen:d,destroy:p}}function or(e,t,n,s=!1,r=!1){return{back:e,current:t,forward:n,replaced:s,position:window.history.length,scroll:r?En():null}}function yc(e){const{history:t,location:n}=window,s={value:wo(e,n)},r={value:t.state};r.value||o(s.value,{back:null,current:s.value,forward:null,position:t.length-1,replaced:!0,scroll:null},!0);function o(c,d,f){const p=e.indexOf("#"),g=p>-1?(n.host&&document.querySelector("base")?e:e.slice(p))+c:_c()+e+c;try{t[f?"replaceState":"pushState"](d,"",g),r.value=d}catch(h){console.error(h),n[f?"replace":"assign"](g)}}function i(c,d){const f=Q({},t.state,or(r.value.back,c,r.value.forward,!0),d,{position:r.value.position});o(c,f,!0),s.value=c}function a(c,d){const f=Q({},r.value,t.state,{forward:c,scroll:En()});o(f.current,f,!0);const p=Q({},or(s.value,c,null),{position:f.position+1},d);o(c,p,!1),s.value=c}return{location:s,state:r,push:a,replace:i}}function bc(e){e=uc(e);const t=yc(e),n=vc(e,t.state,t.location,t.replace);function s(o,i=!0){i||n.pauseListeners(),history.go(o)}const r=Q({location:"",base:e,go:s,createHref:dc.bind(null,e)},t,n);return Object.defineProperty(r,"location",{enumerable:!0,get:()=>t.location.value}),Object.defineProperty(r,"state",{enumerable:!0,get:()=>t.state.value}),r}function Ec(e){return e=location.host?e||location.pathname+location.search:"",e.includes("#")||(e+="#"),bc(e)}function xc(e){return typeof e=="string"||e&&typeof e=="object"}function Ao(e){return typeof e=="string"||typeof e=="symbol"}const Je={path:"/",name:void 0,params:{},query:{},hash:"",fullPath:"/",matched:[],meta:{},redirectedFrom:void 0},Ro=Symbol("");var ir;(function(e){e[e.aborted=4]="aborted",e[e.cancelled=8]="cancelled",e[e.duplicated=16]="duplicated"})(ir||(ir={}));function Rt(e,t){return Q(new Error,{type:e,[Ro]:!0},t)}function Ke(e,t){return e instanceof Error&&Ro in e&&(t==null||!!(e.type&t))}const lr="[^/]+?",wc={sensitive:!1,strict:!1,start:!0,end:!0},Ac=/[.+*?^${}()[\]/\\]/g;function Rc(e,t){const n=Q({},wc,t),s=[];let r=n.start?"^":"";const o=[];for(const d of e){const f=d.length?[]:[90];n.strict&&!d.length&&(r+="/");for(let p=0;pt.length?t.length===1&&t[0]===80?1:-1:0}function Sc(e,t){let n=0;const s=e.score,r=t.score;for(;n0&&t[t.length-1]<0}const Oc={type:0,value:""},Cc=/[a-zA-Z0-9_]/;function Fc(e){if(!e)return[[]];if(e==="/")return[[Oc]];if(!e.startsWith("/"))throw new Error(`Invalid path "${e}"`);function t(h){throw new Error(`ERR (${n})/"${d}": ${h}`)}let n=0,s=n;const r=[];let o;function i(){o&&r.push(o),o=[]}let a=0,c,d="",f="";function p(){d&&(n===0?o.push({type:0,value:d}):n===1||n===2||n===3?(o.length>1&&(c==="*"||c==="+")&&t(`A repeatable param (${d}) must be alone in its segment. eg: '/:ids+.`),o.push({type:1,value:d,regexp:f,repeatable:c==="*"||c==="+",optional:c==="*"||c==="?"})):t("Invalid state to consume buffer"),d="")}function g(){d+=c}for(;a{i(O)}:Lt}function i(f){if(Ao(f)){const p=s.get(f);p&&(s.delete(f),n.splice(n.indexOf(p),1),p.children.forEach(i),p.alias.forEach(i))}else{const p=n.indexOf(f);p>-1&&(n.splice(p,1),f.record.name&&s.delete(f.record.name),f.children.forEach(i),f.alias.forEach(i))}}function a(){return n}function c(f){let p=0;for(;p=0&&(f.record.path!==n[p].record.path||!Po(f,n[p]));)p++;n.splice(p,0,f),f.record.name&&!ur(f)&&s.set(f.record.name,f)}function d(f,p){let g,h={},m,E;if("name"in f&&f.name){if(g=s.get(f.name),!g)throw Rt(1,{location:f});E=g.record.name,h=Q(ar(p.params,g.keys.filter(O=>!O.optional).map(O=>O.name)),f.params&&ar(f.params,g.keys.map(O=>O.name))),m=g.stringify(h)}else if("path"in f)m=f.path,g=n.find(O=>O.re.test(m)),g&&(h=g.parse(m),E=g.record.name);else{if(g=p.name?s.get(p.name):n.find(O=>O.re.test(p.path)),!g)throw Rt(1,{location:f,currentLocation:p});E=g.record.name,h=Q({},p.params,f.params),m=g.stringify(h)}const x=[];let v=g;for(;v;)x.unshift(v.record),v=v.parent;return{name:E,path:m,params:h,matched:x,meta:Lc(x)}}return e.forEach(f=>o(f)),{addRoute:o,resolve:d,removeRoute:i,getRoutes:a,getRecordMatcher:r}}function ar(e,t){const n={};for(const s of t)s in e&&(n[s]=e[s]);return n}function kc(e){return{path:e.path,redirect:e.redirect,name:e.name,meta:e.meta||{},aliasOf:void 0,beforeEnter:e.beforeEnter,props:$c(e),children:e.children||[],instances:{},leaveGuards:new Set,updateGuards:new Set,enterCallbacks:{},components:"components"in e?e.components||null:e.component&&{default:e.component}}}function $c(e){const t={},n=e.props||!1;if("component"in e)t.default=n;else for(const s in e.components)t[s]=typeof n=="object"?n[s]:n;return t}function ur(e){for(;e;){if(e.record.aliasOf)return!0;e=e.parent}return!1}function Lc(e){return e.reduce((t,n)=>Q(t,n.meta),{})}function fr(e,t){const n={};for(const s in e)n[s]=s in t?t[s]:e[s];return n}function Po(e,t){return t.children.some(n=>n===e||Po(e,n))}const So=/#/g,Mc=/&/g,jc=/\//g,Nc=/=/g,Dc=/\?/g,Oo=/\+/g,Hc=/%5B/g,Vc=/%5D/g,Co=/%5E/g,Bc=/%60/g,Fo=/%7B/g,Uc=/%7C/g,Io=/%7D/g,Kc=/%20/g;function ys(e){return encodeURI(""+e).replace(Uc,"|").replace(Hc,"[").replace(Vc,"]")}function zc(e){return ys(e).replace(Fo,"{").replace(Io,"}").replace(Co,"^")}function Yn(e){return ys(e).replace(Oo,"%2B").replace(Kc,"+").replace(So,"%23").replace(Mc,"%26").replace(Bc,"`").replace(Fo,"{").replace(Io,"}").replace(Co,"^")}function Wc(e){return Yn(e).replace(Nc,"%3D")}function qc(e){return ys(e).replace(So,"%23").replace(Dc,"%3F")}function Gc(e){return e==null?"":qc(e).replace(jc,"%2F")}function cn(e){try{return decodeURIComponent(""+e)}catch{}return""+e}function Yc(e){const t={};if(e===""||e==="?")return t;const s=(e[0]==="?"?e.slice(1):e).split("&");for(let r=0;ro&&Yn(o)):[s&&Yn(s)]).forEach(o=>{o!==void 0&&(t+=(t.length?"&":"")+n,o!=null&&(t+="="+o))})}return t}function Zc(e){const t={};for(const n in e){const s=e[n];s!==void 0&&(t[n]=Ne(s)?s.map(r=>r==null?null:""+r):s==null?s:""+s)}return t}const Qc=Symbol(""),hr=Symbol(""),bs=Symbol(""),To=Symbol(""),Zn=Symbol("");function Ft(){let e=[];function t(s){return e.push(s),()=>{const r=e.indexOf(s);r>-1&&e.splice(r,1)}}function n(){e=[]}return{add:t,list:()=>e.slice(),reset:n}}function nt(e,t,n,s,r){const o=s&&(s.enterCallbacks[r]=s.enterCallbacks[r]||[]);return()=>new Promise((i,a)=>{const c=p=>{p===!1?a(Rt(4,{from:n,to:t})):p instanceof Error?a(p):xc(p)?a(Rt(2,{from:t,to:p})):(o&&s.enterCallbacks[r]===o&&typeof p=="function"&&o.push(p),i())},d=e.call(s&&s.instances[r],t,n,c);let f=Promise.resolve(d);e.length<3&&(f=f.then(c)),f.catch(p=>a(p))})}function kn(e,t,n,s){const r=[];for(const o of e)for(const i in o.components){let a=o.components[i];if(!(t!=="beforeRouteEnter"&&!o.instances[i]))if(Jc(a)){const d=(a.__vccOpts||a)[t];d&&r.push(nt(d,n,s,o,i))}else{let c=a();r.push(()=>c.then(d=>{if(!d)return Promise.reject(new Error(`Couldn't resolve component "${i}" at "${o.path}"`));const f=sc(d)?d.default:d;o.components[i]=f;const g=(f.__vccOpts||f)[t];return g&&nt(g,n,s,o,i)()}))}}return r}function Jc(e){return typeof e=="object"||"displayName"in e||"props"in e||"__vccOpts"in e}function pr(e){const t=qe(bs),n=qe(To),s=Le(()=>t.resolve(We(e.to))),r=Le(()=>{const{matched:c}=s.value,{length:d}=c,f=c[d-1],p=n.matched;if(!f||!p.length)return-1;const g=p.findIndex(At.bind(null,f));if(g>-1)return g;const h=gr(c[d-2]);return d>1&&gr(f)===h&&p[p.length-1].path!==h?p.findIndex(At.bind(null,c[d-2])):g}),o=Le(()=>r.value>-1&&ta(n.params,s.value.params)),i=Le(()=>r.value>-1&&r.value===n.matched.length-1&&xo(n.params,s.value.params));function a(c={}){return ea(c)?t[We(e.replace)?"replace":"push"](We(e.to)).catch(Lt):Promise.resolve()}return{route:s,href:Le(()=>s.value.href),isActive:o,isExactActive:i,navigate:a}}const Xc=to({name:"RouterLink",compatConfig:{MODE:3},props:{to:{type:[String,Object],required:!0},replace:Boolean,activeClass:String,exactActiveClass:String,custom:Boolean,ariaCurrentValue:{type:String,default:"page"}},useLink:pr,setup(e,{slots:t}){const n=hn(pr(e)),{options:s}=qe(bs),r=Le(()=>({[mr(e.activeClass,s.linkActiveClass,"router-link-active")]:n.isActive,[mr(e.exactActiveClass,s.linkExactActiveClass,"router-link-exact-active")]:n.isExactActive}));return()=>{const o=t.default&&t.default(n);return e.custom?o:Eo("a",{"aria-current":n.isExactActive?e.ariaCurrentValue:null,href:n.href,onClick:n.navigate,class:r.value},o)}}}),Qn=Xc;function ea(e){if(!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)&&!e.defaultPrevented&&!(e.button!==void 0&&e.button!==0)){if(e.currentTarget&&e.currentTarget.getAttribute){const t=e.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(t))return}return e.preventDefault&&e.preventDefault(),!0}}function ta(e,t){for(const n in t){const s=t[n],r=e[n];if(typeof s=="string"){if(s!==r)return!1}else if(!Ne(r)||r.length!==s.length||s.some((o,i)=>o!==r[i]))return!1}return!0}function gr(e){return e?e.aliasOf?e.aliasOf.path:e.path:""}const mr=(e,t,n)=>e??t??n,na=to({name:"RouterView",inheritAttrs:!1,props:{name:{type:String,default:"default"},route:Object},compatConfig:{MODE:3},setup(e,{attrs:t,slots:n}){const s=qe(Zn),r=Le(()=>e.route||s.value),o=qe(hr,0),i=Le(()=>{let d=We(o);const{matched:f}=r.value;let p;for(;(p=f[d])&&!p.components;)d++;return d}),a=Le(()=>r.value.matched[i.value]);Jt(hr,Le(()=>i.value+1)),Jt(Qc,a),Jt(Zn,r);const c=Kr();return Qt(()=>[c.value,a.value,e.name],([d,f,p],[g,h,m])=>{f&&(f.instances[p]=d,h&&h!==f&&d&&d===g&&(f.leaveGuards.size||(f.leaveGuards=h.leaveGuards),f.updateGuards.size||(f.updateGuards=h.updateGuards))),d&&f&&(!h||!At(f,h)||!g)&&(f.enterCallbacks[p]||[]).forEach(E=>E(d))},{flush:"post"}),()=>{const d=r.value,f=e.name,p=a.value,g=p&&p.components[f];if(!g)return _r(n.default,{Component:g,route:d});const h=p.props[f],m=h?h===!0?d.params:typeof h=="function"?h(d):h:null,x=Eo(g,Q({},m,t,{onVnodeUnmounted:v=>{v.component.isUnmounted&&(p.instances[f]=null)},ref:c}));return _r(n.default,{Component:x,route:d})||x}}});function _r(e,t){if(!e)return null;const n=e(t);return n.length===1?n[0]:n}const ko=na;function sa(e){const t=Tc(e.routes,e),n=e.parseQuery||Yc,s=e.stringifyQuery||dr,r=e.history,o=Ft(),i=Ft(),a=Ft(),c=mi(Je);let d=Je;pt&&e.scrollBehavior&&"scrollRestoration"in history&&(history.scrollRestoration="manual");const f=In.bind(null,y=>""+y),p=In.bind(null,Gc),g=In.bind(null,cn);function h(y,T){let F,L;return Ao(y)?(F=t.getRecordMatcher(y),L=T):L=y,t.addRoute(L,F)}function m(y){const T=t.getRecordMatcher(y);T&&t.removeRoute(T)}function E(){return t.getRoutes().map(y=>y.record)}function x(y){return!!t.getRecordMatcher(y)}function v(y,T){if(T=Q({},T||c.value),typeof y=="string"){const u=Tn(n,y,T.path),_=t.resolve({path:u.path},T),w=r.createHref(u.fullPath);return Q(u,_,{params:g(_.params),hash:cn(u.hash),redirectedFrom:void 0,href:w})}let F;if("path"in y)F=Q({},y,{path:Tn(n,y.path,T.path).path});else{const u=Q({},y.params);for(const _ in u)u[_]==null&&delete u[_];F=Q({},y,{params:p(u)}),T.params=p(T.params)}const L=t.resolve(F,T),z=y.hash||"";L.params=f(g(L.params));const Z=ic(s,Q({},y,{hash:zc(z),path:L.path})),l=r.createHref(Z);return Q({fullPath:Z,hash:z,query:s===dr?Zc(y.query):y.query||{}},L,{redirectedFrom:void 0,href:l})}function O(y){return typeof y=="string"?Tn(n,y,c.value.path):Q({},y)}function R(y,T){if(d!==y)return Rt(8,{from:T,to:y})}function $(y){return ce(y)}function U(y){return $(Q(O(y),{replace:!0}))}function N(y){const T=y.matched[y.matched.length-1];if(T&&T.redirect){const{redirect:F}=T;let L=typeof F=="function"?F(y):F;return typeof L=="string"&&(L=L.includes("?")||L.includes("#")?L=O(L):{path:L},L.params={}),Q({query:y.query,hash:y.hash,params:"path"in L?{}:y.params},L)}}function ce(y,T){const F=d=v(y),L=c.value,z=y.state,Z=y.force,l=y.replace===!0,u=N(F);if(u)return ce(Q(O(u),{state:typeof u=="object"?Q({},z,u.state):z,force:Z,replace:l}),T||F);const _=F;_.redirectedFrom=T;let w;return!Z&&lc(s,L,F)&&(w=Rt(16,{to:_,from:L}),pe(L,L,!0,!1)),(w?Promise.resolve(w):he(_,L)).catch(b=>Ke(b)?Ke(b,2)?b:ae(b):W(b,_,L)).then(b=>{if(b){if(Ke(b,2))return ce(Q({replace:l},O(b.to),{state:typeof b.to=="object"?Q({},z,b.to.state):z,force:Z}),T||_)}else b=ue(_,L,!0,l,z);return be(_,L,b),b})}function se(y,T){const F=R(y,T);return F?Promise.reject(F):Promise.resolve()}function Re(y){const T=Ze.values().next().value;return T&&typeof T.runWithContext=="function"?T.runWithContext(y):y()}function he(y,T){let F;const[L,z,Z]=ra(y,T);F=kn(L.reverse(),"beforeRouteLeave",y,T);for(const u of L)u.leaveGuards.forEach(_=>{F.push(nt(_,y,T))});const l=se.bind(null,y,T);return F.push(l),ie(F).then(()=>{F=[];for(const u of o.list())F.push(nt(u,y,T));return F.push(l),ie(F)}).then(()=>{F=kn(z,"beforeRouteUpdate",y,T);for(const u of z)u.updateGuards.forEach(_=>{F.push(nt(_,y,T))});return F.push(l),ie(F)}).then(()=>{F=[];for(const u of Z)if(u.beforeEnter)if(Ne(u.beforeEnter))for(const _ of u.beforeEnter)F.push(nt(_,y,T));else F.push(nt(u.beforeEnter,y,T));return F.push(l),ie(F)}).then(()=>(y.matched.forEach(u=>u.enterCallbacks={}),F=kn(Z,"beforeRouteEnter",y,T),F.push(l),ie(F))).then(()=>{F=[];for(const u of i.list())F.push(nt(u,y,T));return F.push(l),ie(F)}).catch(u=>Ke(u,8)?u:Promise.reject(u))}function be(y,T,F){a.list().forEach(L=>Re(()=>L(y,T,F)))}function ue(y,T,F,L,z){const Z=R(y,T);if(Z)return Z;const l=T===Je,u=pt?history.state:{};F&&(L||l?r.replace(y.fullPath,Q({scroll:l&&u&&u.scroll},z)):r.push(y.fullPath,z)),c.value=y,pe(y,T,F,l),ae()}let Pe;function Ye(){Pe||(Pe=r.listen((y,T,F)=>{if(!Se.listening)return;const L=v(y),z=N(L);if(z){ce(Q(z,{replace:!0}),L).catch(Lt);return}d=L;const Z=c.value;pt&&gc(rr(Z.fullPath,F.delta),En()),he(L,Z).catch(l=>Ke(l,12)?l:Ke(l,2)?(ce(l.to,L).then(u=>{Ke(u,20)&&!F.delta&&F.type===Vt.pop&&r.go(-1,!1)}).catch(Lt),Promise.reject()):(F.delta&&r.go(-F.delta,!1),W(l,L,Z))).then(l=>{l=l||ue(L,Z,!1),l&&(F.delta&&!Ke(l,8)?r.go(-F.delta,!1):F.type===Vt.pop&&Ke(l,20)&&r.go(-1,!1)),be(L,Z,l)}).catch(Lt)}))}let Ue=Ft(),le=Ft(),Y;function W(y,T,F){ae(y);const L=le.list();return L.length?L.forEach(z=>z(y,T,F)):console.error(y),Promise.reject(y)}function X(){return Y&&c.value!==Je?Promise.resolve():new Promise((y,T)=>{Ue.add([y,T])})}function ae(y){return Y||(Y=!y,Ye(),Ue.list().forEach(([T,F])=>y?F(y):T()),Ue.reset()),y}function pe(y,T,F,L){const{scrollBehavior:z}=e;if(!pt||!z)return Promise.resolve();const Z=!F&&mc(rr(y.fullPath,0))||(L||!F)&&history.state&&history.state.scroll||null;return Gr().then(()=>z(y,T,Z)).then(l=>l&&pc(l)).catch(l=>W(l,y,T))}const ee=y=>r.go(y);let Ie;const Ze=new Set,Se={currentRoute:c,listening:!0,addRoute:h,removeRoute:m,hasRoute:x,getRoutes:E,resolve:v,options:e,push:$,replace:U,go:ee,back:()=>ee(-1),forward:()=>ee(1),beforeEach:o.add,beforeResolve:i.add,afterEach:a.add,onError:le.add,isReady:X,install(y){const T=this;y.component("RouterLink",Qn),y.component("RouterView",ko),y.config.globalProperties.$router=T,Object.defineProperty(y.config.globalProperties,"$route",{enumerable:!0,get:()=>We(c)}),pt&&!Ie&&c.value===Je&&(Ie=!0,$(r.location).catch(z=>{}));const F={};for(const z in Je)Object.defineProperty(F,z,{get:()=>c.value[z],enumerable:!0});y.provide(bs,T),y.provide(To,Dr(F)),y.provide(Zn,c);const L=y.unmount;Ze.add(y),y.unmount=function(){Ze.delete(y),Ze.size<1&&(d=Je,Pe&&Pe(),Pe=null,c.value=Je,Ie=!1,Y=!1),L()}}};function ie(y){return y.reduce((T,F)=>T.then(()=>Re(F)),Promise.resolve())}return Se}function ra(e,t){const n=[],s=[],r=[],o=Math.max(t.matched.length,e.matched.length);for(let i=0;iAt(d,a))?s.push(a):n.push(a));const c=e.matched[i];c&&(t.matched.find(d=>At(d,c))||r.push(c))}return[n,s,r]}const oa={__name:"App",setup(e){return(t,n)=>(ms(),_o(We(ko)))}},ia="modulepreload",la=function(e){return"/Ibiss/"+e},vr={},re=function(t,n,s){let r=Promise.resolve();if(n&&n.length>0){const o=document.getElementsByTagName("link");r=Promise.all(n.map(i=>{if(i=la(i),i in vr)return;vr[i]=!0;const a=i.endsWith(".css"),c=a?'[rel="stylesheet"]':"";if(!!s)for(let p=o.length-1;p>=0;p--){const g=o[p];if(g.href===i&&(!a||g.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${i}"]${c}`))return;const f=document.createElement("link");if(f.rel=a?"stylesheet":ia,a||(f.as="script",f.crossOrigin=""),f.href=i,document.head.appendChild(f),a)return new Promise((p,g)=>{f.addEventListener("load",p),f.addEventListener("error",()=>g(new Error(`Unable to preload CSS for ${i}`)))})}))}return r.then(()=>t()).catch(o=>{const i=new Event("vite:preloadError",{cancelable:!0});if(i.payload=o,window.dispatchEvent(i),!i.defaultPrevented)throw o})},ca="/Ibiss/ibiss.svg",aa="/Ibiss/aviancss.svg",ua="/Ibiss/flightkit.svg",fa=(e,t)=>{const n=e.__vccOpts||e;for(const[s,r]of t)n[s]=r;return n},Ut=e=>(Ri("data-v-177a07dd"),e=e(),Pi(),e),da={class:"index column"},ha=Ut(()=>Fe("header",{class:"p-5 row align-center gap-5 border-bottom bg-white"},[Fe("img",{src:ca,class:"ibiss-logo"}),Fe("h1",null,"Ibiss UI Documentation")],-1)),pa={class:"card-row row justify-center align-center gap-5"},ga={class:"card shadow"},ma=Ut(()=>Fe("img",{src:aa,class:"avian-logo"},null,-1)),_a=Ut(()=>Fe("span",{class:"normal"},"Go to Avian CSS",-1)),va={class:"card shadow"},ya=Ut(()=>Fe("img",{src:ua,class:"flightkit-logo"},null,-1)),ba=Ut(()=>Fe("span",{class:"normal"},"Go to Flightkit Components",-1)),Ea={__name:"HomeView",setup(e){return(t,n)=>(ms(),pl("main",da,[ha,Fe("section",pa,[Fe("div",ga,[ye(We(Qn),{to:"/aviancss",class:"link-card column align-center justify-around"},{default:Hn(()=>[ma,_a]),_:1})]),Fe("div",va,[ye(We(Qn),{to:"/flightkit",class:"link-card column align-center justify-around p-2"},{default:Hn(()=>[ya,ba]),_:1})])])]))}},xa=fa(Ea,[["__scopeId","data-v-177a07dd"]]),wa=sa({history:Ec(),routes:[{path:"/",name:"home",component:xa},{path:"/aviancss",name:"aviancss",component:()=>re(()=>import("./AvianCss-WgMyDadT.js"),__vite__mapDeps([0,1])),children:[{path:"",name:"avian-index",component:()=>re(()=>import("./index-o_uNWYln.js"),__vite__mapDeps([2,3,4]))},{path:"/typography",name:"avian-typography",component:()=>re(()=>import("./typography-DjZQJvmb.js"),__vite__mapDeps([5,3,4]))},{path:"/variables",name:"avian-variables",component:()=>re(()=>import("./variables-GMhvBMJT.js"),__vite__mapDeps([6,3,4]))},{path:"/buttons",name:"avian-buttons",component:()=>re(()=>import("./buttons-uI-lYFxC.js"),__vite__mapDeps([7,3,4,8]))},{path:"/links",name:"avian-links",component:()=>re(()=>import("./links-SDkZusxL.js"),__vite__mapDeps([9,3,4,10]))},{path:"/inputs",name:"avian-inputs",component:()=>re(()=>import("./inputs-ZhuAj4W0.js"),__vite__mapDeps([11,3,4,12]))},{path:"/responsive",name:"avian-responsive",component:()=>re(()=>import("./responsive-Eyv6JyRG.js"),__vite__mapDeps([13,3,4]))},{path:"/display-utilities",name:"avian-display-utilities",component:()=>re(()=>import("./display-utilities-xZJmg_Yo.js"),__vite__mapDeps([14,3,4]))},{path:"/flex",name:"avian-flex",component:()=>re(()=>import("./flex-lpaTbVbh.js"),__vite__mapDeps([15,3,4]))},{path:"/table",name:"avian-table",component:()=>re(()=>import("./table-JJrmmOSO.js"),__vite__mapDeps([16,3,4,17]))},{path:"/margins-paddings",name:"avian-margins-paddings",component:()=>re(()=>import("./margins-paddings-pBv3rq6V.js"),__vite__mapDeps([18,3,4]))},{path:"/icons",name:"avian-icons",component:()=>re(()=>import("./icons-5NyxgMlK.js"),__vite__mapDeps([19,3,4]))},{path:"/colors",name:"avian-colors",component:()=>re(()=>import("./colors-dq5Vqs6v.js"),__vite__mapDeps([20,3,4]))},{path:"/borders",name:"avian-borders",component:()=>re(()=>import("./borders-b1eVlcgC.js"),__vite__mapDeps([21,3,4]))},{path:"/shadows",name:"avian-shadows",component:()=>re(()=>import("./shadows-u77ef9GU.js"),__vite__mapDeps([22,3,4]))},{path:"/cursors",name:"avian-cursors",component:()=>re(()=>import("./cursors-w9VjsKUQ.js"),__vite__mapDeps([23,3,4]))}]},{path:"/flightkit",name:"flightkit",component:()=>re(()=>import("./Flightkit-mufvNbmj.js"),__vite__mapDeps([24,25])),children:[{path:"",name:"flightkit-index",component:()=>re(()=>import("./index-OflIefYM.js"),__vite__mapDeps([26,3,4]))},{path:"/flightkit-table",name:"flightkit-table",component:()=>re(()=>import("./flightkit-table-KFKGJLsB.js"),__vite__mapDeps([27,3,4,28]))},{path:"/flightkit-draggable",name:"flightkit-draggable",component:()=>re(()=>import("./flightkit-draggable-XzSxuq67.js"),__vite__mapDeps([29,3,4,30]))},{path:"/flightkit-modal",name:"flightkit-modal",component:()=>re(()=>import("./flightkit-modal-5cnDoEg8.js"),__vite__mapDeps([31,3,4,30]))},{path:"/flightkit-dropdown",name:"flightkit-dropdown",component:()=>re(()=>import("./flightkit-dropdown-iPX8F9z6.js"),__vite__mapDeps([32,3,4,28]))}]}]}),Es=Ql(oa);Es.use(nc());Es.use(wa);Es.mount("#app");export{Qn as R,fa as _,ye as a,_l as b,pl as c,Fe as d,Pi as e,aa as f,ko as g,_o as h,Vi as i,ua as j,Ra as k,ms as o,Ri as p,Kr as r,Aa as t,We as u,Hn as w}; function __vite__mapDeps(indexes) { if (!__vite__mapDeps.viteFileDeps) { - __vite__mapDeps.viteFileDeps = ["assets/AvianCss-hDeO_-KP.js","assets/AvianCss-ctZWULKB.css","assets/index-qO81NO9_.js","assets/Card-ptuzLIBJ.js","assets/Card-svrlbane.css","assets/typography-tbpTx10p.js","assets/variables-NwzhEZKM.js","assets/buttons-3gnEpqPa.js","assets/buttons-oM0rKBBv.css","assets/links-eb7vGPsB.js","assets/links-b0yjvb91.css","assets/inputs-obWaPX35.js","assets/inputs-h9ZXVztR.css","assets/responsive-8aUMO2mS.js","assets/display-utilities-ygjEOWnD.js","assets/flex-B4TN6Krl.js","assets/table-sJVToksU.js","assets/table-e4eXK9gV.css","assets/margins-paddings-kqW9AJm8.js","assets/icons-OcuTryEd.js","assets/colors-JgMxzMEd.js","assets/borders-QieI5GCO.js","assets/shadows-VPsMomVp.js","assets/cursors-YEC-ZQDz.js","assets/Flightkit-UnFc9pvA.js","assets/Flightkit-0QOFgep_.css","assets/index-I52BcQX4.js","assets/flightkit-table-TTdG-HNF.js","assets/flightkit-table-VdJf29Fn.css","assets/flightkit-draggable-C4d3H226.js","assets/flightkit-draggable-H9lJ5nd_.css","assets/flightkit-modal-skgdbICb.js","assets/flightkit-dropdown-kjjHl9No.js"] + __vite__mapDeps.viteFileDeps = ["assets/AvianCss-WgMyDadT.js","assets/AvianCss-blN8168m.css","assets/index-o_uNWYln.js","assets/Card-2OCnG6Eh.js","assets/Card-8BPgi-a3.css","assets/typography-DjZQJvmb.js","assets/variables-GMhvBMJT.js","assets/buttons-uI-lYFxC.js","assets/buttons-oM0rKBBv.css","assets/links-SDkZusxL.js","assets/links-eJGNTCtr.css","assets/inputs-ZhuAj4W0.js","assets/inputs-f0tnArN0.css","assets/responsive-Eyv6JyRG.js","assets/display-utilities-xZJmg_Yo.js","assets/flex-lpaTbVbh.js","assets/table-JJrmmOSO.js","assets/table-Lhtj8HUQ.css","assets/margins-paddings-pBv3rq6V.js","assets/icons-5NyxgMlK.js","assets/colors-dq5Vqs6v.js","assets/borders-b1eVlcgC.js","assets/shadows-u77ef9GU.js","assets/cursors-w9VjsKUQ.js","assets/Flightkit-mufvNbmj.js","assets/Flightkit-LgA7x4k0.css","assets/index-OflIefYM.js","assets/flightkit-table-KFKGJLsB.js","assets/flightkit-table-VdJf29Fn.css","assets/flightkit-draggable-XzSxuq67.js","assets/flightkit-draggable-H9lJ5nd_.css","assets/flightkit-modal-5cnDoEg8.js","assets/flightkit-dropdown-iPX8F9z6.js"] } return indexes.map((i) => __vite__mapDeps.viteFileDeps[i]) } diff --git a/docs/assets/index-qO81NO9_.js b/docs/assets/index-o_uNWYln.js similarity index 88% rename from docs/assets/index-qO81NO9_.js rename to docs/assets/index-o_uNWYln.js index 5fe256c..a1144cc 100644 --- a/docs/assets/index-qO81NO9_.js +++ b/docs/assets/index-o_uNWYln.js @@ -1 +1 @@ -import{C as o}from"./Card-ptuzLIBJ.js";import{h as s,w as l,o as n,d as e}from"./index-9HWLB3Yh.js";const t=e("section",null,[e("h1",null,"Welcome!"),e("p",null," I have written this style system so you can quickly make any webpage look consistent and good without having an overkill on features. Keeping its footprint low. And I separated theming. Which means colors, borders, box-shadows, fonts and the like can be adjusted super easy. ")],-1),a=e("section",null,[e("h2",null,"Features"),e("ul",null,[e("li",null,"Out-of-the-box responsive, using flex-box"),e("li",null,"Based on Microsoft Fluent Design."),e("li",null,"Allows for easy theming."),e("li",null,"Built with Less, so you can easily run and modify inside a webbrowser.")])],-1),i=e("section",null,[e("h2",null,"Goal"),e("p",null," My goal is to make the life of fullstack webapplication developers easier by providing a lot of things out-of-the-box so they can focus on the business logic and add value instantly. ")],-1),p={__name:"index",setup(u){return(r,c)=>(n(),s(o,{class:"column gap-5"},{default:l(()=>[t,a,i]),_:1}))}};export{p as default}; +import{C as o}from"./Card-2OCnG6Eh.js";import{h as s,w as l,o as n,d as e}from"./index-Z9theFxX.js";const t=e("section",null,[e("h1",null,"Welcome!"),e("p",null," I have written this style system so you can quickly make any webpage look consistent and good without having an overkill on features. Keeping its footprint low. And I separated theming. Which means colors, borders, box-shadows, fonts and the like can be adjusted super easy. ")],-1),a=e("section",null,[e("h2",null,"Features"),e("ul",null,[e("li",null,"Out-of-the-box responsive, using flex-box"),e("li",null,"Based on Microsoft Fluent Design."),e("li",null,"Allows for easy theming."),e("li",null,"Built with Less, so you can easily run and modify inside a webbrowser.")])],-1),i=e("section",null,[e("h2",null,"Goal"),e("p",null," My goal is to make the life of fullstack webapplication developers easier by providing a lot of things out-of-the-box so they can focus on the business logic and add value instantly. ")],-1),p={__name:"index",setup(u){return(r,c)=>(n(),s(o,{class:"column gap-5"},{default:l(()=>[t,a,i]),_:1}))}};export{p as default}; diff --git a/docs/assets/inputs-obWaPX35.js b/docs/assets/inputs-ZhuAj4W0.js similarity index 97% rename from docs/assets/inputs-obWaPX35.js rename to docs/assets/inputs-ZhuAj4W0.js index 18d92e0..751e50c 100644 --- a/docs/assets/inputs-obWaPX35.js +++ b/docs/assets/inputs-ZhuAj4W0.js @@ -1,4 +1,4 @@ -import{C as s}from"./Card-ptuzLIBJ.js";import{_ as i,i as p,h as u,w as o,o as r,d as t,t as n,p as d,e as c,b as l}from"./index-9HWLB3Yh.js";const e=a=>(d("data-v-03675e22"),a=a(),c(),a),h=e(()=>t("header",null,[t("h1",{class:"mb-2"},"Inputs"),t("hr")],-1)),_=e(()=>t("table",null,[t("tbody",null,[t("tr",null,[t("td",{class:"pr-1"},"Checkbox"),t("td",null,[t("input",{type:"checkbox"})])]),t("tr",null,[t("td",{class:"pr-1"},"Radiobutton"),t("td",null,[t("input",{type:"radio"})])]),t("tr",null,[t("td",{class:"pr-1"},"type: button, value: submit"),t("td",null,[t("input",{type:"button",value:"submit"})])]),t("tr",null,[t("td",{class:"pr-1"},"type: reset"),t("td",null,[t("input",{type:"reset"})])]),t("tr",null,[t("td",{class:"pr-1"},"type: submit"),t("td",null,[t("input",{type:"submit"})])]),t("tr",null,[t("td",{class:"pr-1"},"Email"),t("td",null,[t("input",{type:"email"})])]),t("tr",null,[t("td",{class:"pr-1"},"Password"),t("td",null,[t("input",{type:"password"})])]),t("tr",null,[t("td",{class:"pr-1"},"Search"),t("td",null,[t("input",{type:"search"})])]),t("tr",null,[t("td",{class:"pr-1"},"Text"),t("td",null,[t("input",{type:"text"})])]),t("tr",null,[t("td",{class:"pr-1"},"Url"),t("td",null,[t("input",{type:"url"})])]),t("tr",null,[t("td",{class:"pr-1"},"Number"),t("td",null,[t("input",{type:"number"})])]),t("tr",null,[t("td",{class:"pr-1"},"Range"),t("td",null,[t("input",{type:"range",class:"w-100"})])]),t("tr",null,[t("td",{class:"pr-1"},"Tel (Phonenumber)"),t("td",null,[t("input",{type:"tel"})])]),t("tr",null,[t("td",{class:"pr-1"},"Date"),t("td",null,[t("input",{type:"date"})])]),t("tr",null,[t("td",{class:"pr-1"},"Datetime local"),t("td",null,[t("input",{type:"datetime-local"})])]),t("tr",null,[t("td",{class:"pr-1"},"Time"),t("td",null,[t("input",{type:"time"})])]),t("tr",null,[t("td",{class:"pr-1"},"Month"),t("td",null,[t("input",{type:"month"})])]),t("tr",null,[t("td",{class:"pr-1"},"Week"),t("td",null,[t("input",{type:"week"})])]),t("tr",null,[t("td",{class:"pr-1"},"Color"),t("td",null,[t("input",{type:"color"})])]),t("tr",null,[t("td",{class:"pr-1"},"File"),t("td",null,[t("input",{type:"file"})])]),t("tr",null,[t("td",{class:"pr-1"},"Image"),t("td",null,[t("input",{type:"image"})])]),t("tr",null,[t("td",{class:"pr-1"},"Hidden"),t("td",null,[t("input",{type:"hidden"})])]),t("tr",null,[t("td",{class:"pr-1"},"Select"),t("td",null,[t("select",{name:"fruits",id:"fruit"},[t("option",{value:"apple"},"Apple"),t("option",{value:"banana"},"Banana"),t("option",{value:"pineapple"},"Pineapple"),t("option",{value:"cherry"},"Cherry")])])]),t("tr",null,[t("td",{class:"pr-1 text-top"},"Textarea"),t("td",null,[t("textarea",{cols:"30",rows:"10"})])])])],-1)),y=e(()=>t("h3",{id:"input_modifiers",class:"mt-1"},"Additional input styles",-1)),m=e(()=>t("hr",null,null,-1)),b=e(()=>t("p",null,[l(" You can create a very minimalistic input by adding the "),t("code",{class:"language-html"},"underline"),l(" class. ")],-1)),g=e(()=>t("input",{type:"text",class:"underline",placeholder:"Input with underline class"},null,-1)),v=e(()=>t("p",null,"The invalid and disabled attributes work on all inputs, even textarea.",-1)),x=e(()=>t("p",null,[l(" To disable an input add the "),t("code",{class:"language-html"},"disabled"),l(" attribute: ")],-1)),f=e(()=>t("input",{type:"text",disabled:""},null,-1)),w=e(()=>t("input",{type:"range",disabled:""},null,-1)),k=e(()=>t("input",{type:"number",disabled:""},null,-1)),I=e(()=>t("input",{type:"button",value:"submit",disabled:""},null,-1)),C=e(()=>t("p",null,[l(" To show that an input is invalid add the "),t("code",{class:"language-html"},"invalid"),l(" attribute: ")],-1)),A=e(()=>t("input",{type:"text",invalid:""},null,-1)),T=e(()=>t("p",null,[l(" adding "),t("code",{class:"language-html"},'invalid="false"'),l(" attribute will make it normal again (visual only): ")],-1)),q=e(()=>t("input",{type:"text",invalid:"false"},null,-1)),B=e(()=>t("p",null,[l(" When you use the "),t("code",{class:"language-html"},"required"),l(" attribute on an input, you need to toggle the validness using the "),t("code",{class:"language-html"},'invalid="true" / invalid="false"'),l(" attribute"),t("br")],-1)),P=e(()=>t("p",null,[l(" Input with only "),t("code",{class:"language-html"},"required"),l(" attribute: ")],-1)),S=e(()=>t("input",{type:"text",required:""},null,-1)),D=e(()=>t("p",null,[l(" Input with "),t("code",{class:"language-html"},'required invalid="false"'),l(" attributes: ")],-1)),N=e(()=>t("input",{type:"text",required:""},null,-1)),M=e(()=>t("p",null,[l(" Input with "),t("code",{class:"language-html"},'required invalid="true"'),l(" attributes: ")],-1)),R=e(()=>t("input",{type:"text",invalid:"true",required:""},null,-1)),V=e(()=>t("p",null,"Type a letter in the number input to trigger the webbrowsers built-in invalidation:",-1)),W=e(()=>t("input",{type:"number"},null,-1)),z=e(()=>t("p",null,"A disabled select element:",-1)),E=e(()=>t("select",{name:"fruits",id:"fruit",disabled:"",class:"self-align-start"},[t("option",{value:"apple"},"Apple"),t("option",{value:"banana"},"Banana"),t("option",{value:"pineapple"},"Pineapple"),t("option",{value:"cherry"},"Cherry")],-1)),F=e(()=>t("p",null,"A disabled textarea element:",-1)),H=e(()=>t("textarea",{cols:"6",rows:"3",disabled:""},null,-1)),U=e(()=>t("p",null,"An invalid textarea element:",-1)),Y=e(()=>t("textarea",{cols:"6",rows:"3",invalid:""},null,-1)),j=e(()=>t("b",{class:"font-size-18 mt-5"},"Code examples:",-1)),G=` +import{C as s}from"./Card-2OCnG6Eh.js";import{_ as i,i as p,h as u,w as o,o as r,d as t,t as n,p as d,e as c,b as l}from"./index-Z9theFxX.js";const e=a=>(d("data-v-a782d76a"),a=a(),c(),a),h=e(()=>t("header",null,[t("h1",{class:"mb-2"},"Inputs"),t("hr")],-1)),_=e(()=>t("table",null,[t("tbody",null,[t("tr",null,[t("td",{class:"pr-1"},"Checkbox"),t("td",null,[t("input",{type:"checkbox"})])]),t("tr",null,[t("td",{class:"pr-1"},"Radiobutton"),t("td",null,[t("input",{type:"radio"})])]),t("tr",null,[t("td",{class:"pr-1"},"type: button, value: submit"),t("td",null,[t("input",{type:"button",value:"submit"})])]),t("tr",null,[t("td",{class:"pr-1"},"type: reset"),t("td",null,[t("input",{type:"reset"})])]),t("tr",null,[t("td",{class:"pr-1"},"type: submit"),t("td",null,[t("input",{type:"submit"})])]),t("tr",null,[t("td",{class:"pr-1"},"Email"),t("td",null,[t("input",{type:"email"})])]),t("tr",null,[t("td",{class:"pr-1"},"Password"),t("td",null,[t("input",{type:"password"})])]),t("tr",null,[t("td",{class:"pr-1"},"Search"),t("td",null,[t("input",{type:"search"})])]),t("tr",null,[t("td",{class:"pr-1"},"Text"),t("td",null,[t("input",{type:"text"})])]),t("tr",null,[t("td",{class:"pr-1"},"Url"),t("td",null,[t("input",{type:"url"})])]),t("tr",null,[t("td",{class:"pr-1"},"Number"),t("td",null,[t("input",{type:"number"})])]),t("tr",null,[t("td",{class:"pr-1"},"Range"),t("td",null,[t("input",{type:"range",class:"w-100"})])]),t("tr",null,[t("td",{class:"pr-1"},"Tel (Phonenumber)"),t("td",null,[t("input",{type:"tel"})])]),t("tr",null,[t("td",{class:"pr-1"},"Date"),t("td",null,[t("input",{type:"date"})])]),t("tr",null,[t("td",{class:"pr-1"},"Datetime local"),t("td",null,[t("input",{type:"datetime-local"})])]),t("tr",null,[t("td",{class:"pr-1"},"Time"),t("td",null,[t("input",{type:"time"})])]),t("tr",null,[t("td",{class:"pr-1"},"Month"),t("td",null,[t("input",{type:"month"})])]),t("tr",null,[t("td",{class:"pr-1"},"Week"),t("td",null,[t("input",{type:"week"})])]),t("tr",null,[t("td",{class:"pr-1"},"Color"),t("td",null,[t("input",{type:"color"})])]),t("tr",null,[t("td",{class:"pr-1"},"File"),t("td",null,[t("input",{type:"file"})])]),t("tr",null,[t("td",{class:"pr-1"},"Image"),t("td",null,[t("input",{type:"image"})])]),t("tr",null,[t("td",{class:"pr-1"},"Hidden"),t("td",null,[t("input",{type:"hidden"})])]),t("tr",null,[t("td",{class:"pr-1"},"Select"),t("td",null,[t("select",{name:"fruits",id:"fruit"},[t("option",{value:"apple"},"Apple"),t("option",{value:"banana"},"Banana"),t("option",{value:"pineapple"},"Pineapple"),t("option",{value:"cherry"},"Cherry")])])]),t("tr",null,[t("td",{class:"pr-1 text-top"},"Textarea"),t("td",null,[t("textarea",{cols:"30",rows:"10"})])])])],-1)),y=e(()=>t("h3",{id:"input_modifiers",class:"mt-1"},"Additional input styles",-1)),m=e(()=>t("hr",null,null,-1)),b=e(()=>t("p",null,[l(" You can create a very minimalistic input by adding the "),t("code",{class:"language-html"},"underline"),l(" class. ")],-1)),g=e(()=>t("input",{type:"text",class:"underline",placeholder:"Input with underline class"},null,-1)),v=e(()=>t("p",null,"The invalid and disabled attributes work on all inputs, even textarea.",-1)),x=e(()=>t("p",null,[l(" To disable an input add the "),t("code",{class:"language-html"},"disabled"),l(" attribute: ")],-1)),f=e(()=>t("input",{type:"text",disabled:""},null,-1)),w=e(()=>t("input",{type:"range",disabled:""},null,-1)),k=e(()=>t("input",{type:"number",disabled:""},null,-1)),I=e(()=>t("input",{type:"button",value:"submit",disabled:""},null,-1)),C=e(()=>t("p",null,[l(" To show that an input is invalid add the "),t("code",{class:"language-html"},"invalid"),l(" attribute: ")],-1)),A=e(()=>t("input",{type:"text",invalid:""},null,-1)),T=e(()=>t("p",null,[l(" adding "),t("code",{class:"language-html"},'invalid="false"'),l(" attribute will make it normal again (visual only): ")],-1)),q=e(()=>t("input",{type:"text",invalid:"false"},null,-1)),B=e(()=>t("p",null,[l(" When you use the "),t("code",{class:"language-html"},"required"),l(" attribute on an input, you need to toggle the validness using the "),t("code",{class:"language-html"},'invalid="true" / invalid="false"'),l(" attribute"),t("br")],-1)),P=e(()=>t("p",null,[l(" Input with only "),t("code",{class:"language-html"},"required"),l(" attribute: ")],-1)),S=e(()=>t("input",{type:"text",required:""},null,-1)),D=e(()=>t("p",null,[l(" Input with "),t("code",{class:"language-html"},'required invalid="false"'),l(" attributes: ")],-1)),N=e(()=>t("input",{type:"text",required:""},null,-1)),M=e(()=>t("p",null,[l(" Input with "),t("code",{class:"language-html"},'required invalid="true"'),l(" attributes: ")],-1)),R=e(()=>t("input",{type:"text",invalid:"true",required:""},null,-1)),V=e(()=>t("p",null,"Type a letter in the number input to trigger the webbrowsers built-in invalidation:",-1)),W=e(()=>t("input",{type:"number"},null,-1)),z=e(()=>t("p",null,"A disabled select element:",-1)),E=e(()=>t("select",{name:"fruits",id:"fruit",disabled:"",class:"self-align-start"},[t("option",{value:"apple"},"Apple"),t("option",{value:"banana"},"Banana"),t("option",{value:"pineapple"},"Pineapple"),t("option",{value:"cherry"},"Cherry")],-1)),F=e(()=>t("p",null,"A disabled textarea element:",-1)),H=e(()=>t("textarea",{cols:"6",rows:"3",disabled:""},null,-1)),U=e(()=>t("p",null,"An invalid textarea element:",-1)),Y=e(()=>t("textarea",{cols:"6",rows:"3",invalid:""},null,-1)),j=e(()=>t("b",{class:"font-size-18 mt-5"},"Code examples:",-1)),G=` `,J=` `,K=` @@ -33,4 +33,4 @@ import{C as s}from"./Card-ptuzLIBJ.js";import{_ as i,i as p,h as u,w as o,o as r -`,tt={__name:"inputs",setup(a){return p(()=>{Prism.highlightAll()}),(et,lt)=>(r(),u(s,{class:"column gap-5"},{default:o(()=>[t("article",null,[h,t("section",{class:"column no-stretch gap-3"},[_,y,m,b,g,v,x,f,w,k,I,C,A,T,q,B,P,S,D,N,M,R,V,W,z,E,F,H,U,Y,j,t("pre",{class:"border stretch"},[t("code",{class:"language-html"},n(J))]),t("pre",{class:"border stretch"},[t("code",{class:"language-html"},n(G))]),t("pre",{class:"border stretch"},[t("code",{class:"language-html"},n(O))]),t("pre",{class:"border stretch"},[t("code",{class:"language-html"},n(Q))]),t("pre",{class:"border stretch"},[t("code",{class:"language-html"},n(X))]),t("pre",{class:"border stretch"},[t("code",{class:"language-html"},n(Z))]),t("pre",{class:"border stretch"},[t("code",{class:"language-html"},n($))]),t("pre",{class:"border stretch"},[t("code",{class:"language-html"},n(L))]),t("pre",{class:"border stretch"},[t("code",{class:"language-html"},n(K))])])])]),_:1}))}},st=i(tt,[["__scopeId","data-v-03675e22"]]);export{st as default}; +`,tt={__name:"inputs",setup(a){return p(()=>{Prism.highlightAll()}),(et,lt)=>(r(),u(s,{class:"column gap-5"},{default:o(()=>[t("article",null,[h,t("section",{class:"column no-stretch gap-3"},[_,y,m,b,g,v,x,f,w,k,I,C,A,T,q,B,P,S,D,N,M,R,V,W,z,E,F,H,U,Y,j,t("pre",{class:"border stretch"},[t("code",{class:"language-html"},n(J))]),t("pre",{class:"border stretch"},[t("code",{class:"language-html"},n(G))]),t("pre",{class:"border stretch"},[t("code",{class:"language-html"},n(O))]),t("pre",{class:"border stretch"},[t("code",{class:"language-html"},n(Q))]),t("pre",{class:"border stretch"},[t("code",{class:"language-html"},n(X))]),t("pre",{class:"border stretch"},[t("code",{class:"language-html"},n(Z))]),t("pre",{class:"border stretch"},[t("code",{class:"language-html"},n($))]),t("pre",{class:"border stretch"},[t("code",{class:"language-html"},n(L))]),t("pre",{class:"border stretch"},[t("code",{class:"language-html"},n(K))])])])]),_:1}))}},st=i(tt,[["__scopeId","data-v-a782d76a"]]);export{st as default}; diff --git a/docs/assets/inputs-f0tnArN0.css b/docs/assets/inputs-f0tnArN0.css new file mode 100644 index 0000000..5f40cf8 --- /dev/null +++ b/docs/assets/inputs-f0tnArN0.css @@ -0,0 +1 @@ +input[data-v-a782d76a],textarea[data-v-a782d76a]{max-width:fit-content}[type=color][data-v-a782d76a]{max-width:8rem;width:8rem}.text-top[data-v-a782d76a]{text-align:top} diff --git a/docs/assets/inputs-h9ZXVztR.css b/docs/assets/inputs-h9ZXVztR.css deleted file mode 100644 index 42f4ab1..0000000 --- a/docs/assets/inputs-h9ZXVztR.css +++ /dev/null @@ -1 +0,0 @@ -input[data-v-03675e22],textarea[data-v-03675e22]{max-width:fit-content}[type=color][data-v-03675e22]{max-width:8rem;width:8rem}.text-top[data-v-03675e22]{text-align:top} diff --git a/docs/assets/links-eb7vGPsB.js b/docs/assets/links-SDkZusxL.js similarity index 79% rename from docs/assets/links-eb7vGPsB.js rename to docs/assets/links-SDkZusxL.js index e5dce32..f42f16f 100644 --- a/docs/assets/links-eb7vGPsB.js +++ b/docs/assets/links-SDkZusxL.js @@ -1,4 +1,4 @@ -import{C as s}from"./Card-ptuzLIBJ.js";import{_ as e,i as l,h as o,w as c,o as r,d as a,t as i,p as d,e as h}from"./index-9HWLB3Yh.js";const n=t=>(d("data-v-15c0d09f"),t=t(),h(),t),u=n(()=>a("header",null,[a("h1",{class:"mb-2"},"Links"),a("hr")],-1)),b=n(()=>a("section",{class:"column gap-5 mb-5"},[a("a",{href:""},"A standard link"),a("a",{href:"",class:"accent"},"An accent colored link"),a("a",{href:"",class:"danger"},"A danger colored link"),a("a",{href:"",class:"contrast"},"A contrast colored link"),a("a",{href:"",class:"button"},"A link as a button"),a("a",{href:"",class:"button normal"},"A link as normal button"),a("a",{href:"",class:"button primary"},"A link as primary button"),a("a",{href:"",class:"button accent"},"A link as accent button"),a("a",{href:"",class:"button contrast"},"A link as contrast button"),a("a",{href:"",class:"button danger"},"A link as danger button"),a("a",{href:"",class:"button danger disabled"},"A link as button with the disabled class")],-1)),f=`A standard link +import{C as s}from"./Card-2OCnG6Eh.js";import{_ as e,i as l,h as o,w as r,o as c,d as a,t as i,p as d,e as h}from"./index-Z9theFxX.js";const n=t=>(d("data-v-a43791b8"),t=t(),h(),t),u=n(()=>a("header",null,[a("h1",{class:"mb-2"},"Links"),a("hr")],-1)),b=n(()=>a("section",{class:"column gap-5 mb-5"},[a("a",{href:""},"A standard link"),a("a",{href:"",class:"accent"},"An accent colored link"),a("a",{href:"",class:"danger"},"A danger colored link"),a("a",{href:"",class:"contrast"},"A contrast colored link"),a("a",{href:"",class:"button"},"A link as a button"),a("a",{href:"",class:"button normal"},"A link as normal button"),a("a",{href:"",class:"button primary"},"A link as primary button"),a("a",{href:"",class:"button accent"},"A link as accent button"),a("a",{href:"",class:"button contrast"},"A link as contrast button"),a("a",{href:"",class:"button danger"},"A link as danger button"),a("a",{href:"",class:"button danger disabled"},"A link as button with the disabled class")],-1)),f=`A standard link An accent colored link A danger colored link A contrast colored link @@ -7,4 +7,4 @@ import{C as s}from"./Card-ptuzLIBJ.js";import{_ as e,i as l,h as o,w as c,o as r A link as primary button A link as accent button A link as danger button -A link as button with the disabled class`,k={__name:"links",setup(t){return l(()=>{Prism.highlightAll()}),(p,A)=>(r(),o(s,{class:"column gap-5"},{default:c(()=>[a("article",null,[u,b,a("pre",{class:"border"},[a("code",{class:"language-html"},i(f))])])]),_:1}))}},g=e(k,[["__scopeId","data-v-15c0d09f"]]);export{g as default}; +A link as button with the disabled class`,k={__name:"links",setup(t){return l(()=>{Prism.highlightAll()}),(p,A)=>(c(),o(s,{class:"column gap-5"},{default:r(()=>[a("article",null,[u,b,a("pre",{class:"border"},[a("code",{class:"language-html"},i(f))])])]),_:1}))}},g=e(k,[["__scopeId","data-v-a43791b8"]]);export{g as default}; diff --git a/docs/assets/links-b0yjvb91.css b/docs/assets/links-b0yjvb91.css deleted file mode 100644 index d68024e..0000000 --- a/docs/assets/links-b0yjvb91.css +++ /dev/null @@ -1 +0,0 @@ -a[data-v-15c0d09f]{max-width:fit-content} diff --git a/docs/assets/links-eJGNTCtr.css b/docs/assets/links-eJGNTCtr.css new file mode 100644 index 0000000..9ebd7bc --- /dev/null +++ b/docs/assets/links-eJGNTCtr.css @@ -0,0 +1 @@ +a[data-v-a43791b8]{max-width:fit-content} diff --git a/docs/assets/margins-paddings-kqW9AJm8.js b/docs/assets/margins-paddings-pBv3rq6V.js similarity index 97% rename from docs/assets/margins-paddings-kqW9AJm8.js rename to docs/assets/margins-paddings-pBv3rq6V.js index b736226..6644746 100644 --- a/docs/assets/margins-paddings-kqW9AJm8.js +++ b/docs/assets/margins-paddings-pBv3rq6V.js @@ -1 +1 @@ -import{C as n}from"./Card-ptuzLIBJ.js";import{h as u,w as d,o as a,d as l,b as t}from"./index-9HWLB3Yh.js";const e=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Margins and Paddings"),l("hr")]),l("section",{class:"column overflow-horizontal gap-2 mb-3"},[l("p",null,[t(" Each version has a number ranging from 0 and 5 and auto. 0 means no padding or margin for that direction. "),l("br")]),l("h3",null,"CSS Variables"),l("hr"),l("p",null,[t(" Each of these variables corresponds directly to the number of the margin / padding class. "),l("br"),t(" So "),l("i",null,"pl-3"),t(" applies the "),l("i",null,"--distance-3"),t(" as padding-left. ")]),l("table",{class:"table fit-content"},[l("thead",null,[l("tr",null,[l("th",null,"Variable"),l("th",null,"Value")])]),l("tbody",null,[l("tr",null,[l("td",null,"--distance-0"),l("td",null,"0")]),l("tr",null,[l("td",null,"--distance-1"),l("td",null,"0.5rem")]),l("tr",null,[l("td",null,"--distance-2"),l("td",null,"1rem")]),l("tr",null,[l("td",null,"--distance-3"),l("td",null,"1.5rem")]),l("tr",null,[l("td",null,"--distance-4"),l("td",null,"2rem")]),l("tr",null,[l("td",null,"--distance-5"),l("td",null,"2.5rem")])]),l("tfoot",null,[l("tr",null,[l("td",{colspan:"2"},"These distances are also used for the .gap classes")])])]),l("p",null," Responsive prefixes that you can use to apply a padding / margin only on a certain screensize: "),l("table",{class:"table fit-content"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"415px"),l("th",null,"576px"),l("th",null,"768px"),l("th",null,"992px")])]),l("tbody",null,[l("tr",null,[l("td",null,".m*"),l("td",null,"X"),l("td",null,"X"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,".t*"),l("td",null,"-"),l("td",null,"-"),l("td",null,"X"),l("td",null,"X")])]),l("tfoot",null," Example: .mp-1, .mm-2, tp-3 etc. ")]),l("h4",null,"Example:"),l("table",{class:"table fit-content"},[l("thead",null,[l("tr",null,[l("th",null,"Padding class"),l("th",null,"Margin class"),l("th",null,"Top"),l("th",null,"Right"),l("th",null,"Bottom"),l("th",null,"Left")])]),l("tbody",null,[l("tr",null,[l("td",null,"p-0"),l("td",null,"m-0"),l("td",null,"0"),l("td",null,"0"),l("td",null,"0"),l("td",null,"0")]),l("tr",null,[l("td",null,"p-1"),l("td",null,"m-1"),l("td",null,"0.5rem"),l("td",null,"0.5rem"),l("td",null,"0.5rem"),l("td",null,"0.5rem")]),l("tr",null,[l("td",null,"pt-auto"),l("td",null,"mt-auto"),l("td",null,"auto"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,"pt-0"),l("td",null,"mt-0"),l("td",null,"0"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,"pt-1"),l("td",null,"mt-1"),l("td",null,"0.5rem"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,"pb-auto"),l("td",null,"mb-auto"),l("td",null,"-"),l("td",null,"-"),l("td",null,"auto"),l("td",null,"-")]),l("tr",null,[l("td",null,"pb-0"),l("td",null,"mb-0"),l("td",null,"-"),l("td",null,"-"),l("td",null,"0"),l("td",null,"-")]),l("tr",null,[l("td",null,"pb-1"),l("td",null,"mb-1"),l("td",null,"-"),l("td",null,"-"),l("td",null,"0.5rem"),l("td",null,"-")]),l("tr",null,[l("td",null,"pl-auto"),l("td",null,"ml-auto"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-"),l("td",null,"auto")]),l("tr",null,[l("td",null,"pl-0"),l("td",null,"ml-0"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-"),l("td",null,"0")]),l("tr",null,[l("td",null,"pl-1"),l("td",null,"ml-1"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-"),l("td",null,"0.5rem")]),l("tr",null,[l("td",null,"pr-auto"),l("td",null,"mr-auto"),l("td",null,"-"),l("td",null,"auto"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,"pr-0"),l("td",null,"mr-0"),l("td",null,"-"),l("td",null,"0"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,"pr-1"),l("td",null,"mr-1"),l("td",null,"-"),l("td",null,"0.5rem"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,"px-auto"),l("td",null,"mx-auto"),l("td",null,"unchanged"),l("td",null,"auto"),l("td",null,"unchanged"),l("td",null,"auto")]),l("tr",null,[l("td",null,"px-0"),l("td",null,"mx-0"),l("td",null,"unchanged"),l("td",null,"0"),l("td",null,"unchanged"),l("td",null,"0")]),l("tr",null,[l("td",null,"px-1"),l("td",null,"mx-1"),l("td",null,"-"),l("td",null,"0.5rem"),l("td",null,"-"),l("td",null,"0.5rem")]),l("tr",null,[l("td",null,"py-auto"),l("td",null,"my-auto"),l("td",null,"auto"),l("td",null,"unchanged"),l("td",null,"auto"),l("td",null,"unchanged")]),l("tr",null,[l("td",null,"py-0"),l("td",null,"my-0"),l("td",null,"0"),l("td",null,"unchanged"),l("td",null,"0"),l("td",null,"unchanged")]),l("tr",null,[l("td",null,"py-1"),l("td",null,"my-1"),l("td",null,"0.5rem"),l("td",null,"-"),l("td",null,"0.5rem"),l("td",null,"-")])])]),l("h4",{class:"my-3"},"Responsive paddings and margins in action:"),l("div",{class:"column mb-5"},[l("span",{class:"mb-3"},"Resize the screen to see it in action:"),l("div",{class:"mobile bg-danger p-3"},"Currently the screen is: Mobile"),l("div",{class:"tablet bg-accent p-3"},"Currently the screen is: Tablet"),l("div",{class:"desktop bg-primary p-3"},"Currently the screen is: Desktop")]),l("div",{class:"row align-start"},[l("div",{class:"bg-primary p-1 tp-3 mp-5 f-25"}," normal padding 1 tablet padding 3 mobile padding 5 "),l("div",{class:"bg-accent p-2 f-25 ml-5 tml-3 mm-1"}," normal left margin 5, tablet left margin 3, mobile margin 1 ")])])],-1),c={__name:"margins-paddings",setup(r){return(s,o)=>(a(),u(n,{class:"column gap-5"},{default:d(()=>[e]),_:1}))}};export{c as default}; +import{C as n}from"./Card-2OCnG6Eh.js";import{h as u,w as d,o as a,d as l,b as t}from"./index-Z9theFxX.js";const e=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Margins and Paddings"),l("hr")]),l("section",{class:"column overflow-horizontal gap-2 mb-3"},[l("p",null,[t(" Each version has a number ranging from 0 and 5 and auto. 0 means no padding or margin for that direction. "),l("br")]),l("h3",null,"CSS Variables"),l("hr"),l("p",null,[t(" Each of these variables corresponds directly to the number of the margin / padding class. "),l("br"),t(" So "),l("i",null,"pl-3"),t(" applies the "),l("i",null,"--distance-3"),t(" as padding-left. ")]),l("table",{class:"table fit-content"},[l("thead",null,[l("tr",null,[l("th",null,"Variable"),l("th",null,"Value")])]),l("tbody",null,[l("tr",null,[l("td",null,"--distance-0"),l("td",null,"0")]),l("tr",null,[l("td",null,"--distance-1"),l("td",null,"0.5rem")]),l("tr",null,[l("td",null,"--distance-2"),l("td",null,"1rem")]),l("tr",null,[l("td",null,"--distance-3"),l("td",null,"1.5rem")]),l("tr",null,[l("td",null,"--distance-4"),l("td",null,"2rem")]),l("tr",null,[l("td",null,"--distance-5"),l("td",null,"2.5rem")])]),l("tfoot",null,[l("tr",null,[l("td",{colspan:"2"},"These distances are also used for the .gap classes")])])]),l("p",null," Responsive prefixes that you can use to apply a padding / margin only on a certain screensize: "),l("table",{class:"table fit-content"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"415px"),l("th",null,"576px"),l("th",null,"768px"),l("th",null,"992px")])]),l("tbody",null,[l("tr",null,[l("td",null,".m*"),l("td",null,"X"),l("td",null,"X"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,".t*"),l("td",null,"-"),l("td",null,"-"),l("td",null,"X"),l("td",null,"X")])]),l("tfoot",null," Example: .mp-1, .mm-2, tp-3 etc. ")]),l("h4",null,"Example:"),l("table",{class:"table fit-content"},[l("thead",null,[l("tr",null,[l("th",null,"Padding class"),l("th",null,"Margin class"),l("th",null,"Top"),l("th",null,"Right"),l("th",null,"Bottom"),l("th",null,"Left")])]),l("tbody",null,[l("tr",null,[l("td",null,"p-0"),l("td",null,"m-0"),l("td",null,"0"),l("td",null,"0"),l("td",null,"0"),l("td",null,"0")]),l("tr",null,[l("td",null,"p-1"),l("td",null,"m-1"),l("td",null,"0.5rem"),l("td",null,"0.5rem"),l("td",null,"0.5rem"),l("td",null,"0.5rem")]),l("tr",null,[l("td",null,"pt-auto"),l("td",null,"mt-auto"),l("td",null,"auto"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,"pt-0"),l("td",null,"mt-0"),l("td",null,"0"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,"pt-1"),l("td",null,"mt-1"),l("td",null,"0.5rem"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,"pb-auto"),l("td",null,"mb-auto"),l("td",null,"-"),l("td",null,"-"),l("td",null,"auto"),l("td",null,"-")]),l("tr",null,[l("td",null,"pb-0"),l("td",null,"mb-0"),l("td",null,"-"),l("td",null,"-"),l("td",null,"0"),l("td",null,"-")]),l("tr",null,[l("td",null,"pb-1"),l("td",null,"mb-1"),l("td",null,"-"),l("td",null,"-"),l("td",null,"0.5rem"),l("td",null,"-")]),l("tr",null,[l("td",null,"pl-auto"),l("td",null,"ml-auto"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-"),l("td",null,"auto")]),l("tr",null,[l("td",null,"pl-0"),l("td",null,"ml-0"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-"),l("td",null,"0")]),l("tr",null,[l("td",null,"pl-1"),l("td",null,"ml-1"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-"),l("td",null,"0.5rem")]),l("tr",null,[l("td",null,"pr-auto"),l("td",null,"mr-auto"),l("td",null,"-"),l("td",null,"auto"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,"pr-0"),l("td",null,"mr-0"),l("td",null,"-"),l("td",null,"0"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,"pr-1"),l("td",null,"mr-1"),l("td",null,"-"),l("td",null,"0.5rem"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,"px-auto"),l("td",null,"mx-auto"),l("td",null,"unchanged"),l("td",null,"auto"),l("td",null,"unchanged"),l("td",null,"auto")]),l("tr",null,[l("td",null,"px-0"),l("td",null,"mx-0"),l("td",null,"unchanged"),l("td",null,"0"),l("td",null,"unchanged"),l("td",null,"0")]),l("tr",null,[l("td",null,"px-1"),l("td",null,"mx-1"),l("td",null,"-"),l("td",null,"0.5rem"),l("td",null,"-"),l("td",null,"0.5rem")]),l("tr",null,[l("td",null,"py-auto"),l("td",null,"my-auto"),l("td",null,"auto"),l("td",null,"unchanged"),l("td",null,"auto"),l("td",null,"unchanged")]),l("tr",null,[l("td",null,"py-0"),l("td",null,"my-0"),l("td",null,"0"),l("td",null,"unchanged"),l("td",null,"0"),l("td",null,"unchanged")]),l("tr",null,[l("td",null,"py-1"),l("td",null,"my-1"),l("td",null,"0.5rem"),l("td",null,"-"),l("td",null,"0.5rem"),l("td",null,"-")])])]),l("h4",{class:"my-3"},"Responsive paddings and margins in action:"),l("div",{class:"column mb-5"},[l("span",{class:"mb-3"},"Resize the screen to see it in action:"),l("div",{class:"mobile bg-danger p-3"},"Currently the screen is: Mobile"),l("div",{class:"tablet bg-accent p-3"},"Currently the screen is: Tablet"),l("div",{class:"desktop bg-primary p-3"},"Currently the screen is: Desktop")]),l("div",{class:"row align-start"},[l("div",{class:"bg-primary p-1 tp-3 mp-5 f-25"}," normal padding 1 tablet padding 3 mobile padding 5 "),l("div",{class:"bg-accent p-2 f-25 ml-5 tml-3 mm-1"}," normal left margin 5, tablet left margin 3, mobile margin 1 ")])])],-1),c={__name:"margins-paddings",setup(r){return(s,o)=>(a(),u(n,{class:"column gap-5"},{default:d(()=>[e]),_:1}))}};export{c as default}; diff --git a/docs/assets/responsive-8aUMO2mS.js b/docs/assets/responsive-Eyv6JyRG.js similarity index 92% rename from docs/assets/responsive-8aUMO2mS.js rename to docs/assets/responsive-Eyv6JyRG.js index 13e4290..df05401 100644 --- a/docs/assets/responsive-8aUMO2mS.js +++ b/docs/assets/responsive-Eyv6JyRG.js @@ -1 +1 @@ -import{C as t}from"./Card-ptuzLIBJ.js";import{h as n,w as e,o as u,d as l}from"./index-9HWLB3Yh.js";const s=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Responsive hide / show"),l("hr")]),l("section",{class:"column overflow-horizontal mt-5"},[l("h3",null,"Hide / show for Mobile, Tablet and Desktop layout"),l("hr"),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"415px"),l("th",null,"576px"),l("th",null,"768px"),l("th",null,"992px"),l("th",null,"1200px"),l("th",null,"1400px")])]),l("tbody",null,[l("tr",null,[l("td",null,"mobile"),l("td",null,"X"),l("td",null,"X"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,"tablet"),l("td",null,"-"),l("td",null,"-"),l("td",null,"X"),l("td",null,"X"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,"desktop"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-"),l("td",null,"X"),l("td",null,"X")]),l("tr",null,[l("td",null,"small-screen"),l("td",null,"X"),l("td",null,"X"),l("td",null,"X"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,"large-screen"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-"),l("td",null,"X"),l("td",null,"X"),l("td",null,"X")])])]),l("div",{class:"column mt-3"},[l("span",{class:"mb-3"},"Resize the screen to see it in action:"),l("div",{class:"mobile bg-danger p-3"},"Mobile"),l("div",{class:"tablet bg-accent p-3"},"Tablet"),l("div",{class:"desktop bg-primary p-3"},"desktop"),l("div",{class:"small-screen bg-gray p-3"},"small-screen"),l("div",{class:"large-screen bg-gray-dark p-3"},"large-screen")])])],-1),i={__name:"responsive",setup(d){return(a,r)=>(u(),n(t,{class:"column gap-5"},{default:e(()=>[s]),_:1}))}};export{i as default}; +import{C as t}from"./Card-2OCnG6Eh.js";import{h as n,w as e,o as u,d as l}from"./index-Z9theFxX.js";const s=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Responsive hide / show"),l("hr")]),l("section",{class:"column overflow-horizontal mt-5"},[l("h3",null,"Hide / show for Mobile, Tablet and Desktop layout"),l("hr"),l("table",null,[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"415px"),l("th",null,"576px"),l("th",null,"768px"),l("th",null,"992px"),l("th",null,"1200px"),l("th",null,"1400px")])]),l("tbody",null,[l("tr",null,[l("td",null,"mobile"),l("td",null,"X"),l("td",null,"X"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,"tablet"),l("td",null,"-"),l("td",null,"-"),l("td",null,"X"),l("td",null,"X"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,"desktop"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-"),l("td",null,"X"),l("td",null,"X")]),l("tr",null,[l("td",null,"small-screen"),l("td",null,"X"),l("td",null,"X"),l("td",null,"X"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-")]),l("tr",null,[l("td",null,"large-screen"),l("td",null,"-"),l("td",null,"-"),l("td",null,"-"),l("td",null,"X"),l("td",null,"X"),l("td",null,"X")])])]),l("div",{class:"column mt-3"},[l("span",{class:"mb-3"},"Resize the screen to see it in action:"),l("div",{class:"mobile bg-danger p-3"},"Mobile"),l("div",{class:"tablet bg-accent p-3"},"Tablet"),l("div",{class:"desktop bg-primary p-3"},"desktop"),l("div",{class:"small-screen bg-gray p-3"},"small-screen"),l("div",{class:"large-screen bg-gray-dark p-3"},"large-screen")])])],-1),i={__name:"responsive",setup(d){return(a,r)=>(u(),n(t,{class:"column gap-5"},{default:e(()=>[s]),_:1}))}};export{i as default}; diff --git a/docs/assets/shadows-VPsMomVp.js b/docs/assets/shadows-u77ef9GU.js similarity index 94% rename from docs/assets/shadows-VPsMomVp.js rename to docs/assets/shadows-u77ef9GU.js index 79dd825..072cc8e 100644 --- a/docs/assets/shadows-VPsMomVp.js +++ b/docs/assets/shadows-u77ef9GU.js @@ -1 +1 @@ -import{C as t}from"./Card-ptuzLIBJ.js";import{h as a,w as s,o as d,d as l}from"./index-9HWLB3Yh.js";const o=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Shadows"),l("hr")]),l("section",null,[l("table",{class:"no-hover"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Result")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow ")]),l("td",null,[l("div",{class:"shadow p-1 px-3"},"Element with shadow")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow-top ")]),l("td",null,[l("div",{class:"shadow-top p-1 px-3"},"Element with shadow-top")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow-bottom ")]),l("td",null,[l("div",{class:"shadow-bottom p-1 px-3"},"Element with shadow-bottom")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow-left ")]),l("td",null,[l("div",{class:"shadow-left p-1 px-3"},"Element with shadow-left")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow-right ")]),l("td",null,[l("div",{class:"shadow-right p-1 px-3"},"Element with shadow-right")])]),l("tr",null,[l("td",{colspan:"2"},"Large variants")]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow-lg ")]),l("td",null,[l("div",{class:"shadow-lg p-1 px-3"},"Element with shadow")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow-top-lg ")]),l("td",null,[l("div",{class:"shadow-top-lg p-1 px-3"},"Element with shadow-top-lg")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow-bottom-lg ")]),l("td",null,[l("div",{class:"shadow-bottom-lg p-1 px-3"},"Element with shadow-bottom-lg")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow-lg-left ")]),l("td",null,[l("div",{class:"shadow-left-lg p-1 px-3"},"Element with shadow-left-lg")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow-lg-right ")]),l("td",null,[l("div",{class:"shadow-right-lg p-1 px-3"},"Element with shadow-right-lg")])])])])])],-1),w={__name:"shadows",setup(e){return(n,h)=>(d(),a(t,{class:"column gap-5"},{default:s(()=>[o]),_:1}))}};export{w as default}; +import{C as t}from"./Card-2OCnG6Eh.js";import{h as a,w as s,o as d,d as l}from"./index-Z9theFxX.js";const o=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Shadows"),l("hr")]),l("section",null,[l("table",{class:"no-hover"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Result")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow ")]),l("td",null,[l("div",{class:"shadow p-1 px-3"},"Element with shadow")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow-top ")]),l("td",null,[l("div",{class:"shadow-top p-1 px-3"},"Element with shadow-top")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow-bottom ")]),l("td",null,[l("div",{class:"shadow-bottom p-1 px-3"},"Element with shadow-bottom")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow-left ")]),l("td",null,[l("div",{class:"shadow-left p-1 px-3"},"Element with shadow-left")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow-right ")]),l("td",null,[l("div",{class:"shadow-right p-1 px-3"},"Element with shadow-right")])]),l("tr",null,[l("td",{colspan:"2"},"Large variants")]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow-lg ")]),l("td",null,[l("div",{class:"shadow-lg p-1 px-3"},"Element with shadow")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow-top-lg ")]),l("td",null,[l("div",{class:"shadow-top-lg p-1 px-3"},"Element with shadow-top-lg")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow-bottom-lg ")]),l("td",null,[l("div",{class:"shadow-bottom-lg p-1 px-3"},"Element with shadow-bottom-lg")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow-lg-left ")]),l("td",null,[l("div",{class:"shadow-left-lg p-1 px-3"},"Element with shadow-left-lg")])]),l("tr",null,[l("td",null,[l("code",{class:"language-html"},"shadow-lg-right ")]),l("td",null,[l("div",{class:"shadow-right-lg p-1 px-3"},"Element with shadow-right-lg")])])])])])],-1),w={__name:"shadows",setup(e){return(n,h)=>(d(),a(t,{class:"column gap-5"},{default:s(()=>[o]),_:1}))}};export{w as default}; diff --git a/docs/assets/table-sJVToksU.js b/docs/assets/table-JJrmmOSO.js similarity index 97% rename from docs/assets/table-sJVToksU.js rename to docs/assets/table-JJrmmOSO.js index cf6abbc..c382b26 100644 --- a/docs/assets/table-sJVToksU.js +++ b/docs/assets/table-JJrmmOSO.js @@ -1,4 +1,4 @@ -import{C as u}from"./Card-ptuzLIBJ.js";import{_ as e,i as a,h as r,w as o,o as h,d as t,t as s,p as c,e as b,b as l}from"./index-9HWLB3Yh.js";const d=n=>(c("data-v-7f0b08dc"),n=n(),b(),n),p=d(()=>t("header",null,[t("h1",null,"Table"),t("hr")],-1)),i=d(()=>t("div",{class:"body column no-stretch gap-3"},[t("p",null,"Default table"),t("table",null,[t("thead",null,[t("tr",null,[t("th",null,"Column header 1"),t("th",null,"Column header 2"),t("th",null,"Column header 3")])]),t("tbody",null,[t("tr",null,[t("td",null,"A"),t("td",null,"B"),t("td",null,"C")]),t("tr",null,[t("td",null,"D"),t("td",null,"E"),t("td",null,"F")]),t("tr",null,[t("td",null,"G"),t("td",null,"H"),t("td",null,"I")])]),t("tfoot",null,[t("tr",null,[t("td",{colspan:"3"},"Table footer with colspan 3")])])]),t("p",null,[l("Table with the "),t("code",null,"no-hover"),l("class:")]),t("table",{class:"no-hover"},[t("thead",null,[t("tr",null,[t("th",null,"Column header 1"),t("th",null,"Column header 2"),t("th",null,"Column header 3")])]),t("tbody",null,[t("tr",null,[t("td",null,"A"),t("td",null,"B"),t("td",null,"C")]),t("tr",null,[t("td",null,"D"),t("td",null,"E"),t("td",null,"F")]),t("tr",null,[t("td",null,"G"),t("td",null,"H"),t("td",null,"I")])]),t("tfoot",null,[t("tr",null,[t("td",{colspan:"3"},"Table footer with colspan 3")])])]),t("p",null,[l("A table with the "),t("code",{class:"language-html"},"table"),l(" class.")]),t("table",{class:"table"},[t("thead",null,[t("tr",null,[t("th",null,"Column header 1"),t("th",null,"Column header 2"),t("th",null,"Column header 3")])]),t("tbody",null,[t("tr",null,[t("td",null,"A"),t("td",null,"B"),t("td",null,"C")]),t("tr",null,[t("td",null,"D"),t("td",null,"E"),t("td",null,"F")]),t("tr",null,[t("td",null,"G"),t("td",null,"H"),t("td",null,"I")])]),t("tfoot",null,[t("tr",null,[t("td",{colspan:"3"},"Table footer with colspan 3")])])]),t("p",null,"With a sticky header:"),t("div",{class:"table-container",style:{height:"12vh"}},[t("table",{class:"table sticky-header"},[t("thead",null,[t("tr",null,[t("th",null,"Column 1"),t("th",null,"Column 2"),t("th",null,"Column 3")])]),t("tbody",null,[t("tr",null,[t("td",null,"A"),t("td",null,"B"),t("td",null,"C")]),t("tr",null,[t("td",null,"D"),t("td",null,"E"),t("td",null,"F")]),t("tr",null,[t("td",null,"G"),t("td",null,"H"),t("td",null,"I")]),t("tr",null,[t("td",null,"J"),t("td",null,"K"),t("td",null,"L")]),t("tr",null,[t("td",null,"M"),t("td",null,"N"),t("td",null,"O")]),t("tr",null,[t("td",null,"P"),t("td",null,"Q"),t("td",null,"R")]),t("tr",null,[t("td",null,"S"),t("td",null,"T"),t("td",null,"U")]),t("tr",null,[t("td",null,"V"),t("td",null,"W"),t("td",null,"X")]),t("tr",null,[t("td",null,"Y"),t("td",null,"Z"),t("td",null,"-")])]),t("tfoot",null,[t("tr",null,[t("td",{colspan:"3"},"Table footer with colspan 3")])])])]),t("p",null,[l(" A table with the "),t("code",{class:"language-html"},"table"),l(" and "),t("code",{class:"language-html"},"striped"),l(" class. ")]),t("table",{class:"table striped"},[t("thead",null,[t("tr",null,[t("th",null,"Column header 1"),t("th",null,"Column header 2"),t("th",null,"Column header 3")])]),t("tbody",null,[t("tr",null,[t("td",null,"A"),t("td",null,"B"),t("td",null,"C")]),t("tr",null,[t("td",null,"D"),t("td",null,"E"),t("td",null,"F")]),t("tr",null,[t("td",null,"G"),t("td",null,"H"),t("td",null,"I")])])])],-1)),m=` +import{C as u}from"./Card-2OCnG6Eh.js";import{_ as e,i as a,h as r,w as o,o as h,d as t,t as s,p as c,e as b,b as l}from"./index-Z9theFxX.js";const d=n=>(c("data-v-8d506f9d"),n=n(),b(),n),p=d(()=>t("header",null,[t("h1",null,"Table"),t("hr")],-1)),i=d(()=>t("div",{class:"body column no-stretch gap-3"},[t("p",null,"Default table"),t("table",null,[t("thead",null,[t("tr",null,[t("th",null,"Column header 1"),t("th",null,"Column header 2"),t("th",null,"Column header 3")])]),t("tbody",null,[t("tr",null,[t("td",null,"A"),t("td",null,"B"),t("td",null,"C")]),t("tr",null,[t("td",null,"D"),t("td",null,"E"),t("td",null,"F")]),t("tr",null,[t("td",null,"G"),t("td",null,"H"),t("td",null,"I")])]),t("tfoot",null,[t("tr",null,[t("td",{colspan:"3"},"Table footer with colspan 3")])])]),t("p",null,[l("Table with the "),t("code",null,"no-hover"),l("class:")]),t("table",{class:"no-hover"},[t("thead",null,[t("tr",null,[t("th",null,"Column header 1"),t("th",null,"Column header 2"),t("th",null,"Column header 3")])]),t("tbody",null,[t("tr",null,[t("td",null,"A"),t("td",null,"B"),t("td",null,"C")]),t("tr",null,[t("td",null,"D"),t("td",null,"E"),t("td",null,"F")]),t("tr",null,[t("td",null,"G"),t("td",null,"H"),t("td",null,"I")])]),t("tfoot",null,[t("tr",null,[t("td",{colspan:"3"},"Table footer with colspan 3")])])]),t("p",null,[l("A table with the "),t("code",{class:"language-html"},"table"),l(" class.")]),t("table",{class:"table"},[t("thead",null,[t("tr",null,[t("th",null,"Column header 1"),t("th",null,"Column header 2"),t("th",null,"Column header 3")])]),t("tbody",null,[t("tr",null,[t("td",null,"A"),t("td",null,"B"),t("td",null,"C")]),t("tr",null,[t("td",null,"D"),t("td",null,"E"),t("td",null,"F")]),t("tr",null,[t("td",null,"G"),t("td",null,"H"),t("td",null,"I")])]),t("tfoot",null,[t("tr",null,[t("td",{colspan:"3"},"Table footer with colspan 3")])])]),t("p",null,"With a sticky header:"),t("div",{class:"table-container",style:{height:"12vh"}},[t("table",{class:"table sticky-header"},[t("thead",null,[t("tr",null,[t("th",null,"Column 1"),t("th",null,"Column 2"),t("th",null,"Column 3")])]),t("tbody",null,[t("tr",null,[t("td",null,"A"),t("td",null,"B"),t("td",null,"C")]),t("tr",null,[t("td",null,"D"),t("td",null,"E"),t("td",null,"F")]),t("tr",null,[t("td",null,"G"),t("td",null,"H"),t("td",null,"I")]),t("tr",null,[t("td",null,"J"),t("td",null,"K"),t("td",null,"L")]),t("tr",null,[t("td",null,"M"),t("td",null,"N"),t("td",null,"O")]),t("tr",null,[t("td",null,"P"),t("td",null,"Q"),t("td",null,"R")]),t("tr",null,[t("td",null,"S"),t("td",null,"T"),t("td",null,"U")]),t("tr",null,[t("td",null,"V"),t("td",null,"W"),t("td",null,"X")]),t("tr",null,[t("td",null,"Y"),t("td",null,"Z"),t("td",null,"-")])]),t("tfoot",null,[t("tr",null,[t("td",{colspan:"3"},"Table footer with colspan 3")])])])]),t("p",null,[l(" A table with the "),t("code",{class:"language-html"},"table"),l(" and "),t("code",{class:"language-html"},"striped"),l(" class. ")]),t("table",{class:"table striped"},[t("thead",null,[t("tr",null,[t("th",null,"Column header 1"),t("th",null,"Column header 2"),t("th",null,"Column header 3")])]),t("tbody",null,[t("tr",null,[t("td",null,"A"),t("td",null,"B"),t("td",null,"C")]),t("tr",null,[t("td",null,"D"),t("td",null,"E"),t("td",null,"F")]),t("tr",null,[t("td",null,"G"),t("td",null,"H"),t("td",null,"I")])])])],-1)),m=`
@@ -151,4 +151,4 @@ import{C as u}from"./Card-ptuzLIBJ.js";import{_ as e,i as a,h as r,w as o,o as h -
Column header 1I
`,C={__name:"table",setup(n){return a(()=>{Prism.highlightAll()}),(f,y)=>(h(),r(u,null,{default:o(()=>[t("article",{id:"table",class:"column"},[p,i,t("pre",{class:"border"},[t("code",{class:"language-html"},s(m))])])]),_:1}))}},w=e(C,[["__scopeId","data-v-7f0b08dc"]]);export{w as default}; +`,C={__name:"table",setup(n){return a(()=>{Prism.highlightAll()}),(f,y)=>(h(),r(u,null,{default:o(()=>[t("article",{id:"table",class:"column"},[p,i,t("pre",{class:"border"},[t("code",{class:"language-html"},s(m))])])]),_:1}))}},w=e(C,[["__scopeId","data-v-8d506f9d"]]);export{w as default}; diff --git a/docs/assets/table-Lhtj8HUQ.css b/docs/assets/table-Lhtj8HUQ.css new file mode 100644 index 0000000..1bd063a --- /dev/null +++ b/docs/assets/table-Lhtj8HUQ.css @@ -0,0 +1 @@ +table[data-v-8d506f9d]{max-width:fit-content} diff --git a/docs/assets/table-e4eXK9gV.css b/docs/assets/table-e4eXK9gV.css deleted file mode 100644 index 673a555..0000000 --- a/docs/assets/table-e4eXK9gV.css +++ /dev/null @@ -1 +0,0 @@ -table[data-v-7f0b08dc]{max-width:fit-content} diff --git a/docs/assets/typography-tbpTx10p.js b/docs/assets/typography-DjZQJvmb.js similarity index 97% rename from docs/assets/typography-tbpTx10p.js rename to docs/assets/typography-DjZQJvmb.js index 8b0bd7b..2dfc7d6 100644 --- a/docs/assets/typography-tbpTx10p.js +++ b/docs/assets/typography-DjZQJvmb.js @@ -1 +1 @@ -import{C as t}from"./Card-ptuzLIBJ.js";import{h as u,w as e,o as s,d as l,b as n}from"./index-9HWLB3Yh.js";const d=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Typography"),l("hr")]),l("div",{class:"column ml-1 mb-5 gap-5"},[l("p",null,[n(" Avian uses the following font-size, based on a 62.5% of the default font-size. "),l("br"),n(" This translates to 0.1rem equals 1px. ")]),l("section",{class:"row gap-5"},[l("div",{class:"f-50"},[l("table",{class:"table"},[l("thead",null,[l("tr",null,[l("th",null,"Element"),l("th",null,"Specified font-size"),l("th",null,"Computed pixels"),l("th",null,"CSS variable")])]),l("tbody",null,[l("tr",null,[l("td",null,"h1"),l("td",null,"3.2rem"),l("td",null,"32px"),l("td",null,"--h1-font-size")]),l("tr",null,[l("td",null,"h2"),l("td",null,"3.0rem"),l("td",null,"30px"),l("td",null,"--h2-font-size")]),l("tr",null,[l("td",null,"h3"),l("td",null,"2.8rem"),l("td",null,"28px"),l("td",null,"--h3-font-size")]),l("tr",null,[l("td",null,"h4"),l("td",null,"2.6rem"),l("td",null,"26px"),l("td",null,"--h4-font-size")]),l("tr",null,[l("td",null,"h5"),l("td",null,"2.4rem"),l("td",null,"24px"),l("td",null,"--h5-font-size")]),l("tr",null,[l("td",null,"h6"),l("td",null,"2.2rem"),l("td",null,"22px"),l("td",null,"--h6-font-size")]),l("tr",null,[l("td",null,"label"),l("td",null,"1.6rem"),l("td",null,"16px"),l("td",null,"--label-font-size")]),l("tr",null,[l("td",null,"small"),l("td",null,"1.2rem"),l("td",null,"14px"),l("td",null,"--small-font-size")]),l("tr",null,[l("td",null,"p"),l("td",null,"1.6rem"),l("td",null,"16px"),l("td",null,"--paragraph-font-size")])])])]),l("div",null,[l("h1",null,"Header 1"),l("h2",null,"Header 2"),l("h3",null,"Header 3"),l("h4",null,"Header 4"),l("h5",null,"Header 5"),l("h6",null,"Header 6"),l("label",null,"label"),n(),l("br"),l("small",null,"small"),l("p",null,"Normal text in a paragraph")])]),l("section",null,[l("header",null,[l("h2",null,"Other text elements"),l("hr")]),l("section",{class:"row"},[l("table",{class:"table f-50"},[l("thead",null,[l("tr",null,[l("th",null,"Tag"),l("th",null,"Result")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"abbr")]),l("td",null,[l("abbr",{title:"Abbreviation"},"Abbr.")])]),l("tr",null,[l("td",{class:"row gap-1"},[l("code",null,"strong"),l("code",null,"b")]),l("td",null,[l("strong",null,"Bold")])]),l("tr",null,[l("td",{class:"row gap-1"},[l("code",null,"i"),l("code",null,"em"),l("code",null,"cite")]),l("td",null,[l("em",null,"Italic")])]),l("tr",null,[l("td",null,[l("code",null,"del")]),l("td",null,[l("del",null,"Deleted")])]),l("tr",null,[l("td",null,[l("code",null,"ins")]),l("td",null,[l("ins",null,"Inserted")])]),l("tr",null,[l("td",{class:"row gap-1"},[l("code",null,"kbd"),l("code",null,"code")]),l("td",null,[l("kbd",null,"Ctrl + S")])]),l("tr",null,[l("td",null,[l("code",null,"mark")]),l("td",null,[l("mark",null,"Highlighted")])]),l("tr",null,[l("td",null,[l("code",null,"strike"),l("code",null,"s")]),l("td",null,[l("s",null,"Strikethrough")])]),l("tr",null,[l("td",null,[l("code",null,"small")]),l("td",null,[l("small",null,"Small ")])]),l("tr",null,[l("td",null,[l("code",null,"sub")]),l("td",null,[n("Text "),l("sub",null,"sub")])]),l("tr",null,[l("td",null,[l("code",null,"sup")]),l("td",null,[n("Text "),l("sup",null,"sup")])]),l("tr",null,[l("td",null,[l("code",null,"u")]),l("td",null,[l("u",null,"Underline")])])])])])]),l("section",null,[l("header",null,[l("h2",null,"Text classes"),l("hr")]),l("section",{class:"row gap-5"},[l("div",{class:"f-50"},[l("table",{class:"table"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Font weight"),l("th",null,"CSS Variable")])]),l("tbody",null,[l("tr",null,[l("td",null,"font-weight-normal"),l("td",null,"400"),l("td",null,"--font-weight-normal")]),l("tr",null,[l("td",null,"font-weight-semibold"),l("td",null,"600"),l("td",null,"--font-weight-semibold")]),l("tr",null,[l("td",null,"font-weight-bold"),l("td",null,"700"),l("td",null,"--font-weight-bold")])])])]),l("div",null,[l("h1",{class:"font-weight-normal"},"Header 1 with normal fontweight"),l("span",{class:"font-weight-semibold block"},"Text in semibold"),l("span",{class:"font-weight-bold block"},"Text in bold")]),l("div",{class:"f-50"},[l("table",{class:"table"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Font size")])]),l("tbody",null,[l("tr",null,[l("td",null,"font-size-68"),l("td",null,"6.8rem")]),l("tr",null,[l("td",null,"font-size-42"),l("td",null,"4.2rem")]),l("tr",null,[l("td",null,"font-size-32"),l("td",null,"3.2rem")]),l("tr",null,[l("td",null,"font-size-28"),l("td",null,"2.8rem")]),l("tr",null,[l("td",null,"font-size-24"),l("td",null,"2.4rem")]),l("tr",null,[l("td",null,"font-size-20"),l("td",null,"2rem")]),l("tr",null,[l("td",null,"font-size-18"),l("td",null,"1.8rem")]),l("tr",null,[l("td",null,"font-size-14"),l("td",null,"1.4rem")]),l("tr",null,[l("td",null,"font-size-12"),l("td",null,"1.2rem")]),l("tr",null,[l("td",null,"font-size-10"),l("td",null,"1rem")])])])]),l("div",null,[l("span",{class:"font-size-68 block"},"Size 68"),l("span",{class:"font-size-42 block"},"Size 42"),l("span",{class:"font-size-32 block"},"Size 32"),l("span",{class:"font-size-28 block"},"Size 28"),l("span",{class:"font-size-24 block"},"Size 24"),l("span",{class:"font-size-20 block"},"Size 20"),l("span",{class:"font-size-18 block"},"Size 18"),l("span",{class:"font-size-16 block"},"Size 16"),l("span",{class:"font-size-14 block"},"Size 14"),l("span",{class:"font-size-12 block"},"Size 12"),l("span",{class:"font-size-10 block"},"Size 10")])])])])],-1),h={__name:"typography",setup(a){return(o,r)=>(s(),u(t,{class:"column gap-5"},{default:e(()=>[d]),_:1}))}};export{h as default}; +import{C as t}from"./Card-2OCnG6Eh.js";import{h as u,w as e,o as s,d as l,b as n}from"./index-Z9theFxX.js";const d=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Typography"),l("hr")]),l("div",{class:"column ml-1 mb-5 gap-5"},[l("p",null,[n(" Avian uses the following font-size, based on a 62.5% of the default font-size. "),l("br"),n(" This translates to 0.1rem equals 1px. ")]),l("section",{class:"row gap-5"},[l("div",{class:"f-50"},[l("table",{class:"table"},[l("thead",null,[l("tr",null,[l("th",null,"Element"),l("th",null,"Specified font-size"),l("th",null,"Computed pixels"),l("th",null,"CSS variable")])]),l("tbody",null,[l("tr",null,[l("td",null,"h1"),l("td",null,"3.2rem"),l("td",null,"32px"),l("td",null,"--h1-font-size")]),l("tr",null,[l("td",null,"h2"),l("td",null,"3.0rem"),l("td",null,"30px"),l("td",null,"--h2-font-size")]),l("tr",null,[l("td",null,"h3"),l("td",null,"2.8rem"),l("td",null,"28px"),l("td",null,"--h3-font-size")]),l("tr",null,[l("td",null,"h4"),l("td",null,"2.6rem"),l("td",null,"26px"),l("td",null,"--h4-font-size")]),l("tr",null,[l("td",null,"h5"),l("td",null,"2.4rem"),l("td",null,"24px"),l("td",null,"--h5-font-size")]),l("tr",null,[l("td",null,"h6"),l("td",null,"2.2rem"),l("td",null,"22px"),l("td",null,"--h6-font-size")]),l("tr",null,[l("td",null,"label"),l("td",null,"1.6rem"),l("td",null,"16px"),l("td",null,"--label-font-size")]),l("tr",null,[l("td",null,"small"),l("td",null,"1.2rem"),l("td",null,"14px"),l("td",null,"--small-font-size")]),l("tr",null,[l("td",null,"p"),l("td",null,"1.6rem"),l("td",null,"16px"),l("td",null,"--paragraph-font-size")])])])]),l("div",null,[l("h1",null,"Header 1"),l("h2",null,"Header 2"),l("h3",null,"Header 3"),l("h4",null,"Header 4"),l("h5",null,"Header 5"),l("h6",null,"Header 6"),l("label",null,"label"),n(),l("br"),l("small",null,"small"),l("p",null,"Normal text in a paragraph")])]),l("section",null,[l("header",null,[l("h2",null,"Other text elements"),l("hr")]),l("section",{class:"row"},[l("table",{class:"table f-50"},[l("thead",null,[l("tr",null,[l("th",null,"Tag"),l("th",null,"Result")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"abbr")]),l("td",null,[l("abbr",{title:"Abbreviation"},"Abbr.")])]),l("tr",null,[l("td",{class:"row gap-1"},[l("code",null,"strong"),l("code",null,"b")]),l("td",null,[l("strong",null,"Bold")])]),l("tr",null,[l("td",{class:"row gap-1"},[l("code",null,"i"),l("code",null,"em"),l("code",null,"cite")]),l("td",null,[l("em",null,"Italic")])]),l("tr",null,[l("td",null,[l("code",null,"del")]),l("td",null,[l("del",null,"Deleted")])]),l("tr",null,[l("td",null,[l("code",null,"ins")]),l("td",null,[l("ins",null,"Inserted")])]),l("tr",null,[l("td",{class:"row gap-1"},[l("code",null,"kbd"),l("code",null,"code")]),l("td",null,[l("kbd",null,"Ctrl + S")])]),l("tr",null,[l("td",null,[l("code",null,"mark")]),l("td",null,[l("mark",null,"Highlighted")])]),l("tr",null,[l("td",null,[l("code",null,"strike"),l("code",null,"s")]),l("td",null,[l("s",null,"Strikethrough")])]),l("tr",null,[l("td",null,[l("code",null,"small")]),l("td",null,[l("small",null,"Small ")])]),l("tr",null,[l("td",null,[l("code",null,"sub")]),l("td",null,[n("Text "),l("sub",null,"sub")])]),l("tr",null,[l("td",null,[l("code",null,"sup")]),l("td",null,[n("Text "),l("sup",null,"sup")])]),l("tr",null,[l("td",null,[l("code",null,"u")]),l("td",null,[l("u",null,"Underline")])])])])])]),l("section",null,[l("header",null,[l("h2",null,"Text classes"),l("hr")]),l("section",{class:"row gap-5"},[l("div",{class:"f-50"},[l("table",{class:"table"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Font weight"),l("th",null,"CSS Variable")])]),l("tbody",null,[l("tr",null,[l("td",null,"font-weight-normal"),l("td",null,"400"),l("td",null,"--font-weight-normal")]),l("tr",null,[l("td",null,"font-weight-semibold"),l("td",null,"600"),l("td",null,"--font-weight-semibold")]),l("tr",null,[l("td",null,"font-weight-bold"),l("td",null,"700"),l("td",null,"--font-weight-bold")])])])]),l("div",null,[l("h1",{class:"font-weight-normal"},"Header 1 with normal fontweight"),l("span",{class:"font-weight-semibold block"},"Text in semibold"),l("span",{class:"font-weight-bold block"},"Text in bold")]),l("div",{class:"f-50"},[l("table",{class:"table"},[l("thead",null,[l("tr",null,[l("th",null,"Class"),l("th",null,"Font size")])]),l("tbody",null,[l("tr",null,[l("td",null,"font-size-68"),l("td",null,"6.8rem")]),l("tr",null,[l("td",null,"font-size-42"),l("td",null,"4.2rem")]),l("tr",null,[l("td",null,"font-size-32"),l("td",null,"3.2rem")]),l("tr",null,[l("td",null,"font-size-28"),l("td",null,"2.8rem")]),l("tr",null,[l("td",null,"font-size-24"),l("td",null,"2.4rem")]),l("tr",null,[l("td",null,"font-size-20"),l("td",null,"2rem")]),l("tr",null,[l("td",null,"font-size-18"),l("td",null,"1.8rem")]),l("tr",null,[l("td",null,"font-size-14"),l("td",null,"1.4rem")]),l("tr",null,[l("td",null,"font-size-12"),l("td",null,"1.2rem")]),l("tr",null,[l("td",null,"font-size-10"),l("td",null,"1rem")])])])]),l("div",null,[l("span",{class:"font-size-68 block"},"Size 68"),l("span",{class:"font-size-42 block"},"Size 42"),l("span",{class:"font-size-32 block"},"Size 32"),l("span",{class:"font-size-28 block"},"Size 28"),l("span",{class:"font-size-24 block"},"Size 24"),l("span",{class:"font-size-20 block"},"Size 20"),l("span",{class:"font-size-18 block"},"Size 18"),l("span",{class:"font-size-16 block"},"Size 16"),l("span",{class:"font-size-14 block"},"Size 14"),l("span",{class:"font-size-12 block"},"Size 12"),l("span",{class:"font-size-10 block"},"Size 10")])])])])],-1),h={__name:"typography",setup(a){return(o,r)=>(s(),u(t,{class:"column gap-5"},{default:e(()=>[d]),_:1}))}};export{h as default}; diff --git a/docs/assets/variables-NwzhEZKM.js b/docs/assets/variables-GMhvBMJT.js similarity index 98% rename from docs/assets/variables-NwzhEZKM.js rename to docs/assets/variables-GMhvBMJT.js index d9e3861..afd61b8 100644 --- a/docs/assets/variables-NwzhEZKM.js +++ b/docs/assets/variables-GMhvBMJT.js @@ -1 +1 @@ -import{C as n}from"./Card-ptuzLIBJ.js";import{h as u,w as t,o as d,d as l,b as o}from"./index-9HWLB3Yh.js";const r=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Variables used in Avian CSS"),l("hr")]),l("p",null,[o("These variables are under "),l("code",null,":root { }")]),l("table",{class:"no-hover"},[l("thead",null,[l("tr",null,[l("th",null,"Variable"),l("th",null,"Value")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"--html-background")]),l("td",null,"#faf9f8")]),l("tr",null,[l("td",null,[l("code",null,"--background")]),l("td",null,"#fff")]),l("tr",null,[l("td",null,[l("code",null,"--code-background")]),l("td",null,"#f3f2f1")]),l("tr",null,[l("td",null,[l("code",null,"--overlay-background")]),l("td",null,"0, 0, 0")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-black")]),l("td",null,"#c8c6c4")]),l("tr",null,[l("td",null,[l("code",null,"--font-color")]),l("td",null,"#323130")]),l("tr",null,[l("td",null,[l("code",null,"--shadow-color")]),l("td",null,"0, 0, 0")]),l("tr",null,[l("td",null,[l("code",null,"--hr-color")]),l("td",null,"#d2d0ce")]),l("tr",null,[l("td",null,[l("code",null,"--border-color")]),l("td",null,"#8a8886")]),l("tr",null,[l("td",null,[l("code",null,"--gray")]),l("td",null,"#a19f9d")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-gray")]),l("td",null,"#000")]),l("tr",null,[l("td",null,[l("code",null,"--gray-dark")]),l("td",null,"#605e5c")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-gray-dark")]),l("td",null,"#faf9f8")]),l("tr",null,[l("td",null,[l("code",null,"--gray-darker")]),l("td",null,"#8a8886")]),l("tr",null,[l("td",null,[l("code",null,"--light")]),l("td",null,"#d2d0ce")]),l("tr",null,[l("td",null,[l("code",null,"--black")]),l("td",null,"#000")]),l("tr",null,[l("td",null,[l("code",null,"--white")]),l("td",null,"#fff")]),l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Icons")])]),l("tr"),l("tr",null,[l("td",null,[l("code",null,"--icon")]),l("td",null,"#605e5c")]),l("tr",null,[l("td",null,[l("code",null,"--icon-disabled")]),l("td",null,"#a19f9d")]),l("tr",null,[l("td",null,[l("code",null,"--icon-error")]),l("td",null,"#a80000")]),l("tr",null,[l("td",null,[l("code",null,"--icon-success")]),l("td",null,"#107c10")]),l("tr",null,[l("td",null,[l("code",null,"--icon-warning")]),l("td",null,"#797673")]),l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Colors")])]),l("tr"),l("tr",null,[l("td",null,[l("code",null,"--primary")]),l("td",null,"#0078d4")]),l("tr",null,[l("td",null,[l("code",null,"--primary-hover")]),l("td",null,"#0068b8")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-primary")]),l("td",null,"#fff")]),l("tr",null,[l("td",null,[l("code",null,"--accent")]),l("td",null,"#fce100")]),l("tr",null,[l("td",null,[l("code",null,"--accent-hover")]),l("td",null,"#e6cf00")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-accent")]),l("td",null,"#000")]),l("tr",null,[l("td",null,[l("code",null,"--danger")]),l("td",null,"#d13438")]),l("tr",null,[l("td",null,[l("code",null,"--danger-hover")]),l("td",null,"#bb2a2f")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-danger")]),l("td",null,"#fff")]),l("tr",null,[l("td",null,[l("code",null,"--warning")]),l("td",null,"#fff4ce")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-warning")]),l("td",null,"#323130")]),l("tr",null,[l("td",null,[l("code",null,"--error")]),l("td",null,"#fde7e9")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-error")]),l("td",null,"#323130")]),l("tr",null,[l("td",null,[l("code",null,"--success")]),l("td",null,"#dff6dd")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-success")]),l("td",null,"#323130")]),l("tr",null,[l("td",null,[l("code",null,"--contrast")]),l("td",null,"#ccc")]),l("tr",null,[l("td",null,[l("code",null,"--contrast-hover")]),l("td",null,"#b2b2b2")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-contrast")]),l("td",null,"#000")]),l("tr",null,[l("td",null,[l("code",null,"--disabled")]),l("td",null,"#d2d0ce")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-disabled")]),l("td",null,"#a19f9d")]),l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Inputs and buttons")])]),l("tr"),l("tr",null,[l("td",null,[l("code",null,"--button-background")]),l("td",null,"#fff")]),l("tr",null,[l("td",null,[l("code",null,"--button-hover")]),l("td",null,"#e1dfdd")]),l("tr",null,[l("td",null,[l("code",null,"--button-outline-color")]),l("td",null,"#000")]),l("tr",null,[l("td",null,[l("code",null,"--button-color")]),l("td",null,"#000")]),l("tr",null,[l("td",null,[l("code",null,"--disabled-button-background")]),l("td",null,"#f3f2f1")]),l("tr",null,[l("td",null,[l("code",null,"--disabled-button-color")]),l("td",null,"#a19f9d")]),l("tr",null,[l("td",null,[l("code",null,"--colored-disabled-button-color")]),l("td",null,"#d2d0ce")]),l("tr",null,[l("td",null,[l("code",null,"--input-border-color")]),l("td",null,"#605e5c")]),l("tr",null,[l("td",null,[l("code",null,"--input-hover")]),l("td",null,"#c8c6c4")]),l("tr",null,[l("td",null,[l("code",null,"--range-track-color")]),l("td",null,"#c8c6c4")]),l("tr",null,[l("td",null,[l("code",null,"--range-filled-track-color")]),l("td",null,"#605e5c")]),l("tr",null,[l("td",null,[l("code",null,"--range-track-hover-color")]),l("td",null,"#e0f2ff")]),l("tr",null,[l("td",null,[l("code",null,"--switch-border-color")]),l("td",null,"#000")]),l("tr",null,[l("td",null,[l("code",null,"--switch-toggle-off-color")]),l("td",null,"#000")]),l("tr",null,[l("td",null,[l("code",null,"--switch-toggle-on-color")]),l("td",null,"#fff")]),l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Table")])]),l("tr"),l("tr",null,[l("td",null,[l("code",null,"--table-hover")]),l("td",null,"#e1dfdd")]),l("tr",null,[l("td",null,[l("code",null,"--table-striped-hover")]),l("td",null,"#d2d0ce")]),l("tr",null,[l("td",null,[l("code",null,"--table-stripe")]),l("td",null,"#edebe9")]),l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Distances")])]),l("tr"),l("tr",null,[l("td",null,[l("code",null,"--default-distance")]),l("td",null,"1.5rem")]),l("tr",null,[l("td",null,[l("code",null,"--distance-0")]),l("td",null,"0")]),l("tr",null,[l("td",null,[l("code",null,"--distance-1")]),l("td",null,"0.5rem")]),l("tr",null,[l("td",null,[l("code",null,"--distance-2")]),l("td",null,"1rem")]),l("tr",null,[l("td",null,[l("code",null,"--distance-3")]),l("td",null,"1.5rem")]),l("tr",null,[l("td",null,[l("code",null,"--distance-4")]),l("td",null,"2rem")]),l("tr",null,[l("td",null,[l("code",null,"--distance-5")]),l("td",null,"2.5rem")]),l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Typography | 1 rem = 10 px")])]),l("tr"),l("tr",null,[l("td",null,[l("code",null,"--h1-font-size")]),l("td",null,"3.2rem")]),l("tr",null,[l("td",null,[l("code",null,"--h2-font-size")]),l("td",null,"3rem")]),l("tr",null,[l("td",null,[l("code",null,"--h3-font-size")]),l("td",null,"2.8rem")]),l("tr",null,[l("td",null,[l("code",null,"--h4-font-size")]),l("td",null,"2.6rem")]),l("tr",null,[l("td",null,[l("code",null,"--h5-font-size")]),l("td",null,"2.4rem")]),l("tr",null,[l("td",null,[l("code",null,"--h6-font-size")]),l("td",null,"2.2rem")]),l("tr",null,[l("td",null,[l("code",null,"--th-font-size")]),l("td",null,"2.2rem")]),l("tr",null,[l("td",null,[l("code",null,"--paragraph-font-size")]),l("td",null,"1.6rem")]),l("tr",null,[l("td",null,[l("code",null,"--label-font-size")]),l("td",null,"1.6rem")]),l("tr",null,[l("td",null,[l("code",null,"--small-font-size")]),l("td",null,"1.4rem")]),l("tr",null,[l("td",null,[l("code",null,"--font-weight-normal")]),l("td",null,"400")]),l("tr",null,[l("td",null,[l("code",null,"--font-weight-semibold")]),l("td",null,"600")]),l("tr",null,[l("td",null,[l("code",null,"--font-weight-bold")]),l("td",null,"700")])])])],-1),i={__name:"variables",setup(e){return(c,a)=>(d(),u(n,{class:"column gap-5 pb-3"},{default:t(()=>[r]),_:1}))}};export{i as default}; +import{C as n}from"./Card-2OCnG6Eh.js";import{h as u,w as t,o as d,d as l,b as o}from"./index-Z9theFxX.js";const r=l("article",null,[l("header",null,[l("h1",{class:"mb-2"},"Variables used in Avian CSS"),l("hr")]),l("p",null,[o("These variables are under "),l("code",null,":root { }")]),l("table",{class:"no-hover"},[l("thead",null,[l("tr",null,[l("th",null,"Variable"),l("th",null,"Value")])]),l("tbody",null,[l("tr",null,[l("td",null,[l("code",null,"--html-background")]),l("td",null,"#faf9f8")]),l("tr",null,[l("td",null,[l("code",null,"--background")]),l("td",null,"#fff")]),l("tr",null,[l("td",null,[l("code",null,"--code-background")]),l("td",null,"#f3f2f1")]),l("tr",null,[l("td",null,[l("code",null,"--overlay-background")]),l("td",null,"0, 0, 0")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-black")]),l("td",null,"#c8c6c4")]),l("tr",null,[l("td",null,[l("code",null,"--font-color")]),l("td",null,"#323130")]),l("tr",null,[l("td",null,[l("code",null,"--shadow-color")]),l("td",null,"0, 0, 0")]),l("tr",null,[l("td",null,[l("code",null,"--hr-color")]),l("td",null,"#d2d0ce")]),l("tr",null,[l("td",null,[l("code",null,"--border-color")]),l("td",null,"#8a8886")]),l("tr",null,[l("td",null,[l("code",null,"--gray")]),l("td",null,"#a19f9d")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-gray")]),l("td",null,"#000")]),l("tr",null,[l("td",null,[l("code",null,"--gray-dark")]),l("td",null,"#605e5c")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-gray-dark")]),l("td",null,"#faf9f8")]),l("tr",null,[l("td",null,[l("code",null,"--gray-darker")]),l("td",null,"#8a8886")]),l("tr",null,[l("td",null,[l("code",null,"--light")]),l("td",null,"#d2d0ce")]),l("tr",null,[l("td",null,[l("code",null,"--black")]),l("td",null,"#000")]),l("tr",null,[l("td",null,[l("code",null,"--white")]),l("td",null,"#fff")]),l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Icons")])]),l("tr"),l("tr",null,[l("td",null,[l("code",null,"--icon")]),l("td",null,"#605e5c")]),l("tr",null,[l("td",null,[l("code",null,"--icon-disabled")]),l("td",null,"#a19f9d")]),l("tr",null,[l("td",null,[l("code",null,"--icon-error")]),l("td",null,"#a80000")]),l("tr",null,[l("td",null,[l("code",null,"--icon-success")]),l("td",null,"#107c10")]),l("tr",null,[l("td",null,[l("code",null,"--icon-warning")]),l("td",null,"#797673")]),l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Colors")])]),l("tr"),l("tr",null,[l("td",null,[l("code",null,"--primary")]),l("td",null,"#0078d4")]),l("tr",null,[l("td",null,[l("code",null,"--primary-hover")]),l("td",null,"#0068b8")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-primary")]),l("td",null,"#fff")]),l("tr",null,[l("td",null,[l("code",null,"--accent")]),l("td",null,"#fce100")]),l("tr",null,[l("td",null,[l("code",null,"--accent-hover")]),l("td",null,"#e6cf00")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-accent")]),l("td",null,"#000")]),l("tr",null,[l("td",null,[l("code",null,"--danger")]),l("td",null,"#d13438")]),l("tr",null,[l("td",null,[l("code",null,"--danger-hover")]),l("td",null,"#bb2a2f")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-danger")]),l("td",null,"#fff")]),l("tr",null,[l("td",null,[l("code",null,"--warning")]),l("td",null,"#fff4ce")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-warning")]),l("td",null,"#323130")]),l("tr",null,[l("td",null,[l("code",null,"--error")]),l("td",null,"#fde7e9")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-error")]),l("td",null,"#323130")]),l("tr",null,[l("td",null,[l("code",null,"--success")]),l("td",null,"#dff6dd")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-success")]),l("td",null,"#323130")]),l("tr",null,[l("td",null,[l("code",null,"--contrast")]),l("td",null,"#ccc")]),l("tr",null,[l("td",null,[l("code",null,"--contrast-hover")]),l("td",null,"#b2b2b2")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-contrast")]),l("td",null,"#000")]),l("tr",null,[l("td",null,[l("code",null,"--disabled")]),l("td",null,"#d2d0ce")]),l("tr",null,[l("td",null,[l("code",null,"--color-on-disabled")]),l("td",null,"#a19f9d")]),l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Inputs and buttons")])]),l("tr"),l("tr",null,[l("td",null,[l("code",null,"--button-background")]),l("td",null,"#fff")]),l("tr",null,[l("td",null,[l("code",null,"--button-hover")]),l("td",null,"#e1dfdd")]),l("tr",null,[l("td",null,[l("code",null,"--button-outline-color")]),l("td",null,"#000")]),l("tr",null,[l("td",null,[l("code",null,"--button-color")]),l("td",null,"#000")]),l("tr",null,[l("td",null,[l("code",null,"--disabled-button-background")]),l("td",null,"#f3f2f1")]),l("tr",null,[l("td",null,[l("code",null,"--disabled-button-color")]),l("td",null,"#a19f9d")]),l("tr",null,[l("td",null,[l("code",null,"--colored-disabled-button-color")]),l("td",null,"#d2d0ce")]),l("tr",null,[l("td",null,[l("code",null,"--input-border-color")]),l("td",null,"#605e5c")]),l("tr",null,[l("td",null,[l("code",null,"--input-hover")]),l("td",null,"#c8c6c4")]),l("tr",null,[l("td",null,[l("code",null,"--range-track-color")]),l("td",null,"#c8c6c4")]),l("tr",null,[l("td",null,[l("code",null,"--range-filled-track-color")]),l("td",null,"#605e5c")]),l("tr",null,[l("td",null,[l("code",null,"--range-track-hover-color")]),l("td",null,"#e0f2ff")]),l("tr",null,[l("td",null,[l("code",null,"--switch-border-color")]),l("td",null,"#000")]),l("tr",null,[l("td",null,[l("code",null,"--switch-toggle-off-color")]),l("td",null,"#000")]),l("tr",null,[l("td",null,[l("code",null,"--switch-toggle-on-color")]),l("td",null,"#fff")]),l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Table")])]),l("tr"),l("tr",null,[l("td",null,[l("code",null,"--table-hover")]),l("td",null,"#e1dfdd")]),l("tr",null,[l("td",null,[l("code",null,"--table-striped-hover")]),l("td",null,"#d2d0ce")]),l("tr",null,[l("td",null,[l("code",null,"--table-stripe")]),l("td",null,"#edebe9")]),l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Distances")])]),l("tr"),l("tr",null,[l("td",null,[l("code",null,"--default-distance")]),l("td",null,"1.5rem")]),l("tr",null,[l("td",null,[l("code",null,"--distance-0")]),l("td",null,"0")]),l("tr",null,[l("td",null,[l("code",null,"--distance-1")]),l("td",null,"0.5rem")]),l("tr",null,[l("td",null,[l("code",null,"--distance-2")]),l("td",null,"1rem")]),l("tr",null,[l("td",null,[l("code",null,"--distance-3")]),l("td",null,"1.5rem")]),l("tr",null,[l("td",null,[l("code",null,"--distance-4")]),l("td",null,"2rem")]),l("tr",null,[l("td",null,[l("code",null,"--distance-5")]),l("td",null,"2.5rem")]),l("tr",null,[l("td",{colspan:"2"},[l("b",null,"Typography | 1 rem = 10 px")])]),l("tr"),l("tr",null,[l("td",null,[l("code",null,"--h1-font-size")]),l("td",null,"3.2rem")]),l("tr",null,[l("td",null,[l("code",null,"--h2-font-size")]),l("td",null,"3rem")]),l("tr",null,[l("td",null,[l("code",null,"--h3-font-size")]),l("td",null,"2.8rem")]),l("tr",null,[l("td",null,[l("code",null,"--h4-font-size")]),l("td",null,"2.6rem")]),l("tr",null,[l("td",null,[l("code",null,"--h5-font-size")]),l("td",null,"2.4rem")]),l("tr",null,[l("td",null,[l("code",null,"--h6-font-size")]),l("td",null,"2.2rem")]),l("tr",null,[l("td",null,[l("code",null,"--th-font-size")]),l("td",null,"2.2rem")]),l("tr",null,[l("td",null,[l("code",null,"--paragraph-font-size")]),l("td",null,"1.6rem")]),l("tr",null,[l("td",null,[l("code",null,"--label-font-size")]),l("td",null,"1.6rem")]),l("tr",null,[l("td",null,[l("code",null,"--small-font-size")]),l("td",null,"1.4rem")]),l("tr",null,[l("td",null,[l("code",null,"--font-weight-normal")]),l("td",null,"400")]),l("tr",null,[l("td",null,[l("code",null,"--font-weight-semibold")]),l("td",null,"600")]),l("tr",null,[l("td",null,[l("code",null,"--font-weight-bold")]),l("td",null,"700")])])])],-1),i={__name:"variables",setup(e){return(c,a)=>(d(),u(n,{class:"column gap-5 pb-3"},{default:t(()=>[r]),_:1}))}};export{i as default}; diff --git a/docs/index.html b/docs/index.html index 19990ea..8862a7d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,16 +1,16 @@ - - - - - - - Ibiss UI Documentation - - - - - - -
- - + + + + + + + Ibiss UI Documentation + + + + + + +
+ + diff --git a/docs/js/flightkit.min.js b/docs/js/flightkit.min.js index f8462f7..cb5917a 100644 --- a/docs/js/flightkit.min.js +++ b/docs/js/flightkit.min.js @@ -1 +1 @@ -!function(){"use strict";var a,l,g,e;(e=a=a||{}).Date="date",e.String="string",e.Float="float",e.Number="number",e.Array="array",e.Object="object",e.Bool="bool",e.Currency="currency",e.Undefined="undefined",e.Null="null";const c={date:/^(\d{1,4}-\d{1,4}-\d{1,4}(T)?)/gim,currency:/^[$|€]\s?[0-9]*(\.|,)?\d*(\.|,)?\d*/gim,float:/\d+[,|.]\d+[,|.]?\d*/gim,currencySign:/\$|€/gim,array:/^\s?[[].[^,]+[\]],?/gi,precision:/[-+$€,.]/gm,string:/[a-zA-Z]/gim},d=e=>{return null===e||"null"===e?a.Null:e||0===e||!1===e?null===new RegExp(c.date).exec(e)||isNaN(Date.parse(e))?new RegExp(c.currency).exec(e)?a.Currency:!new RegExp(c.string).exec(e)&&new RegExp(c.float).exec(e.toString())?a.Float:isNaN(e)&&0!==e?Array.isArray(e)?a.Array:"object"==typeof e?a.Object:a.String:a.Number:a.Date:a.Undefined},u=(t,e)=>{const r={value:void 0,type:e=e||d(t),currencySign:""};switch(r.type){case a.String:r.value=t.toString();break;case a.Float:case a.Currency:var s=(t=t.toString()).match(new RegExp(/(,)/gim)),n=t.match(new RegExp(/(\.)/gim));if(s)for(let e=1;e<=s.length;e++)t=e!==s.length||n?t.replace(",",""):t.replace(",",".");if(r.type===a.Currency){const i=new RegExp(c.currencySign);var o=i.exec(t);r.currencySign=null!==o?o[0]:"",t=t.replace(i,"")}r.value=parseFloat(t).toPrecision(12);break;case a.Number:r.value=Number(t);break;case a.Date:r.value=Date.parse(t);break;case a.Array:t.length?"object"==typeof t[0]?r.value=t.map(e=>JSON.stringify(e)).join(", "):r.value=t.join(", "):r.value="";break;case a.Object:r.value=t;break;case a.Undefined:r.value="";break;case a.Null:r.value=null}return r};function v(e,t){var r;let s;for(r of e.split("."))r=r.trim(),s?"object"!=typeof s||Array.isArray(s)||(s=s[r]):s=t[r];return s}const p=(e,t)=>tet<=e,b=(e,t)=>e<=t,w=(e,t,r)=>r?e.toLowerCase()==t.toLowerCase():e==t,k=(e,t)=>e===t,_=(e,t)=>e!=t,E=(e,t)=>e!==t,A=(e,t)=>null!=t&&"string"==typeof e&&0<=e.toLowerCase().indexOf(t.toString().toLowerCase()),L=(e,t)=>null!=t&&0<=e.toString().toLowerCase().indexOf(t.toString().toLowerCase()),x=(e,t)=>null!=t&&"string"==typeof e&&e.toLowerCase().indexOf(t.toString().toLowerCase())<0;function r(r,s){if(0===s.length)return r;{var n=r;const i=[],a=[];let e=[];for(const c of s)c.type&&c.type!==l.And?(e.length&&a.push(e),e=[c]):e.push(c);a.push(e);let t=[];for(const e of a)t=t.concat(I(n,e));t=[...new Set(t)];var o=n.length;for(let e=0;e":return p;case"<":return m;case">=":return f;case"<=":return b;case"is":case"==":return w;case"!is":case"!=":return _;case"===":return k;case"!==":return E;case"like":case"~":case"contains":return A;case"!contains":case"!like":case"!~":return x;default:return L}}(a.operator);if(!c(o,i,a.ignoreCase)){e=!1;break}}e&&r.push(s)}return r};function s(e,t){if(!t||0===t.length)return e;if(1{if(0===r.length)r=r.concat(i(n,e));else{for(const t of r)s=s.concat(i(t,e));r=s,s=[]}}),r}return i(e,t[0])}function i(e,t){const r=[],s=[];do{if(!e||0===e.length)break;var n=e.shift();if(!n)break;const i=n[t];var o=s.indexOf(i.toString());0<=o?r[o].push(n):(s.push(i.toString()),void 0!==r[s.length-1]?r[s.length-1].push(n):r.push([n]))}while(0{if(t){var r=e;const s={};for(const n of t){let e=r.map(e=>e[n].toString());const o=e.map(e=>d(e));o.some(e=>e===a.Float)?(e=e.map(e=>parseFloat(e)),s[n]=parseFloat(e.reduce((e,t)=>e+t).toFixed(2))):(e=e.map(e=>parseInt(e)),s[n]=e.reduce((e,t)=>e+t))}return s}return{}};class C{model;sortDetails=[];filterDetails=[];selection=[];groupByProperties=[];distinctProperties=[];concatenationToken=", ";constructor(e){this.model=JSON.parse(JSON.stringify(e))}sort(e){return this.sortDetails=e,this}orderBy(e,t){return this.sortDetails.push({propertyName:e,direction:t}),this}thenOrderBy(e,t){return this.orderBy(e,t)}filter(e){return Array.isArray(e)?this.filterDetails=e:this.filterDetails.push(e),this}where(e,t,r,s,n){return this.filterDetails.push({propertyName:e,operator:t,value:r,type:s,ignoreCase:n}),this}andWhere(e,t,r,s){return this.where(e,t,r,l.And,s),this}orWhere(e,t,r,s){return this.where(e,t,r,l.Or,s),this}group(e){return this.groupByProperties=e,this}groupBy(e){return this.groupByProperties.push(e),this}thenGroupBy(e){return this.groupByProperties.push(e),this}select(e){return Array.isArray(e)?this.selection=e:"*"!==e&&(this.selection=[e]),this}distinct(e,t){return t&&(this.concatenationToken=t),Array.isArray(e)?this.distinctProperties=e:e&&(this.distinctProperties=[e]),this}execute(){return s(function(t,r){if(0===r.length)return t;{var s=r;let e=[];for(const n of t){const o={};for(const i of s)o[i]=n[i];e.push(o)}return e}}(function(r,s,d){if(!s||!s.length)return r;const n=[],h=[];for(const m of r){const i={};let t="";for(const e of s){var u=v(e,m);i[e]=u,t+=u}if(!h.includes(t)){let e=r;for(const a of Object.keys(i))e=e.filter(e=>e[a]===i[a]);h.push(t),n.push(e)}}const t=[];for(const f of n){let e={};for(const c of f){var o,p=Object.keys(e);if(p.length)for(const l of p)s.includes(l)||(o=e[l],Array.isArray(o)?(o=c[l],Array.isArray(o)?e[l]=[...new Set(...e[l].concat(c[l]))]:e[l].includes(c[l])||e[l].push(c[l])):isNaN(e[l])&&isNaN(c[l])?e[l]!==c[l]&&(e[l]=[e[l],c[l]]):e[l]=e[l]+c[l]);else e=c}t.push(e)}return t.forEach(e=>{for(const t in e)Array.isArray(e[t])&&(e[t]=e[t].join(d))}),t}(n(r(JSON.parse(JSON.stringify(this.model)),this.filterDetails),this.sortDetails),this.distinctProperties,this.concatenationToken),this.selection),this.groupByProperties)}sum(e,t){e=Array.isArray(e)?e:[e];return o(t||this.model,e)}}function S(e,t){t=t?t.toUpperCase():"FLK-";return e.toUpperCase().includes(t)}function h(e,t){var{timeStamp:r,type:s,x:n,y:o}=e;let i=e.target;do{if(!i||"HTML"===i.tagName||S(i.tagName,t)){"HTML"===i.tagName&&(i=null);break}}while(i=i.parentNode||i.parentElement,!S(i.tagName,t));return{target:i,timeStamp:r,type:s,x:n,y:o}}class t{constructor(){}_topLevelClasses=[];_events=[];generateId(){return"flk-"+function e(){const t=([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,e=>(e^crypto.getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16)),r=t.split("-")[0];return window.$flightkitUUIDStore||(window.$flightkitUUIDStore=[]),window.$flightkitUUIDStore.some(e=>e===r)?e():(window.$flightkitUUIDStore.push(r),r)}()}render(t){if(!t.component)throw new Error("Component is not assigned! Can't render");t.id=t.id||this.generateId();var e=this._getAllEventAttributes(t);if(e){var r="#"+t.id;for(const o of e){var s="e-"+o;this.addEvent(r,o,t.getAttribute(s))}}var n=Object.keys(t.classList).length;if(n){for(let e=0;e{clearTimeout(this._renderTimer),this._assignToDom(t,t.component)},10)}addEvent(e,t,r){this._events.push({selector:e,eventType:t,callback:r})}_getExternalCallback(e){let t=void 0;for(const r of e.split("."))t=(t||window)[r];return t}_getAllEventAttributes(e){e=e.attributes;const t=Array.from(e).filter(e=>e.name.startsWith("e-"));return t.map(e=>e.name.slice(2))}_isFlightkitElement(e){return e.toUpperCase().includes("FLK-")}_outerEventHandler(e){const t=h(e),r=(t.contents=e.detail,t.target.getAttribute("e-"+t.type));let s=void 0;for(const n of r.split("."))s=(s||window)[n];return e.preventDefault(),e.stopPropagation(),s(t)}_addEvents(e){if(e.isConnected)for(const t of this._events){let e=document.querySelector(t.selector);e&&("function"==typeof t.callback?(e.removeEventListener(t.eventType,t.callback),e.addEventListener(t.eventType,t.callback)):(e.removeEventListener(t.eventType,this._outerEventHandler),e.addEventListener(t.eventType,this._outerEventHandler)))}}removeEvents(){for(const t of this._events){let e=document.querySelector(t.selector);e&&("function"==typeof t.callback?e.removeEventListener(t.eventType,t.callback):e.removeEventListener(t.eventType,this._outerEventHandler))}this._events=[]}_assignToDom(e,t){e.innerHTML="";for(const s of Array.isArray(t)?t:[t])e.append(s);const r=setTimeout(()=>{this._addEvents(e),clearTimeout(r)},10)}}function T(e){const t=new DOMParser;return t.parseFromString(e,"image/svg+xml").documentElement}class B extends HTMLElement{base;component=null;_contents=[];_orderBy=[];properties=new Set;_columnOrder=[];_filter="";_selectionProperty="";_selectedIds=new Set;uniqueEntriesByProperties={};propertyLabelDictionary={};static get observedAttributes(){return["contents","columns","order","filter","selection-property"]}get columnOrder(){return this._columnOrder.length?this._columnOrder:this.properties}set columnOrder(e){let t;"string"==typeof e&&(t=e.split(",")),t=e,this._columnOrder=t}get contents(){return this._contents}set contents(e){this.analyzeData(e),this._contents=new C(e)}get orderBy(){return this._orderBy}set orderBy(e){if(Array.isArray(e))this._orderBy=e;else{const s=[];for(const n of e.split(",")){var t=n.split("|"),r=t[0],t=1e[r._selectionProperty])):new Set;e=t?r.contents.execute():[];r._emit("select",r,{selection:e}),r._updateCheckboxes(r)}emitSelect(e){var t=e.target.checked,r=e.target.dataset.objectId;const s=h(e).target,n=(t?s._selectedIds.add(r):s._selectedIds.delete(r),s._selectionProperty);e=s.contents.execute().filter(e=>s._selectedIds.has(e[n]));s._emit("select",s,{selection:e}),s._updateCheckboxes(s)}sortData(e){const t=h(e).target,r=function(e,t){let r=e.target,s="";for(;r.dataset[t]?s=r.dataset[t]:r=r.parentNode,!s;);return s}(e,"column");r&&(-1<(e=t._orderBy.findIndex(e=>e.propertyName===r))?"asc"===t._orderBy[e].direction?t._orderBy[e].direction="desc":t._orderBy.splice(e,1):t._orderBy.push({propertyName:r,direction:"asc"}),t.createHtml(),t.base.render(t))}setColumnOrder(e){this._columnOrder=e?Array.isArray(e)?e:e.split(","):[]}analyzeData(t){this.properties=new Set;var r=t.length;for(let e=0;e"_"===e?" ":" "+e.toLowerCase());var r=t.charAt(0).toUpperCase()+t.slice(1);return this.propertyLabelDictionary[e]=r}createSelectionCheckbox(e){const t=document.createElement("input");return t.setAttribute("type","checkbox"),t.classList.add("flk-selection-checkbox"),e&&(t.dataset.selected=e[this._selectionProperty]),t}createRow(e){const t=document.createElement("tr");if(this._selectionProperty.length){const n=document.createElement("td");var r=this.base.generateId();const o=this.createSelectionCheckbox(e);o.id=r,o.dataset.objectId=e[this._selectionProperty];var s=e[this._selectionProperty];this._selectedIds.has(s)?o.checked=!0:o.checked=!1,this.base.addEvent("#"+r,"change",this.emitSelect),n.append(o),t.append(n)}for(const i of this.columnOrder){const a=document.createElement("td");a.innerText=e[i],t.append(a)}return t}createBody(e){const t=document.createElement("tbody");for(const s of e){var r=this.createRow(s,null);t.append(r)}return t}createHead(){const e=document.createElement("thead"),t=document.createElement("tr");if(t.classList.add("cursor-pointer"),this._selectionProperty.length){const n=document.createElement("th");var r=this.base.generateId();const o=this.createSelectionCheckbox();o.id=r;var d=this.contents.execute().length;0e.propertyName===i);if(s){const l=document.createElement("span");l.innerHTML="asc"===s.direction?'':'',a.append(l)}t.append(a)}return e.append(t),e}init(){this.createHtml(),this.base.render(this)}}class N extends HTMLElement{base;componentId;constructor(){super(),this.base=new t}connectedCallback(){var e=this.getAttribute("top"),t=this.getAttribute("left"),r=this.getAttribute("center"),s=this.getAttribute("zIndex");this.id||(this.id=this.base.generateId()),this.style.display="block",this.style.position="fixed","string"==typeof r?(this.style.top=e||"50%",this.style.left="50%",this.style.transform="translate(-50%, -50%)"):(this.style.top=e||this.clientTop+"px",this.style.left=t||this.clientLeft+"px"),s&&(this.style.zIndex=s),this.componentId=this.getAttribute("handle");const n=document.createElement("div");n.innerHTML=this.innerHTML,this.component=n;r="#"+(this.componentId||this.id);this.base.addEvent(r,"mousedown",this._dragElement),this.base.render(this)}disconnectedCallback(){this.base.removeEvents(this)}_dragElement(e){const r=h(e,"flk-draggable").target;let s,n;function t(e){s=e.clientX-r.offsetLeft,n=e.clientY-r.offsetTop}function o(e){var t=e.clientX-s,e=e.clientY-n;r.style.left=t+"px",r.style.top=e+"px"}function i(e){e.preventDefault()}function a(){r.removeAttribute("draggable"),r.removeEventListener("dragstart",t),r.removeEventListener("dragend",a),document.removeEventListener("dragover",i),document.removeEventListener("drop",o)}r.setAttribute("draggable",!0),r.addEventListener("dragstart",t),r.addEventListener("dragend",a),document.addEventListener("dragover",i),document.addEventListener("drop",o)}}class D extends HTMLElement{_id;base;_draggableId;constructor(){super(),this.base=new t}_emit(e,t,r){e=new CustomEvent(e,{detail:r,bubbles:!0,cancelable:!0});t.dispatchEvent(e)}closeModal(e){const t=h(e,"flk-modal").target;t.classList.add("hidden"),t._emit("hide",t,{hidden:!0,id:t.id})}openModal(e=!0){const t=document.getElementById(this._draggableId);e&&(t.style.top="40%",t.style.left="50%"),this.classList.remove("hidden")}connectedCallback(){this.id||(this.id=this.base.generateId());const e=document.createElement("div");var t=this.base.generateId();const r=document.createElement("flk-draggable"),s=(this._draggableId=this.base.generateId(),r.id=this._draggableId,r.setAttribute("center",""),r.setAttribute("top","40%"),r.setAttribute("handle",t),r.setAttribute("zIndex","1080"),r.classList.add("border","shadow-lg","bg-white"),document.createElement("div"));var n=this.getAttribute("title");if(n){const l=document.createElement("span");l.innerText=n,l.classList.add("ml-1","mr-auto"),s.append(l)}s.id=t;const o=this.getAttribute("header-class");let i=[];o?i=i.concat(o.split(" ")):i.push("bg-gray-light"),s.classList.add(...i,"border-bottom","row","justify-end");n=this.base.generateId();const a=document.createElement("button"),c=(a.classList.add("py-0","px-1","outline-hover","no-border",...i),a.innerText="X",a.id=n,s.append(a),r.append(s),document.createElement("div"));c.innerHTML=this.innerHTML,r.append(c),e.append(r),this.component=e,this.base.addEvent("#"+n,"click",this.closeModal),this.base.render(this),this.classList.add("hidden")}disconnectedCallback(){this.base.removeEvents(this)}}class O extends HTMLElement{base;_buttonId;_drawerId;_iconId;constructor(){super(),this.base=new t}connectedCallback(){this.style.position="relative",this.style.display="flex",this.style.width="fit-content",this._buttonId=this.base.generateId();const e=document.createElement("button"),t=(e.classList.add("row"),e.id=this._buttonId,document.createElement("span")),r=(t.innerText=this.getAttribute("text"),this._iconId=this.base.generateId(),document.createElement("span"));var s=T('');const n=T(''),o=(n.classList.add("hidden"),r.append(s,n),r.id=this._iconId,e.append(t,r),this._drawerId=this.base.generateId(),document.createElement("div"));o.id=this._drawerId,o.classList.add("shadow","inline-block","bg-white"),o.style.position="absolute",o.style.zIndex="1040";s=this.querySelector("template");s.innerHTML.length?o.innerHTML=s.innerHTML:o.append(s.firstChild),o.style.display="none",this.component=[e,o],this.base.addEvent("#"+this._buttonId,"click",this.toggleMenu);const i=document.querySelector("body");""!==i.getAttribute("flk-close-dropdown")&&(i.setAttribute("flk-close-dropdown",""),i.addEventListener("click",this.closeAllDropdownButtons)),this.base.render(this)}disconnectedCallback(){this.base.removeEvents(this);var e=document.querySelectorAll("flk-dropdown");if(!e||!e.length){const t=document.querySelector("body");t.removeAttribute("flk-close-dropdown"),t.removeEventListener("click",this.closeAllDropdownButtons)}}toggleMenu(e){const t=h(e).target;e=t._drawerId;const r=document.getElementById(e);var e="none"!==r.style.display,s=(r.style.display=e?"none":"block",t.getAttribute("drawer-width")),s=("string"==typeof t.getAttribute("right")&&(r.style.right="0px"),r.style.top=t.offsetHeight+"px",r.style.width=s||t.offsetWidth+"px",t._iconId);const n=document.getElementById(s);e?(n.childNodes[0].classList.remove("hidden"),n.childNodes[1].classList.add("hidden")):(n.childNodes[0].classList.add("hidden"),n.childNodes[1].classList.remove("hidden"))}_closeDropdown(){var e=this._drawerId;const t=document.getElementById(e);if("none"!==t.style.display){e=this._iconId;const r=document.getElementById(e);t.style.display="none",r.childNodes[0].classList.remove("hidden"),r.childNodes[1].classList.add("hidden")}}closeAllDropdownButtons(e){var t,r=h(e,"flk-dropdown").target,e=document.querySelectorAll("flk-dropdown");if(r)for(const s of e)r._buttonId!==s._buttonId&&(t=s._drawerId,"none"!==document.getElementById(t).style.display&&s._closeDropdown());else for(const n of e)n._closeDropdown()}}customElements.define("flk-table",B),customElements.define("flk-draggable",N),customElements.define("flk-modal",D),customElements.define("flk-dropdown",O)}(); \ No newline at end of file +!function(){"use strict";var a,l,g,e;(e=a=a||{}).Date="date",e.String="string",e.Float="float",e.Number="number",e.Array="array",e.Object="object",e.Bool="bool",e.Currency="currency",e.Undefined="undefined",e.Null="null";const c={date:/^(\d{1,4}-\d{1,4}-\d{1,4}(T)?)/gim,currency:/^[$|€]\s?[0-9]*(\.|,)?\d*(\.|,)?\d*/gim,float:/\d+[,|.]\d+[,|.]?\d*/gim,currencySign:/\$|€/gim,array:/^\s?[[].[^,]+[\]],?/gi,precision:/[-+$€,.]/gm,string:/[a-zA-Z]/gim},d=e=>{return null===e||"null"===e?a.Null:e||0===e||!1===e?null===new RegExp(c.date).exec(e)||isNaN(Date.parse(e))?new RegExp(c.currency).exec(e)?a.Currency:!new RegExp(c.string).exec(e)&&new RegExp(c.float).exec(e.toString())?a.Float:isNaN(e)&&0!==e?Array.isArray(e)?a.Array:"object"==typeof e?a.Object:a.String:a.Number:a.Date:a.Undefined},u=(t,e)=>{const r={value:void 0,type:e=e||d(t),currencySign:""};switch(r.type){case a.String:r.value=t.toString();break;case a.Float:case a.Currency:var s=(t=t.toString()).match(new RegExp(/(,)/gim)),n=t.match(new RegExp(/(\.)/gim));if(s)for(let e=1;e<=s.length;e++)t=e!==s.length||n?t.replace(",",""):t.replace(",",".");if(r.type===a.Currency){const i=new RegExp(c.currencySign);var o=i.exec(t);r.currencySign=null!==o?o[0]:"",t=t.replace(i,"")}r.value=parseFloat(t).toPrecision(12);break;case a.Number:r.value=Number(t);break;case a.Date:r.value=Date.parse(t);break;case a.Array:t.length?"object"==typeof t[0]?r.value=t.map(e=>JSON.stringify(e)).join(", "):r.value=t.join(", "):r.value="";break;case a.Object:r.value=t;break;case a.Undefined:r.value="";break;case a.Null:r.value=null}return r};function v(e,t){var r;let s;for(r of e.split("."))r=r.trim(),s?"object"!=typeof s||Array.isArray(s)||(s=s[r]):s=t[r];return s}const p=(e,t)=>tet<=e,b=(e,t)=>e<=t,w=(e,t,r)=>r?e.toLowerCase()==t.toLowerCase():e==t,k=(e,t)=>e===t,_=(e,t)=>e!=t,E=(e,t)=>e!==t,A=(e,t)=>null!=t&&"string"==typeof e&&0<=e.toLowerCase().indexOf(t.toString().toLowerCase()),L=(e,t)=>null!=t&&0<=e.toString().toLowerCase().indexOf(t.toString().toLowerCase()),x=(e,t)=>null!=t&&"string"==typeof e&&e.toLowerCase().indexOf(t.toString().toLowerCase())<0;function r(r,s){if(0===s.length)return r;{var n=r;const i=[],a=[];let e=[];for(const c of s)c.type&&c.type!==l.And?(e.length&&a.push(e),e=[c]):e.push(c);a.push(e);let t=[];for(const e of a)t=t.concat(I(n,e));t=[...new Set(t)];var o=n.length;for(let e=0;e":return p;case"<":return m;case">=":return f;case"<=":return b;case"is":case"==":return w;case"!is":case"!=":return _;case"===":return k;case"!==":return E;case"like":case"~":case"contains":return A;case"!contains":case"!like":case"!~":return x;default:return L}}(a.operator);if(!c(o,i,a.ignoreCase)){e=!1;break}}e&&r.push(s)}return r};function s(e,t){if(!t||0===t.length)return e;if(1{if(0===r.length)r=r.concat(i(n,e));else{for(const t of r)s=s.concat(i(t,e));r=s,s=[]}}),r}return i(e,t[0])}function i(e,t){const r=[],s=[];do{if(!e||0===e.length)break;var n=e.shift();if(!n)break;const i=n[t];var o=s.indexOf(i.toString());0<=o?r[o].push(n):(s.push(i.toString()),void 0!==r[s.length-1]?r[s.length-1].push(n):r.push([n]))}while(0{if(t){var r=e;const s={};for(const n of t){let e=r.map(e=>e[n].toString());const o=e.map(e=>d(e));o.some(e=>e===a.Float)?(e=e.map(e=>parseFloat(e)),s[n]=parseFloat(e.reduce((e,t)=>e+t).toFixed(2))):(e=e.map(e=>parseInt(e)),s[n]=e.reduce((e,t)=>e+t))}return s}return{}};class C{model;sortDetails=[];filterDetails=[];selection=[];groupByProperties=[];distinctProperties=[];concatenationToken=", ";constructor(e){this.model=JSON.parse(JSON.stringify(e))}sort(e){return this.sortDetails=e,this}orderBy(e,t){return this.sortDetails.push({propertyName:e,direction:t}),this}thenOrderBy(e,t){return this.orderBy(e,t)}filter(e){return Array.isArray(e)?this.filterDetails=e:this.filterDetails.push(e),this}where(e,t,r,s,n){return this.filterDetails.push({propertyName:e,operator:t,value:r,type:s,ignoreCase:n}),this}andWhere(e,t,r,s){return this.where(e,t,r,l.And,s),this}orWhere(e,t,r,s){return this.where(e,t,r,l.Or,s),this}group(e){return this.groupByProperties=e,this}groupBy(e){return this.groupByProperties.push(e),this}thenGroupBy(e){return this.groupByProperties.push(e),this}select(e){return Array.isArray(e)?this.selection=e:"*"!==e&&(this.selection=[e]),this}distinct(e,t){return t&&(this.concatenationToken=t),Array.isArray(e)?this.distinctProperties=e:e&&(this.distinctProperties=[e]),this}execute(){return s(function(t,r){if(0===r.length)return t;{var s=r;let e=[];for(const n of t){const o={};for(const i of s)o[i]=n[i];e.push(o)}return e}}(function(r,s,d){if(!s||!s.length)return r;const n=[],h=[];for(const m of r){const i={};let t="";for(const e of s){var u=v(e,m);i[e]=u,t+=u}if(!h.includes(t)){let e=r;for(const a of Object.keys(i))e=e.filter(e=>e[a]===i[a]);h.push(t),n.push(e)}}const t=[];for(const f of n){let e={};for(const c of f){var o,p=Object.keys(e);if(p.length)for(const l of p)s.includes(l)||(o=e[l],Array.isArray(o)?(o=c[l],Array.isArray(o)?e[l]=[...new Set(...e[l].concat(c[l]))]:e[l].includes(c[l])||e[l].push(c[l])):isNaN(e[l])&&isNaN(c[l])?e[l]!==c[l]&&(e[l]=[e[l],c[l]]):e[l]=e[l]+c[l]);else e=c}t.push(e)}return t.forEach(e=>{for(const t in e)Array.isArray(e[t])&&(e[t]=e[t].join(d))}),t}(n(r(JSON.parse(JSON.stringify(this.model)),this.filterDetails),this.sortDetails),this.distinctProperties,this.concatenationToken),this.selection),this.groupByProperties)}sum(e,t){e=Array.isArray(e)?e:[e];return o(t||this.model,e)}}function S(e,t){t=t?t.toUpperCase():"FLK-";return e.toUpperCase().includes(t)}function h(e,t){var{timeStamp:r,type:s,x:n,y:o}=e;let i=e.target;do{if(!i||"HTML"===i.tagName||S(i.tagName,t)){"HTML"===i.tagName&&(i=null);break}}while(i=i.parentNode||i.parentElement,!S(i.tagName,t));return{target:i,timeStamp:r,type:s,x:n,y:o}}class t{constructor(){}_topLevelClasses=[];_events=[];generateId(){return"flk-"+function e(){const t=([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,e=>(e^crypto.getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16)),r=t.split("-")[0];return window.$flightkitUUIDStore||(window.$flightkitUUIDStore=[]),window.$flightkitUUIDStore.some(e=>e===r)?e():(window.$flightkitUUIDStore.push(r),r)}()}render(t){if(!t.component)throw new Error("Component is not assigned! Can't render");t.id=t.id||this.generateId();var e=this._getAllEventAttributes(t);if(e){var r="#"+t.id;for(const o of e){var s="e-"+o;this.addEvent(r,o,t.getAttribute(s))}}var n=Object.keys(t.classList).length;if(n){for(let e=0;e{clearTimeout(this._renderTimer),this._assignToDom(t,t.component)},10)}addEvent(e,t,r){this._events.push({selector:e,eventType:t,callback:r})}_getExternalCallback(e){let t=void 0;for(const r of e.split("."))t=(t||window)[r];return t}_getAllEventAttributes(e){e=e.attributes;const t=Array.from(e).filter(e=>e.name.startsWith("e-"));return t.map(e=>e.name.slice(2))}_isFlightkitElement(e){return e.toUpperCase().includes("FLK-")}_outerEventHandler(e){const t=h(e),r=(t.contents=e.detail,t.target.getAttribute("e-"+t.type));let s=void 0;for(const n of r.split("."))s=(s||window)[n];return e.preventDefault(),e.stopPropagation(),s(t)}_addEvents(e){if(e.isConnected)for(const t of this._events){let e=document.querySelector(t.selector);e&&("function"==typeof t.callback?(e.removeEventListener(t.eventType,t.callback),e.addEventListener(t.eventType,t.callback)):(e.removeEventListener(t.eventType,this._outerEventHandler),e.addEventListener(t.eventType,this._outerEventHandler)))}}removeEvents(){for(const t of this._events){let e=document.querySelector(t.selector);e&&("function"==typeof t.callback?e.removeEventListener(t.eventType,t.callback):e.removeEventListener(t.eventType,this._outerEventHandler))}this._events=[]}_assignToDom(e,t){e.innerHTML="";for(const s of Array.isArray(t)?t:[t])e.append(s);const r=setTimeout(()=>{this._addEvents(e),clearTimeout(r)},10)}}function T(e){const t=new DOMParser;return t.parseFromString(e,"image/svg+xml").documentElement}class B extends HTMLElement{base;component=null;_contents=[];_orderBy=[];properties=new Set;_columnOrder=[];_filter="";_selectionProperty="";_selectedIds=new Set;uniqueEntriesByProperties={};propertyLabelDictionary={};static get observedAttributes(){return["contents","columns","order","filter","selection-property"]}get columnOrder(){return this._columnOrder.length?this._columnOrder:this.properties}set columnOrder(e){let t;"string"==typeof e&&(t=e.split(",")),t=e,this._columnOrder=t}get contents(){return this._contents}set contents(e){this.analyzeData(e),this._contents=new C(e)}get orderBy(){return this._orderBy}set orderBy(e){if(Array.isArray(e))this._orderBy=e;else{const s=[];for(const n of e.split(",")){var t=n.split("|"),r=t[0],t=1e[r._selectionProperty])):new Set;e=t?r.contents.execute():[];r._emit("select",r,{selection:e}),r._updateCheckboxes(r)}emitSelect(e){var t=e.target.checked,r=e.target.dataset.objectId;const s=h(e).target,n=(t?s._selectedIds.add(r):s._selectedIds.delete(r),s._selectionProperty);e=s.contents.execute().filter(e=>s._selectedIds.has(e[n]));s._emit("select",s,{selection:e}),s._updateCheckboxes(s)}sortData(e){const t=h(e).target,r=function(e,t){let r=e.target,s="";for(;r.dataset[t]?s=r.dataset[t]:r=r.parentNode,!s;);return s}(e,"column");r&&(-1<(e=t._orderBy.findIndex(e=>e.propertyName===r))?"asc"===t._orderBy[e].direction?t._orderBy[e].direction="desc":t._orderBy.splice(e,1):t._orderBy.push({propertyName:r,direction:"asc"}),t.createHtml(),t.base.render(t))}setColumnOrder(e){this._columnOrder=e?Array.isArray(e)?e:e.split(","):[]}analyzeData(t){this.properties=new Set;var r=t.length;for(let e=0;e"_"===e?" ":" "+e.toLowerCase());var r=t.charAt(0).toUpperCase()+t.slice(1);return this.propertyLabelDictionary[e]=r}createSelectionCheckbox(e){const t=document.createElement("input");return t.setAttribute("type","checkbox"),t.classList.add("flk-selection-checkbox"),e&&(t.dataset.selected=e[this._selectionProperty]),t}createRow(e){const t=document.createElement("tr");if(this._selectionProperty.length){const n=document.createElement("td");var r=this.base.generateId();const o=this.createSelectionCheckbox(e);o.id=r,o.dataset.objectId=e[this._selectionProperty];var s=e[this._selectionProperty];this._selectedIds.has(s)?o.checked=!0:o.checked=!1,this.base.addEvent("#"+r,"change",this.emitSelect),n.append(o),t.append(n)}for(const i of this.columnOrder){const a=document.createElement("td");a.innerText=e[i],t.append(a)}return t}createBody(e){const t=document.createElement("tbody");for(const s of e){var r=this.createRow(s,null);t.append(r)}return t}createHead(){const e=document.createElement("thead"),t=document.createElement("tr");if(t.classList.add("cursor-pointer"),this._selectionProperty.length){const n=document.createElement("th");var r=this.base.generateId();const o=this.createSelectionCheckbox();o.id=r;var d=this.contents.execute().length;0e.propertyName===i);if(s){const l=document.createElement("span");l.innerHTML="asc"===s.direction?'':'',a.append(l)}t.append(a)}return e.append(t),e}init(){this.createHtml(),this.base.render(this)}}class N extends HTMLElement{base;componentId;constructor(){super(),this.base=new t}connectedCallback(){var e=this.getAttribute("top"),t=this.getAttribute("left"),r=this.getAttribute("center"),s=this.getAttribute("zIndex");this.id||(this.id=this.base.generateId()),this.style.display="block",this.style.position="fixed","string"==typeof r?(this.style.top=e||"50%",this.style.left="50%",this.style.transform="translate(-50%, -50%)"):(this.style.top=e||this.clientTop+"px",this.style.left=t||this.clientLeft+"px"),s&&(this.style.zIndex=s),this.componentId=this.getAttribute("handle");const n=document.createElement("div");n.innerHTML=this.innerHTML,this.component=n;r="#"+(this.componentId||this.id);this.base.addEvent(r,"mousedown",this._dragElement),this.base.render(this)}disconnectedCallback(){this.base.removeEvents(this)}_dragElement(e){const r=h(e,"flk-draggable").target;let s,n;function t(e){s=e.clientX-r.offsetLeft,n=e.clientY-r.offsetTop}function o(e){var t=e.clientX-s,e=e.clientY-n;r.style.left=t+"px",r.style.top=e+"px"}function i(e){e.preventDefault()}function a(){r.removeAttribute("draggable"),r.removeEventListener("dragstart",t),r.removeEventListener("dragend",a),document.removeEventListener("dragover",i),document.removeEventListener("drop",o)}r.setAttribute("draggable",!0),r.addEventListener("dragstart",t),r.addEventListener("dragend",a),document.addEventListener("dragover",i),document.addEventListener("drop",o)}}class D extends HTMLElement{_id;base;_draggableId;constructor(){super(),this.base=new t}_emit(e,t,r){e=new CustomEvent(e,{detail:r,bubbles:!0,cancelable:!0});t.dispatchEvent(e)}closeModal(e){const t=h(e,"flk-modal").target;t.classList.add("hidden"),t._emit("hide",t,{hidden:!0,id:t.id})}openModal(e=!0){const t=document.getElementById(this._draggableId);e&&(t.style.top="40%",t.style.left="50%"),this.classList.remove("hidden")}connectedCallback(){this.id||(this.id=this.base.generateId());const e=document.createElement("div");var t=this.base.generateId();const r=document.createElement("flk-draggable"),s=(this._draggableId=this.base.generateId(),r.id=this._draggableId,r.setAttribute("center",""),r.setAttribute("top","40%"),r.setAttribute("handle",t),r.setAttribute("zIndex","1080"),r.classList.add("border","shadow-lg","bg-white"),r.style.width="max-content",document.createElement("div"));var n=this.getAttribute("title");if(n){const l=document.createElement("span");l.innerText=n,l.classList.add("ml-1","mr-auto"),s.append(l)}s.id=t;const o=this.getAttribute("header-class");let i=[];o?i=i.concat(o.split(" ")):i.push("bg-gray-light"),s.classList.add(...i,"border-bottom","row","justify-end");n=this.base.generateId();const a=document.createElement("button"),c=(a.classList.add("py-0","px-1","outline-hover","no-border",...i),a.innerText="X",a.id=n,s.append(a),r.append(s),document.createElement("div"));c.innerHTML=this.innerHTML,r.append(c),e.append(r),this.component=e,this.base.addEvent("#"+n,"click",this.closeModal),this.base.render(this),this.classList.add("hidden")}disconnectedCallback(){this.base.removeEvents(this)}}class O extends HTMLElement{base;_buttonId;_drawerId;_iconId;constructor(){super(),this.base=new t}connectedCallback(){this.style.position="relative",this.style.display="flex",this.style.width="fit-content",this._buttonId=this.base.generateId();const e=document.createElement("button"),t=(e.classList.add("row"),e.id=this._buttonId,document.createElement("span")),r=(t.innerText=this.getAttribute("text"),this._iconId=this.base.generateId(),document.createElement("span"));var s=T('');const n=T(''),o=(n.classList.add("hidden"),r.append(s,n),r.id=this._iconId,e.append(t,r),this._drawerId=this.base.generateId(),document.createElement("div"));o.id=this._drawerId,o.classList.add("shadow","inline-block","bg-white"),o.style.position="absolute",o.style.zIndex="1040";s=this.querySelector("template");s.innerHTML.length?o.innerHTML=s.innerHTML:o.append(s.firstChild),o.style.display="none",this.component=[e,o],this.base.addEvent("#"+this._buttonId,"click",this.toggleMenu);const i=document.querySelector("body");""!==i.getAttribute("flk-close-dropdown")&&(i.setAttribute("flk-close-dropdown",""),i.addEventListener("click",this.closeAllDropdownButtons)),this.base.render(this)}disconnectedCallback(){this.base.removeEvents(this);var e=document.querySelectorAll("flk-dropdown");if(!e||!e.length){const t=document.querySelector("body");t.removeAttribute("flk-close-dropdown"),t.removeEventListener("click",this.closeAllDropdownButtons)}}toggleMenu(e){const t=h(e).target;e=t._drawerId;const r=document.getElementById(e);var e="none"!==r.style.display,s=(r.style.display=e?"none":"block",t.getAttribute("drawer-width")),s=("string"==typeof t.getAttribute("right")&&(r.style.right="0px"),r.style.top=t.offsetHeight+"px",r.style.width=s||t.offsetWidth+"px",t._iconId);const n=document.getElementById(s);e?(n.childNodes[0].classList.remove("hidden"),n.childNodes[1].classList.add("hidden")):(n.childNodes[0].classList.add("hidden"),n.childNodes[1].classList.remove("hidden"))}_closeDropdown(){var e=this._drawerId;const t=document.getElementById(e);if("none"!==t.style.display){e=this._iconId;const r=document.getElementById(e);t.style.display="none",r.childNodes[0].classList.remove("hidden"),r.childNodes[1].classList.add("hidden")}}closeAllDropdownButtons(e){var t,r=h(e,"flk-dropdown").target,e=document.querySelectorAll("flk-dropdown");if(r)for(const s of e)r._buttonId!==s._buttonId&&(t=s._drawerId,"none"!==document.getElementById(t).style.display&&s._closeDropdown());else for(const n of e)n._closeDropdown()}}customElements.define("flk-table",B),customElements.define("flk-draggable",N),customElements.define("flk-modal",D),customElements.define("flk-dropdown",O)}(); \ No newline at end of file diff --git a/documentation/public/js/flightkit.min.js b/documentation/public/js/flightkit.min.js index f8462f7..cb5917a 100644 --- a/documentation/public/js/flightkit.min.js +++ b/documentation/public/js/flightkit.min.js @@ -1 +1 @@ -!function(){"use strict";var a,l,g,e;(e=a=a||{}).Date="date",e.String="string",e.Float="float",e.Number="number",e.Array="array",e.Object="object",e.Bool="bool",e.Currency="currency",e.Undefined="undefined",e.Null="null";const c={date:/^(\d{1,4}-\d{1,4}-\d{1,4}(T)?)/gim,currency:/^[$|€]\s?[0-9]*(\.|,)?\d*(\.|,)?\d*/gim,float:/\d+[,|.]\d+[,|.]?\d*/gim,currencySign:/\$|€/gim,array:/^\s?[[].[^,]+[\]],?/gi,precision:/[-+$€,.]/gm,string:/[a-zA-Z]/gim},d=e=>{return null===e||"null"===e?a.Null:e||0===e||!1===e?null===new RegExp(c.date).exec(e)||isNaN(Date.parse(e))?new RegExp(c.currency).exec(e)?a.Currency:!new RegExp(c.string).exec(e)&&new RegExp(c.float).exec(e.toString())?a.Float:isNaN(e)&&0!==e?Array.isArray(e)?a.Array:"object"==typeof e?a.Object:a.String:a.Number:a.Date:a.Undefined},u=(t,e)=>{const r={value:void 0,type:e=e||d(t),currencySign:""};switch(r.type){case a.String:r.value=t.toString();break;case a.Float:case a.Currency:var s=(t=t.toString()).match(new RegExp(/(,)/gim)),n=t.match(new RegExp(/(\.)/gim));if(s)for(let e=1;e<=s.length;e++)t=e!==s.length||n?t.replace(",",""):t.replace(",",".");if(r.type===a.Currency){const i=new RegExp(c.currencySign);var o=i.exec(t);r.currencySign=null!==o?o[0]:"",t=t.replace(i,"")}r.value=parseFloat(t).toPrecision(12);break;case a.Number:r.value=Number(t);break;case a.Date:r.value=Date.parse(t);break;case a.Array:t.length?"object"==typeof t[0]?r.value=t.map(e=>JSON.stringify(e)).join(", "):r.value=t.join(", "):r.value="";break;case a.Object:r.value=t;break;case a.Undefined:r.value="";break;case a.Null:r.value=null}return r};function v(e,t){var r;let s;for(r of e.split("."))r=r.trim(),s?"object"!=typeof s||Array.isArray(s)||(s=s[r]):s=t[r];return s}const p=(e,t)=>tet<=e,b=(e,t)=>e<=t,w=(e,t,r)=>r?e.toLowerCase()==t.toLowerCase():e==t,k=(e,t)=>e===t,_=(e,t)=>e!=t,E=(e,t)=>e!==t,A=(e,t)=>null!=t&&"string"==typeof e&&0<=e.toLowerCase().indexOf(t.toString().toLowerCase()),L=(e,t)=>null!=t&&0<=e.toString().toLowerCase().indexOf(t.toString().toLowerCase()),x=(e,t)=>null!=t&&"string"==typeof e&&e.toLowerCase().indexOf(t.toString().toLowerCase())<0;function r(r,s){if(0===s.length)return r;{var n=r;const i=[],a=[];let e=[];for(const c of s)c.type&&c.type!==l.And?(e.length&&a.push(e),e=[c]):e.push(c);a.push(e);let t=[];for(const e of a)t=t.concat(I(n,e));t=[...new Set(t)];var o=n.length;for(let e=0;e":return p;case"<":return m;case">=":return f;case"<=":return b;case"is":case"==":return w;case"!is":case"!=":return _;case"===":return k;case"!==":return E;case"like":case"~":case"contains":return A;case"!contains":case"!like":case"!~":return x;default:return L}}(a.operator);if(!c(o,i,a.ignoreCase)){e=!1;break}}e&&r.push(s)}return r};function s(e,t){if(!t||0===t.length)return e;if(1{if(0===r.length)r=r.concat(i(n,e));else{for(const t of r)s=s.concat(i(t,e));r=s,s=[]}}),r}return i(e,t[0])}function i(e,t){const r=[],s=[];do{if(!e||0===e.length)break;var n=e.shift();if(!n)break;const i=n[t];var o=s.indexOf(i.toString());0<=o?r[o].push(n):(s.push(i.toString()),void 0!==r[s.length-1]?r[s.length-1].push(n):r.push([n]))}while(0{if(t){var r=e;const s={};for(const n of t){let e=r.map(e=>e[n].toString());const o=e.map(e=>d(e));o.some(e=>e===a.Float)?(e=e.map(e=>parseFloat(e)),s[n]=parseFloat(e.reduce((e,t)=>e+t).toFixed(2))):(e=e.map(e=>parseInt(e)),s[n]=e.reduce((e,t)=>e+t))}return s}return{}};class C{model;sortDetails=[];filterDetails=[];selection=[];groupByProperties=[];distinctProperties=[];concatenationToken=", ";constructor(e){this.model=JSON.parse(JSON.stringify(e))}sort(e){return this.sortDetails=e,this}orderBy(e,t){return this.sortDetails.push({propertyName:e,direction:t}),this}thenOrderBy(e,t){return this.orderBy(e,t)}filter(e){return Array.isArray(e)?this.filterDetails=e:this.filterDetails.push(e),this}where(e,t,r,s,n){return this.filterDetails.push({propertyName:e,operator:t,value:r,type:s,ignoreCase:n}),this}andWhere(e,t,r,s){return this.where(e,t,r,l.And,s),this}orWhere(e,t,r,s){return this.where(e,t,r,l.Or,s),this}group(e){return this.groupByProperties=e,this}groupBy(e){return this.groupByProperties.push(e),this}thenGroupBy(e){return this.groupByProperties.push(e),this}select(e){return Array.isArray(e)?this.selection=e:"*"!==e&&(this.selection=[e]),this}distinct(e,t){return t&&(this.concatenationToken=t),Array.isArray(e)?this.distinctProperties=e:e&&(this.distinctProperties=[e]),this}execute(){return s(function(t,r){if(0===r.length)return t;{var s=r;let e=[];for(const n of t){const o={};for(const i of s)o[i]=n[i];e.push(o)}return e}}(function(r,s,d){if(!s||!s.length)return r;const n=[],h=[];for(const m of r){const i={};let t="";for(const e of s){var u=v(e,m);i[e]=u,t+=u}if(!h.includes(t)){let e=r;for(const a of Object.keys(i))e=e.filter(e=>e[a]===i[a]);h.push(t),n.push(e)}}const t=[];for(const f of n){let e={};for(const c of f){var o,p=Object.keys(e);if(p.length)for(const l of p)s.includes(l)||(o=e[l],Array.isArray(o)?(o=c[l],Array.isArray(o)?e[l]=[...new Set(...e[l].concat(c[l]))]:e[l].includes(c[l])||e[l].push(c[l])):isNaN(e[l])&&isNaN(c[l])?e[l]!==c[l]&&(e[l]=[e[l],c[l]]):e[l]=e[l]+c[l]);else e=c}t.push(e)}return t.forEach(e=>{for(const t in e)Array.isArray(e[t])&&(e[t]=e[t].join(d))}),t}(n(r(JSON.parse(JSON.stringify(this.model)),this.filterDetails),this.sortDetails),this.distinctProperties,this.concatenationToken),this.selection),this.groupByProperties)}sum(e,t){e=Array.isArray(e)?e:[e];return o(t||this.model,e)}}function S(e,t){t=t?t.toUpperCase():"FLK-";return e.toUpperCase().includes(t)}function h(e,t){var{timeStamp:r,type:s,x:n,y:o}=e;let i=e.target;do{if(!i||"HTML"===i.tagName||S(i.tagName,t)){"HTML"===i.tagName&&(i=null);break}}while(i=i.parentNode||i.parentElement,!S(i.tagName,t));return{target:i,timeStamp:r,type:s,x:n,y:o}}class t{constructor(){}_topLevelClasses=[];_events=[];generateId(){return"flk-"+function e(){const t=([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,e=>(e^crypto.getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16)),r=t.split("-")[0];return window.$flightkitUUIDStore||(window.$flightkitUUIDStore=[]),window.$flightkitUUIDStore.some(e=>e===r)?e():(window.$flightkitUUIDStore.push(r),r)}()}render(t){if(!t.component)throw new Error("Component is not assigned! Can't render");t.id=t.id||this.generateId();var e=this._getAllEventAttributes(t);if(e){var r="#"+t.id;for(const o of e){var s="e-"+o;this.addEvent(r,o,t.getAttribute(s))}}var n=Object.keys(t.classList).length;if(n){for(let e=0;e{clearTimeout(this._renderTimer),this._assignToDom(t,t.component)},10)}addEvent(e,t,r){this._events.push({selector:e,eventType:t,callback:r})}_getExternalCallback(e){let t=void 0;for(const r of e.split("."))t=(t||window)[r];return t}_getAllEventAttributes(e){e=e.attributes;const t=Array.from(e).filter(e=>e.name.startsWith("e-"));return t.map(e=>e.name.slice(2))}_isFlightkitElement(e){return e.toUpperCase().includes("FLK-")}_outerEventHandler(e){const t=h(e),r=(t.contents=e.detail,t.target.getAttribute("e-"+t.type));let s=void 0;for(const n of r.split("."))s=(s||window)[n];return e.preventDefault(),e.stopPropagation(),s(t)}_addEvents(e){if(e.isConnected)for(const t of this._events){let e=document.querySelector(t.selector);e&&("function"==typeof t.callback?(e.removeEventListener(t.eventType,t.callback),e.addEventListener(t.eventType,t.callback)):(e.removeEventListener(t.eventType,this._outerEventHandler),e.addEventListener(t.eventType,this._outerEventHandler)))}}removeEvents(){for(const t of this._events){let e=document.querySelector(t.selector);e&&("function"==typeof t.callback?e.removeEventListener(t.eventType,t.callback):e.removeEventListener(t.eventType,this._outerEventHandler))}this._events=[]}_assignToDom(e,t){e.innerHTML="";for(const s of Array.isArray(t)?t:[t])e.append(s);const r=setTimeout(()=>{this._addEvents(e),clearTimeout(r)},10)}}function T(e){const t=new DOMParser;return t.parseFromString(e,"image/svg+xml").documentElement}class B extends HTMLElement{base;component=null;_contents=[];_orderBy=[];properties=new Set;_columnOrder=[];_filter="";_selectionProperty="";_selectedIds=new Set;uniqueEntriesByProperties={};propertyLabelDictionary={};static get observedAttributes(){return["contents","columns","order","filter","selection-property"]}get columnOrder(){return this._columnOrder.length?this._columnOrder:this.properties}set columnOrder(e){let t;"string"==typeof e&&(t=e.split(",")),t=e,this._columnOrder=t}get contents(){return this._contents}set contents(e){this.analyzeData(e),this._contents=new C(e)}get orderBy(){return this._orderBy}set orderBy(e){if(Array.isArray(e))this._orderBy=e;else{const s=[];for(const n of e.split(",")){var t=n.split("|"),r=t[0],t=1e[r._selectionProperty])):new Set;e=t?r.contents.execute():[];r._emit("select",r,{selection:e}),r._updateCheckboxes(r)}emitSelect(e){var t=e.target.checked,r=e.target.dataset.objectId;const s=h(e).target,n=(t?s._selectedIds.add(r):s._selectedIds.delete(r),s._selectionProperty);e=s.contents.execute().filter(e=>s._selectedIds.has(e[n]));s._emit("select",s,{selection:e}),s._updateCheckboxes(s)}sortData(e){const t=h(e).target,r=function(e,t){let r=e.target,s="";for(;r.dataset[t]?s=r.dataset[t]:r=r.parentNode,!s;);return s}(e,"column");r&&(-1<(e=t._orderBy.findIndex(e=>e.propertyName===r))?"asc"===t._orderBy[e].direction?t._orderBy[e].direction="desc":t._orderBy.splice(e,1):t._orderBy.push({propertyName:r,direction:"asc"}),t.createHtml(),t.base.render(t))}setColumnOrder(e){this._columnOrder=e?Array.isArray(e)?e:e.split(","):[]}analyzeData(t){this.properties=new Set;var r=t.length;for(let e=0;e"_"===e?" ":" "+e.toLowerCase());var r=t.charAt(0).toUpperCase()+t.slice(1);return this.propertyLabelDictionary[e]=r}createSelectionCheckbox(e){const t=document.createElement("input");return t.setAttribute("type","checkbox"),t.classList.add("flk-selection-checkbox"),e&&(t.dataset.selected=e[this._selectionProperty]),t}createRow(e){const t=document.createElement("tr");if(this._selectionProperty.length){const n=document.createElement("td");var r=this.base.generateId();const o=this.createSelectionCheckbox(e);o.id=r,o.dataset.objectId=e[this._selectionProperty];var s=e[this._selectionProperty];this._selectedIds.has(s)?o.checked=!0:o.checked=!1,this.base.addEvent("#"+r,"change",this.emitSelect),n.append(o),t.append(n)}for(const i of this.columnOrder){const a=document.createElement("td");a.innerText=e[i],t.append(a)}return t}createBody(e){const t=document.createElement("tbody");for(const s of e){var r=this.createRow(s,null);t.append(r)}return t}createHead(){const e=document.createElement("thead"),t=document.createElement("tr");if(t.classList.add("cursor-pointer"),this._selectionProperty.length){const n=document.createElement("th");var r=this.base.generateId();const o=this.createSelectionCheckbox();o.id=r;var d=this.contents.execute().length;0e.propertyName===i);if(s){const l=document.createElement("span");l.innerHTML="asc"===s.direction?'':'',a.append(l)}t.append(a)}return e.append(t),e}init(){this.createHtml(),this.base.render(this)}}class N extends HTMLElement{base;componentId;constructor(){super(),this.base=new t}connectedCallback(){var e=this.getAttribute("top"),t=this.getAttribute("left"),r=this.getAttribute("center"),s=this.getAttribute("zIndex");this.id||(this.id=this.base.generateId()),this.style.display="block",this.style.position="fixed","string"==typeof r?(this.style.top=e||"50%",this.style.left="50%",this.style.transform="translate(-50%, -50%)"):(this.style.top=e||this.clientTop+"px",this.style.left=t||this.clientLeft+"px"),s&&(this.style.zIndex=s),this.componentId=this.getAttribute("handle");const n=document.createElement("div");n.innerHTML=this.innerHTML,this.component=n;r="#"+(this.componentId||this.id);this.base.addEvent(r,"mousedown",this._dragElement),this.base.render(this)}disconnectedCallback(){this.base.removeEvents(this)}_dragElement(e){const r=h(e,"flk-draggable").target;let s,n;function t(e){s=e.clientX-r.offsetLeft,n=e.clientY-r.offsetTop}function o(e){var t=e.clientX-s,e=e.clientY-n;r.style.left=t+"px",r.style.top=e+"px"}function i(e){e.preventDefault()}function a(){r.removeAttribute("draggable"),r.removeEventListener("dragstart",t),r.removeEventListener("dragend",a),document.removeEventListener("dragover",i),document.removeEventListener("drop",o)}r.setAttribute("draggable",!0),r.addEventListener("dragstart",t),r.addEventListener("dragend",a),document.addEventListener("dragover",i),document.addEventListener("drop",o)}}class D extends HTMLElement{_id;base;_draggableId;constructor(){super(),this.base=new t}_emit(e,t,r){e=new CustomEvent(e,{detail:r,bubbles:!0,cancelable:!0});t.dispatchEvent(e)}closeModal(e){const t=h(e,"flk-modal").target;t.classList.add("hidden"),t._emit("hide",t,{hidden:!0,id:t.id})}openModal(e=!0){const t=document.getElementById(this._draggableId);e&&(t.style.top="40%",t.style.left="50%"),this.classList.remove("hidden")}connectedCallback(){this.id||(this.id=this.base.generateId());const e=document.createElement("div");var t=this.base.generateId();const r=document.createElement("flk-draggable"),s=(this._draggableId=this.base.generateId(),r.id=this._draggableId,r.setAttribute("center",""),r.setAttribute("top","40%"),r.setAttribute("handle",t),r.setAttribute("zIndex","1080"),r.classList.add("border","shadow-lg","bg-white"),document.createElement("div"));var n=this.getAttribute("title");if(n){const l=document.createElement("span");l.innerText=n,l.classList.add("ml-1","mr-auto"),s.append(l)}s.id=t;const o=this.getAttribute("header-class");let i=[];o?i=i.concat(o.split(" ")):i.push("bg-gray-light"),s.classList.add(...i,"border-bottom","row","justify-end");n=this.base.generateId();const a=document.createElement("button"),c=(a.classList.add("py-0","px-1","outline-hover","no-border",...i),a.innerText="X",a.id=n,s.append(a),r.append(s),document.createElement("div"));c.innerHTML=this.innerHTML,r.append(c),e.append(r),this.component=e,this.base.addEvent("#"+n,"click",this.closeModal),this.base.render(this),this.classList.add("hidden")}disconnectedCallback(){this.base.removeEvents(this)}}class O extends HTMLElement{base;_buttonId;_drawerId;_iconId;constructor(){super(),this.base=new t}connectedCallback(){this.style.position="relative",this.style.display="flex",this.style.width="fit-content",this._buttonId=this.base.generateId();const e=document.createElement("button"),t=(e.classList.add("row"),e.id=this._buttonId,document.createElement("span")),r=(t.innerText=this.getAttribute("text"),this._iconId=this.base.generateId(),document.createElement("span"));var s=T('');const n=T(''),o=(n.classList.add("hidden"),r.append(s,n),r.id=this._iconId,e.append(t,r),this._drawerId=this.base.generateId(),document.createElement("div"));o.id=this._drawerId,o.classList.add("shadow","inline-block","bg-white"),o.style.position="absolute",o.style.zIndex="1040";s=this.querySelector("template");s.innerHTML.length?o.innerHTML=s.innerHTML:o.append(s.firstChild),o.style.display="none",this.component=[e,o],this.base.addEvent("#"+this._buttonId,"click",this.toggleMenu);const i=document.querySelector("body");""!==i.getAttribute("flk-close-dropdown")&&(i.setAttribute("flk-close-dropdown",""),i.addEventListener("click",this.closeAllDropdownButtons)),this.base.render(this)}disconnectedCallback(){this.base.removeEvents(this);var e=document.querySelectorAll("flk-dropdown");if(!e||!e.length){const t=document.querySelector("body");t.removeAttribute("flk-close-dropdown"),t.removeEventListener("click",this.closeAllDropdownButtons)}}toggleMenu(e){const t=h(e).target;e=t._drawerId;const r=document.getElementById(e);var e="none"!==r.style.display,s=(r.style.display=e?"none":"block",t.getAttribute("drawer-width")),s=("string"==typeof t.getAttribute("right")&&(r.style.right="0px"),r.style.top=t.offsetHeight+"px",r.style.width=s||t.offsetWidth+"px",t._iconId);const n=document.getElementById(s);e?(n.childNodes[0].classList.remove("hidden"),n.childNodes[1].classList.add("hidden")):(n.childNodes[0].classList.add("hidden"),n.childNodes[1].classList.remove("hidden"))}_closeDropdown(){var e=this._drawerId;const t=document.getElementById(e);if("none"!==t.style.display){e=this._iconId;const r=document.getElementById(e);t.style.display="none",r.childNodes[0].classList.remove("hidden"),r.childNodes[1].classList.add("hidden")}}closeAllDropdownButtons(e){var t,r=h(e,"flk-dropdown").target,e=document.querySelectorAll("flk-dropdown");if(r)for(const s of e)r._buttonId!==s._buttonId&&(t=s._drawerId,"none"!==document.getElementById(t).style.display&&s._closeDropdown());else for(const n of e)n._closeDropdown()}}customElements.define("flk-table",B),customElements.define("flk-draggable",N),customElements.define("flk-modal",D),customElements.define("flk-dropdown",O)}(); \ No newline at end of file +!function(){"use strict";var a,l,g,e;(e=a=a||{}).Date="date",e.String="string",e.Float="float",e.Number="number",e.Array="array",e.Object="object",e.Bool="bool",e.Currency="currency",e.Undefined="undefined",e.Null="null";const c={date:/^(\d{1,4}-\d{1,4}-\d{1,4}(T)?)/gim,currency:/^[$|€]\s?[0-9]*(\.|,)?\d*(\.|,)?\d*/gim,float:/\d+[,|.]\d+[,|.]?\d*/gim,currencySign:/\$|€/gim,array:/^\s?[[].[^,]+[\]],?/gi,precision:/[-+$€,.]/gm,string:/[a-zA-Z]/gim},d=e=>{return null===e||"null"===e?a.Null:e||0===e||!1===e?null===new RegExp(c.date).exec(e)||isNaN(Date.parse(e))?new RegExp(c.currency).exec(e)?a.Currency:!new RegExp(c.string).exec(e)&&new RegExp(c.float).exec(e.toString())?a.Float:isNaN(e)&&0!==e?Array.isArray(e)?a.Array:"object"==typeof e?a.Object:a.String:a.Number:a.Date:a.Undefined},u=(t,e)=>{const r={value:void 0,type:e=e||d(t),currencySign:""};switch(r.type){case a.String:r.value=t.toString();break;case a.Float:case a.Currency:var s=(t=t.toString()).match(new RegExp(/(,)/gim)),n=t.match(new RegExp(/(\.)/gim));if(s)for(let e=1;e<=s.length;e++)t=e!==s.length||n?t.replace(",",""):t.replace(",",".");if(r.type===a.Currency){const i=new RegExp(c.currencySign);var o=i.exec(t);r.currencySign=null!==o?o[0]:"",t=t.replace(i,"")}r.value=parseFloat(t).toPrecision(12);break;case a.Number:r.value=Number(t);break;case a.Date:r.value=Date.parse(t);break;case a.Array:t.length?"object"==typeof t[0]?r.value=t.map(e=>JSON.stringify(e)).join(", "):r.value=t.join(", "):r.value="";break;case a.Object:r.value=t;break;case a.Undefined:r.value="";break;case a.Null:r.value=null}return r};function v(e,t){var r;let s;for(r of e.split("."))r=r.trim(),s?"object"!=typeof s||Array.isArray(s)||(s=s[r]):s=t[r];return s}const p=(e,t)=>tet<=e,b=(e,t)=>e<=t,w=(e,t,r)=>r?e.toLowerCase()==t.toLowerCase():e==t,k=(e,t)=>e===t,_=(e,t)=>e!=t,E=(e,t)=>e!==t,A=(e,t)=>null!=t&&"string"==typeof e&&0<=e.toLowerCase().indexOf(t.toString().toLowerCase()),L=(e,t)=>null!=t&&0<=e.toString().toLowerCase().indexOf(t.toString().toLowerCase()),x=(e,t)=>null!=t&&"string"==typeof e&&e.toLowerCase().indexOf(t.toString().toLowerCase())<0;function r(r,s){if(0===s.length)return r;{var n=r;const i=[],a=[];let e=[];for(const c of s)c.type&&c.type!==l.And?(e.length&&a.push(e),e=[c]):e.push(c);a.push(e);let t=[];for(const e of a)t=t.concat(I(n,e));t=[...new Set(t)];var o=n.length;for(let e=0;e":return p;case"<":return m;case">=":return f;case"<=":return b;case"is":case"==":return w;case"!is":case"!=":return _;case"===":return k;case"!==":return E;case"like":case"~":case"contains":return A;case"!contains":case"!like":case"!~":return x;default:return L}}(a.operator);if(!c(o,i,a.ignoreCase)){e=!1;break}}e&&r.push(s)}return r};function s(e,t){if(!t||0===t.length)return e;if(1{if(0===r.length)r=r.concat(i(n,e));else{for(const t of r)s=s.concat(i(t,e));r=s,s=[]}}),r}return i(e,t[0])}function i(e,t){const r=[],s=[];do{if(!e||0===e.length)break;var n=e.shift();if(!n)break;const i=n[t];var o=s.indexOf(i.toString());0<=o?r[o].push(n):(s.push(i.toString()),void 0!==r[s.length-1]?r[s.length-1].push(n):r.push([n]))}while(0{if(t){var r=e;const s={};for(const n of t){let e=r.map(e=>e[n].toString());const o=e.map(e=>d(e));o.some(e=>e===a.Float)?(e=e.map(e=>parseFloat(e)),s[n]=parseFloat(e.reduce((e,t)=>e+t).toFixed(2))):(e=e.map(e=>parseInt(e)),s[n]=e.reduce((e,t)=>e+t))}return s}return{}};class C{model;sortDetails=[];filterDetails=[];selection=[];groupByProperties=[];distinctProperties=[];concatenationToken=", ";constructor(e){this.model=JSON.parse(JSON.stringify(e))}sort(e){return this.sortDetails=e,this}orderBy(e,t){return this.sortDetails.push({propertyName:e,direction:t}),this}thenOrderBy(e,t){return this.orderBy(e,t)}filter(e){return Array.isArray(e)?this.filterDetails=e:this.filterDetails.push(e),this}where(e,t,r,s,n){return this.filterDetails.push({propertyName:e,operator:t,value:r,type:s,ignoreCase:n}),this}andWhere(e,t,r,s){return this.where(e,t,r,l.And,s),this}orWhere(e,t,r,s){return this.where(e,t,r,l.Or,s),this}group(e){return this.groupByProperties=e,this}groupBy(e){return this.groupByProperties.push(e),this}thenGroupBy(e){return this.groupByProperties.push(e),this}select(e){return Array.isArray(e)?this.selection=e:"*"!==e&&(this.selection=[e]),this}distinct(e,t){return t&&(this.concatenationToken=t),Array.isArray(e)?this.distinctProperties=e:e&&(this.distinctProperties=[e]),this}execute(){return s(function(t,r){if(0===r.length)return t;{var s=r;let e=[];for(const n of t){const o={};for(const i of s)o[i]=n[i];e.push(o)}return e}}(function(r,s,d){if(!s||!s.length)return r;const n=[],h=[];for(const m of r){const i={};let t="";for(const e of s){var u=v(e,m);i[e]=u,t+=u}if(!h.includes(t)){let e=r;for(const a of Object.keys(i))e=e.filter(e=>e[a]===i[a]);h.push(t),n.push(e)}}const t=[];for(const f of n){let e={};for(const c of f){var o,p=Object.keys(e);if(p.length)for(const l of p)s.includes(l)||(o=e[l],Array.isArray(o)?(o=c[l],Array.isArray(o)?e[l]=[...new Set(...e[l].concat(c[l]))]:e[l].includes(c[l])||e[l].push(c[l])):isNaN(e[l])&&isNaN(c[l])?e[l]!==c[l]&&(e[l]=[e[l],c[l]]):e[l]=e[l]+c[l]);else e=c}t.push(e)}return t.forEach(e=>{for(const t in e)Array.isArray(e[t])&&(e[t]=e[t].join(d))}),t}(n(r(JSON.parse(JSON.stringify(this.model)),this.filterDetails),this.sortDetails),this.distinctProperties,this.concatenationToken),this.selection),this.groupByProperties)}sum(e,t){e=Array.isArray(e)?e:[e];return o(t||this.model,e)}}function S(e,t){t=t?t.toUpperCase():"FLK-";return e.toUpperCase().includes(t)}function h(e,t){var{timeStamp:r,type:s,x:n,y:o}=e;let i=e.target;do{if(!i||"HTML"===i.tagName||S(i.tagName,t)){"HTML"===i.tagName&&(i=null);break}}while(i=i.parentNode||i.parentElement,!S(i.tagName,t));return{target:i,timeStamp:r,type:s,x:n,y:o}}class t{constructor(){}_topLevelClasses=[];_events=[];generateId(){return"flk-"+function e(){const t=([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,e=>(e^crypto.getRandomValues(new Uint8Array(1))[0]&15>>e/4).toString(16)),r=t.split("-")[0];return window.$flightkitUUIDStore||(window.$flightkitUUIDStore=[]),window.$flightkitUUIDStore.some(e=>e===r)?e():(window.$flightkitUUIDStore.push(r),r)}()}render(t){if(!t.component)throw new Error("Component is not assigned! Can't render");t.id=t.id||this.generateId();var e=this._getAllEventAttributes(t);if(e){var r="#"+t.id;for(const o of e){var s="e-"+o;this.addEvent(r,o,t.getAttribute(s))}}var n=Object.keys(t.classList).length;if(n){for(let e=0;e{clearTimeout(this._renderTimer),this._assignToDom(t,t.component)},10)}addEvent(e,t,r){this._events.push({selector:e,eventType:t,callback:r})}_getExternalCallback(e){let t=void 0;for(const r of e.split("."))t=(t||window)[r];return t}_getAllEventAttributes(e){e=e.attributes;const t=Array.from(e).filter(e=>e.name.startsWith("e-"));return t.map(e=>e.name.slice(2))}_isFlightkitElement(e){return e.toUpperCase().includes("FLK-")}_outerEventHandler(e){const t=h(e),r=(t.contents=e.detail,t.target.getAttribute("e-"+t.type));let s=void 0;for(const n of r.split("."))s=(s||window)[n];return e.preventDefault(),e.stopPropagation(),s(t)}_addEvents(e){if(e.isConnected)for(const t of this._events){let e=document.querySelector(t.selector);e&&("function"==typeof t.callback?(e.removeEventListener(t.eventType,t.callback),e.addEventListener(t.eventType,t.callback)):(e.removeEventListener(t.eventType,this._outerEventHandler),e.addEventListener(t.eventType,this._outerEventHandler)))}}removeEvents(){for(const t of this._events){let e=document.querySelector(t.selector);e&&("function"==typeof t.callback?e.removeEventListener(t.eventType,t.callback):e.removeEventListener(t.eventType,this._outerEventHandler))}this._events=[]}_assignToDom(e,t){e.innerHTML="";for(const s of Array.isArray(t)?t:[t])e.append(s);const r=setTimeout(()=>{this._addEvents(e),clearTimeout(r)},10)}}function T(e){const t=new DOMParser;return t.parseFromString(e,"image/svg+xml").documentElement}class B extends HTMLElement{base;component=null;_contents=[];_orderBy=[];properties=new Set;_columnOrder=[];_filter="";_selectionProperty="";_selectedIds=new Set;uniqueEntriesByProperties={};propertyLabelDictionary={};static get observedAttributes(){return["contents","columns","order","filter","selection-property"]}get columnOrder(){return this._columnOrder.length?this._columnOrder:this.properties}set columnOrder(e){let t;"string"==typeof e&&(t=e.split(",")),t=e,this._columnOrder=t}get contents(){return this._contents}set contents(e){this.analyzeData(e),this._contents=new C(e)}get orderBy(){return this._orderBy}set orderBy(e){if(Array.isArray(e))this._orderBy=e;else{const s=[];for(const n of e.split(",")){var t=n.split("|"),r=t[0],t=1e[r._selectionProperty])):new Set;e=t?r.contents.execute():[];r._emit("select",r,{selection:e}),r._updateCheckboxes(r)}emitSelect(e){var t=e.target.checked,r=e.target.dataset.objectId;const s=h(e).target,n=(t?s._selectedIds.add(r):s._selectedIds.delete(r),s._selectionProperty);e=s.contents.execute().filter(e=>s._selectedIds.has(e[n]));s._emit("select",s,{selection:e}),s._updateCheckboxes(s)}sortData(e){const t=h(e).target,r=function(e,t){let r=e.target,s="";for(;r.dataset[t]?s=r.dataset[t]:r=r.parentNode,!s;);return s}(e,"column");r&&(-1<(e=t._orderBy.findIndex(e=>e.propertyName===r))?"asc"===t._orderBy[e].direction?t._orderBy[e].direction="desc":t._orderBy.splice(e,1):t._orderBy.push({propertyName:r,direction:"asc"}),t.createHtml(),t.base.render(t))}setColumnOrder(e){this._columnOrder=e?Array.isArray(e)?e:e.split(","):[]}analyzeData(t){this.properties=new Set;var r=t.length;for(let e=0;e"_"===e?" ":" "+e.toLowerCase());var r=t.charAt(0).toUpperCase()+t.slice(1);return this.propertyLabelDictionary[e]=r}createSelectionCheckbox(e){const t=document.createElement("input");return t.setAttribute("type","checkbox"),t.classList.add("flk-selection-checkbox"),e&&(t.dataset.selected=e[this._selectionProperty]),t}createRow(e){const t=document.createElement("tr");if(this._selectionProperty.length){const n=document.createElement("td");var r=this.base.generateId();const o=this.createSelectionCheckbox(e);o.id=r,o.dataset.objectId=e[this._selectionProperty];var s=e[this._selectionProperty];this._selectedIds.has(s)?o.checked=!0:o.checked=!1,this.base.addEvent("#"+r,"change",this.emitSelect),n.append(o),t.append(n)}for(const i of this.columnOrder){const a=document.createElement("td");a.innerText=e[i],t.append(a)}return t}createBody(e){const t=document.createElement("tbody");for(const s of e){var r=this.createRow(s,null);t.append(r)}return t}createHead(){const e=document.createElement("thead"),t=document.createElement("tr");if(t.classList.add("cursor-pointer"),this._selectionProperty.length){const n=document.createElement("th");var r=this.base.generateId();const o=this.createSelectionCheckbox();o.id=r;var d=this.contents.execute().length;0e.propertyName===i);if(s){const l=document.createElement("span");l.innerHTML="asc"===s.direction?'':'',a.append(l)}t.append(a)}return e.append(t),e}init(){this.createHtml(),this.base.render(this)}}class N extends HTMLElement{base;componentId;constructor(){super(),this.base=new t}connectedCallback(){var e=this.getAttribute("top"),t=this.getAttribute("left"),r=this.getAttribute("center"),s=this.getAttribute("zIndex");this.id||(this.id=this.base.generateId()),this.style.display="block",this.style.position="fixed","string"==typeof r?(this.style.top=e||"50%",this.style.left="50%",this.style.transform="translate(-50%, -50%)"):(this.style.top=e||this.clientTop+"px",this.style.left=t||this.clientLeft+"px"),s&&(this.style.zIndex=s),this.componentId=this.getAttribute("handle");const n=document.createElement("div");n.innerHTML=this.innerHTML,this.component=n;r="#"+(this.componentId||this.id);this.base.addEvent(r,"mousedown",this._dragElement),this.base.render(this)}disconnectedCallback(){this.base.removeEvents(this)}_dragElement(e){const r=h(e,"flk-draggable").target;let s,n;function t(e){s=e.clientX-r.offsetLeft,n=e.clientY-r.offsetTop}function o(e){var t=e.clientX-s,e=e.clientY-n;r.style.left=t+"px",r.style.top=e+"px"}function i(e){e.preventDefault()}function a(){r.removeAttribute("draggable"),r.removeEventListener("dragstart",t),r.removeEventListener("dragend",a),document.removeEventListener("dragover",i),document.removeEventListener("drop",o)}r.setAttribute("draggable",!0),r.addEventListener("dragstart",t),r.addEventListener("dragend",a),document.addEventListener("dragover",i),document.addEventListener("drop",o)}}class D extends HTMLElement{_id;base;_draggableId;constructor(){super(),this.base=new t}_emit(e,t,r){e=new CustomEvent(e,{detail:r,bubbles:!0,cancelable:!0});t.dispatchEvent(e)}closeModal(e){const t=h(e,"flk-modal").target;t.classList.add("hidden"),t._emit("hide",t,{hidden:!0,id:t.id})}openModal(e=!0){const t=document.getElementById(this._draggableId);e&&(t.style.top="40%",t.style.left="50%"),this.classList.remove("hidden")}connectedCallback(){this.id||(this.id=this.base.generateId());const e=document.createElement("div");var t=this.base.generateId();const r=document.createElement("flk-draggable"),s=(this._draggableId=this.base.generateId(),r.id=this._draggableId,r.setAttribute("center",""),r.setAttribute("top","40%"),r.setAttribute("handle",t),r.setAttribute("zIndex","1080"),r.classList.add("border","shadow-lg","bg-white"),r.style.width="max-content",document.createElement("div"));var n=this.getAttribute("title");if(n){const l=document.createElement("span");l.innerText=n,l.classList.add("ml-1","mr-auto"),s.append(l)}s.id=t;const o=this.getAttribute("header-class");let i=[];o?i=i.concat(o.split(" ")):i.push("bg-gray-light"),s.classList.add(...i,"border-bottom","row","justify-end");n=this.base.generateId();const a=document.createElement("button"),c=(a.classList.add("py-0","px-1","outline-hover","no-border",...i),a.innerText="X",a.id=n,s.append(a),r.append(s),document.createElement("div"));c.innerHTML=this.innerHTML,r.append(c),e.append(r),this.component=e,this.base.addEvent("#"+n,"click",this.closeModal),this.base.render(this),this.classList.add("hidden")}disconnectedCallback(){this.base.removeEvents(this)}}class O extends HTMLElement{base;_buttonId;_drawerId;_iconId;constructor(){super(),this.base=new t}connectedCallback(){this.style.position="relative",this.style.display="flex",this.style.width="fit-content",this._buttonId=this.base.generateId();const e=document.createElement("button"),t=(e.classList.add("row"),e.id=this._buttonId,document.createElement("span")),r=(t.innerText=this.getAttribute("text"),this._iconId=this.base.generateId(),document.createElement("span"));var s=T('');const n=T(''),o=(n.classList.add("hidden"),r.append(s,n),r.id=this._iconId,e.append(t,r),this._drawerId=this.base.generateId(),document.createElement("div"));o.id=this._drawerId,o.classList.add("shadow","inline-block","bg-white"),o.style.position="absolute",o.style.zIndex="1040";s=this.querySelector("template");s.innerHTML.length?o.innerHTML=s.innerHTML:o.append(s.firstChild),o.style.display="none",this.component=[e,o],this.base.addEvent("#"+this._buttonId,"click",this.toggleMenu);const i=document.querySelector("body");""!==i.getAttribute("flk-close-dropdown")&&(i.setAttribute("flk-close-dropdown",""),i.addEventListener("click",this.closeAllDropdownButtons)),this.base.render(this)}disconnectedCallback(){this.base.removeEvents(this);var e=document.querySelectorAll("flk-dropdown");if(!e||!e.length){const t=document.querySelector("body");t.removeAttribute("flk-close-dropdown"),t.removeEventListener("click",this.closeAllDropdownButtons)}}toggleMenu(e){const t=h(e).target;e=t._drawerId;const r=document.getElementById(e);var e="none"!==r.style.display,s=(r.style.display=e?"none":"block",t.getAttribute("drawer-width")),s=("string"==typeof t.getAttribute("right")&&(r.style.right="0px"),r.style.top=t.offsetHeight+"px",r.style.width=s||t.offsetWidth+"px",t._iconId);const n=document.getElementById(s);e?(n.childNodes[0].classList.remove("hidden"),n.childNodes[1].classList.add("hidden")):(n.childNodes[0].classList.add("hidden"),n.childNodes[1].classList.remove("hidden"))}_closeDropdown(){var e=this._drawerId;const t=document.getElementById(e);if("none"!==t.style.display){e=this._iconId;const r=document.getElementById(e);t.style.display="none",r.childNodes[0].classList.remove("hidden"),r.childNodes[1].classList.add("hidden")}}closeAllDropdownButtons(e){var t,r=h(e,"flk-dropdown").target,e=document.querySelectorAll("flk-dropdown");if(r)for(const s of e)r._buttonId!==s._buttonId&&(t=s._drawerId,"none"!==document.getElementById(t).style.display&&s._closeDropdown());else for(const n of e)n._closeDropdown()}}customElements.define("flk-table",B),customElements.define("flk-draggable",N),customElements.define("flk-modal",D),customElements.define("flk-dropdown",O)}(); \ No newline at end of file diff --git a/flightkit/components/modal.js b/flightkit/components/modal.js index 1ebf574..c65215d 100644 --- a/flightkit/components/modal.js +++ b/flightkit/components/modal.js @@ -55,6 +55,7 @@ export class FlightkitModal extends HTMLElement { flkDraggable.setAttribute('handle', windowHeaderId); flkDraggable.setAttribute('zIndex', '1080'); flkDraggable.classList.add('border', 'shadow-lg', 'bg-white'); + flkDraggable.style.width = 'max-content'; /** fixes collapsing at the border. */ const windowHeader = document.createElement('div');